(defisland
  ()
  (let
    ((view (signal "list"))
      (items (def-store "catalog-items" (fn () (signal (list))))))
    (div
      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
      (h4 (~tw :tokens "font-semibold text-stone-800") "Reactive View Transform")
      (div
        (~tw :tokens "flex gap-2")
        (button
          :class (computed
            (fn
              ()
              (str
                "px-3 py-1.5 rounded text-sm font-medium "
                (if
                  (= (deref view) "list")
                  "bg-violet-600 text-white"
                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
          :on-click (fn (e) (reset! view "list"))
          "List")
        (button
          :class (computed
            (fn
              ()
              (str
                "px-3 py-1.5 rounded text-sm font-medium "
                (if
                  (= (deref view) "grid")
                  "bg-violet-600 text-white"
                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
          :on-click (fn (e) (reset! view "grid"))
          "Grid")
        (button
          :class (computed
            (fn
              ()
              (str
                "px-3 py-1.5 rounded text-sm font-medium "
                (if
                  (= (deref view) "compact")
                  "bg-violet-600 text-white"
                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
          :on-click (fn (e) (reset! view "compact"))
          "Compact"))
      (div
        (~tw :tokens "flex items-center gap-3")
        (button
          (~tw :tokens "px-4 py-2 rounded bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700")
          :sx-get "/sx/(geography.(reactive.(api.catalog)))"
          :sx-target "#catalog-msg"
          :sx-swap "innerHTML"
          "Fetch Catalog")
        (span
          (~tw :tokens "text-xs text-stone-400")
          "Server sends data + writes to signal"))
      (div :id "catalog-msg" (~tw :tokens "min-h-[1.5rem]"))
      (div
        (~tw :tokens "min-h-[4rem]")
        (when
          (> (len (deref items)) 0)
          (cond
            (= (deref view) "list")
            (div
              (~tw :tokens "space-y-2")
              (map
                (fn
                  (item)
                  (div
                    (~tw :tokens "flex items-center justify-between p-2 rounded bg-stone-50 border border-stone-100")
                    (div
                      (span
                        (~tw :tokens "text-sm font-medium text-stone-800")
                        (get item "name"))
                      (span
                        (~tw :tokens "text-xs text-stone-500 block")
                        (get item "desc")))
                    (span
                      (~tw :tokens "text-sm font-bold text-emerald-700")
                      "$"
                      (get item "price"))))
                (deref items)))
            (= (deref view) "grid")
            (div
              (~tw :tokens "grid grid-cols-2 gap-2")
              (map
                (fn
                  (item)
                  (div
                    (~tw :tokens "p-3 rounded bg-violet-50 border border-violet-200 text-center")
                    (p
                      (~tw :tokens "text-sm font-semibold text-stone-800")
                      (get item "name"))
                    (p
                      (~tw :tokens "text-lg font-bold text-emerald-700")
                      "$"
                      (get item "price"))))
                (deref items)))
            :else (div
              (~tw :tokens "flex flex-wrap gap-1")
              (map
                (fn
                  (item)
                  (span
                    (~tw :tokens "px-2 py-0.5 rounded bg-stone-100 text-xs text-stone-700")
                    (get item "name")))
                (deref items)))))))))
