@sesionario/blocks 1.41.0-rc.3 → 1.41.0-rc.5

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
@@ -1575,7 +1575,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
@@ -3626,9 +3626,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 +3657,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 +4233,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 +4721,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 +5247,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 +5274,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 +5285,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 +5317,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 +5325,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 +5345,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
@@ -7725,7 +7800,7 @@ 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,
@@ -7783,10 +7858,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]
@@ -7930,48 +8008,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(
@@ -9016,6 +9107,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