{
  "id": "wishlist",
  "name": "Wishlist",
  "category": "e-commerce",
  "tags": ["wishlist", "shopping", "save", "favorites", "items", "gifts"],
  "description": "Personal wishlist with item tracker, price notes, and priority.",
  "triggers": ["wishlist", "save items", "want list", "gift list", "shopping list"],
  "defaultSize": { "w": 4, "h": 5 },
  "source": "function Wishlist() {\n  const [items, setItems] = React.useState([\n    {id:1,name:'REPLACE_WITH_ITEM_1',price:'REPLACE_WITH_PRICE_1',priority:'high',url:''},\n    {id:2,name:'Noise-canceling headphones',price:'$299',priority:'medium',url:''},\n    {id:3,name:'Mechanical keyboard',price:'$149',priority:'low',url:''}\n  ]);\n  const [input, setInput] = React.useState('');\n  const [priceInput, setPriceInput] = React.useState('');\n\n  const add = ()=>{\n    if(!input.trim())return;\n    setItems([...items,{id:Date.now(),name:input,price:priceInput||'$0',priority:'medium',url:''}]);\n    setInput('');setPriceInput('');\n  };\n\n  const remove = (id)=>setItems(items.filter(i=>i.id!==id));\n  const setPrio = (id,prio)=>setItems(items.map(i=>i.id===id?{...i,priority:prio}:i));\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}}>Wishlist</div>\n      <div style={{display:'flex',gap:6,marginBottom:12}}>\n        <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&add()}\n          style={{flex:1,padding:'6px 10px',borderRadius:6,border:'1px solid #ccc',fontSize:13}} placeholder=\"Item…\"/>\n        <input value={priceInput} onChange={e=>setPriceInput(e.target.value)}\n          style={{width:60,padding:'6px 10px',borderRadius:6,border:'1px solid #ccc',fontSize:13}} placeholder=\"$\"/>\n        <button onClick={add}\n          style={{padding:'6px 12px',borderRadius:6,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer',fontSize:13}}>\n          Add\n        </button>\n      </div>\n      <div style={{flex:1,overflow:'auto'}}>\n        {items.sort((a,b)=>({high:3,medium:2,low:1}[a.priority]-{high:3,medium:2,low:1}[b.priority])).map(item=> (\n          <div key={item.id} style={{display:'flex',alignItems:'center',gap:8,padding:'8px 0',borderBottom:'1px solid #eee'}}>\n            <button onClick={()=>setPrio(item.id,item.priority==='high'?'medium':item.priority==='medium'?'low':'high')}\n              style={{width:10,height:10,borderRadius:'50%',background:pColor[item.priority],border:'none',cursor:'pointer'}}/>\n            <div style={{flex:1}}>\n              <div style={{fontSize:13,fontWeight:500}}>{item.name}</div>\n              <div style={{fontSize:12,color:'#888'}}>{item.price}</div>\n            </div>\n            <button onClick={()=>remove(item.id)}\n              style={{background:'none',border:'none',color:'#FF3B30',cursor:'pointer',fontSize:14}}>×</button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<Wishlist/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_ITEM_1", "description": "First wishlist item", "default": "Smart watch" },
    { "name": "REPLACE_WITH_PRICE_1", "description": "First item price", "default": "$399" }
  ]
}