@prose-reader/core 1.59.0 → 1.61.0

package/dist/index.umd.cjs

@@ -73,21 +73,109 @@
       reader.readAsDataURL(data);
     });
   };
+  function shallowMergeIfDefined(obj1, obj2) {
+    const result = { ...obj1 };
+    for (const key in obj2) {
+      if (Object.prototype.hasOwnProperty.call(obj2, key)) {
+        const value = obj2[key];
+        if (value !== void 0 || !(key in obj1)) {
+          result[key] = value;
+        }
+      }
+    }
+    return result;
+  }
+  class SettingsManagerOverload {
+    constructor(initialSettings, settingsManager) {
+      this.settingsManager = settingsManager;
+      const inputSettings = shallowMergeIfDefined(
+        this.getDefaultSettings(),
+        initialSettings
+      );
+      this.outputSettings = this.computeOutputSettings(inputSettings);
+      this.inputSettings = shallowMergeIfDefined(
+        this.getDefaultSettings(),
+        initialSettings
+      );
+      this.outputSettingsUpdateSubject = new rxjs.Subject();
+      this.settings$ = rxjs.combineLatest([
+        this.settingsManager.settings$,
+        this.outputSettingsUpdateSubject.pipe(operators.startWith(this.outputSettings))
+      ]).pipe(
+        operators.map(([parentSettings, settings]) => ({ ...parentSettings, ...settings })),
+        operators.shareReplay(1)
+      );
+      this.settings$.subscribe();
+    }
+    _prepareUpdate(settings) {
+      const parentInputSettings = this.getCleanedParentInputSettings(settings);
+      const parentManagerPreparedUpdate = this.settingsManager._prepareUpdate(parentInputSettings);
+      const inputSettings = shallowMergeIfDefined(this.inputSettings, settings);
+      const outputSettings = this.computeOutputSettings(inputSettings);
+      const hasChanged = this.hasSettingsChanged(outputSettings);
+      return {
+        hasChanged: hasChanged || parentManagerPreparedUpdate.hasChanged,
+        commit: () => {
+          this.inputSettings = inputSettings;
+          this.outputSettings = outputSettings;
+          if (!parentManagerPreparedUpdate.hasChanged && hasChanged) {
+            this.outputSettingsUpdateSubject.next(outputSettings);
+          }
+          const parentOutputSettings = parentManagerPreparedUpdate.commit();
+          return {
+            ...parentOutputSettings,
+            ...outputSettings
+          };
+        }
+      };
+    }
+    update(settings) {
+      const { commit } = this._prepareUpdate(settings);
+      commit();
+    }
+    get settings() {
+      return {
+        ...this.settingsManager.settings,
+        ...this.outputSettings
+      };
+    }
+    destroy() {
+      this.outputSettingsUpdateSubject.complete();
+    }
+  }
+  let SettingsManager$2 = class SettingsManager extends SettingsManagerOverload {
+    computeOutputSettings(settings) {
+      return settings;
+    }
+    hasSettingsChanged(newOutputSettings) {
+      return !isShallowEqual(this.outputSettings, newOutputSettings);
+    }
+    getCleanedParentInputSettings(settings) {
+      const { fontJustification, fontScale, fontWeight, lineHeight, ...rest } = settings;
+      return rest;
+    }
+    getDefaultSettings() {
+      return {
+        fontScale: 1,
+        fontWeight: "publisher",
+        lineHeight: "publisher",
+        fontJustification: "publisher"
+      };
+    }
+  };
   const fontsEnhancer = (next) => (options) => {
-    const {
-      fontScale = 1,
-      lineHeight = `publisher`,
-      fontWeight = `publisher`,
-      fontJustification = `publisher`
-    } = options;
+    const { fontScale, lineHeight, fontWeight, fontJustification } = options;
     const changes$ = new rxjs.Subject();
-    const settings$ = new rxjs.BehaviorSubject({
-      fontScale,
-      lineHeight,
-      fontWeight,
-      fontJustification
-    });
     const reader = next(options);
+    const settingsManager = new SettingsManager$2(
+      {
+        fontScale,
+        lineHeight,
+        fontWeight,
+        fontJustification
+      },
+      reader.settings
+    );
     const getStyle = () => `
     ${/*
           Ideally, we would like to use !important but it could break publisher specific
@@ -99,10 +187,10 @@
         */
     ``}
     body {
-      ${settings$.value.fontScale !== 1 ? `font-size: ${settings$.value.fontScale}em !important;` : ``}
-      ${settings$.value.lineHeight !== `publisher` ? `line-height: ${settings$.value.lineHeight} !important;` : ``}
-      ${settings$.value.fontWeight !== `publisher` ? `font-weight: ${settings$.value.fontWeight} !important;` : ``}
-      ${settings$.value.fontJustification !== `publisher` ? `text-align: ${settings$.value.fontJustification} !important;` : ``}
+      ${settingsManager.settings.fontScale !== 1 ? `font-size: ${settingsManager.settings.fontScale}em !important;` : ``}
+      ${settingsManager.settings.lineHeight !== `publisher` ? `line-height: ${settingsManager.settings.lineHeight} !important;` : ``}
+      ${settingsManager.settings.fontWeight !== `publisher` ? `font-weight: ${settingsManager.settings.fontWeight} !important;` : ``}
+      ${settingsManager.settings.fontJustification !== `publisher` ? `text-align: ${settingsManager.settings.fontJustification} !important;` : ``}
     }
   `;
     const applyChangeToSpineItem = (requireLayout) => {
@@ -132,42 +220,19 @@
         return false;
       })
     );
-    const newSettings$ = changes$.pipe(
-      operators.withLatestFrom(settings$),
-      rxjs.map(([changes, settings]) => ({
-        fontJustification: changes.fontJustification ?? settings.fontJustification,
-        fontWeight: changes.fontWeight ?? settings.fontWeight,
-        lineHeight: changes.lineHeight ?? settings.lineHeight,
-        fontScale: Math.max(0.01, changes.fontScale ?? settings.fontScale)
-      })),
-      operators.distinctUntilChanged(isShallowEqual),
-      operators.shareReplay(1)
-    );
-    newSettings$.subscribe(settings$);
-    settings$.pipe(shouldRequireLayout, operators.tap(applyChangeToSpineItem), rxjs.takeUntil(reader.$.destroy$)).subscribe();
-    const settingsMerge$ = rxjs.combineLatest([reader.settings.settings$, settings$]).pipe(
-      rxjs.map(([innerSettings, settings]) => ({
-        ...innerSettings,
-        ...settings
-      }))
-    );
-    const setSettings = (settings) => {
-      const { fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2, ...passthroughSettings } = settings;
-      changes$.next({ fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2 });
-      reader.settings.setSettings(passthroughSettings);
-    };
+    settingsManager.settings$.pipe(
+      shouldRequireLayout,
+      operators.tap(applyChangeToSpineItem),
+      rxjs.takeUntil(reader.$.destroy$)
+    ).subscribe();
     return {
       ...reader,
       destroy: () => {
         changes$.complete();
-        settings$.complete();
+        settingsManager.destroy();
         reader.destroy();
       },
-      settings: {
-        ...reader.settings,
-        setSettings,
-        settings$: settingsMerge$
-      }
+      settings: settingsManager
     };
   };
   const hotkeysEnhancer = (next) => (options) => {
@@ -200,7 +265,9 @@
         (spineItems) => rxjs.merge(
           ...spineItems.map(
             (item) => item.$.loaded$.pipe(
-              rxjs.switchMap((iframe) => (iframe == null ? void 0 : iframe.contentDocument) ? navigateOnKey(iframe.contentDocument) : rxjs.EMPTY)
+              rxjs.switchMap(
+                (iframe) => (iframe == null ? void 0 : iframe.contentDocument) ? navigateOnKey(iframe.contentDocument) : rxjs.EMPTY
+              )
             )
           )
         )
@@ -234,14 +301,24 @@
     );
     const createResetLock$ = (source) => rxjs.scheduled(source, rxjs.animationFrameScheduler).pipe(
       operators.tap(() => {
-        iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `hidden`);
+        iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(
+          `visibility`,
+          `hidden`
+        );
       })
     );
-    const viewportFree$ = reader.viewportNavigator.$.state$.pipe(operators.filter((data) => data === `free`));
-    const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(operators.filter((data) => data === `busy`));
+    const viewportFree$ = reader.viewportNavigator.$.state$.pipe(
+      operators.filter((data) => data === `free`)
+    );
+    const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(
+      operators.filter((data) => data === `busy`)
+    );
     const lockAfterViewportBusy$ = viewportBusy$.pipe(
       operators.tap(() => {
-        iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `visible`);
+        iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(
+          `visibility`,
+          `visible`
+        );
       })
     );
     const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(operators.take(1));
@@ -274,33 +351,70 @@
     });
   };
   const fixReflowable = (reader) => {
-    reader.hookManager.register(`item.onAfterLayout`, ({ item, blankPagePosition, minimumWidth }) => {
-      var _a;
-      const spineItem = reader.spineItemManager.get(item.id);
-      if (!((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable`)) return;
-      const { viewportDimensions } = (spineItem == null ? void 0 : spineItem.getViewPortInformation()) ?? {};
-      const { width: pageWidth } = reader.context.getPageSize();
-      const frameElement = (_a = spineItem == null ? void 0 : spineItem.spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
-      if (viewportDimensions) {
-        const spineManagerWantAFullWidthItem = pageWidth < minimumWidth;
-        const noBlankPageAsked = blankPagePosition === `none`;
-        if (noBlankPageAsked && spineManagerWantAFullWidthItem) {
-          frameElement == null ? void 0 : frameElement.style.setProperty(`left`, reader.context.isRTL() ? `75%` : `25%`);
+    reader.hookManager.register(
+      `item.onAfterLayout`,
+      ({ item, blankPagePosition, minimumWidth }) => {
+        var _a;
+        const spineItem = reader.spineItemManager.get(item.id);
+        if (!((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable`)) return;
+        const { viewportDimensions } = (spineItem == null ? void 0 : spineItem.getViewPortInformation()) ?? {};
+        const { width: pageWidth } = reader.context.getPageSize();
+        const frameElement = (_a = spineItem == null ? void 0 : spineItem.spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
+        if (viewportDimensions) {
+          const spineManagerWantAFullWidthItem = pageWidth < minimumWidth;
+          const noBlankPageAsked = blankPagePosition === `none`;
+          if (noBlankPageAsked && spineManagerWantAFullWidthItem) {
+            frameElement == null ? void 0 : frameElement.style.setProperty(
+              `left`,
+              reader.context.isRTL() ? `75%` : `25%`
+            );
+          }
         }
       }
-    });
+    );
   };
   function isDefined(arg) {
     return arg !== null && arg !== void 0;
   }
+  let SettingsManager$1 = class SettingsManager extends SettingsManagerOverload {
+    computeOutputSettings(inputSettings) {
+      return inputSettings;
+    }
+    hasSettingsChanged(newOutputSettings) {
+      return !isShallowEqual(this.outputSettings, newOutputSettings);
+    }
+    getCleanedParentInputSettings(settings) {
+      const {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        layoutAutoResize,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        pageHorizontalMargin,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        pageVerticalMargin,
+        ...rest
+      } = settings;
+      return rest;
+    }
+    getDefaultSettings() {
+      return {
+        layoutAutoResize: "container",
+        pageHorizontalMargin: 24,
+        pageVerticalMargin: 24
+      };
+    }
+  };
   const SHOULD_NOT_LAYOUT = false;
   const layoutEnhancer = (next) => (options) => {
-    const { pageHorizontalMargin = 24, pageVerticalMargin = 24 } = options;
+    const { pageHorizontalMargin, pageVerticalMargin, layoutAutoResize } = options;
     const reader = next(options);
-    const settingsSubject$ = new rxjs.BehaviorSubject({
-      pageHorizontalMargin,
-      pageVerticalMargin
-    });
+    const settingsManager = new SettingsManager$1(
+      {
+        pageHorizontalMargin,
+        pageVerticalMargin,
+        layoutAutoResize
+      },
+      reader.settings
+    );
     reader.hookManager.register(`onViewportOffsetAdjust`, () => {
       let hasRedrawn = false;
       reader.spine.manipulateSpineItems(({ frame }) => {
@@ -311,24 +425,26 @@
         return SHOULD_NOT_LAYOUT;
       });
     });
-    reader.hookManager.register(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
-      var _a, _b;
-      const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsSubject$.value;
-      const pageSize = reader.context.getPageSize();
-      if (item.renditionLayout === `reflowable` && frame.getIsReady() && !isImageType() && !frame.getViewportDimensions()) {
-        let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
-        const columnHeight = pageSize.height - pageVerticalMargin2 * 2;
-        let width = pageSize.width - pageHorizontalMargin2 * 2;
-        let columnGap = pageHorizontalMargin2 * 2;
-        if (frame.isUsingVerticalWriting()) {
-          width = minimumWidth - pageHorizontalMargin2 * 2;
-          columnWidth = columnHeight;
-          columnGap = pageVerticalMargin2 * 2;
-        }
-        (_a = frame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-layout-enhancer-css`);
-        (_b = frame.getManipulableFrame()) == null ? void 0 : _b.addStyle(
-          `prose-layout-enhancer-css`,
-          `
+    reader.hookManager.register(
+      `item.onLayoutBeforeMeasurement`,
+      ({ frame, minimumWidth, item, isImageType }) => {
+        var _a, _b;
+        const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsManager.settings;
+        const pageSize = reader.context.getPageSize();
+        if (item.renditionLayout === `reflowable` && frame.getIsReady() && !isImageType() && !frame.getViewportDimensions()) {
+          let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
+          const columnHeight = pageSize.height - pageVerticalMargin2 * 2;
+          let width = pageSize.width - pageHorizontalMargin2 * 2;
+          let columnGap = pageHorizontalMargin2 * 2;
+          if (frame.isUsingVerticalWriting()) {
+            width = minimumWidth - pageHorizontalMargin2 * 2;
+            columnWidth = columnHeight;
+            columnGap = pageVerticalMargin2 * 2;
+          }
+          (_a = frame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-layout-enhancer-css`);
+          (_b = frame.getManipulableFrame()) == null ? void 0 : _b.addStyle(
+            `prose-layout-enhancer-css`,
+            `
           body {
             width: ${width}px !important;
             margin: ${pageVerticalMargin2}px ${pageHorizontalMargin2}px !important;
@@ -347,9 +463,10 @@
             max-width: ${columnWidth}px;
           }
         `
-        );
+          );
+        }
       }
-    });
+    );
     fixReflowable(reader);
     let observer;
     if (options.layoutAutoResize === `container`) {
@@ -367,7 +484,7 @@
     }
     const movingSafePan$ = createMovingSafePan$(reader);
     movingSafePan$.subscribe();
-    settingsSubject$.pipe(
+    settingsManager.settings$.pipe(
       mapKeysTo([`pageHorizontalMargin`, `pageVerticalMargin`]),
       operators.distinctUntilChanged(isShallowEqual),
       operators.skip(1),
@@ -376,32 +493,14 @@
       }),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
-    const settings$ = rxjs.combineLatest([reader.settings.settings$, settingsSubject$.asObservable()]).pipe(
-      operators.map(([innerSettings, settings]) => ({
-        ...innerSettings,
-        ...settings
-      }))
-    );
-    const setSettings = ({ pageVerticalMargin: pageVerticalMargin2, pageHorizontalMargin: pageHorizontalMargin2, ...rest }) => {
-      if (pageHorizontalMargin2 !== void 0 || pageVerticalMargin2 !== void 0) {
-        settingsSubject$.next({
-          pageHorizontalMargin: pageHorizontalMargin2 ?? settingsSubject$.value.pageHorizontalMargin,
-          pageVerticalMargin: pageVerticalMargin2 ?? settingsSubject$.value.pageVerticalMargin
-        });
-      }
-      reader.settings.setSettings(rest);
-    };
     return {
       ...reader,
       destroy: () => {
+        settingsManager.destroy();
         reader.destroy();
         observer == null ? void 0 : observer.disconnect();
       },
-      settings: {
-        ...reader.settings,
-        setSettings,
-        settings$
-      }
+      settings: settingsManager
     };
   };
   const ROOT_NAMESPACE = `@prose-reader/core`;
@@ -418,7 +517,10 @@
     return () => {
       tick++;
       const t1 = performance.now();
-      Report.logMetric({ name: `${name} - tick ${tick}`, duration: t1 - t0 }, targetDuration);
+      Report.logMetric(
+        { name: `${name} - tick ${tick}`, duration: t1 - t0 },
+        targetDuration
+      );
     };
   };
   const createReport = (namespace) => ({
@@ -434,7 +536,8 @@
     warn: (...data) => {
       var _a;
       if ((_a = getWindow()) == null ? void 0 : _a.__PROSE_READER_DEBUG) {
-        if (namespace) console.warn(wrap(ROOT_NAMESPACE), wrap(namespace), ...data);
+        if (namespace)
+          console.warn(wrap(ROOT_NAMESPACE), wrap(namespace), ...data);
         else console.warn(wrap(ROOT_NAMESPACE), ...data);
       }
     },
@@ -499,7 +602,9 @@
       if (!element.href) return false;
       const hrefUrl = new URL(element.href);
       const hrefWithoutAnchor = `${hrefUrl.origin}${hrefUrl.pathname}`;
-      const hasExistingSpineItem = (_a = reader.context.manifest) == null ? void 0 : _a.spineItems.some((item) => item.href === hrefWithoutAnchor);
+      const hasExistingSpineItem = (_a = reader.context.manifest) == null ? void 0 : _a.spineItems.some(
+        (item) => item.href === hrefWithoutAnchor
+      );
       if (hasExistingSpineItem) {
         reader.viewportNavigator.goToUrl(hrefUrl);
         return true;
@@ -514,7 +619,11 @@
               Report.warn(`prevented click on`, element, e);
               e.preventDefault();
               const isNavigable = handleNavigationForClick(element);
-              subject.next({ event: `linkClicked`, data: element, isNavigable });
+              subject.next({
+                event: `linkClicked`,
+                data: element,
+                isNavigable
+              });
             }
           })
         );
@@ -555,14 +664,16 @@
       goToNextSpineItem,
       goToPreviousSpineItem,
       goToLeftSpineItem: () => {
-        if (reader.settings.settings.computedPageTurnDirection === "vertical") return;
+        if (reader.settings.settings.computedPageTurnDirection === "vertical")
+          return;
         if (reader.context.isRTL()) {
           return goToNextSpineItem();
         }
         return goToPreviousSpineItem();
       },
       goToRightSpineItem: () => {
-        if (reader.settings.settings.computedPageTurnDirection === "vertical") return;
+        if (reader.settings.settings.computedPageTurnDirection === "vertical")
+          return;
         if (reader.context.isRTL()) {
           return goToPreviousSpineItem();
         }
@@ -600,17 +711,24 @@
     };
   };
   const buildChaptersInfo = (href, tocItem, manifest) => {
-    const spineItemIndex = manifest.spineItems.findIndex((item) => item.href === href);
+    const spineItemIndex = manifest.spineItems.findIndex(
+      (item) => item.href === href
+    );
     return tocItem.reduce((acc, tocItem2) => {
       const indexOfHash = tocItem2.href.indexOf(`#`);
       const tocItemPathWithoutAnchor = indexOfHash > 0 ? tocItem2.href.substr(0, indexOfHash) : tocItem2.href;
-      const tocItemHrefWithoutFilename = tocItemPathWithoutAnchor.substring(0, tocItemPathWithoutAnchor.lastIndexOf("/"));
+      const tocItemHrefWithoutFilename = tocItemPathWithoutAnchor.substring(
+        0,
+        tocItemPathWithoutAnchor.lastIndexOf("/")
+      );
       const hrefWithoutFilename = href.substring(0, href.lastIndexOf("/"));
       const hrefIsChapterHref = href.endsWith(tocItemPathWithoutAnchor);
       const hrefIsWithinChapter = hrefWithoutFilename !== "" && hrefWithoutFilename.endsWith(tocItemHrefWithoutFilename);
       const isPossibleTocItemCandidate = hrefIsChapterHref || hrefIsWithinChapter;
       if (isPossibleTocItemCandidate) {
-        const spineItemIndexOfPossibleCandidate = manifest.spineItems.findIndex((item) => item.href === tocItem2.href);
+        const spineItemIndexOfPossibleCandidate = manifest.spineItems.findIndex(
+          (item) => item.href === tocItem2.href
+        );
         const spineItemIsBeforeThisTocItem = spineItemIndex < spineItemIndexOfPossibleCandidate;
         if (spineItemIsBeforeThisTocItem) return acc;
         const info = {
@@ -655,7 +773,9 @@
     );
   };
   const NAMESPACE$6 = `pagination`;
-  const createPagination = ({ context }) => {
+  const createPagination = ({
+    context
+  }) => {
     const paginationSubject$ = new rxjs.BehaviorSubject({
       beginPageIndexInSpineItem: void 0,
       beginNumberOfPagesInSpineItem: 0,
@@ -708,7 +828,9 @@
     const getPaginationInfo = () => paginationSubject$.value;
     const paginationInfo$ = paginationSubject$.pipe(
       rxjs.distinctUntilChanged(isShallowEqual),
-      rxjs.filter(({ beginPageIndexInSpineItem }) => beginPageIndexInSpineItem !== void 0)
+      rxjs.filter(
+        ({ beginPageIndexInSpineItem }) => beginPageIndexInSpineItem !== void 0
+      )
     );
     const destroy = () => {
       paginationSubject$.complete();
@@ -732,10 +854,14 @@
   const getClosestValidOffsetFromApproximateOffsetInPages = (offset, pageWidth, itemWidth) => {
     const numberOfPages = calculateNumberOfPagesForItem(itemWidth, pageWidth);
     const offsetValues = [...Array(numberOfPages)].map((_, i) => i * pageWidth);
-    if (offset >= numberOfPages * pageWidth) return offsetValues[offsetValues.length - 1] || 0;
+    if (offset >= numberOfPages * pageWidth)
+      return offsetValues[offsetValues.length - 1] || 0;
     return offsetValues.find((offsetRange) => offset < offsetRange + pageWidth) || 0;
   };
-  const getSpineItemNumberOfPages = ({ spineItem, reader }) => {
+  const getSpineItemNumberOfPages = ({
+    spineItem,
+    reader
+  }) => {
     const writingMode = spineItem.spineItemFrame.getWritingMode();
     const { width, height } = spineItem.getElementDimensions();
     const settings = reader.settings.settings;
@@ -743,9 +869,15 @@
       return 1;
     }
     if (writingMode === `vertical-rl`) {
-      return calculateNumberOfPagesForItem(height, reader.context.getPageSize().height);
+      return calculateNumberOfPagesForItem(
+        height,
+        reader.context.getPageSize().height
+      );
     }
-    return calculateNumberOfPagesForItem(width, reader.context.getPageSize().width);
+    return calculateNumberOfPagesForItem(
+      width,
+      reader.context.getPageSize().width
+    );
   };
   const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemManager.getAll().map((item) => {
     return getSpineItemNumberOfPages({ spineItem: item, reader });
@@ -761,7 +893,10 @@
           /**
            * This may be not accurate for reflowable due to dynamic load / unload.
            */
-          numberOfTotalPages: numberOfPagesPerItems.reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, 0)
+          numberOfTotalPages: numberOfPagesPerItems.reduce(
+            (acc, numberOfPagesForItem) => acc + numberOfPagesForItem,
+            0
+          )
         };
       }),
       rxjs.distinctUntilChanged(isShallowEqual),
@@ -818,7 +953,10 @@
     const totalPages$ = trackTotalPages(reader);
     const currentValue = new rxjs.BehaviorSubject({
       ...reader.pagination.getPaginationInfo(),
-      ...mapPaginationInfoToExtendedInfo(reader)(reader.pagination.getPaginationInfo(), getChaptersInfo(reader)),
+      ...mapPaginationInfoToExtendedInfo(reader)(
+        reader.pagination.getPaginationInfo(),
+        getChaptersInfo(reader)
+      ),
       beginAbsolutePageIndex: 0,
       endAbsolutePageIndex: 0,
       numberOfTotalPages: 0
@@ -838,8 +976,14 @@
       rxjs.map(([pageInfo, totalPageInfo]) => ({
         ...pageInfo,
         ...totalPageInfo,
-        beginAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.beginSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.beginPageIndexInSpineItem ?? 0),
-        endAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.endSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.endPageIndexInSpineItem ?? 0)
+        beginAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.beginSpineItemIndex).reduce(
+          (acc, numberOfPagesForItem) => acc + numberOfPagesForItem,
+          pageInfo.beginPageIndexInSpineItem ?? 0
+        ),
+        endAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.endSpineItemIndex).reduce(
+          (acc, numberOfPagesForItem) => acc + numberOfPagesForItem,
+          pageInfo.endPageIndexInSpineItem ?? 0
+        )
       })),
       rxjs.tap((value) => {
         currentValue.next(value);
@@ -881,9 +1025,13 @@
   ];
   const themeEnhancer = (next) => (options) => {
     const reader = next(options);
-    const currentThemeSubject$ = new rxjs.BehaviorSubject(options.theme ?? `bright`);
+    const currentThemeSubject$ = new rxjs.BehaviorSubject(
+      options.theme ?? `bright`
+    );
     const getStyle = () => {
-      const foundTheme = defaultThemes.find((entry) => entry.name === currentThemeSubject$.value);
+      const foundTheme = defaultThemes.find(
+        (entry) => entry.name === currentThemeSubject$.value
+      );
       return `
       body {
         ${foundTheme !== void 0 ? `background-color: ${foundTheme.backgroundColor} !important;` : ``}
@@ -900,21 +1048,30 @@
         ` : ``}
     `;
     };
-    const applyChangeToSpineItemElement = ({ container }) => {
-      const foundTheme = defaultThemes.find((entry) => entry.name === currentThemeSubject$.value);
+    const applyChangeToSpineItemElement = ({
+      container
+    }) => {
+      const foundTheme = defaultThemes.find(
+        (entry) => entry.name === currentThemeSubject$.value
+      );
       if (foundTheme) {
-        container.style.setProperty(`background-color`, foundTheme.backgroundColor);
+        container.style.setProperty(
+          `background-color`,
+          foundTheme.backgroundColor
+        );
       }
       return () => {
       };
     };
     const applyChangeToSpineItem = () => {
-      reader.spine.manipulateSpineItems(({ removeStyle, addStyle, container }) => {
-        removeStyle(`prose-reader-theme`);
-        addStyle(`prose-reader-theme`, getStyle());
-        applyChangeToSpineItemElement({ container });
-        return false;
-      });
+      reader.spine.manipulateSpineItems(
+        ({ removeStyle, addStyle, container }) => {
+          removeStyle(`prose-reader-theme`);
+          addStyle(`prose-reader-theme`, getStyle());
+          applyChangeToSpineItemElement({ container });
+          return false;
+        }
+      );
     };
     reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
       const item = reader.spineItemManager.get(itemId);
@@ -925,7 +1082,11 @@
       });
     });
     reader.spine.$.spineItems$.pipe(
-      operators.tap((items) => items.map(({ element }) => applyChangeToSpineItemElement({ container: element }))),
+      operators.tap(
+        (items) => items.map(
+          ({ element }) => applyChangeToSpineItemElement({ container: element })
+        )
+      ),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
     currentThemeSubject$.pipe(
@@ -992,7 +1153,9 @@
     };
     const scale = (userScale) => {
       const imgElement = imageMagnifierContainer == null ? void 0 : imageMagnifierContainer.querySelector(`img`);
-      const roundedScale = Math.ceil((userScale < 1 ? baseScale - (1 - userScale) : baseScale + (userScale - 1)) * 100) / 100;
+      const roundedScale = Math.ceil(
+        (userScale < 1 ? baseScale - (1 - userScale) : baseScale + (userScale - 1)) * 100
+      ) / 100;
       const newScale = Math.max(roundedScale, 1);
       if (roundedScale < 1) {
         imgLastPosition = { x: 0, y: 0 };
@@ -1088,7 +1251,9 @@
       const spineElement = reader.spine.getElement();
       const viewportElement = reader.viewportNavigator.getElement();
       if (!spineElement || !viewportElement) return;
-      const roundedScale = Math.ceil((userScale < 1 ? baseScale - (1 - userScale) : baseScale + (userScale - 1)) * 100) / 100;
+      const roundedScale = Math.ceil(
+        (userScale < 1 ? baseScale - (1 - userScale) : baseScale + (userScale - 1)) * 100
+      ) / 100;
       const newScale = Math.max(roundedScale, 1);
       const currentScale = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
       const currentScrollTop = viewportElement.scrollTop;
@@ -1197,7 +1362,9 @@
         isUsingScrollableZoom: isUsingScrollableViewport,
         setCurrentScaleAsBase,
         $: {
-          isZooming$: currentZoomerSubject$.pipe(rxjs.switchMap((zoomer) => (zoomer == null ? void 0 : zoomer.isZooming$) || rxjs.of(false)))
+          isZooming$: currentZoomerSubject$.pipe(
+            rxjs.switchMap((zoomer) => (zoomer == null ? void 0 : zoomer.isZooming$) || rxjs.of(false))
+          )
         }
       }
     };
@@ -1344,15 +1511,21 @@
     return event[__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY];
   };
   const attachOriginalFrameEventToDocumentEvent = (event, frameEvent) => {
-    Object.defineProperty(event, __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY, { value: frameEvent, enumerable: true });
+    Object.defineProperty(event, __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY, {
+      value: frameEvent,
+      enumerable: true
+    });
   };
-  const createFrame$ = Report.measurePerformance(`SpineItemFrame createFrame`, Infinity, () => {
-    const frame = document.createElement(`iframe`);
-    frame.frameBorder = `no`;
-    frame.tabIndex = 0;
-    frame.setAttribute(`sandbox`, `allow-same-origin allow-scripts`);
-    frame.scrolling = `no`;
-    frame.style.cssText = `
+  const createFrame$ = Report.measurePerformance(
+    `SpineItemFrame createFrame`,
+    Infinity,
+    () => {
+      const frame = document.createElement(`iframe`);
+      frame.frameBorder = `no`;
+      frame.tabIndex = 0;
+      frame.setAttribute(`sandbox`, `allow-same-origin allow-scripts`);
+      frame.scrolling = `no`;
+      frame.style.cssText = `
     visibility: hidden;
     overflow: hidden;
     background-color: transparent;
@@ -1361,8 +1534,9 @@
     transition: opacity 300ms;
     opacity: 0;
   `;
-    return rxjs.of(frame);
-  });
+      return rxjs.of(frame);
+    }
+  );
   const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
     const image = new Image();
     image.src = data;
@@ -1374,7 +1548,9 @@
   const createHtmlPageFromResource = async (resourceResponse, item) => {
     if (typeof resourceResponse === `string`) return resourceResponse;
     const contentType = shared.parseContentType(resourceResponse.headers.get(`Content-Type`) || ``) || shared.detectMimeTypeFromName(item.href);
-    if ([`image/jpg`, `image/jpeg`, `image/png`, `image/webp`].some((mime) => mime === contentType)) {
+    if ([`image/jpg`, `image/jpeg`, `image/png`, `image/webp`].some(
+      (mime) => mime === contentType
+    )) {
       const data = await getBase64FromBlob(await resourceResponse.blob());
       const { height, width } = await getIntrinsicDimensionsFromBase64Img(data);
       return `
@@ -1417,7 +1593,6 @@
   const createLoader = ({
     item,
     parent,
-    fetchResource,
     context,
     viewportState$,
     settings,
@@ -1462,9 +1637,17 @@
           operators.mergeMap((frame) => {
             parent.appendChild(frame);
             frameElementSubject$.next(frame);
+            const { fetchResource } = settings.settings;
             if (!fetchResource && item.href.startsWith(window.location.origin) && // we have an encoding and it's a valid html
-            (item.mediaType && [`application/xhtml+xml`, `application/xml`, `text/html`, `text/xml`].includes(item.mediaType) || // no encoding ? then try to detect html
-            !item.mediaType && ITEM_EXTENSION_VALID_FOR_FRAME_SRC.some((extension) => item.href.endsWith(extension)))) {
+            (item.mediaType && [
+              `application/xhtml+xml`,
+              `application/xml`,
+              `text/html`,
+              `text/xml`
+            ].includes(item.mediaType) || // no encoding ? then try to detect html
+            !item.mediaType && ITEM_EXTENSION_VALID_FOR_FRAME_SRC.some(
+              (extension) => item.href.endsWith(extension)
+            ))) {
               frame == null ? void 0 : frame.setAttribute(`src`, item.href);
               return rxjs.of(frame);
             } else {
@@ -1478,7 +1661,9 @@
                 }),
                 operators.map(() => frame),
                 operators.catchError((e) => {
-                  Report.error(`Error while trying to fetch or load resource for item ${item.id}`);
+                  Report.error(
+                    `Error while trying to fetch or load resource for item ${item.id}`
+                  );
                   console.error(e);
                   return rxjs.of(frame);
                 })
@@ -1506,8 +1691,12 @@
                 const hookResults = hookManager.execute(`item.onLoad`, item.id, {
                   itemId: item.id,
                   frame
-                }).filter((result) => result instanceof rxjs.Observable);
-                return rxjs.combineLatest([rxjs.of(null), ...hookResults]).pipe(operators.map(() => frame));
+                }).filter(
+                  (result) => result instanceof rxjs.Observable
+                );
+                return rxjs.combineLatest([rxjs.of(null), ...hookResults]).pipe(
+                  operators.map(() => frame)
+                );
               })
             );
           }),
@@ -1520,10 +1709,14 @@
       operators.takeUntil(destroySubject$)
     );
     const ready$ = load$.pipe(
-      operators.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(operators.takeUntil(unloadSubject$));
-      }),
+      operators.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(
+            operators.takeUntil(unloadSubject$)
+          );
+        }
+      ),
       operators.share(),
       makeItHot,
       operators.takeUntil(destroySubject$)
@@ -1564,7 +1757,6 @@
   const createFrameItem = ({
     item,
     parent,
-    fetchResource,
     context,
     viewportState$,
     settings,
@@ -1572,12 +1764,27 @@
   }) => {
     const destroySubject$ = new rxjs.Subject();
     const {
-      $: { unload$, loaded$, isLoaded$, isReady$, unloaded$, frameElement$, ready$ },
+      $: {
+        unload$,
+        loaded$,
+        isLoaded$,
+        isReady$,
+        unloaded$,
+        frameElement$,
+        ready$
+      },
       load,
       unload,
       destroy: loaderDestroy,
       getComputedStyleAfterLoad
-    } = createLoader({ context, hookManager, item, parent, fetchResource, viewportState$, settings });
+    } = createLoader({
+      context,
+      hookManager,
+      item,
+      parent,
+      viewportState$,
+      settings
+    });
     let isLoadedSync = false;
     let isReadySync = false;
     isLoaded$.subscribe({
@@ -1605,7 +1812,10 @@
           const viewPortMetaInfos = viewPortMeta.getAttribute(`content`);
           if (viewPortMetaInfos) {
             const width = getAttributeValueFromString(viewPortMetaInfos, `width`);
-            const height = getAttributeValueFromString(viewPortMetaInfos, `height`);
+            const height = getAttributeValueFromString(
+              viewPortMetaInfos,
+              `height`
+            );
             if (width > 0 && height > 0) {
               return {
                 width,
@@ -1680,7 +1890,8 @@
           return `rtl`;
         }
         const direction = (_a = getComputedStyleAfterLoad()) == null ? void 0 : _a.direction;
-        if ([`ltr`, `rtl`].includes(direction || ``)) return direction;
+        if ([`ltr`, `rtl`].includes(direction || ``))
+          return direction;
         return void 0;
       },
       isUsingVerticalWriting,
@@ -1752,7 +1963,10 @@
       });
       (_a = frameToTrack.contentDocument) == null ? void 0 : _a.addEventListener(`selectionchange`, () => {
         var _a2;
-        subject.next({ event: `selectionchange`, data: ((_a2 = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a2.getSelection()) || null });
+        subject.next({
+          event: `selectionchange`,
+          data: ((_a2 = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a2.getSelection()) || null
+        });
       });
       (_b = frameToTrack.contentWindow) == null ? void 0 : _b.addEventListener(`selectstart`, () => {
         isSelecting = true;
@@ -1767,7 +1981,8 @@
       getSelection: () => {
         var _a;
         const selection = (_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.getSelection();
-        if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`) return void 0;
+        if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`)
+          return void 0;
         return selection;
       },
       $: subject.asObservable()
@@ -1782,7 +1997,11 @@
     hookManager
   }) => {
     const destroySubject$ = new rxjs.Subject();
-    const containerElement = createContainerElement$1(parentElement, item, hookManager);
+    const containerElement = createContainerElement$1(
+      parentElement,
+      item,
+      hookManager
+    );
     const overlayElement = createOverlayElement(parentElement, item);
     const fingerTracker = createFingerTracker();
     const selectionTracker = createSelectionTracker();
@@ -1821,7 +2040,11 @@
       (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-reader-css`);
       (_b = spineItemFrame.getManipulableFrame()) == null ? void 0 : _b.addStyle(`prose-reader-css`, cssText);
     };
-    const adjustPositionOfElement = ({ right, left, top }) => {
+    const adjustPositionOfElement = ({
+      right,
+      left,
+      top
+    }) => {
       if (right !== void 0) {
         containerElement.style.right = `${right}px`;
       } else {
@@ -1845,7 +2068,10 @@
       const frameElement = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
       if (containerElement && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow) && viewportDimensions) {
         const computedWidthScale = pageWidth / viewportDimensions.width;
-        const computedScale = Math.min(computedWidthScale, pageHeight / viewportDimensions.height);
+        const computedScale = Math.min(
+          computedWidthScale,
+          pageHeight / viewportDimensions.height
+        );
         return { computedScale, computedWidthScale, viewportDimensions };
       }
     };
@@ -1898,7 +2124,11 @@
     }) => {
       containerElement.style.width = `${width}px`;
       containerElement.style.height = `${height}px`;
-      hookManager.execute(`item.onAfterLayout`, void 0, { blankPagePosition, item, minimumWidth });
+      hookManager.execute(`item.onAfterLayout`, void 0, {
+        blankPagePosition,
+        item,
+        minimumWidth
+      });
       setLayoutDirty();
     };
     const translateFramePositionIntoPage = (position) => {
@@ -2112,8 +2342,14 @@
           }
           const transformTranslateX = spreadPosition !== `none` ? `0` : `-50%`;
           const transformOriginX = spreadPosition === `right` && blankPagePosition !== `before` ? `left` : spreadPosition === `left` || blankPagePosition === `before` && context.isRTL() ? `right` : `center`;
-          frameElement == null ? void 0 : frameElement.style.setProperty(`transform`, `translate(${transformTranslateX}, -50%) scale(${computedScale})`);
-          frameElement == null ? void 0 : frameElement.style.setProperty(`transform-origin`, `${transformOriginX} center`);
+          frameElement == null ? void 0 : frameElement.style.setProperty(
+            `transform`,
+            `translate(${transformTranslateX}, -50%) scale(${computedScale})`
+          );
+          frameElement == null ? void 0 : frameElement.style.setProperty(
+            `transform-origin`,
+            `${transformOriginX} center`
+          );
           commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
         } else {
           commonSpineItem.injectStyle(cssLink);
@@ -2133,11 +2369,21 @@
           }
         }
         commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-        commonSpineItem.layout({ width: minimumWidth, height: contentHeight, blankPagePosition, minimumWidth });
+        commonSpineItem.layout({
+          width: minimumWidth,
+          height: contentHeight,
+          blankPagePosition,
+          minimumWidth
+        });
         return { width: minimumWidth, height: contentHeight };
       } else {
         commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-        commonSpineItem.layout({ width: minimumWidth, height: pageHeight, blankPagePosition, minimumWidth });
+        commonSpineItem.layout({
+          width: minimumWidth,
+          height: pageHeight,
+          blankPagePosition,
+          minimumWidth
+        });
       }
       return { width: minimumWidth, height: pageHeight };
     };
@@ -2266,19 +2512,27 @@
             `left`,
             blankPagePosition === `before` ? context.isRTL() ? `25%` : `75%` : blankPagePosition === `after` ? context.isRTL() ? `75%` : `25%` : `50%`
           );
-          frameElement == null ? void 0 : frameElement.style.setProperty(`transform`, `translate(-50%, -50%) scale(${computedScale})`);
+          frameElement == null ? void 0 : frameElement.style.setProperty(
+            `transform`,
+            `translate(-50%, -50%) scale(${computedScale})`
+          );
           frameElement == null ? void 0 : frameElement.style.setProperty(`transform-origin`, `center center`);
         } else {
           const frameStyle = commonSpineItem.isImageType() ? buildStyleForReflowableImageOnly({
             isScrollable: ((_g = context.manifest) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
             enableTouch: settings.settings.computedPageTurnMode !== `scrollable`
           }) : buildStyleWithMultiColumn(
-            commonSpineItem.getDimensionsForReflowableContent(spineItemFrame.isUsingVerticalWriting(), minimumWidth)
+            commonSpineItem.getDimensionsForReflowableContent(
+              spineItemFrame.isUsingVerticalWriting(),
+              minimumWidth
+            )
           );
           commonSpineItem.injectStyle(frameStyle);
           commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
           if (spineItemFrame.isUsingVerticalWriting()) {
-            const pages = Math.ceil(frameElement.contentDocument.documentElement.scrollHeight / pageHeight);
+            const pages = Math.ceil(
+              frameElement.contentDocument.documentElement.scrollHeight / pageHeight
+            );
             contentHeight = pages * pageHeight;
             spineItemFrame.staticLayout({
               width: minimumWidth,
@@ -2292,7 +2546,9 @@
               height: contentHeight
             });
           } else {
-            const pages = Math.ceil(frameElement.contentDocument.documentElement.scrollWidth / pageWidth);
+            const pages = Math.ceil(
+              frameElement.contentDocument.documentElement.scrollWidth / pageWidth
+            );
             if (isGloballyPrePaginated) {
               contentWidth = pageWidth;
             } else {
@@ -2313,13 +2569,23 @@
         } else {
           frameElement == null ? void 0 : frameElement.style.setProperty(`margin-left`, `0px`);
         }
-        commonSpineItem.layout({ width: contentWidth, height: contentHeight, blankPagePosition, minimumWidth });
+        commonSpineItem.layout({
+          width: contentWidth,
+          height: contentHeight,
+          blankPagePosition,
+          minimumWidth
+        });
         return { width: contentWidth, height: contentHeight };
       } else {
         commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
       }
       const height = latestContentHeightWhenLoaded || pageHeight;
-      commonSpineItem.layout({ width: minimumWidth, height, blankPagePosition, minimumWidth });
+      commonSpineItem.layout({
+        width: minimumWidth,
+        height,
+        blankPagePosition,
+        minimumWidth
+      });
       return { width: minimumWidth, height };
     };
     return {
@@ -2639,7 +2905,10 @@
       while (str.length) {
         ({ parsed, offset, newDoc } = this.parse(str));
         if (!parsed || offset === null) throw new Error(`Parsing failed`);
-        if (sawComma && newDoc) throw new Error(`CFI is a range that spans multiple documents. This is not allowed`);
+        if (sawComma && newDoc)
+          throw new Error(
+            `CFI is a range that spans multiple documents. This is not allowed`
+          );
         subParts.push(parsed);
         if (newDoc || str.length - offset <= 0) {
           if (sawComma === 2) {
@@ -2707,7 +2976,8 @@
       while (node.parentNode) {
         o = calcSiblingCount(node.parentNode.childNodes, node, offset);
         if (!cfi && o.offset) cfi = `:` + o.offset;
-        cfi = `/` + o.count + (node.id ? `[` + cfiEscape(node.id) + `]` : ``) + cfi;
+        cfi = // @ts-ignore
+        `/` + o.count + (node.id ? `[` + cfiEscape(node.id) + `]` : ``) + cfi;
         node = node.parentNode;
       }
       return cfi;
@@ -2810,7 +3080,8 @@
       return this.decodeEntities(dom, str).length;
     }
     getFrom() {
-      if (!this.isRange) throw new Error(`Trying to get beginning of non-range CFI`);
+      if (!this.isRange)
+        throw new Error(`Trying to get beginning of non-range CFI`);
       if (!this.from) {
         return this.deepClone(this.parts);
       }
@@ -2995,10 +3266,13 @@
           }
           if (cur === `:` || cur === `~` || cur === `@`) {
             if (this.opts.stricter) {
-              if (cur === `:` && (typeof o.temporal !== `undefined` || typeof o.spatial !== `undefined`)) {
+              if (cur === `:` && // @ts-ignore
+              (typeof o.temporal !== `undefined` || // @ts-ignore
+              typeof o.spatial !== `undefined`)) {
                 break;
               }
-              if ((cur === `~` || cur === `@`) && typeof o.offset !== `undefined`) {
+              if ((cur === `~` || cur === `@`) && // @ts-ignore
+              typeof o.offset !== `undefined`) {
                 break;
               }
             }
@@ -3061,7 +3335,8 @@
         }
         escape = false;
       }
-      if (!o.nodeIndex && o.nodeIndex !== 0) throw new Error(`Missing child node index in CFI`);
+      if (!o.nodeIndex && o.nodeIndex !== 0)
+        throw new Error(`Missing child node index in CFI`);
       return { parsed: o, offset: i, newDoc: state === `!` };
     }
     // The CFI counts child nodes differently from the DOM
@@ -3099,7 +3374,11 @@
                 if (!lastChild) {
                   return { node: parentNode, offset: 0 };
                 }
-                return { node: lastChild, offset: this.trueLength(dom, lastChild.textContent) };
+                return {
+                  node: lastChild,
+                  // @ts-ignore
+                  offset: this.trueLength(dom, lastChild.textContent)
+                };
               }
             }
             lastChild = child;
@@ -3186,7 +3465,8 @@
         newOffset -= nodeLengths[i];
         if (newOffset < 0) return { node, offset };
         const nodeOffsets = [];
-        if (!curNode.nextSibling || i + 1 >= nodeOffsets.length) return { node, offset };
+        if (!curNode.nextSibling || i + 1 >= nodeOffsets.length)
+          return { node, offset };
         i++;
         curNode = curNode.nextSibling;
       }
@@ -3215,7 +3495,12 @@
       let subpart;
       for (i = subparts.length - 1; i >= 0; i--) {
         subpart = subparts[i];
-        if (!opts.ignoreIDs && subpart.nodeID && (node = dom.getElementById(subpart.nodeID))) {
+        if (
+          // @ts-ignore
+          !opts.ignoreIDs && // @ts-ignore
+          subpart.nodeID && // @ts-ignore
+          (node = dom.getElementById(subpart.nodeID))
+        ) {
           startFrom = i + 1;
           break;
         }
@@ -3227,9 +3512,22 @@
       for (i = startFrom; i < subparts.length; i++) {
         subpart = subparts[i];
         if (subpart) {
-          o = this.getChildNodeByCFIIndex(dom, o.node, subpart.nodeIndex, subpart.offset);
+          o = this.getChildNodeByCFIIndex(
+            dom,
+            // @ts-ignore
+            o.node,
+            subpart.nodeIndex,
+            subpart.offset
+          );
           if (subpart.textLocationAssertion) {
-            o = this.correctOffset(dom, o.node, subpart.offset, subpart.textLocationAssertion);
+            o = this.correctOffset(
+              dom,
+              // @ts-ignore
+              o.node,
+              subpart.offset,
+              // @ts-ignore
+              subpart.textLocationAssertion
+            );
           }
         }
       }
@@ -3271,12 +3569,14 @@
       }
       if (tagName === `object`) {
         const data = node.getAttribute(`data`);
-        if (!data) throw new Error(tagName + ` element is missing 'data' attribute`);
+        if (!data)
+          throw new Error(tagName + ` element is missing 'data' attribute`);
         return data;
       }
       if (tagName === `image` || tagName === `use`) {
         const href = node.getAttribute(`xlink:href`);
-        if (!href) throw new Error(tagName + ` element is missing 'xlink:href' attribute`);
+        if (!href)
+          throw new Error(tagName + ` element is missing 'xlink:href' attribute`);
         return href;
       }
       throw new Error(`No URI found`);
@@ -3448,17 +3748,26 @@
                   spineItemsFromPosition.beginPosition,
                   beginSpineItem
                 );
-                const beginPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(beginPosition, beginSpineItem);
+                const beginPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(
+                  beginPosition,
+                  beginSpineItem
+                );
                 const endPosition = spineLocator.getSpineItemPositionFromSpinePosition(
                   spineItemsFromPosition.endPosition,
                   endSpineItem
                 );
-                const endPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(endPosition, endSpineItem);
+                const endPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(
+                  endPosition,
+                  endSpineItem
+                );
                 pagination.updateBeginAndEnd(
                   {
                     spineItem: beginSpineItem,
                     spineItemIndex: spineItemManager.getSpineItemIndex(beginSpineItem) ?? 0,
-                    pageIndex: spineItemLocator.getSpineItemPageIndexFromPosition(beginPosition, beginSpineItem),
+                    pageIndex: spineItemLocator.getSpineItemPageIndexFromPosition(
+                      beginPosition,
+                      beginSpineItem
+                    ),
                     cfi: shouldUpdateBeginCfi ? cfiLocator.getCfi(beginPageIndex, beginSpineItem) : beginLastCfi,
                     options: {
                       isAtEndOfChapter: false
@@ -3467,7 +3776,10 @@
                   {
                     spineItem: endSpineItem,
                     spineItemIndex: spineItemManager.getSpineItemIndex(endSpineItem) ?? 0,
-                    pageIndex: spineItemLocator.getSpineItemPageIndexFromPosition(endPosition, endSpineItem),
+                    pageIndex: spineItemLocator.getSpineItemPageIndexFromPosition(
+                      endPosition,
+                      endSpineItem
+                    ),
                     cfi: shouldUpdateEndCfi ? cfiLocator.getCfi(endPageIndex, endSpineItem) : endLastCfi,
                     options: {
                       isAtEndOfChapter: false
@@ -3504,7 +3816,11 @@
                 () => fingerTracker$.pipe(
                   operators.filter(({ event: event2 }) => event2 === `fingermove`),
                   operators.debounce(() => rxjs.interval(1e3)),
-                  operators.takeUntil(fingerTracker$.pipe(operators.filter(({ event: event2 }) => event2 === `fingerout`))),
+                  operators.takeUntil(
+                    fingerTracker$.pipe(
+                      operators.filter(({ event: event2 }) => event2 === `fingerout`)
+                    )
+                  ),
                   operators.tap(({ data }) => {
                   })
                 )
@@ -3541,12 +3857,18 @@
             spineItemsFromPosition.beginPosition,
             beginSpineItem
           );
-          const beginPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(beginPosition, beginSpineItem);
+          const beginPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(
+            beginPosition,
+            beginSpineItem
+          );
           const endPosition = spineLocator.getSpineItemPositionFromSpinePosition(
             spineItemsFromPosition.endPosition,
             endSpineItem
           );
-          const endPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(endPosition, endSpineItem);
+          const endPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(
+            endPosition,
+            endSpineItem
+          );
           const endItemIndex = spineItemManager.getSpineItemIndex(endSpineItem) ?? 0;
           pagination.updateBeginAndEnd(
             {
@@ -3605,7 +3927,9 @@
     );
     itemUpdateOnNavigation$.pipe(
       operators.switchMap((data) => {
-        return adjustPagination(data.position).pipe(operators.takeUntil(spineItemManager.$.layout$));
+        return adjustPagination(data.position).pipe(
+          operators.takeUntil(spineItemManager.$.layout$)
+        );
       }),
       operators.takeUntil(context.destroy$)
     ).subscribe();
@@ -3629,10 +3953,20 @@
             const focusedSpineItemIndex = spineItemManager.getFocusedSpineItemIndex();
             report.log(`update contents`, { focusedSpineItemIndex });
             if (focusedSpineItemIndex === void 0) return;
-            const { begin = focusedSpineItemIndex, end = focusedSpineItemIndex } = spineLocator.getSpineItemsFromReadingOrderPosition(currentNavigationPosition) || {};
+            const {
+              begin = focusedSpineItemIndex,
+              end = focusedSpineItemIndex
+            } = spineLocator.getSpineItemsFromReadingOrderPosition(
+              currentNavigationPosition
+            ) || {};
             if (begin !== focusedSpineItemIndex && end !== focusedSpineItemIndex) {
-              Report.warn(`Current viewport is not in sync with focus item, load from focus item rather than viewport`);
-              spineItemManager.loadContents([focusedSpineItemIndex, focusedSpineItemIndex]);
+              Report.warn(
+                `Current viewport is not in sync with focus item, load from focus item rather than viewport`
+              );
+              spineItemManager.loadContents([
+                focusedSpineItemIndex,
+                focusedSpineItemIndex
+              ]);
             } else {
               spineItemManager.loadContents([begin, end]);
             }
@@ -3691,7 +4025,10 @@
     return element;
   };
   const NAMESPACE$4 = `spineItemManager`;
-  const createSpineItemManager = ({ context, settings }) => {
+  const createSpineItemManager = ({
+    context,
+    settings
+  }) => {
     const focus$ = new rxjs.Subject();
     const layout$ = new rxjs.Subject();
     let itemLayoutInformation = [];
@@ -3802,30 +4139,36 @@
       focusedSpineItemIndex = newActiveSpineItemIndex;
       focus$.next({ data: spineItemToFocus });
     };
-    const loadContents = Report.measurePerformance(`loadContents`, 10, (rangeOfIndex) => {
-      var _a;
-      const [leftIndex, rightIndex] = rangeOfIndex;
-      const numberOfAdjacentSpineItemToPreLoad = settings.settings.numberOfAdjacentSpineItemToPreLoad;
-      const isPrePaginated = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
-      const isUsingFreeScroll = settings.settings.computedPageTurnMode === `scrollable`;
-      orderedSpineItemsSubject$.value.forEach((orderedSpineItem, index) => {
-        const isBeforeFocusedWithPreload = (
-          // we never want to preload anything before on free scroll on flow because it could offset the cursor
-          index < leftIndex && !isPrePaginated && isUsingFreeScroll ? true : index < leftIndex - numberOfAdjacentSpineItemToPreLoad
-        );
-        const isAfterTailWithPreload = index > rightIndex + numberOfAdjacentSpineItemToPreLoad;
-        if (!isBeforeFocusedWithPreload && !isAfterTailWithPreload) {
-          orderedSpineItem.loadContent();
-        } else {
-          orderedSpineItem.unloadContent();
-        }
-      });
-    });
+    const loadContents = Report.measurePerformance(
+      `loadContents`,
+      10,
+      (rangeOfIndex) => {
+        var _a;
+        const [leftIndex, rightIndex] = rangeOfIndex;
+        const numberOfAdjacentSpineItemToPreLoad = settings.settings.numberOfAdjacentSpineItemToPreLoad;
+        const isPrePaginated = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
+        const isUsingFreeScroll = settings.settings.computedPageTurnMode === `scrollable`;
+        orderedSpineItemsSubject$.value.forEach((orderedSpineItem, index) => {
+          const isBeforeFocusedWithPreload = (
+            // we never want to preload anything before on free scroll on flow because it could offset the cursor
+            index < leftIndex && !isPrePaginated && isUsingFreeScroll ? true : index < leftIndex - numberOfAdjacentSpineItemToPreLoad
+          );
+          const isAfterTailWithPreload = index > rightIndex + numberOfAdjacentSpineItemToPreLoad;
+          if (!isBeforeFocusedWithPreload && !isAfterTailWithPreload) {
+            orderedSpineItem.loadContent();
+          } else {
+            orderedSpineItem.unloadContent();
+          }
+        });
+      }
+    );
     const get = (indexOrId) => {
       if (typeof indexOrId === `number`) {
         return orderedSpineItemsSubject$.value[indexOrId];
       }
-      return orderedSpineItemsSubject$.value.find(({ item }) => item.id === indexOrId);
+      return orderedSpineItemsSubject$.value.find(
+        ({ item }) => item.id === indexOrId
+      );
     };
     const getAbsolutePositionOf = (spineItemOrIndex) => {
       const indexOfItem = typeof spineItemOrIndex === `number` ? spineItemOrIndex : orderedSpineItemsSubject$.value.indexOf(spineItemOrIndex);
@@ -3910,7 +4253,9 @@
         itemIsReady$: orderedSpineItemsSubject$.asObservable().pipe(
           operators.switchMap((items) => {
             const itemsIsReady$ = items.map(
-              (item) => item.$.isReady$.pipe(operators.map((isReady) => ({ item: item.item, isReady })))
+              (item) => item.$.isReady$.pipe(
+                operators.map((isReady) => ({ item: item.item, isReady }))
+              )
             );
             return rxjs.merge(...itemsIsReady$);
           })
@@ -3981,7 +4326,10 @@
   );
   const getFirstVisibleElementForViewport = (element, viewport) => {
     let lastValidElement;
-    const positionFromViewport = getElementOrNodePositionFromViewPort(element.getBoundingClientRect(), viewport);
+    const positionFromViewport = getElementOrNodePositionFromViewPort(
+      element.getBoundingClientRect(),
+      viewport
+    );
     if (positionFromViewport !== `before` && positionFromViewport !== `after`) {
       lastValidElement = element;
     }
@@ -3997,7 +4345,8 @@
   };
   function getElementOrNodePositionFromViewPort(domRect, { left, right }) {
     if (domRect.left <= left && domRect.right <= left) return `before`;
-    if (domRect.left <= left && domRect.right > left && domRect.right <= right) return `partially-before`;
+    if (domRect.left <= left && domRect.right > left && domRect.right <= right)
+      return `partially-before`;
     if (domRect.left <= right && domRect.right > right) return `partially-after`;
     if (domRect.left > right) return `after`;
     return `within`;
@@ -4081,19 +4430,33 @@
   };
   const createLocationResolver$1 = ({ context }) => {
     const getSafePosition = (unsafeSpineItemPosition, spineItem) => ({
-      x: Math.min(spineItem.getElementDimensions().width, Math.max(0, unsafeSpineItemPosition.x)),
-      y: Math.min(spineItem.getElementDimensions().height, Math.max(0, unsafeSpineItemPosition.y))
+      x: Math.min(
+        spineItem.getElementDimensions().width,
+        Math.max(0, unsafeSpineItemPosition.x)
+      ),
+      y: Math.min(
+        spineItem.getElementDimensions().height,
+        Math.max(0, unsafeSpineItemPosition.y)
+      )
     });
     const getSpineItemPositionFromPageIndex = (pageIndex, spineItem) => {
       const { width: itemWidth, height: itemHeight } = spineItem.getElementDimensions();
       if (spineItem.isUsingVerticalWriting()) {
-        const ltrRelativeOffset2 = getItemOffsetFromPageIndex(context.getPageSize().height, pageIndex, itemHeight);
+        const ltrRelativeOffset2 = getItemOffsetFromPageIndex(
+          context.getPageSize().height,
+          pageIndex,
+          itemHeight
+        );
         return {
           x: 0,
           y: ltrRelativeOffset2
         };
       }
-      const ltrRelativeOffset = getItemOffsetFromPageIndex(context.getPageSize().width, pageIndex, itemWidth);
+      const ltrRelativeOffset = getItemOffsetFromPageIndex(
+        context.getPageSize().width,
+        pageIndex,
+        itemWidth
+      );
       if (context.isRTL()) {
         return {
           x: itemWidth - ltrRelativeOffset - context.getPageSize().width,
@@ -4112,7 +4475,10 @@
       const safePosition = getSafePosition(position, spineItem);
       const offset = context.isRTL() ? itemWidth - safePosition.x - context.getPageSize().width : safePosition.x;
       if (spineItem.isUsingVerticalWriting()) {
-        const numberOfPages = calculateNumberOfPagesForItem(itemHeight, pageHeight);
+        const numberOfPages = calculateNumberOfPagesForItem(
+          itemHeight,
+          pageHeight
+        );
         return getPageFromOffset(position.y, pageHeight, numberOfPages);
       } else {
         const numberOfPages = calculateNumberOfPagesForItem(itemWidth, pageWidth);
@@ -4126,7 +4492,11 @@
       const pageWidth = context.getPageSize().width;
       const anchorElementBoundingRect = spineItem.getBoundingRectOfElementFromSelector(anchor);
       const offsetOfAnchor = (anchorElementBoundingRect == null ? void 0 : anchorElementBoundingRect.x) || 0;
-      return getClosestValidOffsetFromApproximateOffsetInPages(offsetOfAnchor, pageWidth, itemWidth);
+      return getClosestValidOffsetFromApproximateOffsetInPages(
+        offsetOfAnchor,
+        pageWidth,
+        itemWidth
+      );
     };
     const getSpineItemPositionFromNode = (node, offset, spineItem) => {
       var _a;
@@ -4140,7 +4510,11 @@
       const spineItemWidth = ((_a = spineItem.getElementDimensions()) == null ? void 0 : _a.width) || 0;
       const pageWidth = context.getPageSize().width;
       if (offsetOfNodeInSpineItem) {
-        const val = getClosestValidOffsetFromApproximateOffsetInPages(offsetOfNodeInSpineItem, pageWidth, spineItemWidth);
+        const val = getClosestValidOffsetFromApproximateOffsetInPages(
+          offsetOfNodeInSpineItem,
+          pageWidth,
+          spineItemWidth
+        );
         return { x: val, y: 0 };
       }
       return void 0;
@@ -4151,14 +4525,20 @@
       const frame = (_b = (_a = spineItem.spineItemFrame) == null ? void 0 : _a.getManipulableFrame()) == null ? void 0 : _b.frame;
       if (((_c = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _c.document) && // very important because it is being used by next functions
       frame.contentWindow.document.body !== null) {
-        const { x: left, y: top } = getSpineItemPositionFromPageIndex(pageIndex, spineItem);
+        const { x: left, y: top } = getSpineItemPositionFromPageIndex(
+          pageIndex,
+          spineItem
+        );
         const viewport = {
           left,
           right: left + pageSize.width,
           top,
           bottom: top + pageSize.height
         };
-        const res = getFirstVisibleNodeForViewport(frame.contentWindow.document, viewport);
+        const res = getFirstVisibleNodeForViewport(
+          frame.contentWindow.document,
+          viewport
+        );
         return res;
       }
       return void 0;
@@ -4166,8 +4546,16 @@
     const getSpineItemClosestPositionFromUnsafePosition = (unsafePosition, spineItem) => {
       const { width, height } = spineItem.getElementDimensions();
       const adjustedPosition = {
-        x: getClosestValidOffsetFromApproximateOffsetInPages(unsafePosition.x, context.getPageSize().width, width),
-        y: getClosestValidOffsetFromApproximateOffsetInPages(unsafePosition.y, context.getPageSize().height, height)
+        x: getClosestValidOffsetFromApproximateOffsetInPages(
+          unsafePosition.x,
+          context.getPageSize().width,
+          width
+        ),
+        y: getClosestValidOffsetFromApproximateOffsetInPages(
+          unsafePosition.y,
+          context.getPageSize().height,
+          height
+        )
       };
       return adjustedPosition;
     };
@@ -4201,7 +4589,9 @@
       this.y = position.y;
     }
   }
-  const createNavigationResolver$1 = ({ context }) => {
+  const createNavigationResolver$1 = ({
+    context
+  }) => {
     const spineItemLocator = createLocationResolver$1({ context });
     const getNavigationForLeftPage = (position, spineItem) => {
       let nextPotentialPosition = {
@@ -4240,20 +4630,33 @@
     const getNavigationForLastPage = (spineItem) => {
       if (spineItem.isUsingVerticalWriting()) {
         const pageHeight = context.getPageSize().height;
-        const numberOfPages = calculateNumberOfPagesForItem(spineItem.getElementDimensions().height, pageHeight);
+        const numberOfPages = calculateNumberOfPagesForItem(
+          spineItem.getElementDimensions().height,
+          pageHeight
+        );
         return getNavigationForPage(numberOfPages - 1, spineItem);
       } else {
         const pageWidth = context.getPageSize().width;
-        const numberOfPages = calculateNumberOfPagesForItem(spineItem.getElementDimensions().width, pageWidth);
+        const numberOfPages = calculateNumberOfPagesForItem(
+          spineItem.getElementDimensions().width,
+          pageWidth
+        );
         return getNavigationForPage(numberOfPages - 1, spineItem);
       }
     };
     const getNavigationForPage = (pageIndex, spineItem) => {
-      const { x, y } = spineItemLocator.getSpineItemPositionFromPageIndex(pageIndex, spineItem);
+      const { x, y } = spineItemLocator.getSpineItemPositionFromPageIndex(
+        pageIndex,
+        spineItem
+      );
       return new SpineItemNavigationPosition({ x, y });
     };
     const getNavigationFromNode = (spineItem, node, offset) => {
-      const position = spineItemLocator.getSpineItemPositionFromNode(node, offset, spineItem);
+      const position = spineItemLocator.getSpineItemPositionFromNode(
+        node,
+        offset,
+        spineItem
+      );
       return new SpineItemNavigationPosition(position || { x: 0, y: 0 });
     };
     const getNavigationForPosition = (spineItem, position) => {
@@ -4287,8 +4690,12 @@
       `${NAMESPACE$3} wrapPositionWithSafeEdge`,
       1,
       (position) => {
-        const lastSpineItem = spineItemManager.get(spineItemManager.getLength() - 1);
-        const distanceOfLastSpineItem = spineItemManager.getAbsolutePositionOf(lastSpineItem || 0);
+        const lastSpineItem = spineItemManager.get(
+          spineItemManager.getLength() - 1
+        );
+        const distanceOfLastSpineItem = spineItemManager.getAbsolutePositionOf(
+          lastSpineItem || 0
+        );
         const maximumYOffset = distanceOfLastSpineItem.bottom - context.getPageSize().height;
         const y = Math.min(Math.max(0, position.y), maximumYOffset);
         if (context.isRTL()) {
@@ -4305,7 +4712,10 @@
       },
       { disable: true }
     );
-    const getAdjustedPositionForSpread = ({ x, y }) => {
+    const getAdjustedPositionForSpread = ({
+      x,
+      y
+    }) => {
       const isOffsetNotAtEdge = x % context.state.visibleAreaRect.width !== 0;
       const correctedX = isOffsetNotAtEdge ? x - context.getPageSize().width : x;
       return { x: correctedX, y };
@@ -4317,7 +4727,10 @@
         Report.warn(NAMESPACE$3, `unable to detect item id from cfi ${cfi}`);
       } else {
         const spineItemNavigation = node ? spineItemNavigator.getNavigationFromNode(spineItem, node, offset) : new SpineItemNavigationPosition({ x: 0, y: 0 });
-        const readingPosition = locator.getSpinePositionFromSpineItemPosition(spineItemNavigation, spineItem);
+        const readingPosition = locator.getSpinePositionFromSpineItemPosition(
+          spineItemNavigation,
+          spineItem
+        );
         return { ...getAdjustedPositionForSpread(readingPosition), spineItem };
       }
       return { x: 0, y: 0 };
@@ -4327,13 +4740,22 @@
         const xPositionForPageIndex = pageIndex * context.getPageSize().width;
         return getNavigationForPosition({ x: xPositionForPageIndex, y: 0 });
       }
-      const spineItemNavigation = spineItemNavigator.getNavigationForPage(pageIndex, spineItem);
-      const readingOffset = locator.getSpinePositionFromSpineItemPosition(spineItemNavigation, spineItem);
+      const spineItemNavigation = spineItemNavigator.getNavigationForPage(
+        pageIndex,
+        spineItem
+      );
+      const readingOffset = locator.getSpinePositionFromSpineItemPosition(
+        spineItemNavigation,
+        spineItem
+      );
       return getAdjustedPositionForSpread(readingOffset);
     };
     const getNavigationForLastPage = (spineItem) => {
       const spineItemNavigation = spineItemNavigator.getNavigationForLastPage(spineItem);
-      const position = locator.getSpinePositionFromSpineItemPosition(spineItemNavigation, spineItem);
+      const position = locator.getSpinePositionFromSpineItemPosition(
+        spineItemNavigation,
+        spineItem
+      );
       return getAdjustedPositionForSpread(position);
     };
     const getNavigationForSpineIndexOrId = (indexOrId) => {
@@ -4351,9 +4773,15 @@
       if (!spineItem) {
         return defaultNavigation;
       }
-      const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(position, spineItem);
+      const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(
+        position,
+        spineItem
+      );
       const spineItemNavigationForRightPage = spineItemNavigator.getNavigationForRightPage(spineItemPosition, spineItem);
-      const isNewNavigationInCurrentItem = arePositionsDifferent(spineItemNavigationForRightPage, spineItemPosition);
+      const isNewNavigationInCurrentItem = arePositionsDifferent(
+        spineItemNavigationForRightPage,
+        spineItemPosition
+      );
       if (!isNewNavigationInCurrentItem) {
         return wrapPositionWithSafeEdge(
           pageTurnDirection === `horizontal` ? { x: position.x + context.getPageSize().width, y: 0 } : { y: position.y + context.getPageSize().height, x: 0 }
@@ -4373,15 +4801,27 @@
       if (!spineItem) {
         return defaultNavigation;
       }
-      const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(position, spineItem);
-      const spineItemNavigation = spineItemNavigator.getNavigationForLeftPage(spineItemPosition, spineItem);
-      const isNewNavigationInCurrentItem = arePositionsDifferent(spineItemNavigation, spineItemPosition);
+      const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(
+        position,
+        spineItem
+      );
+      const spineItemNavigation = spineItemNavigator.getNavigationForLeftPage(
+        spineItemPosition,
+        spineItem
+      );
+      const isNewNavigationInCurrentItem = arePositionsDifferent(
+        spineItemNavigation,
+        spineItemPosition
+      );
       if (!isNewNavigationInCurrentItem) {
         return wrapPositionWithSafeEdge(
           pageTurnDirection === `horizontal` ? { x: position.x - context.getPageSize().width, y: 0 } : { y: position.y - context.getPageSize().height, x: 0 }
         );
       } else {
-        const readingOrderPosition = locator.getSpinePositionFromSpineItemPosition(spineItemNavigation, spineItem);
+        const readingOrderPosition = locator.getSpinePositionFromSpineItemPosition(
+          spineItemNavigation,
+          spineItem
+        );
         return readingOrderPosition;
       }
     };
@@ -4423,7 +4863,10 @@
         if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
           return getAdjustedPositionForSpread(
             wrapPositionWithSafeEdge(
-              context.isRTL() ? { ...navigation, x: navigation.x + context.getPageSize().width } : { ...navigation, x: navigation.x - context.getPageSize().width }
+              context.isRTL() ? { ...navigation, x: navigation.x + context.getPageSize().width } : {
+                ...navigation,
+                x: navigation.x - context.getPageSize().width
+              }
             )
           );
         }
@@ -4440,7 +4883,9 @@
       try {
         const validUrl = url instanceof URL ? url : new URL(url);
         const urlWithoutAnchor = `${validUrl.origin}${validUrl.pathname}`;
-        const existingSpineItem = (_a = context.manifest) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
+        const existingSpineItem = (_a = context.manifest) == null ? void 0 : _a.spineItems.find(
+          (item) => item.href === urlWithoutAnchor
+        );
         if (existingSpineItem) {
           const spineItem = spineItemManager.get(existingSpineItem.id);
           if (spineItem) {
@@ -4455,15 +4900,27 @@
       }
     };
     const getNavigationForAnchor = (anchor, spineItem) => {
-      const position = locator.getSpinePositionFromSpineItemAnchor(anchor, spineItem);
+      const position = locator.getSpinePositionFromSpineItemAnchor(
+        anchor,
+        spineItem
+      );
       return getAdjustedPositionForSpread(position);
     };
     const getNavigationForPosition = (viewportPosition) => {
       const spineItem = locator.getSpineItemFromPosition(viewportPosition);
       if (spineItem) {
-        const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(viewportPosition, spineItem);
-        const spineItemValidPosition = spineItemNavigator.getNavigationForPosition(spineItem, spineItemPosition);
-        const viewportNavigation = locator.getSpinePositionFromSpineItemPosition(spineItemValidPosition, spineItem);
+        const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(
+          viewportPosition,
+          spineItem
+        );
+        const spineItemValidPosition = spineItemNavigator.getNavigationForPosition(
+          spineItem,
+          spineItemPosition
+        );
+        const viewportNavigation = locator.getSpinePositionFromSpineItemPosition(
+          spineItemValidPosition,
+          spineItem
+        );
         return getAdjustedPositionForSpread(viewportNavigation);
       }
       return { x: 0, y: 0 };
@@ -4473,7 +4930,10 @@
       const triggerPercentage = 0.5;
       const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
       const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.state.visibleAreaRect.height * triggerPercentage;
-      const midScreenPositionSafePosition = wrapPositionWithSafeEdge({ x: triggerXPosition, y: triggerYPosition });
+      const midScreenPositionSafePosition = wrapPositionWithSafeEdge({
+        x: triggerXPosition,
+        y: triggerYPosition
+      });
       return getNavigationForPosition(midScreenPositionSafePosition);
     };
     const isNavigationGoingForwardFrom = (to, from) => {
@@ -4568,7 +5028,10 @@
     };
     const getCurrentViewportPosition = () => {
       var _a, _b;
-      return getScaledDownPosition({ x: ((_a = element$.getValue()) == null ? void 0 : _a.scrollLeft) ?? 0, y: ((_b = element$.getValue()) == null ? void 0 : _b.scrollTop) ?? 0 });
+      return getScaledDownPosition({
+        x: ((_a = element$.getValue()) == null ? void 0 : _a.scrollLeft) ?? 0,
+        y: ((_b = element$.getValue()) == null ? void 0 : _b.scrollTop) ?? 0
+      });
     };
     const navigationOnScroll$ = userScroll$.pipe(
       operators.debounceTime(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, rxjs.animationFrameScheduler),
@@ -4576,9 +5039,16 @@
       operators.switchMap(() => {
         var _a, _b;
         const navigation = getNavigationForPosition(
-          getScaledDownPosition({ x: ((_a = element$.getValue()) == null ? void 0 : _a.scrollLeft) ?? 0, y: ((_b = element$.getValue()) == null ? void 0 : _b.scrollTop) ?? 0 })
+          getScaledDownPosition({
+            x: ((_a = element$.getValue()) == null ? void 0 : _a.scrollLeft) ?? 0,
+            y: ((_b = element$.getValue()) == null ? void 0 : _b.scrollTop) ?? 0
+          })
         );
-        return rxjs.of({ position: navigation, animate: false, lastUserExpectedNavigation: void 0 });
+        return rxjs.of({
+          position: navigation,
+          animate: false,
+          lastUserExpectedNavigation: void 0
+        });
       }),
       operators.share()
     );
@@ -4616,16 +5086,29 @@
   }) => {
     const stateSubject$ = new rxjs.BehaviorSubject(`end`);
     const navigationTriggerSubject$ = new rxjs.Subject();
-    const turnLeft = ({ allowSpineItemChange = true } = {}) => navigationTriggerSubject$.next({ type: `leftPage`, data: { allowSpineItemChange } });
-    const turnRight = ({ allowSpineItemChange = true } = {}) => {
-      navigationTriggerSubject$.next({ type: `rightPage`, data: { allowSpineItemChange } });
+    const turnLeft = ({
+      allowSpineItemChange = true
+    } = {}) => navigationTriggerSubject$.next({
+      type: `leftPage`,
+      data: { allowSpineItemChange }
+    });
+    const turnRight = ({
+      allowSpineItemChange = true
+    } = {}) => {
+      navigationTriggerSubject$.next({
+        type: `rightPage`,
+        data: { allowSpineItemChange }
+      });
     };
     const goToPageOfCurrentChapter = (pageIndex) => navigationTriggerSubject$.next({ type: `chapterPage`, data: { pageIndex } });
     const goToPage = (pageIndex) => navigationTriggerSubject$.next({ type: `pageIndex`, data: { pageIndex } });
     const goToCfi = (cfi, options = { animate: true }) => navigationTriggerSubject$.next({ type: `cfi`, data: { cfi, ...options } });
     const goToUrl = (url) => navigationTriggerSubject$.next({ type: `url`, data: url });
     const goToSpineItem = (indexOrId, options = { animate: true }) => {
-      navigationTriggerSubject$.next({ type: `spineItem`, data: { indexOrId, ...options } });
+      navigationTriggerSubject$.next({
+        type: `spineItem`,
+        data: { indexOrId, ...options }
+      });
     };
     const urlNavigation$ = navigationTriggerSubject$.pipe(
       operators.filter((e) => e.type === `url`),
@@ -4636,7 +5119,10 @@
           return rxjs.of({
             ...navigation,
             animate: true,
-            lastUserExpectedNavigation: { type: `navigate-from-anchor`, data: navigation.url.hash }
+            lastUserExpectedNavigation: {
+              type: `navigate-from-anchor`,
+              data: navigation.url.hash
+            }
           });
         }
         return rxjs.EMPTY;
@@ -4646,7 +5132,9 @@
       operators.filter((e) => e.type === `spineItem`),
       operators.switchMap(({ data: { animate, indexOrId } }) => {
         const navigation = navigator2.getNavigationForSpineIndexOrId(indexOrId);
-        const lastUserExpectedNavigation = { type: `navigate-from-previous-item` };
+        const lastUserExpectedNavigation = {
+          type: `navigate-from-previous-item`
+        };
         Report.log(NAMESPACE$2, `goToSpineItem`, { indexOrId, animate, navigation });
         return rxjs.of({ ...navigation, animate, lastUserExpectedNavigation });
       })
@@ -4659,7 +5147,10 @@
         return {
           ...navigation,
           animate,
-          lastUserExpectedNavigation: { type: `navigate-from-cfi`, data: cfi }
+          lastUserExpectedNavigation: {
+            type: `navigate-from-cfi`,
+            data: cfi
+          }
         };
       })
     );
@@ -4669,7 +5160,11 @@
         const spineItem = spineItemManager.getFocusedSpineItem();
         if (spineItem) {
           const navigation = navigator2.getNavigationForPage(pageIndex, spineItem);
-          return rxjs.of({ ...navigation, lastUserExpectedNavigation: void 0, animate: true });
+          return rxjs.of({
+            ...navigation,
+            lastUserExpectedNavigation: void 0,
+            animate: true
+          });
         }
         return rxjs.EMPTY;
       })
@@ -4702,26 +5197,31 @@
         const spineItemHasChanged = newSpineItem !== currentSpineItem;
         if (spineItemHasChanged) {
           if (allowSpineItemChange) {
-            const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(
-              newSpineItem,
-              currentSpineItem
-            );
+            const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(newSpineItem, currentSpineItem);
             if (positionOfNewSpineItemComparedToCurrentOne === `before`) {
               return rxjs.of({
                 ...navigation,
-                lastUserExpectedNavigation: { type: `navigate-from-next-item` },
+                lastUserExpectedNavigation: {
+                  type: `navigate-from-next-item`
+                },
                 animate: true
               });
             } else {
               return rxjs.of({
                 ...navigation,
-                lastUserExpectedNavigation: { type: `navigate-from-previous-item` },
+                lastUserExpectedNavigation: {
+                  type: `navigate-from-previous-item`
+                },
                 animate: true
               });
             }
           }
         } else {
-          return rxjs.of({ ...navigation, lastUserExpectedNavigation: void 0, animate: true });
+          return rxjs.of({
+            ...navigation,
+            lastUserExpectedNavigation: void 0,
+            animate: true
+          });
         }
         return rxjs.EMPTY;
       }
@@ -4737,7 +5237,11 @@
           currentNavigation
         ]) => {
           const navigation = navigator2.getNavigationForLeftPage(currentNavigation);
-          Report.log(NAMESPACE$2, `turnLeft`, { currentNavigation, navigation, allowSpineItemChange });
+          Report.log(NAMESPACE$2, `turnLeft`, {
+            currentNavigation,
+            navigation,
+            allowSpineItemChange
+          });
           return turnPageTo$(navigation, { allowSpineItemChange });
         }
       )
@@ -4753,7 +5257,11 @@
           currentNavigation
         ]) => {
           const navigation = navigator2.getNavigationForRightPage(currentNavigation);
-          Report.log(NAMESPACE$2, `turnRight`, { currentNavigation, navigation, allowSpineItemChange });
+          Report.log(NAMESPACE$2, `turnRight`, {
+            currentNavigation,
+            navigation,
+            allowSpineItemChange
+          });
           return turnPageTo$(navigation, { allowSpineItemChange });
         }
       )
@@ -4773,7 +5281,9 @@
        * navigation would theoretically always move to different items.
        */
       operators.withLatestFrom(currentNavigationSubject$),
-      operators.filter(([navigation, currentNavigation]) => navigator2.areNavigationDifferent(navigation, currentNavigation)),
+      operators.filter(
+        ([navigation, currentNavigation]) => navigator2.areNavigationDifferent(navigation, currentNavigation)
+      ),
       operators.map(([navigation]) => navigation)
     );
     return {
@@ -4864,7 +5374,10 @@
         const spineItemHasChanged = newSpineItem !== currentSpineItem;
         if (spineItemHasChanged) {
           if (allowSpineItemChange) {
-            if (spineItemManager.comparePositionOf(newSpineItem, currentSpineItem) === `before`) {
+            if (spineItemManager.comparePositionOf(
+              newSpineItem,
+              currentSpineItem
+            ) === `before`) {
               return { type: `navigate-from-next-item` };
             } else {
               return { type: `navigate-from-previous-item` };
@@ -4894,7 +5407,9 @@
             x: triggerXPosition,
             y: triggerYPosition
           });
-          const finalNavigation = navigator2.getNavigationForPosition(midScreenPositionSafePosition);
+          const finalNavigation = navigator2.getNavigationForPosition(
+            midScreenPositionSafePosition
+          );
           const lastUserExpectedNavigation = getLastUserExpectedNavigation(finalNavigation);
           return rxjs.of({ ...finalNavigation, lastUserExpectedNavigation });
         }
@@ -4946,23 +5461,30 @@
       locator: spineLocator
     });
     const adjustNavigationSubject$ = new rxjs.Subject();
-    const getCurrentViewportPosition = Report.measurePerformance(`${NAMESPACE} getCurrentViewportPosition`, 1, () => {
-      var _a;
-      if (settings.settings.computedPageTurnMode === `scrollable`) {
-        return scrollViewportNavigator.getCurrentViewportPosition();
+    const getCurrentViewportPosition = Report.measurePerformance(
+      `${NAMESPACE} getCurrentViewportPosition`,
+      1,
+      () => {
+        var _a;
+        if (settings.settings.computedPageTurnMode === `scrollable`) {
+          return scrollViewportNavigator.getCurrentViewportPosition();
+        }
+        const { x, y } = ((_a = element$.getValue()) == null ? void 0 : _a.getBoundingClientRect()) ?? {
+          x: 0,
+          y: 0
+        };
+        const newValue = {
+          // we want to round to first decimal because it's possible to have half pixel
+          // however browser engine can also gives back x.yyyy based on their precision
+          // @see https://stackoverflow.com/questions/13847053/difference-between-and-math-floor for ~~
+          x: ~~(x * -1 * 10) / 10,
+          // x: ~~(x * 10) / 10,
+          y: ~~(Math.abs(y) * 10) / 10
+        };
+        currentViewportPositionMemoUnused = newValue;
+        return currentViewportPositionMemoUnused;
       }
-      const { x, y } = ((_a = element$.getValue()) == null ? void 0 : _a.getBoundingClientRect()) ?? { x: 0, y: 0 };
-      const newValue = {
-        // we want to round to first decimal because it's possible to have half pixel
-        // however browser engine can also gives back x.yyyy based on their precision
-        // @see https://stackoverflow.com/questions/13847053/difference-between-and-math-floor for ~~
-        x: ~~(x * -1 * 10) / 10,
-        // x: ~~(x * 10) / 10,
-        y: ~~(Math.abs(y) * 10) / 10
-      };
-      currentViewportPositionMemoUnused = newValue;
-      return currentViewportPositionMemoUnused;
-    });
+    );
     const panViewportNavigator = createPanViewportNavigator({
       context,
       settings,
@@ -4988,8 +5510,14 @@
       spineItemManager,
       locator: spineLocator
     });
-    const viewportNavigators = [scrollViewportNavigator, panViewportNavigator, manualViewportNavigator];
-    const viewportNavigatorsSharedState$ = rxjs.merge(...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2));
+    const viewportNavigators = [
+      scrollViewportNavigator,
+      panViewportNavigator,
+      manualViewportNavigator
+    ];
+    const viewportNavigatorsSharedState$ = rxjs.merge(
+      ...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2)
+    );
     let lastUserExpectedNavigation;
     const makeItHot = (source$) => {
       source$.pipe(operators.takeUntil(context.destroy$)).subscribe();
@@ -5017,28 +5545,51 @@
       let adjustedSpinePosition = currentNavigationPositionSubject$.value;
       const offsetInSpineItem = 0;
       if (settings.settings.computedPageTurnMode === `scrollable`) {
-        adjustedSpinePosition = scrollViewportNavigator.getNavigationForPosition(getCurrentViewportPosition());
+        adjustedSpinePosition = scrollViewportNavigator.getNavigationForPosition(
+          getCurrentViewportPosition()
+        );
       } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-cfi`) {
-        adjustedSpinePosition = navigator2.getNavigationForCfi(lastUserExpectedNavigation.data);
-        Report.log(NAMESPACE, `adjustNavigation`, `navigate-from-cfi`, `use last cfi`);
+        adjustedSpinePosition = navigator2.getNavigationForCfi(
+          lastUserExpectedNavigation.data
+        );
+        Report.log(
+          NAMESPACE,
+          `adjustNavigation`,
+          `navigate-from-cfi`,
+          `use last cfi`
+        );
       } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-next-item`) {
         adjustedSpinePosition = navigator2.getNavigationForLastPage(spineItem);
         Report.log(NAMESPACE, `adjustNavigation`, `navigate-from-next-item`, {});
       } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-previous-item`) {
         adjustedSpinePosition = navigator2.getNavigationForPage(0, spineItem);
-        Report.log(NAMESPACE, `adjustNavigation`, `navigate-from-previous-item`, {});
+        Report.log(
+          NAMESPACE,
+          `adjustNavigation`,
+          `navigate-from-previous-item`,
+          {}
+        );
       } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-anchor`) {
         const anchor = lastUserExpectedNavigation.data;
-        adjustedSpinePosition = navigator2.getNavigationForAnchor(anchor, spineItem);
+        adjustedSpinePosition = navigator2.getNavigationForAnchor(
+          anchor,
+          spineItem
+        );
       } else if (lastCfi) {
         adjustedSpinePosition = navigator2.getNavigationForCfi(lastCfi);
         Report.log(NAMESPACE, `adjustNavigation`, `use last cfi`);
       } else {
         const currentPageIndex = pagination.getPaginationInfo().beginPageIndexInSpineItem || 0;
-        adjustedSpinePosition = navigator2.getNavigationForPage(currentPageIndex, spineItem);
+        adjustedSpinePosition = navigator2.getNavigationForPage(
+          currentPageIndex,
+          spineItem
+        );
         Report.log(NAMESPACE, `adjustNavigation`, `use guess strategy`, {});
       }
-      const areDifferent = navigator2.arePositionsDifferent(adjustedSpinePosition, currentNavigationPositionSubject$.value);
+      const areDifferent = navigator2.arePositionsDifferent(
+        adjustedSpinePosition,
+        currentNavigationPositionSubject$.value
+      );
       Report.log(NAMESPACE, `adjustNavigation`, {
         areDifferent,
         offsetInSpineItem,
@@ -5062,7 +5613,11 @@
       currentViewportPositionMemoUnused = void 0;
     });
     const layoutChangeSettings$ = settings.settings$.pipe(
-      mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
+      mapKeysTo([
+        `computedPageTurnDirection`,
+        `computedPageTurnMode`,
+        `numberOfAdjacentSpineItemToPreLoad`
+      ]),
       operators.distinctUntilChanged(isShallowEqual),
       operators.skip(1)
     );
@@ -5174,10 +5729,16 @@
             const noAdjustmentNeeded = false;
             if (data.shouldAnimate && !noAdjustmentNeeded) {
               if (pageTurnAnimation === `fade`) {
-                element$.getValue().style.setProperty(`transition`, `opacity ${animationDuration / 2}ms`);
+                element$.getValue().style.setProperty(
+                  `transition`,
+                  `opacity ${animationDuration / 2}ms`
+                );
                 element$.getValue().style.setProperty(`opacity`, `0`);
               } else if (currentEvent.animation === `snap` || pageTurnAnimation === `slide`) {
-                element$.getValue().style.setProperty(`transition`, `transform ${animationDuration}ms`);
+                element$.getValue().style.setProperty(
+                  `transition`,
+                  `transform ${animationDuration}ms`
+                );
                 element$.getValue().style.setProperty(`opacity`, `1`);
               }
             } else {
@@ -5226,8 +5787,13 @@
       rxjs.merge(manualAdjust$).pipe(operators.map(() => `start`)),
       rxjs.merge(processManualAdjust$).pipe(operators.map(() => `end`))
     );
-    const state$ = rxjs.combineLatest([...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2), adjustmentState$]).pipe(
-      operators.map((states) => states.every((state) => state === `end`) ? `free` : `busy`),
+    const state$ = rxjs.combineLatest([
+      ...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2),
+      adjustmentState$
+    ]).pipe(
+      operators.map(
+        (states) => states.every((state) => state === `end`) ? `free` : `busy`
+      ),
       operators.distinctUntilChanged(),
       operators.shareReplay(1),
       /**
@@ -5317,7 +5883,9 @@
     position: relative;
   `;
     element.className = `${HTML_PREFIX$1}-viewport-navigator`;
-    hookManager.execute("viewportNavigator.onBeforeContainerCreated", void 0, { element });
+    hookManager.execute("viewportNavigator.onBeforeContainerCreated", void 0, {
+      element
+    });
     return element;
   };
   const createLocationResolver = ({
@@ -5376,8 +5944,14 @@
       return getSpinePositionFromSpineItemPosition({ x: 0, y: 0 }, spineItem);
     };
     const getSpinePositionFromSpineItemAnchor = (anchor, spineItem) => {
-      const spineItemOffset = spineItemLocator.getSpineItemOffsetFromAnchor(anchor, spineItem);
-      const position = getSpinePositionFromSpineItemPosition({ x: spineItemOffset, y: 0 }, spineItem);
+      const spineItemOffset = spineItemLocator.getSpineItemOffsetFromAnchor(
+        anchor,
+        spineItem
+      );
+      const position = getSpinePositionFromSpineItemPosition(
+        { x: spineItemOffset, y: 0 },
+        spineItem
+      );
       return position;
     };
     const getSpineItemsFromReadingOrderPosition = (position) => {
@@ -5386,7 +5960,10 @@
       if (itemAtPositionIndex === void 0) return void 0;
       let endPosition = position;
       if (context.state.isUsingSpreadMode) {
-        endPosition = { x: position.x + context.getPageSize().width, y: position.y };
+        endPosition = {
+          x: position.x + context.getPageSize().width,
+          y: position.y
+        };
       }
       const endItemIndex = spineItemManager.getSpineItemIndex(
         getSpineItemFromPosition(endPosition) || spineItemManager.getFocusedSpineItem()
@@ -5414,9 +5991,17 @@
     const getSpineItemPageIndexFromNode = (node, offset, spineItemOrIndex) => {
       if (typeof spineItemOrIndex === `number`) {
         const spineItem = spineItemManager.get(spineItemOrIndex);
-        return spineItem ? spineItemLocator.getSpineItemPageIndexFromNode(node, offset || 0, spineItem) : void 0;
+        return spineItem ? spineItemLocator.getSpineItemPageIndexFromNode(
+          node,
+          offset || 0,
+          spineItem
+        ) : void 0;
       }
-      return spineItemLocator.getSpineItemPageIndexFromNode(node, offset || 0, spineItemOrIndex);
+      return spineItemLocator.getSpineItemPageIndexFromNode(
+        node,
+        offset || 0,
+        spineItemOrIndex
+      );
     };
     return {
       getSpinePositionFromSpineItemPosition,
@@ -5434,18 +6019,29 @@
     spineItemLocator
   }) => {
     const getItemAnchor = (spineItem) => `|[prose~anchor~${encodeURIComponent(spineItem.item.id)}]`;
-    const getCfi = Report.measurePerformance(`getCfi`, 10, (pageIndex, spineItem) => {
-      var _a, _b, _c;
-      const nodeOrRange = spineItemLocator.getFirstNodeOrRangeAtPage(pageIndex, spineItem);
-      const doc = (_c = (_b = (_a = spineItem.spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame) == null ? void 0 : _b.contentWindow) == null ? void 0 : _c.document;
-      const itemAnchor = getItemAnchor(spineItem);
-      const offset = `|[prose~offset~${(nodeOrRange == null ? void 0 : nodeOrRange.offset) || 0}]`;
-      if (nodeOrRange && doc) {
-        const cfiString = CFI.generate(nodeOrRange.node, 0, `${itemAnchor}${offset}`);
-        return cfiString;
+    const getCfi = Report.measurePerformance(
+      `getCfi`,
+      10,
+      (pageIndex, spineItem) => {
+        var _a, _b, _c;
+        const nodeOrRange = spineItemLocator.getFirstNodeOrRangeAtPage(
+          pageIndex,
+          spineItem
+        );
+        const doc = (_c = (_b = (_a = spineItem.spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame) == null ? void 0 : _b.contentWindow) == null ? void 0 : _c.document;
+        const itemAnchor = getItemAnchor(spineItem);
+        const offset = `|[prose~offset~${(nodeOrRange == null ? void 0 : nodeOrRange.offset) || 0}]`;
+        if (nodeOrRange && doc) {
+          const cfiString = CFI.generate(
+            nodeOrRange.node,
+            0,
+            `${itemAnchor}${offset}`
+          );
+          return cfiString;
+        }
+        return getRootCfi(spineItem);
       }
-      return getRootCfi(spineItem);
-    });
+    );
     const getRootCfi = (spineItem) => {
       const itemAnchor = getItemAnchor(spineItem);
       return `epubcfi(/0${itemAnchor}) `;
@@ -5492,9 +6088,22 @@
         spineItemIndex
       };
     };
-    const generateFromRange = ({ startNode, start, end, endNode }, item) => {
-      const startCFI = CFI.generate(startNode, start, `|[prose~anchor~${encodeURIComponent(item.id)}]`);
-      const endCFI = CFI.generate(endNode, end, `|[prose~anchor~${encodeURIComponent(item.id)}]`);
+    const generateFromRange = ({
+      startNode,
+      start,
+      end,
+      endNode
+    }, item) => {
+      const startCFI = CFI.generate(
+        startNode,
+        start,
+        `|[prose~anchor~${encodeURIComponent(item.id)}]`
+      );
+      const endCFI = CFI.generate(
+        endNode,
+        end,
+        `|[prose~anchor~${encodeURIComponent(item.id)}]`
+      );
       return { start: startCFI, end: endCFI };
     };
     return {
@@ -5506,93 +6115,124 @@
       generateFromRange
     };
   };
-  const getComputedSettings = (settings, context) => {
-    const manifest = context.manifest;
-    const hasVerticalWriting = context.state.hasVerticalWriting ?? false;
-    const computedSettings = {
-      computedPageTurnDirection: settings.pageTurnDirection,
-      computedPageTurnAnimation: settings.pageTurnAnimation,
-      computedPageTurnMode: `controlled`,
-      computedPageTurnAnimationDuration: 0
-    };
-    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
-      computedSettings.computedPageTurnMode = `scrollable`;
-      computedSettings.computedPageTurnDirection = `vertical`;
-    } else if (manifest && settings.pageTurnMode === `scrollable` && (manifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(manifest))) {
-      Report.warn(`pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`);
-      computedSettings.computedPageTurnAnimation = `none`;
-      computedSettings.computedPageTurnMode = `controlled`;
-    } else if (settings.pageTurnMode === `scrollable`) {
-      computedSettings.computedPageTurnMode = `scrollable`;
-      computedSettings.computedPageTurnDirection = `vertical`;
-    }
-    if (hasVerticalWriting && computedSettings.computedPageTurnAnimation === `slide`) {
-      Report.warn(
-        `pageTurnAnimation ${computedSettings.computedPageTurnAnimation} incompatible with current book, switching back to default`
-      );
-      computedSettings.computedPageTurnAnimation = `none`;
-    }
-    if (computedSettings.computedPageTurnMode === `scrollable`) {
-      computedSettings.computedPageTurnAnimationDuration = 0;
-      computedSettings.computedPageTurnAnimation = `none`;
-    } else {
-      computedSettings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
-    }
-    return computedSettings;
-  };
-  const defaultSettings = {
-    forceSinglePageMode: false,
-    pageTurnAnimation: `none`,
-    //   computedPageTurnAnimation: `none`,
-    pageTurnDirection: `horizontal`,
-    //   computedPageTurnDirection: `horizontal`,
-    pageTurnAnimationDuration: void 0,
-    //   computedPageTurnAnimationDuration: 0,
-    pageTurnMode: `controlled`,
-    //   computedPageTurnMode: `controlled`,
-    snapAnimationDuration: 300,
-    navigationSnapThreshold: 0.3,
-    numberOfAdjacentSpineItemToPreLoad: 0
-  };
   class SettingsManager {
-    constructor(initialSettings, context) {
-      this._context = context;
+    constructor(initialSettings) {
       const settingsWithDefaults = {
-        ...defaultSettings,
+        ...this.getDefaultSettings(),
         ...initialSettings
       };
-      const computedSettings = getComputedSettings(settingsWithDefaults, context);
-      const settings = { ...settingsWithDefaults, ...computedSettings };
-      this._settingsSubject$ = new rxjs.BehaviorSubject(settings);
-      this.settings$ = this._settingsSubject$.asObservable().pipe(operators.distinctUntilChanged(isShallowEqual));
-      const recomputeSettingsOnContextChange$ = rxjs.combineLatest([context.hasVerticalWriting$, context.manifest$]).pipe(
+      this.inputSettings = settingsWithDefaults;
+      this.outputSettingsUpdateSubject = new rxjs.Subject();
+      this.settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(operators.shareReplay(1));
+      this.settings$.subscribe();
+    }
+    _prepareUpdate(settings) {
+      const newInputSettings = shallowMergeIfDefined(this.inputSettings, settings);
+      const state = this.getOutputSettings(newInputSettings);
+      const hasChanged = !isShallowEqual(this.outputSettings, state);
+      return {
+        hasChanged,
+        state,
+        commit: () => {
+          this.inputSettings = newInputSettings;
+          this.outputSettings = state;
+          if (hasChanged) {
+            this.outputSettingsUpdateSubject.next(state);
+          }
+          return state;
+        }
+      };
+    }
+    update(settings) {
+      const { commit } = this._prepareUpdate(settings);
+      commit();
+    }
+    get settings() {
+      if (!this.outputSettings) {
+        const { commit } = this._prepareUpdate(this.inputSettings);
+        return commit();
+      }
+      return this.outputSettings;
+    }
+    destroy() {
+      this.outputSettingsUpdateSubject.complete();
+    }
+  }
+  class ReaderSettingsManager extends SettingsManager {
+    constructor(initialSettings, context) {
+      super(initialSettings);
+      this.context = context;
+      const recomputeSettingsOnContextChange$ = rxjs.combineLatest([
+        context.hasVerticalWriting$,
+        context.manifest$
+      ]).pipe(
         operators.tap(() => {
-          this._updateSettings(this.settings);
+          this.update(this.settings);
         })
       );
-      const updateContextOnSettingsChanges$ = this._settingsSubject$.pipe(
+      const updateContextOnSettingsChanges$ = this.settings$.pipe(
         operators.tap(({ forceSinglePageMode }) => {
           context.update({ forceSinglePageMode });
         })
       );
       rxjs.merge(recomputeSettingsOnContextChange$, updateContextOnSettingsChanges$).pipe(operators.takeUntil(context.destroy$)).subscribe();
+      this.settings$.subscribe();
     }
-    // @see https://github.com/microsoft/TypeScript/issues/17293
-    _updateSettings(settings) {
-      const computed = getComputedSettings(settings, this._context);
-      const newMergedSettings = { ...settings, ...computed };
-      this._settingsSubject$.next(newMergedSettings);
-    }
-    setSettings(settings) {
-      if (Object.keys(settings).length === 0) return;
-      const newMergedSettings = { ...this._settingsSubject$.value, ...settings };
-      this._updateSettings(newMergedSettings);
+    getComputedSettings(settings) {
+      const manifest = this.context.manifest;
+      const hasVerticalWriting = this.context.state.hasVerticalWriting ?? false;
+      const computedSettings = {
+        computedPageTurnDirection: settings.pageTurnDirection,
+        computedPageTurnAnimation: settings.pageTurnAnimation,
+        computedPageTurnMode: `controlled`,
+        computedPageTurnAnimationDuration: 0
+      };
+      if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
+        computedSettings.computedPageTurnMode = `scrollable`;
+        computedSettings.computedPageTurnDirection = `vertical`;
+      } else if (manifest && settings.pageTurnMode === `scrollable` && (manifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(manifest))) {
+        Report.warn(
+          `pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`
+        );
+        computedSettings.computedPageTurnAnimation = `none`;
+        computedSettings.computedPageTurnMode = `controlled`;
+      } else if (settings.pageTurnMode === `scrollable`) {
+        computedSettings.computedPageTurnMode = `scrollable`;
+        computedSettings.computedPageTurnDirection = `vertical`;
+      }
+      if (hasVerticalWriting && computedSettings.computedPageTurnAnimation === `slide`) {
+        Report.warn(
+          `pageTurnAnimation ${computedSettings.computedPageTurnAnimation} incompatible with current book, switching back to default`
+        );
+        computedSettings.computedPageTurnAnimation = `none`;
+      }
+      if (computedSettings.computedPageTurnMode === `scrollable`) {
+        computedSettings.computedPageTurnAnimationDuration = 0;
+        computedSettings.computedPageTurnAnimation = `none`;
+      } else {
+        computedSettings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+      }
+      return computedSettings;
     }
-    get settings() {
-      return this._settingsSubject$.getValue();
+    getOutputSettings(inputSettings) {
+      const computedSettings = this.getComputedSettings(inputSettings);
+      return { ...this.outputSettings, ...inputSettings, ...computedSettings };
     }
-    destroy() {
-      this._settingsSubject$.complete();
+    getDefaultSettings() {
+      return {
+        forceSinglePageMode: false,
+        pageTurnAnimation: `none`,
+        //   computedPageTurnAnimation: `none`,
+        pageTurnDirection: `horizontal`,
+        //   computedPageTurnDirection: `horizontal`,
+        pageTurnAnimationDuration: void 0,
+        //   computedPageTurnAnimationDuration: 0,
+        pageTurnMode: `controlled`,
+        //   computedPageTurnMode: `controlled`,
+        snapAnimationDuration: 300,
+        navigationSnapThreshold: 0.3,
+        numberOfAdjacentSpineItemToPreLoad: 0
+      };
     }
   }
   class HookManager {
@@ -5625,7 +6265,9 @@
       };
     }
     execute(name, id, params) {
-      const hooks = this._hooks.filter((hook) => name === hook.name);
+      const hooks = this._hooks.filter(
+        (hook) => name === hook.name
+      );
       const fnResults = hooks.map((hook) => {
         let userDestroyFn = () => rxjs.of(void 0);
         const destroySubject = new rxjs.Subject();
@@ -5638,7 +6280,11 @@
           const result = userDestroyFn();
           return result ?? rxjs.of(void 0);
         };
-        const fnResult = hook.runFn({ ...params, destroy$: destroySubject.asObservable(), destroy });
+        const fnResult = hook.runFn({
+          ...params,
+          destroy$: destroySubject.asObservable(),
+          destroy
+        });
         this._hookExecutions.push({
           name,
           id,
@@ -5657,7 +6303,9 @@
           name === hookInstance.name && (!id || id && id === hookInstance.id)
         )
       );
-      this._hookExecutions = this._hookExecutions.filter((instance) => !instances.includes(instance));
+      this._hookExecutions = this._hookExecutions.filter(
+        (instance) => !instances.includes(instance)
+      );
       const destroyFns = instances.map(({ destroyFn }) => destroyFn());
       return rxjs.combineLatest(destroyFns);
     }
@@ -5677,10 +6325,15 @@
     const viewportStateSubject = new rxjs.BehaviorSubject(`free`);
     const hookManager = new HookManager();
     const context = new Context();
-    const settingsManager = new SettingsManager(inputSettings, context);
-    const spineItemManager = createSpineItemManager({ context, settings: settingsManager });
+    const settingsManager = new ReaderSettingsManager(inputSettings, context);
+    const spineItemManager = createSpineItemManager({
+      context,
+      settings: settingsManager
+    });
     const pagination = createPagination({ context, spineItemManager });
-    const elementSubject$ = new rxjs.BehaviorSubject(void 0);
+    const elementSubject$ = new rxjs.BehaviorSubject(
+      void 0
+    );
     const element$ = elementSubject$.pipe(operators.filter(isDefined));
     const spineItemLocator = createLocationResolver$1({ context });
     const spineLocator = createLocationResolver({
@@ -5723,8 +6376,12 @@
     });
     viewportNavigator.$.state$.subscribe(viewportStateSubject);
     viewportNavigator.$.navigation$.subscribe(navigationSubject);
-    viewportNavigator.$.navigationAdjustedAfterLayout$.subscribe(navigationAdjustedSubject);
-    viewportNavigator.$.currentNavigationPosition$.subscribe(currentNavigationPositionSubject$);
+    viewportNavigator.$.navigationAdjustedAfterLayout$.subscribe(
+      navigationAdjustedSubject
+    );
+    viewportNavigator.$.currentNavigationPosition$.subscribe(
+      currentNavigationPositionSubject$
+    );
     const layout = () => {
       var _a;
       const containerElement = (_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement;
@@ -5766,7 +6423,11 @@
         elementSubject$.next(element);
         loadOptions.containerElement.appendChild(element);
       }
-      context.update({ manifest, ...loadOptions, forceSinglePageMode: settingsManager.settings.forceSinglePageMode });
+      context.update({
+        manifest,
+        ...loadOptions,
+        forceSinglePageMode: settingsManager.settings.forceSinglePageMode
+      });
       layout();
       if (!loadOptions.cfi) {
         viewportNavigator.goToSpineItem(0, { animate: false });
@@ -5851,7 +6512,9 @@
          * have an effect.
          * It can typically be used to hide a loading indicator.
          */
-        loadStatus$: context.manifest$.pipe(operators.map((manifest) => manifest ? "ready" : "idle")),
+        loadStatus$: context.manifest$.pipe(
+          operators.map((manifest) => manifest ? "ready" : "idle")
+        ),
         /**
          * Dispatched when a change in selection happens
          */
@@ -6018,7 +6681,9 @@
       operators.mergeMap(({ id, data }) => {
         const item = retrieveItem(id);
         if (!item) return rxjs.EMPTY;
-        return rxjs.from(rxjs.forkJoin([openDatabase(`prose-reader`), rxjs.from(data.blob())])).pipe(
+        return rxjs.from(
+          rxjs.forkJoin([openDatabase(`prose-reader`), rxjs.from(data.blob())])
+        ).pipe(
           operators.switchMap(([db, blob]) => {
             return rxjs.from(db.put(`${uniqueID}_${item.id}`, blob));
           }),
@@ -6041,7 +6706,9 @@
         return rxjs.from(openDatabase(`prose-reader`)).pipe(
           operators.switchMap(
             (db) => rxjs.from(db.keys()).pipe(
-              operators.map((keys) => keys.filter((key) => !key.toString().startsWith(uniqueID))),
+              operators.map(
+                (keys) => keys.filter((key) => !key.toString().startsWith(uniqueID))
+              ),
               operators.switchMap((keysToRemove) => {
                 const promises = keysToRemove.map((key) => db.remove(key));
                 return rxjs.from(Promise.all(promises));
@@ -6088,7 +6755,9 @@
         entries.forEach((entry) => {
           var _a;
           const frame = entry.target;
-          const audios = Array.from(((_a = frame.contentDocument) == null ? void 0 : _a.body.getElementsByTagName(`audio`)) || []);
+          const audios = Array.from(
+            ((_a = frame.contentDocument) == null ? void 0 : _a.body.getElementsByTagName(`audio`)) || []
+          );
           if (!entry.isIntersecting) {
             audios.forEach((audioElement) => {
               audioElement.pause();
@@ -6167,7 +6836,11 @@
       let totalProgress = estimateBeforeThisItem + progressWithinThisItem;
       if (((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
         if (currentItem.isReady()) {
-          progressWithinThisItem = getScrollPercentageWithinItem(context, currentPosition, currentItem);
+          progressWithinThisItem = getScrollPercentageWithinItem(
+            context,
+            currentPosition,
+            currentItem
+          );
         } else {
           progressWithinThisItem = 0;
         }
@@ -6189,9 +6862,21 @@
       const { height, width } = currentItem.getElementDimensions();
       const { top, left } = reader.spineItemManager.getAbsolutePositionOf(currentItem);
       if (reader.settings.settings.computedPageTurnDirection === `vertical`) {
-        return Math.max(0, Math.min(1, (currentPosition.y - top + context.state.visibleAreaRect.height) / height));
+        return Math.max(
+          0,
+          Math.min(
+            1,
+            (currentPosition.y - top + context.state.visibleAreaRect.height) / height
+          )
+        );
       } else {
-        return Math.max(0, Math.min(1, (currentPosition.x - left + context.state.visibleAreaRect.width) / width));
+        return Math.max(
+          0,
+          Math.min(
+            1,
+            (currentPosition.x - left + context.state.visibleAreaRect.width) / width
+          )
+        );
       }
     };
     return {
@@ -6251,19 +6936,25 @@
   const webkitEnhancer = (createReader2) => (options) => {
     const reader = createReader2(options);
     if (IS_SAFARI) {
-      reader.hookManager.register("viewportNavigator.onBeforeContainerCreated", ({ element }) => {
-        element.style.cssText = `
+      reader.hookManager.register(
+        "viewportNavigator.onBeforeContainerCreated",
+        ({ element }) => {
+          element.style.cssText = `
           ${element.style.cssText}
           -webkit-transform-style: preserve-3d;
         `;
-      });
-      reader.hookManager.register("item.onBeforeContainerCreated", ({ element }) => {
-        element.style.cssText = `
+        }
+      );
+      reader.hookManager.register(
+        "item.onBeforeContainerCreated",
+        ({ element }) => {
+          element.style.cssText = `
         ${element.style.cssText}
         -webkit-transform-style: preserve-3d;
         -webkit-backface-visibility: hidden;
       `;
-      });
+        }
+      );
     }
     return reader;
   };
@@ -6294,14 +6985,20 @@
       operators.tap(({ width, theme }) => {
         Object.values(entries).forEach((element) => {
           element.style.setProperty(`max-width`, `${width}px`);
-          element.style.setProperty(`color`, theme === `sepia` ? `#939393` : `rgb(202, 202, 202)`);
+          element.style.setProperty(
+            `color`,
+            theme === `sepia` ? `#939393` : `rgb(202, 202, 202)`
+          );
         });
       })
     );
     const updateEntriesVisibility$ = (entries) => reader.spineItemManager.$.itemIsReady$.pipe(
       operators.tap(({ item, isReady }) => {
         var _a;
-        (_a = entries[item.id]) == null ? void 0 : _a.style.setProperty(`visibility`, isReady ? `hidden` : `visible`);
+        (_a = entries[item.id]) == null ? void 0 : _a.style.setProperty(
+          `visibility`,
+          isReady ? `hidden` : `visible`
+        );
       })
     );
     const destroyEntries$ = (entries) => reader.spine.$.itemsBeforeDestroy$.pipe(
@@ -6317,7 +7014,12 @@
     );
     items$.pipe(
       operators.switchMap((entries) => rxjs.merge(rxjs.of(entries), destroyEntries$(entries))),
-      operators.switchMap((entries) => rxjs.merge(updateEntriesLayout$(entries), updateEntriesVisibility$(entries))),
+      operators.switchMap(
+        (entries) => rxjs.merge(
+          updateEntriesLayout$(entries),
+          updateEntriesVisibility$(entries)
+        )
+      ),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
     return {
@@ -6387,7 +7089,8 @@
       const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue();
       const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event);
       const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
-      if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame) return event;
+      if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame)
+        return event;
       const spineItem = locator.getSpineItemFromIframe(originalFrame);
       if (!spineItem) return event;
       if (isPointerEvent(event)) {
@@ -6398,7 +7101,10 @@
           clientX,
           clientY
         });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        Object.defineProperty(newEvent, `target`, {
+          value: iframeOriginalEvent.target,
+          enumerable: true
+        });
         return newEvent;
       }
       if (isMouseEvent(event)) {
@@ -6408,7 +7114,10 @@
           clientX,
           clientY
         });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        Object.defineProperty(newEvent, `target`, {
+          value: iframeOriginalEvent.target,
+          enumerable: true
+        });
         return newEvent;
       }
       if (isTouchEvent(event)) {
@@ -6426,7 +7135,10 @@
           changedTouches: touches,
           targetTouches: touches
         });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        Object.defineProperty(newEvent, `target`, {
+          value: iframeOriginalEvent.target,
+          enumerable: true
+        });
         return newEvent;
       }
       return event;
@@ -6567,6 +7279,7 @@
   );
   exports2.HookManager = HookManager;
   exports2.Report = Report;
+  exports2.SettingsManager = SettingsManager;
   exports2.createReader = createReaderWithEnhancers;
   exports2.groupBy = groupBy;
   exports2.isShallowEqual = isShallowEqual;