@extend-ai/react-docx 0.7.0-alpha.4 → 0.7.0-alpha.6

package/dist/index.cjs

@@ -713,327 +713,7 @@ var init_src2 = __esm({
   }
 });
 
-// src/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  DEFAULT_MIN_PARAGRAPH_LINE_HEIGHT_PX: () => DEFAULT_MIN_PARAGRAPH_LINE_HEIGHT_PX,
-  DEFAULT_PAGE_OVERFLOW_TOLERANCE_PX: () => DEFAULT_PAGE_OVERFLOW_TOLERANCE_PX,
-  DocxEditorViewer: () => DocxEditorViewer,
-  ReactDocxViewer: () => ReactDocxViewer,
-  applyRunStyle: () => applyRunStyle,
-  buildDocModel: () => buildDocModel,
-  buildDocModelFromBytes: () => buildDocModelFromBytes,
-  buildDocumentPageNodeSegments: () => buildDocumentPageNodeSegments2,
-  buildDocumentPageRanges: () => buildDocumentPageRanges,
-  buildLayoutSnapshot: () => buildLayoutSnapshot,
-  cloneDocModel: () => cloneDocModel,
-  collectDocxEstimatedOverflowBreakStartNodeIndexes: () => collectDocxEstimatedOverflowBreakStartNodeIndexes,
-  collectDocxHardPageBreakStartNodeIndexes: () => collectDocxHardPageBreakStartNodeIndexes2,
-  collectDocxLastRenderedPageBreakStartNodeIndexes: () => collectDocxLastRenderedPageBreakStartNodeIndexes,
-  collectTableExplicitPageBreakInfo: () => collectTableExplicitPageBreakInfo2,
-  collectTopLevelExplicitPageBreakStartNodeIndexes: () => collectTopLevelExplicitPageBreakStartNodeIndexes2,
-  copyParagraphs: () => copyParagraphs,
-  createMinimalDocxPackage: () => createMinimalDocxPackage,
-  defaultStarterModel: () => defaultStarterModel,
-  duplicateParagraph: () => duplicateParagraph,
-  getPart: () => getPart,
-  initWasm: () => initWasm,
-  insertParagraph: () => insertParagraph,
-  layoutDocument: () => layoutDocument,
-  modelToDocumentXml: () => modelToDocumentXml,
-  normalizeDocModel: () => normalizeDocModel,
-  packageToArrayBuffer: () => packageToArrayBuffer,
-  paragraphAfterSpacingPx: () => paragraphAfterSpacingPx2,
-  paragraphBeforeSpacingPx: () => paragraphBeforeSpacingPx2,
-  paragraphHasExplicitPageBreak: () => paragraphHasExplicitPageBreak3,
-  paragraphHasLastRenderedPageBreak: () => paragraphHasLastRenderedPageBreak2,
-  paragraphHasPageBreakBefore: () => paragraphHasPageBreakBefore3,
-  paragraphLetterheadColumnGroupAtSegmentOffset: () => paragraphLetterheadColumnGroupAtSegmentOffset2,
-  paragraphLetterheadFloatSideAtNodeIndex: () => paragraphLetterheadFloatSideAtNodeIndex,
-  paragraphStartsWithLastRenderedPageBreak: () => paragraphStartsWithLastRenderedPageBreak2,
-  parseDocx: () => parseDocx,
-  parseParagraphsFromClipboard: () => parseParagraphsFromClipboard,
-  parseSectionLayout: () => parseSectionLayout,
-  pasteParagraphs: () => pasteParagraphs,
-  removeParagraph: () => removeParagraph,
-  replaceText: () => replaceText,
-  resolveDocumentForLayout: () => resolveDocumentForLayout,
-  resolveDocumentLayout: () => resolveDocumentLayout,
-  resolveDocumentPageSegmentStartNodeIndex: () => resolveDocumentPageSegmentStartNodeIndex,
-  resolveDocumentSectionsFromMetadata: () => resolveDocumentSectionsFromMetadata2,
-  resolveDocxPageThumbnailResolution: () => resolveDocxPageThumbnailResolution,
-  resolvePaginationSectionMetricsIndexForNodeIndex: () => resolvePaginationSectionMetricsIndexForNodeIndex2,
-  resolveParagraphBeforeSpacingPx: () => resolveParagraphBeforeSpacingPx2,
-  resolveSectionIndexForNodeIndex: () => resolveSectionIndexForNodeIndex2,
-  resolveSectionPropertiesXmlForNodeIndex: () => resolveSectionPropertiesXmlForNodeIndex,
-  scalePaginationSectionMetricsHeights: () => scalePaginationSectionMetricsHeights2,
-  scorePaginationAgainstStoredPageBreaks: () => scorePaginationAgainstStoredPageBreaks,
-  sectionBreakAfterParagraphStartsNewPage: () => sectionBreakAfterParagraphStartsNewPage2,
-  sectionBreakPropertiesStartNewPage: () => sectionBreakPropertiesStartNewPage2,
-  sectionTitlePageEnabled: () => sectionTitlePageEnabled2,
-  selectSectionVariantForPage: () => selectSectionVariantForPage2,
-  serializeDocModel: () => serializeDocModel,
-  serializeDocx: () => serializeDocx,
-  serializeParagraphsForClipboard: () => serializeParagraphsForClipboard,
-  setParagraphAlignment: () => setParagraphAlignment,
-  setParagraphHeading: () => setParagraphHeading,
-  setRunColor: () => setRunColor,
-  setRunHighlight: () => setRunHighlight,
-  setWasmSource: () => setWasmSource,
-  splitParagraphChildrenAtTextOffsets: () => splitParagraphChildrenAtTextOffsets,
-  toggleRunStyleFlag: () => toggleRunStyleFlag,
-  updateParagraphText: () => updateParagraphText,
-  updateTableCellParagraphText: () => updateTableCellParagraphText,
-  updateTableCellParagraphTextRecursive: () => updateTableCellParagraphTextRecursive,
-  updateTableCellText: () => updateTableCellText,
-  useDocxBorders: () => useDocxBorders,
-  useDocxDocumentTheme: () => useDocxDocumentTheme,
-  useDocxEditor: () => useDocxEditor,
-  useDocxFormFields: () => useDocxFormFields,
-  useDocxImageWrapMenu: () => useDocxImageWrapMenu,
-  useDocxLineSpacing: () => useDocxLineSpacing,
-  useDocxModel: () => useDocxModel,
-  useDocxPageLayout: () => useDocxPageLayout,
-  useDocxPageThumbnails: () => useDocxPageThumbnails,
-  useDocxPagination: () => useDocxPagination,
-  useDocxParagraphStyles: () => useDocxParagraphStyles,
-  useDocxTrackChanges: () => useDocxTrackChanges,
-  useDocxViewerThumbnails: () => useDocxViewerThumbnails,
-  withPart: () => withPart
-});
-module.exports = __toCommonJS(index_exports);
-init_cjs_shims();
-var React2 = __toESM(require("react"), 1);
-
-// ../layout-engine/src/index.ts
-init_cjs_shims();
-var DEFAULT_OPTIONS = {
-  pageWidth: 816,
-  pageHeight: 1056,
-  margin: 72,
-  minLineHeight: 22,
-  paragraphSpacing: 8,
-  tableCellPadding: 8
-};
-function headingScale(level) {
-  if (!level) {
-    return 1;
-  }
-  switch (level) {
-    case 1:
-      return 2.15;
-    case 2:
-      return 1.75;
-    case 3:
-      return 1.45;
-    case 4:
-      return 1.28;
-    case 5:
-      return 1.15;
-    case 6:
-      return 1.05;
-    default:
-      return 1;
-  }
-}
-function runHeightPx(run) {
-  if (run.kind === "image") {
-    if (run.floating) {
-      return 0;
-    }
-    return run.heightPx ?? 96;
-  }
-  const fontSizePt = run.style?.fontSizePt ?? 12;
-  return Math.round(fontSizePt * 1.6);
-}
-function lineHeightFromRuns(runs, minLineHeight, headingLevel) {
-  const base = runs.reduce((largest, run) => {
-    return Math.max(largest, runHeightPx(run));
-  }, 12) * headingScale(headingLevel);
-  return Math.max(minLineHeight, Math.round(base));
-}
-function spacingForBlock(baseSpacing, headingLevel) {
-  if (!headingLevel) {
-    return baseSpacing;
-  }
-  return baseSpacing + Math.max(4, (7 - headingLevel) * 2);
-}
-function formFieldDisplayText(field) {
-  switch (field.fieldType) {
-    case "checkbox":
-      return field.checked ? field.checkedSymbol ?? "\u2612" : field.uncheckedSymbol ?? "\u2610";
-    case "dropdown":
-    case "date":
-    case "text":
-    default:
-      return field.value ?? "";
-  }
-}
-function paragraphToLayout(paragraph, idPrefix, x, y, width, minLineHeight) {
-  const runs = paragraph.children.map((child, runIndex) => {
-    if (child.type === "text") {
-      return {
-        kind: "text",
-        id: `${idPrefix}-run-${runIndex}`,
-        text: child.text,
-        style: child.style,
-        link: child.link
-      };
-    }
-    if (child.type === "form-field") {
-      return {
-        kind: "text",
-        id: `${idPrefix}-run-${runIndex}`,
-        text: formFieldDisplayText(child),
-        style: child.style,
-        link: child.link
-      };
-    }
-    return {
-      kind: "image",
-      id: `${idPrefix}-run-${runIndex}`,
-      src: child.src,
-      alt: child.alt,
-      widthPx: child.widthPx,
-      heightPx: child.heightPx,
-      contentType: child.contentType,
-      data: child.data ? new Uint8Array(child.data) : void 0,
-      floating: Boolean(child.floating)
-    };
-  });
-  return {
-    kind: "paragraph",
-    id: idPrefix,
-    runs,
-    align: paragraph.style?.align ?? "left",
-    headingLevel: paragraph.style?.headingLevel,
-    x,
-    y,
-    width,
-    height: lineHeightFromRuns(runs, minLineHeight, paragraph.style?.headingLevel)
-  };
-}
-function paragraphsForTableCellNodes(nodes) {
-  const paragraphs = [];
-  const walk = (items) => {
-    for (const item of items) {
-      if (item.type === "paragraph") {
-        paragraphs.push(item);
-        continue;
-      }
-      for (const row of item.rows) {
-        for (const cell of row.cells) {
-          walk(cell.nodes);
-        }
-      }
-    }
-  };
-  walk(nodes);
-  return paragraphs;
-}
-function tableToLayout(table, idPrefix, x, y, width, options) {
-  const columnCount = Math.max(
-    1,
-    ...table.rows.map(
-      (row) => row.cells.reduce(
-        (sum, cell) => sum + (cell.style?.gridSpan && cell.style.gridSpan > 1 ? cell.style.gridSpan : 1),
-        0
-      )
-    )
-  );
-  const baseCellWidth = width / columnCount;
-  let tableHeight = 0;
-  const rows = table.rows.map((row, rowIndex) => {
-    let rowHeight = options.minLineHeight + options.tableCellPadding * 2;
-    let columnCursor = 0;
-    const cells = row.cells.map((cell, cellIndex) => {
-      const colSpan = cell.style?.gridSpan && cell.style.gridSpan > 1 ? cell.style.gridSpan : 1;
-      const cellWidth = baseCellWidth * colSpan;
-      const cellParagraphs = paragraphsForTableCellNodes(cell.nodes);
-      const paragraphBlocks = cellParagraphs.map(
-        (paragraph, paragraphIndex) => paragraphToLayout(
-          paragraph,
-          `${idPrefix}-r${rowIndex}-c${cellIndex}-p${paragraphIndex}`,
-          x + columnCursor * baseCellWidth,
-          y,
-          cellWidth,
-          options.minLineHeight
-        )
-      );
-      const paragraphsHeight = paragraphBlocks.reduce((sum, block) => sum + block.height, 0);
-      rowHeight = Math.max(rowHeight, paragraphsHeight + options.tableCellPadding * 2);
-      columnCursor += colSpan;
-      return {
-        id: `${idPrefix}-r${rowIndex}-c${cellIndex}`,
-        colSpan,
-        backgroundColor: cell.style?.backgroundColor ?? row.style?.backgroundColor,
-        paragraphs: paragraphBlocks
-      };
-    });
-    tableHeight += rowHeight;
-    return {
-      id: `${idPrefix}-row-${rowIndex}`,
-      backgroundColor: row.style?.backgroundColor,
-      cells
-    };
-  });
-  return {
-    kind: "table",
-    id: idPrefix,
-    x,
-    y,
-    width,
-    height: Math.max(tableHeight, options.minLineHeight * 2),
-    rows
-  };
-}
-function estimateBlockHeight(block) {
-  if (block.kind === "paragraph") {
-    return block.height;
-  }
-  return block.height;
-}
-function layoutDocument(model, options = {}) {
-  const resolved = { ...DEFAULT_OPTIONS, ...options };
-  const pages = [{ number: 1, blocks: [] }];
-  const contentWidth = resolved.pageWidth - resolved.margin * 2;
-  const pageBottom = resolved.pageHeight - resolved.margin;
-  let cursorY = resolved.margin;
-  for (const [index, node] of model.nodes.entries()) {
-    const block = node.type === "paragraph" ? paragraphToLayout(
-      node,
-      `paragraph-${index}`,
-      resolved.margin,
-      cursorY,
-      contentWidth,
-      resolved.minLineHeight
-    ) : tableToLayout(node, `table-${index}`, resolved.margin, cursorY, contentWidth, resolved);
-    const blockHeight = estimateBlockHeight(block);
-    const currentPage = pages[pages.length - 1];
-    if (cursorY + blockHeight > pageBottom && currentPage.blocks.length > 0) {
-      pages.push({
-        number: pages.length + 1,
-        blocks: []
-      });
-      cursorY = resolved.margin;
-      if (block.kind === "paragraph") {
-        block.y = cursorY;
-      } else {
-        block.y = cursorY;
-      }
-    }
-    pages[pages.length - 1].blocks.push(block);
-    cursorY += blockHeight + (block.kind === "paragraph" ? spacingForBlock(resolved.paragraphSpacing, block.headingLevel) : resolved.paragraphSpacing + 10);
-  }
-  return pages;
-}
-
-// ../doc-model/src/index.ts
-init_cjs_shims();
-init_src();
-
 // ../doc-model/src/normalize.ts
-init_cjs_shims();
 function normalizeUint8Array(value) {
   if (value instanceof Uint8Array) {
     return value;
@@ -1120,12 +800,22 @@ function normalizeDocModel(model) {
     }
   };
 }
+var init_normalize = __esm({
+  "../doc-model/src/normalize.ts"() {
+    "use strict";
+    init_cjs_shims();
+  }
+});
 
 // ../doc-model/src/types.ts
-init_cjs_shims();
+var init_types = __esm({
+  "../doc-model/src/types.ts"() {
+    "use strict";
+    init_cjs_shims();
+  }
+});
 
 // ../doc-model/src/clone.ts
-init_cjs_shims();
 function isParagraphCellContent(node) {
   return node.type === "paragraph";
 }
@@ -1423,12 +1113,26 @@ function cloneDocModel(model) {
       endnotes: model.metadata.endnotes?.map((note) => ({
         ...note,
         nodes: note.nodes?.map(cloneDocNode)
-      }))
+      })),
+      comments: model.metadata.comments?.map((comment) => ({ ...comment }))
     }
   };
 }
+var init_clone = __esm({
+  "../doc-model/src/clone.ts"() {
+    "use strict";
+    init_cjs_shims();
+  }
+});
 
 // ../doc-model/src/index.ts
+var src_exports2 = {};
+__export(src_exports2, {
+  buildDocModel: () => buildDocModel,
+  buildDocModelFromBytes: () => buildDocModelFromBytes,
+  cloneDocModel: () => cloneDocModel,
+  normalizeDocModel: () => normalizeDocModel
+});
 async function buildDocModel(pkg) {
   const wasmPackage = mapsToWasmPackage({
     parts: pkg.parts,
@@ -1445,9 +1149,474 @@ async function buildDocModelFromBytes(bytes) {
   const model = await buildDocModel(pkg);
   return { package: pkg, model };
 }
+var init_src3 = __esm({
+  "../doc-model/src/index.ts"() {
+    "use strict";
+    init_cjs_shims();
+    init_src();
+    init_normalize();
+    init_types();
+    init_clone();
+    init_normalize();
+  }
+});
 
 // src/index.tsx
-init_src2();
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_MIN_PARAGRAPH_LINE_HEIGHT_PX: () => DEFAULT_MIN_PARAGRAPH_LINE_HEIGHT_PX,
+  DEFAULT_PAGE_OVERFLOW_TOLERANCE_PX: () => DEFAULT_PAGE_OVERFLOW_TOLERANCE_PX,
+  DocxEditorViewer: () => DocxEditorViewer,
+  ReactDocxViewer: () => ReactDocxViewer,
+  applyRunStyle: () => applyRunStyle,
+  buildDocModel: () => buildDocModel,
+  buildDocModelFromBytes: () => buildDocModelFromBytes,
+  buildDocumentPageNodeSegments: () => buildDocumentPageNodeSegments2,
+  buildDocumentPageRanges: () => buildDocumentPageRanges,
+  buildLayoutSnapshot: () => buildLayoutSnapshot,
+  cloneDocModel: () => cloneDocModel,
+  collectDocxEstimatedOverflowBreakStartNodeIndexes: () => collectDocxEstimatedOverflowBreakStartNodeIndexes,
+  collectDocxHardPageBreakStartNodeIndexes: () => collectDocxHardPageBreakStartNodeIndexes2,
+  collectDocxLastRenderedPageBreakStartNodeIndexes: () => collectDocxLastRenderedPageBreakStartNodeIndexes,
+  collectTableExplicitPageBreakInfo: () => collectTableExplicitPageBreakInfo2,
+  collectTopLevelExplicitPageBreakStartNodeIndexes: () => collectTopLevelExplicitPageBreakStartNodeIndexes2,
+  copyParagraphs: () => copyParagraphs,
+  createMinimalDocxPackage: () => createMinimalDocxPackage,
+  defaultStarterModel: () => defaultStarterModel,
+  duplicateParagraph: () => duplicateParagraph,
+  getPart: () => getPart,
+  initWasm: () => initWasm,
+  insertParagraph: () => insertParagraph,
+  layoutDocument: () => layoutDocument,
+  modelToDocumentXml: () => modelToDocumentXml,
+  normalizeDocModel: () => normalizeDocModel,
+  packageToArrayBuffer: () => packageToArrayBuffer,
+  paragraphAfterSpacingPx: () => paragraphAfterSpacingPx2,
+  paragraphBeforeSpacingPx: () => paragraphBeforeSpacingPx2,
+  paragraphHasExplicitPageBreak: () => paragraphHasExplicitPageBreak3,
+  paragraphHasLastRenderedPageBreak: () => paragraphHasLastRenderedPageBreak2,
+  paragraphHasPageBreakBefore: () => paragraphHasPageBreakBefore3,
+  paragraphLetterheadColumnGroupAtSegmentOffset: () => paragraphLetterheadColumnGroupAtSegmentOffset2,
+  paragraphLetterheadFloatSideAtNodeIndex: () => paragraphLetterheadFloatSideAtNodeIndex,
+  paragraphStartsWithLastRenderedPageBreak: () => paragraphStartsWithLastRenderedPageBreak2,
+  parseDocx: () => parseDocx,
+  parseParagraphsFromClipboard: () => parseParagraphsFromClipboard,
+  parseSectionLayout: () => parseSectionLayout,
+  pasteParagraphs: () => pasteParagraphs,
+  removeParagraph: () => removeParagraph,
+  replaceText: () => replaceText,
+  resolveDocumentForLayout: () => resolveDocumentForLayout,
+  resolveDocumentLayout: () => resolveDocumentLayout,
+  resolveDocumentPageSegmentStartNodeIndex: () => resolveDocumentPageSegmentStartNodeIndex,
+  resolveDocumentSectionsFromMetadata: () => resolveDocumentSectionsFromMetadata2,
+  resolveDocxPageThumbnailResolution: () => resolveDocxPageThumbnailResolution,
+  resolvePaginationSectionMetricsIndexForNodeIndex: () => resolvePaginationSectionMetricsIndexForNodeIndex2,
+  resolveParagraphBeforeSpacingPx: () => resolveParagraphBeforeSpacingPx2,
+  resolveSectionIndexForNodeIndex: () => resolveSectionIndexForNodeIndex2,
+  resolveSectionPropertiesXmlForNodeIndex: () => resolveSectionPropertiesXmlForNodeIndex,
+  scalePaginationSectionMetricsHeights: () => scalePaginationSectionMetricsHeights2,
+  scorePaginationAgainstStoredPageBreaks: () => scorePaginationAgainstStoredPageBreaks,
+  sectionBreakAfterParagraphStartsNewPage: () => sectionBreakAfterParagraphStartsNewPage2,
+  sectionBreakPropertiesStartNewPage: () => sectionBreakPropertiesStartNewPage2,
+  sectionTitlePageEnabled: () => sectionTitlePageEnabled2,
+  selectSectionVariantForPage: () => selectSectionVariantForPage2,
+  serializeDocModel: () => serializeDocModel,
+  serializeDocx: () => serializeDocx,
+  serializeParagraphsForClipboard: () => serializeParagraphsForClipboard,
+  setParagraphAlignment: () => setParagraphAlignment,
+  setParagraphHeading: () => setParagraphHeading,
+  setRunColor: () => setRunColor,
+  setRunHighlight: () => setRunHighlight,
+  setWasmSource: () => setWasmSource,
+  splitParagraphChildrenAtTextOffsets: () => splitParagraphChildrenAtTextOffsets,
+  toggleRunStyleFlag: () => toggleRunStyleFlag,
+  updateParagraphText: () => updateParagraphText,
+  updateTableCellParagraphText: () => updateTableCellParagraphText,
+  updateTableCellParagraphTextRecursive: () => updateTableCellParagraphTextRecursive,
+  updateTableCellText: () => updateTableCellText,
+  useDocxBorders: () => useDocxBorders,
+  useDocxComments: () => useDocxComments,
+  useDocxDocumentTheme: () => useDocxDocumentTheme,
+  useDocxEditor: () => useDocxEditor,
+  useDocxFormFields: () => useDocxFormFields,
+  useDocxImageWrapMenu: () => useDocxImageWrapMenu,
+  useDocxLineSpacing: () => useDocxLineSpacing,
+  useDocxModel: () => useDocxModel,
+  useDocxPageLayout: () => useDocxPageLayout,
+  useDocxPageThumbnails: () => useDocxPageThumbnails,
+  useDocxPagination: () => useDocxPagination,
+  useDocxParagraphStyles: () => useDocxParagraphStyles,
+  useDocxTrackChanges: () => useDocxTrackChanges,
+  useDocxViewerThumbnails: () => useDocxViewerThumbnails,
+  withPart: () => withPart
+});
+module.exports = __toCommonJS(index_exports);
+init_cjs_shims();
+var React2 = __toESM(require("react"), 1);
+
+// ../layout-engine/src/index.ts
+init_cjs_shims();
+var DEFAULT_OPTIONS = {
+  pageWidth: 816,
+  pageHeight: 1056,
+  margin: 72,
+  minLineHeight: 22,
+  paragraphSpacing: 8,
+  tableCellPadding: 8
+};
+function headingScale(level) {
+  if (!level) {
+    return 1;
+  }
+  switch (level) {
+    case 1:
+      return 2.15;
+    case 2:
+      return 1.75;
+    case 3:
+      return 1.45;
+    case 4:
+      return 1.28;
+    case 5:
+      return 1.15;
+    case 6:
+      return 1.05;
+    default:
+      return 1;
+  }
+}
+function runHeightPx(run) {
+  if (run.kind === "image") {
+    if (run.floating) {
+      return 0;
+    }
+    return run.heightPx ?? 96;
+  }
+  const fontSizePt = run.style?.fontSizePt ?? 12;
+  return Math.round(fontSizePt * 1.6);
+}
+function lineHeightFromRuns(runs, minLineHeight, headingLevel) {
+  const base = runs.reduce((largest, run) => {
+    return Math.max(largest, runHeightPx(run));
+  }, 12) * headingScale(headingLevel);
+  return Math.max(minLineHeight, Math.round(base));
+}
+function spacingForBlock(baseSpacing, headingLevel) {
+  if (!headingLevel) {
+    return baseSpacing;
+  }
+  return baseSpacing + Math.max(4, (7 - headingLevel) * 2);
+}
+function formFieldDisplayText(field) {
+  switch (field.fieldType) {
+    case "checkbox":
+      return field.checked ? field.checkedSymbol ?? "\u2612" : field.uncheckedSymbol ?? "\u2610";
+    case "dropdown":
+    case "date":
+    case "text":
+    default:
+      return field.value ?? "";
+  }
+}
+function paragraphToLayout(paragraph, idPrefix, x, y, width, minLineHeight) {
+  const runs = paragraph.children.map((child, runIndex) => {
+    if (child.type === "text") {
+      return {
+        kind: "text",
+        id: `${idPrefix}-run-${runIndex}`,
+        text: child.text,
+        style: child.style,
+        link: child.link
+      };
+    }
+    if (child.type === "form-field") {
+      return {
+        kind: "text",
+        id: `${idPrefix}-run-${runIndex}`,
+        text: formFieldDisplayText(child),
+        style: child.style,
+        link: child.link
+      };
+    }
+    return {
+      kind: "image",
+      id: `${idPrefix}-run-${runIndex}`,
+      src: child.src,
+      alt: child.alt,
+      widthPx: child.widthPx,
+      heightPx: child.heightPx,
+      contentType: child.contentType,
+      data: child.data ? new Uint8Array(child.data) : void 0,
+      floating: Boolean(child.floating)
+    };
+  });
+  return {
+    kind: "paragraph",
+    id: idPrefix,
+    runs,
+    align: paragraph.style?.align ?? "left",
+    headingLevel: paragraph.style?.headingLevel,
+    x,
+    y,
+    width,
+    height: lineHeightFromRuns(runs, minLineHeight, paragraph.style?.headingLevel)
+  };
+}
+function paragraphsForTableCellNodes(nodes) {
+  const paragraphs = [];
+  const walk = (items) => {
+    for (const item of items) {
+      if (item.type === "paragraph") {
+        paragraphs.push(item);
+        continue;
+      }
+      for (const row of item.rows) {
+        for (const cell of row.cells) {
+          walk(cell.nodes);
+        }
+      }
+    }
+  };
+  walk(nodes);
+  return paragraphs;
+}
+function tableToLayout(table, idPrefix, x, y, width, options) {
+  const columnCount = Math.max(
+    1,
+    ...table.rows.map(
+      (row) => row.cells.reduce(
+        (sum, cell) => sum + (cell.style?.gridSpan && cell.style.gridSpan > 1 ? cell.style.gridSpan : 1),
+        0
+      )
+    )
+  );
+  const baseCellWidth = width / columnCount;
+  let tableHeight = 0;
+  const rows = table.rows.map((row, rowIndex) => {
+    let rowHeight = options.minLineHeight + options.tableCellPadding * 2;
+    let columnCursor = 0;
+    const cells = row.cells.map((cell, cellIndex) => {
+      const colSpan = cell.style?.gridSpan && cell.style.gridSpan > 1 ? cell.style.gridSpan : 1;
+      const cellWidth = baseCellWidth * colSpan;
+      const cellParagraphs = paragraphsForTableCellNodes(cell.nodes);
+      const paragraphBlocks = cellParagraphs.map(
+        (paragraph, paragraphIndex) => paragraphToLayout(
+          paragraph,
+          `${idPrefix}-r${rowIndex}-c${cellIndex}-p${paragraphIndex}`,
+          x + columnCursor * baseCellWidth,
+          y,
+          cellWidth,
+          options.minLineHeight
+        )
+      );
+      const paragraphsHeight = paragraphBlocks.reduce((sum, block) => sum + block.height, 0);
+      rowHeight = Math.max(rowHeight, paragraphsHeight + options.tableCellPadding * 2);
+      columnCursor += colSpan;
+      return {
+        id: `${idPrefix}-r${rowIndex}-c${cellIndex}`,
+        colSpan,
+        backgroundColor: cell.style?.backgroundColor ?? row.style?.backgroundColor,
+        paragraphs: paragraphBlocks
+      };
+    });
+    tableHeight += rowHeight;
+    return {
+      id: `${idPrefix}-row-${rowIndex}`,
+      backgroundColor: row.style?.backgroundColor,
+      cells
+    };
+  });
+  return {
+    kind: "table",
+    id: idPrefix,
+    x,
+    y,
+    width,
+    height: Math.max(tableHeight, options.minLineHeight * 2),
+    rows
+  };
+}
+function estimateBlockHeight(block) {
+  if (block.kind === "paragraph") {
+    return block.height;
+  }
+  return block.height;
+}
+function layoutDocument(model, options = {}) {
+  const resolved = { ...DEFAULT_OPTIONS, ...options };
+  const pages = [{ number: 1, blocks: [] }];
+  const contentWidth = resolved.pageWidth - resolved.margin * 2;
+  const pageBottom = resolved.pageHeight - resolved.margin;
+  let cursorY = resolved.margin;
+  for (const [index, node] of model.nodes.entries()) {
+    const block = node.type === "paragraph" ? paragraphToLayout(
+      node,
+      `paragraph-${index}`,
+      resolved.margin,
+      cursorY,
+      contentWidth,
+      resolved.minLineHeight
+    ) : tableToLayout(node, `table-${index}`, resolved.margin, cursorY, contentWidth, resolved);
+    const blockHeight = estimateBlockHeight(block);
+    const currentPage = pages[pages.length - 1];
+    if (cursorY + blockHeight > pageBottom && currentPage.blocks.length > 0) {
+      pages.push({
+        number: pages.length + 1,
+        blocks: []
+      });
+      cursorY = resolved.margin;
+      if (block.kind === "paragraph") {
+        block.y = cursorY;
+      } else {
+        block.y = cursorY;
+      }
+    }
+    pages[pages.length - 1].blocks.push(block);
+    cursorY += blockHeight + (block.kind === "paragraph" ? spacingForBlock(resolved.paragraphSpacing, block.headingLevel) : resolved.paragraphSpacing + 10);
+  }
+  return pages;
+}
+
+// src/docx-import.ts
+init_cjs_shims();
+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", importMetaUrl), {
+    type: "module",
+    name: "react-docx-import"
+  });
+}
+async function importDocxOnMainThread(buffer, signal) {
+  if (signal?.aborted) {
+    throw createAbortError();
+  }
+  const startedAt = performanceNow();
+  const [{ parseDocx: parseDocx2 }, { buildDocModel: buildDocModel2 }] = await Promise.all([
+    Promise.resolve().then(() => (init_src2(), src_exports)),
+    Promise.resolve().then(() => (init_src3(), src_exports2))
+  ]);
+  const pkg = await parseDocx2(buffer);
+  const parsedAt = performanceNow();
+  if (signal?.aborted) {
+    throw createAbortError();
+  }
+  const model = await buildDocModel2(pkg);
+  const finishedAt = performanceNow();
+  if (signal?.aborted) {
+    throw createAbortError();
+  }
+  return {
+    package: pkg,
+    model,
+    source: "main-thread",
+    timings: {
+      totalMs: finishedAt - startedAt,
+      parseMs: parsedAt - startedAt,
+      buildModelMs: finishedAt - parsedAt
+    }
+  };
+}
+function performanceNow() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+async function importDocxBuffer(buffer, options = {}) {
+  if (options.signal?.aborted) {
+    throw createAbortError();
+  }
+  if (!canUseDocxImportWorker(options)) {
+    return importDocxOnMainThread(buffer, options.signal);
+  }
+  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", handleError2);
+      worker.removeEventListener("messageerror", handleMessageError);
+      options.signal?.removeEventListener("abort", handleAbort);
+      worker.terminate();
+    };
+    const settle = (resolver) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      cleanup();
+      resolver();
+    };
+    const handleAbort = () => {
+      settle(() => reject(createAbortError()));
+    };
+    const handleError2 = (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;
+      }
+      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", handleError2);
+    worker.addEventListener("messageerror", handleMessageError);
+    options.signal?.addEventListener("abort", handleAbort, { once: true });
+    try {
+      const request = {
+        id: requestId,
+        type: "import-docx",
+        buffer
+      };
+      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"))
+      );
+    }
+  });
+}
 
 // src/section-layout.ts
 init_cjs_shims();
@@ -1819,9 +1988,11 @@ var React = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 var import_server = require("react-dom/server");
 var import_react_virtual = require("@tanstack/react-virtual");
+init_src3();
 
 // ../editor-ops/src/index.ts
 init_cjs_shims();
+init_src3();
 function paragraphFromText(text, options) {
   return {
     type: "paragraph",
@@ -2804,9 +2975,6 @@ function parseParagraphsFromClipboard(input) {
   }
 }
 
-// src/editor.tsx
-init_src2();
-
 // ../serializer/src/index.ts
 init_cjs_shims();
 init_src();
@@ -3183,6 +3351,13 @@ function reconcilePageCountCandidateToTargetCountByScalingHeight(options) {
     previousScale = scale;
     previousPageCount = candidate.pageCount;
   }
+  if (!needMorePages && selectedCandidate.pageCount !== safeTargetPageCount) {
+    return {
+      pageCount: initialPageCount,
+      pages: initialPages,
+      scale: 1
+    };
+  }
   return selectedCandidate;
 }
 
@@ -4457,6 +4632,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);
@@ -4641,6 +4830,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;
@@ -4728,6 +4940,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();
@@ -5022,6 +5235,10 @@ function resolveEffectiveZoomScale(element) {
   }
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
 }
+function normalizePageVirtualizationZoomScale(value) {
+  const scale = Number(value);
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
 var DOC_SURFACE_STYLE_BY_THEME = {
   light: {
     backgroundColor: "#ffffff",
@@ -9729,9 +9946,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,
@@ -13597,10 +13812,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) => {
@@ -14650,6 +14862,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")) {
@@ -14696,11 +14983,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;
@@ -14780,13 +15072,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;
@@ -14866,6 +15164,7 @@ function paragraphStyleRefFieldValueSequence(paragraph) {
       fieldStack.pop();
     }
   }
+  setCacheEntry(styleRefFieldValueSequenceBySourceXml, xml, values);
   return values;
 }
 function normalizeStyleRefTarget(value) {
@@ -15000,6 +15299,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(
@@ -15041,8 +15341,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") {
@@ -15211,20 +15522,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();
@@ -15271,10 +15588,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__ */ (0, import_jsx_runtime.jsx)("span", { style: tabTextStyle(child.style, trackedStyle), children: "\xA0" }, key)
@@ -15530,10 +15850,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,
@@ -16822,11 +17145,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;
     }
@@ -18367,6 +18701,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":
@@ -18415,15 +18870,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) {
@@ -18442,10 +18897,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;
@@ -18500,30 +18955,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,
@@ -19554,10 +20009,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: []
@@ -19870,6 +20329,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;
@@ -19890,6 +20352,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;
@@ -19953,6 +20424,7 @@ function useDocxEditor(options = {}) {
   );
   React.useEffect(() => {
     return () => {
+      activeImportAbortControllerRef.current?.abort();
       unloadEmbeddedFonts();
     };
   }, [unloadEmbeddedFonts]);
@@ -20088,6 +20560,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,
@@ -20098,11 +20572,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: [] });
@@ -20115,16 +20628,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);
@@ -23050,6 +23578,8 @@ function useDocxEditor(options = {}) {
     documentTheme,
     trackedChanges,
     showTrackedChanges,
+    comments,
+    showComments,
     currentPage: paginationInfo.currentPage,
     totalPages: paginationInfo.totalPages,
     selection,
@@ -23077,8 +23607,10 @@ function useDocxEditor(options = {}) {
     setStatus,
     setDocumentTheme,
     setShowTrackedChanges,
+    setShowComments,
     syncPaginationInfo,
     toggleShowTrackedChanges,
+    toggleShowComments,
     importDocxFile,
     newDocument,
     exportDocx,
@@ -23365,6 +23897,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");
@@ -23378,6 +23911,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");
@@ -23524,6 +24060,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);
@@ -23791,6 +24331,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(() => {
@@ -24663,6 +25239,8 @@ function DocxEditorViewer({
   headingStyles,
   showTrackedChanges,
   renderTrackedChangeCard,
+  showComments,
+  renderCommentCard,
   renderTableContextMenu,
   renderContextMenu,
   onFormFieldDoubleClick,
@@ -24671,7 +25249,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;
@@ -24690,11 +25270,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,
@@ -24737,7 +25319,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(
@@ -24805,26 +25386,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));
@@ -24846,7 +25407,6 @@ function DocxEditorViewer({
     [pageSurfaceRegistryOwner]
   );
   React.useEffect(() => {
-    pagePlaceholderRefCallbacksRef.current.clear();
     pageSurfaceRefCallbacksRef.current.clear();
   }, [pageSurfaceRegistryOwner]);
   const [
@@ -26087,6 +26647,17 @@ function DocxEditorViewer({
   const pageVirtualizationOverscan = hasLargeTableLayoutSurface && !Number.isFinite(pageVirtualization?.overscan) ? LARGE_TABLE_PAGE_VIRTUALIZATION_OVERSCAN : rawPageVirtualizationOverscan;
   const webdriverActive = typeof navigator !== "undefined" && navigator.webdriver === true;
   const internalPageVirtualizationRequested = pageVirtualization?.enabled !== false && !hasExternalVisiblePageRange && !hideDocumentUntilPaginationSettled && isInitialPaginationSettled && !deferInternalPageVirtualization && !webdriverActive && pageCount > 1;
+  const explicitPageVirtualizationScrollElement = pageVirtualization?.scrollElement ?? null;
+  const explicitPageVirtualizationZoomScale = normalizePageVirtualizationZoomScale(pageVirtualization?.zoomScale);
+  const resolveViewerMeasurementZoomScale = React.useCallback(
+    (rootElement, fallback = 1) => {
+      if (explicitPageVirtualizationZoomScale !== void 0) {
+        return explicitPageVirtualizationZoomScale;
+      }
+      return rootElement ? resolveEffectiveZoomScale(rootElement) : fallback;
+    },
+    [explicitPageVirtualizationZoomScale]
+  );
   React.useEffect(() => {
     setDeferInternalPageVirtualization(!hasLargeTableLayoutSurface);
   }, [editor.documentLoadNonce, hasLargeTableLayoutSurface]);
@@ -26117,9 +26688,34 @@ function DocxEditorViewer({
       return;
     }
     setInternalVirtualScrollElement(
-      nearestScrollableAncestor(viewerRootRef.current)
+      explicitPageVirtualizationScrollElement instanceof HTMLElement ? explicitPageVirtualizationScrollElement : nearestScrollableAncestor(viewerRootRef.current)
     );
-  }, [editor.documentLoadNonce, pageCount, trackedChangesEnabled]);
+  }, [
+    editor.documentLoadNonce,
+    explicitPageVirtualizationScrollElement,
+    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;
@@ -26128,11 +26724,22 @@ function DocxEditorViewer({
     if (!rootElement) {
       return;
     }
-    const nextScale = Math.round(resolveEffectiveZoomScale(rootElement) * 100) / 100;
+    const nextScale = Math.round(
+      resolveViewerMeasurementZoomScale(
+        rootElement,
+        virtualizerMeasurementScale
+      ) * 100
+    ) / 100;
     setVirtualizerMeasurementScale(
       (current) => Math.abs(current - nextScale) < 5e-3 ? current : nextScale
     );
-  });
+  }, [
+    editor.documentLoadNonce,
+    pageCount,
+    resolveViewerMeasurementZoomScale,
+    virtualizerMeasurementScale,
+    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);
@@ -26175,6 +26782,30 @@ function DocxEditorViewer({
     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;
@@ -26465,6 +27096,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;
@@ -26476,7 +27141,7 @@ function DocxEditorViewer({
       const next = new Map(current);
       let changed = false;
       const rootElement = viewerRootRef.current;
-      const zoomScale = rootElement ? resolveEffectiveZoomScale(rootElement) : 1;
+      const zoomScale = resolveViewerMeasurementZoomScale(rootElement, 1);
       paragraphElementsRef.current.forEach((element, nodeIndex) => {
         if (!element.isConnected || element.dataset.docxParagraphPartialLineRange === "true" || element.closest('[data-docx-header-footer-region="footer"]') || element.closest('[data-docx-header-footer-region="header"]')) {
           return;
@@ -26505,6 +27170,7 @@ function DocxEditorViewer({
   }, [
     editor.documentLoadNonce,
     pageNodeSegmentIdentityKeysByPage,
+    resolveViewerMeasurementZoomScale,
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
@@ -26624,7 +27290,7 @@ function DocxEditorViewer({
   }, [onPageCountChange, stableReportedPageCount]);
   React.useEffect(() => {
     const nextCurrentPage = clampNumber(
-      visiblePageStartIndex + 1,
+      (internalMostVisiblePageIndex ?? visiblePageStartIndex) + 1,
       1,
       Math.max(1, stableReportedPageCount)
     );
@@ -26634,6 +27300,7 @@ function DocxEditorViewer({
     });
   }, [
     editor.syncPaginationInfo,
+    internalMostVisiblePageIndex,
     stableReportedPageCount,
     visiblePageStartIndex
   ]);
@@ -26641,20 +27308,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;
@@ -26665,7 +27350,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(() => {
@@ -26679,18 +27370,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;
@@ -26714,7 +27405,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;
     });
@@ -26732,28 +27423,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;
@@ -26999,7 +27692,7 @@ function DocxEditorViewer({
       );
       return;
     }
-    const zoomScale = resolveEffectiveZoomScale(rootElement);
+    const zoomScale = resolveViewerMeasurementZoomScale(rootElement, 1);
     const next = {};
     for (let pageIndex = 0; pageIndex < pageCount; pageIndex += 1) {
       if (!isPageVisible(pageIndex)) {
@@ -27086,6 +27779,7 @@ function DocxEditorViewer({
     pageCount,
     pageHeaderAndFooterNodes,
     pageSectionInfoByIndex,
+    resolveViewerMeasurementZoomScale,
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
@@ -27115,7 +27809,7 @@ function DocxEditorViewer({
     if (Date.now() < paginationMeasurementSuspendUntilRef.current) {
       return;
     }
-    const zoomScale = resolveEffectiveZoomScale(rootElement);
+    const zoomScale = resolveViewerMeasurementZoomScale(rootElement, 1);
     const nextMeasuredPageIdentityKeys = pageNodeSegmentIdentityKeysByPage;
     const nextMeasuredPageDiagnostics = pageNodeSegmentsByPage.map(
       (_, pageIndex) => {
@@ -27252,9 +27946,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,
@@ -27325,6 +28024,7 @@ function DocxEditorViewer({
     pageNodeSegmentIdentityKeysByPage,
     pageSectionInfoByIndex,
     pageHeaderAndFooterNodes,
+    resolveViewerMeasurementZoomScale,
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
@@ -31759,7 +32459,10 @@ function DocxEditorViewer({
       return;
     }
     const rootElement = viewerRootRef.current;
-    const zoomScale = rootElement ? resolveEffectiveZoomScale(rootElement) : virtualizerMeasurementScale;
+    const zoomScale = resolveViewerMeasurementZoomScale(
+      rootElement,
+      virtualizerMeasurementScale
+    );
     const nextMeasuredHeights = {};
     editor.model.nodes.forEach((node, nodeIndex) => {
       if (node.type !== "table") {
@@ -31901,6 +32604,7 @@ function DocxEditorViewer({
     pageContentWidthPxByNodeIndex,
     paginationMeasurementEnabled,
     paginationMeasurementEpoch,
+    resolveViewerMeasurementZoomScale,
     tableMeasuredRowHeights,
     tableColumnWidths,
     tableRowHeights,
@@ -34083,7 +34787,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,
@@ -34096,6 +34801,7 @@ function DocxEditorViewer({
           void 0,
           {
             showTrackedChanges: trackedChangesEnabled,
+            showCommentHighlights: commentsEnabled,
             numberingDefinitions: editor.model.metadata.numberingDefinitions,
             tocLinkColorByLevel,
             paragraphOriginLeftPx: bodyParagraphOriginLeftPx,
@@ -40439,44 +41145,25 @@ ${currentText.slice(end)}`;
             }
           }
         ) : null,
-        pageNodeSegmentsByPage.map((pageNodeSegments, pageIndex) => {
+        pageStackVirtualSpacers.before.heightPx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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
@@ -40648,6 +41335,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: [
@@ -40898,9 +41589,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;
@@ -41725,10 +42413,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,
@@ -41789,12 +42477,12 @@ ${currentText.slice(end)}`;
                                   )
                                 ]
                               },
-                              `tracked-connector-${pageIndex}-${entry.change.id}`
+                              `tracked-connector-${pageIndex}-${entry.annotation.id}`
                             );
                           })
                         }
                       ),
-                      !hasTrackedChanges && pageIndex === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      (!trackedChangesEnabled || !hasTrackedChanges) && (!commentsEnabled || !hasComments) && pageIndex === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "p",
                         {
                           style: {
@@ -41807,19 +42495,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
@@ -41871,7 +42561,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__ */ (0, import_jsx_runtime.jsx)(
@@ -41890,6 +42580,23 @@ ${currentText.slice(end)}`;
                                   ]
                                 }
                               ),
+                              comment?.anchorText ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
                                 "p",
                                 {
@@ -41911,8 +42618,8 @@ ${currentText.slice(end)}`;
                             ]
                           }
                         );
-                        const renderedCard = renderTrackedChangeCard ? renderTrackedChangeCard({
-                          change: entry.change,
+                        const renderedCard = trackedChange ? renderTrackedChangeCard ? renderTrackedChangeCard({
+                          change: trackedChange,
                           kindLabel,
                           snippet,
                           formattedDate,
@@ -41920,12 +42627,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__ */ (0, import_jsx_runtime.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,
@@ -41940,7 +42656,7 @@ ${currentText.slice(end)}`;
                             style: cardContainerStyle,
                             children: renderedCard
                           },
-                          `tracked-card-${pageIndex}-${entry.change.id}`
+                          `tracked-card-${pageIndex}-${entry.annotation.id}`
                         );
                       })
                     ]
@@ -41951,6 +42667,20 @@ ${currentText.slice(end)}`;
             `page-${pageIndex}`
           );
         }),
+        pageStackVirtualSpacers.after.heightPx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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);
@@ -42307,6 +43037,7 @@ ${currentText.slice(end)}`;
 
 // src/index.tsx
 init_src2();
+init_src3();
 
 // ../layout-core/src/index.ts
 init_cjs_shims();
@@ -43854,16 +44585,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) {
@@ -43878,6 +44613,7 @@ function useDocxModel(file) {
     void load();
     return () => {
       isCurrent = false;
+      abortController.abort();
     };
   }, [file]);
   return state;
@@ -44218,6 +44954,7 @@ function ReactDocxViewer({
   updateTableCellParagraphTextRecursive,
   updateTableCellText,
   useDocxBorders,
+  useDocxComments,
   useDocxDocumentTheme,
   useDocxEditor,
   useDocxFormFields,