waveframe 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -1,2 +1,491 @@
-export * from './src/index.js'
-export {}
+import React 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;
+};
+/**
+ * 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(): 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.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.FC<WaveframePlayerProps>;
+
+/**
+ * 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;
+}
+
+/**
+ * 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;
+
+/**
+ * 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 WaveformConfig, WaveframeEngine, WaveframePlayer, type WaveframePlayerProps, type WaveframeTheme, formatTime, generatePeaks, highlightCode, loadAudioToMemory, resamplePeaks, revokeAudioMemory, 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 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
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/PlayerCore.ts","../src/core/PeakAnalyzer.ts","../src/core/WaveframeEngine.ts","../src/hooks/useWaveframeStore.ts","../src/hooks/useWaveframe.ts","../src/utils/audio.ts","../src/utils/index.ts","../src/hooks/useResampledPeaks.ts","../src/hooks/useResizeObserver.ts","../src/molecules/ArtworkOverlay.tsx","../src/organisms/Waveform.tsx","../src/components/WaveframePlayer.tsx"],"names":["PlayerCore","patch","l","listener","url","time","volume","muted","PeakAnalyzer","media","samples","arrayBuffer","response","channelData","blockSize","peaks","i","max","start","end","j","val","maxPeak","p","error","WaveframeEngine","playerState","sourceUrl","hasPeaks","percentage","duration","useWaveframeStore","engine","useSyncExternalStore","callback","useWaveframe","options","providedEngine","internalEngine","useMemo","state","useEffect","v","m","generatePeaks","audioUrl","analyzer","loadAudioToMemory","blob","revokeAudioMemory","formatTime","seconds","min","sec","resamplePeaks","targetCount","resampled","ratio","position","index","nextIndex","fraction","highlightCode","code","line","h","tokens","counter","addToken","cls","id","html","useResampledPeaks","useResizeObserver","ref","width","setWidth","useState","observer","entries","entry","ArtworkOverlay","memo","artworkUrl","title","isLoading","jsxs","jsx","Waveform","currentTime","waveColor","progressColor","height","onSeek","resolution","barWidth","barGap","canvasRef","useRef","progressCanvasRef","containerRef","containerWidth","canvas","progressCanvas","ctx","pCtx","dpr","rect","targetWidth","targetHeight","c","barCount","actualBarTotalWidth","actualBarWidth","actualBarGap","peak","x","barHeight","yStart","yEnd","handleSeek","e","progressPercent","WaveframePlayer","propPeaks","artwork","artist","propWaveColor","propProgressColor","className","propStyle","theme","togglePlay","seek","isPlaying","isAnalyzing","resolvedArtworkUrl","setResolvedArtworkUrl","resampledPeaks","mergedStyle"],"mappings":"yHA2BO,IAAMA,CAAAA,CAAN,KAAiB,CACd,MACA,SAAA,CAAiC,IAAI,GAAA,CACrC,MAAA,CAKR,WAAA,EAAc,CACZ,IAAA,CAAK,KAAA,CAAQ,IAAI,KAAA,CACjB,IAAA,CAAK,MAAA,CAAS,CACZ,SAAA,CAAW,KAAA,CACX,WAAA,CAAa,CAAA,CACb,QAAA,CAAU,CAAA,CACV,MAAA,CAAQ,CAAA,CACR,KAAA,CAAO,KACT,CAAA,CAEA,IAAA,CAAK,gBACP,CAKQ,aAAA,EAAgB,CACtB,IAAA,CAAK,KAAA,CAAM,gBAAA,CAAiB,MAAA,CAAQ,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,SAAA,CAAW,IAAK,CAAC,CAAC,CAAA,CAC/E,KAAK,KAAA,CAAM,gBAAA,CAAiB,OAAA,CAAS,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,SAAA,CAAW,KAAM,CAAC,CAAC,CAAA,CACjF,IAAA,CAAK,KAAA,CAAM,gBAAA,CAAiB,YAAA,CAAc,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,WAAA,CAAa,IAAA,CAAK,KAAA,CAAM,WAAY,CAAC,CAAC,CAAA,CACzG,IAAA,CAAK,KAAA,CAAM,gBAAA,CAAiB,gBAAA,CAAkB,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,QAAA,CAAU,IAAA,CAAK,KAAA,CAAM,QAAS,CAAC,CAAC,CAAA,CACvG,IAAA,CAAK,KAAA,CAAM,gBAAA,CAAiB,cAAA,CAAgB,IAAM,IAAA,CAAK,WAAA,CAAY,CACjE,MAAA,CAAQ,KAAK,KAAA,CAAM,MAAA,CACnB,KAAA,CAAO,IAAA,CAAK,KAAA,CAAM,KACpB,CAAC,CAAC,EACF,IAAA,CAAK,KAAA,CAAM,gBAAA,CAAiB,OAAA,CAAS,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,UAAW,KAAM,CAAC,CAAC,EACnF,CAKQ,WAAA,CAAYC,CAAAA,CAA6B,CAC/C,IAAA,CAAK,MAAA,CAAS,CAAE,GAAG,IAAA,CAAK,MAAA,CAAQ,GAAGA,CAAM,EACzC,IAAA,CAAK,MAAA,GACP,CAKQ,MAAA,EAAS,CACf,IAAA,CAAK,SAAA,CAAU,QAAQC,CAAAA,EAAKA,CAAAA,CAAE,IAAA,CAAK,MAAM,CAAC,EAC5C,CAOO,SAAA,CAAUC,EAA0B,CACzC,OAAA,IAAA,CAAK,SAAA,CAAU,GAAA,CAAIA,CAAQ,CAAA,CACpB,IAAM,IAAA,CAAK,SAAA,CAAU,MAAA,CAAOA,CAAQ,CAC7C,CAKA,IAAW,KAAA,EAAQ,CACjB,OAAO,IAAA,CAAK,MACd,CAMO,SAAA,CAAUC,CAAAA,CAAa,CAC5B,IAAA,CAAK,KAAA,CAAM,IAAMA,CAAAA,CACjB,IAAA,CAAK,KAAA,CAAM,IAAA,GACb,CAKO,IAAA,EAAO,CACZ,OAAO,IAAA,CAAK,KAAA,CAAM,IAAA,EACpB,CAKO,KAAA,EAAQ,CACb,IAAA,CAAK,KAAA,CAAM,KAAA,GACb,CAKO,UAAA,EAAa,CACd,IAAA,CAAK,MAAA,CAAO,UACd,IAAA,CAAK,KAAA,EAAM,CAEX,IAAA,CAAK,IAAA,GAET,CAMO,IAAA,CAAKC,EAAc,CACxB,IAAA,CAAK,KAAA,CAAM,WAAA,CAAcA,EAC3B,CAMO,SAAA,CAAUC,CAAAA,CAAgB,CAC/B,IAAA,CAAK,KAAA,CAAM,MAAA,CAASA,EACtB,CAMO,QAAA,CAASC,CAAAA,CAAgB,CAC9B,IAAA,CAAK,KAAA,CAAM,KAAA,CAAQA,EACrB,CAKO,OAAA,EAAU,CACf,IAAA,CAAK,OAAM,CACX,IAAA,CAAK,KAAA,CAAM,GAAA,CAAM,EAAA,CACjB,IAAA,CAAK,SAAA,CAAU,KAAA,GACjB,CACF,EC3JO,IAAMC,CAAAA,CAAN,KAAmB,CAChB,QAAA,CAAgC,IAAA,CAMxC,aAAc,CAAC,CAKP,UAAA,EAA2B,CACjC,OAAK,IAAA,CAAK,QAAA,GACR,IAAA,CAAK,QAAA,CAAW,IAAK,MAAA,CAAO,YAAA,EAAiB,MAAA,CAAe,kBAAA,CAAA,CAAA,CAEvD,IAAA,CAAK,QACd,CAoBA,MAAa,aAAA,CAAcC,CAAAA,CAAsBC,CAAAA,CAAkB,GAAA,CAAwB,CACzF,GAAI,CACF,IAAIC,CAAAA,CAEJ,GAAI,OAAOF,CAAAA,EAAU,QAAA,CAAU,CAC7B,IAAMG,CAAAA,CAAW,MAAM,KAAA,CAAMH,CAAK,CAAA,CAClC,GAAI,CAACG,CAAAA,CAAS,EAAA,CAAI,MAAM,IAAI,KAAA,CAAM,CAAA,uBAAA,EAA0BA,CAAAA,CAAS,UAAU,CAAA,CAAE,CAAA,CACjFD,CAAAA,CAAc,MAAMC,CAAAA,CAAS,WAAA,GAC/B,CAAA,KACED,CAAAA,CAAc,MAAMF,CAAAA,CAAM,WAAA,GAM5B,IAAMI,CAAAA,CAAAA,CAFc,MADH,IAAA,CAAK,UAAA,EAAW,CACE,eAAA,CAAgBF,CAAW,GAE9B,cAAA,CAAe,CAAC,CAAA,CAC1CG,CAAAA,CAAY,IAAA,CAAK,KAAA,CAAMD,CAAAA,CAAY,MAAA,CAASH,CAAO,CAAA,CACnDK,CAAAA,CAAQ,EAAC,CAEf,IAAA,IAASC,CAAAA,CAAI,CAAA,CAAGA,EAAIN,CAAAA,CAASM,CAAAA,EAAAA,CAAK,CAChC,IAAIC,CAAAA,CAAM,CAAA,CACJC,CAAAA,CAAQF,CAAAA,CAAIF,EACZK,CAAAA,CAAMD,CAAAA,CAAQJ,CAAAA,CAEpB,IAAA,IAASM,CAAAA,CAAIF,CAAAA,CAAOE,CAAAA,CAAID,CAAAA,CAAKC,IAAK,CAChC,IAAMC,CAAAA,CAAM,IAAA,CAAK,GAAA,CAAIR,CAAAA,CAAYO,CAAC,CAAC,CAAA,CAC/BC,CAAAA,CAAMJ,CAAAA,GAAKA,CAAAA,CAAMI,CAAAA,EACvB,CACAN,CAAAA,CAAM,IAAA,CAAKE,CAAG,EAChB,CAGA,IAAMK,CAAAA,CAAU,IAAA,CAAK,GAAA,CAAI,GAAGP,CAAK,EACjC,OAAOA,CAAAA,CAAM,GAAA,CAAIQ,CAAAA,EAAKA,CAAAA,EAAKD,CAAAA,EAAW,CAAA,CAAE,CAC1C,OAASE,CAAAA,CAAO,CACd,MAAA,OAAA,CAAQ,KAAA,CAAM,qBAAA,CAAuBA,CAAK,CAAA,CACpCA,CACR,CACF,CAKO,OAAA,EAAU,CACX,IAAA,CAAK,QAAA,GACP,IAAA,CAAK,QAAA,CAAS,OAAM,CACpB,IAAA,CAAK,QAAA,CAAW,IAAA,EAEpB,CACF,EClDO,IAAMC,CAAAA,CAAN,KAAsB,CACnB,MAAA,CACA,QAAA,CACA,SAAA,CAAiC,IAAI,GAAA,CACrC,MAAA,CAEA,MAAA,CAA+B,KAC/B,UAAA,CAA4B,IAAA,CAMpC,WAAA,EAAc,CACZ,IAAA,CAAK,MAAA,CAAS,IAAIzB,CAAAA,CAClB,IAAA,CAAK,QAAA,CAAW,IAAIQ,CAAAA,CAEpB,IAAA,CAAK,MAAA,CAAS,CACZ,GAAG,KAAK,MAAA,CAAO,KAAA,CACf,KAAA,CAAO,EAAC,CACR,WAAA,CAAa,KAAA,CACb,KAAA,CAAO,IACT,CAAA,CAGA,IAAA,CAAK,MAAA,CAAO,SAAA,CAAWkB,CAAAA,EAAgB,CACrC,IAAA,CAAK,WAAA,CAAY,CAAE,GAAGA,CAAY,CAAC,EACrC,CAAC,EACH,CAKQ,WAAA,CAAYzB,CAAAA,CAA6B,CAC/C,IAAA,CAAK,MAAA,CAAS,CAAE,GAAG,IAAA,CAAK,MAAA,CAAQ,GAAGA,CAAM,CAAA,CACzC,IAAA,CAAK,MAAA,GACP,CAKQ,MAAA,EAAS,CACf,KAAK,SAAA,CAAU,OAAA,CAAQC,CAAAA,EAAKA,CAAAA,CAAE,IAAA,CAAK,MAAM,CAAC,EAC5C,CASO,SAAA,CAAUC,CAAAA,CAA0B,CACzC,OAAA,IAAA,CAAK,SAAA,CAAU,GAAA,CAAIA,CAAQ,CAAA,CACpB,IAAM,IAAA,CAAK,SAAA,CAAU,MAAA,CAAOA,CAAQ,CAC7C,CAMO,WAAA,EAA2B,CAChC,OAAO,IAAA,CAAK,MACd,CAOQ,eAAA,EAAkB,CACpB,IAAA,CAAK,UAAA,GACP,GAAA,CAAI,gBAAgB,IAAA,CAAK,UAAU,CAAA,CACnC,IAAA,CAAK,UAAA,CAAa,IAAA,EAEtB,CAaO,IAAA,CAAKM,EAAsBM,CAAAA,CAAkB,CAGlD,GAFmB,IAAA,CAAK,MAAA,GAAWN,CAAAA,CAEnB,CACd,IAAA,CAAK,eAAA,EAAgB,CACrB,IAAA,CAAK,MAAA,CAASA,CAAAA,CAEd,IAAIkB,CAAAA,CACA,OAAOlB,GAAU,QAAA,CACnBkB,CAAAA,CAAYlB,CAAAA,EAEZ,IAAA,CAAK,UAAA,CAAa,GAAA,CAAI,eAAA,CAAgBA,CAAK,EAC3CkB,CAAAA,CAAY,IAAA,CAAK,UAAA,CAAA,CAGnB,IAAA,CAAK,MAAA,CAAO,SAAA,CAAUA,CAAS,CAAA,CAE/B,IAAMC,CAAAA,CAAWb,CAAAA,EAASA,CAAAA,CAAM,MAAA,CAAS,CAAA,CACzC,IAAA,CAAK,WAAA,CAAY,CACf,KAAA,CAAOA,CAAAA,EAAS,EAAC,CACjB,WAAA,CAAa,KAAA,CACb,KAAA,CAAO,IACT,CAAC,CAAA,CAGIa,CAAAA,EACH,IAAA,CAAK,OAAA,GAET,CAAA,KAAWb,CAAAA,EAASA,CAAAA,GAAU,KAAK,MAAA,CAAO,KAAA,EAExC,IAAA,CAAK,WAAA,CAAY,CAAE,KAAA,CAAAA,CAAM,CAAC,EAE9B,CAMA,MAAa,OAAA,CAAQL,CAAAA,CAAkB,GAAA,CAAK,CAC1C,GAAI,CAAC,IAAA,CAAK,MAAA,CAAQ,CAChB,IAAA,CAAK,WAAA,CAAY,CAAE,KAAA,CAAO,4BAA6B,CAAC,CAAA,CACxD,MACF,CAEA,IAAA,CAAK,WAAA,CAAY,CAAE,WAAA,CAAa,IAAA,CAAM,MAAO,IAAK,CAAC,CAAA,CACnD,GAAI,CACF,IAAMK,CAAAA,CAAQ,MAAM,KAAK,QAAA,CAAS,aAAA,CAAc,IAAA,CAAK,MAAA,CAAQL,CAAO,CAAA,CACpE,IAAA,CAAK,WAAA,CAAY,CAAE,KAAA,CAAAK,CAAAA,CAAO,WAAA,CAAa,CAAA,CAAM,CAAC,EAChD,CAAA,MAAS,EAAG,CACV,IAAA,CAAK,WAAA,CAAY,CACf,WAAA,CAAa,KAAA,CACb,KAAA,CAAO,CAAA,YAAa,MAAQ,CAAA,CAAE,OAAA,CAAU,iBAC1C,CAAC,EACH,CACF,CAKO,UAAA,EAAa,CAClB,IAAA,CAAK,MAAA,CAAO,UAAA,GACd,CAKO,IAAA,EAAO,CACZ,IAAA,CAAK,MAAA,CAAO,IAAA,GACd,CAKO,KAAA,EAAQ,CACb,IAAA,CAAK,MAAA,CAAO,QACd,CAMO,IAAA,CAAKc,CAAAA,CAAoB,CAC9B,GAAM,CAAE,QAAA,CAAAC,CAAS,CAAA,CAAI,IAAA,CAAK,MAAA,CACtBA,CAAAA,EACF,IAAA,CAAK,MAAA,CAAO,IAAA,CAAKD,CAAAA,CAAaC,CAAQ,EAE1C,CAMO,SAAA,CAAUxB,CAAAA,CAAgB,CAC/B,IAAA,CAAK,MAAA,CAAO,SAAA,CAAUA,CAAM,EAC9B,CAMO,QAAA,CAASC,CAAAA,CAAgB,CAC9B,IAAA,CAAK,MAAA,CAAO,SAASA,CAAK,EAC5B,CAKO,OAAA,EAAU,CACf,IAAA,CAAK,eAAA,EAAgB,CACrB,KAAK,MAAA,CAAO,OAAA,EAAQ,CACpB,IAAA,CAAK,QAAA,CAAS,OAAA,EAAQ,CACtB,IAAA,CAAK,UAAU,KAAA,GACjB,CACF,ECvNO,IAAMwB,CAAAA,CAAqBC,CAAAA,EACzBC,oBAAAA,CACJC,CAAAA,EAAaF,CAAAA,CAAO,SAAA,CAAUE,CAAQ,EACvC,IAAMF,CAAAA,CAAO,WAAA,EACf,ECGK,IAAMG,CAAAA,CAAe,CAAC1B,EAAkC2B,CAAAA,CAA+B,EAAC,GAAM,CACnG,GAAM,CAAE,KAAA,CAAArB,CAAAA,CAAO,OAAQsB,CAAe,CAAA,CAAID,CAAAA,CAGpCE,CAAAA,CAAiBC,OAAAA,CAAQ,IAAMF,CAAAA,EAAkB,IAAIZ,EAAmB,CAACY,CAAc,CAAC,CAAA,CACxFL,CAAAA,CAASK,CAAAA,EAAkBC,CAAAA,CAG3BE,CAAAA,CAAQT,EAAkBC,CAAM,CAAA,CAGtC,OAAAS,SAAAA,CAAU,IAAM,CACVhC,CAAAA,EACFuB,CAAAA,CAAO,KAAKvB,CAAAA,CAAOM,CAAK,EAE5B,CAAA,CAAG,CAACiB,CAAAA,CAAQvB,CAAAA,CAAOM,CAAK,CAAC,CAAA,CAGzB0B,SAAAA,CAAU,IACD,IAAM,CAENJ,CAAAA,EACHC,CAAAA,CAAe,OAAA,GAEnB,CAAA,CACC,CAACA,CAAAA,CAAgBD,CAAc,CAAC,CAAA,CAE5B,CAEL,MAAAG,CAAAA,CAEA,MAAA,CAAAR,CAAAA,CAEA,UAAA,CAAY,IAAMA,CAAAA,CAAO,UAAA,EAAW,CAEpC,KAAM,IAAMA,CAAAA,CAAO,IAAA,EAAK,CAExB,KAAA,CAAO,IAAMA,CAAAA,CAAO,KAAA,GAEpB,IAAA,CAAOH,CAAAA,EAAuBG,CAAAA,CAAO,IAAA,CAAKH,CAAU,CAAA,CAEpD,SAAA,CAAYa,CAAAA,EAAcV,CAAAA,CAAO,SAAA,CAAUU,CAAC,CAAA,CAE5C,QAAA,CAAWC,CAAAA,EAAeX,CAAAA,CAAO,QAAA,CAASW,CAAC,CAAA,CAE3C,OAAA,CAAUjC,CAAAA,EAAqBsB,CAAAA,CAAO,OAAA,CAAQtB,CAAO,CACvD,CACF,EC/DO,IAAMkC,EAAAA,CAAgB,MAAOC,CAAAA,CAAkBnC,EAAkB,GAAA,GAA2B,CACjG,IAAMoC,CAAAA,CAAW,IAAItC,CAAAA,CACrB,GAAI,CACF,OAAO,MAAMsC,CAAAA,CAAS,aAAA,CAAcD,CAAAA,CAAUnC,CAAO,CACvD,CAAA,OAAE,CACAoC,CAAAA,CAAS,OAAA,GACX,CACF,CAAA,CAWaC,EAAAA,CAAoB,MAAO3C,CAAAA,EAAiC,CAEvE,IAAM4C,CAAAA,CAAO,KAAA,CADI,MAAM,KAAA,CAAM5C,CAAG,CAAA,EACJ,IAAA,GAC5B,OAAO,GAAA,CAAI,eAAA,CAAgB4C,CAAI,CACjC,CAAA,CASaC,EAAAA,CAAqB7C,CAAAA,EAAgB,CAC5CA,CAAAA,EAAOA,CAAAA,CAAI,UAAA,CAAW,OAAO,CAAA,EAC/B,GAAA,CAAI,eAAA,CAAgBA,CAAG,EAE3B,ECnDO,IAAM8C,CAAAA,CAAcC,CAAAA,EAA4B,CACrD,GAAI,KAAA,CAAMA,CAAO,CAAA,CAAG,OAAO,MAAA,CAC3B,IAAMC,CAAAA,CAAM,IAAA,CAAK,KAAA,CAAMD,CAAAA,CAAU,EAAE,CAAA,CAC7BE,CAAAA,CAAM,IAAA,CAAK,KAAA,CAAMF,CAAAA,CAAU,EAAE,CAAA,CACnC,OAAO,CAAA,EAAGC,CAAG,CAAA,CAAA,EAAIC,CAAAA,CAAI,QAAA,EAAS,CAAE,QAAA,CAAS,CAAA,CAAG,GAAG,CAAC,CAAA,CAClD,CAAA,CAKaC,CAAAA,CAAgB,CAACvC,CAAAA,CAAiBwC,CAAAA,GAAkC,CAC/E,GAAIxC,CAAAA,CAAM,MAAA,GAAW,CAAA,CAAG,OAAO,EAAC,CAChC,GAAIA,CAAAA,CAAM,SAAWwC,CAAAA,CAAa,OAAOxC,CAAAA,CAEzC,IAAMyC,CAAAA,CAAY,IAAI,KAAA,CAAMD,CAAW,CAAA,CACjCE,CAAAA,CAAQ1C,CAAAA,CAAM,MAAA,CAASwC,CAAAA,CAE7B,GAAIE,CAAAA,CAAQ,CAAA,CAEV,QAAS,CAAA,CAAI,CAAA,CAAG,CAAA,CAAIF,CAAAA,CAAa,CAAA,EAAA,CAAK,CACpC,IAAItC,CAAAA,CAAM,EACJC,CAAAA,CAAQ,IAAA,CAAK,KAAA,CAAM,CAAA,CAAIuC,CAAK,CAAA,CAC5BtC,CAAAA,CAAM,IAAA,CAAK,OAAO,CAAA,CAAI,CAAA,EAAKsC,CAAK,CAAA,CACtC,IAAA,IAASrC,CAAAA,CAAIF,CAAAA,CAAOE,CAAAA,CAAID,CAAAA,CAAKC,CAAAA,EAAAA,CACvBL,CAAAA,CAAMK,CAAC,CAAA,CAAIH,CAAAA,GAAKA,CAAAA,CAAMF,CAAAA,CAAMK,CAAC,CAAA,CAAA,CAEnCoC,CAAAA,CAAU,CAAC,CAAA,CAAIvC,EACjB,CAAA,KAGA,IAAA,IAAS,CAAA,CAAI,EAAG,CAAA,CAAIsC,CAAAA,CAAa,CAAA,EAAA,CAAK,CACpC,IAAMG,CAAAA,CAAW,CAAA,CAAID,CAAAA,CACfE,EAAQ,IAAA,CAAK,KAAA,CAAMD,CAAQ,CAAA,CAC3BE,CAAAA,CAAY,IAAA,CAAK,GAAA,CAAID,CAAAA,CAAQ,EAAG5C,CAAAA,CAAM,MAAA,CAAS,CAAC,CAAA,CAChD8C,CAAAA,CAAWH,CAAAA,CAAWC,CAAAA,CAC5BH,CAAAA,CAAU,CAAC,CAAA,CAAIzC,CAAAA,CAAM4C,CAAK,CAAA,CAAA,CAAK5C,CAAAA,CAAM6C,CAAS,CAAA,CAAI7C,CAAAA,CAAM4C,CAAK,CAAA,EAAKE,EACpE,CAEF,OAAOL,CACT,CAAA,CAKaM,EAAAA,CAAiBC,CAAAA,EACrBA,EAAK,KAAA,CAAM;AAAA,CAAI,CAAA,CAAE,GAAA,CAAKC,CAAAA,EAAS,CAEpC,IAAIC,CAAAA,CAAID,CAAAA,CAAK,OAAA,CAAQ,IAAA,CAAM,OAAO,CAAA,CAAE,OAAA,CAAQ,IAAA,CAAM,MAAM,CAAA,CAAE,OAAA,CAAQ,IAAA,CAAM,MAAM,CAAA,CAGxEE,CAAAA,CAAoC,EAAC,CACvCC,CAAAA,CAAU,CAAA,CACRC,CAAAA,CAAW,CAAC/C,CAAAA,CAAagD,CAAAA,GAAgB,CAC7C,IAAMC,CAAAA,CAAK,CAAA,QAAA,EAAWH,CAAAA,EAAS,CAAA,EAAA,CAAA,CAC/B,OAAAD,CAAAA,CAAOI,CAAE,CAAA,CAAI,CAAA,aAAA,EAAgBD,CAAG,CAAA,EAAA,EAAKhD,CAAG,CAAA,OAAA,CAAA,CACjCiD,CACT,CAAA,CAGA,OAAAL,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,sBAAA,CAAyBtB,CAAAA,EAAMyB,CAAAA,CAASzB,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAE1EsB,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,oBAAA,CAAuBtB,CAAAA,EAAMyB,CAAAA,CAASzB,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAExEsB,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,wBAAA,CAA2BtB,CAAAA,EAAMyB,CAAAA,CAASzB,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAE5EsB,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,6BAAA,CAAgCtB,CAAAA,EAAMyB,CAAAA,CAASzB,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAGjFsB,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,2BAAA,CAA6B,uCAAuC,CAAA,CAGlF,MAAA,CAAO,OAAA,CAAQC,CAAM,CAAA,CAAE,OAAA,CAAQ,CAAC,CAACI,CAAAA,CAAIC,CAAI,CAAA,GAAM,CAC7CN,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQK,CAAAA,CAAIC,CAAI,EACxB,CAAC,CAAA,CAEMN,CACT,CAAC,EC5EI,IAAMO,EAAAA,CAAoB,CAACzD,CAAAA,CAAiBwC,CAAAA,GAC1ChB,OAAAA,CAAQ,IAAMe,CAAAA,CAAcvC,CAAAA,CAAOwC,CAAW,EAAG,CAACxC,CAAAA,CAAOwC,CAAW,CAAC,CAAA,CCFvE,IAAMkB,CAAAA,CAAqBC,CAAAA,EAA6C,CAC7E,GAAM,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,QAAAA,CAAS,CAAC,CAAA,CAEpC,OAAApC,SAAAA,CAAU,IAAM,CACd,GAAI,CAACiC,CAAAA,CAAI,OAAA,CAAS,OAElB,IAAMI,CAAAA,CAAW,IAAI,cAAA,CAAgBC,CAAAA,EAAY,CAC/C,IAAA,IAAWC,CAAAA,IAASD,CAAAA,CAClBH,CAAAA,CAASI,CAAAA,CAAM,WAAA,CAAY,KAAK,EAEpC,CAAC,CAAA,CAED,OAAAF,CAAAA,CAAS,OAAA,CAAQJ,CAAAA,CAAI,OAAO,CAAA,CACrB,IAAMI,CAAAA,CAAS,UAAA,EACxB,CAAA,CAAG,CAACJ,CAAG,CAAC,CAAA,CAEDC,CACT,CAAA,CCCO,IAAMM,CAAAA,CAAgDC,IAAAA,CAAK,CAAC,CACjE,UAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CACF,CAAA,GAEIC,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,sIAAA,CACb,QAAA,CAAA,CAAAC,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAW,CAAA,0CAAA,EAA6CF,CAAAA,CAAY,mBAAA,CAAsB,EAAE,CAAA,CAAA,CAC9F,QAAA,CAAAF,CAAAA,CACCI,GAAAA,CAAC,KAAA,CAAA,CACC,GAAA,CAAKJ,CAAAA,CACL,GAAA,CAAKC,CAAAA,CACL,SAAA,CAAU,4FAAA,CACZ,CAAA,CAEAG,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,kJAAA,CACb,QAAA,CAAAA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,iCAAA,CAAkC,IAAA,CAAK,cAAA,CAAe,OAAA,CAAQ,WAAA,CAC3E,QAAA,CAAAA,GAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,wFAAwF,CAAA,CAClG,CAAA,CACF,CAAA,CAEJ,CAAA,CAECF,CAAAA,EACCE,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,mFAAA,CACb,QAAA,CAAAA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,2EAAA,CAA4E,CAAA,CAC7F,CAAA,CAAA,CAEJ,CAEH,CAAA,CAEDN,CAAAA,CAAe,WAAA,CAAc,gBAAA,CCpCtB,IAAMO,CAAAA,CAAoCN,IAAAA,CAAK,CAAC,CACrD,KAAA,CAAAnE,CAAAA,CACA,WAAA,CAAA0E,CAAAA,CACA,QAAA,CAAA3D,CAAAA,CACA,SAAA,CAAA4D,CAAAA,CACA,aAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CAAa,MAAA,CACb,QAAA,CAAAC,CAAAA,CAAW,CAAA,CACX,MAAA,CAAAC,CAAAA,CAAS,CACX,CAAA,GAAM,CACJ,IAAMC,CAAAA,CAAYC,MAAAA,CAA0B,IAAI,CAAA,CAC1CC,CAAAA,CAAoBD,MAAAA,CAA0B,IAAI,CAAA,CAClDE,CAAAA,CAAeF,MAAAA,CAAuB,IAAI,CAAA,CAC1CG,CAAAA,CAAiB5B,CAAAA,CAAkB2B,CAAY,CAAA,CAErD3D,SAAAA,CAAU,IAAM,CACd,IAAM6D,CAAAA,CAASL,CAAAA,CAAU,OAAA,CACnBM,CAAAA,CAAiBJ,CAAAA,CAAkB,OAAA,CACzC,GAAI,CAACG,CAAAA,EAAU,CAACC,CAAAA,CAAgB,OAEhC,IAAMC,CAAAA,CAAMF,CAAAA,CAAO,UAAA,CAAW,IAAI,CAAA,CAC5BG,CAAAA,CAAOF,CAAAA,CAAe,UAAA,CAAW,IAAI,CAAA,CAC3C,GAAI,CAACC,CAAAA,EAAO,CAACC,CAAAA,CAAM,OAEnB,IAAMC,CAAAA,CAAM,MAAA,CAAO,gBAAA,EAAoB,CAAA,CACjCC,CAAAA,CAAOL,CAAAA,CAAO,qBAAA,EAAsB,CACpCM,CAAAA,CAAcD,CAAAA,CAAK,KAAA,CAAQD,CAAAA,CAC3BG,EAAeF,CAAAA,CAAK,MAAA,CAASD,CAAAA,CAEnC,CAACJ,CAAAA,CAAQC,CAAc,CAAA,CAAE,OAAA,CAAQO,CAAAA,EAAK,CAAA,CAChCA,CAAAA,CAAE,KAAA,GAAUF,CAAAA,EAAeE,CAAAA,CAAE,MAAA,GAAWD,CAAAA,IAC1CC,CAAAA,CAAE,KAAA,CAAQF,CAAAA,CACVE,CAAAA,CAAE,MAAA,CAASD,CAAAA,EAEf,CAAC,CAAA,CAAA,CAEY,IAAM,CACjB,GAAI9F,CAAAA,CAAM,MAAA,GAAW,CAAA,CAAG,OACxB,GAAM,CAAE,KAAA,CAAA4D,CAAAA,CAAO,MAAA,CAAAiB,CAAO,CAAA,CAAIU,CAAAA,CAE1BE,CAAAA,CAAI,SAAA,CAAU,CAAA,CAAG,CAAA,CAAG7B,CAAAA,CAAOiB,CAAM,CAAA,CACjCa,CAAAA,CAAK,SAAA,CAAU,CAAA,CAAG,CAAA,CAAG9B,CAAAA,CAAOiB,CAAM,CAAA,CAElC,IAAMmB,CAAAA,CAAWhG,CAAAA,CAAM,MAAA,CACjBiG,CAAAA,CAAsBrC,CAAAA,CAAQoC,CAAAA,CAC9BE,CAAAA,CAAiB,OAAOnB,CAAAA,EAAe,QAAA,CACzCkB,CAAAA,CAAsB,EAAA,CACtBjB,CAAAA,CAAWW,CAAAA,CACTQ,CAAAA,CAAe,OAAOpB,CAAAA,EAAe,QAAA,CACvCkB,CAAAA,CAAsB,EAAA,CACtBhB,CAAAA,CAASU,CAAAA,CAEbF,CAAAA,CAAI,OAAA,CAAU,OAAA,CACdA,CAAAA,CAAI,SAAA,CAAYS,CAAAA,CAChBR,CAAAA,CAAK,OAAA,CAAU,OAAA,CACfA,CAAAA,CAAK,SAAA,CAAYQ,CAAAA,CAEjBlG,CAAAA,CAAM,OAAA,CAAQ,CAACoG,CAAAA,CAAMxD,CAAAA,GAAU,CAC7B,IAAMyD,CAAAA,CAAIzD,CAAAA,EAASsD,CAAAA,CAAiBC,CAAAA,CAAAA,CAAgBD,CAAAA,CAAiB,CAAA,CAC/DI,CAAAA,CAAYF,CAAAA,CAAOvB,CAAAA,CAAS,EAAA,CAC5B0B,CAAAA,CAAAA,CAAU1B,CAAAA,CAASyB,CAAAA,EAAa,CAAA,CAChCE,CAAAA,CAAOD,CAAAA,CAASD,CAAAA,CAEtBb,CAAAA,CAAI,SAAA,EAAU,CACdA,CAAAA,CAAI,WAAA,CAAcd,CAAAA,CAClBc,CAAAA,CAAI,MAAA,CAAOY,CAAAA,CAAGE,CAAM,CAAA,CACpBd,CAAAA,CAAI,MAAA,CAAOY,CAAAA,CAAGG,CAAI,CAAA,CAClBf,EAAI,MAAA,EAAO,CAEXC,CAAAA,CAAK,SAAA,EAAU,CACfA,CAAAA,CAAK,WAAA,CAAcd,CAAAA,CACnBc,CAAAA,CAAK,MAAA,CAAOW,CAAAA,CAAGE,CAAM,CAAA,CACrBb,CAAAA,CAAK,MAAA,CAAOW,CAAAA,CAAGG,CAAI,CAAA,CACnBd,CAAAA,CAAK,MAAA,GACP,CAAC,EACH,CAAA,IAGF,CAAA,CAAG,CAAC1F,CAAAA,CAAO2E,CAAAA,CAAWC,CAAAA,CAAeG,CAAAA,CAAYC,CAAAA,CAAUC,CAAAA,CAAQJ,CAAM,CAAC,CAAA,CAE1E,IAAM4B,CAAAA,CAAcC,CAAAA,EAAwC,CAC1D,GAAIrB,CAAAA,CAAa,OAAA,EAAWtE,CAAAA,CAAU,CACpC,IAAM6E,CAAAA,CAAOP,CAAAA,CAAa,OAAA,CAAQ,qBAAA,EAAsB,CAClDgB,CAAAA,CAAIK,CAAAA,CAAE,OAAA,CAAUd,CAAAA,CAAK,IAAA,CACrB9E,CAAAA,CAAa,IAAA,CAAK,GAAA,CAAI,CAAA,CAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAGuF,CAAAA,CAAIT,CAAAA,CAAK,KAAK,CAAC,CAAA,CAC1Dd,CAAAA,CAAOhE,CAAU,EACnB,CACF,CAAA,CAEM6F,CAAAA,CAAkB5F,CAAAA,CAAY2D,CAAAA,CAAc3D,CAAAA,CAAY,GAAA,CAAM,CAAA,CAEpE,OACEwD,IAAAA,CAAC,KAAA,CAAA,CACC,GAAA,CAAKc,CAAAA,CACL,SAAA,CAAU,gDAAA,CACV,KAAA,CAAO,CAAE,MAAA,CAAQ,CAAA,EAAGR,CAAM,CAAA,EAAA,CAAK,CAAA,CAC/B,OAAA,CAAS4B,CAAAA,CAET,QAAA,CAAA,CAAAjC,GAAAA,CAAC,QAAA,CAAA,CAAO,GAAA,CAAKU,CAAAA,CAAW,SAAA,CAAU,gCAAA,CAAiC,CAAA,CACnEV,GAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAU,yGAAA,CACV,KAAA,CAAO,CAAE,KAAA,CAAO,CAAA,EAAGmC,CAAe,CAAA,CAAA,CAAI,CAAA,CAEtC,QAAA,CAAAnC,GAAAA,CAAC,QAAA,CAAA,CAAO,GAAA,CAAKY,CAAAA,CAAmB,SAAA,CAAU,iBAAA,CAAkB,KAAA,CAAO,CAAE,KAAA,CAAO,CAAA,EAAGE,CAAc,CAAA,EAAA,CAAK,CAAA,CAAG,EACvG,CAAA,CAAA,CACF,CAEJ,CAAC,CAAA,CAEDb,CAAAA,CAAS,WAAA,CAAc,UAAA,CCrChB,IAAMmC,EAAAA,CAAkDzC,IAAAA,CAAK,CAAC,CACnE,KAAA,CAAAzE,CAAAA,CACA,KAAA,CAAOmH,CAAAA,CACP,OAAA,CAAAC,CAAAA,CACA,KAAA,CAAAzC,CAAAA,CACA,MAAA,CAAA0C,CAAAA,CACA,SAAA,CAAWC,CAAAA,CACX,aAAA,CAAeC,CAAAA,CACf,MAAA,CAAApC,CAAAA,CAAS,EAAA,CACT,SAAA,CAAAqC,CAAAA,CAAY,EAAA,CACZ,KAAA,CAAOC,CAAAA,CACP,UAAA,CAAApC,CAAAA,CAAa,MAAA,CACb,QAAA,CAAAC,CAAAA,CAAW,CAAA,CACX,MAAA,CAAAC,CAAAA,CAAS,CAAA,CACT,KAAA,CAAAmC,CAAAA,CACA,MAAA,CAAQ9F,CACV,CAAA,GAAM,CAEJ,GAAM,CAAE,KAAA,CAAAG,CAAAA,CAAO,UAAA,CAAA4F,CAAAA,CAAY,IAAA,CAAAC,CAAK,CAAA,CAAIlG,CAAAA,CAAa1B,CAAAA,CAAO,CACtD,KAAA,CAAOmH,CAAAA,CACP,MAAA,CAAQvF,CACV,CAAC,CAAA,CAEK,CAAE,SAAA,CAAAiG,CAAAA,CAAW,WAAA,CAAA7C,CAAAA,CAAa,QAAA,CAAA3D,CAAAA,CAAU,KAAA,CAAAf,CAAAA,CAAO,WAAA,CAAAwH,CAAY,CAAA,CAAI/F,CAAAA,CAG3D,CAACgG,CAAAA,CAAoBC,CAAqB,CAAA,CAAI5D,QAAAA,CAClD,OAAOgD,CAAAA,EAAY,QAAA,CAAWA,CAAAA,CAAU,MAC1C,CAAA,CAEApF,SAAAA,CAAU,IAAM,CACd,GAAIoF,CAAAA,YAAmB,IAAA,CAAM,CAC3B,IAAMzH,CAAAA,CAAM,GAAA,CAAI,eAAA,CAAgByH,CAAO,CAAA,CACvC,OAAAY,CAAAA,CAAsBrI,CAAG,CAAA,CAClB,IAAM,GAAA,CAAI,eAAA,CAAgBA,CAAG,CACtC,CAAA,KACEqI,CAAAA,CAAsBZ,CAAO,EAEjC,CAAA,CAAG,CAACA,CAAO,CAAC,CAAA,CAEZ,IAAMzB,EAAeF,MAAAA,CAAuB,IAAI,CAAA,CAC1CG,CAAAA,CAAiB5B,CAAAA,CAAkB2B,CAAY,CAAA,CAE/C7C,CAAAA,CAAchB,OAAAA,CAAQ,IACtB,OAAOuD,CAAAA,EAAe,QAAA,CAAiBA,CAAAA,CACvCO,CAAAA,CAAiB,CAAA,CACZ,IAAA,CAAK,GAAA,CAAI,CAAA,CAAG,IAAA,CAAK,KAAA,CAAMA,CAAAA,EAAkBN,CAAAA,CAAWC,CAAAA,CAAO,CAAC,CAAA,CAE9DjF,CAAAA,CAAM,MAAA,EAAU,CAAA,CACtB,CAAC+E,CAAAA,CAAYO,CAAAA,CAAgBN,CAAAA,CAAUC,CAAAA,CAAQjF,CAAAA,CAAM,MAAM,CAAC,CAAA,CAEzD2H,CAAAA,CAAiBlE,EAAAA,CAAkBzD,CAAAA,CAAOwC,CAAW,CAAA,CAErDmC,CAAAA,CAAYnD,OAAAA,CAAQ,IACpBwF,CAAAA,GACAI,CAAAA,CAAcA,CAAAA,CAAM,EAAA,GAAO,SAAA,CAAY,SAAA,CAAY,SAAA,CAChD,SAAA,CAAA,CACN,CAACJ,CAAAA,CAAeI,CAAK,CAAC,CAAA,CAEnBxC,CAAAA,CAAgBqC,CAAAA,EAAqBG,CAAAA,EAAO,OAAA,EAAW,SAAA,CAEvDQ,CAAAA,CAAcpG,OAAAA,CAAQ,KAWnB,CAAE,GAVS,CAChB,eAAA,CAAiB4F,CAAAA,EAAO,EAAA,EAAM,OAAA,CAC9B,mBAAA,CAAqBA,CAAAA,EAAO,MAAA,EAAU,SAAA,CACtC,kBAAA,CAAoBA,CAAAA,EAAO,IAAA,EAAQ,SAAA,CACnC,mBAAA,CAAqBA,CAAAA,EAAO,IAAA,EAAQ,SAAA,CACpC,iBAAA,CAAmBA,CAAAA,EAAO,IAAA,EAAQ,SAAA,CAClC,kBAAA,CAAoBA,CAAAA,EAAO,OAAA,EAAW,SAAA,CACtC,uBAAA,CAAyBA,CAAAA,EAAO,OAAA,EAAW,SAAA,CAC3C,qBAAA,CAAuBA,CAAAA,EAAO,EAAA,EAAM,SACtC,CAAA,CACuB,GAAGD,CAAU,CAAA,CAAA,CACnC,CAACC,CAAAA,CAAOD,CAAS,CAAC,CAAA,CAErB,OACE5C,IAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAW,CAAA,sPAAA,EAAyP2C,CAAS,CAAA,CAAA,CAC7Q,KAAA,CAAOU,CAAAA,CAEP,QAAA,CAAA,CAAApD,GAAAA,CAACN,CAAAA,CAAA,CACC,UAAA,CAAYuD,CAAAA,CACZ,KAAA,CAAOpD,CAAAA,CACP,UAAWmD,CAAAA,CACb,CAAA,CAEAjD,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,qCAAA,CACb,QAAA,CAAA,CAAAA,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8BAAA,CAEb,QAAA,CAAA,CAAAC,GAAAA,CAAC,QAAA,CAAA,CACC,OAAA,CAAS6C,CAAAA,CACT,SAAA,CAAU,sTAAA,CAET,QAAA,CAAAE,CAAAA,CACC/C,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,uBAAA,CAAwB,IAAA,CAAK,cAAA,CAAe,OAAA,CAAQ,WAAA,CACjE,QAAA,CAAAA,GAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,iCAAA,CAAkC,CAAA,CAC5C,CAAA,CAEAA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,4BAAA,CAA6B,IAAA,CAAK,cAAA,CAAe,OAAA,CAAQ,WAAA,CACtE,QAAA,CAAAA,GAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,eAAA,CAAgB,CAAA,CAC1B,CAAA,CAEJ,CAAA,CAEAD,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8BAAA,CACb,QAAA,CAAA,CAAAA,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,yCAAA,CACZ,QAAA,CAAA,CAAAwC,CAAAA,EACCvC,GAAAA,CAAC,GAAA,CAAA,CAAE,UAAU,2HAAA,CACV,QAAA,CAAAuC,CAAAA,CACH,CAAA,CAEFxC,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,sFAAA,CACZ,QAAA,CAAA,CAAApC,CAAAA,CAAWuC,CAAW,CAAA,CAAE,KAAA,CAAIvC,CAAAA,CAAWpB,CAAQ,CAAA,CAAA,CAClD,CAAA,CAAA,CACF,CAAA,CACCsD,CAAAA,EACCG,GAAAA,CAAC,IAAA,CAAA,CAAG,SAAA,CAAU,qHAAA,CACX,QAAA,CAAAH,CAAAA,CACH,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CAEAG,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,SAAA,CAAU,GAAA,CAAKa,CAAAA,CAC5B,QAAA,CAAAb,GAAAA,CAACC,CAAAA,CAAA,CACC,KAAA,CAAOkD,CAAAA,CACP,WAAA,CAAajD,CAAAA,CACb,QAAA,CAAU3D,CAAAA,CACV,SAAA,CAAW4D,CAAAA,CACX,aAAA,CAAeC,CAAAA,CACf,MAAA,CAAQC,CAAAA,CACR,MAAA,CAAQyC,CAAAA,CACR,UAAA,CAAYvC,CAAAA,CACZ,QAAA,CAAUC,CAAAA,CACV,MAAA,CAAQC,CAAAA,CACV,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CAEJ,CAAC,EAED2B,GAAgB,WAAA,CAAc,iBAAA","file":"index.js","sourcesContent":["/**\n * Represents the low-level playback state of the audio element.\n */\nexport type PlayerState = {\n  /** Whether the audio is currently playing */\n  isPlaying: boolean;\n  /** The current playback time in seconds */\n  currentTime: number;\n  /** The total duration of the track in seconds */\n  duration: number;\n  /** The current volume level (0 to 1) */\n  volume: number;\n  /** Whether the audio is currently muted */\n  muted: boolean;\n};\n\n/**\n * A callback function that receives the latest PlayerState.\n */\nexport type PlayerListener = (state: PlayerState) => void;\n\n/**\n * The internal core class responsible for managing the HTMLAudioElement.\n * \n * It handles raw playback logic, volume control, and synchronizes the \n * internal `PlayerState` with DOM events from the underlying `Audio` instance.\n */\nexport class PlayerCore {\n  private audio: HTMLAudioElement;\n  private listeners: Set<PlayerListener> = new Set();\n  private _state: PlayerState;\n\n  /**\n   * Initializes a new PlayerCore instance and sets up event listeners on a new Audio object.\n   */\n  constructor() {\n    this.audio = new Audio();\n    this._state = {\n      isPlaying: false,\n      currentTime: 0,\n      duration: 0,\n      volume: 1,\n      muted: false,\n    };\n\n    this.initListeners();\n  }\n\n  /**\n   * Subscribes to various HTMLMediaElement events to keep the internal state in sync.\n   */\n  private initListeners() {\n    this.audio.addEventListener('play', () => this.updateState({ isPlaying: true }));\n    this.audio.addEventListener('pause', () => this.updateState({ isPlaying: false }));\n    this.audio.addEventListener('timeupdate', () => this.updateState({ currentTime: this.audio.currentTime }));\n    this.audio.addEventListener('durationchange', () => this.updateState({ duration: this.audio.duration }));\n    this.audio.addEventListener('volumechange', () => this.updateState({ \n      volume: this.audio.volume, \n      muted: this.audio.muted \n    }));\n    this.audio.addEventListener('ended', () => this.updateState({ isPlaying: false }));\n  }\n\n  /**\n   * Updates the internal state and notifies subscribers.\n   */\n  private updateState(patch: Partial<PlayerState>) {\n    this._state = { ...this._state, ...patch };\n    this.notify();\n  }\n\n  /**\n   * Triggers all registered listener callbacks.\n   */\n  private notify() {\n    this.listeners.forEach(l => l(this._state));\n  }\n\n  /**\n   * Registers a listener for state updates.\n   * @param listener The callback function.\n   * @returns An unsubscribe function.\n   */\n  public subscribe(listener: PlayerListener) {\n    this.listeners.add(listener);\n    return () => this.listeners.delete(listener);\n  }\n\n  /**\n   * Returns the current playback state.\n   */\n  public get state() {\n    return this._state;\n  }\n\n  /**\n   * Updates the source URL of the underlying audio element.\n   * @param url The audio source URL.\n   */\n  public setSource(url: string) {\n    this.audio.src = url;\n    this.audio.load();\n  }\n\n  /**\n   * Starts playback. Returns a promise that resolves when playback begins.\n   */\n  public play() {\n    return this.audio.play();\n  }\n\n  /**\n   * Pauses playback.\n   */\n  public pause() {\n    this.audio.pause();\n  }\n\n  /**\n   * Toggles between play and pause states.\n   */\n  public togglePlay() {\n    if (this._state.isPlaying) {\n      this.pause();\n    } else {\n      this.play();\n    }\n  }\n\n  /**\n   * Seeks to a specific time.\n   * @param time Time in seconds.\n   */\n  public seek(time: number) {\n    this.audio.currentTime = time;\n  }\n\n  /**\n   * Sets the volume level.\n   * @param volume Level from 0 to 1.\n   */\n  public setVolume(volume: number) {\n    this.audio.volume = volume;\n  }\n\n  /**\n   * Mutes or unmutes the audio element.\n   * @param muted Mute status.\n   */\n  public setMuted(muted: boolean) {\n    this.audio.muted = muted;\n  }\n\n  /**\n   * Cleans up the audio element and removes all listeners.\n   */\n  public dispose() {\n    this.pause();\n    this.audio.src = '';\n    this.listeners.clear();\n  }\n}\n","/**\n * A specialized class for decoding audio data and generating waveform peaks.\n * \n * It leverages the Web Audio API (`AudioContext`) to process audio buffers \n * and extract amplitude data for visualization.\n */\nexport class PeakAnalyzer {\n  private audioCtx: AudioContext | null = null;\n\n  /**\n   * Initializes the analyzer. AudioContext creation is deferred to the first use \n   * to comply with browser autoplay and resource management policies.\n   */\n  constructor() {}\n\n  /**\n   * Lazily creates or returns the existing AudioContext.\n   */\n  private getContext(): AudioContext {\n    if (!this.audioCtx) {\n      this.audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();\n    }\n    return this.audioCtx;\n  }\n\n  /**\n   * Processes media (URL or Blob) and generates a set of normalized peaks.\n   * \n   * @param media The URL string or Blob object to analyze.\n   * @param samples The number of peaks (bars) to generate. Defaults to 512.\n   * @returns A promise resolving to an array of normalized peak values (0 to 1).\n   * \n   * @example\n   * ```typescript\n   * const analyzer = new PeakAnalyzer();\n   * \n   * // Analyze from URL\n   * const peaksFromUrl = await analyzer.generatePeaks('https://example.com/audio.mp3');\n   * \n   * // Analyze from Blob\n   * const peaksFromBlob = await analyzer.generatePeaks(myAudioBlob);\n   * ```\n   */\n  public async generatePeaks(media: string | Blob, samples: number = 512): Promise<number[]> {\n    try {\n      let arrayBuffer: ArrayBuffer;\n\n      if (typeof media === 'string') {\n        const response = await fetch(media);\n        if (!response.ok) throw new Error(`Failed to fetch audio: ${response.statusText}`);\n        arrayBuffer = await response.arrayBuffer();\n      } else {\n        arrayBuffer = await media.arrayBuffer();\n      }\n\n      const audioCtx = this.getContext();\n      const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);\n      \n      const channelData = audioBuffer.getChannelData(0); // Use left channel\n      const blockSize = Math.floor(channelData.length / samples);\n      const peaks = [];\n\n      for (let i = 0; i < samples; i++) {\n        let max = 0;\n        const start = i * blockSize;\n        const end = start + blockSize;\n        \n        for (let j = start; j < end; j++) {\n          const val = Math.abs(channelData[j]);\n          if (val > max) max = val;\n        }\n        peaks.push(max);\n      }\n      \n      // Normalize peaks to 0-1 range\n      const maxPeak = Math.max(...peaks);\n      return peaks.map(p => p / (maxPeak || 1));\n    } catch (error) {\n      console.error('PeakAnalyzer Error:', error);\n      throw error;\n    }\n  }\n\n  /**\n   * Closes the AudioContext and releases system audio resources.\n   */\n  public dispose() {\n    if (this.audioCtx) {\n      this.audioCtx.close();\n      this.audioCtx = null;\n    }\n  }\n}\n","import { PlayerCore, PlayerState } from './PlayerCore';\nimport { PeakAnalyzer } from './PeakAnalyzer';\n\n/**\n * Represents the complete state of the Waveframe engine, combining playback and analysis.\n */\nexport type EngineState = PlayerState & {\n  /** The current set of generated or provided waveform peaks (0-1 range) */\n  peaks: number[];\n  /** Whether an audio analysis process is currently in progress */\n  isAnalyzing: boolean;\n  /** Any error message encountered during playback or analysis */\n  error: string | null;\n};\n\n/**\n * A callback function that receives the latest EngineState.\n */\nexport type EngineListener = (state: EngineState) => void;\n\n/**\n * The orchestrator class for Waveframe. \n * \n * It manages the lifecycle of audio playback and waveform analysis, providing a unified \n * store-like interface that can be easily consumed by React or other frameworks.\n * \n * @example\n * ```typescript\n * const engine = new WaveframeEngine();\n * \n * // Load from URL (automatic analysis if peaks omitted)\n * engine.load('https://example.com/audio.mp3');\n * \n * // Load from Blob with pre-computed peaks\n * engine.load(myBlob, [0.1, 0.5, 0.8]);\n * \n * // Subscription\n * const unsubscribe = engine.subscribe((state) => {\n *   console.log('Current time:', state.currentTime);\n * });\n * ```\n */\nexport class WaveframeEngine {\n  private player: PlayerCore;\n  private analyzer: PeakAnalyzer;\n  private listeners: Set<EngineListener> = new Set();\n  private _state: EngineState;\n\n  private _media: string | Blob | null = null;\n  private _objectUrl: string | null = null;\n\n  /**\n   * Creates a new instance of the WaveframeEngine.\n   * Initializes internal PlayerCore and PeakAnalyzer.\n   */\n  constructor() {\n    this.player = new PlayerCore();\n    this.analyzer = new PeakAnalyzer();\n    \n    this._state = {\n      ...this.player.state,\n      peaks: [],\n      isAnalyzing: false,\n      error: null,\n    };\n\n    // Subscribe to player updates\n    this.player.subscribe((playerState) => {\n      this.updateState({ ...playerState });\n    });\n  }\n\n  /**\n   * Internal method to update the state and notify all subscribers.\n   */\n  private updateState(patch: Partial<EngineState>) {\n    this._state = { ...this._state, ...patch };\n    this.notify();\n  }\n\n  /**\n   * Notifies all registered listeners of a state change.\n   */\n  private notify() {\n    this.listeners.forEach(l => l(this._state));\n  }\n\n  // --- Store Interface ---\n\n  /**\n   * Registers a listener to be called whenever the engine state changes.\n   * @param listener The callback function.\n   * @returns An unsubscribe function.\n   */\n  public subscribe(listener: EngineListener) {\n    this.listeners.add(listener);\n    return () => this.listeners.delete(listener);\n  }\n\n  /**\n   * Returns a snapshot of the current engine state.\n   * Useful for `useSyncExternalStore`.\n   */\n  public getSnapshot(): EngineState {\n    return this._state;\n  }\n\n  // --- Actions ---\n\n  /**\n   * Revokes any existing Object URLs to prevent memory leaks.\n   */\n  private revokeOldSource() {\n    if (this._objectUrl) {\n      URL.revokeObjectURL(this._objectUrl);\n      this._objectUrl = null;\n    }\n  }\n\n  /**\n   * Loads media (URL or Blob) into the player.\n   * \n   * If a string is passed, it's treated as a URL and used directly for playback.\n   * If a Blob is passed, an Object URL is created for playback.\n   * \n   * If `peaks` are not provided, it automatically triggers an analysis.\n   * \n   * @param media The audio source (URL string or Blob/File object).\n   * @param peaks Optional pre-generated peaks for the waveform.\n   */\n  public load(media: string | Blob, peaks?: number[]) {\n    const isNewMedia = this._media !== media;\n    \n    if (isNewMedia) {\n      this.revokeOldSource();\n      this._media = media;\n\n      let sourceUrl: string;\n      if (typeof media === 'string') {\n        sourceUrl = media;\n      } else {\n        this._objectUrl = URL.createObjectURL(media);\n        sourceUrl = this._objectUrl;\n      }\n\n      this.player.setSource(sourceUrl);\n      \n      const hasPeaks = peaks && peaks.length > 0;\n      this.updateState({ \n        peaks: peaks || [], \n        isAnalyzing: false, \n        error: null \n      });\n\n      // Automatic analysis if peaks are missing\n      if (!hasPeaks) {\n        this.analyze();\n      }\n    } else if (peaks && peaks !== this._state.peaks) {\n      // Update peaks if they change even if media is same\n      this.updateState({ peaks });\n    }\n  }\n\n  /**\n   * Analyzes the current media to generate waveform peaks.\n   * @param samples The number of peaks to generate. Defaults to 512.\n   */\n  public async analyze(samples: number = 512) {\n    if (!this._media) {\n      this.updateState({ error: 'No media loaded to analyze' });\n      return;\n    }\n\n    this.updateState({ isAnalyzing: true, error: null });\n    try {\n      const peaks = await this.analyzer.generatePeaks(this._media, samples);\n      this.updateState({ peaks, isAnalyzing: false });\n    } catch (e) {\n      this.updateState({ \n        isAnalyzing: false, \n        error: e instanceof Error ? e.message : 'Analysis failed' \n      });\n    }\n  }\n\n  /**\n   * Toggles playback between playing and paused.\n   */\n  public togglePlay() {\n    this.player.togglePlay();\n  }\n\n  /**\n   * Starts audio playback.\n   */\n  public play() {\n    this.player.play();\n  }\n\n  /**\n   * Pauses audio playback.\n   */\n  public pause() {\n    this.player.pause();\n  }\n\n  /**\n   * Seeks to a specific position in the track.\n   * @param percentage The seek position as a decimal (0 to 1).\n   */\n  public seek(percentage: number) {\n    const { duration } = this._state;\n    if (duration) {\n      this.player.seek(percentage * duration);\n    }\n  }\n\n  /**\n   * Sets the playback volume.\n   * @param volume The volume level (0 to 1).\n   */\n  public setVolume(volume: number) {\n    this.player.setVolume(volume);\n  }\n\n  /**\n   * Mutes or unmutes the audio.\n   * @param muted Whether the audio should be muted.\n   */\n  public setMuted(muted: boolean) {\n    this.player.setMuted(muted);\n  }\n\n  /**\n   * Disposes of the engine, pausing playback and clearing all listeners and resources.\n   */\n  public dispose() {\n    this.revokeOldSource();\n    this.player.dispose();\n    this.analyzer.dispose();\n    this.listeners.clear();\n  }\n}\n","import { useSyncExternalStore } from 'react';\nimport { WaveframeEngine, EngineState } from '../core/WaveframeEngine';\n\n/**\n * A React hook that synchronizes a WaveframeEngine's state with a React component.\n * \n * It uses `useSyncExternalStore` for high-performance updates, ensuring that \n * the component only re-renders when the engine's state snapshot actually changes.\n * \n * @param engine The WaveframeEngine instance to subscribe to.\n * @returns The current EngineState (isPlaying, currentTime, peaks, etc.).\n * \n * @example\n * ```tsx\n * const MyPlayer = ({ engine }: { engine: WaveframeEngine }) => {\n *   const { isPlaying, currentTime, duration } = useWaveframeStore(engine);\n * \n *   return (\n *     <div>\n *       <button onClick={() => engine.togglePlay()}>\n *         {isPlaying ? 'Pause' : 'Play'}\n *       </button>\n *       <p>{currentTime.toFixed(2)} / {duration.toFixed(2)}</p>\n *     </div>\n *   );\n * };\n * ```\n */\nexport const useWaveframeStore = (engine: WaveframeEngine): EngineState => {\n  return useSyncExternalStore(\n    (callback) => engine.subscribe(callback),\n    () => engine.getSnapshot()\n  );\n};\n","import { useMemo, useEffect } from 'react';\nimport { WaveframeEngine, EngineState } from '../core/WaveframeEngine';\nimport { useWaveframeStore } from './useWaveframeStore';\n\n/**\n * Configuration options for the `useWaveframe` hook.\n */\nexport interface UseWaveframeOptions {\n  /** Optional pre-computed peaks to skip automatic analysis */\n  peaks?: number[];\n  /** Optional external engine instance for shared playback across components */\n  engine?: WaveframeEngine;\n}\n\n/**\n * A headless hook that provides full control over the Waveframe engine.\n * \n * It manages the engine's lifecycle, loads the provided media, and returns \n * the current state along with playback controls.\n * \n * @param media The audio source (URL string or Blob/File object).\n * @param options Additional configuration and an optional external engine.\n * \n * @example\n * ```tsx\n * const { state, togglePlay, seek } = useWaveframe('https://example.com/audio.mp3');\n * \n * return (\n *   <div>\n *     <button onClick={togglePlay}>{state.isPlaying ? 'Pause' : 'Play'}</button>\n *     <div onClick={(e) => seek(0.5)}>Seek to Middle</div>\n *   </div>\n * );\n * ```\n */\nexport const useWaveframe = (media: string | Blob | undefined, options: UseWaveframeOptions = {}) => {\n  const { peaks, engine: providedEngine } = options;\n\n  // Initialize engine (only once)\n  const internalEngine = useMemo(() => providedEngine || new WaveframeEngine(), [providedEngine]);\n  const engine = providedEngine || internalEngine;\n\n  // Subscribe to engine state\n  const state = useWaveframeStore(engine);\n\n  // Sync media with engine\n  useEffect(() => {\n    if (media) {\n      engine.load(media, peaks);\n    }\n  }, [engine, media, peaks]);\n\n  // Handle disposal\n  useEffect(() => {\n    return () => {\n      // Only dispose if we created it internally\n      if (!providedEngine) {\n        internalEngine.dispose();\n      }\n    };\n  }, [internalEngine, providedEngine]);\n\n  return {\n    /** The current reactive state of the engine */\n    state,\n    /** The raw WaveframeEngine instance for advanced usage */\n    engine,\n    /** Toggles playback between playing and paused */\n    togglePlay: () => engine.togglePlay(),\n    /** Starts audio playback */\n    play: () => engine.play(),\n    /** Pauses audio playback */\n    pause: () => engine.pause(),\n    /** Seeks to a specific percentage (0-1) */\n    seek: (percentage: number) => engine.seek(percentage),\n    /** Sets the playback volume (0-1) */\n    setVolume: (v: number) => engine.setVolume(v),\n    /** Mutes or unmutes the audio */\n    setMuted: (m: boolean) => engine.setMuted(m),\n    /** Manually triggers a re-analysis of the current media */\n    analyze: (samples?: number) => engine.analyze(samples),\n  };\n};\n","/**\n * Advanced Audio Utilities using Web Audio API\n */\nimport { PeakAnalyzer } from '../core/PeakAnalyzer';\n\n/**\n * Loads audio from a URL, decodes it, and generates a specific number of peaks (samples).\n * \n * This is a high-level utility function that internally manages a `PeakAnalyzer` instance.\n * \n * @param audioUrl The URL of the audio file to analyze.\n * @param samples The number of peaks (bars) to generate. Defaults to 512.\n * @returns A promise resolving to an array of normalized peak values (0 to 1).\n * \n * @example\n * ```typescript\n * const peaks = await generatePeaks('https://example.com/audio.mp3', 256);\n * ```\n */\nexport const generatePeaks = async (audioUrl: string, samples: number = 512): Promise<number[]> => {\n  const analyzer = new PeakAnalyzer();\n  try {\n    return await analyzer.generatePeaks(audioUrl, samples);\n  } finally {\n    analyzer.dispose();\n  }\n};\n\n/**\n * Loads audio into memory as a Blob and returns a temporary Object URL.\n * \n * Useful for ensuring audio data is fully loaded locally before starting \n * playback or analysis, which can help with CORS issues or slow networks.\n * \n * @param url The URL of the remote audio file.\n * @returns A promise resolving to a temporary `blob:` URL.\n */\nexport const loadAudioToMemory = async (url: string): Promise<string> => {\n  const response = await fetch(url);\n  const blob = await response.blob();\n  return URL.createObjectURL(blob);\n};\n\n/**\n * Cleanup function to prevent memory leaks from Object URLs.\n * \n * Call this when a `blob:` URL is no longer needed (e.g., when the component unmounts).\n * \n * @param url The Object URL to revoke.\n */\nexport const revokeAudioMemory = (url: string) => {\n  if (url && url.startsWith('blob:')) {\n    URL.revokeObjectURL(url);\n  }\n};\n","/**\n * Formats seconds into a M:SS string\n */\nexport const formatTime = (seconds: number): string => {\n  if (isNaN(seconds)) return '0:00';\n  const min = Math.floor(seconds / 60);\n  const sec = Math.floor(seconds % 60);\n  return `${min}:${sec.toString().padStart(2, '0')}`;\n};\n\n/**\n * Resamples an array of peaks to a target count using bucket-max or linear interpolation\n */\nexport const resamplePeaks = (peaks: number[], targetCount: number): number[] => {\n  if (peaks.length === 0) return [];\n  if (peaks.length === targetCount) return peaks;\n\n  const resampled = new Array(targetCount);\n  const ratio = peaks.length / targetCount;\n\n  if (ratio > 1) {\n    // Downsampling: Bucket Max\n    for (let i = 0; i < targetCount; i++) {\n      let max = 0;\n      const start = Math.floor(i * ratio);\n      const end = Math.floor((i + 1) * ratio);\n      for (let j = start; j < end; j++) {\n        if (peaks[j] > max) max = peaks[j];\n      }\n      resampled[i] = max;\n    }\n  } else {\n    // Upsampling: Linear Interpolation\n    for (let i = 0; i < targetCount; i++) {\n      const position = i * ratio;\n      const index = Math.floor(position);\n      const nextIndex = Math.min(index + 1, peaks.length - 1);\n      const fraction = position - index;\n      resampled[i] = peaks[index] + (peaks[nextIndex] - peaks[index]) * fraction;\n    }\n  }\n  return resampled;\n};\n\n/**\n * High-performance token-based syntax highlighter for React snippets\n */\nexport const highlightCode = (code: string): string[] => {\n  return code.split('\\n').map((line) => {\n    // 1. Escape basic HTML\n    let h = line.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\n    // 2. Identify and tokenize segments to avoid nested replacement issues\n    const tokens: { [key: string]: string } = {};\n    let counter = 0;\n    const addToken = (val: string, cls: string) => {\n      const id = `__TOKEN_${counter++}__`;\n      tokens[id] = `<span class=\"${cls}\">${val}</span>`;\n      return id;\n    };\n\n    // Strings\n    h = h.replace(/(\"(?:[^\"\\\\]|\\\\.)*\")/g, (m) => addToken(m, 'text-[#ce9178]'));\n    // Numbers\n    h = h.replace(/\\b(\\d+(\\.\\d+)?)\\b/g, (m) => addToken(m, 'text-[#b5cea8]'));\n    // Component Name\n    h = h.replace(/\\b(WaveframePlayer)\\b/g, (m) => addToken(m, 'text-[#4ec9b0]'));\n    // Props (anything followed by =)\n    h = h.replace(/\\b([a-z][a-zA-Z0-9]+)(?==)/g, (m) => addToken(m, 'text-[#9cdcfe]'));\n\n    // 3. Style remaining symbols\n    h = h.replace(/(&lt;|&gt;|\\{|\\}|\\/|:|,)/g, '<span class=\"text-gray-500\">$1</span>');\n\n    // 4. In-place token resolution\n    Object.entries(tokens).forEach(([id, html]) => {\n      h = h.replace(id, html);\n    });\n\n    return h;\n  });\n};\n\nexport * from './audio';\n","import { useMemo } from 'react';\nimport { resamplePeaks } from '../utils';\n\nexport const useResampledPeaks = (peaks: number[], targetCount: number) => {\n  return useMemo(() => resamplePeaks(peaks, targetCount), [peaks, targetCount]);\n};\n","import { useState, useEffect } from 'react';\n\nexport const useResizeObserver = (ref: React.RefObject<HTMLElement | null>) => {\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n      }\n    });\n\n    observer.observe(ref.current);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return width;\n};\n","import React, { memo } from 'react';\n\n/**\n * Props for the ArtworkOverlay component.\n */\ninterface ArtworkOverlayProps {\n  /** The URL or Object URL of the artwork image */\n  artworkUrl?: string;\n  /** The title of the track (used for alt text) */\n  title?: string;\n  /** Whether the artwork is currently being processed or the audio is analyzing */\n  isLoading?: boolean;\n}\n\n/**\n * A purely visual component for displaying track artwork.\n * \n * It handles loading states with a blur effect and provides a consistent \n * container for the track image.\n */\nexport const ArtworkOverlay: React.FC<ArtworkOverlayProps> = memo(({ \n  artworkUrl, \n  title, \n  isLoading\n}) => {\n  return (\n    <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\">\n      <div className={`w-full h-full transition-all duration-700 ${isLoading ? 'blur-md scale-110' : ''}`}>\n        {artworkUrl ? (\n          <img\n            src={artworkUrl}\n            alt={title}\n            className=\"w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110\"\n          />\n        ) : (\n          <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\">\n            <svg className=\"w-16 h-16 text-white opacity-50\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <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\" />\n            </svg>\n          </div>\n        )}\n      </div>\n\n      {isLoading && (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]\">\n          <div className=\"w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin\" />\n        </div>\n      )}\n    </div>\n  );\n});\n\nArtworkOverlay.displayName = 'ArtworkOverlay';\n","import React, { useRef, useEffect, memo } from 'react';\nimport { useResizeObserver } from '../hooks/useResizeObserver';\n\ninterface WaveformProps {\n  peaks: number[];\n  currentTime: number;\n  duration: number;\n  waveColor: string;\n  progressColor: string;\n  height: number;\n  onSeek: (percentage: number) => void;\n  resolution?: number | 'auto';\n  barWidth?: number;\n  barGap?: number;\n}\n\nexport const Waveform: React.FC<WaveformProps> = memo(({\n  peaks,\n  currentTime,\n  duration,\n  waveColor,\n  progressColor,\n  height,\n  onSeek,\n  resolution = 'auto',\n  barWidth = 2,\n  barGap = 1,\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const progressCanvasRef = useRef<HTMLCanvasElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = useResizeObserver(containerRef);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const progressCanvas = progressCanvasRef.current;\n    if (!canvas || !progressCanvas) return;\n\n    const ctx = canvas.getContext('2d');\n    const pCtx = progressCanvas.getContext('2d');\n    if (!ctx || !pCtx) return;\n\n    const dpr = window.devicePixelRatio || 1;\n    const rect = canvas.getBoundingClientRect();\n    const targetWidth = rect.width * dpr;\n    const targetHeight = rect.height * dpr;\n\n    [canvas, progressCanvas].forEach(c => {\n      if (c.width !== targetWidth || c.height !== targetHeight) {\n        c.width = targetWidth;\n        c.height = targetHeight;\n      }\n    });\n\n    const draw = () => {\n      if (peaks.length === 0) return;\n      const { width, height } = canvas;\n      \n      ctx.clearRect(0, 0, width, height);\n      pCtx.clearRect(0, 0, width, height);\n\n      const barCount = peaks.length;\n      const actualBarTotalWidth = width / barCount;\n      const actualBarWidth = typeof resolution === 'number' \n        ? actualBarTotalWidth * 0.7 \n        : barWidth * dpr;\n      const actualBarGap = typeof resolution === 'number'\n        ? actualBarTotalWidth * 0.3\n        : barGap * dpr;\n\n      ctx.lineCap = 'round';\n      ctx.lineWidth = actualBarWidth;\n      pCtx.lineCap = 'round';\n      pCtx.lineWidth = actualBarWidth;\n\n      peaks.forEach((peak, index) => {\n        const x = index * (actualBarWidth + actualBarGap) + actualBarWidth / 2;\n        const barHeight = peak * height * 0.8;\n        const yStart = (height - barHeight) / 2;\n        const yEnd = yStart + barHeight;\n\n        ctx.beginPath();\n        ctx.strokeStyle = waveColor;\n        ctx.moveTo(x, yStart);\n        ctx.lineTo(x, yEnd);\n        ctx.stroke();\n\n        pCtx.beginPath();\n        pCtx.strokeStyle = progressColor;\n        pCtx.moveTo(x, yStart);\n        pCtx.lineTo(x, yEnd);\n        pCtx.stroke();\n      });\n    };\n\n    draw();\n  }, [peaks, waveColor, progressColor, resolution, barWidth, barGap, height]);\n\n  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (containerRef.current && duration) {\n      const rect = containerRef.current.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const percentage = Math.max(0, Math.min(1, x / rect.width));\n      onSeek(percentage);\n    }\n  };\n\n  const progressPercent = duration ? (currentTime / duration) * 100 : 0;\n\n  return (\n    <div \n      ref={containerRef} \n      className=\"relative w-full cursor-pointer overflow-hidden\" \n      style={{ height: `${height}px` }}\n      onClick={handleSeek}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 w-full h-full\" />\n      <div \n        className=\"absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none\"\n        style={{ width: `${progressPercent}%` }}\n      >\n        <canvas ref={progressCanvasRef} className=\"absolute h-full\" style={{ width: `${containerWidth}px` }} />\n      </div>\n    </div>\n  );\n});\n\nWaveform.displayName = 'Waveform';\n","import React, { memo, useMemo, useRef, useState, useEffect } from 'react';\nimport { WaveframeTheme } from '../types';\nimport { WaveframeEngine } from '../core/WaveframeEngine';\nimport { useWaveframe } from '../hooks/useWaveframe';\nimport { useResampledPeaks } from '../hooks/useResampledPeaks';\nimport { useResizeObserver } from '../hooks/useResizeObserver';\nimport { ArtworkOverlay } from '../molecules/ArtworkOverlay';\nimport { Waveform } from '../organisms/Waveform';\nimport { formatTime } from '../utils';\n\n/**\n * Props for the WaveframePlayer component\n */\nexport interface WaveframePlayerProps {\n  /**\n   * The audio source to play. Can be a URL string or a Blob/File object.\n   */\n  media?: string | Blob;\n  /**\n   * Optional pre-generated peaks for the waveform (0-1 range).\n   * If omitted or empty, the player will automatically analyze the media.\n   */\n  peaks?: number[];\n  /**\n   * The artwork source to display. Can be a URL string or a Blob/File object.\n   */\n  artwork?: string | Blob;\n  /**\n   * The title of the track\n   */\n  title?: string;\n  /**\n   * The artist of the track\n   */\n  artist?: string;\n  /**\n   * The base color of the waveform bars\n   * @default \"#e5e7eb\" (light) or \"#374151\" (dark)\n   */\n  waveColor?: string;\n  /**\n   * The color of the played progress part of the waveform\n   * @default theme.primary or \"#3b82f6\"\n   */\n  progressColor?: string;\n  /**\n   * The height of the waveform in pixels\n   * @default 80\n   */\n  height?: number;\n  /**\n   * Additional CSS classes for the container\n   */\n  className?: string;\n  /**\n   * Inline styles for the container\n   */\n  style?: React.CSSProperties;\n  /**\n   * The number of bars to render. Use 'auto' to fit the container width.\n   * @default \"auto\"\n   */\n  resolution?: number | 'auto';\n  /**\n   * The width of each bar in pixels (if resolution is 'auto')\n   * @default 2\n   */\n  barWidth?: number;\n  /**\n   * The gap between bars in pixels (if resolution is 'auto')\n   * @default 1\n   */\n  barGap?: number;\n  /**\n   * Custom theme configuration\n   */\n  theme?: WaveframeTheme;\n  /**\n   * Optional WaveframeEngine instance for external control.\n   * If provided, the player will sync with this engine instead of creating its own.\n   */\n  engine?: WaveframeEngine;\n}\n\n/**\n * The standard \"all-in-one\" Waveframe player component.\n * \n * This component features a SoundCloud-inspired layout with a prominent \n * play/pause button positioned next to the track metadata.\n */\nexport const WaveframePlayer: React.FC<WaveframePlayerProps> = memo(({\n  media,\n  peaks: propPeaks,\n  artwork,\n  title,\n  artist,\n  waveColor: propWaveColor,\n  progressColor: propProgressColor,\n  height = 80,\n  className = '',\n  style: propStyle,\n  resolution = 'auto',\n  barWidth = 2,\n  barGap = 1,\n  theme,\n  engine: providedEngine,\n}) => {\n  // Use the headless hook for state and controls\n  const { state, togglePlay, seek } = useWaveframe(media, {\n    peaks: propPeaks,\n    engine: providedEngine,\n  });\n\n  const { isPlaying, currentTime, duration, peaks, isAnalyzing } = state;\n\n  // Handle Artwork Blob -> Object URL\n  const [resolvedArtworkUrl, setResolvedArtworkUrl] = useState<string | undefined>(\n    typeof artwork === 'string' ? artwork : undefined\n  );\n\n  useEffect(() => {\n    if (artwork instanceof Blob) {\n      const url = URL.createObjectURL(artwork);\n      setResolvedArtworkUrl(url);\n      return () => URL.revokeObjectURL(url);\n    } else {\n      setResolvedArtworkUrl(artwork);\n    }\n  }, [artwork]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = useResizeObserver(containerRef);\n\n  const targetCount = useMemo(() => {\n    if (typeof resolution === 'number') return resolution;\n    if (containerWidth > 0) {\n      return Math.max(1, Math.floor(containerWidth / (barWidth + barGap)));\n    }\n    return peaks.length || 1;\n  }, [resolution, containerWidth, barWidth, barGap, peaks.length]);\n\n  const resampledPeaks = useResampledPeaks(peaks, targetCount);\n\n  const waveColor = useMemo(() => {\n    if (propWaveColor) return propWaveColor;\n    if (theme) return theme.bg === '#ffffff' ? '#e5e7eb' : '#374151';\n    return '#e5e7eb';\n  }, [propWaveColor, theme]);\n\n  const progressColor = propProgressColor || theme?.primary || '#3b82f6';\n\n  const mergedStyle = useMemo(() => {\n    const baseStyle = {\n      '--wf-bg-color': theme?.bg || 'white',\n      '--wf-border-color': theme?.border || '#f3f4f6',\n      '--wf-title-color': theme?.text || '#111827',\n      '--wf-artist-color': theme?.text || '#6b7280',\n      '--wf-time-color': theme?.text || '#9ca3af',\n      '--wf-play-btn-bg': theme?.primary || '#3b82f6',\n      '--wf-placeholder-from': theme?.primary || '#fb923c',\n      '--wf-placeholder-to': theme?.bg || '#ec4899',\n    };\n    return { ...baseStyle, ...propStyle } as React.CSSProperties;\n  }, [theme, propStyle]);\n\n  return (\n    <div\n      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 ${className}`}\n      style={mergedStyle}\n    >\n      <ArtworkOverlay \n        artworkUrl={resolvedArtworkUrl} \n        title={title} \n        isLoading={isAnalyzing}\n      />\n\n      <div className=\"flex-1 w-full flex flex-col min-w-0\">\n        <div className=\"flex items-center gap-4 mb-6\">\n          {/* SoundCloud-style circular play button */}\n          <button\n            onClick={togglePlay}\n            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\"\n          >\n            {isPlaying ? (\n              <svg className=\"w-6 h-6 md:w-7 md:h-7\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\" />\n              </svg>\n            ) : (\n              <svg className=\"w-6 h-6 md:w-7 md:h-7 ml-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M8 5v14l11-7z\" />\n              </svg>\n            )}\n          </button>\n\n          <div className=\"flex-1 flex flex-col min-w-0\">\n            <div className=\"flex items-center justify-between gap-4\">\n              {artist && (\n                <p className=\"text-[10px] md:text-xs font-bold uppercase text-[var(--wf-artist-color,#6b7280)] opacity-60 tracking-[0.1em] line-clamp-1\">\n                  {artist}\n                </p>\n              )}\n              <div className=\"text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0\">\n                {formatTime(currentTime)} / {formatTime(duration)}\n              </div>\n            </div>\n            {title && (\n              <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\">\n                {title}\n              </h3>\n            )}\n          </div>\n        </div>\n\n        <div className=\"mt-auto\" ref={containerRef}>\n          <Waveform \n            peaks={resampledPeaks}\n            currentTime={currentTime}\n            duration={duration}\n            waveColor={waveColor}\n            progressColor={progressColor}\n            height={height}\n            onSeek={seek}\n            resolution={resolution}\n            barWidth={barWidth}\n            barGap={barGap}\n          />\n        </div>\n      </div>\n    </div>\n  );\n});\n\nWaveframePlayer.displayName = 'WaveframePlayer';\n"]}