waveframe 0.2.2 → 0.3.1

package/dist/index.d.ts

@@ -1,2 +1,562 @@
-export * from './src/index.js'
-export {}
+import React$1 from 'react';
+
+/**
+ * Defines the core color palette for the Waveframe component.
+ *
+ * @example
+ * ```tsx
+ * const darkTheme: WaveframeTheme = {
+ *   bg: '#111827',
+ *   primary: '#ec4899',
+ *   text: '#f9fafb',
+ *   border: '#1f2937'
+ * };
+ * ```
+ */
+interface WaveframeTheme {
+    /** The main background color of the player */
+    bg: string;
+    /** The primary accent color (used for play button and progress) */
+    primary: string;
+    /** The color of the text elements (title, artist, time) */
+    text: string;
+    /** The color of borders and dividers */
+    border: string;
+}
+/**
+ * Metadata associated with an audio track.
+ *
+ * @example
+ * ```tsx
+ * const track: TrackInfo = {
+ *   title: 'Electronic Sunset',
+ *   artist: 'Digital Nomad',
+ *   artwork: 'https://example.com/art.jpg', // or a Blob object
+ *   audioUrl: 'https://example.com/audio.mp3'
+ * };
+ * ```
+ */
+interface TrackInfo {
+    /** The title of the track */
+    title: string;
+    /** The artist of the track */
+    artist: string;
+    /** The artwork source (URL string or Blob/File object) */
+    artwork: string | Blob;
+    /** The URL to the actual audio file */
+    audioUrl: string;
+}
+/**
+ * Defines the resolution of the waveform.
+ * - `number`: A fixed number of bars to render.
+ * - `'auto'`: Compute the number of bars dynamically based on the container width.
+ */
+type Resolution = number | 'auto';
+/**
+ * Configuration options for how the waveform is rendered visually.
+ *
+ * @example
+ * ```tsx
+ * const config: WaveformConfig = {
+ *   resolution: 'auto',
+ *   barWidth: 2,
+ *   barGap: 1,
+ *   height: 100
+ * };
+ * ```
+ */
+interface WaveformConfig {
+    /** The number of bars to render, or 'auto' to compute based on container width */
+    resolution: Resolution;
+    /** The width of each individual bar in pixels */
+    barWidth: number;
+    /** The spacing between each bar in pixels */
+    barGap: number;
+    /** The total height of the waveform in pixels */
+    height: number;
+}
+
+/**
+ * Represents the low-level playback state of the audio element.
+ */
+type PlayerState = {
+    /** Whether the audio is currently playing */
+    isPlaying: boolean;
+    /** The current playback time in seconds */
+    currentTime: number;
+    /** The total duration of the track in seconds */
+    duration: number;
+    /** The current volume level (0 to 1) */
+    volume: number;
+    /** Whether the audio is currently muted */
+    muted: boolean;
+    /** Any error reported by the audio element */
+    error: string | null;
+};
+/**
+ * A callback function that receives the latest PlayerState.
+ */
+type PlayerListener = (state: PlayerState) => void;
+/**
+ * The internal core class responsible for managing the HTMLAudioElement.
+ *
+ * It handles raw playback logic, volume control, and synchronizes the
+ * internal `PlayerState` with DOM events from the underlying `Audio` instance.
+ */
+declare class PlayerCore {
+    private audio;
+    private listeners;
+    private _state;
+    /**
+     * Initializes a new PlayerCore instance and sets up event listeners on a new Audio object.
+     */
+    constructor();
+    /**
+     * Subscribes to various HTMLMediaElement events to keep the internal state in sync.
+     */
+    private initListeners;
+    /**
+     * Updates the internal state and notifies subscribers.
+     */
+    private updateState;
+    /**
+     * Triggers all registered listener callbacks.
+     */
+    private notify;
+    /**
+     * Registers a listener for state updates.
+     * @param listener The callback function.
+     * @returns An unsubscribe function.
+     */
+    subscribe(listener: PlayerListener): () => boolean;
+    /**
+     * Returns the current playback state.
+     */
+    get state(): PlayerState;
+    /**
+     * Updates the source URL of the underlying audio element.
+     * @param url The audio source URL.
+     */
+    setSource(url: string): void;
+    /**
+     * Starts playback. Returns a promise that resolves when playback begins.
+     */
+    play(): Promise<void>;
+    /**
+     * Pauses playback.
+     */
+    pause(): void;
+    /**
+     * Toggles between play and pause states.
+     */
+    togglePlay(): Promise<void>;
+    /**
+     * Seeks to a specific time.
+     * @param time Time in seconds.
+     */
+    seek(time: number): void;
+    /**
+     * Sets the volume level.
+     * @param volume Level from 0 to 1.
+     */
+    setVolume(volume: number): void;
+    /**
+     * Mutes or unmutes the audio element.
+     * @param muted Mute status.
+     */
+    setMuted(muted: boolean): void;
+    /**
+     * Cleans up the audio element and removes all listeners.
+     */
+    dispose(): void;
+}
+
+/**
+ * Represents the complete state of the Waveframe engine, combining playback and analysis.
+ */
+type EngineState = PlayerState & {
+    /** The current set of generated or provided waveform peaks (0-1 range) */
+    peaks: number[];
+    /** Whether an audio analysis process is currently in progress */
+    isAnalyzing: boolean;
+    /** Any error message encountered during playback or analysis */
+    error: string | null;
+};
+/**
+ * A callback function that receives the latest EngineState.
+ */
+type EngineListener = (state: EngineState) => void;
+/**
+ * The orchestrator class for Waveframe.
+ *
+ * It manages the lifecycle of audio playback and waveform analysis, providing a unified
+ * store-like interface that can be easily consumed by React or other frameworks.
+ *
+ * @example
+ * ```typescript
+ * const engine = new WaveframeEngine();
+ *
+ * // Load from URL (automatic analysis if peaks omitted)
+ * engine.load('https://example.com/audio.mp3');
+ *
+ * // Load from Blob with pre-computed peaks
+ * engine.load(myBlob, [0.1, 0.5, 0.8]);
+ *
+ * // Subscription
+ * const unsubscribe = engine.subscribe((state) => {
+ *   console.log('Current time:', state.currentTime);
+ * });
+ * ```
+ */
+declare class WaveframeEngine {
+    private player;
+    private analyzer;
+    private listeners;
+    private _state;
+    private _media;
+    private _objectUrl;
+    /**
+     * Creates a new instance of the WaveframeEngine.
+     * Initializes internal PlayerCore and PeakAnalyzer.
+     */
+    constructor();
+    /**
+     * Internal method to update the state and notify all subscribers.
+     */
+    private updateState;
+    /**
+     * Notifies all registered listeners of a state change.
+     */
+    private notify;
+    /**
+     * Registers a listener to be called whenever the engine state changes.
+     * @param listener The callback function.
+     * @returns An unsubscribe function.
+     */
+    subscribe(listener: EngineListener): () => boolean;
+    /**
+     * Returns a snapshot of the current engine state.
+     * Useful for `useSyncExternalStore`.
+     */
+    getSnapshot(): EngineState;
+    /**
+     * Revokes any existing Object URLs to prevent memory leaks.
+     */
+    private revokeOldSource;
+    /**
+     * Loads media (URL or Blob) into the player.
+     *
+     * If a string is passed, it's treated as a URL and used directly for playback.
+     * If a Blob is passed, an Object URL is created for playback.
+     *
+     * If `peaks` are not provided, it automatically triggers an analysis.
+     *
+     * @param media The audio source (URL string or Blob/File object).
+     * @param peaks Optional pre-generated peaks for the waveform.
+     */
+    load(media: string | Blob, peaks?: number[]): void;
+    /**
+     * Analyzes the current media to generate waveform peaks.
+     * @param samples The number of peaks to generate. Defaults to 512.
+     */
+    analyze(samples?: number): Promise<void>;
+    /**
+     * Toggles playback between playing and paused.
+     */
+    togglePlay(): void;
+    /**
+     * Starts audio playback.
+     */
+    play(): void;
+    /**
+     * Pauses audio playback.
+     */
+    pause(): void;
+    /**
+     * Seeks to a specific position in the track.
+     * @param percentage The seek position as a decimal (0 to 1).
+     */
+    seek(percentage: number): void;
+    /**
+     * Sets the playback volume.
+     * @param volume The volume level (0 to 1).
+     */
+    setVolume(volume: number): void;
+    /**
+     * Mutes or unmutes the audio.
+     * @param muted Whether the audio should be muted.
+     */
+    setMuted(muted: boolean): void;
+    /**
+     * Disposes of the engine, pausing playback and clearing all listeners and resources.
+     */
+    dispose(): void;
+}
+
+/**
+ * Props for the WaveframePlayer component
+ */
+interface WaveframePlayerProps {
+    /**
+     * The audio source to play. Can be a URL string or a Blob/File object.
+     */
+    media?: string | Blob;
+    /**
+     * Optional pre-generated peaks for the waveform (0-1 range).
+     * If omitted or empty, the player will automatically analyze the media.
+     */
+    peaks?: number[];
+    /**
+     * The artwork source to display. Can be a URL string or a Blob/File object.
+     */
+    artwork?: string | Blob;
+    /**
+     * The title of the track
+     */
+    title?: string;
+    /**
+     * The artist of the track
+     */
+    artist?: string;
+    /**
+     * The base color of the waveform bars
+     * @default "#e5e7eb" (light) or "#374151" (dark)
+     */
+    waveColor?: string;
+    /**
+     * The color of the played progress part of the waveform
+     * @default theme.primary or "#3b82f6"
+     */
+    progressColor?: string;
+    /**
+     * The height of the waveform in pixels
+     * @default 80
+     */
+    height?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+    /**
+     * Inline styles for the container
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * The number of bars to render. Use 'auto' to fit the container width.
+     * @default "auto"
+     */
+    resolution?: number | 'auto';
+    /**
+     * The width of each bar in pixels (if resolution is 'auto')
+     * @default 2
+     */
+    barWidth?: number;
+    /**
+     * The gap between bars in pixels (if resolution is 'auto')
+     * @default 1
+     */
+    barGap?: number;
+    /**
+     * Custom theme configuration
+     */
+    theme?: WaveframeTheme;
+    /**
+     * Optional WaveframeEngine instance for external control.
+     * If provided, the player will sync with this engine instead of creating its own.
+     */
+    engine?: WaveframeEngine;
+}
+/**
+ * The standard "all-in-one" Waveframe player component.
+ *
+ * This component features a SoundCloud-inspired layout with a prominent
+ * play/pause button positioned next to the track metadata.
+ */
+declare const WaveframePlayer: React$1.FC<WaveframePlayerProps>;
+
+interface WaveformProps {
+    peaks: number[];
+    currentTime: number;
+    duration: number;
+    waveColor: string;
+    progressColor: string;
+    height: number;
+    onSeek: (percentage: number) => void;
+    resolution?: number | 'auto';
+    barWidth?: number;
+    barGap?: number;
+}
+declare const Waveform: React$1.FC<WaveformProps>;
+
+/**
+ * A specialized class for decoding audio data and generating waveform peaks.
+ *
+ * It leverages the Web Audio API (`AudioContext`) to process audio buffers
+ * and extract amplitude data for visualization.
+ */
+declare class PeakAnalyzer {
+    private audioCtx;
+    /**
+     * Initializes the analyzer. AudioContext creation is deferred to the first use
+     * to comply with browser autoplay and resource management policies.
+     */
+    constructor();
+    /**
+     * Lazily creates or returns the existing AudioContext.
+     */
+    private getContext;
+    /**
+     * Processes media (URL or Blob) and generates a set of normalized peaks.
+     *
+     * @param media The URL string or Blob object to analyze.
+     * @param samples The number of peaks (bars) to generate. Defaults to 512.
+     * @returns A promise resolving to an array of normalized peak values (0 to 1).
+     *
+     * @example
+     * ```typescript
+     * const analyzer = new PeakAnalyzer();
+     *
+     * // Analyze from URL
+     * const peaksFromUrl = await analyzer.generatePeaks('https://example.com/audio.mp3');
+     *
+     * // Analyze from Blob
+     * const peaksFromBlob = await analyzer.generatePeaks(myAudioBlob);
+     * ```
+     */
+    generatePeaks(media: string | Blob, samples?: number): Promise<number[]>;
+    /**
+     * Closes the AudioContext and releases system audio resources.
+     */
+    dispose(): void;
+}
+
+/**
+ * Configuration options for the `useWaveframe` hook.
+ */
+interface UseWaveframeOptions {
+    /** Optional pre-computed peaks to skip automatic analysis */
+    peaks?: number[];
+    /** Optional external engine instance for shared playback across components */
+    engine?: WaveframeEngine;
+}
+/**
+ * A headless hook that provides full control over the Waveframe engine.
+ *
+ * It manages the engine's lifecycle, loads the provided media, and returns
+ * the current state along with playback controls.
+ *
+ * @param media The audio source (URL string or Blob/File object).
+ * @param options Additional configuration and an optional external engine.
+ *
+ * @example
+ * ```tsx
+ * const { state, togglePlay, seek } = useWaveframe('https://example.com/audio.mp3');
+ *
+ * return (
+ *   <div>
+ *     <button onClick={togglePlay}>{state.isPlaying ? 'Pause' : 'Play'}</button>
+ *     <div onClick={(e) => seek(0.5)}>Seek to Middle</div>
+ *   </div>
+ * );
+ * ```
+ */
+declare const useWaveframe: (media: string | Blob | undefined, options?: UseWaveframeOptions) => {
+    /** The current reactive state of the engine */
+    state: EngineState;
+    /** The raw WaveframeEngine instance for advanced usage */
+    engine: WaveframeEngine;
+    /** Toggles playback between playing and paused */
+    togglePlay: () => void;
+    /** Starts audio playback */
+    play: () => void;
+    /** Pauses audio playback */
+    pause: () => void;
+    /** Seeks to a specific percentage (0-1) */
+    seek: (percentage: number) => void;
+    /** Sets the playback volume (0-1) */
+    setVolume: (v: number) => void;
+    /** Mutes or unmutes the audio */
+    setMuted: (m: boolean) => void;
+    /** Manually triggers a re-analysis of the current media */
+    analyze: (samples?: number) => Promise<void>;
+};
+
+/**
+ * A React hook that synchronizes a WaveframeEngine's state with a React component.
+ *
+ * It uses `useSyncExternalStore` for high-performance updates, ensuring that
+ * the component only re-renders when the engine's state snapshot actually changes.
+ *
+ * @param engine The WaveframeEngine instance to subscribe to.
+ * @returns The current EngineState (isPlaying, currentTime, peaks, etc.).
+ *
+ * @example
+ * ```tsx
+ * const MyPlayer = ({ engine }: { engine: WaveframeEngine }) => {
+ *   const { isPlaying, currentTime, duration } = useWaveframeStore(engine);
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => engine.togglePlay()}>
+ *         {isPlaying ? 'Pause' : 'Play'}
+ *       </button>
+ *       <p>{currentTime.toFixed(2)} / {duration.toFixed(2)}</p>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+declare const useWaveframeStore: (engine: WaveframeEngine) => EngineState;
+
+declare const useResampledPeaks: (peaks: number[], targetCount: number) => number[];
+
+declare const useResizeObserver: (ref: React.RefObject<HTMLElement | null>) => number;
+
+/**
+ * Loads audio from a URL, decodes it, and generates a specific number of peaks (samples).
+ *
+ * This is a high-level utility function that internally manages a `PeakAnalyzer` instance.
+ *
+ * @param audioUrl The URL of the audio file to analyze.
+ * @param samples The number of peaks (bars) to generate. Defaults to 512.
+ * @returns A promise resolving to an array of normalized peak values (0 to 1).
+ *
+ * @example
+ * ```typescript
+ * const peaks = await generatePeaks('https://example.com/audio.mp3', 256);
+ * ```
+ */
+declare const generatePeaks: (audioUrl: string, samples?: number) => Promise<number[]>;
+/**
+ * Loads audio into memory as a Blob and returns a temporary Object URL.
+ *
+ * Useful for ensuring audio data is fully loaded locally before starting
+ * playback or analysis, which can help with CORS issues or slow networks.
+ *
+ * @param url The URL of the remote audio file.
+ * @returns A promise resolving to a temporary `blob:` URL.
+ */
+declare const loadAudioToMemory: (url: string) => Promise<string>;
+/**
+ * Cleanup function to prevent memory leaks from Object URLs.
+ *
+ * Call this when a `blob:` URL is no longer needed (e.g., when the component unmounts).
+ *
+ * @param url The Object URL to revoke.
+ */
+declare const revokeAudioMemory: (url: string) => void;
+
+/**
+ * Formats seconds into a M:SS string
+ */
+declare const formatTime: (seconds: number) => string;
+/**
+ * Resamples an array of peaks to a target count using bucket-max or linear interpolation
+ */
+declare const resamplePeaks: (peaks: number[], targetCount: number) => number[];
+/**
+ * High-performance token-based syntax highlighter for React snippets
+ */
+declare const highlightCode: (code: string) => string[];
+
+export { type EngineListener, type EngineState, PeakAnalyzer, PlayerCore, type PlayerListener, type PlayerState, type Resolution, type TrackInfo, type UseWaveframeOptions, Waveform, type WaveformConfig, WaveframeEngine, WaveframePlayer, type WaveframePlayerProps, type WaveframeTheme, formatTime, generatePeaks, highlightCode, loadAudioToMemory, resamplePeaks, revokeAudioMemory, useResampledPeaks, useResizeObserver, useWaveframe, useWaveframeStore };

package/dist/index.js

@@ -0,0 +1,4 @@
+"use client";
+import {memo,useRef,useEffect,useState,useMemo,useSyncExternalStore}from'react';import {jsxs,jsx}from'react/jsx-runtime';var T=class{audio;listeners=new Set;_state;constructor(){this.audio=new Audio,this._state={isPlaying:false,currentTime:0,duration:0,volume:1,muted:false,error:null},this.initListeners();}initListeners(){this.audio.addEventListener("play",()=>this.updateState({isPlaying:true,error:null})),this.audio.addEventListener("pause",()=>this.updateState({isPlaying:false})),this.audio.addEventListener("timeupdate",()=>this.updateState({currentTime:this.audio.currentTime})),this.audio.addEventListener("durationchange",()=>this.updateState({duration:this.audio.duration})),this.audio.addEventListener("volumechange",()=>this.updateState({volume:this.audio.volume,muted:this.audio.muted})),this.audio.addEventListener("ended",()=>this.updateState({isPlaying:false})),this.audio.addEventListener("error",()=>{let t=this.audio.error,e="Unknown audio error";if(t)switch(t.code){case t.MEDIA_ERR_ABORTED:e="Playback aborted";break;case t.MEDIA_ERR_NETWORK:e="Network error";break;case t.MEDIA_ERR_DECODE:e="Audio decoding failed";break;case t.MEDIA_ERR_SRC_NOT_SUPPORTED:e="Audio format not supported";break}this.updateState({isPlaying:false,error:e});});}updateState(t){this._state={...this._state,...t},this.notify();}notify(){this.listeners.forEach(t=>t(this._state));}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}get state(){return this._state}setSource(t){this.audio.src=t,this.audio.load(),this.updateState({error:null,currentTime:0,duration:0});}async play(){try{await this.audio.play();}catch(t){let e=t instanceof Error?t.message:"Playback failed";throw this.updateState({isPlaying:false,error:e}),t}}pause(){this.audio.pause();}async togglePlay(){if(this._state.isPlaying)this.pause();else try{await this.play();}catch{}}seek(t){this.audio.currentTime=t;}setVolume(t){this.audio.volume=t;}setMuted(t){this.audio.muted=t;}dispose(){this.pause(),this.audio.src="",this.listeners.clear();}};var R=class{audioCtx=null;constructor(){}getContext(){return this.audioCtx||(this.audioCtx=new(window.AudioContext||window.webkitAudioContext)),this.audioCtx}async generatePeaks(t,e=512){try{let o;if(typeof t=="string"){let c=await fetch(t);if(!c.ok)throw new Error(`Failed to fetch audio: ${c.statusText}`);o=await c.arrayBuffer();}else o=await t.arrayBuffer();let n=(await this.getContext().decodeAudioData(o)).getChannelData(0),s=Math.floor(n.length/e),l=[];for(let c=0;c<e;c++){let u=0,g=c*s,d=g+s;for(let y=g;y<d;y++){let S=Math.abs(n[y]);S>u&&(u=S);}l.push(u);}let x=Math.max(...l);return l.map(c=>c/(x||1))}catch(o){throw console.error("PeakAnalyzer Error:",o),o}}dispose(){this.audioCtx&&(this.audioCtx.close(),this.audioCtx=null);}};var W=class{player;analyzer;listeners=new Set;_state;_media=null;_objectUrl=null;constructor(){this.player=new T,this.analyzer=new R,this._state={...this.player.state,peaks:[],isAnalyzing:false,error:null},this.player.subscribe(t=>{this.updateState({...t});});}updateState(t){this._state={...this._state,...t},this.notify();}notify(){this.listeners.forEach(t=>t(this._state));}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}getSnapshot(){return this._state}revokeOldSource(){this._objectUrl&&(URL.revokeObjectURL(this._objectUrl),this._objectUrl=null);}load(t,e){if(this._media!==t){this.revokeOldSource(),this._media=t;let i;typeof t=="string"?i=t:(this._objectUrl=URL.createObjectURL(t),i=this._objectUrl),this.player.setSource(i);let a=e&&e.length>0;this.updateState({peaks:e||[],isAnalyzing:false,error:null}),a||this.analyze();}else e&&e.length!==this._state.peaks.length&&this.updateState({peaks:e});}async analyze(t=512){if(!this._media){this.updateState({error:"No media loaded to analyze"});return}this.updateState({isAnalyzing:true,error:null});try{let e=await this.analyzer.generatePeaks(this._media,t);this.updateState({peaks:e,isAnalyzing:!1});}catch(e){this.updateState({isAnalyzing:false,error:e instanceof Error?e.message:"Analysis failed"});}}togglePlay(){this.player.togglePlay();}play(){this.player.play();}pause(){this.player.pause();}seek(t){let{duration:e}=this._state;e&&this.player.seek(t*e);}setVolume(t){this.player.setVolume(t);}setMuted(t){this.player.setMuted(t);}dispose(){this.revokeOldSource(),this.player.dispose(),this.analyzer.dispose(),this.listeners.clear();}};var q=r=>useSyncExternalStore(t=>r.subscribe(t),()=>r.getSnapshot());var Q=(r,t={})=>{let{peaks:e,engine:o}=t,i=useMemo(()=>o||new W,[o]),a=o||i,n=q(a);return useEffect(()=>{r&&a.load(r,e);},[a,r,e]),useEffect(()=>()=>{o||i.dispose();},[i,o]),{state:n,engine:a,togglePlay:()=>a.togglePlay(),play:()=>a.play(),pause:()=>a.pause(),seek:s=>a.seek(s),setVolume:s=>a.setVolume(s),setMuted:s=>a.setMuted(s),analyze:s=>a.analyze(s)}};var At=async(r,t=512)=>{let e=new R;try{return await e.generatePeaks(r,t)}finally{e.dispose();}},Lt=async r=>{let e=await(await fetch(r)).blob();return URL.createObjectURL(e)},jt=r=>{r&&r.startsWith("blob:")&&URL.revokeObjectURL(r);};var H=r=>{if(isNaN(r))return "0:00";let t=Math.floor(r/60),e=Math.floor(r%60);return `${t}:${e.toString().padStart(2,"0")}`},Y=(r,t)=>{if(r.length===0)return [];if(r.length===t)return r;let e=new Array(t),o=r.length/t;if(o>1)for(let i=0;i<t;i++){let a=0,n=Math.floor(i*o),s=Math.floor((i+1)*o);for(let l=n;l<s;l++)r[l]>a&&(a=r[l]);e[i]=a;}else for(let i=0;i<t;i++){let a=i*o,n=Math.floor(a),s=Math.min(n+1,r.length-1),l=a-n;e[i]=r[n]+(r[s]-r[n])*l;}return e},Wt=r=>r.split(`
+`).map(t=>{let e=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),o={},i=0,a=(n,s)=>{let l=`__TOKEN_${i++}__`;return o[l]=`<span class="${s}">${n}</span>`,l};return e=e.replace(/("(?:[^"\\]|\\.)*")/g,n=>a(n,"text-[#ce9178]")),e=e.replace(/\b(\d+(\.\d+)?)\b/g,n=>a(n,"text-[#b5cea8]")),e=e.replace(/\b(WaveframePlayer)\b/g,n=>a(n,"text-[#4ec9b0]")),e=e.replace(/\b([a-z][a-zA-Z0-9]+)(?==)/g,n=>a(n,"text-[#9cdcfe]")),e=e.replace(/(&lt;|&gt;|\{|\}|\/|:|,)/g,'<span class="text-gray-500">$1</span>'),Object.entries(o).forEach(([n,s])=>{e=e.replace(n,s);}),e});var tt=(r,t)=>useMemo(()=>Y(r,t),[r,t]);var U=r=>{let[t,e]=useState(0);return useEffect(()=>{if(!r.current)return;let o=new ResizeObserver(i=>{for(let a of i)e(a.contentRect.width);});return o.observe(r.current),()=>o.disconnect()},[r]),t};var I=memo(({artworkUrl:r,title:t,isLoading:e})=>jsxs("div",{className:"relative flex-shrink-0 w-32 h-32 md:w-40 md:h-40 overflow-hidden rounded-[var(--wf-artwork-rounded,0.75rem)] shadow-lg group/artwork",children:[jsx("div",{className:`w-full h-full transition-all duration-700 ${e?"blur-md scale-110":""}`,children:r?jsx("img",{src:r,alt:t,className:"w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110"}):jsx("div",{className:"w-full h-full bg-gradient-to-br from-[var(--wf-placeholder-from,#fb923c)] to-[var(--wf-placeholder-to,#ec4899)] flex items-center justify-center",children:jsx("svg",{className:"w-16 h-16 text-white opacity-50",fill:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{d:"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"})})})}),e&&jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]",children:jsx("div",{className:"w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin"})})]}));I.displayName="ArtworkOverlay";var K=memo(({peaks:r,currentTime:t,duration:e,waveColor:o,progressColor:i,height:a,onSeek:n,resolution:s="auto",barWidth:l=2,barGap:x=1})=>{let c=useRef(null),u=useRef(null),g=useRef(null),d=U(g);useEffect(()=>{let f=c.current,b=u.current;if(!f||!b)return;let h=f.getContext("2d"),p=b.getContext("2d");if(!h||!p)return;let k=window.devicePixelRatio||1,E=f.getBoundingClientRect(),M=E.width*k,N=E.height*k;[f,b].forEach(w=>{(w.width!==M||w.height!==N)&&(w.width=M,w.height=N);}),(()=>{if(r.length===0)return;let{width:w,height:m}=f;h.clearRect(0,0,w,m),p.clearRect(0,0,w,m);let B=r.length,A=w/B,P=typeof s=="number"?A*.7:l*k,D=typeof s=="number"?A*.3:x*k;h.lineCap="round",h.lineWidth=P,p.lineCap="round",p.lineWidth=P,r.forEach((L,C)=>{if(L<=0)return;let j=C*(P+D)+P/2,X=L*m*.8,$=(m-X)/2,Z=$+X;h.beginPath(),h.strokeStyle=o,h.moveTo(j,$),h.lineTo(j,Z),h.stroke(),p.beginPath(),p.strokeStyle=i,p.moveTo(j,$),p.lineTo(j,Z),p.stroke();});})();},[r,o,i,s,l,x,a]);let y=f=>{if(g.current&&e){let b=g.current.getBoundingClientRect(),h=f.clientX-b.left,p=Math.max(0,Math.min(1,h/b.width));n(p);}},S=e?t/e*100:0;return jsxs("div",{ref:g,className:"relative w-full cursor-pointer overflow-hidden",style:{height:`${a}px`},onClick:y,children:[jsx("canvas",{ref:c,className:"absolute inset-0 w-full h-full"}),jsx("div",{className:"absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none",style:{width:`${S}%`},children:jsx("canvas",{ref:u,className:"absolute h-full",style:{width:`${d}px`}})})]})});K.displayName="Waveform";var ut=memo(({media:r,peaks:t,artwork:e,title:o,artist:i,waveColor:a,progressColor:n,height:s=80,className:l="",style:x,resolution:c="auto",barWidth:u=2,barGap:g=1,theme:d,engine:y})=>{let{state:S,togglePlay:f,seek:b}=Q(r,{peaks:t,engine:y}),{isPlaying:h,currentTime:p,duration:k,peaks:E,isAnalyzing:M}=S,[N,O]=useState(typeof e=="string"?e:void 0);useEffect(()=>{if(e instanceof Blob){let C=URL.createObjectURL(e);return O(C),()=>URL.revokeObjectURL(C)}else O(e);},[e]);let w=useRef(null),m=U(w),B=useMemo(()=>typeof c=="number"?c:m>0?Math.max(1,Math.floor(m/(u+g))):E.length||1,[c,m,u,g,E.length]),A=tt(E,B),P=useMemo(()=>a||(d?d.bg==="#ffffff"?"#e5e7eb":"#374151":"#e5e7eb"),[a,d]),D=n||d?.primary||"#3b82f6",L=useMemo(()=>({...{"--wf-bg-color":d?.bg||"white","--wf-border-color":d?.border||"#f3f4f6","--wf-title-color":d?.text||"#111827","--wf-artist-color":d?.text||"#6b7280","--wf-time-color":d?.text||"#9ca3af","--wf-play-btn-bg":d?.primary||"#3b82f6","--wf-placeholder-from":d?.primary||"#fb923c","--wf-placeholder-to":d?.bg||"#ec4899"},...x}),[d,x]);return jsxs("div",{className:`group relative flex flex-col md:flex-row items-stretch gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${l}`,style:L,children:[jsx(I,{artworkUrl:N,title:o,isLoading:M}),jsxs("div",{className:"flex-1 w-full flex flex-col min-w-0",children:[jsxs("div",{className:"flex items-center gap-4 mb-6",children:[jsx("button",{onClick:f,className:"w-12 h-12 md:w-14 md:h-14 flex-shrink-0 flex items-center justify-center rounded-full bg-[var(--wf-play-btn-bg,#3b82f6)] text-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.2)] transition-all hover:scale-105 active:scale-95 cursor-pointer border-none outline-none group/play",children:h?jsx("svg",{className:"w-6 h-6 md:w-7 md:h-7",fill:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"})}):jsx("svg",{className:"w-6 h-6 md:w-7 md:h-7 ml-1",fill:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{d:"M8 5v14l11-7z"})})}),jsxs("div",{className:"flex-1 flex flex-col min-w-0",children:[jsxs("div",{className:"flex items-center justify-between gap-4",children:[i&&jsx("p",{className:"text-[10px] md:text-xs font-bold uppercase text-[var(--wf-artist-color,#6b7280)] opacity-60 tracking-[0.1em] line-clamp-1",children:i}),jsxs("div",{className:"text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0",children:[H(p)," / ",H(k)]})]}),o&&jsx("h3",{className:"text-lg md:text-xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1 mt-0.5 leading-tight",children:o})]})]}),jsx("div",{className:"mt-auto",ref:w,children:jsx(K,{peaks:A,currentTime:p,duration:k,waveColor:P,progressColor:D,height:s,onSeek:b,resolution:c,barWidth:u,barGap:g})})]})]})});ut.displayName="WaveframePlayer";export{R as PeakAnalyzer,T as PlayerCore,K as Waveform,W as WaveframeEngine,ut as WaveframePlayer,H as formatTime,At as generatePeaks,Wt as highlightCode,Lt as loadAudioToMemory,Y as resamplePeaks,jt as revokeAudioMemory,tt as useResampledPeaks,U as useResizeObserver,Q as useWaveframe,q as useWaveframeStore};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map