{
  "id": "music-player",
  "name": "Music Player",
  "category": "media",
  "tags": ["music", "player", "audio", "mp3", "playlist", "media"],
  "description": "Simple music player with playlist, progress bar, and volume control.",
  "triggers": ["music player", "audio player", "mp3 player", "playlist", "song player"],
  "defaultSize": { "w": 5, "h": 4 },
  "source": "function MusicPlayer() {\n  const [tracks, setTracks] = React.useState([\n    {title:'REPLACE_WITH_SONG_1',artist:'REPLACE_WITH_ARTIST_1',url:'REPLACE_WITH_URL_1'},\n    {title:'Song 2',artist:'Artist 2',url:''},\n    {title:'Song 3',artist:'Artist 3',url:''}\n  ]);\n  const [current, setCurrent] = React.useState(0);\n  const [playing, setPlaying] = React.useState(false);\n  const [progress, setProgress] = React.useState(0);\n  const audioRef = React.useRef(null);\n\n  React.useEffect(()=>{\n    const audio = audioRef.current;\n    if(!audio)return;\n    const update = ()=>setProgress(audio.currentTime/audio.duration*100||0);\n    audio.addEventListener('timeupdate',update);\n    return ()=>audio.removeEventListener('timeupdate',update);\n  },[]);\n\n  const toggle = ()=>{\n    const audio = audioRef.current;\n    if(!audio)return;\n    if(playing){audio.pause();}else{audio.play().catch(()=>{});}\n    setPlaying(!playing);\n  };\n\n  const next = ()=>setCurrent((current+1)%tracks.length);\n  const prev = ()=>setCurrent((current-1+tracks.length)%tracks.length);\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column'}}>\n      <div style={{fontSize:18,fontWeight:700,marginBottom:12}}>Music Player</div>\n      <div style={{textAlign:'center',marginBottom:12}}>\n        <div style={{width:80,height:80,borderRadius:'50%',background:'linear-gradient(135deg,#667eea,#764ba2)',margin:'0 auto 10px',display:'flex',alignItems:'center',justifyContent:'center',fontSize:28}}>\n          🎵\n        </div>\n        <div style={{fontSize:16,fontWeight:600}}>{tracks[current].title}</div>\n        <div style={{fontSize:13,color:'#888'}}>{tracks[current].artist}</div>\n      </div>\n      <div style={{height:4,background:'#eee',borderRadius:2,marginBottom:12}}>\n        <div style={{width:`${progress}%`,height:'100%',background:'#667eea',borderRadius:2}}/>\n      </div>\n      <div style={{display:'flex',justifyContent:'center',gap:16,marginBottom:12}}>\n        <button onClick={prev} style={{background:'none',border:'none',fontSize:20,cursor:'pointer'}}>⏮</button>\n        <button onClick={toggle} style={{width:44,height:44,borderRadius:'50%',border:'none',background:'#667eea',color:'#fff',fontSize:18,cursor:'pointer'}}>\n          {playing?'⏸':'▶'}\n        </button>\n        <button onClick={next} style={{background:'none',border:'none',fontSize:20,cursor:'pointer'}}>⏭</button>\n      </div>\n      <div style={{flex:1,overflow:'auto'}}>\n        {tracks.map((t,i)=> (\n          <div key={i} onClick={()=>setCurrent(i)}\n            style={{padding:'8px 10px',borderRadius:6,cursor:'pointer',background:i===current?'#f0f0ff':'transparent',display:'flex',justifyContent:'space-between'}}>\n            <span style={{fontSize:13}}>{t.title} — {t.artist}</span>\n            {i===current && <span style={{fontSize:12,color:'#667eea'}}>▶</span>}\n          </div>\n        ))}\n      </div>\n      <audio ref={audioRef} src={tracks[current].url} onEnded={next}/>\n    </div>\n  );\n}\nrender(<MusicPlayer/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_SONG_1", "description": "First song title", "default": "My Song" },
    { "name": "REPLACE_WITH_ARTIST_1", "description": "First song artist", "default": "Unknown Artist" },
    { "name": "REPLACE_WITH_URL_1", "description": "First song MP3 URL", "default": "" }
  ]
}