(defcomp
  ()
  (div
    (~tw :tokens "space-y-3")
    (div
      (~tw :tokens "flex gap-2")
      (button
        :sx-post "/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=beforeend"
        :sx-target "#swap-log"
        :sx-swap "beforeend"
        (~tw :tokens "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700")
        "Add to End")
      (button
        :sx-post "/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=afterbegin"
        :sx-target "#swap-log"
        :sx-swap "afterbegin"
        (~tw :tokens "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700")
        "Add to Start")
      (button
        :sx-post "/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=none"
        :sx-target "#swap-log"
        :sx-swap "none"
        (~tw :tokens "px-3 py-1.5 bg-stone-600 text-white rounded text-sm hover:bg-stone-700")
        "Silent Ping")
      (span
        :id "swap-counter"
        (~tw :tokens "self-center text-sm text-stone-500")
        "Count: 0"))
    (div
      :id "swap-log"
      (~tw :tokens "border border-stone-200 rounded h-48 overflow-y-auto divide-y divide-stone-100")
      (p (~tw :tokens "p-3 text-sm text-stone-400") "Log entries will appear here."))))