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

package/dist/index.js

@@ -25939,12 +25939,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
@@ -26008,6 +26013,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) => ({
@@ -26062,6 +26084,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,
@@ -26134,6 +26165,7 @@ var Viewer = ({
   const pendingScrollTimeoutRef = (0, import_react5.useRef)(
     null
   );
+  const pendingScrollFrameRef = (0, import_react5.useRef)(null);
   const pendingChromeShowTimeoutRef = (0, import_react5.useRef)(null);
   const chromeVisibleRef = (0, import_react5.useRef)(mobileChromeVisible);
   const lastScrollOffsetYRef = (0, import_react5.useRef)(0);
@@ -26141,6 +26173,7 @@ var Viewer = ({
   const scrollUpAccumRef = (0, import_react5.useRef)(0);
   const [layoutRevision, setLayoutRevision] = (0, import_react5.useState)(0);
   const [selectionDragActive, setSelectionDragActive] = (0, import_react5.useState)(false);
+  const [programmaticScrollActive, setProgrammaticScrollActive] = (0, import_react5.useState)(false);
   const selectionDragActiveRef = (0, import_react5.useRef)(false);
   const [gestureScrollLockActive, setGestureScrollLockActive] = (0, import_react5.useState)(false);
   const gestureScrollLockActiveRef = (0, import_react5.useRef)(false);
@@ -26235,6 +26268,7 @@ var Viewer = ({
     pendingScrollTargetRef.current = null;
     pendingScrollAttemptsRef.current = 0;
     clearPendingScrollRetry();
+    setProgrammaticScrollActive(false);
   }, [clearPendingScrollRetry]);
   const clearPendingChromeShow = (0, import_react5.useCallback)(() => {
     if (pendingChromeShowTimeoutRef.current) {
@@ -26289,6 +26323,10 @@ var Viewer = ({
         cancelAnimationFrame(pinchAnchorRestoreFrameRef.current);
       }
       clearPendingScrollRetry();
+      if (pendingScrollFrameRef.current !== null) {
+        cancelAnimationFrame(pendingScrollFrameRef.current);
+        pendingScrollFrameRef.current = null;
+      }
       clearPendingChromeShow();
     },
     [clearPendingChromeShow, clearPendingScrollRetry]
@@ -27142,12 +27180,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 = (0, import_react5.useCallback)(() => {
     if (pendingOrientationRestoreWidthRef.current !== windowWidth || pageCount <= 0 || isSingle || isWebView) {
@@ -27246,6 +27292,7 @@ var Viewer = ({
     const target = resolveViewerScrollTarget(scrollToPageSignal, isDouble);
     pendingScrollTargetRef.current = target;
     pendingScrollAttemptsRef.current = 0;
+    setProgrammaticScrollActive(true);
     clearPendingScrollRetry();
     setDocumentStateTracked(
       {
@@ -27501,6 +27548,89 @@ var Viewer = ({
       windowWidth
     ]
   );
+  const continuousList = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native4.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__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: [styles4.container, isDark && styles4.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       WebViewViewer_default,
@@ -27535,6 +27665,7 @@ var Viewer = ({
           {
             ref: horizontalScrollRef,
             horizontal: true,
+            nestedScrollEnabled: true,
             scrollEnabled: !gestureScrollLockActive && !pageScrubActive && documentSurfaceWidth > windowWidth,
             showsHorizontalScrollIndicator: false,
             onScroll: (event) => {
@@ -27619,101 +27750,21 @@ var Viewer = ({
           ]
         }
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: documentSurfaceWidth > windowWidth + 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_react_native4.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__ */ (0, import_jsx_runtime6.jsx)(
-            import_react_native4.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
     }
   ) }) });
 };
@@ -32084,6 +32135,8 @@ function ProgressPill({
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
   const { height: windowHeight } = (0, import_react_native17.useWindowDimensions)();
+  const windowHeightRef = (0, import_react14.useRef)(windowHeight);
+  windowHeightRef.current = windowHeight;
   const trackHeight = Math.max(
     180,
     Math.min(520, windowHeight - offsets.progress - offsets.bottom - 132)
@@ -32134,6 +32187,7 @@ function ProgressPill({
   const thumbTopRef = (0, import_react14.useRef)(new import_react_native17.Animated.Value(thumbTop));
   const thumbTopSnapshotRef = (0, import_react14.useRef)(thumbTop);
   thumbTopSnapshotRef.current = thumbTop;
+  const scrubStartThumbTopRef = (0, import_react14.useRef)(0);
   const scrubberMetricsRef = (0, import_react14.useRef)({ trackHeight, thumbHeight, pageCount });
   scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
   (0, import_react14.useEffect)(() => {
@@ -32201,6 +32255,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);
@@ -32222,7 +32277,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) {
@@ -32276,6 +32342,7 @@ function ProgressPill({
       pointerEvents: "box-none",
       style: [
         styles17.frame,
+        resolvePageScrubberOverlayStyle(),
         {
           top: offsets.progress,
           right: offsets.right
@@ -32285,6 +32352,7 @@ function ProgressPill({
         import_react_native17.View,
         {
           ref: scrubberRef,
+          pointerEvents: resolvePageScrubberPointerEvents(),
           style: [styles17.scrubber, { height: trackHeight }],
           ...scrubberPanHandlers,
           onLayout: () => {