@prose-reader/core 1.126.0 → 1.128.0

package/dist/index.umd.cjs

@@ -112,6 +112,78 @@
       };
     }
   };
+  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(
+    rxjs.switchMap(
+      (frame) => rxjs.fromEvent(frame, `load`).pipe(
+        rxjs.take(1),
+        rxjs.map(() => frame)
+      )
+    )
+  );
+  const waitForFrameReady = (stream) => stream.pipe(
+    rxjs.switchMap(
+      (frame) => {
+        var _a;
+        return rxjs.from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || rxjs.of(void 0)).pipe(
+          rxjs.map(() => frame)
+        );
+      }
+    )
+  );
   const fontsEnhancer = (next) => (options) => {
     const { fontScale, lineHeight, fontWeight, fontJustification } = options;
     const changes$ = new rxjs.Subject();
@@ -144,9 +216,12 @@
   `;
     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 @@
     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(
@@ -314,78 +393,19 @@
       )
     )
   );
-  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 rxjs.of(value.result);
       }
-    }
-    return { hasViewport: false };
+      return stream;
+    };
   };
-  const waitForFrameLoad = (stream) => stream.pipe(
-    rxjs.switchMap(
-      (frame) => rxjs.fromEvent(frame, `load`).pipe(
-        rxjs.take(1),
-        rxjs.map(() => frame)
-      )
-    )
-  );
-  const waitForFrameReady = (stream) => stream.pipe(
-    rxjs.switchMap(
-      (frame) => {
-        var _a;
-        return rxjs.from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || rxjs.of(void 0)).pipe(
-          rxjs.map(() => frame)
-        );
-      }
-    )
-  );
   const fixReflowable = (reader) => {
     reader.hookManager.register(
       `item.onAfterLayout`,
@@ -479,28 +499,33 @@
           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 @@
     );
     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
+    ) : rxjs.of(0);
+    return endItemProgression$.pipe(
+      rxjs.map((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 rxjs.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(
       rxjs.combineLatestWith(chaptersInfo$),
-      rxjs.map(([info, chaptersInfo]) => ({
-        ...info,
-        ...mapPaginationInfoToExtendedInfo(reader)(info, chaptersInfo)
-      })),
+      rxjs.switchMap(
+        ([info, chaptersInfo]) => mapPaginationInfoToExtendedInfo(reader, info, chaptersInfo).pipe(
+          rxjs.map((extendedInfo) => ({
+            ...info,
+            ...extendedInfo
+          }))
+        )
+      ),
       rxjs.distinctUntilChanged(shared.isShallowEqual)
     );
     const paginationInfo$ = rxjs.combineLatest([
@@ -1508,15 +1546,22 @@
     };
     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 @@
   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);
     }
   }
@@ -5169,14 +5215,35 @@
     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 rxjs.lastValueFrom(
+        ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? rxjs.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 rxjs.Subject();
       this.stateSubject = new rxjs.BehaviorSubject(`idle`);
       this.unload$ = this.triggerSubject.pipe(
         rxjs.withLatestFrom(this.stateSubject),
         rxjs.filter(
-          ([trigger, state]) => trigger === `unload` && state !== "idle" && state !== "unloading"
+          ([trigger, state]) => trigger.type === `unload` && state !== "idle" && state !== "unloading"
         ),
         rxjs.map(() => void 0),
         rxjs.share()
@@ -5184,21 +5251,26 @@
       this.load$ = this.triggerSubject.pipe(
         rxjs.withLatestFrom(this.stateSubject),
         rxjs.filter(
-          ([trigger, state]) => trigger === `load` && state !== "ready" && state !== "loaded" && state !== "loading"
+          ([trigger, state]) => trigger.type === `load` && state !== "loaded" && state !== "loading"
         ),
         rxjs.map(() => void 0),
         rxjs.share()
       );
       this.layers = [];
-      this.destroy$ = this.triggerSubject.pipe(
-        rxjs.filter((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(
+        rxjs.withLatestFrom(this.stateSubject),
+        rxjs.filter(
+          ([trigger, state]) => trigger.type === `unload` && state !== "idle" && state !== "unloading"
+        ),
+        rxjs.map(() => void 0),
+        rxjs.share()
+      );
       this.load$.pipe(
         rxjs.switchMap(() => {
           this.stateSubject.next(`loading`);
@@ -5232,13 +5304,12 @@
             }),
             rxjs.tap(() => {
               this.stateSubject.next(`loaded`);
-              this.stateSubject.next(`ready`);
             }),
-            rxjs.takeUntil(rxjs.merge(this.destroy$, this.unload$))
+            rxjs.takeUntil(rxjs.merge(this.destroy$, unloadTrigger$))
           );
         })
       ).subscribe();
-      this.unload$.pipe(
+      const unload$ = unloadTrigger$.pipe(
         rxjs.switchMap(() => {
           this.stateSubject.next(`unloading`);
           return this.context.bridgeEvent.viewportFree$.pipe(
@@ -5247,29 +5318,32 @@
               this.hookManager.destroy(`item.onDocumentLoad`, this.item.id);
             }),
             rxjs.switchMap(() => {
-              const unload$ = this.onUnload().pipe(rxjs.endWith(null), rxjs.first());
-              return unload$;
+              const onUnload$ = this.onUnload().pipe(rxjs.endWith(null), rxjs.first());
+              return onUnload$;
             }),
             rxjs.tap(() => {
               this.stateSubject.next(`idle`);
             }),
-            rxjs.takeUntil(rxjs.merge(this.destroy$, this.load$))
+            rxjs.takeUntil(this.load$)
           );
         })
-      ).subscribe();
+      );
+      rxjs.merge(unload$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
     get state$() {
       return this.stateSubject;
     }
+    get isLoaded$() {
+      return this.state$.pipe(rxjs.map((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 @@
     onLoadDocument() {
       return rxjs.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 rxjs.lastValueFrom(
-        ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? rxjs.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 rxjs.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 rxjs.Subject();
       this.adjustPositionOfElement = ({
         right,
         left,
@@ -5353,31 +5409,10 @@
           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(operators.first()));
+        this.layoutTriggerSubject.next(params);
+        return nextResult();
       };
       this.load = () => this.renderer.load();
       this.unload = () => {
@@ -5395,16 +5430,14 @@
         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 rxjs.Subject();
       this.containerElement = createContainerElement(
         parentElement,
         item,
@@ -5422,17 +5455,62 @@
         resourcesHandler: this.resourcesHandler
       };
       this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
-      const contentLayoutChange$ = rxjs.merge(
-        this.unloaded$.pipe(operators.map(() => ({ isFirstLayout: false }))),
-        this.ready$.pipe(operators.map(() => ({ isFirstLayout: true })))
+      const layoutProcess$ = this.layoutTriggerSubject.pipe(
+        operators.switchMap(({ blankPagePosition, minimumWidth, spreadPosition }) => {
+          this.hookManager.execute(`item.onBeforeLayout`, void 0, {
+            blankPagePosition,
+            item: this.item,
+            minimumWidth
+          });
+          const layout$ = rxjs.defer(
+            () => this.renderer.onLayout({
+              blankPagePosition,
+              minPageSpread: minimumWidth / this.context.getPageSize().width,
+              minimumWidth,
+              spreadPosition
+            })
+          );
+          return rxjs.merge(
+            rxjs.of({ type: "start" }),
+            layout$.pipe(
+              operators.map((dims) => {
+                const { height, width } = dims ?? { height: 0, width: 0 };
+                const minHeight = Math.max(
+                  height,
+                  this.context.getPageSize().height
+                );
+                const minWidth = Math.max(width, minimumWidth);
+                this.containerElement.style.width = `${minWidth}px`;
+                this.containerElement.style.height = `${minHeight}px`;
+                this.hookManager.execute(`item.onAfterLayout`, void 0, {
+                  blankPagePosition,
+                  item: this.item,
+                  minimumWidth
+                });
+                return {
+                  type: "end",
+                  data: { width: minWidth, height: minHeight }
+                };
+              })
+            )
+          );
+        }),
+        operators.share()
+      );
+      this.layout$ = layoutProcess$.pipe(
+        operators.filter((event) => event.type === `end`),
+        operators.map((event) => event.data),
+        operators.share()
       );
-      this.contentLayout$ = contentLayoutChange$.pipe(
-        operators.withLatestFrom(this.isReady$),
-        operators.map(([data, isReady]) => ({
-          isFirstLayout: data.isFirstLayout,
-          isReady
-        }))
+      this.isReady$ = layoutProcess$.pipe(
+        operators.withLatestFrom(this.renderer.isLoaded$),
+        operators.map(([event, loaded]) => !!(event.type === `end` && loaded)),
+        operators.startWith(false),
+        operators.distinctUntilChanged(),
+        operators.shareReplay({ refCount: true })
       );
+      this.needsLayout$ = rxjs.merge(this.unloaded$, this.loaded$);
+      rxjs.merge(this.layout$, this.isReady$).pipe(operators.takeUntil(this.destroy$)).subscribe();
     }
     get element() {
       return this.containerElement;
@@ -5448,15 +5526,6 @@
     get readingDirection() {
       return this.renderer.readingDirection;
     }
-    get isReady() {
-      return this.renderer.state$.getValue() === "ready";
-    }
-    get ready$() {
-      return this.renderer.state$.pipe(
-        operators.distinctUntilChanged(),
-        operators.filter((state) => state === "ready")
-      );
-    }
     get loaded$() {
       return this.renderer.state$.pipe(
         operators.distinctUntilChanged(),
@@ -5475,22 +5544,6 @@
         )
       );
     }
-    get isReady$() {
-      return this.renderer.state$.pipe(operators.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 @@
       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(
+      rxjs.map(({ 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 @@
       this.layoutSubject = new rxjs.Subject();
       spineItemsManager.items$.pipe(
         rxjs.switchMap((items) => {
-          const itemsLayout$ = items.map(
-            (spineItem) => spineItem.contentLayout$.pipe(
+          const needsLayouts$ = items.map(
+            (spineItem) => spineItem.needsLayout$.pipe(
               rxjs.tap(() => {
                 this.layout();
               })
@@ -6104,12 +6254,60 @@
               })
             )
           );
-          return rxjs.merge(...itemsLayout$, ...writingModeUpdate$);
+          return rxjs.merge(...needsLayouts$, ...writingModeUpdate$);
         })
       ).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
+      const layoutInProgress = new rxjs.BehaviorSubject(false);
       this.layout$ = this.layoutSubject.pipe(
-        rxjs.map((hasChanged) => ({ hasChanged })),
-        rxjs.startWith({ hasChanged: true }),
+        rxjs.debounceTime(50),
+        // queue layout until previous layout is done
+        rxjs.exhaustMap(
+          () => layoutInProgress.pipe(
+            rxjs.filter((value) => !value),
+            rxjs.first()
+          )
+        ),
+        rxjs.exhaustMap(() => {
+          layoutInProgress.next(true);
+          const manifest = this.context.manifest;
+          const newItemLayoutInformation = [];
+          const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
+          return rxjs.from(this.spineItemsManager.items).pipe(
+            rxjs.reduce(
+              (acc$, item, index) => acc$.pipe(
+                rxjs.concatMap(
+                  ({ horizontalOffset, verticalOffset }) => layoutItem({
+                    context: this.context,
+                    horizontalOffset,
+                    index,
+                    isGloballyPrePaginated,
+                    item,
+                    settings: this.settings,
+                    spineItemsManager: this.spineItemsManager,
+                    verticalOffset,
+                    newItemLayoutInformation
+                  })
+                )
+              ),
+              rxjs.of({ horizontalOffset: 0, verticalOffset: 0 })
+            ),
+            rxjs.concatMap((layout$) => layout$),
+            rxjs.map(() => {
+              const hasChanged = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
+                (old, index) => !shared.isShallowEqual(old, newItemLayoutInformation[index])
+              );
+              this.itemLayoutInformation = newItemLayoutInformation;
+              Report.log(NAMESPACE, `layout`, {
+                hasChanged,
+                itemLayoutInformation: this.itemLayoutInformation
+              });
+              return { hasChanged };
+            }),
+            rxjs.finalize(() => {
+              layoutInProgress.next(false);
+            })
+          );
+        }),
         rxjs.map(({ hasChanged }) => {
           const items = spineItemsManager.items;
           const spineItemsPagesAbsolutePositions = items.map((item) => {
@@ -6159,116 +6357,13 @@
             pages
           };
         }),
-        rxjs.shareReplay(1)
+        rxjs.share()
       );
+      this.info$ = this.layout$.pipe(rxjs.shareReplay({ refCount: true }));
+      rxjs.merge(this.layout$, this.info$).pipe(rxjs.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) => !shared.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 @@
       this.layers = [];
       return rxjs.EMPTY;
     }
-    layout({
+    onLayout({
       spreadPosition
     }) {
       var _a, _b;
@@ -6871,10 +6966,10 @@
         element.style.width = `${width}px`;
         element.style.objectPosition = spreadPosition === "left" ? `right` : spreadPosition === `right` ? `left` : `center`;
       }
-      return {
+      return rxjs.of({
         width,
         height
-      };
+      });
     }
   }
   const mediaEnhancer = (next) => (options) => {
@@ -6970,36 +7065,41 @@
   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(
+        rxjs.first(),
+        rxjs.map((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 @@
         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 @@
       this.layers = [];
       return rxjs.EMPTY;
     }
-    layout({
+    onLayout({
       minPageSpread,
       blankPagePosition,
       spreadPosition
@@ -8036,10 +8141,10 @@
       var _a;
       const { width: pageWidth, height: pageHeight } = this.context.getPageSize();
       const frameElement = this.getFrameElement();
-      if (!frameElement) return { width: pageWidth, height: pageHeight };
+      if (!frameElement) return rxjs.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 @@
           pageWidth,
           spreadPosition
         });
+        return rxjs.of(dims);
       }
       const { latestContentHeightWhenLoaded, ...rest } = renderReflowable({
         pageHeight,
@@ -8064,7 +8170,7 @@
         enableTouch: this.settings.values.computedPageTurnMode !== `scrollable`
       });
       this.latestContentHeightWhenLoaded = latestContentHeightWhenLoaded;
-      return rest;
+      return rxjs.of(rest);
     }
     getFrameElement() {
       var _a;
@@ -8146,7 +8252,6 @@
     selection,
     spineItem
   }) => {
-    if (!spineItem.isReady) return void 0;
     const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
     if (!anchorNode || !focusNode) {
       return void 0;