Book card interaction smooth 5

components/PublicGrid.tsx

@@ -446,7 +446,7 @@ function playFlipSound(ctx: AudioContext | null) {
 
 function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void }) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const flipRef = useRef<import('page-flip').PageFlip | null>(null);
+  const flipRef = useRef<import('@/lib/page-flip').PageFlip | null>(null);
   const audioRef = useRef<AudioContext | null>(null);
   const [currentPage, setCurrentPage] = useState(0);
   const [pageCount, setPageCount] = useState(pages.length);
@@ -471,7 +471,7 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
     block.style.height = '100%';
     containerRef.current.appendChild(block);
 
-    import('page-flip').then(({ PageFlip }) => {
+    import('@/lib/page-flip').then(({ PageFlip }) => {
       if (cancelled) return;
       const flip = new PageFlip(block, {
         width: 550,

lib/page-flip/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Nodlik
+
+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.

lib/page-flip/index.d.ts

@@ -0,0 +1,45 @@
+// Type declarations for the vendored page-flip ESM bundle (./index.js).
+// Library: https://github.com/Nodlik/StPageFlip — MIT, vendored at v2.0.7.
+
+export interface FlipEvent {
+  data: unknown;
+  object: PageFlip;
+}
+
+export interface PageFlipSettings {
+  startPage?: number;
+  size?: 'fixed' | 'stretch';
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  drawShadow?: boolean;
+  flippingTime?: number;
+  usePortrait?: boolean;
+  startZIndex?: number;
+  autoSize?: boolean;
+  maxShadowOpacity?: number;
+  showCover?: boolean;
+  mobileScrollSupport?: boolean;
+  clickEventForward?: boolean;
+  useMouseEvents?: boolean;
+  swipeDistance?: number;
+  showPageCorners?: boolean;
+  disableFlipByClick?: boolean;
+}
+
+export class PageFlip {
+  constructor(element: HTMLElement, settings: PageFlipSettings);
+  loadFromImages(urls: string[]): void;
+  loadFromHtml(elements: HTMLElement[] | NodeListOf<HTMLElement>): void;
+  flipNext(): void;
+  flipPrev(): void;
+  destroy(): void;
+  update(): void;
+  getCurrentPageIndex(): number;
+  getPageCount(): number;
+  on(event: 'flip' | 'init' | 'update' | 'changeOrientation' | 'changeState', cb: (e: FlipEvent) => void): void;
+  off(event: string, cb: (e: FlipEvent) => void): void;
+}

next.config.ts

@@ -2,7 +2,6 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   allowedDevOrigins: ['10.210.1.225'],
-  transpilePackages: ['page-flip'],
 };
 
 export default nextConfig;

package-lock.json

@@ -11,7 +11,6 @@
       "dependencies": {
         "geist": "^1.4.2",
         "next": "16.2.4",
-        "page-flip": "^2.0.7",
         "pdfjs-dist": "^4.7.76",
         "react": "19.2.4",
         "react-dom": "19.2.4"
@@ -5520,12 +5519,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/page-flip": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/page-flip/-/page-flip-2.0.7.tgz",
-      "integrity": "sha512-96lQFUUz7r/LZzEUZJ3yBIMEKU9+m8HMFDzTvTdD6P7Ag/wXINjp9n0W7b4wanwnDbQETo4uNUoL3zMqpFxwGA==",
-      "license": "MIT"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",

package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "geist": "^1.4.2",
     "next": "16.2.4",
-    "page-flip": "^2.0.7",
     "pdfjs-dist": "^4.7.76",
     "react": "19.2.4",
     "react-dom": "19.2.4"

types/page-flip.d.ts

@@ -1,45 +0,0 @@
-declare module 'page-flip' {
-  export interface FlipEvent {
-    data: unknown;
-    object: PageFlip;
-  }
-
-  export interface PageFlipSettings {
-    startPage?: number;
-    size?: 'fixed' | 'stretch';
-    width?: number;
-    height?: number;
-    minWidth?: number;
-    maxWidth?: number;
-    minHeight?: number;
-    maxHeight?: number;
-    drawShadow?: boolean;
-    flippingTime?: number;
-    usePortrait?: boolean;
-    startZIndex?: number;
-    autoSize?: boolean;
-    maxShadowOpacity?: number;
-    showCover?: boolean;
-    mobileScrollSupport?: boolean;
-    clickEventForward?: boolean;
-    useMouseEvents?: boolean;
-    swipeDistance?: number;
-    showPageCorners?: boolean;
-    disableFlipByClick?: boolean;
-  }
-
-  export class PageFlip {
-    constructor(element: HTMLElement, settings: PageFlipSettings);
-    loadFromImages(urls: string[]): void;
-    loadFromHtml(elements: HTMLElement[] | NodeListOf<HTMLElement>): void;
-    flipNext(): void;
-    flipPrev(): void;
-    destroy(): void;
-    update(): void;
-    getCurrentPageIndex(): number;
-    getPageCount(): number;
-    on(event: 'flip' | 'init' | 'update' | 'changeOrientation' | 'changeState', cb: (e: FlipEvent) => void): void;
-    off(event: string, cb: (e: FlipEvent) => void): void;
-  }
-}
-