@prose-reader/core 1.177.0 → 1.179.0

package/dist/index.umd.cjs

@@ -413,6 +413,51 @@
     return false;
   };
   const noopElement = () => document.createElement("div");
+  const getElementsWithAssets = (_document) => {
+    const RESOURCE_ELEMENTS = [
+      "img",
+      // Images
+      "video",
+      // Video files
+      "audio",
+      // Audio files
+      "source",
+      // Source elements within video/audio
+      "link",
+      // Stylesheets and other linked resources
+      "script"
+      // JavaScript files
+    ].join(",");
+    return Array.from((_document == null ? void 0 : _document.querySelectorAll(RESOURCE_ELEMENTS)) || []);
+  };
+  const revokeDocumentBlobs = (_document) => {
+    const elementsWithAsset = getElementsWithAssets(_document);
+    elementsWithAsset.forEach((element) => {
+      var _a;
+      const url = element.getAttribute("src") || element.getAttribute("href");
+      if (url == null ? void 0 : url.startsWith("blob:")) {
+        (_a = _document == null ? void 0 : _document.defaultView) == null ? void 0 : _a.URL.revokeObjectURL(url);
+      }
+    });
+    if (_document) {
+      const styleSheets = Array.from(_document.styleSheets || []);
+      for (const sheet of styleSheets) {
+        const rules = Array.from(sheet.cssRules || []);
+        for (const rule of rules) {
+          if (_document.defaultView && rule instanceof _document.defaultView.CSSFontFaceRule) {
+            const src = rule.style.getPropertyValue("src");
+            const blobUrls = src.match(/blob:[^,\s'")]+/g);
+            if (blobUrls) {
+              blobUrls.forEach((url) => {
+                var _a;
+                (_a = _document == null ? void 0 : _document.defaultView) == null ? void 0 : _a.URL.revokeObjectURL(url);
+              });
+            }
+          }
+        }
+      }
+    }
+  };
   const translateFramePositionIntoPage = ({
     position,
     frameElement
@@ -1054,31 +1099,169 @@
       return ((_a = this.context.manifest) == null ? void 0 : _a.renditionLayout) ?? "reflowable";
     }
   }
-  const createFrameElement = Report.measurePerformance(
-    `SpineItemFrame createFrame`,
-    Infinity,
-    () => {
-      const frame = document.createElement(`iframe`);
-      frame.frameBorder = `no`;
-      frame.tabIndex = 0;
-      frame.setAttribute(
-        `sandbox`,
-        `
-    allow-same-origin 
-    allow-scripts 
-    allow-top-navigation-to-custom-protocols
-  `
+  const defaultGetResource = (item) => new URL(item.href);
+  class ResourceHandler {
+    constructor(item, settings) {
+      this.item = item;
+      this.settings = settings;
+    }
+    async getResource() {
+      var _a, _b;
+      const resource = await rxjs.lastValueFrom(
+        ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? rxjs.of(void 0)
       );
-      frame.style.cssText = `
-    overflow: hidden;
-    background-color: transparent;
-    border: 0px none transparent;
-    padding: 0px;
-  `;
-      frame.setAttribute(`role`, `main`);
-      return frame;
+      return resource ?? defaultGetResource(this.item);
+    }
+    async fetchResource() {
+      const resource = await this.getResource();
+      if (resource instanceof Response) return resource;
+      if (resource instanceof URL) return fetch(resource);
+      return resource;
+    }
+  }
+  const joinPath = (base, path) => {
+    const isFileProtocol = base.startsWith("file://");
+    const tempBase = isFileProtocol ? base.replace("file://", "http://") : base;
+    const result = new URL(path, tempBase).toString();
+    return isFileProtocol ? result.replace("http://", "file://") : result;
+  };
+  const loadFontFaces = async (document2, element, spineItemUriParentPath, context, settings) => {
+    if (!document2 || !document2.defaultView) return;
+    const sheet = element.sheet;
+    if (!sheet) return;
+    try {
+      const rules = Array.from(sheet.cssRules || []);
+      for (let i = 0; i < rules.length; i++) {
+        const rule = rules[i];
+        if (document2.defaultView && rule instanceof document2.defaultView.CSSFontFaceRule) {
+          const src = rule.style.getPropertyValue("src");
+          const matches = src.match(/url\(['"]?([^'"]+)['"]?\)/g);
+          if (matches) {
+            const srcParts = src.split(",").map((part) => part.trim());
+            const newSrcParts = await Promise.all(
+              srcParts.map(async (part) => {
+                var _a, _b;
+                if (part.startsWith("local(")) {
+                  return part;
+                }
+                const urlMatch = part.match(/url\(['"]?([^'"]+)['"]?\)/);
+                if (!urlMatch) return part;
+                const originalSrc = urlMatch[1] ?? ``;
+                const foundItem = (_a = context.manifest) == null ? void 0 : _a.items.find(({ href }) => {
+                  return `${joinPath(spineItemUriParentPath, originalSrc).toLowerCase()}`.endsWith(
+                    `${href.toLowerCase()}`
+                  );
+                });
+                if (foundItem) {
+                  const resourceHandler = new ResourceHandler(foundItem, settings);
+                  try {
+                    const resource = await resourceHandler.getResource();
+                    if (resource instanceof Response) {
+                      const blob = await resource.blob();
+                      const blobUrl = (_b = document2.defaultView) == null ? void 0 : _b.URL.createObjectURL(blob);
+                      const newPart = part.replace(
+                        urlMatch[0],
+                        `url("${blobUrl}")`
+                      );
+                      return newPart;
+                    }
+                  } catch (e) {
+                    console.error("Error loading font:", e);
+                  }
+                }
+                return part;
+              })
+            );
+            const newRule = rule.cssText.replace(
+              /src:\s*[^;]+;/,
+              `src: ${newSrcParts.join(", ")};`
+            );
+            sheet.deleteRule(i);
+            sheet.insertRule(newRule, i);
+          }
+        }
+      }
+    } catch (e) {
+      console.error("Could not access stylesheet rules:", e);
     }
+  };
+  const loadElementSrc = (_document, element, spineItemUriParentPath, context, settings) => {
+    var _a;
+    const originalSrc = element.getAttribute("src") || element.getAttribute("href");
+    if (!originalSrc) return rxjs.of(null);
+    const foundItem = (_a = context.manifest) == null ? void 0 : _a.items.find(({ href }) => {
+      return `${joinPath(spineItemUriParentPath, originalSrc).toLowerCase()}`.endsWith(
+        `${href.toLowerCase()}`
+      );
+    });
+    if (!foundItem) return rxjs.of(null);
+    const resourceHandler = new ResourceHandler(foundItem, settings);
+    return rxjs.from(resourceHandler.getResource()).pipe(
+      rxjs.mergeMap(
+        (resource) => resource instanceof Response ? rxjs.from(resource.blob()) : rxjs.of(void 0)
+      ),
+      rxjs.mergeMap((blob) => {
+        var _a2;
+        if (!blob) {
+          return rxjs.of(null);
+        }
+        const blobUrl = ((_a2 = _document == null ? void 0 : _document.defaultView) == null ? void 0 : _a2.URL.createObjectURL(blob)) ?? ``;
+        if (element.hasAttribute("src")) {
+          element.setAttribute("src", blobUrl);
+        } else if (element.hasAttribute("href")) {
+          element.setAttribute("href", blobUrl);
+          if ((_document == null ? void 0 : _document.defaultView) && element instanceof _document.defaultView.HTMLLinkElement) {
+            return new rxjs.Observable((observer) => {
+              element.onload = async () => {
+                try {
+                  if (element.sheet) {
+                    await loadFontFaces(
+                      _document,
+                      element,
+                      spineItemUriParentPath,
+                      context,
+                      settings
+                    );
+                  }
+                  observer.next();
+                  observer.complete();
+                } catch (error) {
+                  observer.error(error);
+                }
+              };
+              element.onerror = observer.error;
+            });
+          }
+        }
+        return rxjs.of(null);
+      })
+    );
+  };
+  const loadAssets = ({
+    settings,
+    item,
+    context
+  }) => (stream) => stream.pipe(
+    rxjs.switchMap((frameElement) => {
+      const elementsWithAsset = getElementsWithAssets(
+        frameElement.contentDocument
+      );
+      const spineItemUriParentPath = shared.getParentPath(item.href);
+      const assetsLoad$ = elementsWithAsset.map(
+        (element) => loadElementSrc(
+          frameElement.contentDocument,
+          element,
+          spineItemUriParentPath,
+          context,
+          settings
+        )
+      );
+      return rxjs.combineLatest(assetsLoad$).pipe(rxjs.map(() => frameElement));
+    })
   );
+  const unloadAssets = (frameElement) => {
+    revokeDocumentBlobs(frameElement == null ? void 0 : frameElement.contentDocument);
+  };
   const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
     const image = new Image();
     image.src = data;
@@ -1181,6 +1364,31 @@
       })
     );
   };
+  const createFrameElement = Report.measurePerformance(
+    `SpineItemFrame createFrame`,
+    Infinity,
+    () => {
+      const frame = document.createElement(`iframe`);
+      frame.frameBorder = `no`;
+      frame.tabIndex = 0;
+      frame.setAttribute(
+        `sandbox`,
+        `
+    allow-same-origin 
+    allow-scripts 
+    allow-top-navigation-to-custom-protocols
+  `
+      );
+      frame.style.cssText = `
+    overflow: hidden;
+    background-color: transparent;
+    border: 0px none transparent;
+    padding: 0px;
+  `;
+      frame.setAttribute(`role`, `main`);
+      return frame;
+    }
+  );
   const getStyleForViewportDocument = () => {
     return `
     body {
@@ -1673,98 +1881,6 @@
       latestContentHeightWhenLoaded: newLatestContentHeightWhenLoaded
     };
   };
-  const defaultGetResource = (item) => new URL(item.href);
-  class ResourceHandler {
-    constructor(item, settings) {
-      this.item = item;
-      this.settings = settings;
-    }
-    async getResource() {
-      var _a, _b;
-      const resource = await rxjs.lastValueFrom(
-        ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? rxjs.of(void 0)
-      );
-      return resource ?? defaultGetResource(this.item);
-    }
-    async fetchResource() {
-      const resource = await this.getResource();
-      if (resource instanceof Response) return resource;
-      if (resource instanceof URL) return fetch(resource);
-      return resource;
-    }
-  }
-  const joinPath = (base, path) => {
-    const isFileProtocol = base.startsWith("file://");
-    const tempBase = isFileProtocol ? base.replace("file://", "http://") : base;
-    const result = new URL(path, tempBase).toString();
-    return isFileProtocol ? result.replace("http://", "file://") : result;
-  };
-  const getElementsWithAssets = (document2) => {
-    const RESOURCE_ELEMENTS = [
-      "img",
-      // Images
-      "video",
-      // Video files
-      "audio",
-      // Audio files
-      "source",
-      // Source elements within video/audio
-      "link",
-      // Stylesheets and other linked resources
-      "script"
-      // JavaScript files
-    ].join(",");
-    return Array.from((document2 == null ? void 0 : document2.querySelectorAll(RESOURCE_ELEMENTS)) || []);
-  };
-  const loadAssets = ({
-    settings,
-    item,
-    context
-  }) => (stream) => stream.pipe(
-    rxjs.switchMap((frameElement) => {
-      const elementsWithAsset = getElementsWithAssets(
-        frameElement.contentDocument
-      );
-      const assetsLoad$ = Array.from(elementsWithAsset).map((element) => {
-        var _a;
-        const originalSrc = element.getAttribute("src") || element.getAttribute("href");
-        if (!originalSrc) return rxjs.of(null);
-        const spineItemUriParentPath = shared.getParentPath(item.href);
-        const foundItem = (_a = context.manifest) == null ? void 0 : _a.items.find(({ href }) => {
-          return `${joinPath(spineItemUriParentPath, originalSrc).toLowerCase()}`.endsWith(
-            `${href.toLowerCase()}`
-          );
-        });
-        if (!foundItem) return rxjs.of(null);
-        const resourceHandler = new ResourceHandler(foundItem, settings);
-        return rxjs.from(resourceHandler.getResource()).pipe(
-          rxjs.mergeMap(
-            (resource) => resource instanceof Response ? rxjs.from(resource.blob()) : rxjs.of(void 0)
-          ),
-          rxjs.tap((blob) => {
-            if (blob) {
-              const blobUrl = URL.createObjectURL(blob);
-              if (element.hasAttribute("src")) {
-                element.setAttribute("src", blobUrl);
-              } else if (element.hasAttribute("href")) {
-                element.setAttribute("href", blobUrl);
-              }
-            }
-          })
-        );
-      });
-      return rxjs.combineLatest(assetsLoad$).pipe(rxjs.map(() => frameElement));
-    })
-  );
-  const unloadMedias = (frameElement) => {
-    const elementsWithAsset = getElementsWithAssets(frameElement == null ? void 0 : frameElement.contentDocument);
-    elementsWithAsset.forEach((element) => {
-      const url = element.getAttribute("src") || element.getAttribute("href");
-      if (url == null ? void 0 : url.startsWith("blob:")) {
-        URL.revokeObjectURL(url);
-      }
-    });
-  };
   class HtmlRenderer extends DocumentRenderer {
     constructor() {
       super(...arguments);
@@ -1801,7 +1917,7 @@
       );
     }
     onUnload() {
-      unloadMedias(this.getFrameElement());
+      unloadAssets(this.getFrameElement());
       this.detach();
       return rxjs.EMPTY;
     }
@@ -2513,7 +2629,8 @@
       destroy
     };
   };
-  const getSpineItemPositionForRightPage = ({
+  const report$4 = Report.namespace(`navigation`);
+  const getSpineItemPositionForLeftPage = ({
     position,
     spineItem,
     pageHeight,
@@ -2521,13 +2638,13 @@
     spineItemLocator
   }) => {
     let nextPotentialPosition = {
-      x: position.x + pageWidth,
+      x: position.x - pageWidth,
       y: position.y
     };
     if (spineItem.isUsingVerticalWriting()) {
       nextPotentialPosition = {
         x: position.x,
-        y: position.y - pageHeight
+        y: position.y + pageHeight
       };
     }
     const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(
@@ -2536,7 +2653,7 @@
     );
     return navigationPosition;
   };
-  const getNavigationForRightSinglePage = ({
+  const getNavigationForLeftSinglePage = ({
     position,
     navigationResolver,
     computedPageTurnDirection,
@@ -2554,7 +2671,7 @@
       position,
       spineItem
     );
-    const spineItemNavigationForRightPage = getSpineItemPositionForRightPage({
+    const spineItemNavigation = getSpineItemPositionForLeftPage({
       position: spineItemPosition,
       spineItem,
       pageHeight: context.getPageSize().height,
@@ -2562,21 +2679,21 @@
       spineItemLocator: spineLocator.spineItemLocator
     });
     const isNewNavigationInCurrentItem = navigationResolver.arePositionsDifferent(
-      spineItemNavigationForRightPage,
+      spineItemNavigation,
       spineItemPosition
     );
     if (!isNewNavigationInCurrentItem) {
       return navigationResolver.getAdjustedPositionWithSafeEdge(
-        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 }
       );
     }
     const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition({
-      spineItemPosition: spineItemNavigationForRightPage,
+      spineItemPosition: spineItemNavigation,
       spineItem
     });
     return readingOrderPosition;
   };
-  const getNavigationForRightOrBottomPage = ({
+  const getNavigationForLeftOrTopPage = ({
     position,
     spineItem,
     context,
@@ -2585,7 +2702,7 @@
     spineLocator,
     computedPageTurnDirection
   }) => {
-    const navigation = getNavigationForRightSinglePage({
+    const navigation = getNavigationForLeftSinglePage({
       position,
       context,
       navigationResolver,
@@ -2600,12 +2717,9 @@
       if ((spineItem == null ? void 0 : spineItem.isUsingVerticalWriting()) && position.x !== navigation.x) {
         return navigationResolver.getAdjustedPositionForSpread(
           navigationResolver.getAdjustedPositionWithSafeEdge(
-            context.isRTL() ? {
+            context.isRTL() ? { ...navigation, x: navigation.x + context.getPageSize().width } : {
               ...navigation,
               x: navigation.x - context.getPageSize().width
-            } : {
-              ...navigation,
-              x: navigation.x + context.getPageSize().width
             }
           )
         );
@@ -2613,7 +2727,7 @@
       if (computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
         return navigationResolver.getAdjustedPositionForSpread(navigation);
       }
-      const doubleNavigation = getNavigationForRightSinglePage({
+      const doubleNavigation = getNavigationForLeftSinglePage({
         position: navigation,
         context,
         navigationResolver,
@@ -2625,7 +2739,7 @@
     }
     return navigationResolver.getAdjustedPositionForSpread(navigation);
   };
-  const getSpineItemPositionForLeftPage = ({
+  const getSpineItemPositionForRightPage = ({
     position,
     spineItem,
     pageHeight,
@@ -2633,13 +2747,13 @@
     spineItemLocator
   }) => {
     let nextPotentialPosition = {
-      x: position.x - pageWidth,
+      x: position.x + pageWidth,
       y: position.y
     };
     if (spineItem.isUsingVerticalWriting()) {
       nextPotentialPosition = {
         x: position.x,
-        y: position.y + pageHeight
+        y: position.y - pageHeight
       };
     }
     const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(
@@ -2648,7 +2762,7 @@
     );
     return navigationPosition;
   };
-  const getNavigationForLeftSinglePage = ({
+  const getNavigationForRightSinglePage = ({
     position,
     navigationResolver,
     computedPageTurnDirection,
@@ -2666,7 +2780,7 @@
       position,
       spineItem
     );
-    const spineItemNavigation = getSpineItemPositionForLeftPage({
+    const spineItemNavigationForRightPage = getSpineItemPositionForRightPage({
       position: spineItemPosition,
       spineItem,
       pageHeight: context.getPageSize().height,
@@ -2674,21 +2788,21 @@
       spineItemLocator: spineLocator.spineItemLocator
     });
     const isNewNavigationInCurrentItem = navigationResolver.arePositionsDifferent(
-      spineItemNavigation,
+      spineItemNavigationForRightPage,
       spineItemPosition
     );
     if (!isNewNavigationInCurrentItem) {
       return navigationResolver.getAdjustedPositionWithSafeEdge(
-        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 }
       );
     }
     const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition({
-      spineItemPosition: spineItemNavigation,
+      spineItemPosition: spineItemNavigationForRightPage,
       spineItem
     });
     return readingOrderPosition;
   };
-  const getNavigationForLeftOrTopPage = ({
+  const getNavigationForRightOrBottomPage = ({
     position,
     spineItem,
     context,
@@ -2697,7 +2811,7 @@
     spineLocator,
     computedPageTurnDirection
   }) => {
-    const navigation = getNavigationForLeftSinglePage({
+    const navigation = getNavigationForRightSinglePage({
       position,
       context,
       navigationResolver,
@@ -2712,9 +2826,12 @@
       if ((spineItem == null ? void 0 : spineItem.isUsingVerticalWriting()) && position.x !== navigation.x) {
         return navigationResolver.getAdjustedPositionForSpread(
           navigationResolver.getAdjustedPositionWithSafeEdge(
-            context.isRTL() ? { ...navigation, x: navigation.x + context.getPageSize().width } : {
+            context.isRTL() ? {
               ...navigation,
               x: navigation.x - context.getPageSize().width
+            } : {
+              ...navigation,
+              x: navigation.x + context.getPageSize().width
             }
           )
         );
@@ -2722,7 +2839,7 @@
       if (computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
         return navigationResolver.getAdjustedPositionForSpread(navigation);
       }
-      const doubleNavigation = getNavigationForLeftSinglePage({
+      const doubleNavigation = getNavigationForRightSinglePage({
         position: navigation,
         context,
         navigationResolver,
@@ -2734,7 +2851,6 @@
     }
     return navigationResolver.getAdjustedPositionForSpread(navigation);
   };
-  const report$4 = Report.namespace(`navigation`);
   class ManualNavigator {
     constructor(reader) {
       this.reader = reader;
@@ -2827,7 +2943,8 @@
     }
     goToUrl(url) {
       this.reader.navigation.navigate({
-        url
+        url,
+        animation: false
       });
     }
     goToRightSpineItem() {
@@ -5144,20 +5261,6 @@
       spineItem
     };
   };
-  const isUsingSpreadMode = ({
-    manifest,
-    visibleAreaRect,
-    forceSinglePageMode
-  }) => {
-    const { height, width } = visibleAreaRect;
-    const isLandscape = width > height;
-    if (forceSinglePageMode) return false;
-    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) return false;
-    if (!isLandscape && (manifest == null ? void 0 : manifest.renditionSpread) === `portrait`) {
-      return true;
-    }
-    return isLandscape && ((manifest == null ? void 0 : manifest.renditionSpread) === void 0 || (manifest == null ? void 0 : manifest.renditionSpread) === `auto` || (manifest == null ? void 0 : manifest.renditionSpread) === `landscape` || (manifest == null ? void 0 : manifest.renditionSpread) === `both`);
-  };
   const isFullyPrePaginated = (manifest) => (manifest == null ? void 0 : manifest.renditionLayout) === "pre-paginated" || (manifest == null ? void 0 : manifest.spineItems.every((item) => item.renditionLayout === "pre-paginated"));
   class BridgeEvent {
     constructor() {
@@ -5180,12 +5283,27 @@
       this.navigation$ = this.navigationSubject.asObservable();
     }
   }
+  const isUsingSpreadMode = ({
+    manifest,
+    visibleAreaRect,
+    forceSinglePageMode
+  }) => {
+    const { height, width } = visibleAreaRect;
+    const isLandscape = width > height;
+    if (forceSinglePageMode) return false;
+    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) return false;
+    if (!isLandscape && (manifest == null ? void 0 : manifest.renditionSpread) === `portrait`) {
+      return true;
+    }
+    return isLandscape && ((manifest == null ? void 0 : manifest.renditionSpread) === void 0 || (manifest == null ? void 0 : manifest.renditionSpread) === `auto` || (manifest == null ? void 0 : manifest.renditionSpread) === `landscape` || (manifest == null ? void 0 : manifest.renditionSpread) === `both`);
+  };
   class Context {
     constructor() {
       this._stateSubject = new rxjs.BehaviorSubject({
         marginBottom: 0,
         marginTop: 0,
         calculatedInnerMargin: 0,
+        assumedRenditionLayout: "reflowable",
         visibleAreaRect: {
           width: 0,
           height: 0,
@@ -5243,7 +5361,8 @@
           height: newState.visibleAreaRect.height - marginTop - marginBottom
         },
         ...newState.manifest && {
-          isFullyPrePaginated: isFullyPrePaginated(manifest)
+          isFullyPrePaginated: isFullyPrePaginated(manifest),
+          assumedRenditionLayout: (manifest == null ? void 0 : manifest.renditionLayout) ?? "reflowable"
         },
         isUsingSpreadMode: isUsingSpreadMode({
           manifest,
@@ -6285,196 +6404,51 @@
       this.navigationSubject.next(to);
     }
   }
-  const isRootCfi = (cfi) => {
-    return cfi == null ? void 0 : cfi.startsWith(`epubcfi(/0`);
-  };
-  const restoreNavigationForControlledPageTurnMode = ({
-    spineLocator,
-    navigation,
-    navigationResolver,
-    spineItemsManager,
-    spineLayout
-  }) => {
-    var _a, _b;
-    const spineItem = spineItemsManager.get(navigation.spineItem);
-    if (!spineItem) {
-      return { x: 0, y: 0 };
-    }
-    const spineItemAbsolutePosition = spineLayout.getAbsolutePositionOf(spineItem);
-    const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
-      navigation.position,
-      spineItem
-    );
-    const spineItemWidthDifference = spineItemAbsolutePosition.width - (navigation.spineItemWidth ?? 0);
-    const spineItemHeighDifference = spineItemAbsolutePosition.height - (navigation.spineItemHeight ?? 0);
-    const hasSpineItemGrewOrShrink = spineItemWidthDifference !== 0 || spineItemHeighDifference !== 0;
-    if (navigation.url !== void 0) {
-      if (spineItemWidthDifference || spineItemHeighDifference) {
-        const urlResult = navigationResolver.getNavigationForUrl(navigation.url);
-        if (urlResult) {
-          return urlResult.position;
-        }
-      }
-    }
-    const cfi = navigation.cfi ?? navigation.paginationBeginCfi;
-    if (cfi !== void 0 && !isRootCfi(cfi)) {
-      if (spineItemWidthDifference || spineItemHeighDifference) {
-        const cfiResultPosition = navigationResolver.getNavigationForCfi(cfi);
-        if (cfiResultPosition) {
-          return cfiResultPosition;
-        }
-      }
-    }
-    if (isPositionWithinSpineItem && hasSpineItemGrewOrShrink && navigation.directionFromLastNavigation === "backward") {
-      const positionInSpineItemWithDifference = {
-        x: (((_a = navigation.positionInSpineItem) == null ? void 0 : _a.x) ?? 0) + spineItemWidthDifference,
-        y: (((_b = navigation.positionInSpineItem) == null ? void 0 : _b.y) ?? 0) + spineItemHeighDifference
-      };
-      return navigationResolver.getNavigationFromSpineItemPosition({
-        spineItem,
-        spineItemPosition: positionInSpineItemWithDifference
-      });
-    }
-    if (navigation.positionInSpineItem && navigation.spineItemHeight && navigation.spineItemWidth) {
-      const pageIndex = spineLocator.spineItemLocator.getSpineItemPageIndexFromPosition({
-        itemWidth: navigation.spineItemWidth,
-        itemHeight: navigation.spineItemHeight,
-        isUsingVerticalWriting: !!navigation.spineItemIsUsingVerticalWriting,
-        position: navigation.positionInSpineItem
-      });
-      return navigationResolver.getNavigationForSpineItemPage({
-        pageIndex,
-        spineItemId: spineItem
-      });
-    }
-    if (isPositionWithinSpineItem) {
-      return navigationResolver.getNavigationForPosition(navigation.position);
-    }
-    return navigationResolver.getNavigationForSpineIndexOrId(spineItem);
-  };
-  const restoreNavigationForScrollingPageTurnMode = ({
-    navigation,
-    spineLocator,
-    spineItemsManager,
-    settings,
-    navigationResolver,
-    spineLayout
-  }) => {
-    const { spineItem } = navigation;
-    const foundSpineItem = spineItemsManager.get(spineItem);
-    if (!foundSpineItem) return { x: 0, y: 0 };
-    const { height, top } = spineLayout.getAbsolutePositionOf(foundSpineItem);
-    const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
-      navigation.position,
-      foundSpineItem
-    );
-    const positionInSpineItem = navigation.positionInSpineItem ?? {
-      y: 0
-    };
-    if (settings.values.computedPageTurnDirection === "vertical") {
-      if (top === navigation.spineItemTop && height === navigation.spineItemHeight && isPositionWithinSpineItem) {
-        return navigation.position;
-      }
-      if (top === navigation.spineItemTop && height === navigation.spineItemHeight && !isPositionWithinSpineItem) {
-        return navigationResolver.getNavigationForSpineIndexOrId(foundSpineItem);
-      }
-      if (top !== navigation.spineItemTop) {
-        const positionInSpineItem2 = spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
-          navigation.positionInSpineItem ?? {
-            x: 0,
-            y: 0
+  const withPaginationInfo = () => (stream) => {
+    return stream.pipe(
+      rxjs.map(({ navigation, pagination, ...rest }) => {
+        return {
+          navigation: {
+            ...navigation,
+            paginationBeginCfi: pagination.beginCfi
           },
-          foundSpineItem
-        );
-        return spineLocator.getSpinePositionFromSpineItemPosition({
-          spineItemPosition: positionInSpineItem2,
-          spineItem: foundSpineItem
-        });
-      }
-      if (top === navigation.spineItemTop && height !== navigation.spineItemHeight) {
-        const positionYfromBottomPreviousNavigation = (navigation.spineItemHeight ?? positionInSpineItem.y) - positionInSpineItem.y;
-        const positionInspineItem = {
-          y: navigation.directionFromLastNavigation === "backward" ? height - positionYfromBottomPreviousNavigation : positionInSpineItem.y,
-          x: navigation.position.x
+          ...rest
         };
-        if (isPositionWithinSpineItem) {
-          const positionInSpineItem2 = spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
-            positionInspineItem,
-            foundSpineItem
-          );
-          return spineLocator.getSpinePositionFromSpineItemPosition({
-            spineItemPosition: positionInSpineItem2,
-            spineItem: foundSpineItem
-          });
-        }
-        if (!isPositionWithinSpineItem) {
-          const positionIsBeforeItem = navigation.position.y < top;
-          if (!positionIsBeforeItem) {
-            const positionInItem = {
-              y: height - positionYfromBottomPreviousNavigation,
-              x: navigation.position.x
-            };
-            return spineLocator.getSpinePositionFromSpineItemPosition({
-              spineItemPosition: spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
-                positionInItem,
-                foundSpineItem
-              ),
-              spineItem: foundSpineItem
-            });
-          }
-          return navigationResolver.getNavigationForSpineIndexOrId(foundSpineItem);
-        }
-      }
-    }
-    return navigation.position;
-  };
-  const restorePosition = ({
-    navigation,
-    spineItemsManager,
-    settings,
-    spineLocator,
-    navigationResolver,
-    spineLayout
-  }) => {
-    if (settings.values.computedPageTurnMode === "scrollable") {
-      return restoreNavigationForScrollingPageTurnMode({
-        navigation,
-        spineLocator,
-        navigationResolver,
-        settings,
-        spineItemsManager,
-        spineLayout
-      });
-    }
-    return restoreNavigationForControlledPageTurnMode({
-      navigation,
-      spineLocator,
-      navigationResolver,
-      spineItemsManager,
-      spineLayout
-    });
+      })
+    );
   };
-  const withRestoredPosition = ({
-    settings,
-    navigationResolver,
-    context,
-    spine
-  }) => (stream) => stream.pipe(
-    rxjs.map((params) => ({
-      ...params,
-      navigation: {
-        ...params.navigation,
-        position: restorePosition({
-          spineLocator: spine.locator,
-          navigation: params.navigation,
-          navigationResolver,
-          settings,
-          spineItemsManager: spine.spineItemsManager,
-          spineItemLocator: spine.locator.spineItemLocator,
-          spineLayout: spine.spineLayout
-        })
-      }
-    }))
+  const consolidateWithPagination = (context, navigation$, spine) => context.bridgeEvent.pagination$.pipe(
+    rxjs.withLatestFrom(navigation$),
+    rxjs.filter(
+      ([pagination, navigation]) => pagination.navigationId === navigation.id
+    ),
+    /**
+     * We only register the pagination cfi IF the spine item is ready.
+     * Otherwise we might save something incomplete and thus restore
+     * the user to an invalid location.
+     */
+    rxjs.switchMap(([pagination, navigation]) => {
+      const spineItem = spine.spineItemsManager.get(navigation.spineItem);
+      return ((spineItem == null ? void 0 : spineItem.isReady$.pipe(rxjs.first())) ?? rxjs.of(false)).pipe(
+        rxjs.filter((isReady) => isReady),
+        rxjs.map(() => ({
+          pagination,
+          navigation
+        }))
+      );
+    }),
+    withPaginationInfo(),
+    rxjs.distinctUntilChanged(
+      (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
+    ),
+    rxjs.map(
+      ({ navigation }) => ({
+        ...navigation,
+        meta: {
+          triggeredBy: "pagination"
+        }
+      })
+    )
   );
   const mapUserNavigationToInternal = (stream) => {
     return stream.pipe(
@@ -6495,6 +6469,27 @@
       })
     );
   };
+  const withCfiPosition = ({ navigationResolver }) => (stream) => {
+    return stream.pipe(
+      rxjs.map((params) => {
+        if (params.navigation.cfi) {
+          const position = navigationResolver.getNavigationForCfi(
+            params.navigation.cfi
+          );
+          if (position) {
+            return {
+              ...params,
+              navigation: {
+                ...params.navigation,
+                position
+              }
+            };
+          }
+        }
+        return params;
+      })
+    );
+  };
   const getOrGuessDirection = ({
     navigation,
     previousNavigation,
@@ -6554,60 +6549,7 @@
       })
     );
   };
-  const withSpineItemPosition = ({
-    settings,
-    spineItemsManager,
-    spineLocator,
-    navigationResolver
-  }) => (stream) => {
-    const getPosition = (navigation) => {
-      const { navigationSnapThreshold, computedPageTurnMode } = settings.values;
-      const spineItem = spineItemsManager.get(navigation.spineItem);
-      if (!spineItem || !navigation.position) return void 0;
-      if (computedPageTurnMode === "controlled") {
-        const { endPageIndex, beginPageIndex } = spineLocator.getVisiblePagesFromViewportPosition({
-          position: navigation.position,
-          spineItem,
-          threshold: navigationSnapThreshold,
-          restrictToScreen: false
-        }) ?? {};
-        const farthestPageIndex = (navigation.directionFromLastNavigation === "forward" || navigation.directionFromLastNavigation === "anchor" ? endPageIndex : beginPageIndex) ?? 0;
-        const navigableSpinePositionForFarthestPageIndex = navigationResolver.getNavigationForSpineItemPage({
-          pageIndex: farthestPageIndex,
-          spineItemId: spineItem
-        });
-        const visiblePagesAtNavigablePosition = spineLocator.getVisiblePagesFromViewportPosition({
-          position: navigableSpinePositionForFarthestPageIndex,
-          spineItem,
-          threshold: 0,
-          restrictToScreen: true
-        });
-        const beginPageIndexForDirection = (navigation.directionFromLastNavigation === "forward" || navigation.directionFromLastNavigation === "anchor" ? visiblePagesAtNavigablePosition == null ? void 0 : visiblePagesAtNavigablePosition.beginPageIndex : visiblePagesAtNavigablePosition == null ? void 0 : visiblePagesAtNavigablePosition.endPageIndex) ?? 0;
-        const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
-          pageIndex: beginPageIndexForDirection,
-          isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-          itemLayout: spineItem.getElementDimensions()
-        });
-        return positionInSpineItem;
-      }
-      return spineLocator.getSpineItemPositionFromSpinePosition(
-        navigation.position,
-        spineItem
-      );
-    };
-    return stream.pipe(
-      rxjs.map(({ navigation, ...rest }) => {
-        return {
-          navigation: {
-            ...navigation,
-            positionInSpineItem: getPosition(navigation)
-          },
-          ...rest
-        };
-      })
-    );
-  };
-  const withFallbackPosition = ({
+  const withFallbackPosition = ({
     spineItemsManager,
     navigationResolver
   }) => (stream) => {
@@ -6643,70 +6585,6 @@
       })
     );
   };
-  const withSpineItemLayoutInfo = ({ spine }) => (stream) => {
-    return stream.pipe(
-      rxjs.map(({ navigation, ...rest }) => {
-        const spineItemDimensions = spine.spineLayout.getAbsolutePositionOf(
-          navigation.spineItem
-        );
-        const spineItem = spine.spineItemsManager.get(navigation.spineItem);
-        return {
-          navigation: {
-            ...navigation,
-            spineItemHeight: spineItemDimensions == null ? void 0 : spineItemDimensions.height,
-            spineItemWidth: spineItemDimensions == null ? void 0 : spineItemDimensions.width,
-            spineItemLeft: spineItemDimensions.left,
-            spineItemTop: spineItemDimensions.top,
-            spineItemIsUsingVerticalWriting: spineItem == null ? void 0 : spineItem.isUsingVerticalWriting()
-          },
-          ...rest
-        };
-      })
-    );
-  };
-  const withUrlInfo = ({ navigationResolver }) => (stream) => {
-    return stream.pipe(
-      rxjs.map((params) => {
-        if (params.navigation.url) {
-          const result = navigationResolver.getNavigationForUrl(
-            params.navigation.url
-          );
-          if (result) {
-            return {
-              ...params,
-              navigation: {
-                ...params.navigation,
-                position: result.position,
-                spineItem: result.spineItemId
-              }
-            };
-          }
-        }
-        return params;
-      })
-    );
-  };
-  const withCfiPosition = ({ navigationResolver }) => (stream) => {
-    return stream.pipe(
-      rxjs.map((params) => {
-        if (params.navigation.cfi) {
-          const position = navigationResolver.getNavigationForCfi(
-            params.navigation.cfi
-          );
-          if (position) {
-            return {
-              ...params,
-              navigation: {
-                ...params.navigation,
-                position
-              }
-            };
-          }
-        }
-        return params;
-      })
-    );
-  };
   const withSpineItem = ({
     settings,
     spineItemsManager,
@@ -6781,51 +6659,315 @@
       })
     );
   };
-  const withPaginationInfo = () => (stream) => {
+  const withSpineItemLayoutInfo = ({ spine }) => (stream) => {
     return stream.pipe(
-      rxjs.map(({ navigation, pagination, ...rest }) => {
+      rxjs.switchMap(({ navigation, ...rest }) => {
+        const spineItemDimensions = spine.spineLayout.getAbsolutePositionOf(
+          navigation.spineItem
+        );
+        const spineItem = spine.spineItemsManager.get(navigation.spineItem);
+        return ((spineItem == null ? void 0 : spineItem.isReady$) ?? rxjs.of(false)).pipe(
+          rxjs.first(),
+          rxjs.map(
+            (isReady) => ({
+              navigation: {
+                ...navigation,
+                spineItemHeight: spineItemDimensions == null ? void 0 : spineItemDimensions.height,
+                spineItemWidth: spineItemDimensions == null ? void 0 : spineItemDimensions.width,
+                spineItemLeft: spineItemDimensions.left,
+                spineItemTop: spineItemDimensions.top,
+                spineItemIsUsingVerticalWriting: spineItem == null ? void 0 : spineItem.isUsingVerticalWriting(),
+                spineItemIsReady: isReady
+              },
+              ...rest
+            })
+          )
+        );
+      })
+    );
+  };
+  const withSpineItemPosition = ({
+    settings,
+    spineItemsManager,
+    spineLocator,
+    navigationResolver
+  }) => (stream) => {
+    const getPosition = (navigation) => {
+      const { navigationSnapThreshold, computedPageTurnMode } = settings.values;
+      const spineItem = spineItemsManager.get(navigation.spineItem);
+      if (!spineItem || !navigation.position) return void 0;
+      if (computedPageTurnMode === "controlled") {
+        const { endPageIndex, beginPageIndex } = spineLocator.getVisiblePagesFromViewportPosition({
+          position: navigation.position,
+          spineItem,
+          threshold: navigationSnapThreshold,
+          restrictToScreen: false
+        }) ?? {};
+        const farthestPageIndex = (navigation.directionFromLastNavigation === "forward" || navigation.directionFromLastNavigation === "anchor" ? endPageIndex : beginPageIndex) ?? 0;
+        const navigableSpinePositionForFarthestPageIndex = navigationResolver.getNavigationForSpineItemPage({
+          pageIndex: farthestPageIndex,
+          spineItemId: spineItem
+        });
+        const visiblePagesAtNavigablePosition = spineLocator.getVisiblePagesFromViewportPosition({
+          position: navigableSpinePositionForFarthestPageIndex,
+          spineItem,
+          threshold: 0,
+          restrictToScreen: true
+        });
+        const beginPageIndexForDirection = (navigation.directionFromLastNavigation === "forward" || navigation.directionFromLastNavigation === "anchor" ? visiblePagesAtNavigablePosition == null ? void 0 : visiblePagesAtNavigablePosition.beginPageIndex : visiblePagesAtNavigablePosition == null ? void 0 : visiblePagesAtNavigablePosition.endPageIndex) ?? 0;
+        const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
+          pageIndex: beginPageIndexForDirection,
+          isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
+          itemLayout: spineItem.getElementDimensions()
+        });
+        return positionInSpineItem;
+      }
+      return spineLocator.getSpineItemPositionFromSpinePosition(
+        navigation.position,
+        spineItem
+      );
+    };
+    return stream.pipe(
+      rxjs.map(({ navigation, ...rest }) => {
         return {
           navigation: {
             ...navigation,
-            paginationBeginCfi: pagination.beginCfi
+            positionInSpineItem: getPosition(navigation)
           },
           ...rest
         };
       })
     );
   };
-  const consolidateWithPagination = (context, navigation$, spine) => context.bridgeEvent.pagination$.pipe(
-    rxjs.withLatestFrom(navigation$),
-    rxjs.filter(
-      ([pagination, navigation]) => pagination.navigationId === navigation.id
-    ),
-    /**
-     * We only register the pagination cfi IF the spine item is ready.
-     * Otherwise we might save something incomplete and thus restore
-     * the user to an invalid location.
-     */
-    rxjs.switchMap(([pagination, navigation]) => {
-      const spineItem = spine.spineItemsManager.get(navigation.spineItem);
-      return ((spineItem == null ? void 0 : spineItem.isReady$.pipe(rxjs.first())) ?? rxjs.of(false)).pipe(
-        rxjs.filter((isReady) => isReady),
-        rxjs.map(() => ({
-          pagination,
-          navigation
-        }))
-      );
-    }),
-    withPaginationInfo(),
-    rxjs.distinctUntilChanged(
-      (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
-    ),
-    rxjs.map(
-      ({ navigation }) => ({
-        ...navigation,
-        meta: {
-          triggeredBy: "pagination"
+  const withUrlInfo = ({ navigationResolver }) => (stream) => {
+    return stream.pipe(
+      rxjs.map((params) => {
+        if (params.navigation.url) {
+          const result = navigationResolver.getNavigationForUrl(
+            params.navigation.url
+          );
+          if (result) {
+            return {
+              ...params,
+              navigation: {
+                ...params.navigation,
+                position: result.position,
+                spineItem: result.spineItemId
+              }
+            };
+          }
         }
+        return params;
       })
-    )
+    );
+  };
+  const isRootCfi = (cfi) => {
+    return cfi == null ? void 0 : cfi.startsWith(`epubcfi(/0`);
+  };
+  const restoreNavigationForControlledPageTurnMode = ({
+    spineLocator,
+    navigation,
+    navigationResolver,
+    spineItemsManager,
+    spineLayout
+  }) => {
+    const spineItem = spineItemsManager.get(navigation.spineItem);
+    if (!spineItem) {
+      return rxjs.of({ x: 0, y: 0 });
+    }
+    return spineItem.isReady$.pipe(
+      rxjs.first(),
+      rxjs.map((isReady) => {
+        var _a, _b;
+        const spineItemAbsolutePosition = spineLayout.getAbsolutePositionOf(spineItem);
+        const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
+          navigation.position,
+          spineItem
+        );
+        const spineItemWidthDifference = spineItemAbsolutePosition.width - (navigation.spineItemWidth ?? 0);
+        const spineItemHeighDifference = spineItemAbsolutePosition.height - (navigation.spineItemHeight ?? 0);
+        const hasSpineItemGrewOrShrink = spineItemWidthDifference !== 0 || spineItemHeighDifference !== 0;
+        if (navigation.url !== void 0) {
+          if (spineItemWidthDifference || spineItemHeighDifference || // when spine item is ready dimensions may have not changed but the position
+          // of dom elements may have!
+          isReady && !navigation.spineItemIsReady) {
+            const urlResult = navigationResolver.getNavigationForUrl(
+              navigation.url
+            );
+            if (urlResult) {
+              return urlResult.position;
+            }
+          }
+        }
+        const cfi = navigation.cfi ?? navigation.paginationBeginCfi;
+        if (cfi !== void 0 && !isRootCfi(cfi)) {
+          if (spineItemWidthDifference || spineItemHeighDifference || // when spine item is ready dimensions may have not changed but the position
+          // of dom elements may have!
+          isReady && !navigation.spineItemIsReady) {
+            const cfiResultPosition = navigationResolver.getNavigationForCfi(cfi);
+            if (cfiResultPosition) {
+              return cfiResultPosition;
+            }
+          }
+        }
+        if (isPositionWithinSpineItem && hasSpineItemGrewOrShrink && navigation.directionFromLastNavigation === "backward") {
+          const positionInSpineItemWithDifference = {
+            x: (((_a = navigation.positionInSpineItem) == null ? void 0 : _a.x) ?? 0) + spineItemWidthDifference,
+            y: (((_b = navigation.positionInSpineItem) == null ? void 0 : _b.y) ?? 0) + spineItemHeighDifference
+          };
+          return navigationResolver.getNavigationFromSpineItemPosition({
+            spineItem,
+            spineItemPosition: positionInSpineItemWithDifference
+          });
+        }
+        if (navigation.positionInSpineItem && navigation.spineItemHeight && navigation.spineItemWidth) {
+          const pageIndex = spineLocator.spineItemLocator.getSpineItemPageIndexFromPosition({
+            itemWidth: navigation.spineItemWidth,
+            itemHeight: navigation.spineItemHeight,
+            isUsingVerticalWriting: !!navigation.spineItemIsUsingVerticalWriting,
+            position: navigation.positionInSpineItem
+          });
+          return navigationResolver.getNavigationForSpineItemPage({
+            pageIndex,
+            spineItemId: spineItem
+          });
+        }
+        if (isPositionWithinSpineItem) {
+          return navigationResolver.getNavigationForPosition(navigation.position);
+        }
+        return navigationResolver.getNavigationForSpineIndexOrId(spineItem);
+      })
+    );
+  };
+  const restoreNavigationForScrollingPageTurnMode = ({
+    navigation,
+    spineLocator,
+    spineItemsManager,
+    settings,
+    navigationResolver,
+    spineLayout
+  }) => {
+    const { spineItem } = navigation;
+    const foundSpineItem = spineItemsManager.get(spineItem);
+    if (!foundSpineItem) return { x: 0, y: 0 };
+    const { height, top } = spineLayout.getAbsolutePositionOf(foundSpineItem);
+    const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
+      navigation.position,
+      foundSpineItem
+    );
+    const positionInSpineItem = navigation.positionInSpineItem ?? {
+      y: 0
+    };
+    if (settings.values.computedPageTurnDirection === "vertical") {
+      if (top === navigation.spineItemTop && height === navigation.spineItemHeight && isPositionWithinSpineItem) {
+        return navigation.position;
+      }
+      if (top === navigation.spineItemTop && height === navigation.spineItemHeight && !isPositionWithinSpineItem) {
+        return navigationResolver.getNavigationForSpineIndexOrId(foundSpineItem);
+      }
+      if (top !== navigation.spineItemTop) {
+        const positionInSpineItem2 = spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
+          navigation.positionInSpineItem ?? {
+            x: 0,
+            y: 0
+          },
+          foundSpineItem
+        );
+        return spineLocator.getSpinePositionFromSpineItemPosition({
+          spineItemPosition: positionInSpineItem2,
+          spineItem: foundSpineItem
+        });
+      }
+      if (top === navigation.spineItemTop && height !== navigation.spineItemHeight) {
+        const positionYfromBottomPreviousNavigation = (navigation.spineItemHeight ?? positionInSpineItem.y) - positionInSpineItem.y;
+        const positionInspineItem = {
+          y: navigation.directionFromLastNavigation === "backward" ? height - positionYfromBottomPreviousNavigation : positionInSpineItem.y,
+          x: navigation.position.x
+        };
+        if (isPositionWithinSpineItem) {
+          const positionInSpineItem2 = spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
+            positionInspineItem,
+            foundSpineItem
+          );
+          return spineLocator.getSpinePositionFromSpineItemPosition({
+            spineItemPosition: positionInSpineItem2,
+            spineItem: foundSpineItem
+          });
+        }
+        if (!isPositionWithinSpineItem) {
+          const positionIsBeforeItem = navigation.position.y < top;
+          if (!positionIsBeforeItem) {
+            const positionInItem = {
+              y: height - positionYfromBottomPreviousNavigation,
+              x: navigation.position.x
+            };
+            return spineLocator.getSpinePositionFromSpineItemPosition({
+              spineItemPosition: spineLocator.getSafeSpineItemPositionFromUnsafeSpineItemPosition(
+                positionInItem,
+                foundSpineItem
+              ),
+              spineItem: foundSpineItem
+            });
+          }
+          return navigationResolver.getNavigationForSpineIndexOrId(foundSpineItem);
+        }
+      }
+    }
+    return navigation.position;
+  };
+  const restorePosition = ({
+    navigation,
+    spineItemsManager,
+    settings,
+    spineLocator,
+    navigationResolver,
+    spineLayout
+  }) => {
+    if (settings.values.computedPageTurnMode === "scrollable") {
+      return rxjs.of(
+        restoreNavigationForScrollingPageTurnMode({
+          navigation,
+          spineLocator,
+          navigationResolver,
+          settings,
+          spineItemsManager,
+          spineLayout
+        })
+      );
+    }
+    return restoreNavigationForControlledPageTurnMode({
+      navigation,
+      spineLocator,
+      navigationResolver,
+      spineItemsManager,
+      spineLayout
+    });
+  };
+  const withRestoredPosition = ({
+    settings,
+    navigationResolver,
+    context,
+    spine
+  }) => (stream) => stream.pipe(
+    rxjs.switchMap((params) => {
+      return restorePosition({
+        spineLocator: spine.locator,
+        navigation: params.navigation,
+        navigationResolver,
+        settings,
+        spineItemsManager: spine.spineItemsManager,
+        spineItemLocator: spine.locator.spineItemLocator,
+        spineLayout: spine.spineLayout
+      }).pipe(
+        rxjs.map((restoredPosition) => ({
+          ...params,
+          navigation: {
+            ...params.navigation,
+            position: restoredPosition
+          }
+        }))
+      );
+    })
   );
   const NAMESPACE$2 = `navigation/InternalNavigator`;
   const report$1 = Report.namespace(NAMESPACE$2);
@@ -6846,6 +6988,7 @@
         meta: {
           triggeredBy: "user"
         },
+        spineItemIsReady: false,
         type: "api",
         id: Symbol()
       });
@@ -6861,10 +7004,6 @@
         rxjs.shareReplay(1)
       );
       this.locker = new Locker();
-      const layoutHasChanged$ = rxjs.merge(
-        viewportController.layout$,
-        spine.spineLayout.layout$.pipe(rxjs.filter(({ hasChanged }) => hasChanged))
-      );
       const navigationFromUser$ = userNavigation$.pipe(
         rxjs.withLatestFrom(this.navigationSubject),
         mapUserNavigationToInternal,
@@ -6946,7 +7085,10 @@
         }),
         rxjs.share()
       );
-      const navigationUpateFromLayout$ = layoutHasChanged$.pipe(
+      const navigationUpateFromLayout$ = rxjs.merge(
+        viewportController.layout$,
+        spine.spineLayout.layout$
+      ).pipe(
         rxjs.switchMap(() => {
           return rxjs.of(null).pipe(
             rxjs.switchMap(