@extend-ai/react-pptx 0.1.2 → 0.2.1

package/dist/index.js

@@ -9242,13 +9242,94 @@ 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;
 var DEFAULT_TEXT_VERTICAL_INSET_EMU = 45720;
 var POWERPOINT_SINGLE_LINE_HEIGHT = 1.15;
+var PresentationAssetCache = class {
+  references = 0;
+  objectUrls = /* @__PURE__ */ new Set();
+  assetUrls = /* @__PURE__ */ new Map();
+  metafileUrls = /* @__PURE__ */ new Map();
+  acquire() {
+    this.references += 1;
+    return this;
+  }
+  metafileUrl(assetId, contentType, data) {
+    const cached = this.metafileUrls.get(assetId);
+    if (cached) return cached;
+    const convert = contentType.includes("wmf") ? renderWmfToDataUrl : renderEmfToDataUrl;
+    const ownedBytes = data.slice();
+    const pending = convert(ownedBytes.buffer, 2048, 2048, {
+      dpiScale: 2,
+      maxCanvasDimension: 4096,
+      maxRecords: 2e5,
+      fontFamilyMap: METAFILE_FONT_MAP
+    }).then((url) => url || void 0);
+    this.metafileUrls.set(assetId, pending);
+    return pending;
+  }
+  assetUrl(asset) {
+    if (asset.url) return Promise.resolve(asset.url);
+    if (!asset.data) return Promise.resolve(void 0);
+    const contentType = asset.contentType.toLowerCase();
+    if (contentType.includes("emf") || contentType.includes("wmf")) {
+      return this.metafileUrl(asset.id, contentType, asset.data);
+    }
+    const cached = this.assetUrls.get(asset.id);
+    if (cached) return Promise.resolve(cached);
+    const ownedBytes = asset.data.slice();
+    const url = URL.createObjectURL(
+      new Blob([ownedBytes.buffer], { type: asset.contentType })
+    );
+    this.objectUrls.add(url);
+    this.assetUrls.set(asset.id, url);
+    return Promise.resolve(url);
+  }
+  release() {
+    this.references = Math.max(0, this.references - 1);
+    if (this.references > 0) return;
+    for (const url of this.objectUrls) URL.revokeObjectURL(url);
+    this.objectUrls.clear();
+    this.assetUrls.clear();
+    this.metafileUrls.clear();
+  }
+};
+var presentationAssetCaches = /* @__PURE__ */ new WeakMap();
+function acquirePresentationAssetCache(presentation) {
+  let cache = presentationAssetCaches.get(presentation);
+  if (!cache) {
+    cache = new PresentationAssetCache();
+    presentationAssetCaches.set(presentation, cache);
+  }
+  return cache.acquire();
+}
 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);
@@ -9788,16 +9869,17 @@ var NormalizedPresentationViewer = class {
     this.container = container;
     this.presentation = presentation;
     this.callbacks = callbacks;
+    this.assetCache = acquirePresentationAssetCache(presentation);
   }
   container;
   presentation;
   callbacks;
   current = 0;
-  zoom = 100;
-  fit = "contain";
-  objectUrls = /* @__PURE__ */ new Set();
-  assetUrls = /* @__PURE__ */ new Map();
-  metafileUrls = /* @__PURE__ */ new Map();
+  zoomLevel = "automatic";
+  resolvedZoom = 100;
+  assetCache;
+  resizeObserver;
+  activeViewport;
   listCleanup;
   highlight;
   activeMountResources;
@@ -9809,6 +9891,7 @@ var NormalizedPresentationViewer = class {
   renderGeneration = 0;
   navigationGeneration = 0;
   lastNotifiedSlide;
+  lastZoomNotification;
   listState;
   renderState;
   get slideCount() {
@@ -9817,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;
@@ -9831,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;
@@ -9844,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;
@@ -9853,36 +9993,8 @@ var NormalizedPresentationViewer = class {
     this.lastNotifiedSlide = index;
     this.callbacks.onSlideChange?.(index);
   }
-  metafileUrl(assetId, contentType, data) {
-    const cached = this.metafileUrls.get(assetId);
-    if (cached) return cached;
-    const convert = contentType.includes("wmf") ? renderWmfToDataUrl : renderEmfToDataUrl;
-    const ownedBytes = data.slice();
-    const pending = convert(ownedBytes.buffer, 2048, 2048, {
-      dpiScale: 2,
-      maxCanvasDimension: 4096,
-      maxRecords: 2e5,
-      fontFamilyMap: METAFILE_FONT_MAP
-    }).then((url) => url || void 0);
-    this.metafileUrls.set(assetId, pending);
-    return pending;
-  }
   assetUrl(asset) {
-    if (asset.url) return Promise.resolve(asset.url);
-    if (!asset.data) return Promise.resolve(void 0);
-    const contentType = asset.contentType.toLowerCase();
-    if (contentType.includes("emf") || contentType.includes("wmf")) {
-      return this.metafileUrl(asset.id, contentType, asset.data);
-    }
-    const cached = this.assetUrls.get(asset.id);
-    if (cached) return Promise.resolve(cached);
-    const ownedBytes = asset.data.slice();
-    const url = URL.createObjectURL(
-      new Blob([ownedBytes.buffer], { type: asset.contentType })
-    );
-    this.objectUrls.add(url);
-    this.assetUrls.set(asset.id, url);
-    return Promise.resolve(url);
+    return this.assetCache.assetUrl(asset);
   }
   applyAsset(assetId, apply, nodeId) {
     const asset = this.presentation.assets[assetId];
@@ -10429,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";
@@ -10521,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();
@@ -10530,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) {
@@ -10590,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) {
@@ -10605,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;
@@ -10614,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,
@@ -10646,6 +10767,7 @@ var NormalizedPresentationViewer = class {
         initialItem.scrollIntoView?.({ behavior: "instant", block: "start" });
       }
       this.current = initialIndex;
+      this.publishZoom(effectiveScale * 100);
       this.notifySlideChange(initialIndex);
       return;
     }
@@ -10789,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;
@@ -10798,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`;
@@ -10807,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,
@@ -10819,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;
@@ -10837,6 +10965,7 @@ var NormalizedPresentationViewer = class {
       this.container.scrollLeft = 0;
     }
     this.current = initialIndex;
+    this.publishZoom(effectiveScale * 100);
     this.notifySlideChange(initialIndex);
   }
   async goToSlide(index, scrollOptions) {
@@ -10873,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) {
@@ -10886,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);
@@ -10980,12 +11115,12 @@ 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();
-    for (const url of this.objectUrls) URL.revokeObjectURL(url);
-    this.objectUrls.clear();
-    this.assetUrls.clear();
-    this.metafileUrls.clear();
+    this.assetCache.release();
     this.activeMountResources = void 0;
     for (const handle of [...this.mountedHandles]) handle.dispose();
     this.handlesByTarget.clear();
@@ -11145,6 +11280,18 @@ async function parseInWorker(bytes, signal, wasmSource) {
   });
 }
 
+// src/performance.ts
+function performanceNow() {
+  return globalThis.performance?.now?.() ?? Date.now();
+}
+function performanceMeasurement(phase, startedAt, slideIndex) {
+  return {
+    durationMs: Math.max(0, performanceNow() - startedAt),
+    phase,
+    ...slideIndex === void 0 ? {} : { slideIndex }
+  };
+}
+
 // src/parse.ts
 var DEFAULT_MAX_INPUT_BYTES = 100 * 1024 * 1024;
 function isParsedPresentation(source) {
@@ -11229,14 +11376,20 @@ async function parsePresentation(source, options = {}) {
       warnings: source.warnings
     };
   }
+  const downloadStartedAt = performanceNow();
   const buffer = await readSource(source, options);
+  if (typeof source === "string" || source instanceof URL) {
+    options.onPerformanceMeasurement?.(performanceMeasurement("download", downloadStartedAt));
+  }
   const format = detectFormat(buffer, options.formatHint);
   const bytes = new Uint8Array(buffer);
   throwIfAborted(options.signal);
+  const parsingStartedAt = performanceNow();
   const nativeDocument = await parseWithWasm(bytes, {
     formatHint: format,
     ...options.signal ? { signal: options.signal } : {}
   });
+  options.onPerformanceMeasurement?.(performanceMeasurement("wasm-parsing", parsingStartedAt));
   throwIfAborted(options.signal);
   if (!nativeDocument) {
     throw new PptxViewerError(
@@ -11309,11 +11462,15 @@ 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);
   });
+  const fontStartedAt = performanceNow();
   await fontManager.prepare(parsed.document);
+  getCurrentProps().onPerformanceMeasurement?.(
+    performanceMeasurement("embedded-font-preparation", fontStartedAt)
+  );
   if (!isCurrent()) {
     fontManager.destroy();
     throw new Error("Viewer adapter creation was superseded.");
@@ -11324,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);
@@ -11346,6 +11506,7 @@ async function createAdapter(target, parsed, props, getCurrentProps, onCurrentSl
   const normalized = new NormalizedPresentationViewer(target, parsed.document, callbacks);
   return {
     async render(mode, slideIndex) {
+      const startedAt = performanceNow();
       if (mode === "continuous") {
         const virtualization = typeof props.virtualization === "object" ? props.virtualization : {};
         await normalized.renderList({
@@ -11359,10 +11520,13 @@ async function createAdapter(target, parsed, props, getCurrentProps, onCurrentSl
       } else {
         await normalized.renderSlide(slideIndex);
       }
+      getCurrentProps().onPerformanceMeasurement?.(
+        performanceMeasurement("slide-dom-svg-rendering", startedAt, slideIndex)
+      );
     },
     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(),
@@ -11430,7 +11594,7 @@ var ReactPptxViewer = forwardRef(
       slideIndex: controlledSlide,
       initialSlide = 0,
       zoom: controlledZoom,
-      defaultZoom = 100,
+      defaultZoom,
       fitMode = "contain",
       showToolbar = false,
       showThumbnails = false,
@@ -11461,6 +11625,7 @@ var ReactPptxViewer = forwardRef(
       onError,
       onWarning,
       onSlideChange: _onSlideChange,
+      onZoomChange: _onZoomChange,
       onSlideRendered: _onSlideRendered,
       onSlideUnmounted: _onSlideUnmounted,
       onSearchResults,
@@ -11479,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 : {};
@@ -11493,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,
@@ -11541,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) ?? [];
@@ -11571,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(() => {
@@ -11591,7 +11796,8 @@ var ReactPptxViewer = forwardRef(
         signal: abort.signal,
         ...parseFormatHint ? { formatHint: parseFormatHint } : {},
         ...parseMaxInputBytes !== void 0 ? { maxInputBytes: parseMaxInputBytes } : {},
-        ...parseFetchInit ? { fetchInit: parseFetchInit } : {}
+        ...parseFetchInit ? { fetchInit: parseFetchInit } : {},
+        onPerformanceMeasurement: (measurement) => latestPropsRef.current.onPerformanceMeasurement?.(measurement)
       }).then((next) => {
         if (abort.signal.aborted) return;
         setParsed(next);
@@ -11646,6 +11852,7 @@ var ReactPptxViewer = forwardRef(
               setInternalSlide(index);
               latestPropsRef.current.onSlideChange?.(index);
             },
+            publishZoomChange,
             (warning) => {
               if (!isCurrent()) return;
               setRuntimeWarnings(
@@ -11667,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();
@@ -11709,7 +11911,7 @@ var ReactPptxViewer = forwardRef(
       overscanViewport,
       batchSize,
       scrollElement,
-      width
+      publishZoomChange
     ]);
     useEffect(() => {
       if (adapterState && controlledSlide !== void 0 && slide !== lastViewerSlideRef.current) {
@@ -11717,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 === "") {
@@ -11800,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: "+"
                     }
@@ -12284,6 +12485,404 @@ function usePptxViewerThumbnails(controller, options = {}) {
   );
 }
 
-export { OFFICE_FONT_FALLBACKS, PptxViewerError, ReactPptxViewer, initWasm, parsePresentation, presentationParsingDefaults, resolvePptxFontFamily, setWasmSource, usePptxModel, usePptxPresentation, usePptxViewer, usePptxViewerThumbnails };
+// src/thumbnail-renderer.ts
+var EMU_PER_CSS_PIXEL3 = 9525;
+var DEFAULT_MAX_DIMENSION3 = 160;
+var RenderQueue = class {
+  constructor(limit) {
+    this.limit = limit;
+  }
+  limit;
+  active = 0;
+  destroyed = false;
+  waiters = [];
+  acquire(signal) {
+    throwIfAborted(signal);
+    if (this.destroyed) return Promise.reject(abortedError());
+    return new Promise((resolve, reject) => {
+      const waiter = { resolve, reject, ...signal ? { signal } : {} };
+      if (signal) {
+        waiter.abort = () => {
+          const index = this.waiters.indexOf(waiter);
+          if (index >= 0) this.waiters.splice(index, 1);
+          reject(abortedError(signal.reason));
+        };
+        signal.addEventListener("abort", waiter.abort, { once: true });
+      }
+      this.waiters.push(waiter);
+      this.drain();
+    });
+  }
+  destroy() {
+    this.destroyed = true;
+    for (const waiter of this.waiters.splice(0)) {
+      if (waiter.abort && waiter.signal) {
+        waiter.signal.removeEventListener("abort", waiter.abort);
+      }
+      waiter.reject(abortedError());
+    }
+  }
+  drain() {
+    while (!this.destroyed && this.active < this.limit && this.waiters.length) {
+      const waiter = this.waiters.shift();
+      if (waiter.abort && waiter.signal) {
+        waiter.signal.removeEventListener("abort", waiter.abort);
+      }
+      if (waiter.signal?.aborted) {
+        waiter.reject(abortedError(waiter.signal.reason));
+        continue;
+      }
+      this.active += 1;
+      let released = false;
+      waiter.resolve(() => {
+        if (released) return;
+        released = true;
+        this.active -= 1;
+        this.drain();
+      });
+    }
+  }
+};
+function abortedError(reason) {
+  return new PptxViewerError("aborted", "Thumbnail rendering was cancelled.", { cause: reason });
+}
+function finitePositive3(value, fallback) {
+  return value !== void 0 && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function outputSize(presentation, options) {
+  const naturalWidth = Math.max(1, presentation.document.size.widthEmu / EMU_PER_CSS_PIXEL3);
+  const naturalHeight = Math.max(1, presentation.document.size.heightEmu / EMU_PER_CSS_PIXEL3);
+  const hasWidth = options.maxWidth !== void 0 && Number.isFinite(options.maxWidth) && options.maxWidth > 0;
+  const hasHeight = options.maxHeight !== void 0 && Number.isFinite(options.maxHeight) && options.maxHeight > 0;
+  const maxWidth = hasWidth ? options.maxWidth : hasHeight ? Number.POSITIVE_INFINITY : DEFAULT_MAX_DIMENSION3;
+  const maxHeight = hasHeight ? options.maxHeight : hasWidth ? Number.POSITIVE_INFINITY : DEFAULT_MAX_DIMENSION3;
+  const scale = Math.min(maxWidth / naturalWidth, maxHeight / naturalHeight);
+  return {
+    height: Math.max(1, Math.round(naturalHeight * scale)),
+    naturalHeight,
+    naturalWidth,
+    width: Math.max(1, Math.round(naturalWidth * scale))
+  };
+}
+function blobToDataUrl(blob, signal) {
+  return abortable(
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(String(reader.result));
+      reader.onerror = () => reject(reader.error ?? new Error("Could not read a slide asset."));
+      reader.readAsDataURL(blob);
+    }),
+    signal
+  );
+}
+async function inlineResourceUrl(url, signal) {
+  if (!/^(?:blob:|https?:)/i.test(url)) return url;
+  try {
+    const response = await fetch(url, signal ? { signal } : void 0);
+    if (!response.ok) return url;
+    return await blobToDataUrl(await response.blob(), signal);
+  } catch {
+    throwIfAborted(signal);
+    return url;
+  }
+}
+async function inlineResources(root, signal) {
+  const cache = /* @__PURE__ */ new Map();
+  const inline = (url) => {
+    let pending = cache.get(url);
+    if (!pending) {
+      pending = inlineResourceUrl(url, signal);
+      cache.set(url, pending);
+    }
+    return pending;
+  };
+  const elements = [root, ...root.querySelectorAll("*")];
+  await Promise.all(
+    elements.flatMap((element) => {
+      const attributeNames = ["src", "poster", ...element.localName === "image" ? ["href"] : []];
+      const attributes = attributeNames.map((name) => ({ name, value: element.getAttribute(name) })).filter((entry) => Boolean(entry.value));
+      const attributeTasks = attributes.map(async ({ name, value }) => {
+        element.setAttribute(name, await inline(value));
+      });
+      const styleTasks = Array.from(
+        { length: element.style.length },
+        (_, index) => element.style.item(index)
+      ).map((property) => ({ property, value: element.style.getPropertyValue(property) })).filter(({ value }) => value.includes("url(")).map(async ({ property, value }) => {
+        const urls = [...value.matchAll(/url\(["']?([^"')]+)["']?\)/g)].map((match) => match[1]);
+        let next = value;
+        for (const url of urls) next = next.replace(url, await inline(url));
+        element.style.setProperty(property, next);
+      });
+      return [...attributeTasks, ...styleTasks];
+    })
+  );
+}
+async function serializeSlide(slide, naturalWidth, naturalHeight, width, height, signal) {
+  const clone = slide.cloneNode(true);
+  clone.style.transform = "none";
+  clone.style.transformOrigin = "top left";
+  clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+  const sourceCanvases = slide.querySelectorAll("canvas");
+  const clonedCanvases = clone.querySelectorAll("canvas");
+  sourceCanvases.forEach((canvas, index) => {
+    const cloned = clonedCanvases[index];
+    if (!cloned) return;
+    try {
+      const image = document.createElement("img");
+      image.src = canvas.toDataURL("image/png");
+      image.setAttribute("style", cloned.getAttribute("style") ?? "");
+      cloned.replaceWith(image);
+    } catch {
+      cloned.remove();
+    }
+  });
+  await inlineResources(clone, signal);
+  const content = new XMLSerializer().serializeToString(clone);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${naturalWidth} ${naturalHeight}"><foreignObject width="${naturalWidth}" height="${naturalHeight}">${content}</foreignObject></svg>`;
+}
+async function abortable(promise, signal) {
+  throwIfAborted(signal);
+  if (!signal) return promise;
+  return new Promise((resolve, reject) => {
+    const abort = () => reject(abortedError(signal.reason));
+    signal.addEventListener("abort", abort, { once: true });
+    void promise.then(
+      (value) => {
+        signal.removeEventListener("abort", abort);
+        resolve(value);
+      },
+      (error) => {
+        signal.removeEventListener("abort", abort);
+        reject(error);
+      }
+    );
+  });
+}
+async function decodeElementImages(root, signal) {
+  const images = [...root.querySelectorAll("img")];
+  const svgImages = [...root.querySelectorAll("image")].map((image) => image.href.baseVal || image.getAttribute("href") || "").filter(Boolean);
+  await abortable(
+    Promise.all([
+      ...images.map(async (image) => {
+        if (typeof image.decode === "function") await image.decode().catch(() => void 0);
+      }),
+      ...svgImages.map(
+        (source) => new Promise((resolve) => {
+          const image = new Image();
+          image.onload = () => resolve();
+          image.onerror = () => resolve();
+          image.src = source;
+        })
+      )
+    ]).then(() => void 0),
+    signal
+  );
+}
+async function decodeSvg(svg, signal) {
+  return abortable(
+    new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve(image);
+      image.onerror = () => reject(new Error("The rendered slide SVG could not be decoded."));
+      image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+    }),
+    signal
+  );
+}
+function canvasToBlob(canvas, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error("The browser could not encode the thumbnail."));
+      },
+      "image/png",
+      quality
+    );
+  });
+}
+var ThumbnailRenderer = class {
+  constructor(presentation, options) {
+    this.presentation = presentation;
+    this.options = options;
+    if (typeof document === "undefined") {
+      throw new PptxViewerError(
+        "unsupported-environment",
+        "Thumbnail rendering requires a browser DOM."
+      );
+    }
+    const concurrency = Math.max(1, Math.floor(finitePositive3(options.concurrency, 2)));
+    this.queue = new RenderQueue(concurrency);
+    this.root = document.createElement("div");
+    this.root.setAttribute("aria-hidden", "true");
+    this.root.style.position = "fixed";
+    this.root.style.left = "-100000px";
+    this.root.style.top = "0";
+    this.root.style.pointerEvents = "none";
+    this.root.style.opacity = "0";
+    document.body.append(this.root);
+    this.fontManager = new PptxFontManager(
+      {
+        loadEmbeddedFonts: false,
+        reportMissingFonts: false,
+        waitForFonts: false,
+        ...options.fonts
+      },
+      (warning) => options.onWarning?.(warning)
+    );
+    this.viewer = new NormalizedPresentationViewer(this.root, presentation.document, {
+      onNodeError: (nodeId, error) => options.onWarning?.({
+        code: "degraded-rendering",
+        severity: "warning",
+        nodeId,
+        feature: "thumbnail-renderer",
+        message: `A slide element could not be rendered: ${error instanceof Error ? error.message : String(error)}`
+      })
+    });
+    const startedAt = performanceNow();
+    this.ready = this.fontManager.prepare(presentation.document).then(() => {
+      this.report(performanceMeasurement("embedded-font-preparation", startedAt));
+    });
+  }
+  presentation;
+  options;
+  ready;
+  fontManager;
+  queue;
+  root;
+  viewer;
+  destroyed = false;
+  async renderSlide(slideIndex, options = {}) {
+    const release = await this.queue.acquire(options.signal);
+    try {
+      this.assertAvailable(options.signal);
+      await abortable(this.ready, options.signal);
+      this.assertAvailable(options.signal);
+      if (!Number.isInteger(slideIndex) || slideIndex < 0 || slideIndex >= this.presentation.document.slides.length) {
+        throw new RangeError(`Slide ${slideIndex} does not exist.`);
+      }
+      const measurements = [];
+      const size = outputSize(this.presentation, options);
+      const target = document.createElement("div");
+      this.root.append(target);
+      const domStartedAt = performanceNow();
+      const handle = this.viewer.renderThumbnailToContainer(slideIndex, target, {
+        width: size.naturalWidth
+      });
+      try {
+        await abortable(handle.ready, options.signal);
+        this.fontManager.applyTo(handle.element, slideIndex);
+        const domDurationMs = performanceNow() - domStartedAt;
+        const decodeStartedAt = performanceNow();
+        await decodeElementImages(handle.element, options.signal);
+        let decodeDurationMs = performanceNow() - decodeStartedAt;
+        const serializationStartedAt = performanceNow();
+        const svg = await serializeSlide(
+          handle.element,
+          size.naturalWidth,
+          size.naturalHeight,
+          size.width,
+          size.height,
+          options.signal
+        );
+        this.record(
+          {
+            durationMs: Math.max(0, domDurationMs + performanceNow() - serializationStartedAt),
+            phase: "slide-dom-svg-rendering",
+            slideIndex
+          },
+          measurements
+        );
+        const output = options.output ?? "blob";
+        if (output === "svg") {
+          this.record(
+            { durationMs: Math.max(0, decodeDurationMs), phase: "image-decoding", slideIndex },
+            measurements
+          );
+          return this.result(svg, output, slideIndex, size, measurements);
+        }
+        const svgDecodeStartedAt = performanceNow();
+        const image = await decodeSvg(svg, options.signal);
+        decodeDurationMs += performanceNow() - svgDecodeStartedAt;
+        this.record(
+          { durationMs: Math.max(0, decodeDurationMs), phase: "image-decoding", slideIndex },
+          measurements
+        );
+        this.assertAvailable(options.signal);
+        const encodeStartedAt = performanceNow();
+        const pixelRatio = finitePositive3(options.pixelRatio, 1);
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(1, Math.round(size.width * pixelRatio));
+        canvas.height = Math.max(1, Math.round(size.height * pixelRatio));
+        canvas.style.width = `${size.width}px`;
+        canvas.style.height = `${size.height}px`;
+        const context = canvas.getContext("2d");
+        if (!context) throw new Error("The browser does not provide a 2D canvas renderer.");
+        context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        let data;
+        if (output === "canvas") data = canvas;
+        else if (output === "imageBitmap") {
+          if (typeof createImageBitmap !== "function") {
+            throw new PptxViewerError(
+              "unsupported-environment",
+              "ImageBitmap output is not supported by this browser."
+            );
+          }
+          data = await abortable(createImageBitmap(canvas), options.signal);
+        } else data = await abortable(canvasToBlob(canvas, options.quality), options.signal);
+        this.measure("raster-encoding", encodeStartedAt, slideIndex, measurements);
+        return this.result(data, output, slideIndex, size, measurements);
+      } finally {
+        handle.dispose();
+        target.remove();
+      }
+    } finally {
+      release();
+    }
+  }
+  renderSlides(slideIndexes, options = {}) {
+    return Promise.all(slideIndexes.map((slideIndex) => this.renderDynamic(slideIndex, options)));
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.queue.destroy();
+    this.viewer.destroy();
+    this.fontManager.destroy();
+    this.root.remove();
+  }
+  renderDynamic(slideIndex, options) {
+    return this.renderSlide(slideIndex, options);
+  }
+  assertAvailable(signal) {
+    throwIfAborted(signal);
+    if (this.destroyed) throw abortedError();
+  }
+  measure(phase, startedAt, slideIndex, measurements) {
+    this.record(performanceMeasurement(phase, startedAt, slideIndex), measurements);
+  }
+  record(measurement, measurements) {
+    measurements.push(measurement);
+    this.report(measurement);
+  }
+  report(measurement) {
+    this.options.onPerformanceMeasurement?.(measurement);
+  }
+  result(data, output, slideIndex, size, measurements) {
+    return {
+      data,
+      height: size.height,
+      measurements,
+      output,
+      slideIndex,
+      width: size.width
+    };
+  }
+};
+function createPptxThumbnailRenderer(presentation, options = {}) {
+  return new ThumbnailRenderer(presentation, options);
+}
+
+export { OFFICE_FONT_FALLBACKS, PptxViewerError, ReactPptxViewer, createPptxThumbnailRenderer, initWasm, parsePresentation, presentationParsingDefaults, resolvePptxFontFamily, setWasmSource, usePptxModel, usePptxPresentation, usePptxViewer, usePptxViewerThumbnails };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map