Create a system for declarative mutations for forms and buttons

[lemonmade]

https://chatgpt.com/share/66e912b5-17c4-8000-b123-f24c062b60ea

<ui-graphql-operation>
  mutation UpdateEpisodeRating($episodeId: ID!, $rating: Int!) {
    updateEpisodeRating(episodeId: $episodeId, rating: $rating) {
      id
      rating
    }
  }
</ui-graphql-operation>

<ui-form 
  action="mutate(UpdateEpisodeRating)" 
  success-action="navigate(/episodes/123)" 
  error-action="toast">

  <!-- Field names become mutation input -->
  <ui-number-field name="rating" value="5"></ui-number-field>

  <ui-button action="submit">Submit</ui-button>
</ui-form>

<ui-graphql-operation>
  mutation UpdateEpisodeRating($rating: Int!) {
    updateEpisodeRating(rating: $rating) {
      id
      rating
    }
  }
</ui-graphql-operation>

<ui-button 
  action="mutate(UpdateEpisodeRating)" 
  success-action="auto" 
  <!-- or... -->
  success-action="navigate(/episodes/123)" 
  error-action="auto" 
  <!-- or... -->
  error-action="toast">
  Update Rating
</ui-button>

• Can also reference a mutation referenced in the extension TOML