@extend-ai/react-pptx 0.2.0 → 0.2.2

package/dist/index.js

@@ -9242,6 +9242,25 @@ async function renderWmfToDataUrl(buffer, maxWidth, maxHeight, optionsOrScale) {
   }
 }
 
+// src/zoom.ts
+var MIN_VIEWER_ZOOM = 10;
+var MAX_VIEWER_ZOOM = 400;
+function normalizeViewerZoomLevel(level) {
+  if (typeof level !== "number") return level;
+  if (Number.isNaN(level)) return 100;
+  return Math.max(MIN_VIEWER_ZOOM, Math.min(MAX_VIEWER_ZOOM, level));
+}
+function resolveViewerZoom(level, viewportWidth, viewportHeight, contentWidth, contentHeight) {
+  const normalized = normalizeViewerZoomLevel(level);
+  if (typeof normalized === "number") return normalized;
+  const safeContentWidth = Number.isFinite(contentWidth) && contentWidth > 0 ? contentWidth : 1;
+  const safeContentHeight = Number.isFinite(contentHeight) && contentHeight > 0 ? contentHeight : 1;
+  const fitWidth = (Number.isFinite(viewportWidth) && viewportWidth > 0 ? viewportWidth : safeContentWidth) / safeContentWidth * 100;
+  const fitHeight = (Number.isFinite(viewportHeight) && viewportHeight > 0 ? viewportHeight : safeContentHeight) / safeContentHeight * 100;
+  const resolved = normalized === "fit-width" ? fitWidth : normalized === "fit-page" ? Math.min(fitWidth, fitHeight) : Math.min(fitWidth, 100);
+  return Math.max(MIN_VIEWER_ZOOM, Math.min(MAX_VIEWER_ZOOM, resolved));
+}
+
 // src/normalized-viewer.ts
 var EMU_PER_CSS_PIXEL = 9525;
 var DEFAULT_TEXT_HORIZONTAL_INSET_EMU = 91440;
@@ -9307,6 +9326,10 @@ function acquirePresentationAssetCache(presentation) {
 }
 var LIST_ITEM_GAP = 24;
 var FALLBACK_VIEWPORT_RECT = { width: 800, height: 600 };
+function pixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
 function scaleListAnchorOffset(offset, previousSlideHeight, nextSlideHeight) {
   if (previousSlideHeight <= 0) return offset;
   if (offset <= previousSlideHeight) return offset * (nextSlideHeight / previousSlideHeight);
@@ -9852,9 +9875,11 @@ var NormalizedPresentationViewer = class {
   presentation;
   callbacks;
   current = 0;
-  zoom = 100;
-  fit = "contain";
+  zoomLevel = "automatic";
+  resolvedZoom = 100;
   assetCache;
+  resizeObserver;
+  activeViewport;
   listCleanup;
   highlight;
   activeMountResources;
@@ -9866,6 +9891,7 @@ var NormalizedPresentationViewer = class {
   renderGeneration = 0;
   navigationGeneration = 0;
   lastNotifiedSlide;
+  lastZoomNotification;
   listState;
   renderState;
   get slideCount() {
@@ -9874,11 +9900,17 @@ var NormalizedPresentationViewer = class {
   get currentSlideIndex() {
     return this.current;
   }
+  get zoom() {
+    return this.zoomLevel;
+  }
   get zoomPercent() {
-    return this.zoom;
+    return this.resolvedZoom;
+  }
+  get resolvedZoomPercent() {
+    return this.resolvedZoom;
   }
   get fitMode() {
-    return this.fit;
+    return typeof this.zoomLevel === "number" ? "none" : "contain";
   }
   get naturalSlideWidth() {
     const width = this.presentation.size.widthEmu / EMU_PER_CSS_PIXEL;
@@ -9888,9 +9920,57 @@ 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);
+  viewportSize(viewport) {
+    const rect = viewport.getBoundingClientRect();
+    let width = viewport.clientWidth || rect.width;
+    let height = viewport.clientHeight || rect.height;
+    if (typeof getComputedStyle === "function") {
+      const viewportStyle = getComputedStyle(viewport);
+      width -= pixelValue(viewportStyle.paddingLeft) + pixelValue(viewportStyle.paddingRight);
+      height -= pixelValue(viewportStyle.paddingTop) + pixelValue(viewportStyle.paddingBottom);
+      if (viewport !== this.container) {
+        const containerStyle = getComputedStyle(this.container);
+        width -= pixelValue(containerStyle.paddingLeft) + pixelValue(containerStyle.paddingRight);
+        height -= pixelValue(containerStyle.paddingTop) + pixelValue(containerStyle.paddingBottom);
+      }
+    }
+    return { width: Math.max(0, width), height: Math.max(0, height) };
+  }
+  resolveZoom(level, viewport = this.activeViewport ?? this.container) {
+    const size = this.viewportSize(viewport);
+    return resolveViewerZoom(
+      level,
+      size.width,
+      size.height,
+      this.naturalSlideWidth,
+      this.naturalSlideHeight
+    );
+  }
+  scaleForViewport(viewport) {
+    return this.resolveZoom(this.zoomLevel, viewport) / 100;
+  }
+  publishZoom(resolvedZoom) {
+    const normalized = Math.max(MIN_VIEWER_ZOOM, Math.min(MAX_VIEWER_ZOOM, resolvedZoom));
+    const levelChanged = this.lastZoomNotification?.level !== this.zoomLevel;
+    const resolutionChanged = this.lastZoomNotification === void 0 || Math.abs(this.lastZoomNotification.resolvedZoom - normalized) > 0.01;
+    this.resolvedZoom = normalized;
+    if (!levelChanged && !resolutionChanged) return;
+    const state = { level: this.zoomLevel, resolvedZoom: normalized };
+    this.lastZoomNotification = state;
+    this.callbacks.onZoomChange?.(state);
+  }
+  observeViewport(viewport) {
+    if (this.activeViewport === viewport && this.resizeObserver) return;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+    this.activeViewport = viewport;
+    if (typeof ResizeObserver === "undefined") return;
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.destroyed || typeof this.zoomLevel === "number") return;
+      void this.updateRenderedScale();
+    });
+    this.resizeObserver.observe(viewport);
+    if (viewport !== this.container) this.resizeObserver.observe(this.container);
   }
   isRenderActive(generation) {
     return !this.destroyed && generation === this.renderGeneration;
@@ -9901,6 +9981,9 @@ var NormalizedPresentationViewer = class {
     this.navigationGeneration += 1;
     this.listCleanup?.();
     this.listCleanup = void 0;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+    this.activeViewport = void 0;
     this.listState = void 0;
     this.clearSearchHighlights();
     return generation;
@@ -10458,7 +10541,7 @@ var NormalizedPresentationViewer = class {
     } finally {
       this.activeMountResources = previousResources;
     }
-    const effectiveScale = scale ?? this.scaleForViewport(target.clientWidth);
+    const effectiveScale = scale ?? this.scaleForViewport(target);
     const wrapper = document.createElement("div");
     wrapper.dataset.rpvSlideWrapper = String(index);
     wrapper.style.position = "relative";
@@ -10550,6 +10633,7 @@ var NormalizedPresentationViewer = class {
     this.renderState = { mode: "single" };
     const generation = this.beginRender();
     if (generation === void 0) return;
+    this.observeViewport(this.container);
     this.current = Math.max(0, Math.min(this.slideCount - 1, index));
     this.disposeContainerSlides();
     this.container.replaceChildren();
@@ -10559,6 +10643,7 @@ var NormalizedPresentationViewer = class {
     if (!this.isRenderActive(generation) || this.handlesByTarget.get(this.container) !== handle) {
       return;
     }
+    this.publishZoom(this.scaleForViewport(this.container) * 100);
     this.notifySlideChange(this.current);
   }
   createListPlaceholder(index, item, generation, scale) {
@@ -10619,7 +10704,8 @@ var NormalizedPresentationViewer = class {
       Math.min(this.slideCount - 1, options.initialSlideIndex ?? this.current)
     );
     const scroller = options.scrollElement ?? this.container;
-    let effectiveScale = this.scaleForViewport(scroller.clientWidth);
+    this.observeViewport(scroller);
+    let effectiveScale = this.scaleForViewport(scroller);
     let slideHeight = this.naturalSlideHeight * effectiveScale;
     let itemStride = slideHeight + LIST_ITEM_GAP;
     if (!windowingEnabled) {
@@ -10634,6 +10720,8 @@ var NormalizedPresentationViewer = class {
       const state2 = { generation, options: normalizedOptions, placeholders: placeholders2 };
       state2.updateScale = () => {
         if (!this.isRenderActive(generation) || this.listState !== state2) return;
+        const previousScale = effectiveScale;
+        const previousScrollLeft = scroller.scrollLeft;
         const previousStride = itemStride;
         const previousSlideHeight = slideHeight;
         const listStart = scroller === this.container ? 0 : this.container.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
@@ -10643,13 +10731,17 @@ var NormalizedPresentationViewer = class {
           Math.min(this.slideCount - 1, Math.floor(listOffset / previousStride))
         );
         const anchorOffset = listOffset - anchorIndex * previousStride;
-        effectiveScale = this.scaleForViewport(scroller.clientWidth);
+        effectiveScale = this.scaleForViewport(scroller);
         slideHeight = this.naturalSlideHeight * effectiveScale;
         itemStride = slideHeight + LIST_ITEM_GAP;
         placeholders2.forEach((placeholder) => {
           placeholder.item.style.minHeight = `${slideHeight}px`;
           placeholder.setScale(effectiveScale);
         });
+        if (previousScale > 0 && previousScrollLeft > 0) {
+          scroller.scrollLeft = previousScrollLeft * (effectiveScale / previousScale);
+        }
+        this.publishZoom(effectiveScale * 100);
         if (listOffset < 0) return;
         const nextAnchorOffset = scaleListAnchorOffset(
           anchorOffset,
@@ -10675,6 +10767,7 @@ var NormalizedPresentationViewer = class {
         initialItem.scrollIntoView?.({ behavior: "instant", block: "start" });
       }
       this.current = initialIndex;
+      this.publishZoom(effectiveScale * 100);
       this.notifySlideChange(initialIndex);
       return;
     }
@@ -10818,6 +10911,8 @@ var NormalizedPresentationViewer = class {
     };
     state.updateScale = () => {
       if (!isActive()) return;
+      const previousScale = effectiveScale;
+      const previousScrollLeft = scroller.scrollLeft;
       const previousStride = itemStride;
       const previousSlideHeight = slideHeight;
       const anchorIndex = this.current;
@@ -10827,7 +10922,7 @@ var NormalizedPresentationViewer = class {
       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);
+      effectiveScale = this.scaleForViewport(scroller);
       slideHeight = this.naturalSlideHeight * effectiveScale;
       itemStride = slideHeight + LIST_ITEM_GAP;
       sizer.style.height = `${this.slideCount * itemStride - LIST_ITEM_GAP}px`;
@@ -10836,6 +10931,9 @@ var NormalizedPresentationViewer = class {
         placeholder.item.style.transform = `translateY(${index * itemStride}px)`;
         placeholder.setScale(effectiveScale);
       });
+      if (previousScale > 0 && previousScrollLeft > 0) {
+        scroller.scrollLeft = previousScrollLeft * (effectiveScale / previousScale);
+      }
       const nextAnchorOffset = scaleListAnchorOffset(
         anchorOffset,
         previousSlideHeight,
@@ -10848,6 +10946,7 @@ var NormalizedPresentationViewer = class {
       writeScrollTop(nextScrollTop);
       virtualizer.setOptions({ ...virtualizer.options, overscan });
       virtualizer.measure();
+      this.publishZoom(effectiveScale * 100);
     };
     const teardown = virtualizer._didMount();
     this.listCleanup = teardown;
@@ -10866,6 +10965,7 @@ var NormalizedPresentationViewer = class {
       this.container.scrollLeft = 0;
     }
     this.current = initialIndex;
+    this.publishZoom(effectiveScale * 100);
     this.notifySlideChange(initialIndex);
   }
   async goToSlide(index, scrollOptions) {
@@ -10902,10 +11002,7 @@ var NormalizedPresentationViewer = class {
     if (!changed && this.container.querySelector(`[data-rpv-slide-index="${next}"]`)) return;
     await this.renderSlide(next);
   }
-  async setZoom(percent) {
-    const next = Math.max(10, Math.min(400, percent));
-    if (this.zoom === next) return;
-    this.zoom = next;
+  async updateRenderedScale() {
     if (this.renderState?.mode === "continuous") {
       const state = this.listState;
       if (state && this.isRenderActive(state.generation) && state.updateScale) {
@@ -10915,25 +11012,34 @@ var NormalizedPresentationViewer = class {
       }
     } 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);
+      if (handle) {
+        const viewport = this.activeViewport ?? this.container;
+        const previousScale = this.resolvedZoom / 100;
+        const previousScrollTop = viewport.scrollTop;
+        const previousScrollLeft = viewport.scrollLeft;
+        const nextScale = this.scaleForViewport(viewport);
+        handle.setScale(nextScale);
+        if (previousScale > 0) {
+          viewport.scrollTop = previousScrollTop * (nextScale / previousScale);
+          viewport.scrollLeft = previousScrollLeft * (nextScale / previousScale);
+        }
+        this.publishZoom(nextScale * 100);
+      } else await this.renderSlide(this.current);
+    } else {
+      this.publishZoom(this.resolveZoom(this.zoomLevel));
     }
   }
-  async setFitMode(mode) {
-    if (this.fit === mode) return;
-    this.fit = mode;
-    if (this.renderState?.mode === "continuous") {
-      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 setZoom(level) {
+    const next = normalizeViewerZoomLevel(level);
+    if (this.zoomLevel === next) {
+      if (typeof next !== "number") await this.updateRenderedScale();
+      return;
     }
+    this.zoomLevel = next;
+    await this.updateRenderedScale();
+  }
+  async setFitMode(mode) {
+    await this.setZoom(mode === "contain" ? "automatic" : 100);
   }
   searchText(query, options) {
     return searchDocument(this.presentation, query, options);
@@ -11009,6 +11115,9 @@ var NormalizedPresentationViewer = class {
     this.navigationGeneration += 1;
     this.listCleanup?.();
     this.listCleanup = void 0;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+    this.activeViewport = void 0;
     this.listState = void 0;
     this.clearSearchHighlights();
     this.assetCache.release();
@@ -11353,7 +11462,7 @@ function requestInitKey(value) {
     return String(value);
   }
 }
-async function createAdapter(target, parsed, props, getCurrentProps, onCurrentSlideChange, reportWarning, isCurrent) {
+async function createAdapter(target, parsed, props, getCurrentProps, onCurrentSlideChange, onZoomChange, reportWarning, isCurrent) {
   const fontManager = new PptxFontManager(props.fonts, (warning) => {
     if (isCurrent()) reportWarning(warning);
   });
@@ -11372,6 +11481,9 @@ async function createAdapter(target, parsed, props, getCurrentProps, onCurrentSl
     onSlideChange: (index) => {
       if (active()) onCurrentSlideChange(index);
     },
+    onZoomChange: (state) => {
+      if (active()) onZoomChange(state);
+    },
     onSlideRendered: (index, element) => {
       if (!active()) return;
       fontManager.applyTo(element, index);
@@ -11413,8 +11525,8 @@ async function createAdapter(target, parsed, props, getCurrentProps, onCurrentSl
       );
     },
     goToSlide: (index, options) => normalized.goToSlide(index, options),
-    setZoom: (percent) => normalized.setZoom(percent),
-    setFitMode: (mode) => normalized.setFitMode(mode),
+    setZoom: (level) => normalized.setZoom(level),
+    resolveZoom: (level) => normalized.resolveZoom(level),
     search: (query, options) => normalized.searchText(query, options),
     highlight: (result, options) => normalized.highlightSearchResult(result, options),
     clearHighlights: () => normalized.clearSearchHighlights(),
@@ -11482,7 +11594,7 @@ var ReactPptxViewer = forwardRef(
       slideIndex: controlledSlide,
       initialSlide = 0,
       zoom: controlledZoom,
-      defaultZoom = 100,
+      defaultZoom,
       fitMode = "contain",
       showToolbar = false,
       showThumbnails = false,
@@ -11513,6 +11625,7 @@ var ReactPptxViewer = forwardRef(
       onError,
       onWarning,
       onSlideChange: _onSlideChange,
+      onZoomChange: _onZoomChange,
       onSlideRendered: _onSlideRendered,
       onSlideUnmounted: _onSlideUnmounted,
       onSearchResults,
@@ -11531,7 +11644,12 @@ var ReactPptxViewer = forwardRef(
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(true);
     const [internalSlide, setInternalSlide] = useState(initialSlide);
-    const [internalZoom, setInternalZoom] = useState(defaultZoom);
+    const [internalZoom, setInternalZoom] = useState(
+      () => normalizeViewerZoomLevel(defaultZoom ?? (fitMode === "contain" ? "automatic" : 100))
+    );
+    const [resolvedZoom, setResolvedZoom] = useState(
+      () => typeof defaultZoom === "number" ? normalizeViewerZoomLevel(defaultZoom) : 100
+    );
     const [results, setResults] = useState([]);
     const [runtimeWarnings, setRuntimeWarnings] = useState([]);
     const virtualizationOptions = typeof virtualization === "object" ? virtualization : {};
@@ -11545,14 +11663,33 @@ var ReactPptxViewer = forwardRef(
     const parseFetchInit = parseOptions?.fetchInit;
     const parseFetchInitKey = requestInitKey(parseFetchInit);
     const slide = clampSlide(controlledSlide ?? internalSlide, parsed?.document.slides.length ?? 0);
-    const zoom = controlledZoom ?? internalZoom;
+    const zoom = normalizeViewerZoomLevel(controlledZoom ?? internalZoom);
     const latestSlideRef = useRef(slide);
     const latestZoomRef = useRef(zoom);
-    const latestFitModeRef = useRef(fitMode);
+    const latestResolvedZoomRef = useRef(resolvedZoom);
+    const latestControlledZoomRef = useRef(controlledZoom);
+    const lastPublishedZoomRef = useRef(void 0);
     const lastViewerSlideRef = useRef(void 0);
     latestSlideRef.current = slide;
     latestZoomRef.current = zoom;
-    latestFitModeRef.current = fitMode;
+    latestResolvedZoomRef.current = resolvedZoom;
+    latestControlledZoomRef.current = controlledZoom;
+    const notifyZoomChange = useCallback((state) => {
+      const previous = lastPublishedZoomRef.current;
+      if (previous?.level === state.level && Math.abs(previous.resolvedZoom - state.resolvedZoom) <= 0.01) {
+        return;
+      }
+      lastPublishedZoomRef.current = state;
+      latestPropsRef.current.onZoomChange?.(state);
+    }, []);
+    const publishZoomChange = useCallback(
+      (state) => {
+        setResolvedZoom(state.resolvedZoom);
+        latestResolvedZoomRef.current = state.resolvedZoom;
+        notifyZoomChange(state);
+      },
+      [notifyZoomChange]
+    );
     const thumbnailCount = showThumbnails ? parsed?.document.slides.length ?? 0 : 0;
     const getThumbnailKey = useCallback(
       (index) => parsed?.document.slides[index]?.id ?? index,
@@ -11593,13 +11730,28 @@ var ReactPptxViewer = forwardRef(
             block: "center"
           });
         },
-        async setZoom(percent) {
-          const next = Math.max(10, Math.min(400, percent));
+        async setZoom(level) {
+          const next = normalizeViewerZoomLevel(level);
+          const adapter = adapterRef.current;
+          if (latestControlledZoomRef.current !== void 0) {
+            notifyZoomChange({
+              level: next,
+              resolvedZoom: adapter?.resolveZoom(next) ?? (typeof next === "number" ? next : latestResolvedZoomRef.current)
+            });
+            return;
+          }
           setInternalZoom(next);
-          await adapterRef.current?.setZoom(next);
+          latestZoomRef.current = next;
+          if (adapter) await adapter.setZoom(next);
+          else {
+            publishZoomChange({
+              level: next,
+              resolvedZoom: typeof next === "number" ? next : latestResolvedZoomRef.current
+            });
+          }
         },
         async setFitMode(nextMode) {
-          await adapterRef.current?.setFitMode(nextMode);
+          await this.setZoom(nextMode === "contain" ? "automatic" : 100);
         },
         search(query, options) {
           return adapterRef.current?.search(query, options) ?? [];
@@ -11623,9 +11775,10 @@ var ReactPptxViewer = forwardRef(
         },
         getDocument: () => parsed?.document ?? null,
         getSlideIndex: () => latestSlideRef.current,
-        getZoom: () => latestZoomRef.current
+        getZoom: () => latestZoomRef.current,
+        getResolvedZoom: () => latestResolvedZoomRef.current
       }),
-      [adapterState?.generation, parsed]
+      [adapterState?.generation, notifyZoomChange, parsed, publishZoomChange]
     );
     useImperativeHandle(forwardedRef, () => controller, [controller]);
     useEffect(() => {
@@ -11699,6 +11852,7 @@ var ReactPptxViewer = forwardRef(
               setInternalSlide(index);
               latestPropsRef.current.onSlideChange?.(index);
             },
+            publishZoomChange,
             (warning) => {
               if (!isCurrent()) return;
               setRuntimeWarnings(
@@ -11720,11 +11874,6 @@ var ReactPptxViewer = forwardRef(
             adapter.destroy();
             return;
           }
-          await adapter.setFitMode(latestFitModeRef.current);
-          if (!isCurrent()) {
-            adapter.destroy();
-            return;
-          }
           await adapter.render(mode, latestSlideRef.current);
           if (!isCurrent()) {
             adapter.destroy();
@@ -11762,7 +11911,7 @@ var ReactPptxViewer = forwardRef(
       overscanViewport,
       batchSize,
       scrollElement,
-      width
+      publishZoomChange
     ]);
     useEffect(() => {
       if (adapterState && controlledSlide !== void 0 && slide !== lastViewerSlideRef.current) {
@@ -11770,13 +11919,12 @@ var ReactPptxViewer = forwardRef(
       }
     }, [adapterState, controlledSlide, slide]);
     useEffect(() => {
-      if (adapterState && controlledZoom !== void 0) {
-        void adapterState.adapter.setZoom(zoom);
-      }
-    }, [adapterState, controlledZoom, zoom]);
+      if (adapterState) void adapterState.adapter.setZoom(zoom);
+    }, [adapterState, zoom]);
     useEffect(() => {
-      if (adapterState) void adapterState.adapter.setFitMode(fitMode);
-    }, [adapterState, fitMode]);
+      if (controlledZoom !== void 0 || defaultZoom !== void 0) return;
+      setInternalZoom(fitMode === "contain" ? "automatic" : 100);
+    }, [controlledZoom, defaultZoom, fitMode]);
     useEffect(() => {
       const adapter = adapterState?.adapter;
       if (!adapter || searchQuery === void 0 || searchQuery === "") {
@@ -11853,20 +12001,20 @@ var ReactPptxViewer = forwardRef(
                     "button",
                     {
                       type: "button",
-                      onClick: () => void controller.setZoom(zoom - 10),
+                      onClick: () => void controller.setZoom(resolvedZoom - 10),
                       "aria-label": "Zoom out",
                       children: "\u2212"
                     }
                   ),
                   /* @__PURE__ */ jsxs("span", { className: "rpv-toolbar__count", children: [
-                    zoom,
+                    Math.round(resolvedZoom),
                     "%"
                   ] }),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
-                      onClick: () => void controller.setZoom(zoom + 10),
+                      onClick: () => void controller.setZoom(resolvedZoom + 10),
                       "aria-label": "Zoom in",
                       children: "+"
                     }