@extend-ai/react-docx 0.7.0-alpha.3 → 0.7.0-alpha.5

package/dist/index.js

@@ -1,16 +1,23 @@
 import {
   createMinimalDocxPackage,
   getPart,
-  initWasm,
-  mapsToWasmPackage,
   packageToArrayBuffer,
   parseDocx,
+  withPart
+} from "./chunk-QOXSE6WY.js";
+import {
+  buildDocModel,
+  buildDocModelFromBytes,
+  cloneDocModel,
+  normalizeDocModel
+} from "./chunk-P3B3Q7Y6.js";
+import {
+  initWasm,
+  mapsToWasmPackage,
   setWasmSource,
-  wasmBuildDocModelFromPackage,
   wasmModelToDocumentXml,
-  wasmSerializeDocx,
-  withPart
-} from "./chunk-BGCGPO6Q.js";
+  wasmSerializeDocx
+} from "./chunk-2SXGXGWO.js";
 
 // src/index.tsx
 import * as React2 from "react";
@@ -237,413 +244,144 @@ function layoutDocument(model, options = {}) {
   return pages;
 }
 
-// ../doc-model/src/normalize.ts
-function normalizeUint8Array(value) {
-  if (value instanceof Uint8Array) {
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return Uint8Array.from(value);
-  }
-  return void 0;
+// src/docx-import.ts
+var nextImportWorkerRequestId = 1;
+function createAbortError() {
+  if (typeof DOMException !== "undefined") {
+    return new DOMException("DOCX import was aborted", "AbortError");
+  }
+  const error = new Error("DOCX import was aborted");
+  error.name = "AbortError";
+  return error;
+}
+function errorFromWorkerResponse(response) {
+  const error = new Error(response.error.message);
+  error.name = response.error.name ?? "Error";
+  if (response.error.stack) {
+    error.stack = response.error.stack;
+  }
+  return error;
+}
+function canUseDocxImportWorker(options) {
+  return options.useWorker !== false && typeof Worker !== "undefined";
+}
+function createDocxImportWorker() {
+  return new Worker(new URL("./docx-import-worker.js", import.meta.url), {
+    type: "module",
+    name: "react-docx-import"
+  });
 }
-function normalizeParagraphChild(child) {
-  if (child.type !== "image") {
-    return child;
-  }
-  const image = child;
-  const data = normalizeUint8Array(image.data);
-  if (data === image.data) {
-    return child;
+async function importDocxOnMainThread(buffer, signal) {
+  if (signal?.aborted) {
+    throw createAbortError();
   }
-  return {
-    ...image,
-    data
-  };
-}
-function normalizeTableCellContent(node) {
-  if (node.type === "table") {
-    return normalizeDocNode(node);
+  const startedAt = performanceNow();
+  const [{ parseDocx: parseDocx2 }, { buildDocModel: buildDocModel2 }] = await Promise.all([
+    import("./src-PJYTN6DB.js"),
+    import("./src-NDPFDRVM.js")
+  ]);
+  const pkg = await parseDocx2(buffer);
+  const parsedAt = performanceNow();
+  if (signal?.aborted) {
+    throw createAbortError();
   }
-  return {
-    ...node,
-    children: node.children.map(normalizeParagraphChild)
-  };
-}
-function normalizeDocNode(node) {
-  if (node.type === "paragraph") {
-    return {
-      ...node,
-      children: node.children.map(normalizeParagraphChild)
-    };
+  const model = await buildDocModel2(pkg);
+  const finishedAt = performanceNow();
+  if (signal?.aborted) {
+    throw createAbortError();
   }
   return {
-    ...node,
-    rows: node.rows.map((row) => ({
-      ...row,
-      cells: row.cells.map((cell) => ({
-        ...cell,
-        nodes: cell.nodes.map(normalizeTableCellContent)
-      }))
-    }))
-  };
-}
-function normalizeDocModel(model) {
-  return {
-    ...model,
-    nodes: model.nodes.map(normalizeDocNode),
-    metadata: {
-      ...model.metadata,
-      headerSections: model.metadata.headerSections.map((section) => ({
-        ...section,
-        nodes: section.nodes.map(normalizeDocNode)
-      })),
-      footerSections: model.metadata.footerSections.map((section) => ({
-        ...section,
-        nodes: section.nodes.map(normalizeDocNode)
-      })),
-      sections: model.metadata.sections?.map((section) => ({
-        ...section,
-        headerSections: section.headerSections.map((header) => ({
-          ...header,
-          nodes: header.nodes.map(normalizeDocNode)
-        })),
-        footerSections: section.footerSections.map((footer) => ({
-          ...footer,
-          nodes: footer.nodes.map(normalizeDocNode)
-        }))
-      })),
-      footnotes: model.metadata.footnotes?.map((note) => ({
-        ...note,
-        nodes: note.nodes?.map(normalizeDocNode)
-      })),
-      endnotes: model.metadata.endnotes?.map((note) => ({
-        ...note,
-        nodes: note.nodes?.map(normalizeDocNode)
-      }))
+    package: pkg,
+    model,
+    source: "main-thread",
+    timings: {
+      totalMs: finishedAt - startedAt,
+      parseMs: parsedAt - startedAt,
+      buildModelMs: finishedAt - parsedAt
     }
   };
 }
-
-// ../doc-model/src/clone.ts
-function isParagraphCellContent(node) {
-  return node.type === "paragraph";
-}
-function isTableCellContentTable(node) {
-  return node.type === "table";
+function performanceNow() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
 }
-function cloneTableCellContent(nodes) {
-  return nodes.map((node) => {
-    if (isParagraphCellContent(node)) {
-      return cloneParagraph(node);
-    }
-    if (isTableCellContentTable(node)) {
-      return cloneTable(node);
-    }
-    return node;
-  });
-}
-function cloneParagraphNumbering(numbering) {
-  return numbering ? { ...numbering } : void 0;
-}
-function cloneParagraphSpacing(spacing) {
-  return spacing ? { ...spacing } : void 0;
-}
-function cloneParagraphIndent(indent) {
-  return indent ? { ...indent } : void 0;
-}
-function cloneParagraphBorderStyle(border) {
-  return border ? { ...border } : void 0;
-}
-function cloneParagraphBorderSet(borders) {
-  if (!borders) {
-    return void 0;
+async function importDocxBuffer(buffer, options = {}) {
+  if (options.signal?.aborted) {
+    throw createAbortError();
   }
-  return {
-    top: cloneParagraphBorderStyle(borders.top),
-    right: cloneParagraphBorderStyle(borders.right),
-    bottom: cloneParagraphBorderStyle(borders.bottom),
-    left: cloneParagraphBorderStyle(borders.left),
-    between: cloneParagraphBorderStyle(borders.between),
-    bar: cloneParagraphBorderStyle(borders.bar)
-  };
-}
-function cloneParagraphStyle(style) {
-  if (!style) {
-    return void 0;
+  if (!canUseDocxImportWorker(options)) {
+    return importDocxOnMainThread(buffer, options.signal);
   }
-  return {
-    ...style,
-    numbering: cloneParagraphNumbering(style.numbering),
-    spacing: cloneParagraphSpacing(style.spacing),
-    indent: cloneParagraphIndent(style.indent),
-    borders: cloneParagraphBorderSet(style.borders),
-    dropCap: style.dropCap ? {
-      ...style.dropCap
-    } : void 0
-  };
-}
-function cloneParagraph(paragraph) {
-  return {
-    type: "paragraph",
-    style: cloneParagraphStyle(paragraph.style),
-    paragraphMarkDeleted: paragraph.paragraphMarkDeleted,
-    sourceXml: paragraph.sourceXml,
-    children: paragraph.children.map((child) => {
-      if (child.type === "text") {
-        return {
-          type: "text",
-          text: child.text,
-          style: child.style ? { ...child.style } : void 0,
-          link: child.link
-        };
+  let worker;
+  try {
+    worker = createDocxImportWorker();
+  } catch {
+    return importDocxOnMainThread(buffer, options.signal);
+  }
+  const requestId = nextImportWorkerRequestId;
+  nextImportWorkerRequestId += 1;
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const cleanup = () => {
+      worker.removeEventListener("message", handleMessage);
+      worker.removeEventListener("error", handleError);
+      worker.removeEventListener("messageerror", handleMessageError);
+      options.signal?.removeEventListener("abort", handleAbort);
+      worker.terminate();
+    };
+    const settle = (resolver) => {
+      if (settled) {
+        return;
       }
-      if (child.type === "form-field") {
-        return {
-          type: "form-field",
-          fieldType: child.fieldType,
-          sourceKind: child.sourceKind,
-          id: child.id,
-          tag: child.tag,
-          title: child.title,
-          placeholder: child.placeholder,
-          checked: child.checked,
-          value: child.value,
-          options: child.options?.map((option) => ({
-            displayText: option.displayText,
-            value: option.value
-          })),
-          widget: child.widget ? {
-            name: child.widget.name,
-            enabled: child.widget.enabled,
-            calcOnExit: child.widget.calcOnExit,
-            text: child.widget.text ? {
-              inputType: child.widget.text.inputType,
-              defaultText: child.widget.text.defaultText,
-              maxLength: child.widget.text.maxLength,
-              textFormat: child.widget.text.textFormat
-            } : void 0,
-            checkbox: child.widget.checkbox ? {
-              defaultChecked: child.widget.checkbox.defaultChecked,
-              sizeMode: child.widget.checkbox.sizeMode,
-              sizePt: child.widget.checkbox.sizePt
-            } : void 0,
-            dropdown: child.widget.dropdown ? {
-              defaultValue: child.widget.dropdown.defaultValue
-            } : void 0
-          } : void 0,
-          checkedSymbol: child.checkedSymbol,
-          uncheckedSymbol: child.uncheckedSymbol,
-          style: child.style ? { ...child.style } : void 0,
-          link: child.link,
-          sourceXml: child.sourceXml
-        };
+      settled = true;
+      cleanup();
+      resolver();
+    };
+    const handleAbort = () => {
+      settle(() => reject(createAbortError()));
+    };
+    const handleError = (event) => {
+      const message = event.message || "DOCX import worker failed";
+      settle(() => reject(new Error(message)));
+    };
+    const handleMessageError = () => {
+      settle(() => reject(new Error("DOCX import worker returned an unreadable response")));
+    };
+    const handleMessage = (event) => {
+      const response = event.data;
+      if (!response || response.id !== requestId) {
+        return;
       }
-      return {
-        type: "image",
-        src: child.src,
-        alt: child.alt,
-        widthPx: child.widthPx,
-        heightPx: child.heightPx,
-        partName: child.partName,
-        contentType: child.contentType,
-        data: child.data ? new Uint8Array(child.data) : void 0,
-        sourceXml: child.sourceXml,
-        crop: child.crop ? { ...child.crop } : void 0,
-        cssFilter: child.cssFilter,
-        cssOpacity: child.cssOpacity,
-        floating: child.floating ? { ...child.floating } : void 0,
-        syntheticTextBox: child.syntheticTextBox,
-        textBoxText: child.textBoxText
+      if (response.type === "error") {
+        settle(() => reject(errorFromWorkerResponse(response)));
+        return;
+      }
+      settle(
+        () => resolve({
+          package: response.package,
+          model: response.model,
+          source: "worker",
+          timings: response.timings
+        })
+      );
+    };
+    worker.addEventListener("message", handleMessage);
+    worker.addEventListener("error", handleError);
+    worker.addEventListener("messageerror", handleMessageError);
+    options.signal?.addEventListener("abort", handleAbort, { once: true });
+    try {
+      const request = {
+        id: requestId,
+        type: "import-docx",
+        buffer
       };
-    })
-  };
-}
-function cloneTableBoxSpacing(spacing) {
-  if (!spacing) {
-    return void 0;
-  }
-  return {
-    topTwips: spacing.topTwips,
-    rightTwips: spacing.rightTwips,
-    bottomTwips: spacing.bottomTwips,
-    leftTwips: spacing.leftTwips
-  };
-}
-function cloneTableBorderStyle(border) {
-  if (!border) {
-    return void 0;
-  }
-  return {
-    type: border.type,
-    color: border.color,
-    sizeEighthPt: border.sizeEighthPt
-  };
-}
-function cloneTableBorderSet(borders) {
-  if (!borders) {
-    return void 0;
-  }
-  return {
-    top: cloneTableBorderStyle(borders.top),
-    right: cloneTableBorderStyle(borders.right),
-    bottom: cloneTableBorderStyle(borders.bottom),
-    left: cloneTableBorderStyle(borders.left),
-    insideH: cloneTableBorderStyle(borders.insideH),
-    insideV: cloneTableBorderStyle(borders.insideV),
-    tl2br: cloneTableBorderStyle(borders.tl2br),
-    tr2bl: cloneTableBorderStyle(borders.tr2bl)
-  };
-}
-function cloneTableFloatingStyle(floating) {
-  if (!floating) {
-    return void 0;
-  }
-  return {
-    xTwips: floating.xTwips,
-    yTwips: floating.yTwips,
-    leftFromTextTwips: floating.leftFromTextTwips,
-    rightFromTextTwips: floating.rightFromTextTwips,
-    topFromTextTwips: floating.topFromTextTwips,
-    bottomFromTextTwips: floating.bottomFromTextTwips,
-    horizontalAnchor: floating.horizontalAnchor,
-    verticalAnchor: floating.verticalAnchor,
-    horizontalAlign: floating.horizontalAlign,
-    verticalAlign: floating.verticalAlign
-  };
-}
-function cloneTable(table) {
-  return {
-    type: "table",
-    sourceXml: table.sourceXml,
-    style: table.style ? {
-      widthTwips: table.style.widthTwips,
-      indentTwips: table.style.indentTwips,
-      layout: table.style.layout,
-      cellSpacingTwips: table.style.cellSpacingTwips,
-      floating: cloneTableFloatingStyle(table.style.floating),
-      cellMarginTwips: cloneTableBoxSpacing(table.style.cellMarginTwips),
-      columnWidthsTwips: table.style.columnWidthsTwips ? [...table.style.columnWidthsTwips] : void 0,
-      borders: cloneTableBorderSet(table.style.borders)
-    } : void 0,
-    rows: table.rows.map((row) => ({
-      type: "table-row",
-      style: row.style ? { ...row.style } : void 0,
-      cells: row.cells.map((cell) => ({
-        type: "table-cell",
-        style: cell.style ? {
-          ...cell.style,
-          marginTwips: cloneTableBoxSpacing(cell.style.marginTwips),
-          borders: cloneTableBorderSet(cell.style.borders)
-        } : void 0,
-        nodes: cloneTableCellContent(cell.nodes)
-      }))
-    }))
-  };
-}
-function cloneDocNode(node) {
-  return node.type === "paragraph" ? cloneParagraph(node) : cloneTable(node);
-}
-function cloneNumberingDefinitions(numberingDefinitions) {
-  if (!numberingDefinitions) {
-    return void 0;
-  }
-  return {
-    abstracts: numberingDefinitions.abstracts.map((abstractDefinition) => ({
-      abstractNumId: abstractDefinition.abstractNumId,
-      levels: abstractDefinition.levels.map((level) => ({
-        ...level,
-        runStyle: level.runStyle ? { ...level.runStyle } : void 0,
-        pictureBullet: level.pictureBullet ? { ...level.pictureBullet } : void 0
-      }))
-    })),
-    instances: numberingDefinitions.instances.map((instanceDefinition) => ({
-      numId: instanceDefinition.numId,
-      abstractNumId: instanceDefinition.abstractNumId,
-      levelStartOverrides: instanceDefinition.levelStartOverrides ? { ...instanceDefinition.levelStartOverrides } : void 0,
-      levelOverrides: instanceDefinition.levelOverrides ? instanceDefinition.levelOverrides.map((level) => ({
-        ...level,
-        runStyle: level.runStyle ? { ...level.runStyle } : void 0,
-        pictureBullet: level.pictureBullet ? { ...level.pictureBullet } : void 0
-      })) : void 0
-    }))
-  };
-}
-function cloneDocModel(model) {
-  return {
-    nodes: model.nodes.map(cloneDocNode),
-    metadata: {
-      sourceParts: model.metadata.sourceParts,
-      warnings: [...model.metadata.warnings],
-      documentPageCount: model.metadata.documentPageCount,
-      documentOpenTag: model.metadata.documentOpenTag,
-      documentBackgroundColor: model.metadata.documentBackgroundColor,
-      sectionPropertiesXml: model.metadata.sectionPropertiesXml,
-      sections: model.metadata.sections?.map((section) => ({
-        startNodeIndex: section.startNodeIndex,
-        sectionPropertiesXml: section.sectionPropertiesXml,
-        headerSections: (section.headerSections ?? []).map((headerSection) => ({
-          partName: headerSection.partName,
-          referenceType: headerSection.referenceType,
-          nodes: headerSection.nodes.map(cloneDocNode)
-        })),
-        footerSections: (section.footerSections ?? []).map((footerSection) => ({
-          partName: footerSection.partName,
-          referenceType: footerSection.referenceType,
-          nodes: footerSection.nodes.map(cloneDocNode)
-        }))
-      })),
-      headerSections: (model.metadata.headerSections ?? []).map((section) => ({
-        partName: section.partName,
-        referenceType: section.referenceType,
-        nodes: section.nodes.map(cloneDocNode)
-      })),
-      footerSections: (model.metadata.footerSections ?? []).map((section) => ({
-        partName: section.partName,
-        referenceType: section.referenceType,
-        nodes: section.nodes.map(cloneDocNode)
-      })),
-      paragraphStyles: (model.metadata.paragraphStyles ?? []).map((style) => ({
-        ...style,
-        runStyle: style.runStyle ? { ...style.runStyle } : void 0,
-        numbering: cloneParagraphNumbering(style.numbering),
-        spacing: cloneParagraphSpacing(style.spacing),
-        indent: cloneParagraphIndent(style.indent),
-        borders: cloneParagraphBorderSet(style.borders)
-      })),
-      defaultParagraphStyleId: model.metadata.defaultParagraphStyleId,
-      numberingDefinitions: cloneNumberingDefinitions(
-        model.metadata.numberingDefinitions
-      ),
-      compatibility: model.metadata.compatibility ? { ...model.metadata.compatibility } : void 0,
-      footnotes: model.metadata.footnotes?.map((note) => ({
-        ...note,
-        nodes: note.nodes?.map(cloneDocNode)
-      })),
-      endnotes: model.metadata.endnotes?.map((note) => ({
-        ...note,
-        nodes: note.nodes?.map(cloneDocNode)
-      }))
+      const transfer = options.transferBuffer ? [buffer] : [];
+      worker.postMessage(request, transfer);
+    } catch (error) {
+      settle(
+        () => reject(error instanceof Error ? error : new Error("Failed to start DOCX import worker"))
+      );
     }
-  };
-}
-
-// ../doc-model/src/index.ts
-async function buildDocModel(pkg) {
-  const wasmPackage = mapsToWasmPackage({
-    parts: pkg.parts,
-    binaryAssets: pkg.binaryAssets
   });
-  const model = await wasmBuildDocModelFromPackage(wasmPackage);
-  return normalizeDocModel(model);
-}
-async function buildDocModelFromBytes(bytes) {
-  const { parseDocx: parseDocx2 } = await import("./src-XA2NEWYM.js");
-  const payload = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
-  const buffer = payload.buffer.slice(payload.byteOffset, payload.byteOffset + payload.byteLength);
-  const pkg = await parseDocx2(buffer);
-  const model = await buildDocModel(pkg);
-  return { package: pkg, model };
 }
 
 // src/section-layout.ts
@@ -1600,7 +1338,7 @@ function splitParagraphChildrenAtTextOffsets(paragraph, text, startOffset, endOf
     afterChildren
   };
 }
-function cloneParagraph2(paragraph) {
+function cloneParagraph(paragraph) {
   return {
     type: "paragraph",
     style: paragraph.style ? { ...paragraph.style } : void 0,
@@ -1632,7 +1370,7 @@ function duplicateParagraph(model, index) {
   if (!node) {
     return next;
   }
-  next.nodes.splice(index + 1, 0, cloneParagraph2(node));
+  next.nodes.splice(index + 1, 0, cloneParagraph(node));
   return next;
 }
 function updateParagraphText(model, index, text, options) {
@@ -1844,7 +1582,7 @@ function copyParagraphs(model, startIndex, endIndex = startIndex) {
   for (let index = start; index <= end; index += 1) {
     const node = model.nodes[index];
     if (node?.type === "paragraph") {
-      paragraphs.push(cloneParagraph2(node));
+      paragraphs.push(cloneParagraph(node));
     }
   }
   return paragraphs;
@@ -1852,7 +1590,7 @@ function copyParagraphs(model, startIndex, endIndex = startIndex) {
 function pasteParagraphs(model, index, paragraphs) {
   const next = cloneDocModel(model);
   const safeIndex = Math.max(0, Math.min(index, next.nodes.length));
-  const copies = paragraphs.map(cloneParagraph2);
+  const copies = paragraphs.map(cloneParagraph);
   next.nodes.splice(safeIndex, 0, ...copies);
   return next;
 }
@@ -2009,7 +1747,7 @@ async function serializeDocModel(model, basePackage) {
     model,
     basePackage ? mapsToWasmPackage(basePackage) : void 0
   );
-  const { parseDocx: parseDocx2 } = await import("./src-XA2NEWYM.js");
+  const { parseDocx: parseDocx2 } = await import("./src-PJYTN6DB.js");
   return parseDocx2(bytes);
 }
 async function serializeDocx(model, basePackage) {
@@ -2369,6 +2107,13 @@ function reconcilePageCountCandidateToTargetCountByScalingHeight(options) {
     previousScale = scale;
     previousPageCount = candidate.pageCount;
   }
+  if (!needMorePages && selectedCandidate.pageCount !== safeTargetPageCount) {
+    return {
+      pageCount: initialPageCount,
+      pages: initialPages,
+      scale: 1
+    };
+  }
   return selectedCandidate;
 }
 
@@ -3644,6 +3389,20 @@ var SerialIdleTaskQueue = class {
       this.schedulePump();
     });
   }
+  /** Drops queued work for a single key, resolving its waiters. */
+  cancel(key) {
+    const remaining = [];
+    this.pending.forEach((entry) => {
+      if (entry.key === key) {
+        entry.resolvers.forEach((resolveEntry) => {
+          resolveEntry();
+        });
+        return;
+      }
+      remaining.push(entry);
+    });
+    this.pending.splice(0, this.pending.length, ...remaining);
+  }
   /** Drops all queued tasks, resolving their waiters without running them. */
   clear() {
     const dropped = this.pending.splice(0, this.pending.length);
@@ -3828,6 +3587,29 @@ var MEASURED_BODY_FOOTER_OVERLAP_STABILITY_THRESHOLD = 1;
 var WORD_TABLE_CELL_PARAGRAPH_AUTO_LINE_TWIPS = 240;
 var WORD_TABLE_CELL_PARAGRAPH_BEFORE_TWIPS = 0;
 var WORD_TABLE_CELL_PARAGRAPH_AFTER_TWIPS = 0;
+var DOCX_IMPORT_PERFORMANCE_PREFIX = "react-docx.import";
+function markDocxImportPerformance(name) {
+  if (typeof performance === "undefined" || typeof performance.mark !== "function") {
+    return;
+  }
+  try {
+    performance.mark(name);
+  } catch {
+  }
+}
+function measureDocxImportPerformance(name, startMark, endMark) {
+  if (typeof performance === "undefined" || typeof performance.measure !== "function") {
+    return;
+  }
+  try {
+    performance.measure(name, startMark, endMark);
+  } catch {
+  }
+}
+function createDocxImportPerformanceTraceName(fileName) {
+  const normalizedName = fileName.replace(/[^a-z0-9._-]+/gi, "_").slice(0, 80);
+  return `${DOCX_IMPORT_PERFORMANCE_PREFIX}.${Date.now()}.${normalizedName}`;
+}
 var TABLE_ROW_SLICE_VISUAL_BLEED_PX = 1;
 var TABLE_CELL_SLICE_FULLY_VISIBLE_BOTTOM_BUFFER_PX = 4;
 var DEFAULT_SPLIT_PARAGRAPH_LINE_TWIPS = 259;
@@ -3915,6 +3697,7 @@ var tableEstimatedRowHeightsByNode = /* @__PURE__ */ new WeakMap();
 var paragraphExplicitIndentBySourceXml = /* @__PURE__ */ new Map();
 var paragraphDropCapBySourceXml = /* @__PURE__ */ new Map();
 var paragraphTrackedMarkupBySourceXml = /* @__PURE__ */ new Map();
+var paragraphCommentMarkupBySourceXml = /* @__PURE__ */ new Map();
 var paragraphMeasureCanvasContext;
 var textWidthByFontAndValue = /* @__PURE__ */ new Map();
 var estimatedTextAdvanceWidthByFontAndValue = /* @__PURE__ */ new Map();
@@ -6412,15 +6195,6 @@ function paragraphHasOnlyWhitespaceText(paragraph) {
 function paragraphContainsSectionBreakProperties(paragraph) {
   return /<w:sectPr\b/i.test(paragraph.sourceXml ?? "");
 }
-function paragraphAbsoluteFloatingAnchorsDependOnParagraphFlow(paragraph) {
-  return paragraph.children.some((child) => {
-    if (child.type !== "image" || !shouldRenderAbsoluteFloatingImage(child) || child.syntheticTextBox !== true || !floatingTextBoxVisibleTextFromImage(child) || child.floating?.behindDocument !== true) {
-      return false;
-    }
-    const verticalRelativeTo = child.floating?.verticalRelativeTo?.trim().toLowerCase();
-    return verticalRelativeTo === void 0 || verticalRelativeTo === "" || verticalRelativeTo === "paragraph" || verticalRelativeTo === "line";
-  });
-}
 function likelyFullPageCoverImageRelativeToContentBox(image, pageContentWidthPx, pageContentHeightPx) {
   if (!shouldRenderAbsoluteFloatingImage(image) || !image.floating) {
     return false;
@@ -7216,7 +6990,7 @@ function splitParagraphAtExplicitColumnBreaks(paragraph) {
   }
   appendCurrentSegment();
   return paragraphChildren.map((children, segmentIndex) => {
-    const nextStyle = cloneParagraphStyle2(paragraph.style);
+    const nextStyle = cloneParagraphStyle(paragraph.style);
     if (segmentIndex > 0 && nextStyle?.numbering) {
       nextStyle.numbering = void 0;
     }
@@ -8648,8 +8422,11 @@ function emptyParagraphLineScaleForFontFamily(fontFamily) {
   }
   return WORD_EMPTY_PARAGRAPH_LINE_SCALE;
 }
+function paragraphRendersTextFreeLine(paragraph) {
+  return paragraphHasOnlyWhitespaceText(paragraph) || paragraphIsFloatingImageAnchorOnly(paragraph);
+}
 function resolveParagraphSingleLineAutoScale(paragraph, fontFamily) {
-  if (paragraphHasOnlyWhitespaceText(paragraph)) {
+  if (paragraphRendersTextFreeLine(paragraph)) {
     return emptyParagraphLineScaleForFontFamily(fontFamily);
   }
   const baseScale = singleLineAutoScaleForFontFamily(fontFamily);
@@ -8922,9 +8699,7 @@ function estimateTabLeaderWrappedLineCountForParagraph(paragraph, maxLineWidthPx
     leadingSegments,
     paragraphBaseFontPx
   );
-  const tabStopPositionsPx = (paragraph.style?.tabStops ?? []).map((tabStop) => twipsToPixels(tabStop.positionTwips)).filter(
-    (positionPx) => Number.isFinite(positionPx) && positionPx > 0
-  ).sort((left, right) => left - right);
+  const tabStopPositionsPx = resolveParagraphFirstLineLeftTabStopsPx(paragraph);
   const explicitLeadingTabStopPx = tableOfContentsLeadingLeftTabStopPx(paragraph);
   const leadingReservationWidthPx = leadingSegments.length === 0 ? 0 : Number.isFinite(explicitLeadingTabStopPx) && explicitLeadingTabStopPx > 0 ? Math.max(
     leadingTextWidthPx,
@@ -9467,7 +9242,7 @@ function estimateParagraphLineHeightPx(paragraph, docGridLinePitchPx, disableDoc
     lineTwips,
     defaultLineMultiple
   );
-  const multiple = paragraphHasOnlyWhitespaceText(paragraph) ? Math.max(
+  const multiple = paragraphRendersTextFreeLine(paragraph) ? Math.max(
     MIN_AUTO_LINE_MULTIPLE,
     Number((resolvedAutoMultiple * singleLineScale).toFixed(3))
   ) : calibrateAutoLineSpacingMultiple(
@@ -9526,10 +9301,7 @@ function estimateParagraphHeightPx(paragraph, availableWidthPx, numberingDefinit
     numberingLabel
   );
   const absoluteFloatingAnchorOnlyParagraph = paragraphIsAbsoluteFloatingImageAnchorOnly(paragraph);
-  const sectionBreakAnchorCarryoverParagraph = paragraphIsSectionBreakAnchorCarryover(paragraph);
-  const collapsibleAbsoluteFloatingAnchorOnlyParagraph = absoluteFloatingAnchorOnlyParagraph && (!paragraphAbsoluteFloatingAnchorsDependOnParagraphFlow(paragraph) || sectionBreakAnchorCarryoverParagraph);
-  const paragraphFlowAnchoredAbsoluteFloatingAnchorOnlyParagraph = absoluteFloatingAnchorOnlyParagraph && !collapsibleAbsoluteFloatingAnchorOnlyParagraph;
-  const decorativeBehindTextAnchorOnlyParagraph = paragraphActsAsDecorativeBehindTextBackgroundOverlay(paragraph);
+  const collapsibleAbsoluteFloatingAnchorOnlyParagraph = absoluteFloatingAnchorOnlyParagraph && paragraphIsSectionBreakAnchorCarryover(paragraph);
   const inlineImageHeightPx = paragraph.children.reduce((largest, child) => {
     if (child.type !== "image") {
       return largest;
@@ -9548,14 +9320,14 @@ function estimateParagraphHeightPx(paragraph, availableWidthPx, numberingDefinit
       estimateWrappedFloatingImageFootprintPx(paragraph, child)
     );
   }, 0);
-  const emptyParagraphHeightPx = decorativeBehindTextAnchorOnlyParagraph ? 0 : paragraphIsEffectivelyEmpty(paragraph) ? lineHeightPx + EMPTY_PARAGRAPH_EXTRA_HEIGHT_PX : 0;
+  const emptyParagraphHeightPx = paragraphIsEffectivelyEmpty(paragraph) ? lineHeightPx + EMPTY_PARAGRAPH_EXTRA_HEIGHT_PX : 0;
   const topBorderInsetPx = paragraphBorderInsetPx(
     paragraph.style?.borders?.top
   );
   const bottomBorderInsetPx = paragraphBorderInsetPx(
     paragraph.style?.borders?.bottom
   );
-  const textFlowHeightPx = collapsibleAbsoluteFloatingAnchorOnlyParagraph ? 0 : paragraphFlowAnchoredAbsoluteFloatingAnchorOnlyParagraph ? MIN_PARAGRAPH_LINE_HEIGHT_PX : (
+  const textFlowHeightPx = collapsibleAbsoluteFloatingAnchorOnlyParagraph ? 0 : (
     // When excluding the wrapped-float footprint, the dual-wrapped block
     // height spans the image; but the rendered paragraph only occupies its
     // text lines while the float overhangs. Use the text-line height so the
@@ -9563,7 +9335,7 @@ function estimateParagraphHeightPx(paragraph, availableWidthPx, numberingDefinit
     dualWrappedLayout && !excludeWrappedFloatingImageFootprint ? wrappedPretextParagraphBlockHeightPx(dualWrappedLayout.layout) : lineHeightPx * lineCount
   );
   const contentHeightPx = Math.max(
-    collapsibleAbsoluteFloatingAnchorOnlyParagraph || decorativeBehindTextAnchorOnlyParagraph ? 0 : paragraphFlowAnchoredAbsoluteFloatingAnchorOnlyParagraph ? MIN_PARAGRAPH_LINE_HEIGHT_PX : lineHeightPx,
+    collapsibleAbsoluteFloatingAnchorOnlyParagraph ? 0 : lineHeightPx,
     textFlowHeightPx,
     inlineImageHeightPx,
     wrappedFloatingImageHeightPx,
@@ -10890,11 +10662,6 @@ function buildDocumentPageNodeSegments(model, pageContentHeightPx, pageContentWi
       previousParagraphAfterPx = 0;
       continue;
     }
-    if (node.type === "paragraph" && paragraphActsAsDecorativeBehindTextBackgroundOverlay(node)) {
-      currentPageSegments.push({ nodeIndex });
-      previousParagraphAfterPx = 0;
-      continue;
-    }
     if (node.type === "paragraph" && paragraphCollapsesIntoPreviousParagraph(node, model.nodes[nodeIndex - 1])) {
       continue;
     }
@@ -12168,7 +11935,7 @@ function paragraphLineHeight(paragraph, docGridLinePitchPx, disableDocGridSnap =
       lineTwips,
       DEFAULT_PARAGRAPH_LINE_MULTIPLE
     );
-    const lineMultiple = paragraphHasOnlyWhitespaceText(paragraph) ? Math.max(
+    const lineMultiple = paragraphRendersTextFreeLine(paragraph) ? Math.max(
       MIN_AUTO_LINE_MULTIPLE,
       Number((resolvedAutoMultiple * singleLineScale).toFixed(3))
     ) : calibrateAutoLineSpacingMultiple(
@@ -12515,8 +12282,7 @@ function paragraphBlockStyle(paragraph, numberingDefinitions, headingStyles, doc
   const suppressTocNumberingTextIndent = isTableOfContentsParagraph(paragraph) && paragraphHasNumbering(paragraph);
   const suppressIndentForFloatingAnchorOnlyParagraph = paragraphIsFloatingImageAnchorOnly(paragraph);
   const suppressStackingContextForBehindTextAnchorOnlyParagraph = paragraphIsBehindTextAbsoluteFloatingImageAnchorOnly(paragraph);
-  const suppressFlowFootprintForBehindTextAnchorOnlyParagraph = paragraphActsAsDecorativeBehindTextBackgroundOverlay(paragraph);
-  const reservedMinHeightPx = suppressFlowFootprintForBehindTextAnchorOnlyParagraph ? void 0 : paragraphIsEffectivelyEmpty(paragraph) ? estimateParagraphLineHeightPx(
+  const reservedMinHeightPx = paragraphIsEffectivelyEmpty(paragraph) ? estimateParagraphLineHeightPx(
     paragraph,
     docGridLinePitchPx,
     disableDocGridSnap
@@ -12535,15 +12301,13 @@ function paragraphBlockStyle(paragraph, numberingDefinitions, headingStyles, doc
     // line-box strut tracks the actual content instead of the browser's
     // 16px default, which inflates lines for sub-12pt paragraphs.
     fontSize: `${paragraphBaseFontSizePx(paragraph)}px`,
-    lineHeight: suppressFlowFootprintForBehindTextAnchorOnlyParagraph ? 0 : paragraphLineHeight(paragraph, docGridLinePitchPx, disableDocGridSnap),
-    ...suppressFlowFootprintForBehindTextAnchorOnlyParagraph ? {
-      height: 0,
-      marginTop: 0,
-      marginBottom: 0
-    } : {
-      marginTop: beforeSpacing,
-      marginBottom: afterSpacing
-    },
+    lineHeight: paragraphLineHeight(
+      paragraph,
+      docGridLinePitchPx,
+      disableDocGridSnap
+    ),
+    marginTop: beforeSpacing,
+    marginBottom: afterSpacing,
     marginLeft: suppressIndentForFloatingAnchorOnlyParagraph ? 0 : leftIndent,
     marginRight: suppressIndentForFloatingAnchorOnlyParagraph ? 0 : rightIndent,
     backgroundColor: paragraph.style?.backgroundColor,
@@ -12801,10 +12565,7 @@ function tableOfContentsLeadingLeftTabStopPx(paragraph) {
   if (!isTableOfContentsParagraph(paragraph)) {
     return void 0;
   }
-  const leftTabStopPositionsPx = (paragraph.style?.tabStops ?? []).filter((tabStop) => tabStop.alignment === "left").map((tabStop) => twipsToPixels(tabStop.positionTwips)).filter(
-    (positionPx) => Number.isFinite(positionPx) && positionPx > 0
-  ).sort((left, right) => left - right);
-  return leftTabStopPositionsPx[0];
+  return resolveParagraphFirstLineLeftTabStopsPx(paragraph)[0];
 }
 function paragraphContainsTabCharacter(paragraph) {
   return paragraph.children.some((child) => {
@@ -13854,6 +13615,81 @@ function resolveParagraphTrackedMarkup(paragraph) {
   setCacheEntry(paragraphTrackedMarkupBySourceXml, sourceXml, resolved);
   return resolved;
 }
+function resolveParagraphCommentMarkup(paragraph) {
+  const sourceXml = paragraph.sourceXml ?? "";
+  if (!sourceXml || !/commentRange|commentReference/i.test(sourceXml)) {
+    return void 0;
+  }
+  const cached = paragraphCommentMarkupBySourceXml.get(sourceXml);
+  if (cached !== void 0) {
+    return cached ?? void 0;
+  }
+  const rangeStartById = /* @__PURE__ */ new Map();
+  const rangeEndById = /* @__PURE__ */ new Map();
+  for (const match of sourceXml.matchAll(
+    /<w:commentRangeStart\b[^>]*w:id="(-?\d+)"[^>]*\/?>/gi
+  )) {
+    const commentId = Number.parseInt(match[1] ?? "", 10);
+    if (Number.isFinite(commentId) && match.index !== void 0) {
+      rangeStartById.set(commentId, match.index + match[0].length);
+    }
+  }
+  for (const match of sourceXml.matchAll(
+    /<w:commentRangeEnd\b[^>]*w:id="(-?\d+)"[^>]*\/?>/gi
+  )) {
+    const commentId = Number.parseInt(match[1] ?? "", 10);
+    if (Number.isFinite(commentId) && match.index !== void 0) {
+      rangeEndById.set(commentId, match.index);
+    }
+  }
+  const ranges = [];
+  const rangeIds = /* @__PURE__ */ new Set([
+    ...rangeStartById.keys(),
+    ...rangeEndById.keys()
+  ]);
+  rangeIds.forEach((commentId) => {
+    const start = rangeStartById.get(commentId) ?? 0;
+    const end = rangeEndById.get(commentId) ?? sourceXml.length;
+    if (end > start) {
+      ranges.push({ commentId, start, end });
+    }
+  });
+  if (ranges.length === 0) {
+    setCacheEntry(paragraphCommentMarkupBySourceXml, sourceXml, null);
+    return void 0;
+  }
+  const commentIdsByVisibleChildIndex = [];
+  let visibleChildIndex = 0;
+  const runPattern = /<w:r\b[\s\S]*?<\/w:r>/gi;
+  for (const runMatch of sourceXml.matchAll(runPattern)) {
+    const runXml = runMatch[0] ?? "";
+    if (!runXml) {
+      continue;
+    }
+    const runStart = runMatch.index ?? 0;
+    const contentRunXml = stripTextBoxContentFromRunXml(runXml);
+    const visibleTokens = parseTrackedRunTokens(contentRunXml, false);
+    const hasImage = /<w:(?:drawing|pict)\b/i.test(runXml);
+    const visibleChildCount = visibleTokens.filter((token) => token.text.length > 0 || token.isNote).length + (hasImage ? 1 : 0);
+    if (visibleChildCount === 0) {
+      continue;
+    }
+    const activeCommentIds = ranges.filter((range) => runStart >= range.start && runStart < range.end).map((range) => range.commentId);
+    if (activeCommentIds.length > 0) {
+      for (let index = 0; index < visibleChildCount; index += 1) {
+        commentIdsByVisibleChildIndex[visibleChildIndex + index] = activeCommentIds;
+      }
+    }
+    visibleChildIndex += visibleChildCount;
+  }
+  if (commentIdsByVisibleChildIndex.length === 0) {
+    setCacheEntry(paragraphCommentMarkupBySourceXml, sourceXml, null);
+    return void 0;
+  }
+  const resolved = { commentIdsByVisibleChildIndex };
+  setCacheEntry(paragraphCommentMarkupBySourceXml, sourceXml, resolved);
+  return resolved;
+}
 function instructionTextToPageFieldKind(rawInstruction) {
   const normalized = decodeXmlText(rawInstruction).replace(/\s+/g, " ").trim().toUpperCase();
   if (!normalized || normalized.includes("PAGEREF")) {
@@ -13900,11 +13736,16 @@ function paragraphPageFieldSequence(paragraph) {
   }
   return fields;
 }
+var pageFieldValueSequenceBySourceXml = /* @__PURE__ */ new Map();
 function paragraphPageFieldValueSequence(paragraph) {
   const xml = paragraph.sourceXml ?? "";
   if (!xml) {
     return [];
   }
+  const cached = pageFieldValueSequenceBySourceXml.get(xml);
+  if (cached) {
+    return cached;
+  }
   const values = [];
   const fieldStack = [];
   const tokenPattern = /<w:fldSimple\b[^>]*\bw:instr="([^"]+)"[^>]*>[\s\S]*?<\/w:fldSimple>|<w:r\b[\s\S]*?<\/w:r>/gi;
@@ -13984,13 +13825,19 @@ function paragraphPageFieldValueSequence(paragraph) {
       fieldStack.pop();
     }
   }
+  setCacheEntry(pageFieldValueSequenceBySourceXml, xml, values);
   return values;
 }
+var styleRefFieldValueSequenceBySourceXml = /* @__PURE__ */ new Map();
 function paragraphStyleRefFieldValueSequence(paragraph) {
   const xml = paragraph.sourceXml ?? "";
   if (!xml) {
     return [];
   }
+  const cached = styleRefFieldValueSequenceBySourceXml.get(xml);
+  if (cached) {
+    return cached;
+  }
   const values = [];
   const fieldStack = [];
   const tokenPattern = /<w:fldSimple\b[^>]*\bw:instr="([^"]+)"[^>]*>[\s\S]*?<\/w:fldSimple>|<w:r\b[\s\S]*?<\/w:r>/gi;
@@ -14070,6 +13917,7 @@ function paragraphStyleRefFieldValueSequence(paragraph) {
       fieldStack.pop();
     }
   }
+  setCacheEntry(styleRefFieldValueSequenceBySourceXml, xml, values);
   return values;
 }
 function normalizeStyleRefTarget(value) {
@@ -14204,6 +14052,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
   const showTrackedChanges = options?.showTrackedChanges === true;
   const showTrackedInlineMarkup = showTrackedChanges && options?.trackedMarkupMode !== "gutter";
   const trackedMarkup = showTrackedInlineMarkup ? resolveParagraphTrackedMarkup(paragraph) : void 0;
+  const commentMarkup = options?.showCommentHighlights === true ? resolveParagraphCommentMarkup(paragraph) : void 0;
   const tocParagraphLevel = tableOfContentsLevel(paragraph);
   const tocLinkColor = tocParagraphLevel ? options?.tocLinkColorByLevel?.[tocParagraphLevel] : void 0;
   const floatingAnchorOriginCorrectionXPx = Number.isFinite(
@@ -14245,8 +14094,19 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
     });
   };
   const currentTrackedInlineChange = () => trackedMarkup?.inlineChangeByVisibleChildIndex[trackedVisibleChildCursor];
+  const currentCommentHighlightStyle = () => {
+    const commentIds = commentMarkup?.commentIdsByVisibleChildIndex[trackedVisibleChildCursor];
+    if (!commentIds || commentIds.length === 0) {
+      return void 0;
+    }
+    const accent = commentAccentColor(documentTheme);
+    return {
+      backgroundColor: documentTheme === "dark" ? "rgba(251, 191, 36, 0.24)" : "rgba(251, 191, 36, 0.3)",
+      borderBottom: `2px solid ${accent}`
+    };
+  };
   const consumeTrackedVisibleChild = (child) => {
-    if (!trackedMarkup) {
+    if (!trackedMarkup && !commentMarkup) {
       return;
     }
     if (child.type === "form-field") {
@@ -14415,20 +14275,26 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
   const resolveFieldText = (value, preferredZone) => resolvePageFieldText(resolveStyleRefFieldText(value), preferredZone);
   const trackedLinkStyle = (style, trackedInlineChange) => {
     if (!isTableOfContentsParagraph(paragraph)) {
-      return trackedInlineStyle(
-        linkStyleToCss(style, documentTheme),
-        trackedInlineChange
-      );
+      return {
+        ...trackedInlineStyle(
+          linkStyleToCss(style, documentTheme),
+          trackedInlineChange
+        ),
+        ...currentCommentHighlightStyle()
+      };
     }
     const base = runStyleToCss(style, documentTheme);
-    return trackedInlineStyle(
-      {
-        ...base,
-        color: tocLinkColor ? themedRunColor(tocLinkColor, documentTheme) : "inherit",
-        textDecoration: "none"
-      },
-      trackedInlineChange
-    );
+    return {
+      ...trackedInlineStyle(
+        {
+          ...base,
+          color: tocLinkColor ? themedRunColor(tocLinkColor, documentTheme) : "inherit",
+          textDecoration: "none"
+        },
+        trackedInlineChange
+      ),
+      ...currentCommentHighlightStyle()
+    };
   };
   const usesExternalHorizontalAnchorOrigin = (image) => {
     const horizontalRelativeTo = image.floating?.horizontalRelativeTo?.trim().toLowerCase();
@@ -14475,10 +14341,13 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         trackTextAdvance(text, child.style);
         return;
       }
-      const trackedStyle = trackedInlineStyle(
-        runStyleToCss(child.style, documentTheme),
-        trackedInlineChange
-      );
+      const trackedStyle = {
+        ...trackedInlineStyle(
+          runStyleToCss(child.style, documentTheme),
+          trackedInlineChange
+        ),
+        ...currentCommentHighlightStyle()
+      };
       if (text === "	" && !useTabLeaderLayout && !useAnchoredTabLayout) {
         target.push(
           /* @__PURE__ */ jsx("span", { style: tabTextStyle(child.style, trackedStyle), children: "\xA0" }, key)
@@ -14734,10 +14603,13 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       }
       return;
     }
-    const textStyle = trackedInlineStyle(
-      runStyleToCss(child.style, documentTheme),
-      trackedInlineChange
-    );
+    const textStyle = {
+      ...trackedInlineStyle(
+        runStyleToCss(child.style, documentTheme),
+        trackedInlineChange
+      ),
+      ...currentCommentHighlightStyle()
+    };
     const noteLabel = noteMarkerLabel(
       child.noteReference,
       safeNoteMarkerIndexes.footnote,
@@ -15702,23 +15574,23 @@ function textWithListType(text, listType) {
   const normalized = stripListPrefix(text);
   return listType === "unordered" ? `\u2022 ${normalized}` : `1. ${normalized}`;
 }
-function cloneParagraphBorderStyle2(border) {
+function cloneParagraphBorderStyle(border) {
   return border ? { ...border } : void 0;
 }
-function cloneParagraphBorderSet2(borders) {
+function cloneParagraphBorderSet(borders) {
   if (!borders) {
     return void 0;
   }
   return {
-    top: cloneParagraphBorderStyle2(borders.top),
-    right: cloneParagraphBorderStyle2(borders.right),
-    bottom: cloneParagraphBorderStyle2(borders.bottom),
-    left: cloneParagraphBorderStyle2(borders.left),
-    between: cloneParagraphBorderStyle2(borders.between),
-    bar: cloneParagraphBorderStyle2(borders.bar)
+    top: cloneParagraphBorderStyle(borders.top),
+    right: cloneParagraphBorderStyle(borders.right),
+    bottom: cloneParagraphBorderStyle(borders.bottom),
+    left: cloneParagraphBorderStyle(borders.left),
+    between: cloneParagraphBorderStyle(borders.between),
+    bar: cloneParagraphBorderStyle(borders.bar)
   };
 }
-function cloneParagraphStyle2(style) {
+function cloneParagraphStyle(style) {
   if (!style) {
     return void 0;
   }
@@ -15728,12 +15600,12 @@ function cloneParagraphStyle2(style) {
     spacing: style.spacing ? { ...style.spacing } : void 0,
     indent: style.indent ? { ...style.indent } : void 0,
     tabStops: style.tabStops ? style.tabStops.map((tabStop) => ({ ...tabStop })) : void 0,
-    borders: cloneParagraphBorderSet2(style.borders),
+    borders: cloneParagraphBorderSet(style.borders),
     dropCap: style.dropCap ? { ...style.dropCap } : void 0
   };
 }
 function splitParagraphStyleWithDefaultSpacing(style, sourceXml) {
-  const clonedStyle = cloneParagraphStyle2(style);
+  const clonedStyle = cloneParagraphStyle(style);
   if (sourceXml || clonedStyle?.styleId) {
     return clonedStyle;
   }
@@ -15752,7 +15624,7 @@ function splitParagraphStyleWithDefaultSpacing(style, sourceXml) {
     }
   };
 }
-function cloneTableBoxSpacing2(spacing) {
+function cloneTableBoxSpacing(spacing) {
   if (!spacing) {
     return void 0;
   }
@@ -15763,7 +15635,7 @@ function cloneTableBoxSpacing2(spacing) {
     leftTwips: spacing.leftTwips
   };
 }
-function cloneTableBorderStyle2(border) {
+function cloneTableBorderStyle(border) {
   if (!border) {
     return void 0;
   }
@@ -15773,19 +15645,19 @@ function cloneTableBorderStyle2(border) {
     sizeEighthPt: border.sizeEighthPt
   };
 }
-function cloneTableBorderSet2(borders) {
+function cloneTableBorderSet(borders) {
   if (!borders) {
     return void 0;
   }
   return {
-    top: cloneTableBorderStyle2(borders.top),
-    right: cloneTableBorderStyle2(borders.right),
-    bottom: cloneTableBorderStyle2(borders.bottom),
-    left: cloneTableBorderStyle2(borders.left),
-    insideH: cloneTableBorderStyle2(borders.insideH),
-    insideV: cloneTableBorderStyle2(borders.insideV),
-    tl2br: cloneTableBorderStyle2(borders.tl2br),
-    tr2bl: cloneTableBorderStyle2(borders.tr2bl)
+    top: cloneTableBorderStyle(borders.top),
+    right: cloneTableBorderStyle(borders.right),
+    bottom: cloneTableBorderStyle(borders.bottom),
+    left: cloneTableBorderStyle(borders.left),
+    insideH: cloneTableBorderStyle(borders.insideH),
+    insideV: cloneTableBorderStyle(borders.insideV),
+    tl2br: cloneTableBorderStyle(borders.tl2br),
+    tr2bl: cloneTableBorderStyle(borders.tr2bl)
   };
 }
 function cloneTableCellStyle(style) {
@@ -15794,8 +15666,8 @@ function cloneTableCellStyle(style) {
   }
   return {
     ...style,
-    marginTwips: cloneTableBoxSpacing2(style.marginTwips),
-    borders: cloneTableBorderSet2(style.borders)
+    marginTwips: cloneTableBoxSpacing(style.marginTwips),
+    borders: cloneTableBorderSet(style.borders)
   };
 }
 function cloneTableRowStyle(style) {
@@ -15810,7 +15682,7 @@ function createEmptyParagraphFromTemplate(template) {
   const nextTextStyle = cloneTextStyle2(firstRunStyle(template));
   return {
     type: "paragraph",
-    style: cloneParagraphStyle2(template?.style),
+    style: cloneParagraphStyle(template?.style),
     children: [
       {
         type: "text",
@@ -15879,7 +15751,7 @@ function shiftListIndent(indent, levelDelta) {
   };
 }
 function ensurePrefixListIndent(paragraph) {
-  const clonedStyle = cloneParagraphStyle2(paragraph.style) ?? {};
+  const clonedStyle = cloneParagraphStyle(paragraph.style) ?? {};
   const existingIndent = clonedStyle.indent;
   const hasMeaningfulLeftIndent = Number.isFinite(existingIndent?.leftTwips) && Math.abs(existingIndent?.leftTwips ?? 0) > 0;
   const hasMeaningfulFirstLine = Number.isFinite(existingIndent?.firstLineTwips) && Math.abs(existingIndent?.firstLineTwips ?? 0) > 0;
@@ -15899,7 +15771,7 @@ function ensurePrefixListIndent(paragraph) {
   return true;
 }
 function clearAutoPrefixListIndent(paragraph) {
-  const clonedStyle = cloneParagraphStyle2(paragraph.style);
+  const clonedStyle = cloneParagraphStyle(paragraph.style);
   const existingIndent = clonedStyle?.indent;
   if (!clonedStyle || !existingIndent) {
     return false;
@@ -16026,11 +15898,22 @@ function parseEmbeddedTableRuntimeKey(tableRuntimeKey) {
     descendants
   };
 }
+var columnWidthsByTable = /* @__PURE__ */ new WeakMap();
 function columnWidthsFromTableDefinition(table, columnCount) {
+  const cachedByCount = columnWidthsByTable.get(table);
+  if (cachedByCount?.has(columnCount)) {
+    return cachedByCount.get(columnCount);
+  }
+  const resolved = computeColumnWidthsFromTableDefinition(table, columnCount);
+  const cache = cachedByCount ?? /* @__PURE__ */ new Map();
+  cache.set(columnCount, resolved);
+  columnWidthsByTable.set(table, cache);
+  return resolved;
+}
+function computeColumnWidthsFromTableDefinition(table, columnCount) {
   const gridWidths = table.style?.columnWidthsTwips;
   const rowDerivedWidths = deriveColumnWidthsFromTableRows(table, columnCount);
   if (gridWidths && gridWidths.length === columnCount) {
-    console.log("[colw]", columnCount, gridWidths.length, !!rowDerivedWidths, gridConflictsWithRowWidths(table, gridWidths));
     if (rowDerivedWidths && rowDerivedWidths.length > 0 && gridConflictsWithRowWidths(table, gridWidths)) {
       return rowDerivedWidths;
     }
@@ -16517,7 +16400,7 @@ function applyParagraphBorderPresetForRangeEntry(borders, preset, remove, index,
   if (total <= 1) {
     return applyParagraphBorderPreset(borders, preset, remove);
   }
-  const nextBorders = cloneParagraphBorderSet2(borders) ?? {};
+  const nextBorders = cloneParagraphBorderSet(borders) ?? {};
   const visibleBorder = toolbarParagraphBorderStyle(
     resolvePreferredParagraphBorder(nextBorders)
   );
@@ -16598,7 +16481,7 @@ function tableBorderPresetState(borders, selectedCellBorders) {
   };
 }
 function applyParagraphBorderPreset(borders, preset, remove = false) {
-  const nextBorders = cloneParagraphBorderSet2(borders) ?? {};
+  const nextBorders = cloneParagraphBorderSet(borders) ?? {};
   const visibleBorder = toolbarParagraphBorderStyle(
     resolvePreferredParagraphBorder(nextBorders)
   );
@@ -16654,7 +16537,7 @@ function applyParagraphBorderPreset(borders, preset, remove = false) {
   return nextBorders;
 }
 function applyTableBorderPreset(borders, preset, remove = false) {
-  const nextBorders = cloneTableBorderSet2(borders) ?? {};
+  const nextBorders = cloneTableBorderSet(borders) ?? {};
   const visibleBorder = toolbarTableBorderStyle(
     resolvePreferredTableBorder(nextBorders)
   );
@@ -17571,6 +17454,127 @@ function collectTrackedChangesFromModel(model) {
   });
   return trackedChanges;
 }
+function decodeCommentRangeText(rangeXml) {
+  const texts = [];
+  for (const match of rangeXml.matchAll(
+    /<w:t\b[^>]*>([\s\S]*?)<\/w:t>/gi
+  )) {
+    texts.push(decodeXmlText(match[1] ?? ""));
+  }
+  const combined = texts.join("").replace(/\s+/g, " ").trim();
+  if (!combined) {
+    return void 0;
+  }
+  return combined.length > 120 ? `${combined.slice(0, 119)}\u2026` : combined;
+}
+function resolveCommentAnchorText(sourceXml, commentId) {
+  const startMatch = sourceXml.match(
+    new RegExp(`<w:commentRangeStart\\b[^>]*w:id="${commentId}"[^>]*/?>`, "i")
+  );
+  const endMatch = sourceXml.match(
+    new RegExp(`<w:commentRangeEnd\\b[^>]*w:id="${commentId}"[^>]*/?>`, "i")
+  );
+  const startIndex = startMatch?.index !== void 0 ? startMatch.index + startMatch[0].length : (
+    // Range opened in an earlier paragraph: take from the paragraph start.
+    endMatch?.index !== void 0 ? 0 : void 0
+  );
+  if (startIndex === void 0) {
+    return void 0;
+  }
+  const endIndex = endMatch?.index !== void 0 ? endMatch.index : sourceXml.length;
+  if (endIndex <= startIndex) {
+    return void 0;
+  }
+  return decodeCommentRangeText(sourceXml.slice(startIndex, endIndex));
+}
+function collectCommentsFromModel(model) {
+  const definitions = model.metadata.comments ?? [];
+  if (definitions.length === 0) {
+    return [];
+  }
+  const definitionById = new Map(
+    definitions.map((definition) => [definition.id, definition])
+  );
+  const comments = [];
+  const appendParagraphComments = (paragraph, nodeIndex, location) => {
+    const sourceXml = paragraph.sourceXml ?? "";
+    if (!sourceXml || !/commentReference/i.test(sourceXml)) {
+      return;
+    }
+    for (const match of sourceXml.matchAll(
+      /<w:commentReference\b[^>]*w:id="(-?\d+)"/gi
+    )) {
+      const commentId = Number.parseInt(match[1] ?? "", 10);
+      const definition = Number.isFinite(commentId) ? definitionById.get(commentId) : void 0;
+      if (!definition) {
+        continue;
+      }
+      comments.push({
+        id: `${paragraphLocationKey(location)}:comment:${commentId}`,
+        commentId,
+        author: definition.author,
+        initials: definition.initials,
+        date: definition.date,
+        text: definition.text,
+        parentId: definition.parentId,
+        resolved: definition.resolved,
+        anchorText: resolveCommentAnchorText(sourceXml, commentId),
+        nodeIndex,
+        location: location.kind === "paragraph" ? { kind: "paragraph", nodeIndex: location.nodeIndex } : {
+          kind: "table-cell",
+          tableIndex: location.tableIndex,
+          rowIndex: location.rowIndex,
+          cellIndex: location.cellIndex,
+          paragraphIndex: location.paragraphIndex
+        }
+      });
+    }
+  };
+  model.nodes.forEach((node, nodeIndex) => {
+    if (node.type === "paragraph") {
+      appendParagraphComments(node, nodeIndex, {
+        kind: "paragraph",
+        nodeIndex
+      });
+      return;
+    }
+    node.rows.forEach((row, rowIndex) => {
+      row.cells.forEach((cell, cellIndex) => {
+        const directParagraphs = tableCellParagraphs(cell.nodes);
+        directParagraphs.forEach((paragraph, paragraphIndex) => {
+          appendParagraphComments(paragraph, nodeIndex, {
+            kind: "table-cell",
+            tableIndex: nodeIndex,
+            rowIndex,
+            cellIndex,
+            paragraphIndex
+          });
+        });
+        const nestedParagraphs = tableCellParagraphsRecursively(
+          cell.nodes
+        ).filter((paragraph) => !directParagraphs.includes(paragraph));
+        nestedParagraphs.forEach((paragraph, nestedParagraphIndex) => {
+          appendParagraphComments(paragraph, nodeIndex, {
+            kind: "table-cell",
+            tableIndex: nodeIndex,
+            rowIndex,
+            cellIndex,
+            paragraphIndex: -(nestedParagraphIndex + 1)
+          });
+        });
+      });
+    });
+  });
+  return comments;
+}
+function commentAccentColor(documentTheme) {
+  return documentTheme === "dark" ? "#fbbf24" : "#d97706";
+}
+function estimateCommentCardHeight(comment) {
+  const snippet = comment.text || "Comment";
+  const lines = Math.max(1, Math.ceil(snippet.length / 30));
+  return Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, 34 + lines * 14);
+}
 function trackedChangeKindLabel(kind) {
   switch (kind) {
     case "insertion":
@@ -17619,15 +17623,15 @@ function trackedChangeAccentColor(kind, documentTheme) {
       return palette.format;
   }
 }
-function trackedChangeSortTuple(change) {
-  if (change.location.kind === "paragraph") {
-    return [change.location.nodeIndex, 0, 0, 0];
+function gutterAnnotationSortTuple(location) {
+  if (location.kind === "paragraph") {
+    return [location.nodeIndex, 0, 0, 0];
   }
   return [
-    change.location.tableIndex,
-    change.location.rowIndex,
-    change.location.cellIndex,
-    change.location.paragraphIndex
+    location.tableIndex,
+    location.rowIndex,
+    location.cellIndex,
+    location.paragraphIndex
   ];
 }
 function trackedChangeBelongsToPageSegments(location, pageSegments) {
@@ -17646,10 +17650,10 @@ function trackedChangeBelongsToPageSegments(location, pageSegments) {
     return location.rowIndex >= segment.tableRowRange.startRowIndex && location.rowIndex < segment.tableRowRange.endRowIndex;
   });
 }
-function resolveTrackedChangePageIndex(change, pageNodeSegmentsByPage) {
+function resolveGutterAnnotationPageIndex(location, pageNodeSegmentsByPage) {
   for (let pageIndex = 0; pageIndex < pageNodeSegmentsByPage.length; pageIndex += 1) {
     if (trackedChangeBelongsToPageSegments(
-      change.location,
+      location,
       pageNodeSegmentsByPage[pageIndex] ?? []
     )) {
       return pageIndex;
@@ -17704,30 +17708,30 @@ function estimateTrackedChangeCardHeight(change) {
   const lines = Math.max(1, Math.ceil(snippet.length / 30));
   return Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, 34 + lines * 14);
 }
-function layoutTrackedChangesForPage(changes, anchorByChangeId, cardHeightsByChangeId, pageWidthPx, pageHeightPx) {
-  if (changes.length === 0) {
+function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsByChangeId, pageWidthPx, pageHeightPx) {
+  if (annotations.length === 0) {
     return [];
   }
   const fallbackStride = Math.max(
     18,
-    pageHeightPx / Math.max(1, changes.length + 1)
+    pageHeightPx / Math.max(1, annotations.length + 1)
   );
-  const withAnchors = changes.map((change, index) => {
+  const withAnchors = annotations.map((annotation, index) => {
     const defaultAnchor = Math.min(
       Math.max(10, Math.round((index + 1) * fallbackStride)),
       Math.max(10, pageHeightPx - 10)
     );
-    const anchorPoint = anchorByChangeId.get(change.id);
+    const anchorPoint = anchorByChangeId.get(annotation.id);
     const anchorY = anchorPoint?.y ?? defaultAnchor;
     const anchorX = anchorPoint?.x ?? Math.max(10, pageWidthPx - 10);
-    const measuredHeightPx = cardHeightsByChangeId?.get(change.id);
-    const estimatedHeightPx = estimateTrackedChangeCardHeight(change);
+    const measuredHeightPx = cardHeightsByChangeId?.get(annotation.id);
+    const estimatedHeightPx = annotation.trackedChange ? estimateTrackedChangeCardHeight(annotation.trackedChange) : annotation.comment ? estimateCommentCardHeight(annotation.comment) : TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX;
     const heightPx = Number.isFinite(measuredHeightPx) && measuredHeightPx > 0 ? Math.max(
       TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX,
       Math.round(measuredHeightPx)
     ) : estimatedHeightPx;
     return {
-      change,
+      annotation,
       anchorX: clampNumber(
         Math.round(anchorX),
         10,
@@ -18758,10 +18762,14 @@ function useDocxEditor(options = {}) {
   const [isImporting, setIsImporting] = React.useState(false);
   const [documentTheme, setDocumentThemeState] = React.useState(options.initialDocumentTheme ?? "light");
   const [showTrackedChanges, setShowTrackedChangesState] = React.useState(options.initialShowTrackedChanges ?? false);
+  const [showComments, setShowCommentsState] = React.useState(
+    options.initialShowComments ?? false
+  );
   const [paginationInfo, setPaginationInfo] = React.useState({
     currentPage: 1,
     totalPages: 1
   });
+  const activeImportAbortControllerRef = React.useRef(void 0);
   const [history, setHistory] = React.useState({
     past: [],
     future: []
@@ -19074,6 +19082,9 @@ function useDocxEditor(options = {}) {
     () => collectTrackedChangesFromModel(model),
     [model]
   );
+  const comments = React.useMemo(() => collectCommentsFromModel(model), [
+    model
+  ]);
   const hasUnorderedList = selectedListType === "unordered";
   const hasOrderedList = selectedListType === "ordered";
   const canUndo = history.past.length > 0;
@@ -19094,6 +19105,15 @@ function useDocxEditor(options = {}) {
   const toggleShowTrackedChanges = React.useCallback(() => {
     setShowTrackedChangesState((current) => !current);
   }, []);
+  const setShowComments = React.useCallback(
+    (nextShowComments) => {
+      setShowCommentsState(nextShowComments);
+    },
+    []
+  );
+  const toggleShowComments = React.useCallback(() => {
+    setShowCommentsState((current) => !current);
+  }, []);
   const registerPendingExportModelTransformer = React.useCallback(
     (transformer) => {
       pendingExportModelTransformerRef.current = transformer;
@@ -19157,6 +19177,7 @@ function useDocxEditor(options = {}) {
   );
   React.useEffect(() => {
     return () => {
+      activeImportAbortControllerRef.current?.abort();
       unloadEmbeddedFonts();
     };
   }, [unloadEmbeddedFonts]);
@@ -19292,6 +19313,8 @@ function useDocxEditor(options = {}) {
   );
   const importDocxFile = React.useCallback(
     async (file) => {
+      activeImportAbortControllerRef.current?.abort();
+      activeImportAbortControllerRef.current = void 0;
       if (!/\.docx?$/i.test(file.name)) {
         replaceDocumentWithImportError(
           file.name,
@@ -19302,11 +19325,50 @@ function useDocxEditor(options = {}) {
       setIsImporting(true);
       setImportError(void 0);
       setStatus(`Loading ${file.name}...`);
+      const importAbortController = new AbortController();
+      activeImportAbortControllerRef.current = importAbortController;
+      const traceName = createDocxImportPerformanceTraceName(file.name);
+      const startMark = `${traceName}:start`;
+      const bufferStartMark = `${traceName}:arrayBuffer:start`;
+      const bufferEndMark = `${traceName}:arrayBuffer:end`;
+      const workerStartMark = `${traceName}:worker:start`;
+      const workerEndMark = `${traceName}:worker:end`;
+      const fontsStartMark = `${traceName}:fonts:start`;
+      const fontsEndMark = `${traceName}:fonts:end`;
+      const stateStartMark = `${traceName}:state:start`;
+      const stateEndMark = `${traceName}:state:end`;
+      markDocxImportPerformance(startMark);
       try {
+        markDocxImportPerformance(bufferStartMark);
         const buffer = await file.arrayBuffer();
-        const pkg = await parseDocx(buffer);
+        markDocxImportPerformance(bufferEndMark);
+        measureDocxImportPerformance(
+          `${traceName}:arrayBuffer`,
+          bufferStartMark,
+          bufferEndMark
+        );
+        markDocxImportPerformance(workerStartMark);
+        const importResult = await importDocxBuffer(buffer, {
+          signal: importAbortController.signal,
+          transferBuffer: true
+        });
+        markDocxImportPerformance(workerEndMark);
+        measureDocxImportPerformance(
+          `${traceName}:${importResult.source}`,
+          workerStartMark,
+          workerEndMark
+        );
+        const pkg = importResult.package;
+        const nextModel = importResult.model;
+        markDocxImportPerformance(fontsStartMark);
         await loadEmbeddedFontsFromPackage(pkg);
-        const nextModel = await buildDocModel(pkg);
+        markDocxImportPerformance(fontsEndMark);
+        measureDocxImportPerformance(
+          `${traceName}:fonts`,
+          fontsStartMark,
+          fontsEndMark
+        );
+        markDocxImportPerformance(stateStartMark);
         setModel(nextModel);
         setDocumentLoadNonce((current) => current + 1);
         setHistory({ past: [], future: [] });
@@ -19319,16 +19381,31 @@ function useDocxEditor(options = {}) {
         setSelectedFormFieldLocation(void 0);
         setImportError(void 0);
         setStatus(`Loaded ${file.name}`);
+        markDocxImportPerformance(stateEndMark);
+        measureDocxImportPerformance(
+          `${traceName}:state-dispatch`,
+          stateStartMark,
+          stateEndMark
+        );
+        measureDocxImportPerformance(`${traceName}:total`, startMark, stateEndMark);
       } catch (error) {
+        if (error instanceof Error && error.name === "AbortError" && activeImportAbortControllerRef.current !== importAbortController) {
+          return;
+        }
         const nextError = error instanceof Error ? error : new Error("Unknown error");
         replaceDocumentWithImportError(file.name, nextError);
       } finally {
-        setIsImporting(false);
+        if (activeImportAbortControllerRef.current === importAbortController) {
+          activeImportAbortControllerRef.current = void 0;
+          setIsImporting(false);
+        }
       }
     },
     [loadEmbeddedFontsFromPackage, replaceDocumentWithImportError]
   );
   const newDocument = React.useCallback(() => {
+    activeImportAbortControllerRef.current?.abort();
+    activeImportAbortControllerRef.current = void 0;
     unloadEmbeddedFonts();
     setModel(cloneDocModel(starterTemplateRef.current));
     setDocumentLoadNonce((current) => current + 1);
@@ -19941,7 +20018,7 @@ function useDocxEditor(options = {}) {
               return;
             }
             paragraph.style = {
-              ...cloneParagraphStyle2(paragraph.style) ?? {},
+              ...cloneParagraphStyle(paragraph.style) ?? {},
               numbering: void 0
             };
             paragraph.sourceXml = void 0;
@@ -19997,7 +20074,7 @@ function useDocxEditor(options = {}) {
             normalizedRange.end.offset
           );
           collapsedOffset = safeStart + replacementText.length;
-          const endParagraphStyleForMerge = cloneParagraphStyle2(
+          const endParagraphStyleForMerge = cloneParagraphStyle(
             endParagraph.style
           );
           const insertedStyle = cloneTextStyle2(
@@ -20084,7 +20161,7 @@ function useDocxEditor(options = {}) {
               normalizedRange.start.location
             );
             if (mergedLookup.paragraph) {
-              mergedLookup.paragraph.style = endParagraphStyleForMerge ? cloneParagraphStyle2(endParagraphStyleForMerge) : void 0;
+              mergedLookup.paragraph.style = endParagraphStyleForMerge ? cloneParagraphStyle(endParagraphStyleForMerge) : void 0;
               mergedLookup.paragraph.sourceXml = void 0;
               if (mergedLookup.tableNode) {
                 mergedLookup.tableNode.sourceXml = void 0;
@@ -20401,7 +20478,7 @@ function useDocxEditor(options = {}) {
           const removePreset2 = preset !== "none" && presetState2[preset];
           if (preset === "diagonal-down" || preset === "diagonal-up") {
             const clonedCellStyle = cloneTableCellStyle(targetCell.style) ?? {};
-            const nextCellBorders = cloneTableBorderSet2(clonedCellStyle.borders) ?? {};
+            const nextCellBorders = cloneTableBorderSet(clonedCellStyle.borders) ?? {};
             const visibleBorder = removePreset2 ? nilTableBorderStyle() : toolbarTableBorderStyle(
               resolvePreferredTableBorder(nextCellBorders) ?? resolvePreferredTableBorder(tableNode2.style?.borders)
             );
@@ -20431,7 +20508,7 @@ function useDocxEditor(options = {}) {
             borders: nextBorders2
           };
           if (preset === "none" && targetCell.style?.borders) {
-            const nextCellBorders = cloneTableBorderSet2(targetCell.style.borders) ?? {};
+            const nextCellBorders = cloneTableBorderSet(targetCell.style.borders) ?? {};
             const nilBorder = nilTableBorderStyle();
             nextCellBorders.tl2br = { ...nilBorder };
             nextCellBorders.tr2bl = { ...nilBorder };
@@ -20482,7 +20559,7 @@ function useDocxEditor(options = {}) {
             if (!paragraph2) {
               continue;
             }
-            const clonedStyle2 = cloneParagraphStyle2(paragraph2.style) ?? {};
+            const clonedStyle2 = cloneParagraphStyle(paragraph2.style) ?? {};
             const nextBorders2 = applyParagraphBorderPresetForRangeEntry(
               clonedStyle2.borders,
               preset,
@@ -20514,7 +20591,7 @@ function useDocxEditor(options = {}) {
         if (!paragraph) {
           return current;
         }
-        const clonedStyle = cloneParagraphStyle2(paragraph.style) ?? {};
+        const clonedStyle = cloneParagraphStyle(paragraph.style) ?? {};
         const presetState = paragraphBorderPresetState(clonedStyle.borders);
         const removePreset = preset !== "none" && presetState[preset];
         const nextBorders = applyParagraphBorderPreset(
@@ -20673,7 +20750,7 @@ function useDocxEditor(options = {}) {
           const currentText = paragraphText(paragraph);
           if (shouldRemove) {
             if (paragraphHasNumbering(paragraph)) {
-              const clonedStyle = cloneParagraphStyle2(paragraph.style);
+              const clonedStyle = cloneParagraphStyle(paragraph.style);
               if (clonedStyle?.numbering) {
                 clonedStyle.numbering = void 0;
                 paragraph.style = clonedStyle;
@@ -20819,7 +20896,7 @@ function useDocxEditor(options = {}) {
             return current;
           }
           paragraphNode.style = {
-            ...cloneParagraphStyle2(paragraphNode.style) ?? {},
+            ...cloneParagraphStyle(paragraphNode.style) ?? {},
             numbering: {
               ...numbering,
               ilvl: nextLevel
@@ -20935,7 +21012,7 @@ function useDocxEditor(options = {}) {
         paragraphNode.sourceXml = void 0;
         next.nodes.splice(insertionIndex, 0, {
           type: "paragraph",
-          style: cloneParagraphStyle2(paragraphNode.style),
+          style: cloneParagraphStyle(paragraphNode.style),
           children: [
             {
               type: "text",
@@ -21026,12 +21103,12 @@ function useDocxEditor(options = {}) {
             afterInsertedStyle: inheritedRunStyle
           }
         );
-        paragraphNode.style = cloneParagraphStyle2(splitParagraphStyle);
+        paragraphNode.style = cloneParagraphStyle(splitParagraphStyle);
         paragraphNode.children = splitChildren.beforeChildren;
         paragraphNode.sourceXml = void 0;
         next.nodes.splice(insertionIndex, 0, {
           type: "paragraph",
-          style: cloneParagraphStyle2(splitParagraphStyle),
+          style: cloneParagraphStyle(splitParagraphStyle),
           children: splitChildren.afterChildren
         });
         splitResult = {
@@ -21365,7 +21442,7 @@ function useDocxEditor(options = {}) {
         if (!currentDropCap) {
           return current;
         }
-        paragraph.style = cloneParagraphStyle2(paragraph.style) ?? {};
+        paragraph.style = cloneParagraphStyle(paragraph.style) ?? {};
         paragraph.style.dropCap = {
           ...currentDropCap,
           ...patch
@@ -21441,7 +21518,7 @@ function useDocxEditor(options = {}) {
             link: preservedLink
           }
         ];
-        paragraph.style = cloneParagraphStyle2(paragraph.style) ?? {};
+        paragraph.style = cloneParagraphStyle(paragraph.style) ?? {};
         paragraph.style.dropCap = {
           ...currentDropCap
         };
@@ -21595,7 +21672,7 @@ function useDocxEditor(options = {}) {
           const firstParagraph = paragraphs[0];
           const nextParagraph = {
             type: "paragraph",
-            style: cloneParagraphStyle2(firstParagraph?.style),
+            style: cloneParagraphStyle(firstParagraph?.style),
             children: [
               {
                 type: "text",
@@ -22254,6 +22331,8 @@ function useDocxEditor(options = {}) {
     documentTheme,
     trackedChanges,
     showTrackedChanges,
+    comments,
+    showComments,
     currentPage: paginationInfo.currentPage,
     totalPages: paginationInfo.totalPages,
     selection,
@@ -22281,8 +22360,10 @@ function useDocxEditor(options = {}) {
     setStatus,
     setDocumentTheme,
     setShowTrackedChanges,
+    setShowComments,
     syncPaginationInfo,
     toggleShowTrackedChanges,
+    toggleShowComments,
     importDocxFile,
     newDocument,
     exportDocx,
@@ -22569,6 +22650,7 @@ function useDocxPageThumbnails(editor, options = {}) {
       if (!targetCanvas) {
         return;
       }
+      const requiresAttachedTarget = canvas === void 0;
       const pageElement = pageSurfaceRegistry.pageElements.get(pageIndex);
       if (!pageElement || !pageElement.isConnected) {
         updatePageThumbnailState(pageIndex, "unavailable");
@@ -22582,6 +22664,9 @@ function useDocxPageThumbnails(editor, options = {}) {
       }
       updatePageThumbnailState(pageIndex, "rendering");
       await ensureThumbnailRasterQueue().enqueue(targetCanvas, async () => {
+        if (requiresAttachedTarget && attachedCanvasByPageRef.current.get(pageIndex) !== targetCanvas) {
+          return;
+        }
         const livePageElement = pageSurfaceRegistry.pageElements.get(pageIndex);
         if (!livePageElement || !livePageElement.isConnected) {
           updatePageThumbnailState(pageIndex, "unavailable");
@@ -22728,6 +22813,10 @@ function useDocxPageThumbnails(editor, options = {}) {
               void renderPageThumbnailToCanvasRef.current(pageIndex, canvas);
               return;
             }
+            const previousCanvas = attachedCanvasByPageRef.current.get(pageIndex);
+            if (previousCanvas) {
+              thumbnailRasterQueueRef.current?.cancel(previousCanvas);
+            }
             attachedCanvasByPageRef.current.delete(pageIndex);
           };
           canvasRefCallbacksRef.current.set(pageIndex, nextCanvasRef);
@@ -22995,6 +23084,42 @@ function useDocxTrackChanges(editor) {
     ]
   );
 }
+function useDocxComments(editor) {
+  const commentsByLocation = React.useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    editor.comments.forEach((comment) => {
+      const key = paragraphLocationKey(comment.location);
+      const bucket = grouped.get(key) ?? [];
+      bucket.push(comment);
+      grouped.set(key, bucket);
+    });
+    return grouped;
+  }, [editor.comments]);
+  const getCommentsForLocation = React.useCallback(
+    (location) => {
+      return commentsByLocation.get(paragraphLocationKey(location)) ?? [];
+    },
+    [commentsByLocation]
+  );
+  return React.useMemo(
+    () => ({
+      comments: editor.comments,
+      showComments: editor.showComments,
+      setShowComments: editor.setShowComments,
+      toggleShowComments: editor.toggleShowComments,
+      commentsByLocation,
+      getCommentsForLocation
+    }),
+    [
+      editor.comments,
+      editor.showComments,
+      editor.setShowComments,
+      editor.toggleShowComments,
+      commentsByLocation,
+      getCommentsForLocation
+    ]
+  );
+}
 function useDocxPageLayout(editor) {
   const primarySectionPropertiesXml = editor.model.metadata.sections?.[0]?.sectionPropertiesXml ?? editor.model.metadata.sectionPropertiesXml;
   const layout = React.useMemo(() => {
@@ -23867,6 +23992,8 @@ function DocxEditorViewer({
   headingStyles,
   showTrackedChanges,
   renderTrackedChangeCard,
+  showComments,
+  renderCommentCard,
   renderTableContextMenu,
   renderContextMenu,
   onFormFieldDoubleClick,
@@ -23875,7 +24002,9 @@ function DocxEditorViewer({
   const pageSurfaceRegistryOwner = docxViewerPageSurfaceRegistryOwner(editor);
   const trackedChangesEnabled = showTrackedChanges ?? editor.showTrackedChanges;
   const hasTrackedChanges = editor.trackedChanges.length > 0;
-  const showTrackedChangeGutter = trackedChangesEnabled;
+  const commentsEnabled = showComments ?? editor.showComments;
+  const hasComments = editor.comments.length > 0;
+  const showTrackedChangeGutter = trackedChangesEnabled || commentsEnabled;
   const isReadOnly = mode === "read-only" || trackedChangesEnabled;
   const isNightReaderMode = isReadOnly && editor.documentTheme === "dark";
   const documentContentTheme = isNightReaderMode ? "light" : editor.documentTheme;
@@ -23894,11 +24023,13 @@ function DocxEditorViewer({
   const paragraphRunRenderOptions = React.useMemo(
     () => ({
       showTrackedChanges: trackedChangesEnabled,
+      showCommentHighlights: commentsEnabled,
       numberingDefinitions: editor.model.metadata.numberingDefinitions,
       tocLinkColorByLevel,
       imageFilterSuffix: documentContentFilter
     }),
     [
+      commentsEnabled,
       documentContentFilter,
       editor.model.metadata.numberingDefinitions,
       tocLinkColorByLevel,
@@ -23941,7 +24072,6 @@ function DocxEditorViewer({
     /* @__PURE__ */ new Map()
   );
   const pageElementsRef = React.useRef(/* @__PURE__ */ new Map());
-  const pagePlaceholderRefCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
   const pageSurfaceRefCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
   const trackedChangeCardElementsRef = React.useRef(/* @__PURE__ */ new Map());
   const initialPaginationStableSignatureRef = React.useRef(
@@ -24009,26 +24139,6 @@ function DocxEditorViewer({
     measuredPageContentHeightByIndex,
     setMeasuredPageContentHeightByIndex
   ] = React.useState([]);
-  const pagePlaceholderRefForIndex = React.useCallback(
-    (pageIndex) => {
-      const normalizedPageIndex = Math.max(0, Math.round(pageIndex));
-      const cached = pagePlaceholderRefCallbacksRef.current.get(normalizedPageIndex);
-      if (cached) {
-        return cached;
-      }
-      const nextRef = (element) => {
-        if (element) {
-          pageElementsRef.current.set(normalizedPageIndex, element);
-        } else {
-          pageElementsRef.current.delete(normalizedPageIndex);
-        }
-        registerDocxViewerPageSurface(editor, normalizedPageIndex, void 0);
-      };
-      pagePlaceholderRefCallbacksRef.current.set(normalizedPageIndex, nextRef);
-      return nextRef;
-    },
-    [pageSurfaceRegistryOwner]
-  );
   const pageSurfaceRefForIndex = React.useCallback(
     (pageIndex) => {
       const normalizedPageIndex = Math.max(0, Math.round(pageIndex));
@@ -24050,7 +24160,6 @@ function DocxEditorViewer({
     [pageSurfaceRegistryOwner]
   );
   React.useEffect(() => {
-    pagePlaceholderRefCallbacksRef.current.clear();
     pageSurfaceRefCallbacksRef.current.clear();
   }, [pageSurfaceRegistryOwner]);
   const [
@@ -25324,6 +25433,26 @@ function DocxEditorViewer({
       nearestScrollableAncestor(viewerRootRef.current)
     );
   }, [editor.documentLoadNonce, pageCount, trackedChangesEnabled]);
+  const [zoomProbeNonce, setZoomProbeNonce] = React.useState(0);
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const rootElement = viewerRootRef.current;
+    if (!rootElement) {
+      return;
+    }
+    const bumpZoomProbe = () => {
+      setZoomProbeNonce((nonce) => nonce + 1);
+    };
+    const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(bumpZoomProbe) : void 0;
+    resizeObserver?.observe(rootElement);
+    window.addEventListener("resize", bumpZoomProbe);
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", bumpZoomProbe);
+    };
+  }, [editor.documentLoadNonce]);
   React.useLayoutEffect(() => {
     if (typeof window === "undefined") {
       return;
@@ -25336,7 +25465,7 @@ function DocxEditorViewer({
     setVirtualizerMeasurementScale(
       (current) => Math.abs(current - nextScale) < 5e-3 ? current : nextScale
     );
-  });
+  }, [editor.documentLoadNonce, pageCount, zoomProbeNonce]);
   const internalPageVirtualizationEnabled = internalPageVirtualizationRequested && internalVirtualScrollElement !== null;
   const internalPageVirtualizationPending = typeof window !== "undefined" && internalPageVirtualizationRequested && internalVirtualScrollElement === null;
   const internalVirtualScrollUsesWindow = typeof document !== "undefined" && internalVirtualScrollElement !== null && (internalVirtualScrollElement === document.scrollingElement || internalVirtualScrollElement === document.documentElement || internalVirtualScrollElement === document.body);
@@ -25370,7 +25499,39 @@ function DocxEditorViewer({
     overscan: pageVirtualizationOverscan
   });
   const internalPageVirtualizer = internalVirtualScrollUsesWindow ? internalWindowPageVirtualizer : internalElementPageVirtualizer;
+  React.useLayoutEffect(() => {
+    internalElementPageVirtualizer.measure();
+    internalWindowPageVirtualizer.measure();
+  }, [
+    estimateVirtualPageSize,
+    internalElementPageVirtualizer,
+    internalWindowPageVirtualizer
+  ]);
   const internalVirtualItems = internalPageVirtualizer.getVirtualItems();
+  const internalMostVisiblePageIndex = React.useMemo(() => {
+    if (!internalPageVirtualizationEnabled || internalVirtualItems.length === 0) {
+      return void 0;
+    }
+    const virtualizerMetrics = internalPageVirtualizer;
+    const viewportStart = Number.isFinite(virtualizerMetrics.scrollOffset) ? virtualizerMetrics.scrollOffset : internalVirtualItems[0]?.start ?? 0;
+    const viewportSize = virtualizerMetrics.scrollRect?.height;
+    const viewportEnd = viewportStart + (Number.isFinite(viewportSize) && viewportSize > 0 ? viewportSize : internalVirtualItems[0]?.size ?? 0);
+    let bestPageIndex;
+    let bestVisibleSize = -1;
+    internalVirtualItems.forEach((item) => {
+      const visibleSize = Math.min(item.end, viewportEnd) - Math.max(item.start, viewportStart);
+      if (visibleSize > bestVisibleSize) {
+        bestVisibleSize = visibleSize;
+        bestPageIndex = item.index;
+      }
+    });
+    return bestPageIndex === void 0 ? void 0 : clampNumber(bestPageIndex, 0, pageCount - 1);
+  }, [
+    internalPageVirtualizationEnabled,
+    internalPageVirtualizer,
+    internalVirtualItems,
+    pageCount
+  ]);
   const internalVisiblePageRange = React.useMemo(() => {
     if (!internalPageVirtualizationEnabled) {
       return void 0;
@@ -25412,8 +25573,8 @@ function DocxEditorViewer({
       return internalVisiblePageRange;
     }
     const scrollDirection = internalPageVirtualizer.scrollDirection;
-    const renderPreviousPage = scrollDirection !== "backward";
-    const renderNextPage = scrollDirection === "backward";
+    const renderPreviousPage = scrollDirection !== "forward";
+    const renderNextPage = scrollDirection !== "backward";
     const startPageIndex = clampNumber(
       internalVisiblePageRange.startPageIndex - (renderPreviousPage ? LARGE_TABLE_PAGE_ADJACENT_RENDER_COUNT : 0),
       0,
@@ -25661,6 +25822,40 @@ function DocxEditorViewer({
     }
     return indexes;
   }, [pageCount, visiblePageEndIndex, visiblePageStartIndex]);
+  const pageStackVirtualSpacers = React.useMemo(() => {
+    const pageWrapperWidthPxForIndex = (pageIndex) => {
+      const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
+      return showTrackedChangeGutter ? pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX : pageLayout.pageWidthPx;
+    };
+    const summarizeSkippedPages = (startPageIndex, endPageIndex) => {
+      if (pageCount <= 0 || endPageIndex < startPageIndex || startPageIndex >= pageCount || endPageIndex < 0) {
+        return { heightPx: 0, widthPx: 0 };
+      }
+      const start = clampNumber(startPageIndex, 0, pageCount - 1);
+      const end = clampNumber(endPageIndex, start, pageCount - 1);
+      let heightPx = 0;
+      let widthPx = 0;
+      for (let pageIndex = start; pageIndex <= end; pageIndex += 1) {
+        const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
+        heightPx += Math.max(1, Math.round(pageLayout.pageHeightPx));
+        widthPx = Math.max(widthPx, pageWrapperWidthPxForIndex(pageIndex));
+      }
+      const skippedPageCount = end - start + 1;
+      heightPx += Math.max(0, skippedPageCount - 1) * DOC_PAGE_BREAK_GAP;
+      return { heightPx, widthPx };
+    };
+    return {
+      before: summarizeSkippedPages(0, visiblePageStartIndex - 1),
+      after: summarizeSkippedPages(visiblePageEndIndex + 1, pageCount - 1)
+    };
+  }, [
+    documentLayout,
+    pageCount,
+    pageSectionInfoByIndex,
+    showTrackedChangeGutter,
+    visiblePageEndIndex,
+    visiblePageStartIndex
+  ]);
   React.useLayoutEffect(() => {
     if (typeof window === "undefined") {
       return;
@@ -25820,7 +26015,7 @@ function DocxEditorViewer({
   }, [onPageCountChange, stableReportedPageCount]);
   React.useEffect(() => {
     const nextCurrentPage = clampNumber(
-      visiblePageStartIndex + 1,
+      (internalMostVisiblePageIndex ?? visiblePageStartIndex) + 1,
       1,
       Math.max(1, stableReportedPageCount)
     );
@@ -25830,6 +26025,7 @@ function DocxEditorViewer({
     });
   }, [
     editor.syncPaginationInfo,
+    internalMostVisiblePageIndex,
     stableReportedPageCount,
     visiblePageStartIndex
   ]);
@@ -25837,20 +26033,38 @@ function DocxEditorViewer({
     const pageBuckets = pageNodeSegmentsByPage.map(
       () => []
     );
-    editor.trackedChanges.forEach((change) => {
-      const pageIndex = resolveTrackedChangePageIndex(
-        change,
+    const placeAnnotation = (annotation) => {
+      const pageIndex = resolveGutterAnnotationPageIndex(
+        annotation.location,
         pageNodeSegmentsByPage
       );
       if (pageIndex < 0 || pageIndex >= pageBuckets.length) {
         return;
       }
-      pageBuckets[pageIndex].push(change);
-    });
-    pageBuckets.forEach((pageChanges) => {
-      pageChanges.sort((left, right) => {
-        const leftKey = trackedChangeSortTuple(left);
-        const rightKey = trackedChangeSortTuple(right);
+      pageBuckets[pageIndex].push(annotation);
+    };
+    if (trackedChangesEnabled) {
+      editor.trackedChanges.forEach((change) => {
+        placeAnnotation({
+          id: change.id,
+          location: change.location,
+          trackedChange: change
+        });
+      });
+    }
+    if (commentsEnabled) {
+      editor.comments.forEach((comment) => {
+        placeAnnotation({
+          id: comment.id,
+          location: comment.location,
+          comment
+        });
+      });
+    }
+    pageBuckets.forEach((pageAnnotations) => {
+      pageAnnotations.sort((left, right) => {
+        const leftKey = gutterAnnotationSortTuple(left.location);
+        const rightKey = gutterAnnotationSortTuple(right.location);
         for (let index = 0; index < leftKey.length; index += 1) {
           if (leftKey[index] === rightKey[index]) {
             continue;
@@ -25861,7 +26075,13 @@ function DocxEditorViewer({
       });
     });
     return pageBuckets;
-  }, [editor.trackedChanges, pageNodeSegmentsByPage]);
+  }, [
+    commentsEnabled,
+    editor.comments,
+    editor.trackedChanges,
+    pageNodeSegmentsByPage,
+    trackedChangesEnabled
+  ]);
   const [trackedChangeAnchorByPage, setTrackedChangeAnchorByPage] = React.useState([]);
   const [headerBodyClearanceByPage, setHeaderBodyClearanceByPage] = React.useState({});
   React.useEffect(() => {
@@ -25875,18 +26095,18 @@ function DocxEditorViewer({
       );
       return;
     }
-    const nextAnchorMaps = trackedChangesByPage.map((changes, pageIndex) => {
+    const nextAnchorMaps = trackedChangesByPage.map((annotations, pageIndex) => {
       const pageElement = pageElementsRef.current.get(pageIndex);
       const anchorsByChangeId = /* @__PURE__ */ new Map();
-      if (!pageElement || changes.length === 0) {
+      if (!pageElement || annotations.length === 0) {
         return anchorsByChangeId;
       }
       const pageHeightPx = Math.max(1, pageElement.offsetHeight);
       const pageWidthPx = Math.max(1, pageElement.offsetWidth);
-      changes.forEach((change) => {
+      annotations.forEach((annotation) => {
         const anchorElement = findTrackedChangeAnchorElementInPage(
           pageElement,
-          change.location
+          annotation.location
         );
         if (!anchorElement) {
           return;
@@ -25910,7 +26130,7 @@ function DocxEditorViewer({
           10,
           Math.max(10, pageWidthPx - 10)
         );
-        anchorsByChangeId.set(change.id, { x: anchorX, y: anchorY });
+        anchorsByChangeId.set(annotation.id, { x: anchorX, y: anchorY });
       });
       return anchorsByChangeId;
     });
@@ -25928,28 +26148,30 @@ function DocxEditorViewer({
       );
       return;
     }
-    const nextHeightsByPage = trackedChangesByPage.map((changes, pageIndex) => {
-      const pageHeights = /* @__PURE__ */ new Map();
-      changes.forEach((change) => {
-        const cardElement = trackedChangeCardElementsRef.current.get(
-          `${pageIndex}:${change.id}`
-        );
-        if (!cardElement) {
-          return;
-        }
-        const measuredHeight = Math.round(
-          cardElement.getBoundingClientRect().height
-        );
-        if (!Number.isFinite(measuredHeight) || measuredHeight <= 0) {
-          return;
-        }
-        pageHeights.set(
-          change.id,
-          Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, measuredHeight)
-        );
-      });
-      return pageHeights;
-    });
+    const nextHeightsByPage = trackedChangesByPage.map(
+      (annotations, pageIndex) => {
+        const pageHeights = /* @__PURE__ */ new Map();
+        annotations.forEach((annotation) => {
+          const cardElement = trackedChangeCardElementsRef.current.get(
+            `${pageIndex}:${annotation.id}`
+          );
+          if (!cardElement) {
+            return;
+          }
+          const measuredHeight = Math.round(
+            cardElement.getBoundingClientRect().height
+          );
+          if (!Number.isFinite(measuredHeight) || measuredHeight <= 0) {
+            return;
+          }
+          pageHeights.set(
+            annotation.id,
+            Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, measuredHeight)
+          );
+        });
+        return pageHeights;
+      }
+    );
     setTrackedChangeCardHeightsByPage((current) => {
       if (current.length === nextHeightsByPage.length) {
         let equal = true;
@@ -26448,9 +26670,14 @@ function DocxEditorViewer({
       },
       []
     );
+    const storedDocumentPageCountForLatch = editor.model.metadata.documentPageCount;
+    const latchTargetPageCount = Number.isFinite(storedDocumentPageCountForLatch) ? Math.max(
+      collectDocxHardPageBreakStartNodeIndexes(editor.model).size + 1,
+      Math.round(storedDocumentPageCountForLatch)
+    ) : void 0;
     const nextMeasuredBodyFooterOverlapLatchState = resolveMeasuredBodyFooterOverlapLatchState({
       pageCount,
-      targetPageCount: editor.model.metadata.documentPageCount,
+      targetPageCount: latchTargetPageCount,
       overlappingPageIndexes,
       previousSignature: measuredBodyFooterOverlapCandidateRef.current.signature,
       previousConsecutivePasses: measuredBodyFooterOverlapCandidateRef.current.consecutivePasses,
@@ -33221,7 +33448,10 @@ function DocxEditorViewer({
         Math.round(options?.pageFlowTopPx ?? 0)
       );
       const bodyParagraphOriginLeftPx = interactiveBodyFloatingPageOriginPx ? paragraphPageLayout.marginsPx.left : void 0;
-      const bodyParagraphOriginTopPx = interactiveBodyFloatingPageOriginPx ? paragraphPageLayout.marginsPx.top + paragraphPageFlowTopPx : void 0;
+      const bodyParagraphOriginTopPx = interactiveBodyFloatingPageOriginPx ? paragraphActsAsPageAnchoredCoverOverlayHost(
+        paragraph,
+        paragraphPageLayout
+      ) ? paragraphPageLayout.marginsPx.top + paragraphPageFlowTopPx : 0 : void 0;
       const resizedWidthPxByImageIndex = /* @__PURE__ */ new Map();
       const resizedHeightPxByImageIndex = /* @__PURE__ */ new Map();
       const movePreviewByImageIndex = /* @__PURE__ */ new Map();
@@ -33276,7 +33506,8 @@ function DocxEditorViewer({
       const hasFixedPositionWrappedImage = paragraph.children.some(
         (child) => child.type === "image" && isFixedPositionWrappedFloatingImage(child)
       );
-      if ((trackedChangesEnabled || useSpecialTabLayout) && !hasFixedPositionWrappedImage) {
+      const paragraphHasCommentAnchors = commentsEnabled && /commentRange|commentReference/i.test(paragraph.sourceXml ?? "");
+      if ((trackedChangesEnabled || useSpecialTabLayout || paragraphHasCommentAnchors) && !hasFixedPositionWrappedImage) {
         return renderParagraphRuns(
           paragraph,
           keyPrefix,
@@ -33289,6 +33520,7 @@ function DocxEditorViewer({
           void 0,
           {
             showTrackedChanges: trackedChangesEnabled,
+            showCommentHighlights: commentsEnabled,
             numberingDefinitions: editor.model.metadata.numberingDefinitions,
             tocLinkColorByLevel,
             paragraphOriginLeftPx: bodyParagraphOriginLeftPx,
@@ -36108,9 +36340,10 @@ function DocxEditorViewer({
           marginTop: (typeof baseParagraphStyle.marginTop === "number" ? baseParagraphStyle.marginTop : 0) - (pageAnchoredCoverOverlayParagraph ? resolvedPageLayout.marginsPx.top : 0),
           marginLeft: -resolvedPageLayout.marginsPx.left,
           marginRight: -resolvedPageLayout.marginsPx.right,
-          minHeight: 0,
-          height: 0,
-          lineHeight: 0,
+          // A cover-overlay host is remapped to the page surface and must
+          // not displace flow; an ordinary anchor host still occupies its
+          // one-line paragraph box (Word semantics).
+          ...pageAnchoredCoverOverlayParagraph ? { minHeight: 0, height: 0, lineHeight: 0 } : void 0,
           overflow: "visible"
         } : requiresPageAbsoluteContext ? { position: "static" } : requiresLocalAbsoluteContext ? { position: "relative" } : hasDualWrappedFloatingImage ? { position: "relative" } : void 0,
         // Carry the paragraph's run font on the editable host so text typed into
@@ -39631,44 +39864,25 @@ ${currentText.slice(end)}`;
             }
           }
         ) : null,
-        pageNodeSegmentsByPage.map((pageNodeSegments, pageIndex) => {
+        pageStackVirtualSpacers.before.heightPx > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-docx-page-window-spacer": "before",
+            style: {
+              height: pageStackVirtualSpacers.before.heightPx,
+              width: pageStackVirtualSpacers.before.widthPx,
+              margin: "0 auto",
+              pointerEvents: "none",
+              visibility: hideDocumentUntilPaginationSettled ? "hidden" : void 0
+            }
+          }
+        ) : null,
+        visiblePageIndexes.map((pageIndex) => {
+          const pageNodeSegments = pageNodeSegmentsByPage[pageIndex] ?? [];
           const pageInfo = pageSectionInfoByIndex[pageIndex];
           const pageLayout = pageInfo?.layout ?? documentLayout;
-          const pageVisible = isPageVisible(pageIndex);
           const pageWrapperWidthPx = showTrackedChangeGutter ? pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX : pageLayout.pageWidthPx;
-          if (!pageVisible) {
-            const placeholderBackgroundColor = pageBackgroundColor ?? editor.model.metadata.documentBackgroundColor ?? pageSurfaceBaseStyle.backgroundColor;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-docx-page-wrapper": "true",
-                "data-docx-page-index": pageIndex,
-                "data-index": pageIndex,
-                style: {
-                  width: pageWrapperWidthPx,
-                  margin: "0 auto",
-                  visibility: hideDocumentUntilPaginationSettled ? "hidden" : void 0
-                },
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-docx-page-placeholder": "true",
-                    ref: pagePlaceholderRefForIndex(pageIndex),
-                    style: {
-                      ...pageSurfaceBaseStyle,
-                      ...pageMarginPaddingStyle(pageLayout.marginsPx),
-                      height: pageLayout.pageHeightPx,
-                      minHeight: pageLayout.pageHeightPx,
-                      width: pageLayout.pageWidthPx,
-                      backgroundColor: placeholderBackgroundColor,
-                      pointerEvents: "none"
-                    }
-                  }
-                )
-              },
-              `page-${pageIndex}`
-            );
-          }
           const pageContentWidthPx = Math.max(
             120,
             pageLayout.pageWidthPx - pageLayout.marginsPx.left - pageLayout.marginsPx.right
@@ -39840,6 +40054,10 @@ ${currentText.slice(end)}`;
                 width: pageWrapperWidthPx,
                 minHeight: pageLayout.pageHeightPx,
                 margin: "0 auto",
+                // Isolate per-page layout/style recalculation so scrolling and
+                // edits on one page don't force whole-document layout passes.
+                // (No paint containment: floats and gutter cards may overhang.)
+                contain: "layout style",
                 visibility: hideDocumentUntilPaginationSettled ? "hidden" : void 0
               },
               children: [
@@ -40090,9 +40308,6 @@ ${currentText.slice(end)}`;
                                   segments: [segment]
                                 });
                               });
-                              if (typeof window !== "undefined" && window.__docxDebugGroups) {
-                                console.log("[groups]", pageIndex, JSON.stringify(sectionGroups.map((g) => ({ s: g.sectionIndex, n: g.segments.map((x) => x.nodeIndex) }))));
-                              }
                               return sectionGroups.map((group, groupIndex) => {
                                 const sectionColumns = sectionColumnsBySectionIndex[group.sectionIndex];
                                 const isLastGroupOnPage = groupIndex === sectionGroups.length - 1;
@@ -40917,10 +41132,10 @@ ${currentText.slice(end)}`;
                             overflow: "visible"
                           },
                           children: pageTrackedChanges.map((entry) => {
-                            const accentColor = trackedChangeAccentColor(
-                              entry.change.kind,
+                            const accentColor = entry.annotation.trackedChange ? trackedChangeAccentColor(
+                              entry.annotation.trackedChange.kind,
                               editor.documentTheme
-                            );
+                            ) : commentAccentColor(editor.documentTheme);
                             const cardCenterY = clampNumber(
                               Math.round(entry.top + entry.heightPx / 2),
                               8,
@@ -40981,12 +41196,12 @@ ${currentText.slice(end)}`;
                                   )
                                 ]
                               },
-                              `tracked-connector-${pageIndex}-${entry.change.id}`
+                              `tracked-connector-${pageIndex}-${entry.annotation.id}`
                             );
                           })
                         }
                       ),
-                      !hasTrackedChanges && pageIndex === 0 ? /* @__PURE__ */ jsx(
+                      (!trackedChangesEnabled || !hasTrackedChanges) && (!commentsEnabled || !hasComments) && pageIndex === 0 ? /* @__PURE__ */ jsx(
                         "p",
                         {
                           style: {
@@ -40999,19 +41214,21 @@ ${currentText.slice(end)}`;
                             lineHeight: 1.35,
                             color: "#94a3b8"
                           },
-                          children: "No edits found"
+                          children: trackedChangesEnabled && commentsEnabled ? "No edits or comments found" : commentsEnabled ? "No comments found" : "No edits found"
                         }
                       ) : null,
                       pageTrackedChanges.map((entry) => {
-                        const accentColor = trackedChangeAccentColor(
-                          entry.change.kind,
+                        const trackedChange = entry.annotation.trackedChange;
+                        const comment = entry.annotation.comment;
+                        const accentColor = trackedChange ? trackedChangeAccentColor(
+                          trackedChange.kind,
                           editor.documentTheme
-                        );
+                        ) : commentAccentColor(editor.documentTheme);
                         const formattedDate = formatTrackedChangeDate(
-                          entry.change.date
+                          trackedChange?.date ?? comment?.date
                         );
-                        const kindLabel = trackedChangeKindLabel(entry.change.kind);
-                        const snippet = normalizeTrackedChangeSnippet(entry.change.text) ?? (entry.change.kind === "format-change" || entry.change.kind === "paragraph-format-change" ? "Formatting" : "Change");
+                        const kindLabel = trackedChange ? trackedChangeKindLabel(trackedChange.kind) : comment?.resolved ? "Comment \xB7 Resolved" : comment?.parentId !== void 0 ? "Reply" : "Comment";
+                        const snippet = trackedChange ? normalizeTrackedChangeSnippet(trackedChange.text) ?? (trackedChange.kind === "format-change" || trackedChange.kind === "paragraph-format-change" ? "Formatting" : "Change") : comment?.text || "Comment";
                         const cardWidthPx = Math.max(
                           140,
                           TRACKED_CHANGE_GUTTER_WIDTH_PX - TRACKED_CHANGE_GUTTER_CARD_LEFT_PX - TRACKED_CHANGE_GUTTER_CARD_RIGHT_PX
@@ -41063,7 +41280,7 @@ ${currentText.slice(end)}`;
                                           fontWeight: 700,
                                           lineHeight: 1.25
                                         },
-                                        children: entry.change.author?.trim() || "Unknown author"
+                                        children: (trackedChange?.author ?? comment?.author)?.trim() || "Unknown author"
                                       }
                                     ),
                                     formattedDate ? /* @__PURE__ */ jsx(
@@ -41082,6 +41299,23 @@ ${currentText.slice(end)}`;
                                   ]
                                 }
                               ),
+                              comment?.anchorText ? /* @__PURE__ */ jsxs(
+                                "p",
+                                {
+                                  style: {
+                                    margin: "2px 0 0",
+                                    fontSize: 11,
+                                    lineHeight: 1.3,
+                                    fontStyle: "italic",
+                                    color: editor.documentTheme === "dark" ? "#94a3b8" : "#6b7280"
+                                  },
+                                  children: [
+                                    "\u201C",
+                                    comment.anchorText,
+                                    "\u201D"
+                                  ]
+                                }
+                              ) : null,
                               /* @__PURE__ */ jsxs(
                                 "p",
                                 {
@@ -41103,8 +41337,8 @@ ${currentText.slice(end)}`;
                             ]
                           }
                         );
-                        const renderedCard = renderTrackedChangeCard ? renderTrackedChangeCard({
-                          change: entry.change,
+                        const renderedCard = trackedChange ? renderTrackedChangeCard ? renderTrackedChangeCard({
+                          change: trackedChange,
                           kindLabel,
                           snippet,
                           formattedDate,
@@ -41112,12 +41346,21 @@ ${currentText.slice(end)}`;
                           documentTheme: editor.documentTheme,
                           pageIndex,
                           style: cardStyle
+                        }) : defaultCard : comment && renderCommentCard ? renderCommentCard({
+                          comment,
+                          snippet,
+                          formattedDate,
+                          accentColor,
+                          documentTheme: editor.documentTheme,
+                          pageIndex,
+                          style: cardStyle
                         }) : defaultCard;
                         return /* @__PURE__ */ jsx(
                           "div",
                           {
+                            "data-docx-gutter-annotation": trackedChange ? "tracked-change" : "comment",
                             ref: (element) => {
-                              const elementKey = `${pageIndex}:${entry.change.id}`;
+                              const elementKey = `${pageIndex}:${entry.annotation.id}`;
                               if (element) {
                                 trackedChangeCardElementsRef.current.set(
                                   elementKey,
@@ -41132,7 +41375,7 @@ ${currentText.slice(end)}`;
                             style: cardContainerStyle,
                             children: renderedCard
                           },
-                          `tracked-card-${pageIndex}-${entry.change.id}`
+                          `tracked-card-${pageIndex}-${entry.annotation.id}`
                         );
                       })
                     ]
@@ -41143,6 +41386,20 @@ ${currentText.slice(end)}`;
             `page-${pageIndex}`
           );
         }),
+        pageStackVirtualSpacers.after.heightPx > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-docx-page-window-spacer": "after",
+            style: {
+              height: pageStackVirtualSpacers.after.heightPx,
+              width: pageStackVirtualSpacers.after.widthPx,
+              margin: "0 auto",
+              pointerEvents: "none",
+              visibility: hideDocumentUntilPaginationSettled ? "hidden" : void 0
+            }
+          }
+        ) : null,
         !isReadOnly ? (() => {
           const hasCustomContextMenuState = Boolean(contextMenuState);
           const hasTableContextMenuState = Boolean(tableContextMenuState);
@@ -43037,16 +43294,20 @@ function useDocxModel(file) {
     }
     const docxFile = file;
     let isCurrent = true;
+    const abortController = new AbortController();
     async function load() {
       setState({ isLoading: true });
       try {
-        const pkg = await parseDocx(docxFile);
+        const { model } = await importDocxBuffer(docxFile, {
+          signal: abortController.signal,
+          transferBuffer: false
+        });
         if (!isCurrent) {
           return;
         }
         setState({
           isLoading: false,
-          model: await buildDocModel(pkg)
+          model
         });
       } catch (error) {
         if (!isCurrent) {
@@ -43061,6 +43322,7 @@ function useDocxModel(file) {
     void load();
     return () => {
       isCurrent = false;
+      abortController.abort();
     };
   }, [file]);
   return state;
@@ -43400,6 +43662,7 @@ export {
   updateTableCellParagraphTextRecursive,
   updateTableCellText,
   useDocxBorders,
+  useDocxComments,
   useDocxDocumentTheme,
   useDocxEditor,
   useDocxFormFields,