border z-index than paper

src/pages/viewer/components/BookViewer.tsx

@@ -131,6 +131,8 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
   const [isAutoPlayActive, setIsAutoPlayActive] = useState(false);
   const [startPage, setStartPage] = useState(0);
   const [magnifierEnabled, setMagnifierEnabled] = useState(false);
+  /** در حالت read خط وسط روی شکاف جلد دیده می‌شود؛ هنگام ورق‌زدن باید زیر ورق باشد */
+  const [isBookFlipping, setIsBookFlipping] = useState(false);
   const isDesktop = useIsDesktop();
   const legacyIOS = useLegacyIOSSafari();
   const isBrowserFullscreen = useIsBrowserFullscreen();
@@ -390,9 +392,13 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
   /** بعد از اتمام انیمیشن ورق، ایندکس واقعی کتاب را می‌گیریم و انیمیشن ورود را یک‌بار شروع می‌کنیم */
   const handleChangeState = useCallback(
     (e: PageFlipStateEvent) => {
-      if (e.data !== "read") return;
+      if (e.data === "read") {
+        setIsBookFlipping(false);
         syncPageIndexFromBook();
         commitEntranceAtCurrentSpread();
+        return;
+      }
+      setIsBookFlipping(true);
     },
     [syncPageIndexFromBook, commitEntranceAtCurrentSpread],
   );
@@ -527,7 +533,10 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
           {/* Border و Shadow عمودی در وسط (فقط حالت دوصفحه‌ای دسکتاپ) */}
           {!usePortrait && (
             <div
-              className="hidden md:block absolute inset-y-0 left-1/2 -translate-x-1/2 w-px border-r border-gray-300 pointer-events-none z-50"
+              className={clx(
+                "hidden md:block absolute inset-y-0 left-1/2 -translate-x-1/2 w-px border-r border-gray-300 pointer-events-none transition-none",
+                isBookFlipping ? "z-0" : "z-50",
+              )}
               style={{
                 boxShadow: "-5px 0 15px rgba(0, 0, 0, 0.15), 5px 0 15px rgba(0, 0, 0, 0.15)",
               }}
@@ -540,7 +549,10 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
           <div
             ref={flipbookWrapperRef}
             dir="ltr"
-            className="max-w-full flex justify-center shrink-0 rounded-sm"
+            className={clx(
+              "max-w-full flex justify-center shrink-0 rounded-sm",
+              isBookFlipping && "relative z-10",
+            )}
             style={{
               cursor: magnifierEnabled ? "zoom-in" : undefined,
               overflow: "hidden",