@extend-ai/react-docx 0.7.0-alpha.7 → 0.7.0

package/dist/index.cjs

@@ -4403,6 +4403,14 @@ var THUMBNAIL_EXCLUDED_CLONE_SELECTOR = [
 var THUMBNAIL_IMAGE_DOWNSCALE_MIN_DATA_URI_LENGTH = 32768;
 var THUMBNAIL_IMAGE_DOWNSCALE_MAX_DIMENSION_PX = 512;
 var THUMBNAIL_IMAGE_JPEG_QUALITY = 0.78;
+var THUMBNAIL_DIRECT_DEFAULT_FONT_FAMILY = "Calibri, Arial, sans-serif";
+var THUMBNAIL_DIRECT_DEFAULT_TEXT_COLOR = "#111827";
+var THUMBNAIL_DIRECT_TABLE_BORDER_COLOR = "#d1d5db";
+var THUMBNAIL_DIRECT_IMAGE_BACKGROUND = "#f3f4f6";
+var THUMBNAIL_DIRECT_MAX_ELEMENTS = 320;
+var THUMBNAIL_DIRECT_MAX_TEXT_CHARS = 640;
+var THUMBNAIL_DIRECT_MAX_LINES = 14;
+var THUMBNAIL_DIRECT_MAX_LAYOUT_LINES = 80;
 function thumbnailSvgDataUri(svg) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
@@ -4466,6 +4474,346 @@ function getDownscaledThumbnailImageDataUri(src) {
   downscaledThumbnailImageCache.set(src, pending);
   return pending;
 }
+function directThumbnailPositivePx(value, fallback = 1) {
+  return Number.isFinite(value) && value > 0 ? Math.max(1, Number(value)) : fallback;
+}
+function setCanvasFillStyle(context, color, fallback) {
+  try {
+    context.fillStyle = color || fallback;
+  } catch {
+    context.fillStyle = fallback;
+  }
+}
+function setCanvasStrokeStyle(context, color, fallback) {
+  try {
+    context.strokeStyle = color || fallback;
+  } catch {
+    context.strokeStyle = fallback;
+  }
+}
+function directThumbnailFont(run, fallbackFontSizePx) {
+  const fontSizePx = Math.max(
+    6,
+    Math.min(
+      36,
+      Math.round(
+        directThumbnailPositivePx(run?.fontSizePx, fallbackFontSizePx)
+      )
+    )
+  );
+  const fontStyle = run?.italic ? "italic " : "";
+  const fontWeight = run?.bold ? "700 " : "";
+  return `${fontStyle}${fontWeight}${fontSizePx}px ${run?.fontFamily || THUMBNAIL_DIRECT_DEFAULT_FONT_FAMILY}`;
+}
+var THUMBNAIL_DIRECT_TOKEN_REGEX = /(\r\n|\n|\t|[^\S\r\n\t]+|[^\s\r\n\t]+)/g;
+var THUMBNAIL_DIRECT_LEADING_WHITESPACE_REGEX = /^\s/;
+var THUMBNAIL_DIRECT_TEXT_MEASURE_CACHE_MAX_ENTRIES = 4096;
+var directThumbnailTextMeasureCache = /* @__PURE__ */ new Map();
+function measureDirectThumbnailToken(context, font, text) {
+  if (!text) {
+    return 0;
+  }
+  const cacheKey = `${font}\0${text}`;
+  const cached = directThumbnailTextMeasureCache.get(cacheKey);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const width = context.measureText(text).width;
+  if (directThumbnailTextMeasureCache.size >= THUMBNAIL_DIRECT_TEXT_MEASURE_CACHE_MAX_ENTRIES) {
+    const oldestKey = directThumbnailTextMeasureCache.keys().next().value;
+    if (oldestKey !== void 0) {
+      directThumbnailTextMeasureCache.delete(oldestKey);
+    }
+  }
+  directThumbnailTextMeasureCache.set(cacheKey, width);
+  return width;
+}
+function appendDirectThumbnailTextLine(lines, currentSegments, currentWidthPx) {
+  const line = {
+    segments: currentSegments,
+    widthPx: currentWidthPx
+  };
+  lines.push(line);
+  return line;
+}
+function layoutDirectThumbnailTextRuns(params) {
+  const { context, runs, fallbackFontSizePx } = params;
+  const widthPx = Math.max(1, params.widthPx);
+  const maxLineCount = Math.max(
+    1,
+    Math.min(THUMBNAIL_DIRECT_MAX_LAYOUT_LINES, params.maxLineCount)
+  );
+  const lines = [];
+  let currentSegments = [];
+  let currentWidthPx = 0;
+  let remainingChars = THUMBNAIL_DIRECT_MAX_TEXT_CHARS;
+  const flushLine = () => {
+    appendDirectThumbnailTextLine(lines, currentSegments, currentWidthPx);
+    currentSegments = [];
+    currentWidthPx = 0;
+  };
+  for (const run of runs) {
+    if (lines.length >= maxLineCount || remainingChars <= 0) {
+      break;
+    }
+    const text = run.text.slice(0, remainingChars);
+    remainingChars -= text.length;
+    const runFont = directThumbnailFont(run, fallbackFontSizePx);
+    context.font = runFont;
+    const tokens = text.match(THUMBNAIL_DIRECT_TOKEN_REGEX) ?? [];
+    for (const token of tokens) {
+      if (lines.length >= maxLineCount) {
+        break;
+      }
+      if (token === "\n" || token === "\r\n") {
+        flushLine();
+        continue;
+      }
+      const drawableToken = token === "	" ? "    " : token;
+      const tokenWidthPx = measureDirectThumbnailToken(
+        context,
+        runFont,
+        drawableToken
+      );
+      const tokenIsWhitespace = THUMBNAIL_DIRECT_LEADING_WHITESPACE_REGEX.test(drawableToken);
+      if (currentSegments.length > 0 && currentWidthPx + tokenWidthPx > widthPx && !tokenIsWhitespace) {
+        flushLine();
+      }
+      if (currentSegments.length === 0 && tokenIsWhitespace) {
+        continue;
+      }
+      currentSegments.push({
+        run,
+        text: drawableToken,
+        widthPx: tokenWidthPx,
+        font: runFont
+      });
+      currentWidthPx += tokenWidthPx;
+    }
+  }
+  if (currentSegments.length > 0 || lines.length === 0) {
+    flushLine();
+  }
+  return lines;
+}
+function directThumbnailAlignedX(params) {
+  const { xPx, widthPx, lineWidthPx, align } = params;
+  if (align === "center") {
+    return xPx + Math.max(0, (widthPx - lineWidthPx) / 2);
+  }
+  if (align === "right") {
+    return xPx + Math.max(0, widthPx - lineWidthPx);
+  }
+  return xPx;
+}
+function drawDirectThumbnailTextRuns(params) {
+  const {
+    context,
+    runs,
+    xPx,
+    yPx,
+    widthPx,
+    heightPx,
+    align,
+    startLineIndex
+  } = params;
+  const safeWidthPx = Math.max(1, widthPx);
+  const safeHeightPx = Math.max(1, heightPx);
+  const fallbackFontSizePx = Math.max(
+    7,
+    Math.min(
+      20,
+      Math.round(
+        runs.find((run) => Number.isFinite(run.fontSizePx))?.fontSizePx ?? 12
+      )
+    )
+  );
+  const lineHeightPx = Math.max(
+    fallbackFontSizePx + 1,
+    Math.round(params.lineHeightPx ?? fallbackFontSizePx * 1.25)
+  );
+  const skippedLineCount = Math.max(
+    0,
+    Math.min(THUMBNAIL_DIRECT_MAX_LAYOUT_LINES - 1, Math.trunc(startLineIndex ?? 0))
+  );
+  const visibleLineCount = Math.max(
+    1,
+    Math.min(
+      THUMBNAIL_DIRECT_MAX_LINES,
+      Math.ceil(safeHeightPx / Math.max(1, lineHeightPx)) + 1
+    )
+  );
+  const lines = layoutDirectThumbnailTextRuns({
+    context,
+    runs,
+    widthPx: safeWidthPx,
+    fallbackFontSizePx,
+    maxLineCount: skippedLineCount + visibleLineCount
+  }).slice(skippedLineCount, skippedLineCount + visibleLineCount);
+  context.save();
+  context.beginPath();
+  context.rect(xPx, yPx, safeWidthPx, safeHeightPx);
+  context.clip();
+  context.textBaseline = "alphabetic";
+  let lastAppliedFont;
+  lines.forEach((line, lineIndex) => {
+    const lineTopPx = yPx + lineIndex * lineHeightPx;
+    if (lineTopPx > yPx + safeHeightPx) {
+      return;
+    }
+    let cursorXPx = directThumbnailAlignedX({
+      xPx,
+      widthPx: safeWidthPx,
+      lineWidthPx: line.widthPx,
+      align
+    });
+    const baselineYPx = lineTopPx + Math.max(1, Math.round(lineHeightPx * 0.78));
+    line.segments.forEach((segment) => {
+      const segmentWidthPx = segment.widthPx;
+      if (segment.run.backgroundColor) {
+        setCanvasFillStyle(context, segment.run.backgroundColor, "transparent");
+        context.fillRect(cursorXPx, lineTopPx + 1, segmentWidthPx, lineHeightPx);
+      }
+      if (segment.font !== lastAppliedFont) {
+        context.font = segment.font;
+        lastAppliedFont = segment.font;
+      }
+      setCanvasFillStyle(
+        context,
+        segment.run.color,
+        THUMBNAIL_DIRECT_DEFAULT_TEXT_COLOR
+      );
+      context.fillText(segment.text, cursorXPx, baselineYPx);
+      cursorXPx += segmentWidthPx;
+    });
+  });
+  context.restore();
+}
+function drawDirectThumbnailParagraph(context, paragraph) {
+  const xPx = Math.round(paragraph.xPx);
+  const yPx = Math.round(paragraph.yPx);
+  const widthPx = Math.max(1, Math.round(paragraph.widthPx));
+  const heightPx = Math.max(1, Math.round(paragraph.heightPx));
+  if (paragraph.backgroundColor) {
+    setCanvasFillStyle(context, paragraph.backgroundColor, "transparent");
+    context.fillRect(xPx, yPx, widthPx, heightPx);
+  }
+  drawDirectThumbnailTextRuns({
+    context,
+    runs: paragraph.runs,
+    xPx: xPx + 1,
+    yPx,
+    widthPx: Math.max(1, widthPx - 2),
+    heightPx,
+    align: paragraph.align,
+    lineHeightPx: paragraph.lineHeightPx,
+    startLineIndex: paragraph.startLineIndex
+  });
+}
+function drawDirectThumbnailImagePlaceholder(context, image, hairlineSourcePx) {
+  const xPx = Math.round(image.xPx);
+  const yPx = Math.round(image.yPx);
+  const widthPx = Math.max(1, Math.round(image.widthPx));
+  const heightPx = Math.max(1, Math.round(image.heightPx));
+  setCanvasFillStyle(
+    context,
+    image.backgroundColor,
+    THUMBNAIL_DIRECT_IMAGE_BACKGROUND
+  );
+  context.fillRect(xPx, yPx, widthPx, heightPx);
+  setCanvasStrokeStyle(
+    context,
+    image.borderColor,
+    THUMBNAIL_DIRECT_TABLE_BORDER_COLOR
+  );
+  context.lineWidth = hairlineSourcePx;
+  context.strokeRect(xPx, yPx, widthPx, heightPx);
+}
+function drawDirectThumbnailTable(context, table, hairlineSourcePx) {
+  const tableXPx = Math.round(table.xPx);
+  const tableYPx = Math.round(table.yPx);
+  const tableWidthPx = Math.max(1, Math.round(table.widthPx));
+  const tableHeightPx = Math.max(1, Math.round(table.heightPx));
+  context.save();
+  context.beginPath();
+  context.rect(tableXPx, tableYPx, tableWidthPx, tableHeightPx);
+  context.clip();
+  setCanvasStrokeStyle(
+    context,
+    table.borderColor,
+    THUMBNAIL_DIRECT_TABLE_BORDER_COLOR
+  );
+  context.lineWidth = hairlineSourcePx;
+  table.cells.forEach((cell) => {
+    const xPx = tableXPx + Math.round(cell.xPx);
+    const yPx = tableYPx + Math.round(cell.yPx);
+    const widthPx = Math.max(1, Math.round(cell.widthPx));
+    const heightPx = Math.max(1, Math.round(cell.heightPx));
+    if (cell.backgroundColor) {
+      setCanvasFillStyle(context, cell.backgroundColor, "transparent");
+      context.fillRect(xPx, yPx, widthPx, heightPx);
+    }
+    context.strokeRect(xPx, yPx, widthPx, heightPx);
+    if (cell.runs?.length) {
+      drawDirectThumbnailTextRuns({
+        context,
+        runs: cell.runs,
+        xPx: xPx + 3,
+        yPx: yPx + 2,
+        widthPx: Math.max(1, widthPx - 6),
+        heightPx: Math.max(1, heightPx - 4),
+        lineHeightPx: 13
+      });
+    }
+  });
+  context.restore();
+}
+function renderDocxThumbnailSnapshotSurface(params) {
+  if (typeof document === "undefined") {
+    throw new Error("DOCX thumbnails require a browser environment.");
+  }
+  const sourceWidthPx = directThumbnailPositivePx(params.snapshot.sourceWidthPx);
+  const sourceHeightPx = directThumbnailPositivePx(params.snapshot.sourceHeightPx);
+  const pixelWidthPx = Math.max(1, Math.round(params.pixelWidthPx));
+  const pixelHeightPx = Math.max(1, Math.round(params.pixelHeightPx));
+  const surface = document.createElement("canvas");
+  surface.width = pixelWidthPx;
+  surface.height = pixelHeightPx;
+  const context = surface.getContext("2d");
+  if (!context) {
+    throw new Error("2D canvas context is unavailable for DOCX thumbnails.");
+  }
+  const scaleX = pixelWidthPx / sourceWidthPx;
+  const scaleY = pixelHeightPx / sourceHeightPx;
+  const hairlineSourcePx = Math.max(0.75, 1 / Math.max(scaleX, scaleY));
+  context.setTransform(scaleX, 0, 0, scaleY, 0, 0);
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+  setCanvasFillStyle(
+    context,
+    params.snapshot.pageBackgroundColor,
+    "#ffffff"
+  );
+  context.fillRect(0, 0, sourceWidthPx, sourceHeightPx);
+  params.snapshot.elements.slice(0, THUMBNAIL_DIRECT_MAX_ELEMENTS).forEach((element) => {
+    switch (element.kind) {
+      case "paragraph":
+        drawDirectThumbnailParagraph(context, element);
+        break;
+      case "image-placeholder":
+        drawDirectThumbnailImagePlaceholder(
+          context,
+          element,
+          hairlineSourcePx
+        );
+        break;
+      case "table":
+        drawDirectThumbnailTable(context, element, hairlineSourcePx);
+        break;
+    }
+  });
+  return surface;
+}
 async function buildDocxThumbnailSvgMarkup(params) {
   const { pageElement, sourceWidthPx, sourceHeightPx, widthPx, heightPx } = params;
   const clone = pageElement.cloneNode(true);
@@ -4527,16 +4875,33 @@ async function rasterizeDocxThumbnailSurface(params) {
   return surface;
 }
 function blitDocxThumbnailSurface(surface, canvas, resolution) {
-  canvas.width = Math.max(1, Math.round(resolution.pixelWidthPx));
-  canvas.height = Math.max(1, Math.round(resolution.pixelHeightPx));
-  canvas.style.width = `${Math.max(1, Math.round(resolution.widthPx))}px`;
-  canvas.style.height = `${Math.max(1, Math.round(resolution.heightPx))}px`;
+  const pixelWidth = Math.max(1, Math.round(resolution.pixelWidthPx));
+  const pixelHeight = Math.max(1, Math.round(resolution.pixelHeightPx));
+  const cssWidth = `${Math.max(1, Math.round(resolution.widthPx))}px`;
+  const cssHeight = `${Math.max(1, Math.round(resolution.heightPx))}px`;
+  let bufferResized = false;
+  if (canvas.width !== pixelWidth) {
+    canvas.width = pixelWidth;
+    bufferResized = true;
+  }
+  if (canvas.height !== pixelHeight) {
+    canvas.height = pixelHeight;
+    bufferResized = true;
+  }
+  if (canvas.style.width !== cssWidth) {
+    canvas.style.width = cssWidth;
+  }
+  if (canvas.style.height !== cssHeight) {
+    canvas.style.height = cssHeight;
+  }
   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);
+  if (!bufferResized) {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
   context.drawImage(surface, 0, 0, canvas.width, canvas.height);
 }
 var DocxThumbnailSurfaceCache = class {
@@ -4611,6 +4976,7 @@ var SerialIdleTaskQueue = class {
   now;
   pumpScheduled = false;
   running = false;
+  nextSequence = 0;
   constructor(options) {
     this.scheduleTask = options?.scheduleTask ?? defaultScheduleTask;
     this.scheduleDelayed = options?.scheduleDelayed ?? defaultScheduleDelayed;
@@ -4620,14 +4986,23 @@ var SerialIdleTaskQueue = class {
   get pendingCount() {
     return this.pending.length;
   }
-  enqueue(key, run) {
+  enqueue(key, run, options) {
+    const priority = Number.isFinite(options?.priority) ? Number(options?.priority) : 0;
     return new Promise((resolve) => {
       const existing = this.pending.find((entry) => entry.key === key);
       if (existing) {
         existing.run = run;
         existing.resolvers.push(resolve);
+        existing.priority = Math.min(existing.priority, priority);
       } else {
-        this.pending.push({ key, run, resolvers: [resolve] });
+        this.pending.push({
+          key,
+          run,
+          resolvers: [resolve],
+          priority,
+          sequence: this.nextSequence
+        });
+        this.nextSequence += 1;
       }
       this.schedulePump();
     });
@@ -4672,6 +5047,8 @@ var SerialIdleTaskQueue = class {
     }
     const now = this.now();
     let earliestWaitMs;
+    let bestIndex = -1;
+    let bestEntry;
     for (let index = 0; index < this.pending.length; index += 1) {
       const candidate = this.pending[index];
       if (!candidate) {
@@ -4680,11 +5057,18 @@ var SerialIdleTaskQueue = class {
       const lastRunAt = this.lastRunAtByKey.get(candidate.key);
       const waitMs = lastRunAt === void 0 ? 0 : lastRunAt + this.minTaskIntervalMs - now;
       if (waitMs <= 0) {
-        this.pending.splice(index, 1);
-        return { entry: candidate };
+        if (!bestEntry || candidate.priority < bestEntry.priority || candidate.priority === bestEntry.priority && candidate.sequence < bestEntry.sequence) {
+          bestEntry = candidate;
+          bestIndex = index;
+        }
+        continue;
       }
       earliestWaitMs = earliestWaitMs === void 0 ? waitMs : Math.min(earliestWaitMs, waitMs);
     }
+    if (bestEntry && bestIndex >= 0) {
+      this.pending.splice(bestIndex, 1);
+      return { entry: bestEntry };
+    }
     return earliestWaitMs === void 0 ? void 0 : { retryDelayMs: earliestWaitMs };
   }
   async runNext() {
@@ -23683,13 +24067,14 @@ function ensureDocxViewerPageSurfaceRegistry(editor) {
       pageElements: /* @__PURE__ */ new Map(),
       pageContentKeys: /* @__PURE__ */ new Map(),
       pageSizes: /* @__PURE__ */ new Map(),
+      pageThumbnailSnapshots: /* @__PURE__ */ new Map(),
       listeners: /* @__PURE__ */ new Set()
     };
     docxViewerPageSurfaceRegistryByEditor.set(owner, registry);
   }
   return registry;
 }
-function syncDocxViewerPageSurfaceContentKeys(editor, contentKeysByPage, pageSizesByPage = []) {
+function syncDocxViewerPageSurfaceContentKeys(editor, contentKeysByPage, pageSizesByPage = [], thumbnailSnapshotsByPage = []) {
   const registry = ensureDocxViewerPageSurfaceRegistry(editor);
   let changed = false;
   contentKeysByPage.forEach((contentKey, pageIndex) => {
@@ -23707,6 +24092,20 @@ function syncDocxViewerPageSurfaceContentKeys(editor, contentKeysByPage, pageSiz
       changed = true;
     }
   });
+  thumbnailSnapshotsByPage.forEach((snapshot, pageIndex) => {
+    const previous = registry.pageThumbnailSnapshots.get(pageIndex);
+    if (!snapshot) {
+      if (previous) {
+        registry.pageThumbnailSnapshots.delete(pageIndex);
+        changed = true;
+      }
+      return;
+    }
+    if (previous?.key !== snapshot.key) {
+      registry.pageThumbnailSnapshots.set(pageIndex, snapshot);
+      changed = true;
+    }
+  });
   registry.pageContentKeys.forEach((_, pageIndex) => {
     if (pageIndex >= contentKeysByPage.length) {
       registry.pageContentKeys.delete(pageIndex);
@@ -23719,6 +24118,12 @@ function syncDocxViewerPageSurfaceContentKeys(editor, contentKeysByPage, pageSiz
       changed = true;
     }
   });
+  registry.pageThumbnailSnapshots.forEach((_, pageIndex) => {
+    if (pageIndex >= thumbnailSnapshotsByPage.length) {
+      registry.pageThumbnailSnapshots.delete(pageIndex);
+      changed = true;
+    }
+  });
   if (changed) {
     notifyDocxViewerPageSurfaceSubscribers(registry);
   }
@@ -23799,6 +24204,359 @@ function resolveDocxViewerPageSurfaceSize(element, fallbackWidthPx, fallbackHeig
     heightPx: Math.max(1, Math.round(fallbackHeightPx))
   };
 }
+var DOCX_DIRECT_THUMBNAIL_MAX_ELEMENTS_PER_PAGE = 260;
+var DOCX_DIRECT_THUMBNAIL_MAX_TEXT_RUNS = 28;
+var DOCX_DIRECT_THUMBNAIL_MAX_TEXT_CHARS = 900;
+var DOCX_DIRECT_THUMBNAIL_MAX_TABLE_CELLS = 220;
+var DOCX_DIRECT_THUMBNAIL_MAX_CELL_TEXT_CHARS = 120;
+function docxThumbnailCssNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  return 0;
+}
+function normalizeDocxThumbnailColor(value) {
+  const normalized = value?.trim();
+  if (!normalized || normalized.toLowerCase() === "auto") {
+    return void 0;
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(normalized)) {
+    return `#${normalized}`;
+  }
+  return normalized;
+}
+function docxThumbnailTextRunStylesMatch(left, right) {
+  return left.bold === right.bold && left.italic === right.italic && left.color === right.color && left.backgroundColor === right.backgroundColor && left.fontSizePx === right.fontSizePx && left.fontFamily === right.fontFamily;
+}
+function appendDocxThumbnailTextRun(runs, run, remaining) {
+  if (remaining.chars <= 0 || runs.length >= DOCX_DIRECT_THUMBNAIL_MAX_TEXT_RUNS) {
+    return;
+  }
+  const text = run.text.slice(0, remaining.chars);
+  if (!text) {
+    return;
+  }
+  remaining.chars -= text.length;
+  const nextRun = { ...run, text };
+  const previous = runs[runs.length - 1];
+  if (previous && docxThumbnailTextRunStylesMatch(previous, nextRun)) {
+    previous.text += nextRun.text;
+    return;
+  }
+  runs.push(nextRun);
+}
+function docxThumbnailFallbackHeadingRunStyle(paragraph) {
+  const headingLevel = paragraph.style?.headingLevel;
+  return headingLevel && headingLevel >= 1 && headingLevel <= 6 ? DEFAULT_WORD_HEADING_RUN_STYLES[headingLevel] : void 0;
+}
+function docxThumbnailTextRunsFromParagraph(paragraph, documentTheme, maxChars = DOCX_DIRECT_THUMBNAIL_MAX_TEXT_CHARS) {
+  const runs = [];
+  const remaining = { chars: maxChars };
+  const fallbackHeadingStyle = docxThumbnailFallbackHeadingRunStyle(paragraph);
+  const fallbackFontFamily = cssFontFamily(fallbackHeadingStyle?.fontFamily) ?? cssFontFamily(paragraphDominantFontFamily(paragraph));
+  paragraph.children.forEach((child) => {
+    if (remaining.chars <= 0) {
+      return;
+    }
+    const style = child.type === "text" || child.type === "form-field" ? child.style : void 0;
+    const text = child.type === "text" ? child.text : child.type === "form-field" ? formFieldDisplayValue2(child) : child.type === "image" ? child.alt || "[image]" : "";
+    appendDocxThumbnailTextRun(
+      runs,
+      {
+        text,
+        bold: style?.bold ?? fallbackHeadingStyle?.bold,
+        italic: style?.italic ?? fallbackHeadingStyle?.italic,
+        color: normalizeDocxThumbnailColor(
+          themedRunColor(style?.color ?? fallbackHeadingStyle?.color, documentTheme)
+        ),
+        backgroundColor: normalizeDocxThumbnailColor(
+          style?.backgroundColor ?? resolveHighlightColor(style?.highlight)
+        ),
+        fontSizePx: style?.fontSizePt && style.fontSizePt > 0 ? Math.max(6, style.fontSizePt * 96 / 72) : fallbackHeadingStyle?.fontSizePt ? Math.max(6, fallbackHeadingStyle.fontSizePt * 96 / 72) : paragraphBaseFontSizePx(paragraph),
+        fontFamily: cssFontFamily(style?.fontFamily) ?? fallbackFontFamily
+      },
+      remaining
+    );
+  });
+  return runs;
+}
+function docxThumbnailCellTextRuns(cell, documentTheme) {
+  const paragraph = tableCellParagraphsRecursively(cell.nodes).find(
+    (candidate) => paragraphText(candidate).trim().length > 0
+  );
+  if (!paragraph) {
+    return void 0;
+  }
+  const runs = docxThumbnailTextRunsFromParagraph(
+    paragraph,
+    documentTheme,
+    DOCX_DIRECT_THUMBNAIL_MAX_CELL_TEXT_CHARS
+  );
+  return runs.length > 0 ? runs : void 0;
+}
+function buildDocxThumbnailParagraphElements(params) {
+  const {
+    paragraph,
+    segment,
+    contentLeftPx,
+    contentWidthPx,
+    yPx,
+    heightPx,
+    numberingDefinitions,
+    docGridLinePitchPx,
+    documentTheme
+  } = params;
+  const blockStyle = paragraphBlockStyle(
+    paragraph,
+    numberingDefinitions,
+    void 0,
+    docGridLinePitchPx
+  );
+  const paragraphLineRange = segment.paragraphLineRange;
+  const marginTopPx = paragraphLineRange && paragraphLineRange.startLineIndex > 0 ? 0 : Math.max(0, docxThumbnailCssNumber(blockStyle.marginTop));
+  const marginBottomPx = paragraphLineRange && paragraphLineRange.endLineIndex < paragraphLineRange.totalLineCount ? 0 : Math.max(0, docxThumbnailCssNumber(blockStyle.marginBottom));
+  const marginLeftPx = docxThumbnailCssNumber(blockStyle.marginLeft);
+  const marginRightPx = Math.max(0, docxThumbnailCssNumber(blockStyle.marginRight));
+  const xPx = contentLeftPx + marginLeftPx;
+  const widthPx = Math.max(8, contentWidthPx - marginLeftPx - marginRightPx);
+  const bodyYPx = yPx + marginTopPx;
+  const bodyHeightPx = Math.max(1, heightPx - marginTopPx - marginBottomPx);
+  const runs = docxThumbnailTextRunsFromParagraph(paragraph, documentTheme);
+  const elements = [];
+  elements.push({
+    kind: "paragraph",
+    xPx,
+    yPx: bodyYPx,
+    widthPx,
+    heightPx: bodyHeightPx,
+    align: paragraph.style?.align,
+    backgroundColor: normalizeDocxThumbnailColor(
+      paragraph.style?.backgroundColor
+    ),
+    lineHeightPx: paragraphLineRange?.lineHeightPx ?? estimateParagraphLineHeightPx(paragraph, docGridLinePitchPx),
+    startLineIndex: paragraphLineRange?.startLineIndex,
+    runs
+  });
+  const hasVisibleText = runs.some((run) => run.text.trim().length > 0);
+  if (!hasVisibleText) {
+    const imageRuns = paragraph.children.filter(
+      (child) => child.type === "image"
+    );
+    imageRuns.slice(0, 4).forEach((imageRun) => {
+      const imageWidthPx = Math.max(18, imageRun.widthPx ?? widthPx * 0.5);
+      const imageHeightPx = Math.max(18, imageRun.heightPx ?? bodyHeightPx * 0.5);
+      const scale = Math.min(
+        1,
+        (widthPx - 4) / imageWidthPx,
+        (bodyHeightPx - 4) / imageHeightPx
+      );
+      elements.push({
+        kind: "image-placeholder",
+        xPx: xPx + 2,
+        yPx: bodyYPx + 2,
+        widthPx: Math.max(12, imageWidthPx * scale),
+        heightPx: Math.max(12, imageHeightPx * scale)
+      });
+    });
+  }
+  return elements;
+}
+function buildDocxThumbnailTableElement(params) {
+  const {
+    table,
+    segment,
+    contentLeftPx,
+    contentWidthPx,
+    contentHeightPx,
+    yPx,
+    heightPx,
+    numberingDefinitions,
+    docGridLinePitchPx,
+    documentTheme
+  } = params;
+  const columnCount = tableColumnCount(table);
+  const tableIndentPx = twipsToSignedPixels(table.style?.indentTwips) ?? 0;
+  const tableWidthPx = twipsToPixels(table.style?.widthTwips);
+  const definedWidthsTwips = columnWidthsFromTableDefinition(table, columnCount);
+  const rawTableColumnWidthsPx = definedWidthsTwips && definedWidthsTwips.length > 0 ? normalizeColumnWidthsPx(
+    definedWidthsTwips.map((widthTwips) => twipsToPixels(widthTwips) ?? 0),
+    columnCount,
+    tableWidthPx,
+    1
+  ) : defaultColumnWidthsPx(columnCount, tableWidthPx);
+  const rawResolvedTableWidthPx = tableWidthPx ?? rawTableColumnWidthsPx.reduce((sum, widthPx) => sum + widthPx, 0);
+  const maxTableWidthPx = Math.max(
+    24,
+    contentWidthPx - tableIndentPx - resolveCollapsedTableHorizontalOuterBleedPx(table, columnCount)
+  );
+  const resolvedTableWidthPx = clampTableWidthPx(
+    rawResolvedTableWidthPx,
+    maxTableWidthPx
+  );
+  const { columnWidthsPx } = resolveFittedTableColumnWidths(
+    table,
+    rawTableColumnWidthsPx,
+    resolvedTableWidthPx
+  );
+  const rowHeightsPx = estimateTableRowHeightsPx(
+    table,
+    contentWidthPx,
+    numberingDefinitions,
+    docGridLinePitchPx,
+    contentHeightPx
+  );
+  const startRowIndex = Math.max(
+    0,
+    segment.tableRowSlice?.rowIndex ?? segment.tableRowRange?.startRowIndex ?? 0
+  );
+  const endRowIndex = Math.min(
+    table.rows.length,
+    segment.tableRowSlice ? startRowIndex + 1 : segment.tableRowRange?.endRowIndex ?? table.rows.length
+  );
+  const cells = [];
+  let rowYPx = segment.tableRowSlice ? -Math.max(0, segment.tableRowSlice.startOffsetPx) : 0;
+  for (let rowIndex = startRowIndex; rowIndex < endRowIndex && cells.length < DOCX_DIRECT_THUMBNAIL_MAX_TABLE_CELLS; rowIndex += 1) {
+    const row = table.rows[rowIndex];
+    if (!row) {
+      continue;
+    }
+    const rowHeightPx = segment.tableRowSlice && rowIndex === segment.tableRowSlice.rowIndex ? Math.max(1, segment.tableRowSlice.totalRowHeightPx) : Math.max(1, rowHeightsPx[rowIndex] ?? MIN_PARAGRAPH_LINE_HEIGHT_PX);
+    let columnCursor = 0;
+    row.cells.forEach((cell) => {
+      if (cells.length >= DOCX_DIRECT_THUMBNAIL_MAX_TABLE_CELLS) {
+        return;
+      }
+      const span = cell.style?.gridSpan && cell.style.gridSpan > 1 ? cell.style.gridSpan : 1;
+      const xPx = columnWidthsPx.slice(0, columnCursor).reduce((sum, widthPx2) => sum + widthPx2, 0);
+      const widthPx = columnWidthsPx.slice(columnCursor, columnCursor + span).reduce((sum, widthPx2) => sum + widthPx2, 0);
+      columnCursor += span;
+      cells.push({
+        xPx,
+        yPx: rowYPx,
+        widthPx: Math.max(1, widthPx),
+        heightPx: rowHeightPx,
+        backgroundColor: normalizeDocxThumbnailColor(
+          cell.style?.backgroundColor ?? row.style?.backgroundColor
+        ),
+        runs: docxThumbnailCellTextRuns(cell, documentTheme)
+      });
+    });
+    rowYPx += rowHeightPx;
+  }
+  if (cells.length === 0) {
+    return void 0;
+  }
+  return {
+    kind: "table",
+    xPx: contentLeftPx + tableIndentPx,
+    yPx,
+    widthPx: Math.max(1, resolvedTableWidthPx),
+    heightPx: Math.max(1, heightPx),
+    cells
+  };
+}
+function buildDocxPageThumbnailRenderSnapshotEntries(params) {
+  const {
+    model,
+    pageNodeSegmentsByPage,
+    pageSectionInfoByIndex,
+    contentKeysByPage,
+    fallbackLayout,
+    documentTheme,
+    docGridLinePitchPxByNodeIndex,
+    numberingDefinitions
+  } = params;
+  return pageNodeSegmentsByPage.map((pageSegments, pageIndex) => {
+    const key = `${contentKeysByPage[pageIndex] ?? ""}|theme:${documentTheme}`;
+    let cachedSnapshot;
+    return {
+      key,
+      getSnapshot: () => {
+        if (cachedSnapshot) {
+          return cachedSnapshot;
+        }
+        const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? fallbackLayout;
+        const contentLeftPx = pageLayout.marginsPx.left;
+        const contentTopPx = pageLayout.marginsPx.top;
+        const contentWidthPx = Math.max(
+          1,
+          pageLayout.pageWidthPx - pageLayout.marginsPx.left - pageLayout.marginsPx.right
+        );
+        const contentHeightPx = Math.max(
+          1,
+          pageLayout.pageHeightPx - pageLayout.marginsPx.top - pageLayout.marginsPx.bottom
+        );
+        const elements = [];
+        let yPx = contentTopPx;
+        for (const segment of pageSegments) {
+          if (elements.length >= DOCX_DIRECT_THUMBNAIL_MAX_ELEMENTS_PER_PAGE) {
+            break;
+          }
+          const node = model.nodes[segment.nodeIndex];
+          if (!node) {
+            continue;
+          }
+          const docGridLinePitchPx = docGridLinePitchPxByNodeIndex.get(
+            segment.nodeIndex
+          );
+          const segmentHeightPx = estimateRenderedPageSegmentHeightPx(
+            node,
+            segment,
+            model,
+            contentWidthPx,
+            numberingDefinitions,
+            docGridLinePitchPx
+          );
+          if (node.type === "paragraph" && !segment.tableRowRange) {
+            elements.push(
+              ...buildDocxThumbnailParagraphElements({
+                paragraph: node,
+                segment,
+                contentLeftPx,
+                contentTopPx,
+                contentWidthPx,
+                yPx,
+                heightPx: segmentHeightPx,
+                numberingDefinitions,
+                docGridLinePitchPx,
+                documentTheme
+              })
+            );
+          } else if (node.type === "table") {
+            const tableElement = buildDocxThumbnailTableElement({
+              table: node,
+              segment,
+              contentLeftPx,
+              contentWidthPx,
+              contentHeightPx,
+              yPx,
+              heightPx: segmentHeightPx,
+              numberingDefinitions,
+              docGridLinePitchPx,
+              documentTheme
+            });
+            if (tableElement) {
+              elements.push(tableElement);
+            }
+          }
+          yPx += Math.max(1, segmentHeightPx);
+        }
+        cachedSnapshot = {
+          key,
+          sourceWidthPx: pageLayout.pageWidthPx,
+          sourceHeightPx: pageLayout.pageHeightPx,
+          pageBackgroundColor: documentTheme === "dark" ? "#111827" : "#ffffff",
+          elements
+        };
+        return cachedSnapshot;
+      }
+    };
+  });
+}
 function DocxDetachedThumbnailPageSurface({
   editor,
   pageIndex
@@ -23824,17 +24582,19 @@ var DocxDetachedThumbnailSurfaceRenderer = class {
   host;
   root;
   activePageIndex;
+  activeRenderKey;
   async renderPageSurface(params) {
     if (typeof document === "undefined" || typeof window === "undefined") {
       return void 0;
     }
-    const { editor, registry, pageIndex } = params;
+    const { editor, registry, pageIndex, renderKey } = params;
     await this.ensureRoot();
     if (!this.root) {
       return void 0;
     }
-    if (this.activePageIndex !== pageIndex) {
+    if (this.activePageIndex !== pageIndex || this.activeRenderKey !== renderKey) {
       this.activePageIndex = pageIndex;
+      this.activeRenderKey = renderKey;
       this.root.render(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           DocxDetachedThumbnailPageSurface,
@@ -23857,6 +24617,7 @@ var DocxDetachedThumbnailSurfaceRenderer = class {
     }
     this.host = void 0;
     this.activePageIndex = void 0;
+    this.activeRenderKey = void 0;
   }
   async ensureRoot() {
     if (this.root) {
@@ -23897,8 +24658,42 @@ var DocxDetachedThumbnailSurfaceRenderer = class {
     return pageElement?.isConnected ? pageElement : void 0;
   }
 };
-var DOCX_THUMBNAIL_SURFACE_CACHE_MAX_ENTRIES = 32;
+var DOCX_THUMBNAIL_SURFACE_CACHE_MAX_ENTRIES = 64;
 var DOCX_THUMBNAIL_MIN_RASTER_INTERVAL_MS = 200;
+var DOCX_THUMBNAIL_RENDER_PRIORITY_VISIBLE = 0;
+var DOCX_THUMBNAIL_RENDER_PRIORITY_ATTACHED = 1;
+var DOCX_THUMBNAIL_RENDER_PRIORITY_PREFETCH = 2;
+function normalizeDocxThumbnailMinRasterIntervalMs(value) {
+  return Number.isFinite(value) && Number(value) >= 0 ? Number(value) : DOCX_THUMBNAIL_MIN_RASTER_INTERVAL_MS;
+}
+function normalizeDocxThumbnailPageIndexes(indexes, totalPages) {
+  if (!indexes?.length || totalPages <= 0) {
+    return [];
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const normalized = [];
+  indexes.forEach((pageIndex) => {
+    if (!Number.isFinite(pageIndex)) {
+      return;
+    }
+    const roundedPageIndex = Math.trunc(pageIndex);
+    if (roundedPageIndex < 0 || roundedPageIndex >= totalPages || seen.has(roundedPageIndex)) {
+      return;
+    }
+    seen.add(roundedPageIndex);
+    normalized.push(roundedPageIndex);
+  });
+  return normalized;
+}
+function docxThumbnailPageIndexesKey(pageIndexes) {
+  return pageIndexes.join(",");
+}
+function docxThumbnailCanvasQueueKey(canvasId) {
+  return `canvas:${canvasId}`;
+}
+function docxThumbnailPrefetchQueueKey(pageIndex) {
+  return `prefetch:${pageIndex}`;
+}
 function resolveDocxPageThumbnailResolution(options) {
   const safeSourceWidthPx = Math.max(1, Math.round(options.sourceWidthPx));
   const safeSourceHeightPx = Math.max(1, Math.round(options.sourceHeightPx));
@@ -23978,6 +24773,12 @@ function useDocxPageThumbnails(editor, options = {}) {
   const lastPaintedThumbnailKeyByCanvasRef = React.useRef(
     /* @__PURE__ */ new WeakMap()
   );
+  const thumbnailQueueKeyByCanvasRef = React.useRef(
+    /* @__PURE__ */ new WeakMap()
+  );
+  const nextThumbnailCanvasQueueIdRef = React.useRef(0);
+  const queuedPrefetchThumbnailKeysRef = React.useRef(/* @__PURE__ */ new Set());
+  const thumbnailMinRasterIntervalMs = normalizeDocxThumbnailMinRasterIntervalMs(options.minRasterIntervalMs);
   const ensureThumbnailSurfaceCache = React.useCallback(() => {
     if (!thumbnailSurfaceCacheRef.current) {
       thumbnailSurfaceCacheRef.current = new DocxThumbnailSurfaceCache(
@@ -23989,18 +24790,50 @@ function useDocxPageThumbnails(editor, options = {}) {
   const ensureThumbnailRasterQueue = React.useCallback(() => {
     if (!thumbnailRasterQueueRef.current) {
       thumbnailRasterQueueRef.current = new SerialIdleTaskQueue({
-        minTaskIntervalMs: DOCX_THUMBNAIL_MIN_RASTER_INTERVAL_MS
+        minTaskIntervalMs: thumbnailMinRasterIntervalMs
       });
     }
     return thumbnailRasterQueueRef.current;
-  }, []);
+  }, [thumbnailMinRasterIntervalMs]);
+  const thumbnailQueueKeyForCanvas = React.useCallback(
+    (canvas) => {
+      const existing = thumbnailQueueKeyByCanvasRef.current.get(canvas);
+      if (existing) {
+        return existing;
+      }
+      const nextKey = docxThumbnailCanvasQueueKey(
+        nextThumbnailCanvasQueueIdRef.current
+      );
+      nextThumbnailCanvasQueueIdRef.current += 1;
+      thumbnailQueueKeyByCanvasRef.current.set(canvas, nextKey);
+      return nextKey;
+    },
+    []
+  );
+  React.useEffect(() => {
+    thumbnailRasterQueueRef.current?.clear();
+    thumbnailRasterQueueRef.current = void 0;
+    queuedPrefetchThumbnailKeysRef.current.clear();
+  }, [thumbnailMinRasterIntervalMs]);
   React.useEffect(() => {
     thumbnailSurfaceCacheRef.current?.clear();
     thumbnailRasterQueueRef.current?.clear();
     detachedThumbnailSurfaceRendererRef.current?.clear();
     detachedThumbnailSurfaceRendererRef.current = void 0;
     lastPaintedThumbnailKeyByCanvasRef.current = /* @__PURE__ */ new WeakMap();
+    thumbnailQueueKeyByCanvasRef.current = /* @__PURE__ */ new WeakMap();
+    nextThumbnailCanvasQueueIdRef.current = 0;
+    queuedPrefetchThumbnailKeysRef.current.clear();
   }, [editor.documentLoadNonce, pageSurfaceRegistryOwner]);
+  React.useEffect(() => {
+    detachedThumbnailSurfaceRendererRef.current?.clear();
+    detachedThumbnailSurfaceRendererRef.current = void 0;
+  }, [
+    editor.documentTheme,
+    editor.model,
+    editor.showComments,
+    editor.showTrackedChanges
+  ]);
   React.useEffect(
     () => () => {
       detachedThumbnailSurfaceRendererRef.current?.clear();
@@ -24025,6 +24858,125 @@ function useDocxPageThumbnails(editor, options = {}) {
     },
     [editor.documentTheme, pageSurfaceRegistry, thumbnailResolutionOptionsKey]
   );
+  const totalThumbnailPages = Math.max(1, editor.totalPages);
+  const visibleThumbnailPageIndexes = React.useMemo(
+    () => normalizeDocxThumbnailPageIndexes(
+      options.renderWindow?.visiblePageIndexes,
+      totalThumbnailPages
+    ),
+    [options.renderWindow?.visiblePageIndexes, totalThumbnailPages]
+  );
+  const prefetchThumbnailPageIndexes = React.useMemo(
+    () => normalizeDocxThumbnailPageIndexes(
+      options.renderWindow?.prefetchPageIndexes,
+      totalThumbnailPages
+    ),
+    [options.renderWindow?.prefetchPageIndexes, totalThumbnailPages]
+  );
+  const visibleThumbnailPageIndexesKey = docxThumbnailPageIndexesKey(
+    visibleThumbnailPageIndexes
+  );
+  const prefetchThumbnailPageIndexesKey = docxThumbnailPageIndexesKey(
+    prefetchThumbnailPageIndexes
+  );
+  const visibleThumbnailPageIndexSet = React.useMemo(
+    () => new Set(visibleThumbnailPageIndexes),
+    [visibleThumbnailPageIndexesKey]
+  );
+  const thumbnailRenderPriorityForPage = React.useCallback(
+    (pageIndex, fallbackPriority = DOCX_THUMBNAIL_RENDER_PRIORITY_ATTACHED) => visibleThumbnailPageIndexSet.has(pageIndex) ? DOCX_THUMBNAIL_RENDER_PRIORITY_VISIBLE : fallbackPriority,
+    [visibleThumbnailPageIndexSet]
+  );
+  const renderPageThumbnailSurface = React.useCallback(
+    async (pageIndex, renderOptions) => {
+      const force = renderOptions?.force === true;
+      const runSkipKey = thumbnailSkipKeyForPage(pageIndex);
+      const detachedRenderKey = [
+        runSkipKey ?? `load:${editor.documentLoadNonce}`,
+        editor.showComments ? "comments:1" : "comments:0",
+        editor.showTrackedChanges ? "tracked:1" : "tracked:0"
+      ].join("|");
+      const thumbnailSnapshotEntry = pageSurfaceRegistry.pageThumbnailSnapshots.get(pageIndex);
+      const fallbackSourceSize = resolveDocxViewerRegisteredPageSurfaceSize(
+        pageSurfaceRegistry,
+        pageIndex,
+        fallbackLayout.pageWidthPx,
+        fallbackLayout.pageHeightPx
+      );
+      const resolution = resolveDocxPageThumbnailResolution({
+        sourceWidthPx: fallbackSourceSize.widthPx,
+        sourceHeightPx: fallbackSourceSize.heightPx,
+        resolution: options.resolution,
+        maxWidthPx: options.maxWidthPx,
+        maxHeightPx: options.maxHeightPx,
+        pixelRatio: options.pixelRatio
+      });
+      const surfaceKey = runSkipKey === void 0 ? void 0 : `${runSkipKey}|${fallbackSourceSize.widthPx}x${fallbackSourceSize.heightPx}|${resolution.pixelWidthPx}x${resolution.pixelHeightPx}`;
+      const surfaceCache = ensureThumbnailSurfaceCache();
+      let surface = !force && surfaceKey !== void 0 ? surfaceCache.get(surfaceKey) : void 0;
+      if (!surface) {
+        const thumbnailSnapshot = thumbnailSnapshotEntry?.getSnapshot();
+        if (thumbnailSnapshot) {
+          surface = renderDocxThumbnailSnapshotSurface({
+            snapshot: thumbnailSnapshot,
+            widthPx: resolution.widthPx,
+            heightPx: resolution.heightPx,
+            pixelWidthPx: resolution.pixelWidthPx,
+            pixelHeightPx: resolution.pixelHeightPx
+          });
+          if (surfaceKey !== void 0) {
+            surfaceCache.set(surfaceKey, surface);
+          }
+          return { surface, resolution, runSkipKey };
+        }
+        let livePageElement = pageSurfaceRegistry.pageElements.get(pageIndex);
+        if (!livePageElement || !livePageElement.isConnected) {
+          if (!detachedThumbnailSurfaceRendererRef.current) {
+            detachedThumbnailSurfaceRendererRef.current = new DocxDetachedThumbnailSurfaceRenderer();
+          }
+          livePageElement = await detachedThumbnailSurfaceRendererRef.current.renderPageSurface({
+            editor,
+            registry: pageSurfaceRegistry,
+            pageIndex,
+            renderKey: detachedRenderKey
+          });
+        }
+        if (!livePageElement || !livePageElement.isConnected) {
+          return void 0;
+        }
+        const sourceSize = resolveDocxViewerPageSurfaceSize(
+          livePageElement,
+          fallbackSourceSize.widthPx,
+          fallbackSourceSize.heightPx
+        );
+        surface = await rasterizeDocxThumbnailSurface({
+          pageElement: livePageElement,
+          sourceWidthPx: sourceSize.widthPx,
+          sourceHeightPx: sourceSize.heightPx,
+          widthPx: resolution.widthPx,
+          heightPx: resolution.heightPx,
+          pixelWidthPx: resolution.pixelWidthPx,
+          pixelHeightPx: resolution.pixelHeightPx
+        });
+        if (surfaceKey !== void 0) {
+          surfaceCache.set(surfaceKey, surface);
+        }
+      }
+      return { surface, resolution, runSkipKey };
+    },
+    [
+      ensureThumbnailSurfaceCache,
+      fallbackLayout.pageHeightPx,
+      fallbackLayout.pageWidthPx,
+      options.resolution,
+      options.maxHeightPx,
+      options.maxWidthPx,
+      options.pixelRatio,
+      pageSurfaceRegistry,
+      thumbnailSkipKeyForPage,
+      editor
+    ]
+  );
   const renderPageThumbnailToCanvas = React.useCallback(
     async (pageIndex, canvas, renderOptions) => {
       if (options.disabled) {
@@ -24041,74 +24993,19 @@ function useDocxPageThumbnails(editor, options = {}) {
         updatePageThumbnailState(pageIndex, "ready");
         return;
       }
-      updatePageThumbnailState(pageIndex, "rendering");
-      await ensureThumbnailRasterQueue().enqueue(targetCanvas, async () => {
+      const paintIntoTarget = async () => {
         if (requiresAttachedTarget && attachedCanvasByPageRef.current.get(pageIndex) !== targetCanvas) {
           return;
         }
-        const runSkipKey = thumbnailSkipKeyForPage(pageIndex);
-        const fallbackSourceSize = resolveDocxViewerRegisteredPageSurfaceSize(
-          pageSurfaceRegistry,
-          pageIndex,
-          fallbackLayout.pageWidthPx,
-          fallbackLayout.pageHeightPx
-        );
-        const resolution = resolveDocxPageThumbnailResolution({
-          sourceWidthPx: fallbackSourceSize.widthPx,
-          sourceHeightPx: fallbackSourceSize.heightPx,
-          resolution: options.resolution,
-          maxWidthPx: options.maxWidthPx,
-          maxHeightPx: options.maxHeightPx,
-          pixelRatio: options.pixelRatio
-        });
-        const surfaceKey = runSkipKey === void 0 ? void 0 : `${runSkipKey}|${fallbackSourceSize.widthPx}x${fallbackSourceSize.heightPx}|${resolution.pixelWidthPx}x${resolution.pixelHeightPx}`;
-        const surfaceCache = ensureThumbnailSurfaceCache();
         try {
-          let surface = !force && surfaceKey !== void 0 ? surfaceCache.get(surfaceKey) : void 0;
-          if (!surface) {
-            let livePageElement = pageSurfaceRegistry.pageElements.get(pageIndex);
-            let renderedDetachedSurface = false;
-            try {
-              if (!livePageElement || !livePageElement.isConnected) {
-                if (!detachedThumbnailSurfaceRendererRef.current) {
-                  detachedThumbnailSurfaceRendererRef.current = new DocxDetachedThumbnailSurfaceRenderer();
-                }
-                livePageElement = await detachedThumbnailSurfaceRendererRef.current.renderPageSurface(
-                  {
-                    editor,
-                    registry: pageSurfaceRegistry,
-                    pageIndex
-                  }
-                );
-                renderedDetachedSurface = true;
-              }
-              if (!livePageElement || !livePageElement.isConnected) {
-                updatePageThumbnailState(pageIndex, "unavailable");
-                return;
-              }
-              const sourceSize = resolveDocxViewerPageSurfaceSize(
-                livePageElement,
-                fallbackSourceSize.widthPx,
-                fallbackSourceSize.heightPx
-              );
-              surface = await rasterizeDocxThumbnailSurface({
-                pageElement: livePageElement,
-                sourceWidthPx: sourceSize.widthPx,
-                sourceHeightPx: sourceSize.heightPx,
-                widthPx: resolution.widthPx,
-                heightPx: resolution.heightPx,
-                pixelWidthPx: resolution.pixelWidthPx,
-                pixelHeightPx: resolution.pixelHeightPx
-              });
-              if (surfaceKey !== void 0) {
-                surfaceCache.set(surfaceKey, surface);
-              }
-            } finally {
-              if (renderedDetachedSurface) {
-                detachedThumbnailSurfaceRendererRef.current?.clear();
-              }
-            }
+          const rendered = await renderPageThumbnailSurface(pageIndex, {
+            force
+          });
+          if (!rendered) {
+            updatePageThumbnailState(pageIndex, "unavailable");
+            return;
           }
+          const { surface, resolution, runSkipKey } = rendered;
           blitDocxThumbnailSurface(surface, targetCanvas, resolution);
           if (runSkipKey !== void 0) {
             lastPaintedThumbnailKeyByCanvasRef.current.set(
@@ -24124,33 +25021,116 @@ function useDocxPageThumbnails(editor, options = {}) {
             error instanceof Error ? error : new Error("Failed to render DOCX page thumbnail.")
           );
         }
-      });
+      };
+      updatePageThumbnailState(pageIndex, "rendering");
+      if (pageSurfaceRegistry.pageThumbnailSnapshots.has(pageIndex)) {
+        await paintIntoTarget();
+        return;
+      }
+      await ensureThumbnailRasterQueue().enqueue(
+        thumbnailQueueKeyForCanvas(targetCanvas),
+        paintIntoTarget,
+        {
+          priority: renderOptions?.priority ?? thumbnailRenderPriorityForPage(
+            pageIndex,
+            DOCX_THUMBNAIL_RENDER_PRIORITY_ATTACHED
+          )
+        }
+      );
     },
     [
       ensureThumbnailRasterQueue,
-      ensureThumbnailSurfaceCache,
-      fallbackLayout.pageHeightPx,
-      fallbackLayout.pageWidthPx,
       options.disabled,
-      options.resolution,
-      options.maxHeightPx,
-      options.maxWidthPx,
-      options.pixelRatio,
       pageSurfaceRegistry,
+      renderPageThumbnailSurface,
       thumbnailSkipKeyForPage,
-      updatePageThumbnailState,
-      editor
+      thumbnailQueueKeyForCanvas,
+      thumbnailRenderPriorityForPage,
+      updatePageThumbnailState
     ]
   );
+  const prefetchPageThumbnailSurface = React.useCallback(
+    async (pageIndex) => {
+      if (options.disabled) {
+        return;
+      }
+      const queueKey = docxThumbnailPrefetchQueueKey(pageIndex);
+      queuedPrefetchThumbnailKeysRef.current.add(queueKey);
+      await ensureThumbnailRasterQueue().enqueue(
+        queueKey,
+        async () => {
+          try {
+            await renderPageThumbnailSurface(pageIndex);
+          } catch {
+          }
+        },
+        { priority: DOCX_THUMBNAIL_RENDER_PRIORITY_PREFETCH }
+      );
+      queuedPrefetchThumbnailKeysRef.current.delete(queueKey);
+    },
+    [ensureThumbnailRasterQueue, options.disabled, renderPageThumbnailSurface]
+  );
   const requestAttachedThumbnailRenders = React.useCallback(
     async (renderOptions) => {
-      const tasks = [...attachedCanvasByPageRef.current.keys()].map(
-        (pageIndex) => renderPageThumbnailToCanvas(pageIndex, void 0, renderOptions)
+      const attachedPageIndexes = [
+        ...attachedCanvasByPageRef.current.keys()
+      ].sort((leftPageIndex, rightPageIndex) => {
+        const leftPriority = thumbnailRenderPriorityForPage(leftPageIndex);
+        const rightPriority = thumbnailRenderPriorityForPage(rightPageIndex);
+        return leftPriority - rightPriority || leftPageIndex - rightPageIndex;
+      });
+      const tasks = attachedPageIndexes.map(
+        (pageIndex) => renderPageThumbnailToCanvas(pageIndex, void 0, {
+          ...renderOptions,
+          priority: thumbnailRenderPriorityForPage(pageIndex)
+        })
       );
       await Promise.all(tasks);
     },
-    [renderPageThumbnailToCanvas]
+    [renderPageThumbnailToCanvas, thumbnailRenderPriorityForPage]
   );
+  const requestPrefetchThumbnailRenders = React.useCallback(async () => {
+    if (options.disabled) {
+      queuedPrefetchThumbnailKeysRef.current.forEach((queueKey) => {
+        thumbnailRasterQueueRef.current?.cancel(queueKey);
+      });
+      queuedPrefetchThumbnailKeysRef.current.clear();
+      return;
+    }
+    const requestedPrefetchKeys = new Set(
+      prefetchThumbnailPageIndexes.map(
+        (pageIndex) => docxThumbnailPrefetchQueueKey(pageIndex)
+      )
+    );
+    queuedPrefetchThumbnailKeysRef.current.forEach((queueKey) => {
+      if (!requestedPrefetchKeys.has(queueKey)) {
+        thumbnailRasterQueueRef.current?.cancel(queueKey);
+        queuedPrefetchThumbnailKeysRef.current.delete(queueKey);
+      }
+    });
+    const tasks = prefetchThumbnailPageIndexes.map(
+      (pageIndex) => prefetchPageThumbnailSurface(pageIndex)
+    );
+    await Promise.all(tasks);
+  }, [
+    options.disabled,
+    prefetchPageThumbnailSurface,
+    prefetchThumbnailPageIndexes
+  ]);
+  React.useEffect(() => {
+    void requestPrefetchThumbnailRenders();
+  }, [
+    editor.documentLoadNonce,
+    editor.documentTheme,
+    editor.model,
+    mountedPageElements,
+    options.maxHeightPx,
+    options.maxWidthPx,
+    options.pixelRatio,
+    options.resolution,
+    prefetchThumbnailPageIndexesKey,
+    requestPrefetchThumbnailRenders
+  ]);
   const rerenderAttachedThumbnails = React.useCallback(
     async () => requestAttachedThumbnailRenders({ force: true }),
     [requestAttachedThumbnailRenders]
@@ -24179,7 +25159,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     options.pixelRatio,
     requestAttachedThumbnailRenders
   ]);
-  const thumbnails = React.useMemo(() => {
+  const thumbnailGeometryItems = React.useMemo(() => {
     const totalPages = Math.max(1, editor.totalPages);
     return Array.from({ length: totalPages }, (_, pageIndex) => {
       const pageElement = mountedPageElements.get(pageIndex);
@@ -24201,15 +25181,14 @@ function useDocxPageThumbnails(editor, options = {}) {
         maxHeightPx: options.maxHeightPx,
         pixelRatio: options.pixelRatio
       });
-      const state = pageThumbnailStates.get(pageIndex);
       return {
+        // Internal: drives the default status below; stripped before exposure.
+        hasElement: Boolean(pageElement),
         pageIndex,
         pageNumber: pageIndex + 1,
         sourceWidthPx: sourceSize.widthPx,
         sourceHeightPx: sourceSize.heightPx,
         isMounted: Boolean(pageElement && pageElement.isConnected),
-        status: state?.status ?? (pageElement ? "idle" : "unavailable"),
-        error: state?.error,
         paint: (canvas) => {
           if (!canvas || options.disabled) {
             return false;
@@ -24226,7 +25205,9 @@ function useDocxPageThumbnails(editor, options = {}) {
             }
             const previousCanvas = attachedCanvasByPageRef.current.get(pageIndex);
             if (previousCanvas) {
-              thumbnailRasterQueueRef.current?.cancel(previousCanvas);
+              thumbnailRasterQueueRef.current?.cancel(
+                thumbnailQueueKeyForCanvas(previousCanvas)
+              );
             }
             attachedCanvasByPageRef.current.delete(pageIndex);
           };
@@ -24262,8 +25243,20 @@ function useDocxPageThumbnails(editor, options = {}) {
     options.maxWidthPx,
     options.pixelRatio,
     pageSurfaceRegistry,
-    pageThumbnailStates
+    thumbnailQueueKeyForCanvas
   ]);
+  const thumbnails = React.useMemo(
+    () => thumbnailGeometryItems.map((geometryItem) => {
+      const { hasElement, ...item } = geometryItem;
+      const state = pageThumbnailStates.get(item.pageIndex);
+      return {
+        ...item,
+        status: state?.status ?? (hasElement ? "idle" : "unavailable"),
+        error: state?.error
+      };
+    }),
+    [thumbnailGeometryItems, pageThumbnailStates]
+  );
   const paintThumbnail = React.useCallback(
     (pageIndex, canvas) => {
       if (!canvas || options.disabled) {
@@ -26647,15 +27640,39 @@ function DocxEditorViewer({
     }),
     [documentLayout, pageNodeSegmentsByPage, pageSectionInfoByIndex]
   );
+  const pageThumbnailSnapshotEntriesByPage = React.useMemo(
+    () => buildDocxPageThumbnailRenderSnapshotEntries({
+      model: editor.model,
+      pageNodeSegmentsByPage,
+      pageSectionInfoByIndex,
+      contentKeysByPage: pageThumbnailContentKeysByPage,
+      fallbackLayout: documentLayout,
+      documentTheme: editor.documentTheme,
+      docGridLinePitchPxByNodeIndex,
+      numberingDefinitions: editor.model.metadata.numberingDefinitions
+    }),
+    [
+      docGridLinePitchPxByNodeIndex,
+      documentLayout,
+      editor.documentTheme,
+      editor.model,
+      editor.model.metadata.numberingDefinitions,
+      pageNodeSegmentsByPage,
+      pageSectionInfoByIndex,
+      pageThumbnailContentKeysByPage
+    ]
+  );
   React.useEffect(() => {
     syncDocxViewerPageSurfaceContentKeys(
       editor,
       pageThumbnailContentKeysByPage,
-      pageThumbnailSurfaceSizesByPage
+      pageThumbnailSurfaceSizesByPage,
+      pageThumbnailSnapshotEntriesByPage
     );
   }, [
     pageSurfaceRegistryOwner,
     pageThumbnailContentKeysByPage,
+    pageThumbnailSnapshotEntriesByPage,
     pageThumbnailSurfaceSizesByPage
   ]);
   const resolveStyleRefFieldValueForPage = React.useMemo(() => {