@mlw-packages/react-components 1.10.19 → 1.10.21

package/dist/index.js

@@ -3485,58 +3485,100 @@ var ThemeIcon = ({ theme }) => {
     }
   ) });
 };
+function resolveOrigin(origin, buttonRef, cursorPos) {
+  if (origin === "cursor" && cursorPos) {
+    return cursorPos;
+  }
+  if (!buttonRef.current) {
+    return { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+  }
+  const rect = buttonRef.current.getBoundingClientRect();
+  switch (origin) {
+    case "top-left":
+      return { x: rect.left, y: rect.top };
+    case "top-right":
+      return { x: rect.right, y: rect.top };
+    case "center":
+    default:
+      return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  }
+}
 function ModeToggleBase({
   themes = ["light", "dark", "system"],
   className,
   directToggle = false,
-  variant = "ghost"
+  variant = "ghost",
+  showLabel = false,
+  tooltip = false,
+  animationOrigin = "center",
+  transitionDuration = 400,
+  storageKey,
+  defaultTheme,
+  onThemeChange
 }) {
   const [mounted, setMounted] = React32.useState(false);
+  const [isTransitioning, setIsTransitioning] = React32.useState(false);
+  const cursorPos = React32.useRef(null);
   const { setTheme, theme: currentTheme } = useTheme();
   const buttonRef = React32.useRef(null);
   React32.useEffect(() => {
+    if (storageKey && defaultTheme) {
+      const stored = localStorage.getItem(storageKey);
+      if (!stored) setTheme(defaultTheme);
+    } else if (defaultTheme && !localStorage.getItem("theme")) {
+      setTheme(defaultTheme);
+    }
     setMounted(true);
-  }, []);
+  }, [defaultTheme, setTheme, storageKey]);
   const isDark = mounted && (currentTheme?.includes("dark") || currentTheme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  const activeTheme = mounted ? currentTheme : defaultTheme;
+  const tooltipText = tooltip === true ? themeLabels[activeTheme] ?? "Toggle theme" : typeof tooltip === "string" ? tooltip : null;
   const toggleTheme = async (newTheme) => {
+    if (isTransitioning) return;
     if (!buttonRef.current) {
       setTheme(newTheme);
+      onThemeChange?.(newTheme);
       return;
     }
     const supportsViewTransition = typeof document !== "undefined" && "startViewTransition" in document && typeof document.startViewTransition === "function";
     if (!supportsViewTransition) {
       setTheme(newTheme);
+      onThemeChange?.(newTheme);
       return;
     }
     try {
-      const rect = buttonRef.current.getBoundingClientRect();
-      const x = rect.left + rect.width / 2;
-      const y = rect.top + rect.height / 2;
+      setIsTransitioning(true);
+      const { x, y } = resolveOrigin(
+        animationOrigin,
+        buttonRef,
+        cursorPos.current
+      );
       const endRadius = Math.hypot(
         Math.max(x, window.innerWidth - x),
         Math.max(y, window.innerHeight - y)
       );
       const transition = document.startViewTransition(async () => {
         setTheme(newTheme);
+        onThemeChange?.(newTheme);
       });
       await transition.ready;
-      document.documentElement.animate(
+      const animation = document.documentElement.animate(
         [
-          {
-            clipPath: `circle(0px at ${x}px ${y}px)`
-          },
-          {
-            clipPath: `circle(${Math.ceil(endRadius)}px at ${x}px ${y}px)`
-          }
+          { clipPath: `circle(0px at ${x}px ${y}px)` },
+          { clipPath: `circle(${Math.ceil(endRadius)}px at ${x}px ${y}px)` }
         ],
         {
-          duration: 400,
+          duration: transitionDuration,
           easing: "cubic-bezier(0.4, 0, 0.2, 1)",
           pseudoElement: "::view-transition-new(root)"
         }
       );
+      animation.onfinish = () => setIsTransitioning(false);
+      animation.oncancel = () => setIsTransitioning(false);
     } catch {
       setTheme(newTheme);
+      onThemeChange?.(newTheme);
+      setIsTransitioning(false);
     }
   };
   const handleDirectToggle = () => {
@@ -3544,67 +3586,72 @@ function ModeToggleBase({
     const nextIndex = (currentIndex + 1) % themes.length;
     toggleTheme(themes[nextIndex]);
   };
-  if (directToggle) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      ButtonBase,
+  const handleMouseMove = (e) => {
+    cursorPos.current = { x: e.clientX, y: e.clientY };
+  };
+  const buttonContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.SunIcon,
       {
-        ref: buttonRef,
-        variant,
-        size: "icon",
-        className: cn("relative overflow-hidden group", className),
-        onClick: handleDirectToggle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.SunIcon,
-              {
-                className: `h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100 group-hover:rotate-12"}`
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.MoonIcon,
-              {
-                className: `absolute h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-0 scale-100 opacity-100 group-hover:-rotate-12" : "rotate-90 scale-0 opacity-0"}`
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
-        ]
+        className: `h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100 group-hover:rotate-12"}`
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.MoonIcon,
+      {
+        className: `absolute h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-0 scale-100 opacity-100 group-hover:-rotate-12" : "rotate-90 scale-0 opacity-0"}`
+      }
+    ),
+    showLabel && mounted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-5 text-sm font-medium", children: themeLabels[activeTheme] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
+  ] });
+  const wrapWithTooltip = (node) => {
+    if (!tooltipText) return node;
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: node }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { children: tooltipText })
+    ] }) });
+  };
+  if (directToggle) {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ButtonBase,
+        {
+          ref: buttonRef,
+          variant,
+          size: showLabel ? "default" : "icon",
+          className: cn("relative overflow-hidden group", className),
+          onClick: handleDirectToggle,
+          onMouseMove: handleMouseMove,
+          onKeyDown: (e) => {
+            if (e.repeat && (e.key === "Enter" || e.key === " ")) {
+              e.preventDefault();
+            }
+          },
+          children: buttonContent
+        }
+      )
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(DropDownMenuBase, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropDownMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      ButtonBase,
-      {
-        ref: buttonRef,
-        variant,
-        size: "icon",
-        className: cn("relative overflow-hidden group", className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.SunIcon,
-              {
-                className: `h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100 group-hover:rotate-12"}`
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.MoonIcon,
-              {
-                className: `absolute h-[1.2rem] w-[1.2rem] transition-all duration-500 ${isDark ? "rotate-0 scale-100 opacity-100 group-hover:-rotate-12" : "rotate-90 scale-0 opacity-0"}`
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
-        ]
-      }
+    /* @__PURE__ */ jsxRuntime.jsx(DropDownMenuTriggerBase, { asChild: true, children: wrapWithTooltip(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ButtonBase,
+        {
+          ref: buttonRef,
+          variant,
+          size: showLabel ? "default" : "icon",
+          className: cn("relative overflow-hidden group", className),
+          onMouseMove: handleMouseMove,
+          children: buttonContent
+        }
+      )
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       DropDownMenuContentBase,
       {
         align: "end",
-        className: "border-border bg-popover text-popover-foreground min-w-[140px] ",
+        className: "border-border bg-popover text-popover-foreground min-w-[140px]",
         children: themes.map((theme) => {
           const isActive = currentTheme === theme;
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3858,7 +3905,7 @@ var FileUploader = React32__namespace.forwardRef(
     showPreview = true,
     dropzoneText = "Arraste arquivos aqui ou clique para selecionar",
     dropzoneSubtext,
-    animate: animate2 = true,
+    animate: animate3 = true,
     ...props
   }, ref) => {
     const [isDragging, setIsDragging] = React32__namespace.useState(false);
@@ -4011,7 +4058,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.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
@@ -4021,7 +4068,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.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
@@ -4031,7 +4078,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.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: [
@@ -4046,7 +4093,7 @@ var FileUploader = React32__namespace.forwardRef(
                   framerMotion.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,
@@ -4054,7 +4101,7 @@ var FileUploader = React32__namespace.forwardRef(
                       transition: { duration: 0.2 }
                     },
                     transition: {
-                      delay: animate2 ? index * 0.05 : 0,
+                      delay: animate3 ? index * 0.05 : 0,
                       layout: { duration: 0.2 }
                     },
                     className: cn(
@@ -9669,7 +9716,8 @@ function DayViewAgenda({
   events,
   onEventSelect,
   showUndatedEvents,
-  noTime = false
+  noTime = false,
+  onEventCreate
 }) {
   const hours = React32.useMemo(() => {
     const dayStart = dateFns.startOfDay(currentDate);
@@ -9919,6 +9967,7 @@ function DayViewAgenda({
                       const startTime = new Date(currentDate);
                       startTime.setHours(hourValue);
                       startTime.setMinutes(quarter * 15);
+                      if (onEventCreate) onEventCreate(startTime);
                     },
                     time: quarterHourTime
                   },
@@ -10181,7 +10230,8 @@ function EventAgenda({
   onlyMonth,
   onlyWeek,
   onlyAgenda,
-  onlyYear
+  onlyYear,
+  allowCellClick = false
 }) {
   const lockedView = onlyDay ? "day" : onlyMonth ? "month" : onlyWeek ? "week" : onlyAgenda ? "agenda" : onlyYear ? "year" : void 0;
   const [currentDate, setCurrentDate] = React32.useState(
@@ -10344,7 +10394,13 @@ function EventAgenda({
                 currentDate,
                 events,
                 onEventSelect: handleEventSelect,
-                noTime
+                noTime,
+                onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
+                  start: d,
+                  end: d,
+                  title: "Novo Evento",
+                  id: crypto.randomUUID()
+                }) : void 0
               }
             ),
             activeView === "week" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10353,7 +10409,13 @@ function EventAgenda({
                 currentDate,
                 events,
                 onEventSelect: handleEventSelect,
-                noTime
+                noTime,
+                onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
+                  start: d,
+                  end: d,
+                  title: "Novo Evento",
+                  id: crypto.randomUUID()
+                }) : void 0
               }
             ),
             activeView === "day" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10362,7 +10424,13 @@ function EventAgenda({
                 currentDate,
                 events,
                 onEventSelect: handleEventSelect,
-                noTime
+                noTime,
+                onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
+                  start: d,
+                  end: d,
+                  title: "Novo Evento",
+                  id: crypto.randomUUID()
+                }) : void 0
               }
             ),
             activeView === "agenda" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10371,7 +10439,13 @@ function EventAgenda({
                 currentDate,
                 events,
                 onEventSelect: handleEventSelect,
-                noTime
+                noTime,
+                onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
+                  start: d,
+                  end: d,
+                  title: "Novo Evento",
+                  id: crypto.randomUUID()
+                }) : void 0
               }
             ),
             activeView === "year" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10634,7 +10708,8 @@ function MonthViewAgenda({
   events,
   onEventSelect,
   showUndatedEvents,
-  noTime = false
+  noTime = false,
+  onEventCreate
 }) {
   const days = React32.useMemo(() => {
     const monthStart = dateFns.startOfMonth(currentDate);
@@ -10777,6 +10852,7 @@ function MonthViewAgenda({
                       onClick: () => {
                         const t = new Date(day);
                         t.setHours(DefaultStartHourAgenda, 0, 0);
+                        if (onEventCreate) onEventCreate(t);
                       },
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
@@ -16115,7 +16191,8 @@ var DraggableTooltipComponent = ({
                 highlightedSeries,
                 toggleHighlight,
                 finalColors,
-                valueFormatter
+                valueFormatter,
+                seriesTypeMap
               ]
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-2 border-t", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
@@ -16409,74 +16486,106 @@ var SystemTooltip = ({
   const [localPos, setLocalPos] = React32.useState(position);
   const [dragging, setDragging] = React32.useState(false);
   const offsetRef = React32.useRef({ x: 0, y: 0 });
-  const lastMouse = React32.useRef({ x: 0, y: 0 });
-  React32.useEffect(() => setLocalPos(position), [position]);
+  const lastPos = React32.useRef({ x: 0, y: 0 });
+  const tooltipRef = React32.useRef(null);
+  const currentPosRef = React32.useRef(position);
+  React32.useEffect(() => {
+    currentPosRef.current = position;
+    setLocalPos(position);
+  }, [position]);
   React32.useEffect(() => {
     let rafId = null;
-    const handleMouseMove = (e) => {
-      if (!dragging) return;
-      lastMouse.current = { x: e.clientX, y: e.clientY };
+    const applyMove = (clientX, clientY) => {
+      lastPos.current = { x: clientX, y: clientY };
       if (rafId) cancelAnimationFrame(rafId);
       rafId = requestAnimationFrame(() => {
-        const newLeft = lastMouse.current.x - offsetRef.current.x;
-        const newTop = lastMouse.current.y - offsetRef.current.y;
-        const rawPosition = {
-          top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
-          left: Math.max(0, Math.min(newLeft, window.innerWidth - 320))
+        const p = {
+          top: Math.max(
+            0,
+            Math.min(
+              lastPos.current.y - offsetRef.current.y,
+              window.innerHeight - 200
+            )
+          ),
+          left: Math.max(
+            0,
+            Math.min(
+              lastPos.current.x - offsetRef.current.x,
+              window.innerWidth - 320
+            )
+          )
         };
-        setLocalPos(rawPosition);
-        if (onPositionChange) onPositionChange(id, rawPosition);
+        currentPosRef.current = p;
+        if (tooltipRef.current) {
+          tooltipRef.current.style.top = `${p.top}px`;
+          tooltipRef.current.style.left = `${p.left}px`;
+        }
+        onPositionChange?.(id, p);
       });
     };
-    const handleMouseUp = () => {
-      if (dragging) {
-        setDragging(false);
-        if (rafId) cancelAnimationFrame(rafId);
-      }
+    const stopDrag = () => {
+      if (!dragging) return;
+      setDragging(false);
+      setLocalPos(currentPosRef.current);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+    const handleMouseMove = (e) => {
+      if (dragging) applyMove(e.clientX, e.clientY);
+    };
+    const handleTouchMove = (e) => {
+      if (!dragging || !e.touches[0]) return;
+      applyMove(e.touches[0].clientX, e.touches[0].clientY);
     };
     if (dragging) {
       document.addEventListener("mousemove", handleMouseMove, {
         passive: true
       });
-      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseup", stopDrag);
+      document.addEventListener("touchmove", handleTouchMove, {
+        passive: true
+      });
+      document.addEventListener("touchend", stopDrag);
+      document.addEventListener("touchcancel", stopDrag);
       document.body.style.cursor = "grabbing";
       document.body.style.userSelect = "none";
     }
     return () => {
       if (rafId) cancelAnimationFrame(rafId);
       document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseup", stopDrag);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", stopDrag);
+      document.removeEventListener("touchcancel", stopDrag);
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
     };
   }, [dragging, id, onPositionChange]);
-  const handleMouseDownLocal = React32.useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const rect = e.currentTarget.closest(".fixed")?.getBoundingClientRect();
+  const startDrag = React32.useCallback(
+    (clientX, clientY, e) => {
+      const rect = tooltipRef.current?.getBoundingClientRect();
       if (!rect) return;
-      offsetRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      offsetRef.current = { x: clientX - rect.left, y: clientY - rect.top };
       setDragging(true);
       onMouseDown?.(id, e);
     },
     [id, onMouseDown]
   );
+  const handleMouseDownLocal = React32.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      startDrag(e.clientX, e.clientY, e);
+    },
+    [startDrag]
+  );
   const handleTouchStartLocal = React32.useCallback(
     (e) => {
       e.stopPropagation();
       const touch = e.touches[0];
       if (!touch) return;
-      const rect = e.currentTarget.closest(".fixed")?.getBoundingClientRect();
-      if (!rect) return;
-      offsetRef.current = {
-        x: touch.clientX - rect.left,
-        y: touch.clientY - rect.top
-      };
-      setDragging(true);
-      onMouseDown?.(id, e);
+      startDrag(touch.clientX, touch.clientY, e);
     },
-    [id, onMouseDown]
+    [startDrag]
   );
   const handleConnClick = React32.useCallback(
     (e, conn) => {
@@ -16524,15 +16633,13 @@ var SystemTooltip = ({
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
     {
+      ref: tooltipRef,
       className: "fixed bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-2xl z-[10000] w-80 overflow-hidden",
       variants: tooltipVariants2,
       initial: "hidden",
       animate: "visible",
       exit: "exit",
-      style: {
-        top: localPos.top,
-        left: localPos.left
-      },
+      style: { top: localPos.top, left: localPos.left },
       onClick: (e) => e.stopPropagation(),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -16547,7 +16654,7 @@ var SystemTooltip = ({
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(react.DotsSixVerticalIcon, { size: 16, className: "text-primary" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(react.DotsSixVerticalIcon, { size: 16, className: "text-primary" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: title })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -16573,22 +16680,19 @@ var SystemTooltip = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-4 space-y-4 max-h-[300px] 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__ */ jsxRuntime.jsx(SeparatorBase, { className: "w-full" }),
-          isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
-                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3 w-16" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2].map((g) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3 w-16" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
-                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3 w-16" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: [1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
-            ] })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonBase,
+              {
+                className: "h-10 w-full rounded-lg"
+              },
+              i
+            )) })
+          ] }, g)) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
@@ -16603,7 +16707,7 @@ var SystemTooltip = ({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: renderConnections(exits, "blue") })
             ] }),
-            data.connections.length === 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+            data.connections.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
           ] })
         ] })
       ]
@@ -16625,6 +16729,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] = React32.useState(false);
   const handleCopy = React32.useCallback(() => {
@@ -16658,26 +16769,56 @@ var propertyLabels = {
   Destino: "Destino",
   Origem: "Origem"
 };
-var IntegrationCard = ({ title, details }) => {
+var LongPressTooltip = ({ content, isMobile, children }) => {
+  const [open, setOpen] = React32.useState(false);
+  const timerRef = React32.useRef(null);
+  const handleTouchStart = React32.useCallback(() => {
+    timerRef.current = setTimeout(() => setOpen(true), 1e3);
+  }, []);
+  const handleTouchEnd = React32.useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setTimeout(() => setOpen(false), 1500);
+  }, []);
+  React32.useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    TooltipBase,
+    {
+      open: isMobile ? open : void 0,
+      onOpenChange: isMobile ? setOpen : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: isMobile ? React32__namespace.default.cloneElement(children, {
+          onTouchStart: handleTouchStart,
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd
+        }) : children }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 6, className: "z-[10001]", children: content })
+      ]
+    }
+  ) });
+};
+var IntegrationCard = ({ title, details, isMobile }) => {
   const titleRef = React32.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__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: titleRef,
+      className: "text-sm font-bold text-foreground truncate flex-1 min-w-0 cursor-default",
+      children: title
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border/40 bg-muted/20 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            ref: titleRef,
-            className: "text-sm font-bold text-foreground truncate flex-1 min-w-0 cursor-default",
-            children: title
-          }
-        ) }),
-        isTitleTruncated && /* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 6, className: "z-[10001]", children: title })
-      ] }) }),
+      isTitleTruncated ? /* @__PURE__ */ jsxRuntime.jsx(LongPressTooltip, { content: title, isMobile, children: titleSpan }) : titleSpan,
       entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
         CopyData,
         {
@@ -16697,69 +16838,59 @@ var IntegrationCard = ({ title, details }) => {
     }) })
   ] });
 };
-var Name = ({
-  name,
-  description
-}) => {
+var Name = ({ name, description, isMobile }) => {
   const nameRef = React32.useRef(null);
   const descRef = React32.useRef(null);
   const isNameTruncated = useIsTruncated(nameRef);
   const isDescTruncated = useIsTruncated(descRef);
   const showTooltip = isNameTruncated || isDescTruncated;
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cursor-default min-w-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "h3",
-        {
-          ref: nameRef,
-          className: "text-xl font-bold text-foreground tracking-tight truncate",
-          children: name
-        }
-      ),
-      description && /* @__PURE__ */ jsxRuntime.jsx(
-        "p",
-        {
-          ref: descRef,
-          className: "text-xs text-foreground/70 truncate mt-0.5",
-          children: description
-        }
-      )
-    ] }) }),
-    showTooltip && /* @__PURE__ */ jsxRuntime.jsxs(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: name }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-foreground/70 mt-0.5", children: description })
-    ] })
-  ] }) });
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cursor-default min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h3",
+      {
+        ref: nameRef,
+        className: "text-xl font-bold text-foreground tracking-tight truncate",
+        children: name
+      }
+    ),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { ref: descRef, className: "text-xs text-foreground/70 truncate mt-0.5", children: description })
+  ] });
+  if (!showTooltip) return content;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LongPressTooltip,
+    {
+      content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: name }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-foreground/70 mt-0.5", children: description })
+      ] }),
+      isMobile,
+      children: content
+    }
+  );
 };
-var SystemNode = React32__namespace.default.forwardRef(
-  ({ label }, ref) => {
-    const innerRef = React32.useRef(null);
-    const truncated = label.length > 9 ? label.substring(0, 9) + "\u2026" : label;
-    const needsTooltip = label.length > 9;
-    const setRefs = React32.useCallback(
-      (node) => {
-        innerRef.current = node;
-        if (typeof ref === "function") ref(node);
-        else if (ref)
-          ref.current = node;
-      },
-      [ref]
-    );
-    const circle = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: circle }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContentBase, { sideOffset: 8, className: "z-[10001]", children: label })
-    ] }) });
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(LongPressTooltip, { content: label, isMobile, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-primary-foreground text-center px-2 leading-tight select-none", children: truncated })
+    }
+  ) });
+}
+var SystemNode = React32__namespace.default.forwardRef(SystemNodeInner);
 SystemNode.displayName = "SystemNode";
 var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   const gradientId = React32.useId();
@@ -16767,6 +16898,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
   const [svgSize, setSvgSize] = React32.useState({ w: 0, h: 0 });
   React32.useEffect(() => {
     let rafId;
+    let running = true;
     const update = () => {
       const container = containerRef.current;
       const left = leftRef.current;
@@ -16779,39 +16911,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%"];
@@ -16877,7 +17001,7 @@ var Beam = ({ isInput, containerRef, leftRef, rightRef }) => {
     }
   );
 };
-var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
+var SystemsDiagram = ({ isInput, currentSystem, externalSystem, isMobile }) => {
   const containerRef = React32.useRef(null);
   const leftRef = React32.useRef(null);
   const rightRef = React32.useRef(null);
@@ -16891,14 +17015,16 @@ var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
           SystemNode,
           {
             ref: leftRef,
-            label: isInput ? externalSystem : currentSystem
+            label: isInput ? externalSystem : currentSystem,
+            isMobile
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           SystemNode,
           {
             ref: rightRef,
-            label: isInput ? currentSystem : externalSystem
+            label: isInput ? currentSystem : externalSystem,
+            isMobile
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -16914,47 +17040,84 @@ var SystemsDiagram = ({ isInput, currentSystem, externalSystem }) => {
     }
   );
 };
-var BodyComponent = ({ data, isLoading, connections, isInput, externalSystem }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-6 w-3/4" }),
-    /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3.5 w-1/2" })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Name, { name: data.name, description: data.description }),
-  isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/20" }),
-    [1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "rounded-lg border border-border/20 overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-8 w-full" }),
-          [1, 2, 3].map((j) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-7 w-full mt-px" }, j))
-        ]
+var BodyComponent = ({
+  data,
+  isLoading,
+  connections,
+  isInput,
+  externalSystem,
+  isMobile,
+  scrollable
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Nenhuma conex\xE3o encontrada" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SystemsDiagram,
-      {
-        isInput,
-        currentSystem: data.name,
-        externalSystem
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: connections.map((conn) => /* @__PURE__ */ jsxRuntime.jsx(
-      IntegrationCard,
-      {
-        title: conn.name,
-        details: conn.integration
+      onTouchStartCapture: (e) => {
+        if (scrollable) e.stopPropagation();
       },
-      conn.id
-    )) })
-  ] })
+      children: [
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-6 w-3/4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-3.5 w-1/2" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          Name,
+          {
+            name: data.name,
+            description: data.description,
+            isMobile
+          }
+        ),
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "w-[76px] h-[76px] rounded-full" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border/20" }),
+          [1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "rounded-lg border border-border/20 overflow-hidden",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-8 w-full" }),
+                [1, 2, 3].map((j) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBase, { className: "h-7 w-full mt-px" }, j))
+              ]
+            },
+            i
+          ))
+        ] }) : connections.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Nenhuma conex\xE3o encontrada" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SystemsDiagram,
+            {
+              isInput,
+              currentSystem: data.name,
+              externalSystem,
+              isMobile
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: connections.map((conn) => /* @__PURE__ */ jsxRuntime.jsx(
+            IntegrationCard,
+            {
+              title: conn.name,
+              details: conn.integration,
+              isMobile
+            },
+            conn.id
+          )) })
+        ] })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.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__namespace.default.memo(BodyComponent);
 var modalVariants = {
@@ -16974,6 +17137,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,
@@ -17068,6 +17250,66 @@ var IntegrationModal = ({
     },
     [id, onMouseDown]
   );
+  const [snap, setSnap] = React32.useState("peek");
+  const sheetHeight = framerMotion.useMotionValue(SNAP_HEIGHTS.peek);
+  const snapTo = React32.useCallback(
+    (target) => {
+      setSnap(target);
+      framerMotion.animate(sheetHeight, SNAP_HEIGHTS[target], {
+        type: "spring",
+        stiffness: 320,
+        damping: 36
+      });
+    },
+    [sheetHeight]
+  );
+  React32.useEffect(() => {
+    if (isMobile) {
+      sheetHeight.set("0px");
+      framerMotion.animate(sheetHeight, SNAP_HEIGHTS.peek, {
+        type: "spring",
+        stiffness: 320,
+        damping: 36
+      });
+    }
+  }, [isMobile, sheetHeight]);
+  const handleDragEnd = React32.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 = React32.useMemo(
     () => data.connections.filter((c) => c.type === "entrada"),
     [data.connections]
@@ -17082,19 +17324,19 @@ var IntegrationModal = ({
   const header = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.DotsSixVerticalIcon, { size: 16, className: "text-primary" }),
+          !isMobile && /* @__PURE__ */ jsxRuntime.jsx(react.DotsSixVerticalIcon, { size: 16, className: "text-primary" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: title })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
           ButtonBase,
           {
             variant: "ghost",
@@ -17108,7 +17350,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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -17125,17 +17375,42 @@ var IntegrationModal = ({
       /* @__PURE__ */ jsxRuntime.jsxs(
         framerMotion.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__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2.5 pb-1 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-1 rounded-full bg-border" }) }),
+            snap !== "full" && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "flex justify-center pt-3 pb-1 shrink-0 touch-none",
+                style: { touchAction: "none" },
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-1 rounded-full bg-muted-foreground/30" })
+              }
+            ),
+            snap === "full" && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "flex items-center justify-between px-4 pt-3 pb-2 shrink-0 touch-none",
+                style: { touchAction: "none" },
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-1 rounded-full bg-muted-foreground/30 mx-auto" })
+              }
+            ),
             header,
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Body, { ...bodyProps }) })
+            /* @__PURE__ */ jsxRuntime.jsx(Body, { ...bodyProps })
           ]
         },
         `sheet-${id}`
@@ -21679,6 +21954,22 @@ function GroupLabel({ group }) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold text-muted-foreground uppercase tracking-widest", children: group.label })
   ] });
 }
+function HighlightText({ text, query }) {
+  if (!query || !query.trim()) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+  const terms = query.split(/[, ]+/).map((t) => t.trim()).filter((t) => t.length > 0);
+  if (terms.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+  const escapedTerms = terms.map(
+    (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+  );
+  const regex = new RegExp(`(${escapedTerms.join("|")})`, "gi");
+  const parts = text.split(regex);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((part, i) => {
+    const isMatch = terms.some(
+      (t) => t.toLowerCase() === part.toLowerCase()
+    );
+    return isMatch ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-semibold", children: part }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: part }, i);
+  }) });
+}
 function mapBadgeVariantToColor(variant) {
   if (!variant) return void 0;
   switch (variant) {
@@ -21705,8 +21996,10 @@ function mapBadgeVariantToColor(variant) {
 function CommandItemRow({
   item,
   isActive,
+  isSelected,
   onSelect,
-  onHover
+  onHover,
+  searchQuery
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.button,
@@ -21724,7 +22017,7 @@ function CommandItemRow({
           "span",
           {
             className: `relative flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-md text-base
-          ${isActive ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground group-hover:text-foreground"}`,
+          ${isSelected ? "bg-primary text-primary-foreground" : isActive ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground group-hover:text-foreground"}`,
             children: item.icon
           }
         ),
@@ -21734,15 +22027,22 @@ function CommandItemRow({
               "span",
               {
                 className: `text-sm font-medium truncate ${isActive ? "text-foreground" : "text-foreground/80"}`,
-                children: item.label
+                children: /* @__PURE__ */ jsxRuntime.jsx(HighlightText, { text: item.label, query: searchQuery })
               }
             ),
             item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: mapBadgeVariantToColor(item.badgeVariant), children: item.badge.toUpperCase() })
           ] }),
-          item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: item.description })
+          item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightText, { text: item.description, query: searchQuery }) })
         ] }),
         item.shortcut && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative hidden sm:flex items-center gap-1 flex-shrink-0", children: item.shortcut.map((k, i) => /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: k }, i)) }),
-        isActive && /* @__PURE__ */ jsxRuntime.jsx(
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            layoutId: `selected-indicator-${item.id}`,
+            className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-primary rounded-r-md"
+          }
+        ),
+        isActive && !isSelected && /* @__PURE__ */ jsxRuntime.jsx(
           react.CaretRightIcon,
           {
             className: "relative w-4 h-4 text-primary flex-shrink-0",
@@ -21762,22 +22062,40 @@ function useCommandPalette({
   recentItems = [],
   onRecentItemsChange,
   maxRecentItems = 5,
-  multiSearch = false
+  multiSearch = false,
+  multiSelect = false,
+  onSelectMultiple
 }) {
   const [query, setQuery] = React32__namespace.useState("");
   const [activeIndex, setActiveIndex] = React32__namespace.useState(0);
   const [page, setPage] = React32__namespace.useState(0);
+  const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const toggleSelection = React32__namespace.useCallback((id) => {
+    setSelectedItemIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const clearSelection = React32__namespace.useCallback(
+    () => setSelectedItemIds(/* @__PURE__ */ new Set()),
+    []
+  );
   const baseGroups = React32__namespace.useMemo(
     () => normaliseGroups(items, groups),
     [items, groups]
   );
-  React32__namespace.useEffect(() => {
+  React32.useEffect(() => {
     if (open) {
       setQuery("");
       setActiveIndex(0);
       setPage(0);
+      clearSelection();
     }
-  }, [open]);
+  }, [open, clearSelection]);
   const searchTerms = React32__namespace.useMemo(() => {
     const parts = query.split(",");
     if (parts.length <= 1 && !multiSearch) return [];
@@ -21840,12 +22158,35 @@ function useCommandPalette({
     () => displayedGroups.flatMap((g) => g.items),
     [displayedGroups]
   );
+  const selectedItems = React32.useMemo(
+    () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
+    [allFlatItems, selectedItemIds]
+  );
   const pageItemCount = flatItems.length;
   React32.useEffect(() => {
     setActiveIndex((i) => Math.min(i, Math.max(pageItemCount - 1, 0)));
   }, [pageItemCount]);
-  function handleSelect(item) {
+  function executeBulkAction() {
+    if (!onSelectMultiple || selectedItems.length === 0) return;
+    onSelectMultiple(selectedItems);
+    onOpenChange?.(false);
+  }
+  function handleSelect(item, event) {
     if (!item) return;
+    if (multiSelect) {
+      if (event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey)) {
+        toggleSelection(item.id);
+        return;
+      }
+      if (selectedItems.length > 0) {
+        const itemsToSubmit = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
+        if (onSelectMultiple) {
+          onSelectMultiple(itemsToSubmit);
+        }
+        onOpenChange?.(false);
+        return;
+      }
+    }
     item.onSelect();
     onOpenChange?.(false);
     if (onRecentItemsChange) {
@@ -21878,12 +22219,26 @@ function useCommandPalette({
         }
       } else if (e.key === "Enter") {
         e.preventDefault();
-        handleSelect(flatItems[activeIndex]);
+        if (multiSelect && (e.ctrlKey || e.metaKey)) {
+          executeBulkAction();
+          return;
+        }
+        handleSelect(flatItems[activeIndex], e);
       }
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [open, flatItems, activeIndex, pageItemCount, page, totalPages]);
+  }, [
+    open,
+    flatItems,
+    activeIndex,
+    pageItemCount,
+    page,
+    totalPages,
+    executeBulkAction,
+    handleSelect,
+    multiSelect
+  ]);
   return {
     query,
     setQuery,
@@ -21899,6 +22254,10 @@ function useCommandPalette({
     totalItems,
     totalPages,
     handleSelect,
+    selectedItemIds,
+    toggleSelection,
+    selectedItems,
+    executeBulkAction,
     isEmpty: totalItems === 0 && query.trim().length > 0,
     showList: query.trim() !== "" || recentItems.length > 0
   };
@@ -21958,8 +22317,12 @@ var VirtualResultList = React32.memo(
     displayedGroups,
     flatItems,
     activeIndex,
+    multiSelect,
+    selectedItemIds,
     onHover,
-    onSelect
+    onSelect,
+    onToggleSelection,
+    searchQuery
   }) => {
     const rows = React32.useMemo(() => {
       const acc = [];
@@ -22015,8 +22378,12 @@ var VirtualResultList = React32.memo(
                 {
                   item: row.item,
                   isActive: row.globalIdx === activeIndex,
+                  isSelected: selectedItemIds.has(row.item.id),
+                  multiSelect,
                   onHover: () => onHover(row.globalIdx),
-                  onSelect: () => onSelect(row.item)
+                  onSelect: (e) => onSelect(row.item, e),
+                  onToggleSelection: (e) => onToggleSelection(row.item.id, e),
+                  searchQuery
                 }
               ) })
             },
@@ -22028,30 +22395,55 @@ var VirtualResultList = React32.memo(
   }
 );
 VirtualResultList.displayName = "VirtualResultList";
-var FooterBar = React32.memo(({ footer, totalItems }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
-  footer ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-[11px] text-muted-foreground", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.ArrowElbowDownRightIcon, { className: "w-3 h-3" }),
-      "Selecionar"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: "\u2191\u2193" }),
-      "Navegar"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.ArrowBendUpLeftIcon, { className: "w-3 h-3" }),
-      "Fechar"
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.CommandIcon, { className: "w-3 h-3" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      totalItems,
-      " resultado",
-      totalItems !== 1 ? "s" : ""
+var FooterBar = React32.memo(
+  ({
+    footer,
+    totalItems,
+    selectedCount = 0,
+    executeBulkAction
+  }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
+    footer ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 text-[11px] text-muted-foreground", children: selectedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: executeBulkAction,
+          className: "flex items-center gap-1.5 text-primary hover:text-primary/80 transition-colors font-medium cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.CommandIcon, { className: "w-3 h-3" }),
+            " Confirmar (",
+            selectedCount,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: "Ctrl+Enter" }),
+        "Finalizar sele\xE7\xE3o"
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.ArrowElbowDownRightIcon, { className: "w-3 h-3" }),
+        "Selecionar"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: "\u2191\u2193" }),
+        "Navegar"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.ArrowBendUpLeftIcon, { className: "w-3 h-3" }),
+        "Fechar"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.CommandIcon, { className: "w-3 h-3" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        totalItems,
+        " resultado",
+        totalItems !== 1 ? "s" : ""
+      ] })
     ] })
   ] })
-] }));
+);
 FooterBar.displayName = "FooterBar";
 function CommandPalette(props) {
   const {
@@ -22061,6 +22453,7 @@ function CommandPalette(props) {
     footer,
     debounceDelay = 300,
     multiSearch = false,
+    multiSelect = false,
     emptyMessage = "Nenhum resultado encontrado.",
     shortcut = { key: "k", ctrl: true }
   } = props;
@@ -22077,6 +22470,9 @@ function CommandPalette(props) {
     flatItems,
     totalItems,
     handleSelect,
+    selectedItemIds,
+    toggleSelection,
+    executeBulkAction,
     isEmpty,
     showList
   } = useCommandPalette({
@@ -22133,8 +22529,12 @@ function CommandPalette(props) {
     displayedGroups,
     flatItems,
     activeIndex,
+    multiSelect,
+    selectedItemIds,
     onHover: setActiveIndex,
-    onSelect: handleSelect
+    onSelect: handleSelect,
+    onToggleSelection: toggleSelection,
+    searchQuery: query
   };
   if (isMobile) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -22177,65 +22577,60 @@ function CommandPalette(props) {
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
-      {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: ANIMATION.overlay,
-        className: "fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm",
-        onClick: handleClose
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.motion.div,
-      {
-        initial: { opacity: 0, scale: 0.96, y: -8 },
-        animate: { opacity: 1, scale: 1, y: 0 },
-        exit: { opacity: 0, scale: 0.96, y: -8 },
-        transition: ANIMATION.panel,
-        className: "fixed z-[100] top-12 -translate-x-1/2 -translate-y-1/2 w-full max-w-xl rounded-xl border border-border overflow-hidden shadow-2xl shadow-black/20 dark:shadow-black/60 bg-popover/95 backdrop-blur-xl",
-        style: { maxHeight: "min(600px, 80vh)" },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.MagnifyingGlassIcon,
-              {
-                className: "w-4 h-4 text-muted-foreground flex-shrink-0",
-                weight: "bold"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DebouncedInput,
-              {
-                ref: inputRef,
-                value: query,
-                debounce: debounceDelay,
-                onChange: handleQueryChange,
-                placeholder: searchPlaceholder,
-                rightIcon: query ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ButtonBase,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    onClick: handleClearQuery,
-                    className: "text-muted-foreground hover:text-red-500 hover:bg-transparent transition-colors",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" })
-                  }
-                ) : void 0,
-                className: "flex-1 bg-transparent border-none focus-visible:ring-0 outline-none shadow-none px-0 h-7 text-sm caret-primary"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SearchBadges, { terms: searchTerms }),
-          showList && /* @__PURE__ */ jsxRuntime.jsx(VirtualResultList, { ...sharedListProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(FooterBar, { footer, totalItems })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0, scale: 0.96, y: -8 },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.96, y: -8 },
+      transition: ANIMATION.panel,
+      className: "fixed z-[100] top-4  -translate-x-1/2 w-full max-w-xl rounded-xl border border-border overflow-hidden shadow-2xl shadow-black/20 dark:shadow-black/60 bg-popover/95 backdrop-blur-xl",
+      style: { maxHeight: "min(600px, 80vh)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.MagnifyingGlassIcon,
+            {
+              className: "w-4 h-4 text-muted-foreground flex-shrink-0",
+              weight: "bold"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DebouncedInput,
+            {
+              ref: inputRef,
+              value: query,
+              debounce: debounceDelay,
+              onChange: handleQueryChange,
+              placeholder: searchPlaceholder,
+              rightIcon: query ? /* @__PURE__ */ jsxRuntime.jsx(
+                ButtonBase,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: handleClearQuery,
+                  className: "text-muted-foreground hover:text-red-500 hover:bg-transparent transition-colors",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" })
+                }
+              ) : void 0,
+              className: "flex-1 bg-transparent border-none focus-visible:ring-0 outline-none shadow-none px-0 h-7 text-sm caret-primary"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SearchBadges, { terms: searchTerms }),
+        showList && /* @__PURE__ */ jsxRuntime.jsx(VirtualResultList, { ...sharedListProps }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FooterBar,
+          {
+            footer,
+            totalItems,
+            selectedCount: selectedItemIds.size,
+            executeBulkAction
+          }
+        )
+      ]
+    }
+  ) }) });
 }
 
 exports.AddButton = AddButton;