(defcomp ()
  (~docs/page :title "Cyst"
    (p "A " (code "cyst") " is an isolated reactive subtree inside a parent island. When the parent re-renders, the cyst's DOM is preserved — event handlers, signal subscriptions, and state all survive.")
    (~reactive-islands/index/demo-cyst)
    (~docs/code :src (highlight "(cyst :key \"demo-cyst\"
  (let ((child-count (signal 0)))
    (div
      (button :on-click (fn (e) (swap! child-count inc)) \"+\")
      (span (deref child-count)))))" "lisp"))
    (p "Click the parent + button — the parent count increments but the cyst's count is unaffected. Click the cyst's + button — it increments independently. The cyst's DOM persists across parent re-renders because " (code "render-dom") " returns the cached DOM node instead of recreating it.")
    (p "Without " (code "cyst") ", a reactive island nested inside another island's render tree gets destroyed and recreated on every parent re-render. Event handlers are lost, signals reset to initial values. " (code "cyst") " solves this by caching the rendered DOM keyed by the " (code ":key") " parameter and returning it when the node is still connected to the document.")
    (p "Usage: " (code "(cyst :key \"unique-id\" body...)") ". The key must be unique within the page. The body is evaluated in a fresh " (code "with-island-scope") " with its own disposer list.")))
