{
  "id": "recipe-search",
  "name": "Recipe Search",
  "category": "cooking",
  "tags": ["recipe", "cooking", "food", "search", "meal", "kitchen"],
  "description": "Search recipes by ingredient or dish name using TheMealDB API.",
  "triggers": ["recipe search", "find recipe", "cooking", "meal ideas", "what should I cook", "recipe finder"],
  "defaultSize": { "w": 5, "h": 6 },
  "source": "function RecipeSearch() {\n  const [query, setQuery] = React.useState('REPLACE_WITH_INGREDIENT');\n  const [recipes, setRecipes] = React.useState([]);\n  const [selected, setSelected] = React.useState(null);\n  const [loading, setLoading] = React.useState(false);\n\n  const search = () => {\n    if (!query.trim()) return;\n    setLoading(true);\n    setSelected(null);\n    fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${encodeURIComponent(query)}`)\n      .then(r=>r.json())\n      .then(d=>{setRecipes(d.meals||[]);setLoading(false);})\n      .catch(()=>setLoading(false));\n  };\n\n  const getIngredients = (meal) => {\n    const out = [];\n    for (let i=1;i<=20;i++){\n      const ing = meal[`strIngredient${i}`];\n      const meas = meal[`strMeasure${i}`];\n      if (ing && ing.trim()) out.push(`${meas||''} ${ing}`.trim());\n    }\n    return out;\n  };\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}}>Recipe Search</div>\n      <div style={{display:'flex',gap:8,marginBottom:12}}>\n        <input value={query} onChange={e=>setQuery(e.target.value)} onKeyDown={e=>e.key==='Enter'&&search()}\n          style={{flex:1,padding:'8px 12px',borderRadius:8,border:'1px solid #ccc',fontSize:14}}\n          placeholder=\"Dish or ingredient…\"/>\n        <button onClick={search}\n          style={{padding:'8px 16px',borderRadius:8,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer'}}>\n          Search\n        </button>\n      </div>\n      {loading && <div style={{textAlign:'center',color:'#888'}}>Loading…</div>}\n      {selected ? (\n        <div style={{flex:1,overflow:'auto'}}>\n          <button onClick={()=>setSelected(null)} style={{marginBottom:12,background:'none',border:'none',color:'#007AFF',cursor:'pointer',fontSize:14}}>← Back</button>\n          <img src={selected.strMealThumb} style={{width:'100%',height:180,objectFit:'cover',borderRadius:12,marginBottom:12}}/>\n          <div style={{fontSize:20,fontWeight:700,marginBottom:8}}>{selected.strMeal}</div>\n          <div style={{color:'#888',fontSize:13,marginBottom:12}}>{selected.strArea} • {selected.strCategory}</div>\n          <div style={{fontSize:14,fontWeight:600,marginBottom:6}}>Ingredients</div>\n          <ul style={{margin:0,paddingLeft:20,fontSize:13,color:'#444',marginBottom:16}}>\n            {getIngredients(selected).map((ing,i)=><li key={i}>{ing}</li>)}\n          </ul>\n          <div style={{fontSize:14,fontWeight:600,marginBottom:6}}>Instructions</div>\n          <div style={{fontSize:13,lineHeight:1.6,color:'#444',whiteSpace:'pre-line'}}>{selected.strInstructions}</div>\n        </div>\n      ) : (\n        <div style={{flex:1,overflow:'auto',display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:10}}>\n          {recipes.map(r=> (\n            <div key={r.idMeal} onClick={()=>setSelected(r)}\n              style={{cursor:'pointer',borderRadius:10,overflow:'hidden',background:'#f5f5f5'}}>\n              <img src={r.strMealThumb} style={{width:'100%',height:100,objectFit:'cover'}}/>\n              <div style={{padding:8,fontSize:13,fontWeight:600}}>{r.strMeal}</div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\nrender(<RecipeSearch/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_INGREDIENT", "description": "Default search ingredient or dish", "default": "chicken" }
  ]
}