{
  "id": "todo-list",
  "name": "Todo List",
  "category": "productivity",
  "tags": ["todo", "list", "tasks", "productivity", "checklist", "planner"],
  "description": "Simple todo list with add, check, delete, and priority levels.",
  "triggers": ["todo list", "task list", "checklist", "to-do", "todo", "tasks"],
  "defaultSize": { "w": 4, "h": 5 },
  "source": "function TodoList() {\n  const [items, setItems] = React.useState([\n    {id:1,text:'REPLACE_WITH_TASK_1',done:false,priority:'medium'},\n    {id:2,text:'REPLACE_WITH_TASK_2',done:false,priority:'high'}\n  ]);\n  const [input, setInput] = React.useState('');\n  const [prio, setPrio] = React.useState('medium');\n\n  const add = () => {\n    if (!input.trim()) return;\n    setItems([...items,{id:Date.now(),text:input,done:false,priority:prio}]);\n    setInput('');\n  };\n\n  const toggle = (id) => setItems(items.map(i=>i.id===id?{...i,done:!i.done}:i));\n  const remove = (id) => setItems(items.filter(i=>i.id!==id));\n\n  const pColor = {high:'#FF3B30',medium:'#FF9500',low:'#34C759'};\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}}>Todo List</div>\n      <div style={{display:'flex',gap:8,marginBottom:12}}>\n        <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&add()}\n          style={{flex:1,padding:'8px 12px',borderRadius:8,border:'1px solid #ccc',fontSize:14}}\n          placeholder=\"Add a task…\"/>\n        <select value={prio} onChange={e=>setPrio(e.target.value)}\n          style={{padding:'8px',borderRadius:8,border:'1px solid #ccc',fontSize:14}}>\n          <option value=\"high\">High</option>\n          <option value=\"medium\">Med</option>\n          <option value=\"low\">Low</option>\n        </select>\n        <button onClick={add}\n          style={{padding:'8px 16px',borderRadius:8,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer'}}>\n          Add\n        </button>\n      </div>\n      <div style={{flex:1,overflow:'auto'}}>\n        {items.sort((a,b)=>(a.done?1:0)-(b.done?1:0)).map(item=> (\n          <div key={item.id} style={{display:'flex',alignItems:'center',gap:8,padding:'8px 0',borderBottom:'1px solid #eee'}}>\n            <input type=\"checkbox\" checked={item.done} onChange={()=>toggle(item.id)}\n              style={{width:18,height:18,cursor:'pointer'}}/>\n            <span style={{flex:1,textDecoration:item.done?'line-through':'none',color:item.done?'#888':'#000',fontSize:14}}>\n              {item.text}\n            </span>\n            <span style={{width:8,height:8,borderRadius:'50%',background:pColor[item.priority]}}/>\n            <button onClick={()=>remove(item.id)}\n              style={{background:'none',border:'none',color:'#FF3B30',cursor:'pointer',fontSize:16}}>\n              ×\n            </button>\n          </div>\n        ))}\n      </div>\n      <div style={{fontSize:12,color:'#888',marginTop:8}}>\n        {items.filter(i=>!i.done).length} of {items.length} remaining\n      </div>\n    </div>\n  );\n}\nrender(<TodoList/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_TASK_1", "description": "First default task", "default": "Review daily goals" },
    { "name": "REPLACE_WITH_TASK_2", "description": "Second default task", "default": "Check emails" }
  ]
}