xertica-ui 2.5.1 → 2.5.2

package/dist/AudioPlayer-BpRPS4-1.cjs

@@ -1,1277 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactI18next = require("react-i18next");
-const lucideReact = require("lucide-react");
-const slider = require("./slider-DcJharR9.cjs");
-const button = require("./button-Bnv9SvYK.cjs");
-const reactDom = require("react-dom");
-const tooltip = require("./tooltip-CwgSdy3h.cjs");
-const dropdownMenu = require("./dropdown-menu-B_uEXNc4.cjs");
-const useAudioPlayer = require("./use-audio-player-B31J-aqh.cjs");
-function FloatingMediaWrapper({
-  children,
-  isFloating,
-  setIsFloating,
-  title,
-  onClose,
-  onCloseMedia,
-  aspectRatio = 16 / 9,
-  className,
-  minWidth = 320,
-  minHeight = 110,
-  colorVariant = "default",
-  playerId = "default",
-  enablePadding = false
-}) {
-  const { t } = reactI18next.useTranslation();
-  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: button.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: t("media.playingFloating") }),
-            /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", onClick: () => setIsFloating(false), children: t("media.restoreToPage") })
-          ]
-        }
-      ),
-      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: button.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 { t } = reactI18next.useTranslation();
-  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 = typeof window !== "undefined" ? window.localStorage?.getItem(storageKey) : null;
-    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) => {
-      if (typeof window === "undefined") return;
-      const storageKey = `xertica-media-player-${playerId}`;
-      window.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 || t("media.playingMedia"),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: button.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: button.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: button.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 || t("media.playingMedia") })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      button.Button,
-                      {
-                        variant: "ghost",
-                        size: "icon",
-                        className: button.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: t("common.close"),
-                        "aria-label": t("media.closePlayer"),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: button.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,
-  autoPlay = false,
-  enableAutoFloat = true,
-  className
-}) {
-  const { t } = reactI18next.useTranslation();
-  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: title || t("media.untitledVideo"),
-      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 || t("media.video")
-              }
-            ),
-            !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: button.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": t("media.videoProgress")
-                    }
-                  ) }),
-                  /* @__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(
-                        button.Button,
-                        {
-                          variant: "ghost",
-                          size: "icon",
-                          className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
-                          onClick: togglePlay,
-                          "aria-label": isPlaying ? t("media.pause") : t("media.play"),
-                          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(
-                          button.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 ? t("media.unmute") : t("media.mute"),
-                            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": t("media.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(
-                      button.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 ? t("media.restore") : t("media.popOut"),
-                        "aria-label": isFloating ? t("media.restore") : t("media.popOut"),
-                        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,
-  artist,
-  subtitle,
-  autoPlay = false,
-  className,
-  variant = "card",
-  isOpen = true,
-  onClose,
-  duration: initialDuration,
-  currentTime: initialTime = 0,
-  colorVariant = "default",
-  enableAutoFloat = true,
-  onCloseFloating
-}) {
-  const { t } = reactI18next.useTranslation();
-  const {
-    audioRef,
-    containerRef,
-    isPlaying,
-    currentTime,
-    duration,
-    volume,
-    isMuted,
-    playbackSpeed,
-    isFloating,
-    isManualFloating,
-    isVisible,
-    isMobile,
-    enableAutoFloatLocal,
-    sidebarExpanded,
-    sidebarWidth,
-    assistenteExpanded,
-    togglePlay,
-    toggleMute,
-    handleSeek,
-    handleVolumeChange,
-    handleSetFloating,
-    handleEnableManualFloat,
-    setPlaybackSpeed,
-    resetAudio,
-    formatTime,
-    onPlay,
-    onPause,
-    onEnded,
-    onTimeUpdate,
-    onLoadedMetadata
-  } = useAudioPlayer.useAudioPlayer({
-    src,
-    autoPlay,
-    initialTime,
-    initialDuration,
-    variant,
-    isOpen,
-    enableAutoFloat,
-    onCloseFloating
-  });
-  const audioElement = /* @__PURE__ */ jsxRuntime.jsx(
-    "audio",
-    {
-      ref: audioRef,
-      src,
-      autoPlay,
-      className: "hidden",
-      onTimeUpdate,
-      onLoadedMetadata,
-      onPlay,
-      onPause,
-      onEnded
-    }
-  );
-  const desktopLayout = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: button.cn(
-        "px-6 flex items-center justify-between gap-4",
-        colorVariant === "primary" ? "h-[80px] gap-6" : "h-[80px]"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: button.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: button.cn(
-                      "truncate",
-                      colorVariant === "primary" ? "font-semibold text-base tracking-tight" : "font-medium text-base"
-                    ),
-                    title: title || t("media.audioTitle"),
-                    children: title || t("media.audioTitle")
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: button.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: button.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: button.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 ? t("media.pause") : t("media.play"),
-                  className: button.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: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"),
-                      strokeWidth: colorVariant === "primary" ? 1 : 1.5
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
-                    lucideReact.PlayCircle,
-                    {
-                      className: button.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: button.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: button.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",
-                "aria-label": isMuted || volume === 0 ? t("media.unmute") : t("media.mute"),
-                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(
-                  button.Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    className: "rounded-full h-9 w-9",
-                    onClick: resetAudio,
-                    "aria-label": t("media.restart"),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: t("media.restart") })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    className: "text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9",
-                    "aria-label": t("media.audioInfo"),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4 fill-current" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: t("media.info") })
-              ] }) })
-            ] }),
-            /* @__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(
-                  button.Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    className: "rounded-full h-9 w-9",
-                    "aria-label": t("media.selectSpeed"),
-                    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: button.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(
-                  button.Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    className: "rounded-full h-9 w-9",
-                    "aria-label": t("media.downloadAudio"),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: t("media.downloadAudio") })
-              ] }) })
-            ] }),
-            /* @__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(
-                button.Button,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  className: "rounded-full h-9 w-9",
-                  "aria-label": t("media.moreOptions"),
-                  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: resetAudio, className: "cursor-pointer py-2.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
-                    " ",
-                    t("media.restart")
-                  ] }),
-                  /* @__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" }),
-                    " ",
-                    t("media.info")
-                  ] }),
-                  /* @__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: t("media.speed") })
-                    ] }),
-                    /* @__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: button.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" }),
-                    " ",
-                    t("media.downloadAudio")
-                  ] })
-                ] })
-              ] })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-8 bg-border mx-1" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                onClick: onClose,
-                variant: "ghost",
-                size: "icon",
-                className: "rounded-full h-9 w-9",
-                "aria-label": t("media.closePlayer"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" })
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
-  const mobileLayout = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: button.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: button.cn(
-                    "truncate",
-                    colorVariant === "primary" ? "font-semibold text-sm tracking-tight" : "font-medium text-sm"
-                  ),
-                  children: title
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: button.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(
-            button.Button,
-            {
-              onClick: onClose,
-              variant: "ghost",
-              size: "icon",
-              className: "rounded-full h-8 w-8 shrink-0",
-              "aria-label": t("media.closePlayer"),
-              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 ? t("media.pause") : t("media.play"),
-              className: "shrink-0 transition-transform active:scale-95",
-              children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.PauseCircle,
-                {
-                  className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"),
-                  strokeWidth: colorVariant === "primary" ? 1 : 1.5
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.PlayCircle,
-                {
-                  className: button.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": t("media.playbackProgress")
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-9 w-9 rounded-full",
-                "aria-label": t("media.moreOptions"),
-                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: resetAudio, children: t("media.restart") }),
-              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { children: t("media.speedLabel", { speed: playbackSpeed }) })
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
-  const desktopLayoutCompact = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: button.cn(
-        "flex items-center gap-3 w-full",
-        isFloating ? "px-3 py-1 text-foreground" : "px-4 py-3"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          button.Button,
-          {
-            onClick: togglePlay,
-            size: "icon",
-            variant: "outline",
-            className: button.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 ? t("media.pause") : t("media.play"),
-            children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: button.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: button.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: button.cn(
-                  "font-medium truncate",
-                  colorVariant === "primary" ? "text-primary-foreground" : "text-foreground"
-                ),
-                children: title
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: button.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": t("media.playbackProgress")
-            }
-          )
-        ] }),
-        /* @__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(
-              button.Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: button.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: t("media.speed") })
-                ] }),
-                /* @__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: button.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: resetAudio, 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: t("media.restart") })
-              ] }),
-              /* @__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: t("media.downloadFile") })
-              ] })
-            ] })
-          ] }),
-          !isFloating && /* @__PURE__ */ jsxRuntime.jsx(
-            button.Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: button.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: handleEnableManualFloat,
-              title: t("media.floatingMode"),
-              "aria-label": t("media.openFloatingMode"),
-              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: button.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: () => {
-          handleSetFloating(false);
-        },
-        title: t("media.playingMedia"),
-        aspectRatio: 320 / 110,
-        minHeight: 110,
-        minWidth: 320,
-        colorVariant,
-        className: "w-full",
-        playerId: "audio-player",
-        enablePadding: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: button.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;