(defcomp
  ()
  (div
    (~tw :tokens "space-y-3")
    (button
      :sx-get "/sx/(geography.(hypermedia.(reference.(api.swap-item))))"
      :sx-target "#ref-evt-as-list"
      :sx-swap "beforeend"
      :sx-on:sx:afterSwap "var items = document.querySelectorAll('#ref-evt-as-list > div'); if (items.length) items[items.length-1].scrollIntoView({behavior:'smooth'}); document.getElementById('ref-evt-as-count').textContent = items.length + ' items'"
      (~tw :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm")
      "Add item (scrolls after swap)")
    (div :id "ref-evt-as-count" (~tw :tokens "text-sm text-emerald-700") "1 items")
    (div
      :id "ref-evt-as-list"
      (~tw :tokens "p-3 rounded border border-stone-200 space-y-1 max-h-32 overflow-y-auto")
      (div
        (~tw :tokens "text-sm text-stone-500")
        "Items will be appended and scrolled into view."))))