@netless/app-presentation 0.1.13-beta.1 → 0.1.13-beta.3

package/dist/index.js

@@ -1154,6 +1154,7 @@ var _Preload = class _Preload {
     // 暂停后不再创建预加载链接（app 失焦降级时调用）；已插入的 link 会被移除，
     // 挂起的 idle 回调重新进入 touch() 时也会被跳过
     this.paused = false;
+    this.disposed = false;
     this.preloadMap = new Map(pages.map((e, index) => [index, {
       src: e.src,
       state: 0 /* unloaded */
@@ -1168,13 +1169,13 @@ var _Preload = class _Preload {
     this.destroySomeLink();
   }
   resume(index) {
-    if (!this.paused)
+    if (!this.paused || this.disposed)
       return;
     this.paused = false;
     this.touch(index != null ? index : this.touchIndex, true);
   }
   touch(index, force = false) {
-    if (this.paused)
+    if (this.paused || this.disposed)
       return;
     if (index >= this.preloadSize) {
       this.touchIndex = 0;
@@ -1182,11 +1183,11 @@ var _Preload = class _Preload {
       this.touchIndex = index;
     }
     const value = this.preloadMap.get(this.touchIndex);
-    if (value && value.state === 0 /* unloaded */) {
+    if (value && (value.state === 0 /* unloaded */ || force && value.state === 2 /* error */)) {
       this.createLink(this.touchIndex, force);
     }
     if (this.loadingLinks.size < _Preload.maxLinks) {
-      const willLoad = [...this.preloadMap.entries()].find(([i, e]) => i > this.touchIndex && e.state !== 1 /* loaded */);
+      const willLoad = [...this.preloadMap.entries()].find(([i, e]) => i > this.touchIndex && e.state === 0 /* unloaded */);
       if (willLoad) {
         this.requestAsyncCallBack(() => {
           this.touch(willLoad[0], false);
@@ -1219,21 +1220,27 @@ var _Preload = class _Preload {
       linkDom.as = "image";
       linkDom.href = value.src;
       linkDom.dataset.order = index + "";
-      document.head.appendChild(linkDom);
       linkDom.onload = () => {
+        var _a;
+        if (((_a = this.loadingLinks.get(index)) == null ? void 0 : _a.link) !== linkDom)
+          return;
         const value2 = this.preloadMap.get(index);
         if (value2) {
           value2.state = 1 /* loaded */;
           this.preloadMap.set(index, value2);
-          document.head.contains(linkDom) && document.head.removeChild(linkDom);
-          this.loadingLinks.delete(index);
+          this.removeLink(index, linkDom);
           this.touch(this.touchIndex + 1, false);
         }
       };
       linkDom.onerror = () => {
+        var _a;
+        if (((_a = this.loadingLinks.get(index)) == null ? void 0 : _a.link) !== linkDom)
+          return;
         const value2 = this.preloadMap.get(index);
-        if (value2 == null ? void 0 : value2.src) {
-          linkDom.href = value2.src;
+        if (value2) {
+          value2.state = 2 /* error */;
+          this.removeLink(index, linkDom);
+          this.touch(this.touchIndex + 1, false);
         }
       };
       this.loadingLinks.set(index, {
@@ -1242,17 +1249,23 @@ var _Preload = class _Preload {
       });
       value.state = 0 /* unloaded */;
       this.preloadMap.set(index, value);
+      document.head.appendChild(linkDom);
       return 0 /* unloaded */;
     }
     return 2 /* error */;
   }
+  removeLink(index, link) {
+    link.onload = null;
+    link.onerror = null;
+    document.head.contains(link) && document.head.removeChild(link);
+    this.loadingLinks.delete(index);
+  }
   destroySomeLink(excludeIndex) {
     for (const [index, { link }] of this.loadingLinks) {
       if (excludeIndex !== void 0 && index === excludeIndex) {
         continue;
       }
-      document.head.contains(link) && document.head.removeChild(link);
-      this.loadingLinks.delete(index);
+      this.removeLink(index, link);
     }
   }
   async requestAsyncCallBack(callBack, timeout) {
@@ -1270,6 +1283,7 @@ var _Preload = class _Preload {
     callBack();
   }
   dispose() {
+    this.disposed = true;
     this.destroySomeLink();
     this.preloadMap.clear();
   }
@@ -1317,10 +1331,7 @@ var Presentation = class {
     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"));
@@ -1473,6 +1484,17 @@ var Presentation = class {
       }
     }
   }
+  /** 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
@@ -1507,6 +1529,11 @@ var Presentation = class {
       return src;
     }
   }
+  destroyPreviewLazyload() {
+    var _a;
+    (_a = this.previewLazyload) == null ? void 0 : _a.destroy();
+    this.previewLazyload = null;
+  }
   c(className) {
     return `${this.namespace}-${className}`;
   }
@@ -1519,7 +1546,7 @@ var Presentation = class {
 };
 
 // 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() {
@@ -1965,6 +1992,66 @@ function cameraToSharedViewport(camera, viewSize, referenceSize) {
   };
 }
 
+// src/runtime-lifecycle.ts
+var createPresentationRuntimeTeardown = (box, dispose2) => {
+  let tornDown = false;
+  return () => {
+    var _a, _b, _c;
+    if (tornDown)
+      return;
+    tornDown = true;
+    try {
+      dispose2();
+    } finally {
+      try {
+        (_a = box.unmountContent) == null ? void 0 : _a.call(box);
+      } finally {
+        try {
+          (_b = box.unmountFooter) == null ? void 0 : _b.call(box);
+        } finally {
+          (_c = box.unmountStyles) == null ? void 0 : _c.call(box);
+        }
+      }
+    }
+  };
+};
+
+// src/setup-ready.ts
+var waitForCurrentPageImage = (getImage, timeoutMs, isDisposed) => {
+  return new Promise((resolve) => {
+    let settled = false;
+    let pollTimer;
+    const settle = (result) => {
+      if (settled)
+        return;
+      settled = true;
+      window.clearTimeout(timeoutTimer);
+      if (pollTimer !== void 0)
+        window.clearInterval(pollTimer);
+      resolve(result);
+    };
+    const timeoutTimer = window.setTimeout(() => settle("timeout"), timeoutMs);
+    const check = () => {
+      var _a, _b;
+      if (isDisposed()) {
+        settle("disposed");
+        return;
+      }
+      const img = getImage();
+      if (img == null ? void 0 : img.complete) {
+        if (img.naturalWidth > 0) {
+          settle("loaded");
+        } else if (img.currentSrc || ((_a = img.getAttribute("src")) == null ? void 0 : _a.trim()) || ((_b = img.getAttribute("srcset")) == null ? void 0 : _b.trim())) {
+          settle("error");
+        }
+      }
+    };
+    check();
+    if (!settled)
+      pollTimer = window.setInterval(check, 100);
+  });
+};
+
 // src/app-presentation.ts
 var import_debounce2 = __toESM(require_debounce());
 var emptySceneName = "$$empty$$";
@@ -1981,6 +2068,10 @@ var findBackgroundImage = (view) => {
   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";
@@ -1989,36 +2080,6 @@ var isBlurDegradationAllowed = (context) => {
   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;
@@ -2026,17 +2087,55 @@ var resolveImageUrl = (url) => {
     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 == null ? void 0 : page.thumbnail))
+    if (!page)
       return;
+    const thumbnailURL = page.thumbnail;
     const img = findBackgroundImage(view);
-    if (img && resolveImageUrl(img.src) !== resolveImageUrl(page.thumbnail)) {
-      img.src = page.thumbnail;
+    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 = () => {
@@ -2045,6 +2144,24 @@ var setupBlurThumbnailDegradation = (config) => {
     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;
@@ -2053,28 +2170,29 @@ var setupBlurThumbnailDegradation = (config) => {
       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 (!isBackgroundImg(ev.target))
+    if (!ownsTarget(ev.target))
       return;
     degrade();
   };
   const onImgError = (ev) => {
     if (!blurEpisode || !reDegradeEnabled)
       return;
-    if (!isBackgroundImg(ev.target))
+    if (!ownsTarget(ev.target))
       return;
     reDegradeEnabled = false;
   };
   const offFocus = context.emitter.on("focus", (isFocused) => {
     if (isFocused) {
-      if (blurEpisode) {
-        blurEpisode = false;
-        reDegradeEnabled = false;
-        restore2();
-        app.preload.resume(pageIndex$.value);
-      }
+      restoreFocusedResources();
     } else {
       if (!isBlurDegradationAllowed(context))
         return;
@@ -2082,29 +2200,41 @@ var setupBlurThumbnailDegradation = (config) => {
       reDegradeEnabled = true;
       degrade();
       app.preload.pause();
+      suspendCachedResources();
     }
   });
   dispose2.add(offFocus);
-  const viewEl = view.divElement;
-  if (viewEl && typeof viewEl.addEventListener === "function") {
-    viewEl.addEventListener("load", onImgLoad, true);
-    viewEl.addEventListener("error", onImgError, true);
-    dispose2.add(() => {
-      viewEl.removeEventListener("load", onImgLoad, true);
-      viewEl.removeEventListener("error", onImgError, true);
-    });
-  } else {
-    warnOnceMissingViewContainer(view);
-  }
-};
-var degradedWarnedViews = /* @__PURE__ */ new WeakSet();
-var warnOnceMissingViewContainer = (view) => {
-  if (degradedWarnedViews.has(view))
-    return;
-  degradedWarnedViews.add(view);
-  console.warn(
-    "[Presentation]: blur thumbnail degradation runs without re-degrade coverage (view container unavailable)"
-  );
+  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) {
@@ -2527,7 +2657,7 @@ var NetlessAppPresentation = {
         options.useClipView
       )
     );
-    app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.1";
+    app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.3";
     app.scaleDocsToFit = scaleDocsToFit;
     app.log = log;
     app.warn = warn;
@@ -2769,6 +2899,10 @@ var NetlessAppPresentation = {
     };
     let disposed = false;
     let offDestroy;
+    const teardownRuntime = createPresentationRuntimeTeardown(
+      box,
+      dispose2
+    );
     const teardown = () => {
       if (disposed)
         return;
@@ -2776,7 +2910,7 @@ var NetlessAppPresentation = {
       const removeDestroy = offDestroy;
       offDestroy = void 0;
       removeDestroy == null ? void 0 : removeDestroy();
-      dispose2();
+      teardownRuntime();
     };
     offDestroy = context.emitter.on("destroy", teardown);
     teardownByContext.set(context, teardown);
@@ -2992,9 +3126,15 @@ var NetlessAppPresentation = {
     );
     const setupReadyTimeout = (_d = options.setupReadyTimeout) != null ? _d : DEFAULT_SETUP_READY_TIMEOUT;
     return prepareScenesPromise.then(async () => {
-      const loaded = await waitForCurrentPageImage(view, setupReadyTimeout, () => disposed);
-      if (!loaded) {
+      const result = await waitForCurrentPageImage(
+        () => findBackgroundImage(view),
+        setupReadyTimeout,
+        () => disposed
+      );
+      if (result === "timeout" && !disposed) {
         warn(`[Presentation] setup ready wait timed out after ${setupReadyTimeout}ms`);
+      } else if (result === "error" && !disposed) {
+        warn("[Presentation] setup page image failed to load; continuing setup");
       }
       return controller;
     });
@@ -3083,12 +3223,13 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.13-beta.1";
+var version = "0.1.13-beta.3";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;
 exports.Scrollbar = Scrollbar;
 exports.default = NetlessAppPresentation;
 exports.install = install;
+exports.setupBlurThumbnailDegradation = setupBlurThumbnailDegradation;
 exports.version = version;
 //# sourceMappingURL=index.js.map