@oxyhq/bloom 0.33.0 → 0.34.0

package/lib/commonjs/zoomable-image-gallery/ZoomableImageGallery.js

@@ -12,8 +12,10 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _useTheme = require("../theme/use-theme.js");
 var _portal = require("../portal");
+var _index = require("../pressable-with-hover/index.js");
+var _index2 = require("../icons/index.js");
 var _zIndex = require("../styles/z-index.js");
-var _index = require("../image-aspect-ratio-cache/index.js");
+var _index3 = require("../image-aspect-ratio-cache/index.js");
 var _constants = require("./constants.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -56,7 +58,8 @@ const webUserSelectNoneStyle = _reactNative.Platform.select({
  */
 const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   measureThumb,
-  cornerRadius = _constants.DEFAULT_CORNER_RADIUS
+  cornerRadius = _constants.DEFAULT_CORNER_RADIUS,
+  indicatorVariant = 'dots'
 }, ref) => {
   const theme = (0, _useTheme.useTheme)();
   const {
@@ -68,15 +71,37 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   const [pagerReady, setPagerReady] = (0, _react.useState)(false);
   const [images, setImages] = (0, _react.useState)([]);
   const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
+  // Whether the active image is currently pinched/double-tapped past its base
+  // size. Drives the pan-while-zoomed gesture, disables the pager's horizontal
+  // paging + the dismiss drag so a pan moves the zoomed image instead.
+  const [isZoomed, setIsZoomed] = (0, _react.useState)(false);
   // Aspect ratio of the OPENING image (drives the open-animation fit box).
-  const [openRatio, setOpenRatio] = (0, _react.useState)(_index.DEFAULT_ASPECT_RATIO);
+  const [openRatio, setOpenRatio] = (0, _react.useState)(_index3.DEFAULT_ASPECT_RATIO);
   // Per-image aspect ratios for the pager pages (index-aligned with `images`).
   const [pageRatios, setPageRatios] = (0, _react.useState)({});
+
+  // Native `Share` is always available; web exposes a share button only when the
+  // browser implements `navigator.share`. Computed once (capability is static).
+  const [canShare] = (0, _react.useState)(() => {
+    if (_reactNative.Platform.OS !== 'web') return true;
+    return typeof navigator !== 'undefined' && typeof navigator.share === 'function';
+  });
   const scale = (0, _reactNativeReanimated.useSharedValue)(1);
   const translateX = (0, _reactNativeReanimated.useSharedValue)(0);
   const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
 
+  // Zoom transform of the active image, kept SEPARATE from the open/close +
+  // dismiss-drag transform above (reusing those would collide two meanings).
+  // `zoom*` are the live/persisted values; `baseZoomScale` is captured at pinch
+  // start and `savedZoomTranslate*` at pan start for incremental bookkeeping.
+  const zoomScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const zoomTranslateX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const zoomTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const baseZoomScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const savedZoomTranslateX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const savedZoomTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
+
   // Origin (offset from screen center) of the tapped image.
   const originX = (0, _reactNativeReanimated.useSharedValue)(0);
   const originY = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -103,6 +128,19 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     setActiveIndex(prev => prev === next ? prev : next);
   }, []);
 
+  // Snap the active image back to its un-zoomed baseline (no animation) and clear
+  // all zoom bookkeeping. Called on every path that changes the active page so a
+  // freshly-viewed image always starts un-zoomed.
+  const resetZoom = (0, _react.useCallback)(() => {
+    zoomScale.value = 1;
+    zoomTranslateX.value = 0;
+    zoomTranslateY.value = 0;
+    savedZoomTranslateX.value = 0;
+    savedZoomTranslateY.value = 0;
+    baseZoomScale.value = 1;
+    setIsZoomed(false);
+  }, [baseZoomScale, savedZoomTranslateX, savedZoomTranslateY, zoomScale, zoomTranslateX, zoomTranslateY]);
+
   // Box the fitted image must fit inside.
   const fitBox = (0, _react.useMemo)(() => ({
     width: SCREEN_WIDTH * _constants.FIT_FRACTION,
@@ -112,7 +150,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   // Compute the largest width/height for `ratio` that fits inside `fitBox`
   // without cropping (contain).
   const fitForRatio = (0, _react.useCallback)(ratio => {
-    const safeRatio = ratio > 0 && Number.isFinite(ratio) ? ratio : _index.DEFAULT_ASPECT_RATIO;
+    const safeRatio = ratio > 0 && Number.isFinite(ratio) ? ratio : _index3.DEFAULT_ASPECT_RATIO;
     let width = fitBox.width;
     let height = width / safeRatio;
     if (height > fitBox.height) {
@@ -136,7 +174,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   // as a caption at the bottom of the viewer (Bluesky-style lightbox footer).
   const activeAlt = images[activeIndex]?.alt?.trim() || undefined;
   const ensureRatio = (0, _react.useCallback)((index, uri) => {
-    const cached = (0, _index.getAspectRatio)(uri);
+    const cached = (0, _index3.getAspectRatio)(uri);
     if (cached !== undefined) {
       setPageRatios(prev => prev[index] === cached ? prev : {
         ...prev,
@@ -144,7 +182,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       });
       return;
     }
-    void (0, _index.fetchAspectRatio)(uri).then(ratio => {
+    void (0, _index3.fetchAspectRatio)(uri).then(ratio => {
       setPageRatios(prev => prev[index] === ratio ? prev : {
         ...prev,
         [index]: ratio
@@ -261,8 +299,8 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     const safeIndex = Math.min(Math.max(index, 0), nextImages.length - 1);
     const target = nextImages[safeIndex];
     if (!target) return;
-    const knownRatio = target.aspectRatio ?? (0, _index.getAspectRatio)(target.uri);
-    const ratio = knownRatio ?? _index.DEFAULT_ASPECT_RATIO;
+    const knownRatio = target.aspectRatio ?? (0, _index3.getAspectRatio)(target.uri);
+    const ratio = knownRatio ?? _index3.DEFAULT_ASPECT_RATIO;
     setImages(nextImages);
     setActiveIndexBoth(safeIndex);
     setOpenRatio(ratio);
@@ -271,7 +309,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     // a genuinely-unknown image falls through to `ensureRatio`'s async probe.
     const initialRatios = {};
     nextImages.forEach((img, i) => {
-      const r = img.aspectRatio ?? (0, _index.getAspectRatio)(img.uri);
+      const r = img.aspectRatio ?? (0, _index3.getAspectRatio)(img.uri);
       if (r !== undefined) initialRatios[i] = r;
     });
     setPageRatios(initialRatios);
@@ -279,7 +317,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
 
     // Resolve the opening ratio if it was not yet known, then re-fit.
     if (knownRatio === undefined) {
-      void (0, _index.fetchAspectRatio)(target.uri).then(resolved => {
+      void (0, _index3.fetchAspectRatio)(target.uri).then(resolved => {
         setOpenRatio(resolved);
         setPageRatios(prev => ({
           ...prev,
@@ -346,7 +384,10 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   _react.default.useImperativeHandle(ref, () => ({
     open
   }), [open]);
-  const panGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan().enabled(isOpen)
+  const panGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan()
+  // Disabled while zoomed so a drag pans the zoomed image (via the
+  // per-page pan gesture) instead of trying to dismiss the whole viewer.
+  .enabled(isOpen && !isZoomed)
   // Only claim drags that are decided to be vertical; horizontal drags
   // fall through to the pager's ScrollView so swiping changes pages.
   .activeOffsetY([-_constants.AXIS_DECISION_OFFSET, _constants.AXIS_DECISION_OFFSET]).failOffsetX([-_constants.AXIS_DECISION_OFFSET, _constants.AXIS_DECISION_OFFSET]).onStart(() => {
@@ -373,7 +414,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
         duration: _constants.OPACITY_DURATION
       });
     }
-  }), [handleDismiss, isOpen, SCREEN_HEIGHT, opacity, scale, startScale, startX, startY, translateX, translateY]);
+  }), [handleDismiss, isOpen, isZoomed, SCREEN_HEIGHT, opacity, scale, startScale, startX, startY, translateX, translateY]);
   const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: opacity.value
   }));
@@ -401,6 +442,18 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     }]
   }));
 
+  // Pinch/double-tap zoom transform, layered on TOP of the active page image's
+  // `fit`-based sizing (composed, never replacing it).
+  const zoomImageStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      scale: zoomScale.value
+    }, {
+      translateX: zoomTranslateX.value
+    }, {
+      translateY: zoomTranslateY.value
+    }]
+  }));
+
   // Derive the current page from the scroll offset, clamp into range, and update
   // `activeIndex` only when it actually changes (drives the live indicator + the
   // close fly-back target). Shared by `onMomentumScrollEnd` (native) and `onScroll`
@@ -410,10 +463,29 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     if (lastIndex < 0) return;
     const next = Math.min(Math.max(Math.round(offsetX / SCREEN_WIDTH), 0), lastIndex);
     if (next === activeIndexRef.current) return;
+    // Swiping to a new page always starts it un-zoomed (and clears the zoom on
+    // the page scrolling away).
+    resetZoom();
     setActiveIndexBoth(next);
     const img = images[next];
     if (img) ensureRatio(next, img.uri);
-  }, [ensureRatio, images, setActiveIndexBoth, SCREEN_WIDTH]);
+  }, [ensureRatio, images, resetZoom, setActiveIndexBoth, SCREEN_WIDTH]);
+
+  // Programmatically page to `index` (arrow buttons, keyboard, thumbnail taps).
+  // Clamps into range and lets the existing scroll handlers own the index/ratio
+  // state-sync — this only triggers the scroll. No-op until the pager is mounted.
+  const pageTo = (0, _react.useCallback)(index => {
+    if (!pagerReady) return;
+    const lastIndex = images.length - 1;
+    if (lastIndex < 0) return;
+    const clamped = Math.min(Math.max(index, 0), lastIndex);
+    resetZoom();
+    pagerRef.current?.scrollTo({
+      x: clamped * SCREEN_WIDTH,
+      y: 0,
+      animated: true
+    });
+  }, [images.length, pagerReady, resetZoom, SCREEN_WIDTH]);
   const onPagerScroll = (0, _react.useCallback)(event => {
     updateIndexFromOffset(event.nativeEvent.contentOffset.x);
   }, [updateIndexFromOffset]);
@@ -429,6 +501,124 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       });
     }
   }, [SCREEN_WIDTH]);
+
+  // Double-tap toggles zoom: reset when already zoomed, else zoom to the tapped
+  // point (biased toward it, clamped near the image center). `x`/`y` are local
+  // to the active image, so its own fitted box gives the center + clamp bounds.
+  const zoomToPoint = (0, _react.useCallback)((x, y) => {
+    if (zoomScale.value > 1) {
+      resetZoom();
+      return;
+    }
+    const centerX = activeFit.width / 2;
+    const centerY = activeFit.height / 2;
+    const maxOffset = Math.max(activeFit.width, activeFit.height) * 0.2;
+    const offsetX = Math.max(-maxOffset, Math.min(maxOffset, (centerX - x) * 0.5));
+    const offsetY = Math.max(-maxOffset, Math.min(maxOffset, (centerY - y) * 0.5));
+    zoomScale.value = (0, _reactNativeReanimated.withSpring)(_constants.DOUBLE_TAP_ZOOM_SCALE);
+    zoomTranslateX.value = (0, _reactNativeReanimated.withSpring)(offsetX);
+    zoomTranslateY.value = (0, _reactNativeReanimated.withSpring)(offsetY);
+    savedZoomTranslateX.value = offsetX;
+    savedZoomTranslateY.value = offsetY;
+    baseZoomScale.value = _constants.DOUBLE_TAP_ZOOM_SCALE;
+    setIsZoomed(true);
+  }, [activeFit, baseZoomScale, resetZoom, savedZoomTranslateX, savedZoomTranslateY, zoomScale, zoomTranslateX, zoomTranslateY]);
+  const doubleTapGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Tap().numberOfTaps(2).onEnd(event => {
+    (0, _reactNativeReanimated.runOnJS)(zoomToPoint)(event.x, event.y);
+  }), [zoomToPoint]);
+
+  // Single tap dismisses — but only when un-zoomed (a tap while zoomed is inert;
+  // double-tap/pinch own un-zooming). Made exclusive with the double-tap below so
+  // the first tap of a double-tap never dismisses.
+  const singleTapDismissGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Tap().numberOfTaps(1).onEnd(() => {
+    if (zoomScale.value > 1) return;
+    (0, _reactNativeReanimated.runOnJS)(handleDismiss)();
+  }), [handleDismiss, zoomScale]);
+  const pinchGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().onStart(() => {
+    baseZoomScale.value = zoomScale.value;
+    (0, _reactNativeReanimated.runOnJS)(setIsZoomed)(true);
+  }).onUpdate(event => {
+    zoomScale.value = Math.max(_constants.MIN_ZOOM_SCALE, Math.min(_constants.MAX_ZOOM_SCALE, baseZoomScale.value * (event.scale || 1)));
+  }).onEnd(() => {
+    if (zoomScale.value < _constants.ZOOM_SNAP_THRESHOLD) {
+      zoomScale.value = (0, _reactNativeReanimated.withSpring)(1);
+      zoomTranslateX.value = (0, _reactNativeReanimated.withSpring)(0);
+      zoomTranslateY.value = (0, _reactNativeReanimated.withSpring)(0);
+      savedZoomTranslateX.value = 0;
+      savedZoomTranslateY.value = 0;
+      baseZoomScale.value = 1;
+      (0, _reactNativeReanimated.runOnJS)(setIsZoomed)(false);
+    } else {
+      (0, _reactNativeReanimated.runOnJS)(setIsZoomed)(true);
+    }
+  }), [baseZoomScale, savedZoomTranslateX, savedZoomTranslateY, zoomScale, zoomTranslateX, zoomTranslateY]);
+  const panWhileZoomedGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan().enabled(isZoomed).minPointers(1).maxPointers(1).onStart(() => {
+    if (zoomScale.value <= 1) return;
+    savedZoomTranslateX.value = zoomTranslateX.value;
+    savedZoomTranslateY.value = zoomTranslateY.value;
+  }).onUpdate(event => {
+    if (zoomScale.value <= 1) return;
+    const nextX = savedZoomTranslateX.value + event.translationX * _constants.ZOOM_PAN_DAMPING;
+    const nextY = savedZoomTranslateY.value + event.translationY * _constants.ZOOM_PAN_DAMPING;
+    const maxTranslation = _constants.ZOOM_PAN_MAX_BASE * zoomScale.value;
+    zoomTranslateX.value = Math.max(-maxTranslation, Math.min(maxTranslation, nextX));
+    zoomTranslateY.value = Math.max(-maxTranslation, Math.min(maxTranslation, nextY));
+  }).onEnd(() => {
+    if (zoomScale.value <= 1) return;
+    savedZoomTranslateX.value = zoomTranslateX.value;
+    savedZoomTranslateY.value = zoomTranslateY.value;
+  }), [isZoomed, savedZoomTranslateX, savedZoomTranslateY, zoomScale, zoomTranslateX, zoomTranslateY]);
+
+  // Active page gesture: double-tap zoom + single-tap dismiss are mutually
+  // exclusive (single waits for the double to fail); both run simultaneously
+  // with pinch + pan-while-zoomed.
+  const activePageGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Simultaneous(_reactNativeGestureHandler.Gesture.Exclusive(doubleTapGesture, singleTapDismissGesture), pinchGesture, panWhileZoomedGesture), [doubleTapGesture, singleTapDismissGesture, pinchGesture, panWhileZoomedGesture]);
+
+  // Share the active image's URI: the OS share sheet on native; the Web Share API
+  // on supporting browsers (the button is only rendered where it exists).
+  const handleShare = (0, _react.useCallback)(async () => {
+    const uri = images[activeIndexRef.current]?.uri;
+    if (!uri) return;
+    try {
+      if (_reactNative.Platform.OS === 'web') {
+        if (typeof navigator !== 'undefined' && typeof navigator.share === 'function') {
+          await navigator.share({
+            url: uri
+          });
+        }
+        return;
+      }
+      await _reactNative.Share.share({
+        url: uri
+      });
+    } catch (err) {
+      // A user-cancelled share sheet rejects (AbortError on web) — that's
+      // expected, not a failure. Anything else is a real error worth surfacing.
+      if (err instanceof Error && err.name === 'AbortError') return;
+      if (typeof console !== 'undefined' && console.error) console.error('Image share failed:', err);
+    }
+  }, [images]);
+
+  // Keyboard navigation (web only), scoped to the open lifetime like Dialog.web's
+  // Escape handler. Reads the live index from the ref so it need not re-subscribe
+  // on every page change. Escape flies back via `handleDismiss` (not a raw close).
+  (0, _react.useEffect)(() => {
+    if (!isOpen || _reactNative.Platform.OS !== 'web' || typeof document === 'undefined') return;
+    const handler = e => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        handleDismiss();
+      } else if (e.key === 'ArrowLeft') {
+        e.stopPropagation();
+        pageTo(activeIndexRef.current - 1);
+      } else if (e.key === 'ArrowRight') {
+        e.stopPropagation();
+        pageTo(activeIndexRef.current + 1);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [handleDismiss, isOpen, pageTo]);
   const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView, {
     style: styles.modalContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
@@ -477,7 +667,11 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
             ref: pagerRef,
             horizontal: true,
-            pagingEnabled: true,
+            pagingEnabled: true
+            // Frozen while zoomed so a horizontal drag pans the zoomed image
+            // instead of paging away from it.
+            ,
+            scrollEnabled: !isZoomed,
             showsHorizontalScrollIndicator: false,
             contentOffset: {
               x: pendingIndexRef.current * SCREEN_WIDTH,
@@ -491,14 +685,43 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
             scrollEventThrottle: 16,
             style: _reactNative.StyleSheet.absoluteFill,
             children: images.map((img, idx) => {
-              const ratio = pageRatios[idx] ?? (0, _index.getAspectRatio)(img.uri) ?? _index.DEFAULT_ASPECT_RATIO;
+              const ratio = pageRatios[idx] ?? (0, _index3.getAspectRatio)(img.uri) ?? _index3.DEFAULT_ASPECT_RATIO;
               const fit = fitForRatio(ratio);
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-                onPress: handleDismiss,
+              // Only the active page is zoomable + gesture-wrapped (double-tap
+              // / single-tap dismiss / pinch / pan). Off-screen pages stay a
+              // plain image; the active image handles its own tap-to-dismiss
+              // through the gesture, so it isn't wrapped in a Pressable.
+              if (idx === activeIndex) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: [styles.page, {
+                    width: SCREEN_WIDTH,
+                    height: SCREEN_HEIGHT
+                  }, webPointerStyle],
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+                    gesture: activePageGesture,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedImage, {
+                      source: {
+                        uri: img.uri
+                      },
+                      contentFit: "contain",
+                      style: [{
+                        width: fit.width,
+                        height: fit.height,
+                        borderRadius: cornerRadius
+                      }, zoomImageStyle],
+                      transition: 0,
+                      ...(_reactNative.Platform.OS === 'web' ? {
+                        draggable: false
+                      } : {})
+                    })
+                  })
+                }, `${img.uri}-${idx}`);
+              }
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: [styles.page, {
                   width: SCREEN_WIDTH,
                   height: SCREEN_HEIGHT
-                }, webPointerStyle],
+                }],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
                   source: {
                     uri: img.uri
@@ -519,19 +742,75 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
           })
         }), pagerReady && images.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
           style: [styles.indicatorWrap, backdropStyle],
-          pointerEvents: "none",
+          pointerEvents: "box-none",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.counterPill,
+            pointerEvents: "none",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.counterText,
               children: `${activeIndex + 1} / ${images.length}`
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          }), indicatorVariant === 'thumbnails' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            style: styles.thumbStripScroll,
+            contentContainerStyle: styles.thumbStripContent,
+            children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+              onPress: () => pageTo(idx),
+              accessibilityRole: "button",
+              accessibilityLabel: `Go to image ${idx + 1} of ${images.length}`,
+              style: [styles.thumbTile, idx === activeIndex ? styles.thumbTileActive : styles.thumbTileInactive, webPointerStyle],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+                source: {
+                  uri: img.uri
+                },
+                contentFit: "cover",
+                style: styles.thumbTileImage,
+                transition: 0,
+                ...(_reactNative.Platform.OS === 'web' ? {
+                  draggable: false
+                } : {})
+              })
+            }, `thumb-${img.uri}-${idx}`))
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.dotsRow,
+            pointerEvents: "none",
             children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.dot, idx === activeIndex ? styles.dotActive : styles.dotInactive]
             }, `dot-${img.uri}-${idx}`))
           })]
+        }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PressableWithHover, {
+          onPress: () => pageTo(activeIndex - 1),
+          accessibilityRole: "button",
+          accessibilityLabel: "Previous image",
+          hitSlop: 8,
+          style: [styles.navArrow, styles.navArrowLeft, webPointerStyle],
+          hoverStyle: styles.navArrowHoverLeft,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ArrowLeft_Stroke2_Corner0_Rounded, {
+            fill: "#fff",
+            size: "lg"
+          })
+        }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex < images.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PressableWithHover, {
+          onPress: () => pageTo(activeIndex + 1),
+          accessibilityRole: "button",
+          accessibilityLabel: "Next image",
+          hitSlop: 8,
+          style: [styles.navArrow, styles.navArrowRight, webPointerStyle],
+          hoverStyle: styles.navArrowHoverRight,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ArrowRight_Stroke2_Corner0_Rounded, {
+            fill: "#fff",
+            size: "lg"
+          })
+        }), canShare && pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          onPress: handleShare,
+          accessibilityRole: "button",
+          accessibilityLabel: "Share image",
+          hitSlop: 8,
+          style: [styles.shareButton, webPointerStyle],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ArrowOutOfBox_Stroke2_Corner0_Rounded, {
+            fill: "#fff",
+            size: "md"
+          })
         }), activeAlt ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
           style: [styles.altCaptionWrap, images.length > 1 && styles.altCaptionWrapWithIndicator, backdropStyle],
           pointerEvents: "none",
@@ -635,6 +914,82 @@ const styles = _reactNative.StyleSheet.create({
   dotInactive: {
     backgroundColor: 'rgba(255,255,255,0.4)'
   },
+  thumbStripScroll: {
+    maxWidth: '100%',
+    flexGrow: 0
+  },
+  // Centers the tiles when they don't fill the width, scrolls when they overflow.
+  thumbStripContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 16
+  },
+  thumbTile: {
+    width: _constants.THUMBNAIL_STRIP_TILE_SIZE,
+    height: _constants.THUMBNAIL_STRIP_TILE_SIZE,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 2
+  },
+  thumbTileActive: {
+    borderColor: '#fff'
+  },
+  thumbTileInactive: {
+    borderColor: 'rgba(255,255,255,0.25)'
+  },
+  thumbTileImage: {
+    width: '100%',
+    height: '100%'
+  },
+  navArrow: {
+    position: 'absolute',
+    top: '50%',
+    width: 44,
+    height: 44,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    transform: [{
+      translateY: -22
+    }]
+  },
+  navArrowLeft: {
+    left: 16
+  },
+  navArrowRight: {
+    right: 16
+  },
+  // Hover styles fully replace the base `transform`, so they repeat `translateY`.
+  navArrowHoverLeft: {
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    transform: [{
+      translateY: -22
+    }, {
+      scale: 1.08
+    }]
+  },
+  navArrowHoverRight: {
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    transform: [{
+      translateY: -22
+    }, {
+      scale: 1.08
+    }]
+  },
+  shareButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.45)'
+  },
   altCaptionWrap: {
     position: 'absolute',
     bottom: 48,