@jekrch/react-viewport-lightbox 0.3.1 → 0.4.0

package/dist/index.js

@@ -28,6 +28,29 @@ function zoomToPoint(prevScale, nextScale, prev, focal, viewport) {
     y: relY * (1 - k) + k * prev.y
   };
 }
+function computeZoomTransform({
+  prevScale,
+  nextScale,
+  prev,
+  focal,
+  viewport,
+  baseDims,
+  zoomToCursor,
+  focalPan
+}) {
+  if (nextScale <= 1) return { x: 0, y: 0 };
+  if (zoomToCursor) {
+    const f = zoomToPoint(prevScale, nextScale, prev, focal, viewport);
+    return clampTranslate(
+      f.x + (focalPan?.x ?? 0),
+      f.y + (focalPan?.y ?? 0),
+      nextScale,
+      baseDims,
+      viewport
+    );
+  }
+  return clampTranslate(prev.x, prev.y, nextScale, baseDims, viewport);
+}
 function resolveSlideDirection({
   offset,
   elapsedMs,
@@ -48,6 +71,16 @@ function resolveSlideDirection({
 // src/hooks/useImageZoomPan.ts
 var MIN_SCALE = 1;
 var MAX_SCALE = 5;
+var DOUBLE_CLICK_ZOOM_SCALE = 1.8;
+function resetWrapperStyles(wrapper) {
+  wrapper.style.transform = "none";
+  wrapper.style.position = "";
+  wrapper.style.inset = "";
+  wrapper.style.zIndex = "";
+  wrapper.style.backgroundColor = "";
+  wrapper.style.cursor = "";
+  wrapper.style.willChange = "";
+}
 function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCursor = true) {
   const imgRef = useRef(null);
   const [displayScale, setDisplayScale] = useState(1);
@@ -57,14 +90,9 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCurs
     (t, animate = false) => {
       const wrapper = imgWrapperRef.current;
       if (!wrapper) return;
-      wrapper.style.transition = animate ? "transform 0.2s ease-out" : "none";
+      wrapper.style.transition = typeof animate === "string" ? animate : animate ? "transform 0.2s ease-out" : "none";
       if (t.scale <= 1) {
-        wrapper.style.transform = "none";
-        wrapper.style.position = "";
-        wrapper.style.inset = "";
-        wrapper.style.zIndex = "";
-        wrapper.style.backgroundColor = "";
-        wrapper.style.cursor = "";
+        resetWrapperStyles(wrapper);
       } else {
         wrapper.style.transform = `scale(${t.scale}) translate(${t.x / t.scale}px, ${t.y / t.scale}px)`;
         wrapper.style.position = "absolute";
@@ -72,6 +100,7 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCurs
         wrapper.style.zIndex = "30";
         wrapper.style.backgroundColor = "black";
         wrapper.style.cursor = "grab";
+        wrapper.style.willChange = "transform";
       }
       setDisplayScale(t.scale);
     },
@@ -93,6 +122,9 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCurs
     if (!img) return;
     baseDimsRef.current = { width: img.offsetWidth, height: img.offsetHeight };
   }, []);
+  const ensureBaseDims = useCallback(() => {
+    if (baseDimsRef.current.width === 0) measureBaseDims();
+  }, [measureBaseDims]);
   const clampTranslate2 = useCallback(
     (x, y, scale) => clampTranslate(x, y, scale, baseDimsRef.current, {
       width: window.innerWidth,
@@ -104,12 +136,7 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCurs
     const wrapper = imgWrapperRef.current;
     if (wrapper) {
       wrapper.style.transition = "none";
-      wrapper.style.transform = "none";
-      wrapper.style.position = "";
-      wrapper.style.inset = "";
-      wrapper.style.zIndex = "";
-      wrapper.style.backgroundColor = "";
-      wrapper.style.cursor = "";
+      resetWrapperStyles(wrapper);
     }
     transformRef.current = { scale: 1, x: 0, y: 0 };
   }, [currentIndex, imgWrapperRef]);
@@ -122,10 +149,7 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCurs
     if (!wrapper) return;
     const handleWheel = (e) => {
       e.preventDefault();
-      if (baseDimsRef.current.width === 0) {
-        const img = imgRef.current;
-        if (img) baseDimsRef.current = { width: img.offsetWidth, height: img.offsetHeight };
-      }
+      ensureBaseDims();
       const t = transformRef.current;
       let dy = e.deltaY;
       if (e.deltaMode === 1) dy *= 16;
@@ -134,41 +158,32 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCurs
       const step = -(normalized / 100) * 0.05;
       const factor = 1 + step;
       const nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, t.scale * factor));
-      let clamped;
-      if (nextScale <= 1) {
-        clamped = { x: 0, y: 0 };
-      } else if (zoomToCursor) {
-        const focal = zoomToPoint(
-          t.scale,
-          nextScale,
-          { x: t.x, y: t.y },
-          { x: e.clientX, y: e.clientY },
-          { width: window.innerWidth, height: window.innerHeight }
-        );
-        clamped = clampTranslate2(focal.x, focal.y, nextScale);
-      } else {
-        clamped = clampTranslate2(t.x, t.y, nextScale);
-      }
-      setTransform({ scale: nextScale, ...clamped });
+      const clamped = computeZoomTransform({
+        prevScale: t.scale,
+        nextScale,
+        prev: { x: t.x, y: t.y },
+        focal: { x: e.clientX, y: e.clientY },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        baseDims: baseDimsRef.current,
+        zoomToCursor
+      });
+      setTransform({ scale: nextScale, ...clamped }, "transform 0.1s ease-out");
     };
     wrapper.addEventListener("wheel", handleWheel, { passive: false });
     return () => wrapper.removeEventListener("wheel", handleWheel);
-  }, [imgWrapperRef, setTransform, clampTranslate2, enabled, zoomToCursor]);
+  }, [imgWrapperRef, setTransform, enabled, zoomToCursor, ensureBaseDims]);
   const handleDoubleClick = useCallback(
     (e) => {
       if (!enabled) return;
       e.stopPropagation();
-      if (baseDimsRef.current.width === 0) {
-        const img = imgRef.current;
-        if (img) baseDimsRef.current = { width: img.offsetWidth, height: img.offsetHeight };
-      }
+      ensureBaseDims();
       if (transformRef.current.scale > 1) {
         resetTransform();
       } else {
-        setTransform({ scale: 1.8, x: 0, y: 0 }, true);
+        setTransform({ scale: DOUBLE_CLICK_ZOOM_SCALE, x: 0, y: 0 }, true);
       }
     },
-    [resetTransform, setTransform, enabled]
+    [resetTransform, setTransform, enabled, ensureBaseDims]
   );
   return {
     imgRef,
@@ -184,13 +199,36 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCurs
     handleDoubleClick
   };
 }
+function measureSlideDistance(track) {
+  const vw = track?.clientWidth || window.innerWidth;
+  const img = track?.querySelector(".rvl-img-wrapper > img");
+  const imgW = img?.offsetWidth ?? 0;
+  if (!imgW) return vw;
+  return Math.min(vw, (vw + imgW) / 2);
+}
+function onTransitionEndOnce(el, cb, fallbackMs) {
+  if (!el) return;
+  let done = false;
+  const run = () => {
+    if (done) return;
+    done = true;
+    el.removeEventListener("transitionend", run);
+    cb();
+  };
+  el.addEventListener("transitionend", run, { once: true });
+  setTimeout(run, fallbackMs);
+}
 function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart, loop = false) {
   const slideTrackRef = useRef(null);
   const swipeOffsetRef = useRef(0);
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [slideAnimating, setSlideAnimating] = useState(false);
   const [slideActive, setSlideActive] = useState(false);
+  const [slideDistance, setSlideDistance] = useState(0);
   const commitLockRef = useRef(false);
+  const refreshSlideDistance = useCallback(() => {
+    setSlideDistance(measureSlideDistance(slideTrackRef.current));
+  }, []);
   const hasPrev = loop ? items.length > 1 : currentIndex > 0;
   const hasNext = loop ? items.length > 1 : currentIndex < items.length - 1;
   const applySlideOffset = useCallback((offset, animate = false) => {
@@ -205,19 +243,14 @@ function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart, loop
   const snapBack = useCallback(() => {
     setSlideAnimating(true);
     applySlideOffset(0, true);
-    const track = slideTrackRef.current;
-    let done = false;
-    const onEnd = () => {
-      if (done) return;
-      done = true;
-      track?.removeEventListener("transitionend", onEnd);
-      setSlideAnimating(false);
-      setSlideActive(false);
-    };
-    if (track) {
-      track.addEventListener("transitionend", onEnd, { once: true });
-      setTimeout(onEnd, 350);
-    }
+    onTransitionEndOnce(
+      slideTrackRef.current,
+      () => {
+        setSlideAnimating(false);
+        setSlideActive(false);
+      },
+      350
+    );
   }, [applySlideOffset]);
   const readyRef = useRef(true);
   const commitSlide = useCallback(
@@ -225,43 +258,38 @@ function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart, loop
       if (commitLockRef.current || !readyRef.current) return;
       commitLockRef.current = true;
       readyRef.current = false;
-      const vw = window.innerWidth;
-      const targetOffset = direction === "prev" ? vw : -vw;
+      const distance = measureSlideDistance(slideTrackRef.current);
+      setSlideDistance(distance);
+      const targetOffset = direction === "prev" ? distance : -distance;
       setSlideActive(true);
       setSlideAnimating(true);
       onSlideStart?.(direction);
       requestAnimationFrame(() => {
         applySlideOffset(targetOffset, true);
-        const track = slideTrackRef.current;
-        let cleaned = false;
-        const cleanup = () => {
-          if (cleaned) return;
-          cleaned = true;
-          track?.removeEventListener("transitionend", onTransitionEnd);
-          let newIndex = direction === "prev" ? currentIndex - 1 : currentIndex + 1;
-          if (loop) newIndex = (newIndex + items.length) % items.length;
-          if (newIndex < 0 || newIndex >= items.length) {
-            commitLockRef.current = false;
-            return;
-          }
-          const newItem = items[newIndex];
-          const preload = new Image();
-          preload.src = newItem.src;
-          const doNavigate = () => onNavigate(newIndex);
-          const timeout = setTimeout(doNavigate, 300);
-          preload.decode().then(() => {
-            clearTimeout(timeout);
-            doNavigate();
-          }).catch(() => {
-            clearTimeout(timeout);
-            doNavigate();
-          });
-        };
-        const onTransitionEnd = () => cleanup();
-        if (track) {
-          track.addEventListener("transitionend", onTransitionEnd, { once: true });
-          setTimeout(cleanup, 400);
-        }
+        onTransitionEndOnce(
+          slideTrackRef.current,
+          () => {
+            let newIndex = direction === "prev" ? currentIndex - 1 : currentIndex + 1;
+            if (loop) newIndex = (newIndex + items.length) % items.length;
+            if (newIndex < 0 || newIndex >= items.length) {
+              commitLockRef.current = false;
+              return;
+            }
+            const newItem = items[newIndex];
+            const preload = new Image();
+            preload.src = newItem.src;
+            const doNavigate = () => onNavigate(newIndex);
+            const timeout = setTimeout(doNavigate, 300);
+            preload.decode().then(() => {
+              clearTimeout(timeout);
+              doNavigate();
+            }).catch(() => {
+              clearTimeout(timeout);
+              doNavigate();
+            });
+          },
+          400
+        );
       });
     },
     [applySlideOffset, currentIndex, items, onNavigate, onSlideStart, loop]
@@ -290,11 +318,11 @@ function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart, loop
     }
     swipeOffsetRef.current = 0;
     commitLockRef.current = false;
-  }, [currentIndex]);
-  useEffect(() => {
     setSwipeOffset(0);
     setSlideAnimating(false);
     setSlideActive(false);
+  }, [currentIndex]);
+  useEffect(() => {
     readyRef.current = true;
   }, [currentIndex]);
   return {
@@ -304,16 +332,33 @@ function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart, loop
     swipeOffset,
     swipeOffsetRef,
     commitLockRef,
+    slideDistance,
     applySlideOffset,
     commitSlide,
     snapBack,
     resolveSlide,
-    setSlideActive
+    setSlideActive,
+    refreshSlideDistance
   };
 }
+var DOUBLE_TAP_ZOOM_SCALE = 2.5;
 function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true, zoomToCursor = true) {
-  const { transformRef, clampTranslate: clampTranslate2, setTransform, applyTransform, resetTransform } = zoomPan;
-  const { applySlideOffset, resolveSlide, snapBack, setSlideActive, swipeOffsetRef } = slide;
+  const {
+    transformRef,
+    baseDimsRef,
+    clampTranslate: clampTranslate2,
+    setTransform,
+    applyTransform,
+    resetTransform
+  } = zoomPan;
+  const {
+    applySlideOffset,
+    resolveSlide,
+    snapBack,
+    setSlideActive,
+    swipeOffsetRef,
+    refreshSlideDistance
+  } = slide;
   const panRef = useRef({
     isDragging: false,
     pointerStart: { x: 0, y: 0 },
@@ -336,9 +381,11 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
     x: 0,
     y: 0
   });
+  const gestureMovedRef = useRef(false);
   const beginSlide = useCallback(
     (x, y) => {
       setSlideActive(true);
+      refreshSlideDistance();
       const sg = slideRef.current;
       sg.active = true;
       sg.startX = x;
@@ -347,7 +394,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
       sg.locked = false;
       sg.rejected = false;
     },
-    [setSlideActive]
+    [setSlideActive, refreshSlideDistance]
   );
   const updateSlide = useCallback(
     (clientX, clientY, lockThreshold, angleBias) => {
@@ -359,6 +406,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
         const absDx = Math.abs(dx);
         const absDy = Math.abs(dy);
         if (absDx < lockThreshold && absDy < lockThreshold) return;
+        gestureMovedRef.current = true;
         if (absDy > absDx * angleBias) {
           sg.rejected = true;
           return;
@@ -390,6 +438,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
   const handlePointerDown = useCallback(
     (e) => {
       if (e.pointerType === "touch") return;
+      gestureMovedRef.current = false;
       if (transformRef.current.scale > 1) {
         e.preventDefault();
         const p = panRef.current;
@@ -409,6 +458,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
       if (p.isDragging && transformRef.current.scale > 1) {
         const dx = e.clientX - p.pointerStart.x;
         const dy = e.clientY - p.pointerStart.y;
+        if (Math.abs(dx) > 4 || Math.abs(dy) > 4) gestureMovedRef.current = true;
         const t = transformRef.current;
         const clamped = clampTranslate2(p.translateStart.x + dx, p.translateStart.y + dy, t.scale);
         setTransform({ scale: t.scale, ...clamped });
@@ -430,6 +480,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
     (e) => {
       const p = panRef.current;
       if (e.touches.length === 2 && zoomEnabled) {
+        gestureMovedRef.current = true;
         const dx = e.touches[0].clientX - e.touches[1].clientX;
         const dy = e.touches[0].clientY - e.touches[1].clientY;
         p.pinchStartDist = Math.hypot(dx, dy);
@@ -444,6 +495,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
           snapBack();
         }
       } else if (e.touches.length === 1) {
+        gestureMovedRef.current = false;
         if (transformRef.current.scale > 1) {
           p.lastTouchPos = {
             x: e.touches[0].clientX,
@@ -464,25 +516,26 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
         const dy = e.touches[0].clientY - e.touches[1].clientY;
         const dist = Math.hypot(dx, dy);
         const ratio = dist / p.pinchStartDist;
-        const nextScale = Math.min(5, Math.max(1, p.pinchStartScale * ratio));
+        const nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, p.pinchStartScale * ratio));
         const t = transformRef.current;
-        let clamped;
-        if (nextScale <= 1) {
-          clamped = { x: 0, y: 0 };
-        } else if (zoomToCursor) {
-          const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
-          const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
-          const focal = zoomToPoint(
-            t.scale,
-            nextScale,
-            { x: t.x, y: t.y },
-            { x: midX, y: midY },
-            { width: window.innerWidth, height: window.innerHeight }
-          );
-          clamped = clampTranslate2(focal.x, focal.y, nextScale);
-        } else {
-          clamped = clampTranslate2(t.x, t.y, nextScale);
-        }
+        const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+        const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+        const prevMid = p.pinchMidpoint;
+        const focalPan = {
+          x: prevMid ? midX - prevMid.x : 0,
+          y: prevMid ? midY - prevMid.y : 0
+        };
+        p.pinchMidpoint = { x: midX, y: midY };
+        const clamped = computeZoomTransform({
+          prevScale: t.scale,
+          nextScale,
+          prev: { x: t.x, y: t.y },
+          focal: { x: midX, y: midY },
+          viewport: { width: window.innerWidth, height: window.innerHeight },
+          baseDims: baseDimsRef.current,
+          zoomToCursor,
+          focalPan
+        });
         const next = { scale: nextScale, ...clamped };
         transformRef.current = next;
         applyTransform(next);
@@ -490,6 +543,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
         const touch = e.touches[0];
         const dx = touch.clientX - p.lastTouchPos.x;
         const dy = touch.clientY - p.lastTouchPos.y;
+        if (Math.abs(dx) > 4 || Math.abs(dy) > 4) gestureMovedRef.current = true;
         p.lastTouchPos = { x: touch.clientX, y: touch.clientY };
         const t = transformRef.current;
         const clamped = clampTranslate2(t.x + dx, t.y + dy, t.scale);
@@ -501,7 +555,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
         updateSlide(touch.clientX, touch.clientY, 6, 0.8);
       }
     },
-    [transformRef, clampTranslate2, applyTransform, updateSlide, zoomToCursor]
+    [transformRef, baseDimsRef, clampTranslate2, applyTransform, updateSlide, zoomToCursor]
   );
   const handleTouchEnd = useCallback(
     (e) => {
@@ -541,7 +595,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
           if (transformRef.current.scale > 1) {
             resetTransform();
           } else {
-            setTransform({ scale: 2.5, x: 0, y: 0 }, true);
+            setTransform({ scale: DOUBLE_TAP_ZOOM_SCALE, x: 0, y: 0 }, true);
           }
         } else {
           lastTapRef.current = { time: now, x: touch.clientX, y: touch.clientY };
@@ -568,7 +622,8 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true,
     handlePointerUp,
     handleTouchStart,
     handleTouchMove,
-    handleTouchEnd
+    handleTouchEnd,
+    gestureMovedRef
   };
 }
 function useBarMeasure(topBarRef, bottomBarRef, measureKey) {
@@ -667,6 +722,143 @@ function useFocusTrap(containerRef, active) {
     };
   }, [containerRef, active]);
 }
+var ANIM_MS = 250;
+var IMG_PADDING = 44;
+var ZOOM_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function flipTransform(from, to) {
+  const sx = to.width / from.width;
+  const sy = to.height / from.height;
+  const dx = to.left - from.left;
+  const dy = to.top - from.top;
+  return `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
+}
+function canAnimate(el) {
+  return !!el && typeof el.animate === "function";
+}
+function isRectInViewport(rect) {
+  if (typeof window === "undefined") return true;
+  return rect.top < window.innerHeight && rect.top + rect.height > 0 && rect.left < window.innerWidth && rect.left + rect.width > 0;
+}
+function useSharedElementZoom({
+  getOriginRect,
+  index,
+  isZoomed,
+  imgRef,
+  imgWrapperRef,
+  bottomBarRef,
+  measureBaseDims
+}) {
+  const zoomTransition = !!getOriginRect;
+  const reduceMotion = prefersReducedMotion();
+  const gateEntry = zoomTransition && !reduceMotion;
+  const [fullLoaded, setFullLoaded] = useState(false);
+  const [showSpinner, setShowSpinner] = useState(false);
+  const [collapsing, setCollapsing] = useState(false);
+  const entryStartedRef = useRef(false);
+  const entryCleanupRef = useRef(null);
+  const runZoomEntry = useCallback(() => {
+    if (entryStartedRef.current) return;
+    if (!getOriginRect || prefersReducedMotion()) return;
+    const img = imgRef.current;
+    const thumb = getOriginRect(index);
+    if (!thumb || !canAnimate(img)) return;
+    const bottomH = bottomBarRef.current?.offsetHeight ?? 0;
+    const lockedMaxHeight = `calc(100vh - ${bottomH + IMG_PADDING * 2}px)`;
+    img.style.maxHeight = lockedMaxHeight;
+    const imgRect = img.getBoundingClientRect();
+    if (imgRect.width === 0 || imgRect.height === 0) {
+      img.style.maxHeight = "";
+      return;
+    }
+    entryStartedRef.current = true;
+    const startTransform = flipTransform(imgRect, thumb);
+    img.style.transformOrigin = "top left";
+    img.style.transform = startTransform;
+    const wrapper = imgWrapperRef.current;
+    if (wrapper) wrapper.style.overflow = "visible";
+    const anim = img.animate(
+      [
+        { transformOrigin: "top left", transform: startTransform },
+        { transformOrigin: "top left", transform: "none" }
+      ],
+      { duration: ANIM_MS, easing: ZOOM_EASE, fill: "forwards" }
+    );
+    const cleanup = () => {
+      img.style.transform = "";
+      img.style.transformOrigin = "";
+      if (wrapper) wrapper.style.overflow = "";
+      img.style.maxHeight = lockedMaxHeight;
+      anim.cancel();
+      entryCleanupRef.current = null;
+    };
+    entryCleanupRef.current = cleanup;
+    anim.onfinish = cleanup;
+  }, [getOriginRect, index, imgRef, imgWrapperRef, bottomBarRef]);
+  const onImageLoad = useCallback(() => {
+    measureBaseDims();
+    const img = imgRef.current;
+    if (img && typeof img.decode === "function") {
+      img.decode().then(
+        () => setFullLoaded(true),
+        () => setFullLoaded(true)
+      );
+    } else {
+      setFullLoaded(true);
+    }
+  }, [measureBaseDims, imgRef]);
+  const onImageError = useCallback(() => setFullLoaded(true), []);
+  useLayoutEffect(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalWidth > 0) onImageLoad();
+  }, []);
+  useLayoutEffect(() => {
+    if (fullLoaded) runZoomEntry();
+  }, [fullLoaded]);
+  useEffect(() => {
+    if (!gateEntry || fullLoaded) {
+      setShowSpinner(false);
+      return;
+    }
+    const t = setTimeout(() => setShowSpinner(true), 500);
+    return () => clearTimeout(t);
+  }, [gateEntry, fullLoaded]);
+  const settleEntry = useCallback(() => {
+    entryCleanupRef.current?.();
+  }, []);
+  const playCollapse = useCallback(() => {
+    const reduce = prefersReducedMotion();
+    const origin = !reduce && !isZoomed ? getOriginRect?.(index) ?? null : null;
+    const thumb = origin && isRectInViewport(origin) ? origin : null;
+    const img = imgRef.current;
+    if (!thumb || !canAnimate(img)) return;
+    const imgRect = img.getBoundingClientRect();
+    const wrapper = imgWrapperRef.current;
+    if (wrapper) wrapper.style.overflow = "visible";
+    setCollapsing(true);
+    img.animate(
+      [
+        { transformOrigin: "top left", transform: "none" },
+        { transformOrigin: "top left", transform: flipTransform(imgRect, thumb) }
+      ],
+      { duration: ANIM_MS, easing: ZOOM_EASE, fill: "forwards" }
+    );
+  }, [getOriginRect, index, isZoomed, imgRef, imgWrapperRef]);
+  return {
+    gateEntry,
+    zoomTransition,
+    fullLoaded,
+    showSpinner,
+    collapsing,
+    onImageLoad,
+    onImageError,
+    settleEntry,
+    playCollapse
+  };
+}
 function base(props) {
   return {
     width: 18,
@@ -737,28 +929,29 @@ function NavButton({ direction, enabled, onClick, icon, className }) {
     }
   );
 }
-var ANIM_MS = 250;
-var IMG_PADDING = 44;
-var GHOST_CLICK_MS = 700;
-var ZOOM_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || !window.matchMedia) return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function flipTransform(from, to) {
-  const sx = to.width / from.width;
-  const sy = to.height / from.height;
-  const dx = to.left - from.left;
-  const dy = to.top - from.top;
-  return `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
-}
-function canAnimate(el) {
-  return !!el && typeof el.animate === "function";
-}
-function isRectInViewport(rect) {
-  if (typeof window === "undefined") return true;
-  return rect.top < window.innerHeight && rect.top + rect.height > 0 && rect.left < window.innerWidth && rect.left + rect.width > 0;
+function ChromeButton({
+  onClick,
+  title,
+  ariaLabel,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cx("rvl-btn", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      title,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
 }
+var GHOST_CLICK_MS = 700;
 function ImageViewer({
   items,
   index,
@@ -790,7 +983,6 @@ function ImageViewer({
 }) {
   const [visible, setVisible] = useState(false);
   const [closing, setClosing] = useState(false);
-  const [collapsing, setCollapsing] = useState(false);
   const [isTouchDevice, setIsTouchDevice] = useState(false);
   const [contentShift, setContentShiftState] = useState({ transform: null, animate: true });
   const openedAtRef = useRef(Date.now());
@@ -828,8 +1020,27 @@ function ImageViewer({
     handleDoubleClick
   } = zoomPan;
   const slide = useSlideNavigation(items, index, onIndexChange, onNavigate, loop);
-  const { slideTrackRef, slideActive, slideAnimating, swipeOffset, commitSlide } = slide;
+  const { slideTrackRef, slideActive, slideAnimating, swipeOffset, slideDistance, commitSlide } = slide;
   const gestures = useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoom, zoomToCursor);
+  const {
+    gateEntry,
+    zoomTransition,
+    fullLoaded,
+    showSpinner,
+    collapsing,
+    onImageLoad,
+    onImageError,
+    settleEntry,
+    playCollapse
+  } = useSharedElementZoom({
+    getOriginRect,
+    index,
+    isZoomed,
+    imgRef,
+    imgWrapperRef,
+    bottomBarRef,
+    measureBaseDims
+  });
   useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) {
       setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
@@ -850,101 +1061,14 @@ function ImageViewer({
     const raf = requestAnimationFrame(() => setVisible(true));
     return () => cancelAnimationFrame(raf);
   }, []);
-  const zoomTransition = !!getOriginRect;
-  const reduceMotion = prefersReducedMotion();
-  const gateEntry = zoomTransition && !reduceMotion;
-  const [fullLoaded, setFullLoaded] = useState(false);
-  const [showSpinner, setShowSpinner] = useState(false);
-  const entryStartedRef = useRef(false);
-  const entryCleanupRef = useRef(null);
-  const runZoomEntry = useCallback(() => {
-    if (entryStartedRef.current) return;
-    if (!getOriginRect || prefersReducedMotion()) return;
-    const img = imgRef.current;
-    const thumb = getOriginRect(index);
-    if (!thumb || !canAnimate(img)) return;
-    const bottomH = bottomBarRef.current?.offsetHeight ?? 0;
-    const lockedMaxHeight = `calc(100vh - ${bottomH + IMG_PADDING * 2}px)`;
-    img.style.maxHeight = lockedMaxHeight;
-    const imgRect = img.getBoundingClientRect();
-    if (imgRect.width === 0 || imgRect.height === 0) {
-      img.style.maxHeight = "";
-      return;
-    }
-    entryStartedRef.current = true;
-    const startTransform = flipTransform(imgRect, thumb);
-    img.style.transformOrigin = "top left";
-    img.style.transform = startTransform;
-    const wrapper = imgWrapperRef.current;
-    if (wrapper) wrapper.style.overflow = "visible";
-    const anim = img.animate(
-      [
-        { transformOrigin: "top left", transform: startTransform },
-        { transformOrigin: "top left", transform: "none" }
-      ],
-      { duration: ANIM_MS, easing: ZOOM_EASE, fill: "forwards" }
-    );
-    const cleanup = () => {
-      img.style.transform = "";
-      img.style.transformOrigin = "";
-      if (wrapper) wrapper.style.overflow = "";
-      img.style.maxHeight = lockedMaxHeight;
-      anim.cancel();
-      entryCleanupRef.current = null;
-    };
-    entryCleanupRef.current = cleanup;
-    anim.onfinish = cleanup;
-  }, [getOriginRect, index, imgRef, imgWrapperRef, bottomBarRef]);
-  const markFullLoaded = useCallback(() => {
-    measureBaseDims();
-    const img = imgRef.current;
-    if (img && typeof img.decode === "function") {
-      img.decode().then(
-        () => setFullLoaded(true),
-        () => setFullLoaded(true)
-      );
-    } else {
-      setFullLoaded(true);
-    }
-  }, [measureBaseDims, imgRef]);
-  useLayoutEffect(() => {
-    const img = imgRef.current;
-    if (img && img.complete && img.naturalWidth > 0) markFullLoaded();
-  }, []);
-  useLayoutEffect(() => {
-    if (fullLoaded) runZoomEntry();
-  }, [fullLoaded]);
-  useEffect(() => {
-    if (!gateEntry || fullLoaded) {
-      setShowSpinner(false);
-      return;
-    }
-    const t = setTimeout(() => setShowSpinner(true), 500);
-    return () => clearTimeout(t);
-  }, [gateEntry, fullLoaded]);
   const handleClose = useCallback(() => {
     const reduce = prefersReducedMotion();
-    const origin = !reduce && !isZoomed ? getOriginRect?.(index) ?? null : null;
-    const thumb = origin && isRectInViewport(origin) ? origin : null;
-    const img = imgRef.current;
-    entryCleanupRef.current?.();
+    settleEntry();
     setClosing(true);
     setVisible(false);
-    if (thumb && canAnimate(img)) {
-      const imgRect = img.getBoundingClientRect();
-      const wrapper = imgWrapperRef.current;
-      if (wrapper) wrapper.style.overflow = "visible";
-      setCollapsing(true);
-      img.animate(
-        [
-          { transformOrigin: "top left", transform: "none" },
-          { transformOrigin: "top left", transform: flipTransform(imgRect, thumb) }
-        ],
-        { duration: ANIM_MS, easing: ZOOM_EASE, fill: "forwards" }
-      );
-    }
+    playCollapse();
     setTimeout(onClose, reduce ? 0 : ANIM_MS);
-  }, [onClose, getOriginRect, index, isZoomed, imgRef, imgWrapperRef]);
+  }, [onClose, settleEntry, playCollapse]);
   const handleBackdropTouchEnd = useCallback(
     (e) => {
       if (e.target !== e.currentTarget) return;
@@ -953,6 +1077,26 @@ function ImageViewer({
     },
     [handleClose]
   );
+  const handleTrackTouchEnd = useCallback(
+    (e) => {
+      gestures.handleTouchEnd(e);
+      if (!closeOnBackdropClick) return;
+      if (e.target !== e.currentTarget) return;
+      if (gestures.gestureMovedRef.current) return;
+      e.preventDefault();
+      handleClose();
+    },
+    [gestures, closeOnBackdropClick, handleClose]
+  );
+  const handleTrackClick = useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (isGhostMouseEvent()) return;
+      if (gestures.gestureMovedRef.current) return;
+      handleClose();
+    },
+    [gestures, isGhostMouseEvent, handleClose]
+  );
   const handleDoubleClickGuarded = useCallback(
     (e) => {
       if (isGhostMouseEvent()) return;
@@ -964,14 +1108,6 @@ function ImageViewer({
     if (isGhostMouseEvent()) return;
     handleClose();
   }, [handleClose, isGhostMouseEvent]);
-  const handleStageClick = useCallback(
-    (e) => {
-      if (e.target !== e.currentTarget) return;
-      if (isGhostMouseEvent()) return;
-      handleClose();
-    },
-    [handleClose, isGhostMouseEvent]
-  );
   const navigate = useCallback(
     (dir) => {
       if (dir === "prev") {
@@ -1051,7 +1187,9 @@ function ImageViewer({
   const prevItem = prevIndex >= 0 ? items[prevIndex] : null;
   const nextItem = nextIndex >= 0 ? items[nextIndex] : null;
   const showAdjacent = slideActive || slideAnimating || swipeOffset !== 0;
-  const adjacentOpacity = Math.min(1, Math.abs(swipeOffset) / (viewportWidth * 0.8 || 1));
+  const adjacentOffset = slideDistance || viewportWidth;
+  const adjacentOpacity = Math.min(1, Math.abs(swipeOffset) / (adjacentOffset * 0.8 || 1));
+  const adjacentTransition = slideAnimating ? "opacity 0.28s cubic-bezier(0.2, 0, 0, 1)" : "none";
   const showZoomCtrls = zoom && !isTouchDevice && showZoomControls && !contentShift.transform;
   const headerActions = renderHeaderActions?.(ctx);
   const navStart = renderNavStart?.(ctx);
@@ -1083,16 +1221,12 @@ function ImageViewer({
           /* @__PURE__ */ jsxs("div", { className: "rvl-header-actions", children: [
             headerActions,
             showZoomCtrls && isZoomed && /* @__PURE__ */ jsxs(
-              "button",
+              ChromeButton,
               {
-                type: "button",
-                className: cx("rvl-btn", "rvl-btn-scale", cn("button")),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  resetTransform();
-                },
+                className: cx("rvl-btn-scale", cn("button")),
+                onClick: resetTransform,
                 title: "Reset zoom",
-                "aria-label": "Reset zoom",
+                ariaLabel: "Reset zoom",
                 children: [
                   Math.round(displayScale * 100),
                   "%"
@@ -1100,44 +1234,32 @@ function ImageViewer({
               }
             ),
             showZoomCtrls && /* @__PURE__ */ jsx(
-              "button",
+              ChromeButton,
               {
-                type: "button",
-                className: cx("rvl-btn", cn("button")),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  ctx.zoomIn();
-                },
+                className: cn("button"),
+                onClick: ctx.zoomIn,
                 title: "Zoom in",
-                "aria-label": "Zoom in",
+                ariaLabel: "Zoom in",
                 children: mergedIcons.zoomIn
               }
             ),
             showZoomCtrls && /* @__PURE__ */ jsx(
-              "button",
+              ChromeButton,
               {
-                type: "button",
-                className: cx("rvl-btn", cn("button")),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  ctx.zoomOut();
-                },
+                className: cn("button"),
+                onClick: ctx.zoomOut,
                 title: "Zoom out",
-                "aria-label": "Zoom out",
+                ariaLabel: "Zoom out",
                 children: mergedIcons.zoomOut
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              ChromeButton,
               {
-                type: "button",
-                className: cx("rvl-btn", cn("button")),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleClose();
-                },
+                className: cn("button"),
+                onClick: handleClose,
                 title: "Close (Esc)",
-                "aria-label": "Close",
+                ariaLabel: "Close",
                 children: mergedIcons.close
               }
             )
@@ -1147,8 +1269,6 @@ function ImageViewer({
           "div",
           {
             className: "rvl-stage",
-            onClick: closeOnBackdropClick ? handleStageClick : void 0,
-            onTouchEnd: closeOnBackdropClick ? handleBackdropTouchEnd : void 0,
             style: {
               transform: contentShift.transform ?? "translateY(0)",
               // animate=false snaps with no transition (overrides the CSS transition)
@@ -1158,8 +1278,19 @@ function ImageViewer({
               "div",
               {
                 ref: slideTrackRef,
+                onPointerDown: gestures.handlePointerDown,
+                onPointerMove: gestures.handlePointerMove,
+                onPointerUp: gestures.handlePointerUp,
+                onPointerLeave: gestures.handlePointerUp,
+                onTouchStart: gestures.handleTouchStart,
+                onTouchMove: gestures.handleTouchMove,
+                onTouchEnd: handleTrackTouchEnd,
+                onClick: closeOnBackdropClick ? handleTrackClick : void 0,
                 className: cx(
                   "rvl-track",
+                  // Promote the track only while a swipe is live (drag + commit/snap
+                  // animation), then release the layer. Matches `showAdjacent`.
+                  showAdjacent && "rvl-track-swiping",
                   // During a thumbnail zoom the track is opaque from the first frame
                   // (the image itself is hidden until the zoom starts), so the picture
                   // flies in crisply instead of cross-fading. On close it only stays
@@ -1172,7 +1303,11 @@ function ImageViewer({
                     "div",
                     {
                       className: "rvl-adjacent",
-                      style: { transform: `translateX(-${viewportWidth}px)`, opacity: adjacentOpacity },
+                      style: {
+                        transform: `translateX(${-adjacentOffset}px)`,
+                        opacity: swipeOffset > 0 ? adjacentOpacity : 0,
+                        transition: adjacentTransition
+                      },
                       children: /* @__PURE__ */ jsx(
                         "img",
                         {
@@ -1192,13 +1327,6 @@ function ImageViewer({
                       className: "rvl-img-wrapper",
                       onClick: (e) => e.stopPropagation(),
                       onDoubleClick: handleDoubleClickGuarded,
-                      onPointerDown: gestures.handlePointerDown,
-                      onPointerMove: gestures.handlePointerMove,
-                      onPointerUp: gestures.handlePointerUp,
-                      onPointerLeave: gestures.handlePointerUp,
-                      onTouchStart: gestures.handleTouchStart,
-                      onTouchMove: gestures.handleTouchMove,
-                      onTouchEnd: gestures.handleTouchEnd,
                       children: /* @__PURE__ */ jsx(
                         "img",
                         {
@@ -1208,8 +1336,8 @@ function ImageViewer({
                           className: cx("rvl-img", cn("image")),
                           style: imgStyle,
                           draggable: false,
-                          onLoad: markFullLoaded,
-                          onError: () => setFullLoaded(true)
+                          onLoad: onImageLoad,
+                          onError: onImageError
                         }
                       )
                     }
@@ -1219,7 +1347,11 @@ function ImageViewer({
                     "div",
                     {
                       className: "rvl-adjacent",
-                      style: { transform: `translateX(${viewportWidth}px)`, opacity: adjacentOpacity },
+                      style: {
+                        transform: `translateX(${adjacentOffset}px)`,
+                        opacity: swipeOffset < 0 ? adjacentOpacity : 0,
+                        transition: adjacentTransition
+                      },
                       children: /* @__PURE__ */ jsx(
                         "img",
                         {