@prose-reader/core 1.72.0 → 1.73.0

package/dist/index.js

@@ -1,12 +1,13 @@
-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, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, tap as tap$1, shareReplay as shareReplay$1, ReplaySubject, filter as filter$1, share, mergeMap, delay, identity, timer, skip as skip$1, exhaustMap, take as take$1, finalize, first as first$1, from, catchError, forkJoin } from "rxjs";
+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, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, tap as tap$1, shareReplay as shareReplay$1, ReplaySubject, filter as filter$1, share, mergeMap, delay, identity, timer, skip as skip$1, exhaustMap, first as first$1, finalize, take as take$1, from, catchError, forkJoin } from "rxjs";
 import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, debounceTime, skip, withLatestFrom as withLatestFrom$1, exhaustMap as exhaustMap$1, ignoreElements, endWith, defaultIfEmpty, share as share$1, mergeMap as mergeMap$1, catchError as catchError$1 } from "rxjs/operators";
-import { parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
+import { shallowMergeIfDefined, isShallowEqual, parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
+import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
   reader.context.state$.pipe(takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
     if (!containerElement) return;
     const onScroll = () => {
-      if (reader.settings.settings.computedPageTurnMode === `controlled`) {
+      if (reader.settings.values.computedPageTurnMode === `controlled`) {
         containerElement.scrollTo(0, 0);
       }
     };
@@ -18,72 +19,6 @@ const chromeEnhancer = (next) => (options) => {
   });
   return reader;
 };
-const hasOwn = Object.prototype.hasOwnProperty;
-const is = (x, y) => {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return false;
-  }
-};
-const isShallowEqual = (objectA, objectB, options) => {
-  if (objectA === objectB) {
-    return true;
-  }
-  if (typeof objectA !== `object` || objectA === null) {
-    return false;
-  }
-  if (typeof objectB !== `object` || objectB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objectA);
-  const keysB = Object.keys(objectB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  const isEqual = options && typeof options.customEqual === `function` ? options.customEqual : is;
-  for (let i = 0; i < keysA.length; i++) {
-    const key = keysA[i] || ``;
-    if (!hasOwn.call(objectB, key) || !isEqual(objectA[key], objectB[key])) {
-      return false;
-    }
-  }
-  return true;
-};
-const groupBy = (list, getKey) => list.reduce(
-  (previous, currentItem) => {
-    const group = getKey(currentItem);
-    if (!previous[group]) previous[group] = [];
-    previous[group].push(currentItem);
-    return previous;
-  },
-  {}
-);
-const getBase64FromBlob = (data) => {
-  const reader = new FileReader();
-  return new Promise((resolve) => {
-    reader.addEventListener(
-      `load`,
-      function() {
-        resolve(reader.result);
-      },
-      false
-    );
-    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;
@@ -97,14 +32,14 @@ class SettingsManagerOverload {
       initialSettings
     );
     this.outputSettingsUpdateSubject = new Subject();
-    this.settings$ = combineLatest([
-      this.settingsManager.settings$,
+    this.values$ = combineLatest([
+      this.settingsManager.values$,
       this.outputSettingsUpdateSubject.pipe(startWith(this.outputSettings))
     ]).pipe(
       map(([parentSettings, settings]) => ({ ...parentSettings, ...settings })),
       shareReplay(1)
     );
-    this.settings$.subscribe();
+    this.values$.subscribe();
   }
   _prepareUpdate(settings) {
     const parentInputSettings = this.getCleanedParentInputSettings(settings);
@@ -132,9 +67,9 @@ class SettingsManagerOverload {
     const { commit } = this._prepareUpdate(settings);
     commit();
   }
-  get settings() {
+  get values() {
     return {
-      ...this.settingsManager.settings,
+      ...this.settingsManager.values,
       ...this.outputSettings
     };
   }
@@ -142,6 +77,19 @@ class SettingsManagerOverload {
     this.outputSettingsUpdateSubject.complete();
   }
 }
+const getBase64FromBlob = (data) => {
+  const reader = new FileReader();
+  return new Promise((resolve) => {
+    reader.addEventListener(
+      `load`,
+      function() {
+        resolve(reader.result);
+      },
+      false
+    );
+    reader.readAsDataURL(data);
+  });
+};
 let SettingsManager$2 = class SettingsManager extends SettingsManagerOverload {
   computeOutputSettings(settings) {
     return settings;
@@ -186,10 +134,10 @@ const fontsEnhancer = (next) => (options) => {
       */
   ``}
     body {
-      ${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;` : ``}
+      ${settingsManager.values.fontScale !== 1 ? `font-size: ${settingsManager.values.fontScale}em !important;` : ``}
+      ${settingsManager.values.lineHeight !== `publisher` ? `line-height: ${settingsManager.values.lineHeight} !important;` : ``}
+      ${settingsManager.values.fontWeight !== `publisher` ? `font-weight: ${settingsManager.values.fontWeight} !important;` : ``}
+      ${settingsManager.values.fontJustification !== `publisher` ? `text-align: ${settingsManager.values.fontJustification} !important;` : ``}
     }
   `;
   const applyChangeToSpineItems = (requireLayout) => {
@@ -219,7 +167,7 @@ const fontsEnhancer = (next) => (options) => {
       return false;
     })
   );
-  settingsManager.settings$.pipe(
+  settingsManager.values$.pipe(
     shouldRequireLayout,
     tap(applyChangeToSpineItems),
     takeUntil(reader.$.destroy$)
@@ -237,7 +185,7 @@ const fontsEnhancer = (next) => (options) => {
 const hotkeysEnhancer = (next) => (options) => {
   const reader = next(options);
   const navigateOnKey = (document2) => fromEvent(document2, "keyup").pipe(
-    withLatestFrom(reader.settings.settings$),
+    withLatestFrom(reader.settings.values$),
     map$1(([e, { pageTurnDirection }]) => {
       if (pageTurnDirection === "horizontal") {
         if (e.key === `ArrowRight`) {
@@ -317,8 +265,8 @@ const createMovingSafePan$ = (reader) => {
   const resetLockViewportFree$ = createResetLock$(
     reader.navigation.viewportFree$
   ).pipe(take(1));
-  const pageTurnMode$ = reader.settings.settings$.pipe(
-    map(() => reader.settings.settings.computedPageTurnMode),
+  const pageTurnMode$ = reader.settings.values$.pipe(
+    map(() => reader.settings.values.computedPageTurnMode),
     distinctUntilChanged()
   );
   const handleViewportLock$ = pageTurnMode$.pipe(
@@ -442,7 +390,7 @@ const layoutEnhancer = (next) => (options) => {
     ({ itemIndex, minimumWidth, isImageType }) => {
       const item = reader.spineItemsManager.get(itemIndex);
       const frame = item == null ? void 0 : item.frame;
-      const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsManager.settings;
+      const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsManager.values;
       const pageSize = reader.context.getPageSize();
       if ((item == null ? void 0 : item.item.renditionLayout) === `reflowable` && (frame == null ? void 0 : frame.isReady) && !isImageType() && !frame.getViewportDimensions()) {
         let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
@@ -490,7 +438,7 @@ const layoutEnhancer = (next) => (options) => {
       resizeObserver.disconnect();
     };
   });
-  const layoutOnContainerResize$ = settingsManager.settings$.pipe(
+  const layoutOnContainerResize$ = settingsManager.values$.pipe(
     filter(({ layoutAutoResize: layoutAutoResize2 }) => layoutAutoResize2 === "container"),
     switchMap$1(() => reader.context.containerElement$),
     filter(isDefined),
@@ -502,7 +450,7 @@ const layoutEnhancer = (next) => (options) => {
   );
   const movingSafePan$ = createMovingSafePan$(reader);
   movingSafePan$.subscribe();
-  settingsManager.settings$.pipe(
+  settingsManager.values$.pipe(
     mapKeysTo([`pageHorizontalMargin`, `pageVerticalMargin`]),
     distinctUntilChanged(isShallowEqual),
     skip(1),
@@ -708,14 +656,14 @@ const getNavigationForRightSinglePage = ({
       pageTurnDirection === `horizontal` ? { x: position.x + context.getPageSize().width, y: 0 } : { y: position.y + context.getPageSize().height, x: 0 }
     );
   } else {
-    const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition(
-      spineItemNavigationForRightPage,
+    const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition({
+      spineItemPosition: spineItemNavigationForRightPage,
       spineItem
-    );
+    });
     return readingOrderPosition;
   }
 };
-const getNavigationForRightPage = ({
+const getNavigationForRightOrBottomPage = ({
   position,
   spineItem,
   context,
@@ -821,14 +769,14 @@ const getNavigationForLeftSinglePage = ({
       pageTurnDirection === `horizontal` ? { x: position.x - context.getPageSize().width, y: 0 } : { y: position.y - context.getPageSize().height, x: 0 }
     );
   } else {
-    const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition(
-      spineItemNavigation,
+    const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition({
+      spineItemPosition: spineItemNavigation,
       spineItem
-    );
+    });
     return readingOrderPosition;
   }
 };
-const getNavigationForLeftPage = ({
+const getNavigationForLeftOrTopPage = ({
   position,
   spineItem,
   context,
@@ -882,14 +830,26 @@ class ManualNavigator {
     this.unlock = void 0;
   }
   turnRight() {
+    return this.turnRightOrBottom();
+  }
+  turnLeft() {
+    return this.turnLeftOrTop();
+  }
+  turnTop() {
+    return this.turnLeftOrTop();
+  }
+  turnBottom() {
+    return this.turnRightOrBottom();
+  }
+  turnRightOrBottom() {
     const navigation = this.reader.navigation.getNavigation();
     const spineItem = this.reader.spineItemsManager.get(navigation.spineItem);
     if (!spineItem) return;
-    const position = getNavigationForRightPage({
+    const position = getNavigationForRightOrBottomPage({
       context: this.reader.context,
       navigationResolver: this.reader.navigation.navigationResolver,
       position: navigation.position,
-      computedPageTurnDirection: this.reader.settings.settings.computedPageTurnDirection,
+      computedPageTurnDirection: this.reader.settings.values.computedPageTurnDirection,
       spineItem,
       spineItemsManager: this.reader.spineItemsManager,
       spineLocator: this.reader.spine.locator
@@ -898,15 +858,15 @@ class ManualNavigator {
       position
     });
   }
-  turnLeft() {
+  turnLeftOrTop() {
     const navigation = this.reader.navigation.getNavigation();
     const spineItem = this.reader.spineItemsManager.get(navigation.spineItem);
     if (!spineItem) return;
-    const position = getNavigationForLeftPage({
+    const position = getNavigationForLeftOrTopPage({
       context: this.reader.context,
       navigationResolver: this.reader.navigation.navigationResolver,
       position: navigation.position,
-      computedPageTurnDirection: this.reader.settings.settings.computedPageTurnDirection,
+      computedPageTurnDirection: this.reader.settings.values.computedPageTurnDirection,
       spineItem,
       spineItemsManager: this.reader.spineItemsManager,
       spineLocator: this.reader.spine.locator
@@ -954,7 +914,7 @@ class ManualNavigator {
     });
   }
   goToRightSpineItem() {
-    if (this.reader.settings.settings.computedPageTurnDirection === "vertical") {
+    if (this.reader.settings.values.computedPageTurnDirection === "vertical") {
       Report.warn(
         `You cannot call this navigation method on vertical direction`
       );
@@ -966,7 +926,7 @@ class ManualNavigator {
     return this.goToNextSpineItem();
   }
   goToLeftSpineItem() {
-    if (this.reader.settings.settings.computedPageTurnDirection === "vertical") {
+    if (this.reader.settings.values.computedPageTurnDirection === "vertical") {
       Report.warn(
         `You cannot call this navigation method on vertical direction`
       );
@@ -978,7 +938,7 @@ class ManualNavigator {
     return this.goToPreviousSpineItem();
   }
   goToTopSpineItem() {
-    if (this.reader.settings.settings.computedPageTurnDirection === "horizontal") {
+    if (this.reader.settings.values.computedPageTurnDirection === "horizontal") {
       Report.warn(
         `You cannot call this navigation method on horizontal direction`
       );
@@ -987,7 +947,7 @@ class ManualNavigator {
     return this.goToPreviousSpineItem();
   }
   goToBottomSpineItem() {
-    if (this.reader.settings.settings.computedPageTurnDirection === "horizontal") {
+    if (this.reader.settings.values.computedPageTurnDirection === "horizontal") {
       Report.warn(
         `You cannot call this navigation method on horizontal direction`
       );
@@ -1015,16 +975,16 @@ class PanNavigator {
   }
   moveTo(delta, { final, start } = {}) {
     var _a, _b, _c, _d;
-    if (this.reader.settings.settings.computedPageTurnMode === `scrollable`) {
+    if (this.reader.settings.values.computedPageTurnMode === `scrollable`) {
       Report.warn(`pan control is not available on free page turn mode`);
       return;
     }
-    const pageTurnDirection = this.reader.settings.settings.computedPageTurnDirection;
+    const pageTurnDirection = this.reader.settings.values.computedPageTurnDirection;
     if (start) {
       (_a = this.unlock) == null ? void 0 : _a.call(this);
       this.unlock = this.reader.navigation.lock();
       this.lastDelta = { x: 0, y: 0 };
-      this.lastStartPosition = this.reader.navigation.viewportPosition;
+      this.lastStartPosition = this.reader.navigation.getViewportPosition();
       this.lastPosition = this.lastStartPosition;
     }
     let navigation = this.reader.navigation.getNavigation().position;
@@ -1061,7 +1021,7 @@ class PanNavigator {
 }
 const observeState = (reader) => {
   return reader.pagination.state$.pipe(
-    withLatestFrom(reader.context.manifest$, reader.settings.settings$),
+    withLatestFrom(reader.context.manifest$, reader.settings.values$),
     map$1(
       ([
         paginationInfo,
@@ -1093,10 +1053,11 @@ const navigationEnhancer = (next) => (options) => {
   const state$ = observeState(reader);
   const manualNavigator = new ManualNavigator(reader);
   const panNavigator = new PanNavigator(reader);
-  const load = (manifest, loadOptions) => {
-    reader.load(manifest, loadOptions);
-    if (loadOptions.cfi) {
-      manualNavigator.goToCfi(loadOptions.cfi, { animate: false });
+  const load = (options2) => {
+    const { cfi, ...rest } = options2;
+    reader.load(rest);
+    if (cfi) {
+      manualNavigator.goToCfi(cfi, { animate: false });
     }
   };
   return {
@@ -1106,6 +1067,10 @@ const navigationEnhancer = (next) => (options) => {
       ...reader.navigation,
       state$,
       moveTo: panNavigator.moveTo.bind(panNavigator),
+      turnBottom: manualNavigator.turnBottom.bind(manualNavigator),
+      turnTop: manualNavigator.turnTop.bind(manualNavigator),
+      turnLeftOrTop: manualNavigator.turnLeftOrTop.bind(manualNavigator),
+      turnRightOrBottom: manualNavigator.turnRightOrBottom.bind(manualNavigator),
       turnLeft: manualNavigator.turnLeft.bind(manualNavigator),
       turnRight: manualNavigator.turnRight.bind(manualNavigator),
       goToCfi: manualNavigator.goToCfi.bind(manualNavigator),
@@ -1190,7 +1155,7 @@ const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemsManager.it
   });
 }, 0);
 const trackTotalPages = (reader) => {
-  const totalPages$ = reader.spine.layout$.pipe(
+  const totalPages$ = reader.layout$.pipe(
     debounceTime$1(10, animationFrameScheduler),
     withLatestFrom(reader.pagination.state$),
     map$1(() => {
@@ -1414,22 +1379,29 @@ const themeEnhancer = (next) => (options) => {
     }
   };
 };
-const createElementZoomer = (reader) => {
-  const isZooming$ = new BehaviorSubject(false);
-  let imageMagnifierContainer;
-  let imgLastPosition = { x: 0, y: 0 };
-  let movingLastDelta = { x: 0, y: 0 };
-  let baseScale = 1;
-  let lastUserScale = 1;
-  const enter = (imgElement) => {
-    isZooming$.next(true);
-    imgLastPosition = { x: 0, y: 0 };
-    baseScale = 1;
-    lastUserScale = 1;
-    const container = reader.context.state.containerElement;
+class Zoomer {
+  constructor(reader) {
+    this.reader = reader;
+  }
+}
+class ControllableZoomer extends Zoomer {
+  constructor() {
+    super(...arguments);
+    this.isZooming$ = new BehaviorSubject(false);
+    this.currentScale = 1;
+    this.currentPosition = { x: 0, y: 0 };
+  }
+  enter(element) {
+    if (!element) {
+      console.warn(`You need an image to enter zoom`);
+      return;
+    }
+    this.currentPosition = { x: 0, y: 0 };
+    this.currentScale = 1;
+    const container = this.reader.context.state.containerElement;
     if (container) {
-      imageMagnifierContainer = container.ownerDocument.createElement(`div`);
-      imageMagnifierContainer.style.cssText = `
+      this.element = container.ownerDocument.createElement(`div`);
+      this.element.style.cssText = `
           top: 0;
           left: 0;
           display: block;
@@ -1440,82 +1412,45 @@ const createElementZoomer = (reader) => {
           height: 100%;
           user-select: none;
         `;
-      const clonedImgElement = imgElement.cloneNode();
-      clonedImgElement.src = imgElement.src;
+      const clonedImgElement = element.cloneNode();
+      clonedImgElement.src = element.src;
       clonedImgElement.style.setProperty(`height`, `100%`);
       clonedImgElement.style.setProperty(`width`, `100%`);
       clonedImgElement.style.setProperty(`object-fit`, `contain`);
       clonedImgElement.style.setProperty(`pointer-events`, `none`);
-      imageMagnifierContainer.appendChild(clonedImgElement);
-      container.appendChild(imageMagnifierContainer);
-    }
-    scale(1.2);
-    setCurrentScaleAsBase();
-  };
-  const setCurrentScaleAsBase = () => {
-    baseScale = lastUserScale;
-  };
-  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 newScale = Math.max(roundedScale, 1);
-    if (roundedScale < 1) {
-      imgLastPosition = { x: 0, y: 0 };
+      this.element.appendChild(clonedImgElement);
+      container.appendChild(this.element);
+      this.isZooming$.next(true);
     }
+  }
+  exit() {
+    var _a;
+    (_a = this.element) == null ? void 0 : _a.remove();
+    this.element = void 0;
+    this.currentPosition = { x: 0, y: 0 };
+    this.currentScale = 1;
+    this.isZooming$.next(false);
+  }
+  moveAt(position) {
+    var _a;
+    const imgElement = (_a = this.element) == null ? void 0 : _a.querySelector(`img`);
     imgElement == null ? void 0 : imgElement.style.setProperty(
       `transform`,
-      `translate3d(${imgLastPosition.x}px, ${imgLastPosition.y}px, 0px) scale3d(${newScale}, ${newScale}, 1)`
+      `translate3d(${position.x}px, ${position.y}px, 0px) scale3d(${this.currentScale}, ${this.currentScale}, 1)`
     );
-    lastUserScale = newScale;
-  };
-  const move = (delta, { isFirst, isLast }) => {
-    const imgElement = imageMagnifierContainer == null ? void 0 : imageMagnifierContainer.querySelector(`img`);
-    if (isFirst) {
-      movingLastDelta = delta;
-    }
-    if (delta) {
-      const newOffsetX = delta.x - ((movingLastDelta == null ? void 0 : movingLastDelta.x) || 0);
-      const newOffsetY = delta.y - ((movingLastDelta == null ? void 0 : movingLastDelta.y) || 0);
-      imgLastPosition = {
-        x: imgLastPosition.x + newOffsetX,
-        y: imgLastPosition.y + newOffsetY
-      };
-      imgElement == null ? void 0 : imgElement.style.setProperty(
-        `transform`,
-        `translate3d(${imgLastPosition.x}px, ${imgLastPosition.y}px, 0px) scale3d(${baseScale}, ${baseScale}, 1)`
-      );
-      movingLastDelta = delta;
-    }
-    if (isLast) {
-      movingLastDelta = void 0;
-    }
-  };
-  const exit = () => {
-    lastUserScale = 1;
-    imageMagnifierContainer == null ? void 0 : imageMagnifierContainer.remove();
-    imageMagnifierContainer = void 0;
-    isZooming$.next(false);
-  };
-  const _isZooming = () => isZooming$.value;
-  const destroy = () => {
-    imageMagnifierContainer == null ? void 0 : imageMagnifierContainer.remove();
-    imageMagnifierContainer = void 0;
-    isZooming$.complete();
-  };
-  return {
-    enter,
-    exit,
-    move,
-    scale,
-    setCurrentScaleAsBase,
-    getScaleValue: () => lastUserScale,
-    isZooming: _isZooming,
-    destroy,
-    isZooming$: isZooming$.asObservable()
-  };
-};
+    this.currentPosition = position;
+  }
+  scaleAt(userScale) {
+    var _a;
+    const computedScale = Math.max(0.01, userScale);
+    const imgElement = (_a = this.element) == null ? void 0 : _a.querySelector(`img`);
+    imgElement == null ? void 0 : imgElement.style.setProperty(
+      `transform`,
+      `translate3d(${this.currentPosition.x}px, ${this.currentPosition.y}px, 0px) scale3d(${computedScale}, ${computedScale}, 1)`
+    );
+    this.currentScale = computedScale;
+  }
+}
 const getNewScaledOffset = ({
   newScale,
   oldScale,
@@ -1528,35 +1463,33 @@ const getNewScaledOffset = ({
   const realScrollOffset = scrollOffset - oldCenterPosition;
   return Math.max(centerXPosition + realScrollOffset * scaleDifference, 0);
 };
-const createViewportZoomer = (reader) => {
-  const isZooming$ = new BehaviorSubject(false);
-  let baseScale = 1;
-  let lastUserScale = 1;
-  const reset = () => {
-    scale(0 - baseScale);
-    lastUserScale = 1;
-    baseScale = 1;
-  };
-  const enter = () => {
-    reset();
-    const spineElement = reader.spine.element;
+class ScrollableZoomer extends Zoomer {
+  constructor() {
+    super(...arguments);
+    this.isZooming$ = new BehaviorSubject(false);
+    this.currentScale = 1;
+    this.currentPosition = { x: 0, y: 0 };
+  }
+  enter() {
+    this.currentScale = 1;
+    this.currentPosition = { x: 0, y: 0 };
+    const spineElement = this.reader.spine.element;
     if (spineElement) {
       spineElement.style.transformOrigin = `0 0`;
     }
-    isZooming$.next(true);
-    scale(1);
-    setCurrentScaleAsBase();
-  };
-  const setCurrentScaleAsBase = () => {
-    baseScale = lastUserScale;
-  };
-  const scale = (userScale) => {
-    const spineElement = reader.spine.element;
-    const viewportElement = reader.navigation.getElement();
+    this.isZooming$.next(true);
+  }
+  exit() {
+    this.scaleAt(1);
+    this.isZooming$.next(false);
+  }
+  moveAt() {
+  }
+  scaleAt(userScale) {
+    const spineElement = this.reader.spine.element;
+    const viewportElement = this.reader.navigation.getElement();
     if (!spineElement || !viewportElement) return;
-    const roundedScale = Math.ceil(
-      (userScale < 1 ? baseScale - (1 - userScale) : baseScale + (userScale - 1)) * 100
-    ) / 100;
+    const roundedScale = Math.ceil(userScale * 100) / 100;
     const newScale = Math.max(roundedScale, 1);
     const currentScale = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
     const currentScrollTop = viewportElement.scrollTop;
@@ -1575,75 +1508,23 @@ const createViewportZoomer = (reader) => {
       screenSize: spineElement.offsetHeight,
       scrollOffset: currentScrollTop
     });
-    lastUserScale = newScale;
-  };
-  const move = (_, __) => {
-  };
-  const exit = () => {
-    reset();
-    isZooming$.next(false);
-  };
-  const _isZooming = () => isZooming$.value;
-  const destroy = () => {
-    isZooming$.complete();
-  };
-  return {
-    enter,
-    exit,
-    move,
-    scale,
-    setCurrentScaleAsBase,
-    getScaleValue: () => lastUserScale,
-    isZooming: _isZooming,
-    destroy,
-    isZooming$: isZooming$.asObservable()
-  };
-};
+    this.currentScale = roundedScale;
+  }
+}
 const zoomEnhancer = (next) => (options) => {
   const reader = next(options);
-  const elementZoomer = createElementZoomer(reader);
-  const viewportZoomer = createViewportZoomer(reader);
-  const currentZoomerSubject$ = new BehaviorSubject(void 0);
-  const isUsingScrollableViewport = () => reader.settings.settings.computedPageTurnMode === `scrollable`;
-  const enter = (imgElement) => {
-    var _a;
-    (_a = currentZoomerSubject$ == null ? void 0 : currentZoomerSubject$.value) == null ? void 0 : _a.exit();
-    if (isUsingScrollableViewport()) {
-      viewportZoomer.enter();
-      currentZoomerSubject$ == null ? void 0 : currentZoomerSubject$.next(viewportZoomer);
-      return;
-    }
-    if (!imgElement) {
-      Report.warn(`You should specify an element to zoom at`);
-      return;
-    }
-    elementZoomer.enter(imgElement);
-    currentZoomerSubject$ == null ? void 0 : currentZoomerSubject$.next(elementZoomer);
-  };
-  const setCurrentScaleAsBase = () => {
-    var _a;
-    (_a = currentZoomerSubject$.value) == null ? void 0 : _a.setCurrentScaleAsBase();
-  };
-  const scale = (userScale) => {
-    var _a;
-    if (!((_a = currentZoomerSubject$.value) == null ? void 0 : _a.isZooming())) {
-      Report.warn(`You need to start zoom before being able to call this fn`);
-      return;
-    }
-    currentZoomerSubject$.value.scale(userScale);
-  };
-  const move = (delta, options2) => {
-    var _a;
-    (_a = currentZoomerSubject$.value) == null ? void 0 : _a.move(delta, options2);
-  };
-  const exit = () => {
-    var _a;
-    (_a = currentZoomerSubject$.value) == null ? void 0 : _a.exit();
+  const controllableZoomer = new ControllableZoomer(reader);
+  const scrollableZoomer = new ScrollableZoomer(reader);
+  const zoomerSubject = new BehaviorSubject(scrollableZoomer);
+  const enter = (element) => {
+    const zoomer = reader.settings.values.computedPageTurnMode === `scrollable` ? scrollableZoomer : controllableZoomer;
+    zoomerSubject.next(zoomer);
+    zoomer.enter(element);
   };
   const destroy = () => {
-    elementZoomer.destroy();
-    viewportZoomer.destroy();
-    currentZoomerSubject$.complete();
+    controllableZoomer.exit();
+    scrollableZoomer.exit();
+    zoomerSubject.complete();
     reader.destroy();
   };
   return {
@@ -1651,23 +1532,23 @@ const zoomEnhancer = (next) => (options) => {
     destroy,
     zoom: {
       enter,
-      exit,
-      move,
-      isZooming: () => {
-        var _a;
-        return ((_a = currentZoomerSubject$.value) == null ? void 0 : _a.isZooming()) || false;
+      scaleAt: (scale) => zoomerSubject.getValue().scaleAt(scale),
+      moveAt: (position) => zoomerSubject.getValue().moveAt(position),
+      exit: () => zoomerSubject.getValue().exit(),
+      get currentPosition() {
+        return zoomerSubject.getValue().currentPosition;
       },
-      getScaleValue: () => {
-        var _a;
-        return ((_a = currentZoomerSubject$.value) == null ? void 0 : _a.getScaleValue()) || 1;
+      get currentScale() {
+        return zoomerSubject.getValue().currentScale;
       },
-      scale,
-      isUsingScrollableZoom: isUsingScrollableViewport,
-      setCurrentScaleAsBase,
-      $: {
-        isZooming$: currentZoomerSubject$.pipe(
-          switchMap((zoomer) => (zoomer == null ? void 0 : zoomer.isZooming$) || of(false))
-        )
+      isZooming$: zoomerSubject.pipe(
+        switchMap((zoomer) => zoomer.isZooming$)
+      ),
+      get zoomContainerElement() {
+        return zoomerSubject.getValue().element;
+      },
+      get isZooming() {
+        return zoomerSubject.getValue().isZooming$.getValue();
       }
     }
   };
@@ -1853,7 +1734,6 @@ class Pagination extends DestroyableClass {
     this.paginationSubject.complete();
   }
 }
-const __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY = `__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT`;
 const ITEM_EXTENSION_VALID_FOR_FRAME_SRC = [`.xhtml`, `.html`, `.htm`];
 const HTML_PREFIX$1 = `prose-reader`;
 const pointerEvents$1 = [
@@ -2038,6 +1918,80 @@ const getClosestValidOffsetFromApproximateOffsetInPages = (offset, pageWidth, it
     return offsetValues[offsetValues.length - 1] || 0;
   return offsetValues.find((offsetRange) => offset < offsetRange + pageWidth) || 0;
 };
+const getSpineItemNumberOfPages = ({
+  itemHeight,
+  itemWidth,
+  isUsingVerticalWriting,
+  settings,
+  context
+}) => {
+  const { pageTurnDirection, pageTurnMode } = settings.values;
+  if (pageTurnDirection === `vertical` && pageTurnMode === `scrollable`) {
+    return 1;
+  }
+  if (isUsingVerticalWriting || pageTurnDirection === `vertical`) {
+    return calculateNumberOfPagesForItem(
+      itemHeight,
+      context.getPageSize().height
+    );
+  }
+  return calculateNumberOfPagesForItem(itemWidth, context.getPageSize().width);
+};
+const getSpineItemPositionFromPageIndex = ({
+  pageIndex,
+  itemLayout,
+  context,
+  isUsingVerticalWriting
+}) => {
+  if (isUsingVerticalWriting) {
+    const ltrRelativeOffset2 = getItemOffsetFromPageIndex(
+      context.getPageSize().height,
+      pageIndex,
+      itemLayout.height
+    );
+    return {
+      x: 0,
+      y: ltrRelativeOffset2
+    };
+  }
+  const ltrRelativeOffset = getItemOffsetFromPageIndex(
+    context.getPageSize().width,
+    pageIndex,
+    itemLayout.width
+  );
+  if (context.isRTL()) {
+    return {
+      x: itemLayout.width - ltrRelativeOffset - context.getPageSize().width,
+      y: 0
+    };
+  }
+  return {
+    x: ltrRelativeOffset,
+    y: 0
+  };
+};
+const getSpineItemPagesPosition = ({
+  context,
+  isUsingVerticalWriting,
+  settings,
+  itemLayout
+}) => {
+  const numberOfPages = getSpineItemNumberOfPages({
+    context,
+    isUsingVerticalWriting,
+    itemHeight: itemLayout.height,
+    itemWidth: itemLayout.width,
+    settings
+  });
+  return new Array(numberOfPages).fill(void 0).map(
+    (_, pageIndex) => getSpineItemPositionFromPageIndex({
+      context,
+      isUsingVerticalWriting,
+      itemLayout,
+      pageIndex
+    })
+  );
+};
 const createSpineItemLocator = ({
   context,
   settings
@@ -2050,52 +2004,6 @@ const createSpineItemLocator = ({
     x: Math.min(itemWidth, Math.max(0, spineItemPosition.x)),
     y: Math.min(itemHeight, Math.max(0, spineItemPosition.y))
   });
-  const getSpineItemNumberOfPages = ({
-    itemHeight,
-    itemWidth,
-    isUsingVerticalWriting
-  }) => {
-    const { pageTurnDirection, pageTurnMode } = settings.settings;
-    if (pageTurnDirection === `vertical` && pageTurnMode === `scrollable`) {
-      return 1;
-    }
-    if (isUsingVerticalWriting || pageTurnDirection === `vertical`) {
-      return calculateNumberOfPagesForItem(
-        itemHeight,
-        context.getPageSize().height
-      );
-    }
-    return calculateNumberOfPagesForItem(itemWidth, context.getPageSize().width);
-  };
-  const getSpineItemPositionFromPageIndex = (pageIndex, spineItem) => {
-    const { width: itemWidth, height: itemHeight } = spineItem.getElementDimensions();
-    if (spineItem.isUsingVerticalWriting()) {
-      const ltrRelativeOffset2 = getItemOffsetFromPageIndex(
-        context.getPageSize().height,
-        pageIndex,
-        itemHeight
-      );
-      return {
-        x: 0,
-        y: ltrRelativeOffset2
-      };
-    }
-    const ltrRelativeOffset = getItemOffsetFromPageIndex(
-      context.getPageSize().width,
-      pageIndex,
-      itemWidth
-    );
-    if (context.isRTL()) {
-      return {
-        x: itemWidth - ltrRelativeOffset - context.getPageSize().width,
-        y: 0
-      };
-    }
-    return {
-      x: ltrRelativeOffset,
-      y: 0
-    };
-  };
   const getSpineItemPageIndexFromPosition = ({
     itemWidth,
     itemHeight,
@@ -2113,7 +2021,9 @@ const createSpineItemLocator = ({
     const numberOfPages = getSpineItemNumberOfPages({
       isUsingVerticalWriting,
       itemHeight,
-      itemWidth
+      itemWidth,
+      context,
+      settings
     });
     if (isUsingVerticalWriting) {
       return getPageFromOffset(position.y, pageHeight, numberOfPages);
@@ -2133,7 +2043,7 @@ const createSpineItemLocator = ({
     }
     const spineItemWidth = ((_a = spineItem.getElementDimensions()) == null ? void 0 : _a.width) || 0;
     const pageWidth = context.getPageSize().width;
-    if (offsetOfNodeInSpineItem) {
+    if (offsetOfNodeInSpineItem !== void 0) {
       const val = getClosestValidOffsetFromApproximateOffsetInPages(
         offsetOfNodeInSpineItem,
         pageWidth,
@@ -2149,10 +2059,12 @@ const createSpineItemLocator = ({
     const frame = (_a = spineItem.frame) == null ? void 0 : _a.element;
     if (((_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.document) && // very important because it is being used by next functions
     frame.contentWindow.document.body !== null) {
-      const { x: left, y: top } = getSpineItemPositionFromPageIndex(
+      const { x: left, y: top } = getSpineItemPositionFromPageIndex({
         pageIndex,
-        spineItem
-      );
+        itemLayout: spineItem.getElementDimensions(),
+        context,
+        isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting()
+      });
       const viewport = {
         left,
         right: left + pageSize.width,
@@ -2204,12 +2116,33 @@ const createSpineItemLocator = ({
   };
   return {
     getSpineItemPositionFromNode,
-    getSpineItemPositionFromPageIndex,
+    getSpineItemPositionFromPageIndex: ({
+      pageIndex,
+      itemLayout,
+      isUsingVerticalWriting
+    }) => getSpineItemPositionFromPageIndex({
+      context,
+      isUsingVerticalWriting,
+      itemLayout,
+      pageIndex
+    }),
     getSpineItemPageIndexFromPosition,
     getSpineItemPageIndexFromNode,
     getSpineItemClosestPositionFromUnsafePosition,
     getFirstNodeOrRangeAtPage,
-    getSpineItemNumberOfPages
+    getSpineItemPagesPosition: ({ item }) => {
+      return getSpineItemPagesPosition({
+        context,
+        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+        settings,
+        itemLayout: item.getElementDimensions()
+      });
+    },
+    getSpineItemNumberOfPages: (params) => getSpineItemNumberOfPages({
+      context,
+      settings,
+      ...params
+    })
   };
 };
 const createNavigationResolver$1 = ({
@@ -2224,10 +2157,11 @@ const createNavigationResolver$1 = ({
       itemHeight: height,
       itemWidth: width
     });
-    return spineItemLocator.getSpineItemPositionFromPageIndex(
-      numberOfPages - 1,
-      spineItem
-    );
+    return spineItemLocator.getSpineItemPositionFromPageIndex({
+      pageIndex: numberOfPages - 1,
+      isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
+      itemLayout: spineItem.getElementDimensions()
+    });
   };
   const getNavigationFromNode = (spineItem, node, offset) => {
     const position = spineItemLocator.getSpineItemPositionFromNode(
@@ -2264,10 +2198,13 @@ const getAdjustedPositionWithSafeEdge = ({
   isRTL,
   pageSizeHeight,
   spineItemsManager,
-  visibleAreaRectWidth
+  visibleAreaRectWidth,
+  spineLayout
 }) => {
-  const lastSpineItem = spineItemsManager.get(spineItemsManager.getLength() - 1);
-  const distanceOfLastSpineItem = spineItemsManager.getAbsolutePositionOf(
+  const lastSpineItem = spineItemsManager.get(
+    spineItemsManager.items.length - 1
+  );
+  const distanceOfLastSpineItem = spineLayout.getAbsolutePositionOf(
     lastSpineItem || 0
   );
   const maximumYOffset = distanceOfLastSpineItem.bottom - pageSizeHeight;
@@ -2311,10 +2248,10 @@ const getSpinePositionFromSpineItemAnchor = ({
     spineItem,
     context
   });
-  const position = spineLocator.getSpinePositionFromSpineItemPosition(
-    { x: spineItemOffset, y: 0 },
+  const position = spineLocator.getSpinePositionFromSpineItemPosition({
+    spineItemPosition: { x: spineItemOffset, y: 0 },
     spineItem
-  );
+  });
   return position;
 };
 const getNavigationForAnchor = ({
@@ -2390,10 +2327,10 @@ const getNavigationFromSpineItemPosition = ({
     spineItemPosition,
     spineItem
   );
-  const spinePosition = spineLocator.getSpinePositionFromSpineItemPosition(
-    navigationInSpineItem,
+  const spinePosition = spineLocator.getSpinePositionFromSpineItemPosition({
+    spineItemPosition: navigationInSpineItem,
     spineItem
-  );
+  });
   return getAdjustedPositionForSpread({
     position: spinePosition,
     pageSizeWidth: context.getPageSize().width,
@@ -2416,10 +2353,10 @@ const getNavigationForPosition = ({
       spineItem,
       spineItemPosition
     );
-    const viewportNavigation = spineLocator.getSpinePositionFromSpineItemPosition(
-      spineItemValidPosition,
+    const viewportNavigation = spineLocator.getSpinePositionFromSpineItemPosition({
+      spineItemPosition: spineItemValidPosition,
       spineItem
-    );
+    });
     return getAdjustedPositionForSpread({
       position: viewportNavigation,
       pageSizeWidth: context.getPageSize().width,
@@ -2446,14 +2383,15 @@ const getNavigationForSpineItemPage = ({
       spineLocator
     });
   }
-  const spineItemNavigation = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex(
+  const spineItemNavigation = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
     pageIndex,
+    isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
+    itemLayout: spineItem.getElementDimensions()
+  });
+  const readingOffset = spineLocator.getSpinePositionFromSpineItemPosition({
+    spineItemPosition: spineItemNavigation,
     spineItem
-  );
-  const readingOffset = spineLocator.getSpinePositionFromSpineItemPosition(
-    spineItemNavigation,
-    spineItem
-  );
+  });
   return getAdjustedPositionForSpread({
     position: readingOffset,
     pageSizeWidth: context.getPageSize().width,
@@ -3336,16 +3274,23 @@ const resolveCfi = ({
   if (doc) {
     try {
       const { node, offset: resolvedOffset } = cfiHandler.resolve(doc, {});
-      return { node, offset: offset ?? resolvedOffset, spineItemIndex };
+      return {
+        node,
+        offset: offset ?? resolvedOffset,
+        spineItemIndex,
+        spineItem
+      };
     } catch (e) {
       Report.error(e);
       return {
-        spineItemIndex
+        spineItemIndex,
+        spineItem
       };
     }
   }
   return {
-    spineItemIndex
+    spineItemIndex,
+    spineItem
   };
 };
 const NAMESPACE$4 = `spineNavigator`;
@@ -3353,7 +3298,8 @@ const createNavigationResolver = ({
   context,
   spineItemsManager,
   locator,
-  settings
+  settings,
+  spineLayout
 }) => {
   const spineItemNavigator = createNavigationResolver$1({ context, settings });
   const arePositionsDifferent = (a, b) => a.x !== b.x || a.y !== b.y;
@@ -3368,10 +3314,10 @@ const createNavigationResolver = ({
       Report.warn(NAMESPACE$4, `unable to detect item id from cfi ${cfi}`);
     } else {
       const spineItemNavigation = node ? spineItemNavigator.getNavigationFromNode(spineItem, node, offset) : { x: 0, y: 0 };
-      const readingPosition = locator.getSpinePositionFromSpineItemPosition(
-        spineItemNavigation,
+      const readingPosition = locator.getSpinePositionFromSpineItemPosition({
+        spineItemPosition: spineItemNavigation,
         spineItem
-      );
+      });
       return getAdjustedPositionForSpread({
         position: readingPosition,
         pageSizeWidth: context.getPageSize().width,
@@ -3382,10 +3328,10 @@ const createNavigationResolver = ({
   };
   const getNavigationForLastPage = (spineItem) => {
     const spineItemNavigation = spineItemNavigator.getNavigationForLastPage(spineItem);
-    const position = locator.getSpinePositionFromSpineItemPosition(
-      spineItemNavigation,
+    const position = locator.getSpinePositionFromSpineItemPosition({
+      spineItemPosition: spineItemNavigation,
       spineItem
-    );
+    });
     return getAdjustedPositionForSpread({
       position,
       pageSizeWidth: context.getPageSize().width,
@@ -3405,7 +3351,7 @@ const createNavigationResolver = ({
     return { x: 0, y: 0 };
   };
   const getMostPredominantNavigationForPosition = (viewportPosition) => {
-    const pageTurnDirection = settings.settings.computedPageTurnDirection;
+    const pageTurnDirection = settings.values.computedPageTurnDirection;
     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;
@@ -3417,7 +3363,8 @@ const createNavigationResolver = ({
       isRTL: context.isRTL(),
       pageSizeHeight: context.getPageSize().height,
       visibleAreaRectWidth: context.state.visibleAreaRect.width,
-      spineItemsManager
+      spineItemsManager,
+      spineLayout
     });
     return getNavigationForPosition({
       context,
@@ -3427,7 +3374,7 @@ const createNavigationResolver = ({
     });
   };
   const isNavigationGoingForwardFrom = (to, from2) => {
-    const pageTurnDirection = settings.settings.computedPageTurnDirection;
+    const pageTurnDirection = settings.values.computedPageTurnDirection;
     if (pageTurnDirection === `vertical`) {
       return to.y > from2.y;
     }
@@ -3470,7 +3417,8 @@ const createNavigationResolver = ({
       isRTL: context.isRTL(),
       pageSizeHeight: context.getPageSize().height,
       visibleAreaRectWidth: context.state.visibleAreaRect.width,
-      spineItemsManager
+      spineItemsManager,
+      spineLayout
     }),
     isNavigationGoingForwardFrom,
     areNavigationDifferent,
@@ -3485,10 +3433,9 @@ const createNavigationResolver = ({
 };
 const getScaledDownPosition = ({
   position: { x, y },
-  spine,
+  spineElement,
   element
 }) => {
-  const spineElement = spine.element;
   if (!spineElement) throw new Error("Invalid spine element");
   const spineScaleX = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
   const scaledDownPosition = {
@@ -3522,7 +3469,7 @@ class ViewportNavigator extends DestroyableClass {
     this.navigateSubject = new Subject();
     this.scrollingSubject = new BehaviorSubject(false);
     this.isScrolling$ = this.scrollingSubject.asObservable();
-    const settingsThatRequireLayout$ = settings.settings$.pipe(
+    const settingsThatRequireLayout$ = settings.values$.pipe(
       mapKeysTo([
         `computedPageTurnDirection`,
         `computedPageTurnMode`,
@@ -3536,7 +3483,7 @@ class ViewportNavigator extends DestroyableClass {
     ).pipe(
       withLatestFrom(this.viewportElement$),
       tap$1(([, element]) => {
-        if (settings.settings.computedPageTurnMode === `scrollable`) {
+        if (settings.values.computedPageTurnMode === `scrollable`) {
           element.style.removeProperty(`transform`);
           element.style.removeProperty(`transition`);
           element.style.overflow = `scroll`;
@@ -3548,7 +3495,7 @@ class ViewportNavigator extends DestroyableClass {
     );
     this.layout$ = updateElementOnSettingsChange$.pipe(
       tap$1(() => {
-        report$2.info(`layout`, settings.settings);
+        report$2.info(`layout`, settings.values);
       }),
       share()
     );
@@ -3559,7 +3506,7 @@ class ViewportNavigator extends DestroyableClass {
     );
     this.isNavigating$ = navigate$.pipe(
       map$1(({ animation, position }) => {
-        const shouldAnimate = !(!animation || animation === `turn` && settings.settings.computedPageTurnAnimation === `none`);
+        const shouldAnimate = !(!animation || animation === `turn` && settings.values.computedPageTurnAnimation === `none`);
         return {
           type: `manualAdjust`,
           shouldAnimate,
@@ -3576,8 +3523,8 @@ class ViewportNavigator extends DestroyableClass {
           of(null).pipe(
             mergeMap(() => {
               if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`) return of(false);
-              const animationDuration = currentEvent.animation === `snap` ? settings.settings.snapAnimationDuration : settings.settings.computedPageTurnAnimationDuration;
-              const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.settings.computedPageTurnAnimation;
+              const animationDuration = currentEvent.animation === `snap` ? settings.values.snapAnimationDuration : settings.values.computedPageTurnAnimationDuration;
+              const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.values.computedPageTurnAnimation;
               return of(currentEvent).pipe(
                 /**
                  * @important
@@ -3658,7 +3605,7 @@ class ViewportNavigator extends DestroyableClass {
    */
   setViewportPosition({ x, y }) {
     const element = this.viewportElement$.getValue();
-    if (this.settings.settings.computedPageTurnMode === `scrollable`) {
+    if (this.settings.values.computedPageTurnMode === `scrollable`) {
       this.scrollingSubject.next(true);
       element.scrollTo({ left: x, top: y, behavior: "instant" });
       timer(1).pipe(
@@ -3677,14 +3624,14 @@ class ViewportNavigator extends DestroyableClass {
   }
   get viewportPosition() {
     const element = this.viewportElement$.getValue();
-    if (this.settings.settings.computedPageTurnMode === `scrollable`) {
+    if (this.settings.values.computedPageTurnMode === `scrollable`) {
       return getScaledDownPosition({
         element,
         position: {
           x: (element == null ? void 0 : element.scrollLeft) ?? 0,
           y: (element == null ? void 0 : element.scrollTop) ?? 0
         },
-        spine: this.spine
+        spineElement: this.spine.element
       });
     }
     const { x, y } = (element == null ? void 0 : element.getBoundingClientRect()) ?? {
@@ -3722,18 +3669,19 @@ const SCROLL_FINISHED_DEBOUNCE_TIMEOUT = 500;
 const NAMESPACE$2 = `navigation/UserNavigator`;
 const report$1 = Report.namespace(NAMESPACE$2);
 class UserNavigator extends DestroyableClass {
-  constructor(settings, element$, context, scrollHappeningFromBrowser$) {
+  constructor(settings, element$, context, scrollHappeningFromBrowser$, spine) {
     super();
     this.settings = settings;
     this.element$ = element$;
     this.context = context;
     this.scrollHappeningFromBrowser$ = scrollHappeningFromBrowser$;
+    this.spine = spine;
     this.navigationSubject = new Subject();
     this.locker = new Locker();
     this.navigation$ = this.navigationSubject.asObservable();
     const userScroll$ = element$.pipe(
       switchMap(
-        (element) => settings.settings$.pipe(
+        (element) => settings.values$.pipe(
           map$1(({ computedPageTurnMode }) => computedPageTurnMode),
           distinctUntilChanged$1(),
           filter$1(
@@ -3750,31 +3698,10 @@ class UserNavigator extends DestroyableClass {
       ),
       share()
     );
-    const userScrollEnd$ = userScroll$.pipe(
-      exhaustMap(
-        () => userScroll$.pipe(
-          debounceTime$1(
-            SCROLL_FINISHED_DEBOUNCE_TIMEOUT,
-            animationFrameScheduler
-          )
-        )
-      ),
-      share()
-    );
-    const lockNavigationWhileScrolling$ = userScroll$.pipe(
-      exhaustMap(() => {
-        return userScrollEnd$.pipe(
-          take$1(1),
-          finalize(() => {
-          })
-        );
-      })
-    );
-    const navigateOnScroll$ = settings.settings$.pipe(
+    const navigateOnScroll$ = settings.values$.pipe(
       map$1(({ computedPageTurnMode }) => computedPageTurnMode),
       distinctUntilChanged$1(),
       filter$1((computedPageTurnMode) => computedPageTurnMode === "scrollable"),
-      withLatestFrom(element$),
       switchMap(() => userScroll$),
       exhaustMap((event) => {
         const unlock = this.locker.lock();
@@ -3785,14 +3712,19 @@ class UserNavigator extends DestroyableClass {
           ),
           first$1(),
           tap$1(() => {
-            const element = event.target;
+            const targetElement = event.target;
+            const scaledDownPosition = getScaledDownPosition({
+              element: targetElement,
+              position: {
+                x: targetElement.scrollLeft ?? 0,
+                y: targetElement.scrollTop ?? 0
+              },
+              spineElement: this.spine.element
+            });
             this.navigate({
               animation: false,
               type: "scroll",
-              position: {
-                x: element.scrollLeft ?? 0,
-                y: element.scrollTop ?? 0
-              }
+              position: scaledDownPosition
             });
           }),
           finalize(() => {
@@ -3801,7 +3733,7 @@ class UserNavigator extends DestroyableClass {
         );
       })
     );
-    merge(lockNavigationWhileScrolling$, navigateOnScroll$).pipe(takeUntil(this.destroy$)).subscribe();
+    merge(navigateOnScroll$).pipe(takeUntil(this.destroy$)).subscribe();
   }
   /**
    * Remember that this navigation is not trustable.
@@ -3820,14 +3752,15 @@ const restoreNavigationForControlledPageTurnMode = ({
   spineLocator,
   navigation,
   navigationResolver,
-  spineItemsManager
+  spineItemsManager,
+  spineLayout
 }) => {
   var _a, _b;
   const spineItem = spineItemsManager.get(navigation.spineItem);
   if (!spineItem) {
     return { x: 0, y: 0 };
   }
-  const spineItemAbsolutePosition = spineItemsManager.getAbsolutePositionOf(spineItem);
+  const spineItemAbsolutePosition = spineLayout.getAbsolutePositionOf(spineItem);
   const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
     navigation.position,
     spineItem
@@ -3884,12 +3817,13 @@ const restoreNavigationForScrollingPageTurnMode = ({
   spineLocator,
   spineItemsManager,
   settings,
-  navigationResolver
+  navigationResolver,
+  spineLayout
 }) => {
   const { spineItem } = navigation;
   const foundSpineItem = spineItemsManager.get(spineItem);
   if (!foundSpineItem) return { x: 0, y: 0 };
-  const { height, top } = spineItemsManager.getAbsolutePositionOf(foundSpineItem);
+  const { height, top } = spineLayout.getAbsolutePositionOf(foundSpineItem);
   const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
     navigation.position,
     foundSpineItem
@@ -3898,7 +3832,7 @@ const restoreNavigationForScrollingPageTurnMode = ({
     y: 0,
     x: 0
   };
-  if (settings.settings.computedPageTurnDirection === "vertical") {
+  if (settings.values.computedPageTurnDirection === "vertical") {
     if (top === navigation.spineItemTop && height === navigation.spineItemHeight && isPositionWithinSpineItem) {
       return navigation.position;
     }
@@ -3913,10 +3847,10 @@ const restoreNavigationForScrollingPageTurnMode = ({
         },
         foundSpineItem
       );
-      return spineLocator.getSpinePositionFromSpineItemPosition(
-        positionInSpineItem2,
-        foundSpineItem
-      );
+      return spineLocator.getSpinePositionFromSpineItemPosition({
+        spineItemPosition: positionInSpineItem2,
+        spineItem: foundSpineItem
+      });
     }
     if (top === navigation.spineItemTop && height !== navigation.spineItemHeight) {
       const positionYfromBottomPreviousNavigation = (navigation.spineItemHeight ?? positionInSpineItem.y) - positionInSpineItem.y;
@@ -3929,10 +3863,10 @@ const restoreNavigationForScrollingPageTurnMode = ({
           positionInspineItem,
           foundSpineItem
         );
-        return spineLocator.getSpinePositionFromSpineItemPosition(
-          positionInSpineItem2,
-          foundSpineItem
-        );
+        return spineLocator.getSpinePositionFromSpineItemPosition({
+          spineItemPosition: positionInSpineItem2,
+          spineItem: foundSpineItem
+        });
       }
       if (!isPositionWithinSpineItem) {
         if (navigation.directionFromLastNavigation === "backward") {
@@ -3940,26 +3874,26 @@ const restoreNavigationForScrollingPageTurnMode = ({
             y: height - positionYfromBottomPreviousNavigation,
             x: navigation.position.x
           };
-          return spineLocator.getSpinePositionFromSpineItemPosition(
-            spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
+          return spineLocator.getSpinePositionFromSpineItemPosition({
+            spineItemPosition: spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
               positionInItem,
               foundSpineItem
             ),
-            foundSpineItem
-          );
+            spineItem: foundSpineItem
+          });
         }
         if (navigation.directionFromLastNavigation === "forward" || navigation.directionFromLastNavigation === "anchor") {
           const positionInItem = {
             y: height - positionYfromBottomPreviousNavigation,
             x: navigation.position.x
           };
-          return spineLocator.getSpinePositionFromSpineItemPosition(
-            spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
+          return spineLocator.getSpinePositionFromSpineItemPosition({
+            spineItemPosition: spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
               positionInItem,
               foundSpineItem
             ),
-            foundSpineItem
-          );
+            spineItem: foundSpineItem
+          });
         }
         return navigationResolver.getNavigationForSpineIndexOrId(foundSpineItem);
       }
@@ -3972,44 +3906,46 @@ const restorePosition = ({
   spineItemsManager,
   settings,
   spineLocator,
-  navigationResolver
+  navigationResolver,
+  spineLayout
 }) => {
-  if (settings.settings.computedPageTurnMode === "scrollable") {
+  if (settings.values.computedPageTurnMode === "scrollable") {
     return restoreNavigationForScrollingPageTurnMode({
       navigation,
       spineLocator,
       navigationResolver,
       settings,
-      spineItemsManager
+      spineItemsManager,
+      spineLayout
     });
   }
   return restoreNavigationForControlledPageTurnMode({
     navigation,
     spineLocator,
     navigationResolver,
-    spineItemsManager
+    spineItemsManager,
+    spineLayout
   });
 };
 const withRestoredPosition = ({
-  spineItemsManager,
   settings,
-  spineLocator,
   navigationResolver,
-  spineItemLocator,
-  context
+  context,
+  spine
 }) => (stream) => stream.pipe(
   map$1((params) => ({
     ...params,
     navigation: {
       ...params.navigation,
       position: restorePosition({
-        spineLocator,
+        spineLocator: spine.locator,
         navigation: params.navigation,
         navigationResolver,
         settings,
-        spineItemsManager,
-        spineItemLocator,
-        context
+        spineItemsManager: spine.spineItemsManager,
+        spineItemLocator: spine.locator.spineItemLocator,
+        context,
+        spineLayout: spine.spineLayout
       })
     }
   }))
@@ -4052,7 +3988,7 @@ const getOrGuessDirection = ({
   if (!navigation.position) {
     return "forward";
   }
-  if (settings.settings.computedPageTurnDirection === "vertical") {
+  if (settings.values.computedPageTurnDirection === "vertical") {
     if (navigation.position.y > previousNavigation.position.y) {
       return "forward";
     } else {
@@ -4102,7 +4038,7 @@ const withSpineItemPosition = ({
   navigationResolver
 }) => (stream) => {
   const getPosition = (navigation) => {
-    const { navigationSnapThreshold, computedPageTurnMode } = settings.settings;
+    const { navigationSnapThreshold, computedPageTurnMode } = settings.values;
     const spineItem = spineItemsManager.get(navigation.spineItem);
     if (!spineItem || !navigation.position) return void 0;
     if (computedPageTurnMode === "controlled") {
@@ -4124,10 +4060,11 @@ const withSpineItemPosition = ({
         restrictToScreen: true
       });
       const beginPageIndexForDirection = (navigation.directionFromLastNavigation === "forward" || navigation.directionFromLastNavigation === "anchor" ? visiblePagesAtNavigablePosition == null ? void 0 : visiblePagesAtNavigablePosition.beginPageIndex : visiblePagesAtNavigablePosition == null ? void 0 : visiblePagesAtNavigablePosition.endPageIndex) ?? 0;
-      const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex(
-        beginPageIndexForDirection,
-        spineItem
-      );
+      const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
+        pageIndex: beginPageIndexForDirection,
+        isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
+        itemLayout: spineItem.getElementDimensions()
+      });
       return positionInSpineItem;
     }
     return spineLocator.getSpineItemPositionFromSpinePosition(
@@ -4183,13 +4120,13 @@ const withFallbackPosition = ({
     })
   );
 };
-const withSpineItemLayoutInfo = ({ spineItemsManager }) => (stream) => {
+const withSpineItemLayoutInfo = ({ spine }) => (stream) => {
   return stream.pipe(
     map$1(({ navigation, ...rest }) => {
-      const spineItemDimensions = spineItemsManager.getAbsolutePositionOf(
+      const spineItemDimensions = spine.spineLayout.getAbsolutePositionOf(
         navigation.spineItem
       );
-      const spineItem = spineItemsManager.get(navigation.spineItem);
+      const spineItem = spine.spineItemsManager.get(navigation.spineItem);
       return {
         navigation: {
           ...navigation,
@@ -4273,14 +4210,14 @@ const withSpineItem = ({
       cfi,
       directionFromLastNavigation: direction
     } = navigation;
-    const { navigationSnapThreshold, computedPageTurnMode } = settings.settings;
+    const { navigationSnapThreshold, computedPageTurnMode } = settings.values;
     if (spineItem !== void 0) {
       const existingSpineItem = spineItemsManager.get(spineItem);
       if (existingSpineItem) return existingSpineItem;
     }
     if (typeof spineItem === "number") {
-      if (spineItem > spineItemsManager.getLength() - 1) {
-        return spineItemsManager.get(spineItemsManager.getLength() - 1);
+      if (spineItem > spineItemsManager.items.length - 1) {
+        return spineItemsManager.get(spineItemsManager.items.length - 1);
       }
       return spineItemsManager.get(0);
     }
@@ -4337,15 +4274,14 @@ const withSpineItem = ({
 const NAMESPACE$1 = `navigation/InternalNavigator`;
 const report = Report.namespace(NAMESPACE$1);
 class InternalNavigator extends DestroyableClass {
-  constructor(settings, context, userNavigation$, viewportController, navigationResolver, spineItemsManager, spineLocator, element$, isUserLocked$) {
+  constructor(settings, context, userNavigation$, viewportController, navigationResolver, spine, element$, isUserLocked$) {
     super();
     this.settings = settings;
     this.context = context;
     this.userNavigation$ = userNavigation$;
     this.viewportController = viewportController;
     this.navigationResolver = navigationResolver;
-    this.spineItemsManager = spineItemsManager;
-    this.spineLocator = spineLocator;
+    this.spine = spine;
     this.element$ = element$;
     this.isUserLocked$ = isUserLocked$;
     this.navigationSubject = new BehaviorSubject({
@@ -4371,7 +4307,7 @@ class InternalNavigator extends DestroyableClass {
     this.locker = new Locker();
     const layoutHasChanged$ = merge(
       viewportController.layout$,
-      spineItemsManager.layout$.pipe(filter$1((hasChanged) => hasChanged))
+      spine.spineLayout.layout$.pipe(filter$1(({ hasChanged }) => hasChanged))
     );
     const navigationFromUser$ = userNavigation$.pipe(
       withLatestFrom(this.navigationSubject),
@@ -4395,43 +4331,39 @@ class InternalNavigator extends DestroyableClass {
         context,
         navigationResolver,
         settings,
-        spineItemsManager,
-        spineLocator
+        spineItemsManager: spine.spineItemsManager,
+        spineLocator: spine.locator
       }),
       withSpineItemPosition({
-        context,
         navigationResolver,
         settings,
-        spineItemsManager,
-        spineLocator
+        spineItemsManager: spine.spineItemsManager,
+        spineLocator: spine.locator
       }),
       withSpineItemLayoutInfo({
-        spineItemsManager
+        spine
       })
     ).pipe(
       withFallbackPosition({
         navigationResolver,
-        spineItemsManager
+        spineItemsManager: spine.spineItemsManager
       }),
       withLatestFrom(isUserLocked$),
       switchMap(([params, isUserLocked]) => {
-        const shouldNotAlterPosition = params.navigation.cfi || params.navigation.url || settings.settings.computedPageTurnMode === "scrollable" || isUserLocked;
+        const shouldNotAlterPosition = params.navigation.cfi || params.navigation.url || settings.values.computedPageTurnMode === "scrollable" || isUserLocked;
         return of(params).pipe(
           shouldNotAlterPosition ? identity : withRestoredPosition({
             navigationResolver,
             settings,
-            spineItemsManager,
-            spineLocator,
-            spineItemLocator: spineLocator.spineItemLocator,
+            spine,
             context
           })
         );
       }),
       withSpineItemPosition({
-        spineItemsManager,
-        spineLocator,
+        spineItemsManager: spine.spineItemsManager,
+        spineLocator: spine.locator,
         settings,
-        context,
         navigationResolver
       }),
       map$1((params) => params.navigation),
@@ -4488,10 +4420,8 @@ class InternalNavigator extends DestroyableClass {
       withRestoredPosition({
         navigationResolver,
         settings,
-        spineItemsManager,
-        spineLocator,
-        spineItemLocator: spineLocator.spineItemLocator,
-        context
+        context,
+        spine
       }),
       map$1((params) => {
         const navigation = {
@@ -4506,13 +4436,12 @@ class InternalNavigator extends DestroyableClass {
         };
       }),
       withSpineItemLayoutInfo({
-        spineItemsManager
+        spine
       }),
       withSpineItemPosition({
-        spineItemsManager,
-        spineLocator,
+        spineItemsManager: spine.spineItemsManager,
+        spineLocator: spine.locator,
         settings,
-        context,
         navigationResolver
       }),
       map$1(({ navigation }) => navigation),
@@ -4596,7 +4525,6 @@ class InternalNavigator extends DestroyableClass {
 }
 const createNavigator = ({
   spineItemsManager,
-  spineItemsObserver,
   context,
   parentElement$,
   hookManager,
@@ -4608,7 +4536,8 @@ const createNavigator = ({
     context,
     settings,
     spineItemsManager,
-    locator: spine.locator
+    locator: spine.locator,
+    spineLayout: spine.spineLayout
   });
   const viewportNavigator = new ViewportNavigator(
     settings,
@@ -4620,7 +4549,7 @@ const createNavigator = ({
   const isSpineScrolling$ = merge(
     spine.elementResize$,
     spine.element$.pipe(switchMap$1((element) => fromEvent(element, "scroll"))),
-    spineItemsObserver.itemResize$
+    spine.spineItemsObserver.itemResize$
   ).pipe(
     switchMap$1(() => merge(of(true), timer(5).pipe(map(() => false)))),
     startWith(false)
@@ -4638,7 +4567,8 @@ const createNavigator = ({
     settings,
     element$,
     context,
-    scrollHappeningFromBrowser$
+    scrollHappeningFromBrowser$,
+    spine
   );
   const internalNavigator = new InternalNavigator(
     settings,
@@ -4646,8 +4576,7 @@ const createNavigator = ({
     userNavigator.navigation$,
     viewportNavigator,
     navigationResolver,
-    spineItemsManager,
-    spine.locator,
+    spine,
     element$,
     userNavigator.locker.isLocked$
   );
@@ -4729,14 +4658,14 @@ class SettingsManager3 {
     const { commit } = this._prepareUpdate(settings);
     commit();
   }
-  get settings() {
+  get values() {
     if (!this.outputSettings) {
       const { commit } = this._prepareUpdate(this.inputSettings);
       return commit();
     }
     return this.outputSettings;
   }
-  get settings$() {
+  get values$() {
     if (!this.outputSettings) {
       const { commit } = this._prepareUpdate(this.inputSettings);
       commit();
@@ -4756,10 +4685,10 @@ class ReaderSettingsManager extends SettingsManager3 {
       context.manifest$
     ]).pipe(
       tap(() => {
-        this.update(this.settings);
+        this.update(this.values);
       })
     );
-    const updateContextOnSettingsChanges$ = this.settings$.pipe(
+    const updateContextOnSettingsChanges$ = this.values$.pipe(
       tap(({ forceSinglePageMode }) => {
         context.update({ forceSinglePageMode });
       })
@@ -4899,7 +4828,7 @@ const getRootCfi = (spineItem) => {
   const itemAnchor = getItemAnchor(spineItem);
   return `epubcfi(/0${itemAnchor}) `;
 };
-const getCfi = Report.measurePerformance(
+const generateCfiForSpineItemPage = Report.measurePerformance(
   `getCfi`,
   10,
   ({
@@ -4936,7 +4865,7 @@ class PaginationController extends DestroyableClass {
     this.spineItemLocator = spineItemLocator;
     const updatePagination$ = merge(
       this.context.bridgeEvent.navigation$,
-      spineItemsManager.layout$.pipe(filter$1((hasChanged) => hasChanged))
+      spine.spineLayout.layout$.pipe(filter$1(({ hasChanged }) => hasChanged))
     ).pipe(
       switchMap(() => {
         const getVisiblePagesFromViewportPosition = ({
@@ -5021,12 +4950,12 @@ class PaginationController extends DestroyableClass {
         const endSpineItem = this.spineItemsManager.get(endSpineItemIndex);
         if (beginSpineItem === void 0 || endSpineItem === void 0) return;
         this.pagination.update({
-          beginCfi: getCfi({
+          beginCfi: generateCfiForSpineItemPage({
             pageIndex: beginPageIndexInSpineItem,
             spineItem: beginSpineItem,
             spineItemLocator
           }),
-          endCfi: getCfi({
+          endCfi: generateCfiForSpineItemPage({
             pageIndex: endPageIndexInSpineItem,
             spineItem: endSpineItem,
             spineItemLocator
@@ -5055,151 +4984,13 @@ const generateCfiFromRange = ({
   );
   return { start: startCFI, end: endCFI };
 };
-class SpineItemsObserver extends DestroyableClass {
-  constructor(spineItemsManager) {
-    super();
-    this.spineItemsManager = spineItemsManager;
-    this.itemIsReady$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
-        const itemsIsReady$ = items.map(
-          (item) => item.$.isReady$.pipe(map$1((isReady) => ({ item, isReady })))
-        );
-        return merge(...itemsIsReady$);
-      }),
-      share()
-    );
-    this.itemResize$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
-        const resize$ = items.map(
-          (item) => observeResize(item.element).pipe(
-            map$1((entries) => ({ entries, item }))
-          )
-        );
-        return merge(...resize$);
-      }),
-      share()
-    );
-  }
-}
-const NAMESPACE = `spineItemsManager`;
 class SpineItemsManager extends DestroyableClass {
   constructor(context, settings) {
     super();
     this.context = context;
     this.settings = settings;
-    this.layoutSubject = new Subject();
-    this.itemLayoutInformation = [];
     this.orderedSpineItemsSubject = new BehaviorSubject([]);
     this.items$ = this.orderedSpineItemsSubject.asObservable();
-    this.layout$ = this.layoutSubject.asObservable();
-  }
-  /**
-   * @todo
-   * move this logic to the spine
-   *
-   * @todo
-   * make sure to check how many times it is being called and try to reduce number of layouts
-   * it is called eery time an item is being unload (which can adds up quickly for big books)
-   */
-  layout() {
-    const manifest = this.context.manifest;
-    const newItemLayoutInformation = [];
-    const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
-    this.orderedSpineItemsSubject.value.reduce(
-      ({ horizontalOffset, verticalOffset }, item, index) => {
-        let minimumWidth = this.context.getPageSize().width;
-        let blankPagePosition = `none`;
-        const itemStartOnNewScreen = horizontalOffset % this.context.state.visibleAreaRect.width === 0;
-        const isLastItem = index === this.orderedSpineItemsSubject.value.length - 1;
-        if (this.context.state.isUsingSpreadMode) {
-          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-          const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
-          if (item.item.pageSpreadRight && itemStartOnNewScreen && !this.context.isRTL()) {
-            blankPagePosition = `before`;
-            minimumWidth = this.context.getPageSize().width * 2;
-          } else if (item.item.pageSpreadLeft && itemStartOnNewScreen && this.context.isRTL()) {
-            blankPagePosition = `before`;
-            minimumWidth = this.context.getPageSize().width * 2;
-          } else if (lastItemStartOnNewScreenInAPrepaginatedBook) {
-            if (this.context.isRTL()) {
-              blankPagePosition = `before`;
-            } else {
-              blankPagePosition = `after`;
-            }
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-        }
-        const { width, height } = item.layout({
-          minimumWidth,
-          blankPagePosition,
-          spreadPosition: this.context.state.isUsingSpreadMode ? itemStartOnNewScreen ? this.context.isRTL() ? `right` : `left` : this.context.isRTL() ? `left` : `right` : `none`
-        });
-        if (this.settings.settings.computedPageTurnDirection === `vertical`) {
-          const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - this.context.state.visibleAreaRect.height;
-          const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
-          if (this.context.isRTL()) {
-            item.adjustPositionOfElement({
-              top: currentValidEdgeYForVerticalPositioning,
-              left: currentValidEdgeXForVerticalPositioning
-            });
-          } else {
-            item.adjustPositionOfElement({
-              top: currentValidEdgeYForVerticalPositioning,
-              left: currentValidEdgeXForVerticalPositioning
-            });
-          }
-          const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
-          const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
-          newItemLayoutInformation.push({
-            left: currentValidEdgeXForVerticalPositioning,
-            right: newEdgeX,
-            top: currentValidEdgeYForVerticalPositioning,
-            bottom: newEdgeY,
-            height,
-            width
-          });
-          return {
-            horizontalOffset: newEdgeX,
-            verticalOffset: newEdgeY
-          };
-        }
-        item.adjustPositionOfElement(
-          this.context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
-        );
-        newItemLayoutInformation.push({
-          ...this.context.isRTL() ? {
-            left: this.context.state.visibleAreaRect.width - horizontalOffset - width,
-            right: this.context.state.visibleAreaRect.width - horizontalOffset
-          } : {
-            left: horizontalOffset,
-            right: horizontalOffset + width
-          },
-          top: verticalOffset,
-          bottom: height,
-          height,
-          width
-        });
-        return {
-          horizontalOffset: horizontalOffset + width,
-          verticalOffset: 0
-        };
-      },
-      { horizontalOffset: 0, verticalOffset: 0 }
-    );
-    const hasLayoutChanges = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
-      (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
-    );
-    this.itemLayoutInformation = newItemLayoutInformation;
-    Report.log(NAMESPACE, `layout`, {
-      hasLayoutChanges,
-      itemLayoutInformation: this.itemLayoutInformation
-    });
-    this.layoutSubject.next(hasLayoutChanges);
   }
   get(indexOrId) {
     if (typeof indexOrId === `number`) {
@@ -5212,24 +5003,6 @@ class SpineItemsManager extends DestroyableClass {
     }
     return indexOrId;
   }
-  /**
-   * It's important to not use x,y since we need the absolute position of each element. Otherwise x,y would be relative to
-   * current window (viewport).
-   */
-  getAbsolutePositionOf(spineItemOrIndex) {
-    const fallback = {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      width: 0,
-      height: 0
-    };
-    const spineItem = this.get(spineItemOrIndex);
-    const indexOfItem = spineItem ? this.orderedSpineItemsSubject.value.indexOf(spineItem) : -1;
-    const layoutInformation = this.itemLayoutInformation[indexOfItem];
-    return layoutInformation || fallback;
-  }
   comparePositionOf(toCompare, withItem) {
     const toCompareIndex = this.getSpineItemIndex(toCompare) ?? 0;
     const withIndex = this.getSpineItemIndex(withItem) ?? 0;
@@ -5245,32 +5018,8 @@ class SpineItemsManager extends DestroyableClass {
       ...this.orderedSpineItemsSubject.getValue(),
       ...spineItems
     ]);
-    spineItems.forEach((spineItem) => {
-      spineItem.$.contentLayout$.pipe(takeUntil$1(this.context.destroy$)).subscribe(() => {
-        this.layout();
-      });
-      spineItem.$.loaded$.pipe(
-        tap(() => {
-          if (spineItem.isUsingVerticalWriting()) {
-            this.context.update({
-              hasVerticalWriting: true
-            });
-          } else {
-            this.context.update({
-              hasVerticalWriting: false
-            });
-          }
-        }),
-        takeUntil$1(this.context.destroy$)
-      ).subscribe();
-    });
-  }
-  get items() {
-    return this.orderedSpineItemsSubject.value;
-  }
-  getLength() {
-    return this.orderedSpineItemsSubject.value.length;
   }
+  // @todo move
   getSpineItemFromCfi(cfi) {
     const { itemId } = extractProseMetadataFromCfi(cfi);
     if (itemId) {
@@ -5280,52 +5029,22 @@ class SpineItemsManager extends DestroyableClass {
     }
     return void 0;
   }
+  get items() {
+    return this.orderedSpineItemsSubject.value;
+  }
   /**
    * @todo handle reload, remove subscription to each items etc. See add()
    */
   destroyItems() {
     this.orderedSpineItemsSubject.value.forEach((item) => item.destroy());
   }
-  destroy() {
-    super.destroy();
-    this.layoutSubject.complete();
-  }
 }
-const createRemoveStyleHelper = (frameElement) => (id) => {
-  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
-    const styleElement = frameElement.contentDocument.getElementById(id);
-    if (styleElement) {
-      styleElement.remove();
-    }
-  }
-};
-const createAddStyleHelper = (frameElement) => (id, style, prepend = false) => {
-  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
-    const userStyle = document.createElement(`style`);
-    userStyle.id = id;
-    userStyle.innerHTML = style;
-    if (prepend) {
-      frameElement.contentDocument.head.prepend(userStyle);
-    } else {
-      frameElement.contentDocument.head.appendChild(userStyle);
-    }
-  }
-};
 const getAttributeValueFromString = (string, key) => {
   const regExp = new RegExp(key + `\\s*=\\s*([0-9.]+)`, `i`);
   const match = string.match(regExp) || [];
   const firstMatch = match[1] || `0`;
   return match && parseFloat(firstMatch) || 0;
 };
-const 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
-  });
-};
 const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
   const image = new Image();
   image.src = data;
@@ -5386,7 +5105,7 @@ const attachFrameSrc = ({
   const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
   return (stream) => stream.pipe(
     switchMap((frameElement) => {
-      const { fetchResource } = settings.settings;
+      const { fetchResource } = settings.values;
       if (!fetchResource && item.href.startsWith(window.location.origin) && // we have an encoding and it's a valid html
       (item.mediaType && [
         `application/xhtml+xml`,
@@ -5438,7 +5157,7 @@ const configureFrame = ({
       }
       frame.setAttribute(`role`, `main`);
       if ((frame == null ? void 0 : frame.contentDocument) && body) ;
-      if (settings.settings.computedPageTurnMode !== `scrollable`) {
+      if (settings.values.computedPageTurnMode !== `scrollable`) {
         frame.setAttribute(`tab-index`, `0`);
       }
       const hookResults = hookManager.execute(`item.onLoad`, item.id, {
@@ -5703,7 +5422,7 @@ class FrameItem extends DestroyableClass {
       if (frame) {
         frame.style.width = `${size.width}px`;
         frame.style.height = `${size.height}px`;
-        if (this.settings.settings.computedPageTurnMode !== `scrollable`) {
+        if (this.settings.values.computedPageTurnMode !== `scrollable`) {
           frame.setAttribute(`tab-index`, `0`);
         }
       }
@@ -5762,14 +5481,24 @@ class FrameItem extends DestroyableClass {
   }
   addStyle(id, style, prepend) {
     const frameElement = this.loader.element;
-    if (frameElement) {
-      createAddStyleHelper(frameElement)(id, style, prepend);
+    if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
+      const userStyle = document.createElement(`style`);
+      userStyle.id = id;
+      userStyle.innerHTML = style;
+      if (prepend) {
+        frameElement.contentDocument.head.prepend(userStyle);
+      } else {
+        frameElement.contentDocument.head.appendChild(userStyle);
+      }
     }
   }
   removeStyle(id) {
     const frameElement = this.loader.element;
-    if (frameElement) {
-      createRemoveStyleHelper(frameElement)(id);
+    if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
+      const styleElement = frameElement.contentDocument.getElementById(id);
+      if (styleElement) {
+        styleElement.remove();
+      }
     }
   }
 }
@@ -5993,7 +5722,7 @@ const createCommonSpineItem = ({
     };
   };
   const getResource = async () => {
-    const fetchResource = settings.settings.fetchResource;
+    const fetchResource = settings.values.fetchResource;
     const lastFetch = (_) => {
       if (fetchResource) {
         return fetchResource(item);
@@ -6139,7 +5868,7 @@ const createPrePaginatedSpineItem = ({
       const cssLink = buildDocumentStyle(
         {
           ...commonSpineItem.getDimensionsForPaginatedContent(),
-          enableTouch: settings.settings.computedPageTurnMode !== `scrollable`,
+          enableTouch: settings.values.computedPageTurnMode !== `scrollable`,
           spreadPosition
         },
         viewportDimensions
@@ -6522,7 +6251,7 @@ const createReflowableSpineItem = ({
       } else {
         const frameStyle = commonSpineItem.isImageType() ? buildStyleForReflowableImageOnly({
           isScrollable: ((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`,
-          enableTouch: settings.settings.computedPageTurnMode !== `scrollable`
+          enableTouch: settings.values.computedPageTurnMode !== `scrollable`
         }) : buildStyleWithMultiColumn(
           commonSpineItem.getDimensionsForReflowableContent(
             spineItemFrame.isUsingVerticalWriting(),
@@ -6625,12 +6354,13 @@ const createSpineItem = ({
 const getSpineItemFromPosition = ({
   position,
   spineItemsManager,
+  spineLayout,
   settings
 }) => {
   const spineItem = spineItemsManager.items.find((item) => {
-    const { left, right, bottom, top } = spineItemsManager.getAbsolutePositionOf(item);
+    const { left, right, bottom, top } = spineLayout.getAbsolutePositionOf(item);
     const isWithinXAxis = position.x >= left && position.x < right;
-    if (settings.settings.computedPageTurnDirection === `horizontal`) {
+    if (settings.values.computedPageTurnDirection === `horizontal`) {
       return isWithinXAxis;
     } else {
       return isWithinXAxis && position.y >= top && position.y < bottom;
@@ -6679,9 +6409,15 @@ const getItemVisibilityForPosition = ({
   context
 }) => {
   const viewportLeft = viewportPosition.x;
-  const viewportRight = viewportPosition.x + (context.state.visibleAreaRect.width - 1);
+  const viewportRight = Math.max(
+    viewportPosition.x + (context.state.visibleAreaRect.width - 1),
+    0
+  );
   const viewportTop = viewportPosition.y;
-  const viewportBottom = viewportPosition.y + (context.state.visibleAreaRect.height - 1);
+  const viewportBottom = Math.max(
+    viewportPosition.y + (context.state.visibleAreaRect.height - 1),
+    0
+  );
   const visibleWidthOfItem = Math.min(right, viewportRight) - Math.max(left, viewportLeft);
   const visibleHeightOfItem = Math.min(bottom, viewportBottom) - Math.max(top, viewportTop);
   const itemIsOnTheOuterEdge = visibleWidthOfItem <= 0 || visibleHeightOfItem <= 0;
@@ -6712,12 +6448,18 @@ const getVisibleSpineItemsFromPosition = ({
   restrictToScreen,
   spineItemsManager,
   context,
-  settings
+  settings,
+  spineLayout
 }) => {
-  const fallbackSpineItem = getSpineItemFromPosition({ position, settings, spineItemsManager }) || spineItemsManager.get(0);
+  const fallbackSpineItem = getSpineItemFromPosition({
+    position,
+    settings,
+    spineItemsManager,
+    spineLayout
+  }) || spineItemsManager.get(0);
   const spineItemsVisible = spineItemsManager.items.reduce(
     (acc, spineItem) => {
-      const itemPosition = spineItemsManager.getAbsolutePositionOf(spineItem);
+      const itemPosition = spineLayout.getAbsolutePositionOf(spineItem);
       const { visible } = getItemVisibilityForPosition({
         itemPosition,
         threshold,
@@ -6739,22 +6481,114 @@ const getVisibleSpineItemsFromPosition = ({
   const endItemIndex = spineItemsManager.getSpineItemIndex(endItem);
   return {
     beginIndex: beginItemIndex ?? 0,
-    // beginPosition: position,
     endIndex: endItemIndex ?? 0
-    // endPosition: position,
   };
 };
-const createSpineLocator = ({
+const getSpinePositionFromSpineItemPosition = ({
+  spineItemPosition,
+  itemLayout: { left, top }
+}) => {
+  return {
+    x: left + spineItemPosition.x,
+    y: top + spineItemPosition.y
+  };
+};
+const getSpineInfoFromAbsolutePageIndex = ({
+  absolutePageIndex,
+  spineLayout,
   spineItemsManager,
   context,
-  spineItemLocator,
   settings
 }) => {
-  const getSpineItemPositionFromSpinePosition = Report.measurePerformance(
-    `getSpineItemPositionFromSpinePosition`,
-    10,
+  const items = spineItemsManager.items;
+  const { found, currentAbsolutePage } = items.reduce(
+    (acc, item) => {
+      if (acc.found) return acc;
+      const itemLayout = spineLayout.getAbsolutePositionOf(item);
+      const numberOfPages = getSpineItemNumberOfPages({
+        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+        itemHeight: itemLayout.height,
+        itemWidth: itemLayout.width,
+        context,
+        settings
+      });
+      const possiblePageIndex = absolutePageIndex - acc.currentAbsolutePage;
+      const currentAbsolutePage2 = acc.currentAbsolutePage + numberOfPages;
+      if (possiblePageIndex <= numberOfPages - 1) {
+        return {
+          ...acc,
+          currentAbsolutePage: currentAbsolutePage2,
+          found: { item, pageIndex: possiblePageIndex }
+        };
+      }
+      return {
+        ...acc,
+        currentAbsolutePage: currentAbsolutePage2
+      };
+    },
+    { currentAbsolutePage: 0 }
+  );
+  if (found) {
+    return {
+      spineItem: found.item,
+      pageIndex: found.pageIndex,
+      itemIndex: spineItemsManager.getSpineItemIndex(found.item) ?? 0,
+      currentAbsolutePage
+    };
+  }
+  return void 0;
+};
+const getAbsolutePageIndexFromPageIndex = ({
+  pageIndex,
+  spineItemOrId,
+  spineLayout,
+  spineItemsManager,
+  context,
+  settings
+}) => {
+  const items = spineItemsManager.items;
+  const spineItem = spineItemsManager.get(spineItemOrId);
+  if (!spineItem) return void 0;
+  const { currentAbsolutePage } = items.reduce(
+    (acc, item) => {
+      if (acc.found) return acc;
+      const itemLayout = spineLayout.getAbsolutePositionOf(item);
+      const numberOfPages = getSpineItemNumberOfPages({
+        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+        itemHeight: itemLayout.height,
+        itemWidth: itemLayout.width,
+        context,
+        settings
+      });
+      if (spineItem === item) {
+        if (pageIndex <= numberOfPages - 1) {
+          return {
+            currentAbsolutePage: acc.currentAbsolutePage + pageIndex,
+            found: true
+          };
+        }
+      }
+      return {
+        ...acc,
+        currentAbsolutePage: acc.currentAbsolutePage + numberOfPages
+      };
+    },
+    { currentAbsolutePage: 0, found: false }
+  );
+  return currentAbsolutePage;
+};
+const createSpineLocator = ({
+  spineItemsManager,
+  context,
+  spineItemLocator,
+  settings,
+  spineLayout
+}) => {
+  const getSpineItemPositionFromSpinePosition = Report.measurePerformance(
+    `getSpineItemPositionFromSpinePosition`,
+    10,
     (position, spineItem) => {
-      const { left, top } = spineItemsManager.getAbsolutePositionOf(spineItem);
+      const { left, top } = spineLayout.getAbsolutePositionOf(spineItem);
       return {
         /**
          * when using spread the item could be on the right and therefore will be negative
@@ -6769,15 +6603,11 @@ const createSpineLocator = ({
     },
     { disable: true }
   );
-  const getSpinePositionFromSpineItemPosition = (spineItemPosition, spineItem) => {
-    const { left, top } = spineItemsManager.getAbsolutePositionOf(spineItem);
-    return {
-      x: left + spineItemPosition.x,
-      y: top + spineItemPosition.y
-    };
-  };
   const getSpinePositionFromSpineItem = (spineItem) => {
-    return getSpinePositionFromSpineItemPosition({ x: 0, y: 0 }, spineItem);
+    return getSpinePositionFromSpineItemPosition({
+      spineItemPosition: { x: 0, y: 0 },
+      itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
+    });
   };
   const getSpineItemFromIframe = (iframe) => {
     return spineItemsManager.items.find((item) => item.frame.element === iframe);
@@ -6810,11 +6640,15 @@ const createSpineLocator = ({
       itemWidth: width
     });
     const pages = Array.from(Array(numberOfPages)).map((_, index) => {
-      const spineItemPosition = spineItemLocator.getSpineItemPositionFromPageIndex(index, spineItem);
-      const spinePosition = getSpinePositionFromSpineItemPosition(
+      const spineItemPosition = spineItemLocator.getSpineItemPositionFromPageIndex({
+        pageIndex: index,
+        isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
+        itemLayout: spineItem.getElementDimensions()
+      });
+      const spinePosition = getSpinePositionFromSpineItemPosition({
         spineItemPosition,
-        spineItem
-      );
+        itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
+      });
       return {
         index,
         absolutePosition: {
@@ -6853,24 +6687,48 @@ const createSpineLocator = ({
     };
   };
   const isPositionWithinSpineItem = (position, spineItem) => {
-    const { bottom, left, right, top } = spineItemsManager.getAbsolutePositionOf(spineItem);
+    const { bottom, left, right, top } = spineLayout.getAbsolutePositionOf(spineItem);
     return position.x >= left && position.x <= right && position.y <= bottom && position.y >= top;
   };
   const getSafeSpineItemPositionFromUnsafeSpineItemPosition = (unsafePosition, spineItem) => {
-    const { height, width } = spineItemsManager.getAbsolutePositionOf(spineItem);
+    const { height, width } = spineLayout.getAbsolutePositionOf(spineItem);
     return {
       x: Math.min(Math.max(0, unsafePosition.x), width),
       y: Math.min(Math.max(0, unsafePosition.y), height)
     };
   };
   return {
-    getSpinePositionFromSpineItemPosition,
+    getSpinePositionFromSpineItemPosition: ({
+      spineItem,
+      spineItemPosition
+    }) => {
+      const itemLayout = spineLayout.getAbsolutePositionOf(spineItem);
+      return getSpinePositionFromSpineItemPosition({
+        itemLayout,
+        spineItemPosition
+      });
+    },
+    getAbsolutePageIndexFromPageIndex: (params) => getAbsolutePageIndexFromPageIndex({
+      ...params,
+      context,
+      settings,
+      spineItemsManager,
+      spineLayout
+    }),
+    getSpineInfoFromAbsolutePageIndex: (params) => getSpineInfoFromAbsolutePageIndex({
+      ...params,
+      context,
+      settings,
+      spineItemsManager,
+      spineLayout
+    }),
     getSpinePositionFromSpineItem,
     getSpineItemPositionFromSpinePosition,
     getSpineItemFromPosition: (position) => getSpineItemFromPosition({
       position,
       settings,
-      spineItemsManager
+      spineItemsManager,
+      spineLayout
     }),
     getSpineItemFromIframe,
     getSpineItemPageIndexFromNode,
@@ -6878,6 +6736,7 @@ const createSpineLocator = ({
       context,
       settings,
       spineItemsManager,
+      spineLayout,
       ...params
     }),
     getVisiblePagesFromViewportPosition,
@@ -6891,7 +6750,7 @@ const loadItems = ({
   settings
 }) => (stream) => stream.pipe(
   tap$1(([beginIndex, endIndex]) => {
-    const { numberOfAdjacentSpineItemToPreLoad } = settings.settings;
+    const { numberOfAdjacentSpineItemToPreLoad } = settings.values;
     const leftMaximumIndex = beginIndex - numberOfAdjacentSpineItemToPreLoad;
     const rightMaximumIndex = endIndex + numberOfAdjacentSpineItemToPreLoad;
     spineItemsManager.items.forEach((orderedSpineItem, index) => {
@@ -6914,17 +6773,18 @@ const mapToItemsToLoad = ({ spineLocator }) => (stream) => stream.pipe(
   })
 );
 class SpineItemsLoader extends DestroyableClass {
-  constructor(context, spineItemsManager, spineLocator, settings) {
+  constructor(context, spineItemsManager, spineLocator, settings, spineLayout) {
     super();
     this.context = context;
     this.spineItemsManager = spineItemsManager;
     this.spineLocator = spineLocator;
     this.settings = settings;
+    this.spineLayout = spineLayout;
     const navigationUpdate$ = this.context.bridgeEvent.navigation$;
-    const layoutHasChanged$ = spineItemsManager.layout$.pipe(
-      filter$1((hasChanged) => hasChanged)
+    const layoutHasChanged$ = this.spineLayout.layout$.pipe(
+      filter$1(({ hasChanged }) => hasChanged)
     );
-    const numberOfAdjacentSpineItemToPreLoad$ = settings.settings$.pipe(
+    const numberOfAdjacentSpineItemToPreLoad$ = settings.values$.pipe(
       map$1(
         ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
       ),
@@ -6949,6 +6809,272 @@ class SpineItemsLoader extends DestroyableClass {
     loadSpineItems$.pipe(takeUntil(this.destroy$)).subscribe();
   }
 }
+class SpineItemsObserver extends DestroyableClass {
+  constructor(spineItemsManager, spineLocator) {
+    super();
+    this.spineItemsManager = spineItemsManager;
+    this.spineLocator = spineLocator;
+    this.itemIsReady$ = this.spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const itemsIsReady$ = items.map(
+          (item) => item.$.isReady$.pipe(map$1((isReady) => ({ item, isReady })))
+        );
+        return merge(...itemsIsReady$);
+      }),
+      share()
+    );
+    this.itemResize$ = this.spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const resize$ = items.map(
+          (item) => observeResize(item.element).pipe(
+            map$1((entries) => ({ entries, item }))
+          )
+        );
+        return merge(...resize$);
+      }),
+      share()
+    );
+  }
+}
+const convertSpinePositionToLayoutPosition = ({
+  position,
+  pageSize
+}) => {
+  return {
+    x: position.x,
+    y: position.y,
+    left: position.x,
+    top: position.y,
+    width: pageSize.width,
+    height: pageSize.height,
+    bottom: position.y + pageSize.height,
+    right: position.x + pageSize.width
+  };
+};
+const NAMESPACE = `SpineLayout`;
+class SpineLayout extends DestroyableClass {
+  constructor(spineItemsManager, context, settings) {
+    super();
+    this.spineItemsManager = spineItemsManager;
+    this.context = context;
+    this.settings = settings;
+    this.itemLayoutInformation = [];
+    this.layoutSubject = new Subject();
+    spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const itemsLayout$ = items.map(
+          (spineItem) => spineItem.$.contentLayout$.pipe(
+            tap$1(() => {
+              this.layout();
+            })
+          )
+        );
+        const writingModeUpdate$ = items.map(
+          (spineItem) => spineItem.$.loaded$.pipe(
+            tap$1(() => {
+              if (spineItem.isUsingVerticalWriting()) {
+                this.context.update({
+                  hasVerticalWriting: true
+                });
+              } else {
+                this.context.update({
+                  hasVerticalWriting: false
+                });
+              }
+            })
+          )
+        );
+        return merge(...itemsLayout$, ...writingModeUpdate$);
+      })
+    ).pipe(takeUntil(this.destroy$)).subscribe();
+    this.layout$ = this.layoutSubject.pipe(
+      map$1((hasChanged) => ({ hasChanged })),
+      startWith$1({ hasChanged: true }),
+      map$1(({ hasChanged }) => {
+        const items = spineItemsManager.items;
+        const spineItemsPagesAbsolutePositions = items.map((item) => {
+          const itemLayout = this.getAbsolutePositionOf(item);
+          const numberOfPages = getSpineItemNumberOfPages({
+            isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+            itemHeight: itemLayout.height,
+            itemWidth: itemLayout.width,
+            context,
+            settings
+          });
+          const pages2 = new Array(numberOfPages).fill(void 0);
+          return pages2.map(
+            (_, pageIndex) => convertSpinePositionToLayoutPosition({
+              pageSize: this.context.getPageSize(),
+              position: getSpinePositionFromSpineItemPosition({
+                itemLayout,
+                spineItemPosition: getSpineItemPositionFromPageIndex({
+                  isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+                  itemLayout,
+                  pageIndex,
+                  context
+                })
+              })
+            })
+          );
+        });
+        const pages = spineItemsPagesAbsolutePositions.reduce(
+          (acc, itemPages, itemIndex) => {
+            const itemPagesInfo = itemPages.map(
+              (absolutePosition, pageIndex) => ({
+                itemIndex,
+                absolutePageIndex: itemIndex + pageIndex,
+                absolutePosition
+              })
+            );
+            return [...acc, ...itemPagesInfo];
+          },
+          []
+        );
+        return {
+          hasChanged,
+          spineItemsAbsolutePositions: items.map(
+            (item) => this.getAbsolutePositionOf(item)
+          ),
+          spineItemsPagesAbsolutePositions,
+          pages
+        };
+      }),
+      shareReplay$1(1)
+    );
+  }
+  /**
+   * @todo
+   * move this logic to the spine
+   *
+   * @todo
+   * make sure to check how many times it is being called and try to reduce number of layouts
+   * it is called eery time an item is being unload (which can adds up quickly for big books)
+   */
+  layout() {
+    const manifest = this.context.manifest;
+    const newItemLayoutInformation = [];
+    const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
+    this.spineItemsManager.items.reduce(
+      ({ horizontalOffset, verticalOffset }, item, index) => {
+        let minimumWidth = this.context.getPageSize().width;
+        let blankPagePosition = `none`;
+        const itemStartOnNewScreen = horizontalOffset % this.context.state.visibleAreaRect.width === 0;
+        const isLastItem = index === this.spineItemsManager.items.length - 1;
+        if (this.context.state.isUsingSpreadMode) {
+          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
+            minimumWidth = this.context.getPageSize().width * 2;
+          }
+          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
+            minimumWidth = this.context.getPageSize().width * 2;
+          }
+          const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
+          if (item.item.pageSpreadRight && itemStartOnNewScreen && !this.context.isRTL()) {
+            blankPagePosition = `before`;
+            minimumWidth = this.context.getPageSize().width * 2;
+          } else if (item.item.pageSpreadLeft && itemStartOnNewScreen && this.context.isRTL()) {
+            blankPagePosition = `before`;
+            minimumWidth = this.context.getPageSize().width * 2;
+          } else if (lastItemStartOnNewScreenInAPrepaginatedBook) {
+            if (this.context.isRTL()) {
+              blankPagePosition = `before`;
+            } else {
+              blankPagePosition = `after`;
+            }
+            minimumWidth = this.context.getPageSize().width * 2;
+          }
+        }
+        const { width, height } = item.layout({
+          minimumWidth,
+          blankPagePosition,
+          spreadPosition: this.context.state.isUsingSpreadMode ? itemStartOnNewScreen ? this.context.isRTL() ? `right` : `left` : this.context.isRTL() ? `left` : `right` : `none`
+        });
+        if (this.settings.values.computedPageTurnDirection === `vertical`) {
+          const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - this.context.state.visibleAreaRect.height;
+          const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
+          if (this.context.isRTL()) {
+            item.adjustPositionOfElement({
+              top: currentValidEdgeYForVerticalPositioning,
+              left: currentValidEdgeXForVerticalPositioning
+            });
+          } else {
+            item.adjustPositionOfElement({
+              top: currentValidEdgeYForVerticalPositioning,
+              left: currentValidEdgeXForVerticalPositioning
+            });
+          }
+          const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
+          const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
+          newItemLayoutInformation.push({
+            left: currentValidEdgeXForVerticalPositioning,
+            right: newEdgeX,
+            top: currentValidEdgeYForVerticalPositioning,
+            bottom: newEdgeY,
+            height,
+            width,
+            x: currentValidEdgeXForVerticalPositioning,
+            y: currentValidEdgeYForVerticalPositioning
+          });
+          return {
+            horizontalOffset: newEdgeX,
+            verticalOffset: newEdgeY
+          };
+        }
+        item.adjustPositionOfElement(
+          this.context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
+        );
+        const left = this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset - width : horizontalOffset;
+        newItemLayoutInformation.push({
+          right: this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset : horizontalOffset + width,
+          left,
+          x: left,
+          top: verticalOffset,
+          bottom: height,
+          height,
+          width,
+          y: verticalOffset
+        });
+        return {
+          horizontalOffset: horizontalOffset + width,
+          verticalOffset: 0
+        };
+      },
+      { horizontalOffset: 0, verticalOffset: 0 }
+    );
+    const hasLayoutChanges = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
+      (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
+    );
+    this.itemLayoutInformation = newItemLayoutInformation;
+    Report.log(NAMESPACE, `layout`, {
+      hasLayoutChanges,
+      itemLayoutInformation: this.itemLayoutInformation
+    });
+    this.layoutSubject.next(hasLayoutChanges);
+  }
+  /**
+   * It's important to not use x,y since we need the absolute position of each element. Otherwise x,y would be relative to
+   * current window (viewport).
+   */
+  getAbsolutePositionOf(spineItemOrIndex) {
+    const fallback = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    };
+    const spineItem = this.spineItemsManager.get(spineItemOrIndex);
+    const indexOfItem = spineItem ? this.spineItemsManager.items.indexOf(spineItem) : -1;
+    const layoutInformation = this.itemLayoutInformation[indexOfItem];
+    return layoutInformation || fallback;
+  }
+  destroy() {
+    super.destroy();
+    this.layoutSubject.complete();
+  }
+}
 class Spine extends DestroyableClass {
   constructor(parentElement$, context, pagination, spineItemsManager, spineItemLocator, settings, hookManager) {
     super();
@@ -6965,17 +7091,24 @@ class Spine extends DestroyableClass {
       share$1()
     );
     this.element$ = this.elementSubject.asObservable();
+    this.spineLayout = new SpineLayout(spineItemsManager, context, settings);
     this.locator = createSpineLocator({
       context,
       spineItemsManager,
       spineItemLocator,
-      settings
+      settings,
+      spineLayout: this.spineLayout
     });
     this.spineItemsLoader = new SpineItemsLoader(
       this.context,
       spineItemsManager,
       this.locator,
-      settings
+      settings,
+      this.spineLayout
+    );
+    this.spineItemsObserver = new SpineItemsObserver(
+      spineItemsManager,
+      this.locator
     );
     const reloadOnManifestChange$ = context.manifest$.pipe(
       tap((manifest) => {
@@ -7010,7 +7143,7 @@ class Spine extends DestroyableClass {
     return this.elementSubject.getValue();
   }
   layout() {
-    this.spineItemsManager.layout();
+    this.spineLayout.layout();
   }
   isSelecting() {
     return this.spineItemsManager.items.some(
@@ -7021,9 +7154,6 @@ class Spine extends DestroyableClass {
     var _a;
     return (_a = this.spineItemsManager.items.find((item) => item.selectionTracker.getSelection())) == null ? void 0 : _a.selectionTracker.getSelection();
   }
-  get layout$() {
-    return this.spineItemsManager.layout$;
-  }
   destroy() {
     super.destroy();
     this.spineItemsLoader.destroy();
@@ -7061,11 +7191,9 @@ const createReader = (inputSettings) => {
     settingsManager,
     hookManager
   );
-  const spineItemsObserver = new SpineItemsObserver(spineItemsManager);
   const navigator2 = createNavigator({
     context,
     spineItemsManager,
-    spineItemsObserver,
     parentElement$: elementSubject$,
     hookManager,
     spine,
@@ -7111,26 +7239,27 @@ const createReader = (inputSettings) => {
     });
     spine.layout();
   };
-  const load = (manifest, loadOptions) => {
+  const load = (options) => {
     var _a;
+    const { containerElement, manifest } = options;
     if (context.manifest) {
       Report.warn(`loading a new book is not supported yet`);
       return;
     }
-    Report.log(`load`, { manifest, loadOptions });
-    const element = createWrapperElement(loadOptions.containerElement);
-    if (loadOptions.containerElement !== ((_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement)) {
+    Report.log(`load`, { options });
+    const element = createWrapperElement(containerElement);
+    if (containerElement !== ((_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement)) {
       elementSubject$.next(element);
-      loadOptions.containerElement.appendChild(element);
+      containerElement.appendChild(element);
     }
     context.update({
       manifest,
-      ...loadOptions,
-      forceSinglePageMode: settingsManager.settings.forceSinglePageMode
+      containerElement,
+      forceSinglePageMode: settingsManager.values.forceSinglePageMode
     });
     layout();
   };
-  merge(context.state$, settingsManager.settings$).pipe(
+  merge(context.state$, settingsManager.values$).pipe(
     map(() => void 0),
     withLatestFrom$1(context.state$),
     map(([, { hasVerticalWriting }]) => {
@@ -7139,7 +7268,7 @@ const createReader = (inputSettings) => {
         hasVerticalWriting,
         renditionFlow: manifest == null ? void 0 : manifest.renditionFlow,
         renditionLayout: manifest == null ? void 0 : manifest.renditionLayout,
-        computedPageTurnMode: settingsManager.settings.computedPageTurnMode
+        computedPageTurnMode: settingsManager.values.computedPageTurnMode
       };
     }),
     distinctUntilChanged(isShallowEqual),
@@ -7180,22 +7309,23 @@ const createReader = (inputSettings) => {
     hookManager,
     cfi: {
       generateCfiFromRange,
+      generateCfiForSpineItemPage: (params) => generateCfiForSpineItemPage({
+        ...params,
+        spineItemLocator
+      }),
       resolveCfi: (params) => resolveCfi({ ...params, spineItemsManager })
     },
     navigation: {
       viewportFree$: context.bridgeEvent.viewportFree$,
       viewportBusy$: context.bridgeEvent.viewportBusy$,
-      // rest safe
-      get viewportPosition() {
-        return navigator2.viewportNavigator.viewportPosition;
-      },
+      getViewportPosition: () => navigator2.viewportNavigator.viewportPosition,
       getNavigation: navigator2.getNavigation.bind(navigator2),
       getElement: navigator2.getElement.bind(navigator2),
       navigate: navigator2.navigate.bind(navigator2),
       lock: navigator2.lock.bind(navigator2),
       navigationResolver: navigator2.navigationResolver
     },
-    spineItemsObserver,
+    spineItemsObserver: spine.spineItemsObserver,
     spineItemsManager,
     layout,
     load,
@@ -7206,17 +7336,19 @@ const createReader = (inputSettings) => {
     },
     settings: settingsManager,
     element$,
+    layout$: spine.spineLayout.layout$,
+    viewportState$: context.bridgeEvent.viewportState$,
+    /**
+     * Dispatched when the reader has loaded a book and is rendering a book.
+     * Using navigation API and getting information about current content will
+     * have an effect.
+     * It can typically be used to hide a loading indicator.
+     */
+    state$: context.manifest$.pipe(
+      map((manifest) => manifest ? "ready" : "idle")
+    ),
     $: {
       state$: stateSubject$.asObservable(),
-      /**
-       * Dispatched when the reader has loaded a book and is rendering a book.
-       * Using navigation API and getting information about current content will
-       * have an effect.
-       * It can typically be used to hide a loading indicator.
-       */
-      loadStatus$: context.manifest$.pipe(
-        map((manifest) => manifest ? "ready" : "idle")
-      ),
       destroy$
     }
   };
@@ -7557,8 +7689,8 @@ const progressionEnhancer = (next) => (options) => {
   };
   const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
     const { height, width } = currentItem.getElementDimensions();
-    const { top, left } = reader.spineItemsManager.getAbsolutePositionOf(currentItem);
-    if (reader.settings.settings.computedPageTurnDirection === `vertical`) {
+    const { top, left } = reader.spine.spineLayout.getAbsolutePositionOf(currentItem);
+    if (reader.settings.values.computedPageTurnDirection === `vertical`) {
       return Math.max(
         0,
         Math.min(
@@ -7678,7 +7810,7 @@ const loadingEnhancer = (next) => (options) => {
       };
     }, {})
   );
-  const updateEntriesLayout$ = (entries) => combineLatest([reader.spine.layout$, reader.theme.$.theme$]).pipe(
+  const updateEntriesLayout$ = (entries) => combineLatest([reader.layout$, reader.theme.$.theme$]).pipe(
     map(([, theme]) => ({
       width: reader.context.state.visibleAreaRect.width,
       theme
@@ -7769,84 +7901,74 @@ const defaultLoadingElementCreate = ({
   container.appendChild(detailsElement);
   return container;
 };
-const createNormalizeEventForViewport = ({
-  iframeEventBridgeElement$,
-  locator
-}) => {
-  const normalizeEventForViewport = (event) => {
-    var _a;
-    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;
-    const spineItem = locator.getSpineItemFromIframe(originalFrame);
-    if (!spineItem) return event;
-    if (isPointerEvent(event)) {
-      const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-      const newEvent = new PointerEvent(event.type, {
-        ...event,
-        pointerId: event.pointerId,
-        clientX,
-        clientY
-      });
-      Object.defineProperty(newEvent, `target`, {
-        value: iframeOriginalEvent.target,
-        enumerable: true
-      });
-      return newEvent;
-    }
-    if (isMouseEvent(event)) {
-      const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-      const newEvent = new MouseEvent(event.type, {
-        ...event,
+const __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY = `__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT`;
+const attachOriginalFrameEventToDocumentEvent = (event, frameEvent) => {
+  Object.defineProperty(event, __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY, {
+    value: frameEvent,
+    enumerable: true
+  });
+};
+const getOriginalFrameEventFromDocumentEvent = (event) => {
+  return event[__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY];
+};
+const normalizeEventForViewport = (event, locator) => {
+  var _a;
+  const eventIsComingFromBridge = __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY in event;
+  const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event);
+  const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
+  if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame)
+    return event;
+  const spineItem = locator.getSpineItemFromIframe(originalFrame);
+  if (!spineItem) return event;
+  if (isPointerEvent(event)) {
+    const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+    const newEvent = new PointerEvent(event.type, {
+      ...event,
+      pointerId: event.pointerId,
+      clientX,
+      clientY
+    });
+    Object.defineProperty(newEvent, `target`, {
+      value: iframeOriginalEvent.target,
+      enumerable: true
+    });
+    return newEvent;
+  }
+  if (isMouseEvent(event)) {
+    const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+    const newEvent = new MouseEvent(event.type, {
+      ...event,
+      clientX,
+      clientY
+    });
+    Object.defineProperty(newEvent, `target`, {
+      value: iframeOriginalEvent.target,
+      enumerable: true
+    });
+    return newEvent;
+  }
+  if (isTouchEvent(event)) {
+    const touches = Array.from(event.touches).map((touch) => {
+      const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
+      return new Touch({
+        identifier: touch.identifier,
+        target: touch.target,
         clientX,
         clientY
       });
-      Object.defineProperty(newEvent, `target`, {
-        value: iframeOriginalEvent.target,
-        enumerable: true
-      });
-      return newEvent;
-    }
-    if (isTouchEvent(event)) {
-      const touches = Array.from(event.touches).map((touch) => {
-        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
-        return new Touch({
-          identifier: touch.identifier,
-          target: touch.target,
-          clientX,
-          clientY
-        });
-      });
-      const newEvent = new TouchEvent(event.type, {
-        touches,
-        changedTouches: touches,
-        targetTouches: touches
-      });
-      Object.defineProperty(newEvent, `target`, {
-        value: iframeOriginalEvent.target,
-        enumerable: true
-      });
-      return newEvent;
-    }
-    return event;
-  };
-  return normalizeEventForViewport;
-};
-const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
-const createIframeEventBridgeElement = (container) => {
-  const iframeEventBridgeElement = container.ownerDocument.createElement(`div`);
-  iframeEventBridgeElement.id = IFRAME_EVENT_BRIDGE_ELEMENT_ID;
-  iframeEventBridgeElement.style.cssText = `
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      top: 0;
-      left: 0;
-      z-index: -1;
-    `;
-  return iframeEventBridgeElement;
+    });
+    const newEvent = new TouchEvent(event.type, {
+      touches,
+      changedTouches: touches,
+      targetTouches: touches
+    });
+    Object.defineProperty(newEvent, `target`, {
+      value: iframeOriginalEvent.target,
+      enumerable: true
+    });
+    return newEvent;
+  }
+  return event;
 };
 const pointerEvents = [
   `pointercancel`,
@@ -7856,23 +7978,13 @@ const pointerEvents = [
   `pointermove`,
   `pointerout`,
   `pointerover`,
-  `pointerup`,
-  `touchstart`,
-  `touchend`
+  `pointerup`
 ];
-const mouseEvents = [
-  `click`,
-  `mousedown`,
-  `mouseup`,
-  `mouseenter`,
-  `mouseleave`,
-  `mousemove`,
-  `mouseout`,
-  `mouseover`
+const passthroughEvents = [
+  ...pointerEvents
+  /*, ...mouseEvents*/
 ];
-const passthroughEvents = [...pointerEvents, ...mouseEvents];
 const eventsEnhancer = (next) => (options) => {
-  const iframeEventBridgeElement$ = new BehaviorSubject(void 0);
   const reader = next(options);
   reader.hookManager.register(`item.onLoad`, ({ destroy, frame, itemId }) => {
     const item = reader.spineItemsManager.get(itemId);
@@ -7885,12 +7997,15 @@ const eventsEnhancer = (next) => (options) => {
         if (isPointerEvent(e)) {
           convertedEvent = new PointerEvent(e.type, e);
         }
-        if (isMouseEvent(e)) {
-          convertedEvent = new MouseEvent(e.type, e);
-        }
         if (convertedEvent !== e) {
           attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
-          (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
+          const normalizedEvent = normalizeEventForViewport(
+            convertedEvent,
+            reader.spine.locator
+          );
+          (_a2 = reader.context.state.containerElement) == null ? void 0 : _a2.dispatchEvent(
+            normalizedEvent
+          );
         }
       };
       (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
@@ -7905,25 +8020,7 @@ const eventsEnhancer = (next) => (options) => {
       unregister.forEach((cb) => cb());
     });
   });
-  reader.element$.pipe(
-    tap$1((wrapper) => {
-      var _a;
-      const iframeEventBridgeElement = createIframeEventBridgeElement(wrapper);
-      wrapper.appendChild(iframeEventBridgeElement);
-      (_a = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a.remove();
-      iframeEventBridgeElement$.next(iframeEventBridgeElement);
-    }),
-    takeUntil(reader.$.destroy$)
-  ).subscribe();
-  return {
-    ...reader,
-    events: {
-      normalizeEventForViewport: createNormalizeEventForViewport({
-        iframeEventBridgeElement$,
-        locator: reader.spine.locator
-      })
-    }
-  };
+  return reader;
 };
 const createReaderWithEnhancers = (
   //__
@@ -7969,7 +8066,8 @@ export {
   Report,
   SettingsManager3 as SettingsManager,
   createReaderWithEnhancers as createReader,
-  groupBy,
-  isShallowEqual
+  isHtmlElement,
+  isShallowEqual2 as isShallowEqual,
+  waitForSwitch
 };
 //# sourceMappingURL=index.js.map