@prose-reader/core 1.66.0 → 1.68.0

package/dist/spineItem/commonSpineItem.d.ts

@@ -1,34 +1,33 @@
 import { Context } from '../context/Context';
-import { Manifest } from '../types';
-import { Observable } from 'rxjs';
-import { createFrameManipulator } from './frameItem/createFrameManipulator';
+import { FrameItem } from './frame/FrameItem';
+import { Manifest } from '..';
 import { ReaderSettingsManager } from '../settings/ReaderSettingsManager';
 import { HookManager } from '../hooks/HookManager';
 
-export declare const createCommonSpineItem: ({ item, context, parentElement, viewportState$, settings, hookManager, }: {
+export declare const createCommonSpineItem: ({ item, context, parentElement, settings, hookManager, index, }: {
     item: Manifest[`spineItems`][number];
     parentElement: HTMLElement;
     context: Context;
-    viewportState$: Observable<`free` | `busy`>;
     settings: ReaderSettingsManager;
     hookManager: HookManager;
+    index: number;
 }) => {
     item: {
         id: string;
         href: string;
-        renditionLayout: `reflowable` | `pre-paginated`;
-        progressionWeight: number;
-        pageSpreadLeft: true | undefined;
-        pageSpreadRight: true | undefined;
+        renditionLayout?: `reflowable` | `pre-paginated`;
+        progressionWeight?: number;
+        pageSpreadLeft?: true | undefined;
+        pageSpreadRight?: true | undefined;
         mediaType?: string;
     };
-    load: () => void;
     layout: ({ height, width, blankPagePosition, minimumWidth, }: {
         height: number;
         width: number;
         blankPagePosition: `before` | `after` | `none`;
         minimumWidth: number;
     }) => void;
+    overlayElement: HTMLDivElement;
     adjustPositionOfElement: ({ right, left, top, }: {
         right?: number;
         left?: number;
@@ -37,6 +36,13 @@ export declare const createCommonSpineItem: ({ item, context, parentElement, vie
     getElementDimensions: () => {
         width: number;
         height: number;
+        x: number;
+        y: number;
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+        toJSON(): any;
     };
     getHtmlFromResource: (response: Response) => Promise<string>;
     getResource: () => Promise<Response>;
@@ -47,43 +53,10 @@ export declare const createCommonSpineItem: ({ item, context, parentElement, vie
         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: () => ReturnType<typeof createFrameManipulator> | 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;
-            }>;
-        };
-    };
+    load: () => void;
+    unload: () => void;
+    frame: FrameItem;
     element: HTMLElement;
     getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
     getViewPortInformation: () => {
@@ -97,17 +70,8 @@ export declare const createCommonSpineItem: ({ item, context, parentElement, vie
     isImageType: () => boolean;
     isReady: () => boolean;
     destroy: () => void;
+    readonly readingDirection: "ltr" | "rtl" | undefined;
     isUsingVerticalWriting: () => boolean | undefined;
-    getReadingDirection: () => "ltr" | "rtl" | undefined;
-    manipulateSpineItem: (cb: (options: {
-        container: HTMLElement;
-        item: Manifest[`spineItems`][number];
-        overlayElement: HTMLDivElement;
-    } & (ReturnType<typeof createFrameManipulator> | {
-        frame: undefined;
-        removeStyle: (id: string) => void;
-        addStyle: (id: string, style: string) => void;
-    })) => boolean) => boolean;
     executeOnLayoutBeforeMeasurementHook: (options: {
         minimumWidth: number;
     }) => void[];
@@ -116,7 +80,7 @@ export declare const createCommonSpineItem: ({ item, context, parentElement, vie
         destroy: () => void;
         isSelecting: () => boolean;
         getSelection: () => Selection | undefined;
-        $: Observable<{
+        $: import('rxjs').Observable<{
             event: `selectionchange`;
             data: Selection | null;
         } | {
@@ -134,7 +98,7 @@ export declare const createCommonSpineItem: ({ item, context, parentElement, vie
             y: number | undefined;
         } | undefined;
         destroy: () => void;
-        $: Observable<{
+        $: import('rxjs').Observable<{
             event: `fingermove`;
             data: {
                 x: number;
@@ -155,11 +119,11 @@ export declare const createCommonSpineItem: ({ item, context, parentElement, vie
         columnWidth: number;
     };
     $: {
-        contentLayout$: Observable<{
+        contentLayout$: import('rxjs').Observable<{
             isFirstLayout: boolean;
             isReady: boolean;
         }>;
-        loaded$: Observable<HTMLIFrameElement>;
-        isReady$: Observable<boolean>;
+        loaded$: import('rxjs').Observable<HTMLIFrameElement>;
+        isReady$: import('rxjs').Observable<boolean>;
     };
 };

package/dist/spineItem/createSpineItem.d.ts

@@ -1,16 +1,15 @@
-import { Observable } from 'rxjs';
 import { Context } from '../context/Context';
-import { Manifest } from '../types';
+import { Manifest } from '..';
 import { ReaderSettingsManager } from '../settings/ReaderSettingsManager';
 import { HookManager } from '../hooks/HookManager';
 
-export declare const createSpineItem: ({ item, context, containerElement, viewportState$, settings, hookManager, }: {
+export declare const createSpineItem: ({ item, context, containerElement, settings, hookManager, index, }: {
     item: Manifest[`spineItems`][number];
     containerElement: HTMLElement;
     context: Context;
-    viewportState$: Observable<`free` | `busy`>;
     settings: ReaderSettingsManager;
     hookManager: HookManager;
+    index: number;
 }) => {
     layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
         blankPagePosition: `before` | `after` | `none`;
@@ -23,13 +22,13 @@ export declare const createSpineItem: ({ item, context, containerElement, viewpo
     item: {
         id: string;
         href: string;
-        renditionLayout: `reflowable` | `pre-paginated`;
-        progressionWeight: number;
-        pageSpreadLeft: true | undefined;
-        pageSpreadRight: true | undefined;
+        renditionLayout?: `reflowable` | `pre-paginated`;
+        progressionWeight?: number;
+        pageSpreadLeft?: true | undefined;
+        pageSpreadRight?: true | undefined;
         mediaType?: string;
     };
-    load: () => void;
+    overlayElement: HTMLDivElement;
     adjustPositionOfElement: ({ right, left, top, }: {
         right?: number;
         left?: number;
@@ -38,6 +37,13 @@ export declare const createSpineItem: ({ item, context, containerElement, viewpo
     getElementDimensions: () => {
         width: number;
         height: number;
+        x: number;
+        y: number;
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+        toJSON(): any;
     };
     getHtmlFromResource: (response: Response) => Promise<string>;
     getResource: () => Promise<Response>;
@@ -48,43 +54,10 @@ export declare const createSpineItem: ({ item, context, containerElement, viewpo
         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: () => ReturnType<typeof import('./frameItem/createFrameManipulator').createFrameManipulator> | 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;
-            }>;
-        };
-    };
+    load: () => void;
+    unload: () => void;
+    frame: import('./frame/FrameItem').FrameItem;
     element: HTMLElement;
     getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
     getViewPortInformation: () => {
@@ -98,17 +71,8 @@ export declare const createSpineItem: ({ item, context, containerElement, viewpo
     isImageType: () => boolean;
     isReady: () => boolean;
     destroy: () => void;
+    readingDirection: "ltr" | "rtl" | undefined;
     isUsingVerticalWriting: () => boolean | undefined;
-    getReadingDirection: () => "ltr" | "rtl" | undefined;
-    manipulateSpineItem: (cb: (options: {
-        container: HTMLElement;
-        item: Manifest[`spineItems`][number];
-        overlayElement: HTMLDivElement;
-    } & (ReturnType<typeof import('./frameItem/createFrameManipulator').createFrameManipulator> | {
-        frame: undefined;
-        removeStyle: (id: string) => void;
-        addStyle: (id: string, style: string) => void;
-    })) => boolean) => boolean;
     executeOnLayoutBeforeMeasurementHook: (options: {
         minimumWidth: number;
     }) => void[];
@@ -117,7 +81,7 @@ export declare const createSpineItem: ({ item, context, containerElement, viewpo
         destroy: () => void;
         isSelecting: () => boolean;
         getSelection: () => Selection | undefined;
-        $: Observable<{
+        $: import('rxjs').Observable<{
             event: `selectionchange`;
             data: Selection | null;
         } | {
@@ -135,7 +99,7 @@ export declare const createSpineItem: ({ item, context, containerElement, viewpo
             y: number | undefined;
         } | undefined;
         destroy: () => void;
-        $: Observable<{
+        $: import('rxjs').Observable<{
             event: `fingermove`;
             data: {
                 x: number;
@@ -156,12 +120,12 @@ export declare const createSpineItem: ({ item, context, containerElement, viewpo
         columnWidth: number;
     };
     $: {
-        contentLayout$: Observable<{
+        contentLayout$: import('rxjs').Observable<{
             isFirstLayout: boolean;
             isReady: boolean;
         }>;
-        loaded$: Observable<HTMLIFrameElement>;
-        isReady$: Observable<boolean>;
+        loaded$: import('rxjs').Observable<HTMLIFrameElement>;
+        isReady$: import('rxjs').Observable<boolean>;
     };
 };
 export type SpineItem = ReturnType<typeof createSpineItem>;

package/dist/spineItem/frame/FrameItem.d.ts

@@ -0,0 +1,44 @@
+import { Observable } from 'rxjs';
+import { Manifest } from '../..';
+import { Context } from '../../context/Context';
+import { createLoader } from './loader/loader';
+import { ReaderSettingsManager } from '../../settings/ReaderSettingsManager';
+import { HookManager } from '../../hooks/HookManager';
+import { DestroyableClass } from '../../utils/DestroyableClass';
+
+export declare class FrameItem extends DestroyableClass {
+    protected parent: HTMLElement;
+    protected item: Manifest[`spineItems`][number];
+    protected context: Context;
+    protected settings: ReaderSettingsManager;
+    protected hookManager: HookManager;
+    protected loader: ReturnType<typeof createLoader>;
+    contentLayoutChange$: Observable<{
+        isFirstLayout: boolean;
+    }>;
+    constructor(parent: HTMLElement, item: Manifest[`spineItems`][number], context: Context, settings: ReaderSettingsManager, hookManager: HookManager);
+    getComputedStyleAfterLoad(): CSSStyleDeclaration | undefined;
+    getViewportDimensions: () => {
+        width: number;
+        height: number;
+    } | undefined;
+    getWritingMode: () => `vertical-rl` | `horizontal-tb` | undefined;
+    isUsingVerticalWriting: () => boolean;
+    getHtmlFromResource: (response: Response) => Promise<string>;
+    get element(): HTMLIFrameElement | undefined;
+    get unloaded$(): Observable<null>;
+    get loaded$(): Observable<HTMLIFrameElement>;
+    get ready$(): Observable<FontFaceSet | undefined>;
+    get isReady$(): Observable<boolean>;
+    get isLoaded(): boolean;
+    get isReady(): boolean;
+    load(): void;
+    unload(): void;
+    staticLayout: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    addStyle(id: string, style: string, prepend?: boolean): void;
+    removeStyle(id: string): void;
+    destroy: () => void;
+}

package/dist/spineItem/{frameItem → frame}/createHtmlPageFromResource.d.ts

@@ -1,3 +1,3 @@
-import { Manifest } from '../../types';
+import { Manifest } from '../..';
 
 export declare const createHtmlPageFromResource: (resourceResponse: Response | string, item: Manifest[`spineItems`][number]) => Promise<string>;

package/dist/spineItem/frame/loader/attachFrameSrc.d.ts

@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+import { ReaderSettingsManager } from '../../../settings/ReaderSettingsManager';
+import { Manifest } from '@prose-reader/shared';
+
+export declare const attachFrameSrc: ({ settings, item, }: {
+    settings: ReaderSettingsManager;
+    item: Manifest[`spineItems`][number];
+}) => (stream: Observable<HTMLIFrameElement>) => Observable<HTMLIFrameElement>;

package/dist/spineItem/frame/loader/configureFrame.d.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+import { ReaderSettingsManager } from '../../../settings/ReaderSettingsManager';
+import { Manifest } from '@prose-reader/shared';
+import { HookManager } from '../../..';
+
+export declare const configureFrame: ({ settings, item, hookManager, }: {
+    settings: ReaderSettingsManager;
+    item: Manifest[`spineItems`][number];
+    hookManager: HookManager;
+}) => (stream: Observable<HTMLIFrameElement>) => Observable<HTMLIFrameElement>;

package/dist/spineItem/frame/loader/createFrameElement.d.ts

@@ -0,0 +1 @@
+export declare const createFrameElement: (() => HTMLIFrameElement) | (() => HTMLIFrameElement);

package/dist/spineItem/frame/loader/loadFrame.d.ts

@@ -0,0 +1,12 @@
+import { HookManager, Manifest } from '../../..';
+import { ReaderSettingsManager } from '../../../settings/ReaderSettingsManager';
+import { Context } from '../../../context/Context';
+
+export declare const loadFrame: ({ settings, item, hookManager, element, onFrameElement, context, }: {
+    settings: ReaderSettingsManager;
+    item: Manifest[`spineItems`][number];
+    hookManager: HookManager;
+    element: HTMLElement;
+    onFrameElement: (element: HTMLIFrameElement) => void;
+    context: Context;
+}) => import('rxjs').Observable<HTMLIFrameElement>;

package/dist/spineItem/frame/loader/loader.d.ts

@@ -0,0 +1,23 @@
+import { Context } from '../../../context/Context';
+import { Manifest } from '../../..';
+import { ReaderSettingsManager } from '../../../settings/ReaderSettingsManager';
+import { HookManager } from '../../../hooks/HookManager';
+
+export declare const createLoader: ({ item, parent, context, settings, hookManager, }: {
+    item: Manifest[`spineItems`][number];
+    parent: HTMLElement;
+    context: Context;
+    settings: ReaderSettingsManager;
+    hookManager: HookManager;
+}) => {
+    load: () => void;
+    unload: () => void;
+    destroy: () => void;
+    readonly state: "idle" | "loading" | "loaded" | "unloading" | "ready";
+    readonly element: HTMLIFrameElement | undefined;
+    isReady$: import('rxjs').Observable<boolean>;
+    ready$: import('rxjs').Observable<FontFaceSet | undefined>;
+    loaded$: import('rxjs').Observable<HTMLIFrameElement>;
+    unloaded$: import('rxjs').Observable<null>;
+    element$: import('rxjs').Observable<HTMLIFrameElement | undefined>;
+};

package/dist/spineItem/frame/loader/unloadFrame.d.ts

@@ -0,0 +1,9 @@
+import { HookManager, Manifest } from '../../..';
+import { Context } from '../../../context/Context';
+
+export declare const unloadFrame: ({ item, hookManager, frameElement, context, }: {
+    item: Manifest[`spineItems`][number];
+    hookManager: HookManager;
+    frameElement?: HTMLIFrameElement;
+    context: Context;
+}) => import('rxjs').Observable<null>;

package/dist/spineItem/frame/loader/waitForFrameLoad.d.ts

@@ -0,0 +1,3 @@
+import { Observable } from 'rxjs';
+
+export declare const waitForFrameLoad: (stream: Observable<HTMLIFrameElement>) => Observable<HTMLIFrameElement>;

package/dist/spineItem/frame/loader/waitForFrameReady.d.ts

@@ -0,0 +1,3 @@
+import { Observable } from 'rxjs';
+
+export declare const waitForFrameReady: (stream: Observable<HTMLIFrameElement>) => Observable<FontFaceSet | undefined>;

package/dist/spineItem/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const getItemOffsetFromPageIndex: (pageWidth: number, pageIndex: number, itemWidth: number) => number;
+export declare const calculateNumberOfPagesForItem: (itemWidth: number, pageWidth: number) => number;
+export declare const getClosestValidOffsetFromApproximateOffsetInPages: (offset: number, pageWidth: number, itemWidth: number) => number;

package/dist/spineItem/locationResolver.d.ts

@@ -1,17 +1,24 @@
 import { Context } from '../context/Context';
 import { SpineItem } from './createSpineItem';
-import { SpineItemPosition, UnsafeSpineItemPosition } from './types';
+import { SafeSpineItemPosition, UnsafeSpineItemPosition } from './types';
+import { ReaderSettingsManager } from '../settings/ReaderSettingsManager';
 
-export declare const createLocationResolver: ({ context }: {
+export type SpineItemLocator = ReturnType<typeof createSpineItemLocator>;
+export declare const createSpineItemLocator: ({ context, settings, }: {
     context: Context;
+    settings: ReaderSettingsManager;
 }) => {
     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;
+    getSpineItemPositionFromPageIndex: (pageIndex: number, spineItem: SpineItem) => SafeSpineItemPosition;
+    getSpineItemPageIndexFromPosition: ({ itemWidth, itemHeight, position, isUsingVerticalWriting, }: {
+        itemWidth: number;
+        itemHeight: number;
+        position: UnsafeSpineItemPosition;
+        isUsingVerticalWriting: boolean;
+    }) => number;
     getSpineItemPageIndexFromNode: (node: Node, offset: number, spineItem: SpineItem) => number | undefined;
     getSpineItemClosestPositionFromUnsafePosition: (unsafePosition: UnsafeSpineItemPosition, spineItem: SpineItem) => {
         x: number;
@@ -21,4 +28,9 @@ export declare const createLocationResolver: ({ context }: {
         node: Node;
         offset: number;
     } | undefined;
+    getSpineItemNumberOfPages: ({ itemHeight, itemWidth, isUsingVerticalWriting, }: {
+        itemWidth: number;
+        itemHeight: number;
+        isUsingVerticalWriting: boolean;
+    }) => number;
 };

package/dist/spineItem/navigationResolver.d.ts

@@ -1,16 +1,14 @@
 import { SpineItem } from './createSpineItem';
 import { Context } from '../context/Context';
-import { SpineItemNavigationPosition, UnsafeSpineItemPosition } from './types';
+import { SafeSpineItemPosition, UnsafeSpineItemPosition } from './types';
 import { ReaderSettingsManager } from '../settings/ReaderSettingsManager';
 
-export declare const createNavigationResolver: ({ context, }: {
+export type SpineItemNavigationResolver = ReturnType<typeof createNavigationResolver>;
+export declare const createNavigationResolver: ({ context, settings, }: {
     context: Context;
     settings: ReaderSettingsManager;
 }) => {
-    getNavigationForLeftPage: (position: UnsafeSpineItemPosition, spineItem: SpineItem) => SpineItemNavigationPosition;
-    getNavigationForRightPage: (position: UnsafeSpineItemPosition, spineItem: SpineItem) => SpineItemNavigationPosition;
-    getNavigationForLastPage: (spineItem: SpineItem) => SpineItemNavigationPosition;
-    getNavigationForPage: (pageIndex: number, spineItem: SpineItem) => SpineItemNavigationPosition;
-    getNavigationForPosition: (spineItem: SpineItem, position: UnsafeSpineItemPosition) => SpineItemNavigationPosition;
-    getNavigationFromNode: (spineItem: SpineItem, node: Node, offset: number) => SpineItemNavigationPosition;
+    getNavigationForLastPage: (spineItem: SpineItem) => SafeSpineItemPosition;
+    getNavigationForPosition: (spineItem: SpineItem, position: UnsafeSpineItemPosition) => SafeSpineItemPosition;
+    getNavigationFromNode: (spineItem: SpineItem, node: Node, offset: number) => SafeSpineItemPosition;
 };

package/dist/spineItem/prePaginatedSpineItem.d.ts

@@ -1,16 +1,15 @@
-import { Observable } from 'rxjs';
 import { Context } from '../context/Context';
-import { Manifest } from '../types';
+import { Manifest } from '..';
 import { ReaderSettingsManager } from '../settings/ReaderSettingsManager';
 import { HookManager } from '../hooks/HookManager';
 
-export declare const createPrePaginatedSpineItem: ({ item, context, containerElement, viewportState$, settings, hookManager, }: {
+export declare const createPrePaginatedSpineItem: ({ item, context, containerElement, settings, hookManager, index, }: {
     item: Manifest[`spineItems`][number];
     containerElement: HTMLElement;
     context: Context;
-    viewportState$: Observable<`free` | `busy`>;
     settings: ReaderSettingsManager;
     hookManager: HookManager;
+    index: number;
 }) => {
     layout: ({ blankPagePosition, minimumWidth, spreadPosition, }: {
         blankPagePosition: `before` | `after` | `none`;
@@ -23,13 +22,13 @@ export declare const createPrePaginatedSpineItem: ({ item, context, containerEle
     item: {
         id: string;
         href: string;
-        renditionLayout: `reflowable` | `pre-paginated`;
-        progressionWeight: number;
-        pageSpreadLeft: true | undefined;
-        pageSpreadRight: true | undefined;
+        renditionLayout?: `reflowable` | `pre-paginated`;
+        progressionWeight?: number;
+        pageSpreadLeft?: true | undefined;
+        pageSpreadRight?: true | undefined;
         mediaType?: string;
     };
-    load: () => void;
+    overlayElement: HTMLDivElement;
     adjustPositionOfElement: ({ right, left, top, }: {
         right?: number;
         left?: number;
@@ -38,6 +37,13 @@ export declare const createPrePaginatedSpineItem: ({ item, context, containerEle
     getElementDimensions: () => {
         width: number;
         height: number;
+        x: number;
+        y: number;
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+        toJSON(): any;
     };
     getHtmlFromResource: (response: Response) => Promise<string>;
     getResource: () => Promise<Response>;
@@ -48,43 +54,10 @@ export declare const createPrePaginatedSpineItem: ({ item, context, containerEle
         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: () => ReturnType<typeof import('./frameItem/createFrameManipulator').createFrameManipulator> | 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;
-            }>;
-        };
-    };
+    load: () => void;
+    unload: () => void;
+    frame: import('./frame/FrameItem').FrameItem;
     element: HTMLElement;
     getBoundingRectOfElementFromSelector: (selector: string) => DOMRect | undefined;
     getViewPortInformation: () => {
@@ -98,17 +71,8 @@ export declare const createPrePaginatedSpineItem: ({ item, context, containerEle
     isImageType: () => boolean;
     isReady: () => boolean;
     destroy: () => void;
+    readingDirection: "ltr" | "rtl" | undefined;
     isUsingVerticalWriting: () => boolean | undefined;
-    getReadingDirection: () => "ltr" | "rtl" | undefined;
-    manipulateSpineItem: (cb: (options: {
-        container: HTMLElement;
-        item: Manifest[`spineItems`][number];
-        overlayElement: HTMLDivElement;
-    } & (ReturnType<typeof import('./frameItem/createFrameManipulator').createFrameManipulator> | {
-        frame: undefined;
-        removeStyle: (id: string) => void;
-        addStyle: (id: string, style: string) => void;
-    })) => boolean) => boolean;
     executeOnLayoutBeforeMeasurementHook: (options: {
         minimumWidth: number;
     }) => void[];
@@ -117,7 +81,7 @@ export declare const createPrePaginatedSpineItem: ({ item, context, containerEle
         destroy: () => void;
         isSelecting: () => boolean;
         getSelection: () => Selection | undefined;
-        $: Observable<{
+        $: import('rxjs').Observable<{
             event: `selectionchange`;
             data: Selection | null;
         } | {
@@ -135,7 +99,7 @@ export declare const createPrePaginatedSpineItem: ({ item, context, containerEle
             y: number | undefined;
         } | undefined;
         destroy: () => void;
-        $: Observable<{
+        $: import('rxjs').Observable<{
             event: `fingermove`;
             data: {
                 x: number;
@@ -156,11 +120,11 @@ export declare const createPrePaginatedSpineItem: ({ item, context, containerEle
         columnWidth: number;
     };
     $: {
-        contentLayout$: Observable<{
+        contentLayout$: import('rxjs').Observable<{
             isFirstLayout: boolean;
             isReady: boolean;
         }>;
-        loaded$: Observable<HTMLIFrameElement>;
-        isReady$: Observable<boolean>;
+        loaded$: import('rxjs').Observable<HTMLIFrameElement>;
+        isReady$: import('rxjs').Observable<boolean>;
     };
 };