@prose-reader/core 1.59.0 → 1.61.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { takeUntil, Subject, BehaviorSubject, map, combineLatest, switchMap, merge, EMPTY, fromEvent, withLatestFrom as withLatestFrom$1, NEVER, Observable, of, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, startWith, 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 { withLatestFrom, distinctUntilChanged, shareReplay, tap, pairwise, switchMap as switchMap$1, filter, take, map as map$1, takeUntil as takeUntil$1, skip, share, exhaustMap, mergeMap, catchError, debounce, debounceTime as debounceTime$1, startWith as startWith$1, delay } from "rxjs/operators";
+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";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
@@ -72,21 +72,109 @@ const getBase64FromBlob = (data) => {
     reader.readAsDataURL(data);
   });
 };
+function shallowMergeIfDefined(obj1, obj2) {
+  const result = { ...obj1 };
+  for (const key in obj2) {
+    if (Object.prototype.hasOwnProperty.call(obj2, key)) {
+      const value = obj2[key];
+      if (value !== void 0 || !(key in obj1)) {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}
+class SettingsManagerOverload {
+  constructor(initialSettings, settingsManager) {
+    this.settingsManager = settingsManager;
+    const inputSettings = shallowMergeIfDefined(
+      this.getDefaultSettings(),
+      initialSettings
+    );
+    this.outputSettings = this.computeOutputSettings(inputSettings);
+    this.inputSettings = shallowMergeIfDefined(
+      this.getDefaultSettings(),
+      initialSettings
+    );
+    this.outputSettingsUpdateSubject = new Subject();
+    this.settings$ = combineLatest([
+      this.settingsManager.settings$,
+      this.outputSettingsUpdateSubject.pipe(startWith(this.outputSettings))
+    ]).pipe(
+      map(([parentSettings, settings]) => ({ ...parentSettings, ...settings })),
+      shareReplay(1)
+    );
+    this.settings$.subscribe();
+  }
+  _prepareUpdate(settings) {
+    const parentInputSettings = this.getCleanedParentInputSettings(settings);
+    const parentManagerPreparedUpdate = this.settingsManager._prepareUpdate(parentInputSettings);
+    const inputSettings = shallowMergeIfDefined(this.inputSettings, settings);
+    const outputSettings = this.computeOutputSettings(inputSettings);
+    const hasChanged = this.hasSettingsChanged(outputSettings);
+    return {
+      hasChanged: hasChanged || parentManagerPreparedUpdate.hasChanged,
+      commit: () => {
+        this.inputSettings = inputSettings;
+        this.outputSettings = outputSettings;
+        if (!parentManagerPreparedUpdate.hasChanged && hasChanged) {
+          this.outputSettingsUpdateSubject.next(outputSettings);
+        }
+        const parentOutputSettings = parentManagerPreparedUpdate.commit();
+        return {
+          ...parentOutputSettings,
+          ...outputSettings
+        };
+      }
+    };
+  }
+  update(settings) {
+    const { commit } = this._prepareUpdate(settings);
+    commit();
+  }
+  get settings() {
+    return {
+      ...this.settingsManager.settings,
+      ...this.outputSettings
+    };
+  }
+  destroy() {
+    this.outputSettingsUpdateSubject.complete();
+  }
+}
+let SettingsManager$2 = class SettingsManager extends SettingsManagerOverload {
+  computeOutputSettings(settings) {
+    return settings;
+  }
+  hasSettingsChanged(newOutputSettings) {
+    return !isShallowEqual(this.outputSettings, newOutputSettings);
+  }
+  getCleanedParentInputSettings(settings) {
+    const { fontJustification, fontScale, fontWeight, lineHeight, ...rest } = settings;
+    return rest;
+  }
+  getDefaultSettings() {
+    return {
+      fontScale: 1,
+      fontWeight: "publisher",
+      lineHeight: "publisher",
+      fontJustification: "publisher"
+    };
+  }
+};
 const fontsEnhancer = (next) => (options) => {
-  const {
-    fontScale = 1,
-    lineHeight = `publisher`,
-    fontWeight = `publisher`,
-    fontJustification = `publisher`
-  } = options;
+  const { fontScale, lineHeight, fontWeight, fontJustification } = options;
   const changes$ = new Subject();
-  const settings$ = new BehaviorSubject({
-    fontScale,
-    lineHeight,
-    fontWeight,
-    fontJustification
-  });
   const reader = next(options);
+  const settingsManager = new SettingsManager$2(
+    {
+      fontScale,
+      lineHeight,
+      fontWeight,
+      fontJustification
+    },
+    reader.settings
+  );
   const getStyle = () => `
     ${/*
         Ideally, we would like to use !important but it could break publisher specific
@@ -98,10 +186,10 @@ const fontsEnhancer = (next) => (options) => {
       */
   ``}
     body {
-      ${settings$.value.fontScale !== 1 ? `font-size: ${settings$.value.fontScale}em !important;` : ``}
-      ${settings$.value.lineHeight !== `publisher` ? `line-height: ${settings$.value.lineHeight} !important;` : ``}
-      ${settings$.value.fontWeight !== `publisher` ? `font-weight: ${settings$.value.fontWeight} !important;` : ``}
-      ${settings$.value.fontJustification !== `publisher` ? `text-align: ${settings$.value.fontJustification} !important;` : ``}
+      ${settingsManager.settings.fontScale !== 1 ? `font-size: ${settingsManager.settings.fontScale}em !important;` : ``}
+      ${settingsManager.settings.lineHeight !== `publisher` ? `line-height: ${settingsManager.settings.lineHeight} !important;` : ``}
+      ${settingsManager.settings.fontWeight !== `publisher` ? `font-weight: ${settingsManager.settings.fontWeight} !important;` : ``}
+      ${settingsManager.settings.fontJustification !== `publisher` ? `text-align: ${settingsManager.settings.fontJustification} !important;` : ``}
     }
   `;
   const applyChangeToSpineItem = (requireLayout) => {
@@ -125,55 +213,32 @@ const fontsEnhancer = (next) => (options) => {
   });
   const shouldRequireLayout = (source) => source.pipe(
     pairwise(),
-    map(([old, latest]) => {
+    map$1(([old, latest]) => {
       if (latest.fontScale !== old.fontScale) return true;
       if (latest.lineHeight !== old.lineHeight) return true;
       return false;
     })
   );
-  const newSettings$ = changes$.pipe(
-    withLatestFrom(settings$),
-    map(([changes, settings]) => ({
-      fontJustification: changes.fontJustification ?? settings.fontJustification,
-      fontWeight: changes.fontWeight ?? settings.fontWeight,
-      lineHeight: changes.lineHeight ?? settings.lineHeight,
-      fontScale: Math.max(0.01, changes.fontScale ?? settings.fontScale)
-    })),
-    distinctUntilChanged(isShallowEqual),
-    shareReplay(1)
-  );
-  newSettings$.subscribe(settings$);
-  settings$.pipe(shouldRequireLayout, tap(applyChangeToSpineItem), takeUntil(reader.$.destroy$)).subscribe();
-  const settingsMerge$ = combineLatest([reader.settings.settings$, settings$]).pipe(
-    map(([innerSettings, settings]) => ({
-      ...innerSettings,
-      ...settings
-    }))
-  );
-  const setSettings = (settings) => {
-    const { fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2, ...passthroughSettings } = settings;
-    changes$.next({ fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2 });
-    reader.settings.setSettings(passthroughSettings);
-  };
+  settingsManager.settings$.pipe(
+    shouldRequireLayout,
+    tap(applyChangeToSpineItem),
+    takeUntil(reader.$.destroy$)
+  ).subscribe();
   return {
     ...reader,
     destroy: () => {
       changes$.complete();
-      settings$.complete();
+      settingsManager.destroy();
       reader.destroy();
     },
-    settings: {
-      ...reader.settings,
-      setSettings,
-      settings$: settingsMerge$
-    }
+    settings: settingsManager
   };
 };
 const hotkeysEnhancer = (next) => (options) => {
   const reader = next(options);
   const navigateOnKey = (document2) => fromEvent(document2, "keyup").pipe(
-    withLatestFrom$1(reader.settings.settings$),
-    map(([e, { pageTurnDirection }]) => {
+    withLatestFrom(reader.settings.settings$),
+    map$1(([e, { pageTurnDirection }]) => {
       if (pageTurnDirection === "horizontal") {
         if (e.key === `ArrowRight`) {
           reader.viewportNavigator.turnRight();
@@ -199,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
+            )
           )
         )
       )
@@ -233,19 +300,29 @@ 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));
   const pageTurnMode$ = reader.settings.settings$.pipe(
-    map$1(() => reader.settings.settings.computedPageTurnMode),
+    map(() => reader.settings.settings.computedPageTurnMode),
     distinctUntilChanged()
   );
   const handleViewportLock$ = pageTurnMode$.pipe(
@@ -257,7 +334,7 @@ const createMovingSafePan$ = (reader) => {
   return merge(updateOverlayElement$, handleViewportLock$);
 };
 const mapKeysTo = (keys) => {
-  return map$1((obj) => {
+  return map((obj) => {
     return Object.entries(obj).reduce(
       (acc, [key, entry]) => {
         if (keys.includes(key)) {
@@ -273,33 +350,70 @@ 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;
 }
+let SettingsManager$1 = class SettingsManager2 extends SettingsManagerOverload {
+  computeOutputSettings(inputSettings) {
+    return inputSettings;
+  }
+  hasSettingsChanged(newOutputSettings) {
+    return !isShallowEqual(this.outputSettings, newOutputSettings);
+  }
+  getCleanedParentInputSettings(settings) {
+    const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      layoutAutoResize,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      pageHorizontalMargin,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      pageVerticalMargin,
+      ...rest
+    } = settings;
+    return rest;
+  }
+  getDefaultSettings() {
+    return {
+      layoutAutoResize: "container",
+      pageHorizontalMargin: 24,
+      pageVerticalMargin: 24
+    };
+  }
+};
 const SHOULD_NOT_LAYOUT = false;
 const layoutEnhancer = (next) => (options) => {
-  const { pageHorizontalMargin = 24, pageVerticalMargin = 24 } = options;
+  const { pageHorizontalMargin, pageVerticalMargin, layoutAutoResize } = options;
   const reader = next(options);
-  const settingsSubject$ = new BehaviorSubject({
-    pageHorizontalMargin,
-    pageVerticalMargin
-  });
+  const settingsManager = new SettingsManager$1(
+    {
+      pageHorizontalMargin,
+      pageVerticalMargin,
+      layoutAutoResize
+    },
+    reader.settings
+  );
   reader.hookManager.register(`onViewportOffsetAdjust`, () => {
     let hasRedrawn = false;
     reader.spine.manipulateSpineItems(({ frame }) => {
@@ -310,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 } = settingsSubject$.value;
-    const pageSize = reader.context.getPageSize();
-    if (item.renditionLayout === `reflowable` && frame.getIsReady() && !isImageType() && !frame.getViewportDimensions()) {
-      let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
-      const columnHeight = pageSize.height - pageVerticalMargin2 * 2;
-      let width = pageSize.width - pageHorizontalMargin2 * 2;
-      let columnGap = pageHorizontalMargin2 * 2;
-      if (frame.isUsingVerticalWriting()) {
-        width = minimumWidth - pageHorizontalMargin2 * 2;
-        columnWidth = columnHeight;
-        columnGap = pageVerticalMargin2 * 2;
-      }
-      (_a = frame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-layout-enhancer-css`);
-      (_b = frame.getManipulableFrame()) == null ? void 0 : _b.addStyle(
-        `prose-layout-enhancer-css`,
-        `
+  reader.hookManager.register(
+    `item.onLayoutBeforeMeasurement`,
+    ({ frame, minimumWidth, item, isImageType }) => {
+      var _a, _b;
+      const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsManager.settings;
+      const pageSize = reader.context.getPageSize();
+      if (item.renditionLayout === `reflowable` && frame.getIsReady() && !isImageType() && !frame.getViewportDimensions()) {
+        let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
+        const columnHeight = pageSize.height - pageVerticalMargin2 * 2;
+        let width = pageSize.width - pageHorizontalMargin2 * 2;
+        let columnGap = pageHorizontalMargin2 * 2;
+        if (frame.isUsingVerticalWriting()) {
+          width = minimumWidth - pageHorizontalMargin2 * 2;
+          columnWidth = columnHeight;
+          columnGap = pageVerticalMargin2 * 2;
+        }
+        (_a = frame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-layout-enhancer-css`);
+        (_b = frame.getManipulableFrame()) == null ? void 0 : _b.addStyle(
+          `prose-layout-enhancer-css`,
+          `
           body {
             width: ${width}px !important;
             margin: ${pageVerticalMargin2}px ${pageHorizontalMargin2}px !important;
@@ -346,14 +462,15 @@ const layoutEnhancer = (next) => (options) => {
             max-width: ${columnWidth}px;
           }
         `
-      );
+        );
+      }
     }
-  });
+  );
   fixReflowable(reader);
   let observer;
   if (options.layoutAutoResize === `container`) {
     reader.context.state$.pipe(
-      map$1((state) => state.containerElement),
+      map((state) => state.containerElement),
       filter(isDefined),
       distinctUntilChanged(),
       takeUntil$1(reader.$.destroy$)
@@ -366,7 +483,7 @@ const layoutEnhancer = (next) => (options) => {
   }
   const movingSafePan$ = createMovingSafePan$(reader);
   movingSafePan$.subscribe();
-  settingsSubject$.pipe(
+  settingsManager.settings$.pipe(
     mapKeysTo([`pageHorizontalMargin`, `pageVerticalMargin`]),
     distinctUntilChanged(isShallowEqual),
     skip(1),
@@ -375,32 +492,14 @@ const layoutEnhancer = (next) => (options) => {
     }),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
-  const settings$ = combineLatest([reader.settings.settings$, settingsSubject$.asObservable()]).pipe(
-    map$1(([innerSettings, settings]) => ({
-      ...innerSettings,
-      ...settings
-    }))
-  );
-  const setSettings = ({ pageVerticalMargin: pageVerticalMargin2, pageHorizontalMargin: pageHorizontalMargin2, ...rest }) => {
-    if (pageHorizontalMargin2 !== void 0 || pageVerticalMargin2 !== void 0) {
-      settingsSubject$.next({
-        pageHorizontalMargin: pageHorizontalMargin2 ?? settingsSubject$.value.pageHorizontalMargin,
-        pageVerticalMargin: pageVerticalMargin2 ?? settingsSubject$.value.pageVerticalMargin
-      });
-    }
-    reader.settings.setSettings(rest);
-  };
   return {
     ...reader,
     destroy: () => {
+      settingsManager.destroy();
       reader.destroy();
       observer == null ? void 0 : observer.disconnect();
     },
-    settings: {
-      ...reader.settings,
-      setSettings,
-      settings$
-    }
+    settings: settingsManager
   };
 };
 const ROOT_NAMESPACE = `@prose-reader/core`;
@@ -417,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) => ({
@@ -433,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);
     }
   },
@@ -498,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;
@@ -513,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
+            });
           }
         })
       );
@@ -554,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();
       }
@@ -571,8 +682,8 @@ const createNavigator = (reader) => {
 };
 const createState = (reader) => {
   return reader.pagination.paginationInfo$.pipe(
-    withLatestFrom$1(reader.context.manifest$, reader.settings.settings$),
-    map(([paginationInfo, manifest, { computedPageTurnDirection }]) => {
+    withLatestFrom(reader.context.manifest$, reader.settings.settings$),
+    map$1(([paginationInfo, manifest, { computedPageTurnDirection }]) => {
       const numberOfSpineItems = (manifest == null ? void 0 : manifest.spineItems.length) ?? 0;
       const isAtAbsoluteBeginning = paginationInfo.beginSpineItemIndex === 0 && paginationInfo.beginPageIndexInSpineItem === 0;
       const isAtAbsoluteEnd = paginationInfo.endPageIndexInSpineItem === paginationInfo.endNumberOfPagesInSpineItem - 1 && paginationInfo.endSpineItemIndex === Math.max(numberOfSpineItems - 1, 0);
@@ -599,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 = {
@@ -649,12 +767,14 @@ const getChaptersInfo = (reader) => {
 };
 const trackChapterInfo = (reader) => {
   return reader.spine.$.spineItems$.pipe(
-    startWith([]),
-    map(() => getChaptersInfo(reader))
+    startWith$1([]),
+    map$1(() => getChaptersInfo(reader))
   );
 };
 const NAMESPACE$6 = `pagination`;
-const createPagination = ({ context }) => {
+const createPagination = ({
+  context
+}) => {
   const paginationSubject$ = new BehaviorSubject({
     beginPageIndexInSpineItem: void 0,
     beginNumberOfPagesInSpineItem: 0,
@@ -707,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();
@@ -731,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;
@@ -742,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 });
@@ -752,19 +884,22 @@ const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemManager.get
 const trackTotalPages = (reader) => {
   const totalPages$ = reader.spine.$.layout$.pipe(
     debounceTime(10, animationFrameScheduler),
-    withLatestFrom$1(reader.pagination.paginationInfo$),
-    map(() => {
+    withLatestFrom(reader.pagination.paginationInfo$),
+    map$1(() => {
       const numberOfPagesPerItems = getNumberOfPagesForAllSpineItems(reader);
       return {
         numberOfPagesPerItems,
         /**
          * 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),
-    startWith({
+    startWith$1({
       numberOfPagesPerItems: [],
       numberOfTotalPages: 0
     })
@@ -817,14 +952,17 @@ 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
   });
   const extandedBasePagination$ = reader.pagination.paginationInfo$.pipe(
     combineLatestWith(chaptersInfo$),
-    map(([info, chaptersInfo]) => ({
+    map$1(([info, chaptersInfo]) => ({
       ...info,
       ...mapPaginationInfoToExtendedInfo(reader)(info, chaptersInfo)
     })),
@@ -834,11 +972,17 @@ const trackPaginationInfo = (reader) => {
     extandedBasePagination$,
     totalPages$
   ]).pipe(
-    map(([pageInfo, totalPageInfo]) => ({
+    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);
@@ -880,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;` : ``}
@@ -899,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);
@@ -924,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(
@@ -991,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 };
@@ -1087,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;
@@ -1196,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))
+        )
       }
     }
   };
@@ -1233,22 +1400,22 @@ class Context {
     this.destroy$ = new Subject();
     this.state$ = this._stateSubject.pipe(distinctUntilChanged(isShallowEqual));
     this.manifest$ = this._stateSubject.pipe(
-      map$1((state) => state.manifest),
+      map((state) => state.manifest),
       filter(isDefined),
       distinctUntilChanged()
     );
     this.containerElement$ = this._stateSubject.pipe(
-      map$1((state) => state.containerElement),
+      map((state) => state.containerElement),
       filter(isDefined),
       distinctUntilChanged()
     );
     this.hasVerticalWriting$ = this._stateSubject.pipe(
-      map$1((state) => state.hasVerticalWriting),
+      map((state) => state.hasVerticalWriting),
       filter(isDefined),
       distinctUntilChanged()
     );
     this.isUsingSpreadMode$ = this._stateSubject.pipe(
-      map$1((state) => state.isUsingSpreadMode),
+      map((state) => state.isUsingSpreadMode),
       distinctUntilChanged()
     );
     this.isRTL = () => {
@@ -1343,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;
@@ -1360,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;
@@ -1373,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 `
@@ -1416,7 +1592,6 @@ const createHtmlPageFromResource = async (resourceResponse, item) => {
 const createLoader = ({
   item,
   parent,
-  fetchResource,
   context,
   viewportState$,
   settings,
@@ -1441,9 +1616,9 @@ const createLoader = ({
   const unload$ = unloadSubject$.asObservable().pipe(
     // @todo remove iframe when viewport is free
     // @todo use takeUntil(load$) when it's the case to cancel
-    withLatestFrom(frameElementSubject$),
+    withLatestFrom$1(frameElementSubject$),
     filter(([_, frame]) => !!frame),
-    map$1(([, frame]) => {
+    map(([, frame]) => {
       hookManager.destroy(`item.onLoad`, item.id);
       frame == null ? void 0 : frame.remove();
       frameElementSubject$.next(void 0);
@@ -1452,18 +1627,26 @@ const createLoader = ({
     takeUntil$1(destroySubject$)
   );
   const load$ = loadSubject$.asObservable().pipe(
-    withLatestFrom(isLoadedSubject$),
+    withLatestFrom$1(isLoadedSubject$),
     filter(([_, isLoaded]) => !isLoaded),
     // let's ignore later load as long as the first one still runs
     exhaustMap(() => {
       return createFrame$().pipe(
-        mergeMap((frame) => waitForViewportFree$.pipe(map$1(() => frame))),
+        mergeMap((frame) => waitForViewportFree$.pipe(map(() => frame))),
         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 {
@@ -1475,9 +1658,11 @@ const createLoader = ({
                   frame == null ? void 0 : frame.setAttribute(`srcdoc`, htmlDoc);
                 }
               }),
-              map$1(() => frame),
+              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);
               })
@@ -1505,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$1(() => frame));
+              }).filter(
+                (result) => result instanceof Observable
+              );
+              return combineLatest([of(null), ...hookResults]).pipe(
+                map(() => frame)
+              );
             })
           );
         }),
@@ -1519,16 +1708,20 @@ 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$)
   );
-  merge(load$.pipe(map$1(() => true)), unloadSubject$.pipe(map$1(() => false))).pipe(distinctUntilChanged(), takeUntil$1(destroySubject$)).subscribe(isLoadedSubject$);
-  merge(ready$.pipe(map$1(() => true)), unloadSubject$.pipe(map$1(() => false))).pipe(distinctUntilChanged(), takeUntil$1(destroySubject$)).subscribe(isReadySubject$);
+  merge(load$.pipe(map(() => true)), unloadSubject$.pipe(map(() => false))).pipe(distinctUntilChanged(), takeUntil$1(destroySubject$)).subscribe(isLoadedSubject$);
+  merge(ready$.pipe(map(() => true)), unloadSubject$.pipe(map(() => false))).pipe(distinctUntilChanged(), takeUntil$1(destroySubject$)).subscribe(isReadySubject$);
   unload$.subscribe();
   return {
     load: () => loadSubject$.next(),
@@ -1563,7 +1756,6 @@ const createFrameManipulator = (frameElement) => ({
 const createFrameItem = ({
   item,
   parent,
-  fetchResource,
   context,
   viewportState$,
   settings,
@@ -1571,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({
@@ -1604,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,
@@ -1630,8 +1840,8 @@ const createFrameItem = ({
     return createHtmlPageFromResource(response, item);
   };
   const contentLayoutChange$ = merge(
-    unloaded$.pipe(map$1(() => ({ isFirstLayout: false }))),
-    ready$.pipe(map$1(() => ({ isFirstLayout: true })))
+    unloaded$.pipe(map(() => ({ isFirstLayout: false }))),
+    ready$.pipe(map(() => ({ isFirstLayout: true })))
   );
   const destroy = () => {
     unload();
@@ -1679,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,
@@ -1751,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;
@@ -1766,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()
@@ -1781,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();
@@ -1820,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 {
@@ -1844,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 };
     }
   };
@@ -1897,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) => {
@@ -1950,8 +2180,8 @@ const createCommonSpineItem = ({
     ...options
   });
   const contentLayout$ = spineItemFrame.$.contentLayoutChange$.pipe(
-    withLatestFrom(spineItemFrame.$.isReady$),
-    map$1(([data, isReady]) => ({
+    withLatestFrom$1(spineItemFrame.$.isReady$),
+    map(([data, isReady]) => ({
       isFirstLayout: data.isFirstLayout,
       isReady
     }))
@@ -2111,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);
@@ -2132,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 };
   };
@@ -2265,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,
@@ -2291,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 {
@@ -2312,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 {
@@ -2638,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) {
@@ -2706,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;
@@ -2809,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);
     }
@@ -2994,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;
             }
           }
@@ -3060,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
@@ -3098,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;
@@ -3185,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;
     }
@@ -3214,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;
       }
@@ -3226,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
+          );
         }
       }
     }
@@ -3270,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`);
@@ -3447,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
@@ -3466,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
@@ -3503,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 }) => {
                 })
               )
@@ -3540,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(
           {
@@ -3604,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();
@@ -3623,15 +3947,25 @@ const createSpine = ({
   ).pipe(
     switchMap$1(() => {
       return waitForViewportFree$.pipe(
-        withLatestFrom(currentNavigationPosition$),
-        map$1(([, currentNavigationPosition]) => {
+        withLatestFrom$1(currentNavigationPosition$),
+        map(([, currentNavigationPosition]) => {
           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]);
           }
@@ -3690,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 = [];
@@ -3801,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);
@@ -3909,7 +4252,9 @@ const createSpineItemManager = ({ context, settings }) => {
       itemIsReady$: orderedSpineItemsSubject$.asObservable().pipe(
         switchMap$1((items) => {
           const itemsIsReady$ = items.map(
-            (item) => item.$.isReady$.pipe(map$1((isReady) => ({ item: item.item, isReady })))
+            (item) => item.$.isReady$.pipe(
+              map((isReady) => ({ item: item.item, isReady }))
+            )
           );
           return merge(...itemsIsReady$);
         })
@@ -3980,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;
   }
@@ -3996,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`;
@@ -4080,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,
@@ -4111,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);
@@ -4125,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;
@@ -4139,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;
@@ -4150,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;
@@ -4165,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;
   };
@@ -4200,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 = {
@@ -4239,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) => {
@@ -4286,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()) {
@@ -4304,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 };
@@ -4316,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 };
@@ -4326,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) => {
@@ -4350,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 }
@@ -4372,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;
     }
   };
@@ -4422,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
+            }
           )
         );
       }
@@ -4439,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) {
@@ -4454,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 };
@@ -4472,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) => {
@@ -4528,7 +4988,7 @@ const createScrollViewportNavigator = ({
     return false;
   };
   const runOnFreePageTurnModeOnly$ = (source) => settings.settings$.pipe(
-    map$1(({ computedPageTurnMode }) => computedPageTurnMode),
+    map(({ computedPageTurnMode }) => computedPageTurnMode),
     distinctUntilChanged(),
     switchMap$1((mode) => iif(() => mode === `controlled`, EMPTY, source))
   );
@@ -4567,17 +5027,27 @@ 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),
-    withLatestFrom(currentNavigationSubject$),
+    withLatestFrom$1(currentNavigationSubject$),
     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()
   );
@@ -4588,11 +5058,11 @@ const createScrollViewportNavigator = ({
   );
   const state$ = merge(
     userScroll$.pipe(
-      map$1(() => `start`),
+      map(() => `start`),
       distinctUntilChanged()
     ),
-    userScrollEnd$.pipe(map$1(() => `end`))
-  ).pipe(startWith$1(`end`));
+    userScrollEnd$.pipe(map(() => `end`))
+  ).pipe(startWith(`end`));
   return {
     destroy: () => {
     },
@@ -4615,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`),
@@ -4635,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;
@@ -4645,20 +5131,25 @@ 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 });
     })
   );
   const cfiNavigation$ = navigationTriggerSubject$.pipe(
     filter((e) => e.type === `cfi`),
-    map$1(({ data: { animate, cfi } }) => {
+    map(({ data: { animate, cfi } }) => {
       const navigation = navigator2.getNavigationForCfi(cfi);
       Report.log(NAMESPACE$2, `goToCfi`, { cfi, animate, navigation });
       return {
         ...navigation,
         animate,
-        lastUserExpectedNavigation: { type: `navigate-from-cfi`, data: cfi }
+        lastUserExpectedNavigation: {
+          type: `navigate-from-cfi`,
+          data: cfi
+        }
       };
     })
   );
@@ -4668,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;
     })
@@ -4701,33 +5196,38 @@ 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;
     }
   );
   const leftPageNavigation$ = navigationTriggerSubject$.pipe(
     filter((e) => e.type === `leftPage`),
-    withLatestFrom(currentNavigationSubject$),
+    withLatestFrom$1(currentNavigationSubject$),
     switchMap$1(
       ([
         {
@@ -4736,14 +5236,18 @@ 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 });
       }
     )
   );
   const rightPageNavigation$ = navigationTriggerSubject$.pipe(
     filter((e) => e.type === `rightPage`),
-    withLatestFrom(currentNavigationSubject$),
+    withLatestFrom$1(currentNavigationSubject$),
     switchMap$1(
       ([
         {
@@ -4752,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 });
       }
     )
@@ -4771,9 +5279,11 @@ const createManualViewportNavigator = ({
      * This is because manual navigation is not used with scroll where you can move within the same item. A manual
      * navigation would theoretically always move to different items.
      */
-    withLatestFrom(currentNavigationSubject$),
-    filter(([navigation, currentNavigation]) => navigator2.areNavigationDifferent(navigation, currentNavigation)),
-    map$1(([navigation]) => navigation)
+    withLatestFrom$1(currentNavigationSubject$),
+    filter(
+      ([navigation, currentNavigation]) => navigator2.areNavigationDifferent(navigation, currentNavigation)
+    ),
+    map(([navigation]) => navigation)
   );
   return {
     destroy: () => {
@@ -4863,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` };
@@ -4876,7 +5389,7 @@ const createPanViewportNavigator = ({
   );
   const snapNavigation$ = navigationTriggerSubject$.pipe(
     filter((e) => e.type === `snap`),
-    withLatestFrom$1(settings.settings$),
+    withLatestFrom(settings.settings$),
     switchMap$1(
       ([
         {
@@ -4893,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 });
       }
@@ -4945,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,
@@ -4987,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();
@@ -5016,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,
@@ -5061,12 +5612,16 @@ const createViewportNavigator = ({
     currentViewportPositionMemoUnused = void 0;
   });
   const layoutChangeSettings$ = settings.settings$.pipe(
-    mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
+    mapKeysTo([
+      `computedPageTurnDirection`,
+      `computedPageTurnMode`,
+      `numberOfAdjacentSpineItemToPreLoad`
+    ]),
     distinctUntilChanged(isShallowEqual),
     skip(1)
   );
   const layout$ = merge(layoutSubject$, layoutChangeSettings$).pipe(
-    withLatestFrom(element$),
+    withLatestFrom$1(element$),
     tap(([, element]) => {
       if (settings.settings.computedPageTurnMode === `scrollable`) {
         element.style.removeProperty(`transform`);
@@ -5082,7 +5637,7 @@ const createViewportNavigator = ({
   layout$.subscribe();
   const navigation$ = merge(
     panViewportNavigator.$.navigation$.pipe(
-      map$1((event) => ({
+      map((event) => ({
         ...event,
         position: { x: event.x, y: event.y, spineItem: event.spineItem },
         animation: `snap`,
@@ -5090,7 +5645,7 @@ const createViewportNavigator = ({
       }))
     ),
     manualViewportNavigator.$.navigation$.pipe(
-      map$1((event) => ({
+      map((event) => ({
         ...event,
         position: { x: event.x, y: event.y, spineItem: event.spineItem },
         animation: event.animate ? `turn` : false,
@@ -5098,21 +5653,21 @@ const createViewportNavigator = ({
       }))
     ),
     adjustNavigationSubject$.pipe(
-      map$1((event) => ({
+      map((event) => ({
         ...event,
         triggeredBy: `adjust`,
         animation: event.animate ? `turn` : false
       }))
     ),
     scrollViewportNavigator.$.navigation$.pipe(
-      map$1((event) => ({
+      map((event) => ({
         ...event,
         triggeredBy: `scroll`,
         animation: event.animate ? `turn` : false
       }))
     )
   ).pipe(
-    map$1((event) => {
+    map((event) => {
       if (`lastUserExpectedNavigation` in event) {
         lastUserExpectedNavigation = event.lastUserExpectedNavigation;
       }
@@ -5132,10 +5687,10 @@ const createViewportNavigator = ({
     })
   );
   const manualAdjust$ = merge(
-    panViewportNavigator.$.moveToSubject$.asObservable().pipe(map$1((event) => ({ ...event, animation: false }))),
+    panViewportNavigator.$.moveToSubject$.asObservable().pipe(map((event) => ({ ...event, animation: false }))),
     navigationWhichRequireManualAdjust$
   ).pipe(
-    map$1(({ animation, position }) => {
+    map(({ animation, position }) => {
       const shouldAnimate = !(!animation || animation === `turn` && settings.settings.computedPageTurnAnimation === `none`);
       return {
         type: `manualAdjust`,
@@ -5147,7 +5702,7 @@ const createViewportNavigator = ({
     share()
   );
   const processManualAdjust$ = merge(manualAdjust$).pipe(
-    startWith$1(void 0),
+    startWith(void 0),
     pairwise(),
     tap(([prevEvent, currentEvent]) => {
       if ((prevEvent == null ? void 0 : prevEvent.type) === `manualAdjust` && (currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`) {
@@ -5173,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 {
@@ -5222,11 +5783,16 @@ const createViewportNavigator = ({
     takeUntil$1(context.destroy$)
   );
   const adjustmentState$ = merge(
-    merge(manualAdjust$).pipe(map$1(() => `start`)),
-    merge(processManualAdjust$).pipe(map$1(() => `end`))
+    merge(manualAdjust$).pipe(map(() => `start`)),
+    merge(processManualAdjust$).pipe(map(() => `end`))
   );
-  const state$ = combineLatest([...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2), adjustmentState$]).pipe(
-    map$1((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),
     /**
@@ -5272,7 +5838,7 @@ const createViewportNavigator = ({
     ),
     share()
   );
-  const parentElementSub = parentElement$.pipe(filter(isDefined), withLatestFrom(spine.element$)).subscribe(([parentElement, spineElement]) => {
+  const parentElementSub = parentElement$.pipe(filter(isDefined), withLatestFrom$1(spine.element$)).subscribe(([parentElement, spineElement]) => {
     const element = createElement(parentElement.ownerDocument, hookManager);
     element.appendChild(spineElement);
     parentElement.appendChild(element);
@@ -5316,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 = ({
@@ -5375,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) => {
@@ -5385,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()
@@ -5413,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,
@@ -5433,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}) `;
@@ -5491,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 {
@@ -5505,93 +6114,124 @@ const createCfiLocator = ({
     generateFromRange
   };
 };
-const getComputedSettings = (settings, context) => {
-  const manifest = context.manifest;
-  const hasVerticalWriting = context.state.hasVerticalWriting ?? false;
-  const computedSettings = {
-    computedPageTurnDirection: settings.pageTurnDirection,
-    computedPageTurnAnimation: settings.pageTurnAnimation,
-    computedPageTurnMode: `controlled`,
-    computedPageTurnAnimationDuration: 0
-  };
-  if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
-    computedSettings.computedPageTurnMode = `scrollable`;
-    computedSettings.computedPageTurnDirection = `vertical`;
-  } else if (manifest && settings.pageTurnMode === `scrollable` && (manifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(manifest))) {
-    Report.warn(`pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`);
-    computedSettings.computedPageTurnAnimation = `none`;
-    computedSettings.computedPageTurnMode = `controlled`;
-  } else if (settings.pageTurnMode === `scrollable`) {
-    computedSettings.computedPageTurnMode = `scrollable`;
-    computedSettings.computedPageTurnDirection = `vertical`;
+class SettingsManager3 {
+  constructor(initialSettings) {
+    const settingsWithDefaults = {
+      ...this.getDefaultSettings(),
+      ...initialSettings
+    };
+    this.inputSettings = settingsWithDefaults;
+    this.outputSettingsUpdateSubject = new Subject();
+    this.settings$ = this.outputSettingsUpdateSubject.asObservable().pipe(shareReplay(1));
+    this.settings$.subscribe();
   }
-  if (hasVerticalWriting && computedSettings.computedPageTurnAnimation === `slide`) {
-    Report.warn(
-      `pageTurnAnimation ${computedSettings.computedPageTurnAnimation} incompatible with current book, switching back to default`
-    );
-    computedSettings.computedPageTurnAnimation = `none`;
+  _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;
+      }
+    };
   }
-  if (computedSettings.computedPageTurnMode === `scrollable`) {
-    computedSettings.computedPageTurnAnimationDuration = 0;
-    computedSettings.computedPageTurnAnimation = `none`;
-  } else {
-    computedSettings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+  update(settings) {
+    const { commit } = this._prepareUpdate(settings);
+    commit();
   }
-  return computedSettings;
-};
-const defaultSettings = {
-  forceSinglePageMode: false,
-  pageTurnAnimation: `none`,
-  //   computedPageTurnAnimation: `none`,
-  pageTurnDirection: `horizontal`,
-  //   computedPageTurnDirection: `horizontal`,
-  pageTurnAnimationDuration: void 0,
-  //   computedPageTurnAnimationDuration: 0,
-  pageTurnMode: `controlled`,
-  //   computedPageTurnMode: `controlled`,
-  snapAnimationDuration: 300,
-  navigationSnapThreshold: 0.3,
-  numberOfAdjacentSpineItemToPreLoad: 0
-};
-class SettingsManager {
+  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) {
-    this._context = context;
-    const settingsWithDefaults = {
-      ...defaultSettings,
-      ...initialSettings
-    };
-    const computedSettings = getComputedSettings(settingsWithDefaults, context);
-    const settings = { ...settingsWithDefaults, ...computedSettings };
-    this._settingsSubject$ = new BehaviorSubject(settings);
-    this.settings$ = this._settingsSubject$.asObservable().pipe(distinctUntilChanged(isShallowEqual));
-    const recomputeSettingsOnContextChange$ = combineLatest([context.hasVerticalWriting$, context.manifest$]).pipe(
+    super(initialSettings);
+    this.context = context;
+    const recomputeSettingsOnContextChange$ = combineLatest([
+      context.hasVerticalWriting$,
+      context.manifest$
+    ]).pipe(
       tap(() => {
-        this._updateSettings(this.settings);
+        this.update(this.settings);
       })
     );
-    const updateContextOnSettingsChanges$ = this._settingsSubject$.pipe(
+    const updateContextOnSettingsChanges$ = this.settings$.pipe(
       tap(({ forceSinglePageMode }) => {
         context.update({ forceSinglePageMode });
       })
     );
     merge(recomputeSettingsOnContextChange$, updateContextOnSettingsChanges$).pipe(takeUntil$1(context.destroy$)).subscribe();
+    this.settings$.subscribe();
   }
-  // @see https://github.com/microsoft/TypeScript/issues/17293
-  _updateSettings(settings) {
-    const computed = getComputedSettings(settings, this._context);
-    const newMergedSettings = { ...settings, ...computed };
-    this._settingsSubject$.next(newMergedSettings);
-  }
-  setSettings(settings) {
-    if (Object.keys(settings).length === 0) return;
-    const newMergedSettings = { ...this._settingsSubject$.value, ...settings };
-    this._updateSettings(newMergedSettings);
+  getComputedSettings(settings) {
+    const manifest = this.context.manifest;
+    const hasVerticalWriting = this.context.state.hasVerticalWriting ?? false;
+    const computedSettings = {
+      computedPageTurnDirection: settings.pageTurnDirection,
+      computedPageTurnAnimation: settings.pageTurnAnimation,
+      computedPageTurnMode: `controlled`,
+      computedPageTurnAnimationDuration: 0
+    };
+    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
+      computedSettings.computedPageTurnMode = `scrollable`;
+      computedSettings.computedPageTurnDirection = `vertical`;
+    } else if (manifest && settings.pageTurnMode === `scrollable` && (manifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(manifest))) {
+      Report.warn(
+        `pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`
+      );
+      computedSettings.computedPageTurnAnimation = `none`;
+      computedSettings.computedPageTurnMode = `controlled`;
+    } else if (settings.pageTurnMode === `scrollable`) {
+      computedSettings.computedPageTurnMode = `scrollable`;
+      computedSettings.computedPageTurnDirection = `vertical`;
+    }
+    if (hasVerticalWriting && computedSettings.computedPageTurnAnimation === `slide`) {
+      Report.warn(
+        `pageTurnAnimation ${computedSettings.computedPageTurnAnimation} incompatible with current book, switching back to default`
+      );
+      computedSettings.computedPageTurnAnimation = `none`;
+    }
+    if (computedSettings.computedPageTurnMode === `scrollable`) {
+      computedSettings.computedPageTurnAnimationDuration = 0;
+      computedSettings.computedPageTurnAnimation = `none`;
+    } else {
+      computedSettings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+    }
+    return computedSettings;
   }
-  get settings() {
-    return this._settingsSubject$.getValue();
+  getOutputSettings(inputSettings) {
+    const computedSettings = this.getComputedSettings(inputSettings);
+    return { ...this.outputSettings, ...inputSettings, ...computedSettings };
   }
-  destroy() {
-    this._settingsSubject$.complete();
+  getDefaultSettings() {
+    return {
+      forceSinglePageMode: false,
+      pageTurnAnimation: `none`,
+      //   computedPageTurnAnimation: `none`,
+      pageTurnDirection: `horizontal`,
+      //   computedPageTurnDirection: `horizontal`,
+      pageTurnAnimationDuration: void 0,
+      //   computedPageTurnAnimationDuration: 0,
+      pageTurnMode: `controlled`,
+      //   computedPageTurnMode: `controlled`,
+      snapAnimationDuration: 300,
+      navigationSnapThreshold: 0.3,
+      numberOfAdjacentSpineItemToPreLoad: 0
+    };
   }
 }
 class HookManager {
@@ -5624,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();
@@ -5637,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,
@@ -5656,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);
   }
@@ -5676,10 +6324,15 @@ const createReader = (inputSettings) => {
   const viewportStateSubject = new BehaviorSubject(`free`);
   const hookManager = new HookManager();
   const context = new Context();
-  const settingsManager = new SettingsManager(inputSettings, context);
-  const spineItemManager = createSpineItemManager({ context, settings: settingsManager });
+  const settingsManager = new ReaderSettingsManager(inputSettings, context);
+  const spineItemManager = createSpineItemManager({
+    context,
+    settings: settingsManager
+  });
   const pagination = createPagination({ context, spineItemManager });
-  const elementSubject$ = new BehaviorSubject(void 0);
+  const elementSubject$ = new BehaviorSubject(
+    void 0
+  );
   const element$ = elementSubject$.pipe(filter(isDefined));
   const spineItemLocator = createLocationResolver$1({ context });
   const spineLocator = createLocationResolver({
@@ -5722,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;
@@ -5765,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 });
@@ -5788,9 +6449,9 @@ const createReader = (inputSettings) => {
     takeUntil$1(context.destroy$)
   ).subscribe();
   merge(context.state$, settingsManager.settings$).pipe(
-    map$1(() => void 0),
-    withLatestFrom(context.state$),
-    map$1(([, { hasVerticalWriting }]) => {
+    map(() => void 0),
+    withLatestFrom$1(context.state$),
+    map(([, { hasVerticalWriting }]) => {
       const manifest = context.manifest;
       return {
         hasVerticalWriting,
@@ -5800,7 +6461,7 @@ const createReader = (inputSettings) => {
       };
     }),
     distinctUntilChanged(isShallowEqual),
-    map$1(
+    map(
       ({
         hasVerticalWriting,
         renditionFlow,
@@ -5850,7 +6511,9 @@ const createReader = (inputSettings) => {
        * have an effect.
        * It can typically be used to hide a loading indicator.
        */
-      loadStatus$: context.manifest$.pipe(map$1((manifest) => manifest ? "ready" : "idle")),
+      loadStatus$: context.manifest$.pipe(
+        map((manifest) => manifest ? "ready" : "idle")
+      ),
       /**
        * Dispatched when a change in selection happens
        */
@@ -6017,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));
         }),
@@ -6040,7 +6705,9 @@ const createResourcesManager = (context) => {
       return from(openDatabase(`prose-reader`)).pipe(
         switchMap$1(
           (db) => from(db.keys()).pipe(
-            map$1((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));
@@ -6087,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();
@@ -6166,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;
       }
@@ -6188,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 {
@@ -6250,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;
 };
@@ -6285,7 +6976,7 @@ const loadingEnhancer = (next) => (options) => {
     }, {})
   );
   const updateEntriesLayout$ = (entries) => combineLatest([reader.spine.$.layout$, reader.theme.$.theme$]).pipe(
-    map$1(([, theme]) => ({
+    map(([, theme]) => ({
       width: reader.context.state.visibleAreaRect.width,
       theme
     })),
@@ -6293,18 +6984,24 @@ 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(
-    map$1(() => {
+    map(() => {
       Object.values(entries).forEach((element) => element.remove());
       return {};
     })
@@ -6316,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 {
@@ -6386,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)) {
@@ -6397,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)) {
@@ -6407,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)) {
@@ -6425,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;
@@ -6567,6 +7279,7 @@ const createReaderWithEnhancers = (
 export {
   HookManager,
   Report,
+  SettingsManager3 as SettingsManager,
   createReaderWithEnhancers as createReader,
   groupBy,
   isShallowEqual