@prose-reader/core 1.20.0 → 1.22.0

package/dist/prose.js

@@ -1,4 +1,4 @@
-import { BehaviorSubject, takeUntil as takeUntil$1, combineLatest, map as map$1, of, scheduled as scheduled$1, animationFrameScheduler, Subject as Subject$1, distinctUntilChanged as distinctUntilChanged$1, switchMap as switchMap$1, from as from$1, merge, EMPTY as EMPTY$1, fromEvent, interval, iif, withLatestFrom as withLatestFrom$1, identity as identity$1, take as take$1, forkJoin } from "rxjs";
+import { Subject as Subject$1, BehaviorSubject, map as map$1, takeUntil as takeUntil$1, combineLatest, switchMap as switchMap$1, merge, EMPTY as EMPTY$1, fromEvent, withLatestFrom as withLatestFrom$1, of, scheduled as scheduled$1, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, from as from$1, interval, iif, identity as identity$1, take as take$1, forkJoin } from "rxjs";
 import { parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
 const SHOULD_NOT_LAYOUT$3 = false;
 const chromeEnhancer = (next) => (options) => {
@@ -2115,9 +2115,62 @@ function withLatestFrom() {
     }));
   });
 }
+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 BehaviorSubject({
+  const changes$ = new Subject$1();
+  const settings$ = new BehaviorSubject({
     fontScale,
     lineHeight,
     fontWeight,
@@ -2135,10 +2188,10 @@ const fontsEnhancer = (next) => (options) => {
       */
   ``}
     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) => {
@@ -2166,8 +2219,20 @@ const fontsEnhancer = (next) => (options) => {
       return false;
     })
   );
-  settingsSubject$.asObservable().pipe(shouldRequireLayout, tap(applyChangeToSpineItem), takeUntil$1(reader.$.destroy$)).subscribe();
-  const settings$ = combineLatest([reader.settings$, settingsSubject$]).pipe(
+  const newSettings$ = changes$.pipe(
+    withLatestFrom(settings$),
+    map$1(([changes, settings]) => ({
+      fontJustification: changes.fontJustification ?? settings.fontJustification,
+      fontWeight: changes.fontWeight ?? settings.fontWeight,
+      lineHeight: changes.lineHeight ?? settings.lineHeight,
+      fontScale: Math.max(0.01, changes.fontScale ?? settings.fontScale)
+    })),
+    distinctUntilChanged(isShallowEqual),
+    shareReplay(1)
+  );
+  newSettings$.subscribe(settings$);
+  settings$.pipe(shouldRequireLayout, tap(applyChangeToSpineItem), takeUntil$1(reader.$.destroy$)).subscribe();
+  const settingsMerge$ = combineLatest([reader.settings$, settings$]).pipe(
     map$1(([innerSettings, settings]) => ({
       ...innerSettings,
       ...settings
@@ -2175,56 +2240,56 @@ const fontsEnhancer = (next) => (options) => {
   );
   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) => fromEvent(document2, "keyup").pipe(
+    withLatestFrom$1(reader.settings$),
+    map$1(([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(takeUntil$1(reader.$.destroy$)).subscribe();
+  reader.spineItems$.pipe(
+    switchMap$1(
+      (spineItems) => merge(
+        ...spineItems.map(
+          (item) => item.$.loaded$.pipe(
+            switchMap$1((iframe) => (iframe == null ? void 0 : iframe.contentDocument) ? navigateOnKey(iframe.contentDocument) : EMPTY$1)
+          )
+        )
+      )
+    ),
+    takeUntil$1(reader.$.destroy$)
+  ).subscribe();
+  return reader;
 };
 const SHOULD_NOT_LAYOUT$2 = false;
 const createMovingSafePan$ = (reader) => {
@@ -2280,58 +2345,6 @@ const mapKeysTo = (keys) => {
     }, {});
   });
 };
-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;
@@ -2687,7 +2700,7 @@ const getClosestValidOffsetFromApproximateOffsetInPages = (offset, pageWidth, it
   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 = {};
@@ -2697,8 +2710,12 @@ const paginationEnhancer = (next) => (options) => {
   };
   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,
@@ -2714,19 +2731,14 @@ const paginationEnhancer = (next) => (options) => {
       // 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.
@@ -2742,12 +2754,12 @@ const paginationEnhancer = (next) => (options) => {
         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) => {
@@ -2765,7 +2777,7 @@ const paginationEnhancer = (next) => (options) => {
   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);
@@ -2806,9 +2818,6 @@ const paginationEnhancer = (next) => (options) => {
       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$)
   );
@@ -2910,7 +2919,7 @@ const themeEnhancer = (next) => (options) => {
     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();
@@ -3318,7 +3327,7 @@ const createContext = (initialSettings) => {
     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;
@@ -3631,13 +3640,17 @@ const createFrameItem = ({
     getComputedStyleAfterLoad
   } = createLoader({ context, hooks$, item, parent, fetchResource, viewportState$ });
   let isLoadedSync = false;
-  const isReadySubject$ = new 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) {
@@ -3689,8 +3702,14 @@ const createFrameItem = ({
     destroySubject$.complete();
   };
   return {
+    /**
+     * @deprecated
+     */
     getIsLoaded: () => isLoadedSync,
-    getIsReady: () => isReadySubject$.value,
+    /**
+     * @deprecated
+     */
+    getIsReady: () => isReadySync,
     getViewportDimensions,
     getFrameElement: () => frameElement$.getValue(),
     getHtmlFromResource,
@@ -3734,7 +3753,7 @@ const createFrameItem = ({
       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.
@@ -4217,6 +4236,14 @@ const createCommonSpineItem = ({
       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();
     },
@@ -5746,7 +5773,7 @@ const createSpine = ({
   currentNavigationPosition$,
   viewportState$
 }) => {
-  const itemsCreatedSubject$ = new Subject$1();
+  const spineItems$ = new Subject$1();
   const itemsBeforeDestroySubject$ = new Subject$1();
   const subject = new Subject$1();
   const containerElement = createContainerElement(ownerDocument, hooks$);
@@ -5761,7 +5788,7 @@ const createSpine = ({
     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,
@@ -5772,7 +5799,7 @@ const createSpine = ({
       });
       spineItemManager.add(spineItem);
     });
-    itemsCreatedSubject$.next(spineItemManager.getAll());
+    spineItems$.next(spineItemManager.getAll());
   };
   const manipulateSpineItems = (cb) => {
     let shouldLayout = false;
@@ -6018,7 +6045,7 @@ const createSpine = ({
     manipulateSpineItems,
     manipulateSpineItem,
     destroy: () => {
-      itemsCreatedSubject$.complete();
+      spineItems$.complete();
       itemsBeforeDestroySubject$.next();
       itemsBeforeDestroySubject$.complete();
       subject.complete();
@@ -6038,7 +6065,7 @@ const createSpine = ({
     $: {
       $: subject.asObservable(),
       layout$: spineItemManager.$.layout$,
-      itemsCreated$: itemsCreatedSubject$.asObservable(),
+      spineItems$: spineItems$.asObservable(),
       itemsBeforeDestroy$: itemsBeforeDestroySubject$.asObservable()
     }
   };
@@ -6079,10 +6106,10 @@ const createSpineItemManager = ({ context }) => {
     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) {
@@ -6113,8 +6140,8 @@ const createSpineItemManager = ({ context }) => {
           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,
@@ -6126,41 +6153,41 @@ const createSpineItemManager = ({ context }) => {
               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;
@@ -6202,34 +6229,18 @@ const createSpineItemManager = ({ context }) => {
     }
     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);
@@ -6267,26 +6278,6 @@ const createSpineItemManager = ({ context }) => {
     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());
   };
@@ -6306,7 +6297,6 @@ const createSpineItemManager = ({ context }) => {
     loadContents,
     comparePositionOf,
     getAbsolutePositionOf,
-    getSpineItemAtPosition,
     getFocusedSpineItem,
     getFocusedSpineItemIndex,
     getSpineItemIndex,
@@ -6324,9 +6314,12 @@ const createSpineItemManager = ({ context }) => {
   };
 };
 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 {
@@ -6335,7 +6328,7 @@ const createLocationResolver$1 = ({ context }) => {
       };
     }
     const ltrRelativeOffset = getItemOffsetFromPageIndex(context.getPageSize().width, pageIndex, itemWidth);
-    if (itemReadingDirection === `rtl`) {
+    if (context.isRTL()) {
       return {
         x: itemWidth - ltrRelativeOffset - context.getPageSize().width,
         y: 0
@@ -6348,19 +6341,16 @@ const createLocationResolver$1 = ({ context }) => {
   };
   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;
     }
   };
@@ -6440,6 +6430,13 @@ const createLocationResolver$1 = ({ context }) => {
     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) => {
@@ -6453,7 +6450,8 @@ const createNavigationResolver$1 = ({ context }) => {
         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 = {
@@ -6466,7 +6464,8 @@ const createNavigationResolver$1 = ({ context }) => {
         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()) {
@@ -6480,16 +6479,16 @@ const createNavigationResolver$1 = ({ context }) => {
     }
   };
   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,
@@ -6516,11 +6515,18 @@ const createNavigationResolver = ({
     (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 }
@@ -6536,7 +6542,7 @@ const createNavigationResolver = ({
     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 };
     }
@@ -6573,10 +6579,10 @@ const createNavigationResolver = ({
     }
     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);
@@ -6592,10 +6598,10 @@ const createNavigationResolver = ({
     }
     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);
@@ -6604,7 +6610,7 @@ const createNavigationResolver = ({
   };
   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);
     }
@@ -6625,13 +6631,14 @@ const createNavigationResolver = ({
       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);
     }
@@ -6646,17 +6653,17 @@ const createNavigationResolver = ({
       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) {
@@ -6911,7 +6918,11 @@ const createManualViewportNavigator = ({
         if (allowSpineItemChange) {
           const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(newSpineItem, currentSpineItem);
           if (positionOfNewSpineItemComparedToCurrentOne === `before`) {
-            return of({ ...navigation, lastUserExpectedNavigation: { type: `navigate-from-next-item` }, animate: true });
+            return of({
+              ...navigation,
+              lastUserExpectedNavigation: { type: `navigate-from-next-item` },
+              animate: true
+            });
           } else {
             return of({
               ...navigation,
@@ -7028,7 +7039,7 @@ const createPanViewportNavigator = ({
         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;
@@ -7090,7 +7101,10 @@ const createPanViewportNavigator = ({
         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 of({ ...finalNavigation, lastUserExpectedNavigation });
@@ -7129,7 +7143,11 @@ const createViewportNavigator = ({
   element.appendChild(spine.element);
   const layoutSubject$ = new Subject$1();
   let currentViewportPositionMemoUnused;
-  const currentNavigationPositionSubject$ = new BehaviorSubject({ x: -1, y: 0, spineItem: void 0 });
+  const currentNavigationPositionSubject$ = new BehaviorSubject({
+    x: -1,
+    y: 0,
+    spineItem: void 0
+  });
   const navigator2 = createNavigationResolver({
     context,
     spineItemManager,
@@ -7139,8 +7157,6 @@ const createViewportNavigator = ({
   const adjustNavigationSubject$ = new Subject$1();
   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();
     }
@@ -7149,7 +7165,8 @@ const createViewportNavigator = ({
       // 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;
@@ -7196,11 +7213,7 @@ const createViewportNavigator = ({
         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`) {
@@ -7525,14 +7538,7 @@ const createLocationResolver = ({
     `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
@@ -7541,31 +7547,35 @@ const createLocationResolver = ({
          * 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 }
@@ -7579,23 +7589,30 @@ const createLocationResolver = ({
     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) => {
@@ -7777,7 +7794,12 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
     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 = {}) => {
@@ -7898,6 +7920,7 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
      * BehaviorSubject
      */
     pagination$: pagination.$.info$,
+    spineItems$: spine.$.spineItems$,
     $: {
       state$: stateSubject$.asObservable(),
       /**
@@ -7913,7 +7936,6 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
       selection$: selectionSubject$.asObservable(),
       viewportState$: viewportNavigator.$.state$,
       layout$: spine.$.layout$,
-      itemsCreated$: spine.$.itemsCreated$,
       itemsBeforeDestroy$: spine.$.itemsBeforeDestroy$,
       itemIsReady$: spineItemManager.$.itemIsReady$,
       destroy$
@@ -8271,11 +8293,11 @@ const progressionEnhancer = (next) => (options) => {
   };
   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 {
@@ -8403,7 +8425,7 @@ const loadingEnhancer = (next) => (options) => {
       return {};
     })
   );
-  const items$ = reader.$.itemsCreated$.pipe(
+  const items$ = reader.spineItems$.pipe(
     switchMap((items) => createEntries$(items)),
     shareReplay(1),
     takeUntil(reader.context.$.destroy$)