(defcomp
  ()
  (div
    (~tw :tokens "space-y-3")
    (div
      (~tw :tokens "flex gap-2 flex-wrap")
      (button
        :sx-get "/sx/(geography.(hypermedia.(reference.(api.swap-item))))"
        :sx-target "#ref-swap-list"
        :sx-swap "beforeend"
        (~tw :tokens "px-3 py-1 bg-violet-600 text-white rounded text-sm")
        "beforeend")
      (button
        :sx-get "/sx/(geography.(hypermedia.(reference.(api.swap-item))))"
        :sx-target "#ref-swap-list"
        :sx-swap "afterbegin"
        (~tw :tokens "px-3 py-1 bg-emerald-600 text-white rounded text-sm")
        "afterbegin")
      (button
        :sx-get "/sx/(geography.(hypermedia.(reference.(api.swap-item))))"
        :sx-target "#ref-swap-list"
        :sx-swap "innerHTML"
        (~tw :tokens "px-3 py-1 bg-blue-600 text-white rounded text-sm")
        "innerHTML"))
    (div
      :id "ref-swap-list"
      (~tw :tokens "p-3 rounded border border-stone-200 space-y-1 min-h-[3rem]")
      (div (~tw :tokens "text-sm text-stone-500") "Original item"))))