@sesionario/blocks 1.9.0 → 1.11.0

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import * as React6 from 'react';
+import * as React7 from 'react';
 import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useId, 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';
@@ -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)
                 }
               )
             }
@@ -1489,7 +1574,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React6.useMemo(
+  const _values = React7.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -2618,22 +2703,22 @@ function EmojiPicker({
   recentLimit = 24,
   storageKey = "blocks-emoji"
 }) {
-  const strings = React6.useMemo(
+  const strings = React7.useMemo(
     () => ({ ...DEFAULT_LABELS[locale], ...labels }),
     [locale, labels]
   );
-  const titles = React6.useMemo(
+  const titles = React7.useMemo(
     () => ({ ...DEFAULT_TITLES[locale], ...labels?.categoryTitles }),
     [locale, labels]
   );
-  const [query, setQuery] = React6.useState("");
-  const [skinTone, setSkinTone] = React6.useState(() => {
+  const [query, setQuery] = React7.useState("");
+  const [skinTone, setSkinTone] = React7.useState(() => {
     const raw = readStored(storageKey, "tone");
     const parsed = raw != null ? Number.parseInt(raw, 10) : 0;
     return parsed >= 0 && parsed <= 5 ? parsed : 0;
   });
-  const [toneOpen, setToneOpen] = React6.useState(false);
-  const [recents, setRecents] = React6.useState(() => {
+  const [toneOpen, setToneOpen] = React7.useState(false);
+  const [recents, setRecents] = React7.useState(() => {
     const raw = readStored(storageKey, "recent");
     if (!raw) return [];
     try {
@@ -2643,13 +2728,13 @@ function EmojiPicker({
       return [];
     }
   });
-  const [focusIndex, setFocusIndex] = React6.useState(-1);
-  const scrollRef = React6.useRef(null);
-  const sectionRefs = React6.useRef(
+  const [focusIndex, setFocusIndex] = React7.useState(-1);
+  const scrollRef = React7.useRef(null);
+  const sectionRefs = React7.useRef(
     /* @__PURE__ */ new Map()
   );
   const normalizedQuery = normalizeEmojiQuery(query);
-  const sections = React6.useMemo(() => {
+  const sections = React7.useMemo(() => {
     if (normalizedQuery) return [];
     const result = [];
     if (recents.length > 0) {
@@ -2668,7 +2753,7 @@ function EmojiPicker({
     }
     return result;
   }, [normalizedQuery, recents, titles]);
-  const searchResults = React6.useMemo(() => {
+  const searchResults = React7.useMemo(() => {
     if (!normalizedQuery) return [];
     const out = [];
     for (const category of EMOJI_CATEGORIES) {
@@ -2678,21 +2763,21 @@ function EmojiPicker({
     }
     return out;
   }, [normalizedQuery]);
-  const flatList = React6.useMemo(() => {
+  const flatList = React7.useMemo(() => {
     if (normalizedQuery) return searchResults;
     return sections.flatMap((s) => s.emojis);
   }, [normalizedQuery, searchResults, sections]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     setFocusIndex(-1);
   }, [normalizedQuery]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (focusIndex < 0) return;
     const el = scrollRef.current?.querySelector(
       `[data-emoji-index="${focusIndex}"]`
     );
     el?.focus();
   }, [focusIndex]);
-  const commitRecent = React6.useCallback(
+  const commitRecent = React7.useCallback(
     (glyph) => {
       setRecents((prev) => {
         const next = [glyph, ...prev.filter((e) => e !== glyph)].slice(
@@ -2705,14 +2790,14 @@ function EmojiPicker({
     },
     [recentLimit, storageKey]
   );
-  const handleSelect = React6.useCallback(
+  const handleSelect = React7.useCallback(
     (glyph) => {
       commitRecent(glyph);
       onSelect(glyph);
     },
     [commitRecent, onSelect]
   );
-  const chooseTone = React6.useCallback(
+  const chooseTone = React7.useCallback(
     (tone) => {
       setSkinTone(tone);
       setToneOpen(false);
@@ -3018,17 +3103,17 @@ function EmojiPickerPopover({
   locale = "en",
   ...pickerProps
 }) {
-  const [internalOpen, setInternalOpen] = React6.useState(false);
+  const [internalOpen, setInternalOpen] = React7.useState(false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
-  const setOpen = React6.useCallback(
+  const setOpen = React7.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [isControlled, onOpenChange]
   );
-  const handleSelect = React6.useCallback(
+  const handleSelect = React7.useCallback(
     (emoji) => {
       onSelect(emoji);
       if (!keepOpenOnSelect) setOpen(false);
@@ -3061,8 +3146,10 @@ function insertAtCaret(element, value, text) {
     caret: start + text.length
   };
 }
-var wrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
-var fieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
+
+// src/components/emoji/emoji-field-shared.ts
+var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
+var emojiFieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
 function mergeRefs(...refs) {
   return (node) => {
     for (const ref of refs) {
@@ -3086,7 +3173,7 @@ function emitChange(element, nextValue, onChange) {
   });
 }
 function useEmojiInsert(fieldRef, value, onChange) {
-  return React6.useCallback(
+  return React7.useCallback(
     (emoji) => {
       const el = fieldRef.current;
       const current = value !== void 0 && value !== null ? String(value) : el?.value ?? "";
@@ -3107,7 +3194,7 @@ function useEmojiInsert(fieldRef, value, onChange) {
     [fieldRef, value, onChange]
   );
 }
-var EmojiTextarea = React6.forwardRef(
+var EmojiTextarea = React7.forwardRef(
   function EmojiTextarea2({
     className,
     locale = "en",
@@ -3127,10 +3214,10 @@ var EmojiTextarea = React6.forwardRef(
     emojiTriggerClassName,
     ...props
   }, ref) {
-    const fieldRef = React6.useRef(null);
+    const fieldRef = React7.useRef(null);
     const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
     const pickerDisabled = Boolean(disabled || readOnly);
-    return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClassName, className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(emojiFieldWrapperClassName, className), children: [
       /* @__PURE__ */ jsx(
         "textarea",
         {
@@ -3142,7 +3229,7 @@ var EmojiTextarea = React6.forwardRef(
           onChange,
           className: cn(
             "placeholder:text-muted-foreground flex min-h-20 w-full rounded-md px-3 py-2 pb-9 pr-10 text-base outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            fieldResetClassName,
+            emojiFieldResetClassName,
             className
           ),
           ...props
@@ -3173,7 +3260,7 @@ var EmojiTextarea = React6.forwardRef(
   }
 );
 EmojiTextarea.displayName = "EmojiTextarea";
-var EmojiInput = React6.forwardRef(
+var EmojiInput = React7.forwardRef(
   function EmojiInput2({
     className,
     locale = "en",
@@ -3194,10 +3281,10 @@ var EmojiInput = React6.forwardRef(
     emojiTriggerClassName,
     ...props
   }, ref) {
-    const fieldRef = React6.useRef(null);
+    const fieldRef = React7.useRef(null);
     const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
     const pickerDisabled = Boolean(disabled || readOnly);
-    return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClassName, className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(emojiFieldWrapperClassName, className), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -3210,7 +3297,7 @@ var EmojiInput = React6.forwardRef(
           onChange,
           className: cn(
             "placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md px-3 py-1 pr-10 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            fieldResetClassName,
+            emojiFieldResetClassName,
             className
           ),
           ...props
@@ -3402,27 +3489,27 @@ function useHlsPlayback({
   onError,
   onPlayingChange
 }) {
-  const videoRef = React6.useRef(null);
-  const hlsRef = React6.useRef(null);
-  const [state, setState] = React6.useState("idle");
-  const [qualities, setQualities] = React6.useState([]);
-  const [activeLevel, setActiveLevel] = React6.useState(-1);
-  const [autoplayState, setAutoplayState] = React6.useState("none");
-  const [error, setError] = React6.useState(null);
-  const [reloadKey, setReloadKey] = React6.useState(0);
-  const onErrorRef = React6.useRef(onError);
-  const onPlayingChangeRef = React6.useRef(onPlayingChange);
-  React6.useEffect(() => {
+  const videoRef = React7.useRef(null);
+  const hlsRef = React7.useRef(null);
+  const [state, setState] = React7.useState("idle");
+  const [qualities, setQualities] = React7.useState([]);
+  const [activeLevel, setActiveLevel] = React7.useState(-1);
+  const [autoplayState, setAutoplayState] = React7.useState("none");
+  const [error, setError] = React7.useState(null);
+  const [reloadKey, setReloadKey] = React7.useState(0);
+  const onErrorRef = React7.useRef(onError);
+  const onPlayingChangeRef = React7.useRef(onPlayingChange);
+  React7.useEffect(() => {
     onErrorRef.current = onError;
     onPlayingChangeRef.current = onPlayingChange;
   }, [onError, onPlayingChange]);
-  const retry = React6.useCallback(() => {
+  const retry = React7.useCallback(() => {
     setError(null);
     setState("loading");
     setAutoplayState("none");
     setReloadKey((k) => k + 1);
   }, []);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const media = videoRef.current;
     if (!media || !src || !active) {
       setState("idle");
@@ -3634,7 +3721,7 @@ function useHlsPlayback({
       destroyHls();
     };
   }, [src, mode, active, autoPlay, muted, reloadKey]);
-  const setLevel = React6.useCallback((index) => {
+  const setLevel = React7.useCallback((index) => {
     const hls = hlsRef.current;
     if (!hls) return;
     hls.nextLevel = index;
@@ -3679,6 +3766,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);
@@ -3704,12 +3804,12 @@ function VideoPlayer({
   className
 }) {
   const t = { ...DEFAULT_LABELS2, ...labels };
-  const containerRef = React6.useRef(null);
-  const firstPlayFiredRef = React6.useRef(false);
-  const [userStarted, setUserStarted] = React6.useState(false);
+  const containerRef = React7.useRef(null);
+  const firstPlayFiredRef = React7.useRef(false);
+  const [userStarted, setUserStarted] = React7.useState(false);
   const active = autoPlay || !poster || userStarted;
   const autoplayActive = autoPlay || userStarted;
-  const handlePlayingChange = React6.useCallback(
+  const handlePlayingChange = React7.useCallback(
     (playing) => {
       setIsPlaying(playing);
       if (playing && !firstPlayFiredRef.current) {
@@ -3738,25 +3838,25 @@ function VideoPlayer({
     onError,
     onPlayingChange: handlePlayingChange
   });
-  const [isPlaying, setIsPlaying] = React6.useState(false);
-  const [isMuted, setIsMuted] = React6.useState(muted);
-  const [volume, setVolume] = React6.useState(1);
-  const [currentTime, setCurrentTime] = React6.useState(0);
-  const [duration, setDuration] = React6.useState(0);
-  const [buffered, setBuffered] = React6.useState(0);
-  const [isFullscreen, setIsFullscreen] = React6.useState(false);
-  const [pipActive, setPipActive] = React6.useState(false);
-  const [controlsVisible, setControlsVisible] = React6.useState(true);
-  const [playbackRate, setPlaybackRate] = React6.useState(1);
-  const [openMenu, setOpenMenu] = React6.useState(
+  const [isPlaying, setIsPlaying] = React7.useState(false);
+  const [isMuted, setIsMuted] = React7.useState(muted);
+  const [volume, setVolume] = React7.useState(1);
+  const [currentTime, setCurrentTime] = React7.useState(0);
+  const [duration, setDuration] = React7.useState(0);
+  const [buffered, setBuffered] = React7.useState(0);
+  const [isFullscreen, setIsFullscreen] = React7.useState(false);
+  const [pipActive, setPipActive] = React7.useState(false);
+  const [controlsVisible, setControlsVisible] = React7.useState(true);
+  const [playbackRate, setPlaybackRate] = React7.useState(1);
+  const [openMenu, setOpenMenu] = React7.useState(
     null
   );
-  const [behindLive, setBehindLive] = React6.useState(false);
-  const hideTimerRef = React6.useRef(null);
+  const [behindLive, setBehindLive] = React7.useState(false);
+  const [webkitFullscreenSupported, setWebkitFullscreenSupported] = React7.useState(false);
+  const hideTimerRef = React7.useRef(null);
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
-  const fullscreenSupported = typeof document !== "undefined" && (!!document.fullscreenEnabled || // Safari
-  "webkitFullscreenEnabled" in document);
-  React6.useEffect(() => {
+  const fullscreenSupported = hasStandardFullscreen() || webkitFullscreenSupported;
+  React7.useEffect(() => {
     const video = videoRef.current;
     if (!video || !active) return;
     const onTimeUpdate = () => {
@@ -3789,12 +3889,27 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
+    setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
+  }, [videoRef, active]);
+  React7.useEffect(() => {
     const onFsChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React6.useEffect(() => {
+  React7.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]);
+  React7.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     const onEnter = () => setPipActive(true);
@@ -3806,18 +3921,18 @@ function VideoPlayer({
       video.removeEventListener("leavepictureinpicture", onLeave);
     };
   }, [videoRef]);
-  const scheduleHide = React6.useCallback(() => {
+  const scheduleHide = React7.useCallback(() => {
     if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     hideTimerRef.current = setTimeout(() => {
       setControlsVisible(false);
       setOpenMenu(null);
     }, CONTROLS_HIDE_MS);
   }, []);
-  const revealControls = React6.useCallback(() => {
+  const revealControls = React7.useCallback(() => {
     setControlsVisible(true);
     scheduleHide();
   }, [scheduleHide]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     return () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     };
@@ -3858,11 +3973,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() {
@@ -4270,8 +4395,8 @@ function MenuItem({
   );
 }
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
-  const [stats, setStats] = React6.useState({});
-  React6.useEffect(() => {
+  const [stats, setStats] = React7.useState({});
+  React7.useEffect(() => {
     if (!statsUrl || !enabled) return;
     let cancelled = false;
     const controller = new AbortController();
@@ -5296,7 +5421,7 @@ function ScrollBar({
   );
 }
 var phoneInputGroupClass = "flex h-9 w-full gap-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] [--PhoneInputCountrySelect-marginRight:0] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30 [&_.PhoneInputCountry]:mr-0";
-var PhoneInput = React6.forwardRef(
+var PhoneInput = React7.forwardRef(
   ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       RPNInput.default,
@@ -5316,7 +5441,7 @@ var PhoneInput = React6.forwardRef(
   }
 );
 PhoneInput.displayName = "PhoneInput";
-var InputComponent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var InputComponent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Input,
   {
     className: cn(
@@ -5334,9 +5459,9 @@ var CountrySelect = ({
   options: countryList,
   onChange
 }) => {
-  const scrollAreaRef = React6.useRef(null);
-  const [searchValue, setSearchValue] = React6.useState("");
-  const [isOpen, setIsOpen] = React6.useState(false);
+  const scrollAreaRef = React7.useRef(null);
+  const [searchValue, setSearchValue] = React7.useState("");
+  const [isOpen, setIsOpen] = React7.useState(false);
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -5517,8 +5642,8 @@ var MEXICO_STATE_PATHS = {
 };
 function MexicoMap({ selected, onToggle, className }) {
   const isInteractive = typeof onToggle === "function";
-  const selectedSet = React6.useMemo(() => new Set(selected), [selected]);
-  const handleKeyDown = React6.useCallback(
+  const selectedSet = React7.useMemo(() => new Set(selected), [selected]);
+  const handleKeyDown = React7.useCallback(
     (event, id) => {
       if (!onToggle) return;
       if (event.key === "Enter" || event.key === " ") {
@@ -6000,6 +6125,121 @@ function ChatMessageList({
     /* @__PURE__ */ jsx(MessageScrollerButton, {})
   ] }) });
 }
+var MessageComposer = React7.forwardRef(function MessageComposer2({
+  className,
+  locale = "en",
+  disabled,
+  readOnly,
+  value,
+  onChange,
+  onSubmit,
+  onKeyDown,
+  sendLabel,
+  sendDisabled = false,
+  sendButtonClassName,
+  sendButtonSize = "sm",
+  triggerLabel,
+  keepOpenOnSelect,
+  open,
+  onOpenChange,
+  side = "top",
+  align = "end",
+  labels,
+  recentLimit,
+  storageKey,
+  emojiTriggerClassName,
+  rows = 2,
+  ...props
+}, ref) {
+  const formRef = React7.useRef(null);
+  const fieldRef = React7.useRef(null);
+  const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
+  const pickerDisabled = Boolean(disabled || readOnly);
+  const draft = value !== void 0 && value !== null ? String(value) : "";
+  const canSubmit = Boolean(draft.trim()) && !sendDisabled && !disabled && !readOnly;
+  const handleSubmit = React7.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!canSubmit) return;
+      onSubmit(event);
+    },
+    [canSubmit, onSubmit]
+  );
+  const handleKeyDown = React7.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key !== "Enter" || event.shiftKey) return;
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      event.preventDefault();
+      if (!canSubmit) return;
+      formRef.current?.requestSubmit();
+    },
+    [canSubmit, onKeyDown]
+  );
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ref: formRef,
+      className: cn(emojiFieldWrapperClassName, "flex flex-col", className),
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            "data-slot": "textarea",
+            ref: mergeRefs(fieldRef, ref),
+            disabled,
+            readOnly,
+            value,
+            onChange,
+            onKeyDown: handleKeyDown,
+            rows,
+            className: cn(
+              "placeholder:text-muted-foreground flex min-h-10 w-full resize-none rounded-md px-3 pt-2 pb-1 text-base outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+              emojiFieldResetClassName
+            ),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1.5 pb-1.5", children: [
+          /* @__PURE__ */ jsx(
+            EmojiPickerPopover,
+            {
+              locale,
+              onSelect: handleEmojiSelect,
+              disabled: pickerDisabled,
+              triggerLabel,
+              keepOpenOnSelect,
+              open,
+              onOpenChange,
+              side,
+              align,
+              labels,
+              recentLimit,
+              storageKey,
+              triggerClassName: cn(
+                "size-7 text-muted-foreground",
+                emojiTriggerClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              size: sendButtonSize,
+              disabled: !canSubmit,
+              className: sendButtonClassName,
+              children: sendLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+MessageComposer.displayName = "MessageComposer";
 var RECONNECT_DELAY_MS = 2e3;
 function useSupportConversation({
   client,
@@ -6220,23 +6460,22 @@ function ThreadPanel({
             emptyDescription: labels.emptyThread
           }
         ) }),
-        /* @__PURE__ */ jsxs("form", { className: "flex gap-2 border-t p-3", onSubmit, children: [
-          /* @__PURE__ */ jsx(
-            EmojiTextarea,
-            {
-              locale: emojiLocale,
-              value: draft,
-              onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
-              placeholder: labels.placeholder,
-              "aria-label": labels.placeholder,
-              disabled: loading || sending,
-              maxLength: 2e3,
-              rows: 2,
-              className: "min-h-10 flex-1"
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !draft.trim() || sending || loading, children: labels.send })
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "border-t p-3", children: /* @__PURE__ */ jsx(
+          MessageComposer,
+          {
+            locale: emojiLocale,
+            value: draft,
+            onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
+            onSubmit,
+            sendLabel: labels.send,
+            placeholder: labels.placeholder,
+            "aria-label": labels.placeholder,
+            disabled: loading || sending,
+            sendDisabled: loading || sending,
+            maxLength: 2e3,
+            rows: 2
+          }
+        ) })
       ]
     }
   );
@@ -6618,6 +6857,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, 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, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, 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, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map