;; ---------------------------------------------------------------------------
;; Live Styles
;; ---------------------------------------------------------------------------
(defcomp ()
  (~docs/page :title "Live Styles"

    (~docs/section :title "Styles That Respond to Events" :id "concept"
      (p "Combine " (code "~live") " (SSE) or " (code "~ws") " (WebSocket) with style "
         "components, and you get styles that change in real-time in response to server "
         "events. No new infrastructure — just components receiving data through a "
         "persistent transport."))

    (~docs/section :title "SSE: Live Theme Updates" :id "sse-theme"
      (p "A " (code "~live") " component declares a persistent connection to an SSE "
         "endpoint. When the server pushes a new event, " (code "resolveSuspense")
         " replaces the content:")
      (highlight
        "(~live :src \"/api/stream/brand\"\n  (~shared:pages/suspense :id \"theme\"\n    (~cssx/theme :primary \"#7c3aed\" :surface \"#fafaf9\")))"
        "lisp")
      (p "Server pushes a new theme:")
      (highlight
        "event: sx-resolve\ndata: {\"id\": \"theme\", \"sx\": \"(~cssx/theme :primary \\\"#2563eb\\\" :surface \\\"#1e1e2e\\\")\"}"
        "text")
      (p "The " (code "~cssx/theme") " component emits CSS custom properties. Everything "
         "using " (code "var(--color-primary)") " repaints instantly:")
      (highlight
        "(defcomp ~cssx/theme (&key primary surface)\n  (style (str \":root {\"\n    \"--color-primary:\" (or primary \"#7c3aed\") \";\"\n    \"--color-surface:\" (or surface \"#fafaf9\") \"}\")))"
        "lisp"))

    (~docs/section :title "SSE: Live Dashboard Metrics" :id "sse-metrics"
      (p "Style changes driven by live data — the component decides the visual treatment:")
      (highlight
        "(~live :src \"/api/stream/dashboard\"\n  (~shared:pages/suspense :id \"cpu\"\n    (~cssx/metric :value 0 :label \"CPU\" :threshold 80))\n  (~shared:pages/suspense :id \"memory\"\n    (~cssx/metric :value 0 :label \"Memory\" :threshold 90))\n  (~shared:pages/suspense :id \"requests\"\n    (~cssx/metric :value 0 :label \"RPS\" :threshold 1000)))"
        "lisp")
      (p "Server pushes updated values. " (code "~cssx/metric") " turns red when "
         (code "value > threshold") " — the styling logic lives in the component, "
         "not in CSS selectors or JavaScript event handlers."))

    (~docs/section :title "WebSocket: Collaborative Design" :id "ws-design"
      (p "Bidirectional channel for real-time collaboration. A designer adjusts a color, "
         "all connected clients see the change:")
      (highlight
        "(~ws :src \"/ws/design-studio\"\n  (~shared:pages/suspense :id \"canvas-theme\"\n    (~cssx/theme :primary \"#7c3aed\")))"
        "lisp")
      (p "Client sends a color change:")
      (highlight
        ";; Designer picks a new primary color\n(sx-send ws-conn '(theme-update :primary \"#dc2626\"))"
        "lisp")
      (p "Server broadcasts to all connected clients via " (code "sx-resolve") " — "
         "every client's " (code "~cssx/theme") " component re-renders with the new color."))

    (~docs/section :title "Why This Works" :id "why"
      (p "Every one of these patterns is just a " (code "defcomp") " receiving data "
         "through a persistent transport. The styling strategy — CSS custom properties, "
         "class swaps, inline styles, " (code "<style>") " blocks — is the component's "
         "private business. The transport doesn't know or care.")
      (p "A parallel style system would have needed its own streaming, its own caching, "
         "its own delta protocol for each of these use cases — duplicating what components "
         "already do.")
      (p (~tw :tokens "mt-4 text-stone-500 italic")
         "Note: ~live and ~ws are planned (see Live Streaming). The patterns shown here "
         "will work as described once the streaming transport is implemented. The component "
         "and suspense infrastructure they depend on already exists."))))
