@prose-reader/core 1.132.0 → 1.134.0

package/dist/index.umd.cjs

@@ -13,14 +13,82 @@
       };
       containerElement.addEventListener(`scroll`, onScroll);
     });
-    reader.hookManager.register(`item.onDocumentLoad`, ({ layers }) => {
-      var _a, _b;
-      const frame = (_a = layers[0]) == null ? void 0 : _a.element;
-      if (!(frame instanceof HTMLIFrameElement)) return;
-      (_b = frame.contentDocument) == null ? void 0 : _b.body.setAttribute(`tabindex`, `-1`);
+    reader.hookManager.register(`item.onDocumentLoad`, ({ itemId }) => {
+      var _a;
+      const item = reader.spineItemsManager.get(itemId);
+      const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
+      if (!frame) return;
+      (_a = frame.contentDocument) == null ? void 0 : _a.body.setAttribute(`tabindex`, `-1`);
     });
     return reader;
   };
+  const mapKeysTo = (keys) => {
+    return operators.map((obj) => {
+      return Object.entries(obj).reduce(
+        (acc, [key, entry]) => {
+          if (keys.includes(key)) {
+            return {
+              ...acc,
+              [key]: entry
+            };
+          }
+          return acc;
+        },
+        {}
+      );
+    });
+  };
+  function observeResize(element) {
+    return new rxjs.Observable((observer) => {
+      const resizeObserver = new ResizeObserver((entries) => {
+        observer.next(entries);
+      });
+      resizeObserver.observe(element);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    });
+  }
+  const waitForSwitch = (waitForStream) => (stream) => stream.pipe(
+    operators.switchMap(
+      (value) => waitForStream.pipe(
+        operators.first(),
+        operators.map(() => value)
+      )
+    )
+  );
+  const deferNextResult = (stream) => {
+    let value;
+    const sub = stream.subscribe((result) => {
+      value = { result };
+    });
+    return () => {
+      sub.unsubscribe();
+      if (value) {
+        return rxjs.of(value.result);
+      }
+      return stream;
+    };
+  };
+  function idle() {
+    return new rxjs.Observable((observer) => {
+      if (window.requestIdleCallback) {
+        const handle = window.requestIdleCallback(() => {
+          observer.next();
+          observer.complete();
+        });
+        return () => cancelIdleCallback(handle);
+      }
+      const timeout = setTimeout(() => {
+        observer.next();
+        observer.complete();
+      }, 1);
+      return () => clearTimeout(timeout);
+    });
+  }
+  function deferIdle(callback) {
+    return rxjs.defer(() => idle().pipe(operators.switchMap(callback)));
+  }
   class SettingsManagerOverload {
     constructor(initialSettings, settingsManager) {
       this.settingsManager = settingsManager;
@@ -75,6 +143,12 @@
         ...this.outputSettings
       };
     }
+    watch(keys) {
+      return this.values$.pipe(
+        mapKeysTo(keys),
+        operators.distinctUntilChanged(shared.isShallowEqual)
+      );
+    }
     destroy() {
       this.outputSettingsUpdateSubject.complete();
     }
@@ -216,12 +290,11 @@
   `;
     const applyChangeToSpineItems = (requireLayout) => {
       reader.spineItemsManager.items.forEach((item) => {
-        if (item.item.renditionLayout !== `pre-paginated`) {
-          item.renderer.layers.forEach((layer) => {
-            if (layer.element instanceof HTMLIFrameElement) {
-              upsertCSS(layer.element, `prose-reader-fonts`, getStyle());
-            }
-          });
+        if (item.renditionLayout !== `pre-paginated`) {
+          const frame = item.renderer.getDocumentFrame();
+          if (frame) {
+            upsertCSS(frame, `prose-reader-fonts`, getStyle());
+          }
         }
       });
       if (requireLayout) {
@@ -230,12 +303,11 @@
     };
     reader.hookManager.register(`item.onDocumentLoad`, ({ itemId }) => {
       const item = reader.spineItemsManager.get(itemId);
-      if ((item == null ? void 0 : item.item.renditionLayout) !== `pre-paginated`) {
-        item == null ? void 0 : item.renderer.layers.forEach((layer) => {
-          if (layer.element instanceof HTMLIFrameElement) {
-            upsertCSS(layer.element, `prose-reader-fonts`, getStyle());
-          }
-        });
+      if ((item == null ? void 0 : item.renditionLayout) !== `pre-paginated`) {
+        const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
+        if (frame) {
+          upsertCSS(frame, `prose-reader-fonts`, getStyle());
+        }
       }
     });
     const shouldRequireLayout = (source) => source.pipe(
@@ -292,8 +364,7 @@
           ...spineItems.map(
             (item) => item.loaded$.pipe(
               rxjs.switchMap(() => {
-                var _a;
-                const element = (_a = item.renderer.layers[0]) == null ? void 0 : _a.element;
+                const element = item.renderer.getDocumentFrame();
                 return element instanceof HTMLIFrameElement && (element == null ? void 0 : element.contentDocument) ? navigateOnKey(element.contentDocument) : rxjs.EMPTY;
               })
             )
@@ -358,85 +429,17 @@
     );
     return rxjs.merge(updateOverlayElement$, handleViewportLock$);
   };
-  const mapKeysTo = (keys) => {
-    return operators.map((obj) => {
-      return Object.entries(obj).reduce(
-        (acc, [key, entry]) => {
-          if (keys.includes(key)) {
-            return {
-              ...acc,
-              [key]: entry
-            };
-          }
-          return acc;
-        },
-        {}
-      );
-    });
-  };
-  function observeResize(element) {
-    return new rxjs.Observable((observer) => {
-      const resizeObserver = new ResizeObserver((entries) => {
-        observer.next(entries);
-      });
-      resizeObserver.observe(element);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    });
-  }
-  const waitForSwitch = (waitForStream) => (stream) => stream.pipe(
-    operators.switchMap(
-      (value) => waitForStream.pipe(
-        operators.first(),
-        operators.map(() => value)
-      )
-    )
-  );
-  const deferNextResult = (stream) => {
-    let value;
-    const sub = stream.subscribe((result) => {
-      value = { result };
-    });
-    return () => {
-      sub.unsubscribe();
-      if (value) {
-        return rxjs.of(value.result);
-      }
-      return stream;
-    };
-  };
-  function idle() {
-    return new rxjs.Observable((observer) => {
-      if (window.requestIdleCallback) {
-        const handle = window.requestIdleCallback(() => {
-          observer.next();
-          observer.complete();
-        });
-        return () => cancelIdleCallback(handle);
-      }
-      const timeout = setTimeout(() => {
-        observer.next();
-        observer.complete();
-      }, 1);
-      return () => clearTimeout(timeout);
-    });
-  }
-  function deferIdle(callback) {
-    return rxjs.defer(() => idle().pipe(operators.switchMap(callback)));
-  }
   const fixReflowable = (reader) => {
     reader.hookManager.register(
       `item.onAfterLayout`,
       ({ item, blankPagePosition, minimumWidth }) => {
-        var _a, _b;
         const spineItem = reader.spineItemsManager.get(item.id);
-        const element = (_a = spineItem == null ? void 0 : spineItem.renderer.layers[0]) == null ? void 0 : _a.element;
-        if (!((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable`) || !(element instanceof HTMLIFrameElement))
+        const element = spineItem == null ? void 0 : spineItem.renderer.getDocumentFrame();
+        if (!((spineItem == null ? void 0 : spineItem.renditionLayout) === `reflowable`) || !(element instanceof HTMLIFrameElement))
           return;
         const { hasViewport } = getFrameViewportInfo(element);
         const { width: pageWidth } = reader.context.getPageSize();
-        const frameElement = (_b = spineItem == null ? void 0 : spineItem.renderer.layers[0]) == null ? void 0 : _b.element;
+        const frameElement = spineItem == null ? void 0 : spineItem.renderer.getDocumentFrame();
         if (hasViewport) {
           const spineManagerWantAFullWidthItem = pageWidth < minimumWidth;
           const noBlankPageAsked = blankPagePosition === `none`;
@@ -503,8 +506,7 @@
     reader.hookManager.register(`onViewportOffsetAdjust`, () => {
       let hasRedrawn = false;
       reader.spineItemsManager.items.forEach((item) => {
-        var _a;
-        const frame = (_a = item.renderer.layers[0]) == null ? void 0 : _a.element;
+        const frame = item.renderer.getDocumentFrame();
         if (!hasRedrawn && frame) {
           void frame.getBoundingClientRect().left;
           hasRedrawn = true;
@@ -517,7 +519,7 @@
       const isImageType = !!(mimeType == null ? void 0 : mimeType.startsWith(`image/`));
       const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsManager.values;
       const pageSize = reader.context.getPageSize();
-      if ((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable` && !isImageType) {
+      if ((spineItem == null ? void 0 : spineItem.renditionLayout) === `reflowable` && !isImageType) {
         let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
         const columnHeight = pageSize.height - pageVerticalMargin2 * 2;
         let width = pageSize.width - pageHorizontalMargin2 * 2;
@@ -527,12 +529,12 @@
           columnWidth = columnHeight;
           columnGap = pageVerticalMargin2 * 2;
         }
-        spineItem == null ? void 0 : spineItem.renderer.layers.forEach((layer) => {
-          if (layer.element instanceof HTMLIFrameElement) {
-            upsertCSS(
-              layer.element,
-              `prose-layout-enhancer-css`,
-              `
+        const frame = spineItem == null ? void 0 : spineItem.renderer.getDocumentFrame();
+        if (frame) {
+          upsertCSS(
+            frame,
+            `prose-layout-enhancer-css`,
+            `
               body {
                 width: ${width}px !important;
                 margin: ${pageVerticalMargin2}px ${pageHorizontalMargin2}px !important;
@@ -541,8 +543,8 @@
                 height: ${columnHeight}px !important;
               }
               img, video, audio, object, svg {
-                max-width: ${columnWidth}px !important;
-                max-height: ${columnHeight}px !important;
+                -max-width: ${columnWidth}px !important;
+                -max-height: ${columnHeight}px !important;
               }
               table {
                 max-width: ${columnWidth}px !important;
@@ -551,9 +553,8 @@
                 max-width: ${columnWidth}px;
               }
             `
-            );
-          }
-        });
+          );
+        }
       }
     });
     fixReflowable(reader);
@@ -601,9 +602,7 @@
       })
     );
     const movingSafePan$ = createMovingSafePan$(reader);
-    settingsManager.values$.pipe(
-      mapKeysTo([`pageHorizontalMargin`, `pageVerticalMargin`]),
-      operators.distinctUntilChanged(shared.isShallowEqual),
+    settingsManager.watch([`pageHorizontalMargin`, `pageVerticalMargin`]).pipe(
       operators.skip(1),
       operators.tap(() => {
         reader.layout();
@@ -681,6 +680,16 @@
         else console.info(wrap(ROOT_NAMESPACE), ...data);
       }
     },
+    debug: namespace ? Function.prototype.bind.call(
+      console.debug,
+      console,
+      wrap(`${ROOT_NAMESPACE}`),
+      wrap(namespace)
+    ) : Function.prototype.bind.call(
+      console.debug,
+      console,
+      wrap(`${ROOT_NAMESPACE}`)
+    ),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     error: (...data) => {
       console.error(...data);
@@ -739,10 +748,10 @@
       }
       return false;
     };
-    reader.hookManager.register(`item.onDocumentLoad`, ({ layers }) => {
-      var _a;
-      const frame = (_a = layers[0]) == null ? void 0 : _a.element;
-      if (!(frame instanceof HTMLIFrameElement)) return;
+    reader.hookManager.register(`item.onDocumentLoad`, ({ itemId }) => {
+      const item = reader.spineItemsManager.get(itemId);
+      const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
+      if (!frame) return;
       if (frame == null ? void 0 : frame.contentDocument) {
         Array.from(frame.contentDocument.querySelectorAll(`a`)).forEach(
           (element) => element.addEventListener(`click`, (e) => {
@@ -991,6 +1000,7 @@
     }
     return navigationResolver.getAdjustedPositionForSpread(navigation);
   };
+  const report$4 = Report.namespace(`navigation`);
   class ManualNavigator {
     constructor(reader) {
       this.reader = reader;
@@ -1149,6 +1159,12 @@
         pageIndex,
         spineItemId
       });
+      report$4.debug(`.goToPageOfSpineItem()`, {
+        pageIndex,
+        spineItemId,
+        ...rest,
+        position
+      });
       this.reader.navigation.navigate({
         position,
         ...rest
@@ -1161,6 +1177,11 @@
       const foundInfo = this.reader.spine.locator.getSpineInfoFromAbsolutePageIndex({
         absolutePageIndex
       });
+      report$4.debug(`.goToAbsolutePageIndex()`, {
+        absolutePageIndex,
+        ...rest,
+        foundInfo
+      });
       if (foundInfo) {
         const position = this.reader.navigation.navigationResolver.getNavigationForSpineItemPage(
           {
@@ -1520,7 +1541,7 @@
     const { itemIndex } = reader.cfi.parseCfi(item.cfi);
     const spineItem = reader.spineItemsManager.get(itemIndex);
     if (!spineItem) return rxjs.of({ ...item, meta: { ...item.meta, itemIndex } });
-    if (spineItem.item.renditionLayout === `pre-paginated`) {
+    if (spineItem.renditionLayout === `pre-paginated`) {
       itemPageIndex = 0;
     }
     return idle().pipe(
@@ -1529,7 +1550,7 @@
         var _a2, _b, _c;
         let range = void 0;
         const { node: startNode, offset: startOffset } = reader.cfi.resolveCfi({ cfi: item.cfi }) ?? {};
-        if (spineItem.item.renditionLayout !== `pre-paginated` && startNode) {
+        if (spineItem.renditionLayout !== `pre-paginated` && startNode) {
           itemPageIndex = reader.spine.locator.spineItemLocator.getSpineItemPageIndexFromNode(
             startNode,
             startOffset ?? 0,
@@ -1568,13 +1589,7 @@
   };
   const createLocator = (reader) => (resources) => {
     return deferIdle(() => {
-      if (!resources.length)
-        return rxjs.of({ isStale: false, data: resources });
-      const StaleSymbol = Symbol("stale");
-      const markStale$ = reader.layout$.pipe(
-        rxjs.startWith(null),
-        rxjs.map(() => StaleSymbol)
-      );
+      if (!resources.length) return rxjs.of(resources);
       const consolidate$ = reader.layout$.pipe(
         rxjs.debounceTime(10),
         rxjs.startWith(null),
@@ -1588,27 +1603,20 @@
           );
         }, resources)
       );
-      const run$ = rxjs.merge(markStale$, consolidate$).pipe(
-        rxjs.scan(
-          (acc, value) => {
-            if (value === StaleSymbol) {
-              return {
-                ...acc,
-                isStale: true
-              };
-            }
-            return {
-              isStale: false,
-              data: value
-            };
-          },
-          {
-            isStale: true,
-            data: resources
-          }
-        )
+      const reflowableItemIndexes = resources.map((item) => reader.cfi.parseCfi(item.cfi).itemIndex).filter(isDefined).filter((index) => {
+        var _a;
+        return ((_a = reader.spineItemsManager.get(index)) == null ? void 0 : _a.renditionLayout) === `reflowable`;
+      });
+      const release = reader.spine.spineItemsLoader.forceOpen(
+        reflowableItemIndexes
+      );
+      return consolidate$.pipe(
+        rxjs.finalize(() => {
+          setTimeout(() => {
+            release();
+          }, 1e3);
+        })
       );
-      return run$;
     });
   };
   Report.namespace(NAMESPACE$6);
@@ -1685,22 +1693,20 @@
     };
     const applyChangeToSpineItem = () => {
       reader.spineItemsManager.items.forEach((item) => {
-        item.renderer.layers.forEach((layer) => {
-          if (layer.element instanceof HTMLIFrameElement) {
-            upsertCSS(layer.element, `prose-reader-theme`, getStyle());
-          }
-        });
+        const frame = item.renderer.getDocumentFrame();
+        if (frame) {
+          upsertCSS(frame, `prose-reader-theme`, getStyle());
+        }
         applyChangeToSpineItemElement({ container: item.element });
       });
     };
     reader.hookManager.register(`item.onDocumentLoad`, ({ itemId }) => {
       const item = reader.spineItemsManager.get(itemId);
-      if ((item == null ? void 0 : item.item.renditionLayout) !== "pre-paginated") {
-        item == null ? void 0 : item.renderer.layers.forEach((layer) => {
-          if (layer.element instanceof HTMLIFrameElement) {
-            upsertCSS(layer.element, `prose-reader-theme`, getStyle());
-          }
-        });
+      if ((item == null ? void 0 : item.renditionLayout) !== "pre-paginated") {
+        const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
+        if (frame) {
+          upsertCSS(frame, `prose-reader-theme`, getStyle());
+        }
       }
     });
     reader.spineItemsManager.items$.pipe(
@@ -2039,10 +2045,13 @@
   }
   class DestroyableClass {
     constructor() {
+      this.isDestroyed = false;
       this.destroySubject = new rxjs.Subject();
       this.destroy$ = this.destroySubject.asObservable();
     }
     destroy() {
+      if (this.isDestroyed) return;
+      this.isDestroyed = true;
       this.destroySubject.next();
       this.destroySubject.complete();
     }
@@ -2408,10 +2417,10 @@
       return void 0;
     };
     const getFirstNodeOrRangeAtPage = (pageIndex, spineItem) => {
-      var _a, _b, _c;
+      var _a, _b;
       const pageSize = context.getPageSize();
-      const frame = (_b = (_a = spineItem.renderer) == null ? void 0 : _a.layers[0]) == null ? void 0 : _b.element;
-      if (frame instanceof HTMLIFrameElement && ((_c = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _c.document) && // very important because it is being used by next functions
+      const frame = (_a = spineItem.renderer) == null ? void 0 : _a.getDocumentFrame();
+      if (frame && ((_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.document) && // very important because it is being used by next functions
       frame.contentWindow.document.body !== null) {
         const { x: left, y: top } = getSpineItemPositionFromPageIndex({
           pageIndex,
@@ -3621,15 +3630,15 @@
     cfi,
     spineItemsManager
   }) => {
-    var _a, _b;
+    var _a;
     if (!cfi) return void 0;
     const spineItem = spineItemsManager.getSpineItemFromCfi(cfi);
     if (!spineItem) return void 0;
     const { cleanedCfi, offset } = parseCfi(cfi);
     const cfiHandler = new CfiHandler(cleanedCfi, {});
-    const rendererElement = (_a = spineItem.renderer.layers[0]) == null ? void 0 : _a.element;
+    const rendererElement = spineItem.renderer.getDocumentFrame();
     if (rendererElement instanceof HTMLIFrameElement) {
-      const doc = (_b = rendererElement.contentWindow) == null ? void 0 : _b.document;
+      const doc = (_a = rendererElement.contentWindow) == null ? void 0 : _a.document;
       if (doc) {
         try {
           const { node, offset: resolvedOffset } = cfiHandler.resolve(doc, {});
@@ -3826,14 +3835,11 @@
       this.navigateSubject = new rxjs.Subject();
       this.scrollingSubject = new rxjs.BehaviorSubject(false);
       this.isScrolling$ = this.scrollingSubject.asObservable();
-      const settingsThatRequireLayout$ = settings.values$.pipe(
-        mapKeysTo([
-          `computedPageTurnDirection`,
-          `computedPageTurnMode`,
-          `numberOfAdjacentSpineItemToPreLoad`
-        ]),
-        rxjs.distinctUntilChanged(shared.isShallowEqual)
-      );
+      const settingsThatRequireLayout$ = settings.watch([
+        `computedPageTurnDirection`,
+        `computedPageTurnMode`,
+        `numberOfAdjacentSpineItemToPreLoad`
+      ]);
       const updateElementOnSettingsChange$ = rxjs.merge(
         settingsThatRequireLayout$,
         this.viewportElement$
@@ -5024,7 +5030,7 @@
       };
       this.inputSettings = settingsWithDefaults;
       this.outputSettingsUpdateSubject = new rxjs.Subject();
-      this._settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(operators.shareReplay(1));
+      this._settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(rxjs.shareReplay(1));
       this._settings$.subscribe();
     }
     _prepareUpdate(settings) {
@@ -5062,6 +5068,12 @@
       }
       return this._settings$;
     }
+    watch(keys) {
+      return this.values$.pipe(
+        mapKeysTo(keys),
+        rxjs.distinctUntilChanged(shared.isShallowEqual)
+      );
+    }
     destroy() {
       super.destroy();
       this.outputSettingsUpdateSubject.complete();
@@ -5235,13 +5247,13 @@
       spineItem,
       spineItemLocator
     }) => {
-      var _a, _b;
+      var _a;
       const nodeOrRange = spineItemLocator.getFirstNodeOrRangeAtPage(
         pageIndex,
         spineItem
       );
-      const rendererElement = (_a = spineItem.renderer.layers[0]) == null ? void 0 : _a.element;
-      if (nodeOrRange && rendererElement instanceof HTMLIFrameElement && ((_b = rendererElement.contentWindow) == null ? void 0 : _b.document)) {
+      const rendererElement = spineItem.renderer.getDocumentFrame();
+      if (nodeOrRange && rendererElement instanceof HTMLIFrameElement && ((_a = rendererElement.contentWindow) == null ? void 0 : _a.document)) {
         const cfiString = generateCfi(
           nodeOrRange.node,
           nodeOrRange.offset,
@@ -5390,6 +5402,7 @@
     constructor(params) {
       super();
       this.triggerSubject = new rxjs.Subject();
+      this.lastLayoutDims = void 0;
       this.stateSubject = new rxjs.BehaviorSubject(`idle`);
       this.unload$ = this.triggerSubject.pipe(
         rxjs.withLatestFrom(this.stateSubject),
@@ -5516,6 +5529,24 @@
         })
       );
     }
+    /**
+     * @important
+     *
+     * If renderer returns undefined as dimensions we will use the previous
+     * layout dimensions as fallback. This ensure minmum layout shift during
+     * load / unload of items and improve stability..
+     */
+    layout(params) {
+      return rxjs.defer(() => this.onLayout(params)).pipe(
+        rxjs.map((dims) => {
+          const { height, width } = dims ?? this.lastLayoutDims ?? { height: 0, width: 0 };
+          const minHeight = Math.max(height, this.context.getPageSize().height);
+          const minWidth = Math.max(width, params.minimumWidth);
+          this.lastLayoutDims = { height: minHeight, width: minWidth };
+          return this.lastLayoutDims;
+        })
+      );
+    }
     destroy() {
       super.destroy();
       this.stateSubject.complete();
@@ -5543,6 +5574,9 @@
     onRenderHeadless() {
       return rxjs.EMPTY;
     }
+    getDocumentFrame() {
+      return void 0;
+    }
   }
   class SpineItem extends DestroyableClass {
     constructor(item, parentElement, context, settings, hookManager, index) {
@@ -5577,13 +5611,13 @@
         }
       };
       this.getBoundingRectOfElementFromSelector = (selector) => {
-        var _a2, _b2, _c, _d, _e;
-        const frameElement = (_a2 = this.renderer.layers[0]) == null ? void 0 : _a2.element;
+        var _a2, _b2, _c, _d;
+        const frameElement = this.renderer.getDocumentFrame();
         if (frameElement && frameElement instanceof HTMLIFrameElement && selector) {
           if (selector.startsWith(`#`)) {
-            return (_c = (_b2 = frameElement.contentDocument) == null ? void 0 : _b2.getElementById(selector.replace(`#`, ``))) == null ? void 0 : _c.getBoundingClientRect();
+            return (_b2 = (_a2 = frameElement.contentDocument) == null ? void 0 : _a2.getElementById(selector.replace(`#`, ``))) == null ? void 0 : _b2.getBoundingClientRect();
           }
-          return (_e = (_d = frameElement.contentDocument) == null ? void 0 : _d.querySelector(selector)) == null ? void 0 : _e.getBoundingClientRect();
+          return (_d = (_c = frameElement.contentDocument) == null ? void 0 : _c.querySelector(selector)) == null ? void 0 : _d.getBoundingClientRect();
         }
       };
       this.layout = (params) => {
@@ -5591,7 +5625,9 @@
         this.layoutTriggerSubject.next(params);
         return nextResult();
       };
-      this.load = () => this.renderer.load();
+      this.load = () => {
+        this.renderer.load();
+      };
       this.unload = () => {
         this.renderer.unload();
       };
@@ -5639,26 +5675,18 @@
             item: this.item,
             minimumWidth
           });
-          const layout$ = rxjs.defer(
-            () => this.renderer.onLayout({
-              blankPagePosition,
-              minPageSpread: minimumWidth / this.context.getPageSize().width,
-              minimumWidth,
-              spreadPosition
-            })
-          );
+          const layout$ = this.renderer.layout({
+            blankPagePosition,
+            minPageSpread: minimumWidth / this.context.getPageSize().width,
+            minimumWidth,
+            spreadPosition
+          });
           return rxjs.merge(
             rxjs.of({ type: "start" }),
             layout$.pipe(
-              operators.map((dims) => {
-                const { height, width } = dims ?? { height: 0, width: 0 };
-                const minHeight = Math.max(
-                  height,
-                  this.context.getPageSize().height
-                );
-                const minWidth = Math.max(width, minimumWidth);
-                this.containerElement.style.width = `${minWidth}px`;
-                this.containerElement.style.height = `${minHeight}px`;
+              operators.map(({ height, width }) => {
+                this.containerElement.style.width = `${width}px`;
+                this.containerElement.style.height = `${height}px`;
                 this.hookManager.execute(`item.onAfterLayout`, void 0, {
                   blankPagePosition,
                   item: this.item,
@@ -5666,7 +5694,7 @@
                 });
                 return {
                   type: "end",
-                  data: { width: minWidth, height: minHeight }
+                  data: { width, height }
                 };
               })
             )
@@ -5730,6 +5758,12 @@
         )
       );
     }
+    get renditionLayout() {
+      var _a;
+      const itemRenditionLayout = this.item.renditionLayout;
+      if (itemRenditionLayout) return itemRenditionLayout;
+      return ((_a = this.context.manifest) == null ? void 0 : _a.renditionLayout) ?? "reflowable";
+    }
   }
   const createContainerElement = (containerElement, item, hookManager) => {
     const element = containerElement.ownerDocument.createElement(`div`);
@@ -6059,8 +6093,8 @@
     };
     const getSpineItemFromIframe = (iframe) => {
       return spineItemsManager.items.find((item) => {
-        var _a;
-        return ((_a = item.renderer.layers[0]) == null ? void 0 : _a.element) === iframe;
+        const element = item.renderer.getDocumentFrame();
+        return element === iframe;
       });
     };
     const getSpineItemPageIndexFromNode = (node, offset, spineItemOrIndex) => {
@@ -6196,33 +6230,6 @@
       getSafeSpineItemPositionFromUnsafeSpineItemPosition
     };
   };
-  const loadItems = ({
-    spineItemsManager,
-    settings
-  }) => (stream) => stream.pipe(
-    rxjs.tap(([beginIndex, endIndex]) => {
-      const { numberOfAdjacentSpineItemToPreLoad } = settings.values;
-      const leftMaximumIndex = beginIndex - numberOfAdjacentSpineItemToPreLoad;
-      const rightMaximumIndex = endIndex + numberOfAdjacentSpineItemToPreLoad;
-      spineItemsManager.items.forEach((orderedSpineItem, index) => {
-        const isWithinRange = index >= leftMaximumIndex && index <= rightMaximumIndex;
-        if (isWithinRange) {
-          orderedSpineItem.load();
-        } else {
-          orderedSpineItem.unload();
-        }
-      });
-    })
-  );
-  const mapToItemsToLoad = ({ spineLocator }) => (stream) => stream.pipe(
-    rxjs.map((position) => {
-      const { beginIndex = 0, endIndex = 0 } = spineLocator.getVisibleSpineItemsFromPosition({
-        position,
-        threshold: 0
-      }) || {};
-      return [beginIndex, endIndex];
-    })
-  );
   class SpineItemsLoader extends DestroyableClass {
     constructor(context, spineItemsManager, spineLocator, settings, spineLayout) {
       super();
@@ -6231,34 +6238,62 @@
       this.spineLocator = spineLocator;
       this.settings = settings;
       this.spineLayout = spineLayout;
-      const navigationUpdate$ = this.context.bridgeEvent.navigation$;
-      const layoutHasChanged$ = this.spineLayout.layout$.pipe(
-        rxjs.filter(({ hasChanged }) => hasChanged)
+      this.forcedOpenSubject = new rxjs.BehaviorSubject([]);
+      const forcedOpen$ = this.forcedOpenSubject.pipe(
+        rxjs.map((v) => [...new Set(v.flat())].sort()),
+        rxjs.distinctUntilChanged(shared.arrayEqual),
+        rxjs.shareReplay({ bufferSize: 1, refCount: true })
       );
-      const numberOfAdjacentSpineItemToPreLoad$ = settings.values$.pipe(
-        rxjs.map(
-          ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
-        ),
-        rxjs.skip(1),
-        rxjs.distinctUntilChanged()
+      const shouldReloadSpineItems$ = rxjs.merge(
+        this.context.bridgeEvent.navigation$,
+        this.spineLayout.layout$,
+        forcedOpen$,
+        settings.watch(["numberOfAdjacentSpineItemToPreLoad"])
       );
-      const loadSpineItems$ = rxjs.merge(
-        navigationUpdate$,
-        layoutHasChanged$,
-        numberOfAdjacentSpineItemToPreLoad$
-      ).pipe(
+      const loadSpineItems$ = shouldReloadSpineItems$.pipe(
         // this can be changed by whatever we want and SHOULD not break navigation.
         // Ideally loading faster is better but loading too close to user navigating can
         // be dangerous.
         rxjs.debounceTime(100, rxjs.animationFrameScheduler),
         waitForSwitch(this.context.bridgeEvent.viewportFree$),
-        rxjs.withLatestFrom(this.context.bridgeEvent.navigation$),
-        rxjs.map(([, navigation]) => navigation.position),
-        mapToItemsToLoad({ spineLocator }),
-        loadItems({ spineItemsManager, settings })
+        rxjs.withLatestFrom(this.context.bridgeEvent.navigation$, forcedOpen$),
+        rxjs.map(([, navigation, forcedOpenIndexes]) => {
+          const { numberOfAdjacentSpineItemToPreLoad } = settings.values;
+          const { beginIndex = 0, endIndex = 0 } = spineLocator.getVisibleSpineItemsFromPosition({
+            position: navigation.position,
+            threshold: 0
+          }) || {};
+          const beginMaximumIndex = beginIndex - numberOfAdjacentSpineItemToPreLoad;
+          const endMaximumIndex = endIndex + numberOfAdjacentSpineItemToPreLoad;
+          const visibleIndexes = Array.from(
+            { length: endMaximumIndex - beginMaximumIndex + 1 },
+            (_, i) => beginMaximumIndex + i
+          );
+          const indexesToLoad = [...forcedOpenIndexes, ...visibleIndexes];
+          spineItemsManager.items.forEach((orderedSpineItem, index) => {
+            if (indexesToLoad.includes(index)) {
+              orderedSpineItem.load();
+            } else {
+              orderedSpineItem.unload();
+            }
+          });
+        })
       );
       loadSpineItems$.pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
+    forceOpen(spineItems) {
+      this.forcedOpenSubject.next([...this.forcedOpenSubject.value, spineItems]);
+      return () => {
+        if (this.isDestroyed) return;
+        this.forcedOpenSubject.next(
+          this.forcedOpenSubject.value.filter((item) => item !== spineItems)
+        );
+      };
+    }
+    destroy() {
+      super.destroy();
+      this.forcedOpenSubject.complete();
+    }
   }
   class SpineItemsObserver extends DestroyableClass {
     constructor(spineItemsManager, spineLocator) {
@@ -6326,10 +6361,10 @@
     const itemStartOnNewScreen = horizontalOffset % context.state.visibleAreaRect.width === 0;
     const isLastItem = index === spineItemsManager.items.length - 1;
     if (context.state.isUsingSpreadMode) {
-      if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
+      if (!isGloballyPrePaginated && item.renditionLayout === `reflowable` && !isLastItem) {
         minimumWidth = context.getPageSize().width * 2;
       }
-      if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
+      if (!isGloballyPrePaginated && item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
         minimumWidth = context.getPageSize().width * 2;
       }
       const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
@@ -7162,6 +7197,9 @@
     onRenderHeadless() {
       return rxjs.EMPTY;
     }
+    getDocumentFrame() {
+      return void 0;
+    }
   }
   const mediaEnhancer = (next) => (options) => {
     const reader = next({
@@ -7227,10 +7265,10 @@
     );
     reader.hookManager.register(
       `item.onDocumentLoad`,
-      ({ layers, destroy: destroy2 }) => {
+      ({ destroy: destroy2, itemId }) => {
         var _a, _b;
-        const frame = (_a = layers[0]) == null ? void 0 : _a.element;
-        if (!(frame instanceof HTMLIFrameElement)) return;
+        const frame = (_a = reader.spineItemsManager.get(itemId)) == null ? void 0 : _a.renderer.getDocumentFrame();
+        if (!frame) return;
         frameObserver.observe(frame);
         const videos = (_b = frame.contentDocument) == null ? void 0 : _b.body.getElementsByTagName(`video`);
         const unobserveElements = Array.from(videos || []).map((element) => {
@@ -7265,7 +7303,7 @@
           const estimateBeforeThisItem = ((_c = context.manifest) == null ? void 0 : _c.spineItems.slice(0, currentSpineIndex).reduce((acc, item) => acc + (item.progressionWeight ?? 0), 0)) || 0;
           const currentItemWeight = ((_e = (_d = context.manifest) == null ? void 0 : _d.spineItems[currentSpineIndex]) == null ? void 0 : _e.progressionWeight) || 0;
           let progressWithinThisItem = (pageIndex + 1) * (currentItemWeight / numberOfPages);
-          if (!isGloballyPrePaginated && currentItem.item.renditionLayout === `reflowable` && !itemIsReady) {
+          if (!isGloballyPrePaginated && currentItem.renditionLayout === `reflowable` && !itemIsReady) {
             progressWithinThisItem = 0;
           }
           let totalProgress = estimateBeforeThisItem + progressWithinThisItem;
@@ -7337,31 +7375,27 @@
     }, {});
     reader.hookManager.register(
       `item.onDocumentLoad`,
-      ({ itemId, layers, destroy }) => {
-        var _a, _b;
-        const frame = (_a = layers[0]) == null ? void 0 : _a.element;
-        if (!(frame instanceof HTMLIFrameElement)) return;
+      ({ itemId, destroy }) => {
+        var _a;
         const item = reader.spineItemsManager.get(itemId);
         if (!item) return;
-        item.renderer.layers.forEach((layer) => {
-          if (layer.element instanceof HTMLIFrameElement) {
-            upsertCSS(
-              layer.element,
-              `prose-reader-accessibility`,
-              `
+        const frame = item.renderer.getDocumentFrame();
+        if (!frame) return;
+        upsertCSS(
+          frame,
+          `prose-reader-accessibility`,
+          `
               :focus-visible {
                 ${/*
-                Some epubs remove the outline, this is not good practice since it reduce accessibility.
-                We will try to restore it by force.
-              */
-              ``}
+            Some epubs remove the outline, this is not good practice since it reduce accessibility.
+            We will try to restore it by force.
+          */
+          ``}
                 outline: -webkit-focus-ring-color auto 1px;
               }
             `
-            );
-          }
-        });
-        const links = (_b = frame.contentDocument) == null ? void 0 : _b.body.querySelectorAll(`a`);
+        );
+        const links = (_a = frame.contentDocument) == null ? void 0 : _a.body.querySelectorAll(`a`);
         links == null ? void 0 : links.forEach((link) => {
           observer.observe(link);
         });
@@ -7527,11 +7561,11 @@
     };
   };
   const normalizeEventForViewport = (event, iframeOriginalEvent, locator, context) => {
-    var _a, _b;
+    var _a;
     const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
     if (!iframeOriginalEvent || !originalFrame) return event;
     const spineItem = locator.getSpineItemFromIframe(originalFrame);
-    const frameElement = (_b = spineItem == null ? void 0 : spineItem.renderer.layers[0]) == null ? void 0 : _b.element;
+    const frameElement = originalFrame;
     const { height: pageHeight, width: pageWidth } = context.getPageSize();
     if (!spineItem || !(frameElement instanceof HTMLIFrameElement)) return event;
     if (isPointerEvent(event)) {
@@ -7617,18 +7651,14 @@
     const reader = next(options);
     reader.hookManager.register(
       `item.onDocumentLoad`,
-      ({ destroy, layers, itemId }) => {
-        var _a;
-        const frame = (_a = layers.find(
-          (layer) => layer.element instanceof HTMLIFrameElement
-        )) == null ? void 0 : _a.element;
-        if (!(frame instanceof HTMLIFrameElement)) return;
+      ({ destroy, itemId }) => {
         const item = reader.spineItemsManager.get(itemId);
-        if (!item) return;
+        const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
+        if (!frame || !item) return;
         const unregister = passthroughEvents.map((event) => {
-          var _a2;
+          var _a;
           const listener = (e) => {
-            var _a3;
+            var _a2;
             let convertedEvent = e;
             if (isPointerEvent(e)) {
               convertedEvent = new PointerEvent(e.type, e);
@@ -7640,15 +7670,15 @@
                 reader.spine.locator,
                 reader.context
               );
-              (_a3 = reader.context.state.containerElement) == null ? void 0 : _a3.dispatchEvent(
+              (_a2 = reader.context.state.containerElement) == null ? void 0 : _a2.dispatchEvent(
                 normalizedEvent
               );
             }
           };
-          (_a2 = frame.contentDocument) == null ? void 0 : _a2.addEventListener(event, listener);
+          (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
           return () => {
-            var _a3;
-            (_a3 = frame.contentDocument) == null ? void 0 : _a3.removeEventListener(event, listener);
+            var _a2;
+            (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(event, listener);
           };
         });
         destroy(() => {
@@ -7702,7 +7732,7 @@
       return `
       <html>
         <head>
-          ${item.renditionLayout !== `reflowable` ? `<meta name="viewport" content="width=${width}, height=${height}">` : ``}
+          ${item.renditionLayout === `pre-paginated` ? `<meta name="viewport" content="width=${width}, height=${height}">` : ``}
         </head>
         <body style="margin: 0px;" tab-index="-1;">
           <img
@@ -8102,8 +8132,8 @@
     ``}
       img, video, audio, object, svg {
         max-width: 100%;
-        max-width: ${columnWidth}px !important;
-        max-height: ${columnHeight}px !important;
+        -max-width: ${columnWidth}px !important;
+        -max-height: ${columnHeight}px !important;
         -pointer-events: none;
         -webkit-column-break-inside: avoid;
         page-break-inside: avoid;
@@ -8383,12 +8413,12 @@
       blankPagePosition,
       spreadPosition
     }) {
-      var _a;
+      var _a, _b;
       const { width: pageWidth, height: pageHeight } = this.context.getPageSize();
       const frameElement = this.getFrameElement();
-      if (!frameElement) return rxjs.of({ width: pageWidth, height: pageHeight });
+      if (!frameElement) return rxjs.of(void 0);
       const isUsingVerticalWriting = !!((_a = this.writingMode) == null ? void 0 : _a.startsWith(`vertical`));
-      if (this.item.renditionLayout === `pre-paginated`) {
+      if (this.item.renditionLayout === `pre-paginated` || !this.item.renditionLayout && ((_b = this.context.manifest) == null ? void 0 : _b.renditionLayout) === `pre-paginated`) {
         const dims = renderPrePaginated({
           blankPagePosition,
           enableTouch: this.settings.values.computedPageTurnMode !== `scrollable`,
@@ -8483,6 +8513,9 @@
           return void 0;
       }
     }
+    getDocumentFrame() {
+      return this.getFrameElement();
+    }
   }
   const htmlEnhancer = (next) => (options) => {
     const reader = next({
@@ -8570,12 +8603,13 @@
     const selectionWithPointerUpSubject = new rxjs.Subject();
     reader.hookManager.register(
       `item.onDocumentLoad`,
-      ({ itemId, layers, destroy$, destroy }) => {
-        var _a, _b;
-        const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+      ({ itemId, destroy$, destroy }) => {
+        var _a;
+        const item = reader.spineItemsManager.get(itemId);
+        const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
         const itemIndex = reader.spineItemsManager.getSpineItemIndex(itemId) ?? 0;
-        if (frame instanceof HTMLIFrameElement) {
-          const frameDoc = frame.contentDocument || ((_b = frame.contentWindow) == null ? void 0 : _b.document);
+        if (frame) {
+          const frameDoc = frame.contentDocument || ((_a = frame.contentWindow) == null ? void 0 : _a.document);
           if (frameDoc) {
             const selectionTracker = new SelectionTracker(frameDoc);
             rxjs.merge(