@prose-reader/core 1.41.0 → 1.43.0

package/dist/{prose.js → index.js}

@@ -1,17 +1,17 @@
-import { Subject, BehaviorSubject, map, takeUntil, combineLatest, switchMap, merge, EMPTY, fromEvent, withLatestFrom as withLatestFrom$1, of, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, from, interval, iif, identity, take as take$1, forkJoin } from "rxjs";
-import { withLatestFrom, distinctUntilChanged, shareReplay, tap, pairwise, filter, take, map as map$1, switchMap as switchMap$1, takeUntil as takeUntil$1, skip, debounceTime, startWith, share, exhaustMap, mergeMap, catchError, debounce, delay, mapTo } from "rxjs/operators";
+import { takeUntil, Subject, BehaviorSubject, map, combineLatest, switchMap, merge, EMPTY, fromEvent, withLatestFrom as withLatestFrom$1, NEVER, Observable, of, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, from, interval, iif, identity, take as take$1, forkJoin } from "rxjs";
+import { withLatestFrom, distinctUntilChanged, shareReplay, tap, pairwise, switchMap as switchMap$1, filter, take, map as map$1, takeUntil as takeUntil$1, skip, debounceTime, startWith, share, exhaustMap, mergeMap, catchError, debounce, delay } from "rxjs/operators";
 import { parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
-const SHOULD_NOT_LAYOUT$3 = false;
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
-  reader.manipulateContainer((container) => {
+  reader.context$.pipe(takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
+    if (!containerElement)
+      return;
     const onScroll = () => {
-      if (reader.context.getSettings().computedPageTurnMode === `controlled`) {
-        container.scrollTo(0, 0);
+      if (reader.settings.getSettings().computedPageTurnMode === `controlled`) {
+        containerElement.scrollTo(0, 0);
       }
     };
-    container.addEventListener(`scroll`, onScroll);
-    return SHOULD_NOT_LAYOUT$3;
+    containerElement.addEventListener(`scroll`, onScroll);
   });
   reader.registerHook(`item.onLoad`, ({ frame }) => {
     var _a;
@@ -139,30 +139,35 @@ const fontsEnhancer = (next) => (options) => {
   );
   newSettings$.subscribe(settings$);
   settings$.pipe(shouldRequireLayout, tap(applyChangeToSpineItem), takeUntil(reader.$.destroy$)).subscribe();
-  const settingsMerge$ = combineLatest([reader.settings$, settings$]).pipe(
+  const settingsMerge$ = combineLatest([reader.settings.settings$, settings$]).pipe(
     map(([innerSettings, settings]) => ({
       ...innerSettings,
       ...settings
     }))
   );
+  const setSettings = (settings) => {
+    const { fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2, ...passthroughSettings } = settings;
+    changes$.next({ fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2 });
+    reader.settings.setSettings(passthroughSettings);
+  };
   return {
     ...reader,
     destroy: () => {
       changes$.complete();
       settings$.complete();
+      reader.destroy();
     },
-    setSettings: (settings) => {
-      const { fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2, ...passthroughSettings } = settings;
-      changes$.next({ fontJustification: fontJustification2, fontScale: fontScale2, fontWeight: fontWeight2, lineHeight: lineHeight2 });
-      reader.setSettings(passthroughSettings);
-    },
-    settings$: settingsMerge$
+    settings: {
+      ...reader.settings,
+      setSettings,
+      settings$: settingsMerge$
+    }
   };
 };
 const hotkeysEnhancer = (next) => (options) => {
   const reader = next(options);
   const navigateOnKey = (document2) => fromEvent(document2, "keyup").pipe(
-    withLatestFrom$1(reader.settings$),
+    withLatestFrom$1(reader.settings.settings$),
     map(([e, { pageTurnDirection }]) => {
       if (pageTurnDirection === "horizontal") {
         if (e.key === `ArrowRight`) {
@@ -198,22 +203,30 @@ const hotkeysEnhancer = (next) => (options) => {
   ).subscribe();
   return reader;
 };
-const SHOULD_NOT_LAYOUT$2 = false;
 const createMovingSafePan$ = (reader) => {
   let iframeOverlayForAnimationsElement;
-  reader.manipulateContainer((container) => {
-    iframeOverlayForAnimationsElement = container.ownerDocument.createElement(`div`);
-    iframeOverlayForAnimationsElement.style.cssText = `
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      visibility: hidden;
-    `;
-    container.appendChild(iframeOverlayForAnimationsElement);
-    return SHOULD_NOT_LAYOUT$2;
-  });
+  const updateOverlayElement$ = reader.context$.pipe(
+    switchMap$1(({ containerElement }) => {
+      if (!containerElement)
+        return NEVER;
+      return new Observable(() => {
+        iframeOverlayForAnimationsElement = containerElement.ownerDocument.createElement(`div`);
+        iframeOverlayForAnimationsElement.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+      `;
+        containerElement.appendChild(iframeOverlayForAnimationsElement);
+        return () => {
+          iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.remove();
+          iframeOverlayForAnimationsElement = void 0;
+        };
+      });
+    })
+  );
   const createResetLock$ = (source) => scheduled(source, animationFrameScheduler).pipe(
     tap(() => {
       iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `hidden`);
@@ -227,8 +240,8 @@ const createMovingSafePan$ = (reader) => {
     })
   );
   const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(take(1));
-  const pageTurnMode$ = reader.context.$.settings$.pipe(
-    map$1(() => reader.context.getSettings().computedPageTurnMode),
+  const pageTurnMode$ = reader.settings.settings$.pipe(
+    map$1(() => reader.settings.getSettings().computedPageTurnMode),
     distinctUntilChanged()
   );
   const handleViewportLock$ = pageTurnMode$.pipe(
@@ -237,7 +250,7 @@ const createMovingSafePan$ = (reader) => {
     ),
     takeUntil$1(reader.$.destroy$)
   );
-  return handleViewportLock$;
+  return merge(updateOverlayElement$, handleViewportLock$);
 };
 const mapKeysTo = (keys) => {
   return map$1((obj) => {
@@ -273,7 +286,10 @@ const fixReflowable = (reader) => {
     }
   });
 };
-const SHOULD_NOT_LAYOUT$1 = false;
+function isDefined(arg) {
+  return arg !== null && arg !== void 0;
+}
+const SHOULD_NOT_LAYOUT = false;
 const layoutEnhancer = (next) => (options) => {
   const { pageHorizontalMargin = 24, pageVerticalMargin = 24 } = options;
   const reader = next(options);
@@ -288,7 +304,7 @@ const layoutEnhancer = (next) => (options) => {
         void frame.getBoundingClientRect().left;
         hasRedrawn = true;
       }
-      return SHOULD_NOT_LAYOUT$1;
+      return SHOULD_NOT_LAYOUT;
     });
   });
   reader.registerHook(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
@@ -333,10 +349,17 @@ const layoutEnhancer = (next) => (options) => {
   fixReflowable(reader);
   let observer;
   if (options.layoutAutoResize === `container`) {
-    observer = new ResizeObserver(() => {
-      reader == null ? void 0 : reader.layout();
+    reader.context$.pipe(
+      map$1((state) => state.containerElement),
+      filter(isDefined),
+      distinctUntilChanged(),
+      takeUntil$1(reader.$.destroy$)
+    ).subscribe((container) => {
+      observer = new ResizeObserver(() => {
+        reader == null ? void 0 : reader.layout();
+      });
+      observer.observe(container);
     });
-    observer.observe(options.containerElement);
   }
   const movingSafePan$ = createMovingSafePan$(reader);
   movingSafePan$.subscribe();
@@ -349,27 +372,32 @@ const layoutEnhancer = (next) => (options) => {
     }),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
+  const settings$ = combineLatest([reader.settings.settings$, settingsSubject$.asObservable()]).pipe(
+    map$1(([innerSettings, settings]) => ({
+      ...innerSettings,
+      ...settings
+    }))
+  );
+  const setSettings = ({ pageVerticalMargin: pageVerticalMargin2, pageHorizontalMargin: pageHorizontalMargin2, ...rest }) => {
+    if (pageHorizontalMargin2 !== void 0 || pageVerticalMargin2 !== void 0) {
+      settingsSubject$.next({
+        pageHorizontalMargin: pageHorizontalMargin2 ?? settingsSubject$.value.pageHorizontalMargin,
+        pageVerticalMargin: pageVerticalMargin2 ?? settingsSubject$.value.pageVerticalMargin
+      });
+    }
+    reader.settings.setSettings(rest);
+  };
   return {
     ...reader,
     destroy: () => {
       reader.destroy();
       observer == null ? void 0 : observer.disconnect();
     },
-    setSettings: ({ pageVerticalMargin: pageVerticalMargin2, pageHorizontalMargin: pageHorizontalMargin2, ...rest }) => {
-      if (pageHorizontalMargin2 !== void 0 || pageVerticalMargin2 !== void 0) {
-        settingsSubject$.next({
-          pageHorizontalMargin: pageHorizontalMargin2 ?? settingsSubject$.value.pageHorizontalMargin,
-          pageVerticalMargin: pageVerticalMargin2 ?? settingsSubject$.value.pageVerticalMargin
-        });
-      }
-      reader.setSettings(rest);
-    },
-    settings$: combineLatest([reader.settings$, settingsSubject$.asObservable()]).pipe(
-      map$1(([innerSettings, settings]) => ({
-        ...innerSettings,
-        ...settings
-      }))
-    )
+    settings: {
+      ...reader.settings,
+      setSettings,
+      settings$
+    }
   };
 };
 const ROOT_NAMESPACE = `@prose-reader/core`;
@@ -461,13 +489,15 @@ const linksEnhancer = (next) => (options) => {
   const handleNavigationForClick = (element) => {
     var _a;
     if (!element.href)
-      return;
+      return false;
     const hrefUrl = new URL(element.href);
     const hrefWithoutAnchor = `${hrefUrl.origin}${hrefUrl.pathname}`;
     const hasExistingSpineItem = (_a = reader.context.getManifest()) == null ? void 0 : _a.spineItems.some((item) => item.href === hrefWithoutAnchor);
     if (hasExistingSpineItem) {
       reader.goToUrl(hrefUrl);
+      return true;
     }
+    return false;
   };
   reader.registerHook(`item.onLoad`, ({ frame }) => {
     if (frame.contentDocument) {
@@ -476,8 +506,8 @@ const linksEnhancer = (next) => (options) => {
           if (e.target && `style` in e.target && `ELEMENT_NODE` in e.target) {
             Report.warn(`prevented click on`, element, e);
             e.preventDefault();
-            handleNavigationForClick(element);
-            subject.next({ event: `linkClicked`, data: element });
+            const isNavigable = handleNavigationForClick(element);
+            subject.next({ event: `linkClicked`, data: element, isNavigable });
           }
         })
       );
@@ -491,8 +521,7 @@ const linksEnhancer = (next) => (options) => {
     }
   };
 };
-const navigationEnhancer = (next) => (options) => {
-  const reader = next(options);
+const createNavigator = (reader) => {
   const goToNextSpineItem = () => {
     var _a;
     const focusedSpineItemIndex = reader.getFocusedSpineItemIndex() || 0;
@@ -512,14 +541,19 @@ const navigationEnhancer = (next) => (options) => {
     }
   };
   return {
-    ...reader,
+    goToNextSpineItem,
+    goToPreviousSpineItem,
     goToLeftSpineItem: () => {
+      if (reader.settings.getSettings().computedPageTurnDirection === "vertical")
+        return;
       if (reader.context.isRTL()) {
         return goToNextSpineItem();
       }
       return goToPreviousSpineItem();
     },
     goToRightSpineItem: () => {
+      if (reader.settings.getSettings().computedPageTurnDirection === "vertical")
+        return;
       if (reader.context.isRTL()) {
         return goToPreviousSpineItem();
       }
@@ -527,15 +561,44 @@ const navigationEnhancer = (next) => (options) => {
     }
   };
 };
+const createState = (reader) => {
+  return reader.pagination.paginationInfo$.pipe(
+    withLatestFrom$1(reader.context.$.manifest$, reader.settings.settings$),
+    map(([paginationInfo, manifest, { computedPageTurnDirection }]) => {
+      const numberOfSpineItems = (manifest == null ? void 0 : manifest.spineItems.length) ?? 0;
+      const isAtAbsoluteBeginning = paginationInfo.beginSpineItemIndex === 0 && paginationInfo.beginPageIndexInSpineItem === 0;
+      const isAtAbsoluteEnd = paginationInfo.endPageIndexInSpineItem === paginationInfo.endNumberOfPagesInSpineItem - 1 && paginationInfo.endSpineItemIndex === Math.max(numberOfSpineItems - 1, 0);
+      return {
+        canGoTopSpineItem: computedPageTurnDirection === "vertical" && !isAtAbsoluteBeginning,
+        canGoBottomSpineItem: computedPageTurnDirection === "vertical" && !isAtAbsoluteEnd,
+        canGoLeftSpineItem: computedPageTurnDirection !== "vertical" && ((manifest == null ? void 0 : manifest.readingDirection) === "ltr" && !isAtAbsoluteBeginning || (manifest == null ? void 0 : manifest.readingDirection) === "rtl" && !isAtAbsoluteEnd),
+        canGoRightSpineItem: computedPageTurnDirection !== "vertical" && ((manifest == null ? void 0 : manifest.readingDirection) === "ltr" && !isAtAbsoluteEnd || (manifest == null ? void 0 : manifest.readingDirection) === "rtl" && !isAtAbsoluteBeginning)
+      };
+    }),
+    distinctUntilChanged$1(isShallowEqual)
+  );
+};
+const navigationEnhancer = (next) => (options) => {
+  const reader = next(options);
+  const state$ = createState(reader);
+  const navigator2 = createNavigator(reader);
+  return {
+    ...reader,
+    navigation: {
+      ...navigator2,
+      state$
+    }
+  };
+};
 const NAMESPACE$6 = `pagination`;
 const createPagination = ({ context }) => {
   const paginationSubject$ = new BehaviorSubject({
-    beginPageIndex: void 0,
-    beginNumberOfPages: 0,
+    beginPageIndexInSpineItem: void 0,
+    beginNumberOfPagesInSpineItem: 0,
     beginCfi: void 0,
     beginSpineItemIndex: void 0,
-    endPageIndex: void 0,
-    endNumberOfPages: 0,
+    endPageIndexInSpineItem: void 0,
+    endNumberOfPagesInSpineItem: 0,
     endCfi: void 0,
     endSpineItemIndex: void 0
   });
@@ -562,12 +625,12 @@ const createPagination = ({ context }) => {
       const beginInfo = getInfoForUpdate(begin);
       const endInfo = getInfoForUpdate(end);
       const newValues = {
-        beginPageIndex: beginInfo.pageIndex,
-        beginNumberOfPages: beginInfo.numberOfPages,
+        beginPageIndexInSpineItem: beginInfo.pageIndex,
+        beginNumberOfPagesInSpineItem: beginInfo.numberOfPages,
         beginCfi: beginInfo.cfi,
         beginSpineItemIndex: begin.spineItemIndex,
-        endPageIndex: endInfo.pageIndex,
-        endNumberOfPages: endInfo.numberOfPages,
+        endPageIndexInSpineItem: endInfo.pageIndex,
+        endNumberOfPagesInSpineItem: endInfo.numberOfPages,
         endCfi: endInfo.cfi,
         endSpineItemIndex: end.spineItemIndex
       };
@@ -578,18 +641,19 @@ const createPagination = ({ context }) => {
     },
     { disable: true }
   );
-  const getInfo = () => paginationSubject$.value;
-  const info$ = paginationSubject$.asObservable().pipe(distinctUntilChanged$1(isShallowEqual));
+  const getPaginationInfo = () => paginationSubject$.value;
+  const paginationInfo$ = paginationSubject$.pipe(
+    distinctUntilChanged$1(isShallowEqual),
+    filter$1(({ beginPageIndexInSpineItem }) => beginPageIndexInSpineItem !== void 0)
+  );
   const destroy = () => {
     paginationSubject$.complete();
   };
   return {
     destroy,
     updateBeginAndEnd,
-    getInfo,
-    $: {
-      info$
-    }
+    getPaginationInfo,
+    paginationInfo$
   };
 };
 const getItemOffsetFromPageIndex = (pageWidth, pageIndex, itemWidth) => {
@@ -620,15 +684,10 @@ const paginationEnhancer = (next) => (options) => {
   };
   const mapPaginationInfoToExtendedInfo = (paginationInfo) => {
     const context = reader.context;
-    const manifest = context.getManifest();
-    const numberOfSpineItems = (manifest == null ? void 0 : manifest.spineItems.length) ?? 0;
     const beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.beginSpineItemIndex) : void 0;
     const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.endSpineItemIndex) : void 0;
-    const isAtAbsoluteBeginning = paginationInfo.beginSpineItemIndex === 0 && paginationInfo.beginPageIndex === 0;
-    const isAtAbsoluteEnd = paginationInfo.endPageIndex === paginationInfo.endNumberOfPages - 1 && paginationInfo.endSpineItemIndex === Math.max(numberOfSpineItems - 1, 0);
     return {
-      beginPageIndexInChapter: paginationInfo.beginPageIndex,
-      beginNumberOfPagesInChapter: paginationInfo.beginNumberOfPages,
+      ...paginationInfo,
       beginChapterInfo: beginItem ? chaptersInfo[beginItem.item.id] : void 0,
       // chapterIndex: number;
       // pages: number;
@@ -640,15 +699,9 @@ const paginationEnhancer = (next) => (options) => {
       // domIndex: number;
       // charOffset: number;
       // serializeString?: string;
-      beginSpineItemIndex: paginationInfo.beginSpineItemIndex,
-      beginCfi: paginationInfo.beginCfi,
       beginSpineItemReadingDirection: beginItem == null ? void 0 : beginItem.getReadingDirection(),
       endChapterInfo: endItem ? chaptersInfo[endItem.item.id] : void 0,
-      endPageIndexInChapter: paginationInfo.endPageIndex,
-      endNumberOfPagesInChapter: paginationInfo.endNumberOfPages,
-      endSpineItemIndex: paginationInfo.endSpineItemIndex,
       endSpineItemReadingDirection: endItem == null ? void 0 : endItem.getReadingDirection(),
-      endCfi: paginationInfo.endCfi,
       // spineItemReadingDirection: focusedSpineItem?.getReadingDirection(),
       /**
        * This percentage is based of the weight (kb) of every items and the number of pages.
@@ -659,23 +712,21 @@ const paginationEnhancer = (next) => (options) => {
       percentageEstimateOfBook: endItem ? reader.progression.getPercentageEstimate(
         context,
         paginationInfo.endSpineItemIndex ?? 0,
-        paginationInfo.endNumberOfPages,
-        paginationInfo.endPageIndex || 0,
+        paginationInfo.endNumberOfPagesInSpineItem,
+        paginationInfo.endPageIndexInSpineItem || 0,
         reader.getCurrentViewportPosition(),
         endItem
       ) : 0,
-      isUsingSpread: context.shouldDisplaySpread(),
+      isUsingSpread: context.isUsingSpreadMode() ?? false
       // hasNextChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
       // hasPreviousChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
       // numberOfSpineItems: context.getManifest()?.readingOrder.length,
-      canGoLeft: (manifest == null ? void 0 : manifest.readingDirection) === "ltr" && !isAtAbsoluteBeginning || (manifest == null ? void 0 : manifest.readingDirection) === "rtl" && !isAtAbsoluteEnd,
-      canGoRight: (manifest == null ? void 0 : manifest.readingDirection) === "ltr" && !isAtAbsoluteEnd || (manifest == null ? void 0 : manifest.readingDirection) === "rtl" && !isAtAbsoluteBeginning
     };
   };
   const getSpineItemNumberOfPages = (spineItem) => {
     const writingMode = spineItem.spineItemFrame.getWritingMode();
     const { width, height } = spineItem.getElementDimensions();
-    const settings = reader.context.getSettings();
+    const settings = reader.settings.getSettings();
     if (settings.pageTurnDirection === `vertical` && settings.pageTurnMode === `scrollable`) {
       return 1;
     }
@@ -695,7 +746,7 @@ const paginationEnhancer = (next) => (options) => {
     ),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
-  const innerPaginationExtendedInfo$ = reader.pagination$.pipe(
+  const innerPaginationExtendedInfo$ = reader.pagination.paginationInfo$.pipe(
     map$1((info) => ({
       ...info,
       ...mapPaginationInfoToExtendedInfo(info)
@@ -704,7 +755,7 @@ const paginationEnhancer = (next) => (options) => {
   );
   const totalPages$ = reader.$.layout$.pipe(
     debounceTime(10, animationFrameScheduler),
-    withLatestFrom(reader.pagination$),
+    withLatestFrom(reader.pagination.paginationInfo$),
     map$1(() => {
       const numberOfPagesPerItems = getNumberOfPagesPerItems();
       return {
@@ -721,19 +772,25 @@ const paginationEnhancer = (next) => (options) => {
       numberOfTotalPages: 0
     })
   );
-  const pagination$ = combineLatest([innerPaginationExtendedInfo$, totalPages$]).pipe(
+  const paginationInfo$ = combineLatest([
+    innerPaginationExtendedInfo$,
+    totalPages$
+  ]).pipe(
     map$1(([pageInfo, totalPageInfo]) => ({
       ...pageInfo,
       ...totalPageInfo,
-      beginAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.beginSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.beginPageIndexInChapter ?? 0),
-      endAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.endSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.endPageIndexInChapter ?? 0)
+      beginAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.beginSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.beginPageIndexInSpineItem ?? 0),
+      endAbsolutePageIndex: totalPageInfo.numberOfPagesPerItems.slice(0, pageInfo.endSpineItemIndex).reduce((acc, numberOfPagesForItem) => acc + numberOfPagesForItem, pageInfo.endPageIndexInSpineItem ?? 0)
     })),
     shareReplay(1),
     takeUntil$1(reader.$.destroy$)
   );
   return {
     ...reader,
-    pagination$
+    pagination: {
+      ...reader.pagination,
+      paginationInfo$
+    }
   };
 };
 const buildChapterInfoFromSpineItem = (manifest, item) => {
@@ -854,7 +911,6 @@ const themeEnhancer = (next) => (options) => {
     }
   };
 };
-const SHOULD_NOT_LAYOUT = false;
 const createElementZoomer = (reader) => {
   const isZooming$ = new BehaviorSubject(false);
   let imageMagnifierContainer;
@@ -867,7 +923,8 @@ const createElementZoomer = (reader) => {
     imgLastPosition = { x: 0, y: 0 };
     baseScale = 1;
     lastUserScale = 1;
-    reader.manipulateContainer((container) => {
+    const container = reader.context.getState().containerElement;
+    if (container) {
       imageMagnifierContainer = container.ownerDocument.createElement(`div`);
       imageMagnifierContainer.style.cssText = `
           top: 0;
@@ -878,6 +935,7 @@ const createElementZoomer = (reader) => {
           background: black;
           width: 100%;
           height: 100%;
+          user-select: none;
         `;
       const clonedImgElement = imgElement.cloneNode();
       clonedImgElement.src = imgElement.src;
@@ -887,8 +945,7 @@ const createElementZoomer = (reader) => {
       clonedImgElement.style.setProperty(`pointer-events`, `none`);
       imageMagnifierContainer.appendChild(clonedImgElement);
       container.appendChild(imageMagnifierContainer);
-      return SHOULD_NOT_LAYOUT;
-    });
+    }
     scale(1.2);
     setCurrentScaleAsBase();
   };
@@ -911,14 +968,14 @@ const createElementZoomer = (reader) => {
   const move = (delta, { isFirst, isLast }) => {
     const imgElement = imageMagnifierContainer == null ? void 0 : imageMagnifierContainer.querySelector(`img`);
     if (isFirst) {
-      movingLastDelta = { x: 0, y: 0 };
+      movingLastDelta = delta;
     }
     if (delta) {
-      const correctedX = delta.x - ((movingLastDelta == null ? void 0 : movingLastDelta.x) || 0);
-      const correctedY = delta.y - ((movingLastDelta == null ? void 0 : movingLastDelta.y) || 0);
+      const newOffsetX = delta.x - ((movingLastDelta == null ? void 0 : movingLastDelta.x) || 0);
+      const newOffsetY = delta.y - ((movingLastDelta == null ? void 0 : movingLastDelta.y) || 0);
       imgLastPosition = {
-        x: imgLastPosition.x + correctedX,
-        y: imgLastPosition.y + correctedY
+        x: imgLastPosition.x + newOffsetX,
+        y: imgLastPosition.y + newOffsetY
       };
       imgElement == null ? void 0 : imgElement.style.setProperty(
         `transform`,
@@ -932,11 +989,8 @@ const createElementZoomer = (reader) => {
   };
   const exit = () => {
     lastUserScale = 1;
-    reader.manipulateContainer(() => {
-      imageMagnifierContainer == null ? void 0 : imageMagnifierContainer.remove();
-      imageMagnifierContainer = void 0;
-      return SHOULD_NOT_LAYOUT;
-    });
+    imageMagnifierContainer == null ? void 0 : imageMagnifierContainer.remove();
+    imageMagnifierContainer = void 0;
     isZooming$.next(false);
   };
   const _isZooming = () => isZooming$.value;
@@ -980,7 +1034,10 @@ const createViewportZoomer = (reader) => {
   };
   const enter = () => {
     reset();
-    reader.spine.element.style.transformOrigin = `0 0`;
+    const spineElement = reader.spine.getElement();
+    if (spineElement) {
+      spineElement.style.transformOrigin = `0 0`;
+    }
     isZooming$.next(true);
     scale(1);
     setCurrentScaleAsBase();
@@ -989,23 +1046,27 @@ const createViewportZoomer = (reader) => {
     baseScale = lastUserScale;
   };
   const scale = (userScale) => {
+    const spineElement = reader.spine.getElement();
+    const viewportElement = reader.viewportNavigator.getElement();
+    if (!spineElement || !viewportElement)
+      return;
     const roundedScale = Math.ceil((userScale < 1 ? baseScale - (1 - userScale) : baseScale + (userScale - 1)) * 100) / 100;
     const newScale = Math.max(roundedScale, 1);
-    const currentScale = reader.spine.element.getBoundingClientRect().width / reader.spine.element.offsetWidth;
-    const currentScrollTop = reader.viewportNavigator.element.scrollTop;
-    reader.spine.element.style.transform = `scale(${newScale})`;
-    reader.viewportNavigator.element.scrollLeft = getNewScaledOffset({
+    const currentScale = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
+    const currentScrollTop = viewportElement.scrollTop;
+    spineElement.style.transform = `scale(${newScale})`;
+    viewportElement.scrollLeft = getNewScaledOffset({
       newScale,
       oldScale: currentScale,
-      pageSize: reader.viewportNavigator.element.clientWidth,
-      screenSize: reader.spine.element.offsetWidth,
-      scrollOffset: reader.viewportNavigator.element.scrollLeft
+      pageSize: viewportElement.clientWidth,
+      screenSize: spineElement.offsetWidth,
+      scrollOffset: viewportElement.scrollLeft
     });
-    reader.viewportNavigator.element.scrollTop = getNewScaledOffset({
+    viewportElement.scrollTop = getNewScaledOffset({
       newScale,
       oldScale: currentScale,
-      pageSize: reader.viewportNavigator.element.clientHeight,
-      screenSize: reader.spine.element.offsetHeight,
+      pageSize: viewportElement.clientHeight,
+      screenSize: spineElement.offsetHeight,
       scrollOffset: currentScrollTop
     });
     lastUserScale = newScale;
@@ -1037,7 +1098,7 @@ const zoomEnhancer = (next) => (options) => {
   const elementZoomer = createElementZoomer(reader);
   const viewportZoomer = createViewportZoomer(reader);
   const currentZoomerSubject$ = new BehaviorSubject(void 0);
-  const isUsingScrollableViewport = () => reader.context.getSettings().computedPageTurnMode === `scrollable`;
+  const isUsingScrollableViewport = () => reader.settings.getSettings().computedPageTurnMode === `scrollable`;
   const enter = (imgElement) => {
     var _a;
     (_a = currentZoomerSubject$ == null ? void 0 : currentZoomerSubject$.value) == null ? void 0 : _a.exit();
@@ -1103,83 +1164,44 @@ const zoomEnhancer = (next) => (options) => {
     }
   };
 };
-const createSettings = (initialSettings) => {
-  const mergedSettings = {
-    forceSinglePageMode: false,
-    pageTurnAnimation: `none`,
-    computedPageTurnAnimation: `none`,
-    pageTurnDirection: `horizontal`,
-    computedPageTurnDirection: `horizontal`,
-    pageTurnAnimationDuration: void 0,
-    computedPageTurnAnimationDuration: 0,
-    pageTurnMode: `controlled`,
-    computedPageTurnMode: `controlled`,
-    computedSnapAnimationDuration: 300,
-    navigationSnapThreshold: 0.3,
-    numberOfAdjacentSpineItemToPreLoad: 0,
-    ...initialSettings
-  };
-  updateComputedSettings(void 0, mergedSettings, false);
-  const settingsSubject$ = new BehaviorSubject(mergedSettings);
-  const setSettings = (newSettings, options) => {
-    if (Object.keys(newSettings).length === 0)
-      return;
-    const newMergedSettings = { ...settingsSubject$.value, ...newSettings };
-    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWritingSubject);
-    settingsSubject$.next(newMergedSettings);
-  };
-  const recompute = (options) => {
-    const newMergedSettings = { ...settingsSubject$.value };
-    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWritingSubject);
-    settingsSubject$.next(newMergedSettings);
-  };
-  const destroy = () => {
-    settingsSubject$.complete();
-  };
-  return {
-    getSettings: () => settingsSubject$.value,
-    setSettings,
-    recompute,
-    destroy,
-    $: {
-      settings$: settingsSubject$.asObservable().pipe(distinctUntilChanged(isShallowEqual))
-    }
-  };
-};
-const areAllItemsPrePaginated$1 = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
-const updateComputedSettings = (newManifest, settings, hasVerticalWriting) => {
-  settings.computedPageTurnDirection = settings.pageTurnDirection;
-  settings.computedPageTurnAnimation = settings.pageTurnAnimation;
-  settings.computedPageTurnMode = `controlled`;
-  if ((newManifest == null ? void 0 : newManifest.renditionFlow) === `scrolled-continuous`) {
-    settings.computedPageTurnMode = `scrollable`;
-    settings.computedPageTurnDirection = `vertical`;
-  } else if (newManifest && settings.pageTurnMode === `scrollable` && (newManifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated$1(newManifest))) {
-    Report.warn(`pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`);
-    settings.computedPageTurnAnimation = `none`;
-    settings.computedPageTurnMode = `controlled`;
-  } else if (settings.pageTurnMode === `scrollable`) {
-    settings.computedPageTurnMode = `scrollable`;
-    settings.computedPageTurnDirection = `vertical`;
-  }
-  if (hasVerticalWriting && settings.computedPageTurnAnimation === `slide`) {
-    Report.warn(
-      `pageTurnAnimation ${settings.computedPageTurnAnimation} incompatible with current book, switching back to default`
-    );
-    settings.computedPageTurnAnimation = `none`;
-  }
-  if (settings.computedPageTurnMode === `scrollable`) {
-    settings.computedPageTurnAnimationDuration = 0;
-    settings.computedPageTurnAnimation = `none`;
-  } else {
-    settings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+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 createContext = (initialSettings) => {
-  let manifest;
-  let loadOptions;
-  const hasVerticalWritingSubject$ = new BehaviorSubject(false);
-  const loadSubject$ = new Subject();
+const isFullyPrePaginated = (manifest) => (manifest == null ? void 0 : manifest.renditionLayout) === "pre-paginated" || (manifest == null ? void 0 : manifest.spineItems.every((item) => item.renditionLayout === "pre-paginated"));
+const createContext = (settings) => {
+  const stateSubject = new BehaviorSubject({});
+  const manifest$ = stateSubject.pipe(
+    map$1((state) => state.manifest),
+    filter(isDefined),
+    distinctUntilChanged()
+  );
+  const containerElement$ = stateSubject.pipe(
+    map$1((state) => state.containerElement),
+    filter(isDefined),
+    distinctUntilChanged()
+  );
+  const hasVerticalWriting$ = stateSubject.pipe(
+    map$1((state) => state.hasVerticalWriting),
+    filter(isDefined),
+    distinctUntilChanged()
+  );
+  const isUsingSpreadMode$ = stateSubject.pipe(
+    map$1((state) => state.isUsingSpreadMode),
+    distinctUntilChanged()
+  );
   const visibleAreaRect = {
     width: 0,
     height: 0,
@@ -1189,82 +1211,113 @@ const createContext = (initialSettings) => {
   const marginTop = 0;
   const marginBottom = 0;
   const destroy$ = new Subject();
-  const settings = createSettings(initialSettings);
-  const shouldDisplaySpread = () => {
-    const { height, width } = visibleAreaRect;
-    const isLandscape = width > height;
-    if (settings.getSettings().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;
+  const setState = (newState) => {
+    const newCompleteState = { ...stateSubject.getValue(), ...newState };
+    if (!isShallowEqual(newCompleteState, stateSubject.getValue())) {
+      stateSubject.next(newCompleteState);
     }
-    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 load = (newManifest, newLoadOptions) => {
-    manifest = newManifest;
-    loadOptions = newLoadOptions;
-    settings.recompute({ manifest, hasVerticalWritingSubject: hasVerticalWritingSubject$.value });
-    loadSubject$.next(newManifest);
+    setState({
+      manifest: newManifest,
+      ...newLoadOptions,
+      isFullyPrePaginated: isFullyPrePaginated(newManifest),
+      isUsingSpreadMode: isUsingSpreadMode({
+        manifest: newManifest,
+        visibleAreaRect,
+        forceSinglePageMode: settings.getSettings().forceSinglePageMode
+      })
+    });
   };
   const isRTL = () => {
-    return (manifest == null ? void 0 : manifest.readingDirection) === `rtl`;
+    var _a;
+    return ((_a = stateSubject.getValue().manifest) == null ? void 0 : _a.readingDirection) === `rtl`;
   };
-  const setHasVerticalWriting = () => hasVerticalWritingSubject$.next(true);
-  hasVerticalWritingSubject$.pipe(
-    skip(1),
+  const setHasVerticalWriting = (value) => setState({
+    hasVerticalWriting: value
+  });
+  const recomputeSettings$ = merge(hasVerticalWriting$, manifest$);
+  recomputeSettings$.pipe(
+    withLatestFrom(hasVerticalWriting$, manifest$),
+    tap(([, hasVerticalWriting, manifest]) => {
+      settings.recompute({ hasVerticalWriting, manifest });
+    }),
+    takeUntil$1(destroy$)
+  ).subscribe();
+  settings.$.settings$.pipe(
+    map$1(({ forceSinglePageMode }) => forceSinglePageMode),
     distinctUntilChanged(),
-    tap(() => {
-      settings.recompute({ manifest, hasVerticalWritingSubject: hasVerticalWritingSubject$.value });
+    withLatestFrom(manifest$),
+    tap(([forceSinglePageMode, manifest]) => {
+      setState({
+        isUsingSpreadMode: isUsingSpreadMode({
+          manifest,
+          visibleAreaRect,
+          forceSinglePageMode
+        })
+      });
     }),
     takeUntil$1(destroy$)
   ).subscribe();
   const destroy = () => {
-    settings.destroy();
-    loadSubject$.complete();
+    stateSubject.complete();
     destroy$.next();
     destroy$.complete();
-    hasVerticalWritingSubject$.complete();
   };
   return {
     load,
     isRTL,
-    areAllItemsPrePaginated: () => areAllItemsPrePaginated(manifest),
+    areAllItemsPrePaginated: () => {
+      var _a;
+      return areAllItemsPrePaginated$1((_a = stateSubject.getValue()) == null ? void 0 : _a.manifest);
+    },
     destroy,
-    getLoadOptions: () => loadOptions,
     getCalculatedInnerMargin: () => 0,
     getVisibleAreaRect: () => visibleAreaRect,
-    shouldDisplaySpread,
+    isUsingSpreadMode: () => stateSubject.getValue().isUsingSpreadMode,
     setHasVerticalWriting,
     setVisibleAreaRect: ({ height, width, x, y }) => {
       visibleAreaRect.width = width;
       visibleAreaRect.height = height - marginTop - marginBottom;
       visibleAreaRect.x = x;
       visibleAreaRect.y = y;
+      const manifest = stateSubject.getValue().manifest;
+      if (manifest) {
+        setState({
+          isUsingSpreadMode: isUsingSpreadMode({
+            manifest,
+            visibleAreaRect,
+            forceSinglePageMode: settings.getSettings().forceSinglePageMode
+          })
+        });
+      }
+    },
+    getState: () => stateSubject.getValue(),
+    getManifest: () => {
+      var _a;
+      return (_a = stateSubject.getValue()) == null ? void 0 : _a.manifest;
+    },
+    getReadingDirection: () => {
+      var _a, _b;
+      return (_b = (_a = stateSubject.getValue()) == null ? void 0 : _a.manifest) == null ? void 0 : _b.readingDirection;
     },
-    getManifest: () => manifest,
-    getReadingDirection: () => manifest == null ? void 0 : manifest.readingDirection,
     getPageSize: () => {
       return {
-        width: shouldDisplaySpread() ? visibleAreaRect.width / 2 : visibleAreaRect.width,
+        width: stateSubject.getValue().isUsingSpreadMode ? visibleAreaRect.width / 2 : visibleAreaRect.width,
         height: visibleAreaRect.height
       };
     },
-    getSettings: settings.getSettings,
-    setSettings: (data) => settings.setSettings(data, {
-      hasVerticalWritingSubject: hasVerticalWritingSubject$.value,
-      manifest
-    }),
+    containerElement$,
+    isUsingSpreadMode$,
+    hasVerticalWriting$,
     $: {
-      hasVerticalWriting$: hasVerticalWritingSubject$.asObservable().pipe(distinctUntilChanged()),
+      manifest$,
       destroy$: destroy$.asObservable(),
-      settings$: settings.$.settings$,
-      load$: loadSubject$.asObservable()
+      state$: stateSubject.asObservable()
     }
   };
 };
-const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+const areAllItemsPrePaginated$1 = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
 const __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY = `__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT`;
 const ITEM_EXTENSION_VALID_FOR_FRAME_SRC = [`.xhtml`, `.html`, `.htm`];
 const HTML_PREFIX$1 = `prose-reader`;
@@ -1381,7 +1434,8 @@ const createLoader = ({
   fetchResource,
   hooks$,
   context,
-  viewportState$
+  viewportState$,
+  settings
 }) => {
   const destroySubject$ = new Subject();
   const loadSubject$ = new Subject();
@@ -1470,7 +1524,7 @@ const createLoader = ({
               if ((frame == null ? void 0 : frame.contentDocument) && body) {
                 computedStyleAfterLoad = (_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.getComputedStyle(body);
               }
-              if (context.getSettings().computedPageTurnMode !== `scrollable`) {
+              if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
                 frame.setAttribute(`tab-index`, `0`);
               }
               const manipulableFrame = createFrameManipulator(frame);
@@ -1539,7 +1593,8 @@ const createFrameItem = ({
   fetchResource,
   context,
   hooks$,
-  viewportState$
+  viewportState$,
+  settings
 }) => {
   const destroySubject$ = new Subject();
   const {
@@ -1548,7 +1603,7 @@ const createFrameItem = ({
     unload,
     destroy: loaderDestroy,
     getComputedStyleAfterLoad
-  } = createLoader({ context, hooks$, item, parent, fetchResource, viewportState$ });
+  } = createLoader({ context, hooks$, item, parent, fetchResource, viewportState$, settings });
   let isLoadedSync = false;
   let isReadySync = false;
   isLoaded$.subscribe({
@@ -1636,7 +1691,7 @@ const createFrameItem = ({
       if (frame) {
         frame.style.width = `${size.width}px`;
         frame.style.height = `${size.height}px`;
-        if (context.getSettings().computedPageTurnMode !== `scrollable`) {
+        if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
           frame.setAttribute(`tab-index`, `0`);
         }
       }
@@ -1901,9 +1956,12 @@ const pointerEvents = [
   `pointermove`,
   `pointerout`,
   `pointerover`,
-  `pointerup`
+  `pointerup`,
+  `touchstart`,
+  `touchend`
 ];
 const mouseEvents = [
+  `click`,
   `mousedown`,
   `mouseup`,
   `mouseenter`,
@@ -1917,9 +1975,10 @@ const createCommonSpineItem = ({
   item,
   context,
   parentElement,
-  iframeEventBridgeElement,
+  iframeEventBridgeElement$,
   hooks$,
-  viewportState$
+  viewportState$,
+  settings
 }) => {
   var _a;
   const destroySubject$ = new Subject();
@@ -1927,14 +1986,15 @@ const createCommonSpineItem = ({
   const overlayElement = createOverlayElement(parentElement, item);
   const fingerTracker = createFingerTracker();
   const selectionTracker = createSelectionTracker();
-  const frameHooks = createFrameHooks(iframeEventBridgeElement, fingerTracker, selectionTracker);
+  const frameHooks = createFrameHooks(iframeEventBridgeElement$, fingerTracker, selectionTracker);
   const spineItemFrame = createFrameItem({
     parent: containerElement,
     item,
     context,
-    fetchResource: (_a = context.getLoadOptions()) == null ? void 0 : _a.fetchResource,
+    fetchResource: (_a = context.getState()) == null ? void 0 : _a.fetchResource,
     hooks$: hooks$.asObservable().pipe(map$1((hooks) => [...hooks, ...frameHooks])),
-    viewportState$
+    viewportState$,
+    settings
   });
   containerElement.appendChild(overlayElement);
   parentElement.appendChild(containerElement);
@@ -2059,10 +2119,10 @@ const createCommonSpineItem = ({
     };
   };
   const getResource = async () => {
-    const loadOptions = context.getLoadOptions();
+    const fetchResource = context.getState().fetchResource;
     const lastFetch = (_) => {
-      if (loadOptions == null ? void 0 : loadOptions.fetchResource) {
-        return loadOptions.fetchResource(item);
+      if (fetchResource) {
+        return fetchResource(item);
       }
       return fetch(item.href);
     };
@@ -2198,7 +2258,7 @@ const createOverlayElement = (containerElement, item) => {
   `;
   return element;
 };
-const createFrameHooks = (iframeEventBridgeElement, fingerTracker, selectionTracker) => {
+const createFrameHooks = (iframeEventBridgeElement$, fingerTracker, selectionTracker) => {
   return [
     {
       name: `item.onLoad`,
@@ -2206,6 +2266,7 @@ const createFrameHooks = (iframeEventBridgeElement, fingerTracker, selectionTrac
         const unregister = passthroughEvents.map((event) => {
           var _a;
           const listener = (e) => {
+            var _a2;
             let convertedEvent = e;
             if (isPointerEvent(e)) {
               convertedEvent = new PointerEvent(e.type, e);
@@ -2215,7 +2276,7 @@ const createFrameHooks = (iframeEventBridgeElement, fingerTracker, selectionTrac
             }
             if (convertedEvent !== e) {
               attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
-              iframeEventBridgeElement.dispatchEvent(convertedEvent);
+              (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
             }
           };
           (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
@@ -2245,17 +2306,19 @@ const createPrePaginatedSpineItem = ({
   item,
   context,
   containerElement,
-  iframeEventBridgeElement,
+  iframeEventBridgeElement$,
   hooks$,
-  viewportState$
+  viewportState$,
+  settings
 }) => {
   const commonSpineItem = createCommonSpineItem({
     context,
     item,
     parentElement: containerElement,
-    iframeEventBridgeElement,
+    iframeEventBridgeElement$,
     hooks$,
-    viewportState$
+    viewportState$,
+    settings
   });
   const spineItemFrame = commonSpineItem.spineItemFrame;
   const layout = ({
@@ -2274,7 +2337,7 @@ const createPrePaginatedSpineItem = ({
       const cssLink = buildDocumentStyle(
         {
           ...commonSpineItem.getDimensionsForPaginatedContent(),
-          enableTouch: context.getSettings().computedPageTurnMode !== `scrollable`,
+          enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`,
           spreadPosition
         },
         viewportDimensions
@@ -2417,17 +2480,19 @@ const createReflowableSpineItem = ({
   item,
   context,
   containerElement,
-  iframeEventBridgeElement,
+  iframeEventBridgeElement$,
   hooks$,
-  viewportState$
+  viewportState$,
+  settings
 }) => {
   const commonSpineItem = createCommonSpineItem({
     context,
     item,
     parentElement: containerElement,
-    iframeEventBridgeElement,
+    iframeEventBridgeElement$,
     hooks$,
-    viewportState$
+    viewportState$,
+    settings
   });
   const spineItemFrame = commonSpineItem.spineItemFrame;
   let latestContentHeightWhenLoaded;
@@ -2466,7 +2531,7 @@ const createReflowableSpineItem = ({
       } else {
         const frameStyle = commonSpineItem.isImageType() ? buildStyleForReflowableImageOnly({
           isScrollable: ((_g = context.getManifest()) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
-          enableTouch: context.getSettings().computedPageTurnMode !== `scrollable`
+          enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`
         }) : buildStyleWithMultiColumn(
           commonSpineItem.getDimensionsForReflowableContent(spineItemFrame.isUsingVerticalWriting(), minimumWidth)
         );
@@ -2691,36 +2756,39 @@ const createSpineItem = ({
   item,
   context,
   containerElement,
-  iframeEventBridgeElement,
+  iframeEventBridgeElement$,
   hooks$,
-  viewportState$
+  viewportState$,
+  settings
 }) => {
   if (item.renditionLayout === `pre-paginated`) {
     return createPrePaginatedSpineItem({
       item,
       context,
       containerElement,
-      iframeEventBridgeElement,
+      iframeEventBridgeElement$,
       hooks$,
-      viewportState$
+      viewportState$,
+      settings
     });
   }
   return createReflowableSpineItem({
     item,
     context,
     containerElement,
-    iframeEventBridgeElement,
+    iframeEventBridgeElement$,
     hooks$,
-    viewportState$
+    viewportState$,
+    settings
   });
 };
 const createEventsHelper = ({
-  iframeEventBridgeElement,
+  iframeEventBridgeElement$,
   locator
 }) => {
   const normalizeEventForViewport = (event) => {
     var _a;
-    const eventIsComingFromBridge = event.target === iframeEventBridgeElement;
+    const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue();
     const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event);
     const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
     if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame)
@@ -3668,11 +3736,12 @@ const createSelection = (selection, item) => {
   };
 };
 const report = Report.namespace(`spine`);
+const noopElement$1 = document.createElement("div");
 const createSpine = ({
-  ownerDocument,
+  element$,
   context,
   pagination,
-  iframeEventBridgeElement,
+  iframeEventBridgeElement$,
   spineItemManager,
   hooks$,
   spineItemLocator,
@@ -3681,31 +3750,32 @@ const createSpine = ({
   navigation$,
   navigationAdjusted$,
   currentNavigationPosition$,
-  viewportState$
+  viewportState$,
+  settings
 }) => {
   const spineItems$ = new Subject();
   const itemsBeforeDestroySubject$ = new Subject();
   const subject = new Subject();
-  const containerElement = createContainerElement(ownerDocument, hooks$);
+  const containerElement$ = new BehaviorSubject(noopElement$1);
   const eventsHelper = createEventsHelper({
     context,
     spineItemManager,
-    iframeEventBridgeElement,
+    iframeEventBridgeElement$,
     locator: spineLocator
   });
   let selectionSubscription;
-  const reload = () => {
-    var _a;
+  const reload = (manifest) => {
     itemsBeforeDestroySubject$.next();
     spineItemManager.destroyItems();
-    (_a = context.getManifest()) == null ? void 0 : _a.spineItems.map((resource) => {
+    manifest.spineItems.map((resource) => {
       const spineItem = createSpineItem({
         item: resource,
-        containerElement,
-        iframeEventBridgeElement,
+        containerElement: containerElement$.getValue(),
+        iframeEventBridgeElement$,
         context,
         hooks$,
-        viewportState$
+        viewportState$,
+        settings
       });
       spineItemManager.add(spineItem);
     });
@@ -3724,7 +3794,7 @@ const createSpine = ({
     var _a;
     (_a = spineItemManager.get(id)) == null ? void 0 : _a.manipulateSpineItem(cb);
   };
-  context.$.load$.pipe(tap(reload), takeUntil$1(context.$.destroy$)).subscribe();
+  context.$.manifest$.pipe(tap(reload), takeUntil$1(context.$.destroy$)).subscribe();
   const waitForViewportFree$ = viewportState$.pipe(
     filter((v) => v === `free`),
     take(1)
@@ -3739,10 +3809,10 @@ const createSpine = ({
             const spineItemsFromPosition = spineLocator.getSpineItemsFromReadingOrderPosition(position);
             const beginSpineItem = spineItemsFromPosition ? spineItemManager.get(spineItemsFromPosition.begin) : void 0;
             const endSpineItem = spineItemsFromPosition ? spineItemManager.get(spineItemsFromPosition.end) : void 0;
-            const beginLastCfi = pagination.getInfo().beginCfi;
-            const endLastCfi = pagination.getInfo().endCfi;
-            const shouldUpdateBeginCfi = pagination.getInfo().beginSpineItemIndex !== (spineItemsFromPosition == null ? void 0 : spineItemsFromPosition.begin) || beginLastCfi === void 0 || (beginLastCfi == null ? void 0 : beginLastCfi.startsWith(`epubcfi(/0`));
-            const shouldUpdateEndCfi = pagination.getInfo().endSpineItemIndex !== (spineItemsFromPosition == null ? void 0 : spineItemsFromPosition.end) || endLastCfi === void 0 || (endLastCfi == null ? void 0 : endLastCfi.startsWith(`epubcfi(/0`));
+            const beginLastCfi = pagination.getPaginationInfo().beginCfi;
+            const endLastCfi = pagination.getPaginationInfo().endCfi;
+            const shouldUpdateBeginCfi = pagination.getPaginationInfo().beginSpineItemIndex !== (spineItemsFromPosition == null ? void 0 : spineItemsFromPosition.begin) || beginLastCfi === void 0 || (beginLastCfi == null ? void 0 : beginLastCfi.startsWith(`epubcfi(/0`));
+            const shouldUpdateEndCfi = pagination.getPaginationInfo().endSpineItemIndex !== (spineItemsFromPosition == null ? void 0 : spineItemsFromPosition.end) || endLastCfi === void 0 || (endLastCfi == null ? void 0 : endLastCfi.startsWith(`epubcfi(/0`));
             if (beginSpineItem && endSpineItem && spineItemsFromPosition) {
               const beginPosition = spineLocator.getSpineItemPositionFromSpinePosition(
                 spineItemsFromPosition.beginPosition,
@@ -3862,7 +3932,7 @@ const createSpine = ({
              *
              * The cfi is later adjusted with heavy dom lookup once the viewport is free.
              */
-            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && context.getSettings().computedPageTurnMode === `controlled` ? pagination.getInfo().beginCfi : beginItemIndex !== pagination.getInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
+            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.getSettings().computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().beginCfi : beginItemIndex !== pagination.getPaginationInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
               /* @todo check ? */
               cfiLocator.getRootCfi(beginSpineItem)
             ),
@@ -3874,7 +3944,7 @@ const createSpine = ({
             spineItem: endSpineItem,
             spineItemIndex: endItemIndex,
             pageIndex: endPageIndex,
-            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && context.getSettings().computedPageTurnMode === `controlled` ? pagination.getInfo().endCfi : endItemIndex !== pagination.getInfo().endSpineItemIndex ? cfiLocator.getRootCfi(endSpineItem) : (
+            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.getSettings().computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().endCfi : endItemIndex !== pagination.getPaginationInfo().endSpineItemIndex ? cfiLocator.getRootCfi(endSpineItem) : (
               /* @todo check ? */
               cfiLocator.getRootCfi(endSpineItem)
             ),
@@ -3940,8 +4010,13 @@ const createSpine = ({
     }),
     takeUntil$1(context.$.destroy$)
   ).subscribe();
+  const elementSub = element$.pipe().subscribe((element) => {
+    const containerElement = createContainerElement(element.ownerDocument);
+    containerElement$.next(containerElement);
+  });
   return {
-    element: containerElement,
+    element$: containerElement$,
+    getElement: () => containerElement$.getValue(),
     locator: spineLocator,
     spineItemLocator,
     cfiLocator,
@@ -3949,13 +4024,14 @@ const createSpine = ({
     manipulateSpineItems,
     manipulateSpineItem,
     destroy: () => {
+      elementSub.unsubscribe();
       spineItems$.complete();
       itemsBeforeDestroySubject$.next();
       itemsBeforeDestroySubject$.complete();
       subject.complete();
       spineItemManager.destroy();
       selectionSubscription == null ? void 0 : selectionSubscription.unsubscribe();
-      containerElement.remove();
+      containerElement$.getValue().remove();
     },
     adjustPagination,
     isSelecting: () => {
@@ -3974,22 +4050,17 @@ const createSpine = ({
     }
   };
 };
-const createContainerElement = (doc, hooks$) => {
+const createContainerElement = (doc) => {
   const element = doc.createElement(`div`);
   element.style.cssText = `
     height: 100%;
     position: relative;
   `;
   element.className = `${HTML_PREFIX$1}-spine`;
-  return hooks$.getValue().reduce((element2, hook) => {
-    if (hook.name === `spine.onBeforeContainerCreated`) {
-      return hook.fn(element2);
-    }
-    return element2;
-  }, element);
+  return element;
 };
 const NAMESPACE$4 = `spineItemManager`;
-const createSpineItemManager = ({ context }) => {
+const createSpineItemManager = ({ context, settings }) => {
   const focus$ = new Subject();
   const layout$ = new Subject();
   let itemLayoutInformation = [];
@@ -4005,7 +4076,7 @@ const createSpineItemManager = ({ context }) => {
         let blankPagePosition = `none`;
         const itemStartOnNewScreen = horizontalOffset % context.getVisibleAreaRect().width === 0;
         const isLastItem = index === orderedSpineItemsSubject$.value.length - 1;
-        if (context.shouldDisplaySpread()) {
+        if (context.isUsingSpreadMode()) {
           if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
             minimumWidth = context.getPageSize().width * 2;
           }
@@ -4031,9 +4102,9 @@ const createSpineItemManager = ({ context }) => {
         const { width, height } = item.layout({
           minimumWidth,
           blankPagePosition,
-          spreadPosition: context.shouldDisplaySpread() ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
+          spreadPosition: context.isUsingSpreadMode() ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
         });
-        if (context.getSettings().computedPageTurnDirection === `vertical`) {
+        if (settings.getSettings().computedPageTurnDirection === `vertical`) {
           const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.getVisibleAreaRect().height;
           const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
           if (context.isRTL()) {
@@ -4101,9 +4172,9 @@ const createSpineItemManager = ({ context }) => {
   const loadContents = Report.measurePerformance(`loadContents`, 10, (rangeOfIndex) => {
     var _a;
     const [leftIndex, rightIndex] = rangeOfIndex;
-    const numberOfAdjacentSpineItemToPreLoad = context.getSettings().numberOfAdjacentSpineItemToPreLoad;
+    const numberOfAdjacentSpineItemToPreLoad = settings.getSettings().numberOfAdjacentSpineItemToPreLoad;
     const isPrePaginated = ((_a = context.getManifest()) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
-    const isUsingFreeScroll = context.getSettings().computedPageTurnMode === `scrollable`;
+    const isUsingFreeScroll = settings.getSettings().computedPageTurnMode === `scrollable`;
     orderedSpineItemsSubject$.value.forEach((orderedSpineItem, index) => {
       const isBeforeFocusedWithPreload = (
         // we never want to preload anything before on free scroll on flow because it could offset the cursor
@@ -4157,7 +4228,9 @@ const createSpineItemManager = ({ context }) => {
     spineItem.$.loaded$.pipe(
       tap(() => {
         if (spineItem.isUsingVerticalWriting()) {
-          context.setHasVerticalWriting();
+          context.setHasVerticalWriting(true);
+        } else {
+          context.setHasVerticalWriting(false);
         }
       }),
       takeUntil$1(context.$.destroy$)
@@ -4398,9 +4471,10 @@ const createNavigationResolver = ({
   context,
   spineItemManager,
   cfiLocator,
-  locator
+  locator,
+  settings
 }) => {
-  const spineItemNavigator = createNavigationResolver$1({ context });
+  const spineItemNavigator = createNavigationResolver$1({ context, settings });
   const arePositionsDifferent = (a, b) => a.x !== b.x || a.y !== b.y;
   const areNavigationDifferent = (a, b) => arePositionsDifferent(a, b) || !!a.spineItem && !!b.spineItem && a.spineItem !== b.spineItem;
   const wrapPositionWithSafeEdge = Report.measurePerformance(
@@ -4465,7 +4539,7 @@ const createNavigationResolver = ({
     return { x: 0, y: 0 };
   };
   const getNavigationForRightSinglePage = (position) => {
-    const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
     const spineItem = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
     const defaultNavigation = position;
     if (!spineItem) {
@@ -4484,7 +4558,7 @@ const createNavigationResolver = ({
     }
   };
   const getNavigationForLeftSinglePage = (position) => {
-    const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
     const spineItem = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
     const defaultNavigation = { ...position, spineItem };
     if (!spineItem) {
@@ -4508,7 +4582,7 @@ const createNavigationResolver = ({
     if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
       return getAdjustedPositionForSpread(navigation);
     }
-    if (context.shouldDisplaySpread()) {
+    if (context.isUsingSpreadMode()) {
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
         return getAdjustedPositionForSpread(
           wrapPositionWithSafeEdge(
@@ -4522,7 +4596,7 @@ const createNavigationResolver = ({
           )
         );
       }
-      if (context.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+      if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
         return getAdjustedPositionForSpread(navigation);
       }
       const doubleNavigation = getNavigationForRightSinglePage(navigation);
@@ -4536,7 +4610,7 @@ const createNavigationResolver = ({
     if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
       return getAdjustedPositionForSpread(navigation);
     }
-    if (context.shouldDisplaySpread()) {
+    if (context.isUsingSpreadMode()) {
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
         return getAdjustedPositionForSpread(
           wrapPositionWithSafeEdge(
@@ -4544,7 +4618,7 @@ const createNavigationResolver = ({
           )
         );
       }
-      if (context.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+      if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
         return getAdjustedPositionForSpread(navigation);
       }
       const doubleNavigation = getNavigationForLeftSinglePage(navigation);
@@ -4586,7 +4660,7 @@ const createNavigationResolver = ({
     return { x: 0, y: 0 };
   };
   const getMostPredominantNavigationForPosition = (viewportPosition) => {
-    const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
     const triggerPercentage = 0.5;
     const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
     const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.getVisibleAreaRect().height * triggerPercentage;
@@ -4594,7 +4668,7 @@ const createNavigationResolver = ({
     return getNavigationForPosition(midScreenPositionSafePosition);
   };
   const isNavigationGoingForwardFrom = (to, from2) => {
-    const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
     if (pageTurnDirection === `vertical`) {
       return to.y > from2.y;
     }
@@ -4620,9 +4694,10 @@ const createNavigationResolver = ({
 const SCROLL_FINISHED_DEBOUNCE_TIMEOUT = 200;
 const createScrollViewportNavigator = ({
   context,
-  element,
+  element$,
   navigator: navigator2,
   currentNavigationSubject$,
+  settings,
   spine
 }) => {
   let lastScrollWasProgrammaticallyTriggered = false;
@@ -4636,38 +4711,44 @@ const createScrollViewportNavigator = ({
     })
   );
   const adjustReadingOffset = ({ x, y }) => {
-    if (context.getSettings().computedPageTurnMode === `scrollable`) {
+    var _a;
+    if (settings.getSettings().computedPageTurnMode === `scrollable`) {
       lastScrollWasProgrammaticallyTriggered = true;
-      element.scrollTo({ left: x, top: y });
+      (_a = element$.getValue()) == null ? void 0 : _a.scrollTo({ left: x, top: y });
       return true;
     }
     return false;
   };
-  const runOnFreePageTurnModeOnly$ = (source) => context.$.settings$.pipe(
-    map$1(() => context.getSettings().computedPageTurnMode),
+  const runOnFreePageTurnModeOnly$ = (source) => settings.$.settings$.pipe(
+    map$1(({ computedPageTurnMode }) => computedPageTurnMode),
     distinctUntilChanged(),
     switchMap$1((mode) => iif(() => mode === `controlled`, EMPTY, source))
   );
-  const userScroll$ = runOnFreePageTurnModeOnly$(fromEvent(element, `scroll`)).pipe(
-    onlyUserScrollFilter,
-    share(),
-    takeUntil$1(context.$.destroy$)
-  );
+  const userScroll$ = runOnFreePageTurnModeOnly$(
+    element$.pipe(
+      filter(isDefined),
+      switchMap$1((element) => fromEvent(element, `scroll`))
+    )
+  ).pipe(onlyUserScrollFilter, share(), takeUntil$1(context.$.destroy$));
   const getScaledDownPosition = ({ x, y }) => {
-    const spineScaleX = spine.element.getBoundingClientRect().width / spine.element.offsetWidth;
+    var _a, _b;
+    const spineElement = spine.getElement();
+    if (!spineElement)
+      throw new Error("Invalid spine element");
+    const spineScaleX = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
     const scaledDownPosition = {
       x: getNewScaledOffset({
         newScale: 1,
         oldScale: spineScaleX,
-        screenSize: element.clientWidth,
-        pageSize: spine.element.scrollWidth,
+        screenSize: ((_a = element$.getValue()) == null ? void 0 : _a.clientWidth) ?? 0,
+        pageSize: spineElement.scrollWidth,
         scrollOffset: x
       }),
       y: getNewScaledOffset({
         newScale: 1,
         oldScale: spineScaleX,
-        screenSize: element.clientHeight,
-        pageSize: spine.element.scrollHeight,
+        screenSize: ((_b = element$.getValue()) == null ? void 0 : _b.clientHeight) ?? 0,
+        pageSize: spineElement.scrollHeight,
         scrollOffset: y
       })
     };
@@ -4678,13 +4759,17 @@ const createScrollViewportNavigator = ({
     return navigation;
   };
   const getCurrentViewportPosition = () => {
-    return getScaledDownPosition({ x: element.scrollLeft, y: element.scrollTop });
+    var _a, _b;
+    return getScaledDownPosition({ x: ((_a = element$.getValue()) == null ? void 0 : _a.scrollLeft) ?? 0, y: ((_b = element$.getValue()) == null ? void 0 : _b.scrollTop) ?? 0 });
   };
   const navigationOnScroll$ = userScroll$.pipe(
     debounceTime(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
     withLatestFrom(currentNavigationSubject$),
     switchMap$1(() => {
-      const navigation = getNavigationForPosition(getScaledDownPosition({ x: element.scrollLeft, y: element.scrollTop }));
+      var _a, _b;
+      const navigation = getNavigationForPosition(
+        getScaledDownPosition({ x: ((_a = element$.getValue()) == null ? void 0 : _a.scrollLeft) ?? 0, y: ((_b = element$.getValue()) == null ? void 0 : _b.scrollTop) ?? 0 })
+      );
       return of({ position: navigation, animate: false, lastUserExpectedNavigation: void 0 });
     }),
     share()
@@ -4907,7 +4992,8 @@ const createPanViewportNavigator = ({
   spineItemManager,
   locator,
   context,
-  currentNavigationSubject$
+  currentNavigationSubject$,
+  settings
 }) => {
   const navigationTriggerSubject$ = new Subject();
   const stateSubject$ = new BehaviorSubject(`end`);
@@ -4918,11 +5004,11 @@ const createPanViewportNavigator = ({
     `${NAMESPACE$1} moveTo`,
     5,
     (delta, { final, start } = {}) => {
-      if (context.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
         Report.warn(`pan control is not available on free page turn mode`);
         return;
       }
-      const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
       if (start) {
         stateSubject$.next(`start`);
         movingLastDelta = { x: 0, y: 0 };
@@ -4982,7 +5068,7 @@ const createPanViewportNavigator = ({
   );
   const snapNavigation$ = navigationTriggerSubject$.pipe(
     filter((e) => e.type === `snap`),
-    withLatestFrom$1(context.$.settings$),
+    withLatestFrom$1(settings.$.settings$),
     switchMap$1(
       ([
         {
@@ -4990,7 +5076,7 @@ const createPanViewportNavigator = ({
         },
         { navigationSnapThreshold }
       ]) => {
-        const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+        const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
         const movingForward = navigator2.isNavigationGoingForwardFrom(to, from2);
         const triggerPercentage = movingForward ? 1 - navigationSnapThreshold : navigationSnapThreshold;
         const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
@@ -5023,18 +5109,19 @@ const createPanViewportNavigator = ({
   };
 };
 const NAMESPACE = `viewportNavigator`;
+const noopElement = document.createElement("div");
 const createViewportNavigator = ({
   spineItemManager,
   context,
   pagination,
-  parentElement,
+  parentElement$,
   cfiLocator,
   spineLocator,
   hooks$,
-  spine
+  spine,
+  settings
 }) => {
-  const element = createElement(parentElement.ownerDocument, hooks$);
-  element.appendChild(spine.element);
+  const element$ = new BehaviorSubject(noopElement);
   const layoutSubject$ = new Subject();
   let currentViewportPositionMemoUnused;
   const currentNavigationPositionSubject$ = new BehaviorSubject({
@@ -5044,17 +5131,18 @@ const createViewportNavigator = ({
   });
   const navigator2 = createNavigationResolver({
     context,
+    settings,
     spineItemManager,
     cfiLocator,
     locator: spineLocator
   });
   const adjustNavigationSubject$ = new Subject();
-  parentElement.appendChild(element);
   const getCurrentViewportPosition = Report.measurePerformance(`${NAMESPACE} getCurrentViewportPosition`, 1, () => {
-    if (context.getSettings().computedPageTurnMode === `scrollable`) {
+    var _a;
+    if (settings.getSettings().computedPageTurnMode === `scrollable`) {
       return scrollViewportNavigator.getCurrentViewportPosition();
     }
-    const { x, y } = element.getBoundingClientRect();
+    const { x, y } = ((_a = element$.getValue()) == null ? void 0 : _a.getBoundingClientRect()) ?? { x: 0, y: 0 };
     const newValue = {
       // we want to round to first decimal because it's possible to have half pixel
       // however browser engine can also gives back x.yyyy based on their precision
@@ -5068,7 +5156,7 @@ const createViewportNavigator = ({
   });
   const panViewportNavigator = createPanViewportNavigator({
     context,
-    element,
+    settings,
     navigator: navigator2,
     spineItemManager,
     locator: spineLocator,
@@ -5077,15 +5165,15 @@ const createViewportNavigator = ({
   });
   const scrollViewportNavigator = createScrollViewportNavigator({
     context,
-    element,
+    element$,
     navigator: navigator2,
     currentNavigationSubject$: currentNavigationPositionSubject$,
     spine,
-    spineItemManager
+    spineItemManager,
+    settings
   });
   const manualViewportNavigator = createManualViewportNavigator({
     context,
-    element,
     navigator: navigator2,
     currentNavigationSubject$: currentNavigationPositionSubject$,
     spineItemManager,
@@ -5102,6 +5190,9 @@ const createViewportNavigator = ({
     `adjustReadingOffset`,
     2,
     ({ x, y }, hooks) => {
+      const element = element$.getValue();
+      if (!element)
+        throw new Error("Invalid element");
       currentViewportPositionMemoUnused = void 0;
       const isAdjusted = viewportNavigators.reduce((isAdjusted2, navigator22) => {
         return navigator22.adjustReadingOffset({ x, y }) || isAdjusted2;
@@ -5118,10 +5209,10 @@ const createViewportNavigator = ({
     { disable: true }
   );
   const adjustNavigation = (spineItem) => {
-    const lastCfi = pagination.getInfo().beginCfi;
+    const lastCfi = pagination.getPaginationInfo().beginCfi;
     let adjustedSpinePosition = currentNavigationPositionSubject$.value;
     const offsetInSpineItem = 0;
-    if (context.getSettings().computedPageTurnMode === `scrollable`) {
+    if (settings.getSettings().computedPageTurnMode === `scrollable`) {
       adjustedSpinePosition = scrollViewportNavigator.getNavigationForPosition(getCurrentViewportPosition());
     } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-cfi`) {
       adjustedSpinePosition = navigator2.getNavigationForCfi(lastUserExpectedNavigation.data);
@@ -5139,7 +5230,7 @@ const createViewportNavigator = ({
       adjustedSpinePosition = navigator2.getNavigationForCfi(lastCfi);
       Report.log(NAMESPACE, `adjustNavigation`, `use last cfi`);
     } else {
-      const currentPageIndex = pagination.getInfo().beginPageIndex || 0;
+      const currentPageIndex = pagination.getPaginationInfo().beginPageIndexInSpineItem || 0;
       adjustedSpinePosition = navigator2.getNavigationForPage(currentPageIndex, spineItem);
       Report.log(NAMESPACE, `adjustNavigation`, `use guess strategy`, {});
     }
@@ -5166,14 +5257,15 @@ const createViewportNavigator = ({
   layoutSubject$.subscribe(() => {
     currentViewportPositionMemoUnused = void 0;
   });
-  const layoutChangeSettings$ = context.$.settings$.pipe(
+  const layoutChangeSettings$ = settings.$.settings$.pipe(
     mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
     distinctUntilChanged(isShallowEqual),
     skip(1)
   );
   const layout$ = merge(layoutSubject$, layoutChangeSettings$).pipe(
-    tap(() => {
-      if (context.getSettings().computedPageTurnMode === `scrollable`) {
+    withLatestFrom(element$),
+    tap(([, element]) => {
+      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
         element.style.removeProperty(`transform`);
         element.style.removeProperty(`transition`);
         element.style.overflow = `scroll`;
@@ -5229,7 +5321,7 @@ const createViewportNavigator = ({
   );
   const navigationWhichRequireManualAdjust$ = navigation$.pipe(
     filter(({ triggeredBy }) => {
-      if (triggeredBy === `scroll` || context.getSettings().computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
+      if (triggeredBy === `scroll` || settings.getSettings().computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
         return false;
       } else {
         return true;
@@ -5241,7 +5333,7 @@ const createViewportNavigator = ({
     navigationWhichRequireManualAdjust$
   ).pipe(
     map$1(({ animation, position }) => {
-      const shouldAnimate = !(!animation || animation === `turn` && context.getSettings().computedPageTurnAnimation === `none`);
+      const shouldAnimate = !(!animation || animation === `turn` && settings.getSettings().computedPageTurnAnimation === `none`);
       return {
         type: `manualAdjust`,
         shouldAnimate,
@@ -5256,15 +5348,15 @@ const createViewportNavigator = ({
     pairwise(),
     tap(([prevEvent, currentEvent]) => {
       if ((prevEvent == null ? void 0 : prevEvent.type) === `manualAdjust` && (currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`) {
-        element.style.setProperty(`transition`, `none`);
-        element.style.setProperty(`opacity`, `1`);
+        element$.getValue().style.setProperty(`transition`, `none`);
+        element$.getValue().style.setProperty(`opacity`, `1`);
       }
     }),
     switchMap$1(([, currentEvent]) => {
       if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`)
         return EMPTY;
-      const animationDuration = currentEvent.animation === `snap` ? context.getSettings().computedSnapAnimationDuration : context.getSettings().computedPageTurnAnimationDuration;
-      const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : context.getSettings().computedPageTurnAnimation;
+      const animationDuration = currentEvent.animation === `snap` ? settings.getSettings().computedSnapAnimationDuration : settings.getSettings().computedPageTurnAnimationDuration;
+      const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.getSettings().computedPageTurnAnimation;
       return of(currentEvent).pipe(
         /**
          * @important
@@ -5279,15 +5371,15 @@ const createViewportNavigator = ({
           const noAdjustmentNeeded = false;
           if (data.shouldAnimate && !noAdjustmentNeeded) {
             if (pageTurnAnimation === `fade`) {
-              element.style.setProperty(`transition`, `opacity ${animationDuration / 2}ms`);
-              element.style.setProperty(`opacity`, `0`);
+              element$.getValue().style.setProperty(`transition`, `opacity ${animationDuration / 2}ms`);
+              element$.getValue().style.setProperty(`opacity`, `0`);
             } else if (currentEvent.animation === `snap` || pageTurnAnimation === `slide`) {
-              element.style.setProperty(`transition`, `transform ${animationDuration}ms`);
-              element.style.setProperty(`opacity`, `1`);
+              element$.getValue().style.setProperty(`transition`, `transform ${animationDuration}ms`);
+              element$.getValue().style.setProperty(`opacity`, `1`);
             }
           } else {
-            element.style.setProperty(`transition`, `none`);
-            element.style.setProperty(`opacity`, `1`);
+            element$.getValue().style.setProperty(`transition`, `none`);
+            element$.getValue().style.setProperty(`opacity`, `1`);
           }
         }),
         /**
@@ -5308,7 +5400,7 @@ const createViewportNavigator = ({
         tap(([data, hooks]) => {
           if (pageTurnAnimation === `fade`) {
             adjustReadingOffset(data.position, hooks);
-            element.style.setProperty(`opacity`, `1`);
+            element$.getValue().style.setProperty(`opacity`, `1`);
           }
         }),
         currentEvent.shouldAnimate ? delay(animationDuration / 2, animationFrameScheduler) : identity,
@@ -5380,10 +5472,17 @@ const createViewportNavigator = ({
     ),
     share()
   );
+  const parentElementSub = parentElement$.pipe(filter(isDefined), withLatestFrom(spine.element$)).subscribe(([parentElement, spineElement]) => {
+    const element = createElement(parentElement.ownerDocument, hooks$);
+    element.appendChild(spineElement);
+    parentElement.appendChild(element);
+    element$.next(element);
+  });
   const destroy = () => {
     layoutSubject$.complete();
     adjustNavigationSubject$.complete();
     currentNavigationPositionSubject$.complete();
+    parentElementSub.unsubscribe();
     viewportNavigators.forEach((navigator22) => navigator22.destroy());
   };
   return {
@@ -5400,7 +5499,8 @@ const createViewportNavigator = ({
     goToPageOfCurrentChapter: manualViewportNavigator.goToPageOfCurrentChapter,
     moveTo: panViewportNavigator.moveTo,
     getLastUserExpectedNavigation: () => lastUserExpectedNavigation,
-    element,
+    element$,
+    getElement: () => element$.getValue(),
     $: {
       state$,
       navigation$,
@@ -5426,7 +5526,8 @@ const createElement = (doc, hooks$) => {
 const createLocationResolver = ({
   spineItemManager,
   context,
-  spineItemLocator
+  spineItemLocator,
+  settings
 }) => {
   const getSpineItemPositionFromSpinePosition = Report.measurePerformance(
     `getSpineItemPositionFromSpinePosition`,
@@ -5461,7 +5562,7 @@ const createLocationResolver = ({
       const spineItem = spineItemManager.getAll().find((item) => {
         const { left, right, bottom, top } = spineItemManager.getAbsolutePositionOf(item);
         const isWithinXAxis = position.x >= left && position.x < right;
-        if (context.getSettings().computedPageTurnDirection === `horizontal`) {
+        if (settings.getSettings().computedPageTurnDirection === `horizontal`) {
           return isWithinXAxis;
         } else {
           return isWithinXAxis && position.y >= top && position.y < bottom;
@@ -5488,7 +5589,7 @@ const createLocationResolver = ({
     if (itemAtPositionIndex === void 0)
       return void 0;
     let endPosition = position;
-    if (context.shouldDisplaySpread()) {
+    if (context.isUsingSpreadMode()) {
       endPosition = { x: position.x + context.getPageSize().width, y: position.y };
     }
     const endItemIndex = spineItemManager.getSpineItemIndex(getSpineItemFromPosition(endPosition) || spineItemManager.getFocusedSpineItem()) ?? itemAtPositionIndex;
@@ -5609,15 +5710,86 @@ const createCfiLocator = ({
     generateFromRange
   };
 };
+const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+const createSettings = (initialSettings) => {
+  const mergedSettings = {
+    forceSinglePageMode: false,
+    pageTurnAnimation: `none`,
+    computedPageTurnAnimation: `none`,
+    pageTurnDirection: `horizontal`,
+    computedPageTurnDirection: `horizontal`,
+    pageTurnAnimationDuration: void 0,
+    computedPageTurnAnimationDuration: 0,
+    pageTurnMode: `controlled`,
+    computedPageTurnMode: `controlled`,
+    computedSnapAnimationDuration: 300,
+    navigationSnapThreshold: 0.3,
+    numberOfAdjacentSpineItemToPreLoad: 0,
+    ...initialSettings
+  };
+  updateComputedSettings(void 0, mergedSettings, false);
+  const settingsSubject$ = new BehaviorSubject(mergedSettings);
+  const setSettings = (newSettings, options) => {
+    if (Object.keys(newSettings).length === 0)
+      return;
+    const newMergedSettings = { ...settingsSubject$.value, ...newSettings };
+    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
+    settingsSubject$.next(newMergedSettings);
+  };
+  const recompute = (options) => {
+    const newMergedSettings = { ...settingsSubject$.value };
+    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
+    settingsSubject$.next(newMergedSettings);
+  };
+  const destroy = () => {
+    settingsSubject$.complete();
+  };
+  return {
+    getSettings: () => settingsSubject$.value,
+    setSettings,
+    recompute,
+    destroy,
+    $: {
+      settings$: settingsSubject$.asObservable().pipe(distinctUntilChanged(isShallowEqual))
+    }
+  };
+};
+const updateComputedSettings = (newManifest, settings, hasVerticalWriting) => {
+  settings.computedPageTurnDirection = settings.pageTurnDirection;
+  settings.computedPageTurnAnimation = settings.pageTurnAnimation;
+  settings.computedPageTurnMode = `controlled`;
+  if ((newManifest == null ? void 0 : newManifest.renditionFlow) === `scrolled-continuous`) {
+    settings.computedPageTurnMode = `scrollable`;
+    settings.computedPageTurnDirection = `vertical`;
+  } else if (newManifest && settings.pageTurnMode === `scrollable` && (newManifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(newManifest))) {
+    Report.warn(`pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`);
+    settings.computedPageTurnAnimation = `none`;
+    settings.computedPageTurnMode = `controlled`;
+  } else if (settings.pageTurnMode === `scrollable`) {
+    settings.computedPageTurnMode = `scrollable`;
+    settings.computedPageTurnDirection = `vertical`;
+  }
+  if (hasVerticalWriting && settings.computedPageTurnAnimation === `slide`) {
+    Report.warn(
+      `pageTurnAnimation ${settings.computedPageTurnAnimation} incompatible with current book, switching back to default`
+    );
+    settings.computedPageTurnAnimation = `none`;
+  }
+  if (settings.computedPageTurnMode === `scrollable`) {
+    settings.computedPageTurnAnimationDuration = 0;
+    settings.computedPageTurnAnimation = `none`;
+  } else {
+    settings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+  }
+};
 const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
-const createReader = ({ containerElement, hooks: initialHooks, ...settings }) => {
+const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
   const stateSubject$ = new BehaviorSubject({
     supportedPageTurnAnimation: [`fade`, `none`, `slide`],
     supportedPageTurnMode: [`controlled`, `scrollable`],
     supportedPageTurnDirection: [`horizontal`, `vertical`],
     supportedComputedPageTurnDirection: [`horizontal`, `vertical`]
   });
-  const readySubject$ = new Subject();
   const destroy$ = new Subject();
   const selectionSubject$ = new Subject();
   const hooksSubject$ = new BehaviorSubject(initialHooks || []);
@@ -5625,16 +5797,19 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
   const navigationAdjustedSubject = new Subject();
   const currentNavigationPositionSubject$ = new BehaviorSubject({ x: 0, y: 0 });
   const viewportStateSubject = new BehaviorSubject(`free`);
+  const settings = createSettings(inputSettings);
   const context = createContext(settings);
-  const spineItemManager = createSpineItemManager({ context });
+  const spineItemManager = createSpineItemManager({ context, settings });
   const pagination = createPagination({ context, spineItemManager });
-  const element = createWrapperElement(containerElement);
-  const iframeEventBridgeElement = createIframeEventBridgeElement(containerElement);
+  const elementSubject$ = new BehaviorSubject(void 0);
+  const element$ = elementSubject$.pipe(filter(isDefined));
+  const iframeEventBridgeElement$ = new BehaviorSubject(void 0);
   const spineItemLocator = createLocationResolver$1({ context });
   const spineLocator = createLocationResolver({
     context,
     spineItemManager,
-    spineItemLocator
+    spineItemLocator,
+    settings
   });
   const cfiLocator = createCfiLocator({
     spineItemManager,
@@ -5643,9 +5818,10 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
   });
   const navigation$ = navigationSubject.asObservable();
   const spine = createSpine({
-    ownerDocument: element.ownerDocument,
-    iframeEventBridgeElement,
+    element$,
+    iframeEventBridgeElement$,
     context,
+    settings,
     pagination,
     spineItemManager,
     hooks$: hooksSubject$,
@@ -5661,22 +5837,26 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
     context,
     pagination,
     spineItemManager,
-    parentElement: element,
+    parentElement$: elementSubject$,
     cfiLocator,
     spineLocator,
     hooks$: hooksSubject$,
-    spine
+    spine,
+    settings
   });
-  containerElement.appendChild(element);
-  element.appendChild(iframeEventBridgeElement);
   viewportNavigator.$.state$.subscribe(viewportStateSubject);
   viewportNavigator.$.navigation$.subscribe(navigationSubject);
   viewportNavigator.$.navigationAdjustedAfterLayout$.subscribe(navigationAdjustedSubject);
   viewportNavigator.$.currentNavigationPosition$.subscribe(currentNavigationPositionSubject$);
   const layout = () => {
+    var _a;
+    const containerElement = (_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement;
+    const element = elementSubject$.getValue();
+    if (!element || !containerElement)
+      throw new Error("Invalid element");
     const dimensions = {
-      width: containerElement.offsetWidth,
-      height: containerElement.offsetHeight
+      width: containerElement == null ? void 0 : containerElement.offsetWidth,
+      height: containerElement == null ? void 0 : containerElement.offsetHeight
     };
     const margin = 0;
     const marginTop = 0;
@@ -5696,12 +5876,21 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
     });
     viewportNavigator.layout();
   };
-  const load = (manifest, loadOptions = {}) => {
+  const load = (manifest, loadOptions) => {
+    var _a;
     if (context.getManifest()) {
       Report.warn(`loading a new book is not supported yet`);
       return;
     }
     Report.log(`load`, { manifest, loadOptions });
+    const element = createWrapperElement(loadOptions.containerElement);
+    const iframeEventBridgeElement = createIframeEventBridgeElement(loadOptions.containerElement);
+    if (loadOptions.containerElement !== ((_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement)) {
+      elementSubject$.next(element);
+      iframeEventBridgeElement$.next(iframeEventBridgeElement);
+      loadOptions.containerElement.appendChild(element);
+      element.appendChild(iframeEventBridgeElement);
+    }
     context.load(manifest, loadOptions);
     layout();
     if (!loadOptions.cfi) {
@@ -5709,14 +5898,10 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
     } else {
       viewportNavigator.goToCfi(loadOptions.cfi, { animate: false });
     }
-    readySubject$.next();
   };
   const registerHook = (name, fn) => {
     hooksSubject$.next([...hooksSubject$.getValue(), { name, fn }]);
   };
-  const manipulateContainer = (cb) => {
-    cb(element);
-  };
   spine.$.$.pipe(
     tap((event) => {
       if (event.type === `onSelectionChange`) {
@@ -5731,45 +5916,42 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
     }),
     takeUntil$1(context.$.destroy$)
   ).subscribe();
-  merge(context.$.load$, context.$.settings$, context.$.hasVerticalWriting$).pipe(
-    mapTo(void 0),
-    withLatestFrom(context.$.hasVerticalWriting$),
-    map$1(([, hasVerticalWriting]) => {
-      const settings2 = context.getSettings();
+  merge(context.$.state$, settings.$.settings$).pipe(
+    map$1(() => void 0),
+    withLatestFrom(context.$.state$),
+    map$1(([, { hasVerticalWriting }]) => {
       const manifest = context.getManifest();
       return {
         hasVerticalWriting,
         renditionFlow: manifest == null ? void 0 : manifest.renditionFlow,
         renditionLayout: manifest == null ? void 0 : manifest.renditionLayout,
-        computedPageTurnMode: settings2.computedPageTurnMode
+        computedPageTurnMode: settings.getSettings().computedPageTurnMode
       };
     }),
     distinctUntilChanged(isShallowEqual),
     map$1(
-      ({
-        hasVerticalWriting,
-        renditionFlow,
-        renditionLayout,
-        computedPageTurnMode
-      }) => ({
-        ...stateSubject$.value,
-        supportedPageTurnMode: renditionFlow === `scrolled-continuous` ? [`scrollable`] : !context.areAllItemsPrePaginated() ? [`controlled`] : [`controlled`, `scrollable`],
-        supportedPageTurnAnimation: renditionFlow === `scrolled-continuous` || computedPageTurnMode === `scrollable` ? [`none`] : hasVerticalWriting ? [`fade`, `none`] : [`fade`, `none`, `slide`],
-        supportedPageTurnDirection: computedPageTurnMode === `scrollable` ? [`vertical`] : renditionLayout === `reflowable` ? [`horizontal`] : [`horizontal`, `vertical`]
-      })
+      ({ hasVerticalWriting, renditionFlow, renditionLayout, computedPageTurnMode }) => {
+        return {
+          ...stateSubject$.value,
+          supportedPageTurnMode: renditionFlow === `scrolled-continuous` ? [`scrollable`] : !context.areAllItemsPrePaginated() ? [`controlled`] : [`controlled`, `scrollable`],
+          supportedPageTurnAnimation: renditionFlow === `scrolled-continuous` || computedPageTurnMode === `scrollable` ? [`none`] : hasVerticalWriting ? [`fade`, `none`] : [`fade`, `none`, `slide`],
+          supportedPageTurnDirection: computedPageTurnMode === `scrollable` ? [`vertical`] : renditionLayout === `reflowable` ? [`horizontal`] : [`horizontal`, `vertical`]
+        };
+      }
     ),
     takeUntil$1(destroy$)
   ).subscribe(stateSubject$);
   const destroy = () => {
+    var _a, _b;
+    settings.destroy();
     hooksSubject$.next([]);
     hooksSubject$.complete();
     pagination.destroy();
     context.destroy();
     viewportNavigator.destroy();
     spine.destroy();
-    element.remove();
-    iframeEventBridgeElement.remove();
-    readySubject$.complete();
+    (_a = elementSubject$.getValue()) == null ? void 0 : _a.remove();
+    (_b = iframeEventBridgeElement$.getValue()) == null ? void 0 : _b.remove();
     stateSubject$.complete();
     selectionSubject$.complete();
     destroy$.next();
@@ -5782,7 +5964,6 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
     viewportNavigator,
     manipulateSpineItems: spine.manipulateSpineItems,
     manipulateSpineItem: spine.manipulateSpineItem,
-    manipulateContainer,
     moveTo: viewportNavigator.moveTo,
     turnLeft: viewportNavigator.turnLeft,
     turnRight: viewportNavigator.turnRight,
@@ -5807,23 +5988,23 @@ const createReader = ({ containerElement, hooks: initialHooks, ...settings }) =>
     layout,
     load,
     destroy,
-    setSettings: context.setSettings,
-    settings$: context.$.settings$,
-    /**
-     * @important
-     * BehaviorSubject
-     */
-    pagination$: pagination.$.info$,
     spineItems$: spine.$.spineItems$,
+    context$: context.$.state$,
+    pagination,
+    settings: {
+      settings$: settings.$.settings$,
+      getSettings: settings.getSettings,
+      setSettings: (data) => settings.setSettings(data, context.getState())
+    },
     $: {
       state$: stateSubject$.asObservable(),
       /**
-       * Dispatched when the reader has loaded a book and is displayed a book.
+       * Dispatched when the reader has loaded a book and is rendering a book.
        * Using navigation API and getting information about current content will
        * have an effect.
        * It can typically be used to hide a loading indicator.
        */
-      ready$: readySubject$.asObservable(),
+      loadStatus$: context.$.manifest$.pipe(map$1((manifest) => manifest ? "ready" : "idle")),
       /**
        * Dispatched when a change in selection happens
        */
@@ -6026,7 +6207,7 @@ const createResourcesManager = (context) => {
     }),
     takeUntil$1(context.$.destroy$)
   ).subscribe();
-  const onLoad$ = context.$.load$.pipe(
+  const onLoad$ = context.$.manifest$.pipe(
     tap(() => {
       uniqueID = Date.now().toString();
     })
@@ -6178,9 +6359,9 @@ const progressionEnhancer = (next) => (options) => {
       totalProgress = getTotalProgressFromPercentages(estimateBeforeThisItem, currentItemWeight, progressWithinThisItem);
     }
     if (currentSpineIndex === readingOrderLength - 1 && pageIndex === numberOfPages - 1 && totalProgress > 0.99) {
-      return 1;
+      return 100;
     }
-    return totalProgress;
+    return totalProgress * 100;
   };
   const getTotalProgressFromPercentages = (estimateBeforeThisItem, currentItemWeight, progressWithinThisItem) => {
     return estimateBeforeThisItem + currentItemWeight * progressWithinThisItem;
@@ -6188,7 +6369,7 @@ const progressionEnhancer = (next) => (options) => {
   const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
     const { height, width } = currentItem.getElementDimensions();
     const { top, left } = reader.getAbsolutePositionOf(currentItem);
-    if (context.getSettings().computedPageTurnDirection === `vertical`) {
+    if (reader.settings.getSettings().computedPageTurnDirection === `vertical`) {
       return Math.max(0, Math.min(1, (currentPosition.y - top + context.getVisibleAreaRect().height) / height));
     } else {
       return Math.max(0, Math.min(1, (currentPosition.x - left + context.getVisibleAreaRect().width) / width));
@@ -6378,26 +6559,34 @@ const defaultLoadingElementCreate = ({ container, item }) => {
   container.appendChild(detailsElement);
   return container;
 };
+const publicApiEnhancer = (next) => {
+  return (options) => {
+    const reader = next(options);
+    return reader;
+  };
+};
 const createReaderWithEnhancers = (
   //__
-  loadingEnhancer(
-    webkitEnhancer(
-      fontsEnhancer(
-        linksEnhancer(
-          accessibilityEnhancer(
-            resourcesEnhancer(
-              utilsEnhancer(
-                layoutEnhancer(
-                  zoomEnhancer(
-                    mediaEnhancer(
-                      chromeEnhancer(
-                        navigationEnhancer(
-                          themeEnhancer(
-                            hotkeysEnhancer(
-                              paginationEnhancer(
-                                progressionEnhancer(
-                                  // __
-                                  createReader
+  publicApiEnhancer(
+    loadingEnhancer(
+      webkitEnhancer(
+        fontsEnhancer(
+          linksEnhancer(
+            accessibilityEnhancer(
+              resourcesEnhancer(
+                utilsEnhancer(
+                  layoutEnhancer(
+                    zoomEnhancer(
+                      mediaEnhancer(
+                        chromeEnhancer(
+                          navigationEnhancer(
+                            themeEnhancer(
+                              hotkeysEnhancer(
+                                paginationEnhancer(
+                                  progressionEnhancer(
+                                    // __
+                                    createReader
+                                  )
                                 )
                               )
                             )
@@ -6421,4 +6610,4 @@ export {
   groupBy,
   isShallowEqual
 };
-//# sourceMappingURL=prose.js.map
+//# sourceMappingURL=index.js.map