@prose-reader/core 1.40.0 → 1.42.0

package/dist/{prose.umd.cjs → index.umd.cjs}

@@ -2,17 +2,17 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("rxjs"), require("rxjs/operators"), require("@prose-reader/shared")) : typeof define === "function" && define.amd ? define(["exports", "rxjs", "rxjs/operators", "@prose-reader/shared"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.prose = {}, global.rxjs, global.operators, global.shared));
 })(this, function(exports2, rxjs, operators, shared) {
   "use strict";
-  const SHOULD_NOT_LAYOUT$3 = false;
   const chromeEnhancer = (next) => (options) => {
     const reader = next(options);
-    reader.manipulateContainer((container) => {
+    reader.context$.pipe(rxjs.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;
@@ -52,13 +52,16 @@
     }
     return true;
   };
-  const groupBy = (list, getKey) => list.reduce((previous, currentItem) => {
-    const group = getKey(currentItem);
-    if (!previous[group])
-      previous[group] = [];
-    previous[group].push(currentItem);
-    return previous;
-  }, {});
+  const groupBy = (list, getKey) => list.reduce(
+    (previous, currentItem) => {
+      const group = getKey(currentItem);
+      if (!previous[group])
+        previous[group] = [];
+      previous[group].push(currentItem);
+      return previous;
+    },
+    {}
+  );
   const getBase64FromBlob = (data) => {
     const reader = new FileReader();
     return new Promise((resolve) => {
@@ -137,30 +140,35 @@
     );
     newSettings$.subscribe(settings$);
     settings$.pipe(shouldRequireLayout, operators.tap(applyChangeToSpineItem), rxjs.takeUntil(reader.$.destroy$)).subscribe();
-    const settingsMerge$ = rxjs.combineLatest([reader.settings$, settings$]).pipe(
+    const settingsMerge$ = rxjs.combineLatest([reader.settings.settings$, settings$]).pipe(
       rxjs.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) => rxjs.fromEvent(document2, "keyup").pipe(
-      rxjs.withLatestFrom(reader.settings$),
+      rxjs.withLatestFrom(reader.settings.settings$),
       rxjs.map(([e, { pageTurnDirection }]) => {
         if (pageTurnDirection === "horizontal") {
           if (e.key === `ArrowRight`) {
@@ -196,22 +204,30 @@
     ).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(
+      operators.switchMap(({ containerElement }) => {
+        if (!containerElement)
+          return rxjs.NEVER;
+        return new rxjs.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) => rxjs.scheduled(source, rxjs.animationFrameScheduler).pipe(
       operators.tap(() => {
         iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `hidden`);
@@ -225,8 +241,8 @@
       })
     );
     const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(operators.take(1));
-    const pageTurnMode$ = reader.context.$.settings$.pipe(
-      operators.map(() => reader.context.getSettings().computedPageTurnMode),
+    const pageTurnMode$ = reader.settings.settings$.pipe(
+      operators.map(() => reader.settings.getSettings().computedPageTurnMode),
       operators.distinctUntilChanged()
     );
     const handleViewportLock$ = pageTurnMode$.pipe(
@@ -235,19 +251,22 @@
       ),
       operators.takeUntil(reader.$.destroy$)
     );
-    return handleViewportLock$;
+    return rxjs.merge(updateOverlayElement$, handleViewportLock$);
   };
   const mapKeysTo = (keys) => {
     return operators.map((obj) => {
-      return Object.entries(obj).reduce((acc, [key, entry]) => {
-        if (keys.includes(key)) {
-          return {
-            ...acc,
-            [key]: entry
-          };
-        }
-        return acc;
-      }, {});
+      return Object.entries(obj).reduce(
+        (acc, [key, entry]) => {
+          if (keys.includes(key)) {
+            return {
+              ...acc,
+              [key]: entry
+            };
+          }
+          return acc;
+        },
+        {}
+      );
     });
   };
   const fixReflowable = (reader) => {
@@ -268,7 +287,10 @@
       }
     });
   };
-  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);
@@ -283,7 +305,7 @@
           void frame.getBoundingClientRect().left;
           hasRedrawn = true;
         }
-        return SHOULD_NOT_LAYOUT$1;
+        return SHOULD_NOT_LAYOUT;
       });
     });
     reader.registerHook(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
@@ -328,10 +350,17 @@
     fixReflowable(reader);
     let observer;
     if (options.layoutAutoResize === `container`) {
-      observer = new ResizeObserver(() => {
-        reader == null ? void 0 : reader.layout();
+      reader.context$.pipe(
+        operators.map((state) => state.containerElement),
+        operators.filter(isDefined),
+        operators.distinctUntilChanged(),
+        operators.takeUntil(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();
@@ -344,27 +373,32 @@
       }),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
+    const settings$ = rxjs.combineLatest([reader.settings.settings$, settingsSubject$.asObservable()]).pipe(
+      operators.map(([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$: rxjs.combineLatest([reader.settings$, settingsSubject$.asObservable()]).pipe(
-        operators.map(([innerSettings, settings]) => ({
-          ...innerSettings,
-          ...settings
-        }))
-      )
+      settings: {
+        ...reader.settings,
+        setSettings,
+        settings$
+      }
     };
   };
   const ROOT_NAMESPACE = `@prose-reader/core`;
@@ -456,13 +490,15 @@
     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) {
@@ -471,8 +507,8 @@
             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 });
             }
           })
         );
@@ -486,8 +522,7 @@
       }
     };
   };
-  const navigationEnhancer = (next) => (options) => {
-    const reader = next(options);
+  const createNavigator = (reader) => {
     const goToNextSpineItem = () => {
       var _a;
       const focusedSpineItemIndex = reader.getFocusedSpineItemIndex() || 0;
@@ -507,14 +542,19 @@
       }
     };
     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();
         }
@@ -522,15 +562,44 @@
       }
     };
   };
+  const createState = (reader) => {
+    return reader.pagination.paginationInfo$.pipe(
+      rxjs.withLatestFrom(reader.context.$.manifest$, reader.settings.settings$),
+      rxjs.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)
+        };
+      }),
+      rxjs.distinctUntilChanged(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 rxjs.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
     });
@@ -557,12 +626,12 @@
         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
         };
@@ -573,18 +642,19 @@
       },
       { disable: true }
     );
-    const getInfo = () => paginationSubject$.value;
-    const info$ = paginationSubject$.asObservable().pipe(rxjs.distinctUntilChanged(isShallowEqual));
+    const getPaginationInfo = () => paginationSubject$.value;
+    const paginationInfo$ = paginationSubject$.pipe(
+      rxjs.distinctUntilChanged(isShallowEqual),
+      rxjs.filter(({ beginPageIndexInSpineItem }) => beginPageIndexInSpineItem !== void 0)
+    );
     const destroy = () => {
       paginationSubject$.complete();
     };
     return {
       destroy,
       updateBeginAndEnd,
-      getInfo,
-      $: {
-        info$
-      }
+      getPaginationInfo,
+      paginationInfo$
     };
   };
   const getItemOffsetFromPageIndex = (pageWidth, pageIndex, itemWidth) => {
@@ -615,15 +685,10 @@
     };
     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;
@@ -635,15 +700,9 @@
         // 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.
@@ -654,23 +713,21 @@
         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;
       }
@@ -690,7 +747,7 @@
       ),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
-    const innerPaginationExtendedInfo$ = reader.pagination$.pipe(
+    const innerPaginationExtendedInfo$ = reader.pagination.paginationInfo$.pipe(
       operators.map((info) => ({
         ...info,
         ...mapPaginationInfoToExtendedInfo(info)
@@ -699,7 +756,7 @@
     );
     const totalPages$ = reader.$.layout$.pipe(
       operators.debounceTime(10, rxjs.animationFrameScheduler),
-      operators.withLatestFrom(reader.pagination$),
+      operators.withLatestFrom(reader.pagination.paginationInfo$),
       operators.map(() => {
         const numberOfPagesPerItems = getNumberOfPagesPerItems();
         return {
@@ -716,19 +773,25 @@
         numberOfTotalPages: 0
       })
     );
-    const pagination$ = rxjs.combineLatest([innerPaginationExtendedInfo$, totalPages$]).pipe(
+    const paginationInfo$ = rxjs.combineLatest([
+      innerPaginationExtendedInfo$,
+      totalPages$
+    ]).pipe(
       operators.map(([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)
       })),
       operators.shareReplay(1),
       operators.takeUntil(reader.$.destroy$)
     );
     return {
       ...reader,
-      pagination$
+      pagination: {
+        ...reader.pagination,
+        paginationInfo$
+      }
     };
   };
   const buildChapterInfoFromSpineItem = (manifest, item) => {
@@ -849,7 +912,6 @@
       }
     };
   };
-  const SHOULD_NOT_LAYOUT = false;
   const createElementZoomer = (reader) => {
     const isZooming$ = new rxjs.BehaviorSubject(false);
     let imageMagnifierContainer;
@@ -862,7 +924,8 @@
       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;
@@ -873,6 +936,7 @@
           background: black;
           width: 100%;
           height: 100%;
+          user-select: none;
         `;
         const clonedImgElement = imgElement.cloneNode();
         clonedImgElement.src = imgElement.src;
@@ -882,8 +946,7 @@
         clonedImgElement.style.setProperty(`pointer-events`, `none`);
         imageMagnifierContainer.appendChild(clonedImgElement);
         container.appendChild(imageMagnifierContainer);
-        return SHOULD_NOT_LAYOUT;
-      });
+      }
       scale(1.2);
       setCurrentScaleAsBase();
     };
@@ -906,14 +969,14 @@
     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`,
@@ -927,11 +990,8 @@
     };
     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;
@@ -975,7 +1035,10 @@
     };
     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();
@@ -984,23 +1047,27 @@
       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;
@@ -1032,7 +1099,7 @@
     const elementZoomer = createElementZoomer(reader);
     const viewportZoomer = createViewportZoomer(reader);
     const currentZoomerSubject$ = new rxjs.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();
@@ -1098,83 +1165,44 @@
       }
     };
   };
-  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 rxjs.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(operators.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 rxjs.BehaviorSubject(false);
-    const loadSubject$ = new rxjs.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 rxjs.BehaviorSubject({});
+    const manifest$ = stateSubject.pipe(
+      operators.map((state) => state.manifest),
+      operators.filter(isDefined),
+      operators.distinctUntilChanged()
+    );
+    const containerElement$ = stateSubject.pipe(
+      operators.map((state) => state.containerElement),
+      operators.filter(isDefined),
+      operators.distinctUntilChanged()
+    );
+    const hasVerticalWriting$ = stateSubject.pipe(
+      operators.map((state) => state.hasVerticalWriting),
+      operators.filter(isDefined),
+      operators.distinctUntilChanged()
+    );
+    const isUsingSpreadMode$ = stateSubject.pipe(
+      operators.map((state) => state.isUsingSpreadMode),
+      operators.distinctUntilChanged()
+    );
     const visibleAreaRect = {
       width: 0,
       height: 0,
@@ -1184,82 +1212,113 @@
     const marginTop = 0;
     const marginBottom = 0;
     const destroy$ = new rxjs.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(
-      operators.skip(1),
+    const setHasVerticalWriting = (value) => setState({
+      hasVerticalWriting: value
+    });
+    const recomputeSettings$ = rxjs.merge(hasVerticalWriting$, manifest$);
+    recomputeSettings$.pipe(
+      operators.withLatestFrom(hasVerticalWriting$, manifest$),
+      operators.tap(([, hasVerticalWriting, manifest]) => {
+        settings.recompute({ hasVerticalWriting, manifest });
+      }),
+      operators.takeUntil(destroy$)
+    ).subscribe();
+    settings.$.settings$.pipe(
+      operators.map(({ forceSinglePageMode }) => forceSinglePageMode),
       operators.distinctUntilChanged(),
-      operators.tap(() => {
-        settings.recompute({ manifest, hasVerticalWritingSubject: hasVerticalWritingSubject$.value });
+      operators.withLatestFrom(manifest$),
+      operators.tap(([forceSinglePageMode, manifest]) => {
+        setState({
+          isUsingSpreadMode: isUsingSpreadMode({
+            manifest,
+            visibleAreaRect,
+            forceSinglePageMode
+          })
+        });
       }),
       operators.takeUntil(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(operators.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`;
@@ -1376,7 +1435,8 @@
     fetchResource,
     hooks$,
     context,
-    viewportState$
+    viewportState$,
+    settings
   }) => {
     const destroySubject$ = new rxjs.Subject();
     const loadSubject$ = new rxjs.Subject();
@@ -1465,7 +1525,7 @@
                 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);
@@ -1534,7 +1594,8 @@
     fetchResource,
     context,
     hooks$,
-    viewportState$
+    viewportState$,
+    settings
   }) => {
     const destroySubject$ = new rxjs.Subject();
     const {
@@ -1543,7 +1604,7 @@
       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({
@@ -1631,7 +1692,7 @@
         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`);
           }
         }
@@ -1896,9 +1957,12 @@
     `pointermove`,
     `pointerout`,
     `pointerover`,
-    `pointerup`
+    `pointerup`,
+    `touchstart`,
+    `touchend`
   ];
   const mouseEvents = [
+    `click`,
     `mousedown`,
     `mouseup`,
     `mouseenter`,
@@ -1912,9 +1976,10 @@
     item,
     context,
     parentElement,
-    iframeEventBridgeElement,
+    iframeEventBridgeElement$,
     hooks$,
-    viewportState$
+    viewportState$,
+    settings
   }) => {
     var _a;
     const destroySubject$ = new rxjs.Subject();
@@ -1922,14 +1987,15 @@
     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(operators.map((hooks) => [...hooks, ...frameHooks])),
-      viewportState$
+      viewportState$,
+      settings
     });
     containerElement.appendChild(overlayElement);
     parentElement.appendChild(containerElement);
@@ -2054,10 +2120,10 @@
       };
     };
     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);
       };
@@ -2193,7 +2259,7 @@
   `;
     return element;
   };
-  const createFrameHooks = (iframeEventBridgeElement, fingerTracker, selectionTracker) => {
+  const createFrameHooks = (iframeEventBridgeElement$, fingerTracker, selectionTracker) => {
     return [
       {
         name: `item.onLoad`,
@@ -2201,6 +2267,7 @@
           const unregister = passthroughEvents.map((event) => {
             var _a;
             const listener = (e) => {
+              var _a2;
               let convertedEvent = e;
               if (isPointerEvent(e)) {
                 convertedEvent = new PointerEvent(e.type, e);
@@ -2210,7 +2277,7 @@
               }
               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);
@@ -2240,17 +2307,19 @@
     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 = ({
@@ -2269,7 +2338,7 @@
         const cssLink = buildDocumentStyle(
           {
             ...commonSpineItem.getDimensionsForPaginatedContent(),
-            enableTouch: context.getSettings().computedPageTurnMode !== `scrollable`,
+            enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`,
             spreadPosition
           },
           viewportDimensions
@@ -2412,17 +2481,19 @@
     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;
@@ -2461,7 +2532,7 @@
         } 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)
           );
@@ -2686,36 +2757,39 @@
     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)
@@ -3663,11 +3737,12 @@
     };
   };
   const report = Report.namespace(`spine`);
+  const noopElement$1 = document.createElement("div");
   const createSpine = ({
-    ownerDocument,
+    element$,
     context,
     pagination,
-    iframeEventBridgeElement,
+    iframeEventBridgeElement$,
     spineItemManager,
     hooks$,
     spineItemLocator,
@@ -3676,31 +3751,32 @@
     navigation$,
     navigationAdjusted$,
     currentNavigationPosition$,
-    viewportState$
+    viewportState$,
+    settings
   }) => {
     const spineItems$ = new rxjs.Subject();
     const itemsBeforeDestroySubject$ = new rxjs.Subject();
     const subject = new rxjs.Subject();
-    const containerElement = createContainerElement(ownerDocument, hooks$);
+    const containerElement$ = new rxjs.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);
       });
@@ -3719,7 +3795,7 @@
       var _a;
       (_a = spineItemManager.get(id)) == null ? void 0 : _a.manipulateSpineItem(cb);
     };
-    context.$.load$.pipe(operators.tap(reload), operators.takeUntil(context.$.destroy$)).subscribe();
+    context.$.manifest$.pipe(operators.tap(reload), operators.takeUntil(context.$.destroy$)).subscribe();
     const waitForViewportFree$ = viewportState$.pipe(
       operators.filter((v) => v === `free`),
       operators.take(1)
@@ -3734,10 +3810,10 @@
               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,
@@ -3796,16 +3872,10 @@
             selectionTracker$.pipe(
               operators.filter(({ event: event2 }) => event2 === `selectstart`),
               operators.switchMap(
-                (_) => fingerTracker$.pipe(
+                () => fingerTracker$.pipe(
                   operators.filter(({ event: event2 }) => event2 === `fingermove`),
                   operators.debounce(() => rxjs.interval(1e3)),
-                  operators.takeUntil(
-                    fingerTracker$.pipe(
-                      operators.filter(({ event: event2 }) => event2 === `fingerout`),
-                      operators.tap(() => {
-                      })
-                    )
-                  ),
+                  operators.takeUntil(fingerTracker$.pipe(operators.filter(({ event: event2 }) => event2 === `fingerout`))),
                   operators.tap(({ data }) => {
                   })
                 )
@@ -3863,7 +3933,7 @@
                *
                * 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)
               ),
@@ -3875,7 +3945,7 @@
               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)
               ),
@@ -3941,8 +4011,13 @@
       }),
       operators.takeUntil(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,
@@ -3950,13 +4025,14 @@
       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: () => {
@@ -3975,31 +4051,17 @@
       }
     };
   };
-  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);
-  };
-  const getCoverItem = (manifest) => {
-    var _a;
-    const coverItem = (_a = manifest.guide) == null ? void 0 : _a.find((item) => item.type === `cover`);
-    return manifest.spineItems.findIndex((item) => {
-      if (!(coverItem == null ? void 0 : coverItem.href))
-        return false;
-      return item.href.endsWith(coverItem.href);
-    });
+    return element;
   };
   const NAMESPACE$4 = `spineItemManager`;
-  const createSpineItemManager = ({ context }) => {
+  const createSpineItemManager = ({ context, settings }) => {
     const focus$ = new rxjs.Subject();
     const layout$ = new rxjs.Subject();
     let itemLayoutInformation = [];
@@ -4009,14 +4071,13 @@
       const manifest = context.getManifest();
       const newItemLayoutInformation = [];
       const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
-      manifest ? getCoverItem(manifest) : void 0;
       orderedSpineItemsSubject$.value.reduce(
         ({ horizontalOffset, verticalOffset }, item, index) => {
           let minimumWidth = context.getPageSize().width;
           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;
             }
@@ -4042,9 +4103,9 @@
           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()) {
@@ -4112,9 +4173,9 @@
     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
@@ -4168,7 +4229,9 @@
       spineItem.$.loaded$.pipe(
         operators.tap(() => {
           if (spineItem.isUsingVerticalWriting()) {
-            context.setHasVerticalWriting();
+            context.setHasVerticalWriting(true);
+          } else {
+            context.setHasVerticalWriting(false);
           }
         }),
         operators.takeUntil(context.$.destroy$)
@@ -4409,9 +4472,10 @@
     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(
@@ -4476,7 +4540,7 @@
       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) {
@@ -4495,7 +4559,7 @@
       }
     };
     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) {
@@ -4519,7 +4583,7 @@
       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(
@@ -4533,7 +4597,7 @@
             )
           );
         }
-        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);
@@ -4547,7 +4611,7 @@
       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(
@@ -4555,7 +4619,7 @@
             )
           );
         }
-        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);
@@ -4597,7 +4661,7 @@
       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;
@@ -4605,7 +4669,7 @@
       return getNavigationForPosition(midScreenPositionSafePosition);
     };
     const isNavigationGoingForwardFrom = (to, from) => {
-      const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
       if (pageTurnDirection === `vertical`) {
         return to.y > from.y;
       }
@@ -4631,9 +4695,10 @@
   const SCROLL_FINISHED_DEBOUNCE_TIMEOUT = 200;
   const createScrollViewportNavigator = ({
     context,
-    element,
+    element$,
     navigator: navigator2,
     currentNavigationSubject$,
+    settings,
     spine
   }) => {
     let lastScrollWasProgrammaticallyTriggered = false;
@@ -4647,38 +4712,44 @@
       })
     );
     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(
-      operators.map(() => context.getSettings().computedPageTurnMode),
+    const runOnFreePageTurnModeOnly$ = (source) => settings.$.settings$.pipe(
+      operators.map(({ computedPageTurnMode }) => computedPageTurnMode),
       operators.distinctUntilChanged(),
       operators.switchMap((mode) => rxjs.iif(() => mode === `controlled`, rxjs.EMPTY, source))
     );
-    const userScroll$ = runOnFreePageTurnModeOnly$(rxjs.fromEvent(element, `scroll`)).pipe(
-      onlyUserScrollFilter,
-      operators.share(),
-      operators.takeUntil(context.$.destroy$)
-    );
+    const userScroll$ = runOnFreePageTurnModeOnly$(
+      element$.pipe(
+        operators.filter(isDefined),
+        operators.switchMap((element) => rxjs.fromEvent(element, `scroll`))
+      )
+    ).pipe(onlyUserScrollFilter, operators.share(), operators.takeUntil(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
         })
       };
@@ -4689,13 +4760,17 @@
       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(
       operators.debounceTime(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, rxjs.animationFrameScheduler),
       operators.withLatestFrom(currentNavigationSubject$),
       operators.switchMap(() => {
-        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 rxjs.of({ position: navigation, animate: false, lastUserExpectedNavigation: void 0 });
       }),
       operators.share()
@@ -4918,7 +4993,8 @@
     spineItemManager,
     locator,
     context,
-    currentNavigationSubject$
+    currentNavigationSubject$,
+    settings
   }) => {
     const navigationTriggerSubject$ = new rxjs.Subject();
     const stateSubject$ = new rxjs.BehaviorSubject(`end`);
@@ -4929,11 +5005,11 @@
       `${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 };
@@ -4993,7 +5069,7 @@
     );
     const snapNavigation$ = navigationTriggerSubject$.pipe(
       operators.filter((e) => e.type === `snap`),
-      rxjs.withLatestFrom(context.$.settings$),
+      rxjs.withLatestFrom(settings.$.settings$),
       operators.switchMap(
         ([
           {
@@ -5001,7 +5077,7 @@
           },
           { navigationSnapThreshold }
         ]) => {
-          const pageTurnDirection = context.getSettings().computedPageTurnDirection;
+          const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
           const movingForward = navigator2.isNavigationGoingForwardFrom(to, from);
           const triggerPercentage = movingForward ? 1 - navigationSnapThreshold : navigationSnapThreshold;
           const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
@@ -5034,18 +5110,19 @@
     };
   };
   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 rxjs.BehaviorSubject(noopElement);
     const layoutSubject$ = new rxjs.Subject();
     let currentViewportPositionMemoUnused;
     const currentNavigationPositionSubject$ = new rxjs.BehaviorSubject({
@@ -5055,17 +5132,18 @@
     });
     const navigator2 = createNavigationResolver({
       context,
+      settings,
       spineItemManager,
       cfiLocator,
       locator: spineLocator
     });
     const adjustNavigationSubject$ = new rxjs.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
@@ -5079,7 +5157,7 @@
     });
     const panViewportNavigator = createPanViewportNavigator({
       context,
-      element,
+      settings,
       navigator: navigator2,
       spineItemManager,
       locator: spineLocator,
@@ -5088,15 +5166,15 @@
     });
     const scrollViewportNavigator = createScrollViewportNavigator({
       context,
-      element,
+      element$,
       navigator: navigator2,
       currentNavigationSubject$: currentNavigationPositionSubject$,
       spine,
-      spineItemManager
+      spineItemManager,
+      settings
     });
     const manualViewportNavigator = createManualViewportNavigator({
       context,
-      element,
       navigator: navigator2,
       currentNavigationSubject$: currentNavigationPositionSubject$,
       spineItemManager,
@@ -5113,6 +5191,9 @@
       `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;
@@ -5129,10 +5210,10 @@
       { 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);
@@ -5150,7 +5231,7 @@
         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`, {});
       }
@@ -5177,14 +5258,15 @@
     layoutSubject$.subscribe(() => {
       currentViewportPositionMemoUnused = void 0;
     });
-    const layoutChangeSettings$ = context.$.settings$.pipe(
+    const layoutChangeSettings$ = settings.$.settings$.pipe(
       mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
       operators.distinctUntilChanged(isShallowEqual),
       operators.skip(1)
     );
     const layout$ = rxjs.merge(layoutSubject$, layoutChangeSettings$).pipe(
-      operators.tap(() => {
-        if (context.getSettings().computedPageTurnMode === `scrollable`) {
+      operators.withLatestFrom(element$),
+      operators.tap(([, element]) => {
+        if (settings.getSettings().computedPageTurnMode === `scrollable`) {
           element.style.removeProperty(`transform`);
           element.style.removeProperty(`transition`);
           element.style.overflow = `scroll`;
@@ -5240,7 +5322,7 @@
     );
     const navigationWhichRequireManualAdjust$ = navigation$.pipe(
       operators.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;
@@ -5252,7 +5334,7 @@
       navigationWhichRequireManualAdjust$
     ).pipe(
       operators.map(({ animation, position }) => {
-        const shouldAnimate = !(!animation || animation === `turn` && context.getSettings().computedPageTurnAnimation === `none`);
+        const shouldAnimate = !(!animation || animation === `turn` && settings.getSettings().computedPageTurnAnimation === `none`);
         return {
           type: `manualAdjust`,
           shouldAnimate,
@@ -5267,15 +5349,15 @@
       operators.pairwise(),
       operators.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`);
         }
       }),
       operators.switchMap(([, currentEvent]) => {
         if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`)
           return rxjs.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 rxjs.of(currentEvent).pipe(
           /**
            * @important
@@ -5290,15 +5372,15 @@
             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`);
             }
           }),
           /**
@@ -5319,7 +5401,7 @@
           operators.tap(([data, hooks]) => {
             if (pageTurnAnimation === `fade`) {
               adjustReadingOffset(data.position, hooks);
-              element.style.setProperty(`opacity`, `1`);
+              element$.getValue().style.setProperty(`opacity`, `1`);
             }
           }),
           currentEvent.shouldAnimate ? operators.delay(animationDuration / 2, rxjs.animationFrameScheduler) : rxjs.identity,
@@ -5391,10 +5473,17 @@
       ),
       operators.share()
     );
+    const parentElementSub = parentElement$.pipe(operators.filter(isDefined), operators.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 {
@@ -5411,7 +5500,8 @@
       goToPageOfCurrentChapter: manualViewportNavigator.goToPageOfCurrentChapter,
       moveTo: panViewportNavigator.moveTo,
       getLastUserExpectedNavigation: () => lastUserExpectedNavigation,
-      element,
+      element$,
+      getElement: () => element$.getValue(),
       $: {
         state$,
         navigation$,
@@ -5437,7 +5527,8 @@
   const createLocationResolver = ({
     spineItemManager,
     context,
-    spineItemLocator
+    spineItemLocator,
+    settings
   }) => {
     const getSpineItemPositionFromSpinePosition = Report.measurePerformance(
       `getSpineItemPositionFromSpinePosition`,
@@ -5472,7 +5563,7 @@
         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;
@@ -5499,7 +5590,7 @@
       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;
@@ -5620,15 +5711,86 @@
       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 rxjs.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(operators.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 rxjs.BehaviorSubject({
       supportedPageTurnAnimation: [`fade`, `none`, `slide`],
       supportedPageTurnMode: [`controlled`, `scrollable`],
       supportedPageTurnDirection: [`horizontal`, `vertical`],
       supportedComputedPageTurnDirection: [`horizontal`, `vertical`]
     });
-    const readySubject$ = new rxjs.Subject();
     const destroy$ = new rxjs.Subject();
     const selectionSubject$ = new rxjs.Subject();
     const hooksSubject$ = new rxjs.BehaviorSubject(initialHooks || []);
@@ -5636,16 +5798,19 @@
     const navigationAdjustedSubject = new rxjs.Subject();
     const currentNavigationPositionSubject$ = new rxjs.BehaviorSubject({ x: 0, y: 0 });
     const viewportStateSubject = new rxjs.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 rxjs.BehaviorSubject(void 0);
+    const element$ = elementSubject$.pipe(operators.filter(isDefined));
+    const iframeEventBridgeElement$ = new rxjs.BehaviorSubject(void 0);
     const spineItemLocator = createLocationResolver$1({ context });
     const spineLocator = createLocationResolver({
       context,
       spineItemManager,
-      spineItemLocator
+      spineItemLocator,
+      settings
     });
     const cfiLocator = createCfiLocator({
       spineItemManager,
@@ -5654,9 +5819,10 @@
     });
     const navigation$ = navigationSubject.asObservable();
     const spine = createSpine({
-      ownerDocument: element.ownerDocument,
-      iframeEventBridgeElement,
+      element$,
+      iframeEventBridgeElement$,
       context,
+      settings,
       pagination,
       spineItemManager,
       hooks$: hooksSubject$,
@@ -5672,22 +5838,26 @@
       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;
@@ -5707,12 +5877,21 @@
       });
       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) {
@@ -5720,14 +5899,10 @@
       } 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(
       operators.tap((event) => {
         if (event.type === `onSelectionChange`) {
@@ -5742,45 +5917,42 @@
       }),
       operators.takeUntil(context.$.destroy$)
     ).subscribe();
-    rxjs.merge(context.$.load$, context.$.settings$, context.$.hasVerticalWriting$).pipe(
-      operators.mapTo(void 0),
-      operators.withLatestFrom(context.$.hasVerticalWriting$),
-      operators.map(([, hasVerticalWriting]) => {
-        const settings2 = context.getSettings();
+    rxjs.merge(context.$.state$, settings.$.settings$).pipe(
+      operators.map(() => void 0),
+      operators.withLatestFrom(context.$.state$),
+      operators.map(([, { 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
         };
       }),
       operators.distinctUntilChanged(isShallowEqual),
       operators.map(
-        ({
-          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`]
+          };
+        }
       ),
       operators.takeUntil(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();
@@ -5793,7 +5965,6 @@
       viewportNavigator,
       manipulateSpineItems: spine.manipulateSpineItems,
       manipulateSpineItem: spine.manipulateSpineItem,
-      manipulateContainer,
       moveTo: viewportNavigator.moveTo,
       turnLeft: viewportNavigator.turnLeft,
       turnRight: viewportNavigator.turnRight,
@@ -5818,23 +5989,23 @@
       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(operators.map((manifest) => manifest ? "ready" : "idle")),
         /**
          * Dispatched when a change in selection happens
          */
@@ -6037,7 +6208,7 @@
       }),
       operators.takeUntil(context.$.destroy$)
     ).subscribe();
-    const onLoad$ = context.$.load$.pipe(
+    const onLoad$ = context.$.manifest$.pipe(
       operators.tap(() => {
         uniqueID = Date.now().toString();
       })
@@ -6189,9 +6360,9 @@
         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;
@@ -6199,7 +6370,7 @@
     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));
@@ -6389,26 +6560,34 @@
     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
+                                    )
                                   )
                                 )
                               )
@@ -6432,4 +6611,4 @@
   exports2.isShallowEqual = isShallowEqual;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
-//# sourceMappingURL=prose.umd.cjs.map
+//# sourceMappingURL=index.umd.cjs.map