@prose-reader/core 1.127.0 → 1.129.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { takeUntil, Subject, combineLatest, map as map$1, switchMap, merge, EMPTY, fromEvent, withLatestFrom, NEVER, Observable, of, scheduled, animationFrameScheduler, take as take$1, from, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, throttleTime, finalize, startWith as startWith$1, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, shareReplay as shareReplay$1, ReplaySubject, filter as filter$1, share, mergeMap, delay as delay$1, identity, timer, skip as skip$1, exhaustMap, first as first$1, endWith, lastValueFrom, forkJoin, catchError as catchError$1 } from "rxjs";
-import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, delay, debounceTime, skip, withLatestFrom as withLatestFrom$1, share as share$1, mergeMap as mergeMap$1, catchError } from "rxjs/operators";
+import { takeUntil, Subject, combineLatest, switchMap, fromEvent, take, map as map$1, from, of, merge, EMPTY, withLatestFrom, NEVER, Observable, 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, ReplaySubject, filter as filter$1, share, mergeMap, delay as delay$1, identity, timer, skip as skip$1, exhaustMap, first as first$1, lastValueFrom, endWith, defer, reduce, concatMap, forkJoin, catchError as catchError$1 } from "rxjs";
+import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take as take$1, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, delay, debounceTime, skip, withLatestFrom as withLatestFrom$1, share as share$1, mergeMap as mergeMap$1, catchError } from "rxjs/operators";
 import { shallowMergeIfDefined, isShallowEqual, detectMimeTypeFromName, parseContentType } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
@@ -112,6 +112,78 @@ let SettingsManager$2 = class SettingsManager extends SettingsManagerOverload {
     };
   }
 };
+const getAttributeValueFromString = (string, key) => {
+  const regExp = new RegExp(key + `\\s*=\\s*([0-9.]+)`, `i`);
+  const match = string.match(regExp) || [];
+  const firstMatch = match[1] || `0`;
+  return match && parseFloat(firstMatch) || 0;
+};
+const injectCSS = (frameElement, id, style, prepend) => {
+  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
+    const userStyle = document.createElement(`style`);
+    userStyle.id = id;
+    userStyle.innerHTML = style;
+    if (prepend) {
+      frameElement.contentDocument.head.prepend(userStyle);
+    } else {
+      frameElement.contentDocument.head.appendChild(userStyle);
+    }
+  }
+};
+const removeCSS = (frameElement, id) => {
+  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
+    const styleElement = frameElement.contentDocument.getElementById(id);
+    if (styleElement) {
+      styleElement.remove();
+    }
+  }
+};
+const upsertCSS = (frameElement, id, style, prepend) => {
+  if (!frameElement) return;
+  removeCSS(frameElement, id);
+  injectCSS(frameElement, id, style, prepend);
+};
+const getFrameViewportInfo = (frame) => {
+  if (frame && (frame == null ? void 0 : frame.contentDocument)) {
+    const doc = frame.contentDocument;
+    const viewportMetaElement = doc.querySelector(`meta[name='viewport']`);
+    if (viewportMetaElement) {
+      const viewportContent = viewportMetaElement.getAttribute(`content`);
+      if (viewportContent) {
+        const width = getAttributeValueFromString(viewportContent, `width`);
+        const height = getAttributeValueFromString(viewportContent, `height`);
+        if (width > 0 && height > 0) {
+          return {
+            hasViewport: true,
+            width,
+            height
+          };
+        } else {
+          return { hasViewport: true };
+        }
+      }
+    }
+  }
+  return { hasViewport: false };
+};
+const waitForFrameLoad = (stream) => stream.pipe(
+  switchMap(
+    (frame) => fromEvent(frame, `load`).pipe(
+      take(1),
+      map$1(() => frame)
+    )
+  )
+);
+const waitForFrameReady = (stream) => stream.pipe(
+  switchMap(
+    (frame) => {
+      var _a;
+      return from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || of(void 0)).pipe(
+        map$1(() => frame)
+      );
+    }
+  )
+);
 const fontsEnhancer = (next) => (options) => {
   const { fontScale, lineHeight, fontWeight, fontJustification } = options;
   const changes$ = new Subject();
@@ -144,9 +216,12 @@ const fontsEnhancer = (next) => (options) => {
   `;
   const applyChangeToSpineItems = (requireLayout) => {
     reader.spineItemsManager.items.forEach((item) => {
-      var _a;
       if (item.item.renditionLayout !== `pre-paginated`) {
-        (_a = item.upsertCSS) == null ? void 0 : _a.call(item, `prose-reader-fonts`, getStyle());
+        item.renderer.layers.forEach((layer) => {
+          if (layer.element instanceof HTMLIFrameElement) {
+            upsertCSS(layer.element, `prose-reader-fonts`, getStyle());
+          }
+        });
       }
     });
     if (requireLayout) {
@@ -156,7 +231,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.upsertCSS(`prose-reader-fonts`, getStyle());
+      item == null ? void 0 : item.renderer.layers.forEach((layer) => {
+        if (layer.element instanceof HTMLIFrameElement) {
+          upsertCSS(layer.element, `prose-reader-fonts`, getStyle());
+        }
+      });
     }
   });
   const shouldRequireLayout = (source) => source.pipe(
@@ -266,7 +345,7 @@ const createMovingSafePan$ = (reader) => {
   );
   const resetLockViewportFree$ = createResetLock$(
     reader.viewportFree$
-  ).pipe(take(1));
+  ).pipe(take$1(1));
   const pageTurnMode$ = reader.settings.values$.pipe(
     map(() => reader.settings.values.computedPageTurnMode),
     distinctUntilChanged()
@@ -314,78 +393,19 @@ const waitForSwitch = (waitForStream) => (stream) => stream.pipe(
     )
   )
 );
-const getAttributeValueFromString = (string, key) => {
-  const regExp = new RegExp(key + `\\s*=\\s*([0-9.]+)`, `i`);
-  const match = string.match(regExp) || [];
-  const firstMatch = match[1] || `0`;
-  return match && parseFloat(firstMatch) || 0;
-};
-const injectCSS = (frameElement, id, style, prepend) => {
-  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
-    const userStyle = document.createElement(`style`);
-    userStyle.id = id;
-    userStyle.innerHTML = style;
-    if (prepend) {
-      frameElement.contentDocument.head.prepend(userStyle);
-    } else {
-      frameElement.contentDocument.head.appendChild(userStyle);
-    }
-  }
-};
-const removeCSS = (frameElement, id) => {
-  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
-    const styleElement = frameElement.contentDocument.getElementById(id);
-    if (styleElement) {
-      styleElement.remove();
-    }
-  }
-};
-const upsertCSS = (frameElement, id, style, prepend) => {
-  if (!frameElement) return;
-  removeCSS(frameElement, id);
-  injectCSS(frameElement, id, style, prepend);
-};
-const getFrameViewportInfo = (frame) => {
-  if (frame && (frame == null ? void 0 : frame.contentDocument)) {
-    const doc = frame.contentDocument;
-    const viewportMetaElement = doc.querySelector(`meta[name='viewport']`);
-    if (viewportMetaElement) {
-      const viewportContent = viewportMetaElement.getAttribute(`content`);
-      if (viewportContent) {
-        const width = getAttributeValueFromString(viewportContent, `width`);
-        const height = getAttributeValueFromString(viewportContent, `height`);
-        if (width > 0 && height > 0) {
-          return {
-            hasViewport: true,
-            width,
-            height
-          };
-        } else {
-          return { hasViewport: true };
-        }
-      }
+const deferNextResult = (stream) => {
+  let value;
+  const sub = stream.subscribe((result) => {
+    value = { result };
+  });
+  return () => {
+    sub.unsubscribe();
+    if (value) {
+      return of(value.result);
     }
-  }
-  return { hasViewport: false };
+    return stream;
+  };
 };
-const waitForFrameLoad = (stream) => stream.pipe(
-  switchMap(
-    (frame) => fromEvent(frame, `load`).pipe(
-      take$1(1),
-      map$1(() => frame)
-    )
-  )
-);
-const waitForFrameReady = (stream) => stream.pipe(
-  switchMap(
-    (frame) => {
-      var _a;
-      return from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || of(void 0)).pipe(
-        map$1(() => frame)
-      );
-    }
-  )
-);
 const fixReflowable = (reader) => {
   reader.hookManager.register(
     `item.onAfterLayout`,
@@ -479,28 +499,33 @@ const layoutEnhancer = (next) => (options) => {
         columnWidth = columnHeight;
         columnGap = pageVerticalMargin2 * 2;
       }
-      spineItem == null ? void 0 : spineItem.upsertCSS(
-        `prose-layout-enhancer-css`,
-        `
-        body {
-          width: ${width}px !important;
-          margin: ${pageVerticalMargin2}px ${pageHorizontalMargin2}px !important;
-          column-gap: ${columnGap}px !important;
-          column-width: ${columnWidth}px !important;
-          height: ${columnHeight}px !important;
-        }
-        img, video, audio, object, svg {
-          max-width: ${columnWidth}px !important;
-          max-height: ${columnHeight}px !important;
-        }
-        table {
-          max-width: ${columnWidth}px !important;
-        }
-        td {
-          max-width: ${columnWidth}px;
+      spineItem == null ? void 0 : spineItem.renderer.layers.forEach((layer) => {
+        if (layer.element instanceof HTMLIFrameElement) {
+          upsertCSS(
+            layer.element,
+            `prose-layout-enhancer-css`,
+            `
+              body {
+                width: ${width}px !important;
+                margin: ${pageVerticalMargin2}px ${pageHorizontalMargin2}px !important;
+                column-gap: ${columnGap}px !important;
+                column-width: ${columnWidth}px !important;
+                height: ${columnHeight}px !important;
+              }
+              img, video, audio, object, svg {
+                max-width: ${columnWidth}px !important;
+                max-height: ${columnHeight}px !important;
+              }
+              table {
+                max-width: ${columnWidth}px !important;
+              }
+              td {
+                max-width: ${columnWidth}px;
+              }
+            `
+          );
         }
-      `
-      );
+      });
     }
   });
   fixReflowable(reader);
@@ -1350,66 +1375,79 @@ const trackTotalPages = (reader) => {
   );
   return totalPages$;
 };
-const mapPaginationInfoToExtendedInfo = (reader) => (paginationInfo, chaptersInfo) => {
+const mapPaginationInfoToExtendedInfo = (reader, paginationInfo, chaptersInfo) => {
   const context = reader.context;
   const beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.spineItemsManager.get(paginationInfo.beginSpineItemIndex) : void 0;
   const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.spineItemsManager.get(paginationInfo.endSpineItemIndex) : void 0;
-  return {
-    ...paginationInfo,
-    beginChapterInfo: beginItem ? chaptersInfo[beginItem.item.id] : void 0,
-    // chapterIndex: number;
-    // pages: number;
-    // pageIndexInBook: number;
-    // pageIndexInChapter: number;
-    // pagesOfChapter: number;
-    // pagePercentageInChapter: number;
-    // offsetPercentageInChapter: number;
-    // domIndex: number;
-    // charOffset: number;
-    // serializeString?: string;
-    beginSpineItemReadingDirection: beginItem == null ? void 0 : beginItem.readingDirection,
-    endChapterInfo: endItem ? chaptersInfo[endItem.item.id] : void 0,
-    endSpineItemReadingDirection: endItem == null ? void 0 : endItem.readingDirection,
-    // spineItemReadingDirection: focusedSpineItem?.getReadingDirection(),
-    /**
-     * This percentage is based of the weight (kb) of every items and the number of pages.
-     * It is not accurate but gives a general good idea of the overall progress.
-     * It is recommended to use this progress only for reflow books. For pre-paginated books
-     * the number of pages and current index can be used instead since 1 page = 1 chapter.
-     */
-    percentageEstimateOfBook: endItem ? reader.progression.getPercentageEstimate(
-      context,
-      paginationInfo.endSpineItemIndex ?? 0,
-      paginationInfo.endNumberOfPagesInSpineItem,
-      paginationInfo.endPageIndexInSpineItem || 0,
-      reader.navigation.getNavigation().position,
-      endItem
-    ) : 0,
-    isUsingSpread: context.state.isUsingSpreadMode ?? false
-    // hasNextChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
-    // hasPreviousChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
-    // numberOfSpineItems: context.manifest?.readingOrder.length,
-  };
+  const endItemProgression$ = endItem ? reader.progression.getPercentageEstimate(
+    context,
+    paginationInfo.endSpineItemIndex ?? 0,
+    paginationInfo.endNumberOfPagesInSpineItem,
+    paginationInfo.endPageIndexInSpineItem || 0,
+    reader.navigation.getNavigation().position,
+    endItem
+  ) : of(0);
+  return endItemProgression$.pipe(
+    map$1((percentageEstimateOfBook) => ({
+      ...paginationInfo,
+      beginChapterInfo: beginItem ? chaptersInfo[beginItem.item.id] : void 0,
+      // chapterIndex: number;
+      // pages: number;
+      // pageIndexInBook: number;
+      // pageIndexInChapter: number;
+      // pagesOfChapter: number;
+      // pagePercentageInChapter: number;
+      // offsetPercentageInChapter: number;
+      // domIndex: number;
+      // charOffset: number;
+      // serializeString?: string;
+      beginSpineItemReadingDirection: beginItem == null ? void 0 : beginItem.readingDirection,
+      endChapterInfo: endItem ? chaptersInfo[endItem.item.id] : void 0,
+      endSpineItemReadingDirection: endItem == null ? void 0 : endItem.readingDirection,
+      // spineItemReadingDirection: focusedSpineItem?.getReadingDirection(),
+      /**
+       * This percentage is based of the weight (kb) of every items and the number of pages.
+       * It is not accurate but gives a general good idea of the overall progress.
+       * It is recommended to use this progress only for reflow books. For pre-paginated books
+       * the number of pages and current index can be used instead since 1 page = 1 chapter.
+       */
+      percentageEstimateOfBook,
+      isUsingSpread: context.state.isUsingSpreadMode ?? false
+      // hasNextChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
+      // hasPreviousChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
+      // numberOfSpineItems: context.manifest?.readingOrder.length,
+    }))
+  );
 };
 const trackPaginationInfo = (reader) => {
   const chaptersInfo$ = trackChapterInfo(reader);
   const totalPages$ = trackTotalPages(reader);
   const currentValue = new BehaviorSubject({
     ...reader.pagination.getState(),
-    ...mapPaginationInfoToExtendedInfo(reader)(
-      reader.pagination.getState(),
-      getChaptersInfo(reader)
-    ),
+    beginChapterInfo: void 0,
+    beginCfi: void 0,
+    beginPageIndexInSpineItem: void 0,
+    isUsingSpread: false,
     beginAbsolutePageIndex: 0,
     endAbsolutePageIndex: 0,
-    numberOfTotalPages: 0
+    numberOfTotalPages: 0,
+    beginSpineItemReadingDirection: void 0,
+    beginSpineItemIndex: void 0,
+    endCfi: void 0,
+    endChapterInfo: void 0,
+    endSpineItemReadingDirection: void 0,
+    percentageEstimateOfBook: 0
   });
   const extandedBasePagination$ = reader.pagination.state$.pipe(
     combineLatestWith(chaptersInfo$),
-    map$1(([info, chaptersInfo]) => ({
-      ...info,
-      ...mapPaginationInfoToExtendedInfo(reader)(info, chaptersInfo)
-    })),
+    switchMap(
+      ([info, chaptersInfo]) => mapPaginationInfoToExtendedInfo(reader, info, chaptersInfo).pipe(
+        map$1((extendedInfo) => ({
+          ...info,
+          ...extendedInfo
+        }))
+      )
+    ),
     distinctUntilChanged$1(isShallowEqual)
   );
   const paginationInfo$ = combineLatest([
@@ -1508,15 +1546,22 @@ const themeEnhancer = (next) => (options) => {
   };
   const applyChangeToSpineItem = () => {
     reader.spineItemsManager.items.forEach((item) => {
-      var _a;
-      (_a = item.upsertCSS) == null ? void 0 : _a.call(item, `prose-reader-theme`, getStyle());
+      item.renderer.layers.forEach((layer) => {
+        if (layer.element instanceof HTMLIFrameElement) {
+          upsertCSS(layer.element, `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.upsertCSS(`prose-reader-theme`, getStyle());
+      item == null ? void 0 : item.renderer.layers.forEach((layer) => {
+        if (layer.element instanceof HTMLIFrameElement) {
+          upsertCSS(layer.element, `prose-reader-theme`, getStyle());
+        }
+      });
     }
   });
   reader.spineItemsManager.items$.pipe(
@@ -1923,7 +1968,8 @@ const isHtmlElement = (element) => {
 function createRangeOrCaretFromPoint(doc, startX, startY) {
   if (`caretPositionFromPoint` in doc) {
     return doc.caretPositionFromPoint(startX, startY);
-  } else if (typeof doc.caretRangeFromPoint !== `undefined`) {
+  } else if ("caretRangeFromPoint" in doc && // @ts-expect-error limited availability
+  typeof doc.caretRangeFromPoint !== `undefined`) {
     return doc.caretRangeFromPoint(startX, startY);
   }
 }
@@ -5070,7 +5116,7 @@ class PaginationController extends DestroyableClass {
           threshold: 0.5
         });
         return this.context.bridgeEvent.navigationUnlocked$.pipe(
-          take$1(1),
+          take(1),
           withLatestFrom(this.context.bridgeEvent.navigation$),
           tap$1(([, navigation]) => {
             const { position } = navigation;
@@ -5169,14 +5215,35 @@ const generateCfiFromRange = ({
   const endCFI = generateCfi(endNode, end, item);
   return { start: startCFI, end: endCFI };
 };
-class DocumentRenderer {
+const defaultGetResource = (item) => new URL(item.href);
+class ResourceHandler {
+  constructor(item, settings) {
+    this.item = item;
+    this.settings = settings;
+  }
+  async getResource() {
+    var _a, _b;
+    const resource = await lastValueFrom(
+      ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? of(void 0)
+    );
+    return resource ?? defaultGetResource(this.item);
+  }
+  async fetchResource() {
+    const resource = await this.getResource();
+    if (resource instanceof Response) return resource;
+    if (resource instanceof URL) return fetch(resource);
+    return resource;
+  }
+}
+class DocumentRenderer extends DestroyableClass {
   constructor(params) {
+    super();
     this.triggerSubject = new Subject();
     this.stateSubject = new BehaviorSubject(`idle`);
     this.unload$ = this.triggerSubject.pipe(
       withLatestFrom(this.stateSubject),
       filter$1(
-        ([trigger, state]) => trigger === `unload` && state !== "idle" && state !== "unloading"
+        ([trigger, state]) => trigger.type === `unload` && state !== "idle" && state !== "unloading"
       ),
       map$1(() => void 0),
       share()
@@ -5184,21 +5251,26 @@ class DocumentRenderer {
     this.load$ = this.triggerSubject.pipe(
       withLatestFrom(this.stateSubject),
       filter$1(
-        ([trigger, state]) => trigger === `load` && state !== "ready" && state !== "loaded" && state !== "loading"
+        ([trigger, state]) => trigger.type === `load` && state !== "loaded" && state !== "loading"
       ),
       map$1(() => void 0),
       share()
     );
     this.layers = [];
-    this.destroy$ = this.triggerSubject.pipe(
-      filter$1((trigger) => trigger === `destroy`)
-    );
     this.context = params.context;
     this.settings = params.settings;
     this.hookManager = params.hookManager;
     this.item = params.item;
     this.containerElement = params.containerElement;
     this.resourcesHandler = params.resourcesHandler;
+    const unloadTrigger$ = this.triggerSubject.pipe(
+      withLatestFrom(this.stateSubject),
+      filter$1(
+        ([trigger, state]) => trigger.type === `unload` && state !== "idle" && state !== "unloading"
+      ),
+      map$1(() => void 0),
+      share()
+    );
     this.load$.pipe(
       switchMap(() => {
         this.stateSubject.next(`loading`);
@@ -5232,13 +5304,12 @@ class DocumentRenderer {
           }),
           tap$1(() => {
             this.stateSubject.next(`loaded`);
-            this.stateSubject.next(`ready`);
           }),
-          takeUntil(merge(this.destroy$, this.unload$))
+          takeUntil(merge(this.destroy$, unloadTrigger$))
         );
       })
     ).subscribe();
-    this.unload$.pipe(
+    const unload$ = unloadTrigger$.pipe(
       switchMap(() => {
         this.stateSubject.next(`unloading`);
         return this.context.bridgeEvent.viewportFree$.pipe(
@@ -5247,29 +5318,32 @@ class DocumentRenderer {
             this.hookManager.destroy(`item.onDocumentLoad`, this.item.id);
           }),
           switchMap(() => {
-            const unload$ = this.onUnload().pipe(endWith(null), first$1());
-            return unload$;
+            const onUnload$ = this.onUnload().pipe(endWith(null), first$1());
+            return onUnload$;
           }),
           tap$1(() => {
             this.stateSubject.next(`idle`);
           }),
-          takeUntil(merge(this.destroy$, this.load$))
+          takeUntil(this.load$)
         );
       })
-    ).subscribe();
+    );
+    merge(unload$).pipe(takeUntil(this.destroy$)).subscribe();
   }
   get state$() {
     return this.stateSubject;
   }
+  get isLoaded$() {
+    return this.state$.pipe(map$1((state) => state === `loaded`));
+  }
   load() {
-    this.triggerSubject.next(`load`);
+    this.triggerSubject.next({ type: `load` });
   }
   unload() {
-    this.triggerSubject.next(`unload`);
+    this.triggerSubject.next({ type: `unload` });
   }
   destroy() {
-    this.triggerSubject.next(`destroy`);
-    this.triggerSubject.complete();
+    super.destroy();
     this.stateSubject.complete();
   }
   get writingMode() {
@@ -5289,39 +5363,21 @@ class DefaultRenderer extends DocumentRenderer {
   onLoadDocument() {
     return EMPTY;
   }
-  layout() {
-    return void 0;
-  }
-}
-const defaultGetResource = (item) => new URL(item.href);
-class ResourceHandler {
-  constructor(item, settings) {
-    this.item = item;
-    this.settings = settings;
-  }
-  async getResource() {
-    var _a, _b;
-    const resource = await lastValueFrom(
-      ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? of(void 0)
-    );
-    return resource ?? defaultGetResource(this.item);
-  }
-  async fetchResource() {
-    const resource = await this.getResource();
-    if (resource instanceof Response) return resource;
-    if (resource instanceof URL) return fetch(resource);
-    return resource;
+  onLayout() {
+    return of(void 0);
   }
 }
-class SpineItem {
+class SpineItem extends DestroyableClass {
   constructor(item, parentElement, context, settings, hookManager, index) {
     var _a, _b;
+    super();
     this.item = item;
     this.parentElement = parentElement;
     this.context = context;
     this.settings = settings;
     this.hookManager = hookManager;
     this.index = index;
+    this.layoutTriggerSubject = new Subject();
     this.adjustPositionOfElement = ({
       right,
       left,
@@ -5353,31 +5409,10 @@ class SpineItem {
         return (_e = (_d = frameElement.contentDocument) == null ? void 0 : _d.querySelector(selector)) == null ? void 0 : _e.getBoundingClientRect();
       }
     };
-    this.layout = ({
-      blankPagePosition,
-      minimumWidth,
-      spreadPosition
-    }) => {
-      this.hookManager.execute(`item.onBeforeLayout`, void 0, {
-        blankPagePosition,
-        item: this.item,
-        minimumWidth
-      });
-      const { height, width } = this.renderer.layout({
-        blankPagePosition,
-        minPageSpread: minimumWidth / this.context.getPageSize().width,
-        spreadPosition
-      }) ?? { width: 0, height: 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`;
-      this.hookManager.execute(`item.onAfterLayout`, void 0, {
-        blankPagePosition,
-        item: this.item,
-        minimumWidth
-      });
-      return { width: minWidth, height: minHeight };
+    this.layout = (params) => {
+      const nextResult = deferNextResult(this.layout$.pipe(first()));
+      this.layoutTriggerSubject.next(params);
+      return nextResult();
     };
     this.load = () => this.renderer.load();
     this.unload = () => {
@@ -5395,16 +5430,14 @@ class SpineItem {
       return normalizedValues;
     };
     this.destroy = () => {
-      this.destroySubject$.next();
+      super.destroy();
       this.containerElement.remove();
-      this.destroySubject$.complete();
       this.renderer.destroy();
     };
     this.isUsingVerticalWriting = () => {
       var _a2;
       return !!((_a2 = this.renderer.writingMode) == null ? void 0 : _a2.startsWith(`vertical`));
     };
-    this.destroySubject$ = new Subject();
     this.containerElement = createContainerElement(
       parentElement,
       item,
@@ -5422,17 +5455,62 @@ class SpineItem {
       resourcesHandler: this.resourcesHandler
     };
     this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
-    const contentLayoutChange$ = merge(
-      this.unloaded$.pipe(map(() => ({ isFirstLayout: false }))),
-      this.ready$.pipe(map(() => ({ isFirstLayout: true })))
+    const layoutProcess$ = this.layoutTriggerSubject.pipe(
+      switchMap$1(({ 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
+          })
+        );
+        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`;
+              this.hookManager.execute(`item.onAfterLayout`, void 0, {
+                blankPagePosition,
+                item: this.item,
+                minimumWidth
+              });
+              return {
+                type: "end",
+                data: { width: minWidth, height: minHeight }
+              };
+            })
+          )
+        );
+      }),
+      share$1()
     );
-    this.contentLayout$ = contentLayoutChange$.pipe(
-      withLatestFrom$1(this.isReady$),
-      map(([data, isReady]) => ({
-        isFirstLayout: data.isFirstLayout,
-        isReady
-      }))
+    this.layout$ = layoutProcess$.pipe(
+      filter((event) => event.type === `end`),
+      map((event) => event.data),
+      share$1()
+    );
+    this.isReady$ = layoutProcess$.pipe(
+      withLatestFrom$1(this.renderer.isLoaded$),
+      map(([event, loaded]) => !!(event.type === `end` && loaded)),
+      startWith(false),
+      distinctUntilChanged(),
+      shareReplay({ refCount: true })
     );
+    this.needsLayout$ = merge(this.unloaded$, this.loaded$);
+    merge(this.layout$, this.isReady$).pipe(takeUntil$1(this.destroy$)).subscribe();
   }
   get element() {
     return this.containerElement;
@@ -5448,15 +5526,6 @@ class SpineItem {
   get readingDirection() {
     return this.renderer.readingDirection;
   }
-  get isReady() {
-    return this.renderer.state$.getValue() === "ready";
-  }
-  get ready$() {
-    return this.renderer.state$.pipe(
-      distinctUntilChanged(),
-      filter((state) => state === "ready")
-    );
-  }
   get loaded$() {
     return this.renderer.state$.pipe(
       distinctUntilChanged(),
@@ -5475,22 +5544,6 @@ class SpineItem {
       )
     );
   }
-  get isReady$() {
-    return this.renderer.state$.pipe(map((state) => state === "ready"));
-  }
-  /**
-   * Helper that will inject CSS into the document frame.
-   *
-   * @important
-   * The document needs to be detected as a frame.
-   */
-  upsertCSS(id, style, prepend) {
-    this.renderer.layers.forEach((layer) => {
-      if (layer.element instanceof HTMLIFrameElement) {
-        upsertCSS(layer.element, id, style, prepend);
-      }
-    });
-  }
 }
 const createContainerElement = (containerElement, item, hookManager) => {
   const element = containerElement.ownerDocument.createElement(`div`);
@@ -6071,6 +6124,103 @@ const convertSpinePositionToLayoutPosition = ({
     right: position.x + pageSize.width
   };
 };
+const layoutItem = ({
+  horizontalOffset,
+  verticalOffset,
+  context,
+  spineItemsManager,
+  isGloballyPrePaginated,
+  settings,
+  index,
+  item,
+  newItemLayoutInformation
+}) => {
+  let minimumWidth = context.getPageSize().width;
+  let blankPagePosition = `none`;
+  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) {
+      minimumWidth = context.getPageSize().width * 2;
+    }
+    if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
+      minimumWidth = context.getPageSize().width * 2;
+    }
+    const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
+    if (item.item.pageSpreadRight && itemStartOnNewScreen && !context.isRTL()) {
+      blankPagePosition = `before`;
+      minimumWidth = context.getPageSize().width * 2;
+    } else if (item.item.pageSpreadLeft && itemStartOnNewScreen && context.isRTL()) {
+      blankPagePosition = `before`;
+      minimumWidth = context.getPageSize().width * 2;
+    } else if (lastItemStartOnNewScreenInAPrepaginatedBook) {
+      if (context.isRTL()) {
+        blankPagePosition = `before`;
+      } else {
+        blankPagePosition = `after`;
+      }
+      minimumWidth = context.getPageSize().width * 2;
+    }
+  }
+  const itemLayout$ = item.layout({
+    minimumWidth,
+    blankPagePosition,
+    spreadPosition: context.state.isUsingSpreadMode ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
+  });
+  return itemLayout$.pipe(
+    map$1(({ width, height }) => {
+      if (settings.values.computedPageTurnDirection === `vertical`) {
+        const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.state.visibleAreaRect.height;
+        const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
+        if (context.isRTL()) {
+          item.adjustPositionOfElement({
+            top: currentValidEdgeYForVerticalPositioning,
+            left: currentValidEdgeXForVerticalPositioning
+          });
+        } else {
+          item.adjustPositionOfElement({
+            top: currentValidEdgeYForVerticalPositioning,
+            left: currentValidEdgeXForVerticalPositioning
+          });
+        }
+        const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
+        const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
+        newItemLayoutInformation.push({
+          left: currentValidEdgeXForVerticalPositioning,
+          right: newEdgeX,
+          top: currentValidEdgeYForVerticalPositioning,
+          bottom: newEdgeY,
+          height,
+          width,
+          x: currentValidEdgeXForVerticalPositioning,
+          y: currentValidEdgeYForVerticalPositioning
+        });
+        return {
+          horizontalOffset: newEdgeX,
+          verticalOffset: newEdgeY
+        };
+      }
+      item.adjustPositionOfElement(
+        context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
+      );
+      const left = context.isRTL() ? context.state.visibleAreaRect.width - horizontalOffset - width : horizontalOffset;
+      newItemLayoutInformation.push({
+        right: context.isRTL() ? context.state.visibleAreaRect.width - horizontalOffset : horizontalOffset + width,
+        left,
+        x: left,
+        top: verticalOffset,
+        bottom: height,
+        height,
+        width,
+        y: verticalOffset
+      });
+      return {
+        horizontalOffset: horizontalOffset + width,
+        verticalOffset: 0
+      };
+    })
+  );
+};
 const NAMESPACE = `SpineLayout`;
 class SpineLayout extends DestroyableClass {
   constructor(spineItemsManager, context, settings) {
@@ -6082,8 +6232,8 @@ class SpineLayout extends DestroyableClass {
     this.layoutSubject = new Subject();
     spineItemsManager.items$.pipe(
       switchMap((items) => {
-        const itemsLayout$ = items.map(
-          (spineItem) => spineItem.contentLayout$.pipe(
+        const needsLayouts$ = items.map(
+          (spineItem) => spineItem.needsLayout$.pipe(
             tap$1(() => {
               this.layout();
             })
@@ -6104,12 +6254,60 @@ class SpineLayout extends DestroyableClass {
             })
           )
         );
-        return merge(...itemsLayout$, ...writingModeUpdate$);
+        return merge(...needsLayouts$, ...writingModeUpdate$);
       })
     ).pipe(takeUntil(this.destroy$)).subscribe();
+    const layoutInProgress = new BehaviorSubject(false);
     this.layout$ = this.layoutSubject.pipe(
-      map$1((hasChanged) => ({ hasChanged })),
-      startWith$1({ hasChanged: true }),
+      debounceTime$1(50),
+      // queue layout until previous layout is done
+      exhaustMap(
+        () => layoutInProgress.pipe(
+          filter$1((value) => !value),
+          first$1()
+        )
+      ),
+      exhaustMap(() => {
+        layoutInProgress.next(true);
+        const manifest = this.context.manifest;
+        const newItemLayoutInformation = [];
+        const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
+        return from(this.spineItemsManager.items).pipe(
+          reduce(
+            (acc$, item, index) => acc$.pipe(
+              concatMap(
+                ({ horizontalOffset, verticalOffset }) => layoutItem({
+                  context: this.context,
+                  horizontalOffset,
+                  index,
+                  isGloballyPrePaginated,
+                  item,
+                  settings: this.settings,
+                  spineItemsManager: this.spineItemsManager,
+                  verticalOffset,
+                  newItemLayoutInformation
+                })
+              )
+            ),
+            of({ horizontalOffset: 0, verticalOffset: 0 })
+          ),
+          concatMap((layout$) => layout$),
+          map$1(() => {
+            const hasChanged = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
+              (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
+            );
+            this.itemLayoutInformation = newItemLayoutInformation;
+            Report.log(NAMESPACE, `layout`, {
+              hasChanged,
+              itemLayoutInformation: this.itemLayoutInformation
+            });
+            return { hasChanged };
+          }),
+          finalize(() => {
+            layoutInProgress.next(false);
+          })
+        );
+      }),
       map$1(({ hasChanged }) => {
         const items = spineItemsManager.items;
         const spineItemsPagesAbsolutePositions = items.map((item) => {
@@ -6159,116 +6357,13 @@ class SpineLayout extends DestroyableClass {
           pages
         };
       }),
-      shareReplay$1(1)
+      share()
     );
+    this.info$ = this.layout$.pipe(shareReplay$1({ refCount: true }));
+    merge(this.layout$, this.info$).pipe(takeUntil(this.destroy$)).subscribe();
   }
-  /**
-   * @todo
-   * move this logic to the spine
-   *
-   * @todo
-   * make sure to check how many times it is being called and try to reduce number of layouts
-   * it is called eery time an item is being unload (which can adds up quickly for big books)
-   */
   layout() {
-    const manifest = this.context.manifest;
-    const newItemLayoutInformation = [];
-    const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
-    this.spineItemsManager.items.reduce(
-      ({ horizontalOffset, verticalOffset }, item, index) => {
-        let minimumWidth = this.context.getPageSize().width;
-        let blankPagePosition = `none`;
-        const itemStartOnNewScreen = horizontalOffset % this.context.state.visibleAreaRect.width === 0;
-        const isLastItem = index === this.spineItemsManager.items.length - 1;
-        if (this.context.state.isUsingSpreadMode) {
-          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-          const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
-          if (item.item.pageSpreadRight && itemStartOnNewScreen && !this.context.isRTL()) {
-            blankPagePosition = `before`;
-            minimumWidth = this.context.getPageSize().width * 2;
-          } else if (item.item.pageSpreadLeft && itemStartOnNewScreen && this.context.isRTL()) {
-            blankPagePosition = `before`;
-            minimumWidth = this.context.getPageSize().width * 2;
-          } else if (lastItemStartOnNewScreenInAPrepaginatedBook) {
-            if (this.context.isRTL()) {
-              blankPagePosition = `before`;
-            } else {
-              blankPagePosition = `after`;
-            }
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-        }
-        const { width, height } = item.layout({
-          minimumWidth,
-          blankPagePosition,
-          spreadPosition: this.context.state.isUsingSpreadMode ? itemStartOnNewScreen ? this.context.isRTL() ? `right` : `left` : this.context.isRTL() ? `left` : `right` : `none`
-        });
-        if (this.settings.values.computedPageTurnDirection === `vertical`) {
-          const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - this.context.state.visibleAreaRect.height;
-          const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
-          if (this.context.isRTL()) {
-            item.adjustPositionOfElement({
-              top: currentValidEdgeYForVerticalPositioning,
-              left: currentValidEdgeXForVerticalPositioning
-            });
-          } else {
-            item.adjustPositionOfElement({
-              top: currentValidEdgeYForVerticalPositioning,
-              left: currentValidEdgeXForVerticalPositioning
-            });
-          }
-          const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
-          const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
-          newItemLayoutInformation.push({
-            left: currentValidEdgeXForVerticalPositioning,
-            right: newEdgeX,
-            top: currentValidEdgeYForVerticalPositioning,
-            bottom: newEdgeY,
-            height,
-            width,
-            x: currentValidEdgeXForVerticalPositioning,
-            y: currentValidEdgeYForVerticalPositioning
-          });
-          return {
-            horizontalOffset: newEdgeX,
-            verticalOffset: newEdgeY
-          };
-        }
-        item.adjustPositionOfElement(
-          this.context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
-        );
-        const left = this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset - width : horizontalOffset;
-        newItemLayoutInformation.push({
-          right: this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset : horizontalOffset + width,
-          left,
-          x: left,
-          top: verticalOffset,
-          bottom: height,
-          height,
-          width,
-          y: verticalOffset
-        });
-        return {
-          horizontalOffset: horizontalOffset + width,
-          verticalOffset: 0
-        };
-      },
-      { horizontalOffset: 0, verticalOffset: 0 }
-    );
-    const hasLayoutChanges = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
-      (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
-    );
-    this.itemLayoutInformation = newItemLayoutInformation;
-    Report.log(NAMESPACE, `layout`, {
-      hasLayoutChanges,
-      itemLayoutInformation: this.itemLayoutInformation
-    });
-    this.layoutSubject.next(hasLayoutChanges);
+    this.layoutSubject.next(void 0);
   }
   /**
    * It's important to not use x,y since we need the absolute position of each element. Otherwise x,y would be relative to
@@ -6851,7 +6946,7 @@ class ImageRenderer extends DocumentRenderer {
     this.layers = [];
     return EMPTY;
   }
-  layout({
+  onLayout({
     spreadPosition
   }) {
     var _a, _b;
@@ -6871,10 +6966,10 @@ class ImageRenderer extends DocumentRenderer {
       element.style.width = `${width}px`;
       element.style.objectPosition = spreadPosition === "left" ? `right` : spreadPosition === `right` ? `left` : `center`;
     }
-    return {
+    return of({
       width,
       height
-    };
+    });
   }
 }
 const mediaEnhancer = (next) => (options) => {
@@ -6970,36 +7065,41 @@ const mediaEnhancer = (next) => (options) => {
 const progressionEnhancer = (next) => (options) => {
   const reader = next(options);
   const getPercentageEstimate = (context, currentSpineIndex, numberOfPages, pageIndex, currentPosition, currentItem) => {
-    var _a, _b, _c, _d, _e, _f;
-    const isGloballyPrePaginated = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
-    const readingOrderLength = ((_b = context.manifest) == null ? void 0 : _b.spineItems.length) || 0;
-    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` && !currentItem.isReady) {
-      progressWithinThisItem = 0;
-    }
-    let totalProgress = estimateBeforeThisItem + progressWithinThisItem;
-    if (((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
-      if (currentItem.isReady) {
-        progressWithinThisItem = getScrollPercentageWithinItem(
-          context,
-          currentPosition,
-          currentItem
-        );
-      } else {
-        progressWithinThisItem = 0;
-      }
-      totalProgress = getTotalProgressFromPercentages(
-        estimateBeforeThisItem,
-        currentItemWeight,
-        progressWithinThisItem
-      );
-    }
-    if (currentSpineIndex === readingOrderLength - 1 && pageIndex === numberOfPages - 1 && totalProgress > 0.99) {
-      return 1;
-    }
-    return totalProgress;
+    return currentItem.isReady$.pipe(
+      first$1(),
+      map$1((itemIsReady) => {
+        var _a, _b, _c, _d, _e, _f;
+        const isGloballyPrePaginated = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
+        const readingOrderLength = ((_b = context.manifest) == null ? void 0 : _b.spineItems.length) || 0;
+        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) {
+          progressWithinThisItem = 0;
+        }
+        let totalProgress = estimateBeforeThisItem + progressWithinThisItem;
+        if (((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
+          if (itemIsReady) {
+            progressWithinThisItem = getScrollPercentageWithinItem(
+              context,
+              currentPosition,
+              currentItem
+            );
+          } else {
+            progressWithinThisItem = 0;
+          }
+          totalProgress = getTotalProgressFromPercentages(
+            estimateBeforeThisItem,
+            currentItemWeight,
+            progressWithinThisItem
+          );
+        }
+        if (currentSpineIndex === readingOrderLength - 1 && pageIndex === numberOfPages - 1 && totalProgress > 0.99) {
+          return 1;
+        }
+        return totalProgress;
+      })
+    );
   };
   const getTotalProgressFromPercentages = (estimateBeforeThisItem, currentItemWeight, progressWithinThisItem) => {
     return estimateBeforeThisItem + currentItemWeight * progressWithinThisItem;
@@ -7052,19 +7152,24 @@ const accessibilityEnhancer = (next) => (options) => {
       if (!(frame instanceof HTMLIFrameElement)) return;
       const item = reader.spineItemsManager.get(itemId);
       if (!item) return;
-      item.upsertCSS(
-        `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.
-        */
-        ``}
-          outline: -webkit-focus-ring-color auto 1px;
+      item.renderer.layers.forEach((layer) => {
+        if (layer.element instanceof HTMLIFrameElement) {
+          upsertCSS(
+            layer.element,
+            `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.
+            */
+            ``}
+                outline: -webkit-focus-ring-color auto 1px;
+              }
+            `
+          );
         }
-      `
-      );
+      });
       const links = (_b = frame.contentDocument) == null ? void 0 : _b.body.querySelectorAll(`a`);
       links == null ? void 0 : links.forEach((link) => {
         observer.observe(link);
@@ -8028,7 +8133,7 @@ class HtmlRenderer extends DocumentRenderer {
     this.layers = [];
     return EMPTY;
   }
-  layout({
+  onLayout({
     minPageSpread,
     blankPagePosition,
     spreadPosition
@@ -8036,10 +8141,10 @@ class HtmlRenderer extends DocumentRenderer {
     var _a;
     const { width: pageWidth, height: pageHeight } = this.context.getPageSize();
     const frameElement = this.getFrameElement();
-    if (!frameElement) return { width: pageWidth, height: pageHeight };
+    if (!frameElement) return of({ width: pageWidth, height: pageHeight });
     const isUsingVerticalWriting = !!((_a = this.writingMode) == null ? void 0 : _a.startsWith(`vertical`));
     if (this.item.renditionLayout === `pre-paginated`) {
-      return renderPrePaginated({
+      const dims = renderPrePaginated({
         blankPagePosition,
         enableTouch: this.settings.values.computedPageTurnMode !== `scrollable`,
         frameElement,
@@ -8049,6 +8154,7 @@ class HtmlRenderer extends DocumentRenderer {
         pageWidth,
         spreadPosition
       });
+      return of(dims);
     }
     const { latestContentHeightWhenLoaded, ...rest } = renderReflowable({
       pageHeight,
@@ -8064,7 +8170,7 @@ class HtmlRenderer extends DocumentRenderer {
       enableTouch: this.settings.values.computedPageTurnMode !== `scrollable`
     });
     this.latestContentHeightWhenLoaded = latestContentHeightWhenLoaded;
-    return rest;
+    return of(rest);
   }
   getFrameElement() {
     var _a;
@@ -8146,7 +8252,6 @@ const createRangeFromSelection = ({
   selection,
   spineItem
 }) => {
-  if (!spineItem.isReady) return void 0;
   const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
   if (!anchorNode || !focusNode) {
     return void 0;