@jekrch/react-viewport-lightbox 0.1.0

package/dist/index.js

@@ -0,0 +1,1059 @@
+import { useRef, useState, useCallback, useLayoutEffect, useEffect, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ImageViewer.tsx
+
+// src/hooks/math.ts
+function clampTranslate(x, y, scale, baseDims, viewport) {
+  if (scale <= 1) return { x: 0, y: 0 };
+  const { width: baseW, height: baseH } = baseDims;
+  if (baseW === 0 || baseH === 0) return { x: 0, y: 0 };
+  const scaledHalfW = baseW * scale / 2;
+  const scaledHalfH = baseH * scale / 2;
+  const vpHalfW = viewport.width / 2;
+  const vpHalfH = viewport.height / 2;
+  const maxX = Math.max(0, scaledHalfW - vpHalfW);
+  const maxY = Math.max(0, scaledHalfH - vpHalfH);
+  return {
+    x: Math.max(-maxX, Math.min(maxX, x)),
+    y: Math.max(-maxY, Math.min(maxY, y))
+  };
+}
+function resolveSlideDirection({
+  offset,
+  elapsedMs,
+  viewportWidth,
+  hasPrev,
+  hasNext,
+  distanceThreshold = 0.25,
+  velocityThreshold = 0.4
+}) {
+  const velocity = Math.abs(offset) / Math.max(elapsedMs, 1);
+  const threshold = viewportWidth * distanceThreshold;
+  const committed = Math.abs(offset) > threshold || velocity > velocityThreshold;
+  if (offset > 0 && hasPrev && committed) return "prev";
+  if (offset < 0 && hasNext && committed) return "next";
+  return "snap";
+}
+
+// src/hooks/useImageZoomPan.ts
+var MIN_SCALE = 1;
+var MAX_SCALE = 5;
+function useImageZoomPan(imgWrapperRef, currentIndex, enabled = true) {
+  const imgRef = useRef(null);
+  const [displayScale, setDisplayScale] = useState(1);
+  const transformRef = useRef({ scale: 1, x: 0, y: 0 });
+  const baseDimsRef = useRef({ width: 0, height: 0 });
+  const applyTransform = useCallback(
+    (t, animate = false) => {
+      const wrapper = imgWrapperRef.current;
+      if (!wrapper) return;
+      wrapper.style.transition = 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 = "";
+      } else {
+        wrapper.style.transform = `scale(${t.scale}) translate(${t.x / t.scale}px, ${t.y / t.scale}px)`;
+        wrapper.style.position = "absolute";
+        wrapper.style.inset = "0";
+        wrapper.style.zIndex = "30";
+        wrapper.style.backgroundColor = "black";
+        wrapper.style.cursor = "grab";
+      }
+      setDisplayScale(t.scale);
+    },
+    [imgWrapperRef]
+  );
+  const setTransform = useCallback(
+    (t, animate = false) => {
+      transformRef.current = t;
+      applyTransform(t, animate);
+      setDisplayScale(t.scale);
+    },
+    [applyTransform]
+  );
+  const resetTransform = useCallback(() => {
+    setTransform({ scale: 1, x: 0, y: 0 }, true);
+  }, [setTransform]);
+  const measureBaseDims = useCallback(() => {
+    const img = imgRef.current;
+    if (!img) return;
+    baseDimsRef.current = { width: img.offsetWidth, height: img.offsetHeight };
+  }, []);
+  const clampTranslate2 = useCallback(
+    (x, y, scale) => clampTranslate(x, y, scale, baseDimsRef.current, {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }),
+    []
+  );
+  useLayoutEffect(() => {
+    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 = "";
+    }
+    transformRef.current = { scale: 1, x: 0, y: 0 };
+  }, [currentIndex, imgWrapperRef]);
+  useEffect(() => {
+    setDisplayScale(1);
+  }, [currentIndex]);
+  useEffect(() => {
+    if (!enabled) return;
+    const wrapper = imgWrapperRef.current;
+    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 };
+      }
+      const t = transformRef.current;
+      let dy = e.deltaY;
+      if (e.deltaMode === 1) dy *= 16;
+      if (e.deltaMode === 2) dy *= 100;
+      const normalized = Math.max(-100, Math.min(100, dy));
+      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);
+      setTransform({ scale: nextScale, ...clamped });
+    };
+    wrapper.addEventListener("wheel", handleWheel, { passive: false });
+    return () => wrapper.removeEventListener("wheel", handleWheel);
+  }, [imgWrapperRef, setTransform, clampTranslate2, enabled]);
+  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 };
+      }
+      if (transformRef.current.scale > 1) {
+        resetTransform();
+      } else {
+        setTransform({ scale: 1.8, x: 0, y: 0 }, true);
+      }
+    },
+    [resetTransform, setTransform, enabled]
+  );
+  return {
+    imgRef,
+    displayScale,
+    isZoomed: displayScale > 1,
+    transformRef,
+    baseDimsRef,
+    resetTransform,
+    setTransform,
+    applyTransform,
+    clampTranslate: clampTranslate2,
+    measureBaseDims,
+    handleDoubleClick
+  };
+}
+function useSlideNavigation(items, currentIndex, onNavigate, onSlideStart) {
+  const slideTrackRef = useRef(null);
+  const swipeOffsetRef = useRef(0);
+  const [swipeOffset, setSwipeOffset] = useState(0);
+  const [slideAnimating, setSlideAnimating] = useState(false);
+  const [slideActive, setSlideActive] = useState(false);
+  const commitLockRef = useRef(false);
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex < items.length - 1;
+  const applySlideOffset = useCallback((offset, animate = false) => {
+    swipeOffsetRef.current = offset;
+    const track = slideTrackRef.current;
+    if (track) {
+      track.style.transition = animate ? "transform 0.28s cubic-bezier(0.2, 0, 0, 1)" : "none";
+      track.style.transform = `translateX(${offset}px)`;
+    }
+    setSwipeOffset(offset);
+  }, []);
+  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);
+    }
+  }, [applySlideOffset]);
+  const readyRef = useRef(true);
+  const commitSlide = useCallback(
+    (direction) => {
+      if (commitLockRef.current || !readyRef.current) return;
+      commitLockRef.current = true;
+      readyRef.current = false;
+      const vw = window.innerWidth;
+      const targetOffset = direction === "prev" ? vw : -vw;
+      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);
+          const newIndex = direction === "prev" ? currentIndex - 1 : currentIndex + 1;
+          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);
+        }
+      });
+    },
+    [applySlideOffset, currentIndex, items, onNavigate, onSlideStart]
+  );
+  const resolveSlide = useCallback(
+    (gestureStartTime) => {
+      const action = resolveSlideDirection({
+        offset: swipeOffsetRef.current,
+        elapsedMs: Date.now() - gestureStartTime,
+        viewportWidth: window.innerWidth,
+        hasPrev,
+        hasNext
+      });
+      if (action === "prev") commitSlide("prev");
+      else if (action === "next") commitSlide("next");
+      else snapBack();
+    },
+    [hasPrev, hasNext, commitSlide, snapBack]
+  );
+  useLayoutEffect(() => {
+    const track = slideTrackRef.current;
+    if (track) {
+      track.style.transition = "none";
+      track.offsetHeight;
+      track.style.transform = "translateX(0px)";
+    }
+    swipeOffsetRef.current = 0;
+    commitLockRef.current = false;
+  }, [currentIndex]);
+  useEffect(() => {
+    setSwipeOffset(0);
+    setSlideAnimating(false);
+    setSlideActive(false);
+    readyRef.current = true;
+  }, [currentIndex]);
+  return {
+    slideTrackRef,
+    slideActive,
+    slideAnimating,
+    swipeOffset,
+    swipeOffsetRef,
+    commitLockRef,
+    applySlideOffset,
+    commitSlide,
+    snapBack,
+    resolveSlide,
+    setSlideActive
+  };
+}
+function useGestureHandler(zoomPan, slide, hasPrev, hasNext, zoomEnabled = true) {
+  const { transformRef, clampTranslate: clampTranslate2, setTransform, applyTransform, resetTransform } = zoomPan;
+  const { applySlideOffset, resolveSlide, snapBack, setSlideActive, swipeOffsetRef } = slide;
+  const panRef = useRef({
+    isDragging: false,
+    pointerStart: { x: 0, y: 0 },
+    translateStart: { x: 0, y: 0 },
+    pinchStartDist: null,
+    pinchStartScale: 1,
+    pinchMidpoint: null,
+    lastTouchPos: null
+  });
+  const slideRef = useRef({
+    active: false,
+    startX: 0,
+    startY: 0,
+    startTime: 0,
+    locked: false,
+    rejected: false
+  });
+  const lastTapRef = useRef({
+    time: 0,
+    x: 0,
+    y: 0
+  });
+  const beginSlide = useCallback(
+    (x, y) => {
+      setSlideActive(true);
+      const sg = slideRef.current;
+      sg.active = true;
+      sg.startX = x;
+      sg.startY = y;
+      sg.startTime = Date.now();
+      sg.locked = false;
+      sg.rejected = false;
+    },
+    [setSlideActive]
+  );
+  const updateSlide = useCallback(
+    (clientX, clientY, lockThreshold, angleBias) => {
+      const sg = slideRef.current;
+      if (!sg.active || sg.rejected) return;
+      const dx = clientX - sg.startX;
+      const dy = clientY - sg.startY;
+      if (!sg.locked) {
+        const absDx = Math.abs(dx);
+        const absDy = Math.abs(dy);
+        if (absDx < lockThreshold && absDy < lockThreshold) return;
+        if (absDy > absDx * angleBias) {
+          sg.rejected = true;
+          return;
+        }
+        sg.locked = true;
+      }
+      let offset = dx;
+      if (offset > 0 && !hasPrev || offset < 0 && !hasNext) {
+        offset *= 0.2;
+      }
+      applySlideOffset(offset);
+    },
+    [hasPrev, hasNext, applySlideOffset]
+  );
+  const endSlide = useCallback(
+    (allowResolve) => {
+      const sg = slideRef.current;
+      if (sg.active && sg.locked && !sg.rejected && allowResolve) {
+        const startTime = sg.startTime;
+        sg.active = false;
+        resolveSlide(startTime);
+      } else {
+        sg.active = false;
+        if (swipeOffsetRef.current === 0) setSlideActive(false);
+      }
+    },
+    [resolveSlide, setSlideActive, swipeOffsetRef]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (e.pointerType === "touch") return;
+      if (transformRef.current.scale > 1) {
+        e.preventDefault();
+        const p = panRef.current;
+        p.isDragging = true;
+        p.pointerStart = { x: e.clientX, y: e.clientY };
+        p.translateStart = { x: transformRef.current.x, y: transformRef.current.y };
+      } else {
+        beginSlide(e.clientX, e.clientY);
+      }
+    },
+    [transformRef, beginSlide]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (e.pointerType === "touch") return;
+      const p = panRef.current;
+      if (p.isDragging && transformRef.current.scale > 1) {
+        const dx = e.clientX - p.pointerStart.x;
+        const dy = e.clientY - p.pointerStart.y;
+        const t = transformRef.current;
+        const clamped = clampTranslate2(p.translateStart.x + dx, p.translateStart.y + dy, t.scale);
+        setTransform({ scale: t.scale, ...clamped });
+        return;
+      }
+      updateSlide(e.clientX, e.clientY, 4, 1);
+    },
+    [transformRef, clampTranslate2, setTransform, updateSlide]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      if (e.pointerType === "touch") return;
+      panRef.current.isDragging = false;
+      endSlide(true);
+    },
+    [endSlide]
+  );
+  const handleTouchStart = useCallback(
+    (e) => {
+      const p = panRef.current;
+      if (e.touches.length === 2 && zoomEnabled) {
+        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);
+        p.pinchStartScale = transformRef.current.scale;
+        p.pinchMidpoint = {
+          x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
+          y: (e.touches[0].clientY + e.touches[1].clientY) / 2
+        };
+        p.lastTouchPos = null;
+        if (slideRef.current.active) {
+          slideRef.current.active = false;
+          snapBack();
+        }
+      } else if (e.touches.length === 1) {
+        if (transformRef.current.scale > 1) {
+          p.lastTouchPos = {
+            x: e.touches[0].clientX,
+            y: e.touches[0].clientY
+          };
+        } else {
+          beginSlide(e.touches[0].clientX, e.touches[0].clientY);
+        }
+      }
+    },
+    [transformRef, snapBack, beginSlide, zoomEnabled]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      const p = panRef.current;
+      if (e.touches.length === 2 && p.pinchStartDist !== null) {
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        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 t = transformRef.current;
+        const clamped = nextScale <= 1 ? { x: 0, y: 0 } : clampTranslate2(t.x, t.y, nextScale);
+        const next = { scale: nextScale, ...clamped };
+        transformRef.current = next;
+        applyTransform(next);
+      } else if (e.touches.length === 1 && p.lastTouchPos && transformRef.current.scale > 1) {
+        const touch = e.touches[0];
+        const dx = touch.clientX - p.lastTouchPos.x;
+        const dy = touch.clientY - p.lastTouchPos.y;
+        p.lastTouchPos = { x: touch.clientX, y: touch.clientY };
+        const t = transformRef.current;
+        const clamped = clampTranslate2(t.x + dx, t.y + dy, t.scale);
+        const next = { scale: t.scale, ...clamped };
+        transformRef.current = next;
+        applyTransform(next);
+      } else if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        updateSlide(touch.clientX, touch.clientY, 6, 0.8);
+      }
+    },
+    [transformRef, clampTranslate2, applyTransform, updateSlide]
+  );
+  const handleTouchEnd = useCallback(
+    (e) => {
+      const p = panRef.current;
+      const wasPinch = p.pinchStartDist !== null;
+      p.pinchStartDist = null;
+      p.pinchMidpoint = null;
+      if (e.touches.length === 0 && transformRef.current.scale <= 1) {
+        const sg2 = slideRef.current;
+        if (sg2.active && sg2.locked && !sg2.rejected) {
+          const startTime = sg2.startTime;
+          sg2.active = false;
+          resolveSlide(startTime);
+          transformRef.current = { scale: 1, x: 0, y: 0 };
+          return;
+        }
+        sg2.active = false;
+        resetTransform();
+      }
+      if (e.touches.length === 1 && transformRef.current.scale > 1) {
+        p.lastTouchPos = {
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY
+        };
+      } else {
+        p.lastTouchPos = null;
+      }
+      const sg = slideRef.current;
+      if (zoomEnabled && e.touches.length === 0 && e.changedTouches.length === 1 && !wasPinch && !sg.locked) {
+        const touch = e.changedTouches[0];
+        const now = Date.now();
+        const last = lastTapRef.current;
+        const timeDelta = now - last.time;
+        const distDelta = Math.hypot(touch.clientX - last.x, touch.clientY - last.y);
+        if (timeDelta < 300 && distDelta < 30) {
+          lastTapRef.current = { time: 0, x: 0, y: 0 };
+          if (transformRef.current.scale > 1) {
+            resetTransform();
+          } else {
+            setTransform({ scale: 2.5, x: 0, y: 0 }, true);
+          }
+        } else {
+          lastTapRef.current = { time: now, x: touch.clientX, y: touch.clientY };
+        }
+      }
+      if (e.touches.length === 0 && sg.active && !sg.locked) {
+        sg.active = false;
+        if (swipeOffsetRef.current === 0) setSlideActive(false);
+      }
+    },
+    [
+      transformRef,
+      resetTransform,
+      setTransform,
+      resolveSlide,
+      setSlideActive,
+      swipeOffsetRef,
+      zoomEnabled
+    ]
+  );
+  return {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd
+  };
+}
+function useBarMeasure(topBarRef, bottomBarRef, measureKey) {
+  const [topBarH, setTopBarH] = useState(0);
+  const [bottomBarH, setBottomBarH] = useState(0);
+  useEffect(() => {
+    const measure = () => {
+      if (topBarRef.current) setTopBarH(topBarRef.current.offsetHeight);
+      if (bottomBarRef.current) setBottomBarH(bottomBarRef.current.offsetHeight);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (topBarRef.current) ro.observe(topBarRef.current);
+    if (bottomBarRef.current) ro.observe(bottomBarRef.current);
+    return () => ro.disconnect();
+  }, [measureKey]);
+  return { topBarH, bottomBarH };
+}
+var lockCount = 0;
+var previousOverflow = "";
+var previousPaddingRight = "";
+function useBodyScrollLock(isLocked) {
+  useEffect(() => {
+    if (!isLocked) return;
+    if (typeof document === "undefined") return;
+    if (lockCount === 0) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      previousOverflow = document.body.style.overflow;
+      previousPaddingRight = document.body.style.paddingRight;
+      document.body.style.overflow = "hidden";
+      if (scrollbarWidth > 0) {
+        const currentPaddingRight = parseFloat(window.getComputedStyle(document.body).paddingRight) || 0;
+        document.body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;
+      }
+    }
+    lockCount += 1;
+    return () => {
+      lockCount -= 1;
+      if (lockCount === 0) {
+        document.body.style.overflow = previousOverflow;
+        document.body.style.paddingRight = previousPaddingRight;
+      }
+    };
+  }, [isLocked]);
+}
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+function useFocusTrap(containerRef, active) {
+  useEffect(() => {
+    if (!active) return;
+    if (typeof document === "undefined") return;
+    const previouslyFocused = document.activeElement;
+    const container = containerRef.current;
+    container?.focus();
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab" || !container) return;
+      const focusable = Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement
+      );
+      if (focusable.length === 0) {
+        e.preventDefault();
+        container.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const activeEl = document.activeElement;
+      if (e.shiftKey && (activeEl === first || activeEl === container)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && activeEl === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      previouslyFocused?.focus?.();
+    };
+  }, [containerRef, active]);
+}
+function base(props) {
+  return {
+    width: 18,
+    height: 18,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    focusable: false,
+    ...props
+  };
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+  ] });
+}
+function ZoomInIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" }),
+    /* @__PURE__ */ jsx("path", { d: "M11 8v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 11h6" })
+  ] });
+}
+function ZoomOutIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 11h6" })
+  ] });
+}
+function ChevronLeftIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base({ width: 36, height: 36, strokeWidth: 1.5, ...props }), children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base({ width: 36, height: 36, strokeWidth: 1.5, ...props }), children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+}
+var defaultIcons = {
+  close: /* @__PURE__ */ jsx(CloseIcon, {}),
+  zoomIn: /* @__PURE__ */ jsx(ZoomInIcon, {}),
+  zoomOut: /* @__PURE__ */ jsx(ZoomOutIcon, {}),
+  prev: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+  next: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+};
+
+// src/components/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function NavButton({ direction, enabled, onClick, icon, className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        if (enabled) onClick();
+      },
+      disabled: !enabled,
+      className: cx("rvl-nav-btn", className),
+      "aria-label": direction === "prev" ? "Previous image" : "Next image",
+      children: icon
+    }
+  );
+}
+var ANIM_MS = 250;
+var IMG_PADDING = 44;
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function ImageViewer({
+  items,
+  index,
+  onIndexChange,
+  onNavigate,
+  onClose,
+  zoom = true,
+  showCounter = true,
+  loop = false,
+  renderHeader,
+  renderHeaderActions,
+  renderNavStart,
+  renderNavEnd,
+  renderFooter,
+  renderOverlay,
+  classNames,
+  icons,
+  ariaLabel
+}) {
+  const [visible, setVisible] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const [contentShift, setContentShiftState] = useState({ transform: null, animate: true });
+  const containerRef = useRef(null);
+  const imgWrapperRef = useRef(null);
+  const topBarRef = useRef(null);
+  const bottomBarRef = useRef(null);
+  const [viewportWidth, setViewportWidth] = useState(
+    () => typeof window === "undefined" ? 0 : window.innerWidth
+  );
+  const item = items[index];
+  const hasPrevLinear = index > 0;
+  const hasNextLinear = index < items.length - 1;
+  const hasPrev = loop ? items.length > 1 : hasPrevLinear;
+  const hasNext = loop ? items.length > 1 : hasNextLinear;
+  const mergedIcons = useMemo(() => ({ ...defaultIcons, ...icons }), [icons]);
+  const cn = (slot) => classNames?.[slot];
+  useBodyScrollLock(true);
+  useFocusTrap(containerRef, visible && !closing);
+  const { topBarH, bottomBarH } = useBarMeasure(topBarRef, bottomBarRef, index);
+  const zoomPan = useImageZoomPan(imgWrapperRef, index, zoom);
+  const {
+    imgRef,
+    displayScale,
+    isZoomed,
+    transformRef,
+    resetTransform,
+    setTransform,
+    clampTranslate: clampTranslate2,
+    measureBaseDims,
+    handleDoubleClick
+  } = zoomPan;
+  const slide = useSlideNavigation(items, index, onIndexChange, onNavigate);
+  const { slideTrackRef, slideActive, slideAnimating, swipeOffset, commitSlide } = slide;
+  const gestures = useGestureHandler(zoomPan, slide, hasPrevLinear, hasNextLinear, zoom);
+  useEffect(() => {
+    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+  }, []);
+  useEffect(() => {
+    const onResize = () => setViewportWidth(window.innerWidth);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  const handleClose = useCallback(() => {
+    setClosing(true);
+    setVisible(false);
+    const delay = prefersReducedMotion() ? 0 : ANIM_MS;
+    setTimeout(onClose, delay);
+  }, [onClose]);
+  const navigate = useCallback(
+    (dir) => {
+      if (dir === "prev") {
+        if (hasPrevLinear) commitSlide("prev");
+        else if (loop) {
+          onNavigate?.("prev");
+          onIndexChange(items.length - 1);
+        }
+      } else {
+        if (hasNextLinear) commitSlide("next");
+        else if (loop) {
+          onNavigate?.("next");
+          onIndexChange(0);
+        }
+      }
+    },
+    [hasPrevLinear, hasNextLinear, loop, commitSlide, onIndexChange, onNavigate, items.length]
+  );
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+        return;
+      }
+      if (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]);
+  const setContentShift = useCallback((transform, animate = true) => {
+    setContentShiftState({ transform, animate });
+  }, []);
+  const ctx = {
+    items,
+    index,
+    item,
+    total: items.length,
+    hasPrev,
+    hasNext,
+    goPrev: () => navigate("prev"),
+    goNext: () => navigate("next"),
+    goTo: (i) => {
+      if (i !== index && i >= 0 && i < items.length) onIndexChange(i);
+    },
+    close: handleClose,
+    isZoomed,
+    displayScale,
+    zoomIn: () => {
+      const t = transformRef.current;
+      const next = Math.min(MAX_SCALE, t.scale * 1.3);
+      const clamped = clampTranslate2(t.x, t.y, next);
+      setTransform({ scale: next, ...clamped }, true);
+    },
+    zoomOut: () => {
+      const t = transformRef.current;
+      const next = Math.max(MIN_SCALE, t.scale / 1.3);
+      const clamped = next <= 1 ? { x: 0, y: 0 } : clampTranslate2(t.x, t.y, next);
+      setTransform({ scale: next, ...clamped }, true);
+    },
+    resetZoom: resetTransform,
+    isTouchDevice,
+    topBarHeight: topBarH,
+    bottomBarHeight: bottomBarH,
+    setContentShift
+  };
+  if (!item) return null;
+  const reservedH = bottomBarH + IMG_PADDING * 2;
+  const imgMaxHeight = `calc(100vh - ${reservedH}px)`;
+  const imgStyle = { maxHeight: imgMaxHeight };
+  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 showAdjacent = slideActive || slideAnimating || swipeOffset !== 0;
+  const adjacentOpacity = Math.min(1, Math.abs(swipeOffset) / (viewportWidth * 0.8 || 1));
+  const showZoomControls = zoom && !isTouchDevice;
+  const headerActions = renderHeaderActions?.(ctx);
+  const navStart = renderNavStart?.(ctx);
+  const navEnd = renderNavEnd?.(ctx);
+  const hasNavGroup = hasPrev || hasNext;
+  const showNavRow = !isZoomed && (hasNavGroup || navStart != null || navEnd != null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cx("rvl-root", visible && !closing && "rvl-visible", cn("root")),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel ?? item.alt ?? "Image viewer",
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx("rvl-backdrop", cn("backdrop")),
+            onClick: handleClose,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ref: topBarRef, className: cx("rvl-bar", "rvl-top-bar", cn("topBar")), children: [
+          /* @__PURE__ */ jsx("div", { className: cx("rvl-header", cn("topBar")), children: renderHeader?.(ctx) }),
+          /* @__PURE__ */ jsxs("div", { className: "rvl-header-actions", children: [
+            headerActions,
+            showZoomControls && isZoomed && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cx("rvl-btn", "rvl-btn-scale", cn("button")),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  resetTransform();
+                },
+                title: "Reset zoom",
+                "aria-label": "Reset zoom",
+                children: [
+                  Math.round(displayScale * 100),
+                  "%"
+                ]
+              }
+            ),
+            showZoomControls && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("rvl-btn", cn("button")),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  ctx.zoomIn();
+                },
+                title: "Zoom in",
+                "aria-label": "Zoom in",
+                children: mergedIcons.zoomIn
+              }
+            ),
+            showZoomControls && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("rvl-btn", cn("button")),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  ctx.zoomOut();
+                },
+                title: "Zoom out",
+                "aria-label": "Zoom out",
+                children: mergedIcons.zoomOut
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("rvl-btn", cn("button")),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClose();
+                },
+                title: "Close (Esc)",
+                "aria-label": "Close",
+                children: mergedIcons.close
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rvl-stage",
+            style: {
+              transform: contentShift.transform ?? "translateY(0)",
+              // animate=false snaps with no transition (overrides the CSS transition)
+              transition: contentShift.animate ? void 0 : "none"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: slideTrackRef,
+                className: cx("rvl-track", visible && !closing && "rvl-track-visible"),
+                children: [
+                  showAdjacent && prevItem && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "rvl-adjacent",
+                      style: { transform: `translateX(-${viewportWidth}px)`, opacity: adjacentOpacity },
+                      children: /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: prevItem.src,
+                          alt: "",
+                          className: cx("rvl-img", cn("image")),
+                          style: imgStyle,
+                          draggable: false
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: imgWrapperRef,
+                      className: "rvl-img-wrapper",
+                      onClick: (e) => e.stopPropagation(),
+                      onDoubleClick: handleDoubleClick,
+                      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",
+                        {
+                          ref: imgRef,
+                          src: item.src,
+                          alt: item.alt ?? "",
+                          className: cx("rvl-img", cn("image")),
+                          style: imgStyle,
+                          draggable: false,
+                          onLoad: measureBaseDims
+                        }
+                      )
+                    }
+                  ),
+                  showAdjacent && nextItem && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "rvl-adjacent",
+                      style: { transform: `translateX(${viewportWidth}px)`, opacity: adjacentOpacity },
+                      children: /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: nextItem.src,
+                          alt: "",
+                          className: cx("rvl-img", cn("image")),
+                          style: imgStyle,
+                          draggable: false
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ref: bottomBarRef, className: cx("rvl-bar", "rvl-bottom-bar", cn("bottomBar")), children: [
+          showNavRow && /* @__PURE__ */ jsx("div", { className: "rvl-nav-row", children: /* @__PURE__ */ jsxs("div", { className: "rvl-nav-inner", children: [
+            navStart != null && /* @__PURE__ */ jsx("div", { className: cx("rvl-nav-start", cn("navStart")), children: navStart }),
+            hasNavGroup && /* @__PURE__ */ jsxs("div", { className: "rvl-nav-group", children: [
+              /* @__PURE__ */ jsx(
+                NavButton,
+                {
+                  direction: "prev",
+                  enabled: hasPrev,
+                  onClick: () => navigate("prev"),
+                  icon: mergedIcons.prev,
+                  className: cn("navButton")
+                }
+              ),
+              showCounter && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cx("rvl-counter", cn("counter")),
+                  style: { minWidth: counterMinWidth },
+                  children: [
+                    index + 1,
+                    " / ",
+                    items.length
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NavButton,
+                {
+                  direction: "next",
+                  enabled: hasNext,
+                  onClick: () => navigate("next"),
+                  icon: mergedIcons.next,
+                  className: cn("navButton")
+                }
+              )
+            ] }),
+            navEnd != null && /* @__PURE__ */ jsx("div", { className: cx("rvl-nav-end", cn("navEnd")), children: navEnd })
+          ] }) }),
+          renderFooter && /* @__PURE__ */ jsx("div", { className: "rvl-footer", children: renderFooter(ctx) })
+        ] }),
+        renderOverlay && /* @__PURE__ */ jsx("div", { className: cx("rvl-overlay", cn("overlay")), children: renderOverlay(ctx) })
+      ]
+    }
+  );
+}
+
+export { ChevronLeftIcon, ChevronRightIcon, CloseIcon, ImageViewer, MAX_SCALE, MIN_SCALE, NavButton, ZoomInIcon, ZoomOutIcon, clampTranslate, defaultIcons, resolveSlideDirection, useBarMeasure, useBodyScrollLock, useFocusTrap, useGestureHandler, useImageZoomPan, useSlideNavigation };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map