@prose-reader/core 1.56.0 → 1.57.0

package/dist/index.js

@@ -3,17 +3,17 @@ import { withLatestFrom, distinctUntilChanged, shareReplay, tap, pairwise, switc
 import { parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
-  reader.context$.pipe(takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
+  reader.context.state$.pipe(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`);
   });
@@ -102,7 +102,7 @@ const fontsEnhancer = (next) => (options) => {
     }
   `;
   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());
@@ -110,11 +110,15 @@ const fontsEnhancer = (next) => (options) => {
       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(
     pairwise(),
@@ -171,25 +175,25 @@ const hotkeysEnhancer = (next) => (options) => {
     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(takeUntil(reader.$.destroy$)).subscribe();
-  reader.spineItems$.pipe(
+  reader.spine.$.spineItems$.pipe(
     switchMap(
       (spineItems) => merge(
         ...spineItems.map(
@@ -205,7 +209,7 @@ const hotkeysEnhancer = (next) => (options) => {
 };
 const createMovingSafePan$ = (reader) => {
   let iframeOverlayForAnimationsElement;
-  const updateOverlayElement$ = reader.context$.pipe(
+  const updateOverlayElement$ = reader.context.state$.pipe(
     switchMap$1(({ containerElement }) => {
       if (!containerElement)
         return NEVER;
@@ -232,8 +236,8 @@ const createMovingSafePan$ = (reader) => {
       iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `hidden`);
     })
   );
-  const viewportFree$ = reader.$.viewportState$.pipe(filter((data) => data === `free`));
-  const viewportBusy$ = reader.$.viewportState$.pipe(filter((data) => data === `busy`));
+  const viewportFree$ = reader.viewportNavigator.$.state$.pipe(filter((data) => data === `free`));
+  const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(filter((data) => data === `busy`));
   const lockAfterViewportBusy$ = viewportBusy$.pipe(
     tap(() => {
       iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `visible`);
@@ -241,7 +245,7 @@ const createMovingSafePan$ = (reader) => {
   );
   const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(take(1));
   const pageTurnMode$ = reader.settings.settings$.pipe(
-    map$1(() => reader.settings.getSettings().computedPageTurnMode),
+    map$1(() => reader.settings.settings.computedPageTurnMode),
     distinctUntilChanged()
   );
   const handleViewportLock$ = pageTurnMode$.pipe(
@@ -269,9 +273,9 @@ const mapKeysTo = (keys) => {
   });
 };
 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()) ?? {};
@@ -297,9 +301,9 @@ const layoutEnhancer = (next) => (options) => {
     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;
@@ -307,7 +311,7 @@ const layoutEnhancer = (next) => (options) => {
       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();
@@ -349,7 +353,7 @@ const layoutEnhancer = (next) => (options) => {
   fixReflowable(reader);
   let observer;
   if (options.layoutAutoResize === `container`) {
-    reader.context$.pipe(
+    reader.context.state$.pipe(
       map$1((state) => state.containerElement),
       filter(isDefined),
       distinctUntilChanged(),
@@ -502,15 +506,15 @@ const linksEnhancer = (next) => (options) => {
       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) {
@@ -534,27 +538,27 @@ const linksEnhancer = (next) => (options) => {
 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();
@@ -562,7 +566,7 @@ const createNavigator = (reader) => {
       return goToPreviousSpineItem();
     },
     goToRightSpineItem: () => {
-      if (reader.settings.getSettings().computedPageTurnDirection === "vertical")
+      if (reader.settings.settings.computedPageTurnDirection === "vertical")
         return;
       if (reader.context.isRTL()) {
         return goToPreviousSpineItem();
@@ -573,7 +577,7 @@ const createNavigator = (reader) => {
 };
 const createState = (reader) => {
   return reader.pagination.paginationInfo$.pipe(
-    withLatestFrom$1(reader.context.$.manifest$, reader.settings.settings$),
+    withLatestFrom$1(reader.context.manifest$, reader.settings.settings$),
     map(([paginationInfo, manifest, { computedPageTurnDirection }]) => {
       const numberOfSpineItems = (manifest == null ? void 0 : manifest.spineItems.length) ?? 0;
       const isAtAbsoluteBeginning = paginationInfo.beginSpineItemIndex === 0 && paginationInfo.beginPageIndexInSpineItem === 0;
@@ -637,8 +641,8 @@ const buildChapterInfoFromSpineItem = (manifest, item) => {
   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(
@@ -652,7 +656,7 @@ const getChaptersInfo = (reader) => {
   );
 };
 const trackChapterInfo = (reader) => {
-  return reader.spineItems$.pipe(
+  return reader.spine.$.spineItems$.pipe(
     startWith([]),
     map(() => getChaptersInfo(reader))
   );
@@ -743,7 +747,7 @@ const getClosestValidOffsetFromApproximateOffsetInPages = (offset, pageWidth, it
 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;
   }
@@ -752,11 +756,11 @@ const getSpineItemNumberOfPages = ({ spineItem, reader }) => {
   }
   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(
     debounceTime(10, animationFrameScheduler),
     withLatestFrom$1(reader.pagination.paginationInfo$),
     map(() => {
@@ -779,8 +783,8 @@ const trackTotalPages = (reader) => {
 };
 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,
@@ -809,13 +813,13 @@ const mapPaginationInfoToExtendedInfo = (reader) => (paginationInfo, chaptersInf
       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) => {
@@ -911,18 +915,22 @@ const themeEnhancer = (next) => (options) => {
     };
   };
   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(
     tap((items) => items.map(({ element }) => applyChangeToSpineItemElement({ container: element }))),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
@@ -959,7 +967,7 @@ const createElementZoomer = (reader) => {
     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 = `
@@ -1017,6 +1025,7 @@ const createElementZoomer = (reader) => {
         `transform`,
         `translate3d(${imgLastPosition.x}px, ${imgLastPosition.y}px, 0px) scale3d(${baseScale}, ${baseScale}, 1)`
       );
+      console.log({ delta, imgLastPosition });
       movingLastDelta = delta;
     }
     if (isLast) {
@@ -1134,7 +1143,7 @@ const zoomEnhancer = (next) => (options) => {
   const elementZoomer = createElementZoomer(reader);
   const viewportZoomer = createViewportZoomer(reader);
   const currentZoomerSubject$ = new 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();
@@ -1217,143 +1226,100 @@ const isUsingSpreadMode = ({
   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 BehaviorSubject({});
-  const manifest$ = stateSubject.pipe(
-    map$1((state) => state.manifest),
-    filter(isDefined),
-    distinctUntilChanged()
-  );
-  const containerElement$ = stateSubject.pipe(
-    map$1((state) => state.containerElement),
-    filter(isDefined),
-    distinctUntilChanged()
-  );
-  const hasVerticalWriting$ = stateSubject.pipe(
-    map$1((state) => state.hasVerticalWriting),
-    filter(isDefined),
-    distinctUntilChanged()
-  );
-  const isUsingSpreadMode$ = stateSubject.pipe(
-    map$1((state) => state.isUsingSpreadMode),
-    distinctUntilChanged()
-  );
-  const visibleAreaRect = {
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0
-  };
-  const marginTop = 0;
-  const marginBottom = 0;
-  const destroy$ = new 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 BehaviorSubject({
+      marginBottom: 0,
+      marginTop: 0,
+      calculatedInnerMargin: 0,
+      visibleAreaRect: {
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      }
+    });
+    this.destroy$ = new Subject();
+    this.state$ = this._stateSubject.pipe(distinctUntilChanged(isShallowEqual));
+    this.manifest$ = this._stateSubject.pipe(
+      map$1((state) => state.manifest),
+      filter(isDefined),
+      distinctUntilChanged()
+    );
+    this.containerElement$ = this._stateSubject.pipe(
+      map$1((state) => state.containerElement),
+      filter(isDefined),
+      distinctUntilChanged()
+    );
+    this.hasVerticalWriting$ = this._stateSubject.pipe(
+      map$1((state) => state.hasVerticalWriting),
+      filter(isDefined),
+      distinctUntilChanged()
+    );
+    this.isUsingSpreadMode$ = this._stateSubject.pipe(
+      map$1((state) => state.isUsingSpreadMode),
+      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$ = merge(hasVerticalWriting$, manifest$);
-  recomputeSettings$.pipe(
-    withLatestFrom(hasVerticalWriting$, manifest$),
-    tap(([, hasVerticalWriting, manifest]) => {
-      settings.recompute({ hasVerticalWriting, manifest });
-    }),
-    takeUntil$1(destroy$)
-  ).subscribe();
-  settings.$.settings$.pipe(
-    map$1(({ forceSinglePageMode }) => forceSinglePageMode),
-    distinctUntilChanged(),
-    withLatestFrom(manifest$),
-    tap(([forceSinglePageMode, manifest]) => {
-      setState({
-        isUsingSpreadMode: isUsingSpreadMode({
-          manifest,
-          visibleAreaRect,
-          forceSinglePageMode
-        })
-      });
-    }),
-    takeUntil$1(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`;
@@ -1406,11 +1372,6 @@ const createFrame$ = Report.measurePerformance(`SpineItemFrame createFrame`, Inf
   `;
   return 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;
@@ -1463,15 +1424,14 @@ const createHtmlPageFromResource = async (resourceResponse, item) => {
   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 Subject();
   const loadSubject$ = new Subject();
@@ -1479,10 +1439,9 @@ const createLoader = ({
   const frameElementSubject$ = new BehaviorSubject(void 0);
   const isLoadedSubject$ = new BehaviorSubject(false);
   const isReadySubject$ = new BehaviorSubject(false);
-  let onLoadHookReturns = [];
   let computedStyleAfterLoad;
   const makeItHot = (source$) => {
-    source$.pipe(takeUntil$1(context.$.destroy$)).subscribe();
+    source$.pipe(takeUntil$1(context.destroy$)).subscribe();
     return source$;
   };
   const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
@@ -1496,14 +1455,7 @@ const createLoader = ({
     withLatestFrom(frameElementSubject$),
     filter(([_, frame]) => !!frame),
     map$1(([, 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);
     }),
@@ -1548,8 +1500,7 @@ const createLoader = ({
             return EMPTY;
           return fromEvent(frame, `load`).pipe(
             take(1),
-            withLatestFrom(hooks$),
-            mergeMap(([_, hooks]) => {
+            mergeMap(() => {
               var _a, _b;
               const body = (_a = frame.contentDocument) == null ? void 0 : _a.body;
               if (!body) {
@@ -1560,21 +1511,13 @@ const createLoader = ({
               if ((frame == null ? void 0 : frame.contentDocument) && body) {
                 computedStyleAfterLoad = (_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.getComputedStyle(body);
               }
-              if (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 of(frame);
+              return hookManager.execute(`item.onLoad`, item.id, {
+                itemId: item.id,
+                frame
+              }).pipe(map$1(() => frame));
             })
           );
         }),
@@ -1623,14 +1566,19 @@ const createLoader = ({
     }
   };
 };
+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 Subject();
   const {
@@ -1639,7 +1587,7 @@ const createFrameItem = ({
     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({
@@ -1727,7 +1675,7 @@ const createFrameItem = ({
       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`);
         }
       }
@@ -1837,198 +1785,24 @@ const createSelectionTracker = () => {
     $: 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];
 const createCommonSpineItem = ({
   item,
   context,
   parentElement,
-  iframeEventBridgeElement$,
-  hooks$,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
-  var _a;
   const destroySubject$ = new 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(map$1((hooks) => [...hooks, ...frameHooks])),
+    hookManager,
     viewportState$,
     settings
   });
@@ -2051,12 +1825,12 @@ const createCommonSpineItem = ({
     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 }) => {
@@ -2077,10 +1851,10 @@ const createCommonSpineItem = ({
     }
   };
   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);
@@ -2090,8 +1864,8 @@ const createCommonSpineItem = ({
   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();
@@ -2136,16 +1910,12 @@ const createCommonSpineItem = ({
   }) => {
     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;
@@ -2155,20 +1925,14 @@ const createCommonSpineItem = ({
     };
   };
   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();
@@ -2191,16 +1955,12 @@ const createCommonSpineItem = ({
       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(
     withLatestFrom(spineItemFrame.$.isReady$),
@@ -2239,8 +1999,8 @@ const createCommonSpineItem = ({
       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
@@ -2251,7 +2011,7 @@ const createCommonSpineItem = ({
      * be confined to a single page.
      */
     getReadingDirection: () => {
-      return spineItemFrame.getReadingDirection() || context.getReadingDirection();
+      return spineItemFrame.getReadingDirection() || context.readingDirection;
     },
     manipulateSpineItem,
     executeOnLayoutBeforeMeasurementHook,
@@ -2266,7 +2026,7 @@ const createCommonSpineItem = ({
     }
   };
 };
-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}`);
@@ -2274,12 +2034,8 @@ const createContainerElement$1 = (containerElement, item, hooks$) => {
     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`);
@@ -2294,42 +2050,6 @@ const createOverlayElement = (containerElement, item) => {
   `;
   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 {
@@ -2342,19 +2062,17 @@ const createPrePaginatedSpineItem = ({
   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 = ({
@@ -2365,15 +2083,15 @@ const createPrePaginatedSpineItem = ({
     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
@@ -2516,19 +2234,17 @@ const createReflowableSpineItem = ({
   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;
@@ -2541,12 +2257,12 @@ const createReflowableSpineItem = ({
     (_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) {
@@ -2566,8 +2282,8 @@ const createReflowableSpineItem = ({
         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)
         );
@@ -2580,7 +2296,7 @@ const createReflowableSpineItem = ({
             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({
@@ -2792,91 +2508,29 @@ const createSpineItem = ({
   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;
@@ -3778,9 +3432,7 @@ const createSpine = ({
   element$,
   context,
   pagination,
-  iframeEventBridgeElement$,
   spineItemManager,
-  hooks$,
   spineItemLocator,
   spineLocator,
   cfiLocator,
@@ -3788,18 +3440,13 @@ const createSpine = ({
   navigationAdjusted$,
   currentNavigationPosition$,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
   const spineItems$ = new Subject();
   const itemsBeforeDestroySubject$ = new Subject();
   const subject = new Subject();
   const containerElement$ = new BehaviorSubject(noopElement$1);
-  const eventsHelper = createEventsHelper({
-    context,
-    spineItemManager,
-    iframeEventBridgeElement$,
-    locator: spineLocator
-  });
   let selectionSubscription;
   const reload = (manifest) => {
     itemsBeforeDestroySubject$.next();
@@ -3808,11 +3455,10 @@ const createSpine = ({
       const spineItem = createSpineItem({
         item: resource,
         containerElement: containerElement$.getValue(),
-        iframeEventBridgeElement$,
         context,
-        hooks$,
         viewportState$,
-        settings
+        settings,
+        hookManager
       });
       spineItemManager.add(spineItem);
     });
@@ -3831,7 +3477,7 @@ const createSpine = ({
     var _a;
     (_a = spineItemManager.get(id)) == null ? void 0 : _a.manipulateSpineItem(cb);
   };
-  context.$.manifest$.pipe(tap(reload), takeUntil$1(context.$.destroy$)).subscribe();
+  context.manifest$.pipe(tap(reload), takeUntil$1(context.destroy$)).subscribe();
   const waitForViewportFree$ = viewportState$.pipe(
     filter((v) => v === `free`),
     take(1)
@@ -3923,7 +3569,7 @@ const createSpine = ({
         Report.error(e);
         return EMPTY;
       }),
-      takeUntil$1(context.$.destroy$)
+      takeUntil$1(context.destroy$)
     )
   ).subscribe();
   const itemUpdateOnNavigation$ = navigation$.pipe(
@@ -3969,7 +3615,7 @@ const createSpine = ({
              *
              * The cfi is later adjusted with heavy dom lookup once the viewport is free.
              */
-            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && 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)
             ),
@@ -3981,7 +3627,7 @@ const createSpine = ({
             spineItem: endSpineItem,
             spineItemIndex: endItemIndex,
             pageIndex: endPageIndex,
-            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && 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)
             ),
@@ -4005,13 +3651,13 @@ const createSpine = ({
       time2();
     }),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   itemUpdateOnNavigation$.pipe(
     switchMap$1((data) => {
       return adjustPagination(data.position).pipe(takeUntil$1(spineItemManager.$.layout$));
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
   merge(
     /**
@@ -4045,7 +3691,7 @@ const createSpine = ({
         take(1)
       );
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
   const elementSub = element$.pipe().subscribe((element) => {
     const containerElement = createContainerElement(element.ownerDocument);
@@ -4057,7 +3703,6 @@ const createSpine = ({
     locator: spineLocator,
     spineItemLocator,
     cfiLocator,
-    normalizeEventForViewport: eventsHelper.normalizeEventForViewport,
     manipulateSpineItems,
     manipulateSpineItem,
     destroy: () => {
@@ -4104,16 +3749,16 @@ const createSpineItemManager = ({ context, settings }) => {
   const orderedSpineItemsSubject$ = new 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;
           }
@@ -4139,10 +3784,10 @@ const createSpineItemManager = ({ context, settings }) => {
         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({
@@ -4173,8 +3818,8 @@ const createSpineItemManager = ({ context, settings }) => {
         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
@@ -4209,9 +3854,9 @@ const createSpineItemManager = ({ context, settings }) => {
   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
@@ -4259,18 +3904,22 @@ const createSpineItemManager = ({ context, settings }) => {
   };
   const add = (spineItem) => {
     orderedSpineItemsSubject$.value.push(spineItem);
-    spineItem.$.contentLayout$.pipe(takeUntil$1(context.$.destroy$)).subscribe(() => {
+    spineItem.$.contentLayout$.pipe(takeUntil$1(context.destroy$)).subscribe(() => {
       layout();
     });
     spineItem.$.loaded$.pipe(
       tap(() => {
         if (spineItem.isUsingVerticalWriting()) {
-          context.setHasVerticalWriting(true);
+          context.update({
+            hasVerticalWriting: true
+          });
         } else {
-          context.setHasVerticalWriting(false);
+          context.update({
+            hasVerticalWriting: false
+          });
         }
       }),
-      takeUntil$1(context.$.destroy$)
+      takeUntil$1(context.destroy$)
     ).subscribe();
     spineItem.load();
   };
@@ -4315,7 +3964,154 @@ const createSpineItemManager = ({ context, settings }) => {
         })
       )
     }
-  };
+  };
+};
+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) => ({
@@ -4537,7 +4333,7 @@ const createNavigationResolver = ({
     { 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 };
   };
@@ -4576,7 +4372,7 @@ const createNavigationResolver = ({
     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) {
@@ -4595,7 +4391,7 @@ const createNavigationResolver = ({
     }
   };
   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) {
@@ -4619,7 +4415,7 @@ const createNavigationResolver = ({
     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(
@@ -4633,7 +4429,7 @@ const createNavigationResolver = ({
           )
         );
       }
-      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);
@@ -4647,7 +4443,7 @@ const createNavigationResolver = ({
     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(
@@ -4655,7 +4451,7 @@ const createNavigationResolver = ({
           )
         );
       }
-      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);
@@ -4668,7 +4464,7 @@ const createNavigationResolver = ({
     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) {
@@ -4697,15 +4493,15 @@ const createNavigationResolver = ({
     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, from2) => {
-    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.settings.computedPageTurnDirection;
     if (pageTurnDirection === `vertical`) {
       return to.y > from2.y;
     }
@@ -4749,14 +4545,14 @@ const createScrollViewportNavigator = ({
   );
   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(
     map$1(({ computedPageTurnMode }) => computedPageTurnMode),
     distinctUntilChanged(),
     switchMap$1((mode) => iif(() => mode === `controlled`, EMPTY, source))
@@ -4766,7 +4562,7 @@ const createScrollViewportNavigator = ({
       filter(isDefined),
       switchMap$1((element) => fromEvent(element, `scroll`))
     )
-  ).pipe(onlyUserScrollFilter, share(), takeUntil$1(context.$.destroy$));
+  ).pipe(onlyUserScrollFilter, share(), takeUntil$1(context.destroy$));
   const getScaledDownPosition = ({ x, y }) => {
     var _a, _b;
     const spineElement = spine.getElement();
@@ -4814,7 +4610,7 @@ const createScrollViewportNavigator = ({
   const userScrollEnd$ = userScroll$.pipe(
     debounceTime$1(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   const state$ = merge(
     userScroll$.pipe(
@@ -4907,7 +4703,7 @@ const createManualViewportNavigator = ({
     filter((e) => e.type === `pageIndex`),
     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;
       }
@@ -5041,11 +4837,11 @@ const createPanViewportNavigator = ({
     `${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 };
@@ -5105,7 +4901,7 @@ const createPanViewportNavigator = ({
   );
   const snapNavigation$ = navigationTriggerSubject$.pipe(
     filter((e) => e.type === `snap`),
-    withLatestFrom$1(settings.$.settings$),
+    withLatestFrom$1(settings.settings$),
     switchMap$1(
       ([
         {
@@ -5113,11 +4909,11 @@ const createPanViewportNavigator = ({
         },
         { navigationSnapThreshold }
       ]) => {
-        const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+        const pageTurnDirection = settings.settings.computedPageTurnDirection;
         const movingForward = navigator2.isNavigationGoingForwardFrom(to, from2);
         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
@@ -5154,7 +4950,7 @@ const createViewportNavigator = ({
   parentElement$,
   cfiLocator,
   spineLocator,
-  hooks$,
+  hookManager,
   spine,
   settings
 }) => {
@@ -5176,7 +4972,7 @@ const createViewportNavigator = ({
   const adjustNavigationSubject$ = new 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 };
@@ -5220,13 +5016,13 @@ const createViewportNavigator = ({
   const viewportNavigatorsSharedState$ = merge(...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2));
   let lastUserExpectedNavigation;
   const makeItHot = (source$) => {
-    source$.pipe(takeUntil$1(context.$.destroy$)).subscribe();
+    source$.pipe(takeUntil$1(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");
@@ -5237,11 +5033,7 @@ const createViewportNavigator = ({
       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 }
   );
@@ -5249,7 +5041,7 @@ const createViewportNavigator = ({
     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);
@@ -5294,7 +5086,7 @@ const createViewportNavigator = ({
   layoutSubject$.subscribe(() => {
     currentViewportPositionMemoUnused = void 0;
   });
-  const layoutChangeSettings$ = settings.$.settings$.pipe(
+  const layoutChangeSettings$ = settings.settings$.pipe(
     mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
     distinctUntilChanged(isShallowEqual),
     skip(1)
@@ -5302,7 +5094,7 @@ const createViewportNavigator = ({
   const layout$ = merge(layoutSubject$, layoutChangeSettings$).pipe(
     withLatestFrom(element$),
     tap(([, element]) => {
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         element.style.removeProperty(`transform`);
         element.style.removeProperty(`transition`);
         element.style.overflow = `scroll`;
@@ -5354,11 +5146,11 @@ const createViewportNavigator = ({
       return { ...event, lastUserExpectedNavigation };
     }),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   const navigationWhichRequireManualAdjust$ = navigation$.pipe(
     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;
@@ -5370,7 +5162,7 @@ const createViewportNavigator = ({
     navigationWhichRequireManualAdjust$
   ).pipe(
     map$1(({ animation, position }) => {
-      const shouldAnimate = !(!animation || animation === `turn` && settings.getSettings().computedPageTurnAnimation === `none`);
+      const shouldAnimate = !(!animation || animation === `turn` && settings.settings.computedPageTurnAnimation === `none`);
       return {
         type: `manualAdjust`,
         shouldAnimate,
@@ -5392,8 +5184,8 @@ const createViewportNavigator = ({
     switchMap$1(([, currentEvent]) => {
       if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`)
         return 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 of(currentEvent).pipe(
         /**
          * @important
@@ -5427,23 +5219,22 @@ const createViewportNavigator = ({
          * need to adjust to anchor to the payload position. This is because we use viewport computed position,
          * not the value set by `setProperty`
          */
-        withLatestFrom(hooks$),
-        tap(([data, hooks]) => {
+        tap((data) => {
           if (pageTurnAnimation !== `fade`) {
-            adjustReadingOffset(data.position, hooks);
+            adjustReadingOffset(data.position);
           }
         }),
         currentEvent.shouldAnimate ? delay(animationDuration / 2, animationFrameScheduler) : identity,
-        tap(([data, hooks]) => {
+        tap((data) => {
           if (pageTurnAnimation === `fade`) {
-            adjustReadingOffset(data.position, hooks);
+            adjustReadingOffset(data.position);
             element$.getValue().style.setProperty(`opacity`, `1`);
           }
         }),
         currentEvent.shouldAnimate ? delay(animationDuration / 2, animationFrameScheduler) : identity,
-        tap(([data, hooks]) => {
+        tap((data) => {
           if (pageTurnAnimation === `fade`) {
-            adjustReadingOffset(data.position, hooks);
+            adjustReadingOffset(data.position);
           }
         }),
         takeUntil$1(
@@ -5455,7 +5246,7 @@ const createViewportNavigator = ({
       );
     }),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   const adjustmentState$ = merge(
     merge(manualAdjust$).pipe(map$1(() => `start`)),
@@ -5510,7 +5301,7 @@ const createViewportNavigator = ({
     share()
   );
   const parentElementSub = parentElement$.pipe(filter(isDefined), 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);
@@ -5546,19 +5337,15 @@ const createViewportNavigator = ({
     }
   };
 };
-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,
@@ -5599,7 +5386,7 @@ const createLocationResolver = ({
       const spineItem = spineItemManager.getAll().find((item) => {
         const { left, right, bottom, top } = spineItemManager.getAbsolutePositionOf(item);
         const isWithinXAxis = position.x >= left && position.x < right;
-        if (settings.getSettings().computedPageTurnDirection === `horizontal`) {
+        if (settings.settings.computedPageTurnDirection === `horizontal`) {
           return isWithinXAxis;
         } else {
           return isWithinXAxis && position.y >= top && position.y < bottom;
@@ -5626,7 +5413,7 @@ const createLocationResolver = ({
     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;
@@ -5747,80 +5534,170 @@ const createCfiLocator = ({
     generateFromRange
   };
 };
-const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
-const createSettings = (initialSettings) => {
-  const mergedSettings = {
-    forceSinglePageMode: false,
-    pageTurnAnimation: `none`,
-    computedPageTurnAnimation: `none`,
-    pageTurnDirection: `horizontal`,
-    computedPageTurnDirection: `horizontal`,
-    pageTurnAnimationDuration: void 0,
-    computedPageTurnAnimationDuration: 0,
-    pageTurnMode: `controlled`,
+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 BehaviorSubject(mergedSettings);
-  const setSettings = (newSettings, options) => {
-    if (Object.keys(newSettings).length === 0)
-      return;
-    const newMergedSettings = { ...settingsSubject$.value, ...newSettings };
-    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
-    settingsSubject$.next(newMergedSettings);
-  };
-  const recompute = (options) => {
-    const newMergedSettings = { ...settingsSubject$.value };
-    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
-    settingsSubject$.next(newMergedSettings);
-  };
-  const destroy = () => {
-    settingsSubject$.complete();
-  };
-  return {
-    getSettings: () => settingsSubject$.value,
-    setSettings,
-    recompute,
-    destroy,
-    $: {
-      settings$: settingsSubject$.asObservable().pipe(distinctUntilChanged(isShallowEqual))
-    }
+    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 BehaviorSubject(settings);
+    this.settings$ = this._settingsSubject$.asObservable().pipe(distinctUntilChanged(isShallowEqual));
+    const recomputeSettingsOnContextChange$ = combineLatest([context.hasVerticalWriting$, context.manifest$]).pipe(
+      tap(() => {
+        this._updateSettings(this.settings);
+      })
+    );
+    const updateContextOnSettingsChanges$ = this._settingsSubject$.pipe(
+      tap(({ forceSinglePageMode }) => {
+        context.update({ forceSinglePageMode });
+      })
+    );
+    merge(recomputeSettingsOnContextChange$, updateContextOnSettingsChanges$).pipe(takeUntil$1(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 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 = () => of(void 0);
+      const destroySubject = new Subject();
+      const destroy = (fn) => {
+        userDestroyFn = fn;
+      };
+      const destroyFn = () => {
+        destroySubject.next();
+        destroySubject.complete();
+        const result = userDestroyFn();
+        return result ?? of(void 0);
+      };
+      const execution = hook.runFn({ ...params, destroy$: destroySubject.asObservable(), destroy });
+      this._hookExecutions.push({
+        name,
+        id,
+        destroyFn,
+        ref: hook
+      });
+      return execution;
+    });
+    return 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 combineLatest(destroyFns);
+  }
+}
+const createReader = (inputSettings) => {
   const stateSubject$ = new BehaviorSubject({
     supportedPageTurnAnimation: [`fade`, `none`, `slide`],
     supportedPageTurnMode: [`controlled`, `scrollable`],
@@ -5829,24 +5706,23 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
   });
   const destroy$ = new Subject();
   const selectionSubject$ = new Subject();
-  const hooksSubject$ = new BehaviorSubject(initialHooks || []);
   const navigationSubject = new Subject();
   const navigationAdjustedSubject = new Subject();
   const currentNavigationPositionSubject$ = new BehaviorSubject({ x: 0, y: 0 });
   const viewportStateSubject = new BehaviorSubject(`free`);
-  const settings = createSettings(inputSettings);
-  const context = createContext(settings);
-  const spineItemManager = createSpineItemManager({ context, 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 BehaviorSubject(void 0);
   const element$ = elementSubject$.pipe(filter(isDefined));
-  const iframeEventBridgeElement$ = new BehaviorSubject(void 0);
   const spineItemLocator = createLocationResolver$1({ context });
   const spineLocator = createLocationResolver({
     context,
     spineItemManager,
     spineItemLocator,
-    settings
+    settings: settingsManager
   });
   const cfiLocator = createCfiLocator({
     spineItemManager,
@@ -5856,19 +5732,18 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
   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,
@@ -5877,9 +5752,9 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     parentElement$: elementSubject$,
     cfiLocator,
     spineLocator,
-    hooks$: hooksSubject$,
+    hookManager,
     spine,
-    settings
+    settings: settingsManager
   });
   viewportNavigator.$.state$.subscribe(viewportStateSubject);
   viewportNavigator.$.navigation$.subscribe(navigationSubject);
@@ -5905,30 +5780,29 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     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 });
@@ -5936,9 +5810,6 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
       viewportNavigator.goToCfi(loadOptions.cfi, { animate: false });
     }
   };
-  const registerHook = (name, fn) => {
-    hooksSubject$.next([...hooksSubject$.getValue(), { name, fn }]);
-  };
   spine.$.$.pipe(
     tap((event) => {
       if (event.type === `onSelectionChange`) {
@@ -5951,18 +5822,18 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     switchMap(({ adjustedSpinePosition }) => {
       return spine.adjustPagination(adjustedSpinePosition).pipe(takeUntil$1(navigation$));
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
-  merge(context.$.state$, settings.$.settings$).pipe(
+  merge(context.state$, settingsManager.settings$).pipe(
     map$1(() => void 0),
-    withLatestFrom(context.$.state$),
+    withLatestFrom(context.state$),
     map$1(([, { 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
       };
     }),
     distinctUntilChanged(isShallowEqual),
@@ -5970,7 +5841,7 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
       ({ 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`]
         };
@@ -5979,16 +5850,13 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     takeUntil$1(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();
@@ -5996,43 +5864,16 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
   };
   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(),
       /**
@@ -6041,21 +5882,12 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
        * have an effect.
        * It can typically be used to hide a loading indicator.
        */
-      loadStatus$: context.$.manifest$.pipe(map$1((manifest) => manifest ? "ready" : "idle")),
+      loadStatus$: context.manifest$.pipe(map$1((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;
@@ -6069,19 +5901,6 @@ const createWrapperElement = (containerElement) => {
   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) => {
@@ -6206,9 +6025,9 @@ const createResourcesManager = (context) => {
     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) => {
@@ -6242,9 +6061,9 @@ const createResourcesManager = (context) => {
         })
       );
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
-  const onLoad$ = context.$.manifest$.pipe(
+  const onLoad$ = context.manifest$.pipe(
     tap(() => {
       uniqueID = Date.now().toString();
     })
@@ -6268,7 +6087,7 @@ const createResourcesManager = (context) => {
         })
       );
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
   const destroy = () => {
     cache$.complete();
@@ -6281,14 +6100,6 @@ const createResourcesManager = (context) => {
 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();
@@ -6299,8 +6110,8 @@ const resourcesEnhancer = (next) => (options) => {
     //   ...reader.$,
     //   errors$: merge(reader.$.errors$, errorsSubject$.asObservable())
     // },
-    destroy,
-    load
+    destroy
+    // load,
   };
 };
 const mediaEnhancer = (next) => (options) => {
@@ -6351,7 +6162,7 @@ const mediaEnhancer = (next) => (options) => {
       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`);
@@ -6359,10 +6170,10 @@ const mediaEnhancer = (next) => (options) => {
       elementObserver.observe(element);
       return () => elementObserver.unobserve(element);
     });
-    return () => {
+    destroy2(() => {
       frameObserver.unobserve(frame);
       unobserveElements.forEach((unobserve) => unobserve());
-    };
+    });
   });
   const destroy = () => {
     frameObserver.disconnect();
@@ -6378,16 +6189,16 @@ const progressionEnhancer = (next) => (options) => {
   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 {
@@ -6405,11 +6216,11 @@ const progressionEnhancer = (next) => (options) => {
   };
   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 {
@@ -6431,67 +6242,59 @@ const accessibilityEnhancer = (next) => (options) => {
       }
     });
   }, {});
-  reader.registerHook(`item.onLoad`, ({ addStyle, frame }) => {
+  reader.hookManager.register(`item.onLoad`, ({ itemId, frame, destroy }) => {
     var _a;
-    addStyle(
-      `prose-reader-accessibility`,
+    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;
+        }
       `
-      :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`;
@@ -6512,9 +6315,9 @@ const loadingEnhancer = (next) => (options) => {
       };
     }, {})
   );
-  const updateEntriesLayout$ = (entries) => combineLatest([reader.$.layout$, reader.theme.$.theme$]).pipe(
+  const updateEntriesLayout$ = (entries) => combineLatest([reader.spine.$.layout$, reader.theme.$.theme$]).pipe(
     map$1(([, theme]) => ({
-      width: reader.context.getVisibleAreaRect().width,
+      width: reader.context.state.visibleAreaRect.width,
       theme
     })),
     distinctUntilChanged(isShallowEqual),
@@ -6525,22 +6328,22 @@ const loadingEnhancer = (next) => (options) => {
       });
     })
   );
-  const updateEntriesVisibility$ = (entries) => reader.$.itemIsReady$.pipe(
+  const updateEntriesVisibility$ = (entries) => reader.spineItemManager.$.itemIsReady$.pipe(
     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(
     map$1(() => {
       Object.values(entries).forEach((element) => element.remove());
       return {};
     })
   );
-  const items$ = reader.spineItems$.pipe(
+  const items$ = reader.spine.$.spineItems$.pipe(
     switchMap$1((items) => createEntries$(items)),
     shareReplay(1),
-    takeUntil$1(reader.context.$.destroy$)
+    takeUntil$1(reader.context.destroy$)
   );
   items$.pipe(
     switchMap$1((entries) => merge(of(entries), destroyEntries$(entries))),
@@ -6562,7 +6365,7 @@ const createLoadingElementContainer = (containerElement, context) => {
   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;
@@ -6602,6 +6405,155 @@ const publicApiEnhancer = (next) => {
     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 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(
+    tap$1((wrapper) => {
+      var _a;
+      const iframeEventBridgeElement = createIframeEventBridgeElement(wrapper);
+      wrapper.appendChild(iframeEventBridgeElement);
+      (_a = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a.remove();
+      iframeEventBridgeElement$.next(iframeEventBridgeElement);
+    }),
+    takeUntil(reader.$.destroy$)
+  ).subscribe();
+  return {
+    ...reader,
+    events: {
+      normalizeEventForViewport: createNormalizeEventForViewport({
+        iframeEventBridgeElement$,
+        locator: reader.spine.locator
+      })
+    }
+  };
+};
 const createReaderWithEnhancers = (
   //__
   publicApiEnhancer(
@@ -6621,8 +6573,10 @@ const createReaderWithEnhancers = (
                               hotkeysEnhancer(
                                 paginationEnhancer(
                                   progressionEnhancer(
-                                    // __
-                                    createReader
+                                    eventsEnhancer(
+                                      // __
+                                      createReader
+                                    )
                                   )
                                 )
                               )