[{"_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",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"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",34,"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);\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){setPlaying(id);await fetch(`/api/stream/${id}`,{method:'POST'});load()}\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'?:<>

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)}/>)}

}

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 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=\"field\"/>

setBio(e.target.value)} placeholder=\"Your bio\" rows={4} className=\"field\"/><input value={avatar} onChange={e=>setAvatar(e.target.value)} placeholder=\"Profile photo URL\" className=\"field\"/><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","/** @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);\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){setPlaying(id);await fetch(`/api/stream/${id}`,{method:'POST'});load()}\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==='studio'} onClick={()=>setTab('studio')} text=\"Artist Studio\"/></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}/>:<><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></>}</main><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 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","createdAt",["D",1787355822759],"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",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",56,"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",[176,183,184,185],"files",[176,177,178,179,180,181,182,183,184,185],"counts",{"_166":64,"_167":150,"_168":64,"_169":170,"_171":172},"contents",[132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":160,"_32":161,"_30":162,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":163,"_13":64,"_34":164,"_36":-5,"_24":25,"_145":-5,"_27":165},{"_44":154,"_32":155,"_30":156,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":157,"_13":64,"_34":20,"_36":158,"_24":25,"_145":-5,"_27":159},{"_44":147,"_32":148,"_30":149,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":151,"_13":64,"_34":20,"_36":152,"_24":25,"_145":-5,"_27":153},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":25,"_39":141,"_13":142,"_34":143,"_36":144,"_24":25,"_145":-5,"_27":146},"98be058f-d110-4407-9fcb-c74cf599558e","index.ts","parentId",33,"latest",["D",1787355818765],17,"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  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.post(\"/api/stream/:id\", async (c) => {\n  const id = Number(c.req.param(\"id\"));\n  if (!Number.isInteger(id)) return c.json({error:\"Invalid song\"},400);\n  await sqlite.execute({sql:\"UPDATE songs SET streams=streams+1, earnings=earnings+10 WHERE id=?\",args:[id]});\n  return c.json({ok:true, rate:10});\n});\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/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",[137],"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",[148],"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",[155],"fafb338f-a1b2-47cf-81ab-63dcfb544e86","frontend","01a026a0-60e1-776d-ae32-296f14d4e8a5",["D",1787354439816],"directory",[161],"pulls","branches","forks","envVars",{"_173":64,"_175":64},"connections",{"_173":64,"_174":64},"count","unfilledCount","emptyCount",{"_44":160,"_32":161,"_30":162,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":235,"_13":64,"_34":164,"_36":-5,"_24":25,"_145":-5,"_187":236,"_27":237},{"_44":231,"_32":225,"_30":220,"_138":162,"_42":43,"_41":150,"_140":60,"_39":232,"_13":64,"_34":164,"_36":-5,"_24":25,"_145":-5,"_187":233,"_27":234},{"_44":226,"_32":33,"_30":31,"_138":220,"_42":43,"_41":14,"_140":25,"_39":227,"_13":228,"_34":35,"_36":38,"_24":25,"_145":-5,"_187":229,"_27":230},{"_44":217,"_32":218,"_30":219,"_138":220,"_42":43,"_41":150,"_140":60,"_39":221,"_13":64,"_34":35,"_36":222,"_24":25,"_145":-5,"_187":223,"_27":224},{"_44":210,"_32":211,"_30":212,"_138":162,"_42":43,"_41":150,"_140":60,"_39":213,"_13":64,"_34":20,"_36":214,"_24":25,"_145":-5,"_187":215,"_27":216},{"_44":203,"_32":204,"_30":205,"_138":162,"_42":43,"_41":150,"_140":60,"_39":206,"_13":64,"_34":35,"_36":207,"_24":25,"_145":-5,"_187":208,"_27":209},{"_44":196,"_32":197,"_30":198,"_138":162,"_42":43,"_41":150,"_140":25,"_39":199,"_13":64,"_34":35,"_36":200,"_24":25,"_145":-5,"_187":201,"_27":202},{"_44":154,"_32":155,"_30":156,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":193,"_13":64,"_34":20,"_36":158,"_24":25,"_145":-5,"_187":194,"_27":195},{"_44":147,"_32":148,"_30":149,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":190,"_13":64,"_34":20,"_36":152,"_24":25,"_145":-5,"_187":191,"_27":192},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":25,"_39":186,"_13":142,"_34":143,"_36":144,"_24":25,"_145":-5,"_187":188,"_27":189},["D",1787355818765],"children",[],[137],["D",1787354439816],[],[148],["D",1787354439816],[],[155],"8242645d-a299-4d6d-b830-7c0286b3a9b6","root.tsx","01a026a0-60e1-776d-ae32-260d5ae96519",["D",1787354439816],"/** @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",[],[161,197],"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 />);",[],[161,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>",[],[161,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",[],[161,225,218],"components","fe3f3f81-b367-4b3e-ac73-ba9b97de885c",["D",1787355822759],16,[],[161,225,33],"06bf52d9-bbac-46ed-bebb-3ff7aca11825",["D",1787354439816],[178,179],[161,225],["D",1787354439816],[177,180,181,182],[161],["D",1787354439816],["D",1789532458193],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_129":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":91,"_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}

Artist Studio

Upload music

Artist profile

Stream music.
Discover new artists.

Diff · v34