@djangocfg/ui-tools 2.1.310 → 2.1.313

package/dist/chunk-HMHIVEMS.mjs

@@ -1,1619 +0,0 @@
-import { cn as cn$1, Button, Slider, useLocalStorage } from './chunk-JWB2EWQO.mjs';
-import { __name } from './chunk-CGILA3WO.mjs';
-import { createContext, memo, useRef, useCallback, useEffect, useMemo, useId, useState, useContext } from 'react';
-import { Loader2, RotateCcw, SkipBack, Pause, Play, SkipForward, VolumeX, Volume2, Repeat, Music } from 'lucide-react';
-import { useAppT } from '@djangocfg/i18n';
-import { create } from 'zustand';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cn, createMediaLogger } from '@djangocfg/ui-core/lib';
-import { useThemeColor } from '@djangocfg/ui-core/styles/palette';
-import { cn as cn$2 } from '@djangocfg/ui-core';
-
-var useAudioBusStore = create((set) => ({
-  activeId: null,
-  setActiveId: /* @__PURE__ */ __name((id) => set({ activeId: id }), "setActiveId")
-}));
-function useAudioBus(playerId, onStop) {
-  const onStopRef = useRef(onStop);
-  onStopRef.current = onStop;
-  const setActiveId = useAudioBusStore((s) => s.setActiveId);
-  useEffect(() => {
-    return useAudioBusStore.subscribe((state) => {
-      if (state.activeId !== null && state.activeId !== playerId) {
-        onStopRef.current();
-      }
-    });
-  }, [playerId]);
-  const announce = useCallback(() => {
-    setActiveId(playerId);
-  }, [playerId, setActiveId]);
-  const release = useCallback(() => {
-    useAudioBusStore.setState((s) => s.activeId === playerId ? { activeId: null } : s);
-  }, [playerId]);
-  return { announce, release };
-}
-__name(useAudioBus, "useAudioBus");
-
-// src/tools/AudioPlayer/hooks/useHybridAudio.ts
-function useHybridAudio(options) {
-  const {
-    src,
-    autoPlay = false,
-    initialVolume = 1,
-    loop = false,
-    crossOrigin = "anonymous",
-    excludeFromBus = false,
-    onPlay,
-    onPause,
-    onEnded,
-    onTimeUpdate,
-    onError,
-    onReady
-  } = options;
-  const playerId = useId();
-  const audioRef = useRef(null);
-  const audioContextRef = useRef(null);
-  const sourceNodeRef = useRef(null);
-  const analyserRef = useRef(null);
-  const connectedElementRef = useRef(null);
-  const [state, setState] = useState({
-    isReady: false,
-    isPlaying: false,
-    currentTime: 0,
-    duration: 0,
-    volume: initialVolume,
-    isMuted: false,
-    isLooping: loop,
-    buffered: null,
-    error: null
-  });
-  const initWebAudio = 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 { announce: busAnnounce, release: busRelease } = useAudioBus(
-    playerId,
-    useCallback(() => {
-      if (!excludeFromBus) audioRef.current?.pause();
-    }, [excludeFromBus])
-  );
-  const resumeAudioContext = useCallback(async () => {
-    const ctx = audioContextRef.current;
-    if (ctx && ctx.state === "suspended") {
-      await ctx.resume();
-    }
-  }, []);
-  const play = useCallback(async () => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    try {
-      if (!excludeFromBus) busAnnounce();
-      initWebAudio();
-      await resumeAudioContext();
-      await audio.play();
-    } catch (error) {
-      console.error("[useHybridAudio] Play failed:", error);
-      onError?.(error);
-    }
-  }, [excludeFromBus, busAnnounce, initWebAudio, resumeAudioContext, onError]);
-  const pause = useCallback(() => {
-    audioRef.current?.pause();
-  }, []);
-  const togglePlay = useCallback(() => {
-    if (state.isPlaying) {
-      pause();
-    } else {
-      play();
-    }
-  }, [state.isPlaying, play, pause]);
-  const seek = 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 = useCallback(
-    (progress) => {
-      const duration = state.duration || audioRef.current?.duration || 0;
-      seek(duration * Math.max(0, Math.min(1, progress)));
-    },
-    [state.duration, seek]
-  );
-  const skip = useCallback(
-    (seconds) => {
-      seek(state.currentTime + seconds);
-    },
-    [state.currentTime, seek]
-  );
-  const setVolume = 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 = useCallback(() => {
-    const audio = audioRef.current;
-    if (audio) {
-      audio.muted = !audio.muted;
-      setState((prev) => ({ ...prev, isMuted: audio.muted }));
-    }
-  }, []);
-  const toggleLoop = useCallback(() => {
-    const audio = audioRef.current;
-    if (audio) {
-      audio.loop = !audio.loop;
-      setState((prev) => ({ ...prev, isLooping: audio.loop }));
-    }
-  }, []);
-  const setLoop = useCallback((enabled) => {
-    const audio = audioRef.current;
-    if (audio) {
-      audio.loop = enabled;
-      setState((prev) => ({ ...prev, isLooping: enabled }));
-    }
-  }, []);
-  const restart = useCallback(() => {
-    seek(0);
-    play();
-  }, [seek, play]);
-  const controls = {
-    play,
-    pause,
-    togglePlay,
-    seek,
-    seekTo,
-    skip,
-    setVolume,
-    toggleMute,
-    toggleLoop,
-    setLoop,
-    restart
-  };
-  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 = "";
-      busRelease();
-      if (audioContextRef.current) {
-        audioContextRef.current.close().catch(() => {
-        });
-      }
-    };
-  }, []);
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    const handlers = {
-      loadedmetadata: /* @__PURE__ */ __name(() => {
-        setState((prev) => ({
-          ...prev,
-          duration: audio.duration,
-          isReady: true
-        }));
-        onReady?.();
-      }, "loadedmetadata"),
-      canplay: /* @__PURE__ */ __name(() => {
-        setState((prev) => ({ ...prev, isReady: true }));
-        if (autoPlay) {
-          play();
-        }
-      }, "canplay"),
-      play: /* @__PURE__ */ __name(() => {
-        setState((prev) => ({ ...prev, isPlaying: true }));
-        onPlay?.();
-      }, "play"),
-      pause: /* @__PURE__ */ __name(() => {
-        setState((prev) => ({ ...prev, isPlaying: false }));
-        onPause?.();
-      }, "pause"),
-      ended: /* @__PURE__ */ __name(() => {
-        setState((prev) => ({ ...prev, isPlaying: false }));
-        onEnded?.();
-      }, "ended"),
-      timeupdate: /* @__PURE__ */ __name(() => {
-        setState((prev) => ({ ...prev, currentTime: audio.currentTime }));
-        onTimeUpdate?.(audio.currentTime);
-      }, "timeupdate"),
-      progress: /* @__PURE__ */ __name(() => {
-        setState((prev) => ({ ...prev, buffered: audio.buffered }));
-      }, "progress"),
-      error: /* @__PURE__ */ __name(() => {
-        const error = new Error(audio.error?.message || "Audio error");
-        setState((prev) => ({ ...prev, error }));
-        onError?.(error);
-      }, "error"),
-      volumechange: /* @__PURE__ */ __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]);
-  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
-    }
-  };
-}
-__name(useHybridAudio, "useHybridAudio");
-function useHybridAudioAnalysis(analyser, isPlaying) {
-  const [levels, setLevels] = useState({ bass: 0, mid: 0, high: 0, overall: 0 });
-  const animationRef = useRef(null);
-  const dataArrayRef = useRef(null);
-  const cleanup = useCallback(() => {
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current);
-      animationRef.current = null;
-    }
-  }, []);
-  useEffect(() => {
-    if (analyser && !dataArrayRef.current) {
-      dataArrayRef.current = new Uint8Array(analyser.frequencyBinCount);
-    }
-  }, [analyser]);
-  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__ */ __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;
-}
-__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 = createContext(null);
-function VisualizationProvider({ children }) {
-  const value = useVisualizationState();
-  return /* @__PURE__ */ jsx(VisualizationContext.Provider, { value, children });
-}
-__name(VisualizationProvider, "VisualizationProvider");
-function useVisualizationState() {
-  const [settings, setSettings] = useLocalStorage(
-    STORAGE_KEY,
-    DEFAULT_SETTINGS
-  );
-  const toggle = useCallback(() => {
-    setSettings((prev) => ({ ...prev, enabled: !prev.enabled }));
-  }, [setSettings]);
-  const setSetting = useCallback(
-    (key, value) => {
-      setSettings((prev) => ({ ...prev, [key]: value }));
-    },
-    [setSettings]
-  );
-  const nextVariant = useCallback(() => {
-    setSettings((prev) => {
-      const currentIndex = VARIANTS.indexOf(prev.variant);
-      const nextIndex = (currentIndex + 1) % VARIANTS.length;
-      return { ...prev, variant: VARIANTS[nextIndex] };
-    });
-  }, [setSettings]);
-  const nextIntensity = useCallback(() => {
-    setSettings((prev) => {
-      const currentIndex = INTENSITIES.indexOf(prev.intensity);
-      const nextIndex = (currentIndex + 1) % INTENSITIES.length;
-      return { ...prev, intensity: INTENSITIES[nextIndex] };
-    });
-  }, [setSettings]);
-  const nextColorScheme = 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 = useCallback(() => {
-    setSettings(DEFAULT_SETTINGS);
-  }, [setSettings]);
-  return useMemo(
-    () => ({
-      settings,
-      toggle,
-      setSetting,
-      nextVariant,
-      nextIntensity,
-      nextColorScheme,
-      reset
-    }),
-    [settings, toggle, setSetting, nextVariant, nextIntensity, nextColorScheme, reset]
-  );
-}
-__name(useVisualizationState, "useVisualizationState");
-function useVisualization() {
-  const context = useContext(VisualizationContext);
-  const fallbackState = useVisualizationState();
-  return context ?? fallbackState;
-}
-__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 = 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 = useRef(false);
-  useEffect(() => {
-    if (!state.isReady || hasAppliedInitialSettings.current) return;
-    hasAppliedInitialSettings.current = true;
-    controls.setVolume(savedSettings.volume);
-    controls.setLoop(savedSettings.isLooping);
-  }, [state.isReady, savedSettings, controls]);
-  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 = useMemo(
-    () => ({
-      state,
-      controls,
-      webAudio,
-      audioLevels,
-      audioRef
-    }),
-    [state, controls, webAudio, audioLevels, audioRef]
-  );
-  return /* @__PURE__ */ jsx(HybridAudioContext.Provider, { value, children });
-}
-__name(HybridAudioProvider, "HybridAudioProvider");
-function useHybridAudioContext() {
-  const context = useContext(HybridAudioContext);
-  if (!context) {
-    throw new Error("useHybridAudioContext must be used within HybridAudioProvider");
-  }
-  return context;
-}
-__name(useHybridAudioContext, "useHybridAudioContext");
-function useHybridAudioState() {
-  const { state } = useHybridAudioContext();
-  return state;
-}
-__name(useHybridAudioState, "useHybridAudioState");
-function useHybridAudioControls() {
-  const { controls } = useHybridAudioContext();
-  return controls;
-}
-__name(useHybridAudioControls, "useHybridAudioControls");
-function useHybridAudioLevels() {
-  const { audioLevels } = useHybridAudioContext();
-  return audioLevels;
-}
-__name(useHybridAudioLevels, "useHybridAudioLevels");
-function useHybridWebAudio() {
-  const { webAudio } = useHybridAudioContext();
-  return webAudio;
-}
-__name(useHybridWebAudio, "useHybridWebAudio");
-var HybridWaveform = memo(/* @__PURE__ */ __name(function HybridWaveform2({
-  mode = "frequency",
-  height = 64,
-  barWidth = 3,
-  barGap = 2,
-  barRadius = 2,
-  progressColor,
-  waveColor,
-  bufferedColor,
-  className,
-  onSeek
-}) {
-  const themePrimary = useThemeColor("primary");
-  const themePrimaryWave = useThemeColor("primary", 0.3);
-  const themePrimaryBuffered = useThemeColor("primary", 0.15);
-  const resolvedProgressColor = progressColor ?? themePrimary;
-  const resolvedWaveColor = waveColor ?? themePrimaryWave;
-  const resolvedBufferedColor = bufferedColor ?? themePrimaryBuffered;
-  const canvasRef = useRef(null);
-  const containerRef = useRef(null);
-  const animationRef = useRef(null);
-  const { state, controls, webAudio } = useHybridAudioContext();
-  const handleClick = 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 = 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 = resolvedBufferedColor;
-      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 ? resolvedProgressColor : resolvedWaveColor;
-      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,
-    resolvedProgressColor,
-    resolvedWaveColor,
-    resolvedBufferedColor
-  ]);
-  const renderStatic = 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);
-    const progress = state.duration > 0 ? state.currentTime / state.duration : 0;
-    const progressWidth = width * progress;
-    ctx.fillStyle = resolvedWaveColor;
-    ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, width, 4 * dpr);
-    if (state.buffered && state.duration > 0) {
-      ctx.fillStyle = resolvedBufferedColor;
-      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 - 2 * dpr, end - start, 2 * dpr);
-      }
-    }
-    ctx.fillStyle = resolvedProgressColor;
-    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, resolvedProgressColor, resolvedWaveColor, resolvedBufferedColor]);
-  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]);
-  useEffect(() => {
-    if (mode === "frequency") {
-      renderFrequency();
-    }
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-    };
-  }, [mode, renderFrequency]);
-  useEffect(() => {
-    if (mode === "static") {
-      renderStatic();
-    }
-  }, [mode, state.currentTime, renderStatic]);
-  useEffect(() => {
-    if (mode === "frequency" && !state.isPlaying) {
-      renderFrequency();
-    }
-  }, [mode, state.isPlaying, renderFrequency]);
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("w-full", className), children: /* @__PURE__ */ 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")}`;
-}
-__name(formatTime, "formatTime");
-createMediaLogger("AudioPlayer");
-var HybridAudioPlayer = memo(/* @__PURE__ */ __name(function HybridAudioPlayer2({
-  showControls = true,
-  showWaveform = true,
-  waveformMode = "frequency",
-  waveformHeight = 64,
-  showTimer = true,
-  showVolume = true,
-  showLoop = true,
-  className,
-  style
-}) {
-  const t = useAppT();
-  const { state, controls } = useHybridAudioContext();
-  const labels = 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__ */ __name((value) => {
-    controls.setVolume(value[0] / 100);
-  }, "handleVolumeChange");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn$1("flex flex-col gap-3 p-4 rounded-lg bg-card border", className),
-      style,
-      children: [
-        showWaveform && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            HybridWaveform,
-            {
-              mode: waveformMode,
-              height: waveformHeight,
-              className: cn$1(isLoading && "opacity-50")
-            }
-          ),
-          isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-primary" }) })
-        ] }),
-        showTimer && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground tabular-nums px-1", children: [
-          /* @__PURE__ */ jsx("span", { children: formatTime(state.currentTime) }),
-          /* @__PURE__ */ jsx("span", { children: formatTime(state.duration) })
-        ] }),
-        showControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-9 w-9",
-              onClick: controls.restart,
-              disabled: !state.isReady,
-              title: labels.restart,
-              children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-9 w-9",
-              onClick: () => controls.skip(-5),
-              disabled: !state.isReady,
-              title: labels.back,
-              children: /* @__PURE__ */ jsx(SkipBack, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            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__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin" }) : state.isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Play, { className: "h-5 w-5 ml-0.5" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-9 w-9",
-              onClick: () => controls.skip(5),
-              disabled: !state.isReady,
-              title: labels.forward,
-              children: /* @__PURE__ */ jsx(SkipForward, { className: "h-4 w-4" })
-            }
-          ),
-          showVolume && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              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__ */ jsx(VolumeX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Volume2, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Slider,
-              {
-                value: [state.isMuted ? 0 : state.volume * 100],
-                max: 100,
-                step: 1,
-                onValueChange: handleVolumeChange,
-                className: "w-20",
-                "aria-label": labels.volume
-              }
-            )
-          ] }),
-          showLoop && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: cn$1("h-9 w-9", state.isLooping && "text-primary"),
-              onClick: controls.toggleLoop,
-              disabled: !state.isReady,
-              title: state.isLooping ? "Disable loop" : "Enable loop",
-              children: /* @__PURE__ */ jsx(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];
-}
-__name(getEffectConfig, "getEffectConfig");
-function getColors(colorScheme) {
-  return COLOR_SCHEMES2[colorScheme];
-}
-__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 };
-}
-__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"
-    }
-  ];
-}
-__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
-    }
-  ];
-}
-__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"
-    }
-  ];
-}
-__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
-  };
-}
-__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__ */ jsxs(Fragment, { children: [
-    layers.map((layer, i) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn$1("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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute -inset-6 rounded-xl border-2 animate-ping -z-10",
-          style: {
-            borderColor: `hsl(${colors[0]} / 0.4)`,
-            animationDuration: "1s"
-          }
-        }
-      ),
-      /* @__PURE__ */ 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__ */ 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"
-        }
-      }
-    )
-  ] });
-}
-__name(GlowEffect, "GlowEffect");
-function OrbsEffect({ orbs, blur, isPlaying }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: orbs.map((orb, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn$1("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
-  )) });
-}
-__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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn$1("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__ */ jsx(
-      "div",
-      {
-        className: "absolute -inset-1 rounded-lg bg-background -z-10",
-        style: { opacity: isPlaying ? 1 : 0, transition: "opacity 0.1s" }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn$1("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__ */ 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"
-        }
-      }
-    )
-  ] });
-}
-__name(SpotlightEffect, "SpotlightEffect");
-function MeshEffect({ gradients, isPlaying }) {
-  return /* @__PURE__ */ jsx(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__ */ jsx(
-      "div",
-      {
-        className: cn$1("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
-    );
-  }) });
-}
-__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 },
-  full: { container: "w-full sm:max-w-xs aspect-square mx-auto", 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__ */ jsxs(
-    "div",
-    {
-      className: cn$1("relative", sizeConfig.container, className),
-      style: {
-        transform: `scale(${containerScale})`,
-        transition: "transform 0.1s ease-out"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0 pointer-events-none overflow-visible", children: [
-          glowData && /* @__PURE__ */ jsx(GlowEffect, { data: glowData, colors, isPlaying }),
-          orbsData && /* @__PURE__ */ jsx(OrbsEffect, { orbs: orbsData, blur: effectConfig.blur, isPlaying }),
-          spotlightData && /* @__PURE__ */ jsx(SpotlightEffect, { data: spotlightData, colors, blur: effectConfig.blur, isPlaying }),
-          meshData && /* @__PURE__ */ jsx(MeshEffect, { gradients: meshData, blur: effectConfig.blur, isPlaying })
-        ] }),
-        /* @__PURE__ */ 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__ */ jsx("style", { dangerouslySetInnerHTML: { __html: EFFECT_ANIMATIONS } })
-      ]
-    }
-  );
-}
-__name(AudioReactiveCover, "AudioReactiveCover");
-var COVER_SIZES = {
-  sm: "w-24 h-24",
-  md: "w-32 h-32",
-  lg: "w-48 h-48"
-};
-var COVER_SIZE_FOR_LAYOUT = /* @__PURE__ */ __name((coverSize, isHorizontal) => isHorizontal ? coverSize : "full", "COVER_SIZE_FOR_LAYOUT");
-function HybridSimplePlayer(props) {
-  return /* @__PURE__ */ jsx(VisualizationProvider, { children: /* @__PURE__ */ jsx(HybridSimplePlayerContent, { ...props }) });
-}
-__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__ */ __name(() => {
-    if (typeof coverArt === "string") {
-      return /* @__PURE__ */ jsx("img", { src: coverArt, alt: title || "Album cover", className: "w-full h-full object-cover" });
-    }
-    if (coverArt) {
-      return coverArt;
-    }
-    return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-muted/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(Music, { className: "w-1/3 h-1/3 text-muted-foreground/50" }) });
-  }, "renderCoverContent");
-  const isHorizontal = layout === "horizontal";
-  return /* @__PURE__ */ jsx(
-    HybridAudioProvider,
-    {
-      src,
-      autoPlay,
-      loop,
-      initialVolume,
-      onPlay,
-      onPause,
-      onEnded,
-      onError,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn$2(
-            "flex gap-4",
-            isHorizontal ? "flex-row items-center" : "flex-col items-center",
-            className
-          ),
-          children: [
-            (coverArt || reactiveCover) && /* @__PURE__ */ jsxs("div", { className: cn$2("flex flex-col items-center gap-2", isHorizontal ? "shrink-0" : "w-full"), children: [
-              showReactiveCover ? /* @__PURE__ */ jsx(
-                AudioReactiveCover,
-                {
-                  size: COVER_SIZE_FOR_LAYOUT(coverSize, isHorizontal),
-                  variant: effectiveVariant,
-                  intensity: effectiveIntensity,
-                  colorScheme: effectiveColorScheme,
-                  onClick: nextVariant,
-                  children: /* @__PURE__ */ jsx("div", { className: cn$2("rounded-lg overflow-hidden", isHorizontal ? COVER_SIZES[coverSize] : "w-full h-full"), children: renderCoverContent() })
-                }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn$2(
-                    "rounded-lg overflow-hidden shadow-lg cursor-pointer",
-                    isHorizontal ? COVER_SIZES[coverSize] : "w-full sm:max-w-xs aspect-square mx-auto"
-                  ),
-                  onClick: nextVariant,
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => e.key === "Enter" && nextVariant(),
-                  children: renderCoverContent()
-                }
-              ),
-              reactiveCover && /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/50 select-none", children: vizSettings.variant === "none" ? "off" : vizSettings.variant })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn$2("flex flex-col gap-3", isHorizontal ? "flex-1 min-w-0" : "w-full"),
-                children: [
-                  (title || artist) && /* @__PURE__ */ jsxs("div", { className: cn$2("text-center", isHorizontal && "text-left"), children: [
-                    title && /* @__PURE__ */ jsx("h3", { className: "text-base font-medium text-foreground truncate", children: title }),
-                    artist && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: artist })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    HybridAudioPlayer,
-                    {
-                      showControls: true,
-                      showWaveform,
-                      waveformMode,
-                      waveformHeight,
-                      showTimer,
-                      showVolume,
-                      showLoop,
-                      className: "border-0 bg-transparent"
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-__name(HybridSimplePlayerContent, "HybridSimplePlayerContent");
-function HybridCompactPlayer({
-  src,
-  title,
-  autoPlay = false,
-  loop = false,
-  initialVolume = 1,
-  waveformMode = "frequency",
-  showTimer = true,
-  buttonSize = "md",
-  className,
-  onPlay,
-  onPause,
-  onEnded,
-  onError
-}) {
-  return /* @__PURE__ */ jsx(
-    HybridAudioProvider,
-    {
-      src,
-      autoPlay,
-      loop,
-      initialVolume,
-      onPlay,
-      onPause,
-      onEnded,
-      onError,
-      children: /* @__PURE__ */ jsx(
-        HybridCompactPlayerInner,
-        {
-          title,
-          waveformMode,
-          showTimer,
-          buttonSize,
-          className
-        }
-      )
-    }
-  );
-}
-__name(HybridCompactPlayer, "HybridCompactPlayer");
-var BUTTON_SIZE = {
-  sm: "h-6 w-6",
-  md: "h-8 w-8"
-};
-function HybridCompactPlayerInner({ title, waveformMode, showTimer, buttonSize, className }) {
-  const { state, controls } = useHybridAudioContext();
-  const isLoading = !state.isReady;
-  return /* @__PURE__ */ jsxs("div", { className: cn$2("flex items-center gap-2 w-full", className), children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: cn$2(BUTTON_SIZE[buttonSize], "flex-shrink-0"),
-        onClick: controls.togglePlay,
-        disabled: !state.isReady && !isLoading,
-        title: title ?? (state.isPlaying ? "Pause" : "Play"),
-        "aria-label": state.isPlaying ? "Pause" : "Play",
-        children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : state.isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5 ml-0.5" })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
-      HybridWaveform,
-      {
-        mode: waveformMode,
-        height: 32,
-        barWidth: 2,
-        barGap: 1,
-        className: cn$2(isLoading && "opacity-40")
-      }
-    ) }),
-    showTimer && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground tabular-nums flex-shrink-0", children: [
-      formatTime(state.currentTime),
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: " / " }),
-      formatTime(state.duration)
-    ] })
-  ] });
-}
-__name(HybridCompactPlayerInner, "HybridCompactPlayerInner");
-
-export { AudioReactiveCover, COLOR_SCHEMES2 as COLOR_SCHEMES, COLOR_SCHEME_INFO, EFFECT_ANIMATIONS, GlowEffect, HybridAudioPlayer, HybridAudioProvider, HybridCompactPlayer, HybridSimplePlayer, HybridWaveform, INTENSITY_CONFIG, INTENSITY_INFO, MeshEffect, OrbsEffect, SpotlightEffect, VARIANT_INFO, VisualizationProvider, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, formatTime, getColors, getEffectConfig, prepareEffectColors, useAudioBus, useAudioBusStore, useAudioVisualization, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useVisualization };
-//# sourceMappingURL=chunk-HMHIVEMS.mjs.map
-//# sourceMappingURL=chunk-HMHIVEMS.mjs.map