@sesionario/blocks 1.9.0 → 1.10.0

package/dist/index.d.cts

@@ -119,8 +119,8 @@ type ImageLightboxProps = {
 };
 /**
  * Fullscreen image gallery viewer. Portal overlay with Esc/click-to-close,
- * arrow-key navigation, wheel/pinch zoom, and pan when zoomed. Locks page
- * scroll while mounted.
+ * arrow-key / swipe navigation, wheel/pinch zoom, and pan when zoomed. Locks
+ * page scroll while mounted.
  */
 declare function ImageLightbox({ images, index, onIndexChange, onClose, labels, }: ImageLightboxProps): React.ReactPortal;
 

package/dist/index.d.ts

@@ -119,8 +119,8 @@ type ImageLightboxProps = {
 };
 /**
  * Fullscreen image gallery viewer. Portal overlay with Esc/click-to-close,
- * arrow-key navigation, wheel/pinch zoom, and pan when zoomed. Locks page
- * scroll while mounted.
+ * arrow-key / swipe navigation, wheel/pinch zoom, and pan when zoomed. Locks
+ * page scroll while mounted.
  */
 declare function ImageLightbox({ images, index, onIndexChange, onClose, labels, }: ImageLightboxProps): React.ReactPortal;
 

package/dist/index.js

@@ -490,6 +490,9 @@ function ExpandableText({
 var MIN_SCALE = 1;
 var MAX_SCALE = 4;
 var DOUBLE_TAP_MS = 300;
+var SWIPE_LOCK_PX = 8;
+var SWIPE_COMMIT_PX = 56;
+var SWIPE_SNAP_MS = 180;
 var IDENTITY = { scale: 1, tx: 0, ty: 0 };
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
@@ -507,6 +510,10 @@ function zoomToward(prev, nextScale, originX, originY) {
 function pointerDistance(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function ImageLightbox({
   images,
   index,
@@ -522,15 +529,24 @@ function ImageLightbox({
   const [transform, setTransform] = useState(IDENTITY);
   const transformRef = useRef(transform);
   transformRef.current = transform;
+  const [isSwipeDragging, setIsSwipeDragging] = useState(false);
+  const [snapBack, setSnapBack] = useState(false);
   const stageRef = useRef(null);
   const pointersRef = useRef(/* @__PURE__ */ new Map());
   const pinchStartRef = useRef(null);
   const panRef = useRef(null);
+  const swipeRef = useRef(null);
   const lastTapRef = useRef(
     null
   );
+  const indexRef = useRef(index);
+  indexRef.current = index;
+  const imagesLengthRef = useRef(images.length);
+  imagesLengthRef.current = images.length;
   const resetZoom = useCallback(() => {
     setTransform(IDENTITY);
+    setIsSwipeDragging(false);
+    setSnapBack(false);
   }, []);
   useEffect(() => {
     resetZoom();
@@ -587,6 +603,10 @@ function ImageLightbox({
     stage.addEventListener("wheel", handleWheel, { passive: false });
     return () => stage.removeEventListener("wheel", handleWheel);
   }, [stageOrigin]);
+  function clearSwipe() {
+    swipeRef.current = null;
+    setIsSwipeDragging(false);
+  }
   function beginPinch() {
     const pts = [...pointersRef.current.values()];
     const [a, b] = pts;
@@ -601,13 +621,18 @@ function ImageLightbox({
       transform: { ...transformRef.current }
     };
     panRef.current = null;
+    clearSwipe();
+    setSnapBack(false);
   }
   function onPointerDown(e) {
     e.stopPropagation();
     const stage = stageRef.current;
     if (!stage) return;
-    stage.setPointerCapture(e.pointerId);
+    if (typeof stage.setPointerCapture === "function") {
+      stage.setPointerCapture(e.pointerId);
+    }
     pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    setSnapBack(false);
     if (pointersRef.current.size === 2) {
       beginPinch();
       return;
@@ -621,6 +646,17 @@ function ImageLightbox({
         originTy: transformRef.current.ty,
         moved: false
       };
+      return;
+    }
+    if (hasMultiple) {
+      swipeRef.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        moved: false,
+        axis: null
+      };
+      setIsSwipeDragging(true);
     }
   }
   function onPointerMove(e) {
@@ -645,19 +681,62 @@ function ImageLightbox({
     }
     const pan = panRef.current;
     if (pan && pan.pointerId === e.pointerId) {
-      const dx = e.clientX - pan.startX;
-      const dy = e.clientY - pan.startY;
-      if (Math.abs(dx) > 2 || Math.abs(dy) > 2) pan.moved = true;
+      const dx2 = e.clientX - pan.startX;
+      const dy2 = e.clientY - pan.startY;
+      if (Math.abs(dx2) > 2 || Math.abs(dy2) > 2) pan.moved = true;
       setTransform((prev) => ({
         ...prev,
-        tx: pan.originTx + dx,
-        ty: pan.originTy + dy
+        tx: pan.originTx + dx2,
+        ty: pan.originTy + dy2
       }));
+      return;
+    }
+    const swipe = swipeRef.current;
+    if (!swipe || swipe.pointerId !== e.pointerId) return;
+    const dx = e.clientX - swipe.startX;
+    const dy = e.clientY - swipe.startY;
+    if (Math.abs(dx) > 2 || Math.abs(dy) > 2) swipe.moved = true;
+    if (swipe.axis === null) {
+      const absX = Math.abs(dx);
+      const absY = Math.abs(dy);
+      if (absX < SWIPE_LOCK_PX && absY < SWIPE_LOCK_PX) return;
+      swipe.axis = absX >= absY ? "x" : "y";
+      if (swipe.axis === "y") {
+        clearSwipe();
+        setTransform(IDENTITY);
+        return;
+      }
+    }
+    if (swipe.axis === "x") {
+      setTransform({ scale: MIN_SCALE, tx: dx, ty: 0 });
+    }
+  }
+  function finishSwipe(e) {
+    const swipe = swipeRef.current;
+    if (!swipe || swipe.pointerId !== e.pointerId) return false;
+    const dx = e.clientX - swipe.startX;
+    const wasMoved = swipe.moved;
+    const axis = swipe.axis;
+    clearSwipe();
+    if (axis === "x" && Math.abs(dx) >= SWIPE_COMMIT_PX) {
+      const length = imagesLengthRef.current;
+      const current = indexRef.current;
+      if (dx < 0) {
+        onIndexChange((current + 1) % length);
+      } else {
+        onIndexChange((current - 1 + length) % length);
+      }
+      return true;
+    }
+    if (wasMoved || transformRef.current.tx !== 0) {
+      if (!prefersReducedMotion()) setSnapBack(true);
+      setTransform(IDENTITY);
     }
+    return wasMoved;
   }
   function onPointerUp(e) {
     const stage = stageRef.current;
-    if (stage?.hasPointerCapture(e.pointerId)) {
+    if (stage && typeof stage.hasPointerCapture === "function" && stage.hasPointerCapture(e.pointerId) && typeof stage.releasePointerCapture === "function") {
       stage.releasePointerCapture(e.pointerId);
     }
     pointersRef.current.delete(e.pointerId);
@@ -678,6 +757,8 @@ function ImageLightbox({
         };
       }
     }
+    const swipeHandled = finishSwipe(e);
+    if (swipeHandled) return;
     const pan = panRef.current;
     if (pan && pan.pointerId === e.pointerId) {
       const wasMoved = pan.moved;
@@ -699,6 +780,7 @@ function ImageLightbox({
     e.stopPropagation();
   }
   const { scale, tx, ty } = transform;
+  const transition = snapBack && !isSwipeDragging && !prefersReducedMotion() ? `transform ${SWIPE_SNAP_MS}ms ease-out` : void 0;
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
@@ -738,6 +820,7 @@ function ImageLightbox({
               ref: stageRef,
               className: "relative flex max-h-full max-w-full touch-none items-center justify-center",
               "data-scale": scale,
+              "data-swipe-dragging": isSwipeDragging ? "true" : "false",
               onClick: stopDialogClose,
               onPointerDown,
               onPointerMove,
@@ -752,8 +835,10 @@ function ImageLightbox({
                   className: "max-h-[calc(100dvh-2rem)] max-w-full select-none rounded-lg object-contain",
                   style: {
                     transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+                    transition,
                     cursor: scale > MIN_SCALE ? "grab" : "default"
-                  }
+                  },
+                  onTransitionEnd: () => setSnapBack(false)
                 }
               )
             }
@@ -3679,6 +3764,19 @@ var PLAYBACK_RATES = [0.75, 1, 1.25, 1.5, 2];
 var CONTROLS_HIDE_MS = 3e3;
 var LIVE_EDGE_THRESHOLD_S = 8;
 var SEEK_STEP_S = 5;
+function asWebkitVideo(video) {
+  return video;
+}
+function hasWebkitVideoFullscreen(video) {
+  const webkit = asWebkitVideo(video);
+  return typeof webkit?.webkitEnterFullscreen === "function";
+}
+function hasStandardFullscreen() {
+  if (typeof document === "undefined") return false;
+  if (document.fullscreenEnabled) return true;
+  const doc = document;
+  return !!doc.webkitFullscreenEnabled;
+}
 function formatTime(seconds) {
   if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
   const total = Math.floor(seconds);
@@ -3752,10 +3850,10 @@ function VideoPlayer({
     null
   );
   const [behindLive, setBehindLive] = React6.useState(false);
+  const [webkitFullscreenSupported, setWebkitFullscreenSupported] = React6.useState(false);
   const hideTimerRef = React6.useRef(null);
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
-  const fullscreenSupported = typeof document !== "undefined" && (!!document.fullscreenEnabled || // Safari
-  "webkitFullscreenEnabled" in document);
+  const fullscreenSupported = hasStandardFullscreen() || webkitFullscreenSupported;
   React6.useEffect(() => {
     const video = videoRef.current;
     if (!video || !active) return;
@@ -3789,11 +3887,26 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
+  React6.useEffect(() => {
+    setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
+  }, [videoRef, active]);
   React6.useEffect(() => {
     const onFsChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
+  React6.useEffect(() => {
+    const video = asWebkitVideo(videoRef.current);
+    if (!video) return;
+    const onBegin = () => setIsFullscreen(true);
+    const onEnd = () => setIsFullscreen(false);
+    video.addEventListener("webkitbeginfullscreen", onBegin);
+    video.addEventListener("webkitendfullscreen", onEnd);
+    return () => {
+      video.removeEventListener("webkitbeginfullscreen", onBegin);
+      video.removeEventListener("webkitendfullscreen", onEnd);
+    };
+  }, [videoRef, active]);
   React6.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -3858,11 +3971,21 @@ function VideoPlayer({
   }
   function toggleFullscreen() {
     const el = containerRef.current;
-    if (!el) return;
-    if (document.fullscreenElement === el) {
+    const video = asWebkitVideo(videoRef.current);
+    if (el && document.fullscreenElement === el) {
       void document.exitFullscreen();
-    } else {
-      void el.requestFullscreen?.();
+      return;
+    }
+    if (video?.webkitDisplayingFullscreen && video.webkitExitFullscreen) {
+      video.webkitExitFullscreen();
+      return;
+    }
+    if (el && hasStandardFullscreen() && typeof el.requestFullscreen === "function") {
+      void el.requestFullscreen();
+      return;
+    }
+    if (video && typeof video.webkitEnterFullscreen === "function") {
+      video.webkitEnterFullscreen();
     }
   }
   function togglePip() {