@sesionario/blocks 1.22.3 → 1.24.0

package/dist/index.cjs

@@ -10,12 +10,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactSlot = require('@radix-ui/react-slot');
 var reactDom = require('react-dom');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var nextThemes = require('next-themes');
 var framerMotion = require('framer-motion');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var DialogPrimitive = require('@radix-ui/react-dialog');
 var vaul = require('vaul');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var cmdk = require('cmdk');
@@ -46,10 +46,10 @@ function _interopNamespace(e) {
 
 var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var RPNInput__namespace = /*#__PURE__*/_interopNamespace(RPNInput);
 var flags__default = /*#__PURE__*/_interopDefault(flags);
@@ -860,19 +860,19 @@ function ExpandableText({
     ) : null
   ] });
 }
-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 ZOOM_PAN_MIN_SCALE = 1;
+var ZOOM_PAN_MAX_SCALE = 4;
+var ZOOM_PAN_DOUBLE_TAP_MS = 300;
+var ZOOM_PAN_SWIPE_LOCK_PX = 8;
+var ZOOM_PAN_SWIPE_COMMIT_PX = 56;
+var ZOOM_PAN_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));
 }
-function zoomToward(prev, nextScale, originX, originY) {
-  const scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);
-  if (scale === MIN_SCALE) return IDENTITY;
+function zoomToward(prev, nextScale, originX, originY, minScale = ZOOM_PAN_MIN_SCALE, maxScale = ZOOM_PAN_MAX_SCALE) {
+  const scale = clamp(nextScale, minScale, maxScale);
+  if (scale === minScale) return { ...IDENTITY, scale: minScale };
   const ratio = scale / prev.scale;
   return {
     scale,
@@ -887,19 +887,19 @@ function prefersReducedMotion() {
   if (typeof window === "undefined" || !window.matchMedia) return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function ImageLightbox({
-  images,
-  index,
-  onIndexChange,
-  onClose,
-  labels
-}) {
-  const ariaLabel = labels?.ariaLabel ?? "Visor de im\xE1genes";
-  const closeLabel = labels?.close ?? "Cerrar";
-  const previousLabel = labels?.previous ?? "Anterior";
-  const nextLabel = labels?.next ?? "Siguiente";
-  const hasMultiple = images.length > 1;
-  const [transform, setTransform] = React7.useState(IDENTITY);
+function useZoomPanGestures(options = {}) {
+  const {
+    minScale = ZOOM_PAN_MIN_SCALE,
+    maxScale = ZOOM_PAN_MAX_SCALE,
+    swipeEnabled = true,
+    onSwipeCommit,
+    wheelZoom = true,
+    doubleTap = "reset"
+  } = options;
+  const [transform, setTransform] = React7.useState({
+    ...IDENTITY,
+    scale: minScale
+  });
   const transformRef = React7.useRef(transform);
   transformRef.current = transform;
   const [isSwipeDragging, setIsSwipeDragging] = React7.useState(false);
@@ -912,46 +912,28 @@ function ImageLightbox({
   const lastTapRef = React7.useRef(
     null
   );
-  const indexRef = React7.useRef(index);
-  indexRef.current = index;
-  const imagesLengthRef = React7.useRef(images.length);
-  imagesLengthRef.current = images.length;
-  const resetZoom = React7.useCallback(() => {
-    setTransform(IDENTITY);
+  const onSwipeCommitRef = React7.useRef(onSwipeCommit);
+  onSwipeCommitRef.current = onSwipeCommit;
+  const swipeEnabledRef = React7.useRef(swipeEnabled);
+  swipeEnabledRef.current = swipeEnabled;
+  const minScaleRef = React7.useRef(minScale);
+  minScaleRef.current = minScale;
+  const maxScaleRef = React7.useRef(maxScale);
+  maxScaleRef.current = maxScale;
+  const doubleTapRef = React7.useRef(doubleTap);
+  doubleTapRef.current = doubleTap;
+  const reset = React7.useCallback(() => {
+    setTransform({ ...IDENTITY, scale: minScaleRef.current });
     setIsSwipeDragging(false);
     setSnapBack(false);
   }, []);
-  React7.useEffect(() => {
-    resetZoom();
-  }, [index, images[index], resetZoom]);
-  function goPrev() {
-    onIndexChange((index - 1 + images.length) % images.length);
-  }
-  function goNext() {
-    onIndexChange((index + 1) % images.length);
-  }
-  React7.useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        onClose();
-        return;
-      }
-      if (!hasMultiple) return;
-      if (e.key === "ArrowLeft") {
-        onIndexChange((index - 1 + images.length) % images.length);
-      } else if (e.key === "ArrowRight") {
-        onIndexChange((index + 1) % images.length);
-      }
-    }
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [index, images.length, hasMultiple, onClose, onIndexChange]);
-  React7.useEffect(() => {
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = previousOverflow;
-    };
+  const setScale = React7.useCallback((next) => {
+    setTransform(
+      (prev) => zoomToward(prev, next, 0, 0, minScaleRef.current, maxScaleRef.current)
+    );
+  }, []);
+  const clearSnapBack = React7.useCallback(() => {
+    setSnapBack(false);
   }, []);
   const stageOrigin = React7.useCallback((clientX, clientY) => {
     const stage = stageRef.current;
@@ -963,6 +945,7 @@ function ImageLightbox({
     };
   }, []);
   React7.useEffect(() => {
+    if (!wheelZoom) return;
     const stage = stageRef.current;
     if (!stage) return;
     const handleWheel = (e) => {
@@ -971,11 +954,20 @@ function ImageLightbox({
       const prev = transformRef.current;
       const factor = e.deltaY > 0 ? 0.9 : 1.1;
       const { x, y } = stageOrigin(e.clientX, e.clientY);
-      setTransform(zoomToward(prev, prev.scale * factor, x, y));
+      setTransform(
+        zoomToward(
+          prev,
+          prev.scale * factor,
+          x,
+          y,
+          minScaleRef.current,
+          maxScaleRef.current
+        )
+      );
     };
     stage.addEventListener("wheel", handleWheel, { passive: false });
     return () => stage.removeEventListener("wheel", handleWheel);
-  }, [stageOrigin]);
+  }, [stageOrigin, wheelZoom]);
   function clearSwipe() {
     swipeRef.current = null;
     setIsSwipeDragging(false);
@@ -1010,7 +1002,7 @@ function ImageLightbox({
       beginPinch();
       return;
     }
-    if (transformRef.current.scale > MIN_SCALE) {
+    if (transformRef.current.scale > minScaleRef.current) {
       panRef.current = {
         pointerId: e.pointerId,
         startX: e.clientX,
@@ -1021,7 +1013,7 @@ function ImageLightbox({
       };
       return;
     }
-    if (hasMultiple) {
+    if (swipeEnabledRef.current) {
       swipeRef.current = {
         pointerId: e.pointerId,
         startX: e.clientX,
@@ -1047,7 +1039,9 @@ function ImageLightbox({
           pinchStart.transform,
           nextScale,
           pinchStart.originX,
-          pinchStart.originY
+          pinchStart.originY,
+          minScaleRef.current,
+          maxScaleRef.current
         )
       );
       return;
@@ -1072,16 +1066,22 @@ function ImageLightbox({
     if (swipe.axis === null) {
       const absX = Math.abs(dx);
       const absY = Math.abs(dy);
-      if (absX < SWIPE_LOCK_PX && absY < SWIPE_LOCK_PX) return;
+      if (absX < ZOOM_PAN_SWIPE_LOCK_PX && absY < ZOOM_PAN_SWIPE_LOCK_PX) {
+        return;
+      }
       swipe.axis = absX >= absY ? "x" : "y";
       if (swipe.axis === "y") {
         clearSwipe();
-        setTransform(IDENTITY);
+        setTransform({ ...IDENTITY, scale: minScaleRef.current });
         return;
       }
     }
     if (swipe.axis === "x") {
-      setTransform({ scale: MIN_SCALE, tx: dx, ty: 0 });
+      setTransform({
+        scale: minScaleRef.current,
+        tx: dx,
+        ty: 0
+      });
     }
   }
   function finishSwipe(e) {
@@ -1091,19 +1091,13 @@ function ImageLightbox({
     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);
-      }
+    if (axis === "x" && Math.abs(dx) >= ZOOM_PAN_SWIPE_COMMIT_PX) {
+      onSwipeCommitRef.current?.(dx < 0 ? "next" : "prev");
       return true;
     }
     if (wasMoved || transformRef.current.tx !== 0) {
       if (!prefersReducedMotion()) setSnapBack(true);
-      setTransform(IDENTITY);
+      setTransform({ ...IDENTITY, scale: minScaleRef.current });
     }
     return wasMoved;
   }
@@ -1118,7 +1112,7 @@ function ImageLightbox({
     }
     if (pointersRef.current.size === 1) {
       const remaining = [...pointersRef.current.entries()][0];
-      if (remaining && transformRef.current.scale > MIN_SCALE) {
+      if (remaining && transformRef.current.scale > minScaleRef.current) {
         const [pointerId, point] = remaining;
         panRef.current = {
           pointerId,
@@ -1141,19 +1135,121 @@ function ImageLightbox({
     if (pointersRef.current.size === 0 && e.button === 0) {
       const now = Date.now();
       const last = lastTapRef.current;
-      if (last && now - last.time < DOUBLE_TAP_MS && Math.hypot(e.clientX - last.x, e.clientY - last.y) < 24) {
+      if (last && now - last.time < ZOOM_PAN_DOUBLE_TAP_MS && Math.hypot(e.clientX - last.x, e.clientY - last.y) < 24) {
         lastTapRef.current = null;
-        resetZoom();
+        if (doubleTapRef.current === "toggle" && transformRef.current.scale <= minScaleRef.current) {
+          const { x, y } = stageOrigin(e.clientX, e.clientY);
+          setTransform(
+            zoomToward(
+              transformRef.current,
+              Math.min(2, maxScaleRef.current),
+              x,
+              y,
+              minScaleRef.current,
+              maxScaleRef.current
+            )
+          );
+        } else {
+          reset();
+        }
         return;
       }
       lastTapRef.current = { time: now, x: e.clientX, y: e.clientY };
     }
   }
+  return {
+    stageRef,
+    transform,
+    isDragging: isSwipeDragging,
+    snapBack,
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp
+    },
+    reset,
+    setScale,
+    clearSnapBack
+  };
+}
+function ImageLightbox({
+  images,
+  index,
+  onIndexChange,
+  onClose,
+  labels
+}) {
+  const ariaLabel = labels?.ariaLabel ?? "Visor de im\xE1genes";
+  const closeLabel = labels?.close ?? "Cerrar";
+  const previousLabel = labels?.previous ?? "Anterior";
+  const nextLabel = labels?.next ?? "Siguiente";
+  const hasMultiple = images.length > 1;
+  const indexRef = React7.useRef(index);
+  indexRef.current = index;
+  const imagesLengthRef = React7.useRef(images.length);
+  imagesLengthRef.current = images.length;
+  const onIndexChangeRef = React7.useRef(onIndexChange);
+  onIndexChangeRef.current = onIndexChange;
+  const onSwipeCommit = React7.useCallback((direction) => {
+    const length = imagesLengthRef.current;
+    const current = indexRef.current;
+    if (direction === "next") {
+      onIndexChangeRef.current((current + 1) % length);
+    } else {
+      onIndexChangeRef.current((current - 1 + length) % length);
+    }
+  }, []);
+  const {
+    stageRef,
+    transform,
+    isDragging,
+    snapBack,
+    handlers,
+    reset,
+    clearSnapBack
+  } = useZoomPanGestures({
+    swipeEnabled: hasMultiple,
+    onSwipeCommit,
+    doubleTap: "reset"
+  });
+  React7.useEffect(() => {
+    reset();
+  }, [index, images[index], reset]);
+  function goPrev() {
+    onIndexChange((index - 1 + images.length) % images.length);
+  }
+  function goNext() {
+    onIndexChange((index + 1) % images.length);
+  }
+  React7.useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (!hasMultiple) return;
+      if (e.key === "ArrowLeft") {
+        onIndexChange((index - 1 + images.length) % images.length);
+      } else if (e.key === "ArrowRight") {
+        onIndexChange((index + 1) % images.length);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [index, images.length, hasMultiple, onClose, onIndexChange]);
+  React7.useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, []);
   function stopDialogClose(e) {
     e.stopPropagation();
   }
   const { scale, tx, ty } = transform;
-  const transition = snapBack && !isSwipeDragging && !prefersReducedMotion() ? `transform ${SWIPE_SNAP_MS}ms ease-out` : void 0;
+  const transition = snapBack && !isDragging && !prefersReducedMotion() ? `transform ${ZOOM_PAN_SWIPE_SNAP_MS}ms ease-out` : void 0;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -1193,12 +1289,12 @@ 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",
+              "data-swipe-dragging": isDragging ? "true" : "false",
               onClick: stopDialogClose,
-              onPointerDown,
-              onPointerMove,
-              onPointerUp,
-              onPointerCancel: onPointerUp,
+              onPointerDown: handlers.onPointerDown,
+              onPointerMove: handlers.onPointerMove,
+              onPointerUp: handlers.onPointerUp,
+              onPointerCancel: handlers.onPointerCancel,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "img",
                 {
@@ -1209,9 +1305,9 @@ function ImageLightbox({
                   style: {
                     transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
                     transition,
-                    cursor: scale > MIN_SCALE ? "grab" : "default"
+                    cursor: scale > ZOOM_PAN_MIN_SCALE ? "grab" : "default"
                   },
-                  onTransitionEnd: () => setSnapBack(false)
+                  onTransitionEnd: clearSnapBack
                 }
               )
             }
@@ -1240,6 +1336,321 @@ function ImageLightbox({
     document.body
   );
 }
+function MediaCarousel({
+  items,
+  index,
+  onIndexChange,
+  labels,
+  className,
+  renderPdf
+}) {
+  const previousLabel = labels?.previous ?? "Anterior";
+  const nextLabel = labels?.next ?? "Siguiente";
+  const safeIndex = Math.min(Math.max(index, 0), Math.max(items.length - 1, 0));
+  const item = items[safeIndex];
+  const hasMultiple = items.length > 1;
+  const indexRef = React7.useRef(safeIndex);
+  indexRef.current = safeIndex;
+  const lengthRef = React7.useRef(items.length);
+  lengthRef.current = items.length;
+  const onIndexChangeRef = React7.useRef(onIndexChange);
+  onIndexChangeRef.current = onIndexChange;
+  const onSwipeCommit = React7.useCallback((direction) => {
+    const length = lengthRef.current;
+    if (length <= 1) return;
+    const current = indexRef.current;
+    if (direction === "next") {
+      onIndexChangeRef.current((current + 1) % length);
+    } else {
+      onIndexChangeRef.current((current - 1 + length) % length);
+    }
+  }, []);
+  const isImage = item?.kind === "image";
+  const {
+    stageRef,
+    transform,
+    isDragging,
+    snapBack,
+    handlers,
+    reset,
+    clearSnapBack
+  } = useZoomPanGestures({
+    swipeEnabled: hasMultiple && isImage,
+    onSwipeCommit,
+    doubleTap: "toggle",
+    wheelZoom: isImage
+  });
+  React7.useEffect(() => {
+    reset();
+  }, [safeIndex, item?.kind === "image" ? item.src : null, reset]);
+  React7.useEffect(() => {
+    if (!hasMultiple) return;
+    function handleKeyDown(e) {
+      if (e.key === "ArrowLeft") {
+        onIndexChangeRef.current(
+          (indexRef.current - 1 + lengthRef.current) % lengthRef.current
+        );
+      } else if (e.key === "ArrowRight") {
+        onIndexChangeRef.current((indexRef.current + 1) % lengthRef.current);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [hasMultiple]);
+  function stopBubble(e) {
+    e.stopPropagation();
+  }
+  if (!item) {
+    return null;
+  }
+  const { scale, tx, ty } = transform;
+  const transition = snapBack && !isDragging && !prefersReducedMotion() ? `transform ${ZOOM_PAN_SWIPE_SNAP_MS}ms ease-out` : void 0;
+  let body;
+  switch (item.kind) {
+    case "image":
+      body = /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: stageRef,
+          className: "relative flex h-full w-full touch-none items-center justify-center",
+          "data-scale": scale,
+          "data-swipe-dragging": isDragging ? "true" : "false",
+          onClick: stopBubble,
+          onPointerDown: handlers.onPointerDown,
+          onPointerMove: handlers.onPointerMove,
+          onPointerUp: handlers.onPointerUp,
+          onPointerCancel: handlers.onPointerCancel,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: item.src,
+              alt: item.alt ?? "",
+              draggable: false,
+              className: "max-h-full max-w-full select-none object-contain",
+              style: {
+                transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+                transition,
+                cursor: scale > ZOOM_PAN_MIN_SCALE ? "grab" : "default"
+              },
+              onTransitionEnd: clearSnapBack
+            }
+          )
+        }
+      );
+      break;
+    case "video":
+      body = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center p-2", children: item.node });
+      break;
+    case "pdf":
+      body = renderPdf ? renderPdf({
+        fileUrl: item.fileUrl,
+        fileName: item.fileName,
+        downloadUrl: item.downloadUrl
+      }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: item.fileName });
+      break;
+    default: {
+      const _exhaustive = item;
+      return _exhaustive;
+    }
+  }
+  const counterText = labels?.counter ? labels.counter(safeIndex + 1, items.length) : `${safeIndex + 1} / ${items.length}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-full min-h-0 w-full flex-col bg-black",
+        item.kind === "pdf" && "bg-muted",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-0 flex-1", children: body }),
+        hasMultiple && item.kind !== "pdf" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onIndexChange((safeIndex - 1 + items.length) % items.length);
+              },
+              "aria-label": previousLabel,
+              className: "absolute left-3 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 sm:inline-flex",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onIndexChange((safeIndex + 1) % items.length);
+              },
+              "aria-label": nextLabel,
+              className: "absolute right-3 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 sm:inline-flex",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white", children: counterText })
+        ] })
+      ]
+    }
+  );
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function MediaViewerDialog({
+  open,
+  onOpenChange,
+  children,
+  labels,
+  className,
+  contentClassName,
+  showCloseButton = true
+}) {
+  const closeLabel = labels?.close ?? "Cerrar";
+  const title = labels?.title ?? "Visor";
+  const description = labels?.description ?? title;
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: cn(
+        "inset-0 flex h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 top-0 left-0 gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none",
+        contentClassName,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "sr-only", children: description }),
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onOpenChange(false),
+            "aria-label": closeLabel,
+            className: "absolute top-3 right-3 z-20 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" })
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
 var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
 var miniMenuContentDefaults = {
   sideOffset: 8,
@@ -3145,121 +3556,6 @@ function AvatarEditor({
     }
   );
 }
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-            DialogPrimitive__namespace.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
-      ...props
-    }
-  );
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
 function Drawer({
   ...props
 }) {
@@ -5646,6 +5942,340 @@ function useSearchHotkey(options = {}) {
   return { open, setOpen, toggle };
 }
 
+// src/lib/scroll-restoration/store.ts
+var MAX_MARKS = 30;
+var MAX_SNAPSHOT_ROUTES = 3;
+var PENDING_TRAVERSAL_TTL_MS = 1e3;
+var scrollMarks = /* @__PURE__ */ new Map();
+var snapshotsByRoute = /* @__PURE__ */ new Map();
+var pendingTraversalKey = null;
+var pendingTraversalTimeout = null;
+var popstateInstalled = false;
+function touchMapEntry(map, key, value, max) {
+  if (map.has(key)) map.delete(key);
+  map.set(key, value);
+  while (map.size > max) {
+    const oldest = map.keys().next().value;
+    if (oldest === void 0) break;
+    map.delete(oldest);
+  }
+}
+function getScrollMark(routeKey) {
+  const mark = scrollMarks.get(routeKey);
+  if (!mark) return void 0;
+  scrollMarks.delete(routeKey);
+  scrollMarks.set(routeKey, mark);
+  return mark;
+}
+function setScrollMark(routeKey, mark) {
+  touchMapEntry(scrollMarks, routeKey, mark, MAX_MARKS);
+}
+function deleteScrollMark(routeKey) {
+  scrollMarks.delete(routeKey);
+}
+function getSnapshot(routeKey, subKey) {
+  const route = snapshotsByRoute.get(routeKey);
+  if (!route) return void 0;
+  snapshotsByRoute.delete(routeKey);
+  snapshotsByRoute.set(routeKey, route);
+  return route.get(subKey);
+}
+function setSnapshot(routeKey, subKey, value) {
+  let route = snapshotsByRoute.get(routeKey);
+  if (route) {
+    snapshotsByRoute.delete(routeKey);
+  } else {
+    route = /* @__PURE__ */ new Map();
+  }
+  route.set(subKey, value);
+  snapshotsByRoute.set(routeKey, route);
+  while (snapshotsByRoute.size > MAX_SNAPSHOT_ROUTES) {
+    const oldest = snapshotsByRoute.keys().next().value;
+    if (oldest === void 0) break;
+    snapshotsByRoute.delete(oldest);
+  }
+}
+function deleteSnapshotsForRoute(routeKey) {
+  snapshotsByRoute.delete(routeKey);
+}
+function clearRoute(routeKey) {
+  deleteScrollMark(routeKey);
+  deleteSnapshotsForRoute(routeKey);
+}
+function clearPendingTraversalTimer() {
+  if (pendingTraversalTimeout !== null) {
+    clearTimeout(pendingTraversalTimeout);
+    pendingTraversalTimeout = null;
+  }
+}
+function schedulePendingTraversalClear() {
+  clearPendingTraversalTimer();
+  pendingTraversalTimeout = setTimeout(() => {
+    pendingTraversalKey = null;
+    pendingTraversalTimeout = null;
+  }, PENDING_TRAVERSAL_TTL_MS);
+}
+function ensurePopstateListener() {
+  if (popstateInstalled || typeof window === "undefined") return;
+  popstateInstalled = true;
+  window.addEventListener("popstate", () => {
+    pendingTraversalKey = window.location.pathname + window.location.search;
+    schedulePendingTraversalClear();
+  });
+}
+function isPendingTraversal(routeKey) {
+  ensurePopstateListener();
+  return pendingTraversalKey === routeKey;
+}
+function consumePendingTraversal(routeKey) {
+  ensurePopstateListener();
+  if (pendingTraversalKey !== routeKey) return false;
+  pendingTraversalKey = null;
+  clearPendingTraversalTimer();
+  return true;
+}
+function getScrollTop(container) {
+  if (!container) {
+    return window.scrollY || document.documentElement.scrollTop || 0;
+  }
+  return container.scrollTop;
+}
+function setScrollTop(container, top) {
+  if (!container) {
+    window.scrollTo(0, top);
+    return;
+  }
+  container.scrollTop = top;
+}
+function scrollportTop(container) {
+  return container ? container.getBoundingClientRect().top : 0;
+}
+function scrollportBottom(container) {
+  if (!container) return window.innerHeight;
+  return container.getBoundingClientRect().bottom;
+}
+function escapeAttrValue(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function resolveAnchor(container, attribute) {
+  const scope = container ?? document;
+  const nodes = scope.querySelectorAll(`[${attribute}]`);
+  if (nodes.length === 0) return null;
+  const portTop = scrollportTop(container);
+  const portBottom = scrollportBottom(container);
+  let bestId = null;
+  let bestTop = 0;
+  let bestScore = Infinity;
+  for (const node of nodes) {
+    if (!(node instanceof HTMLElement)) continue;
+    const id = node.getAttribute(attribute);
+    if (!id) continue;
+    const rect = node.getBoundingClientRect();
+    if (rect.bottom <= portTop || rect.top >= portBottom) continue;
+    const relativeTop = rect.top - portTop;
+    const score = Math.abs(relativeTop);
+    if (score < bestScore) {
+      bestScore = score;
+      bestId = id;
+      bestTop = relativeTop;
+    }
+  }
+  if (!bestId) return null;
+  return { id: bestId, top: bestTop };
+}
+function captureMark(container, attribute) {
+  const anchor = resolveAnchor(container, attribute);
+  return {
+    top: getScrollTop(container),
+    anchorId: anchor?.id ?? null,
+    anchorTop: anchor?.top ?? 0
+  };
+}
+function applyMark(container, mark, attribute) {
+  if (mark.anchorId) {
+    const scope = container ?? document;
+    const el = scope.querySelector(
+      `[${attribute}="${escapeAttrValue(mark.anchorId)}"]`
+    );
+    if (el instanceof HTMLElement) {
+      const portTop = scrollportTop(container);
+      const currentRelativeTop = el.getBoundingClientRect().top - portTop;
+      const delta = currentRelativeTop - mark.anchorTop;
+      setScrollTop(container, getScrollTop(container) + delta);
+      return true;
+    }
+  }
+  setScrollTop(container, mark.top);
+  return false;
+}
+function getScrollHeight(container) {
+  if (!container) {
+    return Math.max(
+      document.documentElement.scrollHeight,
+      document.body?.scrollHeight ?? 0
+    );
+  }
+  return container.scrollHeight;
+}
+var DEFAULT_ANCHOR_ATTRIBUTE = "data-scroll-anchor";
+var STABILIZE_MS = 600;
+var ScrollRestorationContext = React7.createContext(null);
+function useScrollRestorationContext() {
+  return React7.useContext(ScrollRestorationContext);
+}
+function readContainer(containerRef) {
+  return containerRef?.current ?? null;
+}
+function ScrollRestorationProvider({
+  routeKey,
+  containerRef,
+  anchorAttribute = DEFAULT_ANCHOR_ATTRIBUTE,
+  children
+}) {
+  ensurePopstateListener();
+  const traversalForRouteRef = React7.useRef({ routeKey: "", isTraversal: false });
+  if (traversalForRouteRef.current.routeKey !== routeKey) {
+    traversalForRouteRef.current = {
+      routeKey,
+      isTraversal: isPendingTraversal(routeKey)
+    };
+  }
+  const isTraversal = traversalForRouteRef.current.isTraversal;
+  const value = React7.useMemo(
+    () => ({
+      routeKey,
+      isTraversal,
+      anchorAttribute
+    }),
+    [routeKey, isTraversal, anchorAttribute]
+  );
+  React7.useEffect(() => {
+    if (typeof window === "undefined" || !("scrollRestoration" in history)) {
+      return;
+    }
+    const previous = history.scrollRestoration;
+    history.scrollRestoration = "manual";
+    return () => {
+      history.scrollRestoration = previous;
+    };
+  }, []);
+  const prevRouteKeyRef = React7.useRef(routeKey);
+  const anchorAttributeRef = React7.useRef(anchorAttribute);
+  anchorAttributeRef.current = anchorAttribute;
+  React7.useEffect(() => {
+    const container = readContainer(containerRef);
+    const target = container ?? window;
+    let rafId = 0;
+    const onScroll = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        setScrollMark(
+          routeKey,
+          captureMark(readContainer(containerRef), anchorAttribute)
+        );
+      });
+    };
+    target.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      target.removeEventListener("scroll", onScroll);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [routeKey, containerRef, anchorAttribute]);
+  React7.useLayoutEffect(() => {
+    const container = readContainer(containerRef);
+    const prevKey = prevRouteKeyRef.current;
+    if (prevKey !== routeKey) {
+      setScrollMark(
+        prevKey,
+        captureMark(container, anchorAttributeRef.current)
+      );
+      prevRouteKeyRef.current = routeKey;
+    }
+    const hasHash = typeof window !== "undefined" && window.location.hash.length > 1;
+    if (isTraversal) {
+      consumePendingTraversal(routeKey);
+      const mark = getScrollMark(routeKey);
+      if (!mark) return void 0;
+      applyMark(container, mark, anchorAttribute);
+      return startStabilizationLoop(container, mark, anchorAttribute);
+    }
+    clearRoute(routeKey);
+    if (!hasHash) {
+      setScrollTop(container, 0);
+    }
+    return void 0;
+  }, [routeKey, isTraversal, containerRef, anchorAttribute]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollRestorationContext.Provider, { value, children });
+}
+function startStabilizationLoop(container, mark, attribute) {
+  const startedAt = performance.now();
+  let lastHeight = getScrollHeight(container);
+  let rafId = 0;
+  let aborted = false;
+  const abort = () => {
+    aborted = true;
+  };
+  const onUserIntent = () => {
+    abort();
+  };
+  window.addEventListener("wheel", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("touchstart", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("keydown", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("pointerdown", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  const tick = () => {
+    if (aborted) return;
+    if (performance.now() - startedAt > STABILIZE_MS) return;
+    const height = getScrollHeight(container);
+    if (height !== lastHeight) {
+      lastHeight = height;
+      applyMark(container, mark, attribute);
+    }
+    rafId = requestAnimationFrame(tick);
+  };
+  rafId = requestAnimationFrame(tick);
+  return () => {
+    abort();
+    if (rafId) cancelAnimationFrame(rafId);
+    window.removeEventListener("wheel", onUserIntent);
+    window.removeEventListener("touchstart", onUserIntent);
+    window.removeEventListener("keydown", onUserIntent);
+    window.removeEventListener("pointerdown", onUserIntent);
+  };
+}
+
+// src/hooks/useRestorableState.ts
+function useRestorableState(subKey, initializer) {
+  const ctx = useScrollRestorationContext();
+  const [state, setState] = React7.useState(() => {
+    if (!ctx) return initializer();
+    const traversal = ctx.isTraversal || isPendingTraversal(ctx.routeKey);
+    if (!traversal) return initializer();
+    const snap = getSnapshot(ctx.routeKey, subKey);
+    return snap !== void 0 ? snap : initializer();
+  });
+  React7.useEffect(() => {
+    if (!ctx) return;
+    setSnapshot(ctx.routeKey, subKey, state);
+  }, [ctx, subKey, state]);
+  return [state, setState];
+}
+
 // src/components/search/fuzzy.ts
 function normalize(value) {
   return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -8747,6 +9377,8 @@ exports.MEXICO_STATE_PATHS = MEXICO_STATE_PATHS;
 exports.Marker = Marker;
 exports.MarkerContent = MarkerContent;
 exports.MarkerIcon = MarkerIcon;
+exports.MediaCarousel = MediaCarousel;
+exports.MediaViewerDialog = MediaViewerDialog;
 exports.Message = Message;
 exports.MessageAvatar = MessageAvatar;
 exports.MessageComposer = MessageComposer;
@@ -8767,12 +9399,17 @@ exports.PaymentIcon = PaymentIcon;
 exports.PhoneInput = PhoneInput;
 exports.PlatformAccountMenu = PlatformAccountMenu;
 exports.PlatformNavbar = PlatformNavbar;
+exports.ScrollRestorationProvider = ScrollRestorationProvider;
 exports.SearchCommand = SearchCommand;
 exports.SearchablePicker = SearchablePicker;
 exports.SupportMessengerProvider = SupportMessengerProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.VerifiedProfessionalBadge = VerifiedProfessionalBadge;
 exports.VideoPlayer = VideoPlayer;
+exports.ZOOM_PAN_MAX_SCALE = ZOOM_PAN_MAX_SCALE;
+exports.ZOOM_PAN_MIN_SCALE = ZOOM_PAN_MIN_SCALE;
+exports.ZOOM_PAN_SWIPE_COMMIT_PX = ZOOM_PAN_SWIPE_COMMIT_PX;
+exports.ZOOM_PAN_SWIPE_SNAP_MS = ZOOM_PAN_SWIPE_SNAP_MS;
 exports.avatarFallbackStyle = avatarFallbackStyle;
 exports.bubbleVariants = bubbleVariants;
 exports.cn = cn;
@@ -8793,6 +9430,7 @@ exports.normalizeEmojiQuery = normalizeEmojiQuery;
 exports.normalizePaymentCardBrand = normalizePaymentCardBrand;
 exports.paymentIconBrandFromStripe = paymentIconBrandFromStripe;
 exports.paymentTypeFromStripeBrand = paymentTypeFromStripeBrand;
+exports.prefersReducedMotion = prefersReducedMotion;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;
 exports.useDebouncedValue = useDebouncedValue;
 exports.useDebouncedValueStrict = useDebouncedValueStrict;
@@ -8803,10 +9441,14 @@ exports.useLanguageContext = useLanguageContext;
 exports.useMediaQuery = useMediaQuery2;
 exports.usePlaybackStats = usePlaybackStats;
 exports.useRealtimeChannel = useRealtimeChannel;
+exports.useRestorableState = useRestorableState;
 exports.useScrollFadeXEdges = useScrollFadeXEdges;
+exports.useScrollRestorationContext = useScrollRestorationContext;
 exports.useSearchHotkey = useSearchHotkey;
 exports.useSupportConversation = useSupportConversation;
 exports.useSupportMessenger = useSupportMessenger;
 exports.useSupportMessengerOptional = useSupportMessengerOptional;
+exports.useZoomPanGestures = useZoomPanGestures;
+exports.zoomToward = zoomToward;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map