@extend-ai/react-pptx 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -8,6 +8,9 @@
 
 ## Unreleased
 
+- Make slide navigation observable before off-window rendering completes, isolate resource
+  readiness per slide mount, update zoom and fit geometry without rebuilding mounted slide DOM,
+  and reduce thumbnail work outside the visible rail.
 - Expose consumer-owned slide thumbnail rails through `usePptxViewerThumbnails`, including stable
   container refs, resolution bounds, render status, imperative rendering, and cleanup. Add
   DOCX-style visible/prefetch render windows and virtualize the built-in thumbnail scrollport.

package/dist/index.js

@@ -9249,6 +9249,11 @@ var DEFAULT_TEXT_VERTICAL_INSET_EMU = 45720;
 var POWERPOINT_SINGLE_LINE_HEIGHT = 1.15;
 var LIST_ITEM_GAP = 24;
 var FALLBACK_VIEWPORT_RECT = { width: 800, height: 600 };
+function scaleListAnchorOffset(offset, previousSlideHeight, nextSlideHeight) {
+  if (previousSlideHeight <= 0) return offset;
+  if (offset <= previousSlideHeight) return offset * (nextSlideHeight / previousSlideHeight);
+  return nextSlideHeight + (offset - previousSlideHeight);
+}
 var METAFILE_FONT_MAP = Object.fromEntries(
   Object.entries(OFFICE_FONT_FALLBACKS).map(([family, fallbacks]) => [
     family,
@@ -9795,7 +9800,7 @@ var NormalizedPresentationViewer = class {
   metafileUrls = /* @__PURE__ */ new Map();
   listCleanup;
   highlight;
-  pendingResources = /* @__PURE__ */ new Set();
+  activeMountResources;
   mountedHandles = /* @__PURE__ */ new Set();
   handlesByTarget = /* @__PURE__ */ new Map();
   destroyed = false;
@@ -9826,6 +9831,10 @@ var NormalizedPresentationViewer = class {
     const height = this.presentation.size.heightEmu / EMU_PER_CSS_PIXEL;
     return Number.isFinite(height) && height > 0 ? height : 1;
   }
+  scaleForViewport(viewportWidth) {
+    const fitScale = this.fit === "contain" ? Math.min(1, (viewportWidth || this.naturalSlideWidth) / this.naturalSlideWidth) : 1;
+    return fitScale * (this.zoom / 100);
+  }
   isRenderActive(generation) {
     return !this.destroyed && generation === this.renderGeneration;
   }
@@ -9878,12 +9887,13 @@ var NormalizedPresentationViewer = class {
   applyAsset(assetId, apply, nodeId) {
     const asset = this.presentation.assets[assetId];
     if (!asset) return;
+    const resources = this.activeMountResources;
     const pending = this.assetUrl(asset).then((url) => {
       if (url && !this.destroyed) apply(url);
     }).catch((error) => {
       if (!this.destroyed) this.callbacks.onNodeError?.(nodeId, error);
-    }).finally(() => this.pendingResources.delete(pending));
-    this.pendingResources.add(pending);
+    });
+    resources?.add(pending);
   }
   /**
    * Applies DrawingML picture recolor effects (`a:biLevel`, `a:grayscl`,
@@ -10039,11 +10049,7 @@ var NormalizedPresentationViewer = class {
       image.setAttribute("preserveAspectRatio", "none");
       image.setAttribute("clip-path", `url(#${clipId})`);
       image.style.opacity = String(Math.max(0, Math.min(1, fillStyle.opacity ?? 1)));
-      this.applyAsset(
-        fillStyle.assetId,
-        (url) => image.setAttribute("href", url),
-        node.id
-      );
+      this.applyAsset(fillStyle.assetId, (url) => image.setAttribute("href", url), node.id);
       svg.append(image);
     }
     if (node.line) {
@@ -10406,23 +10412,35 @@ var NormalizedPresentationViewer = class {
       element,
       target,
       ready: Promise.resolve(),
+      setScale: () => {
+      },
       dispose: () => element.remove()
     };
   }
   mount(index, target, scale) {
     if (this.destroyed) return this.emptyHandle(target);
     this.handlesByTarget.get(target)?.dispose();
-    const slide = this.createSlide(index);
-    const fitScale = this.fit === "contain" ? Math.min(1, (target.clientWidth || this.naturalSlideWidth) / this.naturalSlideWidth) : 1;
-    const effectiveScale = scale ?? fitScale * (this.zoom / 100);
+    const resources = /* @__PURE__ */ new Set();
+    const previousResources = this.activeMountResources;
+    this.activeMountResources = resources;
+    let slide;
+    try {
+      slide = this.createSlide(index);
+    } finally {
+      this.activeMountResources = previousResources;
+    }
+    const effectiveScale = scale ?? this.scaleForViewport(target.clientWidth);
     const wrapper = document.createElement("div");
     wrapper.dataset.rpvSlideWrapper = String(index);
     wrapper.style.position = "relative";
-    wrapper.style.width = `${this.naturalSlideWidth * effectiveScale}px`;
-    wrapper.style.height = `${this.naturalSlideHeight * effectiveScale}px`;
     wrapper.style.margin = "0 auto";
     slide.style.transformOrigin = "top left";
-    slide.style.transform = `scale(${effectiveScale})`;
+    const setScale = (nextScale) => {
+      wrapper.style.width = `${this.naturalSlideWidth * nextScale}px`;
+      wrapper.style.height = `${this.naturalSlideHeight * nextScale}px`;
+      slide.style.transform = `scale(${nextScale})`;
+    };
+    setScale(effectiveScale);
     wrapper.append(slide);
     target.replaceChildren(wrapper);
     this.callbacks.onSlideRendered?.(index, slide);
@@ -10430,7 +10448,8 @@ var NormalizedPresentationViewer = class {
     const handle = {
       element: slide,
       target,
-      ready: Promise.all([...this.pendingResources]).then(() => void 0),
+      ready: Promise.all([...resources]).then(() => void 0),
+      setScale,
       dispose: () => {
         if (disposed) return;
         disposed = true;
@@ -10458,6 +10477,32 @@ var NormalizedPresentationViewer = class {
       await Promise.resolve();
     }
   }
+  async yieldNavigationPaint() {
+    if (typeof requestAnimationFrame !== "undefined") {
+      await new Promise((resolve) => {
+        let settled = false;
+        let firstFrame;
+        let secondFrame;
+        const complete = () => {
+          if (settled) return;
+          settled = true;
+          clearTimeout(timeout2);
+          if (typeof cancelAnimationFrame !== "undefined") {
+            if (firstFrame !== void 0) cancelAnimationFrame(firstFrame);
+            if (secondFrame !== void 0) cancelAnimationFrame(secondFrame);
+          }
+          resolve();
+        };
+        const timeout2 = setTimeout(complete, 100);
+        firstFrame = requestAnimationFrame(() => {
+          if (settled) return;
+          secondFrame = requestAnimationFrame(complete);
+        });
+      });
+    } else {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+  }
   async mountInBatches(placeholders, indices, batchSize, generation) {
     const uniqueIndices = [...new Set(indices)].filter(
       (index) => index >= 0 && index < placeholders.length
@@ -10490,12 +10535,13 @@ var NormalizedPresentationViewer = class {
   createListPlaceholder(index, item, generation, scale) {
     let handle;
     let mountPromise;
+    let effectiveScale = scale;
     const isActive = () => this.isRenderActive(generation) && this.listState?.generation === generation;
     const mount = () => {
       if (!isActive()) return Promise.resolve();
       if (handle) return handle.ready;
       if (mountPromise) return mountPromise;
-      const nextHandle = this.mount(index, item, scale);
+      const nextHandle = this.mount(index, item, effectiveScale);
       handle = nextHandle;
       const pending = nextHandle.ready.then(() => {
         if (!isActive() || handle !== nextHandle) {
@@ -10511,11 +10557,16 @@ var NormalizedPresentationViewer = class {
     const unmount = () => {
       const mounted = handle;
       handle = void 0;
+      mountPromise = void 0;
       if (mounted) {
         mounted.dispose();
       }
     };
-    return { item, mount, unmount, isMounted: () => Boolean(handle) };
+    const setScale = (nextScale) => {
+      effectiveScale = nextScale;
+      handle?.setScale(nextScale);
+    };
+    return { item, mount, unmount, isMounted: () => Boolean(handle), setScale };
   }
   async renderList(options = {}) {
     const windowingEnabled = options.enabled !== false;
@@ -10539,11 +10590,9 @@ var NormalizedPresentationViewer = class {
       Math.min(this.slideCount - 1, options.initialSlideIndex ?? this.current)
     );
     const scroller = options.scrollElement ?? this.container;
-    const viewportWidth = scroller.clientWidth;
-    const estimatedFitScale = this.fit === "contain" ? Math.min(1, (viewportWidth || this.naturalSlideWidth) / this.naturalSlideWidth) : 1;
-    const effectiveScale = estimatedFitScale * (this.zoom / 100);
-    const slideHeight = this.naturalSlideHeight * effectiveScale;
-    const itemStride = slideHeight + LIST_ITEM_GAP;
+    let effectiveScale = this.scaleForViewport(scroller.clientWidth);
+    let slideHeight = this.naturalSlideHeight * effectiveScale;
+    let itemStride = slideHeight + LIST_ITEM_GAP;
     if (!windowingEnabled) {
       const placeholders2 = this.presentation.slides.map((_, index) => {
         const item = document.createElement("div");
@@ -10551,9 +10600,35 @@ var NormalizedPresentationViewer = class {
         item.style.minHeight = `${slideHeight}px`;
         item.style.margin = `0 auto ${LIST_ITEM_GAP}px`;
         this.container.append(item);
-        return this.createListPlaceholder(index, item, generation);
+        return this.createListPlaceholder(index, item, generation, effectiveScale);
       });
       const state2 = { generation, options: normalizedOptions, placeholders: placeholders2 };
+      state2.updateScale = () => {
+        if (!this.isRenderActive(generation) || this.listState !== state2) return;
+        const previousStride = itemStride;
+        const previousSlideHeight = slideHeight;
+        const listStart = scroller === this.container ? 0 : this.container.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+        const listOffset = scroller.scrollTop - listStart;
+        const anchorIndex = Math.max(
+          0,
+          Math.min(this.slideCount - 1, Math.floor(listOffset / previousStride))
+        );
+        const anchorOffset = listOffset - anchorIndex * previousStride;
+        effectiveScale = this.scaleForViewport(scroller.clientWidth);
+        slideHeight = this.naturalSlideHeight * effectiveScale;
+        itemStride = slideHeight + LIST_ITEM_GAP;
+        placeholders2.forEach((placeholder) => {
+          placeholder.item.style.minHeight = `${slideHeight}px`;
+          placeholder.setScale(effectiveScale);
+        });
+        if (listOffset < 0) return;
+        const nextAnchorOffset = scaleListAnchorOffset(
+          anchorOffset,
+          previousSlideHeight,
+          slideHeight
+        );
+        scroller.scrollTop = Math.max(0, listStart + anchorIndex * itemStride + nextAnchorOffset);
+      };
       this.listState = state2;
       await this.mountInBatches(
         placeholders2,
@@ -10595,6 +10670,20 @@ var NormalizedPresentationViewer = class {
     const state = { generation, options: normalizedOptions, placeholders };
     this.listState = state;
     const isActive = () => this.isRenderActive(generation) && this.listState === state;
+    const deferredMounts = /* @__PURE__ */ new Map();
+    let virtualWindow = /* @__PURE__ */ new Set();
+    state.deferMount = (index) => {
+      deferredMounts.set(index, (deferredMounts.get(index) ?? 0) + 1);
+    };
+    state.resumeMount = (index) => {
+      const remaining = (deferredMounts.get(index) ?? 0) - 1;
+      if (remaining > 0) {
+        deferredMounts.set(index, remaining);
+        return;
+      }
+      deferredMounts.delete(index);
+      if (virtualWindow.has(index)) void placeholders[index]?.mount();
+    };
     const measureViewportRect = () => {
       const rect = scroller.getBoundingClientRect();
       if (rect.width > 0 && rect.height > 0) return { width: rect.width, height: rect.height };
@@ -10606,16 +10695,25 @@ var NormalizedPresentationViewer = class {
     const initialRect = measureViewportRect();
     const requestedOverscan = options.overscanViewport ?? 1.5;
     const overscanViewports = Number.isFinite(requestedOverscan) && requestedOverscan >= 0 ? requestedOverscan : 1.5;
-    const overscan = Math.max(1, Math.ceil(overscanViewports * initialRect.height / itemStride));
+    let overscan = Math.max(1, Math.ceil(overscanViewports * initialRect.height / itemStride));
     const measureScrollMargin = () => sizer.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
     let scrollMargin = measureScrollMargin();
     let needsSettleAlignment = initialIndex > 0;
     let lastProgrammaticTop;
+    const writeScrollTop = (top, behavior) => {
+      lastProgrammaticTop = top;
+      if (typeof scroller.scrollTo === "function") {
+        scroller.scrollTo(behavior ? { top, behavior } : { top });
+      } else {
+        scroller.scrollTop = top;
+      }
+    };
     const reconcile = (instance) => {
       if (!isActive()) return;
       const windowed = new Set(instance.getVirtualItems().map((item) => item.index));
+      virtualWindow = windowed;
       placeholders.forEach((placeholder, index) => {
-        if (windowed.has(index)) void placeholder.mount();
+        if (windowed.has(index) && !deferredMounts.has(index)) void placeholder.mount();
         else placeholder.unmount();
       });
       const offset = (instance.scrollOffset ?? 0) - scrollMargin;
@@ -10678,12 +10776,7 @@ var NormalizedPresentationViewer = class {
       },
       scrollToFn: (offset, { adjustments, behavior }) => {
         const top = offset + (adjustments ?? 0);
-        lastProgrammaticTop = top;
-        if (typeof scroller.scrollTo === "function") {
-          scroller.scrollTo(behavior ? { top, behavior } : { top });
-        } else {
-          scroller.scrollTop = top;
-        }
+        writeScrollTop(top, behavior);
       },
       onChange: (instance) => reconcile(instance)
     });
@@ -10694,6 +10787,39 @@ var NormalizedPresentationViewer = class {
         behavior: scrollOptions?.behavior === "smooth" ? "smooth" : "auto"
       });
     };
+    state.updateScale = () => {
+      if (!isActive()) return;
+      const previousStride = itemStride;
+      const previousSlideHeight = slideHeight;
+      const anchorIndex = this.current;
+      const observedScrollTop = virtualizer.scrollOffset ?? scroller.scrollTop;
+      const observedIndex = Math.floor((observedScrollTop - scrollMargin) / previousStride);
+      const intendedIndex = lastProgrammaticTop === void 0 ? void 0 : Math.floor((lastProgrammaticTop - scrollMargin) / previousStride);
+      const previousScrollTop = Math.abs(observedIndex - anchorIndex) > 1 && intendedIndex !== void 0 && Math.abs(intendedIndex - anchorIndex) <= 1 ? lastProgrammaticTop : observedScrollTop;
+      const previousOffset = previousScrollTop - scrollMargin;
+      const anchorOffset = previousOffset - anchorIndex * previousStride;
+      effectiveScale = this.scaleForViewport(scroller.clientWidth);
+      slideHeight = this.naturalSlideHeight * effectiveScale;
+      itemStride = slideHeight + LIST_ITEM_GAP;
+      sizer.style.height = `${this.slideCount * itemStride - LIST_ITEM_GAP}px`;
+      placeholders.forEach((placeholder, index) => {
+        placeholder.item.style.height = `${slideHeight}px`;
+        placeholder.item.style.transform = `translateY(${index * itemStride}px)`;
+        placeholder.setScale(effectiveScale);
+      });
+      const nextAnchorOffset = scaleListAnchorOffset(
+        anchorOffset,
+        previousSlideHeight,
+        slideHeight
+      );
+      const nextScrollTop = previousOffset < 0 ? previousScrollTop : Math.max(0, scrollMargin + anchorIndex * itemStride + nextAnchorOffset);
+      const viewportRect = measureViewportRect();
+      overscan = Math.max(1, Math.ceil(overscanViewports * viewportRect.height / itemStride));
+      virtualizer.scrollOffset = nextScrollTop;
+      writeScrollTop(nextScrollTop);
+      virtualizer.setOptions({ ...virtualizer.options, overscan });
+      virtualizer.measure();
+    };
     const teardown = virtualizer._didMount();
     this.listCleanup = teardown;
     virtualizer._willUpdate();
@@ -10721,16 +10847,27 @@ var NormalizedPresentationViewer = class {
     if (state && this.isRenderActive(state.generation)) {
       const navigation = ++this.navigationGeneration;
       const placeholder = state.placeholders[next];
-      await placeholder?.mount();
-      if (this.destroyed || navigation !== this.navigationGeneration || !this.isRenderActive(state.generation) || this.listState !== state) {
-        return;
-      }
-      if (changed) {
-        if (state.scrollToIndex) state.scrollToIndex(next, scrollOptions);
-        else placeholder?.item.scrollIntoView?.(scrollOptions);
+      let mountDeferred = Boolean(state.deferMount && placeholder && !placeholder.isMounted());
+      if (mountDeferred) state.deferMount?.(next);
+      try {
+        if (changed) {
+          if (state.scrollToIndex) state.scrollToIndex(next, scrollOptions);
+          else placeholder?.item.scrollIntoView?.(scrollOptions);
+          this.current = next;
+          this.notifySlideChange(next);
+        }
+        if (mountDeferred) await this.yieldNavigationPaint();
+        if (this.destroyed || navigation !== this.navigationGeneration || !this.isRenderActive(state.generation) || this.listState !== state) {
+          return;
+        }
+        if (mountDeferred) {
+          state.resumeMount?.(next);
+          mountDeferred = false;
+        }
+        await placeholder?.mount();
+      } finally {
+        if (mountDeferred) state.resumeMount?.(next);
       }
-      this.current = next;
-      if (changed) this.notifySlideChange(next);
       return;
     }
     if (!changed && this.container.querySelector(`[data-rpv-slide-index="${next}"]`)) return;
@@ -10741,15 +10878,33 @@ var NormalizedPresentationViewer = class {
     if (this.zoom === next) return;
     this.zoom = next;
     if (this.renderState?.mode === "continuous") {
-      await this.renderList({ ...this.renderState.options, initialSlideIndex: this.current });
-    } else if (this.renderState) await this.renderSlide(this.current);
+      const state = this.listState;
+      if (state && this.isRenderActive(state.generation) && state.updateScale) {
+        state.updateScale();
+      } else {
+        await this.renderList({ ...this.renderState.options, initialSlideIndex: this.current });
+      }
+    } else if (this.renderState) {
+      const handle = this.handlesByTarget.get(this.container);
+      if (handle) handle.setScale(this.scaleForViewport(this.container.clientWidth));
+      else await this.renderSlide(this.current);
+    }
   }
   async setFitMode(mode) {
     if (this.fit === mode) return;
     this.fit = mode;
     if (this.renderState?.mode === "continuous") {
-      await this.renderList({ ...this.renderState.options, initialSlideIndex: this.current });
-    } else if (this.renderState) await this.renderSlide(this.current);
+      const state = this.listState;
+      if (state && this.isRenderActive(state.generation) && state.updateScale) {
+        state.updateScale();
+      } else {
+        await this.renderList({ ...this.renderState.options, initialSlideIndex: this.current });
+      }
+    } else if (this.renderState) {
+      const handle = this.handlesByTarget.get(this.container);
+      if (handle) handle.setScale(this.scaleForViewport(this.container.clientWidth));
+      else await this.renderSlide(this.current);
+    }
   }
   searchText(query, options) {
     return searchDocument(this.presentation, query, options);
@@ -10831,7 +10986,7 @@ var NormalizedPresentationViewer = class {
     this.objectUrls.clear();
     this.assetUrls.clear();
     this.metafileUrls.clear();
-    this.pendingResources.clear();
+    this.activeMountResources = void 0;
     for (const handle of [...this.mountedHandles]) handle.dispose();
     this.handlesByTarget.clear();
     this.renderState = void 0;
@@ -11099,7 +11254,7 @@ var presentationParsingDefaults = Object.freeze({
   maxInputBytes: DEFAULT_MAX_INPUT_BYTES
 });
 var THUMBNAIL_ROW_ESTIMATE = 123;
-var THUMBNAIL_OVERSCAN = 3;
+var THUMBNAIL_OVERSCAN = 1;
 var THUMBNAIL_INITIAL_RECT = { height: 780, width: 184 };
 var observeThumbnailFilmstripRect = (instance, callback) => {
   const element = instance.scrollElement;
@@ -11820,9 +11975,12 @@ function usePptxViewer() {
 }
 var EMU_PER_CSS_PIXEL2 = 9525;
 var DEFAULT_MAX_DIMENSION2 = 160;
-function normalizeSlideIndexes(indexes, slideCount) {
+function normalizeSlideIndexes(indexes, slideCount, sort = true) {
   if (!indexes?.length || slideCount <= 0) return [];
-  return [...new Set(indexes)].filter((index) => Number.isInteger(index) && index >= 0 && index < slideCount).sort((left, right) => left - right);
+  const normalized = [...new Set(indexes)].filter(
+    (index) => Number.isInteger(index) && index >= 0 && index < slideCount
+  );
+  return sort ? normalized.sort((left, right) => left - right) : normalized;
 }
 function finitePositive2(value) {
   return value !== void 0 && Number.isFinite(value) && value > 0 ? value : void 0;
@@ -11860,6 +12018,7 @@ function usePptxViewerThumbnails(controller, options = {}) {
   const attachedElementsRef = useRef(/* @__PURE__ */ new Map());
   const cleanupsRef = useRef(/* @__PURE__ */ new Map());
   const prefetchedRef = useRef(/* @__PURE__ */ new Map());
+  const prefetchInFlightRef = useRef(/* @__PURE__ */ new Map());
   const renderGenerationRef = useRef(/* @__PURE__ */ new Map());
   const refCallbacksRef = useRef(/* @__PURE__ */ new Map());
   const attachRef = useRef(() => {
@@ -11872,7 +12031,7 @@ function usePptxViewerThumbnails(controller, options = {}) {
     [options.renderWindow?.visibleSlideIndexes, slideCount]
   );
   const prefetchSlideIndexes = useMemo(
-    () => normalizeSlideIndexes(options.renderWindow?.prefetchSlideIndexes, slideCount),
+    () => normalizeSlideIndexes(options.renderWindow?.prefetchSlideIndexes, slideCount, false),
     [options.renderWindow?.prefetchSlideIndexes, slideCount]
   );
   const visibleSlideIndexesKey = visibleSlideIndexes.join(",");
@@ -11987,28 +12146,46 @@ function usePptxViewerThumbnails(controller, options = {}) {
   }, [renderThumbnail]);
   const prefetchThumbnail = useCallback(
     async (slideIndex) => {
-      if (disabled || !controller?.isReady() || attachedElementsRef.current.has(slideIndex) || prefetchedRef.current.has(slideIndex)) {
-        return;
-      }
-      const generation = (renderGenerationRef.current.get(slideIndex) ?? 0) + 1;
-      renderGenerationRef.current.set(slideIndex, generation);
-      const element = globalThis.document.createElement("div");
-      setThumbnailState(slideIndex, { status: "rendering" });
-      try {
-        const cleanup = await controller.renderThumbnail(slideIndex, element, {
-          width: size.width
-        });
-        if (!mountedRef.current || renderGenerationRef.current.get(slideIndex) !== generation || attachedElementsRef.current.has(slideIndex) || !requestedPrefetchSlideIndexSetRef.current.has(slideIndex)) {
-          cleanup();
-          return;
+      while (true) {
+        const existing = prefetchInFlightRef.current.get(slideIndex);
+        if (existing) {
+          await existing;
+          continue;
         }
-        prefetchedRef.current.set(slideIndex, { cleanup, element, width: size.width });
-        setThumbnailState(slideIndex, { status: "ready" });
-      } catch (reason) {
-        if (!mountedRef.current || renderGenerationRef.current.get(slideIndex) !== generation) {
+        if (disabled || !controller?.isReady() || attachedElementsRef.current.has(slideIndex) || prefetchedRef.current.has(slideIndex) || !requestedPrefetchSlideIndexSetRef.current.has(slideIndex)) {
           return;
         }
-        setThumbnailState(slideIndex, { error: asError(reason), status: "error" });
+        const generation = (renderGenerationRef.current.get(slideIndex) ?? 0) + 1;
+        renderGenerationRef.current.set(slideIndex, generation);
+        const element = globalThis.document.createElement("div");
+        setThumbnailState(slideIndex, { status: "rendering" });
+        const pending = (async () => {
+          try {
+            const cleanup = await controller.renderThumbnail(slideIndex, element, {
+              width: size.width
+            });
+            if (!mountedRef.current || renderGenerationRef.current.get(slideIndex) !== generation || attachedElementsRef.current.has(slideIndex) || !requestedPrefetchSlideIndexSetRef.current.has(slideIndex)) {
+              cleanup();
+              return;
+            }
+            prefetchedRef.current.set(slideIndex, { cleanup, element, width: size.width });
+            setThumbnailState(slideIndex, { status: "ready" });
+          } catch (reason) {
+            if (!mountedRef.current || renderGenerationRef.current.get(slideIndex) !== generation) {
+              return;
+            }
+            setThumbnailState(slideIndex, { error: asError(reason), status: "error" });
+          }
+        })();
+        prefetchInFlightRef.current.set(slideIndex, pending);
+        try {
+          await pending;
+        } finally {
+          if (prefetchInFlightRef.current.get(slideIndex) === pending) {
+            prefetchInFlightRef.current.delete(slideIndex);
+          }
+        }
+        return;
       }
     },
     [controller, disabled, setThumbnailState, size.width]
@@ -12024,14 +12201,17 @@ function usePptxViewerThumbnails(controller, options = {}) {
       cleanupsRef.current.clear();
       for (const prefetched of prefetchedRef.current.values()) prefetched.cleanup();
       prefetchedRef.current.clear();
+      prefetchInFlightRef.current.clear();
     };
   }, []);
   useEffect(
     () => () => {
+      for (const index of prefetchInFlightRef.current.keys()) invalidateThumbnail(index);
+      prefetchInFlightRef.current.clear();
       for (const prefetched of prefetchedRef.current.values()) prefetched.cleanup();
       prefetchedRef.current.clear();
     },
-    [controller, size.width]
+    [controller, invalidateThumbnail, size.width]
   );
   useEffect(() => {
     void rerenderAttachedThumbnails();
@@ -12043,6 +12223,13 @@ function usePptxViewerThumbnails(controller, options = {}) {
         if (!attachedElementsRef.current.has(index)) setThumbnailState(index, { status: "idle" });
       }
     }
+    for (const index of prefetchInFlightRef.current.keys()) {
+      if (disabled || attachedElementsRef.current.has(index) || !requestedPrefetchSlideIndexSetRef.current.has(index)) {
+        invalidateThumbnail(index);
+        prefetchInFlightRef.current.delete(index);
+        if (!attachedElementsRef.current.has(index)) setThumbnailState(index, { status: "idle" });
+      }
+    }
     if (disabled) return;
     let cancelled = false;
     void (async () => {
@@ -12057,6 +12244,7 @@ function usePptxViewerThumbnails(controller, options = {}) {
   }, [
     disabled,
     disposePrefetchedThumbnail,
+    invalidateThumbnail,
     prefetchSlideIndexesKey,
     prefetchThumbnail,
     setThumbnailState