@djangocfg/ui-tools 2.1.110 → 2.1.112

package/dist/chunk-EVGWYASL.cjs

@@ -0,0 +1,1528 @@
+'use strict';
+
+var chunkF2N7P5XU_cjs = require('./chunk-F2N7P5XU.cjs');
+var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var i18n = require('@djangocfg/i18n');
+var jsxRuntime = require('react/jsx-runtime');
+var lib = require('@djangocfg/ui-core/lib');
+var uiCore = require('@djangocfg/ui-core');
+
+function useHybridAudio(options) {
+  const {
+    src,
+    autoPlay = false,
+    initialVolume = 1,
+    loop = false,
+    crossOrigin = "anonymous",
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onError,
+    onReady
+  } = options;
+  const audioRef = react.useRef(null);
+  const audioContextRef = react.useRef(null);
+  const sourceNodeRef = react.useRef(null);
+  const analyserRef = react.useRef(null);
+  const connectedElementRef = react.useRef(null);
+  const [state, setState] = react.useState({
+    isReady: false,
+    isPlaying: false,
+    currentTime: 0,
+    duration: 0,
+    volume: initialVolume,
+    isMuted: false,
+    isLooping: loop,
+    buffered: null,
+    error: null
+  });
+  const initWebAudio = react.useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (connectedElementRef.current === audio && audioContextRef.current) {
+      return;
+    }
+    try {
+      if (!audioContextRef.current) {
+        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+        audioContextRef.current = new AudioContextClass();
+      }
+      const ctx = audioContextRef.current;
+      if (sourceNodeRef.current) {
+        try {
+          sourceNodeRef.current.disconnect();
+        } catch {
+        }
+      }
+      const source = ctx.createMediaElementSource(audio);
+      sourceNodeRef.current = source;
+      const analyser = ctx.createAnalyser();
+      analyser.fftSize = 256;
+      analyser.smoothingTimeConstant = 0.85;
+      analyserRef.current = analyser;
+      source.connect(ctx.destination);
+      source.connect(analyser);
+      connectedElementRef.current = audio;
+    } catch (error) {
+      console.warn("[useHybridAudio] Web Audio init failed:", error);
+    }
+  }, []);
+  const resumeAudioContext = react.useCallback(async () => {
+    const ctx = audioContextRef.current;
+    if (ctx && ctx.state === "suspended") {
+      await ctx.resume();
+    }
+  }, []);
+  const play = react.useCallback(async () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    try {
+      initWebAudio();
+      await resumeAudioContext();
+      await audio.play();
+    } catch (error) {
+      console.error("[useHybridAudio] Play failed:", error);
+      onError?.(error);
+    }
+  }, [initWebAudio, resumeAudioContext, onError]);
+  const pause = react.useCallback(() => {
+    audioRef.current?.pause();
+  }, []);
+  const togglePlay = react.useCallback(() => {
+    if (state.isPlaying) {
+      pause();
+    } else {
+      play();
+    }
+  }, [state.isPlaying, play, pause]);
+  const seek = react.useCallback(
+    (time) => {
+      const audio = audioRef.current;
+      if (audio && isFinite(time)) {
+        audio.currentTime = Math.max(0, Math.min(time, state.duration || audio.duration || 0));
+      }
+    },
+    [state.duration]
+  );
+  const seekTo = react.useCallback(
+    (progress) => {
+      const duration = state.duration || audioRef.current?.duration || 0;
+      seek(duration * Math.max(0, Math.min(1, progress)));
+    },
+    [state.duration, seek]
+  );
+  const skip = react.useCallback(
+    (seconds) => {
+      seek(state.currentTime + seconds);
+    },
+    [state.currentTime, seek]
+  );
+  const setVolume = react.useCallback((vol) => {
+    const audio = audioRef.current;
+    if (audio) {
+      const clampedVol = Math.max(0, Math.min(1, vol));
+      audio.volume = clampedVol;
+      setState((prev) => ({ ...prev, volume: clampedVol }));
+    }
+  }, []);
+  const toggleMute = react.useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.muted = !audio.muted;
+      setState((prev) => ({ ...prev, isMuted: audio.muted }));
+    }
+  }, []);
+  const toggleLoop = react.useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.loop = !audio.loop;
+      setState((prev) => ({ ...prev, isLooping: audio.loop }));
+    }
+  }, []);
+  const setLoop = react.useCallback((enabled) => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.loop = enabled;
+      setState((prev) => ({ ...prev, isLooping: enabled }));
+    }
+  }, []);
+  const restart = react.useCallback(() => {
+    seek(0);
+    play();
+  }, [seek, play]);
+  const controls = {
+    play,
+    pause,
+    togglePlay,
+    seek,
+    seekTo,
+    skip,
+    setVolume,
+    toggleMute,
+    toggleLoop,
+    setLoop,
+    restart
+  };
+  react.useEffect(() => {
+    const audio = document.createElement("audio");
+    audio.preload = "metadata";
+    audio.crossOrigin = crossOrigin;
+    audio.volume = initialVolume;
+    audio.loop = loop;
+    audioRef.current = audio;
+    return () => {
+      audio.pause();
+      audio.src = "";
+      if (audioContextRef.current) {
+        audioContextRef.current.close().catch(() => {
+        });
+      }
+    };
+  }, []);
+  react.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const handlers = {
+      loadedmetadata: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({
+          ...prev,
+          duration: audio.duration,
+          isReady: true
+        }));
+        onReady?.();
+      }, "loadedmetadata"),
+      canplay: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({ ...prev, isReady: true }));
+        if (autoPlay) {
+          play();
+        }
+      }, "canplay"),
+      play: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({ ...prev, isPlaying: true }));
+        onPlay?.();
+      }, "play"),
+      pause: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({ ...prev, isPlaying: false }));
+        onPause?.();
+      }, "pause"),
+      ended: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({ ...prev, isPlaying: false }));
+        onEnded?.();
+      }, "ended"),
+      timeupdate: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({ ...prev, currentTime: audio.currentTime }));
+        onTimeUpdate?.(audio.currentTime);
+      }, "timeupdate"),
+      progress: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({ ...prev, buffered: audio.buffered }));
+      }, "progress"),
+      error: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        const error = new Error(audio.error?.message || "Audio error");
+        setState((prev) => ({ ...prev, error }));
+        onError?.(error);
+      }, "error"),
+      volumechange: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        setState((prev) => ({
+          ...prev,
+          volume: audio.volume,
+          isMuted: audio.muted
+        }));
+      }, "volumechange")
+    };
+    Object.entries(handlers).forEach(([event, handler]) => {
+      audio.addEventListener(event, handler);
+    });
+    return () => {
+      Object.entries(handlers).forEach(([event, handler]) => {
+        audio.removeEventListener(event, handler);
+      });
+    };
+  }, [autoPlay, onPlay, onPause, onEnded, onTimeUpdate, onError, onReady, play]);
+  react.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio || !src) return;
+    setState((prev) => ({
+      ...prev,
+      isReady: false,
+      currentTime: 0,
+      duration: 0,
+      error: null
+    }));
+    audio.src = src;
+    audio.load();
+  }, [src]);
+  return {
+    audioRef,
+    state,
+    controls,
+    webAudio: {
+      context: audioContextRef.current,
+      analyser: analyserRef.current,
+      sourceNode: sourceNodeRef.current
+    }
+  };
+}
+chunkWGEGR3DF_cjs.__name(useHybridAudio, "useHybridAudio");
+function useHybridAudioAnalysis(analyser, isPlaying) {
+  const [levels, setLevels] = react.useState({ bass: 0, mid: 0, high: 0, overall: 0 });
+  const animationRef = react.useRef(null);
+  const dataArrayRef = react.useRef(null);
+  const cleanup = react.useCallback(() => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    if (analyser && !dataArrayRef.current) {
+      dataArrayRef.current = new Uint8Array(analyser.frequencyBinCount);
+    }
+  }, [analyser]);
+  react.useEffect(() => {
+    if (!isPlaying || !analyser || !dataArrayRef.current) {
+      cleanup();
+      setLevels((prev) => ({
+        bass: prev.bass * 0.95 < 0.01 ? 0 : prev.bass * 0.95,
+        mid: prev.mid * 0.95 < 0.01 ? 0 : prev.mid * 0.95,
+        high: prev.high * 0.95 < 0.01 ? 0 : prev.high * 0.95,
+        overall: prev.overall * 0.95 < 0.01 ? 0 : prev.overall * 0.95
+      }));
+      return;
+    }
+    const dataArray = dataArrayRef.current;
+    const animate = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+      analyser.getByteFrequencyData(dataArray);
+      const binCount = dataArray.length;
+      const bassEnd = Math.floor(binCount * 0.15);
+      let bassSum = 0;
+      for (let i = 0; i < bassEnd; i++) bassSum += dataArray[i];
+      const bass = bassSum / bassEnd / 255;
+      const midStart = bassEnd;
+      const midEnd = Math.floor(binCount * 0.5);
+      let midSum = 0;
+      for (let i = midStart; i < midEnd; i++) midSum += dataArray[i];
+      const mid = midSum / (midEnd - midStart) / 255;
+      const highStart = midEnd;
+      let highSum = 0;
+      for (let i = highStart; i < binCount; i++) highSum += dataArray[i];
+      const high = highSum / (binCount - highStart) / 255;
+      let totalSum = 0;
+      for (let i = 0; i < binCount; i++) totalSum += dataArray[i];
+      const overall = totalSum / binCount / 255;
+      setLevels((prev) => ({
+        bass: prev.bass * 0.7 + bass * 0.3,
+        mid: prev.mid * 0.7 + mid * 0.3,
+        high: prev.high * 0.7 + high * 0.3,
+        overall: prev.overall * 0.7 + overall * 0.3
+      }));
+      animationRef.current = requestAnimationFrame(animate);
+    }, "animate");
+    animationRef.current = requestAnimationFrame(animate);
+    return cleanup;
+  }, [analyser, isPlaying, cleanup]);
+  return levels;
+}
+chunkWGEGR3DF_cjs.__name(useHybridAudioAnalysis, "useHybridAudioAnalysis");
+var STORAGE_KEY = "audio-player-settings";
+var DEFAULT_SETTINGS = {
+  enabled: true,
+  variant: "spotlight",
+  intensity: "medium",
+  colorScheme: "primary",
+  volume: 1,
+  isLooping: false
+};
+var VARIANTS = ["spotlight", "glow", "orbs", "mesh", "none"];
+var INTENSITIES = ["subtle", "medium", "strong"];
+var COLOR_SCHEMES = ["primary", "vibrant", "cool", "warm"];
+var VisualizationContext = react.createContext(null);
+function VisualizationProvider({ children }) {
+  const value = useVisualizationState();
+  return /* @__PURE__ */ jsxRuntime.jsx(VisualizationContext.Provider, { value, children });
+}
+chunkWGEGR3DF_cjs.__name(VisualizationProvider, "VisualizationProvider");
+function useVisualizationState() {
+  const [settings, setSettings] = chunkF2N7P5XU_cjs.useLocalStorage(
+    STORAGE_KEY,
+    DEFAULT_SETTINGS
+  );
+  const toggle = react.useCallback(() => {
+    setSettings((prev) => ({ ...prev, enabled: !prev.enabled }));
+  }, [setSettings]);
+  const setSetting = react.useCallback(
+    (key, value) => {
+      setSettings((prev) => ({ ...prev, [key]: value }));
+    },
+    [setSettings]
+  );
+  const nextVariant = react.useCallback(() => {
+    setSettings((prev) => {
+      const currentIndex = VARIANTS.indexOf(prev.variant);
+      const nextIndex = (currentIndex + 1) % VARIANTS.length;
+      return { ...prev, variant: VARIANTS[nextIndex] };
+    });
+  }, [setSettings]);
+  const nextIntensity = react.useCallback(() => {
+    setSettings((prev) => {
+      const currentIndex = INTENSITIES.indexOf(prev.intensity);
+      const nextIndex = (currentIndex + 1) % INTENSITIES.length;
+      return { ...prev, intensity: INTENSITIES[nextIndex] };
+    });
+  }, [setSettings]);
+  const nextColorScheme = react.useCallback(() => {
+    setSettings((prev) => {
+      const currentIndex = COLOR_SCHEMES.indexOf(prev.colorScheme);
+      const nextIndex = (currentIndex + 1) % COLOR_SCHEMES.length;
+      return { ...prev, colorScheme: COLOR_SCHEMES[nextIndex] };
+    });
+  }, [setSettings]);
+  const reset = react.useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+  }, [setSettings]);
+  return react.useMemo(
+    () => ({
+      settings,
+      toggle,
+      setSetting,
+      nextVariant,
+      nextIntensity,
+      nextColorScheme,
+      reset
+    }),
+    [settings, toggle, setSetting, nextVariant, nextIntensity, nextColorScheme, reset]
+  );
+}
+chunkWGEGR3DF_cjs.__name(useVisualizationState, "useVisualizationState");
+function useVisualization() {
+  const context = react.useContext(VisualizationContext);
+  const fallbackState = useVisualizationState();
+  return context ?? fallbackState;
+}
+chunkWGEGR3DF_cjs.__name(useVisualization, "useVisualization");
+var useAudioVisualization = useVisualization;
+var VARIANT_INFO = {
+  spotlight: { label: "Spotlight", icon: "\u{1F4AB}" },
+  glow: { label: "Glow", icon: "\u2728" },
+  orbs: { label: "Orbs", icon: "\u{1F52E}" },
+  mesh: { label: "Mesh", icon: "\u{1F308}" },
+  none: { label: "Off", icon: "\u2B55" }
+};
+var INTENSITY_INFO = {
+  subtle: { label: "Subtle" },
+  medium: { label: "Medium" },
+  strong: { label: "Strong" }
+};
+var COLOR_SCHEME_INFO = {
+  primary: { label: "Primary", preview: "\u{1F535}" },
+  vibrant: { label: "Vibrant", preview: "\u{1F308}" },
+  cool: { label: "Cool", preview: "\u{1F499}" },
+  warm: { label: "Warm", preview: "\u{1F525}" }
+};
+var HybridAudioContext = react.createContext(null);
+function HybridAudioProvider({ children, ...options }) {
+  const { settings: savedSettings, setSetting } = useVisualization();
+  const effectiveOptions = {
+    ...options,
+    initialVolume: savedSettings.volume,
+    loop: savedSettings.isLooping
+  };
+  const { audioRef, state, controls, webAudio } = useHybridAudio(effectiveOptions);
+  const hasAppliedInitialSettings = react.useRef(false);
+  react.useEffect(() => {
+    if (!state.isReady || hasAppliedInitialSettings.current) return;
+    hasAppliedInitialSettings.current = true;
+    controls.setVolume(savedSettings.volume);
+    controls.setLoop(savedSettings.isLooping);
+  }, [state.isReady, savedSettings, controls]);
+  react.useEffect(() => {
+    if (!state.isReady) return;
+    if (state.volume !== savedSettings.volume) {
+      setSetting("volume", state.volume);
+    }
+    if (state.isLooping !== savedSettings.isLooping) {
+      setSetting("isLooping", state.isLooping);
+    }
+  }, [state.isReady, state.volume, state.isLooping, savedSettings, setSetting]);
+  const audioLevels = useHybridAudioAnalysis(webAudio.analyser, state.isPlaying);
+  const value = react.useMemo(
+    () => ({
+      state,
+      controls,
+      webAudio,
+      audioLevels,
+      audioRef
+    }),
+    [state, controls, webAudio, audioLevels, audioRef]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HybridAudioContext.Provider, { value, children });
+}
+chunkWGEGR3DF_cjs.__name(HybridAudioProvider, "HybridAudioProvider");
+function useHybridAudioContext() {
+  const context = react.useContext(HybridAudioContext);
+  if (!context) {
+    throw new Error("useHybridAudioContext must be used within HybridAudioProvider");
+  }
+  return context;
+}
+chunkWGEGR3DF_cjs.__name(useHybridAudioContext, "useHybridAudioContext");
+function useHybridAudioState() {
+  const { state } = useHybridAudioContext();
+  return state;
+}
+chunkWGEGR3DF_cjs.__name(useHybridAudioState, "useHybridAudioState");
+function useHybridAudioControls() {
+  const { controls } = useHybridAudioContext();
+  return controls;
+}
+chunkWGEGR3DF_cjs.__name(useHybridAudioControls, "useHybridAudioControls");
+function useHybridAudioLevels() {
+  const { audioLevels } = useHybridAudioContext();
+  return audioLevels;
+}
+chunkWGEGR3DF_cjs.__name(useHybridAudioLevels, "useHybridAudioLevels");
+function useHybridWebAudio() {
+  const { webAudio } = useHybridAudioContext();
+  return webAudio;
+}
+chunkWGEGR3DF_cjs.__name(useHybridWebAudio, "useHybridWebAudio");
+var HybridWaveform = react.memo(/* @__PURE__ */ chunkWGEGR3DF_cjs.__name(function HybridWaveform2({
+  mode = "frequency",
+  height = 64,
+  barWidth = 3,
+  barGap = 2,
+  barRadius = 2,
+  progressColor = "hsl(217 91% 60%)",
+  waveColor = "hsl(217 91% 60% / 0.3)",
+  bufferedColor = "hsl(217 91% 60% / 0.15)",
+  className,
+  onSeek
+}) {
+  const canvasRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const animationRef = react.useRef(null);
+  const { state, controls, webAudio } = useHybridAudioContext();
+  const handleClick = react.useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      if (!canvas || !state.duration) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const progress = x / rect.width;
+      const time = state.duration * progress;
+      controls.seek(time);
+      onSeek?.(time);
+    },
+    [state.duration, controls, onSeek]
+  );
+  const renderFrequency = react.useCallback(() => {
+    const canvas = canvasRef.current;
+    const analyser = webAudio.analyser;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height: canvasHeight } = canvas;
+    const dpr = window.devicePixelRatio || 1;
+    const displayWidth = width / dpr;
+    let dataArray = null;
+    if (analyser) {
+      dataArray = new Uint8Array(analyser.frequencyBinCount);
+      analyser.getByteFrequencyData(dataArray);
+    }
+    ctx.clearRect(0, 0, width, canvasHeight);
+    if (state.buffered && state.duration > 0) {
+      ctx.fillStyle = bufferedColor;
+      for (let i = 0; i < state.buffered.length; i++) {
+        const start = state.buffered.start(i) / state.duration * width;
+        const end = state.buffered.end(i) / state.duration * width;
+        ctx.fillRect(start, canvasHeight - 3 * dpr, end - start, 3 * dpr);
+      }
+    }
+    const barCount = Math.floor(displayWidth / (barWidth + barGap));
+    const progress = state.duration > 0 ? state.currentTime / state.duration : 0;
+    const progressX = width * progress;
+    for (let i = 0; i < barCount; i++) {
+      let barHeight;
+      if (dataArray && state.isPlaying) {
+        const step = Math.floor(dataArray.length / barCount);
+        const value = dataArray[i * step] / 255;
+        barHeight = Math.max(4 * dpr, value * (canvasHeight - 6 * dpr) * 0.9);
+      } else {
+        barHeight = 8 * dpr;
+      }
+      const x = i * (barWidth + barGap) * dpr;
+      const y = (canvasHeight - barHeight) / 2;
+      ctx.fillStyle = x < progressX ? progressColor : waveColor;
+      const radius = barRadius * dpr;
+      const rectWidth = barWidth * dpr;
+      ctx.beginPath();
+      ctx.roundRect(x, y, rectWidth, barHeight, radius);
+      ctx.fill();
+    }
+    if (state.isPlaying) {
+      animationRef.current = requestAnimationFrame(renderFrequency);
+    }
+  }, [
+    webAudio.analyser,
+    state.buffered,
+    state.duration,
+    state.currentTime,
+    state.isPlaying,
+    barWidth,
+    barGap,
+    barRadius,
+    progressColor,
+    waveColor,
+    bufferedColor
+  ]);
+  const renderStatic = react.useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height: canvasHeight } = canvas;
+    const dpr = window.devicePixelRatio || 1;
+    ctx.clearRect(0, 0, width, canvasHeight);
+    if (state.buffered && state.duration > 0) {
+      ctx.fillStyle = bufferedColor;
+      for (let i = 0; i < state.buffered.length; i++) {
+        const start = state.buffered.start(i) / state.duration * width;
+        const end = state.buffered.end(i) / state.duration * width;
+        ctx.fillRect(start, 0, end - start, canvasHeight);
+      }
+    }
+    const progress = state.duration > 0 ? state.currentTime / state.duration : 0;
+    const progressWidth = width * progress;
+    ctx.fillStyle = waveColor;
+    ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, width, 4 * dpr);
+    ctx.fillStyle = progressColor;
+    ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, progressWidth, 4 * dpr);
+    if (progress > 0) {
+      ctx.beginPath();
+      ctx.arc(progressWidth, canvasHeight / 2, 6 * dpr, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }, [state.buffered, state.duration, state.currentTime, progressColor, waveColor, bufferedColor]);
+  react.useEffect(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const dpr = window.devicePixelRatio || 1;
+      const displayWidth = entry.contentRect.width;
+      const displayHeight = height;
+      canvas.width = displayWidth * dpr;
+      canvas.height = displayHeight * dpr;
+      canvas.style.width = `${displayWidth}px`;
+      canvas.style.height = `${displayHeight}px`;
+      if (mode === "frequency") {
+        renderFrequency();
+      } else {
+        renderStatic();
+      }
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [height, mode, renderFrequency, renderStatic]);
+  react.useEffect(() => {
+    if (mode === "frequency") {
+      renderFrequency();
+    }
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [mode, renderFrequency]);
+  react.useEffect(() => {
+    if (mode === "static") {
+      renderStatic();
+    }
+  }, [mode, state.currentTime, renderStatic]);
+  react.useEffect(() => {
+    if (mode === "frequency" && !state.isPlaying) {
+      renderFrequency();
+    }
+  }, [mode, state.isPlaying, renderFrequency]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: lib.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      onClick: handleClick,
+      className: "cursor-pointer",
+      style: { width: "100%", height }
+    }
+  ) });
+}, "HybridWaveform"));
+
+// src/tools/AudioPlayer/utils/formatTime.ts
+function formatTime(seconds) {
+  if (!seconds || !isFinite(seconds) || seconds < 0) return "0:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+chunkWGEGR3DF_cjs.__name(formatTime, "formatTime");
+lib.createMediaLogger("AudioPlayer");
+var HybridAudioPlayer = react.memo(/* @__PURE__ */ chunkWGEGR3DF_cjs.__name(function HybridAudioPlayer2({
+  showControls = true,
+  showWaveform = true,
+  waveformMode = "frequency",
+  waveformHeight = 64,
+  showTimer = true,
+  showVolume = true,
+  showLoop = true,
+  className,
+  style
+}) {
+  const t = i18n.useTypedT();
+  const { state, controls } = useHybridAudioContext();
+  const labels = react.useMemo(() => ({
+    restart: t("tools.audio.restart"),
+    back: t("tools.audio.back"),
+    forward: t("tools.audio.forward"),
+    volume: t("tools.audio.volume")
+  }), [t]);
+  const isLoading = !state.isReady;
+  const handleVolumeChange = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((value) => {
+    controls.setVolume(value[0] / 100);
+  }, "handleVolumeChange");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkF2N7P5XU_cjs.cn("flex flex-col gap-3 p-4 rounded-lg bg-card border", className),
+      style,
+      children: [
+        showWaveform && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HybridWaveform,
+            {
+              mode: waveformMode,
+              height: waveformHeight,
+              className: chunkF2N7P5XU_cjs.cn(isLoading && "opacity-50")
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-6 w-6 animate-spin text-primary" }) })
+        ] }),
+        showTimer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-muted-foreground tabular-nums px-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(state.currentTime) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(state.duration) })
+        ] }),
+        showControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkF2N7P5XU_cjs.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9",
+              onClick: controls.restart,
+              disabled: !state.isReady,
+              title: labels.restart,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkF2N7P5XU_cjs.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9",
+              onClick: () => controls.skip(-5),
+              disabled: !state.isReady,
+              title: labels.back,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipBack, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkF2N7P5XU_cjs.Button,
+            {
+              variant: "default",
+              size: "icon",
+              className: "h-12 w-12 rounded-full",
+              onClick: controls.togglePlay,
+              disabled: !state.isReady && !isLoading,
+              title: state.isPlaying ? "Pause" : "Play",
+              children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin" }) : state.isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "h-5 w-5 ml-0.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkF2N7P5XU_cjs.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9",
+              onClick: () => controls.skip(5),
+              disabled: !state.isReady,
+              title: labels.forward,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipForward, { className: "h-4 w-4" })
+            }
+          ),
+          showVolume && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkF2N7P5XU_cjs.Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-9 w-9",
+                onClick: controls.toggleMute,
+                title: state.isMuted ? "Unmute" : "Mute",
+                children: state.isMuted || state.volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkF2N7P5XU_cjs.Slider,
+              {
+                value: [state.isMuted ? 0 : state.volume * 100],
+                max: 100,
+                step: 1,
+                onValueChange: handleVolumeChange,
+                className: "w-20",
+                "aria-label": labels.volume
+              }
+            )
+          ] }),
+          showLoop && /* @__PURE__ */ jsxRuntime.jsx(
+            chunkF2N7P5XU_cjs.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: chunkF2N7P5XU_cjs.cn("h-9 w-9", state.isLooping && "text-primary"),
+              onClick: controls.toggleLoop,
+              disabled: !state.isReady,
+              title: state.isLooping ? "Disable loop" : "Enable loop",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Repeat, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, "HybridAudioPlayer"));
+
+// src/tools/AudioPlayer/effects/index.ts
+var INTENSITY_CONFIG = {
+  subtle: { opacity: 0.3, scale: 0.02, blur: "blur-2xl" },
+  medium: { opacity: 0.5, scale: 0.04, blur: "blur-xl" },
+  strong: { opacity: 0.7, scale: 0.06, blur: "blur-lg" }
+};
+var COLOR_SCHEMES2 = {
+  primary: ["217 91% 60%"],
+  vibrant: ["217 91% 60%", "142 76% 36%", "262 83% 58%", "25 95% 53%"],
+  cool: ["217 91% 60%", "262 83% 58%", "199 89% 48%"],
+  warm: ["25 95% 53%", "0 84% 60%", "38 92% 50%"]
+};
+var DEFAULT_GLOW_COLORS = [
+  "217 91% 60%",
+  // Blue
+  "262 83% 58%",
+  // Purple
+  "330 81% 60%",
+  // Pink
+  "25 95% 53%"
+  // Orange
+];
+function getEffectConfig(intensity) {
+  return INTENSITY_CONFIG[intensity];
+}
+chunkWGEGR3DF_cjs.__name(getEffectConfig, "getEffectConfig");
+function getColors(colorScheme) {
+  return COLOR_SCHEMES2[colorScheme];
+}
+chunkWGEGR3DF_cjs.__name(getColors, "getColors");
+function prepareEffectColors(colorScheme, levels) {
+  const baseColors = COLOR_SCHEMES2[colorScheme];
+  const colors = baseColors.length > 1 ? baseColors : DEFAULT_GLOW_COLORS;
+  const hueShift = Math.floor(
+    levels.bass * 30 + levels.mid * 20 + levels.high * 10
+  );
+  return { colors, hueShift };
+}
+chunkWGEGR3DF_cjs.__name(prepareEffectColors, "prepareEffectColors");
+function calculateGlowLayers(levels, config, colors) {
+  const { bass, mid, high } = levels;
+  return [
+    // Layer 1: Bass glow - bottom
+    {
+      inset: 60 + bass * 90,
+      opacity: 1,
+      scale: 1 + bass * 0.5,
+      background: `radial-gradient(ellipse 80% 60% at 50% 100%, hsl(${colors[0]} / ${0.4 + bass * 0.4}) 0%, transparent 70%)`,
+      blur: "blur-3xl"
+    },
+    // Layer 2: Mid glow - top
+    {
+      inset: 45 + mid * 75,
+      opacity: 1,
+      scale: 1 + mid * 0.4,
+      background: `radial-gradient(ellipse 70% 50% at 50% 0%, hsl(${colors[1] || colors[0]} / ${0.3 + mid * 0.5}) 0%, transparent 70%)`,
+      blur: "blur-2xl"
+    },
+    // Layer 3: High glow - left
+    {
+      inset: 30 + high * 60,
+      opacity: 1,
+      scale: 1 + high * 0.3,
+      background: `radial-gradient(ellipse 50% 80% at 0% 50%, hsl(${colors[2] || colors[0]} / ${0.3 + high * 0.4}) 0%, transparent 60%)`,
+      blur: "blur-2xl"
+    },
+    // Layer 4: High glow - right
+    {
+      inset: 30 + high * 60,
+      opacity: 1,
+      scale: 1 + high * 0.3,
+      background: `radial-gradient(ellipse 50% 80% at 100% 50%, hsl(${colors[3] || colors[0]} / ${0.3 + high * 0.4}) 0%, transparent 60%)`,
+      blur: "blur-2xl"
+    },
+    // Layer 5: Center pulsing glow
+    {
+      inset: 24 + bass * 45,
+      opacity: 1,
+      scale: 1 + bass * 0.2,
+      background: `radial-gradient(circle at 50% 50%, hsl(${colors[0]} / ${0.2 + bass * 0.3}) 0%, hsl(${colors[1] || colors[0]} / ${0.1 + mid * 0.2}) 40%, transparent 70%)`,
+      blur: "blur-xl",
+      animation: "glow-breathe 2s ease-in-out infinite"
+    }
+  ];
+}
+chunkWGEGR3DF_cjs.__name(calculateGlowLayers, "calculateGlowLayers");
+function calculateOrbs(levels, config, colors, baseSize = 50) {
+  const { bass, mid, high, overall } = levels;
+  const size = baseSize * 3;
+  const bassMove = bass * 30;
+  const midMove = mid * 25;
+  const highMove = high * 20;
+  return [
+    // Bass orb - top left, big pulses
+    {
+      x: -40 + bassMove,
+      y: -40 - bassMove * 0.5,
+      size: size * (1 + bass * 1.2),
+      color: colors[0],
+      opacity: 0.5 + bass * 0.5,
+      scale: 1 + bass * 0.6
+    },
+    // Mid orb - top right
+    {
+      x: 130 - midMove * 0.5,
+      y: -30 + midMove,
+      size: size * (0.9 + mid * 1),
+      color: colors[1] || colors[0],
+      opacity: 0.5 + mid * 0.5,
+      scale: 1 + mid * 0.5
+    },
+    // High orb - bottom right
+    {
+      x: 140 + highMove * 0.3,
+      y: 120 - highMove,
+      size: size * (0.8 + high * 0.8),
+      color: colors[2] || colors[0],
+      opacity: 0.4 + high * 0.6,
+      scale: 1 + high * 0.45
+    },
+    // Mid orb 2 - bottom left
+    {
+      x: -30 - midMove * 0.4,
+      y: 130 + midMove * 0.3,
+      size: size * (0.9 + mid * 0.9),
+      color: colors[3] || colors[0],
+      opacity: 0.45 + mid * 0.55,
+      scale: 1 + mid * 0.5
+    },
+    // Center overall orb
+    {
+      x: 50,
+      y: 50,
+      size: size * (0.6 + overall * 1.5),
+      color: colors[0],
+      opacity: 0.3 + overall * 0.5,
+      scale: 1 + overall * 0.7
+    }
+  ];
+}
+chunkWGEGR3DF_cjs.__name(calculateOrbs, "calculateOrbs");
+function calculateMeshGradients(levels, config, colors) {
+  const { bass, mid, high, overall } = levels;
+  const bassOffset = bass * 40;
+  const midOffset = mid * 30;
+  const highOffset = high * 25;
+  return [
+    // Large bass blob - top right, pulses hard
+    {
+      width: `${200 + bass * 150}%`,
+      height: `${200 + bass * 150}%`,
+      top: `${ -80 + bassOffset}%`,
+      right: `${ -80 - bassOffset}%`,
+      color: colors[0],
+      opacity: 0.4 + bass * 0.6,
+      scale: 1 + bass * 0.5,
+      rotation: bass * 45,
+      blur: "blur-2xl"
+    },
+    // Mid blob - bottom left
+    {
+      width: `${180 + mid * 120}%`,
+      height: `${180 + mid * 120}%`,
+      bottom: `${ -60 + midOffset}%`,
+      left: `${ -60 - midOffset}%`,
+      color: colors[1] || colors[0],
+      opacity: 0.4 + mid * 0.6,
+      scale: 1 + mid * 0.4,
+      rotation: -mid * 40,
+      blur: "blur-2xl"
+    },
+    // High blob - bottom right
+    {
+      width: `${140 + high * 100}%`,
+      height: `${140 + high * 100}%`,
+      top: `${70 - highOffset}%`,
+      right: `${ -50 + highOffset}%`,
+      color: colors[2] || colors[0],
+      opacity: 0.35 + high * 0.65,
+      scale: 1 + high * 0.35,
+      rotation: high * 35,
+      blur: "blur-xl"
+    },
+    // Extra bass reactive blob - top left
+    {
+      width: `${160 + bass * 140}%`,
+      height: `${160 + bass * 140}%`,
+      top: `${ -60 - bassOffset * 0.8}%`,
+      left: `${ -60 + bassOffset * 0.8}%`,
+      color: colors[3] || colors[1] || colors[0],
+      opacity: 0.35 + bass * 0.65,
+      scale: 1 + bass * 0.55,
+      rotation: -bass * 50,
+      blur: "blur-2xl"
+    },
+    // Center glow - pulses with overall
+    {
+      width: `${80 + overall * 150}%`,
+      height: `${80 + overall * 150}%`,
+      top: "50%",
+      left: "50%",
+      color: colors[0],
+      opacity: 0.3 + overall * 0.5,
+      scale: 1 + overall * 0.4,
+      rotation: 0,
+      isCenter: true,
+      blur: "blur-3xl"
+    }
+  ];
+}
+chunkWGEGR3DF_cjs.__name(calculateMeshGradients, "calculateMeshGradients");
+function calculateSpotlight(levels, config, colors, rotation) {
+  const { bass, mid, high, overall } = levels;
+  return {
+    // Rotation speed increases with mid frequencies
+    rotation: rotation + mid * 180,
+    // Border expands with bass
+    inset: 12 + bass * 30,
+    // Color intensities react to different frequencies
+    colors: colors.map((c, i) => ({
+      color: c,
+      opacity: i === 0 ? 0.3 + bass * 0.7 : i === 1 ? 0.3 + mid * 0.7 : 0.3 + high * 0.7
+    })),
+    // Pulse glow - big and reactive
+    pulseInset: 24 + bass * 50,
+    pulseOpacity: 0.3 + bass * 0.7,
+    pulseScale: 1 + bass * 0.4,
+    // Extra glow ring
+    ringOpacity: 0.2 + overall * 0.6,
+    ringScale: 1 + overall * 0.3
+  };
+}
+chunkWGEGR3DF_cjs.__name(calculateSpotlight, "calculateSpotlight");
+var EFFECT_ANIMATIONS = `
+  @keyframes spotlight-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes orb-float-1 {
+    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
+    50% { transform: translate(-50%, -50%) translateY(-15px); }
+  }
+
+  @keyframes orb-float-2 {
+    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
+    50% { transform: translate(-50%, -50%) translateX(15px); }
+  }
+
+  @keyframes orb-float-3 {
+    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
+    33% { transform: translate(-50%, -50%) translate(10px, -10px); }
+    66% { transform: translate(-50%, -50%) translate(-10px, 10px); }
+  }
+
+  @keyframes orb-float-4 {
+    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
+    50% { transform: translate(-50%, -50%) translate(-15px, -10px); }
+  }
+
+  @keyframes mesh-float-1 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    25% { transform: translate(-5%, 10%) scale(1.05); }
+    50% { transform: translate(5%, 5%) scale(0.95); }
+    75% { transform: translate(-3%, -5%) scale(1.02); }
+  }
+
+  @keyframes mesh-float-2 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(8%, -8%) scale(1.08); }
+    66% { transform: translate(-6%, 6%) scale(0.92); }
+  }
+
+  @keyframes mesh-float-3 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(10%, 10%) scale(1.1); }
+  }
+
+  @keyframes mesh-float-4 {
+    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
+    25% { transform: translate(10%, -5%) scale(1.1) rotate(5deg); }
+    50% { transform: translate(-5%, 10%) scale(0.95) rotate(-5deg); }
+    75% { transform: translate(-10%, -10%) scale(1.05) rotate(3deg); }
+  }
+
+  @keyframes mesh-pulse {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
+    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
+  }
+
+  @keyframes glow-breathe {
+    0%, 100% { opacity: 0.6; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.05); }
+  }
+
+  @keyframes glow-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes sparkle-move {
+    0% { opacity: 0; transform: scale(0.8); }
+    50% { opacity: 1; }
+    100% { opacity: 0; transform: scale(1.2); }
+  }
+`;
+function GlowEffect({ data, colors, isPlaying }) {
+  const { layers, hueShift, showPulseRings, showSparkle } = data;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    layers.map((layer, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunkF2N7P5XU_cjs.cn("absolute rounded-2xl -z-10", layer.blur),
+        style: {
+          inset: `-${layer.inset}px`,
+          background: layer.background,
+          opacity: isPlaying ? layer.opacity : 0,
+          transform: i < 2 ? `scaleY(${layer.scale})` : `scale(${layer.scale})`,
+          animation: isPlaying && layer.animation ? layer.animation : "none",
+          transition: "opacity 0.3s"
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute rounded-2xl blur-xl overflow-hidden -z-10",
+        style: {
+          inset: "-75px",
+          opacity: isPlaying ? 0.6 : 0,
+          transition: "opacity 0.5s"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: `conic-gradient(
+              from ${hueShift}deg at 50% 50%,
+              hsl(${colors[0]} / 0.4) 0deg,
+              hsl(${colors[1] || colors[0]} / 0.3) 90deg,
+              hsl(${colors[2] || colors[0]} / 0.3) 180deg,
+              hsl(${colors[3] || colors[0]} / 0.3) 270deg,
+              hsl(${colors[0]} / 0.4) 360deg
+            )`,
+              animation: isPlaying ? "glow-rotate 6s linear infinite" : "none"
+            }
+          }
+        )
+      }
+    ),
+    showPulseRings && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute -inset-6 rounded-xl border-2 animate-ping -z-10",
+          style: {
+            borderColor: `hsl(${colors[0]} / 0.4)`,
+            animationDuration: "1s"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute -inset-12 rounded-2xl border animate-ping -z-10",
+          style: {
+            borderColor: `hsl(${colors[1] || colors[0]} / 0.3)`,
+            animationDuration: "1.5s",
+            animationDelay: "0.2s"
+          }
+        }
+      )
+    ] }),
+    showSparkle && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute -inset-18 rounded-3xl -z-10",
+        style: {
+          background: `radial-gradient(circle at 50% 30%, hsl(${colors[2] || colors[0]} / 0.5) 0%, transparent 30%)`,
+          animation: "sparkle-move 0.5s ease-out"
+        }
+      }
+    )
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(GlowEffect, "GlowEffect");
+function OrbsEffect({ orbs, blur, isPlaying }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: orbs.map((orb, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkF2N7P5XU_cjs.cn("absolute rounded-full -z-10", blur),
+      style: {
+        width: orb.size,
+        height: orb.size,
+        left: `${orb.x}%`,
+        top: `${orb.y}%`,
+        background: `radial-gradient(circle at 30% 30%, hsl(${orb.color}) 0%, hsl(${orb.color} / 0.5) 40%, transparent 70%)`,
+        opacity: isPlaying ? orb.opacity : 0,
+        transform: `translate(-50%, -50%) scale(${orb.scale})`,
+        transition: "all 0.08s ease-out"
+      }
+    },
+    i
+  )) });
+}
+chunkWGEGR3DF_cjs.__name(OrbsEffect, "OrbsEffect");
+function SpotlightEffect({ data, colors, blur, isPlaying }) {
+  const inset = "inset" in data ? data.inset : 12;
+  const pulseInset = "pulseInset" in data ? data.pulseInset : 24;
+  const ringOpacity = "ringOpacity" in data ? data.ringOpacity : 0.3;
+  const ringScale = "ringScale" in data ? data.ringScale : 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunkF2N7P5XU_cjs.cn("absolute rounded-xl -z-10", blur),
+        style: {
+          inset: `-${inset}px`,
+          background: `conic-gradient(
+            from ${data.rotation}deg,
+            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5}),
+            hsl(${colors[1] || colors[0]} / ${data.colors[1]?.opacity || 0.7}),
+            hsl(${colors[2] || colors[0]} / ${data.colors[2]?.opacity || 0.5}),
+            hsl(${colors[0]} / ${data.colors[1]?.opacity || 0.7}),
+            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5})
+          )`,
+          opacity: isPlaying ? 1 : 0,
+          transition: "all 0.08s ease-out"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute -inset-1 rounded-lg bg-background -z-10",
+        style: { opacity: isPlaying ? 1 : 0, transition: "opacity 0.1s" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunkF2N7P5XU_cjs.cn("absolute rounded-2xl -z-10", blur),
+        style: {
+          inset: `-${pulseInset}px`,
+          background: `radial-gradient(circle, hsl(${colors[0]} / 0.7) 0%, hsl(${colors[0]} / 0.3) 50%, transparent 70%)`,
+          opacity: isPlaying ? data.pulseOpacity : 0,
+          transform: `scale(${data.pulseScale})`,
+          transition: "all 0.08s ease-out"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute rounded-3xl -z-10 blur-2xl",
+        style: {
+          inset: `-${pulseInset + 30}px`,
+          background: `radial-gradient(circle, hsl(${colors[1] || colors[0]} / 0.4) 0%, transparent 60%)`,
+          opacity: isPlaying ? ringOpacity : 0,
+          transform: `scale(${ringScale})`,
+          transition: "all 0.08s ease-out"
+        }
+      }
+    )
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(SpotlightEffect, "SpotlightEffect");
+function MeshEffect({ gradients, isPlaying }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: gradients.map((g, i) => {
+    const isCenter = "isCenter" in g && g.isCenter;
+    const scale = "scale" in g ? g.scale : 1;
+    const rotation = "rotation" in g ? g.rotation : 0;
+    const itemBlur = "blur" in g ? g.blur : "blur-2xl";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunkF2N7P5XU_cjs.cn("absolute rounded-full -z-10", itemBlur),
+        style: {
+          width: g.width,
+          height: g.height,
+          top: "top" in g ? g.top : void 0,
+          bottom: "bottom" in g ? g.bottom : void 0,
+          left: "left" in g ? g.left : void 0,
+          right: "right" in g ? g.right : void 0,
+          background: isCenter ? `radial-gradient(circle, hsl(${g.color} / 0.6) 0%, hsl(${g.color} / 0.3) 30%, transparent 60%)` : `radial-gradient(circle, hsl(${g.color}) 0%, hsl(${g.color} / 0.5) 30%, transparent 65%)`,
+          opacity: isPlaying ? g.opacity : 0,
+          transform: isCenter ? `translate(-50%, -50%) scale(${scale})` : `scale(${scale}) rotate(${rotation}deg)`,
+          transition: "all 0.08s ease-out"
+        }
+      },
+      i
+    );
+  }) });
+}
+chunkWGEGR3DF_cjs.__name(MeshEffect, "MeshEffect");
+var SIZES = {
+  sm: { container: "w-32 h-32", orbBase: 40 },
+  md: { container: "w-40 h-40", orbBase: 50 },
+  lg: { container: "w-48 h-48", orbBase: 60 }
+};
+function AudioReactiveCover({
+  children,
+  size = "lg",
+  variant = "spotlight",
+  intensity = "medium",
+  colorScheme = "primary",
+  onClick,
+  className
+}) {
+  const { isPlaying } = useHybridAudioState();
+  const levels = useHybridAudioLevels();
+  const sizeConfig = SIZES[size];
+  const effectConfig = getEffectConfig(intensity);
+  const { colors, hueShift } = prepareEffectColors(colorScheme, levels);
+  const containerScale = 1 + levels.overall * effectConfig.scale;
+  const glowData = variant === "glow" ? {
+    layers: calculateGlowLayers(levels, effectConfig, colors),
+    hueShift,
+    showPulseRings: levels.bass > 0.5,
+    showSparkle: levels.high > 0.4
+  } : null;
+  const orbsData = variant === "orbs" ? calculateOrbs(levels, effectConfig, colors, sizeConfig.orbBase) : null;
+  const meshData = variant === "mesh" ? calculateMeshGradients(levels, effectConfig, colors) : null;
+  const spotlightData = variant === "spotlight" ? calculateSpotlight(levels, effectConfig, colors, levels.mid * 360) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkF2N7P5XU_cjs.cn("relative", sizeConfig.container, className),
+      style: {
+        transform: `scale(${containerScale})`,
+        transition: "transform 0.1s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-0 pointer-events-none overflow-visible", children: [
+          glowData && /* @__PURE__ */ jsxRuntime.jsx(GlowEffect, { data: glowData, colors, isPlaying }),
+          orbsData && /* @__PURE__ */ jsxRuntime.jsx(OrbsEffect, { orbs: orbsData, blur: effectConfig.blur, isPlaying }),
+          spotlightData && /* @__PURE__ */ jsxRuntime.jsx(SpotlightEffect, { data: spotlightData, colors, blur: effectConfig.blur, isPlaying }),
+          meshData && /* @__PURE__ */ jsxRuntime.jsx(MeshEffect, { gradients: meshData, blur: effectConfig.blur, isPlaying })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative w-full h-full rounded-lg overflow-hidden shadow-2xl z-10 bg-background cursor-pointer",
+            onClick,
+            role: onClick ? "button" : void 0,
+            tabIndex: onClick ? 0 : void 0,
+            onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: EFFECT_ANIMATIONS } })
+      ]
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(AudioReactiveCover, "AudioReactiveCover");
+var COVER_SIZES = {
+  sm: "w-24 h-24",
+  md: "w-32 h-32",
+  lg: "w-48 h-48"
+};
+function HybridSimplePlayer(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(VisualizationProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(HybridSimplePlayerContent, { ...props }) });
+}
+chunkWGEGR3DF_cjs.__name(HybridSimplePlayer, "HybridSimplePlayer");
+function HybridSimplePlayerContent({
+  src,
+  title,
+  artist,
+  coverArt,
+  coverSize = "md",
+  showWaveform = true,
+  waveformMode = "frequency",
+  waveformHeight = 64,
+  showTimer = true,
+  showVolume = true,
+  showLoop = true,
+  reactiveCover = true,
+  variant,
+  intensity,
+  colorScheme,
+  autoPlay = false,
+  loop = false,
+  initialVolume = 1,
+  layout = "vertical",
+  className,
+  onPlay,
+  onPause,
+  onEnded,
+  onError
+}) {
+  const { settings: vizSettings, nextVariant } = useVisualization();
+  const effectiveVariant = variant ?? (vizSettings.variant !== "none" ? vizSettings.variant : "spotlight");
+  const effectiveIntensity = intensity ?? vizSettings.intensity;
+  const effectiveColorScheme = colorScheme ?? vizSettings.colorScheme;
+  const showReactiveCover = reactiveCover && effectiveVariant !== "none";
+  const renderCoverContent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+    if (typeof coverArt === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx("img", { src: coverArt, alt: title || "Album cover", className: "w-full h-full object-cover" });
+    }
+    if (coverArt) {
+      return coverArt;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-muted/30 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Music, { className: "w-1/3 h-1/3 text-muted-foreground/50" }) });
+  }, "renderCoverContent");
+  const isHorizontal = layout === "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HybridAudioProvider,
+    {
+      src,
+      autoPlay,
+      loop,
+      initialVolume,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: uiCore.cn(
+            "flex gap-4",
+            isHorizontal ? "flex-row items-center" : "flex-col items-center",
+            className
+          ),
+          children: [
+            (coverArt || reactiveCover) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 shrink-0", children: [
+              showReactiveCover ? /* @__PURE__ */ jsxRuntime.jsx(
+                AudioReactiveCover,
+                {
+                  size: coverSize,
+                  variant: effectiveVariant,
+                  intensity: effectiveIntensity,
+                  colorScheme: effectiveColorScheme,
+                  onClick: nextVariant,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: uiCore.cn("rounded-lg overflow-hidden", COVER_SIZES[coverSize]), children: renderCoverContent() })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: uiCore.cn(
+                    "rounded-lg overflow-hidden shadow-lg cursor-pointer",
+                    COVER_SIZES[coverSize]
+                  ),
+                  onClick: nextVariant,
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => e.key === "Enter" && nextVariant(),
+                  children: renderCoverContent()
+                }
+              ),
+              reactiveCover && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/50 select-none", children: vizSettings.variant === "none" ? "off" : vizSettings.variant })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: uiCore.cn("flex flex-col gap-3", isHorizontal ? "flex-1 min-w-0" : "w-full max-w-md"),
+                children: [
+                  (title || artist) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: uiCore.cn("text-center", isHorizontal && "text-left"), children: [
+                    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-medium text-foreground truncate", children: title }),
+                    artist && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground truncate", children: artist })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    HybridAudioPlayer,
+                    {
+                      showControls: true,
+                      showWaveform,
+                      waveformMode,
+                      waveformHeight,
+                      showTimer,
+                      showVolume,
+                      showLoop,
+                      className: "border-0 bg-transparent"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(HybridSimplePlayerContent, "HybridSimplePlayerContent");
+
+exports.AudioReactiveCover = AudioReactiveCover;
+exports.COLOR_SCHEMES = COLOR_SCHEMES2;
+exports.COLOR_SCHEME_INFO = COLOR_SCHEME_INFO;
+exports.EFFECT_ANIMATIONS = EFFECT_ANIMATIONS;
+exports.GlowEffect = GlowEffect;
+exports.HybridAudioPlayer = HybridAudioPlayer;
+exports.HybridAudioProvider = HybridAudioProvider;
+exports.HybridSimplePlayer = HybridSimplePlayer;
+exports.HybridWaveform = HybridWaveform;
+exports.INTENSITY_CONFIG = INTENSITY_CONFIG;
+exports.INTENSITY_INFO = INTENSITY_INFO;
+exports.MeshEffect = MeshEffect;
+exports.OrbsEffect = OrbsEffect;
+exports.SpotlightEffect = SpotlightEffect;
+exports.VARIANT_INFO = VARIANT_INFO;
+exports.VisualizationProvider = VisualizationProvider;
+exports.calculateGlowLayers = calculateGlowLayers;
+exports.calculateMeshGradients = calculateMeshGradients;
+exports.calculateOrbs = calculateOrbs;
+exports.calculateSpotlight = calculateSpotlight;
+exports.formatTime = formatTime;
+exports.getColors = getColors;
+exports.getEffectConfig = getEffectConfig;
+exports.prepareEffectColors = prepareEffectColors;
+exports.useAudioVisualization = useAudioVisualization;
+exports.useHybridAudio = useHybridAudio;
+exports.useHybridAudioAnalysis = useHybridAudioAnalysis;
+exports.useHybridAudioContext = useHybridAudioContext;
+exports.useHybridAudioControls = useHybridAudioControls;
+exports.useHybridAudioLevels = useHybridAudioLevels;
+exports.useHybridAudioState = useHybridAudioState;
+exports.useHybridWebAudio = useHybridWebAudio;
+exports.useVisualization = useVisualization;
+//# sourceMappingURL=chunk-EVGWYASL.cjs.map
+//# sourceMappingURL=chunk-EVGWYASL.cjs.map