Move example CSS to basics.css, pretty-print wire response, update sx logo

- Move .sx-fade-in and .sx-loading-btn CSS from inline (style) tags to
  basics.css so they go through the on-demand CSS registry
- Pretty-print sx source in wire response display (not all on one line)
- Change sx logo from </> icon to (</>) text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

shared/static/styles/basics.css

@@ -30,3 +30,22 @@
 :where(h1, h2, h3, h4, h5, h6) {
     font-weight: 800;
 }
+
+/* sx example demos — on-demand CSS for interactive examples */
+@keyframes sxFadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.sx-fade-in {
+    animation: sxFadeIn 0.5s ease-out;
+}
+.sx-loading-btn.sx-request {
+    opacity: 0.7;
+    pointer-events: none;
+}
+.sx-loading-btn.sx-request .sx-spinner {
+    display: inline-block;
+}
+.sx-loading-btn .sx-spinner {
+    display: none;
+}

sx/sxc/examples.sx

@@ -530,7 +530,6 @@
 
 (defcomp ~anim-result (&key color time)
   (div :class "sx-fade-in space-y-2"
-    (style ".sx-fade-in { animation: sxFadeIn 0.5s ease-out; } @keyframes sxFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }")
     (div :class (str "p-4 rounded transition-colors duration-700 " color)
       (p :class "font-medium" "Faded in!")
       (p :class "text-sm mt-1" (str "Loaded at " time)))))
@@ -723,7 +722,6 @@
 
 (defcomp ~loading-states-demo ()
   (div :class "space-y-4"
-    (style ".sx-loading-btn.sx-request { opacity: 0.7; pointer-events: none; } .sx-loading-btn.sx-request .sx-spinner { display: inline-block; } .sx-loading-btn .sx-spinner { display: none; }")
     (button
       :sx-get "/examples/api/slow"
       :sx-target "#loading-result"

sx/sxc/sx_components.py

@@ -101,8 +101,13 @@ def _full_wire_text(sx_src: str, *comp_names: str) -> str:
             if comp_text:
                 parts.append(f'<script type="text/sx" data-components>\n{comp_text}\n</script>')
     parts.append('<style data-sx-css>/* new CSS rules */</style>')
-    parts.append(sx_src)
-    return "\n".join(parts)
+    # Pretty-print the sx source for readable display
+    try:
+        from shared.sx.parser import parse as _parse, serialize as _serialize
+        parts.append(_serialize(_parse(sx_src), pretty=True))
+    except Exception:
+        parts.append(sx_src)
+    return "\n\n".join(parts)
 
 
 # ---------------------------------------------------------------------------
@@ -125,7 +130,8 @@ def _sx_header_sx(nav: str | None = None, *, child: str | None = None) -> str:
     """Build the sx docs menu-row."""
     return sx_call("menu-row-sx",
         id="sx-row", level=1, colour="violet",
-        link_href="/", link_label="sx", icon="fa fa-code",
+        link_href="/", link_label="sx",
+        link_label_content=SxExpr('(span :class "font-mono" "(</>) sx")'),
         nav=SxExpr(nav) if nav else None,
         child_id="sx-header-child",
         child=SxExpr(child) if child else None,