@sesionario/blocks 1.40.1-rc.1 → 1.41.0-rc.10

package/dist/index.cjs

@@ -311,7 +311,7 @@ function AlertDialogOverlay({
     {
       "data-slot": "alert-dialog-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-black/50 dark:bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       ),
       ...props
@@ -1174,31 +1174,54 @@ function useZoomPanGestures(options = {}) {
     clearSnapBack
   };
 }
+var STATIC_BLUR_FILTER = "blur(20px)";
 function isBrokenImage(img) {
   return img.complete && img.naturalWidth === 0;
 }
+function resolveBlurDataUrl(value) {
+  return typeof value === "string" && value.length > 0 ? value : null;
+}
 function SafeImage({
   src,
   fallback,
   alt = "",
   onError,
+  onLoad,
+  blurDataUrl,
+  style,
   ...imgProps
 }) {
   const [failed, setFailed] = React2.useState(false);
+  const [loaded, setLoaded] = React2.useState(false);
   const imgRef = React2.useRef(null);
   const resolvedSrc = typeof src === "string" && src.length > 0 ? src : null;
+  const resolvedBlur = resolveBlurDataUrl(blurDataUrl);
   React2.useLayoutEffect(() => {
     setFailed(false);
+    setLoaded(false);
   }, [resolvedSrc]);
   React2.useLayoutEffect(() => {
     const img = imgRef.current;
-    if (img && isBrokenImage(img)) {
+    if (!img) return;
+    if (isBrokenImage(img)) {
       setFailed(true);
+      return;
     }
-  }, [resolvedSrc, failed]);
+    if (resolvedBlur && img.complete && img.naturalWidth > 0) {
+      setLoaded(true);
+    }
+  }, [resolvedSrc, failed, resolvedBlur]);
   if (!resolvedSrc || failed) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
   }
+  const paintedStyle = resolvedBlur === null ? style : {
+    ...style,
+    backgroundImage: `url(${JSON.stringify(resolvedBlur)})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    ...loaded || prefersReducedMotion() ? {} : { filter: STATIC_BLUR_FILTER }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
@@ -1206,6 +1229,11 @@ function SafeImage({
       ref: imgRef,
       src: resolvedSrc,
       alt,
+      style: paintedStyle,
+      onLoad: (event) => {
+        if (resolvedBlur) setLoaded(true);
+        onLoad?.(event);
+      },
       onError: (event) => {
         setFailed(true);
         onError?.(event);
@@ -1215,6 +1243,7 @@ function SafeImage({
 }
 function ImageLightbox({
   images,
+  blurDataUrls,
   index,
   onIndexChange,
   onClose,
@@ -1340,6 +1369,7 @@ function ImageLightbox({
                 {
                   src: images[index],
                   alt: "",
+                  blurDataUrl: blurDataUrls?.[index] ?? null,
                   draggable: false,
                   className: "max-h-[calc(100dvh-2rem)] max-w-full select-none rounded-lg object-contain",
                   style: {
@@ -1472,6 +1502,7 @@ function MediaCarousel({
             {
               src: item.src,
               alt: item.alt ?? "",
+              blurDataUrl: item.blurDataUrl,
               draggable: false,
               className: "max-h-full max-w-full select-none object-contain",
               style: {
@@ -1575,7 +1606,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 dark:bg-black/80",
         className
       ),
       ...props
@@ -1707,6 +1738,79 @@ function MediaViewerDialog({
     }
   ) });
 }
+
+// src/components/media/blurDataUrl.ts
+var BLUR_LONG_EDGE_PX = 16;
+var BLUR_DATA_URL_MAX_CHARS = 1024;
+var JPEG_DATA_URL_PREFIX = "data:image/jpeg;base64,";
+var JPEG_QUALITIES = [0.7, 0.5, 0.35, 0.2];
+function longEdgeSteps(start) {
+  const steps = [];
+  let edge = start;
+  while (edge >= 2) {
+    steps.push(edge);
+    edge = Math.floor(edge / 2);
+  }
+  return steps;
+}
+function sizeForLongEdge(width, height, longEdge) {
+  const longest = Math.max(width, height);
+  const scale = longEdge / longest;
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale))
+  };
+}
+function acceptableBlurDataUrl(value) {
+  return value.startsWith(JPEG_DATA_URL_PREFIX) && value.length > JPEG_DATA_URL_PREFIX.length && value.length <= BLUR_DATA_URL_MAX_CHARS;
+}
+async function decodeBlob(blob) {
+  if (typeof createImageBitmap !== "function") {
+    throw new Error("createImageBitmap unavailable");
+  }
+  const bitmap = await createImageBitmap(blob);
+  return {
+    source: bitmap,
+    width: bitmap.width,
+    height: bitmap.height,
+    release() {
+      bitmap.close();
+    }
+  };
+}
+async function blurDataUrlFromBlob(blob) {
+  if (typeof document === "undefined") return null;
+  let decoded;
+  try {
+    decoded = await decodeBlob(blob);
+  } catch {
+    return null;
+  }
+  try {
+    if (Math.min(decoded.width, decoded.height) <= 0) return null;
+    const canvas = document.createElement("canvas");
+    for (const edge of longEdgeSteps(BLUR_LONG_EDGE_PX)) {
+      const size = sizeForLongEdge(decoded.width, decoded.height, edge);
+      canvas.width = size.width;
+      canvas.height = size.height;
+      const context = canvas.getContext("2d");
+      if (!context) return null;
+      context.drawImage(decoded.source, 0, 0, size.width, size.height);
+      for (const quality of JPEG_QUALITIES) {
+        let url;
+        try {
+          url = canvas.toDataURL("image/jpeg", quality);
+        } catch {
+          return null;
+        }
+        if (acceptableBlurDataUrl(url)) return url;
+      }
+    }
+    return null;
+  } finally {
+    decoded.release();
+  }
+}
 var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
 var miniMenuContentDefaults = {
   sideOffset: 8,
@@ -3626,9 +3730,17 @@ function AvatarEditor({
   );
 }
 function Drawer({
+  repositionInputs = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Root,
+    {
+      "data-slot": "drawer",
+      repositionInputs,
+      ...props
+    }
+  );
 }
 function DrawerPortal({
   ...props
@@ -3649,7 +3761,7 @@ function DrawerOverlay({
     {
       "data-slot": "drawer-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 dark:bg-black/80",
         className
       ),
       ...props
@@ -4225,7 +4337,7 @@ function EmojiPicker({
                 onKeyDown: handleSearchKeyDown,
                 placeholder: strings.searchPlaceholder,
                 "aria-label": strings.searchAriaLabel,
-                className: "border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full rounded-md border py-2 pr-3 pl-8 text-sm outline-none focus-visible:ring-[3px]"
+                className: "border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full rounded-md border py-2 pr-3 pl-8 text-base outline-none focus-visible:ring-[3px] md:text-sm"
               }
             )
           ] }),
@@ -4713,6 +4825,41 @@ function useMediaQuery2(query) {
   }, [query]);
   return matches;
 }
+function readMetrics() {
+  if (typeof window === "undefined") {
+    return { height: 0, offsetTop: 0, keyboardInset: 0 };
+  }
+  const vv = window.visualViewport;
+  if (!vv) {
+    return {
+      height: window.innerHeight,
+      offsetTop: 0,
+      keyboardInset: 0
+    };
+  }
+  return {
+    height: vv.height,
+    offsetTop: vv.offsetTop,
+    keyboardInset: Math.max(0, window.innerHeight - vv.height - vv.offsetTop)
+  };
+}
+function useVisualViewportMetrics() {
+  const [metrics, setMetrics] = React2.useState(readMetrics);
+  React2.useEffect(() => {
+    const vv = window.visualViewport;
+    const update = () => setMetrics(readMetrics());
+    update();
+    vv?.addEventListener("resize", update);
+    vv?.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+      vv?.removeEventListener("resize", update);
+      vv?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+  return metrics;
+}
 function useSearchHotkey(options = {}) {
   const { defaultOpen = false, disabled = false } = options;
   const [open, setOpen] = React2.useState(defaultOpen);
@@ -5204,6 +5351,24 @@ function Command({
     }
   );
 }
+function useCommandDialogScrollLock(open) {
+  React2__namespace.useEffect(() => {
+    if (!open) return;
+    const onTouchMove = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        event.preventDefault();
+        return;
+      }
+      if (target.closest('[data-slot="command-list"]')) return;
+      event.preventDefault();
+    };
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", onTouchMove);
+    };
+  }, [open]);
+}
 function CommandDialog({
   title = "Command Palette",
   description = "Search for a command to run...",
@@ -5213,6 +5378,9 @@ function CommandDialog({
   commandProps,
   ...props
 }) {
+  const { height: viewportHeight } = useVisualViewportMetrics();
+  useCommandDialogScrollLock(props.open);
+  const mobileMaxHeight = viewportHeight > 0 ? Math.max(280, viewportHeight - 16) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "sr-only", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
@@ -5221,12 +5389,22 @@ function CommandDialog({
     /* @__PURE__ */ jsxRuntime.jsx(
       DialogContent,
       {
-        className: cn("overflow-hidden p-0", className),
+        className: cn(
+          "flex flex-col gap-0 overflow-hidden p-0",
+          // iOS: top-pin in the visual viewport, near full-bleed width,
+          // fill available height so the list (not the page) scrolls.
+          "max-sm:top-[max(0.5rem,env(safe-area-inset-top))] max-sm:right-2 max-sm:left-2 max-sm:w-auto max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0",
+          "max-sm:h-[var(--command-dialog-max-height,calc(100dvh-1rem))] max-sm:max-h-[var(--command-dialog-max-height,calc(100dvh-1rem))]",
+          className
+        ),
+        style: mobileMaxHeight ? {
+          ["--command-dialog-max-height"]: `${mobileMaxHeight}px`
+        } : void 0,
         showCloseButton,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Command,
           {
-            className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+            className: "flex h-full min-h-0 flex-col **:data-[slot=command-input-wrapper]:h-12 **:data-[slot=command-list]:max-sm:max-h-none **:data-[slot=command-list]:max-sm:min-h-0 **:data-[slot=command-list]:max-sm:flex-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
             ...commandProps,
             children
           }
@@ -5243,7 +5421,7 @@ function CommandInput({
     "div",
     {
       "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b px-3",
+      className: "flex h-9 shrink-0 items-center gap-2 border-b px-3",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5251,7 +5429,8 @@ function CommandInput({
           {
             "data-slot": "command-input",
             className: cn(
-              "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              // text-base (≥16px) on mobile prevents iOS Safari focus zoom
+              "flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
               className
             ),
             ...props
@@ -5270,7 +5449,7 @@ function CommandList({
     {
       "data-slot": "command-list",
       className: cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        "max-h-[min(300px,calc(100dvh-12rem))] scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain touch-pan-y",
         className
       ),
       ...props
@@ -5543,6 +5722,7 @@ function matchesQuery(entry, query, getOptionKeywords) {
 function SearchablePicker(props) {
   const {
     options,
+    selectedItems: selectedItemsProp,
     fetchOptions,
     getOptionValue,
     getOptionLabel,
@@ -5601,11 +5781,16 @@ function SearchablePicker(props) {
     },
     [getOptionValue]
   );
+  if (options?.length) rememberItems(options);
+  if (selectedItemsProp?.length) rememberItems(selectedItemsProp);
+  if (pinned?.recommended?.length) rememberItems(pinned.recommended);
+  if (pinned?.recent?.length) rememberItems(pinned.recent);
   React2.useEffect(() => {
     if (options) rememberItems(options);
+    if (selectedItemsProp) rememberItems(selectedItemsProp);
     if (pinned?.recommended) rememberItems(pinned.recommended);
     if (pinned?.recent) rememberItems(pinned.recent);
-  }, [options, pinned, rememberItems]);
+  }, [options, selectedItemsProp, pinned, rememberItems]);
   React2.useEffect(() => {
     if (!open) {
       setQuery("");
@@ -5653,7 +5838,7 @@ function SearchablePicker(props) {
   const selectedItems = React2.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]);
+  }, [mode, selectedValueKey, options, selectedItemsProp, pinned, remoteItems]);
   const queryForFilter = query.trim();
   const recommended = React2.useMemo(() => {
     if (queryForFilter) return [];
@@ -5757,13 +5942,27 @@ function SearchablePicker(props) {
   );
   const handleLoadMore = React2.useCallback(async () => {
     if (!onLoadMore || isLoadingMore) return;
+    const requestId = requestIdRef.current;
     setIsLoadingMore(true);
     try {
-      await onLoadMore();
+      const more = await onLoadMore();
+      if (requestIdRef.current !== requestId || !Array.isArray(more)) return;
+      setRemoteItems((prev) => {
+        const seen = new Set(prev.map((item) => getOptionValue(item)));
+        const next = [...prev];
+        for (const item of more) {
+          const value = getOptionValue(item);
+          if (seen.has(value)) continue;
+          seen.add(value);
+          next.push(item);
+        }
+        return next;
+      });
+      rememberItems(more);
     } finally {
-      setIsLoadingMore(false);
+      if (requestIdRef.current === requestId) setIsLoadingMore(false);
     }
-  }, [onLoadMore, isLoadingMore]);
+  }, [onLoadMore, isLoadingMore, getOptionValue, rememberItems]);
   const triggerLabel = React2.useMemo(() => {
     if (renderValue) {
       if (mode === "multiple") {
@@ -5897,7 +6096,7 @@ function SearchablePicker(props) {
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full items-center gap-1", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: triggerButton }),
       /* @__PURE__ */ jsxRuntime.jsx(
         PopoverContent,
@@ -7228,14 +7427,26 @@ function ChatMessageList({
   messages,
   currentUserId,
   emptyTitle = "Sin mensajes",
-  emptyDescription = "Escribe para iniciar la conversaci\xF3n."
+  emptyDescription = "Escribe para iniciar la conversaci\xF3n.",
+  compactEmpty = false
 }) {
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-6 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleDashedIcon, { className: "size-8 text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: emptyTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: emptyDescription })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: compactEmpty ? "flex h-full flex-col items-center justify-center gap-1 px-4 py-3 text-center" : "flex h-full flex-col items-center justify-center gap-2 p-6 text-center",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.MessageCircleDashedIcon,
+            {
+              className: compactEmpty ? "size-5 text-muted-foreground" : "size-8 text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: emptyTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: emptyDescription })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ jsxRuntime.jsxs(MessageScroller, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerContent, { className: "gap-4 p-4", children: messages.map((m) => {
@@ -7311,6 +7522,9 @@ var MessageComposer = React2__namespace.forwardRef(function MessageComposer2({
       event.preventDefault();
       if (!canSubmit) return;
       onSubmit(event);
+      requestAnimationFrame(() => {
+        fieldRef.current?.focus({ preventScroll: true });
+      });
     },
     [canSubmit, onSubmit]
   );
@@ -7385,6 +7599,10 @@ var MessageComposer = React2__namespace.forwardRef(function MessageComposer2({
               size: sendButtonSize,
               disabled: !canSubmit,
               className: sendButtonClassName,
+              onPointerDown: (event) => {
+                if (event.button !== 0) return;
+                event.preventDefault();
+              },
               children: sendLabel
             }
           )
@@ -7578,7 +7796,7 @@ function ThreadPanel({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 border-b px-2 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b bg-primary/10 px-2 py-2", children: [
           showBack && onBack ? /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
@@ -7590,7 +7808,24 @@ function ThreadPanel({
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
             }
           ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary text-[11px] font-semibold text-primary-foreground",
+              style: thread.avatarUrl ? void 0 : avatarFallbackStyle(thread.title),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SafeImage,
+                {
+                  src: thread.avatarUrl,
+                  alt: "",
+                  className: "size-full object-cover",
+                  fallback: getInitials(thread.eyebrow ?? thread.title)
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 px-1", children: [
+            thread.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] font-semibold tracking-wide text-primary", children: thread.eyebrow }) : null,
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold", children: thread.title }),
             thread.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: thread.subtitle }) : null
           ] }),
@@ -7611,7 +7846,8 @@ function ThreadPanel({
           {
             messages,
             currentUserId,
-            emptyDescription: labels.emptyThread
+            emptyDescription: labels.emptyThread,
+            compactEmpty: true
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7624,7 +7860,7 @@ function ThreadPanel({
             sendLabel: labels.send,
             placeholder: labels.placeholder,
             "aria-label": labels.placeholder,
-            disabled: loading || sending,
+            disabled: loading,
             sendDisabled: loading || sending,
             maxLength: 2e3,
             rows: 2
@@ -7662,7 +7898,7 @@ function ListPanel({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b bg-primary/10 px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: labels.listTitle }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -7695,11 +7931,11 @@ function ListPanel({
               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"
+              className: "h-9 w-full rounded-md border bg-transparent pr-2 pl-8 text-base outline-none focus-visible:ring-2 focus-visible:ring-ring md:h-8 md:text-sm"
             }
           )
         ] }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: labels.emptyList }) : filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: labels.emptyList }) : filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -7723,6 +7959,7 @@ function ListPanel({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                item.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[11px] font-semibold tracking-wide text-primary", children: item.eyebrow }) : null,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm font-medium", children: item.title }),
                 item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.subtitle }) : null
               ] }),
@@ -7752,10 +7989,13 @@ function SupportMessengerProvider({
   className
 }) {
   const isMobile = useMediaQuery2("(max-width: 767px)");
+  const { height: viewportHeight, keyboardInset } = useVisualViewportMetrics();
   const dockRef = React2.useRef(null);
   const [listOpen, setListOpen] = React2.useState(false);
   const [threads, setThreads] = React2.useState([]);
   const [mobileThreadKey, setMobileThreadKey] = React2.useState(null);
+  const mobileSheetOpen = listOpen || Boolean(mobileThreadKey);
+  const mobileSheetHeight = viewportHeight > 0 ? Math.max(240, Math.min(viewportHeight * 0.85, viewportHeight)) : void 0;
   const totalUnread = React2.useMemo(
     () => items.reduce((sum, item) => sum + (item.unreadCount ?? 0), 0),
     [items]
@@ -7848,6 +8088,8 @@ function SupportMessengerProvider({
         key: item.key,
         title: item.title,
         subtitle: item.subtitle,
+        eyebrow: item.eyebrow,
+        avatarUrl: item.avatarUrl,
         conversationId: item.conversationId,
         open: item.open
       });
@@ -7897,48 +8139,61 @@ function SupportMessengerProvider({
           isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
             Drawer,
             {
-              open: listOpen || Boolean(activeMobileThread),
+              open: mobileSheetOpen,
               onOpenChange: (open) => {
                 if (!open) closeAll();
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContent, { className: "pointer-events-auto mx-auto flex h-[85vh] max-w-lg flex-col", children: activeMobileThread ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: activeMobileThread.title }) }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: labels.listTitle }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ListPanel,
-                  {
-                    items,
-                    labels,
-                    tabs,
-                    activeTab,
-                    onTabChange,
-                    onSelect: handleSelectItem,
-                    onClose: closeAll,
-                    searchThreshold,
-                    className: "h-full rounded-none border-0 shadow-none"
-                  }
-                )
-              ] }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DrawerContent,
+                {
+                  className: "pointer-events-auto mx-auto flex max-h-[85dvh] max-w-lg flex-col",
+                  style: {
+                    // Lift above the software keyboard without Vaul's
+                    // repositionInputs focus hack (see drawer.tsx).
+                    bottom: keyboardInset,
+                    height: mobileSheetHeight ?? "85dvh",
+                    maxHeight: viewportHeight > 0 ? viewportHeight : "85dvh"
+                  },
+                  children: activeMobileThread ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: activeMobileThread.title }) }),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: labels.listTitle }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ListPanel,
+                      {
+                        items,
+                        labels,
+                        tabs,
+                        activeTab,
+                        onTabChange,
+                        onSelect: handleSelectItem,
+                        onClose: closeAll,
+                        searchThreshold,
+                        className: "h-full rounded-none border-0 shadow-none"
+                      }
+                    )
+                  ] })
+                }
+              )
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8953,6 +9208,7 @@ exports.ZOOM_PAN_MIN_SCALE = ZOOM_PAN_MIN_SCALE;
 exports.ZOOM_PAN_SWIPE_COMMIT_PX = ZOOM_PAN_SWIPE_COMMIT_PX;
 exports.ZOOM_PAN_SWIPE_SNAP_MS = ZOOM_PAN_SWIPE_SNAP_MS;
 exports.avatarFallbackStyle = avatarFallbackStyle;
+exports.blurDataUrlFromBlob = blurDataUrlFromBlob;
 exports.bubbleVariants = bubbleVariants;
 exports.cn = cn;
 exports.createSupportChatClient = createSupportChatClient;
@@ -8983,6 +9239,7 @@ exports.useSearchHotkey = useSearchHotkey;
 exports.useSupportConversation = useSupportConversation;
 exports.useSupportMessenger = useSupportMessenger;
 exports.useSupportMessengerOptional = useSupportMessengerOptional;
+exports.useVisualViewportMetrics = useVisualViewportMetrics;
 exports.useZoomPanGestures = useZoomPanGestures;
 exports.zoomToward = zoomToward;
 //# sourceMappingURL=index.cjs.map