@sesionario/blocks 1.8.0 → 1.10.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React6 from 'react';
-import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo } 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';
 import { twMerge } from 'tailwind-merge';
@@ -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)
                 }
               )
             }
@@ -1380,7 +1465,7 @@ function LanguageSwitcher({
   const sizes = sizeClasses2[size];
   const shapeClass = shapeClasses2[shape];
   const reduceMotion = useReducedMotion();
-  const defaultLabels4 = {
+  const defaultLabels5 = {
     language: labels.language ?? "Language"
   };
   if (variant === "mini") {
@@ -1390,7 +1475,7 @@ function LanguageSwitcher({
         {
           variant: "ghost",
           size: "icon",
-          "aria-label": defaultLabels4.language,
+          "aria-label": defaultLabels5.language,
           className: cn(sizes.buttonMini, shapeClass, className),
           children: /* @__PURE__ */ jsx(Languages, { className: sizes.iconMini })
         }
@@ -3679,6 +3764,19 @@ var PLAYBACK_RATES = [0.75, 1, 1.25, 1.5, 2];
 var CONTROLS_HIDE_MS = 3e3;
 var LIVE_EDGE_THRESHOLD_S = 8;
 var SEEK_STEP_S = 5;
+function asWebkitVideo(video) {
+  return video;
+}
+function hasWebkitVideoFullscreen(video) {
+  const webkit = asWebkitVideo(video);
+  return typeof webkit?.webkitEnterFullscreen === "function";
+}
+function hasStandardFullscreen() {
+  if (typeof document === "undefined") return false;
+  if (document.fullscreenEnabled) return true;
+  const doc = document;
+  return !!doc.webkitFullscreenEnabled;
+}
 function formatTime(seconds) {
   if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
   const total = Math.floor(seconds);
@@ -3752,10 +3850,10 @@ function VideoPlayer({
     null
   );
   const [behindLive, setBehindLive] = React6.useState(false);
+  const [webkitFullscreenSupported, setWebkitFullscreenSupported] = React6.useState(false);
   const hideTimerRef = React6.useRef(null);
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
-  const fullscreenSupported = typeof document !== "undefined" && (!!document.fullscreenEnabled || // Safari
-  "webkitFullscreenEnabled" in document);
+  const fullscreenSupported = hasStandardFullscreen() || webkitFullscreenSupported;
   React6.useEffect(() => {
     const video = videoRef.current;
     if (!video || !active) return;
@@ -3789,11 +3887,26 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
+  React6.useEffect(() => {
+    setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
+  }, [videoRef, active]);
   React6.useEffect(() => {
     const onFsChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
+  React6.useEffect(() => {
+    const video = asWebkitVideo(videoRef.current);
+    if (!video) return;
+    const onBegin = () => setIsFullscreen(true);
+    const onEnd = () => setIsFullscreen(false);
+    video.addEventListener("webkitbeginfullscreen", onBegin);
+    video.addEventListener("webkitendfullscreen", onEnd);
+    return () => {
+      video.removeEventListener("webkitbeginfullscreen", onBegin);
+      video.removeEventListener("webkitendfullscreen", onEnd);
+    };
+  }, [videoRef, active]);
   React6.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -3858,11 +3971,21 @@ function VideoPlayer({
   }
   function toggleFullscreen() {
     const el = containerRef.current;
-    if (!el) return;
-    if (document.fullscreenElement === el) {
+    const video = asWebkitVideo(videoRef.current);
+    if (el && document.fullscreenElement === el) {
       void document.exitFullscreen();
-    } else {
-      void el.requestFullscreen?.();
+      return;
+    }
+    if (video?.webkitDisplayingFullscreen && video.webkitExitFullscreen) {
+      video.webkitExitFullscreen();
+      return;
+    }
+    if (el && hasStandardFullscreen() && typeof el.requestFullscreen === "function") {
+      void el.requestFullscreen();
+      return;
+    }
+    if (video && typeof video.webkitEnterFullscreen === "function") {
+      video.webkitEnterFullscreen();
     }
   }
   function togglePip() {
@@ -4317,6 +4440,18 @@ function useDebouncedValueStrict(value, delayMs) {
   }, [value, delayMs]);
   return debounced;
 }
+function useMediaQuery2(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
 function useSearchHotkey(options = {}) {
   const { defaultOpen = false, disabled = false } = options;
   const [open, setOpen] = useState(defaultOpen);
@@ -4334,6 +4469,22 @@ function useSearchHotkey(options = {}) {
   }, [disabled]);
   return { open, setOpen, toggle };
 }
+
+// src/components/search/fuzzy.ts
+function normalize(value) {
+  return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+function fuzzyMatch(query, target) {
+  const q = normalize(query.trim());
+  if (!q) return true;
+  const t = normalize(target);
+  if (t.includes(q)) return true;
+  let qi = 0;
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] === q[qi]) qi++;
+  }
+  return qi === q.length;
+}
 function Command({
   className,
   ...props
@@ -4451,6 +4602,19 @@ function CommandGroup({
     }
   );
 }
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("-mx-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
 function CommandItem({
   className,
   ...props
@@ -4467,23 +4631,584 @@ function CommandItem({
     }
   );
 }
-
-// src/components/search/fuzzy.ts
-function normalize(value) {
-  return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+function OptionRow({
+  entry,
+  selected,
+  onSelect,
+  renderOption
+}) {
+  return /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      value: entry.value,
+      keywords: [entry.label],
+      onSelect,
+      "data-checked": selected || void 0,
+      children: [
+        renderOption ? renderOption(entry.item, { selected }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.label }),
+        /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            className: cn(
+              "ml-auto size-4 shrink-0",
+              selected ? "opacity-100" : "opacity-0"
+            )
+          }
+        )
+      ]
+    },
+    entry.value
+  );
 }
-function fuzzyMatch(query, target) {
-  const q = normalize(query.trim());
-  if (!q) return true;
-  const t = normalize(target);
-  if (t.includes(q)) return true;
-  let qi = 0;
-  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
-    if (t[ti] === q[qi]) qi++;
-  }
-  return qi === q.length;
+function SearchablePickerList({
+  query,
+  onQueryChange,
+  labels,
+  isLoading,
+  hasError,
+  recommended,
+  recent,
+  results,
+  selectedValues,
+  mode,
+  allowEmpty,
+  emptyLabel,
+  onSelectEmpty,
+  onSelectItem,
+  renderOption,
+  createOption,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
+  listClassName
+}) {
+  const hasPinned = recommended.length > 0 || recent.length > 0;
+  const hasResults = results.length > 0;
+  const showEmpty = !isLoading && !hasError && !hasPinned && !hasResults && !(allowEmpty && mode === "single");
+  return /* @__PURE__ */ jsxs(Command, { shouldFilter: false, className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsx(
+      CommandInput,
+      {
+        placeholder: labels.searchPlaceholder,
+        value: query,
+        onValueChange: onQueryChange
+      }
+    ),
+    /* @__PURE__ */ jsxs(CommandList, { className: cn("min-h-0 flex-1", listClassName), children: [
+      isLoading ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground",
+          role: "status",
+          children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+            labels.loading
+          ]
+        }
+      ) : null,
+      hasError && !isLoading ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "py-6 text-center text-sm text-destructive",
+          role: "alert",
+          children: labels.error
+        }
+      ) : null,
+      showEmpty ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : null,
+      allowEmpty && mode === "single" && !query.trim() ? /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(
+        CommandItem,
+        {
+          value: "__empty__",
+          onSelect: () => onSelectEmpty?.(),
+          "data-checked": !selectedValues.size || void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: emptyLabel }),
+            /* @__PURE__ */ jsx(
+              CheckIcon,
+              {
+                className: cn(
+                  "ml-auto size-4 shrink-0",
+                  selectedValues.size === 0 ? "opacity-100" : "opacity-0"
+                )
+              }
+            )
+          ]
+        }
+      ) }) : null,
+      recommended.length > 0 ? /* @__PURE__ */ jsx(CommandGroup, { heading: labels.recommended, children: recommended.map((entry) => /* @__PURE__ */ jsx(
+        OptionRow,
+        {
+          entry,
+          selected: selectedValues.has(entry.value),
+          onSelect: () => onSelectItem(entry.value),
+          renderOption
+        },
+        `rec-${entry.value}`
+      )) }) : null,
+      recent.length > 0 ? /* @__PURE__ */ jsx(CommandGroup, { heading: labels.recent, children: recent.map((entry) => /* @__PURE__ */ jsx(
+        OptionRow,
+        {
+          entry,
+          selected: selectedValues.has(entry.value),
+          onSelect: () => onSelectItem(entry.value),
+          renderOption
+        },
+        `recent-${entry.value}`
+      )) }) : null,
+      hasPinned && hasResults ? /* @__PURE__ */ jsx(CommandSeparator, {}) : null,
+      hasResults ? /* @__PURE__ */ jsx(CommandGroup, { heading: hasPinned ? labels.results : void 0, children: results.map((entry) => /* @__PURE__ */ jsx(
+        OptionRow,
+        {
+          entry,
+          selected: selectedValues.has(entry.value),
+          onSelect: () => onSelectItem(entry.value),
+          renderOption
+        },
+        `res-${entry.value}`
+      )) }) : null,
+      hasMore && onLoadMore ? /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "w-full",
+          disabled: isLoadingMore,
+          onClick: () => void onLoadMore(),
+          children: isLoadingMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+            labels.loading
+          ] }) : labels.loadMore
+        }
+      ) }) : null,
+      createOption ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CommandSeparator, {}),
+        /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(
+          CommandItem,
+          {
+            value: "__create__",
+            onSelect: () => createOption.onSelect(),
+            children: createOption.label
+          }
+        ) })
+      ] }) : null
+    ] })
+  ] });
 }
 var defaultLabels3 = {
+  placeholder: "Seleccionar\u2026",
+  searchPlaceholder: "Buscar\u2026",
+  empty: "No se encontraron resultados",
+  loading: "Cargando\u2026",
+  error: "No se pudo cargar la lista",
+  recommended: "Recomendados",
+  recent: "Recientes",
+  results: "Resultados",
+  done: "Listo",
+  cancel: "Cancelar",
+  clear: "Limpiar",
+  selectedCount: (count) => count === 1 ? "1 seleccionado" : `${count} seleccionados`,
+  emptyOption: "Ninguno",
+  loadMore: "Cargar m\xE1s",
+  dialogTitle: "Seleccionar"
+};
+function toListItems(items, getOptionValue, getOptionLabel) {
+  if (!items?.length) return [];
+  return items.map((item) => ({
+    item,
+    value: getOptionValue(item),
+    label: getOptionLabel(item)
+  }));
+}
+function dedupeByValue(items, exclude = /* @__PURE__ */ new Set()) {
+  const seen = new Set(exclude);
+  const out = [];
+  for (const entry of items) {
+    if (seen.has(entry.value)) continue;
+    seen.add(entry.value);
+    out.push(entry);
+  }
+  return out;
+}
+function matchesQuery(entry, query, getOptionKeywords) {
+  if (!query.trim()) return true;
+  if (fuzzyMatch(query, entry.label)) return true;
+  return getOptionKeywords?.(entry.item)?.some(
+    (keyword) => fuzzyMatch(query, keyword)
+  ) ?? false;
+}
+function SearchablePicker(props) {
+  const {
+    options,
+    fetchOptions,
+    getOptionValue,
+    getOptionLabel,
+    getOptionKeywords,
+    renderOption,
+    renderValue,
+    pinned,
+    labels: userLabels,
+    minQueryLength = 0,
+    debounceMs = 200,
+    disabled,
+    open: openProp,
+    onOpenChange,
+    clearable,
+    allowEmpty,
+    emptyLabel,
+    keepOpenOnSelect,
+    maxSelected,
+    createOption,
+    onLoadMore,
+    hasMore,
+    className,
+    triggerClassName: triggerClassName2,
+    id,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel
+  } = props;
+  const mode = props.mode ?? "single";
+  const labels = { ...defaultLabels3, ...userLabels };
+  const resolvedEmptyLabel = emptyLabel ?? labels.emptyOption;
+  const isMobile = useMediaQuery2("(max-width: 767px)");
+  const generatedId = useId();
+  const triggerId = id ?? generatedId;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      onOpenChange?.(next);
+      if (openProp === void 0) setUncontrolledOpen(next);
+    },
+    [onOpenChange, openProp]
+  );
+  const [query, setQuery] = useState("");
+  const [remoteItems, setRemoteItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const debouncedQuery = useDebouncedValue(query, debounceMs);
+  const requestIdRef = useRef(0);
+  const knownItemsRef = useRef(/* @__PURE__ */ new Map());
+  const rememberItems = useCallback(
+    (items) => {
+      for (const item of items) {
+        knownItemsRef.current.set(getOptionValue(item), item);
+      }
+    },
+    [getOptionValue]
+  );
+  useEffect(() => {
+    if (options) rememberItems(options);
+    if (pinned?.recommended) rememberItems(pinned.recommended);
+    if (pinned?.recent) rememberItems(pinned.recent);
+  }, [options, pinned, rememberItems]);
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setRemoteItems([]);
+      setHasError(false);
+      setIsLoading(false);
+    }
+  }, [open]);
+  const trimmedDebounced = debouncedQuery.trim();
+  const shouldFetch = Boolean(fetchOptions) && open && trimmedDebounced.length >= minQueryLength && (trimmedDebounced.length > 0 || !options);
+  useEffect(() => {
+    if (!shouldFetch || !fetchOptions) {
+      if (!trimmedDebounced) {
+        setRemoteItems([]);
+        setHasError(false);
+        setIsLoading(false);
+      }
+      return;
+    }
+    const requestId = ++requestIdRef.current;
+    setIsLoading(true);
+    setHasError(false);
+    fetchOptions(trimmedDebounced).then((result) => {
+      if (requestIdRef.current !== requestId) return;
+      setRemoteItems(result);
+      rememberItems(result);
+    }).catch(() => {
+      if (requestIdRef.current !== requestId) return;
+      setRemoteItems([]);
+      setHasError(true);
+    }).finally(() => {
+      if (requestIdRef.current !== requestId) return;
+      setIsLoading(false);
+    });
+  }, [shouldFetch, fetchOptions, trimmedDebounced, rememberItems]);
+  const selectedValues = useMemo(() => {
+    if (mode === "multiple") {
+      const multiValue = props.value ?? [];
+      return new Set(multiValue);
+    }
+    const singleValue = props.value;
+    return singleValue ? /* @__PURE__ */ new Set([singleValue]) : /* @__PURE__ */ new Set();
+  }, [mode, props]);
+  const selectedValueKey = mode === "multiple" ? (props.value ?? []).join("\0") : props.value ?? "";
+  const selectedItems = useMemo(() => {
+    const values = mode === "multiple" ? selectedValueKey ? selectedValueKey.split("\0") : [] : selectedValueKey ? [selectedValueKey] : [];
+    return values.map((value) => knownItemsRef.current.get(value)).filter((item) => item !== void 0);
+  }, [mode, selectedValueKey, options, pinned, remoteItems]);
+  const queryForFilter = query.trim();
+  const recommended = useMemo(() => {
+    if (queryForFilter) return [];
+    const pinnedValues = /* @__PURE__ */ new Set();
+    const items = dedupeByValue(
+      toListItems(pinned?.recommended, getOptionValue, getOptionLabel)
+    );
+    for (const entry of items) pinnedValues.add(entry.value);
+    return items;
+  }, [queryForFilter, pinned?.recommended, getOptionValue, getOptionLabel]);
+  const recent = useMemo(() => {
+    if (queryForFilter) return [];
+    const exclude = new Set(recommended.map((e) => e.value));
+    return dedupeByValue(
+      toListItems(pinned?.recent, getOptionValue, getOptionLabel),
+      exclude
+    );
+  }, [
+    queryForFilter,
+    pinned?.recent,
+    recommended,
+    getOptionValue,
+    getOptionLabel
+  ]);
+  const pinnedValueSet = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const entry of recommended) set.add(entry.value);
+    for (const entry of recent) set.add(entry.value);
+    return set;
+  }, [recommended, recent]);
+  const results = useMemo(() => {
+    const usingRemote = Boolean(fetchOptions) && trimmedDebounced.length >= minQueryLength && (trimmedDebounced.length > 0 || !options);
+    if (usingRemote) {
+      return dedupeByValue(
+        toListItems(remoteItems, getOptionValue, getOptionLabel),
+        queryForFilter ? /* @__PURE__ */ new Set() : pinnedValueSet
+      );
+    }
+    const staticItems = toListItems(options, getOptionValue, getOptionLabel);
+    const filtered = staticItems.filter(
+      (entry) => matchesQuery(entry, queryForFilter, getOptionKeywords)
+    );
+    return dedupeByValue(filtered, queryForFilter ? /* @__PURE__ */ new Set() : pinnedValueSet);
+  }, [
+    fetchOptions,
+    trimmedDebounced,
+    minQueryLength,
+    options,
+    remoteItems,
+    getOptionValue,
+    getOptionLabel,
+    getOptionKeywords,
+    queryForFilter,
+    pinnedValueSet
+  ]);
+  const closeOnSelect = keepOpenOnSelect !== void 0 ? !keepOpenOnSelect : mode === "single";
+  const handleSelectEmpty = useCallback(() => {
+    if (mode === "single") {
+      props.onValueChange?.(
+        null
+      );
+    }
+    if (closeOnSelect) setOpen(false);
+  }, [mode, props, closeOnSelect, setOpen]);
+  const handleSelectItem = useCallback(
+    (value) => {
+      if (mode === "multiple") {
+        const current = props.value ?? [];
+        const onChange = props.onValueChange;
+        const exists = current.includes(value);
+        if (exists) {
+          onChange?.(current.filter((v) => v !== value));
+        } else if (maxSelected !== void 0 && current.length >= maxSelected) {
+          return;
+        } else {
+          onChange?.([...current, value]);
+        }
+        if (closeOnSelect) setOpen(false);
+        return;
+      }
+      props.onValueChange?.(
+        value
+      );
+      if (closeOnSelect) setOpen(false);
+    },
+    [mode, props, maxSelected, closeOnSelect, setOpen]
+  );
+  const handleClear = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (mode === "multiple") {
+        props.onValueChange?.(
+          []
+        );
+      } else {
+        props.onValueChange?.(null);
+      }
+    },
+    [mode, props]
+  );
+  const handleLoadMore = useCallback(async () => {
+    if (!onLoadMore || isLoadingMore) return;
+    setIsLoadingMore(true);
+    try {
+      await onLoadMore();
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [onLoadMore, isLoadingMore]);
+  const triggerLabel = useMemo(() => {
+    if (renderValue) {
+      if (mode === "multiple") {
+        return renderValue(selectedItems);
+      }
+      return renderValue(selectedItems[0] ?? null);
+    }
+    if (mode === "multiple") {
+      const count = selectedValues.size;
+      if (count === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.placeholder });
+      }
+      if (selectedItems.length === 1) {
+        return getOptionLabel(selectedItems[0]);
+      }
+      return labels.selectedCount(count);
+    }
+    if (selectedValues.size === 0) {
+      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: allowEmpty ? resolvedEmptyLabel : labels.placeholder });
+    }
+    if (selectedItems[0]) {
+      return getOptionLabel(selectedItems[0]);
+    }
+    const only = [...selectedValues][0];
+    return only ?? labels.placeholder;
+  }, [
+    renderValue,
+    mode,
+    selectedItems,
+    selectedValues,
+    labels,
+    getOptionLabel,
+    allowEmpty,
+    resolvedEmptyLabel
+  ]);
+  const showClear = clearable && !disabled && (mode === "multiple" ? selectedValues.size > 0 : selectedValues.size > 0);
+  const list = /* @__PURE__ */ jsx(
+    SearchablePickerList,
+    {
+      query,
+      onQueryChange: setQuery,
+      labels,
+      isLoading,
+      hasError,
+      recommended,
+      recent,
+      results,
+      selectedValues,
+      mode,
+      allowEmpty,
+      emptyLabel: resolvedEmptyLabel,
+      onSelectEmpty: handleSelectEmpty,
+      onSelectItem: handleSelectItem,
+      renderOption,
+      createOption,
+      onLoadMore: onLoadMore ? handleLoadMore : void 0,
+      hasMore,
+      isLoadingMore,
+      listClassName: isMobile ? "max-h-[min(50vh,360px)]" : "max-h-72"
+    }
+  );
+  const triggerButton = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      role: "combobox",
+      id: triggerId,
+      "aria-expanded": open,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel ?? labels.placeholder,
+      disabled,
+      className: cn("w-full justify-between font-normal", triggerClassName2),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: triggerLabel }),
+        /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50", "aria-hidden": true })
+      ]
+    }
+  );
+  const clearButton = showClear ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": labels.clear,
+      disabled,
+      className: "shrink-0",
+      onClick: handleClear,
+      children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+    }
+  ) : null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full items-center gap-1", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-w-0 flex-1",
+          onClick: () => {
+            if (!disabled) setOpen(true);
+          },
+          children: triggerButton
+        }
+      ),
+      clearButton,
+      /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DrawerContent, { className: "max-h-[90vh]", children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { className: "text-left", children: /* @__PURE__ */ jsx(DrawerTitle, { children: labels.dialogTitle }) }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden px-2 pb-2", children: list }),
+        mode === "multiple" ? /* @__PURE__ */ jsxs(DrawerFooter, { className: "flex-row gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "flex-1",
+              onClick: () => setOpen(false),
+              children: labels.cancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              className: "flex-1",
+              onClick: () => setOpen(false),
+              children: labels.done
+            }
+          )
+        ] }) : null
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: triggerButton }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: "w-[var(--radix-popover-trigger-width)] min-w-[240px] p-0",
+          align: "start",
+          children: list
+        }
+      )
+    ] }) }),
+    clearButton
+  ] });
+}
+var defaultLabels4 = {
   placeholder: "Buscar en toda la plataforma\u2026",
   dialogTitle: "Buscar",
   dialogDescription: "Busca funcionalidades, eventos, documentos y m\xE1s",
@@ -4517,7 +5242,7 @@ function SearchCommand({
   debounceMs = 200,
   className
 }) {
-  const labels = { ...defaultLabels3, ...userLabels };
+  const labels = { ...defaultLabels4, ...userLabels };
   const [query, setQuery] = useState("");
   const [hits, setHits] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -5398,18 +6123,6 @@ function ChatMessageList({
     /* @__PURE__ */ jsx(MessageScrollerButton, {})
   ] }) });
 }
-function useMediaQuery2(query) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mql = window.matchMedia(query);
-    const onChange = () => setMatches(mql.matches);
-    onChange();
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [query]);
-  return matches;
-}
 var RECONNECT_DELAY_MS = 2e3;
 function useSupportConversation({
   client,
@@ -6028,6 +6741,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, 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, 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