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

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
@@ -25978,6 +25983,16 @@ var resolvePageScrubberThumbTopFromPosition = ({
   trackHeight,
   thumbHeight
 }) => Math.max(0, Math.min(trackHeight - thumbHeight, position - thumbHeight / 2));
+var resolvePageScrubberTrackRevealOrigin = ({
+  thumbTop,
+  thumbHeight,
+  trackHeight
+}) => Math.max(0, Math.min(trackHeight, thumbTop + thumbHeight / 2));
+var resolvePageScrubberTrackHeight = ({
+  windowHeight,
+  topOffset,
+  bottomOffset
+}) => Math.max(180, Math.min(720, windowHeight - topOffset - bottomOffset - 56));
 var resolvePageScrubberThumbTop = ({
   currentPage,
   trackHeight,
@@ -26008,6 +26023,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 +26094,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 +26175,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 +26183,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 +26278,7 @@ var Viewer = ({
     pendingScrollTargetRef.current = null;
     pendingScrollAttemptsRef.current = 0;
     clearPendingScrollRetry();
+    setProgrammaticScrollActive(false);
   }, [clearPendingScrollRetry]);
   const clearPendingChromeShow = (0, import_react5.useCallback)(() => {
     if (pendingChromeShowTimeoutRef.current) {
@@ -26289,6 +26333,10 @@ var Viewer = ({
         cancelAnimationFrame(pinchAnchorRestoreFrameRef.current);
       }
       clearPendingScrollRetry();
+      if (pendingScrollFrameRef.current !== null) {
+        cancelAnimationFrame(pendingScrollFrameRef.current);
+        pendingScrollFrameRef.current = null;
+      }
       clearPendingChromeShow();
     },
     [clearPendingChromeShow, clearPendingScrollRetry]
@@ -27142,12 +27190,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 +27302,7 @@ var Viewer = ({
     const target = resolveViewerScrollTarget(scrollToPageSignal, isDouble);
     pendingScrollTargetRef.current = target;
     pendingScrollAttemptsRef.current = 0;
+    setProgrammaticScrollActive(true);
     clearPendingScrollRetry();
     setDocumentStateTracked(
       {
@@ -27501,6 +27558,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 +27675,7 @@ var Viewer = ({
           {
             ref: horizontalScrollRef,
             horizontal: true,
+            nestedScrollEnabled: true,
             scrollEnabled: !gestureScrollLockActive && !pageScrubActive && documentSurfaceWidth > windowWidth,
             showsHorizontalScrollIndicator: false,
             onScroll: (event) => {
@@ -27619,101 +27760,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,10 +32145,13 @@ function ProgressPill({
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
   const { height: windowHeight } = (0, import_react_native17.useWindowDimensions)();
-  const trackHeight = Math.max(
-    180,
-    Math.min(520, windowHeight - offsets.progress - offsets.bottom - 132)
-  );
+  const windowHeightRef = (0, import_react14.useRef)(windowHeight);
+  windowHeightRef.current = windowHeight;
+  const trackHeight = resolvePageScrubberTrackHeight({
+    windowHeight,
+    topOffset: offsets.progress,
+    bottomOffset: offsets.bottom
+  });
   const thumbHeight = 44;
   const trackYRef = (0, import_react14.useRef)(0);
   const scrubberRef = (0, import_react14.useRef)(null);
@@ -32134,6 +32198,9 @@ 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 trackReveal = (0, import_react14.useRef)(new import_react_native17.Animated.Value(0)).current;
+  const [trackOriginY, setTrackOriginY] = (0, import_react14.useState)(0);
   const scrubberMetricsRef = (0, import_react14.useRef)({ trackHeight, thumbHeight, pageCount });
   scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
   (0, import_react14.useEffect)(() => {
@@ -32201,6 +32268,20 @@ function ProgressPill({
         onScrubbingChangeRef.current?.(true);
         hasMovedRef.current = false;
         longPressTriggeredRef.current = false;
+        scrubStartThumbTopRef.current = thumbTopSnapshotRef.current;
+        setTrackOriginY(
+          resolvePageScrubberTrackRevealOrigin({
+            thumbTop: thumbTopSnapshotRef.current,
+            thumbHeight,
+            trackHeight: scrubberMetricsRef.current.trackHeight
+          })
+        );
+        trackReveal.setValue(0);
+        import_react_native17.Animated.timing(trackReveal, {
+          toValue: 1,
+          duration: 180,
+          useNativeDriver: false
+        }).start();
         scrubNavigationControllerRef.current.begin();
         pendingReleasedScrubPageRef.current = null;
         setScrubPreviewPage(currentPageRef.current);
@@ -32222,7 +32303,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) {
@@ -32231,6 +32323,11 @@ function ProgressPill({
         }
         isScrubbingRef.current = false;
         onScrubbingChangeRef.current?.(false);
+        import_react_native17.Animated.timing(trackReveal, {
+          toValue: 0,
+          duration: 140,
+          useNativeDriver: false
+        }).start();
         const releasedPage = scrubNavigationControllerRef.current.release();
         const releaseAction = resolvePageScrubberReleaseAction({
           hasMoved: hasMovedRef.current,
@@ -32257,6 +32354,11 @@ function ProgressPill({
         }
         isScrubbingRef.current = false;
         onScrubbingChangeRef.current?.(false);
+        import_react_native17.Animated.timing(trackReveal, {
+          toValue: 0,
+          duration: 140,
+          useNativeDriver: false
+        }).start();
         scrubNavigationControllerRef.current.cancel();
         pendingReleasedScrubPageRef.current = null;
         setScrubPreviewPage(null);
@@ -32276,6 +32378,7 @@ function ProgressPill({
       pointerEvents: "box-none",
       style: [
         styles17.frame,
+        resolvePageScrubberOverlayStyle(),
         {
           top: offsets.progress,
           right: offsets.right
@@ -32285,6 +32388,7 @@ function ProgressPill({
         import_react_native17.View,
         {
           ref: scrubberRef,
+          pointerEvents: resolvePageScrubberPointerEvents(),
           style: [styles17.scrubber, { height: trackHeight }],
           ...scrubberPanHandlers,
           onLayout: () => {
@@ -32293,7 +32397,21 @@ function ProgressPill({
             });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: [styles17.track, isDark && styles17.trackDark] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react_native17.Animated.View,
+              {
+                style: [
+                  styles17.track,
+                  isDark && styles17.trackDark,
+                  {
+                    transformOrigin: [0, trackOriginY, 0],
+                    opacity: trackReveal,
+                    transform: [{ scaleY: trackReveal }],
+                    elevation: 6
+                  }
+                ]
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.Animated.View, { style: [styles17.thumb, { top: thumbTopRef.current }], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
               import_react_native17.View,
               {
@@ -32341,7 +32459,7 @@ var styles17 = import_react_native17.StyleSheet.create({
   track: {
     position: "absolute",
     top: 0,
-    right: 30,
+    right: 0,
     bottom: 0,
     width: 3,
     borderRadius: 2,