@prose-reader/core 1.41.0 → 1.43.0

package/dist/index.d.ts

@@ -1,8 +1,4366 @@
-import { createSelection } from "./selection";
-export type { Manifest } from "./types";
-import { createReaderWithEnhancers } from "./createReaderWithEnhancer";
-export type Reader = ReturnType<typeof createReaderWithEnhancers>;
-export { createReaderWithEnhancers as createReader };
-export type ReaderSelection = ReturnType<typeof createSelection>;
-export { Report } from "./report";
-export { groupBy, isShallowEqual } from "./utils/objects";
+import { BehaviorSubject } from 'rxjs';
+import { Manifest } from '@prose-reader/shared';
+import { Observable } from 'rxjs';
+
+declare type Api = {
+    zoom: {
+        enter: (imgElement?: HTMLImageElement) => void;
+        exit: () => void;
+        move: (position: {
+            x: number;
+            y: number;
+        } | undefined, details: {
+            isFirst: boolean;
+            isLast: boolean;
+        }) => void;
+        isZooming: () => boolean;
+        isUsingScrollableZoom: () => boolean;
+        getScaleValue: () => number;
+        scale: (scale: number) => void;
+        setCurrentScaleAsBase: () => void;
+        $: {
+            isZooming$: Observable<boolean>;
+        };
+    };
+};
+
+declare type CfiLocator = ReturnType<typeof createCfiLocator>;
+
+declare type Context = ReturnType<typeof createContext>;
+
+declare type Context_2 = {
+    load: (newManifest: Manifest, newLoadOptions: LoadOptions) => void;
+    getManifest: () => Manifest | undefined;
+    areAllItemsPrePaginated: () => boolean;
+    getCalculatedInnerMargin: () => number;
+    getVisibleAreaRect: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    isUsingSpreadMode: () => boolean | undefined;
+    setHasVerticalWriting: (value: boolean) => void;
+    getReadingDirection: () => Manifest[`readingDirection`] | undefined;
+    getPageSize: () => {
+        height: number;
+        width: number;
+    };
+    setVisibleAreaRect: (options: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+    isRTL: () => boolean;
+    destroy: () => void;
+    getState: () => State;
+    containerElement$: Observable<HTMLElement>;
+    isUsingSpreadMode$: Observable<boolean | undefined>;
+    hasVerticalWriting$: Observable<boolean>;
+    $: {
+        destroy$: Observable<void>;
+        state$: Observable<State>;
+        manifest$: Observable<Manifest>;
+    };
+};
+
+declare type ContextSettings = Partial<InputSettings>;
+
+declare const createCfiLocator: ({ spineItemManager, spineItemLocator, }: {
+    spineItemManager: SpineItemManager;
+    context: Context_2;
+    spineItemLocator: ReturnType<typeof createLocationResolver_2>;
+}) => {
+    getSpineItemFromCfi: (cfi: string) => {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    } | undefined;
+    getCfiMetaInformation: (cfi: string) => {
+        spineItemIndex: number | undefined;
+    } | undefined;
+    getCfi: ((pageIndex: number, spineItem: SpineItem) => string) | ((pageIndex: number, spineItem: {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    }) => string);
+    getRootCfi: (spineItem: SpineItem) => string;
+    resolveCfi: (cfiString: string) => {
+        node: Node | undefined;
+        offset: number | undefined;
+        spineItemIndex: number;
+    } | {
+        spineItemIndex: number;
+        node?: undefined;
+        offset?: undefined;
+    } | undefined;
+    generateFromRange: ({ startNode, start, end, endNode }: {
+        startNode: Node;
+        start: number;
+        endNode: Node;
+        end: number;
+    }, item: Manifest[`spineItems`][number]) => {
+        start: string;
+        end: string;
+    };
+};
+
+declare const createContext: (settings: ReturnType<typeof createSettings>) => Context_2;
+
+declare const createEventsHelper: ({ iframeEventBridgeElement$, locator, }: {
+    iframeEventBridgeElement$: BehaviorSubject<HTMLElement | undefined>;
+    spineItemManager: SpineItemManager;
+    context: Context_2;
+    locator: ReturnType<typeof createLocationResolver>;
+}) => {
+    normalizeEventForViewport: <E extends MouseEvent | PointerEvent | TouchEvent>(event: E) => E;
+};
+
+declare const createLocationResolver: ({ spineItemManager, context, spineItemLocator, settings }: {
+    spineItemManager: SpineItemManager;
+    context: Context_2;
+    spineItemLocator: ReturnType<typeof createLocationResolver_2>;
+    settings: Settings;
+}) => {
+    getSpinePositionFromSpineItemPosition: (spineItemPosition: SpineItemNavigationPosition | SpineItemPosition, spineItem: SpineItem) => SpinePosition;
+    getSpinePositionFromSpineItem: (spineItem: SpineItem) => SpinePosition;
+    getSpinePositionFromSpineItemAnchor: (anchor: string, spineItem: SpineItem) => SpinePosition;
+    getSpineItemPositionFromSpinePosition: ((position: UnsafeSpinePosition, spineItem: SpineItem) => UnsafeSpineItemPosition) | ((position: UnsafeSpinePosition, spineItem: {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    }) => UnsafeSpineItemPosition);
+    getSpineItemFromPosition: ((position: UnsafeSpinePosition) => {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    } | undefined) | ((position: UnsafeSpinePosition) => {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    } | undefined);
+    getSpineItemFromIframe: (iframe: Element) => {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    } | undefined;
+    getSpineItemPageIndexFromNode: (node: Node, offset: number | undefined, spineItemOrIndex: SpineItem | number) => number | undefined;
+    getSpineItemsFromReadingOrderPosition: (position: SpinePosition) => {
+        begin: number;
+        beginPosition: SpinePosition;
+        end: number;
+        endPosition: SpinePosition;
+    } | undefined;
+};
+
+declare const createLocationResolver_2: ({ context }: {
+    context: Context_2;
+}) => {
+    getSpineItemPositionFromNode: (node: Node, offset: number, spineItem: SpineItem) => {
+        x: number;
+        y: number;
+    } | undefined;
+    getSpineItemPositionFromPageIndex: (pageIndex: number, spineItem: SpineItem) => SpineItemPosition;
+    getSpineItemOffsetFromAnchor: (anchor: string, spineItem: SpineItem) => number;
+    getSpineItemPageIndexFromPosition: (position: UnsafeSpineItemPosition, spineItem: SpineItem) => number;
+    getSpineItemPageIndexFromNode: (node: Node, offset: number, spineItem: SpineItem) => number | undefined;
+    getSpineItemClosestPositionFromUnsafePosition: (unsafePosition: UnsafeSpineItemPosition, spineItem: SpineItem) => {
+        x: number;
+        y: number;
+    };
+    getFirstNodeOrRangeAtPage: (pageIndex: number, spineItem: SpineItem) => {
+        node: Node;
+        offset: number;
+    } | undefined;
+};
+
+declare const createPagination: ({ context }: {
+    context: Context_2;
+    spineItemManager: SpineItemManager;
+}) => {
+    destroy: () => void;
+    updateBeginAndEnd: ((begin: {
+        spineItem: SpineItem;
+        pageIndex: number;
+        cfi: string | undefined;
+        options: {
+            isAtEndOfChapter?: boolean;
+        };
+    } & {
+        spineItemIndex: number;
+    }, end: {
+        spineItem: SpineItem;
+        pageIndex: number;
+        cfi: string | undefined;
+        options: {
+            isAtEndOfChapter?: boolean;
+        };
+    } & {
+        spineItemIndex: number;
+    }) => void) | ((begin: {
+        spineItem: SpineItem;
+        pageIndex: number;
+        cfi: string | undefined;
+        options: {
+            isAtEndOfChapter?: boolean;
+        };
+    } & {
+        spineItemIndex: number;
+    }, end: {
+        spineItem: SpineItem;
+        pageIndex: number;
+        cfi: string | undefined;
+        options: {
+            isAtEndOfChapter?: boolean;
+        };
+    } & {
+        spineItemIndex: number;
+    }) => void);
+    getPaginationInfo: () => PaginationInfo;
+    paginationInfo$: Observable<PaginationInfo>;
+};
+
+export declare const createReader: (options: {
+    hooks?: Hook[] | undefined;
+} & Pick<Partial<InputSettings>, "pageTurnMode" | "pageTurnDirection" | "pageTurnAnimation" | "forceSinglePageMode" | "navigationSnapThreshold" | "numberOfAdjacentSpineItemToPreLoad"> & {
+    theme?: Theme | undefined;
+} & SettingsInput & {
+    layoutAutoResize?: false | "container" | undefined;
+} & {
+    fontScale?: number | undefined;
+    lineHeight?: number | "publisher" | undefined;
+    fontWeight?: 300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "publisher" | undefined;
+    fontJustification?: "center" | "left" | "right" | "justify" | "publisher" | undefined;
+} & {
+    loadingElementCreate?: ((options: {
+        container: HTMLElement;
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+    }) => HTMLElement) | undefined;
+}) => Omit<Omit<Omit<Omit<ReaderInternal & {
+    progression: {
+        getPercentageEstimate: (context: Context_2, currentSpineIndex: number, numberOfPages: number, pageIndex: number, currentPosition: {
+            x: number;
+            y: number;
+        }, currentItem: {
+            layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                blankPagePosition: "after" | "before" | "none";
+                minimumWidth: number;
+                spreadPosition: "none" | "left" | "right";
+            }) => {
+                width: number;
+                height: number;
+            };
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            load: () => void;
+            adjustPositionOfElement: ({ right, left, top }: {
+                right?: number | undefined;
+                left?: number | undefined;
+                top?: number | undefined;
+            }) => void;
+            getElementDimensions: () => {
+                width: number;
+                height: number;
+            };
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            getResource: () => Promise<Response>;
+            translateFramePositionIntoPage: (position: {
+                clientX: number;
+                clientY: number;
+            }) => {
+                clientX: number;
+                clientY: number;
+            };
+            setLayoutDirty: () => void;
+            injectStyle: (cssText: string) => void;
+            loadContent: () => void;
+            unloadContent: () => void;
+            spineItemFrame: {
+                getIsLoaded: () => boolean;
+                getIsReady: () => boolean;
+                getViewportDimensions: () => {
+                    width: number;
+                    height: number;
+                } | undefined;
+                getFrameElement: () => HTMLIFrameElement | undefined;
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                load: () => void;
+                unload: () => void;
+                staticLayout: (size: {
+                    width: number;
+                    height: number;
+                }) => void;
+                getManipulableFrame: () => {
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                isUsingVerticalWriting: () => boolean;
+                getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                destroy: () => void;
+                $: {
+                    unload$: Observable<void>;
+                    unloaded$: Observable<void>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    ready$: Observable<FontFaceSet | undefined>;
+                    isReady$: Observable<boolean>;
+                    contentLayoutChange$: Observable<{
+                        isFirstLayout: boolean;
+                    } | {
+                        isFirstLayout: boolean;
+                    }>;
+                };
+            };
+            element: HTMLElement;
+            getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+            getViewPortInformation: () => {
+                computedScale: number;
+                computedWidthScale: number;
+                viewportDimensions: {
+                    width: number;
+                    height: number;
+                };
+            } | undefined;
+            isImageType: () => boolean;
+            isReady: () => boolean;
+            destroy: () => void;
+            isUsingVerticalWriting: () => boolean | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            manipulateSpineItem: (cb: (options: {
+                container: HTMLElement;
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                overlayElement: HTMLDivElement;
+            } & ({
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | {
+                frame: undefined;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string) => void;
+            })) => boolean) => boolean;
+            executeOnLayoutBeforeMeasurementHook: (options: {
+                minimumWidth: number;
+            }) => void;
+            selectionTracker: {
+                track: (frameToTrack: HTMLIFrameElement) => void;
+                destroy: () => void;
+                isSelecting: () => boolean;
+                getSelection: () => Selection | undefined;
+                $: Observable<{
+                    event: "selectionchange";
+                    data: Selection | null;
+                } | {
+                    event: "selectstart";
+                    data: Selection | null;
+                } | {
+                    event: "selectend";
+                    data: Selection | null;
+                }>;
+            };
+            fingerTracker: {
+                track: (frame: HTMLIFrameElement) => void;
+                getFingerPositionInIframe(): {
+                    x: number | undefined;
+                    y: number | undefined;
+                } | undefined;
+                destroy: () => void;
+                $: Observable<{
+                    event: "fingermove";
+                    data: {
+                        x: number;
+                        y: number;
+                    };
+                } | {
+                    event: "fingerout";
+                    data: undefined;
+                }>;
+            };
+            getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                columnHeight: number;
+                columnWidth: number;
+                width: number;
+            };
+            getDimensionsForPaginatedContent: () => {
+                columnHeight: number;
+                columnWidth: number;
+            };
+            $: {
+                contentLayout$: Observable<{
+                    isFirstLayout: boolean;
+                    isReady: boolean;
+                }>;
+                loaded$: Observable<HTMLIFrameElement>;
+                isReady$: Observable<boolean>;
+            };
+        }) => number;
+        getScrollPercentageWithinItem: (context: Context_2, currentPosition: {
+            x: number;
+            y: number;
+        }, currentItem: {
+            layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                blankPagePosition: "after" | "before" | "none";
+                minimumWidth: number;
+                spreadPosition: "none" | "left" | "right";
+            }) => {
+                width: number;
+                height: number;
+            };
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            load: () => void;
+            adjustPositionOfElement: ({ right, left, top }: {
+                right?: number | undefined;
+                left?: number | undefined;
+                top?: number | undefined;
+            }) => void;
+            getElementDimensions: () => {
+                width: number;
+                height: number;
+            };
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            getResource: () => Promise<Response>;
+            translateFramePositionIntoPage: (position: {
+                clientX: number;
+                clientY: number;
+            }) => {
+                clientX: number;
+                clientY: number;
+            };
+            setLayoutDirty: () => void;
+            injectStyle: (cssText: string) => void;
+            loadContent: () => void;
+            unloadContent: () => void;
+            spineItemFrame: {
+                getIsLoaded: () => boolean;
+                getIsReady: () => boolean;
+                getViewportDimensions: () => {
+                    width: number;
+                    height: number;
+                } | undefined;
+                getFrameElement: () => HTMLIFrameElement | undefined;
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                load: () => void;
+                unload: () => void;
+                staticLayout: (size: {
+                    width: number;
+                    height: number;
+                }) => void;
+                getManipulableFrame: () => {
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                isUsingVerticalWriting: () => boolean;
+                getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                destroy: () => void;
+                $: {
+                    unload$: Observable<void>;
+                    unloaded$: Observable<void>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    ready$: Observable<FontFaceSet | undefined>;
+                    isReady$: Observable<boolean>;
+                    contentLayoutChange$: Observable<{
+                        isFirstLayout: boolean;
+                    } | {
+                        isFirstLayout: boolean;
+                    }>;
+                };
+            };
+            element: HTMLElement;
+            getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+            getViewPortInformation: () => {
+                computedScale: number;
+                computedWidthScale: number;
+                viewportDimensions: {
+                    width: number;
+                    height: number;
+                };
+            } | undefined;
+            isImageType: () => boolean;
+            isReady: () => boolean;
+            destroy: () => void;
+            isUsingVerticalWriting: () => boolean | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            manipulateSpineItem: (cb: (options: {
+                container: HTMLElement;
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                overlayElement: HTMLDivElement;
+            } & ({
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | {
+                frame: undefined;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string) => void;
+            })) => boolean) => boolean;
+            executeOnLayoutBeforeMeasurementHook: (options: {
+                minimumWidth: number;
+            }) => void;
+            selectionTracker: {
+                track: (frameToTrack: HTMLIFrameElement) => void;
+                destroy: () => void;
+                isSelecting: () => boolean;
+                getSelection: () => Selection | undefined;
+                $: Observable<{
+                    event: "selectionchange";
+                    data: Selection | null;
+                } | {
+                    event: "selectstart";
+                    data: Selection | null;
+                } | {
+                    event: "selectend";
+                    data: Selection | null;
+                }>;
+            };
+            fingerTracker: {
+                track: (frame: HTMLIFrameElement) => void;
+                getFingerPositionInIframe(): {
+                    x: number | undefined;
+                    y: number | undefined;
+                } | undefined;
+                destroy: () => void;
+                $: Observable<{
+                    event: "fingermove";
+                    data: {
+                        x: number;
+                        y: number;
+                    };
+                } | {
+                    event: "fingerout";
+                    data: undefined;
+                }>;
+            };
+            getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                columnHeight: number;
+                columnWidth: number;
+                width: number;
+            };
+            getDimensionsForPaginatedContent: () => {
+                columnHeight: number;
+                columnWidth: number;
+            };
+            $: {
+                contentLayout$: Observable<{
+                    isFirstLayout: boolean;
+                    isReady: boolean;
+                }>;
+                loaded$: Observable<HTMLIFrameElement>;
+                isReady$: Observable<boolean>;
+            };
+        }) => number;
+    };
+}, "pagination"> & {
+    pagination: Omit<{
+        destroy: () => void;
+        updateBeginAndEnd: ((begin: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }, end: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }) => void) | ((begin: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }, end: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }) => void);
+        getPaginationInfo: () => PaginationInfo;
+        paginationInfo$: Observable<PaginationInfo>;
+    }, "paginationInfo$"> & {
+        paginationInfo$: Observable<PaginationInfo & {
+            beginChapterInfo: {
+                title: string;
+                subChapter?: {
+                    title: string;
+                    subChapter?: {
+                        title: string;
+                        subChapter?: {
+                            title: string;
+                            path: string;
+                        } | undefined;
+                        path: string;
+                    } | undefined;
+                    path: string;
+                } | undefined;
+                path: string;
+            } | undefined;
+            beginSpineItemReadingDirection: "ltr" | "rtl" | undefined;
+            beginAbsolutePageIndex: number | undefined;
+            endChapterInfo: {
+                title: string;
+                subChapter?: {
+                    title: string;
+                    subChapter?: {
+                        title: string;
+                        subChapter?: {
+                            title: string;
+                            path: string;
+                        } | undefined;
+                        path: string;
+                    } | undefined;
+                    path: string;
+                } | undefined;
+                path: string;
+            } | undefined;
+            endSpineItemReadingDirection: "ltr" | "rtl" | undefined;
+            endAbsolutePageIndex: number | undefined;
+            percentageEstimateOfBook: number | undefined;
+            numberOfTotalPages: number | undefined;
+            isUsingSpread: boolean;
+        }>;
+    };
+} & {
+    theme: {
+        set: (theme: Theme) => void;
+        get: () => Theme;
+        $: {
+            theme$: Observable<Theme>;
+        };
+    };
+} & {
+    navigation: {
+        goToNextSpineItem: () => void;
+        goToPreviousSpineItem: () => void;
+        goToLeftSpineItem: () => void;
+        goToRightSpineItem: () => void;
+    } & {
+        state$: Observable<{
+            canGoTopSpineItem: boolean;
+            canGoBottomSpineItem: boolean;
+            canGoLeftSpineItem: boolean;
+            canGoRightSpineItem: boolean;
+        }>;
+    };
+} & Api, "settings"> & {
+    settings: Omit<{
+        settings$: Observable<InputSettings & {
+            computedPageTurnMode: "controlled" | "scrollable";
+            computedPageTurnDirection: "vertical" | "horizontal";
+            computedPageTurnAnimation: "none" | "fade" | "slide";
+            computedPageTurnAnimationDuration: number;
+            computedSnapAnimationDuration: number;
+        }>;
+        setSettings: (data: Partial<InputSettings>) => void;
+        getSettings: () => OutputSettings;
+    }, "settings$" | "setSettings"> & {
+        settings$: Observable<InputSettings & {
+            computedPageTurnMode: "controlled" | "scrollable";
+            computedPageTurnDirection: "vertical" | "horizontal";
+            computedPageTurnAnimation: "none" | "fade" | "slide";
+            computedPageTurnAnimationDuration: number;
+            computedSnapAnimationDuration: number;
+        } & Required<SettingsInput>>;
+        setSettings: (settings: Partial<InputSettings> & SettingsInput) => void;
+    };
+} & {
+    utils: {
+        isOrIsWithinValidLink: (target: EventTarget | null) => boolean;
+    };
+} & {
+    $: {
+        links$: Observable<{
+            event: "linkClicked";
+            data: HTMLAnchorElement;
+            isNavigable: boolean;
+        }>;
+    };
+}, "settings"> & {
+    settings: Omit<Omit<{
+        settings$: Observable<InputSettings & {
+            computedPageTurnMode: "controlled" | "scrollable";
+            computedPageTurnDirection: "vertical" | "horizontal";
+            computedPageTurnAnimation: "none" | "fade" | "slide";
+            computedPageTurnAnimationDuration: number;
+            computedSnapAnimationDuration: number;
+        }>;
+        setSettings: (data: Partial<InputSettings>) => void;
+        getSettings: () => OutputSettings;
+    }, "settings$" | "setSettings"> & {
+        settings$: Observable<InputSettings & {
+            computedPageTurnMode: "controlled" | "scrollable";
+            computedPageTurnDirection: "vertical" | "horizontal";
+            computedPageTurnAnimation: "none" | "fade" | "slide";
+            computedPageTurnAnimationDuration: number;
+            computedSnapAnimationDuration: number;
+        } & Required<SettingsInput>>;
+        setSettings: (settings: Partial<InputSettings> & SettingsInput) => void;
+    }, "settings$" | "setSettings"> & {
+        settings$: Observable<InputSettings & {
+            computedPageTurnMode: "controlled" | "scrollable";
+            computedPageTurnDirection: "vertical" | "horizontal";
+            computedPageTurnAnimation: "none" | "fade" | "slide";
+            computedPageTurnAnimationDuration: number;
+            computedSnapAnimationDuration: number;
+        } & Required<SettingsInput> & Required<{
+            fontScale?: number | undefined;
+            lineHeight?: number | "publisher" | undefined;
+            fontWeight?: 300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "publisher" | undefined;
+            fontJustification?: "center" | "left" | "right" | "justify" | "publisher" | undefined;
+        }>>;
+        setSettings: (settings: Partial<InputSettings> & SettingsInput & {
+            fontScale?: number | undefined;
+            lineHeight?: number | "publisher" | undefined;
+            fontWeight?: 300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "publisher" | undefined;
+            fontJustification?: "center" | "left" | "right" | "justify" | "publisher" | undefined;
+        }) => void;
+    };
+} & {
+    loading: {
+        $: {
+            items$: Observable<{
+                [key: string]: HTMLElement;
+            }>;
+        };
+    };
+}, "pagination"> & {
+    pagination: Pick<Omit<{
+        destroy: () => void;
+        updateBeginAndEnd: ((begin: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }, end: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }) => void) | ((begin: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }, end: {
+            spineItem: {
+                layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+                    blankPagePosition: "after" | "before" | "none";
+                    minimumWidth: number;
+                    spreadPosition: "none" | "left" | "right";
+                }) => {
+                    width: number;
+                    height: number;
+                };
+                item: {
+                    id: string;
+                    href: string;
+                    renditionLayout: "reflowable" | "pre-paginated";
+                    progressionWeight: number;
+                    pageSpreadLeft: true | undefined;
+                    pageSpreadRight: true | undefined;
+                    mediaType?: string | undefined;
+                };
+                load: () => void;
+                adjustPositionOfElement: ({ right, left, top }: {
+                    right?: number | undefined;
+                    left?: number | undefined;
+                    top?: number | undefined;
+                }) => void;
+                getElementDimensions: () => {
+                    width: number;
+                    height: number;
+                };
+                getHtmlFromResource: (response: Response) => Promise<string>;
+                getResource: () => Promise<Response>;
+                translateFramePositionIntoPage: (position: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
+                    clientX: number;
+                    clientY: number;
+                };
+                setLayoutDirty: () => void;
+                injectStyle: (cssText: string) => void;
+                loadContent: () => void;
+                unloadContent: () => void;
+                spineItemFrame: {
+                    getIsLoaded: () => boolean;
+                    getIsReady: () => boolean;
+                    getViewportDimensions: () => {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                    getFrameElement: () => HTMLIFrameElement | undefined;
+                    getHtmlFromResource: (response: Response) => Promise<string>;
+                    load: () => void;
+                    unload: () => void;
+                    staticLayout: (size: {
+                        width: number;
+                        height: number;
+                    }) => void;
+                    getManipulableFrame: () => {
+                        frame: HTMLIFrameElement;
+                        removeStyle: (id: string) => void;
+                        addStyle: (id: string, style: string, prepend?: boolean) => void;
+                    } | undefined;
+                    getReadingDirection: () => "ltr" | "rtl" | undefined;
+                    isUsingVerticalWriting: () => boolean;
+                    getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+                    destroy: () => void;
+                    $: {
+                        unload$: Observable<void>;
+                        unloaded$: Observable<void>;
+                        loaded$: Observable<HTMLIFrameElement>;
+                        ready$: Observable<FontFaceSet | undefined>;
+                        isReady$: Observable<boolean>;
+                        contentLayoutChange$: Observable<{
+                            isFirstLayout: boolean;
+                        } | {
+                            isFirstLayout: boolean;
+                        }>;
+                    };
+                };
+                element: HTMLElement;
+                getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+                getViewPortInformation: () => {
+                    computedScale: number;
+                    computedWidthScale: number;
+                    viewportDimensions: {
+                        width: number;
+                        height: number;
+                    };
+                } | undefined;
+                isImageType: () => boolean;
+                isReady: () => boolean;
+                destroy: () => void;
+                isUsingVerticalWriting: () => boolean | undefined;
+                getReadingDirection: () => "ltr" | "rtl" | undefined;
+                manipulateSpineItem: (cb: (options: {
+                    container: HTMLElement;
+                    item: {
+                        id: string;
+                        href: string;
+                        renditionLayout: "reflowable" | "pre-paginated";
+                        progressionWeight: number;
+                        pageSpreadLeft: true | undefined;
+                        pageSpreadRight: true | undefined;
+                        mediaType?: string | undefined;
+                    };
+                    overlayElement: HTMLDivElement;
+                } & ({
+                    frame: HTMLIFrameElement;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string, prepend?: boolean) => void;
+                } | {
+                    frame: undefined;
+                    removeStyle: (id: string) => void;
+                    addStyle: (id: string, style: string) => void;
+                })) => boolean) => boolean;
+                executeOnLayoutBeforeMeasurementHook: (options: {
+                    minimumWidth: number;
+                }) => void;
+                selectionTracker: {
+                    track: (frameToTrack: HTMLIFrameElement) => void;
+                    destroy: () => void;
+                    isSelecting: () => boolean;
+                    getSelection: () => Selection | undefined;
+                    $: Observable<{
+                        event: "selectionchange";
+                        data: Selection | null;
+                    } | {
+                        event: "selectstart";
+                        data: Selection | null;
+                    } | {
+                        event: "selectend";
+                        data: Selection | null;
+                    }>;
+                };
+                fingerTracker: {
+                    track: (frame: HTMLIFrameElement) => void;
+                    getFingerPositionInIframe(): {
+                        x: number | undefined;
+                        y: number | undefined;
+                    } | undefined;
+                    destroy: () => void;
+                    $: Observable<{
+                        event: "fingermove";
+                        data: {
+                            x: number;
+                            y: number;
+                        };
+                    } | {
+                        event: "fingerout";
+                        data: undefined;
+                    }>;
+                };
+                getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+                    columnHeight: number;
+                    columnWidth: number;
+                    width: number;
+                };
+                getDimensionsForPaginatedContent: () => {
+                    columnHeight: number;
+                    columnWidth: number;
+                };
+                $: {
+                    contentLayout$: Observable<{
+                        isFirstLayout: boolean;
+                        isReady: boolean;
+                    }>;
+                    loaded$: Observable<HTMLIFrameElement>;
+                    isReady$: Observable<boolean>;
+                };
+            };
+            pageIndex: number;
+            cfi: string | undefined;
+            options: {
+                isAtEndOfChapter?: boolean | undefined;
+            };
+        } & {
+            spineItemIndex: number;
+        }) => void);
+        getPaginationInfo: () => PaginationInfo;
+        paginationInfo$: Observable<PaginationInfo>;
+    }, "paginationInfo$"> & {
+        paginationInfo$: Observable<PaginationInfo & {
+            beginChapterInfo: {
+                title: string;
+                subChapter?: {
+                    title: string;
+                    subChapter?: {
+                        title: string;
+                        subChapter?: {
+                            title: string;
+                            path: string;
+                        } | undefined;
+                        path: string;
+                    } | undefined;
+                    path: string;
+                } | undefined;
+                path: string;
+            } | undefined;
+            beginSpineItemReadingDirection: "ltr" | "rtl" | undefined;
+            beginAbsolutePageIndex: number | undefined;
+            endChapterInfo: {
+                title: string;
+                subChapter?: {
+                    title: string;
+                    subChapter?: {
+                        title: string;
+                        subChapter?: {
+                            title: string;
+                            path: string;
+                        } | undefined;
+                        path: string;
+                    } | undefined;
+                    path: string;
+                } | undefined;
+                path: string;
+            } | undefined;
+            endSpineItemReadingDirection: "ltr" | "rtl" | undefined;
+            endAbsolutePageIndex: number | undefined;
+            percentageEstimateOfBook: number | undefined;
+            numberOfTotalPages: number | undefined;
+            isUsingSpread: boolean;
+        }>;
+    }, "paginationInfo$" | "getPaginationInfo">;
+};
+
+declare const createSelection: (selection: Selection, item: Manifest[`spineItems`][number]) => {
+    toString: () => string;
+    getAnchorCfi: () => string | undefined;
+    getFocusCfi: () => string | undefined;
+};
+
+declare const createSettings: (initialSettings: Partial<InputSettings>) => {
+    getSettings: () => OutputSettings;
+    setSettings: (newSettings: Partial<InputSettings>, options: {
+        hasVerticalWriting?: boolean;
+        manifest?: Manifest | undefined;
+    }) => void;
+    recompute: (options: {
+        hasVerticalWriting?: boolean;
+        manifest?: Manifest | undefined;
+    }) => void;
+    destroy: () => void;
+    $: {
+        settings$: Observable<InputSettings & {
+            computedPageTurnMode: "controlled" | "scrollable";
+            computedPageTurnDirection: "vertical" | "horizontal";
+            computedPageTurnAnimation: "none" | "fade" | "slide";
+            computedPageTurnAnimationDuration: number;
+            computedSnapAnimationDuration: number;
+        }>;
+    };
+};
+
+declare const createSpineItem: ({ item, context, containerElement, iframeEventBridgeElement$, hooks$, viewportState$, settings }: {
+    item: Manifest[`spineItems`][number];
+    containerElement: HTMLElement;
+    iframeEventBridgeElement$: BehaviorSubject<HTMLElement | undefined>;
+    context: Context_2;
+    hooks$: BehaviorSubject<Hook[]>;
+    viewportState$: Observable<`free` | `busy`>;
+    settings: Settings;
+}) => {
+    layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+        blankPagePosition: "after" | "before" | "none";
+        minimumWidth: number;
+        spreadPosition: "none" | "left" | "right";
+    }) => {
+        width: number;
+        height: number;
+    };
+    item: {
+        id: string;
+        href: string;
+        renditionLayout: "reflowable" | "pre-paginated";
+        progressionWeight: number;
+        pageSpreadLeft: true | undefined;
+        pageSpreadRight: true | undefined;
+        mediaType?: string | undefined;
+    };
+    load: () => void;
+    adjustPositionOfElement: ({ right, left, top }: {
+        right?: number | undefined;
+        left?: number | undefined;
+        top?: number | undefined;
+    }) => void;
+    getElementDimensions: () => {
+        width: number;
+        height: number;
+    };
+    getHtmlFromResource: (response: Response) => Promise<string>;
+    getResource: () => Promise<Response>;
+    translateFramePositionIntoPage: (position: {
+        clientX: number;
+        clientY: number;
+    }) => {
+        clientX: number;
+        clientY: number;
+    };
+    setLayoutDirty: () => void;
+    injectStyle: (cssText: string) => void;
+    loadContent: () => void;
+    unloadContent: () => void;
+    spineItemFrame: {
+        getIsLoaded: () => boolean;
+        getIsReady: () => boolean;
+        getViewportDimensions: () => {
+            width: number;
+            height: number;
+        } | undefined;
+        getFrameElement: () => HTMLIFrameElement | undefined;
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        load: () => void;
+        unload: () => void;
+        staticLayout: (size: {
+            width: number;
+            height: number;
+        }) => void;
+        getManipulableFrame: () => {
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        isUsingVerticalWriting: () => boolean;
+        getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+        destroy: () => void;
+        $: {
+            unload$: Observable<void>;
+            unloaded$: Observable<void>;
+            loaded$: Observable<HTMLIFrameElement>;
+            ready$: Observable<FontFaceSet | undefined>;
+            isReady$: Observable<boolean>;
+            contentLayoutChange$: Observable<{
+                isFirstLayout: boolean;
+            } | {
+                isFirstLayout: boolean;
+            }>;
+        };
+    };
+    element: HTMLElement;
+    getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+    getViewPortInformation: () => {
+        computedScale: number;
+        computedWidthScale: number;
+        viewportDimensions: {
+            width: number;
+            height: number;
+        };
+    } | undefined;
+    isImageType: () => boolean;
+    isReady: () => boolean;
+    destroy: () => void;
+    isUsingVerticalWriting: () => boolean | undefined;
+    getReadingDirection: () => "ltr" | "rtl" | undefined;
+    manipulateSpineItem: (cb: (options: {
+        container: HTMLElement;
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        overlayElement: HTMLDivElement;
+    } & ({
+        frame: HTMLIFrameElement;
+        removeStyle: (id: string) => void;
+        addStyle: (id: string, style: string, prepend?: boolean) => void;
+    } | {
+        frame: undefined;
+        removeStyle: (id: string) => void;
+        addStyle: (id: string, style: string) => void;
+    })) => boolean) => boolean;
+    executeOnLayoutBeforeMeasurementHook: (options: {
+        minimumWidth: number;
+    }) => void;
+    selectionTracker: {
+        track: (frameToTrack: HTMLIFrameElement) => void;
+        destroy: () => void;
+        isSelecting: () => boolean;
+        getSelection: () => Selection | undefined;
+        $: Observable<{
+            event: "selectionchange";
+            data: Selection | null;
+        } | {
+            event: "selectstart";
+            data: Selection | null;
+        } | {
+            event: "selectend";
+            data: Selection | null;
+        }>;
+    };
+    fingerTracker: {
+        track: (frame: HTMLIFrameElement) => void;
+        getFingerPositionInIframe(): {
+            x: number | undefined;
+            y: number | undefined;
+        } | undefined;
+        destroy: () => void;
+        $: Observable<{
+            event: "fingermove";
+            data: {
+                x: number;
+                y: number;
+            };
+        } | {
+            event: "fingerout";
+            data: undefined;
+        }>;
+    };
+    getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+        columnHeight: number;
+        columnWidth: number;
+        width: number;
+    };
+    getDimensionsForPaginatedContent: () => {
+        columnHeight: number;
+        columnWidth: number;
+    };
+    $: {
+        contentLayout$: Observable<{
+            isFirstLayout: boolean;
+            isReady: boolean;
+        }>;
+        loaded$: Observable<HTMLIFrameElement>;
+        isReady$: Observable<boolean>;
+    };
+};
+
+declare const createSpineItemManager: ({ context, settings }: {
+    context: Context_2;
+    settings: Settings;
+}) => {
+    destroyItems: () => void;
+    add: (spineItem: SpineItem) => void;
+    get: (indexOrId: number | string) => {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    } | undefined;
+    getAll: () => {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    }[];
+    getLength: () => number;
+    layout: () => void;
+    focus: (indexOrSpineItem: number | SpineItem) => void;
+    loadContents: ((rangeOfIndex: [number, number]) => void) | ((rangeOfIndex: [number, number]) => void);
+    comparePositionOf: (toCompare: SpineItem, withItem: SpineItem) => "after" | "before";
+    getAbsolutePositionOf: (spineItemOrIndex: SpineItem | number) => {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    getFocusedSpineItem: () => {
+        layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
+            blankPagePosition: "after" | "before" | "none";
+            minimumWidth: number;
+            spreadPosition: "none" | "left" | "right";
+        }) => {
+            width: number;
+            height: number;
+        };
+        item: {
+            id: string;
+            href: string;
+            renditionLayout: "reflowable" | "pre-paginated";
+            progressionWeight: number;
+            pageSpreadLeft: true | undefined;
+            pageSpreadRight: true | undefined;
+            mediaType?: string | undefined;
+        };
+        load: () => void;
+        adjustPositionOfElement: ({ right, left, top }: {
+            right?: number | undefined;
+            left?: number | undefined;
+            top?: number | undefined;
+        }) => void;
+        getElementDimensions: () => {
+            width: number;
+            height: number;
+        };
+        getHtmlFromResource: (response: Response) => Promise<string>;
+        getResource: () => Promise<Response>;
+        translateFramePositionIntoPage: (position: {
+            clientX: number;
+            clientY: number;
+        }) => {
+            clientX: number;
+            clientY: number;
+        };
+        setLayoutDirty: () => void;
+        injectStyle: (cssText: string) => void;
+        loadContent: () => void;
+        unloadContent: () => void;
+        spineItemFrame: {
+            getIsLoaded: () => boolean;
+            getIsReady: () => boolean;
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            getFrameElement: () => HTMLIFrameElement | undefined;
+            getHtmlFromResource: (response: Response) => Promise<string>;
+            load: () => void;
+            unload: () => void;
+            staticLayout: (size: {
+                width: number;
+                height: number;
+            }) => void;
+            getManipulableFrame: () => {
+                frame: HTMLIFrameElement;
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: string, prepend?: boolean) => void;
+            } | undefined;
+            getReadingDirection: () => "ltr" | "rtl" | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getWritingMode: () => "vertical-rl" | "horizontal-tb" | undefined;
+            destroy: () => void;
+            $: {
+                unload$: Observable<void>;
+                unloaded$: Observable<void>;
+                loaded$: Observable<HTMLIFrameElement>;
+                ready$: Observable<FontFaceSet | undefined>;
+                isReady$: Observable<boolean>;
+                contentLayoutChange$: Observable<{
+                    isFirstLayout: boolean;
+                } | {
+                    isFirstLayout: boolean;
+                }>;
+            };
+        };
+        element: HTMLElement;
+        getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
+        getViewPortInformation: () => {
+            computedScale: number;
+            computedWidthScale: number;
+            viewportDimensions: {
+                width: number;
+                height: number;
+            };
+        } | undefined;
+        isImageType: () => boolean;
+        isReady: () => boolean;
+        destroy: () => void;
+        isUsingVerticalWriting: () => boolean | undefined;
+        getReadingDirection: () => "ltr" | "rtl" | undefined;
+        manipulateSpineItem: (cb: (options: {
+            container: HTMLElement;
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            overlayElement: HTMLDivElement;
+        } & ({
+            frame: HTMLIFrameElement;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string, prepend?: boolean) => void;
+        } | {
+            frame: undefined;
+            removeStyle: (id: string) => void;
+            addStyle: (id: string, style: string) => void;
+        })) => boolean) => boolean;
+        executeOnLayoutBeforeMeasurementHook: (options: {
+            minimumWidth: number;
+        }) => void;
+        selectionTracker: {
+            track: (frameToTrack: HTMLIFrameElement) => void;
+            destroy: () => void;
+            isSelecting: () => boolean;
+            getSelection: () => Selection | undefined;
+            $: Observable<{
+                event: "selectionchange";
+                data: Selection | null;
+            } | {
+                event: "selectstart";
+                data: Selection | null;
+            } | {
+                event: "selectend";
+                data: Selection | null;
+            }>;
+        };
+        fingerTracker: {
+            track: (frame: HTMLIFrameElement) => void;
+            getFingerPositionInIframe(): {
+                x: number | undefined;
+                y: number | undefined;
+            } | undefined;
+            destroy: () => void;
+            $: Observable<{
+                event: "fingermove";
+                data: {
+                    x: number;
+                    y: number;
+                };
+            } | {
+                event: "fingerout";
+                data: undefined;
+            }>;
+        };
+        getDimensionsForReflowableContent: (isUsingVerticalWriting: boolean, minimumWidth: number) => {
+            columnHeight: number;
+            columnWidth: number;
+            width: number;
+        };
+        getDimensionsForPaginatedContent: () => {
+            columnHeight: number;
+            columnWidth: number;
+        };
+        $: {
+            contentLayout$: Observable<{
+                isFirstLayout: boolean;
+                isReady: boolean;
+            }>;
+            loaded$: Observable<HTMLIFrameElement>;
+            isReady$: Observable<boolean>;
+        };
+    } | undefined;
+    getFocusedSpineItemIndex: () => number | undefined;
+    getSpineItemIndex: (spineItem: SpineItem | undefined) => number | undefined;
+    destroy: () => void;
+    $: {
+        focus$: Observable<{
+            data: SpineItem;
+        }>;
+        layout$: Observable<boolean>;
+        itemIsReady$: Observable<{
+            item: {
+                id: string;
+                href: string;
+                renditionLayout: "reflowable" | "pre-paginated";
+                progressionWeight: number;
+                pageSpreadLeft: true | undefined;
+                pageSpreadRight: true | undefined;
+                mediaType?: string | undefined;
+            };
+            isReady: boolean;
+        }>;
+    };
+};
+
+declare const createViewportNavigator: ({ spineItemManager, context, pagination, parentElement$, cfiLocator, spineLocator, hooks$, spine, settings, }: {
+    spineItemManager: SpineItemManager;
+    pagination: Pagination;
+    context: Context_2;
+    parentElement$: BehaviorSubject<HTMLElement | undefined>;
+    cfiLocator: ReturnType<typeof createCfiLocator>;
+    spineLocator: ReturnType<typeof createLocationResolver>;
+    hooks$: BehaviorSubject<Hook[]>;
+    spine: Spine;
+    settings: Settings;
+}) => {
+    destroy: () => void;
+    layout: () => void;
+    getCurrentNavigationPosition: () => ViewportNavigationEntry;
+    getCurrentViewportPosition: (() => {
+        x: number;
+        y: number;
+    }) | (() => {
+        x: number;
+        y: number;
+    });
+    turnLeft: ({ allowSpineItemChange }?: {
+        allowSpineItemChange?: boolean | undefined;
+    }) => void;
+    turnRight: ({ allowSpineItemChange }?: {
+        allowSpineItemChange?: boolean | undefined;
+    }) => void;
+    goToPage: (pageIndex: number) => void;
+    goToSpineItem: (indexOrId: string | number, options?: {
+        animate: boolean;
+    }) => void;
+    goToUrl: (url: string | URL) => void;
+    goToCfi: (cfi: string, options?: {
+        animate: boolean;
+    }) => void;
+    goToPageOfCurrentChapter: (pageIndex: number) => void;
+    moveTo: ((delta: {
+        x: number;
+        y: number;
+    } | undefined, { final, start }?: {
+        start?: boolean | undefined;
+        final?: boolean | undefined;
+    }) => void) | ((delta: {
+        x: number;
+        y: number;
+    } | undefined, args_1?: {
+        start?: boolean | undefined;
+        final?: boolean | undefined;
+    } | undefined) => void);
+    getLastUserExpectedNavigation: () => LastUserExpectedNavigation;
+    element$: BehaviorSubject<HTMLElement>;
+    getElement: () => HTMLElement;
+    $: {
+        state$: Observable<"free" | "busy">;
+        navigation$: Observable<Navigation>;
+        navigationAdjustedAfterLayout$: Observable<{
+            previousNavigationPosition: ViewportNavigationEntry;
+            adjustedSpinePosition: ViewportNavigationEntry;
+            areDifferent: boolean;
+        }>;
+        currentNavigationPosition$: Observable<ViewportNavigationEntry>;
+    };
+};
+
+declare const defaultThemes: ({
+    name: "bright";
+    backgroundColor: string;
+    foregroundColor?: undefined;
+} | {
+    name: "sepia";
+    backgroundColor: string;
+    foregroundColor: string;
+} | {
+    name: "night";
+    backgroundColor: string;
+    foregroundColor: string;
+})[];
+
+declare type Event_2 = {
+    type: `onSelectionChange`;
+    data: ReturnType<typeof createSelection> | null;
+};
+
+export declare const groupBy: <T, K extends string | number | symbol>(list: T[], getKey: (item: T) => K) => Record<K, T[]>;
+
+declare type Hook = ItemOnLoadHook | {
+    name: `item.onBeforeContainerCreated`;
+    fn: (payload: HTMLElement) => HTMLElement;
+} | {
+    name: `item.onLayoutBeforeMeasurement`;
+    fn: (payload: {
+        frame: {
+            getManipulableFrame: () => undefined | {
+                removeStyle: (id: string) => void;
+                addStyle: (id: string, style: CSSStyleDeclaration[`cssText`]) => void;
+            };
+            getViewportDimensions: () => {
+                width: number;
+                height: number;
+            } | undefined;
+            isUsingVerticalWriting: () => boolean;
+            getIsReady: () => boolean;
+        };
+        container: HTMLElement;
+        item: Manifest[`spineItems`][number];
+        minimumWidth: number;
+        isImageType: () => boolean | undefined;
+    }) => void;
+} | {
+    name: `item.onAfterLayout`;
+    fn: (payload: {
+        item: Manifest[`spineItems`][number];
+        blankPagePosition: `before` | `after` | `none`;
+        minimumWidth: number;
+    }) => void;
+} | {
+    name: `item.onGetResource`;
+    fn: (fetchResource: (item: Manifest[`spineItems`][number]) => Promise<Response>) => (item: Manifest[`spineItems`][number]) => Promise<Response>;
+} | {
+    name: `viewportNavigator.onBeforeContainerCreated`;
+    fn: (payload: HTMLElement) => HTMLElement;
+} | {
+    name: `onViewportOffsetAdjust`;
+    fn: () => void;
+};
+
+declare type InputSettings = {
+    forceSinglePageMode: boolean;
+    pageTurnAnimation: `none` | `fade` | `slide`;
+    pageTurnAnimationDuration: undefined | number;
+    pageTurnDirection: `vertical` | `horizontal`;
+    pageTurnMode: `controlled` | `scrollable`;
+    navigationSnapThreshold: number;
+    numberOfAdjacentSpineItemToPreLoad: number;
+};
+
+export declare const isShallowEqual: <T = any, R = any>(objectA: T, objectB: R, options?: {
+    customEqual?: (<T_1>(a: T_1, b: T_1) => boolean) | undefined;
+} | undefined) => boolean;
+
+declare type ItemOnLoadHook = {
+    name: `item.onLoad`;
+    fn: (manipulableFrame: {
+        frame: HTMLIFrameElement;
+        removeStyle: (id: string) => void;
+        item: Manifest[`spineItems`][number];
+        addStyle: (id: string, style: CSSStyleDeclaration[`cssText`]) => void;
+    }) => (() => void) | Observable<unknown> | void;
+};
+
+declare type LastUserExpectedNavigation = undefined | {
+    type: `navigate-from-previous-item`;
+} | {
+    type: `navigate-from-next-item`;
+} | {
+    type: `navigate-from-cfi`;
+    data: string;
+} | {
+    type: `navigate-from-anchor`;
+    data: string;
+};
+
+declare type LoadOptions = {
+    cfi?: string | null;
+    fetchResource?: (item: Manifest[`spineItems`][number]) => Promise<Response>;
+    containerElement: HTMLElement;
+};
+
+declare type Locator = ReturnType<typeof createLocationResolver>;
+
+export { Manifest }
+
+declare type ManipulableSpineItemCallback = Parameters<SpineItem[`manipulateSpineItem`]>[0];
+
+declare type ManipulableSpineItemCallbackPayload = Parameters<ManipulableSpineItemCallback>[0];
+
+declare type Navigation = {
+    position: {
+        x: number;
+        y: number;
+        spineItem?: SpineItem | undefined;
+    };
+    triggeredBy: `scroll` | `manual` | `adjust`;
+    animation: false | `turn` | `snap`;
+    lastUserExpectedNavigation: LastUserExpectedNavigation;
+};
+
+declare type OutputSettings = InputSettings & {
+    computedPageTurnMode: InputSettings[`pageTurnMode`];
+    computedPageTurnDirection: InputSettings[`pageTurnDirection`];
+    computedPageTurnAnimation: InputSettings[`pageTurnAnimation`];
+    computedPageTurnAnimationDuration: number;
+    computedSnapAnimationDuration: number;
+};
+
+declare type Pagination = ReturnType<typeof createPagination>;
+
+declare type PaginationInfo = {
+    beginPageIndexInSpineItem: number | undefined;
+    beginNumberOfPagesInSpineItem: number;
+    beginCfi: string | undefined;
+    beginSpineItemIndex: number | undefined;
+    endPageIndexInSpineItem: number | undefined;
+    endNumberOfPagesInSpineItem: number;
+    endCfi: string | undefined;
+    endSpineItemIndex: number | undefined;
+};
+
+export declare type Reader = ReturnType<typeof createReader>;
+
+declare type ReaderInternal = {
+    context: Context;
+    registerHook: RegisterHook;
+    spine: Spine;
+    viewportNavigator: ViewportNavigator;
+    manipulateSpineItems: Spine["manipulateSpineItems"];
+    manipulateSpineItem: Spine["manipulateSpineItem"];
+    moveTo: ViewportNavigator["moveTo"];
+    turnLeft: ViewportNavigator["turnLeft"];
+    turnRight: ViewportNavigator["turnRight"];
+    goToPageOfCurrentChapter: ViewportNavigator["goToPageOfCurrentChapter"];
+    goToPage: ViewportNavigator["goToPage"];
+    goToUrl: ViewportNavigator["goToUrl"];
+    goToCfi: ViewportNavigator["goToCfi"];
+    goToSpineItem: ViewportNavigator["goToSpineItem"];
+    getFocusedSpineItemIndex: SpineItemManager["getFocusedSpineItemIndex"];
+    getSpineItem: SpineItemManager["get"];
+    getSpineItems: SpineItemManager["getAll"];
+    getAbsolutePositionOf: SpineItemManager["getAbsolutePositionOf"];
+    getSelection: Spine["getSelection"];
+    isSelecting: Spine["isSelecting"];
+    normalizeEventForViewport: Spine["normalizeEventForViewport"];
+    getCfiMetaInformation: Spine["cfiLocator"]["getCfiMetaInformation"];
+    resolveCfi: Spine["cfiLocator"]["resolveCfi"];
+    generateCfi: Spine["cfiLocator"]["generateFromRange"];
+    locator: Spine["locator"];
+    getCurrentNavigationPosition: ViewportNavigator["getCurrentNavigationPosition"];
+    getCurrentViewportPosition: ViewportNavigator["getCurrentViewportPosition"];
+    layout: () => void;
+    load: (manifest: Manifest, loadOptions: LoadOptions) => void;
+    destroy: () => void;
+    pagination: Pagination;
+    spineItems$: Spine["$"]["spineItems$"];
+    context$: Context["$"]["state$"];
+    settings: {
+        settings$: ReturnType<typeof createSettings>["$"]["settings$"];
+        setSettings: (data: Partial<InputSettings>) => void;
+        getSettings: Settings["getSettings"];
+    };
+    $: {
+        state$: Observable<{
+            supportedPageTurnAnimation: NonNullable<ContextSettings[`pageTurnAnimation`]>[];
+            supportedPageTurnMode: NonNullable<ContextSettings[`pageTurnMode`]>[];
+            supportedPageTurnDirection: NonNullable<ContextSettings[`pageTurnDirection`]>[];
+            supportedComputedPageTurnDirection: NonNullable<ContextSettings[`pageTurnDirection`]>[];
+        }>;
+        loadStatus$: Observable<"idle" | "loading" | "ready">;
+        selection$: Observable<{
+            toString: () => string;
+            getAnchorCfi: () => string | undefined;
+            getFocusCfi: () => string | undefined;
+        } | null>;
+        viewportState$: Observable<"free" | "busy">;
+        layout$: Spine["$"]["layout$"];
+        itemsBeforeDestroy$: Spine["$"]["itemsBeforeDestroy$"];
+        itemIsReady$: SpineItemManager["$"]["itemIsReady$"];
+        destroy$: Observable<void>;
+    };
+    __debug: {
+        pagination: Pagination;
+        context: Context;
+        spineItemManager: SpineItemManager;
+    };
+};
+
+export declare type ReaderSelection = ReturnType<typeof createSelection>;
+
+export declare interface RegisterHook {
+    (name: `item.onBeforeContainerCreated`, fn: Extract<Hook, {
+        name: `item.onBeforeContainerCreated`;
+    }>[`fn`]): void;
+    (name: `item.onGetResource`, fn: Extract<Hook, {
+        name: `item.onGetResource`;
+    }>[`fn`]): void;
+    (name: `item.onLayoutBeforeMeasurement`, fn: Extract<Hook, {
+        name: `item.onLayoutBeforeMeasurement`;
+    }>[`fn`]): void;
+    (name: `item.onAfterLayout`, fn: Extract<Hook, {
+        name: `item.onAfterLayout`;
+    }>[`fn`]): void;
+    (name: `onViewportOffsetAdjust`, fn: Extract<Hook, {
+        name: `onViewportOffsetAdjust`;
+    }>[`fn`]): void;
+    (name: `item.onLoad`, fn: ItemOnLoadHook["fn"]): void;
+}
+
+declare const Report_2: {
+    namespace: (namespace: string) => {
+        log: (...data: any[]) => void;
+        warn: (...data: any[]) => void;
+        error: (...data: any[]) => void;
+        time: (name: string, targetDuration?: number) => () => void;
+        logMetric: (performanceEntry: PerformanceEntry | {
+            name: string;
+            duration: number;
+        }, targetDuration?: number) => void;
+        measurePerformance: <F extends (...args: any[]) => any>(name: string, targetDuration: number | undefined, functionToMeasure: F, { disable }?: {
+            disable?: boolean | undefined;
+        }) => F | ((...args: Parameters<F>) => ReturnType<F>);
+    };
+    log: (...data: any[]) => void;
+    warn: (...data: any[]) => void;
+    error: (...data: any[]) => void;
+    time: (name: string, targetDuration?: number) => () => void;
+    logMetric: (performanceEntry: PerformanceEntry | {
+        name: string;
+        duration: number;
+    }, targetDuration?: number) => void;
+    measurePerformance: <F extends (...args: any[]) => any>(name: string, targetDuration: number | undefined, functionToMeasure: F, { disable }?: {
+        disable?: boolean | undefined;
+    }) => F | ((...args: Parameters<F>) => ReturnType<F>);
+};
+export { Report_2 as Report }
+
+declare type RequireLayout = boolean;
+
+declare type Settings = ReturnType<typeof createSettings>;
+
+declare type SettingsInput = {
+    pageHorizontalMargin?: number;
+    pageVerticalMargin?: number;
+};
+
+declare type Spine = {
+    element$: Observable<HTMLElement>;
+    getElement: () => HTMLElement | undefined;
+    locator: Locator;
+    spineItemLocator: SpineItemLocator;
+    cfiLocator: CfiLocator;
+    normalizeEventForViewport: ReturnType<typeof createEventsHelper>["normalizeEventForViewport"];
+    manipulateSpineItems: (cb: (payload: ManipulableSpineItemCallbackPayload & {
+        index: number;
+    }) => RequireLayout) => void;
+    manipulateSpineItem: (id: string, cb: Parameters<SpineItem[`manipulateSpineItem`]>[0]) => void;
+    destroy: () => void;
+    isSelecting: () => boolean | undefined;
+    getSelection: () => Selection | undefined;
+    adjustPagination: (position: ViewportNavigationEntry) => Observable<`free` | `busy`>;
+    $: {
+        $: Observable<Event_2>;
+        layout$: Observable<boolean>;
+        spineItems$: Observable<SpineItem[]>;
+        itemsBeforeDestroy$: Observable<void>;
+    };
+};
+
+declare type SpineItem = ReturnType<typeof createSpineItem>;
+
+declare type SpineItemLocator = ReturnType<typeof createLocationResolver_2>;
+
+declare type SpineItemManager = ReturnType<typeof createSpineItemManager>;
+
+declare class SpineItemNavigationPosition {
+    __symbol: string;
+    x: number;
+    y: number;
+    constructor(position: {
+        x: number;
+        y: number;
+    });
+}
+
+declare type SpineItemPosition = {
+    x: number;
+    y: number;
+    __symbol?: `SpineItemPosition`;
+};
+
+declare type SpinePosition = {
+    x: number;
+    y: number;
+    __symbol?: `SpinePosition`;
+};
+
+declare type State = Partial<Pick<LoadOptions, "containerElement" | "fetchResource">> & {
+    manifest?: Manifest;
+    hasVerticalWriting?: boolean;
+    isUsingSpreadMode?: boolean;
+    isFullyPrePaginated?: boolean;
+};
+
+declare type Theme = (typeof defaultThemes)[number][`name`] | `publisher`;
+
+declare type UnsafeSpineItemPosition = {
+    x: number;
+    y: number;
+    __symbol?: `UnsafeSpineItemPosition` | `SpineItemPosition`;
+};
+
+declare type UnsafeSpinePosition = {
+    x: number;
+    y: number;
+    __symbol?: `UnsafeSpinePosition` | `SpinePosition`;
+};
+
+declare type ViewportNavigationEntry = {
+    x: number;
+    y: number;
+    spineItem?: SpineItem;
+};
+
+declare type ViewportNavigator = ReturnType<typeof createViewportNavigator>;
+
+export { }