@prose-reader/core 1.201.0 → 1.203.0

package/dist/createReaderWithEnhancer.d.ts

@@ -1,5 +1,5 @@
-export declare const createReaderWithEnhancers: (options: Partial<import('./settings/types').CoreInputSettings> & Partial<import('./enhancers/layoutEnhancer/types').InputSettings> & {
-    theme?: import('./enhancers/theme').Theme;
+export declare const createReaderWithEnhancers: (options: Partial<import('./settings/types').CoreInputSettings> & Partial<import('./enhancers/layout/types').InputSettings> & {
+    theme?: import('.').Theme;
 } & Partial<import('./enhancers/fonts/types').InputSettings> & {
     loadingElementCreate?: (options: {
         container: HTMLElement;
@@ -55,9 +55,9 @@ export declare const createReaderWithEnhancers: (options: Partial<import('./sett
         internalNavigator: import('./navigation/InternalNavigator').InternalNavigator;
         scrollNavigationController: import('./navigation/controllers/ScrollNavigationController').ScrollNavigationController;
         controlledNavigationController: import('./navigation/controllers/ControlledNavigationController').ControlledNavigationController;
-        isLocked$: import('rxjs').Observable<boolean>;
+        locker: import('./navigation/Locker').Locker;
         viewportState$: import('rxjs').Observable<"free" | "busy">;
-        navigate: (to: import('./navigation/UserNavigator').UserNavigationEntry) => void;
+        navigate: (to: import('./navigation/types').UserNavigationEntry) => void;
         lock(): () => void;
         navigationResolver: {
             getNavigationForUrl: (url: string | URL) => {
@@ -119,8 +119,8 @@ export declare const createReaderWithEnhancers: (options: Partial<import('./sett
         }>;
         destroy$: import('rxjs').Subject<void>;
     };
-}, "settings"> & import('./enhancers/layoutEnhancer/layoutEnhancer').LayoutEnhancerOutput & {
-    settings: import('./settings/SettingsInterface').SettingsInterface<import('./settings/types').CoreInputSettings & import('./enhancers/layoutEnhancer/types').InputSettings, import('./enhancers/layoutEnhancer/types').InputSettings & import('./settings/types').CoreInputSettings & import('./settings/types').ComputedCoreSettings>;
+}, "settings"> & import('./enhancers/layout/layoutEnhancer').LayoutEnhancerOutput & {
+    settings: import('./settings/SettingsInterface').SettingsInterface<import('./settings/types').CoreInputSettings & import('./enhancers/layout/types').InputSettings, import('./enhancers/layout/types').InputSettings & import('./settings/types').CoreInputSettings & import('./settings/types').ComputedCoreSettings>;
 }, "pagination"> & {
     pagination: Omit<{
         getState: () => import('./pagination/Pagination').PaginationInfo;
@@ -133,10 +133,10 @@ export declare const createReaderWithEnhancers: (options: Partial<import('./sett
     };
 } & {
     theme: {
-        set: (theme: import('./enhancers/theme').Theme) => void;
-        get: () => import('./enhancers/theme').Theme;
+        set: (theme: import('.').Theme) => void;
+        get: () => import('.').Theme;
         $: {
-            theme$: import('rxjs').Observable<import('./enhancers/theme').Theme>;
+            theme$: import('rxjs').Observable<import('.').Theme>;
         };
     };
 } & {
@@ -146,7 +146,7 @@ export declare const createReaderWithEnhancers: (options: Partial<import('./sett
         isOrIsWithinValidLink: (target: Event[`target`]) => boolean;
     };
 }, "settings"> & {
-    settings: import('./settings/SettingsInterface').SettingsInterface<import('./settings/types').CoreInputSettings & import('./enhancers/layoutEnhancer/types').InputSettings & import('./enhancers/fonts/types').InputSettings, import('./enhancers/fonts/types').InputSettings & import('./enhancers/layoutEnhancer/types').InputSettings & import('./settings/types').CoreInputSettings & import('./settings/types').ComputedCoreSettings>;
+    settings: import('./settings/SettingsInterface').SettingsInterface<import('./settings/types').CoreInputSettings & import('./enhancers/layout/types').InputSettings & import('./enhancers/fonts/types').InputSettings, import('./enhancers/fonts/types').InputSettings & import('./enhancers/layout/types').InputSettings & import('./settings/types').CoreInputSettings & import('./settings/types').ComputedCoreSettings>;
 } & {
     loading: {
         $: {

package/dist/enhancers/{layoutEnhancer → layout}/types.d.ts

@@ -3,5 +3,6 @@ export type InputSettings = {
     pageVerticalMargin: number;
     layoutAutoResize: `container` | false;
     layoutLayerTransition: boolean;
+    viewportMode: `normal` | `thumbnails`;
 };
 export type OutputSettings = InputSettings;

package/dist/enhancers/layout/viewportMode.d.ts

@@ -0,0 +1,3 @@
+import { Observable } from 'rxjs';
+import { Reader } from '../../reader';
+export declare const createViewportModeHandler: (reader: Reader, viewportMode$: Observable<`normal` | `thumbnails`>) => Observable<"normal" | "thumbnails">;

package/dist/enhancers/navigation/navigators/manualNavigator.d.ts

@@ -1,4 +1,4 @@
-import { UserNavigationEntry } from '../../../navigation/UserNavigator';
+import { UserNavigationEntry } from '../../../navigation/types';
 import { Reader } from '../../../reader';
 import { SpinePosition } from '../../../spine/types';
 export declare class ManualNavigator {

package/dist/enhancers/pagination/enhancer.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { PaginationInfo } from '../../pagination/Pagination';
-import { LayoutEnhancerOutput } from '../layoutEnhancer/layoutEnhancer';
+import { LayoutEnhancerOutput } from '../layout/layoutEnhancer';
 import { EnhancerOutput, RootEnhancer } from '../types/enhancer';
 import { ConsolidatedResource, LocatableResource } from './locate';
 import { ExtraPaginationInfo } from './types';

package/dist/enhancers/pagination/pagination.d.ts

@@ -1,7 +1,7 @@
 import { Observable, ObservedValueOf } from 'rxjs';
 import { PaginationInfo } from '../../pagination/Pagination';
 import { Reader } from '../../reader';
-import { LayoutEnhancerOutput } from '../layoutEnhancer/layoutEnhancer';
+import { LayoutEnhancerOutput } from '../layout/layoutEnhancer';
 import { trackChapterInfo } from './chapters';
 import { EnhancerPaginationInto, ExtraPaginationInfo } from './types';
 export declare const mapPaginationInfoToExtendedInfo: (reader: Reader, paginationInfo: PaginationInfo, chaptersInfo: ObservedValueOf<ReturnType<typeof trackChapterInfo>>, percentageEstimateOfBook: number) => Observable<Omit<ExtraPaginationInfo, "beginAbsolutePageIndex" | "endAbsolutePageIndex" | "beginAbsolutePageIndex" | "numberOfTotalPages">>;

package/dist/enhancers/pagination/progression.d.ts

@@ -1,6 +1,6 @@
 import { Reader } from '../../reader';
 import { SpineItem } from '../../spineItem/SpineItem';
-import { LayoutEnhancerOutput } from '../layoutEnhancer/layoutEnhancer';
+import { LayoutEnhancerOutput } from '../layout/layoutEnhancer';
 export declare const getPercentageEstimate: (reader: Reader & LayoutEnhancerOutput, currentSpineIndex: number, pageIndex: number, currentPosition: {
     x: number;
     y: number;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { createReaderWithEnhancers as createReader } from './createReaderWithEnh
 export type { Manifest } from '@prose-reader/shared';
 export { DocumentRenderer } from './spineItem/renderer/DocumentRenderer';
 export { ResourceHandler } from './spineItem/resources/ResourceHandler';
+export type { Theme } from './enhancers/theme';
 export { HookManager } from './hooks/HookManager';
 export { SettingsManager } from './settings/SettingsManager';
 export type Reader = ReturnType<typeof createReader>;

package/dist/index.js

@@ -2,7 +2,6 @@ import { switchMap, of, fromEvent, take, map, from, takeUntil, Observable, defer
 import { switchMap as switchMap$1, first, map as map$1, distinctUntilChanged, startWith, shareReplay, tap, pairwise, take as take$1, takeUntil as takeUntil$1, filter as filter$1, debounceTime, skip, mergeMap as mergeMap$1, catchError as catchError$1, withLatestFrom as withLatestFrom$1 } from "rxjs/operators";
 import { isShallowEqual, shallowMergeIfDefined, getParentPath, parseContentType, detectMimeTypeFromName, arrayEqual } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
-import { isDefined as isDefined$1 } from "reactjrx";
 const getAttributeValueFromString = (string, key) => {
   const regExp = new RegExp(`${key}\\s*=\\s*([0-9.]+)`, `i`);
   const match = string.match(regExp) || [];
@@ -678,6 +677,17 @@ const observeMutation = (target, options) => {
     return () => observer.disconnect();
   });
 };
+function observeIntersection(element, options) {
+  return new Observable((observer) => {
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      observer.next(entries);
+    }, options);
+    intersectionObserver.observe(element);
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  });
+}
 class SettingsManagerOverload {
   constructor(initialSettings, settingsManager) {
     this.settingsManager = settingsManager;
@@ -732,9 +742,12 @@ class SettingsManagerOverload {
       ...this.outputSettings
     };
   }
-  watch(keys) {
+  watch(keyOrKeys) {
+    if (Array.isArray(keyOrKeys)) {
+      return this.values$.pipe(watchKeys(keyOrKeys));
+    }
     return this.values$.pipe(
-      mapKeysTo(keys),
+      map$1((result) => result[keyOrKeys]),
       distinctUntilChanged(isShallowEqual)
     );
   }
@@ -932,7 +945,7 @@ class DestroyableClass {
     this.destroySubject.complete();
   }
 }
-class DocumentRenderer extends DestroyableClass {
+const _DocumentRenderer = class _DocumentRenderer extends DestroyableClass {
   constructor(params) {
     super();
     this.triggerSubject = new Subject();
@@ -1022,6 +1035,12 @@ class DocumentRenderer extends DestroyableClass {
     );
     merge(unload$).pipe(takeUntil(this.destroy$)).subscribe();
   }
+  setDocumentContainer(element) {
+    this._documentContainer = element;
+    this._documentContainer.classList.add(
+      _DocumentRenderer.DOCUMENT_CONTAINER_CLASS_NAME
+    );
+  }
   attach() {
     if (this.documentContainer) {
       this.containerElement.appendChild(this.documentContainer);
@@ -1029,8 +1048,8 @@ class DocumentRenderer extends DestroyableClass {
   }
   detach() {
     var _a;
-    (_a = this.documentContainer) == null ? void 0 : _a.remove();
-    this.documentContainer = void 0;
+    (_a = this._documentContainer) == null ? void 0 : _a.remove();
+    this._documentContainer = void 0;
   }
   get state$() {
     return this.stateSubject;
@@ -1071,8 +1090,12 @@ class DocumentRenderer extends DestroyableClass {
     return defer(() => this.onLayout(params)).pipe();
   }
   destroy() {
-    super.destroy();
+    this.unload();
     this.stateSubject.complete();
+    super.destroy();
+  }
+  get documentContainer() {
+    return this._documentContainer;
   }
   get writingMode() {
     return void 0;
@@ -1091,7 +1114,9 @@ class DocumentRenderer extends DestroyableClass {
     }
     return ((_a = this.context.manifest) == null ? void 0 : _a.renditionLayout) ?? "reflowable";
   }
-}
+};
+_DocumentRenderer.DOCUMENT_CONTAINER_CLASS_NAME = `prose-reader-document-container`;
+let DocumentRenderer = _DocumentRenderer;
 const defaultGetResource = (item) => new URL(item.href);
 class ResourceHandler {
   constructor(item, settings) {
@@ -1884,7 +1909,7 @@ class HtmlRenderer extends DocumentRenderer {
   }
   onCreateDocument() {
     const frameElement = createFrameElement();
-    this.documentContainer = frameElement;
+    this.setDocumentContainer(frameElement);
     return of(frameElement);
   }
   onLoadDocument() {
@@ -2054,6 +2079,7 @@ let SettingsManager$1 = class SettingsManager2 extends SettingsManagerOverload {
       pageHorizontalMargin,
       pageVerticalMargin,
       layoutLayerTransition,
+      viewportMode,
       ...rest
     } = settings;
     return rest;
@@ -2063,7 +2089,8 @@ let SettingsManager$1 = class SettingsManager2 extends SettingsManagerOverload {
       layoutAutoResize: "container",
       pageHorizontalMargin: 24,
       pageVerticalMargin: 24,
-      layoutLayerTransition: true
+      layoutLayerTransition: true,
+      viewportMode: "normal"
     };
   }
 };
@@ -2241,6 +2268,24 @@ const createLayoutInfo = (reader) => {
   info$.pipe(takeUntil(reader.$.destroy$)).subscribe();
   return { layout$, info$ };
 };
+const createViewportModeHandler = (reader, viewportMode$) => {
+  return viewportMode$.pipe(
+    tap$1((viewportMode) => {
+      reader.viewport.value.element.style.transition = `transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
+      if (reader.settings.values.computedPageTurnMode === "scrollable") {
+        reader.viewport.value.element.style.transformOrigin = `top`;
+      } else {
+        reader.viewport.value.element.style.transformOrigin = `center`;
+      }
+      if (viewportMode === `thumbnails`) {
+        reader.viewport.value.element.style.transform = `scale(0.5)`;
+      } else {
+        reader.viewport.value.element.style.transform = `scale(1)`;
+      }
+      reader.layout();
+    })
+  );
+};
 const layoutEnhancer = (next) => (options) => {
   const {
     pageHorizontalMargin,
@@ -2376,11 +2421,16 @@ const layoutEnhancer = (next) => (options) => {
     })
   );
   const { layout$, info$ } = createLayoutInfo(reader);
+  const viewportModeHandler$ = createViewportModeHandler(
+    reader,
+    settingsManager.watch(`viewportMode`)
+  );
   merge(
     updateSpineItemClassName$,
     revealItemOnReady$,
     movingSafePan$,
-    layoutOnContainerResize$
+    layoutOnContainerResize$,
+    viewportModeHandler$
   ).pipe(takeUntil$1(reader.$.destroy$)).subscribe();
   return {
     ...reader,
@@ -2526,7 +2576,7 @@ class ImageRenderer extends DocumentRenderer {
     const imgElement = this.containerElement.ownerDocument.createElement(`img`);
     return from(this.resourcesHandler.getResource()).pipe(
       switchMap((responseOrUrl) => {
-        this.documentContainer = imgElement;
+        this.setDocumentContainer(imgElement);
         imgElement.style.objectFit = `contain`;
         imgElement.style.userSelect = `none`;
         if (responseOrUrl instanceof URL) {
@@ -2699,7 +2749,7 @@ const handleLinksNavigation = (reader, manualNavigator) => {
     })
   );
 };
-const report$4 = Report.namespace(`navigation`);
+const report$3 = Report.namespace(`navigation`);
 class SpineItemPosition {
   constructor(position) {
     this.__symbol = Symbol(`SpineItemPosition`);
@@ -3099,7 +3149,7 @@ class ManualNavigator {
       pageIndex,
       spineItemId
     });
-    report$4.debug(`.goToPageOfSpineItem()`, {
+    report$3.debug(`.goToPageOfSpineItem()`, {
       pageIndex,
       spineItemId,
       ...rest,
@@ -3117,7 +3167,7 @@ class ManualNavigator {
     const foundInfo = this.reader.spine.locator.getSpineInfoFromAbsolutePageIndex({
       absolutePageIndex
     });
-    report$4.debug(`.goToAbsolutePageIndex()`, {
+    report$3.debug(`.goToAbsolutePageIndex()`, {
       absolutePageIndex,
       ...rest,
       foundInfo
@@ -3160,7 +3210,7 @@ class PanNavigator {
     }
     let navigation = this.reader.navigation.getNavigation().position;
     if (delta) {
-      const viewportScale = this.reader.viewport.absoluteViewport.width / this.reader.viewport.absoluteViewport.width;
+      const viewportScale = this.reader.viewport.absoluteViewport.width / this.reader.viewport.relativeViewport.width;
       const correctedX = Math.floor(delta.x) - (((_b = this.lastDelta) == null ? void 0 : _b.x) || 0);
       const correctedY = Math.floor(delta.y) - (((_c = this.lastDelta) == null ? void 0 : _c.y) || 0);
       const x = Math.floor(
@@ -3286,7 +3336,7 @@ const navigationEnhancer = (next) => (options) => {
     }
   };
 };
-const NAMESPACE$5 = `paginationEnhancer`;
+const NAMESPACE$4 = `paginationEnhancer`;
 const consolidate = (item, reader) => {
   var _a;
   let itemPageIndex = (_a = item.meta) == null ? void 0 : _a.itemPageIndex;
@@ -3641,7 +3691,7 @@ const trackPaginationInfo = (reader) => {
   );
   return { paginationInfo$, getPaginationInfo: () => currentValue.value };
 };
-Report.namespace(NAMESPACE$5);
+Report.namespace(NAMESPACE$4);
 const paginationEnhancer = (next) => (options) => {
   const reader = next(options);
   const { paginationInfo$, getPaginationInfo } = trackPaginationInfo(reader);
@@ -6158,8 +6208,8 @@ const withRestoredPosition = ({
     );
   })
 );
-const NAMESPACE$4 = `navigation/InternalNavigator`;
-const report$3 = Report.namespace(NAMESPACE$4);
+const NAMESPACE$3 = `navigation/InternalNavigator`;
+const report$2 = Report.namespace(NAMESPACE$3);
 class InternalNavigator extends DestroyableClass {
   constructor(settings, context, userNavigation$, viewportController, scrollNavigationController, navigationResolver, spine, isUserLocked$) {
     super();
@@ -6361,7 +6411,7 @@ class InternalNavigator extends DestroyableClass {
     );
     const notifyNavigationUpdate = (stream) => stream.pipe(
       tap$1(([currentNavigation, previousNavigation]) => {
-        report$3.info(
+        report$2.info(
           `navigation updated from ${currentNavigation.meta.triggeredBy} of type ${currentNavigation.type}`,
           {
             previousNavigation,
@@ -6437,40 +6487,23 @@ const getScaledDownPosition = ({
   return scaledDownPosition;
 };
 const SCROLL_FINISHED_DEBOUNCE_TIMEOUT = 500;
-const NAMESPACE$3 = `navigation/UserNavigator`;
-const report$2 = Report.namespace(NAMESPACE$3);
-class UserNavigator extends DestroyableClass {
-  constructor(settings, scrollNavigatorElement$, context, scrollHappeningFromBrowser$, spine) {
+class UserScrollNavigation extends DestroyableClass {
+  constructor(settings, context, spine, scrollNavigationController, locker) {
     super();
     this.settings = settings;
-    this.scrollNavigatorElement$ = scrollNavigatorElement$;
     this.context = context;
-    this.scrollHappeningFromBrowser$ = scrollHappeningFromBrowser$;
     this.spine = spine;
+    this.scrollNavigationController = scrollNavigationController;
+    this.locker = locker;
     this.navigationSubject = new Subject();
-    this.locker = new Locker();
     this.navigation$ = this.navigationSubject.asObservable();
-    const userScroll$ = scrollNavigatorElement$.pipe(
-      filter(isDefined$1),
-      switchMap(
-        (element) => settings.watch(["computedPageTurnMode"]).pipe(
-          switchMap(
-            ({ computedPageTurnMode }) => computedPageTurnMode === "controlled" ? NEVER : fromEvent(element, `scroll`).pipe(
-              withLatestFrom(scrollHappeningFromBrowser$),
-              filter(
-                ([, shouldAvoidScrollEvent]) => !shouldAvoidScrollEvent
-              ),
-              map(([event]) => event)
-            )
-          )
-        )
-      ),
-      share()
-    );
-    const navigateOnScroll$ = userScroll$.pipe(
+    const navigateOnScroll$ = this.scrollNavigationController.userScroll$.pipe(
       exhaustMap((event) => {
         const unlock = this.locker.lock();
-        return merge(userScroll$, of(event)).pipe(
+        return merge(
+          this.scrollNavigationController.userScroll$,
+          of(event)
+        ).pipe(
           debounceTime$1(
             SCROLL_FINISHED_DEBOUNCE_TIMEOUT,
             animationFrameScheduler
@@ -6486,7 +6519,7 @@ class UserNavigator extends DestroyableClass {
               }),
               spineElement: this.spine.element
             });
-            this.navigate({
+            this.navigationSubject.next({
               animation: false,
               type: "scroll",
               position: scaledDownPosition
@@ -6500,15 +6533,6 @@ class UserNavigator extends DestroyableClass {
     );
     merge(navigateOnScroll$).pipe(takeUntil(this.destroy$)).subscribe();
   }
-  /**
-   * Remember that this navigation is not trustable.
-   *
-   * It needs to be verified and adjusted if necessary before becoming internal.
-   */
-  navigate(to) {
-    report$2.info(`.navigate`, to);
-    this.navigationSubject.next(to);
-  }
 }
 const spinePositionToTranslation = (position) => {
   return {
@@ -6773,6 +6797,46 @@ class ScrollNavigationController extends ReactiveEntity {
       switchMap(() => merge(of(true), of(false))),
       shareReplay$1(1)
     );
+    const isSpineScrolling$ = merge(
+      spine.element$.pipe(switchMap((element) => observeResize(element))),
+      spine.element$.pipe(switchMap((element) => fromEvent(element, "scroll"))),
+      spine.spineItemsObserver.itemResize$
+    ).pipe(
+      switchMap(
+        () => timer(10).pipe(
+          map(() => false),
+          startWith$1(true)
+        )
+      ),
+      distinctUntilChanged$1(),
+      startWith$1(false)
+    );
+    const scrollHappeningFromBrowser$ = combineLatest([
+      isSpineScrolling$,
+      this.isScrolling$
+    ]).pipe(
+      map(
+        ([spineScrolling, viewportScrolling]) => spineScrolling || viewportScrolling
+      ),
+      shareReplay$1(1)
+    );
+    this.userScroll$ = this.watch("element").pipe(
+      filter(isDefined),
+      switchMap(
+        (element) => settings.watch(["computedPageTurnMode"]).pipe(
+          switchMap(
+            ({ computedPageTurnMode }) => computedPageTurnMode === "controlled" ? NEVER : fromEvent(element, `scroll`).pipe(
+              withLatestFrom(scrollHappeningFromBrowser$),
+              filter(
+                ([, shouldAvoidScrollEvent]) => !shouldAvoidScrollEvent
+              ),
+              map(([event]) => event)
+            )
+          )
+        )
+      ),
+      share()
+    );
     merge(elementCreation$, toggleElementDisplay$, navigate$).pipe(takeUntil(this.destroy$)).subscribe();
   }
   navigate(navigation) {
@@ -7416,6 +7480,8 @@ const createNavigator = ({
   settings,
   viewport
 }) => {
+  const userExplicitNavigationSubject = new Subject();
+  const locker = new Locker();
   const navigationResolver = createNavigationResolver({
     context,
     settings,
@@ -7437,58 +7503,42 @@ const createNavigator = ({
     spine,
     context
   );
-  const isSpineScrolling$ = merge(
-    spine.element$.pipe(switchMap$1((element) => observeResize(element))),
-    spine.element$.pipe(switchMap$1((element) => fromEvent(element, "scroll"))),
-    spine.spineItemsObserver.itemResize$
-  ).pipe(
-    switchMap$1(
-      () => timer(10).pipe(
-        map$1(() => false),
-        startWith(true)
-      )
-    ),
-    distinctUntilChanged(),
-    startWith(false)
-  );
-  const scrollHappeningFromBrowser$ = combineLatest([
-    isSpineScrolling$,
-    scrollNavigationController.isScrolling$
-  ]).pipe(
-    map$1(
-      ([spineScrolling, viewportScrolling]) => spineScrolling || viewportScrolling
-    ),
-    shareReplay(1)
-  );
-  const userNavigator = new UserNavigator(
+  const userScrollNavigation = new UserScrollNavigation(
     settings,
-    scrollNavigationController.watch("element"),
     context,
-    scrollHappeningFromBrowser$,
-    spine
+    spine,
+    scrollNavigationController,
+    locker
+  );
+  const userNavigation$ = merge(
+    userExplicitNavigationSubject,
+    userScrollNavigation.navigation$
   );
   const internalNavigator = new InternalNavigator(
     settings,
     context,
-    userNavigator.navigation$,
+    userNavigation$,
     controlledNavigationController,
     scrollNavigationController,
     navigationResolver,
     spine,
-    userNavigator.locker.isLocked$
+    locker.isLocked$
   );
   const viewportState$ = combineLatest([
     controlledNavigationController.isNavigating$,
     scrollNavigationController.isNavigating$,
-    userNavigator.locker.isLocked$,
+    locker.isLocked$,
     internalNavigator.locker.isLocked$
   ]).pipe(
     map$1((states) => states.some((isLocked) => isLocked) ? `busy` : `free`),
     distinctUntilChanged(),
     shareReplay(1)
   );
+  const navigate = (to) => {
+    userExplicitNavigationSubject.next(to);
+  };
   const destroy = () => {
-    userNavigator.destroy();
+    userScrollNavigation.destroy();
     controlledNavigationController.destroy();
     internalNavigator.destroy();
   };
@@ -7498,11 +7548,11 @@ const createNavigator = ({
     internalNavigator,
     scrollNavigationController,
     controlledNavigationController,
-    isLocked$: userNavigator.locker.isLocked$,
+    locker,
     viewportState$,
-    navigate: userNavigator.navigate.bind(userNavigator),
+    navigate,
     lock() {
-      return userNavigator.locker.lock();
+      return locker.lock();
     },
     navigationResolver,
     navigation$: internalNavigator.navigation$
@@ -8369,11 +8419,16 @@ class SpineItemsLoader extends DestroyableClass {
     loadSpineItems$.pipe(takeUntil(this.destroy$)).subscribe();
   }
   forceOpen(spineItems) {
-    this.forcedOpenSubject.next([...this.forcedOpenSubject.value, spineItems]);
+    const indexes = spineItems.map(
+      (item) => typeof item === "number" ? item : item.index
+    );
+    this.forcedOpenSubject.next([...this.forcedOpenSubject.value, indexes]);
     return () => {
       if (this.isDestroyed) return;
       this.forcedOpenSubject.next(
-        this.forcedOpenSubject.value.filter((item) => item !== spineItems)
+        this.forcedOpenSubject.value.filter(
+          (arrayOfIndexes) => arrayOfIndexes !== indexes
+        )
       );
     };
   }
@@ -8955,11 +9010,23 @@ class Viewport extends ReactiveEntity {
     `;
     element.className = `${HTML_PREFIX$1}-viewport`;
     super({
-      element
+      element,
+      pageSize: {
+        width: 1,
+        height: 1
+      }
     });
     this.context = context;
+    const updatePageSize$ = this.context.watch("visibleAreaRect").pipe(
+      tap$1(() => {
+        this.update({
+          pageSize: this.calculatePageSize()
+        });
+      })
+    );
+    merge(updatePageSize$).pipe(takeUntil(this.destroy$)).subscribe();
   }
-  getPageSize() {
+  calculatePageSize() {
     const absoluteViewport = this.absoluteViewport;
     const { isUsingSpreadMode: isUsingSpreadMode2 } = this.context.state;
     return {
@@ -8978,6 +9045,9 @@ class Viewport extends ReactiveEntity {
    * @important
    *
    * Contains long floating values.
+   *
+   * @todo take position of translate into consideration in something
+   * like relativeViewportPosition or even better a ViewportSlicePosition
    */
   get relativeViewport() {
     const absoluteViewport = this.absoluteViewport;
@@ -9038,7 +9108,9 @@ const createReader = (inputSettings) => {
   );
   navigator2.viewportState$.subscribe(context.bridgeEvent.viewportStateSubject);
   navigator2.navigation$.subscribe(context.bridgeEvent.navigationSubject);
-  navigator2.isLocked$.subscribe(context.bridgeEvent.navigationIsLockedSubject);
+  navigator2.locker.isLocked$.subscribe(
+    context.bridgeEvent.navigationIsLockedSubject
+  );
   pagination.state$.subscribe(context.bridgeEvent.paginationSubject);
   const layout = () => {
     var _a;
@@ -9243,6 +9315,7 @@ export {
   isHtmlTagElement,
   isShallowEqual2 as isShallowEqual,
   mapKeysTo,
+  observeIntersection,
   observeMutation,
   observeResize,
   removeCSS,