docxodus 12.2.0 → 12.4.0

package/dist/embed.iife.js

@@ -148,6 +148,7 @@ var Docxodus = (() => {
     DocxHistoryReader: () => DocxHistoryReader,
     DocxSession: () => DocxSession,
     EmptyParagraphMode: () => EmptyParagraphMode,
+    HistoryCheckpoints: () => HistoryCheckpoints,
     MAX_HISTORY_ARCHIVE_BYTES: () => MAX_HISTORY_ARCHIVE_BYTES,
     PaginationEngine: () => PaginationEngine,
     PaginationMode: () => PaginationMode,
@@ -207,6 +208,7 @@ var Docxodus = (() => {
     getVersion: () => getVersion,
     getWasmExports: () => getWasmExports,
     hasAnnotations: () => hasAnnotations,
+    historyControlError: () => historyControlError,
     initialize: () => initialize,
     installHistoryStorageImports: () => installHistoryStorageImports,
     isDeletion: () => isDeletion,
@@ -214,11 +216,13 @@ var Docxodus = (() => {
     isInitialized: () => isInitialized,
     isInsertion: () => isInsertion,
     isMove: () => isMove,
+    mountHistoryControls: () => mountHistoryControls,
     mountRibbon: () => mountRibbon,
     navigateToPageCitation: () => navigateToPageCitation,
     openDocxHistory: () => openDocxHistory,
     openDocxHistoryArchive: () => openDocxHistoryArchive,
     openDocxSession: () => openDocxSession2,
+    openIndexedDbHistoryStore: () => openIndexedDbHistoryStore,
     paginateHtml: () => paginateHtml,
     parseSectionDimensions: () => parseSectionDimensions,
     projectAnnotationsOntoHtml: () => projectAnnotationsOntoHtml,
@@ -2412,7 +2416,7 @@ var Docxodus = (() => {
       return `${reference.digest.value}:${reference.length}`;
     };
     const equalReference = (a, b) => a.length === b.length && a.digest.algorithm === b.digest.algorithm && a.digest.value === b.digest.value;
-    const equalHead = (a, b) => a === null || b === null ? a === b : a.revision === b.revision && equalReference(a.state, b.state);
+    const equalHead2 = (a, b) => a === null || b === null ? a === b : a.revision === b.revision && equalReference(a.state, b.state);
     return {
       async readBlob(reference) {
         return blobs.get(key(reference))?.slice() ?? null;
@@ -2434,7 +2438,7 @@ var Docxodus = (() => {
       async advanceHead(documentId, expected, state) {
         key(state);
         const current = heads.get(documentId) ?? null;
-        if (!equalHead(current, expected)) return null;
+        if (!equalHead2(current, expected)) return null;
         const revision = BigInt(current?.revision ?? "0") + 1n;
         if (revision > 9223372036854775807n) throw new RangeError("History revision exhausted.");
         const head = { revision: String(revision), state: copy(state) };
@@ -2454,6 +2458,627 @@ var Docxodus = (() => {
     };
   }
 
+  // src/history-checkpoints.ts
+  var HistoryCheckpoints = class _HistoryCheckpoints {
+    constructor(document2, journal) {
+      this.document = document2;
+      this.journal = journal;
+      this.current = null;
+      this.request = null;
+      this.running = false;
+      this.stale = false;
+    }
+    /** Pass an already captured view when opening its exact version in an editor (for example, after import). */
+    static async open(document2, journal, view) {
+      const controls = new _HistoryCheckpoints(document2, journal);
+      controls.request = structuredClone(await journal.read());
+      if (controls.request && controls.request.documentId !== document2.documentId)
+        throw new DocxHistoryError("InvalidRequest", "The pending checkpoint belongs to another document.");
+      controls.current = view === void 0 ? await document2.read() : structuredClone(view);
+      if (controls.current && controls.current.state.documentId !== document2.documentId)
+        throw new DocxHistoryError("InvalidRequest", "The captured view belongs to another document.");
+      return controls;
+    }
+    get view() {
+      return structuredClone(this.current);
+    }
+    get hasPending() {
+      return this.request !== null;
+    }
+    /** Snapshot of the exact request a retry will recover, including its original operation kind. */
+    get pendingRequest() {
+      return structuredClone(this.request);
+    }
+    get needsRefresh() {
+      return this.stale;
+    }
+    async refresh() {
+      return this.exclusive(async () => {
+        this.current = await this.document.read();
+        this.stale = false;
+        return this.view;
+      });
+    }
+    async save(bytes, metadata) {
+      return this.start({
+        kind: "save",
+        head: this.current?.head ?? null,
+        bytes,
+        id: crypto.randomUUID(),
+        documentId: this.document.documentId,
+        metadata
+      });
+    }
+    async restore(target, metadata) {
+      if (!this.current) throw new DocxHistoryError("NotFound", "Save a checkpoint before restoring a version.");
+      return this.start({
+        kind: "restore",
+        head: this.current.head,
+        target,
+        id: crypto.randomUUID(),
+        documentId: this.document.documentId,
+        metadata
+      });
+    }
+    async retry() {
+      return this.exclusive(async () => {
+        if (!this.request) throw new DocxHistoryError("InvalidRequest", "There is no pending checkpoint.");
+        return this.publish();
+      });
+    }
+    async start(request) {
+      return this.exclusive(async () => {
+        if (this.request) throw new DocxHistoryError("PendingRequest", "Retry the pending checkpoint first.");
+        if (this.stale) throw new DocxHistoryError("StaleHead", "Refresh history before saving again.");
+        this.request = structuredClone(request);
+        return this.publish();
+      });
+    }
+    async publish() {
+      const intended = this.request;
+      const request = await this.journal.put(structuredClone(intended));
+      this.request = structuredClone(request);
+      if (request.id !== intended.id)
+        throw new DocxHistoryError("PendingRequest", "Another tab has a pending checkpoint. Retry it before saving your draft.");
+      let view;
+      try {
+        view = request.kind === "save" ? await this.document.createVersion(request.head, request.bytes, request.metadata, request.id) : await this.document.restoreVersion(request.head, request.target, request.metadata, request.id);
+      } catch (error) {
+        if (error instanceof DocxHistoryError && error.code === "StaleHead") {
+          this.stale = true;
+          await this.journal.remove(request.id);
+          this.request = null;
+        }
+        throw error;
+      }
+      this.current = view;
+      await this.journal.remove(request.id);
+      this.request = null;
+      return this.view;
+    }
+    async exclusive(action) {
+      if (this.running) throw new DocxHistoryError("Busy", "A history command is still running.");
+      this.running = true;
+      try {
+        return await action();
+      } finally {
+        this.running = false;
+      }
+    }
+  };
+
+  // src/history-indexeddb.ts
+  async function openIndexedDbHistoryStore(name) {
+    const db = await new Promise((resolve, reject) => {
+      let blocked = false;
+      const request = indexedDB.open(name, 1);
+      request.onupgradeneeded = () => {
+        for (const store of ["blobs", "heads", "requests"]) request.result.createObjectStore(store);
+      };
+      request.onsuccess = () => {
+        if (blocked) request.result.close();
+        else resolve(request.result);
+      };
+      request.onerror = () => reject(request.error);
+      request.onblocked = () => {
+        blocked = true;
+        reject(new Error("Close other tabs using this history store, then try again."));
+      };
+    });
+    db.onversionchange = () => db.close();
+    function transaction(name2, mode, action) {
+      return new Promise((resolve, reject) => {
+        const tx = db.transaction(name2, mode);
+        let value;
+        tx.oncomplete = () => resolve(value);
+        tx.onabort = () => reject(tx.error ?? new Error("History storage transaction was aborted."));
+        try {
+          action(tx.objectStore(name2), (result) => {
+            value = result;
+          });
+        } catch (error) {
+          tx.abort();
+          reject(error);
+        }
+      });
+    }
+    const storage = {
+      readBlob(reference) {
+        const key = referenceKey(reference);
+        return transaction("blobs", "readonly", (store, result) => {
+          store.get(key).onsuccess = (event) => result(event.target.result ?? null);
+        });
+      },
+      async putBlob(reference, bytes) {
+        const key = referenceKey(reference);
+        const captured = bytes.slice();
+        if (captured.length !== reference.length) throw new DocxHistoryError("PayloadMismatch", "Stored document length does not match its reference.");
+        const hash = Array.from(
+          new Uint8Array(await crypto.subtle.digest("SHA-256", captured)),
+          (byte) => byte.toString(16).padStart(2, "0")
+        ).join("");
+        if (hash !== key.split(":")[0])
+          throw new DocxHistoryError("PayloadMismatch", "Stored document bytes do not match their reference.");
+        await transaction("blobs", "readwrite", (store, result) => {
+          store.put(captured, key);
+          result();
+        });
+      },
+      readHead(documentId) {
+        return transaction("heads", "readonly", (store, result) => {
+          store.get(documentId).onsuccess = (event) => result(event.target.result ?? null);
+        });
+      },
+      advanceHead(documentId, expected, state) {
+        referenceKey(state);
+        const captured = structuredClone({ expected, state });
+        if (expected) validateHead(expected);
+        const revision = BigInt(expected?.revision ?? "0") + 1n;
+        if (revision > 9223372036854775807n) throw new RangeError("History revision exhausted.");
+        return transaction("heads", "readwrite", (store, result) => {
+          store.get(documentId).onsuccess = (event) => {
+            const current = event.target.result ?? null;
+            if (!equalHead(current, captured.expected)) {
+              result(null);
+              return;
+            }
+            const head = { revision: String(revision), state: captured.state };
+            store.put(head, documentId);
+            result(head);
+          };
+        });
+      },
+      initializeHead(documentId, head) {
+        validateHead(head);
+        const captured = structuredClone(head);
+        return transaction("heads", "readwrite", (store, result) => {
+          store.get(documentId).onsuccess = (event) => {
+            const existing = event.target.result;
+            if (existing) {
+              result({ initialized: false, head: existing });
+              return;
+            }
+            store.put(captured, documentId);
+            result({ initialized: true, head: captured });
+          };
+        });
+      }
+    };
+    return {
+      storage,
+      journal(documentId) {
+        return {
+          read: () => transaction("requests", "readonly", (store, result) => {
+            store.get(documentId).onsuccess = (event) => result(event.target.result ?? null);
+          }),
+          put(request) {
+            if (request.documentId !== documentId) throw new Error("Checkpoint document identity does not match.");
+            const captured = structuredClone(request);
+            return transaction("requests", "readwrite", (store, result) => {
+              store.get(documentId).onsuccess = (event) => {
+                const existing = event.target.result;
+                if (existing) {
+                  result(existing);
+                  return;
+                }
+                store.put(captured, documentId);
+                result(captured);
+              };
+            });
+          },
+          remove(requestId) {
+            return transaction("requests", "readwrite", (store, result) => {
+              store.get(documentId).onsuccess = (event) => {
+                if (event.target.result?.id === requestId) store.delete(documentId);
+                result();
+              };
+            });
+          }
+        };
+      },
+      close: () => db.close()
+    };
+  }
+  function referenceKey(reference) {
+    if (reference.digest.algorithm !== "SHA-256" || !/^[a-f0-9]{64}$/.test(reference.digest.value) || !Number.isSafeInteger(reference.length) || reference.length < 0)
+      throw new DocxHistoryError("InvalidRequest", "Invalid history blob reference.");
+    return `${reference.digest.value}:${reference.length}`;
+  }
+  function validateHead(head) {
+    referenceKey(head.state);
+    if (typeof head.revision !== "string" || !/^[1-9][0-9]*$/.test(head.revision) || BigInt(head.revision) > 9223372036854775807n)
+      throw new DocxHistoryError("InvalidRequest", "Invalid history revision.");
+  }
+  function equalHead(a, b) {
+    return a === null || b === null ? a === b : a.revision === b.revision && a.state.length === b.state.length && a.state.digest.algorithm === b.state.digest.algorithm && a.state.digest.value === b.state.digest.value;
+  }
+
+  // src/history-controls.ts
+  function mountHistoryControls(container, options) {
+    const pageSize = options.pageSize ?? 25;
+    if (!Number.isInteger(pageSize) || pageSize < 1 || pageSize > 100) throw new RangeError("History page size must be 1\u2013100.");
+    if (options.checkpoints && options.checkpoints.document !== options.reader)
+      throw new Error("History controls and checkpoints must use the same document.");
+    return new HistoryPanel(container, options, pageSize);
+  }
+  var HistoryPanel = class {
+    constructor(container, options, pageSize) {
+      this.options = options;
+      this.pageSize = pageSize;
+      this.actions = /* @__PURE__ */ new Map();
+      this.events = new AbortController();
+      this.records = [];
+      this.next = null;
+      this.view = null;
+      this.active = null;
+      this.destroyed = false;
+      const doc = container.ownerDocument;
+      this.element = doc.createElement("section");
+      this.element.className = "dx-history";
+      this.element.setAttribute("aria-label", "Version history");
+      const style = doc.createElement("style");
+      style.textContent = HISTORY_CSS;
+      const title = doc.createElement("h2");
+      title.textContent = "Version history";
+      this.status = doc.createElement("p");
+      this.status.setAttribute("role", "status");
+      this.status.setAttribute("aria-live", "polite");
+      this.fieldset = doc.createElement("fieldset");
+      const legend = doc.createElement("legend");
+      legend.textContent = "Saved versions";
+      this.fieldset.append(legend);
+      this.element.append(style, title, this.status, this.fieldset);
+      container.append(this.element);
+      const note = doc.createElement("p");
+      note.dataset.historyExisting = "";
+      note.textContent = options.checkpoints ? "Browse saved versions without changing your draft." : "Read-only history. Preview or download any saved version.";
+      this.fieldset.append(note);
+      this.button("refresh", "Refresh history", () => this.load(true));
+      this.button("latest", "Preview latest", async () => this.preview(await options.reader.exportDocx(), "Latest saved version"));
+      this.versions = this.select("Version");
+      this.versions.size = 6;
+      this.detail = doc.createElement("p");
+      this.fieldset.append(this.detail);
+      this.versions.addEventListener("change", () => this.update(), { signal: this.events.signal });
+      this.button("preview", "Preview selected", async () => this.preview(await options.reader.exportDocx(this.selected().id), versionTitle(this.selected())));
+      this.button("download", "Download selected", async () => this.download(await options.reader.exportDocx(this.selected().id), `version-${this.selected().record.sequence}.docx`));
+      const comparison = this.disclosure("Compare versions");
+      this.before = this.select("Compare from", comparison);
+      this.before.addEventListener("change", () => this.update(), { signal: this.events.signal });
+      const compareNote = doc.createElement("p");
+      compareNote.textContent = "Compare from this version to the selected version above.";
+      comparison.append(compareNote);
+      this.button("compare", "Compare versions", async () => {
+        const before = this.records[Number(this.before.value)];
+        await this.preview(await options.reader.compareVersions(before.id, this.selected().id), "Comparison with tracked changes");
+      }, comparison);
+      this.button("more", "Load older versions", async () => {
+        if (this.next) await this.page(this.next, false);
+      });
+      const saveGroup = doc.createElement("div");
+      saveGroup.className = "dx-history-save";
+      this.fieldset.insertBefore(saveGroup, note);
+      const attribution = doc.createElement("details");
+      const attributionTitle = doc.createElement("summary");
+      attributionTitle.textContent = "Saved by";
+      attribution.append(attributionTitle);
+      saveGroup.append(attribution);
+      this.author = this.input("Your name", "text", options.author ?? "You", attribution);
+      this.label = this.input("Version name (optional)", "text", "", saveGroup);
+      saveGroup.hidden = !options.checkpoints;
+      this.author.parentElement.hidden = this.label.parentElement.hidden = !options.checkpoints;
+      this.button("save", "Save version", async () => {
+        const view = await options.checkpoints.save(await options.capture(), this.metadata());
+        await options.onCheckpoint?.(view, "save");
+        await this.load(false);
+        this.label.value = "";
+        this.status.textContent = "Version saved. Your draft remains open.";
+      }, saveGroup);
+      saveGroup.append(attribution);
+      this.button("restore", "Restore selected", async () => {
+        const version = this.selected();
+        const confirmed = options.confirmRestore ? await options.confirmRestore(versionTitle(version)) : doc.defaultView?.confirm(`Restore ${versionTitle(version)} as a new saved version?
+
+Your current draft and all later versions will be kept.`);
+        if (!confirmed) {
+          this.status.textContent = "Restore canceled. Your draft and history are unchanged.";
+          return;
+        }
+        const view = await options.checkpoints.restore(version.id, this.metadata());
+        await options.onCheckpoint?.(view, "restore");
+        await this.load(false);
+        this.status.textContent = options.restoreUpdatesDraft ? "Version restored. All saved versions are kept." : "Restored as a new saved version. Your draft and later versions are kept.";
+      });
+      const restoreNote = doc.createElement("p");
+      restoreNote.hidden = !options.checkpoints;
+      if (options.checkpoints) restoreNote.dataset.historyExisting = "";
+      restoreNote.textContent = options.restoreUpdatesDraft ? "Restore returns your document to this version and keeps every saved version." : "Restore creates a new saved version. Preview latest to view it; your draft stays open.";
+      this.fieldset.append(restoreNote);
+      this.button("retry", "Retry save", async () => {
+        const request = options.checkpoints.pendingRequest;
+        if (request?.kind === "restore" && options.confirmRestore) {
+          const target = await options.reader.getVersion(request.target);
+          if (!await options.confirmRestore(versionTitle(target))) {
+            this.status.textContent = "Restore retry canceled. Your draft is unchanged; the saved action still needs recovery.";
+            return;
+          }
+        }
+        const view = await options.checkpoints.retry();
+        await options.onCheckpoint?.(view, "retry", request ?? void 0);
+        await this.load(false);
+        this.status.textContent = request?.kind === "restore" && options.restoreUpdatesDraft ? "Version restored. All saved versions are kept. Refresh history to check for newer versions." : "Saved version recovered. Your draft remains open. Refresh history to check for newer versions.";
+      });
+      const sharing = this.disclosure("Download with history");
+      const sharingNote = doc.createElement("p");
+      sharingNote.textContent = "Includes retained drafts and collaboration proposals. Share this file only when you want to include that history. A DOCX download keeps existing Word comments and revisions, without external history.";
+      sharing.append(sharingNote);
+      this.button("archive", "Download with version history", async () => this.download(await options.reader.exportHistoryArchive(), "docxhistory"), sharing);
+      const portability = doc.createElement("p");
+      portability.textContent = "Saved versions stay on this device. Download a history file to keep a portable copy; clearing browser data removes local versions.";
+      sharing.append(portability);
+      const time = this.disclosure("Find a version by time");
+      const cutoff = this.input("Saved at or before (local time)", "datetime-local", "", time);
+      this.button("time", "Preview at time", async () => {
+        if (!cutoff.value) throw new DocxHistoryError("InvalidRequest", "Choose a date and time first.");
+        const sequence = await options.reader.resolveSequenceAtTime(new Date(cutoff.value).toISOString());
+        await this.preview(await options.reader.materialize(sequence), "Version at selected time");
+      }, time);
+      const activity = this.disclosure("Recorded collaboration");
+      const decisions = doc.createElement("ol");
+      let showOlderActivity = () => {
+      };
+      this.button("activity", "Load activity", async () => {
+        const { operations } = await options.reader.readOperationsSince(null);
+        const resolved = new Set(operations.filter((op) => op.record.status === "accepted").map((op) => op.input.request.resolves?.digest.value));
+        let shown = 0;
+        showOlderActivity = () => {
+          const page = operations.slice(Math.max(0, operations.length - shown - this.pageSize), operations.length - shown).reverse();
+          decisions.append(...page.map((op) => this.activityItem(op, resolved.has(op.id.digest.value))));
+          shown += page.length;
+          this.actions.get("activity-more").hidden = shown >= operations.length;
+        };
+        decisions.replaceChildren();
+        showOlderActivity();
+        this.status.textContent = operations.length ? "Recorded activity loaded." : "No recorded collaboration.";
+      }, activity);
+      activity.append(decisions);
+      this.button("activity-more", "Load older activity", async () => showOlderActivity(), activity);
+      this.actions.get("activity-more").hidden = true;
+      this.ready = this.run("Loading history", () => this.load(false));
+    }
+    refresh() {
+      return this.run("Loading history", () => this.load(true));
+    }
+    async destroy() {
+      this.destroyed = true;
+      this.events.abort();
+      this.element.remove();
+      await this.active?.catch(() => {
+      });
+    }
+    async load(refresh) {
+      this.view = this.options.checkpoints ? refresh ? await this.options.checkpoints.refresh() : this.options.checkpoints.view : await this.options.reader.read();
+      if (this.view) await this.page(this.view.version.id, true);
+      else {
+        this.records = [];
+        this.next = null;
+        this.versions.replaceChildren();
+        this.before.replaceChildren();
+      }
+      this.status.textContent = this.options.checkpoints?.hasPending ? "A save needs recovery. Retry it before saving more changes." : this.view ? "Select a version to preview, download or restore." : "No saved versions yet. Save your first version when you are ready.";
+    }
+    async page(cursor, reset) {
+      const page = await this.options.reader.listVersions(cursor, this.pageSize);
+      if (reset) {
+        this.records = [];
+        this.versions.replaceChildren();
+        this.before.replaceChildren();
+      }
+      const start2 = this.records.length;
+      this.records.push(...page.versions);
+      this.next = page.next;
+      for (let index = start2; index < this.records.length; index++) {
+        for (const select of [this.versions, this.before]) {
+          const option = select.ownerDocument.createElement("option");
+          option.value = String(index);
+          option.textContent = option.title = versionTitle(this.records[index]);
+          select.append(option);
+        }
+      }
+      if (reset) {
+        this.versions.value = "0";
+        this.before.value = this.records.length > 1 ? "1" : "0";
+      }
+    }
+    update() {
+      const hasVersion = this.records.length > 0;
+      const pending = this.options.checkpoints?.hasPending ?? false;
+      const stale = this.options.checkpoints?.needsRefresh ?? false;
+      for (const key of ["latest", "preview", "download", "archive", "time", "activity"]) this.actions.get(key).disabled = !hasVersion;
+      this.actions.get("more").hidden = !this.next;
+      this.actions.get("compare").disabled = !hasVersion || this.before.value === this.versions.value;
+      this.actions.get("save").hidden = !this.options.checkpoints || !this.options.capture;
+      this.actions.get("save").disabled = pending || stale;
+      this.actions.get("restore").hidden = !this.options.checkpoints;
+      this.actions.get("restore").disabled = !hasVersion || pending || stale;
+      this.actions.get("retry").hidden = !pending;
+      this.versions.parentElement.hidden = this.detail.hidden = !hasVersion;
+      this.versions.size = Math.max(2, Math.min(6, this.records.length));
+      for (const key of ["latest", "preview", "download"]) this.actions.get(key).hidden = !hasVersion;
+      this.actions.get("restore").hidden = !hasVersion || !this.options.checkpoints;
+      for (const element of Array.from(this.element.querySelectorAll("[data-history-existing]"))) element.hidden = !hasVersion;
+      this.detail.textContent = hasVersion ? [
+        versionTitle(this.selected()),
+        this.selected().record.metadata.message,
+        this.selected().record.restoredFrom ? "Restored from an earlier version." : ""
+      ].filter(Boolean).join(" \u2014 ") : "";
+    }
+    selected() {
+      return this.records[Number(this.versions.value)];
+    }
+    activityItem(op, resolved) {
+      const doc = this.element.ownerDocument;
+      const item = doc.createElement("li");
+      const state = op.record.status === "accepted" ? "Accepted" : resolved ? "Conflict resolved" : "Conflict needs review";
+      const label = doc.createElement("p");
+      label.textContent = `${op.input.request.metadata.author} \xB7 ${state} \xB7 ${formatTime(op.input.request.metadata.createdAt)}`;
+      item.append(label);
+      const description = doc.createElement("p");
+      this.commandButton("View decision", async () => {
+        const decision = await this.options.reader.getOperation(op.id);
+        const { kind, metadata } = decision.input.request;
+        description.textContent = [
+          { text: "Text edit", package: "Document edit", discard: "Discarded proposal" }[kind],
+          metadata.label,
+          metadata.message,
+          decision.record.conflict
+        ].filter(Boolean).join(" \u2014 ");
+      }, item);
+      item.append(description);
+      this.commandButton("Download proposal", async () => {
+        await this.download(await this.options.reader.exportOperationProposal(op.id), `proposal-${op.record.revision}.docx`);
+      }, item);
+      return item;
+    }
+    metadata() {
+      return { author: this.author.value.trim() || "You", createdAt: (/* @__PURE__ */ new Date()).toISOString(), label: this.label.value.trim() || void 0 };
+    }
+    async preview(bytes, title) {
+      if (!this.destroyed) await this.options.preview(bytes, title);
+    }
+    async download(bytes, suffix) {
+      if (this.destroyed) return;
+      const stem = (this.options.documentName ?? "document").replace(/\.(docx|docxhistory)$/i, "");
+      const name = suffix === "docxhistory" ? `${stem}.docxhistory` : `${stem}-${suffix}`;
+      if (this.options.download) {
+        await this.options.download(bytes, name);
+        return;
+      }
+      const url = URL.createObjectURL(new Blob([bytes.slice()], { type: suffix === "docxhistory" ? "application/octet-stream" : "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }));
+      const link = this.element.ownerDocument.createElement("a");
+      link.href = url;
+      link.download = name;
+      link.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1e3);
+    }
+    async run(label, action) {
+      if (this.destroyed) throw new DocxHistoryError("Closed", "History controls are closed.");
+      if (this.active) throw new DocxHistoryError("Busy", "A history command is still running.");
+      this.fieldset.disabled = true;
+      this.element.setAttribute("aria-busy", "true");
+      this.status.textContent = `${label}\u2026`;
+      const work = Promise.resolve().then(action);
+      this.active = work;
+      try {
+        await work;
+        if (this.status.textContent === `${label}\u2026`) this.status.textContent = "Ready.";
+      } catch (error) {
+        if (!this.destroyed) this.status.textContent = historyControlError(error, this.options.checkpoints?.hasPending);
+        throw error;
+      } finally {
+        this.active = null;
+        if (!this.destroyed) {
+          this.fieldset.disabled = false;
+          this.element.setAttribute("aria-busy", "false");
+          this.update();
+        }
+      }
+    }
+    button(key, title, action, parent = this.fieldset) {
+      const button = this.commandButton(title, action, parent);
+      button.dataset.historyAction = key;
+      this.actions.set(key, button);
+    }
+    commandButton(title, action, parent) {
+      const button = parent.ownerDocument.createElement("button");
+      button.type = "button";
+      button.textContent = title;
+      button.addEventListener("click", () => {
+        void this.run(title, action).catch(() => {
+        });
+      }, { signal: this.events.signal });
+      parent.append(button);
+      return button;
+    }
+    select(title, parent = this.fieldset) {
+      const label = this.fieldset.ownerDocument.createElement("label");
+      label.textContent = title;
+      const select = label.ownerDocument.createElement("select");
+      select.setAttribute("aria-label", title);
+      label.append(select);
+      parent.append(label);
+      return select;
+    }
+    input(title, type, value = "", parent = this.fieldset) {
+      const label = parent.ownerDocument.createElement("label");
+      label.textContent = title;
+      const input = label.ownerDocument.createElement("input");
+      input.type = type;
+      input.value = value;
+      label.append(input);
+      parent.append(label);
+      return input;
+    }
+    disclosure(title) {
+      const details = this.fieldset.ownerDocument.createElement("details");
+      details.dataset.historyExisting = "";
+      const summary = details.ownerDocument.createElement("summary");
+      summary.textContent = title;
+      details.append(summary);
+      this.fieldset.append(details);
+      return details;
+    }
+  };
+  function historyControlError(error, pending = false) {
+    const code = error instanceof DocxHistoryError ? error.code : "";
+    if (code === "StaleHead") return "A newer saved version exists. Your draft is safe. Refresh history, review the newer version, then save again.";
+    if (code === "ImportConflict") return "A different local history already exists. Open this file read-only to explore it.";
+    if (code === "InitializationUnsupported") return "This storage cannot import history. Open read-only or choose storage that supports importing.";
+    if (pending) return "The save could not be confirmed. Your draft is safe. Retry save to recover your saved version.";
+    if (code === "ResourceLimit") return "This history file exceeds browser processing limits, which can apply even below 64 MiB. Your document is unchanged.";
+    if (code === "UnsupportedVersion") return "This history file uses an unsupported version. Open it with a newer app. Your document is unchanged.";
+    if (code === "InvalidManifest") return "This history file is damaged or incomplete. Choose another copy. Your document is unchanged.";
+    return `History could not be loaded. Your document is unchanged. ${error instanceof Error ? error.message : "Please try again."}`;
+  }
+  function versionTitle(version) {
+    const { metadata } = version.record;
+    return `${metadata.label || "Saved version"} \xB7 ${metadata.author} \xB7 ${formatTime(metadata.createdAt)}`;
+  }
+  function formatTime(value) {
+    const time = new Date(value);
+    return Number.isNaN(time.getTime()) ? value : new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(time);
+  }
+  var HISTORY_CSS = `
+.dx-history{font:14px/1.5 system-ui,sans-serif;color:#203047;background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:18px;min-width:0}
+.dx-history *{box-sizing:border-box}.dx-history h2{font-size:20px;margin:0 0 8px}.dx-history p{margin:8px 0;overflow-wrap:anywhere}
+.dx-history fieldset{border:0;padding:0;margin:0;min-width:0}.dx-history legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+.dx-history label{display:block;font-weight:600;margin:12px 0 6px}.dx-history input,.dx-history select{display:block;width:100%;max-width:100%;margin-top:4px;font:inherit;color:inherit;border:1px solid #94a3b8;border-radius:6px;padding:8px;background:#fff}
+.dx-history button{min-height:40px;margin:4px 6px 4px 0;padding:7px 12px;border:1px solid #94a3b8;border-radius:6px;background:#f8fafc;color:inherit;font:inherit;cursor:pointer}
+.dx-history button:disabled{opacity:.5;cursor:wait}.dx-history :focus-visible{outline:3px solid #2563eb;outline-offset:2px}.dx-history [hidden]{display:none}
+.dx-history details{margin-top:16px;border-top:1px solid #e2e8f0;padding-top:12px}.dx-history summary{cursor:pointer;font-weight:600;padding:4px 0}
+.dx-history [role=status]{min-height:42px}.dx-history ol{padding-left:22px}.dx-history option{padding:6px}
+`;
+
   // 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"];
@@ -5680,6 +6305,19 @@ var Docxodus = (() => {
         scale: options.scale ?? 1
       };
     }
+    /** Retarget the mounted document to an equivalent host after its DOM is adopted. */
+    adoptHost(host) {
+      if (host === this.host) return;
+      this.observer?.disconnect();
+      this.observer = null;
+      this.host.style.removeProperty("--docx-sheet-width");
+      this.host = host;
+      this.refresh();
+      if (this.root && typeof ResizeObserver !== "undefined") {
+        this.observer = new ResizeObserver(() => this.refresh());
+        this.observer.observe(this.host);
+      }
+    }
     /**
      * Adopt a freshly mounted document root (a continuous flow, or the paginated page stack).
      * Safe to call on every remount; the previous root is released first.
@@ -10613,15 +11251,20 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
         revisionAuthor: opts.revisionAuthor
       }));
       const editor = new _DocxEditor(container, exports, handle, opts);
-      editor.refreshAnchorMap();
-      if (opts.headerFooter) editor.createRegion();
-      const fullHtml = editor.renderFullHtml(bytes);
-      if (opts.paginated) editor.mountPaginated(fullHtml);
-      else editor.mountHtml(fullHtml);
-      editor.syncRegionToBody();
-      editor.setupBlockDrag();
-      if (opts.comments) editor.createGutter();
-      return editor;
+      try {
+        editor.refreshAnchorMap();
+        if (opts.headerFooter) editor.createRegion();
+        const fullHtml = editor.renderFullHtml(bytes);
+        if (opts.paginated) editor.mountPaginated(fullHtml);
+        else editor.mountHtml(fullHtml);
+        editor.syncRegionToBody();
+        editor.setupBlockDrag();
+        if (opts.comments) editor.createGutter();
+        return editor;
+      } catch (error) {
+        editor.close();
+        throw error;
+      }
     }
     /**
      * Open a fresh, blank document (a "New document" — single empty paragraph, Normal style,
@@ -10636,6 +11279,12 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
       this.assertOpen();
       return this.exports.DocxSessionBridge.Save(this.handle);
     }
+    /** Monotonic committed document version, when supported by the loaded engine. */
+    get version() {
+      this.assertOpen();
+      const value = this.exports.DocxSessionBridge.GetVersion?.(this.handle);
+      return value ? JSON.parse(value).version : null;
+    }
     /** Release the underlying WASM session. The editor is unusable afterward. */
     close() {
       if (this.closed) return;
@@ -10670,6 +11319,24 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
     get root() {
       return this.container;
     }
+    /**
+     * Move a fully rendered candidate into the host's stable public surface.
+     * Internal editor chrome that binds directly to the container is recreated there;
+     * document blocks and their listeners move with the DOM nodes.
+     */
+    adoptContainer(container) {
+      this.assertOpen();
+      if (container === this.container) return;
+      this.teardownBlockDrag();
+      this.gutter?.dispose();
+      this.gutter = null;
+      const previous = this.container;
+      container.replaceChildren(...Array.from(previous.childNodes));
+      this.container = container;
+      this.viewport.adoptHost(container);
+      this.setupBlockDrag();
+      if (this.options.comments) this.createGutter();
+    }
     /**
      * The zoom the viewport is currently applying (1 = 100%). Below 1 the page is wider than the
      * host and has been scaled to fit rather than reflowed — the honest thing to show a user who
@@ -13829,6 +14496,481 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
     (doc.head ?? doc.documentElement).appendChild(style);
   }
 
+  // src/ribbon-history.ts
+  var RibbonHistory = class {
+    constructor(ribbon, options) {
+      this.ribbon = ribbon;
+      this.options = options;
+      this.events = new AbortController();
+      this.identity = { id: crypto.randomUUID(), name: "Untitled.docx" };
+      this.destroyed = false;
+      this.installing = false;
+      this.dirty = false;
+      this.generation = 0;
+      this.captured = -1;
+      this.savedVersion = null;
+      this.observedVersion = null;
+      this.capturedVersion = null;
+      const doc = ribbon.element.ownerDocument;
+      this.prefix = `docxodus:versions:${options.storageName ?? "docxodus-editor"}:document:`;
+      this.lastKey = `docxodus:versions:${options.storageName ?? "docxodus-editor"}:workspace:${options.workspaceId ?? crypto.randomUUID()}`;
+      const style = doc.createElement("style");
+      style.textContent = HISTORY_DRAWER_CSS;
+      this.dialog = doc.createElement("dialog");
+      this.dialog.className = "dxr-history-dialog";
+      this.dialog.setAttribute("aria-label", "Version history");
+      const header = doc.createElement("div");
+      header.className = "dxr-history-header";
+      this.dialog.append(header);
+      const close = this.button("Close version history", () => this.dialog.close(), header);
+      close.className = "dxr-history-close";
+      close.textContent = "Close \u2715";
+      this.source = doc.createElement("p");
+      this.source.className = "dxr-history-source";
+      this.status = doc.createElement("p");
+      this.status.setAttribute("role", "status");
+      this.status.className = "dxr-history-status";
+      const recentLabel = doc.createElement("label");
+      recentLabel.textContent = "Saved documents on this device";
+      this.recent = doc.createElement("select");
+      this.recent.setAttribute("aria-label", recentLabel.textContent);
+      recentLabel.append(this.recent);
+      this.recent.addEventListener("change", () => this.command(async () => {
+        const selectedId = this.recent.value;
+        this.recent.value = this.identity.id;
+        const selected = this.readIdentity(localStorage.getItem(this.prefix + selectedId));
+        if (!selected || !this.confirmReplace()) return;
+        await this.loadSaved(selected);
+        await this.mountPanel();
+        this.updateRecent();
+      }), { signal: this.events.signal });
+      this.dialog.append(this.source, this.status, recentLabel);
+      this.resumeButton = this.button("Continue editing this document", () => this.command(() => this.importArchive()), this.dialog);
+      this.back = this.button("Back to my document", () => this.command(async () => {
+        await this.closeArchive();
+        await this.mountPanel();
+      }), this.dialog);
+      this.body = doc.createElement("div");
+      this.dialog.append(this.body);
+      this.previewDialog = doc.createElement("dialog");
+      this.previewDialog.className = "dxr-version-preview";
+      this.previewDialog.setAttribute("aria-label", "Version preview");
+      this.panelObserver = new MutationObserver(() => this.syncBusy());
+      ribbon.element.append(style, this.dialog, this.previewDialog);
+      for (const dialog of [this.dialog, this.previewDialog]) {
+        dialog.addEventListener("keydown", (event) => event.stopPropagation(), { signal: this.events.signal });
+        dialog.addEventListener("click", (event) => {
+          if (event.target === dialog) {
+            const rect = dialog.getBoundingClientRect();
+            if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
+          }
+        }, { signal: this.events.signal });
+      }
+      this.dialog.addEventListener("close", () => ribbon.control("history")?.focus(), { signal: this.events.signal });
+      ribbon.control("history")?.addEventListener("click", () => {
+        void this.show();
+      }, { signal: this.events.signal });
+      doc.defaultView?.addEventListener("beforeunload", (event) => {
+        if (this.hasUnsavedChanges || this.busy) event.preventDefault();
+      }, { signal: this.events.signal });
+      doc.defaultView?.addEventListener("pagehide", (event) => {
+        if (!event.persisted) void this.destroy();
+      }, { signal: this.events.signal });
+    }
+    get busy() {
+      return !!this.active || this.panel?.element.getAttribute("aria-busy") === "true";
+    }
+    get hasUnsavedChanges() {
+      return this.dirty || (this.ribbon.editor?.version ?? null) !== this.savedVersion;
+    }
+    /** Called by the ribbon before a programmatic replacement. */
+    beforeOpen() {
+      if (!this.installing && this.busy) throw new DocxHistoryError("Busy", "Finish the version action before opening another document.");
+    }
+    /** A new DOCX is a new document identity, even if its filename matches another document. */
+    documentOpened(name) {
+      if (this.installing) return;
+      this.identity = { id: crypto.randomUUID(), name };
+      this.draft = void 0;
+      this.dirty = false;
+      this.generation++;
+      this.savedVersion = this.observedVersion = this.ribbon.editor?.version ?? null;
+      this.dialog.close();
+      this.previewDialog.close();
+      void this.closeArchive();
+    }
+    edited() {
+      const version = this.ribbon.editor?.version ?? null;
+      if (version !== null && version === this.observedVersion) return;
+      this.observedVersion = version;
+      this.dirty = true;
+      this.generation++;
+    }
+    /** Restores a saved workspace only when requested by the host, before exposing the editor. */
+    async resume() {
+      if (!this.options.workspaceId) return;
+      try {
+        const previous = this.readIdentity(localStorage.getItem(this.lastKey));
+        if (previous) await this.run(() => this.loadSaved(previous));
+      } catch (error) {
+        this.ribbon.setStatus("Your document is open. Version history is unavailable on this device.");
+        this.status.textContent = this.explain(error);
+      }
+    }
+    async show() {
+      if (this.destroyed) return;
+      if (!this.dialog.open) this.dialog.showModal();
+      if (this.busy) return;
+      await this.run(async () => {
+        await this.mountPanel();
+        this.updateRecent();
+      }).catch(() => {
+      });
+    }
+    async openFile(file) {
+      await this.run(async () => {
+        if (/\.docxhistory$/i.test(file.name)) {
+          if (file.size > MAX_HISTORY_ARCHIVE_BYTES) throw new DocxHistoryError("ResourceLimit", "History file is too large.");
+          const bytes = new Uint8Array(await file.arrayBuffer());
+          const reader = await this.options.openArchive(bytes);
+          try {
+            await reader.read();
+          } catch (error) {
+            reader.close();
+            throw error;
+          }
+          await this.closeArchive();
+          this.archive = { reader, bytes, name: file.name };
+          if (!this.dialog.open) this.dialog.showModal();
+          await this.mountPanel();
+          this.updateRecent();
+        } else {
+          if (!/\.docx$/i.test(file.name)) throw new Error("Choose a Word document or a document with version history.");
+          if (!this.confirmReplace()) return;
+          const bytes = new Uint8Array(await file.arrayBuffer());
+          this.install(bytes, { id: crypto.randomUUID(), name: file.name });
+          this.draft = void 0;
+          this.dirty = true;
+          await this.closeArchive();
+          this.dialog.close();
+        }
+      }).catch(() => {
+      });
+    }
+    async newDocument() {
+      await this.run(async () => {
+        if (!this.confirmReplace()) return;
+        this.installing = true;
+        try {
+          this.ribbon.openBlank("Untitled.docx");
+        } finally {
+          this.installing = false;
+        }
+        this.identity = { id: crypto.randomUUID(), name: "Untitled.docx" };
+        this.draft = void 0;
+        this.dirty = false;
+        this.generation++;
+        this.savedVersion = this.observedVersion = this.ribbon.editor?.version ?? null;
+        try {
+          localStorage.removeItem(this.lastKey);
+        } catch {
+        }
+        await this.closeArchive();
+        this.dialog.close();
+      }).catch(() => {
+      });
+    }
+    async destroy() {
+      if (this.destroyed) return;
+      this.destroyed = true;
+      this.events.abort();
+      this.dialog.remove();
+      this.previewDialog.remove();
+      this.panelObserver.disconnect();
+      await this.active?.catch(() => {
+      });
+      await this.closeArchive();
+      this.preview?.destroy();
+      this.client?.close();
+      this.store?.close();
+    }
+    async ensureStorage() {
+      if (this.client) return;
+      const store = await openIndexedDbHistoryStore(this.options.storageName ?? "docxodus-editor");
+      try {
+        this.client = this.options.openHistory(store.storage);
+        this.store = store;
+      } catch (error) {
+        store.close();
+        throw error;
+      }
+    }
+    async ensureDraft() {
+      await this.ensureStorage();
+      if (!this.draft) {
+        const document2 = this.client.document(this.identity.id);
+        this.draft = { ...this.identity, checkpoints: await HistoryCheckpoints.open(document2, this.store.journal(this.identity.id)) };
+      }
+      return this.draft;
+    }
+    async loadSaved(identity) {
+      await this.ensureStorage();
+      const document2 = this.client.document(identity.id);
+      const checkpoints = await HistoryCheckpoints.open(document2, this.store.journal(identity.id));
+      const pending = checkpoints.pendingRequest;
+      const view = checkpoints.view;
+      if (!view && pending?.kind !== "save") throw new Error("This saved document is no longer on this device.");
+      const bytes = pending?.kind === "save" ? pending.bytes : await document2.exportDocx(view.version.id);
+      this.install(bytes, identity);
+      this.draft = { ...identity, checkpoints };
+      this.dirty = pending?.kind === "save";
+      if (pending?.kind === "save") this.captureState(pending.bytes);
+      await this.closeArchive();
+      this.remember();
+    }
+    install(bytes, identity) {
+      if (this.destroyed) throw new DocxHistoryError("Closed", "The editor is closed.");
+      this.installing = true;
+      try {
+        this.ribbon.open(bytes, identity.name);
+      } finally {
+        this.installing = false;
+      }
+      this.identity = identity;
+      this.dirty = false;
+      this.generation++;
+      this.savedVersion = this.observedVersion = this.ribbon.editor?.version ?? null;
+    }
+    async mountPanel() {
+      const current = this.archive ?? await this.ensureDraft();
+      const writable = "checkpoints" in current;
+      const holder = this.body.ownerDocument.createElement("div");
+      const panel = mountHistoryControls(holder, {
+        reader: writable ? current.checkpoints.document : current.reader,
+        checkpoints: writable ? current.checkpoints : void 0,
+        author: this.options.author,
+        documentName: current.name,
+        capture: writable ? () => {
+          const bytes = this.ribbon.save();
+          if (!bytes) throw new Error("Open a document first.");
+          this.remember();
+          this.captureState(bytes);
+          return bytes;
+        } : void 0,
+        confirmRestore: writable ? (title) => this.confirm(`Restore ${title}?${this.hasUnsavedChanges ? "\n\nYour unsaved changes will be replaced." : ""}
+
+All saved versions will be kept.`) : void 0,
+        onCheckpoint: async (view, action, request) => {
+          if (this.destroyed) return;
+          const savedCapture = action === "save" || action === "retry" && request?.kind === "save" && this.capturedBytes && sameBytes(this.capturedBytes, request.bytes);
+          if (savedCapture && this.captured === this.generation && this.capturedVersion === (this.ribbon.editor?.version ?? null)) {
+            this.dirty = false;
+            this.savedVersion = this.capturedVersion;
+          }
+          this.captured = -1;
+          this.capturedBytes = void 0;
+          if ((action === "restore" || action === "retry" && request?.kind === "restore") && writable)
+            this.install(await current.checkpoints.document.exportDocx(view.version.id), this.identity);
+          this.remember();
+          this.updateRecent();
+        },
+        restoreUpdatesDraft: true,
+        preview: (bytes, title) => this.showPreview(bytes, title)
+      });
+      try {
+        await panel.ready;
+      } catch (error) {
+        await panel.destroy();
+        throw error;
+      }
+      if (this.destroyed) {
+        await panel.destroy();
+        return;
+      }
+      await this.panel?.destroy();
+      this.panel = panel;
+      this.body.replaceChildren(holder);
+      this.panelObserver.disconnect();
+      this.panelObserver.observe(panel.element, { attributes: true, attributeFilter: ["aria-busy"] });
+      this.source.textContent = current.name;
+      this.resumeButton.hidden = this.back.hidden = writable;
+      this.status.textContent = writable ? "Your saved versions stay on this device." : "You\u2019re browsing a history file. Your open document is safe.";
+    }
+    async showPreview(bytes, title) {
+      const doc = this.previewDialog.ownerDocument;
+      const holder = doc.createElement("div");
+      holder.className = "dxr-version-paper";
+      const preview = await this.options.preview(holder, bytes);
+      if (this.destroyed) {
+        preview.destroy();
+        return;
+      }
+      const heading = doc.createElement("h2");
+      heading.textContent = title;
+      const actions = doc.createElement("div");
+      actions.className = "dxr-version-actions";
+      this.button("Back to version history", () => this.previewDialog.close(), actions);
+      if (!this.archive) this.button("Use as draft", () => this.command(async () => {
+        if (!this.confirmReplace()) return;
+        this.install(bytes, this.identity);
+        this.dirty = true;
+        this.previewDialog.close();
+        this.dialog.close();
+      }), actions);
+      this.button("Download this version", () => download(bytes, "version.docx", doc), actions);
+      this.preview?.destroy();
+      this.preview = preview;
+      this.previewDialog.replaceChildren(heading, actions, holder);
+      if (!this.previewDialog.open) this.previewDialog.showModal();
+    }
+    async importArchive() {
+      if (!this.archive || !this.confirmReplace()) return;
+      await this.ensureStorage();
+      const imported = await this.client.importHistoryArchive(this.archive.bytes);
+      const identity = { id: imported.archive.documentId, name: this.archive.name.replace(/\.docxhistory$/i, ".docx") };
+      const document2 = this.client.document(identity.id);
+      const checkpoints = await HistoryCheckpoints.open(document2, this.store.journal(identity.id), imported.view);
+      this.install(await document2.exportDocx(imported.view.version.id), identity);
+      this.draft = { ...identity, checkpoints };
+      this.remember();
+      await this.closeArchive();
+      await this.mountPanel();
+      this.updateRecent();
+    }
+    async closeArchive() {
+      this.panelObserver.disconnect();
+      const panel = this.panel;
+      this.panel = void 0;
+      const archive = this.archive;
+      this.archive = void 0;
+      await panel?.destroy();
+      archive?.reader.close();
+    }
+    remember() {
+      localStorage.setItem(this.prefix + this.identity.id, JSON.stringify(this.identity));
+      localStorage.setItem(this.lastKey, JSON.stringify(this.identity));
+    }
+    readIdentity(value) {
+      if (!value) return null;
+      const identity = JSON.parse(value);
+      if (typeof identity?.id !== "string" || !identity.id || typeof identity?.name !== "string") return null;
+      return { id: identity.id, name: identity.name };
+    }
+    updateRecent() {
+      this.recent.replaceChildren(new Option("Choose a saved document\u2026", ""));
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (!key.startsWith(this.prefix)) continue;
+        try {
+          const identity = this.readIdentity(localStorage.getItem(key));
+          if (identity) this.recent.append(new Option(identity.name, identity.id));
+        } catch {
+        }
+      }
+      this.recent.value = this.identity.id;
+      this.recent.parentElement.hidden = this.recent.options.length <= 1;
+    }
+    confirm(message) {
+      return this.dialog.ownerDocument.defaultView?.confirm(message) ?? false;
+    }
+    captureState(bytes) {
+      this.captured = this.generation;
+      this.capturedVersion = this.ribbon.editor?.version ?? null;
+      this.capturedBytes = bytes.slice();
+    }
+    confirmReplace() {
+      return !this.hasUnsavedChanges || this.confirm("Replace your open document? Save a version or download it first to keep your unsaved changes.");
+    }
+    explain(error) {
+      return historyControlError(error, this.draft?.checkpoints.hasPending);
+    }
+    command(action) {
+      void this.run(action).catch(() => {
+      });
+    }
+    syncBusy() {
+      const busy = this.busy;
+      this.ribbon.surface.inert = busy;
+      const chrome = this.ribbon.element.querySelector(".dxr-chrome");
+      if (chrome) chrome.inert = busy;
+      this.recent.disabled = this.resumeButton.disabled = this.back.disabled = busy;
+      const file = this.ribbon.control("file");
+      if (file) file.disabled = busy;
+      const create = this.ribbon.control("new");
+      if (create) create.disabled = busy;
+    }
+    async run(action) {
+      if (this.destroyed || this.busy) return;
+      const work = Promise.resolve().then(action);
+      this.active = work;
+      this.dialog.setAttribute("aria-busy", "true");
+      this.body.inert = true;
+      this.syncBusy();
+      this.ribbon.element.querySelector(".dxr-chrome").inert = true;
+      this.ribbon.surface.inert = true;
+      try {
+        await work;
+      } catch (error) {
+        this.status.textContent = this.explain(error);
+        this.ribbon.setStatus(this.explain(error));
+        throw error;
+      } finally {
+        this.active = void 0;
+        this.body.inert = false;
+        this.dialog.setAttribute("aria-busy", "false");
+        this.syncBusy();
+        this.ribbon.element.querySelector(".dxr-chrome")?.removeAttribute("inert");
+        this.ribbon.surface.inert = false;
+      }
+    }
+    button(label, action, parent) {
+      const button = parent.ownerDocument.createElement("button");
+      button.type = "button";
+      button.textContent = label;
+      button.setAttribute("aria-label", label);
+      button.addEventListener("click", action, { signal: this.events.signal });
+      parent.append(button);
+      return button;
+    }
+  };
+  function download(bytes, name, doc) {
+    const url = URL.createObjectURL(new Blob([bytes.slice()], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }));
+    const link = doc.createElement("a");
+    link.href = url;
+    link.download = name;
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  }
+  function sameBytes(left2, right2) {
+    return left2.length === right2.length && left2.every((value, index) => value === right2[index]);
+  }
+  var HISTORY_DRAWER_CSS = `
+.dxr-history-dialog,.dxr-version-preview{box-sizing:border-box;color:#243b42;background:#fff;border:1px solid #dce5e5;box-shadow:0 24px 80px #163f4033;font:14px/1.5 system-ui,sans-serif;padding:24px;overscroll-behavior:contain}
+.dxr-history-dialog{width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:12px 12px 12px auto;border-radius:18px}
+.dxr-history-dialog::backdrop,.dxr-version-preview::backdrop{background:#16323333;backdrop-filter:blur(2px)}
+.dxr-history-dialog [hidden],.dxr-version-preview [hidden]{display:none!important}
+.dxr-history-dialog button,.dxr-version-preview button{font:inherit;color:inherit;border:1px solid #cbd9d9;background:#fff;border-radius:9px;min-height:40px;padding:8px 12px;cursor:pointer}
+.dxr-history-dialog button:hover,.dxr-version-preview button:hover{background:#eff8f6}
+.dxr-history-dialog :focus-visible,.dxr-version-preview :focus-visible{outline:3px solid #0f766e;outline-offset:3px}
+.dxr-history-header{display:flex;justify-content:flex-end;position:sticky;top:0;z-index:2;background:#fff;box-shadow:0 0 0 6px #fff}
+.dxr-history-dialog .dxr-history-close{border:0;font-size:13px;background:#fff}
+.dxr-history-source{font-weight:600;overflow-wrap:anywhere;margin:12px 0 4px}
+.dxr-history-status{color:#597273;margin:4px 0 18px}
+.dxr-history-dialog>label{display:block;font-size:12px;color:#597273;margin:12px 0}
+.dxr-history-dialog>label select{display:block;width:100%;font:inherit;padding:8px;border:1px solid #cbd9d9;border-radius:8px;background:#fff;color:#243b42}
+.dxr-history-dialog .dx-history{padding:0;border:0;border-radius:0;background:transparent}
+.dxr-history-dialog .dx-history h2{font-size:24px;letter-spacing:-.6px;margin:12px 0}
+.dxr-history-dialog .dx-history button[data-history-action=save]{background:#0f766e;border-color:#0f766e;color:#fff;font-weight:600}
+.dxr-history-dialog .dx-history select{border-radius:9px;background:#f8fbfa}
+.dxr-history-dialog .dx-history option{padding:10px;font-size:13px}
+.dxr-version-preview{width:min(1080px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:18px}
+.dxr-version-preview h2{font-size:20px;margin:0 0 12px;overflow-wrap:anywhere}
+.dxr-version-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
+.dxr-version-paper{max-height:70dvh;overflow:auto;background:#f2f6f5;padding:20px;border-radius:10px}
+@media(max-width:520px){.dxr-history-dialog,.dxr-version-preview{padding:16px}.dxr-version-paper{padding:8px}}
+@media(prefers-reduced-motion:no-preference){.dxr-history-dialog[open]{animation:dxr-history-in .16s ease-out}@keyframes dxr-history-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}}
+`;
+
   // src/ribbon-chrome.ts
   var RIBBON_STYLE_VERSION = "11";
   var RIBBON_STYLE_ATTR = "data-docxodus-ribbon-styles";
@@ -14279,9 +15421,9 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
    Word draws a header that is being edited \u2014 a dashed rule with a small tag in the margin. */
 .dxr-surface .docx-hf-band {
   /* Docked outside the zoomed sheet, so it takes the page's on-screen width from the
-     custom property the viewport publishes rather than stretching to the whole surface. */
+     custom property the viewport publishes, including when the page exceeds the surface. */
   position: relative;
-  width: min(100%, var(--docx-sheet-width, 100%));
+  width: var(--docx-sheet-width, 100%);
   margin: 0 auto;
   padding: 34px 72px 12px;
   background: var(--dxr-sheet);
@@ -14340,7 +15482,9 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
    vertical breathing room is ours. Centering is left to margin:auto so a page the viewport
    has zoomed to fit stays centered at its scaled width. */
 .dxr[data-chrome] .dxr-surface[data-view="continuous"] .docx-body-flow {
-  max-width: 100%;
+  /* CSS zoom scales the authored page width. A percentage cap would shrink only the
+     paper to the host while its fixed-width section and content keep magnifying. */
+  max-width: none;
   margin: 0 auto;
   padding: 56px 0;
   border-radius: 3px;
@@ -14707,6 +15851,7 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
       <label class="dxr-btn" tabindex="0">Open<input data-dxr="file" type="file" accept=".docx" hidden /></label>
       <button type="button" data-dxr="save" disabled>Save</button>
     </div>
+    <button type="button" class="dxr-btn" data-dxr="history" title="Browse and save document versions" aria-haspopup="dialog">Version history</button>
     <div class="dxr-quick">
       <button type="button" class="dxr-icon" data-dxr="undo" title="Undo (Ctrl+Z)" aria-label="Undo">&#8630;</button>
       <button type="button" class="dxr-icon" data-dxr="redo" title="Redo (Ctrl+Shift+Z)" aria-label="Redo">&#8631;</button>
@@ -15541,6 +16686,7 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
         this.resizeObserver = new ResizeObserver(() => this.applyChrome());
         this.resizeObserver.observe(root);
       }
+      this.history = options.history ? new RibbonHistory(this, options.history) : null;
     }
     // ── element lookup ──────────────────────────────────────────────────────────
     control(name) {
@@ -15565,6 +16711,14 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
         this.element.querySelector("[data-dxr-files]")?.remove();
       }
       if (!this.loaderOptions) this.control("loader")?.remove();
+      if (!this.options.history) this.control("history")?.remove();
+      else {
+        const file = this.control("file");
+        if (file) {
+          file.accept = ".docx,.docxhistory";
+          file.setAttribute("aria-label", "Open a document or history file");
+        }
+      }
       this.require("docname").textContent = this.documentName;
       this.require("paginated").checked = this.options.paginated ?? false;
       this.require("headerfooter").checked = this.headerFooter;
@@ -15746,22 +16900,13 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
     }
     open(bytes, name) {
       if (!this.exports) throw new Error("Docxodus ribbon: WASM exports are not set yet");
-      if (this.live) {
-        try {
-          this.live.close();
-        } catch {
-        }
-        this.live = null;
-      }
-      if (name) this.documentName = name;
-      this.require("docname").textContent = this.documentName;
+      this.history?.beforeOpen();
       const paginated = this.require("paginated").checked;
-      this.surface.dataset.view = paginated ? "paginated" : "continuous";
-      this.surface.replaceChildren();
-      this.closeFindBar();
+      const candidateSurface = this.surface.cloneNode(false);
+      candidateSurface.dataset.view = paginated ? "paginated" : "continuous";
       const started = performance.now();
       const tracked = this.require("trackchanges").checked ? 1 /* RenderInline */ : this.options.trackedChanges ?? 0 /* Accept */;
-      this.live = DocxEditor.open(this.surface, bytes, this.exports, {
+      const candidate = DocxEditor.open(candidateSurface, bytes, this.exports, {
         cssPrefix: this.options.cssPrefix,
         fabricateClasses: this.options.fabricateClasses,
         editable: this.options.editable,
@@ -15769,10 +16914,14 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
         columnWidth: this.options.columnWidth,
         fitToWidth: this.options.fitToWidth,
         onEdit: (info) => {
+          this.history?.edited();
           this.options.onEdit?.(info);
           this.scheduleStats();
         },
-        onMove: this.options.onMove,
+        onMove: (info) => {
+          this.history?.edited();
+          this.options.onMove?.(info);
+        },
         onStoryChange: (which) => this.onStoryChange(which),
         onCommentsChange: (info) => this.onCommentsChange(info),
         paginated,
@@ -15783,7 +16932,16 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
         comments: this.options.comments,
         commentAuthor: this.author
       });
-      this.require("save").disabled = false;
+      this.live?.close();
+      candidate.adoptContainer(this.surface);
+      this.surface.dataset.view = paginated ? "paginated" : "continuous";
+      this.live = candidate;
+      if (name) this.documentName = name;
+      this.require("docname").textContent = this.documentName;
+      this.closeFindBar();
+      this.history?.documentOpened(this.documentName);
+      const saveButton = this.control("save");
+      if (saveButton) saveButton.disabled = false;
       this.require("ribbon").setAttribute("aria-disabled", "false");
       this.setState("ready");
       this.setStatus(`Rendered in ${Math.round(performance.now() - started)} ms`);
@@ -15829,6 +16987,7 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
     destroy() {
       if (this.destroyed) return;
       this.destroyed = true;
+      void this.history?.destroy();
       const doc = this.element.ownerDocument ?? document;
       doc.removeEventListener("selectionchange", this.onSelectionChange);
       doc.removeEventListener("mousedown", this.onDocumentMouseDown);
@@ -15865,6 +17024,7 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
         const el = this.control("railOp");
         if (el) el.textContent = `${label} ${ms >= 1e3 ? `${(ms / 1e3).toFixed(2)} s` : `${Math.round(ms)} ms`}`;
         this.options.onCommand?.(label, ms);
+        this.history?.edited();
         this.refreshRailCounts();
         this.refreshRailAnchor();
         this.scheduleStats();
@@ -16064,11 +17224,24 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
       file?.addEventListener("change", async () => {
         const chosen = file.files?.[0];
         if (!chosen) return;
+        file.value = "";
+        if (this.history) {
+          await this.history.openFile(chosen);
+          return;
+        }
         this.setStatus(`Loading ${chosen.name}\u2026`);
-        this.open(new Uint8Array(await chosen.arrayBuffer()), chosen.name);
+        try {
+          this.open(new Uint8Array(await chosen.arrayBuffer()), chosen.name);
+        } catch (error) {
+          this.setStatus(`Could not open this document. ${String(error)}`);
+        }
         file.value = "";
       });
       this.control("new")?.addEventListener("click", () => {
+        if (this.history) {
+          void this.history.newDocument();
+          return;
+        }
         if (this.exports) this.openBlank("untitled.docx");
       });
       this.control("save")?.addEventListener("click", () => this.download());
@@ -16079,6 +17252,7 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
         if (!chosen || !this.live) return;
         const started = performance.now();
         const ok = await this.live.insertImageFile(chosen, { altText: chosen.name });
+        if (ok) this.history?.edited();
         const ms = performance.now() - started;
         const el = this.control("railOp");
         if (el) el.textContent = `picture ${Math.round(ms)} ms`;
@@ -18543,7 +19717,7 @@ ${parsed.documentElement.outerHTML}`;
   }
   async function createRibbonEditor(container, source, options = {}) {
     const el = resolveContainer2(container);
-    const { wasmBasePath: wasmBasePath2, ...ribbonOptions } = options;
+    const { wasmBasePath: wasmBasePath2, history, ...ribbonOptions } = options;
     const mount2 = createScopedMount(el);
     mount2.root.style.height = "100%";
     mount2.root.style.minHeight = "0";
@@ -18553,6 +19727,12 @@ ${parsed.documentElement.outerHTML}`;
       // boundary (rounded card + shadow). Full-bleed hosts pass frame: "flush".
       frame: "card",
       ...ribbonOptions,
+      history: history ? {
+        ...typeof history === "object" ? history : {},
+        openHistory: openDocxHistory,
+        openArchive: openDocxHistoryArchive,
+        preview: (container2, bytes) => createViewer(container2, bytes, { wasmBasePath: wasmBasePath2, renderTrackedChanges: true })
+      } : void 0,
       // Exports arrive after the runtime boots; the loader covers that gap.
       exports: void 0
     });
@@ -18570,6 +19750,7 @@ ${parsed.documentElement.outerHTML}`;
       ribbon.loader.stage(2);
       if (bytes == null) ribbon.openBlank(ribbonOptions.documentName);
       else ribbon.open(bytes, ribbonOptions.documentName ?? nameFromSource(source));
+      await ribbon.history?.resume();
       ribbon.loader.stage(3);
       ribbon.loader.done();
       return ribbon;