docxodus 9.8.0 → 10.0.0

package/dist/pagination.js

@@ -6,12 +6,124 @@
  */
 import { formatPageNumber } from "./page-number-format.js";
 import { DEFAULT_MARGIN, DEFAULT_PAGE_WIDTH, parseSectionDimensions, ptToPx, pxToPt, resolvePageBands, } from "./page-geometry.js";
+/**
+ * Whether two sections describe the same physical page box. A continuous section
+ * break is only honorable when it does — a changed page size or margin set forces
+ * a real page break, which is Word's behavior too.
+ */
+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);
+}
+/** Explicit no-pages contract for a continuous viewer. It never estimates page numbers. */
+export function createUnavailablePageMap(documentVersion, rendererFingerprint, mode = "continuous") {
+    if (!rendererFingerprint)
+        throw new Error("rendererFingerprint must be non-empty");
+    return {
+        schemaVersion: 1,
+        mode,
+        availability: "unavailable",
+        documentVersion,
+        rendererFingerprint,
+        pages: [],
+        fragments: [],
+    };
+}
+const activePageCitationHighlights = new WeakMap();
+/** Remove the citation highlight previously applied within this paginated root. */
+export function clearPageCitationHighlight(root) {
+    const active = activePageCitationHighlights.get(root);
+    if (!active)
+        return;
+    if (active.highlightClass && active.addedClass) {
+        active.target.classList.remove(active.highlightClass);
+    }
+    for (const style of active.inlineStyles ?? []) {
+        if (style.value) {
+            active.target.style.setProperty(style.name, style.value, style.priority);
+        }
+        else {
+            active.target.style.removeProperty(style.name);
+        }
+    }
+    activePageCitationHighlights.delete(root);
+}
+/**
+ * Navigate an exact citation over an already-paginated DOM. The page-qualified fragment id is
+ * authoritative; page + canonical source identity is a compatibility fallback for older v1 DOMs.
+ */
+export function navigateToPageCitation(root, citation, options = {}) {
+    clearPageCitationHighlight(root);
+    if (citation.availability !== "available" || citation.fragments.length === 0) {
+        return { navigated: false, unavailableReason: "citation_unavailable" };
+    }
+    const byAttribute = (name, value, within = root) => {
+        for (const node of Array.from(within.querySelectorAll(`[${name}]`))) {
+            if (node.getAttribute(name) === value)
+                return node;
+        }
+        return null;
+    };
+    const fragment = citation.fragments[0];
+    let target = byAttribute("data-page-fragment-id", fragment.fragmentId);
+    if (!target) {
+        const page = byAttribute("data-page-number", String(fragment.pageNumber));
+        if (page)
+            target = byAttribute("data-source-anchor-id", citation.anchorId, page) ?? page;
+    }
+    if (!target) {
+        return {
+            navigated: false,
+            pageNumber: fragment.pageNumber,
+            fragmentId: fragment.fragmentId,
+            unavailableReason: "fragment_not_found",
+        };
+    }
+    if (options.highlightClass) {
+        const addedClass = !target.classList.contains(options.highlightClass);
+        target.classList.add(options.highlightClass);
+        activePageCitationHighlights.set(root, {
+            target,
+            highlightClass: options.highlightClass,
+            addedClass,
+        });
+    }
+    else if (options.highlight !== false) {
+        const names = ["outline", "outline-offset", "background-color"];
+        const inlineStyles = names.map((name) => ({
+            name,
+            value: target.style.getPropertyValue(name),
+            priority: target.style.getPropertyPriority(name),
+        }));
+        target.style.setProperty("outline", "3px solid #f4b400", "important");
+        target.style.setProperty("outline-offset", "2px", "important");
+        target.style.setProperty("background-color", "rgba(255, 235, 59, .18)", "important");
+        activePageCitationHighlights.set(root, { target, inlineStyles });
+    }
+    target.scrollIntoView({
+        behavior: options.behavior ?? "smooth",
+        block: options.block ?? "center",
+    });
+    return {
+        navigated: true,
+        target,
+        pageNumber: fragment.pageNumber,
+        fragmentId: fragment.fragmentId,
+    };
+}
 // Default letter size in points (612 x 792 = 8.5" x 11")
 // Maximum percentage of content height that footnotes can occupy
 // This allows footnotes to expand upward into body content space when needed
 const MAX_FOOTNOTE_AREA_RATIO = 0.6; // 60% of content height
-// Minimum body content height per page (to avoid pages with only footnotes)
-const MIN_BODY_CONTENT_HEIGHT = 72; // 1 inch minimum body content
+// Hidden measurement and final absolutely-positioned note bands differ by sub-pixel border/margin
+// rounding in Chromium. Reserve a small physical-unit guard so the last baseline stays visible.
+const FOOTNOTE_MEASUREMENT_GUARD_PT = 2;
+/** Internal provenance retained only while a note element waits between pages. */
+const FOOTNOTE_SOURCE_POSITION_ATTR = "data-pagination-footnote-source-position";
 export class PaginationEngine {
     /**
      * Creates a new pagination engine.
@@ -21,16 +133,28 @@ export class PaginationEngine {
      * @param options - Pagination options
      */
     constructor(staging, container, options = {}) {
+        this.createdPageCount = 0;
+        this.footnoteSeparator = null;
+        this.footnoteContinuationSeparator = null;
+        this.footnoteLayoutLikeWord8 = false;
         this.pendingFootnoteContinuation = null;
         /** Per-section `w:pgNumType` (start / format), read off the section wrappers. */
         this.pageNumbering = new Map();
+        this.lastPages = [];
+        this.expectedPageMapAnchorIds = new Set();
+        this.state = "ready";
+        const ownerDocument = typeof staging !== "string"
+            ? staging.ownerDocument
+            : typeof container !== "string"
+                ? container.ownerDocument
+                : globalThis.document;
         this.stagingElement =
             typeof staging === "string"
-                ? document.getElementById(staging)
+                ? ownerDocument.getElementById(staging)
                 : staging;
         this.containerElement =
             typeof container === "string"
-                ? document.getElementById(container)
+                ? ownerDocument.getElementById(container)
                 : container;
         if (!this.stagingElement) {
             throw new Error("Staging element not found");
@@ -38,13 +162,27 @@ export class PaginationEngine {
         if (!this.containerElement) {
             throw new Error("Container element not found");
         }
+        if (this.stagingElement.ownerDocument !== this.containerElement.ownerDocument) {
+            throw new Error("Staging and container elements must belong to the same document");
+        }
+        const view = ownerDocument.defaultView;
+        if (!view) {
+            throw new Error("Pagination requires an attached document with a defaultView");
+        }
+        this.document = ownerDocument;
+        this.view = view;
         this.scale = options.scale ?? 1;
         this.cssPrefix = options.cssPrefix ?? "page-";
         this.showPageNumbers = options.showPageNumbers ?? true;
         this.pageGap = options.pageGap ?? 20;
         this.fragmentParagraphs = options.fragmentParagraphs ?? false;
+        this.deferFragmentIdentities = options.deferFragmentIdentities ?? false;
+        this.cancellationCheckpoint = options.checkCancellation;
+        this.pageCountCheckpoint = options.checkPageCount;
+        this.layoutToken = options.layoutToken;
         this.hfRegistry = new Map();
         this.footnoteRegistry = new Map();
+        this.commentMarginRegistry = new Map();
     }
     /**
      * Runs the pagination process.
@@ -52,39 +190,524 @@ export class PaginationEngine {
      * @returns PaginationResult with page information
      */
     paginate() {
-        const pages = [];
-        let pageNumber = 1;
-        // Parse the header/footer registry if present
-        this.hfRegistry = this.parseHeaderFooterRegistry();
-        // Parse the footnote registry if present
-        this.footnoteRegistry = this.parseFootnoteRegistry();
-        // Find all section containers
-        const sections = this.stagingElement.querySelectorAll("[data-section-index]");
-        this.pageNumbering = this.parsePageNumbering(sections);
-        // If no sections found, treat the entire staging content as one section
-        const sectionsToProcess = sections.length > 0 ? Array.from(sections) : [this.stagingElement];
-        for (const section of sectionsToProcess) {
-            const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
-            const dims = parseSectionDimensions(section);
-            // Make staging visible for measurement
-            this.stagingElement.style.visibility = "hidden";
-            this.stagingElement.style.position = "absolute";
-            this.stagingElement.style.left = "-9999px";
-            this.stagingElement.style.display = "block";
-            // Set width for accurate line wrapping
-            section.style.width = `${dims.contentWidth}pt`;
-            // Measure all blocks in this section
-            const blocks = this.measureBlocks(section, dims);
-            // Flow blocks into pages
-            const sectionPages = this.flowToPages(blocks, dims, pageNumber, sectionIndex);
-            pages.push(...sectionPages);
-            pageNumber += sectionPages.length;
-        }
-        // Hide staging after measurement
-        this.stagingElement.style.display = "none";
-        // Every page box exists now, so NUMPAGES has an answer and each PAGE marker knows its page.
-        this.substitutePageNumberFields(pages.length);
-        return { totalPages: pages.length, pages };
+        this.checkpoint();
+        if (this.state !== "ready") {
+            throw new Error(`PaginationEngine is one-shot and is already ${this.state}`);
+        }
+        if (!this.stagingElement.isConnected || !this.containerElement.isConnected) {
+            throw new Error("Pagination requires staging and container elements attached to their document");
+        }
+        if (this.document.documentElement.getBoundingClientRect().width <= 0) {
+            throw new Error("Pagination requires a browsing context with non-zero layout");
+        }
+        this.state = "running";
+        try {
+            const pages = [];
+            let pageNumber = 1;
+            // Parse the header/footer registry if present
+            this.hfRegistry = this.parseHeaderFooterRegistry();
+            // Parse the footnote registry if present
+            this.footnoteRegistry = this.parseFootnoteRegistry();
+            ({
+                normal: this.footnoteSeparator,
+                continuation: this.footnoteContinuationSeparator,
+            } = this.parseFootnoteSeparators());
+            // Parse the margin-comment registry if present. Its entries are cloned into
+            // the side substrate of pages that contain the corresponding range marker.
+            this.commentMarginRegistry = this.parseCommentMarginRegistry();
+            this.footnoteLayoutLikeWord8 =
+                this.stagingElement.dataset.footnoteLayoutLikeWord8 === "true";
+            // Find all section containers
+            const sections = this.stagingElement.querySelectorAll("[data-section-index]");
+            this.pageNumbering = this.parsePageNumbering(sections);
+            // If no sections found, treat the entire staging content as one section
+            const sectionsToProcess = sections.length > 0 ? Array.from(sections) : [this.stagingElement];
+            // Snapshot the addressable SOURCE inventory before flow moves nodes out of staging. PageMap
+            // completeness cannot be inferred from whatever survives into page boxes: that would let a
+            // dropped block silently disappear from both the DOM and the supposedly authoritative map.
+            // Running-story variants and cited notes are inventoried from their source registries.
+            this.expectedPageMapAnchorIds = new Set();
+            const referencedFootnoteIds = new Set();
+            const referencedCommentIds = new Set();
+            for (const section of sectionsToProcess) {
+                this.checkpoint();
+                this.collectExpectedSourceAnchors(section, this.expectedPageMapAnchorIds, true);
+                for (const reference of Array.from(section.querySelectorAll("[data-footnote-id]"))) {
+                    this.checkpoint();
+                    if (reference.closest("#pagination-footnote-registry, #pagination-hf-registry"))
+                        continue;
+                    const id = reference.dataset.footnoteId;
+                    if (id)
+                        referencedFootnoteIds.add(id);
+                }
+                for (const reference of Array.from(section.querySelectorAll("[data-comment-id]"))) {
+                    this.checkpoint();
+                    if (reference.closest("#pagination-comment-margin-registry, #pagination-footnote-registry, #pagination-hf-registry"))
+                        continue;
+                    const id = reference.dataset.commentId;
+                    if (id)
+                        referencedCommentIds.add(id);
+                }
+            }
+            for (const id of referencedFootnoteIds) {
+                this.checkpoint();
+                const source = this.footnoteRegistry.get(id);
+                if (!source)
+                    continue;
+                this.collectExpectedSourceAnchors(source, this.expectedPageMapAnchorIds);
+                // Margin comments are presentation stories selected by markers. Markers
+                // inside a cited footnote are just as visible/addressable as body markers.
+                for (const reference of Array.from(source.querySelectorAll("[data-comment-id]"))) {
+                    this.checkpoint();
+                    const commentId = reference.dataset.commentId;
+                    if (commentId)
+                        referencedCommentIds.add(commentId);
+                }
+            }
+            for (const id of referencedCommentIds) {
+                this.checkpoint();
+                const source = this.commentMarginRegistry.get(id);
+                if (source)
+                    this.collectExpectedSourceAnchors(source, this.expectedPageMapAnchorIds);
+            }
+            const runs = [];
+            for (const section of sectionsToProcess) {
+                this.checkpoint();
+                const dims = parseSectionDimensions(section);
+                const previous = runs[runs.length - 1];
+                if (previous &&
+                    section.dataset.sectionType === "continuous" &&
+                    samePageBox(previous.dims, dims)) {
+                    previous.sections.push(section);
+                    previous.sectionDimensions.set(parseInt(section.dataset.sectionIndex || "0", 10), dims);
+                }
+                else {
+                    const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
+                    runs.push({
+                        sections: [section],
+                        sectionIndex,
+                        sectionType: section.dataset.sectionType ?? "nextPage",
+                        dims,
+                        sectionDimensions: new Map([[sectionIndex, dims]]),
+                    });
+                }
+            }
+            for (const run of runs) {
+                this.checkpoint();
+                // Odd/even section breaks begin the new section on the requested physical side. When the
+                // following page has the opposite parity, Word inserts one intentionally blank filler page.
+                // It belongs to the preceding section, advances physical/logical numbering, retains that
+                // section's paper geometry, and carries no running story.
+                const needsParityFiller = pages.length > 0
+                    && ((run.sectionType === "oddPage" && pageNumber % 2 === 0)
+                        || (run.sectionType === "evenPage" && pageNumber % 2 === 1));
+                if (needsParityFiller) {
+                    const precedingPage = pages[pages.length - 1];
+                    const precedingPageInSection = parseInt(precedingPage.element.dataset.pageInSection ?? "1", 10);
+                    const precedingDisplayedPageNumber = parseInt(precedingPage.element.dataset.displayedPageNumber ?? String(precedingPage.pageNumber), 10);
+                    const filler = this.createPage(precedingPage.dimensions, pageNumber, precedingPage.sectionIndex, precedingDisplayedPageNumber + 1, [], precedingPageInSection + 1, [], 0, null, undefined, true);
+                    pages.push(filler);
+                    pageNumber++;
+                }
+                // Make staging visible for measurement
+                this.stagingElement.style.visibility = "hidden";
+                this.stagingElement.style.position = "absolute";
+                this.stagingElement.style.left = "-9999px";
+                this.stagingElement.style.display = "block";
+                const blocks = [];
+                for (const section of run.sections) {
+                    this.checkpoint();
+                    const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
+                    const sectionDims = run.sectionDimensions.get(sectionIndex) ?? run.dims;
+                    // Set width for accurate line wrapping
+                    section.style.width = `${sectionDims.contentWidth}pt`;
+                    const columnCount = parseInt(section.dataset.cols || "1", 10);
+                    if (columnCount > 1) {
+                        const gap = parseFloat(section.dataset.colGap || "");
+                        blocks.push(...this.buildColumnBlocks(section, sectionDims, sectionIndex, columnCount, Number.isFinite(gap) ? gap : 36));
+                    }
+                    else {
+                        blocks.push(...this.measureBlocks(section, sectionDims, sectionIndex));
+                    }
+                }
+                // Flow blocks into pages
+                const sectionPages = this.flowToPages(blocks, run.dims, pageNumber, run.sectionIndex, run.sectionDimensions);
+                this.checkpoint();
+                pages.push(...sectionPages);
+                pageNumber += sectionPages.length;
+            }
+            // Hide staging after measurement
+            this.stagingElement.style.display = "none";
+            // Every page box exists now, so NUMPAGES has an answer and each PAGE marker knows its page.
+            this.substitutePageNumberFields(pages.length);
+            // Only running-story variants selected by a real page are expected to materialize. Read IDs
+            // from registry sources, not presentation clones, so a failed clone remains detectable.
+            for (const page of pages) {
+                this.checkpoint();
+                if (page.element.dataset.sectionFiller === "true")
+                    continue;
+                const pageInSection = parseInt(page.element.dataset.pageInSection || "1", 10);
+                const displayedPageNumber = parseInt(page.element.dataset.displayedPageNumber || String(page.pageNumber), 10);
+                const header = this.selectHeader(page.sectionIndex, pageInSection, displayedPageNumber);
+                const footer = this.selectFooter(page.sectionIndex, pageInSection, displayedPageNumber);
+                if (header)
+                    this.collectExpectedSourceAnchors(header, this.expectedPageMapAnchorIds);
+                if (footer)
+                    this.collectExpectedSourceAnchors(footer, this.expectedPageMapAnchorIds);
+            }
+            // Establish one active editor anchor and page-qualify every presentation fragment.
+            // Full canonical source identities remain on all clones, including table cells.
+            this.qualifyPageFragments(pages);
+            this.transferVisibleFragmentTargets();
+            if (!this.deferFragmentIdentities)
+                this.normalizeVisiblePageFragments(pages);
+            this.lastPages = pages;
+            const result = {
+                totalPages: pages.length,
+                pages,
+                pageMap: this.layoutToken
+                    ? this.materializePageMap(this.layoutToken.documentVersion, this.layoutToken.rendererFingerprint)
+                    : undefined,
+            };
+            this.state = "complete";
+            return result;
+        }
+        catch (error) {
+            this.state = "failed";
+            throw error;
+        }
+    }
+    checkpoint() {
+        this.cancellationCheckpoint?.();
+    }
+    /**
+     * Normalize visible fragment identities after a caller applies final standalone styles.  This
+     * deliberately runs before the stability barrier; materializePageMap is read-only so PageMap
+     * measurement cannot mutate a tree after it was declared stable.
+     */
+    normalizePageMapFragmentIdentities() {
+        if (this.lastPages.length === 0) {
+            throw new Error("paginate() must complete before fragment identities can be normalized");
+        }
+        this.normalizeVisiblePageFragments(this.lastPages);
+    }
+    /**
+     * Materialize the last completed browser layout as portable page-relative point geometry.
+     * The caller supplies both invalidation tokens; this engine never guesses a document version
+     * or renderer fingerprint.
+     */
+    materializePageMap(documentVersion, rendererFingerprint) {
+        if (!Number.isSafeInteger(documentVersion) || documentVersion < 0) {
+            throw new Error("documentVersion must be a non-negative safe integer");
+        }
+        if (!rendererFingerprint)
+            throw new Error("rendererFingerprint must be non-empty");
+        if (this.lastPages.length === 0)
+            throw new Error("paginate() must complete before materializePageMap()");
+        const pages = this.lastPages.map((page) => ({
+            pageNumber: page.pageNumber,
+            pageInSection: parseInt(page.element.dataset.pageInSection || "1", 10),
+            width: page.dimensions.pageWidth,
+            height: page.dimensions.pageHeight,
+            sectionIndex: page.sectionIndex,
+            pageName: `docxodus-section-${page.sectionIndex}`,
+        }));
+        const fragments = [];
+        const requiredAnchorIds = new Set(this.expectedPageMapAnchorIds);
+        if (requiredAnchorIds.size === 0) {
+            throw new Error("cannot publish an available PageMap without canonical source inventory");
+        }
+        const measuredAnchorIds = new Set();
+        const emittedFragmentCounts = new Map();
+        for (const page of this.lastPages) {
+            this.checkpoint();
+            const pageRect = page.element.getBoundingClientRect();
+            if (pageRect.width <= 0 || pageRect.height <= 0) {
+                throw new Error(`page ${page.pageNumber} has no measurable geometry`);
+            }
+            // Ratio-to-known-page-size removes CSS px, zoom, and transform from the contract.
+            const pointPerRenderedX = page.dimensions.pageWidth / pageRect.width;
+            const pointPerRenderedY = page.dimensions.pageHeight / pageRect.height;
+            const nodes = page.element.querySelectorAll("[data-source-anchor-id]");
+            for (const element of Array.from(nodes)) {
+                this.checkpoint();
+                // Preserve the source-side exclusion contract on presentation clones as well. This
+                // covers the node itself and any excluded/hidden/aria-hidden ancestor within the page.
+                if (this.isDeliberatelyUnrenderedSource(element, page.element))
+                    continue;
+                const anchorId = element.dataset.sourceAnchorId;
+                if (!anchorId || !element.dataset.pageFragmentId
+                    || !Number.isInteger(parseInt(element.dataset.fragmentIndex || "", 10))) {
+                    throw new Error(`page ${page.pageNumber} contains an unqualified source anchor`);
+                }
+                const rect = element.getBoundingClientRect();
+                const style = this.view.getComputedStyle(element);
+                const deliberatelyHidden = style.display === "none" || style.visibility === "hidden";
+                if (deliberatelyHidden)
+                    continue;
+                requiredAnchorIds.add(anchorId);
+                const visibleRect = this.intersectWithClippingAncestors(element, page.element, pageRect, rect);
+                const left = visibleRect.left;
+                const top = visibleRect.top;
+                const right = visibleRect.right;
+                const bottom = visibleRect.bottom;
+                if (rect.width <= 0 || rect.height <= 0 || right <= left || bottom <= top) {
+                    // A continued note/story clone can contain children clipped off this page which become
+                    // measurable on its next clone. Enforce completeness once every page has been inspected.
+                    continue;
+                }
+                measuredAnchorIds.add(anchorId);
+                // Clipped descendants in repeated note/story clones are deliberately omitted from the
+                // portable map. Re-number only the visible fragments so the emitted contract remains
+                // contiguous even when an earlier DOM clone carried no visible geometry on its page.
+                const fragmentIndex = emittedFragmentCounts.get(anchorId) ?? 0;
+                emittedFragmentCounts.set(anchorId, fragmentIndex + 1);
+                const fragmentId = `p${page.pageNumber}-f${fragmentIndex}-${anchorId}`;
+                if (element.dataset.fragmentIndex !== String(fragmentIndex)
+                    || element.dataset.pageFragmentId !== fragmentId
+                    || element.dataset.pageNumber !== String(page.pageNumber)) {
+                    throw new Error(`page ${page.pageNumber} fragment identity changed after final-tree normalization`);
+                }
+                fragments.push({
+                    fragmentId,
+                    anchorId,
+                    fragmentIndex,
+                    pageNumber: page.pageNumber,
+                    geometry: {
+                        x: (left - pageRect.left) * pointPerRenderedX,
+                        y: (top - pageRect.top) * pointPerRenderedY,
+                        width: (right - left) * pointPerRenderedX,
+                        height: (bottom - top) * pointPerRenderedY,
+                    },
+                    story: this.storyForCanonicalAnchor(anchorId),
+                    inTableCell: element.matches("td,th") || element.closest("td,th") !== null,
+                });
+            }
+        }
+        const missingAnchor = Array.from(requiredAnchorIds).find((id) => !measuredAnchorIds.has(id));
+        if (missingAnchor) {
+            throw new Error(`source anchor ${missingAnchor} has no measurable fragment in the paginated layout`);
+        }
+        return {
+            schemaVersion: 1,
+            mode: "paginated",
+            availability: "available",
+            documentVersion,
+            rendererFingerprint,
+            pages,
+            fragments,
+        };
+    }
+    normalizeVisiblePageFragments(pages) {
+        const emittedFragmentCounts = new Map();
+        for (const page of pages) {
+            this.checkpoint();
+            const pageRect = page.element.getBoundingClientRect();
+            for (const element of Array.from(page.element.querySelectorAll("[data-source-anchor-id]"))) {
+                this.checkpoint();
+                if (this.isDeliberatelyUnrenderedSource(element, page.element))
+                    continue;
+                const anchorId = element.dataset.sourceAnchorId;
+                if (!anchorId)
+                    continue;
+                const style = this.view.getComputedStyle(element);
+                if (style.display === "none" || style.visibility === "hidden")
+                    continue;
+                const rect = element.getBoundingClientRect();
+                const visible = this.intersectWithClippingAncestors(element, page.element, pageRect, rect);
+                if (rect.width <= 0 || rect.height <= 0
+                    || visible.right <= visible.left || visible.bottom <= visible.top)
+                    continue;
+                const fragmentIndex = emittedFragmentCounts.get(anchorId) ?? 0;
+                emittedFragmentCounts.set(anchorId, fragmentIndex + 1);
+                element.dataset.pageNumber = String(page.pageNumber);
+                element.dataset.fragmentIndex = String(fragmentIndex);
+                element.dataset.pageFragmentId = `p${page.pageNumber}-f${fragmentIndex}-${anchorId}`;
+            }
+        }
+    }
+    /**
+     * Intersect an element with every ancestor that establishes an overflow clip before the page
+     * root. getBoundingClientRect() reports layout outside those clips, which is not rendered and
+     * therefore must not satisfy PageMap completeness or inflate portable geometry.
+     */
+    intersectWithClippingAncestors(element, page, pageRect, rect) {
+        let left = Math.max(rect.left, pageRect.left);
+        let top = Math.max(rect.top, pageRect.top);
+        let right = Math.min(rect.right, pageRect.right);
+        let bottom = Math.min(rect.bottom, pageRect.bottom);
+        const clips = (value) => value === "hidden" || value === "clip" || value === "scroll" || value === "auto";
+        for (let ancestor = element.parentElement; ancestor && ancestor !== page; ancestor = ancestor.parentElement) {
+            const style = this.view.getComputedStyle(ancestor);
+            const clipsX = clips(style.overflowX);
+            const clipsY = clips(style.overflowY);
+            if (!clipsX && !clipsY)
+                continue;
+            const ancestorRect = ancestor.getBoundingClientRect();
+            if (clipsX) {
+                left = Math.max(left, ancestorRect.left);
+                right = Math.min(right, ancestorRect.right);
+            }
+            if (clipsY) {
+                top = Math.max(top, ancestorRect.top);
+                bottom = Math.min(bottom, ancestorRect.bottom);
+            }
+        }
+        return { left, top, right, bottom };
+    }
+    storyForCanonicalAnchor(anchorId) {
+        const first = anchorId.indexOf(":");
+        const second = first < 0 ? -1 : anchorId.indexOf(":", first + 1);
+        const scope = first >= 0 && second > first ? anchorId.slice(first + 1, second) : "body";
+        if (scope.startsWith("hdr"))
+            return "header";
+        if (scope.startsWith("ftr"))
+            return "footer";
+        if (scope === "fn")
+            return "footnote";
+        if (scope === "en")
+            return "endnote";
+        if (scope === "cmt")
+            return "comment";
+        return "body";
+    }
+    /**
+     * Add canonical IDs from an addressable source subtree to the pre-pagination inventory.
+     * Registry wrappers are excluded when scanning staging because selectable registry contents are
+     * inventoried separately. Producers may explicitly mark content that has no visual substrate
+     * with `data-page-map-exclude="true"`; native hidden semantics carry the same signal.
+     */
+    collectExpectedSourceAnchors(source, destination, excludeRegistries = false) {
+        const candidates = source.matches("[data-source-anchor-id]") ? [source] : [];
+        candidates.push(...Array.from(source.querySelectorAll("[data-source-anchor-id]")));
+        for (const element of candidates) {
+            if (excludeRegistries && element.closest("#pagination-hf-registry, #pagination-footnote-registry, #pagination-comment-margin-registry")) {
+                continue;
+            }
+            if (this.isZeroHeightExplicitBreakCarrier(element)) {
+                // Flow consumes the following break marker and clones this otherwise-empty paragraph.
+                // Persist the exclusion so that the clone cannot reintroduce the anchor during PageMap
+                // measurement after the marker itself has disappeared.
+                element.dataset.pageMapExclude = "true";
+            }
+            if (this.isDeliberatelyUnrenderedSource(element, source))
+                continue;
+            const anchorId = element.dataset.sourceAnchorId;
+            if (anchorId)
+                destination.add(anchorId);
+        }
+    }
+    isZeroHeightExplicitBreakCarrier(element) {
+        const next = element.nextElementSibling;
+        const bounds = element.getBoundingClientRect();
+        return element.hasAttribute("data-source-anchor-id")
+            && (element.textContent ?? "").replace(/\u00a0/g, "").trim() === ""
+            // Exclude only the converter's zero-height carrier. A blank paragraph with height from
+            // padding, borders, a background, or authored sizing still has a visible page substrate and
+            // must remain addressable under the authoritative PageMap contract.
+            && bounds.height <= 0.01
+            && !element.querySelector("[data-source-anchor-id]")
+            && !element.querySelector("img,svg,canvas,table,hr,input,textarea,select")
+            && (next?.dataset.pageBreak === "true"
+                || next?.classList.contains(`${this.cssPrefix}break`) === true);
+    }
+    isDeliberatelyUnrenderedSource(element, sourceRoot) {
+        for (let current = element; current; current = current.parentElement) {
+            const zeroHeightExplicitBreakCarrier = current === element
+                && this.isZeroHeightExplicitBreakCarrier(current);
+            if (current.dataset.pageMapExclude === "true"
+                // An explicit page-break marker controls flow but has no painted substrate. The converter
+                // intentionally emits it as an empty div, so requiring point geometry for its source
+                // identity would make every otherwise-valid document with w:br[type=page] fail closed.
+                || current.dataset.pageBreak === "true"
+                || current.classList.contains(`${this.cssPrefix}break`)
+                || zeroHeightExplicitBreakCarrier
+                || current.hidden
+                || current.getAttribute("aria-hidden") === "true"
+                || current.style.display === "none"
+                || current.style.visibility === "hidden") {
+                return true;
+            }
+            if (current === sourceRoot)
+                break;
+        }
+        return false;
+    }
+    /**
+     * Keep exactly one active bare-Unid editor anchor per source block. Presentation clones use
+     * canonical source identity plus page/fragment qualification instead.
+     */
+    qualifyPageFragments(pages) {
+        const fragmentCounts = new Map();
+        const activeCanonicalIds = new Set();
+        const activeBareAnchorIds = new Set();
+        const makeInactive = (element) => {
+            element.removeAttribute("data-anchor");
+            element.removeAttribute("data-committed-text");
+            if (element.hasAttribute("contenteditable"))
+                element.setAttribute("contenteditable", "false");
+        };
+        for (const page of pages) {
+            const nodes = page.element.querySelectorAll("[data-source-anchor-id]");
+            for (const element of Array.from(nodes)) {
+                const anchorId = element.dataset.sourceAnchorId;
+                if (!anchorId)
+                    continue;
+                const fragmentIndex = fragmentCounts.get(anchorId) ?? 0;
+                fragmentCounts.set(anchorId, fragmentIndex + 1);
+                element.dataset.pageNumber = String(page.pageNumber);
+                element.dataset.fragmentIndex = String(fragmentIndex);
+                element.dataset.pageFragmentId = `p${page.pageNumber}-f${fragmentIndex}-${anchorId}`;
+                const story = this.storyForCanonicalAnchor(anchorId);
+                const mayOwnActiveEditorAnchor = story === "body" || story === "comment" || story === "footnote" || story === "endnote";
+                if (element.hasAttribute("data-anchor")) {
+                    const bareAnchorId = element.dataset.anchor;
+                    if (mayOwnActiveEditorAnchor
+                        && !activeCanonicalIds.has(anchorId)
+                        && !activeBareAnchorIds.has(bareAnchorId)) {
+                        activeCanonicalIds.add(anchorId);
+                        activeBareAnchorIds.add(bareAnchorId);
+                    }
+                    else {
+                        makeInactive(element);
+                    }
+                }
+            }
+        }
+        // Body/comment page nodes are the editable copies. A repeated header/footer registry entry can
+        // also render the same source story once per section/variant, so retain at most one active
+        // staging node per canonical source and make every presentation duplicate inert.
+        const activeStagingCanonicalIds = new Set();
+        for (const element of Array.from(this.stagingElement.querySelectorAll("[data-source-anchor-id][data-anchor]"))) {
+            const anchorId = element.dataset.sourceAnchorId;
+            if (!anchorId)
+                continue;
+            const bareAnchorId = element.dataset.anchor;
+            if (activeCanonicalIds.has(anchorId)
+                || activeStagingCanonicalIds.has(anchorId)
+                || activeBareAnchorIds.has(bareAnchorId)) {
+                makeInactive(element);
+            }
+            else {
+                activeStagingCanonicalIds.add(anchorId);
+                activeBareAnchorIds.add(bareAnchorId);
+            }
+        }
+    }
+    /**
+     * Page flow clones source blocks while the hidden staging tree stays in the document. Any HTML
+     * fragment target copied into a visible page would therefore resolve to its earlier hidden
+     * source. Transfer target ownership to the page presentation after flow is complete; registry
+     * and wrapper IDs that have no visible counterpart remain available to pagination internals.
+     */
+    transferVisibleFragmentTargets() {
+        const visibleIds = new Set(Array.from(this.containerElement.querySelectorAll("[id]")).map((element) => element.id).filter(Boolean));
+        if (visibleIds.size === 0)
+            return;
+        for (const source of Array.from(this.stagingElement.querySelectorAll("[id]"))) {
+            if (visibleIds.has(source.id))
+                source.removeAttribute("id");
+        }
     }
     /** Read each section's `w:pgNumType` off its wrapper (see {@link SectionPageNumbering}). */
     parsePageNumbering(sections) {
@@ -127,11 +750,8 @@ export class PaginationEngine {
                 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) ?? {};
-            // A section that restarts numbering counts from its own start; one that does not continues
-            // the document-wide running number.
-            const displayed = numbering.start !== undefined ? numbering.start + pageInSection - 1 : pageNumber;
+            const displayed = parseInt(box.dataset.displayedPageNumber || String(pageNumber), 10);
             for (const marker of Array.from(markers)) {
                 const kind = marker.dataset.field;
                 if (kind !== "PAGE" && kind !== "NUMPAGES")
@@ -144,22 +764,35 @@ export class PaginationEngine {
     /**
      * Measures all content blocks in a section.
      */
-    measureBlocks(section, dims) {
+    measureBlocks(section, dims, sectionIndex) {
         const blocks = [];
         // Get direct children (paragraphs, tables, divs, etc.)
         const children = Array.from(section.children);
         for (const child of children) {
+            this.checkpoint();
             // Skip section dividers that are just wrappers
             if (child.dataset.sectionIndex !== undefined) {
                 // Recursively get blocks from nested sections
-                const nestedBlocks = this.measureBlocks(child, dims);
+                const nestedSectionIndex = parseInt(child.dataset.sectionIndex || String(sectionIndex), 10);
+                const nestedBlocks = this.measureBlocks(child, dims, nestedSectionIndex);
                 blocks.push(...nestedBlocks);
                 continue;
             }
+            // Converter-shaped endnotes are a safe nested block structure whose outer
+            // section/list wrappers must not make the complete endnote collection one
+            // indivisible page block. Flatten only the exact shape we understand; any
+            // richer author HTML retains the conservative whole-block fallback below.
+            if (child.matches("section.endnotes")) {
+                const endnoteBlocks = this.measureSafeEndnoteBlocks(child, dims, sectionIndex);
+                if (endnoteBlocks) {
+                    blocks.push(...endnoteBlocks);
+                    continue;
+                }
+            }
             // Measure height and margins separately for proper margin collapsing calculation
             // getBoundingClientRect() returns content+padding+border, not margins
             const rect = child.getBoundingClientRect();
-            const style = window.getComputedStyle(child);
+            const style = this.view.getComputedStyle(child);
             const marginTopPx = parseFloat(style.marginTop) || 0;
             const marginBottomPx = parseFloat(style.marginBottom) || 0;
             const heightPt = pxToPt(rect.height);
@@ -169,6 +802,7 @@ export class PaginationEngine {
                 child.classList.contains(`${this.cssPrefix}break`);
             blocks.push({
                 element: child,
+                sectionIndex,
                 heightPt,
                 marginTopPt,
                 marginBottomPt,
@@ -176,7 +810,168 @@ export class PaginationEngine {
                 keepLines: child.dataset.keepLines === "true",
                 pageBreakBefore: child.dataset.pageBreakBefore === "true",
                 isPageBreak,
+                isWordParagraph: this.isWordParagraphElement(child),
+            });
+        }
+        return blocks;
+    }
+    /**
+     * Flatten the converter's `section.endnotes > ol > li > p` presentation into
+     * ordinary paragraph blocks. This preserves paragraph formatting and canonical
+     * p:en/en:en identities while allowing the existing paragraph fragmenter to
+     * split a long endnote across page boundaries.
+     */
+    measureSafeEndnoteBlocks(section, dims, sectionIndex) {
+        var _a, _b, _c;
+        const sectionChildren = Array.from(section.children);
+        const list = sectionChildren.find((child) => child.tagName === "OL");
+        if (!list
+            || sectionChildren.some((child) => child.tagName !== "HR" && child !== list)
+            || Array.from(list.children).some((child) => child.tagName !== "LI")) {
+            return null;
+        }
+        const items = Array.from(list.children);
+        if (items.length === 0 || items.some((item) => item.children.length === 0
+            || Array.from(item.children).some((child) => child.tagName !== "P"))) {
+            return null;
+        }
+        const blocks = [];
+        const sectionStyle = this.view.getComputedStyle(section);
+        for (const rule of sectionChildren.filter((child) => child.tagName === "HR")) {
+            this.checkpoint();
+            const clonedRule = rule.cloneNode(true);
+            if (blocks.length === 0)
+                clonedRule.style.marginTop = sectionStyle.marginTop;
+            blocks.push(this.measureElement(clonedRule, dims, sectionIndex));
+        }
+        const listStyle = this.view.getComputedStyle(list);
+        for (let itemIndex = 0; itemIndex < items.length; itemIndex++) {
+            this.checkpoint();
+            const item = items[itemIndex];
+            const ownerAnchorId = item.dataset.sourceAnchorId;
+            const paragraphs = Array.from(item.children);
+            for (let paragraphIndex = 0; paragraphIndex < paragraphs.length; paragraphIndex++) {
+                this.checkpoint();
+                const paragraph = paragraphs[paragraphIndex];
+                // The flattened clone no longer has the section/ol/li ancestors that supplied the
+                // source's computed layout. Validate while the real paragraph is still attached; the
+                // marker below records that completed check for canFragmentParagraph(), whose detached
+                // clone cannot obtain meaningful computed styles. A richer custom endnote falls back to
+                // the established indivisible section path instead of being range-split incorrectly.
+                if (!this.hasRangeFragmentSafeLayout(paragraph)) {
+                    return null;
+                }
+                const clone = paragraph.cloneNode(true);
+                clone.dataset.paginationSafeEndnote = "true";
+                (_a = clone.style).fontSize || (_a.fontSize = sectionStyle.fontSize);
+                (_b = clone.style).lineHeight || (_b.lineHeight = sectionStyle.lineHeight);
+                (_c = clone.style).paddingLeft || (_c.paddingLeft = listStyle.paddingLeft);
+                // Older/custom producers may put the endnote identity only on the li.
+                // Mirror it into the visible paragraph without displacing the paragraph's
+                // own identity, matching current converter output.
+                if (ownerAnchorId && !Array.from(clone.querySelectorAll("[data-source-anchor-id]")).some((node) => node.dataset.sourceAnchorId === ownerAnchorId)) {
+                    const owner = this.document.createElement("span");
+                    owner.dataset.sourceAnchorId = ownerAnchorId;
+                    while (clone.firstChild)
+                        owner.appendChild(clone.firstChild);
+                    clone.appendChild(owner);
+                }
+                if (paragraphIndex === 0) {
+                    // Flattening must preserve both ends of the converter's endnote link and the list's
+                    // numbering format. The outer id survives only on the leading range fragment; normal
+                    // continuation cleanup removes it from every later fragment.
+                    const itemId = item.id;
+                    if (itemId) {
+                        if (clone.id && clone.id !== itemId)
+                            return null;
+                        clone.id = itemId;
+                    }
+                    const value = parseInt(item.getAttribute("value") || String(itemIndex + 1), 10);
+                    const marker = this.formatOrderedListMarker(Number.isFinite(value) ? value : itemIndex + 1, listStyle.listStyleType);
+                    clone.insertBefore(this.document.createTextNode(`${marker}. `), clone.firstChild);
+                }
+                blocks.push(this.measureElement(clone, dims, sectionIndex));
+            }
+        }
+        return blocks;
+    }
+    /** Render the CSS ordered-list formats emitted by the converter after an endnote is flattened. */
+    formatOrderedListMarker(value, listStyleType) {
+        const format = (() => {
+            switch (listStyleType) {
+                case "lower-roman": return "lowerRoman";
+                case "upper-roman": return "upperRoman";
+                case "lower-alpha":
+                case "lower-latin": return "lowerLetter";
+                case "upper-alpha":
+                case "upper-latin": return "upperLetter";
+                default: return "decimal";
+            }
+        })();
+        return formatPageNumber(value, format);
+    }
+    /**
+     * 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 = this.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 start = 0;
+        while (start < children.length) {
+            this.checkpoint();
+            if (isBreak(children[start])) {
+                blocks.push(this.measureElement(children[start], dims, sectionIndex));
+                start++;
+                continue;
+            }
+            // Grow the container one child at a time. Even a single oversized child is
+            // emitted alone, preserving the established oversized-block fallback.
+            let end = start + 1;
+            let container = makeContainer(children.slice(start, end));
+            let measured = this.measureElement(container, dims, sectionIndex);
+            while (end < children.length && !isBreak(children[end])) {
+                this.checkpoint();
+                const candidate = makeContainer(children.slice(start, end + 1));
+                const candidateMeasured = this.measureElement(candidate, dims, sectionIndex);
+                if (candidateMeasured.heightPt > maxFragmentHeight)
+                    break;
+                container = candidate;
+                measured = candidateMeasured;
+                end++;
+            }
+            blocks.push({
+                element: container,
+                sectionIndex,
+                heightPt: measured.heightPt,
+                marginTopPt: measured.marginTopPt,
+                marginBottomPt: measured.marginBottomPt,
+                keepWithNext: false,
+                keepLines: false,
+                pageBreakBefore: false,
+                isPageBreak: false,
+                isWordParagraph: false,
             });
+            start = end;
         }
         return blocks;
     }
@@ -185,8 +980,8 @@ export class PaginationEngine {
      * 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");
+    measureElement(element, dims, sectionIndex) {
+        const measurementHost = this.document.createElement("div");
         measurementHost.style.position = "absolute";
         measurementHost.style.visibility = "hidden";
         measurementHost.style.left = "-9999px";
@@ -195,9 +990,10 @@ export class PaginationEngine {
         measurementHost.appendChild(measuredElement);
         this.stagingElement.appendChild(measurementHost);
         const rect = measuredElement.getBoundingClientRect();
-        const style = window.getComputedStyle(measuredElement);
+        const style = this.view.getComputedStyle(measuredElement);
         const measured = {
             element,
+            sectionIndex,
             heightPt: pxToPt(rect.height),
             marginTopPt: pxToPt(parseFloat(style.marginTop) || 0),
             marginBottomPt: pxToPt(parseFloat(style.marginBottom) || 0),
@@ -206,6 +1002,7 @@ export class PaginationEngine {
             pageBreakBefore: element.dataset.pageBreakBefore === "true",
             isPageBreak: element.dataset.pageBreak === "true" ||
                 element.classList.contains(`${this.cssPrefix}break`),
+            isWordParagraph: this.isWordParagraphElement(element),
         };
         this.stagingElement.removeChild(measurementHost);
         return measured;
@@ -238,13 +1035,11 @@ export class PaginationEngine {
      * 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];
@@ -253,6 +1048,37 @@ export class PaginationEngine {
         }
         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.
@@ -261,6 +1087,7 @@ export class PaginationEngine {
         const knownIds = new Set(existingFootnoteIds);
         const newIds = [];
         for (const block of blocks) {
+            this.checkpoint();
             for (const id of this.extractFootnoteRefs(block.element)) {
                 if (!knownIds.has(id)) {
                     knownIds.add(id);
@@ -276,7 +1103,7 @@ export class PaginationEngine {
      * send it through the oversized-block fallback again.
      */
     smallestEffectiveContentHeight(dims, sectionIndex) {
-        return Math.min(this.getPageBands(dims, sectionIndex, 1, 1).bodyHeight, this.getPageBands(dims, sectionIndex, 2, 1).bodyHeight, this.getPageBands(dims, sectionIndex, 2, 2).bodyHeight);
+        return Math.min(this.getPageBands(dims, sectionIndex, 1, 1).bodyHeight, this.getPageBands(dims, sectionIndex, 2, 2).bodyHeight, this.getPageBands(dims, sectionIndex, 3, 3).bodyHeight);
     }
     /**
      * Builds a clone of a simple table wrapper containing a contiguous run of rows.
@@ -320,10 +1147,11 @@ export class PaginationEngine {
             block.isPageBreak) {
             return null;
         }
-        const table = wrapper.firstElementChild;
-        if (!(table instanceof HTMLTableElement)) {
+        const tableElement = wrapper.firstElementChild;
+        if (!tableElement || tableElement.localName !== "table") {
             return null;
         }
+        const table = tableElement;
         const body = table.tBodies.length === 1 ? table.tBodies[0] : null;
         if (!body ||
             table.tHead ||
@@ -346,10 +1174,12 @@ export class PaginationEngine {
         const groups = [];
         let start = 0;
         while (start < rows.length) {
+            this.checkpoint();
             let end = start;
             while (end < rows.length) {
+                this.checkpoint();
                 const candidate = this.createSimpleTableFragment(wrapper, table, body, rows.slice(start, end + 1), start === 0);
-                const measured = this.measureElement(candidate, dims);
+                const measured = this.measureElement(candidate, dims, block.sectionIndex);
                 if (measured.heightPt > maximumFragmentHeight) {
                     break;
                 }
@@ -380,7 +1210,7 @@ export class PaginationEngine {
             if (!isLast) {
                 fragment.style.setProperty("margin-bottom", "0", "important");
             }
-            const measured = this.measureElement(fragment, dims);
+            const measured = this.measureElement(fragment, dims, block.sectionIndex);
             if (measured.heightPt + measured.marginTopPt + measured.marginBottomPt >
                 minimumContentHeight) {
                 return null;
@@ -396,40 +1226,223 @@ export class PaginationEngine {
         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.
+     * DOM endpoints that can finish a paragraph fragment. The flattened UTF-16
+     * offsets are checked against the browser's Unicode grapheme segmenter, so a
+     * formatting-run boundary can never bisect a surrogate pair, combining
+     * sequence, or joined emoji. NBSP/word-joiner boundaries remain indivisible.
+     * PAGE/NUMPAGES field results are atomic because splitting their marker would
+     * make later substitution duplicate or replace only half of the field.
      */
-    paragraphFragmentEndpoints(paragraph) {
-        const endpoints = [];
-        const walker = document.createTreeWalker(paragraph, NodeFilter.SHOW_TEXT);
+    paragraphFragmentEndpoints(paragraph, emergencyGraphemeBreaks = false) {
+        const textNodes = [];
+        const textStarts = new Map();
+        const lastTextByField = new Map();
+        const walker = this.document.createTreeWalker(paragraph, this.view.NodeFilter.SHOW_TEXT);
+        const flattenedChunks = [];
+        let flattenedLength = 0;
         let textNode;
         while ((textNode = walker.nextNode())) {
-            const text = textNode.data;
-            if (text.length === 0)
+            this.checkpoint();
+            textStarts.set(textNode, flattenedLength);
+            textNodes.push(textNode);
+            flattenedChunks.push(textNode.data);
+            flattenedLength += textNode.data.length;
+            let field = textNode.parentElement?.closest("[data-field]") ?? null;
+            while (field?.parentElement?.closest("[data-field]")) {
+                field = field.parentElement.closest("[data-field]");
+            }
+            if (field && paragraph.contains(field))
+                lastTextByField.set(field, textNode);
+        }
+        const flattenedText = flattenedChunks.join("");
+        if (!this.hasVisibleText(flattenedText))
+            return [];
+        const invisible = /[\s\u200B-\u200F\uFEFF]/;
+        let firstVisibleOffset = -1;
+        let lastVisibleOffset = -1;
+        for (let index = 0; index < flattenedText.length; index++) {
+            if (index % 4096 === 0)
+                this.checkpoint();
+            if (invisible.test(flattenedText[index]))
                 continue;
-            // A whitespace boundary preserves normal word wrapping. Always retain the
-            // end of a run too: adjacent runs can change formatting without containing
-            // a whitespace character between them.
-            const whitespace = /\s+/g;
+            if (firstVisibleOffset < 0)
+                firstVisibleOffset = index;
+            lastVisibleOffset = index;
+        }
+        const graphemeBoundaries = this.graphemeBoundaryOffsets(flattenedText);
+        const candidates = [];
+        const addCandidate = (candidate) => {
+            const { textOffset } = candidate;
+            if (textOffset <= 0 || textOffset >= flattenedText.length)
+                return;
+            if (textOffset <= firstVisibleOffset || textOffset > lastVisibleOffset)
+                return;
+            if (this.isNonBreakingTextBoundary(flattenedText, textOffset))
+                return;
+            if (!this.isLegalParagraphLineBoundary(paragraph, flattenedText, textOffset))
+                return;
+            if (graphemeBoundaries) {
+                if (!graphemeBoundaries.has(textOffset))
+                    return;
+            }
+            else if (!this.isConservativeFallbackTextBoundary(flattenedText, textOffset)) {
+                return;
+            }
+            candidates.push(candidate);
+        };
+        for (const node of textNodes) {
+            this.checkpoint();
+            const start = textStarts.get(node);
+            // Field results and converter list markers are semantic atoms. A field
+            // receives one boundary outside its wrapper below; a list marker stays
+            // with the first real text fragment and is never emitted by itself.
+            const atomic = node.parentElement?.closest("[data-field], [data-list-marker], a[data-comment-id]");
+            if (atomic && paragraph.contains(atomic))
+                continue;
+            // Only CSS-collapsible ASCII whitespace is a wrapping opportunity. JS's
+            // broader `\s` class includes NBSP and other explicitly non-breaking text.
+            const whitespace = /[\u0009-\u000D\u0020]+/g;
             let match;
-            while ((match = whitespace.exec(text)) !== null) {
-                endpoints.push({ node: textNode, offset: match.index + match[0].length });
+            let matchesSinceCheckpoint = 0;
+            while ((match = whitespace.exec(node.data)) !== null) {
+                if (++matchesSinceCheckpoint % 256 === 0)
+                    this.checkpoint();
+                const offset = match.index + match[0].length;
+                addCandidate({ node, offset, textOffset: start + offset, priority: 0 });
+            }
+            addCandidate({
+                node,
+                offset: node.data.length,
+                textOffset: start + node.data.length,
+                priority: 0,
+            });
+            if (emergencyGraphemeBreaks) {
+                for (let offset = 1; offset < node.data.length; offset++) {
+                    if (offset % 256 === 0)
+                        this.checkpoint();
+                    addCandidate({
+                        node,
+                        offset,
+                        textOffset: start + offset,
+                        priority: -1,
+                    });
+                }
             }
-            if (endpoints.length === 0 || endpoints[endpoints.length - 1].node !== textNode ||
-                endpoints[endpoints.length - 1].offset !== text.length) {
-                endpoints.push({ node: textNode, offset: text.length });
+        }
+        // A field is splittable only immediately after its complete outer wrapper.
+        // Starting the tail at the parent's child boundary prevents Range from
+        // cloning an empty `[data-field]` shell that substitution could repopulate.
+        for (const field of Array.from(paragraph.querySelectorAll("[data-field]"))) {
+            this.checkpoint();
+            if (field.parentElement?.closest("[data-field]"))
+                continue;
+            const last = lastTextByField.get(field);
+            const parent = field.parentNode;
+            if (!last || !parent)
+                continue;
+            const childIndex = Array.prototype.indexOf.call(parent.childNodes, field);
+            if (childIndex < 0)
+                continue;
+            addCandidate({
+                node: parent,
+                offset: childIndex + 1,
+                textOffset: textStarts.get(last) + last.data.length,
+                priority: 1,
+            });
+        }
+        // Several DOM boundaries can represent the same flattened offset. Prefer
+        // the outer atomic boundary, then keep one stable document-order candidate.
+        candidates.sort((left, right) => left.textOffset - right.textOffset || right.priority - left.priority);
+        const endpoints = [];
+        for (const candidate of candidates) {
+            if (endpoints[endpoints.length - 1]?.textOffset !== candidate.textOffset) {
+                endpoints.push(candidate);
             }
         }
         return endpoints;
     }
+    /** Browser-native UAX #29 boundaries; null keeps older runtimes conservative. */
+    graphemeBoundaryOffsets(text) {
+        const SegmenterConstructor = this.view.Intl.Segmenter;
+        if (!SegmenterConstructor)
+            return null;
+        const boundaries = new Set([0, text.length]);
+        let segmentCount = 0;
+        for (const part of new SegmenterConstructor("en", { granularity: "grapheme" }).segment(text)) {
+            if (++segmentCount % 256 === 0)
+                this.checkpoint();
+            boundaries.add(part.index);
+            boundaries.add(part.index + part.segment.length);
+        }
+        return boundaries;
+    }
+    /**
+     * Conservative UAX #14/CSS wrapping opportunities used for synthetic page
+     * boundaries. In particular, a formatting-run boundary is not itself a word
+     * boundary, and Japanese opening/closing punctuation stays with its pair.
+     * Arbitrary grapheme breaks are admitted only when the paragraph's CSS asks
+     * the browser to wrap anywhere.
+     */
+    isLegalParagraphLineBoundary(paragraph, text, offset) {
+        const lastCodeUnit = text.charCodeAt(offset - 1);
+        const beforeOffset = lastCodeUnit >= 0xDC00 && lastCodeUnit <= 0xDFFF
+            ? Math.max(0, offset - 2)
+            : offset - 1;
+        const beforeCodePoint = text.codePointAt(beforeOffset);
+        const afterCodePoint = text.codePointAt(offset);
+        const before = beforeCodePoint === undefined ? "" : String.fromCodePoint(beforeCodePoint);
+        const after = afterCodePoint === undefined ? "" : String.fromCodePoint(afterCodePoint);
+        if (/^[\u0009-\u000D\u0020]$/.test(before)
+            || /^[\u0009-\u000D\u0020]$/.test(after))
+            return true;
+        if (/[-\u00AD\u2010]$/u.test(before))
+            return true;
+        const style = this.view.getComputedStyle(paragraph);
+        if (style.wordBreak === "break-all"
+            || style.overflowWrap === "anywhere"
+            || style.overflowWrap === "break-word")
+            return true;
+        const eastAsian = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+        if (!eastAsian.test(before) && !eastAsian.test(after))
+            return false;
+        const opening = "([{<\u2018\u201C\u3008\u300A\u300C\u300E\u3010\u3014\u3016\u3018\u301A\uFF08\uFF3B\uFF5B";
+        const closing = ")]}>\u2019\u201D\u3001\u3002\u3009\u300B\u300D\u300F\u3011\u3015\u3017\u3019\u301B\uFF01\uFF05\uFF09\uFF0C\uFF0E\uFF1A\uFF1B\uFF1F\uFF3D\uFF5D";
+        return !opening.includes(before) && !closing.includes(after);
+    }
+    /** Never fragment across characters whose line-break meaning is explicitly non-breaking. */
+    isNonBreakingTextBoundary(text, offset) {
+        const codePointBefore = (index) => {
+            if (index <= 0)
+                return undefined;
+            const last = text.charCodeAt(index - 1);
+            const start = last >= 0xDC00 && last <= 0xDFFF ? index - 2 : index - 1;
+            return text.codePointAt(Math.max(0, start));
+        };
+        const nonBreaking = new Set([
+            0x00A0, 0x200E, 0x200F, 0x2011, 0x202A, 0x202B, 0x202C,
+            0x202D, 0x202E, 0x202F, 0x2060, 0x2066, 0x2067, 0x2068,
+            0x2069, 0xFEFF,
+        ]);
+        return nonBreaking.has(codePointBefore(offset) ?? -1)
+            || nonBreaking.has(text.codePointAt(offset) ?? -1);
+    }
+    /**
+     * Without Intl.Segmenter, admit only an all-ASCII boundary. This still
+     * fragments ordinary prose while refusing to guess about Unicode clusters.
+     */
+    isConservativeFallbackTextBoundary(text, offset) {
+        return text.charCodeAt(offset - 1) <= 0x7F && text.charCodeAt(offset) <= 0x7F;
+    }
     /**
      * 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 || "")
+        return this.hasVisibleText(fragment.textContent || "");
+    }
+    hasVisibleText(text) {
+        return text
             .replace(/[\u200B-\u200F\uFEFF]/g, "")
             .trim()
             .length > 0;
@@ -441,7 +1454,7 @@ export class PaginationEngine {
      * fallback instead of risking broken content or duplicate anchors.
      */
     canFragmentParagraph(block) {
-        if (!this.fragmentParagraphs || block.element.tagName !== "P") {
+        if (!this.fragmentParagraphs) {
             return false;
         }
         const paragraph = block.element;
@@ -453,8 +1466,26 @@ export class PaginationEngine {
             paragraph.hasAttribute("contenteditable")) {
             return false;
         }
-        // The outer paragraph may carry its source identity. Descendant identities
-        // are not safe to duplicate in a continuation fragment, so reject them.
+        return this.canRangeFragmentParagraph(paragraph);
+    }
+    /**
+     * Shared structural gate for body and note paragraph fragmentation. Footnote
+     * first paragraphs are inline beside their marker, so that one known layout
+     * context may opt into an inline root while retaining every descendant and
+     * break-safety restriction used for body text.
+     */
+    canRangeFragmentParagraph(paragraph, allowInlineRoot = false) {
+        if (paragraph.tagName !== "P" ||
+            paragraph.dataset.keepWithNext === "true" ||
+            paragraph.dataset.keepLines === "true" ||
+            paragraph.dataset.pageBreakBefore === "true" ||
+            paragraph.dataset.widowControl === "true" ||
+            paragraph.hasAttribute("contenteditable")) {
+            return false;
+        }
+        // Non-textual/out-of-flow descendants still need dedicated fragmenters.
+        // Inline ids/editor anchors are reconciled after Range cloning, and list
+        // markers are kept atomically with the leading text fragment.
         const unsupportedDescendants = [
             "br",
             "img",
@@ -485,19 +1516,26 @@ export class PaginationEngine {
             "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" ||
+        const isValidatedEndnote = paragraph.dataset.paginationSafeEndnote === "true";
+        return isValidatedEndnote || this.hasRangeFragmentSafeLayout(paragraph, allowInlineRoot);
+    }
+    /**
+     * A range clone preserves nested inline formatting exactly. Anything that establishes its own
+     * box/layout context is deferred until a future fragmenter can model it accurately. Callers
+     * must invoke this while the paragraph is attached to the styled document.
+     */
+    hasRangeFragmentSafeLayout(paragraph, allowInlineRoot = false) {
+        const paragraphStyle = this.view.getComputedStyle(paragraph);
+        if ((paragraphStyle.display !== "block" &&
+            !(allowInlineRoot && paragraphStyle.display === "inline")) ||
             paragraphStyle.position !== "static" ||
             paragraphStyle.float !== "none" ||
-            paragraphStyle.whiteSpace !== "normal" ||
+            (paragraphStyle.whiteSpace !== "normal" && paragraphStyle.whiteSpace !== "pre-wrap") ||
             paragraphStyle.breakBefore !== "auto" ||
             paragraphStyle.breakAfter !== "auto" ||
             paragraphStyle.breakInside === "avoid" ||
@@ -506,15 +1544,12 @@ export class PaginationEngine {
             paragraphStyle.pageBreakInside === "avoid") {
             return false;
         }
-        // A range clone preserves nested inline formatting exactly. Anything that
-        // establishes its own box/layout context is intentionally deferred until a
-        // future fragmenter can model it accurately.
         for (const descendant of Array.from(paragraph.querySelectorAll("*"))) {
-            const style = window.getComputedStyle(descendant);
+            const style = this.view.getComputedStyle(descendant);
             if (style.display !== "inline" ||
                 style.position !== "static" ||
                 style.float !== "none" ||
-                style.whiteSpace !== "normal") {
+                (style.whiteSpace !== "normal" && style.whiteSpace !== "pre-wrap")) {
                 return false;
             }
         }
@@ -545,63 +1580,134 @@ export class PaginationEngine {
         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.
+     * Range clones repeat an inline ancestor when the split lands inside it. Keep
+     * semantic wrappers (links, comments, formatting) on both sides, but retain a
+     * duplicated HTML/editor identity only on the leading fragment. Targets that
+     * occur wholly after the split are absent from `head` and remain on `tail`.
      */
-    tryFragmentParagraph(block, dims, availableHeightPt, effectiveMarginTopPt) {
-        if (!this.canFragmentParagraph(block) || availableHeightPt <= effectiveMarginTopPt) {
-            return null;
-        }
-        const paragraph = block.element;
-        const endpoints = this.paragraphFragmentEndpoints(paragraph);
-        // The final endpoint is the full paragraph and cannot leave a tail. A
-        // single text run with no earlier whitespace remains an overflow fallback.
-        if (endpoints.length < 2) {
-            return null;
-        }
-        let low = 0;
-        let high = endpoints.length - 2;
-        let best = null;
-        // Fragment height is monotonic for the deliberately narrow eligible subset,
-        // so binary search avoids measuring every word in long body paragraphs.
-        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;
+    reconcileParagraphFragmentIdentities(head, tail) {
+        const elements = (root, selector) => [
+            ...(root.matches(selector) ? [root] : []),
+            ...Array.from(root.querySelectorAll(selector)),
+        ];
+        const headIds = new Set(elements(head, "[id]").map((element) => element.id));
+        for (const element of elements(tail, "[id]")) {
+            if (headIds.has(element.id))
+                element.removeAttribute("id");
+        }
+        const headAnchors = new Set(elements(head, "[data-anchor]")
+            .map((element) => element.dataset.anchor)
+            .filter((anchor) => Boolean(anchor)));
+        for (const element of elements(tail, "[data-anchor]")) {
+            if (!element.dataset.anchor || !headAnchors.has(element.dataset.anchor))
                 continue;
+            element.removeAttribute("data-anchor");
+            element.removeAttribute("data-committed-text");
+        }
+    }
+    /**
+     * Range-clone the largest safe prefix accepted by `fits`. The measurement
+     * policy stays with the caller, allowing body blocks and note bands to share
+     * one DOM fragmenter while measuring in their respective layout contexts.
+     */
+    splitParagraphAtLargestFit(paragraph, fits, options = {}) {
+        const largestFit = (endpoints) => {
+            // Prefix height is usually monotone, but selector-sensitive inline CSS
+            // (`:last-child`, `:only-child`) can make a longer Range clone shorter.
+            // Probe the largest legal endpoint first so the common non-monotone case
+            // cannot be discarded by the binary search below.
+            const lastEndpoint = endpoints[endpoints.length - 1];
+            if (lastEndpoint) {
+                const lastRange = this.document.createRange();
+                lastRange.setStart(paragraph, 0);
+                lastRange.setEnd(lastEndpoint.node, lastEndpoint.offset);
+                const lastContents = lastRange.cloneContents();
+                if (this.hasVisibleFragmentText(lastContents)) {
+                    const lastHead = this.createParagraphFragment(paragraph, lastRange, true, false);
+                    if (fits(lastHead))
+                        return { endpoint: lastEndpoint, head: lastHead };
+                }
             }
-            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;
+            let low = 0;
+            let high = endpoints.length - 2;
+            let best = null;
+            while (low <= high) {
+                this.checkpoint();
+                const middle = Math.floor((low + high) / 2);
+                const endpoint = endpoints[middle];
+                const headRange = this.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);
+                if (fits(head)) {
+                    best = { endpoint, head };
+                    low = middle + 1;
+                }
+                else {
+                    high = middle - 1;
+                }
             }
+            return best;
+        };
+        let endpoints = this.paragraphFragmentEndpoints(paragraph);
+        let best = largestFit(endpoints);
+        if (!best && options.emergencyGraphemeBreaks) {
+            endpoints = this.paragraphFragmentEndpoints(paragraph, true);
+            best = largestFit(endpoints);
+        }
+        if (!best && options.forceFirstOnNoFit && endpoints.length > 0) {
+            const endpoint = endpoints[0];
+            const headRange = this.document.createRange();
+            headRange.setStart(paragraph, 0);
+            headRange.setEnd(endpoint.node, endpoint.offset);
+            best = {
+                endpoint,
+                head: this.createParagraphFragment(paragraph, headRange, true, false),
+            };
         }
         if (!best) {
-            return null;
+            return endpoints.length > 0 ? { kind: "no-fit" } : { kind: "indivisible" };
         }
-        const tailRange = document.createRange();
+        const tailRange = this.document.createRange();
         tailRange.setStart(best.endpoint.node, best.endpoint.offset);
         tailRange.setEnd(paragraph, paragraph.childNodes.length);
         const tailContents = tailRange.cloneContents();
-        if (!this.hasVisibleFragmentText(tailContents)) {
+        if (!this.hasVisibleFragmentText(tailContents))
+            return { kind: "indivisible" };
+        const tail = this.createParagraphFragment(paragraph, tailRange, false, true);
+        this.reconcileParagraphFragmentIdentities(best.head, tail);
+        return {
+            kind: "split",
+            head: best.head,
+            tail,
+        };
+    }
+    /**
+     * 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 tail = this.createParagraphFragment(paragraph, tailRange, false, true);
-        const tailMeasured = this.measureElement(tail, dims);
+        const split = this.splitParagraphAtLargestFit(block.element, (head) => {
+            const measured = this.measureElement(head, dims, block.sectionIndex);
+            return effectiveMarginTopPt + measured.heightPt <= availableHeightPt;
+        });
+        if (split.kind !== "split")
+            return null;
+        const headMeasured = this.measureElement(split.head, dims, block.sectionIndex);
+        const tailMeasured = this.measureElement(split.tail, dims, block.sectionIndex);
         return [
             {
-                ...best.measured,
-                element: best.element,
+                ...headMeasured,
+                element: split.head,
                 keepWithNext: false,
                 keepLines: false,
                 pageBreakBefore: false,
@@ -609,7 +1715,7 @@ export class PaginationEngine {
             },
             {
                 ...tailMeasured,
-                element: tail,
+                element: split.tail,
                 keepWithNext: false,
                 keepLines: false,
                 pageBreakBefore: false,
@@ -687,7 +1793,11 @@ export class PaginationEngine {
         const registryEl = this.stagingElement.querySelector("#pagination-footnote-registry");
         if (!registryEl)
             return registry;
-        const entries = Array.from(registryEl.querySelectorAll("[data-footnote-id]"));
+        // Only direct registry entries are definitions. Custom separator stories may
+        // legitimately contain arbitrary converted markup, including stale semantic
+        // attributes that must never be mistaken for another note definition.
+        const entries = Array.from(registryEl.children)
+            .filter((entry) => entry instanceof this.view.HTMLElement && entry.hasAttribute("data-footnote-id"));
         for (const entry of entries) {
             const footnoteId = entry.dataset.footnoteId;
             if (footnoteId) {
@@ -697,6 +1807,69 @@ export class PaginationEngine {
         }
         return registry;
     }
+    /** Read Word's optional normal and continuation separator stories. */
+    parseFootnoteSeparators() {
+        const registry = this.stagingElement.querySelector("#pagination-footnote-registry");
+        const clone = (kind) => {
+            const source = Array.from(registry?.children ?? []).find((entry) => entry instanceof this.view.HTMLElement
+                && entry.getAttribute("data-footnote-separator") === kind);
+            return source?.cloneNode(true);
+        };
+        return {
+            normal: clone("normal") ?? null,
+            continuation: clone("continuation") ?? null,
+        };
+    }
+    /** Append the exact separator story selected for this initial/continued note band. */
+    appendFootnoteSeparator(container, continuation) {
+        const kind = continuation ? "continuation" : "normal";
+        const source = continuation ? this.footnoteContinuationSeparator : this.footnoteSeparator;
+        if (!source) {
+            const fallback = this.document.createElement("hr");
+            fallback.dataset.footnoteSeparator = kind;
+            container.appendChild(fallback);
+            return;
+        }
+        const clone = source.cloneNode(true);
+        for (const element of [clone, ...Array.from(clone.querySelectorAll("*"))]) {
+            element.removeAttribute("id");
+            element.removeAttribute("data-anchor");
+            element.removeAttribute("data-committed-text");
+            element.removeAttribute("data-source-anchor-id");
+            element.removeAttribute("data-page-fragment-id");
+            element.removeAttribute("data-fragment-index");
+            element.removeAttribute("data-footnote-id");
+            element.removeAttribute("data-comment-id");
+            element.removeAttribute("name");
+            if (element instanceof this.view.HTMLAnchorElement
+                && element.getAttribute("href")?.startsWith("#")) {
+                element.removeAttribute("href");
+            }
+            element.setAttribute("contenteditable", "false");
+        }
+        container.appendChild(clone);
+    }
+    /** Parses the hidden source notes used to render paginated margin comments. */
+    parseCommentMarginRegistry() {
+        const registry = new Map();
+        const registryEl = this.stagingElement.querySelector("#pagination-comment-margin-registry");
+        if (!registryEl)
+            return registry;
+        for (const entry of Array.from(registryEl.querySelectorAll("[data-comment-id]"))) {
+            const commentId = entry.dataset.commentId;
+            if (!commentId)
+                continue;
+            // A reply's note nests inside its thread root (issue #540), so every id in a thread
+            // maps to the root's clone — a reply marker selects the whole thread, and the
+            // placement loop dedupes by the clone's own id so the thread lands once per page.
+            let root = entry;
+            for (let parent = root.parentElement?.closest("[data-comment-id]"); parent && registryEl.contains(parent); parent = root.parentElement?.closest("[data-comment-id]")) {
+                root = parent;
+            }
+            registry.set(commentId, root.cloneNode(true));
+        }
+        return registry;
+    }
     /**
      * Extracts footnote reference IDs from an element.
      */
@@ -711,6 +1884,103 @@ export class PaginationEngine {
         }
         return ids;
     }
+    /** Clone a note child for the continuation queue with its original selector position. */
+    cloneFootnoteElementForContinuation(element, sourceIndex) {
+        const clone = element.cloneNode(true);
+        clone.setAttribute(FOOTNOTE_SOURCE_POSITION_ATTR, sourceIndex === 0 ? "first" : "later");
+        return clone;
+    }
+    /** Remove identities that belong only to the initial registry presentation shell. */
+    makeContinuationShellInert(element) {
+        element.removeAttribute("id");
+        element.removeAttribute("data-anchor");
+        element.removeAttribute("data-committed-text");
+    }
+    /**
+     * Build the exact continuation shape shared by measurement and paint.
+     *
+     * Keep the source `.footnote-item > .footnote-content` ancestry: document
+     * CSS, inherited direction/language, and custom classes frequently target
+     * those shells. Only the number and initial HTML/editor identities are
+     * omitted. A hidden sentinel preserves `p:not(:first-of-type)` for a page
+     * whose first carried element was a later source paragraph.
+     */
+    createFootnoteContinuationWrapper(continuation, elements = continuation.remainingElements) {
+        const source = this.footnoteRegistry.get(continuation.footnoteId);
+        const wrapper = source
+            ? source.cloneNode(false)
+            : this.document.createElement("div");
+        this.makeContinuationShellInert(wrapper);
+        wrapper.classList.add("footnote-continuation");
+        wrapper.dataset.footnoteId = continuation.footnoteId;
+        if (continuation.sourceAnchorId) {
+            wrapper.dataset.sourceAnchorId = continuation.sourceAnchorId;
+        }
+        const sourceContent = source?.querySelector(".footnote-content");
+        const content = sourceContent
+            ? sourceContent.cloneNode(false)
+            : this.document.createElement("span");
+        this.makeContinuationShellInert(content);
+        if (!sourceContent)
+            content.className = "footnote-content";
+        const first = elements[0];
+        if (first?.tagName === "P"
+            && first.getAttribute(FOOTNOTE_SOURCE_POSITION_ATTR) === "later") {
+            const sentinel = this.document.createElement("p");
+            sentinel.className = "footnote-continuation-position-sentinel";
+            sentinel.setAttribute("aria-hidden", "true");
+            sentinel.style.setProperty("display", "none", "important");
+            content.appendChild(sentinel);
+        }
+        for (let index = 0; index < elements.length; index++) {
+            this.checkpoint();
+            const element = elements[index];
+            const clone = element.cloneNode(true);
+            clone.removeAttribute(FOOTNOTE_SOURCE_POSITION_ATTR);
+            if (index === 0 && clone.tagName === "P") {
+                // Without the initial number, a carried paragraph always starts a new
+                // line even when source CSS made the note's first paragraph inline.
+                clone.style.setProperty("display", "block", "important");
+            }
+            content.appendChild(clone);
+        }
+        wrapper.appendChild(content);
+        return wrapper;
+    }
+    /** Build the exact partial-note item shape shared by measurement and paint. */
+    createPartialFootnoteItem(footnote, fittingElements) {
+        const item = footnote.cloneNode(false);
+        const number = footnote.querySelector(".footnote-number");
+        if (number)
+            item.appendChild(number.cloneNode(true));
+        const sourceContent = footnote.querySelector(".footnote-content");
+        const content = sourceContent
+            ? sourceContent.cloneNode(false)
+            : this.document.createElement("span");
+        if (!sourceContent)
+            content.className = "footnote-content";
+        for (const element of fittingElements) {
+            this.checkpoint();
+            content.appendChild(element.cloneNode(true));
+        }
+        item.appendChild(content);
+        return item;
+    }
+    /**
+     * Where a note measurement tree is attached.
+     *
+     * A note band is reserved from a measurement and then painted; if the two
+     * happen under different inherited typography the painted notes overflow the
+     * reserve, which is the invisible clipping this engine exists to avoid. The
+     * registry lives in the staging tree but a band paints inside the output
+     * container, so measure there. The host is never a page box, so a page's
+     * `zoom` cannot scale a reserve that is accounted for in unscaled points.
+     */
+    noteMeasurementHost() {
+        return this.containerElement.isConnected
+            ? this.containerElement
+            : this.stagingElement;
+    }
     /**
      * Measures the height of footnotes for given IDs (in points).
      * Creates a temporary container to measure the footnotes.
@@ -718,80 +1988,217 @@ export class PaginationEngine {
      * @param contentWidth - Width for measurement
      * @param continuation - Optional continuation content to include first
      */
-    measureFootnotesHeight(footnoteIds, contentWidth, continuation) {
+    measureFootnotesHeight(footnoteIds, contentWidth, continuation, partialFootnotes) {
         const hasContinuation = continuation && continuation.remainingElements.length > 0;
-        if ((footnoteIds.length === 0 && !hasContinuation) || this.footnoteRegistry.size === 0) {
+        if (footnoteIds.length === 0 && !hasContinuation) {
+            return 0;
+        }
+        // Mirror addPageFootnotes: with no registry and nothing carried, no band is
+        // painted, so reserving the separator's height would shrink every page's
+        // body for a document whose note references resolve to nothing.
+        if (this.footnoteRegistry.size === 0 && !hasContinuation) {
             return 0;
         }
         // Measure in the SAME styling context the notes render in: `.page-footnotes` carries
         // its own font-size and line-height, so measuring without the class sizes the note
         // block against body type and the reserve can never match what is drawn.
         // Create a temporary measurement container
-        const measureContainer = document.createElement("div");
+        const measureContainer = this.document.createElement("div");
         measureContainer.style.position = "absolute";
         measureContainer.style.visibility = "hidden";
         measureContainer.style.width = `${contentWidth}pt`;
         measureContainer.style.left = "-9999px";
         measureContainer.className = this.cssPrefix + "footnotes";
-        // Add separator line (same as will be rendered)
-        const hr = document.createElement("hr");
-        measureContainer.appendChild(hr);
+        // Add the same normal/continuation separator story that will be painted.
+        this.appendFootnoteSeparator(measureContainer, Boolean(hasContinuation));
         // Add continuation content first (if any)
         if (hasContinuation) {
-            const contWrapper = document.createElement("div");
-            contWrapper.className = "footnote-continuation";
-            for (const el of continuation.remainingElements) {
-                contWrapper.appendChild(el.cloneNode(true));
-            }
-            measureContainer.appendChild(contWrapper);
+            measureContainer.appendChild(this.createFootnoteContinuationWrapper(continuation));
         }
         // Add footnotes
+        const partialById = new Map(partialFootnotes?.map((partial) => [partial.footnoteId, partial]) ?? []);
         for (const id of footnoteIds) {
+            this.checkpoint();
             const footnote = this.footnoteRegistry.get(id);
             if (footnote) {
-                measureContainer.appendChild(footnote.cloneNode(true));
+                const partial = partialById.get(id);
+                measureContainer.appendChild(partial
+                    ? this.createPartialFootnoteItem(footnote, partial.fittingElements)
+                    : footnote.cloneNode(true));
             }
         }
         // Append to staging for measurement
-        this.stagingElement.appendChild(measureContainer);
-        // Measure
-        const rect = measureContainer.getBoundingClientRect();
-        const heightPt = pxToPt(rect.height);
-        // Clean up
-        this.stagingElement.removeChild(measureContainer);
-        return heightPt;
+        this.noteMeasurementHost().appendChild(measureContainer);
+        try {
+            return pxToPt(measureContainer.getBoundingClientRect().height);
+        }
+        finally {
+            measureContainer.remove();
+        }
     }
     /**
-     * Measures the height of just the continuation content (in points).
+     * Partition a continuation for one page's note band, preferring complete children
+     * and range-fragmenting an eligible paragraph when necessary. Always advances by
+     * at least one element so an indivisible oversized paragraph follows the established
+     * clipped fallback without trapping pagination in a loop.
      */
-    measureContinuationHeight(continuation, contentWidth) {
-        if (!continuation || continuation.remainingElements.length === 0) {
-            return 0;
-        }
-        const measureContainer = document.createElement("div");
+    splitContinuationForPage(continuation, availableHeightPt, contentWidth) {
+        const fitting = [];
+        let remaining = [];
+        // Keep one live measurement tree and append each candidate exactly once.
+        // Rebuilding `[...fitting, candidate]` for every child cloned 1+2+...+N
+        // descendants before a page/resource cap could run, which is quadratic for
+        // producer-authored notes containing thousands of tiny paragraphs/runs.
+        const measureContainer = this.document.createElement("div");
         measureContainer.style.position = "absolute";
         measureContainer.style.visibility = "hidden";
         measureContainer.style.width = `${contentWidth}pt`;
         measureContainer.style.left = "-9999px";
         measureContainer.className = this.cssPrefix + "footnotes";
-        // Add separator line
-        const hr = document.createElement("hr");
-        measureContainer.appendChild(hr);
-        // Add continuation content
-        for (const el of continuation.remainingElements) {
-            measureContainer.appendChild(el.cloneNode(true));
+        this.appendFootnoteSeparator(measureContainer, true);
+        const wrapper = this.createFootnoteContinuationWrapper(continuation, []);
+        const content = wrapper.querySelector(":scope > .footnote-content");
+        if (!content) {
+            throw new Error("Footnote continuation is missing its content shell");
+        }
+        measureContainer.appendChild(wrapper);
+        this.noteMeasurementHost().appendChild(measureContainer);
+        try {
+            for (let index = 0; index < continuation.remainingElements.length; index++) {
+                this.checkpoint();
+                const element = continuation.remainingElements[index];
+                const sourcePosition = element.getAttribute(FOOTNOTE_SOURCE_POSITION_ATTR);
+                if (fitting.length === 0
+                    && element.tagName === "P"
+                    && element.getAttribute(FOOTNOTE_SOURCE_POSITION_ATTR) === "later") {
+                    const sentinel = this.document.createElement("p");
+                    sentinel.className = "footnote-continuation-position-sentinel";
+                    sentinel.setAttribute("aria-hidden", "true");
+                    sentinel.style.setProperty("display", "none", "important");
+                    content.appendChild(sentinel);
+                }
+                const candidate = element.cloneNode(true);
+                candidate.removeAttribute(FOOTNOTE_SOURCE_POSITION_ATTR);
+                if (fitting.length === 0 && candidate.tagName === "P") {
+                    candidate.style.setProperty("display", "block", "important");
+                }
+                content.appendChild(candidate);
+                const candidateHeight = pxToPt(measureContainer.getBoundingClientRect().height);
+                if (candidateHeight <= availableHeightPt) {
+                    fitting.push(element);
+                    continue;
+                }
+                const canSplitCandidate = candidate.tagName === "P"
+                    && this.canRangeFragmentParagraph(candidate);
+                candidate.remove();
+                let split = null;
+                if (canSplitCandidate) {
+                    split = this.splitParagraphAtLargestFit(candidate, (head) => {
+                        content.appendChild(head);
+                        try {
+                            return pxToPt(measureContainer.getBoundingClientRect().height) <= availableHeightPt;
+                        }
+                        finally {
+                            head.remove();
+                        }
+                    }, {
+                        // Both fallbacks below cut where ordinary line breaking would not,
+                        // so they are only ever right for an element that owns the whole
+                        // band: if this page already carries earlier content, a paragraph
+                        // that will not start here belongs intact in the next note band.
+                        emergencyGraphemeBreaks: fitting.length === 0,
+                        // A continuation page owns the full note band. If even one legal
+                        // grapheme is taller than it, clip only that unit and keep draining.
+                        forceFirstOnNoFit: fitting.length === 0,
+                    });
+                }
+                if (split?.kind === "split") {
+                    if (sourcePosition) {
+                        split.head.setAttribute(FOOTNOTE_SOURCE_POSITION_ATTR, sourcePosition);
+                        split.tail.setAttribute(FOOTNOTE_SOURCE_POSITION_ATTR, sourcePosition);
+                    }
+                    fitting.push(split.head);
+                    remaining = [split.tail, ...continuation.remainingElements.slice(index + 1)];
+                }
+                else if (fitting.length === 0) {
+                    // A genuinely indivisible first element retains the established visible
+                    // clipped fallback, but only for itself. Its siblings continue later.
+                    fitting.push(element);
+                    remaining = continuation.remainingElements.slice(index + 1);
+                }
+                else {
+                    remaining = continuation.remainingElements.slice(index);
+                }
+                break;
+            }
         }
-        this.stagingElement.appendChild(measureContainer);
-        const rect = measureContainer.getBoundingClientRect();
-        const heightPt = pxToPt(rect.height);
-        this.stagingElement.removeChild(measureContainer);
-        return heightPt;
+        finally {
+            measureContainer.remove();
+        }
+        return {
+            current: {
+                footnoteId: continuation.footnoteId,
+                sourceAnchorId: continuation.sourceAnchorId,
+                remainingElements: fitting,
+            },
+            overflow: remaining.length > 0 ? {
+                footnoteId: continuation.footnoteId,
+                sourceAnchorId: continuation.sourceAnchorId,
+                remainingElements: remaining,
+            } : null,
+        };
     }
     /**
      * Splits a footnote element into parts that fit within the available height.
      * Returns the elements that fit and the elements that need to continue.
      */
-    splitFootnoteToFit(footnoteElement, availableHeightPt, contentWidth) {
+    splitFootnoteToFit(footnoteElement, availableHeightPt, contentWidth, forceProgress = false, existingPayload) {
+        // Registry entries are detached clones, so getComputedStyle() cannot validate
+        // their real paragraph layout. Attach an exact clone in the rendered note
+        // context for the duration of the conservative range-fragmentation check.
+        const layoutContext = this.document.createElement("div");
+        layoutContext.style.position = "absolute";
+        layoutContext.style.visibility = "hidden";
+        layoutContext.style.width = `${contentWidth}pt`;
+        layoutContext.style.left = "-9999px";
+        layoutContext.className = this.cssPrefix + "footnotes";
+        this.appendFootnoteSeparator(layoutContext, false);
+        const attachedFootnote = footnoteElement.cloneNode(true);
+        layoutContext.appendChild(attachedFootnote);
+        this.noteMeasurementHost().appendChild(layoutContext);
+        // A second live tree represents the exact already-packed page payload plus
+        // an initially empty partial item. Candidates are appended once and layout
+        // is read in place, avoiding cumulative prefix re-cloning.
+        const measureContainer = this.document.createElement("div");
+        measureContainer.style.position = "absolute";
+        measureContainer.style.visibility = "hidden";
+        measureContainer.style.width = `${contentWidth}pt`;
+        measureContainer.style.left = "-9999px";
+        measureContainer.className = this.cssPrefix + "footnotes";
+        const hasContinuation = Boolean(existingPayload?.continuation?.remainingElements.length);
+        this.appendFootnoteSeparator(measureContainer, hasContinuation);
+        if (hasContinuation) {
+            measureContainer.appendChild(this.createFootnoteContinuationWrapper(existingPayload.continuation));
+        }
+        const partialById = new Map(existingPayload?.partialFootnotes?.map((partial) => [partial.footnoteId, partial]) ?? []);
+        for (const id of existingPayload?.footnoteIds ?? []) {
+            this.checkpoint();
+            const source = this.footnoteRegistry.get(id);
+            if (!source)
+                continue;
+            const partial = partialById.get(id);
+            measureContainer.appendChild(partial
+                ? this.createPartialFootnoteItem(source, partial.fittingElements)
+                : source.cloneNode(true));
+        }
+        const measuredPartial = this.createPartialFootnoteItem(attachedFootnote, []);
+        const measuredContent = measuredPartial.querySelector(":scope > .footnote-content");
+        if (!measuredContent) {
+            layoutContext.remove();
+            throw new Error("Footnote is missing its content shell");
+        }
+        measureContainer.appendChild(measuredPartial);
+        this.noteMeasurementHost().appendChild(measureContainer);
         // Get child elements (paragraphs) of the footnote content.
         //
         // `fits` is spliced into a freshly built `.footnote-item` > `.footnote-content` wrapper by
@@ -800,86 +2207,78 @@ export class PaginationEngine {
         // inside another item's content span; the inner block-level div then broke the line, so the
         // note's number rendered alone above its text — the same visible symptom as the escaped-CSS
         // bug, from an unrelated cause, on the notes that happened to take a can't-split path.
-        const footnoteContent = footnoteElement.querySelector(".footnote-content");
-        if (!footnoteContent) {
-            // No content structure to split — hand back the element's own children.
-            return {
-                fits: Array.from(footnoteElement.children).map((el) => el.cloneNode(true)),
-                overflow: [],
-            };
-        }
-        const children = Array.from(footnoteContent.children);
-        if (children.length <= 1) {
-            // Single paragraph: can't split at paragraph level, but the whole content still fits.
-            return {
-                fits: children.map((el) => el.cloneNode(true)),
-                overflow: [],
-            };
-        }
-        const fits = [];
-        const overflow = [];
-        let currentHeight = 0;
-        // Measure separator line height
-        const hrMeasure = document.createElement("div");
-        hrMeasure.style.position = "absolute";
-        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);
-        const hrHeight = pxToPt(hrMeasure.getBoundingClientRect().height);
-        this.stagingElement.removeChild(hrMeasure);
-        currentHeight = hrHeight;
-        // Also account for footnote number
-        const footnoteNumber = footnoteElement.querySelector(".footnote-number");
-        for (let i = 0; i < children.length; i++) {
-            const child = children[i];
-            // Measure this element
-            const measureContainer = document.createElement("div");
-            measureContainer.style.position = "absolute";
-            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);
-            this.stagingElement.removeChild(measureContainer);
-            if (currentHeight + childHeight <= availableHeightPt) {
-                fits.push(child.cloneNode(true));
-                currentHeight += childHeight;
+        try {
+            const footnoteContent = attachedFootnote.querySelector(".footnote-content");
+            if (!footnoteContent) {
+                // No content structure to split — hand back the element's own children.
+                return {
+                    fits: Array.from(attachedFootnote.children).map((el) => el.cloneNode(true)),
+                    overflow: [],
+                };
             }
-            else {
-                // This and remaining elements overflow
-                for (let j = i; j < children.length; j++) {
-                    overflow.push(children[j].cloneNode(true));
+            const children = Array.from(footnoteContent.children);
+            const fits = [];
+            let overflow = [];
+            for (let i = 0; i < children.length; i++) {
+                this.checkpoint();
+                const child = children[i];
+                const measuredCandidate = child.cloneNode(true);
+                measuredContent.appendChild(measuredCandidate);
+                const candidateFits = pxToPt(measureContainer.getBoundingClientRect().height)
+                    <= availableHeightPt;
+                if (candidateFits) {
+                    fits.push(child.cloneNode(true));
+                    continue;
+                }
+                measuredCandidate.remove();
+                const split = this.canRangeFragmentParagraph(child, true)
+                    ? this.splitParagraphAtLargestFit(child, (head) => {
+                        measuredContent.appendChild(head);
+                        try {
+                            return pxToPt(measureContainer.getBoundingClientRect().height)
+                                <= availableHeightPt;
+                        }
+                        finally {
+                            head.remove();
+                        }
+                    }, {
+                        // Both fallbacks cut where ordinary line breaking would not, so they
+                        // are only ever right for an element that owns the whole band: with
+                        // earlier siblings already packed here, a paragraph that will not
+                        // start belongs intact in the next note band.
+                        emergencyGraphemeBreaks: fits.length === 0 && forceProgress,
+                        forceFirstOnNoFit: fits.length === 0 && forceProgress,
+                    })
+                    : null;
+                if (split?.kind === "split") {
+                    fits.push(split.head);
+                    split.tail.setAttribute(FOOTNOTE_SOURCE_POSITION_ATTR, i === 0 ? "first" : "later");
+                    overflow = [split.tail, ...children.slice(i + 1).map((element, offset) => this.cloneFootnoteElementForContinuation(element, i + 1 + offset))];
+                }
+                else if (split?.kind === "no-fit") {
+                    // The paragraph is splittable, but this citation page has less than
+                    // one line left. Defer it whole so a fresh note band can try again.
+                    overflow = children.slice(i).map((element, offset) => this.cloneFootnoteElementForContinuation(element, i + offset));
+                }
+                else if (fits.length === 0 && forceProgress) {
+                    // Preserve the one-element clipping fallback for content that cannot be
+                    // range-fragmented only on a dedicated full note band, while allowing
+                    // every later sibling to continue. A residual citation-page band must
+                    // defer the whole element: it may fit untouched on the next page.
+                    fits.push(child.cloneNode(true));
+                    overflow = children.slice(i + 1).map((element, offset) => this.cloneFootnoteElementForContinuation(element, i + 1 + offset));
+                }
+                else {
+                    overflow = children.slice(i).map((element, offset) => this.cloneFootnoteElementForContinuation(element, i + offset));
                 }
                 break;
             }
+            return { fits, overflow };
+        }
+        finally {
+            measureContainer.remove();
+            layoutContext.remove();
         }
-        return { fits, overflow };
-    }
-    /**
-     * Measures a single footnote's height.
-     */
-    measureSingleFootnoteHeight(footnoteId, contentWidth) {
-        const footnote = this.footnoteRegistry.get(footnoteId);
-        if (!footnote)
-            return 0;
-        const measureContainer = document.createElement("div");
-        measureContainer.style.position = "absolute";
-        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();
-        const heightPt = pxToPt(rect.height);
-        this.stagingElement.removeChild(measureContainer);
-        return heightPt;
     }
     /**
      * Adds footnotes to a page container, including continuation content.
@@ -892,11 +2291,9 @@ export class PaginationEngine {
         if (this.footnoteRegistry.size === 0 && !hasContinuation) {
             return;
         }
-        // Create a set of partial footnote IDs for quick lookup
-        const partialFootnoteIds = new Set(partialFootnotes?.map(p => p.footnoteId) || []);
         // Calculate max height for footnotes area (content height minus margin for body content)
         const maxFootnoteHeight = Math.min(footnoteHeight, bands.bodyHeight * MAX_FOOTNOTE_AREA_RATIO);
-        const footnotesDiv = document.createElement("div");
+        const footnotesDiv = this.document.createElement("div");
         footnotesDiv.className = `${this.cssPrefix}footnotes`;
         footnotesDiv.style.position = "absolute";
         // Notes sit at the FOOT OF THE BODY BAND, not at the bottom margin: a footer taller than
@@ -908,17 +2305,10 @@ export class PaginationEngine {
         // Constrain height and clip overflow to prevent footnotes covering body content
         footnotesDiv.style.maxHeight = `${maxFootnoteHeight}pt`;
         footnotesDiv.style.overflow = "hidden";
-        // Add separator line
-        const hr = document.createElement("hr");
-        footnotesDiv.appendChild(hr);
+        this.appendFootnoteSeparator(footnotesDiv, Boolean(hasContinuation));
         // Add continuation content first (if any)
         if (hasContinuation) {
-            const contWrapper = document.createElement("div");
-            contWrapper.className = "footnote-continuation";
-            for (const el of continuation.remainingElements) {
-                contWrapper.appendChild(el.cloneNode(true));
-            }
-            footnotesDiv.appendChild(contWrapper);
+            footnotesDiv.appendChild(this.createFootnoteContinuationWrapper(continuation));
         }
         // Clone footnotes in order of appearance
         for (const id of footnoteIds) {
@@ -928,22 +2318,7 @@ export class PaginationEngine {
                 // Render partial footnote (only the fitting elements)
                 const footnote = this.footnoteRegistry.get(id);
                 if (footnote) {
-                    const partialDiv = document.createElement("div");
-                    partialDiv.className = "footnote-item";
-                    partialDiv.dataset.footnoteId = id;
-                    // Add footnote number
-                    const numberSpan = footnote.querySelector(".footnote-number");
-                    if (numberSpan) {
-                        partialDiv.appendChild(numberSpan.cloneNode(true));
-                    }
-                    // Add only the fitting content
-                    const contentSpan = document.createElement("span");
-                    contentSpan.className = "footnote-content";
-                    for (const el of partial.fittingElements) {
-                        contentSpan.appendChild(el.cloneNode(true));
-                    }
-                    partialDiv.appendChild(contentSpan);
-                    footnotesDiv.appendChild(partialDiv);
+                    footnotesDiv.appendChild(this.createPartialFootnoteItem(footnote, partial.fittingElements));
                 }
             }
             else {
@@ -956,10 +2331,8 @@ export class PaginationEngine {
         }
         pageBox.appendChild(footnotesDiv);
     }
-    /**
-     * Selects the appropriate header for a page based on section, page position, and page number.
-     */
-    selectHeader(sectionIndex, pageInSection, globalPageNumber) {
+    /** Select the section's first/odd/even header from its one-based page position. */
+    selectHeader(sectionIndex, pageInSection, displayedPageNumber) {
         const sectionHf = this.hfRegistry.get(sectionIndex);
         if (!sectionHf)
             return undefined;
@@ -967,17 +2340,19 @@ export class PaginationEngine {
         if (pageInSection === 1 && sectionHf.headerFirst) {
             return sectionHf.headerFirst;
         }
-        // Even pages use even header if available
-        if (globalPageNumber % 2 === 0 && sectionHf.headerEven) {
+        // ECMA-376 §17.10.5 hangs the even story on "even numbered pages": the PAGE NUMBER,
+        // which keeps counting across a section boundary unless w:pgNumType restarts it (and a
+        // restart moves the parity with it). Word and LibreOffice both render DB001-Sections
+        // this way; selecting by position-in-section flips every story of a section that
+        // begins on an even page (issue #536).
+        if (displayedPageNumber % 2 === 0 && sectionHf.headerEven) {
             return sectionHf.headerEven;
         }
         // Default (odd) pages
         return sectionHf.headerDefault;
     }
-    /**
-     * Selects the appropriate footer for a page based on section, page position, and page number.
-     */
-    selectFooter(sectionIndex, pageInSection, globalPageNumber) {
+    /** Select the section's first/odd/even footer from its one-based page position. */
+    selectFooter(sectionIndex, pageInSection, displayedPageNumber) {
         const sectionHf = this.hfRegistry.get(sectionIndex);
         if (!sectionHf)
             return undefined;
@@ -985,8 +2360,7 @@ export class PaginationEngine {
         if (pageInSection === 1 && sectionHf.footerFirst) {
             return sectionHf.footerFirst;
         }
-        // Even pages use even footer if available
-        if (globalPageNumber % 2 === 0 && sectionHf.footerEven) {
+        if (displayedPageNumber % 2 === 0 && sectionHf.footerEven) {
             return sectionHf.footerEven;
         }
         // Default (odd) pages
@@ -1002,18 +2376,18 @@ export class PaginationEngine {
      * 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.
      */
-    getPageBands(dims, sectionIndex, pageInSection, globalPageNumber) {
+    getPageBands(dims, sectionIndex, pageInSection, displayedPageNumber) {
         const sectionHf = this.hfRegistry.get(sectionIndex);
-        return resolvePageBands(dims, this.selectStoryHeight(sectionHf?.headerFirstHeight, sectionHf?.headerEvenHeight, sectionHf?.headerDefaultHeight, pageInSection, globalPageNumber), this.selectStoryHeight(sectionHf?.footerFirstHeight, sectionHf?.footerEvenHeight, sectionHf?.footerDefaultHeight, pageInSection, globalPageNumber));
+        return resolvePageBands(dims, this.selectStoryHeight(sectionHf?.headerFirstHeight, sectionHf?.headerEvenHeight, sectionHf?.headerDefaultHeight, pageInSection, displayedPageNumber), this.selectStoryHeight(sectionHf?.footerFirstHeight, sectionHf?.footerEvenHeight, sectionHf?.footerDefaultHeight, pageInSection, displayedPageNumber));
     }
     /**
      * 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) {
+    selectStoryHeight(first, even, fallback, pageInSection, displayedPageNumber) {
         if (pageInSection === 1 && first != null)
             return first;
-        if (globalPageNumber % 2 === 0 && even != null)
+        if (displayedPageNumber % 2 === 0 && even != null)
             return even;
         return fallback ?? 0;
     }
@@ -1027,7 +2401,7 @@ export class PaginationEngine {
      */
     measureHeaderFooterHeight(source, contentWidth) {
         // Create a temporary measurement container
-        const measureContainer = document.createElement("div");
+        const measureContainer = this.document.createElement("div");
         measureContainer.style.position = "absolute";
         measureContainer.style.visibility = "hidden";
         measureContainer.style.width = `${contentWidth}pt`;
@@ -1050,25 +2424,49 @@ export class PaginationEngine {
      * Implements a single-pass, forward-only algorithm that is compatible with future lazy loading.
      * Supports footnote continuation - long footnotes can split across pages.
      */
-    flowToPages(blocks, dims, startPageNumber, sectionIndex) {
+    flowToPages(blocks, dims, startPageNumber, sectionIndex, sectionDimensions) {
         const pages = [];
         let currentContent = [];
         let pageNumber = startPageNumber;
-        // Track page number within this section for first-page header/footer selection
-        let pageInSection = 1;
+        let pageSectionIndex = sectionIndex;
+        // A continuous section can begin on a page owned by its predecessor. That shared physical
+        // page is still page 1 of the later section, so its first independently owned page is page 2.
+        const sectionStartPages = new Map([[sectionIndex, startPageNumber]]);
+        const pageInSection = (owner = pageSectionIndex, physicalPage = pageNumber) => physicalPage - (sectionStartPages.get(owner) ?? physicalPage) + 1;
+        const dimensionsFor = (owner = pageSectionIndex) => sectionDimensions.get(owner) ?? dims;
+        const markSectionPlaced = (owner) => {
+            if (!sectionStartPages.has(owner))
+                sectionStartPages.set(owner, pageNumber);
+        };
+        const previousBox = this.containerElement.querySelector(`.${this.cssPrefix}box:last-of-type`);
+        let precedingDisplayedPageNumber = parseInt(previousBox?.dataset.displayedPageNumber ?? "0", 10);
+        const displayedPageNumber = (owner = pageSectionIndex, ownerPageInSection = pageInSection(owner), physicalPage = pageNumber) => {
+            const numbering = this.pageNumbering.get(owner) ?? {};
+            if (numbering.start !== undefined) {
+                return numbering.start + ownerPageInSection - 1;
+            }
+            const ownerNumbering = this.pageNumbering.get(pageSectionIndex) ?? {};
+            const currentPhysicalNumber = ownerNumbering.start !== undefined
+                ? ownerNumbering.start + pageInSection(pageSectionIndex) - 1
+                : precedingDisplayedPageNumber + 1;
+            return currentPhysicalNumber + physicalPage - pageNumber;
+        };
         // Get effective content height for first page (accounts for header/footer sizes)
-        let { bodyHeight: effectiveContentHeight } = this.getPageBands(dims, sectionIndex, pageInSection, pageNumber);
+        let { bodyHeight: effectiveContentHeight } = this.getPageBands(dimensionsFor(), pageSectionIndex, pageInSection(), displayedPageNumber());
         let remainingHeight = effectiveContentHeight;
         // Track the previous block's bottom margin for margin collapsing
         let prevMarginBottomPt = 0;
         // Track footnote IDs for the current page
         let currentFootnoteIds = [];
+        let currentPageHasFootnoteReference = false;
         // Track height consumed by footnotes on current page
         let currentFootnoteHeight = 0;
         // Track footnote continuation for current page (from previous page)
         let currentContinuation = this.pendingFootnoteContinuation;
         // Track any new continuation that will carry to next page
         let nextPageContinuation = null;
+        let currentContinuationPartitioned = false;
+        let currentPageAdmitted = false;
         /**
          * Whole notes that could not be started on this page and must render on the next one.
          *
@@ -1083,29 +2481,133 @@ export class PaginationEngine {
         let deferredFootnoteIds = [];
         // Track partial footnotes for current page (footnotes that were split)
         let currentPartialFootnotes = [];
-        // Account for any continuation from previous section/page
-        if (currentContinuation && currentContinuation.remainingElements.length > 0) {
-            currentFootnoteHeight = this.measureContinuationHeight(currentContinuation, dims.contentWidth);
-        }
-        const finishPage = () => {
+        const adoptEmptyPageOwner = (owner) => {
+            pageSectionIndex = owner;
+            const bands = this.getPageBands(dimensionsFor(owner), owner, pageInSection(owner), displayedPageNumber(owner));
+            effectiveContentHeight = bands.bodyHeight;
+            remainingHeight = effectiveContentHeight;
+        };
+        const admitCurrentPage = () => {
+            if (currentPageAdmitted)
+                return;
+            this.admitPageAllocation();
+            currentPageAdmitted = true;
+        };
+        const prepareCurrentContinuation = () => {
+            if (currentContinuationPartitioned
+                || (currentContinuation?.remainingElements.length ?? 0) === 0)
+                return;
+            // A continuation guarantees that this physical page will exist. Admit it
+            // before touching the carried DOM, then partition once and retain that
+            // exact head while body placement is decided.
+            admitCurrentPage();
+            const ownedDimensions = dimensionsFor();
+            const pageBands = this.getPageBands(ownedDimensions, pageSectionIndex, pageInSection(), displayedPageNumber());
+            const partition = this.splitContinuationForPage(currentContinuation, pageBands.bodyHeight * MAX_FOOTNOTE_AREA_RATIO, ownedDimensions.contentWidth);
+            currentContinuation = partition.current;
+            if (partition.overflow)
+                nextPageContinuation = partition.overflow;
+            currentContinuationPartitioned = true;
+            currentFootnoteHeight = this.measureFootnotesHeight(currentFootnoteIds, ownedDimensions.contentWidth, currentContinuation, currentPartialFootnotes);
+        };
+        const finishPage = (nextPageSectionIndex = pageSectionIndex, forceEmptyPage = false) => {
             const hasCurrentContinuation = (currentContinuation?.remainingElements.length ?? 0) > 0;
-            if (currentContent.length === 0 && !hasCurrentContinuation)
+            if (!forceEmptyPage && currentContent.length === 0 && currentFootnoteIds.length === 0
+                && !hasCurrentContinuation) {
+                adoptEmptyPageOwner(nextPageSectionIndex);
                 return;
-            const page = this.createPage(dims, pageNumber, sectionIndex, currentContent, pageInSection, currentFootnoteIds, currentFootnoteHeight, currentContinuation, currentPartialFootnotes.length > 0 ? currentPartialFootnotes : undefined);
+            }
+            prepareCurrentContinuation();
+            // Pages without a carried continuation are charged here. Continuation
+            // pages were charged before their page-owned partition above.
+            admitCurrentPage();
+            let pageContinuation = currentContinuation;
+            const ownedPageInSection = pageInSection();
+            const ownedDimensions = dimensionsFor();
+            const ownedDisplayedPageNumber = displayedPageNumber(pageSectionIndex, ownedPageInSection);
+            const pageBands = this.getPageBands(ownedDimensions, pageSectionIndex, ownedPageInSection, ownedDisplayedPageNumber);
+            const maxFootnoteHeight = pageBands.bodyHeight * MAX_FOOTNOTE_AREA_RATIO;
+            // `prepareCurrentContinuation` has already packed the exact head for this
+            // page. Keeping that partition stable lets body fit decisions share the
+            // remaining band without rescanning the entire tail.
+            pageContinuation = currentContinuation;
+            // Recompute the entire painted payload after continuation partitioning.
+            // Measuring only the carried head here discarded the reserve for a newer
+            // whole/partial note and let the clipped note band silently consume it.
+            currentFootnoteHeight = this.measureFootnotesHeight(currentFootnoteIds, ownedDimensions.contentWidth, pageContinuation, currentPartialFootnotes);
+            // A final body page can seed the next page with several whole notes. Partition that queue
+            // before materializing a note-only page: addPageFootnotes deliberately clips its band, so
+            // placing the entire queue in one page would keep the DOM nodes while making later notes
+            // invisible (and therefore absent from a geometry-clipped PageMap).
+            if (currentContent.length === 0 && currentFootnoteIds.length > 0
+                && currentPartialFootnotes.length === 0) {
+                const fittingIds = [];
+                for (let index = 0; index < currentFootnoteIds.length; index++) {
+                    const footnoteId = currentFootnoteIds[index];
+                    const candidateIds = [...fittingIds, footnoteId];
+                    const candidateHeight = this.measureFootnotesHeight(candidateIds, ownedDimensions.contentWidth, pageContinuation);
+                    const guardedCandidateHeight = candidateHeight + FOOTNOTE_MEASUREMENT_GUARD_PT;
+                    if (guardedCandidateHeight <= maxFootnoteHeight) {
+                        fittingIds.push(footnoteId);
+                        currentFootnoteHeight = guardedCandidateHeight;
+                        continue;
+                    }
+                    const hasPageContinuation = (pageContinuation?.remainingElements.length ?? 0) > 0;
+                    if (fittingIds.length === 0 && !hasPageContinuation) {
+                        // One note alone is taller than the note band. Split at the same safe paragraph
+                        // boundaries used during body flow; if it is indivisible, preserve the established
+                        // visible clipped fallback while still advancing the queue.
+                        const source = this.footnoteRegistry.get(footnoteId);
+                        const split = source
+                            ? this.splitFootnoteToFit(source, maxFootnoteHeight - FOOTNOTE_MEASUREMENT_GUARD_PT, ownedDimensions.contentWidth, true)
+                            : null;
+                        fittingIds.push(footnoteId);
+                        if (source && split && split.fits.length > 0 && split.overflow.length > 0) {
+                            currentPartialFootnotes.push({ footnoteId, fittingElements: split.fits });
+                            nextPageContinuation = {
+                                footnoteId,
+                                sourceAnchorId: source.dataset.sourceAnchorId,
+                                remainingElements: split.overflow,
+                            };
+                            currentFootnoteHeight = maxFootnoteHeight;
+                        }
+                        else {
+                            currentFootnoteHeight = guardedCandidateHeight;
+                        }
+                        deferredFootnoteIds.push(...currentFootnoteIds.slice(index + 1));
+                    }
+                    else {
+                        deferredFootnoteIds.push(...currentFootnoteIds.slice(index));
+                    }
+                    break;
+                }
+                currentFootnoteIds = fittingIds;
+            }
+            const page = this.createPage(ownedDimensions, pageNumber, pageSectionIndex, ownedDisplayedPageNumber, currentContent, ownedPageInSection, currentFootnoteIds, currentFootnoteHeight, pageContinuation, currentPartialFootnotes.length > 0 ? currentPartialFootnotes : undefined, false, currentPageAdmitted);
             pages.push(page);
+            precedingDisplayedPageNumber = ownedDisplayedPageNumber;
             pageNumber++;
-            pageInSection++;
             currentContent = [];
+            pageSectionIndex = nextPageSectionIndex;
+            if (!sectionStartPages.has(pageSectionIndex)) {
+                // A carried note can own pages before the first body block of a new
+                // section lands. Count those physical pages in that section so first /
+                // odd / even stories and restarted displayed numbering advance once.
+                sectionStartPages.set(pageSectionIndex, pageNumber);
+            }
             // Get effective content height for new page position
-            const newBands = this.getPageBands(dims, sectionIndex, pageInSection, pageNumber);
+            const newBands = this.getPageBands(dimensionsFor(), pageSectionIndex, pageInSection(), displayedPageNumber());
             effectiveContentHeight = newBands.bodyHeight;
             remainingHeight = effectiveContentHeight;
             prevMarginBottomPt = 0; // Reset margin tracking for new page
             currentFootnoteIds = []; // Reset footnotes for new page
+            currentPageHasFootnoteReference = false;
             currentPartialFootnotes = []; // Reset partial footnotes for new page
             // Carry over continuation to next page
             currentContinuation = nextPageContinuation;
             nextPageContinuation = null;
+            currentContinuationPartitioned = false;
+            currentPageAdmitted = false;
             // Notes that never got started land at the top of the new page's note area. They are
             // ordinary footnotes from here on, so the normal fitting path handles them — and because
             // this page is fresh, the space they were denied now exists.
@@ -1113,27 +2615,86 @@ export class PaginationEngine {
                 currentFootnoteIds = [...deferredFootnoteIds];
                 deferredFootnoteIds = [];
             }
-            // Account for continuation height on new page
-            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);
-            }
+            // Whole deferred notes have no carried DOM and can be measured directly.
+            // A continuation is partitioned lazily after the prospective page has
+            // passed its resource admission check, so never clone its entire tail here.
+            const nextDimensions = dimensionsFor();
+            currentFootnoteHeight = currentContinuation
+                ? 0
+                : this.measureFootnotesHeight(currentFootnoteIds, nextDimensions.contentWidth);
         };
+        const pageHasPayload = () => currentContent.length > 0
+            || currentFootnoteIds.length > 0
+            || (currentContinuation?.remainingElements.length ?? 0) > 0;
         for (let i = 0; i < blocks.length; i++) {
+            this.checkpoint();
             const block = blocks[i];
+            const allBlockFootnoteIds = this.extractFootnoteRefs(block.element);
+            // Word normally lets a same-box continuous section begin on its predecessor's page. By
+            // default, a footnote reference before that boundary promotes it to a page break. The
+            // footnoteLayoutLikeWW8 compatibility switch permits post-break paragraphs without their own
+            // references to remain on the shared page; keep checking until the page turns so a later
+            // referenced paragraph still begins on a fresh page.
+            if (block.sectionIndex !== pageSectionIndex && currentPageHasFootnoteReference
+                && (!this.footnoteLayoutLikeWord8 || allBlockFootnoteIds.length > 0)) {
+                finishPage(block.sectionIndex);
+            }
+            const pageIsEmpty = currentContent.length === 0
+                && currentFootnoteIds.length === 0
+                && (currentContinuation?.remainingElements.length ?? 0) === 0;
+            if (pageIsEmpty && block.sectionIndex !== pageSectionIndex) {
+                adoptEmptyPageOwner(block.sectionIndex);
+            }
+            prepareCurrentContinuation();
+            if (currentFootnoteHeight > 0) {
+                const ownerDimensions = dimensionsFor();
+                const ownerBands = this.getPageBands(ownerDimensions, pageSectionIndex, pageInSection(), displayedPageNumber());
+                const ownerMaxFootnoteArea = ownerBands.bodyHeight * MAX_FOOTNOTE_AREA_RATIO;
+                if (currentFootnoteHeight > ownerMaxFootnoteArea) {
+                    // A queue of whole notes larger than the band does not entitle it to
+                    // the whole page: the band is capped and the rest of the page still
+                    // belongs to body text. Keep the notes that fit here, defer the rest,
+                    // and only fall back to a note-owned page when not even one note fits
+                    // — that case needs the splitting finishPage performs.
+                    const fittingIds = [];
+                    let fittingHeight = 0;
+                    if ((currentContinuation?.remainingElements.length ?? 0) === 0
+                        && currentPartialFootnotes.length === 0) {
+                        for (const footnoteId of currentFootnoteIds) {
+                            this.checkpoint();
+                            const candidateHeight = this.measureFootnotesHeight([...fittingIds, footnoteId], ownerDimensions.contentWidth);
+                            if (candidateHeight + FOOTNOTE_MEASUREMENT_GUARD_PT > ownerMaxFootnoteArea)
+                                break;
+                            fittingIds.push(footnoteId);
+                            fittingHeight = candidateHeight;
+                        }
+                    }
+                    if (fittingIds.length > 0) {
+                        deferredFootnoteIds = [
+                            ...currentFootnoteIds.slice(fittingIds.length),
+                            ...deferredFootnoteIds,
+                        ];
+                        currentFootnoteIds = fittingIds;
+                        currentFootnoteHeight = fittingHeight;
+                    }
+                    else {
+                        finishPage(block.sectionIndex);
+                        i--;
+                        continue;
+                    }
+                }
+            }
+            const blockDimensions = dimensionsFor(block.sectionIndex);
+            const nextBlockPageInSection = pageInSection(block.sectionIndex, pageNumber + 1);
+            const freshBlockPageBodyHeight = this.getPageBands(blockDimensions, block.sectionIndex, nextBlockPageInSection, displayedPageNumber(block.sectionIndex, nextBlockPageInSection, pageNumber + 1)).bodyHeight;
             // Handle explicit page breaks
             if (block.isPageBreak) {
-                finishPage();
+                finishPage(block.sectionIndex);
                 continue;
             }
             // Handle page break before
             if (block.pageBreakBefore && currentContent.length > 0) {
-                finishPage();
+                finishPage(block.sectionIndex);
             }
             // A series of keep-with-next blocks is one indivisible placement unit
             // when it can fit a new page. The former one-block lookahead was never
@@ -1155,47 +2716,43 @@ export class PaginationEngine {
                     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);
+                        const totalChainFootnoteHeight = this.measureFootnotesHeight([...currentFootnoteIds, ...newChainFootnoteIds], blockDimensions.contentWidth, currentContinuation);
                         additionalChainFootnoteHeight = Math.max(0, totalChainFootnoteHeight - currentFootnoteHeight);
                     }
-                    const currentChainHeight = this.measureKeepWithNextChainBodyHeight(keepChain, prevMarginBottomPt, currentContent.length === 0) +
+                    const currentChainHeight = this.measureKeepWithNextChainBodyHeight(keepChain, prevMarginBottomPt, currentContent.length === 0, pageInSection(block.sectionIndex)) +
                         additionalChainFootnoteHeight;
                     const currentAvailableHeight = remainingHeight - currentFootnoteHeight;
                     if (currentChainHeight > currentAvailableHeight) {
-                        const nextPageBands = this.getPageBands(dims, sectionIndex, pageInSection + 1, pageNumber + 1);
-                        const freshChainBodyHeight = this.measureKeepWithNextChainBodyHeight(keepChain, 0, true);
+                        const nextPageBands = this.getPageBands(dimensionsFor(block.sectionIndex), block.sectionIndex, pageInSection(block.sectionIndex, pageNumber + 1), displayedPageNumber(block.sectionIndex, pageInSection(block.sectionIndex, pageNumber + 1), pageNumber + 1));
+                        const freshChainBodyHeight = this.measureKeepWithNextChainBodyHeight(keepChain, 0, true, pageInSection(block.sectionIndex, pageNumber + 1));
                         // finishPage transfers this continuation to the new page's
                         // currentContinuation state, so include it in the destination
                         // page's footnote reservation before deciding to move the chain.
-                        const freshChainFootnoteHeight = this.measureFootnotesHeight(newChainFootnoteIds, dims.contentWidth, nextPageContinuation);
+                        const freshChainFootnoteHeight = this.measureFootnotesHeight(newChainFootnoteIds, blockDimensions.contentWidth, nextPageContinuation);
                         if (freshChainBodyHeight + freshChainFootnoteHeight <=
                             nextPageBands.bodyHeight) {
-                            finishPage();
+                            finishPage(block.sectionIndex);
                         }
                     }
                 }
             }
             // Extract footnote references from this block
-            const allBlockFootnoteIds = this.extractFootnoteRefs(block.element);
             // Only count new footnotes (not already on this page)
             const newFootnoteIds = this.collectNewFootnoteIds([block], currentFootnoteIds);
             // Calculate additional footnote height if this block is added
+            let combinedFootnoteHeight = currentFootnoteHeight;
             let additionalFootnoteHeight = 0;
             if (newFootnoteIds.length > 0 && this.footnoteRegistry.size > 0) {
                 // Measure the combined height of all footnotes that would be on this page
                 // (including any continuation)
                 const combinedFootnoteIds = [...currentFootnoteIds, ...newFootnoteIds];
-                const totalFootnoteHeight = this.measureFootnotesHeight(combinedFootnoteIds, dims.contentWidth, currentContinuation);
-                additionalFootnoteHeight = totalFootnoteHeight - currentFootnoteHeight;
+                combinedFootnoteHeight = this.measureFootnotesHeight(combinedFootnoteIds, blockDimensions.contentWidth, currentContinuation, currentPartialFootnotes);
+                additionalFootnoteHeight = Math.max(0, combinedFootnoteHeight - currentFootnoteHeight);
             }
             // Calculate the effective height this block will consume
             // Account for margin collapsing: the gap between blocks is max(prevBottom, currTop), not sum
             const isFirstOnPage = currentContent.length === 0;
-            let effectiveMarginTop = block.marginTopPt;
-            if (!isFirstOnPage) {
-                // Margin collapsing: use the larger of the two adjacent margins
-                effectiveMarginTop = Math.max(block.marginTopPt, prevMarginBottomPt) - prevMarginBottomPt;
-            }
+            const effectiveMarginTop = this.effectiveBlockMarginTop(block, prevMarginBottomPt, isFirstOnPage, pageInSection(block.sectionIndex));
             // Visible height = top margin gap + content + footnote space
             // Note: bottom margin is NOT included in the fit check because the last block's
             // bottom margin extends beyond the content area and is clipped by overflow:hidden.
@@ -1206,13 +2763,12 @@ export class PaginationEngine {
             // Calculate maximum footnote area for this page (can expand into body content space)
             const bodyContentUsed = effectiveContentHeight - remainingHeight;
             const maxFootnoteArea = effectiveContentHeight * MAX_FOOTNOTE_AREA_RATIO;
-            const maxFootnoteExpansion = Math.max(0, maxFootnoteArea - currentFootnoteHeight);
             // A paragraph that cannot fit as a whole may still have a simple text-only
             // prefix that fits this page. Fragment before the ordinary next-page or
             // oversized fallback so the cloned head participates in the same margin
             // and footnote accounting as every other block.
             if (blockSpace > effectiveRemainingHeight) {
-                const paragraphFragments = this.tryFragmentParagraph(block, dims, effectiveRemainingHeight, effectiveMarginTop);
+                const paragraphFragments = this.tryFragmentParagraph(block, blockDimensions, effectiveRemainingHeight, effectiveMarginTop);
                 if (paragraphFragments) {
                     blocks.splice(i, 1, ...paragraphFragments);
                     i--;
@@ -1220,48 +2776,69 @@ export class PaginationEngine {
                 }
             }
             // Check if block fits on current page (including its footnotes)
-            if (blockSpace <= effectiveRemainingHeight) {
+            if (blockSpace <= effectiveRemainingHeight
+                && (combinedFootnoteHeight === 0
+                    || combinedFootnoteHeight + FOOTNOTE_MEASUREMENT_GUARD_PT <= maxFootnoteArea)) {
                 // Block fits with current footnote allocation
-                currentContent.push(block.element.cloneNode(true));
+                markSectionPlaced(block.sectionIndex);
+                currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection(block.sectionIndex)));
                 remainingHeight -= (effectiveMarginTop + block.heightPt + block.marginBottomPt);
                 prevMarginBottomPt = block.marginBottomPt;
                 // Add new footnotes to current page
                 if (newFootnoteIds.length > 0) {
                     currentFootnoteIds.push(...newFootnoteIds);
-                    currentFootnoteHeight += additionalFootnoteHeight;
+                    currentFootnoteHeight = combinedFootnoteHeight;
                 }
+                currentPageHasFootnoteReference || (currentPageHasFootnoteReference = allBlockFootnoteIds.length > 0);
             }
-            else if (block.heightPt + block.marginTopPt <= effectiveContentHeight) {
+            else if (block.heightPt + this.effectiveBlockMarginTop(block, 0, true, pageInSection(block.sectionIndex, pageNumber + 1)) <= freshBlockPageBodyHeight) {
                 // Block doesn't fit with current allocation - try expanding footnote area
                 const blockSpaceWithoutFootnotes = effectiveMarginTop + block.heightPt;
-                // Check if block fits if we expand footnote area
-                // We can expand footnotes up to maxFootnoteArea, leaving room for body content
-                const minBodySpaceNeeded = bodyContentUsed + blockSpaceWithoutFootnotes + MIN_BODY_CONTENT_HEIGHT;
-                const canExpandFootnotes = minBodySpaceNeeded <= effectiveContentHeight;
                 if (newFootnoteIds.length > 0 && blockSpaceWithoutFootnotes <= effectiveRemainingHeight) {
                     // Block itself fits, but footnotes don't - expand footnote area
-                    currentContent.push(block.element.cloneNode(true));
+                    markSectionPlaced(block.sectionIndex);
+                    currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection(block.sectionIndex)));
                     remainingHeight -= (effectiveMarginTop + block.heightPt + block.marginBottomPt);
                     prevMarginBottomPt = block.marginBottomPt;
                     // Calculate EXPANDED space available for footnotes
                     // Footnotes can take up to maxFootnoteArea or all remaining space, whichever is less
                     const availableForFootnotes = Math.min(maxFootnoteArea, effectiveContentHeight - bodyContentUsed - blockSpaceWithoutFootnotes);
+                    // Deferring a note costs a page turn, and it only buys anything if the
+                    // next page's band is larger than what this page can already offer.
+                    // When this page already offers the maximum band, a note that cannot
+                    // start here cannot start there either: keep the established clipped
+                    // fallback on the citing page rather than evacuating it.
+                    const nextPageMaxFootnoteArea = freshBlockPageBodyHeight * MAX_FOOTNOTE_AREA_RATIO;
+                    const deferralCannotHelp = availableForFootnotes >= nextPageMaxFootnoteArea;
                     // Try to fit as much of each new footnote as possible in expanded area
-                    for (const footnoteId of newFootnoteIds) {
+                    for (let noteIndex = 0; noteIndex < newFootnoteIds.length; noteIndex++) {
+                        this.checkpoint();
+                        const footnoteId = newFootnoteIds[noteIndex];
                         const footnote = this.footnoteRegistry.get(footnoteId);
                         if (!footnote)
                             continue;
-                        const footnoteHeight = this.measureSingleFootnoteHeight(footnoteId, dims.contentWidth);
+                        // One page can carry only one split tail. Once that slot is used,
+                        // keep every later note in source order on the deferral queue.
+                        if (nextPageContinuation) {
+                            deferredFootnoteIds.push(...newFootnoteIds.slice(noteIndex));
+                            break;
+                        }
+                        const candidateIds = [...currentFootnoteIds, footnoteId];
+                        const candidateHeight = this.measureFootnotesHeight(candidateIds, blockDimensions.contentWidth, currentContinuation, currentPartialFootnotes);
                         const spaceLeftForFootnotes = availableForFootnotes - currentFootnoteHeight;
-                        if (footnoteHeight <= spaceLeftForFootnotes) {
+                        if (candidateHeight + FOOTNOTE_MEASUREMENT_GUARD_PT <= availableForFootnotes) {
                             // Whole footnote fits in expanded area
                             currentFootnoteIds.push(footnoteId);
-                            currentFootnoteHeight += footnoteHeight;
+                            currentFootnoteHeight = candidateHeight;
                         }
                         else {
                             // Footnote needs to be split - use all available expanded space
                             if (spaceLeftForFootnotes > 20) { // Minimum space to start a footnote
-                                const { fits, overflow } = this.splitFootnoteToFit(footnote, spaceLeftForFootnotes, dims.contentWidth);
+                                const { fits, overflow } = this.splitFootnoteToFit(footnote, availableForFootnotes, blockDimensions.contentWidth, deferralCannotHelp, {
+                                    footnoteIds: currentFootnoteIds,
+                                    continuation: currentContinuation,
+                                    partialFootnotes: currentPartialFootnotes,
+                                });
                                 if (fits.length > 0) {
                                     // Add partial footnote to current page
                                     currentFootnoteIds.push(footnoteId);
@@ -1272,87 +2849,48 @@ export class PaginationEngine {
                                     if (overflow.length > 0) {
                                         nextPageContinuation = {
                                             footnoteId,
+                                            sourceAnchorId: footnote.dataset.sourceAnchorId,
                                             remainingElements: overflow
                                         };
                                     }
-                                    currentFootnoteHeight = availableForFootnotes;
+                                    currentFootnoteHeight = this.measureFootnotesHeight(currentFootnoteIds, blockDimensions.contentWidth, currentContinuation, currentPartialFootnotes);
+                                    if (overflow.length > 0) {
+                                        deferredFootnoteIds.push(...newFootnoteIds.slice(noteIndex + 1));
+                                        break;
+                                    }
                                 }
                                 else {
                                     // Nothing of this note fits: defer the WHOLE note rather than assigning the
                                     // single continuation slot, which a later note on this page would overwrite.
-                                    deferredFootnoteIds.push(footnoteId);
+                                    deferredFootnoteIds.push(...newFootnoteIds.slice(noteIndex));
+                                    break;
                                 }
                             }
                             else {
                                 // Not enough space to even start the note — same deferral.
-                                deferredFootnoteIds.push(footnoteId);
+                                deferredFootnoteIds.push(...newFootnoteIds.slice(noteIndex));
+                                break;
                             }
                         }
                     }
-                }
-                else if (canExpandFootnotes && newFootnoteIds.length > 0) {
-                    // Block doesn't fit with current layout, but might fit if we expand footnote area first
-                    // This handles the case where we need to give footnotes more space BEFORE adding the block
-                    // First, try to fit more of current footnotes by expanding the area
-                    // Then check if the block fits in reduced body space
-                    const expandedFootnoteSpace = Math.min(maxFootnoteArea, additionalFootnoteHeight + currentFootnoteHeight);
-                    const bodySpaceAfterExpansion = effectiveContentHeight - expandedFootnoteSpace;
-                    if (blockSpaceWithoutFootnotes <= bodySpaceAfterExpansion - bodyContentUsed) {
-                        // Block fits after expanding footnote area.
-                        currentContent.push(block.element.cloneNode(true));
-                        // `remainingHeight` tracks BODY consumption only — every other branch maintains it
-                        // that way, and the footnote reserve is applied separately via `effectiveRemainingHeight`
-                        // at the top of each iteration. Assigning `bodySpaceAfterExpansion - …` here folded the
-                        // reserve in a second time, so a later block would see a body budget short by the whole
-                        // footnote area. Consistency fix: no measurable difference on the documents tested, but
-                        // the two meanings must not coexist or the next change here inherits a latent bug.
-                        remainingHeight = bodySpaceAfterExpansion - bodyContentUsed - blockSpaceWithoutFootnotes;
-                        prevMarginBottomPt = block.marginBottomPt;
-                        currentFootnoteIds.push(...newFootnoteIds);
-                        currentFootnoteHeight = expandedFootnoteSpace;
-                    }
-                    else {
-                        // Still doesn't fit - start new page
-                        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));
-                        remainingHeight = effectiveContentHeight - newPageSpace;
-                        prevMarginBottomPt = block.marginBottomPt;
-                        // Merge, never replace: finishPage() may have just seeded this page with notes deferred
-                        // from the previous one, and overwriting here dropped them from the document.
-                        currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
-                        currentFootnoteHeight = newPageFootnoteHeight;
-                    }
+                    currentPageHasFootnoteReference || (currentPageHasFootnoteReference = allBlockFootnoteIds.length > 0);
                 }
                 else {
-                    // Block itself doesn't fit - start new page
-                    finishPage();
-                    // On new page, recalculate footnote height for just this block's footnotes
-                    // (plus any continuation from previous page)
-                    const newPageFootnoteHeight = allBlockFootnoteIds.length > 0
-                        ? this.measureFootnotesHeight(allBlockFootnoteIds, dims.contentWidth, currentContinuation)
-                        : (currentContinuation ? this.measureContinuationHeight(currentContinuation, dims.contentWidth) : 0);
-                    // Include full top margin
-                    const newPageSpace = block.marginTopPt + block.heightPt + block.marginBottomPt;
-                    currentContent.push(block.element.cloneNode(true));
-                    remainingHeight = effectiveContentHeight - newPageSpace;
-                    prevMarginBottomPt = block.marginBottomPt;
-                    // Merge, never replace: finishPage() may have just seeded this page with notes deferred
-                    // from the previous one, and overwriting here dropped them from the document.
-                    currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
-                    currentFootnoteHeight = newPageFootnoteHeight;
+                    // Block itself doesn't fit. Retry after the page turn so carried
+                    // continuations and deferred notes participate in the normal fit and
+                    // split decisions instead of being overwritten by forced placement.
+                    finishPage(block.sectionIndex, !pageHasPayload());
+                    i--;
+                    continue;
                 }
             }
             else {
                 // Block is taller than a page. Ordinary tables can be split at complete
                 // row boundaries; every other block retains the established overflow path.
-                const tableFragments = this.trySplitSimpleOversizedTable(block, dims, sectionIndex);
+                const tableFragments = this.trySplitSimpleOversizedTable(block, dimensionsFor(block.sectionIndex), block.sectionIndex);
                 if (tableFragments) {
                     if (currentContent.length > 0 || currentContinuation) {
-                        finishPage();
+                        finishPage(block.sectionIndex);
                     }
                     blocks.splice(i, 1, ...tableFragments);
                     i--;
@@ -1361,18 +2899,30 @@ export class PaginationEngine {
                 // Unsupported oversized blocks are intentionally left intact. Splitting
                 // arbitrary HTML, merged tables, or footnote-bearing tables would be less
                 // correct than the prior clipped fallback.
-                if (currentContent.length > 0) {
-                    finishPage();
+                if (pageHasPayload()) {
+                    finishPage(block.sectionIndex);
+                    i--;
+                    continue;
                 }
-                currentContent.push(block.element.cloneNode(true));
-                // Merge, never replace: finishPage() may have just seeded this page with notes deferred
-                // from the previous one, and overwriting here dropped them from the document.
-                currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
-                finishPage();
+                markSectionPlaced(block.sectionIndex);
+                currentContent.push(this.cloneBlockForPage(block, true, pageInSection(block.sectionIndex)));
+                // An unsupported body block already occupies/clips its whole body band.
+                // Preserve its notes losslessly on following note-only pages rather
+                // than drawing them underneath that clipped fallback.
+                deferredFootnoteIds.push(...newFootnoteIds);
+                currentPageHasFootnoteReference || (currentPageHasFootnoteReference = allBlockFootnoteIds.length > 0);
+                finishPage(block.sectionIndex);
             }
         }
         // Finish last page
         finishPage();
+        // A split created while finishing the final body page still needs a page substrate.
+        // Drain all remaining note paragraphs into footnote-only continuation pages.
+        while (currentFootnoteIds.length > 0
+            || deferredFootnoteIds.length > 0
+            || (currentContinuation?.remainingElements.length ?? 0) > 0) {
+            finishPage();
+        }
         // Store any remaining continuation for next section
         this.pendingFootnoteContinuation = nextPageContinuation;
         return pages;
@@ -1399,6 +2949,19 @@ export class PaginationEngine {
                 el.setAttribute("contenteditable", "false");
         }
     }
+    /** A repeated margin note is presentation, not a second bookmark/link target. */
+    makeClonedMarginCommentInert(root) {
+        this.makeClonedStoryInert(root);
+        const nodes = [root, ...Array.from(root.querySelectorAll("*"))];
+        for (const element of nodes) {
+            element.removeAttribute("id");
+            if (element.localName === "a" && element.getAttribute("href")?.startsWith("#")) {
+                element.removeAttribute("href");
+                element.setAttribute("aria-disabled", "true");
+                element.tabIndex = -1;
+            }
+        }
+    }
     /**
      * Resolves floating DrawingML objects after their anchor paragraphs have landed on a page.
      *
@@ -1425,7 +2988,7 @@ export class PaginationEngine {
                 staticLeft: toPageX(staticRect.left),
                 staticTop: toPageY(staticRect.top),
                 lineHeight: paragraph
-                    ? (parseFloat(getComputedStyle(paragraph).lineHeight) || staticRect.height) / pixelsPerPoint
+                    ? (parseFloat(this.view.getComputedStyle(paragraph).lineHeight) || staticRect.height) / pixelsPerPoint
                     : staticRect.height / pixelsPerPoint,
                 paragraphLeft: toPageX(paragraphRect.left),
                 paragraphTop: toPageY(paragraphRect.top),
@@ -1537,13 +3100,21 @@ export class PaginationEngine {
             fraction = pageNumber % 2 === 1 ? 1 : 0;
         return reference.start + (reference.size - objectSize) * fraction;
     }
+    /** Charge a physical page before any page-owned partitioning or DOM allocation. */
+    admitPageAllocation() {
+        const prospectivePageCount = this.createdPageCount + 1;
+        this.pageCountCheckpoint?.(prospectivePageCount);
+        this.createdPageCount = prospectivePageCount;
+    }
     /**
      * Creates a page container element.
      */
-    createPage(dims, pageNumber, sectionIndex, content, pageInSection, footnoteIds = [], footnoteHeight = 0, continuation, partialFootnotes) {
+    createPage(dims, pageNumber, sectionIndex, displayedPageNumber, content, pageInSection, footnoteIds = [], footnoteHeight = 0, continuation, partialFootnotes, isSectionFiller = false, pageAlreadyAdmitted = false) {
+        if (!pageAlreadyAdmitted)
+            this.admitPageAllocation();
         // Create page box at full size, then scale the entire box
         // This ensures proper clipping and consistent scaling of all elements
-        const pageBox = document.createElement("div");
+        const pageBox = this.document.createElement("div");
         pageBox.className = `${this.cssPrefix}box`;
         pageBox.style.width = `${dims.pageWidth}pt`;
         pageBox.style.height = `${dims.pageHeight}pt`;
@@ -1553,35 +3124,40 @@ export class PaginationEngine {
         // Zoom affects layout (no negative margin hack needed) and renders text more crisply
         // Note: zoom is non-standard but supported in all major browsers
         if (this.scale !== 1) {
-            // Try zoom first (better text quality), with transform as fallback
-            pageBox.style.zoom = String(this.scale);
-            // For browsers that don't support zoom, also set transform
-            // The zoom takes precedence in supporting browsers
-            pageBox.style.transform = `scale(${this.scale})`;
-            pageBox.style.transformOrigin = "top left";
-            // Compensate for transform not affecting layout (only needed if zoom not supported)
-            // Convert pt to px for consistent unit math
-            const heightReductionPt = dims.pageHeight * (1 - this.scale);
-            const widthReductionPt = dims.pageWidth * (1 - this.scale);
-            const heightReductionPx = ptToPx(heightReductionPt);
-            const widthReductionPx = ptToPx(widthReductionPt);
-            pageBox.style.marginRight = `-${widthReductionPx}px`;
-            pageBox.style.marginBottom = `${this.pageGap - heightReductionPx}px`;
+            if (this.view.CSS?.supports("zoom", "1")) {
+                pageBox.style.zoom = String(this.scale);
+            }
+            else {
+                pageBox.style.transform = `scale(${this.scale})`;
+                pageBox.style.transformOrigin = "top left";
+                // Transform does not affect layout, so compensate for the natural box dimensions.
+                const heightReductionPt = dims.pageHeight * (1 - this.scale);
+                const widthReductionPt = dims.pageWidth * (1 - this.scale);
+                const heightReductionPx = ptToPx(heightReductionPt);
+                const widthReductionPx = ptToPx(widthReductionPt);
+                pageBox.style.marginRight = `-${widthReductionPx}px`;
+                pageBox.style.marginBottom = `${this.pageGap - heightReductionPx}px`;
+            }
         }
         // Hint browser for GPU compositing and layout isolation
         pageBox.style.willChange = "transform";
         pageBox.style.contain = "layout paint";
         pageBox.dataset.pageNumber = String(pageNumber);
         pageBox.dataset.sectionIndex = String(sectionIndex);
+        pageBox.dataset.displayedPageNumber = String(displayedPageNumber);
+        if (isSectionFiller)
+            pageBox.dataset.sectionFiller = "true";
         // Needed by substitutePageNumberFields: a section that restarts numbering counts from its own
         // first page, not from the document's.
         pageBox.dataset.pageInSection = String(pageInSection);
         // Where the three bands sit on this page (no re-measurement needed)
-        const bands = this.getPageBands(dims, sectionIndex, pageInSection, pageNumber);
+        const bands = this.getPageBands(dims, sectionIndex, pageInSection, displayedPageNumber);
         // Add header if available for this section/page
-        const headerSource = this.selectHeader(sectionIndex, pageInSection, pageNumber);
+        const headerSource = isSectionFiller
+            ? undefined
+            : this.selectHeader(sectionIndex, pageInSection, displayedPageNumber);
         if (headerSource) {
-            const headerDiv = document.createElement("div");
+            const headerDiv = this.document.createElement("div");
             headerDiv.className = `${this.cssPrefix}header`;
             headerDiv.style.position = "absolute";
             // `w:header` is the distance to the TOP of the story, and the story grows downward from
@@ -1609,7 +3185,7 @@ export class PaginationEngine {
         // Create content area using pre-computed effective heights
         const contentAreaTop = bands.bodyTop;
         const contentAreaHeight = bands.bodyHeight;
-        const contentArea = document.createElement("div");
+        const contentArea = this.document.createElement("div");
         contentArea.className = `${this.cssPrefix}content`;
         contentArea.style.position = "absolute";
         contentArea.style.top = `${contentAreaTop}pt`;
@@ -1624,13 +3200,53 @@ export class PaginationEngine {
         pageBox.appendChild(contentArea);
         // Add footnotes if any references appear on this page (or continuation from previous)
         const hasContinuation = continuation && continuation.remainingElements.length > 0;
-        if (footnoteIds.length > 0 || hasContinuation) {
+        if (!isSectionFiller && (footnoteIds.length > 0 || hasContinuation)) {
             this.addPageFootnotes(pageBox, footnoteIds, dims, bands, footnoteHeight, continuation, partialFootnotes);
         }
+        // Materialize margin comments after footnotes exist so markers inside a
+        // note participate in the same page-owned comment story as body markers.
+        const pageCommentIds = [];
+        for (const marker of Array.from(pageBox.querySelectorAll("[data-comment-id]"))) {
+            if (marker.closest(`.${this.cssPrefix}comment-margin`))
+                continue;
+            const id = marker.dataset.commentId;
+            if (id && this.commentMarginRegistry.has(id) && !pageCommentIds.includes(id)) {
+                pageCommentIds.push(id);
+            }
+        }
+        if (pageCommentIds.length > 0) {
+            const marginColumn = this.document.createElement("aside");
+            marginColumn.className = `${this.cssPrefix}comment-margin`;
+            marginColumn.style.position = "absolute";
+            marginColumn.style.top = `${contentAreaTop}pt`;
+            marginColumn.style.left = `${dims.marginLeft + dims.contentWidth + 3}pt`;
+            marginColumn.style.width = `${Math.max(12, dims.marginRight - 6)}pt`;
+            marginColumn.style.maxHeight = `${contentAreaHeight}pt`;
+            marginColumn.style.overflow = "hidden";
+            marginColumn.style.boxSizing = "border-box";
+            const placedThreadRoots = new Set();
+            for (const id of pageCommentIds) {
+                const source = this.commentMarginRegistry.get(id);
+                if (source) {
+                    // Every id in a nested thread maps to the same root note; place it once even
+                    // when the root's and a reply's markers share the page.
+                    const rootId = source.dataset.commentId ?? id;
+                    if (placedThreadRoots.has(rootId))
+                        continue;
+                    placedThreadRoots.add(rootId);
+                    const clone = source.cloneNode(true);
+                    this.makeClonedMarginCommentInert(clone);
+                    marginColumn.appendChild(clone);
+                }
+            }
+            pageBox.appendChild(marginColumn);
+        }
         // Add footer if available for this section/page
-        const footerSource = this.selectFooter(sectionIndex, pageInSection, pageNumber);
+        const footerSource = isSectionFiller
+            ? undefined
+            : this.selectFooter(sectionIndex, pageInSection, displayedPageNumber);
         if (footerSource) {
-            const footerDiv = document.createElement("div");
+            const footerDiv = this.document.createElement("div");
             footerDiv.className = `${this.cssPrefix}footer`;
             footerDiv.style.position = "absolute";
             // `w:footer` is the distance to the BOTTOM of the story, and the story grows upward from
@@ -1655,8 +3271,8 @@ export class PaginationEngine {
             pageBox.appendChild(footerDiv);
         }
         // Add page number (will be hidden by CSS if document has footer)
-        if (this.showPageNumbers) {
-            const pageNum = document.createElement("div");
+        if (this.showPageNumbers && !isSectionFiller) {
+            const pageNum = this.document.createElement("div");
             pageNum.className = `${this.cssPrefix}number`;
             pageNum.textContent = String(pageNumber);
             pageBox.appendChild(pageNum);
@@ -1719,8 +3335,9 @@ export class PaginationEngine {
  * ```
  */
 export function paginateHtml(html, container, options = {}) {
+    const ownerDocument = typeof container === "string" ? globalThis.document : container.ownerDocument;
     const containerEl = typeof container === "string"
-        ? document.getElementById(container)
+        ? ownerDocument.getElementById(container)
         : container;
     if (!containerEl) {
         throw new Error("Container element not found");