(function attachRecipeList(global) {
  const React = global.React;
  if (!React) return;

  function RecipeList({ recipes, activeRecipe, onSelect, onRun, onDelete }) {
    const items = recipes || [];
    return <section className="free-seo-card">
      <h2>Saved recipes</h2>
      {!items.length ? <p className="muted">No recipes yet. Create one from a template or custom steps.</p> : <div className="recipe-list">{items.map((recipe) => <article className={activeRecipe && activeRecipe.id === recipe.id ? 'recipe-row active' : 'recipe-row'} key={recipe.id}>
        <button className="link-button" onClick={() => onSelect && onSelect(recipe)}><strong>{recipe.name}</strong><span>{recipe.category || 'custom'} · {(recipe.steps || []).length} steps · {recipe.visibility}</span></button>
        <div className="row gap small"><button className="button" onClick={() => onRun && onRun(recipe)}>Run</button><button className="button ghost" onClick={() => onDelete && onDelete(recipe)}>Delete</button></div>
      </article>)}</div>}
    </section>;
  }

  global.RecipeList = RecipeList;
})(window);