@sesionario/blocks 1.5.0 → 1.7.0

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, XIcon } from 'lucide-react';
+import { createContext, useContext, useState, useRef, useCallback, useEffect, 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,301 @@ function ConfirmDestructiveDialog({
     ] })
   ] }) });
 }
+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,
@@ -5040,7 +5336,636 @@ 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,
+  getWsUrl,
+  conversationId: conversationIdProp,
+  open = null,
+  enabled = true,
+  onConversationReady,
+  onIncomingMessage
+}) {
+  const [conversationId, setConversationId] = useState(
+    conversationIdProp
+  );
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
+  const socketRef = useRef(null);
+  const reconnectRef = useRef(null);
+  const closedByUser = useRef(false);
+  const onReadyRef = useRef(onConversationReady);
+  const onIncomingRef = useRef(onIncomingMessage);
+  onReadyRef.current = onConversationReady;
+  onIncomingRef.current = onIncomingMessage;
+  const load = useCallback(async () => {
+    if (!enabled) return;
+    setLoading(true);
+    setError(null);
+    try {
+      let id = conversationIdProp;
+      if (!id && open) {
+        const conv = await client.findOrCreateConversation(open);
+        id = conv.id;
+      }
+      if (!id) {
+        setConversationId(null);
+        setMessages([]);
+        return;
+      }
+      setConversationId(id);
+      onReadyRef.current?.(id);
+      const msgs = await client.listMessages(id);
+      setMessages(msgs);
+      await client.markRead(id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Chat load failed");
+    } finally {
+      setLoading(false);
+    }
+  }, [client, conversationIdProp, enabled, open]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  useEffect(() => {
+    closedByUser.current = false;
+    if (!enabled || !conversationId) return;
+    let cancelled = false;
+    const connect = async () => {
+      const url = await getWsUrl(conversationId);
+      if (!url || cancelled || closedByUser.current) return;
+      const socket = new WebSocket(url);
+      socketRef.current = socket;
+      socket.onmessage = (event) => {
+        let data;
+        try {
+          data = JSON.parse(String(event.data));
+        } catch {
+          return;
+        }
+        if (data.type === "message") {
+          setMessages((prev) => {
+            if (prev.some((m) => m.id === data.id)) return prev;
+            return [...prev, data];
+          });
+          onIncomingRef.current?.(data);
+        } else if (data.type === "deleted") {
+          setMessages(
+            (prev) => prev.map(
+              (m) => m.id === data.id ? { ...m, deleted: true, body: "" } : m
+            )
+          );
+        }
+      };
+      socket.onclose = () => {
+        if (cancelled || closedByUser.current) return;
+        reconnectRef.current = setTimeout(() => {
+          void connect();
+        }, RECONNECT_DELAY_MS);
+      };
+    };
+    void connect();
+    return () => {
+      cancelled = true;
+      closedByUser.current = true;
+      if (reconnectRef.current) clearTimeout(reconnectRef.current);
+      socketRef.current?.close();
+      socketRef.current = null;
+    };
+  }, [conversationId, enabled, getWsUrl]);
+  const send = useCallback(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!conversationId || !trimmed || sending) return;
+      setSending(true);
+      setError(null);
+      try {
+        const msg = await client.sendMessage(conversationId, trimmed);
+        setMessages((prev) => {
+          if (prev.some((m) => m.id === msg.id)) return prev;
+          return [...prev, msg];
+        });
+        await client.markRead(conversationId);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Send failed");
+        throw err;
+      } finally {
+        setSending(false);
+      }
+    },
+    [client, conversationId, sending]
+  );
+  return {
+    conversationId,
+    messages,
+    loading,
+    sending,
+    error,
+    send,
+    reload: load
+  };
+}
+var SupportMessengerContext = createContext(null);
+function useSupportMessenger() {
+  const ctx = useContext(SupportMessengerContext);
+  if (!ctx) {
+    throw new Error(
+      "useSupportMessenger must be used within SupportMessengerProvider"
+    );
+  }
+  return ctx;
+}
+function useSupportMessengerOptional() {
+  return useContext(SupportMessengerContext);
+}
+function ThreadPanel({
+  thread,
+  client,
+  getWsUrl,
+  currentUserId,
+  labels,
+  emojiLocale,
+  onClose,
+  onBack,
+  showBack,
+  onConversationReady,
+  className
+}) {
+  const [draft, setDraft] = useState("");
+  const { messages, loading, sending, error, send } = useSupportConversation({
+    client,
+    getWsUrl,
+    conversationId: thread.conversationId ?? null,
+    open: thread.open ?? null,
+    onConversationReady
+  });
+  async function onSubmit(e) {
+    e.preventDefault();
+    const text = draft.trim();
+    if (!text) return;
+    setDraft("");
+    try {
+      await send(text);
+    } catch {
+      setDraft(text);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-xl border bg-card shadow-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 border-b px-2 py-2", children: [
+          showBack && onBack ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              onClick: onBack,
+              "aria-label": labels.back,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 px-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: thread.title }),
+            thread.subtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: thread.subtitle }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              onClick: onClose,
+              "aria-label": labels.close,
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", children: /* @__PURE__ */ jsx(LoadingState, { label: labels.loading, className: "py-0" }) }) : error ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-destructive", role: "alert", children: error }) : /* @__PURE__ */ jsx(
+          ChatMessageList,
+          {
+            messages,
+            currentUserId,
+            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 })
+        ] })
+      ]
+    }
+  );
+}
+function ListPanel({
+  items,
+  labels,
+  tabs,
+  activeTab,
+  onTabChange,
+  onSelect,
+  onClose,
+  searchThreshold,
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const showSearch = items.length >= searchThreshold;
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(
+      (item) => item.title.toLowerCase().includes(q) || (item.subtitle?.toLowerCase().includes(q) ?? false)
+    );
+  }, [items, query]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-xl border bg-card shadow-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: labels.listTitle }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              onClick: onClose,
+              "aria-label": labels.close,
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ] }),
+        tabs && tabs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b p-2", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: activeTab === tab.id ? "default" : "outline",
+            onClick: () => onTabChange?.(tab.id),
+            children: tab.label
+          },
+          tab.id
+        )) }) : null,
+        showSearch ? /* @__PURE__ */ jsx("div", { className: "border-b p-2", children: /* @__PURE__ */ jsxs("label", { className: "relative block", children: [
+          /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              placeholder: labels.searchPlaceholder ?? "Buscar\u2026",
+              className: "h-8 w-full rounded-md border bg-transparent pr-2 pl-8 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            }
+          )
+        ] }) }) : null,
+        /* @__PURE__ */ jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: labels.emptyList }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left transition-colors hover:bg-muted/80",
+            onClick: () => onSelect(item),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-semibold text-white",
+                  style: item.avatarUrl ? void 0 : avatarFallbackStyle(item.title),
+                  children: item.avatarUrl ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: item.avatarUrl,
+                      alt: "",
+                      className: "size-full object-cover"
+                    }
+                  ) : getInitials(item.title)
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: item.title }),
+                item.subtitle ? /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.subtitle }) : null
+              ] }),
+              (item.unreadCount ?? 0) > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-primary-foreground", children: (item.unreadCount ?? 0) > 99 ? "99+" : item.unreadCount }) : null
+            ]
+          }
+        ) }, item.key)) })
+      ]
+    }
+  );
+}
+function SupportMessengerProvider({
+  children,
+  client,
+  getWsUrl,
+  currentUserId,
+  items,
+  labels,
+  enabled = true,
+  forceMinimized = false,
+  emojiLocale = "es",
+  tabs,
+  activeTab,
+  onTabChange,
+  onRefreshItems,
+  searchThreshold = 8,
+  className
+}) {
+  const isMobile = useMediaQuery2("(max-width: 767px)");
+  const [listOpen, setListOpen] = useState(false);
+  const [threads, setThreads] = useState([]);
+  const [mobileThreadKey, setMobileThreadKey] = useState(null);
+  const totalUnread = useMemo(
+    () => items.reduce((sum, item) => sum + (item.unreadCount ?? 0), 0),
+    [items]
+  );
+  useEffect(() => {
+    if (!forceMinimized) return;
+    setListOpen(false);
+    setThreads([]);
+    setMobileThreadKey(null);
+  }, [forceMinimized]);
+  const openList = useCallback(() => {
+    setListOpen(true);
+    void onRefreshItems?.();
+  }, [onRefreshItems]);
+  const closeList = useCallback(() => setListOpen(false), []);
+  const toggleList = useCallback(() => {
+    setListOpen((prev) => {
+      const next = !prev;
+      if (next) void onRefreshItems?.();
+      return next;
+    });
+  }, [onRefreshItems]);
+  const openThread = useCallback((req) => {
+    setListOpen(false);
+    setThreads((prev) => {
+      const existing = prev.find((t) => t.key === req.key);
+      if (existing) {
+        return [
+          ...prev.filter((t) => t.key !== req.key),
+          { ...existing, ...req }
+        ];
+      }
+      const next = [...prev, req];
+      return next.slice(-2);
+    });
+    setMobileThreadKey(req.key);
+  }, []);
+  const closeThread = useCallback((key) => {
+    setThreads((prev) => prev.filter((t) => t.key !== key));
+    setMobileThreadKey((prev) => prev === key ? null : prev);
+  }, []);
+  const closeAll = useCallback(() => {
+    setListOpen(false);
+    setThreads([]);
+    setMobileThreadKey(null);
+  }, []);
+  const ctx = useMemo(
+    () => ({
+      listOpen,
+      openList,
+      closeList,
+      toggleList,
+      openThread,
+      closeThread,
+      closeAll,
+      activeThreadKey: mobileThreadKey ?? threads[threads.length - 1]?.key ?? null,
+      totalUnread
+    }),
+    [
+      listOpen,
+      openList,
+      closeList,
+      toggleList,
+      openThread,
+      closeThread,
+      closeAll,
+      mobileThreadKey,
+      threads,
+      totalUnread
+    ]
+  );
+  const handleSelectItem = useCallback(
+    (item) => {
+      openThread({
+        key: item.key,
+        title: item.title,
+        subtitle: item.subtitle,
+        conversationId: item.conversationId,
+        open: item.open
+      });
+    },
+    [openThread]
+  );
+  const activeMobileThread = threads.find((t) => t.key === mobileThreadKey);
+  return /* @__PURE__ */ jsxs(SupportMessengerContext.Provider, { value: ctx, children: [
+    children,
+    enabled ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "pointer-events-none fixed right-4 bottom-4 z-50 flex flex-col items-end gap-3",
+          className
+        ),
+        children: [
+          !isMobile ? /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex items-end gap-3", children: [
+            threads.map((thread) => /* @__PURE__ */ jsx("div", { className: "h-[28rem] w-[22rem]", children: /* @__PURE__ */ jsx(
+              ThreadPanel,
+              {
+                thread,
+                client,
+                getWsUrl,
+                currentUserId,
+                labels,
+                emojiLocale,
+                onClose: () => closeThread(thread.key),
+                onConversationReady: () => void onRefreshItems?.()
+              }
+            ) }, thread.key)),
+            listOpen ? /* @__PURE__ */ jsx("div", { className: "h-[28rem] w-[20rem]", children: /* @__PURE__ */ jsx(
+              ListPanel,
+              {
+                items,
+                labels,
+                tabs,
+                activeTab,
+                onTabChange,
+                onSelect: handleSelectItem,
+                onClose: closeList,
+                searchThreshold
+              }
+            ) }) : null
+          ] }) : null,
+          isMobile ? /* @__PURE__ */ jsx(
+            Drawer,
+            {
+              open: listOpen || Boolean(activeMobileThread),
+              onOpenChange: (open) => {
+                if (!open) closeAll();
+              },
+              children: /* @__PURE__ */ jsx(DrawerContent, { className: "pointer-events-auto mx-auto flex h-[85vh] max-w-lg flex-col", children: activeMobileThread ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DrawerTitle, { children: activeMobileThread.title }) }),
+                /* @__PURE__ */ jsx(
+                  ThreadPanel,
+                  {
+                    thread: activeMobileThread,
+                    client,
+                    getWsUrl,
+                    currentUserId,
+                    labels,
+                    emojiLocale,
+                    showBack: true,
+                    onBack: () => {
+                      closeThread(activeMobileThread.key);
+                      setListOpen(true);
+                    },
+                    onClose: closeAll,
+                    onConversationReady: () => void onRefreshItems?.(),
+                    className: "h-full rounded-none border-0 shadow-none"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DrawerTitle, { children: labels.listTitle }) }),
+                /* @__PURE__ */ jsx(
+                  ListPanel,
+                  {
+                    items,
+                    labels,
+                    tabs,
+                    activeTab,
+                    onTabChange,
+                    onSelect: handleSelectItem,
+                    onClose: closeAll,
+                    searchThreshold,
+                    className: "h-full rounded-none border-0 shadow-none"
+                  }
+                )
+              ] }) })
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "pointer-events-auto relative flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-[transform,opacity] motion-safe:hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+                listOpen && !forceMinimized && "ring-2 ring-ring ring-offset-2"
+              ),
+              "aria-label": totalUnread > 0 && labels.unreadBadgeAria ? `${labels.launcherAria}. ${labels.unreadBadgeAria.replace("{count}", String(totalUnread))}` : labels.launcherAria,
+              onClick: () => {
+                if (isMobile) {
+                  if (activeMobileThread) {
+                    closeAll();
+                  } else {
+                    toggleList();
+                  }
+                  return;
+                }
+                toggleList();
+              },
+              children: [
+                /* @__PURE__ */ jsx(MessageCircle, { className: "size-6" }),
+                totalUnread > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 flex size-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white", children: totalUnread > 99 ? "99+" : totalUnread }) : null
+              ]
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/lib/support-chat.ts
+async function parseJson(res) {
+  const body = await res.json();
+  if (!res.ok) {
+    throw new Error(
+      typeof body === "object" && body && "error" in body && body.error ? String(body.error) : `Chat request failed (${res.status})`
+    );
+  }
+  return body;
+}
+function createSupportChatClient(basePath = "/api/chat-svc") {
+  const root = basePath.replace(/\/$/, "");
+  return {
+    basePath: root,
+    async listConversations() {
+      const res = await fetch(`${root}/me/conversations`);
+      const body = await parseJson(res);
+      return body.result ?? [];
+    },
+    async findOrCreateConversation(input) {
+      const res = await fetch(`${root}/conversations`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(input)
+      });
+      const body = await parseJson(res);
+      return body.result;
+    },
+    async listMessages(conversationId) {
+      const res = await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/messages`
+      );
+      const body = await parseJson(res);
+      return body.result ?? [];
+    },
+    async sendMessage(conversationId, text) {
+      const res = await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/messages`,
+        {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ body: text })
+        }
+      );
+      const body = await parseJson(res);
+      return body.result;
+    },
+    async markRead(conversationId) {
+      await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/read`,
+        { method: "POST" }
+      );
+    }
+  };
+}
 
-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, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, usePlaybackStats, useSearchHotkey };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, 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