[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_243":244,"_245":246},"routes/_app.x.$handle.$name",{"_100":99,"_32":46,"_109":90,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":60,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",56,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a026a0-60e1-776d-ae32-11e768e16763","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Song={id:number;artist:string;title:string;genre:string;audio_url:string;cover_url?:string;streams:number;earnings:number};\nconst money=(n:number)=>`₦${Number(n||0).toLocaleString()}`;\n\nexport function App(){\n const [songs,setSongs]=useState([]),[search,setSearch]=useState(\"\"),[tab,setTab]=useState(\"home\"),[me,setMe]=useState(null),[playing,setPlaying]=useState(null),[current,setCurrent]=useState(null),[lowData,setLowData]=useState(false);\n const [form,setForm]=useState({title:\"\",genre:\"Afrobeats\",audioFile:null,coverFile:null}); const [msg,setMsg]=useState(\"\");\n async function load(){const r=await fetch(`/api/songs?q=${encodeURIComponent(search)}`);setSongs(await r.json());const m=await fetch('/api/me');setMe(await m.json())}\n useEffect(()=>{load()},[search]);\n async function stream(id:number){const s=songs.find(x=>x.id===id);if(!s)return;setCurrent(s);setPlaying(id);fetch(`/api/recently-played/${id}`,{method:'POST'}).catch(()=>{});const r=await fetch(`/api/stream/start/${id}`,{method:'POST'});const d=await r.json();if(!r.ok)return;window.setTimeout(async()=>{const done=await fetch('/api/stream/complete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({token:d.token})});if(done.ok)load()},30000)}\n async function postSong(e:any){e.preventDefault();if(!form.audioFile||!form.coverFile){setMsg('Choose both an MP3 and cover art.');return}setMsg('Uploading...');const fd=new FormData();fd.append('audio',form.audioFile);const up=await fetch('/api/upload',{method:'POST',body:fd});const ud=await up.json();if(!up.ok){setMsg(ud.error||'Upload failed');return}const cd=new FormData();cd.append('cover',form.coverFile);const cu=await fetch('/api/upload-cover',{method:'POST',body:cd});const cud=await cu.json();if(!cu.ok){setMsg(cud.error||'Cover upload failed');return}const r=await fetch('/api/songs',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({title:form.title,genre:form.genre,audioUrl:ud.audioUrl,coverUrl:cud.coverUrl})});const d=await r.json();setMsg(r.ok?'Song published successfully!':d.error||'Could not publish');if(r.ok){setForm({title:'',genre:'Afrobeats',audioFile:null,coverFile:null});load()}}\n return

MELORY

⌕setSearch(e.target.value)} placeholder=\"Search songs, artists...\" className=\"w-full rounded-full bg-[#222] pl-10 pr-4 py-2.5 outline-none\"/>

{tab==='studio'?:tab==='library'?:tab==='admin'&&me?.user?.username==='seetyboy0707'?:<>

Your music. Your audience.

Stream music.
Discover new artists.

Listen to independent artists, discover new sounds and support the music you love.

🔥 Trending music

See all

{songs.slice(0,8).map(s=>stream(s.id)} playing={playing===s.id}/>)}

🎵 New releases

{songs.slice(0,10).map(s=>stream(s.id)}/>)}

}

{current&&

{current.cover_url?

🎵

}

{current.title}

{current.artist}

}

setTab('home')}/>setTab('discover')}/>setTab('studio')}/>setTab('studio')}/>

}\nfunction Nav({active,onClick,text}:any){return }\nfunction Pill({text}:{text:string}){return }\nfunction MusicTile({s,onPlay,playing}:{s:Song,onPlay:()=>void,playing:boolean}){return

{s.cover_url?

🎵

}

{s.title}

{s.artist}

}\nfunction ListSong({s,onPlay}:{s:Song,onPlay:()=>void}){return

{s.cover_url?

🎵

}

{s.title}

{s.artist} • {s.genre}

{s.streams} plays

}\nfunction Bottom({text,label,active,onClick}:any){return }\nfunction Library({songs}:{songs:Song[]}){const [recent,setRecent]=useState([]),[playlists,setPlaylists]=useState([]),[name,setName]=useState('');useEffect(()=>{fetch('/api/recently-played').then(r=>r.json()).then(setRecent);fetch('/api/playlists').then(r=>r.json()).then(x=>{if(Array.isArray(x))setPlaylists(x)})},[]);return

Your Library

Create playlist

setName(e.target.value)} placeholder=\"Playlist name\" className=\"flex-1 rounded-xl bg-[#222] px-4 py-3\"/>

{playlists.length>0&&

{playlists.map(p=>

🎧 {p.name} · {p.song_count} songs

)}

}

Recently played

{recent.length?

{recent.slice(0,10).map(s=>{}}/>)}

Your recently played songs will appear here.

}

}\n\n\nfunction Monetization({me}:any){const [ref,setRef]=useState(''),[proof,setProof]=useState(''),[msg,setMsg]=useState('');const [plan,setPlan]=useState('free');useEffect(()=>{fetch('/api/monetization').then(r=>r.json()).then(d=>setPlan(d.subscription?.plan??'free'))},[]);return

MELORY PREMIUM

Listen without ads

Premium: ₦1,500/month. Pay by bank transfer and wait for admin approval.

{plan==='premium'?

Premium active

setRef(e.target.value)} placeholder=\"Transfer reference\" className=\"w-full rounded-xl bg-[#222] border border-white/10 px-4 py-3\"/>setProof(e.target.value)} placeholder=\"Payment proof URL (optional)\" className=\"w-full rounded-xl bg-[#222] border border-white/10 px-4 py-3\"/>{msg&&

{msg}

}

}\nfunction Studio({me,form,setForm,postSong,msg}:any){return

Artist Studio

{me?.loggedIn?<>

:Login as Artist}

}\nfunction ArtistEditor({me}:any){const [name,setName]=useState(me?.user?.username??''),[bio,setBio]=useState(''),[avatar,setAvatar]=useState(''),[m,setM]=useState('');useEffect(()=>{fetch(`/api/artist/${encodeURIComponent(me.user.username)}`).then(r=>r.json()).then(d=>{setName(d.artist?.display_name??me.user.username);setBio(d.artist?.bio??'');setAvatar(d.artist?.avatar_url??'')})},[me]);return

Artist profile

setName(e.target.value)} placeholder=\"Artist name\" className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"/>

setBio(e.target.value)} placeholder=\"Your bio\" rows={4} className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"/><input value={avatar} onChange={e=>setAvatar(e.target.value)} placeholder=\"Profile photo URL\" className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"/><button onClick={async()=>{const r=await fetch('/api/artist/profile',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({displayName:name,bio,avatarUrl:avatar})});setM(r.ok?'Profile saved':'Could not save')}} className=\"w-full py-3 rounded-xl bg-white text-black font-bold\">Save Profile</button>{m&&<p className=\"mt-3 text-emerald-400\">{m}</p>}</div>}\nfunction Stat({label,value}:any){return <div className=\"rounded-2xl bg-[#151515] border border-white/10 p-5\"><div className=\"text-slate-500 text-sm\">{label}</div><div className=\"text-2xl font-black mt-1\">{value}</div></div>}\n\nfunction AdminPanel(){const [payments,setPayments]=useState<any[]>([]),[withdrawals,setWithdrawals]=useState<any[]>([]);const load=()=>{fetch('/api/admin/payments').then(r=>r.json()).then(setPayments);fetch('/api/admin/withdrawals').then(r=>r.json()).then(setWithdrawals)};useEffect(load,[]);const review=async(id:number,status:string)=>{await fetch(`/api/admin/payments/${id}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({status})});load()};const pay=async(id:number,status:string)=>{await fetch(`/api/admin/withdrawals/${id}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({status})});load()};return <div><div className=\"text-orange-500 text-sm font-bold\">ADMIN</div><h1 className=\"text-3xl md:text-4xl font-black\">Money Center</h1><div className=\"grid lg:grid-cols-2 gap-6 mt-7\"><section className=\"rounded-2xl bg-[#151515] border border-white/10 p-5\"><h2 className=\"text-xl font-black mb-4\">Premium payments</h2>{payments.length===0?<p className=\"text-slate-500\">No payment requests.</p>:payments.map(p=><div key={p.id} className=\"border-b border-white/10 py-4\"><div className=\"font-bold\">{p.username} — {money(p.amount)}</div><div className=\"text-sm text-slate-500\">Ref: {p.reference} • {p.status}</div>{p.status==='pending'&&<div className=\"flex gap-2 mt-3\"><button onClick={()=>review(p.id,'approved')} className=\"px-3 py-2 rounded-lg bg-emerald-500 text-black font-bold\">Approve</button><button onClick={()=>review(p.id,'rejected')} className=\"px-3 py-2 rounded-lg bg-red-500 font-bold\">Reject</button></div>}</div>)}</section><section className=\"rounded-2xl bg-[#151515] border border-white/10 p-5\"><h2 className=\"text-xl font-black mb-4\">Artist withdrawals</h2>{withdrawals.length===0?<p className=\"text-slate-500\">No withdrawals.</p>:withdrawals.map(w=><div key={w.id} className=\"border-b border-white/10 py-4\"><div className=\"font-bold\">{w.artist} — {money(w.amount)}</div><div className=\"text-sm text-slate-500\">{w.bank_name} • {w.account_number} • {w.status}</div>{w.status==='pending'&&<div className=\"flex gap-2 mt-3\"><button onClick={()=>pay(w.id,'paid')} className=\"px-3 py-2 rounded-lg bg-emerald-500 text-black font-bold\">Mark Paid</button><button onClick={()=>pay(w.id,'rejected')} className=\"px-3 py-2 rounded-lg bg-red-500 font-bold\">Reject</button></div>}</div>)}</section></div></div>}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Song={id:number;artist:string;title:string;genre:string;audio_url:string;cover_url?:string;streams:number;earnings:number};\nconst money=(n:number)=>`₦${Number(n||0).toLocaleString()}`;\n\nexport function App(){\n const [songs,setSongs]=useState<Song[]>([]),[search,setSearch]=useState(\"\"),[tab,setTab]=useState(\"home\"),[me,setMe]=useState<any>(null),[playing,setPlaying]=useState<number|null>(null),[current,setCurrent]=useState<Song|null>(null),[lowData,setLowData]=useState(false);\n const [form,setForm]=useState<any>({title:\"\",genre:\"Afrobeats\",audioFile:null,coverFile:null}); const [msg,setMsg]=useState(\"\");\n async function load(){const r=await fetch(`/api/songs?q=${encodeURIComponent(search)}`);setSongs(await r.json());const m=await fetch('/api/me');setMe(await m.json())}\n useEffect(()=>{load()},[search]);\n async function stream(id:number){const s=songs.find(x=>x.id===id);if(!s)return;setCurrent(s);setPlaying(id);fetch(`/api/recently-played/${id}`,{method:'POST'}).catch(()=>{});const r=await fetch(`/api/stream/start/${id}`,{method:'POST'});const d=await r.json();if(!r.ok)return;window.setTimeout(async()=>{const done=await fetch('/api/stream/complete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({token:d.token})});if(done.ok)load()},30000)}\n async function postSong(e:any){e.preventDefault();if(!form.audioFile||!form.coverFile){setMsg('Choose both an MP3 and cover art.');return}setMsg('Uploading...');const fd=new FormData();fd.append('audio',form.audioFile);const up=await fetch('/api/upload',{method:'POST',body:fd});const ud=await up.json();if(!up.ok){setMsg(ud.error||'Upload failed');return}const cd=new FormData();cd.append('cover',form.coverFile);const cu=await fetch('/api/upload-cover',{method:'POST',body:cd});const cud=await cu.json();if(!cu.ok){setMsg(cud.error||'Cover upload failed');return}const r=await fetch('/api/songs',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({title:form.title,genre:form.genre,audioUrl:ud.audioUrl,coverUrl:cud.coverUrl})});const d=await r.json();setMsg(r.ok?'Song published successfully!':d.error||'Could not publish');if(r.ok){setForm({title:'',genre:'Afrobeats',audioFile:null,coverFile:null});load()}}\n return <div className=\"min-h-screen bg-[#090909] text-white pb-24 md:pb-8\"><header className=\"sticky top-0 z-30 bg-[#111]/95 backdrop-blur border-b border-white/10\"><div className=\"max-w-7xl mx-auto px-4 h-16 flex items-center gap-6\"><div className=\"font-black text-2xl tracking-tight text-orange-500\">MELORY</div><div className=\"hidden md:flex flex-1 max-w-xl relative\"><span className=\"absolute left-4 top-3 text-slate-500\">⌕</span><input value={search} onChange={e=>setSearch(e.target.value)} placeholder=\"Search songs, artists...\" className=\"w-full rounded-full bg-[#222] pl-10 pr-4 py-2.5 outline-none\"/></div><nav className=\"ml-auto hidden md:flex gap-2\"><Nav active={tab==='home'} onClick={()=>setTab('home')} text=\"Home\"/><Nav active={tab==='discover'} onClick={()=>setTab('discover')} text=\"Discover\"/><Nav active={tab==='library'} onClick={()=>setTab('library')} text=\"Library\"/><Nav active={tab==='studio'} onClick={()=>setTab('studio')} text=\"Artist Studio\"/>{me?.user?.username==='seetyboy0707'&&<Nav active={tab==='admin'} onClick={()=>setTab('admin')} text=\"Admin\"/>}</nav>{me?.loggedIn?<form action=\"/auth/logout\" method=\"post\"><button className=\"text-sm text-slate-300\">Log out</button></form>:<a href=\"/auth/login\" className=\"px-4 py-2 rounded-full bg-orange-500 font-bold text-sm\">Login</a>}</div></header>\n <main className=\"max-w-7xl mx-auto px-4 py-6\">{tab==='studio'?<Studio me={me} form={form} setForm={setForm} postSong={postSong} msg={msg}/>:tab==='library'?<Library songs={songs}/>:tab==='admin'&&me?.user?.username==='seetyboy0707'?<AdminPanel/>:<><section className=\"rounded-3xl overflow-hidden bg-gradient-to-r from-orange-600/30 via-red-600/15 to-transparent border border-white/10 p-7 md:p-12\"><p className=\"text-orange-400 font-bold uppercase text-sm\">Your music. Your audience.</p><h1 className=\"text-4xl md:text-6xl font-black mt-2\">Stream music.<br/>Discover new artists.</h1><p className=\"text-slate-300 max-w-xl mt-4\">Listen to independent artists, discover new sounds and support the music you love.</p></section><div className=\"mt-8 flex gap-3 overflow-x-auto\"><Pill text=\"All\"/><Pill text=\"Afrobeats\"/><Pill text=\"Amapiano\"/><Pill text=\"Afro Fusion\"/><Pill text=\"Hip-Hop\"/><Pill text=\"R&B\"/></div><section className=\"mt-8\"><div className=\"flex justify-between items-center mb-4\"><h2 className=\"text-2xl font-black\">🔥 Trending music</h2><span className=\"text-orange-400 text-sm\">See all</span></div><div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">{songs.slice(0,8).map(s=><MusicTile key={s.id} s={s} onPlay={()=>stream(s.id)} playing={playing===s.id}/>)}</div></section><section className=\"mt-10\"><h2 className=\"text-2xl font-black mb-4\">🎵 New releases</h2><div className=\"space-y-2\">{songs.slice(0,10).map(s=><ListSong key={s.id} s={s} onPlay={()=>stream(s.id)}/>)}</div></section><Monetization me={me}/></>}</main>{current&&<div className=\"fixed bottom-16 md:bottom-4 left-2 right-2 md:left-auto md:right-6 md:w-[420px] z-50 rounded-2xl bg-[#181818]/95 backdrop-blur border border-white/10 p-3 shadow-2xl\"><div className=\"flex items-center gap-3\"><div className=\"w-12 h-12 rounded-lg overflow-hidden bg-[#222] shrink-0\">{current.cover_url?<img src={current.cover_url} className=\"w-full h-full object-cover\"/>:<div className=\"h-full grid place-items-center\">🎵</div>}</div><div className=\"min-w-0 flex-1\"><div className=\"font-bold truncate\">{current.title}</div><div className=\"text-xs text-slate-500 truncate\">{current.artist}</div></div><div className=\"flex gap-1\"><button onClick={()=>{const i=songs.findIndex(x=>x.id===current.id);const prev=songs[(i-1+songs.length)%songs.length];if(prev){setCurrent(prev);setPlaying(prev.id)}}} className=\"text-lg px-2 rounded-lg bg-white/10\">⏮</button><button onClick={()=>{const i=songs.findIndex(x=>x.id===current.id);const next=songs[(i+1)%songs.length];if(next){setCurrent(next);setPlaying(next.id)}}} className=\"text-lg px-2 rounded-lg bg-white/10\">⏭</button><button onClick={()=>setLowData(!lowData)} className=\"text-xs px-2 py-1 rounded-lg bg-white/10\">{lowData?'Low data':'HD'}</button></div></div><audio autoPlay controls className=\"w-full mt-2\" src={current.audio_url} onEnded={()=>{const i=songs.findIndex(x=>x.id===current.id);const next=songs[(i+1)%Math.max(songs.length,1)];if(next){setCurrent(next);setPlaying(next.id)}}}/></div>}<div className=\"md:hidden fixed bottom-0 left-0 right-0 z-40 bg-[#151515] border-t border-white/10 flex justify-around py-3\"><Bottom text=\"⌂\" label=\"Home\" active={tab==='home'} onClick={()=>setTab('home')}/><Bottom text=\"⌕\" label=\"Search\" active={tab==='discover'} onClick={()=>setTab('discover')}/><Bottom text=\"＋\" label=\"Upload\" active={tab==='studio'} onClick={()=>setTab('studio')}/><Bottom text=\"♙\" label=\"Profile\" active={false} onClick={()=>setTab('studio')}/></div></div>}\nfunction Nav({active,onClick,text}:any){return <button onClick={onClick} className={`px-4 py-2 rounded-full text-sm ${active?'bg-orange-500 text-white font-bold':'text-slate-300 hover:bg-white/10'}`}>{text}</button>}\nfunction Pill({text}:{text:string}){return <button className=\"px-5 py-2 rounded-full bg-[#1d1d1d] border border-white/10 whitespace-nowrap text-sm hover:border-orange-500\">{text}</button>}\nfunction MusicTile({s,onPlay,playing}:{s:Song,onPlay:()=>void,playing:boolean}){return <div className=\"group\"><div className=\"aspect-square rounded-2xl overflow-hidden bg-[#202020] relative\">{s.cover_url?<img src={s.cover_url} className=\"w-full h-full object-cover\"/>:<div className=\"w-full h-full grid place-items-center text-5xl\">🎵</div>}<button onClick={onPlay} className=\"absolute bottom-3 right-3 w-11 h-11 rounded-full bg-orange-500 shadow-xl font-bold\">{playing?'Ⅱ':'▶'}</button></div><h3 className=\"font-bold mt-3 truncate\">{s.title}</h3><a href={`/artist/${encodeURIComponent(s.artist)}`} className=\"text-sm text-slate-400 truncate block\">{s.artist}</a></div>}\nfunction ListSong({s,onPlay}:{s:Song,onPlay:()=>void}){return <div className=\"flex items-center gap-3 p-3 rounded-xl hover:bg-white/5\"><div className=\"w-14 h-14 rounded-lg overflow-hidden bg-[#222] shrink-0\">{s.cover_url?<img src={s.cover_url} className=\"w-full h-full object-cover\"/>:<div className=\"h-full grid place-items-center\">🎵</div>}</div><button onClick={onPlay} className=\"w-9 h-9 rounded-full bg-orange-500 font-bold\">▶</button><div className=\"min-w-0 flex-1\"><div className=\"font-semibold truncate\">{s.title}</div><div className=\"text-sm text-slate-500 truncate\">{s.artist} • {s.genre}</div></div><div className=\"hidden sm:block text-xs text-slate-500\">{s.streams} plays</div></div>}\nfunction Bottom({text,label,active,onClick}:any){return <button onClick={onClick} className={`text-center text-xs ${active?'text-orange-500':'text-slate-400'}`}><div className=\"text-xl\">{text}</div>{label}</button>}\nfunction Library({songs}:{songs:Song[]}){const [recent,setRecent]=useState<Song[]>([]),[playlists,setPlaylists]=useState<any[]>([]),[name,setName]=useState('');useEffect(()=>{fetch('/api/recently-played').then(r=>r.json()).then(setRecent);fetch('/api/playlists').then(r=>r.json()).then(x=>{if(Array.isArray(x))setPlaylists(x)})},[]);return <section className=\"mt-10\"><h2 className=\"text-2xl font-black\">Your Library</h2><div className=\"mt-5 rounded-2xl bg-[#151515] border border-white/10 p-5\"><h3 className=\"font-bold\">Create playlist</h3><div className=\"flex gap-2 mt-3\"><input value={name} onChange={e=>setName(e.target.value)} placeholder=\"Playlist name\" className=\"flex-1 rounded-xl bg-[#222] px-4 py-3\"/><button onClick={async()=>{if(!name.trim())return;const r=await fetch('/api/playlists',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});if(r.ok){setPlaylists([...playlists,(await r.json()).playlist]);setName('')}}} className=\"px-4 rounded-xl bg-orange-500 font-bold\">Create</button></div>{playlists.length>0&&<div className=\"mt-4 text-sm text-slate-400\">{playlists.map(p=><div key={p.id} className=\"py-2\">🎧 {p.name} · {p.song_count} songs</div>)}</div>}</div><h3 className=\"text-xl font-bold mt-8 mb-3\">Recently played</h3>{recent.length?<div className=\"space-y-2\">{recent.slice(0,10).map(s=><ListSong key={s.id} s={s} onPlay={()=>{}}/>)}</div>:<p className=\"text-slate-500\">Your recently played songs will appear here.</p>}</section>}\n\n\nfunction Monetization({me}:any){const [ref,setRef]=useState(''),[proof,setProof]=useState(''),[msg,setMsg]=useState('');const [plan,setPlan]=useState('free');useEffect(()=>{fetch('/api/monetization').then(r=>r.json()).then(d=>setPlan(d.subscription?.plan??'free'))},[]);return <section className=\"mt-10 rounded-3xl bg-[#151515] border border-white/10 p-6\"><div className=\"text-orange-500 text-sm font-bold\">MELORY PREMIUM</div><h2 className=\"text-2xl font-black mt-1\">Listen without ads</h2><p className=\"text-slate-400 mt-2\">Premium: ₦1,500/month. Pay by bank transfer and wait for admin approval.</p>{plan==='premium'?<div className=\"mt-4 text-emerald-400 font-bold\">Premium active</div>:<div className=\"mt-4 grid md:grid-cols-2 gap-3\"><input value={ref} onChange={e=>setRef(e.target.value)} placeholder=\"Transfer reference\" className=\"w-full rounded-xl bg-[#222] border border-white/10 px-4 py-3\"/><input value={proof} onChange={e=>setProof(e.target.value)} placeholder=\"Payment proof URL (optional)\" className=\"w-full rounded-xl bg-[#222] border border-white/10 px-4 py-3\"/><button onClick={async()=>{const r=await fetch('/api/subscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({reference:ref,proofUrl:proof})});const d=await r.json();setMsg(r.ok?'Payment submitted for admin approval.':d.error||'Could not submit')}} className=\"md:col-span-2 py-3 rounded-xl bg-orange-500 font-black\">Submit ₦1,500 Payment</button>{msg&&<div className=\"md:col-span-2 text-sm text-emerald-400\">{msg}</div>}</div>}</section>}\nfunction Studio({me,form,setForm,postSong,msg}:any){return <div><h1 className=\"text-3xl md:text-4xl font-black\">Artist Studio</h1>{me?.loggedIn?<><div className=\"grid md:grid-cols-3 gap-4 mt-6\"><Stat label=\"Songs\" value={me.stats?.songs??0}/><Stat label=\"Streams\" value={me.stats?.streams??0}/><Stat label=\"Earnings\" value={money(me.stats?.earnings??0)}/></div><div className=\"grid lg:grid-cols-2 gap-6 mt-6\"><ArtistEditor me={me}/><form onSubmit={postSong} className=\"rounded-2xl bg-[#151515] border border-white/10 p-6\"><h2 className=\"text-xl font-bold mb-5\">Upload music</h2><input required value={form.title} onChange={e=>setForm({...form,title:e.target.value})} placeholder=\"Song title\" className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"/><label className=\"upload\">🎧 Choose MP3<input required type=\"file\" accept=\"audio/mpeg,.mp3\" onChange={e=>setForm({...form,audioFile:e.target.files?.[0]})}/></label><label className=\"upload\">🖼️ Choose cover art<input required type=\"file\" accept=\"image/jpeg,image/png,image/webp\" onChange={e=>setForm({...form,coverFile:e.target.files?.[0]})}/></label><select value={form.genre} onChange={e=>setForm({...form,genre:e.target.value})} className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"><option>Afrobeats</option><option>Afro Fusion</option><option>Amapiano</option><option>Hip-Hop</option><option>R&B</option><option>Gospel</option></select><button className=\"w-full py-3 rounded-xl bg-orange-500 font-black\">Publish Song</button>{msg&&<p className=\"mt-3 text-emerald-400\">{msg}</p>}</form></div></>:<a href=\"/auth/login\" className=\"inline-block mt-6 px-6 py-3 rounded-full bg-orange-500 font-bold\">Login as Artist</a>}</div>}\nfunction ArtistEditor({me}:any){const [name,setName]=useState(me?.user?.username??''),[bio,setBio]=useState(''),[avatar,setAvatar]=useState(''),[m,setM]=useState('');useEffect(()=>{fetch(`/api/artist/${encodeURIComponent(me.user.username)}`).then(r=>r.json()).then(d=>{setName(d.artist?.display_name??me.user.username);setBio(d.artist?.bio??'');setAvatar(d.artist?.avatar_url??'')})},[me]);return <div className=\"rounded-2xl bg-[#151515] border border-white/10 p-6\"><h2 className=\"text-xl font-bold mb-4\">Artist profile</h2><input value={name} onChange={e=>setName(e.target.value)} placeholder=\"Artist name\" className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"/><textarea value={bio} onChange={e=>setBio(e.target.value)} placeholder=\"Your bio\" rows={4} className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"/><input value={avatar} onChange={e=>setAvatar(e.target.value)} placeholder=\"Profile photo URL\" className=\"w-full mb-3 rounded-xl bg-[#222] border border-white/10 px-4 py-3 outline-none focus:border-orange-500\"/><button onClick={async()=>{const r=await fetch('/api/artist/profile',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({displayName:name,bio,avatarUrl:avatar})});setM(r.ok?'Profile saved':'Could not save')}} className=\"w-full py-3 rounded-xl bg-white text-black font-bold\">Save Profile</button>{m&&<p className=\"mt-3 text-emerald-400\">{m}</p>}</div>}\nfunction Stat({label,value}:any){return <div className=\"rounded-2xl bg-[#151515] border border-white/10 p-5\"><div className=\"text-slate-500 text-sm\">{label}</div><div className=\"text-2xl font-black mt-1\">{value}</div></div>}\n\nfunction AdminPanel(){const [payments,setPayments]=useState<any[]>([]),[withdrawals,setWithdrawals]=useState<any[]>([]);const load=()=>{fetch('/api/admin/payments').then(r=>r.json()).then(setPayments);fetch('/api/admin/withdrawals').then(r=>r.json()).then(setWithdrawals)};useEffect(load,[]);const review=async(id:number,status:string)=>{await fetch(`/api/admin/payments/${id}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({status})});load()};const pay=async(id:number,status:string)=>{await fetch(`/api/admin/withdrawals/${id}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({status})});load()};return <div><div className=\"text-orange-500 text-sm font-bold\">ADMIN</div><h1 className=\"text-3xl md:text-4xl font-black\">Money Center</h1><div className=\"grid lg:grid-cols-2 gap-6 mt-7\"><section className=\"rounded-2xl bg-[#151515] border border-white/10 p-5\"><h2 className=\"text-xl font-black mb-4\">Premium payments</h2>{payments.length===0?<p className=\"text-slate-500\">No payment requests.</p>:payments.map(p=><div key={p.id} className=\"border-b border-white/10 py-4\"><div className=\"font-bold\">{p.username} — {money(p.amount)}</div><div className=\"text-sm text-slate-500\">Ref: {p.reference} • {p.status}</div>{p.status==='pending'&&<div className=\"flex gap-2 mt-3\"><button onClick={()=>review(p.id,'approved')} className=\"px-3 py-2 rounded-lg bg-emerald-500 text-black font-bold\">Approve</button><button onClick={()=>review(p.id,'rejected')} className=\"px-3 py-2 rounded-lg bg-red-500 font-bold\">Reject</button></div>}</div>)}</section><section className=\"rounded-2xl bg-[#151515] border border-white/10 p-5\"><h2 className=\"text-xl font-black mb-4\">Artist withdrawals</h2>{withdrawals.length===0?<p className=\"text-slate-500\">No withdrawals.</p>:withdrawals.map(w=><div key={w.id} className=\"border-b border-white/10 py-4\"><div className=\"font-bold\">{w.artist} — {money(w.amount)}</div><div className=\"text-sm text-slate-500\">{w.bank_name} • {w.account_number} • {w.status}</div>{w.status==='pending'&&<div className=\"flex gap-2 mt-3\"><button onClick={()=>pay(w.id,'paid')} className=\"px-3 py-2 rounded-lg bg-emerald-500 text-black font-bold\">Mark Paid</button><button onClick={()=>pay(w.id,'rejected')} className=\"px-3 py-2 rounded-lg bg-red-500 font-bold\">Reject</button></div>}</div>)}</section></div></div>}\n","createdAt",["D",1787356510441],"branchVersion","branchId","a80d385e-82dc-400f-9953-f549de99067d","id","1cfd617f-8255-4df8-a6c6-df2a71123228","artist-music-earn",["D",1787354439816],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Artist music streaming and earnings platform","imageUrl","2332cfd1-d5ff-4b53-859a-5df4fd9a5769","pinnedFileId","01a026a0-60e1-776d-ae32-36fd7444e775","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0269d-ab55-72dd-93ce-e912a66ca2e1","tursoName","1cfd617f82554df8a6c6df2a71123228","tursoHostname","1cfd617f82554df8a6c6df2a71123228-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789532458193],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":56,"_105":106,"_107":25},"branch",{"_13":14,"_32":90,"_44":43,"_91":45,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":46,"_98":99},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","seetyboy0707","handle","displayName","SEETY BOY","avatar","https://lh3.googleusercontent.com/a/ACg8ocLqJicsiZjQBS4n3uUOhJKzIE7p87MEqTaL1odjPWw8g7WTag=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":238,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":239,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":240,"_85":241,"_87":242,"_89":25},"tree",[175,182,183,184],"files",[175,176,177,178,179,180,181,182,183,184],"counts",{"_165":64,"_166":149,"_167":64,"_168":169,"_170":171},"contents",[131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":159,"_32":160,"_30":161,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":162,"_13":64,"_34":163,"_36":-5,"_24":25,"_144":-5,"_27":164},{"_44":153,"_32":154,"_30":155,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":156,"_13":64,"_34":20,"_36":157,"_24":25,"_144":-5,"_27":158},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":150,"_13":64,"_34":20,"_36":151,"_24":25,"_144":-5,"_27":152},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":140,"_13":141,"_34":142,"_36":143,"_24":25,"_144":-5,"_27":145},"40a14248-f411-4d08-a7f8-02d80f8bdaf4","index.ts","parentId",47,"latest",["D",1787356160866],23,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst app = new Hono();\n\nasync function initDb() {\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS songs (\n    id INTEGER PRIMARY KEY AUTOINCREMENT, artist TEXT NOT NULL, title TEXT NOT NULL,\n    genre TEXT NOT NULL, audio_url TEXT NOT NULL, cover_url TEXT, streams INTEGER NOT NULL DEFAULT 0,\n    earnings INTEGER NOT NULL DEFAULT 0, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS artists (\n    username TEXT PRIMARY KEY, display_name TEXT, bio TEXT DEFAULT '', avatar_url TEXT DEFAULT '',\n    verified INTEGER NOT NULL DEFAULT 0, followers INTEGER NOT NULL DEFAULT 0, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS likes (\n    username TEXT NOT NULL, song_id INTEGER NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n    UNIQUE(username,song_id)\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS follows (\n    follower TEXT NOT NULL, artist TEXT NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n    UNIQUE(follower,artist)\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS withdrawals (\n    id INTEGER PRIMARY KEY AUTOINCREMENT, artist TEXT NOT NULL, amount INTEGER NOT NULL,\n    bank_name TEXT, account_number TEXT, status TEXT NOT NULL DEFAULT 'pending', created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS subscriptions (\n    id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL UNIQUE, plan TEXT NOT NULL DEFAULT 'free',\n    status TEXT NOT NULL DEFAULT 'active', started_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS payment_requests (\n    id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, amount INTEGER NOT NULL,\n    reference TEXT NOT NULL, proof_url TEXT, status TEXT NOT NULL DEFAULT 'pending',\n    created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP, reviewed_at TEXT\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS ad_events (\n    id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, placement TEXT NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS stream_sessions (\n    token TEXT PRIMARY KEY, song_id INTEGER NOT NULL, username TEXT, started_at INTEGER NOT NULL,\n    completed INTEGER NOT NULL DEFAULT 0, ip_hash TEXT\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS reports (\n    id INTEGER PRIMARY KEY AUTOINCREMENT, reporter TEXT, song_id INTEGER, reason TEXT NOT NULL,\n    details TEXT DEFAULT '', status TEXT NOT NULL DEFAULT 'pending', created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS playlists (\n    id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, name TEXT NOT NULL,\n    created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP, UNIQUE(username,name)\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS playlist_songs (\n    playlist_id INTEGER NOT NULL, song_id INTEGER NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n    UNIQUE(playlist_id,song_id)\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS recent_plays (\n    username TEXT NOT NULL, song_id INTEGER NOT NULL, played_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  const count = await sqlite.execute(\"SELECT COUNT(*) AS count FROM songs\");\n  if (Number(count.rows?.[0]?.count ?? 0) === 0) {\n    await sqlite.execute({sql:\"INSERT INTO songs (artist,title,genre,audio_url,cover_url) VALUES (?,?,?,?,?)\",args:[\"SEETY BOY\",\"O'CLOCK\",\"Afrobeats\",\"https://cdn.pixabay.com/download/audio/2022/03/15/audio_c8c8a7341a.mp3?filename=afrobeat-hip-hop-112011.mp3\",\"\"]});\n  }\n}\nawait initDb();\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/songs\", async (c) => {\n  const q = c.req.query(\"q\") ?? \"\";\n  const result = await sqlite.execute({sql:\"SELECT * FROM songs WHERE title LIKE ? OR artist LIKE ? OR genre LIKE ? ORDER BY created_at DESC\",args:[`%${q}%`,`%${q}%`,`%${q}%`]});\n  return c.json(result.rows);\n});\n\napp.get(\"/api/trending\", async (c) => {\n  const r=await sqlite.execute(\"SELECT * FROM songs ORDER BY streams DESC, created_at DESC LIMIT 20\"); return c.json(r.rows);\n});\n\napp.get(\"/api/new-releases\", async (c) => {\n  const r=await sqlite.execute(\"SELECT * FROM songs ORDER BY created_at DESC LIMIT 20\"); return c.json(r.rows);\n});\n\napp.get(\"/api/playlists\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n  const username=session.user.username??\"User\";\n  const r=await sqlite.execute({sql:\"SELECT p.*,COUNT(ps.song_id) AS song_count FROM playlists p LEFT JOIN playlist_songs ps ON ps.playlist_id=p.id WHERE p.username=? GROUP BY p.id ORDER BY p.created_at DESC\",args:[username]}); return c.json(r.rows);\n});\n\napp.post(\"/api/playlists\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n  const name=String((await c.req.json()).name??\"\").trim(); if(!name) return c.json({error:\"Playlist name is required\"},400);\n  const username=session.user.username??\"User\"; await sqlite.execute({sql:\"INSERT OR IGNORE INTO playlists (username,name) VALUES (?,?)\",args:[username,name]});\n  const r=await sqlite.execute({sql:\"SELECT * FROM playlists WHERE username=? AND name=?\",args:[username,name]}); return c.json({ok:true,playlist:r.rows?.[0]});\n});\n\napp.post(\"/api/playlists/:id/songs\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n  const id=Number(c.req.param(\"id\")), songId=Number((await c.req.json()).songId); const username=session.user.username??\"User\";\n  const p=await sqlite.execute({sql:\"SELECT id FROM playlists WHERE id=? AND username=?\",args:[id,username]}); if(!p.rows?.length) return c.json({error:\"Playlist not found\"},404);\n  await sqlite.execute({sql:\"INSERT OR IGNORE INTO playlist_songs (playlist_id,song_id) VALUES (?,?)\",args:[id,songId]}); return c.json({ok:true});\n});\n\napp.get(\"/api/recently-played\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json([]);\n  const r=await sqlite.execute({sql:\"SELECT s.*,MAX(rp.played_at) AS last_played FROM recent_plays rp JOIN songs s ON s.id=rp.song_id WHERE rp.username=? GROUP BY s.id ORDER BY last_played DESC LIMIT 20\",args:[session.user.username??\"User\"]}); return c.json(r.rows);\n});\n\napp.post(\"/api/recently-played/:id\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n  await sqlite.execute({sql:\"INSERT INTO recent_plays (username,song_id) VALUES (?,?)\",args:[session.user.username??\"User\",Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\n\napp.post(\"/api/stream/start/:id\", async (c) => {\n  const id = Number(c.req.param(\"id\"));\n  if (!Number.isInteger(id)) return c.json({error:\"Invalid song\"},400);\n  const song = await sqlite.execute({sql:\"SELECT id FROM songs WHERE id=?\",args:[id]});\n  if (!song.rows?.length) return c.json({error:\"Song not found\"},404);\n  const session = await getOAuthUserData(c.req.raw);\n  const username = session?.user?.username ?? null;\n  const token = crypto.randomUUID();\n  await sqlite.execute({sql:\"INSERT INTO stream_sessions (token,song_id,username,started_at) VALUES (?,?,?,?)\",args:[token,id,username,Date.now()]});\n  return c.json({ok:true,token,minimumSeconds:30});\n});\n\napp.post(\"/api/stream/complete\", async (c) => {\n  const body = await c.req.json(); const token=String(body.token??\"\");\n  const r=await sqlite.execute({sql:\"SELECT * FROM stream_sessions WHERE token=?\",args:[token]}); const s=r.rows?.[0];\n  if (!s || Number(s.completed)===1) return c.json({error:\"Invalid or already completed stream\"},400);\n  if (Date.now()-Number(s.started_at)<30000) return c.json({error:\"Keep listening for at least 30 seconds\"},400);\n  await sqlite.execute({sql:\"UPDATE stream_sessions SET completed=1 WHERE token=?\",args:[token]});\n  await sqlite.execute({sql:\"UPDATE songs SET streams=streams+1, earnings=earnings+10 WHERE id=?\",args:[s.song_id]});\n  return c.json({ok:true,rate:10});\n});\n\napp.post(\"/api/stream/:id\", async (c) => c.json({error:\"Use stream start and complete\"},410));\n\napp.post(\"/api/reports\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); const body=await c.req.json(); const songId=Number(body.songId);\n  if (!Number.isInteger(songId) || !String(body.reason??\"\").trim()) return c.json({error:\"Song and reason are required\"},400);\n  await sqlite.execute({sql:\"INSERT INTO reports (reporter,song_id,reason,details) VALUES (?,?,?,?)\",args:[session?.user?.username??null,songId,String(body.reason).trim(),String(body.details??\"\").trim()]});\n  return c.json({ok:true,message:\"Report submitted for review\"});\n});\n\napp.get(\"/terms\", (c) => c.html(`<main style=\"font-family:system-ui;max-width:800px;margin:40px auto;padding:20px;color:#222\"><h1>MELORY Terms of Use</h1><p>Users must only upload music and artwork they have the right to distribute. Fraudulent streams, fake payments, copyright infringement and abuse are prohibited. MELORY may remove content or suspend accounts that violate these rules.</p><h2>Artist earnings</h2><p>Only verified streams and approved revenue sources may qualify for royalties. Rates may change based on actual platform revenue and the published royalty policy.</p><h2>Payments</h2><p>Manual subscription payments require administrative verification. Submitting false payment evidence is prohibited.</p></main>`));\napp.get(\"/privacy\", (c) => c.html(`<main style=\"font-family:system-ui;max-width:800px;margin:40px auto;padding:20px;color:#222\"><h1>MELORY Privacy</h1><p>MELORY may store account, music, stream, payment and moderation data needed to operate the service. Payment references and withdrawal details are used for verification and payout administration.</p><p>We use reasonable measures to protect stored information and retain records only as needed for platform operations, fraud prevention and legal obligations.</p></main>`));\n\napp.post(\"/api/upload\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  if (!session?.user) return c.json({error:\"Login required\"},401);\n  const form = await c.req.formData();\n  const file = form.get(\"audio\");\n  if (!(file instanceof File)) return c.json({error:\"MP3 file is required\"},400);\n  if (file.type !== \"audio/mpeg\" && !file.name.toLowerCase().endsWith(\".mp3\")) return c.json({error:\"Only MP3 files are allowed\"},400);\n  if (file.size > 10 * 1024 * 1024) return c.json({error:\"MP3 must be 10MB or smaller\"},400);\n  const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g,\"_\");\n  const key = `audio/${crypto.randomUUID()}-${safeName}`;\n  await blob.set(key, file);\n  const cover = form.get(\"cover\");\n  let coverUrl = \"\";\n  if (cover instanceof File) {\n    if (![\"image/jpeg\",\"image/png\",\"image/webp\"].includes(cover.type)) return c.json({error:\"Cover must be JPG, PNG or WebP\"},400);\n    if (cover.size > 5 * 1024 * 1024) return c.json({error:\"Cover art must be 5MB or smaller\"},400);\n    const coverName = cover.name.replace(/[^a-zA-Z0-9._-]/g,\"_\");\n    const coverKey = `covers/${crypto.randomUUID()}-${coverName}`;\n    await blob.set(coverKey, cover);\n    coverUrl = `/api/cover/${encodeURIComponent(coverKey)}`;\n  }\n  return c.json({ok:true,audioUrl:`/api/audio/${encodeURIComponent(key)}`,coverUrl});\n});\n\napp.get(\"/api/cover/:key{.+}\", async (c) => {\n  const key = decodeURIComponent(c.req.param(\"key\"));\n  if (!key.startsWith(\"covers/\")) return c.json({error:\"Not found\"},404);\n  try { const stored = await blob.get(key); return new Response(stored.body,{headers:{\"Content-Type\":stored.contentType || \"image/jpeg\",\"Cache-Control\":\"public, max-age=31536000, immutable\"}}); }\n  catch { return c.json({error:\"Cover not found\"},404); }\n});\n\napp.get(\"/api/audio/:key{.+}\", async (c) => {\n  const key = decodeURIComponent(c.req.param(\"key\"));\n  if (!key.startsWith(\"audio/\")) return c.json({error:\"Not found\"},404);\n  try {\n    const stored = await blob.get(key);\n    return new Response(stored.body,{headers:{\"Content-Type\":\"audio/mpeg\",\"Cache-Control\":\"public, max-age=31536000, immutable\"}});\n  } catch { return c.json({error:\"Audio not found\"},404); }\n});\n\napp.post(\"/api/songs\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  if (!session?.user) return c.json({error:\"Login required\"},401);\n  const body = await c.req.json();\n  const title = String(body.title ?? \"\").trim();\n  const genre = String(body.genre ?? \"Afrobeats\").trim();\n  const audioUrl = String(body.audioUrl ?? \"\").trim();\n  const coverUrl = String(body.coverUrl ?? \"\").trim();\n  if (!title || !audioUrl) return c.json({error:\"Title and uploaded audio are required\"},400);\n  await sqlite.execute({sql:\"INSERT INTO songs (artist,title,genre,audio_url,cover_url) VALUES (?,?,?,?,?)\",args:[session.user.username ?? \"Artist\",title,genre,audioUrl,coverUrl]});\n  return c.json({ok:true});\n});\n\napp.get(\"/api/monetization\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  const username = session?.user?.username ?? null;\n  let plan = \"free\";\n  if (username) {\n    const r = await sqlite.execute({sql:\"SELECT plan,status FROM subscriptions WHERE username=?\",args:[username]});\n    plan = String(r.rows?.[0]?.plan ?? \"free\");\n  }\n  return c.json({adsEnabled: plan !== \"premium\", subscription:{plan,price:1500,currency:\"NGN\",interval:\"month\"},royaltyPoolPercent:50});\n});\n\napp.post(\"/api/ad-event\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  const body = await c.req.json().catch(()=>({}));\n  await sqlite.execute({sql:\"INSERT INTO ad_events (username,placement) VALUES (?,?)\",args:[session?.user?.username ?? null,String(body.placement ?? \"unknown\")]});\n  return c.json({ok:true});\n});\n\napp.post(\"/api/subscribe\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  if (!session?.user) return c.json({error:\"Login required\"},401);\n  const username = session.user.username ?? \"Artist\";\n  const body = await c.req.json();\n  const reference = String(body.reference ?? \"\").trim();\n  const proofUrl = String(body.proofUrl ?? \"\").trim();\n  if (!reference) return c.json({error:\"Transfer reference is required\"},400);\n  await sqlite.execute({sql:\"INSERT INTO payment_requests (username,amount,reference,proof_url) VALUES (?,?,?,?)\",args:[username,1500,reference,proofUrl]});\n  return c.json({ok:true,status:\"pending\",message:\"Payment submitted for admin approval.\"});\n});\n\napp.get(\"/api/admin/withdrawals\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw); if (session?.user?.username !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n  const r=await sqlite.execute(\"SELECT * FROM withdrawals ORDER BY created_at DESC\"); return c.json(r.rows);\n});\n\napp.post(\"/api/admin/withdrawals/:id\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw); if (session?.user?.username !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n  const id=Number(c.req.param(\"id\")); const body=await c.req.json(); const status=body.status===\"paid\"?\"paid\":body.status===\"rejected\"?\"rejected\":\"pending\";\n  await sqlite.execute({sql:\"UPDATE withdrawals SET status=? WHERE id=?\",args:[status,id]}); return c.json({ok:true,status});\n});\n\napp.get(\"/api/admin/reports\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); if(session?.user?.username!==\"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n  const r=await sqlite.execute(\"SELECT r.*,s.title,s.artist FROM reports r LEFT JOIN songs s ON s.id=r.song_id ORDER BY r.created_at DESC\"); return c.json(r.rows);\n});\n\napp.post(\"/api/admin/reports/:id\", async (c) => {\n  const session=await getOAuthUserData(c.req.raw); if(session?.user?.username!==\"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n  const id=Number(c.req.param(\"id\")); const body=await c.req.json(); const status=[\"pending\",\"reviewed\",\"removed\",\"dismissed\"].includes(body.status)?body.status:\"reviewed\";\n  await sqlite.execute({sql:\"UPDATE reports SET status=? WHERE id=?\",args:[status,id]}); return c.json({ok:true,status});\n});\n\napp.get(\"/api/admin/payments\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  const admin = session?.user?.username;\n  if (admin !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n  const r = await sqlite.execute(\"SELECT * FROM payment_requests ORDER BY created_at DESC\");\n  return c.json(r.rows);\n});\n\napp.post(\"/api/admin/payments/:id\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  if (session?.user?.username !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n  const id = Number(c.req.param(\"id\"));\n  const body = await c.req.json();\n  const status = body.status === \"approved\" ? \"approved\" : \"rejected\";\n  const r = await sqlite.execute({sql:\"SELECT username FROM payment_requests WHERE id=?\",args:[id]});\n  const username = r.rows?.[0]?.username;\n  if (!username) return c.json({error:\"Payment not found\"},404);\n  await sqlite.execute({sql:\"UPDATE payment_requests SET status=?,reviewed_at=CURRENT_TIMESTAMP WHERE id=?\",args:[status,id]});\n  if (status === \"approved\") await sqlite.execute({sql:\"INSERT INTO subscriptions (username,plan,status) VALUES (?,'premium','active') ON CONFLICT(username) DO UPDATE SET plan='premium',status='active',started_at=CURRENT_TIMESTAMP\",args:[username]});\n  return c.json({ok:true,status});\n});\n\napp.get(\"/api/artist/:username\", async (c) => {\n  const username = decodeURIComponent(c.req.param(\"username\"));\n  const r = await sqlite.execute({sql:\"SELECT * FROM artists WHERE username=?\",args:[username]});\n  const songs = await sqlite.execute({sql:\"SELECT * FROM songs WHERE artist=? ORDER BY created_at DESC\",args:[username]});\n  const followers = await sqlite.execute({sql:\"SELECT COUNT(*) AS count FROM follows WHERE artist=?\",args:[username]});\n  return c.json({artist:r.rows?.[0] ?? {username,display_name:username,bio:\"\",verified:0},songs:songs.rows,followers:Number(followers.rows?.[0]?.count ?? 0)});\n});\n\napp.post(\"/api/artist/profile\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  if (!session?.user) return c.json({error:\"Login required\"},401);\n  const username = session.user.username ?? \"Artist\"; const body = await c.req.json();\n  await sqlite.execute({sql:\"INSERT INTO artists (username,display_name,bio,avatar_url) VALUES (?,?,?,?) ON CONFLICT(username) DO UPDATE SET display_name=?,bio=?,avatar_url=?\",args:[username,String(body.displayName??username),String(body.bio??\"\"),String(body.avatarUrl??\"\"),String(body.displayName??username),String(body.bio??\"\"),String(body.avatarUrl??\"\")]});\n  return c.json({ok:true});\n});\n\napp.post(\"/api/songs/:id/like\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw); if (!session?.user) return c.json({error:\"Login required\"},401);\n  const username=session.user.username??\"User\"; const id=Number(c.req.param(\"id\"));\n  const existing=await sqlite.execute({sql:\"SELECT 1 FROM likes WHERE username=? AND song_id=?\",args:[username,id]});\n  if (existing.rows?.length) await sqlite.execute({sql:\"DELETE FROM likes WHERE username=? AND song_id=?\",args:[username,id]}); else await sqlite.execute({sql:\"INSERT INTO likes (username,song_id) VALUES (?,?)\",args:[username,id]});\n  const count=await sqlite.execute({sql:\"SELECT COUNT(*) AS count FROM likes WHERE song_id=?\",args:[id]}); return c.json({ok:true,liked:!existing.rows?.length,likes:Number(count.rows?.[0]?.count??0)});\n});\n\napp.post(\"/api/artists/:username/follow\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw); if (!session?.user) return c.json({error:\"Login required\"},401);\n  const follower=session.user.username??\"User\", artist=decodeURIComponent(c.req.param(\"username\"));\n  const existing=await sqlite.execute({sql:\"SELECT 1 FROM follows WHERE follower=? AND artist=?\",args:[follower,artist]});\n  if (existing.rows?.length) { await sqlite.execute({sql:\"DELETE FROM follows WHERE follower=? AND artist=?\",args:[follower,artist]}); } else { await sqlite.execute({sql:\"INSERT INTO follows (follower,artist) VALUES (?,?)\",args:[follower,artist]}); }\n  const count=await sqlite.execute({sql:\"SELECT COUNT(*) AS count FROM follows WHERE artist=?\",args:[artist]}); return c.json({ok:true,following:!existing.rows?.length,followers:Number(count.rows?.[0]?.count??0)});\n});\n\napp.get(\"/api/me\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  if (!session?.user) return c.json({loggedIn:false});\n  const artist = session.user.username ?? \"Artist\";\n  const result = await sqlite.execute({sql:\"SELECT COALESCE(SUM(streams),0) AS streams, COALESCE(SUM(earnings),0) AS earnings, COUNT(*) AS songs FROM songs WHERE artist=?\",args:[artist]});\n  const withdrawals = await sqlite.execute({sql:\"SELECT * FROM withdrawals WHERE artist=? ORDER BY created_at DESC\",args:[artist]});\n  return c.json({loggedIn:true,user:session.user,stats:result.rows?.[0],withdrawals:withdrawals.rows});\n});\n\napp.post(\"/api/withdraw\", async (c) => {\n  const session = await getOAuthUserData(c.req.raw);\n  if (!session?.user) return c.json({error:\"Login required\"},401);\n  const body = await c.req.json();\n  const amount = Number(body.amount);\n  if (!Number.isFinite(amount) || amount < 1000) return c.json({error:\"Minimum withdrawal is ₦1,000\"},400);\n  await sqlite.execute({sql:\"INSERT INTO withdrawals (artist,amount,bank_name,account_number) VALUES (?,?,?,?)\",args:[session.user.username ?? \"Artist\",Math.floor(amount),String(body.bankName ?? \"\"),String(body.accountNumber ?? \"\")]});\n  return c.json({ok:true});\n});\n\napp.onError((err) => Promise.reject(err));\nexport default oauthMiddleware(app.fetch);\n","label",[136],"40ec05f8-8219-4c56-bf2d-d405f42148ff","README.md","01a026a0-60e1-776d-ae32-33b161e0c861",1,["D",1787354439816],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[147],"0a85a88e-c712-467d-87ca-e08ad5702665","CHANGELOG.md","01a026a0-60e1-776d-ae32-2f1b5fb7acdc",["D",1787354439816],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[154],"fafb338f-a1b2-47cf-81ab-63dcfb544e86","frontend","01a026a0-60e1-776d-ae32-296f14d4e8a5",["D",1787354439816],"directory",[160],"pulls","branches","forks","envVars",{"_172":64,"_174":64},"connections",{"_172":64,"_173":64},"count","unfilledCount","emptyCount",{"_44":159,"_32":160,"_30":161,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":235,"_13":64,"_34":163,"_36":-5,"_24":25,"_144":-5,"_186":236,"_27":237},{"_44":231,"_32":225,"_30":220,"_137":161,"_42":43,"_41":149,"_139":60,"_39":232,"_13":64,"_34":163,"_36":-5,"_24":25,"_144":-5,"_186":233,"_27":234},{"_44":226,"_32":33,"_30":31,"_137":220,"_42":43,"_41":14,"_139":60,"_39":227,"_13":228,"_34":35,"_36":38,"_24":25,"_144":-5,"_186":229,"_27":230},{"_44":217,"_32":218,"_30":219,"_137":220,"_42":43,"_41":149,"_139":60,"_39":221,"_13":64,"_34":35,"_36":222,"_24":25,"_144":-5,"_186":223,"_27":224},{"_44":210,"_32":211,"_30":212,"_137":161,"_42":43,"_41":149,"_139":60,"_39":213,"_13":64,"_34":20,"_36":214,"_24":25,"_144":-5,"_186":215,"_27":216},{"_44":203,"_32":204,"_30":205,"_137":161,"_42":43,"_41":149,"_139":60,"_39":206,"_13":64,"_34":35,"_36":207,"_24":25,"_144":-5,"_186":208,"_27":209},{"_44":195,"_32":196,"_30":197,"_137":161,"_42":43,"_41":198,"_139":60,"_39":199,"_13":149,"_34":35,"_36":200,"_24":25,"_144":-5,"_186":201,"_27":202},{"_44":153,"_32":154,"_30":155,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":192,"_13":64,"_34":20,"_36":157,"_24":25,"_144":-5,"_186":193,"_27":194},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":60,"_39":189,"_13":64,"_34":20,"_36":151,"_24":25,"_144":-5,"_186":190,"_27":191},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":185,"_13":141,"_34":142,"_36":143,"_24":25,"_144":-5,"_186":187,"_27":188},["D",1787356160866],"children",[],[136],["D",1787354439816],[],[147],["D",1787354439816],[],[154],"d0ae1dec-40d8-40a7-bb65-7b21f6aca208","root.tsx","01a026a0-60e1-776d-ae32-260d5ae96519",35,["D",1787355829620],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>MELORY — Music for Artists & Fans</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[160,196],"9cd8ca2e-2deb-4068-b2e8-09156326fa0e","index.tsx","01a026a0-60e1-776d-ae32-214723a3aedb",["D",1787354439816],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[160,204],"e24ca8a2-acd1-497d-84f0-2d4c6cb98bc4","favicon.svg","01a026a0-60e1-776d-ae32-1ccb5bc1bc55",["D",1787354439816],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[160,211],"d9f978f3-7991-4e87-89e1-fa28b29f469c","Counter.tsx","01a026a0-60e1-776d-ae32-15b7355954f7","01a026a0-60e1-776d-ae32-1b2d67b28add",["D",1787354439816],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[160,225,218],"components","98aadbad-8345-4445-b8ef-84e65420852a",["D",1787356510441],31,[],[160,225,33],"06bf52d9-bbac-46ed-bebb-3ff7aca11825",["D",1787354439816],[177,178],[160,225],["D",1787354439816],[176,179,180,181],[160],["D",1787354439816],["D",1789532458193],{"_100":99,"_108":104},{"_100":99,"_101":102,"_103":104,"_18":56,"_105":106,"_107":25},{"_13":14,"_32":90,"_44":43,"_91":45,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":46,"_98":99},"ctx",{"_83":-5,"_128":276,"_277":278,"_279":280,"_281":25,"_282":25,"_283":25,"_284":60,"_285":-5,"_286":-7,"_287":-7,"_288":64,"_289":25,"_290":25,"_291":-5,"_292":25,"_293":25,"_294":25,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":90,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Stream music.Discover new artists.

🔥 Trending music

🎵 New releases

{s.title}

Your Library

Create playlist

Recently played

Listen without ads

Artist Studio

Upload music

Artist profile

Stream music.
Discover new artists.

Diff · v56