@prose-reader/core 1.123.0 → 1.125.0

package/dist/index.umd.cjs

@@ -265,7 +265,7 @@
       })
     );
     const resetLockViewportFree$ = createResetLock$(
-      reader.navigation.viewportFree$
+      reader.viewportFree$
     ).pipe(operators.take(1));
     const pageTurnMode$ = reader.settings.values$.pipe(
       operators.map(() => reader.settings.values.computedPageTurnMode),
@@ -3417,15 +3417,16 @@
       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 +3437,8 @@
     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 +3449,17 @@
           return {
             node,
             offset: offset ?? resolvedOffset,
-            spineItemIndex,
             spineItem
           };
         } catch (e) {
           Report.error(e);
           return {
-            spineItemIndex,
             spineItem
           };
         }
       }
     }
     return {
-      spineItemIndex,
       spineItem
     };
   };
@@ -5011,11 +5008,19 @@
       return rxjs.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 +5035,11 @@
         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 +5163,1135 @@
     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();
+  class DocumentRenderer {
+    constructor(context, settings, hookManager, item, containerElement, resourcesHandler) {
       this.context = context;
       this.settings = settings;
-      this.orderedSpineItemsSubject = new rxjs.BehaviorSubject([]);
-      this.items$ = this.orderedSpineItemsSubject.asObservable();
+      this.hookManager = hookManager;
+      this.item = item;
+      this.containerElement = containerElement;
+      this.resourcesHandler = resourcesHandler;
+      this.stateSubject = new rxjs.BehaviorSubject(`idle`);
+      this.triggerSubject = new rxjs.Subject();
+      this.layers = [];
+      this.unload$ = this.triggerSubject.pipe(
+        rxjs.withLatestFrom(this.stateSubject),
+        rxjs.filter(
+          ([trigger, state]) => trigger === `unload` && state !== "idle" && state !== "unloading"
+        ),
+        rxjs.map(() => void 0),
+        rxjs.share()
+      );
+      this.load$ = this.triggerSubject.pipe(
+        rxjs.withLatestFrom(this.stateSubject),
+        rxjs.filter(
+          ([trigger, state]) => trigger === `load` && state !== "ready" && state !== "loaded" && state !== "loading"
+        ),
+        rxjs.map(() => void 0),
+        rxjs.share()
+      );
+      this.destroy$ = this.triggerSubject.pipe(
+        rxjs.filter((trigger) => trigger === `destroy`)
+      );
+      this.load$.pipe(
+        rxjs.switchMap(() => {
+          this.stateSubject.next(`loading`);
+          const createDocument$ = this.onCreateDocument().pipe(
+            rxjs.endWith(null),
+            rxjs.first()
+          );
+          return createDocument$.pipe(
+            rxjs.tap(() => {
+              this.hookManager.execute(`item.onDocumentCreated`, this.item.id, {
+                itemId: this.item.id,
+                layers: this.layers
+              });
+            }),
+            rxjs.switchMap(() => {
+              const loadDocument$ = this.onLoadDocument().pipe(
+                rxjs.endWith(null),
+                rxjs.first()
+              );
+              return loadDocument$;
+            }),
+            waitForSwitch(this.context.bridgeEvent.viewportFree$),
+            rxjs.switchMap(() => {
+              const hookResults = this.hookManager.execute(`item.onDocumentLoad`, this.item.id, {
+                itemId: this.item.id,
+                layers: this.layers
+              }).filter(
+                (result) => result instanceof rxjs.Observable
+              );
+              return rxjs.combineLatest([rxjs.of(null), ...hookResults]).pipe(rxjs.first());
+            }),
+            rxjs.tap(() => {
+              this.stateSubject.next(`loaded`);
+              this.stateSubject.next(`ready`);
+            }),
+            rxjs.takeUntil(rxjs.merge(this.destroy$, this.unload$))
+          );
+        })
+      ).subscribe();
+      this.unload$.pipe(
+        rxjs.switchMap(() => {
+          this.stateSubject.next(`unloading`);
+          return this.context.bridgeEvent.viewportFree$.pipe(
+            rxjs.first(),
+            rxjs.tap(() => {
+              this.hookManager.destroy(`item.onDocumentLoad`, this.item.id);
+            }),
+            rxjs.switchMap(() => {
+              const unload$ = this.onUnload().pipe(rxjs.endWith(null), rxjs.first());
+              return unload$;
+            }),
+            rxjs.tap(() => {
+              this.stateSubject.next(`idle`);
+            }),
+            rxjs.takeUntil(rxjs.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 rxjs.EMPTY;
+    }
+    onCreateDocument() {
+      return rxjs.EMPTY;
+    }
+    onLoadDocument() {
+      return rxjs.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 rxjs.lastValueFrom(
+        ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? rxjs.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 rxjs.Subject();
+      this.containerElement = createContainerElement(
+        parentElement,
+        item,
+        hookManager
+      );
+      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,
-        spineItemsManager,
-        spineLayout,
-        ...params
-      }),
-      getVisiblePagesFromViewportPosition,
-      isPositionWithinSpineItem,
-      spineItemLocator,
-      getSafeSpineItemPositionFromUnsafeSpineItemPosition
-    };
-  };
-  const loadItems = ({
-    spineItemsManager,
-    settings
-  }) => (stream) => stream.pipe(
-    rxjs.tap(([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(
-    rxjs.map((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(
-        rxjs.filter(({ hasChanged }) => hasChanged)
+        hookManager,
+        item,
+        this.containerElement,
+        this.resourcesHandler
       );
-      const numberOfAdjacentSpineItemToPreLoad$ = settings.values$.pipe(
-        rxjs.map(
-          ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
-        ),
-        rxjs.skip(1),
-        rxjs.distinctUntilChanged()
+      const contentLayoutChange$ = rxjs.merge(
+        this.unloaded$.pipe(operators.map(() => ({ isFirstLayout: false }))),
+        this.ready$.pipe(operators.map(() => ({ isFirstLayout: true })))
       );
-      const loadSpineItems$ = rxjs.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.
-        rxjs.debounceTime(100, rxjs.animationFrameScheduler),
-        waitForSwitch(this.context.bridgeEvent.viewportFree$),
-        rxjs.withLatestFrom(this.context.bridgeEvent.navigation$),
-        rxjs.map(([, navigation]) => navigation.position),
-        mapToItemsToLoad({ spineLocator }),
-        loadItems({ spineItemsManager, settings })
+      this.contentLayout$ = contentLayoutChange$.pipe(
+        operators.withLatestFrom(this.isReady$),
+        operators.map(([data, isReady]) => ({
+          isFirstLayout: data.isFirstLayout,
+          isReady
+        }))
       );
-      loadSpineItems$.pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
-  }
-  class SpineItemsObserver extends DestroyableClass {
-    constructor(spineItemsManager, spineLocator) {
-      super();
-      this.spineItemsManager = spineItemsManager;
-      this.spineLocator = spineLocator;
-      this.itemIsReady$ = this.spineItemsManager.items$.pipe(
-        rxjs.switchMap((items) => {
-          const itemsIsReady$ = items.map(
-            (item) => item.isReady$.pipe(rxjs.map((isReady) => ({ item, isReady })))
-          );
-          return rxjs.merge(...itemsIsReady$);
-        }),
-        rxjs.share()
-      );
-      this.itemResize$ = this.spineItemsManager.items$.pipe(
-        rxjs.switchMap((items) => {
-          const resize$ = items.map(
-            (item) => observeResize(item.element).pipe(
-              rxjs.map((entries) => ({ entries, item }))
-            )
-          );
-          return rxjs.merge(...resize$);
-        }),
-        rxjs.share()
-      );
-      this.itemLoaded$ = this.spineItemsManager.items$.pipe(
-        rxjs.switchMap((items) => {
-          const itemsIsReady$ = items.map(
-            (item) => item.loaded$.pipe(rxjs.map(() => item))
-          );
-          return rxjs.merge(...itemsIsReady$);
-        })
-      );
-    }
-  }
-  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 rxjs.Subject();
-      spineItemsManager.items$.pipe(
-        rxjs.switchMap((items) => {
-          const itemsLayout$ = items.map(
-            (spineItem) => spineItem.contentLayout$.pipe(
-              rxjs.tap(() => {
-                this.layout();
-              })
-            )
-          );
-          const writingModeUpdate$ = items.map(
-            (spineItem) => spineItem.loaded$.pipe(
-              rxjs.tap(() => {
-                if (spineItem.isUsingVerticalWriting()) {
-                  this.context.update({
-                    hasVerticalWriting: true
-                  });
-                } else {
-                  this.context.update({
-                    hasVerticalWriting: false
-                  });
-                }
-              })
-            )
-          );
-          return rxjs.merge(...itemsLayout$, ...writingModeUpdate$);
-        })
-      ).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
-      this.layout$ = this.layoutSubject.pipe(
-        rxjs.map((hasChanged) => ({ hasChanged })),
-        rxjs.startWith({ hasChanged: true }),
-        rxjs.map(({ 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
-          };
-        }),
-        rxjs.shareReplay(1)
-      );
+    get element() {
+      return this.containerElement;
     }
     /**
-     * @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)
+     * @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.
      */
-    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 readingDirection() {
+      return this.renderer.readingDirection;
+    }
+    get isReady() {
+      return this.renderer.state$.getValue() === "ready";
+    }
+    get ready$() {
+      return this.renderer.state$.pipe(
+        operators.distinctUntilChanged(),
+        operators.filter((state) => state === "ready")
       );
-      const hasLayoutChanges = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
-        (old, index) => !shared.isShallowEqual(old, newItemLayoutInformation[index])
+    }
+    get loaded$() {
+      return this.renderer.state$.pipe(
+        operators.distinctUntilChanged(),
+        operators.filter((state) => state === "loaded")
       );
-      this.itemLayoutInformation = newItemLayoutInformation;
-      Report.log(NAMESPACE, `layout`, {
-        hasLayoutChanges,
-        itemLayoutInformation: this.itemLayoutInformation
-      });
-      this.layoutSubject.next(hasLayoutChanges);
+    }
+    get unloaded$() {
+      return this.renderer.state$.pipe(
+        operators.distinctUntilChanged(),
+        operators.filter((state) => state !== "idle"),
+        operators.switchMap(
+          () => this.renderer.state$.pipe(
+            operators.filter((state) => state === `idle`),
+            operators.first()
+          )
+        )
+      );
+    }
+    get isReady$() {
+      return this.renderer.state$.pipe(operators.map((state) => state === "ready"));
     }
     /**
-     * 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).
+     * Helper that will inject CSS into the document frame.
+     *
+     * @important
+     * The document needs to be detected as a frame.
      */
-    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();
+    upsertCSS(id, style, prepend) {
+      this.renderer.layers.forEach((layer) => {
+        if (layer.element instanceof HTMLIFrameElement) {
+          upsertCSS(layer.element, id, style, prepend);
+        }
+      });
     }
   }
-  class DocumentRenderer {
-    constructor(context, settings, hookManager, item, containerElement, resourcesHandler) {
+  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 SpineItemsManager extends DestroyableClass {
+    constructor(context, settings) {
+      super();
       this.context = context;
       this.settings = settings;
-      this.hookManager = hookManager;
-      this.item = item;
-      this.containerElement = containerElement;
-      this.resourcesHandler = resourcesHandler;
-      this.stateSubject = new rxjs.BehaviorSubject(`idle`);
-      this.triggerSubject = new rxjs.Subject();
-      this.layers = [];
-      this.unload$ = this.triggerSubject.pipe(
-        rxjs.withLatestFrom(this.stateSubject),
-        rxjs.filter(
-          ([trigger, state]) => trigger === `unload` && state !== "idle" && state !== "unloading"
-        ),
-        rxjs.map(() => void 0),
-        rxjs.share()
-      );
-      this.load$ = this.triggerSubject.pipe(
-        rxjs.withLatestFrom(this.stateSubject),
-        rxjs.filter(
-          ([trigger, state]) => trigger === `load` && state !== "ready" && state !== "loaded" && state !== "loading"
-        ),
-        rxjs.map(() => void 0),
-        rxjs.share()
-      );
-      this.destroy$ = this.triggerSubject.pipe(
-        rxjs.filter((trigger) => trigger === `destroy`)
-      );
-      this.load$.pipe(
-        rxjs.switchMap(() => {
-          this.stateSubject.next(`loading`);
-          const createDocument$ = this.onCreateDocument().pipe(
-            rxjs.endWith(null),
-            rxjs.first()
-          );
-          return createDocument$.pipe(
-            rxjs.tap(() => {
-              this.hookManager.execute(`item.onDocumentCreated`, this.item.id, {
-                itemId: this.item.id,
-                layers: this.layers
-              });
-            }),
-            rxjs.switchMap(() => {
-              const loadDocument$ = this.onLoadDocument().pipe(
-                rxjs.endWith(null),
-                rxjs.first()
-              );
-              return loadDocument$;
-            }),
-            waitForSwitch(this.context.bridgeEvent.viewportFree$),
-            rxjs.switchMap(() => {
-              const hookResults = this.hookManager.execute(`item.onDocumentLoad`, this.item.id, {
-                itemId: this.item.id,
-                layers: this.layers
-              }).filter(
-                (result) => result instanceof rxjs.Observable
-              );
-              return rxjs.combineLatest([rxjs.of(null), ...hookResults]).pipe(rxjs.first());
-            }),
-            rxjs.tap(() => {
-              this.stateSubject.next(`loaded`);
-              this.stateSubject.next(`ready`);
-            }),
-            rxjs.takeUntil(rxjs.merge(this.destroy$, this.unload$))
-          );
-        })
-      ).subscribe();
-      this.unload$.pipe(
-        rxjs.switchMap(() => {
-          this.stateSubject.next(`unloading`);
-          return this.context.bridgeEvent.viewportFree$.pipe(
-            rxjs.first(),
-            rxjs.tap(() => {
-              this.hookManager.destroy(`item.onDocumentLoad`, this.item.id);
-            }),
-            rxjs.switchMap(() => {
-              const unload$ = this.onUnload().pipe(rxjs.endWith(null), rxjs.first());
-              return unload$;
-            }),
-            rxjs.tap(() => {
-              this.stateSubject.next(`idle`);
-            }),
-            rxjs.takeUntil(rxjs.merge(this.destroy$, this.load$))
-          );
-        })
-      ).subscribe();
-    }
-    get state$() {
-      return this.stateSubject;
+      this.orderedSpineItemsSubject = new rxjs.BehaviorSubject([]);
+      this.items$ = this.orderedSpineItemsSubject.asObservable();
     }
-    load() {
-      this.triggerSubject.next(`load`);
+    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;
     }
-    unload() {
-      this.triggerSubject.next(`unload`);
+    comparePositionOf(toCompare, withItem) {
+      const toCompareIndex = this.getSpineItemIndex(toCompare) ?? 0;
+      const withIndex = this.getSpineItemIndex(withItem) ?? 0;
+      return toCompareIndex > withIndex ? `after` : toCompareIndex === withIndex ? `same` : `before`;
     }
-    destroy() {
-      this.triggerSubject.next(`destroy`);
-      this.triggerSubject.complete();
-      this.stateSubject.complete();
+    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;
     }
-    get writingMode() {
-      return void 0;
+    addMany(spineItems) {
+      this.orderedSpineItemsSubject.next([
+        ...this.orderedSpineItemsSubject.getValue(),
+        ...spineItems
+      ]);
     }
-    get readingDirection() {
+    // @todo move
+    getSpineItemFromCfi(cfi) {
+      const { itemIndex } = parseCfi(cfi);
+      if (itemIndex !== void 0) {
+        return this.get(itemIndex);
+      }
       return void 0;
     }
-  }
-  class DefaultRenderer extends DocumentRenderer {
-    onUnload() {
-      return rxjs.EMPTY;
+    get items() {
+      return this.orderedSpineItemsSubject.value;
     }
-    onCreateDocument() {
-      return rxjs.EMPTY;
+    /**
+     * @todo handle reload, remove subscription to each items etc. See add()
+     */
+    destroyItems() {
+      this.orderedSpineItemsSubject.value.forEach((item) => item.destroy());
     }
-    onLoadDocument() {
-      return rxjs.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];
     }
-    layout() {
-      return void 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 defaultGetResource = (item) => new URL(item.href);
-  class ResourceHandler {
-    constructor(item, settings) {
-      this.item = 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];
+        }
+        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) => {
+        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(
+    rxjs.tap(([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(
+    rxjs.map((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 rxjs.lastValueFrom(
-        ((_b = (_a = this.settings.values).getResource) == null ? void 0 : _b.call(_a, this.item)) ?? rxjs.of(void 0)
+      this.spineLayout = spineLayout;
+      const navigationUpdate$ = this.context.bridgeEvent.navigation$;
+      const layoutHasChanged$ = this.spineLayout.layout$.pipe(
+        rxjs.filter(({ 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(
+        rxjs.map(
+          ({ numberOfAdjacentSpineItemToPreLoad }) => numberOfAdjacentSpineItemToPreLoad
+        ),
+        rxjs.skip(1),
+        rxjs.distinctUntilChanged()
+      );
+      const loadSpineItems$ = rxjs.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.
+        rxjs.debounceTime(100, rxjs.animationFrameScheduler),
+        waitForSwitch(this.context.bridgeEvent.viewportFree$),
+        rxjs.withLatestFrom(this.context.bridgeEvent.navigation$),
+        rxjs.map(([, navigation]) => navigation.position),
+        mapToItemsToLoad({ spineLocator }),
+        loadItems({ spineItemsManager, settings })
+      );
+      loadSpineItems$.pipe(rxjs.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 rxjs.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(
+        rxjs.switchMap((items) => {
+          const itemsIsReady$ = items.map(
+            (item) => item.isReady$.pipe(rxjs.map((isReady) => ({ item, isReady })))
+          );
+          return rxjs.merge(...itemsIsReady$);
+        }),
+        rxjs.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(
+        rxjs.switchMap((items) => {
+          const resize$ = items.map(
+            (item) => observeResize(item.element).pipe(
+              rxjs.map((entries) => ({ entries, item }))
+            )
+          );
+          return rxjs.merge(...resize$);
+        }),
+        rxjs.share()
       );
-      const contentLayoutChange$ = rxjs.merge(
-        this.unloaded$.pipe(operators.map(() => ({ isFirstLayout: false }))),
-        this.ready$.pipe(operators.map(() => ({ isFirstLayout: true })))
+      this.itemLoaded$ = this.spineItemsManager.items$.pipe(
+        rxjs.switchMap((items) => {
+          const itemsIsReady$ = items.map(
+            (item) => item.loaded$.pipe(rxjs.map(() => item))
+          );
+          return rxjs.merge(...itemsIsReady$);
+        })
       );
-      this.contentLayout$ = contentLayoutChange$.pipe(
-        operators.withLatestFrom(this.isReady$),
-        operators.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 rxjs.Subject();
+      spineItemsManager.items$.pipe(
+        rxjs.switchMap((items) => {
+          const itemsLayout$ = items.map(
+            (spineItem) => spineItem.contentLayout$.pipe(
+              rxjs.tap(() => {
+                this.layout();
+              })
+            )
+          );
+          const writingModeUpdate$ = items.map(
+            (spineItem) => spineItem.loaded$.pipe(
+              rxjs.tap(() => {
+                if (spineItem.isUsingVerticalWriting()) {
+                  this.context.update({
+                    hasVerticalWriting: true
+                  });
+                } else {
+                  this.context.update({
+                    hasVerticalWriting: false
+                  });
+                }
+              })
+            )
+          );
+          return rxjs.merge(...itemsLayout$, ...writingModeUpdate$);
+        })
+      ).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
+      this.layout$ = this.layoutSubject.pipe(
+        rxjs.map((hasChanged) => ({ hasChanged })),
+        rxjs.startWith({ hasChanged: true }),
+        rxjs.map(({ 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
+          };
+        }),
+        rxjs.shareReplay(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(
-        operators.distinctUntilChanged(),
-        operators.filter((state) => state === "ready")
-      );
-    }
-    get loaded$() {
-      return this.renderer.state$.pipe(
-        operators.distinctUntilChanged(),
-        operators.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(
-        operators.distinctUntilChanged(),
-        operators.filter((state) => state !== "idle"),
-        operators.switchMap(
-          () => this.renderer.state$.pipe(
-            operators.filter((state) => state === `idle`),
-            operators.first()
-          )
-        )
+      const hasLayoutChanges = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
+        (old, index) => !shared.isShallowEqual(old, newItemLayoutInformation[index])
       );
-    }
-    get isReady$() {
-      return this.renderer.state$.pipe(operators.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 +6369,17 @@
       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 rxjs.BehaviorSubject({
       supportedPageTurnAnimation: [`fade`, `none`, `slide`],
@@ -6523,6 +6528,8 @@
       hookManager,
       cfi: {
         generateCfiFromRange,
+        generateCfiFromSelection,
+        parseCfi,
         generateCfiForSpineItemPage: (params) => generateCfiForSpineItemPage({
           ...params,
           spineItemLocator
@@ -6530,7 +6537,6 @@
         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 +6558,7 @@
       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
@@ -8111,24 +8118,53 @@
     });
     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 +8197,7 @@
       ({ 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 +8209,7 @@
                     selectionSubject.next({
                       document: frameDoc,
                       selection,
-                      itemId
+                      itemIndex
                     });
                   } else {
                     selectionSubject.next(void 0);
@@ -8186,7 +8223,7 @@
                     {
                       document: frameDoc,
                       selection,
-                      itemId
+                      itemIndex
                     }
                   ]);
                 })
@@ -8221,7 +8258,9 @@
       rxjs.switchMap((container) => rxjs.fromEvent(container, "pointerdown")),
       rxjs.withLatestFrom(selection$),
       rxjs.map(([, selection]) => selection),
-      rxjs.startWith(void 0)
+      rxjs.startWith(void 0),
+      rxjs.shareReplay(1),
+      rxjs.takeUntil(reader.$.destroy$)
     );
     return {
       ...reader,
@@ -8231,7 +8270,8 @@
         selectionEnd$,
         selectionAfterPointerUp$,
         lastSelectionOnPointerdown$,
-        generateCfis
+        getSelection: () => selectionSubject.getValue(),
+        createRangeFromSelection
       },
       destroy: () => {
         selectionSubject.complete();