(defcomp
  ()
  (~docs/page
    :title "Reactive View Transform"
    (p
      "A view-mode signal controls how items are displayed. Click \"Fetch Catalog\" to load items from the server, then toggle the view mode. The "
      (em "same")
      " data re-renders differently based on client state — no server round-trip for view changes.")
    (~reactive-islands/marshes/demo-marsh-view-transform)
    (~docs/code
      :src (highlight
        ";; View mode transforms display without refetch\n(defisland ~reactive-islands/marshes/demo-marsh-view-transform ()\n  (let ((view (signal \"list\"))\n        (items (signal nil)))\n    (div\n      ;; View toggle\n      (div :class \"flex gap-2\"\n        (button :on-click (fn (e) (reset! view \"list\")) \"List\")\n        (button :on-click (fn (e) (reset! view \"grid\")) \"Grid\")\n        (button :on-click (fn (e) (reset! view \"compact\")) \"Compact\"))\n\n      ;; Fetch from server — stores raw data in signal\n      (button :sx-get \"/sx/(geography.(reactive.(api.catalog)))\"\n              :sx-target \"#catalog-raw\"\n              :sx-swap \"innerHTML\"\n        \"Fetch Catalog\")\n\n      ;; Raw server content (hidden, used as data source)\n      (div :id \"catalog-raw\" :class \"hidden\")\n\n      ;; Reactive display — re-renders when view changes\n      (div (computed (fn () (render-view (deref view) (deref items))))))))"
        "lisp"))
    (p
      "The view signal doesn't just toggle CSS classes — it fundamentally reshapes the DOM. List view shows description. Grid view arranges in columns. Compact view shows names only. All from the same server data, transformed by client state.")))
