@agilehub/vue-pdf-flipbook 0.1.0

package/dist/bookLayout.d.ts

@@ -0,0 +1,16 @@
+import type { ReaderMode } from './types';
+/**
+ * 按容器与 PDF 比例适配书页，双页宽度对齐整数像素。
+ * 调用逻辑：useBookLayout 在初始化、容器变化及模式切换时调用。
+ * @param width 可用容器宽度，CSS 像素。
+ * @param height 可用容器高度，CSS 像素。
+ * @param pageWidth PDF 原始页宽。
+ * @param pageHeight PDF 原始页高。
+ * @param mode 用户选择的模式；宽度不足 520px 时双页退为单页。
+ * @returns 包含书页容器 width、height 和实际 orientation 的对象。
+ */
+export declare function fitBook(width: number, height: number, pageWidth: number, pageHeight: number, mode: ReaderMode): {
+    width: number;
+    height: number;
+    orientation: ReaderMode;
+};

package/dist/components/PdfCanvasPage.vue.d.ts

@@ -0,0 +1,27 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+type __VLS_Props = {
+    pdf: PDFDocumentProxy;
+    pageNumber: number;
+    renderScale?: number;
+    ariaLabel?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    rendered: (payload: {
+        page: number;
+        width: number;
+        height: number;
+    }) => any;
+    error: (error: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRendered?: ((payload: {
+        page: number;
+        width: number;
+        height: number;
+    }) => any) | undefined;
+    onError?: ((error: unknown) => any) | undefined;
+}>, {
+    renderScale: number;
+    ariaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PdfThumbnails.vue.d.ts

@@ -0,0 +1,28 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PdfThumbnailSlotProps } from '../types';
+type __VLS_Props = {
+    pdf: PDFDocumentProxy;
+    pages: number;
+    visiblePages: number[];
+    readyPages: ReadonlySet<number>;
+    compact?: boolean;
+    pageAspectRatio?: number;
+};
+type __VLS_Slots = {
+    thumbnail?: (props: PdfThumbnailSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: unknown) => any;
+    select: (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((error: unknown) => any) | undefined;
+    onSelect?: ((page: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/types.d.ts

@@ -0,0 +1,28 @@
+import type { PdfFlipbookProps, PdfFlipbookState, ReaderMode } from '../types';
+export interface PageSize {
+    width: number;
+    height: number;
+}
+export type ResolvedFlipbookProps = Readonly<PdfFlipbookProps & Required<Pick<PdfFlipbookProps, 'initialPage' | 'initialMode' | 'height' | 'background' | 'workerSrc'>>>;
+export type FlipbookEvents = {
+    loaded: [payload: {
+        pages: number;
+    }];
+    error: [error: unknown];
+    'page-change': [page: number];
+    'mode-change': [mode: ReaderMode];
+    'state-change': [state: PdfFlipbookState];
+    progress: [progress: number];
+};
+export type FlipbookEmit = <K extends keyof FlipbookEvents>(event: K, ...args: FlipbookEvents[K]) => void;
+export interface FlipEnginePort {
+    /** 导航层调用；无参数，返回引擎是否已创建，未就绪时不启动翻页。 */
+    isReady: () => boolean;
+    /**
+     * 导航完成页面准备后调用适配层启动动画。
+     * @param pageIndex 零基目标页索引，调用前由导航层转换一基页码。
+     * @param corner 起翻页角，top 为上角，bottom 为下角。
+     * @returns void；动画状态通过引擎事件另行同步。
+     */
+    flip: (pageIndex: number, corner: 'top' | 'bottom') => void;
+}

package/dist/composables/useBookLayout.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'vue';
+import type { ReaderMode } from '../types';
+import type { PageSize } from './types';
+interface LayoutOptions {
+    viewport: Ref<HTMLElement | undefined>;
+    bookStage: Ref<HTMLElement | undefined>;
+    pageSize: Readonly<Ref<PageSize>>;
+    mode: Readonly<Ref<ReaderMode>>;
+    onUpdate: () => void;
+}
+/**
+ * 观察容器尺寸并计算保持比例的书页布局。
+ * 调用逻辑：由协调层创建；挂载后监听窗口和容器尺寸变化，销毁时移除监听。
+ * @param options 容器 ref、PDF 尺寸、阅读模式和引擎更新回调。
+ * @returns 书页样式、实际方向以及 fit/reset 方法。
+ */
+export declare function useBookLayout(options: LayoutOptions): {
+    bookShellStyle: import("vue").ComputedRef<{
+        width: string;
+        height: string;
+    }>;
+    orientation: Ref<ReaderMode, ReaderMode>;
+    fit: () => void;
+    /** 文档重置时调用；无参数，返回 void，将旧书页尺寸清零。 */
+    reset: () => void;
+};
+export {};

package/dist/composables/usePageFlip.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'vue';
+import type { ReaderMode } from '../types';
+import type { PageSize } from './types';
+interface EngineEvents {
+    onFlip: (pageIndex: number) => void;
+    onStateChange: (state: string) => void;
+    onOrientationChange: (mode: ReaderMode) => void;
+    canStartUserTurn: (forward: boolean, prepare?: boolean) => boolean;
+    getLayoutMode: () => ReaderMode;
+}
+/**
+ * 封装 PageFlip 实例、输入拦截和临时 Canvas 克隆。
+ * 调用逻辑：由协调层创建，在文档就绪时 initialize，尺寸变化时 update。
+ * @param flipbookElement 书页根元素 ref，由组件模板绑定。
+ * @param events 导航通知、手势准入和实际布局模式回调。
+ * @returns 初始化、销毁、尺寸更新、就绪检测和翻页接口。
+ */
+export declare function usePageFlip(flipbookElement: Ref<HTMLElement | undefined>, events: EngineEvents): {
+    initialize: (pageSize: PageSize, pageCount: number, currentPage: number) => void;
+    destroy: () => void;
+    /** 导航层翻页前调用；无参数，返回引擎实例是否存在。 */
+    isReady: () => boolean;
+    update: () => void;
+    /** 导航准备完成后调用；pageIndex 为零基目标索引，corner 为起翻页角；返回 void。 */
+    flip: (pageIndex: number, corner: "top" | "bottom") => void | undefined;
+};
+export {};

package/dist/composables/usePageNavigation.d.ts

@@ -0,0 +1,48 @@
+import type { Ref } from 'vue';
+import type { ReaderMode } from '../types';
+import type { FlipEnginePort } from './types';
+interface NavigationOptions {
+    pageCount: Readonly<Ref<number>>;
+    loading: Readonly<Ref<boolean>>;
+    initialMode: ReaderMode;
+    debounceMs?: number;
+    engine: FlipEnginePort;
+    onError: (error: unknown) => void;
+    onPageChange: (page: number) => void;
+    onModeChange: (mode: ReaderMode) => void;
+}
+/**
+ * 管理页码、预览窗口、防抖和翻页状态。
+ * 调用逻辑：usePdfFlipbook 在组件 setup 阶段创建；所有导航入口在此汇合。
+ * @param options 文档响应式状态、引擎接口、事件回调及可选防抖时间（当前默认 150ms）。
+ * @returns 只读状态、页面挂载集合和导航方法。
+ */
+export declare function usePageNavigation(options: NavigationOptions): {
+    currentPage: Readonly<Ref<number, number>>;
+    mode: Readonly<Ref<ReaderMode, ReaderMode>>;
+    orientation: Readonly<Ref<ReaderMode, ReaderMode>>;
+    pendingPage: Readonly<Ref<number | undefined, number | undefined>>;
+    pageLoading: Readonly<Ref<boolean, boolean>>;
+    visiblePages: import("vue").ComputedRef<number[]>;
+    activePages: import("vue").ComputedRef<Set<number>>;
+    renderPages: import("vue").ComputedRef<Set<number>>;
+    thumbnailReadyPages: import("vue").ComputedRef<Set<number>>;
+    canPrevious: import("vue").ComputedRef<boolean>;
+    canNext: import("vue").ComputedRef<boolean>;
+    next: () => void;
+    previous: () => void;
+    goToPage: (page: number) => Promise<void>;
+    changeMode: (value: ReaderMode) => boolean;
+    initializePage: (page: number) => void;
+    reset: () => void;
+    cancelPreparation: (clearTarget?: boolean) => void;
+    canStartUserTurn: (forward: boolean, prepare?: boolean) => boolean;
+    onPageRendered: ({ page }: {
+        page: number;
+    }) => void;
+    onPageError: (page: number, error: unknown) => void;
+    syncCurrentPage: (pageIndex: number) => void;
+    onFlipStateChange: (state: string) => void;
+    onOrientationChange: (value: ReaderMode) => void;
+};
+export {};

package/dist/composables/usePdfDocument.d.ts

@@ -0,0 +1,32 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { ResolvedFlipbookProps } from './types';
+interface DocumentEvents {
+    onReset: () => void;
+    onRangeError: () => void;
+    onReady: (document: PDFDocumentProxy, isCurrent: () => boolean) => Promise<void>;
+    onProgress: (progress: number) => void;
+    onError: (error: unknown) => void;
+}
+/**
+ * 管理 PDF 文档会话、加载进度、错误与销毁。
+ * 调用逻辑：协调层创建后，在挂载、URL 变化和 reload 时调用 load。
+ * @param props 组件 URL、文件大小和 Worker 等配置。
+ * @param events 文档重置、就绪、进度与错误回调。
+ * @returns 只读文档状态及 load 方法。
+ */
+export declare function usePdfDocument(props: ResolvedFlipbookProps, events: DocumentEvents): {
+    pdf: Readonly<import("vue").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined, import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined>>;
+    pageCount: Readonly<import("vue").Ref<number, number>>;
+    pageSize: Readonly<import("vue").Ref<{
+        readonly width: number;
+        readonly height: number;
+    }, {
+        readonly width: number;
+        readonly height: number;
+    }>>;
+    loading: Readonly<import("vue").Ref<boolean, boolean>>;
+    loadProgress: Readonly<import("vue").Ref<number, number>>;
+    errorMessage: Readonly<import("vue").Ref<string, string>>;
+    load: () => Promise<void>;
+};
+export {};

package/dist/composables/usePdfFlipbook.d.ts

@@ -0,0 +1,38 @@
+import type { PdfFlipbookExpose, ReaderMode } from '../types';
+import type { FlipbookEmit, ResolvedFlipbookProps } from './types';
+/**
+ * 作为外观层组合文档、导航、布局与翻页引擎。
+ * 调用逻辑：VuePdfFlipbook.vue 的 setup 调用，模板和 defineExpose 使用其结果。
+ * @param props 已填充默认值的组件属性。
+ * @param emit 类型化组件事件发送函数。
+ * @returns 模板所需 ref、事件处理方法和公开实例 API。
+ */
+export declare function usePdfFlipbook(props: ResolvedFlipbookProps, emit: FlipbookEmit): {
+    viewport: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    bookStage: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    flipbookElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    rootHeight: import("vue").ComputedRef<string>;
+    bookRevision: import("vue").Ref<number, number>;
+    api: PdfFlipbookExpose;
+    thumbnailsVisible: import("vue").Ref<boolean, boolean>;
+    pageAspectRatio: import("vue").ComputedRef<number>;
+    visiblePages: import("vue").ComputedRef<number[]>;
+    canPrevious: import("vue").ComputedRef<boolean>;
+    canNext: import("vue").ComputedRef<boolean>;
+    bookShellStyle: import("vue").ComputedRef<{
+        width: string;
+        height: string;
+    }>;
+    pdf: Readonly<import("vue").ShallowRef<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined, import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined>>;
+    loading: Readonly<import("vue").Ref<boolean, boolean>>;
+    pageCount: Readonly<import("vue").Ref<number, number>>;
+    pageLoading: Readonly<import("vue").Ref<boolean, boolean>>;
+    mode: Readonly<import("vue").Ref<ReaderMode, ReaderMode>>;
+    activePages: import("vue").ComputedRef<Set<number>>;
+    renderPages: import("vue").ComputedRef<Set<number>>;
+    thumbnailReadyPages: import("vue").ComputedRef<Set<number>>;
+    onPageRendered: ({ page }: {
+        page: number;
+    }) => void;
+    onPageError: (page: number, error: unknown) => void;
+};

package/dist/composables/usePdfPageCanvas.d.ts

@@ -0,0 +1,26 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+interface CanvasOptions {
+    pdf: PDFDocumentProxy;
+    pageNumber: number;
+    renderScale: number;
+}
+interface CanvasEvents {
+    onRendered: (payload: {
+        page: number;
+        width: number;
+        height: number;
+    }) => void;
+    onError: (error: unknown) => void;
+}
+/**
+ * 管理单页 Canvas 渲染、过期任务取消和共享资源引用。
+ * 调用逻辑：PdfCanvasPage.vue 在 setup 调用；属性变化自动触发 renderPage。
+ * @param props PDF 文档、页码和渲染倍率等响应式属性。
+ * @param events 渲染完成与失败回调。
+ * @returns canvas 模板 ref 和 rendering 状态。
+ */
+export declare function usePdfPageCanvas(props: Readonly<CanvasOptions>, events: CanvasEvents): {
+    canvas: import("vue").Ref<HTMLCanvasElement | undefined, HTMLCanvasElement | undefined>;
+    rendering: import("vue").Ref<boolean, boolean>;
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from 'vue';
+import VuePdfFlipbook from './VuePdfFlipbook.vue';
+import './style.css';
+export type { PdfFlipbookExpose, PdfFlipbookProps, PdfFlipbookState, PdfThumbnailSlotProps, ReaderMode } from './types';
+export { VuePdfFlipbook };
+export { default as PdfCanvasPage } from './components/PdfCanvasPage.vue';
+declare const plugin: Plugin;
+export default plugin;

package/dist/pageResources.d.ts

@@ -0,0 +1,8 @@
+import type { PDFPageProxy } from 'pdfjs-dist';
+/**
+ * 增加共享 PDF 页面引用，防止缩略图卸载时清理正文仍在使用的资源。
+ * 调用逻辑：Canvas 获取页面后调用，任务结束或卸载时调用返回的释放函数。
+ * @param page PDF.js 返回的共享页面代理对象。
+ * @returns 无参数、返回 void 的幂等释放函数；最后一个使用者释放时执行 cleanup。
+ */
+export declare function retainPage(page: PDFPageProxy): () => void;

package/dist/pageWindow.d.ts

@@ -0,0 +1,29 @@
+import type { ReaderMode } from './types';
+/**
+ * 计算指定页码所在的可见页组并裁剪文档边界。
+ * 调用逻辑：导航状态计算和翻页必需页计算调用。
+ * @param page 一基页码。
+ * @param pages 总页数。
+ * @param mode 实际单页或双页模式。
+ * @returns 一基页码数组；空文档返回空数组。
+ */
+export declare function getVisiblePages(page: number, pages: number, mode: ReaderMode): number[];
+/**
+ * 合并起点、终点及翻页动画背面所需页码。
+ * 调用逻辑：跳页准备、渲染优先级和原生手势准入共用。
+ * @param from 起点一基页码。
+ * @param to 目标一基页码。
+ * @param pages 总页数。
+ * @param mode 实际阅读模式。
+ * @returns 去重的一基页码数组。
+ */
+export declare function getTurnPages(from: number, to: number, pages: number, mode: ReaderMode): number[];
+/**
+ * 获取可见页及前后各 5 页的预览窗口。
+ * 调用逻辑：正文和缩略图共用，限制 Canvas 挂载范围。
+ * @param page 中心一基页码。
+ * @param pages 总页数。
+ * @param mode 实际阅读模式。
+ * @returns 边界裁剪后的连续页码数组。
+ */
+export declare function getPageWindow(page: number, pages: number, mode: ReaderMode): number[];

package/dist/pdfRangeTransport.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 将可校验的分段数据源适配为 PDF.js 数据传输对象。
+ * 调用逻辑：usePdfDocument.load 建立文档前调用。
+ * @param url PDF 地址。
+ * @param controller 控制本轮所有网络请求的 AbortController。
+ * @param onError 未取消的分段失败回调。
+ * @param fileSize 可选原始文件大小。
+ * @returns Promise<PDFDataRangeTransport>，包含首段数据且关闭流式加载。
+ */
+export declare function createPdfRangeTransport(url: string, controller: AbortController, onError: (error: unknown) => void, fileSize?: number): Promise<{
+    /**
+     * 按 PDF.js 请求读取字节段，完成后通知 onDataRange。
+     * 调用逻辑：由 PDF.js 在解析文档、页面和共享资源时调用。
+     * @param begin 包含的起始字节偏移。
+     * @param end 不包含的结束字节偏移。
+     * @returns void；网络任务异步执行，失败通过 onError 通知。
+     */
+    requestDataRange(begin: number, end: number): void;
+    /**
+     * 中止本轮文档的全部分段请求。
+     * 调用逻辑：PDF.js 销毁传输对象时调用，复用会话 AbortController。
+     * 参数：无。
+     * @returns void。
+     */
+    abort(): void;
+    length: number;
+    initialData: Uint8Array<ArrayBufferLike> | null;
+    progressiveDone: boolean;
+    contentDispositionFilename: string;
+    onDataRange(begin: number, chunk: Uint8Array | null): void;
+    onDataProgressiveRead(chunk: Uint8Array | null): void;
+    onDataProgressiveDone(): void;
+    transportReady(listener: any): void;
+    "__#private@#private": any;
+}>;

package/dist/rangeSource.d.ts

@@ -0,0 +1,21 @@
+export declare const rangeChunkSize: number;
+/**
+ * 通过首段请求建立可校验的 PDF 字节数据源。
+ * 调用逻辑：由 createPdfRangeTransport 调用，不使用 HEAD 猜测长度，不回退全文下载。
+ * @param url PDF 地址。
+ * @param signal 会话取消信号，传递给所有请求。
+ * @param fileSize 可选原始文件字节数，用于响应头未暴露时。
+ * @returns Promise，解析为文件总长度、首段数据及 read(begin, end) 方法。
+ */
+export declare function openRangeSource(url: string, signal: AbortSignal, fileSize?: number): Promise<{
+    length: number;
+    initialData: Uint8Array<ArrayBufferLike>;
+    /**
+     * 按需读取后续字节段，并验证响应范围与文档总长度。
+     * 调用逻辑：PDFDataRangeTransport 的 requestDataRange 调用。
+     * @param begin 包含的起始偏移。
+     * @param end 不包含的结束偏移。
+     * @returns Promise<Uint8Array>；参数或服务器响应不符时拒绝。
+     */
+    read(begin: number, end: number): Promise<Uint8Array<ArrayBufferLike>>;
+}>;

package/dist/types.d.ts

@@ -0,0 +1,66 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+export type ReaderMode = 'single' | 'double';
+export interface PdfThumbnailSlotProps {
+    page: number;
+    pdf: PDFDocumentProxy;
+    isActive: boolean;
+    /** 位于预览窗口且正文已渲染完成；外部插槽据此延迟创建缩略图 Canvas。 */
+    shouldRender: boolean;
+}
+export interface PdfFlipbookProps {
+    url: string;
+    /** PDF 原始字节数；CORS 未暴露 Content-Range 时用于确定分段边界。 */
+    fileSize?: number;
+    initialPage?: number;
+    initialMode?: ReaderMode;
+    /** 默认填满已设置高度的父容器；数值按像素处理。 */
+    height?: string | number;
+    background?: string;
+    workerSrc?: string;
+}
+export interface PdfFlipbookState {
+    page: number;
+    pages: number;
+    mode: ReaderMode;
+    visiblePages: number[];
+    loading: boolean;
+    /** 翻页前正在等待目标页下载或渲染，可供外部展示加载状态。 */
+    pageLoading: boolean;
+    /** 准备或动画期间的目标页码；没有待处理目标时为 null。 */
+    targetPage: number | null;
+    progress: number;
+    error: string;
+    canPrevious: boolean;
+    canNext: boolean;
+    thumbnailsVisible: boolean;
+}
+export interface PdfFlipbookExpose {
+    /** 外部通过组件 ref 调用以显示缩略图；无参数，返回 void，更新 thumbnailsVisible。 */
+    showThumbnails: () => void;
+    /** 外部通过组件 ref 调用以隐藏缩略图；无参数，返回 void，更新 thumbnailsVisible。 */
+    hideThumbnails: () => void;
+    /** 外部调用后交给导航层请求下一页组；无参数，返回 void，末页不执行。 */
+    next: () => void;
+    /** 外部调用后交给导航层请求上一页组；无参数，返回 void，首页不执行。 */
+    previous: () => void;
+    /**
+     * 请求跳页，内部依次执行防抖、必需页准备和翻页。
+     * 调用逻辑：外部页码输入、缩略图或其他导航控件通过组件 ref 调用。
+     * @param page 一基目标页码，自动取整并限制范围。
+     * @returns Promise<void>；动画启动或请求取消/忽略后完成，不等待动画结束。
+     */
+    goToPage: (page: number) => Promise<void>;
+    /**
+     * 切换阅读模式并重新适配布局和引擎。
+     * 调用逻辑：由外部模式控件通过组件 ref 调用。
+     * @param mode single 为单页，double 为双页；实际显示还受容器宽度限制。
+     * @returns Promise<void>；布局更新完成或模式未变化时结束。
+     */
+    setMode: (mode: ReaderMode) => Promise<void>;
+    /** 外部重试时调用文档加载流程；无参数，返回 Promise<void>，错误通过 error 事件报告。 */
+    reload: () => Promise<void>;
+    /** 外部主动查询状态时调用；无参数，返回 PdfFlipbookState 快照，不暴露内部 ref。 */
+    getState: () => PdfFlipbookState;
+    /** 外部自定义预览时调用；无参数，返回借用的 PDF 文档或 undefined；文档由组件销毁，外部勿调用 destroy。 */
+    getDocument: () => PDFDocumentProxy | undefined;
+}

package/dist/vue-pdf-flipbook-next.css

@@ -0,0 +1,2 @@
+.thumbnail-container[data-v-025f840c]{width:100%;position:relative}.page-num[data-v-025f840c]{pointer-events:none;z-index:9;background:#b5b5b540;padding:2px 4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vpf-reader,.vpf-reader *{box-sizing:border-box}.vpf-reader{width:100%;height:var(--vpf-height,100%);background:var(--vpf-background,transparent);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.vpf-viewport{flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.vpf-page-nav{z-index:10;color:#fff;cursor:pointer;opacity:0;pointer-events:none;background:#141c1bbf;border:1px solid #ffffff40;border-radius:8px;place-items:center;width:44px;height:56px;padding:10px;transition:opacity .15s,background .15s;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.vpf-page-nav--previous{left:12px}.vpf-page-nav--next{right:12px}.vpf-page-nav svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.vpf-viewport:hover .vpf-page-nav,.vpf-viewport:focus-within .vpf-page-nav{opacity:1;pointer-events:auto}.vpf-page-nav:hover:not(:disabled){background:#141c1bf2}.vpf-page-nav:focus-visible{outline-offset:2px;outline:2px solid #fff}.vpf-viewport:hover .vpf-page-nav:disabled,.vpf-viewport:focus-within .vpf-page-nav:disabled{opacity:.35;cursor:default}@media (hover:none){.vpf-page-nav{opacity:1;pointer-events:auto}.vpf-page-nav:disabled{opacity:.35}}@media (prefers-reduced-motion:reduce){.vpf-page-nav{transition:none}}.vpf-thumbnails{background:#edf0eb;flex:none;gap:12px;max-height:35%;padding:10px;display:flex;overflow:auto}.vpf-thumbnails,.vpf-default-thumbnails{scrollbar-width:thin;scrollbar-color:#a5aea8 transparent}.vpf-thumbnails:hover,.vpf-thumbnails:focus-within,.vpf-default-thumbnails:hover{scrollbar-color:#7d8b82 transparent}@supports selector(::-webkit-scrollbar){.vpf-thumbnails,.vpf-default-thumbnails,.vpf-thumbnails:hover,.vpf-thumbnails:focus-within,.vpf-default-thumbnails:hover{scrollbar-width:auto;scrollbar-color:auto}.vpf-thumbnails::-webkit-scrollbar{width:8px;height:8px}.vpf-default-thumbnails::-webkit-scrollbar{width:8px;height:8px}.vpf-thumbnails::-webkit-scrollbar-track{background:0 0}.vpf-default-thumbnails::-webkit-scrollbar-track{background:0 0}.vpf-thumbnails::-webkit-scrollbar-thumb{background:#a5aea8 padding-box padding-box;border:2px solid #0000;border-radius:999px;min-width:32px}.vpf-default-thumbnails::-webkit-scrollbar-thumb{background:#a5aea8 padding-box padding-box;border:2px solid #0000;border-radius:999px;min-width:32px}.vpf-thumbnails::-webkit-scrollbar-thumb:hover{background-color:#7d8b82}.vpf-default-thumbnails::-webkit-scrollbar-thumb:hover{background-color:#7d8b82}.vpf-thumbnails::-webkit-scrollbar-thumb:active{background-color:#5f7165}.vpf-default-thumbnails::-webkit-scrollbar-thumb:active{background-color:#5f7165}.vpf-thumbnails::-webkit-scrollbar-button{width:0;height:0;display:none}.vpf-default-thumbnails::-webkit-scrollbar-button{width:0;height:0;display:none}.vpf-thumbnails::-webkit-scrollbar-corner{background:0 0}.vpf-default-thumbnails::-webkit-scrollbar-corner{background:0 0}}.vpf-thumbnail{color:#333;cursor:pointer;font:inherit;background:#fff;border:2px solid #0000;flex:0 0 86px;padding:4px}.vpf-thumbnail[aria-current]{border-color:#987044}.vpf-thumbnail:focus-visible{outline-offset:-2px;outline:2px solid #987044}.vpf-thumbnail-preview{aspect-ratio:3/4;background:#fff;width:100%}.vpf-book-stage{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.vpf-default-thumbnails{z-index:11;pointer-events:auto;background:#edf0ebd9;max-height:100%;position:absolute;bottom:0;left:0;right:0;overflow:auto}.vpf-thumbnails--compact{background:0 0;align-items:flex-start;gap:6px;max-height:none;padding:6px}.vpf-thumbnails--compact .vpf-thumbnail{border-width:1px;flex:0 0 30px;width:30px;min-width:0;padding:0;font-size:10px;line-height:16px}.vpf-book-shell{isolation:isolate;flex:none;position:relative}.vpf-flipbook.stf__parent{min-width:0!important;min-height:0!important}.vpf-flipbook{width:100%;height:100%;position:relative}.vpf-turn-page{color:#545454;transform-style:preserve-3d;backface-visibility:hidden;background:#fff;position:relative;box-shadow:inset 0 0 28px #2026250f;overflow:hidden!important}.vpf-turn-page:before{content:"";z-index:0;pointer-events:none;backface-visibility:hidden;background:#fff;position:absolute;inset:0}.vpf-turn-page.--left{border-radius:5px 0 0 5px}.vpf-turn-page.--right{border-radius:0 5px 5px 0}.vpf-book-stage.is-single .vpf-turn-page{border-radius:5px}.vpf-flipbook.stf__parent,.vpf-flipbook .stf__wrapper,.vpf-flipbook .stf__block{box-sizing:border-box}.vpf-flipbook .stf__wrapper{width:100%;height:100%;position:relative}.vpf-flipbook .stf__wrapper.--portrait{clip-path:inset(0)}.vpf-flipbook .stf__wrapper.--landscape:before{content:"";pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;left:calc(50% - 1px)}.vpf-flipbook .stf__block{perspective:2400px}.vpf-flipbook .stf__item{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform, clip-path;position:absolute;background:#fff!important}.vpf-flipbook .stf__outerShadow,.vpf-flipbook .stf__innerShadow,.vpf-flipbook .stf__hardShadow,.vpf-flipbook .stf__hardInnerShadow{pointer-events:none;mix-blend-mode:normal}.vpf-page-canvas{z-index:1;background:#fff;width:100%;min-width:0;height:100%;max-height:100%;display:flex;position:relative}.vpf-page-canvas.is-rendering canvas{visibility:hidden}.vpf-reader .stf__parent .vpf-page-canvas canvas,.vpf-page-canvas canvas{object-fit:contain;background:#fff;width:100%;max-width:100%;height:100%;display:block;position:relative}
+/*$vite$:1*/