docxodus 8.0.0 → 9.0.0

package/dist/editor.bundle.js

@@ -25,6 +25,40 @@ var DocxodusEditor = (() => {
     serializeInlineMarkdown: () => serializeInlineMarkdown
   });
 
+  // src/page-number-format.ts
+  var ROMAN_ONES = ["", "i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix"];
+  var ROMAN_TENS = ["", "x", "xx", "xxx", "xl", "l", "lx", "lxx", "lxxx", "xc"];
+  var ROMAN_HUNDREDS = ["", "c", "cc", "ccc", "cd", "d", "dc", "dcc", "dccc", "cm"];
+  var ROMAN_THOUSANDS = ["", "m", "mm", "mmm"];
+  function toRoman(value) {
+    if (value <= 0 || value >= 4e3) return String(value);
+    return ROMAN_THOUSANDS[Math.floor(value / 1e3)] + ROMAN_HUNDREDS[Math.floor(value % 1e3 / 100)] + ROMAN_TENS[Math.floor(value % 100 / 10)] + ROMAN_ONES[value % 10];
+  }
+  function toLetter(value) {
+    if (value <= 0) return String(value);
+    const wrapped = value % 780 === 0 ? 780 : value % 780;
+    const repeats = Math.floor((wrapped - 1) / 26) + 1;
+    return "abcdefghijklmnopqrstuvwxyz".charAt((wrapped - 1) % 26).repeat(repeats);
+  }
+  var RENDERERS = {
+    // ST_NumberFormat tokens (w:pgNumType/@w:fmt, w:numFmt).
+    decimal: (v) => String(v),
+    lowerRoman: toRoman,
+    upperRoman: (v) => toRoman(v).toUpperCase(),
+    lowerLetter: toLetter,
+    upperLetter: (v) => toLetter(v).toUpperCase(),
+    // Field `\*` general-formatting switch arguments.
+    Arabic: (v) => String(v),
+    roman: toRoman,
+    ROMAN: (v) => toRoman(v).toUpperCase(),
+    alphabetic: toLetter,
+    ALPHABETIC: (v) => toLetter(v).toUpperCase()
+  };
+  function formatPageNumber(value, format) {
+    const renderer = format ? RENDERERS[format] : void 0;
+    return (renderer ?? RENDERERS.decimal)(value);
+  }
+
   // src/pagination.ts
   var DEFAULT_PAGE_WIDTH = 612;
   var DEFAULT_PAGE_HEIGHT = 792;
@@ -72,6 +106,8 @@ var DocxodusEditor = (() => {
      */
     constructor(staging, container, options = {}) {
       this.pendingFootnoteContinuation = null;
+      /** Per-section `w:pgNumType` (start / format), read off the section wrappers. */
+      this.pageNumbering = /* @__PURE__ */ new Map();
       this.stagingElement = typeof staging === "string" ? document.getElementById(staging) : staging;
       this.containerElement = typeof container === "string" ? document.getElementById(container) : container;
       if (!this.stagingElement) {
@@ -101,6 +137,7 @@ var DocxodusEditor = (() => {
       const sections = this.stagingElement.querySelectorAll(
         "[data-section-index]"
       );
+      this.pageNumbering = this.parsePageNumbering(sections);
       const sectionsToProcess = sections.length > 0 ? Array.from(sections) : [this.stagingElement];
       for (const section of sectionsToProcess) {
         const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
@@ -116,8 +153,62 @@ var DocxodusEditor = (() => {
         pageNumber += sectionPages.length;
       }
       this.stagingElement.style.display = "none";
+      this.substitutePageNumberFields(pages.length);
       return { totalPages: pages.length, pages };
     }
+    /** Read each section's `w:pgNumType` off its wrapper (see {@link SectionPageNumbering}). */
+    parsePageNumbering(sections) {
+      const map = /* @__PURE__ */ new Map();
+      for (const section of Array.from(sections)) {
+        const index = parseInt(section.dataset.sectionIndex || "0", 10);
+        const rawStart = section.dataset.pageNumStart;
+        const start = rawStart === void 0 ? void 0 : parseInt(rawStart, 10);
+        map.set(index, {
+          start: start !== void 0 && Number.isFinite(start) ? start : void 0,
+          format: section.dataset.pageNumFmt
+        });
+      }
+      return map;
+    }
+    /**
+     * Fill in the page-number fields inside every page's cloned header/footer.
+     *
+     * A header/footer is authored once and cloned onto each page, so a PAGE field's single cached
+     * result would otherwise show the same number on every page — the whole reason the converter
+     * marks these. `data-field-format` (the field's own `\*` switch) wins over the section's format
+     * when present, which is exactly how Word resolves the two.
+     *
+     * Runs after layout because NUMPAGES cannot be known before the last page exists. The
+     * substituted text can therefore be marginally wider than the cached result the header was
+     * measured with; the header band clips, so the failure mode is a hair of overflow rather than
+     * a layout that disagrees with itself.
+     *
+     * Scoped to the CLONED header/footer regions on purpose. A page-number field in body text is
+     * ordinary run content that the editor may make editable, and committing an edited block writes
+     * back whatever text the DOM holds — rewriting it here would mean a body field commits a number
+     * the document never contained. Body content is also not cloned, so it does not have the problem
+     * this method exists to solve.
+     */
+    substitutePageNumberFields(totalPages) {
+      const boxes = this.containerElement.querySelectorAll(`.${this.cssPrefix}box`);
+      for (const box of Array.from(boxes)) {
+        const markers = box.querySelectorAll(
+          `.${this.cssPrefix}header [data-field], .${this.cssPrefix}footer [data-field]`
+        );
+        if (markers.length === 0) continue;
+        const sectionIndex = parseInt(box.dataset.sectionIndex || "0", 10);
+        const pageNumber = parseInt(box.dataset.pageNumber || "1", 10);
+        const pageInSection = parseInt(box.dataset.pageInSection || "1", 10);
+        const numbering = this.pageNumbering.get(sectionIndex) ?? {};
+        const displayed = numbering.start !== void 0 ? numbering.start + pageInSection - 1 : pageNumber;
+        for (const marker of Array.from(markers)) {
+          const kind = marker.dataset.field;
+          if (kind !== "PAGE" && kind !== "NUMPAGES") continue;
+          const format = marker.dataset.fieldFormat ?? numbering.format;
+          marker.textContent = formatPageNumber(kind === "PAGE" ? displayed : totalPages, format);
+        }
+      }
+    }
     /**
      * Measures all content blocks in a section.
      */
@@ -641,6 +732,7 @@ var DocxodusEditor = (() => {
       measureContainer.style.visibility = "hidden";
       measureContainer.style.width = `${contentWidth}pt`;
       measureContainer.style.left = "-9999px";
+      measureContainer.className = this.cssPrefix + "footnotes";
       const hr = document.createElement("hr");
       measureContainer.appendChild(hr);
       if (hasContinuation) {
@@ -675,6 +767,7 @@ var DocxodusEditor = (() => {
       measureContainer.style.visibility = "hidden";
       measureContainer.style.width = `${contentWidth}pt`;
       measureContainer.style.left = "-9999px";
+      measureContainer.className = this.cssPrefix + "footnotes";
       const hr = document.createElement("hr");
       measureContainer.appendChild(hr);
       for (const el of continuation.remainingElements) {
@@ -693,11 +786,17 @@ var DocxodusEditor = (() => {
     splitFootnoteToFit(footnoteElement, availableHeightPt, contentWidth) {
       const footnoteContent = footnoteElement.querySelector(".footnote-content");
       if (!footnoteContent) {
-        return { fits: [footnoteElement.cloneNode(true)], overflow: [] };
+        return {
+          fits: Array.from(footnoteElement.children).map((el) => el.cloneNode(true)),
+          overflow: []
+        };
       }
       const children = Array.from(footnoteContent.children);
       if (children.length <= 1) {
-        return { fits: [footnoteElement.cloneNode(true)], overflow: [] };
+        return {
+          fits: children.map((el) => el.cloneNode(true)),
+          overflow: []
+        };
       }
       const fits = [];
       const overflow = [];
@@ -707,6 +806,7 @@ var DocxodusEditor = (() => {
       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);
@@ -721,6 +821,7 @@ var DocxodusEditor = (() => {
         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);
@@ -748,6 +849,7 @@ var DocxodusEditor = (() => {
       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();
@@ -931,6 +1033,7 @@ var DocxodusEditor = (() => {
       let currentFootnoteHeight = 0;
       let currentContinuation = this.pendingFootnoteContinuation;
       let nextPageContinuation = null;
+      let deferredFootnoteIds = [];
       let currentPartialFootnotes = [];
       if (currentContinuation && currentContinuation.remainingElements.length > 0) {
         currentFootnoteHeight = this.measureContinuationHeight(currentContinuation, dims.contentWidth);
@@ -961,11 +1064,22 @@ var DocxodusEditor = (() => {
         currentPartialFootnotes = [];
         currentContinuation = nextPageContinuation;
         nextPageContinuation = null;
+        if (deferredFootnoteIds.length > 0) {
+          currentFootnoteIds = [...deferredFootnoteIds];
+          deferredFootnoteIds = [];
+        }
         if (currentContinuation && currentContinuation.remainingElements.length > 0) {
           currentFootnoteHeight = this.measureContinuationHeight(currentContinuation, dims.contentWidth);
         } else {
           currentFootnoteHeight = 0;
         }
+        if (currentFootnoteIds.length > 0) {
+          currentFootnoteHeight += this.measureFootnotesHeight(
+            currentFootnoteIds,
+            dims.contentWidth,
+            null
+          );
+        }
       };
       for (let i = 0; i < blocks.length; i++) {
         const block = blocks[i];
@@ -1111,22 +1225,10 @@ var DocxodusEditor = (() => {
                     }
                     currentFootnoteHeight = availableForFootnotes;
                   } else {
-                    nextPageContinuation = {
-                      footnoteId,
-                      remainingElements: Array.from(footnote.querySelectorAll(".footnote-content > *")).map((el) => el.cloneNode(true))
-                    };
-                    if (nextPageContinuation.remainingElements.length === 0) {
-                      nextPageContinuation.remainingElements = [footnote.cloneNode(true)];
-                    }
+                    deferredFootnoteIds.push(footnoteId);
                   }
                 } else {
-                  nextPageContinuation = {
-                    footnoteId,
-                    remainingElements: Array.from(footnote.querySelectorAll(".footnote-content > *")).map((el) => el.cloneNode(true))
-                  };
-                  if (nextPageContinuation.remainingElements.length === 0) {
-                    nextPageContinuation.remainingElements = [footnote.cloneNode(true)];
-                  }
+                  deferredFootnoteIds.push(footnoteId);
                 }
               }
             }
@@ -1146,7 +1248,7 @@ var DocxodusEditor = (() => {
               currentContent.push(block.element.cloneNode(true));
               remainingHeight = effectiveContentHeight - newPageSpace;
               prevMarginBottomPt = block.marginBottomPt;
-              currentFootnoteIds = [...allBlockFootnoteIds];
+              currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
               currentFootnoteHeight = newPageFootnoteHeight;
             }
           } else {
@@ -1156,7 +1258,7 @@ var DocxodusEditor = (() => {
             currentContent.push(block.element.cloneNode(true));
             remainingHeight = effectiveContentHeight - newPageSpace;
             prevMarginBottomPt = block.marginBottomPt;
-            currentFootnoteIds = [...allBlockFootnoteIds];
+            currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
             currentFootnoteHeight = newPageFootnoteHeight;
           }
         } else {
@@ -1173,7 +1275,7 @@ var DocxodusEditor = (() => {
             finishPage();
           }
           currentContent.push(block.element.cloneNode(true));
-          currentFootnoteIds = [...allBlockFootnoteIds];
+          currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
           finishPage();
         }
       }
@@ -1181,6 +1283,27 @@ var DocxodusEditor = (() => {
       this.pendingFootnoteContinuation = nextPageContinuation;
       return pages;
     }
+    /**
+     * Strip block addressing from a header/footer node cloned into a page box.
+     *
+     * A running story is authored ONCE and cloned onto every page, so the clones all carry the same
+     * `data-anchor` — on this document, 42 page boxes claiming one footer paragraph. Left editable,
+     * committing any one of them writes back through that single shared anchor, and the per-page
+     * page-number substitution makes it worse: each clone shows a DIFFERENT number, so a commit
+     * writes that page's number into the story as literal text and destroys the PAGE field.
+     *
+     * Page-box header/footer content is presentation. The docked editing bands
+     * (`editor-headerfooter.ts`) are the addressable affordance, and they exist precisely because a
+     * cloned node cannot be uniquely addressed.
+     */
+    makeClonedStoryInert(root) {
+      const nodes = [root, ...Array.from(root.querySelectorAll("*"))];
+      for (const el of nodes) {
+        el.removeAttribute("data-anchor");
+        el.removeAttribute("data-committed-text");
+        if (el.getAttribute("contenteditable") !== null) el.setAttribute("contenteditable", "false");
+      }
+    }
     /**
      * Creates a page container element.
      */
@@ -1206,6 +1329,7 @@ var DocxodusEditor = (() => {
       pageBox.style.contain = "layout paint";
       pageBox.dataset.pageNumber = String(pageNumber);
       pageBox.dataset.sectionIndex = String(sectionIndex);
+      pageBox.dataset.pageInSection = String(pageInSection);
       const effectiveHeights = this.getEffectiveHeights(dims, sectionIndex, pageInSection, pageNumber);
       const headerSource = this.selectHeader(sectionIndex, pageInSection, pageNumber);
       if (headerSource) {
@@ -1223,7 +1347,9 @@ var DocxodusEditor = (() => {
         headerDiv.style.justifyContent = "flex-end";
         headerDiv.style.paddingBottom = "4pt";
         for (const child of Array.from(headerSource.childNodes)) {
-          headerDiv.appendChild(child.cloneNode(true));
+          const clonedheaderDiv = child.cloneNode(true);
+          if (clonedheaderDiv.nodeType === 1) this.makeClonedStoryInert(clonedheaderDiv);
+          headerDiv.appendChild(clonedheaderDiv);
         }
         pageBox.appendChild(headerDiv);
       }
@@ -1261,7 +1387,9 @@ var DocxodusEditor = (() => {
         footerDiv.style.justifyContent = "flex-start";
         footerDiv.style.paddingTop = "4pt";
         for (const child of Array.from(footerSource.childNodes)) {
-          footerDiv.appendChild(child.cloneNode(true));
+          const clonedfooterDiv = child.cloneNode(true);
+          if (clonedfooterDiv.nodeType === 1) this.makeClonedStoryInert(clonedfooterDiv);
+          footerDiv.appendChild(clonedfooterDiv);
         }
         pageBox.appendChild(footerDiv);
       }
@@ -1272,6 +1400,13 @@ var DocxodusEditor = (() => {
         pageBox.appendChild(pageNum);
       }
       this.containerElement.appendChild(pageBox);
+      const notesEl = pageBox.querySelector(`.${this.cssPrefix}footnotes`);
+      if (notesEl) {
+        const notesHeightPt = pxToPt(notesEl.getBoundingClientRect().height);
+        if (notesHeightPt > 0) {
+          contentArea.style.height = `${Math.max(0, contentAreaHeight - notesHeightPt)}pt`;
+        }
+      }
       return {
         pageNumber,
         sectionIndex,
@@ -1305,6 +1440,14 @@ var DocxodusEditor = (() => {
   }
 
   // src/editor-headerfooter.ts
+  var PAGE_FORMAT_LABELS = [
+    { value: "", label: "Format\u2026" },
+    { value: "decimal", label: "1, 2, 3" },
+    { value: "lowerLetter", label: "a, b, c" },
+    { value: "upperLetter", label: "A, B, C" },
+    { value: "lowerRoman", label: "i, ii, iii" },
+    { value: "upperRoman", label: "I, II, III" }
+  ];
   var KIND_LABELS = [
     { value: "default", label: "Default" },
     { value: "first", label: "First page" },
@@ -1378,13 +1521,63 @@ var DocxodusEditor = (() => {
     kindOf(which) {
       return this.kinds[which];
     }
-    /** Append a PAGE / NUMPAGES field to the story paragraph addressed by `anchorId`. */
+    /** Append a PAGE / NUMPAGES field to the story paragraph addressed by `anchorId`.
+     *  Deliberately a PLAIN field (no `\*` switch), exactly as Word inserts one, so it follows the
+     *  section's page-number format — see {@link setPageNumbering}. Stamping the section's current
+     *  format as a switch here would silently WIN over any later format change. */
     insertPageNumber(which, anchorId, field) {
-      const res = parseResult(this.bridge.InsertPageNumberField(this.handle, anchorId, field));
+      const res = parseResult(this.bridge.InsertPageNumberField(this.handle, anchorId, field, ""));
       if (!res.success) return false;
       this.refresh(which);
       return true;
     }
+    /**
+     * Set this section's page numbering (`w:pgNumType`) — Word's *Format Page Numbers…*. Omitted
+     * fields are left alone, so the format and the start are independently settable. Both bands then
+     * repaint, because the values belong to the section rather than to either story.
+     *
+     * The rendered page numbers in the editor do not change: a page-number field's cached result is
+     * what the browser shows, and Word recomputes it on open. Paginated mode substitutes the real
+     * per-page number, so it does reflect the format immediately.
+     */
+    setPageNumbering(op) {
+      if (!this.bodyAnchorId) return false;
+      const res = parseResult(
+        this.bridge.SetPageNumbering(this.handle, this.bodyAnchorId, JSON.stringify(op))
+      );
+      if (!res.success) return false;
+      this.reloadSection();
+      return true;
+    }
+    /** This section's page numbering as the live document states it. Fields are absent, not
+     *  defaulted — "continues the previous section" is not the same claim as "starts at 1". */
+    pageNumbering() {
+      return {
+        start: this.sectionInfo?.pageNumberStart,
+        format: this.sectionInfo?.pageNumberFormat
+      };
+    }
+    /** Remove this section's page-numbering start/format — it reverts to continuing the previous
+     *  section's numbering in Word's default `1, 2, 3`. */
+    clearPageNumbering() {
+      if (!this.bodyAnchorId) return false;
+      const res = parseResult(this.bridge.ClearPageNumbering(this.handle, this.bodyAnchorId));
+      if (!res.success) return false;
+      this.reloadSection();
+      return true;
+    }
+    /**
+     * Re-read the section from the live document and repaint BOTH bands.
+     *
+     * `refreshAll` only repaints — it deliberately does not re-read, because its callers (remount,
+     * undo/redo) already refreshed the section. A section-property write has no such caller, and
+     * repainting from the stale snapshot would leave the chrome reporting the value the document had
+     * before the edit.
+     */
+    reloadSection() {
+      this.sectionInfo = this.bodyAnchorId ? this.readSectionInfo(this.bodyAnchorId) : null;
+      this.refreshAll();
+    }
     /** Insert a page number into a band's own target paragraph (focused, else last). Seeds the
      *  story first if the band's selected kind has none, so the command is never a silent no-op. */
     insertPageNumberInBand(which, field) {
@@ -1509,6 +1702,41 @@ var DocxodusEditor = (() => {
         if (target) this.insertPageNumber(which, target, field);
       });
       chrome.appendChild(pageNum);
+      const pageFmt = document.createElement("select");
+      pageFmt.setAttribute("data-hf-pagefmt", "");
+      pageFmt.title = "Page-number format for this section";
+      for (const o of PAGE_FORMAT_LABELS) {
+        const opt = document.createElement("option");
+        opt.value = o.value;
+        opt.textContent = o.label;
+        pageFmt.appendChild(opt);
+      }
+      pageFmt.addEventListener("change", () => {
+        if (pageFmt.value === "") return;
+        this.setPageNumbering({ format: pageFmt.value });
+      });
+      chrome.appendChild(pageFmt);
+      const pageStart = document.createElement("input");
+      pageStart.setAttribute("data-hf-pagestart", "");
+      pageStart.type = "number";
+      pageStart.min = "0";
+      pageStart.placeholder = "Start at";
+      pageStart.title = "Restart this section's page numbering at this number";
+      const commitStart = () => {
+        const raw = pageStart.value.trim();
+        if (raw === "") return;
+        const start = Number(raw);
+        if (!Number.isInteger(start) || start < 0) return;
+        this.setPageNumbering({ start });
+      };
+      pageStart.addEventListener("blur", commitStart);
+      pageStart.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commitStart();
+        }
+      });
+      chrome.appendChild(pageStart);
       const inheritedNote = document.createElement("span");
       inheritedNote.className = "docx-hf-inherited";
       inheritedNote.setAttribute("data-hf-inherited-note", "");
@@ -1546,6 +1774,13 @@ var DocxodusEditor = (() => {
       const kind = this.kinds[which];
       const select = band.querySelector("[data-hf-kind]");
       if (select && select.value !== kind) select.value = kind;
+      const pageFmt = band.querySelector("[data-hf-pagefmt]");
+      if (pageFmt) pageFmt.value = this.sectionInfo?.pageNumberFormat ?? "";
+      const pageStart = band.querySelector("[data-hf-pagestart]");
+      if (pageStart && document.activeElement !== pageStart) {
+        const start = this.sectionInfo?.pageNumberStart;
+        pageStart.value = start === void 0 ? "" : String(start);
+      }
       const inherited = this.refFor(which, kind)?.inherited === true;
       band.toggleAttribute("data-hf-inherited", inherited);
       const note = band.querySelector("[data-hf-inherited-note]");
@@ -1651,6 +1886,79 @@ var DocxodusEditor = (() => {
     }
   }
 
+  // src/editor-reconcile.ts
+  function tokenOf(unit) {
+    return unidOf(unit.id) + (unit.sig ? "|" + unit.sig : "");
+  }
+  function unidOf(id) {
+    return id.substring(id.lastIndexOf(":") + 1);
+  }
+  function diffUnits(oldUnids, newUnits) {
+    const n = oldUnids.length;
+    const m = newUnits.length;
+    const newUnids = newUnits.map(tokenOf);
+    const lcs = Array.from({ length: n + 1 }, () => new Int32Array(m + 1));
+    for (let i2 = n - 1; i2 >= 0; i2--) {
+      for (let j2 = m - 1; j2 >= 0; j2--) {
+        lcs[i2][j2] = oldUnids[i2] === newUnids[j2] ? lcs[i2 + 1][j2 + 1] + 1 : Math.max(lcs[i2 + 1][j2], lcs[i2][j2 + 1]);
+      }
+    }
+    const keep = /* @__PURE__ */ new Map();
+    const removed = [];
+    const added = [];
+    let i = 0;
+    let j = 0;
+    while (i < n && j < m) {
+      if (oldUnids[i] === newUnids[j]) {
+        keep.set(j, i);
+        i++;
+        j++;
+      } else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+        removed.push(i++);
+      } else {
+        added.push(j++);
+      }
+    }
+    while (i < n) removed.push(i++);
+    while (j < m) added.push(j++);
+    const keptBeforeOld = (oi) => {
+      let c = 0;
+      for (const v of keep.values()) if (v < oi) c++;
+      return c;
+    };
+    const keptBeforeNew = (nj) => {
+      let c = 0;
+      for (const k of keep.keys()) if (k < nj) c++;
+      return c;
+    };
+    const substituted = [];
+    const usedRemoved = /* @__PURE__ */ new Set();
+    for (const nj of added) {
+      const target = keptBeforeNew(nj);
+      for (const oi of removed) {
+        if (usedRemoved.has(oi)) continue;
+        if (keptBeforeOld(oi) === target) {
+          substituted.push({ oldIndex: oi, newIndex: nj });
+          usedRemoved.add(oi);
+          break;
+        }
+      }
+    }
+    return { keep, removed, added, substituted };
+  }
+  function needsRemount(diff, newUnits, oldKinds, threshold = 40) {
+    if (diff.added.length + diff.removed.length > threshold) return true;
+    const subNew = new Set(diff.substituted.map((s) => s.newIndex));
+    const subOld = new Set(diff.substituted.map((s) => s.oldIndex));
+    for (const j of diff.added) {
+      if (!subNew.has(j) && newUnits[j]?.kind === "li") return true;
+    }
+    for (const i of diff.removed) {
+      if (!subOld.has(i) && oldKinds[i] === "li") return true;
+    }
+    return false;
+  }
+
   // src/editor.ts
   var EDITABLE_TAGS = /* @__PURE__ */ new Set(["P", "H1", "H2", "H3", "H4", "H5", "H6"]);
   function fontWeightIsBold(w) {
@@ -1663,7 +1971,7 @@ var DocxodusEditor = (() => {
   }
   function collectInlineSegments(node, out) {
     node.childNodes.forEach((child) => {
-      if (child.nodeType === 1 && child.hasAttribute?.("data-list-marker")) return;
+      if (isGeneratedChrome(child)) return;
       if (child.nodeType === 3) {
         const text = child.textContent ?? "";
         if (!text) return;
@@ -1717,10 +2025,14 @@ var DocxodusEditor = (() => {
   function isListBlock(block) {
     return !!block.querySelector(":scope > [data-list-marker]");
   }
+  var GENERATED_CHROME_SELECTOR = '[data-list-marker], a.footnote-ref, a.endnote-ref, a[class$="-backref"]';
+  function isGeneratedChrome(node) {
+    return node?.nodeType === 1 && !!node.matches?.(GENERATED_CHROME_SELECTOR);
+  }
   function isInMarker(node) {
     let el = node && node.nodeType === 1 ? node : node?.parentElement ?? null;
     while (el) {
-      if (el.hasAttribute && el.hasAttribute("data-list-marker")) return true;
+      if (isGeneratedChrome(el)) return true;
       el = el.parentElement;
     }
     return false;
@@ -1952,8 +2264,11 @@ var DocxodusEditor = (() => {
       false,
       0,
       "annot-",
+      // Footnotes/endnotes ON: they are document content, and the editor makes the rendered note
+      // paragraphs editable. Must stay in step with DocxSessionOps.RenderHtml (the remount path),
+      // whose output has to match this first paint byte-for-byte.
       /* renderFootnotesAndEndnotes */
-      false,
+      true,
       /* renderHeadersAndFooters */
       paginated,
       false,
@@ -1989,6 +2304,9 @@ var DocxodusEditor = (() => {
       this.lastSelection = null;
       /** The docked header/footer bands, when `options.headerFooter` is on. */
       this.region = null;
+      /** Why the last reconcile() fell back to a full remount (null = it patched). For
+       *  diagnostics/specs; not part of the public API. */
+      this.lastReconcileFallback = null;
       /** Track the last meaningful selection so focus-stealing toolbar controls can still target it. */
       this.onSelectionChange = () => {
         if (this.closed) return;
@@ -2038,15 +2356,19 @@ var DocxodusEditor = (() => {
     /**
      * Repaint after an edit to `block` that would otherwise remount the whole document: a band
      * repaints only itself (a story is one to three paragraphs), leaving the body DOM — and the
-     * user's place in it — untouched.
+     * user's place in it — untouched; a body edit reconciles incrementally. `forceRemount` is
+     * for ops whose repaint provably needs whole-document context the reconciler cannot see:
+     * list membership/level changes (sibling numbering shifts without sibling XML changing)
+     * and border-div regrouping (HR insert, clearBorders).
      */
-    refreshAfter(block, focusIndex, caretAtEnd = false) {
+    refreshAfter(block, focusIndex, caretAtEnd = false, forceRemount = false) {
       const band = this.region?.bandOf(block);
       if (band) {
         this.region.refresh(this.region.whichOf(band));
         return;
       }
-      this.remount(focusIndex, caretAtEnd);
+      if (forceRemount) this.remount(focusIndex, caretAtEnd);
+      else this.reconcile(focusIndex, caretAtEnd);
     }
     /** Open a document, render it into `container`, and wire up editing. */
     static open(container, bytes, exports, options = {}) {
@@ -2059,7 +2381,7 @@ var DocxodusEditor = (() => {
         headerFooter: options.headerFooter ?? false,
         onEdit: options.onEdit
       };
-      const handle = exports.DocxSessionBridge.OpenSession(bytes, '{"persistAnchorIds":true}');
+      const handle = exports.DocxSessionBridge.OpenSession(bytes, '{"emitMarkdownPatch":false}');
       const editor = new _DocxEditor(container, exports, handle, opts);
       editor.refreshAnchorMap();
       if (opts.headerFooter) editor.createRegion();
@@ -2123,7 +2445,9 @@ var DocxodusEditor = (() => {
      * edit into a header part.
      */
     refreshAnchorMap() {
-      const proj = JSON.parse(this.exports.DocxSessionBridge.Project(this.handle));
+      const bridge = this.exports.DocxSessionBridge;
+      const raw = typeof bridge.ListAnchors === "function" ? bridge.ListAnchors(this.handle) : bridge.Project(this.handle);
+      const proj = JSON.parse(raw);
       this.unidToFullId.clear();
       const bodyOwned = /* @__PURE__ */ new Set();
       for (const [fullId, target] of Object.entries(proj.anchorIndex)) {
@@ -2188,6 +2512,7 @@ var DocxodusEditor = (() => {
         this.container.innerHTML = styles + parsed.body.innerHTML;
         this.editRoot = this.container;
         if (this.options.editable) this.wireBlocks(this.container);
+        this.stampPlanState();
         return;
       }
       this.container.innerHTML = styles;
@@ -2197,6 +2522,7 @@ var DocxodusEditor = (() => {
       this.container.appendChild(flow);
       this.editRoot = flow;
       if (this.options.editable) this.wireBlocks(flow);
+      this.stampPlanState();
       this.dockBands(flow);
     }
     /** Paginated mount: flow blocks into page boxes via pagination.ts, wire the page clones. */
@@ -2227,7 +2553,7 @@ var DocxodusEditor = (() => {
       const unid = el.getAttribute("data-anchor");
       if (!unid || !this.anchorIdOf(el)) return;
       el.setAttribute("contenteditable", "true");
-      el.querySelectorAll("[data-list-marker]").forEach((m) => m.setAttribute("contenteditable", "false"));
+      el.querySelectorAll(GENERATED_CHROME_SELECTOR).forEach((m) => m.setAttribute("contenteditable", "false"));
       el.dataset.committedText = blockContentText(el);
       el.addEventListener("focus", () => {
         this.activeBlock = el;
@@ -2303,6 +2629,7 @@ var DocxodusEditor = (() => {
           }
           this.wireBlock(fresh);
           if (this.activeBlock === el) this.activeBlock = fresh;
+          this.maybeRenumberNotes(fresh);
         }
       }
       this.options.onEdit?.({ anchorId: newAnchor, unid: newUnid });
@@ -2797,7 +3124,13 @@ var DocxodusEditor = (() => {
         )
       );
       if (!res.success) return;
-      this.refreshAfter(block, idx, false);
+      this.refreshAfter(
+        block,
+        idx,
+        false,
+        /* forceRemount */
+        true
+      );
     }
     /**
      * Insert a `rows`×`cols` table after the active block. `options.cellContents` (row-major
@@ -2887,7 +3220,13 @@ var DocxodusEditor = (() => {
       fullId = this.syncBlock(block, fullId);
       const res = this.parseEdit(this.exports.DocxSessionBridge.SetListLevel(this.handle, fullId, delta));
       if (!res.success) return;
-      this.refreshAfter(block, idx, false);
+      this.refreshAfter(
+        block,
+        idx,
+        false,
+        /* forceRemount */
+        true
+      );
     }
     /** Toggle (or set) page-break-before on the active block. */
     pageBreakBefore(value = true) {
@@ -2916,7 +3255,13 @@ var DocxodusEditor = (() => {
         this.exports.DocxSessionBridge.ApplyListFormat(this.handle, fullId, isThisKind ? "none" : kind)
       );
       if (!res.success) return;
-      this.refreshAfter(block, idx, false);
+      this.refreshAfter(
+        block,
+        idx,
+        false,
+        /* forceRemount */
+        true
+      );
     }
     /** Clear all paragraph borders (e.g. remove an inserted horizontal rule) on the active block —
      *  or every block in a multi-block selection. The engine/wire already accept `clearBorders`;
@@ -2945,6 +3290,40 @@ var DocxodusEditor = (() => {
       if (!res.success) return;
       this.refreshAfter(block, Math.max(0, idx - 1), true);
     }
+    /**
+     * Cite a new footnote from the caret position in the active body block. The note definition is
+     * created (writing the whole Word scaffold — part, reserved separator notes, settings
+     * declaration, styles — on a document that has none yet) and its body renders as ordinary
+     * editable `data-anchor` blocks in the notes section, so editing it afterwards needs no new op.
+     *
+     * Body blocks only: Word disallows a note reference inside a header/footer story or inside
+     * another note, and the session rejects those with `AnchorWrongKind`. Remounts, because a new
+     * note renumbers the citations after it and can add a whole part.
+     */
+    insertFootnote(markdown = "New footnote.") {
+      this.insertNote("footnote", markdown);
+    }
+    /** Cite a new endnote from the caret — see {@link insertFootnote}; writes the endnotes part. */
+    insertEndnote(markdown = "New endnote.") {
+      this.insertNote("endnote", markdown);
+    }
+    insertNote(kind, markdown) {
+      const block = this.activeBlock;
+      if (this.closed || !block) return;
+      if (this.isBandBlock(block) || block.closest(".footnotes, .endnotes")) return;
+      let fullId = this.anchorIdOf(block);
+      if (!fullId) return;
+      const idx = this.blockIndex(block);
+      const raw = caretOffsetIn(block);
+      fullId = this.syncBlock(block, fullId);
+      const offset = trimmedSplitOffset(block, raw ?? (block.textContent ?? "").length);
+      const bridge = this.exports.DocxSessionBridge;
+      const call = kind === "footnote" ? bridge.InsertFootnote : bridge.InsertEndnote;
+      if (!call) return;
+      const res = this.parseEdit(call.call(bridge, this.handle, fullId, offset, markdown));
+      if (!res.success) return;
+      this.reconcile(idx, false);
+    }
     applyParagraphFormat(op) {
       const block = this.activeBlock;
       if (this.closed || !block) return;
@@ -2967,7 +3346,7 @@ var DocxodusEditor = (() => {
       );
       if (!res.success) return;
       if (this.affectsList(res) || op.clearBorders) {
-        this.refreshAfter(block, idx, false);
+        this.refreshAfter(block, idx, false, true);
         return;
       }
       this.swapBlock(block, unid, res.modified?.[0])?.focus();
@@ -2992,20 +3371,20 @@ var DocxodusEditor = (() => {
       const res = this.parseEdit(this.exports.DocxSessionBridge.SetParagraphStyle(this.handle, fullId, styleId));
       if (!res.success) return;
       if (this.affectsList(res)) {
-        this.refreshAfter(block, idx, false);
+        this.refreshAfter(block, idx, false, true);
         return;
       }
       this.swapBlock(block, unid, res.modified?.[0])?.focus();
     }
-    /** Undo the last edit (re-renders the document). */
+    /** Undo the last edit (incremental repaint; falls back to a full re-render). */
     undo() {
       if (this.closed) return;
-      if (this.exports.DocxSessionBridge.Undo(this.handle)) this.remount();
+      if (this.exports.DocxSessionBridge.Undo(this.handle)) this.reconcile();
     }
-    /** Redo the last undone edit (re-renders the document). */
+    /** Redo the last undone edit (incremental repaint; falls back to a full re-render). */
     redo() {
       if (this.closed) return;
-      if (this.exports.DocxSessionBridge.Redo(this.handle)) this.remount();
+      if (this.exports.DocxSessionBridge.Redo(this.handle)) this.reconcile();
     }
     // ─── Header/footer region commands (no-ops unless `headerFooter` is on) ───────────────
     /**
@@ -3038,6 +3417,31 @@ var DocxodusEditor = (() => {
       }
       this.region.insertPageNumberInBand("footer", field);
     }
+    /**
+     * Set the page numbering of the section the bands describe (`w:pgNumType`) — Word's *Format Page
+     * Numbers…*: `start` restarts numbering at that number, `format` chooses `1, 2, 3` vs
+     * `i, ii, iii` etc. Omitted fields are left unchanged. Requires the header/footer region
+     * (`{ headerFooter: true }`); a no-op otherwise.
+     *
+     * Inserted page-number fields are plain, so they render through this. The editor's own view still
+     * shows each field's cached result — Word recomputes on open — but `{ paginated: true }`
+     * substitutes the real per-page number and so reflects the change immediately.
+     */
+    setPageNumbering(op) {
+      this.assertOpen();
+      this.region?.setPageNumbering(op);
+    }
+    /** Remove the section's page-numbering start/format: it reverts to continuing the previous
+     *  section's numbering in Word's default `1, 2, 3`. */
+    clearPageNumbering() {
+      this.assertOpen();
+      this.region?.clearPageNumbering();
+    }
+    /** This section's page numbering as the document currently states it — `{}` when the section
+     *  sets neither (it continues the previous section in the default format). */
+    pageNumbering() {
+      return this.region?.pageNumbering() ?? {};
+    }
     /** Which inline formats the current selection carries — for ribbon button highlighting. */
     queryFormatState() {
       const block = this.activeBlock ?? this.editRoot;
@@ -3066,6 +3470,7 @@ var DocxodusEditor = (() => {
       if (inBand) this.region.adoptBlock(fresh, anchorId);
       this.wireBlock(fresh);
       this.activeBlock = fresh;
+      this.maybeRenumberNotes(fresh);
       this.options.onEdit?.({ anchorId, unid: newUnid });
       return fresh;
     }
@@ -3088,7 +3493,7 @@ var DocxodusEditor = (() => {
         );
         if (html.charCodeAt(0) !== 123) return html;
       }
-      const bytes = bridge.Save(this.handle);
+      const bytes = typeof bridge.SaveWithAnchorIds === "function" ? bridge.SaveWithAnchorIds(this.handle) : bridge.Save(this.handle);
       return this.exports.DocumentConverter.ConvertDocxToHtmlComplete(
         ...completeArgs(bytes, this.options.cssPrefix, this.options.fabricateClasses, this.options.paginated, this.options.scale)
       );
@@ -3110,6 +3515,358 @@ var DocxodusEditor = (() => {
     affectsList(res) {
       return [...res.modified ?? [], ...res.created ?? []].some((r) => r.kind === "li");
     }
+    // ─── Incremental structural reconcile ─────────────────────────────────
+    //
+    // After a structural op (insert table/row/col, footnote, delete block, undo/redo)
+    // the DOM is patched from a unit-sequence diff against the session's render plan
+    // instead of remounting the whole document (~3 s of full-document conversion on a
+    // 350-block file). Full remount remains the universal FALLBACK: any ambiguity,
+    // unsupported bridge, paginated mode, list-membership change, or thrown error
+    // lands there — correctness never depends on the diff being right.
+    /** True when the bridge carries the reconcile trio and the mode allows patching. */
+    canReconcile() {
+      const b = this.exports.DocxSessionBridge;
+      return !this.options.paginated && typeof b.ListBlocks === "function" && typeof b.RenderBlocksHtml === "function" && typeof b.ListNotes === "function";
+    }
+    /** The body's top-level unit nodes in document order: `[data-anchor]` elements not
+     *  nested in another unit (cell paragraphs collapse into their table) and not in the
+     *  notes sections. */
+    bodyUnitNodes() {
+      const all = Array.from(this.editRoot.querySelectorAll("[data-anchor]"));
+      return all.filter((el) => {
+        if (el.closest("section.footnotes, section.endnotes")) return false;
+        const ancestor = el.parentElement?.closest("[data-anchor]");
+        return !(ancestor && this.editRoot.contains(ancestor));
+      });
+    }
+    /** The DOM diff token for a body unit node (see editor-reconcile.tokenOf). */
+    static domTokenOf(el) {
+      const unid = el.getAttribute("data-anchor") ?? "";
+      const sig = el.getAttribute("data-render-sig");
+      return sig ? `${unid}|${sig}` : unid;
+    }
+    /** The kind a body unit node would have in the plan (only 'li'/'tbl' matter to the
+     *  remount guard). */
+    static domKindOf(el) {
+      if (el.tagName === "TABLE") return "tbl";
+      return el.querySelector(":scope > [data-list-marker]") ? "li" : "p";
+    }
+    static listMarkerText(el) {
+      const m = el?.querySelector(":scope > [data-list-marker]");
+      return m ? m.textContent : null;
+    }
+    /**
+     * Incrementally patch the DOM from the session's render plan; falls back to
+     * {@link remount} whenever it cannot prove the patch correct. Same focus contract
+     * as remount.
+     */
+    reconcile(focusIndex = -1, caretAtEnd = false) {
+      if (!this.canReconcile()) {
+        this.remount(focusIndex, caretAtEnd);
+        return;
+      }
+      try {
+        if (!this.reconcileCore()) {
+          this.remount(focusIndex, caretAtEnd);
+          return;
+        }
+      } catch (err) {
+        this.lastReconcileFallback = `threw: ${err instanceof Error ? err.message : String(err)}`;
+        this.remount(focusIndex, caretAtEnd);
+        return;
+      }
+      if (focusIndex >= 0) {
+        const blocks = this.editableList();
+        const target = blocks[Math.min(focusIndex, blocks.length - 1)];
+        if (target) {
+          this.activeBlock = target;
+          placeCaretAtOffset(target, caretAtEnd ? (target.textContent ?? "").length : 0);
+        }
+      }
+      this.syncRegionToBody(this.activeBlock ?? void 0);
+    }
+    /** The patch itself. Returns false to request the remount fallback. */
+    reconcileCore() {
+      const bridge = this.exports.DocxSessionBridge;
+      this.refreshAnchorMap();
+      const plan = JSON.parse(bridge.ListBlocks(this.handle));
+      if (plan.error) return this.bail(`plan error: ${plan.error}`);
+      const oldNodes = this.bodyUnitNodes();
+      const oldTokens = oldNodes.map(_DocxEditor.domTokenOf);
+      const oldKinds = oldNodes.map(_DocxEditor.domKindOf);
+      const bodyDiff = diffUnits(oldTokens, plan.body);
+      if (needsRemount(bodyDiff, plan.body, oldKinds)) return this.bail("needsRemount (li change or churn)");
+      const fnState = this.notesDiff("footnotes", plan.footnotes);
+      const enState = this.notesDiff("endnotes", plan.endnotes);
+      if (fnState === null || enState === null) return this.bail("notes container unstampable/missing");
+      const addedBodyIds = bodyDiff.added.map((j) => plan.body[j].id);
+      const addedNoteIds = fnState.diff.added.map((j) => plan.footnotes[j].id).concat(enState.diff.added.map((j) => plan.endnotes[j].id));
+      const allIds = addedBodyIds.concat(addedNoteIds);
+      let rendered = {};
+      if (allIds.length > 0) {
+        rendered = JSON.parse(
+          bridge.RenderBlocksHtml(
+            this.handle,
+            JSON.stringify(allIds),
+            this.options.cssPrefix,
+            this.options.fabricateClasses
+          )
+        );
+        if (rendered.error) return this.bail(`render error: ${rendered.error}`);
+        for (const id of allIds) if (!rendered[id]) return this.bail(`unrenderable: ${id}`);
+      }
+      const parse = (html) => {
+        const el = new DOMParser().parseFromString(html, "text/html").body.firstElementChild;
+        el?.removeAttribute("xmlns");
+        return el;
+      };
+      const freshBody = /* @__PURE__ */ new Map();
+      for (const j of bodyDiff.added) {
+        const el = parse(rendered[plan.body[j].id]);
+        if (!el) return this.bail(`unparseable render: ${plan.body[j].id}`);
+        freshBody.set(j, el);
+      }
+      for (const { oldIndex, newIndex } of bodyDiff.substituted) {
+        const freshRoot = freshBody.get(newIndex);
+        const oldMarker = _DocxEditor.listMarkerText(oldNodes[oldIndex]);
+        const newMarker = _DocxEditor.listMarkerText(
+          freshRoot ? _DocxEditor.anchorElOf(freshRoot) : null
+        );
+        if (oldMarker !== newMarker) return this.bail("substituted li marker drift");
+      }
+      if (!this.applyBodyDiff(oldNodes, plan.body, bodyDiff, freshBody)) return this.bail("applyBodyDiff bail");
+      this.applyNotesDiff("footnotes", plan.footnotes, fnState, rendered);
+      this.applyNotesDiff("endnotes", plan.endnotes, enState, rendered);
+      const freshHasMarker = [...freshBody.values()].some(
+        (el) => el.querySelector("a.footnote-ref, a.endnote-ref")
+      );
+      if (fnState.diff.added.length + fnState.diff.removed.length > 0 || freshHasMarker)
+        this.renumberNoteChrome("footnote");
+      if (enState.diff.added.length + enState.diff.removed.length > 0 || freshHasMarker)
+        this.renumberNoteChrome("endnote");
+      this.lastReconcileFallback = null;
+      return true;
+    }
+    bail(reason) {
+      this.lastReconcileFallback = reason;
+      return false;
+    }
+    /** The generated single-child wrapper chain around a unit node (a table's alignment
+     *  <div>). Climbs while the parent is an anchor-less DIV whose ONLY element child is
+     *  the current node — never a section div (multi-child) or the edit root. */
+    unitWrapperOf(el) {
+      let n = el;
+      while (n.parentElement && n.parentElement !== this.editRoot && n.parentElement.tagName === "DIV" && !n.parentElement.hasAttribute("data-anchor") && n.parentElement.childElementCount === 1) {
+        n = n.parentElement;
+      }
+      return n;
+    }
+    /** The `[data-anchor]` element of a fresh render root (the root itself for a leaf
+     *  block, its descendant for a wrapper-shaped render like a table's align div). */
+    static anchorElOf(root) {
+      return root.hasAttribute("data-anchor") ? root : root.querySelector("[data-anchor]");
+    }
+    /** Insert/remove/swap body unit nodes per the diff. Returns false to bail (parent
+     *  ambiguity, order violation, wrapper semantics) — the session is already correct,
+     *  so bailing just means a full repaint. */
+    applyBodyDiff(oldNodes, units, diff, fresh) {
+      let lastOld = -1;
+      for (let j = 0; j < units.length; j++) {
+        const oi = diff.keep.get(j);
+        if (oi === void 0) continue;
+        if (oi < lastOld) return false;
+        lastOld = oi;
+      }
+      const subOldByNew = new Map(diff.substituted.map((s) => [s.newIndex, s.oldIndex]));
+      for (const [nj, oi] of subOldByNew) {
+        const freshRoot = fresh.get(nj);
+        const oldWrapper = this.unitWrapperOf(oldNodes[oi]);
+        if (!freshRoot.hasAttribute("data-anchor")) {
+          oldWrapper.replaceWith(freshRoot);
+        } else if (oldWrapper === oldNodes[oi]) {
+          oldNodes[oi].replaceWith(freshRoot);
+        } else {
+          return false;
+        }
+        this.wireUnit(freshRoot, units[nj]);
+      }
+      const pureAdded = diff.added.filter((j) => !subOldByNew.has(j));
+      const pureRemoved = diff.removed.filter(
+        (i) => !diff.substituted.some((s) => s.oldIndex === i)
+      );
+      const nodeAt = (j) => {
+        const oi = diff.keep.get(j);
+        if (oi !== void 0) return oldNodes[oi];
+        if (subOldByNew.has(j)) return fresh.get(j);
+        const f = fresh.get(j);
+        return f && f.isConnected ? f : null;
+      };
+      for (const j of pureAdded) {
+        const el = fresh.get(j);
+        let prev = null;
+        for (let k = j - 1; k >= 0 && !prev; k--) prev = nodeAt(k);
+        let next = null;
+        for (let k = j + 1; k < units.length && !next; k++) {
+          const oi = diff.keep.get(k);
+          if (oi !== void 0) next = oldNodes[oi];
+          else if (subOldByNew.has(k)) next = fresh.get(k);
+        }
+        const prevW = prev ? this.unitWrapperOf(prev) : null;
+        const nextW = next ? this.unitWrapperOf(next) : null;
+        if (prevW && nextW && prevW.parentElement !== nextW.parentElement) return false;
+        if (prevW) prevW.after(el);
+        else if (nextW) nextW.before(el);
+        else return false;
+        this.wireUnit(el, units[j]);
+      }
+      for (const i of pureRemoved) {
+        const wrapper = this.unitWrapperOf(oldNodes[i]);
+        wrapper.remove();
+      }
+      return true;
+    }
+    /** Wire a freshly rendered unit root (and its nested blocks) and stamp the unit's
+     *  content signature on its `[data-anchor]` element — the element the next
+     *  reconcile's DOM walk reads tokens from. */
+    wireUnit(root, unit) {
+      const anchorEl = _DocxEditor.anchorElOf(root);
+      if (anchorEl && unit.sig) anchorEl.setAttribute("data-render-sig", unit.sig);
+      if (anchorEl) this.wireBlock(anchorEl);
+      root.querySelectorAll("[data-anchor]").forEach((b) => this.wireBlock(b));
+    }
+    /** Old-sequence diff state for one notes section. `null` requests remount (DOM not
+     *  stampable/consistent). */
+    notesDiff(sectionClass, units) {
+      const ol = this.editRoot.querySelector(`section.${sectionClass} > ol`);
+      const lis = ol ? Array.from(ol.children).filter((c) => c.tagName === "LI") : [];
+      if (units.length === 0 && lis.length === 0) return { lis, diff: diffUnits([], []) };
+      if (!ol) return null;
+      const tokens = [];
+      for (const li of lis) {
+        const unid = li.getAttribute("data-note-anchor");
+        if (!unid) return null;
+        const sig = li.getAttribute("data-render-sig");
+        tokens.push(sig ? `${unid}|${sig}` : unid);
+      }
+      return { lis, diff: diffUnits(tokens, units) };
+    }
+    /** Apply a notes-section diff: rebuild the `<ol>`'s li list, preserving kept nodes. */
+    applyNotesDiff(sectionClass, units, state, rendered) {
+      if (state.diff.added.length === 0 && state.diff.removed.length === 0) return;
+      if (units.length === 0) {
+        this.editRoot.querySelector(`section.${sectionClass}`)?.remove();
+        return;
+      }
+      const ol = this.editRoot.querySelector(`section.${sectionClass} > ol`);
+      const prefix = sectionClass === "footnotes" ? "fn" : "en";
+      const nodes = [];
+      for (let j = 0; j < units.length; j++) {
+        const oi = state.diff.keep.get(j);
+        if (oi !== void 0) {
+          nodes.push(state.lis[oi]);
+          continue;
+        }
+        nodes.push(this.buildNoteLi(prefix, units[j], rendered[units[j].id]));
+      }
+      ol.replaceChildren(...nodes);
+    }
+    /** Build a notes-section `<li>` for a freshly rendered note — replicating the
+     *  converter's chrome (id/value are re-stamped by the renumber pass; the backref
+     *  goes inside the last paragraph, matching RenderFootnoteItem). */
+    buildNoteLi(prefix, unit, html) {
+      const li = document.createElement("li");
+      li.setAttribute("data-note-anchor", unidOf(unit.id));
+      if (unit.sig) li.setAttribute("data-render-sig", unit.sig);
+      li.innerHTML = html;
+      const paras = li.querySelectorAll(":scope > p");
+      const last = paras[paras.length - 1];
+      if (last) {
+        const backref = document.createElement("a");
+        backref.setAttribute("class", `${prefix}-backref`);
+        backref.setAttribute("contenteditable", "false");
+        backref.textContent = "\u21A9";
+        last.append(" ", backref);
+      }
+      li.querySelectorAll("[data-anchor]").forEach((b) => this.wireBlock(b));
+      return li;
+    }
+    /**
+     * Rewrite position-derived note chrome from the session's citation-ordered note
+     * list: the k-th marker in document order IS note k (ids ascend in reference
+     * order), so marker sup text, hrefs/ids, li ids/values and backref hrefs are all
+     * re-derived positionally. Pure attribute/text patching of generated chrome.
+     */
+    renumberNoteChrome(kind) {
+      const bridge = this.exports.DocxSessionBridge;
+      if (typeof bridge.ListNotes !== "function") return;
+      const prefix = kind === "footnote" ? "fn" : "en";
+      let notes;
+      try {
+        notes = JSON.parse(bridge.ListNotes(this.handle, kind === "endnote"));
+      } catch {
+        return;
+      }
+      if (!Array.isArray(notes)) return;
+      const markers = Array.from(
+        this.editRoot.querySelectorAll(`a.${kind}-ref`)
+      ).filter((a) => !a.closest("section.footnotes, section.endnotes"));
+      markers.forEach((a, k) => {
+        const n = notes[k];
+        if (!n) return;
+        a.setAttribute("href", `#${prefix}-${n.id}`);
+        a.id = `${prefix}-ref-${n.id}`;
+        if (kind === "footnote") a.setAttribute("data-footnote-id", n.id);
+        const sup = a.querySelector("sup");
+        if (sup) sup.textContent = String(n.ordinal);
+      });
+      const byUnid = new Map(notes.map((n) => [unidOf(n.defAnchorId), n]));
+      const lis = this.editRoot.querySelectorAll(`section.${kind}s > ol > li`);
+      lis.forEach((li) => {
+        const unid = li.getAttribute("data-note-anchor");
+        const n = unid ? byUnid.get(unid) : void 0;
+        if (!n) return;
+        li.id = `${prefix}-${n.id}`;
+        li.setAttribute("value", String(n.ordinal));
+        li.querySelectorAll(`a.${prefix}-backref`).forEach(
+          (b) => b.setAttribute("href", `#${prefix}-ref-${n.id}`)
+        );
+      });
+    }
+    /** After an incremental block swap, stale marker chrome in the swapped node (the
+     *  throwaway render numbers citations from 1) is repaired in place. */
+    maybeRenumberNotes(fresh) {
+      if (fresh.querySelector("a.footnote-ref")) this.renumberNoteChrome("footnote");
+      if (fresh.querySelector("a.endnote-ref")) this.renumberNoteChrome("endnote");
+    }
+    /** Stamp the DOM state the reconciler diffs against: container signatures on body
+     *  tables and `data-note-anchor` + signature on notes-section items. Called after
+     *  every full mount; reconcile stamps its own insertions. */
+    stampPlanState() {
+      const bridge = this.exports.DocxSessionBridge;
+      if (typeof bridge.ListBlocks !== "function") return;
+      try {
+        const plan = JSON.parse(bridge.ListBlocks(this.handle));
+        if (plan.error) return;
+        const nodes = this.bodyUnitNodes();
+        if (nodes.length === plan.body.length) {
+          nodes.forEach((el, k) => {
+            if (plan.body[k].sig && el.getAttribute("data-anchor") === unidOf(plan.body[k].id))
+              el.setAttribute("data-render-sig", plan.body[k].sig);
+          });
+        }
+        const stampNotes = (sectionClass, units) => {
+          const lis = this.editRoot.querySelectorAll(`section.${sectionClass} > ol > li`);
+          if (lis.length !== units.length) return;
+          lis.forEach((li, k) => {
+            li.setAttribute("data-note-anchor", unidOf(units[k].id));
+            if (units[k].sig) li.setAttribute("data-render-sig", units[k].sig);
+          });
+        };
+        stampNotes("footnotes", plan.footnotes);
+        stampNotes("endnotes", plan.endnotes);
+      } catch {
+      }
+    }
     /**
      * Full re-render from current session state (after undo/redo, and after list edits where
      * single-block rendering can't compute numbering). Optionally focus the editable block at