@papyrus-sdk/ui-react-native 0.2.28 → 0.2.30

package/dist/index.mjs

@@ -25757,12 +25757,17 @@ var shouldEnableViewerScrollForPageScrub = ({
   isScrubbing
 }) => viewerScrollEnabled && !isScrubbing;
 var resolvePageScrubberTouchPolicy = () => ({
-  responderTarget: "pill",
+  responderTarget: "track",
   claimOnStart: true,
   captureOnStart: true,
   captureOnMove: true,
   childConsumesTouch: false
 });
+var resolvePageScrubberOverlayStyle = () => ({
+  zIndex: 30,
+  elevation: 30
+});
+var resolvePageScrubberPointerEvents = () => "box-only";
 var resolvePageScrubberReleaseAction = ({
   hasMoved,
   pendingPage
@@ -25826,6 +25831,23 @@ var resolvePageScrubberPage = ({
     Math.min(pageCount, Math.round(ratio * (pageCount - 1)) + 1)
   );
 };
+var isPageScrubberTrackYTrusted = (trackY, windowHeight) => Number.isFinite(trackY) && Number.isFinite(windowHeight) && trackY >= 0 && trackY <= windowHeight;
+var resolvePageScrubberGesturePosition = ({
+  moveY,
+  dy,
+  trackY,
+  windowHeight,
+  trackHeight,
+  thumbHeight,
+  startThumbTop
+}) => {
+  if (isPageScrubberTrackYTrusted(trackY, windowHeight)) {
+    return moveY - trackY;
+  }
+  const travel = Math.max(0, trackHeight - thumbHeight);
+  const nextThumbTop = Math.max(0, Math.min(travel, startThumbTop + dy));
+  return nextThumbTop + thumbHeight / 2;
+};
 
 // components/viewerNavigation.ts
 var resolveViewerScrollTarget = (pageIndex, isDouble) => ({
@@ -25880,6 +25902,15 @@ var resolvePositiveInt = (value, fallback, min, max) => {
   const rounded = Math.round(value);
   return Math.max(min, Math.min(max, rounded));
 };
+var scrollViewerListToOffset = (list, offset, animated) => {
+  if (list === null) return;
+  const nativeScrollRef = list.getNativeScrollRef?.();
+  if (nativeScrollRef?.scrollTo) {
+    nativeScrollRef.scrollTo({ y: offset, animated });
+    return;
+  }
+  list.scrollToOffset?.({ offset, animated });
+};
 var Viewer = ({
   engine,
   virtualWindowSize,
@@ -25952,6 +25983,7 @@ var Viewer = ({
   const pendingScrollTimeoutRef = useRef4(
     null
   );
+  const pendingScrollFrameRef = useRef4(null);
   const pendingChromeShowTimeoutRef = useRef4(null);
   const chromeVisibleRef = useRef4(mobileChromeVisible);
   const lastScrollOffsetYRef = useRef4(0);
@@ -25959,6 +25991,7 @@ var Viewer = ({
   const scrollUpAccumRef = useRef4(0);
   const [layoutRevision, setLayoutRevision] = useState4(0);
   const [selectionDragActive, setSelectionDragActive] = useState4(false);
+  const [programmaticScrollActive, setProgrammaticScrollActive] = useState4(false);
   const selectionDragActiveRef = useRef4(false);
   const [gestureScrollLockActive, setGestureScrollLockActive] = useState4(false);
   const gestureScrollLockActiveRef = useRef4(false);
@@ -26053,6 +26086,7 @@ var Viewer = ({
     pendingScrollTargetRef.current = null;
     pendingScrollAttemptsRef.current = 0;
     clearPendingScrollRetry();
+    setProgrammaticScrollActive(false);
   }, [clearPendingScrollRetry]);
   const clearPendingChromeShow = useCallback3(() => {
     if (pendingChromeShowTimeoutRef.current) {
@@ -26107,6 +26141,10 @@ var Viewer = ({
         cancelAnimationFrame(pinchAnchorRestoreFrameRef.current);
       }
       clearPendingScrollRetry();
+      if (pendingScrollFrameRef.current !== null) {
+        cancelAnimationFrame(pendingScrollFrameRef.current);
+        pendingScrollFrameRef.current = null;
+      }
       clearPendingChromeShow();
     },
     [clearPendingChromeShow, clearPendingScrollRetry]
@@ -26960,12 +26998,20 @@ var Viewer = ({
     (animated) => {
       const target = pendingScrollTargetRef.current;
       if (target === null || listRef.current === null) return;
-      listRef.current.scrollToOffset({
-        offset: Math.max(0, getFallbackOffsetForIndex(target.listIndex)),
-        animated
+      setViewerScrollEnabledNative(true);
+      if (pendingScrollFrameRef.current !== null) {
+        cancelAnimationFrame(pendingScrollFrameRef.current);
+      }
+      pendingScrollFrameRef.current = requestAnimationFrame(() => {
+        pendingScrollFrameRef.current = null;
+        const nextTarget = pendingScrollTargetRef.current;
+        const list = listRef.current;
+        if (nextTarget === null || list === null) return;
+        const offset = getFallbackOffsetForIndex(nextTarget.listIndex);
+        scrollViewerListToOffset(list, offset, animated);
       });
     },
-    [getFallbackOffsetForIndex]
+    [getFallbackOffsetForIndex, setViewerScrollEnabledNative]
   );
   const restoreOrientationScrollOffset = useCallback3(() => {
     if (pendingOrientationRestoreWidthRef.current !== windowWidth || pageCount <= 0 || isSingle || isWebView) {
@@ -27064,6 +27110,7 @@ var Viewer = ({
     const target = resolveViewerScrollTarget(scrollToPageSignal, isDouble);
     pendingScrollTargetRef.current = target;
     pendingScrollAttemptsRef.current = 0;
+    setProgrammaticScrollActive(true);
     clearPendingScrollRetry();
     setDocumentStateTracked(
       {
@@ -27319,6 +27366,89 @@ var Viewer = ({
       windowWidth
     ]
   );
+  const continuousList = /* @__PURE__ */ jsx6(
+    FlatList,
+    {
+      ref: listRef,
+      nestedScrollEnabled: true,
+      data: isDouble ? rows : pages,
+      style: { width: documentSurfaceWidth },
+      initialNumToRender: FLATLIST_INITIAL_NUM_TO_RENDER,
+      windowSize: resolvedWindowSize,
+      maxToRenderPerBatch: resolvedMaxToRenderPerBatch,
+      updateCellsBatchingPeriod: FLATLIST_UPDATE_CELLS_BATCHING_PERIOD,
+      removeClippedSubviews: resolvedRemoveClippedSubviews,
+      getItemLayout,
+      keyExtractor,
+      contentContainerStyle: styles4.listContent,
+      renderItem,
+      onViewableItemsChanged,
+      viewabilityConfig: { itemVisiblePercentThreshold: 60 },
+      scrollEnabled: pageScrubResolvedScrollEnabled || programmaticScrollActive,
+      onLayout: () => {
+        captureViewerFrame(listRef.current);
+        restoreOrientationScrollOffset();
+        scrollToPendingTarget(false);
+      },
+      onContentSizeChange: (_, height) => {
+        viewerContentHeightRef.current = height;
+        scrollToPendingTarget(false);
+      },
+      onScrollToIndexFailed: ({ index, averageItemLength }) => {
+        const dataLength = isDouble ? rows.length : pages.length;
+        if (index < 0 || index >= dataLength) return;
+        const existingTarget = pendingScrollTargetRef.current;
+        pendingScrollTargetRef.current = isDouble ? existingTarget?.listIndex === index ? existingTarget : resolveViewerScrollTarget(rows[index]?.left ?? index * 2, true) : resolveViewerScrollTarget(index, false);
+        const offset = Math.max(0, getFallbackOffsetForIndex(index));
+        scrollViewerListToOffset(listRef.current, offset, false);
+        if (!isDouble) {
+          ensurePageDimensions(index);
+        } else {
+          const row = rows[index];
+          if (row) {
+            ensurePageDimensions(row.left);
+            if (row.right !== null) {
+              ensurePageDimensions(row.right);
+            }
+          }
+        }
+        scheduleScrollRetry("onScrollToIndexFailed");
+        if (perfEnabled) {
+          logPerfEvent("Viewer", "scrollToIndexFailed", {
+            index,
+            averageItemLength,
+            fallbackOffset: offset,
+            fallbackSource: "cached-item-layout",
+            itemCount: dataLength,
+            retryAttempt: pendingScrollAttemptsRef.current
+          });
+        }
+      },
+      onScroll: (event) => handleViewerScroll(event, "continuous"),
+      onScrollBeginDrag: perfEnabled ? () => {
+        scrollMonitorRef.current.begin("continuous.beginDrag");
+      } : void 0,
+      onMomentumScrollBegin: perfEnabled ? () => {
+        scrollMonitorRef.current.begin("continuous.momentumBegin");
+      } : void 0,
+      onScrollEndDrag: perfEnabled ? () => {
+        scrollMonitorRef.current.end("continuous.endDrag");
+        endViewerScroll("continuous.endDrag");
+        sampleMemory("Viewer", "continuous.endDrag", {
+          pageCount
+        });
+      } : void 0,
+      onMomentumScrollEnd: perfEnabled ? () => {
+        scrollMonitorRef.current.end("continuous.momentumEnd");
+        endViewerScroll("continuous.momentumEnd");
+        sampleMemory("Viewer", "continuous.momentumEnd", {
+          pageCount
+        });
+      } : void 0,
+      scrollEventThrottle: 16,
+      showsVerticalScrollIndicator: false
+    }
+  );
   if (isWebView) {
     return /* @__PURE__ */ jsx6(View4, { style: [styles4.container, isDark && styles4.containerDark], children: /* @__PURE__ */ jsx6(
       WebViewViewer_default,
@@ -27353,6 +27483,7 @@ var Viewer = ({
           {
             ref: horizontalScrollRef,
             horizontal: true,
+            nestedScrollEnabled: true,
             scrollEnabled: !gestureScrollLockActive && !pageScrubActive && documentSurfaceWidth > windowWidth,
             showsHorizontalScrollIndicator: false,
             onScroll: (event) => {
@@ -27437,101 +27568,21 @@ var Viewer = ({
           ]
         }
       ],
-      children: /* @__PURE__ */ jsx6(
+      children: documentSurfaceWidth > windowWidth + 1 ? /* @__PURE__ */ jsx6(
         ScrollView,
         {
           ref: horizontalScrollRef,
           horizontal: true,
-          scrollEnabled: !gestureScrollLockActive && !pageScrubActive && documentSurfaceWidth > windowWidth,
+          nestedScrollEnabled: true,
+          scrollEnabled: !gestureScrollLockActive && !pageScrubActive,
           showsHorizontalScrollIndicator: false,
           onScroll: (event) => {
             horizontalScrollOffsetRef.current = event.nativeEvent.contentOffset?.x ?? 0;
           },
           scrollEventThrottle: 16,
-          children: /* @__PURE__ */ jsx6(
-            FlatList,
-            {
-              ref: listRef,
-              data: isDouble ? rows : pages,
-              style: { width: documentSurfaceWidth },
-              initialNumToRender: FLATLIST_INITIAL_NUM_TO_RENDER,
-              windowSize: resolvedWindowSize,
-              maxToRenderPerBatch: resolvedMaxToRenderPerBatch,
-              updateCellsBatchingPeriod: FLATLIST_UPDATE_CELLS_BATCHING_PERIOD,
-              removeClippedSubviews: resolvedRemoveClippedSubviews,
-              getItemLayout,
-              keyExtractor,
-              contentContainerStyle: styles4.listContent,
-              renderItem,
-              onViewableItemsChanged,
-              viewabilityConfig: { itemVisiblePercentThreshold: 60 },
-              scrollEnabled: pageScrubResolvedScrollEnabled,
-              onLayout: () => {
-                captureViewerFrame(listRef.current);
-                restoreOrientationScrollOffset();
-                scrollToPendingTarget(false);
-              },
-              onContentSizeChange: (_, height) => {
-                viewerContentHeightRef.current = height;
-                scrollToPendingTarget(false);
-              },
-              onScrollToIndexFailed: ({ index, averageItemLength }) => {
-                const dataLength = isDouble ? rows.length : pages.length;
-                if (index < 0 || index >= dataLength) return;
-                const existingTarget = pendingScrollTargetRef.current;
-                pendingScrollTargetRef.current = isDouble ? existingTarget?.listIndex === index ? existingTarget : resolveViewerScrollTarget(rows[index]?.left ?? index * 2, true) : resolveViewerScrollTarget(index, false);
-                const offset = Math.max(0, getFallbackOffsetForIndex(index));
-                listRef.current?.scrollToOffset({ offset, animated: false });
-                if (!isDouble) {
-                  ensurePageDimensions(index);
-                } else {
-                  const row = rows[index];
-                  if (row) {
-                    ensurePageDimensions(row.left);
-                    if (row.right !== null) {
-                      ensurePageDimensions(row.right);
-                    }
-                  }
-                }
-                scheduleScrollRetry("onScrollToIndexFailed");
-                if (perfEnabled) {
-                  logPerfEvent("Viewer", "scrollToIndexFailed", {
-                    index,
-                    averageItemLength,
-                    fallbackOffset: offset,
-                    fallbackSource: "cached-item-layout",
-                    itemCount: dataLength,
-                    retryAttempt: pendingScrollAttemptsRef.current
-                  });
-                }
-              },
-              onScroll: (event) => handleViewerScroll(event, "continuous"),
-              onScrollBeginDrag: perfEnabled ? () => {
-                scrollMonitorRef.current.begin("continuous.beginDrag");
-              } : void 0,
-              onMomentumScrollBegin: perfEnabled ? () => {
-                scrollMonitorRef.current.begin("continuous.momentumBegin");
-              } : void 0,
-              onScrollEndDrag: perfEnabled ? () => {
-                scrollMonitorRef.current.end("continuous.endDrag");
-                endViewerScroll("continuous.endDrag");
-                sampleMemory("Viewer", "continuous.endDrag", {
-                  pageCount
-                });
-              } : void 0,
-              onMomentumScrollEnd: perfEnabled ? () => {
-                scrollMonitorRef.current.end("continuous.momentumEnd");
-                endViewerScroll("continuous.momentumEnd");
-                sampleMemory("Viewer", "continuous.momentumEnd", {
-                  pageCount
-                });
-              } : void 0,
-              scrollEventThrottle: 16,
-              showsVerticalScrollIndicator: false
-            }
-          )
+          children: continuousList
         }
-      )
+      ) : continuousList
     }
   ) }) });
 };
@@ -31965,6 +32016,8 @@ function ProgressPill({
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
   const { height: windowHeight } = useWindowDimensions7();
+  const windowHeightRef = useRef9(windowHeight);
+  windowHeightRef.current = windowHeight;
   const trackHeight = Math.max(
     180,
     Math.min(520, windowHeight - offsets.progress - offsets.bottom - 132)
@@ -32015,6 +32068,7 @@ function ProgressPill({
   const thumbTopRef = useRef9(new Animated3.Value(thumbTop));
   const thumbTopSnapshotRef = useRef9(thumbTop);
   thumbTopSnapshotRef.current = thumbTop;
+  const scrubStartThumbTopRef = useRef9(0);
   const scrubberMetricsRef = useRef9({ trackHeight, thumbHeight, pageCount });
   scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
   useEffect11(() => {
@@ -32082,6 +32136,7 @@ function ProgressPill({
         onScrubbingChangeRef.current?.(true);
         hasMovedRef.current = false;
         longPressTriggeredRef.current = false;
+        scrubStartThumbTopRef.current = thumbTopSnapshotRef.current;
         scrubNavigationControllerRef.current.begin();
         pendingReleasedScrubPageRef.current = null;
         setScrubPreviewPage(currentPageRef.current);
@@ -32103,7 +32158,18 @@ function ProgressPill({
           clearTimeout(longPressTimerRef.current);
           longPressTimerRef.current = null;
         }
-        scrubToPositionRef.current(gestureState.moveY - trackYRef.current);
+        const { trackHeight: trackHeight2, thumbHeight: thumbHeight2 } = scrubberMetricsRef.current;
+        scrubToPositionRef.current(
+          resolvePageScrubberGesturePosition({
+            moveY: gestureState.moveY,
+            dy: gestureState.dy,
+            trackY: trackYRef.current,
+            windowHeight: windowHeightRef.current,
+            trackHeight: trackHeight2,
+            thumbHeight: thumbHeight2,
+            startThumbTop: scrubStartThumbTopRef.current
+          })
+        );
       },
       onPanResponderRelease: () => {
         if (longPressTimerRef.current !== null) {
@@ -32157,6 +32223,7 @@ function ProgressPill({
       pointerEvents: "box-none",
       style: [
         styles17.frame,
+        resolvePageScrubberOverlayStyle(),
         {
           top: offsets.progress,
           right: offsets.right
@@ -32166,6 +32233,7 @@ function ProgressPill({
         View17,
         {
           ref: scrubberRef,
+          pointerEvents: resolvePageScrubberPointerEvents(),
           style: [styles17.scrubber, { height: trackHeight }],
           ...scrubberPanHandlers,
           onLayout: () => {
@@ -32932,6 +33000,7 @@ export {
   BottomBar_default as BottomBar,
   CoverPreview_default as CoverPreview,
   DocumentActionsSheet,
+  IconPageNav,
   InfoSheet,
   MOBILE_CHROME_METRICS,
   MobilePerfProvider,