docxodus 10.0.0 → 12.0.0

package/dist/editor-headerfooter.js

@@ -1,79 +1,67 @@
 /**
- * HeaderFooterRegion — the DocxEditor's docked header/footer editing bands.
+ * HeaderFooterRegion — the DocxEditor's header/footer editing surface.
  *
  * Header and footer stories live in their own OOXML parts (HeaderPart/FooterPart) *outside*
- * the body, so they cannot be another block in the body flow. This module renders them as two
- * docked bands — one above the body, one below — each composed PER STORY PARAGRAPH via the
- * session-attached `RenderBlockHtml`, which resolves `hdr`/`ftr` anchors natively.
+ * the body, so they cannot be another block in the body flow. This module presents them two
+ * ways, both composed PER STORY PARAGRAPH via the editor's block renderer, which resolves
+ * `hdr`/`ftr` anchors natively:
  *
- * Using the same renderer for first paint and for the post-edit incremental swap means there is
- * no fidelity drift between them. It is also the only option that works in continuous mode at
- * all: the editor's full-document render only asks for headers/footers in paginated mode, and it
- * never stamps `data-anchor` inside header/footer parts (Unids are assigned to the main document
- * part only). In paginated mode the page boxes additionally clone one header node onto every
- * page, so page-margin nodes could never be uniquely addressable — bands keep exactly one DOM
- * node per story paragraph.
+ *  - **Continuous view** — two bands, one docked above the body and one below, drawn as the
+ *    top and bottom margin of the sheet (a dashed rule and a small "Header"/"Footer" tag, the
+ *    look Word has while a header is being edited).
+ *  - **Page view** — no bands. The paginator clones each story onto every page as inert
+ *    presentation; clicking a page's header or footer area swaps THAT page's clone for the
+ *    real, editable story paragraphs. A commit re-renders the paragraph and re-clones the story
+ *    onto every other page that shows it, so all pages update live, and page-number fields on
+ *    each clone are substituted per page just as the paginator does.
  *
  * Once rendered, a story paragraph is an ORDINARY editable block: DocxSession's anchor
  * resolution indexes every scope and routes by part, so ReplaceText/ApplyFormat/SetParagraphFormat
- * all accept a `p:hdr1:<unid>` anchor. The editor wires band blocks with the same `wireBlock` it
- * uses for the body, which is why the whole ribbon works inside a band with no new command code.
- */
-/** The page-number formats Word's *Format Page Numbers…* dialog offers, in its order. The blank
- *  entry means "leave the section's format alone" — not "decimal", which would write an attribute
- *  the document may never have had. */
-const PAGE_FORMAT_LABELS = [
-    { value: "", label: "Format…" },
-    { 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" },
-];
-const KIND_LABELS = [
-    { value: "default", label: "Default" },
-    { value: "first", label: "First page" },
-    { value: "even", label: "Even pages" },
-];
-/**
- * Verbatim from docs/architecture/docx_mutation_api.md. `w:evenAndOddHeaders` is set on the
- * SETTINGS part, so it is document-global and governs footers as well as headers: once set,
- * even pages stop inheriting the Default stories entirely. A demo user who creates only an
- * even header hits this immediately and sees their footer vanish on page 2.
- */
-const EVEN_WARNING = "w:evenAndOddHeaders is document-global and governs footers too — even pages stop " +
-    "inheriting the Default stories, so a section with only a Default footer shows no footer " +
-    "at all on even pages.";
-/**
- * `w:titlePg` is per-section but has the same shape of surprise: once set, page 1 uses its OWN
- * header AND footer, so an empty first-page footer means page 1 shows no footer even though the
- * Default one is populated.
+ * all accept a `p:hdr1:<unid>` anchor. The editor wires story blocks with the same `wireBlock` it
+ * uses for the body, which is why the whole ribbon works inside a story with no new command code.
+ *
+ * "Different first page" and "Different odd & even pages" are Word's two checkboxes, backed by
+ * `w:titlePg` (per section) and `w:evenAndOddHeaders` (document-global). Enabling one seeds BOTH
+ * the header and the footer story of that kind, exactly as Word does — page 1 stops using the
+ * default stories the moment `w:titlePg` is set, so seeding only one side would silently leave
+ * page 1 with no footer.
  */
-const FIRST_WARNING = "w:titlePg makes page 1 use its own first-page header AND footer instead of the Default " +
-    "ones, so an empty first-page footer leaves page 1 with no footer.";
+import { formatPageNumber } from "./page-number-format.js";
 /** Kinds/scopes the markdown projection addresses as editable text blocks. */
 const STORY_BLOCK_KINDS = new Set(["p", "h", "li"]);
+const KIND_LABELS = {
+    default: { header: "Header", footer: "Footer" },
+    first: { header: "First Page Header", footer: "First Page Footer" },
+    even: { header: "Even Page Header", footer: "Even Page Footer" },
+};
+/** Attributes the editor stamps on live story blocks and that a page clone must not carry. */
+const LIVE_BLOCK_ATTRS = [
+    "contenteditable", "data-anchor", "data-hf-anchor", "data-hf-adopted", "data-hf-focused",
+    "data-committed-text", "data-render-sig", "tabindex",
+];
 export class HeaderFooterRegion {
-    constructor(bridge, handle, options, callbacks) {
-        /** The body anchor whose section the bands currently describe (needed to seed a story). */
+    constructor(bridge, handle, callbacks) {
+        /** The body anchor whose section the region currently describes (needed to seed a story). */
         this.bodyAnchorId = null;
         this.sectionInfo = null;
         /** Memoized body anchor → governing sectionUnid, so repeat focus costs no bridge call. */
         this.sectionOfAnchor = new Map();
-        this.kinds = {
-            header: "default",
-            footer: "default",
-        };
+        /** Which story kind each continuous band shows. */
+        this.kinds = { header: "default", footer: "default" };
+        /** Page view: the page stack being edited in place, and the hosts currently holding live blocks. */
+        this.pageRoot = null;
+        this.pageHosts = new Set();
+        this.activeHost = null;
+        this.pageListeners = new Map();
         this.bridge = bridge;
         this.handle = handle;
-        this.options = options;
         this.callbacks = callbacks;
         this.headerBand = this.buildBand("header");
         this.footerBand = this.buildBand("footer");
     }
     // ─── public surface ──────────────────────────────────────────────────
     /**
-     * Point the bands at the section governing `bodyAnchorId` and repaint if it changed.
+     * Point the region at the section governing `bodyAnchorId` and repaint if it changed.
      * Cheap to call on every focus change: the anchor → section lookup is memoized, and an
      * unchanged `sectionUnid` returns without touching the DOM (so it never clobbers the
      * user's kind selection).
@@ -88,50 +76,124 @@ export class HeaderFooterRegion {
         }
         const info = this.readSectionInfo(bodyAnchorId);
         if (!info)
-            return; // not a body anchor (or no sectPr) — leave the bands as they are
+            return; // not a body anchor (or no sectPr) — leave things as they are
         this.sectionOfAnchor.set(bodyAnchorId, info.sectionUnid);
         const changed = info.sectionUnid !== this.sectionInfo?.sectionUnid;
         this.bodyAnchorId = bodyAnchorId;
         this.sectionInfo = info;
-        if (changed)
+        if (changed && !this.pageRoot) {
+            // A kind the new section cannot show falls back to its default story.
+            for (const which of ["header", "footer"]) {
+                if (!this.partUriFor(which, this.kinds[which]))
+                    this.kinds[which] = "default";
+            }
             this.refreshAll();
+        }
     }
-    /** Repaint one band from the live session. */
+    /** Re-read the section and repaint one story (band, or the active page host and its clones). */
     refresh(which) {
         this.sectionInfo = this.bodyAnchorId ? this.readSectionInfo(this.bodyAnchorId) : null;
-        this.renderBand(which);
+        if (this.pageRoot)
+            this.repaintPageStory(which);
+        else
+            this.renderBand(which);
     }
-    /** Repaint both bands from the live session (after a remount, undo/redo, or section change). */
+    /** Repaint both stories from the live session (after a remount, undo/redo, or section change). */
     refreshAll() {
+        if (this.pageRoot) {
+            this.repaintPageStory("header");
+            this.repaintPageStory("footer");
+            return;
+        }
         this.renderBand("header");
         this.renderBand("footer");
     }
-    /** Select (and, if absent, create) the story kind a band edits, and make it render. */
+    /** Select (and, if absent, create) the story kind a continuous band shows. */
     setKind(which, kind) {
         this.kinds[which] = kind;
-        const select = this.bandFor(which).querySelector("[data-hf-kind]");
-        if (select && select.value !== kind)
-            select.value = kind;
         if (!this.partUriFor(which, kind))
             this.seedStory(which, kind);
-        // Selecting first/even IS the user saying "use a different first/even page", so the section's
-        // visibility flag must be set even when the part already exists — seedStory (which sets it as
-        // a side effect of writing content) doesn't run then. Word leaves first/even parts behind when
-        // those options are switched off, so a real document commonly has the reference WITHOUT the
-        // flag; without this the typed story is saved but never rendered.
+        // Selecting first/even IS the user saying "use a different first/even page", so the
+        // section's flag must be set even when the part already exists: Word leaves first/even parts
+        // behind when those options are switched off, so a real document commonly has the reference
+        // WITHOUT the flag; without this the typed story is saved but never rendered.
         if (this.bodyAnchorId && kind !== "default") {
             this.bridge.EnsureHeaderFooterVisible(this.handle, this.bodyAnchorId, kind);
         }
         this.refresh(which);
     }
-    /** The kind a band is currently editing. */
+    /** The kind a band (or the active page host) is currently editing. */
     kindOf(which) {
+        if (this.pageRoot && this.activeHost && this.whichOf(this.activeHost) === which) {
+            return this.activeHost.dataset.hfType ?? "default";
+        }
         return this.kinds[which];
     }
+    /** Word's checkbox state: whether `w:titlePg` (first) / `w:evenAndOddHeaders` (even) is set. */
+    kindEnabled(kind) {
+        const info = this.sectionInfo;
+        if (!info)
+            return false;
+        if (kind === "first")
+            return info.titlePage ?? this.refsFor("header").some((r) => r.kind === "first" && !r.inherited);
+        return info.evenAndOddHeaders ?? false;
+    }
+    /**
+     * Word's "Different first page" / "Different odd & even pages". Enabling seeds BOTH stories of
+     * that kind when absent (page 1 uses its own header AND footer once `w:titlePg` is set, so a
+     * missing first-page footer would leave page 1 footer-less) and sets the flag; disabling clears
+     * the flag and leaves the parts in place, as Word does. Returns false when the bundle predates
+     * the disable op and `enabled` is false.
+     */
+    setKindEnabled(kind, enabled) {
+        if (!this.bodyAnchorId)
+            return false;
+        if (enabled) {
+            for (const which of ["header", "footer"]) {
+                // The odd/all-pages story too: once the option is on, its pages need somewhere to
+                // type as much as the first/even ones do (Word shows an empty area for both).
+                if (!this.partUriFor(which, "default"))
+                    this.seedStory(which, "default");
+                if (!this.partUriFor(which, kind))
+                    this.seedStory(which, kind);
+            }
+            const res = parseResult(this.bridge.EnsureHeaderFooterVisible(this.handle, this.bodyAnchorId, kind));
+            if (!res.success)
+                return false;
+        }
+        else {
+            if (!this.bridge.SetHeaderFooterKindEnabled)
+                return false;
+            const res = parseResult(this.bridge.SetHeaderFooterKindEnabled(this.handle, this.bodyAnchorId, kind, false));
+            if (!res.success)
+                return false;
+            for (const which of ["header", "footer"]) {
+                if (this.kinds[which] === kind)
+                    this.kinds[which] = "default";
+            }
+        }
+        this.reloadSection();
+        // Page view selects stories per page from the flags, so the pages themselves must rebuild.
+        if (this.pageRoot)
+            this.callbacks.remount();
+        return true;
+    }
+    /** Human label for the story a band (or the active host) shows — "First Page Header". */
+    storyLabel(which) {
+        return KIND_LABELS[this.kindOf(which)][which];
+    }
+    /** The kinds a band could show right now (those with a story or an enabled flag). */
+    availableKinds(which) {
+        const kinds = ["default"];
+        if (this.kindEnabled("first") || this.partUriFor(which, "first"))
+            kinds.push("first");
+        if (this.kindEnabled("even") || this.partUriFor(which, "even"))
+            kinds.push("even");
+        return kinds;
+    }
     /** 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. */
+     *  section's page-number format — see {@link setPageNumbering}. */
     insertPageNumber(which, anchorId, field) {
         const res = parseResult(this.bridge.InsertPageNumberField(this.handle, anchorId, field, ""));
         if (!res.success)
@@ -139,15 +201,25 @@ export class HeaderFooterRegion {
         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.
-     */
+    /** Insert a page number into a story's own target paragraph (focused, else last). Seeds the
+     *  story first if the selected kind has none, so the command is never a silent no-op. */
+    insertPageNumberInBand(which, field) {
+        // Page view: the field goes into a live story, so open the story on the current page
+        // first (Word does the same — inserting a page number takes you into the footer).
+        if (this.pageRoot && !(this.activeHost && this.whichOf(this.activeHost) === which)) {
+            const near = this.activeHost ?? null;
+            if (!this.focusStory(which, near))
+                return false;
+        }
+        const kind = this.kindOf(which);
+        if (!this.partUriFor(which, kind)) {
+            this.seedStory(which, kind);
+            this.refresh(which);
+        }
+        const target = this.pageNumberTarget(which);
+        return target ? this.insertPageNumber(which, target, field) : false;
+    }
+    /** Set this section's page numbering (`w:pgNumType`) — Word's *Format Page Numbers…*. */
     setPageNumbering(op) {
         if (!this.bodyAnchorId)
             return false;
@@ -157,16 +229,11 @@ export class HeaderFooterRegion {
         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". */
+    /** This section's page numbering as the live document states it (fields absent, not defaulted). */
     pageNumbering() {
-        return {
-            start: this.sectionInfo?.pageNumberStart,
-            format: this.sectionInfo?.pageNumberFormat,
-        };
+        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`. */
+    /** Remove this section's page-numbering start/format. */
     clearPageNumbering() {
         if (!this.bodyAnchorId)
             return false;
@@ -176,69 +243,346 @@ export class HeaderFooterRegion {
         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) {
-        if (!this.partUriFor(which, this.kinds[which])) {
-            this.seedStory(which, this.kinds[which]);
-            this.renderBand(which);
-        }
-        const target = this.pageNumberTarget(which);
-        return target ? this.insertPageNumber(which, target, field) : false;
-    }
-    /** The band element containing `node`, or null. */
+    /** The story host (continuous band or active page area) containing `node`, or null. */
     bandOf(node) {
         const el = node && node.nodeType === 1 ? node : node?.parentElement ?? null;
         const band = el?.closest("[data-hf-band]") ?? null;
-        return band === this.headerBand || band === this.footerBand ? band : null;
+        if (!band)
+            return null;
+        return band === this.headerBand || band === this.footerBand || this.pageHosts.has(band) ? band : null;
     }
-    /** The block-list root (a band's story container) owning `node`, or null. */
+    /** The block-list root (a story's container) owning `node`, or null. */
     blockRootOf(node) {
         const band = this.bandOf(node);
         return band ? band.querySelector("[data-hf-body]") : null;
     }
-    /** True when `node` is inside either band (including its chrome). */
+    /** True when `node` is inside a story host (band or page area). */
     contains(node) {
         return this.bandOf(node) !== null;
     }
-    /** `"header"` / `"footer"` for a band element produced by this region. */
+    /** `"header"` / `"footer"` for a story host produced by this region. */
     whichOf(band) {
-        return band === this.footerBand ? "footer" : "header";
+        return band.getAttribute("data-hf-band") === "footer" ? "footer" : "header";
+    }
+    /** The story host currently being edited (page view), or null. */
+    get active() {
+        return this.activeHost;
+    }
+    /** True while the caret is in a story (either view) — drives the contextual ribbon tab. */
+    isStoryActive() {
+        return this.activeHost !== null;
+    }
+    /**
+     * Track focus: the editor calls this whenever any block takes focus. A body block leaving a
+     * page story deactivates it (and re-paginates if the story grew past its band); a story block
+     * activates its host.
+     */
+    noteFocus(el) {
+        const host = el ? this.bandOf(el) : null;
+        if (host === this.activeHost)
+            return;
+        const previous = this.activeHost;
+        this.activeHost = host;
+        if (previous)
+            this.deactivateHost(previous);
+        if (host) {
+            host.setAttribute("data-hf-active", "");
+            if (this.pageHosts.has(host))
+                host.style.overflow = "visible";
+        }
+        this.callbacks.onActiveChange?.(host, host ? this.whichOf(host) : null);
+    }
+    /** Leave story editing: the caret goes back to the body (Word's "Close Header and Footer"). */
+    close() {
+        const previous = this.activeHost;
+        this.activeHost = null;
+        if (previous)
+            this.deactivateHost(previous);
+        this.callbacks.onActiveChange?.(null, null);
+    }
+    /**
+     * Move the caret into a story (Word's "Go to Header / Go to Footer"). Page view activates the
+     * area on the page the caret is on (else the first page); continuous view focuses the band.
+     */
+    focusStory(which, near) {
+        if (this.pageRoot) {
+            const pages = Array.from(this.pageRoot.querySelectorAll(".page-box"));
+            let page = near?.closest(".page-box") ?? pages[0] ?? null;
+            if (!page)
+                return false;
+            let area = page.querySelector(`.page-${which}`);
+            if (!area) {
+                // No story of this kind exists, so the paginator drew no area to click. Seed it and
+                // re-paginate; the page then carries an (empty) area for the caret to land in.
+                const pageIndex = pages.indexOf(page);
+                const bodyAnchor = this.bodyAnchorForPage(page);
+                if (!bodyAnchor)
+                    return false;
+                this.syncToBody(bodyAnchor);
+                const kind = page.querySelector(`.page-${which === "header" ? "footer" : "header"}`)?.dataset.hfType ?? "default";
+                if (!this.partUriFor(which, kind))
+                    this.seedStory(which, kind);
+                this.callbacks.remount();
+                if (!this.pageRoot)
+                    return false;
+                page = this.pageRoot.querySelectorAll(".page-box")[Math.max(0, pageIndex)] ?? null;
+                area = page?.querySelector(`.page-${which}`) ?? null;
+                if (!area)
+                    return false;
+            }
+            this.editInPage(area, "end");
+            return true;
+        }
+        const band = which === "header" ? this.headerBand : this.footerBand;
+        const block = band.querySelector('[data-anchor][contenteditable="true"]');
+        if (!block)
+            return false;
+        placeCaretAtEnd(block);
+        return true;
+    }
+    /** After the editor swapped/split/merged a story block in place: show this page's own numbers
+     *  in the fresh render, then mirror it to the page clones. */
+    afterStoryEdit(el) {
+        const host = this.bandOf(el);
+        if (!host || !this.pageRoot)
+            return;
+        this.substituteFields(host);
+        this.propagate(host);
+    }
+    // ─── page view: edit in place ────────────────────────────────────────
+    /**
+     * Adopt a page stack: every page's header/footer area becomes click-to-edit. The paginator's
+     * clones stay as they are until a click swaps one for the live story.
+     */
+    attachPages(pageRoot) {
+        this.detachPages();
+        this.pageRoot = pageRoot;
+        for (const area of Array.from(pageRoot.querySelectorAll(".page-header, .page-footer"))) {
+            area.setAttribute("data-hf-page", area.classList.contains("page-footer") ? "footer" : "header");
+            area.setAttribute("data-hf-inert", "");
+            area.title = `Click to edit the ${area.classList.contains("page-footer") ? "footer" : "header"}`;
+            const listener = (event) => {
+                if (this.pageHosts.has(area))
+                    return; // already live — the click lands in a block
+                event.preventDefault();
+                this.editInPage(area, "point", event);
+            };
+            area.addEventListener("mousedown", listener);
+            this.pageListeners.set(area, listener);
+        }
+    }
+    /** Release a page stack (before a remount replaces it). */
+    detachPages() {
+        for (const [area, listener] of this.pageListeners)
+            area.removeEventListener("mousedown", listener);
+        this.pageListeners.clear();
+        this.pageHosts.clear();
+        const hadActive = this.activeHost !== null;
+        this.activeHost = null;
+        this.pageRoot = null;
+        // The pages are being thrown away, so there is no host to deactivate — but the caret WAS
+        // in a story, and the ribbon's contextual tab and story label follow this callback. Without
+        // it, the next body focus compared null to null and never published "back in the body".
+        if (hadActive)
+            this.callbacks.onActiveChange?.(null, null);
+    }
+    /** True when the region is presenting stories inside page boxes rather than as bands. */
+    get inPageMode() {
+        return this.pageRoot !== null;
+    }
+    /**
+     * Swap a page's cloned story for the live, editable one and put the caret in it. The page
+     * advertises which story it shows (`data-hf-type`, stamped by the paginator) and which
+     * section it belongs to (`data-section-index`); the section's body anchor comes from the
+     * first anchored block on the page (or an earlier page of the same section).
+     */
+    editInPage(area, caret, event) {
+        if (!this.pageRoot)
+            return;
+        const which = area.getAttribute("data-hf-page") === "footer" ? "footer" : "header";
+        const kind = area.dataset.hfType ?? "default";
+        const page = area.closest(".page-box");
+        const bodyAnchor = page ? this.bodyAnchorForPage(page) : null;
+        if (!bodyAnchor)
+            return;
+        this.syncToBody(bodyAnchor);
+        this.kinds[which] = kind;
+        if (!this.pageHosts.has(area)) {
+            area.setAttribute("data-hf-band", which);
+            area.removeAttribute("data-hf-inert");
+            area.dataset.hfLabel = KIND_LABELS[kind][which];
+            this.pageHosts.add(area);
+            this.renderHostStory(area, which, kind);
+        }
+        const blocks = Array.from(area.querySelectorAll('[data-anchor][contenteditable="true"]'));
+        if (blocks.length === 0)
+            return;
+        let target = blocks[blocks.length - 1];
+        if (caret === "point" && event) {
+            const hit = event.target?.closest('[data-anchor][contenteditable="true"]');
+            if (hit && area.contains(hit))
+                target = hit;
+            const doc = area.ownerDocument;
+            const point = caretFromPoint(doc, event.clientX, event.clientY);
+            if (point && target.contains(point.node)) {
+                const sel = doc.getSelection();
+                const range = doc.createRange();
+                range.setStart(point.node, point.offset);
+                range.collapse(true);
+                sel?.removeAllRanges();
+                sel?.addRange(range);
+                target.focus({ preventScroll: true });
+                return;
+            }
+        }
+        placeCaretAtEnd(target);
+    }
+    /** The full body anchor of the first anchored block on `page`, walking back to earlier pages. */
+    bodyAnchorForPage(page) {
+        let box = page;
+        while (box) {
+            const block = box.querySelector(".page-content [data-anchor]");
+            const unid = block?.getAttribute("data-anchor");
+            const id = unid ? this.callbacks.bodyAnchorIdOf(unid) : undefined;
+            if (id)
+                return id;
+            box = box.previousElementSibling;
+        }
+        return null;
+    }
+    /** Render the live story into a page host (replacing the paginator's clone). */
+    renderHostStory(host, which, kind) {
+        let body = host.querySelector(":scope > [data-hf-body]");
+        if (!body) {
+            host.replaceChildren();
+            body = host.ownerDocument.createElement("div");
+            body.className = "docx-hf-body";
+            body.setAttribute("data-hf-body", "");
+            host.appendChild(body);
+        }
+        const partUri = this.partUriFor(which, kind);
+        if (!partUri) {
+            // The page shows nothing because the story does not exist; Word still lets you click into
+            // the margin and type. Seed it and render the empty paragraph.
+            this.seedStory(which, kind);
+        }
+        this.fillStoryBody(body, which, kind);
+        this.substituteFields(host);
+    }
+    /** Repaint the page story `which` (active host first, then every clone of the same story). */
+    repaintPageStory(which) {
+        const host = this.activeHost && this.whichOf(this.activeHost) === which ? this.activeHost : null;
+        if (host) {
+            const body = host.querySelector(":scope > [data-hf-body]");
+            if (body)
+                this.fillStoryBody(body, which, this.kindOf(which));
+            this.substituteFields(host);
+            this.propagate(host);
+            return;
+        }
+        // No live host for this story — page clones carry the paginator's render; nothing to do
+        // until the next remount picks the change up.
+    }
+    /** Mirror a live host's story onto every other page area showing the same story. */
+    propagate(host) {
+        if (!this.pageRoot)
+            return;
+        const which = this.whichOf(host);
+        const kind = host.dataset.hfType ?? "default";
+        const partUri = this.partUriFor(which, kind);
+        const sourceBody = host.querySelector(":scope > [data-hf-body]");
+        if (!sourceBody)
+            return;
+        const sectionParts = new Map();
+        for (const area of Array.from(this.pageRoot.querySelectorAll(`.page-${which}`))) {
+            if (area === host)
+                continue;
+            if ((area.dataset.hfType ?? "default") !== kind)
+                continue;
+            const page = area.closest(".page-box");
+            if (!page)
+                continue;
+            const sectionIndex = page.dataset.sectionIndex ?? "0";
+            let part = sectionParts.get(sectionIndex);
+            if (part === undefined) {
+                const anchor = this.bodyAnchorForPage(page);
+                const info = anchor ? this.readSectionInfo(anchor) : null;
+                const refs = (which === "header" ? info?.headerRefs : info?.footerRefs) ?? [];
+                part = refs.find((r) => r.kind === kind)?.partUri ?? null;
+                sectionParts.set(sectionIndex, part);
+            }
+            if (!partUri || part !== partUri)
+                continue;
+            if (this.pageHosts.has(area)) {
+                // Another page already holds a live copy of this story: re-render it from truth too.
+                const body = area.querySelector(":scope > [data-hf-body]");
+                if (body)
+                    this.fillStoryBody(body, which, kind);
+            }
+            else {
+                area.replaceChildren();
+                for (const child of Array.from(sourceBody.children))
+                    area.appendChild(inertClone(child));
+            }
+            this.substituteFields(area);
+        }
+    }
+    /** Substitute PAGE / NUMPAGES markers in a page area from the page's own numbering. */
+    substituteFields(area) {
+        const page = area.closest(".page-box");
+        if (!page || !this.pageRoot)
+            return;
+        const total = this.pageRoot.querySelectorAll(".page-box:not([data-section-filler])").length;
+        const displayed = parseInt(page.dataset.displayedPageNumber || page.dataset.pageNumber || "1", 10);
+        const format = this.sectionInfo?.pageNumberFormat;
+        for (const marker of Array.from(area.querySelectorAll("[data-field]"))) {
+            const kind = marker.dataset.field;
+            if (kind !== "PAGE" && kind !== "NUMPAGES")
+                continue;
+            // Keep the session's cached result on the element: the editor's offset space counts THAT,
+            // not the per-page number shown here, so a later edit diffs against the right text.
+            if (marker.dataset.fieldCached === undefined)
+                marker.dataset.fieldCached = marker.textContent ?? "";
+            marker.textContent = formatPageNumber(kind === "PAGE" ? displayed : total, marker.dataset.fieldFormat ?? format);
+        }
+    }
+    deactivateHost(host) {
+        host.removeAttribute("data-hf-active");
+        if (!this.pageHosts.has(host))
+            return;
+        host.style.overflow = "hidden";
+        // The story may have grown past the band the paginator reserved for it; re-flow the pages
+        // rather than clip it (Word pushes the body down).
+        const body = host.querySelector(":scope > [data-hf-body]");
+        // A couple of pixels of slack: the paginator measured the story in a detached box, and
+        // sub-pixel rounding between that and the live host must not read as growth.
+        if (body && body.scrollHeight > host.clientHeight + 3) {
+            this.callbacks.remount();
+        }
     }
     // ─── section + anchor resolution ─────────────────────────────────────
     readSectionInfo(bodyAnchorId) {
         try {
-            const raw = this.bridge.GetSectionInfo(this.handle, bodyAnchorId);
-            const parsed = JSON.parse(raw);
+            const parsed = JSON.parse(this.bridge.GetSectionInfo(this.handle, bodyAnchorId));
             return parsed && typeof parsed.sectionUnid === "string" ? parsed : null;
         }
         catch {
             return null;
         }
     }
+    reloadSection() {
+        this.sectionInfo = this.bodyAnchorId ? this.readSectionInfo(this.bodyAnchorId) : null;
+        this.refreshAll();
+    }
     refsFor(which) {
         const info = this.sectionInfo;
         if (!info)
             return [];
         return (which === "header" ? info.headerRefs : info.footerRefs) ?? [];
     }
-    /** The reference supplying `kind` for this band — possibly inherited from an earlier section. */
     refFor(which, kind) {
         return this.refsFor(which).find((r) => r.kind === kind) ?? null;
     }
-    /** URI of the part supplying `kind` for this band, or null when the story doesn't exist. */
     partUriFor(which, kind) {
         return this.refFor(which, kind)?.partUri ?? null;
     }
@@ -246,7 +590,8 @@ export class HeaderFooterRegion {
     storyAnchors(partUri) {
         let index;
         try {
-            index = JSON.parse(this.bridge.Project(this.handle)).anchorIndex;
+            const raw = this.bridge.ListAnchors ? this.bridge.ListAnchors(this.handle) : this.bridge.Project(this.handle);
+            index = JSON.parse(raw).anchorIndex;
         }
         catch {
             return [];
@@ -255,11 +600,7 @@ export class HeaderFooterRegion {
             .filter(([, t]) => t.partUri === partUri && STORY_BLOCK_KINDS.has(t.kind))
             .map(([id]) => id);
     }
-    /**
-     * Create an empty story for `kind`. Seeding happens the moment a kind is selected rather than
-     * lazily on first keystroke: an absent story renders no contenteditable element, so there
-     * would be nothing to click into.
-     */
+    /** Create an empty story for `kind` so there is a paragraph to click into. */
     seedStory(which, kind) {
         if (!this.bodyAnchorId)
             return;
@@ -267,178 +608,106 @@ export class HeaderFooterRegion {
         const res = parseResult(set(this.handle, this.bodyAnchorId, kind, ""));
         if (!res.success)
             return;
-        // A new part changes the projection (fresh hdr{N}/ftr{N} scope) and the section's refs.
         this.callbacks.refreshAnchorMap();
         this.sectionInfo = this.readSectionInfo(this.bodyAnchorId);
     }
-    // ─── rendering ───────────────────────────────────────────────────────
-    bandFor(which) {
-        return which === "header" ? this.headerBand : this.footerBand;
-    }
+    // ─── continuous view: bands ──────────────────────────────────────────
     buildBand(which) {
         const band = document.createElement("div");
         band.className = "docx-hf-band";
         band.setAttribute("data-hf-band", which);
-        const chrome = document.createElement("div");
-        chrome.className = "docx-hf-chrome";
+        const tag = document.createElement("div");
+        tag.className = "docx-hf-tag";
         const label = document.createElement("span");
         label.className = "docx-hf-label";
-        label.textContent = which === "header" ? "Header" : "Footer";
-        chrome.appendChild(label);
-        const kindSelect = document.createElement("select");
-        kindSelect.setAttribute("data-hf-kind", "");
-        kindSelect.title = "Which header/footer story to edit";
-        for (const k of KIND_LABELS) {
-            const opt = document.createElement("option");
-            opt.value = k.value;
-            opt.textContent = k.label;
-            kindSelect.appendChild(opt);
-        }
-        kindSelect.addEventListener("change", () => this.setKind(which, kindSelect.value));
-        chrome.appendChild(kindSelect);
-        const pageNum = document.createElement("select");
-        pageNum.setAttribute("data-hf-pagenum", "");
-        pageNum.title = "Insert a page-number field into the focused story paragraph";
-        for (const o of [
-            { value: "", label: "Page №…" },
-            { value: "currentPage", label: "Page number" },
-            { value: "totalPages", label: "Total pages" },
-        ]) {
-            const opt = document.createElement("option");
-            opt.value = o.value;
-            opt.textContent = o.label;
-            pageNum.appendChild(opt);
-        }
-        // The <select> steals focus from the story paragraph, collapsing the caret, so the target
-        // is resolved from the band's own blocks rather than from the editor's live selection.
-        pageNum.addEventListener("change", () => {
-            const field = pageNum.value;
-            pageNum.value = "";
-            if (field !== "currentPage" && field !== "totalPages")
-                return;
-            const target = this.pageNumberTarget(which);
-            if (target)
-                this.insertPageNumber(which, target, field);
-        });
-        chrome.appendChild(pageNum);
-        // Word's "Format Page Numbers…": these are SECTION properties (w:pgNumType), not properties of
-        // this band's story, so both bands show the same values and either can set them. An inserted
-        // page-number field is plain, so it renders through whatever is chosen here.
-        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";
-        // Commit on blur/Enter, not on every keystroke: typing "12" would otherwise apply a start of 1
-        // first, and each apply is an undo step.
-        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", "");
-        inheritedNote.hidden = true;
-        chrome.appendChild(inheritedNote);
-        band.appendChild(chrome);
-        const warning = document.createElement("div");
-        warning.className = "docx-hf-warning";
-        warning.setAttribute("data-hf-warning", "");
-        warning.hidden = true;
-        band.appendChild(warning);
+        label.setAttribute("data-hf-label", "");
+        label.textContent = KIND_LABELS.default[which];
+        tag.appendChild(label);
+        const kinds = document.createElement("span");
+        kinds.className = "docx-hf-kinds";
+        kinds.setAttribute("data-hf-kinds", "");
+        kinds.hidden = true;
+        tag.appendChild(kinds);
+        const note = document.createElement("span");
+        note.className = "docx-hf-inherited";
+        note.setAttribute("data-hf-inherited-note", "");
+        note.hidden = true;
+        tag.appendChild(note);
+        band.appendChild(tag);
         const body = document.createElement("div");
         body.className = "docx-hf-body";
         body.setAttribute("data-hf-body", "");
         band.appendChild(body);
         return band;
     }
-    /**
-     * Which story paragraph a page-number insert targets: the last one the user focused in this
-     * band if it is still attached, else the band's last paragraph (Word's convention — the page
-     * number goes at the end of the footer line).
-     */
+    /** Which story paragraph a page-number insert targets: the focused one, else the last. */
     pageNumberTarget(which) {
-        const body = this.bandFor(which).querySelector("[data-hf-body]");
+        const host = this.pageRoot
+            ? (this.activeHost && this.whichOf(this.activeHost) === which ? this.activeHost : null)
+            : (which === "header" ? this.headerBand : this.footerBand);
+        const body = host?.querySelector("[data-hf-body]");
         if (!body)
             return null;
         const focused = body.querySelector('[data-hf-focused="true"][data-hf-anchor]');
         const blocks = Array.from(body.querySelectorAll("[data-hf-anchor]"));
-        const target = focused ?? blocks[blocks.length - 1];
-        return target?.getAttribute("data-hf-anchor") ?? null;
+        return (focused ?? blocks[blocks.length - 1])?.getAttribute("data-hf-anchor") ?? null;
     }
     renderBand(which) {
-        const band = this.bandFor(which);
+        const band = which === "header" ? this.headerBand : this.footerBand;
         const body = band.querySelector("[data-hf-body]");
         if (!body)
             return;
         const kind = this.kinds[which];
-        const select = band.querySelector("[data-hf-kind]");
-        if (select && select.value !== kind)
-            select.value = kind;
-        // Section-level page numbering — the same values on both bands, seeded from the live sectPr so
-        // the chrome reports what the document says rather than what was last clicked.
-        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 === undefined ? "" : String(start);
+        const label = band.querySelector("[data-hf-label]");
+        if (label)
+            label.textContent = KIND_LABELS[kind][which];
+        // The story switcher shows only when there is more than one story to switch between.
+        const kinds = band.querySelector("[data-hf-kinds]");
+        if (kinds) {
+            const available = this.availableKinds(which);
+            kinds.hidden = available.length < 2;
+            kinds.replaceChildren();
+            for (const k of available) {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.setAttribute("data-hf-kind", k);
+                button.textContent =
+                    k === "default"
+                        ? (this.kindEnabled("even") ? "Odd pages" : "All pages")
+                        : k === "first" ? "First page" : "Even pages";
+                button.toggleAttribute("data-on", k === kind);
+                button.addEventListener("mousedown", (e) => e.preventDefault());
+                button.addEventListener("click", () => this.setKind(which, k));
+                kinds.appendChild(button);
+            }
         }
-        // A section that declares no reference of this kind shows the story it inherits from an
-        // earlier section. Say so: editing it changes BOTH sections, because they share one part.
         const inherited = this.refFor(which, kind)?.inherited === true;
         band.toggleAttribute("data-hf-inherited", inherited);
         const note = band.querySelector("[data-hf-inherited-note]");
         if (note) {
             note.hidden = !inherited;
-            note.textContent = inherited ? "inherited from an earlier section" : "";
+            note.textContent = inherited ? "Same as previous section" : "";
         }
-        this.renderKindWarning(which);
+        this.fillStoryBody(body, which, kind);
+    }
+    /** Render the story's paragraphs into `body` (a placeholder when there is no story yet). */
+    fillStoryBody(body, which, kind) {
+        // A repaint replaces the story's nodes; if the caret was in one of them, put it back at the
+        // end of the story (where a page-number field just landed) instead of dropping it.
+        const hadFocus = body.contains(body.ownerDocument.activeElement);
         body.innerHTML = "";
+        const band = body.closest("[data-hf-band]");
         const partUri = this.partUriFor(which, kind);
-        if (!partUri) {
-            body.appendChild(this.placeholder(which, kind));
-            band.setAttribute("data-hf-empty", "true");
-            return;
-        }
-        band.removeAttribute("data-hf-empty");
-        const anchors = this.storyAnchors(partUri);
+        const anchors = partUri ? this.storyAnchors(partUri) : [];
         if (anchors.length === 0) {
             body.appendChild(this.placeholder(which, kind));
+            band?.setAttribute("data-hf-empty", "true");
             return;
         }
+        band?.removeAttribute("data-hf-empty");
+        let last = null;
         for (const anchorId of anchors) {
-            const el = this.renderStoryBlock(anchorId);
+            const el = this.callbacks.renderBlock(anchorId);
             if (!el)
                 continue;
             body.appendChild(el);
@@ -446,13 +715,15 @@ export class HeaderFooterRegion {
             // because a story paragraph's content-addressed unid can collide with another part's.
             this.adoptBlock(el, anchorId);
             this.callbacks.wireBlock(el);
+            last = el;
         }
+        if (hadFocus && last)
+            placeCaretAtEnd(last);
     }
     /**
      * Mark a story paragraph as belonging to this region. The full anchor id is stamped alongside
-     * `data-anchor` (which carries only the bare unid, matching the body's convention) so band
-     * chrome can address the block without going through the editor's unid map. Called on first
-     * render AND after an incremental swap, which replaces the DOM node.
+     * `data-anchor` (which carries only the bare unid) so chrome can address the block without
+     * going through the editor's unid map. Called on first render AND after an incremental swap.
      */
     adoptBlock(el, anchorId) {
         const body = this.blockRootOf(el);
@@ -463,62 +734,57 @@ export class HeaderFooterRegion {
             return;
         el.dataset.hfAdopted = "true";
         el.addEventListener("focus", () => {
-            body
-                .querySelectorAll("[data-hf-focused]")
-                .forEach((sib) => sib.removeAttribute("data-hf-focused"));
+            body.querySelectorAll("[data-hf-focused]").forEach((sib) => sib.removeAttribute("data-hf-focused"));
             el.setAttribute("data-hf-focused", "true");
         });
     }
-    renderStoryBlock(anchorId) {
-        const html = this.bridge.RenderBlockHtml(this.handle, anchorId, this.options.cssPrefix, this.options.fabricateClasses);
-        if (html.charCodeAt(0) === 0x7b /* error object */)
-            return null;
-        return new DOMParser().parseFromString(html, "text/html").body
-            .firstElementChild;
-    }
     placeholder(which, kind) {
         const el = document.createElement("div");
         el.className = "docx-hf-placeholder";
         el.setAttribute("data-hf-placeholder", "");
-        const label = KIND_LABELS.find((k) => k.value === kind)?.label ?? kind;
-        el.textContent = `No ${label.toLowerCase()} ${which} — pick a kind to create one.`;
-        return el;
-    }
-    /**
-     * Surface the caveat that comes with the selected kind. Turning on first/even means those pages
-     * stop using the Default stories entirely, which bites hardest on the OTHER band: enabling an
-     * even header with no even footer leaves even pages footer-less, and enabling a first-page
-     * header with an empty first-page footer leaves page 1 footer-less. The note is shown whenever
-     * first/even is selected (the behavior change is real either way); the fix button appears only
-     * when the counterpart story is missing entirely, which is what a user almost always wants next.
-     */
-    renderKindWarning(which) {
-        const band = this.bandFor(which);
-        const warning = band.querySelector("[data-hf-warning]");
-        if (!warning)
-            return;
-        const kind = this.kinds[which];
-        if (kind === "default") {
-            warning.hidden = true;
-            warning.textContent = "";
-            return;
-        }
-        const other = which === "header" ? "footer" : "header";
-        warning.hidden = false;
-        warning.textContent = `${kind === "even" ? EVEN_WARNING : FIRST_WARNING} `;
-        if (this.partUriFor(other, kind))
-            return; // counterpart exists — nothing to offer
-        const fix = document.createElement("button");
-        fix.type = "button";
-        fix.setAttribute("data-hf-fix-counterpart", "");
-        fix.textContent = `Also create a ${kind === "even" ? "matching even" : "first-page"} ${other}`;
-        fix.addEventListener("click", () => {
-            this.setKind(other, kind);
-            this.renderKindWarning(which);
+        el.textContent = `No ${KIND_LABELS[kind][which].toLowerCase()} yet — click here to add one.`;
+        el.addEventListener("mousedown", (event) => {
+            event.preventDefault();
+            if (!this.bodyAnchorId)
+                return;
+            this.seedStory(which, kind);
+            this.refresh(which);
+            const block = el.parentElement?.querySelector('[data-anchor][contenteditable="true"]');
+            if (block)
+                placeCaretAtEnd(block);
         });
-        warning.appendChild(fix);
+        return el;
     }
 }
+/** A presentation-only copy of a live story block for another page. */
+function inertClone(el) {
+    const clone = el.cloneNode(true);
+    for (const node of [clone, ...Array.from(clone.querySelectorAll("*"))]) {
+        for (const attr of LIVE_BLOCK_ATTRS)
+            node.removeAttribute(attr);
+    }
+    return clone;
+}
+function placeCaretAtEnd(el) {
+    const doc = el.ownerDocument;
+    el.focus({ preventScroll: true });
+    const sel = doc.getSelection();
+    if (!sel)
+        return;
+    const range = doc.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+function caretFromPoint(doc, x, y) {
+    const d = doc;
+    const position = d.caretPositionFromPoint?.(x, y);
+    if (position)
+        return { node: position.offsetNode, offset: position.offset };
+    const range = d.caretRangeFromPoint?.(x, y);
+    return range ? { node: range.startContainer, offset: range.startOffset } : null;
+}
 function parseResult(json) {
     try {
         return JSON.parse(json);