@prose-reader/core 1.21.0 → 1.22.0

package/dist/prose.umd.cjs

@@ -2117,9 +2117,62 @@
       }));
     });
   }
+  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);
+    });
+  };
   const fontsEnhancer = (next) => (options) => {
     const { fontScale = 1, lineHeight = `publisher`, fontWeight = `publisher`, fontJustification = `publisher` } = options;
-    const settingsSubject$ = new rxjs.BehaviorSubject({
+    const changes$ = new rxjs.Subject();
+    const settings$ = new rxjs.BehaviorSubject({
       fontScale,
       lineHeight,
       fontWeight,
@@ -2137,10 +2190,10 @@
         */
     ``}
     body {
-      ${settingsSubject$.value.fontScale !== 1 ? `font-size: ${settingsSubject$.value.fontScale}em !important;` : ``}
-      ${settingsSubject$.value.lineHeight !== `publisher` ? `line-height: ${settingsSubject$.value.lineHeight} !important;` : ``}
-      ${settingsSubject$.value.fontWeight !== `publisher` ? `font-weight: ${settingsSubject$.value.fontWeight} !important;` : ``}
-      ${settingsSubject$.value.fontJustification !== `publisher` ? `text-align: ${settingsSubject$.value.fontJustification} !important;` : ``}
+      ${settings$.value.fontScale !== 1 ? `font-size: ${settings$.value.fontScale}em !important;` : ``}
+      ${settings$.value.lineHeight !== `publisher` ? `line-height: ${settings$.value.lineHeight} !important;` : ``}
+      ${settings$.value.fontWeight !== `publisher` ? `font-weight: ${settings$.value.fontWeight} !important;` : ``}
+      ${settings$.value.fontJustification !== `publisher` ? `text-align: ${settings$.value.fontJustification} !important;` : ``}
     }
   `;
     const applyChangeToSpineItem = (requireLayout) => {
@@ -2168,8 +2221,20 @@
         return false;
       })
     );
-    settingsSubject$.asObservable().pipe(shouldRequireLayout, tap(applyChangeToSpineItem), rxjs.takeUntil(reader.$.destroy$)).subscribe();
-    const settings$ = rxjs.combineLatest([reader.settings$, settingsSubject$]).pipe(
+    const newSettings$ = changes$.pipe(
+      withLatestFrom(settings$),
+      rxjs.map(([changes, settings]) => ({
+        fontJustification: changes.fontJustification ?? settings.fontJustification,
+        fontWeight: changes.fontWeight ?? settings.fontWeight,
+        lineHeight: changes.lineHeight ?? settings.lineHeight,
+        fontScale: Math.max(0.01, changes.fontScale ?? settings.fontScale)
+      })),
+      distinctUntilChanged(isShallowEqual),
+      shareReplay(1)
+    );
+    newSettings$.subscribe(settings$);
+    settings$.pipe(shouldRequireLayout, tap(applyChangeToSpineItem), rxjs.takeUntil(reader.$.destroy$)).subscribe();
+    const settingsMerge$ = rxjs.combineLatest([reader.settings$, settings$]).pipe(
       rxjs.map(([innerSettings, settings]) => ({
         ...innerSettings,
         ...settings
@@ -2177,56 +2242,56 @@
     );
     return {
       ...reader,
-      /**
-       * Absorb current enhancer settings and passthrough the rest to reader
-       */
+      destroy: () => {
+        changes$.complete();
+        settings$.complete();
+      },
       setSettings: (settings) => {
-        const {
-          fontJustification: fontJustification2 = settingsSubject$.value.fontJustification,
-          fontScale: fontScale2 = settingsSubject$.value.fontScale,
-          fontWeight: fontWeight2 = settingsSubject$.value.fontWeight,
-          lineHeight: lineHeight2 = settingsSubject$.value.lineHeight,
-          ...passthroughSettings
-        } = settings;
-        if (hasOneKey(settings, [`fontJustification`, `fontScale`, `fontWeight`, `lineHeight`])) {
-          settingsSubject$.next({ fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2 });
-        }
+        const { fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2, ...passthroughSettings } = settings;
+        changes$.next({ fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2 });
         reader.setSettings(passthroughSettings);
       },
-      /**
-       * Combine reader settings with enhancer settings
-       */
-      settings$
+      settings$: settingsMerge$
     };
   };
-  const hasOneKey = (obj, keys) => keys.some((key) => key in obj);
   const hotkeysEnhancer = (next) => (options) => {
     const reader = next(options);
-    const onKeyPress = (e) => {
-      if (e.key === `ArrowRight`) {
-        reader.turnRight();
-      }
-      if (e.key === `ArrowLeft`) {
-        reader.turnLeft();
-      }
-    };
-    document.addEventListener(`keyup`, onKeyPress);
-    reader.registerHook(`item.onLoad`, ({ frame }) => {
-      var _a;
-      (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(`keyup`, onKeyPress);
-      return () => {
-        var _a2;
-        (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(`keyup`, onKeyPress);
-      };
-    });
-    const destroy = () => {
-      document.removeEventListener(`keyup`, onKeyPress);
-      reader.destroy();
-    };
-    return {
-      ...reader,
-      destroy
-    };
+    const navigateOnKey = (document2) => rxjs.fromEvent(document2, "keyup").pipe(
+      rxjs.withLatestFrom(reader.settings$),
+      rxjs.map(([e, { pageTurnDirection }]) => {
+        if (pageTurnDirection === "horizontal") {
+          if (e.key === `ArrowRight`) {
+            reader.turnRight();
+          }
+          if (e.key === `ArrowLeft`) {
+            reader.turnLeft();
+          }
+        }
+        if (pageTurnDirection === "vertical") {
+          if (e.key === `ArrowDown`) {
+            reader.turnRight();
+          }
+          if (e.key === `ArrowUp`) {
+            reader.turnLeft();
+          }
+        }
+        return e;
+      })
+    );
+    navigateOnKey(document).pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
+    reader.spineItems$.pipe(
+      rxjs.switchMap(
+        (spineItems) => rxjs.merge(
+          ...spineItems.map(
+            (item) => item.$.loaded$.pipe(
+              rxjs.switchMap((iframe) => (iframe == null ? void 0 : iframe.contentDocument) ? navigateOnKey(iframe.contentDocument) : rxjs.EMPTY)
+            )
+          )
+        )
+      ),
+      rxjs.takeUntil(reader.$.destroy$)
+    ).subscribe();
+    return reader;
   };
   const SHOULD_NOT_LAYOUT$2 = false;
   const createMovingSafePan$ = (reader) => {
@@ -2282,58 +2347,6 @@
       }, {});
     });
   };
-  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);
-    });
-  };
   const fixReflowable = (reader) => {
     reader.registerHook(`item.onAfterLayout`, ({ item, blankPagePosition, minimumWidth }) => {
       var _a;
@@ -2689,7 +2702,7 @@
     return offsetValues.find((offsetRange) => offset < offsetRange + pageWidth) || 0;
   };
   const NAMESPACE$5 = `paginationEnhancer`;
-  const report$1 = Report.namespace(NAMESPACE$5);
+  Report.namespace(NAMESPACE$5);
   const paginationEnhancer = (next) => (options) => {
     const reader = next(options);
     const chaptersInfo = {};
@@ -2699,8 +2712,12 @@
     };
     const mapPaginationInfoToExtendedInfo = (paginationInfo) => {
       const context = reader.context;
+      const manifest = context.getManifest();
+      const numberOfSpineItems = (manifest == null ? void 0 : manifest.spineItems.length) ?? 0;
       const beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.beginSpineItemIndex) : void 0;
       const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.endSpineItemIndex) : void 0;
+      const isAtAbsoluteBeginning = paginationInfo.beginSpineItemIndex === 0 && paginationInfo.beginPageIndex === 0;
+      const isAtAbsoluteEnd = paginationInfo.endPageIndex === paginationInfo.endNumberOfPages - 1 && paginationInfo.endSpineItemIndex === Math.max(numberOfSpineItems - 1, 0);
       return {
         beginPageIndexInChapter: paginationInfo.beginPageIndex,
         beginNumberOfPagesInChapter: paginationInfo.beginNumberOfPages,
@@ -2716,19 +2733,14 @@
         // charOffset: number;
         // serializeString?: string;
         beginSpineItemIndex: paginationInfo.beginSpineItemIndex,
-        // spineItemPath: beginItem?.item.path,
-        // spineItemId: beginItem?.item.id,
         beginCfi: paginationInfo.beginCfi,
         beginSpineItemReadingDirection: beginItem == null ? void 0 : beginItem.getReadingDirection(),
         endChapterInfo: endItem ? chaptersInfo[endItem.item.id] : void 0,
         endPageIndexInChapter: paginationInfo.endPageIndex,
         endNumberOfPagesInChapter: paginationInfo.endNumberOfPages,
         endSpineItemIndex: paginationInfo.endSpineItemIndex,
-        // spineItemPath: endItem?.item.path,
-        // spineItemId: endItem?.item.id,
         endSpineItemReadingDirection: endItem == null ? void 0 : endItem.getReadingDirection(),
         endCfi: paginationInfo.endCfi,
-        // end: ReadingLocation;
         // spineItemReadingDirection: focusedSpineItem?.getReadingDirection(),
         /**
          * This percentage is based of the weight (kb) of every items and the number of pages.
@@ -2744,12 +2756,12 @@
           reader.getCurrentViewportPosition(),
           endItem
         ) : 0,
-        isUsingSpread: context.shouldDisplaySpread()
-        // chaptersOfBook: number;
-        // chapter: string;
+        isUsingSpread: context.shouldDisplaySpread(),
         // hasNextChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
         // hasPreviousChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
         // numberOfSpineItems: context.getManifest()?.readingOrder.length,
+        canGoLeft: (manifest == null ? void 0 : manifest.readingDirection) === "ltr" && !isAtAbsoluteBeginning || (manifest == null ? void 0 : manifest.readingDirection) === "rtl" && !isAtAbsoluteEnd,
+        canGoRight: (manifest == null ? void 0 : manifest.readingDirection) === "ltr" && !isAtAbsoluteEnd || (manifest == null ? void 0 : manifest.readingDirection) === "rtl" && !isAtAbsoluteBeginning
       };
     };
     const getSpineItemNumberOfPages = (spineItem) => {
@@ -2767,7 +2779,7 @@
     const getNumberOfPagesPerItems = () => reader.getSpineItems().map((item) => {
       return getSpineItemNumberOfPages(item);
     }, 0);
-    reader.$.itemsCreated$.pipe(
+    reader.spineItems$.pipe(
       tap(
         (items) => items.forEach(({ item }) => {
           chaptersInfo[item.id] = getChapterInfo2(item);
@@ -2808,9 +2820,6 @@
         beginAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.beginSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.beginPageIndexInChapter ?? 0),
         endAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.endSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.endPageIndexInChapter ?? 0)
       })),
-      tap((data) => {
-        report$1.log(`pagination`, data);
-      }),
       shareReplay(1),
       takeUntil(reader.$.destroy$)
     );
@@ -2912,7 +2921,7 @@
       removeStyle(`prose-reader-theme`);
       addStyle(`prose-reader-theme`, getStyle());
     });
-    reader.$.itemsCreated$.pipe(
+    reader.spineItems$.pipe(
       tap((items) => items.map(({ element }) => applyChangeToSpineItemElement({ container: element }))),
       takeUntil(reader.$.destroy$)
     ).subscribe();
@@ -3320,7 +3329,7 @@
       getVisibleAreaRect: () => visibleAreaRect,
       shouldDisplaySpread,
       setHasVerticalWriting,
-      setVisibleAreaRect: (x, y, width, height) => {
+      setVisibleAreaRect: ({ height, width, x, y }) => {
         visibleAreaRect.width = width;
         visibleAreaRect.height = height - marginTop - marginBottom;
         visibleAreaRect.x = x;
@@ -3633,13 +3642,17 @@
       getComputedStyleAfterLoad
     } = createLoader({ context, hooks$, item, parent, fetchResource, viewportState$ });
     let isLoadedSync = false;
-    const isReadySubject$ = new rxjs.BehaviorSubject(false);
+    let isReadySync = false;
     isLoaded$.subscribe({
       next: (value) => {
         isLoadedSync = value;
       }
     });
-    isReady$.subscribe(isReadySubject$);
+    isReady$.subscribe({
+      next: (value) => {
+        isReadySync = value;
+      }
+    });
     const getManipulableFrame = () => {
       const frame = frameElement$.value;
       if (isLoadedSync && frame) {
@@ -3691,8 +3704,14 @@
       destroySubject$.complete();
     };
     return {
+      /**
+       * @deprecated
+       */
       getIsLoaded: () => isLoadedSync,
-      getIsReady: () => isReadySubject$.value,
+      /**
+       * @deprecated
+       */
+      getIsReady: () => isReadySync,
       getViewportDimensions,
       getFrameElement: () => frameElement$.getValue(),
       getHtmlFromResource,
@@ -3736,7 +3755,7 @@
         unloaded$,
         loaded$,
         ready$,
-        isReady$: isReadySubject$.asObservable(),
+        isReady$,
         /**
          * This is used as upstream layout change. This event is being listened to by upper app
          * in order to layout again and adjust every element based on the new content.
@@ -4219,6 +4238,14 @@
         var _a2;
         return (_a2 = spineItemFrame.getWritingMode()) == null ? void 0 : _a2.startsWith(`vertical`);
       },
+      /**
+       * @important
+       * Do not use this value for layout and navigation. It will be in possible conflict
+       * with the global reading direction. A book should not mix them anyway. A page can have
+       * a different reading direction for style reason but it should be in theory pre-paginated.
+       * For example an english page in a japanese manga. That's expected and will
+       * be confined to a single page.
+       */
       getReadingDirection: () => {
         return spineItemFrame.getReadingDirection() || context.getReadingDirection();
       },
@@ -5748,7 +5775,7 @@
     currentNavigationPosition$,
     viewportState$
   }) => {
-    const itemsCreatedSubject$ = new rxjs.Subject();
+    const spineItems$ = new rxjs.Subject();
     const itemsBeforeDestroySubject$ = new rxjs.Subject();
     const subject = new rxjs.Subject();
     const containerElement = createContainerElement(ownerDocument, hooks$);
@@ -5763,7 +5790,7 @@
       var _a;
       itemsBeforeDestroySubject$.next();
       spineItemManager.destroyItems();
-      (_a = context.getManifest()) == null ? void 0 : _a.spineItems.map(async (resource) => {
+      (_a = context.getManifest()) == null ? void 0 : _a.spineItems.map((resource) => {
         const spineItem = createSpineItem({
           item: resource,
           containerElement,
@@ -5774,7 +5801,7 @@
         });
         spineItemManager.add(spineItem);
       });
-      itemsCreatedSubject$.next(spineItemManager.getAll());
+      spineItems$.next(spineItemManager.getAll());
     };
     const manipulateSpineItems = (cb) => {
       let shouldLayout = false;
@@ -6020,7 +6047,7 @@
       manipulateSpineItems,
       manipulateSpineItem,
       destroy: () => {
-        itemsCreatedSubject$.complete();
+        spineItems$.complete();
         itemsBeforeDestroySubject$.next();
         itemsBeforeDestroySubject$.complete();
         subject.complete();
@@ -6040,7 +6067,7 @@
       $: {
         $: subject.asObservable(),
         layout$: spineItemManager.$.layout$,
-        itemsCreated$: itemsCreatedSubject$.asObservable(),
+        spineItems$: spineItems$.asObservable(),
         itemsBeforeDestroy$: itemsBeforeDestroySubject$.asObservable()
       }
     };
@@ -6081,10 +6108,10 @@
       const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
       manifest ? getCoverItem(manifest) : void 0;
       orderedSpineItemsSubject$.value.reduce(
-        (edgeOffset, item, index) => {
+        ({ horizontalOffset, verticalOffset }, item, index) => {
           let minimumWidth = context.getPageSize().width;
           let blankPagePosition = `none`;
-          const itemStartOnNewScreen = edgeOffset.edgeX % context.getVisibleAreaRect().width === 0;
+          const itemStartOnNewScreen = horizontalOffset % context.getVisibleAreaRect().width === 0;
           const isLastItem = index === orderedSpineItemsSubject$.value.length - 1;
           if (context.shouldDisplaySpread()) {
             if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
@@ -6115,8 +6142,8 @@
             spreadPosition: context.shouldDisplaySpread() ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
           });
           if (context.getSettings().computedPageTurnDirection === `vertical`) {
-            const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? edgeOffset.edgeY : edgeOffset.edgeY - context.getVisibleAreaRect().height;
-            const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : edgeOffset.edgeX;
+            const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.getVisibleAreaRect().height;
+            const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
             if (context.isRTL()) {
               item.adjustPositionOfElement({
                 top: currentValidEdgeYForVerticalPositioning,
@@ -6128,41 +6155,41 @@
                 left: currentValidEdgeXForVerticalPositioning
               });
             }
-            const newEdgeX2 = width + currentValidEdgeXForVerticalPositioning;
+            const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
             const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
             newItemLayoutInformation.push({
-              leftStart: currentValidEdgeXForVerticalPositioning,
-              leftEnd: newEdgeX2,
-              topStart: currentValidEdgeYForVerticalPositioning,
-              topEnd: newEdgeY,
+              left: currentValidEdgeXForVerticalPositioning,
+              right: newEdgeX,
+              top: currentValidEdgeYForVerticalPositioning,
+              bottom: newEdgeY,
               height,
               width
             });
             return {
-              edgeX: newEdgeX2,
-              edgeY: newEdgeY
+              horizontalOffset: newEdgeX,
+              verticalOffset: newEdgeY
             };
           }
-          if (context.isRTL()) {
-            item.adjustPositionOfElement({ right: edgeOffset.edgeX, top: 0 });
-          } else {
-            item.adjustPositionOfElement({ left: edgeOffset.edgeX, top: 0 });
-          }
-          const newEdgeX = width + edgeOffset.edgeX;
+          item.adjustPositionOfElement(context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 });
           newItemLayoutInformation.push({
-            leftStart: edgeOffset.edgeX,
-            leftEnd: newEdgeX,
-            topStart: edgeOffset.edgeY,
-            topEnd: height,
+            ...context.isRTL() ? {
+              left: context.getVisibleAreaRect().width - horizontalOffset - width,
+              right: context.getVisibleAreaRect().width - horizontalOffset
+            } : {
+              left: horizontalOffset,
+              right: horizontalOffset + width
+            },
+            top: verticalOffset,
+            bottom: height,
             height,
             width
           });
           return {
-            edgeX: newEdgeX,
-            edgeY: 0
+            horizontalOffset: horizontalOffset + width,
+            verticalOffset: 0
           };
         },
-        { edgeX: 0, edgeY: 0 }
+        { horizontalOffset: 0, verticalOffset: 0 }
       );
       const hasLayoutChanges = itemLayoutInformation.some((old, index) => !isShallowEqual(old, newItemLayoutInformation[index]));
       itemLayoutInformation = newItemLayoutInformation;
@@ -6204,34 +6231,18 @@
       }
       return orderedSpineItemsSubject$.value.find(({ item }) => item.id === indexOrId);
     };
-    const getAbsolutePositionOf = Report.measurePerformance(
-      `getAbsolutePositionOf`,
-      10,
-      (spineItemOrIndex) => {
-        context.getSettings().computedPageTurnDirection;
-        const indexOfItem = typeof spineItemOrIndex === `number` ? spineItemOrIndex : orderedSpineItemsSubject$.value.indexOf(spineItemOrIndex);
-        const layoutInformation = itemLayoutInformation[indexOfItem];
-        if (!layoutInformation) {
-          return {
-            leftStart: 0,
-            leftEnd: 0,
-            topStart: 0,
-            topEnd: 0,
-            width: 0,
-            height: 0
-          };
-        }
-        return itemLayoutInformation[indexOfItem] || {
-          leftStart: 0,
-          leftEnd: 0,
-          topStart: 0,
-          topEnd: 0,
-          width: 0,
-          height: 0
-        };
-      },
-      { disable: true }
-    );
+    const getAbsolutePositionOf = (spineItemOrIndex) => {
+      const indexOfItem = typeof spineItemOrIndex === `number` ? spineItemOrIndex : orderedSpineItemsSubject$.value.indexOf(spineItemOrIndex);
+      const layoutInformation = itemLayoutInformation[indexOfItem];
+      return layoutInformation || {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: 0,
+        height: 0
+      };
+    };
     const getFocusedSpineItem = () => focusedSpineItemIndex !== void 0 ? orderedSpineItemsSubject$.value[focusedSpineItemIndex] : void 0;
     const comparePositionOf = (toCompare, withItem) => {
       const isAfter = orderedSpineItemsSubject$.value.indexOf(toCompare) > orderedSpineItemsSubject$.value.indexOf(withItem);
@@ -6269,26 +6280,6 @@
       const item = getFocusedSpineItem();
       return item && getSpineItemIndex(item);
     };
-    const getSpineItemAtPosition = Report.measurePerformance(
-      `getSpineItemAtPosition`,
-      10,
-      (position) => {
-        const detectedItem = orderedSpineItemsSubject$.value.find((item) => {
-          const { leftStart, leftEnd, topEnd, topStart } = getAbsolutePositionOf(item);
-          const isWithinXAxis = position.x >= leftStart && position.x < leftEnd;
-          if (context.getSettings().computedPageTurnDirection === `horizontal`) {
-            return isWithinXAxis;
-          } else {
-            return isWithinXAxis && position.y >= topStart && position.y < topEnd;
-          }
-        });
-        if (position.x === 0 && !detectedItem) {
-          return orderedSpineItemsSubject$.value[0];
-        }
-        return detectedItem;
-      },
-      { disable: true }
-    );
     const destroyItems = () => {
       orderedSpineItemsSubject$.value.forEach((item) => item.destroy());
     };
@@ -6308,7 +6299,6 @@
       loadContents,
       comparePositionOf,
       getAbsolutePositionOf,
-      getSpineItemAtPosition,
       getFocusedSpineItem,
       getFocusedSpineItemIndex,
       getSpineItemIndex,
@@ -6326,9 +6316,12 @@
     };
   };
   const createLocationResolver$1 = ({ context }) => {
+    const getSafePosition = (unsafeSpineItemPosition, spineItem) => ({
+      x: Math.min(spineItem.getElementDimensions().width, Math.max(0, unsafeSpineItemPosition.x)),
+      y: Math.min(spineItem.getElementDimensions().height, Math.max(0, unsafeSpineItemPosition.y))
+    });
     const getSpineItemPositionFromPageIndex = (pageIndex, spineItem) => {
       const { width: itemWidth, height: itemHeight } = spineItem.getElementDimensions();
-      const itemReadingDirection = spineItem.getReadingDirection();
       if (spineItem.isUsingVerticalWriting()) {
         const ltrRelativeOffset2 = getItemOffsetFromPageIndex(context.getPageSize().height, pageIndex, itemHeight);
         return {
@@ -6337,7 +6330,7 @@
         };
       }
       const ltrRelativeOffset = getItemOffsetFromPageIndex(context.getPageSize().width, pageIndex, itemWidth);
-      if (itemReadingDirection === `rtl`) {
+      if (context.isRTL()) {
         return {
           x: itemWidth - ltrRelativeOffset - context.getPageSize().width,
           y: 0
@@ -6350,19 +6343,16 @@
     };
     const getSpineItemPageIndexFromPosition = (position, spineItem) => {
       const { width: itemWidth, height: itemHeight } = spineItem.getElementDimensions();
-      const itemReadingDirection = spineItem.getReadingDirection();
       const pageWidth = context.getPageSize().width;
       const pageHeight = context.getPageSize().height;
-      let offsetNormalizedForLtr = Math.min(itemWidth, Math.max(0, position.x));
-      if (itemReadingDirection === `rtl`) {
-        offsetNormalizedForLtr = itemWidth - offsetNormalizedForLtr - context.getPageSize().width;
-      }
+      const safePosition = getSafePosition(position, spineItem);
+      const offset = context.isRTL() ? itemWidth - safePosition.x - context.getPageSize().width : safePosition.x;
       if (spineItem.isUsingVerticalWriting()) {
         const numberOfPages = getNumberOfPages(itemHeight, pageHeight);
         return getPageFromOffset(position.y, pageHeight, numberOfPages);
       } else {
         const numberOfPages = getNumberOfPages(itemWidth, pageWidth);
-        const pageIndex = getPageFromOffset(offsetNormalizedForLtr, pageWidth, numberOfPages);
+        const pageIndex = getPageFromOffset(offset, pageWidth, numberOfPages);
         return pageIndex;
       }
     };
@@ -6442,6 +6432,13 @@
       getFirstNodeOrRangeAtPage
     };
   };
+  class SpineItemNavigationPosition {
+    constructor(position) {
+      this.__symbol = `SpineItemNavigationPosition`;
+      this.x = position.x;
+      this.y = position.y;
+    }
+  }
   const createNavigationResolver$1 = ({ context }) => {
     const spineItemLocator = createLocationResolver$1({ context });
     const getNavigationForLeftPage = (position, spineItem) => {
@@ -6455,7 +6452,8 @@
           y: position.y + context.getPageSize().height
         };
       }
-      return spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(nextPotentialPosition, spineItem);
+      const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(nextPotentialPosition, spineItem);
+      return new SpineItemNavigationPosition(navigationPosition);
     };
     const getNavigationForRightPage = (position, spineItem) => {
       let nextPotentialPosition = {
@@ -6468,7 +6466,8 @@
           y: position.y - context.getPageSize().height
         };
       }
-      return spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(nextPotentialPosition, spineItem);
+      const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(nextPotentialPosition, spineItem);
+      return new SpineItemNavigationPosition(navigationPosition);
     };
     const getNavigationForLastPage = (spineItem) => {
       if (spineItem.isUsingVerticalWriting()) {
@@ -6482,16 +6481,16 @@
       }
     };
     const getNavigationForPage = (pageIndex, spineItem) => {
-      const currentViewport = spineItemLocator.getSpineItemPositionFromPageIndex(pageIndex, spineItem);
-      return currentViewport;
+      const { x, y } = spineItemLocator.getSpineItemPositionFromPageIndex(pageIndex, spineItem);
+      return new SpineItemNavigationPosition({ x, y });
     };
     const getNavigationFromNode = (spineItem, node, offset) => {
       const position = spineItemLocator.getSpineItemPositionFromNode(node, offset, spineItem);
-      return position || { x: 0, y: 0 };
+      return new SpineItemNavigationPosition(position || { x: 0, y: 0 });
     };
     const getNavigationForPosition = (spineItem, position) => {
       const potentiallyCorrectedPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(position, spineItem);
-      return potentiallyCorrectedPosition;
+      return new SpineItemNavigationPosition(potentiallyCorrectedPosition);
     };
     return {
       getNavigationForLeftPage,
@@ -6518,11 +6517,18 @@
       (position) => {
         const lastSpineItem = spineItemManager.get(spineItemManager.getLength() - 1);
         const distanceOfLastSpineItem = spineItemManager.getAbsolutePositionOf(lastSpineItem || 0);
-        const maximumXOffset = distanceOfLastSpineItem.leftEnd - context.getPageSize().width;
-        const maximumYOffset = distanceOfLastSpineItem.topEnd - context.getPageSize().height;
+        const maximumYOffset = distanceOfLastSpineItem.bottom - context.getPageSize().height;
+        const y = Math.min(Math.max(0, position.y), maximumYOffset);
+        if (context.isRTL()) {
+          return {
+            x: Math.max(Math.min(0, position.x), distanceOfLastSpineItem.left),
+            y
+          };
+        }
+        const maximumXOffset = distanceOfLastSpineItem.right - context.getPageSize().width;
         return {
           x: Math.min(Math.max(0, position.x), maximumXOffset),
-          y: Math.min(Math.max(0, position.y), maximumYOffset)
+          y
         };
       },
       { disable: true }
@@ -6538,7 +6544,7 @@
       if (!spineItem) {
         Report.warn(NAMESPACE$3, `unable to detect item id from cfi ${cfi}`);
       } else {
-        const spineItemNavigation = node ? spineItemNavigator.getNavigationFromNode(spineItem, node, offset) : { x: 0, y: 0 };
+        const spineItemNavigation = node ? spineItemNavigator.getNavigationFromNode(spineItem, node, offset) : new SpineItemNavigationPosition({ x: 0, y: 0 });
         const readingPosition = locator.getSpinePositionFromSpineItemPosition(spineItemNavigation, spineItem);
         return { ...getAdjustedPositionForSpread(readingPosition), spineItem };
       }
@@ -6575,10 +6581,10 @@
       }
       const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(position, spineItem);
       const spineItemNavigationForRightPage = spineItemNavigator.getNavigationForRightPage(spineItemPosition, spineItem);
-      const isNewNavigationInCurrentItem = !spineItemPosition.outsideOfBoundaries && arePositionsDifferent(spineItemNavigationForRightPage, spineItemPosition);
+      const isNewNavigationInCurrentItem = arePositionsDifferent(spineItemNavigationForRightPage, spineItemPosition);
       if (!isNewNavigationInCurrentItem) {
         return wrapPositionWithSafeEdge(
-          context.isRTL() ? pageTurnDirection === `horizontal` ? { x: position.x - context.getPageSize().width, y: 0 } : { y: position.y + context.getPageSize().height, x: 0 } : pageTurnDirection === `horizontal` ? { x: position.x + context.getPageSize().width, y: 0 } : { y: position.y + context.getPageSize().height, x: 0 }
+          pageTurnDirection === `horizontal` ? { x: position.x + context.getPageSize().width, y: 0 } : { y: position.y + context.getPageSize().height, x: 0 }
         );
       } else {
         const readingOrderPosition = locator.getSpinePositionFromSpineItemPosition(spineItemNavigationForRightPage, spineItem);
@@ -6594,10 +6600,10 @@
       }
       const spineItemPosition = locator.getSpineItemPositionFromSpinePosition(position, spineItem);
       const spineItemNavigation = spineItemNavigator.getNavigationForLeftPage(spineItemPosition, spineItem);
-      const isNewNavigationInCurrentItem = !spineItemPosition.outsideOfBoundaries && arePositionsDifferent(spineItemNavigation, spineItemPosition);
+      const isNewNavigationInCurrentItem = arePositionsDifferent(spineItemNavigation, spineItemPosition);
       if (!isNewNavigationInCurrentItem) {
         return wrapPositionWithSafeEdge(
-          context.isRTL() ? pageTurnDirection === `horizontal` ? { x: position.x + context.getPageSize().width, y: 0 } : { y: position.y - context.getPageSize().height, x: 0 } : pageTurnDirection === `horizontal` ? { x: position.x - context.getPageSize().width, y: 0 } : { y: position.y - context.getPageSize().height, x: 0 }
+          pageTurnDirection === `horizontal` ? { x: position.x - context.getPageSize().width, y: 0 } : { y: position.y - context.getPageSize().height, x: 0 }
         );
       } else {
         const readingOrderPosition = locator.getSpinePositionFromSpineItemPosition(spineItemNavigation, spineItem);
@@ -6606,7 +6612,7 @@
     };
     const getNavigationForRightPage = (position) => {
       const spineItemOnPosition = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
-      let navigation = getNavigationForRightSinglePage(position);
+      const navigation = getNavigationForRightSinglePage(position);
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
         return getAdjustedPositionForSpread(navigation);
       }
@@ -6627,13 +6633,14 @@
         if (context.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
           return getAdjustedPositionForSpread(navigation);
         }
-        navigation = getNavigationForRightSinglePage(navigation);
+        const doubleNavigation = getNavigationForRightSinglePage(navigation);
+        return getAdjustedPositionForSpread(doubleNavigation);
       }
       return getAdjustedPositionForSpread(navigation);
     };
     const getNavigationForLeftPage = (position) => {
       const spineItemOnPosition = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
-      let navigation = getNavigationForLeftSinglePage(position);
+      const navigation = getNavigationForLeftSinglePage(position);
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
         return getAdjustedPositionForSpread(navigation);
       }
@@ -6648,17 +6655,17 @@
         if (context.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
           return getAdjustedPositionForSpread(navigation);
         }
-        navigation = getNavigationForLeftSinglePage(navigation);
+        const doubleNavigation = getNavigationForLeftSinglePage(navigation);
+        return getAdjustedPositionForSpread(doubleNavigation);
       }
       return getAdjustedPositionForSpread(navigation);
     };
     const getNavigationForUrl = (url) => {
-      var _a, _b;
+      var _a;
       try {
         const validUrl = url instanceof URL ? url : new URL(url);
         const urlWithoutAnchor = `${validUrl.origin}${validUrl.pathname}`;
         const existingSpineItem = (_a = context.getManifest()) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
-        console.log({ validUrl, urlWithoutAnchor, existingSpineItem }, (_b = context.getManifest()) == null ? void 0 : _b.spineItems);
         if (existingSpineItem) {
           const spineItem = spineItemManager.get(existingSpineItem.id);
           if (spineItem) {
@@ -6913,7 +6920,11 @@
           if (allowSpineItemChange) {
             const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(newSpineItem, currentSpineItem);
             if (positionOfNewSpineItemComparedToCurrentOne === `before`) {
-              return rxjs.of({ ...navigation, lastUserExpectedNavigation: { type: `navigate-from-next-item` }, animate: true });
+              return rxjs.of({
+                ...navigation,
+                lastUserExpectedNavigation: { type: `navigate-from-next-item` },
+                animate: true
+              });
             } else {
               return rxjs.of({
                 ...navigation,
@@ -7030,7 +7041,7 @@
           const correctedX = delta.x - ((movingLastDelta == null ? void 0 : movingLastDelta.x) || 0);
           const correctedY = delta.y - ((movingLastDelta == null ? void 0 : movingLastDelta.y) || 0);
           navigation = navigator2.wrapPositionWithSafeEdge({
-            x: pageTurnDirection === `horizontal` ? context.isRTL() ? movingLastPosition.x + correctedX : movingLastPosition.x - correctedX : 0,
+            x: pageTurnDirection === `horizontal` ? movingLastPosition.x - correctedX : 0,
             y: pageTurnDirection === `horizontal` ? 0 : movingLastPosition.y - correctedY
           });
           movingLastDelta = delta;
@@ -7092,7 +7103,10 @@
           const triggerPercentage = movingForward ? 1 - navigationSnapThreshold : navigationSnapThreshold;
           const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
           const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : to.y + context.getVisibleAreaRect().height * triggerPercentage;
-          const midScreenPositionSafePosition = navigator2.wrapPositionWithSafeEdge({ x: triggerXPosition, y: triggerYPosition });
+          const midScreenPositionSafePosition = navigator2.wrapPositionWithSafeEdge({
+            x: triggerXPosition,
+            y: triggerYPosition
+          });
           const finalNavigation = navigator2.getNavigationForPosition(midScreenPositionSafePosition);
           const lastUserExpectedNavigation = getLastUserExpectedNavigation(finalNavigation);
           return rxjs.of({ ...finalNavigation, lastUserExpectedNavigation });
@@ -7131,7 +7145,11 @@
     element.appendChild(spine.element);
     const layoutSubject$ = new rxjs.Subject();
     let currentViewportPositionMemoUnused;
-    const currentNavigationPositionSubject$ = new rxjs.BehaviorSubject({ x: -1, y: 0, spineItem: void 0 });
+    const currentNavigationPositionSubject$ = new rxjs.BehaviorSubject({
+      x: -1,
+      y: 0,
+      spineItem: void 0
+    });
     const navigator2 = createNavigationResolver({
       context,
       spineItemManager,
@@ -7141,8 +7159,6 @@
     const adjustNavigationSubject$ = new rxjs.Subject();
     parentElement.appendChild(element);
     const getCurrentViewportPosition = Report.measurePerformance(`${NAMESPACE} getCurrentViewportPosition`, 1, () => {
-      if (currentViewportPositionMemoUnused && (currentViewportPositionMemoUnused == null ? void 0 : currentViewportPositionMemoUnused.x) !== ~~(Math.abs(element.getBoundingClientRect().x) * 10) / 10)
-        ;
       if (context.getSettings().computedPageTurnMode === `scrollable`) {
         return scrollViewportNavigator.getCurrentViewportPosition();
       }
@@ -7151,7 +7167,8 @@
         // we want to round to first decimal because it's possible to have half pixel
         // however browser engine can also gives back x.yyyy based on their precision
         // @see https://stackoverflow.com/questions/13847053/difference-between-and-math-floor for ~~
-        x: ~~(Math.abs(x) * 10) / 10,
+        x: ~~(x * -1 * 10) / 10,
+        // x: ~~(x * 10) / 10,
         y: ~~(Math.abs(y) * 10) / 10
       };
       currentViewportPositionMemoUnused = newValue;
@@ -7198,11 +7215,7 @@
           return navigator22.adjustReadingOffset({ x, y }) || isAdjusted2;
         }, false);
         if (!isAdjusted) {
-          if (context.isRTL()) {
-            element.style.transform = `translate3d(${x}px, -${y}px, 0)`;
-          } else {
-            element.style.transform = `translate3d(-${x}px, -${y}px, 0)`;
-          }
+          element.style.transform = `translate3d(${-x}px, -${y}px, 0)`;
         }
         hooks.forEach((hook) => {
           if (hook.name === `onViewportOffsetAdjust`) {
@@ -7527,14 +7540,7 @@
       `getSpineItemPositionFromSpinePosition`,
       10,
       (position, spineItem) => {
-        const { leftEnd, leftStart, topStart, topEnd } = spineItemManager.getAbsolutePositionOf(spineItem);
-        if (context.isRTL()) {
-          return {
-            x: leftEnd - position.x - context.getPageSize().width,
-            // y: (topEnd - position.y) - context.getPageSize().height,
-            y: Math.max(0, position.y - topStart)
-          };
-        }
+        const { left, top } = spineItemManager.getAbsolutePositionOf(spineItem);
         return {
           /**
            * when using spread the item could be on the right and therefore will be negative
@@ -7543,31 +7549,35 @@
            * 400 - 600 = -200.
            * However we can assume we are at 0, because we in fact can see the beginning of the item
            */
-          x: Math.max(0, position.x - leftStart),
-          y: Math.max(0, position.y - topStart)
+          x: position.x - left,
+          y: position.y - top
         };
       },
       { disable: true }
     );
     const getSpinePositionFromSpineItemPosition = (spineItemPosition, spineItem) => {
-      const { leftEnd, leftStart, topStart, topEnd } = spineItemManager.getAbsolutePositionOf(spineItem);
-      if (context.isRTL()) {
-        return {
-          x: leftEnd - spineItemPosition.x - context.getPageSize().width,
-          // y: (topEnd - spineItemPosition.y) - context.getPageSize().height,
-          y: topStart + spineItemPosition.y
-        };
-      }
+      const { left, top } = spineItemManager.getAbsolutePositionOf(spineItem);
       return {
-        x: leftStart + spineItemPosition.x,
-        y: topStart + spineItemPosition.y
+        x: left + spineItemPosition.x,
+        y: top + spineItemPosition.y
       };
     };
     const getSpineItemFromPosition = Report.measurePerformance(
       `getSpineItemFromOffset`,
       10,
       (position) => {
-        const spineItem = spineItemManager.getSpineItemAtPosition(position);
+        const spineItem = spineItemManager.getAll().find((item) => {
+          const { left, right, bottom, top } = spineItemManager.getAbsolutePositionOf(item);
+          const isWithinXAxis = position.x >= left && position.x < right;
+          if (context.getSettings().computedPageTurnDirection === `horizontal`) {
+            return isWithinXAxis;
+          } else {
+            return isWithinXAxis && position.y >= top && position.y < bottom;
+          }
+        });
+        if (position.x === 0 && !spineItem) {
+          return spineItemManager.getAll()[0];
+        }
         return spineItem;
       },
       { disable: true }
@@ -7581,23 +7591,30 @@
       return position;
     };
     const getSpineItemsFromReadingOrderPosition = (position) => {
-      const beginItem = getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
-      const beginItemIndex = spineItemManager.getSpineItemIndex(beginItem);
-      if (beginItemIndex === void 0)
+      const itemAtPosition = getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
+      const itemAtPositionIndex = spineItemManager.getSpineItemIndex(itemAtPosition);
+      if (itemAtPositionIndex === void 0)
         return void 0;
       let endPosition = position;
       if (context.shouldDisplaySpread()) {
         endPosition = { x: position.x + context.getPageSize().width, y: position.y };
       }
-      const endItemIndex = spineItemManager.getSpineItemIndex(getSpineItemFromPosition(endPosition) || spineItemManager.getFocusedSpineItem()) ?? beginItemIndex;
-      const [left = beginItemIndex, right = beginItemIndex] = [beginItemIndex, endItemIndex].sort((a, b) => a - b);
+      const endItemIndex = spineItemManager.getSpineItemIndex(getSpineItemFromPosition(endPosition) || spineItemManager.getFocusedSpineItem()) ?? itemAtPositionIndex;
+      const items = [
+        { item: itemAtPositionIndex, position },
+        { item: endItemIndex, position: endPosition }
+      ];
+      const [begin, end] = items.sort((a, b) => {
+        if (a.item === b.item) {
+          return context.isRTL() ? b.position.x - a.position.x : a.position.x - b.position.x;
+        }
+        return a.item - b.item;
+      });
       return {
-        begin: beginItemIndex,
-        beginPosition: position,
-        end: endItemIndex,
-        endPosition,
-        left,
-        right
+        begin: begin.item,
+        beginPosition: begin.position,
+        end: end.item,
+        endPosition: end.position
       };
     };
     const getSpineItemFromIframe = (iframe) => {
@@ -7779,7 +7796,12 @@
       element.style.height = `${dimensions.height - marginTop - marginBottom}px`;
       element.style.width = `${containerElementEvenWidth - 2 * margin}px`;
       const elementRect = element.getBoundingClientRect();
-      context.setVisibleAreaRect(elementRect.x, elementRect.y, containerElementEvenWidth, dimensions.height);
+      context.setVisibleAreaRect({
+        x: elementRect.x,
+        y: elementRect.y,
+        width: containerElementEvenWidth,
+        height: dimensions.height
+      });
       viewportNavigator.layout();
     };
     const load = (manifest, loadOptions = {}) => {
@@ -7900,6 +7922,7 @@
        * BehaviorSubject
        */
       pagination$: pagination.$.info$,
+      spineItems$: spine.$.spineItems$,
       $: {
         state$: stateSubject$.asObservable(),
         /**
@@ -7915,7 +7938,6 @@
         selection$: selectionSubject$.asObservable(),
         viewportState$: viewportNavigator.$.state$,
         layout$: spine.$.layout$,
-        itemsCreated$: spine.$.itemsCreated$,
         itemsBeforeDestroy$: spine.$.itemsBeforeDestroy$,
         itemIsReady$: spineItemManager.$.itemIsReady$,
         destroy$
@@ -8273,11 +8295,11 @@
     };
     const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
       const { height, width } = currentItem.getElementDimensions();
-      const { topStart, leftStart } = reader.getAbsolutePositionOf(currentItem);
+      const { top, left } = reader.getAbsolutePositionOf(currentItem);
       if (context.getSettings().computedPageTurnDirection === `vertical`) {
-        return Math.max(0, Math.min(1, (currentPosition.y - topStart + context.getVisibleAreaRect().height) / height));
+        return Math.max(0, Math.min(1, (currentPosition.y - top + context.getVisibleAreaRect().height) / height));
       } else {
-        return Math.max(0, Math.min(1, (currentPosition.x - leftStart + context.getVisibleAreaRect().width) / width));
+        return Math.max(0, Math.min(1, (currentPosition.x - left + context.getVisibleAreaRect().width) / width));
       }
     };
     return {
@@ -8405,7 +8427,7 @@
         return {};
       })
     );
-    const items$ = reader.$.itemsCreated$.pipe(
+    const items$ = reader.spineItems$.pipe(
       switchMap((items) => createEntries$(items)),
       shareReplay(1),
       takeUntil(reader.context.$.destroy$)