@prose-reader/core 1.124.0 → 1.126.0

package/dist/index.js

@@ -265,7 +265,7 @@ const createMovingSafePan$ = (reader) => {
     })
   );
   const resetLockViewportFree$ = createResetLock$(
-    reader.navigation.viewportFree$
+    reader.viewportFree$
   ).pipe(take(1));
   const pageTurnMode$ = reader.settings.values$.pipe(
     map(() => reader.settings.values.computedPageTurnMode),
@@ -1515,7 +1515,9 @@ const themeEnhancer = (next) => (options) => {
   };
   reader.hookManager.register(`item.onDocumentLoad`, ({ itemId }) => {
     const item = reader.spineItemsManager.get(itemId);
-    item == null ? void 0 : item.upsertCSS(`prose-reader-theme`, getStyle());
+    if ((item == null ? void 0 : item.item.renditionLayout) !== "pre-paginated") {
+      item == null ? void 0 : item.upsertCSS(`prose-reader-theme`, getStyle());
+    }
   });
   reader.spineItemsManager.items$.pipe(
     tap(
@@ -3417,15 +3419,16 @@ class CfiHandler {
     return this.resolveLast(doc, opts);
   }
 }
-const extractProseMetadataFromCfi = (cfi) => {
+const parseCfi = (cfi) => {
   var _a, _b;
-  const [itemId] = ((_a = cfi.match(/\|(\[prose\~anchor[^\]]*\])+/gi)) == null ? void 0 : _a.map((s) => s.replace(/\|\[prose\~anchor\~/, ``).replace(/\]/, ``))) || [];
+  const [itemIndex] = ((_a = cfi.match(/\|(\[prose\~anchor[^\]]*\])+/gi)) == null ? void 0 : _a.map((s) => s.replace(/\|\[prose\~anchor\~/, ``).replace(/\]/, ``))) || [];
   const [offset] = ((_b = cfi.match(/\|(\[prose\~offset[^\]]*\])+/gi)) == null ? void 0 : _b.map((s) => s.replace(/\|\[prose\~offset\~/, ``).replace(/\]/, ``))) || [];
   const cleanedCfi = cfi.replace(/\|(\[prose\~[^\]]*\~[^\]]*\])+/gi, ``);
   const foundOffset = parseInt(offset || ``);
+  const foundItemIndex = parseInt(itemIndex || ``);
   return {
     cleanedCfi,
-    itemId: itemId ? decodeURIComponent(itemId) : itemId,
+    itemIndex: isNaN(foundItemIndex) ? void 0 : foundItemIndex,
     offset: isNaN(foundOffset) ? void 0 : foundOffset
   };
 };
@@ -3436,9 +3439,8 @@ const resolveCfi = ({
   var _a, _b;
   if (!cfi) return void 0;
   const spineItem = spineItemsManager.getSpineItemFromCfi(cfi);
-  const spineItemIndex = spineItemsManager.getSpineItemIndex(spineItem) || 0;
   if (!spineItem) return void 0;
-  const { cleanedCfi, offset } = extractProseMetadataFromCfi(cfi);
+  const { cleanedCfi, offset } = parseCfi(cfi);
   const cfiHandler = new CfiHandler(cleanedCfi, {});
   const rendererElement = (_a = spineItem.renderer.layers[0]) == null ? void 0 : _a.element;
   if (rendererElement instanceof HTMLIFrameElement) {
@@ -3449,20 +3451,17 @@ const resolveCfi = ({
         return {
           node,
           offset: offset ?? resolvedOffset,
-          spineItemIndex,
           spineItem
         };
       } catch (e) {
         Report.error(e);
         return {
-          spineItemIndex,
           spineItem
         };
       }
     }
   }
   return {
-    spineItemIndex,
     spineItem
   };
 };
@@ -5011,11 +5010,19 @@ class HookManager {
     return combineLatest(destroyFns);
   }
 }
-const getItemAnchor = (spineItem) => `|[prose~anchor~${encodeURIComponent(spineItem.item.id)}]`;
+const getItemAnchor = (item) => `|[prose~anchor~${encodeURIComponent(item.index)}]`;
 const getRootCfi = (spineItem) => {
-  const itemAnchor = getItemAnchor(spineItem);
+  const itemAnchor = getItemAnchor(spineItem.item);
   return `epubcfi(/0${itemAnchor})`;
 };
+const generateCfi = (node, offset, item) => {
+  const offsetAnchor = `[prose~offset~${offset || 0}]`;
+  return CfiHandler.generate(
+    node,
+    offset,
+    `${getItemAnchor(item)}|${offsetAnchor}`
+  );
+};
 const generateCfiForSpineItemPage = Report.measurePerformance(
   `getCfi`,
   10,
@@ -5030,13 +5037,11 @@ const generateCfiForSpineItemPage = Report.measurePerformance(
       spineItem
     );
     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 && rendererElement instanceof HTMLIFrameElement && ((_b = rendererElement.contentWindow) == null ? void 0 : _b.document)) {
-      const cfiString = CfiHandler.generate(
+      const cfiString = generateCfi(
         nodeOrRange.node,
-        0,
-        `${itemAnchor}${offset}`
+        nodeOrRange.offset,
+        spineItem.item
       );
       return cfiString.trim();
     }
@@ -5160,1144 +5165,1136 @@ const generateCfiFromRange = ({
   end,
   endNode
 }, item) => {
-  const startCFI = CfiHandler.generate(
-    startNode,
-    start,
-    `|[prose~anchor~${encodeURIComponent(item.id)}]`
-  );
-  const endCFI = CfiHandler.generate(
-    endNode,
-    end,
-    `|[prose~anchor~${encodeURIComponent(item.id)}]`
-  );
+  const startCFI = generateCfi(startNode, start, item);
+  const endCFI = generateCfi(endNode, end, item);
   return { start: startCFI, end: endCFI };
 };
-class SpineItemsManager extends DestroyableClass {
-  constructor(context, settings) {
-    super();
-    this.context = context;
-    this.settings = settings;
-    this.orderedSpineItemsSubject = new BehaviorSubject([]);
-    this.items$ = this.orderedSpineItemsSubject.asObservable();
+class DocumentRenderer {
+  constructor(params) {
+    this.triggerSubject = new Subject();
+    this.stateSubject = new BehaviorSubject(`idle`);
+    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.layers = [];
+    this.destroy$ = this.triggerSubject.pipe(
+      filter$1((trigger) => trigger === `destroy`)
+    );
+    this.context = params.context;
+    this.settings = params.settings;
+    this.hookManager = params.hookManager;
+    this.item = params.item;
+    this.containerElement = params.containerElement;
+    this.resourcesHandler = params.resourcesHandler;
+    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(indexOrId) {
-    if (typeof indexOrId === `number`) {
-      return this.orderedSpineItemsSubject.value[indexOrId];
-    }
-    if (typeof indexOrId === `string`) {
-      return this.orderedSpineItemsSubject.value.find(
-        ({ item }) => item.id === indexOrId
-      );
-    }
-    return indexOrId;
+  get state$() {
+    return this.stateSubject;
   }
-  comparePositionOf(toCompare, withItem) {
-    const toCompareIndex = this.getSpineItemIndex(toCompare) ?? 0;
-    const withIndex = this.getSpineItemIndex(withItem) ?? 0;
-    return toCompareIndex > withIndex ? `after` : toCompareIndex === withIndex ? `same` : `before`;
+  load() {
+    this.triggerSubject.next(`load`);
   }
-  getSpineItemIndex(spineItem) {
-    if (!spineItem) return void 0;
-    const index = this.orderedSpineItemsSubject.value.indexOf(spineItem);
-    return index < 0 ? void 0 : index;
+  unload() {
+    this.triggerSubject.next(`unload`);
   }
-  addMany(spineItems) {
-    this.orderedSpineItemsSubject.next([
-      ...this.orderedSpineItemsSubject.getValue(),
-      ...spineItems
-    ]);
+  destroy() {
+    this.triggerSubject.next(`destroy`);
+    this.triggerSubject.complete();
+    this.stateSubject.complete();
   }
-  // @todo move
-  getSpineItemFromCfi(cfi) {
-    const { itemId } = extractProseMetadataFromCfi(cfi);
-    if (itemId) {
-      const { itemId: itemId2 } = extractProseMetadataFromCfi(cfi);
-      const spineItem = (itemId2 ? this.get(itemId2) : void 0) || this.get(0);
-      return spineItem;
-    }
+  get writingMode() {
     return void 0;
   }
-  get items() {
-    return this.orderedSpineItemsSubject.value;
+  get readingDirection() {
+    return void 0;
   }
-  /**
-   * @todo handle reload, remove subscription to each items etc. See add()
-   */
-  destroyItems() {
-    this.orderedSpineItemsSubject.value.forEach((item) => item.destroy());
+}
+class DefaultRenderer extends DocumentRenderer {
+  onUnload() {
+    return EMPTY;
+  }
+  onCreateDocument() {
+    return EMPTY;
+  }
+  onLoadDocument() {
+    return EMPTY;
+  }
+  layout() {
+    return void 0;
   }
 }
-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];
+const defaultGetResource = (item) => new URL(item.href);
+class ResourceHandler {
+  constructor(item, settings) {
+    this.item = item;
+    this.settings = settings;
   }
-  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 };
+  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);
   }
-  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];
+  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`);
       }
-      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 }
-        };
+      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`);
       }
-      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
-          };
+    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();
       }
-      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) => {
-      var _a;
-      return ((_a = item.renderer.layers[0]) == null ? void 0 : _a.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)
+    };
+    this.layout = ({
+      blankPagePosition,
+      minimumWidth,
+      spreadPosition
+    }) => {
+      this.hookManager.execute(`item.onBeforeLayout`, void 0, {
+        blankPagePosition,
+        item: this.item,
+        minimumWidth
       });
-      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 { 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
       };
-    });
-    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
+      return normalizedValues;
     };
-  };
-  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)
+    this.destroy = () => {
+      this.destroySubject$.next();
+      this.containerElement.remove();
+      this.destroySubject$.complete();
+      this.renderer.destroy();
     };
-  };
-  return {
-    getSpinePositionFromSpineItemPosition: ({
-      spineItem,
-      spineItemPosition
-    }) => {
-      const itemLayout = spineLayout.getAbsolutePositionOf(spineItem);
-      return getSpinePositionFromSpineItemPosition({
-        itemLayout,
-        spineItemPosition
-      });
-    },
-    getAbsolutePageIndexFromPageIndex: (params) => getAbsolutePageIndexFromPageIndex({
-      ...params,
-      context,
-      settings,
-      spineItemsManager,
-      spineLayout
-    }),
-    getSpineInfoFromAbsolutePageIndex: (params) => getSpineInfoFromAbsolutePageIndex({
-      ...params,
-      context,
-      settings,
-      spineItemsManager,
-      spineLayout
-    }),
-    getSpinePositionFromSpineItem,
-    getSpineItemPositionFromSpinePosition,
-    getSpineItemFromPosition: (position) => getSpineItemFromPosition({
-      position,
-      settings,
-      spineItemsManager,
-      spineLayout
-    }),
-    getSpineItemFromIframe,
-    getSpineItemPageIndexFromNode,
-    getVisibleSpineItemsFromPosition: (params) => getVisibleSpineItemsFromPosition({
+    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
+    );
+    parentElement.appendChild(this.containerElement);
+    const rendererFactory = (_b = (_a = this.settings.values).getRenderer) == null ? void 0 : _b.call(_a, item);
+    this.resourcesHandler = new ResourceHandler(item, this.settings);
+    const rendererParams = {
       context,
       settings,
-      spineItemsManager,
-      spineLayout,
-      ...params
-    }),
-    getVisiblePagesFromViewportPosition,
-    isPositionWithinSpineItem,
-    spineItemLocator,
-    getSafeSpineItemPositionFromUnsafeSpineItemPosition
-  };
-};
-const loadItems = ({
-  spineItemsManager,
-  settings
-}) => (stream) => stream.pipe(
-  tap$1(([beginIndex, endIndex]) => {
-    const { numberOfAdjacentSpineItemToPreLoad } = settings.values;
-    const leftMaximumIndex = beginIndex - numberOfAdjacentSpineItemToPreLoad;
-    const rightMaximumIndex = endIndex + numberOfAdjacentSpineItemToPreLoad;
-    spineItemsManager.items.forEach((orderedSpineItem, index) => {
-      const isWithinRange = index >= leftMaximumIndex && index <= rightMaximumIndex;
-      if (isWithinRange) {
-        orderedSpineItem.load();
-      } else {
-        orderedSpineItem.unload();
-      }
-    });
-  })
-);
-const mapToItemsToLoad = ({ spineLocator }) => (stream) => stream.pipe(
-  map$1((position) => {
-    const { beginIndex = 0, endIndex = 0 } = spineLocator.getVisibleSpineItemsFromPosition({
-      position,
-      threshold: 0
-    }) || {};
-    return [beginIndex, endIndex];
-  })
-);
-class SpineItemsLoader extends DestroyableClass {
-  constructor(context, spineItemsManager, spineLocator, settings, spineLayout) {
-    super();
-    this.context = context;
-    this.spineItemsManager = spineItemsManager;
-    this.spineLocator = spineLocator;
-    this.settings = settings;
-    this.spineLayout = spineLayout;
-    const navigationUpdate$ = this.context.bridgeEvent.navigation$;
-    const layoutHasChanged$ = this.spineLayout.layout$.pipe(
-      filter$1(({ hasChanged }) => hasChanged)
+      hookManager,
+      item,
+      containerElement: this.containerElement,
+      resourcesHandler: this.resourcesHandler
+    };
+    this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
+    const contentLayoutChange$ = merge(
+      this.unloaded$.pipe(map(() => ({ isFirstLayout: false }))),
+      this.ready$.pipe(map(() => ({ isFirstLayout: true })))
     );
-    const numberOfAdjacentSpineItemToPreLoad$ = settings.values$.pipe(
-      map$1(
-        ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
-      ),
-      skip$1(1),
-      distinctUntilChanged$1()
+    this.contentLayout$ = contentLayoutChange$.pipe(
+      withLatestFrom$1(this.isReady$),
+      map(([data, isReady]) => ({
+        isFirstLayout: data.isFirstLayout,
+        isReady
+      }))
     );
-    const loadSpineItems$ = merge(
-      navigationUpdate$,
-      layoutHasChanged$,
-      numberOfAdjacentSpineItemToPreLoad$
-    ).pipe(
-      // this can be changed by whatever we want and SHOULD not break navigation.
-      // Ideally loading faster is better but loading too close to user navigating can
-      // be dangerous.
-      debounceTime$1(100, animationFrameScheduler),
-      waitForSwitch(this.context.bridgeEvent.viewportFree$),
-      withLatestFrom(this.context.bridgeEvent.navigation$),
-      map$1(([, navigation]) => navigation.position),
-      mapToItemsToLoad({ spineLocator }),
-      loadItems({ spineItemsManager, settings })
+  }
+  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")
     );
-    loadSpineItems$.pipe(takeUntil(this.destroy$)).subscribe();
   }
-}
-class SpineItemsObserver extends DestroyableClass {
-  constructor(spineItemsManager, spineLocator) {
-    super();
-    this.spineItemsManager = spineItemsManager;
-    this.spineLocator = spineLocator;
-    this.itemIsReady$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
-        const itemsIsReady$ = items.map(
-          (item) => item.isReady$.pipe(map$1((isReady) => ({ item, isReady })))
-        );
-        return merge(...itemsIsReady$);
-      }),
-      share()
+  get loaded$() {
+    return this.renderer.state$.pipe(
+      distinctUntilChanged(),
+      filter((state) => state === "loaded")
     );
-    this.itemResize$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
-        const resize$ = items.map(
-          (item) => observeResize(item.element).pipe(
-            map$1((entries) => ({ entries, item }))
-          )
-        );
-        return merge(...resize$);
-      }),
-      share()
-    );
-    this.itemLoaded$ = this.spineItemsManager.items$.pipe(
-      switchMap((items) => {
-        const itemsIsReady$ = items.map(
-          (item) => item.loaded$.pipe(map$1(() => item))
-        );
-        return merge(...itemsIsReady$);
-      })
+  }
+  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 convertSpinePositionToLayoutPosition = ({
-  position,
-  pageSize
-}) => {
-  return {
-    x: position.x,
-    y: position.y,
-    left: position.x,
-    top: position.y,
-    width: pageSize.width,
-    height: pageSize.height,
-    bottom: position.y + pageSize.height,
-    right: position.x + pageSize.width
-  };
+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 NAMESPACE = `SpineLayout`;
-class SpineLayout extends DestroyableClass {
-  constructor(spineItemsManager, context, settings) {
+class SpineItemsManager extends DestroyableClass {
+  constructor(context, settings) {
     super();
-    this.spineItemsManager = spineItemsManager;
     this.context = context;
     this.settings = settings;
-    this.itemLayoutInformation = [];
-    this.layoutSubject = new Subject();
-    spineItemsManager.items$.pipe(
-      switchMap((items) => {
-        const itemsLayout$ = items.map(
-          (spineItem) => spineItem.contentLayout$.pipe(
-            tap$1(() => {
-              this.layout();
-            })
-          )
-        );
-        const writingModeUpdate$ = items.map(
-          (spineItem) => spineItem.loaded$.pipe(
-            tap$1(() => {
-              if (spineItem.isUsingVerticalWriting()) {
-                this.context.update({
-                  hasVerticalWriting: true
-                });
-              } else {
-                this.context.update({
-                  hasVerticalWriting: false
-                });
-              }
-            })
-          )
-        );
-        return merge(...itemsLayout$, ...writingModeUpdate$);
-      })
-    ).pipe(takeUntil(this.destroy$)).subscribe();
-    this.layout$ = this.layoutSubject.pipe(
-      map$1((hasChanged) => ({ hasChanged })),
-      startWith$1({ hasChanged: true }),
-      map$1(({ hasChanged }) => {
-        const items = spineItemsManager.items;
-        const spineItemsPagesAbsolutePositions = items.map((item) => {
-          const itemLayout = this.getAbsolutePositionOf(item);
-          const numberOfPages = getSpineItemNumberOfPages({
-            isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-            itemHeight: itemLayout.height,
-            itemWidth: itemLayout.width,
-            context,
-            settings
-          });
-          const pages2 = new Array(numberOfPages).fill(void 0);
-          return pages2.map(
-            (_, pageIndex) => convertSpinePositionToLayoutPosition({
-              pageSize: this.context.getPageSize(),
-              position: getSpinePositionFromSpineItemPosition({
-                itemLayout,
-                spineItemPosition: getSpineItemPositionFromPageIndex({
-                  isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-                  itemLayout,
-                  pageIndex,
-                  context
-                })
-              })
-            })
-          );
-        });
-        const pages = spineItemsPagesAbsolutePositions.reduce(
-          (acc, itemPages, itemIndex) => {
-            const itemPagesInfo = itemPages.map(
-              (absolutePosition, pageIndex) => ({
-                itemIndex,
-                absolutePageIndex: itemIndex + pageIndex,
-                absolutePosition
-              })
-            );
-            return [...acc, ...itemPagesInfo];
-          },
-          []
-        );
-        return {
-          hasChanged,
-          spineItemsAbsolutePositions: items.map(
-            (item) => this.getAbsolutePositionOf(item)
-          ),
-          spineItemsPagesAbsolutePositions,
-          pages
-        };
-      }),
-      shareReplay$1(1)
-    );
+    this.orderedSpineItemsSubject = new BehaviorSubject([]);
+    this.items$ = this.orderedSpineItemsSubject.asObservable();
+  }
+  get(indexOrId) {
+    if (typeof indexOrId === `number`) {
+      return this.orderedSpineItemsSubject.value[indexOrId];
+    }
+    if (typeof indexOrId === `string`) {
+      return this.orderedSpineItemsSubject.value.find(
+        ({ item }) => item.id === indexOrId
+      );
+    }
+    return indexOrId;
+  }
+  comparePositionOf(toCompare, withItem) {
+    const toCompareIndex = this.getSpineItemIndex(toCompare) ?? 0;
+    const withIndex = this.getSpineItemIndex(withItem) ?? 0;
+    return toCompareIndex > withIndex ? `after` : toCompareIndex === withIndex ? `same` : `before`;
+  }
+  getSpineItemIndex(spineItemOrId) {
+    const spineItem = spineItemOrId instanceof SpineItem ? spineItemOrId : this.get(spineItemOrId);
+    if (!spineItem) return void 0;
+    const index = this.orderedSpineItemsSubject.value.indexOf(spineItem);
+    return index < 0 ? void 0 : index;
+  }
+  addMany(spineItems) {
+    this.orderedSpineItemsSubject.next([
+      ...this.orderedSpineItemsSubject.getValue(),
+      ...spineItems
+    ]);
+  }
+  // @todo move
+  getSpineItemFromCfi(cfi) {
+    const { itemIndex } = parseCfi(cfi);
+    if (itemIndex !== void 0) {
+      return this.get(itemIndex);
+    }
+    return void 0;
+  }
+  get items() {
+    return this.orderedSpineItemsSubject.value;
   }
   /**
-   * @todo
-   * move this logic to the spine
-   *
-   * @todo
-   * make sure to check how many times it is being called and try to reduce number of layouts
-   * it is called eery time an item is being unload (which can adds up quickly for big books)
+   * @todo handle reload, remove subscription to each items etc. See add()
    */
-  layout() {
-    const manifest = this.context.manifest;
-    const newItemLayoutInformation = [];
-    const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
-    this.spineItemsManager.items.reduce(
-      ({ horizontalOffset, verticalOffset }, item, index) => {
-        let minimumWidth = this.context.getPageSize().width;
-        let blankPagePosition = `none`;
-        const itemStartOnNewScreen = horizontalOffset % this.context.state.visibleAreaRect.width === 0;
-        const isLastItem = index === this.spineItemsManager.items.length - 1;
-        if (this.context.state.isUsingSpreadMode) {
-          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-          const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
-          if (item.item.pageSpreadRight && itemStartOnNewScreen && !this.context.isRTL()) {
-            blankPagePosition = `before`;
-            minimumWidth = this.context.getPageSize().width * 2;
-          } else if (item.item.pageSpreadLeft && itemStartOnNewScreen && this.context.isRTL()) {
-            blankPagePosition = `before`;
-            minimumWidth = this.context.getPageSize().width * 2;
-          } else if (lastItemStartOnNewScreenInAPrepaginatedBook) {
-            if (this.context.isRTL()) {
-              blankPagePosition = `before`;
-            } else {
-              blankPagePosition = `after`;
-            }
-            minimumWidth = this.context.getPageSize().width * 2;
-          }
-        }
-        const { width, height } = item.layout({
-          minimumWidth,
-          blankPagePosition,
-          spreadPosition: this.context.state.isUsingSpreadMode ? itemStartOnNewScreen ? this.context.isRTL() ? `right` : `left` : this.context.isRTL() ? `left` : `right` : `none`
-        });
-        if (this.settings.values.computedPageTurnDirection === `vertical`) {
-          const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - this.context.state.visibleAreaRect.height;
-          const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
-          if (this.context.isRTL()) {
-            item.adjustPositionOfElement({
-              top: currentValidEdgeYForVerticalPositioning,
-              left: currentValidEdgeXForVerticalPositioning
-            });
-          } else {
-            item.adjustPositionOfElement({
-              top: currentValidEdgeYForVerticalPositioning,
-              left: currentValidEdgeXForVerticalPositioning
-            });
-          }
-          const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
-          const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
-          newItemLayoutInformation.push({
-            left: currentValidEdgeXForVerticalPositioning,
-            right: newEdgeX,
-            top: currentValidEdgeYForVerticalPositioning,
-            bottom: newEdgeY,
-            height,
-            width,
-            x: currentValidEdgeXForVerticalPositioning,
-            y: currentValidEdgeYForVerticalPositioning
-          });
-          return {
-            horizontalOffset: newEdgeX,
-            verticalOffset: newEdgeY
-          };
-        }
-        item.adjustPositionOfElement(
-          this.context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
-        );
-        const left = this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset - width : horizontalOffset;
-        newItemLayoutInformation.push({
-          right: this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset : horizontalOffset + width,
-          left,
-          x: left,
-          top: verticalOffset,
-          bottom: height,
-          height,
-          width,
-          y: verticalOffset
-        });
-        return {
-          horizontalOffset: horizontalOffset + width,
-          verticalOffset: 0
-        };
-      },
-      { horizontalOffset: 0, verticalOffset: 0 }
-    );
-    const hasLayoutChanges = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
-      (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
-    );
-    this.itemLayoutInformation = newItemLayoutInformation;
-    Report.log(NAMESPACE, `layout`, {
-      hasLayoutChanges,
-      itemLayoutInformation: this.itemLayoutInformation
-    });
-    this.layoutSubject.next(hasLayoutChanges);
-  }
-  /**
-   * It's important to not use x,y since we need the absolute position of each element. Otherwise x,y would be relative to
-   * current window (viewport).
-   */
-  getAbsolutePositionOf(spineItemOrIndex) {
-    const fallback = {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      width: 0,
-      height: 0,
-      x: 0,
-      y: 0
-    };
-    const spineItem = this.spineItemsManager.get(spineItemOrIndex);
-    const indexOfItem = spineItem ? this.spineItemsManager.items.indexOf(spineItem) : -1;
-    const layoutInformation = this.itemLayoutInformation[indexOfItem];
-    return layoutInformation || fallback;
-  }
-  destroy() {
-    super.destroy();
-    this.layoutSubject.complete();
-  }
-}
-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.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;
+  destroyItems() {
+    this.orderedSpineItemsSubject.value.forEach((item) => item.destroy());
   }
 }
-class DefaultRenderer extends DocumentRenderer {
-  onUnload() {
-    return EMPTY;
-  }
-  onCreateDocument() {
-    return EMPTY;
+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];
   }
-  onLoadDocument() {
-    return EMPTY;
+  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 };
   }
-  layout() {
-    return void 0;
+  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
+    };
   }
-}
-const defaultGetResource = (item) => new URL(item.href);
-class ResourceHandler {
-  constructor(item, settings) {
-    this.item = item;
+  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) => {
+      var _a;
+      return ((_a = item.renderer.layers[0]) == null ? void 0 : _a.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
+      });
+    },
+    getAbsolutePageIndexFromPageIndex: (params) => getAbsolutePageIndexFromPageIndex({
+      ...params,
+      context,
+      settings,
+      spineItemsManager,
+      spineLayout
+    }),
+    getSpineInfoFromAbsolutePageIndex: (params) => getSpineInfoFromAbsolutePageIndex({
+      ...params,
+      context,
+      settings,
+      spineItemsManager,
+      spineLayout
+    }),
+    getSpinePositionFromSpineItem,
+    getSpineItemPositionFromSpinePosition,
+    getSpineItemFromPosition: (position) => getSpineItemFromPosition({
+      position,
+      settings,
+      spineItemsManager,
+      spineLayout
+    }),
+    getSpineItemFromIframe,
+    getSpineItemPageIndexFromNode,
+    getVisibleSpineItemsFromPosition: (params) => getVisibleSpineItemsFromPosition({
+      context,
+      settings,
+      spineItemsManager,
+      spineLayout,
+      ...params
+    }),
+    getVisiblePagesFromViewportPosition,
+    isPositionWithinSpineItem,
+    spineItemLocator,
+    getSafeSpineItemPositionFromUnsafeSpineItemPosition
+  };
+};
+const loadItems = ({
+  spineItemsManager,
+  settings
+}) => (stream) => stream.pipe(
+  tap$1(([beginIndex, endIndex]) => {
+    const { numberOfAdjacentSpineItemToPreLoad } = settings.values;
+    const leftMaximumIndex = beginIndex - numberOfAdjacentSpineItemToPreLoad;
+    const rightMaximumIndex = endIndex + numberOfAdjacentSpineItemToPreLoad;
+    spineItemsManager.items.forEach((orderedSpineItem, index) => {
+      const isWithinRange = index >= leftMaximumIndex && index <= rightMaximumIndex;
+      if (isWithinRange) {
+        orderedSpineItem.load();
+      } else {
+        orderedSpineItem.unload();
+      }
+    });
+  })
+);
+const mapToItemsToLoad = ({ spineLocator }) => (stream) => stream.pipe(
+  map$1((position) => {
+    const { beginIndex = 0, endIndex = 0 } = spineLocator.getVisibleSpineItemsFromPosition({
+      position,
+      threshold: 0
+    }) || {};
+    return [beginIndex, endIndex];
+  })
+);
+class SpineItemsLoader extends DestroyableClass {
+  constructor(context, spineItemsManager, spineLocator, settings, spineLayout) {
+    super();
+    this.context = context;
+    this.spineItemsManager = spineItemsManager;
+    this.spineLocator = spineLocator;
     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)
+    this.spineLayout = spineLayout;
+    const navigationUpdate$ = this.context.bridgeEvent.navigation$;
+    const layoutHasChanged$ = this.spineLayout.layout$.pipe(
+      filter$1(({ hasChanged }) => hasChanged)
     );
-    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;
+    const numberOfAdjacentSpineItemToPreLoad$ = settings.values$.pipe(
+      map$1(
+        ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
+      ),
+      skip$1(1),
+      distinctUntilChanged$1()
+    );
+    const loadSpineItems$ = merge(
+      navigationUpdate$,
+      layoutHasChanged$,
+      numberOfAdjacentSpineItemToPreLoad$
+    ).pipe(
+      // this can be changed by whatever we want and SHOULD not break navigation.
+      // Ideally loading faster is better but loading too close to user navigating can
+      // be dangerous.
+      debounceTime$1(100, animationFrameScheduler),
+      waitForSwitch(this.context.bridgeEvent.viewportFree$),
+      withLatestFrom(this.context.bridgeEvent.navigation$),
+      map$1(([, navigation]) => navigation.position),
+      mapToItemsToLoad({ spineLocator }),
+      loadItems({ spineItemsManager, settings })
+    );
+    loadSpineItems$.pipe(takeUntil(this.destroy$)).subscribe();
   }
 }
-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.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
+class SpineItemsObserver extends DestroyableClass {
+  constructor(spineItemsManager, spineLocator) {
+    super();
+    this.spineItemsManager = spineItemsManager;
+    this.spineLocator = spineLocator;
+    this.itemIsReady$ = this.spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const itemsIsReady$ = items.map(
+          (item) => item.isReady$.pipe(map$1((isReady) => ({ item, isReady })))
+        );
+        return merge(...itemsIsReady$);
+      }),
+      share()
     );
-    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
+    this.itemResize$ = this.spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const resize$ = items.map(
+          (item) => observeResize(item.element).pipe(
+            map$1((entries) => ({ entries, item }))
+          )
+        );
+        return merge(...resize$);
+      }),
+      share()
     );
-    const contentLayoutChange$ = merge(
-      this.unloaded$.pipe(map(() => ({ isFirstLayout: false }))),
-      this.ready$.pipe(map(() => ({ isFirstLayout: true })))
+    this.itemLoaded$ = this.spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const itemsIsReady$ = items.map(
+          (item) => item.loaded$.pipe(map$1(() => item))
+        );
+        return merge(...itemsIsReady$);
+      })
     );
-    this.contentLayout$ = contentLayoutChange$.pipe(
-      withLatestFrom$1(this.isReady$),
-      map(([data, isReady]) => ({
-        isFirstLayout: data.isFirstLayout,
-        isReady
-      }))
+  }
+}
+const convertSpinePositionToLayoutPosition = ({
+  position,
+  pageSize
+}) => {
+  return {
+    x: position.x,
+    y: position.y,
+    left: position.x,
+    top: position.y,
+    width: pageSize.width,
+    height: pageSize.height,
+    bottom: position.y + pageSize.height,
+    right: position.x + pageSize.width
+  };
+};
+const NAMESPACE = `SpineLayout`;
+class SpineLayout extends DestroyableClass {
+  constructor(spineItemsManager, context, settings) {
+    super();
+    this.spineItemsManager = spineItemsManager;
+    this.context = context;
+    this.settings = settings;
+    this.itemLayoutInformation = [];
+    this.layoutSubject = new Subject();
+    spineItemsManager.items$.pipe(
+      switchMap((items) => {
+        const itemsLayout$ = items.map(
+          (spineItem) => spineItem.contentLayout$.pipe(
+            tap$1(() => {
+              this.layout();
+            })
+          )
+        );
+        const writingModeUpdate$ = items.map(
+          (spineItem) => spineItem.loaded$.pipe(
+            tap$1(() => {
+              if (spineItem.isUsingVerticalWriting()) {
+                this.context.update({
+                  hasVerticalWriting: true
+                });
+              } else {
+                this.context.update({
+                  hasVerticalWriting: false
+                });
+              }
+            })
+          )
+        );
+        return merge(...itemsLayout$, ...writingModeUpdate$);
+      })
+    ).pipe(takeUntil(this.destroy$)).subscribe();
+    this.layout$ = this.layoutSubject.pipe(
+      map$1((hasChanged) => ({ hasChanged })),
+      startWith$1({ hasChanged: true }),
+      map$1(({ hasChanged }) => {
+        const items = spineItemsManager.items;
+        const spineItemsPagesAbsolutePositions = items.map((item) => {
+          const itemLayout = this.getAbsolutePositionOf(item);
+          const numberOfPages = getSpineItemNumberOfPages({
+            isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+            itemHeight: itemLayout.height,
+            itemWidth: itemLayout.width,
+            context,
+            settings
+          });
+          const pages2 = new Array(numberOfPages).fill(void 0);
+          return pages2.map(
+            (_, pageIndex) => convertSpinePositionToLayoutPosition({
+              pageSize: this.context.getPageSize(),
+              position: getSpinePositionFromSpineItemPosition({
+                itemLayout,
+                spineItemPosition: getSpineItemPositionFromPageIndex({
+                  isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
+                  itemLayout,
+                  pageIndex,
+                  context
+                })
+              })
+            })
+          );
+        });
+        const pages = spineItemsPagesAbsolutePositions.reduce(
+          (acc, itemPages, itemIndex) => {
+            const itemPagesInfo = itemPages.map(
+              (absolutePosition, pageIndex) => ({
+                itemIndex,
+                absolutePageIndex: itemIndex + pageIndex,
+                absolutePosition
+              })
+            );
+            return [...acc, ...itemPagesInfo];
+          },
+          []
+        );
+        return {
+          hasChanged,
+          spineItemsAbsolutePositions: items.map(
+            (item) => this.getAbsolutePositionOf(item)
+          ),
+          spineItemsPagesAbsolutePositions,
+          pages
+        };
+      }),
+      shareReplay$1(1)
     );
   }
-  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.
+   * @todo
+   * move this logic to the spine
+   *
+   * @todo
+   * make sure to check how many times it is being called and try to reduce number of layouts
+   * it is called eery time an item is being unload (which can adds up quickly for big books)
    */
-  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")
+  layout() {
+    const manifest = this.context.manifest;
+    const newItemLayoutInformation = [];
+    const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
+    this.spineItemsManager.items.reduce(
+      ({ horizontalOffset, verticalOffset }, item, index) => {
+        let minimumWidth = this.context.getPageSize().width;
+        let blankPagePosition = `none`;
+        const itemStartOnNewScreen = horizontalOffset % this.context.state.visibleAreaRect.width === 0;
+        const isLastItem = index === this.spineItemsManager.items.length - 1;
+        if (this.context.state.isUsingSpreadMode) {
+          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && !isLastItem) {
+            minimumWidth = this.context.getPageSize().width * 2;
+          }
+          if (!isGloballyPrePaginated && item.item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
+            minimumWidth = this.context.getPageSize().width * 2;
+          }
+          const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
+          if (item.item.pageSpreadRight && itemStartOnNewScreen && !this.context.isRTL()) {
+            blankPagePosition = `before`;
+            minimumWidth = this.context.getPageSize().width * 2;
+          } else if (item.item.pageSpreadLeft && itemStartOnNewScreen && this.context.isRTL()) {
+            blankPagePosition = `before`;
+            minimumWidth = this.context.getPageSize().width * 2;
+          } else if (lastItemStartOnNewScreenInAPrepaginatedBook) {
+            if (this.context.isRTL()) {
+              blankPagePosition = `before`;
+            } else {
+              blankPagePosition = `after`;
+            }
+            minimumWidth = this.context.getPageSize().width * 2;
+          }
+        }
+        const { width, height } = item.layout({
+          minimumWidth,
+          blankPagePosition,
+          spreadPosition: this.context.state.isUsingSpreadMode ? itemStartOnNewScreen ? this.context.isRTL() ? `right` : `left` : this.context.isRTL() ? `left` : `right` : `none`
+        });
+        if (this.settings.values.computedPageTurnDirection === `vertical`) {
+          const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - this.context.state.visibleAreaRect.height;
+          const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
+          if (this.context.isRTL()) {
+            item.adjustPositionOfElement({
+              top: currentValidEdgeYForVerticalPositioning,
+              left: currentValidEdgeXForVerticalPositioning
+            });
+          } else {
+            item.adjustPositionOfElement({
+              top: currentValidEdgeYForVerticalPositioning,
+              left: currentValidEdgeXForVerticalPositioning
+            });
+          }
+          const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
+          const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
+          newItemLayoutInformation.push({
+            left: currentValidEdgeXForVerticalPositioning,
+            right: newEdgeX,
+            top: currentValidEdgeYForVerticalPositioning,
+            bottom: newEdgeY,
+            height,
+            width,
+            x: currentValidEdgeXForVerticalPositioning,
+            y: currentValidEdgeYForVerticalPositioning
+          });
+          return {
+            horizontalOffset: newEdgeX,
+            verticalOffset: newEdgeY
+          };
+        }
+        item.adjustPositionOfElement(
+          this.context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
+        );
+        const left = this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset - width : horizontalOffset;
+        newItemLayoutInformation.push({
+          right: this.context.isRTL() ? this.context.state.visibleAreaRect.width - horizontalOffset : horizontalOffset + width,
+          left,
+          x: left,
+          top: verticalOffset,
+          bottom: height,
+          height,
+          width,
+          y: verticalOffset
+        });
+        return {
+          horizontalOffset: horizontalOffset + width,
+          verticalOffset: 0
+        };
+      },
+      { horizontalOffset: 0, verticalOffset: 0 }
     );
-  }
-  get unloaded$() {
-    return this.renderer.state$.pipe(
-      distinctUntilChanged(),
-      filter((state) => state !== "idle"),
-      switchMap$1(
-        () => this.renderer.state$.pipe(
-          filter((state) => state === `idle`),
-          first()
-        )
-      )
+    const hasLayoutChanges = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
+      (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
     );
-  }
-  get isReady$() {
-    return this.renderer.state$.pipe(map((state) => state === "ready"));
+    this.itemLayoutInformation = newItemLayoutInformation;
+    Report.log(NAMESPACE, `layout`, {
+      hasLayoutChanges,
+      itemLayoutInformation: this.itemLayoutInformation
+    });
+    this.layoutSubject.next(hasLayoutChanges);
   }
   /**
-   * Helper that will inject CSS into the document frame.
-   *
-   * @important
-   * The document needs to be detected as a frame.
+   * It's important to not use x,y since we need the absolute position of each element. Otherwise x,y would be relative to
+   * current window (viewport).
    */
-  upsertCSS(id, style, prepend) {
-    this.renderer.layers.forEach((layer) => {
-      if (layer.element instanceof HTMLIFrameElement) {
-        upsertCSS(layer.element, id, style, prepend);
-      }
-    });
+  getAbsolutePositionOf(spineItemOrIndex) {
+    const fallback = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    };
+    const spineItem = this.spineItemsManager.get(spineItemOrIndex);
+    const indexOfItem = spineItem ? this.spineItemsManager.items.indexOf(spineItem) : -1;
+    const layoutInformation = this.itemLayoutInformation[indexOfItem];
+    return layoutInformation || fallback;
+  }
+  destroy() {
+    super.destroy();
+    this.layoutSubject.complete();
   }
 }
-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();
@@ -6375,6 +6372,17 @@ class Spine extends DestroyableClass {
     this.elementSubject.complete();
   }
 }
+const generateCfiFromSelection = ({
+  item,
+  selection
+}) => {
+  const anchorCfi = selection.anchorNode ? generateCfi(selection.anchorNode, selection.anchorOffset, item) : void 0;
+  const focusCfi = selection.focusNode ? generateCfi(selection.focusNode, selection.focusOffset, item) : void 0;
+  return {
+    anchorCfi,
+    focusCfi
+  };
+};
 const createReader = (inputSettings) => {
   const stateSubject$ = new BehaviorSubject({
     supportedPageTurnAnimation: [`fade`, `none`, `slide`],
@@ -6523,6 +6531,8 @@ const createReader = (inputSettings) => {
     hookManager,
     cfi: {
       generateCfiFromRange,
+      generateCfiFromSelection,
+      parseCfi,
       generateCfiForSpineItemPage: (params) => generateCfiForSpineItemPage({
         ...params,
         spineItemLocator
@@ -6530,7 +6540,6 @@ const createReader = (inputSettings) => {
       resolveCfi: (params) => resolveCfi({ ...params, spineItemsManager })
     },
     navigation: {
-      viewportFree$: context.bridgeEvent.viewportFree$,
       viewportBusy$: context.bridgeEvent.viewportBusy$,
       getViewportPosition: () => navigator2.viewportNavigator.viewportPosition,
       getNavigation: navigator2.getNavigation.bind(navigator2),
@@ -6552,6 +6561,7 @@ const createReader = (inputSettings) => {
     element$,
     layout$: spine.spineLayout.layout$,
     viewportState$: context.bridgeEvent.viewportState$,
+    viewportFree$: context.bridgeEvent.viewportFree$,
     /**
      * Dispatched when the reader has loaded a book and is rendering a book.
      * Using navigation API and getting information about current content will
@@ -6872,13 +6882,13 @@ const mediaEnhancer = (next) => (options) => {
     ...options,
     getRenderer(item) {
       var _a;
-      const MaybeRenderer = (_a = options.getRenderer) == null ? void 0 : _a.call(options, item);
+      const maybeFactory = (_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;
+      if (!maybeFactory && isImageType) {
+        return (props) => new ImageRenderer(props);
       }
-      return MaybeRenderer;
+      return maybeFactory;
     }
   });
   const frameObserver = new IntersectionObserver(
@@ -7308,7 +7318,9 @@ const eventsEnhancer = (next) => (options) => {
     `item.onDocumentLoad`,
     ({ destroy, layers, itemId }) => {
       var _a;
-      const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+      const frame = (_a = layers.find(
+        (layer) => layer.element instanceof HTMLIFrameElement
+      )) == null ? void 0 : _a.element;
       if (!(frame instanceof HTMLIFrameElement)) return;
       const item = reader.spineItemsManager.get(itemId);
       if (!item) return;
@@ -7978,15 +7990,8 @@ const renderReflowable = ({
   };
 };
 class HtmlRenderer extends DocumentRenderer {
-  constructor(context, settings, hookManager, item, containerElement, resourcesHandler) {
-    super(
-      context,
-      settings,
-      hookManager,
-      item,
-      containerElement,
-      resourcesHandler
-    );
+  constructor() {
+    super(...arguments);
     this.isImageType = () => {
       const mimeType = this.item.mediaType ?? detectMimeTypeFromName(this.item.href);
       return !!(mimeType == null ? void 0 : mimeType.startsWith(`image/`));
@@ -8105,30 +8110,59 @@ const htmlEnhancer = (next) => (options) => {
     ...options,
     getRenderer(item) {
       var _a;
-      const MaybeRenderer = (_a = options.getRenderer) == null ? void 0 : _a.call(options, item);
-      return MaybeRenderer ?? HtmlRenderer;
+      const maybeFactory = (_a = options.getRenderer) == null ? void 0 : _a.call(options, item);
+      return maybeFactory ?? ((props) => new HtmlRenderer(props));
     }
   });
   return reader;
 };
-const generateCfis = ({
-  itemId,
-  selection
+const getRangeFromSelection = (anchor, focus) => {
+  var _a;
+  const range = (_a = anchor.node.ownerDocument) == null ? void 0 : _a.createRange();
+  const comparison = anchor.node.compareDocumentPosition(focus.node);
+  if (!range) return void 0;
+  try {
+    if (comparison & Node.DOCUMENT_POSITION_PRECEDING) {
+      range.setStart(focus.node, focus.offset || 0);
+      range.setEnd(anchor.node, anchor.offset || 0);
+    } else if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {
+      range.setStart(anchor.node, anchor.offset || 0);
+      range.setEnd(focus.node, focus.offset || 0);
+    } else {
+      const startOffset = Math.min(anchor.offset || 0, focus.offset || 0);
+      const endOffset = Math.max(anchor.offset || 0, focus.offset || 0);
+      range.setStart(anchor.node, startOffset);
+      range.setEnd(anchor.node, endOffset);
+    }
+  } catch (e) {
+    Report.warn("Failed to create range from selection", e, {
+      anchor,
+      focus
+    });
+  }
+  return range;
+};
+const createRangeFromSelection = ({
+  selection,
+  spineItem
 }) => {
-  const anchorCfi = selection.anchorNode ? CfiHandler.generate(
-    selection.anchorNode,
-    selection.anchorOffset,
-    `|[prose~anchor~${encodeURIComponent(itemId)}]`
-  ) : void 0;
-  const focusCfi = selection.focusNode ? CfiHandler.generate(
-    selection.focusNode,
-    selection.focusOffset,
-    `|[prose~anchor~${encodeURIComponent(itemId)}]`
-  ) : void 0;
-  return {
-    anchorCfi,
-    focusCfi
-  };
+  if (!spineItem.isReady) return void 0;
+  const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+  if (!anchorNode || !focusNode) {
+    return void 0;
+  }
+  try {
+    return getRangeFromSelection(
+      { node: anchorNode, offset: anchorOffset },
+      { node: focusNode, offset: focusOffset }
+    );
+  } catch (e) {
+    Report.warn("Failed to create range from selection", e, {
+      selection,
+      spineItem
+    });
+    return void 0;
+  }
 };
 class SelectionTracker extends DestroyableClass {
   constructor(document2) {
@@ -8161,6 +8195,7 @@ const selectionEnhancer = (next) => (options) => {
     ({ itemId, layers, destroy$, destroy }) => {
       var _a, _b;
       const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+      const itemIndex = reader.spineItemsManager.getSpineItemIndex(itemId) ?? 0;
       if (frame instanceof HTMLIFrameElement) {
         const frameDoc = frame.contentDocument || ((_b = frame.contentWindow) == null ? void 0 : _b.document);
         if (frameDoc) {
@@ -8172,7 +8207,7 @@ const selectionEnhancer = (next) => (options) => {
                   selectionSubject.next({
                     document: frameDoc,
                     selection,
-                    itemId
+                    itemIndex
                   });
                 } else {
                   selectionSubject.next(void 0);
@@ -8186,7 +8221,7 @@ const selectionEnhancer = (next) => (options) => {
                   {
                     document: frameDoc,
                     selection,
-                    itemId
+                    itemIndex
                   }
                 ]);
               })
@@ -8233,8 +8268,8 @@ const selectionEnhancer = (next) => (options) => {
       selectionEnd$,
       selectionAfterPointerUp$,
       lastSelectionOnPointerdown$,
-      generateCfis,
-      getSelection: () => selectionSubject.getValue()
+      getSelection: () => selectionSubject.getValue(),
+      createRangeFromSelection
     },
     destroy: () => {
       selectionSubject.complete();
@@ -8294,8 +8329,15 @@ export {
   SettingsManager3 as SettingsManager,
   SpineItem,
   createReaderWithEnhancers as createReader,
+  getAttributeValueFromString,
+  getFrameViewportInfo,
+  injectCSS,
   isHtmlElement,
   isShallowEqual2 as isShallowEqual,
+  removeCSS,
+  upsertCSS,
+  waitForFrameLoad,
+  waitForFrameReady,
   waitForSwitch
 };
 //# sourceMappingURL=index.js.map