@waveform-playlist/browser 5.3.1 → 5.3.2

package/dist/index.js

@@ -1224,42 +1224,33 @@
   width: 1px;
   height: ${e=>e.$height}px;
   background: rgba(255, 255, 255, 0.2);
-`,zs=({level:e,peakLevel:t,width:n=200,height:r=20,className:a})=>{const s=Math.max(0,Math.min(1,e)),o=t!==void 0?Math.max(0,Math.min(1,t)):0;return h.jsxs(_s,{$width:n,$height:r,className:a,children:[h.jsx(Ps,{$level:s,$height:r}),t!==void 0&&o>0&&h.jsx(Vs,{$peakLevel:o,$height:r}),h.jsxs(js,{$height:r,children:[h.jsx(In,{$position:60,$height:r}),h.jsx(In,{$position:85,$height:r})]})]})};i.memo(zs);function Hs(e,t,n,r={}){const{currentTime:a=0,audioConstraints:s,...o}=r,[l,c]=i.useState(!1),[u,d]=i.useState(null),{stream:v,devices:p,hasPermission:f,requestAccess:C,error:x}=Ws(),{level:b,peakLevel:g}=Fs(v),{isRecording:S,isPaused:w,duration:m,peaks:y,startRecording:k,stopRecording:I,pauseRecording:A,resumeRecording:E,error:M}=Bs(v,o),R=i.useCallback(async()=>{n&&(l||(await jt(),c(!0)),await k())},[n,l,k]),F=i.useCallback(async()=>{const j=await I();if(j&&n){const O=e.findIndex(te=>te.id===n);if(O===-1)return;const z=e[O],Y=Math.floor(a*j.sampleRate);let B=0;if(z.clips.length>0){const te=z.clips.map(re=>re.startSample+re.durationSamples);B=Math.max(...te)}const G=Math.max(Y,B),K={id:`clip-${Date.now()}`,audioBuffer:j,startSample:G,durationSamples:j.length,offsetSamples:0,sampleRate:j.sampleRate,sourceDurationSamples:j.length,gain:1,name:`Recording ${new Date().toLocaleTimeString()}`},ie=e.map((te,re)=>re===O?{...te,clips:[...te.clips,K]}:te);t(ie)}},[n,e,t,a,I]);i.useEffect(()=>{f&&p.length>0&&u===null&&d(p[0].deviceId)},[f,p.length]);const T=i.useCallback(async()=>{await C(void 0,s),await jt(),c(!0)},[C,s]),P=i.useCallback(async j=>{d(j),await C(j,s),await jt(),c(!0)},[C,s]);return{isRecording:S,isPaused:w,duration:m,level:b,peakLevel:g,error:x||M,stream:v,devices:p,hasPermission:f,selectedDevice:u,startRecording:R,stopRecording:F,pauseRecording:A,resumeRecording:E,requestMicAccess:T,changeDevice:P,recordingPeaks:y}}const Ct=[{id:"reverb",name:"Reverb",category:"reverb",description:"Simple convolution reverb with adjustable decay time",parameters:[{name:"decay",label:"Decay",type:"number",min:.1,max:10,step:.1,default:1.5,unit:"s"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"freeverb",name:"Freeverb",category:"reverb",description:"Classic Schroeder/Moorer reverb with room size and dampening",parameters:[{name:"roomSize",label:"Room Size",type:"number",min:0,max:1,step:.01,default:.7},{name:"dampening",label:"Dampening",type:"number",min:0,max:1e4,step:100,default:3e3,unit:"Hz"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"jcReverb",name:"JC Reverb",category:"reverb",description:"Attempt at Roland JC-120 chorus reverb emulation",parameters:[{name:"roomSize",label:"Room Size",type:"number",min:0,max:1,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"feedbackDelay",name:"Feedback Delay",category:"delay",description:"Delay line with feedback for echo effects",parameters:[{name:"delayTime",label:"Delay Time",type:"number",min:0,max:1,step:.01,default:.25,unit:"s"},{name:"feedback",label:"Feedback",type:"number",min:0,max:.95,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"pingPongDelay",name:"Ping Pong Delay",category:"delay",description:"Stereo delay bouncing between left and right channels",parameters:[{name:"delayTime",label:"Delay Time",type:"number",min:0,max:1,step:.01,default:.25,unit:"s"},{name:"feedback",label:"Feedback",type:"number",min:0,max:.95,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"chorus",name:"Chorus",category:"modulation",description:"Creates thickness by layering detuned copies of the signal",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:1.5,unit:"Hz"},{name:"delayTime",label:"Delay",type:"number",min:0,max:20,step:.5,default:3.5,unit:"ms"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:.7},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"phaser",name:"Phaser",category:"modulation",description:"Classic phaser effect using allpass filters",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:.5,unit:"Hz"},{name:"octaves",label:"Octaves",type:"number",min:1,max:6,step:1,default:3},{name:"baseFrequency",label:"Base Freq",type:"number",min:100,max:2e3,step:10,default:350,unit:"Hz"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"tremolo",name:"Tremolo",category:"modulation",description:"Rhythmic volume modulation",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:20,step:.1,default:4,unit:"Hz"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"vibrato",name:"Vibrato",category:"modulation",description:"Pitch modulation effect",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:20,step:.1,default:5,unit:"Hz"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:.1},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"autoPanner",name:"Auto Panner",category:"modulation",description:"Automatic left-right panning",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:1,unit:"Hz"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:1},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"autoFilter",name:"Auto Filter",category:"filter",description:"Automated filter sweep with LFO",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:1,unit:"Hz"},{name:"baseFrequency",label:"Base Freq",type:"number",min:20,max:2e3,step:10,default:200,unit:"Hz"},{name:"octaves",label:"Octaves",type:"number",min:.5,max:8,step:.5,default:2.6},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:1},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"autoWah",name:"Auto Wah",category:"filter",description:"Envelope follower filter effect",parameters:[{name:"baseFrequency",label:"Base Freq",type:"number",min:20,max:500,step:10,default:100,unit:"Hz"},{name:"octaves",label:"Octaves",type:"number",min:1,max:8,step:1,default:6},{name:"sensitivity",label:"Sensitivity",type:"number",min:-40,max:0,step:1,default:0,unit:"dB"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"eq3",name:"3-Band EQ",category:"filter",description:"Three band equalizer with low, mid, and high controls",parameters:[{name:"low",label:"Low",type:"number",min:-24,max:24,step:.5,default:0,unit:"dB"},{name:"mid",label:"Mid",type:"number",min:-24,max:24,step:.5,default:0,unit:"dB"},{name:"high",label:"High",type:"number",min:-24,max:24,step:.5,default:0,unit:"dB"},{name:"lowFrequency",label:"Low Freq",type:"number",min:20,max:500,step:10,default:400,unit:"Hz"},{name:"highFrequency",label:"High Freq",type:"number",min:1e3,max:1e4,step:100,default:2500,unit:"Hz"}]},{id:"distortion",name:"Distortion",category:"distortion",description:"Wave shaping distortion effect",parameters:[{name:"distortion",label:"Drive",type:"number",min:0,max:1,step:.01,default:.4},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"bitCrusher",name:"Bit Crusher",category:"distortion",description:"Reduces bit depth for lo-fi digital texture",parameters:[{name:"bits",label:"Bits",type:"number",min:1,max:16,step:1,default:4},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"chebyshev",name:"Chebyshev",category:"distortion",description:"Waveshaping distortion using Chebyshev polynomials",parameters:[{name:"order",label:"Order",type:"number",min:1,max:100,step:1,default:50},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"compressor",name:"Compressor",category:"dynamics",description:"Dynamic range compressor",parameters:[{name:"threshold",label:"Threshold",type:"number",min:-60,max:0,step:1,default:-24,unit:"dB"},{name:"ratio",label:"Ratio",type:"number",min:1,max:20,step:.5,default:4},{name:"attack",label:"Attack",type:"number",min:0,max:1,step:.001,default:.003,unit:"s"},{name:"release",label:"Release",type:"number",min:0,max:1,step:.01,default:.25,unit:"s"},{name:"knee",label:"Knee",type:"number",min:0,max:40,step:1,default:30,unit:"dB"}]},{id:"limiter",name:"Limiter",category:"dynamics",description:"Hard limiter to prevent clipping",parameters:[{name:"threshold",label:"Threshold",type:"number",min:-12,max:0,step:.5,default:-6,unit:"dB"}]},{id:"gate",name:"Gate",category:"dynamics",description:"Noise gate to silence signal below threshold",parameters:[{name:"threshold",label:"Threshold",type:"number",min:-100,max:0,step:1,default:-40,unit:"dB"},{name:"attack",label:"Attack",type:"number",min:0,max:.3,step:.001,default:.001,unit:"s"},{name:"release",label:"Release",type:"number",min:0,max:.5,step:.01,default:.1,unit:"s"}]},{id:"stereoWidener",name:"Stereo Widener",category:"spatial",description:"Expands or narrows the stereo image",parameters:[{name:"width",label:"Width",type:"number",min:0,max:1,step:.01,default:.5}]}],Qt=e=>Ct.find(t=>t.id===e),Ls=e=>Ct.filter(t=>t.category===e),Xs=[{id:"reverb",name:"Reverb"},{id:"delay",name:"Delay"},{id:"modulation",name:"Modulation"},{id:"filter",name:"Filter"},{id:"distortion",name:"Distortion"},{id:"dynamics",name:"Dynamics"},{id:"spatial",name:"Spatial"}],Gs={reverb:Z.Reverb,freeverb:Z.Freeverb,jcReverb:Z.JCReverb,feedbackDelay:Z.FeedbackDelay,pingPongDelay:Z.PingPongDelay,chorus:Z.Chorus,phaser:Z.Phaser,tremolo:Z.Tremolo,vibrato:Z.Vibrato,autoPanner:Z.AutoPanner,autoFilter:Z.AutoFilter,autoWah:Z.AutoWah,eq3:Z.EQ3,distortion:Z.Distortion,bitCrusher:Z.BitCrusher,chebyshev:Z.Chebyshev,compressor:Z.Compressor,limiter:Z.Limiter,gate:Z.Gate,stereoWidener:Z.StereoWidener};let Ns=0;const Os=()=>`effect_${Date.now()}_${++Ns}`;function ht(e,t){const n=Gs[e.id];if(!n)throw new Error(`Unknown effect type: ${e.id}`);const r={};e.parameters.forEach(o=>{const l=t?.[o.name]??o.default;r[o.name]=l});const a=new n(r),s=Os();return{effect:a,id:e.id,instanceId:s,dispose(){try{a.disconnect(),a.dispose()}catch{}},setParameter(o,l){o==="wet"&&a.wet?a.wet.value=l:a[o]!==void 0&&(a[o]?.value!==void 0?a[o].value=l:a[o]=l)},getParameter(o){if(o==="wet"&&a.wet)return a.wet.value;if(a[o]!==void 0)return a[o]?.value!==void 0?a[o].value:a[o]},connect(o){a.connect(o)},disconnect(){try{a.disconnect()}catch{}}}}function Ys(e){if(e.length===0)throw new Error("Cannot create effect chain with no effects");for(let t=0;t<e.length-1;t++)e[t].effect.connect(e[t+1].effect);return{input:e[0].effect,output:e[e.length-1].effect,dispose(){e.forEach(t=>t.dispose())}}}function Ks(e=256){const[t,n]=i.useState([]),r=i.useRef(t);r.current=t;const a=i.useRef(new Map),s=i.useRef(null),o=i.useRef(null),l=i.useCallback(b=>{const g=o.current;if(!g)return;const{masterGainNode:S,destination:w,analyserNode:m}=g;try{S.disconnect()}catch{}const y=b.map(k=>a.current.get(k.instanceId)).filter(k=>k!==void 0);if(y.length===0)S.connect(m),m.connect(w);else{let k=S;y.forEach(I=>{try{I.disconnect()}catch{}k.connect(I.effect),k=I.effect}),k.connect(m),m.connect(w)}},[]),c=i.useCallback(b=>{const g=Qt(b);if(!g){console.error(`Unknown effect: ${b}`);return}const S={};g.parameters.forEach(y=>{S[y.name]=y.default});const w=ht(g,S);a.current.set(w.instanceId,w);const m={instanceId:w.instanceId,effectId:g.id,definition:g,params:S,bypassed:!1};n(y=>[...y,m])},[]),u=i.useCallback(b=>{const g=a.current.get(b);g&&(g.dispose(),a.current.delete(b)),n(S=>S.filter(w=>w.instanceId!==b))},[]),d=i.useCallback((b,g,S)=>{const w=a.current.get(b);w&&w.setParameter(g,S),n(m=>m.map(y=>y.instanceId===b?{...y,params:{...y.params,[g]:S}}:y))},[]),v=i.useCallback(b=>{const g=r.current.find(m=>m.instanceId===b);if(!g)return;const S=!g.bypassed,w=a.current.get(b);if(w){const m=g.params.wet??1;w.setParameter("wet",S?0:m)}n(m=>m.map(y=>y.instanceId===b?{...y,bypassed:S}:y))},[]),p=i.useCallback((b,g)=>{n(S=>{const w=[...S],[m]=w.splice(b,1);return w.splice(g,0,m),w})},[]),f=i.useCallback(()=>{a.current.forEach(b=>b.dispose()),a.current.clear(),n([])},[]);i.useEffect(()=>{l(t)},[t,l]);const C=i.useCallback((b,g,S)=>{const w=new Z.Analyser("fft",e);s.current=w,o.current={masterGainNode:b,destination:g,analyserNode:w};const y=r.current.map(k=>a.current.get(k.instanceId)).filter(k=>k!==void 0);if(y.length===0)b.connect(w),w.connect(g);else{let k=b;y.forEach(I=>{k.connect(I.effect),k=I.effect}),k.connect(w),w.connect(g)}return function(){w.dispose(),s.current=null,o.current=null}},[e]);i.useEffect(()=>()=>{a.current.forEach(b=>b.dispose()),a.current.clear()},[]);const x=i.useCallback(()=>{const b=t.filter(g=>!g.bypassed);if(b.length!==0)return(g,S,w)=>{const m=[];for(const y of b){const k=ht(y.definition,y.params);m.push(k)}if(m.length===0)g.connect(S);else{let y=g;m.forEach(k=>{y.connect(k.effect),y=k.effect}),y.connect(S)}return function(){m.forEach(k=>k.dispose())}}},[t]);return{activeEffects:t,availableEffects:Ct,addEffect:c,removeEffect:u,updateParameter:d,toggleBypass:v,reorderEffects:p,clearAllEffects:f,masterEffects:C,createOfflineEffectsFunction:x,analyserRef:s}}function Us(){const[e,t]=i.useState(new Map),n=i.useRef(new Map),r=i.useRef(new Map),a=i.useCallback((f,C)=>{const x=r.current.get(f);if(!x)return;const{graphEnd:b,masterGainNode:g}=x,S=n.current.get(f);try{b.disconnect()}catch{}const w=C.map(m=>S?.get(m.instanceId)).filter(m=>m!==void 0);if(w.length===0)b.connect(g);else{let m=b;w.forEach(y=>{try{y.disconnect()}catch{}m.connect(y.effect),m=y.effect}),m.connect(g)}},[]),s=i.useCallback((f,C)=>{const x=Qt(C);if(!x){console.error(`Unknown effect: ${C}`);return}const b={};x.parameters.forEach(w=>{b[w.name]=w.default});const g=ht(x,b);n.current.has(f)||n.current.set(f,new Map),n.current.get(f).set(g.instanceId,g);const S={instanceId:g.instanceId,effectId:x.id,definition:x,params:b,bypassed:!1};t(w=>{const m=new Map(w),y=m.get(f)||[];return m.set(f,[...y,S]),m})},[]),o=i.useCallback((f,C)=>{const x=n.current.get(f),b=x?.get(C);b&&(b.dispose(),x?.delete(C)),t(g=>{const S=new Map(g),w=S.get(f)||[];return S.set(f,w.filter(m=>m.instanceId!==C)),S})},[]),l=i.useCallback((f,C,x,b)=>{const S=n.current.get(f)?.get(C);S&&S.setParameter(x,b),t(w=>{const m=new Map(w),y=m.get(f)||[];return m.set(f,y.map(k=>k.instanceId===C?{...k,params:{...k.params,[x]:b}}:k)),m})},[]),c=i.useCallback((f,C)=>{const b=(d.current.get(f)||[]).find(m=>m.instanceId===C);if(!b)return;const g=!b.bypassed,w=n.current.get(f)?.get(C);if(w){const m=b.params.wet??1;w.setParameter("wet",g?0:m)}t(m=>{const y=new Map(m),k=y.get(f)||[];return y.set(f,k.map(I=>I.instanceId===C?{...I,bypassed:g}:I)),y})},[]),u=i.useCallback(f=>{const C=n.current.get(f);C&&(C.forEach(x=>x.dispose()),C.clear()),t(x=>{const b=new Map(x);return b.set(f,[]),b})},[]),d=i.useRef(e);d.current=e;const v=i.useCallback(f=>(C,x,b)=>{r.current.set(f,{graphEnd:C,masterGainNode:x});const g=d.current.get(f)||[],S=n.current.get(f),w=g.map(m=>S?.get(m.instanceId)).filter(m=>m!==void 0);if(w.length===0)C.connect(x);else{let m=C;w.forEach(y=>{m.connect(y.effect),m=y.effect}),m.connect(x)}return function(){r.current.delete(f)}},[]);i.useEffect(()=>{e.forEach((f,C)=>{a(C,f)})},[e,a]),i.useEffect(()=>()=>{n.current.forEach(f=>{f.forEach(C=>C.dispose()),f.clear()}),n.current.clear()},[]);const p=i.useCallback(f=>{const x=(e.get(f)||[]).filter(b=>!b.bypassed);if(x.length!==0)return(b,g,S)=>{const w=[];for(const m of x){const y=ht(m.definition,m.params);w.push(y)}if(w.length===0)b.connect(g);else{let m=b;w.forEach(y=>{m.connect(y.effect),m=y.effect}),m.connect(g)}return function(){w.forEach(y=>y.dispose())}}},[e]);return{trackEffectsState:e,addEffectToTrack:s,removeEffectFromTrack:o,updateTrackEffectParameter:l,toggleBypass:c,clearTrackEffects:u,getTrackEffectsFunction:v,createOfflineTrackEffectsFunction:p,availableEffects:Ct}}function Js(e,t={}){const{bitDepth:n=16}=t,r=e.numberOfChannels,a=e.sampleRate,s=e.length,o=n/8,l=r*o,c=a*l,u=s*l,d=44,v=d+u,p=new ArrayBuffer(v),f=new DataView(p);At(f,0,"RIFF"),f.setUint32(4,v-8,!0),At(f,8,"WAVE"),At(f,12,"fmt "),f.setUint32(16,16,!0),f.setUint16(20,n===32?3:1,!0),f.setUint16(22,r,!0),f.setUint32(24,a,!0),f.setUint32(28,c,!0),f.setUint16(32,l,!0),f.setUint16(34,n,!0),At(f,36,"data"),f.setUint32(40,u,!0);const C=[];for(let b=0;b<r;b++)C.push(e.getChannelData(b));let x=d;if(n===16)for(let b=0;b<s;b++)for(let g=0;g<r;g++){const S=C[g][b],w=Math.max(-1,Math.min(1,S)),m=w<0?w*32768:w*32767;f.setInt16(x,m,!0),x+=2}else for(let b=0;b<s;b++)for(let g=0;g<r;g++)f.setFloat32(x,C[g][b],!0),x+=4;return new Blob([p],{type:"audio/wav"})}function At(e,t,n){for(let r=0;r<n.length;r++)e.setUint8(t+r,n.charCodeAt(r))}function qs(e,t){const n=URL.createObjectURL(e),r=document.createElement("a");r.href=n,r.download=t,r.style.display="none",document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)}function fr(){const[e,t]=i.useState(!1),[n,r]=i.useState(0),[a,s]=i.useState(null);return{exportWav:i.useCallback(async(l,c,u={})=>{const{filename:d="export",mode:v="master",trackIndex:p,autoDownload:f=!0,applyEffects:C=!0,effectsFunction:x,createOfflineTrackEffects:b,bitDepth:g=16,onProgress:S}=u;t(!0),r(0),s(null);try{if(l.length===0)throw new Error("No tracks to export");if(v==="individual"&&(p===void 0||p<0||p>=l.length))throw new Error("Invalid track index for individual export");const w=l[0].clips[0]?.sampleRate||44100;let m=0;for(const R of l)for(const F of R.clips){const T=F.startSample+F.durationSamples;m=Math.max(m,T)}m+=Math.round(w*.1);const y=m/w,k=v==="individual"?[{track:l[p],state:c[p],index:p}]:l.map((R,F)=>({track:R,state:c[F],index:F})),I=c.some(R=>R.soloed),A=!!b;let E;if((x||A)&&C)E=await Qs(k,c,I,y,w,x,b,R=>{r(R),S?.(R)});else{const R=new OfflineAudioContext(2,m,w);let F=0;const T=k.reduce((P,{track:j})=>P+j.clips.length,0);for(const{track:P,state:j}of k)if(!(j.muted&&!j.soloed)&&!(I&&!j.soloed))for(const O of P.clips){await ti(R,O,j,w,C),F++;const z=F/T*.5;r(z),S?.(z)}r(.5),S?.(.5),E=await R.startRendering()}r(.9),S?.(.9);const M=Js(E,{bitDepth:g});if(r(1),S?.(1),f){const R=v==="individual"?`${d}_${l[p].name}`:d;qs(M,`${R}.wav`)}return{audioBuffer:E,blob:M,duration:y}}catch(w){const m=w instanceof Error?w.message:"Export failed";throw s(m),w}finally{t(!1)}},[]),isExporting:e,progress:n,error:a}}async function Qs(e,t,n,r,a,s,o,l){const{Offline:c,Volume:u,Gain:d,Panner:v,Player:p,ToneAudioBuffer:f}=await import("tone");l(.1);let C;try{C=await c(async({transport:x,destination:b})=>{const g=new u(0);let S;s?S=s(g,b,!0):g.connect(b);for(const{track:w,state:m}of e){if(m.muted&&!m.soloed||n&&!m.soloed)continue;const y=new u(ei(m.volume)),k=new v(m.pan),I=new d(m.muted?0:1),A=o?.(w.id);A?A(I,g,!0):I.connect(g),k.connect(I),y.connect(k);for(const E of w.clips){const{audioBuffer:M,startSample:R,durationSamples:F,offsetSamples:T,gain:P,fadeIn:j,fadeOut:O}=E,z=R/a,Y=F/a,B=T/a,G=new f(M),K=new p(G),ie=new d(P);if(K.connect(ie),ie.connect(y),j){const te=z,re=z+j.duration,le=ie.gain._param;le.setValueAtTime(0,te),le.linearRampToValueAtTime(P,re)}if(O){const te=z+Y-O.duration,re=z+Y,le=ie.gain._param;le.setValueAtTime(P,te),le.linearRampToValueAtTime(0,re)}K.start(z,B,Y)}}x.start(0)},r,2,a)}catch(x){throw x instanceof Error?x:new Error(`Tone.Offline rendering failed: ${String(x)}`)}return l(.9),C.get()}function ei(e){return 20*Math.log10(Math.max(e,1e-4))}async function ti(e,t,n,r,a){const{audioBuffer:s,startSample:o,durationSamples:l,offsetSamples:c,gain:u,fadeIn:d,fadeOut:v}=t;if(!s){console.warn(`Skipping clip "${t.name||t.id}" - no audioBuffer for export`);return}const p=o/r,f=l/r,C=c/r,x=e.createBufferSource();x.buffer=s;const b=e.createGain(),g=u*n.volume,S=e.createStereoPanner();if(S.pan.value=n.pan,x.connect(b),b.connect(S),S.connect(e.destination),a){if(d?b.gain.setValueAtTime(0,p):b.gain.setValueAtTime(g,p),d){const w=p,m=p+d.duration;$n(b.gain,w,m,0,g,d.type||"linear")}if(v){const w=p+f-v.duration,m=p+f;(!d||d.duration<f-v.duration)&&b.gain.setValueAtTime(g,w),$n(b.gain,w,m,g,0,v.type||"linear")}}else b.gain.setValueAtTime(g,p);x.start(p,C,f)}function $n(e,t,n,r,a,s){const o=n-t;if(!(o<=0))switch(s){case"linear":e.setValueAtTime(r,t),e.linearRampToValueAtTime(a,n);break;case"exponential":const l=Math.max(r,1e-4),c=Math.max(a,1e-4);e.setValueAtTime(l,t),e.exponentialRampToValueAtTime(c,n),a===0&&e.setValueAtTime(0,n);break;case"logarithmic":const u=Mn(r,a,256,"logarithmic");e.setValueCurveAtTime(u,t,o);break;case"sCurve":const d=Mn(r,a,256,"sCurve");e.setValueCurveAtTime(d,t,o);break;default:e.setValueAtTime(r,t),e.linearRampToValueAtTime(a,n)}}function Mn(e,t,n,r){const a=new Float32Array(n),s=t-e;for(let o=0;o<n;o++){const l=o/(n-1);let c;r==="logarithmic"?s>0?c=Math.log10(1+l*9)/Math.log10(10):c=1-Math.log10(1+(1-l)*9)/Math.log10(10):c=l*l*(3-2*l),a[o]=e+s*c}return a}const mr=i.createContext(null),hr=i.createContext(null),pr=i.createContext(null),gr=i.createContext(null),br=i.createContext(null),ni=({tracks:e,timescale:t=!1,mono:n=!1,waveHeight:r=80,samplesPerPixel:a=1024,zoomLevels:s,automaticScroll:o=!1,theme:l,controls:c={show:!1,width:0},annotationList:u,effects:d,onReady:v,onAnnotationUpdate:p,onAnnotationsChange:f,barWidth:C=1,barGap:x=0,progressBarWidth:b,children:g})=>{const S=b??C+x,w=i.useMemo(()=>u?.annotations?u.annotations.map(W=>typeof W.start=="number"?W:rr(W)):[],[u?.annotations]),m=i.useRef(w);m.current=w;const[y,k]=i.useState(null),[I,A]=i.useState(!1),[E,M]=i.useState(0),[R,F]=i.useState(0),[T,P]=i.useState([]),[j,O]=i.useState([]),[z,Y]=i.useState([]),[B,G]=i.useState(0),[K,ie]=i.useState(0),[te,re]=i.useState(null),[le,ze]=i.useState(o),[V,ce]=i.useState(u?.isContinuousPlay??!1),[ae,L]=i.useState(u?.linkEndpoints??!1),[de,fe]=i.useState(u?.editable??!1),[oe,Ee]=i.useState(!1),[De,He]=i.useState(0),[Le,ne]=i.useState(0),[Ge,Ke]=i.useState(!1),_=i.useRef(null),Te=i.useRef(0),pe=i.useRef(0),ge=i.useRef(null),ot=i.useRef(z),N=i.useRef(0),se=i.useRef(0),ve=i.useRef(null),xe=i.useRef(null),Ie=i.useRef(!1),Ue=i.useRef(u?.isContinuousPlay??!1),Oe=i.useRef(null),tt=i.useRef(a),ct=i.useRef(!1),H=i.useRef(0),U=i.useRef(0),ee=i.useRef(0),me=i.useRef(0),{timeFormat:be,setTimeFormat:$e,formatTime:Ne}=ir(),Ze=lr({initialSamplesPerPixel:a,zoomLevels:s}),Q=Ze.samplesPerPixel,{masterVolume:we,setMasterVolume:Je}=cr({playoutRef:_,initialVolume:1}),st=i.useCallback(W=>{Ue.current=W,ce(W)},[]),Xe=i.useCallback(W=>{Oe.current=W,k(W)},[]),qe=i.useCallback(W=>{ct.current=W,Ee(W)},[]),Pe=i.useCallback((W,X)=>{ee.current=W,me.current=X,He(W),ne(X)},[]),ut=i.useCallback(()=>{const W=H.current,X=U.current;W!==X&&X>W&&Pe(W,X)},[Pe]),dt=i.useCallback(()=>{Pe(0,0)},[Pe]);i.useEffect(()=>{Ie.current=le},[le]),i.useEffect(()=>{ot.current=z},[z]),i.useEffect(()=>{H.current=B,U.current=K},[B,K]),i.useEffect(()=>{if(!xe.current||!T.length)return;const W=xe.current,X=tt.current,q=Q;if(X===q)return;const ue=c.show?c.width:0,J=W.clientWidth,ye=W.scrollLeft+J/2-ue,Qe=T[0].sampleRate,ke=ye*X/Qe*Qe/q,We=Math.max(0,ke+ue-J/2);W.scrollLeft=We,tt.current=q},[Q,T,c]);const nt=i.useRef(null);i.useEffect(()=>{if(Ke(!1),e.length===0){P([]),F(0),Y([]),O([]),_.current&&(_.current.dispose(),_.current=null);return}const W=I,X=pe.current;return _.current&&W&&(_.current.stop(),ge.current&&(cancelAnimationFrame(ge.current),ge.current=null),nt.current={position:X}),(async()=>{try{const ue=[];e.forEach(Ce=>{Ce.clips.length>0&&Ce.clips[0].audioBuffer&&ue.push(Ce.clips[0].audioBuffer)});let J=0;e.forEach(Ce=>{Ce.clips.forEach(ke=>{const We=ke.sampleRate,xt=(ke.startSample+ke.durationSamples)/We;J=Math.max(J,xt)})}),P(ue),F(J),Y(Ce=>Ce.length===e.length?Ce.map((ke,We)=>({...ke,name:e[We].name})):e.map(ke=>({name:ke.name,muted:ke.muted,soloed:ke.soloed,volume:ke.volume,pan:ke.pan}))),_.current&&_.current.dispose();const Se=new ra({effects:d}),ye=ot.current;e.forEach((Ce,ke)=>{const We=Ce.clips.filter(rt=>rt.audioBuffer);if(We.length>0){const rt=We[0].sampleRate,xt=Math.min(...We.map(Fe=>Fe.startSample/rt)),Hr=Math.max(...We.map(Fe=>(Fe.startSample+Fe.durationSamples)/rt)),wt=ye[ke],Lr={id:`track-${ke}`,name:Ce.name,gain:wt?.volume??Ce.volume,muted:wt?.muted??Ce.muted,soloed:wt?.soloed??Ce.soloed,stereoPan:wt?.pan??Ce.pan,startTime:xt,endTime:Hr},Xr=We.map(Fe=>{const Pt=Fe.sampleRate;return{buffer:Fe.audioBuffer,startTime:Fe.startSample/Pt-xt,duration:Fe.durationSamples/Pt,offset:Fe.offsetSamples/Pt,fadeIn:Fe.fadeIn,fadeOut:Fe.fadeOut,gain:Fe.gain}});Se.addTrack({clips:Xr,track:Lr,effects:Ce.effects})}}),Se.applyInitialSoloState(),_.current=Se,Ke(!0);const Qe=new CustomEvent("waveform-playlist:ready",{detail:{trackCount:e.length,duration:J}});window.dispatchEvent(Qe),v?.()}catch(ue){console.error("Error loading audio:",ue)}})(),()=>{ge.current&&cancelAnimationFrame(ge.current),_.current&&_.current.dispose()}},[e,v,I]),i.useEffect(()=>{if(e.length===0)return;const W=16,X=e.map(q=>q.clips.map(J=>{if(J.waveformData){const ye=nr(J.waveformData,Q,0,J.offsetSamples,J.durationSamples);return{clipId:J.id,trackName:q.name,peaks:{length:ye.length,data:[ye.data],bits:ye.bits},startSample:J.startSample,durationSamples:J.durationSamples,fadeIn:J.fadeIn,fadeOut:J.fadeOut}}if(!J.audioBuffer)return console.warn(`Clip "${J.name||J.id}" has neither waveformData nor audioBuffer - rendering empty`),{clipId:J.id,trackName:q.name,peaks:{length:0,data:[],bits:W},startSample:J.startSample,durationSamples:J.durationSamples,fadeIn:J.fadeIn,fadeOut:J.fadeOut};const Se=Do(J.audioBuffer,Q,n,W,J.offsetSamples,J.durationSamples);return{clipId:J.id,trackName:q.name,peaks:Se,startSample:J.startSample,durationSamples:J.durationSamples,fadeIn:J.fadeIn,fadeOut:J.fadeOut}}));O(X)},[e,Q,n]);const Ye=i.useCallback(()=>{ge.current&&(cancelAnimationFrame(ge.current),ge.current=null);const W=()=>{const X=Z.getContext().currentTime-N.current,q=se.current+X;pe.current=q,M(q);const ue=m.current;if(ue.length>0){const Se=ue.find(ye=>q>=ye.start&&q<ye.end);if(Ue.current)Se&&Se.id!==Oe.current?Xe(Se.id):!Se&&Oe.current!==null&&Xe(null);else if(Oe.current){const ye=ue.find(Qe=>Qe.id===Oe.current);if(ye&&q>=ye.end){_.current&&_.current.stop(),A(!1),pe.current=Te.current,M(Te.current);return}}else Se&&Xe(Se.id)}if(Ie.current&&xe.current&&T.length>0){const Se=xe.current,ye=T[0].sampleRate,Qe=q*ye/tt.current,Ce=Se.clientWidth,ke=c.show?c.width:0,We=Qe+ke,rt=Math.max(0,We-Ce/2);Se.scrollLeft=rt}if(ve.current!==null&&q>=ve.current){_.current&&_.current.stop(),A(!1),pe.current=ve.current,M(ve.current),ve.current=null;return}const J=ee.current!==me.current&&me.current>ee.current;if(ct.current&&J&&q>=me.current){_.current?.stop();const ye=Z.getContext().currentTime;N.current=ye,se.current=ee.current,pe.current=ee.current,_.current?.play(ye,ee.current),ge.current=requestAnimationFrame(W);return}if(q>=R){_.current&&_.current.stop(),A(!1),pe.current=Te.current,M(Te.current),Xe(null);return}ge.current=requestAnimationFrame(W)};ge.current=requestAnimationFrame(W)},[R,T,Q,V]),Be=i.useCallback(()=>{ge.current&&(cancelAnimationFrame(ge.current),ge.current=null)},[]);i.useEffect(()=>{(async()=>{if(I&&ge.current&&_.current)if(V){const X=pe.current;_.current.stop(),Be(),await _.current.init(),_.current.setOnPlaybackComplete(()=>{});const ue=Z.getContext().currentTime;N.current=ue,se.current=X,_.current.play(ue,X),Ye()}else Be(),Ye()})()},[V,I,Ye,Be]),i.useEffect(()=>{(async()=>{if(nt.current&&_.current){const{position:X}=nt.current;nt.current=null,await _.current.init(),_.current.setOnPlaybackComplete(()=>{});const ue=Z.getContext().currentTime;N.current=ue,se.current=X,_.current.play(ue,X),A(!0),Ye()}})()},[e,Ye]);const _t=i.useCallback(async(W,X)=>{if(!_.current||T.length===0)return;await _.current.init(),await Z.start();const q=W??pe.current;Te.current=q,pe.current=q,_.current.setOnPlaybackComplete(()=>{}),_.current.stop(),Be();const J=Z.getContext().currentTime;N.current=J,se.current=q,ve.current=X!==void 0?q+X:null,_.current.play(J,q,X),A(!0),Ye()},[T.length,Ye,Be]),Mr=i.useCallback(()=>{if(!_.current)return;const W=Z.getContext().currentTime-N.current,X=se.current+W;_.current.pause(),A(!1),Be(),pe.current=X,M(X)},[Be]),Rr=i.useCallback(()=>{_.current&&(_.current.stop(),A(!1),Be(),pe.current=Te.current,M(Te.current),Xe(null))},[Be]),Er=i.useCallback(W=>{const X=Math.max(0,Math.min(W,R));pe.current=X,M(X),I&&_.current&&(_.current.stop(),Be(),_t(X))},[R,I,_t,Be]),Dr=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],muted:X},Y(q),_.current){const ue=`track-${W}`;_.current.setMute(ue,X)}},[z]),Tr=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],soloed:X},Y(q),_.current){const ue=`track-${W}`;_.current.setSolo(ue,X)}},[z]),Br=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],volume:X},Y(q),_.current){const ue=`track-${W}`,J=_.current.getTrack(ue);J&&J.setVolume(X)}},[z]),Wr=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],pan:X},Y(q),_.current){const ue=`track-${W}`,J=_.current.getTrack(ue);J&&J.setPan(X)}},[z]),Fr=i.useCallback((W,X)=>{G(W),ie(X),pe.current=W,M(W),I&&_.current&&(_.current.stop(),_.current.play(Z.getContext().currentTime,W))},[I]),_r=i.useCallback(W=>{xe.current=W},[]),Zt=i.useRef(f);Zt.current=f;const Zr=i.useCallback(W=>{const X=typeof W=="function"?W(m.current):W;if(!Zt.current){process.env.NODE_ENV!=="production"&&console.warn("waveform-playlist: setAnnotations was called but no onAnnotationsChange callback is provided. Annotation edits will not persist. Pass onAnnotationsChange to WaveformPlaylistProvider to handle annotation updates.");return}Zt.current(X)},[]),Pr=T[0]?.sampleRate||44100,tn=t?30:0,Vr=e.length*r+tn,nn={isPlaying:I,currentTime:E,currentTimeRef:pe,playbackStartTimeRef:N,audioStartPositionRef:se},rn={continuousPlay:V,linkEndpoints:ae,annotationsEditable:de,isAutomaticScroll:le,isLoopEnabled:oe,annotations:w,activeAnnotationId:y,selectionStart:B,selectionEnd:K,selectedTrackId:te,loopStart:De,loopEnd:Le},an={play:_t,pause:Mr,stop:Rr,seekTo:Er,setCurrentTime:W=>{pe.current=W,M(W)},setTrackMute:Dr,setTrackSolo:Tr,setTrackVolume:Br,setTrackPan:Wr,setSelection:Fr,setSelectedTrackId:re,setTimeFormat:$e,formatTime:Ne,zoomIn:Ze.zoomIn,zoomOut:Ze.zoomOut,setMasterVolume:Je,setAutomaticScroll:W=>{ze(W)},setScrollContainer:_r,scrollContainerRef:xe,setContinuousPlay:st,setLinkEndpoints:L,setAnnotationsEditable:fe,setAnnotations:Zr,setActiveAnnotationId:Xe,setLoopEnabled:qe,setLoopRegion:Pe,setLoopRegionFromSelection:ut,clearLoopRegion:dt},on={duration:R,audioBuffers:T,peaksDataArray:j,trackStates:z,tracks:e,sampleRate:Pr,waveHeight:r,timeScaleHeight:tn,minimumPlaylistHeight:Vr,controls:c,playoutRef:_,samplesPerPixel:Q,timeFormat:be,masterVolume:we,canZoomIn:Ze.canZoomIn,canZoomOut:Ze.canZoomOut,barWidth:C,barGap:x,progressBarWidth:S,isReady:Ge,mono:n},jr={...nn,...rn,...an,...on},zr={...Hn,...l};return h.jsx($.ThemeProvider,{theme:zr,children:h.jsx(mr.Provider,{value:nn,children:h.jsx(hr.Provider,{value:rn,children:h.jsx(pr.Provider,{value:an,children:h.jsx(gr.Provider,{value:on,children:h.jsx(br.Provider,{value:jr,children:g})})})})})})},Me=()=>{const e=i.useContext(mr);if(!e)throw new Error("usePlaybackAnimation must be used within WaveformPlaylistProvider");return e},Re=()=>{const e=i.useContext(hr);if(!e)throw new Error("usePlaylistState must be used within WaveformPlaylistProvider");return e},he=()=>{const e=i.useContext(pr);if(!e)throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");return e},Ae=()=>{const e=i.useContext(gr);if(!e)throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");return e},ri=()=>{const e=i.useContext(br);if(!e)throw new Error("useWaveformPlaylist must be used within WaveformPlaylistProvider");return e};var ai=class{constructor(e){this._playbackRate=1,this.handleEnded=()=>{this.onStopCallback&&this.onStopCallback()},this.handleTimeUpdate=()=>{this.onTimeUpdateCallback&&this.onTimeUpdateCallback(this.audioElement.currentTime)},this._peaks=e.peaks,this._id=e.id??`track-${Date.now()}`,this._name=e.name??"Track",this._playbackRate=e.playbackRate??1,typeof e.source=="string"?(this.audioElement=new Audio(e.source),this.ownsElement=!0):(this.audioElement=e.source,this.ownsElement=!1),this.audioElement.preload="auto",this.audioElement.volume=e.volume??1,this.audioElement.playbackRate=this._playbackRate,"preservesPitch"in this.audioElement?this.audioElement.preservesPitch=!0:"mozPreservesPitch"in this.audioElement?this.audioElement.mozPreservesPitch=!0:"webkitPreservesPitch"in this.audioElement&&(this.audioElement.webkitPreservesPitch=!0),this.audioElement.addEventListener("ended",this.handleEnded),this.audioElement.addEventListener("timeupdate",this.handleTimeUpdate)}play(e=0){this.audioElement.currentTime=e,this.audioElement.play().catch(t=>{console.warn("MediaElementTrack: play() failed:",t)})}pause(){this.audioElement.pause()}stop(){this.audioElement.pause(),this.audioElement.currentTime=0}seekTo(e){this.audioElement.currentTime=Math.max(0,Math.min(e,this.duration))}setVolume(e){this.audioElement.volume=Math.max(0,Math.min(1,e))}setPlaybackRate(e){const t=Math.max(.5,Math.min(2,e));this._playbackRate=t,this.audioElement.playbackRate=t}setMuted(e){this.audioElement.muted=e}setOnStopCallback(e){this.onStopCallback=e}setOnTimeUpdateCallback(e){this.onTimeUpdateCallback=e}dispose(){this.audioElement.removeEventListener("ended",this.handleEnded),this.audioElement.removeEventListener("timeupdate",this.handleTimeUpdate),this.audioElement.pause(),this.ownsElement&&(this.audioElement.src="",this.audioElement.load())}get id(){return this._id}get name(){return this._name}get peaks(){return this._peaks}get currentTime(){return this.audioElement.currentTime}get duration(){return this.audioElement.duration||this._peaks.duration}get isPlaying(){return!this.audioElement.paused&&!this.audioElement.ended}get volume(){return this.audioElement.volume}get playbackRate(){return this._playbackRate}get muted(){return this.audioElement.muted}get element(){return this.audioElement}},oi=class{constructor(e={}){this.track=null,this._isPlaying=!1,this._masterVolume=e.masterVolume??1,this._playbackRate=e.playbackRate??1}async init(){}addTrack(e){return this.track&&(console.warn("MediaElementPlayout: Only one track is supported. Disposing previous track. For multi-track, use TonePlayout."),this.track.dispose()),this.track=new ai({...e,volume:this._masterVolume*(e.volume??1),playbackRate:this._playbackRate}),this.track.setOnStopCallback(()=>{this._isPlaying=!1,this.onPlaybackCompleteCallback&&this.onPlaybackCompleteCallback()}),this.track}removeTrack(e){this.track&&this.track.id===e&&(this.track.dispose(),this.track=null)}getTrack(e){if(this.track&&this.track.id===e)return this.track}play(e,t,n){if(!this.track){console.warn("MediaElementPlayout: No track to play");return}const r=t??0;if(this._isPlaying=!0,this.track.play(r),n!==void 0){const a=n/this._playbackRate;setTimeout(()=>{this._isPlaying&&(this.pause(),this.onPlaybackCompleteCallback&&this.onPlaybackCompleteCallback())},a*1e3)}}pause(){this.track&&this.track.pause(),this._isPlaying=!1}stop(){this.track&&this.track.stop(),this._isPlaying=!1}seekTo(e){this.track&&this.track.seekTo(e)}getCurrentTime(){return this.track?this.track.currentTime:0}setMasterVolume(e){this._masterVolume=Math.max(0,Math.min(1,e)),this.track&&this.track.setVolume(this._masterVolume)}setPlaybackRate(e){this._playbackRate=Math.max(.5,Math.min(2,e)),this.track&&this.track.setPlaybackRate(this._playbackRate)}setMute(e,t){const n=this.getTrack(e);n&&n.setMuted(t)}setSolo(e,t){console.warn("MediaElementPlayout: Solo is not applicable for single-track playback")}setOnPlaybackComplete(e){this.onPlaybackCompleteCallback=e}dispose(){this.track&&(this.track.dispose(),this.track=null)}get isPlaying(){return this._isPlaying}get masterVolume(){return this._masterVolume}get playbackRate(){return this._playbackRate}get duration(){return this.track?.duration??0}get sampleRate(){return this.track?.peaks.sample_rate??44100}};const vr=i.createContext(null),Cr=i.createContext(null),xr=i.createContext(null),wr=i.createContext(null),si=({track:e,samplesPerPixel:t=1024,waveHeight:n=100,timescale:r=!1,playbackRate:a=1,automaticScroll:s=!1,theme:o,controls:l={show:!1,width:0},annotationList:c,barWidth:u=1,barGap:d=0,progressBarWidth:v,onAnnotationsChange:p,onReady:f,children:C})=>{const x=v??u+d,[b,g]=i.useState(!1),[S,w]=i.useState(0),[m,y]=i.useState(0),[k,I]=i.useState([]),[A,E]=i.useState(a),M=i.useMemo(()=>c?.annotations?c.annotations.map(N=>typeof N.start=="number"?N:rr(N)):[],[c?.annotations]),R=i.useRef(M);R.current=M;const[F,T]=i.useState(null),[P,j]=i.useState(c?.isContinuousPlay??!1),[O]=i.useState(t),[z,Y]=i.useState(s),B=i.useRef(null),G=i.useRef(0),K=i.useRef(null),ie=i.useRef(P),te=i.useRef(null),re=i.useRef(null),le=i.useRef(s),ze=i.useRef(t);i.useEffect(()=>{ie.current=P},[P]),i.useEffect(()=>{le.current=z},[z]);const V=i.useCallback(N=>{te.current=N,T(N)},[]),ce=i.useCallback(N=>{ie.current=N,j(N)},[]),ae=i.useCallback(N=>{re.current=N},[]),L=e.waveformData.sample_rate;i.useEffect(()=>{const N=new oi({playbackRate:a});N.addTrack({source:e.source,peaks:e.waveformData,name:e.name});const se=N.getTrack(N.track?.id??"");return se&&se.setOnTimeUpdateCallback(ve=>{G.current=ve}),N.setOnPlaybackComplete(()=>{K.current&&(cancelAnimationFrame(K.current),K.current=null),g(!1),V(null),G.current=0,w(0)}),B.current=N,y(e.waveformData.duration),f?.(),()=>{K.current&&cancelAnimationFrame(K.current),N.dispose()}},[e.source,e.waveformData,e.name,a,f]),i.useEffect(()=>{const N=nr(e.waveformData,O,0,0,Math.ceil(e.waveformData.duration*L)),se={clipId:"media-element-clip",trackName:e.name??"Track",peaks:{length:N.length,data:[N.data],bits:N.bits},startSample:0,durationSamples:Math.ceil(e.waveformData.duration*L)};I([[se]])},[e.waveformData,e.name,O,L]);const de=i.useCallback(()=>{K.current&&cancelAnimationFrame(K.current);const N=()=>{const se=B.current?.getCurrentTime()??0;G.current=se,w(se);const ve=R.current;if(ve.length>0){const xe=ve.find(Ie=>se>=Ie.start&&se<Ie.end);if(ie.current)xe&&xe.id!==te.current?V(xe.id):!xe&&te.current!==null&&V(null);else if(te.current){const Ie=ve.find(Ue=>Ue.id===te.current);if(Ie&&se>=Ie.end){B.current?.stop(),g(!1);return}}else xe&&V(xe.id)}if(le.current&&re.current){const xe=re.current,Ie=se*L/ze.current,Ue=xe.clientWidth,Oe=l.show?l.width:0,tt=Ie+Oe,ct=Math.max(0,tt-Ue/2);xe.scrollLeft=ct}K.current=requestAnimationFrame(N)};K.current=requestAnimationFrame(N)},[V,L,l]),fe=i.useCallback(()=>{K.current&&(cancelAnimationFrame(K.current),K.current=null)},[]),oe=i.useCallback(N=>{if(!B.current)return;const se=N??G.current;B.current.play(void 0,se),g(!0),de()},[de]),Ee=i.useCallback(()=>{B.current&&(B.current.pause(),g(!1),fe(),w(B.current.getCurrentTime()))},[fe]),De=i.useCallback(()=>{B.current&&(B.current.stop(),g(!1),fe(),G.current=0,w(0),V(null))},[fe,V]),He=i.useCallback(N=>{const se=Math.max(0,Math.min(N,m));G.current=se,w(se),B.current&&B.current.seekTo(se)},[m]),Le=i.useCallback(N=>{const se=Math.max(.5,Math.min(2,N));E(se),B.current&&B.current.setPlaybackRate(se)},[]),ne=r?30:0,Ge=i.useMemo(()=>({isPlaying:b,currentTime:S,currentTimeRef:G}),[b,S]),Ke=i.useMemo(()=>({continuousPlay:P,annotations:M,activeAnnotationId:F,playbackRate:A,isAutomaticScroll:z}),[P,M,F,A,z]),_=i.useRef(p);_.current=p;const Te=i.useCallback(N=>{const se=typeof N=="function"?N(R.current):N;if(!_.current){process.env.NODE_ENV!=="production"&&console.warn("waveform-playlist: setAnnotations was called but no onAnnotationsChange callback is provided. Annotation edits will not persist. Pass onAnnotationsChange to MediaElementPlaylistProvider to handle annotation updates.");return}_.current(se)},[]),pe=i.useMemo(()=>({play:oe,pause:Ee,stop:De,seekTo:He,setPlaybackRate:Le,setContinuousPlay:ce,setAnnotations:Te,setActiveAnnotationId:V,setAutomaticScroll:N=>{Y(N)},setScrollContainer:ae,scrollContainerRef:re}),[oe,Ee,De,He,Le,ce,Te,V,ae]),ge=i.useMemo(()=>({duration:m,peaksDataArray:k,sampleRate:L,waveHeight:n,timeScaleHeight:ne,samplesPerPixel:O,playoutRef:B,controls:l,barWidth:u,barGap:d,progressBarWidth:x}),[m,k,L,n,ne,O,l,u,d,x]),ot={...Hn,...o};return h.jsx($.ThemeProvider,{theme:ot,children:h.jsx(vr.Provider,{value:Ge,children:h.jsx(Cr.Provider,{value:Ke,children:h.jsx(xr.Provider,{value:pe,children:h.jsx(wr.Provider,{value:ge,children:C})})})})})},Bt=()=>{const e=i.useContext(vr);if(!e)throw new Error("useMediaElementAnimation must be used within MediaElementPlaylistProvider");return e},Wt=()=>{const e=i.useContext(Cr);if(!e)throw new Error("useMediaElementState must be used within MediaElementPlaylistProvider");return e},en=()=>{const e=i.useContext(xr);if(!e)throw new Error("useMediaElementControls must be used within MediaElementPlaylistProvider");return e},Ft=()=>{const e=i.useContext(wr);if(!e)throw new Error("useMediaElementData must be used within MediaElementPlaylistProvider");return e},ii=({className:e})=>{const{isPlaying:t,currentTimeRef:n}=Me(),{selectionStart:r,selectionEnd:a,isLoopEnabled:s}=Re(),{play:o}=he(),l=async()=>{if(r!==a&&a>r)if(s)await o(r);else{const u=a-r;await o(r,u)}else await o(n.current??0)};return h.jsx(je,{onClick:l,disabled:t,className:e,children:"Play"})},li=({className:e})=>{const{isPlaying:t}=Me(),{pause:n}=he();return h.jsx(je,{onClick:n,disabled:!t,className:e,children:"Pause"})},ci=({className:e})=>{const{isPlaying:t}=Me(),{stop:n}=he();return h.jsx(je,{onClick:n,disabled:!t,className:e,children:"Stop"})},ui=({className:e})=>{const{isPlaying:t}=Me(),{play:n,setCurrentTime:r}=he(),{playoutRef:a}=Ae(),s=()=>{r(0),t&&a.current&&(a.current.stop(),n(0))};return h.jsx(je,{onClick:s,className:e,children:"Rewind"})},di=({className:e})=>{const{isPlaying:t}=Me(),{play:n,setCurrentTime:r}=he(),{duration:a,playoutRef:s}=Ae(),o=()=>{r(a),t&&s.current&&(s.current.stop(),n(a))};return h.jsx(je,{onClick:o,className:e,children:"Fast Forward"})},fi=({skipAmount:e=5,className:t})=>{const{currentTimeRef:n,isPlaying:r}=Me(),{play:a,setCurrentTime:s}=he(),{playoutRef:o}=Ae(),l=()=>{const c=Math.max(0,(n.current??0)-e);s(c),r&&o.current&&(o.current.stop(),a(c))};return h.jsx(je,{onClick:l,className:t,children:"Skip Backward"})},mi=({skipAmount:e=5,className:t})=>{const{currentTimeRef:n,isPlaying:r}=Me(),{play:a,setCurrentTime:s}=he(),{duration:o,playoutRef:l}=Ae(),c=()=>{const u=Math.min(o,(n.current??0)+e);s(u),r&&l.current&&(l.current.stop(),a(u))};return h.jsx(je,{onClick:c,className:t,children:"Skip Forward"})},hi=({className:e})=>{const{isLoopEnabled:t,loopStart:n,loopEnd:r}=Re(),{setLoopEnabled:a,setLoopRegion:s}=he(),{duration:o}=Ae(),l=n!==r&&r>n,c=()=>{if(!t&&!l){const u=Math.min(10,o*.25);s(0,Math.max(1,u))}a(!t)};return h.jsx(je,{onClick:c,className:e,title:t?"Disable loop":"Enable loop",children:t?"Loop On":"Loop Off"})},pi=({className:e})=>{const{selectionStart:t,selectionEnd:n,loopStart:r,loopEnd:a}=Re(),{setLoopRegionFromSelection:s,clearLoopRegion:o}=he(),l=t!==n&&n>t,c=r!==a&&a>r,u=()=>{c?o():s()};return h.jsx(je,{onClick:u,disabled:!l&&!c,className:e,title:c?"Clear loop region":l?"Set loop region from selection":"Create a selection first",children:c?"Clear Loop":"Set Loop"})},gi=({className:e,disabled:t})=>{const{zoomIn:n}=he(),{canZoomIn:r}=Ae();return h.jsx(je,{variant:"success",onClick:n,disabled:t||!r,className:e,children:"Zoom In"})},bi=({className:e,disabled:t})=>{const{zoomOut:n}=he(),{canZoomOut:r}=Ae();return h.jsx(je,{variant:"success",onClick:n,disabled:t||!r,className:e,children:"Zoom Out"})},vi=({className:e})=>{const{masterVolume:t}=Ae(),{setMasterVolume:n}=he();return h.jsx(Ea,{volume:t,onChange:n,className:e})},Ci=({className:e})=>{const{timeFormat:t}=Ae(),{setTimeFormat:n}=he();return h.jsx(uo,{value:t,onChange:n,className:e})},xi=$.span`
+`,zs=({level:e,peakLevel:t,width:n=200,height:r=20,className:a})=>{const s=Math.max(0,Math.min(1,e)),o=t!==void 0?Math.max(0,Math.min(1,t)):0;return h.jsxs(_s,{$width:n,$height:r,className:a,children:[h.jsx(Ps,{$level:s,$height:r}),t!==void 0&&o>0&&h.jsx(Vs,{$peakLevel:o,$height:r}),h.jsxs(js,{$height:r,children:[h.jsx(In,{$position:60,$height:r}),h.jsx(In,{$position:85,$height:r})]})]})};i.memo(zs);function Hs(e,t,n,r={}){const{currentTime:a=0,audioConstraints:s,...o}=r,[l,c]=i.useState(!1),[u,d]=i.useState(null),{stream:v,devices:p,hasPermission:f,requestAccess:C,error:x}=Ws(),{level:b,peakLevel:g}=Fs(v),{isRecording:S,isPaused:w,duration:m,peaks:y,startRecording:k,stopRecording:I,pauseRecording:A,resumeRecording:E,error:M}=Bs(v,o),R=i.useCallback(async()=>{n&&(l||(await jt(),c(!0)),await k())},[n,l,k]),F=i.useCallback(async()=>{const j=await I();if(j&&n){const O=e.findIndex(te=>te.id===n);if(O===-1)return;const z=e[O],Y=Math.floor(a*j.sampleRate);let B=0;if(z.clips.length>0){const te=z.clips.map(re=>re.startSample+re.durationSamples);B=Math.max(...te)}const G=Math.max(Y,B),K={id:`clip-${Date.now()}`,audioBuffer:j,startSample:G,durationSamples:j.length,offsetSamples:0,sampleRate:j.sampleRate,sourceDurationSamples:j.length,gain:1,name:`Recording ${new Date().toLocaleTimeString()}`},ie=e.map((te,re)=>re===O?{...te,clips:[...te.clips,K]}:te);t(ie)}},[n,e,t,a,I]);i.useEffect(()=>{f&&p.length>0&&u===null&&d(p[0].deviceId)},[f,p.length]);const T=i.useCallback(async()=>{await C(void 0,s),await jt(),c(!0)},[C,s]),P=i.useCallback(async j=>{d(j),await C(j,s),await jt(),c(!0)},[C,s]);return{isRecording:S,isPaused:w,duration:m,level:b,peakLevel:g,error:x||M,stream:v,devices:p,hasPermission:f,selectedDevice:u,startRecording:R,stopRecording:F,pauseRecording:A,resumeRecording:E,requestMicAccess:T,changeDevice:P,recordingPeaks:y}}const Ct=[{id:"reverb",name:"Reverb",category:"reverb",description:"Simple convolution reverb with adjustable decay time",parameters:[{name:"decay",label:"Decay",type:"number",min:.1,max:10,step:.1,default:1.5,unit:"s"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"freeverb",name:"Freeverb",category:"reverb",description:"Classic Schroeder/Moorer reverb with room size and dampening",parameters:[{name:"roomSize",label:"Room Size",type:"number",min:0,max:1,step:.01,default:.7},{name:"dampening",label:"Dampening",type:"number",min:0,max:1e4,step:100,default:3e3,unit:"Hz"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"jcReverb",name:"JC Reverb",category:"reverb",description:"Attempt at Roland JC-120 chorus reverb emulation",parameters:[{name:"roomSize",label:"Room Size",type:"number",min:0,max:1,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"feedbackDelay",name:"Feedback Delay",category:"delay",description:"Delay line with feedback for echo effects",parameters:[{name:"delayTime",label:"Delay Time",type:"number",min:0,max:1,step:.01,default:.25,unit:"s"},{name:"feedback",label:"Feedback",type:"number",min:0,max:.95,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"pingPongDelay",name:"Ping Pong Delay",category:"delay",description:"Stereo delay bouncing between left and right channels",parameters:[{name:"delayTime",label:"Delay Time",type:"number",min:0,max:1,step:.01,default:.25,unit:"s"},{name:"feedback",label:"Feedback",type:"number",min:0,max:.95,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"chorus",name:"Chorus",category:"modulation",description:"Creates thickness by layering detuned copies of the signal",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:1.5,unit:"Hz"},{name:"delayTime",label:"Delay",type:"number",min:0,max:20,step:.5,default:3.5,unit:"ms"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:.7},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"phaser",name:"Phaser",category:"modulation",description:"Classic phaser effect using allpass filters",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:.5,unit:"Hz"},{name:"octaves",label:"Octaves",type:"number",min:1,max:6,step:1,default:3},{name:"baseFrequency",label:"Base Freq",type:"number",min:100,max:2e3,step:10,default:350,unit:"Hz"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:.5}]},{id:"tremolo",name:"Tremolo",category:"modulation",description:"Rhythmic volume modulation",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:20,step:.1,default:4,unit:"Hz"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:.5},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"vibrato",name:"Vibrato",category:"modulation",description:"Pitch modulation effect",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:20,step:.1,default:5,unit:"Hz"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:.1},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"autoPanner",name:"Auto Panner",category:"modulation",description:"Automatic left-right panning",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:1,unit:"Hz"},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:1},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"autoFilter",name:"Auto Filter",category:"filter",description:"Automated filter sweep with LFO",parameters:[{name:"frequency",label:"Rate",type:"number",min:.1,max:10,step:.1,default:1,unit:"Hz"},{name:"baseFrequency",label:"Base Freq",type:"number",min:20,max:2e3,step:10,default:200,unit:"Hz"},{name:"octaves",label:"Octaves",type:"number",min:.5,max:8,step:.5,default:2.6},{name:"depth",label:"Depth",type:"number",min:0,max:1,step:.01,default:1},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"autoWah",name:"Auto Wah",category:"filter",description:"Envelope follower filter effect",parameters:[{name:"baseFrequency",label:"Base Freq",type:"number",min:20,max:500,step:10,default:100,unit:"Hz"},{name:"octaves",label:"Octaves",type:"number",min:1,max:8,step:1,default:6},{name:"sensitivity",label:"Sensitivity",type:"number",min:-40,max:0,step:1,default:0,unit:"dB"},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"eq3",name:"3-Band EQ",category:"filter",description:"Three band equalizer with low, mid, and high controls",parameters:[{name:"low",label:"Low",type:"number",min:-24,max:24,step:.5,default:0,unit:"dB"},{name:"mid",label:"Mid",type:"number",min:-24,max:24,step:.5,default:0,unit:"dB"},{name:"high",label:"High",type:"number",min:-24,max:24,step:.5,default:0,unit:"dB"},{name:"lowFrequency",label:"Low Freq",type:"number",min:20,max:500,step:10,default:400,unit:"Hz"},{name:"highFrequency",label:"High Freq",type:"number",min:1e3,max:1e4,step:100,default:2500,unit:"Hz"}]},{id:"distortion",name:"Distortion",category:"distortion",description:"Wave shaping distortion effect",parameters:[{name:"distortion",label:"Drive",type:"number",min:0,max:1,step:.01,default:.4},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"bitCrusher",name:"Bit Crusher",category:"distortion",description:"Reduces bit depth for lo-fi digital texture",parameters:[{name:"bits",label:"Bits",type:"number",min:1,max:16,step:1,default:4},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"chebyshev",name:"Chebyshev",category:"distortion",description:"Waveshaping distortion using Chebyshev polynomials",parameters:[{name:"order",label:"Order",type:"number",min:1,max:100,step:1,default:50},{name:"wet",label:"Mix",type:"number",min:0,max:1,step:.01,default:1}]},{id:"compressor",name:"Compressor",category:"dynamics",description:"Dynamic range compressor",parameters:[{name:"threshold",label:"Threshold",type:"number",min:-60,max:0,step:1,default:-24,unit:"dB"},{name:"ratio",label:"Ratio",type:"number",min:1,max:20,step:.5,default:4},{name:"attack",label:"Attack",type:"number",min:0,max:1,step:.001,default:.003,unit:"s"},{name:"release",label:"Release",type:"number",min:0,max:1,step:.01,default:.25,unit:"s"},{name:"knee",label:"Knee",type:"number",min:0,max:40,step:1,default:30,unit:"dB"}]},{id:"limiter",name:"Limiter",category:"dynamics",description:"Hard limiter to prevent clipping",parameters:[{name:"threshold",label:"Threshold",type:"number",min:-12,max:0,step:.5,default:-6,unit:"dB"}]},{id:"gate",name:"Gate",category:"dynamics",description:"Noise gate to silence signal below threshold",parameters:[{name:"threshold",label:"Threshold",type:"number",min:-100,max:0,step:1,default:-40,unit:"dB"},{name:"attack",label:"Attack",type:"number",min:0,max:.3,step:.001,default:.001,unit:"s"},{name:"release",label:"Release",type:"number",min:0,max:.5,step:.01,default:.1,unit:"s"}]},{id:"stereoWidener",name:"Stereo Widener",category:"spatial",description:"Expands or narrows the stereo image",parameters:[{name:"width",label:"Width",type:"number",min:0,max:1,step:.01,default:.5}]}],Qt=e=>Ct.find(t=>t.id===e),Ls=e=>Ct.filter(t=>t.category===e),Xs=[{id:"reverb",name:"Reverb"},{id:"delay",name:"Delay"},{id:"modulation",name:"Modulation"},{id:"filter",name:"Filter"},{id:"distortion",name:"Distortion"},{id:"dynamics",name:"Dynamics"},{id:"spatial",name:"Spatial"}],Gs={reverb:Z.Reverb,freeverb:Z.Freeverb,jcReverb:Z.JCReverb,feedbackDelay:Z.FeedbackDelay,pingPongDelay:Z.PingPongDelay,chorus:Z.Chorus,phaser:Z.Phaser,tremolo:Z.Tremolo,vibrato:Z.Vibrato,autoPanner:Z.AutoPanner,autoFilter:Z.AutoFilter,autoWah:Z.AutoWah,eq3:Z.EQ3,distortion:Z.Distortion,bitCrusher:Z.BitCrusher,chebyshev:Z.Chebyshev,compressor:Z.Compressor,limiter:Z.Limiter,gate:Z.Gate,stereoWidener:Z.StereoWidener};let Ns=0;const Os=()=>`effect_${Date.now()}_${++Ns}`;function ht(e,t){const n=Gs[e.id];if(!n)throw new Error(`Unknown effect type: ${e.id}`);const r={};e.parameters.forEach(o=>{const l=t?.[o.name]??o.default;r[o.name]=l});const a=new n(r),s=Os();return{effect:a,id:e.id,instanceId:s,dispose(){try{a.disconnect(),a.dispose()}catch{}},setParameter(o,l){o==="wet"&&a.wet?a.wet.value=l:a[o]!==void 0&&(a[o]?.value!==void 0?a[o].value=l:a[o]=l)},getParameter(o){if(o==="wet"&&a.wet)return a.wet.value;if(a[o]!==void 0)return a[o]?.value!==void 0?a[o].value:a[o]},connect(o){a.connect(o)},disconnect(){try{a.disconnect()}catch{}}}}function Ys(e){if(e.length===0)throw new Error("Cannot create effect chain with no effects");for(let t=0;t<e.length-1;t++)e[t].effect.connect(e[t+1].effect);return{input:e[0].effect,output:e[e.length-1].effect,dispose(){e.forEach(t=>t.dispose())}}}function Ks(e=256){const[t,n]=i.useState([]),r=i.useRef(t);r.current=t;const a=i.useRef(new Map),s=i.useRef(null),o=i.useRef(null),l=i.useCallback(b=>{const g=o.current;if(!g)return;const{masterGainNode:S,destination:w,analyserNode:m}=g;try{S.disconnect()}catch{}const y=b.map(k=>a.current.get(k.instanceId)).filter(k=>k!==void 0);if(y.length===0)S.connect(m),m.connect(w);else{let k=S;y.forEach(I=>{try{I.disconnect()}catch{}k.connect(I.effect),k=I.effect}),k.connect(m),m.connect(w)}},[]),c=i.useCallback(b=>{const g=Qt(b);if(!g){console.error(`Unknown effect: ${b}`);return}const S={};g.parameters.forEach(y=>{S[y.name]=y.default});const w=ht(g,S);a.current.set(w.instanceId,w);const m={instanceId:w.instanceId,effectId:g.id,definition:g,params:S,bypassed:!1};n(y=>[...y,m])},[]),u=i.useCallback(b=>{const g=a.current.get(b);g&&(g.dispose(),a.current.delete(b)),n(S=>S.filter(w=>w.instanceId!==b))},[]),d=i.useCallback((b,g,S)=>{const w=a.current.get(b);w&&w.setParameter(g,S),n(m=>m.map(y=>y.instanceId===b?{...y,params:{...y.params,[g]:S}}:y))},[]),v=i.useCallback(b=>{const g=r.current.find(m=>m.instanceId===b);if(!g)return;const S=!g.bypassed,w=a.current.get(b);if(w){const m=g.params.wet??1;w.setParameter("wet",S?0:m)}n(m=>m.map(y=>y.instanceId===b?{...y,bypassed:S}:y))},[]),p=i.useCallback((b,g)=>{n(S=>{const w=[...S],[m]=w.splice(b,1);return w.splice(g,0,m),w})},[]),f=i.useCallback(()=>{a.current.forEach(b=>b.dispose()),a.current.clear(),n([])},[]);i.useEffect(()=>{l(t)},[t,l]);const C=i.useCallback((b,g,S)=>{const w=new Z.Analyser("fft",e);s.current=w,o.current={masterGainNode:b,destination:g,analyserNode:w};const y=r.current.map(k=>a.current.get(k.instanceId)).filter(k=>k!==void 0);if(y.length===0)b.connect(w),w.connect(g);else{let k=b;y.forEach(I=>{k.connect(I.effect),k=I.effect}),k.connect(w),w.connect(g)}return function(){w.dispose(),s.current=null,o.current=null}},[e]);i.useEffect(()=>()=>{a.current.forEach(b=>b.dispose()),a.current.clear()},[]);const x=i.useCallback(()=>{const b=t.filter(g=>!g.bypassed);if(b.length!==0)return(g,S,w)=>{const m=[];for(const y of b){const k=ht(y.definition,y.params);m.push(k)}if(m.length===0)g.connect(S);else{let y=g;m.forEach(k=>{y.connect(k.effect),y=k.effect}),y.connect(S)}return function(){m.forEach(k=>k.dispose())}}},[t]);return{activeEffects:t,availableEffects:Ct,addEffect:c,removeEffect:u,updateParameter:d,toggleBypass:v,reorderEffects:p,clearAllEffects:f,masterEffects:C,createOfflineEffectsFunction:x,analyserRef:s}}function Us(){const[e,t]=i.useState(new Map),n=i.useRef(new Map),r=i.useRef(new Map),a=i.useCallback((f,C)=>{const x=r.current.get(f);if(!x)return;const{graphEnd:b,masterGainNode:g}=x,S=n.current.get(f);try{b.disconnect()}catch{}const w=C.map(m=>S?.get(m.instanceId)).filter(m=>m!==void 0);if(w.length===0)b.connect(g);else{let m=b;w.forEach(y=>{try{y.disconnect()}catch{}m.connect(y.effect),m=y.effect}),m.connect(g)}},[]),s=i.useCallback((f,C)=>{const x=Qt(C);if(!x){console.error(`Unknown effect: ${C}`);return}const b={};x.parameters.forEach(w=>{b[w.name]=w.default});const g=ht(x,b);n.current.has(f)||n.current.set(f,new Map),n.current.get(f).set(g.instanceId,g);const S={instanceId:g.instanceId,effectId:x.id,definition:x,params:b,bypassed:!1};t(w=>{const m=new Map(w),y=m.get(f)||[];return m.set(f,[...y,S]),m})},[]),o=i.useCallback((f,C)=>{const x=n.current.get(f),b=x?.get(C);b&&(b.dispose(),x?.delete(C)),t(g=>{const S=new Map(g),w=S.get(f)||[];return S.set(f,w.filter(m=>m.instanceId!==C)),S})},[]),l=i.useCallback((f,C,x,b)=>{const S=n.current.get(f)?.get(C);S&&S.setParameter(x,b),t(w=>{const m=new Map(w),y=m.get(f)||[];return m.set(f,y.map(k=>k.instanceId===C?{...k,params:{...k.params,[x]:b}}:k)),m})},[]),c=i.useCallback((f,C)=>{const b=(d.current.get(f)||[]).find(m=>m.instanceId===C);if(!b)return;const g=!b.bypassed,w=n.current.get(f)?.get(C);if(w){const m=b.params.wet??1;w.setParameter("wet",g?0:m)}t(m=>{const y=new Map(m),k=y.get(f)||[];return y.set(f,k.map(I=>I.instanceId===C?{...I,bypassed:g}:I)),y})},[]),u=i.useCallback(f=>{const C=n.current.get(f);C&&(C.forEach(x=>x.dispose()),C.clear()),t(x=>{const b=new Map(x);return b.set(f,[]),b})},[]),d=i.useRef(e);d.current=e;const v=i.useCallback(f=>(C,x,b)=>{r.current.set(f,{graphEnd:C,masterGainNode:x});const g=d.current.get(f)||[],S=n.current.get(f),w=g.map(m=>S?.get(m.instanceId)).filter(m=>m!==void 0);if(w.length===0)C.connect(x);else{let m=C;w.forEach(y=>{m.connect(y.effect),m=y.effect}),m.connect(x)}return function(){r.current.delete(f)}},[]);i.useEffect(()=>{e.forEach((f,C)=>{a(C,f)})},[e,a]),i.useEffect(()=>()=>{n.current.forEach(f=>{f.forEach(C=>C.dispose()),f.clear()}),n.current.clear()},[]);const p=i.useCallback(f=>{const x=(e.get(f)||[]).filter(b=>!b.bypassed);if(x.length!==0)return(b,g,S)=>{const w=[];for(const m of x){const y=ht(m.definition,m.params);w.push(y)}if(w.length===0)b.connect(g);else{let m=b;w.forEach(y=>{m.connect(y.effect),m=y.effect}),m.connect(g)}return function(){w.forEach(y=>y.dispose())}}},[e]);return{trackEffectsState:e,addEffectToTrack:s,removeEffectFromTrack:o,updateTrackEffectParameter:l,toggleBypass:c,clearTrackEffects:u,getTrackEffectsFunction:v,createOfflineTrackEffectsFunction:p,availableEffects:Ct}}function Js(e,t={}){const{bitDepth:n=16}=t,r=e.numberOfChannels,a=e.sampleRate,s=e.length,o=n/8,l=r*o,c=a*l,u=s*l,d=44,v=d+u,p=new ArrayBuffer(v),f=new DataView(p);At(f,0,"RIFF"),f.setUint32(4,v-8,!0),At(f,8,"WAVE"),At(f,12,"fmt "),f.setUint32(16,16,!0),f.setUint16(20,n===32?3:1,!0),f.setUint16(22,r,!0),f.setUint32(24,a,!0),f.setUint32(28,c,!0),f.setUint16(32,l,!0),f.setUint16(34,n,!0),At(f,36,"data"),f.setUint32(40,u,!0);const C=[];for(let b=0;b<r;b++)C.push(e.getChannelData(b));let x=d;if(n===16)for(let b=0;b<s;b++)for(let g=0;g<r;g++){const S=C[g][b],w=Math.max(-1,Math.min(1,S)),m=w<0?w*32768:w*32767;f.setInt16(x,m,!0),x+=2}else for(let b=0;b<s;b++)for(let g=0;g<r;g++)f.setFloat32(x,C[g][b],!0),x+=4;return new Blob([p],{type:"audio/wav"})}function At(e,t,n){for(let r=0;r<n.length;r++)e.setUint8(t+r,n.charCodeAt(r))}function qs(e,t){const n=URL.createObjectURL(e),r=document.createElement("a");r.href=n,r.download=t,r.style.display="none",document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)}function fr(){const[e,t]=i.useState(!1),[n,r]=i.useState(0),[a,s]=i.useState(null);return{exportWav:i.useCallback(async(l,c,u={})=>{const{filename:d="export",mode:v="master",trackIndex:p,autoDownload:f=!0,applyEffects:C=!0,effectsFunction:x,createOfflineTrackEffects:b,bitDepth:g=16,onProgress:S}=u;t(!0),r(0),s(null);try{if(l.length===0)throw new Error("No tracks to export");if(v==="individual"&&(p===void 0||p<0||p>=l.length))throw new Error("Invalid track index for individual export");const w=l[0].clips[0]?.sampleRate||44100;let m=0;for(const R of l)for(const F of R.clips){const T=F.startSample+F.durationSamples;m=Math.max(m,T)}m+=Math.round(w*.1);const y=m/w,k=v==="individual"?[{track:l[p],state:c[p],index:p}]:l.map((R,F)=>({track:R,state:c[F],index:F})),I=c.some(R=>R.soloed),A=!!b;let E;if((x||A)&&C)E=await Qs(k,c,I,y,w,x,b,R=>{r(R),S?.(R)});else{const R=new OfflineAudioContext(2,m,w);let F=0;const T=k.reduce((P,{track:j})=>P+j.clips.length,0);for(const{track:P,state:j}of k)if(!(j.muted&&!j.soloed)&&!(I&&!j.soloed))for(const O of P.clips){await ti(R,O,j,w,C),F++;const z=F/T*.5;r(z),S?.(z)}r(.5),S?.(.5),E=await R.startRendering()}r(.9),S?.(.9);const M=Js(E,{bitDepth:g});if(r(1),S?.(1),f){const R=v==="individual"?`${d}_${l[p].name}`:d;qs(M,`${R}.wav`)}return{audioBuffer:E,blob:M,duration:y}}catch(w){const m=w instanceof Error?w.message:"Export failed";throw s(m),w}finally{t(!1)}},[]),isExporting:e,progress:n,error:a}}async function Qs(e,t,n,r,a,s,o,l){const{Offline:c,Volume:u,Gain:d,Panner:v,Player:p,ToneAudioBuffer:f}=await import("tone");l(.1);let C;try{C=await c(async({transport:x,destination:b})=>{const g=new u(0);let S;s?S=s(g,b,!0):g.connect(b);for(const{track:w,state:m}of e){if(m.muted&&!m.soloed||n&&!m.soloed)continue;const y=new u(ei(m.volume)),k=new v(m.pan),I=new d(m.muted?0:1),A=o?.(w.id);A?A(I,g,!0):I.connect(g),k.connect(I),y.connect(k);for(const E of w.clips){const{audioBuffer:M,startSample:R,durationSamples:F,offsetSamples:T,gain:P,fadeIn:j,fadeOut:O}=E,z=R/a,Y=F/a,B=T/a,G=new f(M),K=new p(G),ie=new d(P);if(K.connect(ie),ie.connect(y),j){const te=z,re=z+j.duration,le=ie.gain._param;le.setValueAtTime(0,te),le.linearRampToValueAtTime(P,re)}if(O){const te=z+Y-O.duration,re=z+Y,le=ie.gain._param;le.setValueAtTime(P,te),le.linearRampToValueAtTime(0,re)}K.start(z,B,Y)}}x.start(0)},r,2,a)}catch(x){throw x instanceof Error?x:new Error(`Tone.Offline rendering failed: ${String(x)}`)}return l(.9),C.get()}function ei(e){return 20*Math.log10(Math.max(e,1e-4))}async function ti(e,t,n,r,a){const{audioBuffer:s,startSample:o,durationSamples:l,offsetSamples:c,gain:u,fadeIn:d,fadeOut:v}=t;if(!s){console.warn(`Skipping clip "${t.name||t.id}" - no audioBuffer for export`);return}const p=o/r,f=l/r,C=c/r,x=e.createBufferSource();x.buffer=s;const b=e.createGain(),g=u*n.volume,S=e.createStereoPanner();if(S.pan.value=n.pan,x.connect(b),b.connect(S),S.connect(e.destination),a){if(d?b.gain.setValueAtTime(0,p):b.gain.setValueAtTime(g,p),d){const w=p,m=p+d.duration;$n(b.gain,w,m,0,g,d.type||"linear")}if(v){const w=p+f-v.duration,m=p+f;(!d||d.duration<f-v.duration)&&b.gain.setValueAtTime(g,w),$n(b.gain,w,m,g,0,v.type||"linear")}}else b.gain.setValueAtTime(g,p);x.start(p,C,f)}function $n(e,t,n,r,a,s){const o=n-t;if(!(o<=0))switch(s){case"linear":e.setValueAtTime(r,t),e.linearRampToValueAtTime(a,n);break;case"exponential":const l=Math.max(r,1e-4),c=Math.max(a,1e-4);e.setValueAtTime(l,t),e.exponentialRampToValueAtTime(c,n),a===0&&e.setValueAtTime(0,n);break;case"logarithmic":const u=Mn(r,a,256,"logarithmic");e.setValueCurveAtTime(u,t,o);break;case"sCurve":const d=Mn(r,a,256,"sCurve");e.setValueCurveAtTime(d,t,o);break;default:e.setValueAtTime(r,t),e.linearRampToValueAtTime(a,n)}}function Mn(e,t,n,r){const a=new Float32Array(n),s=t-e;for(let o=0;o<n;o++){const l=o/(n-1);let c;r==="logarithmic"?s>0?c=Math.log10(1+l*9)/Math.log10(10):c=1-Math.log10(1+(1-l)*9)/Math.log10(10):c=l*l*(3-2*l),a[o]=e+s*c}return a}const mr=i.createContext(null),hr=i.createContext(null),pr=i.createContext(null),gr=i.createContext(null),br=i.createContext(null),ni=({tracks:e,timescale:t=!1,mono:n=!1,waveHeight:r=80,samplesPerPixel:a=1024,zoomLevels:s,automaticScroll:o=!1,theme:l,controls:c={show:!1,width:0},annotationList:u,effects:d,onReady:v,onAnnotationUpdate:p,onAnnotationsChange:f,barWidth:C=1,barGap:x=0,progressBarWidth:b,children:g})=>{const S=b??C+x,w=i.useMemo(()=>u?.annotations?u.annotations.map(W=>typeof W.start=="number"?W:rr(W)):[],[u?.annotations]),m=i.useRef(w);m.current=w;const[y,k]=i.useState(null),[I,A]=i.useState(!1),[E,M]=i.useState(0),[R,F]=i.useState(0),[T,P]=i.useState([]),[j,O]=i.useState([]),[z,Y]=i.useState([]),[B,G]=i.useState(0),[K,ie]=i.useState(0),[te,re]=i.useState(null),[le,ze]=i.useState(o),[V,ce]=i.useState(u?.isContinuousPlay??!1),[ae,L]=i.useState(u?.linkEndpoints??!1),[de,fe]=i.useState(u?.editable??!1),[oe,Ee]=i.useState(!1),[De,He]=i.useState(0),[Le,ne]=i.useState(0),[Ge,Ke]=i.useState(!1),_=i.useRef(null),Te=i.useRef(0),pe=i.useRef(0),ge=i.useRef(null),ot=i.useRef(z),N=i.useRef(0),se=i.useRef(0),ve=i.useRef(null),xe=i.useRef(null),Ie=i.useRef(!1),Ue=i.useRef(u?.isContinuousPlay??!1),Oe=i.useRef(null),tt=i.useRef(a),ct=i.useRef(!1),H=i.useRef(0),U=i.useRef(0),ee=i.useRef(0),me=i.useRef(0),{timeFormat:be,setTimeFormat:$e,formatTime:Ne}=ir(),Ze=lr({initialSamplesPerPixel:a,zoomLevels:s}),Q=Ze.samplesPerPixel,{masterVolume:we,setMasterVolume:Je}=cr({playoutRef:_,initialVolume:1}),st=i.useCallback(W=>{Ue.current=W,ce(W)},[]),Xe=i.useCallback(W=>{Oe.current=W,k(W)},[]),qe=i.useCallback(W=>{ct.current=W,Ee(W)},[]),Pe=i.useCallback((W,X)=>{ee.current=W,me.current=X,He(W),ne(X)},[]),ut=i.useCallback(()=>{const W=H.current,X=U.current;W!==X&&X>W&&Pe(W,X)},[Pe]),dt=i.useCallback(()=>{Pe(0,0)},[Pe]);i.useEffect(()=>{Ie.current=le},[le]),i.useEffect(()=>{ot.current=z},[z]),i.useEffect(()=>{H.current=B,U.current=K},[B,K]),i.useEffect(()=>{if(!xe.current||!T.length)return;const W=xe.current,X=tt.current,q=Q;if(X===q)return;const ue=c.show?c.width:0,J=W.clientWidth,ye=W.scrollLeft+J/2-ue,Qe=T[0].sampleRate,ke=ye*X/Qe*Qe/q,We=Math.max(0,ke+ue-J/2);W.scrollLeft=We,tt.current=q},[Q,T,c]);const nt=i.useRef(null);i.useEffect(()=>{if(Ke(!1),e.length===0){P([]),F(0),Y([]),O([]),_.current&&(_.current.dispose(),_.current=null);return}const W=I,X=pe.current;return _.current&&W&&(_.current.stop(),ge.current&&(cancelAnimationFrame(ge.current),ge.current=null),nt.current={position:X}),(async()=>{try{const ue=[];e.forEach(Ce=>{Ce.clips.length>0&&Ce.clips[0].audioBuffer&&ue.push(Ce.clips[0].audioBuffer)});let J=0;e.forEach(Ce=>{Ce.clips.forEach(ke=>{const We=ke.sampleRate,xt=(ke.startSample+ke.durationSamples)/We;J=Math.max(J,xt)})}),P(ue),F(J),Y(Ce=>Ce.length===e.length?Ce.map((ke,We)=>({...ke,name:e[We].name})):e.map(ke=>({name:ke.name,muted:ke.muted,soloed:ke.soloed,volume:ke.volume,pan:ke.pan}))),_.current&&_.current.dispose();const Se=new ra({effects:d}),ye=ot.current;e.forEach((Ce,ke)=>{const We=Ce.clips.filter(rt=>rt.audioBuffer);if(We.length>0){const rt=We[0].sampleRate,xt=Math.min(...We.map(Fe=>Fe.startSample/rt)),Hr=Math.max(...We.map(Fe=>(Fe.startSample+Fe.durationSamples)/rt)),wt=ye[ke],Lr={id:`track-${ke}`,name:Ce.name,gain:wt?.volume??Ce.volume,muted:wt?.muted??Ce.muted,soloed:wt?.soloed??Ce.soloed,stereoPan:wt?.pan??Ce.pan,startTime:xt,endTime:Hr},Xr=We.map(Fe=>{const Pt=Fe.sampleRate;return{buffer:Fe.audioBuffer,startTime:Fe.startSample/Pt-xt,duration:Fe.durationSamples/Pt,offset:Fe.offsetSamples/Pt,fadeIn:Fe.fadeIn,fadeOut:Fe.fadeOut,gain:Fe.gain}});Se.addTrack({clips:Xr,track:Lr,effects:Ce.effects})}}),Se.applyInitialSoloState(),_.current=Se,Ke(!0);const Qe=new CustomEvent("waveform-playlist:ready",{detail:{trackCount:e.length,duration:J}});window.dispatchEvent(Qe),v?.()}catch(ue){console.error("Error loading audio:",ue)}})(),()=>{ge.current&&cancelAnimationFrame(ge.current),_.current&&_.current.dispose()}},[e,v,I]),i.useEffect(()=>{if(e.length===0)return;const W=16,X=e.map(q=>q.clips.map(J=>{if(J.waveformData){const ye=nr(J.waveformData,Q,0,J.offsetSamples,J.durationSamples);return{clipId:J.id,trackName:q.name,peaks:{length:ye.length,data:[ye.data],bits:ye.bits},startSample:J.startSample,durationSamples:J.durationSamples,fadeIn:J.fadeIn,fadeOut:J.fadeOut}}if(!J.audioBuffer)return console.warn(`Clip "${J.name||J.id}" has neither waveformData nor audioBuffer - rendering empty`),{clipId:J.id,trackName:q.name,peaks:{length:0,data:[],bits:W},startSample:J.startSample,durationSamples:J.durationSamples,fadeIn:J.fadeIn,fadeOut:J.fadeOut};const Se=Do(J.audioBuffer,Q,n,W,J.offsetSamples,J.durationSamples);return{clipId:J.id,trackName:q.name,peaks:Se,startSample:J.startSample,durationSamples:J.durationSamples,fadeIn:J.fadeIn,fadeOut:J.fadeOut}}));O(X)},[e,Q,n]);const Ye=i.useCallback(()=>{ge.current&&(cancelAnimationFrame(ge.current),ge.current=null);const W=()=>{const X=Z.getContext().currentTime-N.current,q=se.current+X;pe.current=q,M(q);const ue=m.current;if(ue.length>0){const Se=ue.find(ye=>q>=ye.start&&q<ye.end);if(Ue.current)Se&&Se.id!==Oe.current?Xe(Se.id):!Se&&Oe.current!==null&&Xe(null);else if(Oe.current){const ye=ue.find(Qe=>Qe.id===Oe.current);if(ye&&q>=ye.end){_.current&&_.current.stop(),A(!1),pe.current=Te.current,M(Te.current);return}}else Se&&Xe(Se.id)}if(Ie.current&&xe.current&&T.length>0){const Se=xe.current,ye=T[0].sampleRate,Qe=q*ye/tt.current,Ce=Se.clientWidth,ke=c.show?c.width:0,We=Qe+ke,rt=Math.max(0,We-Ce/2);Se.scrollLeft=rt}if(ve.current!==null&&q>=ve.current){_.current&&_.current.stop(),A(!1),pe.current=ve.current,M(ve.current),ve.current=null;return}const J=ee.current!==me.current&&me.current>ee.current;if(ct.current&&J&&q>=me.current){_.current?.stop();const ye=Z.getContext().currentTime;N.current=ye,se.current=ee.current,pe.current=ee.current,_.current?.play(ye,ee.current),ge.current=requestAnimationFrame(W);return}if(q>=R){_.current&&_.current.stop(),A(!1),pe.current=Te.current,M(Te.current),Xe(null);return}ge.current=requestAnimationFrame(W)};ge.current=requestAnimationFrame(W)},[R,T,Q,V]),Be=i.useCallback(()=>{ge.current&&(cancelAnimationFrame(ge.current),ge.current=null)},[]);i.useEffect(()=>{(async()=>{if(I&&ge.current&&_.current)if(V){const X=pe.current;_.current.stop(),Be(),await _.current.init(),_.current.setOnPlaybackComplete(()=>{});const ue=Z.getContext().currentTime;N.current=ue,se.current=X,_.current.play(ue,X),Ye()}else Be(),Ye()})()},[V,I,Ye,Be]),i.useEffect(()=>{(async()=>{if(nt.current&&_.current){const{position:X}=nt.current;nt.current=null,await _.current.init(),_.current.setOnPlaybackComplete(()=>{});const ue=Z.getContext().currentTime;N.current=ue,se.current=X,_.current.play(ue,X),A(!0),Ye()}})()},[e,Ye]);const _t=i.useCallback(async(W,X)=>{if(!_.current||T.length===0)return;await _.current.init(),await Z.start();const q=W??pe.current;Te.current=q,pe.current=q,_.current.setOnPlaybackComplete(()=>{}),_.current.stop(),Be();const J=Z.getContext().currentTime;N.current=J,se.current=q,ve.current=X!==void 0?q+X:null,_.current.play(J,q,X),A(!0),Ye()},[T.length,Ye,Be]),Mr=i.useCallback(()=>{if(!_.current)return;const W=Z.getContext().currentTime-N.current,X=se.current+W;_.current.pause(),A(!1),Be(),pe.current=X,M(X)},[Be]),Rr=i.useCallback(()=>{_.current&&(_.current.stop(),A(!1),Be(),pe.current=Te.current,M(Te.current),Xe(null))},[Be]),Er=i.useCallback(W=>{const X=Math.max(0,Math.min(W,R));pe.current=X,M(X),I&&_.current&&(_.current.stop(),Be(),_t(X))},[R,I,_t,Be]),Dr=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],muted:X},Y(q),_.current){const ue=`track-${W}`;_.current.setMute(ue,X)}},[z]),Tr=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],soloed:X},Y(q),_.current){const ue=`track-${W}`;_.current.setSolo(ue,X)}},[z]),Br=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],volume:X},Y(q),_.current){const ue=`track-${W}`,J=_.current.getTrack(ue);J&&J.setVolume(X)}},[z]),Wr=i.useCallback((W,X)=>{const q=[...z];if(q[W]={...q[W],pan:X},Y(q),_.current){const ue=`track-${W}`,J=_.current.getTrack(ue);J&&J.setPan(X)}},[z]),Fr=i.useCallback((W,X)=>{G(W),ie(X),pe.current=W,M(W),I&&_.current&&(_.current.stop(),_.current.play(Z.getContext().currentTime,W))},[I]),_r=i.useCallback(W=>{xe.current=W},[]),Zt=i.useRef(f);Zt.current=f;const Zr=i.useCallback(W=>{const X=typeof W=="function"?W(m.current):W;if(!Zt.current){process.env.NODE_ENV!=="production"&&console.warn("waveform-playlist: setAnnotations was called but no onAnnotationsChange callback is provided. Annotation edits will not persist. Pass onAnnotationsChange to WaveformPlaylistProvider to handle annotation updates.");return}Zt.current(X)},[]),Pr=T[0]?.sampleRate||44100,tn=t?30:0,Vr=e.length*r+tn,nn={isPlaying:I,currentTime:E,currentTimeRef:pe,playbackStartTimeRef:N,audioStartPositionRef:se},rn={continuousPlay:V,linkEndpoints:ae,annotationsEditable:de,isAutomaticScroll:le,isLoopEnabled:oe,annotations:w,activeAnnotationId:y,selectionStart:B,selectionEnd:K,selectedTrackId:te,loopStart:De,loopEnd:Le},an={play:_t,pause:Mr,stop:Rr,seekTo:Er,setCurrentTime:W=>{pe.current=W,M(W)},setTrackMute:Dr,setTrackSolo:Tr,setTrackVolume:Br,setTrackPan:Wr,setSelection:Fr,setSelectedTrackId:re,setTimeFormat:$e,formatTime:Ne,zoomIn:Ze.zoomIn,zoomOut:Ze.zoomOut,setMasterVolume:Je,setAutomaticScroll:W=>{ze(W)},setScrollContainer:_r,scrollContainerRef:xe,setContinuousPlay:st,setLinkEndpoints:L,setAnnotationsEditable:fe,setAnnotations:Zr,setActiveAnnotationId:Xe,setLoopEnabled:qe,setLoopRegion:Pe,setLoopRegionFromSelection:ut,clearLoopRegion:dt},on={duration:R,audioBuffers:T,peaksDataArray:j,trackStates:z,tracks:e,sampleRate:Pr,waveHeight:r,timeScaleHeight:tn,minimumPlaylistHeight:Vr,controls:c,playoutRef:_,samplesPerPixel:Q,timeFormat:be,masterVolume:we,canZoomIn:Ze.canZoomIn,canZoomOut:Ze.canZoomOut,barWidth:C,barGap:x,progressBarWidth:S,isReady:Ge,mono:n},jr={...nn,...rn,...an,...on},zr={...Hn,...l};return h.jsx($.ThemeProvider,{theme:zr,children:h.jsx(mr.Provider,{value:nn,children:h.jsx(hr.Provider,{value:rn,children:h.jsx(pr.Provider,{value:an,children:h.jsx(gr.Provider,{value:on,children:h.jsx(br.Provider,{value:jr,children:g})})})})})})},Me=()=>{const e=i.useContext(mr);if(!e)throw new Error("usePlaybackAnimation must be used within WaveformPlaylistProvider");return e},Re=()=>{const e=i.useContext(hr);if(!e)throw new Error("usePlaylistState must be used within WaveformPlaylistProvider");return e},he=()=>{const e=i.useContext(pr);if(!e)throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");return e},Ae=()=>{const e=i.useContext(gr);if(!e)throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");return e},ri=()=>{const e=i.useContext(br);if(!e)throw new Error("useWaveformPlaylist must be used within WaveformPlaylistProvider");return e};var ai=class{constructor(e){this._playbackRate=1,this.handleEnded=()=>{this.onStopCallback&&this.onStopCallback()},this.handleTimeUpdate=()=>{this.onTimeUpdateCallback&&this.onTimeUpdateCallback(this.audioElement.currentTime)},this._peaks=e.peaks,this._id=e.id??`track-${Date.now()}`,this._name=e.name??"Track",this._playbackRate=e.playbackRate??1,typeof e.source=="string"?(this.audioElement=new Audio(e.source),this.ownsElement=!0):(this.audioElement=e.source,this.ownsElement=!1),this.audioElement.preload="auto",this.audioElement.volume=e.volume??1,this.audioElement.playbackRate=this._playbackRate,"preservesPitch"in this.audioElement?this.audioElement.preservesPitch=!0:"mozPreservesPitch"in this.audioElement?this.audioElement.mozPreservesPitch=!0:"webkitPreservesPitch"in this.audioElement&&(this.audioElement.webkitPreservesPitch=!0),this.audioElement.addEventListener("ended",this.handleEnded),this.audioElement.addEventListener("timeupdate",this.handleTimeUpdate)}play(e=0){this.audioElement.currentTime=e,this.audioElement.play().catch(t=>{console.warn("MediaElementTrack: play() failed:",t)})}pause(){this.audioElement.pause()}stop(){this.audioElement.pause(),this.audioElement.currentTime=0}seekTo(e){this.audioElement.currentTime=Math.max(0,Math.min(e,this.duration))}setVolume(e){this.audioElement.volume=Math.max(0,Math.min(1,e))}setPlaybackRate(e){const t=Math.max(.5,Math.min(2,e));this._playbackRate=t,this.audioElement.playbackRate=t}setMuted(e){this.audioElement.muted=e}setOnStopCallback(e){this.onStopCallback=e}setOnTimeUpdateCallback(e){this.onTimeUpdateCallback=e}dispose(){this.audioElement.removeEventListener("ended",this.handleEnded),this.audioElement.removeEventListener("timeupdate",this.handleTimeUpdate),this.audioElement.pause(),this.ownsElement&&(this.audioElement.src="",this.audioElement.load())}get id(){return this._id}get name(){return this._name}get peaks(){return this._peaks}get currentTime(){return this.audioElement.currentTime}get duration(){return this.audioElement.duration||this._peaks.duration}get isPlaying(){return!this.audioElement.paused&&!this.audioElement.ended}get volume(){return this.audioElement.volume}get playbackRate(){return this._playbackRate}get muted(){return this.audioElement.muted}get element(){return this.audioElement}},oi=class{constructor(e={}){this.track=null,this._isPlaying=!1,this._masterVolume=e.masterVolume??1,this._playbackRate=e.playbackRate??1}async init(){}addTrack(e){return this.track&&(console.warn("MediaElementPlayout: Only one track is supported. Disposing previous track. For multi-track, use TonePlayout."),this.track.dispose()),this.track=new ai({...e,volume:this._masterVolume*(e.volume??1),playbackRate:this._playbackRate}),this.track.setOnStopCallback(()=>{this._isPlaying=!1,this.onPlaybackCompleteCallback&&this.onPlaybackCompleteCallback()}),this.track}removeTrack(e){this.track&&this.track.id===e&&(this.track.dispose(),this.track=null)}getTrack(e){if(this.track&&this.track.id===e)return this.track}play(e,t,n){if(!this.track){console.warn("MediaElementPlayout: No track to play");return}const r=t??0;if(this._isPlaying=!0,this.track.play(r),n!==void 0){const a=n/this._playbackRate;setTimeout(()=>{this._isPlaying&&(this.pause(),this.onPlaybackCompleteCallback&&this.onPlaybackCompleteCallback())},a*1e3)}}pause(){this.track&&this.track.pause(),this._isPlaying=!1}stop(){this.track&&this.track.stop(),this._isPlaying=!1}seekTo(e){this.track&&this.track.seekTo(e)}getCurrentTime(){return this.track?this.track.currentTime:0}setMasterVolume(e){this._masterVolume=Math.max(0,Math.min(1,e)),this.track&&this.track.setVolume(this._masterVolume)}setPlaybackRate(e){this._playbackRate=Math.max(.5,Math.min(2,e)),this.track&&this.track.setPlaybackRate(this._playbackRate)}setMute(e,t){const n=this.getTrack(e);n&&n.setMuted(t)}setSolo(e,t){console.warn("MediaElementPlayout: Solo is not applicable for single-track playback")}setOnPlaybackComplete(e){this.onPlaybackCompleteCallback=e}dispose(){this.track&&(this.track.dispose(),this.track=null)}get isPlaying(){return this._isPlaying}get masterVolume(){return this._masterVolume}get playbackRate(){return this._playbackRate}get duration(){return this.track?.duration??0}get sampleRate(){return this.track?.peaks.sample_rate??44100}};const vr=i.createContext(null),Cr=i.createContext(null),xr=i.createContext(null),wr=i.createContext(null),si=({track:e,samplesPerPixel:t=1024,waveHeight:n=100,timescale:r=!1,playbackRate:a=1,automaticScroll:s=!1,theme:o,controls:l={show:!1,width:0},annotationList:c,barWidth:u=1,barGap:d=0,progressBarWidth:v,onAnnotationsChange:p,onReady:f,children:C})=>{const x=v??u+d,[b,g]=i.useState(!1),[S,w]=i.useState(0),[m,y]=i.useState(0),[k,I]=i.useState([]),[A,E]=i.useState(a),M=i.useMemo(()=>c?.annotations?c.annotations.map(N=>typeof N.start=="number"?N:rr(N)):[],[c?.annotations]),R=i.useRef(M);R.current=M;const[F,T]=i.useState(null),[P,j]=i.useState(c?.isContinuousPlay??!1),[O]=i.useState(t),[z,Y]=i.useState(s),B=i.useRef(null),G=i.useRef(0),K=i.useRef(null),ie=i.useRef(P),te=i.useRef(null),re=i.useRef(null),le=i.useRef(s),ze=i.useRef(t);i.useEffect(()=>{ie.current=P},[P]),i.useEffect(()=>{le.current=z},[z]);const V=i.useCallback(N=>{te.current=N,T(N)},[]),ce=i.useCallback(N=>{ie.current=N,j(N)},[]),ae=i.useCallback(N=>{re.current=N},[]),L=e.waveformData.sample_rate;i.useEffect(()=>{const N=new oi({playbackRate:a});N.addTrack({source:e.source,peaks:e.waveformData,name:e.name});const se=N.getTrack(N.track?.id??"");return se&&se.setOnTimeUpdateCallback(ve=>{G.current=ve}),N.setOnPlaybackComplete(()=>{K.current&&(cancelAnimationFrame(K.current),K.current=null),g(!1),V(null),G.current=0,w(0)}),B.current=N,y(e.waveformData.duration),f?.(),()=>{K.current&&cancelAnimationFrame(K.current),N.dispose()}},[e.source,e.waveformData,e.name,a,f]),i.useEffect(()=>{const N=nr(e.waveformData,O,0,0,Math.ceil(e.waveformData.duration*L)),se={clipId:"media-element-clip",trackName:e.name??"Track",peaks:{length:N.length,data:[N.data],bits:N.bits},startSample:0,durationSamples:Math.ceil(e.waveformData.duration*L)};I([[se]])},[e.waveformData,e.name,O,L]);const de=i.useCallback(()=>{K.current&&cancelAnimationFrame(K.current);const N=()=>{const se=B.current?.getCurrentTime()??0;G.current=se,w(se);const ve=R.current;if(ve.length>0){const xe=ve.find(Ie=>se>=Ie.start&&se<Ie.end);if(ie.current)xe&&xe.id!==te.current?V(xe.id):!xe&&te.current!==null&&V(null);else if(te.current){const Ie=ve.find(Ue=>Ue.id===te.current);if(Ie&&se>=Ie.end){B.current?.stop(),g(!1);return}}else xe&&V(xe.id)}if(le.current&&re.current){const xe=re.current,Ie=se*L/ze.current,Ue=xe.clientWidth,Oe=l.show?l.width:0,tt=Ie+Oe,ct=Math.max(0,tt-Ue/2);xe.scrollLeft=ct}K.current=requestAnimationFrame(N)};K.current=requestAnimationFrame(N)},[V,L,l]),fe=i.useCallback(()=>{K.current&&(cancelAnimationFrame(K.current),K.current=null)},[]),oe=i.useCallback(N=>{if(!B.current)return;const se=N??G.current;B.current.play(void 0,se),g(!0),de()},[de]),Ee=i.useCallback(()=>{B.current&&(B.current.pause(),g(!1),fe(),w(B.current.getCurrentTime()))},[fe]),De=i.useCallback(()=>{B.current&&(B.current.stop(),g(!1),fe(),G.current=0,w(0),V(null))},[fe,V]),He=i.useCallback(N=>{const se=Math.max(0,Math.min(N,m));G.current=se,w(se),B.current&&B.current.seekTo(se)},[m]),Le=i.useCallback(N=>{const se=Math.max(.5,Math.min(2,N));E(se),B.current&&B.current.setPlaybackRate(se)},[]),ne=r?30:0,Ge=i.useMemo(()=>({isPlaying:b,currentTime:S,currentTimeRef:G}),[b,S]),Ke=i.useMemo(()=>({continuousPlay:P,annotations:M,activeAnnotationId:F,playbackRate:A,isAutomaticScroll:z}),[P,M,F,A,z]),_=i.useRef(p);_.current=p;const Te=i.useCallback(N=>{const se=typeof N=="function"?N(R.current):N;if(!_.current){process.env.NODE_ENV!=="production"&&console.warn("waveform-playlist: setAnnotations was called but no onAnnotationsChange callback is provided. Annotation edits will not persist. Pass onAnnotationsChange to MediaElementPlaylistProvider to handle annotation updates.");return}_.current(se)},[]),pe=i.useMemo(()=>({play:oe,pause:Ee,stop:De,seekTo:He,setPlaybackRate:Le,setContinuousPlay:ce,setAnnotations:Te,setActiveAnnotationId:V,setAutomaticScroll:N=>{Y(N)},setScrollContainer:ae,scrollContainerRef:re}),[oe,Ee,De,He,Le,ce,Te,V,ae]),ge=i.useMemo(()=>({duration:m,peaksDataArray:k,sampleRate:L,waveHeight:n,timeScaleHeight:ne,samplesPerPixel:O,playoutRef:B,controls:l,barWidth:u,barGap:d,progressBarWidth:x}),[m,k,L,n,ne,O,l,u,d,x]),ot={...Hn,...o};return h.jsx($.ThemeProvider,{theme:ot,children:h.jsx(vr.Provider,{value:Ge,children:h.jsx(Cr.Provider,{value:Ke,children:h.jsx(xr.Provider,{value:pe,children:h.jsx(wr.Provider,{value:ge,children:C})})})})})},Bt=()=>{const e=i.useContext(vr);if(!e)throw new Error("useMediaElementAnimation must be used within MediaElementPlaylistProvider");return e},Wt=()=>{const e=i.useContext(Cr);if(!e)throw new Error("useMediaElementState must be used within MediaElementPlaylistProvider");return e},en=()=>{const e=i.useContext(xr);if(!e)throw new Error("useMediaElementControls must be used within MediaElementPlaylistProvider");return e},Ft=()=>{const e=i.useContext(wr);if(!e)throw new Error("useMediaElementData must be used within MediaElementPlaylistProvider");return e},ii=({className:e})=>{const{isPlaying:t,currentTimeRef:n}=Me(),{selectionStart:r,selectionEnd:a,isLoopEnabled:s}=Re(),{play:o}=he(),l=async()=>{if(r!==a&&a>r)if(s)await o(r);else{const u=a-r;await o(r,u)}else await o(n.current??0)};return h.jsx(je,{onClick:l,disabled:t,className:e,children:"Play"})},li=({className:e})=>{const{isPlaying:t}=Me(),{pause:n}=he();return h.jsx(je,{onClick:n,disabled:!t,className:e,children:"Pause"})},ci=({className:e})=>{const{isPlaying:t}=Me(),{stop:n}=he();return h.jsx(je,{onClick:n,disabled:!t,className:e,children:"Stop"})},ui=({className:e})=>{const{isPlaying:t}=Me(),{play:n,setCurrentTime:r}=he(),{playoutRef:a}=Ae(),s=()=>{r(0),t&&a.current&&(a.current.stop(),n(0))};return h.jsx(je,{onClick:s,className:e,children:"Rewind"})},di=({className:e})=>{const{isPlaying:t}=Me(),{play:n,setCurrentTime:r}=he(),{duration:a,playoutRef:s}=Ae(),o=()=>{r(a),t&&s.current&&(s.current.stop(),n(a))};return h.jsx(je,{onClick:o,className:e,children:"Fast Forward"})},fi=({skipAmount:e=5,className:t})=>{const{currentTimeRef:n,isPlaying:r}=Me(),{play:a,setCurrentTime:s}=he(),{playoutRef:o}=Ae(),l=()=>{const c=Math.max(0,(n.current??0)-e);s(c),r&&o.current&&(o.current.stop(),a(c))};return h.jsx(je,{onClick:l,className:t,children:"Skip Backward"})},mi=({skipAmount:e=5,className:t})=>{const{currentTimeRef:n,isPlaying:r}=Me(),{play:a,setCurrentTime:s}=he(),{duration:o,playoutRef:l}=Ae(),c=()=>{const u=Math.min(o,(n.current??0)+e);s(u),r&&l.current&&(l.current.stop(),a(u))};return h.jsx(je,{onClick:c,className:t,children:"Skip Forward"})},hi=({className:e})=>{const{isLoopEnabled:t,loopStart:n,loopEnd:r}=Re(),{setLoopEnabled:a,setLoopRegion:s}=he(),{duration:o}=Ae(),l=n!==r&&r>n,c=()=>{if(!t&&!l){const u=Math.min(10,o*.25);s(0,Math.max(1,u))}a(!t)};return h.jsx(je,{onClick:c,className:e,title:t?"Disable loop":"Enable loop",children:t?"Loop On":"Loop Off"})},pi=({className:e})=>{const{selectionStart:t,selectionEnd:n,loopStart:r,loopEnd:a}=Re(),{setLoopRegionFromSelection:s,clearLoopRegion:o}=he(),l=t!==n&&n>t,c=r!==a&&a>r,u=()=>{c?o():s()};return h.jsx(je,{onClick:u,disabled:!l&&!c,className:e,title:c?"Clear loop region":l?"Set loop region from selection":"Create a selection first",children:c?"Clear Loop":"Set Loop"})},gi=({className:e,disabled:t})=>{const{zoomIn:n}=he(),{canZoomIn:r}=Ae();return h.jsx(je,{onClick:n,disabled:t||!r,className:e,children:"Zoom In"})},bi=({className:e,disabled:t})=>{const{zoomOut:n}=he(),{canZoomOut:r}=Ae();return h.jsx(je,{onClick:n,disabled:t||!r,className:e,children:"Zoom Out"})},vi=({className:e})=>{const{masterVolume:t}=Ae(),{setMasterVolume:n}=he();return h.jsx(Ea,{volume:t,onChange:n,className:e})},Ci=({className:e})=>{const{timeFormat:t}=Ae(),{setTimeFormat:n}=he();return h.jsx(uo,{value:t,onChange:n,className:e})},xi=$.span`
   font-family: 'Courier New', Monaco, monospace;
   font-size: 1rem;
   font-weight: 600;
   color: ${e=>e.theme?.textColor||"#333"};
   user-select: none;
-`,wi=({className:e})=>{const t=i.useRef(null),n=i.useRef(null),{isPlaying:r,currentTimeRef:a,playbackStartTimeRef:s,audioStartPositionRef:o}=Me(),{timeFormat:l}=Ae(),c=l;return i.useEffect(()=>{const u=()=>{if(t.current){let d;if(r){const v=Z.getContext().currentTime-(s.current??0);d=(o.current??0)+v}else d=a.current??0;t.current.textContent=lt(d,c)}r&&(n.current=requestAnimationFrame(u))};return r?n.current=requestAnimationFrame(u):u(),()=>{n.current&&(cancelAnimationFrame(n.current),n.current=null)}},[r,c,a,s,o]),i.useEffect(()=>{!r&&t.current&&(t.current.textContent=lt(a.current??0,c))}),h.jsx(xi,{ref:t,className:e,"aria-label":"Audio position",children:lt(a.current??0,c)})},yi=({className:e})=>{const{selectionStart:t,selectionEnd:n}=Re(),{setSelection:r}=he();return h.jsx(za,{selectionStart:t,selectionEnd:n,onSelectionChange:r,className:e})},ki=({className:e})=>{const{isAutomaticScroll:t}=Re(),{setAutomaticScroll:n}=he();return h.jsx(fa,{checked:t,onChange:n,className:e})},Si=({className:e})=>{const{continuousPlay:t}=Re(),{setContinuousPlay:n}=he();return h.jsx(ms,{checked:t,onChange:n,className:e})},Ai=({className:e})=>{const{linkEndpoints:t}=Re(),{setLinkEndpoints:n}=he();return h.jsx(hs,{checked:t,onChange:n,className:e})},Ii=({className:e})=>{const{annotationsEditable:t}=Re(),{setAnnotationsEditable:n}=he();return h.jsx(ps,{checked:t,onChange:n,className:e})},$i=({filename:e,className:t})=>{const{annotations:n}=Re();return h.jsx(bs,{annotations:n,filename:e,className:t})},Mi=({label:e="Export WAV",filename:t="export",mode:n="master",trackIndex:r,bitDepth:a=16,applyEffects:s=!0,effectsFunction:o,createOfflineTrackEffects:l,className:c,onExportComplete:u,onExportError:d})=>{const{tracks:v,trackStates:p}=Ae(),{exportWav:f,isExporting:C,progress:x}=fr(),b=async()=>{try{const S=await f(v,p,{filename:t,mode:n,trackIndex:r,bitDepth:a,applyEffects:s,effectsFunction:o,createOfflineTrackEffects:l,autoDownload:!0});u?.(S.blob)}catch(S){d?.(S instanceof Error?S:new Error("Export failed"))}},g=C?`Exporting ${Math.round(x*100)}%`:e;return h.jsx(je,{onClick:b,disabled:C||v.length===0,className:c,children:g})},Ri=$.div`
+`,wi=({className:e})=>{const t=i.useRef(null),n=i.useRef(null),{isPlaying:r,currentTimeRef:a,playbackStartTimeRef:s,audioStartPositionRef:o}=Me(),{timeFormat:l}=Ae(),c=l;return i.useEffect(()=>{const u=()=>{if(t.current){let d;if(r){const v=Z.getContext().currentTime-(s.current??0);d=(o.current??0)+v}else d=a.current??0;t.current.textContent=lt(d,c)}r&&(n.current=requestAnimationFrame(u))};return r?n.current=requestAnimationFrame(u):u(),()=>{n.current&&(cancelAnimationFrame(n.current),n.current=null)}},[r,c,a,s,o]),i.useEffect(()=>{!r&&t.current&&(t.current.textContent=lt(a.current??0,c))}),h.jsx(xi,{ref:t,className:e,"aria-label":"Audio position",children:lt(a.current??0,c)})},yi=({className:e})=>{const{selectionStart:t,selectionEnd:n}=Re(),{setSelection:r}=he();return h.jsx(za,{selectionStart:t,selectionEnd:n,onSelectionChange:r,className:e})},ki=({className:e})=>{const{isAutomaticScroll:t}=Re(),{setAutomaticScroll:n}=he();return h.jsx(fa,{checked:t,onChange:n,className:e})},Si=({className:e})=>{const{continuousPlay:t}=Re(),{setContinuousPlay:n}=he();return h.jsx(ms,{checked:t,onChange:n,className:e})},Ai=({className:e})=>{const{linkEndpoints:t}=Re(),{setLinkEndpoints:n}=he();return h.jsx(hs,{checked:t,onChange:n,className:e})},Ii=({className:e})=>{const{annotationsEditable:t}=Re(),{setAnnotationsEditable:n}=he();return h.jsx(ps,{checked:t,onChange:n,className:e})},$i=({filename:e,className:t})=>{const{annotations:n}=Re();return h.jsx(bs,{annotations:n,filename:e,className:t})},Mi=({label:e="Export WAV",filename:t="export",mode:n="master",trackIndex:r,bitDepth:a=16,applyEffects:s=!0,effectsFunction:o,createOfflineTrackEffects:l,className:c,onExportComplete:u,onExportError:d})=>{const{tracks:v,trackStates:p}=Ae(),{exportWav:f,isExporting:C,progress:x}=fr(),b=async()=>{try{const S=await f(v,p,{filename:t,mode:n,trackIndex:r,bitDepth:a,applyEffects:s,effectsFunction:o,createOfflineTrackEffects:l,autoDownload:!0});u?.(S.blob)}catch(S){d?.(S instanceof Error?S:new Error("Export failed"))}},g=C?`Exporting ${Math.round(x*100)}%`:e;return h.jsx(je,{onClick:b,disabled:C||v.length===0,className:c,children:g})},Ri=$.div.attrs(e=>({style:{width:`${e.$width}px`,background:e.$color}}))`
   position: absolute;
   top: 0;
   left: 0;
-  width: ${e=>e.$width}px;
-  background: ${e=>e.$color};
   height: 100%;
   z-index: 100; /* Below sticky controls (z-index: 101) so playhead is hidden when scrolled behind controls */
   pointer-events: none;
   will-change: transform;
 `,Ei=({color:e="#ff0000",controlsOffset:t=0})=>{const n=i.useRef(null),r=i.useRef(null),{isPlaying:a,currentTimeRef:s,playbackStartTimeRef:o,audioStartPositionRef:l}=Me(),{samplesPerPixel:c,sampleRate:u,progressBarWidth:d}=Ae();return i.useEffect(()=>{const v=()=>{if(n.current){let p;if(a){const C=Z.getContext().currentTime-(o.current??0);p=(l.current??0)+C}else p=s.current??0;const f=p*u/c+t;n.current.style.transform=`translate3d(${f}px, 0, 0)`}a&&(r.current=requestAnimationFrame(v))};return a?r.current=requestAnimationFrame(v):v(),()=>{r.current&&(cancelAnimationFrame(r.current),r.current=null)}},[a,u,c,t,s,o,l]),i.useEffect(()=>{if(!a&&n.current){const p=(s.current??0)*u/c+t;n.current.style.transform=`translate3d(${p}px, 0, 0)`}}),h.jsx(Ri,{ref:n,$color:e,$width:d,"data-playhead":!0})},Di=$.div`
   position: relative;
-`,Lt=$.div`
+`,Lt=$.div.attrs(e=>({style:{top:`${e.$top}px`,width:`${e.$width}px`,height:`${e.$height}px`,background:e.$color}}))`
   position: absolute;
-  top: ${e=>e.$top}px;
   left: 0;
-  width: ${e=>e.$width}px;
-  height: ${e=>e.$height}px;
-  background: ${e=>e.$color};
   z-index: 0;
   /* Force GPU compositing layer to prevent gradient flickering during scroll */
   transform: translateZ(0);
   backface-visibility: hidden;
   will-change: transform;
-`,Ti=$.div`
+`,Ti=$.div.attrs(e=>({style:{top:`${e.$top}px`,height:`${e.$height}px`,background:e.$color}}))`
   position: absolute;
-  top: ${e=>e.$top}px;
   left: 0;
-  height: ${e=>e.$height}px;
-  background: ${e=>e.$color};
   pointer-events: none;
   z-index: 1;
   will-change: width;