@sesionario/blocks 1.6.0 → 1.8.0

package/dist/index.d.cts

@@ -85,6 +85,15 @@ type ConfirmDestructiveDialogProps = {
  */
 declare function ConfirmDestructiveDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, }: ConfirmDestructiveDialogProps): React.JSX.Element;
 
+type ExpandableTextProps = {
+    children: ReactNode;
+    expandLabel: string;
+    collapseLabel: string;
+    className?: string;
+    textClassName?: string;
+};
+declare function ExpandableText({ children, expandLabel, collapseLabel, className, textClassName, }: ExpandableTextProps): React.JSX.Element;
+
 declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const emptyMediaVariants: (props?: ({
@@ -95,6 +104,26 @@ declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">
 declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 
+type ImageLightboxLabels = {
+    ariaLabel?: string;
+    close?: string;
+    previous?: string;
+    next?: string;
+};
+type ImageLightboxProps = {
+    images: string[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    onClose: () => void;
+    labels?: ImageLightboxLabels;
+};
+/**
+ * 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.
+ */
+declare function ImageLightbox({ images, index, onIndexChange, onClose, labels, }: ImageLightboxProps): React.ReactPortal;
+
 type ThemeSwitcherLabels = {
     /** Tooltip label for the theme switcher */
     theme?: string;
@@ -939,4 +968,4 @@ declare function useSupportConversation({ client, getWsUrl, conversationId: conv
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.d.ts

@@ -85,6 +85,15 @@ type ConfirmDestructiveDialogProps = {
  */
 declare function ConfirmDestructiveDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, }: ConfirmDestructiveDialogProps): React.JSX.Element;
 
+type ExpandableTextProps = {
+    children: ReactNode;
+    expandLabel: string;
+    collapseLabel: string;
+    className?: string;
+    textClassName?: string;
+};
+declare function ExpandableText({ children, expandLabel, collapseLabel, className, textClassName, }: ExpandableTextProps): React.JSX.Element;
+
 declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const emptyMediaVariants: (props?: ({
@@ -95,6 +104,26 @@ declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">
 declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 
+type ImageLightboxLabels = {
+    ariaLabel?: string;
+    close?: string;
+    previous?: string;
+    next?: string;
+};
+type ImageLightboxProps = {
+    images: string[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    onClose: () => void;
+    labels?: ImageLightboxLabels;
+};
+/**
+ * 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.
+ */
+declare function ImageLightbox({ images, index, onIndexChange, onClose, labels, }: ImageLightboxProps): React.ReactPortal;
+
 type ThemeSwitcherLabels = {
     /** Tooltip label for the theme switcher */
     theme?: string;
@@ -939,4 +968,4 @@ declare function useSupportConversation({ client, getWsUrl, conversationId: conv
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PhoneInput, type PhoneInputProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.js

@@ -1,13 +1,14 @@
 "use client";
 import * as React6 from 'react';
-import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo } from 'react';
-import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, Monitor, Sun, Moon, Building2, Check, Plus, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, User, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, BadgeCheck, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, XIcon, ChevronLeft } from 'lucide-react';
+import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo } from 'react';
+import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, User, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, BadgeCheck, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, XIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Slot } from '@radix-ui/react-slot';
+import { createPortal } from 'react-dom';
 import { useTheme } from 'next-themes';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -424,6 +425,363 @@ function ConfirmDestructiveDialog({
     ] })
   ] }) });
 }
+var COLLAPSED_MAX_HEIGHT_REM = 11;
+function ExpandableText({
+  children,
+  expandLabel,
+  collapseLabel,
+  className,
+  textClassName
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [overflowing, setOverflowing] = useState(false);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    setExpanded(false);
+  }, [children]);
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const rootFontSize = Number.parseFloat(
+        getComputedStyle(document.documentElement).fontSize
+      );
+      const maxPx = COLLAPSED_MAX_HEIGHT_REM * (rootFontSize || 16);
+      setOverflowing(el.scrollHeight > maxPx + 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [children]);
+  const collapsed = !expanded && overflowing;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          collapsed && "max-h-[11rem] overflow-hidden scroll-fade-b"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            ref: contentRef,
+            className: cn(
+              "whitespace-pre-wrap text-sm leading-relaxed",
+              textClassName
+            ),
+            children
+          }
+        )
+      }
+    ),
+    overflowing ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "text-sm font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-sm",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((prev) => !prev),
+        children: expanded ? collapseLabel : expandLabel
+      }
+    ) : null
+  ] });
+}
+var MIN_SCALE = 1;
+var MAX_SCALE = 4;
+var DOUBLE_TAP_MS = 300;
+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;
+  const ratio = scale / prev.scale;
+  return {
+    scale,
+    tx: originX - (originX - prev.tx) * ratio,
+    ty: originY - (originY - prev.ty) * ratio
+  };
+}
+function pointerDistance(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+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] = useState(IDENTITY);
+  const transformRef = useRef(transform);
+  transformRef.current = transform;
+  const stageRef = useRef(null);
+  const pointersRef = useRef(/* @__PURE__ */ new Map());
+  const pinchStartRef = useRef(null);
+  const panRef = useRef(null);
+  const lastTapRef = useRef(
+    null
+  );
+  const resetZoom = useCallback(() => {
+    setTransform(IDENTITY);
+  }, []);
+  useEffect(() => {
+    resetZoom();
+  }, [index, images[index], resetZoom]);
+  function goPrev() {
+    onIndexChange((index - 1 + images.length) % images.length);
+  }
+  function goNext() {
+    onIndexChange((index + 1) % images.length);
+  }
+  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]);
+  useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, []);
+  const stageOrigin = useCallback((clientX, clientY) => {
+    const stage = stageRef.current;
+    if (!stage) return { x: 0, y: 0 };
+    const rect = stage.getBoundingClientRect();
+    return {
+      x: clientX - rect.left - rect.width / 2,
+      y: clientY - rect.top - rect.height / 2
+    };
+  }, []);
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      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));
+    };
+    stage.addEventListener("wheel", handleWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", handleWheel);
+  }, [stageOrigin]);
+  function beginPinch() {
+    const pts = [...pointersRef.current.values()];
+    const [a, b] = pts;
+    if (!a || !b) return;
+    const midX = (a.x + b.x) / 2;
+    const midY = (a.y + b.y) / 2;
+    const { x, y } = stageOrigin(midX, midY);
+    pinchStartRef.current = {
+      distance: Math.max(pointerDistance(a, b), 1),
+      originX: x,
+      originY: y,
+      transform: { ...transformRef.current }
+    };
+    panRef.current = null;
+  }
+  function onPointerDown(e) {
+    e.stopPropagation();
+    const stage = stageRef.current;
+    if (!stage) return;
+    stage.setPointerCapture(e.pointerId);
+    pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointersRef.current.size === 2) {
+      beginPinch();
+      return;
+    }
+    if (transformRef.current.scale > MIN_SCALE) {
+      panRef.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        originTx: transformRef.current.tx,
+        originTy: transformRef.current.ty,
+        moved: false
+      };
+    }
+  }
+  function onPointerMove(e) {
+    if (!pointersRef.current.has(e.pointerId)) return;
+    pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pinchStart = pinchStartRef.current;
+    if (pointersRef.current.size >= 2 && pinchStart) {
+      const pts = [...pointersRef.current.values()];
+      const [a, b] = pts;
+      if (!a || !b) return;
+      const distance = Math.max(pointerDistance(a, b), 1);
+      const nextScale = pinchStart.transform.scale * (distance / pinchStart.distance);
+      setTransform(
+        zoomToward(
+          pinchStart.transform,
+          nextScale,
+          pinchStart.originX,
+          pinchStart.originY
+        )
+      );
+      return;
+    }
+    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;
+      setTransform((prev) => ({
+        ...prev,
+        tx: pan.originTx + dx,
+        ty: pan.originTy + dy
+      }));
+    }
+  }
+  function onPointerUp(e) {
+    const stage = stageRef.current;
+    if (stage?.hasPointerCapture(e.pointerId)) {
+      stage.releasePointerCapture(e.pointerId);
+    }
+    pointersRef.current.delete(e.pointerId);
+    if (pointersRef.current.size < 2) {
+      pinchStartRef.current = null;
+    }
+    if (pointersRef.current.size === 1) {
+      const remaining = [...pointersRef.current.entries()][0];
+      if (remaining && transformRef.current.scale > MIN_SCALE) {
+        const [pointerId, point] = remaining;
+        panRef.current = {
+          pointerId,
+          startX: point.x,
+          startY: point.y,
+          originTx: transformRef.current.tx,
+          originTy: transformRef.current.ty,
+          moved: true
+        };
+      }
+    }
+    const pan = panRef.current;
+    if (pan && pan.pointerId === e.pointerId) {
+      const wasMoved = pan.moved;
+      panRef.current = null;
+      if (wasMoved) return;
+    }
+    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) {
+        lastTapRef.current = null;
+        resetZoom();
+        return;
+      }
+      lastTapRef.current = { time: now, x: e.clientX, y: e.clientY };
+    }
+  }
+  function stopDialogClose(e) {
+    e.stopPropagation();
+  }
+  const { scale, tx, ty } = transform;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-x-0 top-0 z-50 flex h-dvh items-center justify-center bg-black/90 p-4",
+        onClick: onClose,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": closeLabel,
+              className: "absolute right-4 top-4 z-10 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                goPrev();
+              },
+              "aria-label": previousLabel,
+              className: "absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: stageRef,
+              className: "relative flex max-h-full max-w-full touch-none items-center justify-center",
+              "data-scale": scale,
+              onClick: stopDialogClose,
+              onPointerDown,
+              onPointerMove,
+              onPointerUp,
+              onPointerCancel: onPointerUp,
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: images[index],
+                  alt: "",
+                  draggable: false,
+                  className: "max-h-[calc(100dvh-2rem)] max-w-full select-none rounded-lg object-contain",
+                  style: {
+                    transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+                    cursor: scale > MIN_SCALE ? "grab" : "default"
+                  }
+                }
+              )
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                goNext();
+              },
+              "aria-label": nextLabel,
+              className: "absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-6 w-6" })
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white", children: [
+            index + 1,
+            " / ",
+            images.length
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
 var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
 var miniMenuContentDefaults = {
   sideOffset: 8,
@@ -5670,6 +6028,6 @@ function createSupportChatClient(basePath = "/api/chat-svc") {
   };
 }
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map