waveframe 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var
|
|
3
|
-
`).map(t=>{let e=t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),a={},n=0,i=(o,s)=>{let l=`__TOKEN_${n++}__`;return a[l]=`<span class="${s}">${o}</span>`,l};return e=e.replace(/("(?:[^"\\]|\\.)*")/g,o=>i(o,"text-[#ce9178]")),e=e.replace(/\b(\d+(\.\d+)?)\b/g,o=>i(o,"text-[#b5cea8]")),e=e.replace(/\b(WaveframePlayer)\b/g,o=>i(o,"text-[#4ec9b0]")),e=e.replace(/\b([a-z][a-zA-Z0-9]+)(?==)/g,o=>i(o,"text-[#9cdcfe]")),e=e.replace(/(<|>|\{|\}|\/|:|,)/g,'<span class="text-gray-500">$1</span>'),Object.entries(a).forEach(([o,s])=>{e=e.replace(o,s);}),e});var
|
|
2
|
+
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var A=class{audio;listeners=new Set;_state;constructor(){this.audio=new Audio,this._state={isPlaying:false,isStalled:false,currentTime:0,duration:0,volume:1,muted:false,error:null},this.initListeners();}initListeners(){this.audio.addEventListener("play",()=>this.updateState({isPlaying:true,error:null})),this.audio.addEventListener("pause",()=>this.updateState({isPlaying:false})),this.audio.addEventListener("waiting",()=>this.updateState({isStalled:true})),this.audio.addEventListener("playing",()=>this.updateState({isStalled:false})),this.audio.addEventListener("canplay",()=>this.updateState({isStalled:false})),this.audio.addEventListener("timeupdate",()=>this.updateState({currentTime:this.audio.currentTime})),this.audio.addEventListener("durationchange",()=>this.updateState({duration:this.audio.duration})),this.audio.addEventListener("volumechange",()=>this.updateState({volume:this.audio.volume,muted:this.audio.muted})),this.audio.addEventListener("ended",()=>this.updateState({isPlaying:false})),this.audio.addEventListener("error",()=>{let t=this.audio.error,e="Unknown audio error";if(t)switch(t.code){case t.MEDIA_ERR_ABORTED:e="Playback aborted";break;case t.MEDIA_ERR_NETWORK:e="Network error";break;case t.MEDIA_ERR_DECODE:e="Audio decoding failed";break;case t.MEDIA_ERR_SRC_NOT_SUPPORTED:e="Audio format not supported";break}this.updateState({isPlaying:false,error:e});});}updateState(t){this._state={...this._state,...t},this.notify();}notify(){this.listeners.forEach(t=>t(this._state));}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}get state(){return this._state}setSource(t){this.audio.src=t,this.audio.load(),this.updateState({error:null,currentTime:0,duration:0});}async play(){try{await this.audio.play();}catch(t){let e=t instanceof Error?t.message:"Playback failed";throw this.updateState({isPlaying:false,error:e}),t}}pause(){this.audio.pause();}async togglePlay(){if(this._state.isPlaying)this.pause();else try{await this.play();}catch{}}seek(t){this.audio.currentTime=t;}setVolume(t){this.audio.volume=t;}setMuted(t){this.audio.muted=t;}dispose(){this.pause(),this.audio.src="",this.listeners.clear();}};var P=class{audioCtx=null;constructor(){}getContext(){return this.audioCtx||(this.audioCtx=new(window.AudioContext||window.webkitAudioContext)),this.audioCtx}async generatePeaks(t,e=512){try{let a;if(typeof t=="string"){let g=await fetch(t);if(!g.ok)throw new Error(`Failed to fetch audio: ${g.statusText}`);a=await g.arrayBuffer();}else a=await t.arrayBuffer();let o=(await this.getContext().decodeAudioData(a)).getChannelData(0),s=Math.floor(o.length/e),l=[];for(let g=0;g<e;g++){let x=0,m=g*s,z=m+s;for(let c=m;c<z;c++){let k=Math.abs(o[c]);k>x&&(x=k);}l.push(x);}let u=Math.max(...l);return l.map(g=>g/(u||1))}catch(a){throw console.error("PeakAnalyzer Error:",a),a}}dispose(){this.audioCtx&&(this.audioCtx.close(),this.audioCtx=null);}};var j=class{player;analyzer;listeners=new Set;_state;_media=null;_objectUrl=null;_isDisposed=false;constructor(){this.player=new A,this.analyzer=new P,this._state={...this.player.state,peaks:[],isAnalyzing:false,error:null},this.player.subscribe(t=>{this.updateState({...t});});}get isDisposed(){return this._isDisposed}updateState(t){this._state={...this._state,...t},this.notify();}notify(){this.listeners.forEach(t=>t(this._state));}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}getSnapshot(){return this._state}get state(){return this._state}reset(){this.revokeOldSource(),this._media=null,this.player.dispose(),this.analyzer.dispose(),this.player=new A,this.analyzer=new P,this.player.subscribe(t=>{this.updateState({...t});}),this._isDisposed=false,this.updateState({...this.player.state,peaks:[],isAnalyzing:false,error:null});}revokeOldSource(){this._objectUrl&&(URL.revokeObjectURL(this._objectUrl),this._objectUrl=null);}load(t,e){if(this._media===t){e&&e.length!==this._state.peaks.length&&this.updateState({peaks:e});return}this.revokeOldSource(),this._media=t;let a;typeof t=="string"?a=t:(this._objectUrl=URL.createObjectURL(t),a=this._objectUrl),this.player.setSource(a);let n=e&&e.length>0;this.updateState({peaks:e||[],isAnalyzing:false,error:null}),n||this.analyze();}async analyze(t=512){if(!this._media){this.updateState({error:"No media loaded to analyze"});return}this.updateState({isAnalyzing:true,error:null});try{let e=await this.analyzer.generatePeaks(this._media,t);this.updateState({peaks:e,isAnalyzing:!1});}catch(e){this.updateState({isAnalyzing:false,error:e instanceof Error?e.message:"Analysis failed"});}}async togglePlay(){return await this.player.togglePlay()}async play(){return await this.player.play()}pause(){this.player.pause();}seek(t){let{duration:e}=this._state;e&&this.player.seek(t*e);}setVolume(t){this.player.setVolume(t);}setMuted(t){this.player.setMuted(t);}dispose(){this._isDisposed=true,this.revokeOldSource(),this.player.dispose(),this.analyzer.dispose(),this.listeners.clear();}};function v(r,t){return react.useSyncExternalStore(e=>r.subscribe(e),()=>{let e=r.getSnapshot();return t?t(e):e})}var J=(r,t={})=>{let{peaks:e,controller:a,autoPlay:n}=t,i=react.useRef(false),o=react.useMemo(()=>a||new j,[a]),s=a||o;react.useEffect(()=>{!a&&o.isDisposed&&o.reset();},[o,a]);let l=v(s);return react.useEffect(()=>(i.current=true,r&&(s.load(r,e),n&&s.play().catch(()=>{})),()=>{i.current=false;}),[s,r,e,n]),react.useEffect(()=>()=>{a||o.dispose();},[o,a]),{controller:s,state:l}};var D=react.memo(({artworkUrl:r,title:t,isLoading:e})=>jsxRuntime.jsxs("div",{className:"relative w-full h-full overflow-hidden rounded-[var(--wf-artwork-rounded,0.75rem)] shadow-lg group/artwork",children:[jsxRuntime.jsx("div",{className:`w-full h-full transition-all duration-700 ${e?"blur-md scale-110":""}`,children:r?jsxRuntime.jsx("img",{src:r,alt:t,className:"w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110"}):jsxRuntime.jsx("div",{className:"w-full h-full bg-gradient-to-br from-[var(--wf-placeholder-from,#fb923c)] to-[var(--wf-placeholder-to,#ec4899)] flex items-center justify-center",children:jsxRuntime.jsx("svg",{className:"w-16 h-16 text-white opacity-50",fill:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{d:"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"})})})}),e&&jsxRuntime.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]",children:jsxRuntime.jsx("div",{className:"w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin"})})]}));D.displayName="ArtworkOverlay";var Q=r=>{let[t,e]=react.useState(0);return react.useEffect(()=>{if(!r.current)return;let a=new ResizeObserver(n=>{for(let i of n)e(i.contentRect.width);});return a.observe(r.current),()=>a.disconnect()},[r]),t};var It=async(r,t=512)=>{let e=new P;try{return await e.generatePeaks(r,t)}finally{e.dispose();}},Ht=async r=>{let e=await(await fetch(r)).blob();return URL.createObjectURL(e)},Vt=r=>{r&&r.startsWith("blob:")&&URL.revokeObjectURL(r);};var $=r=>{if(isNaN(r))return "0:00";let t=Math.floor(r/60),e=Math.floor(r%60);return `${t}:${e.toString().padStart(2,"0")}`},W=(r,t)=>{if(r.length===0)return [];if(r.length===t)return r;let e=new Array(t),a=r.length/t;if(a>1)for(let n=0;n<t;n++){let i=0,o=Math.floor(n*a),s=Math.floor((n+1)*a),l=s-o;for(let u=o;u<s;u++)i+=r[u]*r[u];e[n]=l>0?Math.sqrt(i/l):0;}else for(let n=0;n<t;n++){let i=n*a,o=Math.floor(i),s=Math.min(o+1,r.length-1),l=i-o;e[n]=r[o]+(r[s]-r[o])*l;}return e},qt=r=>r.split(`
|
|
3
|
+
`).map(t=>{let e=t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),a={},n=0,i=(o,s)=>{let l=`__TOKEN_${n++}__`;return a[l]=`<span class="${s}">${o}</span>`,l};return e=e.replace(/("(?:[^"\\]|\\.)*")/g,o=>i(o,"text-[#ce9178]")),e=e.replace(/\b(\d+(\.\d+)?)\b/g,o=>i(o,"text-[#b5cea8]")),e=e.replace(/\b(WaveframePlayer)\b/g,o=>i(o,"text-[#4ec9b0]")),e=e.replace(/\b([a-z][a-zA-Z0-9]+)(?==)/g,o=>i(o,"text-[#9cdcfe]")),e=e.replace(/(<|>|\{|\}|\/|:|,)/g,'<span class="text-gray-500">$1</span>'),Object.entries(a).forEach(([o,s])=>{e=e.replace(o,s);}),e});var V=react.memo(({controller:r,peaks:t,waveColor:e="#e5e7eb",progressColor:a="#3b82f6",height:n=80,resolution:i="auto",barWidth:o=2,barGap:s=1,amplitude:l=1,powerScale:u=1})=>{let g=react.useRef(null),x=react.useRef(null),m=react.useRef(null),z=Q(m),c=v(r,d=>d.currentTime),k=v(r,d=>d.duration),y=v(r,d=>d.peaks),C=react.useMemo(()=>{let d=t||y;if(d.length===0)return [];let b=i==="auto"?Math.floor(z/(o+s)):i,p=W(d,Math.max(1,b));return (u!==1||l!==1)&&(p=p.map(h=>Math.pow(h,u)*l)),p},[t,y,z,i,o,s,l,u]);react.useEffect(()=>{let d=g.current,b=x.current;if(!d||!b)return;let p=d.getContext("2d"),h=b.getContext("2d");if(!p||!h)return;let _=window.devicePixelRatio||1,L=d.getBoundingClientRect(),w=L.width*_,F=L.height*_;[d,b].forEach(S=>{(S.width!==w||S.height!==F)&&(S.width=w,S.height=F);}),(()=>{if(C.length===0)return;let{width:S,height:N}=d;p.clearRect(0,0,S,N),h.clearRect(0,0,S,N);let et=C.length,q=S/et,M=typeof i=="number"?q*.7:o*_,rt=typeof i=="number"?q*.3:s*_;p.lineCap="round",p.lineWidth=M,h.lineCap="round",h.lineWidth=M;let K=N/2;C.forEach((G,at)=>{if(G<=0)return;let T=at*(M+rt)+M/2,X=Math.max(M,G*N*.8),Y=K-X/2,Z=K+X/2;p.beginPath(),p.strokeStyle=e,p.moveTo(T,Y),p.lineTo(T,Z),p.stroke(),h.beginPath(),h.strokeStyle=a,h.moveTo(T,Y),h.lineTo(T,Z),h.stroke();});})();},[C,e,a,i,o,s,n]);let U=d=>{if(m.current&&k){let b=m.current.getBoundingClientRect(),p=d.clientX-b.left,h=Math.max(0,Math.min(1,p/b.width));r.seek(h);}},O=k?c/k*100:0;return jsxRuntime.jsxs("div",{ref:m,className:"relative w-full cursor-pointer overflow-hidden",style:{height:`${n}px`,"--wf-wave-color":e,"--wf-progress-color":a},onClick:U,children:[jsxRuntime.jsx("canvas",{ref:g,className:"absolute inset-0 w-full h-full"}),jsxRuntime.jsx("div",{className:"absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none",style:{width:`${O}%`},children:jsxRuntime.jsx("canvas",{ref:x,className:"absolute h-full",style:{width:`${z}px`}})})]})});V.displayName="Waveform";var bt=react.memo(({media:r,peaks:t,artwork:e,title:a,artist:n,waveColor:i,progressColor:o,height:s=80,className:l="",style:u,resolution:g="auto",barWidth:x=2,barGap:m=1,powerScale:z=1,theme:c,controller:k})=>{let{controller:y}=J(r,{peaks:t,controller:k}),C=v(y,w=>w.isPlaying),U=v(y,w=>w.isAnalyzing),O=v(y,w=>w.currentTime),d=v(y,w=>w.duration),[b,p]=react.useState(typeof e=="string"?e:void 0);react.useEffect(()=>{if(e instanceof Blob){let w=URL.createObjectURL(e);return p(w),()=>URL.revokeObjectURL(w)}else p(e);},[e]);let h=react.useMemo(()=>i||(c?c.bg==="#ffffff"?"#e5e7eb":"#374151":"#e5e7eb"),[i,c]),_=o||c?.primary||"#3b82f6",L=react.useMemo(()=>({...{"--wf-bg-color":c?.bg||"white","--wf-border-color":c?.border||"#f3f4f6","--wf-title-color":c?.text||"#111827","--wf-artist-color":c?.text||"#6b7280","--wf-time-color":c?.text||"#9ca3af","--wf-play-btn-bg":c?.primary||"#3b82f6","--wf-placeholder-from":c?.primary||"#fb923c","--wf-placeholder-to":c?.bg||"#ec4899"},...u}),[c,u]);return jsxRuntime.jsxs("div",{className:`group relative flex flex-col md:flex-row items-stretch gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${l}`,style:L,children:[jsxRuntime.jsx("div",{className:"flex-shrink-0 w-24 h-24 md:w-32 md:h-32",children:jsxRuntime.jsx(D,{artworkUrl:b,title:a,isLoading:U})}),jsxRuntime.jsxs("div",{className:"flex-1 w-full flex flex-col min-w-0",children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-4 mb-6",children:[jsxRuntime.jsx("button",{onClick:()=>y.togglePlay(),className:"w-12 h-12 md:w-14 md:h-14 flex-shrink-0 flex items-center justify-center rounded-full bg-[var(--wf-play-btn-bg,#3b82f6)] text-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.2)] transition-all hover:scale-105 active:scale-95 cursor-pointer border-none outline-none group/play",children:C?jsxRuntime.jsx("svg",{className:"w-6 h-6 md:w-7 md:h-7",fill:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"})}):jsxRuntime.jsx("svg",{className:"w-6 h-6 md:w-7 md:h-7 ml-1",fill:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{d:"M8 5v14l11-7z"})})}),jsxRuntime.jsxs("div",{className:"flex-1 flex flex-col min-w-0",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between gap-4",children:[n&&jsxRuntime.jsx("p",{className:"text-[10px] md:text-xs font-bold uppercase text-[var(--wf-artist-color,#6b7280)] opacity-60 tracking-[0.1em] line-clamp-1",children:n}),jsxRuntime.jsxs("div",{className:"text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0",children:[$(O)," / ",$(d)]})]}),a&&jsxRuntime.jsx("h3",{className:"text-lg md:text-xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1 mt-0.5 leading-tight",children:a})]})]}),jsxRuntime.jsx("div",{className:"mt-auto",children:jsxRuntime.jsx(V,{controller:y,peaks:t,waveColor:h,progressColor:_,height:s,resolution:g,barWidth:x,barGap:m,powerScale:z})})]})]})});bt.displayName="WaveframePlayer";var ge=(r,t)=>react.useMemo(()=>W(r,t),[r,t]);exports.PeakAnalyzer=P;exports.PlayerCore=A;exports.Waveform=V;exports.WaveframeController=j;exports.WaveframePlayer=bt;exports.formatTime=$;exports.generatePeaks=It;exports.highlightCode=qt;exports.loadAudioToMemory=Ht;exports.resamplePeaks=W;exports.revokeAudioMemory=Vt;exports.useResampledPeaks=ge;exports.useResizeObserver=Q;exports.useWaveframe=J;exports.useWaveframeStore=v;//# sourceMappingURL=index.cjs.map
|
|
4
4
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/core/PlayerCore.ts","../src/core/PeakAnalyzer.ts","../src/core/WaveframeController.ts","../src/hooks/useWaveframeStore.ts","../src/hooks/useWaveframe.ts","../src/molecules/ArtworkOverlay.tsx","../src/hooks/useResizeObserver.ts","../src/utils/audio.ts","../src/utils/index.ts","../src/organisms/Waveform.tsx","../src/components/WaveframePlayer.tsx","../src/hooks/useResampledPeaks.ts"],"names":["PlayerCore","error","message","patch","l","listener","url","e","time","volume","muted","PeakAnalyzer","media","samples","arrayBuffer","response","channelData","blockSize","peaks","i","max","start","end","j","val","maxPeak","p","WaveframeController","playerState","sourceUrl","hasPeaks","percentage","duration","useWaveframeStore","controller","selector","useSyncExternalStore","callback","state","useWaveframe","options","providedController","autoPlay","isMounted","useRef","internalController","useMemo","useEffect","ArtworkOverlay","memo","artworkUrl","title","isLoading","jsxs","jsx","useResizeObserver","ref","width","setWidth","useState","observer","entries","entry","generatePeaks","audioUrl","analyzer","loadAudioToMemory","blob","revokeAudioMemory","formatTime","seconds","min","sec","resamplePeaks","targetCount","resampled","ratio","position","index","nextIndex","fraction","highlightCode","code","line","h","tokens","counter","addToken","cls","id","m","html","Waveform","providedPeaks","waveColor","progressColor","height","resolution","barWidth","barGap","amplitude","powerScale","canvasRef","progressCanvasRef","containerRef","containerWidth","currentTime","s","enginePeaks","rawPeaks","canvas","progressCanvas","ctx","pCtx","dpr","rect","targetWidth","targetHeight","c","barCount","actualBarTotalWidth","actualBarWidth","actualBarGap","centerY","peak","x","barHeight","yStart","yEnd","handleSeek","progressPercent","WaveframePlayer","propPeaks","artwork","artist","propWaveColor","propProgressColor","className","propStyle","theme","isPlaying","isAnalyzing","resolvedArtworkUrl","setResolvedArtworkUrl","mergedStyle","useResampledPeaks"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Represents the low-level playback state of the audio element.\n */\nexport type PlayerState = {\n /** Whether the audio is currently playing */\n isPlaying: boolean;\n /** Whether the audio is stalled (waiting for data) */\n isStalled: boolean;\n /** The current playback time in seconds */\n currentTime: number;\n /** The total duration of the track in seconds */\n duration: number;\n /** The current volume level (0 to 1) */\n volume: number;\n /** Whether the audio is currently muted */\n muted: boolean;\n /** Any error reported by the audio element */\n error: string | null;\n};\n\n/**\n * A callback function that receives the latest PlayerState.\n */\nexport type PlayerListener = (state: PlayerState) => void;\n\n/**\n * The internal core class responsible for managing the HTMLAudioElement.\n * \n * It handles raw playback logic, volume control, and synchronizes the \n * internal `PlayerState` with DOM events from the underlying `Audio` instance.\n */\nexport class PlayerCore {\n private audio: HTMLAudioElement;\n private listeners: Set<PlayerListener> = new Set();\n private _state: PlayerState;\n\n /**\n * Initializes a new PlayerCore instance and sets up event listeners on a new Audio object.\n */\n constructor() {\n this.audio = new Audio();\n this._state = {\n isPlaying: false,\n isStalled: false,\n currentTime: 0,\n duration: 0,\n volume: 1,\n muted: false,\n error: null,\n };\n\n this.initListeners();\n }\n\n /**\n * Subscribes to various HTMLMediaElement events to keep the internal state in sync.\n */\n private initListeners() {\n this.audio.addEventListener('play', () => this.updateState({ isPlaying: true, error: null }));\n this.audio.addEventListener('pause', () => this.updateState({ isPlaying: false }));\n this.audio.addEventListener('waiting', () => this.updateState({ isStalled: true }));\n this.audio.addEventListener('playing', () => this.updateState({ isStalled: false }));\n this.audio.addEventListener('canplay', () => this.updateState({ isStalled: false }));\n this.audio.addEventListener('timeupdate', () => this.updateState({ currentTime: this.audio.currentTime }));\n this.audio.addEventListener('durationchange', () => this.updateState({ duration: this.audio.duration }));\n this.audio.addEventListener('volumechange', () => this.updateState({ \n volume: this.audio.volume, \n muted: this.audio.muted \n }));\n this.audio.addEventListener('ended', () => this.updateState({ isPlaying: false }));\n this.audio.addEventListener('error', () => {\n const error = this.audio.error;\n let message = 'Unknown audio error';\n if (error) {\n switch (error.code) {\n case error.MEDIA_ERR_ABORTED: message = 'Playback aborted'; break;\n case error.MEDIA_ERR_NETWORK: message = 'Network error'; break;\n case error.MEDIA_ERR_DECODE: message = 'Audio decoding failed'; break;\n case error.MEDIA_ERR_SRC_NOT_SUPPORTED: message = 'Audio format not supported'; break;\n }\n }\n this.updateState({ isPlaying: false, error: message });\n });\n }\n\n /**\n * Updates the internal state and notifies subscribers.\n */\n private updateState(patch: Partial<PlayerState>) {\n this._state = { ...this._state, ...patch };\n this.notify();\n }\n\n /**\n * Triggers all registered listener callbacks.\n */\n private notify() {\n this.listeners.forEach(l => l(this._state));\n }\n\n /**\n * Registers a listener for state updates.\n * @param listener The callback function.\n * @returns An unsubscribe function.\n */\n public subscribe(listener: PlayerListener) {\n this.listeners.add(listener);\n return () => this.listeners.delete(listener);\n }\n\n /**\n * Returns the current playback state.\n */\n public get state() {\n return this._state;\n }\n\n /**\n * Updates the source URL of the underlying audio element.\n * @param url The audio source URL.\n */\n public setSource(url: string) {\n this.audio.src = url;\n this.audio.load();\n this.updateState({ error: null, currentTime: 0, duration: 0 });\n }\n\n /**\n * Starts playback. Returns a promise that resolves when playback begins.\n */\n public async play() {\n try {\n await this.audio.play();\n } catch (e) {\n const message = e instanceof Error ? e.message : 'Playback failed';\n this.updateState({ isPlaying: false, error: message });\n throw e;\n }\n }\n\n /**\n * Pauses playback.\n */\n public pause() {\n this.audio.pause();\n }\n\n /**\n * Toggles between play and pause states.\n */\n public async togglePlay() {\n if (this._state.isPlaying) {\n this.pause();\n } else {\n try {\n await this.play();\n } catch {\n // Error handled in play()\n }\n }\n }\n\n /**\n * Seeks to a specific time.\n * @param time Time in seconds.\n */\n public seek(time: number) {\n this.audio.currentTime = time;\n }\n\n /**\n * Sets the volume level.\n * @param volume Level from 0 to 1.\n */\n public setVolume(volume: number) {\n this.audio.volume = volume;\n }\n\n /**\n * Mutes or unmutes the audio element.\n * @param muted Mute status.\n */\n public setMuted(muted: boolean) {\n this.audio.muted = muted;\n }\n\n /**\n * Cleans up the audio element and removes all listeners.\n */\n public dispose() {\n this.pause();\n this.audio.src = '';\n this.listeners.clear();\n }\n}\n","/**\n * A specialized class for decoding audio data and generating waveform peaks.\n * \n * It leverages the Web Audio API (`AudioContext`) to process audio buffers \n * and extract amplitude data for visualization.\n */\nexport class PeakAnalyzer {\n private audioCtx: AudioContext | null = null;\n\n /**\n * Initializes the analyzer. AudioContext creation is deferred to the first use \n * to comply with browser autoplay and resource management policies.\n */\n constructor() {}\n\n /**\n * Lazily creates or returns the existing AudioContext.\n */\n private getContext(): AudioContext {\n if (!this.audioCtx) {\n this.audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();\n }\n return this.audioCtx;\n }\n\n /**\n * Processes media (URL or Blob) and generates a set of normalized peaks.\n * \n * @param media The URL string or Blob object to analyze.\n * @param samples The number of peaks (bars) to generate. Defaults to 512.\n * @returns A promise resolving to an array of normalized peak values (0 to 1).\n * \n * @example\n * ```typescript\n * const analyzer = new PeakAnalyzer();\n * \n * // Analyze from URL\n * const peaksFromUrl = await analyzer.generatePeaks('https://example.com/audio.mp3');\n * \n * // Analyze from Blob\n * const peaksFromBlob = await analyzer.generatePeaks(myAudioBlob);\n * ```\n */\n public async generatePeaks(media: string | Blob, samples: number = 512): Promise<number[]> {\n try {\n let arrayBuffer: ArrayBuffer;\n\n if (typeof media === 'string') {\n const response = await fetch(media);\n if (!response.ok) throw new Error(`Failed to fetch audio: ${response.statusText}`);\n arrayBuffer = await response.arrayBuffer();\n } else {\n arrayBuffer = await media.arrayBuffer();\n }\n\n const audioCtx = this.getContext();\n const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);\n \n const channelData = audioBuffer.getChannelData(0); // Use left channel\n const blockSize = Math.floor(channelData.length / samples);\n const peaks = [];\n\n for (let i = 0; i < samples; i++) {\n let max = 0;\n const start = i * blockSize;\n const end = start + blockSize;\n \n for (let j = start; j < end; j++) {\n const val = Math.abs(channelData[j]);\n if (val > max) max = val;\n }\n peaks.push(max);\n }\n \n // Normalize peaks to 0-1 range\n const maxPeak = Math.max(...peaks);\n return peaks.map(p => p / (maxPeak || 1));\n } catch (error) {\n console.error('PeakAnalyzer Error:', error);\n throw error;\n }\n }\n\n /**\n * Closes the AudioContext and releases system audio resources.\n */\n public dispose() {\n if (this.audioCtx) {\n this.audioCtx.close();\n this.audioCtx = null;\n }\n }\n}\n","import { PlayerCore, PlayerState } from './PlayerCore';\nimport { PeakAnalyzer } from './PeakAnalyzer';\n\n/**\n * Represents the complete state of the Waveframe controller, combining playback and analysis.\n */\nexport type EngineState = PlayerState & {\n /** The current set of generated or provided waveform peaks (0-1 range) */\n peaks: number[];\n /** Whether an audio analysis process is currently in progress */\n isAnalyzing: boolean;\n /** Any error message encountered during playback or analysis */\n error: string | null;\n};\n\n/**\n * A callback function that receives the latest EngineState.\n */\nexport type EngineListener = (state: EngineState) => void;\n\n/**\n * The orchestrator class for Waveframe. \n * \n * It manages the lifecycle of audio playback and waveform analysis, providing a unified \n * store-like interface that can be easily consumed by React or other frameworks.\n * \n * @example\n * ```typescript\n * const controller = new WaveframeController();\n * \n * // Load from URL (automatic analysis if peaks omitted)\n * controller.load('https://example.com/audio.mp3');\n * \n * // Load from Blob with pre-computed peaks\n * controller.load(myBlob, [0.1, 0.5, 0.8]);\n * \n * // Subscription\n * const unsubscribe = controller.subscribe((state) => {\n * console.log('Current time:', state.currentTime);\n * });\n * ```\n */\nexport class WaveframeController {\n private player: PlayerCore;\n private analyzer: PeakAnalyzer;\n private listeners: Set<EngineListener> = new Set();\n private _state: EngineState;\n\n private _media: string | Blob | null = null;\n private _objectUrl: string | null = null;\n private _isDisposed: boolean = false;\n\n /**\n * Creates a new instance of the WaveframeController.\n * Initializes internal PlayerCore and PeakAnalyzer.\n */\n constructor() {\n this.player = new PlayerCore();\n this.analyzer = new PeakAnalyzer();\n \n this._state = {\n ...this.player.state,\n peaks: [],\n isAnalyzing: false,\n error: null,\n };\n\n // Subscribe to player updates\n this.player.subscribe((playerState) => {\n this.updateState({ ...playerState });\n });\n }\n\n /**\n * Returns whether the controller has been disposed and is no longer usable.\n */\n public get isDisposed(): boolean {\n return this._isDisposed;\n }\n\n /**\n * Internal method to update the state and notify all subscribers.\n */\n private updateState(patch: Partial<EngineState>) {\n this._state = { ...this._state, ...patch };\n this.notify();\n }\n\n /**\n * Notifies all registered listeners of a state change.\n */\n private notify() {\n this.listeners.forEach(l => l(this._state));\n }\n\n // --- Store Interface ---\n\n /**\n * Registers a listener to be called whenever the engine state changes.\n * @param listener The callback function.\n * @returns An unsubscribe function.\n */\n public subscribe(listener: EngineListener) {\n this.listeners.add(listener);\n return () => this.listeners.delete(listener);\n }\n\n /**\n * Returns a snapshot of the current engine state.\n * Useful for `useSyncExternalStore`.\n */\n public getSnapshot(): EngineState {\n return this._state;\n }\n\n /**\n * Returns the current engine state.\n */\n public get state(): EngineState {\n return this._state;\n }\n\n // --- Actions ---\n\n /**\n * Resets the audio player and analyzer, clearing state and current media.\n */\n public reset() {\n this.revokeOldSource();\n this._media = null;\n this.player.dispose();\n this.analyzer.dispose();\n \n // Re-initialize player and analyzer\n this.player = new PlayerCore();\n this.analyzer = new PeakAnalyzer();\n\n // Re-subscribe to new player\n this.player.subscribe((playerState) => {\n this.updateState({ ...playerState });\n });\n\n this._isDisposed = false;\n this.updateState({\n ...this.player.state,\n peaks: [],\n isAnalyzing: false,\n error: null,\n });\n }\n\n /**\n * Revokes any existing Object URLs to prevent memory leaks.\n */\n private revokeOldSource() {\n if (this._objectUrl) {\n URL.revokeObjectURL(this._objectUrl);\n this._objectUrl = null;\n }\n }\n\n /**\n * Loads media (URL or Blob) into the player.\n * \n * If a string is passed, it's treated as a URL and used directly for playback.\n * If a Blob is passed, an Object URL is created for playback.\n * \n * If `peaks` are not provided, it automatically triggers an analysis.\n * \n * @param media The audio source (URL string or Blob/File object).\n * @param peaks Optional pre-generated peaks for the waveform.\n */\n public load(media: string | Blob, peaks?: number[]) {\n // Idempotency check: if media is the same, don't reload\n if (this._media === media) {\n if (peaks && (peaks.length !== this._state.peaks.length)) {\n this.updateState({ peaks });\n }\n return;\n }\n \n this.revokeOldSource();\n this._media = media;\n\n let sourceUrl: string;\n if (typeof media === 'string') {\n sourceUrl = media;\n } else {\n this._objectUrl = URL.createObjectURL(media);\n sourceUrl = this._objectUrl;\n }\n\n this.player.setSource(sourceUrl);\n \n const hasPeaks = peaks && peaks.length > 0;\n this.updateState({ \n peaks: peaks || [], \n isAnalyzing: false, \n error: null \n });\n\n // Automatic analysis if peaks are missing\n if (!hasPeaks) {\n this.analyze();\n }\n }\n\n /**\n * Analyzes the current media to generate waveform peaks.\n * @param samples The number of peaks to generate. Defaults to 512.\n */\n public async analyze(samples: number = 512) {\n if (!this._media) {\n this.updateState({ error: 'No media loaded to analyze' });\n return;\n }\n\n this.updateState({ isAnalyzing: true, error: null });\n try {\n const peaks = await this.analyzer.generatePeaks(this._media, samples);\n this.updateState({ peaks, isAnalyzing: false });\n } catch (e) {\n this.updateState({ \n isAnalyzing: false, \n error: e instanceof Error ? e.message : 'Analysis failed' \n });\n }\n }\n\n /**\n * Toggles playback between playing and paused.\n */\n public async togglePlay() {\n return await this.player.togglePlay();\n }\n\n /**\n * Starts audio playback.\n */\n public async play() {\n return await this.player.play();\n }\n\n /**\n * Pauses audio playback.\n */\n public pause() {\n this.player.pause();\n }\n\n /**\n * Seeks to a specific position in the track.\n * @param percentage The seek position as a decimal (0 to 1).\n */\n public seek(percentage: number) {\n const { duration } = this._state;\n if (duration) {\n this.player.seek(percentage * duration);\n }\n }\n\n /**\n * Sets the playback volume.\n * @param volume The volume level (0 to 1).\n */\n public setVolume(volume: number) {\n this.player.setVolume(volume);\n }\n\n /**\n * Mutes or unmutes the audio.\n * @param muted Whether the audio should be muted.\n */\n public setMuted(muted: boolean) {\n this.player.setMuted(muted);\n }\n\n /**\n * Disposes of the controller, pausing playback and clearing all listeners and resources.\n */\n public dispose() {\n this._isDisposed = true;\n this.revokeOldSource();\n this.player.dispose();\n this.analyzer.dispose();\n this.listeners.clear();\n }\n}\n","import { useSyncExternalStore } from 'react';\nimport { WaveframeController, EngineState } from '../core/WaveframeController';\n\n/**\n * A React hook that synchronizes a WaveframeController's state with a React component.\n * \n * It supports an optional selector function to subscribe to specific parts of the state,\n * preventing unnecessary re-renders when unrelated state changes.\n * \n * @param controller The WaveframeController instance to subscribe to.\n * @param selector An optional function to select a specific slice of the state.\n * @returns The selected state or the full EngineState if no selector is provided.\n * \n * @example\n * ```tsx\n * // Subscribe only to isPlaying\n * const isPlaying = useWaveframeStore(controller, state => state.isPlaying);\n * \n * // Subscribe to the full state\n * const state = useWaveframeStore(controller);\n * ```\n */\nexport function useWaveframeStore<T = EngineState>(\n controller: WaveframeController,\n selector?: (state: EngineState) => T\n): T {\n return useSyncExternalStore(\n (callback) => controller.subscribe(callback),\n () => {\n const state = controller.getSnapshot();\n return selector ? selector(state) : (state as unknown as T);\n }\n );\n}\n","import { useMemo, useEffect, useRef } from 'react';\nimport { WaveframeController } from '../core/WaveframeController';\nimport { useWaveframeStore } from './useWaveframeStore';\n\n/**\n * Configuration options for the `useWaveframe` hook.\n */\nexport interface UseWaveframeOptions {\n /** Optional pre-computed peaks to skip automatic analysis */\n peaks?: number[];\n /** Optional external controller instance for shared playback across components */\n controller?: WaveframeController;\n /** Whether to automatically start playback when media is loaded */\n autoPlay?: boolean;\n}\n\n/**\n * A headless hook that manages the lifecycle of a WaveframeController.\n * \n * It returns a stable controller instance that can be passed to components\n * like <Waveform /> or used for custom playback logic.\n * \n * @param media The audio source (URL string or Blob/File object).\n * @param options Additional configuration and an optional external controller.\n * \n * @example\n * ```tsx\n * const { controller, state } = useWaveframe('https://example.com/audio.mp3');\n * \n * return (\n * <div>\n * <Waveform controller={controller} />\n * <button onClick={() => controller.togglePlay()}>\n * {state.isPlaying ? 'Pause' : 'Play'}\n * </button>\n * </div>\n * );\n * ```\n */\nexport const useWaveframe = (\n media: string | Blob | undefined, \n options: UseWaveframeOptions = {}\n) => {\n const { peaks, controller: providedController, autoPlay } = options;\n const isMounted = useRef(false);\n\n // Initialize controller (only once)\n const internalController = useMemo(\n () => providedController || new WaveframeController(), \n [providedController]\n );\n const controller = providedController || internalController;\n\n // React 18 Strict Mode Fix:\n // If the component remounts, useMemo will return the same instance, but\n // the previous unmount's cleanup will have called dispose().\n // We check if it's disposed and reset it if so.\n useEffect(() => {\n if (!providedController && internalController.isDisposed) {\n internalController.reset();\n }\n }, [internalController, providedController]);\n\n // Get reactive state\n const state = useWaveframeStore(controller);\n\n // Sync media with controller\n useEffect(() => {\n isMounted.current = true;\n \n if (media) {\n controller.load(media, peaks);\n if (autoPlay) {\n controller.play().catch(() => {\n // Auto-play might be blocked by browser policy, ignore\n });\n }\n }\n\n return () => {\n isMounted.current = false;\n };\n }, [controller, media, peaks, autoPlay]);\n\n // Handle disposal\n useEffect(() => {\n return () => {\n // Only dispose if we created it internally\n if (!providedController) {\n internalController.dispose();\n }\n };\n }, [internalController, providedController]);\n\n return {\n /** The stable WaveframeController instance */\n controller,\n /** The reactive engine state */\n state,\n };\n};\n","import React, { memo } from 'react';\n\n/**\n * Props for the ArtworkOverlay component.\n */\ninterface ArtworkOverlayProps {\n /** The URL or Object URL of the artwork image */\n artworkUrl?: string;\n /** The title of the track (used for alt text) */\n title?: string;\n /** Whether the artwork is currently being processed or the audio is analyzing */\n isLoading?: boolean;\n}\n\n/**\n * A purely visual component for displaying track artwork.\n * \n * It handles loading states with a blur effect and provides a consistent \n * container for the track image.\n */\nexport const ArtworkOverlay: React.FC<ArtworkOverlayProps> = memo(({ \n artworkUrl, \n title, \n isLoading\n}) => {\n return (\n <div className=\"relative flex-shrink-0 w-full md:w-auto md:h-full aspect-square overflow-hidden rounded-[var(--wf-artwork-rounded,0.75rem)] shadow-lg group/artwork\">\n <div className={`w-full h-full transition-all duration-700 ${isLoading ? 'blur-md scale-110' : ''}`}>\n {artworkUrl ? (\n <img\n src={artworkUrl}\n alt={title}\n className=\"w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110\"\n />\n ) : (\n <div className=\"w-full h-full bg-gradient-to-br from-[var(--wf-placeholder-from,#fb923c)] to-[var(--wf-placeholder-to,#ec4899)] flex items-center justify-center\">\n <svg className=\"w-16 h-16 text-white opacity-50\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" />\n </svg>\n </div>\n )}\n </div>\n\n {isLoading && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]\">\n <div className=\"w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin\" />\n </div>\n )}\n </div>\n );\n});\n\nArtworkOverlay.displayName = 'ArtworkOverlay';\n","import { useState, useEffect } from 'react';\n\nexport const useResizeObserver = (ref: React.RefObject<HTMLElement | null>) => {\n const [width, setWidth] = useState(0);\n\n useEffect(() => {\n if (!ref.current) return;\n\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setWidth(entry.contentRect.width);\n }\n });\n\n observer.observe(ref.current);\n return () => observer.disconnect();\n }, [ref]);\n\n return width;\n};\n","/**\n * Advanced Audio Utilities using Web Audio API\n */\nimport { PeakAnalyzer } from '../core/PeakAnalyzer';\n\n/**\n * Loads audio from a URL, decodes it, and generates a specific number of peaks (samples).\n * \n * This is a high-level utility function that internally manages a `PeakAnalyzer` instance.\n * \n * @param audioUrl The URL of the audio file to analyze.\n * @param samples The number of peaks (bars) to generate. Defaults to 512.\n * @returns A promise resolving to an array of normalized peak values (0 to 1).\n * \n * @example\n * ```typescript\n * const peaks = await generatePeaks('https://example.com/audio.mp3', 256);\n * ```\n */\nexport const generatePeaks = async (audioUrl: string, samples: number = 512): Promise<number[]> => {\n const analyzer = new PeakAnalyzer();\n try {\n return await analyzer.generatePeaks(audioUrl, samples);\n } finally {\n analyzer.dispose();\n }\n};\n\n/**\n * Loads audio into memory as a Blob and returns a temporary Object URL.\n * \n * Useful for ensuring audio data is fully loaded locally before starting \n * playback or analysis, which can help with CORS issues or slow networks.\n * \n * @param url The URL of the remote audio file.\n * @returns A promise resolving to a temporary `blob:` URL.\n */\nexport const loadAudioToMemory = async (url: string): Promise<string> => {\n const response = await fetch(url);\n const blob = await response.blob();\n return URL.createObjectURL(blob);\n};\n\n/**\n * Cleanup function to prevent memory leaks from Object URLs.\n * \n * Call this when a `blob:` URL is no longer needed (e.g., when the component unmounts).\n * \n * @param url The Object URL to revoke.\n */\nexport const revokeAudioMemory = (url: string) => {\n if (url && url.startsWith('blob:')) {\n URL.revokeObjectURL(url);\n }\n};\n","/**\n * Formats seconds into a M:SS string\n */\nexport const formatTime = (seconds: number): string => {\n if (isNaN(seconds)) return '0:00';\n const min = Math.floor(seconds / 60);\n const sec = Math.floor(seconds % 60);\n return `${min}:${sec.toString().padStart(2, '0')}`;\n};\n\n/**\n * Resamples an array of peaks to a target count using bucket-max or linear interpolation\n */\nexport const resamplePeaks = (peaks: number[], targetCount: number): number[] => {\n if (peaks.length === 0) return [];\n if (peaks.length === targetCount) return peaks;\n\n const resampled = new Array(targetCount);\n const ratio = peaks.length / targetCount;\n\n if (ratio > 1) {\n // Downsampling: Bucket Max\n for (let i = 0; i < targetCount; i++) {\n let max = 0;\n const start = Math.floor(i * ratio);\n const end = Math.floor((i + 1) * ratio);\n for (let j = start; j < end; j++) {\n if (peaks[j] > max) max = peaks[j];\n }\n resampled[i] = max;\n }\n } else {\n // Upsampling: Linear Interpolation\n for (let i = 0; i < targetCount; i++) {\n const position = i * ratio;\n const index = Math.floor(position);\n const nextIndex = Math.min(index + 1, peaks.length - 1);\n const fraction = position - index;\n resampled[i] = peaks[index] + (peaks[nextIndex] - peaks[index]) * fraction;\n }\n }\n return resampled;\n};\n\n/**\n * High-performance token-based syntax highlighter for React snippets\n */\nexport const highlightCode = (code: string): string[] => {\n return code.split('\\n').map((line) => {\n // 1. Escape basic HTML\n let h = line.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n // 2. Identify and tokenize segments to avoid nested replacement issues\n const tokens: { [key: string]: string } = {};\n let counter = 0;\n const addToken = (val: string, cls: string) => {\n const id = `__TOKEN_${counter++}__`;\n tokens[id] = `<span class=\"${cls}\">${val}</span>`;\n return id;\n };\n\n // Strings\n h = h.replace(/(\"(?:[^\"\\\\]|\\\\.)*\")/g, (m) => addToken(m, 'text-[#ce9178]'));\n // Numbers\n h = h.replace(/\\b(\\d+(\\.\\d+)?)\\b/g, (m) => addToken(m, 'text-[#b5cea8]'));\n // Component Name\n h = h.replace(/\\b(WaveframePlayer)\\b/g, (m) => addToken(m, 'text-[#4ec9b0]'));\n // Props (anything followed by =)\n h = h.replace(/\\b([a-z][a-zA-Z0-9]+)(?==)/g, (m) => addToken(m, 'text-[#9cdcfe]'));\n\n // 3. Style remaining symbols\n h = h.replace(/(<|>|\\{|\\}|\\/|:|,)/g, '<span class=\"text-gray-500\">$1</span>');\n\n // 4. In-place token resolution\n Object.entries(tokens).forEach(([id, html]) => {\n h = h.replace(id, html);\n });\n\n return h;\n });\n};\n\nexport * from './audio';\n","import React, { useRef, useEffect, memo, useMemo } from 'react';\nimport { useResizeObserver } from '../hooks/useResizeObserver';\nimport { WaveframeController } from '../core/WaveframeController';\nimport { useWaveframeStore } from '../hooks/useWaveframeStore';\nimport { resamplePeaks } from '../utils';\n\ninterface WaveformProps {\n /** The WaveframeController instance managing audio state */\n controller: WaveframeController;\n /** Optional pre-computed peaks. If omitted, peaks from the controller are used. */\n peaks?: number[];\n /** Color of the background waveform bars */\n waveColor?: string;\n /** Color of the progress (played) waveform bars */\n progressColor?: string;\n /** Total height of the waveform in pixels */\n height?: number;\n /** \n * Resolution of the waveform. \n * 'auto' matches the container width (1 bar per pixel).\n * A number sets a fixed number of bars.\n */\n resolution?: number | 'auto';\n /** Width of each bar in pixels (if resolution is 'auto') */\n barWidth?: number;\n /** Gap between bars in pixels (if resolution is 'auto') */\n barGap?: number;\n /** Overall amplitude multiplier (default 1.0) */\n amplitude?: number;\n /** Non-linear power scale to increase detail (e.g. 0.7-0.9 reduces 'sausage' look). Default 1.0 (linear). */\n powerScale?: number;\n}\n\n/**\n * A \"smart\" waveform component that visualizes audio progress and allows seeking.\n * \n * It subscribes directly to the provided WaveframeController for high-frequency\n * progress updates, ensuring the parent component remains immune to re-renders.\n */\nexport const Waveform: React.FC<WaveformProps> = memo(({\n controller,\n peaks: providedPeaks,\n waveColor = '#e5e7eb',\n progressColor = '#3b82f6',\n height = 80,\n resolution = 'auto',\n barWidth = 2,\n barGap = 1,\n amplitude = 1.0,\n powerScale = 1.0,\n}) => {\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const progressCanvasRef = useRef<HTMLCanvasElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = useResizeObserver(containerRef);\n\n // Subscribe only to needed state slices\n const currentTime = useWaveframeStore(controller, s => s.currentTime);\n const duration = useWaveframeStore(controller, s => s.duration);\n const enginePeaks = useWaveframeStore(controller, s => s.peaks);\n\n // Determine which peaks to use and resample them\n const peaks = useMemo(() => {\n const rawPeaks = providedPeaks || enginePeaks;\n if (rawPeaks.length === 0) return [];\n \n const targetCount = resolution === 'auto' \n ? Math.floor(containerWidth / (barWidth + barGap))\n : resolution;\n \n let resampled = resamplePeaks(rawPeaks, Math.max(1, targetCount));\n\n // Apply power scaling and amplitude\n if (powerScale !== 1.0 || amplitude !== 1.0) {\n resampled = resampled.map(p => Math.pow(p, powerScale) * amplitude);\n }\n\n return resampled;\n }, [providedPeaks, enginePeaks, containerWidth, resolution, barWidth, barGap, amplitude, powerScale]);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const progressCanvas = progressCanvasRef.current;\n if (!canvas || !progressCanvas) return;\n\n const ctx = canvas.getContext('2d');\n const pCtx = progressCanvas.getContext('2d');\n if (!ctx || !pCtx) return;\n\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.getBoundingClientRect();\n const targetWidth = rect.width * dpr;\n const targetHeight = rect.height * dpr;\n\n [canvas, progressCanvas].forEach(c => {\n if (c.width !== targetWidth || c.height !== targetHeight) {\n c.width = targetWidth;\n c.height = targetHeight;\n }\n });\n\n const draw = () => {\n if (peaks.length === 0) return;\n const { width, height } = canvas;\n \n ctx.clearRect(0, 0, width, height);\n pCtx.clearRect(0, 0, width, height);\n\n const barCount = peaks.length;\n const actualBarTotalWidth = width / barCount;\n const actualBarWidth = typeof resolution === 'number' \n ? actualBarTotalWidth * 0.7 \n : barWidth * dpr;\n const actualBarGap = typeof resolution === 'number'\n ? actualBarTotalWidth * 0.3\n : barGap * dpr;\n\n ctx.lineCap = 'round';\n ctx.lineWidth = actualBarWidth;\n pCtx.lineCap = 'round';\n pCtx.lineWidth = actualBarWidth;\n\n const centerY = height / 2;\n\n peaks.forEach((peak, index) => {\n if (peak <= 0) return;\n \n const x = index * (actualBarWidth + actualBarGap) + actualBarWidth / 2;\n const barHeight = Math.max(actualBarWidth, peak * height * 0.8);\n \n // Center the bar vertically\n const yStart = centerY - barHeight / 2;\n const yEnd = centerY + barHeight / 2;\n\n ctx.beginPath();\n ctx.strokeStyle = waveColor;\n ctx.moveTo(x, yStart);\n ctx.lineTo(x, yEnd);\n ctx.stroke();\n\n pCtx.beginPath();\n pCtx.strokeStyle = progressColor;\n pCtx.moveTo(x, yStart);\n pCtx.lineTo(x, yEnd);\n pCtx.stroke();\n });\n };\n\n draw();\n }, [peaks, waveColor, progressColor, resolution, barWidth, barGap, height]);\n\n const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {\n if (containerRef.current && duration) {\n const rect = containerRef.current.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const percentage = Math.max(0, Math.min(1, x / rect.width));\n controller.seek(percentage);\n }\n };\n\n const progressPercent = duration ? (currentTime / duration) * 100 : 0;\n\n return (\n <div \n ref={containerRef} \n className=\"relative w-full cursor-pointer overflow-hidden\" \n style={{ \n height: `${height}px`,\n // Using CSS variables for easier theming if needed externally\n '--wf-wave-color': waveColor,\n '--wf-progress-color': progressColor,\n } as React.CSSProperties}\n onClick={handleSeek}\n >\n <canvas ref={canvasRef} className=\"absolute inset-0 w-full h-full\" />\n <div \n className=\"absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none\"\n style={{ width: `${progressPercent}%` }}\n >\n <canvas ref={progressCanvasRef} className=\"absolute h-full\" style={{ width: `${containerWidth}px` }} />\n </div>\n </div>\n );\n});\n\nWaveform.displayName = 'Waveform';\n","import React, { memo, useState, useEffect, useMemo } from 'react';\nimport { WaveframeTheme } from '../types';\nimport { WaveframeController } from '../core/WaveframeController';\nimport { useWaveframe } from '../hooks/useWaveframe';\nimport { useWaveframeStore } from '../hooks/useWaveframeStore';\nimport { ArtworkOverlay } from '../molecules/ArtworkOverlay';\nimport { Waveform } from '../organisms/Waveform';\nimport { formatTime } from '../utils';\n\n/**\n * Props for the WaveframePlayer component\n */\nexport interface WaveframePlayerProps {\n /**\n * The audio source to play. Can be a URL string or a Blob/File object.\n */\n media?: string | Blob;\n /**\n * Optional pre-generated peaks for the waveform (0-1 range).\n * If omitted or empty, the player will automatically analyze the media.\n */\n peaks?: number[];\n /**\n * The artwork source to display. Can be a URL string or a Blob/File object.\n */\n artwork?: string | Blob;\n /**\n * The title of the track\n */\n title?: string;\n /**\n * The artist of the track\n */\n artist?: string;\n /**\n * The base color of the waveform bars\n * @default \"#e5e7eb\" (light) or \"#374151\" (dark)\n */\n waveColor?: string;\n /**\n * The color of the played progress part of the waveform\n * @default theme.primary or \"#3b82f6\"\n */\n progressColor?: string;\n /**\n * The height of the waveform in pixels\n * @default 80\n */\n height?: number;\n /**\n * Additional CSS classes for the container\n */\n className?: string;\n /**\n * Inline styles for the container\n */\n style?: React.CSSProperties;\n /**\n * The number of bars to render. Use 'auto' to fit the container width.\n * @default \"auto\"\n */\n resolution?: number | 'auto';\n /**\n * The width of each bar in pixels (if resolution is 'auto')\n * @default 2\n */\n barWidth?: number;\n /**\n * The gap between bars in pixels (if resolution is 'auto')\n * @default 1\n */\n barGap?: number;\n /**\n * Custom theme configuration\n */\n theme?: WaveframeTheme;\n /**\n * Optional WaveframeController instance for external control.\n * If provided, the player will sync with this controller instead of creating its own.\n */\n controller?: WaveframeController;\n}\n\n/**\n * The standard \"all-in-one\" Waveframe player component.\n * \n * This component features a SoundCloud-inspired layout with a prominent \n * play/pause button positioned next to the track metadata.\n */\nexport const WaveframePlayer: React.FC<WaveframePlayerProps> = memo(({\n media,\n peaks: propPeaks,\n artwork,\n title,\n artist,\n waveColor: propWaveColor,\n progressColor: propProgressColor,\n height = 80,\n className = '',\n style: propStyle,\n resolution = 'auto',\n barWidth = 2,\n barGap = 1,\n theme,\n controller: providedController,\n}) => {\n // Use the headless hook for controller management\n const { controller } = useWaveframe(media, {\n peaks: propPeaks,\n controller: providedController,\n });\n\n // Subscribe to needed state slices for the UI\n const isPlaying = useWaveframeStore(controller, s => s.isPlaying);\n const isAnalyzing = useWaveframeStore(controller, s => s.isAnalyzing);\n const currentTime = useWaveframeStore(controller, s => s.currentTime);\n const duration = useWaveframeStore(controller, s => s.duration);\n\n // Handle Artwork Blob -> Object URL\n const [resolvedArtworkUrl, setResolvedArtworkUrl] = useState<string | undefined>(\n typeof artwork === 'string' ? artwork : undefined\n );\n\n useEffect(() => {\n if (artwork instanceof Blob) {\n const url = URL.createObjectURL(artwork);\n setResolvedArtworkUrl(url);\n return () => URL.revokeObjectURL(url);\n } else {\n setResolvedArtworkUrl(artwork);\n }\n }, [artwork]);\n\n const waveColor = useMemo(() => {\n if (propWaveColor) return propWaveColor;\n if (theme) return theme.bg === '#ffffff' ? '#e5e7eb' : '#374151';\n return '#e5e7eb';\n }, [propWaveColor, theme]);\n\n const progressColor = propProgressColor || theme?.primary || '#3b82f6';\n\n const mergedStyle = useMemo(() => {\n const baseStyle = {\n '--wf-bg-color': theme?.bg || 'white',\n '--wf-border-color': theme?.border || '#f3f4f6',\n '--wf-title-color': theme?.text || '#111827',\n '--wf-artist-color': theme?.text || '#6b7280',\n '--wf-time-color': theme?.text || '#9ca3af',\n '--wf-play-btn-bg': theme?.primary || '#3b82f6',\n '--wf-placeholder-from': theme?.primary || '#fb923c',\n '--wf-placeholder-to': theme?.bg || '#ec4899',\n };\n return { ...baseStyle, ...propStyle } as React.CSSProperties;\n }, [theme, propStyle]);\n\n return (\n <div\n className={`group relative flex flex-col md:flex-row items-stretch gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${className}`}\n style={mergedStyle}\n >\n <div className=\"flex-shrink-0\">\n <ArtworkOverlay \n artworkUrl={resolvedArtworkUrl} \n title={title} \n isLoading={isAnalyzing}\n />\n </div>\n\n <div className=\"flex-1 w-full flex flex-col min-w-0\">\n <div className=\"flex items-center gap-4 mb-6\">\n {/* SoundCloud-style circular play button */}\n <button\n onClick={() => controller.togglePlay()}\n className=\"w-12 h-12 md:w-14 md:h-14 flex-shrink-0 flex items-center justify-center rounded-full bg-[var(--wf-play-btn-bg,#3b82f6)] text-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.2)] transition-all hover:scale-105 active:scale-95 cursor-pointer border-none outline-none group/play\"\n >\n {isPlaying ? (\n <svg className=\"w-6 h-6 md:w-7 md:h-7\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\" />\n </svg>\n ) : (\n <svg className=\"w-6 h-6 md:w-7 md:h-7 ml-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n )}\n </button>\n\n <div className=\"flex-1 flex flex-col min-w-0\">\n <div className=\"flex items-center justify-between gap-4\">\n {artist && (\n <p className=\"text-[10px] md:text-xs font-bold uppercase text-[var(--wf-artist-color,#6b7280)] opacity-60 tracking-[0.1em] line-clamp-1\">\n {artist}\n </p>\n )}\n <div className=\"text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0\">\n {formatTime(currentTime)} / {formatTime(duration)}\n </div>\n </div>\n {title && (\n <h3 className=\"text-lg md:text-xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1 mt-0.5 leading-tight\">\n {title}\n </h3>\n )}\n </div>\n </div>\n\n <div className=\"mt-auto\">\n <Waveform \n controller={controller}\n peaks={propPeaks}\n waveColor={waveColor}\n progressColor={progressColor}\n height={height}\n resolution={resolution}\n barWidth={barWidth}\n barGap={barGap}\n />\n </div>\n </div>\n </div>\n );\n});\n\nWaveframePlayer.displayName = 'WaveframePlayer';\n","import { useMemo } from 'react';\nimport { resamplePeaks } from '../utils';\n\nexport const useResampledPeaks = (peaks: number[], targetCount: number) => {\n return useMemo(() => resamplePeaks(peaks, targetCount), [peaks, targetCount]);\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/core/PlayerCore.ts","../src/core/PeakAnalyzer.ts","../src/core/WaveframeController.ts","../src/hooks/useWaveframeStore.ts","../src/hooks/useWaveframe.ts","../src/molecules/ArtworkOverlay.tsx","../src/hooks/useResizeObserver.ts","../src/utils/audio.ts","../src/utils/index.ts","../src/organisms/Waveform.tsx","../src/components/WaveframePlayer.tsx","../src/hooks/useResampledPeaks.ts"],"names":["PlayerCore","error","message","patch","l","listener","url","e","time","volume","muted","PeakAnalyzer","media","samples","arrayBuffer","response","channelData","blockSize","peaks","i","max","start","end","j","val","maxPeak","p","WaveframeController","playerState","sourceUrl","hasPeaks","percentage","duration","useWaveframeStore","controller","selector","useSyncExternalStore","callback","state","useWaveframe","options","providedController","autoPlay","isMounted","useRef","internalController","useMemo","useEffect","ArtworkOverlay","memo","artworkUrl","title","isLoading","jsxs","jsx","useResizeObserver","ref","width","setWidth","useState","observer","entries","entry","generatePeaks","audioUrl","analyzer","loadAudioToMemory","blob","revokeAudioMemory","formatTime","seconds","min","sec","resamplePeaks","targetCount","resampled","ratio","sumSquares","count","position","index","nextIndex","fraction","highlightCode","code","line","h","tokens","counter","addToken","cls","id","m","html","Waveform","providedPeaks","waveColor","progressColor","height","resolution","barWidth","barGap","amplitude","powerScale","canvasRef","progressCanvasRef","containerRef","containerWidth","currentTime","s","enginePeaks","rawPeaks","canvas","progressCanvas","ctx","pCtx","dpr","rect","targetWidth","targetHeight","c","barCount","actualBarTotalWidth","actualBarWidth","actualBarGap","centerY","peak","x","barHeight","yStart","yEnd","handleSeek","progressPercent","WaveframePlayer","propPeaks","artwork","artist","propWaveColor","propProgressColor","className","propStyle","theme","isPlaying","isAnalyzing","resolvedArtworkUrl","setResolvedArtworkUrl","mergedStyle","useResampledPeaks"],"mappings":"gFA+BO,IAAMA,EAAN,KAAiB,CACd,MACA,SAAA,CAAiC,IAAI,IACrC,MAAA,CAKR,WAAA,EAAc,CACZ,IAAA,CAAK,KAAA,CAAQ,IAAI,KAAA,CACjB,IAAA,CAAK,OAAS,CACZ,SAAA,CAAW,MACX,SAAA,CAAW,KAAA,CACX,YAAa,CAAA,CACb,QAAA,CAAU,EACV,MAAA,CAAQ,CAAA,CACR,MAAO,KAAA,CACP,KAAA,CAAO,IACT,CAAA,CAEA,IAAA,CAAK,gBACP,CAKQ,eAAgB,CACtB,IAAA,CAAK,MAAM,gBAAA,CAAiB,MAAA,CAAQ,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,SAAA,CAAW,IAAA,CAAM,MAAO,IAAK,CAAC,CAAC,CAAA,CAC5F,IAAA,CAAK,MAAM,gBAAA,CAAiB,OAAA,CAAS,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,SAAA,CAAW,KAAM,CAAC,CAAC,CAAA,CACjF,KAAK,KAAA,CAAM,gBAAA,CAAiB,UAAW,IAAM,IAAA,CAAK,YAAY,CAAE,SAAA,CAAW,IAAK,CAAC,CAAC,CAAA,CAClF,IAAA,CAAK,MAAM,gBAAA,CAAiB,SAAA,CAAW,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,SAAA,CAAW,KAAM,CAAC,CAAC,CAAA,CACnF,KAAK,KAAA,CAAM,gBAAA,CAAiB,UAAW,IAAM,IAAA,CAAK,YAAY,CAAE,SAAA,CAAW,KAAM,CAAC,CAAC,EACnF,IAAA,CAAK,KAAA,CAAM,iBAAiB,YAAA,CAAc,IAAM,KAAK,WAAA,CAAY,CAAE,YAAa,IAAA,CAAK,KAAA,CAAM,WAAY,CAAC,CAAC,EACzG,IAAA,CAAK,KAAA,CAAM,iBAAiB,gBAAA,CAAkB,IAAM,KAAK,WAAA,CAAY,CAAE,SAAU,IAAA,CAAK,KAAA,CAAM,QAAS,CAAC,CAAC,EACvG,IAAA,CAAK,KAAA,CAAM,iBAAiB,cAAA,CAAgB,IAAM,KAAK,WAAA,CAAY,CACjE,OAAQ,IAAA,CAAK,KAAA,CAAM,OACnB,KAAA,CAAO,IAAA,CAAK,MAAM,KACpB,CAAC,CAAC,CAAA,CACF,IAAA,CAAK,MAAM,gBAAA,CAAiB,OAAA,CAAS,IAAM,IAAA,CAAK,WAAA,CAAY,CAAE,SAAA,CAAW,KAAM,CAAC,CAAC,CAAA,CACjF,KAAK,KAAA,CAAM,gBAAA,CAAiB,OAAA,CAAS,IAAM,CACzC,IAAMC,CAAAA,CAAQ,KAAK,KAAA,CAAM,KAAA,CACrBC,EAAU,qBAAA,CACd,GAAID,EACF,OAAQA,CAAAA,CAAM,MACZ,KAAKA,EAAM,iBAAA,CAAmBC,CAAAA,CAAU,mBAAoB,MAC5D,KAAKD,EAAM,iBAAA,CAAmBC,CAAAA,CAAU,gBAAiB,MACzD,KAAKD,EAAM,gBAAA,CAAkBC,CAAAA,CAAU,wBAAyB,MAChE,KAAKD,EAAM,2BAAA,CAA6BC,CAAAA,CAAU,6BAA8B,KAClF,CAEF,KAAK,WAAA,CAAY,CAAE,UAAW,KAAA,CAAO,KAAA,CAAOA,CAAQ,CAAC,EACvD,CAAC,EACH,CAKQ,YAAYC,CAAAA,CAA6B,CAC/C,KAAK,MAAA,CAAS,CAAE,GAAG,IAAA,CAAK,MAAA,CAAQ,GAAGA,CAAM,CAAA,CACzC,KAAK,MAAA,GACP,CAKQ,MAAA,EAAS,CACf,KAAK,SAAA,CAAU,OAAA,CAAQC,GAAKA,CAAAA,CAAE,IAAA,CAAK,MAAM,CAAC,EAC5C,CAOO,SAAA,CAAUC,CAAAA,CAA0B,CACzC,OAAA,IAAA,CAAK,SAAA,CAAU,IAAIA,CAAQ,CAAA,CACpB,IAAM,IAAA,CAAK,SAAA,CAAU,OAAOA,CAAQ,CAC7C,CAKA,IAAW,KAAA,EAAQ,CACjB,OAAO,IAAA,CAAK,MACd,CAMO,SAAA,CAAUC,EAAa,CAC5B,IAAA,CAAK,MAAM,GAAA,CAAMA,CAAAA,CACjB,KAAK,KAAA,CAAM,IAAA,GACX,IAAA,CAAK,WAAA,CAAY,CAAE,KAAA,CAAO,IAAA,CAAM,YAAa,CAAA,CAAG,QAAA,CAAU,CAAE,CAAC,EAC/D,CAKA,MAAa,IAAA,EAAO,CAClB,GAAI,CACF,MAAM,IAAA,CAAK,KAAA,CAAM,OACnB,CAAA,MAASC,EAAG,CACV,IAAML,EAAUK,CAAAA,YAAa,KAAA,CAAQA,EAAE,OAAA,CAAU,iBAAA,CACjD,WAAK,WAAA,CAAY,CAAE,UAAW,KAAA,CAAO,KAAA,CAAOL,CAAQ,CAAC,CAAA,CAC/CK,CACR,CACF,CAKO,OAAQ,CACb,IAAA,CAAK,MAAM,KAAA,GACb,CAKA,MAAa,UAAA,EAAa,CACxB,GAAI,IAAA,CAAK,OAAO,SAAA,CACd,IAAA,CAAK,OAAM,CAAA,KAEX,GAAI,CACF,MAAM,IAAA,CAAK,OACb,CAAA,KAAQ,CAER,CAEJ,CAMO,KAAKC,CAAAA,CAAc,CACxB,KAAK,KAAA,CAAM,WAAA,CAAcA,EAC3B,CAMO,UAAUC,CAAAA,CAAgB,CAC/B,KAAK,KAAA,CAAM,MAAA,CAASA,EACtB,CAMO,QAAA,CAASC,EAAgB,CAC9B,IAAA,CAAK,MAAM,KAAA,CAAQA,EACrB,CAKO,OAAA,EAAU,CACf,KAAK,KAAA,EAAM,CACX,KAAK,KAAA,CAAM,GAAA,CAAM,GACjB,IAAA,CAAK,SAAA,CAAU,QACjB,CACF,EC5LO,IAAMC,CAAAA,CAAN,KAAmB,CAChB,QAAA,CAAgC,KAMxC,WAAA,EAAc,CAAC,CAKP,UAAA,EAA2B,CACjC,OAAK,IAAA,CAAK,QAAA,GACR,KAAK,QAAA,CAAW,IAAK,OAAO,YAAA,EAAiB,MAAA,CAAe,qBAEvD,IAAA,CAAK,QACd,CAoBA,MAAa,aAAA,CAAcC,EAAsBC,CAAAA,CAAkB,GAAA,CAAwB,CACzF,GAAI,CACF,IAAIC,CAAAA,CAEJ,GAAI,OAAOF,CAAAA,EAAU,QAAA,CAAU,CAC7B,IAAMG,CAAAA,CAAW,MAAM,KAAA,CAAMH,CAAK,EAClC,GAAI,CAACG,EAAS,EAAA,CAAI,MAAM,IAAI,KAAA,CAAM,CAAA,uBAAA,EAA0BA,EAAS,UAAU,CAAA,CAAE,EACjFD,CAAAA,CAAc,MAAMC,EAAS,WAAA,GAC/B,MACED,CAAAA,CAAc,MAAMF,EAAM,WAAA,EAAY,CAMxC,IAAMI,CAAAA,CAAAA,CAFc,MADH,KAAK,UAAA,EAAW,CACE,gBAAgBF,CAAW,CAAA,EAE9B,eAAe,CAAC,CAAA,CAC1CG,EAAY,IAAA,CAAK,KAAA,CAAMD,EAAY,MAAA,CAASH,CAAO,EACnDK,CAAAA,CAAQ,GAEd,IAAA,IAASC,CAAAA,CAAI,EAAGA,CAAAA,CAAIN,CAAAA,CAASM,IAAK,CAChC,IAAIC,EAAM,CAAA,CACJC,CAAAA,CAAQF,EAAIF,CAAAA,CACZK,CAAAA,CAAMD,EAAQJ,CAAAA,CAEpB,IAAA,IAASM,EAAIF,CAAAA,CAAOE,CAAAA,CAAID,EAAKC,CAAAA,EAAAA,CAAK,CAChC,IAAMC,CAAAA,CAAM,IAAA,CAAK,IAAIR,CAAAA,CAAYO,CAAC,CAAC,CAAA,CAC/BC,CAAAA,CAAMJ,IAAKA,CAAAA,CAAMI,CAAAA,EACvB,CACAN,CAAAA,CAAM,IAAA,CAAKE,CAAG,EAChB,CAGA,IAAMK,CAAAA,CAAU,IAAA,CAAK,IAAI,GAAGP,CAAK,EACjC,OAAOA,CAAAA,CAAM,IAAIQ,CAAAA,EAAKA,CAAAA,EAAKD,GAAW,CAAA,CAAE,CAC1C,OAASxB,CAAAA,CAAO,CACd,cAAQ,KAAA,CAAM,qBAAA,CAAuBA,CAAK,CAAA,CACpCA,CACR,CACF,CAKO,OAAA,EAAU,CACX,IAAA,CAAK,WACP,IAAA,CAAK,QAAA,CAAS,OAAM,CACpB,IAAA,CAAK,SAAW,IAAA,EAEpB,CACF,EClDO,IAAM0B,CAAAA,CAAN,KAA0B,CACvB,MAAA,CACA,SACA,SAAA,CAAiC,IAAI,IACrC,MAAA,CAEA,MAAA,CAA+B,KAC/B,UAAA,CAA4B,IAAA,CAC5B,YAAuB,KAAA,CAM/B,WAAA,EAAc,CACZ,IAAA,CAAK,MAAA,CAAS,IAAI3B,CAAAA,CAClB,IAAA,CAAK,SAAW,IAAIW,CAAAA,CAEpB,KAAK,MAAA,CAAS,CACZ,GAAG,IAAA,CAAK,MAAA,CAAO,MACf,KAAA,CAAO,GACP,WAAA,CAAa,KAAA,CACb,MAAO,IACT,CAAA,CAGA,KAAK,MAAA,CAAO,SAAA,CAAWiB,GAAgB,CACrC,IAAA,CAAK,YAAY,CAAE,GAAGA,CAAY,CAAC,EACrC,CAAC,EACH,CAKA,IAAW,UAAA,EAAsB,CAC/B,OAAO,IAAA,CAAK,WACd,CAKQ,WAAA,CAAYzB,CAAAA,CAA6B,CAC/C,IAAA,CAAK,MAAA,CAAS,CAAE,GAAG,IAAA,CAAK,OAAQ,GAAGA,CAAM,EACzC,IAAA,CAAK,MAAA,GACP,CAKQ,MAAA,EAAS,CACf,IAAA,CAAK,SAAA,CAAU,QAAQC,CAAAA,EAAKA,CAAAA,CAAE,KAAK,MAAM,CAAC,EAC5C,CASO,SAAA,CAAUC,EAA0B,CACzC,OAAA,IAAA,CAAK,UAAU,GAAA,CAAIA,CAAQ,EACpB,IAAM,IAAA,CAAK,UAAU,MAAA,CAAOA,CAAQ,CAC7C,CAMO,WAAA,EAA2B,CAChC,OAAO,IAAA,CAAK,MACd,CAKA,IAAW,OAAqB,CAC9B,OAAO,KAAK,MACd,CAOO,OAAQ,CACb,IAAA,CAAK,iBAAgB,CACrB,IAAA,CAAK,OAAS,IAAA,CACd,IAAA,CAAK,OAAO,OAAA,EAAQ,CACpB,KAAK,QAAA,CAAS,OAAA,GAGd,IAAA,CAAK,MAAA,CAAS,IAAIL,CAAAA,CAClB,IAAA,CAAK,SAAW,IAAIW,CAAAA,CAGpB,KAAK,MAAA,CAAO,SAAA,CAAWiB,GAAgB,CACrC,IAAA,CAAK,YAAY,CAAE,GAAGA,CAAY,CAAC,EACrC,CAAC,CAAA,CAED,IAAA,CAAK,YAAc,KAAA,CACnB,IAAA,CAAK,YAAY,CACf,GAAG,KAAK,MAAA,CAAO,KAAA,CACf,MAAO,EAAC,CACR,YAAa,KAAA,CACb,KAAA,CAAO,IACT,CAAC,EACH,CAKQ,eAAA,EAAkB,CACpB,IAAA,CAAK,UAAA,GACP,IAAI,eAAA,CAAgB,IAAA,CAAK,UAAU,CAAA,CACnC,IAAA,CAAK,WAAa,IAAA,EAEtB,CAaO,KAAKhB,CAAAA,CAAsBM,CAAAA,CAAkB,CAElD,GAAI,IAAA,CAAK,SAAWN,CAAAA,CAAO,CACrBM,GAAUA,CAAAA,CAAM,MAAA,GAAW,KAAK,MAAA,CAAO,KAAA,CAAM,QAC/C,IAAA,CAAK,WAAA,CAAY,CAAE,KAAA,CAAAA,CAAM,CAAC,CAAA,CAE5B,MACF,CAEA,IAAA,CAAK,eAAA,GACL,IAAA,CAAK,MAAA,CAASN,EAEd,IAAIiB,CAAAA,CACA,OAAOjB,CAAAA,EAAU,QAAA,CACnBiB,EAAYjB,CAAAA,EAEZ,IAAA,CAAK,WAAa,GAAA,CAAI,eAAA,CAAgBA,CAAK,CAAA,CAC3CiB,CAAAA,CAAY,KAAK,UAAA,CAAA,CAGnB,IAAA,CAAK,OAAO,SAAA,CAAUA,CAAS,EAE/B,IAAMC,CAAAA,CAAWZ,GAASA,CAAAA,CAAM,MAAA,CAAS,EACzC,IAAA,CAAK,WAAA,CAAY,CACf,KAAA,CAAOA,CAAAA,EAAS,EAAC,CACjB,WAAA,CAAa,MACb,KAAA,CAAO,IACT,CAAC,CAAA,CAGIY,CAAAA,EACH,KAAK,OAAA,GAET,CAMA,MAAa,OAAA,CAAQjB,EAAkB,GAAA,CAAK,CAC1C,GAAI,CAAC,IAAA,CAAK,OAAQ,CAChB,IAAA,CAAK,YAAY,CAAE,KAAA,CAAO,4BAA6B,CAAC,CAAA,CACxD,MACF,CAEA,IAAA,CAAK,YAAY,CAAE,WAAA,CAAa,KAAM,KAAA,CAAO,IAAK,CAAC,CAAA,CACnD,GAAI,CACF,IAAMK,CAAAA,CAAQ,MAAM,IAAA,CAAK,QAAA,CAAS,cAAc,IAAA,CAAK,MAAA,CAAQL,CAAO,CAAA,CACpE,IAAA,CAAK,YAAY,CAAE,KAAA,CAAAK,EAAO,WAAA,CAAa,CAAA,CAAM,CAAC,EAChD,CAAA,MAAS,EAAG,CACV,IAAA,CAAK,YAAY,CACf,WAAA,CAAa,MACb,KAAA,CAAO,CAAA,YAAa,MAAQ,CAAA,CAAE,OAAA,CAAU,iBAC1C,CAAC,EACH,CACF,CAKA,MAAa,YAAa,CACxB,OAAO,MAAM,IAAA,CAAK,MAAA,CAAO,YAC3B,CAKA,MAAa,IAAA,EAAO,CAClB,OAAO,MAAM,IAAA,CAAK,OAAO,IAAA,EAC3B,CAKO,KAAA,EAAQ,CACb,KAAK,MAAA,CAAO,KAAA,GACd,CAMO,IAAA,CAAKa,EAAoB,CAC9B,GAAM,CAAE,QAAA,CAAAC,CAAS,EAAI,IAAA,CAAK,MAAA,CACtBA,CAAAA,EACF,IAAA,CAAK,OAAO,IAAA,CAAKD,CAAAA,CAAaC,CAAQ,EAE1C,CAMO,UAAUvB,CAAAA,CAAgB,CAC/B,KAAK,MAAA,CAAO,SAAA,CAAUA,CAAM,EAC9B,CAMO,SAASC,CAAAA,CAAgB,CAC9B,KAAK,MAAA,CAAO,QAAA,CAASA,CAAK,EAC5B,CAKO,SAAU,CACf,IAAA,CAAK,YAAc,IAAA,CACnB,IAAA,CAAK,iBAAgB,CACrB,IAAA,CAAK,OAAO,OAAA,EAAQ,CACpB,KAAK,QAAA,CAAS,OAAA,GACd,IAAA,CAAK,SAAA,CAAU,QACjB,CACF,ECzQO,SAASuB,EACdC,CAAAA,CACAC,CAAAA,CACG,CACH,OAAOC,0BAAAA,CACJC,GAAaH,CAAAA,CAAW,SAAA,CAAUG,CAAQ,CAAA,CAC3C,IAAM,CACJ,IAAMC,CAAAA,CAAQJ,EAAW,WAAA,EAAY,CACrC,OAAOC,CAAAA,CAAWA,CAAAA,CAASG,CAAK,CAAA,CAAKA,CACvC,CACF,CACF,KCMaC,CAAAA,CAAe,CAC1B3B,EACA4B,CAAAA,CAA+B,KAC5B,CACH,GAAM,CAAE,KAAA,CAAAtB,CAAAA,CAAO,WAAYuB,CAAAA,CAAoB,QAAA,CAAAC,CAAS,CAAA,CAAIF,CAAAA,CACtDG,EAAYC,YAAAA,CAAO,KAAK,EAGxBC,CAAAA,CAAqBC,aAAAA,CACzB,IAAML,CAAAA,EAAsB,IAAId,EAChC,CAACc,CAAkB,CACrB,CAAA,CACMP,CAAAA,CAAaO,GAAsBI,CAAAA,CAMzCE,eAAAA,CAAU,IAAM,CACV,CAACN,GAAsBI,CAAAA,CAAmB,UAAA,EAC5CA,EAAmB,KAAA,GAEvB,EAAG,CAACA,CAAAA,CAAoBJ,CAAkB,CAAC,CAAA,CAG3C,IAAMH,CAAAA,CAAQL,CAAAA,CAAkBC,CAAU,CAAA,CAG1C,OAAAa,gBAAU,KACRJ,CAAAA,CAAU,QAAU,IAAA,CAEhB/B,CAAAA,GACFsB,EAAW,IAAA,CAAKtB,CAAAA,CAAOM,CAAK,CAAA,CACxBwB,CAAAA,EACFR,EAAW,IAAA,EAAK,CAAE,MAAM,IAAM,CAE9B,CAAC,CAAA,CAAA,CAIE,IAAM,CACXS,CAAAA,CAAU,OAAA,CAAU,MACtB,CAAA,CAAA,CACC,CAACT,EAAYtB,CAAAA,CAAOM,CAAAA,CAAOwB,CAAQ,CAAC,CAAA,CAGvCK,gBAAU,IACD,IAAM,CAENN,CAAAA,EACHI,CAAAA,CAAmB,UAEvB,CAAA,CACC,CAACA,CAAAA,CAAoBJ,CAAkB,CAAC,CAAA,CAEpC,CAEL,WAAAP,CAAAA,CAEA,KAAA,CAAAI,CACF,CACF,EChFO,IAAMU,EAAgDC,UAAAA,CAAK,CAAC,CACjE,UAAA,CAAAC,CAAAA,CACA,MAAAC,CAAAA,CACA,SAAA,CAAAC,CACF,CAAA,GAEIC,eAAAA,CAAC,OAAI,SAAA,CAAU,4GAAA,CACb,UAAAC,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAW,CAAA,0CAAA,EAA6CF,CAAAA,CAAY,oBAAsB,EAAE,CAAA,CAAA,CAC9F,SAAAF,CAAAA,CACCI,cAAAA,CAAC,OACC,GAAA,CAAKJ,CAAAA,CACL,IAAKC,CAAAA,CACL,SAAA,CAAU,6FACZ,CAAA,CAEAG,cAAAA,CAAC,OAAI,SAAA,CAAU,kJAAA,CACb,SAAAA,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,iCAAA,CAAkC,IAAA,CAAK,eAAe,OAAA,CAAQ,WAAA,CAC3E,SAAAA,cAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,uFAAA,CAAwF,CAAA,CAClG,EACF,CAAA,CAEJ,CAAA,CAECF,GACCE,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,mFAAA,CACb,QAAA,CAAAA,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,4EAA4E,CAAA,CAC7F,CAAA,CAAA,CAEJ,CAEH,CAAA,CAEDN,CAAAA,CAAe,YAAc,gBAAA,KClDhBO,CAAAA,CAAqBC,CAAAA,EAA6C,CAC7E,GAAM,CAACC,EAAOC,CAAQ,CAAA,CAAIC,eAAS,CAAC,CAAA,CAEpC,OAAAZ,eAAAA,CAAU,IAAM,CACd,GAAI,CAACS,EAAI,OAAA,CAAS,OAElB,IAAMI,CAAAA,CAAW,IAAI,eAAgBC,CAAAA,EAAY,CAC/C,QAAWC,CAAAA,IAASD,CAAAA,CAClBH,EAASI,CAAAA,CAAM,WAAA,CAAY,KAAK,EAEpC,CAAC,EAED,OAAAF,CAAAA,CAAS,QAAQJ,CAAAA,CAAI,OAAO,EACrB,IAAMI,CAAAA,CAAS,YACxB,CAAA,CAAG,CAACJ,CAAG,CAAC,EAEDC,CACT,MCAaM,EAAAA,CAAgB,MAAOC,EAAkBnD,CAAAA,CAAkB,GAAA,GAA2B,CACjG,IAAMoD,CAAAA,CAAW,IAAItD,CAAAA,CACrB,GAAI,CACF,OAAO,MAAMsD,EAAS,aAAA,CAAcD,CAAAA,CAAUnD,CAAO,CACvD,CAAA,OAAE,CACAoD,CAAAA,CAAS,OAAA,GACX,CACF,CAAA,CAWaC,GAAoB,MAAO5D,CAAAA,EAAiC,CAEvE,IAAM6D,CAAAA,CAAO,MADI,MAAM,KAAA,CAAM7D,CAAG,CAAA,EACJ,MAAK,CACjC,OAAO,IAAI,eAAA,CAAgB6D,CAAI,CACjC,CAAA,CASaC,EAAAA,CAAqB9D,GAAgB,CAC5CA,CAAAA,EAAOA,EAAI,UAAA,CAAW,OAAO,GAC/B,GAAA,CAAI,eAAA,CAAgBA,CAAG,EAE3B,MCnDa+D,CAAAA,CAAcC,CAAAA,EAA4B,CACrD,GAAI,KAAA,CAAMA,CAAO,CAAA,CAAG,OAAO,OAC3B,IAAMC,CAAAA,CAAM,KAAK,KAAA,CAAMD,CAAAA,CAAU,EAAE,CAAA,CAC7BE,CAAAA,CAAM,KAAK,KAAA,CAAMF,CAAAA,CAAU,EAAE,CAAA,CACnC,OAAO,GAAGC,CAAG,CAAA,CAAA,EAAIC,EAAI,QAAA,EAAS,CAAE,SAAS,CAAA,CAAG,GAAG,CAAC,CAAA,CAClD,CAAA,CAKaC,EAAgB,CAACvD,CAAAA,CAAiBwD,IAAkC,CAC/E,GAAIxD,EAAM,MAAA,GAAW,CAAA,CAAG,OAAO,EAAC,CAChC,GAAIA,CAAAA,CAAM,MAAA,GAAWwD,EAAa,OAAOxD,CAAAA,CAEzC,IAAMyD,CAAAA,CAAY,IAAI,MAAMD,CAAW,CAAA,CACjCE,EAAQ1D,CAAAA,CAAM,MAAA,CAASwD,EAE7B,GAAIE,CAAAA,CAAQ,EAEV,IAAA,IAASzD,CAAAA,CAAI,EAAGA,CAAAA,CAAIuD,CAAAA,CAAavD,IAAK,CACpC,IAAI0D,EAAa,CAAA,CACXxD,CAAAA,CAAQ,KAAK,KAAA,CAAMF,CAAAA,CAAIyD,CAAK,CAAA,CAC5BtD,CAAAA,CAAM,KAAK,KAAA,CAAA,CAAOH,CAAAA,CAAI,GAAKyD,CAAK,CAAA,CAChCE,EAAQxD,CAAAA,CAAMD,CAAAA,CACpB,QAASE,CAAAA,CAAIF,CAAAA,CAAOE,EAAID,CAAAA,CAAKC,CAAAA,EAAAA,CAC3BsD,GAAc3D,CAAAA,CAAMK,CAAC,EAAIL,CAAAA,CAAMK,CAAC,EAElCoD,CAAAA,CAAUxD,CAAC,EAAI2D,CAAAA,CAAQ,CAAA,CAAI,KAAK,IAAA,CAAKD,CAAAA,CAAaC,CAAK,CAAA,CAAI,EAC7D,MAGA,IAAA,IAAS3D,CAAAA,CAAI,EAAGA,CAAAA,CAAIuD,CAAAA,CAAavD,IAAK,CACpC,IAAM4D,EAAW5D,CAAAA,CAAIyD,CAAAA,CACfI,EAAQ,IAAA,CAAK,KAAA,CAAMD,CAAQ,CAAA,CAC3BE,CAAAA,CAAY,KAAK,GAAA,CAAID,CAAAA,CAAQ,EAAG9D,CAAAA,CAAM,MAAA,CAAS,CAAC,CAAA,CAChDgE,CAAAA,CAAWH,EAAWC,CAAAA,CAC5BL,CAAAA,CAAUxD,CAAC,CAAA,CAAID,CAAAA,CAAM8D,CAAK,CAAA,CAAA,CAAK9D,CAAAA,CAAM+D,CAAS,CAAA,CAAI/D,CAAAA,CAAM8D,CAAK,CAAA,EAAKE,EACpE,CAEF,OAAOP,CACT,EAKaQ,EAAAA,CAAiBC,CAAAA,EACrBA,EAAK,KAAA,CAAM;AAAA,CAAI,CAAA,CAAE,GAAA,CAAKC,CAAAA,EAAS,CAEpC,IAAIC,CAAAA,CAAID,CAAAA,CAAK,OAAA,CAAQ,IAAA,CAAM,OAAO,CAAA,CAAE,OAAA,CAAQ,IAAA,CAAM,MAAM,CAAA,CAAE,OAAA,CAAQ,IAAA,CAAM,MAAM,CAAA,CAGxEE,CAAAA,CAAoC,EAAC,CACvCC,CAAAA,CAAU,CAAA,CACRC,CAAAA,CAAW,CAACjE,CAAAA,CAAakE,CAAAA,GAAgB,CAC7C,IAAMC,CAAAA,CAAK,CAAA,QAAA,EAAWH,CAAAA,EAAS,CAAA,EAAA,CAAA,CAC/B,OAAAD,CAAAA,CAAOI,CAAE,CAAA,CAAI,CAAA,aAAA,EAAgBD,CAAG,CAAA,EAAA,EAAKlE,CAAG,CAAA,OAAA,CAAA,CACjCmE,CACT,CAAA,CAGA,OAAAL,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,sBAAA,CAAyBM,CAAAA,EAAMH,CAAAA,CAASG,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAE1EN,CAAAA,CAAIA,CAAAA,CAAE,QAAQ,oBAAA,CAAuBM,CAAAA,EAAMH,CAAAA,CAASG,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAExEN,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,wBAAA,CAA2BM,CAAAA,EAAMH,CAAAA,CAASG,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAE5EN,CAAAA,CAAIA,CAAAA,CAAE,OAAA,CAAQ,6BAAA,CAAgCM,CAAAA,EAAMH,CAAAA,CAASG,CAAAA,CAAG,gBAAgB,CAAC,CAAA,CAGjFN,CAAAA,CAAIA,CAAAA,CAAE,QAAQ,2BAAA,CAA6B,uCAAuC,CAAA,CAGlF,MAAA,CAAO,OAAA,CAAQC,CAAM,CAAA,CAAE,OAAA,CAAQ,CAAC,CAACI,CAAAA,CAAIE,CAAI,CAAA,GAAM,CAC7CP,EAAIA,CAAAA,CAAE,OAAA,CAAQK,CAAAA,CAAIE,CAAI,EACxB,CAAC,CAAA,CAEMP,CACT,CAAC,ECzCI,IAAMQ,CAAAA,CAAoC7C,UAAAA,CAAK,CAAC,CACrD,UAAA,CAAAf,CAAAA,CACA,KAAA,CAAO6D,CAAAA,CACP,SAAA,CAAAC,CAAAA,CAAY,SAAA,CACZ,aAAA,CAAAC,EAAgB,SAAA,CAChB,MAAA,CAAAC,CAAAA,CAAS,EAAA,CACT,UAAA,CAAAC,CAAAA,CAAa,MAAA,CACb,QAAA,CAAAC,CAAAA,CAAW,CAAA,CACX,MAAA,CAAAC,CAAAA,CAAS,CAAA,CACT,SAAA,CAAAC,EAAY,CAAA,CACZ,UAAA,CAAAC,CAAAA,CAAa,CACf,CAAA,GAAM,CACJ,IAAMC,CAAAA,CAAY5D,YAAAA,CAA0B,IAAI,CAAA,CAC1C6D,CAAAA,CAAoB7D,YAAAA,CAA0B,IAAI,EAClD8D,CAAAA,CAAe9D,YAAAA,CAAuB,IAAI,CAAA,CAC1C+D,CAAAA,CAAiBpD,CAAAA,CAAkBmD,CAAY,CAAA,CAG/CE,CAAAA,CAAc3E,CAAAA,CAAkBC,CAAAA,CAAY2E,CAAAA,EAAKA,CAAAA,CAAE,WAAW,EAC9D7E,CAAAA,CAAWC,CAAAA,CAAkBC,CAAAA,CAAY2E,CAAAA,EAAKA,CAAAA,CAAE,QAAQ,CAAA,CACxDC,CAAAA,CAAc7E,CAAAA,CAAkBC,CAAAA,CAAY2E,CAAAA,EAAKA,CAAAA,CAAE,KAAK,CAAA,CAGxD3F,EAAQ4B,aAAAA,CAAQ,IAAM,CAC1B,IAAMiE,CAAAA,CAAWhB,CAAAA,EAAiBe,CAAAA,CAClC,GAAIC,CAAAA,CAAS,MAAA,GAAW,CAAA,CAAG,OAAO,EAAC,CAEnC,IAAMrC,CAAAA,CAAcyB,CAAAA,GAAe,MAAA,CAC/B,IAAA,CAAK,KAAA,CAAMQ,CAAAA,EAAkBP,CAAAA,CAAWC,CAAAA,CAAO,CAAA,CAC/CF,CAAAA,CAEAxB,CAAAA,CAAYF,CAAAA,CAAcsC,CAAAA,CAAU,IAAA,CAAK,GAAA,CAAI,CAAA,CAAGrC,CAAW,CAAC,CAAA,CAGhE,OAAA,CAAI6B,CAAAA,GAAe,CAAA,EAAOD,CAAAA,GAAc,CAAA,IACtC3B,CAAAA,CAAYA,CAAAA,CAAU,GAAA,CAAIjD,CAAAA,EAAK,IAAA,CAAK,GAAA,CAAIA,EAAG6E,CAAU,CAAA,CAAID,CAAS,CAAA,CAAA,CAG7D3B,CACT,CAAA,CAAG,CAACoB,CAAAA,CAAee,CAAAA,CAAaH,CAAAA,CAAgBR,CAAAA,CAAYC,CAAAA,CAAUC,CAAAA,CAAQC,CAAAA,CAAWC,CAAU,CAAC,CAAA,CAEpGxD,eAAAA,CAAU,IAAM,CACd,IAAMiE,CAAAA,CAASR,CAAAA,CAAU,OAAA,CACnBS,CAAAA,CAAiBR,CAAAA,CAAkB,OAAA,CACzC,GAAI,CAACO,GAAU,CAACC,CAAAA,CAAgB,OAEhC,IAAMC,CAAAA,CAAMF,CAAAA,CAAO,UAAA,CAAW,IAAI,CAAA,CAC5BG,CAAAA,CAAOF,CAAAA,CAAe,UAAA,CAAW,IAAI,CAAA,CAC3C,GAAI,CAACC,CAAAA,EAAO,CAACC,CAAAA,CAAM,OAEnB,IAAMC,CAAAA,CAAM,MAAA,CAAO,gBAAA,EAAoB,CAAA,CACjCC,CAAAA,CAAOL,CAAAA,CAAO,qBAAA,EAAsB,CACpCM,EAAcD,CAAAA,CAAK,KAAA,CAAQD,CAAAA,CAC3BG,CAAAA,CAAeF,CAAAA,CAAK,MAAA,CAASD,CAAAA,CAEnC,CAACJ,CAAAA,CAAQC,CAAc,CAAA,CAAE,OAAA,CAAQO,CAAAA,EAAK,CAAA,CAChCA,EAAE,KAAA,GAAUF,CAAAA,EAAeE,CAAAA,CAAE,MAAA,GAAWD,CAAAA,IAC1CC,CAAAA,CAAE,KAAA,CAAQF,CAAAA,CACVE,CAAAA,CAAE,MAAA,CAASD,CAAAA,EAEf,CAAC,CAAA,CAAA,CAEY,IAAM,CACjB,GAAIrG,CAAAA,CAAM,MAAA,GAAW,CAAA,CAAG,OACxB,GAAM,CAAE,KAAA,CAAAuC,CAAAA,CAAO,MAAA,CAAAyC,CAAO,CAAA,CAAIc,CAAAA,CAE1BE,CAAAA,CAAI,SAAA,CAAU,CAAA,CAAG,CAAA,CAAGzD,CAAAA,CAAOyC,CAAM,CAAA,CACjCiB,CAAAA,CAAK,SAAA,CAAU,CAAA,CAAG,CAAA,CAAG1D,CAAAA,CAAOyC,CAAM,CAAA,CAElC,IAAMuB,EAAAA,CAAWvG,CAAAA,CAAM,OACjBwG,CAAAA,CAAsBjE,CAAAA,CAAQgE,EAAAA,CAC9BE,CAAAA,CAAiB,OAAOxB,CAAAA,EAAe,QAAA,CACzCuB,CAAAA,CAAsB,EAAA,CACtBtB,CAAAA,CAAWgB,CAAAA,CACTQ,EAAAA,CAAe,OAAOzB,CAAAA,EAAe,SACvCuB,CAAAA,CAAsB,EAAA,CACtBrB,CAAAA,CAASe,CAAAA,CAEbF,CAAAA,CAAI,OAAA,CAAU,OAAA,CACdA,CAAAA,CAAI,SAAA,CAAYS,CAAAA,CAChBR,CAAAA,CAAK,OAAA,CAAU,OAAA,CACfA,CAAAA,CAAK,UAAYQ,CAAAA,CAEf,IAAME,CAAAA,CAAU3B,CAAAA,CAAS,CAAA,CAE3BhF,CAAAA,CAAM,OAAA,CAAQ,CAAC4G,CAAAA,CAAM9C,EAAAA,GAAU,CAC7B,GAAI8C,CAAAA,EAAQ,CAAA,CAAG,OAEf,IAAMC,CAAAA,CAAI/C,EAAAA,EAAS2C,CAAAA,CAAiBC,EAAAA,CAAAA,CAAgBD,CAAAA,CAAiB,CAAA,CAC/DK,CAAAA,CAAY,IAAA,CAAK,GAAA,CAAIL,CAAAA,CAAgBG,CAAAA,CAAO5B,CAAAA,CAAS,EAAG,EAGxD+B,CAAAA,CAASJ,CAAAA,CAAUG,CAAAA,CAAY,CAAA,CAC/BE,CAAAA,CAAOL,CAAAA,CAAUG,CAAAA,CAAY,CAAA,CAEnCd,CAAAA,CAAI,SAAA,EAAU,CACdA,CAAAA,CAAI,WAAA,CAAclB,CAAAA,CAClBkB,EAAI,MAAA,CAAOa,CAAAA,CAAGE,CAAM,CAAA,CACpBf,CAAAA,CAAI,MAAA,CAAOa,CAAAA,CAAGG,CAAI,CAAA,CAClBhB,CAAAA,CAAI,MAAA,EAAO,CAEXC,CAAAA,CAAK,SAAA,GACLA,CAAAA,CAAK,WAAA,CAAclB,CAAAA,CACnBkB,CAAAA,CAAK,MAAA,CAAOY,CAAAA,CAAGE,CAAM,CAAA,CACrBd,CAAAA,CAAK,MAAA,CAAOY,CAAAA,CAAGG,CAAI,CAAA,CACnBf,CAAAA,CAAK,MAAA,GACP,CAAC,EACH,CAAA,IAGF,CAAA,CAAG,CAACjG,CAAAA,CAAO8E,CAAAA,CAAWC,CAAAA,CAAeE,CAAAA,CAAYC,CAAAA,CAAUC,CAAAA,CAAQH,CAAM,CAAC,EAE1E,IAAMiC,CAAAA,CAAc5H,CAAAA,EAAwC,CAC1D,GAAImG,CAAAA,CAAa,OAAA,EAAW1E,CAAAA,CAAU,CACpC,IAAMqF,CAAAA,CAAOX,CAAAA,CAAa,OAAA,CAAQ,qBAAA,GAC5BqB,CAAAA,CAAIxH,CAAAA,CAAE,OAAA,CAAU8G,CAAAA,CAAK,IAAA,CACrBtF,CAAAA,CAAa,IAAA,CAAK,GAAA,CAAI,CAAA,CAAG,IAAA,CAAK,GAAA,CAAI,CAAA,CAAGgG,CAAAA,CAAIV,CAAAA,CAAK,KAAK,CAAC,CAAA,CAC1DnF,CAAAA,CAAW,IAAA,CAAKH,CAAU,EAC5B,CACF,CAAA,CAEMqG,CAAAA,CAAkBpG,CAAAA,CAAY4E,CAAAA,CAAc5E,CAAAA,CAAY,GAAA,CAAM,CAAA,CAEpE,OACEqB,eAAAA,CAAC,KAAA,CAAA,CACC,GAAA,CAAKqD,CAAAA,CACL,SAAA,CAAU,gDAAA,CACV,KAAA,CAAO,CACL,MAAA,CAAQ,CAAA,EAAGR,CAAM,CAAA,EAAA,CAAA,CAEjB,iBAAA,CAAmBF,CAAAA,CACnB,sBAAuBC,CACzB,CAAA,CACA,OAAA,CAASkC,CAAAA,CAET,QAAA,CAAA,CAAA7E,cAAAA,CAAC,QAAA,CAAA,CAAO,GAAA,CAAKkD,CAAAA,CAAW,SAAA,CAAU,gCAAA,CAAiC,CAAA,CACnElD,cAAAA,CAAC,KAAA,CAAA,CACC,UAAU,yGAAA,CACV,KAAA,CAAO,CAAE,KAAA,CAAO,CAAA,EAAG8E,CAAe,CAAA,CAAA,CAAI,CAAA,CAEtC,QAAA,CAAA9E,cAAAA,CAAC,QAAA,CAAA,CAAO,GAAA,CAAKmD,CAAAA,CAAmB,SAAA,CAAU,kBAAkB,KAAA,CAAO,CAAE,KAAA,CAAO,CAAA,EAAGE,CAAc,CAAA,EAAA,CAAK,CAAA,CAAG,CAAA,CACvG,CAAA,CAAA,CACF,CAEJ,CAAC,EAEDb,CAAAA,CAAS,WAAA,CAAc,UAAA,CC3FhB,IAAMuC,EAAAA,CAAkDpF,UAAAA,CAAK,CAAC,CACnE,KAAA,CAAArC,CAAAA,CACA,KAAA,CAAO0H,CAAAA,CACP,OAAA,CAAAC,EACA,KAAA,CAAApF,CAAAA,CACA,MAAA,CAAAqF,CAAAA,CACA,SAAA,CAAWC,CAAAA,CACX,aAAA,CAAeC,CAAAA,CACf,MAAA,CAAAxC,CAAAA,CAAS,EAAA,CACT,SAAA,CAAAyC,CAAAA,CAAY,EAAA,CACZ,MAAOC,CAAAA,CACP,UAAA,CAAAzC,CAAAA,CAAa,MAAA,CACb,QAAA,CAAAC,CAAAA,CAAW,CAAA,CACX,MAAA,CAAAC,CAAAA,CAAS,CAAA,CACT,UAAA,CAAAE,CAAAA,CAAa,CAAA,CACb,KAAA,CAAAsC,EACA,UAAA,CAAYpG,CACd,CAAA,GAAM,CAEJ,GAAM,CAAE,UAAA,CAAAP,CAAW,CAAA,CAAIK,CAAAA,CAAa3B,CAAAA,CAAO,CACzC,KAAA,CAAO0H,CAAAA,CACP,WAAY7F,CACd,CAAC,CAAA,CAGKqG,CAAAA,CAAY7G,CAAAA,CAAkBC,CAAAA,CAAY2E,CAAAA,EAAKA,CAAAA,CAAE,SAAS,CAAA,CAC1DkC,CAAAA,CAAc9G,CAAAA,CAAkBC,CAAAA,CAAY2E,CAAAA,EAAKA,EAAE,WAAW,CAAA,CAC9DD,CAAAA,CAAc3E,CAAAA,CAAkBC,CAAAA,CAAY2E,CAAAA,EAAKA,CAAAA,CAAE,WAAW,CAAA,CAC9D7E,CAAAA,CAAWC,CAAAA,CAAkBC,CAAAA,CAAY2E,CAAAA,EAAKA,CAAAA,CAAE,QAAQ,CAAA,CAGxD,CAACmC,CAAAA,CAAoBC,CAAqB,CAAA,CAAItF,cAAAA,CAClD,OAAO4E,CAAAA,EAAY,QAAA,CAAWA,CAAAA,CAAU,MAC1C,CAAA,CAEAxF,eAAAA,CAAU,IAAM,CACd,GAAIwF,CAAAA,YAAmB,IAAA,CAAM,CAC3B,IAAMjI,CAAAA,CAAM,GAAA,CAAI,eAAA,CAAgBiI,CAAO,CAAA,CACvC,OAAAU,CAAAA,CAAsB3I,CAAG,CAAA,CAClB,IAAM,GAAA,CAAI,eAAA,CAAgBA,CAAG,CACtC,CAAA,KACE2I,CAAAA,CAAsBV,CAAO,EAEjC,CAAA,CAAG,CAACA,CAAO,CAAC,CAAA,CAEZ,IAAMvC,CAAAA,CAAYlD,cAAQ,IACpB2F,CAAAA,GACAI,CAAAA,CAAcA,CAAAA,CAAM,EAAA,GAAO,SAAA,CAAY,SAAA,CAAY,SAAA,CAChD,SAAA,CAAA,CACN,CAACJ,CAAAA,CAAeI,CAAK,CAAC,CAAA,CAEnB5C,EAAgByC,CAAAA,EAAqBG,CAAAA,EAAO,OAAA,EAAW,SAAA,CAEvDK,CAAAA,CAAcpG,aAAAA,CAAQ,KAWnB,CAAE,GAVS,CAChB,eAAA,CAAiB+F,CAAAA,EAAO,EAAA,EAAM,OAAA,CAC9B,oBAAqBA,CAAAA,EAAO,MAAA,EAAU,SAAA,CACtC,kBAAA,CAAoBA,CAAAA,EAAO,IAAA,EAAQ,SAAA,CACnC,mBAAA,CAAqBA,CAAAA,EAAO,IAAA,EAAQ,SAAA,CACpC,iBAAA,CAAmBA,CAAAA,EAAO,IAAA,EAAQ,UAClC,kBAAA,CAAoBA,CAAAA,EAAO,OAAA,EAAW,SAAA,CACtC,uBAAA,CAAyBA,CAAAA,EAAO,OAAA,EAAW,SAAA,CAC3C,qBAAA,CAAuBA,CAAAA,EAAO,EAAA,EAAM,SACtC,CAAA,CACuB,GAAGD,CAAU,CAAA,CAAA,CACnC,CAACC,CAAAA,CAAOD,CAAS,CAAC,CAAA,CAErB,OACEvF,eAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAW,CAAA,sPAAA,EAAyPsF,CAAS,CAAA,CAAA,CAC7Q,KAAA,CAAOO,EAEP,QAAA,CAAA,CAAA5F,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,yCAAA,CACb,QAAA,CAAAA,cAAAA,CAACN,CAAAA,CAAA,CACC,UAAA,CAAYgG,CAAAA,CACZ,KAAA,CAAO7F,CAAAA,CACP,SAAA,CAAW4F,EACb,CAAA,CACF,CAAA,CAEA1F,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,qCAAA,CACb,QAAA,CAAA,CAAAA,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8BAAA,CAEb,QAAA,CAAA,CAAAC,cAAAA,CAAC,QAAA,CAAA,CACC,OAAA,CAAS,IAAMpB,CAAAA,CAAW,UAAA,EAAW,CACrC,SAAA,CAAU,sTAAA,CAET,QAAA,CAAA4G,CAAAA,CACCxF,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,uBAAA,CAAwB,IAAA,CAAK,cAAA,CAAe,OAAA,CAAQ,YACjE,QAAA,CAAAA,cAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,iCAAA,CAAkC,CAAA,CAC5C,CAAA,CAEAA,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,4BAAA,CAA6B,IAAA,CAAK,cAAA,CAAe,OAAA,CAAQ,YACtE,QAAA,CAAAA,cAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,eAAA,CAAgB,CAAA,CAC1B,CAAA,CAEJ,CAAA,CAEAD,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8BAAA,CACb,QAAA,CAAA,CAAAA,eAAAA,CAAC,OAAI,SAAA,CAAU,yCAAA,CACZ,QAAA,CAAA,CAAAmF,CAAAA,EACClF,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,2HAAA,CACV,QAAA,CAAAkF,CAAAA,CACH,CAAA,CAEFnF,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,uFACZ,QAAA,CAAA,CAAAgB,CAAAA,CAAWuC,CAAW,CAAA,CAAE,KAAA,CAAIvC,CAAAA,CAAWrC,CAAQ,CAAA,CAAA,CAClD,CAAA,CAAA,CACF,CAAA,CACCmB,CAAAA,EACCG,cAAAA,CAAC,IAAA,CAAA,CAAG,SAAA,CAAU,sHACX,QAAA,CAAAH,CAAAA,CACH,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CAEAG,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,SAAA,CACb,QAAA,CAAAA,cAAAA,CAACwC,CAAAA,CAAA,CACC,UAAA,CAAY5D,EACZ,KAAA,CAAOoG,CAAAA,CACP,SAAA,CAAWtC,CAAAA,CACX,aAAA,CAAeC,CAAAA,CACf,MAAA,CAAQC,CAAAA,CACR,UAAA,CAAYC,CAAAA,CACZ,QAAA,CAAUC,CAAAA,CACV,MAAA,CAAQC,CAAAA,CACR,WAAYE,CAAAA,CACd,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CAEJ,CAAC,EAED8B,EAAAA,CAAgB,WAAA,CAAc,iBAAA,CClOvB,IAAMc,EAAAA,CAAoB,CAACjI,CAAAA,CAAiBwD,CAAAA,GAC1C5B,aAAAA,CAAQ,IAAM2B,CAAAA,CAAcvD,CAAAA,CAAOwD,CAAW,CAAA,CAAG,CAACxD,CAAAA,CAAOwD,CAAW,CAAC","file":"index.cjs","sourcesContent":["/**\n * Represents the low-level playback state of the audio element.\n */\nexport type PlayerState = {\n /** Whether the audio is currently playing */\n isPlaying: boolean;\n /** Whether the audio is stalled (waiting for data) */\n isStalled: boolean;\n /** The current playback time in seconds */\n currentTime: number;\n /** The total duration of the track in seconds */\n duration: number;\n /** The current volume level (0 to 1) */\n volume: number;\n /** Whether the audio is currently muted */\n muted: boolean;\n /** Any error reported by the audio element */\n error: string | null;\n};\n\n/**\n * A callback function that receives the latest PlayerState.\n */\nexport type PlayerListener = (state: PlayerState) => void;\n\n/**\n * The internal core class responsible for managing the HTMLAudioElement.\n * \n * It handles raw playback logic, volume control, and synchronizes the \n * internal `PlayerState` with DOM events from the underlying `Audio` instance.\n */\nexport class PlayerCore {\n private audio: HTMLAudioElement;\n private listeners: Set<PlayerListener> = new Set();\n private _state: PlayerState;\n\n /**\n * Initializes a new PlayerCore instance and sets up event listeners on a new Audio object.\n */\n constructor() {\n this.audio = new Audio();\n this._state = {\n isPlaying: false,\n isStalled: false,\n currentTime: 0,\n duration: 0,\n volume: 1,\n muted: false,\n error: null,\n };\n\n this.initListeners();\n }\n\n /**\n * Subscribes to various HTMLMediaElement events to keep the internal state in sync.\n */\n private initListeners() {\n this.audio.addEventListener('play', () => this.updateState({ isPlaying: true, error: null }));\n this.audio.addEventListener('pause', () => this.updateState({ isPlaying: false }));\n this.audio.addEventListener('waiting', () => this.updateState({ isStalled: true }));\n this.audio.addEventListener('playing', () => this.updateState({ isStalled: false }));\n this.audio.addEventListener('canplay', () => this.updateState({ isStalled: false }));\n this.audio.addEventListener('timeupdate', () => this.updateState({ currentTime: this.audio.currentTime }));\n this.audio.addEventListener('durationchange', () => this.updateState({ duration: this.audio.duration }));\n this.audio.addEventListener('volumechange', () => this.updateState({ \n volume: this.audio.volume, \n muted: this.audio.muted \n }));\n this.audio.addEventListener('ended', () => this.updateState({ isPlaying: false }));\n this.audio.addEventListener('error', () => {\n const error = this.audio.error;\n let message = 'Unknown audio error';\n if (error) {\n switch (error.code) {\n case error.MEDIA_ERR_ABORTED: message = 'Playback aborted'; break;\n case error.MEDIA_ERR_NETWORK: message = 'Network error'; break;\n case error.MEDIA_ERR_DECODE: message = 'Audio decoding failed'; break;\n case error.MEDIA_ERR_SRC_NOT_SUPPORTED: message = 'Audio format not supported'; break;\n }\n }\n this.updateState({ isPlaying: false, error: message });\n });\n }\n\n /**\n * Updates the internal state and notifies subscribers.\n */\n private updateState(patch: Partial<PlayerState>) {\n this._state = { ...this._state, ...patch };\n this.notify();\n }\n\n /**\n * Triggers all registered listener callbacks.\n */\n private notify() {\n this.listeners.forEach(l => l(this._state));\n }\n\n /**\n * Registers a listener for state updates.\n * @param listener The callback function.\n * @returns An unsubscribe function.\n */\n public subscribe(listener: PlayerListener) {\n this.listeners.add(listener);\n return () => this.listeners.delete(listener);\n }\n\n /**\n * Returns the current playback state.\n */\n public get state() {\n return this._state;\n }\n\n /**\n * Updates the source URL of the underlying audio element.\n * @param url The audio source URL.\n */\n public setSource(url: string) {\n this.audio.src = url;\n this.audio.load();\n this.updateState({ error: null, currentTime: 0, duration: 0 });\n }\n\n /**\n * Starts playback. Returns a promise that resolves when playback begins.\n */\n public async play() {\n try {\n await this.audio.play();\n } catch (e) {\n const message = e instanceof Error ? e.message : 'Playback failed';\n this.updateState({ isPlaying: false, error: message });\n throw e;\n }\n }\n\n /**\n * Pauses playback.\n */\n public pause() {\n this.audio.pause();\n }\n\n /**\n * Toggles between play and pause states.\n */\n public async togglePlay() {\n if (this._state.isPlaying) {\n this.pause();\n } else {\n try {\n await this.play();\n } catch {\n // Error handled in play()\n }\n }\n }\n\n /**\n * Seeks to a specific time.\n * @param time Time in seconds.\n */\n public seek(time: number) {\n this.audio.currentTime = time;\n }\n\n /**\n * Sets the volume level.\n * @param volume Level from 0 to 1.\n */\n public setVolume(volume: number) {\n this.audio.volume = volume;\n }\n\n /**\n * Mutes or unmutes the audio element.\n * @param muted Mute status.\n */\n public setMuted(muted: boolean) {\n this.audio.muted = muted;\n }\n\n /**\n * Cleans up the audio element and removes all listeners.\n */\n public dispose() {\n this.pause();\n this.audio.src = '';\n this.listeners.clear();\n }\n}\n","/**\n * A specialized class for decoding audio data and generating waveform peaks.\n * \n * It leverages the Web Audio API (`AudioContext`) to process audio buffers \n * and extract amplitude data for visualization.\n */\nexport class PeakAnalyzer {\n private audioCtx: AudioContext | null = null;\n\n /**\n * Initializes the analyzer. AudioContext creation is deferred to the first use \n * to comply with browser autoplay and resource management policies.\n */\n constructor() {}\n\n /**\n * Lazily creates or returns the existing AudioContext.\n */\n private getContext(): AudioContext {\n if (!this.audioCtx) {\n this.audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();\n }\n return this.audioCtx;\n }\n\n /**\n * Processes media (URL or Blob) and generates a set of normalized peaks.\n * \n * @param media The URL string or Blob object to analyze.\n * @param samples The number of peaks (bars) to generate. Defaults to 512.\n * @returns A promise resolving to an array of normalized peak values (0 to 1).\n * \n * @example\n * ```typescript\n * const analyzer = new PeakAnalyzer();\n * \n * // Analyze from URL\n * const peaksFromUrl = await analyzer.generatePeaks('https://example.com/audio.mp3');\n * \n * // Analyze from Blob\n * const peaksFromBlob = await analyzer.generatePeaks(myAudioBlob);\n * ```\n */\n public async generatePeaks(media: string | Blob, samples: number = 512): Promise<number[]> {\n try {\n let arrayBuffer: ArrayBuffer;\n\n if (typeof media === 'string') {\n const response = await fetch(media);\n if (!response.ok) throw new Error(`Failed to fetch audio: ${response.statusText}`);\n arrayBuffer = await response.arrayBuffer();\n } else {\n arrayBuffer = await media.arrayBuffer();\n }\n\n const audioCtx = this.getContext();\n const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);\n \n const channelData = audioBuffer.getChannelData(0); // Use left channel\n const blockSize = Math.floor(channelData.length / samples);\n const peaks = [];\n\n for (let i = 0; i < samples; i++) {\n let max = 0;\n const start = i * blockSize;\n const end = start + blockSize;\n \n for (let j = start; j < end; j++) {\n const val = Math.abs(channelData[j]);\n if (val > max) max = val;\n }\n peaks.push(max);\n }\n \n // Normalize peaks to 0-1 range\n const maxPeak = Math.max(...peaks);\n return peaks.map(p => p / (maxPeak || 1));\n } catch (error) {\n console.error('PeakAnalyzer Error:', error);\n throw error;\n }\n }\n\n /**\n * Closes the AudioContext and releases system audio resources.\n */\n public dispose() {\n if (this.audioCtx) {\n this.audioCtx.close();\n this.audioCtx = null;\n }\n }\n}\n","import { PlayerCore, PlayerState } from './PlayerCore';\nimport { PeakAnalyzer } from './PeakAnalyzer';\n\n/**\n * Represents the complete state of the Waveframe controller, combining playback and analysis.\n */\nexport type EngineState = PlayerState & {\n /** The current set of generated or provided waveform peaks (0-1 range) */\n peaks: number[];\n /** Whether an audio analysis process is currently in progress */\n isAnalyzing: boolean;\n /** Any error message encountered during playback or analysis */\n error: string | null;\n};\n\n/**\n * A callback function that receives the latest EngineState.\n */\nexport type EngineListener = (state: EngineState) => void;\n\n/**\n * The orchestrator class for Waveframe. \n * \n * It manages the lifecycle of audio playback and waveform analysis, providing a unified \n * store-like interface that can be easily consumed by React or other frameworks.\n * \n * @example\n * ```typescript\n * const controller = new WaveframeController();\n * \n * // Load from URL (automatic analysis if peaks omitted)\n * controller.load('https://example.com/audio.mp3');\n * \n * // Load from Blob with pre-computed peaks\n * controller.load(myBlob, [0.1, 0.5, 0.8]);\n * \n * // Subscription\n * const unsubscribe = controller.subscribe((state) => {\n * console.log('Current time:', state.currentTime);\n * });\n * ```\n */\nexport class WaveframeController {\n private player: PlayerCore;\n private analyzer: PeakAnalyzer;\n private listeners: Set<EngineListener> = new Set();\n private _state: EngineState;\n\n private _media: string | Blob | null = null;\n private _objectUrl: string | null = null;\n private _isDisposed: boolean = false;\n\n /**\n * Creates a new instance of the WaveframeController.\n * Initializes internal PlayerCore and PeakAnalyzer.\n */\n constructor() {\n this.player = new PlayerCore();\n this.analyzer = new PeakAnalyzer();\n \n this._state = {\n ...this.player.state,\n peaks: [],\n isAnalyzing: false,\n error: null,\n };\n\n // Subscribe to player updates\n this.player.subscribe((playerState) => {\n this.updateState({ ...playerState });\n });\n }\n\n /**\n * Returns whether the controller has been disposed and is no longer usable.\n */\n public get isDisposed(): boolean {\n return this._isDisposed;\n }\n\n /**\n * Internal method to update the state and notify all subscribers.\n */\n private updateState(patch: Partial<EngineState>) {\n this._state = { ...this._state, ...patch };\n this.notify();\n }\n\n /**\n * Notifies all registered listeners of a state change.\n */\n private notify() {\n this.listeners.forEach(l => l(this._state));\n }\n\n // --- Store Interface ---\n\n /**\n * Registers a listener to be called whenever the engine state changes.\n * @param listener The callback function.\n * @returns An unsubscribe function.\n */\n public subscribe(listener: EngineListener) {\n this.listeners.add(listener);\n return () => this.listeners.delete(listener);\n }\n\n /**\n * Returns a snapshot of the current engine state.\n * Useful for `useSyncExternalStore`.\n */\n public getSnapshot(): EngineState {\n return this._state;\n }\n\n /**\n * Returns the current engine state.\n */\n public get state(): EngineState {\n return this._state;\n }\n\n // --- Actions ---\n\n /**\n * Resets the audio player and analyzer, clearing state and current media.\n */\n public reset() {\n this.revokeOldSource();\n this._media = null;\n this.player.dispose();\n this.analyzer.dispose();\n \n // Re-initialize player and analyzer\n this.player = new PlayerCore();\n this.analyzer = new PeakAnalyzer();\n\n // Re-subscribe to new player\n this.player.subscribe((playerState) => {\n this.updateState({ ...playerState });\n });\n\n this._isDisposed = false;\n this.updateState({\n ...this.player.state,\n peaks: [],\n isAnalyzing: false,\n error: null,\n });\n }\n\n /**\n * Revokes any existing Object URLs to prevent memory leaks.\n */\n private revokeOldSource() {\n if (this._objectUrl) {\n URL.revokeObjectURL(this._objectUrl);\n this._objectUrl = null;\n }\n }\n\n /**\n * Loads media (URL or Blob) into the player.\n * \n * If a string is passed, it's treated as a URL and used directly for playback.\n * If a Blob is passed, an Object URL is created for playback.\n * \n * If `peaks` are not provided, it automatically triggers an analysis.\n * \n * @param media The audio source (URL string or Blob/File object).\n * @param peaks Optional pre-generated peaks for the waveform.\n */\n public load(media: string | Blob, peaks?: number[]) {\n // Idempotency check: if media is the same, don't reload\n if (this._media === media) {\n if (peaks && (peaks.length !== this._state.peaks.length)) {\n this.updateState({ peaks });\n }\n return;\n }\n \n this.revokeOldSource();\n this._media = media;\n\n let sourceUrl: string;\n if (typeof media === 'string') {\n sourceUrl = media;\n } else {\n this._objectUrl = URL.createObjectURL(media);\n sourceUrl = this._objectUrl;\n }\n\n this.player.setSource(sourceUrl);\n \n const hasPeaks = peaks && peaks.length > 0;\n this.updateState({ \n peaks: peaks || [], \n isAnalyzing: false, \n error: null \n });\n\n // Automatic analysis if peaks are missing\n if (!hasPeaks) {\n this.analyze();\n }\n }\n\n /**\n * Analyzes the current media to generate waveform peaks.\n * @param samples The number of peaks to generate. Defaults to 512.\n */\n public async analyze(samples: number = 512) {\n if (!this._media) {\n this.updateState({ error: 'No media loaded to analyze' });\n return;\n }\n\n this.updateState({ isAnalyzing: true, error: null });\n try {\n const peaks = await this.analyzer.generatePeaks(this._media, samples);\n this.updateState({ peaks, isAnalyzing: false });\n } catch (e) {\n this.updateState({ \n isAnalyzing: false, \n error: e instanceof Error ? e.message : 'Analysis failed' \n });\n }\n }\n\n /**\n * Toggles playback between playing and paused.\n */\n public async togglePlay() {\n return await this.player.togglePlay();\n }\n\n /**\n * Starts audio playback.\n */\n public async play() {\n return await this.player.play();\n }\n\n /**\n * Pauses audio playback.\n */\n public pause() {\n this.player.pause();\n }\n\n /**\n * Seeks to a specific position in the track.\n * @param percentage The seek position as a decimal (0 to 1).\n */\n public seek(percentage: number) {\n const { duration } = this._state;\n if (duration) {\n this.player.seek(percentage * duration);\n }\n }\n\n /**\n * Sets the playback volume.\n * @param volume The volume level (0 to 1).\n */\n public setVolume(volume: number) {\n this.player.setVolume(volume);\n }\n\n /**\n * Mutes or unmutes the audio.\n * @param muted Whether the audio should be muted.\n */\n public setMuted(muted: boolean) {\n this.player.setMuted(muted);\n }\n\n /**\n * Disposes of the controller, pausing playback and clearing all listeners and resources.\n */\n public dispose() {\n this._isDisposed = true;\n this.revokeOldSource();\n this.player.dispose();\n this.analyzer.dispose();\n this.listeners.clear();\n }\n}\n","import { useSyncExternalStore } from 'react';\nimport { WaveframeController, EngineState } from '../core/WaveframeController';\n\n/**\n * A React hook that synchronizes a WaveframeController's state with a React component.\n * \n * It supports an optional selector function to subscribe to specific parts of the state,\n * preventing unnecessary re-renders when unrelated state changes.\n * \n * @param controller The WaveframeController instance to subscribe to.\n * @param selector An optional function to select a specific slice of the state.\n * @returns The selected state or the full EngineState if no selector is provided.\n * \n * @example\n * ```tsx\n * // Subscribe only to isPlaying\n * const isPlaying = useWaveframeStore(controller, state => state.isPlaying);\n * \n * // Subscribe to the full state\n * const state = useWaveframeStore(controller);\n * ```\n */\nexport function useWaveframeStore<T = EngineState>(\n controller: WaveframeController,\n selector?: (state: EngineState) => T\n): T {\n return useSyncExternalStore(\n (callback) => controller.subscribe(callback),\n () => {\n const state = controller.getSnapshot();\n return selector ? selector(state) : (state as unknown as T);\n }\n );\n}\n","import { useMemo, useEffect, useRef } from 'react';\nimport { WaveframeController } from '../core/WaveframeController';\nimport { useWaveframeStore } from './useWaveframeStore';\n\n/**\n * Configuration options for the `useWaveframe` hook.\n */\nexport interface UseWaveframeOptions {\n /** Optional pre-computed peaks to skip automatic analysis */\n peaks?: number[];\n /** Optional external controller instance for shared playback across components */\n controller?: WaveframeController;\n /** Whether to automatically start playback when media is loaded */\n autoPlay?: boolean;\n}\n\n/**\n * A headless hook that manages the lifecycle of a WaveframeController.\n * \n * It returns a stable controller instance that can be passed to components\n * like <Waveform /> or used for custom playback logic.\n * \n * @param media The audio source (URL string or Blob/File object).\n * @param options Additional configuration and an optional external controller.\n * \n * @example\n * ```tsx\n * const { controller, state } = useWaveframe('https://example.com/audio.mp3');\n * \n * return (\n * <div>\n * <Waveform controller={controller} />\n * <button onClick={() => controller.togglePlay()}>\n * {state.isPlaying ? 'Pause' : 'Play'}\n * </button>\n * </div>\n * );\n * ```\n */\nexport const useWaveframe = (\n media: string | Blob | undefined, \n options: UseWaveframeOptions = {}\n) => {\n const { peaks, controller: providedController, autoPlay } = options;\n const isMounted = useRef(false);\n\n // Initialize controller (only once)\n const internalController = useMemo(\n () => providedController || new WaveframeController(), \n [providedController]\n );\n const controller = providedController || internalController;\n\n // React 18 Strict Mode Fix:\n // If the component remounts, useMemo will return the same instance, but\n // the previous unmount's cleanup will have called dispose().\n // We check if it's disposed and reset it if so.\n useEffect(() => {\n if (!providedController && internalController.isDisposed) {\n internalController.reset();\n }\n }, [internalController, providedController]);\n\n // Get reactive state\n const state = useWaveframeStore(controller);\n\n // Sync media with controller\n useEffect(() => {\n isMounted.current = true;\n \n if (media) {\n controller.load(media, peaks);\n if (autoPlay) {\n controller.play().catch(() => {\n // Auto-play might be blocked by browser policy, ignore\n });\n }\n }\n\n return () => {\n isMounted.current = false;\n };\n }, [controller, media, peaks, autoPlay]);\n\n // Handle disposal\n useEffect(() => {\n return () => {\n // Only dispose if we created it internally\n if (!providedController) {\n internalController.dispose();\n }\n };\n }, [internalController, providedController]);\n\n return {\n /** The stable WaveframeController instance */\n controller,\n /** The reactive engine state */\n state,\n };\n};\n","import React, { memo } from 'react';\n\n/**\n * Props for the ArtworkOverlay component.\n */\ninterface ArtworkOverlayProps {\n /** The URL or Object URL of the artwork image */\n artworkUrl?: string;\n /** The title of the track (used for alt text) */\n title?: string;\n /** Whether the artwork is currently being processed or the audio is analyzing */\n isLoading?: boolean;\n}\n\n/**\n * A purely visual component for displaying track artwork.\n * \n * It handles loading states with a blur effect and provides a consistent \n * container for the track image.\n */\nexport const ArtworkOverlay: React.FC<ArtworkOverlayProps> = memo(({ \n artworkUrl, \n title, \n isLoading\n}) => {\n return (\n <div className=\"relative w-full h-full overflow-hidden rounded-[var(--wf-artwork-rounded,0.75rem)] shadow-lg group/artwork\">\n <div className={`w-full h-full transition-all duration-700 ${isLoading ? 'blur-md scale-110' : ''}`}>\n {artworkUrl ? (\n <img\n src={artworkUrl}\n alt={title}\n className=\"w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110\"\n />\n ) : (\n <div className=\"w-full h-full bg-gradient-to-br from-[var(--wf-placeholder-from,#fb923c)] to-[var(--wf-placeholder-to,#ec4899)] flex items-center justify-center\">\n <svg className=\"w-16 h-16 text-white opacity-50\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\" />\n </svg>\n </div>\n )}\n </div>\n\n {isLoading && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]\">\n <div className=\"w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin\" />\n </div>\n )}\n </div>\n );\n});\n\nArtworkOverlay.displayName = 'ArtworkOverlay';\n","import { useState, useEffect } from 'react';\n\nexport const useResizeObserver = (ref: React.RefObject<HTMLElement | null>) => {\n const [width, setWidth] = useState(0);\n\n useEffect(() => {\n if (!ref.current) return;\n\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setWidth(entry.contentRect.width);\n }\n });\n\n observer.observe(ref.current);\n return () => observer.disconnect();\n }, [ref]);\n\n return width;\n};\n","/**\n * Advanced Audio Utilities using Web Audio API\n */\nimport { PeakAnalyzer } from '../core/PeakAnalyzer';\n\n/**\n * Loads audio from a URL, decodes it, and generates a specific number of peaks (samples).\n * \n * This is a high-level utility function that internally manages a `PeakAnalyzer` instance.\n * \n * @param audioUrl The URL of the audio file to analyze.\n * @param samples The number of peaks (bars) to generate. Defaults to 512.\n * @returns A promise resolving to an array of normalized peak values (0 to 1).\n * \n * @example\n * ```typescript\n * const peaks = await generatePeaks('https://example.com/audio.mp3', 256);\n * ```\n */\nexport const generatePeaks = async (audioUrl: string, samples: number = 512): Promise<number[]> => {\n const analyzer = new PeakAnalyzer();\n try {\n return await analyzer.generatePeaks(audioUrl, samples);\n } finally {\n analyzer.dispose();\n }\n};\n\n/**\n * Loads audio into memory as a Blob and returns a temporary Object URL.\n * \n * Useful for ensuring audio data is fully loaded locally before starting \n * playback or analysis, which can help with CORS issues or slow networks.\n * \n * @param url The URL of the remote audio file.\n * @returns A promise resolving to a temporary `blob:` URL.\n */\nexport const loadAudioToMemory = async (url: string): Promise<string> => {\n const response = await fetch(url);\n const blob = await response.blob();\n return URL.createObjectURL(blob);\n};\n\n/**\n * Cleanup function to prevent memory leaks from Object URLs.\n * \n * Call this when a `blob:` URL is no longer needed (e.g., when the component unmounts).\n * \n * @param url The Object URL to revoke.\n */\nexport const revokeAudioMemory = (url: string) => {\n if (url && url.startsWith('blob:')) {\n URL.revokeObjectURL(url);\n }\n};\n","/**\n * Formats seconds into a M:SS string\n */\nexport const formatTime = (seconds: number): string => {\n if (isNaN(seconds)) return '0:00';\n const min = Math.floor(seconds / 60);\n const sec = Math.floor(seconds % 60);\n return `${min}:${sec.toString().padStart(2, '0')}`;\n};\n\n/**\n * Resamples an array of peaks to a target count using bucket-max or linear interpolation\n */\nexport const resamplePeaks = (peaks: number[], targetCount: number): number[] => {\n if (peaks.length === 0) return [];\n if (peaks.length === targetCount) return peaks;\n\n const resampled = new Array(targetCount);\n const ratio = peaks.length / targetCount;\n\n if (ratio > 1) {\n // Downsampling: RMS (Root Mean Square) to preserve dynamics and prevent 'sausage' flattening\n for (let i = 0; i < targetCount; i++) {\n let sumSquares = 0;\n const start = Math.floor(i * ratio);\n const end = Math.floor((i + 1) * ratio);\n const count = end - start;\n for (let j = start; j < end; j++) {\n sumSquares += peaks[j] * peaks[j];\n }\n resampled[i] = count > 0 ? Math.sqrt(sumSquares / count) : 0;\n }\n } else {\n // Upsampling: Linear Interpolation\n for (let i = 0; i < targetCount; i++) {\n const position = i * ratio;\n const index = Math.floor(position);\n const nextIndex = Math.min(index + 1, peaks.length - 1);\n const fraction = position - index;\n resampled[i] = peaks[index] + (peaks[nextIndex] - peaks[index]) * fraction;\n }\n }\n return resampled;\n};\n\n/**\n * High-performance token-based syntax highlighter for React snippets\n */\nexport const highlightCode = (code: string): string[] => {\n return code.split('\\n').map((line) => {\n // 1. Escape basic HTML\n let h = line.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n // 2. Identify and tokenize segments to avoid nested replacement issues\n const tokens: { [key: string]: string } = {};\n let counter = 0;\n const addToken = (val: string, cls: string) => {\n const id = `__TOKEN_${counter++}__`;\n tokens[id] = `<span class=\"${cls}\">${val}</span>`;\n return id;\n };\n\n // Strings\n h = h.replace(/(\"(?:[^\"\\\\]|\\\\.)*\")/g, (m) => addToken(m, 'text-[#ce9178]'));\n // Numbers\n h = h.replace(/\\b(\\d+(\\.\\d+)?)\\b/g, (m) => addToken(m, 'text-[#b5cea8]'));\n // Component Name\n h = h.replace(/\\b(WaveframePlayer)\\b/g, (m) => addToken(m, 'text-[#4ec9b0]'));\n // Props (anything followed by =)\n h = h.replace(/\\b([a-z][a-zA-Z0-9]+)(?==)/g, (m) => addToken(m, 'text-[#9cdcfe]'));\n\n // 3. Style remaining symbols\n h = h.replace(/(<|>|\\{|\\}|\\/|:|,)/g, '<span class=\"text-gray-500\">$1</span>');\n\n // 4. In-place token resolution\n Object.entries(tokens).forEach(([id, html]) => {\n h = h.replace(id, html);\n });\n\n return h;\n });\n};\n\nexport * from './audio';\n","import React, { useRef, useEffect, memo, useMemo } from 'react';\nimport { useResizeObserver } from '../hooks/useResizeObserver';\nimport { WaveframeController } from '../core/WaveframeController';\nimport { useWaveframeStore } from '../hooks/useWaveframeStore';\nimport { resamplePeaks } from '../utils';\n\ninterface WaveformProps {\n /** The WaveframeController instance managing audio state */\n controller: WaveframeController;\n /** Optional pre-computed peaks. If omitted, peaks from the controller are used. */\n peaks?: number[];\n /** Color of the background waveform bars */\n waveColor?: string;\n /** Color of the progress (played) waveform bars */\n progressColor?: string;\n /** Total height of the waveform in pixels */\n height?: number;\n /** \n * Resolution of the waveform. \n * 'auto' matches the container width (1 bar per pixel).\n * A number sets a fixed number of bars.\n */\n resolution?: number | 'auto';\n /** Width of each bar in pixels (if resolution is 'auto') */\n barWidth?: number;\n /** Gap between bars in pixels (if resolution is 'auto') */\n barGap?: number;\n /** Overall amplitude multiplier (default 1.0) */\n amplitude?: number;\n /** Non-linear power scale to increase detail (e.g. 0.7-0.9 reduces 'sausage' look). Default 1.0 (linear). */\n powerScale?: number;\n}\n\n/**\n * A \"smart\" waveform component that visualizes audio progress and allows seeking.\n * \n * It subscribes directly to the provided WaveframeController for high-frequency\n * progress updates, ensuring the parent component remains immune to re-renders.\n */\nexport const Waveform: React.FC<WaveformProps> = memo(({\n controller,\n peaks: providedPeaks,\n waveColor = '#e5e7eb',\n progressColor = '#3b82f6',\n height = 80,\n resolution = 'auto',\n barWidth = 2,\n barGap = 1,\n amplitude = 1.0,\n powerScale = 1.0,\n}) => {\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const progressCanvasRef = useRef<HTMLCanvasElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = useResizeObserver(containerRef);\n\n // Subscribe only to needed state slices\n const currentTime = useWaveframeStore(controller, s => s.currentTime);\n const duration = useWaveframeStore(controller, s => s.duration);\n const enginePeaks = useWaveframeStore(controller, s => s.peaks);\n\n // Determine which peaks to use and resample them\n const peaks = useMemo(() => {\n const rawPeaks = providedPeaks || enginePeaks;\n if (rawPeaks.length === 0) return [];\n \n const targetCount = resolution === 'auto' \n ? Math.floor(containerWidth / (barWidth + barGap))\n : resolution;\n \n let resampled = resamplePeaks(rawPeaks, Math.max(1, targetCount));\n\n // Apply power scaling and amplitude\n if (powerScale !== 1.0 || amplitude !== 1.0) {\n resampled = resampled.map(p => Math.pow(p, powerScale) * amplitude);\n }\n\n return resampled;\n }, [providedPeaks, enginePeaks, containerWidth, resolution, barWidth, barGap, amplitude, powerScale]);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const progressCanvas = progressCanvasRef.current;\n if (!canvas || !progressCanvas) return;\n\n const ctx = canvas.getContext('2d');\n const pCtx = progressCanvas.getContext('2d');\n if (!ctx || !pCtx) return;\n\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.getBoundingClientRect();\n const targetWidth = rect.width * dpr;\n const targetHeight = rect.height * dpr;\n\n [canvas, progressCanvas].forEach(c => {\n if (c.width !== targetWidth || c.height !== targetHeight) {\n c.width = targetWidth;\n c.height = targetHeight;\n }\n });\n\n const draw = () => {\n if (peaks.length === 0) return;\n const { width, height } = canvas;\n \n ctx.clearRect(0, 0, width, height);\n pCtx.clearRect(0, 0, width, height);\n\n const barCount = peaks.length;\n const actualBarTotalWidth = width / barCount;\n const actualBarWidth = typeof resolution === 'number' \n ? actualBarTotalWidth * 0.7 \n : barWidth * dpr;\n const actualBarGap = typeof resolution === 'number'\n ? actualBarTotalWidth * 0.3\n : barGap * dpr;\n\n ctx.lineCap = 'round';\n ctx.lineWidth = actualBarWidth;\n pCtx.lineCap = 'round';\n pCtx.lineWidth = actualBarWidth;\n\n const centerY = height / 2;\n\n peaks.forEach((peak, index) => {\n if (peak <= 0) return;\n \n const x = index * (actualBarWidth + actualBarGap) + actualBarWidth / 2;\n const barHeight = Math.max(actualBarWidth, peak * height * 0.8);\n \n // Center the bar vertically\n const yStart = centerY - barHeight / 2;\n const yEnd = centerY + barHeight / 2;\n\n ctx.beginPath();\n ctx.strokeStyle = waveColor;\n ctx.moveTo(x, yStart);\n ctx.lineTo(x, yEnd);\n ctx.stroke();\n\n pCtx.beginPath();\n pCtx.strokeStyle = progressColor;\n pCtx.moveTo(x, yStart);\n pCtx.lineTo(x, yEnd);\n pCtx.stroke();\n });\n };\n\n draw();\n }, [peaks, waveColor, progressColor, resolution, barWidth, barGap, height]);\n\n const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {\n if (containerRef.current && duration) {\n const rect = containerRef.current.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const percentage = Math.max(0, Math.min(1, x / rect.width));\n controller.seek(percentage);\n }\n };\n\n const progressPercent = duration ? (currentTime / duration) * 100 : 0;\n\n return (\n <div \n ref={containerRef} \n className=\"relative w-full cursor-pointer overflow-hidden\" \n style={{ \n height: `${height}px`,\n // Using CSS variables for easier theming if needed externally\n '--wf-wave-color': waveColor,\n '--wf-progress-color': progressColor,\n } as React.CSSProperties}\n onClick={handleSeek}\n >\n <canvas ref={canvasRef} className=\"absolute inset-0 w-full h-full\" />\n <div \n className=\"absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none\"\n style={{ width: `${progressPercent}%` }}\n >\n <canvas ref={progressCanvasRef} className=\"absolute h-full\" style={{ width: `${containerWidth}px` }} />\n </div>\n </div>\n );\n});\n\nWaveform.displayName = 'Waveform';\n","import React, { memo, useState, useEffect, useMemo } from 'react';\nimport { WaveframeTheme } from '../types';\nimport { WaveframeController } from '../core/WaveframeController';\nimport { useWaveframe } from '../hooks/useWaveframe';\nimport { useWaveframeStore } from '../hooks/useWaveframeStore';\nimport { ArtworkOverlay } from '../molecules/ArtworkOverlay';\nimport { Waveform } from '../organisms/Waveform';\nimport { formatTime } from '../utils';\n\n/**\n * Props for the WaveframePlayer component\n */\nexport interface WaveframePlayerProps {\n /**\n * The audio source to play. Can be a URL string or a Blob/File object.\n */\n media?: string | Blob;\n /**\n * Optional pre-generated peaks for the waveform (0-1 range).\n * If omitted or empty, the player will automatically analyze the media.\n */\n peaks?: number[];\n /**\n * The artwork source to display. Can be a URL string or a Blob/File object.\n */\n artwork?: string | Blob;\n /**\n * The title of the track\n */\n title?: string;\n /**\n * The artist of the track\n */\n artist?: string;\n /**\n * The base color of the waveform bars\n * @default \"#e5e7eb\" (light) or \"#374151\" (dark)\n */\n waveColor?: string;\n /**\n * The color of the played progress part of the waveform\n * @default theme.primary or \"#3b82f6\"\n */\n progressColor?: string;\n /**\n * The height of the waveform in pixels\n * @default 80\n */\n height?: number;\n /**\n * Additional CSS classes for the container\n */\n className?: string;\n /**\n * Inline styles for the container\n */\n style?: React.CSSProperties;\n /**\n * The number of bars to render. Use 'auto' to fit the container width.\n * @default \"auto\"\n */\n resolution?: number | 'auto';\n /**\n * The width of each bar in pixels (if resolution is 'auto')\n * @default 2\n */\n barWidth?: number;\n /**\n * The gap between bars in pixels (if resolution is 'auto')\n * @default 1\n */\n barGap?: number;\n /**\n * Non-linear power scale to increase detail (e.g. 1.0-4.0).\n * @default 1.0\n */\n powerScale?: number;\n /**\n * Custom theme configuration\n */\n theme?: WaveframeTheme;\n /**\n * Optional WaveframeController instance for external control.\n * If provided, the player will sync with this controller instead of creating its own.\n */\n controller?: WaveframeController;\n}\n\n/**\n * The standard \"all-in-one\" Waveframe player component.\n * \n * This component features a SoundCloud-inspired layout with a prominent \n * play/pause button positioned next to the track metadata.\n */\nexport const WaveframePlayer: React.FC<WaveframePlayerProps> = memo(({\n media,\n peaks: propPeaks,\n artwork,\n title,\n artist,\n waveColor: propWaveColor,\n progressColor: propProgressColor,\n height = 80,\n className = '',\n style: propStyle,\n resolution = 'auto',\n barWidth = 2,\n barGap = 1,\n powerScale = 1.0,\n theme,\n controller: providedController,\n}) => {\n // Use the headless hook for controller management\n const { controller } = useWaveframe(media, {\n peaks: propPeaks,\n controller: providedController,\n });\n\n // Subscribe to needed state slices for the UI\n const isPlaying = useWaveframeStore(controller, s => s.isPlaying);\n const isAnalyzing = useWaveframeStore(controller, s => s.isAnalyzing);\n const currentTime = useWaveframeStore(controller, s => s.currentTime);\n const duration = useWaveframeStore(controller, s => s.duration);\n\n // Handle Artwork Blob -> Object URL\n const [resolvedArtworkUrl, setResolvedArtworkUrl] = useState<string | undefined>(\n typeof artwork === 'string' ? artwork : undefined\n );\n\n useEffect(() => {\n if (artwork instanceof Blob) {\n const url = URL.createObjectURL(artwork);\n setResolvedArtworkUrl(url);\n return () => URL.revokeObjectURL(url);\n } else {\n setResolvedArtworkUrl(artwork);\n }\n }, [artwork]);\n\n const waveColor = useMemo(() => {\n if (propWaveColor) return propWaveColor;\n if (theme) return theme.bg === '#ffffff' ? '#e5e7eb' : '#374151';\n return '#e5e7eb';\n }, [propWaveColor, theme]);\n\n const progressColor = propProgressColor || theme?.primary || '#3b82f6';\n\n const mergedStyle = useMemo(() => {\n const baseStyle = {\n '--wf-bg-color': theme?.bg || 'white',\n '--wf-border-color': theme?.border || '#f3f4f6',\n '--wf-title-color': theme?.text || '#111827',\n '--wf-artist-color': theme?.text || '#6b7280',\n '--wf-time-color': theme?.text || '#9ca3af',\n '--wf-play-btn-bg': theme?.primary || '#3b82f6',\n '--wf-placeholder-from': theme?.primary || '#fb923c',\n '--wf-placeholder-to': theme?.bg || '#ec4899',\n };\n return { ...baseStyle, ...propStyle } as React.CSSProperties;\n }, [theme, propStyle]);\n\n return (\n <div\n className={`group relative flex flex-col md:flex-row items-stretch gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${className}`}\n style={mergedStyle}\n >\n <div className=\"flex-shrink-0 w-24 h-24 md:w-32 md:h-32\">\n <ArtworkOverlay \n artworkUrl={resolvedArtworkUrl} \n title={title} \n isLoading={isAnalyzing}\n />\n </div>\n\n <div className=\"flex-1 w-full flex flex-col min-w-0\">\n <div className=\"flex items-center gap-4 mb-6\">\n {/* SoundCloud-style circular play button */}\n <button\n onClick={() => controller.togglePlay()}\n className=\"w-12 h-12 md:w-14 md:h-14 flex-shrink-0 flex items-center justify-center rounded-full bg-[var(--wf-play-btn-bg,#3b82f6)] text-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.2)] transition-all hover:scale-105 active:scale-95 cursor-pointer border-none outline-none group/play\"\n >\n {isPlaying ? (\n <svg className=\"w-6 h-6 md:w-7 md:h-7\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\" />\n </svg>\n ) : (\n <svg className=\"w-6 h-6 md:w-7 md:h-7 ml-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n )}\n </button>\n\n <div className=\"flex-1 flex flex-col min-w-0\">\n <div className=\"flex items-center justify-between gap-4\">\n {artist && (\n <p className=\"text-[10px] md:text-xs font-bold uppercase text-[var(--wf-artist-color,#6b7280)] opacity-60 tracking-[0.1em] line-clamp-1\">\n {artist}\n </p>\n )}\n <div className=\"text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0\">\n {formatTime(currentTime)} / {formatTime(duration)}\n </div>\n </div>\n {title && (\n <h3 className=\"text-lg md:text-xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1 mt-0.5 leading-tight\">\n {title}\n </h3>\n )}\n </div>\n </div>\n\n <div className=\"mt-auto\">\n <Waveform \n controller={controller}\n peaks={propPeaks}\n waveColor={waveColor}\n progressColor={progressColor}\n height={height}\n resolution={resolution}\n barWidth={barWidth}\n barGap={barGap}\n powerScale={powerScale}\n />\n </div>\n </div>\n </div>\n );\n});\n\nWaveframePlayer.displayName = 'WaveframePlayer';\n","import { useMemo } from 'react';\nimport { resamplePeaks } from '../utils';\n\nexport const useResampledPeaks = (peaks: number[], targetCount: number) => {\n return useMemo(() => resamplePeaks(peaks, targetCount), [peaks, targetCount]);\n};\n"]}
|
package/dist/index.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50: oklch(97.1% .013 17.38);--color-red-200: oklch(88.5% .062 18.334);--color-red-300: oklch(80.8% .114 19.571);--color-red-600: oklch(57.7% .245 27.325);--color-orange-50: oklch(98% .016 73.684);--color-orange-100: oklch(95.4% .038 75.164);--color-orange-200: oklch(90.1% .076 70.697);--color-orange-600: oklch(64.6% .222 41.116);--color-green-50: oklch(98.2% .018 155.826);--color-green-100: oklch(96.2% .044 156.743);--color-green-200: oklch(92.5% .084 155.995);--color-green-400: oklch(79.2% .209 151.711);--color-green-600: oklch(62.7% .194 149.214);--color-blue-50: oklch(97% .014 254.604);--color-blue-200: oklch(88.2% .059 254.128);--color-blue-300: oklch(80.9% .105 251.813);--color-blue-400: oklch(70.7% .165 254.624);--color-blue-500: oklch(62.3% .214 259.815);--color-blue-600: oklch(54.6% .245 262.881);--color-blue-700: oklch(48.8% .243 264.376);--color-gray-50: oklch(98.5% .002 247.839);--color-gray-100: oklch(96.7% .003 264.542);--color-gray-200: oklch(92.8% .006 264.531);--color-gray-300: oklch(87.2% .01 258.338);--color-gray-400: oklch(70.7% .022 261.325);--color-gray-500: oklch(55.1% .027 264.364);--color-gray-600: oklch(44.6% .03 256.802);--color-gray-700: oklch(37.3% .034 259.733);--color-gray-800: oklch(27.8% .033 256.848);--color-gray-900: oklch(21% .034 264.665);--color-black: #000;--color-white: #fff;--spacing: .25rem;--container-4xl: 56rem;--container-5xl: 64rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--font-weight-medium: 500;--font-weight-bold: 700;--font-weight-black: 900;--tracking-tighter: -.05em;--tracking-tight: -.025em;--tracking-wide: .025em;--tracking-widest: .1em;--leading-tight: 1.25;--leading-relaxed: 1.625;--radius-lg: .5rem;--radius-xl: .75rem;--ease-out: cubic-bezier(0, 0, .2, 1);--animate-spin: spin 1s linear infinite;--blur-md: 12px;--blur-xl: 24px;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono)}}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::-moz-placeholder{color:currentcolor;@supports (color: color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color: color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.-top-1\/2{top:-50%}.top-0{top:calc(var(--spacing) * 0)}.right-0{right:calc(var(--spacing) * 0)}.-left-1\/2{left:-50%}.left-0{left:calc(var(--spacing) * 0)}.z-20{z-index:20}.container{width:100%;@media(width>=40rem){max-width:40rem}@media(width>=48rem){max-width:48rem}@media(width>=64rem){max-width:64rem}@media(width>=80rem){max-width:80rem}@media(width>=96rem){max-width:96rem}}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-32{margin-top:calc(var(--spacing) * 32)}.mt-auto{margin-top:auto}.mr-4{margin-right:calc(var(--spacing) * 4)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-1{margin-left:calc(var(--spacing) * 1)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.aspect-square{aspect-ratio:1 / 1}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-\[200\%\]{height:200%}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-\[200\%\]{width:200%}.w-full{width:100%}.w-px{width:1px}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.scale-110{--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-12{gap:calc(var(--spacing) * 12)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[var\(--wf-artwork-rounded\,0\.75rem\)\]{border-radius:var(--wf-artwork-rounded,.75rem)}.rounded-\[var\(--wf-rounded\,1rem\)\]{border-radius:var(--wf-rounded,1rem)}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style: dashed;border-style:dashed}.border-none{--tw-border-style: none;border-style:none}.border-\[\#333\]{border-color:#333}.border-\[var\(--wf-border-color\,\#f3f4f6\)\]{border-color:var(--wf-border-color,#f3f4f6)}.border-blue-200{border-color:var(--color-blue-200)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-200\/50{border-color:color-mix(in srgb,oklch(92.8% .006 264.531) 50%,transparent);@supports (color: color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-gray-200) 50%,transparent)}}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-900{border-color:var(--color-gray-900)}.border-green-200{border-color:var(--color-green-200)}.border-orange-200{border-color:var(--color-orange-200)}.border-red-200{border-color:var(--color-red-200)}.border-white\/30{border-color:color-mix(in srgb,#fff 30%,transparent);@supports (color: color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-white) 30%,transparent)}}.border-t-white{border-top-color:var(--color-white)}.bg-\[\#1e1e1e\]{background-color:#1e1e1e}.bg-\[\#252526\]{background-color:#252526}.bg-\[var\(--wf-bg-color\,white\)\]{background-color:var(--wf-bg-color,white)}.bg-\[var\(--wf-play-btn-bg\,\#3b82f6\)\]{background-color:var(--wf-play-btn-bg,#3b82f6)}.bg-black\/10{background-color:color-mix(in srgb,#000 10%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 10%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-50\/50{background-color:color-mix(in srgb,oklch(98.5% .002 247.839) 50%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-gray-50) 50%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-200\/60{background-color:color-mix(in srgb,oklch(92.8% .006 264.531) 60%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-gray-200) 60%,transparent)}}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-orange-50{background-color:var(--color-orange-50)}.bg-white{background-color:var(--color-white)}.bg-white\/70{background-color:color-mix(in srgb,#fff 70%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.bg-gradient-to-br{--tw-gradient-position: to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[var\(--wf-placeholder-from\,\#fb923c\)\]{--tw-gradient-from: var(--wf-placeholder-from,#fb923c);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[var\(--wf-placeholder-to\,\#ec4899\)\]{--tw-gradient-to: var(--wf-placeholder-to,#ec4899);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pb-24{padding-bottom:calc(var(--spacing) * 24)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[13px\]{font-size:13px}.leading-relaxed{--tw-leading: var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading: var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight: var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-\[0\.1em\]{--tw-tracking: .1em;letter-spacing:.1em}.tracking-\[0\.2em\]{--tw-tracking: .2em;letter-spacing:.2em}.tracking-tight{--tw-tracking: var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking: var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-wide{--tw-tracking: var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking: var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-pre{white-space:pre}.text-\[\#4ec9b0\]{color:#4ec9b0}.text-\[\#9cdcfe\]{color:#9cdcfe}.text-\[\#b5cea8\]{color:#b5cea8}.text-\[\#ce9178\]{color:#ce9178}.text-\[var\(--wf-artist-color\,\#6b7280\)\]{color:var(--wf-artist-color,#6b7280)}.text-\[var\(--wf-time-color\,\#9ca3af\)\]{color:var(--wf-time-color,#9ca3af)}.text-\[var\(--wf-title-color\,\#111827\)\]{color:var(--wf-title-color,#111827)}.text-blue-400{color:var(--color-blue-400)}.text-blue-500\/80{color:color-mix(in srgb,oklch(62.3% .214 259.815) 80%,transparent);@supports (color: color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-blue-500) 80%,transparent)}}.text-blue-600{color:var(--color-blue-600)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-600{color:var(--color-green-600)}.text-orange-600{color:var(--color-orange-600)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.accent-blue-600{accent-color:var(--color-blue-600)}.opacity-50{opacity:50%}.opacity-60{opacity:60%}.shadow-2xl{--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_4px_12px_rgba\(0\,0\,0\,0\.15\)\]{--tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(0,0,0,.15));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-blue-500\/30{--tw-shadow-color: color-mix(in srgb, oklch(62.3% .214 259.815) 30%, transparent);@supports (color: color-mix(in lab,red,red)){--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.blur{--tw-blur: blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-md{--tw-blur: blur(var(--blur-md));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[1px\]{--tw-backdrop-blur: blur(1px);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur: blur(var(--blur-xl));backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-100{--tw-duration: .1s;transition-duration:.1s}.duration-300{--tw-duration: .3s;transition-duration:.3s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.duration-700{--tw-duration: .7s;transition-duration:.7s}.ease-linear{--tw-ease: linear;transition-timing-function:linear}.ease-out{--tw-ease: var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style: none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-hover\:text-gray-600{&:is(:where(.group):hover *){@media(hover:hover){color:var(--color-gray-600)}}}.group-hover\/artwork\:scale-110{&:is(:where(.group\/artwork):hover *){@media(hover:hover){--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:scale-105{&:hover{@media(hover:hover){--tw-scale-x: 105%;--tw-scale-y: 105%;--tw-scale-z: 105%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:scale-110{&:hover{@media(hover:hover){--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:border-gray-300{&:hover{@media(hover:hover){border-color:var(--color-gray-300)}}}.hover\:border-red-300{&:hover{@media(hover:hover){border-color:var(--color-red-300)}}}.hover\:bg-blue-700{&:hover{@media(hover:hover){background-color:var(--color-blue-700)}}}.hover\:bg-gray-50{&:hover{@media(hover:hover){background-color:var(--color-gray-50)}}}.hover\:bg-gray-100{&:hover{@media(hover:hover){background-color:var(--color-gray-100)}}}.hover\:bg-green-100{&:hover{@media(hover:hover){background-color:var(--color-green-100)}}}.hover\:bg-orange-100{&:hover{@media(hover:hover){background-color:var(--color-orange-100)}}}.hover\:bg-red-50{&:hover{@media(hover:hover){background-color:var(--color-red-50)}}}.hover\:text-blue-300{&:hover{@media(hover:hover){color:var(--color-blue-300)}}}.hover\:text-blue-600{&:hover{@media(hover:hover){color:var(--color-blue-600)}}}.hover\:text-gray-900{&:hover{@media(hover:hover){color:var(--color-gray-900)}}}.hover\:shadow-2xl{&:hover{@media(hover:hover){--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}.hover\:shadow-\[0_6px_16px_rgba\(0\,0\,0\,0\.2\)\]{&:hover{@media(hover:hover){--tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(0,0,0,.2));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}.hover\:ring-2{&:hover{@media(hover:hover){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}.hover\:ring-blue-500\/20{&:hover{@media(hover:hover){--tw-ring-color: color-mix(in srgb, oklch(62.3% .214 259.815) 20%, transparent);@supports (color: color-mix(in lab,red,red)){--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}}}.focus\:border-blue-200{&:focus{border-color:var(--color-blue-200)}}.focus\:border-blue-500{&:focus{border-color:var(--color-blue-500)}}.focus\:bg-white{&:focus{background-color:var(--color-white)}}.focus\:ring-2{&:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-blue-500\/20{&:focus{--tw-ring-color: color-mix(in srgb, oklch(62.3% .214 259.815) 20%, transparent);@supports (color: color-mix(in lab,red,red)){--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}}.active\:scale-90{&:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}}.active\:scale-95{&:active{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y)}}.active\:scale-\[0\.98\]{&:active{scale:.98}}.md\:h-7{@media(width>=48rem){height:calc(var(--spacing) * 7)}}.md\:h-14{@media(width>=48rem){height:calc(var(--spacing) * 14)}}.md\:h-full{@media(width>=48rem){height:100%}}.md\:w-7{@media(width>=48rem){width:calc(var(--spacing) * 7)}}.md\:w-14{@media(width>=48rem){width:calc(var(--spacing) * 14)}}.md\:w-auto{@media(width>=48rem){width:auto}}.md\:flex-row{@media(width>=48rem){flex-direction:row}}.md\:text-xl{@media(width>=48rem){font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}}.md\:text-xs{@media(width>=48rem){font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}}.lg\:w-96{@media(width>=64rem){width:calc(var(--spacing) * 96)}}.lg\:flex-row{@media(width>=64rem){flex-direction:row}}}@property --tw-scale-x{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: "*"; inherits: false;}@property --tw-gradient-from{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: "*"; inherits: false;}@property --tw-gradient-via-stops{syntax: "*"; inherits: false;}@property --tw-gradient-from-position{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: "<length-percentage>"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: "<length-percentage>"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-tracking{syntax: "*"; inherits: false;}@property --tw-ordinal{syntax: "*"; inherits: false;}@property --tw-slashed-zero{syntax: "*"; inherits: false;}@property --tw-numeric-figure{syntax: "*"; inherits: false;}@property --tw-numeric-spacing{syntax: "*"; inherits: false;}@property --tw-numeric-fraction{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-blur{syntax: "*"; inherits: false;}@property --tw-brightness{syntax: "*"; inherits: false;}@property --tw-contrast{syntax: "*"; inherits: false;}@property --tw-grayscale{syntax: "*"; inherits: false;}@property --tw-hue-rotate{syntax: "*"; inherits: false;}@property --tw-invert{syntax: "*"; inherits: false;}@property --tw-opacity{syntax: "*"; inherits: false;}@property --tw-saturate{syntax: "*"; inherits: false;}@property --tw-sepia{syntax: "*"; inherits: false;}@property --tw-drop-shadow{syntax: "*"; inherits: false;}@property --tw-drop-shadow-color{syntax: "*"; inherits: false;}@property --tw-drop-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-drop-shadow-size{syntax: "*"; inherits: false;}@property --tw-backdrop-blur{syntax: "*"; inherits: false;}@property --tw-backdrop-brightness{syntax: "*"; inherits: false;}@property --tw-backdrop-contrast{syntax: "*"; inherits: false;}@property --tw-backdrop-grayscale{syntax: "*"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: "*"; inherits: false;}@property --tw-backdrop-invert{syntax: "*"; inherits: false;}@property --tw-backdrop-opacity{syntax: "*"; inherits: false;}@property --tw-backdrop-saturate{syntax: "*"; inherits: false;}@property --tw-backdrop-sepia{syntax: "*"; inherits: false;}@property --tw-duration{syntax: "*"; inherits: false;}@property --tw-ease{syntax: "*"; inherits: false;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-blur: initial;--tw-brightness: initial;--tw-contrast: initial;--tw-grayscale: initial;--tw-hue-rotate: initial;--tw-invert: initial;--tw-opacity: initial;--tw-saturate: initial;--tw-sepia: initial;--tw-drop-shadow: initial;--tw-drop-shadow-color: initial;--tw-drop-shadow-alpha: 100%;--tw-drop-shadow-size: initial;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-duration: initial;--tw-ease: initial}}}
|
|
1
|
+
@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50: oklch(97.1% .013 17.38);--color-red-200: oklch(88.5% .062 18.334);--color-red-300: oklch(80.8% .114 19.571);--color-red-600: oklch(57.7% .245 27.325);--color-orange-50: oklch(98% .016 73.684);--color-orange-100: oklch(95.4% .038 75.164);--color-orange-200: oklch(90.1% .076 70.697);--color-orange-600: oklch(64.6% .222 41.116);--color-green-50: oklch(98.2% .018 155.826);--color-green-100: oklch(96.2% .044 156.743);--color-green-200: oklch(92.5% .084 155.995);--color-green-400: oklch(79.2% .209 151.711);--color-green-600: oklch(62.7% .194 149.214);--color-blue-50: oklch(97% .014 254.604);--color-blue-200: oklch(88.2% .059 254.128);--color-blue-300: oklch(80.9% .105 251.813);--color-blue-400: oklch(70.7% .165 254.624);--color-blue-500: oklch(62.3% .214 259.815);--color-blue-600: oklch(54.6% .245 262.881);--color-blue-700: oklch(48.8% .243 264.376);--color-gray-50: oklch(98.5% .002 247.839);--color-gray-100: oklch(96.7% .003 264.542);--color-gray-200: oklch(92.8% .006 264.531);--color-gray-300: oklch(87.2% .01 258.338);--color-gray-400: oklch(70.7% .022 261.325);--color-gray-500: oklch(55.1% .027 264.364);--color-gray-600: oklch(44.6% .03 256.802);--color-gray-700: oklch(37.3% .034 259.733);--color-gray-800: oklch(27.8% .033 256.848);--color-gray-900: oklch(21% .034 264.665);--color-black: #000;--color-white: #fff;--spacing: .25rem;--container-4xl: 56rem;--container-5xl: 64rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--font-weight-medium: 500;--font-weight-bold: 700;--font-weight-black: 900;--tracking-tighter: -.05em;--tracking-tight: -.025em;--tracking-wide: .025em;--tracking-widest: .1em;--leading-tight: 1.25;--leading-relaxed: 1.625;--radius-lg: .5rem;--radius-xl: .75rem;--ease-out: cubic-bezier(0, 0, .2, 1);--animate-spin: spin 1s linear infinite;--blur-md: 12px;--blur-xl: 24px;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono)}}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::-moz-placeholder{color:currentcolor;@supports (color: color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color: color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.-top-1\/2{top:-50%}.top-0{top:calc(var(--spacing) * 0)}.right-0{right:calc(var(--spacing) * 0)}.-left-1\/2{left:-50%}.left-0{left:calc(var(--spacing) * 0)}.z-20{z-index:20}.container{width:100%;@media(width>=40rem){max-width:40rem}@media(width>=48rem){max-width:48rem}@media(width>=64rem){max-width:64rem}@media(width>=80rem){max-width:80rem}@media(width>=96rem){max-width:96rem}}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-32{margin-top:calc(var(--spacing) * 32)}.mt-auto{margin-top:auto}.mr-4{margin-right:calc(var(--spacing) * 4)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-1{margin-left:calc(var(--spacing) * 1)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-\[200\%\]{height:200%}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-\[200\%\]{width:200%}.w-full{width:100%}.w-px{width:1px}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.scale-110{--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-12{gap:calc(var(--spacing) * 12)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[var\(--wf-artwork-rounded\,0\.75rem\)\]{border-radius:var(--wf-artwork-rounded,.75rem)}.rounded-\[var\(--wf-rounded\,1rem\)\]{border-radius:var(--wf-rounded,1rem)}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style: dashed;border-style:dashed}.border-none{--tw-border-style: none;border-style:none}.border-\[\#333\]{border-color:#333}.border-\[var\(--wf-border-color\,\#f3f4f6\)\]{border-color:var(--wf-border-color,#f3f4f6)}.border-blue-200{border-color:var(--color-blue-200)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-200\/50{border-color:color-mix(in srgb,oklch(92.8% .006 264.531) 50%,transparent);@supports (color: color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-gray-200) 50%,transparent)}}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-900{border-color:var(--color-gray-900)}.border-green-200{border-color:var(--color-green-200)}.border-orange-200{border-color:var(--color-orange-200)}.border-red-200{border-color:var(--color-red-200)}.border-white\/30{border-color:color-mix(in srgb,#fff 30%,transparent);@supports (color: color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-white) 30%,transparent)}}.border-t-white{border-top-color:var(--color-white)}.bg-\[\#1e1e1e\]{background-color:#1e1e1e}.bg-\[\#252526\]{background-color:#252526}.bg-\[var\(--wf-bg-color\,white\)\]{background-color:var(--wf-bg-color,white)}.bg-\[var\(--wf-play-btn-bg\,\#3b82f6\)\]{background-color:var(--wf-play-btn-bg,#3b82f6)}.bg-black\/10{background-color:color-mix(in srgb,#000 10%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 10%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-50\/50{background-color:color-mix(in srgb,oklch(98.5% .002 247.839) 50%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-gray-50) 50%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-200\/60{background-color:color-mix(in srgb,oklch(92.8% .006 264.531) 60%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-gray-200) 60%,transparent)}}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-orange-50{background-color:var(--color-orange-50)}.bg-white{background-color:var(--color-white)}.bg-white\/70{background-color:color-mix(in srgb,#fff 70%,transparent);@supports (color: color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.bg-gradient-to-br{--tw-gradient-position: to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[var\(--wf-placeholder-from\,\#fb923c\)\]{--tw-gradient-from: var(--wf-placeholder-from,#fb923c);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[var\(--wf-placeholder-to\,\#ec4899\)\]{--tw-gradient-to: var(--wf-placeholder-to,#ec4899);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pb-24{padding-bottom:calc(var(--spacing) * 24)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[13px\]{font-size:13px}.leading-relaxed{--tw-leading: var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading: var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight: var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-\[0\.1em\]{--tw-tracking: .1em;letter-spacing:.1em}.tracking-\[0\.2em\]{--tw-tracking: .2em;letter-spacing:.2em}.tracking-tight{--tw-tracking: var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking: var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-wide{--tw-tracking: var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking: var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-pre{white-space:pre}.text-\[\#4ec9b0\]{color:#4ec9b0}.text-\[\#9cdcfe\]{color:#9cdcfe}.text-\[\#b5cea8\]{color:#b5cea8}.text-\[\#ce9178\]{color:#ce9178}.text-\[var\(--wf-artist-color\,\#6b7280\)\]{color:var(--wf-artist-color,#6b7280)}.text-\[var\(--wf-time-color\,\#9ca3af\)\]{color:var(--wf-time-color,#9ca3af)}.text-\[var\(--wf-title-color\,\#111827\)\]{color:var(--wf-title-color,#111827)}.text-blue-400{color:var(--color-blue-400)}.text-blue-500\/80{color:color-mix(in srgb,oklch(62.3% .214 259.815) 80%,transparent);@supports (color: color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-blue-500) 80%,transparent)}}.text-blue-600{color:var(--color-blue-600)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-600{color:var(--color-green-600)}.text-orange-600{color:var(--color-orange-600)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.accent-blue-600{accent-color:var(--color-blue-600)}.opacity-50{opacity:50%}.opacity-60{opacity:60%}.shadow-2xl{--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_4px_12px_rgba\(0\,0\,0\,0\.15\)\]{--tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(0,0,0,.15));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-blue-500\/30{--tw-shadow-color: color-mix(in srgb, oklch(62.3% .214 259.815) 30%, transparent);@supports (color: color-mix(in lab,red,red)){--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.blur{--tw-blur: blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-md{--tw-blur: blur(var(--blur-md));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[1px\]{--tw-backdrop-blur: blur(1px);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur: blur(var(--blur-xl));backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-100{--tw-duration: .1s;transition-duration:.1s}.duration-300{--tw-duration: .3s;transition-duration:.3s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.duration-700{--tw-duration: .7s;transition-duration:.7s}.ease-linear{--tw-ease: linear;transition-timing-function:linear}.ease-out{--tw-ease: var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style: none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-hover\:text-gray-600{&:is(:where(.group):hover *){@media(hover:hover){color:var(--color-gray-600)}}}.group-hover\/artwork\:scale-110{&:is(:where(.group\/artwork):hover *){@media(hover:hover){--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:scale-105{&:hover{@media(hover:hover){--tw-scale-x: 105%;--tw-scale-y: 105%;--tw-scale-z: 105%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:scale-110{&:hover{@media(hover:hover){--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:border-gray-300{&:hover{@media(hover:hover){border-color:var(--color-gray-300)}}}.hover\:border-red-300{&:hover{@media(hover:hover){border-color:var(--color-red-300)}}}.hover\:bg-blue-700{&:hover{@media(hover:hover){background-color:var(--color-blue-700)}}}.hover\:bg-gray-50{&:hover{@media(hover:hover){background-color:var(--color-gray-50)}}}.hover\:bg-gray-100{&:hover{@media(hover:hover){background-color:var(--color-gray-100)}}}.hover\:bg-green-100{&:hover{@media(hover:hover){background-color:var(--color-green-100)}}}.hover\:bg-orange-100{&:hover{@media(hover:hover){background-color:var(--color-orange-100)}}}.hover\:bg-red-50{&:hover{@media(hover:hover){background-color:var(--color-red-50)}}}.hover\:text-blue-300{&:hover{@media(hover:hover){color:var(--color-blue-300)}}}.hover\:text-blue-600{&:hover{@media(hover:hover){color:var(--color-blue-600)}}}.hover\:text-gray-900{&:hover{@media(hover:hover){color:var(--color-gray-900)}}}.hover\:shadow-2xl{&:hover{@media(hover:hover){--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}.hover\:shadow-\[0_6px_16px_rgba\(0\,0\,0\,0\.2\)\]{&:hover{@media(hover:hover){--tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(0,0,0,.2));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}.hover\:ring-2{&:hover{@media(hover:hover){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}.hover\:ring-blue-500\/20{&:hover{@media(hover:hover){--tw-ring-color: color-mix(in srgb, oklch(62.3% .214 259.815) 20%, transparent);@supports (color: color-mix(in lab,red,red)){--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}}}.focus\:border-blue-200{&:focus{border-color:var(--color-blue-200)}}.focus\:border-blue-500{&:focus{border-color:var(--color-blue-500)}}.focus\:bg-white{&:focus{background-color:var(--color-white)}}.focus\:ring-2{&:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-blue-500\/20{&:focus{--tw-ring-color: color-mix(in srgb, oklch(62.3% .214 259.815) 20%, transparent);@supports (color: color-mix(in lab,red,red)){--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}}.active\:scale-90{&:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}}.active\:scale-95{&:active{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y)}}.active\:scale-\[0\.98\]{&:active{scale:.98}}.md\:h-7{@media(width>=48rem){height:calc(var(--spacing) * 7)}}.md\:h-14{@media(width>=48rem){height:calc(var(--spacing) * 14)}}.md\:h-32{@media(width>=48rem){height:calc(var(--spacing) * 32)}}.md\:w-7{@media(width>=48rem){width:calc(var(--spacing) * 7)}}.md\:w-14{@media(width>=48rem){width:calc(var(--spacing) * 14)}}.md\:w-32{@media(width>=48rem){width:calc(var(--spacing) * 32)}}.md\:flex-row{@media(width>=48rem){flex-direction:row}}.md\:text-xl{@media(width>=48rem){font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}}.md\:text-xs{@media(width>=48rem){font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}}.lg\:w-96{@media(width>=64rem){width:calc(var(--spacing) * 96)}}.lg\:flex-row{@media(width>=64rem){flex-direction:row}}}@property --tw-scale-x{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: "*"; inherits: false;}@property --tw-gradient-from{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: "*"; inherits: false;}@property --tw-gradient-via-stops{syntax: "*"; inherits: false;}@property --tw-gradient-from-position{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: "<length-percentage>"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: "<length-percentage>"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-tracking{syntax: "*"; inherits: false;}@property --tw-ordinal{syntax: "*"; inherits: false;}@property --tw-slashed-zero{syntax: "*"; inherits: false;}@property --tw-numeric-figure{syntax: "*"; inherits: false;}@property --tw-numeric-spacing{syntax: "*"; inherits: false;}@property --tw-numeric-fraction{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-blur{syntax: "*"; inherits: false;}@property --tw-brightness{syntax: "*"; inherits: false;}@property --tw-contrast{syntax: "*"; inherits: false;}@property --tw-grayscale{syntax: "*"; inherits: false;}@property --tw-hue-rotate{syntax: "*"; inherits: false;}@property --tw-invert{syntax: "*"; inherits: false;}@property --tw-opacity{syntax: "*"; inherits: false;}@property --tw-saturate{syntax: "*"; inherits: false;}@property --tw-sepia{syntax: "*"; inherits: false;}@property --tw-drop-shadow{syntax: "*"; inherits: false;}@property --tw-drop-shadow-color{syntax: "*"; inherits: false;}@property --tw-drop-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-drop-shadow-size{syntax: "*"; inherits: false;}@property --tw-backdrop-blur{syntax: "*"; inherits: false;}@property --tw-backdrop-brightness{syntax: "*"; inherits: false;}@property --tw-backdrop-contrast{syntax: "*"; inherits: false;}@property --tw-backdrop-grayscale{syntax: "*"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: "*"; inherits: false;}@property --tw-backdrop-invert{syntax: "*"; inherits: false;}@property --tw-backdrop-opacity{syntax: "*"; inherits: false;}@property --tw-backdrop-saturate{syntax: "*"; inherits: false;}@property --tw-backdrop-sepia{syntax: "*"; inherits: false;}@property --tw-duration{syntax: "*"; inherits: false;}@property --tw-ease{syntax: "*"; inherits: false;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-blur: initial;--tw-brightness: initial;--tw-contrast: initial;--tw-grayscale: initial;--tw-hue-rotate: initial;--tw-invert: initial;--tw-opacity: initial;--tw-saturate: initial;--tw-sepia: initial;--tw-drop-shadow: initial;--tw-drop-shadow-color: initial;--tw-drop-shadow-alpha: 100%;--tw-drop-shadow-size: initial;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-duration: initial;--tw-ease: initial}}}
|
|
2
2
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
3
3
|
/*# sourceMappingURL=index.css.map */
|