load 5 pages first

src/pages/viewer/components/BookPage.tsx

@@ -30,6 +30,10 @@ type BookPageProps = {
   entrancePhase?: EntrancePhase;
   /** در پیش‌نمایش کاتالوگ انیمیشن ورود غیرفعال باشد */
   disableEntranceAnimations?: boolean;
+  /** سایهٔ لبهٔ کاغذ (گرادیان داخل DOM — سازگار با iOS قدیمی) */
+  showPaperShadow?: boolean;
+  /** ورق سخت به‌جای clip-path برای iOS قدیمی */
+  useHardPage?: boolean;
 };
 
 /**
@@ -40,7 +44,7 @@ type BookPageProps = {
  * نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
  */
 const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
-  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, entrancePhase = 'idle', disableEntranceAnimations = false }, ref) => {
+  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, entrancePhase = 'idle', disableEntranceAnimations = false, showPaperShadow = true, useHardPage = false }, ref) => {
     const phase: EntrancePhase = disableEntranceAnimations ? 'settled' : entrancePhase;
     // تابع برای تبدیل opacity به رنگ (مثل editor)
     // در editor، getColorWithOpacity انتظار opacity 0-100 دارد
@@ -646,30 +650,36 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
         ref={ref}
         dir="rtl"
         className="page"
-        data-density="soft"
+        data-density={useHardPage ? 'hard' : 'soft'}
         style={{
           position: 'relative',
           overflow: 'hidden',
           boxSizing: 'border-box',
           width: `${width}px`,
           height: `${height}px`,
-          isolation: 'isolate',
+          isolation: useHardPage ? undefined : 'isolate',
           zIndex: 1,
+          ...(useHardPage
+            ? { backgroundColor: effectiveBackgroundColor, ...bgStyle }
+            : {}),
         }}
       >
-        <div
-          aria-hidden
-          style={{
-            position: 'absolute',
-            inset: 0,
-            ...bgStyle,
-            pointerEvents: 'none',
-            zIndex: 0,
-          }}
-        />
+        {!useHardPage && (
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              inset: 0,
+              ...bgStyle,
+              pointerEvents: 'none',
+              zIndex: 0,
+            }}
+          />
+        )}
         <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
           {page.elements.map((element, index) => renderObject(element, index))}
         </div>
+        {useHardPage && showPaperShadow && <div aria-hidden className="page-paper-shadow" />}
       </div>
     );
   });