xertica-ui 2.4.0 → 2.4.1

package/dist/AudioPlayer-BZ7bibzU.cjs

@@ -0,0 +1,982 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const slider = require("./slider-N7hFFj6X.cjs");
+const tooltip = require("./tooltip-Ded96neP.cjs");
+const reactDom = require("react-dom");
+const dropdownMenu = require("./dropdown-menu-BDB5CmQs.cjs");
+const LayoutContext = require("./LayoutContext-BvK-ggDa.cjs");
+function FloatingMediaWrapper({
+  children,
+  isFloating,
+  setIsFloating,
+  title,
+  onClose,
+  onCloseMedia,
+  aspectRatio = 16 / 9,
+  className,
+  minWidth = 320,
+  minHeight = 110,
+  colorVariant = "default",
+  playerId = "default",
+  enablePadding = false
+}) {
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  if (isFloating) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: tooltip.cn(
+            "w-full rounded-[var(--radius-card)] bg-muted/20 border border-dashed border-muted-foreground/20 flex items-center justify-center flex-col gap-2 p-8 text-muted-foreground transition-all",
+            className
+          ),
+          style: { aspectRatio },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-8 h-8 opacity-50" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Reproduzindo em janela flutuante" }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "outline", size: "sm", onClick: () => setIsFloating(false), children: "Restaurar para a página" })
+          ]
+        }
+      ),
+      isMounted && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FloatingContainer,
+          {
+            setIsFloating,
+            onClose,
+            onCloseMedia,
+            title,
+            aspectRatio,
+            minWidth,
+            minHeight,
+            colorVariant,
+            playerId,
+            enablePadding,
+            children
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn("relative w-full overflow-hidden rounded-[var(--radius-card)]", className), children });
+}
+function FloatingContainer({
+  children,
+  setIsFloating,
+  onClose,
+  onCloseMedia,
+  title,
+  aspectRatio,
+  minWidth,
+  minHeight,
+  colorVariant,
+  playerId = "default",
+  enablePadding = false
+}) {
+  const minPlayerHeight = minWidth / aspectRatio;
+  const containerRef = React.useRef(null);
+  const resizeHandleRef = React.useRef(null);
+  const getInitialState = React.useCallback(() => {
+    const storageKey = `xertica-media-player-${playerId}`;
+    const stored = localStorage.getItem(storageKey);
+    if (stored) {
+      try {
+        return JSON.parse(stored);
+      } catch {
+      }
+    }
+    return {
+      position: {
+        x: typeof window !== "undefined" ? window.innerWidth - minWidth - 24 : 0,
+        y: typeof window !== "undefined" ? window.innerHeight - minPlayerHeight - 24 : 0
+      },
+      size: {
+        width: minWidth,
+        height: minPlayerHeight
+      }
+    };
+  }, [minWidth, minPlayerHeight, playerId]);
+  const [state, setState] = React.useState(getInitialState);
+  const { position, size } = state;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const dragStartPos = React.useRef({ x: 0, y: 0 });
+  const dragStartOffset = React.useRef({ x: 0, y: 0 });
+  const resizeStartState = React.useRef({ position: { x: 0, y: 0 }, size: { width: 0, height: 0 } });
+  const saveState = React.useCallback((newPosition, newSize) => {
+    const storageKey = `xertica-media-player-${playerId}`;
+    localStorage.setItem(storageKey, JSON.stringify({ position: newPosition, size: newSize }));
+  }, [playerId]);
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    dragStartPos.current = { x: e.clientX, y: e.clientY };
+    dragStartOffset.current = { x: position.x, y: position.y };
+  };
+  const handleResizeStart = (e, direction) => {
+    e.stopPropagation();
+    setIsResizing(true);
+    resizeHandleRef.current = direction;
+    dragStartPos.current = { x: e.clientX, y: e.clientY };
+    resizeStartState.current = { position: { ...position }, size: { ...size } };
+  };
+  const handleMouseMove = React.useCallback((e) => {
+    if (isDragging) {
+      const deltaX = e.clientX - dragStartPos.current.x;
+      const deltaY = e.clientY - dragStartPos.current.y;
+      const newPos = {
+        x: dragStartOffset.current.x + deltaX,
+        y: dragStartOffset.current.y + deltaY
+      };
+      setState((prev) => ({ ...prev, position: newPos }));
+      saveState(newPos, state.size);
+    }
+    if (isResizing && resizeHandleRef.current) {
+      const deltaX = e.clientX - dragStartPos.current.x;
+      const deltaY = e.clientY - dragStartPos.current.y;
+      const direction = resizeHandleRef.current;
+      let newPos = { ...resizeStartState.current.position };
+      let newSize = { ...resizeStartState.current.size };
+      if (direction.includes("right")) {
+        newSize.width = Math.max(minWidth, resizeStartState.current.size.width + deltaX);
+      }
+      if (direction.includes("left")) {
+        const newW = Math.max(minWidth, resizeStartState.current.size.width - deltaX);
+        newPos.x = resizeStartState.current.position.x + (resizeStartState.current.size.width - newW);
+        newSize.width = newW;
+      }
+      if (direction.includes("bottom")) {
+        newSize.height = Math.max(minHeight, resizeStartState.current.size.height + deltaY);
+      }
+      if (direction.includes("top")) {
+        const newH = Math.max(minHeight, resizeStartState.current.size.height - deltaY);
+        newPos.y = resizeStartState.current.position.y + (resizeStartState.current.size.height - newH);
+        newSize.height = newH;
+      }
+      setState({ position: newPos, size: newSize });
+      saveState(newPos, newSize);
+    }
+  }, [isDragging, isResizing, state.size, minWidth, minHeight, saveState]);
+  const handleMouseUp = React.useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+    resizeHandleRef.current = null;
+  }, []);
+  React.useEffect(() => {
+    if (!isDragging && !isResizing) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 pointer-events-none z-50 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "pointer-events-auto absolute",
+      style: {
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        width: size.width,
+        height: size.height
+      },
+      role: "dialog",
+      "aria-label": title || "Reproduzindo Mídia",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn(
+        "shadow-2xl rounded-[var(--radius-card)] overflow-hidden border backdrop-blur-sm",
+        colorVariant === "primary" ? "bg-primary border-primary-foreground/20 text-primary-foreground" : "border-border bg-card/95 text-card-foreground"
+      ), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: tooltip.cn(
+                "h-9 backdrop-blur-sm border-b flex items-center justify-between px-2 cursor-move select-none",
+                colorVariant === "primary" ? "bg-primary-foreground/10 border-primary-foreground/10" : "bg-muted/20 border-border/40"
+              ),
+              onMouseDown: handleMouseDown,
+              style: { touchAction: "none", userSelect: "none" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn(
+                  "flex items-center gap-2 text-[10px] uppercase tracking-wider font-bold truncate flex-1",
+                  colorVariant === "primary" ? "text-primary-foreground" : "text-muted-foreground"
+                ), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripHorizontal, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[150px]", children: title || "Reproduzindo Mídia" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  tooltip.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: tooltip.cn(
+                      "h-7 w-7 rounded-full transition-colors",
+                      colorVariant === "primary" ? "text-primary-foreground/70 hover:bg-destructive/20 hover:text-destructive-foreground" : "text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                    ),
+                    onClick: onCloseMedia || onClose,
+                    title: "Fechar",
+                    "aria-label": "Fechar player",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn("flex-1 relative overflow-hidden group", enablePadding && "p-2", colorVariant === "primary" ? "bg-primary" : "bg-card"), children })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute top-0 left-0 w-2 h-full cursor-ew-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "left") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute top-0 right-0 w-2 h-full cursor-ew-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "right") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute top-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "top") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "bottom") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute top-0 left-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "top-left") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute top-0 right-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "top-right") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 left-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "bottom-left") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "bottom-right") })
+      ] })
+    }
+  ) });
+}
+function VideoPlayer({
+  src,
+  poster,
+  title = "Untitled Video",
+  autoPlay = false,
+  enableAutoFloat = true,
+  className
+}) {
+  const videoRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  const [volume, setVolume] = React.useState(1);
+  const [isMuted, setIsMuted] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+  const [isFloating, setIsFloating] = React.useState(false);
+  const [isManualFloating, setIsManualFloating] = React.useState(false);
+  const [showControls, setShowControls] = React.useState(true);
+  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = React.useState(enableAutoFloat);
+  let controlsTimeout;
+  const handleSetFloating = (floating) => {
+    if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
+    }
+    setIsFloating(floating);
+    if (!floating) {
+      setIsManualFloating(false);
+    }
+  };
+  React.useEffect(() => {
+    const video = videoRef.current;
+    if (video) {
+      if (Math.abs(video.currentTime - currentTime) > 0.5) {
+        video.currentTime = currentTime;
+      }
+      if (isPlaying) {
+        const playPromise = video.play();
+        if (playPromise !== void 0) {
+          playPromise.catch((error) => {
+            console.log("Playback interrupted during switch:", error);
+          });
+        }
+      }
+    }
+  }, [isFloating]);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !enableAutoFloatLocal) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        if (isPlaying && !entry.isIntersecting && !isFloating) {
+          if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
+          setIsFloating(true);
+        } else if (entry.isIntersecting && isFloating && !isManualFloating) {
+          if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
+          handleSetFloating(false);
+        }
+      },
+      { threshold: 0.2 }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isPlaying, isFloating, isManualFloating, enableAutoFloatLocal]);
+  React.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const updateTime = () => {
+      setCurrentTime(video.currentTime);
+    };
+    const updateDuration = () => setDuration(video.duration);
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    video.addEventListener("timeupdate", updateTime);
+    video.addEventListener("loadedmetadata", updateDuration);
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.volume = volume;
+    video.muted = isMuted;
+    return () => {
+      video.removeEventListener("timeupdate", updateTime);
+      video.removeEventListener("loadedmetadata", updateDuration);
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+    };
+  }, [isFloating]);
+  const togglePlay = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play();
+      }
+    }
+  };
+  const handleSeek = (value) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = value[0];
+      setCurrentTime(value[0]);
+    }
+  };
+  const handleVolumeChange = (value) => {
+    const newVolume = value[0];
+    if (videoRef.current) {
+      videoRef.current.volume = newVolume;
+      setVolume(newVolume);
+      setIsMuted(newVolume === 0);
+    }
+  };
+  const toggleMute = () => {
+    if (videoRef.current) {
+      const newMutedState = !isMuted;
+      videoRef.current.muted = newMutedState;
+      setIsMuted(newMutedState);
+      if (newMutedState) {
+        setVolume(0);
+      } else {
+        setVolume(1);
+        videoRef.current.volume = 1;
+      }
+    }
+  };
+  const handleMouseMove = () => {
+    setShowControls(true);
+    clearTimeout(controlsTimeout);
+    controlsTimeout = setTimeout(() => {
+      if (isPlaying) setShowControls(false);
+    }, 2500);
+  };
+  const formatTime = (time) => {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FloatingMediaWrapper,
+    {
+      isFloating,
+      setIsFloating: handleSetFloating,
+      onClose: () => handleSetFloating(false),
+      onCloseMedia: () => {
+        setIsFloating(false);
+        setEnableAutoFloatLocal(false);
+      },
+      title,
+      aspectRatio: 16 / 9,
+      className: "w-full h-full",
+      playerId: "video-player",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "relative w-full h-full bg-black group overflow-hidden",
+          onMouseMove: handleMouseMove,
+          onMouseLeave: () => isPlaying && setShowControls(false),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "video",
+              {
+                ref: videoRef,
+                src,
+                poster,
+                className: "w-full h-full object-contain",
+                onClick: togglePlay,
+                autoPlay,
+                title: title || "Vídeo"
+              }
+            ),
+            !isPlaying && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center border border-white/20 shadow-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "w-8 h-8 text-white ml-1", fill: "white" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: tooltip.cn(
+                  "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent pt-12 pb-4 px-4 transition-opacity duration-300",
+                  showControls ? "opacity-100" : "opacity-0"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 group/slider", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    slider.Slider,
+                    {
+                      value: [currentTime],
+                      max: duration || 100,
+                      step: 1,
+                      onValueChange: handleSeek,
+                      className: "cursor-pointer [&_[data-slot=slider-track]]:bg-white/30 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:bg-white [&_[data-slot=slider-thumb]]:border-white",
+                      "aria-label": "Progresso do vídeo"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        tooltip.Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
+                          onClick: togglePlay,
+                          "aria-label": isPlaying ? "Pausar" : "Reproduzir",
+                          children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "w-5 h-5", fill: "currentColor" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "w-5 h-5", fill: "currentColor" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 group/vol", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          tooltip.Button,
+                          {
+                            variant: "ghost",
+                            size: "icon",
+                            className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
+                            onClick: toggleMute,
+                            "aria-label": isMuted || volume === 0 ? "Ativar som" : "Desativar som",
+                            children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-5 h-5" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-0 overflow-hidden group-hover/vol:w-20 transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          slider.Slider,
+                          {
+                            value: [isMuted ? 0 : volume],
+                            max: 1,
+                            step: 0.01,
+                            onValueChange: handleVolumeChange,
+                            className: "w-20 [&_[data-slot=slider-track]]:bg-white/30 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:bg-white [&_[data-slot=slider-thumb]]:border-white",
+                            "aria-label": "Volume"
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-xs font-medium tabular-nums select-none drop-shadow-md", children: [
+                        formatTime(currentTime),
+                        " / ",
+                        formatTime(duration)
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      tooltip.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
+                        onClick: () => {
+                          setEnableAutoFloatLocal(true);
+                          if (!isFloating) setIsManualFloating(true);
+                          handleSetFloating(!isFloating);
+                        },
+                        title: isFloating ? "Restaurar" : "Pop-out Player",
+                        "aria-label": isFloating ? "Restaurar" : "Pop-out Player",
+                        children: isFloating ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PictureInPicture, { className: "w-4 h-4" })
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+function AudioPlayer({
+  src,
+  title = "Áudio",
+  artist,
+  subtitle,
+  autoPlay = false,
+  className,
+  variant = "card",
+  isOpen = true,
+  onClose,
+  duration: initialDuration,
+  currentTime: initialTime = 0,
+  colorVariant = "default",
+  enableAutoFloat = true,
+  onCloseFloating
+}) {
+  const audioRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const { sidebarExpanded, sidebarWidth, assistenteExpanded } = LayoutContext.useLayout();
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [volume, setVolume] = React.useState(0.8);
+  const [isMuted, setIsMuted] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(initialTime);
+  const [duration, setDuration] = React.useState(initialDuration || 0);
+  const [isFloating, setIsFloating] = React.useState(false);
+  const [isManualFloating, setIsManualFloating] = React.useState(false);
+  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = React.useState(enableAutoFloat);
+  const [isVisible, setIsVisible] = React.useState(variant === "card");
+  const [isMobile, setIsMobile] = React.useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = React.useState(1);
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  React.useEffect(() => {
+    if (variant === "bar") {
+      if (isOpen) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 300);
+        return () => clearTimeout(timer);
+      }
+    } else {
+      setIsVisible(true);
+    }
+  }, [isOpen, variant]);
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.volume = volume;
+    audio.muted = isMuted;
+    audio.playbackRate = playbackSpeed;
+  }, [volume, isMuted, playbackSpeed, src]);
+  React.useEffect(() => {
+    if (variant !== "card" || !enableAutoFloatLocal) return;
+    const container = containerRef.current;
+    if (!container) return;
+    if (typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (isPlaying && !entry.isIntersecting && !isFloating) {
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          setIsFloating(true);
+        } else if (entry.isIntersecting && isFloating && !isManualFloating) {
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          handleSetFloating(false);
+        }
+      },
+      { threshold: 0.2 }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isPlaying, isFloating, isManualFloating, variant, enableAutoFloatLocal]);
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      if (Math.abs(audio.currentTime - currentTime) > 0.5) {
+        audio.currentTime = currentTime;
+      }
+      if (isPlaying) {
+        audio.play().catch((err) => console.log("Playback interrupted:", err));
+      }
+    }
+  }, [isFloating, variant]);
+  const handleSetFloating = (floating) => {
+    if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+    setIsFloating(floating);
+    if (!floating) {
+      setIsManualFloating(false);
+    }
+  };
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play().catch((err) => console.log("Playback error:", err));
+      }
+    }
+  };
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+  };
+  const handleSeek = (value) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = value[0];
+      setCurrentTime(value[0]);
+    }
+  };
+  const handleVolumeChange = (value) => {
+    const newVolume = value[0];
+    setVolume(newVolume);
+    setIsMuted(newVolume === 0);
+  };
+  const formatTime = (time) => {
+    if (isNaN(time) || time === Infinity || !isFinite(time)) return "0:00";
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+  };
+  const audioElement = /* @__PURE__ */ jsxRuntime.jsx(
+    "audio",
+    {
+      ref: audioRef,
+      src,
+      autoPlay,
+      className: "hidden",
+      onTimeUpdate: (e) => setCurrentTime(e.currentTarget.currentTime),
+      onLoadedMetadata: (e) => setDuration(e.currentTarget.duration),
+      onPlay: () => setIsPlaying(true),
+      onPause: () => setIsPlaying(false),
+      onEnded: () => setIsPlaying(false)
+    }
+  );
+  const desktopLayout = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("px-6 flex items-center justify-between gap-4", colorVariant === "primary" ? "h-[80px] gap-6" : "h-[80px]"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex flex-col min-w-0 shrink-0 relative z-10", colorVariant === "primary" ? "w-[280px]" : "w-[280px]"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
+        colorVariant === "primary" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: tooltip.cn("truncate", colorVariant === "primary" ? "font-semibold text-base tracking-tight" : "font-medium text-base"), title, children: title })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex items-center gap-1 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-80"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle || artist }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: tooltip.cn("w-3 h-3 cursor-pointer hover:text-foreground ml-1 transition-opacity", colorVariant === "primary" ? "opacity-60 hover:opacity-100" : "opacity-70 hover:opacity-100") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex-1 flex items-center justify-center gap-4 min-w-0 max-w-xl relative z-10", colorVariant === "primary" && "gap-4"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: togglePlay,
+          "aria-label": isPlaying ? "Pausar" : "Reproduzir",
+          className: tooltip.cn("transition-all focus:outline-none shrink-0", colorVariant === "primary" ? "hover:scale-110" : "text-muted-foreground hover:text-foreground hover:scale-110 active:scale-95 transform duration-100"),
+          children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-3 max-w-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tooltip.cn("text-xs font-mono shrink-0 w-10 text-right", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(currentTime) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          slider.Slider,
+          {
+            value: [currentTime],
+            max: duration || 100,
+            onValueChange: handleSeek,
+            className: "cursor-pointer"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tooltip.cn("text-xs font-mono shrink-0 w-10", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(duration) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0 relative z-10", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex items-center gap-2 w-28 mr-2 group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: toggleMute, className: "text-muted-foreground hover:text-foreground", children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          slider.Slider,
+          {
+            value: [isMuted ? 0 : volume * 100],
+            max: 100,
+            onValueChange: (val) => handleVolumeChange([val[0] / 100]),
+            className: "w-full opacity-60 group-hover:opacity-100 transition-opacity"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", onClick: () => {
+              if (audioRef.current) audioRef.current.currentTime = 0;
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: "Recomeçar" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4 fill-current" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: "Informações" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden xl:flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "center", className: "w-32 z-[1001]", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxRuntime.jsxs(
+              dropdownMenu.DropdownMenuItem,
+              {
+                onClick: () => setPlaybackSpeed(speed),
+                className: tooltip.cn("cursor-pointer", playbackSpeed === speed && "bg-accent font-bold"),
+                children: [
+                  speed,
+                  "x"
+                ]
+              },
+              speed
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: "Baixar Áudio" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "w-5 h-5" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-4 h-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "Volume" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(slider.Slider, { value: [isMuted ? 0 : volume * 100], max: 100, onValueChange: (val) => handleVolumeChange([val[0] / 100]) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-1" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
+                if (audioRef.current) audioRef.current.currentTime = 0;
+              }, className: "cursor-pointer py-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                " Recomeçar"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                " Informações"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-1" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xl:hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Velocidade" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setPlaybackSpeed(speed),
+                    className: tooltip.cn(
+                      "px-2 py-0.5 text-[10px] rounded border transition-colors",
+                      playbackSpeed === speed ? "bg-primary text-primary-foreground border-primary" : "bg-transparent border-border hover:bg-accent"
+                    ),
+                    children: [
+                      speed,
+                      "x"
+                    ]
+                  },
+                  speed
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-1" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                " Baixar Áudio"
+              ] })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-8 bg-border mx-1" }),
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Fechar player", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) })
+      ] })
+    ] })
+  ] });
+  const mobileLayout = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex flex-col py-3 px-4 gap-3", colorVariant === "primary" && "py-4 px-5 gap-4"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          colorVariant === "primary" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: tooltip.cn("truncate", colorVariant === "primary" ? "font-semibold text-sm tracking-tight" : "font-medium text-sm"), children: title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn("flex items-center gap-1.5 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-70"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle || artist }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-8 w-8 shrink-0", "aria-label": "Fechar player", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: togglePlay, "aria-label": isPlaying ? "Pausar" : "Reproduzir", className: "shrink-0 transition-transform active:scale-95", children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        slider.Slider,
+        {
+          value: [currentTime],
+          max: duration || 100,
+          onValueChange: handleSeek,
+          className: "cursor-pointer",
+          "aria-label": "Progresso da reprodução"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "h-9 w-9 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: () => {
+            if (audioRef.current) audioRef.current.currentTime = 0;
+          }, children: "Recomeçar" }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { children: "Velocidade (1.0x)" })
+        ] })
+      ] })
+    ] })
+  ] });
+  const desktopLayoutCompact = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex items-center gap-3 w-full", isFloating ? "px-3 py-1 text-foreground" : "px-4 py-3"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      tooltip.Button,
+      {
+        onClick: togglePlay,
+        size: "icon",
+        variant: "outline",
+        className: tooltip.cn(
+          "shrink-0 rounded-full border-border text-foreground hover:bg-accent transition-colors",
+          colorVariant === "primary" && "border-primary-foreground/20 hover:bg-primary-foreground/10 text-primary-foreground",
+          isFloating ? "h-8 w-8" : "h-10 w-10"
+        ),
+        "aria-label": isPlaying ? "Pausar" : "Reproduzir",
+        children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: tooltip.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: tooltip.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current ml-0.5") })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs leading-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tooltip.cn("font-medium truncate", colorVariant === "primary" ? "text-primary-foreground" : "text-foreground"), children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tooltip.cn("font-medium tabular-nums text-[10px] sm:text-xs", colorVariant === "primary" ? "text-primary-foreground/70" : "text-muted-foreground"), children: [
+          formatTime(currentTime),
+          " / ",
+          formatTime(duration)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        slider.Slider,
+        {
+          value: [currentTime],
+          max: duration || 100,
+          step: 1,
+          onValueChange: handleSeek,
+          className: "w-full",
+          "aria-label": "Progresso da reprodução"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: tooltip.cn("rounded-full", colorVariant === "primary" ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground", isFloating ? "h-7 w-7" : "h-8 w-8"), "aria-label": "Mais opções", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: isFloating ? "w-4 h-4" : "w-5 h-5" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-4 h-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "Volume" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              slider.Slider,
+              {
+                value: [isMuted ? 0 : volume * 100],
+                max: 100,
+                onValueChange: (val) => handleVolumeChange([val[0] / 100]),
+                "aria-label": "Volume"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-2" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Velocidade" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setPlaybackSpeed(speed),
+                className: tooltip.cn(
+                  "px-2 py-1 text-[10px] rounded border transition-colors",
+                  playbackSpeed === speed ? "bg-primary text-primary-foreground border-primary" : "bg-transparent border-border hover:bg-accent"
+                ),
+                children: [
+                  speed,
+                  "x"
+                ]
+              },
+              speed
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-2" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
+            if (audioRef.current) audioRef.current.currentTime = 0;
+          }, className: "cursor-pointer py-2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Recomeçar áudio" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Baixar arquivo" })
+          ] })
+        ] })
+      ] }),
+      !isFloating && /* @__PURE__ */ jsxRuntime.jsx(
+        tooltip.Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: tooltip.cn("h-8 w-8", colorVariant === "primary" ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground"),
+          onClick: () => {
+            setEnableAutoFloatLocal(true);
+            setIsManualFloating(true);
+            handleSetFloating(true);
+          },
+          title: "Modo Flutuante",
+          "aria-label": "Abrir modo flutuante",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-4 h-4" })
+        }
+      )
+    ] })
+  ] });
+  if (!isVisible) return null;
+  if (variant === "bar" && isVisible && typeof document !== "undefined") {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: tooltip.cn(
+            "fixed bottom-0 z-[100] border-t transition-all duration-300 ease-in-out",
+            colorVariant === "primary" ? "bg-primary/95 text-primary-foreground border-primary/20 backdrop-blur-sm [&_.text-muted-foreground]:text-primary-foreground/70 [&_.text-foreground]:text-primary-foreground [&_button]:text-primary-foreground [&_[data-slot=slider-track]]:bg-primary-foreground/30 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground [&_[data-slot=slider-thumb]]:bg-primary-foreground" : "bg-card/95 text-card-foreground border-border backdrop-blur-md shadow-[var(--elevation-sm)]",
+            isOpen ? "translate-y-0 opacity-100" : "translate-y-full opacity-0",
+            className
+          ),
+          style: {
+            left: isMobile ? 0 : sidebarExpanded ? sidebarWidth : 80,
+            right: isMobile ? 0 : assistenteExpanded ? 420 : 80
+          },
+          children: [
+            audioElement,
+            !isMobile ? desktopLayout : mobileLayout
+          ]
+        }
+      ),
+      document.body
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className, children: [
+    audioElement,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingMediaWrapper,
+      {
+        isFloating,
+        setIsFloating: handleSetFloating,
+        onClose: () => handleSetFloating(false),
+        onCloseMedia: () => {
+          setIsFloating(false);
+          setEnableAutoFloatLocal(false);
+        },
+        title: "Reproduzindo Mídia",
+        aspectRatio: 320 / 110,
+        minHeight: 110,
+        minWidth: 320,
+        colorVariant,
+        className: "w-full",
+        playerId: "audio-player",
+        enablePadding: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn(
+          "w-full overflow-hidden flex flex-col justify-center",
+          colorVariant === "primary" ? "bg-primary text-primary-foreground [&_[data-slot=slider-track]]:bg-white/20 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:border-white [&_[data-slot=slider-thumb]]:bg-white" : "bg-card text-card-foreground",
+          isFloating ? "h-full bg-transparent" : "border rounded-md shadow-sm"
+        ), children: desktopLayoutCompact })
+      }
+    )
+  ] });
+}
+exports.AudioPlayer = AudioPlayer;
+exports.FloatingMediaWrapper = FloatingMediaWrapper;
+exports.VideoPlayer = VideoPlayer;