@prose-reader/core 1.133.0 → 1.135.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { takeUntil, Subject, combineLatest, switchMap, fromEvent, take, map as map$1, from, of, merge, EMPTY, withLatestFrom, NEVER, Observable, scheduled, animationFrameScheduler, defer, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, throttleTime, finalize, startWith as startWith$1, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, shareReplay as shareReplay$1, switchScan, forkJoin, scan, ReplaySubject, filter as filter$1, share, mergeMap, delay, identity, timer, skip as skip$1, exhaustMap, first as first$1, lastValueFrom, endWith, catchError, reduce, concatMap } from "rxjs";
-import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take as take$1, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, debounceTime, skip, withLatestFrom as withLatestFrom$1, share as share$1, mergeMap as mergeMap$1, catchError as catchError$1 } from "rxjs/operators";
-import { shallowMergeIfDefined, isShallowEqual, detectMimeTypeFromName, parseContentType, getParentPath } from "@prose-reader/shared";
+import { takeUntil, Observable, of, defer, Subject, combineLatest, switchMap as switchMap$1, fromEvent, take, map as map$1, from, merge, EMPTY, withLatestFrom, NEVER, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, throttleTime, finalize, startWith as startWith$1, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, shareReplay as shareReplay$1, switchScan, forkJoin, ReplaySubject, filter as filter$1, share, mergeMap, delay, identity, timer, skip as skip$1, exhaustMap, first as first$1, lastValueFrom, endWith, catchError, reduce, concatMap } from "rxjs";
+import { map, switchMap, first, startWith, shareReplay, distinctUntilChanged, tap, pairwise, take as take$1, takeUntil as takeUntil$1, filter, debounceTime, skip, withLatestFrom as withLatestFrom$1, share as share$1, mergeMap as mergeMap$1, catchError as catchError$1 } from "rxjs/operators";
+import { shallowMergeIfDefined, isShallowEqual, detectMimeTypeFromName, arrayEqual, parseContentType, getParentPath } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
@@ -13,14 +13,82 @@ const chromeEnhancer = (next) => (options) => {
     };
     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 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 Observable((observer) => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      observer.next(entries);
+    });
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+}
+const waitForSwitch = (waitForStream) => (stream) => stream.pipe(
+  switchMap(
+    (value) => waitForStream.pipe(
+      first(),
+      map(() => value)
+    )
+  )
+);
+const deferNextResult = (stream) => {
+  let value;
+  const sub = stream.subscribe((result) => {
+    value = { result };
+  });
+  return () => {
+    sub.unsubscribe();
+    if (value) {
+      return of(value.result);
+    }
+    return stream;
+  };
+};
+function idle() {
+  return new 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 defer(() => idle().pipe(switchMap(callback)));
+}
 class SettingsManagerOverload {
   constructor(initialSettings, settingsManager) {
     this.settingsManager = settingsManager;
@@ -75,6 +143,12 @@ class SettingsManagerOverload {
       ...this.outputSettings
     };
   }
+  watch(keys) {
+    return this.values$.pipe(
+      mapKeysTo(keys),
+      distinctUntilChanged(isShallowEqual)
+    );
+  }
   destroy() {
     this.outputSettingsUpdateSubject.complete();
   }
@@ -167,7 +241,7 @@ const getFrameViewportInfo = (frame) => {
   return { hasViewport: false };
 };
 const waitForFrameLoad = (stream) => stream.pipe(
-  switchMap(
+  switchMap$1(
     (frame) => fromEvent(frame, `load`).pipe(
       take(1),
       map$1(() => frame)
@@ -175,7 +249,7 @@ const waitForFrameLoad = (stream) => stream.pipe(
   )
 );
 const waitForFrameReady = (stream) => stream.pipe(
-  switchMap(
+  switchMap$1(
     (frame) => {
       var _a;
       return from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || of(void 0)).pipe(
@@ -216,12 +290,11 @@ const fontsEnhancer = (next) => (options) => {
   `;
   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 @@ const fontsEnhancer = (next) => (options) => {
   };
   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(
@@ -287,13 +359,12 @@ const hotkeysEnhancer = (next) => (options) => {
   );
   navigateOnKey(document).pipe(takeUntil(reader.$.destroy$)).subscribe();
   reader.spineItemsManager.items$.pipe(
-    switchMap(
+    switchMap$1(
       (spineItems) => merge(
         ...spineItems.map(
           (item) => item.loaded$.pipe(
-            switchMap(() => {
-              var _a;
-              const element = (_a = item.renderer.layers[0]) == null ? void 0 : _a.element;
+            switchMap$1(() => {
+              const element = item.renderer.getDocumentFrame();
               return element instanceof HTMLIFrameElement && (element == null ? void 0 : element.contentDocument) ? navigateOnKey(element.contentDocument) : EMPTY;
             })
           )
@@ -307,7 +378,7 @@ const hotkeysEnhancer = (next) => (options) => {
 const createMovingSafePan$ = (reader) => {
   let iframeOverlayForAnimationsElement;
   const updateOverlayElement$ = reader.context.state$.pipe(
-    switchMap$1(({ containerElement }) => {
+    switchMap(({ containerElement }) => {
       if (!containerElement) return NEVER;
       return new Observable(() => {
         iframeOverlayForAnimationsElement = containerElement.ownerDocument.createElement(`div`);
@@ -351,92 +422,24 @@ const createMovingSafePan$ = (reader) => {
     distinctUntilChanged()
   );
   const handleViewportLock$ = pageTurnMode$.pipe(
-    switchMap$1(
-      (mode) => mode === `controlled` ? lockAfterViewportBusy$.pipe(switchMap$1(() => resetLockViewportFree$)) : createResetLock$(of(void 0))
+    switchMap(
+      (mode) => mode === `controlled` ? lockAfterViewportBusy$.pipe(switchMap(() => resetLockViewportFree$)) : createResetLock$(of(void 0))
     ),
     takeUntil$1(reader.$.destroy$)
   );
   return merge(updateOverlayElement$, handleViewportLock$);
 };
-const mapKeysTo = (keys) => {
-  return 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 Observable((observer) => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      observer.next(entries);
-    });
-    resizeObserver.observe(element);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  });
-}
-const waitForSwitch = (waitForStream) => (stream) => stream.pipe(
-  switchMap$1(
-    (value) => waitForStream.pipe(
-      first(),
-      map(() => value)
-    )
-  )
-);
-const deferNextResult = (stream) => {
-  let value;
-  const sub = stream.subscribe((result) => {
-    value = { result };
-  });
-  return () => {
-    sub.unsubscribe();
-    if (value) {
-      return of(value.result);
-    }
-    return stream;
-  };
-};
-function idle() {
-  return new 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 defer(() => idle().pipe(switchMap$1(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 @@ const layoutEnhancer = (next) => (options) => {
   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 layoutEnhancer = (next) => (options) => {
     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 @@ const layoutEnhancer = (next) => (options) => {
         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;
@@ -551,9 +553,8 @@ const layoutEnhancer = (next) => (options) => {
                 max-width: ${columnWidth}px;
               }
             `
-          );
-        }
-      });
+        );
+      }
     }
   });
   fixReflowable(reader);
@@ -592,18 +593,16 @@ const layoutEnhancer = (next) => (options) => {
   });
   const layoutOnContainerResize$ = settingsManager.values$.pipe(
     filter(({ layoutAutoResize: layoutAutoResize2 }) => layoutAutoResize2 === "container"),
-    switchMap$1(() => reader.context.containerElement$),
+    switchMap(() => reader.context.containerElement$),
     filter(isDefined),
-    switchMap$1((container) => observeContainerResize(container)),
+    switchMap((container) => observeContainerResize(container)),
     debounceTime(100),
     tap(() => {
       reader == null ? void 0 : reader.layout();
     })
   );
   const movingSafePan$ = createMovingSafePan$(reader);
-  settingsManager.values$.pipe(
-    mapKeysTo([`pageHorizontalMargin`, `pageVerticalMargin`]),
-    distinctUntilChanged(isShallowEqual),
+  settingsManager.watch([`pageHorizontalMargin`, `pageVerticalMargin`]).pipe(
     skip(1),
     tap(() => {
       reader.layout();
@@ -681,6 +680,16 @@ const createReport = (namespace) => ({
       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 @@ const linksEnhancer = (next) => (options) => {
     }
     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 @@ const getNavigationForLeftOrTopPage = ({
   }
   return navigationResolver.getAdjustedPositionForSpread(navigation);
 };
+const report$4 = Report.namespace(`navigation`);
 class ManualNavigator {
   constructor(reader) {
     this.reader = reader;
@@ -1149,6 +1159,12 @@ class ManualNavigator {
       pageIndex,
       spineItemId
     });
+    report$4.debug(`.goToPageOfSpineItem()`, {
+      pageIndex,
+      spineItemId,
+      ...rest,
+      position
+    });
     this.reader.navigation.navigate({
       position,
       ...rest
@@ -1161,6 +1177,11 @@ class ManualNavigator {
     const foundInfo = this.reader.spine.locator.getSpineInfoFromAbsolutePageIndex({
       absolutePageIndex
     });
+    report$4.debug(`.goToAbsolutePageIndex()`, {
+      absolutePageIndex,
+      ...rest,
+      foundInfo
+    });
     if (foundInfo) {
       const position = this.reader.navigation.navigationResolver.getNavigationForSpineItemPage(
         {
@@ -1480,7 +1501,7 @@ const trackPaginationInfo = (reader) => {
   });
   const extandedBasePagination$ = reader.pagination.state$.pipe(
     combineLatestWith(chaptersInfo$),
-    switchMap(
+    switchMap$1(
       ([info, chaptersInfo]) => mapPaginationInfoToExtendedInfo(reader, info, chaptersInfo).pipe(
         map$1((extendedInfo) => ({
           ...info,
@@ -1520,7 +1541,7 @@ const consolidate = (item, reader) => {
   const { itemIndex } = reader.cfi.parseCfi(item.cfi);
   const spineItem = reader.spineItemsManager.get(itemIndex);
   if (!spineItem) return 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 @@ const consolidate = (item, reader) => {
       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 consolidate = (item, reader) => {
 };
 const createLocator = (reader) => (resources) => {
   return deferIdle(() => {
-    if (!resources.length)
-      return of({ isStale: false, data: resources });
-    const StaleSymbol = Symbol("stale");
-    const markStale$ = reader.layout$.pipe(
-      startWith$1(null),
-      map$1(() => StaleSymbol)
-    );
+    if (!resources.length) return of(resources);
     const consolidate$ = reader.layout$.pipe(
       debounceTime$1(10),
       startWith$1(null),
@@ -1588,27 +1603,20 @@ const createLocator = (reader) => (resources) => {
         );
       }, resources)
     );
-    const run$ = merge(markStale$, consolidate$).pipe(
-      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(
+      finalize(() => {
+        setTimeout(() => {
+          release();
+        }, 1e3);
+      })
     );
-    return run$;
   });
 };
 Report.namespace(NAMESPACE$6);
@@ -1685,22 +1693,20 @@ const themeEnhancer = (next) => (options) => {
   };
   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(
@@ -1895,7 +1901,7 @@ const zoomEnhancer = (next) => (options) => {
         return zoomerSubject.getValue().currentScale;
       },
       isZooming$: zoomerSubject.pipe(
-        switchMap((zoomer) => zoomer.isZooming$)
+        switchMap$1((zoomer) => zoomer.isZooming$)
       ),
       get zoomContainerElement() {
         return zoomerSubject.getValue().element;
@@ -2039,10 +2045,13 @@ class Context {
 }
 class DestroyableClass {
   constructor() {
+    this.isDestroyed = false;
     this.destroySubject = new Subject();
     this.destroy$ = this.destroySubject.asObservable();
   }
   destroy() {
+    if (this.isDestroyed) return;
+    this.isDestroyed = true;
     this.destroySubject.next();
     this.destroySubject.complete();
   }
@@ -2408,10 +2417,10 @@ const createSpineItemLocator = ({
     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 @@ const resolveCfi = ({
   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 @@ class ViewportNavigator extends DestroyableClass {
     this.navigateSubject = new Subject();
     this.scrollingSubject = new BehaviorSubject(false);
     this.isScrolling$ = this.scrollingSubject.asObservable();
-    const settingsThatRequireLayout$ = settings.values$.pipe(
-      mapKeysTo([
-        `computedPageTurnDirection`,
-        `computedPageTurnMode`,
-        `numberOfAdjacentSpineItemToPreLoad`
-      ]),
-      distinctUntilChanged$1(isShallowEqual)
-    );
+    const settingsThatRequireLayout$ = settings.watch([
+      `computedPageTurnDirection`,
+      `computedPageTurnMode`,
+      `numberOfAdjacentSpineItemToPreLoad`
+    ]);
     const updateElementOnSettingsChange$ = merge(
       settingsThatRequireLayout$,
       this.viewportElement$
@@ -3872,7 +3878,7 @@ class ViewportNavigator extends DestroyableClass {
           position
         };
       }),
-      switchMap((currentEvent) => {
+      switchMap$1((currentEvent) => {
         const element = this.viewportElement$.getValue();
         element.style.setProperty(`transition`, `none`);
         element.style.setProperty(`opacity`, `1`);
@@ -4038,14 +4044,14 @@ class UserNavigator extends DestroyableClass {
     this.locker = new Locker();
     this.navigation$ = this.navigationSubject.asObservable();
     const userScroll$ = element$.pipe(
-      switchMap(
+      switchMap$1(
         (element) => settings.values$.pipe(
           map$1(({ computedPageTurnMode }) => computedPageTurnMode),
           distinctUntilChanged$1(),
           filter$1(
             (computedPageTurnMode) => computedPageTurnMode === "scrollable"
           ),
-          switchMap(() => {
+          switchMap$1(() => {
             return fromEvent(element, `scroll`).pipe(
               withLatestFrom(scrollHappeningFromBrowser$),
               filter$1(([, shouldAvoidScrollEvent]) => !shouldAvoidScrollEvent),
@@ -4060,7 +4066,7 @@ class UserNavigator extends DestroyableClass {
       map$1(({ computedPageTurnMode }) => computedPageTurnMode),
       distinctUntilChanged$1(),
       filter$1((computedPageTurnMode) => computedPageTurnMode === "scrollable"),
-      switchMap(() => userScroll$),
+      switchMap$1(() => userScroll$),
       exhaustMap((event) => {
         const unlock = this.locker.lock();
         return merge(userScroll$, of(event)).pipe(
@@ -4639,7 +4645,7 @@ const consolidateWithPagination = (context, navigation$, spine) => context.bridg
    * Otherwise we might save something incomplete and thus restore
    * the user to an invalid location.
    */
-  switchMap(([pagination, navigation]) => {
+  switchMap$1(([pagination, navigation]) => {
     const spineItem = spine.spineItemsManager.get(navigation.spineItem);
     return ((spineItem == null ? void 0 : spineItem.isReady$.pipe(first$1())) ?? of(false)).pipe(
       filter$1((isReady) => isReady),
@@ -4740,7 +4746,7 @@ class InternalNavigator extends DestroyableClass {
         spineItemsManager: spine.spineItemsManager
       }),
       withLatestFrom(isUserLocked$),
-      switchMap(([params, isUserLocked]) => {
+      switchMap$1(([params, isUserLocked]) => {
         const shouldNotAlterPosition = params.navigation.cfi || params.navigation.url || settings.values.computedPageTurnMode === "scrollable" || isUserLocked;
         return of(params).pipe(
           shouldNotAlterPosition ? identity : withRestoredPosition({
@@ -4763,7 +4769,7 @@ class InternalNavigator extends DestroyableClass {
     const navigationUpdateFollowingUserUnlock$ = navigationFromUser$.pipe(
       withLatestFrom(isUserLocked$),
       filter$1(([, isUserLocked]) => isUserLocked),
-      switchMap(([navigation]) => {
+      switchMap$1(([navigation]) => {
         const unlock = this.locker.lock();
         return isUserLocked$.pipe(
           filter$1((isUserLocked) => !isUserLocked),
@@ -4783,9 +4789,9 @@ class InternalNavigator extends DestroyableClass {
       share()
     );
     const navigationUpateFromLayout$ = layoutHasChanged$.pipe(
-      switchMap(() => {
+      switchMap$1(() => {
         return of(null).pipe(
-          switchMap(
+          switchMap$1(
             () => isUserLocked$.pipe(
               filter$1((isLocked) => !isLocked),
               first$1()
@@ -4937,10 +4943,10 @@ const createNavigator = ({
   );
   const isSpineScrolling$ = merge(
     spine.elementResize$,
-    spine.element$.pipe(switchMap$1((element) => fromEvent(element, "scroll"))),
+    spine.element$.pipe(switchMap((element) => fromEvent(element, "scroll"))),
     spine.spineItemsObserver.itemResize$
   ).pipe(
-    switchMap$1(() => merge(of(true), timer(5).pipe(map(() => false)))),
+    switchMap(() => merge(of(true), timer(5).pipe(map(() => false)))),
     startWith(false)
   );
   const scrollHappeningFromBrowser$ = combineLatest([
@@ -5024,7 +5030,7 @@ class SettingsManager3 extends DestroyableClass {
     };
     this.inputSettings = settingsWithDefaults;
     this.outputSettingsUpdateSubject = new Subject();
-    this._settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(shareReplay(1));
+    this._settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(shareReplay$1(1));
     this._settings$.subscribe();
   }
   _prepareUpdate(settings) {
@@ -5062,6 +5068,12 @@ class SettingsManager3 extends DestroyableClass {
     }
     return this._settings$;
   }
+  watch(keys) {
+    return this.values$.pipe(
+      mapKeysTo(keys),
+      distinctUntilChanged$1(isShallowEqual)
+    );
+  }
   destroy() {
     super.destroy();
     this.outputSettingsUpdateSubject.complete();
@@ -5235,13 +5247,13 @@ const generateCfiForSpineItemPage = Report.measurePerformance(
     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,
@@ -5264,7 +5276,7 @@ class PaginationController extends DestroyableClass {
       this.context.bridgeEvent.navigation$,
       spine.spineLayout.layout$.pipe(filter$1(({ hasChanged }) => hasChanged))
     ).pipe(
-      switchMap(() => {
+      switchMap$1(() => {
         const getVisiblePagesFromViewportPosition = ({
           spineItem,
           position
@@ -5390,6 +5402,7 @@ class DocumentRenderer extends DestroyableClass {
   constructor(params) {
     super();
     this.triggerSubject = new Subject();
+    this.lastLayoutDims = void 0;
     this.stateSubject = new BehaviorSubject(`idle`);
     this.unload$ = this.triggerSubject.pipe(
       withLatestFrom(this.stateSubject),
@@ -5423,7 +5436,7 @@ class DocumentRenderer extends DestroyableClass {
       share()
     );
     this.load$.pipe(
-      switchMap(() => {
+      switchMap$1(() => {
         this.stateSubject.next(`loading`);
         const createDocument$ = this.onCreateDocument().pipe(
           endWith(null),
@@ -5436,7 +5449,7 @@ class DocumentRenderer extends DestroyableClass {
               layers: this.layers
             });
           }),
-          switchMap(() => {
+          switchMap$1(() => {
             const loadDocument$ = this.onLoadDocument().pipe(
               endWith(null),
               first$1()
@@ -5444,7 +5457,7 @@ class DocumentRenderer extends DestroyableClass {
             return loadDocument$;
           }),
           waitForSwitch(this.context.bridgeEvent.viewportFree$),
-          switchMap(() => {
+          switchMap$1(() => {
             const hookResults = this.hookManager.execute(`item.onDocumentLoad`, this.item.id, {
               itemId: this.item.id,
               layers: this.layers
@@ -5461,14 +5474,14 @@ class DocumentRenderer extends DestroyableClass {
       })
     ).subscribe();
     const unload$ = unloadTrigger$.pipe(
-      switchMap(() => {
+      switchMap$1(() => {
         this.stateSubject.next(`unloading`);
         return this.context.bridgeEvent.viewportFree$.pipe(
           first$1(),
           tap$1(() => {
             this.hookManager.destroy(`item.onDocumentLoad`, this.item.id);
           }),
-          switchMap(() => {
+          switchMap$1(() => {
             const onUnload$ = this.onUnload().pipe(endWith(null), first$1());
             return onUnload$;
           }),
@@ -5516,6 +5529,24 @@ class DocumentRenderer extends DestroyableClass {
       })
     );
   }
+  /**
+   * @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 defer(() => this.onLayout(params)).pipe(
+      map$1((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 @@ class DefaultRenderer extends DocumentRenderer {
   onRenderHeadless() {
     return EMPTY;
   }
+  getDocumentFrame() {
+    return void 0;
+  }
 }
 class SpineItem extends DestroyableClass {
   constructor(item, parentElement, context, settings, hookManager, index) {
@@ -5577,13 +5611,13 @@ class SpineItem extends DestroyableClass {
       }
     };
     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 @@ class SpineItem extends DestroyableClass {
       this.layoutTriggerSubject.next(params);
       return nextResult();
     };
-    this.load = () => this.renderer.load();
+    this.load = () => {
+      this.renderer.load();
+    };
     this.unload = () => {
       this.renderer.unload();
     };
@@ -5633,32 +5669,24 @@ class SpineItem extends DestroyableClass {
     };
     this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
     const layoutProcess$ = this.layoutTriggerSubject.pipe(
-      switchMap$1(({ blankPagePosition, minimumWidth, spreadPosition }) => {
+      switchMap(({ blankPagePosition, minimumWidth, spreadPosition }) => {
         this.hookManager.execute(`item.onBeforeLayout`, void 0, {
           blankPagePosition,
           item: this.item,
           minimumWidth
         });
-        const layout$ = 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 merge(
           of({ type: "start" }),
           layout$.pipe(
-            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`;
+            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 @@ class SpineItem extends DestroyableClass {
               });
               return {
                 type: "end",
-                data: { width: minWidth, height: minHeight }
+                data: { width, height }
               };
             })
           )
@@ -5722,7 +5750,7 @@ class SpineItem extends DestroyableClass {
     return this.renderer.state$.pipe(
       distinctUntilChanged(),
       filter((state) => state !== "idle"),
-      switchMap$1(
+      switchMap(
         () => this.renderer.state$.pipe(
           filter((state) => state === `idle`),
           first()
@@ -5730,6 +5758,12 @@ class SpineItem extends DestroyableClass {
       )
     );
   }
+  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 createSpineLocator = ({
   };
   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 @@ const createSpineLocator = ({
     getSafeSpineItemPositionFromUnsafeSpineItemPosition
   };
 };
-const loadItems = ({
-  spineItemsManager,
-  settings
-}) => (stream) => stream.pipe(
-  tap$1(([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(
-  map$1((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 @@ class SpineItemsLoader extends DestroyableClass {
     this.spineLocator = spineLocator;
     this.settings = settings;
     this.spineLayout = spineLayout;
-    const navigationUpdate$ = this.context.bridgeEvent.navigation$;
-    const layoutHasChanged$ = this.spineLayout.layout$.pipe(
-      filter$1(({ hasChanged }) => hasChanged)
+    this.forcedOpenSubject = new BehaviorSubject([]);
+    const forcedOpen$ = this.forcedOpenSubject.pipe(
+      map$1((v) => [...new Set(v.flat())].sort()),
+      distinctUntilChanged$1(arrayEqual),
+      shareReplay$1({ bufferSize: 1, refCount: true })
     );
-    const numberOfAdjacentSpineItemToPreLoad$ = settings.values$.pipe(
-      map$1(
-        ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
-      ),
-      skip$1(1),
-      distinctUntilChanged$1()
+    const shouldReloadSpineItems$ = merge(
+      this.context.bridgeEvent.navigation$,
+      this.spineLayout.layout$,
+      forcedOpen$,
+      settings.watch(["numberOfAdjacentSpineItemToPreLoad"])
     );
-    const loadSpineItems$ = 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.
       debounceTime$1(100, animationFrameScheduler),
       waitForSwitch(this.context.bridgeEvent.viewportFree$),
-      withLatestFrom(this.context.bridgeEvent.navigation$),
-      map$1(([, navigation]) => navigation.position),
-      mapToItemsToLoad({ spineLocator }),
-      loadItems({ spineItemsManager, settings })
+      withLatestFrom(this.context.bridgeEvent.navigation$, forcedOpen$),
+      map$1(([, 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(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) {
@@ -6266,7 +6301,7 @@ class SpineItemsObserver extends DestroyableClass {
     this.spineItemsManager = spineItemsManager;
     this.spineLocator = spineLocator;
     this.itemIsReady$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
+      switchMap$1((items) => {
         const itemsIsReady$ = items.map(
           (item) => item.isReady$.pipe(map$1((isReady) => ({ item, isReady })))
         );
@@ -6275,7 +6310,7 @@ class SpineItemsObserver extends DestroyableClass {
       share()
     );
     this.itemResize$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
+      switchMap$1((items) => {
         const resize$ = items.map(
           (item) => observeResize(item.element).pipe(
             map$1((entries) => ({ entries, item }))
@@ -6286,7 +6321,7 @@ class SpineItemsObserver extends DestroyableClass {
       share()
     );
     this.itemLoaded$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
+      switchMap$1((items) => {
         const itemsIsReady$ = items.map(
           (item) => item.loaded$.pipe(map$1(() => item))
         );
@@ -6326,10 +6361,10 @@ const layoutItem = ({
   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;
@@ -6417,7 +6452,7 @@ class SpineLayout extends DestroyableClass {
     this.itemLayoutInformation = [];
     this.layoutSubject = new Subject();
     spineItemsManager.items$.pipe(
-      switchMap((items) => {
+      switchMap$1((items) => {
         const needsLayouts$ = items.map(
           (spineItem) => spineItem.needsLayout$.pipe(
             tap$1(() => {
@@ -6590,7 +6625,7 @@ class Spine extends DestroyableClass {
     this.hookManager = hookManager;
     this.elementSubject = new BehaviorSubject(noopElement());
     this.elementResize$ = this.elementSubject.pipe(
-      switchMap$1((element) => observeResize(element)),
+      switchMap((element) => observeResize(element)),
       share$1()
     );
     this.element$ = this.elementSubject.asObservable();
@@ -7020,7 +7055,7 @@ const createResourcesManager = (context) => {
       return from(
         forkJoin([openDatabase(`prose-reader`), from(data.blob())])
       ).pipe(
-        switchMap$1(([db, blob]) => {
+        switchMap(([db, blob]) => {
           return from(db.put(`${uniqueID}_${item.id}`, blob));
         }),
         catchError$1((error) => {
@@ -7037,15 +7072,15 @@ const createResourcesManager = (context) => {
     })
   );
   merge(onLoad$).pipe(
-    switchMap$1(() => {
+    switchMap(() => {
       Report.log(`Cleanup up old cache...`);
       return from(openDatabase(`prose-reader`)).pipe(
-        switchMap$1(
+        switchMap(
           (db) => from(db.keys()).pipe(
             map(
               (keys) => keys.filter((key) => !key.toString().startsWith(uniqueID))
             ),
-            switchMap$1((keysToRemove) => {
+            switchMap((keysToRemove) => {
               const promises = keysToRemove.map((key) => db.remove(key));
               return from(Promise.all(promises));
             })
@@ -7093,7 +7128,7 @@ class ImageRenderer extends DocumentRenderer {
   }
   onCreateDocument() {
     return from(this.resourcesHandler.getResource()).pipe(
-      switchMap((responseOrUrl) => {
+      switchMap$1((responseOrUrl) => {
         const imgElement = this.containerElement.ownerDocument.createElement(`img`);
         this.layers = [{ element: imgElement }];
         imgElement.style.objectFit = `contain`;
@@ -7162,6 +7197,9 @@ class ImageRenderer extends DocumentRenderer {
   onRenderHeadless() {
     return EMPTY;
   }
+  getDocumentFrame() {
+    return void 0;
+  }
 }
 const mediaEnhancer = (next) => (options) => {
   const reader = next({
@@ -7227,10 +7265,10 @@ const mediaEnhancer = (next) => (options) => {
   );
   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 progressionEnhancer = (next) => (options) => {
         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 @@ const accessibilityEnhancer = (next) => (options) => {
   }, {});
   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);
       });
@@ -7481,12 +7515,12 @@ const loadingEnhancer = (next) => (options) => {
     })
   );
   const loadingItems$ = reader.spineItemsManager.items$.pipe(
-    switchMap$1((items) => createEntries$(items)),
+    switchMap((items) => createEntries$(items)),
     shareReplay(1),
     takeUntil$1(reader.context.destroy$)
   );
   loadingItems$.pipe(
-    switchMap$1(
+    switchMap(
       (entries) => merge(
         updateEntriesLayout$(entries),
         updateEntriesVisibility$(entries)
@@ -7527,11 +7561,11 @@ const translateFramePositionIntoPage = ({
   };
 };
 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 eventsEnhancer = (next) => (options) => {
   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 @@ const eventsEnhancer = (next) => (options) => {
               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 @@ const createHtmlPageFromResource = async (resourceResponse, item) => {
     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
@@ -7742,9 +7772,9 @@ const attachFrameSrc = ({
 }) => {
   const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
   return (stream) => stream.pipe(
-    switchMap((frameElement) => {
+    switchMap$1((frameElement) => {
       return from(resourcesHandler.getResource()).pipe(
-        switchMap((resource) => {
+        switchMap$1((resource) => {
           if (resource instanceof URL && item.href.startsWith(window.location.origin) && // we have an encoding and it's a valid html
           (item.mediaType && [
             `application/xhtml+xml`,
@@ -7761,7 +7791,7 @@ const attachFrameSrc = ({
             const resourceResponse$ = resource instanceof URL ? from(resourcesHandler.fetchResource()) : resource instanceof Response ? of(resource) : EMPTY;
             return resourceResponse$.pipe(
               filter$1((response) => response instanceof Response),
-              switchMap((response) => from(getHtmlFromResource(response))),
+              switchMap$1((response) => from(getHtmlFromResource(response))),
               tap$1((htmlDoc) => {
                 if (htmlDoc) {
                   const blob = new Blob([htmlDoc], { type: "text/html" });
@@ -8293,7 +8323,7 @@ const loadMedias = ({
   item,
   context
 }) => (stream) => stream.pipe(
-  switchMap((frameElement) => {
+  switchMap$1((frameElement) => {
     var _a;
     const images = ((_a = frameElement.contentDocument) == null ? void 0 : _a.getElementsByTagName("img")) || [];
     const imageObservables = Array.from(images).map((img) => {
@@ -8383,12 +8413,12 @@ class HtmlRenderer extends DocumentRenderer {
     blankPagePosition,
     spreadPosition
   }) {
-    var _a;
+    var _a, _b;
     const { width: pageWidth, height: pageHeight } = this.context.getPageSize();
     const frameElement = this.getFrameElement();
-    if (!frameElement) return of({ width: pageWidth, height: pageHeight });
+    if (!frameElement) return 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`,
@@ -8419,7 +8449,7 @@ class HtmlRenderer extends DocumentRenderer {
   }
   onRenderHeadless() {
     return from(this.resourcesHandler.fetchResource()).pipe(
-      switchMap((resource) => {
+      switchMap$1((resource) => {
         if (resource instanceof Response) {
           const contentType = resource.headers.get("content-type") ?? "";
           const parsableContentTypes = [
@@ -8483,6 +8513,9 @@ class HtmlRenderer extends DocumentRenderer {
         return void 0;
     }
   }
+  getDocumentFrame() {
+    return this.getFrameElement();
+  }
 }
 const htmlEnhancer = (next) => (options) => {
   const reader = next({
@@ -8570,12 +8603,13 @@ const selectionEnhancer = (next) => (options) => {
   const selectionWithPointerUpSubject = new 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);
           merge(
@@ -8624,14 +8658,14 @@ const selectionEnhancer = (next) => (options) => {
     share()
   );
   const selectionEnd$ = selectionStart$.pipe(
-    switchMap(() => selection$),
+    switchMap$1(() => selection$),
     distinctUntilChanged$1(),
     filter$1((selection) => !selection),
     share()
   );
   const selectionAfterPointerUp$ = selectionWithPointerUpSubject.asObservable();
   const lastSelectionOnPointerdown$ = reader.context.containerElement$.pipe(
-    switchMap((container) => fromEvent(container, "pointerdown")),
+    switchMap$1((container) => fromEvent(container, "pointerdown")),
     withLatestFrom(selection$),
     map$1(([, selection]) => selection),
     startWith$1(void 0),