@prose-reader/core 1.56.0 → 1.57.0

package/dist/index.umd.cjs

@@ -4,17 +4,17 @@
   "use strict";
   const chromeEnhancer = (next) => (options) => {
     const reader = next(options);
-    reader.context$.pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
+    reader.context.state$.pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
       if (!containerElement)
         return;
       const onScroll = () => {
-        if (reader.settings.getSettings().computedPageTurnMode === `controlled`) {
+        if (reader.settings.settings.computedPageTurnMode === `controlled`) {
           containerElement.scrollTo(0, 0);
         }
       };
       containerElement.addEventListener(`scroll`, onScroll);
     });
-    reader.registerHook(`item.onLoad`, ({ frame }) => {
+    reader.hookManager.register(`item.onLoad`, ({ frame }) => {
       var _a;
       (_a = frame.contentDocument) == null ? void 0 : _a.body.setAttribute(`tabindex`, `-1`);
     });
@@ -103,7 +103,7 @@
     }
   `;
     const applyChangeToSpineItem = (requireLayout) => {
-      reader.manipulateSpineItems(({ removeStyle, addStyle, item }) => {
+      reader.spine.manipulateSpineItems(({ removeStyle, addStyle, item }) => {
         if (item.renditionLayout !== `pre-paginated`) {
           removeStyle(`prose-reader-fonts`);
           addStyle(`prose-reader-fonts`, getStyle());
@@ -111,11 +111,15 @@
         return requireLayout;
       });
     };
-    reader.registerHook(`item.onLoad`, ({ removeStyle, addStyle, item }) => {
-      if (item.renditionLayout !== `pre-paginated`) {
-        removeStyle(`prose-reader-fonts`);
-        addStyle(`prose-reader-fonts`, getStyle());
-      }
+    reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+      const item = reader.spineItemManager.get(itemId);
+      item == null ? void 0 : item.manipulateSpineItem(({ addStyle, removeStyle }) => {
+        if (item.item.renditionLayout !== `pre-paginated`) {
+          removeStyle(`prose-reader-fonts`);
+          addStyle(`prose-reader-fonts`, getStyle());
+        }
+        return false;
+      });
     });
     const shouldRequireLayout = (source) => source.pipe(
       operators.pairwise(),
@@ -172,25 +176,25 @@
       rxjs.map(([e, { pageTurnDirection }]) => {
         if (pageTurnDirection === "horizontal") {
           if (e.key === `ArrowRight`) {
-            reader.turnRight();
+            reader.viewportNavigator.turnRight();
           }
           if (e.key === `ArrowLeft`) {
-            reader.turnLeft();
+            reader.viewportNavigator.turnLeft();
           }
         }
         if (pageTurnDirection === "vertical") {
           if (e.key === `ArrowDown`) {
-            reader.turnRight();
+            reader.viewportNavigator.turnRight();
           }
           if (e.key === `ArrowUp`) {
-            reader.turnLeft();
+            reader.viewportNavigator.turnLeft();
           }
         }
         return e;
       })
     );
     navigateOnKey(document).pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
-    reader.spineItems$.pipe(
+    reader.spine.$.spineItems$.pipe(
       rxjs.switchMap(
         (spineItems) => rxjs.merge(
           ...spineItems.map(
@@ -206,7 +210,7 @@
   };
   const createMovingSafePan$ = (reader) => {
     let iframeOverlayForAnimationsElement;
-    const updateOverlayElement$ = reader.context$.pipe(
+    const updateOverlayElement$ = reader.context.state$.pipe(
       operators.switchMap(({ containerElement }) => {
         if (!containerElement)
           return rxjs.NEVER;
@@ -233,8 +237,8 @@
         iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `hidden`);
       })
     );
-    const viewportFree$ = reader.$.viewportState$.pipe(operators.filter((data) => data === `free`));
-    const viewportBusy$ = reader.$.viewportState$.pipe(operators.filter((data) => data === `busy`));
+    const viewportFree$ = reader.viewportNavigator.$.state$.pipe(operators.filter((data) => data === `free`));
+    const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(operators.filter((data) => data === `busy`));
     const lockAfterViewportBusy$ = viewportBusy$.pipe(
       operators.tap(() => {
         iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `visible`);
@@ -242,7 +246,7 @@
     );
     const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(operators.take(1));
     const pageTurnMode$ = reader.settings.settings$.pipe(
-      operators.map(() => reader.settings.getSettings().computedPageTurnMode),
+      operators.map(() => reader.settings.settings.computedPageTurnMode),
       operators.distinctUntilChanged()
     );
     const handleViewportLock$ = pageTurnMode$.pipe(
@@ -270,9 +274,9 @@
     });
   };
   const fixReflowable = (reader) => {
-    reader.registerHook(`item.onAfterLayout`, ({ item, blankPagePosition, minimumWidth }) => {
+    reader.hookManager.register(`item.onAfterLayout`, ({ item, blankPagePosition, minimumWidth }) => {
       var _a;
-      const spineItem = reader.getSpineItem(item.id);
+      const spineItem = reader.spineItemManager.get(item.id);
       if (!((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable`))
         return;
       const { viewportDimensions } = (spineItem == null ? void 0 : spineItem.getViewPortInformation()) ?? {};
@@ -298,9 +302,9 @@
       pageHorizontalMargin,
       pageVerticalMargin
     });
-    reader.registerHook(`onViewportOffsetAdjust`, () => {
+    reader.hookManager.register(`onViewportOffsetAdjust`, () => {
       let hasRedrawn = false;
-      reader.manipulateSpineItems(({ frame }) => {
+      reader.spine.manipulateSpineItems(({ frame }) => {
         if (!hasRedrawn && frame) {
           void frame.getBoundingClientRect().left;
           hasRedrawn = true;
@@ -308,7 +312,7 @@
         return SHOULD_NOT_LAYOUT;
       });
     });
-    reader.registerHook(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
+    reader.hookManager.register(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
       var _a, _b;
       const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsSubject$.value;
       const pageSize = reader.context.getPageSize();
@@ -350,7 +354,7 @@
     fixReflowable(reader);
     let observer;
     if (options.layoutAutoResize === `container`) {
-      reader.context$.pipe(
+      reader.context.state$.pipe(
         operators.map((state) => state.containerElement),
         operators.filter(isDefined),
         operators.distinctUntilChanged(),
@@ -503,15 +507,15 @@
         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);
+      const hasExistingSpineItem = (_a = reader.context.manifest) == null ? void 0 : _a.spineItems.some((item) => item.href === hrefWithoutAnchor);
       if (hasExistingSpineItem) {
-        reader.goToUrl(hrefUrl);
+        reader.viewportNavigator.goToUrl(hrefUrl);
         return true;
       }
       return false;
     };
-    reader.registerHook(`item.onLoad`, ({ frame }) => {
-      if (frame.contentDocument) {
+    reader.hookManager.register(`item.onLoad`, ({ frame }) => {
+      if (frame == null ? void 0 : frame.contentDocument) {
         Array.from(frame.contentDocument.querySelectorAll(`a`)).forEach(
           (element) => element.addEventListener(`click`, (e) => {
             if (e.target && `style` in e.target && `ELEMENT_NODE` in e.target) {
@@ -535,27 +539,27 @@
   const createNavigator = (reader) => {
     const goToNextSpineItem = () => {
       var _a;
-      const focusedSpineItemIndex = reader.getFocusedSpineItemIndex() || 0;
-      const { end = focusedSpineItemIndex } = reader.locator.getSpineItemsFromReadingOrderPosition(reader.getCurrentNavigationPosition()) || {};
-      const numberOfSpineItems = ((_a = reader.context.getManifest()) == null ? void 0 : _a.spineItems.length) ?? 0;
+      const focusedSpineItemIndex = reader.spineItemManager.getFocusedSpineItemIndex() || 0;
+      const { end = focusedSpineItemIndex } = reader.spine.locator.getSpineItemsFromReadingOrderPosition(reader.viewportNavigator.getCurrentNavigationPosition()) || {};
+      const numberOfSpineItems = ((_a = reader.context.manifest) == null ? void 0 : _a.spineItems.length) ?? 0;
       const nextItem = end + 1;
       if (nextItem < numberOfSpineItems) {
-        reader.goToSpineItem(nextItem);
+        reader.viewportNavigator.goToSpineItem(nextItem);
       }
     };
     const goToPreviousSpineItem = () => {
-      const focusedSpineItemIndex = reader.getFocusedSpineItemIndex() || 0;
-      const { begin = focusedSpineItemIndex } = reader.locator.getSpineItemsFromReadingOrderPosition(reader.getCurrentNavigationPosition()) || {};
+      const focusedSpineItemIndex = reader.spineItemManager.getFocusedSpineItemIndex() || 0;
+      const { begin = focusedSpineItemIndex } = reader.spine.locator.getSpineItemsFromReadingOrderPosition(reader.viewportNavigator.getCurrentNavigationPosition()) || {};
       const nextItem = begin - 1;
       if (nextItem >= 0) {
-        reader.goToSpineItem(nextItem);
+        reader.viewportNavigator.goToSpineItem(nextItem);
       }
     };
     return {
       goToNextSpineItem,
       goToPreviousSpineItem,
       goToLeftSpineItem: () => {
-        if (reader.settings.getSettings().computedPageTurnDirection === "vertical")
+        if (reader.settings.settings.computedPageTurnDirection === "vertical")
           return;
         if (reader.context.isRTL()) {
           return goToNextSpineItem();
@@ -563,7 +567,7 @@
         return goToPreviousSpineItem();
       },
       goToRightSpineItem: () => {
-        if (reader.settings.getSettings().computedPageTurnDirection === "vertical")
+        if (reader.settings.settings.computedPageTurnDirection === "vertical")
           return;
         if (reader.context.isRTL()) {
           return goToPreviousSpineItem();
@@ -574,7 +578,7 @@
   };
   const createState = (reader) => {
     return reader.pagination.paginationInfo$.pipe(
-      rxjs.withLatestFrom(reader.context.$.manifest$, reader.settings.settings$),
+      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;
@@ -638,8 +642,8 @@
     return buildChaptersInfo(href, ((_a = manifest.nav) == null ? void 0 : _a.toc) ?? [], manifest);
   };
   const getChaptersInfo = (reader) => {
-    const manifest = reader.context.getManifest();
-    const items = reader.getSpineItems();
+    const manifest = reader.context.manifest;
+    const items = reader.spineItemManager.getAll();
     if (!manifest)
       return {};
     return items.reduce(
@@ -653,7 +657,7 @@
     );
   };
   const trackChapterInfo = (reader) => {
-    return reader.spineItems$.pipe(
+    return reader.spine.$.spineItems$.pipe(
       rxjs.startWith([]),
       rxjs.map(() => getChaptersInfo(reader))
     );
@@ -744,7 +748,7 @@
   const getSpineItemNumberOfPages = ({ spineItem, reader }) => {
     const writingMode = spineItem.spineItemFrame.getWritingMode();
     const { width, height } = spineItem.getElementDimensions();
-    const settings = reader.settings.getSettings();
+    const settings = reader.settings.settings;
     if (settings.pageTurnDirection === `vertical` && settings.pageTurnMode === `scrollable`) {
       return 1;
     }
@@ -753,11 +757,11 @@
     }
     return calculateNumberOfPagesForItem(width, reader.context.getPageSize().width);
   };
-  const getNumberOfPagesForAllSpineItems = (reader) => reader.getSpineItems().map((item) => {
+  const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemManager.getAll().map((item) => {
     return getSpineItemNumberOfPages({ spineItem: item, reader });
   }, 0);
   const trackTotalPages = (reader) => {
-    const totalPages$ = reader.$.layout$.pipe(
+    const totalPages$ = reader.spine.$.layout$.pipe(
       rxjs.debounceTime(10, rxjs.animationFrameScheduler),
       rxjs.withLatestFrom(reader.pagination.paginationInfo$),
       rxjs.map(() => {
@@ -780,8 +784,8 @@
   };
   const mapPaginationInfoToExtendedInfo = (reader) => (paginationInfo, chaptersInfo) => {
     const context = reader.context;
-    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 beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.spineItemManager.get(paginationInfo.beginSpineItemIndex) : void 0;
+    const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.spineItemManager.get(paginationInfo.endSpineItemIndex) : void 0;
     return {
       ...paginationInfo,
       beginChapterInfo: beginItem ? chaptersInfo[beginItem.item.id] : void 0,
@@ -810,13 +814,13 @@
         paginationInfo.endSpineItemIndex ?? 0,
         paginationInfo.endNumberOfPagesInSpineItem,
         paginationInfo.endPageIndexInSpineItem || 0,
-        reader.getCurrentViewportPosition(),
+        reader.viewportNavigator.getCurrentViewportPosition(),
         endItem
       ) : 0,
-      isUsingSpread: context.isUsingSpreadMode() ?? false
+      isUsingSpread: context.state.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,
+      // numberOfSpineItems: context.manifest?.readingOrder.length,
     };
   };
   const trackPaginationInfo = (reader) => {
@@ -912,18 +916,22 @@
       };
     };
     const applyChangeToSpineItem = () => {
-      reader.manipulateSpineItems(({ removeStyle, addStyle, container }) => {
+      reader.spine.manipulateSpineItems(({ removeStyle, addStyle, container }) => {
         removeStyle(`prose-reader-theme`);
         addStyle(`prose-reader-theme`, getStyle());
         applyChangeToSpineItemElement({ container });
         return false;
       });
     };
-    reader.registerHook(`item.onLoad`, ({ removeStyle, addStyle }) => {
-      removeStyle(`prose-reader-theme`);
-      addStyle(`prose-reader-theme`, getStyle());
+    reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+      const item = reader.spineItemManager.get(itemId);
+      item == null ? void 0 : item.manipulateSpineItem(({ removeStyle, addStyle }) => {
+        removeStyle(`prose-reader-theme`);
+        addStyle(`prose-reader-theme`, getStyle());
+        return false;
+      });
     });
-    reader.spineItems$.pipe(
+    reader.spine.$.spineItems$.pipe(
       operators.tap((items) => items.map(({ element }) => applyChangeToSpineItemElement({ container: element }))),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
@@ -960,7 +968,7 @@
       imgLastPosition = { x: 0, y: 0 };
       baseScale = 1;
       lastUserScale = 1;
-      const container = reader.context.getState().containerElement;
+      const container = reader.context.state.containerElement;
       if (container) {
         imageMagnifierContainer = container.ownerDocument.createElement(`div`);
         imageMagnifierContainer.style.cssText = `
@@ -1018,6 +1026,7 @@
           `transform`,
           `translate3d(${imgLastPosition.x}px, ${imgLastPosition.y}px, 0px) scale3d(${baseScale}, ${baseScale}, 1)`
         );
+        console.log({ delta, imgLastPosition });
         movingLastDelta = delta;
       }
       if (isLast) {
@@ -1135,7 +1144,7 @@
     const elementZoomer = createElementZoomer(reader);
     const viewportZoomer = createViewportZoomer(reader);
     const currentZoomerSubject$ = new rxjs.BehaviorSubject(void 0);
-    const isUsingScrollableViewport = () => reader.settings.getSettings().computedPageTurnMode === `scrollable`;
+    const isUsingScrollableViewport = () => reader.settings.settings.computedPageTurnMode === `scrollable`;
     const enter = (imgElement) => {
       var _a;
       (_a = currentZoomerSubject$ == null ? void 0 : currentZoomerSubject$.value) == null ? void 0 : _a.exit();
@@ -1218,143 +1227,100 @@
     return isLandscape && ((manifest == null ? void 0 : manifest.renditionSpread) === void 0 || (manifest == null ? void 0 : manifest.renditionSpread) === `auto` || (manifest == null ? void 0 : manifest.renditionSpread) === `landscape` || (manifest == null ? void 0 : manifest.renditionSpread) === `both`);
   };
   const isFullyPrePaginated = (manifest) => (manifest == null ? void 0 : manifest.renditionLayout) === "pre-paginated" || (manifest == null ? void 0 : manifest.spineItems.every((item) => item.renditionLayout === "pre-paginated"));
-  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,
-      x: 0,
-      y: 0
-    };
-    const marginTop = 0;
-    const marginBottom = 0;
-    const destroy$ = new rxjs.Subject();
-    const setState = (newState) => {
-      const newCompleteState = { ...stateSubject.getValue(), ...newState };
-      if (!isShallowEqual(newCompleteState, stateSubject.getValue())) {
-        stateSubject.next(newCompleteState);
-      }
-    };
-    const load = (newManifest, newLoadOptions) => {
-      setState({
-        manifest: newManifest,
-        ...newLoadOptions,
-        isFullyPrePaginated: isFullyPrePaginated(newManifest),
+  const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+  class Context {
+    constructor() {
+      this._stateSubject = new rxjs.BehaviorSubject({
+        marginBottom: 0,
+        marginTop: 0,
+        calculatedInnerMargin: 0,
+        visibleAreaRect: {
+          width: 0,
+          height: 0,
+          x: 0,
+          y: 0
+        }
+      });
+      this.destroy$ = new rxjs.Subject();
+      this.state$ = this._stateSubject.pipe(operators.distinctUntilChanged(isShallowEqual));
+      this.manifest$ = this._stateSubject.pipe(
+        operators.map((state) => state.manifest),
+        operators.filter(isDefined),
+        operators.distinctUntilChanged()
+      );
+      this.containerElement$ = this._stateSubject.pipe(
+        operators.map((state) => state.containerElement),
+        operators.filter(isDefined),
+        operators.distinctUntilChanged()
+      );
+      this.hasVerticalWriting$ = this._stateSubject.pipe(
+        operators.map((state) => state.hasVerticalWriting),
+        operators.filter(isDefined),
+        operators.distinctUntilChanged()
+      );
+      this.isUsingSpreadMode$ = this._stateSubject.pipe(
+        operators.map((state) => state.isUsingSpreadMode),
+        operators.distinctUntilChanged()
+      );
+      this.isRTL = () => {
+        var _a;
+        return ((_a = this._stateSubject.getValue().manifest) == null ? void 0 : _a.readingDirection) === `rtl`;
+      };
+      this.destroy = () => {
+        this._stateSubject.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
+      };
+    }
+    /**
+     * @todo optimize to not run if not necessary
+     */
+    update(newState) {
+      const previousState = this._stateSubject.getValue();
+      const manifest = newState.manifest ?? previousState.manifest;
+      const forceSinglePageMode = newState.forceSinglePageMode ?? previousState.forceSinglePageMode;
+      const visibleAreaRect = newState.visibleAreaRect ?? previousState.visibleAreaRect;
+      const marginTop = newState.marginTop ?? previousState.marginTop;
+      const marginBottom = newState.marginBottom ?? previousState.marginBottom;
+      const newCompleteState = {
+        ...previousState,
+        ...newState,
+        ...newState.visibleAreaRect && {
+          ...newState.visibleAreaRect,
+          height: newState.visibleAreaRect.height - marginTop - marginBottom
+        },
+        ...newState.manifest && {
+          areAllItemsPrePaginated: areAllItemsPrePaginated(manifest),
+          isFullyPrePaginated: isFullyPrePaginated(manifest)
+        },
         isUsingSpreadMode: isUsingSpreadMode({
-          manifest: newManifest,
+          manifest,
           visibleAreaRect,
-          forceSinglePageMode: settings.getSettings().forceSinglePageMode
+          forceSinglePageMode
         })
-      });
-    };
-    const isRTL = () => {
-      var _a;
-      return ((_a = stateSubject.getValue().manifest) == null ? void 0 : _a.readingDirection) === `rtl`;
-    };
-    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.withLatestFrom(manifest$),
-      operators.tap(([forceSinglePageMode, manifest]) => {
-        setState({
-          isUsingSpreadMode: isUsingSpreadMode({
-            manifest,
-            visibleAreaRect,
-            forceSinglePageMode
-          })
-        });
-      }),
-      operators.takeUntil(destroy$)
-    ).subscribe();
-    const destroy = () => {
-      stateSubject.complete();
-      destroy$.next();
-      destroy$.complete();
-    };
-    return {
-      load,
-      isRTL,
-      areAllItemsPrePaginated: () => {
-        var _a;
-        return areAllItemsPrePaginated$1((_a = stateSubject.getValue()) == null ? void 0 : _a.manifest);
-      },
-      destroy,
-      getCalculatedInnerMargin: () => 0,
-      getVisibleAreaRect: () => visibleAreaRect,
-      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;
-      },
-      getPageSize: () => {
-        return {
-          width: stateSubject.getValue().isUsingSpreadMode ? visibleAreaRect.width / 2 : visibleAreaRect.width,
-          height: visibleAreaRect.height
-        };
-      },
-      containerElement$,
-      isUsingSpreadMode$,
-      hasVerticalWriting$,
-      $: {
-        manifest$,
-        destroy$: destroy$.asObservable(),
-        state$: stateSubject.asObservable()
+      };
+      if (!isShallowEqual(newCompleteState, previousState)) {
+        this._stateSubject.next(newCompleteState);
       }
-    };
-  };
-  const areAllItemsPrePaginated$1 = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+    }
+    get state() {
+      return this._stateSubject.getValue();
+    }
+    get manifest() {
+      return this.state.manifest;
+    }
+    get readingDirection() {
+      var _a;
+      return (_a = this.manifest) == null ? void 0 : _a.readingDirection;
+    }
+    getPageSize() {
+      const { isUsingSpreadMode: isUsingSpreadMode2, visibleAreaRect } = this._stateSubject.getValue();
+      return {
+        width: isUsingSpreadMode2 ? visibleAreaRect.width / 2 : visibleAreaRect.width,
+        height: visibleAreaRect.height
+      };
+    }
+  }
   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`;
@@ -1407,11 +1373,6 @@
   `;
     return rxjs.of(frame);
   });
-  const createFrameManipulator = (frameElement) => ({
-    frame: frameElement,
-    removeStyle: createRemoveStyleHelper(frameElement),
-    addStyle: createAddStyleHelper(frameElement)
-  });
   const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
     const image = new Image();
     image.src = data;
@@ -1464,15 +1425,14 @@
     const content = await resourceResponse.text();
     return content;
   };
-  const isOnLoadHook = (hook) => hook.name === `item.onLoad`;
   const createLoader = ({
     item,
     parent,
     fetchResource,
-    hooks$,
     context,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const destroySubject$ = new rxjs.Subject();
     const loadSubject$ = new rxjs.Subject();
@@ -1480,10 +1440,9 @@
     const frameElementSubject$ = new rxjs.BehaviorSubject(void 0);
     const isLoadedSubject$ = new rxjs.BehaviorSubject(false);
     const isReadySubject$ = new rxjs.BehaviorSubject(false);
-    let onLoadHookReturns = [];
     let computedStyleAfterLoad;
     const makeItHot = (source$) => {
-      source$.pipe(operators.takeUntil(context.$.destroy$)).subscribe();
+      source$.pipe(operators.takeUntil(context.destroy$)).subscribe();
       return source$;
     };
     const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
@@ -1497,14 +1456,7 @@
       operators.withLatestFrom(frameElementSubject$),
       operators.filter(([_, frame]) => !!frame),
       operators.map(([, frame]) => {
-        onLoadHookReturns.forEach((fn) => {
-          if (fn && `unsubscribe` in fn) {
-            fn.unsubscribe();
-          } else if (fn) {
-            fn();
-          }
-        });
-        onLoadHookReturns = [];
+        hookManager.destroy(`item.onLoad`, item.id);
         frame == null ? void 0 : frame.remove();
         frameElementSubject$.next(void 0);
       }),
@@ -1549,8 +1501,7 @@
               return rxjs.EMPTY;
             return rxjs.fromEvent(frame, `load`).pipe(
               operators.take(1),
-              operators.withLatestFrom(hooks$),
-              operators.mergeMap(([_, hooks]) => {
+              operators.mergeMap(() => {
                 var _a, _b;
                 const body = (_a = frame.contentDocument) == null ? void 0 : _a.body;
                 if (!body) {
@@ -1561,21 +1512,13 @@
                 if ((frame == null ? void 0 : frame.contentDocument) && body) {
                   computedStyleAfterLoad = (_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.getComputedStyle(body);
                 }
-                if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
+                if (settings.settings.computedPageTurnMode !== `scrollable`) {
                   frame.setAttribute(`tab-index`, `0`);
                 }
-                const manipulableFrame = createFrameManipulator(frame);
-                onLoadHookReturns = hooks.filter(isOnLoadHook).map((hook) => {
-                  const hookReturn = hook.fn({
-                    ...manipulableFrame,
-                    item
-                  });
-                  if (hookReturn && `subscribe` in hookReturn) {
-                    return hookReturn.subscribe();
-                  }
-                  return hookReturn;
-                });
-                return rxjs.of(frame);
+                return hookManager.execute(`item.onLoad`, item.id, {
+                  itemId: item.id,
+                  frame
+                }).pipe(operators.map(() => frame));
               })
             );
           }),
@@ -1624,14 +1567,19 @@
       }
     };
   };
+  const createFrameManipulator = (frameElement) => ({
+    frame: frameElement,
+    removeStyle: createRemoveStyleHelper(frameElement),
+    addStyle: createAddStyleHelper(frameElement)
+  });
   const createFrameItem = ({
     item,
     parent,
     fetchResource,
     context,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const destroySubject$ = new rxjs.Subject();
     const {
@@ -1640,7 +1588,7 @@
       unload,
       destroy: loaderDestroy,
       getComputedStyleAfterLoad
-    } = createLoader({ context, hooks$, item, parent, fetchResource, viewportState$, settings });
+    } = createLoader({ context, hookManager, item, parent, fetchResource, viewportState$, settings });
     let isLoadedSync = false;
     let isReadySync = false;
     isLoaded$.subscribe({
@@ -1728,7 +1676,7 @@
         if (frame) {
           frame.style.width = `${size.width}px`;
           frame.style.height = `${size.height}px`;
-          if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
+          if (settings.settings.computedPageTurnMode !== `scrollable`) {
             frame.setAttribute(`tab-index`, `0`);
           }
         }
@@ -1816,220 +1764,46 @@
       });
       (_a = frameToTrack.contentDocument) == null ? void 0 : _a.addEventListener(`selectionchange`, () => {
         var _a2;
-        subject.next({ event: `selectionchange`, data: ((_a2 = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a2.getSelection()) || null });
-      });
-      (_b = frameToTrack.contentWindow) == null ? void 0 : _b.addEventListener(`selectstart`, () => {
-        isSelecting = true;
-      });
-    };
-    const destroy = () => {
-    };
-    return {
-      track,
-      destroy,
-      isSelecting: () => isSelecting,
-      getSelection: () => {
-        var _a;
-        const selection = (_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.getSelection();
-        if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`)
-          return void 0;
-        return selection;
-      },
-      $: subject.asObservable()
-    };
-  };
-  const isHtmlElement = (element) => {
-    return typeof element === `object` && !!element && `nodeType` in element && (element == null ? void 0 : element.nodeType) === Node.ELEMENT_NODE && `innerText` in element;
-  };
-  function createRangeOrCaretFromPoint(doc, startX, startY) {
-    if (`caretPositionFromPoint` in doc) {
-      return doc.caretPositionFromPoint(startX, startY);
-    } else if (typeof doc.caretRangeFromPoint !== `undefined`) {
-      return doc.caretRangeFromPoint(startX, startY);
-    }
-  }
-  const getFirstVisibleNodeForViewport = Report.measurePerformance(
-    `getFirstVisibleNodeForViewport`,
-    1,
-    (documentOrElement, viewport) => {
-      const element = `body` in documentOrElement ? getFirstVisibleElementForViewport(documentOrElement.body, viewport) : getFirstVisibleElementForViewport(documentOrElement, viewport);
-      const ownerDocument = `createRange` in documentOrElement ? documentOrElement : documentOrElement.ownerDocument;
-      if (element) {
-        let lastValidRange;
-        let lastValidOffset = 0;
-        const range = ownerDocument.createRange();
-        Array.from(element.childNodes).some((childNode) => {
-          range.selectNodeContents(childNode);
-          const rects = range.getClientRects();
-          const visibleRect = getFirstVisibleDOMRect(rects, viewport);
-          if (visibleRect) {
-            lastValidRange = range.cloneRange();
-            const rangeOrCaret = createRangeOrCaretFromPoint(ownerDocument, Math.ceil(visibleRect.left), Math.ceil(visibleRect.top));
-            if (rangeOrCaret && `startContainer` in rangeOrCaret && rangeOrCaret.startContainer === lastValidRange.startContainer) {
-              lastValidOffset = rangeOrCaret.startOffset;
-            }
-            if (rangeOrCaret && `offsetNode` in rangeOrCaret && rangeOrCaret.offsetNode === lastValidRange.startContainer) {
-              lastValidOffset = rangeOrCaret.offset;
-            }
-            return true;
-          }
-          return false;
-        });
-        if (lastValidRange) {
-          return { node: lastValidRange.startContainer, offset: lastValidOffset };
-        }
-        return { node: element, offset: 0 };
-      }
-      return void 0;
-    }
-  );
-  const getFirstVisibleElementForViewport = (element, viewport) => {
-    let lastValidElement;
-    const positionFromViewport = getElementOrNodePositionFromViewPort(element.getBoundingClientRect(), viewport);
-    if (positionFromViewport !== `before` && positionFromViewport !== `after`) {
-      lastValidElement = element;
-    }
-    Array.from(element.children).some((child) => {
-      const childInViewPort = getFirstVisibleElementForViewport(child, viewport);
-      if (childInViewPort) {
-        lastValidElement = childInViewPort;
-        return true;
-      }
-      return false;
-    });
-    return lastValidElement;
-  };
-  function getElementOrNodePositionFromViewPort(domRect, { left, right }) {
-    if (domRect.left <= left && domRect.right <= left)
-      return `before`;
-    if (domRect.left <= left && domRect.right > left && domRect.right <= right)
-      return `partially-before`;
-    if (domRect.left <= right && domRect.right > right)
-      return `partially-after`;
-    if (domRect.left > right)
-      return `after`;
-    return `within`;
-  }
-  function getFirstVisibleDOMRect(domRect, viewport) {
-    return Array.from(domRect).find((domRect2) => {
-      const position = getElementOrNodePositionFromViewPort(domRect2, viewport);
-      if (position !== `before` && position !== `after`) {
-        return true;
-      }
-      return false;
-    });
-  }
-  const getRangeFromNode = (node, offset) => {
-    var _a;
-    if (node.nodeType !== Node.CDATA_SECTION_NODE && node.nodeType !== Node.DOCUMENT_TYPE_NODE) {
-      const range = (_a = node.ownerDocument) == null ? void 0 : _a.createRange();
-      range == null ? void 0 : range.selectNodeContents(node);
-      try {
-        if (offset <= ((range == null ? void 0 : range.endOffset) || 0)) {
-          range == null ? void 0 : range.setStart(node, offset || 0);
-        }
-      } catch (e) {
-        Report.error(e);
-      }
-      return range;
-    }
-    return void 0;
-  };
-  const isPointerEvent = (event) => {
-    var _a, _b, _c, _d, _e;
-    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
-      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
-      if (eventView.PointerEvent) {
-        return event instanceof eventView.PointerEvent;
-      }
-    }
-    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
-      const eventView = event == null ? void 0 : event.view;
-      if (eventView.PointerEvent) {
-        return event instanceof eventView.PointerEvent;
-      }
-    }
-    return false;
-  };
-  const isMouseEvent = (event) => {
-    var _a, _b, _c, _d, _e;
-    if (isPointerEvent(event))
-      return false;
-    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
-      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
-      if (eventView.MouseEvent) {
-        return event instanceof eventView.MouseEvent;
-      }
-    }
-    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
-      const eventView = event == null ? void 0 : event.view;
-      if (eventView.MouseEvent) {
-        return event instanceof eventView.MouseEvent;
-      }
-    }
-    return false;
-  };
-  const isTouchEvent = (event) => {
-    var _a, _b, _c, _d, _e;
-    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
-      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
-      if (eventView.TouchEvent) {
-        return event instanceof eventView.TouchEvent;
-      }
-    }
-    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
-      const eventView = event == null ? void 0 : event.view;
-      if (eventView.TouchEvent) {
-        return event instanceof eventView.TouchEvent;
-      }
-    }
-    return false;
-  };
-  const pointerEvents = [
-    `pointercancel`,
-    `pointerdown`,
-    `pointerenter`,
-    `pointerleave`,
-    `pointermove`,
-    `pointerout`,
-    `pointerover`,
-    `pointerup`,
-    `touchstart`,
-    `touchend`
-  ];
-  const mouseEvents = [
-    `click`,
-    `mousedown`,
-    `mouseup`,
-    `mouseenter`,
-    `mouseleave`,
-    `mousemove`,
-    `mouseout`,
-    `mouseover`
-  ];
-  const passthroughEvents = [...pointerEvents, ...mouseEvents];
+        subject.next({ event: `selectionchange`, data: ((_a2 = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a2.getSelection()) || null });
+      });
+      (_b = frameToTrack.contentWindow) == null ? void 0 : _b.addEventListener(`selectstart`, () => {
+        isSelecting = true;
+      });
+    };
+    const destroy = () => {
+    };
+    return {
+      track,
+      destroy,
+      isSelecting: () => isSelecting,
+      getSelection: () => {
+        var _a;
+        const selection = (_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.getSelection();
+        if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`)
+          return void 0;
+        return selection;
+      },
+      $: subject.asObservable()
+    };
+  };
   const createCommonSpineItem = ({
     item,
     context,
     parentElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
-    var _a;
     const destroySubject$ = new rxjs.Subject();
-    const containerElement = createContainerElement$1(parentElement, item, hooks$);
+    const containerElement = createContainerElement$1(parentElement, item, hookManager);
     const overlayElement = createOverlayElement(parentElement, item);
     const fingerTracker = createFingerTracker();
     const selectionTracker = createSelectionTracker();
-    const frameHooks = createFrameHooks(iframeEventBridgeElement$, fingerTracker, selectionTracker);
     const spineItemFrame = createFrameItem({
       parent: containerElement,
       item,
       context,
-      fetchResource: (_a = context.getState()) == null ? void 0 : _a.fetchResource,
-      hooks$: hooks$.asObservable().pipe(operators.map((hooks) => [...hooks, ...frameHooks])),
+      hookManager,
       viewportState$,
       settings
     });
@@ -2052,12 +1826,12 @@
       return memoizedElementDimensions;
     };
     const isImageType = () => {
-      var _a2;
-      return !!((_a2 = item.mediaType) == null ? void 0 : _a2.startsWith(`image/`));
+      var _a;
+      return !!((_a = item.mediaType) == null ? void 0 : _a.startsWith(`image/`));
     };
     const injectStyle = (cssText) => {
-      var _a2, _b;
-      (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.removeStyle(`prose-reader-css`);
+      var _a, _b;
+      (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-reader-css`);
       (_b = spineItemFrame.getManipulableFrame()) == null ? void 0 : _b.addStyle(`prose-reader-css`, cssText);
     };
     const adjustPositionOfElement = ({ right, left, top }) => {
@@ -2078,10 +1852,10 @@
       }
     };
     const getViewPortInformation = () => {
-      var _a2;
+      var _a;
       const { width: pageWidth, height: pageHeight } = context.getPageSize();
       const viewportDimensions = spineItemFrame.getViewportDimensions();
-      const frameElement = (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.frame;
+      const frameElement = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
       if (containerElement && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow) && viewportDimensions) {
         const computedWidthScale = pageWidth / viewportDimensions.width;
         const computedScale = Math.min(computedWidthScale, pageHeight / viewportDimensions.height);
@@ -2091,8 +1865,8 @@
     const loadContent = () => spineItemFrame.load();
     const unloadContent = () => spineItemFrame.unload();
     const getBoundingRectOfElementFromSelector = (selector) => {
-      var _a2, _b, _c, _d, _e;
-      const frame = (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.frame;
+      var _a, _b, _c, _d, _e;
+      const frame = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
       if (frame && selector) {
         if (selector.startsWith(`#`)) {
           return (_c = (_b = frame.contentDocument) == null ? void 0 : _b.getElementById(selector.replace(`#`, ``))) == null ? void 0 : _c.getBoundingClientRect();
@@ -2137,16 +1911,12 @@
     }) => {
       containerElement.style.width = `${width}px`;
       containerElement.style.height = `${height}px`;
-      hooks$.getValue().forEach((hook) => {
-        if (hook.name === `item.onAfterLayout`) {
-          hook.fn({ blankPagePosition, item, minimumWidth });
-        }
-      });
+      hookManager.execute(`item.onAfterLayout`, void 0, { blankPagePosition, item, minimumWidth });
       setLayoutDirty();
     };
     const translateFramePositionIntoPage = (position) => {
-      var _a2, _b;
-      const { left = 0, top = 0 } = ((_a2 = spineItemFrame.getFrameElement()) == null ? void 0 : _a2.getBoundingClientRect()) || {};
+      var _a, _b;
+      const { left = 0, top = 0 } = ((_a = spineItemFrame.getFrameElement()) == null ? void 0 : _a.getBoundingClientRect()) || {};
       const computedScale = ((_b = getViewPortInformation()) == null ? void 0 : _b.computedScale) ?? 1;
       const adjustedX = position.clientX * computedScale + left;
       const adjustedY = position.clientY * computedScale + top;
@@ -2156,20 +1926,14 @@
       };
     };
     const getResource = async () => {
-      const fetchResource = context.getState().fetchResource;
+      const fetchResource = settings.settings.fetchResource;
       const lastFetch = (_) => {
         if (fetchResource) {
           return fetchResource(item);
         }
         return fetch(item.href);
       };
-      const finalFetch = hooks$.getValue().reduce((acc, hook) => {
-        if (hook.name === `item.onGetResource`) {
-          return hook.fn(acc);
-        }
-        return acc;
-      }, lastFetch);
-      return await finalFetch(item);
+      return await lastFetch();
     };
     const manipulateSpineItem = (cb) => {
       const manipulableFrame = spineItemFrame.getManipulableFrame();
@@ -2192,16 +1956,12 @@
         overlayElement
       });
     };
-    const executeOnLayoutBeforeMeasurementHook = (options) => hooks$.getValue().forEach((hook) => {
-      if (hook.name === `item.onLayoutBeforeMeasurement`) {
-        hook.fn({
-          frame: spineItemFrame,
-          container: containerElement,
-          item,
-          isImageType,
-          ...options
-        });
-      }
+    const executeOnLayoutBeforeMeasurementHook = (options) => hookManager.execute("item.onLayoutBeforeMeasurement", void 0, {
+      frame: spineItemFrame,
+      container: containerElement,
+      item,
+      isImageType,
+      ...options
     });
     const contentLayout$ = spineItemFrame.$.contentLayoutChange$.pipe(
       operators.withLatestFrom(spineItemFrame.$.isReady$),
@@ -2240,8 +2000,8 @@
         destroySubject$.complete();
       },
       isUsingVerticalWriting: () => {
-        var _a2;
-        return (_a2 = spineItemFrame.getWritingMode()) == null ? void 0 : _a2.startsWith(`vertical`);
+        var _a;
+        return (_a = spineItemFrame.getWritingMode()) == null ? void 0 : _a.startsWith(`vertical`);
       },
       /**
        * @important
@@ -2252,7 +2012,7 @@
        * be confined to a single page.
        */
       getReadingDirection: () => {
-        return spineItemFrame.getReadingDirection() || context.getReadingDirection();
+        return spineItemFrame.getReadingDirection() || context.readingDirection;
       },
       manipulateSpineItem,
       executeOnLayoutBeforeMeasurementHook,
@@ -2267,7 +2027,7 @@
       }
     };
   };
-  const createContainerElement$1 = (containerElement, item, hooks$) => {
+  const createContainerElement$1 = (containerElement, item, hookManager) => {
     const element = containerElement.ownerDocument.createElement(`div`);
     element.classList.add(`spineItem`);
     element.classList.add(`spineItem-${item.renditionLayout}`);
@@ -2275,12 +2035,8 @@
     position: absolute;
     overflow: hidden;
   `;
-    return hooks$.getValue().reduce((element2, hook) => {
-      if (hook.name === `item.onBeforeContainerCreated`) {
-        return hook.fn(element2);
-      }
-      return element2;
-    }, element);
+    hookManager.execute("item.onBeforeContainerCreated", void 0, { element });
+    return element;
   };
   const createOverlayElement = (containerElement, item) => {
     const element = containerElement.ownerDocument.createElement(`div`);
@@ -2295,42 +2051,6 @@
   `;
     return element;
   };
-  const createFrameHooks = (iframeEventBridgeElement$, fingerTracker, selectionTracker) => {
-    return [
-      {
-        name: `item.onLoad`,
-        fn: ({ frame }) => {
-          const unregister = passthroughEvents.map((event) => {
-            var _a;
-            const listener = (e) => {
-              var _a2;
-              let convertedEvent = e;
-              if (isPointerEvent(e)) {
-                convertedEvent = new PointerEvent(e.type, e);
-              }
-              if (isMouseEvent(e)) {
-                convertedEvent = new MouseEvent(e.type, e);
-              }
-              if (convertedEvent !== e) {
-                attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
-                (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
-              }
-            };
-            (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
-            return () => {
-              var _a2;
-              (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(event, listener);
-            };
-          });
-          selectionTracker.track(frame);
-          fingerTracker.track(frame);
-          return () => {
-            unregister.forEach((cb) => cb());
-          };
-        }
-      }
-    ];
-  };
   const getStyleForViewportDocument = () => {
     return `
     body {
@@ -2343,19 +2063,17 @@
     item,
     context,
     containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const commonSpineItem = createCommonSpineItem({
       context,
       item,
       parentElement: containerElement,
-      iframeEventBridgeElement$,
-      hooks$,
       viewportState$,
-      settings
+      settings,
+      hookManager
     });
     const spineItemFrame = commonSpineItem.spineItemFrame;
     const layout = ({
@@ -2366,15 +2084,15 @@
       var _a;
       const { width: pageWidth, height: pageHeight } = context.getPageSize();
       const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-      const visibleArea = context.getVisibleAreaRect();
+      const visibleArea = context.state.visibleAreaRect;
       const frameElement = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
       if ((spineItemFrame == null ? void 0 : spineItemFrame.getIsLoaded()) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
         const contentWidth = pageWidth;
-        const contentHeight = visibleArea.height + context.getCalculatedInnerMargin();
+        const contentHeight = visibleArea.height + context.state.calculatedInnerMargin;
         const cssLink = buildDocumentStyle(
           {
             ...commonSpineItem.getDimensionsForPaginatedContent(),
-            enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`,
+            enableTouch: settings.settings.computedPageTurnMode !== `scrollable`,
             spreadPosition
           },
           viewportDimensions
@@ -2517,19 +2235,17 @@
     item,
     context,
     containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const commonSpineItem = createCommonSpineItem({
       context,
       item,
       parentElement: containerElement,
-      iframeEventBridgeElement$,
-      hooks$,
       viewportState$,
-      settings
+      settings,
+      hookManager
     });
     const spineItemFrame = commonSpineItem.spineItemFrame;
     let latestContentHeightWhenLoaded;
@@ -2542,12 +2258,12 @@
       (_b = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame) == null ? void 0 : _b.style.setProperty(`width`, `${pageWidth}px`);
       (_d = (_c = spineItemFrame.getManipulableFrame()) == null ? void 0 : _c.frame) == null ? void 0 : _d.style.setProperty(`height`, `${pageHeight}px`);
       const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-      const visibleArea = context.getVisibleAreaRect();
+      const visibleArea = context.state.visibleAreaRect;
       const frameElement = (_e = spineItemFrame.getManipulableFrame()) == null ? void 0 : _e.frame;
-      const isGloballyPrePaginated = ((_f = context.getManifest()) == null ? void 0 : _f.renditionLayout) === `pre-paginated`;
+      const isGloballyPrePaginated = ((_f = context.manifest) == null ? void 0 : _f.renditionLayout) === `pre-paginated`;
       if ((spineItemFrame == null ? void 0 : spineItemFrame.getIsLoaded()) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
         let contentWidth = pageWidth;
-        let contentHeight = visibleArea.height + context.getCalculatedInnerMargin();
+        let contentHeight = visibleArea.height + context.state.calculatedInnerMargin;
         frameElement == null ? void 0 : frameElement.style.setProperty(`visibility`, `visible`);
         frameElement == null ? void 0 : frameElement.style.setProperty(`opacity`, `1`);
         if (viewportDimensions) {
@@ -2567,8 +2283,8 @@
           frameElement == null ? void 0 : frameElement.style.setProperty(`transform-origin`, `center center`);
         } else {
           const frameStyle = commonSpineItem.isImageType() ? buildStyleForReflowableImageOnly({
-            isScrollable: ((_g = context.getManifest()) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
-            enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`
+            isScrollable: ((_g = context.manifest) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
+            enableTouch: settings.settings.computedPageTurnMode !== `scrollable`
           }) : buildStyleWithMultiColumn(
             commonSpineItem.getDimensionsForReflowableContent(spineItemFrame.isUsingVerticalWriting(), minimumWidth)
           );
@@ -2581,7 +2297,7 @@
               width: minimumWidth,
               height: contentHeight
             });
-          } else if (((_h = context.getManifest()) == null ? void 0 : _h.renditionFlow) === `scrolled-continuous`) {
+          } else if (((_h = context.manifest) == null ? void 0 : _h.renditionFlow) === `scrolled-continuous`) {
             contentHeight = frameElement.contentDocument.documentElement.scrollHeight;
             latestContentHeightWhenLoaded = contentHeight;
             spineItemFrame.staticLayout({
@@ -2793,91 +2509,29 @@
     item,
     context,
     containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     if (item.renditionLayout === `pre-paginated`) {
       return createPrePaginatedSpineItem({
         item,
         context,
         containerElement,
-        iframeEventBridgeElement$,
-        hooks$,
         viewportState$,
-        settings
+        settings,
+        hookManager
       });
     }
     return createReflowableSpineItem({
       item,
       context,
       containerElement,
-      iframeEventBridgeElement$,
-      hooks$,
       viewportState$,
-      settings
+      settings,
+      hookManager
     });
   };
-  const createEventsHelper = ({
-    iframeEventBridgeElement$,
-    locator
-  }) => {
-    const normalizeEventForViewport = (event) => {
-      var _a;
-      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)
-        return event;
-      const spineItem = locator.getSpineItemFromIframe(originalFrame);
-      if (!spineItem)
-        return event;
-      if (isPointerEvent(event)) {
-        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-        const newEvent = new PointerEvent(event.type, {
-          ...event,
-          pointerId: event.pointerId,
-          clientX,
-          clientY
-        });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-        return newEvent;
-      }
-      if (isMouseEvent(event)) {
-        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-        const newEvent = new MouseEvent(event.type, {
-          ...event,
-          clientX,
-          clientY
-        });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-        return newEvent;
-      }
-      if (isTouchEvent(event)) {
-        const touches = Array.from(event.touches).map((touch) => {
-          const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
-          return new Touch({
-            identifier: touch.identifier,
-            target: touch.target,
-            clientX,
-            clientY
-          });
-        });
-        const newEvent = new TouchEvent(event.type, {
-          touches,
-          changedTouches: touches,
-          targetTouches: touches
-        });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-        return newEvent;
-      }
-      return event;
-    };
-    return {
-      normalizeEventForViewport
-    };
-  };
   const ELEMENT_NODE = Node.ELEMENT_NODE;
   const TEXT_NODE = Node.TEXT_NODE;
   const CDATA_SECTION_NODE = Node.CDATA_SECTION_NODE;
@@ -3779,9 +3433,7 @@
     element$,
     context,
     pagination,
-    iframeEventBridgeElement$,
     spineItemManager,
-    hooks$,
     spineItemLocator,
     spineLocator,
     cfiLocator,
@@ -3789,18 +3441,13 @@
     navigationAdjusted$,
     currentNavigationPosition$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const spineItems$ = new rxjs.Subject();
     const itemsBeforeDestroySubject$ = new rxjs.Subject();
     const subject = new rxjs.Subject();
     const containerElement$ = new rxjs.BehaviorSubject(noopElement$1);
-    const eventsHelper = createEventsHelper({
-      context,
-      spineItemManager,
-      iframeEventBridgeElement$,
-      locator: spineLocator
-    });
     let selectionSubscription;
     const reload = (manifest) => {
       itemsBeforeDestroySubject$.next();
@@ -3809,11 +3456,10 @@
         const spineItem = createSpineItem({
           item: resource,
           containerElement: containerElement$.getValue(),
-          iframeEventBridgeElement$,
           context,
-          hooks$,
           viewportState$,
-          settings
+          settings,
+          hookManager
         });
         spineItemManager.add(spineItem);
       });
@@ -3832,7 +3478,7 @@
       var _a;
       (_a = spineItemManager.get(id)) == null ? void 0 : _a.manipulateSpineItem(cb);
     };
-    context.$.manifest$.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)
@@ -3924,7 +3570,7 @@
           Report.error(e);
           return rxjs.EMPTY;
         }),
-        operators.takeUntil(context.$.destroy$)
+        operators.takeUntil(context.destroy$)
       )
     ).subscribe();
     const itemUpdateOnNavigation$ = navigation$.pipe(
@@ -3970,7 +3616,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` && settings.getSettings().computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().beginCfi : beginItemIndex !== pagination.getPaginationInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
+              cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.settings.computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().beginCfi : beginItemIndex !== pagination.getPaginationInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
                 /* @todo check ? */
                 cfiLocator.getRootCfi(beginSpineItem)
               ),
@@ -3982,7 +3628,7 @@
               spineItem: endSpineItem,
               spineItemIndex: endItemIndex,
               pageIndex: endPageIndex,
-              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) : (
+              cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.settings.computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().endCfi : endItemIndex !== pagination.getPaginationInfo().endSpineItemIndex ? cfiLocator.getRootCfi(endSpineItem) : (
                 /* @todo check ? */
                 cfiLocator.getRootCfi(endSpineItem)
               ),
@@ -4006,13 +3652,13 @@
         time2();
       }),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     itemUpdateOnNavigation$.pipe(
       operators.switchMap((data) => {
         return adjustPagination(data.position).pipe(operators.takeUntil(spineItemManager.$.layout$));
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
     rxjs.merge(
       /**
@@ -4046,7 +3692,7 @@
           operators.take(1)
         );
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
     const elementSub = element$.pipe().subscribe((element) => {
       const containerElement = createContainerElement(element.ownerDocument);
@@ -4058,7 +3704,6 @@
       locator: spineLocator,
       spineItemLocator,
       cfiLocator,
-      normalizeEventForViewport: eventsHelper.normalizeEventForViewport,
       manipulateSpineItems,
       manipulateSpineItem,
       destroy: () => {
@@ -4105,16 +3750,16 @@
     const orderedSpineItemsSubject$ = new rxjs.BehaviorSubject([]);
     let focusedSpineItemIndex;
     const layout = () => {
-      const manifest = context.getManifest();
+      const manifest = context.manifest;
       const newItemLayoutInformation = [];
       const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
       orderedSpineItemsSubject$.value.reduce(
         ({ horizontalOffset, verticalOffset }, item, index) => {
           let minimumWidth = context.getPageSize().width;
           let blankPagePosition = `none`;
-          const itemStartOnNewScreen = horizontalOffset % context.getVisibleAreaRect().width === 0;
+          const itemStartOnNewScreen = horizontalOffset % context.state.visibleAreaRect.width === 0;
           const isLastItem = index === orderedSpineItemsSubject$.value.length - 1;
-          if (context.isUsingSpreadMode()) {
+          if (context.state.isUsingSpreadMode) {
             if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
               minimumWidth = context.getPageSize().width * 2;
             }
@@ -4140,10 +3785,10 @@
           const { width, height } = item.layout({
             minimumWidth,
             blankPagePosition,
-            spreadPosition: context.isUsingSpreadMode() ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
+            spreadPosition: context.state.isUsingSpreadMode ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
           });
-          if (settings.getSettings().computedPageTurnDirection === `vertical`) {
-            const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.getVisibleAreaRect().height;
+          if (settings.settings.computedPageTurnDirection === `vertical`) {
+            const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.state.visibleAreaRect.height;
             const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
             if (context.isRTL()) {
               item.adjustPositionOfElement({
@@ -4174,8 +3819,8 @@
           item.adjustPositionOfElement(context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 });
           newItemLayoutInformation.push({
             ...context.isRTL() ? {
-              left: context.getVisibleAreaRect().width - horizontalOffset - width,
-              right: context.getVisibleAreaRect().width - horizontalOffset
+              left: context.state.visibleAreaRect.width - horizontalOffset - width,
+              right: context.state.visibleAreaRect.width - horizontalOffset
             } : {
               left: horizontalOffset,
               right: horizontalOffset + width
@@ -4210,9 +3855,9 @@
     const loadContents = Report.measurePerformance(`loadContents`, 10, (rangeOfIndex) => {
       var _a;
       const [leftIndex, rightIndex] = rangeOfIndex;
-      const numberOfAdjacentSpineItemToPreLoad = settings.getSettings().numberOfAdjacentSpineItemToPreLoad;
-      const isPrePaginated = ((_a = context.getManifest()) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
-      const isUsingFreeScroll = settings.getSettings().computedPageTurnMode === `scrollable`;
+      const numberOfAdjacentSpineItemToPreLoad = settings.settings.numberOfAdjacentSpineItemToPreLoad;
+      const isPrePaginated = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
+      const isUsingFreeScroll = settings.settings.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
@@ -4260,18 +3905,22 @@
     };
     const add = (spineItem) => {
       orderedSpineItemsSubject$.value.push(spineItem);
-      spineItem.$.contentLayout$.pipe(operators.takeUntil(context.$.destroy$)).subscribe(() => {
+      spineItem.$.contentLayout$.pipe(operators.takeUntil(context.destroy$)).subscribe(() => {
         layout();
       });
       spineItem.$.loaded$.pipe(
         operators.tap(() => {
           if (spineItem.isUsingVerticalWriting()) {
-            context.setHasVerticalWriting(true);
+            context.update({
+              hasVerticalWriting: true
+            });
           } else {
-            context.setHasVerticalWriting(false);
+            context.update({
+              hasVerticalWriting: false
+            });
           }
         }),
-        operators.takeUntil(context.$.destroy$)
+        operators.takeUntil(context.destroy$)
       ).subscribe();
       spineItem.load();
     };
@@ -4316,7 +3965,154 @@
           })
         )
       }
-    };
+    };
+  };
+  const isHtmlElement = (element) => {
+    return typeof element === `object` && !!element && `nodeType` in element && (element == null ? void 0 : element.nodeType) === Node.ELEMENT_NODE && `innerText` in element;
+  };
+  function createRangeOrCaretFromPoint(doc, startX, startY) {
+    if (`caretPositionFromPoint` in doc) {
+      return doc.caretPositionFromPoint(startX, startY);
+    } else if (typeof doc.caretRangeFromPoint !== `undefined`) {
+      return doc.caretRangeFromPoint(startX, startY);
+    }
+  }
+  const getFirstVisibleNodeForViewport = Report.measurePerformance(
+    `getFirstVisibleNodeForViewport`,
+    1,
+    (documentOrElement, viewport) => {
+      const element = `body` in documentOrElement ? getFirstVisibleElementForViewport(documentOrElement.body, viewport) : getFirstVisibleElementForViewport(documentOrElement, viewport);
+      const ownerDocument = `createRange` in documentOrElement ? documentOrElement : documentOrElement.ownerDocument;
+      if (element) {
+        let lastValidRange;
+        let lastValidOffset = 0;
+        const range = ownerDocument.createRange();
+        Array.from(element.childNodes).some((childNode) => {
+          range.selectNodeContents(childNode);
+          const rects = range.getClientRects();
+          const visibleRect = getFirstVisibleDOMRect(rects, viewport);
+          if (visibleRect) {
+            lastValidRange = range.cloneRange();
+            const rangeOrCaret = createRangeOrCaretFromPoint(ownerDocument, Math.ceil(visibleRect.left), Math.ceil(visibleRect.top));
+            if (rangeOrCaret && `startContainer` in rangeOrCaret && rangeOrCaret.startContainer === lastValidRange.startContainer) {
+              lastValidOffset = rangeOrCaret.startOffset;
+            }
+            if (rangeOrCaret && `offsetNode` in rangeOrCaret && rangeOrCaret.offsetNode === lastValidRange.startContainer) {
+              lastValidOffset = rangeOrCaret.offset;
+            }
+            return true;
+          }
+          return false;
+        });
+        if (lastValidRange) {
+          return { node: lastValidRange.startContainer, offset: lastValidOffset };
+        }
+        return { node: element, offset: 0 };
+      }
+      return void 0;
+    }
+  );
+  const getFirstVisibleElementForViewport = (element, viewport) => {
+    let lastValidElement;
+    const positionFromViewport = getElementOrNodePositionFromViewPort(element.getBoundingClientRect(), viewport);
+    if (positionFromViewport !== `before` && positionFromViewport !== `after`) {
+      lastValidElement = element;
+    }
+    Array.from(element.children).some((child) => {
+      const childInViewPort = getFirstVisibleElementForViewport(child, viewport);
+      if (childInViewPort) {
+        lastValidElement = childInViewPort;
+        return true;
+      }
+      return false;
+    });
+    return lastValidElement;
+  };
+  function getElementOrNodePositionFromViewPort(domRect, { left, right }) {
+    if (domRect.left <= left && domRect.right <= left)
+      return `before`;
+    if (domRect.left <= left && domRect.right > left && domRect.right <= right)
+      return `partially-before`;
+    if (domRect.left <= right && domRect.right > right)
+      return `partially-after`;
+    if (domRect.left > right)
+      return `after`;
+    return `within`;
+  }
+  function getFirstVisibleDOMRect(domRect, viewport) {
+    return Array.from(domRect).find((domRect2) => {
+      const position = getElementOrNodePositionFromViewPort(domRect2, viewport);
+      if (position !== `before` && position !== `after`) {
+        return true;
+      }
+      return false;
+    });
+  }
+  const getRangeFromNode = (node, offset) => {
+    var _a;
+    if (node.nodeType !== Node.CDATA_SECTION_NODE && node.nodeType !== Node.DOCUMENT_TYPE_NODE) {
+      const range = (_a = node.ownerDocument) == null ? void 0 : _a.createRange();
+      range == null ? void 0 : range.selectNodeContents(node);
+      try {
+        if (offset <= ((range == null ? void 0 : range.endOffset) || 0)) {
+          range == null ? void 0 : range.setStart(node, offset || 0);
+        }
+      } catch (e) {
+        Report.error(e);
+      }
+      return range;
+    }
+    return void 0;
+  };
+  const isPointerEvent = (event) => {
+    var _a, _b, _c, _d, _e;
+    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
+      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
+      if (eventView.PointerEvent) {
+        return event instanceof eventView.PointerEvent;
+      }
+    }
+    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
+      const eventView = event == null ? void 0 : event.view;
+      if (eventView.PointerEvent) {
+        return event instanceof eventView.PointerEvent;
+      }
+    }
+    return false;
+  };
+  const isMouseEvent = (event) => {
+    var _a, _b, _c, _d, _e;
+    if (isPointerEvent(event))
+      return false;
+    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
+      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
+      if (eventView.MouseEvent) {
+        return event instanceof eventView.MouseEvent;
+      }
+    }
+    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
+      const eventView = event == null ? void 0 : event.view;
+      if (eventView.MouseEvent) {
+        return event instanceof eventView.MouseEvent;
+      }
+    }
+    return false;
+  };
+  const isTouchEvent = (event) => {
+    var _a, _b, _c, _d, _e;
+    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
+      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
+      if (eventView.TouchEvent) {
+        return event instanceof eventView.TouchEvent;
+      }
+    }
+    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
+      const eventView = event == null ? void 0 : event.view;
+      if (eventView.TouchEvent) {
+        return event instanceof eventView.TouchEvent;
+      }
+    }
+    return false;
   };
   const createLocationResolver$1 = ({ context }) => {
     const getSafePosition = (unsafeSpineItemPosition, spineItem) => ({
@@ -4538,7 +4334,7 @@
       { disable: true }
     );
     const getAdjustedPositionForSpread = ({ x, y }) => {
-      const isOffsetNotAtEdge = x % context.getVisibleAreaRect().width !== 0;
+      const isOffsetNotAtEdge = x % context.state.visibleAreaRect.width !== 0;
       const correctedX = isOffsetNotAtEdge ? x - context.getPageSize().width : x;
       return { x: correctedX, y };
     };
@@ -4577,7 +4373,7 @@
       return { x: 0, y: 0 };
     };
     const getNavigationForRightSinglePage = (position) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       const spineItem = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
       const defaultNavigation = position;
       if (!spineItem) {
@@ -4596,7 +4392,7 @@
       }
     };
     const getNavigationForLeftSinglePage = (position) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       const spineItem = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
       const defaultNavigation = { ...position, spineItem };
       if (!spineItem) {
@@ -4620,7 +4416,7 @@
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
         return getAdjustedPositionForSpread(navigation);
       }
-      if (context.isUsingSpreadMode()) {
+      if (context.state.isUsingSpreadMode) {
         if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
           return getAdjustedPositionForSpread(
             wrapPositionWithSafeEdge(
@@ -4634,7 +4430,7 @@
             )
           );
         }
-        if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+        if (settings.settings.computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
           return getAdjustedPositionForSpread(navigation);
         }
         const doubleNavigation = getNavigationForRightSinglePage(navigation);
@@ -4648,7 +4444,7 @@
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
         return getAdjustedPositionForSpread(navigation);
       }
-      if (context.isUsingSpreadMode()) {
+      if (context.state.isUsingSpreadMode) {
         if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
           return getAdjustedPositionForSpread(
             wrapPositionWithSafeEdge(
@@ -4656,7 +4452,7 @@
             )
           );
         }
-        if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+        if (settings.settings.computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
           return getAdjustedPositionForSpread(navigation);
         }
         const doubleNavigation = getNavigationForLeftSinglePage(navigation);
@@ -4669,7 +4465,7 @@
       try {
         const validUrl = url instanceof URL ? url : new URL(url);
         const urlWithoutAnchor = `${validUrl.origin}${validUrl.pathname}`;
-        const existingSpineItem = (_a = context.getManifest()) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
+        const existingSpineItem = (_a = context.manifest) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
         if (existingSpineItem) {
           const spineItem = spineItemManager.get(existingSpineItem.id);
           if (spineItem) {
@@ -4698,15 +4494,15 @@
       return { x: 0, y: 0 };
     };
     const getMostPredominantNavigationForPosition = (viewportPosition) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.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;
+      const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
+      const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.state.visibleAreaRect.height * triggerPercentage;
       const midScreenPositionSafePosition = wrapPositionWithSafeEdge({ x: triggerXPosition, y: triggerYPosition });
       return getNavigationForPosition(midScreenPositionSafePosition);
     };
     const isNavigationGoingForwardFrom = (to, from) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       if (pageTurnDirection === `vertical`) {
         return to.y > from.y;
       }
@@ -4750,14 +4546,14 @@
     );
     const adjustReadingOffset = ({ x, y }) => {
       var _a;
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         lastScrollWasProgrammaticallyTriggered = true;
         (_a = element$.getValue()) == null ? void 0 : _a.scrollTo({ left: x, top: y });
         return true;
       }
       return false;
     };
-    const runOnFreePageTurnModeOnly$ = (source) => settings.$.settings$.pipe(
+    const runOnFreePageTurnModeOnly$ = (source) => settings.settings$.pipe(
       operators.map(({ computedPageTurnMode }) => computedPageTurnMode),
       operators.distinctUntilChanged(),
       operators.switchMap((mode) => rxjs.iif(() => mode === `controlled`, rxjs.EMPTY, source))
@@ -4767,7 +4563,7 @@
         operators.filter(isDefined),
         operators.switchMap((element) => rxjs.fromEvent(element, `scroll`))
       )
-    ).pipe(onlyUserScrollFilter, operators.share(), operators.takeUntil(context.$.destroy$));
+    ).pipe(onlyUserScrollFilter, operators.share(), operators.takeUntil(context.destroy$));
     const getScaledDownPosition = ({ x, y }) => {
       var _a, _b;
       const spineElement = spine.getElement();
@@ -4815,7 +4611,7 @@
     const userScrollEnd$ = userScroll$.pipe(
       operators.debounceTime(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, rxjs.animationFrameScheduler),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     const state$ = rxjs.merge(
       userScroll$.pipe(
@@ -4908,7 +4704,7 @@
       operators.filter((e) => e.type === `pageIndex`),
       operators.filter(() => {
         var _a;
-        if (((_a = context.getManifest()) == null ? void 0 : _a.renditionLayout) === `reflowable`) {
+        if (((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `reflowable`) {
           Report.warn(`This method only works for pre-paginated content`);
           return false;
         }
@@ -5042,11 +4838,11 @@
       `${NAMESPACE$1} moveTo`,
       5,
       (delta, { final, start } = {}) => {
-        if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+        if (settings.settings.computedPageTurnMode === `scrollable`) {
           Report.warn(`pan control is not available on free page turn mode`);
           return;
         }
-        const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+        const pageTurnDirection = settings.settings.computedPageTurnDirection;
         if (start) {
           stateSubject$.next(`start`);
           movingLastDelta = { x: 0, y: 0 };
@@ -5106,7 +4902,7 @@
     );
     const snapNavigation$ = navigationTriggerSubject$.pipe(
       operators.filter((e) => e.type === `snap`),
-      rxjs.withLatestFrom(settings.$.settings$),
+      rxjs.withLatestFrom(settings.settings$),
       operators.switchMap(
         ([
           {
@@ -5114,11 +4910,11 @@
           },
           { navigationSnapThreshold }
         ]) => {
-          const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+          const pageTurnDirection = settings.settings.computedPageTurnDirection;
           const movingForward = navigator2.isNavigationGoingForwardFrom(to, from);
           const triggerPercentage = movingForward ? 1 - navigationSnapThreshold : navigationSnapThreshold;
-          const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
-          const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : to.y + context.getVisibleAreaRect().height * triggerPercentage;
+          const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
+          const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : to.y + context.state.visibleAreaRect.height * triggerPercentage;
           const midScreenPositionSafePosition = navigator2.wrapPositionWithSafeEdge({
             x: triggerXPosition,
             y: triggerYPosition
@@ -5155,7 +4951,7 @@
     parentElement$,
     cfiLocator,
     spineLocator,
-    hooks$,
+    hookManager,
     spine,
     settings
   }) => {
@@ -5177,7 +4973,7 @@
     const adjustNavigationSubject$ = new rxjs.Subject();
     const getCurrentViewportPosition = Report.measurePerformance(`${NAMESPACE} getCurrentViewportPosition`, 1, () => {
       var _a;
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         return scrollViewportNavigator.getCurrentViewportPosition();
       }
       const { x, y } = ((_a = element$.getValue()) == null ? void 0 : _a.getBoundingClientRect()) ?? { x: 0, y: 0 };
@@ -5221,13 +5017,13 @@
     const viewportNavigatorsSharedState$ = rxjs.merge(...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2));
     let lastUserExpectedNavigation;
     const makeItHot = (source$) => {
-      source$.pipe(operators.takeUntil(context.$.destroy$)).subscribe();
+      source$.pipe(operators.takeUntil(context.destroy$)).subscribe();
       return source$;
     };
     const adjustReadingOffset = Report.measurePerformance(
       `adjustReadingOffset`,
       2,
-      ({ x, y }, hooks) => {
+      ({ x, y }) => {
         const element = element$.getValue();
         if (!element)
           throw new Error("Invalid element");
@@ -5238,11 +5034,7 @@
         if (!isAdjusted) {
           element.style.transform = `translate3d(${-x}px, -${y}px, 0)`;
         }
-        hooks.forEach((hook) => {
-          if (hook.name === `onViewportOffsetAdjust`) {
-            hook.fn();
-          }
-        });
+        hookManager.execute("onViewportOffsetAdjust", void 0, {});
       },
       { disable: true }
     );
@@ -5250,7 +5042,7 @@
       const lastCfi = pagination.getPaginationInfo().beginCfi;
       let adjustedSpinePosition = currentNavigationPositionSubject$.value;
       const offsetInSpineItem = 0;
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         adjustedSpinePosition = scrollViewportNavigator.getNavigationForPosition(getCurrentViewportPosition());
       } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-cfi`) {
         adjustedSpinePosition = navigator2.getNavigationForCfi(lastUserExpectedNavigation.data);
@@ -5295,7 +5087,7 @@
     layoutSubject$.subscribe(() => {
       currentViewportPositionMemoUnused = void 0;
     });
-    const layoutChangeSettings$ = settings.$.settings$.pipe(
+    const layoutChangeSettings$ = settings.settings$.pipe(
       mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
       operators.distinctUntilChanged(isShallowEqual),
       operators.skip(1)
@@ -5303,7 +5095,7 @@
     const layout$ = rxjs.merge(layoutSubject$, layoutChangeSettings$).pipe(
       operators.withLatestFrom(element$),
       operators.tap(([, element]) => {
-        if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+        if (settings.settings.computedPageTurnMode === `scrollable`) {
           element.style.removeProperty(`transform`);
           element.style.removeProperty(`transition`);
           element.style.overflow = `scroll`;
@@ -5355,11 +5147,11 @@
         return { ...event, lastUserExpectedNavigation };
       }),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     const navigationWhichRequireManualAdjust$ = navigation$.pipe(
       operators.filter(({ triggeredBy }) => {
-        if (triggeredBy === `scroll` || settings.getSettings().computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
+        if (triggeredBy === `scroll` || settings.settings.computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
           return false;
         } else {
           return true;
@@ -5371,7 +5163,7 @@
       navigationWhichRequireManualAdjust$
     ).pipe(
       operators.map(({ animation, position }) => {
-        const shouldAnimate = !(!animation || animation === `turn` && settings.getSettings().computedPageTurnAnimation === `none`);
+        const shouldAnimate = !(!animation || animation === `turn` && settings.settings.computedPageTurnAnimation === `none`);
         return {
           type: `manualAdjust`,
           shouldAnimate,
@@ -5393,8 +5185,8 @@
       operators.switchMap(([, currentEvent]) => {
         if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`)
           return rxjs.EMPTY;
-        const animationDuration = currentEvent.animation === `snap` ? settings.getSettings().computedSnapAnimationDuration : settings.getSettings().computedPageTurnAnimationDuration;
-        const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.getSettings().computedPageTurnAnimation;
+        const animationDuration = currentEvent.animation === `snap` ? settings.settings.computedSnapAnimationDuration : settings.settings.computedPageTurnAnimationDuration;
+        const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.settings.computedPageTurnAnimation;
         return rxjs.of(currentEvent).pipe(
           /**
            * @important
@@ -5428,23 +5220,22 @@
            * need to adjust to anchor to the payload position. This is because we use viewport computed position,
            * not the value set by `setProperty`
            */
-          operators.withLatestFrom(hooks$),
-          operators.tap(([data, hooks]) => {
+          operators.tap((data) => {
             if (pageTurnAnimation !== `fade`) {
-              adjustReadingOffset(data.position, hooks);
+              adjustReadingOffset(data.position);
             }
           }),
           currentEvent.shouldAnimate ? operators.delay(animationDuration / 2, rxjs.animationFrameScheduler) : rxjs.identity,
-          operators.tap(([data, hooks]) => {
+          operators.tap((data) => {
             if (pageTurnAnimation === `fade`) {
-              adjustReadingOffset(data.position, hooks);
+              adjustReadingOffset(data.position);
               element$.getValue().style.setProperty(`opacity`, `1`);
             }
           }),
           currentEvent.shouldAnimate ? operators.delay(animationDuration / 2, rxjs.animationFrameScheduler) : rxjs.identity,
-          operators.tap(([data, hooks]) => {
+          operators.tap((data) => {
             if (pageTurnAnimation === `fade`) {
-              adjustReadingOffset(data.position, hooks);
+              adjustReadingOffset(data.position);
             }
           }),
           operators.takeUntil(
@@ -5456,7 +5247,7 @@
         );
       }),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     const adjustmentState$ = rxjs.merge(
       rxjs.merge(manualAdjust$).pipe(operators.map(() => `start`)),
@@ -5511,7 +5302,7 @@
       operators.share()
     );
     const parentElementSub = parentElement$.pipe(operators.filter(isDefined), operators.withLatestFrom(spine.element$)).subscribe(([parentElement, spineElement]) => {
-      const element = createElement(parentElement.ownerDocument, hooks$);
+      const element = createElement(parentElement.ownerDocument, hookManager);
       element.appendChild(spineElement);
       parentElement.appendChild(element);
       element$.next(element);
@@ -5547,19 +5338,15 @@
       }
     };
   };
-  const createElement = (doc, hooks$) => {
+  const createElement = (doc, hookManager) => {
     const element = doc.createElement(`div`);
     element.style.cssText = `
     height: 100%;
     position: relative;
   `;
     element.className = `${HTML_PREFIX$1}-viewport-navigator`;
-    return hooks$.getValue().reduce((element2, hook) => {
-      if (hook.name === `viewportNavigator.onBeforeContainerCreated`) {
-        return hook.fn(element2);
-      }
-      return element2;
-    }, element);
+    hookManager.execute("viewportNavigator.onBeforeContainerCreated", void 0, { element });
+    return element;
   };
   const createLocationResolver = ({
     spineItemManager,
@@ -5600,7 +5387,7 @@
         const spineItem = spineItemManager.getAll().find((item) => {
           const { left, right, bottom, top } = spineItemManager.getAbsolutePositionOf(item);
           const isWithinXAxis = position.x >= left && position.x < right;
-          if (settings.getSettings().computedPageTurnDirection === `horizontal`) {
+          if (settings.settings.computedPageTurnDirection === `horizontal`) {
             return isWithinXAxis;
           } else {
             return isWithinXAxis && position.y >= top && position.y < bottom;
@@ -5627,7 +5414,7 @@
       if (itemAtPositionIndex === void 0)
         return void 0;
       let endPosition = position;
-      if (context.isUsingSpreadMode()) {
+      if (context.state.isUsingSpreadMode) {
         endPosition = { x: position.x + context.getPageSize().width, y: position.y };
       }
       const endItemIndex = spineItemManager.getSpineItemIndex(getSpineItemFromPosition(endPosition) || spineItemManager.getFocusedSpineItem()) ?? itemAtPositionIndex;
@@ -5748,80 +5535,170 @@
       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`,
+  const getComputedSettings = (settings, context) => {
+    const manifest = context.manifest;
+    const hasVerticalWriting = context.state.hasVerticalWriting ?? false;
+    const computedSettings = {
+      computedPageTurnDirection: settings.pageTurnDirection,
+      computedPageTurnAnimation: settings.pageTurnAnimation,
       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))
-      }
+      computedPageTurnAnimationDuration: 0,
+      computedSnapAnimationDuration: 0
     };
-  };
-  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))) {
+    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
+      computedSettings.computedPageTurnMode = `scrollable`;
+      computedSettings.computedPageTurnDirection = `vertical`;
+    } else if (manifest && settings.pageTurnMode === `scrollable` && (manifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(manifest))) {
       Report.warn(`pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`);
-      settings.computedPageTurnAnimation = `none`;
-      settings.computedPageTurnMode = `controlled`;
+      computedSettings.computedPageTurnAnimation = `none`;
+      computedSettings.computedPageTurnMode = `controlled`;
     } else if (settings.pageTurnMode === `scrollable`) {
-      settings.computedPageTurnMode = `scrollable`;
-      settings.computedPageTurnDirection = `vertical`;
+      computedSettings.computedPageTurnMode = `scrollable`;
+      computedSettings.computedPageTurnDirection = `vertical`;
     }
-    if (hasVerticalWriting && settings.computedPageTurnAnimation === `slide`) {
+    if (hasVerticalWriting && computedSettings.computedPageTurnAnimation === `slide`) {
       Report.warn(
-        `pageTurnAnimation ${settings.computedPageTurnAnimation} incompatible with current book, switching back to default`
+        `pageTurnAnimation ${computedSettings.computedPageTurnAnimation} incompatible with current book, switching back to default`
       );
-      settings.computedPageTurnAnimation = `none`;
+      computedSettings.computedPageTurnAnimation = `none`;
     }
-    if (settings.computedPageTurnMode === `scrollable`) {
-      settings.computedPageTurnAnimationDuration = 0;
-      settings.computedPageTurnAnimation = `none`;
+    if (computedSettings.computedPageTurnMode === `scrollable`) {
+      computedSettings.computedPageTurnAnimationDuration = 0;
+      computedSettings.computedPageTurnAnimation = `none`;
     } else {
-      settings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+      computedSettings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
     }
+    return computedSettings;
   };
-  const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
-  const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
+  const defaultSettings = {
+    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
+  };
+  class SettingsManager {
+    constructor(initialSettings, context) {
+      this._context = context;
+      const settingsWithDefaults = {
+        ...defaultSettings,
+        ...initialSettings
+      };
+      const computedSettings = getComputedSettings(settingsWithDefaults, context);
+      const settings = { ...settingsWithDefaults, ...computedSettings };
+      this._settingsSubject$ = new rxjs.BehaviorSubject(settings);
+      this.settings$ = this._settingsSubject$.asObservable().pipe(operators.distinctUntilChanged(isShallowEqual));
+      const recomputeSettingsOnContextChange$ = rxjs.combineLatest([context.hasVerticalWriting$, context.manifest$]).pipe(
+        operators.tap(() => {
+          this._updateSettings(this.settings);
+        })
+      );
+      const updateContextOnSettingsChanges$ = this._settingsSubject$.pipe(
+        operators.tap(({ forceSinglePageMode }) => {
+          context.update({ forceSinglePageMode });
+        })
+      );
+      rxjs.merge(recomputeSettingsOnContextChange$, updateContextOnSettingsChanges$).pipe(operators.takeUntil(context.destroy$)).subscribe();
+    }
+    // @see https://github.com/microsoft/TypeScript/issues/17293
+    _updateSettings(settings) {
+      const computed = getComputedSettings(settings, this._context);
+      const newMergedSettings = { ...settings, ...computed };
+      this._settingsSubject$.next(newMergedSettings);
+    }
+    setSettings(settings) {
+      if (Object.keys(settings).length === 0)
+        return;
+      const newMergedSettings = { ...this._settingsSubject$.value, ...settings };
+      this._updateSettings(newMergedSettings);
+    }
+    get settings() {
+      return this._settingsSubject$.getValue();
+    }
+    destroy() {
+      this._settingsSubject$.complete();
+    }
+  }
+  class HookManager {
+    constructor() {
+      this._hooks = [];
+      this._hookExecutions = [];
+    }
+    /**
+     * Will:
+     * - call destroy function for every execution of this specific hook
+     * - remove the hook for further calls
+     */
+    _deregister(hookToDeregister) {
+      this._hooks = this._hooks.filter((hook) => hook !== hookToDeregister);
+      return this.destroy(hookToDeregister.name, void 0, hookToDeregister);
+    }
+    /**
+     * Ideal when your logic only needs to apply something to the item when it's loaded.
+     * You can manipulate your item later if you need to update it and trigger a layout.
+     * This logic will not run every time there is a layout.
+     */
+    register(name, fn) {
+      const hook = {
+        name,
+        runFn: (params) => {
+          const returnValue = fn(params);
+          if (!returnValue)
+            return rxjs.of(void 0);
+          return returnValue;
+        }
+      };
+      this._hooks.push(hook);
+      return () => {
+        this._deregister(hook);
+      };
+    }
+    execute(name, id, params) {
+      const hooks = this._hooks.filter((hook) => name === hook.name);
+      const runFns = hooks.map((hook) => {
+        let userDestroyFn = () => rxjs.of(void 0);
+        const destroySubject = new rxjs.Subject();
+        const destroy = (fn) => {
+          userDestroyFn = fn;
+        };
+        const destroyFn = () => {
+          destroySubject.next();
+          destroySubject.complete();
+          const result = userDestroyFn();
+          return result ?? rxjs.of(void 0);
+        };
+        const execution = hook.runFn({ ...params, destroy$: destroySubject.asObservable(), destroy });
+        this._hookExecutions.push({
+          name,
+          id,
+          destroyFn,
+          ref: hook
+        });
+        return execution;
+      });
+      return rxjs.combineLatest(runFns);
+    }
+    destroy(name, id, ref) {
+      const instances = this._hookExecutions.filter(
+        (hookInstance) => (
+          // by ref is higher priority
+          ref && hookInstance.ref === ref || // otherwise we refine by name and eventually by id
+          name === hookInstance.name && (!id || id && id === hookInstance.id)
+        )
+      );
+      this._hookExecutions = this._hookExecutions.filter((instance) => !instances.includes(instance));
+      const destroyFns = instances.map(({ destroyFn }) => destroyFn());
+      return rxjs.combineLatest(destroyFns);
+    }
+  }
+  const createReader = (inputSettings) => {
     const stateSubject$ = new rxjs.BehaviorSubject({
       supportedPageTurnAnimation: [`fade`, `none`, `slide`],
       supportedPageTurnMode: [`controlled`, `scrollable`],
@@ -5830,24 +5707,23 @@
     });
     const destroy$ = new rxjs.Subject();
     const selectionSubject$ = new rxjs.Subject();
-    const hooksSubject$ = new rxjs.BehaviorSubject(initialHooks || []);
     const navigationSubject = new rxjs.Subject();
     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, settings });
+    const hookManager = new HookManager();
+    const context = new Context();
+    const settingsManager = new SettingsManager(inputSettings, context);
+    const spineItemManager = createSpineItemManager({ context, settings: settingsManager });
     const pagination = createPagination({ context, spineItemManager });
     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,
-      settings
+      settings: settingsManager
     });
     const cfiLocator = createCfiLocator({
       spineItemManager,
@@ -5857,19 +5733,18 @@
     const navigation$ = navigationSubject.asObservable();
     const spine = createSpine({
       element$,
-      iframeEventBridgeElement$,
       context,
-      settings,
+      settings: settingsManager,
       pagination,
       spineItemManager,
-      hooks$: hooksSubject$,
       navigation$,
       spineLocator,
       spineItemLocator,
       cfiLocator,
       navigationAdjusted$: navigationAdjustedSubject.asObservable(),
       viewportState$: viewportStateSubject.asObservable(),
-      currentNavigationPosition$: currentNavigationPositionSubject$.asObservable()
+      currentNavigationPosition$: currentNavigationPositionSubject$.asObservable(),
+      hookManager
     });
     const viewportNavigator = createViewportNavigator({
       context,
@@ -5878,9 +5753,9 @@
       parentElement$: elementSubject$,
       cfiLocator,
       spineLocator,
-      hooks$: hooksSubject$,
+      hookManager,
       spine,
-      settings
+      settings: settingsManager
     });
     viewportNavigator.$.state$.subscribe(viewportStateSubject);
     viewportNavigator.$.navigation$.subscribe(navigationSubject);
@@ -5906,30 +5781,29 @@
       element.style.height = `${dimensions.height - marginTop - marginBottom}px`;
       element.style.width = `${containerElementEvenWidth - 2 * margin}px`;
       const elementRect = element.getBoundingClientRect();
-      context.setVisibleAreaRect({
-        x: elementRect.x,
-        y: elementRect.y,
-        width: containerElementEvenWidth,
-        height: dimensions.height
+      context.update({
+        visibleAreaRect: {
+          x: elementRect.x,
+          y: elementRect.y,
+          width: containerElementEvenWidth,
+          height: dimensions.height
+        }
       });
       viewportNavigator.layout();
     };
     const load = (manifest, loadOptions) => {
       var _a;
-      if (context.getManifest()) {
+      if (context.manifest) {
         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);
+      context.update({ manifest, ...loadOptions, forceSinglePageMode: settingsManager.settings.forceSinglePageMode });
       layout();
       if (!loadOptions.cfi) {
         viewportNavigator.goToSpineItem(0, { animate: false });
@@ -5937,9 +5811,6 @@
         viewportNavigator.goToCfi(loadOptions.cfi, { animate: false });
       }
     };
-    const registerHook = (name, fn) => {
-      hooksSubject$.next([...hooksSubject$.getValue(), { name, fn }]);
-    };
     spine.$.$.pipe(
       operators.tap((event) => {
         if (event.type === `onSelectionChange`) {
@@ -5952,18 +5823,18 @@
       rxjs.switchMap(({ adjustedSpinePosition }) => {
         return spine.adjustPagination(adjustedSpinePosition).pipe(operators.takeUntil(navigation$));
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
-    rxjs.merge(context.$.state$, settings.$.settings$).pipe(
+    rxjs.merge(context.state$, settingsManager.settings$).pipe(
       operators.map(() => void 0),
-      operators.withLatestFrom(context.$.state$),
+      operators.withLatestFrom(context.state$),
       operators.map(([, { hasVerticalWriting }]) => {
-        const manifest = context.getManifest();
+        const manifest = context.manifest;
         return {
           hasVerticalWriting,
           renditionFlow: manifest == null ? void 0 : manifest.renditionFlow,
           renditionLayout: manifest == null ? void 0 : manifest.renditionLayout,
-          computedPageTurnMode: settings.getSettings().computedPageTurnMode
+          computedPageTurnMode: settingsManager.settings.computedPageTurnMode
         };
       }),
       operators.distinctUntilChanged(isShallowEqual),
@@ -5971,7 +5842,7 @@
         ({ hasVerticalWriting, renditionFlow, renditionLayout, computedPageTurnMode }) => {
           return {
             ...stateSubject$.value,
-            supportedPageTurnMode: renditionFlow === `scrolled-continuous` ? [`scrollable`] : !context.areAllItemsPrePaginated() ? [`controlled`] : [`controlled`, `scrollable`],
+            supportedPageTurnMode: renditionFlow === `scrolled-continuous` ? [`scrollable`] : !context.state.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`]
           };
@@ -5980,16 +5851,13 @@
       operators.takeUntil(destroy$)
     ).subscribe(stateSubject$);
     const destroy = () => {
-      var _a, _b;
-      settings.destroy();
-      hooksSubject$.next([]);
-      hooksSubject$.complete();
+      var _a;
+      settingsManager.destroy();
       pagination.destroy();
       context.destroy();
       viewportNavigator.destroy();
       spine.destroy();
       (_a = elementSubject$.getValue()) == null ? void 0 : _a.remove();
-      (_b = iframeEventBridgeElement$.getValue()) == null ? void 0 : _b.remove();
       stateSubject$.complete();
       selectionSubject$.complete();
       destroy$.next();
@@ -5997,43 +5865,16 @@
     };
     const reader = {
       context,
-      registerHook,
       spine,
+      hookManager,
       viewportNavigator,
-      manipulateSpineItems: spine.manipulateSpineItems,
-      manipulateSpineItem: spine.manipulateSpineItem,
-      moveTo: viewportNavigator.moveTo,
-      turnLeft: viewportNavigator.turnLeft,
-      turnRight: viewportNavigator.turnRight,
-      goToPageOfCurrentChapter: viewportNavigator.goToPageOfCurrentChapter,
-      goToPage: viewportNavigator.goToPage,
-      goToUrl: viewportNavigator.goToUrl,
-      goToCfi: viewportNavigator.goToCfi,
-      goToSpineItem: viewportNavigator.goToSpineItem,
-      getFocusedSpineItemIndex: spineItemManager.getFocusedSpineItemIndex,
-      getSpineItem: spineItemManager.get,
-      getSpineItems: spineItemManager.getAll,
-      getAbsolutePositionOf: spineItemManager.getAbsolutePositionOf,
-      getSelection: spine.getSelection,
-      isSelecting: spine.isSelecting,
-      normalizeEventForViewport: spine.normalizeEventForViewport,
-      getCfiMetaInformation: spine.cfiLocator.getCfiMetaInformation,
-      resolveCfi: spine.cfiLocator.resolveCfi,
-      generateCfi: spine.cfiLocator.generateFromRange,
-      locator: spine.locator,
-      getCurrentNavigationPosition: viewportNavigator.getCurrentNavigationPosition,
-      getCurrentViewportPosition: viewportNavigator.getCurrentViewportPosition,
+      spineItemManager,
       layout,
       load,
       destroy,
-      spineItems$: spine.$.spineItems$,
-      context$: context.$.state$,
       pagination,
-      settings: {
-        settings$: settings.$.settings$,
-        getSettings: settings.getSettings,
-        setSettings: (data) => settings.setSettings(data, context.getState())
-      },
+      settings: settingsManager,
+      element$,
       $: {
         state$: stateSubject$.asObservable(),
         /**
@@ -6042,21 +5883,12 @@
          * have an effect.
          * It can typically be used to hide a loading indicator.
          */
-        loadStatus$: context.$.manifest$.pipe(operators.map((manifest) => manifest ? "ready" : "idle")),
+        loadStatus$: context.manifest$.pipe(operators.map((manifest) => manifest ? "ready" : "idle")),
         /**
          * Dispatched when a change in selection happens
          */
         selection$: selectionSubject$.asObservable(),
-        viewportState$: viewportNavigator.$.state$,
-        layout$: spine.$.layout$,
-        itemsBeforeDestroy$: spine.$.itemsBeforeDestroy$,
-        itemIsReady$: spineItemManager.$.itemIsReady$,
         destroy$
-      },
-      __debug: {
-        pagination,
-        context,
-        spineItemManager
       }
     };
     return reader;
@@ -6070,19 +5902,6 @@
     element.className = `${HTML_PREFIX$1}-reader`;
     return element;
   };
-  const createIframeEventBridgeElement = (containerElement) => {
-    const iframeEventBridgeElement = containerElement.ownerDocument.createElement(`div`);
-    iframeEventBridgeElement.id = IFRAME_EVENT_BRIDGE_ELEMENT_ID;
-    iframeEventBridgeElement.style.cssText = `
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1;
-  `;
-    return iframeEventBridgeElement;
-  };
   const utilsEnhancer = (next) => (options) => {
     const reader = next(options);
     const isOrIsWithinValidLink = (target) => {
@@ -6207,9 +6026,9 @@
       var _a, _b;
       if (typeof itemIndexOrId === `string` || typeof itemIndexOrId === `object`) {
         const id = typeof itemIndexOrId === `object` ? itemIndexOrId.id : void 0;
-        return (_a = context.getManifest()) == null ? void 0 : _a.spineItems.find((entry) => entry.id === id);
+        return (_a = context.manifest) == null ? void 0 : _a.spineItems.find((entry) => entry.id === id);
       } else {
-        return (_b = context.getManifest()) == null ? void 0 : _b.spineItems[itemIndexOrId];
+        return (_b = context.manifest) == null ? void 0 : _b.spineItems[itemIndexOrId];
       }
     };
     const get = async (itemIndexOrId, fetchResource) => {
@@ -6243,9 +6062,9 @@
           })
         );
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
-    const onLoad$ = context.$.manifest$.pipe(
+    const onLoad$ = context.manifest$.pipe(
       operators.tap(() => {
         uniqueID = Date.now().toString();
       })
@@ -6269,7 +6088,7 @@
           })
         );
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
     const destroy = () => {
       cache$.complete();
@@ -6282,14 +6101,6 @@
   const resourcesEnhancer = (next) => (options) => {
     const reader = next(options);
     const resourceManager = createResourcesManager(reader.context);
-    const load = (manifest, loadOptions) => {
-      reader.load(manifest, {
-        ...loadOptions
-      });
-    };
-    reader.registerHook(`item.onGetResource`, (fetcher) => async (item) => {
-      return resourceManager.get(item, fetcher);
-    });
     const destroy = () => {
       resourceManager.destroy();
       reader.destroy();
@@ -6300,8 +6111,8 @@
       //   ...reader.$,
       //   errors$: merge(reader.$.errors$, errorsSubject$.asObservable())
       // },
-      destroy,
-      load
+      destroy
+      // load,
     };
   };
   const mediaEnhancer = (next) => (options) => {
@@ -6352,7 +6163,7 @@
         threshold: 0.5
       }
     );
-    reader.registerHook(`item.onLoad`, ({ frame }) => {
+    reader.hookManager.register(`item.onLoad`, ({ frame, destroy: destroy2 }) => {
       var _a;
       frameObserver.observe(frame);
       const videos = (_a = frame.contentDocument) == null ? void 0 : _a.body.getElementsByTagName(`video`);
@@ -6360,10 +6171,10 @@
         elementObserver.observe(element);
         return () => elementObserver.unobserve(element);
       });
-      return () => {
+      destroy2(() => {
         frameObserver.unobserve(frame);
         unobserveElements.forEach((unobserve) => unobserve());
-      };
+      });
     });
     const destroy = () => {
       frameObserver.disconnect();
@@ -6379,16 +6190,16 @@
     const reader = next(options);
     const getPercentageEstimate = (context, currentSpineIndex, numberOfPages, pageIndex, currentPosition, currentItem) => {
       var _a, _b, _c, _d, _e, _f;
-      const isGloballyPrePaginated = ((_a = context.getManifest()) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
-      const readingOrderLength = ((_b = context.getManifest()) == null ? void 0 : _b.spineItems.length) || 0;
-      const estimateBeforeThisItem = ((_c = context.getManifest()) == null ? void 0 : _c.spineItems.slice(0, currentSpineIndex).reduce((acc, item) => acc + item.progressionWeight, 0)) || 0;
-      const currentItemWeight = ((_e = (_d = context.getManifest()) == null ? void 0 : _d.spineItems[currentSpineIndex]) == null ? void 0 : _e.progressionWeight) || 0;
+      const isGloballyPrePaginated = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
+      const readingOrderLength = ((_b = context.manifest) == null ? void 0 : _b.spineItems.length) || 0;
+      const estimateBeforeThisItem = ((_c = context.manifest) == null ? void 0 : _c.spineItems.slice(0, currentSpineIndex).reduce((acc, item) => acc + item.progressionWeight, 0)) || 0;
+      const currentItemWeight = ((_e = (_d = context.manifest) == null ? void 0 : _d.spineItems[currentSpineIndex]) == null ? void 0 : _e.progressionWeight) || 0;
       let progressWithinThisItem = (pageIndex + 1) * (currentItemWeight / numberOfPages);
       if (!isGloballyPrePaginated && currentItem.item.renditionLayout === `reflowable` && !currentItem.isReady()) {
         progressWithinThisItem = 0;
       }
       let totalProgress = estimateBeforeThisItem + progressWithinThisItem;
-      if (((_f = context.getManifest()) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
+      if (((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
         if (currentItem.isReady()) {
           progressWithinThisItem = getScrollPercentageWithinItem(context, currentPosition, currentItem);
         } else {
@@ -6406,11 +6217,11 @@
     };
     const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
       const { height, width } = currentItem.getElementDimensions();
-      const { top, left } = reader.getAbsolutePositionOf(currentItem);
-      if (reader.settings.getSettings().computedPageTurnDirection === `vertical`) {
-        return Math.max(0, Math.min(1, (currentPosition.y - top + context.getVisibleAreaRect().height) / height));
+      const { top, left } = reader.spineItemManager.getAbsolutePositionOf(currentItem);
+      if (reader.settings.settings.computedPageTurnDirection === `vertical`) {
+        return Math.max(0, Math.min(1, (currentPosition.y - top + context.state.visibleAreaRect.height) / height));
       } else {
-        return Math.max(0, Math.min(1, (currentPosition.x - left + context.getVisibleAreaRect().width) / width));
+        return Math.max(0, Math.min(1, (currentPosition.x - left + context.state.visibleAreaRect.width) / width));
       }
     };
     return {
@@ -6432,67 +6243,59 @@
         }
       });
     }, {});
-    reader.registerHook(`item.onLoad`, ({ addStyle, frame }) => {
+    reader.hookManager.register(`item.onLoad`, ({ itemId, frame, destroy }) => {
       var _a;
-      addStyle(
-        `prose-reader-accessibility`,
-        `
-      :focus-visible {
-        ${/*
-          Some epubs remove the outline, this is not good practice since it reduce accessibility.
-          We will try to restore it by force.
-        */
-        ``}
-        outline: -webkit-focus-ring-color auto 1px;
-      }
-    `
-      );
+      const item = reader.spineItemManager.get(itemId);
+      if (!item)
+        return;
+      item.manipulateSpineItem(({ addStyle }) => {
+        addStyle(
+          `prose-reader-accessibility`,
+          `
+        :focus-visible {
+          ${/*
+            Some epubs remove the outline, this is not good practice since it reduce accessibility.
+            We will try to restore it by force.
+          */
+          ``}
+          outline: -webkit-focus-ring-color auto 1px;
+        }
+      `
+        );
+        return false;
+      });
       const links = (_a = frame.contentDocument) == null ? void 0 : _a.body.querySelectorAll(`a`);
       links == null ? void 0 : links.forEach((link) => {
         observer.observe(link);
       });
-      return () => {
+      destroy(() => {
         links == null ? void 0 : links.forEach((link) => {
           observer.unobserve(link);
         });
-      };
+      });
     });
     return {
       ...reader
     };
   };
   const IS_SAFARI = navigator.userAgent.indexOf(``) > -1 && navigator.userAgent.indexOf(`Chrome`) <= -1;
-  const webkitEnhancer = (next) => (options) => {
-    const transformFlickerFixHooks = [
-      {
-        name: `viewportNavigator.onBeforeContainerCreated`,
-        fn: (element) => {
-          element.style.cssText = `
-          ${element.style.cssText}
-          -webkit-transform-style: preserve-3d;
-        `;
-          return element;
-        }
-      },
-      {
-        name: `item.onBeforeContainerCreated`,
-        fn: (element) => {
-          element.style.cssText = `
+  const webkitEnhancer = (createReader2) => (options) => {
+    const reader = createReader2(options);
+    if (IS_SAFARI) {
+      reader.hookManager.register("viewportNavigator.onBeforeContainerCreated", ({ element }) => {
+        element.style.cssText = `
           ${element.style.cssText}
           -webkit-transform-style: preserve-3d;
-          -webkit-backface-visibility: hidden;
         `;
-          return element;
-        }
-      }
-    ];
-    const existingHooks = options.hooks || [];
-    const reader = next({
-      ...options,
-      ...IS_SAFARI && {
-        hooks: [...existingHooks, ...transformFlickerFixHooks]
-      }
-    });
+      });
+      reader.hookManager.register("item.onBeforeContainerCreated", ({ element }) => {
+        element.style.cssText = `
+        ${element.style.cssText}
+        -webkit-transform-style: preserve-3d;
+        -webkit-backface-visibility: hidden;
+      `;
+      });
+    }
     return reader;
   };
   const HTML_PREFIX = `${HTML_PREFIX$1}-enhancer-loading`;
@@ -6513,9 +6316,9 @@
         };
       }, {})
     );
-    const updateEntriesLayout$ = (entries) => rxjs.combineLatest([reader.$.layout$, reader.theme.$.theme$]).pipe(
+    const updateEntriesLayout$ = (entries) => rxjs.combineLatest([reader.spine.$.layout$, reader.theme.$.theme$]).pipe(
       operators.map(([, theme]) => ({
-        width: reader.context.getVisibleAreaRect().width,
+        width: reader.context.state.visibleAreaRect.width,
         theme
       })),
       operators.distinctUntilChanged(isShallowEqual),
@@ -6526,22 +6329,22 @@
         });
       })
     );
-    const updateEntriesVisibility$ = (entries) => reader.$.itemIsReady$.pipe(
+    const updateEntriesVisibility$ = (entries) => reader.spineItemManager.$.itemIsReady$.pipe(
       operators.tap(({ item, isReady }) => {
         var _a;
         (_a = entries[item.id]) == null ? void 0 : _a.style.setProperty(`visibility`, isReady ? `hidden` : `visible`);
       })
     );
-    const destroyEntries$ = (entries) => reader.$.itemsBeforeDestroy$.pipe(
+    const destroyEntries$ = (entries) => reader.spine.$.itemsBeforeDestroy$.pipe(
       operators.map(() => {
         Object.values(entries).forEach((element) => element.remove());
         return {};
       })
     );
-    const items$ = reader.spineItems$.pipe(
+    const items$ = reader.spine.$.spineItems$.pipe(
       operators.switchMap((items) => createEntries$(items)),
       operators.shareReplay(1),
-      operators.takeUntil(reader.context.$.destroy$)
+      operators.takeUntil(reader.context.destroy$)
     );
     items$.pipe(
       operators.switchMap((entries) => rxjs.merge(rxjs.of(entries), destroyEntries$(entries))),
@@ -6563,7 +6366,7 @@
     loadingElement.style.cssText = `
     height: 100%;
     width: 100%;
-    max-width: ${context.getVisibleAreaRect().width}px;
+    max-width: ${context.state.visibleAreaRect.width}px;
     text-align: center;
     display: flex;
     justify-content: center;
@@ -6603,6 +6406,155 @@
       return reader;
     };
   };
+  const createNormalizeEventForViewport = ({
+    iframeEventBridgeElement$,
+    locator
+  }) => {
+    const normalizeEventForViewport = (event) => {
+      var _a;
+      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)
+        return event;
+      const spineItem = locator.getSpineItemFromIframe(originalFrame);
+      if (!spineItem)
+        return event;
+      if (isPointerEvent(event)) {
+        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+        const newEvent = new PointerEvent(event.type, {
+          ...event,
+          pointerId: event.pointerId,
+          clientX,
+          clientY
+        });
+        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        return newEvent;
+      }
+      if (isMouseEvent(event)) {
+        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+        const newEvent = new MouseEvent(event.type, {
+          ...event,
+          clientX,
+          clientY
+        });
+        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        return newEvent;
+      }
+      if (isTouchEvent(event)) {
+        const touches = Array.from(event.touches).map((touch) => {
+          const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
+          return new Touch({
+            identifier: touch.identifier,
+            target: touch.target,
+            clientX,
+            clientY
+          });
+        });
+        const newEvent = new TouchEvent(event.type, {
+          touches,
+          changedTouches: touches,
+          targetTouches: touches
+        });
+        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        return newEvent;
+      }
+      return event;
+    };
+    return normalizeEventForViewport;
+  };
+  const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
+  const createIframeEventBridgeElement = (container) => {
+    const iframeEventBridgeElement = container.ownerDocument.createElement(`div`);
+    iframeEventBridgeElement.id = IFRAME_EVENT_BRIDGE_ELEMENT_ID;
+    iframeEventBridgeElement.style.cssText = `
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    `;
+    return iframeEventBridgeElement;
+  };
+  const pointerEvents = [
+    `pointercancel`,
+    `pointerdown`,
+    `pointerenter`,
+    `pointerleave`,
+    `pointermove`,
+    `pointerout`,
+    `pointerover`,
+    `pointerup`,
+    `touchstart`,
+    `touchend`
+  ];
+  const mouseEvents = [
+    `click`,
+    `mousedown`,
+    `mouseup`,
+    `mouseenter`,
+    `mouseleave`,
+    `mousemove`,
+    `mouseout`,
+    `mouseover`
+  ];
+  const passthroughEvents = [...pointerEvents, ...mouseEvents];
+  const eventsEnhancer = (next) => (options) => {
+    const iframeEventBridgeElement$ = new rxjs.BehaviorSubject(void 0);
+    const reader = next(options);
+    reader.hookManager.register(`item.onLoad`, ({ destroy, frame, itemId }) => {
+      const item = reader.spineItemManager.get(itemId);
+      if (!item)
+        return;
+      const unregister = passthroughEvents.map((event) => {
+        var _a;
+        const listener = (e) => {
+          var _a2;
+          let convertedEvent = e;
+          if (isPointerEvent(e)) {
+            convertedEvent = new PointerEvent(e.type, e);
+          }
+          if (isMouseEvent(e)) {
+            convertedEvent = new MouseEvent(e.type, e);
+          }
+          if (convertedEvent !== e) {
+            attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
+            (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
+          }
+        };
+        (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
+        return () => {
+          var _a2;
+          (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(event, listener);
+        };
+      });
+      item.selectionTracker.track(frame);
+      item.fingerTracker.track(frame);
+      destroy(() => {
+        unregister.forEach((cb) => cb());
+      });
+    });
+    reader.element$.pipe(
+      rxjs.tap((wrapper) => {
+        var _a;
+        const iframeEventBridgeElement = createIframeEventBridgeElement(wrapper);
+        wrapper.appendChild(iframeEventBridgeElement);
+        (_a = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a.remove();
+        iframeEventBridgeElement$.next(iframeEventBridgeElement);
+      }),
+      rxjs.takeUntil(reader.$.destroy$)
+    ).subscribe();
+    return {
+      ...reader,
+      events: {
+        normalizeEventForViewport: createNormalizeEventForViewport({
+          iframeEventBridgeElement$,
+          locator: reader.spine.locator
+        })
+      }
+    };
+  };
   const createReaderWithEnhancers = (
     //__
     publicApiEnhancer(
@@ -6622,8 +6574,10 @@
                                 hotkeysEnhancer(
                                   paginationEnhancer(
                                     progressionEnhancer(
-                                      // __
-                                      createReader
+                                      eventsEnhancer(
+                                        // __
+                                        createReader
+                                      )
                                     )
                                   )
                                 )