@prose-reader/core 1.56.0 → 1.58.0

package/dist/index.js

@@ -3,17 +3,16 @@ import { withLatestFrom, distinctUntilChanged, shareReplay, tap, pairwise, switc
 import { parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
-  reader.context$.pipe(takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
-    if (!containerElement)
-      return;
+  reader.context.state$.pipe(takeUntil(reader.$.destroy$)).subscribe(({ containerElement }) => {
+    if (!containerElement) return;
     const onScroll = () => {
-      if (reader.settings.getSettings().computedPageTurnMode === `controlled`) {
+      if (reader.settings.settings.computedPageTurnMode === `controlled`) {
         containerElement.scrollTo(0, 0);
       }
     };
     containerElement.addEventListener(`scroll`, onScroll);
   });
-  reader.registerHook(`item.onLoad`, ({ frame }) => {
+  reader.hookManager.register(`item.onLoad`, ({ frame }) => {
     var _a;
     (_a = frame.contentDocument) == null ? void 0 : _a.body.setAttribute(`tabindex`, `-1`);
   });
@@ -54,8 +53,7 @@ const isShallowEqual = (objectA, objectB, options) => {
 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;
   },
@@ -75,7 +73,12 @@ const getBase64FromBlob = (data) => {
   });
 };
 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 Subject();
   const settings$ = new BehaviorSubject({
     fontScale,
@@ -102,7 +105,7 @@ const fontsEnhancer = (next) => (options) => {
     }
   `;
   const applyChangeToSpineItem = (requireLayout) => {
-    reader.manipulateSpineItems(({ removeStyle, addStyle, item }) => {
+    reader.spine.manipulateSpineItems(({ removeStyle, addStyle, item }) => {
       if (item.renditionLayout !== `pre-paginated`) {
         removeStyle(`prose-reader-fonts`);
         addStyle(`prose-reader-fonts`, getStyle());
@@ -110,19 +113,21 @@ const fontsEnhancer = (next) => (options) => {
       return requireLayout;
     });
   };
-  reader.registerHook(`item.onLoad`, ({ removeStyle, addStyle, item }) => {
-    if (item.renditionLayout !== `pre-paginated`) {
-      removeStyle(`prose-reader-fonts`);
-      addStyle(`prose-reader-fonts`, getStyle());
-    }
+  reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+    const item = reader.spineItemManager.get(itemId);
+    item == null ? void 0 : item.manipulateSpineItem(({ addStyle, removeStyle }) => {
+      if (item.item.renditionLayout !== `pre-paginated`) {
+        removeStyle(`prose-reader-fonts`);
+        addStyle(`prose-reader-fonts`, getStyle());
+      }
+      return false;
+    });
   });
   const shouldRequireLayout = (source) => source.pipe(
     pairwise(),
     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;
     })
   );
@@ -171,25 +176,25 @@ const hotkeysEnhancer = (next) => (options) => {
     map(([e, { pageTurnDirection }]) => {
       if (pageTurnDirection === "horizontal") {
         if (e.key === `ArrowRight`) {
-          reader.turnRight();
+          reader.viewportNavigator.turnRight();
         }
         if (e.key === `ArrowLeft`) {
-          reader.turnLeft();
+          reader.viewportNavigator.turnLeft();
         }
       }
       if (pageTurnDirection === "vertical") {
         if (e.key === `ArrowDown`) {
-          reader.turnRight();
+          reader.viewportNavigator.turnRight();
         }
         if (e.key === `ArrowUp`) {
-          reader.turnLeft();
+          reader.viewportNavigator.turnLeft();
         }
       }
       return e;
     })
   );
   navigateOnKey(document).pipe(takeUntil(reader.$.destroy$)).subscribe();
-  reader.spineItems$.pipe(
+  reader.spine.$.spineItems$.pipe(
     switchMap(
       (spineItems) => merge(
         ...spineItems.map(
@@ -205,10 +210,9 @@ const hotkeysEnhancer = (next) => (options) => {
 };
 const createMovingSafePan$ = (reader) => {
   let iframeOverlayForAnimationsElement;
-  const updateOverlayElement$ = reader.context$.pipe(
+  const updateOverlayElement$ = reader.context.state$.pipe(
     switchMap$1(({ containerElement }) => {
-      if (!containerElement)
-        return NEVER;
+      if (!containerElement) return NEVER;
       return new Observable(() => {
         iframeOverlayForAnimationsElement = containerElement.ownerDocument.createElement(`div`);
         iframeOverlayForAnimationsElement.style.cssText = `
@@ -232,8 +236,8 @@ const createMovingSafePan$ = (reader) => {
       iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `hidden`);
     })
   );
-  const viewportFree$ = reader.$.viewportState$.pipe(filter((data) => data === `free`));
-  const viewportBusy$ = reader.$.viewportState$.pipe(filter((data) => data === `busy`));
+  const viewportFree$ = reader.viewportNavigator.$.state$.pipe(filter((data) => data === `free`));
+  const viewportBusy$ = reader.viewportNavigator.$.state$.pipe(filter((data) => data === `busy`));
   const lockAfterViewportBusy$ = viewportBusy$.pipe(
     tap(() => {
       iframeOverlayForAnimationsElement == null ? void 0 : iframeOverlayForAnimationsElement.style.setProperty(`visibility`, `visible`);
@@ -241,7 +245,7 @@ const createMovingSafePan$ = (reader) => {
   );
   const resetLockViewportFree$ = createResetLock$(viewportFree$).pipe(take(1));
   const pageTurnMode$ = reader.settings.settings$.pipe(
-    map$1(() => reader.settings.getSettings().computedPageTurnMode),
+    map$1(() => reader.settings.settings.computedPageTurnMode),
     distinctUntilChanged()
   );
   const handleViewportLock$ = pageTurnMode$.pipe(
@@ -269,11 +273,10 @@ const mapKeysTo = (keys) => {
   });
 };
 const fixReflowable = (reader) => {
-  reader.registerHook(`item.onAfterLayout`, ({ item, blankPagePosition, minimumWidth }) => {
+  reader.hookManager.register(`item.onAfterLayout`, ({ item, blankPagePosition, minimumWidth }) => {
     var _a;
-    const spineItem = reader.getSpineItem(item.id);
-    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;
@@ -297,9 +300,9 @@ const layoutEnhancer = (next) => (options) => {
     pageHorizontalMargin,
     pageVerticalMargin
   });
-  reader.registerHook(`onViewportOffsetAdjust`, () => {
+  reader.hookManager.register(`onViewportOffsetAdjust`, () => {
     let hasRedrawn = false;
-    reader.manipulateSpineItems(({ frame }) => {
+    reader.spine.manipulateSpineItems(({ frame }) => {
       if (!hasRedrawn && frame) {
         void frame.getBoundingClientRect().left;
         hasRedrawn = true;
@@ -307,7 +310,7 @@ const layoutEnhancer = (next) => (options) => {
       return SHOULD_NOT_LAYOUT;
     });
   });
-  reader.registerHook(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
+  reader.hookManager.register(`item.onLayoutBeforeMeasurement`, ({ frame, minimumWidth, item, isImageType }) => {
     var _a, _b;
     const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsSubject$.value;
     const pageSize = reader.context.getPageSize();
@@ -349,7 +352,7 @@ const layoutEnhancer = (next) => (options) => {
   fixReflowable(reader);
   let observer;
   if (options.layoutAutoResize === `container`) {
-    reader.context$.pipe(
+    reader.context.state$.pipe(
       map$1((state) => state.containerElement),
       filter(isDefined),
       distinctUntilChanged(),
@@ -422,20 +425,16 @@ const createReport = (namespace) => ({
   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
@@ -458,8 +457,7 @@ const createReport = (namespace) => ({
   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] `,
@@ -471,8 +469,7 @@ const createReport = (namespace) => ({
   // 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);
@@ -498,19 +495,18 @@ const linksEnhancer = (next) => (options) => {
   const subject = new 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) {
@@ -534,36 +530,38 @@ const linksEnhancer = (next) => (options) => {
 const createNavigator = (reader) => {
   const goToNextSpineItem = () => {
     var _a;
-    const focusedSpineItemIndex = reader.getFocusedSpineItemIndex() || 0;
-    const { end = focusedSpineItemIndex } = reader.locator.getSpineItemsFromReadingOrderPosition(reader.getCurrentNavigationPosition()) || {};
-    const numberOfSpineItems = ((_a = reader.context.getManifest()) == null ? void 0 : _a.spineItems.length) ?? 0;
+    const focusedSpineItemIndex = reader.spineItemManager.getFocusedSpineItemIndex() || 0;
+    const { end = focusedSpineItemIndex } = reader.spine.locator.getSpineItemsFromReadingOrderPosition(
+      reader.viewportNavigator.getCurrentNavigationPosition()
+    ) || {};
+    const numberOfSpineItems = ((_a = reader.context.manifest) == null ? void 0 : _a.spineItems.length) ?? 0;
     const nextItem = end + 1;
     if (nextItem < numberOfSpineItems) {
-      reader.goToSpineItem(nextItem);
+      reader.viewportNavigator.goToSpineItem(nextItem);
     }
   };
   const goToPreviousSpineItem = () => {
-    const focusedSpineItemIndex = reader.getFocusedSpineItemIndex() || 0;
-    const { begin = focusedSpineItemIndex } = reader.locator.getSpineItemsFromReadingOrderPosition(reader.getCurrentNavigationPosition()) || {};
+    const focusedSpineItemIndex = reader.spineItemManager.getFocusedSpineItemIndex() || 0;
+    const { begin = focusedSpineItemIndex } = reader.spine.locator.getSpineItemsFromReadingOrderPosition(
+      reader.viewportNavigator.getCurrentNavigationPosition()
+    ) || {};
     const nextItem = begin - 1;
     if (nextItem >= 0) {
-      reader.goToSpineItem(nextItem);
+      reader.viewportNavigator.goToSpineItem(nextItem);
     }
   };
   return {
     goToNextSpineItem,
     goToPreviousSpineItem,
     goToLeftSpineItem: () => {
-      if (reader.settings.getSettings().computedPageTurnDirection === "vertical")
-        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();
       }
@@ -573,7 +571,7 @@ const createNavigator = (reader) => {
 };
 const createState = (reader) => {
   return reader.pagination.paginationInfo$.pipe(
-    withLatestFrom$1(reader.context.$.manifest$, reader.settings.settings$),
+    withLatestFrom$1(reader.context.manifest$, reader.settings.settings$),
     map(([paginationInfo, manifest, { computedPageTurnDirection }]) => {
       const numberOfSpineItems = (manifest == null ? void 0 : manifest.spineItems.length) ?? 0;
       const isAtAbsoluteBeginning = paginationInfo.beginSpineItemIndex === 0 && paginationInfo.beginPageIndexInSpineItem === 0;
@@ -613,8 +611,7 @@ const buildChaptersInfo = (href, tocItem, manifest) => {
     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
@@ -637,10 +634,9 @@ const buildChapterInfoFromSpineItem = (manifest, item) => {
   return buildChaptersInfo(href, ((_a = manifest.nav) == null ? void 0 : _a.toc) ?? [], manifest);
 };
 const getChaptersInfo = (reader) => {
-  const manifest = reader.context.getManifest();
-  const items = reader.getSpineItems();
-  if (!manifest)
-    return {};
+  const manifest = reader.context.manifest;
+  const items = reader.spineItemManager.getAll();
+  if (!manifest) return {};
   return items.reduce(
     (acc, { item }) => {
       return {
@@ -652,7 +648,7 @@ const getChaptersInfo = (reader) => {
   );
 };
 const trackChapterInfo = (reader) => {
-  return reader.spineItems$.pipe(
+  return reader.spine.$.spineItems$.pipe(
     startWith([]),
     map(() => getChaptersInfo(reader))
   );
@@ -729,21 +725,19 @@ const getItemOffsetFromPageIndex = (pageWidth, pageIndex, itemWidth) => {
   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;
   }
@@ -752,11 +746,11 @@ const getSpineItemNumberOfPages = ({ spineItem, reader }) => {
   }
   return calculateNumberOfPagesForItem(width, reader.context.getPageSize().width);
 };
-const getNumberOfPagesForAllSpineItems = (reader) => reader.getSpineItems().map((item) => {
+const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemManager.getAll().map((item) => {
   return getSpineItemNumberOfPages({ spineItem: item, reader });
 }, 0);
 const trackTotalPages = (reader) => {
-  const totalPages$ = reader.$.layout$.pipe(
+  const totalPages$ = reader.spine.$.layout$.pipe(
     debounceTime(10, animationFrameScheduler),
     withLatestFrom$1(reader.pagination.paginationInfo$),
     map(() => {
@@ -779,8 +773,8 @@ const trackTotalPages = (reader) => {
 };
 const mapPaginationInfoToExtendedInfo = (reader) => (paginationInfo, chaptersInfo) => {
   const context = reader.context;
-  const beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.beginSpineItemIndex) : void 0;
-  const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.getSpineItem(paginationInfo.endSpineItemIndex) : void 0;
+  const beginItem = paginationInfo.beginSpineItemIndex !== void 0 ? reader.spineItemManager.get(paginationInfo.beginSpineItemIndex) : void 0;
+  const endItem = paginationInfo.endSpineItemIndex !== void 0 ? reader.spineItemManager.get(paginationInfo.endSpineItemIndex) : void 0;
   return {
     ...paginationInfo,
     beginChapterInfo: beginItem ? chaptersInfo[beginItem.item.id] : void 0,
@@ -809,13 +803,13 @@ const mapPaginationInfoToExtendedInfo = (reader) => (paginationInfo, chaptersInf
       paginationInfo.endSpineItemIndex ?? 0,
       paginationInfo.endNumberOfPagesInSpineItem,
       paginationInfo.endPageIndexInSpineItem || 0,
-      reader.getCurrentViewportPosition(),
+      reader.viewportNavigator.getCurrentViewportPosition(),
       endItem
     ) : 0,
-    isUsingSpread: context.isUsingSpreadMode() ?? false
+    isUsingSpread: context.state.isUsingSpreadMode ?? false
     // hasNextChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
     // hasPreviousChapter: (reader.spine.spineItemIndex || 0) < (manifest.readingOrder.length - 1),
-    // numberOfSpineItems: context.getManifest()?.readingOrder.length,
+    // numberOfSpineItems: context.manifest?.readingOrder.length,
   };
 };
 const trackPaginationInfo = (reader) => {
@@ -836,7 +830,10 @@ const trackPaginationInfo = (reader) => {
     })),
     distinctUntilChanged$1(isShallowEqual)
   );
-  const paginationInfo$ = combineLatest([extandedBasePagination$, totalPages$]).pipe(
+  const paginationInfo$ = combineLatest([
+    extandedBasePagination$,
+    totalPages$
+  ]).pipe(
     map(([pageInfo, totalPageInfo]) => ({
       ...pageInfo,
       ...totalPageInfo,
@@ -911,18 +908,22 @@ const themeEnhancer = (next) => (options) => {
     };
   };
   const applyChangeToSpineItem = () => {
-    reader.manipulateSpineItems(({ removeStyle, addStyle, container }) => {
+    reader.spine.manipulateSpineItems(({ removeStyle, addStyle, container }) => {
       removeStyle(`prose-reader-theme`);
       addStyle(`prose-reader-theme`, getStyle());
       applyChangeToSpineItemElement({ container });
       return false;
     });
   };
-  reader.registerHook(`item.onLoad`, ({ removeStyle, addStyle }) => {
-    removeStyle(`prose-reader-theme`);
-    addStyle(`prose-reader-theme`, getStyle());
+  reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+    const item = reader.spineItemManager.get(itemId);
+    item == null ? void 0 : item.manipulateSpineItem(({ removeStyle, addStyle }) => {
+      removeStyle(`prose-reader-theme`);
+      addStyle(`prose-reader-theme`, getStyle());
+      return false;
+    });
   });
-  reader.spineItems$.pipe(
+  reader.spine.$.spineItems$.pipe(
     tap((items) => items.map(({ element }) => applyChangeToSpineItemElement({ container: element }))),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
@@ -959,7 +960,7 @@ const createElementZoomer = (reader) => {
     imgLastPosition = { x: 0, y: 0 };
     baseScale = 1;
     lastUserScale = 1;
-    const container = reader.context.getState().containerElement;
+    const container = reader.context.state.containerElement;
     if (container) {
       imageMagnifierContainer = container.ownerDocument.createElement(`div`);
       imageMagnifierContainer.style.cssText = `
@@ -1017,6 +1018,7 @@ const createElementZoomer = (reader) => {
         `transform`,
         `translate3d(${imgLastPosition.x}px, ${imgLastPosition.y}px, 0px) scale3d(${baseScale}, ${baseScale}, 1)`
       );
+      console.log({ delta, imgLastPosition });
       movingLastDelta = delta;
     }
     if (isLast) {
@@ -1084,8 +1086,7 @@ const createViewportZoomer = (reader) => {
   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;
@@ -1134,7 +1135,7 @@ const zoomEnhancer = (next) => (options) => {
   const elementZoomer = createElementZoomer(reader);
   const viewportZoomer = createViewportZoomer(reader);
   const currentZoomerSubject$ = new BehaviorSubject(void 0);
-  const isUsingScrollableViewport = () => reader.settings.getSettings().computedPageTurnMode === `scrollable`;
+  const isUsingScrollableViewport = () => reader.settings.settings.computedPageTurnMode === `scrollable`;
   const enter = (imgElement) => {
     var _a;
     (_a = currentZoomerSubject$ == null ? void 0 : currentZoomerSubject$.value) == null ? void 0 : _a.exit();
@@ -1207,153 +1208,108 @@ const isUsingSpreadMode = ({
 }) => {
   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 BehaviorSubject({});
-  const manifest$ = stateSubject.pipe(
-    map$1((state) => state.manifest),
-    filter(isDefined),
-    distinctUntilChanged()
-  );
-  const containerElement$ = stateSubject.pipe(
-    map$1((state) => state.containerElement),
-    filter(isDefined),
-    distinctUntilChanged()
-  );
-  const hasVerticalWriting$ = stateSubject.pipe(
-    map$1((state) => state.hasVerticalWriting),
-    filter(isDefined),
-    distinctUntilChanged()
-  );
-  const isUsingSpreadMode$ = stateSubject.pipe(
-    map$1((state) => state.isUsingSpreadMode),
-    distinctUntilChanged()
-  );
-  const visibleAreaRect = {
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0
-  };
-  const marginTop = 0;
-  const marginBottom = 0;
-  const destroy$ = new Subject();
-  const setState = (newState) => {
-    const newCompleteState = { ...stateSubject.getValue(), ...newState };
-    if (!isShallowEqual(newCompleteState, stateSubject.getValue())) {
-      stateSubject.next(newCompleteState);
-    }
-  };
-  const load = (newManifest, newLoadOptions) => {
-    setState({
-      manifest: newManifest,
-      ...newLoadOptions,
-      isFullyPrePaginated: isFullyPrePaginated(newManifest),
+const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+class Context {
+  constructor() {
+    this._stateSubject = new BehaviorSubject({
+      marginBottom: 0,
+      marginTop: 0,
+      calculatedInnerMargin: 0,
+      visibleAreaRect: {
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      }
+    });
+    this.destroy$ = new Subject();
+    this.state$ = this._stateSubject.pipe(distinctUntilChanged(isShallowEqual));
+    this.manifest$ = this._stateSubject.pipe(
+      map$1((state) => state.manifest),
+      filter(isDefined),
+      distinctUntilChanged()
+    );
+    this.containerElement$ = this._stateSubject.pipe(
+      map$1((state) => state.containerElement),
+      filter(isDefined),
+      distinctUntilChanged()
+    );
+    this.hasVerticalWriting$ = this._stateSubject.pipe(
+      map$1((state) => state.hasVerticalWriting),
+      filter(isDefined),
+      distinctUntilChanged()
+    );
+    this.isUsingSpreadMode$ = this._stateSubject.pipe(
+      map$1((state) => state.isUsingSpreadMode),
+      distinctUntilChanged()
+    );
+    this.isRTL = () => {
+      var _a;
+      return ((_a = this._stateSubject.getValue().manifest) == null ? void 0 : _a.readingDirection) === `rtl`;
+    };
+    this.destroy = () => {
+      this._stateSubject.complete();
+      this.destroy$.next();
+      this.destroy$.complete();
+    };
+  }
+  /**
+   * @todo optimize to not run if not necessary
+   */
+  update(newState) {
+    const previousState = this._stateSubject.getValue();
+    const manifest = newState.manifest ?? previousState.manifest;
+    const forceSinglePageMode = newState.forceSinglePageMode ?? previousState.forceSinglePageMode;
+    const visibleAreaRect = newState.visibleAreaRect ?? previousState.visibleAreaRect;
+    const marginTop = newState.marginTop ?? previousState.marginTop;
+    const marginBottom = newState.marginBottom ?? previousState.marginBottom;
+    const newCompleteState = {
+      ...previousState,
+      ...newState,
+      ...newState.visibleAreaRect && {
+        ...newState.visibleAreaRect,
+        height: newState.visibleAreaRect.height - marginTop - marginBottom
+      },
+      ...newState.manifest && {
+        areAllItemsPrePaginated: areAllItemsPrePaginated(manifest),
+        isFullyPrePaginated: isFullyPrePaginated(manifest)
+      },
       isUsingSpreadMode: isUsingSpreadMode({
-        manifest: newManifest,
+        manifest,
         visibleAreaRect,
-        forceSinglePageMode: settings.getSettings().forceSinglePageMode
+        forceSinglePageMode
       })
-    });
-  };
-  const isRTL = () => {
-    var _a;
-    return ((_a = stateSubject.getValue().manifest) == null ? void 0 : _a.readingDirection) === `rtl`;
-  };
-  const setHasVerticalWriting = (value) => setState({
-    hasVerticalWriting: value
-  });
-  const recomputeSettings$ = merge(hasVerticalWriting$, manifest$);
-  recomputeSettings$.pipe(
-    withLatestFrom(hasVerticalWriting$, manifest$),
-    tap(([, hasVerticalWriting, manifest]) => {
-      settings.recompute({ hasVerticalWriting, manifest });
-    }),
-    takeUntil$1(destroy$)
-  ).subscribe();
-  settings.$.settings$.pipe(
-    map$1(({ forceSinglePageMode }) => forceSinglePageMode),
-    distinctUntilChanged(),
-    withLatestFrom(manifest$),
-    tap(([forceSinglePageMode, manifest]) => {
-      setState({
-        isUsingSpreadMode: isUsingSpreadMode({
-          manifest,
-          visibleAreaRect,
-          forceSinglePageMode
-        })
-      });
-    }),
-    takeUntil$1(destroy$)
-  ).subscribe();
-  const destroy = () => {
-    stateSubject.complete();
-    destroy$.next();
-    destroy$.complete();
-  };
-  return {
-    load,
-    isRTL,
-    areAllItemsPrePaginated: () => {
-      var _a;
-      return areAllItemsPrePaginated$1((_a = stateSubject.getValue()) == null ? void 0 : _a.manifest);
-    },
-    destroy,
-    getCalculatedInnerMargin: () => 0,
-    getVisibleAreaRect: () => visibleAreaRect,
-    isUsingSpreadMode: () => stateSubject.getValue().isUsingSpreadMode,
-    setHasVerticalWriting,
-    setVisibleAreaRect: ({ height, width, x, y }) => {
-      visibleAreaRect.width = width;
-      visibleAreaRect.height = height - marginTop - marginBottom;
-      visibleAreaRect.x = x;
-      visibleAreaRect.y = y;
-      const manifest = stateSubject.getValue().manifest;
-      if (manifest) {
-        setState({
-          isUsingSpreadMode: isUsingSpreadMode({
-            manifest,
-            visibleAreaRect,
-            forceSinglePageMode: settings.getSettings().forceSinglePageMode
-          })
-        });
-      }
-    },
-    getState: () => stateSubject.getValue(),
-    getManifest: () => {
-      var _a;
-      return (_a = stateSubject.getValue()) == null ? void 0 : _a.manifest;
-    },
-    getReadingDirection: () => {
-      var _a, _b;
-      return (_b = (_a = stateSubject.getValue()) == null ? void 0 : _a.manifest) == null ? void 0 : _b.readingDirection;
-    },
-    getPageSize: () => {
-      return {
-        width: stateSubject.getValue().isUsingSpreadMode ? visibleAreaRect.width / 2 : visibleAreaRect.width,
-        height: visibleAreaRect.height
-      };
-    },
-    containerElement$,
-    isUsingSpreadMode$,
-    hasVerticalWriting$,
-    $: {
-      manifest$,
-      destroy$: destroy$.asObservable(),
-      state$: stateSubject.asObservable()
+    };
+    if (!isShallowEqual(newCompleteState, previousState)) {
+      this._stateSubject.next(newCompleteState);
     }
-  };
-};
-const areAllItemsPrePaginated$1 = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
+  }
+  get state() {
+    return this._stateSubject.getValue();
+  }
+  get manifest() {
+    return this.state.manifest;
+  }
+  get readingDirection() {
+    var _a;
+    return (_a = this.manifest) == null ? void 0 : _a.readingDirection;
+  }
+  getPageSize() {
+    const { isUsingSpreadMode: isUsingSpreadMode2, visibleAreaRect } = this._stateSubject.getValue();
+    return {
+      width: isUsingSpreadMode2 ? visibleAreaRect.width / 2 : visibleAreaRect.width,
+      height: visibleAreaRect.height
+    };
+  }
+}
 const __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY = `__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT`;
 const ITEM_EXTENSION_VALID_FOR_FRAME_SRC = [`.xhtml`, `.html`, `.htm`];
 const HTML_PREFIX$1 = `prose-reader`;
@@ -1406,11 +1362,6 @@ const createFrame$ = Report.measurePerformance(`SpineItemFrame createFrame`, Inf
   `;
   return of(frame);
 });
-const createFrameManipulator = (frameElement) => ({
-  frame: frameElement,
-  removeStyle: createRemoveStyleHelper(frameElement),
-  addStyle: createAddStyleHelper(frameElement)
-});
 const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
   const image = new Image();
   image.src = data;
@@ -1420,8 +1371,7 @@ const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reje
   image.onerror = reject;
 });
 const createHtmlPageFromResource = async (resourceResponse, item) => {
-  if (typeof resourceResponse === `string`)
-    return resourceResponse;
+  if (typeof resourceResponse === `string`) return resourceResponse;
   const contentType = parseContentType(resourceResponse.headers.get(`Content-Type`) || ``) || detectMimeTypeFromName(item.href);
   if ([`image/jpg`, `image/jpeg`, `image/png`, `image/webp`].some((mime) => mime === contentType)) {
     const data = await getBase64FromBlob(await resourceResponse.blob());
@@ -1463,15 +1413,14 @@ const createHtmlPageFromResource = async (resourceResponse, item) => {
   const content = await resourceResponse.text();
   return content;
 };
-const isOnLoadHook = (hook) => hook.name === `item.onLoad`;
 const createLoader = ({
   item,
   parent,
   fetchResource,
-  hooks$,
   context,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
   const destroySubject$ = new Subject();
   const loadSubject$ = new Subject();
@@ -1479,10 +1428,9 @@ const createLoader = ({
   const frameElementSubject$ = new BehaviorSubject(void 0);
   const isLoadedSubject$ = new BehaviorSubject(false);
   const isReadySubject$ = new BehaviorSubject(false);
-  let onLoadHookReturns = [];
   let computedStyleAfterLoad;
   const makeItHot = (source$) => {
-    source$.pipe(takeUntil$1(context.$.destroy$)).subscribe();
+    source$.pipe(takeUntil$1(context.destroy$)).subscribe();
     return source$;
   };
   const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
@@ -1496,14 +1444,7 @@ const createLoader = ({
     withLatestFrom(frameElementSubject$),
     filter(([_, frame]) => !!frame),
     map$1(([, frame]) => {
-      onLoadHookReturns.forEach((fn) => {
-        if (fn && `unsubscribe` in fn) {
-          fn.unsubscribe();
-        } else if (fn) {
-          fn();
-        }
-      });
-      onLoadHookReturns = [];
+      hookManager.destroy(`item.onLoad`, item.id);
       frame == null ? void 0 : frame.remove();
       frameElementSubject$.next(void 0);
     }),
@@ -1544,12 +1485,10 @@ const createLoader = ({
           }
         }),
         mergeMap((frame) => {
-          if (!frame)
-            return EMPTY;
+          if (!frame) return EMPTY;
           return fromEvent(frame, `load`).pipe(
             take(1),
-            withLatestFrom(hooks$),
-            mergeMap(([_, hooks]) => {
+            mergeMap(() => {
               var _a, _b;
               const body = (_a = frame.contentDocument) == null ? void 0 : _a.body;
               if (!body) {
@@ -1560,21 +1499,14 @@ const createLoader = ({
               if ((frame == null ? void 0 : frame.contentDocument) && body) {
                 computedStyleAfterLoad = (_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.getComputedStyle(body);
               }
-              if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
+              if (settings.settings.computedPageTurnMode !== `scrollable`) {
                 frame.setAttribute(`tab-index`, `0`);
               }
-              const manipulableFrame = createFrameManipulator(frame);
-              onLoadHookReturns = hooks.filter(isOnLoadHook).map((hook) => {
-                const hookReturn = hook.fn({
-                  ...manipulableFrame,
-                  item
-                });
-                if (hookReturn && `subscribe` in hookReturn) {
-                  return hookReturn.subscribe();
-                }
-                return hookReturn;
-              });
-              return of(frame);
+              const hookResults = hookManager.execute(`item.onLoad`, item.id, {
+                itemId: item.id,
+                frame
+              }).filter((result) => result instanceof Observable);
+              return combineLatest([of(null), ...hookResults]).pipe(map$1(() => frame));
             })
           );
         }),
@@ -1623,14 +1555,19 @@ const createLoader = ({
     }
   };
 };
+const createFrameManipulator = (frameElement) => ({
+  frame: frameElement,
+  removeStyle: createRemoveStyleHelper(frameElement),
+  addStyle: createAddStyleHelper(frameElement)
+});
 const createFrameItem = ({
   item,
   parent,
   fetchResource,
   context,
-  hooks$,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
   const destroySubject$ = new Subject();
   const {
@@ -1639,7 +1576,7 @@ const createFrameItem = ({
     unload,
     destroy: loaderDestroy,
     getComputedStyleAfterLoad
-  } = createLoader({ context, hooks$, item, parent, fetchResource, viewportState$, settings });
+  } = createLoader({ context, hookManager, item, parent, fetchResource, viewportState$, settings });
   let isLoadedSync = false;
   let isReadySync = false;
   isLoaded$.subscribe({
@@ -1727,7 +1664,7 @@ const createFrameItem = ({
       if (frame) {
         frame.style.width = `${size.width}px`;
         frame.style.height = `${size.height}px`;
-        if (settings.getSettings().computedPageTurnMode !== `scrollable`) {
+        if (settings.settings.computedPageTurnMode !== `scrollable`) {
           frame.setAttribute(`tab-index`, `0`);
         }
       }
@@ -1742,8 +1679,7 @@ const createFrameItem = ({
         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,
@@ -1830,205 +1766,30 @@ const createSelectionTracker = () => {
     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 Subject();
-  const containerElement = createContainerElement$1(parentElement, item, hooks$);
+  const containerElement = createContainerElement$1(parentElement, item, hookManager);
   const overlayElement = createOverlayElement(parentElement, item);
   const fingerTracker = createFingerTracker();
   const selectionTracker = createSelectionTracker();
-  const frameHooks = createFrameHooks(iframeEventBridgeElement$, fingerTracker, selectionTracker);
   const spineItemFrame = createFrameItem({
     parent: containerElement,
     item,
     context,
-    fetchResource: (_a = context.getState()) == null ? void 0 : _a.fetchResource,
-    hooks$: hooks$.asObservable().pipe(map$1((hooks) => [...hooks, ...frameHooks])),
+    hookManager,
     viewportState$,
     settings
   });
@@ -2051,12 +1812,12 @@ const createCommonSpineItem = ({
     return memoizedElementDimensions;
   };
   const isImageType = () => {
-    var _a2;
-    return !!((_a2 = item.mediaType) == null ? void 0 : _a2.startsWith(`image/`));
+    var _a;
+    return !!((_a = item.mediaType) == null ? void 0 : _a.startsWith(`image/`));
   };
   const injectStyle = (cssText) => {
-    var _a2, _b;
-    (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.removeStyle(`prose-reader-css`);
+    var _a, _b;
+    (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.removeStyle(`prose-reader-css`);
     (_b = spineItemFrame.getManipulableFrame()) == null ? void 0 : _b.addStyle(`prose-reader-css`, cssText);
   };
   const adjustPositionOfElement = ({ right, left, top }) => {
@@ -2077,10 +1838,10 @@ const createCommonSpineItem = ({
     }
   };
   const getViewPortInformation = () => {
-    var _a2;
+    var _a;
     const { width: pageWidth, height: pageHeight } = context.getPageSize();
     const viewportDimensions = spineItemFrame.getViewportDimensions();
-    const frameElement = (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.frame;
+    const frameElement = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
     if (containerElement && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow) && viewportDimensions) {
       const computedWidthScale = pageWidth / viewportDimensions.width;
       const computedScale = Math.min(computedWidthScale, pageHeight / viewportDimensions.height);
@@ -2090,8 +1851,8 @@ const createCommonSpineItem = ({
   const loadContent = () => spineItemFrame.load();
   const unloadContent = () => spineItemFrame.unload();
   const getBoundingRectOfElementFromSelector = (selector) => {
-    var _a2, _b, _c, _d, _e;
-    const frame = (_a2 = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a2.frame;
+    var _a, _b, _c, _d, _e;
+    const frame = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
     if (frame && selector) {
       if (selector.startsWith(`#`)) {
         return (_c = (_b = frame.contentDocument) == null ? void 0 : _b.getElementById(selector.replace(`#`, ``))) == null ? void 0 : _c.getBoundingClientRect();
@@ -2136,16 +1897,12 @@ const createCommonSpineItem = ({
   }) => {
     containerElement.style.width = `${width}px`;
     containerElement.style.height = `${height}px`;
-    hooks$.getValue().forEach((hook) => {
-      if (hook.name === `item.onAfterLayout`) {
-        hook.fn({ blankPagePosition, item, minimumWidth });
-      }
-    });
+    hookManager.execute(`item.onAfterLayout`, void 0, { blankPagePosition, item, minimumWidth });
     setLayoutDirty();
   };
   const translateFramePositionIntoPage = (position) => {
-    var _a2, _b;
-    const { left = 0, top = 0 } = ((_a2 = spineItemFrame.getFrameElement()) == null ? void 0 : _a2.getBoundingClientRect()) || {};
+    var _a, _b;
+    const { left = 0, top = 0 } = ((_a = spineItemFrame.getFrameElement()) == null ? void 0 : _a.getBoundingClientRect()) || {};
     const computedScale = ((_b = getViewPortInformation()) == null ? void 0 : _b.computedScale) ?? 1;
     const adjustedX = position.clientX * computedScale + left;
     const adjustedY = position.clientY * computedScale + top;
@@ -2155,20 +1912,14 @@ const createCommonSpineItem = ({
     };
   };
   const getResource = async () => {
-    const fetchResource = context.getState().fetchResource;
+    const fetchResource = settings.settings.fetchResource;
     const lastFetch = (_) => {
       if (fetchResource) {
         return fetchResource(item);
       }
       return fetch(item.href);
     };
-    const finalFetch = hooks$.getValue().reduce((acc, hook) => {
-      if (hook.name === `item.onGetResource`) {
-        return hook.fn(acc);
-      }
-      return acc;
-    }, lastFetch);
-    return await finalFetch(item);
+    return await lastFetch();
   };
   const manipulateSpineItem = (cb) => {
     const manipulableFrame = spineItemFrame.getManipulableFrame();
@@ -2191,16 +1942,12 @@ const createCommonSpineItem = ({
       overlayElement
     });
   };
-  const executeOnLayoutBeforeMeasurementHook = (options) => hooks$.getValue().forEach((hook) => {
-    if (hook.name === `item.onLayoutBeforeMeasurement`) {
-      hook.fn({
-        frame: spineItemFrame,
-        container: containerElement,
-        item,
-        isImageType,
-        ...options
-      });
-    }
+  const executeOnLayoutBeforeMeasurementHook = (options) => hookManager.execute("item.onLayoutBeforeMeasurement", void 0, {
+    frame: spineItemFrame,
+    container: containerElement,
+    item,
+    isImageType,
+    ...options
   });
   const contentLayout$ = spineItemFrame.$.contentLayoutChange$.pipe(
     withLatestFrom(spineItemFrame.$.isReady$),
@@ -2239,8 +1986,8 @@ const createCommonSpineItem = ({
       destroySubject$.complete();
     },
     isUsingVerticalWriting: () => {
-      var _a2;
-      return (_a2 = spineItemFrame.getWritingMode()) == null ? void 0 : _a2.startsWith(`vertical`);
+      var _a;
+      return (_a = spineItemFrame.getWritingMode()) == null ? void 0 : _a.startsWith(`vertical`);
     },
     /**
      * @important
@@ -2251,7 +1998,7 @@ const createCommonSpineItem = ({
      * be confined to a single page.
      */
     getReadingDirection: () => {
-      return spineItemFrame.getReadingDirection() || context.getReadingDirection();
+      return spineItemFrame.getReadingDirection() || context.readingDirection;
     },
     manipulateSpineItem,
     executeOnLayoutBeforeMeasurementHook,
@@ -2266,7 +2013,7 @@ const createCommonSpineItem = ({
     }
   };
 };
-const createContainerElement$1 = (containerElement, item, hooks$) => {
+const createContainerElement$1 = (containerElement, item, hookManager) => {
   const element = containerElement.ownerDocument.createElement(`div`);
   element.classList.add(`spineItem`);
   element.classList.add(`spineItem-${item.renditionLayout}`);
@@ -2274,12 +2021,8 @@ const createContainerElement$1 = (containerElement, item, hooks$) => {
     position: absolute;
     overflow: hidden;
   `;
-  return hooks$.getValue().reduce((element2, hook) => {
-    if (hook.name === `item.onBeforeContainerCreated`) {
-      return hook.fn(element2);
-    }
-    return element2;
-  }, element);
+  hookManager.execute("item.onBeforeContainerCreated", void 0, { element });
+  return element;
 };
 const createOverlayElement = (containerElement, item) => {
   const element = containerElement.ownerDocument.createElement(`div`);
@@ -2294,42 +2037,6 @@ const createOverlayElement = (containerElement, item) => {
   `;
   return element;
 };
-const createFrameHooks = (iframeEventBridgeElement$, fingerTracker, selectionTracker) => {
-  return [
-    {
-      name: `item.onLoad`,
-      fn: ({ frame }) => {
-        const unregister = passthroughEvents.map((event) => {
-          var _a;
-          const listener = (e) => {
-            var _a2;
-            let convertedEvent = e;
-            if (isPointerEvent(e)) {
-              convertedEvent = new PointerEvent(e.type, e);
-            }
-            if (isMouseEvent(e)) {
-              convertedEvent = new MouseEvent(e.type, e);
-            }
-            if (convertedEvent !== e) {
-              attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
-              (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
-            }
-          };
-          (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
-          return () => {
-            var _a2;
-            (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(event, listener);
-          };
-        });
-        selectionTracker.track(frame);
-        fingerTracker.track(frame);
-        return () => {
-          unregister.forEach((cb) => cb());
-        };
-      }
-    }
-  ];
-};
 const getStyleForViewportDocument = () => {
   return `
     body {
@@ -2342,19 +2049,17 @@ const createPrePaginatedSpineItem = ({
   item,
   context,
   containerElement,
-  iframeEventBridgeElement$,
-  hooks$,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
   const commonSpineItem = createCommonSpineItem({
     context,
     item,
     parentElement: containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   });
   const spineItemFrame = commonSpineItem.spineItemFrame;
   const layout = ({
@@ -2365,15 +2070,15 @@ const createPrePaginatedSpineItem = ({
     var _a;
     const { width: pageWidth, height: pageHeight } = context.getPageSize();
     const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-    const visibleArea = context.getVisibleAreaRect();
+    const visibleArea = context.state.visibleAreaRect;
     const frameElement = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame;
     if ((spineItemFrame == null ? void 0 : spineItemFrame.getIsLoaded()) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
       const contentWidth = pageWidth;
-      const contentHeight = visibleArea.height + context.getCalculatedInnerMargin();
+      const contentHeight = visibleArea.height + context.state.calculatedInnerMargin;
       const cssLink = buildDocumentStyle(
         {
           ...commonSpineItem.getDimensionsForPaginatedContent(),
-          enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`,
+          enableTouch: settings.settings.computedPageTurnMode !== `scrollable`,
           spreadPosition
         },
         viewportDimensions
@@ -2516,19 +2221,17 @@ const createReflowableSpineItem = ({
   item,
   context,
   containerElement,
-  iframeEventBridgeElement$,
-  hooks$,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
   const commonSpineItem = createCommonSpineItem({
     context,
     item,
     parentElement: containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   });
   const spineItemFrame = commonSpineItem.spineItemFrame;
   let latestContentHeightWhenLoaded;
@@ -2541,12 +2244,12 @@ const createReflowableSpineItem = ({
     (_b = (_a = spineItemFrame.getManipulableFrame()) == null ? void 0 : _a.frame) == null ? void 0 : _b.style.setProperty(`width`, `${pageWidth}px`);
     (_d = (_c = spineItemFrame.getManipulableFrame()) == null ? void 0 : _c.frame) == null ? void 0 : _d.style.setProperty(`height`, `${pageHeight}px`);
     const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-    const visibleArea = context.getVisibleAreaRect();
+    const visibleArea = context.state.visibleAreaRect;
     const frameElement = (_e = spineItemFrame.getManipulableFrame()) == null ? void 0 : _e.frame;
-    const isGloballyPrePaginated = ((_f = context.getManifest()) == null ? void 0 : _f.renditionLayout) === `pre-paginated`;
+    const isGloballyPrePaginated = ((_f = context.manifest) == null ? void 0 : _f.renditionLayout) === `pre-paginated`;
     if ((spineItemFrame == null ? void 0 : spineItemFrame.getIsLoaded()) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
       let contentWidth = pageWidth;
-      let contentHeight = visibleArea.height + context.getCalculatedInnerMargin();
+      let contentHeight = visibleArea.height + context.state.calculatedInnerMargin;
       frameElement == null ? void 0 : frameElement.style.setProperty(`visibility`, `visible`);
       frameElement == null ? void 0 : frameElement.style.setProperty(`opacity`, `1`);
       if (viewportDimensions) {
@@ -2566,8 +2269,8 @@ const createReflowableSpineItem = ({
         frameElement == null ? void 0 : frameElement.style.setProperty(`transform-origin`, `center center`);
       } else {
         const frameStyle = commonSpineItem.isImageType() ? buildStyleForReflowableImageOnly({
-          isScrollable: ((_g = context.getManifest()) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
-          enableTouch: settings.getSettings().computedPageTurnMode !== `scrollable`
+          isScrollable: ((_g = context.manifest) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`,
+          enableTouch: settings.settings.computedPageTurnMode !== `scrollable`
         }) : buildStyleWithMultiColumn(
           commonSpineItem.getDimensionsForReflowableContent(spineItemFrame.isUsingVerticalWriting(), minimumWidth)
         );
@@ -2580,7 +2283,7 @@ const createReflowableSpineItem = ({
             width: minimumWidth,
             height: contentHeight
           });
-        } else if (((_h = context.getManifest()) == null ? void 0 : _h.renditionFlow) === `scrolled-continuous`) {
+        } else if (((_h = context.manifest) == null ? void 0 : _h.renditionFlow) === `scrolled-continuous`) {
           contentHeight = frameElement.contentDocument.documentElement.scrollHeight;
           latestContentHeightWhenLoaded = contentHeight;
           spineItemFrame.staticLayout({
@@ -2644,7 +2347,10 @@ const buildStyleForViewportFrame = () => {
     }
   `;
 };
-const buildStyleForReflowableImageOnly = ({ isScrollable, enableTouch }) => {
+const buildStyleForReflowableImageOnly = ({
+  isScrollable,
+  enableTouch
+}) => {
   return `
     ${/*
   * @see https://hammerjs.github.io/touch-action/
@@ -2792,91 +2498,29 @@ const createSpineItem = ({
   item,
   context,
   containerElement,
-  iframeEventBridgeElement$,
-  hooks$,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
   if (item.renditionLayout === `pre-paginated`) {
     return createPrePaginatedSpineItem({
       item,
       context,
       containerElement,
-      iframeEventBridgeElement$,
-      hooks$,
       viewportState$,
-      settings
+      settings,
+      hookManager
     });
   }
   return createReflowableSpineItem({
     item,
     context,
     containerElement,
-    iframeEventBridgeElement$,
-    hooks$,
     viewportState$,
-    settings
+    settings,
+    hookManager
   });
 };
-const createEventsHelper = ({
-  iframeEventBridgeElement$,
-  locator
-}) => {
-  const normalizeEventForViewport = (event) => {
-    var _a;
-    const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue();
-    const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event);
-    const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
-    if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame)
-      return event;
-    const spineItem = locator.getSpineItemFromIframe(originalFrame);
-    if (!spineItem)
-      return event;
-    if (isPointerEvent(event)) {
-      const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-      const newEvent = new PointerEvent(event.type, {
-        ...event,
-        pointerId: event.pointerId,
-        clientX,
-        clientY
-      });
-      Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-      return newEvent;
-    }
-    if (isMouseEvent(event)) {
-      const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
-      const newEvent = new MouseEvent(event.type, {
-        ...event,
-        clientX,
-        clientY
-      });
-      Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-      return newEvent;
-    }
-    if (isTouchEvent(event)) {
-      const touches = Array.from(event.touches).map((touch) => {
-        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
-        return new Touch({
-          identifier: touch.identifier,
-          target: touch.target,
-          clientX,
-          clientY
-        });
-      });
-      const newEvent = new TouchEvent(event.type, {
-        touches,
-        changedTouches: touches,
-        targetTouches: touches
-      });
-      Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
-      return newEvent;
-    }
-    return event;
-  };
-  return {
-    normalizeEventForViewport
-  };
-};
 const ELEMENT_NODE = Node.ELEMENT_NODE;
 const TEXT_NODE = Node.TEXT_NODE;
 const CDATA_SECTION_NODE = Node.CDATA_SECTION_NODE;
@@ -2890,8 +2534,7 @@ function matchAll(str, regExp, add) {
   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);
@@ -2954,24 +2597,17 @@ function calcSiblingCount(nodes, n, offset) {
 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 {
@@ -2993,20 +2629,16 @@ class CFI {
     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) {
@@ -3050,8 +2682,7 @@ class CFI {
     if (!parts) {
       if (this.from) {
         this.removeIllegalOpts(this.from);
-        if (!this.to)
-          return;
+        if (!this.to) return;
         parts = this.to;
       } else {
         parts = this.parts;
@@ -3074,8 +2705,7 @@ class CFI {
     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;
     }
@@ -3092,8 +2722,7 @@ class CFI {
     } else {
       cfi = this.generatePart(node, offset, extra);
     }
-    if (extra)
-      cfi += extra;
+    if (extra) cfi += extra;
     return `epubcfi(` + cfi + `)`;
   }
   static toParsed(cfi) {
@@ -3110,13 +2739,10 @@ class CFI {
     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;
   }
@@ -3133,14 +2759,11 @@ class CFI {
     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);
@@ -3153,29 +2776,22 @@ class CFI {
     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;
   }
@@ -3193,8 +2809,7 @@ class CFI {
     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);
     }
@@ -3203,8 +2818,7 @@ class CFI {
     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;
@@ -3220,8 +2834,7 @@ class CFI {
     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`) {
@@ -3245,11 +2858,9 @@ class CFI {
     }
   }
   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])
@@ -3339,8 +2950,7 @@ class CFI {
         } else {
           prevState = state;
           state = null;
-          if (f && seenColon)
-            o.spatial = this.parseSpatialRange(f);
+          if (f && seenColon) o.spatial = this.parseSpatialRange(f);
           f = null;
         }
       }
@@ -3450,8 +3060,7 @@ class CFI {
       }
       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
@@ -3459,8 +3068,7 @@ class CFI {
   // 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 };
     }
@@ -3528,8 +3136,7 @@ class CFI {
     }
   }
   isTextNode(node) {
-    if (!node)
-      return false;
+    if (!node) return false;
     if (node.nodeType === TEXT_NODE || node.nodeType === CDATA_SECTION_NODE) {
       return true;
     }
@@ -3561,15 +3168,13 @@ class CFI {
       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 };
@@ -3578,11 +3183,9 @@ class CFI {
     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;
     }
@@ -3590,8 +3193,7 @@ class CFI {
   }
   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`);
@@ -3605,8 +3207,7 @@ class CFI {
       }
     }
     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;
@@ -3648,40 +3249,33 @@ class CFI {
       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`);
@@ -3692,13 +3286,11 @@ class CFI {
   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
@@ -3762,12 +3354,20 @@ const createSelection = (selection, item) => {
     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)}]`
+        );
       }
     }
   };
@@ -3778,9 +3378,7 @@ const createSpine = ({
   element$,
   context,
   pagination,
-  iframeEventBridgeElement$,
   spineItemManager,
-  hooks$,
   spineItemLocator,
   spineLocator,
   cfiLocator,
@@ -3788,18 +3386,13 @@ const createSpine = ({
   navigationAdjusted$,
   currentNavigationPosition$,
   viewportState$,
-  settings
+  settings,
+  hookManager
 }) => {
   const spineItems$ = new Subject();
   const itemsBeforeDestroySubject$ = new Subject();
   const subject = new Subject();
   const containerElement$ = new BehaviorSubject(noopElement$1);
-  const eventsHelper = createEventsHelper({
-    context,
-    spineItemManager,
-    iframeEventBridgeElement$,
-    locator: spineLocator
-  });
   let selectionSubscription;
   const reload = (manifest) => {
     itemsBeforeDestroySubject$.next();
@@ -3808,11 +3401,10 @@ const createSpine = ({
       const spineItem = createSpineItem({
         item: resource,
         containerElement: containerElement$.getValue(),
-        iframeEventBridgeElement$,
         context,
-        hooks$,
         viewportState$,
-        settings
+        settings,
+        hookManager
       });
       spineItemManager.add(spineItem);
     });
@@ -3831,7 +3423,7 @@ const createSpine = ({
     var _a;
     (_a = spineItemManager.get(id)) == null ? void 0 : _a.manipulateSpineItem(cb);
   };
-  context.$.manifest$.pipe(tap(reload), takeUntil$1(context.$.destroy$)).subscribe();
+  context.manifest$.pipe(tap(reload), takeUntil$1(context.destroy$)).subscribe();
   const waitForViewportFree$ = viewportState$.pipe(
     filter((v) => v === `free`),
     take(1)
@@ -3923,7 +3515,7 @@ const createSpine = ({
         Report.error(e);
         return EMPTY;
       }),
-      takeUntil$1(context.$.destroy$)
+      takeUntil$1(context.destroy$)
     )
   ).subscribe();
   const itemUpdateOnNavigation$ = navigation$.pipe(
@@ -3949,7 +3541,10 @@ const createSpine = ({
           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(
@@ -3969,7 +3564,7 @@ const createSpine = ({
              *
              * The cfi is later adjusted with heavy dom lookup once the viewport is free.
              */
-            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.getSettings().computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().beginCfi : beginItemIndex !== pagination.getPaginationInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
+            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === beginSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.settings.computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().beginCfi : beginItemIndex !== pagination.getPaginationInfo().beginSpineItemIndex ? cfiLocator.getRootCfi(beginSpineItem) : (
               /* @todo check ? */
               cfiLocator.getRootCfi(beginSpineItem)
             ),
@@ -3981,7 +3576,7 @@ const createSpine = ({
             spineItem: endSpineItem,
             spineItemIndex: endItemIndex,
             pageIndex: endPageIndex,
-            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.getSettings().computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().endCfi : endItemIndex !== pagination.getPaginationInfo().endSpineItemIndex ? cfiLocator.getRootCfi(endSpineItem) : (
+            cfi: (lastExpectedNavigation == null ? void 0 : lastExpectedNavigation.type) === `navigate-from-cfi` && spineItemToFocus === endSpineItem ? lastExpectedNavigation.data : data.triggeredBy === `adjust` && settings.settings.computedPageTurnMode === `controlled` ? pagination.getPaginationInfo().endCfi : endItemIndex !== pagination.getPaginationInfo().endSpineItemIndex ? cfiLocator.getRootCfi(endSpineItem) : (
               /* @todo check ? */
               cfiLocator.getRootCfi(endSpineItem)
             ),
@@ -4005,13 +3600,13 @@ const createSpine = ({
       time2();
     }),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   itemUpdateOnNavigation$.pipe(
     switchMap$1((data) => {
       return adjustPagination(data.position).pipe(takeUntil$1(spineItemManager.$.layout$));
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
   merge(
     /**
@@ -4032,8 +3627,7 @@ const createSpine = ({
         map$1(([, 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`);
@@ -4045,7 +3639,7 @@ const createSpine = ({
         take(1)
       );
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
   const elementSub = element$.pipe().subscribe((element) => {
     const containerElement = createContainerElement(element.ownerDocument);
@@ -4057,7 +3651,6 @@ const createSpine = ({
     locator: spineLocator,
     spineItemLocator,
     cfiLocator,
-    normalizeEventForViewport: eventsHelper.normalizeEventForViewport,
     manipulateSpineItems,
     manipulateSpineItem,
     destroy: () => {
@@ -4104,16 +3697,16 @@ const createSpineItemManager = ({ context, settings }) => {
   const orderedSpineItemsSubject$ = new BehaviorSubject([]);
   let focusedSpineItemIndex;
   const layout = () => {
-    const manifest = context.getManifest();
+    const manifest = context.manifest;
     const newItemLayoutInformation = [];
     const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
     orderedSpineItemsSubject$.value.reduce(
       ({ horizontalOffset, verticalOffset }, item, index) => {
         let minimumWidth = context.getPageSize().width;
         let blankPagePosition = `none`;
-        const itemStartOnNewScreen = horizontalOffset % context.getVisibleAreaRect().width === 0;
+        const itemStartOnNewScreen = horizontalOffset % context.state.visibleAreaRect.width === 0;
         const isLastItem = index === orderedSpineItemsSubject$.value.length - 1;
-        if (context.isUsingSpreadMode()) {
+        if (context.state.isUsingSpreadMode) {
           if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
             minimumWidth = context.getPageSize().width * 2;
           }
@@ -4139,10 +3732,10 @@ const createSpineItemManager = ({ context, settings }) => {
         const { width, height } = item.layout({
           minimumWidth,
           blankPagePosition,
-          spreadPosition: context.isUsingSpreadMode() ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
+          spreadPosition: context.state.isUsingSpreadMode ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
         });
-        if (settings.getSettings().computedPageTurnDirection === `vertical`) {
-          const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.getVisibleAreaRect().height;
+        if (settings.settings.computedPageTurnDirection === `vertical`) {
+          const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.state.visibleAreaRect.height;
           const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
           if (context.isRTL()) {
             item.adjustPositionOfElement({
@@ -4170,11 +3763,13 @@ const createSpineItemManager = ({ context, settings }) => {
             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
@@ -4191,27 +3786,27 @@ const createSpineItemManager = ({ context, settings }) => {
       },
       { 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
@@ -4252,25 +3847,28 @@ const createSpineItemManager = ({ context, settings }) => {
     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(takeUntil$1(context.$.destroy$)).subscribe(() => {
+    spineItem.$.contentLayout$.pipe(takeUntil$1(context.destroy$)).subscribe(() => {
       layout();
     });
     spineItem.$.loaded$.pipe(
       tap(() => {
         if (spineItem.isUsingVerticalWriting()) {
-          context.setHasVerticalWriting(true);
+          context.update({
+            hasVerticalWriting: true
+          });
         } else {
-          context.setHasVerticalWriting(false);
+          context.update({
+            hasVerticalWriting: false
+          });
         }
       }),
-      takeUntil$1(context.$.destroy$)
+      takeUntil$1(context.destroy$)
     ).subscribe();
     spineItem.load();
   };
@@ -4310,12 +3908,175 @@ const createSpineItemManager = ({ context, settings }) => {
       layout$: layout$.asObservable(),
       itemIsReady$: orderedSpineItemsSubject$.asObservable().pipe(
         switchMap$1((items) => {
-          const itemsIsReady$ = items.map((item) => item.$.isReady$.pipe(map$1((isReady) => ({ item: item.item, isReady }))));
+          const itemsIsReady$ = items.map(
+            (item) => item.$.isReady$.pipe(map$1((isReady) => ({ item: item.item, isReady })))
+          );
           return 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) => ({
@@ -4415,10 +4176,8 @@ const createLocationResolver$1 = ({ context }) => {
   };
   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)
@@ -4454,7 +4213,10 @@ const createNavigationResolver$1 = ({ context }) => {
         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) => {
@@ -4468,7 +4230,10 @@ const createNavigationResolver$1 = ({ context }) => {
         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) => {
@@ -4491,7 +4256,10 @@ const createNavigationResolver$1 = ({ context }) => {
     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 {
@@ -4537,7 +4305,7 @@ const createNavigationResolver = ({
     { disable: true }
   );
   const getAdjustedPositionForSpread = ({ x, y }) => {
-    const isOffsetNotAtEdge = x % context.getVisibleAreaRect().width !== 0;
+    const isOffsetNotAtEdge = x % context.state.visibleAreaRect.width !== 0;
     const correctedX = isOffsetNotAtEdge ? x - context.getPageSize().width : x;
     return { x: correctedX, y };
   };
@@ -4576,7 +4344,7 @@ const createNavigationResolver = ({
     return { x: 0, y: 0 };
   };
   const getNavigationForRightSinglePage = (position) => {
-    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.settings.computedPageTurnDirection;
     const spineItem = locator.getSpineItemFromPosition(position) || spineItemManager.getFocusedSpineItem();
     const defaultNavigation = position;
     if (!spineItem) {
@@ -4590,12 +4358,15 @@ const createNavigationResolver = ({
         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) {
@@ -4619,7 +4390,7 @@ const createNavigationResolver = ({
     if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
       return getAdjustedPositionForSpread(navigation);
     }
-    if (context.isUsingSpreadMode()) {
+    if (context.state.isUsingSpreadMode) {
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
         return getAdjustedPositionForSpread(
           wrapPositionWithSafeEdge(
@@ -4633,7 +4404,7 @@ const createNavigationResolver = ({
           )
         );
       }
-      if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+      if (settings.settings.computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
         return getAdjustedPositionForSpread(navigation);
       }
       const doubleNavigation = getNavigationForRightSinglePage(navigation);
@@ -4647,7 +4418,7 @@ const createNavigationResolver = ({
     if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x === navigation.x) {
       return getAdjustedPositionForSpread(navigation);
     }
-    if (context.isUsingSpreadMode()) {
+    if (context.state.isUsingSpreadMode) {
       if ((spineItemOnPosition == null ? void 0 : spineItemOnPosition.isUsingVerticalWriting()) && position.x !== navigation.x) {
         return getAdjustedPositionForSpread(
           wrapPositionWithSafeEdge(
@@ -4655,7 +4426,7 @@ const createNavigationResolver = ({
           )
         );
       }
-      if (settings.getSettings().computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
+      if (settings.settings.computedPageTurnDirection === `vertical` && position.y !== navigation.y) {
         return getAdjustedPositionForSpread(navigation);
       }
       const doubleNavigation = getNavigationForLeftSinglePage(navigation);
@@ -4668,7 +4439,7 @@ const createNavigationResolver = ({
     try {
       const validUrl = url instanceof URL ? url : new URL(url);
       const urlWithoutAnchor = `${validUrl.origin}${validUrl.pathname}`;
-      const existingSpineItem = (_a = context.getManifest()) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
+      const existingSpineItem = (_a = context.manifest) == null ? void 0 : _a.spineItems.find((item) => item.href === urlWithoutAnchor);
       if (existingSpineItem) {
         const spineItem = spineItemManager.get(existingSpineItem.id);
         if (spineItem) {
@@ -4697,15 +4468,15 @@ const createNavigationResolver = ({
     return { x: 0, y: 0 };
   };
   const getMostPredominantNavigationForPosition = (viewportPosition) => {
-    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.settings.computedPageTurnDirection;
     const triggerPercentage = 0.5;
-    const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
-    const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.getVisibleAreaRect().height * triggerPercentage;
+    const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
+    const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.state.visibleAreaRect.height * triggerPercentage;
     const midScreenPositionSafePosition = wrapPositionWithSafeEdge({ x: triggerXPosition, y: triggerYPosition });
     return getNavigationForPosition(midScreenPositionSafePosition);
   };
   const isNavigationGoingForwardFrom = (to, from2) => {
-    const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+    const pageTurnDirection = settings.settings.computedPageTurnDirection;
     if (pageTurnDirection === `vertical`) {
       return to.y > from2.y;
     }
@@ -4749,14 +4520,14 @@ const createScrollViewportNavigator = ({
   );
   const adjustReadingOffset = ({ x, y }) => {
     var _a;
-    if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+    if (settings.settings.computedPageTurnMode === `scrollable`) {
       lastScrollWasProgrammaticallyTriggered = true;
       (_a = element$.getValue()) == null ? void 0 : _a.scrollTo({ left: x, top: y });
       return true;
     }
     return false;
   };
-  const runOnFreePageTurnModeOnly$ = (source) => settings.$.settings$.pipe(
+  const runOnFreePageTurnModeOnly$ = (source) => settings.settings$.pipe(
     map$1(({ computedPageTurnMode }) => computedPageTurnMode),
     distinctUntilChanged(),
     switchMap$1((mode) => iif(() => mode === `controlled`, EMPTY, source))
@@ -4766,12 +4537,11 @@ const createScrollViewportNavigator = ({
       filter(isDefined),
       switchMap$1((element) => fromEvent(element, `scroll`))
     )
-  ).pipe(onlyUserScrollFilter, share(), takeUntil$1(context.$.destroy$));
+  ).pipe(onlyUserScrollFilter, share(), takeUntil$1(context.destroy$));
   const getScaledDownPosition = ({ x, y }) => {
     var _a, _b;
     const spineElement = spine.getElement();
-    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({
@@ -4814,7 +4584,7 @@ const createScrollViewportNavigator = ({
   const userScrollEnd$ = userScroll$.pipe(
     debounceTime$1(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   const state$ = merge(
     userScroll$.pipe(
@@ -4907,7 +4677,7 @@ const createManualViewportNavigator = ({
     filter((e) => e.type === `pageIndex`),
     filter(() => {
       var _a;
-      if (((_a = context.getManifest()) == null ? void 0 : _a.renditionLayout) === `reflowable`) {
+      if (((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `reflowable`) {
         Report.warn(`This method only works for pre-paginated content`);
         return false;
       }
@@ -4926,13 +4696,15 @@ const createManualViewportNavigator = ({
     10,
     (navigation, { allowSpineItemChange = true } = {}) => {
       const currentSpineItem = spineItemManager.getFocusedSpineItem();
-      if (!currentSpineItem)
-        return EMPTY;
+      if (!currentSpineItem) return 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 of({
               ...navigation,
@@ -5041,11 +4813,11 @@ const createPanViewportNavigator = ({
     `${NAMESPACE$1} moveTo`,
     5,
     (delta, { final, start } = {}) => {
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         Report.warn(`pan control is not available on free page turn mode`);
         return;
       }
-      const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+      const pageTurnDirection = settings.settings.computedPageTurnDirection;
       if (start) {
         stateSubject$.next(`start`);
         movingLastDelta = { x: 0, y: 0 };
@@ -5086,8 +4858,7 @@ const createPanViewportNavigator = ({
     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) {
@@ -5105,7 +4876,7 @@ const createPanViewportNavigator = ({
   );
   const snapNavigation$ = navigationTriggerSubject$.pipe(
     filter((e) => e.type === `snap`),
-    withLatestFrom$1(settings.$.settings$),
+    withLatestFrom$1(settings.settings$),
     switchMap$1(
       ([
         {
@@ -5113,11 +4884,11 @@ const createPanViewportNavigator = ({
         },
         { navigationSnapThreshold }
       ]) => {
-        const pageTurnDirection = settings.getSettings().computedPageTurnDirection;
+        const pageTurnDirection = settings.settings.computedPageTurnDirection;
         const movingForward = navigator2.isNavigationGoingForwardFrom(to, from2);
         const triggerPercentage = movingForward ? 1 - navigationSnapThreshold : navigationSnapThreshold;
-        const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.getVisibleAreaRect().width * triggerPercentage : 0;
-        const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : to.y + context.getVisibleAreaRect().height * triggerPercentage;
+        const triggerXPosition = pageTurnDirection === `horizontal` ? to.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
+        const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : to.y + context.state.visibleAreaRect.height * triggerPercentage;
         const midScreenPositionSafePosition = navigator2.wrapPositionWithSafeEdge({
           x: triggerXPosition,
           y: triggerYPosition
@@ -5154,7 +4925,7 @@ const createViewportNavigator = ({
   parentElement$,
   cfiLocator,
   spineLocator,
-  hooks$,
+  hookManager,
   spine,
   settings
 }) => {
@@ -5176,7 +4947,7 @@ const createViewportNavigator = ({
   const adjustNavigationSubject$ = new Subject();
   const getCurrentViewportPosition = Report.measurePerformance(`${NAMESPACE} getCurrentViewportPosition`, 1, () => {
     var _a;
-    if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+    if (settings.settings.computedPageTurnMode === `scrollable`) {
       return scrollViewportNavigator.getCurrentViewportPosition();
     }
     const { x, y } = ((_a = element$.getValue()) == null ? void 0 : _a.getBoundingClientRect()) ?? { x: 0, y: 0 };
@@ -5220,16 +4991,15 @@ const createViewportNavigator = ({
   const viewportNavigatorsSharedState$ = merge(...viewportNavigators.map(({ $: { state$: state$2 } }) => state$2));
   let lastUserExpectedNavigation;
   const makeItHot = (source$) => {
-    source$.pipe(takeUntil$1(context.$.destroy$)).subscribe();
+    source$.pipe(takeUntil$1(context.destroy$)).subscribe();
     return source$;
   };
   const adjustReadingOffset = Report.measurePerformance(
     `adjustReadingOffset`,
     2,
-    ({ x, y }, hooks) => {
+    ({ x, y }) => {
       const element = element$.getValue();
-      if (!element)
-        throw new Error("Invalid element");
+      if (!element) throw new Error("Invalid element");
       currentViewportPositionMemoUnused = void 0;
       const isAdjusted = viewportNavigators.reduce((isAdjusted2, navigator22) => {
         return navigator22.adjustReadingOffset({ x, y }) || isAdjusted2;
@@ -5237,11 +5007,7 @@ const createViewportNavigator = ({
       if (!isAdjusted) {
         element.style.transform = `translate3d(${-x}px, -${y}px, 0)`;
       }
-      hooks.forEach((hook) => {
-        if (hook.name === `onViewportOffsetAdjust`) {
-          hook.fn();
-        }
-      });
+      hookManager.execute("onViewportOffsetAdjust", void 0, {});
     },
     { disable: true }
   );
@@ -5249,7 +5015,7 @@ const createViewportNavigator = ({
     const lastCfi = pagination.getPaginationInfo().beginCfi;
     let adjustedSpinePosition = currentNavigationPositionSubject$.value;
     const offsetInSpineItem = 0;
-    if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+    if (settings.settings.computedPageTurnMode === `scrollable`) {
       adjustedSpinePosition = scrollViewportNavigator.getNavigationForPosition(getCurrentViewportPosition());
     } else if ((lastUserExpectedNavigation == null ? void 0 : lastUserExpectedNavigation.type) === `navigate-from-cfi`) {
       adjustedSpinePosition = navigator2.getNavigationForCfi(lastUserExpectedNavigation.data);
@@ -5294,7 +5060,7 @@ const createViewportNavigator = ({
   layoutSubject$.subscribe(() => {
     currentViewportPositionMemoUnused = void 0;
   });
-  const layoutChangeSettings$ = settings.$.settings$.pipe(
+  const layoutChangeSettings$ = settings.settings$.pipe(
     mapKeysTo([`computedPageTurnDirection`, `computedPageTurnMode`, `numberOfAdjacentSpineItemToPreLoad`]),
     distinctUntilChanged(isShallowEqual),
     skip(1)
@@ -5302,7 +5068,7 @@ const createViewportNavigator = ({
   const layout$ = merge(layoutSubject$, layoutChangeSettings$).pipe(
     withLatestFrom(element$),
     tap(([, element]) => {
-      if (settings.getSettings().computedPageTurnMode === `scrollable`) {
+      if (settings.settings.computedPageTurnMode === `scrollable`) {
         element.style.removeProperty(`transform`);
         element.style.removeProperty(`transition`);
         element.style.overflow = `scroll`;
@@ -5354,11 +5120,11 @@ const createViewportNavigator = ({
       return { ...event, lastUserExpectedNavigation };
     }),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   const navigationWhichRequireManualAdjust$ = navigation$.pipe(
     filter(({ triggeredBy }) => {
-      if (triggeredBy === `scroll` || settings.getSettings().computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
+      if (triggeredBy === `scroll` || settings.settings.computedPageTurnMode === `scrollable` && triggeredBy === `adjust`) {
         return false;
       } else {
         return true;
@@ -5370,7 +5136,7 @@ const createViewportNavigator = ({
     navigationWhichRequireManualAdjust$
   ).pipe(
     map$1(({ animation, position }) => {
-      const shouldAnimate = !(!animation || animation === `turn` && settings.getSettings().computedPageTurnAnimation === `none`);
+      const shouldAnimate = !(!animation || animation === `turn` && settings.settings.computedPageTurnAnimation === `none`);
       return {
         type: `manualAdjust`,
         shouldAnimate,
@@ -5390,10 +5156,9 @@ const createViewportNavigator = ({
       }
     }),
     switchMap$1(([, currentEvent]) => {
-      if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`)
-        return EMPTY;
-      const animationDuration = currentEvent.animation === `snap` ? settings.getSettings().computedSnapAnimationDuration : settings.getSettings().computedPageTurnAnimationDuration;
-      const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.getSettings().computedPageTurnAnimation;
+      if ((currentEvent == null ? void 0 : currentEvent.type) !== `manualAdjust`) return EMPTY;
+      const animationDuration = currentEvent.animation === `snap` ? settings.settings.computedSnapAnimationDuration : settings.settings.computedPageTurnAnimationDuration;
+      const pageTurnAnimation = currentEvent.animation === `snap` ? `slide` : settings.settings.computedPageTurnAnimation;
       return of(currentEvent).pipe(
         /**
          * @important
@@ -5427,23 +5192,22 @@ const createViewportNavigator = ({
          * need to adjust to anchor to the payload position. This is because we use viewport computed position,
          * not the value set by `setProperty`
          */
-        withLatestFrom(hooks$),
-        tap(([data, hooks]) => {
+        tap((data) => {
           if (pageTurnAnimation !== `fade`) {
-            adjustReadingOffset(data.position, hooks);
+            adjustReadingOffset(data.position);
           }
         }),
         currentEvent.shouldAnimate ? delay(animationDuration / 2, animationFrameScheduler) : identity,
-        tap(([data, hooks]) => {
+        tap((data) => {
           if (pageTurnAnimation === `fade`) {
-            adjustReadingOffset(data.position, hooks);
+            adjustReadingOffset(data.position);
             element$.getValue().style.setProperty(`opacity`, `1`);
           }
         }),
         currentEvent.shouldAnimate ? delay(animationDuration / 2, animationFrameScheduler) : identity,
-        tap(([data, hooks]) => {
+        tap((data) => {
           if (pageTurnAnimation === `fade`) {
-            adjustReadingOffset(data.position, hooks);
+            adjustReadingOffset(data.position);
           }
         }),
         takeUntil$1(
@@ -5455,7 +5219,7 @@ const createViewportNavigator = ({
       );
     }),
     share(),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   );
   const adjustmentState$ = merge(
     merge(manualAdjust$).pipe(map$1(() => `start`)),
@@ -5500,8 +5264,7 @@ const createViewportNavigator = ({
       () => waitForViewportFree$.pipe(
         switchMap$1(() => {
           const focusedSpineItem = spineItemManager.getFocusedSpineItem();
-          if (!focusedSpineItem)
-            return EMPTY;
+          if (!focusedSpineItem) return EMPTY;
           return adjustNavigation(focusedSpineItem);
         }),
         takeUntil$1(navigation$)
@@ -5510,7 +5273,7 @@ const createViewportNavigator = ({
     share()
   );
   const parentElementSub = parentElement$.pipe(filter(isDefined), withLatestFrom(spine.element$)).subscribe(([parentElement, spineElement]) => {
-    const element = createElement(parentElement.ownerDocument, hooks$);
+    const element = createElement(parentElement.ownerDocument, hookManager);
     element.appendChild(spineElement);
     parentElement.appendChild(element);
     element$.next(element);
@@ -5546,19 +5309,15 @@ const createViewportNavigator = ({
     }
   };
 };
-const createElement = (doc, hooks$) => {
+const createElement = (doc, hookManager) => {
   const element = doc.createElement(`div`);
   element.style.cssText = `
     height: 100%;
     position: relative;
   `;
   element.className = `${HTML_PREFIX$1}-viewport-navigator`;
-  return hooks$.getValue().reduce((element2, hook) => {
-    if (hook.name === `viewportNavigator.onBeforeContainerCreated`) {
-      return hook.fn(element2);
-    }
-    return element2;
-  }, element);
+  hookManager.execute("viewportNavigator.onBeforeContainerCreated", void 0, { element });
+  return element;
 };
 const createLocationResolver = ({
   spineItemManager,
@@ -5599,7 +5358,7 @@ const createLocationResolver = ({
       const spineItem = spineItemManager.getAll().find((item) => {
         const { left, right, bottom, top } = spineItemManager.getAbsolutePositionOf(item);
         const isWithinXAxis = position.x >= left && position.x < right;
-        if (settings.getSettings().computedPageTurnDirection === `horizontal`) {
+        if (settings.settings.computedPageTurnDirection === `horizontal`) {
           return isWithinXAxis;
         } else {
           return isWithinXAxis && position.y >= top && position.y < bottom;
@@ -5623,13 +5382,14 @@ const createLocationResolver = ({
   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 }
@@ -5709,12 +5469,10 @@ const createCfiLocator = ({
   };
   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;
@@ -5747,80 +5505,164 @@ const createCfiLocator = ({
     generateFromRange
   };
 };
-const areAllItemsPrePaginated = (manifest) => !(manifest == null ? void 0 : manifest.spineItems.some((item) => item.renditionLayout === `reflowable`));
-const createSettings = (initialSettings) => {
-  const mergedSettings = {
-    forceSinglePageMode: false,
-    pageTurnAnimation: `none`,
-    computedPageTurnAnimation: `none`,
-    pageTurnDirection: `horizontal`,
-    computedPageTurnDirection: `horizontal`,
-    pageTurnAnimationDuration: void 0,
-    computedPageTurnAnimationDuration: 0,
-    pageTurnMode: `controlled`,
+const getComputedSettings = (settings, context) => {
+  const manifest = context.manifest;
+  const hasVerticalWriting = context.state.hasVerticalWriting ?? false;
+  const computedSettings = {
+    computedPageTurnDirection: settings.pageTurnDirection,
+    computedPageTurnAnimation: settings.pageTurnAnimation,
     computedPageTurnMode: `controlled`,
-    computedSnapAnimationDuration: 300,
-    navigationSnapThreshold: 0.3,
-    numberOfAdjacentSpineItemToPreLoad: 0,
-    ...initialSettings
-  };
-  updateComputedSettings(void 0, mergedSettings, false);
-  const settingsSubject$ = new BehaviorSubject(mergedSettings);
-  const setSettings = (newSettings, options) => {
-    if (Object.keys(newSettings).length === 0)
-      return;
-    const newMergedSettings = { ...settingsSubject$.value, ...newSettings };
-    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
-    settingsSubject$.next(newMergedSettings);
-  };
-  const recompute = (options) => {
-    const newMergedSettings = { ...settingsSubject$.value };
-    updateComputedSettings(options.manifest, newMergedSettings, options.hasVerticalWriting ?? false);
-    settingsSubject$.next(newMergedSettings);
-  };
-  const destroy = () => {
-    settingsSubject$.complete();
-  };
-  return {
-    getSettings: () => settingsSubject$.value,
-    setSettings,
-    recompute,
-    destroy,
-    $: {
-      settings$: settingsSubject$.asObservable().pipe(distinctUntilChanged(isShallowEqual))
-    }
+    computedPageTurnAnimationDuration: 0,
+    computedSnapAnimationDuration: 0
   };
-};
-const updateComputedSettings = (newManifest, settings, hasVerticalWriting) => {
-  settings.computedPageTurnDirection = settings.pageTurnDirection;
-  settings.computedPageTurnAnimation = settings.pageTurnAnimation;
-  settings.computedPageTurnMode = `controlled`;
-  if ((newManifest == null ? void 0 : newManifest.renditionFlow) === `scrolled-continuous`) {
-    settings.computedPageTurnMode = `scrollable`;
-    settings.computedPageTurnDirection = `vertical`;
-  } else if (newManifest && settings.pageTurnMode === `scrollable` && (newManifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(newManifest))) {
+  if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
+    computedSettings.computedPageTurnMode = `scrollable`;
+    computedSettings.computedPageTurnDirection = `vertical`;
+  } else if (manifest && settings.pageTurnMode === `scrollable` && (manifest.renditionLayout !== `pre-paginated` || !areAllItemsPrePaginated(manifest))) {
     Report.warn(`pageTurnMode ${settings.pageTurnMode} incompatible with current book, switching back to default`);
-    settings.computedPageTurnAnimation = `none`;
-    settings.computedPageTurnMode = `controlled`;
+    computedSettings.computedPageTurnAnimation = `none`;
+    computedSettings.computedPageTurnMode = `controlled`;
   } else if (settings.pageTurnMode === `scrollable`) {
-    settings.computedPageTurnMode = `scrollable`;
-    settings.computedPageTurnDirection = `vertical`;
+    computedSettings.computedPageTurnMode = `scrollable`;
+    computedSettings.computedPageTurnDirection = `vertical`;
   }
-  if (hasVerticalWriting && settings.computedPageTurnAnimation === `slide`) {
+  if (hasVerticalWriting && computedSettings.computedPageTurnAnimation === `slide`) {
     Report.warn(
-      `pageTurnAnimation ${settings.computedPageTurnAnimation} incompatible with current book, switching back to default`
+      `pageTurnAnimation ${computedSettings.computedPageTurnAnimation} incompatible with current book, switching back to default`
     );
-    settings.computedPageTurnAnimation = `none`;
+    computedSettings.computedPageTurnAnimation = `none`;
   }
-  if (settings.computedPageTurnMode === `scrollable`) {
-    settings.computedPageTurnAnimationDuration = 0;
-    settings.computedPageTurnAnimation = `none`;
+  if (computedSettings.computedPageTurnMode === `scrollable`) {
+    computedSettings.computedPageTurnAnimationDuration = 0;
+    computedSettings.computedPageTurnAnimation = `none`;
   } else {
-    settings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
+    computedSettings.computedPageTurnAnimationDuration = settings.pageTurnAnimationDuration !== void 0 ? settings.pageTurnAnimationDuration : 300;
   }
+  return computedSettings;
 };
-const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
-const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
+const defaultSettings = {
+  forceSinglePageMode: false,
+  pageTurnAnimation: `none`,
+  //   computedPageTurnAnimation: `none`,
+  pageTurnDirection: `horizontal`,
+  //   computedPageTurnDirection: `horizontal`,
+  pageTurnAnimationDuration: void 0,
+  //   computedPageTurnAnimationDuration: 0,
+  pageTurnMode: `controlled`,
+  //   computedPageTurnMode: `controlled`,
+  //   computedSnapAnimationDuration: 300,
+  navigationSnapThreshold: 0.3,
+  numberOfAdjacentSpineItemToPreLoad: 0
+};
+class SettingsManager {
+  constructor(initialSettings, context) {
+    this._context = context;
+    const settingsWithDefaults = {
+      ...defaultSettings,
+      ...initialSettings
+    };
+    const computedSettings = getComputedSettings(settingsWithDefaults, context);
+    const settings = { ...settingsWithDefaults, ...computedSettings };
+    this._settingsSubject$ = new BehaviorSubject(settings);
+    this.settings$ = this._settingsSubject$.asObservable().pipe(distinctUntilChanged(isShallowEqual));
+    const recomputeSettingsOnContextChange$ = combineLatest([context.hasVerticalWriting$, context.manifest$]).pipe(
+      tap(() => {
+        this._updateSettings(this.settings);
+      })
+    );
+    const updateContextOnSettingsChanges$ = this._settingsSubject$.pipe(
+      tap(({ forceSinglePageMode }) => {
+        context.update({ forceSinglePageMode });
+      })
+    );
+    merge(recomputeSettingsOnContextChange$, updateContextOnSettingsChanges$).pipe(takeUntil$1(context.destroy$)).subscribe();
+  }
+  // @see https://github.com/microsoft/TypeScript/issues/17293
+  _updateSettings(settings) {
+    const computed = getComputedSettings(settings, this._context);
+    const newMergedSettings = { ...settings, ...computed };
+    this._settingsSubject$.next(newMergedSettings);
+  }
+  setSettings(settings) {
+    if (Object.keys(settings).length === 0) return;
+    const newMergedSettings = { ...this._settingsSubject$.value, ...settings };
+    this._updateSettings(newMergedSettings);
+  }
+  get settings() {
+    return this._settingsSubject$.getValue();
+  }
+  destroy() {
+    this._settingsSubject$.complete();
+  }
+}
+class HookManager {
+  constructor() {
+    this._hooks = [];
+    this._hookExecutions = [];
+  }
+  /**
+   * Will:
+   * - call destroy function for every execution of this specific hook
+   * - remove the hook for further calls
+   */
+  deregister(hookToDeregister) {
+    this._hooks = this._hooks.filter((hook) => hook !== hookToDeregister);
+    return this.destroy(hookToDeregister.name, void 0, hookToDeregister);
+  }
+  /**
+   * Ideal when your logic only needs to apply something to the item when it's loaded.
+   * You can manipulate your item later if you need to update it and trigger a layout.
+   * This logic will not run every time there is a layout.
+   */
+  register(name, fn) {
+    const hook = {
+      name,
+      runFn: 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 = () => of(void 0);
+      const destroySubject = new Subject();
+      const destroy = (fn) => {
+        userDestroyFn = fn;
+      };
+      const destroyFn = () => {
+        destroySubject.next();
+        destroySubject.complete();
+        const result = userDestroyFn();
+        return result ?? of(void 0);
+      };
+      const 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 combineLatest(destroyFns);
+  }
+}
+const createReader = (inputSettings) => {
   const stateSubject$ = new BehaviorSubject({
     supportedPageTurnAnimation: [`fade`, `none`, `slide`],
     supportedPageTurnMode: [`controlled`, `scrollable`],
@@ -5829,24 +5671,23 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
   });
   const destroy$ = new Subject();
   const selectionSubject$ = new Subject();
-  const hooksSubject$ = new BehaviorSubject(initialHooks || []);
   const navigationSubject = new Subject();
   const navigationAdjustedSubject = new Subject();
   const currentNavigationPositionSubject$ = new BehaviorSubject({ x: 0, y: 0 });
   const viewportStateSubject = new BehaviorSubject(`free`);
-  const settings = createSettings(inputSettings);
-  const context = createContext(settings);
-  const spineItemManager = createSpineItemManager({ context, settings });
+  const hookManager = new HookManager();
+  const context = new Context();
+  const settingsManager = new SettingsManager(inputSettings, context);
+  const spineItemManager = createSpineItemManager({ context, settings: settingsManager });
   const pagination = createPagination({ context, spineItemManager });
   const elementSubject$ = new BehaviorSubject(void 0);
   const element$ = elementSubject$.pipe(filter(isDefined));
-  const iframeEventBridgeElement$ = new BehaviorSubject(void 0);
   const spineItemLocator = createLocationResolver$1({ context });
   const spineLocator = createLocationResolver({
     context,
     spineItemManager,
     spineItemLocator,
-    settings
+    settings: settingsManager
   });
   const cfiLocator = createCfiLocator({
     spineItemManager,
@@ -5856,19 +5697,18 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
   const navigation$ = navigationSubject.asObservable();
   const spine = createSpine({
     element$,
-    iframeEventBridgeElement$,
     context,
-    settings,
+    settings: settingsManager,
     pagination,
     spineItemManager,
-    hooks$: hooksSubject$,
     navigation$,
     spineLocator,
     spineItemLocator,
     cfiLocator,
     navigationAdjusted$: navigationAdjustedSubject.asObservable(),
     viewportState$: viewportStateSubject.asObservable(),
-    currentNavigationPosition$: currentNavigationPositionSubject$.asObservable()
+    currentNavigationPosition$: currentNavigationPositionSubject$.asObservable(),
+    hookManager
   });
   const viewportNavigator = createViewportNavigator({
     context,
@@ -5877,9 +5717,9 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     parentElement$: elementSubject$,
     cfiLocator,
     spineLocator,
-    hooks$: hooksSubject$,
+    hookManager,
     spine,
-    settings
+    settings: settingsManager
   });
   viewportNavigator.$.state$.subscribe(viewportStateSubject);
   viewportNavigator.$.navigation$.subscribe(navigationSubject);
@@ -5889,8 +5729,7 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     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
@@ -5905,30 +5744,29 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     element.style.height = `${dimensions.height - marginTop - marginBottom}px`;
     element.style.width = `${containerElementEvenWidth - 2 * margin}px`;
     const elementRect = element.getBoundingClientRect();
-    context.setVisibleAreaRect({
-      x: elementRect.x,
-      y: elementRect.y,
-      width: containerElementEvenWidth,
-      height: dimensions.height
+    context.update({
+      visibleAreaRect: {
+        x: elementRect.x,
+        y: elementRect.y,
+        width: containerElementEvenWidth,
+        height: dimensions.height
+      }
     });
     viewportNavigator.layout();
   };
   const load = (manifest, loadOptions) => {
     var _a;
-    if (context.getManifest()) {
+    if (context.manifest) {
       Report.warn(`loading a new book is not supported yet`);
       return;
     }
     Report.log(`load`, { manifest, loadOptions });
     const element = createWrapperElement(loadOptions.containerElement);
-    const iframeEventBridgeElement = createIframeEventBridgeElement(loadOptions.containerElement);
     if (loadOptions.containerElement !== ((_a = elementSubject$.getValue()) == null ? void 0 : _a.parentElement)) {
       elementSubject$.next(element);
-      iframeEventBridgeElement$.next(iframeEventBridgeElement);
       loadOptions.containerElement.appendChild(element);
-      element.appendChild(iframeEventBridgeElement);
     }
-    context.load(manifest, loadOptions);
+    context.update({ manifest, ...loadOptions, forceSinglePageMode: settingsManager.settings.forceSinglePageMode });
     layout();
     if (!loadOptions.cfi) {
       viewportNavigator.goToSpineItem(0, { animate: false });
@@ -5936,9 +5774,6 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
       viewportNavigator.goToCfi(loadOptions.cfi, { animate: false });
     }
   };
-  const registerHook = (name, fn) => {
-    hooksSubject$.next([...hooksSubject$.getValue(), { name, fn }]);
-  };
   spine.$.$.pipe(
     tap((event) => {
       if (event.type === `onSelectionChange`) {
@@ -5951,26 +5786,31 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     switchMap(({ adjustedSpinePosition }) => {
       return spine.adjustPagination(adjustedSpinePosition).pipe(takeUntil$1(navigation$));
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
-  merge(context.$.state$, settings.$.settings$).pipe(
+  merge(context.state$, settingsManager.settings$).pipe(
     map$1(() => void 0),
-    withLatestFrom(context.$.state$),
+    withLatestFrom(context.state$),
     map$1(([, { hasVerticalWriting }]) => {
-      const manifest = context.getManifest();
+      const manifest = context.manifest;
       return {
         hasVerticalWriting,
         renditionFlow: manifest == null ? void 0 : manifest.renditionFlow,
         renditionLayout: manifest == null ? void 0 : manifest.renditionLayout,
-        computedPageTurnMode: settings.getSettings().computedPageTurnMode
+        computedPageTurnMode: settingsManager.settings.computedPageTurnMode
       };
     }),
     distinctUntilChanged(isShallowEqual),
     map$1(
-      ({ 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`]
         };
@@ -5979,16 +5819,13 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
     takeUntil$1(destroy$)
   ).subscribe(stateSubject$);
   const destroy = () => {
-    var _a, _b;
-    settings.destroy();
-    hooksSubject$.next([]);
-    hooksSubject$.complete();
+    var _a;
+    settingsManager.destroy();
     pagination.destroy();
     context.destroy();
     viewportNavigator.destroy();
     spine.destroy();
     (_a = elementSubject$.getValue()) == null ? void 0 : _a.remove();
-    (_b = iframeEventBridgeElement$.getValue()) == null ? void 0 : _b.remove();
     stateSubject$.complete();
     selectionSubject$.complete();
     destroy$.next();
@@ -5996,43 +5833,16 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
   };
   const reader = {
     context,
-    registerHook,
     spine,
+    hookManager,
     viewportNavigator,
-    manipulateSpineItems: spine.manipulateSpineItems,
-    manipulateSpineItem: spine.manipulateSpineItem,
-    moveTo: viewportNavigator.moveTo,
-    turnLeft: viewportNavigator.turnLeft,
-    turnRight: viewportNavigator.turnRight,
-    goToPageOfCurrentChapter: viewportNavigator.goToPageOfCurrentChapter,
-    goToPage: viewportNavigator.goToPage,
-    goToUrl: viewportNavigator.goToUrl,
-    goToCfi: viewportNavigator.goToCfi,
-    goToSpineItem: viewportNavigator.goToSpineItem,
-    getFocusedSpineItemIndex: spineItemManager.getFocusedSpineItemIndex,
-    getSpineItem: spineItemManager.get,
-    getSpineItems: spineItemManager.getAll,
-    getAbsolutePositionOf: spineItemManager.getAbsolutePositionOf,
-    getSelection: spine.getSelection,
-    isSelecting: spine.isSelecting,
-    normalizeEventForViewport: spine.normalizeEventForViewport,
-    getCfiMetaInformation: spine.cfiLocator.getCfiMetaInformation,
-    resolveCfi: spine.cfiLocator.resolveCfi,
-    generateCfi: spine.cfiLocator.generateFromRange,
-    locator: spine.locator,
-    getCurrentNavigationPosition: viewportNavigator.getCurrentNavigationPosition,
-    getCurrentViewportPosition: viewportNavigator.getCurrentViewportPosition,
+    spineItemManager,
     layout,
     load,
     destroy,
-    spineItems$: spine.$.spineItems$,
-    context$: context.$.state$,
     pagination,
-    settings: {
-      settings$: settings.$.settings$,
-      getSettings: settings.getSettings,
-      setSettings: (data) => settings.setSettings(data, context.getState())
-    },
+    settings: settingsManager,
+    element$,
     $: {
       state$: stateSubject$.asObservable(),
       /**
@@ -6041,21 +5851,12 @@ const createReader = ({ hooks: initialHooks, ...inputSettings }) => {
        * have an effect.
        * It can typically be used to hide a loading indicator.
        */
-      loadStatus$: context.$.manifest$.pipe(map$1((manifest) => manifest ? "ready" : "idle")),
+      loadStatus$: context.manifest$.pipe(map$1((manifest) => manifest ? "ready" : "idle")),
       /**
        * Dispatched when a change in selection happens
        */
       selection$: selectionSubject$.asObservable(),
-      viewportState$: viewportNavigator.$.state$,
-      layout$: spine.$.layout$,
-      itemsBeforeDestroy$: spine.$.itemsBeforeDestroy$,
-      itemIsReady$: spineItemManager.$.itemIsReady$,
       destroy$
-    },
-    __debug: {
-      pagination,
-      context,
-      spineItemManager
     }
   };
   return reader;
@@ -6069,19 +5870,6 @@ const createWrapperElement = (containerElement) => {
   element.className = `${HTML_PREFIX$1}-reader`;
   return element;
 };
-const createIframeEventBridgeElement = (containerElement) => {
-  const iframeEventBridgeElement = containerElement.ownerDocument.createElement(`div`);
-  iframeEventBridgeElement.id = IFRAME_EVENT_BRIDGE_ELEMENT_ID;
-  iframeEventBridgeElement.style.cssText = `
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: -1;
-  `;
-  return iframeEventBridgeElement;
-};
 const utilsEnhancer = (next) => (options) => {
   const reader = next(options);
   const isOrIsWithinValidLink = (target) => {
@@ -6206,15 +5994,14 @@ const createResourcesManager = (context) => {
     var _a, _b;
     if (typeof itemIndexOrId === `string` || typeof itemIndexOrId === `object`) {
       const id = typeof itemIndexOrId === `object` ? itemIndexOrId.id : void 0;
-      return (_a = context.getManifest()) == null ? void 0 : _a.spineItems.find((entry) => entry.id === id);
+      return (_a = context.manifest) == null ? void 0 : _a.spineItems.find((entry) => entry.id === id);
     } else {
-      return (_b = context.getManifest()) == null ? void 0 : _b.spineItems[itemIndexOrId];
+      return (_b = context.manifest) == null ? void 0 : _b.spineItems[itemIndexOrId];
     }
   };
   const get = async (itemIndexOrId, fetchResource) => {
     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) {
@@ -6230,8 +6017,7 @@ const createResourcesManager = (context) => {
   cache$.asObservable().pipe(
     mergeMap(({ id, data }) => {
       const item = retrieveItem(id);
-      if (!item)
-        return EMPTY;
+      if (!item) return EMPTY;
       return from(forkJoin([openDatabase(`prose-reader`), from(data.blob())])).pipe(
         switchMap$1(([db, blob]) => {
           return from(db.put(`${uniqueID}_${item.id}`, blob));
@@ -6242,9 +6028,9 @@ const createResourcesManager = (context) => {
         })
       );
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
-  const onLoad$ = context.$.manifest$.pipe(
+  const onLoad$ = context.manifest$.pipe(
     tap(() => {
       uniqueID = Date.now().toString();
     })
@@ -6268,7 +6054,7 @@ const createResourcesManager = (context) => {
         })
       );
     }),
-    takeUntil$1(context.$.destroy$)
+    takeUntil$1(context.destroy$)
   ).subscribe();
   const destroy = () => {
     cache$.complete();
@@ -6281,14 +6067,6 @@ const createResourcesManager = (context) => {
 const resourcesEnhancer = (next) => (options) => {
   const reader = next(options);
   const resourceManager = createResourcesManager(reader.context);
-  const load = (manifest, loadOptions) => {
-    reader.load(manifest, {
-      ...loadOptions
-    });
-  };
-  reader.registerHook(`item.onGetResource`, (fetcher) => async (item) => {
-    return resourceManager.get(item, fetcher);
-  });
   const destroy = () => {
     resourceManager.destroy();
     reader.destroy();
@@ -6299,8 +6077,8 @@ const resourcesEnhancer = (next) => (options) => {
     //   ...reader.$,
     //   errors$: merge(reader.$.errors$, errorsSubject$.asObservable())
     // },
-    destroy,
-    load
+    destroy
+    // load,
   };
 };
 const mediaEnhancer = (next) => (options) => {
@@ -6351,7 +6129,7 @@ const mediaEnhancer = (next) => (options) => {
       threshold: 0.5
     }
   );
-  reader.registerHook(`item.onLoad`, ({ frame }) => {
+  reader.hookManager.register(`item.onLoad`, ({ frame, destroy: destroy2 }) => {
     var _a;
     frameObserver.observe(frame);
     const videos = (_a = frame.contentDocument) == null ? void 0 : _a.body.getElementsByTagName(`video`);
@@ -6359,10 +6137,10 @@ const mediaEnhancer = (next) => (options) => {
       elementObserver.observe(element);
       return () => elementObserver.unobserve(element);
     });
-    return () => {
+    destroy2(() => {
       frameObserver.unobserve(frame);
       unobserveElements.forEach((unobserve) => unobserve());
-    };
+    });
   });
   const destroy = () => {
     frameObserver.disconnect();
@@ -6378,22 +6156,26 @@ const progressionEnhancer = (next) => (options) => {
   const reader = next(options);
   const getPercentageEstimate = (context, currentSpineIndex, numberOfPages, pageIndex, currentPosition, currentItem) => {
     var _a, _b, _c, _d, _e, _f;
-    const isGloballyPrePaginated = ((_a = context.getManifest()) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
-    const readingOrderLength = ((_b = context.getManifest()) == null ? void 0 : _b.spineItems.length) || 0;
-    const estimateBeforeThisItem = ((_c = context.getManifest()) == null ? void 0 : _c.spineItems.slice(0, currentSpineIndex).reduce((acc, item) => acc + item.progressionWeight, 0)) || 0;
-    const currentItemWeight = ((_e = (_d = context.getManifest()) == null ? void 0 : _d.spineItems[currentSpineIndex]) == null ? void 0 : _e.progressionWeight) || 0;
+    const isGloballyPrePaginated = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === `pre-paginated`;
+    const readingOrderLength = ((_b = context.manifest) == null ? void 0 : _b.spineItems.length) || 0;
+    const estimateBeforeThisItem = ((_c = context.manifest) == null ? void 0 : _c.spineItems.slice(0, currentSpineIndex).reduce((acc, item) => acc + item.progressionWeight, 0)) || 0;
+    const currentItemWeight = ((_e = (_d = context.manifest) == null ? void 0 : _d.spineItems[currentSpineIndex]) == null ? void 0 : _e.progressionWeight) || 0;
     let progressWithinThisItem = (pageIndex + 1) * (currentItemWeight / numberOfPages);
     if (!isGloballyPrePaginated && currentItem.item.renditionLayout === `reflowable` && !currentItem.isReady()) {
       progressWithinThisItem = 0;
     }
     let totalProgress = estimateBeforeThisItem + progressWithinThisItem;
-    if (((_f = context.getManifest()) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
+    if (((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
       if (currentItem.isReady()) {
         progressWithinThisItem = getScrollPercentageWithinItem(context, currentPosition, currentItem);
       } else {
         progressWithinThisItem = 0;
       }
-      totalProgress = getTotalProgressFromPercentages(estimateBeforeThisItem, currentItemWeight, progressWithinThisItem);
+      totalProgress = getTotalProgressFromPercentages(
+        estimateBeforeThisItem,
+        currentItemWeight,
+        progressWithinThisItem
+      );
     }
     if (currentSpineIndex === readingOrderLength - 1 && pageIndex === numberOfPages - 1 && totalProgress > 0.99) {
       return 1;
@@ -6405,11 +6187,11 @@ const progressionEnhancer = (next) => (options) => {
   };
   const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
     const { height, width } = currentItem.getElementDimensions();
-    const { top, left } = reader.getAbsolutePositionOf(currentItem);
-    if (reader.settings.getSettings().computedPageTurnDirection === `vertical`) {
-      return Math.max(0, Math.min(1, (currentPosition.y - top + context.getVisibleAreaRect().height) / height));
+    const { top, left } = reader.spineItemManager.getAbsolutePositionOf(currentItem);
+    if (reader.settings.settings.computedPageTurnDirection === `vertical`) {
+      return Math.max(0, Math.min(1, (currentPosition.y - top + context.state.visibleAreaRect.height) / height));
     } else {
-      return Math.max(0, Math.min(1, (currentPosition.x - left + context.getVisibleAreaRect().width) / width));
+      return Math.max(0, Math.min(1, (currentPosition.x - left + context.state.visibleAreaRect.width) / width));
     }
   };
   return {
@@ -6431,67 +6213,58 @@ const accessibilityEnhancer = (next) => (options) => {
       }
     });
   }, {});
-  reader.registerHook(`item.onLoad`, ({ addStyle, frame }) => {
+  reader.hookManager.register(`item.onLoad`, ({ itemId, frame, destroy }) => {
     var _a;
-    addStyle(
-      `prose-reader-accessibility`,
+    const item = reader.spineItemManager.get(itemId);
+    if (!item) return;
+    item.manipulateSpineItem(({ addStyle }) => {
+      addStyle(
+        `prose-reader-accessibility`,
+        `
+        :focus-visible {
+          ${/*
+          Some epubs remove the outline, this is not good practice since it reduce accessibility.
+          We will try to restore it by force.
+        */
+        ``}
+          outline: -webkit-focus-ring-color auto 1px;
+        }
       `
-      :focus-visible {
-        ${/*
-        Some epubs remove the outline, this is not good practice since it reduce accessibility.
-        We will try to restore it by force.
-      */
-      ``}
-        outline: -webkit-focus-ring-color auto 1px;
-      }
-    `
-    );
+      );
+      return false;
+    });
     const links = (_a = frame.contentDocument) == null ? void 0 : _a.body.querySelectorAll(`a`);
     links == null ? void 0 : links.forEach((link) => {
       observer.observe(link);
     });
-    return () => {
+    destroy(() => {
       links == null ? void 0 : links.forEach((link) => {
         observer.unobserve(link);
       });
-    };
+    });
   });
   return {
     ...reader
   };
 };
 const IS_SAFARI = navigator.userAgent.indexOf(``) > -1 && navigator.userAgent.indexOf(`Chrome`) <= -1;
-const webkitEnhancer = (next) => (options) => {
-  const transformFlickerFixHooks = [
-    {
-      name: `viewportNavigator.onBeforeContainerCreated`,
-      fn: (element) => {
-        element.style.cssText = `
+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`;
@@ -6512,9 +6285,9 @@ const loadingEnhancer = (next) => (options) => {
       };
     }, {})
   );
-  const updateEntriesLayout$ = (entries) => combineLatest([reader.$.layout$, reader.theme.$.theme$]).pipe(
+  const updateEntriesLayout$ = (entries) => combineLatest([reader.spine.$.layout$, reader.theme.$.theme$]).pipe(
     map$1(([, theme]) => ({
-      width: reader.context.getVisibleAreaRect().width,
+      width: reader.context.state.visibleAreaRect.width,
       theme
     })),
     distinctUntilChanged(isShallowEqual),
@@ -6525,22 +6298,22 @@ const loadingEnhancer = (next) => (options) => {
       });
     })
   );
-  const updateEntriesVisibility$ = (entries) => reader.$.itemIsReady$.pipe(
+  const updateEntriesVisibility$ = (entries) => reader.spineItemManager.$.itemIsReady$.pipe(
     tap(({ item, isReady }) => {
       var _a;
       (_a = entries[item.id]) == null ? void 0 : _a.style.setProperty(`visibility`, isReady ? `hidden` : `visible`);
     })
   );
-  const destroyEntries$ = (entries) => reader.$.itemsBeforeDestroy$.pipe(
+  const destroyEntries$ = (entries) => reader.spine.$.itemsBeforeDestroy$.pipe(
     map$1(() => {
       Object.values(entries).forEach((element) => element.remove());
       return {};
     })
   );
-  const items$ = reader.spineItems$.pipe(
+  const items$ = reader.spine.$.spineItems$.pipe(
     switchMap$1((items) => createEntries$(items)),
     shareReplay(1),
-    takeUntil$1(reader.context.$.destroy$)
+    takeUntil$1(reader.context.destroy$)
   );
   items$.pipe(
     switchMap$1((entries) => merge(of(entries), destroyEntries$(entries))),
@@ -6562,7 +6335,7 @@ const createLoadingElementContainer = (containerElement, context) => {
   loadingElement.style.cssText = `
     height: 100%;
     width: 100%;
-    max-width: ${context.getVisibleAreaRect().width}px;
+    max-width: ${context.state.visibleAreaRect.width}px;
     text-align: center;
     display: flex;
     justify-content: center;
@@ -6576,7 +6349,10 @@ const createLoadingElementContainer = (containerElement, context) => {
   `;
   return loadingElement;
 };
-const defaultLoadingElementCreate = ({ container, item }) => {
+const defaultLoadingElementCreate = ({
+  container,
+  item
+}) => {
   const logoElement = container.ownerDocument.createElement(`div`);
   logoElement.innerText = `prose`;
   logoElement.style.cssText = `
@@ -6602,6 +6378,152 @@ const publicApiEnhancer = (next) => {
     return reader;
   };
 };
+const createNormalizeEventForViewport = ({
+  iframeEventBridgeElement$,
+  locator
+}) => {
+  const normalizeEventForViewport = (event) => {
+    var _a;
+    const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue();
+    const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event);
+    const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
+    if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame) return event;
+    const spineItem = locator.getSpineItemFromIframe(originalFrame);
+    if (!spineItem) return event;
+    if (isPointerEvent(event)) {
+      const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+      const newEvent = new PointerEvent(event.type, {
+        ...event,
+        pointerId: event.pointerId,
+        clientX,
+        clientY
+      });
+      Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+      return newEvent;
+    }
+    if (isMouseEvent(event)) {
+      const { clientX, clientY } = spineItem.translateFramePositionIntoPage(event);
+      const newEvent = new MouseEvent(event.type, {
+        ...event,
+        clientX,
+        clientY
+      });
+      Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+      return newEvent;
+    }
+    if (isTouchEvent(event)) {
+      const touches = Array.from(event.touches).map((touch) => {
+        const { clientX, clientY } = spineItem.translateFramePositionIntoPage(touch);
+        return new Touch({
+          identifier: touch.identifier,
+          target: touch.target,
+          clientX,
+          clientY
+        });
+      });
+      const newEvent = new TouchEvent(event.type, {
+        touches,
+        changedTouches: touches,
+        targetTouches: touches
+      });
+      Object.defineProperty(newEvent, `target`, { value: iframeOriginalEvent.target, enumerable: true });
+      return newEvent;
+    }
+    return event;
+  };
+  return normalizeEventForViewport;
+};
+const IFRAME_EVENT_BRIDGE_ELEMENT_ID = `proseReaderIframeEventBridgeElement`;
+const createIframeEventBridgeElement = (container) => {
+  const iframeEventBridgeElement = container.ownerDocument.createElement(`div`);
+  iframeEventBridgeElement.id = IFRAME_EVENT_BRIDGE_ELEMENT_ID;
+  iframeEventBridgeElement.style.cssText = `
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    `;
+  return iframeEventBridgeElement;
+};
+const pointerEvents = [
+  `pointercancel`,
+  `pointerdown`,
+  `pointerenter`,
+  `pointerleave`,
+  `pointermove`,
+  `pointerout`,
+  `pointerover`,
+  `pointerup`,
+  `touchstart`,
+  `touchend`
+];
+const mouseEvents = [
+  `click`,
+  `mousedown`,
+  `mouseup`,
+  `mouseenter`,
+  `mouseleave`,
+  `mousemove`,
+  `mouseout`,
+  `mouseover`
+];
+const passthroughEvents = [...pointerEvents, ...mouseEvents];
+const eventsEnhancer = (next) => (options) => {
+  const iframeEventBridgeElement$ = new BehaviorSubject(void 0);
+  const reader = next(options);
+  reader.hookManager.register(`item.onLoad`, ({ destroy, frame, itemId }) => {
+    const item = reader.spineItemManager.get(itemId);
+    if (!item) return;
+    const unregister = passthroughEvents.map((event) => {
+      var _a;
+      const listener = (e) => {
+        var _a2;
+        let convertedEvent = e;
+        if (isPointerEvent(e)) {
+          convertedEvent = new PointerEvent(e.type, e);
+        }
+        if (isMouseEvent(e)) {
+          convertedEvent = new MouseEvent(e.type, e);
+        }
+        if (convertedEvent !== e) {
+          attachOriginalFrameEventToDocumentEvent(convertedEvent, e);
+          (_a2 = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a2.dispatchEvent(convertedEvent);
+        }
+      };
+      (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(event, listener);
+      return () => {
+        var _a2;
+        (_a2 = frame.contentDocument) == null ? void 0 : _a2.removeEventListener(event, listener);
+      };
+    });
+    item.selectionTracker.track(frame);
+    item.fingerTracker.track(frame);
+    destroy(() => {
+      unregister.forEach((cb) => cb());
+    });
+  });
+  reader.element$.pipe(
+    tap$1((wrapper) => {
+      var _a;
+      const iframeEventBridgeElement = createIframeEventBridgeElement(wrapper);
+      wrapper.appendChild(iframeEventBridgeElement);
+      (_a = iframeEventBridgeElement$.getValue()) == null ? void 0 : _a.remove();
+      iframeEventBridgeElement$.next(iframeEventBridgeElement);
+    }),
+    takeUntil(reader.$.destroy$)
+  ).subscribe();
+  return {
+    ...reader,
+    events: {
+      normalizeEventForViewport: createNormalizeEventForViewport({
+        iframeEventBridgeElement$,
+        locator: reader.spine.locator
+      })
+    }
+  };
+};
 const createReaderWithEnhancers = (
   //__
   publicApiEnhancer(
@@ -6621,8 +6543,10 @@ const createReaderWithEnhancers = (
                               hotkeysEnhancer(
                                 paginationEnhancer(
                                   progressionEnhancer(
-                                    // __
-                                    createReader
+                                    eventsEnhancer(
+                                      // __
+                                      createReader
+                                    )
                                   )
                                 )
                               )
@@ -6642,6 +6566,7 @@ const createReaderWithEnhancers = (
   )
 );
 export {
+  HookManager,
   Report,
   createReaderWithEnhancers as createReader,
   groupBy,