(defcomp
  ()
  (div
    (~tw :tokens "space-y-2")
    (div
      :id "ref-opt-item-1"
      (~tw :tokens "flex items-center justify-between p-2 border border-stone-200 rounded")
      (span (~tw :tokens "text-sm text-stone-700") "Optimistic item A")
      (button
        :sx-delete "/sx/(geography.(hypermedia.(reference.(api.(item.opt1)))))"
        :sx-target "#ref-opt-item-1"
        :sx-swap "delete"
        :sx-optimistic "remove"
        (~tw :tokens "text-red-500 text-sm hover:text-red-700")
        "Remove"))
    (div
      :id "ref-opt-item-2"
      (~tw :tokens "flex items-center justify-between p-2 border border-stone-200 rounded")
      (span (~tw :tokens "text-sm text-stone-700") "Optimistic item B")
      (button
        :sx-delete "/sx/(geography.(hypermedia.(reference.(api.(item.opt2)))))"
        :sx-target "#ref-opt-item-2"
        :sx-swap "delete"
        :sx-optimistic "remove"
        (~tw :tokens "text-red-500 text-sm hover:text-red-700")
        "Remove"))
    (p
      (~tw :tokens "text-xs text-stone-400")
      "Items fade out immediately on click (optimistic), then are removed when the server responds.")))