@prose-reader/core 1.60.0 → 1.62.0

package/dist/index.js

@@ -1,11 +1,3 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _context;
 import { takeUntil, Subject, combineLatest, map as map$1, switchMap, merge, EMPTY, fromEvent, withLatestFrom, NEVER, Observable, of, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, startWith as startWith$1, BehaviorSubject, filter as filter$1, debounceTime, combineLatestWith, tap as tap$1, shareReplay as shareReplay$1, from, interval, iif, identity, take as take$1, forkJoin } from "rxjs";
 import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, filter, take, distinctUntilChanged, takeUntil as takeUntil$1, skip, withLatestFrom as withLatestFrom$1, share, exhaustMap, mergeMap, catchError, debounce, debounceTime as debounceTime$1, delay } from "rxjs/operators";
 import { parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
@@ -95,8 +87,15 @@ function shallowMergeIfDefined(obj1, obj2) {
 class SettingsManagerOverload {
   constructor(initialSettings, settingsManager) {
     this.settingsManager = settingsManager;
-    this.inputSettings = shallowMergeIfDefined(this.getDefaultSettings(), initialSettings);
-    this.outputSettings = this.computeOutputSettings();
+    const inputSettings = shallowMergeIfDefined(
+      this.getDefaultSettings(),
+      initialSettings
+    );
+    this.outputSettings = this.computeOutputSettings(inputSettings);
+    this.inputSettings = shallowMergeIfDefined(
+      this.getDefaultSettings(),
+      initialSettings
+    );
     this.outputSettingsUpdateSubject = new Subject();
     this.settings$ = combineLatest([
       this.settingsManager.settings$,
@@ -110,18 +109,22 @@ class SettingsManagerOverload {
   _prepareUpdate(settings) {
     const parentInputSettings = this.getCleanedParentInputSettings(settings);
     const parentManagerPreparedUpdate = this.settingsManager._prepareUpdate(parentInputSettings);
-    this.inputSettings = { ...this.inputSettings, ...settings };
-    const outputSettings = this.computeOutputSettings();
+    const inputSettings = shallowMergeIfDefined(this.inputSettings, settings);
+    const outputSettings = this.computeOutputSettings(inputSettings);
     const hasChanged = this.hasSettingsChanged(outputSettings);
-    console.log({ outputSettings, hasChanged, parentManagerPreparedUpdate });
     return {
       hasChanged: hasChanged || parentManagerPreparedUpdate.hasChanged,
       commit: () => {
+        this.inputSettings = inputSettings;
         this.outputSettings = outputSettings;
         if (!parentManagerPreparedUpdate.hasChanged && hasChanged) {
           this.outputSettingsUpdateSubject.next(outputSettings);
         }
-        parentManagerPreparedUpdate.commit();
+        const parentOutputSettings = parentManagerPreparedUpdate.commit();
+        return {
+          ...parentOutputSettings,
+          ...outputSettings
+        };
       }
     };
   }
@@ -139,9 +142,9 @@ class SettingsManagerOverload {
     this.outputSettingsUpdateSubject.complete();
   }
 }
-let SettingsManager$1 = class SettingsManager extends SettingsManagerOverload {
-  computeOutputSettings() {
-    return this.inputSettings;
+let SettingsManager$2 = class SettingsManager extends SettingsManagerOverload {
+  computeOutputSettings(settings) {
+    return settings;
   }
   hasSettingsChanged(newOutputSettings) {
     return !isShallowEqual(this.outputSettings, newOutputSettings);
@@ -163,7 +166,7 @@ const fontsEnhancer = (next) => (options) => {
   const { fontScale, lineHeight, fontWeight, fontJustification } = options;
   const changes$ = new Subject();
   const reader = next(options);
-  const settingsManager = new SettingsManager$1(
+  const settingsManager = new SettingsManager$2(
     {
       fontScale,
       lineHeight,
@@ -216,7 +219,11 @@ const fontsEnhancer = (next) => (options) => {
       return false;
     })
   );
-  settingsManager.settings$.pipe(shouldRequireLayout, tap(applyChangeToSpineItem), takeUntil(reader.$.destroy$)).subscribe();
+  settingsManager.settings$.pipe(
+    shouldRequireLayout,
+    tap(applyChangeToSpineItem),
+    takeUntil(reader.$.destroy$)
+  ).subscribe();
   return {
     ...reader,
     destroy: () => {
@@ -257,7 +264,9 @@ const hotkeysEnhancer = (next) => (options) => {
       (spineItems) => merge(
         ...spineItems.map(
           (item) => item.$.loaded$.pipe(
-            switchMap((iframe) => (iframe == null ? void 0 : iframe.contentDocument) ? navigateOnKey(iframe.contentDocument) : EMPTY)
+            switchMap(
+              (iframe) => (iframe == null ? void 0 : iframe.contentDocument) ? navigateOnKey(iframe.contentDocument) : EMPTY
+            )
           )
         )
       )
@@ -291,14 +300,24 @@ const createMovingSafePan$ = (reader) => {
   );
   const createResetLock$ = (source) => scheduled(source, animationFrameScheduler).pipe(
     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(filter((data) => data === `free`));
-  const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(filter((data) => data === `busy`));
+  const viewportFree$ = reader.viewportNavigator.$.state$.pipe(
+    filter((data) => data === `free`)
+  );
+  const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(
+    filter((data) => data === `busy`)
+  );
   const lockAfterViewportBusy$ = viewportBusy$.pipe(
     tap(() => {
-      iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `visible`);
+      iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(
+        `visibility`,
+        `visible`
+      );
     })
   );
   const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(take(1));
@@ -331,34 +350,48 @@ const mapKeysTo = (keys) => {
   });
 };
 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;
 }
-class SettingsManager2 extends SettingsManagerOverload {
-  computeOutputSettings() {
-    return this.inputSettings;
+let SettingsManager$1 = class SettingsManager2 extends SettingsManagerOverload {
+  computeOutputSettings(inputSettings) {
+    return inputSettings;
   }
   hasSettingsChanged(newOutputSettings) {
     return !isShallowEqual(this.outputSettings, newOutputSettings);
   }
   getCleanedParentInputSettings(settings) {
-    const { layoutAutoResize, pageHorizontalMargin, pageVerticalMargin, ...rest } = 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() {
@@ -368,12 +401,12 @@ class SettingsManager2 extends SettingsManagerOverload {
       pageVerticalMargin: 24
     };
   }
-}
+};
 const SHOULD_NOT_LAYOUT = false;
 const layoutEnhancer = (next) => (options) => {
   const { pageHorizontalMargin, pageVerticalMargin, layoutAutoResize } = options;
   const reader = next(options);
-  const settingsManager = new SettingsManager2(
+  const settingsManager = new SettingsManager$1(
     {
       pageHorizontalMargin,
       pageVerticalMargin,
@@ -391,24 +424,26 @@ const layoutEnhancer = (next) => (options) => {
       return SHOULD_NOT_LAYOUT;
     });
   });
-  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`,
-        `
+  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;
@@ -427,9 +462,10 @@ const layoutEnhancer = (next) => (options) => {
             max-width: ${columnWidth}px;
           }
         `
-      );
+        );
+      }
     }
-  });
+  );
   fixReflowable(reader);
   let observer;
   if (options.layoutAutoResize === `container`) {
@@ -480,7 +516,10 @@ const time = (name, targetDuration = 0) => {
   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) => ({
@@ -496,7 +535,8 @@ const createReport = (namespace) => ({
   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);
     }
   },
@@ -561,7 +601,9 @@ const linksEnhancer = (next) => (options) => {
     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;
@@ -576,7 +618,11 @@ const linksEnhancer = (next) => (options) => {
             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
+            });
           }
         })
       );
@@ -617,14 +663,16 @@ const createNavigator = (reader) => {
     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();
       }
@@ -662,17 +710,24 @@ const navigationEnhancer = (next) => (options) => {
   };
 };
 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 = {
@@ -717,7 +772,9 @@ const trackChapterInfo = (reader) => {
   );
 };
 const NAMESPACE$6 = `pagination`;
-const createPagination = ({ context }) => {
+const createPagination = ({
+  context
+}) => {
   const paginationSubject$ = new BehaviorSubject({
     beginPageIndexInSpineItem: void 0,
     beginNumberOfPagesInSpineItem: 0,
@@ -770,7 +827,9 @@ const createPagination = ({ context }) => {
   const getPaginationInfo = () => paginationSubject$.value;
   const paginationInfo$ = paginationSubject$.pipe(
     distinctUntilChanged$1(isShallowEqual),
-    filter$1(({ beginPageIndexInSpineItem }) => beginPageIndexInSpineItem !== void 0)
+    filter$1(
+      ({ beginPageIndexInSpineItem }) => beginPageIndexInSpineItem !== void 0
+    )
   );
   const destroy = () => {
     paginationSubject$.complete();
@@ -794,10 +853,14 @@ const calculateNumberOfPagesForItem = (itemWidth, pageWidth) => {
 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;
@@ -805,9 +868,15 @@ const getSpineItemNumberOfPages = ({ spineItem, reader }) => {
     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 });
@@ -823,7 +892,10 @@ const trackTotalPages = (reader) => {
         /**
          * 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
+        )
       };
     }),
     distinctUntilChanged$1(isShallowEqual),
@@ -880,7 +952,10 @@ const trackPaginationInfo = (reader) => {
   const totalPages$ = trackTotalPages(reader);
   const currentValue = new BehaviorSubject({
     ...reader.pagination.getPaginationInfo(),
-    ...mapPaginationInfoToExtendedInfo(reader)(reader.pagination.getPaginationInfo(), getChaptersInfo(reader)),
+    ...mapPaginationInfoToExtendedInfo(reader)(
+      reader.pagination.getPaginationInfo(),
+      getChaptersInfo(reader)
+    ),
     beginAbsolutePageIndex: 0,
     endAbsolutePageIndex: 0,
     numberOfTotalPages: 0
@@ -900,8 +975,14 @@ const trackPaginationInfo = (reader) => {
     map$1(([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
+      )
     })),
     tap$1((value) => {
       currentValue.next(value);
@@ -943,9 +1024,13 @@ const defaultThemes = [
 ];
 const themeEnhancer = (next) => (options) => {
   const reader = next(options);
-  const currentThemeSubject$ = new BehaviorSubject(options.theme ?? `bright`);
+  const currentThemeSubject$ = new 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;` : ``}
@@ -962,21 +1047,30 @@ const themeEnhancer = (next) => (options) => {
         ` : ``}
     `;
   };
-  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);
@@ -987,7 +1081,11 @@ const themeEnhancer = (next) => (options) => {
     });
   });
   reader.spine.$.spineItems$.pipe(
-    tap((items) => items.map(({ element }) => applyChangeToSpineItemElement({ container: element }))),
+    tap(
+      (items) => items.map(
+        ({ element }) => applyChangeToSpineItemElement({ container: element })
+      )
+    ),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
   currentThemeSubject$.pipe(
@@ -1054,7 +1152,9 @@ const createElementZoomer = (reader) => {
   };
   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 };
@@ -1150,7 +1250,9 @@ const createViewportZoomer = (reader) => {
     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;
@@ -1259,7 +1361,9 @@ const zoomEnhancer = (next) => (options) => {
       isUsingScrollableZoom: isUsingScrollableViewport,
       setCurrentScaleAsBase,
       $: {
-        isZooming$: currentZoomerSubject$.pipe(switchMap((zoomer) => (zoomer == null ? void 0 : zoomer.isZooming$) || of(false)))
+        isZooming$: currentZoomerSubject$.pipe(
+          switchMap((zoomer) => (zoomer == null ? void 0 : zoomer.isZooming$) || of(false))
+        )
       }
     }
   };
@@ -1406,15 +1510,21 @@ const getOriginalFrameEventFromDocumentEvent = (event) => {
   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;
@@ -1423,8 +1533,9 @@ const createFrame$ = Report.measurePerformance(`SpineItemFrame createFrame`, Inf
     transition: opacity 300ms;
     opacity: 0;
   `;
-  return of(frame);
-});
+    return of(frame);
+  }
+);
 const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
   const image = new Image();
   image.src = data;
@@ -1436,7 +1547,9 @@ const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reje
 const createHtmlPageFromResource = async (resourceResponse, item) => {
   if (typeof resourceResponse === `string`) return resourceResponse;
   const contentType = parseContentType(resourceResponse.headers.get(`Content-Type`) || ``) || 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 `
@@ -1479,7 +1592,6 @@ const createHtmlPageFromResource = async (resourceResponse, item) => {
 const createLoader = ({
   item,
   parent,
-  fetchResource,
   context,
   viewportState$,
   settings,
@@ -1524,9 +1636,17 @@ const createLoader = ({
         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 of(frame);
           } else {
@@ -1540,7 +1660,9 @@ const createLoader = ({
               }),
               map(() => frame),
               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 of(frame);
               })
@@ -1568,8 +1690,12 @@ const createLoader = ({
               const hookResults = hookManager.execute(`item.onLoad`, item.id, {
                 itemId: item.id,
                 frame
-              }).filter((result) => result instanceof Observable);
-              return combineLatest([of(null), ...hookResults]).pipe(map(() => frame));
+              }).filter(
+                (result) => result instanceof Observable
+              );
+              return combineLatest([of(null), ...hookResults]).pipe(
+                map(() => frame)
+              );
             })
           );
         }),
@@ -1582,10 +1708,14 @@ const createLoader = ({
     takeUntil$1(destroySubject$)
   );
   const ready$ = load$.pipe(
-    switchMap$1((frame) => {
-      var _a;
-      return from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || of(void 0)).pipe(takeUntil$1(unloadSubject$));
-    }),
+    switchMap$1(
+      (frame) => {
+        var _a;
+        return from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || of(void 0)).pipe(
+          takeUntil$1(unloadSubject$)
+        );
+      }
+    ),
     share(),
     makeItHot,
     takeUntil$1(destroySubject$)
@@ -1626,7 +1756,6 @@ const createFrameManipulator = (frameElement) => ({
 const createFrameItem = ({
   item,
   parent,
-  fetchResource,
   context,
   viewportState$,
   settings,
@@ -1634,12 +1763,27 @@ const createFrameItem = ({
 }) => {
   const destroySubject$ = new 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({
@@ -1667,7 +1811,10 @@ const createFrameItem = ({
         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,
@@ -1742,7 +1889,8 @@ const createFrameItem = ({
         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,
@@ -1814,7 +1962,10 @@ const createSelectionTracker = () => {
     });
     (_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;
@@ -1829,7 +1980,8 @@ const createSelectionTracker = () => {
     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()
@@ -1844,7 +1996,11 @@ const createCommonSpineItem = ({
   hookManager
 }) => {
   const destroySubject$ = new 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();
@@ -1883,7 +2039,11 @@ const createCommonSpineItem = ({
     (_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 {
@@ -1907,7 +2067,10 @@ const createCommonSpineItem = ({
     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 };
     }
   };
@@ -1960,7 +2123,11 @@ const createCommonSpineItem = ({
   }) => {
     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) => {
@@ -2174,8 +2341,14 @@ const createPrePaginatedSpineItem = ({
         }
         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);
@@ -2195,11 +2368,21 @@ const createPrePaginatedSpineItem = ({
         }
       }
       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 };
   };
@@ -2328,19 +2511,27 @@ const createReflowableSpineItem = ({
           `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,
@@ -2354,7 +2545,9 @@ const createReflowableSpineItem = ({
             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 {
@@ -2375,13 +2568,23 @@ const createReflowableSpineItem = ({
       } 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 {
@@ -2701,7 +2904,10 @@ class CFI {
     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) {
@@ -2769,7 +2975,8 @@ class CFI {
     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;
@@ -2872,7 +3079,8 @@ class CFI {
     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);
     }
@@ -3057,10 +3265,13 @@ class CFI {
         }
         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;
             }
           }
@@ -3123,7 +3334,8 @@ class CFI {
       }
       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
@@ -3161,7 +3373,11 @@ class CFI {
               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;
@@ -3248,7 +3464,8 @@ class CFI {
       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;
     }
@@ -3277,7 +3494,12 @@ class CFI {
     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;
       }
@@ -3289,9 +3511,22 @@ class CFI {
     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
+          );
         }
       }
     }
@@ -3333,12 +3568,14 @@ class CFI {
     }
     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`);
@@ -3510,17 +3747,26 @@ const createSpine = ({
                 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
@@ -3529,7 +3775,10 @@ const createSpine = ({
                 {
                   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
@@ -3566,7 +3815,11 @@ const createSpine = ({
               () => fingerTracker$.pipe(
                 filter(({ event: event2 }) => event2 === `fingermove`),
                 debounce(() => interval(1e3)),
-                takeUntil$1(fingerTracker$.pipe(filter(({ event: event2 }) => event2 === `fingerout`))),
+                takeUntil$1(
+                  fingerTracker$.pipe(
+                    filter(({ event: event2 }) => event2 === `fingerout`)
+                  )
+                ),
                 tap(({ data }) => {
                 })
               )
@@ -3603,12 +3856,18 @@ const createSpine = ({
           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(
           {
@@ -3667,7 +3926,9 @@ const createSpine = ({
   );
   itemUpdateOnNavigation$.pipe(
     switchMap$1((data) => {
-      return adjustPagination(data.position).pipe(takeUntil$1(spineItemManager.$.layout$));
+      return adjustPagination(data.position).pipe(
+        takeUntil$1(spineItemManager.$.layout$)
+      );
     }),
     takeUntil$1(context.destroy$)
   ).subscribe();
@@ -3691,10 +3952,20 @@ const createSpine = ({
           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]);
           }
@@ -3753,7 +4024,10 @@ const createContainerElement = (doc) => {
   return element;
 };
 const NAMESPACE$4 = `spineItemManager`;
-const createSpineItemManager = ({ context, settings }) => {
+const createSpineItemManager = ({
+  context,
+  settings
+}) => {
   const focus$ = new Subject();
   const layout$ = new Subject();
   let itemLayoutInformation = [];
@@ -3864,30 +4138,36 @@ const createSpineItemManager = ({ context, settings }) => {
     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);
@@ -3972,7 +4252,9 @@ const createSpineItemManager = ({ context, settings }) => {
       itemIsReady$: orderedSpineItemsSubject$.asObservable().pipe(
         switchMap$1((items) => {
           const itemsIsReady$ = items.map(
-            (item) => item.$.isReady$.pipe(map((isReady) => ({ item: item.item, isReady })))
+            (item) => item.$.isReady$.pipe(
+              map((isReady) => ({ item: item.item, isReady }))
+            )
           );
           return merge(...itemsIsReady$);
         })
@@ -4043,7 +4325,10 @@ const getFirstVisibleNodeForViewport = Report.measurePerformance(
 );
 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;
   }
@@ -4059,7 +4344,8 @@ const getFirstVisibleElementForViewport = (element, viewport) => {
 };
 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`;
@@ -4143,19 +4429,33 @@ const isTouchEvent = (event) => {
 };
 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,
@@ -4174,7 +4474,10 @@ const createLocationResolver$1 = ({ context }) => {
     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);
@@ -4188,7 +4491,11 @@ const createLocationResolver$1 = ({ context }) => {
     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;
@@ -4202,7 +4509,11 @@ const createLocationResolver$1 = ({ context }) => {
     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;
@@ -4213,14 +4524,20 @@ const createLocationResolver$1 = ({ context }) => {
     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;
@@ -4228,8 +4545,16 @@ const createLocationResolver$1 = ({ context }) => {
   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;
   };
@@ -4263,7 +4588,9 @@ class SpineItemNavigationPosition {
     this.y = position.y;
   }
 }
-const createNavigationResolver$1 = ({ context }) => {
+const createNavigationResolver$1 = ({
+  context
+}) => {
   const spineItemLocator = createLocationResolver$1({ context });
   const getNavigationForLeftPage = (position, spineItem) => {
     let nextPotentialPosition = {
@@ -4302,20 +4629,33 @@ const createNavigationResolver$1 = ({ context }) => {
   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) => {
@@ -4349,8 +4689,12 @@ const createNavigationResolver = ({
     `${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()) {
@@ -4367,7 +4711,10 @@ const createNavigationResolver = ({
     },
     { 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 };
@@ -4379,7 +4726,10 @@ const createNavigationResolver = ({
       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 };
@@ -4389,13 +4739,22 @@ const createNavigationResolver = ({
       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) => {
@@ -4413,9 +4772,15 @@ const createNavigationResolver = ({
     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 }
@@ -4435,15 +4800,27 @@ const createNavigationResolver = ({
     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;
     }
   };
@@ -4485,7 +4862,10 @@ const createNavigationResolver = ({
       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
+            }
           )
         );
       }
@@ -4502,7 +4882,9 @@ const createNavigationResolver = ({
     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) {
@@ -4517,15 +4899,27 @@ const createNavigationResolver = ({
     }
   };
   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 };
@@ -4535,7 +4929,10 @@ const createNavigationResolver = ({
     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, from2) => {
@@ -4630,7 +5027,10 @@ const createScrollViewportNavigator = ({
   };
   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(
     debounceTime$1(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
@@ -4638,9 +5038,16 @@ const createScrollViewportNavigator = ({
     switchMap$1(() => {
       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 of({ position: navigation, animate: false, lastUserExpectedNavigation: void 0 });
+      return of({
+        position: navigation,
+        animate: false,
+        lastUserExpectedNavigation: void 0
+      });
     }),
     share()
   );
@@ -4678,16 +5085,29 @@ const createManualViewportNavigator = ({
 }) => {
   const stateSubject$ = new BehaviorSubject(`end`);
   const navigationTriggerSubject$ = new 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(
     filter((e) => e.type === `url`),
@@ -4698,7 +5118,10 @@ const createManualViewportNavigator = ({
         return of({
           ...navigation,
           animate: true,
-          lastUserExpectedNavigation: { type: `navigate-from-anchor`, data: navigation.url.hash }
+          lastUserExpectedNavigation: {
+            type: `navigate-from-anchor`,
+            data: navigation.url.hash
+          }
         });
       }
       return EMPTY;
@@ -4708,7 +5131,9 @@ const createManualViewportNavigator = ({
     filter((e) => e.type === `spineItem`),
     switchMap$1(({ 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 of({ ...navigation, animate, lastUserExpectedNavigation });
     })
@@ -4721,7 +5146,10 @@ const createManualViewportNavigator = ({
       return {
         ...navigation,
         animate,
-        lastUserExpectedNavigation: { type: `navigate-from-cfi`, data: cfi }
+        lastUserExpectedNavigation: {
+          type: `navigate-from-cfi`,
+          data: cfi
+        }
       };
     })
   );
@@ -4731,7 +5159,11 @@ const createManualViewportNavigator = ({
       const spineItem = spineItemManager.getFocusedSpineItem();
       if (spineItem) {
         const navigation = navigator2.getNavigationForPage(pageIndex, spineItem);
-        return of({ ...navigation, lastUserExpectedNavigation: void 0, animate: true });
+        return of({
+          ...navigation,
+          lastUserExpectedNavigation: void 0,
+          animate: true
+        });
       }
       return EMPTY;
     })
@@ -4764,26 +5196,31 @@ const createManualViewportNavigator = ({
       const spineItemHasChanged = newSpineItem !== currentSpineItem;
       if (spineItemHasChanged) {
         if (allowSpineItemChange) {
-          const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(
-            newSpineItem,
-            currentSpineItem
-          );
+          const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(newSpineItem, currentSpineItem);
           if (positionOfNewSpineItemComparedToCurrentOne === `before`) {
             return of({
               ...navigation,
-              lastUserExpectedNavigation: { type: `navigate-from-next-item` },
+              lastUserExpectedNavigation: {
+                type: `navigate-from-next-item`
+              },
               animate: true
             });
           } else {
             return of({
               ...navigation,
-              lastUserExpectedNavigation: { type: `navigate-from-previous-item` },
+              lastUserExpectedNavigation: {
+                type: `navigate-from-previous-item`
+              },
               animate: true
             });
           }
         }
       } else {
-        return of({ ...navigation, lastUserExpectedNavigation: void 0, animate: true });
+        return of({
+          ...navigation,
+          lastUserExpectedNavigation: void 0,
+          animate: true
+        });
       }
       return EMPTY;
     }
@@ -4799,7 +5236,11 @@ const createManualViewportNavigator = ({
         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 });
       }
     )
@@ -4815,7 +5256,11 @@ const createManualViewportNavigator = ({
         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 });
       }
     )
@@ -4835,7 +5280,9 @@ const createManualViewportNavigator = ({
      * navigation would theoretically always move to different items.
      */
     withLatestFrom$1(currentNavigationSubject$),
-    filter(([navigation, currentNavigation]) => navigator2.areNavigationDifferent(navigation, currentNavigation)),
+    filter(
+      ([navigation, currentNavigation]) => navigator2.areNavigationDifferent(navigation, currentNavigation)
+    ),
     map(([navigation]) => navigation)
   );
   return {
@@ -4926,7 +5373,10 @@ const createPanViewportNavigator = ({
       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` };
@@ -4956,7 +5406,9 @@ const createPanViewportNavigator = ({
           x: triggerXPosition,
           y: triggerYPosition
         });
-        const finalNavigation = navigator2.getNavigationForPosition(midScreenPositionSafePosition);
+        const finalNavigation = navigator2.getNavigationForPosition(
+          midScreenPositionSafePosition
+        );
         const lastUserExpectedNavigation = getLastUserExpectedNavigation(finalNavigation);
         return of({ ...finalNavigation, lastUserExpectedNavigation });
       }
@@ -5008,23 +5460,30 @@ const createViewportNavigator = ({
     locator: spineLocator
   });
   const adjustNavigationSubject$ = new 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,
@@ -5050,8 +5509,14 @@ const createViewportNavigator = ({
     spineItemManager,
     locator: spineLocator
   });
-  const viewportNavigators = [scrollViewportNavigator, panViewportNavigator, manualViewportNavigator];
-  const viewportNavigatorsSharedState$ = merge(...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2));
+  const viewportNavigators = [
+    scrollViewportNavigator,
+    panViewportNavigator,
+    manualViewportNavigator
+  ];
+  const viewportNavigatorsSharedState$ = merge(
+    ...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2)
+  );
   let lastUserExpectedNavigation;
   const makeItHot = (source$) => {
     source$.pipe(takeUntil$1(context.destroy$)).subscribe();
@@ -5079,28 +5544,51 @@ const createViewportNavigator = ({
     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,
@@ -5124,7 +5612,11 @@ const createViewportNavigator = ({
     currentViewportPositionMemoUnused = void 0;
   });
   const layoutChangeSettings$ = settings.settings$.pipe(
-    mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
+    mapKeysTo([
+      `computedPageTurnDirection`,
+      `computedPageTurnMode`,
+      `numberOfAdjacentSpineItemToPreLoad`
+    ]),
     distinctUntilChanged(isShallowEqual),
     skip(1)
   );
@@ -5236,10 +5728,16 @@ const createViewportNavigator = ({
           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 {
@@ -5288,8 +5786,13 @@ const createViewportNavigator = ({
     merge(manualAdjust$).pipe(map(() => `start`)),
     merge(processManualAdjust$).pipe(map(() => `end`))
   );
-  const state$ = combineLatest([...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2), adjustmentState$]).pipe(
-    map((states) => states.every((state) => state === `end`) ? `free` : `busy`),
+  const state$ = combineLatest([
+    ...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2),
+    adjustmentState$
+  ]).pipe(
+    map(
+      (states) => states.every((state) => state === `end`) ? `free` : `busy`
+    ),
     distinctUntilChanged(),
     shareReplay(1),
     /**
@@ -5379,7 +5882,9 @@ const createElement = (doc, hookManager) => {
     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 = ({
@@ -5438,8 +5943,14 @@ const createLocationResolver = ({
     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) => {
@@ -5448,7 +5959,10 @@ const createLocationResolver = ({
     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()
@@ -5476,9 +5990,17 @@ const createLocationResolver = ({
   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,
@@ -5496,18 +6018,29 @@ const createCfiLocator = ({
   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}) `;
@@ -5554,9 +6087,22 @@ const createCfiLocator = ({
       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 {
@@ -5568,19 +6114,57 @@ const createCfiLocator = ({
     generateFromRange
   };
 };
-class ReaderSettingsManager {
-  constructor(initialSettings, context) {
-    __privateAdd(this, _context);
-    __privateSet(this, _context, context);
+class SettingsManager3 {
+  constructor(initialSettings) {
     const settingsWithDefaults = {
       ...this.getDefaultSettings(),
       ...initialSettings
     };
-    const outputSettings = this.getOutputSettings(settingsWithDefaults);
-    this.outputSettings = outputSettings;
+    this.inputSettings = settingsWithDefaults;
     this.outputSettingsUpdateSubject = new Subject();
-    this.settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(startWith(this.settings), shareReplay(1));
-    const recomputeSettingsOnContextChange$ = combineLatest([context.hasVerticalWriting$, context.manifest$]).pipe(
+    this.settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(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 SettingsManager3 {
+  constructor(initialSettings, context) {
+    super(initialSettings);
+    this.context = context;
+    const recomputeSettingsOnContextChange$ = combineLatest([
+      context.hasVerticalWriting$,
+      context.manifest$
+    ]).pipe(
       tap(() => {
         this.update(this.settings);
       })
@@ -5594,8 +6178,8 @@ class ReaderSettingsManager {
     this.settings$.subscribe();
   }
   getComputedSettings(settings) {
-    const manifest = __privateGet(this, _context).manifest;
-    const hasVerticalWriting = __privateGet(this, _context).state.hasVerticalWriting ?? false;
+    const manifest = this.context.manifest;
+    const hasVerticalWriting = this.context.state.hasVerticalWriting ?? false;
     const computedSettings = {
       computedPageTurnDirection: settings.pageTurnDirection,
       computedPageTurnAnimation: settings.pageTurnAnimation,
@@ -5606,7 +6190,9 @@ class ReaderSettingsManager {
       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`);
+      Report.warn(
+        `pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`
+      );
       computedSettings.computedPageTurnAnimation = `none`;
       computedSettings.computedPageTurnMode = `controlled`;
     } else if (settings.pageTurnMode === `scrollable`) {
@@ -5627,22 +6213,8 @@ class ReaderSettingsManager {
     }
     return computedSettings;
   }
-  _prepareUpdate(settings) {
-    const state = this.getOutputSettings(settings);
-    const hasChanged = !isShallowEqual(this.outputSettings, state);
-    return {
-      hasChanged,
-      state,
-      commit: () => {
-        this.outputSettings = state;
-        if (hasChanged) {
-          this.outputSettingsUpdateSubject.next(state);
-        }
-      }
-    };
-  }
   getOutputSettings(inputSettings) {
-    const computedSettings = this.getComputedSettings({ ...this.outputSettings, ...inputSettings });
+    const computedSettings = this.getComputedSettings(inputSettings);
     return { ...this.outputSettings, ...inputSettings, ...computedSettings };
   }
   getDefaultSettings() {
@@ -5661,18 +6233,7 @@ class ReaderSettingsManager {
       numberOfAdjacentSpineItemToPreLoad: 0
     };
   }
-  update(settings) {
-    const { commit } = this._prepareUpdate(settings);
-    commit();
-  }
-  get settings() {
-    return this.outputSettings;
-  }
-  destroy() {
-    this.outputSettingsUpdateSubject.complete();
-  }
 }
-_context = new WeakMap();
 class HookManager {
   constructor() {
     this._hooks = [];
@@ -5703,7 +6264,9 @@ class HookManager {
     };
   }
   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 = () => of(void 0);
       const destroySubject = new Subject();
@@ -5716,7 +6279,11 @@ class HookManager {
         const result = userDestroyFn();
         return result ?? 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,
@@ -5735,7 +6302,9 @@ class HookManager {
         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 combineLatest(destroyFns);
   }
@@ -5756,9 +6325,14 @@ const createReader = (inputSettings) => {
   const hookManager = new HookManager();
   const context = new Context();
   const settingsManager = new ReaderSettingsManager(inputSettings, context);
-  const spineItemManager = createSpineItemManager({ context, settings: settingsManager });
+  const spineItemManager = createSpineItemManager({
+    context,
+    settings: settingsManager
+  });
   const pagination = createPagination({ context, spineItemManager });
-  const elementSubject$ = new BehaviorSubject(void 0);
+  const elementSubject$ = new BehaviorSubject(
+    void 0
+  );
   const element$ = elementSubject$.pipe(filter(isDefined));
   const spineItemLocator = createLocationResolver$1({ context });
   const spineLocator = createLocationResolver({
@@ -5801,8 +6375,12 @@ const createReader = (inputSettings) => {
   });
   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;
@@ -5844,7 +6422,11 @@ const createReader = (inputSettings) => {
       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 });
@@ -5929,7 +6511,9 @@ const createReader = (inputSettings) => {
        * have an effect.
        * It can typically be used to hide a loading indicator.
        */
-      loadStatus$: context.manifest$.pipe(map((manifest) => manifest ? "ready" : "idle")),
+      loadStatus$: context.manifest$.pipe(
+        map((manifest) => manifest ? "ready" : "idle")
+      ),
       /**
        * Dispatched when a change in selection happens
        */
@@ -6096,7 +6680,9 @@ const createResourcesManager = (context) => {
     mergeMap(({ id, data }) => {
       const item = retrieveItem(id);
       if (!item) return EMPTY;
-      return from(forkJoin([openDatabase(`prose-reader`), from(data.blob())])).pipe(
+      return from(
+        forkJoin([openDatabase(`prose-reader`), from(data.blob())])
+      ).pipe(
         switchMap$1(([db, blob]) => {
           return from(db.put(`${uniqueID}_${item.id}`, blob));
         }),
@@ -6119,7 +6705,9 @@ const createResourcesManager = (context) => {
       return from(openDatabase(`prose-reader`)).pipe(
         switchMap$1(
           (db) => from(db.keys()).pipe(
-            map((keys) => keys.filter((key) => !key.toString().startsWith(uniqueID))),
+            map(
+              (keys) => keys.filter((key) => !key.toString().startsWith(uniqueID))
+            ),
             switchMap$1((keysToRemove) => {
               const promises = keysToRemove.map((key) => db.remove(key));
               return from(Promise.all(promises));
@@ -6166,7 +6754,9 @@ const mediaEnhancer = (next) => (options) => {
       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();
@@ -6245,7 +6835,11 @@ const progressionEnhancer = (next) => (options) => {
     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;
       }
@@ -6267,9 +6861,21 @@ const progressionEnhancer = (next) => (options) => {
     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 {
@@ -6329,19 +6935,25 @@ const IS_SAFARI = navigator.userAgent.indexOf(``) > -1 && navigator.userAgent.in
 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;
 };
@@ -6372,14 +6984,20 @@ const loadingEnhancer = (next) => (options) => {
     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(
     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(
@@ -6395,7 +7013,12 @@ const loadingEnhancer = (next) => (options) => {
   );
   items$.pipe(
     switchMap$1((entries) => merge(of(entries), destroyEntries$(entries))),
-    switchMap$1((entries) => merge(updateEntriesLayout$(entries), updateEntriesVisibility$(entries))),
+    switchMap$1(
+      (entries) => merge(
+        updateEntriesLayout$(entries),
+        updateEntriesVisibility$(entries)
+      )
+    ),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
   return {
@@ -6465,7 +7088,8 @@ const createNormalizeEventForViewport = ({
     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)) {
@@ -6476,7 +7100,10 @@ const createNormalizeEventForViewport = ({
         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)) {
@@ -6486,7 +7113,10 @@ const createNormalizeEventForViewport = ({
         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)) {
@@ -6504,7 +7134,10 @@ const createNormalizeEventForViewport = ({
         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;
@@ -6646,6 +7279,7 @@ const createReaderWithEnhancers = (
 export {
   HookManager,
   Report,
+  SettingsManager3 as SettingsManager,
   createReaderWithEnhancers as createReader,
   groupBy,
   isShallowEqual