(defcomp
  ()
  (~docs/page
    :title "Server Writes to Signals"
    (p
      "Two separate islands share a named store "
      (code "\"demo-price\"")
      ". Island A creates the store and has control buttons. Island B reads it. Signal changes propagate instantly across island boundaries.")
    (div
      (~tw :tokens "space-y-3")
      (~reactive-islands/marshes/demo-marsh-store-writer)
      (~reactive-islands/marshes/demo-marsh-store-reader))
    (p
      (~tw :tokens "mt-3 text-sm text-stone-500")
      "The \"Flash Sale\" buttons call "
      (code "(reset! price 14.99)")
      " — exactly what "
      (code "data-sx-signal=\"demo-price:14.99\"")
      " does during morph.")
    (div
      (~tw :tokens "mt-4 rounded border border-stone-200 bg-stone-50 p-3")
      (p
        (~tw :tokens "text-sm font-medium text-stone-700 mb-2")
        "Server endpoint (ready for morph integration):")
      (div :id "marsh-flash-target" (~tw :tokens "min-h-[2rem]"))
      (button
        (~tw :tokens "mt-2 px-3 py-1.5 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
        :sx-get "/sx/(geography.(reactive.(api.flash-sale)))"
        :sx-target "#marsh-flash-target"
        :sx-swap "innerHTML"
        "Fetch from server"))
    (~docs/code
      :src (highlight
        ";; Island A — creates the store, has control buttons\n(defisland ~reactive-islands/marshes/demo-marsh-store-writer ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99)))))\n    ;; (reset! price 14.99) is what data-sx-signal does during morph\n    (button :on-click (fn (e) (reset! price 14.99))\n      \"Flash Sale $14.99\")))\n\n;; Island B — reads the same store, different island\n(defisland ~reactive-islands/marshes/demo-marsh-store-reader ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99)))))\n    (span \"$\" (deref price))))\n\n;; Server returns: data-sx-signal writes to the store during morph\n;; (div :data-sx-signal \"demo-price:14.99\"\n;;   (p \"Flash sale! Price updated.\"))"
        "lisp"))
    (p
      "In production, the server response includes "
      (code "data-sx-signal=\"demo-price:14.99\"")
      ". The morph algorithm processes this attribute, calls "
      (code "(reset! (use-store \"demo-price\") 14.99)")
      ", and removes the attribute from the DOM. Every island reading that store updates instantly — fine-grained, no re-render.")))
