flipbookengine 0.2.3 β†’ 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +28 -1
  2. package/THIRD-PARTY-NOTICES.md +56 -0
  3. package/dist/adapters/PageFlipAdapter.d.ts +1 -0
  4. package/dist/components/NavigationArrows.d.ts +6 -0
  5. package/dist/core/PdfRenderer.d.ts +34 -0
  6. package/dist/engine.d.ts +10 -2
  7. package/dist/flipbook-engine.css +1 -1
  8. package/dist/flipbook-engine.iife.js +78 -13
  9. package/dist/flipbook-engine.iife.js.map +1 -1
  10. package/dist/flipbook-engine.js +19110 -18926
  11. package/dist/flipbook-engine.js.map +1 -1
  12. package/dist/state/store.d.ts +1 -0
  13. package/dist/theme/theme.d.ts +0 -1
  14. package/package.json +107 -105
package/README.md CHANGED
@@ -1,11 +1,19 @@
1
1
  # FlipbookEngine
2
2
 
3
+ [![NPM Version](https://img.shields.io/npm/v/flipbookengine?style=flat-square&color=blue)](https://www.npmjs.com/package/flipbookengine)
4
+ [![License](https://img.shields.io/npm/l/flipbookengine?style=flat-square)](https://github.com/Bizeka/flipbook-engine/blob/main/LICENSE)
5
+ [![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/flipbookengine?style=flat-square)](https://www.npmjs.com/package/flipbookengine)
6
+ [![NPM Downloads](https://img.shields.io/npm/dt/flipbookengine?style=flat-square)](https://www.npmjs.com/package/flipbookengine)
7
+
8
+ **[πŸ”₯ Live Demo & Playground](https://flipbookengine.com)**
9
+
3
10
  FlipbookEngine is a modern, lightweight, and embeddable HTML flipbook viewer for PDF-backed catalogs, brochures, and digital publications. Written in TypeScript, it features single-page and spread modes, a thumbnail rail, smooth zoom/pan, full internationalization (i18n), and robust theme customization.
4
11
 
5
12
  ## Highlights
6
13
 
7
14
  - **Dual-Mode Layout**: Seamlessly switches between single-page (mobile-optimized) and spread (book/catalog layout) modes.
8
15
  - **Rich Interaction**: Built-in thumbnail navigation rail, smooth zoom & pan, and HTML5 fullscreen support.
16
+ - **Media & Autoplay**: Configurable page-flip sound effects and automated slideshow presentation with `Autoplay`.
9
17
  - **Theme Engine**: Styled with compiled CSS and CSS Custom Properties, featuring full support for light/dark modes (auto-responsive to Bootstrap 5 or tailorable per instance).
10
18
  - **Multi-Language (i18n)**: Out-of-the-box support for English (`en`) and Turkish (`tr`) with customizable overrides.
11
19
  - **Framework Wrappers**: Direct React and Vue wrapper exports for seamless modern integration.
@@ -137,7 +145,9 @@ Supported events: `pageChange`, `zoomChange`, `singlePageModeChange`, `thumbsTog
137
145
 
138
146
  | Option | Type | Default | Description |
139
147
  | :--- | :--- | :--- | :--- |
140
- | `soundEnabled` | `boolean` | `false` | Enables page turning sound effect. |
148
+ | `soundEnabled` | `boolean` | `true` | Enables page turning sound effect. |
149
+ | `soundUrl` | `string` | `'https://.../page-flip.mp3'` | URL of the audio file. |
150
+ | `autoPlayInterval`| `number` | `3000` | Autoplay page duration in milliseconds. |
141
151
  | `flippingTime` | `number` | `1000` | Duration of the page turn animation in milliseconds. |
142
152
  | `maxShadowOpacity` | `number` | `0.5` | Maximum opacity of the shadow during page turn (0 to 1). |
143
153
  | `whiteLabel` | `boolean` | `false` | Hides the "Powered by FlipbookEngine" watermark. |
@@ -184,6 +194,23 @@ When choosing a flipbook library, here is how we compare to other solutions:
184
194
 
185
195
  ---
186
196
 
197
+ ## πŸ™ Acknowledgments
198
+
199
+ A special thanks to the incredible team behind **[Serenity](https://github.com/serenity-is/serenity)**. FlipbookEngine's reactive UI layer is proudly powered by **[domwise](https://github.com/serenity-is/serenity/tree/master/packages/domwise)** (a brilliant DOM manipulation library developed by the Serenity team). Coupled with `@preact/signals-core`, `domwise` allows us to completely bypass the heavy overhead of traditional Virtual DOM diffing. This architectural choice is a massive contributor to FlipbookEngine's lightning-fast UI updates, ensuring buttery-smooth 60 FPS performance even on low-end mobile devices.
200
+
201
+ ---
202
+
203
+ ## πŸ—ΊοΈ Roadmap (Upcoming in v1.0.0)
204
+
205
+ We are constantly working to make FlipbookEngine the definitive choice for enterprise digital catalogs. The upcoming **v1.0.0 Major Release** will introduce several advanced features designed for commercial scale:
206
+
207
+ - πŸ“‘ **Table of Contents (Index):** A dedicated, interactive side-menu allowing readers to instantly jump to specific chapters or product categories.
208
+ - πŸ“ **Page Notes & Annotations:** Allow readers to drop personal notes or bookmarks directly onto pages.
209
+ - πŸ” **Full-Text PDF Search:** Client-side search capabilities via extracted JSON indices, enabling instant text highlighting across hundreds of pages without locking the UI.
210
+ - 🎯 **Interactive Hotspots & Pop-ups:** Draw custom coordinates over the canvas to embed YouTube videos, image galleries, or direct "Buy Now" e-commerce links right on top of the catalog pages.
211
+
212
+ ---
213
+
187
214
  ## πŸ“„ Licensing
188
215
 
189
216
  FlipbookEngine is distributed under a dual-license model:
package/THIRD-PARTY-NOTICES.md CHANGED
@@ -56,6 +56,62 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
56
56
 
57
57
  ---
58
58
 
59
+ ### 3. @preact/signals-core
60
+ - **Repository:** https://github.com/preactjs/signals
61
+ - **License:** MIT License
62
+
63
+ ```text
64
+ The MIT License (MIT)
65
+ Copyright (c) 2022-present Preact Team
66
+
67
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
68
+ this software and associated documentation files (the "Software"), to deal in
69
+ the Software without restriction, including without limitation the rights to
70
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
71
+ the Software, and to permit persons to whom the Software is furnished to do so,
72
+ subject to the following conditions:
73
+
74
+ The above copyright notice and this permission notice shall be included in all
75
+ copies or substantial portions of the Software.
76
+
77
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
78
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
79
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
80
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
81
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
82
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
83
+ ```
84
+
85
+ ---
86
+
87
+ ### 4. @serenity-is/domwise
88
+ - **Repository:** https://github.com/serenity-is/serenity
89
+ - **License:** MIT License
90
+
91
+ ```text
92
+ The MIT License (MIT)
93
+ Copyright (c) Serenity.is
94
+
95
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
96
+ this software and associated documentation files (the "Software"), to deal in
97
+ the Software without restriction, including without limitation the rights to
98
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
99
+ the Software, and to permit persons to whom the Software is furnished to do so,
100
+ subject to the following conditions:
101
+
102
+ The above copyright notice and this permission notice shall be included in all
103
+ copies or substantial portions of the Software.
104
+
105
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
106
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
107
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
108
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
109
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
110
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
111
+ ```
112
+
113
+ ---
114
+
59
115
  ## Development Dependencies
60
116
 
61
117
  Development dependencies such as `vite`, `typescript`, and their respective plugins are licensed under the MIT License. These tools are used during the build process and are not distributed as part of the compiled FlipbookEngine bundle.
package/dist/adapters/PageFlipAdapter.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare class PageFlipAdapter {
9
9
  private isLibraryFlipping;
10
10
  private autoPlayTimer;
11
11
  constructor(bookContainer: HTMLElement, options: FlipbookEngineOptions);
12
+ private unlockAudio;
12
13
  init(viewportWidth: number, viewportHeight: number): void;
13
14
  private bindEvents;
14
15
  private setupSignalSync;
package/dist/components/NavigationArrows.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ interface NavigationArrowsProps {
2
+ onPrevPage: () => void;
3
+ onNextPage: () => void;
4
+ }
5
+ export declare function NavigationArrows(props: NavigationArrowsProps): import('@serenity-is/domwise').JSXElement;
6
+ export {};
package/dist/core/PdfRenderer.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import { NormalizedFlipbookPage } from '../model/pages';
2
+
3
+ export interface PdfRenderOptions {
4
+ scale?: number;
5
+ quality?: number;
6
+ format?: string;
7
+ }
8
+ export declare class PdfRenderer {
9
+ private pdfDoc;
10
+ private options;
11
+ constructor(options?: PdfRenderOptions);
12
+ /**
13
+ * Loads the PDF document from the given URL.
14
+ */
15
+ loadDocument(pdfUrl: string): Promise<number>;
16
+ /**
17
+ * Renders a specific page to a Data URL.
18
+ * @param pageIndex 1-based page index
19
+ */
20
+ renderPageToDataUrl(pageIndex: number): Promise<string>;
21
+ /**
22
+ * Calculates the best viewport dimensions based on the first page.
23
+ * Used for determining the overall flipbook dimensions.
24
+ */
25
+ calculateViewportDimensions(baseShortSide?: number): Promise<{
26
+ width: number;
27
+ height: number;
28
+ }>;
29
+ /**
30
+ * Renders all pages sequentially and returns an array of NormalizedFlipbookPage.
31
+ */
32
+ renderAllPages(): Promise<NormalizedFlipbookPage[]>;
33
+ destroy(): void;
34
+ }
package/dist/engine.d.ts CHANGED
@@ -5,6 +5,7 @@ import { FlipbookLocale, PartialFlipbookMessages } from './i18n/service';
5
5
  export interface FlipbookEngineOptions {
6
6
  allowDownload?: boolean;
7
7
  showThumbs?: boolean;
8
+ showArrows?: boolean;
8
9
  primaryColor?: string;
9
10
  soundEnabled?: boolean;
10
11
  soundUrl?: string;
@@ -24,6 +25,9 @@ export interface FlipbookEngineOptions {
24
25
  isSingleMode?: boolean;
25
26
  autoPlay?: boolean;
26
27
  autoPlayInterval?: number;
28
+ pdfRenderScale?: number;
29
+ pdfRenderQuality?: number;
30
+ pdfRenderFormat?: string;
27
31
  }
28
32
  export interface PageImages extends FlipbookPageAsset {
29
33
  pageNumber: number;
@@ -66,18 +70,22 @@ export declare class FlipbookEngine {
66
70
  private pageFlipAdapter;
67
71
  private layoutManager;
68
72
  private interactionManager;
69
- private pdfDoc;
73
+ private pdfRenderer;
70
74
  private listeners;
71
75
  constructor(selector: string | HTMLElement, options?: FlipbookEngineOptions);
72
76
  init(pdfUrl: string, imageList?: Array<PageImages | FlipbookPageAsset>): Promise<void>;
73
77
  private loadImageSize;
74
78
  goToPage(targetIdx: number): void;
79
+ getTotalPages(): number;
80
+ getCurrentPage(): number;
81
+ getZoom(): number;
82
+ setZoom(zoomLevel: number): void;
75
83
  nextPage(): void;
76
84
  prevPage(): void;
77
85
  setSingleMode(isSingle: boolean): void;
78
86
  updateOptions(options: Partial<FlipbookEngineOptions>): void;
79
87
  setPages(imageList: Array<PageImages | FlipbookPageAsset>, pdfUrl?: string): void;
80
- destroy(clearMarkup?: boolean): void;
88
+ destroy(keepContainer?: boolean): void;
81
89
  on<T extends FlipbookEngineEventName>(eventName: T, handler: FlipbookEventHandler<T>): () => void;
82
90
  off<T extends FlipbookEngineEventName>(eventName: T, handler: FlipbookEventHandler<T>): void;
83
91
  private emit;
package/dist/flipbook-engine.css CHANGED
@@ -1 +1 @@
1
- :root{--flipbook-bg-main: var(--bs-body-bg, #f8f9fa);--flipbook-bg-surface: var(--bs-secondary-bg, #ffffff);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #f1f3f5);--flipbook-bg-panel: var(--bs-dark, #212529);--flipbook-bg-panel-soft: color-mix(in srgb, var(--flipbook-bg-panel) 88%, white 12%);--flipbook-text-main: var(--bs-body-color, #212529);--flipbook-text-muted: var(--bs-secondary-color, #6c757d);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(0, 0, 0, .15));--flipbook-accent: var(--bs-primary, #0d6efd);--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: color-mix(in srgb, var(--flipbook-bg-panel) 95%, black 5%);--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #ffffff;--flipbook-thumbscroll-track: rgba(0, 0, 0, .18);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .22);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .35);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: var(--flipbook-bg-panel);--flipbook-download-bg: #198754;--flipbook-download-border: #198754;--flipbook-download-text: #ffffff;--flipbook-settings-bg: var(--flipbook-bg-surface);--flipbook-settings-text: var(--flipbook-text-main);--flipbook-radius-sm: .375rem;--flipbook-radius-md: .5rem;--flipbook-toolbar-height: 60px;--flipbook-thumbs-height: 110px;--flipbook-navbutton-size: 50px;--flipbook-page-padding: 20px;--flipbook-font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif)}[data-bs-theme=dark]{--flipbook-bg-main: var(--bs-body-bg, #121826);--flipbook-bg-surface: var(--bs-secondary-bg, #1b2232);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #222b3c);--flipbook-bg-panel: #141927;--flipbook-bg-panel-soft: #1d2434;--flipbook-text-main: var(--bs-body-color, #f8f9fa);--flipbook-text-muted: var(--bs-secondary-color, #adb5bd);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(255, 255, 255, .12));--flipbook-thumbrail-bg: #101522;--flipbook-thumb-bg: #ffffff;--flipbook-settings-bg: #1d2434;--flipbook-settings-text: #f8f9fa;--flipbook-emptycover-bg: #101522;--flipbook-shadow: rgba(0, 0, 0, .5)}.bk-theme-light{color-scheme:light;--flipbook-bg-main: #f8fafc;--flipbook-bg-surface: #ffffff;--flipbook-bg-surface-alt: #f1f5f9;--flipbook-bg-panel: #e2e8f0;--flipbook-bg-panel-soft: #f1f5f9;--flipbook-text-main: #0f172a;--flipbook-text-muted: #64748b;--flipbook-toolbar-text: #0f172a;--flipbook-toolbar-button-text: #334155;--flipbook-border: rgba(15, 23, 42, .1);--flipbook-accent: #4f46e5;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #f8fafc;--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #0f172a;--flipbook-thumbscroll-track: rgba(15, 23, 42, .08);--flipbook-thumbscroll-thumb: rgba(15, 23, 42, .18);--flipbook-navbutton-bg: rgba(15, 23, 42, .65);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(15, 23, 42, .08);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #e2e8f0;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #ffffff;--flipbook-settings-text: #0f172a}.bk-theme-dark{color-scheme:dark;--flipbook-bg-main: #0b0f19;--flipbook-bg-surface: #111827;--flipbook-bg-surface-alt: #1f2937;--flipbook-bg-panel: #111827;--flipbook-bg-panel-soft: #1f2937;--flipbook-text-main: #f9fafb;--flipbook-text-muted: #9ca3af;--flipbook-toolbar-text: #f9fafb;--flipbook-toolbar-button-text: #e5e7eb;--flipbook-border: rgba(255, 255, 255, .08);--flipbook-accent: #7367f0;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #0b0f19;--flipbook-thumb-bg: #1f2937;--flipbook-thumb-text: #f9fafb;--flipbook-thumbscroll-track: rgba(255, 255, 255, .08);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .18);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .5);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #101522;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #1f2937;--flipbook-settings-text: #f9fafb}.bk-container,.bk-container *{box-sizing:border-box}.bk-container{color:var(--flipbook-text-main);font-family:var(--flipbook-font-family);flex:1;align-self:stretch}.bk-wrapper{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);overflow:hidden;font-family:var(--flipbook-font-family);border-radius:var(--flipbook-radius-md);flex:1;align-self:stretch}.bk-main-area{flex:1;position:relative;overflow:hidden;width:100%;min-height:0;background:var(--flipbook-bg-main)}.bk-container.single-mode .bk-main-area{overflow-y:auto;overflow-x:hidden}#bk-book-wrapper{position:absolute;inset:var(--flipbook-page-padding);padding:0;display:flex;justify-content:center;align-items:center;transition:transform .3s ease;transform-origin:center center}.bk-container.single-mode #bk-book-wrapper{position:relative;min-height:100%;inset:auto;padding:var(--flipbook-page-padding)}#bk-book-wrapper.zoomed{transition:none;cursor:grab}#bk-book-wrapper.zoomed:active{cursor:grabbing}#bk-book-wrapper.zoomed #bk-book{pointer-events:none}#bk-book-sizer{position:relative;margin:0 auto;transition:transform .4s ease}#bk-book-wrapper.bk-is-cover #bk-book-sizer{transform:translate(-25%)}#bk-book-wrapper.bk-is-back-cover #bk-book-sizer{transform:translate(25%)}.bk-container.double-mode:not(.bk-is-cover):not(.bk-is-back-cover) .stf__block{background-color:#00000080}#bk-book{width:100%;height:100%;position:relative}#bk-single-view{display:none;width:100%;height:100%;justify-content:center;align-items:center;overflow:hidden}#bk-single-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 5px 20px var(--flipbook-shadow);background:var(--flipbook-bookpage-bg);transition:transform .3s ease,opacity .3s ease;pointer-events:none}.slide-left{transform:translate(-100%);opacity:0}.slide-right{transform:translate(100%);opacity:0}.bz-page{background-color:var(--flipbook-bg-main);overflow:hidden;box-shadow:0 0 15px var(--flipbook-shadow)}.page-shadow{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}.bz-page--left .page-shadow{background:linear-gradient(to right,#0000001a,#0000 3%,#0000 85%,#0006)}.bz-page--right .page-shadow{background:linear-gradient(to right,#0006,#0000 15%,#0000 97%,#0000001a)}.bz-page--cover .page-shadow{display:none!important}.page-content{width:100%;height:100%;object-fit:contain;pointer-events:none;background:var(--flipbook-bookpage-bg);display:block}.page-content--split{width:100%;max-width:none;height:100%;object-fit:cover;object-position:left center}.page-content--left{object-position:left center}.page-content--right{object-position:right center}#bk-single-img.page-content--split{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}.bk-toolbar{height:var(--flipbook-toolbar-height);background:var(--flipbook-bg-panel-soft);color:var(--flipbook-toolbar-text);display:flex;align-items:center;justify-content:space-between;padding:0 15px;z-index:10;flex-shrink:0;border-top:1px solid var(--flipbook-border);gap:.75rem;overflow-x:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-toolbar::-webkit-scrollbar{height:4px}.bk-toolbar::-webkit-scrollbar-thumb{background:var(--flipbook-border);border-radius:999px}.bk-btn-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.bk-btn-group--center{flex-grow:1;justify-content:center}.bk-btn{background:transparent;border:1px solid transparent;color:var(--flipbook-toolbar-button-text);width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.bk-btn:hover{background:color-mix(in srgb,var(--flipbook-text-main) 10%,transparent);transform:translateY(-1px)}.bk-btn:active{transform:translateY(1px)}.bk-btn.active{background:color-mix(in srgb,var(--flipbook-accent) 15%,transparent);color:var(--flipbook-accent)}.bk-btn:focus-visible,.thumb-item:focus-visible,.nav-float:focus-visible{outline:2px solid var(--flipbook-accent);outline-offset:2px}.bk-btn--download{color:var(--flipbook-download-bg)}.bk-btn--download:hover{background:color-mix(in srgb,var(--flipbook-download-bg) 15%,transparent)}#bk-page-info{color:var(--flipbook-toolbar-text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:14px;min-width:70px;text-align:center;font-weight:700}.bk-thumbs{height:var(--flipbook-thumbs-height);background:var(--flipbook-thumbrail-bg);overflow-x:auto;padding:15px;gap:15px;z-index:10;display:flex;flex-shrink:0;align-items:center;border-top:1px solid var(--flipbook-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-watermark{position:absolute;bottom:12px;right:15px;font-size:11px;color:var(--flipbook-text-muted);background:color-mix(in srgb,var(--flipbook-bg-surface) 60%,transparent);padding:4px 10px;border-radius:99px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--flipbook-border);z-index:100;box-shadow:0 2px 10px var(--flipbook-shadow);transition:all .2s ease;pointer-events:auto}.bk-watermark:hover{background:var(--flipbook-bg-surface);color:var(--flipbook-text-main);transform:translateY(-2px)}.bk-watermark a{color:inherit;font-weight:600;text-decoration:none}.bk-thumbs::-webkit-scrollbar{height:6px}.bk-thumbs::-webkit-scrollbar-track{background:var(--flipbook-thumbscroll-track);border-radius:999px}.bk-thumbs::-webkit-scrollbar-thumb{background:var(--flipbook-thumbscroll-thumb);border-radius:999px;transition:background-color .2s ease}.bk-thumbs::-webkit-scrollbar-thumb:hover{background:var(--flipbook-accent)}.thumb-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;opacity:.7;transition:all .2s ease;min-width:60px;flex-shrink:0;gap:5px}.thumb-item:hover{opacity:1;transform:translateY(-2px)}.thumb-item.active{opacity:1}.thumb-item.active .thumb-img-wrapper{border-color:var(--flipbook-accent);box-shadow:0 0 0 2px var(--flipbook-accent),0 4px 12px var(--flipbook-shadow)}.thumb-item.active span{color:var(--flipbook-accent);font-weight:700}.thumb-img-wrapper{width:50px;height:65px;background:var(--flipbook-bg-surface);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 5px var(--flipbook-shadow);transition:all .2s ease}.thumb-img{width:100%;height:100%;object-fit:cover}.thumb-img--split{width:96px;max-width:none;object-fit:cover}.thumb-img--left{object-position:left center}.thumb-img--right{object-position:right center}.thumb-item span{color:var(--flipbook-thumb-text);font-size:11px;margin-top:6px;font-weight:700}.nav-float{position:absolute;z-index:10;background:var(--flipbook-navbutton-bg);border:none;border-radius:999px;width:var(--flipbook-navbutton-size);height:var(--flipbook-navbutton-size);color:var(--flipbook-navbutton-text);font-size:20px;cursor:pointer;transition:background-color .2s ease;top:50%;transform:translateY(-50%)}.nav-float:hover{background:var(--flipbook-accent)}#nav-prev{left:20px}#nav-next{right:20px}.bk-settings-panel{position:absolute;bottom:70px;right:15px;background:var(--flipbook-settings-bg);color:var(--flipbook-settings-text);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-md);padding:15px;display:none;z-index:20;min-width:200px;box-shadow:0 10px 30px var(--flipbook-shadow)}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:14px;margin-bottom:10px}.setting-item:last-child{margin-bottom:0}.bk-empty-state{display:grid;place-items:center;width:100%;min-height:240px;padding:1.5rem;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);border:1px dashed var(--flipbook-border);border-radius:var(--flipbook-radius-md)}.bk-empty-state__title{margin:0;font-size:1.125rem;font-weight:600}.empty-cover{background-color:var(--flipbook-emptycover-bg)!important;box-shadow:none!important}.bk-attribution{position:absolute;bottom:15px;left:15px;background:#0f172abf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:6px 12px;border-radius:var(--flipbook-radius-sm);font-size:11px;text-decoration:none;z-index:20;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px #0006;border:1px solid rgba(255,255,255,.15);transition:all .2s ease;opacity:.85}.bk-attribution:hover{opacity:1;transform:translateY(-2px);box-shadow:0 6px 16px #0009;border-color:var(--flipbook-accent);color:#fff}.bk-attribution-icon{font-size:13px}.bk-attribution-img{height:24px;width:auto;object-fit:contain;display:block}@media (max-width: 768px){:root{--flipbook-toolbar-height: 50px;--flipbook-thumbs-height: 85px;--flipbook-navbutton-size: 35px;--flipbook-page-padding: 12px}.bk-toolbar{padding:0 5px}.bk-btn{padding:0 8px;font-size:12px;height:32px}.bk-btn-group{gap:4px}#bk-page-info{min-width:50px;font-size:12px}.nav-float{font-size:16px}#nav-prev{left:10px}#nav-next{right:10px}.bk-thumbs{padding:10px}.thumb-img{height:45px}.bk-settings-panel{bottom:60px}}.bk-btn.muted{opacity:.5;position:relative}.bk-btn.muted:after{content:"";position:absolute;width:80%;height:2px;background:currentColor;top:50%;left:10%;transform:rotate(-45deg);border-radius:1px}
1
+ :root{--flipbook-bg-main: var(--bs-body-bg, #f8f9fa);--flipbook-bg-surface: var(--bs-secondary-bg, #ffffff);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #f1f3f5);--flipbook-bg-panel: var(--bs-dark, #212529);--flipbook-bg-panel-soft: color-mix(in srgb, var(--flipbook-bg-panel) 88%, white 12%);--flipbook-text-main: var(--bs-body-color, #212529);--flipbook-text-muted: var(--bs-secondary-color, #6c757d);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(0, 0, 0, .15));--flipbook-accent: var(--bs-primary, #0d6efd);--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: color-mix(in srgb, var(--flipbook-bg-panel) 95%, black 5%);--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #ffffff;--flipbook-thumbscroll-track: rgba(0, 0, 0, .18);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .22);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .35);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: var(--flipbook-bg-panel);--flipbook-download-bg: #198754;--flipbook-download-border: #198754;--flipbook-download-text: #ffffff;--flipbook-settings-bg: var(--flipbook-bg-surface);--flipbook-settings-text: var(--flipbook-text-main);--flipbook-radius-sm: .375rem;--flipbook-radius-md: .5rem;--flipbook-toolbar-height: 60px;--flipbook-thumbs-height: 110px;--flipbook-navbutton-size: 50px;--flipbook-page-padding: 20px;--flipbook-font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif)}[data-bs-theme=dark]{--flipbook-bg-main: var(--bs-body-bg, #121826);--flipbook-bg-surface: var(--bs-secondary-bg, #1b2232);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #222b3c);--flipbook-bg-panel: #141927;--flipbook-bg-panel-soft: #1d2434;--flipbook-text-main: var(--bs-body-color, #f8f9fa);--flipbook-text-muted: var(--bs-secondary-color, #adb5bd);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(255, 255, 255, .12));--flipbook-thumbrail-bg: #101522;--flipbook-thumb-bg: #ffffff;--flipbook-settings-bg: #1d2434;--flipbook-settings-text: #f8f9fa;--flipbook-emptycover-bg: #101522;--flipbook-shadow: rgba(0, 0, 0, .5)}.bk-theme-light{color-scheme:light;--flipbook-bg-main: #f8fafc;--flipbook-bg-surface: #ffffff;--flipbook-bg-surface-alt: #f1f5f9;--flipbook-bg-panel: #e2e8f0;--flipbook-bg-panel-soft: #f1f5f9;--flipbook-text-main: #0f172a;--flipbook-text-muted: #64748b;--flipbook-toolbar-text: #0f172a;--flipbook-toolbar-button-text: #334155;--flipbook-border: rgba(15, 23, 42, .1);--flipbook-accent: #4f46e5;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #f8fafc;--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #0f172a;--flipbook-thumbscroll-track: rgba(15, 23, 42, .08);--flipbook-thumbscroll-thumb: rgba(15, 23, 42, .18);--flipbook-navbutton-bg: rgba(15, 23, 42, .65);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(15, 23, 42, .08);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #e2e8f0;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #ffffff;--flipbook-settings-text: #0f172a}.bk-theme-dark{color-scheme:dark;--flipbook-bg-main: #0b0f19;--flipbook-bg-surface: #111827;--flipbook-bg-surface-alt: #1f2937;--flipbook-bg-panel: #111827;--flipbook-bg-panel-soft: #1f2937;--flipbook-text-main: #f9fafb;--flipbook-text-muted: #9ca3af;--flipbook-toolbar-text: #f9fafb;--flipbook-toolbar-button-text: #e5e7eb;--flipbook-border: rgba(255, 255, 255, .08);--flipbook-accent: #7367f0;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #0b0f19;--flipbook-thumb-bg: #1f2937;--flipbook-thumb-text: #f9fafb;--flipbook-thumbscroll-track: rgba(255, 255, 255, .08);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .18);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .5);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #101522;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #1f2937;--flipbook-settings-text: #f9fafb}.bk-container,.bk-container *{box-sizing:border-box}.bk-container{color:var(--flipbook-text-main);font-family:var(--flipbook-font-family);flex:1;align-self:stretch}.bk-wrapper{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);overflow:hidden;font-family:var(--flipbook-font-family);border-radius:var(--flipbook-radius-md);flex:1;align-self:stretch}.bk-main-area{flex:1;position:relative;overflow:hidden;width:100%;min-height:0;background:var(--flipbook-bg-main)}.bk-container.single-mode .bk-main-area{overflow-y:auto;overflow-x:hidden}#bk-book-wrapper{position:absolute;inset:var(--flipbook-page-padding);padding:0;display:flex;justify-content:center;align-items:center;transition:transform .3s ease;transform-origin:center center}.bk-container.single-mode #bk-book-wrapper{position:relative;min-height:100%;inset:auto;padding:var(--flipbook-page-padding)}#bk-book-wrapper.zoomed{transition:none;cursor:grab}#bk-book-wrapper.zoomed:active{cursor:grabbing}#bk-book-wrapper.zoomed #bk-book{pointer-events:none}#bk-book-sizer{position:relative;margin:0 auto;transition:transform .4s ease}#bk-book-wrapper.bk-is-cover #bk-book-sizer{transform:translate(-25%)}#bk-book-wrapper.bk-is-back-cover #bk-book-sizer{transform:translate(25%)}.bk-container.double-mode:not(.bk-is-cover):not(.bk-is-back-cover) .stf__block{background-color:#00000080}#bk-book{width:100%;height:100%;position:relative}#bk-single-view{display:none;width:100%;height:100%;justify-content:center;align-items:center;overflow:hidden}#bk-single-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 5px 20px var(--flipbook-shadow);background:var(--flipbook-bookpage-bg);transition:transform .3s ease,opacity .3s ease;pointer-events:none}.slide-left{transform:translate(-100%);opacity:0}.slide-right{transform:translate(100%);opacity:0}.bz-page{background-color:var(--flipbook-bg-main);overflow:hidden;box-shadow:0 0 15px var(--flipbook-shadow)}.page-shadow{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}.bz-page--left .page-shadow{background:linear-gradient(to right,#0000001a,#0000 3%,#0000 85%,#0006)}.bz-page--right .page-shadow{background:linear-gradient(to right,#0006,#0000 15%,#0000 97%,#0000001a)}.bz-page--cover .page-shadow{display:none!important}.page-content{width:100%;height:100%;object-fit:contain;pointer-events:none;background:var(--flipbook-bookpage-bg);display:block}.page-content--split{width:100%;max-width:none;height:100%;object-fit:cover;object-position:left center}.page-content--left{object-position:left center}.page-content--right{object-position:right center}#bk-single-img.page-content--split{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}.bk-toolbar{height:var(--flipbook-toolbar-height);background:var(--flipbook-bg-panel-soft);color:var(--flipbook-toolbar-text);display:flex;align-items:center;justify-content:space-between;padding:0 15px;z-index:10;flex-shrink:0;border-top:1px solid var(--flipbook-border);gap:.75rem;overflow-x:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-toolbar::-webkit-scrollbar{height:4px}.bk-toolbar::-webkit-scrollbar-thumb{background:var(--flipbook-border);border-radius:999px}.bk-btn-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.bk-btn-group--center{flex-grow:1;justify-content:center}.bk-btn{background:transparent;border:1px solid transparent;color:var(--flipbook-toolbar-button-text);width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.bk-btn:hover{background:color-mix(in srgb,var(--flipbook-text-main) 10%,transparent);transform:translateY(-1px)}.bk-btn:active{transform:translateY(1px)}.bk-btn.active{background:color-mix(in srgb,var(--flipbook-accent) 15%,transparent);color:var(--flipbook-accent)}.bk-btn:focus-visible,.thumb-item:focus-visible,.nav-float:focus-visible{outline:2px solid var(--flipbook-accent);outline-offset:2px}.bk-btn--download{color:var(--flipbook-download-bg)}.bk-btn--download:hover{background:color-mix(in srgb,var(--flipbook-download-bg) 15%,transparent)}#bk-page-info{color:var(--flipbook-toolbar-text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:14px;min-width:70px;text-align:center;font-weight:700}.bk-thumbs{height:var(--flipbook-thumbs-height);background:var(--flipbook-thumbrail-bg);overflow-x:auto;padding:15px;gap:15px;z-index:10;display:flex;flex-shrink:0;align-items:center;border-top:1px solid var(--flipbook-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-nav-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);pointer-events:none;z-index:10;display:flex;justify-content:space-between;padding:0 20px}.bk-nav-arrow{width:48px;height:48px;border-radius:50%;background:var(--flipbook-bg-surface);border:1px solid var(--flipbook-border);box-shadow:0 4px 15px var(--flipbook-shadow);color:var(--flipbook-text-main);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:all .2s ease;opacity:.7}.bk-nav-arrow:hover{opacity:1;background:var(--flipbook-primary);color:#fff;border-color:var(--flipbook-primary);transform:scale(1.1)}.bk-arrow-icon{width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor}.bk-arrow-left{transform:rotate(-135deg);margin-left:4px}.bk-arrow-right{transform:rotate(45deg);margin-right:4px}.bk-watermark{position:absolute;bottom:12px;right:15px;font-size:11px;color:var(--flipbook-text-muted);background:color-mix(in srgb,var(--flipbook-bg-surface) 60%,transparent);padding:4px 10px;border-radius:99px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--flipbook-border);z-index:100;box-shadow:0 2px 10px var(--flipbook-shadow);transition:all .2s ease;pointer-events:auto}.bk-watermark:hover{background:var(--flipbook-bg-surface);color:var(--flipbook-text-main);transform:translateY(-2px)}.bk-watermark a{color:inherit;font-weight:600;text-decoration:none}.bk-thumbs::-webkit-scrollbar{height:6px}.bk-thumbs::-webkit-scrollbar-track{background:var(--flipbook-thumbscroll-track);border-radius:999px}.bk-thumbs::-webkit-scrollbar-thumb{background:var(--flipbook-thumbscroll-thumb);border-radius:999px;transition:background-color .2s ease}.bk-thumbs::-webkit-scrollbar-thumb:hover{background:var(--flipbook-accent)}.thumb-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;opacity:.7;transition:all .2s ease;min-width:60px;flex-shrink:0;gap:5px}.thumb-item:hover{opacity:1;transform:translateY(-2px)}.thumb-item.active{opacity:1}.thumb-item.active .thumb-img-wrapper{border-color:var(--flipbook-accent);box-shadow:0 0 0 2px var(--flipbook-accent),0 4px 12px var(--flipbook-shadow)}.thumb-item.active span{color:var(--flipbook-accent);font-weight:700}.thumb-img-wrapper{width:50px;height:65px;background:var(--flipbook-bg-surface);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 5px var(--flipbook-shadow);transition:all .2s ease}.thumb-img{width:100%;height:100%;object-fit:cover}.thumb-img--split{width:96px;max-width:none;object-fit:cover}.thumb-img--left{object-position:left center}.thumb-img--right{object-position:right center}.thumb-item span{color:var(--flipbook-thumb-text);font-size:11px;margin-top:6px;font-weight:700}.nav-float{position:absolute;z-index:10;background:var(--flipbook-navbutton-bg);border:none;border-radius:999px;width:var(--flipbook-navbutton-size);height:var(--flipbook-navbutton-size);color:var(--flipbook-navbutton-text);font-size:20px;cursor:pointer;transition:background-color .2s ease;top:50%;transform:translateY(-50%)}.nav-float:hover{background:var(--flipbook-accent)}#nav-prev{left:20px}#nav-next{right:20px}.bk-settings-panel{position:absolute;bottom:70px;right:15px;background:var(--flipbook-settings-bg);color:var(--flipbook-settings-text);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-md);padding:15px;display:none;z-index:20;min-width:200px;box-shadow:0 10px 30px var(--flipbook-shadow)}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:14px;margin-bottom:10px}.setting-item:last-child{margin-bottom:0}.bk-empty-state{display:grid;place-items:center;width:100%;min-height:240px;padding:1.5rem;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);border:1px dashed var(--flipbook-border);border-radius:var(--flipbook-radius-md)}.bk-empty-state__title{margin:0;font-size:1.125rem;font-weight:600}.empty-cover{background-color:var(--flipbook-emptycover-bg)!important;box-shadow:none!important}.bk-attribution{position:absolute;bottom:15px;left:15px;background:#0f172abf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:6px 12px;border-radius:var(--flipbook-radius-sm);font-size:11px;text-decoration:none;z-index:20;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px #0006;border:1px solid rgba(255,255,255,.15);transition:all .2s ease;opacity:.85}.bk-attribution:hover{opacity:1;transform:translateY(-2px);box-shadow:0 6px 16px #0009;border-color:var(--flipbook-accent);color:#fff}.bk-attribution-icon{font-size:13px}.bk-attribution-img{height:24px;width:auto;object-fit:contain;display:block}@media (max-width: 768px){:root{--flipbook-toolbar-height: 50px;--flipbook-thumbs-height: 85px;--flipbook-navbutton-size: 35px;--flipbook-page-padding: 12px}.bk-toolbar{padding:0 5px}.bk-btn{padding:0 8px;font-size:12px;height:32px}.bk-btn-group{gap:4px}#bk-page-info{min-width:50px;font-size:12px}.nav-float{font-size:16px}#nav-prev{left:10px}#nav-next{right:10px}.bk-thumbs{padding:10px}.thumb-img{height:45px}.bk-settings-panel{bottom:60px}}.bk-btn.muted{opacity:.5;position:relative}.bk-btn.muted:after{content:"";position:absolute;width:80%;height:2px;background:currentColor;top:50%;left:10%;transform:rotate(-45deg);border-radius:1px}