From 8100dc5fc9cc7025236896b237784c1779a4c866 Mon Sep 17 00:00:00 2001
From: giles <giles.bradshaw@rose-ash.com>
Date: Fri, 13 Mar 2026 03:17:53 +0000
Subject: [PATCH] Convert ~layouts/header from inline tw() to ~cssx/tw spreads

Class-based styling with JIT CSS rules collected into a single
<style> tag via ~cssx/flush in ~layouts/doc.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 sx/sx/layouts.sx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/sx/sx/layouts.sx b/sx/sx/layouts.sx
index 45675db..96e550d 100644
--- a/sx/sx/layouts.sx
+++ b/sx/sx/layouts.sx
@@ -21,21 +21,21 @@
         (shade (signal 500))
         (current-family (computed (fn ()
           (nth families (mod (deref idx) (len families)))))))
-    (div :style (tw "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center")
+    (div (~cssx/tw :tokens "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center")
       ;; Logo — only this navigates home
       (a :href "/sx/"
          :sx-get "/sx/" :sx-target "#main-panel" :sx-select "#main-panel"
          :sx-swap "outerHTML" :sx-push-url "true"
-         :style (tw "block no-underline")
+        (~cssx/tw :tokens "block no-underline")
         (lake :id "logo"
-          (span :style (tw "block mb-2 text-violet-699 text-4xl font-bold font-mono")
+          (span (~cssx/tw :tokens "block mb-2 text-violet-699 text-4xl font-bold font-mono")
             "(<sx>)")))
       ;; Tagline — clicking "reactive" cycles colour.
-      (p :style (tw "mb-1 text-stone-500 text-lg")
+      (p (~cssx/tw :tokens "mb-1 text-stone-500 text-lg")
         "The framework-free "
         (span
+          (~cssx/tw :tokens "font-bold")
           :style (str "color:" (colour (deref current-family) (deref shade)) ";"
-                      (tw "font-bold")
                       "cursor:pointer;transition:color 0.3s,font-weight 0.3s;")
           :on-click (fn (e)
             (batch (fn ()
@@ -45,10 +45,10 @@
         " hypermedium")
       ;; Lake: server morphs copyright on navigation without disturbing signals.
       (lake :id "copyright"
-        (p :style (tw "text-stone-400 text-xs")
+        (p (~cssx/tw :tokens "text-stone-400 text-xs")
           "© Giles Bradshaw 2026"
           (when path
-            (span :style (str (tw "text-stone-300 text-xs") "margin-left:0.5em;")
+            (span (~cssx/tw :tokens "text-stone-300 text-xs") :style "margin-left:0.5em;"
               (str "· " path))))))))
 
 
@@ -143,6 +143,8 @@
         ;; Children as button links
         (when (get nav-state "children")
           (~layouts/nav-children :items (get nav-state "children"))))
+      ;; Flush CSSX rules collected during header/nav rendering
+      (~cssx/flush)
       ;; Page content follows
       children)))