@mlw-packages/react-components 1.10.19 → 1.10.21

package/dist/index.mjs

@@ -1,11 +1,11 @@
 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';
 import { twMerge } from 'tailwind-merge';
-import { XIcon, CircleNotchIcon, MagnifyingGlassIcon, CaretUpIcon, CaretDownIcon, CheckIcon, CaretRightIcon, CircleIcon, CloudArrowUpIcon, MinusIcon, CaretUpDownIcon, PencilSimpleIcon, ArrowsLeftRightIcon, FloppyDiskIcon, PlusIcon, TrashIcon, SidebarSimpleIcon, ArrowElbowDownRightIcon, ArrowBendUpLeftIcon, CommandIcon, FilePdfIcon, FileDocIcon, FileXlsIcon, FilePptIcon, FileCsvIcon, FileTextIcon, FileImageIcon, FileVideoIcon, FileAudioIcon, FileZipIcon, FileIcon, DotsSixVerticalIcon, CopyIcon, InfoIcon, WarningIcon, XCircleIcon, CheckCircleIcon, SunIcon, MoonIcon, CaretLeftIcon, DownloadSimpleIcon, UploadSimpleIcon, ArrowClockwiseIcon, ArrowLeftIcon, GearIcon, BellIcon, DotsThreeIcon, FunnelIcon, HeartIcon, StarIcon, EyeIcon, EyeSlashIcon, LockIcon, LockOpenIcon, FolderIcon, ArrowRightIcon as ArrowRightIcon$1, ArrowsOutIcon, DownloadIcon, CalendarBlankIcon, CalendarIcon, MapPinIcon, CalendarDotsIcon, ClockIcon, AlignLeftIcon, CaretLeft, CaretRight, ArrowDownIcon, ClockUserIcon, EyeSlash, Eye, ArrowUpRightIcon, ArrowDownRightIcon, FunnelSimpleIcon, PencilIcon, ClockCounterClockwiseIcon, FileArchiveIcon, TerminalIcon, CodeIcon, CalendarDotIcon as CalendarDotIcon$1, DesktopIcon } from '@phosphor-icons/react';
+import { XIcon, CircleNotchIcon, MagnifyingGlassIcon, CaretUpIcon, CaretDownIcon, CheckIcon, CaretRightIcon, CircleIcon, CloudArrowUpIcon, MinusIcon, CaretUpDownIcon, PencilSimpleIcon, ArrowsLeftRightIcon, FloppyDiskIcon, PlusIcon, TrashIcon, SidebarSimpleIcon, CommandIcon, ArrowElbowDownRightIcon, ArrowBendUpLeftIcon, FilePdfIcon, FileDocIcon, FileXlsIcon, FilePptIcon, FileCsvIcon, FileTextIcon, FileImageIcon, FileVideoIcon, FileAudioIcon, FileZipIcon, FileIcon, DotsSixVerticalIcon, CopyIcon, InfoIcon, WarningIcon, XCircleIcon, CheckCircleIcon, CaretLeftIcon, DownloadSimpleIcon, UploadSimpleIcon, ArrowClockwiseIcon, ArrowLeftIcon, GearIcon, BellIcon, DotsThreeIcon, FunnelIcon, HeartIcon, StarIcon, EyeIcon, EyeSlashIcon, LockIcon, LockOpenIcon, FolderIcon, ArrowRightIcon as ArrowRightIcon$1, ArrowsOutIcon, DownloadIcon, CalendarBlankIcon, CalendarIcon, MapPinIcon, CalendarDotsIcon, SunIcon, ClockIcon, AlignLeftIcon, CaretLeft, CaretRight, ArrowDownIcon, ClockUserIcon, EyeSlash, Eye, ArrowUpRightIcon, ArrowDownRightIcon, FunnelSimpleIcon, PencilIcon, ClockCounterClockwiseIcon, FileArchiveIcon, TerminalIcon, CodeIcon, CalendarDotIcon as CalendarDotIcon$1, MoonIcon, DesktopIcon } from '@phosphor-icons/react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -3443,58 +3443,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] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const cursorPos = useRef(null);
   const { setTheme, theme: currentTheme } = useTheme();
   const buttonRef = useRef(null);
   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 = () => {
@@ -3502,67 +3544,72 @@ function ModeToggleBase({
     const nextIndex = (currentIndex + 1) % themes.length;
     toggleTheme(themes[nextIndex]);
   };
-  if (directToggle) {
-    return /* @__PURE__ */ jsxs(
-      ButtonBase,
+  const handleMouseMove = (e) => {
+    cursorPos.current = { x: e.clientX, y: e.clientY };
+  };
+  const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SunIcon,
       {
-        ref: buttonRef,
-        variant,
-        size: "icon",
-        className: cn("relative overflow-hidden group", className),
-        onClick: handleDirectToggle,
-        children: [
-          /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              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__ */ jsx(
-              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__ */ 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__ */ jsx(
+      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__ */ jsx("span", { className: "ml-5 text-sm font-medium", children: themeLabels[activeTheme] }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
+  ] });
+  const wrapWithTooltip = (node) => {
+    if (!tooltipText) return node;
+    return /* @__PURE__ */ jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxs(TooltipBase, { children: [
+      /* @__PURE__ */ jsx(TooltipTriggerBase, { asChild: true, children: node }),
+      /* @__PURE__ */ jsx(TooltipContentBase, { children: tooltipText })
+    ] }) });
+  };
+  if (directToggle) {
+    return wrapWithTooltip(
+      /* @__PURE__ */ 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__ */ jsxs(DropDownMenuBase, { children: [
-    /* @__PURE__ */ jsx(DropDownMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs(
-      ButtonBase,
-      {
-        ref: buttonRef,
-        variant,
-        size: "icon",
-        className: cn("relative overflow-hidden group", className),
-        children: [
-          /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              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__ */ jsx(
-              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__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
-        ]
-      }
+    /* @__PURE__ */ jsx(DropDownMenuTriggerBase, { asChild: true, children: wrapWithTooltip(
+      /* @__PURE__ */ jsx(
+        ButtonBase,
+        {
+          ref: buttonRef,
+          variant,
+          size: showLabel ? "default" : "icon",
+          className: cn("relative overflow-hidden group", className),
+          onMouseMove: handleMouseMove,
+          children: buttonContent
+        }
+      )
     ) }),
     /* @__PURE__ */ 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__ */ jsxs(
@@ -3816,7 +3863,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 +4016,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 +4026,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 +4036,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 +4051,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 +4059,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(
@@ -9627,7 +9674,8 @@ function DayViewAgenda({
   events,
   onEventSelect,
   showUndatedEvents,
-  noTime = false
+  noTime = false,
+  onEventCreate
 }) {
   const hours = useMemo(() => {
     const dayStart = startOfDay(currentDate);
@@ -9877,6 +9925,7 @@ function DayViewAgenda({
                       const startTime = new Date(currentDate);
                       startTime.setHours(hourValue);
                       startTime.setMinutes(quarter * 15);
+                      if (onEventCreate) onEventCreate(startTime);
                     },
                     time: quarterHourTime
                   },
@@ -10139,7 +10188,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] = useState(
@@ -10302,7 +10352,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__ */ jsx(
@@ -10311,7 +10367,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__ */ jsx(
@@ -10320,7 +10382,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__ */ jsx(
@@ -10329,7 +10397,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__ */ jsx(
@@ -10592,7 +10666,8 @@ function MonthViewAgenda({
   events,
   onEventSelect,
   showUndatedEvents,
-  noTime = false
+  noTime = false,
+  onEventCreate
 }) {
   const days = useMemo(() => {
     const monthStart = startOfMonth(currentDate);
@@ -10735,6 +10810,7 @@ function MonthViewAgenda({
                       onClick: () => {
                         const t = new Date(day);
                         t.setHours(DefaultStartHourAgenda, 0, 0);
+                        if (onEventCreate) onEventCreate(t);
                       },
                       children: [
                         /* @__PURE__ */ jsx(
@@ -16073,7 +16149,8 @@ var DraggableTooltipComponent = ({
                 highlightedSeries,
                 toggleHighlight,
                 finalColors,
-                valueFormatter
+                valueFormatter,
+                seriesTypeMap
               ]
             ),
             /* @__PURE__ */ jsx("div", { className: "mt-3 pt-2 border-t", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
@@ -16367,74 +16444,106 @@ var SystemTooltip = ({
   const [localPos, setLocalPos] = useState(position);
   const [dragging, setDragging] = useState(false);
   const offsetRef = useRef({ x: 0, y: 0 });
-  const lastMouse = useRef({ x: 0, y: 0 });
-  useEffect(() => setLocalPos(position), [position]);
+  const lastPos = useRef({ x: 0, y: 0 });
+  const tooltipRef = useRef(null);
+  const currentPosRef = useRef(position);
+  useEffect(() => {
+    currentPosRef.current = position;
+    setLocalPos(position);
+  }, [position]);
   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 = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const rect = e.currentTarget.closest(".fixed")?.getBoundingClientRect();
+  const startDrag = 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 = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      startDrag(e.clientX, e.clientY, e);
+    },
+    [startDrag]
+  );
   const handleTouchStartLocal = 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 = useCallback(
     (e, conn) => {
@@ -16482,15 +16591,13 @@ var SystemTooltip = ({
   return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
     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__ */ jsxs(
@@ -16505,7 +16612,7 @@ var SystemTooltip = ({
             },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "rounded", children: /* @__PURE__ */ jsx(DotsSixVerticalIcon, { size: 16, className: "text-primary" }) }),
+                /* @__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(
@@ -16531,22 +16638,19 @@ var SystemTooltip = ({
         ] }) }),
         /* @__PURE__ */ 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__ */ jsx(SeparatorBase, { className: "w-full" }),
-          isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-                /* @__PURE__ */ jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
-                /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3 w-16" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
+          isLoading ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2].map((g) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+              /* @__PURE__ */ jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+              /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3 w-16" })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-                /* @__PURE__ */ jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
-                /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3 w-16" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [1, 2].map((i) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
-            ] })
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+              SkeletonBase,
+              {
+                className: "h-10 w-full rounded-lg"
+              },
+              i
+            )) })
+          ] }, g)) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
                 /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
@@ -16561,7 +16665,7 @@ var SystemTooltip = ({
               ] }),
               /* @__PURE__ */ jsx("div", { className: "space-y-1", children: renderConnections(exits, "blue") })
             ] }),
-            data.connections.length === 0 && !isLoading && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+            data.connections.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
           ] })
         ] })
       ]
@@ -16583,6 +16687,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 +16727,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 +16796,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 +16856,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 +16869,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 +16959,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 +16973,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 +16998,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 +17095,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 +17208,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 +17282,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 +17308,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 +17333,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}`
@@ -21637,6 +21912,22 @@ function GroupLabel({ group }) {
     /* @__PURE__ */ 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__ */ jsx(Fragment, { children: text });
+  const terms = query.split(/[, ]+/).map((t) => t.trim()).filter((t) => t.length > 0);
+  if (terms.length === 0) return /* @__PURE__ */ jsx(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__ */ jsx(Fragment, { children: parts.map((part, i) => {
+    const isMatch = terms.some(
+      (t) => t.toLowerCase() === part.toLowerCase()
+    );
+    return isMatch ? /* @__PURE__ */ jsx("span", { className: "text-primary font-semibold", children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i);
+  }) });
+}
 function mapBadgeVariantToColor(variant) {
   if (!variant) return void 0;
   switch (variant) {
@@ -21663,8 +21954,10 @@ function mapBadgeVariantToColor(variant) {
 function CommandItemRow({
   item,
   isActive,
+  isSelected,
   onSelect,
-  onHover
+  onHover,
+  searchQuery
 }) {
   return /* @__PURE__ */ jsxs(
     motion.button,
@@ -21682,7 +21975,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
           }
         ),
@@ -21692,15 +21985,22 @@ function CommandItemRow({
               "span",
               {
                 className: `text-sm font-medium truncate ${isActive ? "text-foreground" : "text-foreground/80"}`,
-                children: item.label
+                children: /* @__PURE__ */ jsx(HighlightText, { text: item.label, query: searchQuery })
               }
             ),
             item.badge && /* @__PURE__ */ jsx(Badge, { color: mapBadgeVariantToColor(item.badgeVariant), children: item.badge.toUpperCase() })
           ] }),
-          item.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: item.description })
+          item.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: /* @__PURE__ */ jsx(HighlightText, { text: item.description, query: searchQuery }) })
         ] }),
         item.shortcut && /* @__PURE__ */ jsx("div", { className: "relative hidden sm:flex items-center gap-1 flex-shrink-0", children: item.shortcut.map((k, i) => /* @__PURE__ */ jsx(Kbd, { children: k }, i)) }),
-        isActive && /* @__PURE__ */ jsx(
+        isSelected && /* @__PURE__ */ jsx(
+          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__ */ jsx(
           CaretRightIcon,
           {
             className: "relative w-4 h-4 text-primary flex-shrink-0",
@@ -21720,22 +22020,40 @@ function useCommandPalette({
   recentItems = [],
   onRecentItemsChange,
   maxRecentItems = 5,
-  multiSearch = false
+  multiSearch = false,
+  multiSelect = false,
+  onSelectMultiple
 }) {
   const [query, setQuery] = React32.useState("");
   const [activeIndex, setActiveIndex] = React32.useState(0);
   const [page, setPage] = React32.useState(0);
+  const [selectedItemIds, setSelectedItemIds] = React32.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const toggleSelection = React32.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.useCallback(
+    () => setSelectedItemIds(/* @__PURE__ */ new Set()),
+    []
+  );
   const baseGroups = React32.useMemo(
     () => normaliseGroups(items, groups),
     [items, groups]
   );
-  React32.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setQuery("");
       setActiveIndex(0);
       setPage(0);
+      clearSelection();
     }
-  }, [open]);
+  }, [open, clearSelection]);
   const searchTerms = React32.useMemo(() => {
     const parts = query.split(",");
     if (parts.length <= 1 && !multiSearch) return [];
@@ -21798,12 +22116,35 @@ function useCommandPalette({
     () => displayedGroups.flatMap((g) => g.items),
     [displayedGroups]
   );
+  const selectedItems = useMemo(
+    () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
+    [allFlatItems, selectedItemIds]
+  );
   const pageItemCount = flatItems.length;
   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) {
@@ -21836,12 +22177,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,
@@ -21857,6 +22212,10 @@ function useCommandPalette({
     totalItems,
     totalPages,
     handleSelect,
+    selectedItemIds,
+    toggleSelection,
+    selectedItems,
+    executeBulkAction,
     isEmpty: totalItems === 0 && query.trim().length > 0,
     showList: query.trim() !== "" || recentItems.length > 0
   };
@@ -21916,8 +22275,12 @@ var VirtualResultList = memo(
     displayedGroups,
     flatItems,
     activeIndex,
+    multiSelect,
+    selectedItemIds,
     onHover,
-    onSelect
+    onSelect,
+    onToggleSelection,
+    searchQuery
   }) => {
     const rows = useMemo(() => {
       const acc = [];
@@ -21973,8 +22336,12 @@ var VirtualResultList = 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
                 }
               ) })
             },
@@ -21986,30 +22353,55 @@ var VirtualResultList = memo(
   }
 );
 VirtualResultList.displayName = "VirtualResultList";
-var FooterBar = memo(({ footer, totalItems }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
-  footer ?? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-[11px] text-muted-foreground", children: [
-    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx(ArrowElbowDownRightIcon, { className: "w-3 h-3" }),
-      "Selecionar"
-    ] }),
-    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-mono", children: "\u2191\u2193" }),
-      "Navegar"
-    ] }),
-    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx(ArrowBendUpLeftIcon, { className: "w-3 h-3" }),
-      "Fechar"
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
-    /* @__PURE__ */ jsx(CommandIcon, { className: "w-3 h-3" }),
-    /* @__PURE__ */ jsxs("span", { children: [
-      totalItems,
-      " resultado",
-      totalItems !== 1 ? "s" : ""
+var FooterBar = memo(
+  ({
+    footer,
+    totalItems,
+    selectedCount = 0,
+    executeBulkAction
+  }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
+    footer ?? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 text-[11px] text-muted-foreground", children: selectedCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ 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__ */ jsx(CommandIcon, { className: "w-3 h-3" }),
+            " Confirmar (",
+            selectedCount,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: "Ctrl+Enter" }),
+        "Finalizar sele\xE7\xE3o"
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(ArrowElbowDownRightIcon, { className: "w-3 h-3" }),
+        "Selecionar"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: "\u2191\u2193" }),
+        "Navegar"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(ArrowBendUpLeftIcon, { className: "w-3 h-3" }),
+        "Fechar"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(CommandIcon, { className: "w-3 h-3" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        totalItems,
+        " resultado",
+        totalItems !== 1 ? "s" : ""
+      ] })
     ] })
   ] })
-] }));
+);
 FooterBar.displayName = "FooterBar";
 function CommandPalette(props) {
   const {
@@ -22019,6 +22411,7 @@ function CommandPalette(props) {
     footer,
     debounceDelay = 300,
     multiSearch = false,
+    multiSelect = false,
     emptyMessage = "Nenhum resultado encontrado.",
     shortcut = { key: "k", ctrl: true }
   } = props;
@@ -22035,6 +22428,9 @@ function CommandPalette(props) {
     flatItems,
     totalItems,
     handleSelect,
+    selectedItemIds,
+    toggleSelection,
+    executeBulkAction,
     isEmpty,
     showList
   } = useCommandPalette({
@@ -22091,8 +22487,12 @@ function CommandPalette(props) {
     displayedGroups,
     flatItems,
     activeIndex,
+    multiSelect,
+    selectedItemIds,
     onHover: setActiveIndex,
-    onSelect: handleSelect
+    onSelect: handleSelect,
+    onToggleSelection: toggleSelection,
+    searchQuery: query
   };
   if (isMobile) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -22135,65 +22535,60 @@ function CommandPalette(props) {
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      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__ */ jsxs(
-      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__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
-            /* @__PURE__ */ jsx(
-              MagnifyingGlassIcon,
-              {
-                className: "w-4 h-4 text-muted-foreground flex-shrink-0",
-                weight: "bold"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              DebouncedInput,
-              {
-                ref: inputRef,
-                value: query,
-                debounce: debounceDelay,
-                onChange: handleQueryChange,
-                placeholder: searchPlaceholder,
-                rightIcon: query ? /* @__PURE__ */ jsx(
-                  ButtonBase,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    onClick: handleClearQuery,
-                    className: "text-muted-foreground hover:text-red-500 hover:bg-transparent transition-colors",
-                    children: /* @__PURE__ */ jsx(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__ */ jsx(SearchBadges, { terms: searchTerms }),
-          showList && /* @__PURE__ */ jsx(VirtualResultList, { ...sharedListProps }),
-          /* @__PURE__ */ jsx(FooterBar, { footer, totalItems })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    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__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
+          /* @__PURE__ */ jsx(
+            MagnifyingGlassIcon,
+            {
+              className: "w-4 h-4 text-muted-foreground flex-shrink-0",
+              weight: "bold"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DebouncedInput,
+            {
+              ref: inputRef,
+              value: query,
+              debounce: debounceDelay,
+              onChange: handleQueryChange,
+              placeholder: searchPlaceholder,
+              rightIcon: query ? /* @__PURE__ */ jsx(
+                ButtonBase,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: handleClearQuery,
+                  className: "text-muted-foreground hover:text-red-500 hover:bg-transparent transition-colors",
+                  children: /* @__PURE__ */ jsx(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__ */ jsx(SearchBadges, { terms: searchTerms }),
+        showList && /* @__PURE__ */ jsx(VirtualResultList, { ...sharedListProps }),
+        /* @__PURE__ */ jsx(
+          FooterBar,
+          {
+            footer,
+            totalItems,
+            selectedCount: selectedItemIds.size,
+            executeBulkAction
+          }
+        )
+      ]
+    }
+  ) }) });
 }
 
 export { AddButton, Agenda, AgendaDaysToShow, AgendaDaysToShowAgenda, AgendaView, AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarCombobox, AvatarFallbackBase, AvatarImageBase, BackButton, Badge, BreadcrumbBase, BreadcrumbEllipsisBase, BreadcrumbItemBase, BreadcrumbLinkBase, BreadcrumbListBase, BreadcrumbPageBase, BreadcrumbSeparatorBase, Brush_default as Brush, ButtonBase, ButtonGroupBase, CENTER_INDEX, CalendarBase, CalendarDndProvider, CalendarDndProviderAgenda, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CarouselBase, ChangeButton, Chart_default as Chart, ChartControls, ChartHeader, ChartTotalLegend_default as ChartTotalLegend, CheckButton, CheckboxBase, CheckboxTree, CircularProgress, CloseAllButton_default as CloseAllButton, CloseButton, CodeBlock, CollapsibleBase, CollapsibleContentBase, CollapsibleTriggerBase, Combobox, CommandBase, CommandDebouncedInputBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandItemRow, CommandListBase, CommandPalette, CommandSeparatorBase, CommandShortcutBase, ContextMenuBase, ContextMenuCheckboxItemBase, ContextMenuContentBase, ContextMenuGroupBase, ContextMenuItemBase, ContextMenuLabelBase, ContextMenuPortalBase, ContextMenuRadioGroupBase, ContextMenuRadioItemBase, ContextMenuSeparatorBase, ContextMenuShortcutBase, ContextMenuSubBase, ContextMenuSubContentBase, ContextMenuSubTriggerBase, ContextMenuTriggerBase, ControlledCombobox, CopyButton, DateTimePicker, DayView, DayViewAgenda, DebouncedInput, DefaultEndHour, DefaultEndHourAgenda, DefaultStartHour, DefaultStartHourAgenda, DestructiveDialog, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DownloadButton, DraggableEvent2 as DraggableEvent, DraggableTooltip_default as DraggableTooltip, DrawerBase, DrawerCloseBase, DrawerContentBase, DrawerDescriptionBase, DrawerFooterBase, DrawerHeaderBase, DrawerOverlayBase, DrawerPortalBase, DrawerTitleBase, DrawerTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, DroppableCell, DroppableCellAgenda, EditButton, EndHour, EndHourAgenda, ErrorMessage_default as ErrorMessage, EventAgenda, EventCalendar, EventDetailModalAgenda, EventDialog, EventGap, EventGapAgenda, EventHeight, EventHeightAgenda, EventItem, EventItemAgenda, EventsPopup, FavoriteButton, FileAccept, FileUploader, FilterButton, GroupLabel, HideButton, Highlights_default as Highlights, HorizontalChart_default as HorizontalChart, HorizontalLegend_default as HorizontalLegend, HoverCardBase, HoverCardContentBase, HoverCardTriggerBase, ITEM_HEIGHT, InputBase, InputOTPBase, InputOTPGroupBase, InputOTPSeparatorBase, InputOTPSlotBase, IntegrationModal_default as IntegrationModal, Kbd, KbdGroup, LabelBase_default as LabelBase, Leaderboard, LikeButton, LoadingBase, LockButton, ModalBase, ModalCloseBase, ModalContentBase, ModalDescriptionBase, ModalFooterBase, ModalHeaderBase, ModalOverlayBase, ModalPortalBase, ModalTitleBase, ModalTriggerBase, ModeToggleBase, MonthView, MonthViewAgenda, MoreButton, MultiCombobox, MultiDayOverlay, MultiSelect, MultiSelectBase, MultiSelectContentBase, MultiSelectGroupBase, MultiSelectItemBase, MultiSelectSeparatorBase, MultiSelectTriggerBase, MultiSelectValueBase, NavigationMenuBase, NavigationMenuContentBase, NavigationMenuIndicatorBase, NavigationMenuItemBase, NavigationMenuLinkBase, NavigationMenuListBase, NavigationMenuTriggerBase, NavigationMenuViewportBase, NoData_default as NoData, NotificationButton, NumericInput, PeriodsDropdown_default as PeriodsDropdown, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, ProgressCirclesBase, ProgressPanelsBase, ProgressSegmentsBase, RadialMenu, RangePicker, RefreshButton, SaveButton, ScrollAreaBase, ScrollBarBase, SearchButton, Select, SelectBase, SelectContentBase, SelectEmpty, SelectGroupBase, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SettingsButton, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, ShowOnly_default as ShowOnly, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, StartHour, StartHourAgenda, StatusIndicator, SwitchBase, SystemTooltip_default as SystemTooltip, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, ThemeProviderBase, TimePicker, TimePickerInput, TimeSeries_default as TimeSeries, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipSimple_default as TooltipSimple, TooltipTriggerBase, TooltipWithTotal_default as TooltipWithTotal, UndatedEvents, UniversalTooltipRenderer, UnlockButton, UploadButton, UseSideBarBase, VISIBLE_ITEMS, ViewButton, VisibilityButton, WeekCellsHeight, WeekCellsHeightAgenda, WeekView, WeekViewAgenda, YearViewAgenda, adaptDataForTooltip, addHoursToDate, addHoursToDateAgenda, addMinutesToDateAgenda, badgeVariants, buttonVariantsBase, compactTick, computeChartWidth, computeNiceMax, computeYAxisTickWidth, convert12HourTo24Hour, createGroup, createItem, createValueFormatter, createYTickFormatter, detectDataFields, detectXAxis, display12HourValue, filterAndScore, formatDurationAgenda, formatDurationAgendaDays, formatFieldName, formatLinePercentage, generateAdditionalColors, generateColorMap, getAgendaEventsForDay, getAgendaEventsForDayAgenda, getAllEventsForDay, getAllEventsForDayAgenda, getArrowByType, getAutoColorAgenda, getBorderRadiusClasses, getBorderRadiusClassesAgenda, getDateByType, getEventColorClasses, getEventColorClassesAgenda, getEventEndDate, getEventStartDate, getEventsForDay, getEventsForDayAgenda, getItems, getMaxDataValue, getMinDataValue, getSpanningEventsForDay, getSpanningEventsForDayAgenda, getValid12Hour, getValidArrow12Hour, getValidArrowHour, getValidArrowMinuteOrSecond, getValidArrowNumber, getValidHour, getValidMinuteOrSecond, getValidNumber, isMultiDayEvent, isMultiDayEventAgenda, isValid12Hour, isValidHour, isValidMinuteOrSecond, niceCeil, normaliseGroups, normalizeAttendDate, normalizeStr, processIntegrationData, processNeo4jData, renderInsideBarLabel, pillLabelRenderer_default as renderPillLabel, resolveChartMargins, resolveContainerPaddingLeft, scoreMatch, set12Hours, setDateByType, setHours, setMinutes, setSeconds, sortEvents, sortEventsAgenda, startOfLocalDay, toast, unionGroups, useBiaxial, useCalendarDnd, useCalendarDndAgenda, useChartClick, useChartDimensions, useChartHighlights, useChartLayout, useChartMinMax, useChartTooltips, useCommandPalette, useCurrentTimeIndicator, useCurrentTimeIndicatorAgenda, useDrag, useEventVisibility, useEventVisibilityAgenda, useIsMobile, useIsTruncated, useOpenTooltipForPeriod, useProcessedData, useRecents, useSeriesOpacity, useTheme, useTimeSeriesRange, visualForItem };