@prose-reader/core 1.56.0 → 1.58.0

package/dist/index.umd.cjs

@@ -4,17 +4,16 @@
   "use strict";
   const chromeEnhancer = (next) => (options) => {
     const reader = next(options);
-    reader.context$.pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
-      if (!containerElement)
-        return;
+    reader.context.state$.pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
+      if (!containerElement) return;
       const onScroll = () => {
-        if (reader.settings.getSettings().computedPageTurnMode === `controlled`) {
+        if (reader.settings.settings.computedPageTurnMode === `controlled`) {
           containerElement.scrollTo(0, 0);
         }
       };
       containerElement.addEventListener(`scroll`, onScroll);
     });
-    reader.registerHook(`item.onLoad`, ({ frame }) => {
+    reader.hookManager.register(`item.onLoad`, ({ frame }) => {
       var _a;
       (_a = frame.contentDocument) == null ? void 0 : _a.body.setAttribute(`tabindex`, `-1`);
     });
@@ -55,8 +54,7 @@
   const groupBy = (list, getKey) => list.reduce(
     (previous, currentItem) => {
       const group = getKey(currentItem);
-      if (!previous[group])
-        previous[group] = [];
+      if (!previous[group]) previous[group] = [];
       previous[group].push(currentItem);
       return previous;
     },
@@ -76,7 +74,12 @@
     });
   };
   const fontsEnhancer = (next) => (options) => {
-    const { fontScale = 1, lineHeight = `publisher`, fontWeight = `publisher`, fontJustification = `publisher` } = options;
+    const {
+      fontScale = 1,
+      lineHeight = `publisher`,
+      fontWeight = `publisher`,
+      fontJustification = `publisher`
+    } = options;
     const changes$ = new rxjs.Subject();
     const settings$ = new rxjs.BehaviorSubject({
       fontScale,
@@ -103,7 +106,7 @@
     }
   `;
     const applyChangeToSpineItem = (requireLayout) => {
-      reader.manipulateSpineItems(({ removeStyle, addStyle, item }) => {
+      reader.spine.manipulateSpineItems(({ removeStyle, addStyle, item }) => {
         if (item.renditionLayout !== `pre-paginated`) {
           removeStyle(`prose-reader-fonts`);
           addStyle(`prose-reader-fonts`, getStyle());
@@ -111,19 +114,21 @@
         return requireLayout;
       });
     };
-    reader.registerHook(`item.onLoad`, ({ removeStyle, addStyle, item }) => {
-      if (item.renditionLayout !== `pre-paginated`) {
-        removeStyle(`prose-reader-fonts`);
-        addStyle(`prose-reader-fonts`, getStyle());
-      }
+    reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+      const item = reader.spineItemManager.get(itemId);
+      item == null ? void 0 : item.manipulateSpineItem(({ addStyle, removeStyle }) => {
+        if (item.item.renditionLayout !== `pre-paginated`) {
+          removeStyle(`prose-reader-fonts`);
+          addStyle(`prose-reader-fonts`, getStyle());
+        }
+        return false;
+      });
     });
     const shouldRequireLayout = (source) => source.pipe(
       operators.pairwise(),
       rxjs.map(([old, latest]) => {
-        if (latest.fontScale !== old.fontScale)
-          return true;
-        if (latest.lineHeight !== old.lineHeight)
-          return true;
+        if (latest.fontScale !== old.fontScale) return true;
+        if (latest.lineHeight !== old.lineHeight) return true;
         return false;
       })
     );
@@ -172,25 +177,25 @@
       rxjs.map(([e, { pageTurnDirection }]) => {
         if (pageTurnDirection === "horizontal") {
           if (e.key === `ArrowRight`) {
-            reader.turnRight();
+            reader.viewportNavigator.turnRight();
           }
           if (e.key === `ArrowLeft`) {
-            reader.turnLeft();
+            reader.viewportNavigator.turnLeft();
           }
         }
         if (pageTurnDirection === "vertical") {
           if (e.key === `ArrowDown`) {
-            reader.turnRight();
+            reader.viewportNavigator.turnRight();
           }
           if (e.key === `ArrowUp`) {
-            reader.turnLeft();
+            reader.viewportNavigator.turnLeft();
           }
         }
         return e;
       })
     );
     navigateOnKey(document).pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
-    reader.spineItems$.pipe(
+    reader.spine.$.spineItems$.pipe(
       rxjs.switchMap(
         (spineItems) => rxjs.merge(
           ...spineItems.map(
@@ -206,10 +211,9 @@
   };
   const createMovingSafePan$ = (reader) => {
     let iframeOverlayForAnimationsElement;
-    const updateOverlayElement$ = reader.context$.pipe(
+    const updateOverlayElement$ = reader.context.state$.pipe(
       operators.switchMap(({ containerElement }) => {
-        if (!containerElement)
-          return rxjs.NEVER;
+        if (!containerElement) return rxjs.NEVER;
         return new rxjs.Observable(() => {
           iframeOverlayForAnimationsElement = containerElement.ownerDocument.createElement(`div`);
           iframeOverlayForAnimationsElement.style.cssText = `
@@ -233,8 +237,8 @@
         iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `hidden`);
       })
     );
-    const viewportFree$ = reader.$.viewportState$.pipe(operators.filter((data) => data === `free`));
-    const viewportBusy$ = reader.$.viewportState$.pipe(operators.filter((data) => data === `busy`));
+    const viewportFree$ = reader.viewportNavigator.$.state$.pipe(operators.filter((data) => data === `free`));
+    const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(operators.filter((data) => data === `busy`));
     const lockAfterViewportBusy$ = viewportBusy$.pipe(
       operators.tap(() => {
         iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `visible`);
@@ -242,7 +246,7 @@
     );
     const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(operators.take(1));
     const pageTurnMode$ = reader.settings.settings$.pipe(
-      operators.map(() => reader.settings.getSettings().computedPageTurnMode),
+      operators.map(() => reader.settings.settings.computedPageTurnMode),
       operators.distinctUntilChanged()
     );
     const handleViewportLock$ = pageTurnMode$.pipe(
@@ -270,11 +274,10 @@
     });
   };
   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);
-      if (!((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable`))
-        return;
+      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()) ?? {};
       const { width: pageWidth } = reader.context.getPageSize();
       const frameElement = (_a = spineItem == null ? void 0 : spineItem.spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
@@ -298,9 +301,9 @@
       pageHorizontalMargin,
       pageVerticalMargin
     });
-    reader.registerHook(`onViewportOffsetAdjust`, () => {
+    reader.hookManager.register(`onViewportOffsetAdjust`, () => {
       let hasRedrawn = false;
-      reader.manipulateSpineItems(({ frame }) => {
+      reader.spine.manipulateSpineItems(({ frame }) => {
         if (!hasRedrawn && frame) {
           void frame.getBoundingClientRect().left;
           hasRedrawn = true;
@@ -308,7 +311,7 @@
         return SHOULD_NOT_LAYOUT;
       });
     });
-    reader.registerHook(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
+    reader.hookManager.register(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
       var _a, _b;
       const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsSubject$.value;
       const pageSize = reader.context.getPageSize();
@@ -350,7 +353,7 @@
     fixReflowable(reader);
     let observer;
     if (options.layoutAutoResize === `container`) {
-      reader.context$.pipe(
+      reader.context.state$.pipe(
         operators.map((state) => state.containerElement),
         operators.filter(isDefined),
         operators.distinctUntilChanged(),
@@ -423,20 +426,16 @@
     log: (...data) => {
       var _a;
       if ((_a = getWindow()) == null ? void 0 : _a.__PROSE_READER_DEBUG) {
-        if (namespace)
-          console.log(wrap(ROOT_NAMESPACE), wrap(namespace), ...data);
-        else
-          console.log(wrap(ROOT_NAMESPACE), ...data);
+        if (namespace) console.log(wrap(ROOT_NAMESPACE), wrap(namespace), ...data);
+        else console.log(wrap(ROOT_NAMESPACE), ...data);
       }
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     warn: (...data) => {
       var _a;
       if ((_a = getWindow()) == null ? void 0 : _a.__PROSE_READER_DEBUG) {
-        if (namespace)
-          console.warn(wrap(ROOT_NAMESPACE), wrap(namespace), ...data);
-        else
-          console.warn(wrap(ROOT_NAMESPACE), ...data);
+        if (namespace) console.warn(wrap(ROOT_NAMESPACE), wrap(namespace), ...data);
+        else console.warn(wrap(ROOT_NAMESPACE), ...data);
       }
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -459,8 +458,7 @@
     logMetric: (performanceEntry, targetDuration = 0) => {
       var _a;
       if ((_a = getWindow()) == null ? void 0 : _a.__PROSE_READER_DEBUG) {
-        if (performanceEntry.duration <= targetDuration)
-          ;
+        if (performanceEntry.duration <= targetDuration) ;
         else {
           console.warn(
             `[prose-reader] [metric] `,
@@ -472,8 +470,7 @@
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     measurePerformance: (name, targetDuration = 10, functionToMeasure, { disable } = {}) => {
       var _a;
-      if (disable || !((_a = getWindow()) == null ? void 0 : _a.__PROSE_READER_DEBUG))
-        return functionToMeasure;
+      if (disable || !((_a = getWindow()) == null ? void 0 : _a.__PROSE_READER_DEBUG)) return functionToMeasure;
       return (...args) => {
         const t0 = performance.now();
         const response = functionToMeasure(...args);
@@ -499,19 +496,18 @@
     const subject = new rxjs.Subject();
     const handleNavigationForClick = (element) => {
       var _a;
-      if (!element.href)
-        return false;
+      if (!element.href) return false;
       const hrefUrl = new URL(element.href);
       const hrefWithoutAnchor = `${hrefUrl.origin}${hrefUrl.pathname}`;
-      const hasExistingSpineItem = (_a = reader.context.getManifest()) == null ? void 0 : _a.spineItems.some((item) => item.href === hrefWithoutAnchor);
+      const hasExistingSpineItem = (_a = reader.context.manifest) == null ? void 0 : _a.spineItems.some((item) => item.href === hrefWithoutAnchor);
       if (hasExistingSpineItem) {
-        reader.goToUrl(hrefUrl);
+        reader.viewportNavigator.goToUrl(hrefUrl);
         return true;
       }
       return false;
     };
-    reader.registerHook(`item.onLoad`, ({ frame }) => {
-      if (frame.contentDocument) {
+    reader.hookManager.register(`item.onLoad`, ({ frame }) => {
+      if (frame == null ? void 0 : frame.contentDocument) {
         Array.from(frame.contentDocument.querySelectorAll(`a`)).forEach(
           (element) => element.addEventListener(`click`, (e) => {
             if (e.target && `style` in e.target && `ELEMENT_NODE` in e.target) {
@@ -535,36 +531,38 @@
   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")
-          return;
+        if (reader.settings.settings.computedPageTurnDirection === "vertical") return;
         if (reader.context.isRTL()) {
           return goToNextSpineItem();
         }
         return goToPreviousSpineItem();
       },
       goToRightSpineItem: () => {
-        if (reader.settings.getSettings().computedPageTurnDirection === "vertical")
-          return;
+        if (reader.settings.settings.computedPageTurnDirection === "vertical") return;
         if (reader.context.isRTL()) {
           return goToPreviousSpineItem();
         }
@@ -574,7 +572,7 @@
   };
   const createState = (reader) => {
     return reader.pagination.paginationInfo$.pipe(
-      rxjs.withLatestFrom(reader.context.$.manifest$, reader.settings.settings$),
+      rxjs.withLatestFrom(reader.context.manifest$, reader.settings.settings$),
       rxjs.map(([paginationInfo, manifest, { computedPageTurnDirection }]) => {
         const numberOfSpineItems = (manifest == null ? void 0 : manifest.spineItems.length) ?? 0;
         const isAtAbsoluteBeginning = paginationInfo.beginSpineItemIndex === 0 && paginationInfo.beginPageIndexInSpineItem === 0;
@@ -614,8 +612,7 @@
       if (isPossibleTocItemCandidate) {
         const spineItemIndexOfPossibleCandidate = manifest.spineItems.findIndex((item) => item.href === tocItem2.href);
         const spineItemIsBeforeThisTocItem = spineItemIndex < spineItemIndexOfPossibleCandidate;
-        if (spineItemIsBeforeThisTocItem)
-          return acc;
+        if (spineItemIsBeforeThisTocItem) return acc;
         const info = {
           title: tocItem2.title,
           path: tocItem2.path
@@ -638,10 +635,9 @@
     return buildChaptersInfo(href, ((_a = manifest.nav) == null ? void 0 : _a.toc) ?? [], manifest);
   };
   const getChaptersInfo = (reader) => {
-    const manifest = reader.context.getManifest();
-    const items = reader.getSpineItems();
-    if (!manifest)
-      return {};
+    const manifest = reader.context.manifest;
+    const items = reader.spineItemManager.getAll();
+    if (!manifest) return {};
     return items.reduce(
       (acc, { item }) => {
         return {
@@ -653,7 +649,7 @@
     );
   };
   const trackChapterInfo = (reader) => {
-    return reader.spineItems$.pipe(
+    return reader.spine.$.spineItems$.pipe(
       rxjs.startWith([]),
       rxjs.map(() => getChaptersInfo(reader))
     );
@@ -730,21 +726,19 @@
     return Math.max(0, Math.min(lastPageOffset, logicalOffset));
   };
   const calculateNumberOfPagesForItem = (itemWidth, pageWidth) => {
-    if ((pageWidth || 0) === 0 || (itemWidth || 0) === 0)
-      return 1;
+    if ((pageWidth || 0) === 0 || (itemWidth || 0) === 0) return 1;
     return Math.floor(Math.max(1, itemWidth / pageWidth));
   };
   const getClosestValidOffsetFromApproximateOffsetInPages = (offset, pageWidth, itemWidth) => {
     const numberOfPages = calculateNumberOfPagesForItem(itemWidth, pageWidth);
     const offsetValues = [...Array(numberOfPages)].map((_, i) => i * pageWidth);
-    if (offset >= numberOfPages * pageWidth)
-      return offsetValues[offsetValues.length - 1] || 0;
+    if (offset >= numberOfPages * pageWidth) return offsetValues[offsetValues.length - 1] || 0;
     return offsetValues.find((offsetRange) => offset < offsetRange + pageWidth) || 0;
   };
   const getSpineItemNumberOfPages = ({ spineItem, reader }) => {
     const writingMode = spineItem.spineItemFrame.getWritingMode();
     const { width, height } = spineItem.getElementDimensions();
-    const settings = reader.settings.getSettings();
+    const settings = reader.settings.settings;
     if (settings.pageTurnDirection === `vertical` && settings.pageTurnMode === `scrollable`) {
       return 1;
     }
@@ -753,11 +747,11 @@
     }
     return calculateNumberOfPagesForItem(width, reader.context.getPageSize().width);
   };
-  const getNumberOfPagesForAllSpineItems = (reader) => reader.getSpineItems().map((item) => {
+  const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemManager.getAll().map((item) => {
     return getSpineItemNumberOfPages({ spineItem: item, reader });
   }, 0);
   const trackTotalPages = (reader) => {
-    const totalPages$ = reader.$.layout$.pipe(
+    const totalPages$ = reader.spine.$.layout$.pipe(
       rxjs.debounceTime(10, rxjs.animationFrameScheduler),
       rxjs.withLatestFrom(reader.pagination.paginationInfo$),
       rxjs.map(() => {
@@ -780,8 +774,8 @@
   };
   const mapPaginationInfoToExtendedInfo = (reader) => (paginationInfo, chaptersInfo) => {
     const context = reader.context;
-    const beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.beginSpineItemIndex) : void 0;
-    const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.endSpineItemIndex) : void 0;
+    const beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.spineItemManager.get(paginationInfo.beginSpineItemIndex) : void 0;
+    const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.spineItemManager.get(paginationInfo.endSpineItemIndex) : void 0;
     return {
       ...paginationInfo,
       beginChapterInfo: beginItem ? chaptersInfo[beginItem.item.id] : void 0,
@@ -810,13 +804,13 @@
         paginationInfo.endSpineItemIndex ?? 0,
         paginationInfo.endNumberOfPagesInSpineItem,
         paginationInfo.endPageIndexInSpineItem || 0,
-        reader.getCurrentViewportPosition(),
+        reader.viewportNavigator.getCurrentViewportPosition(),
         endItem
       ) : 0,
-      isUsingSpread: context.isUsingSpreadMode() ?? false
+      isUsingSpread: context.state.isUsingSpreadMode ?? false
       // hasNextChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
       // hasPreviousChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
-      // numberOfSpineItems: context.getManifest()?.readingOrder.length,
+      // numberOfSpineItems: context.manifest?.readingOrder.length,
     };
   };
   const trackPaginationInfo = (reader) => {
@@ -837,7 +831,10 @@
       })),
       rxjs.distinctUntilChanged(isShallowEqual)
     );
-    const paginationInfo$ = rxjs.combineLatest([extandedBasePagination$, totalPages$]).pipe(
+    const paginationInfo$ = rxjs.combineLatest([
+      extandedBasePagination$,
+      totalPages$
+    ]).pipe(
       rxjs.map(([pageInfo, totalPageInfo]) => ({
         ...pageInfo,
         ...totalPageInfo,
@@ -912,18 +909,22 @@
       };
     };
     const applyChangeToSpineItem = () => {
-      reader.manipulateSpineItems(({ removeStyle, addStyle, container }) => {
+      reader.spine.manipulateSpineItems(({ removeStyle, addStyle, container }) => {
         removeStyle(`prose-reader-theme`);
         addStyle(`prose-reader-theme`, getStyle());
         applyChangeToSpineItemElement({ container });
         return false;
       });
     };
-    reader.registerHook(`item.onLoad`, ({ removeStyle, addStyle }) => {
-      removeStyle(`prose-reader-theme`);
-      addStyle(`prose-reader-theme`, getStyle());
+    reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+      const item = reader.spineItemManager.get(itemId);
+      item == null ? void 0 : item.manipulateSpineItem(({ removeStyle, addStyle }) => {
+        removeStyle(`prose-reader-theme`);
+        addStyle(`prose-reader-theme`, getStyle());
+        return false;
+      });
     });
-    reader.spineItems$.pipe(
+    reader.spine.$.spineItems$.pipe(
       operators.tap((items) => items.map(({ element }) => applyChangeToSpineItemElement({ container: element }))),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
@@ -960,7 +961,7 @@
       imgLastPosition = { x: 0, y: 0 };
       baseScale = 1;
       lastUserScale = 1;
-      const container = reader.context.getState().containerElement;
+      const container = reader.context.state.containerElement;
       if (container) {
         imageMagnifierContainer = container.ownerDocument.createElement(`div`);
         imageMagnifierContainer.style.cssText = `
@@ -1018,6 +1019,7 @@
           `transform`,
           `translate3d(${imgLastPosition.x}px, ${imgLastPosition.y}px, 0px) scale3d(${baseScale}, ${baseScale}, 1)`
         );
+        console.log({ delta, imgLastPosition });
         movingLastDelta = delta;
       }
       if (isLast) {
@@ -1085,8 +1087,7 @@
     const scale = (userScale) => {
       const spineElement = reader.spine.getElement();
       const viewportElement = reader.viewportNavigator.getElement();
-      if (!spineElement || !viewportElement)
-        return;
+      if (!spineElement || !viewportElement) return;
       const roundedScale = Math.ceil((userScale < 1 ? baseScale - (1 - userScale) : baseScale + (userScale - 1)) * 100) / 100;
       const newScale = Math.max(roundedScale, 1);
       const currentScale = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
@@ -1135,7 +1136,7 @@
     const elementZoomer = createElementZoomer(reader);
     const viewportZoomer = createViewportZoomer(reader);
     const currentZoomerSubject$ = new rxjs.BehaviorSubject(void 0);
-    const isUsingScrollableViewport = () => reader.settings.getSettings().computedPageTurnMode === `scrollable`;
+    const isUsingScrollableViewport = () => reader.settings.settings.computedPageTurnMode === `scrollable`;
     const enter = (imgElement) => {
       var _a;
       (_a = currentZoomerSubject$ == null ? void 0 : currentZoomerSubject$.value) == null ? void 0 : _a.exit();
@@ -1208,153 +1209,108 @@
   }) => {
     const { height, width } = visibleAreaRect;
     const isLandscape = width > height;
-    if (forceSinglePageMode)
-      return false;
-    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`)
-      return false;
+    if (forceSinglePageMode) return false;
+    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) return false;
     if (!isLandscape && (manifest == null ? void 0 : manifest.renditionSpread) === `portrait`) {
       return true;
     }
     return isLandscape && ((manifest == null ? void 0 : manifest.renditionSpread) === void 0 || (manifest == null ? void 0 : manifest.renditionSpread) === `auto` || (manifest == null ? void 0 : manifest.renditionSpread) === `landscape` || (manifest == null ? void 0 : manifest.renditionSpread) === `both`);
   };
   const isFullyPrePaginated = (manifest) => (manifest == null ? void 0 : manifest.renditionLayout) === "pre-paginated" || (manifest == null ? void 0 : manifest.spineItems.every((item) => item.renditionLayout === "pre-paginated"));
-  const createContext = (settings) => {
-    const stateSubject = new rxjs.BehaviorSubject({});
-    const manifest$ = stateSubject.pipe(
-      operators.map((state) => state.manifest),
-      operators.filter(isDefined),
-      operators.distinctUntilChanged()
-    );
-    const containerElement$ = stateSubject.pipe(
-      operators.map((state) => state.containerElement),
-      operators.filter(isDefined),
-      operators.distinctUntilChanged()
-    );
-    const hasVerticalWriting$ = stateSubject.pipe(
-      operators.map((state) => state.hasVerticalWriting),
-      operators.filter(isDefined),
-      operators.distinctUntilChanged()
-    );
-    const isUsingSpreadMode$ = stateSubject.pipe(
-      operators.map((state) => state.isUsingSpreadMode),
-      operators.distinctUntilChanged()
-    );
-    const visibleAreaRect = {
-      width: 0,
-      height: 0,
-      x: 0,
-      y: 0
-    };
-    const marginTop = 0;
-    const marginBottom = 0;
-    const destroy$ = new rxjs.Subject();
-    const setState = (newState) => {
-      const newCompleteState = { ...stateSubject.getValue(), ...newState };
-      if (!isShallowEqual(newCompleteState, stateSubject.getValue())) {
-        stateSubject.next(newCompleteState);
-      }
-    };
-    const load = (newManifest, newLoadOptions) => {
-      setState({
-        manifest: newManifest,
-        ...newLoadOptions,
-        isFullyPrePaginated: isFullyPrePaginated(newManifest),
+  const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+  class Context {
+    constructor() {
+      this._stateSubject = new rxjs.BehaviorSubject({
+        marginBottom: 0,
+        marginTop: 0,
+        calculatedInnerMargin: 0,
+        visibleAreaRect: {
+          width: 0,
+          height: 0,
+          x: 0,
+          y: 0
+        }
+      });
+      this.destroy$ = new rxjs.Subject();
+      this.state$ = this._stateSubject.pipe(operators.distinctUntilChanged(isShallowEqual));
+      this.manifest$ = this._stateSubject.pipe(
+        operators.map((state) => state.manifest),
+        operators.filter(isDefined),
+        operators.distinctUntilChanged()
+      );
+      this.containerElement$ = this._stateSubject.pipe(
+        operators.map((state) => state.containerElement),
+        operators.filter(isDefined),
+        operators.distinctUntilChanged()
+      );
+      this.hasVerticalWriting$ = this._stateSubject.pipe(
+        operators.map((state) => state.hasVerticalWriting),
+        operators.filter(isDefined),
+        operators.distinctUntilChanged()
+      );
+      this.isUsingSpreadMode$ = this._stateSubject.pipe(
+        operators.map((state) => state.isUsingSpreadMode),
+        operators.distinctUntilChanged()
+      );
+      this.isRTL = () => {
+        var _a;
+        return ((_a = this._stateSubject.getValue().manifest) == null ? void 0 : _a.readingDirection) === `rtl`;
+      };
+      this.destroy = () => {
+        this._stateSubject.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
+      };
+    }
+    /**
+     * @todo optimize to not run if not necessary
+     */
+    update(newState) {
+      const previousState = this._stateSubject.getValue();
+      const manifest = newState.manifest ?? previousState.manifest;
+      const forceSinglePageMode = newState.forceSinglePageMode ?? previousState.forceSinglePageMode;
+      const visibleAreaRect = newState.visibleAreaRect ?? previousState.visibleAreaRect;
+      const marginTop = newState.marginTop ?? previousState.marginTop;
+      const marginBottom = newState.marginBottom ?? previousState.marginBottom;
+      const newCompleteState = {
+        ...previousState,
+        ...newState,
+        ...newState.visibleAreaRect && {
+          ...newState.visibleAreaRect,
+          height: newState.visibleAreaRect.height - marginTop - marginBottom
+        },
+        ...newState.manifest && {
+          areAllItemsPrePaginated: areAllItemsPrePaginated(manifest),
+          isFullyPrePaginated: isFullyPrePaginated(manifest)
+        },
         isUsingSpreadMode: isUsingSpreadMode({
-          manifest: newManifest,
+          manifest,
           visibleAreaRect,
-          forceSinglePageMode: settings.getSettings().forceSinglePageMode
+          forceSinglePageMode
         })
-      });
-    };
-    const isRTL = () => {
-      var _a;
-      return ((_a = stateSubject.getValue().manifest) == null ? void 0 : _a.readingDirection) === `rtl`;
-    };
-    const setHasVerticalWriting = (value) => setState({
-      hasVerticalWriting: value
-    });
-    const recomputeSettings$ = rxjs.merge(hasVerticalWriting$, manifest$);
-    recomputeSettings$.pipe(
-      operators.withLatestFrom(hasVerticalWriting$, manifest$),
-      operators.tap(([, hasVerticalWriting, manifest]) => {
-        settings.recompute({ hasVerticalWriting, manifest });
-      }),
-      operators.takeUntil(destroy$)
-    ).subscribe();
-    settings.$.settings$.pipe(
-      operators.map(({ forceSinglePageMode }) => forceSinglePageMode),
-      operators.distinctUntilChanged(),
-      operators.withLatestFrom(manifest$),
-      operators.tap(([forceSinglePageMode, manifest]) => {
-        setState({
-          isUsingSpreadMode: isUsingSpreadMode({
-            manifest,
-            visibleAreaRect,
-            forceSinglePageMode
-          })
-        });
-      }),
-      operators.takeUntil(destroy$)
-    ).subscribe();
-    const destroy = () => {
-      stateSubject.complete();
-      destroy$.next();
-      destroy$.complete();
-    };
-    return {
-      load,
-      isRTL,
-      areAllItemsPrePaginated: () => {
-        var _a;
-        return areAllItemsPrePaginated$1((_a = stateSubject.getValue()) == null ? void 0 : _a.manifest);
-      },
-      destroy,
-      getCalculatedInnerMargin: () => 0,
-      getVisibleAreaRect: () => visibleAreaRect,
-      isUsingSpreadMode: () => stateSubject.getValue().isUsingSpreadMode,
-      setHasVerticalWriting,
-      setVisibleAreaRect: ({ height, width, x, y }) => {
-        visibleAreaRect.width = width;
-        visibleAreaRect.height = height - marginTop - marginBottom;
-        visibleAreaRect.x = x;
-        visibleAreaRect.y = y;
-        const manifest = stateSubject.getValue().manifest;
-        if (manifest) {
-          setState({
-            isUsingSpreadMode: isUsingSpreadMode({
-              manifest,
-              visibleAreaRect,
-              forceSinglePageMode: settings.getSettings().forceSinglePageMode
-            })
-          });
-        }
-      },
-      getState: () => stateSubject.getValue(),
-      getManifest: () => {
-        var _a;
-        return (_a = stateSubject.getValue()) == null ? void 0 : _a.manifest;
-      },
-      getReadingDirection: () => {
-        var _a, _b;
-        return (_b = (_a = stateSubject.getValue()) == null ? void 0 : _a.manifest) == null ? void 0 : _b.readingDirection;
-      },
-      getPageSize: () => {
-        return {
-          width: stateSubject.getValue().isUsingSpreadMode ? visibleAreaRect.width / 2 : visibleAreaRect.width,
-          height: visibleAreaRect.height
-        };
-      },
-      containerElement$,
-      isUsingSpreadMode$,
-      hasVerticalWriting$,
-      $: {
-        manifest$,
-        destroy$: destroy$.asObservable(),
-        state$: stateSubject.asObservable()
+      };
+      if (!isShallowEqual(newCompleteState, previousState)) {
+        this._stateSubject.next(newCompleteState);
       }
-    };
-  };
-  const areAllItemsPrePaginated$1 = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+    }
+    get state() {
+      return this._stateSubject.getValue();
+    }
+    get manifest() {
+      return this.state.manifest;
+    }
+    get readingDirection() {
+      var _a;
+      return (_a = this.manifest) == null ? void 0 : _a.readingDirection;
+    }
+    getPageSize() {
+      const { isUsingSpreadMode: isUsingSpreadMode2, visibleAreaRect } = this._stateSubject.getValue();
+      return {
+        width: isUsingSpreadMode2 ? visibleAreaRect.width / 2 : visibleAreaRect.width,
+        height: visibleAreaRect.height
+      };
+    }
+  }
   const __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY = `__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT`;
   const ITEM_EXTENSION_VALID_FOR_FRAME_SRC = [`.xhtml`, `.html`, `.htm`];
   const HTML_PREFIX$1 = `prose-reader`;
@@ -1407,11 +1363,6 @@
   `;
     return rxjs.of(frame);
   });
-  const createFrameManipulator = (frameElement) => ({
-    frame: frameElement,
-    removeStyle: createRemoveStyleHelper(frameElement),
-    addStyle: createAddStyleHelper(frameElement)
-  });
   const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
     const image = new Image();
     image.src = data;
@@ -1421,8 +1372,7 @@
     image.onerror = reject;
   });
   const createHtmlPageFromResource = async (resourceResponse, item) => {
-    if (typeof resourceResponse === `string`)
-      return resourceResponse;
+    if (typeof resourceResponse === `string`) return resourceResponse;
     const contentType = shared.parseContentType(resourceResponse.headers.get(`Content-Type`) || ``) || shared.detectMimeTypeFromName(item.href);
     if ([`image/jpg`, `image/jpeg`, `image/png`, `image/webp`].some((mime) => mime === contentType)) {
       const data = await getBase64FromBlob(await resourceResponse.blob());
@@ -1464,15 +1414,14 @@
     const content = await resourceResponse.text();
     return content;
   };
-  const isOnLoadHook = (hook) => hook.name === `item.onLoad`;
   const createLoader = ({
     item,
     parent,
     fetchResource,
-    hooks$,
     context,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const destroySubject$ = new rxjs.Subject();
     const loadSubject$ = new rxjs.Subject();
@@ -1480,10 +1429,9 @@
     const frameElementSubject$ = new rxjs.BehaviorSubject(void 0);
     const isLoadedSubject$ = new rxjs.BehaviorSubject(false);
     const isReadySubject$ = new rxjs.BehaviorSubject(false);
-    let onLoadHookReturns = [];
     let computedStyleAfterLoad;
     const makeItHot = (source$) => {
-      source$.pipe(operators.takeUntil(context.$.destroy$)).subscribe();
+      source$.pipe(operators.takeUntil(context.destroy$)).subscribe();
       return source$;
     };
     const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
@@ -1497,14 +1445,7 @@
       operators.withLatestFrom(frameElementSubject$),
       operators.filter(([_, frame]) => !!frame),
       operators.map(([, frame]) => {
-        onLoadHookReturns.forEach((fn) => {
-          if (fn && `unsubscribe` in fn) {
-            fn.unsubscribe();
-          } else if (fn) {
-            fn();
-          }
-        });
-        onLoadHookReturns = [];
+        hookManager.destroy(`item.onLoad`, item.id);
         frame == null ? void 0 : frame.remove();
         frameElementSubject$.next(void 0);
       }),
@@ -1545,12 +1486,10 @@
             }
           }),
           operators.mergeMap((frame) => {
-            if (!frame)
-              return rxjs.EMPTY;
+            if (!frame) return rxjs.EMPTY;
             return rxjs.fromEvent(frame, `load`).pipe(
               operators.take(1),
-              operators.withLatestFrom(hooks$),
-              operators.mergeMap(([_, hooks]) => {
+              operators.mergeMap(() => {
                 var _a, _b;
                 const body = (_a = frame.contentDocument) == null ? void 0 : _a.body;
                 if (!body) {
@@ -1561,21 +1500,14 @@
                 if ((frame == null ? void 0 : frame.contentDocument) && body) {
                   computedStyleAfterLoad = (_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.getComputedStyle(body);
                 }
-                if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
+                if (settings.settings.computedPageTurnMode !== `scrollable`) {
                   frame.setAttribute(`tab-index`, `0`);
                 }
-                const manipulableFrame = createFrameManipulator(frame);
-                onLoadHookReturns = hooks.filter(isOnLoadHook).map((hook) => {
-                  const hookReturn = hook.fn({
-                    ...manipulableFrame,
-                    item
-                  });
-                  if (hookReturn && `subscribe` in hookReturn) {
-                    return hookReturn.subscribe();
-                  }
-                  return hookReturn;
-                });
-                return rxjs.of(frame);
+                const hookResults = hookManager.execute(`item.onLoad`, item.id, {
+                  itemId: item.id,
+                  frame
+                }).filter((result) => result instanceof rxjs.Observable);
+                return rxjs.combineLatest([rxjs.of(null), ...hookResults]).pipe(operators.map(() => frame));
               })
             );
           }),
@@ -1624,14 +1556,19 @@
       }
     };
   };
+  const createFrameManipulator = (frameElement) => ({
+    frame: frameElement,
+    removeStyle: createRemoveStyleHelper(frameElement),
+    addStyle: createAddStyleHelper(frameElement)
+  });
   const createFrameItem = ({
     item,
     parent,
     fetchResource,
     context,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const destroySubject$ = new rxjs.Subject();
     const {
@@ -1640,7 +1577,7 @@
       unload,
       destroy: loaderDestroy,
       getComputedStyleAfterLoad
-    } = createLoader({ context, hooks$, item, parent, fetchResource, viewportState$, settings });
+    } = createLoader({ context, hookManager, item, parent, fetchResource, viewportState$, settings });
     let isLoadedSync = false;
     let isReadySync = false;
     isLoaded$.subscribe({
@@ -1728,7 +1665,7 @@
         if (frame) {
           frame.style.width = `${size.width}px`;
           frame.style.height = `${size.height}px`;
-          if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
+          if (settings.settings.computedPageTurnMode !== `scrollable`) {
             frame.setAttribute(`tab-index`, `0`);
           }
         }
@@ -1743,8 +1680,7 @@
           return `rtl`;
         }
         const direction = (_a = getComputedStyleAfterLoad()) == null ? void 0 : _a.direction;
-        if ([`ltr`, `rtl`].includes(direction || ``))
-          return direction;
+        if ([`ltr`, `rtl`].includes(direction || ``)) return direction;
         return void 0;
       },
       isUsingVerticalWriting,
@@ -1831,205 +1767,30 @@
       getSelection: () => {
         var _a;
         const selection = (_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.getSelection();
-        if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`)
-          return void 0;
+        if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`) return void 0;
         return selection;
       },
       $: subject.asObservable()
     };
   };
-  const isHtmlElement = (element) => {
-    return typeof element === `object` && !!element && `nodeType` in element && (element == null ? void 0 : element.nodeType) === Node.ELEMENT_NODE && `innerText` in element;
-  };
-  function createRangeOrCaretFromPoint(doc, startX, startY) {
-    if (`caretPositionFromPoint` in doc) {
-      return doc.caretPositionFromPoint(startX, startY);
-    } else if (typeof doc.caretRangeFromPoint !== `undefined`) {
-      return doc.caretRangeFromPoint(startX, startY);
-    }
-  }
-  const getFirstVisibleNodeForViewport = Report.measurePerformance(
-    `getFirstVisibleNodeForViewport`,
-    1,
-    (documentOrElement, viewport) => {
-      const element = `body` in documentOrElement ? getFirstVisibleElementForViewport(documentOrElement.body, viewport) : getFirstVisibleElementForViewport(documentOrElement, viewport);
-      const ownerDocument = `createRange` in documentOrElement ? documentOrElement : documentOrElement.ownerDocument;
-      if (element) {
-        let lastValidRange;
-        let lastValidOffset = 0;
-        const range = ownerDocument.createRange();
-        Array.from(element.childNodes).some((childNode) => {
-          range.selectNodeContents(childNode);
-          const rects = range.getClientRects();
-          const visibleRect = getFirstVisibleDOMRect(rects, viewport);
-          if (visibleRect) {
-            lastValidRange = range.cloneRange();
-            const rangeOrCaret = createRangeOrCaretFromPoint(ownerDocument, Math.ceil(visibleRect.left), Math.ceil(visibleRect.top));
-            if (rangeOrCaret && `startContainer` in rangeOrCaret && rangeOrCaret.startContainer === lastValidRange.startContainer) {
-              lastValidOffset = rangeOrCaret.startOffset;
-            }
-            if (rangeOrCaret && `offsetNode` in rangeOrCaret && rangeOrCaret.offsetNode === lastValidRange.startContainer) {
-              lastValidOffset = rangeOrCaret.offset;
-            }
-            return true;
-          }
-          return false;
-        });
-        if (lastValidRange) {
-          return { node: lastValidRange.startContainer, offset: lastValidOffset };
-        }
-        return { node: element, offset: 0 };
-      }
-      return void 0;
-    }
-  );
-  const getFirstVisibleElementForViewport = (element, viewport) => {
-    let lastValidElement;
-    const positionFromViewport = getElementOrNodePositionFromViewPort(element.getBoundingClientRect(), viewport);
-    if (positionFromViewport !== `before` && positionFromViewport !== `after`) {
-      lastValidElement = element;
-    }
-    Array.from(element.children).some((child) => {
-      const childInViewPort = getFirstVisibleElementForViewport(child, viewport);
-      if (childInViewPort) {
-        lastValidElement = childInViewPort;
-        return true;
-      }
-      return false;
-    });
-    return lastValidElement;
-  };
-  function getElementOrNodePositionFromViewPort(domRect, { left, right }) {
-    if (domRect.left <= left && domRect.right <= left)
-      return `before`;
-    if (domRect.left <= left && domRect.right > left && domRect.right <= right)
-      return `partially-before`;
-    if (domRect.left <= right && domRect.right > right)
-      return `partially-after`;
-    if (domRect.left > right)
-      return `after`;
-    return `within`;
-  }
-  function getFirstVisibleDOMRect(domRect, viewport) {
-    return Array.from(domRect).find((domRect2) => {
-      const position = getElementOrNodePositionFromViewPort(domRect2, viewport);
-      if (position !== `before` && position !== `after`) {
-        return true;
-      }
-      return false;
-    });
-  }
-  const getRangeFromNode = (node, offset) => {
-    var _a;
-    if (node.nodeType !== Node.CDATA_SECTION_NODE && node.nodeType !== Node.DOCUMENT_TYPE_NODE) {
-      const range = (_a = node.ownerDocument) == null ? void 0 : _a.createRange();
-      range == null ? void 0 : range.selectNodeContents(node);
-      try {
-        if (offset <= ((range == null ? void 0 : range.endOffset) || 0)) {
-          range == null ? void 0 : range.setStart(node, offset || 0);
-        }
-      } catch (e) {
-        Report.error(e);
-      }
-      return range;
-    }
-    return void 0;
-  };
-  const isPointerEvent = (event) => {
-    var _a, _b, _c, _d, _e;
-    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
-      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
-      if (eventView.PointerEvent) {
-        return event instanceof eventView.PointerEvent;
-      }
-    }
-    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
-      const eventView = event == null ? void 0 : event.view;
-      if (eventView.PointerEvent) {
-        return event instanceof eventView.PointerEvent;
-      }
-    }
-    return false;
-  };
-  const isMouseEvent = (event) => {
-    var _a, _b, _c, _d, _e;
-    if (isPointerEvent(event))
-      return false;
-    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
-      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
-      if (eventView.MouseEvent) {
-        return event instanceof eventView.MouseEvent;
-      }
-    }
-    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
-      const eventView = event == null ? void 0 : event.view;
-      if (eventView.MouseEvent) {
-        return event instanceof eventView.MouseEvent;
-      }
-    }
-    return false;
-  };
-  const isTouchEvent = (event) => {
-    var _a, _b, _c, _d, _e;
-    if ((event == null ? void 0 : event.target) && ((_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.defaultView)) {
-      const eventView = (_d = (_c = event == null ? void 0 : event.target) == null ? void 0 : _c.ownerDocument) == null ? void 0 : _d.defaultView;
-      if (eventView.TouchEvent) {
-        return event instanceof eventView.TouchEvent;
-      }
-    }
-    if ((event == null ? void 0 : event.view) && ((_e = event == null ? void 0 : event.view) == null ? void 0 : _e.window)) {
-      const eventView = event == null ? void 0 : event.view;
-      if (eventView.TouchEvent) {
-        return event instanceof eventView.TouchEvent;
-      }
-    }
-    return false;
-  };
-  const pointerEvents = [
-    `pointercancel`,
-    `pointerdown`,
-    `pointerenter`,
-    `pointerleave`,
-    `pointermove`,
-    `pointerout`,
-    `pointerover`,
-    `pointerup`,
-    `touchstart`,
-    `touchend`
-  ];
-  const mouseEvents = [
-    `click`,
-    `mousedown`,
-    `mouseup`,
-    `mouseenter`,
-    `mouseleave`,
-    `mousemove`,
-    `mouseout`,
-    `mouseover`
-  ];
-  const passthroughEvents = [...pointerEvents, ...mouseEvents];
   const createCommonSpineItem = ({
     item,
     context,
     parentElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
-    var _a;
     const destroySubject$ = new rxjs.Subject();
-    const containerElement = createContainerElement$1(parentElement, item, hooks$);
+    const containerElement = createContainerElement$1(parentElement, item, hookManager);
     const overlayElement = createOverlayElement(parentElement, item);
     const fingerTracker = createFingerTracker();
     const selectionTracker = createSelectionTracker();
-    const frameHooks = createFrameHooks(iframeEventBridgeElement$, fingerTracker, selectionTracker);
     const spineItemFrame = createFrameItem({
       parent: containerElement,
       item,
       context,
-      fetchResource: (_a = context.getState()) == null ? void 0 : _a.fetchResource,
-      hooks$: hooks$.asObservable().pipe(operators.map((hooks) => [...hooks, ...frameHooks])),
+      hookManager,
       viewportState$,
       settings
     });
@@ -2052,12 +1813,12 @@
       return memoizedElementDimensions;
     };
     const isImageType = () => {
-      var _a2;
-      return !!((_a2 = item.mediaType) == null ? void 0 : _a2.startsWith(`image/`));
+      var _a;
+      return !!((_a = item.mediaType) == null ? void 0 : _a.startsWith(`image/`));
     };
     const injectStyle = (cssText) => {
-      var _a2, _b;
-      (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.removeStyle(`prose-reader-css`);
+      var _a, _b;
+      (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-reader-css`);
       (_b = spineItemFrame.getManipulableFrame()) == null ? void 0 : _b.addStyle(`prose-reader-css`, cssText);
     };
     const adjustPositionOfElement = ({ right, left, top }) => {
@@ -2078,10 +1839,10 @@
       }
     };
     const getViewPortInformation = () => {
-      var _a2;
+      var _a;
       const { width: pageWidth, height: pageHeight } = context.getPageSize();
       const viewportDimensions = spineItemFrame.getViewportDimensions();
-      const frameElement = (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.frame;
+      const frameElement = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
       if (containerElement && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow) && viewportDimensions) {
         const computedWidthScale = pageWidth / viewportDimensions.width;
         const computedScale = Math.min(computedWidthScale, pageHeight / viewportDimensions.height);
@@ -2091,8 +1852,8 @@
     const loadContent = () => spineItemFrame.load();
     const unloadContent = () => spineItemFrame.unload();
     const getBoundingRectOfElementFromSelector = (selector) => {
-      var _a2, _b, _c, _d, _e;
-      const frame = (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.frame;
+      var _a, _b, _c, _d, _e;
+      const frame = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
       if (frame && selector) {
         if (selector.startsWith(`#`)) {
           return (_c = (_b = frame.contentDocument) == null ? void 0 : _b.getElementById(selector.replace(`#`, ``))) == null ? void 0 : _c.getBoundingClientRect();
@@ -2137,16 +1898,12 @@
     }) => {
       containerElement.style.width = `${width}px`;
       containerElement.style.height = `${height}px`;
-      hooks$.getValue().forEach((hook) => {
-        if (hook.name === `item.onAfterLayout`) {
-          hook.fn({ blankPagePosition, item, minimumWidth });
-        }
-      });
+      hookManager.execute(`item.onAfterLayout`, void 0, { blankPagePosition, item, minimumWidth });
       setLayoutDirty();
     };
     const translateFramePositionIntoPage = (position) => {
-      var _a2, _b;
-      const { left = 0, top = 0 } = ((_a2 = spineItemFrame.getFrameElement()) == null ? void 0 : _a2.getBoundingClientRect()) || {};
+      var _a, _b;
+      const { left = 0, top = 0 } = ((_a = spineItemFrame.getFrameElement()) == null ? void 0 : _a.getBoundingClientRect()) || {};
       const computedScale = ((_b = getViewPortInformation()) == null ? void 0 : _b.computedScale) ?? 1;
       const adjustedX = position.clientX * computedScale + left;
       const adjustedY = position.clientY * computedScale + top;
@@ -2156,20 +1913,14 @@
       };
     };
     const getResource = async () => {
-      const fetchResource = context.getState().fetchResource;
+      const fetchResource = settings.settings.fetchResource;
       const lastFetch = (_) => {
         if (fetchResource) {
           return fetchResource(item);
         }
         return fetch(item.href);
       };
-      const finalFetch = hooks$.getValue().reduce((acc, hook) => {
-        if (hook.name === `item.onGetResource`) {
-          return hook.fn(acc);
-        }
-        return acc;
-      }, lastFetch);
-      return await finalFetch(item);
+      return await lastFetch();
     };
     const manipulateSpineItem = (cb) => {
       const manipulableFrame = spineItemFrame.getManipulableFrame();
@@ -2192,16 +1943,12 @@
         overlayElement
       });
     };
-    const executeOnLayoutBeforeMeasurementHook = (options) => hooks$.getValue().forEach((hook) => {
-      if (hook.name === `item.onLayoutBeforeMeasurement`) {
-        hook.fn({
-          frame: spineItemFrame,
-          container: containerElement,
-          item,
-          isImageType,
-          ...options
-        });
-      }
+    const executeOnLayoutBeforeMeasurementHook = (options) => hookManager.execute("item.onLayoutBeforeMeasurement", void 0, {
+      frame: spineItemFrame,
+      container: containerElement,
+      item,
+      isImageType,
+      ...options
     });
     const contentLayout$ = spineItemFrame.$.contentLayoutChange$.pipe(
       operators.withLatestFrom(spineItemFrame.$.isReady$),
@@ -2240,8 +1987,8 @@
         destroySubject$.complete();
       },
       isUsingVerticalWriting: () => {
-        var _a2;
-        return (_a2 = spineItemFrame.getWritingMode()) == null ? void 0 : _a2.startsWith(`vertical`);
+        var _a;
+        return (_a = spineItemFrame.getWritingMode()) == null ? void 0 : _a.startsWith(`vertical`);
       },
       /**
        * @important
@@ -2252,7 +1999,7 @@
        * be confined to a single page.
        */
       getReadingDirection: () => {
-        return spineItemFrame.getReadingDirection() || context.getReadingDirection();
+        return spineItemFrame.getReadingDirection() || context.readingDirection;
       },
       manipulateSpineItem,
       executeOnLayoutBeforeMeasurementHook,
@@ -2267,7 +2014,7 @@
       }
     };
   };
-  const createContainerElement$1 = (containerElement, item, hooks$) => {
+  const createContainerElement$1 = (containerElement, item, hookManager) => {
     const element = containerElement.ownerDocument.createElement(`div`);
     element.classList.add(`spineItem`);
     element.classList.add(`spineItem-${item.renditionLayout}`);
@@ -2275,12 +2022,8 @@
     position: absolute;
     overflow: hidden;
   `;
-    return hooks$.getValue().reduce((element2, hook) => {
-      if (hook.name === `item.onBeforeContainerCreated`) {
-        return hook.fn(element2);
-      }
-      return element2;
-    }, element);
+    hookManager.execute("item.onBeforeContainerCreated", void 0, { element });
+    return element;
   };
   const createOverlayElement = (containerElement, item) => {
     const element = containerElement.ownerDocument.createElement(`div`);
@@ -2295,42 +2038,6 @@
   `;
     return element;
   };
-  const createFrameHooks = (iframeEventBridgeElement$, fingerTracker, selectionTracker) => {
-    return [
-      {
-        name: `item.onLoad`,
-        fn: ({ frame }) => {
-          const unregister = passthroughEvents.map((event) => {
-            var _a;
-            const listener = (e) => {
-              var _a2;
-              let convertedEvent = e;
-              if (isPointerEvent(e)) {
-                convertedEvent = new PointerEvent(e.type, e);
-              }
-              if (isMouseEvent(e)) {
-                convertedEvent = new MouseEvent(e.type, e);
-              }
-              if (convertedEvent !== e) {
-                attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
-                (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
-              }
-            };
-            (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
-            return () => {
-              var _a2;
-              (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(event, listener);
-            };
-          });
-          selectionTracker.track(frame);
-          fingerTracker.track(frame);
-          return () => {
-            unregister.forEach((cb) => cb());
-          };
-        }
-      }
-    ];
-  };
   const getStyleForViewportDocument = () => {
     return `
     body {
@@ -2343,19 +2050,17 @@
     item,
     context,
     containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const commonSpineItem = createCommonSpineItem({
       context,
       item,
       parentElement: containerElement,
-      iframeEventBridgeElement$,
-      hooks$,
       viewportState$,
-      settings
+      settings,
+      hookManager
     });
     const spineItemFrame = commonSpineItem.spineItemFrame;
     const layout = ({
@@ -2366,15 +2071,15 @@
       var _a;
       const { width: pageWidth, height: pageHeight } = context.getPageSize();
       const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-      const visibleArea = context.getVisibleAreaRect();
+      const visibleArea = context.state.visibleAreaRect;
       const frameElement = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
       if ((spineItemFrame == null ? void 0 : spineItemFrame.getIsLoaded()) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
         const contentWidth = pageWidth;
-        const contentHeight = visibleArea.height + context.getCalculatedInnerMargin();
+        const contentHeight = visibleArea.height + context.state.calculatedInnerMargin;
         const cssLink = buildDocumentStyle(
           {
             ...commonSpineItem.getDimensionsForPaginatedContent(),
-            enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`,
+            enableTouch: settings.settings.computedPageTurnMode !== `scrollable`,
             spreadPosition
           },
           viewportDimensions
@@ -2517,19 +2222,17 @@
     item,
     context,
     containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const commonSpineItem = createCommonSpineItem({
       context,
       item,
       parentElement: containerElement,
-      iframeEventBridgeElement$,
-      hooks$,
       viewportState$,
-      settings
+      settings,
+      hookManager
     });
     const spineItemFrame = commonSpineItem.spineItemFrame;
     let latestContentHeightWhenLoaded;
@@ -2542,12 +2245,12 @@
       (_b = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame) == null ? void 0 : _b.style.setProperty(`width`, `${pageWidth}px`);
       (_d = (_c = spineItemFrame.getManipulableFrame()) == null ? void 0 : _c.frame) == null ? void 0 : _d.style.setProperty(`height`, `${pageHeight}px`);
       const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-      const visibleArea = context.getVisibleAreaRect();
+      const visibleArea = context.state.visibleAreaRect;
       const frameElement = (_e = spineItemFrame.getManipulableFrame()) == null ? void 0 : _e.frame;
-      const isGloballyPrePaginated = ((_f = context.getManifest()) == null ? void 0 : _f.renditionLayout) === `pre-paginated`;
+      const isGloballyPrePaginated = ((_f = context.manifest) == null ? void 0 : _f.renditionLayout) === `pre-paginated`;
       if ((spineItemFrame == null ? void 0 : spineItemFrame.getIsLoaded()) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
         let contentWidth = pageWidth;
-        let contentHeight = visibleArea.height + context.getCalculatedInnerMargin();
+        let contentHeight = visibleArea.height + context.state.calculatedInnerMargin;
         frameElement == null ? void 0 : frameElement.style.setProperty(`visibility`, `visible`);
         frameElement == null ? void 0 : frameElement.style.setProperty(`opacity`, `1`);
         if (viewportDimensions) {
@@ -2567,8 +2270,8 @@
           frameElement == null ? void 0 : frameElement.style.setProperty(`transform-origin`, `center center`);
         } else {
           const frameStyle = commonSpineItem.isImageType() ? buildStyleForReflowableImageOnly({
-            isScrollable: ((_g = context.getManifest()) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
-            enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`
+            isScrollable: ((_g = context.manifest) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
+            enableTouch: settings.settings.computedPageTurnMode !== `scrollable`
           }) : buildStyleWithMultiColumn(
             commonSpineItem.getDimensionsForReflowableContent(spineItemFrame.isUsingVerticalWriting(), minimumWidth)
           );
@@ -2581,7 +2284,7 @@
               width: minimumWidth,
               height: contentHeight
             });
-          } else if (((_h = context.getManifest()) == null ? void 0 : _h.renditionFlow) === `scrolled-continuous`) {
+          } else if (((_h = context.manifest) == null ? void 0 : _h.renditionFlow) === `scrolled-continuous`) {
             contentHeight = frameElement.contentDocument.documentElement.scrollHeight;
             latestContentHeightWhenLoaded = contentHeight;
             spineItemFrame.staticLayout({
@@ -2645,7 +2348,10 @@
     }
   `;
   };
-  const buildStyleForReflowableImageOnly = ({ isScrollable, enableTouch }) => {
+  const buildStyleForReflowableImageOnly = ({
+    isScrollable,
+    enableTouch
+  }) => {
     return `
     ${/*
     * @see https://hammerjs.github.io/touch-action/
@@ -2793,91 +2499,29 @@
     item,
     context,
     containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     if (item.renditionLayout === `pre-paginated`) {
       return createPrePaginatedSpineItem({
         item,
         context,
         containerElement,
-        iframeEventBridgeElement$,
-        hooks$,
         viewportState$,
-        settings
+        settings,
+        hookManager
       });
     }
     return createReflowableSpineItem({
       item,
       context,
       containerElement,
-      iframeEventBridgeElement$,
-      hooks$,
       viewportState$,
-      settings
+      settings,
+      hookManager
     });
   };
-  const createEventsHelper = ({
-    iframeEventBridgeElement$,
-    locator
-  }) => {
-    const normalizeEventForViewport = (event) => {
-      var _a;
-      const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue();
-      const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event);
-      const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
-      if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame)
-        return event;
-      const spineItem = locator.getSpineItemFromIframe(originalFrame);
-      if (!spineItem)
-        return event;
-      if (isPointerEvent(event)) {
-        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-        const newEvent = new PointerEvent(event.type, {
-          ...event,
-          pointerId: event.pointerId,
-          clientX,
-          clientY
-        });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-        return newEvent;
-      }
-      if (isMouseEvent(event)) {
-        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-        const newEvent = new MouseEvent(event.type, {
-          ...event,
-          clientX,
-          clientY
-        });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-        return newEvent;
-      }
-      if (isTouchEvent(event)) {
-        const touches = Array.from(event.touches).map((touch) => {
-          const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
-          return new Touch({
-            identifier: touch.identifier,
-            target: touch.target,
-            clientX,
-            clientY
-          });
-        });
-        const newEvent = new TouchEvent(event.type, {
-          touches,
-          changedTouches: touches,
-          targetTouches: touches
-        });
-        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-        return newEvent;
-      }
-      return event;
-    };
-    return {
-      normalizeEventForViewport
-    };
-  };
   const ELEMENT_NODE = Node.ELEMENT_NODE;
   const TEXT_NODE = Node.TEXT_NODE;
   const CDATA_SECTION_NODE = Node.CDATA_SECTION_NODE;
@@ -2891,8 +2535,7 @@
     let m;
     do {
       m = str.match(regExp);
-      if (!m)
-        break;
+      if (!m) break;
       matches.push(m.index + add);
       offset += m.index + m.length;
       str = str.slice(m.index + m.length);
@@ -2955,24 +2598,17 @@
   function compareTemporal(a, b) {
     const isA = typeof a === `number`;
     const isB = typeof b === `number`;
-    if (!isA && !isB)
-      return 0;
-    if (!isA && isB)
-      return -1;
-    if (isA && !isB)
-      return 1;
+    if (!isA && !isB) return 0;
+    if (!isA && isB) return -1;
+    if (isA && !isB) return 1;
     return (a || 0) - (b || 0);
   }
   function compareSpatial(a, b) {
-    if (!a && !b)
-      return 0;
-    if (!a && b)
-      return -1;
-    if (a && !b)
-      return 1;
+    if (!a && !b) return 0;
+    if (!a && b) return -1;
+    if (a && !b) return 1;
     const diff = (a.y || 0) - (b.y || 0);
-    if (diff)
-      return diff;
+    if (diff) return diff;
     return (a.x || 0) - (b.x || 0);
   }
   class CFI {
@@ -2994,20 +2630,16 @@
       const isCFI = /^epubcfi\((.*)\)$/;
       str = str.trim();
       const m = str.match(isCFI);
-      if (!m)
-        throw new Error(`Not a valid CFI`);
-      if (m.length < 2)
-        return;
+      if (!m) throw new Error(`Not a valid CFI`);
+      if (m.length < 2) return;
       str = m[1] || ``;
       let parsed, offset, newDoc;
       let subParts = [];
       let sawComma = 0;
       while (str.length) {
         ({ parsed, offset, newDoc } = this.parse(str));
-        if (!parsed || offset === null)
-          throw new Error(`Parsing failed`);
-        if (sawComma && newDoc)
-          throw new Error(`CFI is a range that spans multiple documents. This is not allowed`);
+        if (!parsed || offset === null) throw new Error(`Parsing failed`);
+        if (sawComma && newDoc) throw new Error(`CFI is a range that spans multiple documents. This is not allowed`);
         subParts.push(parsed);
         if (newDoc || str.length - offset <= 0) {
           if (sawComma === 2) {
@@ -3051,8 +2683,7 @@
       if (!parts) {
         if (this.from) {
           this.removeIllegalOpts(this.from);
-          if (!this.to)
-            return;
+          if (!this.to) return;
           parts = this.to;
         } else {
           parts = this.parts;
@@ -3075,8 +2706,7 @@
       let o;
       while (node.parentNode) {
         o = calcSiblingCount(node.parentNode.childNodes, node, offset);
-        if (!cfi && o.offset)
-          cfi = `:` + o.offset;
+        if (!cfi && o.offset) cfi = `:` + o.offset;
         cfi = `/` + o.count + (node.id ? `[` + cfiEscape(node.id) + `]` : ``) + cfi;
         node = node.parentNode;
       }
@@ -3093,8 +2723,7 @@
       } else {
         cfi = this.generatePart(node, offset, extra);
       }
-      if (extra)
-        cfi += extra;
+      if (extra) cfi += extra;
       return `epubcfi(` + cfi + `)`;
     }
     static toParsed(cfi) {
@@ -3111,13 +2740,10 @@
       for (i = 0; i < max; i++) {
         cA = a[i];
         cB = b[i];
-        if (!cA)
-          return -1;
-        if (!cB)
-          return 1;
+        if (!cA) return -1;
+        if (!cB) return 1;
         diff = this.compareParts(cA, cB);
-        if (diff)
-          return diff;
+        if (diff) return diff;
       }
       return 0;
     }
@@ -3134,14 +2760,11 @@
       if (a.isRange || b.isRange) {
         if (a.isRange && b.isRange) {
           const diff = this.comparePath(oA.from, oB.from);
-          if (diff)
-            return diff;
+          if (diff) return diff;
           return this.comparePath(oA.to, oB.to);
         }
-        if (a.isRange)
-          oA = oA.from;
-        if (b.isRange)
-          oB = oB.from;
+        if (a.isRange) oA = oA.from;
+        if (b.isRange) oB = oB.from;
         return this.comparePath(oA, oB);
       } else {
         return this.comparePath(oA, oB);
@@ -3154,29 +2777,22 @@
       for (i = 0; i < max; i++) {
         cA = a[i];
         cB = b[i];
-        if (!cA)
-          return -1;
-        if (!cB)
-          return 1;
+        if (!cA) return -1;
+        if (!cB) return 1;
         diff = cA.nodeIndex - cB.nodeIndex;
-        if (diff)
-          return diff;
+        if (diff) return diff;
         if (cA.nodeIndex === 0) {
           return 0;
         }
-        if (i < max - 1)
-          continue;
+        if (i < max - 1) continue;
         if (cA.nodeIndex % 2 === 0) {
           diff = compareTemporal(cA.temporal, cB.temporal);
-          if (diff)
-            return diff;
+          if (diff) return diff;
           diff = compareSpatial(cA.spatial, cB.spatial);
-          if (diff)
-            return diff;
+          if (diff) return diff;
         }
         diff = (cA.offset || 0) - (cB.offset || 0);
-        if (diff)
-          return diff;
+        if (diff) return diff;
       }
       return 0;
     }
@@ -3194,8 +2810,7 @@
       return this.decodeEntities(dom, str).length;
     }
     getFrom() {
-      if (!this.isRange)
-        throw new Error(`Trying to get beginning of non-range CFI`);
+      if (!this.isRange) throw new Error(`Trying to get beginning of non-range CFI`);
       if (!this.from) {
         return this.deepClone(this.parts);
       }
@@ -3204,8 +2819,7 @@
       return parts;
     }
     getTo() {
-      if (!this.isRange)
-        throw new Error(`Trying to get end of non-range CFI`);
+      if (!this.isRange) throw new Error(`Trying to get end of non-range CFI`);
       const parts = this.deepClone(this.parts);
       parts[parts.length - 1] = parts[parts.length - 1].concat(this.to);
       return parts;
@@ -3221,8 +2835,7 @@
       return this.deepClone(this.parts);
     }
     parseSideBias(o, loc) {
-      if (!loc)
-        return;
+      if (!loc) return;
       const m = loc.trim().match(/^(.*);s=([ba])$/);
       if (!m || m.length < 3) {
         if (typeof o.textLocationAssertion === `object`) {
@@ -3246,11 +2859,9 @@
       }
     }
     parseSpatialRange(range) {
-      if (!range)
-        return void 0;
+      if (!range) return void 0;
       const m = range.trim().match(/^([\d\.]+):([\d\.]+)$/);
-      if (!m || m.length < 3)
-        return void 0;
+      if (!m || m.length < 3) return void 0;
       const o = {
         x: parseInt(m[1]),
         y: parseInt(m[2])
@@ -3340,8 +2951,7 @@
           } else {
             prevState = state;
             state = null;
-            if (f && seenColon)
-              o.spatial = this.parseSpatialRange(f);
+            if (f && seenColon) o.spatial = this.parseSpatialRange(f);
             f = null;
           }
         }
@@ -3451,8 +3061,7 @@
         }
         escape = false;
       }
-      if (!o.nodeIndex && o.nodeIndex !== 0)
-        throw new Error(`Missing child node index in CFI`);
+      if (!o.nodeIndex && o.nodeIndex !== 0) throw new Error(`Missing child node index in CFI`);
       return { parsed: o, offset: i, newDoc: state === `!` };
     }
     // The CFI counts child nodes differently from the DOM
@@ -3460,8 +3069,7 @@
     // according to the CFI standard way of counting
     getChildNodeByCFIIndex(dom, parentNode, index, offset) {
       const children = parentNode.childNodes;
-      if (!children.length)
-        return { node: parentNode, offset: 0 };
+      if (!children.length) return { node: parentNode, offset: 0 };
       if (index <= 0) {
         return { node: children[0], relativeToNode: `before`, offset: 0 };
       }
@@ -3529,8 +3137,7 @@
       }
     }
     isTextNode(node) {
-      if (!node)
-        return false;
+      if (!node) return false;
       if (node.nodeType === TEXT_NODE || node.nodeType === CDATA_SECTION_NODE) {
         return true;
       }
@@ -3562,15 +3169,13 @@
         str = this.decodeEntities(dom, curNode.textContent);
         nodeLengths[i] = str.length;
         txt += str;
-        if (!curNode.nextSibling)
-          break;
+        if (!curNode.nextSibling) break;
         curNode = curNode.nextSibling;
         i++;
       }
       const matchOffset = assertion.pre ? assertion.pre.length : 0;
       const m = matchAll(txt, new RegExp(matchStr), matchOffset);
-      if (!m.length)
-        return { node, offset };
+      if (!m.length) return { node, offset };
       let newOffset = closest(m, offset);
       if (curNode === node && newOffset === offset) {
         return { node, offset };
@@ -3579,11 +3184,9 @@
       curNode = startNode;
       while (newOffset >= nodeLengths[i]) {
         newOffset -= nodeLengths[i];
-        if (newOffset < 0)
-          return { node, offset };
+        if (newOffset < 0) return { node, offset };
         const nodeOffsets = [];
-        if (!curNode.nextSibling || i + 1 >= nodeOffsets.length)
-          return { node, offset };
+        if (!curNode.nextSibling || i + 1 >= nodeOffsets.length) return { node, offset };
         i++;
         curNode = curNode.nextSibling;
       }
@@ -3591,8 +3194,7 @@
     }
     resolveNode(index, subparts, dom, opts) {
       opts = Object.assign({}, opts || {});
-      if (!dom)
-        throw new Error(`Missing DOM argument`);
+      if (!dom) throw new Error(`Missing DOM argument`);
       let startNode;
       if (index === 0) {
         startNode = dom.querySelector(`package`);
@@ -3606,8 +3208,7 @@
         }
       }
       startNode = dom;
-      if (!startNode)
-        throw new Error(`Document incompatible with CFIs`);
+      if (!startNode) throw new Error(`Document incompatible with CFIs`);
       let node = startNode;
       let startFrom = 0;
       let i;
@@ -3649,40 +3250,33 @@
         throw new Error(`index is out of bounds`);
       }
       const subparts = this.parts[index];
-      if (!subparts)
-        throw new Error(`Missing CFI part for index: ` + index);
+      if (!subparts) throw new Error(`Missing CFI part for index: ` + index);
       const o = this.resolveNode(index, subparts, dom, opts);
       let node = o.node;
       const tagName = node.tagName.toLowerCase();
       if (tagName === `itemref` && // @ts-ignore
       node.parentNode.tagName.toLowerCase() === `spine`) {
         const idref = node.getAttribute(`idref`);
-        if (!idref)
-          throw new Error(`Referenced node had not 'idref' attribute`);
+        if (!idref) throw new Error(`Referenced node had not 'idref' attribute`);
         node = dom.getElementById(idref);
-        if (!node)
-          throw new Error(`Specified node is missing from manifest`);
+        if (!node) throw new Error(`Specified node is missing from manifest`);
         const href = node.getAttribute(`href`);
-        if (!href)
-          throw new Error(`Manifest item is missing href attribute`);
+        if (!href) throw new Error(`Manifest item is missing href attribute`);
         return href;
       }
       if (tagName === `iframe` || tagName === `embed`) {
         const src = node.getAttribute(`src`);
-        if (!src)
-          throw new Error(tagName + ` element is missing 'src' attribute`);
+        if (!src) throw new Error(tagName + ` element is missing 'src' attribute`);
         return src;
       }
       if (tagName === `object`) {
         const data = node.getAttribute(`data`);
-        if (!data)
-          throw new Error(tagName + ` element is missing 'data' attribute`);
+        if (!data) throw new Error(tagName + ` element is missing 'data' attribute`);
         return data;
       }
       if (tagName === `image` || tagName === `use`) {
         const href = node.getAttribute(`xlink:href`);
-        if (!href)
-          throw new Error(tagName + ` element is missing 'xlink:href' attribute`);
+        if (!href) throw new Error(tagName + ` element is missing 'xlink:href' attribute`);
         return href;
       }
       throw new Error(`No URI found`);
@@ -3693,13 +3287,11 @@
     resolveLocation(dom, parts) {
       const index = parts.length - 1;
       const subparts = parts[index];
-      if (!subparts)
-        throw new Error(`Missing CFI part for index: ` + index);
+      if (!subparts) throw new Error(`Missing CFI part for index: ` + index);
       const o = this.resolveNode(index, subparts, dom);
       const lastPart = this.deepClone(subparts[subparts.length - 1]);
       delete lastPart.nodeIndex;
-      if (!lastPart.offset)
-        delete o.offset;
+      if (!lastPart.offset) delete o.offset;
       return { ...lastPart, ...o };
     }
     // Takes the Document or XMLDocument for the final
@@ -3763,12 +3355,20 @@
       toString: () => text,
       getAnchorCfi: () => {
         if (selection.anchorNode) {
-          return CFI.generate(selection.anchorNode, selection.anchorOffset, `|[prose~anchor~${encodeURIComponent(item.id)}]`);
+          return CFI.generate(
+            selection.anchorNode,
+            selection.anchorOffset,
+            `|[prose~anchor~${encodeURIComponent(item.id)}]`
+          );
         }
       },
       getFocusCfi: () => {
         if (selection.focusNode) {
-          return CFI.generate(selection.focusNode, selection.focusOffset, `|[prose~anchor~${encodeURIComponent(item.id)}]`);
+          return CFI.generate(
+            selection.focusNode,
+            selection.focusOffset,
+            `|[prose~anchor~${encodeURIComponent(item.id)}]`
+          );
         }
       }
     };
@@ -3779,9 +3379,7 @@
     element$,
     context,
     pagination,
-    iframeEventBridgeElement$,
     spineItemManager,
-    hooks$,
     spineItemLocator,
     spineLocator,
     cfiLocator,
@@ -3789,18 +3387,13 @@
     navigationAdjusted$,
     currentNavigationPosition$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   }) => {
     const spineItems$ = new rxjs.Subject();
     const itemsBeforeDestroySubject$ = new rxjs.Subject();
     const subject = new rxjs.Subject();
     const containerElement$ = new rxjs.BehaviorSubject(noopElement$1);
-    const eventsHelper = createEventsHelper({
-      context,
-      spineItemManager,
-      iframeEventBridgeElement$,
-      locator: spineLocator
-    });
     let selectionSubscription;
     const reload = (manifest) => {
       itemsBeforeDestroySubject$.next();
@@ -3809,11 +3402,10 @@
         const spineItem = createSpineItem({
           item: resource,
           containerElement: containerElement$.getValue(),
-          iframeEventBridgeElement$,
           context,
-          hooks$,
           viewportState$,
-          settings
+          settings,
+          hookManager
         });
         spineItemManager.add(spineItem);
       });
@@ -3832,7 +3424,7 @@
       var _a;
       (_a = spineItemManager.get(id)) == null ? void 0 : _a.manipulateSpineItem(cb);
     };
-    context.$.manifest$.pipe(operators.tap(reload), operators.takeUntil(context.$.destroy$)).subscribe();
+    context.manifest$.pipe(operators.tap(reload), operators.takeUntil(context.destroy$)).subscribe();
     const waitForViewportFree$ = viewportState$.pipe(
       operators.filter((v) => v === `free`),
       operators.take(1)
@@ -3924,7 +3516,7 @@
           Report.error(e);
           return rxjs.EMPTY;
         }),
-        operators.takeUntil(context.$.destroy$)
+        operators.takeUntil(context.destroy$)
       )
     ).subscribe();
     const itemUpdateOnNavigation$ = navigation$.pipe(
@@ -3950,7 +3542,10 @@
             beginSpineItem
           );
           const beginPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(beginPosition, beginSpineItem);
-          const endPosition = spineLocator.getSpineItemPositionFromSpinePosition(spineItemsFromPosition.endPosition, endSpineItem);
+          const endPosition = spineLocator.getSpineItemPositionFromSpinePosition(
+            spineItemsFromPosition.endPosition,
+            endSpineItem
+          );
           const endPageIndex = spineItemLocator.getSpineItemPageIndexFromPosition(endPosition, endSpineItem);
           const endItemIndex = spineItemManager.getSpineItemIndex(endSpineItem) ?? 0;
           pagination.updateBeginAndEnd(
@@ -3970,7 +3565,7 @@
                *
                * The cfi is later adjusted with heavy dom lookup once the viewport is free.
                */
-              cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.getSettings().computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().beginCfi : beginItemIndex !== pagination.getPaginationInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
+              cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.settings.computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().beginCfi : beginItemIndex !== pagination.getPaginationInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
                 /* @todo check ? */
                 cfiLocator.getRootCfi(beginSpineItem)
               ),
@@ -3982,7 +3577,7 @@
               spineItem: endSpineItem,
               spineItemIndex: endItemIndex,
               pageIndex: endPageIndex,
-              cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.getSettings().computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().endCfi : endItemIndex !== pagination.getPaginationInfo().endSpineItemIndex ? cfiLocator.getRootCfi(endSpineItem) : (
+              cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.settings.computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().endCfi : endItemIndex !== pagination.getPaginationInfo().endSpineItemIndex ? cfiLocator.getRootCfi(endSpineItem) : (
                 /* @todo check ? */
                 cfiLocator.getRootCfi(endSpineItem)
               ),
@@ -4006,13 +3601,13 @@
         time2();
       }),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     itemUpdateOnNavigation$.pipe(
       operators.switchMap((data) => {
         return adjustPagination(data.position).pipe(operators.takeUntil(spineItemManager.$.layout$));
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
     rxjs.merge(
       /**
@@ -4033,8 +3628,7 @@
           operators.map(([, currentNavigationPosition]) => {
             const focusedSpineItemIndex = spineItemManager.getFocusedSpineItemIndex();
             report.log(`update contents`, { focusedSpineItemIndex });
-            if (focusedSpineItemIndex === void 0)
-              return;
+            if (focusedSpineItemIndex === void 0) return;
             const { begin = focusedSpineItemIndex, end = focusedSpineItemIndex } = spineLocator.getSpineItemsFromReadingOrderPosition(currentNavigationPosition) || {};
             if (begin !== focusedSpineItemIndex && end !== focusedSpineItemIndex) {
               Report.warn(`Current viewport is not in sync with focus item, load from focus item rather than viewport`);
@@ -4046,7 +3640,7 @@
           operators.take(1)
         );
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
     const elementSub = element$.pipe().subscribe((element) => {
       const containerElement = createContainerElement(element.ownerDocument);
@@ -4058,7 +3652,6 @@
       locator: spineLocator,
       spineItemLocator,
       cfiLocator,
-      normalizeEventForViewport: eventsHelper.normalizeEventForViewport,
       manipulateSpineItems,
       manipulateSpineItem,
       destroy: () => {
@@ -4105,16 +3698,16 @@
     const orderedSpineItemsSubject$ = new rxjs.BehaviorSubject([]);
     let focusedSpineItemIndex;
     const layout = () => {
-      const manifest = context.getManifest();
+      const manifest = context.manifest;
       const newItemLayoutInformation = [];
       const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
       orderedSpineItemsSubject$.value.reduce(
         ({ horizontalOffset, verticalOffset }, item, index) => {
           let minimumWidth = context.getPageSize().width;
           let blankPagePosition = `none`;
-          const itemStartOnNewScreen = horizontalOffset % context.getVisibleAreaRect().width === 0;
+          const itemStartOnNewScreen = horizontalOffset % context.state.visibleAreaRect.width === 0;
           const isLastItem = index === orderedSpineItemsSubject$.value.length - 1;
-          if (context.isUsingSpreadMode()) {
+          if (context.state.isUsingSpreadMode) {
             if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
               minimumWidth = context.getPageSize().width * 2;
             }
@@ -4140,10 +3733,10 @@
           const { width, height } = item.layout({
             minimumWidth,
             blankPagePosition,
-            spreadPosition: context.isUsingSpreadMode() ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
+            spreadPosition: context.state.isUsingSpreadMode ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
           });
-          if (settings.getSettings().computedPageTurnDirection === `vertical`) {
-            const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.getVisibleAreaRect().height;
+          if (settings.settings.computedPageTurnDirection === `vertical`) {
+            const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.state.visibleAreaRect.height;
             const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
             if (context.isRTL()) {
               item.adjustPositionOfElement({
@@ -4171,11 +3764,13 @@
               verticalOffset: newEdgeY
             };
           }
-          item.adjustPositionOfElement(context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 });
+          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
@@ -4192,27 +3787,27 @@
         },
         { horizontalOffset: 0, verticalOffset: 0 }
       );
-      const hasLayoutChanges = itemLayoutInformation.some((old, index) => !isShallowEqual(old, newItemLayoutInformation[index]));
+      const hasLayoutChanges = itemLayoutInformation.some(
+        (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
+      );
       itemLayoutInformation = newItemLayoutInformation;
       Report.log(NAMESPACE$4, `layout`, { hasLayoutChanges, itemLayoutInformation });
       layout$.next(hasLayoutChanges);
     };
     const focus = (indexOrSpineItem) => {
       const spineItemToFocus = typeof indexOrSpineItem === `number` ? get(indexOrSpineItem) : indexOrSpineItem;
-      if (!spineItemToFocus)
-        return;
+      if (!spineItemToFocus) return;
       const newActiveSpineItemIndex = orderedSpineItemsSubject$.value.indexOf(spineItemToFocus);
-      if (newActiveSpineItemIndex === focusedSpineItemIndex)
-        return;
+      if (newActiveSpineItemIndex === focusedSpineItemIndex) return;
       focusedSpineItemIndex = newActiveSpineItemIndex;
       focus$.next({ data: spineItemToFocus });
     };
     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
@@ -4253,25 +3848,28 @@
       return `before`;
     };
     const getSpineItemIndex = (spineItem) => {
-      if (!spineItem)
-        return void 0;
+      if (!spineItem) return void 0;
       const index = orderedSpineItemsSubject$.value.indexOf(spineItem);
       return index < 0 ? void 0 : index;
     };
     const add = (spineItem) => {
       orderedSpineItemsSubject$.value.push(spineItem);
-      spineItem.$.contentLayout$.pipe(operators.takeUntil(context.$.destroy$)).subscribe(() => {
+      spineItem.$.contentLayout$.pipe(operators.takeUntil(context.destroy$)).subscribe(() => {
         layout();
       });
       spineItem.$.loaded$.pipe(
         operators.tap(() => {
           if (spineItem.isUsingVerticalWriting()) {
-            context.setHasVerticalWriting(true);
+            context.update({
+              hasVerticalWriting: true
+            });
           } else {
-            context.setHasVerticalWriting(false);
+            context.update({
+              hasVerticalWriting: false
+            });
           }
         }),
-        operators.takeUntil(context.$.destroy$)
+        operators.takeUntil(context.destroy$)
       ).subscribe();
       spineItem.load();
     };
@@ -4311,12 +3909,175 @@
         layout$: layout$.asObservable(),
         itemIsReady$: orderedSpineItemsSubject$.asObservable().pipe(
           operators.switchMap((items) => {
-            const itemsIsReady$ = items.map((item) => item.$.isReady$.pipe(operators.map((isReady) => ({ item: item.item, isReady }))));
+            const itemsIsReady$ = items.map(
+              (item) => item.$.isReady$.pipe(operators.map((isReady) => ({ item: item.item, isReady })))
+            );
             return rxjs.merge(...itemsIsReady$);
           })
         )
       }
-    };
+    };
+  };
+  const pointerEvents$1 = [
+    `pointercancel`,
+    `pointerdown`,
+    `pointerenter`,
+    `pointerleave`,
+    `pointermove`,
+    `pointerout`,
+    `pointerover`,
+    `pointerup`
+    // `touchstart` as const,
+    // `touchend` as const,
+  ];
+  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 && event instanceof eventView.PointerEvent) {
+        return true;
+      }
+    }
+    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 && event instanceof eventView.PointerEvent) {
+        return true;
+      }
+    }
+    if (pointerEvents$1.includes(event.type)) {
+      return true;
+    }
+    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) => ({
@@ -4416,10 +4177,8 @@
     };
     const getPageFromOffset = (offset, pageWidth, numberOfPages) => {
       const offsetValues = [...Array(numberOfPages)].map((_, i) => i * pageWidth);
-      if (offset <= 0)
-        return 0;
-      if (offset >= numberOfPages * pageWidth)
-        return numberOfPages - 1;
+      if (offset <= 0) return 0;
+      if (offset >= numberOfPages * pageWidth) return numberOfPages - 1;
       return Math.max(
         0,
         offsetValues.findIndex((offsetRange) => offset < offsetRange + pageWidth)
@@ -4455,7 +4214,10 @@
           y: position.y + context.getPageSize().height
         };
       }
-      const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(nextPotentialPosition, spineItem);
+      const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(
+        nextPotentialPosition,
+        spineItem
+      );
       return new SpineItemNavigationPosition(navigationPosition);
     };
     const getNavigationForRightPage = (position, spineItem) => {
@@ -4469,7 +4231,10 @@
           y: position.y - context.getPageSize().height
         };
       }
-      const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(nextPotentialPosition, spineItem);
+      const navigationPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(
+        nextPotentialPosition,
+        spineItem
+      );
       return new SpineItemNavigationPosition(navigationPosition);
     };
     const getNavigationForLastPage = (spineItem) => {
@@ -4492,7 +4257,10 @@
       return new SpineItemNavigationPosition(position || { x: 0, y: 0 });
     };
     const getNavigationForPosition = (spineItem, position) => {
-      const potentiallyCorrectedPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(position, spineItem);
+      const potentiallyCorrectedPosition = spineItemLocator.getSpineItemClosestPositionFromUnsafePosition(
+        position,
+        spineItem
+      );
       return new SpineItemNavigationPosition(potentiallyCorrectedPosition);
     };
     return {
@@ -4538,7 +4306,7 @@
       { disable: true }
     );
     const getAdjustedPositionForSpread = ({ x, y }) => {
-      const isOffsetNotAtEdge = x % context.getVisibleAreaRect().width !== 0;
+      const isOffsetNotAtEdge = x % context.state.visibleAreaRect.width !== 0;
       const correctedX = isOffsetNotAtEdge ? x - context.getPageSize().width : x;
       return { x: correctedX, y };
     };
@@ -4577,7 +4345,7 @@
       return { x: 0, y: 0 };
     };
     const getNavigationForRightSinglePage = (position) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       const spineItem = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
       const defaultNavigation = position;
       if (!spineItem) {
@@ -4591,12 +4359,15 @@
           pageTurnDirection === `horizontal` ? { x: position.x + context.getPageSize().width, y: 0 } : { y: position.y + context.getPageSize().height, x: 0 }
         );
       } else {
-        const readingOrderPosition = locator.getSpinePositionFromSpineItemPosition(spineItemNavigationForRightPage, spineItem);
+        const readingOrderPosition = locator.getSpinePositionFromSpineItemPosition(
+          spineItemNavigationForRightPage,
+          spineItem
+        );
         return readingOrderPosition;
       }
     };
     const getNavigationForLeftSinglePage = (position) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       const spineItem = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
       const defaultNavigation = { ...position, spineItem };
       if (!spineItem) {
@@ -4620,7 +4391,7 @@
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
         return getAdjustedPositionForSpread(navigation);
       }
-      if (context.isUsingSpreadMode()) {
+      if (context.state.isUsingSpreadMode) {
         if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
           return getAdjustedPositionForSpread(
             wrapPositionWithSafeEdge(
@@ -4634,7 +4405,7 @@
             )
           );
         }
-        if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+        if (settings.settings.computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
           return getAdjustedPositionForSpread(navigation);
         }
         const doubleNavigation = getNavigationForRightSinglePage(navigation);
@@ -4648,7 +4419,7 @@
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
         return getAdjustedPositionForSpread(navigation);
       }
-      if (context.isUsingSpreadMode()) {
+      if (context.state.isUsingSpreadMode) {
         if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
           return getAdjustedPositionForSpread(
             wrapPositionWithSafeEdge(
@@ -4656,7 +4427,7 @@
             )
           );
         }
-        if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+        if (settings.settings.computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
           return getAdjustedPositionForSpread(navigation);
         }
         const doubleNavigation = getNavigationForLeftSinglePage(navigation);
@@ -4669,7 +4440,7 @@
       try {
         const validUrl = url instanceof URL ? url : new URL(url);
         const urlWithoutAnchor = `${validUrl.origin}${validUrl.pathname}`;
-        const existingSpineItem = (_a = context.getManifest()) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
+        const existingSpineItem = (_a = context.manifest) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
         if (existingSpineItem) {
           const spineItem = spineItemManager.get(existingSpineItem.id);
           if (spineItem) {
@@ -4698,15 +4469,15 @@
       return { x: 0, y: 0 };
     };
     const getMostPredominantNavigationForPosition = (viewportPosition) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       const triggerPercentage = 0.5;
-      const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
-      const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.getVisibleAreaRect().height * triggerPercentage;
+      const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
+      const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.state.visibleAreaRect.height * triggerPercentage;
       const midScreenPositionSafePosition = wrapPositionWithSafeEdge({ x: triggerXPosition, y: triggerYPosition });
       return getNavigationForPosition(midScreenPositionSafePosition);
     };
     const isNavigationGoingForwardFrom = (to, from) => {
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       if (pageTurnDirection === `vertical`) {
         return to.y > from.y;
       }
@@ -4750,14 +4521,14 @@
     );
     const adjustReadingOffset = ({ x, y }) => {
       var _a;
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         lastScrollWasProgrammaticallyTriggered = true;
         (_a = element$.getValue()) == null ? void 0 : _a.scrollTo({ left: x, top: y });
         return true;
       }
       return false;
     };
-    const runOnFreePageTurnModeOnly$ = (source) => settings.$.settings$.pipe(
+    const runOnFreePageTurnModeOnly$ = (source) => settings.settings$.pipe(
       operators.map(({ computedPageTurnMode }) => computedPageTurnMode),
       operators.distinctUntilChanged(),
       operators.switchMap((mode) => rxjs.iif(() => mode === `controlled`, rxjs.EMPTY, source))
@@ -4767,12 +4538,11 @@
         operators.filter(isDefined),
         operators.switchMap((element) => rxjs.fromEvent(element, `scroll`))
       )
-    ).pipe(onlyUserScrollFilter, operators.share(), operators.takeUntil(context.$.destroy$));
+    ).pipe(onlyUserScrollFilter, operators.share(), operators.takeUntil(context.destroy$));
     const getScaledDownPosition = ({ x, y }) => {
       var _a, _b;
       const spineElement = spine.getElement();
-      if (!spineElement)
-        throw new Error("Invalid spine element");
+      if (!spineElement) throw new Error("Invalid spine element");
       const spineScaleX = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
       const scaledDownPosition = {
         x: getNewScaledOffset({
@@ -4815,7 +4585,7 @@
     const userScrollEnd$ = userScroll$.pipe(
       operators.debounceTime(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, rxjs.animationFrameScheduler),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     const state$ = rxjs.merge(
       userScroll$.pipe(
@@ -4908,7 +4678,7 @@
       operators.filter((e) => e.type === `pageIndex`),
       operators.filter(() => {
         var _a;
-        if (((_a = context.getManifest()) == null ? void 0 : _a.renditionLayout) === `reflowable`) {
+        if (((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `reflowable`) {
           Report.warn(`This method only works for pre-paginated content`);
           return false;
         }
@@ -4927,13 +4697,15 @@
       10,
       (navigation, { allowSpineItemChange = true } = {}) => {
         const currentSpineItem = spineItemManager.getFocusedSpineItem();
-        if (!currentSpineItem)
-          return rxjs.EMPTY;
+        if (!currentSpineItem) return rxjs.EMPTY;
         const newSpineItem = locator.getSpineItemFromPosition(navigation) || currentSpineItem;
         const spineItemHasChanged = newSpineItem !== currentSpineItem;
         if (spineItemHasChanged) {
           if (allowSpineItemChange) {
-            const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(newSpineItem, currentSpineItem);
+            const positionOfNewSpineItemComparedToCurrentOne = spineItemManager.comparePositionOf(
+              newSpineItem,
+              currentSpineItem
+            );
             if (positionOfNewSpineItemComparedToCurrentOne === `before`) {
               return rxjs.of({
                 ...navigation,
@@ -5042,11 +4814,11 @@
       `${NAMESPACE$1} moveTo`,
       5,
       (delta, { final, start } = {}) => {
-        if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+        if (settings.settings.computedPageTurnMode === `scrollable`) {
           Report.warn(`pan control is not available on free page turn mode`);
           return;
         }
-        const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+        const pageTurnDirection = settings.settings.computedPageTurnDirection;
         if (start) {
           stateSubject$.next(`start`);
           movingLastDelta = { x: 0, y: 0 };
@@ -5087,8 +4859,7 @@
       10,
       (navigation, { allowSpineItemChange = true } = {}) => {
         const currentSpineItem = spineItemManager.getFocusedSpineItem();
-        if (!currentSpineItem)
-          return void 0;
+        if (!currentSpineItem) return void 0;
         const newSpineItem = locator.getSpineItemFromPosition(navigation) || currentSpineItem;
         const spineItemHasChanged = newSpineItem !== currentSpineItem;
         if (spineItemHasChanged) {
@@ -5106,7 +4877,7 @@
     );
     const snapNavigation$ = navigationTriggerSubject$.pipe(
       operators.filter((e) => e.type === `snap`),
-      rxjs.withLatestFrom(settings.$.settings$),
+      rxjs.withLatestFrom(settings.settings$),
       operators.switchMap(
         ([
           {
@@ -5114,11 +4885,11 @@
           },
           { navigationSnapThreshold }
         ]) => {
-          const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+          const pageTurnDirection = settings.settings.computedPageTurnDirection;
           const movingForward = navigator2.isNavigationGoingForwardFrom(to, from);
           const triggerPercentage = movingForward ? 1 - navigationSnapThreshold : navigationSnapThreshold;
-          const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
-          const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : to.y + context.getVisibleAreaRect().height * triggerPercentage;
+          const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
+          const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : to.y + context.state.visibleAreaRect.height * triggerPercentage;
           const midScreenPositionSafePosition = navigator2.wrapPositionWithSafeEdge({
             x: triggerXPosition,
             y: triggerYPosition
@@ -5155,7 +4926,7 @@
     parentElement$,
     cfiLocator,
     spineLocator,
-    hooks$,
+    hookManager,
     spine,
     settings
   }) => {
@@ -5177,7 +4948,7 @@
     const adjustNavigationSubject$ = new rxjs.Subject();
     const getCurrentViewportPosition = Report.measurePerformance(`${NAMESPACE} getCurrentViewportPosition`, 1, () => {
       var _a;
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         return scrollViewportNavigator.getCurrentViewportPosition();
       }
       const { x, y } = ((_a = element$.getValue()) == null ? void 0 : _a.getBoundingClientRect()) ?? { x: 0, y: 0 };
@@ -5221,16 +4992,15 @@
     const viewportNavigatorsSharedState$ = rxjs.merge(...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2));
     let lastUserExpectedNavigation;
     const makeItHot = (source$) => {
-      source$.pipe(operators.takeUntil(context.$.destroy$)).subscribe();
+      source$.pipe(operators.takeUntil(context.destroy$)).subscribe();
       return source$;
     };
     const adjustReadingOffset = Report.measurePerformance(
       `adjustReadingOffset`,
       2,
-      ({ x, y }, hooks) => {
+      ({ x, y }) => {
         const element = element$.getValue();
-        if (!element)
-          throw new Error("Invalid element");
+        if (!element) throw new Error("Invalid element");
         currentViewportPositionMemoUnused = void 0;
         const isAdjusted = viewportNavigators.reduce((isAdjusted2, navigator22) => {
           return navigator22.adjustReadingOffset({ x, y }) || isAdjusted2;
@@ -5238,11 +5008,7 @@
         if (!isAdjusted) {
           element.style.transform = `translate3d(${-x}px, -${y}px, 0)`;
         }
-        hooks.forEach((hook) => {
-          if (hook.name === `onViewportOffsetAdjust`) {
-            hook.fn();
-          }
-        });
+        hookManager.execute("onViewportOffsetAdjust", void 0, {});
       },
       { disable: true }
     );
@@ -5250,7 +5016,7 @@
       const lastCfi = pagination.getPaginationInfo().beginCfi;
       let adjustedSpinePosition = currentNavigationPositionSubject$.value;
       const offsetInSpineItem = 0;
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         adjustedSpinePosition = scrollViewportNavigator.getNavigationForPosition(getCurrentViewportPosition());
       } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-cfi`) {
         adjustedSpinePosition = navigator2.getNavigationForCfi(lastUserExpectedNavigation.data);
@@ -5295,7 +5061,7 @@
     layoutSubject$.subscribe(() => {
       currentViewportPositionMemoUnused = void 0;
     });
-    const layoutChangeSettings$ = settings.$.settings$.pipe(
+    const layoutChangeSettings$ = settings.settings$.pipe(
       mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
       operators.distinctUntilChanged(isShallowEqual),
       operators.skip(1)
@@ -5303,7 +5069,7 @@
     const layout$ = rxjs.merge(layoutSubject$, layoutChangeSettings$).pipe(
       operators.withLatestFrom(element$),
       operators.tap(([, element]) => {
-        if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+        if (settings.settings.computedPageTurnMode === `scrollable`) {
           element.style.removeProperty(`transform`);
           element.style.removeProperty(`transition`);
           element.style.overflow = `scroll`;
@@ -5355,11 +5121,11 @@
         return { ...event, lastUserExpectedNavigation };
       }),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     const navigationWhichRequireManualAdjust$ = navigation$.pipe(
       operators.filter(({ triggeredBy }) => {
-        if (triggeredBy === `scroll` || settings.getSettings().computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
+        if (triggeredBy === `scroll` || settings.settings.computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
           return false;
         } else {
           return true;
@@ -5371,7 +5137,7 @@
       navigationWhichRequireManualAdjust$
     ).pipe(
       operators.map(({ animation, position }) => {
-        const shouldAnimate = !(!animation || animation === `turn` && settings.getSettings().computedPageTurnAnimation === `none`);
+        const shouldAnimate = !(!animation || animation === `turn` && settings.settings.computedPageTurnAnimation === `none`);
         return {
           type: `manualAdjust`,
           shouldAnimate,
@@ -5391,10 +5157,9 @@
         }
       }),
       operators.switchMap(([, currentEvent]) => {
-        if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`)
-          return rxjs.EMPTY;
-        const animationDuration = currentEvent.animation === `snap` ? settings.getSettings().computedSnapAnimationDuration : settings.getSettings().computedPageTurnAnimationDuration;
-        const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.getSettings().computedPageTurnAnimation;
+        if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`) return rxjs.EMPTY;
+        const animationDuration = currentEvent.animation === `snap` ? settings.settings.computedSnapAnimationDuration : settings.settings.computedPageTurnAnimationDuration;
+        const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.settings.computedPageTurnAnimation;
         return rxjs.of(currentEvent).pipe(
           /**
            * @important
@@ -5428,23 +5193,22 @@
            * need to adjust to anchor to the payload position. This is because we use viewport computed position,
            * not the value set by `setProperty`
            */
-          operators.withLatestFrom(hooks$),
-          operators.tap(([data, hooks]) => {
+          operators.tap((data) => {
             if (pageTurnAnimation !== `fade`) {
-              adjustReadingOffset(data.position, hooks);
+              adjustReadingOffset(data.position);
             }
           }),
           currentEvent.shouldAnimate ? operators.delay(animationDuration / 2, rxjs.animationFrameScheduler) : rxjs.identity,
-          operators.tap(([data, hooks]) => {
+          operators.tap((data) => {
             if (pageTurnAnimation === `fade`) {
-              adjustReadingOffset(data.position, hooks);
+              adjustReadingOffset(data.position);
               element$.getValue().style.setProperty(`opacity`, `1`);
             }
           }),
           currentEvent.shouldAnimate ? operators.delay(animationDuration / 2, rxjs.animationFrameScheduler) : rxjs.identity,
-          operators.tap(([data, hooks]) => {
+          operators.tap((data) => {
             if (pageTurnAnimation === `fade`) {
-              adjustReadingOffset(data.position, hooks);
+              adjustReadingOffset(data.position);
             }
           }),
           operators.takeUntil(
@@ -5456,7 +5220,7 @@
         );
       }),
       operators.share(),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     );
     const adjustmentState$ = rxjs.merge(
       rxjs.merge(manualAdjust$).pipe(operators.map(() => `start`)),
@@ -5501,8 +5265,7 @@
         () => waitForViewportFree$.pipe(
           operators.switchMap(() => {
             const focusedSpineItem = spineItemManager.getFocusedSpineItem();
-            if (!focusedSpineItem)
-              return rxjs.EMPTY;
+            if (!focusedSpineItem) return rxjs.EMPTY;
             return adjustNavigation(focusedSpineItem);
           }),
           operators.takeUntil(navigation$)
@@ -5511,7 +5274,7 @@
       operators.share()
     );
     const parentElementSub = parentElement$.pipe(operators.filter(isDefined), operators.withLatestFrom(spine.element$)).subscribe(([parentElement, spineElement]) => {
-      const element = createElement(parentElement.ownerDocument, hooks$);
+      const element = createElement(parentElement.ownerDocument, hookManager);
       element.appendChild(spineElement);
       parentElement.appendChild(element);
       element$.next(element);
@@ -5547,19 +5310,15 @@
       }
     };
   };
-  const createElement = (doc, hooks$) => {
+  const createElement = (doc, hookManager) => {
     const element = doc.createElement(`div`);
     element.style.cssText = `
     height: 100%;
     position: relative;
   `;
     element.className = `${HTML_PREFIX$1}-viewport-navigator`;
-    return hooks$.getValue().reduce((element2, hook) => {
-      if (hook.name === `viewportNavigator.onBeforeContainerCreated`) {
-        return hook.fn(element2);
-      }
-      return element2;
-    }, element);
+    hookManager.execute("viewportNavigator.onBeforeContainerCreated", void 0, { element });
+    return element;
   };
   const createLocationResolver = ({
     spineItemManager,
@@ -5600,7 +5359,7 @@
         const spineItem = spineItemManager.getAll().find((item) => {
           const { left, right, bottom, top } = spineItemManager.getAbsolutePositionOf(item);
           const isWithinXAxis = position.x >= left && position.x < right;
-          if (settings.getSettings().computedPageTurnDirection === `horizontal`) {
+          if (settings.settings.computedPageTurnDirection === `horizontal`) {
             return isWithinXAxis;
           } else {
             return isWithinXAxis && position.y >= top && position.y < bottom;
@@ -5624,13 +5383,14 @@
     const getSpineItemsFromReadingOrderPosition = (position) => {
       const itemAtPosition = getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
       const itemAtPositionIndex = spineItemManager.getSpineItemIndex(itemAtPosition);
-      if (itemAtPositionIndex === void 0)
-        return void 0;
+      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;
+      const endItemIndex = spineItemManager.getSpineItemIndex(
+        getSpineItemFromPosition(endPosition) || spineItemManager.getFocusedSpineItem()
+      ) ?? itemAtPositionIndex;
       const items = [
         { item: itemAtPositionIndex, position },
         { item: endItemIndex, position: endPosition }
@@ -5710,12 +5470,10 @@
     };
     const resolveCfi = (cfiString) => {
       var _a, _b, _c;
-      if (!cfiString)
-        return void 0;
+      if (!cfiString) return void 0;
       const spineItem = getSpineItemFromCfi(cfiString);
       const spineItemIndex = spineItemManager.getSpineItemIndex(spineItem) || 0;
-      if (!spineItem)
-        return void 0;
+      if (!spineItem) return void 0;
       const { cleanedCfi, offset } = extractProseMetadataFromCfi(cfiString);
       const cfi = new CFI(cleanedCfi, {});
       const doc = (_c = (_b = (_a = spineItem.spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame) == null ? void 0 : _b.contentWindow) == null ? void 0 : _c.document;
@@ -5748,80 +5506,164 @@
       generateFromRange
     };
   };
-  const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
-  const createSettings = (initialSettings) => {
-    const mergedSettings = {
-      forceSinglePageMode: false,
-      pageTurnAnimation: `none`,
-      computedPageTurnAnimation: `none`,
-      pageTurnDirection: `horizontal`,
-      computedPageTurnDirection: `horizontal`,
-      pageTurnAnimationDuration: void 0,
-      computedPageTurnAnimationDuration: 0,
-      pageTurnMode: `controlled`,
+  const getComputedSettings = (settings, context) => {
+    const manifest = context.manifest;
+    const hasVerticalWriting = context.state.hasVerticalWriting ?? false;
+    const computedSettings = {
+      computedPageTurnDirection: settings.pageTurnDirection,
+      computedPageTurnAnimation: settings.pageTurnAnimation,
       computedPageTurnMode: `controlled`,
-      computedSnapAnimationDuration: 300,
-      navigationSnapThreshold: 0.3,
-      numberOfAdjacentSpineItemToPreLoad: 0,
-      ...initialSettings
-    };
-    updateComputedSettings(void 0, mergedSettings, false);
-    const settingsSubject$ = new rxjs.BehaviorSubject(mergedSettings);
-    const setSettings = (newSettings, options) => {
-      if (Object.keys(newSettings).length === 0)
-        return;
-      const newMergedSettings = { ...settingsSubject$.value, ...newSettings };
-      updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
-      settingsSubject$.next(newMergedSettings);
-    };
-    const recompute = (options) => {
-      const newMergedSettings = { ...settingsSubject$.value };
-      updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
-      settingsSubject$.next(newMergedSettings);
-    };
-    const destroy = () => {
-      settingsSubject$.complete();
-    };
-    return {
-      getSettings: () => settingsSubject$.value,
-      setSettings,
-      recompute,
-      destroy,
-      $: {
-        settings$: settingsSubject$.asObservable().pipe(operators.distinctUntilChanged(isShallowEqual))
-      }
+      computedPageTurnAnimationDuration: 0,
+      computedSnapAnimationDuration: 0
     };
-  };
-  const updateComputedSettings = (newManifest, settings, hasVerticalWriting) => {
-    settings.computedPageTurnDirection = settings.pageTurnDirection;
-    settings.computedPageTurnAnimation = settings.pageTurnAnimation;
-    settings.computedPageTurnMode = `controlled`;
-    if ((newManifest == null ? void 0 : newManifest.renditionFlow) === `scrolled-continuous`) {
-      settings.computedPageTurnMode = `scrollable`;
-      settings.computedPageTurnDirection = `vertical`;
-    } else if (newManifest && settings.pageTurnMode === `scrollable` && (newManifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(newManifest))) {
+    if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
+      computedSettings.computedPageTurnMode = `scrollable`;
+      computedSettings.computedPageTurnDirection = `vertical`;
+    } else if (manifest && settings.pageTurnMode === `scrollable` && (manifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(manifest))) {
       Report.warn(`pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`);
-      settings.computedPageTurnAnimation = `none`;
-      settings.computedPageTurnMode = `controlled`;
+      computedSettings.computedPageTurnAnimation = `none`;
+      computedSettings.computedPageTurnMode = `controlled`;
     } else if (settings.pageTurnMode === `scrollable`) {
-      settings.computedPageTurnMode = `scrollable`;
-      settings.computedPageTurnDirection = `vertical`;
+      computedSettings.computedPageTurnMode = `scrollable`;
+      computedSettings.computedPageTurnDirection = `vertical`;
     }
-    if (hasVerticalWriting && settings.computedPageTurnAnimation === `slide`) {
+    if (hasVerticalWriting && computedSettings.computedPageTurnAnimation === `slide`) {
       Report.warn(
-        `pageTurnAnimation ${settings.computedPageTurnAnimation} incompatible with current book, switching back to default`
+        `pageTurnAnimation ${computedSettings.computedPageTurnAnimation} incompatible with current book, switching back to default`
       );
-      settings.computedPageTurnAnimation = `none`;
+      computedSettings.computedPageTurnAnimation = `none`;
     }
-    if (settings.computedPageTurnMode === `scrollable`) {
-      settings.computedPageTurnAnimationDuration = 0;
-      settings.computedPageTurnAnimation = `none`;
+    if (computedSettings.computedPageTurnMode === `scrollable`) {
+      computedSettings.computedPageTurnAnimationDuration = 0;
+      computedSettings.computedPageTurnAnimation = `none`;
     } else {
-      settings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+      computedSettings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
     }
+    return computedSettings;
   };
-  const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
-  const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
+  const defaultSettings = {
+    forceSinglePageMode: false,
+    pageTurnAnimation: `none`,
+    //   computedPageTurnAnimation: `none`,
+    pageTurnDirection: `horizontal`,
+    //   computedPageTurnDirection: `horizontal`,
+    pageTurnAnimationDuration: void 0,
+    //   computedPageTurnAnimationDuration: 0,
+    pageTurnMode: `controlled`,
+    //   computedPageTurnMode: `controlled`,
+    //   computedSnapAnimationDuration: 300,
+    navigationSnapThreshold: 0.3,
+    numberOfAdjacentSpineItemToPreLoad: 0
+  };
+  class SettingsManager {
+    constructor(initialSettings, context) {
+      this._context = context;
+      const settingsWithDefaults = {
+        ...defaultSettings,
+        ...initialSettings
+      };
+      const computedSettings = getComputedSettings(settingsWithDefaults, context);
+      const settings = { ...settingsWithDefaults, ...computedSettings };
+      this._settingsSubject$ = new rxjs.BehaviorSubject(settings);
+      this.settings$ = this._settingsSubject$.asObservable().pipe(operators.distinctUntilChanged(isShallowEqual));
+      const recomputeSettingsOnContextChange$ = rxjs.combineLatest([context.hasVerticalWriting$, context.manifest$]).pipe(
+        operators.tap(() => {
+          this._updateSettings(this.settings);
+        })
+      );
+      const updateContextOnSettingsChanges$ = this._settingsSubject$.pipe(
+        operators.tap(({ forceSinglePageMode }) => {
+          context.update({ forceSinglePageMode });
+        })
+      );
+      rxjs.merge(recomputeSettingsOnContextChange$, updateContextOnSettingsChanges$).pipe(operators.takeUntil(context.destroy$)).subscribe();
+    }
+    // @see https://github.com/microsoft/TypeScript/issues/17293
+    _updateSettings(settings) {
+      const computed = getComputedSettings(settings, this._context);
+      const newMergedSettings = { ...settings, ...computed };
+      this._settingsSubject$.next(newMergedSettings);
+    }
+    setSettings(settings) {
+      if (Object.keys(settings).length === 0) return;
+      const newMergedSettings = { ...this._settingsSubject$.value, ...settings };
+      this._updateSettings(newMergedSettings);
+    }
+    get settings() {
+      return this._settingsSubject$.getValue();
+    }
+    destroy() {
+      this._settingsSubject$.complete();
+    }
+  }
+  class HookManager {
+    constructor() {
+      this._hooks = [];
+      this._hookExecutions = [];
+    }
+    /**
+     * Will:
+     * - call destroy function for every execution of this specific hook
+     * - remove the hook for further calls
+     */
+    deregister(hookToDeregister) {
+      this._hooks = this._hooks.filter((hook) => hook !== hookToDeregister);
+      return this.destroy(hookToDeregister.name, void 0, hookToDeregister);
+    }
+    /**
+     * Ideal when your logic only needs to apply something to the item when it's loaded.
+     * You can manipulate your item later if you need to update it and trigger a layout.
+     * This logic will not run every time there is a layout.
+     */
+    register(name, fn) {
+      const hook = {
+        name,
+        runFn: fn
+      };
+      this._hooks.push(hook);
+      return () => {
+        this.deregister(hook);
+      };
+    }
+    execute(name, id, params) {
+      const hooks = this._hooks.filter((hook) => name === hook.name);
+      const fnResults = hooks.map((hook) => {
+        let userDestroyFn = () => rxjs.of(void 0);
+        const destroySubject = new rxjs.Subject();
+        const destroy = (fn) => {
+          userDestroyFn = fn;
+        };
+        const destroyFn = () => {
+          destroySubject.next();
+          destroySubject.complete();
+          const result = userDestroyFn();
+          return result ?? rxjs.of(void 0);
+        };
+        const fnResult = hook.runFn({ ...params, destroy$: destroySubject.asObservable(), destroy });
+        this._hookExecutions.push({
+          name,
+          id,
+          destroyFn,
+          ref: hook
+        });
+        return fnResult;
+      });
+      return fnResults;
+    }
+    destroy(name, id, ref) {
+      const instances = this._hookExecutions.filter(
+        (hookInstance) => (
+          // by ref is higher priority
+          ref && hookInstance.ref === ref || // otherwise we refine by name and eventually by id
+          name === hookInstance.name && (!id || id && id === hookInstance.id)
+        )
+      );
+      this._hookExecutions = this._hookExecutions.filter((instance) => !instances.includes(instance));
+      const destroyFns = instances.map(({ destroyFn }) => destroyFn());
+      return rxjs.combineLatest(destroyFns);
+    }
+  }
+  const createReader = (inputSettings) => {
     const stateSubject$ = new rxjs.BehaviorSubject({
       supportedPageTurnAnimation: [`fade`, `none`, `slide`],
       supportedPageTurnMode: [`controlled`, `scrollable`],
@@ -5830,24 +5672,23 @@
     });
     const destroy$ = new rxjs.Subject();
     const selectionSubject$ = new rxjs.Subject();
-    const hooksSubject$ = new rxjs.BehaviorSubject(initialHooks || []);
     const navigationSubject = new rxjs.Subject();
     const navigationAdjustedSubject = new rxjs.Subject();
     const currentNavigationPositionSubject$ = new rxjs.BehaviorSubject({ x: 0, y: 0 });
     const viewportStateSubject = new rxjs.BehaviorSubject(`free`);
-    const settings = createSettings(inputSettings);
-    const context = createContext(settings);
-    const spineItemManager = createSpineItemManager({ context, settings });
+    const hookManager = new HookManager();
+    const context = new Context();
+    const settingsManager = new SettingsManager(inputSettings, context);
+    const spineItemManager = createSpineItemManager({ context, settings: settingsManager });
     const pagination = createPagination({ context, spineItemManager });
     const elementSubject$ = new rxjs.BehaviorSubject(void 0);
     const element$ = elementSubject$.pipe(operators.filter(isDefined));
-    const iframeEventBridgeElement$ = new rxjs.BehaviorSubject(void 0);
     const spineItemLocator = createLocationResolver$1({ context });
     const spineLocator = createLocationResolver({
       context,
       spineItemManager,
       spineItemLocator,
-      settings
+      settings: settingsManager
     });
     const cfiLocator = createCfiLocator({
       spineItemManager,
@@ -5857,19 +5698,18 @@
     const navigation$ = navigationSubject.asObservable();
     const spine = createSpine({
       element$,
-      iframeEventBridgeElement$,
       context,
-      settings,
+      settings: settingsManager,
       pagination,
       spineItemManager,
-      hooks$: hooksSubject$,
       navigation$,
       spineLocator,
       spineItemLocator,
       cfiLocator,
       navigationAdjusted$: navigationAdjustedSubject.asObservable(),
       viewportState$: viewportStateSubject.asObservable(),
-      currentNavigationPosition$: currentNavigationPositionSubject$.asObservable()
+      currentNavigationPosition$: currentNavigationPositionSubject$.asObservable(),
+      hookManager
     });
     const viewportNavigator = createViewportNavigator({
       context,
@@ -5878,9 +5718,9 @@
       parentElement$: elementSubject$,
       cfiLocator,
       spineLocator,
-      hooks$: hooksSubject$,
+      hookManager,
       spine,
-      settings
+      settings: settingsManager
     });
     viewportNavigator.$.state$.subscribe(viewportStateSubject);
     viewportNavigator.$.navigation$.subscribe(navigationSubject);
@@ -5890,8 +5730,7 @@
       var _a;
       const containerElement = (_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement;
       const element = elementSubject$.getValue();
-      if (!element || !containerElement)
-        throw new Error("Invalid element");
+      if (!element || !containerElement) throw new Error("Invalid element");
       const dimensions = {
         width: containerElement == null ? void 0 : containerElement.offsetWidth,
         height: containerElement == null ? void 0 : containerElement.offsetHeight
@@ -5906,30 +5745,29 @@
       element.style.height = `${dimensions.height - marginTop - marginBottom}px`;
       element.style.width = `${containerElementEvenWidth - 2 * margin}px`;
       const elementRect = element.getBoundingClientRect();
-      context.setVisibleAreaRect({
-        x: elementRect.x,
-        y: elementRect.y,
-        width: containerElementEvenWidth,
-        height: dimensions.height
+      context.update({
+        visibleAreaRect: {
+          x: elementRect.x,
+          y: elementRect.y,
+          width: containerElementEvenWidth,
+          height: dimensions.height
+        }
       });
       viewportNavigator.layout();
     };
     const load = (manifest, loadOptions) => {
       var _a;
-      if (context.getManifest()) {
+      if (context.manifest) {
         Report.warn(`loading a new book is not supported yet`);
         return;
       }
       Report.log(`load`, { manifest, loadOptions });
       const element = createWrapperElement(loadOptions.containerElement);
-      const iframeEventBridgeElement = createIframeEventBridgeElement(loadOptions.containerElement);
       if (loadOptions.containerElement !== ((_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement)) {
         elementSubject$.next(element);
-        iframeEventBridgeElement$.next(iframeEventBridgeElement);
         loadOptions.containerElement.appendChild(element);
-        element.appendChild(iframeEventBridgeElement);
       }
-      context.load(manifest, loadOptions);
+      context.update({ manifest, ...loadOptions, forceSinglePageMode: settingsManager.settings.forceSinglePageMode });
       layout();
       if (!loadOptions.cfi) {
         viewportNavigator.goToSpineItem(0, { animate: false });
@@ -5937,9 +5775,6 @@
         viewportNavigator.goToCfi(loadOptions.cfi, { animate: false });
       }
     };
-    const registerHook = (name, fn) => {
-      hooksSubject$.next([...hooksSubject$.getValue(), { name, fn }]);
-    };
     spine.$.$.pipe(
       operators.tap((event) => {
         if (event.type === `onSelectionChange`) {
@@ -5952,26 +5787,31 @@
       rxjs.switchMap(({ adjustedSpinePosition }) => {
         return spine.adjustPagination(adjustedSpinePosition).pipe(operators.takeUntil(navigation$));
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
-    rxjs.merge(context.$.state$, settings.$.settings$).pipe(
+    rxjs.merge(context.state$, settingsManager.settings$).pipe(
       operators.map(() => void 0),
-      operators.withLatestFrom(context.$.state$),
+      operators.withLatestFrom(context.state$),
       operators.map(([, { hasVerticalWriting }]) => {
-        const manifest = context.getManifest();
+        const manifest = context.manifest;
         return {
           hasVerticalWriting,
           renditionFlow: manifest == null ? void 0 : manifest.renditionFlow,
           renditionLayout: manifest == null ? void 0 : manifest.renditionLayout,
-          computedPageTurnMode: settings.getSettings().computedPageTurnMode
+          computedPageTurnMode: settingsManager.settings.computedPageTurnMode
         };
       }),
       operators.distinctUntilChanged(isShallowEqual),
       operators.map(
-        ({ hasVerticalWriting, renditionFlow, renditionLayout, computedPageTurnMode }) => {
+        ({
+          hasVerticalWriting,
+          renditionFlow,
+          renditionLayout,
+          computedPageTurnMode
+        }) => {
           return {
             ...stateSubject$.value,
-            supportedPageTurnMode: renditionFlow === `scrolled-continuous` ? [`scrollable`] : !context.areAllItemsPrePaginated() ? [`controlled`] : [`controlled`, `scrollable`],
+            supportedPageTurnMode: renditionFlow === `scrolled-continuous` ? [`scrollable`] : !context.state.areAllItemsPrePaginated ? [`controlled`] : [`controlled`, `scrollable`],
             supportedPageTurnAnimation: renditionFlow === `scrolled-continuous` || computedPageTurnMode === `scrollable` ? [`none`] : hasVerticalWriting ? [`fade`, `none`] : [`fade`, `none`, `slide`],
             supportedPageTurnDirection: computedPageTurnMode === `scrollable` ? [`vertical`] : renditionLayout === `reflowable` ? [`horizontal`] : [`horizontal`, `vertical`]
           };
@@ -5980,16 +5820,13 @@
       operators.takeUntil(destroy$)
     ).subscribe(stateSubject$);
     const destroy = () => {
-      var _a, _b;
-      settings.destroy();
-      hooksSubject$.next([]);
-      hooksSubject$.complete();
+      var _a;
+      settingsManager.destroy();
       pagination.destroy();
       context.destroy();
       viewportNavigator.destroy();
       spine.destroy();
       (_a = elementSubject$.getValue()) == null ? void 0 : _a.remove();
-      (_b = iframeEventBridgeElement$.getValue()) == null ? void 0 : _b.remove();
       stateSubject$.complete();
       selectionSubject$.complete();
       destroy$.next();
@@ -5997,43 +5834,16 @@
     };
     const reader = {
       context,
-      registerHook,
       spine,
+      hookManager,
       viewportNavigator,
-      manipulateSpineItems: spine.manipulateSpineItems,
-      manipulateSpineItem: spine.manipulateSpineItem,
-      moveTo: viewportNavigator.moveTo,
-      turnLeft: viewportNavigator.turnLeft,
-      turnRight: viewportNavigator.turnRight,
-      goToPageOfCurrentChapter: viewportNavigator.goToPageOfCurrentChapter,
-      goToPage: viewportNavigator.goToPage,
-      goToUrl: viewportNavigator.goToUrl,
-      goToCfi: viewportNavigator.goToCfi,
-      goToSpineItem: viewportNavigator.goToSpineItem,
-      getFocusedSpineItemIndex: spineItemManager.getFocusedSpineItemIndex,
-      getSpineItem: spineItemManager.get,
-      getSpineItems: spineItemManager.getAll,
-      getAbsolutePositionOf: spineItemManager.getAbsolutePositionOf,
-      getSelection: spine.getSelection,
-      isSelecting: spine.isSelecting,
-      normalizeEventForViewport: spine.normalizeEventForViewport,
-      getCfiMetaInformation: spine.cfiLocator.getCfiMetaInformation,
-      resolveCfi: spine.cfiLocator.resolveCfi,
-      generateCfi: spine.cfiLocator.generateFromRange,
-      locator: spine.locator,
-      getCurrentNavigationPosition: viewportNavigator.getCurrentNavigationPosition,
-      getCurrentViewportPosition: viewportNavigator.getCurrentViewportPosition,
+      spineItemManager,
       layout,
       load,
       destroy,
-      spineItems$: spine.$.spineItems$,
-      context$: context.$.state$,
       pagination,
-      settings: {
-        settings$: settings.$.settings$,
-        getSettings: settings.getSettings,
-        setSettings: (data) => settings.setSettings(data, context.getState())
-      },
+      settings: settingsManager,
+      element$,
       $: {
         state$: stateSubject$.asObservable(),
         /**
@@ -6042,21 +5852,12 @@
          * have an effect.
          * It can typically be used to hide a loading indicator.
          */
-        loadStatus$: context.$.manifest$.pipe(operators.map((manifest) => manifest ? "ready" : "idle")),
+        loadStatus$: context.manifest$.pipe(operators.map((manifest) => manifest ? "ready" : "idle")),
         /**
          * Dispatched when a change in selection happens
          */
         selection$: selectionSubject$.asObservable(),
-        viewportState$: viewportNavigator.$.state$,
-        layout$: spine.$.layout$,
-        itemsBeforeDestroy$: spine.$.itemsBeforeDestroy$,
-        itemIsReady$: spineItemManager.$.itemIsReady$,
         destroy$
-      },
-      __debug: {
-        pagination,
-        context,
-        spineItemManager
       }
     };
     return reader;
@@ -6070,19 +5871,6 @@
     element.className = `${HTML_PREFIX$1}-reader`;
     return element;
   };
-  const createIframeEventBridgeElement = (containerElement) => {
-    const iframeEventBridgeElement = containerElement.ownerDocument.createElement(`div`);
-    iframeEventBridgeElement.id = IFRAME_EVENT_BRIDGE_ELEMENT_ID;
-    iframeEventBridgeElement.style.cssText = `
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1;
-  `;
-    return iframeEventBridgeElement;
-  };
   const utilsEnhancer = (next) => (options) => {
     const reader = next(options);
     const isOrIsWithinValidLink = (target) => {
@@ -6207,15 +5995,14 @@
       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) => {
       const item = retrieveItem(itemIndexOrId);
-      if (!item)
-        return new Response(`Item not found`, { status: 404 });
+      if (!item) return new Response(`Item not found`, { status: 404 });
       const db = await openDatabase(`prose-reader`);
       const cacheData = await db.get(`${uniqueID}_${item.id}`);
       if (cacheData) {
@@ -6231,8 +6018,7 @@
     cache$.asObservable().pipe(
       operators.mergeMap(({ id, data }) => {
         const item = retrieveItem(id);
-        if (!item)
-          return rxjs.EMPTY;
+        if (!item) return rxjs.EMPTY;
         return rxjs.from(rxjs.forkJoin([openDatabase(`prose-reader`), rxjs.from(data.blob())])).pipe(
           operators.switchMap(([db, blob]) => {
             return rxjs.from(db.put(`${uniqueID}_${item.id}`, blob));
@@ -6243,9 +6029,9 @@
           })
         );
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
-    const onLoad$ = context.$.manifest$.pipe(
+    const onLoad$ = context.manifest$.pipe(
       operators.tap(() => {
         uniqueID = Date.now().toString();
       })
@@ -6269,7 +6055,7 @@
           })
         );
       }),
-      operators.takeUntil(context.$.destroy$)
+      operators.takeUntil(context.destroy$)
     ).subscribe();
     const destroy = () => {
       cache$.complete();
@@ -6282,14 +6068,6 @@
   const resourcesEnhancer = (next) => (options) => {
     const reader = next(options);
     const resourceManager = createResourcesManager(reader.context);
-    const load = (manifest, loadOptions) => {
-      reader.load(manifest, {
-        ...loadOptions
-      });
-    };
-    reader.registerHook(`item.onGetResource`, (fetcher) => async (item) => {
-      return resourceManager.get(item, fetcher);
-    });
     const destroy = () => {
       resourceManager.destroy();
       reader.destroy();
@@ -6300,8 +6078,8 @@
       //   ...reader.$,
       //   errors$: merge(reader.$.errors$, errorsSubject$.asObservable())
       // },
-      destroy,
-      load
+      destroy
+      // load,
     };
   };
   const mediaEnhancer = (next) => (options) => {
@@ -6352,7 +6130,7 @@
         threshold: 0.5
       }
     );
-    reader.registerHook(`item.onLoad`, ({ frame }) => {
+    reader.hookManager.register(`item.onLoad`, ({ frame, destroy: destroy2 }) => {
       var _a;
       frameObserver.observe(frame);
       const videos = (_a = frame.contentDocument) == null ? void 0 : _a.body.getElementsByTagName(`video`);
@@ -6360,10 +6138,10 @@
         elementObserver.observe(element);
         return () => elementObserver.unobserve(element);
       });
-      return () => {
+      destroy2(() => {
         frameObserver.unobserve(frame);
         unobserveElements.forEach((unobserve) => unobserve());
-      };
+      });
     });
     const destroy = () => {
       frameObserver.disconnect();
@@ -6379,22 +6157,26 @@
     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 {
           progressWithinThisItem = 0;
         }
-        totalProgress = getTotalProgressFromPercentages(estimateBeforeThisItem, currentItemWeight, progressWithinThisItem);
+        totalProgress = getTotalProgressFromPercentages(
+          estimateBeforeThisItem,
+          currentItemWeight,
+          progressWithinThisItem
+        );
       }
       if (currentSpineIndex === readingOrderLength - 1 && pageIndex === numberOfPages - 1 && totalProgress > 0.99) {
         return 1;
@@ -6406,11 +6188,11 @@
     };
     const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
       const { height, width } = currentItem.getElementDimensions();
-      const { top, left } = reader.getAbsolutePositionOf(currentItem);
-      if (reader.settings.getSettings().computedPageTurnDirection === `vertical`) {
-        return Math.max(0, Math.min(1, (currentPosition.y - top + context.getVisibleAreaRect().height) / height));
+      const { top, left } = reader.spineItemManager.getAbsolutePositionOf(currentItem);
+      if (reader.settings.settings.computedPageTurnDirection === `vertical`) {
+        return Math.max(0, Math.min(1, (currentPosition.y - top + context.state.visibleAreaRect.height) / height));
       } else {
-        return Math.max(0, Math.min(1, (currentPosition.x - left + context.getVisibleAreaRect().width) / width));
+        return Math.max(0, Math.min(1, (currentPosition.x - left + context.state.visibleAreaRect.width) / width));
       }
     };
     return {
@@ -6432,67 +6214,58 @@
         }
       });
     }, {});
-    reader.registerHook(`item.onLoad`, ({ addStyle, frame }) => {
+    reader.hookManager.register(`item.onLoad`, ({ itemId, frame, destroy }) => {
       var _a;
-      addStyle(
-        `prose-reader-accessibility`,
-        `
-      :focus-visible {
-        ${/*
-          Some epubs remove the outline, this is not good practice since it reduce accessibility.
-          We will try to restore it by force.
-        */
-        ``}
-        outline: -webkit-focus-ring-color auto 1px;
-      }
-    `
-      );
+      const item = reader.spineItemManager.get(itemId);
+      if (!item) return;
+      item.manipulateSpineItem(({ addStyle }) => {
+        addStyle(
+          `prose-reader-accessibility`,
+          `
+        :focus-visible {
+          ${/*
+            Some epubs remove the outline, this is not good practice since it reduce accessibility.
+            We will try to restore it by force.
+          */
+          ``}
+          outline: -webkit-focus-ring-color auto 1px;
+        }
+      `
+        );
+        return false;
+      });
       const links = (_a = frame.contentDocument) == null ? void 0 : _a.body.querySelectorAll(`a`);
       links == null ? void 0 : links.forEach((link) => {
         observer.observe(link);
       });
-      return () => {
+      destroy(() => {
         links == null ? void 0 : links.forEach((link) => {
           observer.unobserve(link);
         });
-      };
+      });
     });
     return {
       ...reader
     };
   };
   const IS_SAFARI = navigator.userAgent.indexOf(``) > -1 && navigator.userAgent.indexOf(`Chrome`) <= -1;
-  const webkitEnhancer = (next) => (options) => {
-    const transformFlickerFixHooks = [
-      {
-        name: `viewportNavigator.onBeforeContainerCreated`,
-        fn: (element) => {
-          element.style.cssText = `
+  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;
         `;
-          return element;
-        }
-      },
-      {
-        name: `item.onBeforeContainerCreated`,
-        fn: (element) => {
-          element.style.cssText = `
-          ${element.style.cssText}
-          -webkit-transform-style: preserve-3d;
-          -webkit-backface-visibility: hidden;
-        `;
-          return element;
-        }
-      }
-    ];
-    const existingHooks = options.hooks || [];
-    const reader = next({
-      ...options,
-      ...IS_SAFARI && {
-        hooks: [...existingHooks, ...transformFlickerFixHooks]
-      }
-    });
+      });
+      reader.hookManager.register("item.onBeforeContainerCreated", ({ element }) => {
+        element.style.cssText = `
+        ${element.style.cssText}
+        -webkit-transform-style: preserve-3d;
+        -webkit-backface-visibility: hidden;
+      `;
+      });
+    }
     return reader;
   };
   const HTML_PREFIX = `${HTML_PREFIX$1}-enhancer-loading`;
@@ -6513,9 +6286,9 @@
         };
       }, {})
     );
-    const updateEntriesLayout$ = (entries) => rxjs.combineLatest([reader.$.layout$, reader.theme.$.theme$]).pipe(
+    const updateEntriesLayout$ = (entries) => rxjs.combineLatest([reader.spine.$.layout$, reader.theme.$.theme$]).pipe(
       operators.map(([, theme]) => ({
-        width: reader.context.getVisibleAreaRect().width,
+        width: reader.context.state.visibleAreaRect.width,
         theme
       })),
       operators.distinctUntilChanged(isShallowEqual),
@@ -6526,22 +6299,22 @@
         });
       })
     );
-    const updateEntriesVisibility$ = (entries) => reader.$.itemIsReady$.pipe(
+    const updateEntriesVisibility$ = (entries) => reader.spineItemManager.$.itemIsReady$.pipe(
       operators.tap(({ item, isReady }) => {
         var _a;
         (_a = entries[item.id]) == null ? void 0 : _a.style.setProperty(`visibility`, isReady ? `hidden` : `visible`);
       })
     );
-    const destroyEntries$ = (entries) => reader.$.itemsBeforeDestroy$.pipe(
+    const destroyEntries$ = (entries) => reader.spine.$.itemsBeforeDestroy$.pipe(
       operators.map(() => {
         Object.values(entries).forEach((element) => element.remove());
         return {};
       })
     );
-    const items$ = reader.spineItems$.pipe(
+    const items$ = reader.spine.$.spineItems$.pipe(
       operators.switchMap((items) => createEntries$(items)),
       operators.shareReplay(1),
-      operators.takeUntil(reader.context.$.destroy$)
+      operators.takeUntil(reader.context.destroy$)
     );
     items$.pipe(
       operators.switchMap((entries) => rxjs.merge(rxjs.of(entries), destroyEntries$(entries))),
@@ -6563,7 +6336,7 @@
     loadingElement.style.cssText = `
     height: 100%;
     width: 100%;
-    max-width: ${context.getVisibleAreaRect().width}px;
+    max-width: ${context.state.visibleAreaRect.width}px;
     text-align: center;
     display: flex;
     justify-content: center;
@@ -6577,7 +6350,10 @@
   `;
     return loadingElement;
   };
-  const defaultLoadingElementCreate = ({ container, item }) => {
+  const defaultLoadingElementCreate = ({
+    container,
+    item
+  }) => {
     const logoElement = container.ownerDocument.createElement(`div`);
     logoElement.innerText = `prose`;
     logoElement.style.cssText = `
@@ -6603,6 +6379,152 @@
       return reader;
     };
   };
+  const createNormalizeEventForViewport = ({
+    iframeEventBridgeElement$,
+    locator
+  }) => {
+    const normalizeEventForViewport = (event) => {
+      var _a;
+      const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue();
+      const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event);
+      const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
+      if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame) return event;
+      const spineItem = locator.getSpineItemFromIframe(originalFrame);
+      if (!spineItem) return event;
+      if (isPointerEvent(event)) {
+        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+        const newEvent = new PointerEvent(event.type, {
+          ...event,
+          pointerId: event.pointerId,
+          clientX,
+          clientY
+        });
+        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        return newEvent;
+      }
+      if (isMouseEvent(event)) {
+        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+        const newEvent = new MouseEvent(event.type, {
+          ...event,
+          clientX,
+          clientY
+        });
+        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        return newEvent;
+      }
+      if (isTouchEvent(event)) {
+        const touches = Array.from(event.touches).map((touch) => {
+          const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
+          return new Touch({
+            identifier: touch.identifier,
+            target: touch.target,
+            clientX,
+            clientY
+          });
+        });
+        const newEvent = new TouchEvent(event.type, {
+          touches,
+          changedTouches: touches,
+          targetTouches: touches
+        });
+        Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+        return newEvent;
+      }
+      return event;
+    };
+    return normalizeEventForViewport;
+  };
+  const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
+  const createIframeEventBridgeElement = (container) => {
+    const iframeEventBridgeElement = container.ownerDocument.createElement(`div`);
+    iframeEventBridgeElement.id = IFRAME_EVENT_BRIDGE_ELEMENT_ID;
+    iframeEventBridgeElement.style.cssText = `
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    `;
+    return iframeEventBridgeElement;
+  };
+  const pointerEvents = [
+    `pointercancel`,
+    `pointerdown`,
+    `pointerenter`,
+    `pointerleave`,
+    `pointermove`,
+    `pointerout`,
+    `pointerover`,
+    `pointerup`,
+    `touchstart`,
+    `touchend`
+  ];
+  const mouseEvents = [
+    `click`,
+    `mousedown`,
+    `mouseup`,
+    `mouseenter`,
+    `mouseleave`,
+    `mousemove`,
+    `mouseout`,
+    `mouseover`
+  ];
+  const passthroughEvents = [...pointerEvents, ...mouseEvents];
+  const eventsEnhancer = (next) => (options) => {
+    const iframeEventBridgeElement$ = new rxjs.BehaviorSubject(void 0);
+    const reader = next(options);
+    reader.hookManager.register(`item.onLoad`, ({ destroy, frame, itemId }) => {
+      const item = reader.spineItemManager.get(itemId);
+      if (!item) return;
+      const unregister = passthroughEvents.map((event) => {
+        var _a;
+        const listener = (e) => {
+          var _a2;
+          let convertedEvent = e;
+          if (isPointerEvent(e)) {
+            convertedEvent = new PointerEvent(e.type, e);
+          }
+          if (isMouseEvent(e)) {
+            convertedEvent = new MouseEvent(e.type, e);
+          }
+          if (convertedEvent !== e) {
+            attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
+            (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
+          }
+        };
+        (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
+        return () => {
+          var _a2;
+          (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(event, listener);
+        };
+      });
+      item.selectionTracker.track(frame);
+      item.fingerTracker.track(frame);
+      destroy(() => {
+        unregister.forEach((cb) => cb());
+      });
+    });
+    reader.element$.pipe(
+      rxjs.tap((wrapper) => {
+        var _a;
+        const iframeEventBridgeElement = createIframeEventBridgeElement(wrapper);
+        wrapper.appendChild(iframeEventBridgeElement);
+        (_a = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a.remove();
+        iframeEventBridgeElement$.next(iframeEventBridgeElement);
+      }),
+      rxjs.takeUntil(reader.$.destroy$)
+    ).subscribe();
+    return {
+      ...reader,
+      events: {
+        normalizeEventForViewport: createNormalizeEventForViewport({
+          iframeEventBridgeElement$,
+          locator: reader.spine.locator
+        })
+      }
+    };
+  };
   const createReaderWithEnhancers = (
     //__
     publicApiEnhancer(
@@ -6622,8 +6544,10 @@
                                 hotkeysEnhancer(
                                   paginationEnhancer(
                                     progressionEnhancer(
-                                      // __
-                                      createReader
+                                      eventsEnhancer(
+                                        // __
+                                        createReader
+                                      )
                                     )
                                   )
                                 )
@@ -6642,6 +6566,7 @@
       )
     )
   );
+  exports2.HookManager = HookManager;
   exports2.Report = Report;
   exports2.createReader = createReaderWithEnhancers;
   exports2.groupBy = groupBy;