{
  "id": "multi-pot-timer",
  "name": "Multi Pot Timer",
  "category": "cooking",
  "tags": ["timer", "cooking", "kitchen", "pot", "multi", "alarm"],
  "description": "Multiple concurrent cooking timers with labels and alarm sounds.",
  "triggers": ["cooking timer", "kitchen timer", "multi timer", "pot timer", "food timer"],
  "defaultSize": { "w": 4, "h": 5 },
  "source": "function MultiPotTimer() {\n  const [timers, setTimers] = React.useState([\n    {id:1,label:'Pasta',seconds:600,total:600,running:false},\n    {id:2,label:'Rice',seconds:900,total:900,running:false}\n  ]);\n\n  React.useEffect(()=>{\n    const id = setInterval(()=>{\n      setTimers(prev=>prev.map(t=>{\n        if (!t.running || t.seconds<=0) return t;\n        const s = t.seconds-1;\n        if (s===0) {\n          const audio = new Audio('https://actions.google.com/sounds/v1/alarms/beep_short.ogg');\n          audio.play().catch(()=>{});\n        }\n        return {...t,seconds:s};\n      }));\n    },1000);\n    return ()=>clearInterval(id);\n  },[]);\n\n  const toggle = (id)=>setTimers(prev=>prev.map(t=>t.id===id?{...t,running:!t.running}:t));\n  const reset = (id,total)=>setTimers(prev=>prev.map(t=>t.id===id?{...t,seconds:total,running:false}:t));\n  const add = ()=>setTimers([...timers,{id:Date.now(),label:'New',seconds:300,total:300,running:false}]);\n  const remove = (id)=>setTimers(timers.filter(t=>t.id!==id));\n\n  const fmt = (s)=>`${String(Math.floor(s/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`;\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column'}}>\n      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>\n        <span style={{fontSize:18,fontWeight:700}}>Kitchen Timers</span>\n        <button onClick={add}\n          style={{padding:'6px 12px',borderRadius:8,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer',fontSize:13}}>\n          + Add\n        </button>\n      </div>\n      <div style={{flex:1,overflow:'auto',display:'flex',flexDirection:'column',gap:8}}>\n        {timers.map(t=> (\n          <div key={t.id} style={{padding:12,background:'#f5f5f5',borderRadius:10}}>\n            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:6}}>\n              <input value={t.label} onChange={e=>setTimers(prev=>prev.map(x=>x.id===t.id?{...x,label:e.target.value}:x))}\n                style={{background:'transparent',border:'none',fontSize:14,fontWeight:600,width:100}}/>\n              <button onClick={()=>remove(t.id)} style={{background:'none',border:'none',color:'#FF3B30',cursor:'pointer'}}>×</button>\n            </div>\n            <div style={{display:'flex',alignItems:'center',gap:10}}>\n              <div style={{fontSize:28,fontVariantNumeric:'tabular-nums',fontWeight:200,flex:1,color:t.seconds===0?'#FF3B30':'#000'}}>\n                {fmt(t.seconds)}\n              </div>\n              <button onClick={()=>toggle(t.id)}\n                style={{padding:'6px 14px',borderRadius:8,border:'none',background:t.running?'#FF3B30':'#34C759',color:'#fff',cursor:'pointer',fontSize:13}}>\n                {t.running?'Pause':'Start'}\n              </button>\n              <button onClick={()=>reset(t.id,t.total)}\n                style={{padding:'6px 12px',borderRadius:8,border:'1px solid #ccc',background:'#fff',cursor:'pointer',fontSize:13}}>\n                Reset\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<MultiPotTimer/>);",
  "placeholders": []
}