@jekrch/react-viewport-lightbox 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -21,6 +21,15 @@ function clampTranslate(x, y, scale, baseDims, viewport) {
     y: Math.max(-maxY, Math.min(maxY, y))
   };
 }
+function zoomToPoint(prevScale, nextScale, prev, focal, viewport) {
+  const relX = focal.x - viewport.width / 2;
+  const relY = focal.y - viewport.height / 2;
+  const k = nextScale / prevScale;
+  return {
+    x: relX * (1 - k) + k * prev.x,
+    y: relY * (1 - k) + k * prev.y
+  };
+}
 function resolveSlideDirection({
   offset,
   elapsedMs,
@@ -41,7 +50,7 @@ function resolveSlideDirection({
 // src/hooks/useImageZoomPan.ts
 var MIN_SCALE = 1;
 var MAX_SCALE = 5;
-function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true) {
+function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true, zoomToCursor = true) {
   const imgRef = react.useRef(null);
   const [displayScale, setDisplayScale] = react.useState(1);
   const transformRef = react.useRef({ scale: 1, x: 0, y: 0 });
@@ -127,12 +136,26 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true) {
       const step = -(normalized / 100) * 0.05;
       const factor = 1 + step;
       const nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, t.scale * factor));
-      const clamped = nextScale <= 1 ? { x: 0, y: 0 } : clampTranslate2(t.x, t.y, nextScale);
+      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 });
     };
     wrapper.addEventListener("wheel", handleWheel, { passive: false });
     return () => wrapper.removeEventListener("wheel", handleWheel);
-  }, [imgWrapperRef, setTransform, clampTranslate2, enabled]);
+  }, [imgWrapperRef, setTransform, clampTranslate2, enabled, zoomToCursor]);
   const handleDoubleClick = react.useCallback(
     (e) => {
       if (!enabled) return;
@@ -163,15 +186,15 @@ function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true) {
     handleDoubleClick
   };
 }
-function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart) {
+function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart, loop = false) {
   const slideTrackRef = react.useRef(null);
   const swipeOffsetRef = react.useRef(0);
   const [swipeOffset, setSwipeOffset] = react.useState(0);
   const [slideAnimating, setSlideAnimating] = react.useState(false);
   const [slideActive, setSlideActive] = react.useState(false);
   const commitLockRef = react.useRef(false);
-  const hasPrev = currentIndex > 0;
-  const hasNext = currentIndex < items.length - 1;
+  const hasPrev = loop ? items.length > 1 : currentIndex > 0;
+  const hasNext = loop ? items.length > 1 : currentIndex < items.length - 1;
   const applySlideOffset = react.useCallback((offset, animate = false) => {
     swipeOffsetRef.current = offset;
     const track = slideTrackRef.current;
@@ -217,7 +240,8 @@ function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart) {
           if (cleaned) return;
           cleaned = true;
           track?.removeEventListener("transitionend", onTransitionEnd);
-          const newIndex = direction === "prev" ? currentIndex - 1 : currentIndex + 1;
+          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;
@@ -242,7 +266,7 @@ function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart) {
         }
       });
     },
-    [applySlideOffset, currentIndex, items, onNavigate, onSlideStart]
+    [applySlideOffset, currentIndex, items, onNavigate, onSlideStart, loop]
   );
   const resolveSlide = react.useCallback(
     (gestureStartTime) => {
@@ -289,7 +313,7 @@ function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart) {
     setSlideActive
   };
 }
-function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true) {
+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 panRef = react.useRef({
@@ -444,7 +468,23 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true)
         const ratio = dist / p.pinchStartDist;
         const nextScale = Math.min(5, Math.max(1, p.pinchStartScale * ratio));
         const t = transformRef.current;
-        const clamped = nextScale <= 1 ? { x: 0, y: 0 } : clampTranslate2(t.x, t.y, nextScale);
+        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 next = { scale: nextScale, ...clamped };
         transformRef.current = next;
         applyTransform(next);
@@ -463,7 +503,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true)
         updateSlide(touch.clientX, touch.clientY, 6, 0.8);
       }
     },
-    [transformRef, clampTranslate2, applyTransform, updateSlide]
+    [transformRef, clampTranslate2, applyTransform, updateSlide, zoomToCursor]
   );
   const handleTouchEnd = react.useCallback(
     (e) => {
@@ -536,7 +576,7 @@ function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true)
 function useBarMeasure(topBarRef, bottomBarRef, measureKey) {
   const [topBarH, setTopBarH] = react.useState(0);
   const [bottomBarH, setBottomBarH] = react.useState(0);
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     const measure = () => {
       if (topBarRef.current) setTopBarH(topBarRef.current.offsetHeight);
       if (bottomBarRef.current) setBottomBarH(bottomBarRef.current.offsetHeight);
@@ -552,16 +592,29 @@ function useBarMeasure(topBarRef, bottomBarRef, measureKey) {
 var lockCount = 0;
 var previousOverflow = "";
 var previousPaddingRight = "";
+var previousPosition = "";
+var previousTop = "";
+var previousWidth = "";
+var lockedScrollY = 0;
 function useBodyScrollLock(isLocked) {
   react.useEffect(() => {
     if (!isLocked) return;
     if (typeof document === "undefined") return;
     if (lockCount === 0) {
       const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      const rootGutter = window.getComputedStyle(document.documentElement).scrollbarGutter;
+      const reservesGutter = typeof rootGutter === "string" && rootGutter.includes("stable");
+      lockedScrollY = window.scrollY;
       previousOverflow = document.body.style.overflow;
       previousPaddingRight = document.body.style.paddingRight;
+      previousPosition = document.body.style.position;
+      previousTop = document.body.style.top;
+      previousWidth = document.body.style.width;
       document.body.style.overflow = "hidden";
-      if (scrollbarWidth > 0) {
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${lockedScrollY}px`;
+      document.body.style.width = "100%";
+      if (scrollbarWidth > 0 && !reservesGutter) {
         const currentPaddingRight = parseFloat(window.getComputedStyle(document.body).paddingRight) || 0;
         document.body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;
       }
@@ -572,6 +625,10 @@ function useBodyScrollLock(isLocked) {
       if (lockCount === 0) {
         document.body.style.overflow = previousOverflow;
         document.body.style.paddingRight = previousPaddingRight;
+        document.body.style.position = previousPosition;
+        document.body.style.top = previousTop;
+        document.body.style.width = previousWidth;
+        window.scrollTo(0, lockedScrollY);
       }
     };
   }, [isLocked]);
@@ -684,23 +741,48 @@ function NavButton({ direction, enabled, onClick, icon, className }) {
 }
 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 ImageViewer({
   items,
   index,
   onIndexChange,
   onNavigate,
   onClose,
+  onEscape,
+  getOriginRect,
   zoom = true,
+  zoomToCursor = true,
   showCounter = true,
+  showZoomControls = true,
+  disableNavigation = false,
   loop = false,
+  closeOnBackdropClick = false,
   renderHeader,
   renderHeaderActions,
   renderNavStart,
   renderNavEnd,
+  navSlotPlacement = "edge",
+  navHeight,
+  navInset,
+  counterFontSize,
   renderFooter,
   renderOverlay,
   classNames,
@@ -709,6 +791,7 @@ function ImageViewer({
 }) {
   const [visible, setVisible] = react.useState(false);
   const [closing, setClosing] = react.useState(false);
+  const [collapsing, setCollapsing] = react.useState(false);
   const [isTouchDevice, setIsTouchDevice] = react.useState(false);
   const [contentShift, setContentShiftState] = react.useState({ transform: null, animate: true });
   const containerRef = react.useRef(null);
@@ -728,7 +811,7 @@ function ImageViewer({
   useBodyScrollLock(true);
   useFocusTrap(containerRef, visible && !closing);
   const { topBarH, bottomBarH } = useBarMeasure(topBarRef, bottomBarRef, index);
-  const zoomPan = useImageZoomPan(imgWrapperRef, index, zoom);
+  const zoomPan = useImageZoomPan(imgWrapperRef, index, zoom, zoomToCursor);
   const {
     imgRef,
     displayScale,
@@ -740,11 +823,19 @@ function ImageViewer({
     measureBaseDims,
     handleDoubleClick
   } = zoomPan;
-  const slide = useSlideNavigation(items, index, onIndexChange, onNavigate);
+  const slide = useSlideNavigation(items, index, onIndexChange, onNavigate, loop);
   const { slideTrackRef, slideActive, slideAnimating, swipeOffset, commitSlide } = slide;
-  const gestures = useGestureHandler(zoomPan, slide, hasPrevLinear, hasNextLinear, zoom);
+  const gestures = useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoom, zoomToCursor);
   react.useEffect(() => {
-    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    if (typeof window === "undefined" || !window.matchMedia) {
+      setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+      return;
+    }
+    const mq = window.matchMedia("(hover: none) and (pointer: coarse)");
+    const update = () => setIsTouchDevice(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
   }, []);
   react.useEffect(() => {
     const onResize = () => setViewportWidth(window.innerWidth);
@@ -755,43 +846,125 @@ function ImageViewer({
     const raf = requestAnimationFrame(() => setVisible(true));
     return () => cancelAnimationFrame(raf);
   }, []);
+  const zoomTransition = !!getOriginRect;
+  const reduceMotion = prefersReducedMotion();
+  const gateEntry = zoomTransition && !reduceMotion;
+  const [fullLoaded, setFullLoaded] = react.useState(false);
+  const [showSpinner, setShowSpinner] = react.useState(false);
+  const entryStartedRef = react.useRef(false);
+  const entryCleanupRef = react.useRef(null);
+  const runZoomEntry = react.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 = react.useCallback(() => {
+    measureBaseDims();
+    const img = imgRef.current;
+    if (img && typeof img.decode === "function") {
+      img.decode().then(
+        () => setFullLoaded(true),
+        () => setFullLoaded(true)
+      );
+    } else {
+      setFullLoaded(true);
+    }
+  }, [measureBaseDims, imgRef]);
+  react.useLayoutEffect(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalWidth > 0) markFullLoaded();
+  }, []);
+  react.useLayoutEffect(() => {
+    if (fullLoaded) runZoomEntry();
+  }, [fullLoaded]);
+  react.useEffect(() => {
+    if (!gateEntry || fullLoaded) {
+      setShowSpinner(false);
+      return;
+    }
+    const t = setTimeout(() => setShowSpinner(true), 500);
+    return () => clearTimeout(t);
+  }, [gateEntry, fullLoaded]);
   const handleClose = react.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?.();
     setClosing(true);
     setVisible(false);
-    const delay = prefersReducedMotion() ? 0 : ANIM_MS;
-    setTimeout(onClose, delay);
-  }, [onClose]);
+    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" }
+      );
+    }
+    setTimeout(onClose, reduce ? 0 : ANIM_MS);
+  }, [onClose, getOriginRect, index, isZoomed, imgRef, imgWrapperRef]);
   const navigate = react.useCallback(
     (dir) => {
       if (dir === "prev") {
-        if (hasPrevLinear) commitSlide("prev");
-        else if (loop) {
-          onNavigate?.("prev");
-          onIndexChange(items.length - 1);
-        }
+        if (hasPrev) commitSlide("prev");
       } else {
-        if (hasNextLinear) commitSlide("next");
-        else if (loop) {
-          onNavigate?.("next");
-          onIndexChange(0);
-        }
+        if (hasNext) commitSlide("next");
       }
     },
-    [hasPrevLinear, hasNextLinear, loop, commitSlide, onIndexChange, onNavigate, items.length]
+    [hasPrev, hasNext, commitSlide]
   );
   react.useEffect(() => {
     const handler = (e) => {
       if (e.key === "Escape") {
+        if (onEscape?.()) return;
         handleClose();
         return;
       }
-      if (displayScale > 1) return;
+      if (disableNavigation || displayScale > 1) return;
       if (e.key === "ArrowLeft" && hasPrev) navigate("prev");
       if (e.key === "ArrowRight" && hasNext) navigate("next");
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [handleClose, hasPrev, hasNext, displayScale, navigate]);
+  }, [handleClose, hasPrev, hasNext, displayScale, navigate, onEscape, disableNavigation]);
   const setContentShift = react.useCallback((transform, animate = true) => {
     setContentShiftState({ transform, animate });
   }, []);
@@ -800,6 +973,7 @@ function ImageViewer({
     index,
     item,
     total: items.length,
+    closing,
     hasPrev,
     hasNext,
     goPrev: () => navigate("prev"),
@@ -832,13 +1006,22 @@ function ImageViewer({
   const reservedH = bottomBarH + IMG_PADDING * 2;
   const imgMaxHeight = `calc(100vh - ${reservedH}px)`;
   const imgStyle = { maxHeight: imgMaxHeight };
+  const dim = (v) => typeof v === "number" ? `${v}px` : v;
+  const rootStyle = {
+    ...navHeight != null && { "--rvl-nav-height": dim(navHeight) },
+    ...navInset != null && { "--rvl-nav-inset": dim(navInset) },
+    ...counterFontSize != null && { "--rvl-counter-font-size": dim(counterFontSize) }
+  };
+  if (gateEntry && !fullLoaded) imgStyle.opacity = 0;
   const totalDigits = String(items.length).length;
   const counterMinWidth = `${totalDigits * 2 * 0.6 + 1.5}em`;
-  const prevItem = hasPrevLinear ? items[index - 1] : null;
-  const nextItem = hasNextLinear ? items[index + 1] : null;
+  const prevIndex = hasPrevLinear ? index - 1 : hasPrev ? items.length - 1 : -1;
+  const nextIndex = hasNextLinear ? index + 1 : hasNext ? 0 : -1;
+  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 showZoomControls = zoom && !isTouchDevice;
+  const showZoomCtrls = zoom && !isTouchDevice && showZoomControls && !contentShift.transform;
   const headerActions = renderHeaderActions?.(ctx);
   const navStart = renderNavStart?.(ctx);
   const navEnd = renderNavEnd?.(ctx);
@@ -853,12 +1036,13 @@ function ImageViewer({
       "aria-modal": "true",
       "aria-label": ariaLabel ?? item.alt ?? "Image viewer",
       tabIndex: -1,
+      style: rootStyle,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cx("rvl-backdrop", cn("backdrop")),
-            onClick: handleClose,
+            onClick: closeOnBackdropClick ? handleClose : void 0,
             "aria-hidden": "true"
           }
         ),
@@ -866,7 +1050,7 @@ function ImageViewer({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("rvl-header", cn("topBar")), children: renderHeader?.(ctx) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rvl-header-actions", children: [
             headerActions,
-            showZoomControls && isZoomed && /* @__PURE__ */ jsxRuntime.jsxs(
+            showZoomCtrls && isZoomed && /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
@@ -883,7 +1067,7 @@ function ImageViewer({
                 ]
               }
             ),
-            showZoomControls && /* @__PURE__ */ jsxRuntime.jsx(
+            showZoomCtrls && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
@@ -897,7 +1081,7 @@ function ImageViewer({
                 children: mergedIcons.zoomIn
               }
             ),
-            showZoomControls && /* @__PURE__ */ jsxRuntime.jsx(
+            showZoomCtrls && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
@@ -931,6 +1115,9 @@ function ImageViewer({
           "div",
           {
             className: "rvl-stage",
+            onClick: closeOnBackdropClick ? (e) => {
+              if (e.target === e.currentTarget) handleClose();
+            } : void 0,
             style: {
               transform: contentShift.transform ?? "translateY(0)",
               // animate=false snaps with no transition (overrides the CSS transition)
@@ -940,7 +1127,15 @@ function ImageViewer({
               "div",
               {
                 ref: slideTrackRef,
-                className: cx("rvl-track", visible && !closing && "rvl-track-visible"),
+                className: cx(
+                  "rvl-track",
+                  // 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
+                  // opaque while a FLIP collapse is animating the image back; otherwise
+                  // it fades out (so a zoomed close still animates instead of vanishing).
+                  (closing ? collapsing : zoomTransition || visible) && "rvl-track-visible"
+                ),
                 children: [
                   showAdjacent && prevItem && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
@@ -982,11 +1177,13 @@ function ImageViewer({
                           className: cx("rvl-img", cn("image")),
                           style: imgStyle,
                           draggable: false,
-                          onLoad: measureBaseDims
+                          onLoad: markFullLoaded,
+                          onError: () => setFullLoaded(true)
                         }
                       )
                     }
                   ),
+                  gateEntry && showSpinner && !fullLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("rvl-spinner", cn("spinner")), role: "status", "aria-label": "Loading", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rvl-spinner-ring", "aria-hidden": "true" }) }),
                   showAdjacent && nextItem && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
@@ -1010,7 +1207,7 @@ function ImageViewer({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: bottomBarRef, className: cx("rvl-bar", "rvl-bottom-bar", cn("bottomBar")), children: [
-          showNavRow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rvl-nav-row", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rvl-nav-inner", children: [
+          showNavRow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rvl-nav-row", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("rvl-nav-inner", navSlotPlacement === "inline" && "rvl-nav-inline"), children: [
             navStart != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("rvl-nav-start", cn("navStart")), children: navStart }),
             hasNavGroup && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rvl-nav-group", children: [
               /* @__PURE__ */ jsxRuntime.jsx(