@netless/app-presentation 0.1.13-beta.0 → 0.1.13-beta.2

package/dist/index.d.ts

@@ -143,6 +143,40 @@ interface DisposableStore extends DisposableDisposer {
      */
     size(): number;
 }
+/**
+ * Create a {@link DisposableStore} that manages {@link Disposer}s and {@link IDisposable}s.
+ *
+ * A {@link DisposableStore} is also a {@link Disposer}, which means it can be the `dispose` method of an {@link IDisposable}.
+ *
+ * A {@link DisposableStore} is also an {@link IDisposable}, which means it can be managed by another {@link DisposableStore}.
+ *
+ * @example
+ * ```ts
+ * import { type IDisposable, disposableStore } from "@wopjs/disposable";
+ *
+ * class A implements IDisposable {
+ *   dispose = disposableStore()
+ *   constructor() {
+ *     this.dispose.add(...);
+ *   }
+ * }
+ *
+ * class B implements IDisposable {
+ *   dispose = disposableStore()
+ *   a = this.dispose.add(new A())
+ *   constructor() {
+ *     this.dispose.add(...);
+ *  }
+ * }
+ *
+ * const b = new B();
+ * b.dispose(); // dispose both `b` and `b.a`.
+ * ```
+ *
+ * @param disposables Optional array of {@link DisposableType}s added to the store.
+ * @returns A disposable store.
+ */
+declare function disposableStore(disposables?: DisposableType[]): DisposableStore;
 
 interface ILazyLoadInstance {
   /**
@@ -218,7 +252,10 @@ declare class Preload implements IDisposable {
     readonly preloadMap: Map<number, IPreloadMapValue>;
     touchIndex: number;
     preloadSize: number;
+    paused: boolean;
     constructor(pages: PresentationPage[]);
+    pause(): void;
+    resume(index?: number): void;
     touch(index: number, force?: boolean): void;
     private createLink;
     private destroySomeLink;
@@ -299,15 +336,27 @@ declare class Presentation implements IDisposable<void> {
     setReadonly(readonly: boolean): void;
     setPageIndex(pageIndex: number): void;
     togglePreview(showPreview?: boolean): void;
+    /** Release preview images while this presentation stays in the runtime cache. */
+    suspendPreviewResources(): void;
     onNewPageIndex(index: number, _origin: "navigation" | "keydown" | "input" | "preview"): void;
     page(): PresentationPage | undefined;
     updateImage(): void;
     /** Returns a modified URL that points to the thumbnail image. */
     thumbnail(src: string): string;
+    private destroyPreviewLazyload;
     private c;
     private isEditable;
 }
 
+type Subscriber<T> = (value: T) => void;
+type Unsubscriber = () => void;
+interface Readable<T> {
+    readonly value: T;
+    subscribe(this: void, run: Subscriber<T>): Unsubscriber;
+    reaction(this: void, run: Subscriber<T>): Unsubscriber;
+    dispose(value?: T): void;
+}
+
 interface ScrollbarOption {
     appId: string;
     readonly?: boolean;
@@ -420,6 +469,17 @@ interface PresentationAppOptions {
     goToPageByClick?: boolean;
     /** useClipView is used to set the presentation use clip view, it will be used in the presentation, and the presentation will be use clip view when the app is initialized */
     useClipView?: boolean;
+    /**
+     * Max time (ms) `setup()` waits for the first visible page image to load
+     * before resolving anyway. Default: 5_000.
+     */
+    setupReadyTimeout?: number;
+    /**
+     * Blur thumbnail degradation keeps cached (focused-lost) presentations on
+     * the low-res `previewURL` thumbnail to save memory. Enabled by default in
+     * maximized/minimized states; set `true` to disable it.
+     */
+    disableBlurThumbnailDegradation?: boolean;
 }
 interface PresentationController {
     readonly app: Presentation;
@@ -469,6 +529,29 @@ interface PresentationController {
     /** screenshot the current page */
     screenshotCurrentPageAsync: (context: CanvasRenderingContext2D, width?: number, height?: number) => Promise<void>;
 }
+/**
+ * Blur thumbnail degradation (see lazy-setup design doc §15): when the app
+ * loses focus but stays cached (multi-runtime cache mode), swap the scene
+ * background `<img>` src to the low-res `PptDescription.previewURL`
+ * (`page.thumbnail`) via a pure DOM change and pause full-image preloading;
+ * restore the full image when focus comes back. A page without a real
+ * thumbnail keeps its measurable view container, but its background layer is
+ * hidden and replaced with a static pixel after TeleBox commits the blur.
+ *
+ * While degraded, every load of a background `<img>` is re-degraded
+ * immediately via a capture-phase `load` listener on the view container
+ * (`load` does not bubble but capture works). This covers remote page turns,
+ * SDK React re-renders and the SDK's own background-image onError retries —
+ * any path that (re)renders the full-size image while the app stays blurred.
+ */
+declare const setupBlurThumbnailDegradation: (config: {
+    context: AppContext;
+    view: View;
+    pages: PresentationPage[];
+    pageIndex$: Readable<number>;
+    app: Presentation;
+    dispose: ReturnType<typeof disposableStore>;
+}) => void;
 declare const NetlessAppPresentation: NetlessApp<PresentationAttributes, {}, PresentationAppOptions, PresentationController> & {
     teardown(context: AppContext): void;
 };
@@ -496,5 +579,5 @@ declare const install: (register: RegisterFn, options?: InstallOptions) => Promi
 
 declare const version: string;
 
-export { NetlessAppPresentation, Presentation, Scrollbar, NetlessAppPresentation as default, install, version };
+export { NetlessAppPresentation, Presentation, Scrollbar, NetlessAppPresentation as default, install, setupBlurThumbnailDegradation, version };
 export type { InstallOptions, Logger, PresentationAppOptions, PresentationAttributes, PresentationConfig, PresentationController, PresentationPage, RegisterFn, ScrollbarEventCallback, ScrollbarOption };

package/dist/index.global.js

@@ -1150,6 +1150,9 @@ var NetlessAppPresentation = (function (exports) {
       // 当前触摸的索引
       this.touchIndex = 0;
       this.preloadSize = 0;
+      // 暂停后不再创建预加载链接（app 失焦降级时调用）；已插入的 link 会被移除，
+      // 挂起的 idle 回调重新进入 touch() 时也会被跳过
+      this.paused = false;
       this.preloadMap = new Map(pages.map((e, index) => [index, {
         src: e.src,
         state: 0 /* unloaded */
@@ -1157,7 +1160,21 @@ var NetlessAppPresentation = (function (exports) {
       this.preloadSize = this.preloadMap.size;
       this.touch(0, true);
     }
+    pause() {
+      if (this.paused)
+        return;
+      this.paused = true;
+      this.destroySomeLink();
+    }
+    resume(index) {
+      if (!this.paused)
+        return;
+      this.paused = false;
+      this.touch(index != null ? index : this.touchIndex, true);
+    }
     touch(index, force = false) {
+      if (this.paused)
+        return;
       if (index >= this.preloadSize) {
         this.touchIndex = 0;
       } else {
@@ -1299,10 +1316,7 @@ var NetlessAppPresentation = (function (exports) {
       if (this.initialized)
         return;
       this.initialized = true;
-      this.dispose.add(() => {
-        var _a2;
-        return (_a2 = this.previewLazyload) == null ? void 0 : _a2.destroy();
-      });
+      this.dispose.add(() => this.destroyPreviewLazyload());
       this.contentDOM.classList.toggle(this.c("readonly"), this.readonly);
       this.dom.appendChild(this.contentDOM);
       const previewMask = this.contentDOM.appendChild(document.createElement("div"));
@@ -1455,6 +1469,17 @@ var NetlessAppPresentation = (function (exports) {
         }
       }
     }
+    /** Release preview images while this presentation stays in the runtime cache. */
+    suspendPreviewResources() {
+      this.togglePreview(false);
+      this.destroyPreviewLazyload();
+      this.previewDOM.querySelectorAll("img").forEach((img) => {
+        img.removeAttribute("src");
+        img.removeAttribute("srcset");
+        img.removeAttribute("sizes");
+        LazyLoad.resetStatus(img);
+      });
+    }
     // [origin] means the cause:
     // - navigation: user clicked on the left / right button on footer
     // - input: user filled the bottom-right page number input box
@@ -1489,6 +1514,11 @@ var NetlessAppPresentation = (function (exports) {
         return src;
       }
     }
+    destroyPreviewLazyload() {
+      var _a;
+      (_a = this.previewLazyload) == null ? void 0 : _a.destroy();
+      this.previewLazyload = null;
+    }
     c(className) {
       return `${this.namespace}-${className}`;
     }
@@ -1501,7 +1531,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/style.scss?inline
-  var style_default = ".netless-app-presentation{height:100%;display:flex;flex-flow:column nowrap}.netless-app-presentation-content{position:relative;height:100%;overflow:hidden}.netless-app-presentation-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-presentation-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:#ededf0e6;box-shadow:inset -1px 0 #0000001c;transition:transform .4s;overflow:auto;overflow-y:scroll}.netless-app-presentation-preview-active .netless-app-presentation-preview-mask{display:block}.netless-app-presentation-preview-active .netless-app-presentation-preview{transform:translate(0)}.netless-app-presentation-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:#0000;outline:none;border:7px solid rgba(0,0,0,0);border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-presentation-preview-page:hover,.netless-app-presentation-preview-page.netless-app-presentation-preview-page-active{border-color:#444e601a}.netless-app-presentation-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-presentation-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-presentation-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-presentation-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:#f9f9fce6;transition:opacity .4s}.netless-app-presentation-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:#0000;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-footer-btn:hover{background:#ededf0e6}@media (hover: none){.netless-app-presentation-footer-btn:hover{background:#0000!important}}.netless-app-presentation-footer-btn>svg{width:100%;height:100%}.netless-app-presentation-footer-btn>svg:nth-of-type(2){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-presentation-footer-btn~.netless-app-presentation-footer-btn{margin-left:15px}.netless-app-presentation-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-presentation-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-presentation-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:#0000;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-page-number-input:hover,.netless-app-presentation-page-number-input:focus,.netless-app-presentation-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-presentation-readonly.netless-app-presentation-footer{display:none}.netless-app-presentation-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden;transition:opacity .2s}.netless-app-presentation-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-presentation-image>img{max-width:100%;max-height:100%;object-fit:contain}.telebox-color-scheme-dark .netless-app-presentation-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-presentation-page-number-input:active,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:focus,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-presentation-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-presentation-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-presentation-preview{background:#323232e6}.netless-app-presentation-scrollbar-container{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:101}.netless-app-presentation-scrollbar-container-x,.netless-app-presentation-scrollbar-container-y{position:absolute;pointer-events:none;display:flex;justify-content:center;box-sizing:border-box;padding:0}.netless-app-presentation-scrollbar-container-x{bottom:0;left:0;height:6px;width:100%;padding-right:6px}.netless-app-presentation-scrollbar-container-y{top:0;right:0;width:6px;height:100%;flex-direction:column;padding-bottom:6px}.netless-app-presentation-scrollbar-x,.netless-app-presentation-scrollbar-y{border-radius:2px;background-color:#1b1f4d4d;pointer-events:auto;cursor:default}.netless-app-presentation-scrollbar-x{height:6px}.netless-app-presentation-scrollbar-y{width:6px}";
+  var style_default = ".netless-app-presentation{height:100%;display:flex;flex-flow:column nowrap}.netless-app-presentation-content{position:relative;height:100%;overflow:hidden}.netless-app-presentation-background-suspended .background{display:none!important}.netless-app-presentation-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-presentation-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:#ededf0e6;box-shadow:inset -1px 0 #0000001c;transition:transform .4s;overflow:auto;overflow-y:scroll}.netless-app-presentation-preview-active .netless-app-presentation-preview-mask{display:block}.netless-app-presentation-preview-active .netless-app-presentation-preview{transform:translate(0)}.netless-app-presentation-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:#0000;outline:none;border:7px solid rgba(0,0,0,0);border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-presentation-preview-page:hover,.netless-app-presentation-preview-page.netless-app-presentation-preview-page-active{border-color:#444e601a}.netless-app-presentation-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-presentation-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-presentation-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-presentation-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:#f9f9fce6;transition:opacity .4s}.netless-app-presentation-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:#0000;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-footer-btn:hover{background:#ededf0e6}@media (hover: none){.netless-app-presentation-footer-btn:hover{background:#0000!important}}.netless-app-presentation-footer-btn>svg{width:100%;height:100%}.netless-app-presentation-footer-btn>svg:nth-of-type(2){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-presentation-footer-btn~.netless-app-presentation-footer-btn{margin-left:15px}.netless-app-presentation-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-presentation-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-presentation-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:#0000;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-page-number-input:hover,.netless-app-presentation-page-number-input:focus,.netless-app-presentation-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-presentation-readonly.netless-app-presentation-footer{display:none}.netless-app-presentation-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden;transition:opacity .2s}.netless-app-presentation-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-presentation-image>img{max-width:100%;max-height:100%;object-fit:contain}.telebox-color-scheme-dark .netless-app-presentation-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-presentation-page-number-input:active,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:focus,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-presentation-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-presentation-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-presentation-preview{background:#323232e6}.netless-app-presentation-scrollbar-container{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:101}.netless-app-presentation-scrollbar-container-x,.netless-app-presentation-scrollbar-container-y{position:absolute;pointer-events:none;display:flex;justify-content:center;box-sizing:border-box;padding:0}.netless-app-presentation-scrollbar-container-x{bottom:0;left:0;height:6px;width:100%;padding-right:6px}.netless-app-presentation-scrollbar-container-y{top:0;right:0;width:6px;height:100%;flex-direction:column;padding-bottom:6px}.netless-app-presentation-scrollbar-x,.netless-app-presentation-scrollbar-y{border-radius:2px;background-color:#1b1f4d4d;pointer-events:auto;cursor:default}.netless-app-presentation-scrollbar-x{height:6px}.netless-app-presentation-scrollbar-y{width:6px}";
 
   // src/store.ts
   function noop() {
@@ -1947,6 +1977,23 @@ var NetlessAppPresentation = (function (exports) {
     };
   }
 
+  // src/runtime-lifecycle.ts
+  var createPresentationRuntimeTeardown = (box, dispose2) => {
+    let tornDown = false;
+    return () => {
+      if (tornDown)
+        return;
+      tornDown = true;
+      try {
+        dispose2();
+      } finally {
+        box.unmountContent();
+        box.unmountFooter();
+        box.unmountStyles();
+      }
+    };
+  };
+
   // src/app-presentation.ts
   var import_debounce2 = __toESM(require_debounce());
   var emptySceneName = "$$empty$$";
@@ -1956,6 +2003,211 @@ var NetlessAppPresentation = (function (exports) {
     const size = fitPageSizeToOrigin(ppt, originSize);
     return __spreadProps(__spreadValues({}, size), { src: ppt.src, thumbnail: ppt.previewURL, name });
   };
+  var findBackgroundImage = (view) => {
+    const container = view.divElement;
+    if (!container || typeof container.querySelector !== "function")
+      return null;
+    return container.querySelector('img[alt="background"]');
+  };
+  var isBlurDegradationAllowed = (context) => {
+    var _a;
+    if (((_a = context.getWindowManager()) == null ? void 0 : _a.lazySetupInMaximizedMode) !== true) {
+      return false;
+    }
+    const boxStatus = context.getBoxStatus();
+    if (boxStatus) {
+      return boxStatus !== "normal";
+    }
+    const boxState = context.getWindowManager().boxState;
+    return boxState !== void 0 && boxState !== "normal";
+  };
+  var DEFAULT_SETUP_READY_TIMEOUT = 5e3;
+  var waitForCurrentPageImage = (view, timeoutMs, isDisposed) => {
+    return new Promise((resolve) => {
+      let settled = false;
+      let pollTimer;
+      const settle = (loaded) => {
+        if (settled)
+          return;
+        settled = true;
+        window.clearTimeout(timeoutTimer);
+        if (pollTimer !== void 0)
+          window.clearInterval(pollTimer);
+        resolve(loaded);
+      };
+      const timeoutTimer = window.setTimeout(() => settle(false), timeoutMs);
+      const check = () => {
+        if (isDisposed()) {
+          settle(false);
+          return;
+        }
+        const img = findBackgroundImage(view);
+        if (img && img.complete && img.naturalWidth > 0) {
+          settle(true);
+        }
+      };
+      check();
+      if (!settled) {
+        pollTimer = window.setInterval(check, 100);
+      }
+    });
+  };
+  var resolveImageUrl = (url) => {
+    try {
+      return new URL(url, window.location.href).href;
+    } catch (e) {
+      return url;
+    }
+  };
+  var TRANSPARENT_BACKGROUND = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+  var BACKGROUND_SUSPENDED_CLASS = "netless-app-presentation-background-suspended";
+  var hasUsableThumbnail = (page) => {
+    const thumbnailURL = page.thumbnail;
+    if (!thumbnailURL)
+      return false;
+    try {
+      const source = new URL(page.src, window.location.href);
+      const thumbnail = new URL(thumbnailURL, window.location.href);
+      const sameResourcePath = source.origin === thumbnail.origin && source.pathname === thumbnail.pathname;
+      if (/\.gif$/i.test(source.pathname) && sameResourcePath)
+        return false;
+    } catch (e) {
+      if (/\.gif(?:$|[?#])/i.test(page.src))
+        return false;
+    }
+    return resolveImageUrl(thumbnailURL) !== resolveImageUrl(page.src);
+  };
+  var setupBlurThumbnailDegradation = (config) => {
+    const { context, view, pages, pageIndex$, app, dispose: dispose2 } = config;
+    const box = context.getBox();
+    const boxBlurClass = box.wrapClassName("blur");
+    let blurEpisode = false;
+    let reDegradeEnabled = false;
+    let boxBlurred = box.$box.classList.contains(boxBlurClass);
+    const setBackgroundSuspended = (suspended) => {
+      app.whiteboardDOM.classList.toggle(
+        BACKGROUND_SUSPENDED_CLASS,
+        suspended
+      );
+    };
+    const degrade = () => {
+      const page = pages[pageIndex$.value];
+      if (!page)
+        return;
+      const thumbnailURL = page.thumbnail;
+      const img = findBackgroundImage(view);
+      if (!thumbnailURL || !hasUsableThumbnail(page)) {
+        if (boxBlurred) {
+          setBackgroundSuspended(true);
+          if (img && resolveImageUrl(img.src) !== resolveImageUrl(TRANSPARENT_BACKGROUND)) {
+            img.src = TRANSPARENT_BACKGROUND;
+          }
+        }
+        return;
+      }
+      setBackgroundSuspended(false);
+      if (img && resolveImageUrl(img.src) !== resolveImageUrl(thumbnailURL)) {
+        img.src = thumbnailURL;
+      }
+    };
+    const restore2 = () => {
+      const page = pages[pageIndex$.value];
+      const img = findBackgroundImage(view);
+      if (page && img && resolveImageUrl(img.src) !== resolveImageUrl(page.src)) {
+        img.src = page.src;
+      }
+      setBackgroundSuspended(false);
+    };
+    const suspendCachedResources = () => {
+      if (!blurEpisode || !boxBlurred)
+        return;
+      app.suspendPreviewResources();
+      const page = pages[pageIndex$.value];
+      if (!page || !hasUsableThumbnail(page) || reDegradeEnabled) {
+        degrade();
+      }
+    };
+    const restoreFocusedResources = () => {
+      if (!blurEpisode)
+        return;
+      blurEpisode = false;
+      reDegradeEnabled = false;
+      restore2();
+      app.preload.resume(pageIndex$.value);
+    };
+    const isBackgroundImg = (target) => {
+      var _a;
+      const el = target;
+      return Boolean(
+        el && el.tagName === "IMG" && ((_a = el.matches) == null ? void 0 : _a.call(el, 'img[alt="background"]'))
+      );
+    };
+    const ownsTarget = (target) => {
+      if (!isBackgroundImg(target))
+        return false;
+      const el = view.divElement;
+      return !!(el && el.contains(target));
+    };
+    const onImgLoad = (ev) => {
+      if (!blurEpisode || !reDegradeEnabled)
+        return;
+      if (!ownsTarget(ev.target))
+        return;
+      degrade();
+    };
+    const onImgError = (ev) => {
+      if (!blurEpisode || !reDegradeEnabled)
+        return;
+      if (!ownsTarget(ev.target))
+        return;
+      reDegradeEnabled = false;
+    };
+    const offFocus = context.emitter.on("focus", (isFocused) => {
+      if (isFocused) {
+        restoreFocusedResources();
+      } else {
+        if (!isBlurDegradationAllowed(context))
+          return;
+        blurEpisode = true;
+        reDegradeEnabled = true;
+        degrade();
+        app.preload.pause();
+        suspendCachedResources();
+      }
+    });
+    dispose2.add(offFocus);
+    const updateBoxBlurred = (blurred) => {
+      if (boxBlurred === blurred)
+        return;
+      boxBlurred = blurred;
+      if (blurred)
+        suspendCachedResources();
+      else
+        restoreFocusedResources();
+    };
+    const onBoxBlur = () => updateBoxBlurred(true);
+    const onBoxFocus = () => updateBoxBlurred(false);
+    box.events.on("blur", onBoxBlur);
+    box.events.on("focus", onBoxFocus);
+    dispose2.add(() => {
+      box.events.off("blur", onBoxBlur);
+      box.events.off("focus", onBoxFocus);
+    });
+    const boxClassObserver = new MutationObserver(() => {
+      updateBoxBlurred(box.$box.classList.contains(boxBlurClass));
+    });
+    boxClassObserver.observe(box.$box, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    dispose2.add(() => boxClassObserver.disconnect());
+    document.addEventListener("load", onImgLoad, true);
+    document.addEventListener("error", onImgError, true);
+    dispose2.add(() => {
+      document.removeEventListener("load", onImgLoad, true);
+      document.removeEventListener("error", onImgError, true);
+    });
+  };
   var createLogger = (room) => {
     if (room && room.logger) {
       return (...args) => room.logger.info(...args);
@@ -2031,7 +2283,7 @@ var NetlessAppPresentation = (function (exports) {
   var NetlessAppPresentation = {
     kind: "Presentation",
     setup(context) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       const diagnosticLogger = createDiagnosticLogger(context);
       const view = context.getView();
       if (!view)
@@ -2377,10 +2629,13 @@ var NetlessAppPresentation = (function (exports) {
           options.useClipView
         )
       );
-      app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.0";
+      app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.2";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       app.warn = warn;
+      if (pageIndex$.value !== 0) {
+        app.preload.touch(pageIndex$.value, true);
+      }
       const getCameraDiagnosticState = (reason, requestedCamera) => {
         const page = app.page();
         const pageSize = page && isValidSize(page) ? { width: page.width, height: page.height } : void 0;
@@ -2437,8 +2692,8 @@ var NetlessAppPresentation = (function (exports) {
         app.setDocsViewReadonly(true);
       }
       const goToPageByClick = () => {
-        var _a2, _b2, _c2, _d;
-        const currentApplianceName = (_d = (_c2 = (_b2 = (_a2 = context.getRoom()) == null ? void 0 : _a2.state) == null ? void 0 : _b2.memberState) == null ? void 0 : _c2.currentApplianceName) != null ? _d : "";
+        var _a2, _b2, _c2, _d2;
+        const currentApplianceName = (_d2 = (_c2 = (_b2 = (_a2 = context.getRoom()) == null ? void 0 : _a2.state) == null ? void 0 : _b2.memberState) == null ? void 0 : _c2.currentApplianceName) != null ? _d2 : "";
         if (!app.readonly && currentApplianceName === "clicker") {
           nextPage();
         }
@@ -2485,6 +2740,9 @@ var NetlessAppPresentation = (function (exports) {
           app.setReadonly(!isWritable);
         })
       );
+      if (!options.disableBlurThumbnailDegradation) {
+        setupBlurThumbnailDegradation({ context, view, pages, pageIndex$, app, dispose: dispose2 });
+      }
       const getOriginScale = () => {
         const page = app.page();
         if (!page || !isValidSize(page))
@@ -2613,6 +2871,10 @@ var NetlessAppPresentation = (function (exports) {
       };
       let disposed = false;
       let offDestroy;
+      const teardownRuntime = createPresentationRuntimeTeardown(
+        box,
+        dispose2
+      );
       const teardown = () => {
         if (disposed)
           return;
@@ -2620,7 +2882,7 @@ var NetlessAppPresentation = (function (exports) {
         const removeDestroy = offDestroy;
         offDestroy = void 0;
         removeDestroy == null ? void 0 : removeDestroy();
-        dispose2();
+        teardownRuntime();
       };
       offDestroy = context.emitter.on("destroy", teardown);
       teardownByContext.set(context, teardown);
@@ -2834,9 +3096,14 @@ var NetlessAppPresentation = (function (exports) {
           }
         )
       );
-      return prepareScenesPromise.then(
-        () => controller
-      );
+      const setupReadyTimeout = (_d = options.setupReadyTimeout) != null ? _d : DEFAULT_SETUP_READY_TIMEOUT;
+      return prepareScenesPromise.then(async () => {
+        const loaded = await waitForCurrentPageImage(view, setupReadyTimeout, () => disposed);
+        if (!loaded && !disposed) {
+          warn(`[Presentation] setup ready wait timed out after ${setupReadyTimeout}ms`);
+        }
+        return controller;
+      });
     },
     teardown(context) {
       var _a;
@@ -2922,13 +3189,14 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.13-beta.0";
+  var version = "0.1.13-beta.2";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;
   exports.Scrollbar = Scrollbar;
   exports.default = NetlessAppPresentation;
   exports.install = install;
+  exports.setupBlurThumbnailDegradation = setupBlurThumbnailDegradation;
   exports.version = version;
 
   Object.defineProperty(exports, '__esModule', { value: true });