waveframe 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React$1 from 'react';
 
 /**
  * Defines the core color palette for the Waveframe component.
@@ -82,6 +82,8 @@ interface WaveformConfig {
 type PlayerState = {
     /** Whether the audio is currently playing */
     isPlaying: boolean;
+    /** Whether the audio is stalled (waiting for data) */
+    isStalled: boolean;
     /** The current playback time in seconds */
     currentTime: number;
     /** The total duration of the track in seconds */
@@ -90,6 +92,8 @@ type PlayerState = {
     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.
@@ -147,7 +151,7 @@ declare class PlayerCore {
     /**
      * Toggles between play and pause states.
      */
-    togglePlay(): void;
+    togglePlay(): Promise<void>;
     /**
      * Seeks to a specific time.
      * @param time Time in seconds.
@@ -170,7 +174,7 @@ declare class PlayerCore {
 }
 
 /**
- * Represents the complete state of the Waveframe engine, combining playback and analysis.
+ * Represents the complete state of the Waveframe controller, combining playback and analysis.
  */
 type EngineState = PlayerState & {
     /** The current set of generated or provided waveform peaks (0-1 range) */
@@ -192,21 +196,21 @@ type EngineListener = (state: EngineState) => void;
  *
  * @example
  * ```typescript
- * const engine = new WaveframeEngine();
+ * const controller = new WaveframeController();
  *
  * // Load from URL (automatic analysis if peaks omitted)
- * engine.load('https://example.com/audio.mp3');
+ * controller.load('https://example.com/audio.mp3');
  *
  * // Load from Blob with pre-computed peaks
- * engine.load(myBlob, [0.1, 0.5, 0.8]);
+ * controller.load(myBlob, [0.1, 0.5, 0.8]);
  *
  * // Subscription
- * const unsubscribe = engine.subscribe((state) => {
+ * const unsubscribe = controller.subscribe((state) => {
  *   console.log('Current time:', state.currentTime);
  * });
  * ```
  */
-declare class WaveframeEngine {
+declare class WaveframeController {
     private player;
     private analyzer;
     private listeners;
@@ -214,7 +218,7 @@ declare class WaveframeEngine {
     private _media;
     private _objectUrl;
     /**
-     * Creates a new instance of the WaveframeEngine.
+     * Creates a new instance of the WaveframeController.
      * Initializes internal PlayerCore and PeakAnalyzer.
      */
     constructor();
@@ -237,6 +241,14 @@ declare class WaveframeEngine {
      * Useful for `useSyncExternalStore`.
      */
     getSnapshot(): EngineState;
+    /**
+     * Returns the current engine state.
+     */
+    get state(): EngineState;
+    /**
+     * Resets the audio player and analyzer, clearing state and current media.
+     */
+    reset(): void;
     /**
      * Revokes any existing Object URLs to prevent memory leaks.
      */
@@ -261,11 +273,11 @@ declare class WaveframeEngine {
     /**
      * Toggles playback between playing and paused.
      */
-    togglePlay(): void;
+    togglePlay(): Promise<void>;
     /**
      * Starts audio playback.
      */
-    play(): void;
+    play(): Promise<void>;
     /**
      * Pauses audio playback.
      */
@@ -286,7 +298,7 @@ declare class WaveframeEngine {
      */
     setMuted(muted: boolean): void;
     /**
-     * Disposes of the engine, pausing playback and clearing all listeners and resources.
+     * Disposes of the controller, pausing playback and clearing all listeners and resources.
      */
     dispose(): void;
 }
@@ -338,7 +350,7 @@ interface WaveframePlayerProps {
     /**
      * Inline styles for the container
      */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /**
      * The number of bars to render. Use 'auto' to fit the container width.
      * @default "auto"
@@ -359,10 +371,10 @@ interface WaveframePlayerProps {
      */
     theme?: WaveframeTheme;
     /**
-     * Optional WaveframeEngine instance for external control.
-     * If provided, the player will sync with this engine instead of creating its own.
+     * Optional WaveframeController instance for external control.
+     * If provided, the player will sync with this controller instead of creating its own.
      */
-    engine?: WaveframeEngine;
+    controller?: WaveframeController;
 }
 /**
  * The standard "all-in-one" Waveframe player component.
@@ -370,7 +382,41 @@ interface WaveframePlayerProps {
  * This component features a SoundCloud-inspired layout with a prominent
  * play/pause button positioned next to the track metadata.
  */
-declare const WaveframePlayer: React.FC<WaveframePlayerProps>;
+declare const WaveframePlayer: React$1.FC<WaveframePlayerProps>;
+
+interface WaveformProps {
+    /** The WaveframeController instance managing audio state */
+    controller: WaveframeController;
+    /** Optional pre-computed peaks. If omitted, peaks from the controller are used. */
+    peaks?: number[];
+    /** Color of the background waveform bars */
+    waveColor?: string;
+    /** Color of the progress (played) waveform bars */
+    progressColor?: string;
+    /** Total height of the waveform in pixels */
+    height?: number;
+    /**
+     * Resolution of the waveform.
+     * 'auto' matches the container width (1 bar per pixel).
+     * A number sets a fixed number of bars.
+     */
+    resolution?: number | 'auto';
+    /** Width of each bar in pixels (if resolution is 'auto') */
+    barWidth?: number;
+    /** Gap between bars in pixels (if resolution is 'auto') */
+    barGap?: number;
+    /** Overall amplitude multiplier (default 1.0) */
+    amplitude?: number;
+    /** Non-linear power scale to increase detail (e.g. 0.7-0.9 reduces 'sausage' look). Default 1.0 (linear). */
+    powerScale?: number;
+}
+/**
+ * A "smart" waveform component that visualizes audio progress and allows seeking.
+ *
+ * It subscribes directly to the provided WaveframeController for high-frequency
+ * progress updates, ensuring the parent component remains immune to re-renders.
+ */
+declare const Waveform: React$1.FC<WaveformProps>;
 
 /**
  * A specialized class for decoding audio data and generating waveform peaks.
@@ -415,31 +461,70 @@ declare class PeakAnalyzer {
 }
 
 /**
- * A React hook that synchronizes a WaveframeEngine's state with a React component.
+ * Configuration options for the `useWaveframe` hook.
+ */
+interface UseWaveframeOptions {
+    /** Optional pre-computed peaks to skip automatic analysis */
+    peaks?: number[];
+    /** Optional external controller instance for shared playback across components */
+    controller?: WaveframeController;
+    /** Whether to automatically start playback when media is loaded */
+    autoPlay?: boolean;
+}
+/**
+ * A headless hook that manages the lifecycle of a WaveframeController.
  *
- * It uses `useSyncExternalStore` for high-performance updates, ensuring that
- * the component only re-renders when the engine's state snapshot actually changes.
+ * It returns a stable controller instance that can be passed to components
+ * like <Waveform /> or used for custom playback logic.
  *
- * @param engine The WaveframeEngine instance to subscribe to.
- * @returns The current EngineState (isPlaying, currentTime, peaks, etc.).
+ * @param media The audio source (URL string or Blob/File object).
+ * @param options Additional configuration and an optional external controller.
  *
  * @example
  * ```tsx
- * const MyPlayer = ({ engine }: { engine: WaveframeEngine }) => {
- *   const { isPlaying, currentTime, duration } = useWaveframeStore(engine);
+ * const { controller, state } = useWaveframe('https://example.com/audio.mp3');
  *
- *   return (
- *     <div>
- *       <button onClick={() => engine.togglePlay()}>
- *         {isPlaying ? 'Pause' : 'Play'}
- *       </button>
- *       <p>{currentTime.toFixed(2)} / {duration.toFixed(2)}</p>
- *     </div>
- *   );
- * };
+ * return (
+ *   <div>
+ *     <Waveform controller={controller} />
+ *     <button onClick={() => controller.togglePlay()}>
+ *       {state.isPlaying ? 'Pause' : 'Play'}
+ *     </button>
+ *   </div>
+ * );
  * ```
  */
-declare const useWaveframeStore: (engine: WaveframeEngine) => EngineState;
+declare const useWaveframe: (media: string | Blob | undefined, options?: UseWaveframeOptions) => {
+    /** The stable WaveframeController instance */
+    controller: WaveframeController;
+    /** The reactive engine state */
+    state: EngineState;
+};
+
+/**
+ * A React hook that synchronizes a WaveframeController's state with a React component.
+ *
+ * It supports an optional selector function to subscribe to specific parts of the state,
+ * preventing unnecessary re-renders when unrelated state changes.
+ *
+ * @param controller The WaveframeController instance to subscribe to.
+ * @param selector An optional function to select a specific slice of the state.
+ * @returns The selected state or the full EngineState if no selector is provided.
+ *
+ * @example
+ * ```tsx
+ * // Subscribe only to isPlaying
+ * const isPlaying = useWaveframeStore(controller, state => state.isPlaying);
+ *
+ * // Subscribe to the full state
+ * const state = useWaveframeStore(controller);
+ * ```
+ */
+declare function useWaveframeStore<T = EngineState>(controller: WaveframeController, selector?: (state: EngineState) => T): T;
+
+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).
@@ -488,4 +573,4 @@ declare const resamplePeaks: (peaks: number[], targetCount: number) => number[];
  */
 declare const highlightCode: (code: string) => string[];
 
-export { type EngineListener, type EngineState, PeakAnalyzer, PlayerCore, type PlayerListener, type PlayerState, type Resolution, type TrackInfo, type WaveformConfig, WaveframeEngine, WaveframePlayer, type WaveframePlayerProps, type WaveframeTheme, formatTime, generatePeaks, highlightCode, loadAudioToMemory, resamplePeaks, revokeAudioMemory, useWaveframeStore };
+export { type EngineListener, type EngineState, PeakAnalyzer, PlayerCore, type PlayerListener, type PlayerState, type Resolution, type TrackInfo, type UseWaveframeOptions, Waveform, type WaveformConfig, WaveframeController, WaveframePlayer, type WaveframePlayerProps, type WaveframeTheme, formatTime, generatePeaks, highlightCode, loadAudioToMemory, resamplePeaks, revokeAudioMemory, useResampledPeaks, useResizeObserver, useWaveframe, useWaveframeStore };

package/dist/index.js

@@ -1,4 +1,4 @@
 "use client";
-import {memo,useRef,useEffect,useState,useMemo,useSyncExternalStore}from'react';import {jsxs,jsx}from'react/jsx-runtime';var A=class{audio;listeners=new Set;_state;constructor(){this.audio=new Audio,this._state={isPlaying:false,currentTime:0,duration:0,volume:1,muted:false},this.initListeners();}initListeners(){this.audio.addEventListener("play",()=>this.updateState({isPlaying:true})),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}));}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();}play(){return this.audio.play()}pause(){this.audio.pause();}togglePlay(){this._state.isPlaying?this.pause():this.play();}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 C=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 A,this.analyzer=new C,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!==this._state.peaks&&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 Nt=async(r,t=512)=>{let e=new C;try{return await e.generatePeaks(r,t)}finally{e.dispose();}},jt=async r=>{let e=await(await fetch(r)).blob();return URL.createObjectURL(e)},At=r=>{r&&r.startsWith("blob:")&&URL.revokeObjectURL(r);};var V=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},Tt=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 T=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 D=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"})})]}));D.displayName="ArtworkOverlay";var G=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=T(g);useEffect(()=>{let b=c.current,f=u.current;if(!b||!f)return;let h=b.getContext("2d"),p=f.getContext("2d");if(!h||!p)return;let k=window.devicePixelRatio||1,P=b.getBoundingClientRect(),_=P.width*k,L=P.height*k;[b,f].forEach(w=>{(w.width!==_||w.height!==L)&&(w.width=_,w.height=L);}),(()=>{if(r.length===0)return;let{width:w,height:m}=b;h.clearRect(0,0,w,m),p.clearRect(0,0,w,m);let O=r.length,N=w/O,E=typeof s=="number"?N*.7:l*k,B=typeof s=="number"?N*.3:x*k;h.lineCap="round",h.lineWidth=E,p.lineCap="round",p.lineWidth=E,r.forEach(($,R)=>{let j=R*(E+B)+E/2,X=$*m*.8,H=(m-X)/2,Z=H+X;h.beginPath(),h.strokeStyle=o,h.moveTo(j,H),h.lineTo(j,Z),h.stroke(),p.beginPath(),p.strokeStyle=i,p.moveTo(j,H),p.lineTo(j,Z),p.stroke();});})();},[r,o,i,s,l,x,a]);let y=b=>{if(g.current&&e){let f=g.current.getBoundingClientRect(),h=b.clientX-f.left,p=Math.max(0,Math.min(1,h/f.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`}})})]})});G.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:b,seek:f}=Q(r,{peaks:t,engine:y}),{isPlaying:h,currentTime:p,duration:k,peaks:P,isAnalyzing:_}=S,[L,U]=useState(typeof e=="string"?e:void 0);useEffect(()=>{if(e instanceof Blob){let R=URL.createObjectURL(e);return U(R),()=>URL.revokeObjectURL(R)}else U(e);},[e]);let w=useRef(null),m=T(w),O=useMemo(()=>typeof c=="number"?c:m>0?Math.max(1,Math.floor(m/(u+g))):P.length||1,[c,m,u,g,P.length]),N=tt(P,O),E=useMemo(()=>a||(d?d.bg==="#ffffff"?"#e5e7eb":"#374151":"#e5e7eb"),[a,d]),B=n||d?.primary||"#3b82f6",$=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:$,children:[jsx(D,{artworkUrl:L,title:o,isLoading:_}),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:b,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:[V(p)," / ",V(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(G,{peaks:N,currentTime:p,duration:k,waveColor:E,progressColor:B,height:s,onSeek:f,resolution:c,barWidth:u,barGap:g})})]})]})});ut.displayName="WaveframePlayer";export{C as PeakAnalyzer,A as PlayerCore,W as WaveframeEngine,ut as WaveframePlayer,V as formatTime,Nt as generatePeaks,Tt as highlightCode,jt as loadAudioToMemory,Y as resamplePeaks,At as revokeAudioMemory,q as useWaveframeStore};//# sourceMappingURL=index.js.map
+import {memo,useRef,useMemo,useEffect,useState,useSyncExternalStore}from'react';import {jsxs,jsx}from'react/jsx-runtime';var M=class{audio;listeners=new Set;_state;constructor(){this.audio=new Audio,this._state={isPlaying:false,isStalled: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("waiting",()=>this.updateState({isStalled:true})),this.audio.addEventListener("playing",()=>this.updateState({isStalled:false})),this.audio.addEventListener("canplay",()=>this.updateState({isStalled: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,r="Unknown audio error";if(t)switch(t.code){case t.MEDIA_ERR_ABORTED:r="Playback aborted";break;case t.MEDIA_ERR_NETWORK:r="Network error";break;case t.MEDIA_ERR_DECODE:r="Audio decoding failed";break;case t.MEDIA_ERR_SRC_NOT_SUPPORTED:r="Audio format not supported";break}this.updateState({isPlaying:false,error:r});});}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 r=t instanceof Error?t.message:"Playback failed";throw this.updateState({isPlaying:false,error:r}),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 z=class{audioCtx=null;constructor(){}getContext(){return this.audioCtx||(this.audioCtx=new(window.AudioContext||window.webkitAudioContext)),this.audioCtx}async generatePeaks(t,r=512){try{let a;if(typeof t=="string"){let g=await fetch(t);if(!g.ok)throw new Error(`Failed to fetch audio: ${g.statusText}`);a=await g.arrayBuffer();}else a=await t.arrayBuffer();let o=(await this.getContext().decodeAudioData(a)).getChannelData(0),s=Math.floor(o.length/r),l=[];for(let g=0;g<r;g++){let y=0,m=g*s,c=m+s;for(let S=m;S<c;S++){let u=Math.abs(o[S]);u>y&&(y=u);}l.push(y);}let x=Math.max(...l);return l.map(g=>g/(x||1))}catch(a){throw console.error("PeakAnalyzer Error:",a),a}}dispose(){this.audioCtx&&(this.audioCtx.close(),this.audioCtx=null);}};var T=class{player;analyzer;listeners=new Set;_state;_media=null;_objectUrl=null;constructor(){this.player=new M,this.analyzer=new z,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}get state(){return this._state}reset(){this.revokeOldSource(),this._media=null,this.player.dispose(),this.analyzer.dispose(),this.player=new M,this.analyzer=new z,this.player.subscribe(t=>{this.updateState({...t});}),this.updateState({...this.player.state,peaks:[],isAnalyzing:false,error:null});}revokeOldSource(){this._objectUrl&&(URL.revokeObjectURL(this._objectUrl),this._objectUrl=null);}load(t,r){if(this._media===t){r&&r.length!==this._state.peaks.length&&this.updateState({peaks:r});return}this.revokeOldSource(),this._media=t;let a;typeof t=="string"?a=t:(this._objectUrl=URL.createObjectURL(t),a=this._objectUrl),this.player.setSource(a);let n=r&&r.length>0;this.updateState({peaks:r||[],isAnalyzing:false,error:null}),n||this.analyze();}async analyze(t=512){if(!this._media){this.updateState({error:"No media loaded to analyze"});return}this.updateState({isAnalyzing:true,error:null});try{let r=await this.analyzer.generatePeaks(this._media,t);this.updateState({peaks:r,isAnalyzing:!1});}catch(r){this.updateState({isAnalyzing:false,error:r instanceof Error?r.message:"Analysis failed"});}}async togglePlay(){return await this.player.togglePlay()}async play(){return await this.player.play()}pause(){this.player.pause();}seek(t){let{duration:r}=this._state;r&&this.player.seek(t*r);}setVolume(t){this.player.setVolume(t);}setMuted(t){this.player.setMuted(t);}dispose(){this.revokeOldSource(),this.player.dispose(),this.analyzer.dispose(),this.listeners.clear();}};function f(e,t){return useSyncExternalStore(r=>e.subscribe(r),()=>{let r=e.getSnapshot();return t?t(r):r})}var J=(e,t={})=>{let{peaks:r,controller:a,autoPlay:n}=t,i=useRef(false),o=useMemo(()=>a||new T,[a]),s=a||o,l=f(s);return useEffect(()=>(i.current=true,e&&(s.load(e,r),n&&s.play().catch(()=>{})),()=>{i.current=false;}),[s,e,r,n]),useEffect(()=>()=>{a||o.dispose();},[o,a]),{controller:s,state:l}};var O=memo(({artworkUrl:e,title:t,isLoading:r})=>jsxs("div",{className:"relative flex-shrink-0 w-full md:w-auto md:h-full aspect-square 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 ${r?"blur-md scale-110":""}`,children:e?jsx("img",{src:e,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"})})})}),r&&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"})})]}));O.displayName="ArtworkOverlay";var Q=e=>{let[t,r]=useState(0);return useEffect(()=>{if(!e.current)return;let a=new ResizeObserver(n=>{for(let i of n)r(i.contentRect.width);});return a.observe(e.current),()=>a.disconnect()},[e]),t};var It=async(e,t=512)=>{let r=new z;try{return await r.generatePeaks(e,t)}finally{r.dispose();}},Ht=async e=>{let r=await(await fetch(e)).blob();return URL.createObjectURL(r)},Vt=e=>{e&&e.startsWith("blob:")&&URL.revokeObjectURL(e);};var B=e=>{if(isNaN(e))return "0:00";let t=Math.floor(e/60),r=Math.floor(e%60);return `${t}:${r.toString().padStart(2,"0")}`},j=(e,t)=>{if(e.length===0)return [];if(e.length===t)return e;let r=new Array(t),a=e.length/t;if(a>1)for(let n=0;n<t;n++){let i=0,o=Math.floor(n*a),s=Math.floor((n+1)*a);for(let l=o;l<s;l++)e[l]>i&&(i=e[l]);r[n]=i;}else for(let n=0;n<t;n++){let i=n*a,o=Math.floor(i),s=Math.min(o+1,e.length-1),l=i-o;r[n]=e[o]+(e[s]-e[o])*l;}return r},qt=e=>e.split(`
+`).map(t=>{let r=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),a={},n=0,i=(o,s)=>{let l=`__TOKEN_${n++}__`;return a[l]=`<span class="${s}">${o}</span>`,l};return r=r.replace(/("(?:[^"\\]|\\.)*")/g,o=>i(o,"text-[#ce9178]")),r=r.replace(/\b(\d+(\.\d+)?)\b/g,o=>i(o,"text-[#b5cea8]")),r=r.replace(/\b(WaveframePlayer)\b/g,o=>i(o,"text-[#4ec9b0]")),r=r.replace(/\b([a-z][a-zA-Z0-9]+)(?==)/g,o=>i(o,"text-[#9cdcfe]")),r=r.replace(/(&lt;|&gt;|\{|\}|\/|:|,)/g,'<span class="text-gray-500">$1</span>'),Object.entries(a).forEach(([o,s])=>{r=r.replace(o,s);}),r});var I=memo(({controller:e,peaks:t,waveColor:r="#e5e7eb",progressColor:a="#3b82f6",height:n=80,resolution:i="auto",barWidth:o=2,barGap:s=1,amplitude:l=1,powerScale:x=1})=>{let g=useRef(null),y=useRef(null),m=useRef(null),c=Q(m),S=f(e,d=>d.currentTime),u=f(e,d=>d.duration),A=f(e,d=>d.peaks),E=useMemo(()=>{let d=t||A;if(d.length===0)return [];let v=i==="auto"?Math.floor(c/(o+s)):i,p=j(d,Math.max(1,v));return (x!==1||l!==1)&&(p=p.map(h=>Math.pow(h,x)*l)),p},[t,A,c,i,o,s,l,x]);useEffect(()=>{let d=g.current,v=y.current;if(!d||!v)return;let p=d.getContext("2d"),h=v.getContext("2d");if(!p||!h)return;let C=window.devicePixelRatio||1,w=d.getBoundingClientRect(),H=w.width*C,V=w.height*C;[d,v].forEach(k=>{(k.width!==H||k.height!==V)&&(k.width=H,k.height=V);}),(()=>{if(E.length===0)return;let{width:k,height:L}=d;p.clearRect(0,0,k,L),h.clearRect(0,0,k,L);let rt=E.length,F=k/rt,R=typeof i=="number"?F*.7:o*C,et=typeof i=="number"?F*.3:s*C;p.lineCap="round",p.lineWidth=R,h.lineCap="round",h.lineWidth=R;let q=L/2;E.forEach((K,at)=>{if(K<=0)return;let N=at*(R+et)+R/2,G=Math.max(R,K*L*.8),X=q-G/2,Y=q+G/2;p.beginPath(),p.strokeStyle=r,p.moveTo(N,X),p.lineTo(N,Y),p.stroke(),h.beginPath(),h.strokeStyle=a,h.moveTo(N,X),h.lineTo(N,Y),h.stroke();});})();},[E,r,a,i,o,s,n]);let W=d=>{if(m.current&&u){let v=m.current.getBoundingClientRect(),p=d.clientX-v.left,h=Math.max(0,Math.min(1,p/v.width));e.seek(h);}},U=u?S/u*100:0;return jsxs("div",{ref:m,className:"relative w-full cursor-pointer overflow-hidden",style:{height:`${n}px`,"--wf-wave-color":r,"--wf-progress-color":a},onClick:W,children:[jsx("canvas",{ref:g,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:`${U}%`},children:jsx("canvas",{ref:y,className:"absolute h-full",style:{width:`${c}px`}})})]})});I.displayName="Waveform";var bt=memo(({media:e,peaks:t,artwork:r,title:a,artist:n,waveColor:i,progressColor:o,height:s=80,className:l="",style:x,resolution:g="auto",barWidth:y=2,barGap:m=1,theme:c,controller:S})=>{let{controller:u}=J(e,{peaks:t,controller:S}),A=f(u,w=>w.isPlaying),E=f(u,w=>w.isAnalyzing),W=f(u,w=>w.currentTime),U=f(u,w=>w.duration),[d,v]=useState(typeof r=="string"?r:void 0);useEffect(()=>{if(r instanceof Blob){let w=URL.createObjectURL(r);return v(w),()=>URL.revokeObjectURL(w)}else v(r);},[r]);let p=useMemo(()=>i||(c?c.bg==="#ffffff"?"#e5e7eb":"#374151":"#e5e7eb"),[i,c]),h=o||c?.primary||"#3b82f6",C=useMemo(()=>({...{"--wf-bg-color":c?.bg||"white","--wf-border-color":c?.border||"#f3f4f6","--wf-title-color":c?.text||"#111827","--wf-artist-color":c?.text||"#6b7280","--wf-time-color":c?.text||"#9ca3af","--wf-play-btn-bg":c?.primary||"#3b82f6","--wf-placeholder-from":c?.primary||"#fb923c","--wf-placeholder-to":c?.bg||"#ec4899"},...x}),[c,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:C,children:[jsx("div",{className:"flex-shrink-0",children:jsx(O,{artworkUrl:d,title:a,isLoading:E})}),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:()=>u.togglePlay(),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:A?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:[n&&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:n}),jsxs("div",{className:"text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0",children:[B(W)," / ",B(U)]})]}),a&&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:a})]})]}),jsx("div",{className:"mt-auto",children:jsx(I,{controller:u,peaks:t,waveColor:p,progressColor:h,height:s,resolution:g,barWidth:y,barGap:m})})]})]})});bt.displayName="WaveframePlayer";var gr=(e,t)=>useMemo(()=>j(e,t),[e,t]);export{z as PeakAnalyzer,M as PlayerCore,I as Waveform,T as WaveframeController,bt as WaveframePlayer,B as formatTime,It as generatePeaks,qt as highlightCode,Ht as loadAudioToMemory,j as resamplePeaks,Vt as revokeAudioMemory,gr as useResampledPeaks,Q as useResizeObserver,J as useWaveframe,f as useWaveframeStore};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map