@file-viewer/pptx 2.1.16 → 2.1.18

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { PptxViewer } from './viewer';
 export { createPptxWorker } from './worker';
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from './options';
-export type { NativePptxEngineOptions, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from './types';
+export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from './types';

package/dist/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const pptxViewerCss = "\n.flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}\n.flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}\n.flyfish-pptx-content[data-render-state=\"loading\"]{opacity:.82}\n.flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}\n.flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}\n\n.slide{position:relative;border:0;border-radius:0;overflow:hidden;margin-bottom:50px;margin-left:auto;margin-right:auto;z-index:100}\n.slide div.block{position:absolute;top:0;left:0;width:100%;line-height:1}\n.slide div.content{display:flex;flex-direction:column}\n.slide div.diagram-content{display:flex;flex-direction:column}\n.slide div.content-rtl{display:flex;flex-direction:column;direction:rtl}\n.slide .pregraph-rtl{direction:rtl}\n.slide .pregraph-ltr{direction:ltr}\n.slide .pregraph-inherit{direction:inherit}\n.slide .slide-prgrph{width:100%}\n.slide .line-break-br::before{content:\"\\A\";white-space:pre}\n.slide div.v-up{justify-content:flex-start}\n.slide div.v-mid{justify-content:center}\n.slide div.v-down{justify-content:flex-end}\n.slide div.h-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.h-left-rtl{justify-content:flex-end;align-items:flex-end;text-align:left}\n.slide div.h-mid{justify-content:center;align-items:center;text-align:center}\n.slide div.h-right{justify-content:flex-end;align-items:flex-end;text-align:right}\n.slide div.h-right-rtl{justify-content:flex-start;align-items:flex-start;text-align:right}\n.slide div.h-just,.slide div.h-dist{text-align:justify}\n.slide div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.up-center{justify-content:flex-start;align-items:center}\n.slide div.up-right{justify-content:flex-start;align-items:flex-end}\n.slide div.center-left{justify-content:center;align-items:flex-start;text-align:left}\n.slide div.center-center{justify-content:center;align-items:center}\n.slide div.center-right{justify-content:center;align-items:flex-end}\n.slide div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}\n.slide div.down-center{justify-content:flex-end;align-items:center}\n.slide div.down-right{justify-content:flex-end;align-items:flex-end}\n.slide li.slide{margin:10px 0;font-size:18px}\n.slide table{position:absolute}\n.slide svg.drawing{position:absolute;overflow:visible}\n\n.flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}\n";
-export declare const ensurePptxViewerStyles: (documentRef: Document) => void;
+export declare const pptxViewerCss = "\n.flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}\n.flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}\n.flyfish-pptx-content[data-render-state=\"loading\"]{opacity:.82}\n.flyfish-pptx-slide-slot{display:flow-root;box-sizing:border-box;width:100%;min-width:0}\n.flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}\n.flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}\n\n.slide{position:relative;border:0;border-radius:0;overflow:hidden;margin-bottom:50px;margin-left:auto;margin-right:auto;z-index:100}\n.slide div.block{position:absolute;top:0;left:0;width:100%;line-height:1}\n.slide div.content{display:flex;flex-direction:column}\n.slide div.diagram-content{display:flex;flex-direction:column}\n.slide div.content-rtl{display:flex;flex-direction:column;direction:rtl}\n.slide .pregraph-rtl{direction:rtl}\n.slide .pregraph-ltr{direction:ltr}\n.slide .pregraph-inherit{direction:inherit}\n.slide .slide-prgrph{width:100%}\n.slide .line-break-br::before{content:\"\\A\";white-space:pre}\n.slide div.v-up{justify-content:flex-start}\n.slide div.v-mid{justify-content:center}\n.slide div.v-down{justify-content:flex-end}\n.slide div.h-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.h-left-rtl{justify-content:flex-end;align-items:flex-end;text-align:left}\n.slide div.h-mid{justify-content:center;align-items:center;text-align:center}\n.slide div.h-right{justify-content:flex-end;align-items:flex-end;text-align:right}\n.slide div.h-right-rtl{justify-content:flex-start;align-items:flex-start;text-align:right}\n.slide div.h-just,.slide div.h-dist{text-align:justify}\n.slide div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.up-center{justify-content:flex-start;align-items:center}\n.slide div.up-right{justify-content:flex-start;align-items:flex-end}\n.slide div.center-left{justify-content:center;align-items:flex-start;text-align:left}\n.slide div.center-center{justify-content:center;align-items:center}\n.slide div.center-right{justify-content:center;align-items:flex-end}\n.slide div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}\n.slide div.down-center{justify-content:flex-end;align-items:center}\n.slide div.down-right{justify-content:flex-end;align-items:flex-end}\n.slide li.slide{margin:10px 0;font-size:18px}\n.slide table{position:absolute}\n.slide svg.drawing{position:absolute;overflow:visible}\n\n.flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}\n.flyfish-pptx-slide-slot:last-of-type > .slide{margin-bottom:0}\n";
+export declare const ensurePptxViewerStyles: (documentRef: Document, root?: Document | ShadowRoot) => void;

package/dist/styles.js

@@ -35,18 +35,27 @@ export const pptxViewerCss = `
 .flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}
 .flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}
 .flyfish-pptx-content[data-render-state="loading"]{opacity:.82}
+.flyfish-pptx-slide-slot{display:flow-root;box-sizing:border-box;width:100%;min-width:0}
 .flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}
 .flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}
 ${legacyPptxCss}
 .flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}
+.flyfish-pptx-slide-slot:last-of-type > .slide{margin-bottom:0}
 `;
 const PPTX_STYLE_ID = 'flyfish-pptx-native-style';
-export const ensurePptxViewerStyles = (documentRef) => {
-    if (documentRef.getElementById(PPTX_STYLE_ID)) {
+export const ensurePptxViewerStyles = (documentRef, root = documentRef) => {
+    if (root instanceof Document && root.getElementById(PPTX_STYLE_ID)) {
+        return;
+    }
+    if (!(root instanceof Document) && root.querySelector(`#${PPTX_STYLE_ID}`)) {
         return;
     }
     const style = documentRef.createElement('style');
     style.id = PPTX_STYLE_ID;
     style.textContent = pptxViewerCss;
-    (documentRef.head || documentRef.documentElement).appendChild(style);
+    if (root instanceof Document) {
+        (root.head || root.documentElement).appendChild(style);
+        return;
+    }
+    root.appendChild(style);
 };

package/dist/types.d.ts

@@ -34,7 +34,17 @@ export interface PptxSlideSize {
     height?: number;
     [key: string]: unknown;
 }
+export type PptxDiagnosticErrorCode = 'PPTX_FILE_EMPTY' | 'PPTX_FILE_TOO_LARGE' | 'PPTX_INVALID_ZIP' | 'PPTX_MISSING_CONTENT_TYPES' | 'PPTX_MISSING_PRESENTATION' | 'PPTX_NO_SLIDES' | 'PPTX_MISSING_SLIDE' | 'PPTX_SLIDE_RENDER_FAILED' | 'PPTX_WORKER_FAILED' | 'PPTX_PARSE_FAILED' | (string & {});
+export interface PptxDiagnosticError {
+    name: 'PptxDiagnosticError';
+    code: PptxDiagnosticErrorCode;
+    stage?: string;
+    message: string;
+    detail?: string;
+    hint?: string;
+}
 export interface PptxViewerOptions extends PptxWorkerFactoryOptions {
+    styleRoot?: ShadowRoot;
     fitMode?: PptxFitMode;
     zoomPercent?: number;
     zipLimits?: PptxZipLimits;

package/dist/viewer.d.ts

@@ -13,8 +13,15 @@ export declare class PptxViewer {
     private userZoomPercent;
     private currentZoomPercent;
     private thumbnailElement;
+    private slideSize;
+    private slideRecords;
+    private slideWindowTarget;
+    private slideWindowListeners;
+    private slideWindowFrame;
+    private charts;
     private disposed;
     private completed;
+    private readonly handleSlideWindowChange;
     private constructor();
     get zoomPercent(): number;
     open(): Promise<void>;
@@ -25,9 +32,31 @@ export declare class PptxViewer {
     private appendGlobalCss;
     private showThumbnail;
     private clearThumbnail;
+    private shouldWindowSlides;
+    private getSlideWindowOptions;
+    private getEstimatedSlideHeight;
+    private appendWindowedSlide;
+    private createWindowedSlideRecord;
+    private renderSlideRecord;
+    private unmountSlideRecord;
+    private updateMeasuredSlideHeight;
+    private syncWindowedPlaceholderHeights;
+    private scheduleSlideWindowUpdate;
+    private updateSlideWindow;
+    private getWindowedSlideIndexes;
+    private getDistanceFromViewport;
+    private getSlideViewport;
+    private attachSlideWindowListeners;
+    private addSlideWindowListener;
+    private detachSlideWindowListeners;
+    private findSlideWindowTarget;
+    private postProcessRenderedContent;
+    private postProcessSlideRecord;
     private complete;
     private fail;
     private attachResizeObserver;
     private scheduleResize;
     private resize;
+    private getMountedSlideElements;
+    private isSlideElement;
 }

package/dist/viewer.js

@@ -9,13 +9,39 @@ const toPercent = (value) => {
     const numeric = typeof value === 'number' && Number.isFinite(value) ? value : 100;
     return clamp(numeric, 25, 300);
 };
+const stringifyErrorDetail = (error) => {
+    if (error === undefined || error === null) {
+        return '';
+    }
+    if (typeof error === 'string') {
+        return error;
+    }
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+    try {
+        const serialized = JSON.stringify(error);
+        return serialized && serialized !== '{}' ? serialized : String(error);
+    }
+    catch {
+        return String(error);
+    }
+};
+const createPptxDiagnosticError = (code, stage, message, detailOrError, hint) => ({
+    name: 'PptxDiagnosticError',
+    code,
+    stage,
+    message,
+    detail: stringifyErrorDetail(detailOrError),
+    hint,
+});
 const ensureZipWithinLimits = (buffer, options) => {
     const limits = {
         ...RECOMMENDED_ZIP_LIMITS,
         ...options.zipLimits,
     };
     if (limits.maxFileBytes && buffer.byteLength > limits.maxFileBytes) {
-        throw new Error(`PPTX file is too large to preview safely (${buffer.byteLength} bytes).`);
+        throw createPptxDiagnosticError('PPTX_FILE_TOO_LARGE', 'preflight', 'PPTX 文件超过浏览器安全预览体积限制。', `${buffer.byteLength} bytes > ${limits.maxFileBytes} bytes`, '请压缩图片、拆分演示文稿，或在业务侧提高 zipLimits.maxFileBytes 后再预览。');
     }
 };
 const appendHtml = (container, html) => {
@@ -25,6 +51,21 @@ const appendHtml = (container, html) => {
     container.append(template.content);
     return nodes[0] || null;
 };
+const DEFAULT_INITIAL_SLIDES = 3;
+const DEFAULT_BATCH_SIZE = 4;
+const DEFAULT_OVERSCAN_VIEWPORTS = 1.5;
+const DEFAULT_SLIDE_HEIGHT = 540;
+const DEFAULT_SLIDE_GAP = 50;
+const toPositiveInteger = (value, fallback, min = 1, max = Number.MAX_SAFE_INTEGER) => {
+    const numeric = typeof value === 'number' && Number.isFinite(value)
+        ? Math.floor(value)
+        : fallback;
+    return clamp(numeric, min, max);
+};
+const toPositiveNumber = (value, fallback, min = 0, max = Number.MAX_SAFE_INTEGER) => {
+    const numeric = typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+    return clamp(numeric, min, max);
+};
 export class PptxViewer {
     static async open(buffer, target, options = {}) {
         const viewer = new PptxViewer(buffer, target, options);
@@ -39,8 +80,15 @@ export class PptxViewer {
         this.userZoomPercent = 100;
         this.currentZoomPercent = 100;
         this.thumbnailElement = null;
+        this.slideSize = null;
+        this.slideRecords = [];
+        this.slideWindowTarget = null;
+        this.slideWindowListeners = [];
+        this.slideWindowFrame = 0;
+        this.charts = null;
         this.disposed = false;
         this.completed = false;
+        this.handleSlideWindowChange = () => this.scheduleSlideWindowUpdate();
         this.buffer = buffer;
         this.target = target;
         this.options = options;
@@ -59,9 +107,10 @@ export class PptxViewer {
     }
     async open() {
         ensureZipWithinLimits(this.buffer, this.options);
-        ensurePptxViewerStyles(this.target.ownerDocument || document);
+        ensurePptxViewerStyles(this.target.ownerDocument || document, this.options.styleRoot);
         this.target.replaceChildren(this.scaleBox);
         this.attachResizeObserver();
+        this.attachSlideWindowListeners();
         this.startWorker();
     }
     async setZoom(percent) {
@@ -70,7 +119,7 @@ export class PptxViewer {
         this.scheduleResize();
     }
     destroy() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.disposed = true;
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.worker = null;
@@ -79,22 +128,40 @@ export class PptxViewer {
         if (this.resizeFrame) {
             (_c = this.target.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.cancelAnimationFrame(this.resizeFrame);
         }
+        if (this.slideWindowFrame) {
+            (_d = this.target.ownerDocument.defaultView) === null || _d === void 0 ? void 0 : _d.cancelAnimationFrame(this.slideWindowFrame);
+        }
+        this.detachSlideWindowListeners();
         this.target.replaceChildren();
     }
     startWorker() {
         var _a;
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.completed = false;
+        this.charts = null;
+        this.slideSize = null;
+        this.slideRecords = [];
+        this.content.replaceChildren();
         this.content.dataset.renderState = 'loading';
-        this.worker = createPptxWorker(this.options);
+        try {
+            this.worker = createPptxWorker(this.options);
+        }
+        catch (error) {
+            throw createPptxDiagnosticError('PPTX_WORKER_FAILED', 'start-worker', 'PPTX Worker 启动失败。', error, '请检查 presentation.workerUrl、Worker 文件是否 200 返回、MIME/CSP/跨域策略是否允许加载。');
+        }
         this.worker.addEventListener('message', event => this.processMessage(event.data));
-        this.worker.addEventListener('error', event => this.fail(event.error || event.message));
-        this.worker.postMessage({
-            type: 'processPPTX',
-            data: this.buffer,
-            IE11: false,
-            options: resolvePptxEngineOptions(this.options.engineOptions),
-        });
+        this.worker.addEventListener('error', event => this.fail(createPptxDiagnosticError('PPTX_WORKER_FAILED', 'worker-runtime', 'PPTX Worker 运行失败。', event.error || event.message, '请检查 Worker 脚本是否完整、浏览器控制台是否有 CSP/MIME/跨域或语法错误。')));
+        try {
+            this.worker.postMessage({
+                type: 'processPPTX',
+                data: this.buffer,
+                IE11: false,
+                options: resolvePptxEngineOptions(this.options.engineOptions),
+            });
+        }
+        catch (error) {
+            throw createPptxDiagnosticError('PPTX_WORKER_FAILED', 'post-worker-message', 'PPTX 数据发送到 Worker 失败。', error, '请确认浏览器支持 Worker 消息传递，并避免传入已被释放或不可克隆的数据。');
+        }
     }
     processMessage(message) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -104,9 +171,14 @@ export class PptxViewer {
         switch (message.type) {
             case 'slide': {
                 this.clearThumbnail();
-                const element = appendHtml(this.content, String(message.data || ''));
-                this.scheduleResize();
-                (_b = (_a = this.options).onSlideRendered) === null || _b === void 0 ? void 0 : _b.call(_a, Number(message.slide_num || 0), element);
+                if (this.shouldWindowSlides()) {
+                    this.appendWindowedSlide(String(message.data || ''), Number(message.slide_num || 0));
+                }
+                else {
+                    const element = appendHtml(this.content, String(message.data || ''));
+                    this.scheduleResize();
+                    (_b = (_a = this.options).onSlideRendered) === null || _b === void 0 ? void 0 : _b.call(_a, Number(message.slide_num || 0), element);
+                }
                 break;
             }
             case 'pptx-thumb':
@@ -114,6 +186,8 @@ export class PptxViewer {
                 (_d = (_c = this.options).onThumbnail) === null || _d === void 0 ? void 0 : _d.call(_c, String(message.data || ''));
                 break;
             case 'slideSize':
+                this.slideSize = (message.data || {});
+                this.syncWindowedPlaceholderHeights();
                 (_f = (_e = this.options).onSlideSize) === null || _f === void 0 ? void 0 : _f.call(_e, (message.data || {}));
                 break;
             case 'globalCSS':
@@ -160,17 +234,283 @@ export class PptxViewer {
         (_a = this.thumbnailElement) === null || _a === void 0 ? void 0 : _a.remove();
         this.thumbnailElement = null;
     }
+    shouldWindowSlides() {
+        var _a;
+        return Boolean(this.options.lazySlides || ((_a = this.options.listOptions) === null || _a === void 0 ? void 0 : _a.windowed));
+    }
+    getSlideWindowOptions() {
+        const listOptions = this.options.listOptions || {};
+        return {
+            initialSlides: toPositiveInteger(listOptions.initialSlides, DEFAULT_INITIAL_SLIDES, 1, 20),
+            batchSize: toPositiveInteger(listOptions.batchSize, DEFAULT_BATCH_SIZE, 1, 20),
+            overscanViewport: toPositiveNumber(listOptions.overscanViewport, DEFAULT_OVERSCAN_VIEWPORTS, 0.25, 6),
+        };
+    }
+    getEstimatedSlideHeight() {
+        var _a, _b;
+        const sizeHeight = Number((_a = this.slideSize) === null || _a === void 0 ? void 0 : _a.height);
+        const measuredHeight = (_b = this.slideRecords.find(record => record.estimatedHeight > 0)) === null || _b === void 0 ? void 0 : _b.estimatedHeight;
+        return Math.ceil((Number.isFinite(sizeHeight) && sizeHeight > 0
+            ? sizeHeight + DEFAULT_SLIDE_GAP
+            : measuredHeight || DEFAULT_SLIDE_HEIGHT + DEFAULT_SLIDE_GAP));
+    }
+    appendWindowedSlide(html, slideNumber) {
+        const record = this.createWindowedSlideRecord(html, slideNumber || this.slideRecords.length + 1);
+        this.slideRecords.push(record);
+        this.content.append(record.slot);
+        if (this.slideRecords.length <= this.getSlideWindowOptions().initialSlides) {
+            this.renderSlideRecord(record);
+        }
+        this.scheduleResize();
+        this.scheduleSlideWindowUpdate();
+    }
+    createWindowedSlideRecord(html, slideNumber) {
+        const slot = this.target.ownerDocument.createElement('div');
+        const estimatedHeight = this.getEstimatedSlideHeight();
+        slot.className = 'flyfish-pptx-slide-slot';
+        slot.dataset.slideNumber = String(slideNumber);
+        slot.style.minHeight = `${estimatedHeight}px`;
+        return {
+            slideNumber,
+            html,
+            slot,
+            element: null,
+            estimatedHeight,
+            rendered: false,
+            notified: false,
+            postProcessed: false,
+        };
+    }
+    renderSlideRecord(record) {
+        var _a, _b;
+        if (record.rendered || this.disposed) {
+            return;
+        }
+        record.slot.replaceChildren();
+        record.element = appendHtml(record.slot, record.html);
+        record.rendered = true;
+        record.postProcessed = false;
+        this.updateMeasuredSlideHeight(record);
+        if (!record.notified) {
+            record.notified = true;
+            (_b = (_a = this.options).onSlideRendered) === null || _b === void 0 ? void 0 : _b.call(_a, record.slideNumber, record.element);
+        }
+        if (this.completed) {
+            void this.postProcessSlideRecord(record).finally(() => this.scheduleResize());
+        }
+        this.scheduleResize();
+    }
+    unmountSlideRecord(record) {
+        if (!record.rendered) {
+            return;
+        }
+        this.updateMeasuredSlideHeight(record);
+        record.slot.replaceChildren();
+        record.element = null;
+        record.rendered = false;
+        record.postProcessed = false;
+    }
+    updateMeasuredSlideHeight(record) {
+        var _a;
+        const HTMLElementCtor = ((_a = this.target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.HTMLElement) || HTMLElement;
+        if (!(record.element instanceof HTMLElementCtor)) {
+            return;
+        }
+        const view = this.target.ownerDocument.defaultView || window;
+        const computed = view.getComputedStyle(record.element);
+        const marginTop = parseFloat(computed.marginTop) || 0;
+        const marginBottom = parseFloat(computed.marginBottom) || 0;
+        const measuredHeight = Math.ceil(record.element.offsetHeight + marginTop + marginBottom);
+        const nextHeight = Math.max(measuredHeight, record.estimatedHeight, 1);
+        record.estimatedHeight = nextHeight;
+        record.slot.style.minHeight = `${nextHeight}px`;
+    }
+    syncWindowedPlaceholderHeights() {
+        if (!this.shouldWindowSlides() || !this.slideRecords.length) {
+            return;
+        }
+        const estimatedHeight = this.getEstimatedSlideHeight();
+        for (const record of this.slideRecords) {
+            if (!record.rendered && record.estimatedHeight < estimatedHeight) {
+                record.estimatedHeight = estimatedHeight;
+                record.slot.style.minHeight = `${estimatedHeight}px`;
+            }
+        }
+        this.scheduleResize();
+    }
+    scheduleSlideWindowUpdate() {
+        if (!this.shouldWindowSlides() || this.disposed) {
+            return;
+        }
+        const view = this.target.ownerDocument.defaultView || window;
+        if (this.slideWindowFrame) {
+            view.cancelAnimationFrame(this.slideWindowFrame);
+        }
+        this.slideWindowFrame = view.requestAnimationFrame(() => this.updateSlideWindow());
+    }
+    updateSlideWindow() {
+        this.slideWindowFrame = 0;
+        if (!this.shouldWindowSlides() || !this.slideRecords.length || this.disposed) {
+            return;
+        }
+        const windowOptions = this.getSlideWindowOptions();
+        const indexesToRender = this.getWindowedSlideIndexes(windowOptions);
+        let changed = false;
+        this.slideRecords.forEach((record, index) => {
+            if (indexesToRender.has(index)) {
+                const wasRendered = record.rendered;
+                this.renderSlideRecord(record);
+                changed || (changed = !wasRendered);
+            }
+            else if (record.rendered) {
+                this.unmountSlideRecord(record);
+                changed = true;
+            }
+        });
+        if (changed) {
+            this.scheduleResize();
+        }
+    }
+    getWindowedSlideIndexes(windowOptions) {
+        const viewport = this.getSlideViewport();
+        const maxMountedSlides = Math.max(windowOptions.initialSlides, windowOptions.initialSlides + windowOptions.batchSize * 4, 12);
+        const selected = new Set();
+        for (let index = 0; index < Math.min(windowOptions.initialSlides, this.slideRecords.length); index += 1) {
+            selected.add(index);
+        }
+        const candidates = this.slideRecords
+            .map((record, index) => ({
+            index,
+            distance: this.getDistanceFromViewport(record, viewport, windowOptions.overscanViewport),
+        }))
+            .filter(candidate => candidate.distance !== Number.POSITIVE_INFINITY)
+            .sort((a, b) => a.distance - b.distance || a.index - b.index);
+        const closestFallback = candidates[0];
+        for (const candidate of candidates) {
+            if (candidate.distance > 0 && selected.size >= windowOptions.initialSlides) {
+                continue;
+            }
+            selected.add(candidate.index);
+        }
+        if (closestFallback) {
+            selected.add(closestFallback.index);
+        }
+        if (selected.size <= maxMountedSlides) {
+            return selected;
+        }
+        const capped = new Set();
+        for (let index = 0; index < Math.min(windowOptions.initialSlides, this.slideRecords.length); index += 1) {
+            capped.add(index);
+        }
+        for (const candidate of candidates) {
+            if (capped.size >= maxMountedSlides) {
+                break;
+            }
+            capped.add(candidate.index);
+        }
+        return capped;
+    }
+    getDistanceFromViewport(record, viewport, overscanViewport) {
+        const rect = record.slot.getBoundingClientRect();
+        const overscan = viewport.height * overscanViewport;
+        const top = viewport.top - overscan;
+        const bottom = viewport.bottom + overscan;
+        if (rect.bottom >= top && rect.top <= bottom) {
+            return 0;
+        }
+        if (rect.bottom < top) {
+            return top - rect.bottom;
+        }
+        if (rect.top > bottom) {
+            return rect.top - bottom;
+        }
+        return Number.POSITIVE_INFINITY;
+    }
+    getSlideViewport() {
+        const view = this.target.ownerDocument.defaultView || window;
+        const HTMLElementCtor = view.HTMLElement;
+        if (this.slideWindowTarget instanceof HTMLElementCtor) {
+            const rect = this.slideWindowTarget.getBoundingClientRect();
+            const height = Math.max(1, rect.height || this.slideWindowTarget.clientHeight || view.innerHeight || 1);
+            return {
+                top: rect.top,
+                bottom: rect.top + height,
+                height,
+            };
+        }
+        const height = Math.max(1, view.innerHeight || this.target.ownerDocument.documentElement.clientHeight || DEFAULT_SLIDE_HEIGHT);
+        return {
+            top: 0,
+            bottom: height,
+            height,
+        };
+    }
+    attachSlideWindowListeners() {
+        if (!this.shouldWindowSlides()) {
+            return;
+        }
+        this.detachSlideWindowListeners();
+        const view = this.target.ownerDocument.defaultView || window;
+        this.slideWindowTarget = this.findSlideWindowTarget();
+        this.addSlideWindowListener(view, 'scroll');
+        this.addSlideWindowListener(view, 'resize');
+        if (this.slideWindowTarget && this.slideWindowTarget !== view) {
+            this.addSlideWindowListener(this.slideWindowTarget, 'scroll');
+        }
+    }
+    addSlideWindowListener(target, type) {
+        target.addEventListener(type, this.handleSlideWindowChange, { passive: true });
+        this.slideWindowListeners.push({ target, type, listener: this.handleSlideWindowChange });
+    }
+    detachSlideWindowListeners() {
+        for (const { target, type, listener } of this.slideWindowListeners) {
+            target.removeEventListener(type, listener);
+        }
+        this.slideWindowListeners = [];
+        this.slideWindowTarget = null;
+    }
+    findSlideWindowTarget() {
+        const view = this.target.ownerDocument.defaultView || window;
+        let element = this.target.parentElement;
+        while (element && element !== this.target.ownerDocument.body && element !== this.target.ownerDocument.documentElement) {
+            const style = view.getComputedStyle(element);
+            if (/(auto|scroll|overlay)/.test(`${style.overflowY} ${style.overflow}`)) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        return view;
+    }
+    async postProcessRenderedContent(charts) {
+        if (!this.shouldWindowSlides()) {
+            await renderPptxPostProcessing(charts, this.content);
+            return;
+        }
+        await Promise.all(this.slideRecords
+            .filter(record => record.rendered)
+            .map(record => this.postProcessSlideRecord(record)));
+    }
+    async postProcessSlideRecord(record) {
+        if (!record.rendered || record.postProcessed || this.disposed) {
+            return;
+        }
+        await renderPptxPostProcessing(this.charts, record.slot);
+        record.postProcessed = true;
+        this.updateMeasuredSlideHeight(record);
+    }
     async complete(charts) {
         var _a, _b, _c;
         if (this.disposed || this.completed) {
             return;
         }
         this.completed = true;
+        this.charts = charts;
         this.content.dataset.renderState = 'ready';
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         this.worker = null;
+        this.scheduleSlideWindowUpdate();
         this.scheduleResize();
-        await renderPptxPostProcessing(charts, this.content);
+        await this.postProcessRenderedContent(charts);
         this.scheduleResize();
         (_c = (_b = this.options).onRenderComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
     }
@@ -189,7 +529,10 @@ export class PptxViewer {
         if (typeof ResizeObserver === 'undefined') {
             return;
         }
-        this.resizeObserver = new ResizeObserver(() => this.scheduleResize());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleResize();
+            this.scheduleSlideWindowUpdate();
+        });
         this.resizeObserver.observe(this.target);
         if (this.target.parentElement) {
             this.resizeObserver.observe(this.target.parentElement);
@@ -204,14 +547,10 @@ export class PptxViewer {
     }
     resize() {
         var _a, _b;
-        const HTMLElementCtor = ((_a = this.target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.HTMLElement) || HTMLElement;
-        const slides = Array.from(this.content.children).filter((child) => {
-            return child instanceof HTMLElementCtor && (child.classList.contains('slide') || child.tagName === 'SECTION');
-        });
-        if (!slides.length) {
-            return;
-        }
-        const slideWidth = Math.max(...slides.map(slide => slide.offsetWidth), 0);
+        const slides = this.getMountedSlideElements();
+        const sizeWidth = Number((_a = this.slideSize) === null || _a === void 0 ? void 0 : _a.width);
+        const fallbackWidth = Number.isFinite(sizeWidth) && sizeWidth > 0 ? sizeWidth : 0;
+        const slideWidth = Math.max(...slides.map(slide => slide.offsetWidth), fallbackWidth);
         if (!slideWidth) {
             return;
         }
@@ -227,4 +566,29 @@ export class PptxViewer {
         this.scaleBox.style.height = `${Math.ceil(this.content.scrollHeight * effectiveScale)}px`;
         this.scaleBox.style.minHeight = '';
     }
+    getMountedSlideElements() {
+        var _a;
+        const HTMLElementCtor = ((_a = this.target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.HTMLElement) || HTMLElement;
+        const slides = [];
+        for (const child of Array.from(this.content.children)) {
+            if (!(child instanceof HTMLElementCtor)) {
+                continue;
+            }
+            if (this.isSlideElement(child)) {
+                slides.push(child);
+                continue;
+            }
+            if (!child.classList.contains('flyfish-pptx-slide-slot')) {
+                continue;
+            }
+            const firstChild = child.firstElementChild;
+            if (firstChild instanceof HTMLElementCtor && this.isSlideElement(firstChild)) {
+                slides.push(firstChild);
+            }
+        }
+        return slides;
+    }
+    isSlideElement(element) {
+        return element.classList.contains('slide') || element.tagName === 'SECTION';
+    }
 }