@prose-reader/core 1.72.0 → 1.73.0

package/dist/index.umd.cjs

@@ -7,7 +7,7 @@
     reader.context.state$.pipe(rxjs.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);
         }
       };
@@ -19,98 +19,32 @@
     });
     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;
-      const inputSettings = shallowMergeIfDefined(
+      const inputSettings = shared.shallowMergeIfDefined(
         this.getDefaultSettings(),
         initialSettings
       );
       this.outputSettings = this.computeOutputSettings(inputSettings);
-      this.inputSettings = shallowMergeIfDefined(
+      this.inputSettings = shared.shallowMergeIfDefined(
         this.getDefaultSettings(),
         initialSettings
       );
       this.outputSettingsUpdateSubject = new rxjs.Subject();
-      this.settings$ = rxjs.combineLatest([
-        this.settingsManager.settings$,
+      this.values$ = rxjs.combineLatest([
+        this.settingsManager.values$,
         this.outputSettingsUpdateSubject.pipe(operators.startWith(this.outputSettings))
       ]).pipe(
         operators.map(([parentSettings, settings]) => ({ ...parentSettings, ...settings })),
         operators.shareReplay(1)
       );
-      this.settings$.subscribe();
+      this.values$.subscribe();
     }
     _prepareUpdate(settings) {
       const parentInputSettings = this.getCleanedParentInputSettings(settings);
       const parentManagerPreparedUpdate = this.settingsManager._prepareUpdate(parentInputSettings);
-      const inputSettings = shallowMergeIfDefined(this.inputSettings, settings);
+      const inputSettings = shared.shallowMergeIfDefined(this.inputSettings, settings);
       const outputSettings = this.computeOutputSettings(inputSettings);
       const hasChanged = this.hasSettingsChanged(outputSettings);
       return {
@@ -133,9 +67,9 @@
       const { commit } = this._prepareUpdate(settings);
       commit();
     }
-    get settings() {
+    get values() {
       return {
-        ...this.settingsManager.settings,
+        ...this.settingsManager.values,
         ...this.outputSettings
       };
     }
@@ -143,12 +77,25 @@
       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;
     }
     hasSettingsChanged(newOutputSettings) {
-      return !isShallowEqual(this.outputSettings, newOutputSettings);
+      return !shared.isShallowEqual(this.outputSettings, newOutputSettings);
     }
     getCleanedParentInputSettings(settings) {
       const { fontJustification, fontScale, fontWeight, lineHeight, ...rest } = settings;
@@ -187,10 +134,10 @@
         */
     ``}
     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) => {
@@ -220,7 +167,7 @@
         return false;
       })
     );
-    settingsManager.settings$.pipe(
+    settingsManager.values$.pipe(
       shouldRequireLayout,
       operators.tap(applyChangeToSpineItems),
       rxjs.takeUntil(reader.$.destroy$)
@@ -238,7 +185,7 @@
   const hotkeysEnhancer = (next) => (options) => {
     const reader = next(options);
     const navigateOnKey = (document2) => rxjs.fromEvent(document2, "keyup").pipe(
-      rxjs.withLatestFrom(reader.settings.settings$),
+      rxjs.withLatestFrom(reader.settings.values$),
       rxjs.map(([e, { pageTurnDirection }]) => {
         if (pageTurnDirection === "horizontal") {
           if (e.key === `ArrowRight`) {
@@ -318,8 +265,8 @@
     const resetLockViewportFree$ = createResetLock$(
       reader.navigation.viewportFree$
     ).pipe(operators.take(1));
-    const pageTurnMode$ = reader.settings.settings$.pipe(
-      operators.map(() => reader.settings.settings.computedPageTurnMode),
+    const pageTurnMode$ = reader.settings.values$.pipe(
+      operators.map(() => reader.settings.values.computedPageTurnMode),
       operators.distinctUntilChanged()
     );
     const handleViewportLock$ = pageTurnMode$.pipe(
@@ -395,7 +342,7 @@
       return inputSettings;
     }
     hasSettingsChanged(newOutputSettings) {
-      return !isShallowEqual(this.outputSettings, newOutputSettings);
+      return !shared.isShallowEqual(this.outputSettings, newOutputSettings);
     }
     getCleanedParentInputSettings(settings) {
       const {
@@ -443,7 +390,7 @@
       ({ 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;
@@ -491,7 +438,7 @@
         resizeObserver.disconnect();
       };
     });
-    const layoutOnContainerResize$ = settingsManager.settings$.pipe(
+    const layoutOnContainerResize$ = settingsManager.values$.pipe(
       operators.filter(({ layoutAutoResize: layoutAutoResize2 }) => layoutAutoResize2 === "container"),
       operators.switchMap(() => reader.context.containerElement$),
       operators.filter(isDefined),
@@ -503,9 +450,9 @@
     );
     const movingSafePan$ = createMovingSafePan$(reader);
     movingSafePan$.subscribe();
-    settingsManager.settings$.pipe(
+    settingsManager.values$.pipe(
       mapKeysTo([`pageHorizontalMargin`, `pageVerticalMargin`]),
-      operators.distinctUntilChanged(isShallowEqual),
+      operators.distinctUntilChanged(shared.isShallowEqual),
       operators.skip(1),
       operators.tap(() => {
         reader.layout();
@@ -709,14 +656,14 @@
         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,
@@ -822,14 +769,14 @@
         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,
@@ -883,14 +830,26 @@
       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
@@ -899,15 +858,15 @@
         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
@@ -955,7 +914,7 @@
       });
     }
     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`
         );
@@ -967,7 +926,7 @@
       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`
         );
@@ -979,7 +938,7 @@
       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`
         );
@@ -988,7 +947,7 @@
       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`
         );
@@ -1016,16 +975,16 @@
     }
     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;
@@ -1062,7 +1021,7 @@
   }
   const observeState = (reader) => {
     return reader.pagination.state$.pipe(
-      rxjs.withLatestFrom(reader.context.manifest$, reader.settings.settings$),
+      rxjs.withLatestFrom(reader.context.manifest$, reader.settings.values$),
       rxjs.map(
         ([
           paginationInfo,
@@ -1086,7 +1045,7 @@
           };
         }
       ),
-      rxjs.distinctUntilChanged(isShallowEqual)
+      rxjs.distinctUntilChanged(shared.isShallowEqual)
     );
   };
   const navigationEnhancer = (next) => (options) => {
@@ -1094,10 +1053,11 @@
     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 {
@@ -1107,6 +1067,10 @@
         ...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),
@@ -1191,7 +1155,7 @@
     });
   }, 0);
   const trackTotalPages = (reader) => {
-    const totalPages$ = reader.spine.layout$.pipe(
+    const totalPages$ = reader.layout$.pipe(
       rxjs.debounceTime(10, rxjs.animationFrameScheduler),
       rxjs.withLatestFrom(reader.pagination.state$),
       rxjs.map(() => {
@@ -1207,7 +1171,7 @@
           )
         };
       }),
-      rxjs.distinctUntilChanged(isShallowEqual),
+      rxjs.distinctUntilChanged(shared.isShallowEqual),
       rxjs.startWith({
         numberOfPagesPerItems: [],
         numberOfTotalPages: 0
@@ -1275,7 +1239,7 @@
         ...info,
         ...mapPaginationInfoToExtendedInfo(reader)(info, chaptersInfo)
       })),
-      rxjs.distinctUntilChanged(isShallowEqual)
+      rxjs.distinctUntilChanged(shared.isShallowEqual)
     );
     const paginationInfo$ = rxjs.combineLatest([
       extandedBasePagination$,
@@ -1415,22 +1379,29 @@
       }
     };
   };
-  const createElementZoomer = (reader) => {
-    const isZooming$ = new rxjs.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 rxjs.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;
@@ -1441,82 +1412,45 @@
           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,
@@ -1529,35 +1463,33 @@
     const realScrollOffset = scrollOffset - oldCenterPosition;
     return Math.max(centerXPosition + realScrollOffset * scaleDifference, 0);
   };
-  const createViewportZoomer = (reader) => {
-    const isZooming$ = new rxjs.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 rxjs.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;
@@ -1576,75 +1508,23 @@
         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 rxjs.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 rxjs.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 {
@@ -1652,23 +1532,23 @@
       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(
-            rxjs.switchMap((zoomer) => (zoomer == null ? void 0 : zoomer.isZooming$) || rxjs.of(false))
-          )
+        isZooming$: zoomerSubject.pipe(
+          rxjs.switchMap((zoomer) => zoomer.isZooming$)
+        ),
+        get zoomContainerElement() {
+          return zoomerSubject.getValue().element;
+        },
+        get isZooming() {
+          return zoomerSubject.getValue().isZooming$.getValue();
         }
       }
     };
@@ -1725,7 +1605,7 @@
       });
       this.bridgeEvent = new BridgeEvent();
       this.destroy$ = new rxjs.Subject();
-      this.state$ = this._stateSubject.pipe(operators.distinctUntilChanged(isShallowEqual));
+      this.state$ = this._stateSubject.pipe(operators.distinctUntilChanged(shared.isShallowEqual));
       this.manifest$ = this._stateSubject.pipe(
         operators.map((state) => state.manifest),
         operators.filter(isDefined),
@@ -1782,7 +1662,7 @@
           forceSinglePageMode
         })
       };
-      if (!isShallowEqual(newCompleteState, previousState)) {
+      if (!shared.isShallowEqual(newCompleteState, previousState)) {
         this._stateSubject.next(newCompleteState);
       }
     }
@@ -1833,7 +1713,7 @@
         navigationId: void 0
       });
       this.state$ = this.paginationSubject.pipe(
-        rxjs.distinctUntilChanged(isShallowEqual),
+        rxjs.distinctUntilChanged(shared.isShallowEqual),
         rxjs.tap((value) => {
           report$3.info(`update`, value);
         }),
@@ -1854,7 +1734,6 @@
       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 = [
@@ -2039,6 +1918,80 @@
       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
@@ -2051,52 +2004,6 @@
       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,
@@ -2114,7 +2021,9 @@
       const numberOfPages = getSpineItemNumberOfPages({
         isUsingVerticalWriting,
         itemHeight,
-        itemWidth
+        itemWidth,
+        context,
+        settings
       });
       if (isUsingVerticalWriting) {
         return getPageFromOffset(position.y, pageHeight, numberOfPages);
@@ -2134,7 +2043,7 @@
       }
       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,
@@ -2150,10 +2059,12 @@
       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,
@@ -2205,12 +2116,33 @@
     };
     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 = ({
@@ -2225,10 +2157,11 @@
         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(
@@ -2265,10 +2198,13 @@
     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;
@@ -2312,10 +2248,10 @@
       spineItem,
       context
     });
-    const position = spineLocator.getSpinePositionFromSpineItemPosition(
-      { x: spineItemOffset, y: 0 },
+    const position = spineLocator.getSpinePositionFromSpineItemPosition({
+      spineItemPosition: { x: spineItemOffset, y: 0 },
       spineItem
-    );
+    });
     return position;
   };
   const getNavigationForAnchor = ({
@@ -2391,10 +2327,10 @@
       spineItemPosition,
       spineItem
     );
-    const spinePosition = spineLocator.getSpinePositionFromSpineItemPosition(
-      navigationInSpineItem,
+    const spinePosition = spineLocator.getSpinePositionFromSpineItemPosition({
+      spineItemPosition: navigationInSpineItem,
       spineItem
-    );
+    });
     return getAdjustedPositionForSpread({
       position: spinePosition,
       pageSizeWidth: context.getPageSize().width,
@@ -2417,10 +2353,10 @@
         spineItem,
         spineItemPosition
       );
-      const viewportNavigation = spineLocator.getSpinePositionFromSpineItemPosition(
-        spineItemValidPosition,
+      const viewportNavigation = spineLocator.getSpinePositionFromSpineItemPosition({
+        spineItemPosition: spineItemValidPosition,
         spineItem
-      );
+      });
       return getAdjustedPositionForSpread({
         position: viewportNavigation,
         pageSizeWidth: context.getPageSize().width,
@@ -2447,14 +2383,15 @@
         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,
@@ -3337,16 +3274,23 @@
     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`;
@@ -3354,7 +3298,8 @@
     context,
     spineItemsManager,
     locator,
-    settings
+    settings,
+    spineLayout
   }) => {
     const spineItemNavigator = createNavigationResolver$1({ context, settings });
     const arePositionsDifferent = (a, b) => a.x !== b.x || a.y !== b.y;
@@ -3369,10 +3314,10 @@
         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,
@@ -3383,10 +3328,10 @@
     };
     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,
@@ -3406,7 +3351,7 @@
       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;
@@ -3418,7 +3363,8 @@
         isRTL: context.isRTL(),
         pageSizeHeight: context.getPageSize().height,
         visibleAreaRectWidth: context.state.visibleAreaRect.width,
-        spineItemsManager
+        spineItemsManager,
+        spineLayout
       });
       return getNavigationForPosition({
         context,
@@ -3428,7 +3374,7 @@
       });
     };
     const isNavigationGoingForwardFrom = (to, from) => {
-      const pageTurnDirection = settings.settings.computedPageTurnDirection;
+      const pageTurnDirection = settings.values.computedPageTurnDirection;
       if (pageTurnDirection === `vertical`) {
         return to.y > from.y;
       }
@@ -3471,7 +3417,8 @@
         isRTL: context.isRTL(),
         pageSizeHeight: context.getPageSize().height,
         visibleAreaRectWidth: context.state.visibleAreaRect.width,
-        spineItemsManager
+        spineItemsManager,
+        spineLayout
       }),
       isNavigationGoingForwardFrom,
       areNavigationDifferent,
@@ -3486,10 +3433,9 @@
   };
   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 = {
@@ -3523,13 +3469,13 @@
       this.navigateSubject = new rxjs.Subject();
       this.scrollingSubject = new rxjs.BehaviorSubject(false);
       this.isScrolling$ = this.scrollingSubject.asObservable();
-      const settingsThatRequireLayout$ = settings.settings$.pipe(
+      const settingsThatRequireLayout$ = settings.values$.pipe(
         mapKeysTo([
           `computedPageTurnDirection`,
           `computedPageTurnMode`,
           `numberOfAdjacentSpineItemToPreLoad`
         ]),
-        rxjs.distinctUntilChanged(isShallowEqual)
+        rxjs.distinctUntilChanged(shared.isShallowEqual)
       );
       const updateElementOnSettingsChange$ = rxjs.merge(
         settingsThatRequireLayout$,
@@ -3537,7 +3483,7 @@
       ).pipe(
         rxjs.withLatestFrom(this.viewportElement$),
         rxjs.tap(([, element]) => {
-          if (settings.settings.computedPageTurnMode === `scrollable`) {
+          if (settings.values.computedPageTurnMode === `scrollable`) {
             element.style.removeProperty(`transform`);
             element.style.removeProperty(`transition`);
             element.style.overflow = `scroll`;
@@ -3549,7 +3495,7 @@
       );
       this.layout$ = updateElementOnSettingsChange$.pipe(
         rxjs.tap(() => {
-          report$2.info(`layout`, settings.settings);
+          report$2.info(`layout`, settings.values);
         }),
         rxjs.share()
       );
@@ -3560,7 +3506,7 @@
       );
       this.isNavigating$ = navigate$.pipe(
         rxjs.map(({ animation, position }) => {
-          const shouldAnimate = !(!animation || animation === `turn` && settings.settings.computedPageTurnAnimation === `none`);
+          const shouldAnimate = !(!animation || animation === `turn` && settings.values.computedPageTurnAnimation === `none`);
           return {
             type: `manualAdjust`,
             shouldAnimate,
@@ -3577,8 +3523,8 @@
             rxjs.of(null).pipe(
               rxjs.mergeMap(() => {
                 if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`) return rxjs.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 rxjs.of(currentEvent).pipe(
                   /**
                    * @important
@@ -3659,7 +3605,7 @@
      */
     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" });
         rxjs.timer(1).pipe(
@@ -3678,14 +3624,14 @@
     }
     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()) ?? {
@@ -3723,18 +3669,19 @@
   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 rxjs.Subject();
       this.locker = new Locker();
       this.navigation$ = this.navigationSubject.asObservable();
       const userScroll$ = element$.pipe(
         rxjs.switchMap(
-          (element) => settings.settings$.pipe(
+          (element) => settings.values$.pipe(
             rxjs.map(({ computedPageTurnMode }) => computedPageTurnMode),
             rxjs.distinctUntilChanged(),
             rxjs.filter(
@@ -3751,31 +3698,10 @@
         ),
         rxjs.share()
       );
-      const userScrollEnd$ = userScroll$.pipe(
-        rxjs.exhaustMap(
-          () => userScroll$.pipe(
-            rxjs.debounceTime(
-              SCROLL_FINISHED_DEBOUNCE_TIMEOUT,
-              rxjs.animationFrameScheduler
-            )
-          )
-        ),
-        rxjs.share()
-      );
-      const lockNavigationWhileScrolling$ = userScroll$.pipe(
-        rxjs.exhaustMap(() => {
-          return userScrollEnd$.pipe(
-            rxjs.take(1),
-            rxjs.finalize(() => {
-            })
-          );
-        })
-      );
-      const navigateOnScroll$ = settings.settings$.pipe(
+      const navigateOnScroll$ = settings.values$.pipe(
         rxjs.map(({ computedPageTurnMode }) => computedPageTurnMode),
         rxjs.distinctUntilChanged(),
         rxjs.filter((computedPageTurnMode) => computedPageTurnMode === "scrollable"),
-        rxjs.withLatestFrom(element$),
         rxjs.switchMap(() => userScroll$),
         rxjs.exhaustMap((event) => {
           const unlock = this.locker.lock();
@@ -3786,14 +3712,19 @@
             ),
             rxjs.first(),
             rxjs.tap(() => {
-              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
               });
             }),
             rxjs.finalize(() => {
@@ -3802,7 +3733,7 @@
           );
         })
       );
-      rxjs.merge(lockNavigationWhileScrolling$, navigateOnScroll$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
+      rxjs.merge(navigateOnScroll$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
     /**
      * Remember that this navigation is not trustable.
@@ -3821,14 +3752,15 @@
     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
@@ -3885,12 +3817,13 @@
     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
@@ -3899,7 +3832,7 @@
       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;
       }
@@ -3914,10 +3847,10 @@
           },
           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;
@@ -3930,10 +3863,10 @@
             positionInspineItem,
             foundSpineItem
           );
-          return spineLocator.getSpinePositionFromSpineItemPosition(
-            positionInSpineItem2,
-            foundSpineItem
-          );
+          return spineLocator.getSpinePositionFromSpineItemPosition({
+            spineItemPosition: positionInSpineItem2,
+            spineItem: foundSpineItem
+          });
         }
         if (!isPositionWithinSpineItem) {
           if (navigation.directionFromLastNavigation === "backward") {
@@ -3941,26 +3874,26 @@
               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);
         }
@@ -3973,44 +3906,46 @@
     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(
     rxjs.map((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
         })
       }
     }))
@@ -4053,7 +3988,7 @@
     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 {
@@ -4103,7 +4038,7 @@
     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") {
@@ -4125,10 +4060,11 @@
           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(
@@ -4184,13 +4120,13 @@
       })
     );
   };
-  const withSpineItemLayoutInfo = ({ spineItemsManager }) => (stream) => {
+  const withSpineItemLayoutInfo = ({ spine }) => (stream) => {
     return stream.pipe(
       rxjs.map(({ 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,
@@ -4274,14 +4210,14 @@
         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);
       }
@@ -4338,15 +4274,14 @@
   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 rxjs.BehaviorSubject({
@@ -4365,14 +4300,14 @@
           id
         })),
         rxjs.distinctUntilChanged(
-          ({ position: previousPosition, ...previousRest }, { position: currentPosition, ...currentRest }) => isShallowEqual(previousRest, currentRest) && isShallowEqual(previousPosition, currentPosition)
+          ({ position: previousPosition, ...previousRest }, { position: currentPosition, ...currentRest }) => shared.isShallowEqual(previousRest, currentRest) && shared.isShallowEqual(previousPosition, currentPosition)
         ),
         rxjs.shareReplay(1)
       );
       this.locker = new Locker();
       const layoutHasChanged$ = rxjs.merge(
         viewportController.layout$,
-        spineItemsManager.layout$.pipe(rxjs.filter((hasChanged) => hasChanged))
+        spine.spineLayout.layout$.pipe(rxjs.filter(({ hasChanged }) => hasChanged))
       );
       const navigationFromUser$ = userNavigation$.pipe(
         rxjs.withLatestFrom(this.navigationSubject),
@@ -4396,43 +4331,39 @@
           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
         }),
         rxjs.withLatestFrom(isUserLocked$),
         rxjs.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 rxjs.of(params).pipe(
             shouldNotAlterPosition ? rxjs.identity : withRestoredPosition({
               navigationResolver,
               settings,
-              spineItemsManager,
-              spineLocator,
-              spineItemLocator: spineLocator.spineItemLocator,
+              spine,
               context
             })
           );
         }),
         withSpineItemPosition({
-          spineItemsManager,
-          spineLocator,
+          spineItemsManager: spine.spineItemsManager,
+          spineLocator: spine.locator,
           settings,
-          context,
           navigationResolver
         }),
         rxjs.map((params) => params.navigation),
@@ -4489,10 +4420,8 @@
         withRestoredPosition({
           navigationResolver,
           settings,
-          spineItemsManager,
-          spineLocator,
-          spineItemLocator: spineLocator.spineItemLocator,
-          context
+          context,
+          spine
         }),
         rxjs.map((params) => {
           const navigation = {
@@ -4507,13 +4436,12 @@
           };
         }),
         withSpineItemLayoutInfo({
-          spineItemsManager
+          spine
         }),
         withSpineItemPosition({
-          spineItemsManager,
-          spineLocator,
+          spineItemsManager: spine.spineItemsManager,
+          spineLocator: spine.locator,
           settings,
-          context,
           navigationResolver
         }),
         rxjs.map(({ navigation }) => navigation),
@@ -4565,7 +4493,7 @@
           const isScrollFromUser = currentNavigation.type === `scroll`;
           const isPaginationUpdate = currentNavigation.meta.triggeredBy === "pagination";
           const isRestoration = currentNavigation.meta.triggeredBy === "restoration";
-          const positionIsSame = isShallowEqual(
+          const positionIsSame = shared.isShallowEqual(
             previousNavigation.position,
             currentNavigation.position
           );
@@ -4597,7 +4525,6 @@
   }
   const createNavigator = ({
     spineItemsManager,
-    spineItemsObserver,
     context,
     parentElement$,
     hookManager,
@@ -4609,7 +4536,8 @@
       context,
       settings,
       spineItemsManager,
-      locator: spine.locator
+      locator: spine.locator,
+      spineLayout: spine.spineLayout
     });
     const viewportNavigator = new ViewportNavigator(
       settings,
@@ -4621,7 +4549,7 @@
     const isSpineScrolling$ = rxjs.merge(
       spine.elementResize$,
       spine.element$.pipe(operators.switchMap((element) => rxjs.fromEvent(element, "scroll"))),
-      spineItemsObserver.itemResize$
+      spine.spineItemsObserver.itemResize$
     ).pipe(
       operators.switchMap(() => rxjs.merge(rxjs.of(true), rxjs.timer(5).pipe(operators.map(() => false)))),
       operators.startWith(false)
@@ -4639,7 +4567,8 @@
       settings,
       element$,
       context,
-      scrollHappeningFromBrowser$
+      scrollHappeningFromBrowser$,
+      spine
     );
     const internalNavigator = new InternalNavigator(
       settings,
@@ -4647,8 +4576,7 @@
       userNavigator.navigation$,
       viewportNavigator,
       navigationResolver,
-      spineItemsManager,
-      spine.locator,
+      spine,
       element$,
       userNavigator.locker.isLocked$
     );
@@ -4710,9 +4638,9 @@
       this._settings$.subscribe();
     }
     _prepareUpdate(settings) {
-      const newInputSettings = shallowMergeIfDefined(this.inputSettings, settings);
+      const newInputSettings = shared.shallowMergeIfDefined(this.inputSettings, settings);
       const state = this.getOutputSettings(newInputSettings);
-      const hasChanged = !isShallowEqual(this.outputSettings, state);
+      const hasChanged = !shared.isShallowEqual(this.outputSettings, state);
       return {
         hasChanged,
         state,
@@ -4730,14 +4658,14 @@
       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();
@@ -4757,10 +4685,10 @@
         context.manifest$
       ]).pipe(
         operators.tap(() => {
-          this.update(this.settings);
+          this.update(this.values);
         })
       );
-      const updateContextOnSettingsChanges$ = this.settings$.pipe(
+      const updateContextOnSettingsChanges$ = this.values$.pipe(
         operators.tap(({ forceSinglePageMode }) => {
           context.update({ forceSinglePageMode });
         })
@@ -4900,7 +4828,7 @@
     const itemAnchor = getItemAnchor(spineItem);
     return `epubcfi(/0${itemAnchor}) `;
   };
-  const getCfi = Report.measurePerformance(
+  const generateCfiForSpineItemPage = Report.measurePerformance(
     `getCfi`,
     10,
     ({
@@ -4937,7 +4865,7 @@
       this.spineItemLocator = spineItemLocator;
       const updatePagination$ = rxjs.merge(
         this.context.bridgeEvent.navigation$,
-        spineItemsManager.layout$.pipe(rxjs.filter((hasChanged) => hasChanged))
+        spine.spineLayout.layout$.pipe(rxjs.filter(({ hasChanged }) => hasChanged))
       ).pipe(
         rxjs.switchMap(() => {
           const getVisiblePagesFromViewportPosition = ({
@@ -5022,12 +4950,12 @@
           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
@@ -5056,151 +4984,13 @@
     );
     return { start: startCFI, end: endCFI };
   };
-  class SpineItemsObserver extends DestroyableClass {
-    constructor(spineItemsManager) {
-      super();
-      this.spineItemsManager = spineItemsManager;
-      this.itemIsReady$ = this.spineItemsManager.items$.pipe(
-        rxjs.switchMap((items) => {
-          const itemsIsReady$ = items.map(
-            (item) => item.$.isReady$.pipe(rxjs.map((isReady) => ({ item, isReady })))
-          );
-          return rxjs.merge(...itemsIsReady$);
-        }),
-        rxjs.share()
-      );
-      this.itemResize$ = this.spineItemsManager.items$.pipe(
-        rxjs.switchMap((items) => {
-          const resize$ = items.map(
-            (item) => observeResize(item.element).pipe(
-              rxjs.map((entries) => ({ entries, item }))
-            )
-          );
-          return rxjs.merge(...resize$);
-        }),
-        rxjs.share()
-      );
-    }
-  }
-  const NAMESPACE = `spineItemsManager`;
   class SpineItemsManager extends DestroyableClass {
     constructor(context, settings) {
       super();
       this.context = context;
       this.settings = settings;
-      this.layoutSubject = new rxjs.Subject();
-      this.itemLayoutInformation = [];
       this.orderedSpineItemsSubject = new rxjs.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`) {
@@ -5213,24 +5003,6 @@
       }
       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;
@@ -5246,32 +5018,8 @@
         ...this.orderedSpineItemsSubject.getValue(),
         ...spineItems
       ]);
-      spineItems.forEach((spineItem) => {
-        spineItem.$.contentLayout$.pipe(operators.takeUntil(this.context.destroy$)).subscribe(() => {
-          this.layout();
-        });
-        spineItem.$.loaded$.pipe(
-          operators.tap(() => {
-            if (spineItem.isUsingVerticalWriting()) {
-              this.context.update({
-                hasVerticalWriting: true
-              });
-            } else {
-              this.context.update({
-                hasVerticalWriting: false
-              });
-            }
-          }),
-          operators.takeUntil(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) {
@@ -5281,52 +5029,22 @@
       }
       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;
@@ -5387,7 +5105,7 @@
     const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
     return (stream) => stream.pipe(
       rxjs.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`,
@@ -5439,7 +5157,7 @@
         }
         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, {
@@ -5704,7 +5422,7 @@
         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`);
           }
         }
@@ -5763,14 +5481,24 @@
     }
     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();
+        }
       }
     }
   }
@@ -5994,7 +5722,7 @@
       };
     };
     const getResource = async () => {
-      const fetchResource = settings.settings.fetchResource;
+      const fetchResource = settings.values.fetchResource;
       const lastFetch = (_) => {
         if (fetchResource) {
           return fetchResource(item);
@@ -6140,7 +5868,7 @@
         const cssLink = buildDocumentStyle(
           {
             ...commonSpineItem.getDimensionsForPaginatedContent(),
-            enableTouch: settings.settings.computedPageTurnMode !== `scrollable`,
+            enableTouch: settings.values.computedPageTurnMode !== `scrollable`,
             spreadPosition
           },
           viewportDimensions
@@ -6523,7 +6251,7 @@
         } 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(),
@@ -6626,12 +6354,13 @@
   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;
@@ -6680,9 +6409,15 @@
     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;
@@ -6713,12 +6448,18 @@
     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,
@@ -6740,22 +6481,114 @@
     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,
-      (position, spineItem) => {
-        const { left, top } = spineItemsManager.getAbsolutePositionOf(spineItem);
+    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 } = spineLayout.getAbsolutePositionOf(spineItem);
         return {
           /**
            * when using spread the item could be on the right and therefore will be negative
@@ -6770,15 +6603,11 @@
       },
       { 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);
@@ -6811,11 +6640,15 @@
         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: {
@@ -6854,24 +6687,48 @@
       };
     };
     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,
@@ -6879,6 +6736,7 @@
         context,
         settings,
         spineItemsManager,
+        spineLayout,
         ...params
       }),
       getVisiblePagesFromViewportPosition,
@@ -6892,7 +6750,7 @@
     settings
   }) => (stream) => stream.pipe(
     rxjs.tap(([beginIndex, endIndex]) => {
-      const { numberOfAdjacentSpineItemToPreLoad } = settings.settings;
+      const { numberOfAdjacentSpineItemToPreLoad } = settings.values;
       const leftMaximumIndex = beginIndex - numberOfAdjacentSpineItemToPreLoad;
       const rightMaximumIndex = endIndex + numberOfAdjacentSpineItemToPreLoad;
       spineItemsManager.items.forEach((orderedSpineItem, index) => {
@@ -6915,17 +6773,18 @@
     })
   );
   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(
-        rxjs.filter((hasChanged) => hasChanged)
+      const layoutHasChanged$ = this.spineLayout.layout$.pipe(
+        rxjs.filter(({ hasChanged }) => hasChanged)
       );
-      const numberOfAdjacentSpineItemToPreLoad$ = settings.settings$.pipe(
+      const numberOfAdjacentSpineItemToPreLoad$ = settings.values$.pipe(
         rxjs.map(
           ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
         ),
@@ -6950,6 +6809,272 @@
       loadSpineItems$.pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
   }
+  class SpineItemsObserver extends DestroyableClass {
+    constructor(spineItemsManager, spineLocator) {
+      super();
+      this.spineItemsManager = spineItemsManager;
+      this.spineLocator = spineLocator;
+      this.itemIsReady$ = this.spineItemsManager.items$.pipe(
+        rxjs.switchMap((items) => {
+          const itemsIsReady$ = items.map(
+            (item) => item.$.isReady$.pipe(rxjs.map((isReady) => ({ item, isReady })))
+          );
+          return rxjs.merge(...itemsIsReady$);
+        }),
+        rxjs.share()
+      );
+      this.itemResize$ = this.spineItemsManager.items$.pipe(
+        rxjs.switchMap((items) => {
+          const resize$ = items.map(
+            (item) => observeResize(item.element).pipe(
+              rxjs.map((entries) => ({ entries, item }))
+            )
+          );
+          return rxjs.merge(...resize$);
+        }),
+        rxjs.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 rxjs.Subject();
+      spineItemsManager.items$.pipe(
+        rxjs.switchMap((items) => {
+          const itemsLayout$ = items.map(
+            (spineItem) => spineItem.$.contentLayout$.pipe(
+              rxjs.tap(() => {
+                this.layout();
+              })
+            )
+          );
+          const writingModeUpdate$ = items.map(
+            (spineItem) => spineItem.$.loaded$.pipe(
+              rxjs.tap(() => {
+                if (spineItem.isUsingVerticalWriting()) {
+                  this.context.update({
+                    hasVerticalWriting: true
+                  });
+                } else {
+                  this.context.update({
+                    hasVerticalWriting: false
+                  });
+                }
+              })
+            )
+          );
+          return rxjs.merge(...itemsLayout$, ...writingModeUpdate$);
+        })
+      ).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
+      this.layout$ = this.layoutSubject.pipe(
+        rxjs.map((hasChanged) => ({ hasChanged })),
+        rxjs.startWith({ hasChanged: true }),
+        rxjs.map(({ 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
+          };
+        }),
+        rxjs.shareReplay(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) => !shared.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();
@@ -6966,17 +7091,24 @@
         operators.share()
       );
       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(
         operators.tap((manifest) => {
@@ -7011,7 +7143,7 @@
       return this.elementSubject.getValue();
     }
     layout() {
-      this.spineItemsManager.layout();
+      this.spineLayout.layout();
     }
     isSelecting() {
       return this.spineItemsManager.items.some(
@@ -7022,9 +7154,6 @@
       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();
@@ -7062,11 +7191,9 @@
       settingsManager,
       hookManager
     );
-    const spineItemsObserver = new SpineItemsObserver(spineItemsManager);
     const navigator2 = createNavigator({
       context,
       spineItemsManager,
-      spineItemsObserver,
       parentElement$: elementSubject$,
       hookManager,
       spine,
@@ -7112,26 +7239,27 @@
       });
       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();
     };
-    rxjs.merge(context.state$, settingsManager.settings$).pipe(
+    rxjs.merge(context.state$, settingsManager.values$).pipe(
       operators.map(() => void 0),
       operators.withLatestFrom(context.state$),
       operators.map(([, { hasVerticalWriting }]) => {
@@ -7140,10 +7268,10 @@
           hasVerticalWriting,
           renditionFlow: manifest == null ? void 0 : manifest.renditionFlow,
           renditionLayout: manifest == null ? void 0 : manifest.renditionLayout,
-          computedPageTurnMode: settingsManager.settings.computedPageTurnMode
+          computedPageTurnMode: settingsManager.values.computedPageTurnMode
         };
       }),
-      operators.distinctUntilChanged(isShallowEqual),
+      operators.distinctUntilChanged(shared.isShallowEqual),
       operators.map(
         ({
           hasVerticalWriting,
@@ -7181,22 +7309,23 @@
       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,
@@ -7207,17 +7336,19 @@
       },
       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(
+        operators.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(
-          operators.map((manifest) => manifest ? "ready" : "idle")
-        ),
         destroy$
       }
     };
@@ -7558,8 +7689,8 @@
     };
     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(
@@ -7679,12 +7810,12 @@
         };
       }, {})
     );
-    const updateEntriesLayout$ = (entries) => rxjs.combineLatest([reader.spine.layout$, reader.theme.$.theme$]).pipe(
+    const updateEntriesLayout$ = (entries) => rxjs.combineLatest([reader.layout$, reader.theme.$.theme$]).pipe(
       operators.map(([, theme]) => ({
         width: reader.context.state.visibleAreaRect.width,
         theme
       })),
-      operators.distinctUntilChanged(isShallowEqual),
+      operators.distinctUntilChanged(shared.isShallowEqual),
       operators.tap(({ width, theme }) => {
         Object.values(entries).forEach((element) => {
           element.style.setProperty(`max-width`, `${width}px`);
@@ -7770,84 +7901,74 @@
     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`,
@@ -7857,23 +7978,13 @@
     `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 rxjs.BehaviorSubject(void 0);
     const reader = next(options);
     reader.hookManager.register(`item.onLoad`, ({ destroy, frame, itemId }) => {
       const item = reader.spineItemsManager.get(itemId);
@@ -7886,12 +7997,15 @@
           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);
@@ -7906,25 +8020,7 @@
         unregister.forEach((cb) => cb());
       });
     });
-    reader.element$.pipe(
-      rxjs.tap((wrapper) => {
-        var _a;
-        const iframeEventBridgeElement = createIframeEventBridgeElement(wrapper);
-        wrapper.appendChild(iframeEventBridgeElement);
-        (_a = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a.remove();
-        iframeEventBridgeElement$.next(iframeEventBridgeElement);
-      }),
-      rxjs.takeUntil(reader.$.destroy$)
-    ).subscribe();
-    return {
-      ...reader,
-      events: {
-        normalizeEventForViewport: createNormalizeEventForViewport({
-          iframeEventBridgeElement$,
-          locator: reader.spine.locator
-        })
-      }
-    };
+    return reader;
   };
   const createReaderWithEnhancers = (
     //__
@@ -7965,12 +8061,16 @@
       )
     )
   );
+  Object.defineProperty(exports2, "isShallowEqual", {
+    enumerable: true,
+    get: () => shared.isShallowEqual
+  });
   exports2.HookManager = HookManager;
   exports2.Report = Report;
   exports2.SettingsManager = SettingsManager;
   exports2.createReader = createReaderWithEnhancers;
-  exports2.groupBy = groupBy;
-  exports2.isShallowEqual = isShallowEqual;
+  exports2.isHtmlElement = isHtmlElement;
+  exports2.waitForSwitch = waitForSwitch;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=index.umd.cjs.map