@extend-ai/react-docx 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -73,6 +73,7 @@ __export(index_exports, {
   resolveDocumentLayout: () => resolveDocumentLayout,
   resolveDocumentPageSegmentStartNodeIndex: () => resolveDocumentPageSegmentStartNodeIndex,
   resolveDocumentSectionsFromMetadata: () => resolveDocumentSectionsFromMetadata2,
+  resolveDocxPageThumbnailResolution: () => resolveDocxPageThumbnailResolution,
   resolvePaginationSectionMetricsIndexForNodeIndex: () => resolvePaginationSectionMetricsIndexForNodeIndex2,
   resolveParagraphBeforeSpacingPx: () => resolveParagraphBeforeSpacingPx2,
   resolveSectionIndexForNodeIndex: () => resolveSectionIndexForNodeIndex2,
@@ -104,6 +105,7 @@ __export(index_exports, {
   useDocxLineSpacing: () => useDocxLineSpacing,
   useDocxModel: () => useDocxModel,
   useDocxPageLayout: () => useDocxPageLayout,
+  useDocxPageThumbnails: () => useDocxPageThumbnails,
   useDocxPagination: () => useDocxPagination,
   useDocxParagraphStyles: () => useDocxParagraphStyles,
   useDocxTrackChanges: () => useDocxTrackChanges,
@@ -6609,7 +6611,6 @@ function resolveDocumentLayout(model) {
 }
 
 // src/image-render.ts
-var import_emf_converter = require("emf-converter");
 var import_fast_png = require("fast-png");
 var import_utif = __toESM(require("utif"), 1);
 var TIFF_CONTENT_TYPES = /* @__PURE__ */ new Set(["image/tiff", "image/tif"]);
@@ -6624,9 +6625,6 @@ var EMF_DATA_URI_PREFIXES = ["data:image/emf", "data:image/x-emf"];
 var WMF_DATA_URI_PREFIXES = ["data:image/wmf", "data:image/x-wmf"];
 var UTIF = import_utif.default;
 var convertedTiffSrcCache = /* @__PURE__ */ new Map();
-var convertedMetafileSrcCache = /* @__PURE__ */ new Map();
-var pendingMetafileConversions = /* @__PURE__ */ new Map();
-var renderableImageSourceListeners = /* @__PURE__ */ new Set();
 function normalizeImageContentType(image) {
   return image.contentType?.trim().toLowerCase();
 }
@@ -6667,45 +6665,15 @@ function imageUsesWmfContent(image) {
   const src = normalizeImageSrc(image)?.toLowerCase();
   return Boolean(src && WMF_DATA_URI_PREFIXES.some((prefix) => src.startsWith(prefix)));
 }
-function metafileCacheKey(image) {
-  const src = normalizeImageSrc(image);
-  if (src) {
-    return src;
-  }
-  const bytes = image.data;
-  if (!bytes?.byteLength) {
-    return void 0;
-  }
-  const base64 = bytesToBase642(bytes);
-  const contentType = normalizeImageContentType(image) ?? "application/octet-stream";
-  return base64 ? `data:${contentType};base64,${base64}` : void 0;
-}
-function notifyRenderableImageSourceListeners() {
-  renderableImageSourceListeners.forEach((listener) => {
-    try {
-      listener();
-    } catch {
-    }
-  });
-}
 function imageUsesPlaceholderFallback(image) {
-  const contentType = normalizeImageContentType(image);
-  if (!contentType || !PLACEHOLDER_FALLBACK_CONTENT_TYPES.has(contentType)) {
-    return false;
-  }
-  const cacheKey = metafileCacheKey(image);
-  if (!cacheKey) {
-    return true;
-  }
-  return convertedMetafileSrcCache.get(cacheKey) == null;
+  return imageHasMetafileContent(image);
 }
 function unsupportedImageFallbackLabel(image, widthPx, heightPx) {
   const isSmallIcon = (widthPx ?? 0) <= 56 && (heightPx ?? 0) <= 56;
-  const contentType = normalizeImageContentType(image);
-  if (contentType === "image/x-emf" || contentType === "image/emf") {
+  if (imageUsesEmfContent(image)) {
     return isSmallIcon ? "e" : "EMF";
   }
-  if (contentType === "image/x-wmf" || contentType === "image/wmf") {
+  if (imageUsesWmfContent(image)) {
     return isSmallIcon ? "w" : "WMF";
   }
   return isSmallIcon ? "e" : "TIFF";
@@ -6751,13 +6719,6 @@ function toArrayBuffer(bytes) {
   }
   return buffer.slice(byteOffset, byteOffset + byteLength);
 }
-function toStrictArrayBuffer(bytes) {
-  const arrayBuffer = toArrayBuffer(bytes);
-  if (arrayBuffer instanceof ArrayBuffer) {
-    return arrayBuffer;
-  }
-  return Uint8Array.from(bytes).buffer;
-}
 function resolveTiffBytes(image) {
   if (image.data?.byteLength) {
     return image.data;
@@ -6819,37 +6780,6 @@ function resolveRenderableImageSource(image) {
     return void 0;
   }
   if (imageHasMetafileContent(image)) {
-    const cacheKey = metafileCacheKey(image);
-    if (!cacheKey) {
-      return void 0;
-    }
-    if (convertedMetafileSrcCache.has(cacheKey)) {
-      return convertedMetafileSrcCache.get(cacheKey) ?? void 0;
-    }
-    if (!pendingMetafileConversions.has(cacheKey)) {
-      const bytes = resolveTiffBytes(image);
-      if (bytes) {
-        const conversionPromise = (async () => {
-          try {
-            const arrayBuffer = toStrictArrayBuffer(bytes);
-            const converted2 = imageUsesEmfContent(image) ? await (0, import_emf_converter.convertEmfToDataUrl)(arrayBuffer, void 0, void 0, { dpiScale: 1 }) : imageUsesWmfContent(image) ? await (0, import_emf_converter.convertWmfToDataUrl)(arrayBuffer, void 0, void 0, { dpiScale: 1 }) : null;
-            const normalized = converted2 ?? void 0;
-            convertedMetafileSrcCache.set(cacheKey, normalized ?? null);
-            notifyRenderableImageSourceListeners();
-            return normalized;
-          } catch {
-            convertedMetafileSrcCache.set(cacheKey, null);
-            notifyRenderableImageSourceListeners();
-            return void 0;
-          } finally {
-            pendingMetafileConversions.delete(cacheKey);
-          }
-        })();
-        pendingMetafileConversions.set(cacheKey, conversionPromise);
-      } else {
-        convertedMetafileSrcCache.set(cacheKey, null);
-      }
-    }
     return void 0;
   }
   if (!imageHasTiffContent(image)) {
@@ -6872,9 +6802,8 @@ function resolveRenderableImageSource(image) {
   return converted;
 }
 function subscribeRenderableImageSourceUpdates(listener) {
-  renderableImageSourceListeners.add(listener);
+  void listener;
   return () => {
-    renderableImageSourceListeners.delete(listener);
   };
 }
 
@@ -10306,6 +10235,9 @@ var LEADING_COVER_SPACER_EXTRA_HEIGHT_PX = 2;
 var PARAGRAPH_SEGMENT_TOP_BLEED_PX = 22;
 var PARAGRAPH_SEGMENT_DESCENDER_BLEED_PX = 6;
 var PARAGRAPH_SEGMENT_VISUAL_SAFETY_PX = 24;
+var PARAGRAPH_SEGMENT_FALLBACK_TOP_BLEED_MAX_PX = 4;
+var PARAGRAPH_SEGMENT_FALLBACK_BOTTOM_BLEED_MAX_PX = 0;
+var PARAGRAPH_SEGMENT_FALLBACK_VISUAL_SAFETY_PX = 4;
 var INITIAL_PAGINATION_PREMEASURE_PAGE_LIMIT = 8;
 var INITIAL_PAGINATION_PAGE_COUNT_OSCILLATION_DISTINCT_THRESHOLD = 2;
 var INITIAL_PAGINATION_PAGE_COUNT_OSCILLATION_CHANGE_THRESHOLD = 4;
@@ -10642,13 +10574,18 @@ var DOC_SURFACE_STYLE_BY_THEME = {
     boxShadow: "0 2px 10px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05)"
   },
   dark: {
-    backgroundColor: "#111827",
+    backgroundColor: "#0a0a0a",
     color: "#f3f4f6",
     colorScheme: "dark",
     border: "none",
     boxShadow: "0 2px 10px rgba(2, 6, 23, 0.55), 0 1px 2px rgba(2, 6, 23, 0.45)"
   }
 };
+var NIGHT_READER_INVERSION_FILTER = "invert(0.95) hue-rotate(180deg) saturate(0.9) brightness(0.9) contrast(0.94)";
+function appendCssFilters(...filters) {
+  const resolvedFilters = filters.map((filter) => filter?.trim()).filter((filter) => Boolean(filter));
+  return resolvedFilters.length > 0 ? resolvedFilters.join(" ") : void 0;
+}
 var TABLE_RESIZE_HANDLE_SIZE = 8;
 var TABLE_RESIZE_HANDLE_HIT_SIZE = 16;
 var TABLE_RESIZE_BORDER_SIZE = 1;
@@ -11579,7 +11516,7 @@ function resolveFooterPaginationReservePx(footerSections, layout) {
     floatingFooterBoundaryReservePx
   );
 }
-function resolveMeasuredPageContentHeightPx(params) {
+function resolveMeasuredPageContentHeightDiagnostics(params) {
   const {
     pageLayout,
     fallbackHeightPx,
@@ -11619,34 +11556,41 @@ function resolveMeasuredPageContentHeightPx(params) {
   ) : 0;
   const correctedAllowedBodyBottomPx = Math.max(
     0,
-    guardedAllowedBodyBottomPx - renderedBodyOverrunPx - measuredFooterClearanceBufferPx
+    guardedAllowedBodyBottomPx - measuredFooterClearanceBufferPx
   );
-  const iterativeMeasuredHeightPx = renderedBodyOverrunPx > 0 && Number.isFinite(effectiveCurrentMeasuredHeightPx) && effectiveCurrentMeasuredHeightPx > 0 ? Math.max(
+  const iterativeMeasuredHeightPx = renderedBodyOverrunPx > 0 && !Number.isFinite(bodyTopPx) && Number.isFinite(effectiveCurrentMeasuredHeightPx) && effectiveCurrentMeasuredHeightPx > 0 ? Math.max(
     120,
     Math.round(
       effectiveCurrentMeasuredHeightPx - renderedBodyOverrunPx - measuredFooterClearanceBufferPx
     )
   ) : void 0;
+  const bodyOverrunsFooter = renderedBodyOverrunPx > 0;
   if (Number.isFinite(bodyTopPx) && correctedAllowedBodyBottomPx > bodyTopPx) {
     const measuredHeaderClearanceBufferPx2 = headerHeightPx > 0 ? MEASURED_PAGE_HEADER_CLEARANCE_BUFFER_PX : 0;
     const correctedHeightPx = Math.max(
       120,
       Math.round(correctedAllowedBodyBottomPx - bodyTopPx)
     );
-    return Number.isFinite(iterativeMeasuredHeightPx) ? Math.min(
-      Math.max(120, correctedHeightPx - measuredHeaderClearanceBufferPx2),
-      Math.max(
-        120,
-        iterativeMeasuredHeightPx - measuredHeaderClearanceBufferPx2
-      )
-    ) : Math.max(120, correctedHeightPx - measuredHeaderClearanceBufferPx2);
+    return {
+      heightPx: Number.isFinite(iterativeMeasuredHeightPx) ? Math.min(
+        Math.max(120, correctedHeightPx - measuredHeaderClearanceBufferPx2),
+        Math.max(
+          120,
+          iterativeMeasuredHeightPx - measuredHeaderClearanceBufferPx2
+        )
+      ) : Math.max(120, correctedHeightPx - measuredHeaderClearanceBufferPx2),
+      bodyOverrunsFooter
+    };
   }
   const measuredHeaderClearanceBufferPx = headerHeightPx > 0 ? MEASURED_PAGE_HEADER_CLEARANCE_BUFFER_PX : 0;
   const correctedFallbackHeightPx = Math.max(
     120,
     fallbackHeightPx - headerHeightPx - measuredHeaderClearanceBufferPx - footerOverlapPx - renderedBodyOverrunPx - measuredFooterClearanceBufferPx
   );
-  return Number.isFinite(iterativeMeasuredHeightPx) ? Math.min(correctedFallbackHeightPx, iterativeMeasuredHeightPx) : correctedFallbackHeightPx;
+  return {
+    heightPx: Number.isFinite(iterativeMeasuredHeightPx) ? Math.min(correctedFallbackHeightPx, iterativeMeasuredHeightPx) : correctedFallbackHeightPx,
+    bodyOverrunsFooter
+  };
 }
 function resolveMeasuredBodyRenderedBottomPx(descendants) {
   let visualBottomPx;
@@ -11664,13 +11608,27 @@ function resolveMeasuredBodyRenderedBottomPx(descendants) {
   });
   return visualBottomPx;
 }
-function stabilizeMeasuredPageContentHeights(current, next) {
+function stabilizeMeasuredPageContentHeights(current, next, options) {
   return next.map((heightPx, pageIndex) => {
     const roundedNextHeightPx = Math.round(heightPx);
     const currentHeightPx = current[pageIndex];
-    return Number.isFinite(currentHeightPx) ? Math.min(Math.round(currentHeightPx), roundedNextHeightPx) : roundedNextHeightPx;
+    const currentPageIdentityKey = options?.currentPageIdentityKeys?.[pageIndex];
+    const nextPageIdentityKey = options?.nextPageIdentityKeys?.[pageIndex];
+    const canPreserveConservativeHeight = currentPageIdentityKey === void 0 || nextPageIdentityKey === void 0 || currentPageIdentityKey === nextPageIdentityKey;
+    return Number.isFinite(currentHeightPx) ? canPreserveConservativeHeight ? Math.min(Math.round(currentHeightPx), roundedNextHeightPx) : roundedNextHeightPx : roundedNextHeightPx;
   });
 }
+function documentPageNodeSegmentIdentityKey(segment) {
+  const tableRowRangeKey = segment.tableRowRange ? `${segment.tableRowRange.startRowIndex}-${segment.tableRowRange.endRowIndex}` : "none";
+  const tableRowSliceKey = segment.tableRowSlice ? `${segment.tableRowSlice.rowIndex}-${Math.round(
+    segment.tableRowSlice.startOffsetPx
+  )}-${Math.round(segment.tableRowSlice.sliceHeightPx)}` : "none";
+  const paragraphLineRangeKey = segment.paragraphLineRange ? `${segment.paragraphLineRange.startLineIndex}-${segment.paragraphLineRange.endLineIndex}-${segment.paragraphLineRange.totalLineCount}` : "none";
+  return `${segment.nodeIndex}|${tableRowRangeKey}|${tableRowSliceKey}|${paragraphLineRangeKey}`;
+}
+function documentPageNodeSegmentsIdentityKey(pageSegments) {
+  return pageSegments.map(documentPageNodeSegmentIdentityKey).join("::");
+}
 function buildPaginationSectionMetrics(sections, fallbackLayout) {
   const fallbackWidthPx = resolveSectionPaginationContentWidthPx(fallbackLayout);
   const fallbackHeightPx = Math.max(
@@ -11753,10 +11711,11 @@ function scaleMeasuredPageContentHeights(measuredPageContentHeightsPxByPageIndex
     (heightPx) => Math.max(120, Math.round(heightPx * heightScale))
   );
 }
-function resolvePageContentHeightPxForPageSegments(pageSegments, pageIndex, defaultPageContentHeightPx, metricsBySection, measuredPageContentHeightsPxByPageIndex) {
+function resolvePageContentHeightPxForPageSegments(pageSegments, pageIndex, defaultPageContentHeightPx, metricsBySection, measuredPageContentHeightsPxByPageIndex, measuredPageContentIdentityKeysByPageIndex, pageIdentityKey) {
   const pageContainsOnlySplitParagraphSegments = documentPageContainsOnlySplitParagraphSegments(pageSegments);
   const measuredHeightPx = measuredPageContentHeightsPxByPageIndex?.[pageIndex];
-  if (Number.isFinite(measuredHeightPx) && !pageContainsOnlySplitParagraphSegments) {
+  const measuredHeightMatchesCurrentPage = pageIdentityKey === void 0 || measuredPageContentIdentityKeysByPageIndex?.[pageIndex] === void 0 || measuredPageContentIdentityKeysByPageIndex?.[pageIndex] === pageIdentityKey;
+  if (Number.isFinite(measuredHeightPx) && measuredHeightMatchesCurrentPage && !pageContainsOnlySplitParagraphSegments) {
     return Math.max(120, Math.round(measuredHeightPx));
   }
   const firstNodeIndex = pageSegments[0]?.nodeIndex ?? 0;
@@ -11772,6 +11731,17 @@ function resolvePageContentHeightPxForPageSegments(pageSegments, pageIndex, defa
     )
   );
 }
+function resolveRenderPageContentHeightPxForPageSegments(params) {
+  return resolvePageContentHeightPxForPageSegments(
+    params.pageSegments,
+    params.pageIndex,
+    params.defaultPageContentHeightPx,
+    params.metricsBySection,
+    params.useMeasuredPageContentHeights === false ? void 0 : params.measuredPageContentHeightsPxByPageIndex,
+    params.useMeasuredPageContentHeights === false ? void 0 : params.measuredPageContentIdentityKeysByPageIndex,
+    params.pageIdentityKey
+  );
+}
 function documentPageContainsOnlySplitParagraphSegments(pageSegments) {
   return pageSegments.length > 0 && pageSegments.every(
     (segment) => !segment.tableRowRange && paragraphSegmentHasPartialLineRange(segment.paragraphLineRange)
@@ -12651,10 +12621,11 @@ function sectionNodesNeedPageWideLayout(nodes, pageWidthPx, contentWidthPx) {
       return false;
     }
     const horizontalRelativeTo = image.floating.horizontalRelativeTo?.toLowerCase();
-    if (image.floating.behindDocument || horizontalRelativeTo === "page") {
+    const usesPageWidthAnchorOrigin = horizontalRelativeTo === "page" || horizontalRelativeTo === "margin";
+    if (image.floating.behindDocument && usesPageWidthAnchorOrigin) {
       return true;
     }
-    if (shouldRenderAbsoluteFloatingImage(image)) {
+    if (usesPageWidthAnchorOrigin && (shouldRenderAbsoluteFloatingImage(image) || shouldRenderWrappedFloatingImage(image))) {
       return true;
     }
     if (Number.isFinite(image.widthPx) && Number.isFinite(image.floating.xPx) && image.widthPx >= safeContentWidthPx - 12 && image.floating.xPx <= 12) {
@@ -13241,6 +13212,9 @@ function buildSyntheticPretextLayoutSource(text, style) {
 function pretextWordBreakModeForText(text) {
   return KEEP_ALL_SCRIPT_RE.test(text) ? "keep-all" : "normal";
 }
+function sanitizeRenderedPretextFragmentText(text) {
+  return text.replace(/\r\n?|\n/g, "");
+}
 function buildParagraphPretextLayoutItems(paragraph, source) {
   const paragraphBaseFontPx = paragraphBaseFontSizePx(paragraph);
   const wordBreak = pretextWordBreakModeForText(source.text);
@@ -14353,6 +14327,20 @@ function paragraphBaseFontSizePx(paragraph) {
   const fontSizePt = dominantRunFontSizePt && dominantRunFontSizePt > 0 ? dominantRunFontSizePt : Number.isFinite(paragraph.style?.headingLevel) ? DEFAULT_PARAGRAPH_FONT_SIZE_PT + Math.max(0, 6 - (paragraph.style?.headingLevel ?? 6)) : DEFAULT_PARAGRAPH_FONT_SIZE_PT;
   return Math.max(10, Math.round(fontSizePt * 96 / 72));
 }
+function paragraphMaxFontSizePx(paragraph) {
+  const paragraphBaseFontPx = paragraphBaseFontSizePx(paragraph);
+  let maxFontSizePx = paragraphBaseFontPx;
+  paragraph.children.forEach((child) => {
+    if (child.type !== "text" && child.type !== "form-field") {
+      return;
+    }
+    maxFontSizePx = Math.max(
+      maxFontSizePx,
+      resolveMeasureFontSizePx(child.style, paragraphBaseFontPx)
+    );
+  });
+  return Math.max(1, Math.round(maxFontSizePx));
+}
 function normalizeFontFamilyToken(fontFamily) {
   if (!fontFamily) {
     return void 0;
@@ -15550,6 +15538,34 @@ function resolveParagraphSegmentClipBleedPx(paragraphLineRange) {
     bottomPx: Math.max(0, PARAGRAPH_SEGMENT_DESCENDER_BLEED_PX)
   };
 }
+function resolveFallbackParagraphSegmentClipBleedPx(paragraph, paragraphLineRange) {
+  if (!paragraphSegmentHasPartialLineRange(paragraphLineRange)) {
+    return {
+      topPx: 0,
+      bottomPx: 0
+    };
+  }
+  const lineHeightPx = Math.max(1, paragraphLineRange?.lineHeightPx ?? 0);
+  const maxFontSizePx = paragraphMaxFontSizePx(paragraph);
+  const glyphOvershootPx = Math.max(
+    0,
+    Math.ceil((maxFontSizePx - lineHeightPx) / 2)
+  );
+  const ascenderSafetyPx = Math.max(
+    glyphOvershootPx,
+    Math.ceil(lineHeightPx * 0.22)
+  );
+  return {
+    topPx: paragraphLineRange && paragraphLineRange.startLineIndex > 0 ? Math.min(
+      PARAGRAPH_SEGMENT_FALLBACK_TOP_BLEED_MAX_PX,
+      ascenderSafetyPx
+    ) : 0,
+    bottomPx: paragraphLineRange && paragraphLineRange.endLineIndex < paragraphLineRange.totalLineCount ? Math.min(
+      PARAGRAPH_SEGMENT_FALLBACK_BOTTOM_BLEED_MAX_PX,
+      glyphOvershootPx
+    ) : 0
+  };
+}
 function resolveParagraphSegmentNonFlowReservePx(paragraphLineRange) {
   const bleed = resolveParagraphSegmentClipBleedPx(paragraphLineRange);
   if (bleed.topPx <= 0 && bleed.bottomPx <= 0) {
@@ -15561,6 +15577,20 @@ function resolveParagraphSegmentNonFlowReservePx(paragraphLineRange) {
   );
   return Math.max(0, bleed.topPx) + Math.max(0, bleed.bottomPx) + Math.max(0, PARAGRAPH_SEGMENT_VISUAL_SAFETY_PX, lineHeightSafetyPx);
 }
+function resolveFallbackParagraphSegmentNonFlowReservePx(paragraph, paragraphLineRange) {
+  const bleed = resolveFallbackParagraphSegmentClipBleedPx(
+    paragraph,
+    paragraphLineRange
+  );
+  if (bleed.topPx <= 0 && bleed.bottomPx <= 0) {
+    return 0;
+  }
+  const lineHeightSafetyPx = Math.max(
+    0,
+    Math.ceil((paragraphLineRange?.lineHeightPx ?? 0) * 0.15)
+  );
+  return Math.max(0, bleed.topPx) + Math.max(0, bleed.bottomPx) + Math.max(1, PARAGRAPH_SEGMENT_FALLBACK_VISUAL_SAFETY_PX, lineHeightSafetyPx);
+}
 function paragraphSegmentIdentityMatches(segment, nodeIndex, paragraphLineRange) {
   if (!segment || !paragraphLineRange) {
     return false;
@@ -15900,13 +15930,17 @@ function buildDocumentPageNodeSegments(model, pageContentHeightPx, pageContentWi
         node,
         nodeMetrics.docGridLinePitchPx
       );
+      const paragraphPretextSourceForSegmentRendering = buildParagraphPretextLayoutSource(node, {
+        allowExplicitLineBreakText: true
+      });
+      const paragraphSupportsPretextSegmentRendering = Boolean(
+        paragraphPretextSourceForSegmentRendering
+      );
       const paragraphPretextLineCount = (() => {
         if (!paragraphContainsExplicitLineBreakText(node)) {
           return void 0;
         }
-        const pretextSource = buildParagraphPretextLayoutSource(node, {
-          allowExplicitLineBreakText: true
-        });
+        const pretextSource = paragraphPretextSourceForSegmentRendering;
         if (!pretextSource) {
           return void 0;
         }
@@ -15924,11 +15958,7 @@ function buildDocumentPageNodeSegments(model, pageContentHeightPx, pageContentWi
         );
         return pretextLayout?.lineCount;
       })();
-      const supportsImageParagraphLineSplit = paragraphHasImage2(node) && Boolean(
-        buildParagraphPretextLayoutSource(node, {
-          allowExplicitLineBreakText: true
-        })
-      );
+      const supportsImageParagraphLineSplit = paragraphHasImage2(node) && paragraphSupportsPretextSegmentRendering;
       const paragraphLineCount = paragraphLineCountWithinWidth(
         node,
         nodeMetrics.pageContentWidthPx,
@@ -15943,6 +15973,18 @@ function buildDocumentPageNodeSegments(model, pageContentHeightPx, pageContentWi
         allowImageParagraphSplit: supportsImageParagraphLineSplit
       }) && (!widowControlEnabled || resolvedParagraphLineCount > 3);
       if (canSplitParagraphAcrossPages && allowParagraphLineSplitting) {
+        const resolveSegmentReservePx = (startLineIndex, endLineIndex) => {
+          const paragraphSegmentRange = {
+            startLineIndex,
+            endLineIndex,
+            totalLineCount: resolvedParagraphLineCount,
+            lineHeightPx: paragraphLineHeightPx
+          };
+          return paragraphSupportsPretextSegmentRendering ? resolveParagraphSegmentNonFlowReservePx(paragraphSegmentRange) : resolveFallbackParagraphSegmentNonFlowReservePx(
+            node,
+            paragraphSegmentRange
+          );
+        };
         let lineCursor = 0;
         let isFirstSegment = true;
         while (lineCursor < resolvedParagraphLineCount) {
@@ -15954,12 +15996,10 @@ function buildDocumentPageNodeSegments(model, pageContentHeightPx, pageContentWi
             0,
             currentPageContentHeightPx - pageConsumedHeightPx
           );
-          const allRemainingSegmentReservePx = resolveParagraphSegmentNonFlowReservePx({
-            startLineIndex: lineCursor,
-            endLineIndex: resolvedParagraphLineCount,
-            totalLineCount: resolvedParagraphLineCount,
-            lineHeightPx: paragraphLineHeightPx
-          });
+          const allRemainingSegmentReservePx = resolveSegmentReservePx(
+            lineCursor,
+            resolvedParagraphLineCount
+          );
           const allRemainingHeightPx = topSpacingPx + linesRemaining * paragraphLineHeightPx + bottomSpacingPx;
           if (allRemainingHeightPx + allRemainingSegmentReservePx <= remainingHeightPx2) {
             currentPageSegments.push({
@@ -15980,15 +16020,10 @@ function buildDocumentPageNodeSegments(model, pageContentHeightPx, pageContentWi
             0,
             linesRemaining - minLinesPerSegment
           );
-          const continuingSegmentReservePx = resolveParagraphSegmentNonFlowReservePx({
-            startLineIndex: lineCursor,
-            endLineIndex: Math.min(
-              resolvedParagraphLineCount,
-              lineCursor + maxLinesThisPage
-            ),
-            totalLineCount: resolvedParagraphLineCount,
-            lineHeightPx: paragraphLineHeightPx
-          });
+          const continuingSegmentReservePx = resolveSegmentReservePx(
+            lineCursor,
+            Math.min(resolvedParagraphLineCount, lineCursor + maxLinesThisPage)
+          );
           const availableForLinesPx = Math.max(
             0,
             remainingHeightPx2 - topSpacingPx - continuingSegmentReservePx
@@ -16027,12 +16062,10 @@ function buildDocumentPageNodeSegments(model, pageContentHeightPx, pageContentWi
             lineCursor + linesThatFit
           );
           while (linesThatFit > minLinesPerSegment) {
-            const segmentReservePx = resolveParagraphSegmentNonFlowReservePx({
-              startLineIndex: lineCursor,
-              endLineIndex: segmentEndLineIndex,
-              totalLineCount: resolvedParagraphLineCount,
-              lineHeightPx: paragraphLineHeightPx
-            });
+            const segmentReservePx = resolveSegmentReservePx(
+              lineCursor,
+              segmentEndLineIndex
+            );
             if (topSpacingPx + (segmentEndLineIndex - lineCursor) * paragraphLineHeightPx + segmentReservePx <= remainingHeightPx2) {
               break;
             }
@@ -16533,17 +16566,18 @@ function wrappedFloatingImageStyle(image, options) {
   });
   const horizontalRelativeTo = floating.horizontalRelativeTo?.toLowerCase();
   const explicitHorizontalInsetPx = hasExplicitHorizontalOffset && !hasExplicitHorizontalAlign && (horizontalRelativeTo === "margin" || horizontalRelativeTo === "page" || horizontalRelativeTo === "column") ? side === "left" ? Math.max(0, leftOffsetPx) : Math.max(0, rightOffsetPx) : 0;
+  const columnAnchoredExplicitInset = explicitHorizontalInsetPx > 0 && horizontalRelativeTo === "column";
   return {
     display: "block",
     ...intrinsicBlockWidthStyle,
     float: side,
     marginTop: topOffsetPx,
     marginBottom: distB,
-    marginLeft: side === "left" ? explicitHorizontalInsetPx > 0 ? 0 : hasExplicitHorizontalOffset ? leftOffsetPx : distL + leftOffsetPx : distL,
-    marginRight: side === "right" ? explicitHorizontalInsetPx > 0 ? 0 : hasExplicitHorizontalOffset ? rightOffsetPx : distR + rightOffsetPx : distR,
-    paddingLeft: side === "left" && explicitHorizontalInsetPx > 0 ? explicitHorizontalInsetPx : void 0,
-    paddingRight: side === "right" && explicitHorizontalInsetPx > 0 ? explicitHorizontalInsetPx : void 0,
-    boxSizing: explicitHorizontalInsetPx > 0 ? "content-box" : void 0
+    marginLeft: side === "left" ? explicitHorizontalInsetPx > 0 ? columnAnchoredExplicitInset ? distL + explicitHorizontalInsetPx : 0 : hasExplicitHorizontalOffset ? leftOffsetPx : distL + leftOffsetPx : distL,
+    marginRight: side === "right" ? explicitHorizontalInsetPx > 0 ? columnAnchoredExplicitInset ? distR + explicitHorizontalInsetPx : 0 : hasExplicitHorizontalOffset ? rightOffsetPx : distR + rightOffsetPx : distR,
+    paddingLeft: side === "left" && explicitHorizontalInsetPx > 0 && !columnAnchoredExplicitInset ? explicitHorizontalInsetPx : void 0,
+    paddingRight: side === "right" && explicitHorizontalInsetPx > 0 && !columnAnchoredExplicitInset ? explicitHorizontalInsetPx : void 0,
+    boxSizing: explicitHorizontalInsetPx > 0 && !columnAnchoredExplicitInset ? "content-box" : void 0
   };
 }
 function wrappedFloatingImageDualExclusionLayout(image, options) {
@@ -19282,7 +19316,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         (() => {
           const cropLayout = imageCropLayout(child, widthPx, heightPx);
           const imageVisualStyle = {
-            filter: child.cssFilter,
+            filter: appendCssFilters(child.cssFilter, options?.imageFilterSuffix),
             opacity: child.cssOpacity
           };
           const imageTransformStyle = resolveImageRenderTransformStyle(child, {
@@ -26827,6 +26861,370 @@ function useDocxEditor(options = {}) {
     commitSectionParagraphText
   };
 }
+var docxViewerPageSurfaceRegistryByEditor = /* @__PURE__ */ new WeakMap();
+function docxViewerPageSurfaceRegistryOwner(editor) {
+  return editor.syncPaginationInfo;
+}
+function ensureDocxViewerPageSurfaceRegistry(editor) {
+  const owner = docxViewerPageSurfaceRegistryOwner(editor);
+  let registry = docxViewerPageSurfaceRegistryByEditor.get(owner);
+  if (!registry) {
+    registry = {
+      pageElements: /* @__PURE__ */ new Map(),
+      listeners: /* @__PURE__ */ new Set()
+    };
+    docxViewerPageSurfaceRegistryByEditor.set(owner, registry);
+  }
+  return registry;
+}
+function subscribeDocxViewerPageSurfaces(editor, listener) {
+  const registry = ensureDocxViewerPageSurfaceRegistry(editor);
+  registry.listeners.add(listener);
+  return () => {
+    registry.listeners.delete(listener);
+  };
+}
+function notifyDocxViewerPageSurfaceSubscribers(registry) {
+  registry.listeners.forEach((listener) => {
+    listener();
+  });
+}
+function registerDocxViewerPageSurface(editor, pageIndex, element) {
+  const registry = ensureDocxViewerPageSurfaceRegistry(editor);
+  const normalizedPageIndex = Math.max(0, Math.round(pageIndex));
+  const currentElement = registry.pageElements.get(normalizedPageIndex);
+  if (element) {
+    if (currentElement === element) {
+      return;
+    }
+    registry.pageElements.set(normalizedPageIndex, element);
+    notifyDocxViewerPageSurfaceSubscribers(registry);
+    return;
+  }
+  if (!currentElement) {
+    return;
+  }
+  registry.pageElements.delete(normalizedPageIndex);
+  notifyDocxViewerPageSurfaceSubscribers(registry);
+}
+function resolveDocxViewerPageSurfaceSize(element, fallbackWidthPx, fallbackHeightPx) {
+  if (element) {
+    const rect = element.getBoundingClientRect();
+    const rectWidthPx = Number.isFinite(rect.width) ? rect.width : 0;
+    const rectHeightPx = Number.isFinite(rect.height) ? rect.height : 0;
+    const offsetWidthPx = Number.isFinite(element.offsetWidth) ? element.offsetWidth : 0;
+    const offsetHeightPx = Number.isFinite(element.offsetHeight) ? element.offsetHeight : 0;
+    const clientWidthPx = Number.isFinite(element.clientWidth) ? element.clientWidth : 0;
+    const clientHeightPx = Number.isFinite(element.clientHeight) ? element.clientHeight : 0;
+    const resolvedWidthPx = Math.max(
+      0,
+      rectWidthPx,
+      offsetWidthPx,
+      clientWidthPx
+    );
+    const resolvedHeightPx = Math.max(
+      0,
+      rectHeightPx,
+      offsetHeightPx,
+      clientHeightPx
+    );
+    if (resolvedWidthPx > 0 && resolvedHeightPx > 0) {
+      return {
+        widthPx: Math.round(resolvedWidthPx),
+        heightPx: Math.round(resolvedHeightPx)
+      };
+    }
+  }
+  return {
+    widthPx: Math.max(1, Math.round(fallbackWidthPx)),
+    heightPx: Math.max(1, Math.round(fallbackHeightPx))
+  };
+}
+async function rasterizeDocxViewerPageSurfaceToCanvas(params) {
+  if (typeof window === "undefined" || typeof XMLSerializer === "undefined") {
+    throw new Error("DOCX thumbnails require a browser environment.");
+  }
+  const {
+    pageElement,
+    sourceWidthPx,
+    sourceHeightPx,
+    canvas,
+    widthPx,
+    heightPx,
+    pixelWidthPx,
+    pixelHeightPx
+  } = params;
+  const safeSourceWidthPx = Math.max(1, Math.round(sourceWidthPx));
+  const safeSourceHeightPx = Math.max(1, Math.round(sourceHeightPx));
+  const scaleX = widthPx / safeSourceWidthPx;
+  const scaleY = heightPx / safeSourceHeightPx;
+  const serializedPage = new XMLSerializer().serializeToString(
+    pageElement.cloneNode(true)
+  );
+  const svgMarkup = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${widthPx}" height="${heightPx}" viewBox="0 0 ${widthPx} ${heightPx}">
+      <foreignObject x="0" y="0" width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width:${widthPx}px;height:${heightPx}px;overflow:hidden;">
+          <div style="width:${safeSourceWidthPx}px;height:${safeSourceHeightPx}px;transform-origin:top left;transform:scale(${scaleX}, ${scaleY});">
+            ${serializedPage}
+          </div>
+        </div>
+      </foreignObject>
+    </svg>
+  `;
+  const blob = new Blob([svgMarkup], {
+    type: "image/svg+xml;charset=utf-8"
+  });
+  const objectUrl = URL.createObjectURL(blob);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.decoding = "async";
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => {
+        reject(new Error("Failed to rasterize DOCX page thumbnail."));
+      };
+      nextImage.src = objectUrl;
+    });
+    canvas.width = Math.max(1, Math.round(pixelWidthPx));
+    canvas.height = Math.max(1, Math.round(pixelHeightPx));
+    canvas.style.width = `${Math.max(1, Math.round(widthPx))}px`;
+    canvas.style.height = `${Math.max(1, Math.round(heightPx))}px`;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("2D canvas context is unavailable for DOCX thumbnails.");
+    }
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.imageSmoothingEnabled = true;
+    context.imageSmoothingQuality = "high";
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+function resolveDocxPageThumbnailResolution(options) {
+  const safeSourceWidthPx = Math.max(1, Math.round(options.sourceWidthPx));
+  const safeSourceHeightPx = Math.max(1, Math.round(options.sourceHeightPx));
+  const widthBoundPx = Number.isFinite(options.maxWidthPx) ? Math.max(1, Math.round(options.maxWidthPx)) : 180;
+  const heightBoundPx = Number.isFinite(options.maxHeightPx) ? Math.max(1, Math.round(options.maxHeightPx)) : Number.POSITIVE_INFINITY;
+  const scale = Math.min(
+    1,
+    widthBoundPx / safeSourceWidthPx,
+    heightBoundPx / safeSourceHeightPx
+  );
+  const pixelRatio = Number.isFinite(options.pixelRatio) ? Math.max(1, Number(options.pixelRatio)) : 1;
+  const widthPx = Math.max(1, Math.round(safeSourceWidthPx * scale));
+  const heightPx = Math.max(1, Math.round(safeSourceHeightPx * scale));
+  return {
+    widthPx,
+    heightPx,
+    pixelWidthPx: Math.max(1, Math.round(widthPx * pixelRatio)),
+    pixelHeightPx: Math.max(1, Math.round(heightPx * pixelRatio)),
+    scale
+  };
+}
+function useDocxPageThumbnails(editor, options = {}) {
+  const pageSurfaceRegistryOwner = docxViewerPageSurfaceRegistryOwner(editor);
+  const pageSurfaceRegistryEditor = React.useMemo(
+    () => ({ syncPaginationInfo: editor.syncPaginationInfo }),
+    [pageSurfaceRegistryOwner]
+  );
+  const [pageSurfaceEpoch, setPageSurfaceEpoch] = React.useState(0);
+  const [pageThumbnailStates, setPageThumbnailStates] = React.useState(() => /* @__PURE__ */ new Map());
+  const attachedCanvasByPageRef = React.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const canvasRefCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
+  const renderToCanvasCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
+  const fallbackLayout = React.useMemo(
+    () => resolveDocumentLayout(editor.model),
+    [editor.model]
+  );
+  const pageSurfaceRegistry = React.useMemo(
+    () => ensureDocxViewerPageSurfaceRegistry(pageSurfaceRegistryEditor),
+    [pageSurfaceRegistryEditor]
+  );
+  React.useEffect(
+    () => subscribeDocxViewerPageSurfaces(
+      pageSurfaceRegistryEditor,
+      () => {
+        setPageSurfaceEpoch((current) => current + 1);
+      }
+    ),
+    [pageSurfaceRegistryEditor]
+  );
+  const mountedPageElements = React.useMemo(
+    () => new Map(pageSurfaceRegistry.pageElements),
+    [pageSurfaceEpoch, pageSurfaceRegistry.pageElements]
+  );
+  const updatePageThumbnailState = React.useCallback(
+    (pageIndex, status, error) => {
+      setPageThumbnailStates((current) => {
+        const next = new Map(current);
+        const previous = next.get(pageIndex);
+        if (previous?.status === status && previous?.error?.message === error?.message) {
+          return current;
+        }
+        next.set(pageIndex, { status, error });
+        return next;
+      });
+    },
+    []
+  );
+  const renderPageThumbnailToCanvas = React.useCallback(
+    async (pageIndex, canvas) => {
+      if (options.disabled) {
+        return;
+      }
+      const targetCanvas = canvas ?? attachedCanvasByPageRef.current.get(pageIndex);
+      if (!targetCanvas) {
+        return;
+      }
+      const pageElement = mountedPageElements.get(pageIndex);
+      if (!pageElement || !pageElement.isConnected) {
+        updatePageThumbnailState(pageIndex, "unavailable");
+        return;
+      }
+      const sourceSize = resolveDocxViewerPageSurfaceSize(
+        pageElement,
+        fallbackLayout.pageWidthPx,
+        fallbackLayout.pageHeightPx
+      );
+      const resolution = resolveDocxPageThumbnailResolution({
+        sourceWidthPx: sourceSize.widthPx,
+        sourceHeightPx: sourceSize.heightPx,
+        maxWidthPx: options.maxWidthPx,
+        maxHeightPx: options.maxHeightPx,
+        pixelRatio: options.pixelRatio
+      });
+      updatePageThumbnailState(pageIndex, "rendering");
+      try {
+        await rasterizeDocxViewerPageSurfaceToCanvas({
+          pageElement,
+          sourceWidthPx: sourceSize.widthPx,
+          sourceHeightPx: sourceSize.heightPx,
+          canvas: targetCanvas,
+          widthPx: resolution.widthPx,
+          heightPx: resolution.heightPx,
+          pixelWidthPx: resolution.pixelWidthPx,
+          pixelHeightPx: resolution.pixelHeightPx
+        });
+        updatePageThumbnailState(pageIndex, "ready");
+      } catch (error) {
+        updatePageThumbnailState(
+          pageIndex,
+          "error",
+          error instanceof Error ? error : new Error("Failed to render DOCX page thumbnail.")
+        );
+      }
+    },
+    [
+      fallbackLayout.pageHeightPx,
+      fallbackLayout.pageWidthPx,
+      mountedPageElements,
+      options.disabled,
+      options.maxHeightPx,
+      options.maxWidthPx,
+      options.pixelRatio,
+      updatePageThumbnailState
+    ]
+  );
+  const rerenderAttachedThumbnails = React.useCallback(async () => {
+    const tasks = [...attachedCanvasByPageRef.current.keys()].map(
+      (pageIndex) => renderPageThumbnailToCanvas(pageIndex)
+    );
+    await Promise.all(tasks);
+  }, [renderPageThumbnailToCanvas]);
+  const renderPageThumbnailToCanvasRef = React.useRef(renderPageThumbnailToCanvas);
+  React.useEffect(() => {
+    renderPageThumbnailToCanvasRef.current = renderPageThumbnailToCanvas;
+  }, [renderPageThumbnailToCanvas]);
+  React.useEffect(() => {
+    canvasRefCallbacksRef.current.clear();
+    renderToCanvasCallbacksRef.current.clear();
+  }, [pageSurfaceRegistryOwner]);
+  React.useEffect(() => {
+    void rerenderAttachedThumbnails();
+  }, [
+    editor.documentLoadNonce,
+    editor.documentTheme,
+    editor.model,
+    mountedPageElements,
+    options.disabled,
+    options.maxHeightPx,
+    options.maxWidthPx,
+    options.pixelRatio,
+    rerenderAttachedThumbnails
+  ]);
+  const thumbnails = React.useMemo(() => {
+    const totalPages = Math.max(1, editor.totalPages);
+    return Array.from({ length: totalPages }, (_, pageIndex) => {
+      const pageElement = mountedPageElements.get(pageIndex);
+      const sourceSize = resolveDocxViewerPageSurfaceSize(
+        pageElement,
+        fallbackLayout.pageWidthPx,
+        fallbackLayout.pageHeightPx
+      );
+      const resolution = resolveDocxPageThumbnailResolution({
+        sourceWidthPx: sourceSize.widthPx,
+        sourceHeightPx: sourceSize.heightPx,
+        maxWidthPx: options.maxWidthPx,
+        maxHeightPx: options.maxHeightPx,
+        pixelRatio: options.pixelRatio
+      });
+      const state = pageThumbnailStates.get(pageIndex);
+      return {
+        pageIndex,
+        pageNumber: pageIndex + 1,
+        sourceWidthPx: sourceSize.widthPx,
+        sourceHeightPx: sourceSize.heightPx,
+        isMounted: Boolean(pageElement && pageElement.isConnected),
+        status: state?.status ?? (pageElement ? "idle" : "unavailable"),
+        error: state?.error,
+        canvasRef: canvasRefCallbacksRef.current.get(pageIndex) ?? (() => {
+          const nextCanvasRef = (canvas) => {
+            if (canvas) {
+              attachedCanvasByPageRef.current.set(pageIndex, canvas);
+              void renderPageThumbnailToCanvasRef.current(pageIndex, canvas);
+              return;
+            }
+            attachedCanvasByPageRef.current.delete(pageIndex);
+          };
+          canvasRefCallbacksRef.current.set(pageIndex, nextCanvasRef);
+          return nextCanvasRef;
+        })(),
+        renderToCanvas: renderToCanvasCallbacksRef.current.get(pageIndex) ?? (() => {
+          const nextRenderToCanvas = async (canvas) => {
+            await renderPageThumbnailToCanvasRef.current(pageIndex, canvas);
+          };
+          renderToCanvasCallbacksRef.current.set(
+            pageIndex,
+            nextRenderToCanvas
+          );
+          return nextRenderToCanvas;
+        })(),
+        ...resolution
+      };
+    });
+  }, [
+    editor.totalPages,
+    fallbackLayout.pageHeightPx,
+    fallbackLayout.pageWidthPx,
+    mountedPageElements,
+    options.maxHeightPx,
+    options.maxWidthPx,
+    options.pixelRatio,
+    pageThumbnailStates
+  ]);
+  return React.useMemo(
+    () => ({
+      thumbnails,
+      rerenderAttachedThumbnails
+    }),
+    [rerenderAttachedThumbnails, thumbnails]
+  );
+}
 function useDocxDocumentTheme(editor) {
   const setDocumentTheme = React.useCallback(
     (theme) => {
@@ -27888,6 +28286,7 @@ function DocxEditorViewer({
   editor,
   className,
   style,
+  pageBackgroundColor,
   pageGapBackgroundColor,
   deferInitialPaginationPaint = true,
   loadingState,
@@ -27903,10 +28302,14 @@ function DocxEditorViewer({
   onFormFieldDoubleClick,
   mode = "edit"
 }) {
+  const pageSurfaceRegistryOwner = docxViewerPageSurfaceRegistryOwner(editor);
   const trackedChangesEnabled = showTrackedChanges ?? editor.showTrackedChanges;
   const hasTrackedChanges = editor.trackedChanges.length > 0;
   const showTrackedChangeGutter = trackedChangesEnabled;
   const isReadOnly = mode === "read-only" || trackedChangesEnabled;
+  const isNightReaderMode = isReadOnly && editor.documentTheme === "dark";
+  const documentContentTheme = isNightReaderMode ? "light" : editor.documentTheme;
+  const documentContentFilter = isNightReaderMode ? NIGHT_READER_INVERSION_FILTER : void 0;
   const canReplaceDocumentByDrop = mode !== "read-only";
   const formFieldLocationKey = React.useCallback(
     (location) => {
@@ -27922,9 +28325,11 @@ function DocxEditorViewer({
     () => ({
       showTrackedChanges: trackedChangesEnabled,
       numberingDefinitions: editor.model.metadata.numberingDefinitions,
-      tocLinkColorByLevel
+      tocLinkColorByLevel,
+      imageFilterSuffix: documentContentFilter
     }),
     [
+      documentContentFilter,
       editor.model.metadata.numberingDefinitions,
       tocLinkColorByLevel,
       trackedChangesEnabled
@@ -27962,6 +28367,8 @@ 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(
     void 0
@@ -28026,6 +28433,54 @@ 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));
+      const cached = pageSurfaceRefCallbacksRef.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, element);
+      };
+      pageSurfaceRefCallbacksRef.current.set(normalizedPageIndex, nextRef);
+      return nextRef;
+    },
+    [pageSurfaceRegistryOwner]
+  );
+  React.useEffect(() => {
+    pagePlaceholderRefCallbacksRef.current.clear();
+    pageSurfaceRefCallbacksRef.current.clear();
+  }, [pageSurfaceRegistryOwner]);
+  const [
+    measuredPageContentIdentityKeysByIndex,
+    setMeasuredPageContentIdentityKeysByIndex
+  ] = React.useState([]);
   const [, setRenderableImageSourceRevision] = React.useState(0);
   const [activeEditableParagraphSegment, setActiveEditableParagraphSegment] = React.useState(void 0);
   const wrappedParagraphTextareaRef = React.useRef(
@@ -28075,6 +28530,7 @@ function DocxEditorViewer({
   }, []);
   React.useEffect(() => {
     setMeasuredPageContentHeightByIndex([]);
+    setMeasuredPageContentIdentityKeysByIndex([]);
     setTableMeasuredRowHeights({});
     setTableRowHeights({});
     setTableColumnWidths({});
@@ -28469,7 +28925,7 @@ function DocxEditorViewer({
     tableDraftLayoutEpoch,
     tableMeasuredRowHeights
   ]);
-  const pageNodeSegmentsByPage = React.useMemo(() => {
+  const pageSegmentationPlan = React.useMemo(() => {
     const pageContentHeightPx = Math.max(
       120,
       documentLayout.pageHeightPx - documentLayout.marginsPx.top - documentLayout.marginsPx.bottom
@@ -28480,6 +28936,7 @@ function DocxEditorViewer({
     );
     const suppressSpacingBeforeAfterPageBreak = editor.model.metadata.compatibility?.suppressSpacingBeforeAfterPageBreak === true;
     const preferLastRenderedParagraphStartBreaks = !editor.canUndo && !editor.canRedo;
+    const canUseMeasuredPageContentHeights = !editor.canUndo && !editor.canRedo && !disableMeasuredImportPagination && !floatingMovePreview && !dropCapMovePreview && (measuredPageContentHeightByIndex?.length ?? 0) > 0;
     const buildEstimatedPages = (measuredTableRowHeightsByNodeIndex, measuredPageContentHeightsOverride) => {
       const allowMeasuredPageContentHeights = !editor.canUndo && !editor.canRedo && !disableMeasuredImportPagination && !floatingMovePreview && !dropCapMovePreview;
       const baseMeasuredHeights = !allowMeasuredPageContentHeights || measuredPageContentHeightsOverride === null ? void 0 : measuredPageContentHeightsOverride ?? measuredPageContentHeightByIndex;
@@ -28525,14 +28982,13 @@ function DocxEditorViewer({
       minimumPageCount,
       Math.round(storedDocumentPageCount2)
     ) : void 0;
-    let estimatedPages = buildEstimatedPages(
-      tableMeasuredRowHeightsForPagination
+    const pureEstimatedPages = buildEstimatedPages(
+      tableMeasuredRowHeightsForPagination,
+      null
     );
+    let estimatedPages = buildEstimatedPages(tableMeasuredRowHeightsForPagination);
+    let estimatedPagesUseMeasuredPageContentHeightsForRender = canUseMeasuredPageContentHeights;
     if (measuredPageContentHeightByIndex && measuredPageContentHeightByIndex.length > 0) {
-      const pureEstimatedPages = buildEstimatedPages(
-        tableMeasuredRowHeightsForPagination,
-        null
-      );
       const measuredPagesAreOnlySplitParagraphs = estimatedPages.length > 0 && estimatedPages.every(
         (pageSegments) => documentPageContainsOnlySplitParagraphSegments(pageSegments)
       );
@@ -28541,25 +28997,38 @@ function DocxEditorViewer({
       );
       if (measuredPagesAreOnlySplitParagraphs && purePagesAreOnlySplitParagraphs && pureEstimatedPages.length < estimatedPages.length) {
         estimatedPages = pureEstimatedPages;
+        estimatedPagesUseMeasuredPageContentHeightsForRender = false;
       }
     }
     if (!editor.canUndo && !editor.canRedo && targetPageCount !== void 0 && tableMeasuredRowHeightsForPagination) {
       const candidatePages = [
-        estimatedPages,
-        buildEstimatedPages(void 0),
-        buildEstimatedPages(void 0, null)
+        {
+          pages: estimatedPages,
+          useMeasuredPageContentHeightsForRender: estimatedPagesUseMeasuredPageContentHeightsForRender
+        },
+        {
+          pages: buildEstimatedPages(void 0),
+          useMeasuredPageContentHeightsForRender: canUseMeasuredPageContentHeights
+        },
+        {
+          pages: buildEstimatedPages(void 0, null),
+          useMeasuredPageContentHeightsForRender: false
+        }
       ];
-      estimatedPages = candidatePages.reduce((bestCandidate, candidate) => {
-        const bestDifference = Math.abs(bestCandidate.length - targetPageCount);
+      const bestCandidate = candidatePages.reduce((best, candidate) => {
+        const bestDifference = Math.abs(best.pages.length - targetPageCount);
         const candidateDifference = Math.abs(
-          candidate.length - targetPageCount
+          candidate.pages.length - targetPageCount
         );
-        return candidateDifference < bestDifference ? candidate : bestCandidate;
+        return candidateDifference < bestDifference ? candidate : best;
       });
+      estimatedPages = bestCandidate.pages;
+      estimatedPagesUseMeasuredPageContentHeightsForRender = bestCandidate.useMeasuredPageContentHeightsForRender;
     } else if (!editor.canUndo && !editor.canRedo && targetPageCount !== void 0) {
-      const pureEstimatedPages = buildEstimatedPages(void 0, null);
-      if (Math.abs(pureEstimatedPages.length - targetPageCount) < Math.abs(estimatedPages.length - targetPageCount)) {
-        estimatedPages = pureEstimatedPages;
+      const pureEstimatedPages2 = buildEstimatedPages(void 0, null);
+      if (Math.abs(pureEstimatedPages2.length - targetPageCount) < Math.abs(estimatedPages.length - targetPageCount)) {
+        estimatedPages = pureEstimatedPages2;
+        estimatedPagesUseMeasuredPageContentHeightsForRender = false;
       }
     }
     const measuredPageHeightOverridesReduceContent = !editor.canUndo && !editor.canRedo && !floatingMovePreview && !dropCapMovePreview && estimatedPages.some((segments, pageIndex) => {
@@ -28584,7 +29053,10 @@ function DocxEditorViewer({
       )
     );
     if (!Number.isFinite(storedDocumentPageCount2) || storedDocumentPageCount2 <= 0) {
-      return estimatedPages;
+      return {
+        pages: estimatedPages,
+        useMeasuredPageContentHeightsForRender: estimatedPagesUseMeasuredPageContentHeightsForRender
+      };
     }
     const resolvedTargetPageCount = targetPageCount ?? minimumPageCount;
     const hasTableInternalPageBreaks = editor.model.nodes.some(
@@ -28600,10 +29072,16 @@ function DocxEditorViewer({
       renderedBreakHintPageCount
     }) && (!measuredPageHeightOverridesReduceContent || allowMeasuredReductionOverPaginationReconciliation);
     if (!allowStoredPageCountReconciliation) {
-      return estimatedPages;
+      return {
+        pages: estimatedPages,
+        useMeasuredPageContentHeightsForRender: estimatedPagesUseMeasuredPageContentHeightsForRender
+      };
     }
     if (estimatedPages.length === resolvedTargetPageCount) {
-      return estimatedPages;
+      return {
+        pages: estimatedPages,
+        useMeasuredPageContentHeightsForRender: estimatedPagesUseMeasuredPageContentHeightsForRender
+      };
     }
     const reconciliationScales = allowMeasuredReductionOverPaginationReconciliation ? [
       1.02,
@@ -28651,20 +29129,25 @@ function DocxEditorViewer({
     let reconciledPages = reconcileCandidatePages(
       estimatedPages,
       tableMeasuredRowHeightsForPagination,
-      measuredPageContentHeightByIndex
+      estimatedPagesUseMeasuredPageContentHeightsForRender ? measuredPageContentHeightByIndex : null
     );
+    let reconciledPagesUseMeasuredPageContentHeightsForRender = estimatedPagesUseMeasuredPageContentHeightsForRender;
     if (!editor.canUndo && !editor.canRedo) {
-      const pureEstimatedPages = buildEstimatedPages(void 0, null);
+      const pureEstimatedPages2 = buildEstimatedPages(void 0, null);
       const pureReconciledPages = reconcileCandidatePages(
-        pureEstimatedPages,
+        pureEstimatedPages2,
         void 0,
         null
       );
       if (Math.abs(pureReconciledPages.length - resolvedTargetPageCount) < Math.abs(reconciledPages.length - resolvedTargetPageCount)) {
         reconciledPages = pureReconciledPages;
+        reconciledPagesUseMeasuredPageContentHeightsForRender = false;
       }
     }
-    return reconciledPages;
+    return {
+      pages: reconciledPages,
+      useMeasuredPageContentHeightsForRender: reconciledPagesUseMeasuredPageContentHeightsForRender
+    };
   }, [
     editor.canRedo,
     editor.canUndo,
@@ -28686,6 +29169,14 @@ function DocxEditorViewer({
     measuredPageContentHeightByIndex,
     tableMeasuredRowHeightsForPagination
   ]);
+  const pageNodeSegmentsByPage = pageSegmentationPlan.pages;
+  const useMeasuredPageContentHeightsForRender = pageSegmentationPlan.useMeasuredPageContentHeightsForRender;
+  const pageNodeSegmentIdentityKeysByPage = React.useMemo(
+    () => pageNodeSegmentsByPage.map(
+      (pageSegments) => documentPageNodeSegmentsIdentityKey(pageSegments)
+    ),
+    [pageNodeSegmentsByPage]
+  );
   const pageIndexByNodeIndex = React.useMemo(() => {
     const indexByNode = /* @__PURE__ */ new Map();
     pageNodeSegmentsByPage.forEach((segments, pageIndex) => {
@@ -29711,6 +30202,9 @@ function DocxEditorViewer({
       setMeasuredPageContentHeightByIndex(
         (current) => current.length === 0 ? current : []
       );
+      setMeasuredPageContentIdentityKeysByIndex(
+        (current) => current.length === 0 ? current : []
+      );
       return;
     }
     if (!paginationMeasurementEnabled) {
@@ -29721,124 +30215,140 @@ function DocxEditorViewer({
       setMeasuredPageContentHeightByIndex(
         (current) => current.length === 0 ? current : []
       );
+      setMeasuredPageContentIdentityKeysByIndex(
+        (current) => current.length === 0 ? current : []
+      );
       return;
     }
     if (Date.now() < paginationMeasurementSuspendUntilRef.current) {
       return;
     }
     const zoomScale = resolveEffectiveZoomScale(rootElement);
-    const nextMeasuredHeights = pageNodeSegmentsByPage.map((_, pageIndex) => {
-      const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
-      const pageElement = pageElementsRef.current.get(pageIndex);
-      const fallbackHeightPx = Math.max(
-        120,
-        pageLayout.pageHeightPx - pageLayout.marginsPx.top - pageLayout.marginsPx.bottom
-      );
-      if (!pageElement) {
-        return fallbackHeightPx;
-      }
-      const headerElement = pageHeaderElementsRef.current.get(pageIndex);
-      const bodyElement = pageBodyElementsRef.current.get(pageIndex);
-      const footerElement = pageFooterElementsRef.current.get(pageIndex);
-      const headerHeightPx = headerElement ? Math.max(
-        0,
-        Math.round(headerElement.getBoundingClientRect().height / zoomScale)
-      ) : 0;
-      const docxFooterTopPx = resolveFooterNodesFloatingBoundaryTopPx(
-        pageHeaderAndFooterNodes[pageIndex]?.footerNodes ?? [],
-        pageLayout
-      );
-      let footerTopPx = Number.isFinite(docxFooterTopPx) ? Math.round(docxFooterTopPx) : void 0;
-      if (footerElement) {
-        const pageRect2 = pageElement.getBoundingClientRect();
-        const maxOverflowCapPx = Math.max(
-          16,
-          Math.min(
-            Math.round(pageLayout.pageHeightPx * 0.12),
-            Math.round(
-              pageLayout.marginsPx.bottom + pageLayout.footerDistancePx + 24
-            )
-          )
+    const nextMeasuredPageIdentityKeys = pageNodeSegmentIdentityKeysByPage;
+    const nextMeasuredPageDiagnostics = pageNodeSegmentsByPage.map(
+      (_, pageIndex) => {
+        const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
+        const pageElement = pageElementsRef.current.get(pageIndex);
+        const fallbackHeightPx = Math.max(
+          120,
+          pageLayout.pageHeightPx - pageLayout.marginsPx.top - pageLayout.marginsPx.bottom
         );
-        const footerFlowBoundaryTopPx = Math.max(
+        if (!pageElement) {
+          return {
+            heightPx: fallbackHeightPx,
+            bodyOverrunsFooter: false
+          };
+        }
+        const headerElement = pageHeaderElementsRef.current.get(pageIndex);
+        const bodyElement = pageBodyElementsRef.current.get(pageIndex);
+        const footerElement = pageFooterElementsRef.current.get(pageIndex);
+        const headerHeightPx = headerElement ? Math.max(
           0,
-          pageLayout.pageHeightPx - Math.max(0, pageLayout.footerDistancePx)
+          Math.round(headerElement.getBoundingClientRect().height / zoomScale)
+        ) : 0;
+        const docxFooterTopPx = resolveFooterNodesFloatingBoundaryTopPx(
+          pageHeaderAndFooterNodes[pageIndex]?.footerNodes ?? [],
+          pageLayout
         );
-        const minimumRelevantFooterTopPx = Number.isFinite(docxFooterTopPx) ? Math.max(
+        let footerTopPx = Number.isFinite(docxFooterTopPx) ? Math.round(docxFooterTopPx) : void 0;
+        if (footerElement) {
+          const pageRect2 = pageElement.getBoundingClientRect();
+          const maxOverflowCapPx = Math.max(
+            16,
+            Math.min(
+              Math.round(pageLayout.pageHeightPx * 0.12),
+              Math.round(
+                pageLayout.marginsPx.bottom + pageLayout.footerDistancePx + 24
+              )
+            )
+          );
+          const footerFlowBoundaryTopPx = Math.max(
+            0,
+            pageLayout.pageHeightPx - Math.max(0, pageLayout.footerDistancePx)
+          );
+          const minimumRelevantFooterTopPx = Number.isFinite(docxFooterTopPx) ? Math.max(
+            0,
+            Math.min(
+              Math.max(0, footerFlowBoundaryTopPx - maxOverflowCapPx),
+              Math.round(docxFooterTopPx - maxOverflowCapPx)
+            )
+          ) : Math.max(0, footerFlowBoundaryTopPx - maxOverflowCapPx);
+          let visualTop = Number.POSITIVE_INFINITY;
+          footerElement.querySelectorAll("*").forEach((element) => {
+            if (!element.isConnected) {
+              return;
+            }
+            const rect = element.getBoundingClientRect();
+            if (rect.width <= 0 && rect.height <= 0) {
+              return;
+            }
+            const relativeTopPx = (rect.top - pageRect2.top) / zoomScale;
+            if (relativeTopPx < minimumRelevantFooterTopPx - 1) {
+              return;
+            }
+            visualTop = Math.min(visualTop, rect.top);
+          });
+          if (Number.isFinite(visualTop)) {
+            const measuredFooterTopPx = (visualTop - pageRect2.top) / zoomScale;
+            footerTopPx = Number.isFinite(footerTopPx) ? Math.min(
+              Math.round(footerTopPx),
+              Math.round(measuredFooterTopPx)
+            ) : Math.round(measuredFooterTopPx);
+          }
+        }
+        const pageRect = pageElement.getBoundingClientRect();
+        const bodyRect = bodyElement?.getBoundingClientRect();
+        const bodyTopPx = bodyRect ? Math.max(0, Math.round((bodyRect.top - pageRect.top) / zoomScale)) : void 0;
+        const bodyImageCount = bodyElement?.querySelectorAll("[data-docx-image-location]").length ?? 0;
+        const bodyTextTrimmedLength = bodyElement?.textContent?.replace(/\s+/g, "").length ?? 0;
+        const skipBodyBottomAdjustment = bodyImageCount > 0 && bodyTextTrimmedLength === 0;
+        const visualBodyBottom = bodyElement && bodyRect ? resolveMeasuredBodyRenderedBottomPx(
+          Array.from(bodyElement.querySelectorAll("*")).map(
+            (element) => {
+              const rect = element.getBoundingClientRect();
+              return {
+                bottomPx: rect.bottom,
+                widthPx: rect.width,
+                heightPx: rect.height,
+                ignore: !element.isConnected || Boolean(element.closest("[data-docx-image-location]")) || Boolean(
+                  element.closest(
+                    `[${PAGE_CONTENT_MEASUREMENT_IGNORE_ATTRIBUTE}="true"]`
+                  )
+                )
+              };
+            }
+          )
+        ) : void 0;
+        const bodyRenderedBottomPx = bodyRect && Number.isFinite(visualBodyBottom) ? Math.max(
           0,
-          Math.min(
-            Math.max(0, footerFlowBoundaryTopPx - maxOverflowCapPx),
-            Math.round(docxFooterTopPx - maxOverflowCapPx)
+          Math.round(
+            (visualBodyBottom - pageRect.top) / zoomScale
           )
-        ) : Math.max(0, footerFlowBoundaryTopPx - maxOverflowCapPx);
-        let visualTop = Number.POSITIVE_INFINITY;
-        footerElement.querySelectorAll("*").forEach((element) => {
-          if (!element.isConnected) {
-            return;
-          }
-          const rect = element.getBoundingClientRect();
-          if (rect.width <= 0 && rect.height <= 0) {
-            return;
-          }
-          const relativeTopPx = (rect.top - pageRect2.top) / zoomScale;
-          if (relativeTopPx < minimumRelevantFooterTopPx - 1) {
-            return;
-          }
-          visualTop = Math.min(visualTop, rect.top);
+        ) : void 0;
+        return resolveMeasuredPageContentHeightDiagnostics({
+          pageLayout,
+          fallbackHeightPx,
+          headerHeightPx,
+          currentMeasuredHeightPx: measuredPageContentHeightByIndex?.[pageIndex],
+          bodyTopPx,
+          bodyRenderedBottomPx,
+          footerTopPx,
+          skipBodyBottomAdjustment
         });
-        if (Number.isFinite(visualTop)) {
-          const measuredFooterTopPx = (visualTop - pageRect2.top) / zoomScale;
-          footerTopPx = Number.isFinite(footerTopPx) ? Math.min(
-            Math.round(footerTopPx),
-            Math.round(measuredFooterTopPx)
-          ) : Math.round(measuredFooterTopPx);
-        }
       }
-      const pageRect = pageElement.getBoundingClientRect();
-      const bodyRect = bodyElement?.getBoundingClientRect();
-      const bodyTopPx = bodyRect ? Math.max(0, Math.round((bodyRect.top - pageRect.top) / zoomScale)) : void 0;
-      const bodyImageCount = bodyElement?.querySelectorAll("[data-docx-image-location]").length ?? 0;
-      const bodyTextTrimmedLength = bodyElement?.textContent?.replace(/\s+/g, "").length ?? 0;
-      const skipBodyBottomAdjustment = bodyImageCount > 0 && bodyTextTrimmedLength === 0;
-      const visualBodyBottom = bodyElement && bodyRect ? resolveMeasuredBodyRenderedBottomPx(
-        Array.from(bodyElement.querySelectorAll("*")).map(
-          (element) => {
-            const rect = element.getBoundingClientRect();
-            return {
-              bottomPx: rect.bottom,
-              widthPx: rect.width,
-              heightPx: rect.height,
-              ignore: !element.isConnected || Boolean(element.closest("[data-docx-image-location]")) || Boolean(
-                element.closest(
-                  `[${PAGE_CONTENT_MEASUREMENT_IGNORE_ATTRIBUTE}="true"]`
-                )
-              )
-            };
-          }
-        )
-      ) : void 0;
-      const bodyRenderedBottomPx = bodyRect && Number.isFinite(visualBodyBottom) ? Math.max(
-        0,
-        Math.round(
-          (visualBodyBottom - pageRect.top) / zoomScale
-        )
-      ) : void 0;
-      return resolveMeasuredPageContentHeightPx({
-        pageLayout,
-        fallbackHeightPx,
-        headerHeightPx,
-        currentMeasuredHeightPx: measuredPageContentHeightByIndex?.[pageIndex],
-        bodyTopPx,
-        bodyRenderedBottomPx,
-        footerTopPx,
-        skipBodyBottomAdjustment
-      });
-    });
+    );
+    const nextMeasuredHeights = nextMeasuredPageDiagnostics.map(
+      (diagnostics) => diagnostics.heightPx
+    );
     const frameId = window.requestAnimationFrame(() => {
       setMeasuredPageContentHeightByIndex((current) => {
         const stabilizedHeights = stabilizeMeasuredPageContentHeights(
           current,
-          nextMeasuredHeights
+          nextMeasuredHeights,
+          {
+            currentPageIdentityKeys: measuredPageContentIdentityKeysByIndex,
+            nextPageIdentityKeys: nextMeasuredPageIdentityKeys
+          }
         );
         if (current.length === stabilizedHeights.length) {
           let equal = true;
@@ -29856,6 +30366,21 @@ function DocxEditorViewer({
         }
         return stabilizedHeights;
       });
+      setMeasuredPageContentIdentityKeysByIndex((current) => {
+        if (current.length === nextMeasuredPageIdentityKeys.length) {
+          let equal = true;
+          for (let pageIndex = 0; pageIndex < nextMeasuredPageIdentityKeys.length; pageIndex += 1) {
+            if (current[pageIndex] !== nextMeasuredPageIdentityKeys[pageIndex]) {
+              equal = false;
+              break;
+            }
+          }
+          if (equal) {
+            return current;
+          }
+        }
+        return nextMeasuredPageIdentityKeys;
+      });
     });
     return () => {
       window.cancelAnimationFrame(frameId);
@@ -29864,10 +30389,12 @@ function DocxEditorViewer({
     disableMeasuredImportPagination,
     documentLayout,
     measuredPageContentHeightByIndex,
+    measuredPageContentIdentityKeysByIndex,
     paginationMeasurementEnabled,
     paginationMeasurementEpoch,
     pageCount,
     pageNodeSegmentsByPage,
+    pageNodeSegmentIdentityKeysByPage,
     pageSectionInfoByIndex,
     pageHeaderAndFooterNodes
   ]);
@@ -35700,7 +36227,10 @@ function DocxEditorViewer({
                 height: run.image.heightPx ? `${run.image.heightPx}px` : void 0,
                 verticalAlign: "middle",
                 display: "inline-block",
-                filter: run.image.cssFilter,
+                filter: appendCssFilters(
+                  run.image.cssFilter,
+                  documentContentFilter
+                ),
                 opacity: run.image.cssOpacity
               }
             },
@@ -35711,14 +36241,15 @@ function DocxEditorViewer({
           overlapStart - run.startOffset,
           overlapEnd - run.startOffset
         );
-        if (!slice) {
+        const renderedSlice = sanitizeRenderedPretextFragmentText(slice);
+        if (!renderedSlice) {
           return void 0;
         }
         const textStyle = run.link ? {
-          ...linkStyleToCss(run.style, editor.documentTheme),
+          ...linkStyleToCss(run.style, documentContentTheme),
           whiteSpace: "pre"
         } : {
-          ...runStyleToCss(run.style, editor.documentTheme),
+          ...runStyleToCss(run.style, documentContentTheme),
           whiteSpace: "pre"
         };
         if (activeSession) {
@@ -35726,7 +36257,7 @@ function DocxEditorViewer({
             "span",
             {
               style: textStyle,
-              children: slice
+              children: renderedSlice
             },
             `${keyPrefix}-active-${lineIndex}-${run.key}-${overlapStart}`
           );
@@ -35753,14 +36284,14 @@ function DocxEditorViewer({
               scrollToBookmark(run.link.slice(1));
             },
             style: textStyle,
-            children: slice
+            children: renderedSlice
           },
           `${keyPrefix}-fragment-${lineIndex}-${run.key}-${overlapStart}`
         ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
             style: textStyle,
-            children: slice
+            children: renderedSlice
           },
           `${keyPrefix}-fragment-${lineIndex}-${run.key}-${overlapStart}`
         );
@@ -36452,7 +36983,7 @@ function DocxEditorViewer({
         return renderParagraphRuns(
           paragraph,
           keyPrefix,
-          editor.documentTheme,
+          documentContentTheme,
           numberingLabel,
           scrollToBookmark,
           interactiveBodyFloatingPageOriginPx,
@@ -36520,7 +37051,10 @@ function DocxEditorViewer({
                     height: run.image.heightPx ? `${run.image.heightPx}px` : void 0,
                     verticalAlign: "middle",
                     display: "inline-block",
-                    filter: run.image.cssFilter,
+                    filter: appendCssFilters(
+                      run.image.cssFilter,
+                      documentContentFilter
+                    ),
                     opacity: run.image.cssOpacity
                   }
                 },
@@ -36535,10 +37069,10 @@ function DocxEditorViewer({
               return void 0;
             }
             const textStyle = run.link ? {
-              ...linkStyleToCss(run.style, editor.documentTheme),
+              ...linkStyleToCss(run.style, documentContentTheme),
               whiteSpace: "pre"
             } : {
-              ...runStyleToCss(run.style, editor.documentTheme),
+              ...runStyleToCss(run.style, documentContentTheme),
               whiteSpace: "pre"
             };
             return run.link ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -36675,7 +37209,10 @@ function DocxEditorViewer({
                     heightPx
                   );
                   const imageVisualStyle = {
-                    filter: manualImage.cssFilter,
+                    filter: appendCssFilters(
+                      manualImage.cssFilter,
+                      documentContentFilter
+                    ),
                     opacity: manualImage.cssOpacity
                   };
                   const imageTransformStyle = resolveImageRenderTransformStyle(
@@ -36949,7 +37486,10 @@ function DocxEditorViewer({
                       verticalAlign: "middle",
                       display: "block",
                       cursor: isReadOnly ? "default" : "move",
-                      filter: manualImage.cssFilter,
+                      filter: appendCssFilters(
+                        manualImage.cssFilter,
+                        documentContentFilter
+                      ),
                       opacity: manualImage.cssOpacity
                     }
                   }
@@ -37161,7 +37701,10 @@ function DocxEditorViewer({
                       verticalAlign: "middle",
                       display: "block",
                       cursor: isReadOnly ? "default" : "move",
-                      filter: manualImage.cssFilter,
+                      filter: appendCssFilters(
+                        manualImage.cssFilter,
+                        documentContentFilter
+                      ),
                       opacity: manualImage.cssOpacity
                     }
                   }
@@ -37313,7 +37856,7 @@ function DocxEditorViewer({
         });
       }
       if (numberingLabel) {
-        const numberingTextStyle = numberingLabel.style ? runStyleToCss(numberingLabel.style, editor.documentTheme) : void 0;
+        const numberingTextStyle = numberingLabel.style ? runStyleToCss(numberingLabel.style, documentContentTheme) : void 0;
         nodes.push(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "span",
@@ -37325,7 +37868,7 @@ function DocxEditorViewer({
                 editor.model.metadata.numberingDefinitions,
                 numberingLabel,
                 numberingTextStyle,
-                editor.documentTheme
+                documentContentTheme
               ),
               children: numberingLabel.imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -37642,7 +38185,7 @@ function DocxEditorViewer({
                               {
                                 style: segment.style ? runStyleToCss(
                                   segment.style,
-                                  editor.documentTheme
+                                  documentContentTheme
                                 ) : void 0,
                                 children: segment.text
                               },
@@ -37656,7 +38199,10 @@ function DocxEditorViewer({
                   ) : renderableImageSrc && !showsUnsupportedFallback ? (() => {
                     const cropLayout = imageCropLayout(child, widthPx, heightPx);
                     const imageVisualStyle = {
-                      filter: child.cssFilter,
+                      filter: appendCssFilters(
+                        child.cssFilter,
+                        documentContentFilter
+                      ),
                       opacity: child.cssOpacity
                     };
                     const imageTransformStyle = resolveImageRenderTransformStyle(
@@ -37922,10 +38468,10 @@ function DocxEditorViewer({
           const compactFieldLayout = compactTabStopFieldLayout || child.sourceKind === "legacy";
           const isTextLikeFormField = child.fieldType === "text" || child.fieldType === "date";
           const inputStyle = {
-            ...runStyleToCss(child.style, editor.documentTheme),
+            ...runStyleToCss(child.style, documentContentTheme),
             fontFamily: cssFontFamily(child.style?.fontFamily) ?? "inherit",
             fontSize: child.style?.fontSizePt ? `${child.style.fontSizePt}pt` : "inherit",
-            color: themedRunColor(child.style?.color, editor.documentTheme) ?? "inherit",
+            color: themedRunColor(child.style?.color, documentContentTheme) ?? "inherit",
             backgroundColor: isTextLikeFormField ? "rgba(148, 163, 184, 0.16)" : compactFieldLayout ? "transparent" : "#ffffff",
             border: isTextLikeFormField ? "1px solid rgba(148, 163, 184, 0.6)" : compactFieldLayout ? "none" : "1px solid #d4d4d8",
             borderRadius: isTextLikeFormField ? 4 : compactFieldLayout ? 0 : 6,
@@ -38007,7 +38553,7 @@ function DocxEditorViewer({
                     cursor: isReadOnly ? "default" : "pointer",
                     userSelect: "none",
                     outline: "none",
-                    ...runStyleToCss(child.style, editor.documentTheme)
+                    ...runStyleToCss(child.style, documentContentTheme)
                   },
                   children: checkboxSymbol
                 },
@@ -38221,7 +38767,7 @@ function DocxEditorViewer({
                 "span",
                 {
                   style: {
-                    ...runStyleToCss(child.style, editor.documentTheme),
+                    ...runStyleToCss(child.style, documentContentTheme),
                     verticalAlign: "super",
                     fontSize: "0.75em"
                   },
@@ -38266,7 +38812,7 @@ function DocxEditorViewer({
                     const bookmarkName = linkHref.slice(1);
                     scrollToBookmark(bookmarkName);
                   },
-                  style: linkStyleToCss(child.style, editor.documentTheme),
+                  style: linkStyleToCss(child.style, documentContentTheme),
                   children: child.text
                 },
                 runKey
@@ -38281,7 +38827,7 @@ function DocxEditorViewer({
             );
             return;
           }
-          const runStyle = runStyleToCss(child.style, editor.documentTheme);
+          const runStyle = runStyleToCss(child.style, documentContentTheme);
           const renderedText = attachTextToPreviousCheckbox(
             paragraph,
             childIndex,
@@ -38361,7 +38907,8 @@ function DocxEditorViewer({
       resizePreview,
       selectedImage,
       setSelectedSectionImageKey,
-      editor.documentTheme,
+      documentContentFilter,
+      documentContentTheme,
       editor.selectFormField,
       editor.setFormFieldValue,
       editor.toggleFormCheckbox,
@@ -38556,9 +39103,6 @@ function DocxEditorViewer({
       );
       const paragraphSegmentVisibleHeightPx = paragraphSegmentVisibleLineCount * paragraphSegmentLineHeightPx;
       const paragraphSegmentTranslateYPx = paragraphSegmentStartLine * paragraphSegmentLineHeightPx;
-      const paragraphSegmentClipBleed = resolveParagraphSegmentClipBleedPx(paragraphLineRange);
-      const paragraphSegmentClipBleedTopPx = paragraphSegmentClipBleed.topPx;
-      const paragraphSegmentClipBleedBottomPx = paragraphSegmentClipBleed.bottomPx;
       const paragraphSegmentIsActiveEditable = paragraphSegmentIdentityMatches(
         activeEditableParagraphSegment,
         nodeIndex,
@@ -38607,6 +39151,9 @@ function DocxEditorViewer({
         pretextParagraphSliceEndLine
       ) : void 0;
       const shouldRenderParagraphSegmentWithPretext = hasPartialLineRange && Boolean(pretextParagraphSource) && Boolean(pretextParagraphLayout) && pretextParagraphTotalLines > 0;
+      const paragraphSegmentClipBleed = shouldRenderParagraphSegmentWithPretext ? resolveParagraphSegmentClipBleedPx(paragraphLineRange) : resolveFallbackParagraphSegmentClipBleedPx(node, paragraphLineRange);
+      const paragraphSegmentClipBleedTopPx = paragraphSegmentClipBleed.topPx;
+      const paragraphSegmentClipBleedBottomPx = paragraphSegmentClipBleed.bottomPx;
       const pretextSegmentNumberingMarkerBoxWidthPx = numberingLabel && paragraphSegmentStartLine === 0 ? resolveNumberingMarkerBoxWidthPx(
         node,
         editor.model.metadata.numberingDefinitions,
@@ -38631,8 +39178,8 @@ function DocxEditorViewer({
               node,
               editor.model.metadata.numberingDefinitions,
               numberingLabel,
-              numberingLabel.style ? runStyleToCss(numberingLabel.style, editor.documentTheme) : void 0,
-              editor.documentTheme
+              numberingLabel.style ? runStyleToCss(numberingLabel.style, documentContentTheme) : void 0,
+              documentContentTheme
             ),
             position: "absolute",
             left: -Math.round(
@@ -38656,7 +39203,8 @@ function DocxEditorViewer({
                   verticalAlign: "text-bottom",
                   width: numberingLabel.imageWidthPx ?? 12,
                   height: numberingLabel.imageHeightPx ?? 12,
-                  marginRight: 2
+                  marginRight: 2,
+                  filter: documentContentFilter
                 }
               }
             ),
@@ -39804,7 +40352,7 @@ ${currentText.slice(end)}`;
                                     children: renderHeaderNode(
                                       cellContent,
                                       `active-cell-nested-table-${nodeIndex}-${rowIndex}-${cellIndex}-${contentIndex}`,
-                                      editor.documentTheme,
+                                      documentContentTheme,
                                       editor.model.metadata.numberingDefinitions,
                                       headingStyles,
                                       spannedWidthPx > 0 ? spannedWidthPx : void 0,
@@ -40720,7 +41268,7 @@ ${currentText.slice(end)}`;
                                     return renderHeaderNode(
                                       cellContent,
                                       `body-cell-nested-table-${nodeIndex}-${rowIndex}-${cellIndex}-${contentIndex}`,
-                                      editor.documentTheme,
+                                      documentContentTheme,
                                       editor.model.metadata.numberingDefinitions,
                                       headingStyles,
                                       spannedWidthPx > 0 ? spannedWidthPx : void 0,
@@ -41402,7 +41950,7 @@ ${currentText.slice(end)}`;
                               style: {
                                 ...runStyleToCss(
                                   dropCapTextStyle,
-                                  editor.documentTheme
+                                  documentContentTheme
                                 ),
                                 width: "100%",
                                 minHeight: dropCapHeightPx,
@@ -41419,7 +41967,7 @@ ${currentText.slice(end)}`;
                                 boxShadow: isSelectedDropCap ? "0 0 0 2px rgba(191, 219, 254, 0.65)" : void 0,
                                 color: themedRunColor(
                                   dropCapTextStyle.color,
-                                  editor.documentTheme
+                                  documentContentTheme
                                 ) ?? void 0,
                                 fontFamily: cssFontFamily(dropCapTextStyle.fontFamily) ?? void 0
                               }
@@ -41607,7 +42155,7 @@ ${currentText.slice(end)}`;
                                   style: {
                                     ...runStyleToCss(
                                       dropCapTextStyle,
-                                      editor.documentTheme
+                                      documentContentTheme
                                     ),
                                     width: "100%",
                                     minHeight: dropCapHeightPx,
@@ -41624,7 +42172,7 @@ ${currentText.slice(end)}`;
                                     boxShadow: isSelectedDropCap ? "0 0 0 2px rgba(191, 219, 254, 0.65)" : void 0,
                                     color: themedRunColor(
                                       dropCapTextStyle.color,
-                                      editor.documentTheme
+                                      documentContentTheme
                                     ) ?? void 0,
                                     fontFamily: cssFontFamily(
                                       dropCapTextStyle.fontFamily
@@ -41889,7 +42437,7 @@ ${currentText.slice(end)}`;
             renderParagraphRuns(
               paragraph,
               `${keyPrefix}-runs`,
-              editor.documentTheme,
+              documentContentTheme,
               void 0,
               scrollToBookmark,
               void 0,
@@ -41907,7 +42455,7 @@ ${currentText.slice(end)}`;
       ));
     },
     [
-      editor.documentTheme,
+      documentContentTheme,
       endnoteDisplayIndexById,
       footnoteDisplayIndexById,
       renderParagraphRuns,
@@ -42068,13 +42616,7 @@ ${currentText.slice(end)}`;
                   "div",
                   {
                     "data-docx-page-placeholder": "true",
-                    ref: (element) => {
-                      if (element) {
-                        pageElementsRef.current.set(pageIndex, element);
-                      } else {
-                        pageElementsRef.current.delete(pageIndex);
-                      }
-                    },
+                    ref: pagePlaceholderRefForIndex(pageIndex),
                     style: {
                       height: pageLayout.pageHeightPx,
                       width: pageLayout.pageWidthPx
@@ -42166,18 +42708,21 @@ ${currentText.slice(end)}`;
           const isLastPage = pageIndex === pageCount - 1;
           const pageFootnotes = pageFootnotesByIndex[pageIndex] ?? [];
           const pageBottomFootnotes = isLastPage && remainingFootnotes.length > 0 ? [...pageFootnotes, ...remainingFootnotes] : pageFootnotes;
-          const pageBodyAvailableHeightPx = resolvePageContentHeightPxForPageSegments(
-            pageNodeSegments,
+          const pageBodyAvailableHeightPx = resolveRenderPageContentHeightPxForPageSegments({
+            pageSegments: pageNodeSegments,
             pageIndex,
-            Math.max(
+            defaultPageContentHeightPx: Math.max(
               120,
               pageLayout.pageHeightPx - pageLayout.marginsPx.top - pageLayout.marginsPx.bottom
             ),
-            paginationSectionMetrics,
-            measuredPageContentHeightByIndex
-          );
+            metricsBySection: paginationSectionMetrics,
+            measuredPageContentHeightsPxByPageIndex: measuredPageContentHeightByIndex,
+            measuredPageContentIdentityKeysByPageIndex: measuredPageContentIdentityKeysByIndex,
+            pageIdentityKey: pageNodeSegmentIdentityKeysByPage[pageIndex],
+            useMeasuredPageContentHeights: useMeasuredPageContentHeightsForRender
+          });
           const headerFooterBodyDimmed = pageHeaderFooterEditActive;
-          const pageBackgroundColor = editor.model.metadata.documentBackgroundColor;
+          const documentPageBackgroundColor = editor.model.metadata.documentBackgroundColor;
           const pageBorders = parseSectionPageBorders(
             pageInfo?.section.sectionPropertiesXml ?? editor.model.metadata.sectionPropertiesXml
           );
@@ -42200,7 +42745,7 @@ ${currentText.slice(end)}`;
             width: pageLayout.pageWidthPx,
             height: pageLayout.pageHeightPx,
             minHeight: pageLayout.pageHeightPx,
-            backgroundColor: pageBackgroundColor ?? pageSurfaceBaseStyle.backgroundColor,
+            backgroundColor: pageBackgroundColor ?? documentPageBackgroundColor ?? pageSurfaceBaseStyle.backgroundColor,
             position: "relative",
             paddingTop: pageLayout.marginsPx.top,
             paddingRight: pageLayout.marginsPx.right,
@@ -42264,13 +42809,7 @@ ${currentText.slice(end)}`;
                   "div",
                   {
                     "data-docx-page-surface": "true",
-                    ref: (element) => {
-                      if (element) {
-                        pageElementsRef.current.set(pageIndex, element);
-                      } else {
-                        pageElementsRef.current.delete(pageIndex);
-                      }
-                    },
+                    ref: pageSurfaceRefForIndex(pageIndex),
                     style: {
                       ...pageSurfaceStyle,
                       margin: 0
@@ -42288,7 +42827,8 @@ ${currentText.slice(end)}`;
                             height: pageLayout.pageHeightPx,
                             overflow: "clip",
                             pointerEvents: "none",
-                            zIndex: 0
+                            zIndex: 0,
+                            ...documentContentFilter ? { filter: documentContentFilter } : void 0
                           },
                           children: pageCoverBackgroundImages.map(({ key, image }) => {
                             const renderableImageSrc = resolveRenderableImageSource(image);
@@ -42310,7 +42850,10 @@ ${currentText.slice(end)}`;
                                   height: "100%",
                                   display: "block",
                                   objectFit: "cover",
-                                  filter: image.cssFilter,
+                                  filter: appendCssFilters(
+                                    image.cssFilter,
+                                    documentContentFilter
+                                  ),
                                   opacity: image.cssOpacity,
                                   ...resolveImageRenderTransformStyle(image, {
                                     frameWidthPx: pageLayout.pageWidthPx,
@@ -42328,7 +42871,10 @@ ${currentText.slice(end)}`;
                         "div",
                         {
                           "data-docx-page-border-overlay": "true",
-                          style: pageBorderOverlayStyle
+                          style: {
+                            ...pageBorderOverlayStyle,
+                            ...documentContentFilter ? { filter: documentContentFilter } : void 0
+                          }
                         }
                       ) : null,
                       pageSections.headerNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -42357,7 +42903,8 @@ ${currentText.slice(end)}`;
                             transition: "opacity 120ms ease",
                             outline: "none",
                             boxShadow: "none",
-                            zIndex: 1
+                            zIndex: 1,
+                            ...documentContentFilter ? { filter: documentContentFilter } : void 0
                           },
                           contentEditable: pageHeaderFooterEditActive && !isReadOnly,
                           suppressContentEditableWarning: true,
@@ -42417,7 +42964,7 @@ ${currentText.slice(end)}`;
                             (node, index) => renderHeaderNode(
                               node,
                               `header-${pageIndex}-${index}`,
-                              editor.documentTheme,
+                              documentContentTheme,
                               editor.model.metadata.numberingDefinitions,
                               headingStyles,
                               headerNeedsPageWideLayout ? pageLayout.pageWidthPx : pageContentWidthPx,
@@ -42465,7 +43012,8 @@ ${currentText.slice(end)}`;
                             transition: "opacity 120ms ease",
                             display: "flex",
                             flexDirection: "column",
-                            minHeight: pageBodyAvailableHeightPx
+                            minHeight: pageBodyAvailableHeightPx,
+                            ...documentContentFilter ? { filter: documentContentFilter } : void 0
                           },
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { minHeight: 0 }, children: (() => {
@@ -42894,7 +43442,7 @@ ${currentText.slice(end)}`;
                                 style: {
                                   marginTop: 8,
                                   paddingTop: 8,
-                                  borderTop: `1px solid ${editor.documentTheme === "dark" ? "#4b5563" : "#9ca3af"}`,
+                                  borderTop: `1px solid ${documentContentTheme === "dark" ? "#4b5563" : "#9ca3af"}`,
                                   display: "grid",
                                   gap: 6,
                                   fontSize: 12
@@ -42927,7 +43475,7 @@ ${currentText.slice(end)}`;
                                 style: {
                                   marginTop: "auto",
                                   paddingTop: 8,
-                                  borderTop: `1px solid ${editor.documentTheme === "dark" ? "#4b5563" : "#9ca3af"}`,
+                                  borderTop: `1px solid ${documentContentTheme === "dark" ? "#4b5563" : "#9ca3af"}`,
                                   display: "grid",
                                   gap: 6,
                                   fontSize: 12
@@ -43031,7 +43579,8 @@ ${currentText.slice(end)}`;
                               transition: "opacity 120ms ease",
                               outline: "none",
                               boxShadow: "none",
-                              zIndex: 1
+                              zIndex: 1,
+                              ...documentContentFilter ? { filter: documentContentFilter } : void 0
                             },
                             contentEditable: pageHeaderFooterEditActive && !isReadOnly,
                             suppressContentEditableWarning: true,
@@ -43091,7 +43640,7 @@ ${currentText.slice(end)}`;
                               (node, index) => renderHeaderNode(
                                 node,
                                 `footer-${pageIndex}-${index}`,
-                                editor.documentTheme,
+                                documentContentTheme,
                                 editor.model.metadata.numberingDefinitions,
                                 headingStyles,
                                 footerNeedsPageWideLayout ? pageLayout.pageWidthPx : pageContentWidthPx,
@@ -45547,6 +46096,7 @@ function ReactDocxViewer({
   resolveDocumentLayout,
   resolveDocumentPageSegmentStartNodeIndex,
   resolveDocumentSectionsFromMetadata,
+  resolveDocxPageThumbnailResolution,
   resolvePaginationSectionMetricsIndexForNodeIndex,
   resolveParagraphBeforeSpacingPx,
   resolveSectionIndexForNodeIndex,
@@ -45578,6 +46128,7 @@ function ReactDocxViewer({
   useDocxLineSpacing,
   useDocxModel,
   useDocxPageLayout,
+  useDocxPageThumbnails,
   useDocxPagination,
   useDocxParagraphStyles,
   useDocxTrackChanges,