Book card interaction smooth 7

components/PublicGrid.tsx

@@ -471,6 +471,20 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
     block.style.height = '100%';
     containerRef.current.appendChild(block);
 
+    // HTML mode: each page is a div with an <img> using object-fit:contain so
+    // mixed aspect ratios get letterboxed with white margins (like a real book
+    // page) instead of being stretched to fill the slot.
+    const pageElements = pages.map((url) => {
+      const page = document.createElement('div');
+      page.style.cssText = 'background:#ffffff;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;';
+      const img = document.createElement('img');
+      img.src = url;
+      img.draggable = false;
+      img.style.cssText = 'max-width:100%;max-height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;';
+      page.appendChild(img);
+      return page;
+    });
+
     import('@/lib/page-flip').then(({ PageFlip }) => {
       if (cancelled) return;
       const flip = new PageFlip(block, {
@@ -502,7 +516,7 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
         setPageCount(flip.getPageCount());
       });
 
-      flip.loadFromImages(pages);
+      flip.loadFromHTML(pageElements);
       flipRef.current = flip;
     }).catch(() => {});
 

lib/page-flip/index.d.ts

@@ -33,7 +33,7 @@ export interface PageFlipSettings {
 export class PageFlip {
   constructor(element: HTMLElement, settings: PageFlipSettings);
   loadFromImages(urls: string[]): void;
-  loadFromHtml(elements: HTMLElement[] | NodeListOf<HTMLElement>): void;
+  loadFromHTML(elements: HTMLElement[] | NodeListOf<HTMLElement>): void;
   flipNext(): void;
   flipPrev(): void;
   destroy(): void;