@prose-reader/core 1.176.0 → 1.178.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { switchMap, of, fromEvent, take, map, from, takeUntil, Observable, defer, Subject, combineLatest, merge, EMPTY, withLatestFrom, BehaviorSubject, filter, share, first as first$1, mergeMap, endWith, tap as tap$1, finalize, catchError, lastValueFrom, NEVER, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, throttleTime, debounceTime as debounceTime$1, startWith as startWith$1, switchScan, forkJoin, shareReplay as shareReplay$1, delay, ReplaySubject, identity, timer, skip as skip$1, exhaustMap, reduce, concatMap } from "rxjs";
 import { switchMap as switchMap$1, first, map as map$1, startWith, shareReplay, distinctUntilChanged, tap, pairwise, take as take$1, takeUntil as takeUntil$1, filter as filter$1, debounceTime, skip, mergeMap as mergeMap$1, catchError as catchError$1, withLatestFrom as withLatestFrom$1, share as share$1 } from "rxjs/operators";
-import { shallowMergeIfDefined, isShallowEqual, parseContentType, detectMimeTypeFromName, getParentPath, arrayEqual } from "@prose-reader/shared";
+import { shallowMergeIfDefined, isShallowEqual, getParentPath, parseContentType, detectMimeTypeFromName, arrayEqual } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const getAttributeValueFromString = (string, key) => {
   const regExp = new RegExp(`${key}\\s*=\\s*([0-9.]+)`, `i`);
@@ -413,6 +413,51 @@ const isTouchEvent = (event) => {
   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 @@ class DocumentRenderer extends DestroyableClass {
     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 lastValueFrom(
+      ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? 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 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 of(null);
+  const resourceHandler = new ResourceHandler(foundItem, settings);
+  return from(resourceHandler.getResource()).pipe(
+    mergeMap(
+      (resource) => resource instanceof Response ? from(resource.blob()) : of(void 0)
+    ),
+    mergeMap((blob) => {
+      var _a2;
+      if (!blob) {
+        return 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 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 of(null);
+    })
+  );
+};
+const loadAssets = ({
+  settings,
+  item,
+  context
+}) => (stream) => stream.pipe(
+  switchMap((frameElement) => {
+    const elementsWithAsset = getElementsWithAssets(
+      frameElement.contentDocument
+    );
+    const spineItemUriParentPath = getParentPath(item.href);
+    const assetsLoad$ = elementsWithAsset.map(
+      (element) => loadElementSrc(
+        frameElement.contentDocument,
+        element,
+        spineItemUriParentPath,
+        context,
+        settings
+      )
+    );
+    return combineLatest(assetsLoad$).pipe(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 attachFrameSrc = ({
     })
   );
 };
+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 @@ const renderReflowable = ({
     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 lastValueFrom(
-      ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? 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(
-  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 of(null);
-      const spineItemUriParentPath = 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 of(null);
-      const resourceHandler = new ResourceHandler(foundItem, settings);
-      return from(resourceHandler.getResource()).pipe(
-        mergeMap(
-          (resource) => resource instanceof Response ? from(resource.blob()) : of(void 0)
-        ),
-        tap$1((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 combineLatest(assetsLoad$).pipe(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 @@ class HtmlRenderer extends DocumentRenderer {
     );
   }
   onUnload() {
-    unloadMedias(this.getFrameElement());
+    unloadAssets(this.getFrameElement());
     this.detach();
     return EMPTY;
   }
@@ -6285,196 +6401,51 @@ class UserNavigator extends DestroyableClass {
     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 withPaginationInfo = () => (stream) => {
+  return stream.pipe(
+    map(({ navigation, pagination, ...rest }) => {
+      return {
+        navigation: {
+          ...navigation,
+          paginationBeginCfi: pagination.beginCfi
+        },
+        ...rest
+      };
+    })
   );
-  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
-        },
-        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);
+const consolidateWithPagination = (context, navigation$, spine) => context.bridgeEvent.pagination$.pipe(
+  withLatestFrom(navigation$),
+  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.
+   */
+  switchMap(([pagination, navigation]) => {
+    const spineItem = spine.spineItemsManager.get(navigation.spineItem);
+    return ((spineItem == null ? void 0 : spineItem.isReady$.pipe(first$1())) ?? of(false)).pipe(
+      filter((isReady) => isReady),
+      map(() => ({
+        pagination,
+        navigation
+      }))
+    );
+  }),
+  withPaginationInfo(),
+  distinctUntilChanged$1(
+    (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
+  ),
+  map(
+    ({ navigation }) => ({
+      ...navigation,
+      meta: {
+        triggeredBy: "pagination"
       }
-    }
-  }
-  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(
-  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 mapUserNavigationToInternal = (stream) => {
   return stream.pipe(
@@ -6495,6 +6466,27 @@ const mapUserNavigationToInternal = (stream) => {
     })
   );
 };
+const withCfiPosition = ({ navigationResolver }) => (stream) => {
+  return stream.pipe(
+    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,59 +6546,6 @@ const withDirection = ({
     })
   );
 };
-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(
-    map(({ navigation, ...rest }) => {
-      return {
-        navigation: {
-          ...navigation,
-          positionInSpineItem: getPosition(navigation)
-        },
-        ...rest
-      };
-    })
-  );
-};
 const withFallbackPosition = ({
   spineItemsManager,
   navigationResolver
@@ -6643,70 +6582,6 @@ const withFallbackPosition = ({
     })
   );
 };
-const withSpineItemLayoutInfo = ({ spine }) => (stream) => {
-  return stream.pipe(
-    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(
-    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(
-    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,
@@ -6745,87 +6620,351 @@ const withSpineItem = ({
       const farthestSpineItem = spineItemsManager.get(farthestSpineItemIndex);
       if (!farthestSpineItem) return void 0;
       const { endPageIndex, beginPageIndex } = spineLocator.getVisiblePagesFromViewportPosition({
-        position,
-        spineItem: farthestSpineItem,
+        position,
+        spineItem: farthestSpineItem,
+        threshold: navigationSnapThreshold,
+        restrictToScreen: false
+      }) ?? {};
+      const farthestVisiblePageIndex = (direction === "forward" || direction === "anchor" ? endPageIndex : beginPageIndex) ?? 0;
+      const navigationForPosition = navigationResolver.getNavigationForSpineItemPage({
+        pageIndex: farthestVisiblePageIndex,
+        spineItemId: farthestSpineItem
+      });
+      const visibleSpineItemsFromNavigablePosition = spineLocator.getVisibleSpineItemsFromPosition({
+        position: navigationForPosition,
+        threshold: navigationSnapThreshold,
+        restrictToScreen: false
+      });
+      const finalSpineItemIndex = direction === "forward" || direction === "anchor" ? visibleSpineItemsFromNavigablePosition == null ? void 0 : visibleSpineItemsFromNavigablePosition.beginIndex : visibleSpineItemsFromNavigablePosition == null ? void 0 : visibleSpineItemsFromNavigablePosition.endIndex;
+      return spineItemsManager.get(finalSpineItemIndex);
+    }
+    if (position && computedPageTurnMode === "scrollable") {
+      return spineLocator.getSpineItemFromPosition(position);
+    }
+    return spineItemsManager.get(0);
+  };
+  return stream.pipe(
+    map(({ navigation, ...rest }) => {
+      const spineItem = getSpineItem(navigation);
+      return {
+        navigation: {
+          ...navigation,
+          spineItem: spineItemsManager.getSpineItemIndex(spineItem)
+        },
+        ...rest
+      };
+    })
+  );
+};
+const withSpineItemLayoutInfo = ({ spine }) => (stream) => {
+  return stream.pipe(
+    switchMap(({ navigation, ...rest }) => {
+      const spineItemDimensions = spine.spineLayout.getAbsolutePositionOf(
+        navigation.spineItem
+      );
+      const spineItem = spine.spineItemsManager.get(navigation.spineItem);
+      return ((spineItem == null ? void 0 : spineItem.isReady$) ?? of(false)).pipe(
+        first$1(),
+        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 farthestVisiblePageIndex = (direction === "forward" || direction === "anchor" ? endPageIndex : beginPageIndex) ?? 0;
-      const navigationForPosition = navigationResolver.getNavigationForSpineItemPage({
-        pageIndex: farthestVisiblePageIndex,
-        spineItemId: farthestSpineItem
+      const farthestPageIndex = (navigation.directionFromLastNavigation === "forward" || navigation.directionFromLastNavigation === "anchor" ? endPageIndex : beginPageIndex) ?? 0;
+      const navigableSpinePositionForFarthestPageIndex = navigationResolver.getNavigationForSpineItemPage({
+        pageIndex: farthestPageIndex,
+        spineItemId: spineItem
       });
-      const visibleSpineItemsFromNavigablePosition = spineLocator.getVisibleSpineItemsFromPosition({
-        position: navigationForPosition,
-        threshold: navigationSnapThreshold,
-        restrictToScreen: false
+      const visiblePagesAtNavigablePosition = spineLocator.getVisiblePagesFromViewportPosition({
+        position: navigableSpinePositionForFarthestPageIndex,
+        spineItem,
+        threshold: 0,
+        restrictToScreen: true
       });
-      const finalSpineItemIndex = direction === "forward" || direction === "anchor" ? visibleSpineItemsFromNavigablePosition == null ? void 0 : visibleSpineItemsFromNavigablePosition.beginIndex : visibleSpineItemsFromNavigablePosition == null ? void 0 : visibleSpineItemsFromNavigablePosition.endIndex;
-      return spineItemsManager.get(finalSpineItemIndex);
-    }
-    if (position && computedPageTurnMode === "scrollable") {
-      return spineLocator.getSpineItemFromPosition(position);
+      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 spineItemsManager.get(0);
+    return spineLocator.getSpineItemPositionFromSpinePosition(
+      navigation.position,
+      spineItem
+    );
   };
   return stream.pipe(
     map(({ navigation, ...rest }) => {
-      const spineItem = getSpineItem(navigation);
       return {
         navigation: {
           ...navigation,
-          spineItem: spineItemsManager.getSpineItemIndex(spineItem)
+          positionInSpineItem: getPosition(navigation)
         },
         ...rest
       };
     })
   );
 };
-const withPaginationInfo = () => (stream) => {
+const withUrlInfo = ({ navigationResolver }) => (stream) => {
   return stream.pipe(
-    map(({ navigation, pagination, ...rest }) => {
-      return {
-        navigation: {
-          ...navigation,
-          paginationBeginCfi: pagination.beginCfi
-        },
-        ...rest
-      };
+    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 consolidateWithPagination = (context, navigation$, spine) => context.bridgeEvent.pagination$.pipe(
-  withLatestFrom(navigation$),
-  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.
-   */
-  switchMap(([pagination, navigation]) => {
-    const spineItem = spine.spineItemsManager.get(navigation.spineItem);
-    return ((spineItem == null ? void 0 : spineItem.isReady$.pipe(first$1())) ?? of(false)).pipe(
-      filter((isReady) => isReady),
-      map(() => ({
-        pagination,
-        navigation
-      }))
-    );
-  }),
-  withPaginationInfo(),
-  distinctUntilChanged$1(
-    (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
-  ),
-  map(
-    ({ navigation }) => ({
-      ...navigation,
-      meta: {
-        triggeredBy: "pagination"
+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 of({ x: 0, y: 0 });
+  }
+  return spineItem.isReady$.pipe(
+    first$1(),
+    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 of(
+      restoreNavigationForScrollingPageTurnMode({
+        navigation,
+        spineLocator,
+        navigationResolver,
+        settings,
+        spineItemsManager,
+        spineLayout
+      })
+    );
+  }
+  return restoreNavigationForControlledPageTurnMode({
+    navigation,
+    spineLocator,
+    navigationResolver,
+    spineItemsManager,
+    spineLayout
+  });
+};
+const withRestoredPosition = ({
+  settings,
+  navigationResolver,
+  context,
+  spine
+}) => (stream) => stream.pipe(
+  switchMap((params) => {
+    return restorePosition({
+      spineLocator: spine.locator,
+      navigation: params.navigation,
+      navigationResolver,
+      settings,
+      spineItemsManager: spine.spineItemsManager,
+      spineItemLocator: spine.locator.spineItemLocator,
+      spineLayout: spine.spineLayout
+    }).pipe(
+      map((restoredPosition) => ({
+        ...params,
+        navigation: {
+          ...params.navigation,
+          position: restoredPosition
+        }
+      }))
+    );
+  })
 );
 const NAMESPACE$2 = `navigation/InternalNavigator`;
 const report$1 = Report.namespace(NAMESPACE$2);
@@ -6846,6 +6985,7 @@ class InternalNavigator extends DestroyableClass {
       meta: {
         triggeredBy: "user"
       },
+      spineItemIsReady: false,
       type: "api",
       id: Symbol()
     });
@@ -6861,10 +7001,6 @@ class InternalNavigator extends DestroyableClass {
       shareReplay$1(1)
     );
     this.locker = new Locker();
-    const layoutHasChanged$ = merge(
-      viewportController.layout$,
-      spine.spineLayout.layout$.pipe(filter(({ hasChanged }) => hasChanged))
-    );
     const navigationFromUser$ = userNavigation$.pipe(
       withLatestFrom(this.navigationSubject),
       mapUserNavigationToInternal,
@@ -6946,7 +7082,10 @@ class InternalNavigator extends DestroyableClass {
       }),
       share()
     );
-    const navigationUpateFromLayout$ = layoutHasChanged$.pipe(
+    const navigationUpateFromLayout$ = merge(
+      viewportController.layout$,
+      spine.spineLayout.layout$
+    ).pipe(
       switchMap(() => {
         return of(null).pipe(
           switchMap(