@prose-reader/core 1.117.0 → 1.118.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { takeUntil, Subject, combineLatest, map as map$1, switchMap, merge, EMPTY, fromEvent, withLatestFrom, NEVER, Observable, of, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, throttleTime, finalize, startWith as startWith$1, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, shareReplay as shareReplay$1, ReplaySubject, filter as filter$1, share, mergeMap, delay, identity, timer, skip as skip$1, exhaustMap, first as first$1, take as take$1, from, catchError, forkJoin } from "rxjs";
-import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, debounceTime, skip, withLatestFrom as withLatestFrom$1, exhaustMap as exhaustMap$1, ignoreElements, endWith, defaultIfEmpty, share as share$1, mergeMap as mergeMap$1, catchError as catchError$1 } from "rxjs/operators";
-import { shallowMergeIfDefined, isShallowEqual, parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
+import { takeUntil, Subject, combineLatest, map as map$1, switchMap, merge, EMPTY, fromEvent, withLatestFrom, NEVER, Observable, of, scheduled, animationFrameScheduler, take as take$1, from, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, throttleTime, finalize, startWith as startWith$1, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, shareReplay as shareReplay$1, ReplaySubject, filter as filter$1, share, mergeMap, delay, identity, timer, skip as skip$1, exhaustMap, first as first$1, endWith, lastValueFrom, forkJoin, catchError as catchError$1 } from "rxjs";
+import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, debounceTime, skip, withLatestFrom as withLatestFrom$1, share as share$1, mergeMap as mergeMap$1, catchError } from "rxjs/operators";
+import { shallowMergeIfDefined, isShallowEqual, detectMimeTypeFromName, parseContentType } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
@@ -13,9 +13,11 @@ const chromeEnhancer = (next) => (options) => {
     };
     containerElement.addEventListener(`scroll`, onScroll);
   });
-  reader.hookManager.register(`item.onLoad`, ({ frame }) => {
-    var _a;
-    (_a = frame.contentDocument) == null ? void 0 : _a.body.setAttribute(`tabindex`, `-1`);
+  reader.hookManager.register(`item.onDocumentLoad`, ({ layers }) => {
+    var _a, _b;
+    const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+    if (!(frame instanceof HTMLIFrameElement)) return;
+    (_b = frame.contentDocument) == null ? void 0 : _b.body.setAttribute(`tabindex`, `-1`);
   });
   return reader;
 };
@@ -142,21 +144,19 @@ const fontsEnhancer = (next) => (options) => {
   `;
   const applyChangeToSpineItems = (requireLayout) => {
     reader.spineItemsManager.items.forEach((item) => {
-      var _a, _b, _c, _d;
+      var _a;
       if (item.item.renditionLayout !== `pre-paginated`) {
-        (_b = (_a = item.frame).removeStyle) == null ? void 0 : _b.call(_a, `prose-reader-fonts`);
-        (_d = (_c = item.frame).addStyle) == null ? void 0 : _d.call(_c, `prose-reader-fonts`, getStyle());
+        (_a = item.upsertCSS) == null ? void 0 : _a.call(item, `prose-reader-fonts`, getStyle());
       }
     });
     if (requireLayout) {
       reader.layout();
     }
   };
-  reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+  reader.hookManager.register(`item.onDocumentLoad`, ({ itemId }) => {
     const item = reader.spineItemsManager.get(itemId);
     if ((item == null ? void 0 : item.item.renditionLayout) !== `pre-paginated`) {
-      item == null ? void 0 : item.frame.removeStyle(`prose-reader-fonts`);
-      item == null ? void 0 : item.frame.addStyle(`prose-reader-fonts`, getStyle());
+      item == null ? void 0 : item.upsertCSS(`prose-reader-fonts`, getStyle());
     }
   });
   const shouldRequireLayout = (source) => source.pipe(
@@ -211,10 +211,12 @@ const hotkeysEnhancer = (next) => (options) => {
     switchMap(
       (spineItems) => merge(
         ...spineItems.map(
-          (item) => item.$.loaded$.pipe(
-            switchMap(
-              (iframe) => (iframe == null ? void 0 : iframe.contentDocument) ? navigateOnKey(iframe.contentDocument) : EMPTY
-            )
+          (item) => item.loaded$.pipe(
+            switchMap(() => {
+              var _a;
+              const element = (_a = item.renderer.layers[0]) == null ? void 0 : _a.element;
+              return element instanceof HTMLIFrameElement && (element == null ? void 0 : element.contentDocument) ? navigateOnKey(element.contentDocument) : EMPTY;
+            })
           )
         )
       )
@@ -312,19 +314,94 @@ const waitForSwitch = (waitForStream) => (stream) => stream.pipe(
     )
   )
 );
+const getAttributeValueFromString = (string, key) => {
+  const regExp = new RegExp(key + `\\s*=\\s*([0-9.]+)`, `i`);
+  const match = string.match(regExp) || [];
+  const firstMatch = match[1] || `0`;
+  return match && parseFloat(firstMatch) || 0;
+};
+const injectCSS = (frameElement, id, style, prepend) => {
+  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
+    const userStyle = document.createElement(`style`);
+    userStyle.id = id;
+    userStyle.innerHTML = style;
+    if (prepend) {
+      frameElement.contentDocument.head.prepend(userStyle);
+    } else {
+      frameElement.contentDocument.head.appendChild(userStyle);
+    }
+  }
+};
+const removeCSS = (frameElement, id) => {
+  if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
+    const styleElement = frameElement.contentDocument.getElementById(id);
+    if (styleElement) {
+      styleElement.remove();
+    }
+  }
+};
+const upsertCSS = (frameElement, id, style, prepend) => {
+  if (!frameElement) return;
+  removeCSS(frameElement, id);
+  injectCSS(frameElement, id, style, prepend);
+};
+const getFrameViewportInfo = (frame) => {
+  if (frame && (frame == null ? void 0 : frame.contentDocument)) {
+    const doc = frame.contentDocument;
+    const viewportMetaElement = doc.querySelector(`meta[name='viewport']`);
+    if (viewportMetaElement) {
+      const viewportContent = viewportMetaElement.getAttribute(`content`);
+      if (viewportContent) {
+        const width = getAttributeValueFromString(viewportContent, `width`);
+        const height = getAttributeValueFromString(viewportContent, `height`);
+        if (width > 0 && height > 0) {
+          return {
+            hasViewport: true,
+            width,
+            height
+          };
+        } else {
+          return { hasViewport: true };
+        }
+      }
+    }
+  }
+  return { hasViewport: false };
+};
+const waitForFrameLoad = (stream) => stream.pipe(
+  switchMap(
+    (frame) => fromEvent(frame, `load`).pipe(
+      take$1(1),
+      map$1(() => frame)
+    )
+  )
+);
+const waitForFrameReady = (stream) => stream.pipe(
+  switchMap(
+    (frame) => {
+      var _a;
+      return from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || of(void 0)).pipe(
+        map$1(() => frame)
+      );
+    }
+  )
+);
 const fixReflowable = (reader) => {
   reader.hookManager.register(
     `item.onAfterLayout`,
     ({ item, blankPagePosition, minimumWidth }) => {
+      var _a, _b;
       const spineItem = reader.spineItemsManager.get(item.id);
-      if (!((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable`)) return;
-      const { viewportDimensions } = (spineItem == null ? void 0 : spineItem.getViewPortInformation()) ?? {};
+      const element = (_a = spineItem == null ? void 0 : spineItem.renderer.layers[0]) == null ? void 0 : _a.element;
+      if (!((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable`) || !(element instanceof HTMLIFrameElement))
+        return;
+      const { hasViewport } = getFrameViewportInfo(element);
       const { width: pageWidth } = reader.context.getPageSize();
-      const frameElement = spineItem == null ? void 0 : spineItem.frame.element;
-      if (viewportDimensions) {
+      const frameElement = (_b = spineItem == null ? void 0 : spineItem.renderer.layers[0]) == null ? void 0 : _b.element;
+      if (hasViewport) {
         const spineManagerWantAFullWidthItem = pageWidth < minimumWidth;
         const noBlankPageAsked = blankPagePosition === `none`;
-        if (noBlankPageAsked && spineManagerWantAFullWidthItem) {
+        if (noBlankPageAsked && spineManagerWantAFullWidthItem && frameElement instanceof HTMLIFrameElement) {
           frameElement == null ? void 0 : frameElement.style.setProperty(
             `left`,
             reader.context.isRTL() ? `75%` : `25%`
@@ -378,57 +455,77 @@ const layoutEnhancer = (next) => (options) => {
   reader.hookManager.register(`onViewportOffsetAdjust`, () => {
     let hasRedrawn = false;
     reader.spineItemsManager.items.forEach((item) => {
-      const frame = item.frame.element;
+      var _a;
+      const frame = (_a = item.renderer.layers[0]) == null ? void 0 : _a.element;
       if (!hasRedrawn && frame) {
         void frame.getBoundingClientRect().left;
         hasRedrawn = true;
       }
     });
   });
-  reader.hookManager.register(
-    `item.onLayoutBeforeMeasurement`,
-    ({ itemIndex, minimumWidth, isImageType }) => {
-      const item = reader.spineItemsManager.get(itemIndex);
-      const frame = item == null ? void 0 : item.frame;
-      const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsManager.values;
-      const pageSize = reader.context.getPageSize();
-      if ((item == null ? void 0 : item.item.renditionLayout) === `reflowable` && (frame == null ? void 0 : frame.isReady) && !isImageType() && !frame.getViewportDimensions()) {
-        let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
-        const columnHeight = pageSize.height - pageVerticalMargin2 * 2;
-        let width = pageSize.width - pageHorizontalMargin2 * 2;
-        let columnGap = pageHorizontalMargin2 * 2;
-        if (frame.isUsingVerticalWriting()) {
-          width = minimumWidth - pageHorizontalMargin2 * 2;
-          columnWidth = columnHeight;
-          columnGap = pageVerticalMargin2 * 2;
-        }
-        frame == null ? void 0 : frame.removeStyle(`prose-layout-enhancer-css`);
-        frame == null ? void 0 : frame.addStyle(
-          `prose-layout-enhancer-css`,
-          `
-          body {
-            width: ${width}px !important;
-            margin: ${pageVerticalMargin2}px ${pageHorizontalMargin2}px !important;
-            column-gap: ${columnGap}px !important;
-            column-width: ${columnWidth}px !important;
-            height: ${columnHeight}px !important;
-          }
-          img, video, audio, object, svg {
-            max-width: ${columnWidth}px !important;
-            max-height: ${columnHeight}px !important;
-          }
-          table {
-            max-width: ${columnWidth}px !important;
-          }
-          td {
-            max-width: ${columnWidth}px;
-          }
-        `
-        );
+  reader.hookManager.register(`item.onBeforeLayout`, ({ item }) => {
+    const spineItem = reader.spineItemsManager.get(item.id);
+    const mimeType = item.mediaType ?? detectMimeTypeFromName(item.href);
+    const isImageType = !!(mimeType == null ? void 0 : mimeType.startsWith(`image/`));
+    const { pageHorizontalMargin: pageHorizontalMargin2 = 0, pageVerticalMargin: pageVerticalMargin2 = 0 } = settingsManager.values;
+    const pageSize = reader.context.getPageSize();
+    if ((spineItem == null ? void 0 : spineItem.item.renditionLayout) === `reflowable` && !isImageType) {
+      let columnWidth = pageSize.width - pageHorizontalMargin2 * 2;
+      const columnHeight = pageSize.height - pageVerticalMargin2 * 2;
+      let width = pageSize.width - pageHorizontalMargin2 * 2;
+      let columnGap = pageHorizontalMargin2 * 2;
+      if (spineItem.isUsingVerticalWriting()) {
+        width = pageSize.width - pageHorizontalMargin2 * 2;
+        columnWidth = columnHeight;
+        columnGap = pageVerticalMargin2 * 2;
       }
+      spineItem == null ? void 0 : spineItem.upsertCSS(
+        `prose-layout-enhancer-css`,
+        `
+        body {
+          width: ${width}px !important;
+          margin: ${pageVerticalMargin2}px ${pageHorizontalMargin2}px !important;
+          column-gap: ${columnGap}px !important;
+          column-width: ${columnWidth}px !important;
+          height: ${columnHeight}px !important;
+        }
+        img, video, audio, object, svg {
+          max-width: ${columnWidth}px !important;
+          max-height: ${columnHeight}px !important;
+        }
+        table {
+          max-width: ${columnWidth}px !important;
+        }
+        td {
+          max-width: ${columnWidth}px;
+        }
+      `
+      );
     }
-  );
+  });
   fixReflowable(reader);
+  reader.hookManager.register(`item.onDocumentCreated`, ({ layers }) => {
+    layers.forEach(({ element }) => {
+      element.style.opacity = `0`;
+      element.style.transition = `opacity 300ms`;
+    });
+  });
+  reader.hookManager.register(`item.onBeforeLayout`, ({ item }) => {
+    const spineItem = reader.spineItemsManager.get(item.id);
+    spineItem == null ? void 0 : spineItem.renderer.layers.forEach(({ element }) => {
+      if (reader.settings.values.computedPageTurnMode !== `scrollable`) {
+        element.setAttribute(`tab-index`, `0`);
+      }
+    });
+  });
+  reader.hookManager.register(`item.onAfterLayout`, ({ item }) => {
+    const spineItem = reader.spineItemsManager.get(item.id);
+    if (spineItem == null ? void 0 : spineItem.isReady) {
+      spineItem == null ? void 0 : spineItem.renderer.layers.forEach(({ element }) => {
+        element.style.opacity = `1`;
+      });
+    }
+  });
   const observeContainerResize = (container) => new Observable((observer) => {
     const resizeObserver = new ResizeObserver(() => {
       observer.next();
@@ -573,7 +670,10 @@ const linksEnhancer = (next) => (options) => {
     }
     return false;
   };
-  reader.hookManager.register(`item.onLoad`, ({ frame }) => {
+  reader.hookManager.register(`item.onDocumentLoad`, ({ layers }) => {
+    var _a;
+    const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+    if (!(frame instanceof HTMLIFrameElement)) return;
     if (frame == null ? void 0 : frame.contentDocument) {
       Array.from(frame.contentDocument.querySelectorAll(`a`)).forEach(
         (element) => element.addEventListener(`click`, (e) => {
@@ -1404,16 +1504,14 @@ const themeEnhancer = (next) => (options) => {
   };
   const applyChangeToSpineItem = () => {
     reader.spineItemsManager.items.forEach((item) => {
-      var _a, _b, _c, _d;
-      (_b = (_a = item.frame).removeStyle) == null ? void 0 : _b.call(_a, `prose-reader-theme`);
-      (_d = (_c = item.frame).addStyle) == null ? void 0 : _d.call(_c, `prose-reader-theme`, getStyle());
+      var _a;
+      (_a = item.upsertCSS) == null ? void 0 : _a.call(item, `prose-reader-theme`, getStyle());
       applyChangeToSpineItemElement({ container: item.element });
     });
   };
-  reader.hookManager.register(`item.onLoad`, ({ itemId }) => {
+  reader.hookManager.register(`item.onDocumentLoad`, ({ itemId }) => {
     const item = reader.spineItemsManager.get(itemId);
-    item == null ? void 0 : item.frame.removeStyle(`prose-reader-theme`);
-    item == null ? void 0 : item.frame.addStyle(`prose-reader-theme`, getStyle());
+    item == null ? void 0 : item.upsertCSS(`prose-reader-theme`, getStyle());
   });
   reader.spineItemsManager.items$.pipe(
     tap(
@@ -2119,10 +2217,10 @@ const createSpineItemLocator = ({
     return void 0;
   };
   const getFirstNodeOrRangeAtPage = (pageIndex, spineItem) => {
-    var _a, _b;
+    var _a, _b, _c;
     const pageSize = context.getPageSize();
-    const frame = (_a = spineItem.frame) == null ? void 0 : _a.element;
-    if (((_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.document) && // very important because it is being used by next functions
+    const frame = (_b = (_a = spineItem.renderer) == null ? void 0 : _a.layers[0]) == null ? void 0 : _b.element;
+    if (frame instanceof HTMLIFrameElement && ((_c = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _c.document) && // very important because it is being used by next functions
     frame.contentWindow.document.body !== null) {
       const { x: left, y: top } = getSpineItemPositionFromPageIndex({
         pageIndex,
@@ -3335,22 +3433,25 @@ const resolveCfi = ({
   if (!spineItem) return void 0;
   const { cleanedCfi, offset } = extractProseMetadataFromCfi(cfi);
   const cfiHandler = new CfiHandler(cleanedCfi, {});
-  const doc = (_b = (_a = spineItem.frame.element) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
-  if (doc) {
-    try {
-      const { node, offset: resolvedOffset } = cfiHandler.resolve(doc, {});
-      return {
-        node,
-        offset: offset ?? resolvedOffset,
-        spineItemIndex,
-        spineItem
-      };
-    } catch (e) {
-      Report.error(e);
-      return {
-        spineItemIndex,
-        spineItem
-      };
+  const rendererElement = (_a = spineItem.renderer.layers[0]) == null ? void 0 : _a.element;
+  if (rendererElement instanceof HTMLIFrameElement) {
+    const doc = (_b = rendererElement.contentWindow) == null ? void 0 : _b.document;
+    if (doc) {
+      try {
+        const { node, offset: resolvedOffset } = cfiHandler.resolve(doc, {});
+        return {
+          node,
+          offset: offset ?? resolvedOffset,
+          spineItemIndex,
+          spineItem
+        };
+      } catch (e) {
+        Report.error(e);
+        return {
+          spineItemIndex,
+          spineItem
+        };
+      }
     }
   }
   return {
@@ -3551,7 +3652,8 @@ class ViewportNavigator extends DestroyableClass {
         if (settings.values.computedPageTurnMode === `scrollable`) {
           element.style.removeProperty(`transform`);
           element.style.removeProperty(`transition`);
-          element.style.overflow = `scroll`;
+          element.style.overflowY = `scroll`;
+          element.style.overflowX = `hidden`;
         } else {
           element.style.removeProperty(`overflow`);
           element.style.removeProperty(`overflowY`);
@@ -4703,8 +4805,9 @@ const createNavigator = ({
     getElement: () => element$.getValue()
   };
 };
-class SettingsManager3 {
+class SettingsManager3 extends DestroyableClass {
   constructor(initialSettings) {
+    super();
     const settingsWithDefaults = {
       ...this.getDefaultSettings(),
       ...initialSettings
@@ -4750,6 +4853,7 @@ class SettingsManager3 {
     return this._settings$;
   }
   destroy() {
+    super.destroy();
     this.outputSettingsUpdateSubject.complete();
   }
 }
@@ -4903,7 +5007,7 @@ class HookManager {
 const getItemAnchor = (spineItem) => `|[prose~anchor~${encodeURIComponent(spineItem.item.id)}]`;
 const getRootCfi = (spineItem) => {
   const itemAnchor = getItemAnchor(spineItem);
-  return `epubcfi(/0${itemAnchor}) `;
+  return `epubcfi(/0${itemAnchor})`;
 };
 const generateCfiForSpineItemPage = Report.measurePerformance(
   `getCfi`,
@@ -4918,16 +5022,16 @@ const generateCfiForSpineItemPage = Report.measurePerformance(
       pageIndex,
       spineItem
     );
-    const doc = (_b = (_a = spineItem.frame.element) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+    const rendererElement = (_a = spineItem.renderer.layers[0]) == null ? void 0 : _a.element;
     const itemAnchor = getItemAnchor(spineItem);
     const offset = `|[prose~offset~${(nodeOrRange == null ? void 0 : nodeOrRange.offset) || 0}]`;
-    if (nodeOrRange && doc) {
+    if (nodeOrRange && rendererElement instanceof HTMLIFrameElement && ((_b = rendererElement.contentWindow) == null ? void 0 : _b.document)) {
       const cfiString = CfiHandler.generate(
         nodeOrRange.node,
         0,
         `${itemAnchor}${offset}`
       );
-      return cfiString;
+      return cfiString.trim();
     }
     return getRootCfi(spineItem);
   }
@@ -5116,1679 +5220,368 @@ class SpineItemsManager extends DestroyableClass {
     this.orderedSpineItemsSubject.value.forEach((item) => item.destroy());
   }
 }
-const getAttributeValueFromString = (string, key) => {
-  const regExp = new RegExp(key + `\\s*=\\s*([0-9.]+)`, `i`);
-  const match = string.match(regExp) || [];
-  const firstMatch = match[1] || `0`;
-  return match && parseFloat(firstMatch) || 0;
-};
-const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
-  const image = new Image();
-  image.src = data;
-  image.onload = () => {
-    resolve({ height: image.naturalHeight, width: image.naturalWidth });
-  };
-  image.onerror = reject;
-});
-const createHtmlPageFromResource = async (resourceResponse, item) => {
-  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());
-    const { height, width } = await getIntrinsicDimensionsFromBase64Img(data);
-    return `
-      <html>
-        <head>
-          ${item.renditionLayout !== `reflowable` ? `<meta name="viewport" content="width=${width}, height=${height}">` : ``}
-        </head>
-        <body style="margin: 0px;" tab-index="-1;">
-          <img
-            src="${data}"
-            style="max-width: 100%;height:100%;object-fit:contain;"
-          >
-        </body>
-      </html>
-        `;
-  }
-  if ([`text/plain`].some((mime) => mime === contentType)) {
-    const data = await resourceResponse.text();
-    return `
-      <!DOCTYPE html>
-      <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en" lang="en">
-        <head>
-          <style>
-            pre {
-              white-space: pre;
-              white-space: pre-wrap;
-              word-wrap: break-word;
-            }
-          </style>
-        </head>
-        <body>
-          <pre>${data}</pre>
-        </body>
-      </html>
-    `;
-  }
-  const content = await resourceResponse.text();
-  return content;
-};
-const attachFrameSrc = ({
-  settings,
-  item
+const getSpineItemFromPosition = ({
+  position,
+  spineItemsManager,
+  spineLayout,
+  settings
 }) => {
-  const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
-  return (stream) => stream.pipe(
-    switchMap((frameElement) => {
-      const { fetchResource } = settings.values;
-      if (!fetchResource && item.href.startsWith(window.location.origin) && // we have an encoding and it's a valid html
-      (item.mediaType && [
-        `application/xhtml+xml`,
-        `application/xml`,
-        `text/html`,
-        `text/xml`
-      ].includes(item.mediaType) || // no encoding ? then try to detect html
-      !item.mediaType && ITEM_EXTENSION_VALID_FOR_FRAME_SRC.some(
-        (extension) => item.href.endsWith(extension)
-      ))) {
-        frameElement == null ? void 0 : frameElement.setAttribute(`src`, item.href);
-        return of(frameElement);
-      } else {
-        const fetchFn = fetchResource || (() => fetch(item.href));
-        return from(fetchFn(item)).pipe(
-          mergeMap((response) => getHtmlFromResource(response)),
-          tap$1((htmlDoc) => {
-            if (htmlDoc) {
-              const blob = new Blob([htmlDoc], { type: "text/html" });
-              const blobURL = URL.createObjectURL(blob);
-              frameElement == null ? void 0 : frameElement.setAttribute(`src`, blobURL);
-            }
-          }),
-          map$1(() => frameElement),
-          catchError((e) => {
-            Report.error(
-              `Error while trying to fetch or load resource for item ${item.id}`
-            );
-            console.error(e);
-            return of(frameElement);
-          })
-        );
-      }
-    })
-  );
+  const spineItem = spineItemsManager.items.find((item) => {
+    const { left, right, bottom, top } = spineLayout.getAbsolutePositionOf(item);
+    const isWithinXAxis = position.x >= left && position.x < right;
+    if (settings.values.computedPageTurnDirection === `horizontal`) {
+      return isWithinXAxis;
+    } else {
+      return isWithinXAxis && position.y >= top && position.y < bottom;
+    }
+  });
+  if (position.x === 0 && !spineItem) {
+    return spineItemsManager.items[0];
+  }
+  return spineItem;
 };
-const configureFrame = ({
-  settings,
-  item,
-  hookManager
+const isItemVisibleByThresholdForPosition = ({
+  itemHeight,
+  itemWidth,
+  visibleWidthOfItem,
+  visibleHeightOfItem,
+  threshold
 }) => {
-  return (stream) => stream.pipe(
-    // We don't need sandbox since we are actually already allowing too much to the iframe
-    // frame.setAttribute(`sandbox`, `allow-same-origin allow-scripts`)
-    mergeMap((frame) => {
-      var _a;
-      const body = (_a = frame.contentDocument) == null ? void 0 : _a.body;
-      if (!body) {
-        Report.error(`Something went wrong on iframe load ${item.id}`);
-        return EMPTY;
-      }
-      frame.setAttribute(`role`, `main`);
-      if ((frame == null ? void 0 : frame.contentDocument) && body) ;
-      if (settings.values.computedPageTurnMode !== `scrollable`) {
-        frame.setAttribute(`tab-index`, `0`);
-      }
-      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));
-    })
-  );
+  const visibleWidthRatioOfSpineItem = visibleWidthOfItem / itemWidth;
+  const visibleHeightRatioOfSpineItem = visibleHeightOfItem / itemHeight;
+  const isItemVisibleEnough = visibleWidthRatioOfSpineItem >= threshold && visibleHeightRatioOfSpineItem >= threshold;
+  return isItemVisibleEnough;
 };
-const createFrameElement = Report.measurePerformance(
-  `SpineItemFrame createFrame`,
-  Infinity,
-  () => {
-    const frame = document.createElement(`iframe`);
-    frame.frameBorder = `no`;
-    frame.tabIndex = 0;
-    frame.setAttribute(
-      `sandbox`,
-      `
-    allow-same-origin 
-    allow-scripts 
-    allow-top-navigation-to-custom-protocols
-  `
-    );
-    frame.scrolling = `no`;
-    frame.style.cssText = `
-    visibility: hidden;
-    overflow: hidden;
-    background-color: transparent;
-    border: 0px none transparent;
-    padding: 0px;
-    transition: opacity 300ms;
-    opacity: 0;
-  `;
-    return frame;
-  }
-);
-const waitForFrameLoad = (stream) => stream.pipe(
-  switchMap(
-    (frame) => fromEvent(frame, `load`).pipe(
-      take$1(1),
-      map$1(() => frame)
-    )
-  )
-);
-const loadFrame = ({
-  settings,
-  item,
-  hookManager,
-  element,
-  onFrameElement,
+const isItemVisibleOnScreenByThresholdForPosition = ({
+  visibleWidthOfItem,
+  visibleHeightOfItem,
+  threshold,
   context
 }) => {
-  const frameElement = createFrameElement();
-  return of(frameElement).pipe(
-    tap$1((frame) => {
-      element.appendChild(frame);
-      onFrameElement(frame);
-    }),
-    attachFrameSrc({ settings, item }),
-    waitForSwitch(context.bridgeEvent.viewportFree$),
-    waitForFrameLoad,
-    waitForSwitch(context.bridgeEvent.viewportFree$),
-    configureFrame({
-      item,
-      settings,
-      hookManager
-    })
-  );
+  const widthRatioOfSpaceTakenInScreen = visibleWidthOfItem / context.state.visibleAreaRect.width;
+  const heightRatioOfSpaceTakenInScreen = visibleHeightOfItem / context.state.visibleAreaRect.height;
+  const isItemVisibleEnoughOnScreen = heightRatioOfSpaceTakenInScreen >= threshold && widthRatioOfSpaceTakenInScreen >= threshold;
+  return isItemVisibleEnoughOnScreen;
 };
-const unloadFrame = ({
-  item,
-  hookManager,
-  frameElement,
+const getItemVisibilityForPosition = ({
+  itemPosition: {
+    bottom,
+    left,
+    right,
+    top,
+    width: itemWidth,
+    height: itemHeight
+  },
+  threshold,
+  viewportPosition,
+  restrictToScreen,
   context
 }) => {
-  return of(null).pipe(
-    waitForSwitch(context.bridgeEvent.viewportFree$),
-    tap$1(() => {
-      hookManager.destroy(`item.onLoad`, item.id);
-      frameElement == null ? void 0 : frameElement.remove();
-    })
+  const viewportLeft = viewportPosition.x;
+  const viewportRight = viewportPosition.x + (context.state.visibleAreaRect.width - 1);
+  const viewportTop = viewportPosition.y;
+  const viewportBottom = Math.max(
+    viewportPosition.y + (context.state.visibleAreaRect.height - 1),
+    0
+  );
+  const visibleWidthOfItem = Math.max(
+    0,
+    Math.min(right, viewportRight) - Math.max(left, viewportLeft)
   );
+  const visibleHeightOfItem = Math.max(
+    0,
+    Math.min(bottom, viewportBottom) - Math.max(top, viewportTop)
+  );
+  const itemIsOnTheOuterEdge = visibleWidthOfItem <= 0 || visibleHeightOfItem <= 0;
+  if (itemIsOnTheOuterEdge) return { visible: false };
+  const isItemVisibleEnoughOnScreen = isItemVisibleOnScreenByThresholdForPosition({
+    threshold,
+    visibleHeightOfItem,
+    visibleWidthOfItem,
+    context
+  });
+  if (restrictToScreen) {
+    return { visible: isItemVisibleEnoughOnScreen };
+  }
+  const isItemVisibleEnough = isItemVisibleByThresholdForPosition({
+    itemHeight,
+    itemWidth,
+    threshold,
+    visibleHeightOfItem,
+    visibleWidthOfItem
+  });
+  return {
+    visible: isItemVisibleEnough || isItemVisibleEnoughOnScreen
+  };
 };
-const waitForFrameReady = (stream) => stream.pipe(
-  switchMap(
-    (frame) => {
-      var _a;
-      return from(((_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.fonts.ready) || of(void 0));
-    }
-  )
-);
-const createLoader = ({
-  item,
-  parent,
+const getVisibleSpineItemsFromPosition = ({
+  position,
+  threshold,
+  restrictToScreen,
+  spineItemsManager,
   context,
   settings,
-  hookManager
+  spineLayout
 }) => {
-  const destroySubject$ = new Subject();
-  const stateSubject = new BehaviorSubject("idle");
-  const loadSubject = new Subject();
-  const unloadSubject = new Subject();
-  const frameElementSubject = new BehaviorSubject(void 0);
-  const unloadFrame$ = unloadSubject.pipe(
-    withLatestFrom$1(stateSubject),
-    filter(([, state]) => state !== "unloading" && state !== "idle"),
-    exhaustMap$1(
-      () => context.bridgeEvent.viewportFree$.pipe(
-        first(),
-        switchMap$1(
-          () => unloadFrame({
-            hookManager,
-            item,
-            frameElement: frameElementSubject.getValue(),
-            context
-          })
-        ),
-        tap(() => {
-          frameElementSubject.next(void 0);
-        }),
-        ignoreElements(),
-        startWith("loading"),
-        endWith("success"),
-        defaultIfEmpty("idle")
-      )
-    ),
-    startWith("idle"),
-    distinctUntilChanged(),
-    share$1()
-  );
-  const unloaded$ = unloadFrame$.pipe(filter((state) => state === "success"));
-  const unloading$ = unloadFrame$.pipe(filter((state) => state === "loading"));
-  const loadFrame$ = loadSubject.pipe(
-    exhaustMap$1(() => {
-      const preventFurtherLoad$ = NEVER;
-      return merge(
-        preventFurtherLoad$,
-        context.bridgeEvent.viewportFree$.pipe(
-          first(),
-          switchMap$1(
-            () => loadFrame({
-              element: parent,
-              hookManager,
-              item,
-              onFrameElement: (element) => {
-                frameElementSubject.next(element);
-              },
-              settings,
-              context
-            })
-          ),
-          map((frame) => ({ state: "success", frame })),
-          startWith({ state: "loading" }),
-          defaultIfEmpty({ state: "idle" })
-        )
-      ).pipe(takeUntil$1(unloaded$));
-    }),
-    startWith({ state: "idle" }),
-    share$1()
-  );
-  const loading$ = loadFrame$.pipe(filter(({ state }) => state === "loading"));
-  const loaded$ = loadFrame$.pipe(
-    filter((state) => state.state === "success"),
-    map(({ frame }) => frame)
-  );
-  const frameIsReady$ = loaded$.pipe(
-    switchMap$1(
-      (frame) => of(frame).pipe(waitForFrameReady, takeUntil$1(unloadSubject))
-    ),
-    share$1()
-  );
-  const ready$ = frameIsReady$;
-  const state$ = merge(
-    unloaded$.pipe(map(() => "idle")),
-    unloading$.pipe(map(() => "unloading")),
-    loaded$.pipe(map(() => "loaded")),
-    loading$.pipe(map(() => "loading")),
-    ready$.pipe(map(() => "ready"))
-  ).pipe(
-    startWith("idle"),
-    tap((state) => stateSubject.next(state)),
-    shareReplay(1)
+  const fallbackSpineItem = getSpineItemFromPosition({
+    position,
+    settings,
+    spineItemsManager,
+    spineLayout
+  }) || spineItemsManager.get(0);
+  const spineItemsVisible = spineItemsManager.items.reduce(
+    (acc, spineItem) => {
+      const itemPosition = spineLayout.getAbsolutePositionOf(spineItem);
+      const { visible } = getItemVisibilityForPosition({
+        itemPosition,
+        threshold,
+        viewportPosition: position,
+        restrictToScreen,
+        context
+      });
+      if (visible) {
+        return [...acc, spineItem];
+      }
+      return acc;
+    },
+    []
   );
-  const isReady$ = state$.pipe(map((state) => state === "ready"));
-  state$.pipe(takeUntil$1(destroySubject$)).subscribe();
+  const beginItem = spineItemsVisible[0] ?? fallbackSpineItem;
+  const endItem = spineItemsVisible[spineItemsVisible.length - 1] ?? beginItem;
+  if (!beginItem || !endItem) return void 0;
+  const beginItemIndex = spineItemsManager.getSpineItemIndex(beginItem);
+  const endItemIndex = spineItemsManager.getSpineItemIndex(endItem);
   return {
-    load: () => loadSubject.next(),
-    unload: () => unloadSubject.next(),
-    destroy: () => {
-      unloadSubject.next();
-      unloadSubject.complete();
-      loadSubject.complete();
-      frameElementSubject.complete();
-      destroySubject$.next();
-      destroySubject$.complete();
-      stateSubject.complete();
-    },
-    get state() {
-      return stateSubject.getValue();
-    },
-    get element() {
-      return frameElementSubject.getValue();
-    },
-    isReady$,
-    ready$,
-    loaded$,
-    unloaded$,
-    element$: frameElementSubject.asObservable()
+    beginIndex: beginItemIndex ?? 0,
+    endIndex: endItemIndex ?? 0
   };
 };
-class FrameItem extends DestroyableClass {
-  constructor(parent, item, context, settings, hookManager) {
-    super();
-    this.parent = parent;
-    this.item = item;
-    this.context = context;
-    this.settings = settings;
-    this.hookManager = hookManager;
-    this.getViewportDimensions = () => {
-      const frame = this.loader.element;
-      if (frame && (frame == null ? void 0 : frame.contentDocument)) {
-        const doc = frame.contentDocument;
-        const viewPortMeta = doc.querySelector(`meta[name='viewport']`);
-        if (viewPortMeta) {
-          const viewPortMetaInfos = viewPortMeta.getAttribute(`content`);
-          if (viewPortMetaInfos) {
-            const width = getAttributeValueFromString(viewPortMetaInfos, `width`);
-            const height = getAttributeValueFromString(
-              viewPortMetaInfos,
-              `height`
-            );
-            if (width > 0 && height > 0) {
-              return {
-                width,
-                height
-              };
-            } else {
-              return void 0;
-            }
-          }
-        }
-      }
-      return void 0;
-    };
-    this.getWritingMode = () => {
-      var _a;
-      return (_a = this.getComputedStyleAfterLoad()) == null ? void 0 : _a.writingMode;
-    };
-    this.isUsingVerticalWriting = () => {
-      var _a;
-      return !!((_a = this.getWritingMode()) == null ? void 0 : _a.startsWith(`vertical`));
-    };
-    this.getHtmlFromResource = (response) => {
-      return createHtmlPageFromResource(response, this.item);
-    };
-    this.staticLayout = (size) => {
-      const frame = this.loader.element;
-      if (frame) {
-        frame.style.width = `${size.width}px`;
-        frame.style.height = `${size.height}px`;
-        if (this.settings.values.computedPageTurnMode !== `scrollable`) {
-          frame.setAttribute(`tab-index`, `0`);
-        }
-      }
-    };
-    this.destroy = () => {
-      super.destroy();
-      this.loader.destroy();
-    };
-    this.loader = createLoader({
-      context,
-      hookManager,
-      item,
-      parent,
-      settings
-    });
-    this.contentLayoutChange$ = merge(
-      this.loader.unloaded$.pipe(map(() => ({ isFirstLayout: false }))),
-      this.ready$.pipe(map(() => ({ isFirstLayout: true })))
-    );
-  }
-  // @todo optimize
-  getComputedStyleAfterLoad() {
-    var _a, _b;
-    const frame = this.loader.element;
-    const body = (_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.body;
-    if (body) {
-      return (_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.getComputedStyle(body);
-    }
-  }
-  get element() {
-    return this.loader.element;
-  }
-  get unloaded$() {
-    return this.loader.unloaded$;
-  }
-  get loaded$() {
-    return this.loader.loaded$;
-  }
-  get ready$() {
-    return this.loader.ready$;
-  }
-  get isReady$() {
-    return this.loader.isReady$;
-  }
-  get isLoaded() {
-    return this.loader.state === "loaded" || this.loader.state === "ready";
-  }
-  get isReady() {
-    return this.loader.state === "ready";
-  }
-  load() {
-    this.loader.load();
-  }
-  unload() {
-    this.loader.unload();
-  }
-  addStyle(id, style, prepend) {
-    const frameElement = this.loader.element;
-    if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
-      const userStyle = document.createElement(`style`);
-      userStyle.id = id;
-      userStyle.innerHTML = style;
-      if (prepend) {
-        frameElement.contentDocument.head.prepend(userStyle);
-      } else {
-        frameElement.contentDocument.head.appendChild(userStyle);
-      }
-    }
-  }
-  removeStyle(id) {
-    const frameElement = this.loader.element;
-    if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
-      const styleElement = frameElement.contentDocument.getElementById(id);
-      if (styleElement) {
-        styleElement.remove();
-      }
-    }
-  }
-}
-const createFingerTracker = () => {
-  const fingerPositionInIframe = { x: void 0, y: void 0 };
-  const subject = new Subject();
-  let isMouseDown = false;
-  const track = (frame) => {
-    var _a, _b, _c;
-    fingerPositionInIframe.x = void 0;
-    fingerPositionInIframe.y = void 0;
-    (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(`mousedown`, (e) => {
-      isMouseDown = true;
-      fingerPositionInIframe.x = e.x;
-      fingerPositionInIframe.y = e.y;
-      subject.next({ event: `fingermove`, data: { x: e.x, y: e.y } });
-    });
-    (_b = frame.contentDocument) == null ? void 0 : _b.addEventListener(`mouseup`, () => {
-      isMouseDown = false;
-      fingerPositionInIframe.x = void 0;
-      fingerPositionInIframe.y = void 0;
-      subject.next({ event: `fingerout`, data: void 0 });
-    });
-    (_c = frame.contentDocument) == null ? void 0 : _c.addEventListener(`mousemove`, (e) => {
-      if (isMouseDown) {
-        subject.next({ event: `fingermove`, data: { x: e.x, y: e.y } });
-      }
-    });
-  };
+const getSpinePositionFromSpineItemPosition = ({
+  spineItemPosition,
+  itemLayout: { left, top }
+}) => {
   return {
-    track,
-    getFingerPositionInIframe() {
-      return fingerPositionInIframe.x === void 0 || fingerPositionInIframe.y === void 0 ? void 0 : fingerPositionInIframe;
-    },
-    destroy: () => {
-    },
-    $: subject.asObservable()
+    x: left + spineItemPosition.x,
+    y: top + spineItemPosition.y
   };
 };
-const createSelectionTracker = () => {
-  let isSelecting = false;
-  let frame;
-  const subject = new Subject();
-  const mouseUpEvents = [`mouseup`, `pointerup`];
-  const track = (frameToTrack) => {
-    var _a, _b;
-    frame = frameToTrack;
-    mouseUpEvents.forEach((eventName) => {
-      var _a2;
-      (_a2 = frameToTrack.contentWindow) == null ? void 0 : _a2.addEventListener(eventName, () => {
-        isSelecting = false;
+const getSpineInfoFromAbsolutePageIndex = ({
+  absolutePageIndex,
+  spineLayout,
+  spineItemsManager,
+  context,
+  settings
+}) => {
+  const items = spineItemsManager.items;
+  const { found, currentAbsolutePage } = items.reduce(
+    (acc, item) => {
+      if (acc.found) return acc;
+      const itemLayout = spineLayout.getAbsolutePositionOf(item);
+      const numberOfPages = getSpineItemNumberOfPages({
+        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+        itemHeight: itemLayout.height,
+        itemWidth: itemLayout.width,
+        context,
+        settings
       });
-    });
-    (_a = frameToTrack.contentDocument) == null ? void 0 : _a.addEventListener(`selectionchange`, () => {
-      var _a2;
-      subject.next({
-        event: `selectionchange`,
-        data: ((_a2 = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a2.getSelection()) || null
+      const possiblePageIndex = absolutePageIndex - acc.currentAbsolutePage;
+      const currentAbsolutePage2 = acc.currentAbsolutePage + numberOfPages;
+      if (possiblePageIndex <= numberOfPages - 1) {
+        return {
+          ...acc,
+          currentAbsolutePage: currentAbsolutePage2,
+          found: { item, pageIndex: possiblePageIndex }
+        };
+      }
+      return {
+        ...acc,
+        currentAbsolutePage: currentAbsolutePage2
+      };
+    },
+    { currentAbsolutePage: 0 }
+  );
+  if (found) {
+    return {
+      spineItem: found.item,
+      pageIndex: found.pageIndex,
+      itemIndex: spineItemsManager.getSpineItemIndex(found.item) ?? 0,
+      currentAbsolutePage
+    };
+  }
+  return void 0;
+};
+const getAbsolutePageIndexFromPageIndex = ({
+  pageIndex,
+  spineItemOrId,
+  spineLayout,
+  spineItemsManager,
+  context,
+  settings
+}) => {
+  const items = spineItemsManager.items;
+  const spineItem = spineItemsManager.get(spineItemOrId);
+  if (!spineItem) return void 0;
+  const { currentAbsolutePage } = items.reduce(
+    (acc, item) => {
+      if (acc.found) return acc;
+      const itemLayout = spineLayout.getAbsolutePositionOf(item);
+      const numberOfPages = getSpineItemNumberOfPages({
+        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+        itemHeight: itemLayout.height,
+        itemWidth: itemLayout.width,
+        context,
+        settings
       });
-    });
-    (_b = frameToTrack.contentWindow) == null ? void 0 : _b.addEventListener(`selectstart`, () => {
-      isSelecting = true;
-    });
-  };
-  const destroy = () => {
-  };
-  return {
-    track,
-    destroy,
-    isSelecting: () => isSelecting,
-    getSelection: () => {
-      var _a;
-      const selection = (_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.getSelection();
-      if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`)
-        return void 0;
-      return selection;
+      if (spineItem === item) {
+        if (pageIndex <= numberOfPages - 1) {
+          return {
+            currentAbsolutePage: acc.currentAbsolutePage + pageIndex,
+            found: true
+          };
+        }
+      }
+      return {
+        ...acc,
+        currentAbsolutePage: acc.currentAbsolutePage + numberOfPages
+      };
     },
-    $: subject.asObservable()
-  };
+    { currentAbsolutePage: 0, found: false }
+  );
+  return currentAbsolutePage;
 };
-const createCommonSpineItem = ({
-  item,
+const createSpineLocator = ({
+  spineItemsManager,
   context,
-  parentElement,
+  spineItemLocator,
   settings,
-  hookManager,
-  index
+  spineLayout
 }) => {
-  const destroySubject$ = new Subject();
-  const containerElement = createContainerElement(
-    parentElement,
-    item,
-    hookManager
-  );
-  const overlayElement = createOverlayElement(parentElement, item);
-  const fingerTracker = createFingerTracker();
-  const selectionTracker = createSelectionTracker();
-  const frameItem = new FrameItem(
-    containerElement,
-    item,
-    context,
-    settings,
-    hookManager
+  const getSpineItemPositionFromSpinePosition = Report.measurePerformance(
+    `getSpineItemPositionFromSpinePosition`,
+    10,
+    (position, spineItem) => {
+      const { left, top } = spineLayout.getAbsolutePositionOf(spineItem);
+      return {
+        /**
+         * when using spread the item could be on the right and therefore will be negative
+         * @example
+         * 400 (position = viewport), page of 200
+         * 400 - 600 = -200.
+         * However we can assume we are at 0, because we in fact can see the beginning of the item
+         */
+        x: Math.max(position.x - left, 0),
+        y: Math.max(position.y - top, 0)
+      };
+    },
+    { disable: true }
   );
-  containerElement.appendChild(overlayElement);
-  parentElement.appendChild(containerElement);
-  const getElementDimensions = () => {
-    const rect = containerElement.getBoundingClientRect();
-    const normalizedValues = {
-      ...rect,
-      // we want to round to first decimal because it's possible to have half pixel
-      // however browser engine can also gives back x.yyyy based on their precision
-      width: Math.round(rect.width * 10) / 10,
-      height: Math.round(rect.height * 10) / 10
-    };
-    return normalizedValues;
-  };
-  const isImageType = () => {
-    const mimeType = item.mediaType ?? detectMimeTypeFromName(item.href);
-    return !!(mimeType == null ? void 0 : mimeType.startsWith(`image/`));
-  };
-  const injectStyle = (cssText) => {
-    frameItem.removeStyle(`prose-reader-css`);
-    frameItem.addStyle(`prose-reader-css`, cssText);
-  };
-  const adjustPositionOfElement = ({
-    right,
-    left,
-    top
-  }) => {
-    if (right !== void 0) {
-      containerElement.style.right = `${right}px`;
-    } else {
-      containerElement.style.removeProperty(`right`);
-    }
-    if (left !== void 0) {
-      containerElement.style.left = `${left}px`;
-    } else {
-      containerElement.style.removeProperty(`left`);
-    }
-    if (top !== void 0) {
-      containerElement.style.top = `${top}px`;
-    } else {
-      containerElement.style.removeProperty(`top`);
-    }
-  };
-  const getViewPortInformation = () => {
-    const { width: pageWidth, height: pageHeight } = context.getPageSize();
-    const viewportDimensions = frameItem.getViewportDimensions();
-    const frameElement = frameItem.element;
-    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
-      );
-      return { computedScale, computedWidthScale, viewportDimensions };
-    }
-  };
-  const load = () => frameItem.load();
-  const unload = () => frameItem.unload();
-  const getBoundingRectOfElementFromSelector = (selector) => {
-    var _a, _b, _c, _d;
-    const frameElement = frameItem.element;
-    if (frameElement && selector) {
-      if (selector.startsWith(`#`)) {
-        return (_b = (_a = frameElement.contentDocument) == null ? void 0 : _a.getElementById(selector.replace(`#`, ``))) == null ? void 0 : _b.getBoundingClientRect();
-      }
-      return (_d = (_c = frameElement.contentDocument) == null ? void 0 : _c.querySelector(selector)) == null ? void 0 : _d.getBoundingClientRect();
-    }
+  const getSpinePositionFromSpineItem = (spineItem) => {
+    return getSpinePositionFromSpineItemPosition({
+      spineItemPosition: { x: 0, y: 0 },
+      itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
+    });
   };
-  const getDimensionsForPaginatedContent = () => {
-    const pageSize = context.getPageSize();
-    const pageWidth = pageSize.width;
-    const columnHeight = pageSize.height;
-    const columnWidth = pageWidth;
-    return { columnHeight, columnWidth };
+  const getSpineItemFromIframe = (iframe) => {
+    return spineItemsManager.items.find((item) => {
+      var _a;
+      return ((_a = item.renderer.layers[0]) == null ? void 0 : _a.element) === iframe;
+    });
   };
-  const getDimensionsForReflowableContent = (isUsingVerticalWriting, minimumWidth) => {
-    const pageSize = context.getPageSize();
-    const horizontalMargin = 0;
-    const verticalMargin = 0;
-    let columnWidth = pageSize.width - horizontalMargin * 2;
-    const columnHeight = pageSize.height - verticalMargin * 2;
-    let width = pageSize.width - horizontalMargin * 2;
-    if (isUsingVerticalWriting) {
-      width = minimumWidth - horizontalMargin * 2;
-      columnWidth = columnHeight;
+  const getSpineItemPageIndexFromNode = (node, offset, spineItemOrIndex) => {
+    if (typeof spineItemOrIndex === `number`) {
+      const spineItem = spineItemsManager.get(spineItemOrIndex);
+      return spineItem ? spineItemLocator.getSpineItemPageIndexFromNode(
+        node,
+        offset || 0,
+        spineItem
+      ) : void 0;
     }
-    return {
-      columnHeight,
-      columnWidth,
-      // horizontalMargin,
-      // verticalMargin,
-      width
-    };
+    return spineItemLocator.getSpineItemPageIndexFromNode(
+      node,
+      offset || 0,
+      spineItemOrIndex
+    );
   };
-  const layout = ({
-    height,
-    width,
-    blankPagePosition,
-    minimumWidth
+  const getVisiblePagesFromViewportPosition = ({
+    position,
+    threshold,
+    spineItem,
+    restrictToScreen
   }) => {
-    containerElement.style.width = `${width}px`;
-    containerElement.style.height = `${height}px`;
-    hookManager.execute(`item.onAfterLayout`, void 0, {
-      blankPagePosition,
-      item,
-      minimumWidth
+    const { height, width } = spineItem.getElementDimensions();
+    const numberOfPages = spineItemLocator.getSpineItemNumberOfPages({
+      isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
+      itemHeight: height,
+      itemWidth: width
     });
-  };
-  const translateFramePositionIntoPage = (position) => {
-    var _a, _b;
-    const { left = 0, top = 0 } = ((_a = frameItem.element) == 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;
+    const pages = Array.from(Array(numberOfPages)).map((_, index) => {
+      const spineItemPosition = spineItemLocator.getSpineItemPositionFromPageIndex({
+        pageIndex: index,
+        isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
+        itemLayout: spineItem.getElementDimensions()
+      });
+      const spinePosition = getSpinePositionFromSpineItemPosition({
+        spineItemPosition,
+        itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
+      });
+      return {
+        index,
+        absolutePosition: {
+          width: context.getPageSize().width,
+          height: context.getPageSize().height,
+          left: spinePosition.x,
+          top: spinePosition.y,
+          bottom: spinePosition.y + context.getPageSize().height,
+          right: spinePosition.x + context.getPageSize().width
+        }
+      };
+    });
+    const pagesVisible = pages.reduce(
+      (acc, { absolutePosition, index }) => {
+        const { visible } = getItemVisibilityForPosition({
+          context,
+          viewportPosition: position,
+          restrictToScreen,
+          threshold,
+          itemPosition: absolutePosition
+        });
+        if (visible) {
+          return [...acc, index];
+        }
+        return acc;
+      },
+      []
+    );
+    const beginPageIndex = pagesVisible[0];
+    const endPageIndex = pagesVisible[pagesVisible.length - 1] ?? beginPageIndex;
+    if (beginPageIndex === void 0 || endPageIndex === void 0)
+      return void 0;
     return {
-      clientX: adjustedX,
-      clientY: adjustedY
+      beginPageIndex,
+      endPageIndex
     };
   };
-  const getResource = async () => {
-    const fetchResource = settings.values.fetchResource;
-    const lastFetch = (_) => {
-      if (fetchResource) {
-        return fetchResource(item);
-      }
-      return fetch(item.href);
+  const isPositionWithinSpineItem = (position, spineItem) => {
+    const { bottom, left, right, top } = spineLayout.getAbsolutePositionOf(spineItem);
+    return position.x >= left && position.x <= right && position.y <= bottom && position.y >= top;
+  };
+  const getSafeSpineItemPositionFromUnsafeSpineItemPosition = (unsafePosition, spineItem) => {
+    const { height, width } = spineLayout.getAbsolutePositionOf(spineItem);
+    return {
+      x: Math.min(Math.max(0, unsafePosition.x), width),
+      y: Math.min(Math.max(0, unsafePosition.y), height)
     };
-    return await lastFetch();
   };
-  const executeOnLayoutBeforeMeasurementHook = (options) => hookManager.execute("item.onLayoutBeforeMeasurement", void 0, {
-    itemIndex: index,
-    isImageType,
-    ...options
-  });
-  const contentLayout$ = frameItem.contentLayoutChange$.pipe(
-    withLatestFrom$1(frameItem.isReady$),
-    map(([data, isReady]) => ({
-      isFirstLayout: data.isFirstLayout,
-      isReady
-    }))
-  );
   return {
-    item,
-    layout,
-    overlayElement,
-    adjustPositionOfElement,
-    getElementDimensions,
-    getHtmlFromResource: frameItem.getHtmlFromResource,
-    getResource,
-    translateFramePositionIntoPage,
-    injectStyle,
-    load,
-    unload,
-    frame: frameItem,
-    element: containerElement,
-    getBoundingRectOfElementFromSelector,
-    getViewPortInformation,
-    isImageType,
-    isReady: () => frameItem.isReady,
-    destroy: () => {
-      destroySubject$.next();
-      containerElement.remove();
-      frameItem == null ? void 0 : frameItem.destroy();
-      fingerTracker.destroy();
-      selectionTracker.destroy();
-      destroySubject$.complete();
-    },
-    /**
-     * @important
-     * Do not use this value for layout and navigation. It will be in possible conflict
-     * with the global reading direction. A book should not mix them anyway. A page can have
-     * a different reading direction for style reason but it should be in theory pre-paginated.
-     * For example an english page in a japanese manga. That's expected and will
-     * be confined to a single page.
-     */
-    get readingDirection() {
-      var _a;
-      const writingMode = this.frame.getWritingMode();
-      if (writingMode === `vertical-rl`) {
-        return `rtl`;
-      }
-      const direction = (_a = this.frame.getComputedStyleAfterLoad()) == null ? void 0 : _a.direction;
-      if ([`ltr`, `rtl`].includes(direction || ``))
-        return direction;
-      return void 0;
-    },
-    isUsingVerticalWriting: () => {
-      var _a;
-      return (_a = frameItem.getWritingMode()) == null ? void 0 : _a.startsWith(`vertical`);
-    },
-    executeOnLayoutBeforeMeasurementHook,
-    selectionTracker,
-    fingerTracker,
-    getDimensionsForReflowableContent,
-    getDimensionsForPaginatedContent,
-    $: {
-      contentLayout$,
-      loaded$: frameItem.loaded$,
-      isReady$: frameItem.isReady$
-    }
-  };
-};
-const createContainerElement = (containerElement, item, hookManager) => {
-  const element = containerElement.ownerDocument.createElement(`div`);
-  element.classList.add(`spineItem`);
-  element.classList.add(`spineItem-${item.renditionLayout}`);
-  element.style.cssText = `
-    position: absolute;
-    overflow: hidden;
-  `;
-  hookManager.execute("item.onBeforeContainerCreated", void 0, { element });
-  return element;
-};
-const createOverlayElement = (containerElement, item) => {
-  const element = containerElement.ownerDocument.createElement(`div`);
-  element.classList.add(`spineItemOverlay`);
-  element.classList.add(`spineItemOverlay-${item.renditionLayout}`);
-  element.style.cssText = `
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    background-color: transparent;
-  `;
-  return element;
-};
-const getStyleForViewportDocument = () => {
-  return `
-    body {
-        margin: 0;
-        }
-      }
-    `;
-};
-const createPrePaginatedSpineItem = ({
-  item,
-  context,
-  containerElement,
-  settings,
-  hookManager,
-  index
-}) => {
-  const commonSpineItem = createCommonSpineItem({
-    context,
-    item,
-    parentElement: containerElement,
-    settings,
-    hookManager,
-    index
-  });
-  const spineItemFrame = commonSpineItem.frame;
-  const layout = ({
-    blankPagePosition,
-    minimumWidth,
-    spreadPosition
-  }) => {
-    const { width: pageWidth, height: pageHeight } = context.getPageSize();
-    const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-    const visibleArea = context.state.visibleAreaRect;
-    const frameElement = spineItemFrame.element;
-    if ((spineItemFrame == null ? void 0 : spineItemFrame.isLoaded) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
-      const contentWidth = pageWidth;
-      const contentHeight = visibleArea.height + context.state.calculatedInnerMargin;
-      const cssLink = buildDocumentStyle(
-        {
-          ...commonSpineItem.getDimensionsForPaginatedContent(),
-          enableTouch: settings.values.computedPageTurnMode !== `scrollable`,
-          spreadPosition
-        },
-        viewportDimensions
-      );
-      frameElement == null ? void 0 : frameElement.style.setProperty(`visibility`, `visible`);
-      frameElement == null ? void 0 : frameElement.style.setProperty(`opacity`, `1`);
-      if (viewportDimensions) {
-        commonSpineItem.injectStyle(cssLink);
-        spineItemFrame.staticLayout({
-          width: viewportDimensions.width,
-          height: viewportDimensions.height
-        });
-        frameElement == null ? void 0 : frameElement.style.setProperty(`position`, `absolute`);
-        frameElement == null ? void 0 : frameElement.style.setProperty(`top`, `50%`);
-        if (spreadPosition === `left`) {
-          frameElement == null ? void 0 : frameElement.style.setProperty(`right`, `0`);
-          frameElement == null ? void 0 : frameElement.style.removeProperty(`left`);
-        } else if (blankPagePosition === `before` && context.isRTL()) {
-          frameElement == null ? void 0 : frameElement.style.setProperty(`right`, `50%`);
-          frameElement == null ? void 0 : frameElement.style.removeProperty(`left`);
-        } else if (spreadPosition === `right`) {
-          frameElement == null ? void 0 : frameElement.style.setProperty(`left`, `0`);
-          frameElement == null ? void 0 : frameElement.style.removeProperty(`right`);
-        } else {
-          frameElement == null ? void 0 : frameElement.style.setProperty(
-            `left`,
-            blankPagePosition === `before` ? context.isRTL() ? `25%` : `75%` : blankPagePosition === `after` ? context.isRTL() ? `75%` : `25%` : `50%`
-          );
-          frameElement == null ? void 0 : frameElement.style.removeProperty(`right`);
-        }
-        const transformTranslateX = spreadPosition !== `none` ? `0` : `-50%`;
-        const transformOriginX = spreadPosition === `right` && blankPagePosition !== `before` ? `left` : spreadPosition === `left` || blankPagePosition === `before` && context.isRTL() ? `right` : `center`;
-        frameElement == null ? void 0 : frameElement.style.setProperty(
-          `transform`,
-          `translate(${transformTranslateX}, -50%) scale(${computedScale})`
-        );
-        frameElement == null ? void 0 : frameElement.style.setProperty(
-          `transform-origin`,
-          `${transformOriginX} center`
-        );
-        commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-      } else {
-        commonSpineItem.injectStyle(cssLink);
-        spineItemFrame.staticLayout({
-          width: contentWidth,
-          height: contentHeight
-        });
-        if (blankPagePosition === `before`) {
-          if (context.isRTL()) {
-            frameElement == null ? void 0 : frameElement.style.setProperty(`margin-right`, `${pageWidth}px`);
-          } else {
-            frameElement == null ? void 0 : frameElement.style.setProperty(`margin-left`, `${pageWidth}px`);
-          }
-        } else {
-          frameElement == null ? void 0 : frameElement.style.removeProperty(`margin-left`);
-          frameElement == null ? void 0 : frameElement.style.removeProperty(`margin-right`);
-        }
-      }
-      commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-      commonSpineItem.layout({
-        width: minimumWidth,
-        height: contentHeight,
-        blankPagePosition,
-        minimumWidth
-      });
-      return { width: minimumWidth, height: contentHeight };
-    } else {
-      commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-      commonSpineItem.layout({
-        width: minimumWidth,
-        height: pageHeight,
-        blankPagePosition,
-        minimumWidth
-      });
-    }
-    return { width: minimumWidth, height: pageHeight };
-  };
-  return {
-    ...commonSpineItem,
-    layout
-  };
-};
-const buildDocumentStyle = ({
-  columnWidth,
-  enableTouch,
-  spreadPosition
-}, viewportDimensions) => {
-  return `
-    ${getStyleForViewportDocument()}
-    body {
-      ${!viewportDimensions ? `
-        display: flex;
-        justify-content: ${spreadPosition === `left` ? `flex-end` : spreadPosition === `right` ? `flex-start` : `center`};
-      ` : ``}
-    }
-    ${/*
-    might be html * but it does mess up things like figure if so.
-    check accessible_epub_3
-  */
-  ``}
-    html, body {
-      height: 100%;
-      width: 100%;
-    }
-    ${/*
-    This one is important for preventing 100% img to resize above
-    current width. Especially needed for cbz conversion
-  */
-  ``}
-    html, body {
-      -max-width: ${columnWidth}px !important;
-    }
-    ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  * It needs to be disabled when using free scroll
-  */
-  ``}
-    html, body {
-      ${enableTouch ? `
-        touch-action: none
-      ` : ``}
-    }
-    ${/*
-    prevent drag of image instead of touch on firefox
-  */
-  ``}
-    img {
-      user-select: none;
-      -webkit-user-drag: none;
-      -khtml-user-drag: none;
-      -moz-user-drag: none;
-      -o-user-drag: none;
-      user-drag: none;
-      ${/*
-    prevent weird overflow or margin. Try `block` if `flex` has weird behavior
-  */
-  ``}
-      display: flex;
-      ${/*
-    If the document does not have viewport, we cannot scale anything inside.
-    This should never happens with a valid epub document however it will happens if
-    we load .jpg, .png, etc directly in the iframe. This is expected, in this case we force
-    the inner content to display correctly.
-  */
-  ``}
-      ${!viewportDimensions ? `
-        -width: 100%;
-        max-width: 100%;
-        height:100%;
-        object-fit:contain;
-      ` : ``}
-    }
-  `;
-};
-const buildStyleForViewportFrame = () => {
-  return `
-      ${getStyleForViewportDocument()}
-      html {
-        width: 100%;
-        height: 100%;
-      }
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-      }
-      ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-      html, body {
-        touch-action: none;
-      }
-    `;
-};
-const buildStyleForReflowableImageOnly = ({
-  isScrollable,
-  enableTouch
-}) => {
-  return `
-      ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-      html, body {
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        ${enableTouch ? `
-          touch-action: none
-        ` : ``}
-      }
-      ${isScrollable ? `
-        img {
-          height: auto !important;
-          margin: 0;
-          padding: 0;
-          box-sizing: border-box;
-          ${// we make sure img spread on entire screen
-  ``}
-          width: 100%;
-          ${/**
-  * line break issue
-  * @see https://stackoverflow.com/questions/37869020/image-not-taking-up-the-full-height-of-container
-  */
-  ``}
-          display: block;
-        }
-      ` : ``}
-    `;
-};
-const buildStyleWithMultiColumn = ({
-  width,
-  columnHeight,
-  columnWidth
-}) => {
-  return `
-      parsererror {
-        display: none !important;
-      }
-      ${/*
-    might be html * but it does mess up things like figure if so.
-    check accessible_epub_3
-  */
-  ``}
-      html, body {
-        margin: 0;
-        padding: 0 !important;
-        -max-width: ${columnWidth}px !important;
-      }
-      ${/*
-    body {
-      height: ${columnHeight}px !important;
-      width: ${columnWidth}px !important;
-      -margin-left: ${horizontalMargin}px !important;
-      -margin-right: ${horizontalMargin}px !important;
-      -margin: ${verticalMargin}px ${horizontalMargin}px !important;
-      -padding-top: ${horizontalMargin}px !important;
-      -padding-bottom: ${horizontalMargin}px !important;
-    }
-  */
-  ``}
-      body {
-        padding: 0 !important;
-        width: ${width}px !important;
-        height: ${columnHeight}px !important;
-        overflow-y: hidden;
-        column-gap: 0px !important;
-        column-width: ${columnWidth}px !important;
-        column-fill: auto !important;
-        word-wrap: break-word;
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-      }
-      body:focus-visible {
-        ${/*
-    we make sure that there are no outline when we focus something inside the iframe
-  */
-  ``}
-        outline: none;
-      }
-      ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-      html, body {
-        touch-action: none;
-      }
-      ${/*
-    this messes up hard, be careful with this
-  */
-  ``}
-      * {
-        -max-width: ${columnWidth}px !important;
-      }
-      ${/*
-    this is necessary to have a proper calculation when determining size
-    of iframe content. If an img is using something like width:100% it would expand to
-    the size of the original image and potentially gives back a wrong size (much larger)
-    @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
-  */
-  ``}
-      img, video, audio, object, svg {
-        max-width: 100%;
-        max-width: ${columnWidth}px !important;
-        max-height: ${columnHeight}px !important;
-        -pointer-events: none;
-        -webkit-column-break-inside: avoid;
-        page-break-inside: avoid;
-        break-inside: avoid;
-      }
-      figure {
-        d-max-width: ${columnWidth}px !important;
-      }
-      img {
-        object-fit: contain;
-        break-inside: avoid;
-        box-sizing: border-box;
-        d-max-width: ${columnWidth}px !important;
-      }
-      ${/*
-    img, video, audio, object, svg {
-      max-height: ${columnHeight}px !important;
-      box-sizing: border-box;
-      object-fit: contain;
-      -webkit-column-break-inside: avoid;
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
-  */
-  ``}
-      table {
-        max-width: ${columnWidth}px !important;
-        table-layout: fixed;
-      }
-      td {
-        max-width: ${columnWidth}px;
-      }
-    `;
-};
-const createReflowableSpineItem = ({
-  item,
-  context,
-  containerElement,
-  settings,
-  hookManager,
-  index
-}) => {
-  const commonSpineItem = createCommonSpineItem({
-    context,
-    item,
-    parentElement: containerElement,
-    settings,
-    hookManager,
-    index
-  });
-  const spineItemFrame = commonSpineItem.frame;
-  let latestContentHeightWhenLoaded;
-  const layout = ({
-    blankPagePosition,
-    minimumWidth
-  }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { width: pageWidth, height: pageSizeHeight } = context.getPageSize();
-    const continuousScrollableReflowableItem = ((_a = context.manifest) == null ? void 0 : _a.renditionLayout) === "reflowable" && ((_b = context.manifest) == null ? void 0 : _b.renditionFlow) === "scrolled-continuous" && commonSpineItem.item.renditionLayout === "reflowable";
-    const pageHeight = continuousScrollableReflowableItem ? Math.min(400, pageSizeHeight) : pageSizeHeight;
-    (_c = spineItemFrame.element) == null ? void 0 : _c.style.setProperty(`width`, `${pageWidth}px`);
-    if (!continuousScrollableReflowableItem) {
-      (_d = spineItemFrame.element) == null ? void 0 : _d.style.setProperty(`height`, `${pageHeight}px`);
-    }
-    const { viewportDimensions, computedScale = 1 } = commonSpineItem.getViewPortInformation() ?? {};
-    const visibleArea = context.state.visibleAreaRect;
-    const frameElement = spineItemFrame.element;
-    const isGloballyPrePaginated = ((_e = context.manifest) == null ? void 0 : _e.renditionLayout) === `pre-paginated`;
-    if ((spineItemFrame == null ? void 0 : spineItemFrame.isLoaded) && (frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
-      let contentWidth = pageWidth;
-      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) {
-        commonSpineItem.injectStyle(buildStyleForViewportFrame());
-        commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-        spineItemFrame.staticLayout({
-          width: viewportDimensions.width,
-          height: viewportDimensions.height
-        });
-        frameElement == null ? void 0 : frameElement.style.setProperty(`position`, `absolute`);
-        frameElement == null ? void 0 : frameElement.style.setProperty(`top`, `50%`);
-        frameElement == null ? void 0 : frameElement.style.setProperty(
-          `left`,
-          blankPagePosition === `before` ? context.isRTL() ? `25%` : `75%` : blankPagePosition === `after` ? context.isRTL() ? `75%` : `25%` : `50%`
-        );
-        frameElement == null ? void 0 : frameElement.style.setProperty(
-          `transform`,
-          `translate(-50%, -50%) scale(${computedScale})`
-        );
-        frameElement == null ? void 0 : frameElement.style.setProperty(`transform-origin`, `center center`);
-      } else {
-        const frameStyle = commonSpineItem.isImageType() ? buildStyleForReflowableImageOnly({
-          isScrollable: ((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`,
-          enableTouch: settings.values.computedPageTurnMode !== `scrollable`
-        }) : buildStyleWithMultiColumn(
-          commonSpineItem.getDimensionsForReflowableContent(
-            spineItemFrame.isUsingVerticalWriting(),
-            minimumWidth
-          )
-        );
-        commonSpineItem.injectStyle(frameStyle);
-        commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-        if (spineItemFrame.isUsingVerticalWriting()) {
-          const pages = Math.ceil(
-            frameElement.contentDocument.documentElement.scrollHeight / pageHeight
-          );
-          contentHeight = pages * pageHeight;
-          spineItemFrame.staticLayout({
-            width: minimumWidth,
-            height: contentHeight
-          });
-        } else if (((_g = context.manifest) == null ? void 0 : _g.renditionFlow) === `scrolled-continuous`) {
-          contentHeight = frameElement.contentDocument.body.scrollHeight;
-          latestContentHeightWhenLoaded = contentHeight;
-          spineItemFrame.staticLayout({
-            width: minimumWidth,
-            height: contentHeight
-          });
-        } else {
-          const pages = Math.ceil(
-            frameElement.contentDocument.documentElement.scrollWidth / pageWidth
-          );
-          if (isGloballyPrePaginated) {
-            contentWidth = pageWidth;
-          } else {
-            contentWidth = pages * pageWidth;
-          }
-          spineItemFrame.staticLayout({
-            width: contentWidth,
-            height: contentHeight
-          });
-        }
-      }
-      const isFillingAllScreen = contentWidth % minimumWidth === 0;
-      if (!isFillingAllScreen) {
-        contentWidth = contentWidth + pageWidth;
-        if (context.isRTL() && !commonSpineItem.isUsingVerticalWriting()) {
-          frameElement == null ? void 0 : frameElement.style.setProperty(`margin-left`, `${pageWidth}px`);
-        }
-      } else {
-        frameElement == null ? void 0 : frameElement.style.setProperty(`margin-left`, `0px`);
-      }
-      commonSpineItem.layout({
-        width: contentWidth,
-        height: contentHeight,
-        blankPagePosition,
-        minimumWidth
-      });
-      return { width: contentWidth, height: contentHeight };
-    } else {
-      commonSpineItem.executeOnLayoutBeforeMeasurementHook({ minimumWidth });
-    }
-    const height = latestContentHeightWhenLoaded || pageHeight;
-    commonSpineItem.layout({
-      width: minimumWidth,
-      height,
-      blankPagePosition,
-      minimumWidth
-    });
-    return { width: minimumWidth, height };
-  };
-  return {
-    ...commonSpineItem,
-    layout
-  };
-};
-const createSpineItem = ({
-  item,
-  context,
-  containerElement,
-  settings,
-  hookManager,
-  index
-}) => {
-  if (item.renditionLayout === `pre-paginated`) {
-    return createPrePaginatedSpineItem({
-      item,
-      context,
-      containerElement,
-      settings,
-      hookManager,
-      index
-    });
-  }
-  return createReflowableSpineItem({
-    item,
-    context,
-    containerElement,
-    settings,
-    hookManager,
-    index
-  });
-};
-const getSpineItemFromPosition = ({
-  position,
-  spineItemsManager,
-  spineLayout,
-  settings
-}) => {
-  const spineItem = spineItemsManager.items.find((item) => {
-    const { left, right, bottom, top } = spineLayout.getAbsolutePositionOf(item);
-    const isWithinXAxis = position.x >= left && position.x < right;
-    if (settings.values.computedPageTurnDirection === `horizontal`) {
-      return isWithinXAxis;
-    } else {
-      return isWithinXAxis && position.y >= top && position.y < bottom;
-    }
-  });
-  if (position.x === 0 && !spineItem) {
-    return spineItemsManager.items[0];
-  }
-  return spineItem;
-};
-const isItemVisibleByThresholdForPosition = ({
-  itemHeight,
-  itemWidth,
-  visibleWidthOfItem,
-  visibleHeightOfItem,
-  threshold
-}) => {
-  const visibleWidthRatioOfSpineItem = visibleWidthOfItem / itemWidth;
-  const visibleHeightRatioOfSpineItem = visibleHeightOfItem / itemHeight;
-  const isItemVisibleEnough = visibleWidthRatioOfSpineItem >= threshold && visibleHeightRatioOfSpineItem >= threshold;
-  return isItemVisibleEnough;
-};
-const isItemVisibleOnScreenByThresholdForPosition = ({
-  visibleWidthOfItem,
-  visibleHeightOfItem,
-  threshold,
-  context
-}) => {
-  const widthRatioOfSpaceTakenInScreen = visibleWidthOfItem / context.state.visibleAreaRect.width;
-  const heightRatioOfSpaceTakenInScreen = visibleHeightOfItem / context.state.visibleAreaRect.height;
-  const isItemVisibleEnoughOnScreen = heightRatioOfSpaceTakenInScreen >= threshold && widthRatioOfSpaceTakenInScreen >= threshold;
-  return isItemVisibleEnoughOnScreen;
-};
-const getItemVisibilityForPosition = ({
-  itemPosition: {
-    bottom,
-    left,
-    right,
-    top,
-    width: itemWidth,
-    height: itemHeight
-  },
-  threshold,
-  viewportPosition,
-  restrictToScreen,
-  context
-}) => {
-  const viewportLeft = viewportPosition.x;
-  const viewportRight = viewportPosition.x + (context.state.visibleAreaRect.width - 1);
-  const viewportTop = viewportPosition.y;
-  const viewportBottom = Math.max(
-    viewportPosition.y + (context.state.visibleAreaRect.height - 1),
-    0
-  );
-  const visibleWidthOfItem = Math.max(
-    0,
-    Math.min(right, viewportRight) - Math.max(left, viewportLeft)
-  );
-  const visibleHeightOfItem = Math.max(
-    0,
-    Math.min(bottom, viewportBottom) - Math.max(top, viewportTop)
-  );
-  const itemIsOnTheOuterEdge = visibleWidthOfItem <= 0 || visibleHeightOfItem <= 0;
-  if (itemIsOnTheOuterEdge) return { visible: false };
-  const isItemVisibleEnoughOnScreen = isItemVisibleOnScreenByThresholdForPosition({
-    threshold,
-    visibleHeightOfItem,
-    visibleWidthOfItem,
-    context
-  });
-  if (restrictToScreen) {
-    return { visible: isItemVisibleEnoughOnScreen };
-  }
-  const isItemVisibleEnough = isItemVisibleByThresholdForPosition({
-    itemHeight,
-    itemWidth,
-    threshold,
-    visibleHeightOfItem,
-    visibleWidthOfItem
-  });
-  return {
-    visible: isItemVisibleEnough || isItemVisibleEnoughOnScreen
-  };
-};
-const getVisibleSpineItemsFromPosition = ({
-  position,
-  threshold,
-  restrictToScreen,
-  spineItemsManager,
-  context,
-  settings,
-  spineLayout
-}) => {
-  const fallbackSpineItem = getSpineItemFromPosition({
-    position,
-    settings,
-    spineItemsManager,
-    spineLayout
-  }) || spineItemsManager.get(0);
-  const spineItemsVisible = spineItemsManager.items.reduce(
-    (acc, spineItem) => {
-      const itemPosition = spineLayout.getAbsolutePositionOf(spineItem);
-      const { visible } = getItemVisibilityForPosition({
-        itemPosition,
-        threshold,
-        viewportPosition: position,
-        restrictToScreen,
-        context
-      });
-      if (visible) {
-        return [...acc, spineItem];
-      }
-      return acc;
-    },
-    []
-  );
-  const beginItem = spineItemsVisible[0] ?? fallbackSpineItem;
-  const endItem = spineItemsVisible[spineItemsVisible.length - 1] ?? beginItem;
-  if (!beginItem || !endItem) return void 0;
-  const beginItemIndex = spineItemsManager.getSpineItemIndex(beginItem);
-  const endItemIndex = spineItemsManager.getSpineItemIndex(endItem);
-  return {
-    beginIndex: beginItemIndex ?? 0,
-    endIndex: endItemIndex ?? 0
-  };
-};
-const getSpinePositionFromSpineItemPosition = ({
-  spineItemPosition,
-  itemLayout: { left, top }
-}) => {
-  return {
-    x: left + spineItemPosition.x,
-    y: top + spineItemPosition.y
-  };
-};
-const getSpineInfoFromAbsolutePageIndex = ({
-  absolutePageIndex,
-  spineLayout,
-  spineItemsManager,
-  context,
-  settings
-}) => {
-  const items = spineItemsManager.items;
-  const { found, currentAbsolutePage } = items.reduce(
-    (acc, item) => {
-      if (acc.found) return acc;
-      const itemLayout = spineLayout.getAbsolutePositionOf(item);
-      const numberOfPages = getSpineItemNumberOfPages({
-        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-        itemHeight: itemLayout.height,
-        itemWidth: itemLayout.width,
-        context,
-        settings
-      });
-      const possiblePageIndex = absolutePageIndex - acc.currentAbsolutePage;
-      const currentAbsolutePage2 = acc.currentAbsolutePage + numberOfPages;
-      if (possiblePageIndex <= numberOfPages - 1) {
-        return {
-          ...acc,
-          currentAbsolutePage: currentAbsolutePage2,
-          found: { item, pageIndex: possiblePageIndex }
-        };
-      }
-      return {
-        ...acc,
-        currentAbsolutePage: currentAbsolutePage2
-      };
-    },
-    { currentAbsolutePage: 0 }
-  );
-  if (found) {
-    return {
-      spineItem: found.item,
-      pageIndex: found.pageIndex,
-      itemIndex: spineItemsManager.getSpineItemIndex(found.item) ?? 0,
-      currentAbsolutePage
-    };
-  }
-  return void 0;
-};
-const getAbsolutePageIndexFromPageIndex = ({
-  pageIndex,
-  spineItemOrId,
-  spineLayout,
-  spineItemsManager,
-  context,
-  settings
-}) => {
-  const items = spineItemsManager.items;
-  const spineItem = spineItemsManager.get(spineItemOrId);
-  if (!spineItem) return void 0;
-  const { currentAbsolutePage } = items.reduce(
-    (acc, item) => {
-      if (acc.found) return acc;
-      const itemLayout = spineLayout.getAbsolutePositionOf(item);
-      const numberOfPages = getSpineItemNumberOfPages({
-        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-        itemHeight: itemLayout.height,
-        itemWidth: itemLayout.width,
-        context,
-        settings
-      });
-      if (spineItem === item) {
-        if (pageIndex <= numberOfPages - 1) {
-          return {
-            currentAbsolutePage: acc.currentAbsolutePage + pageIndex,
-            found: true
-          };
-        }
-      }
-      return {
-        ...acc,
-        currentAbsolutePage: acc.currentAbsolutePage + numberOfPages
-      };
-    },
-    { currentAbsolutePage: 0, found: false }
-  );
-  return currentAbsolutePage;
-};
-const createSpineLocator = ({
-  spineItemsManager,
-  context,
-  spineItemLocator,
-  settings,
-  spineLayout
-}) => {
-  const getSpineItemPositionFromSpinePosition = Report.measurePerformance(
-    `getSpineItemPositionFromSpinePosition`,
-    10,
-    (position, spineItem) => {
-      const { left, top } = spineLayout.getAbsolutePositionOf(spineItem);
-      return {
-        /**
-         * when using spread the item could be on the right and therefore will be negative
-         * @example
-         * 400 (position = viewport), page of 200
-         * 400 - 600 = -200.
-         * However we can assume we are at 0, because we in fact can see the beginning of the item
-         */
-        x: Math.max(position.x - left, 0),
-        y: Math.max(position.y - top, 0)
-      };
-    },
-    { disable: true }
-  );
-  const getSpinePositionFromSpineItem = (spineItem) => {
-    return getSpinePositionFromSpineItemPosition({
-      spineItemPosition: { x: 0, y: 0 },
-      itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
-    });
-  };
-  const getSpineItemFromIframe = (iframe) => {
-    return spineItemsManager.items.find((item) => item.frame.element === iframe);
-  };
-  const getSpineItemPageIndexFromNode = (node, offset, spineItemOrIndex) => {
-    if (typeof spineItemOrIndex === `number`) {
-      const spineItem = spineItemsManager.get(spineItemOrIndex);
-      return spineItem ? spineItemLocator.getSpineItemPageIndexFromNode(
-        node,
-        offset || 0,
-        spineItem
-      ) : void 0;
-    }
-    return spineItemLocator.getSpineItemPageIndexFromNode(
-      node,
-      offset || 0,
-      spineItemOrIndex
-    );
-  };
-  const getVisiblePagesFromViewportPosition = ({
-    position,
-    threshold,
-    spineItem,
-    restrictToScreen
-  }) => {
-    const { height, width } = spineItem.getElementDimensions();
-    const numberOfPages = spineItemLocator.getSpineItemNumberOfPages({
-      isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-      itemHeight: height,
-      itemWidth: width
-    });
-    const pages = Array.from(Array(numberOfPages)).map((_, index) => {
-      const spineItemPosition = spineItemLocator.getSpineItemPositionFromPageIndex({
-        pageIndex: index,
-        isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-        itemLayout: spineItem.getElementDimensions()
-      });
-      const spinePosition = getSpinePositionFromSpineItemPosition({
-        spineItemPosition,
-        itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
-      });
-      return {
-        index,
-        absolutePosition: {
-          width: context.getPageSize().width,
-          height: context.getPageSize().height,
-          left: spinePosition.x,
-          top: spinePosition.y,
-          bottom: spinePosition.y + context.getPageSize().height,
-          right: spinePosition.x + context.getPageSize().width
-        }
-      };
-    });
-    const pagesVisible = pages.reduce(
-      (acc, { absolutePosition, index }) => {
-        const { visible } = getItemVisibilityForPosition({
-          context,
-          viewportPosition: position,
-          restrictToScreen,
-          threshold,
-          itemPosition: absolutePosition
-        });
-        if (visible) {
-          return [...acc, index];
-        }
-        return acc;
-      },
-      []
-    );
-    const beginPageIndex = pagesVisible[0];
-    const endPageIndex = pagesVisible[pagesVisible.length - 1] ?? beginPageIndex;
-    if (beginPageIndex === void 0 || endPageIndex === void 0)
-      return void 0;
-    return {
-      beginPageIndex,
-      endPageIndex
-    };
-  };
-  const isPositionWithinSpineItem = (position, spineItem) => {
-    const { bottom, left, right, top } = spineLayout.getAbsolutePositionOf(spineItem);
-    return position.x >= left && position.x <= right && position.y <= bottom && position.y >= top;
-  };
-  const getSafeSpineItemPositionFromUnsafeSpineItemPosition = (unsafePosition, spineItem) => {
-    const { height, width } = spineLayout.getAbsolutePositionOf(spineItem);
-    return {
-      x: Math.min(Math.max(0, unsafePosition.x), width),
-      y: Math.min(Math.max(0, unsafePosition.y), height)
-    };
-  };
-  return {
-    getSpinePositionFromSpineItemPosition: ({
-      spineItem,
-      spineItemPosition
-    }) => {
-      const itemLayout = spineLayout.getAbsolutePositionOf(spineItem);
-      return getSpinePositionFromSpineItemPosition({
-        itemLayout,
-        spineItemPosition
-      });
+    getSpinePositionFromSpineItemPosition: ({
+      spineItem,
+      spineItemPosition
+    }) => {
+      const itemLayout = spineLayout.getAbsolutePositionOf(spineItem);
+      return getSpinePositionFromSpineItemPosition({
+        itemLayout,
+        spineItemPosition
+      });
     },
     getAbsolutePageIndexFromPageIndex: (params) => getAbsolutePageIndexFromPageIndex({
       ...params,
@@ -6899,7 +5692,7 @@ class SpineItemsObserver extends DestroyableClass {
     this.itemIsReady$ = this.spineItemsManager.items$.pipe(
       switchMap((items) => {
         const itemsIsReady$ = items.map(
-          (item) => item.$.isReady$.pipe(map$1((isReady) => ({ item, isReady })))
+          (item) => item.isReady$.pipe(map$1((isReady) => ({ item, isReady })))
         );
         return merge(...itemsIsReady$);
       }),
@@ -6916,6 +5709,14 @@ class SpineItemsObserver extends DestroyableClass {
       }),
       share()
     );
+    this.itemLoaded$ = this.spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const itemsIsReady$ = items.map(
+          (item) => item.loaded$.pipe(map$1(() => item))
+        );
+        return merge(...itemsIsReady$);
+      })
+    );
   }
 }
 const convertSpinePositionToLayoutPosition = ({
@@ -6945,14 +5746,14 @@ class SpineLayout extends DestroyableClass {
     spineItemsManager.items$.pipe(
       switchMap((items) => {
         const itemsLayout$ = items.map(
-          (spineItem) => spineItem.$.contentLayout$.pipe(
+          (spineItem) => spineItem.contentLayout$.pipe(
             tap$1(() => {
               this.layout();
             })
           )
         );
         const writingModeUpdate$ = items.map(
-          (spineItem) => spineItem.$.loaded$.pipe(
+          (spineItem) => spineItem.loaded$.pipe(
             tap$1(() => {
               if (spineItem.isUsingVerticalWriting()) {
                 this.context.update({
@@ -7157,6 +5958,423 @@ class SpineLayout extends DestroyableClass {
     this.layoutSubject.complete();
   }
 }
+const createFingerTracker = () => {
+  const fingerPositionInIframe = { x: void 0, y: void 0 };
+  const subject = new Subject();
+  let isMouseDown = false;
+  const track = (frame) => {
+    var _a, _b, _c;
+    fingerPositionInIframe.x = void 0;
+    fingerPositionInIframe.y = void 0;
+    (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(`mousedown`, (e) => {
+      isMouseDown = true;
+      fingerPositionInIframe.x = e.x;
+      fingerPositionInIframe.y = e.y;
+      subject.next({ event: `fingermove`, data: { x: e.x, y: e.y } });
+    });
+    (_b = frame.contentDocument) == null ? void 0 : _b.addEventListener(`mouseup`, () => {
+      isMouseDown = false;
+      fingerPositionInIframe.x = void 0;
+      fingerPositionInIframe.y = void 0;
+      subject.next({ event: `fingerout`, data: void 0 });
+    });
+    (_c = frame.contentDocument) == null ? void 0 : _c.addEventListener(`mousemove`, (e) => {
+      if (isMouseDown) {
+        subject.next({ event: `fingermove`, data: { x: e.x, y: e.y } });
+      }
+    });
+  };
+  return {
+    track,
+    getFingerPositionInIframe() {
+      return fingerPositionInIframe.x === void 0 || fingerPositionInIframe.y === void 0 ? void 0 : fingerPositionInIframe;
+    },
+    destroy: () => {
+    },
+    $: subject.asObservable()
+  };
+};
+const createSelectionTracker = () => {
+  let isSelecting = false;
+  let frame;
+  const subject = new Subject();
+  const mouseUpEvents = [`mouseup`, `pointerup`];
+  const track = (frameToTrack) => {
+    var _a, _b;
+    frame = frameToTrack;
+    mouseUpEvents.forEach((eventName) => {
+      var _a2;
+      (_a2 = frameToTrack.contentWindow) == null ? void 0 : _a2.addEventListener(eventName, () => {
+        isSelecting = false;
+      });
+    });
+    (_a = frameToTrack.contentDocument) == null ? void 0 : _a.addEventListener(`selectionchange`, () => {
+      var _a2;
+      subject.next({
+        event: `selectionchange`,
+        data: ((_a2 = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a2.getSelection()) || null
+      });
+    });
+    (_b = frameToTrack.contentWindow) == null ? void 0 : _b.addEventListener(`selectstart`, () => {
+      isSelecting = true;
+    });
+  };
+  const destroy = () => {
+  };
+  return {
+    track,
+    destroy,
+    isSelecting: () => isSelecting,
+    getSelection: () => {
+      var _a;
+      const selection = (_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.getSelection();
+      if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`)
+        return void 0;
+      return selection;
+    },
+    $: subject.asObservable()
+  };
+};
+class DocumentRenderer {
+  constructor(context, settings, hookManager, item, containerElement, resourcesHandler) {
+    this.context = context;
+    this.settings = settings;
+    this.hookManager = hookManager;
+    this.item = item;
+    this.containerElement = containerElement;
+    this.resourcesHandler = resourcesHandler;
+    this.stateSubject = new BehaviorSubject(`idle`);
+    this.triggerSubject = new Subject();
+    this.layers = [];
+    this.unload$ = this.triggerSubject.pipe(
+      withLatestFrom(this.stateSubject),
+      filter$1(
+        ([trigger, state]) => trigger === `unload` && state !== "idle" && state !== "unloading"
+      ),
+      map$1(() => void 0),
+      share()
+    );
+    this.load$ = this.triggerSubject.pipe(
+      withLatestFrom(this.stateSubject),
+      filter$1(
+        ([trigger, state]) => trigger === `load` && state !== "ready" && state !== "loaded" && state !== "loading"
+      ),
+      map$1(() => void 0),
+      share()
+    );
+    this.destroy$ = this.triggerSubject.pipe(
+      filter$1((trigger) => trigger === `destroy`)
+    );
+    this.stateSubject.subscribe((state) => {
+      console.log(`FOOO`, item.id, `state`, state);
+    });
+    this.load$.pipe(
+      switchMap(() => {
+        this.stateSubject.next(`loading`);
+        const createDocument$ = this.onCreateDocument().pipe(
+          endWith(null),
+          first$1()
+        );
+        return createDocument$.pipe(
+          tap$1(() => {
+            this.hookManager.execute(`item.onDocumentCreated`, this.item.id, {
+              itemId: this.item.id,
+              layers: this.layers
+            });
+          }),
+          switchMap(() => {
+            const loadDocument$ = this.onLoadDocument().pipe(
+              endWith(null),
+              first$1()
+            );
+            return loadDocument$;
+          }),
+          waitForSwitch(this.context.bridgeEvent.viewportFree$),
+          switchMap(() => {
+            const hookResults = this.hookManager.execute(`item.onDocumentLoad`, this.item.id, {
+              itemId: this.item.id,
+              layers: this.layers
+            }).filter(
+              (result) => result instanceof Observable
+            );
+            return combineLatest([of(null), ...hookResults]).pipe(first$1());
+          }),
+          tap$1(() => {
+            this.stateSubject.next(`loaded`);
+            this.stateSubject.next(`ready`);
+          }),
+          takeUntil(merge(this.destroy$, this.unload$))
+        );
+      })
+    ).subscribe();
+    this.unload$.pipe(
+      switchMap(() => {
+        this.stateSubject.next(`unloading`);
+        return this.context.bridgeEvent.viewportFree$.pipe(
+          first$1(),
+          tap$1(() => {
+            this.hookManager.destroy(`item.onDocumentLoad`, this.item.id);
+          }),
+          switchMap(() => {
+            const unload$ = this.onUnload().pipe(endWith(null), first$1());
+            return unload$;
+          }),
+          tap$1(() => {
+            this.stateSubject.next(`idle`);
+          }),
+          takeUntil(merge(this.destroy$, this.load$))
+        );
+      })
+    ).subscribe();
+  }
+  get state$() {
+    return this.stateSubject;
+  }
+  load() {
+    this.triggerSubject.next(`load`);
+  }
+  unload() {
+    this.triggerSubject.next(`unload`);
+  }
+  destroy() {
+    this.triggerSubject.next(`destroy`);
+    this.triggerSubject.complete();
+    this.stateSubject.complete();
+  }
+  get writingMode() {
+    return void 0;
+  }
+  get readingDirection() {
+    return void 0;
+  }
+}
+class DefaultRenderer extends DocumentRenderer {
+  onUnload() {
+    return EMPTY;
+  }
+  onCreateDocument() {
+    return EMPTY;
+  }
+  onLoadDocument() {
+    return EMPTY;
+  }
+  layout() {
+    return void 0;
+  }
+}
+const defaultGetResource = (item) => new URL(item.href);
+class ResourceHandler {
+  constructor(item, settings) {
+    this.item = item;
+    this.settings = settings;
+  }
+  async getResource() {
+    var _a, _b;
+    const resource = await lastValueFrom(
+      ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? of(void 0)
+    );
+    return resource ?? defaultGetResource(this.item);
+  }
+  async fetchResource() {
+    const resource = await this.getResource();
+    if (resource instanceof Response) return resource;
+    if (resource instanceof URL) return fetch(resource);
+    return resource;
+  }
+}
+class SpineItem {
+  constructor(item, parentElement, context, settings, hookManager, index) {
+    var _a, _b;
+    this.item = item;
+    this.parentElement = parentElement;
+    this.context = context;
+    this.settings = settings;
+    this.hookManager = hookManager;
+    this.index = index;
+    this.adjustPositionOfElement = ({
+      right,
+      left,
+      top
+    }) => {
+      if (right !== void 0) {
+        this.containerElement.style.right = `${right}px`;
+      } else {
+        this.containerElement.style.removeProperty(`right`);
+      }
+      if (left !== void 0) {
+        this.containerElement.style.left = `${left}px`;
+      } else {
+        this.containerElement.style.removeProperty(`left`);
+      }
+      if (top !== void 0) {
+        this.containerElement.style.top = `${top}px`;
+      } else {
+        this.containerElement.style.removeProperty(`top`);
+      }
+    };
+    this.getBoundingRectOfElementFromSelector = (selector) => {
+      var _a2, _b2, _c, _d, _e;
+      const frameElement = (_a2 = this.renderer.layers[0]) == null ? void 0 : _a2.element;
+      if (frameElement && frameElement instanceof HTMLIFrameElement && selector) {
+        if (selector.startsWith(`#`)) {
+          return (_c = (_b2 = frameElement.contentDocument) == null ? void 0 : _b2.getElementById(selector.replace(`#`, ``))) == null ? void 0 : _c.getBoundingClientRect();
+        }
+        return (_e = (_d = frameElement.contentDocument) == null ? void 0 : _d.querySelector(selector)) == null ? void 0 : _e.getBoundingClientRect();
+      }
+    };
+    this.layout = ({
+      blankPagePosition,
+      minimumWidth,
+      spreadPosition
+    }) => {
+      this.hookManager.execute(`item.onBeforeLayout`, void 0, {
+        blankPagePosition,
+        item: this.item,
+        minimumWidth
+      });
+      const { height, width } = this.renderer.layout({
+        blankPagePosition,
+        minPageSpread: minimumWidth / this.context.getPageSize().width,
+        spreadPosition
+      }) ?? { width: 0, height: 0 };
+      const minHeight = Math.max(height, this.context.getPageSize().height);
+      const minWidth = Math.max(width, minimumWidth);
+      this.containerElement.style.width = `${minWidth}px`;
+      this.containerElement.style.height = `${minHeight}px`;
+      this.hookManager.execute(`item.onAfterLayout`, void 0, {
+        blankPagePosition,
+        item: this.item,
+        minimumWidth
+      });
+      return { width: minWidth, height: minHeight };
+    };
+    this.load = () => this.renderer.load();
+    this.unload = () => {
+      this.renderer.unload();
+    };
+    this.getElementDimensions = () => {
+      const rect = this.containerElement.getBoundingClientRect();
+      const normalizedValues = {
+        ...rect,
+        // we want to round to first decimal because it's possible to have half pixel
+        // however browser engine can also gives back x.yyyy based on their precision
+        width: Math.round(rect.width * 10) / 10,
+        height: Math.round(rect.height * 10) / 10
+      };
+      return normalizedValues;
+    };
+    this.destroy = () => {
+      this.destroySubject$.next();
+      this.containerElement.remove();
+      this.fingerTracker.destroy();
+      this.selectionTracker.destroy();
+      this.destroySubject$.complete();
+      this.renderer.destroy();
+    };
+    this.isUsingVerticalWriting = () => {
+      var _a2;
+      return !!((_a2 = this.renderer.writingMode) == null ? void 0 : _a2.startsWith(`vertical`));
+    };
+    this.destroySubject$ = new Subject();
+    this.containerElement = createContainerElement(
+      parentElement,
+      item,
+      hookManager
+    );
+    this.fingerTracker = createFingerTracker();
+    this.selectionTracker = createSelectionTracker();
+    parentElement.appendChild(this.containerElement);
+    const RendererClass = ((_b = (_a = this.settings.values).getRenderer) == null ? void 0 : _b.call(_a, item)) ?? DefaultRenderer;
+    this.resourcesHandler = new ResourceHandler(item, this.settings);
+    this.renderer = new RendererClass(
+      context,
+      settings,
+      hookManager,
+      item,
+      this.containerElement,
+      this.resourcesHandler
+    );
+    const contentLayoutChange$ = merge(
+      this.unloaded$.pipe(map(() => ({ isFirstLayout: false }))),
+      this.ready$.pipe(map(() => ({ isFirstLayout: true })))
+    );
+    this.contentLayout$ = contentLayoutChange$.pipe(
+      withLatestFrom$1(this.isReady$),
+      map(([data, isReady]) => ({
+        isFirstLayout: data.isFirstLayout,
+        isReady
+      }))
+    );
+  }
+  get element() {
+    return this.containerElement;
+  }
+  /**
+   * @important
+   * Do not use this value for layout and navigation. It will be in possible conflict
+   * with the global reading direction. A book should not mix them anyway. A page can have
+   * a different reading direction for style reason but it should be in theory pre-paginated.
+   * For example an english page in a japanese manga. That's expected and will
+   * be confined to a single page.
+   */
+  get readingDirection() {
+    return this.renderer.readingDirection;
+  }
+  get isReady() {
+    return this.renderer.state$.getValue() === "ready";
+  }
+  get ready$() {
+    return this.renderer.state$.pipe(
+      distinctUntilChanged(),
+      filter((state) => state === "ready")
+    );
+  }
+  get loaded$() {
+    return this.renderer.state$.pipe(
+      distinctUntilChanged(),
+      filter((state) => state === "loaded")
+    );
+  }
+  get unloaded$() {
+    return this.renderer.state$.pipe(
+      distinctUntilChanged(),
+      filter((state) => state !== "idle"),
+      switchMap$1(
+        () => this.renderer.state$.pipe(
+          filter((state) => state === `idle`),
+          first()
+        )
+      )
+    );
+  }
+  get isReady$() {
+    return this.renderer.state$.pipe(map((state) => state === "ready"));
+  }
+  /**
+   * Helper that will inject CSS into the document frame.
+   *
+   * @important
+   * The document needs to be detected as a frame.
+   */
+  upsertCSS(id, style, prepend) {
+    this.renderer.layers.forEach((layer) => {
+      if (layer.element instanceof HTMLIFrameElement) {
+        upsertCSS(layer.element, id, style, prepend);
+      }
+    });
+  }
+}
+const createContainerElement = (containerElement, item, hookManager) => {
+  const element = containerElement.ownerDocument.createElement(`div`);
+  element.classList.add(`spineItem`);
+  element.classList.add(`spineItem-${item.renditionLayout}`);
+  element.style.cssText = `
+    position: absolute;
+    overflow: hidden;
+  `;
+  hookManager.execute("item.onBeforeContainerCreated", void 0, { element });
+  return element;
+};
 class Spine extends DestroyableClass {
   constructor(parentElement$, context, pagination, spineItemsManager, spineItemLocator, settings, hookManager) {
     super();
@@ -7196,14 +6414,14 @@ class Spine extends DestroyableClass {
       tap((manifest) => {
         this.spineItemsManager.destroyItems();
         const spineItems = manifest.spineItems.map(
-          (resource, index) => createSpineItem({
-            item: resource,
-            containerElement: this.elementSubject.getValue(),
-            context: this.context,
-            settings: this.settings,
-            hookManager: this.hookManager,
+          (resource, index) => new SpineItem(
+            resource,
+            this.elementSubject.getValue(),
+            this.context,
+            this.settings,
+            this.hookManager,
             index
-          })
+          )
         );
         this.spineItemsManager.addMany(spineItems);
       })
@@ -7581,492 +6799,1403 @@ const createResourcesManager = (context) => {
     if (cacheData) {
       return new Response(cacheData, { status: 200 });
     }
-    const data = fetchResource && await fetchResource(item) || await fetch(item.href);
-    cache(item, data.clone());
-    return data;
-  };
-  const cache = (itemIndexOrId, data) => {
-    cache$.next({ id: itemIndexOrId, data });
+    const data = fetchResource && await fetchResource(item) || await fetch(item.href);
+    cache(item, data.clone());
+    return data;
+  };
+  const cache = (itemIndexOrId, data) => {
+    cache$.next({ id: itemIndexOrId, data });
+  };
+  cache$.asObservable().pipe(
+    mergeMap$1(({ id, data }) => {
+      const item = retrieveItem(id);
+      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));
+        }),
+        catchError((error) => {
+          Report.error(error);
+          return EMPTY;
+        })
+      );
+    }),
+    takeUntil$1(context.destroy$)
+  ).subscribe();
+  const onLoad$ = context.manifest$.pipe(
+    tap(() => {
+      uniqueID = Date.now().toString();
+    })
+  );
+  merge(onLoad$).pipe(
+    switchMap$1(() => {
+      Report.log(`Cleanup up old cache...`);
+      return from(openDatabase(`prose-reader`)).pipe(
+        switchMap$1(
+          (db) => from(db.keys()).pipe(
+            map(
+              (keys) => keys.filter((key) => !key.toString().startsWith(uniqueID))
+            ),
+            switchMap$1((keysToRemove) => {
+              const promises = keysToRemove.map((key) => db.remove(key));
+              return from(Promise.all(promises));
+            })
+          )
+        ),
+        catchError((error) => {
+          Report.error(error);
+          return EMPTY;
+        })
+      );
+    }),
+    takeUntil$1(context.destroy$)
+  ).subscribe();
+  const destroy = () => {
+    cache$.complete();
+  };
+  return {
+    get,
+    destroy
+  };
+};
+const resourcesEnhancer = (next) => (options) => {
+  const reader = next(options);
+  const resourceManager = createResourcesManager(reader.context);
+  const destroy = () => {
+    resourceManager.destroy();
+    reader.destroy();
+  };
+  return {
+    ...reader,
+    // $: {
+    //   ...reader.$,
+    //   errors$: merge(reader.$.errors$, errorsSubject$.asObservable())
+    // },
+    destroy
+    // load,
+  };
+};
+class ImageRenderer extends DocumentRenderer {
+  getImageElement() {
+    var _a;
+    const element = (_a = this.layers[0]) == null ? void 0 : _a.element;
+    if (!(element instanceof HTMLImageElement)) return void 0;
+    return element;
+  }
+  onCreateDocument() {
+    return from(this.resourcesHandler.getResource()).pipe(
+      switchMap((responseOrUrl) => {
+        const imgElement = this.containerElement.ownerDocument.createElement(`img`);
+        this.layers = [{ element: imgElement }];
+        imgElement.style.objectFit = `contain`;
+        imgElement.style.userSelect = `none`;
+        if (responseOrUrl instanceof URL) {
+          return of(responseOrUrl.href);
+        } else if (responseOrUrl instanceof Response) {
+          return from(responseOrUrl.blob()).pipe(
+            map$1((blob) => {
+              return URL.createObjectURL(blob);
+            })
+          );
+        }
+        throw new Error(`Invalid resource`);
+      }),
+      tap$1((src) => {
+        const element = this.getImageElement();
+        if (element) {
+          element.src = src;
+        }
+      })
+    );
+  }
+  onLoadDocument() {
+    const imageElement = this.getImageElement();
+    if (!imageElement) throw new Error(`invalid element`);
+    this.containerElement.appendChild(imageElement);
+    return fromEvent(imageElement, `load`);
+  }
+  onUnload() {
+    const imageElement = this.getImageElement();
+    if (imageElement) {
+      URL.revokeObjectURL(imageElement.src);
+    }
+    this.layers.forEach(({ element }) => {
+      element.remove();
+    });
+    this.layers = [];
+    return EMPTY;
+  }
+  layout({
+    spreadPosition
+  }) {
+    var _a, _b;
+    const element = this.getImageElement();
+    const continuousScrollableReflowableItem = ((_a = this.context.manifest) == null ? void 0 : _a.renditionLayout) === "reflowable" && ((_b = this.context.manifest) == null ? void 0 : _b.renditionFlow) === "scrolled-continuous";
+    const { height: pageHeight, width: pageWidth } = this.context.getPageSize();
+    let height = pageHeight;
+    const width = pageWidth;
+    if (element) {
+      const naturalWidth = element.naturalWidth;
+      const naturalHeight = element.naturalHeight;
+      const ratio = naturalWidth / naturalHeight;
+      if (continuousScrollableReflowableItem) {
+        height = pageWidth / ratio;
+      }
+      element.style.height = `${height}px`;
+      element.style.width = `${width}px`;
+      element.style.objectPosition = spreadPosition === "left" ? `right` : spreadPosition === `right` ? `left` : `center`;
+    }
+    return {
+      width,
+      height
+    };
+  }
+}
+const mediaEnhancer = (next) => (options) => {
+  const reader = next({
+    ...options,
+    getRenderer(item) {
+      var _a;
+      const MaybeRenderer = (_a = options.getRenderer) == null ? void 0 : _a.call(options, item);
+      const mimeType = item.mediaType ?? detectMimeTypeFromName(item.href);
+      const isImageType = !!(mimeType == null ? void 0 : mimeType.startsWith(`image/`));
+      if (!MaybeRenderer && isImageType) {
+        return ImageRenderer;
+      }
+      return MaybeRenderer;
+    }
+  });
+  const frameObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        var _a;
+        const frame = entry.target;
+        const audios = Array.from(
+          ((_a = frame.contentDocument) == null ? void 0 : _a.body.getElementsByTagName(`audio`)) || []
+        );
+        if (!entry.isIntersecting) {
+          audios.forEach((audioElement) => {
+            audioElement.pause();
+            audioElement.currentTime = 0;
+          });
+        } else {
+          audios.forEach((audioElement) => {
+            if (audioElement.hasAttribute(`autoplay`) && audioElement.paused && audioElement.readyState >= 2) {
+              audioElement.play().catch(console.error);
+            }
+          });
+        }
+      });
+    },
+    {
+      threshold: 0.01
+    }
+  );
+  const elementObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.target.tagName === `video`) {
+          const video = entry.target;
+          if (!entry.isIntersecting) {
+            video.pause();
+            video.currentTime = 0;
+          } else {
+            if (video.hasAttribute(`autoplay`)) {
+              if (video.paused && video.readyState >= 2) {
+                video.play().catch(console.error);
+              }
+            }
+          }
+        }
+      });
+    },
+    {
+      threshold: 0.5
+    }
+  );
+  reader.hookManager.register(
+    `item.onDocumentLoad`,
+    ({ layers, destroy: destroy2 }) => {
+      var _a, _b;
+      const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+      if (!(frame instanceof HTMLIFrameElement)) return;
+      frameObserver.observe(frame);
+      const videos = (_b = frame.contentDocument) == null ? void 0 : _b.body.getElementsByTagName(`video`);
+      const unobserveElements = Array.from(videos || []).map((element) => {
+        elementObserver.observe(element);
+        return () => elementObserver.unobserve(element);
+      });
+      destroy2(() => {
+        frameObserver.unobserve(frame);
+        unobserveElements.forEach((unobserve) => unobserve());
+      });
+    }
+  );
+  const destroy = () => {
+    frameObserver.disconnect();
+    elementObserver.disconnect();
+    reader.destroy();
+  };
+  return {
+    ...reader,
+    destroy
+  };
+};
+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.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)) || 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.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
+      if (currentItem.isReady) {
+        progressWithinThisItem = getScrollPercentageWithinItem(
+          context,
+          currentPosition,
+          currentItem
+        );
+      } else {
+        progressWithinThisItem = 0;
+      }
+      totalProgress = getTotalProgressFromPercentages(
+        estimateBeforeThisItem,
+        currentItemWeight,
+        progressWithinThisItem
+      );
+    }
+    if (currentSpineIndex === readingOrderLength - 1 && pageIndex === numberOfPages - 1 && totalProgress > 0.99) {
+      return 1;
+    }
+    return totalProgress;
+  };
+  const getTotalProgressFromPercentages = (estimateBeforeThisItem, currentItemWeight, progressWithinThisItem) => {
+    return estimateBeforeThisItem + currentItemWeight * progressWithinThisItem;
+  };
+  const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
+    const { height, width } = currentItem.getElementDimensions();
+    const { top, left } = reader.spine.spineLayout.getAbsolutePositionOf(currentItem);
+    if (reader.settings.values.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.state.visibleAreaRect.width) / width
+        )
+      );
+    }
+  };
+  return {
+    ...reader,
+    progression: {
+      getPercentageEstimate,
+      getScrollPercentageWithinItem
+    }
+  };
+};
+const accessibilityEnhancer = (next) => (options) => {
+  const reader = next(options);
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.removeAttribute(`tab-index`);
+      } else {
+        entry.target.setAttribute(`tab-index`, `-1`);
+      }
+    });
+  }, {});
+  reader.hookManager.register(
+    `item.onDocumentLoad`,
+    ({ itemId, layers, destroy }) => {
+      var _a, _b;
+      const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+      if (!(frame instanceof HTMLIFrameElement)) return;
+      const item = reader.spineItemsManager.get(itemId);
+      if (!item) return;
+      item.upsertCSS(
+        `prose-reader-accessibility`,
+        `
+        :focus-visible {
+          ${/*
+          Some epubs remove the outline, this is not good practice since it reduce accessibility.
+          We will try to restore it by force.
+        */
+        ``}
+          outline: -webkit-focus-ring-color auto 1px;
+        }
+      `
+      );
+      const links = (_b = frame.contentDocument) == null ? void 0 : _b.body.querySelectorAll(`a`);
+      links == null ? void 0 : links.forEach((link) => {
+        observer.observe(link);
+      });
+      destroy(() => {
+        links == null ? void 0 : links.forEach((link) => {
+          observer.unobserve(link);
+        });
+      });
+    }
+  );
+  return {
+    ...reader
   };
-  cache$.asObservable().pipe(
-    mergeMap$1(({ id, data }) => {
-      const item = retrieveItem(id);
-      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));
-        }),
-        catchError$1((error) => {
-          Report.error(error);
-          return EMPTY;
-        })
+};
+navigator.userAgent.indexOf(``) > -1 && navigator.userAgent.indexOf(`Chrome`) <= -1;
+const webkitEnhancer = (createReader2) => (options) => {
+  const reader = createReader2(options);
+  return reader;
+};
+const HTML_PREFIX = `${HTML_PREFIX$1}-enhancer-loading`;
+const CONTAINER_HTML_PREFIX = `${HTML_PREFIX}-container`;
+const createLoadingElementContainer = (containerElement, context) => {
+  const loadingElement = containerElement.ownerDocument.createElement(`div`);
+  loadingElement.classList.add(CONTAINER_HTML_PREFIX);
+  loadingElement.style.cssText = `
+      height: 100%;
+      width: 100%;
+      max-width: ${context.state.visibleAreaRect.width}px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: rgb(202, 202, 202);
+      background-color: white;
+    `;
+  return loadingElement;
+};
+const defaultLoadingElementCreate = ({
+  container,
+  item
+}) => {
+  const logoElement = container.ownerDocument.createElement(`div`);
+  logoElement.innerText = `prose`;
+  logoElement.style.cssText = `
+      font-size: 4em;
+    `;
+  const detailsElement = container.ownerDocument.createElement(`div`);
+  detailsElement.innerText = `loading ${item.id}`;
+  detailsElement.style.cssText = `
+      font-size: 1.2em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 300px;
+      width: 80%;
+    `;
+  container.appendChild(logoElement);
+  container.appendChild(detailsElement);
+  return container;
+};
+const loadingEnhancer = (next) => (options) => {
+  const { loadingElementCreate = defaultLoadingElementCreate } = options;
+  const reader = next(options);
+  const createEntries$ = (items) => of(
+    items.reduce((acc, { item, element }) => {
+      const alreadyExistingElement = element.querySelector(
+        `.${CONTAINER_HTML_PREFIX}`
       );
-    }),
-    takeUntil$1(context.destroy$)
-  ).subscribe();
-  const onLoad$ = context.manifest$.pipe(
-    tap(() => {
-      uniqueID = Date.now().toString();
+      if (alreadyExistingElement instanceof HTMLElement)
+        return {
+          ...acc,
+          [item.id]: alreadyExistingElement
+        };
+      const loadingElementContainer = loadingElementCreate({
+        container: createLoadingElementContainer(element, reader.context),
+        item
+      });
+      element.appendChild(loadingElementContainer);
+      return {
+        ...acc,
+        [item.id]: loadingElementContainer
+      };
+    }, {})
+  );
+  const updateEntriesLayout$ = (entries) => combineLatest([reader.layout$, reader.theme.$.theme$]).pipe(
+    map(([, theme]) => ({
+      width: reader.context.state.visibleAreaRect.width,
+      theme
+    })),
+    distinctUntilChanged(isShallowEqual),
+    tap(({ width, theme }) => {
+      Object.values(entries).forEach((element) => {
+        element.style.setProperty(`max-width`, `${width}px`);
+        element.style.setProperty(
+          `color`,
+          theme === `sepia` ? `#939393` : `rgb(202, 202, 202)`
+        );
+      });
     })
   );
-  merge(onLoad$).pipe(
-    switchMap$1(() => {
-      Report.log(`Cleanup up old cache...`);
-      return from(openDatabase(`prose-reader`)).pipe(
-        switchMap$1(
-          (db) => from(db.keys()).pipe(
-            map(
-              (keys) => keys.filter((key) => !key.toString().startsWith(uniqueID))
-            ),
-            switchMap$1((keysToRemove) => {
-              const promises = keysToRemove.map((key) => db.remove(key));
-              return from(Promise.all(promises));
-            })
-          )
-        ),
-        catchError$1((error) => {
-          Report.error(error);
-          return EMPTY;
-        })
+  const updateEntriesVisibility$ = (entries) => reader.spineItemsObserver.itemIsReady$.pipe(
+    tap(({ item, isReady }) => {
+      var _a;
+      (_a = entries[item.item.id]) == null ? void 0 : _a.style.setProperty(
+        `visibility`,
+        isReady ? `hidden` : `visible`
       );
-    }),
-    takeUntil$1(context.destroy$)
+    })
+  );
+  const loadingItems$ = reader.spineItemsManager.items$.pipe(
+    switchMap$1((items) => createEntries$(items)),
+    shareReplay(1),
+    takeUntil$1(reader.context.destroy$)
+  );
+  loadingItems$.pipe(
+    switchMap$1(
+      (entries) => merge(
+        updateEntriesLayout$(entries),
+        updateEntriesVisibility$(entries)
+      )
+    ),
+    takeUntil$1(reader.$.destroy$)
   ).subscribe();
-  const destroy = () => {
-    cache$.complete();
-  };
   return {
-    get,
-    destroy
+    ...reader,
+    loading: {
+      $: {
+        items$: loadingItems$
+      }
+    }
   };
 };
-const resourcesEnhancer = (next) => (options) => {
-  const reader = next(options);
-  const resourceManager = createResourcesManager(reader.context);
-  const destroy = () => {
-    resourceManager.destroy();
-    reader.destroy();
-  };
+const translateFramePositionIntoPage = ({
+  position,
+  frameElement,
+  pageWidth,
+  pageHeight
+}) => {
+  const {
+    height: viewportHeight = pageHeight,
+    width: viewportWidth = pageWidth
+  } = getFrameViewportInfo(frameElement);
+  const computedWidthScale = pageWidth / viewportWidth;
+  const computedScale = Math.min(
+    computedWidthScale,
+    pageHeight / viewportHeight
+  );
+  const { left = 0, top = 0 } = (frameElement == null ? void 0 : frameElement.getBoundingClientRect()) || {};
+  const adjustedX = position.clientX * computedScale + left;
+  const adjustedY = position.clientY * computedScale + top;
   return {
-    ...reader,
-    // $: {
-    //   ...reader.$,
-    //   errors$: merge(reader.$.errors$, errorsSubject$.asObservable())
-    // },
-    destroy
-    // load,
+    clientX: adjustedX,
+    clientY: adjustedY
   };
 };
-const mediaEnhancer = (next) => (options) => {
+const normalizeEventForViewport = (event, iframeOriginalEvent, locator, context) => {
+  var _a, _b;
+  const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
+  if (!iframeOriginalEvent || !originalFrame) return event;
+  const spineItem = locator.getSpineItemFromIframe(originalFrame);
+  const frameElement = (_b = spineItem == null ? void 0 : spineItem.renderer.layers[0]) == null ? void 0 : _b.element;
+  const { height: pageHeight, width: pageWidth } = context.getPageSize();
+  if (!spineItem || !(frameElement instanceof HTMLIFrameElement)) return event;
+  if (isPointerEvent(event)) {
+    const { clientX, clientY } = translateFramePositionIntoPage({
+      position: event,
+      frameElement,
+      pageHeight,
+      pageWidth
+    });
+    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 } = translateFramePositionIntoPage({
+      position: event,
+      frameElement,
+      pageHeight,
+      pageWidth
+    });
+    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 } = translateFramePositionIntoPage({
+        position: touch,
+        frameElement,
+        pageHeight,
+        pageWidth
+      });
+      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;
+};
+const pointerEvents = [
+  `pointercancel`,
+  `pointerdown`,
+  `pointerenter`,
+  `pointerleave`,
+  `pointermove`,
+  `pointerout`,
+  `pointerover`,
+  `pointerup`
+];
+const passthroughEvents = [
+  ...pointerEvents
+  /*, ...mouseEvents*/
+];
+const eventsEnhancer = (next) => (options) => {
   const reader = next(options);
-  const frameObserver = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        var _a;
-        const frame = entry.target;
-        const audios = Array.from(
-          ((_a = frame.contentDocument) == null ? void 0 : _a.body.getElementsByTagName(`audio`)) || []
-        );
-        if (!entry.isIntersecting) {
-          audios.forEach((audioElement) => {
-            audioElement.pause();
-            audioElement.currentTime = 0;
-          });
-        } else {
-          audios.forEach((audioElement) => {
-            if (audioElement.hasAttribute(`autoplay`) && audioElement.paused && audioElement.readyState >= 2) {
-              audioElement.play().catch(console.error);
-            }
-          });
-        }
+  reader.hookManager.register(
+    `item.onDocumentLoad`,
+    ({ destroy, layers, itemId }) => {
+      var _a;
+      const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+      if (!(frame instanceof HTMLIFrameElement)) return;
+      const item = reader.spineItemsManager.get(itemId);
+      if (!item) return;
+      const unregister = passthroughEvents.map((event) => {
+        var _a2;
+        const listener = (e) => {
+          var _a3;
+          let convertedEvent = e;
+          if (isPointerEvent(e)) {
+            convertedEvent = new PointerEvent(e.type, e);
+          }
+          if (convertedEvent !== e) {
+            const normalizedEvent = normalizeEventForViewport(
+              convertedEvent,
+              e,
+              reader.spine.locator,
+              reader.context
+            );
+            (_a3 = reader.context.state.containerElement) == null ? void 0 : _a3.dispatchEvent(
+              normalizedEvent
+            );
+          }
+        };
+        (_a2 = frame.contentDocument) == null ? void 0 : _a2.addEventListener(event, listener);
+        return () => {
+          var _a3;
+          (_a3 = frame.contentDocument) == null ? void 0 : _a3.removeEventListener(event, listener);
+        };
+      });
+      item.selectionTracker.track(frame);
+      item.fingerTracker.track(frame);
+      destroy(() => {
+        unregister.forEach((cb) => cb());
       });
-    },
-    {
-      threshold: 0.01
     }
   );
-  const elementObserver = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.target.tagName === `video`) {
-          const video = entry.target;
-          if (!entry.isIntersecting) {
-            video.pause();
-            video.currentTime = 0;
-          } else {
-            if (video.hasAttribute(`autoplay`)) {
-              if (video.paused && video.readyState >= 2) {
-                video.play().catch(console.error);
-              }
+  return reader;
+};
+const createFrameElement = Report.measurePerformance(
+  `SpineItemFrame createFrame`,
+  Infinity,
+  () => {
+    const frame = document.createElement(`iframe`);
+    frame.frameBorder = `no`;
+    frame.tabIndex = 0;
+    frame.setAttribute(
+      `sandbox`,
+      `
+    allow-same-origin 
+    allow-scripts 
+    allow-top-navigation-to-custom-protocols
+  `
+    );
+    frame.style.cssText = `
+    overflow: hidden;
+    background-color: transparent;
+    border: 0px none transparent;
+    padding: 0px;
+  `;
+    frame.setAttribute(`role`, `main`);
+    return frame;
+  }
+);
+const getIntrinsicDimensionsFromBase64Img = (data) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.src = data;
+  image.onload = () => {
+    resolve({ height: image.naturalHeight, width: image.naturalWidth });
+  };
+  image.onerror = reject;
+});
+const createHtmlPageFromResource = async (resourceResponse, item) => {
+  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());
+    const { height, width } = await getIntrinsicDimensionsFromBase64Img(data);
+    return `
+      <html>
+        <head>
+          ${item.renditionLayout !== `reflowable` ? `<meta name="viewport" content="width=${width}, height=${height}">` : ``}
+        </head>
+        <body style="margin: 0px;" tab-index="-1;">
+          <img
+            src="${data}"
+            style="max-width: 100%;height:100%;object-fit:contain;"
+          >
+        </body>
+      </html>
+        `;
+  }
+  if ([`text/plain`].some((mime) => mime === contentType)) {
+    const data = await resourceResponse.text();
+    return `
+      <!DOCTYPE html>
+      <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en" lang="en">
+        <head>
+          <style>
+            pre {
+              white-space: pre;
+              white-space: pre-wrap;
+              word-wrap: break-word;
             }
+          </style>
+        </head>
+        <body>
+          <pre>${data}</pre>
+        </body>
+      </html>
+    `;
+  }
+  const content = await resourceResponse.text();
+  return content;
+};
+const attachFrameSrc = ({
+  item,
+  resourcesHandler
+}) => {
+  const getHtmlFromResource = (response) => createHtmlPageFromResource(response, item);
+  return (stream) => stream.pipe(
+    switchMap((frameElement) => {
+      return from(resourcesHandler.getResource()).pipe(
+        switchMap((resource) => {
+          if (resource instanceof URL && item.href.startsWith(window.location.origin) && // we have an encoding and it's a valid html
+          (item.mediaType && [
+            `application/xhtml+xml`,
+            `application/xml`,
+            `text/html`,
+            `text/xml`
+          ].includes(item.mediaType) || // no encoding ? then try to detect html
+          !item.mediaType && ITEM_EXTENSION_VALID_FOR_FRAME_SRC.some(
+            (extension) => item.href.endsWith(extension)
+          ))) {
+            frameElement == null ? void 0 : frameElement.setAttribute(`src`, item.href);
+            return of(frameElement);
+          } else {
+            const resourceResponse$ = resource instanceof URL ? from(resourcesHandler.fetchResource()) : resource instanceof Response ? of(resource) : EMPTY;
+            return resourceResponse$.pipe(
+              filter$1((response) => response instanceof Response),
+              switchMap((response) => from(getHtmlFromResource(response))),
+              tap$1((htmlDoc) => {
+                if (htmlDoc) {
+                  const blob = new Blob([htmlDoc], { type: "text/html" });
+                  const blobURL = URL.createObjectURL(blob);
+                  frameElement == null ? void 0 : frameElement.setAttribute(`src`, blobURL);
+                }
+              }),
+              map$1(() => frameElement),
+              catchError$1((e) => {
+                Report.error(
+                  `Error while trying to fetch or load resource for item ${item.id}`
+                );
+                console.error(e);
+                return of(frameElement);
+              })
+            );
           }
-        }
-      });
-    },
-    {
-      threshold: 0.5
-    }
+        })
+      );
+    })
   );
-  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`);
-    const unobserveElements = Array.from(videos || []).map((element) => {
-      elementObserver.observe(element);
-      return () => elementObserver.unobserve(element);
-    });
-    destroy2(() => {
-      frameObserver.unobserve(frame);
-      unobserveElements.forEach((unobserve) => unobserve());
-    });
-  });
-  const destroy = () => {
-    frameObserver.disconnect();
-    elementObserver.disconnect();
-    reader.destroy();
-  };
-  return {
-    ...reader,
-    destroy
-  };
 };
-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.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)) || 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;
+const getStyleForViewportDocument = () => {
+  return `
+    body {
+        margin: 0;
+        }
+      }
+    `;
+};
+const getViewPortInformation = ({
+  pageHeight,
+  pageWidth,
+  frameElement
+}) => {
+  const viewportDimensions = getFrameViewportInfo(frameElement);
+  if ((frameElement == null ? void 0 : frameElement.contentDocument) && frameElement.contentWindow && viewportDimensions) {
+    const computedWidthScale = pageWidth / (viewportDimensions.width ?? 1);
+    const computedScale = Math.min(
+      computedWidthScale,
+      pageHeight / (viewportDimensions.height ?? 1)
+    );
+    return { computedScale, computedWidthScale, viewportDimensions };
+  }
+};
+const buildDocumentStyle = ({
+  columnWidth,
+  enableTouch,
+  spreadPosition
+}, viewportDimensions) => {
+  return `
+      ${getStyleForViewportDocument()}
+      body {
+        ${!viewportDimensions ? `
+          display: flex;
+          justify-content: ${spreadPosition === `left` ? `flex-end` : spreadPosition === `right` ? `flex-start` : `center`};
+        ` : ``}
+      }
+      ${/*
+    might be html * but it does mess up things like figure if so.
+    check accessible_epub_3
+  */
+  ``}
+      html, body {
+        height: 100%;
+        width: 100%;
+      }
+      ${/*
+    This one is important for preventing 100% img to resize above
+    current width. Especially needed for cbz conversion
+  */
+  ``}
+      html, body {
+        -max-width: ${columnWidth}px !important;
+      }
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  * It needs to be disabled when using free scroll
+  */
+  ``}
+      html, body {
+        ${enableTouch ? `
+          touch-action: none
+        ` : ``}
+      }
+      ${/*
+    prevent drag of image instead of touch on firefox
+  */
+  ``}
+      img {
+        user-select: none;
+        -webkit-user-drag: none;
+        -khtml-user-drag: none;
+        -moz-user-drag: none;
+        -o-user-drag: none;
+        user-drag: none;
+        ${/*
+    prevent weird overflow or margin. Try `block` if `flex` has weird behavior
+  */
+  ``}
+        display: flex;
+        ${/*
+    If the document does not have viewport, we cannot scale anything inside.
+    This should never happens with a valid epub document however it will happens if
+    we load .jpg, .png, etc directly in the iframe. This is expected, in this case we force
+    the inner content to display correctly.
+  */
+  ``}
+        ${!viewportDimensions ? `
+          -width: 100%;
+          max-width: 100%;
+          height:100%;
+          object-fit:contain;
+        ` : ``}
+      }
+    `;
+};
+const getDimensionsForPaginatedContent = ({
+  pageHeight: columnHeight,
+  pageWidth
+}) => {
+  const columnWidth = pageWidth;
+  return { columnHeight, columnWidth };
+};
+const staticLayout$1 = (frameElement, size) => {
+  frameElement.style.width = `${size.width}px`;
+  frameElement.style.height = `${size.height}px`;
+};
+const renderPrePaginated = ({
+  minPageSpread,
+  blankPagePosition,
+  spreadPosition,
+  pageHeight,
+  pageWidth,
+  frameElement,
+  isRTL,
+  enableTouch
+}) => {
+  const minimumWidth = minPageSpread * pageWidth;
+  if ((frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
+    const { viewportDimensions, computedScale = 1 } = getViewPortInformation({ frameElement, pageHeight, pageWidth }) ?? {};
+    const contentWidth = pageWidth;
+    const contentHeight = pageHeight;
+    const cssLink = buildDocumentStyle(
+      {
+        ...getDimensionsForPaginatedContent({ pageHeight, pageWidth }),
+        enableTouch,
+        spreadPosition
+      },
+      viewportDimensions
+    );
+    upsertCSS(frameElement, `prose-reader-css`, cssLink);
+    if (viewportDimensions) {
+      staticLayout$1(frameElement, {
+        width: viewportDimensions.width ?? 1,
+        height: viewportDimensions.height ?? 1
+      });
+    } else {
+      staticLayout$1(frameElement, {
+        width: contentWidth,
+        height: contentHeight
+      });
     }
-    let totalProgress = estimateBeforeThisItem + progressWithinThisItem;
-    if (((_f = context.manifest) == null ? void 0 : _f.renditionFlow) === `scrolled-continuous`) {
-      if (currentItem.isReady()) {
-        progressWithinThisItem = getScrollPercentageWithinItem(
-          context,
-          currentPosition,
-          currentItem
-        );
+    if (viewportDimensions) {
+      frameElement == null ? void 0 : frameElement.style.setProperty(`position`, `absolute`);
+      frameElement == null ? void 0 : frameElement.style.setProperty(`top`, `50%`);
+      if (spreadPosition === `left`) {
+        frameElement == null ? void 0 : frameElement.style.setProperty(`right`, `0`);
+        frameElement == null ? void 0 : frameElement.style.removeProperty(`left`);
+      } else if (blankPagePosition === `before` && isRTL) {
+        frameElement == null ? void 0 : frameElement.style.setProperty(`right`, `50%`);
+        frameElement == null ? void 0 : frameElement.style.removeProperty(`left`);
+      } else if (spreadPosition === `right`) {
+        frameElement == null ? void 0 : frameElement.style.setProperty(`left`, `0`);
+        frameElement == null ? void 0 : frameElement.style.removeProperty(`right`);
       } else {
-        progressWithinThisItem = 0;
+        frameElement == null ? void 0 : frameElement.style.setProperty(
+          `left`,
+          blankPagePosition === `before` ? isRTL ? `25%` : `75%` : blankPagePosition === `after` ? isRTL ? `75%` : `25%` : `50%`
+        );
+        frameElement == null ? void 0 : frameElement.style.removeProperty(`right`);
       }
-      totalProgress = getTotalProgressFromPercentages(
-        estimateBeforeThisItem,
-        currentItemWeight,
-        progressWithinThisItem
+      const transformTranslateX = spreadPosition !== `none` ? `0` : `-50%`;
+      const transformOriginX = spreadPosition === `right` && blankPagePosition !== `before` ? `left` : spreadPosition === `left` || blankPagePosition === `before` && isRTL ? `right` : `center`;
+      frameElement == null ? void 0 : frameElement.style.setProperty(
+        `transform`,
+        `translate(${transformTranslateX}, -50%) scale(${computedScale})`
       );
-    }
-    if (currentSpineIndex === readingOrderLength - 1 && pageIndex === numberOfPages - 1 && totalProgress > 0.99) {
-      return 1;
-    }
-    return totalProgress;
-  };
-  const getTotalProgressFromPercentages = (estimateBeforeThisItem, currentItemWeight, progressWithinThisItem) => {
-    return estimateBeforeThisItem + currentItemWeight * progressWithinThisItem;
-  };
-  const getScrollPercentageWithinItem = (context, currentPosition, currentItem) => {
-    const { height, width } = currentItem.getElementDimensions();
-    const { top, left } = reader.spine.spineLayout.getAbsolutePositionOf(currentItem);
-    if (reader.settings.values.computedPageTurnDirection === `vertical`) {
-      return Math.max(
-        0,
-        Math.min(
-          1,
-          (currentPosition.y - top + context.state.visibleAreaRect.height) / height
-        )
+      frameElement == null ? void 0 : frameElement.style.setProperty(
+        `transform-origin`,
+        `${transformOriginX} center`
       );
     } else {
-      return Math.max(
-        0,
-        Math.min(
-          1,
-          (currentPosition.x - left + context.state.visibleAreaRect.width) / width
-        )
-      );
-    }
-  };
-  return {
-    ...reader,
-    progression: {
-      getPercentageEstimate,
-      getScrollPercentageWithinItem
+      if (blankPagePosition === `before`) {
+        if (isRTL) {
+          frameElement == null ? void 0 : frameElement.style.setProperty(`margin-right`, `${pageWidth}px`);
+        } else {
+          frameElement == null ? void 0 : frameElement.style.setProperty(`margin-left`, `${pageWidth}px`);
+        }
+      } else {
+        frameElement == null ? void 0 : frameElement.style.removeProperty(`margin-left`);
+        frameElement == null ? void 0 : frameElement.style.removeProperty(`margin-right`);
+      }
     }
-  };
+    return { width: minimumWidth, height: contentHeight };
+  }
+  return { width: minimumWidth, height: pageHeight };
 };
-const accessibilityEnhancer = (next) => (options) => {
-  const reader = next(options);
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        entry.target.removeAttribute(`tab-index`);
-      } else {
-        entry.target.setAttribute(`tab-index`, `-1`);
+const buildStyleForViewportFrame = () => {
+  return `
+      ${getStyleForViewportDocument()}
+      html {
+        width: 100%;
+        height: 100%;
       }
-    });
-  }, {});
-  reader.hookManager.register(`item.onLoad`, ({ itemId, frame, destroy }) => {
-    var _a;
-    const item = reader.spineItemsManager.get(itemId);
-    if (!item) return;
-    item.frame.addStyle(
-      `prose-reader-accessibility`,
-      `
-        :focus-visible {
-          ${/*
-        Some epubs remove the outline, this is not good practice since it reduce accessibility.
-        We will try to restore it by force.
-      */
-      ``}
-          outline: -webkit-focus-ring-color auto 1px;
-        }
-      `
-    );
-    const links = (_a = frame.contentDocument) == null ? void 0 : _a.body.querySelectorAll(`a`);
-    links == null ? void 0 : links.forEach((link) => {
-      observer.observe(link);
-    });
-    destroy(() => {
-      links == null ? void 0 : links.forEach((link) => {
-        observer.unobserve(link);
-      });
-    });
-  });
-  return {
-    ...reader
-  };
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        touch-action: none;
+      }
+    `;
 };
-navigator.userAgent.indexOf(``) > -1 && navigator.userAgent.indexOf(`Chrome`) <= -1;
-const webkitEnhancer = (createReader2) => (options) => {
-  const reader = createReader2(options);
-  return reader;
+const buildStyleForReflowableImageOnly = ({
+  isScrollable,
+  enableTouch
+}) => {
+  return `
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        ${enableTouch ? `
+          touch-action: none
+        ` : ``}
+      }
+      ${isScrollable ? `
+        img {
+          height: auto !important;
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+          ${// we make sure img spread on entire screen
+  ``}
+          width: 100%;
+          ${/**
+  * line break issue
+  * @see https://stackoverflow.com/questions/37869020/image-not-taking-up-the-full-height-of-container
+  */
+  ``}
+          display: block;
+        }
+      ` : ``}
+    `;
 };
-const HTML_PREFIX = `${HTML_PREFIX$1}-enhancer-loading`;
-const CONTAINER_HTML_PREFIX = `${HTML_PREFIX}-container`;
-const loadingEnhancer = (next) => (options) => {
-  const { loadingElementCreate = defaultLoadingElementCreate } = options;
-  const reader = next(options);
-  const createEntries$ = (items) => of(
-    items.reduce((acc, { item, element }) => {
-      const alreadyExistingElement = element.querySelector(
-        `.${CONTAINER_HTML_PREFIX}`
-      );
-      if (alreadyExistingElement instanceof HTMLElement)
-        return {
-          ...acc,
-          [item.id]: alreadyExistingElement
-        };
-      const loadingElementContainer = loadingElementCreate({
-        container: createLoadingElementContainer(element, reader.context),
-        item
-      });
-      element.appendChild(loadingElementContainer);
-      return {
-        ...acc,
-        [item.id]: loadingElementContainer
-      };
-    }, {})
-  );
-  const updateEntriesLayout$ = (entries) => combineLatest([reader.layout$, reader.theme.$.theme$]).pipe(
-    map(([, theme]) => ({
-      width: reader.context.state.visibleAreaRect.width,
-      theme
-    })),
-    distinctUntilChanged(isShallowEqual),
-    tap(({ width, theme }) => {
-      Object.values(entries).forEach((element) => {
-        element.style.setProperty(`max-width`, `${width}px`);
-        element.style.setProperty(
-          `color`,
-          theme === `sepia` ? `#939393` : `rgb(202, 202, 202)`
-        );
-      });
-    })
-  );
-  const updateEntriesVisibility$ = (entries) => reader.spineItemsObserver.itemIsReady$.pipe(
-    tap(({ item, isReady }) => {
-      var _a;
-      (_a = entries[item.item.id]) == null ? void 0 : _a.style.setProperty(
-        `visibility`,
-        isReady ? `hidden` : `visible`
-      );
-    })
-  );
-  const loadingItems$ = reader.spineItemsManager.items$.pipe(
-    switchMap$1((items) => createEntries$(items)),
-    shareReplay(1),
-    takeUntil$1(reader.context.destroy$)
-  );
-  loadingItems$.pipe(
-    switchMap$1(
-      (entries) => merge(
-        updateEntriesLayout$(entries),
-        updateEntriesVisibility$(entries)
-      )
-    ),
-    takeUntil$1(reader.$.destroy$)
-  ).subscribe();
-  return {
-    ...reader,
-    loading: {
-      $: {
-        items$: loadingItems$
+const buildStyleWithMultiColumn = ({
+  width,
+  columnHeight,
+  columnWidth
+}) => {
+  return `
+      parsererror {
+        display: none !important;
+      }
+      ${/*
+    might be html * but it does mess up things like figure if so.
+    check accessible_epub_3
+  */
+  ``}
+      html, body {
+        margin: 0;
+        padding: 0 !important;
+        -max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    body {
+      height: ${columnHeight}px !important;
+      width: ${columnWidth}px !important;
+      -margin-left: ${horizontalMargin}px !important;
+      -margin-right: ${horizontalMargin}px !important;
+      -margin: ${verticalMargin}px ${horizontalMargin}px !important;
+      -padding-top: ${horizontalMargin}px !important;
+      -padding-bottom: ${horizontalMargin}px !important;
+    }
+  */
+  ``}
+      body {
+        padding: 0 !important;
+        width: ${width}px !important;
+        height: ${columnHeight}px !important;
+        overflow-y: hidden;
+        column-gap: 0px !important;
+        column-width: ${columnWidth}px !important;
+        column-fill: auto !important;
+        word-wrap: break-word;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+      }
+      body:focus-visible {
+        ${/*
+    we make sure that there are no outline when we focus something inside the iframe
+  */
+  ``}
+        outline: none;
+      }
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        touch-action: none;
+      }
+      ${/*
+    this messes up hard, be careful with this
+  */
+  ``}
+      * {
+        -max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    this is necessary to have a proper calculation when determining size
+    of iframe content. If an img is using something like width:100% it would expand to
+    the size of the original image and potentially gives back a wrong size (much larger)
+    @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+  */
+  ``}
+      img, video, audio, object, svg {
+        max-width: 100%;
+        max-width: ${columnWidth}px !important;
+        max-height: ${columnHeight}px !important;
+        -pointer-events: none;
+        -webkit-column-break-inside: avoid;
+        page-break-inside: avoid;
+        break-inside: avoid;
+      }
+      figure {
+        d-max-width: ${columnWidth}px !important;
+      }
+      img {
+        object-fit: contain;
+        break-inside: avoid;
+        box-sizing: border-box;
+        d-max-width: ${columnWidth}px !important;
       }
+      ${/*
+    img, video, audio, object, svg {
+      max-height: ${columnHeight}px !important;
+      box-sizing: border-box;
+      object-fit: contain;
+      -webkit-column-break-inside: avoid;
+      page-break-inside: avoid;
+      break-inside: avoid;
     }
+  */
+  ``}
+      table {
+        max-width: ${columnWidth}px !important;
+        table-layout: fixed;
+      }
+      td {
+        max-width: ${columnWidth}px;
+      }
+    `;
+};
+const getDimensionsForReflowableContent = ({
+  isUsingVerticalWriting,
+  minimumWidth,
+  pageHeight,
+  pageWidth
+}) => {
+  const horizontalMargin = 0;
+  const verticalMargin = 0;
+  let columnWidth = pageWidth - horizontalMargin * 2;
+  const columnHeight = pageHeight - verticalMargin * 2;
+  let width = pageWidth - horizontalMargin * 2;
+  if (isUsingVerticalWriting) {
+    width = minimumWidth - horizontalMargin * 2;
+    columnWidth = columnHeight;
+  }
+  return {
+    columnHeight,
+    columnWidth,
+    width
   };
 };
-const createLoadingElementContainer = (containerElement, context) => {
-  const loadingElement = containerElement.ownerDocument.createElement(`div`);
-  loadingElement.classList.add(CONTAINER_HTML_PREFIX);
-  loadingElement.style.cssText = `
-    height: 100%;
-    width: 100%;
-    max-width: ${context.state.visibleAreaRect.width}px;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    position: absolute;
-    left: 0;
-    top: 0;
-    color: rgb(202, 202, 202);
-    -background-color: white;
-  `;
-  return loadingElement;
+const staticLayout = (frameElement, size) => {
+  frameElement.style.width = `${size.width}px`;
+  frameElement.style.height = `${size.height}px`;
 };
-const defaultLoadingElementCreate = ({
-  container,
-  item
+const renderReflowable = ({
+  pageHeight: pageSizeHeight,
+  pageWidth,
+  frameElement,
+  manifest,
+  latestContentHeightWhenLoaded,
+  minPageSpread,
+  isRTL,
+  blankPagePosition,
+  isImageType,
+  enableTouch,
+  isUsingVerticalWriting
 }) => {
-  const logoElement = container.ownerDocument.createElement(`div`);
-  logoElement.innerText = `prose`;
-  logoElement.style.cssText = `
-    font-size: 4em;
-  `;
-  const detailsElement = container.ownerDocument.createElement(`div`);
-  detailsElement.innerText = `loading ${item.id}`;
-  detailsElement.style.cssText = `
-    font-size: 1.2em;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 300px;
-    width: 80%;
-  `;
-  container.appendChild(logoElement);
-  container.appendChild(detailsElement);
-  return container;
+  const minimumWidth = minPageSpread * pageWidth;
+  let newLatestContentHeightWhenLoaded = latestContentHeightWhenLoaded;
+  const continuousScrollableReflowableItem = (manifest == null ? void 0 : manifest.renditionLayout) === "reflowable" && (manifest == null ? void 0 : manifest.renditionFlow) === "scrolled-continuous";
+  const pageHeight = continuousScrollableReflowableItem ? Math.min(400, pageSizeHeight) : pageSizeHeight;
+  frameElement == null ? void 0 : frameElement.style.setProperty(`width`, `${pageWidth}px`);
+  if (!continuousScrollableReflowableItem) {
+    frameElement == null ? void 0 : frameElement.style.setProperty(`height`, `${pageHeight}px`);
+  }
+  const { viewportDimensions, computedScale = 1 } = getViewPortInformation({
+    frameElement,
+    pageHeight,
+    pageWidth
+  }) ?? {};
+  const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
+  if ((frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
+    let contentWidth = pageWidth;
+    let contentHeight = pageHeight;
+    frameElement == null ? void 0 : frameElement.style.setProperty(`visibility`, `visible`);
+    frameElement == null ? void 0 : frameElement.style.setProperty(`opacity`, `1`);
+    if (viewportDimensions == null ? void 0 : viewportDimensions.hasViewport) {
+      upsertCSS(
+        frameElement,
+        `prose-reader-html-renderer-framce-css`,
+        buildStyleForViewportFrame()
+      );
+      staticLayout(
+        frameElement,
+        {
+          width: viewportDimensions.width ?? 1,
+          height: viewportDimensions.height ?? 1
+        }
+      );
+      frameElement == null ? void 0 : frameElement.style.setProperty(`position`, `absolute`);
+      frameElement == null ? void 0 : frameElement.style.setProperty(`top`, `50%`);
+      frameElement == null ? void 0 : frameElement.style.setProperty(
+        `left`,
+        blankPagePosition === `before` ? isRTL ? `25%` : `75%` : blankPagePosition === `after` ? isRTL ? `75%` : `25%` : `50%`
+      );
+      frameElement == null ? void 0 : frameElement.style.setProperty(
+        `transform`,
+        `translate(-50%, -50%) scale(${computedScale})`
+      );
+      frameElement == null ? void 0 : frameElement.style.setProperty(`transform-origin`, `center center`);
+    } else {
+      const frameStyle = isImageType ? buildStyleForReflowableImageOnly({
+        isScrollable: (manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`,
+        enableTouch
+      }) : buildStyleWithMultiColumn(
+        getDimensionsForReflowableContent({
+          isUsingVerticalWriting,
+          minimumWidth,
+          pageHeight,
+          pageWidth
+        })
+      );
+      upsertCSS(frameElement, `prose-reader-css`, frameStyle, true);
+      if (isUsingVerticalWriting) {
+        const pages = Math.ceil(
+          frameElement.contentDocument.documentElement.scrollHeight / pageHeight
+        );
+        contentHeight = pages * pageHeight;
+        staticLayout(
+          frameElement,
+          {
+            width: minimumWidth,
+            height: contentHeight
+          }
+        );
+      } else if ((manifest == null ? void 0 : manifest.renditionFlow) === `scrolled-continuous`) {
+        contentHeight = frameElement.contentDocument.body.scrollHeight;
+        newLatestContentHeightWhenLoaded = contentHeight;
+        staticLayout(
+          frameElement,
+          {
+            width: minimumWidth,
+            height: contentHeight
+          }
+        );
+      } else {
+        const pages = Math.ceil(
+          frameElement.contentDocument.documentElement.scrollWidth / pageWidth
+        );
+        if (isGloballyPrePaginated) {
+          contentWidth = pageWidth;
+        } else {
+          contentWidth = pages * pageWidth;
+        }
+        staticLayout(
+          frameElement,
+          {
+            width: contentWidth,
+            height: contentHeight
+          }
+        );
+      }
+    }
+    const isFillingAllScreen = contentWidth % minimumWidth === 0;
+    if (!isFillingAllScreen) {
+      contentWidth = contentWidth + pageWidth;
+      if (isRTL && !isUsingVerticalWriting) {
+        frameElement == null ? void 0 : frameElement.style.setProperty(`margin-left`, `${pageWidth}px`);
+      }
+    } else {
+      frameElement == null ? void 0 : frameElement.style.setProperty(`margin-left`, `0px`);
+    }
+    return { width: contentWidth, height: contentHeight };
+  }
+  const height = newLatestContentHeightWhenLoaded || pageHeight;
+  return {
+    width: minimumWidth,
+    height,
+    latestContentHeightWhenLoaded: newLatestContentHeightWhenLoaded
+  };
 };
-const normalizeEventForViewport = (event, iframeOriginalEvent, locator) => {
-  var _a;
-  const originalFrame = (_a = iframeOriginalEvent == null ? void 0 : iframeOriginalEvent.view) == null ? void 0 : _a.frameElement;
-  if (!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;
+class HtmlRenderer extends DocumentRenderer {
+  constructor(context, settings, hookManager, item, containerElement, resourcesHandler) {
+    super(
+      context,
+      settings,
+      hookManager,
+      item,
+      containerElement,
+      resourcesHandler
+    );
+    this.isImageType = () => {
+      const mimeType = this.item.mediaType ?? detectMimeTypeFromName(this.item.href);
+      return !!(mimeType == null ? void 0 : mimeType.startsWith(`image/`));
+    };
   }
-  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;
+  onCreateDocument() {
+    const frameElement = createFrameElement();
+    this.layers = [
+      {
+        element: frameElement
+      }
+    ];
+    return EMPTY;
+  }
+  onLoadDocument() {
+    const frameElement = this.getFrameElement();
+    if (!frameElement) throw new Error(`invalid frame`);
+    return of(frameElement).pipe(
+      attachFrameSrc({
+        item: this.item,
+        resourcesHandler: this.resourcesHandler,
+        settings: this.settings
+      }),
+      waitForSwitch(this.context.bridgeEvent.viewportFree$),
+      tap$1((frameElement2) => {
+        this.containerElement.appendChild(frameElement2);
+      }),
+      waitForFrameLoad,
+      waitForFrameReady
+    );
   }
-  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
+  onUnload() {
+    this.layers.forEach((layer) => layer.element.remove());
+    this.layers = [];
+    return EMPTY;
+  }
+  layout({
+    minPageSpread,
+    blankPagePosition,
+    spreadPosition
+  }) {
+    var _a;
+    const { width: pageWidth, height: pageHeight } = this.context.getPageSize();
+    const frameElement = this.getFrameElement();
+    if (!frameElement) return { width: pageWidth, height: pageHeight };
+    const isUsingVerticalWriting = !!((_a = this.writingMode) == null ? void 0 : _a.startsWith(`vertical`));
+    if (this.item.renditionLayout === `pre-paginated`) {
+      return renderPrePaginated({
+        blankPagePosition,
+        enableTouch: this.settings.values.computedPageTurnMode !== `scrollable`,
+        frameElement,
+        isRTL: this.context.isRTL(),
+        minPageSpread,
+        pageHeight,
+        pageWidth,
+        spreadPosition
       });
+    }
+    const { latestContentHeightWhenLoaded, ...rest } = renderReflowable({
+      pageHeight,
+      pageWidth,
+      frameElement,
+      manifest: this.context.manifest,
+      blankPagePosition,
+      isUsingVerticalWriting,
+      isRTL: this.context.isRTL(),
+      latestContentHeightWhenLoaded: this.latestContentHeightWhenLoaded,
+      minPageSpread,
+      isImageType: this.isImageType(),
+      enableTouch: this.settings.values.computedPageTurnMode !== `scrollable`
     });
-    const newEvent = new TouchEvent(event.type, {
-      touches,
-      changedTouches: touches,
-      targetTouches: touches
-    });
-    Object.defineProperty(newEvent, `target`, {
-      value: iframeOriginalEvent.target,
-      enumerable: true
-    });
-    return newEvent;
+    this.latestContentHeightWhenLoaded = latestContentHeightWhenLoaded;
+    return rest;
   }
-  return event;
-};
-const pointerEvents = [
-  `pointercancel`,
-  `pointerdown`,
-  `pointerenter`,
-  `pointerleave`,
-  `pointermove`,
-  `pointerout`,
-  `pointerover`,
-  `pointerup`
-];
-const passthroughEvents = [
-  ...pointerEvents
-  /*, ...mouseEvents*/
-];
-const eventsEnhancer = (next) => (options) => {
-  const reader = next(options);
-  reader.hookManager.register(`item.onLoad`, ({ destroy, frame, itemId }) => {
-    const item = reader.spineItemsManager.get(itemId);
-    if (!item) return;
-    const unregister = passthroughEvents.map((event) => {
+  getFrameElement() {
+    var _a;
+    const frame = (_a = this.layers[0]) == null ? void 0 : _a.element;
+    if (!(frame instanceof HTMLIFrameElement)) return;
+    return frame;
+  }
+  // @todo optimize
+  getComputedStyleAfterLoad() {
+    var _a, _b;
+    const frame = this.getFrameElement();
+    const body = (_a = frame == null ? void 0 : frame.contentDocument) == null ? void 0 : _a.body;
+    if (body) {
+      return (_b = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _b.getComputedStyle(body);
+    }
+  }
+  get writingMode() {
+    var _a;
+    return (_a = this.getComputedStyleAfterLoad()) == null ? void 0 : _a.writingMode;
+  }
+  get readingDirection() {
+    var _a;
+    const writingMode = this.writingMode;
+    if (writingMode === `vertical-rl`) {
+      return `rtl`;
+    }
+    const direction = (_a = this.getComputedStyleAfterLoad()) == null ? void 0 : _a.direction;
+    switch (direction) {
+      case `ltr`:
+      case `inherit`:
+      case `initial`: {
+        return `ltr`;
+      }
+      case `rtl`:
+        return `rtl`;
+      default:
+        return void 0;
+    }
+  }
+}
+const htmlEnhancer = (next) => (options) => {
+  const reader = next({
+    ...options,
+    getRenderer(item) {
       var _a;
-      const listener = (e) => {
-        var _a2;
-        let convertedEvent = e;
-        if (isPointerEvent(e)) {
-          convertedEvent = new PointerEvent(e.type, e);
-        }
-        if (convertedEvent !== e) {
-          const normalizedEvent = normalizeEventForViewport(
-            convertedEvent,
-            e,
-            reader.spine.locator
-          );
-          (_a2 = reader.context.state.containerElement) == null ? void 0 : _a2.dispatchEvent(
-            normalizedEvent
-          );
-        }
-      };
-      (_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());
-    });
+      const MaybeRenderer = (_a = options.getRenderer) == null ? void 0 : _a.call(options, item);
+      return MaybeRenderer ?? HtmlRenderer;
+    }
   });
   return reader;
 };
@@ -8089,8 +8218,10 @@ const createReaderWithEnhancers = (
                               paginationEnhancer(
                                 progressionEnhancer(
                                   eventsEnhancer(
-                                    // __
-                                    createReader
+                                    htmlEnhancer(
+                                      // __
+                                      createReader
+                                    )
                                   )
                                 )
                               )
@@ -8110,8 +8241,10 @@ const createReaderWithEnhancers = (
   )
 );
 export {
+  DocumentRenderer,
   HookManager,
   Report,
+  ResourceHandler,
   SettingsManager3 as SettingsManager,
   createReaderWithEnhancers as createReader,
   isHtmlElement,