@mlw-packages/react-components 1.10.19 → 1.10.20

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import './index.css';
 import * as React32 from 'react';
-import React32__default, { forwardRef, useState, useEffect, createContext, useRef, useCallback, memo, useMemo, useId, useContext, useLayoutEffect } from 'react';
+import React32__default, { forwardRef, useState, useEffect, createContext, memo, useMemo, useRef, useCallback, useId, useContext, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -3816,7 +3816,7 @@ var FileUploader = React32.forwardRef(
     showPreview = true,
     dropzoneText = "Arraste arquivos aqui ou clique para selecionar",
     dropzoneSubtext,
-    animate: animate2 = true,
+    animate: animate3 = true,
     ...props
   }, ref) => {
     const [isDragging, setIsDragging] = React32.useState(false);
@@ -3969,7 +3969,7 @@ var FileUploader = React32.forwardRef(
             motion.p,
             {
               className: "mb-2 text-xs font-semibold text-foreground",
-              initial: animate2 ? { opacity: 0, y: -10 } : false,
+              initial: animate3 ? { opacity: 0, y: -10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.1 },
               children: dropzoneText
@@ -3979,7 +3979,7 @@ var FileUploader = React32.forwardRef(
             motion.p,
             {
               className: "text-xs text-muted-foreground",
-              initial: animate2 ? { opacity: 0, y: -10 } : false,
+              initial: animate3 ? { opacity: 0, y: -10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.2 },
               children: defaultSubtext
@@ -3989,7 +3989,7 @@ var FileUploader = React32.forwardRef(
             motion.div,
             {
               className: "py-2 w-full",
-              initial: animate2 ? { opacity: 0, y: 10 } : false,
+              initial: animate3 ? { opacity: 0, y: 10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.3 },
               children: [
@@ -4004,7 +4004,7 @@ var FileUploader = React32.forwardRef(
                   motion.div,
                   {
                     layout: true,
-                    initial: animate2 ? { opacity: 0, x: -20 } : false,
+                    initial: animate3 ? { opacity: 0, x: -20 } : false,
                     animate: { opacity: 1, x: 0 },
                     exit: {
                       opacity: 0,
@@ -4012,7 +4012,7 @@ var FileUploader = React32.forwardRef(
                       transition: { duration: 0.2 }
                     },
                     transition: {
-                      delay: animate2 ? index * 0.05 : 0,
+                      delay: animate3 ? index * 0.05 : 0,
                       layout: { duration: 0.2 }
                     },
                     className: cn(
@@ -16583,6 +16583,13 @@ var useIsTruncated = (ref) => {
   }, [ref]);
   return truncated;
 };
+var SNAP_HEIGHTS = {
+  collapsed: "80px",
+  peek: "42dvh",
+  full: "85dvh"
+};
+var VELOCITY_THRESHOLD = 500;
+var CLOSE_THRESHOLD = 50;
 var CopyData = ({ value }) => {
   const [copied, setCopied] = useState(false);
   const handleCopy = useCallback(() => {
@@ -16616,26 +16623,56 @@ var propertyLabels = {
   Destino: "Destino",
   Origem: "Origem"
 };
-var IntegrationCard = ({ title, details }) => {
+var LongPressTooltip = ({ content, isMobile, children }) => {
+  const [open, setOpen] = useState(false);
+  const timerRef = useRef(null);
+  const handleTouchStart = useCallback(() => {
+    timerRef.current = setTimeout(() => setOpen(true), 1e3);
+  }, []);
+  const handleTouchEnd = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setTimeout(() => setOpen(false), 1500);
+  }, []);
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(
+    TooltipBase,
+    {
+      open: isMobile ? open : void 0,
+      onOpenChange: isMobile ? setOpen : void 0,
+      children: [
+        /* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: isMobile ? React32__default.cloneElement(children, {
+          onTouchStart: handleTouchStart,
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd
+        }) : children }),
+        /* @__PURE__ */ jsx(TooltipContentBase, { sideOffset: 6, className: "z-[10001]", children: content })
+      ]
+    }
+  ) });
+};
+var IntegrationCard = ({ title, details, isMobile }) => {
   const titleRef = useRef(null);
   const isTitleTruncated = useIsTruncated(titleRef);
   const blackList = ["id", "elementId", "identity"];
   const entries = details ? Object.entries(details).filter(
     ([key, value]) => value !== void 0 && value !== null && value !== "" && !blackList.includes(key)
   ) : [];
+  const titleSpan = /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: titleRef,
+      className: "text-sm font-bold text-foreground truncate flex-1 min-w-0 cursor-default",
+      children: title
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/40 bg-muted/20 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border/30", children: [
-      /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
-        /* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            ref: titleRef,
-            className: "text-sm font-bold text-foreground truncate flex-1 min-w-0 cursor-default",
-            children: title
-          }
-        ) }),
-        isTitleTruncated && /* @__PURE__ */ jsx(TooltipContentBase, { sideOffset: 6, className: "z-[10001]", children: title })
-      ] }) }),
+      isTitleTruncated ? /* @__PURE__ */ jsx(LongPressTooltip, { content: title, isMobile, children: titleSpan }) : titleSpan,
       entries.length > 0 && /* @__PURE__ */ jsx(
         CopyData,
         {
@@ -16655,69 +16692,59 @@ var IntegrationCard = ({ title, details }) => {
     }) })
   ] });
 };
-var Name = ({
-  name,
-  description
-}) => {
+var Name = ({ name, description, isMobile }) => {
   const nameRef = useRef(null);
   const descRef = useRef(null);
   const isNameTruncated = useIsTruncated(nameRef);
   const isDescTruncated = useIsTruncated(descRef);
   const showTooltip = isNameTruncated || isDescTruncated;
-  return /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
-    /* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "cursor-default min-w-0", children: [
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          ref: nameRef,
-          className: "text-xl font-bold text-foreground tracking-tight truncate",
-          children: name
-        }
-      ),
-      description && /* @__PURE__ */ jsx(
-        "p",
-        {
-          ref: descRef,
-          className: "text-xs text-foreground/70 truncate mt-0.5",
-          children: description
-        }
-      )
-    ] }) }),
-    showTooltip && /* @__PURE__ */ jsxs(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: [
-      /* @__PURE__ */ jsx("p", { className: "font-semibold", children: name }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground/70 mt-0.5", children: description })
-    ] })
-  ] }) });
+  const content = /* @__PURE__ */ jsxs("div", { className: "cursor-default min-w-0", children: [
+    /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ref: nameRef,
+        className: "text-xl font-bold text-foreground tracking-tight truncate",
+        children: name
+      }
+    ),
+    description && /* @__PURE__ */ jsx("p", { ref: descRef, className: "text-xs text-foreground/70 truncate mt-0.5", children: description })
+  ] });
+  if (!showTooltip) return content;
+  return /* @__PURE__ */ jsx(
+    LongPressTooltip,
+    {
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold", children: name }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground/70 mt-0.5", children: description })
+      ] }),
+      isMobile,
+      children: content
+    }
+  );
 };
-var SystemNode = React32__default.forwardRef(
-  ({ label }, ref) => {
-    const innerRef = useRef(null);
-    const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
-    const needsTooltip = label.length > 9;
-    const setRefs = useCallback(
-      (node) => {
-        innerRef.current = node;
-        if (typeof ref === "function") ref(node);
-        else if (ref)
-          ref.current = node;
-      },
-      [ref]
-    );
-    const circle = /* @__PURE__ */ jsx(
+function SystemNodeInner({ label, isMobile }, ref) {
+  const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
+  const needsTooltip = label.length > 9;
+  if (!needsTooltip) {
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        ref: setRefs,
+        ref,
         className: "w-[76px] h-[76px] rounded-full bg-primary flex items-center justify-center shrink-0 z-10 cursor-default",
         children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated })
       }
     );
-    if (!needsTooltip) return circle;
-    return /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
-      /* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: circle }),
-      /* @__PURE__ */ jsx(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: label })
-    ] }) });
   }
-);
+  return /* @__PURE__ */ jsx(LongPressTooltip, { content: label, isMobile, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "w-[76px] h-[76px] rounded-full bg-primary flex items-center justify-center shrink-0 z-10 cursor-default",
+      children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated })
+    }
+  ) });
+}
+var SystemNode = React32__default.forwardRef(SystemNodeInner);
 SystemNode.displayName = "SystemNode";
 var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   const gradientId = useId();
@@ -16725,6 +16752,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   const [svgSize, setSvgSize] = useState({ w: 0, h: 0 });
   useEffect(() => {
     let rafId;
+    let running = true;
     const update = () => {
       const container = containerRef.current;
       const left = leftRef.current;
@@ -16737,39 +16765,31 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
       const cy1 = lr.top - cr.top + lr.height / 2;
       const cx2 = rr.left - cr.left + rr.width / 2;
       const cy2 = rr.top - cr.top + rr.height / 2;
-      const dx = cx2 - cx1, dy = cy2 - cy1;
+      const dx = cx2 - cx1;
+      const dy = cy2 - cy1;
       const dist = Math.sqrt(dx * dx + dy * dy);
       if (dist === 0) return;
-      const ux = dx / dist, uy = dy / dist;
+      const ux = dx / dist;
+      const uy = dy / dist;
       const r1 = lr.width / 2;
       const r2 = rr.width / 2;
-      setSvgSize({ w: cr.width, h: cr.height });
-      setPathD(
-        `M ${cx1 + ux * r1},${cy1 + uy * r1} L ${cx2 - ux * r2},${cy2 - uy * r2}`
+      const newW = cr.width;
+      const newH = cr.height;
+      const newPath = `M ${cx1 + ux * r1},${cy1 + uy * r1} L ${cx2 - ux * r2},${cy2 - uy * r2}`;
+      setSvgSize(
+        (prev) => prev.w !== newW || prev.h !== newH ? { w: newW, h: newH } : prev
       );
+      setPathD((prev) => prev !== newPath ? newPath : prev);
     };
-    const schedule = () => {
-      cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(update);
+    const loop = () => {
+      if (!running) return;
+      update();
+      rafId = requestAnimationFrame(loop);
     };
-    requestAnimationFrame(() => requestAnimationFrame(update));
-    schedule();
-    const ro = new ResizeObserver(schedule);
-    if (containerRef.current) ro.observe(containerRef.current);
-    if (leftRef.current) ro.observe(leftRef.current);
-    if (rightRef.current) ro.observe(rightRef.current);
-    const mo = new MutationObserver(schedule);
-    if (containerRef.current) {
-      mo.observe(containerRef.current, {
-        attributes: true,
-        attributeFilter: ["class", "style"],
-        subtree: true
-      });
-    }
+    rafId = requestAnimationFrame(loop);
     return () => {
+      running = false;
       cancelAnimationFrame(rafId);
-      ro.disconnect();
-      mo.disconnect();
     };
   }, [containerRef, leftRef, rightRef]);
   const animX1 = isInput ? ["90%", "-10%"] : ["10%", "110%"];
@@ -16835,7 +16855,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
     }
   );
 };
-var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
+var SystemsDiagram = ({ isInput, currentSystem, externalSystem, isMobile }) => {
   const containerRef = useRef(null);
   const leftRef = useRef(null);
   const rightRef = useRef(null);
@@ -16849,14 +16869,16 @@ var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
           SystemNode,
           {
             ref: leftRef,
-            label: isInput ? externalSystem : currentSystem
+            label: isInput ? externalSystem : currentSystem,
+            isMobile
           }
         ),
         /* @__PURE__ */ jsx(
           SystemNode,
           {
             ref: rightRef,
-            label: isInput ? currentSystem : externalSystem
+            label: isInput ? currentSystem : externalSystem,
+            isMobile
           }
         ),
         /* @__PURE__ */ jsx(
@@ -16872,47 +16894,84 @@ var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
     }
   );
 };
-var BodyComponent = ({ data, isLoading, connections, isInput, externalSystem }) => /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 space-y-3 max-h-[460px] overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: [
-  isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsx(SkeletonBase, { className: "h-6 w-3/4" }),
-    /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3.5 w-1/2" })
-  ] }) : /* @__PURE__ */ jsx(Name, { name: data.name, description: data.description }),
-  isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
-      /* @__PURE__ */ jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" }),
-      /* @__PURE__ */ jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "border-t border-border/20" }),
-    [1, 2].map((i) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "rounded-lg border border-border/20 overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsx(SkeletonBase, { className: "h-8 w-full" }),
-          [1, 2, 3].map((j) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-7 w-full mt-px" }, j))
-        ]
+var BodyComponent = ({
+  data,
+  isLoading,
+  connections,
+  isInput,
+  externalSystem,
+  isMobile,
+  scrollable
+}) => /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [
+  /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-5 bg-gradient-to-b from-card to-transparent z-10 pointer-events-none" }),
+  /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "px-3 py-3 space-y-3",
+        scrollable ? "overflow-y-auto overscroll-contain [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-primary/20 [&::-webkit-scrollbar-thumb]:rounded-full" : "overflow-hidden",
+        isMobile ? "max-h-[calc(85dvh-80px)]" : "max-h [&::-webkit-scrollbar]:hidden"
+      ].join(" "),
+      onPointerDownCapture: (e) => {
+        if (scrollable) e.stopPropagation();
       },
-      i
-    ))
-  ] }) : connections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Nenhuma conex\xE3o encontrada" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      SystemsDiagram,
-      {
-        isInput,
-        currentSystem: data.name,
-        externalSystem
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase -mb-2", children: isInput ? "Informa\xE7\xF5es de Entrada" : "Informa\xE7\xF5es de Sa\xEDda" }) }),
-    /* @__PURE__ */ jsx("div", { children: connections.map((conn) => /* @__PURE__ */ jsx(
-      IntegrationCard,
-      {
-        title: conn.name,
-        details: conn.integration
+      onTouchStartCapture: (e) => {
+        if (scrollable) e.stopPropagation();
       },
-      conn.id
-    )) })
-  ] })
+      children: [
+        isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(SkeletonBase, { className: "h-6 w-3/4" }),
+          /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3.5 w-1/2" })
+        ] }) : /* @__PURE__ */ jsx(
+          Name,
+          {
+            name: data.name,
+            description: data.description,
+            isMobile
+          }
+        ),
+        isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
+            /* @__PURE__ */ jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" }),
+            /* @__PURE__ */ jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border/20" }),
+          [1, 2].map((i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "rounded-lg border border-border/20 overflow-hidden",
+              children: [
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "h-8 w-full" }),
+                [1, 2, 3].map((j) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-7 w-full mt-px" }, j))
+              ]
+            },
+            i
+          ))
+        ] }) : connections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Nenhuma conex\xE3o encontrada" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SystemsDiagram,
+            {
+              isInput,
+              currentSystem: data.name,
+              externalSystem,
+              isMobile
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase -mb-2", children: isInput ? "Informa\xE7\xF5es de Entrada" : "Informa\xE7\xF5es de Sa\xEDda" }) }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: connections.map((conn) => /* @__PURE__ */ jsx(
+            IntegrationCard,
+            {
+              title: conn.name,
+              details: conn.integration,
+              isMobile
+            },
+            conn.id
+          )) })
+        ] })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-5 bg-gradient-to-t from-card to-transparent z-10 pointer-events-none" })
 ] });
 var Body = React32__default.memo(BodyComponent);
 var modalVariants = {
@@ -16932,6 +16991,25 @@ var modalVariants = {
     transition: { type: "spring", stiffness: 400, damping: 28 }
   }
 };
+function resolveSnapPx(snap) {
+  const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+  if (snap === "collapsed") return 80;
+  if (snap === "peek") return vh * 0.42;
+  return vh * 0.85;
+}
+function nearestSnap(heightPx) {
+  const snaps = ["collapsed", "peek", "full"];
+  let best = "peek";
+  let bestDist = Infinity;
+  for (const s of snaps) {
+    const dist = Math.abs(resolveSnapPx(s) - heightPx);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = s;
+    }
+  }
+  return best;
+}
 var IntegrationModal = ({
   id,
   data,
@@ -17026,6 +17104,66 @@ var IntegrationModal = ({
     },
     [id, onMouseDown]
   );
+  const [snap, setSnap] = useState("peek");
+  const sheetHeight = useMotionValue(SNAP_HEIGHTS.peek);
+  const snapTo = useCallback(
+    (target) => {
+      setSnap(target);
+      animate(sheetHeight, SNAP_HEIGHTS[target], {
+        type: "spring",
+        stiffness: 320,
+        damping: 36
+      });
+    },
+    [sheetHeight]
+  );
+  useEffect(() => {
+    if (isMobile) {
+      sheetHeight.set("0px");
+      animate(sheetHeight, SNAP_HEIGHTS.peek, {
+        type: "spring",
+        stiffness: 320,
+        damping: 36
+      });
+    }
+  }, [isMobile, sheetHeight]);
+  const handleDragEnd = useCallback(
+    (_, info) => {
+      const vy = info.velocity.y;
+      const dy = info.offset.y;
+      const currentHeightStr = sheetHeight.get();
+      const currentHeightPx = typeof currentHeightStr === "string" && currentHeightStr.endsWith("dvh") ? parseFloat(currentHeightStr) / 100 * window.innerHeight : parseFloat(currentHeightStr);
+      const draggedHeightPx = currentHeightPx - dy;
+      const collapsedPx = resolveSnapPx("collapsed");
+      if (draggedHeightPx < collapsedPx - CLOSE_THRESHOLD || snap === "collapsed" && vy > VELOCITY_THRESHOLD) {
+        onClose(id);
+        return;
+      }
+      if (vy < -VELOCITY_THRESHOLD) {
+        if (snap === "collapsed") {
+          snapTo("peek");
+          return;
+        }
+        if (snap === "peek") {
+          snapTo("full");
+          return;
+        }
+      }
+      if (vy > VELOCITY_THRESHOLD) {
+        if (snap === "full") {
+          snapTo("peek");
+          return;
+        }
+        if (snap === "peek") {
+          snapTo("collapsed");
+          return;
+        }
+      }
+      const nearest = nearestSnap(draggedHeightPx);
+      snapTo(nearest);
+    },
+    [id, onClose, snap, snapTo, sheetHeight]
+  );
   const inputConnections = useMemo(
     () => data.connections.filter((c) => c.type === "entrada"),
     [data.connections]
@@ -17040,19 +17178,19 @@ var IntegrationModal = ({
   const header = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex items-center justify-between py-1 border-b border-border shrink-0 max-w-lg",
-      onMouseDown: handleMouseDownLocal,
-      onTouchStart: handleTouchStartLocal,
+      className: "flex items-center justify-between py-1 border-b border-border shrink-0",
+      onMouseDown: !isMobile ? handleMouseDownLocal : void 0,
+      onTouchStart: !isMobile ? handleTouchStartLocal : void 0,
       style: {
-        touchAction: "none",
-        cursor: dragging ? "grabbing" : "grab"
+        touchAction: isMobile ? "auto" : "none",
+        cursor: isMobile ? "default" : dragging ? "grabbing" : "grab"
       },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3", children: [
-          /* @__PURE__ */ jsx(DotsSixVerticalIcon, { size: 16, className: "text-primary" }),
+          !isMobile && /* @__PURE__ */ jsx(DotsSixVerticalIcon, { size: 16, className: "text-primary" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: title })
         ] }),
-        /* @__PURE__ */ jsx(
+        !isMobile && /* @__PURE__ */ jsx(
           ButtonBase,
           {
             variant: "ghost",
@@ -17066,7 +17204,15 @@ var IntegrationModal = ({
       ]
     }
   );
-  const bodyProps = { data, isLoading, connections, isInput, externalSystem };
+  const bodyProps = {
+    data,
+    isLoading,
+    connections,
+    isInput,
+    externalSystem,
+    isMobile,
+    scrollable: isMobile ? snap === "full" : true
+  };
   if (isMobile) {
     return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -17083,17 +17229,42 @@ var IntegrationModal = ({
       /* @__PURE__ */ jsxs(
         motion.div,
         {
-          className: "fixed bottom-0 left-0 right-0 z-[10000] bg-card border-t border-border/50 rounded-t-2xl shadow-2xl flex flex-col min-h-0",
-          style: { maxHeight: "85dvh" },
-          initial: { y: "100%" },
-          animate: { y: 0 },
-          exit: { y: "100%" },
-          transition: { type: "spring", stiffness: 320, damping: 36 },
+          className: [
+            "fixed bottom-0 left-0 right-0 z-[10000] bg-card border-t border-border/50 shadow-2xl flex flex-col",
+            snap === "full" ? "rounded-t-[10px]" : "rounded-t-2xl"
+          ].join(" "),
+          style: {
+            height: sheetHeight,
+            touchAction: "none",
+            overscrollBehavior: "none",
+            boxShadow: snap === "full" ? "0 -8px 40px 0 rgba(0,0,0,0.32), 0 -1px 0 0 hsl(var(--border))" : void 0
+          },
+          drag: "y",
+          dragConstraints: { top: 0, bottom: 0 },
+          dragElastic: { top: 0.05, bottom: 0.25 },
+          dragMomentum: false,
+          onDragEnd: handleDragEnd,
+          exit: { height: 0, opacity: 0, transition: { duration: 0.25 } },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2.5 pb-1 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-full bg-border" }) }),
+            snap !== "full" && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex justify-center pt-3 pb-1 shrink-0 touch-none",
+                style: { touchAction: "none" },
+                children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-full bg-muted-foreground/30" })
+              }
+            ),
+            snap === "full" && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex items-center justify-between px-4 pt-3 pb-2 shrink-0 touch-none",
+                style: { touchAction: "none" },
+                children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-full bg-muted-foreground/30 mx-auto" })
+              }
+            ),
             header,
-            /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: /* @__PURE__ */ jsx(Body, { ...bodyProps }) })
+            /* @__PURE__ */ jsx(Body, { ...bodyProps })
           ]
         },
         `sheet-${id}`

package/package.json

@@ -5,7 +5,7 @@
     "access": "public",
     "type": "module"
   },
-  "version": "1.10.19",
+  "version": "1.10.20",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",