flipbookengine 0.0.1 → 0.1.2

package/README.md

@@ -1,3 +1,160 @@
-# flipbookengine
-
-This package name is currently reserved for an active project in development. The initial version will be published soon.
+# FlipbookEngine
+
+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.
+
+## Highlights
+
+- **Dual-Mode Layout**: Seamlessly switches between single-page (mobile-optimized) and spread (book/catalog layout) modes.
+- **Rich Interaction**: Built-in thumbnail navigation rail, smooth zoom & pan, and HTML5 fullscreen support.
+- **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).
+- **Multi-Language (i18n)**: Out-of-the-box support for English (`en`) and Turkish (`tr`) with customizable overrides.
+- **Framework Wrappers**: Direct React and Vue wrapper exports for seamless modern integration.
+
+## Installation
+
+Install via npm:
+
+```bash
+npm install flipbookengine
+```
+
+For direct CDN usage in the browser (Vanilla HTML/JS):
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/flipbookengine/dist/flipbook-engine.css" />
+<script src="https://unpkg.com/flipbookengine/dist/flipbook-engine.iife.js"></script>
+```
+
+## Quick Start
+
+### Vanilla HTML / JS
+
+Include the styles and script, then initialize the engine:
+
+```html
+<div id="viewer" style="width: 100%; height: 600px;"></div>
+
+<script>
+  const engine = new FlipbookEngine('#viewer', {
+    allowDownload: true,
+    showThumbs: true,
+    primaryColor: '#7367f0',
+    theme: 'auto',
+    locale: 'en'
+  });
+
+  engine.init('/files/catalog.pdf', [
+    { kind: 'cover', pageNumber: 1, normal: '/img/1.jpg', low: '/img/1-low.jpg', thumb: '/img/1-thumb.jpg' },
+    { kind: 'spread', pageNumbers: [2, 3], normal: '/img/2-3.jpg', low: '/img/2-3-low.jpg', thumb: '/img/2-3-thumb.jpg' }
+  ]);
+</script>
+```
+
+### React
+
+```tsx
+import React, { useRef } from 'react';
+import { Flipbook, FlipbookRef } from 'flipbookengine/react';
+import 'flipbookengine/dist/flipbook-engine.css';
+
+function CatalogViewer() {
+  const flipbookRef = useRef<FlipbookRef>(null);
+
+  const handleNextPage = () => {
+    flipbookRef.current?.goToPage(flipbookRef.current.getCurrentPage() + 1);
+  };
+
+  return (
+    <Flipbook
+      ref={flipbookRef}
+      pdfUrl="/files/catalog.pdf"
+      pages={[
+        { kind: 'cover', pageNumber: 1, normal: '/img/1.jpg', low: '/img/1-low.jpg', thumb: '/img/1-thumb.jpg' },
+        { kind: 'spread', pageNumbers: [2, 3], normal: '/img/2-3.jpg', low: '/img/2-3-low.jpg', thumb: '/img/2-3-thumb.jpg' }
+      ]}
+      allowDownload={true}
+      showThumbs={true}
+      primaryColor="#7367f0"
+    />
+  );
+}
+```
+
+### Vue 3
+
+```vue
+<template>
+  <Flipbook
+    pdfUrl="/files/catalog.pdf"
+    :pages="pages"
+    :allowDownload="true"
+    :showThumbs="true"
+    primaryColor="#7367f0"
+  />
+</template>
+
+<script setup>
+import { Flipbook } from 'flipbookengine/vue';
+import 'flipbookengine/dist/flipbook-engine.css';
+
+const pages = [
+  { kind: 'cover', pageNumber: 1, normal: '/img/1.jpg', low: '/img/1-low.jpg', thumb: '/img/1-thumb.jpg' },
+  { kind: 'spread', pageNumbers: [2, 3], normal: '/img/2-3.jpg', low: '/img/2-3-low.jpg', thumb: '/img/2-3-thumb.jpg' }
+];
+</script>
+```
+
+## Public API Reference
+
+The `FlipbookEngine` class exposes the following public methods:
+
+- **`init(pdfUrl: string, imageList?: FlipbookPageAsset[])`**: Initializes the viewer and loads the flipbook with pages.
+- **`goToPage(pageIndex: number)`**: Navigates programmatically to a 0-based page index.
+- **`getCurrentPage()`**: Returns the 0-based index of the currently active page.
+- **`getTotalPages()`**: Returns the total number of pages.
+- **`getZoom()`**: Returns the current zoom level (default is `1`).
+- **`setZoom(zoomLevel: number)`**: Programmatically sets the zoom level (accepts values between `0.5` and `5`).
+- **`setSingleMode(isSingle: boolean)`**: Programmatically toggles between single-page mode (`true`) and double-page spread mode (`false`).
+- **`toggleFullscreen()`**: Programmatically toggles fullscreen mode.
+- **`updateOptions(options: Partial<FlipbookEngineOptions>)`**: Updates instance options at runtime.
+- **`setLocale(locale: string, messages?: PartialFlipbookMessages)`**: Updates the locale programmatically.
+- **`destroy(clearMarkup = true)`**: Tears down the instance and clean up DOM listeners.
+
+### Subscribing to Events
+
+You can subscribe to events using `.on()`:
+
+```ts
+const unsubscribe = engine.on('pageChange', ({ currentPage, totalPages, isSingle }) => {
+  console.log('Page Changed:', currentPage, 'Total:', totalPages);
+});
+
+// To unsubscribe:
+unsubscribe();
+```
+
+Supported events: `pageChange`, `zoomChange`, `singlePageModeChange`, `thumbsToggle`, `destroy`.
+
+## Styling and Theming
+
+FlipbookEngine features fully custom-property-based styling compatible with modern styling systems.
+
+### Global CSS Variables
+
+```css
+:root {
+  --mainbgcolor: #f3f6fb;
+  --panelbgcolor: #172033;
+  --accentcolor: #7367f0;
+  --thumbrailbgcolor: #0f172a;
+}
+```
+
+## Licensing
+
+FlipbookEngine is distributed under a dual-license model:
+
+- **Open Source**: GNU Affero General Public License v3.0 or later (see [LICENSE](./LICENSE)).
+- **Commercial**: For use in closed-source projects, proprietary SaaS platforms, or agency client deliveries (see [COMMERCIAL_LICENSE.md](./COMMERCIAL_LICENSE.md)).
+
+For commercial licenses and inquiries, contact: **murat.dogan@hotmail.com.tr**

package/THIRD-PARTY-NOTICES.md

@@ -0,0 +1,61 @@
+# Third-Party Notices
+
+This file contains the licenses of the third-party libraries used in the FlipbookEngine project.
+
+## Runtime Dependencies
+
+### 1. PDF.js (pdfjs-dist)
+- **Website:** https://mozilla.github.io/pdf.js/
+- **Repository:** https://github.com/mozilla/pdf.js
+- **License:** Apache License 2.0
+
+```text
+Copyright 2012 Mozilla Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+```
+
+---
+
+### 2. page-flip
+- **Website:** https://nodlik.github.io/StPageFlip/
+- **Repository:** https://github.com/Nodlik/StPageFlip
+- **License:** MIT License
+
+```text
+The MIT License (MIT)
+Copyright (c) 2020 Oleg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```
+
+---
+
+## Development Dependencies
+
+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/TRADEMARK_POLICY.md

@@ -0,0 +1,50 @@
+# FlipbookEngine Trademark Policy
+
+This policy governs use of the FlipbookEngine name, logos, and brand assets.
+
+## Covered Marks
+
+The following are treated as protected brand assets:
+
+- FlipbookEngine
+- FlipbookEngine logos
+- any official product lockups, icons, and visual identity files distributed with the project
+
+## What the Open Source License Does Not Grant
+
+The AGPL license applies to source code, not to trademark rights.
+
+Using the FlipbookEngine code does not automatically grant permission to:
+
+- present your product as the official FlipbookEngine product
+- use FlipbookEngine logos in your own branding
+- imply sponsorship, certification, or endorsement
+- register confusingly similar names, domains, or product marks
+
+## Allowed Uses
+
+Unless otherwise stated, you may:
+
+- refer to FlipbookEngine by name in factual descriptions
+- state that your project uses or is powered by FlipbookEngine
+- link to the official project and documentation
+
+## Uses That Require Permission
+
+You must get permission before:
+
+- using official logos in a product UI or marketing page
+- using FlipbookEngine as part of your own product or company name
+- presenting your fork as the official project
+- using the marks in paid advertising or marketplace listings
+
+## Open Source Attribution
+
+Attribution is appreciated in open source projects, but trademark permission is still separate from code licensing.
+
+## Contact
+
+Trademark and brand permission inquiries:
+
+- murat.dogan@hotmail.com.tr
+

package/dist/engine.d.ts

@@ -0,0 +1,128 @@
+import { FlipbookThemeMode } from './theme/theme';
+import { FlipbookLocale, PartialFlipbookMessages } from './i18n/service';
+import { FlipbookPageAsset } from './model/pages';
+
+export interface FlipbookEngineOptions {
+    allowDownload?: boolean;
+    showThumbs?: boolean;
+    primaryColor?: string;
+    soundEnabled?: boolean;
+    soundUrl?: string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    whiteLabel?: boolean;
+    watermarkUrl?: string;
+    theme?: FlipbookThemeMode;
+    locale?: FlipbookLocale | string;
+    messages?: Partial<Record<string, PartialFlipbookMessages>>;
+    className?: string;
+    cssVariables?: Record<string, string>;
+    onDownload?: (url: string) => void;
+}
+export interface PageImages extends FlipbookPageAsset {
+    pageNumber: number;
+    normal: string;
+    low: string;
+    thumb: string;
+}
+export interface FlipbookEngineEventMap {
+    init: {
+        totalPages: number;
+    };
+    destroy: undefined;
+    pageChange: {
+        currentPage: number;
+        pageNumber: number;
+        totalPages: number;
+        isSingle: boolean;
+    };
+    zoomChange: {
+        zoom: number;
+        isActive: boolean;
+    };
+    thumbsToggle: {
+        showThumbs: boolean;
+    };
+    singlePageModeChange: {
+        isSingle: boolean;
+    };
+    orientationChange: {
+        orientation: 'landscape' | 'portrait';
+    };
+}
+export type FlipbookEngineEventName = keyof FlipbookEngineEventMap;
+type FlipbookEventHandler<T extends FlipbookEngineEventName> = (payload: FlipbookEngineEventMap[T]) => void;
+export declare class FlipbookEngine {
+    private selector;
+    private options;
+    private static readonly DEFAULT_PAGE_VIEWPORT;
+    private container;
+    private ui;
+    private pageFlip;
+    private sourceAssets;
+    private pages;
+    private downloadUrl;
+    private totalPages;
+    private pageViewport;
+    private pdfDoc;
+    private pdfPagesCache;
+    private currentZoom;
+    private zoomState;
+    private messages;
+    private listeners;
+    private domEventController;
+    private orientationMediaQuery;
+    private orientationChangeHandler;
+    private initialized;
+    private state;
+    private touchStartX;
+    constructor(selector: string | HTMLElement, options?: FlipbookEngineOptions);
+    init(pdfUrl: string, imageList?: Array<PageImages | FlipbookPageAsset>): Promise<void>;
+    on<T extends FlipbookEngineEventName>(eventName: T, handler: FlipbookEventHandler<T>): () => void;
+    off<T extends FlipbookEngineEventName>(eventName: T, handler: FlipbookEventHandler<T>): void;
+    getCurrentPage(): number;
+    getTotalPages(): number;
+    getLocale(): string;
+    goToPage(targetIdx: number): void;
+    getZoom(): number;
+    setZoom(zoomLevel: number): void;
+    toggleFullscreen(): void;
+    destroy(clearMarkup?: boolean): void;
+    updateOptions(nextOptions: Partial<FlipbookEngineOptions>): void;
+    setLocale(locale: FlipbookLocale | string, messages?: PartialFlipbookMessages): void;
+    setPages(imageList: Array<PageImages | FlipbookPageAsset>, pdfUrl?: string): void;
+    private buildUI;
+    private mountViewer;
+    private renderEmptyState;
+    private teardownMountedViewer;
+    private setResolvedPages;
+    private resolvePageViewport;
+    private loadImageSize;
+    private setupOrientationHandling;
+    private teardownRuntimeBindings;
+    private getEventSignal;
+    private playSound;
+    private applyThemeConfiguration;
+    private renderPagesIntoDOM;
+    private initPageFlip;
+    private createPageImage;
+    private createThumbnailImage;
+    private ensurePageSrc;
+    private getPageImageClassName;
+    private getThumbnailImageClassName;
+    setSingleMode(isSingle: boolean): void;
+    private updateSingleView;
+    private syncUI;
+    private goNext;
+    private goPrev;
+    private loadHighResForVisiblePages;
+    private bindEvents;
+    private handleDragStart;
+    private handleDragMove;
+    private handleDragEnd;
+    private updateTransform;
+    private emit;
+    private emitPageChange;
+    private emitZoomChange;
+}
+export {};

package/dist/flipbook-engine.css

@@ -0,0 +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)}.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)}.bk-main-area{flex:1;position:relative;overflow:hidden;width:100%;min-height:0;background:var(--flipbook-bg-main)}#bk-book-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--flipbook-page-padding);display:flex;justify-content:center;align-items:center;transition:transform .3s ease;transform-origin:center center}#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{width:100%;height:100%;box-shadow:0 0 20px var(--flipbook-shadow)}#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}.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}.bk-btn-group{display:flex;gap:8px;align-items:center}.bk-btn-group--center{flex-grow:1;justify-content:center}.bk-btn{background:color-mix(in srgb,var(--flipbook-bg-surface) 18%,transparent 82%);border:1px solid color-mix(in srgb,var(--flipbook-border) 80%,transparent 20%);color:var(--flipbook-toolbar-button-text);padding:0 15px;height:38px;border-radius:var(--flipbook-radius-sm);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.bk-btn:hover,.bk-btn.active{background:var(--flipbook-accent);border-color:var(--flipbook-accent);color:var(--flipbook-accent-text)}.bk-btn:focus-visible,.thumb-item:focus-visible,.nav-float:focus-visible{outline:2px solid var(--flipbook-accent);outline-offset:2px}.bk-btn--download{background:var(--flipbook-download-bg);border-color:var(--flipbook-download-border);color:var(--flipbook-download-text)}#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;flex-shrink:0;align-items:center;border-top:1px solid var(--flipbook-border)}.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:.68;transition:opacity .2s ease,transform .2s ease;flex-shrink:0;color:var(--flipbook-thumb-text)}.thumb-item:hover,.thumb-item.active{opacity:1}.thumb-item.active img{border-color:var(--flipbook-accent);transform:scale(1.05);box-shadow:0 0 15px color-mix(in srgb,var(--flipbook-accent) 45%,transparent 55%)}.thumb-img{height:60px;width:auto;border:2px solid transparent;border-radius:var(--flipbook-radius-sm);background:var(--flipbook-thumb-bg);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.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}}