From ffe849df8e775771683cfb1504e3a65951cd31a5 Mon Sep 17 00:00:00 2001
From: giles <giles.bradshaw@rose-ash.com>
Date: Mon, 23 Mar 2026 20:20:11 +0000
Subject: [PATCH] Stepper: render tokenized code with syntax highlighting in
 SSR

Replace raw source <pre> with styled spans from build-code-tokens.
Each token gets its colour class, and tokens before the current
step get font-bold text-xs, tokens after get opacity-40.

Home page currently blocked by a separate Map key parse error.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 sx/sx/home-stepper.sx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/sx/sx/home-stepper.sx b/sx/sx/home-stepper.sx
index 8c86965..4c80cc6 100644
--- a/sx/sx/home-stepper.sx
+++ b/sx/sx/home-stepper.sx
@@ -219,11 +219,22 @@
                 (update-code-highlight)
                 (run-post-render-hooks)))))))
       (div :class "space-y-4"
-        ;; Code view lake — client builds interactive spans, SSR shows source
+        ;; Code view lake — SSR renders tokenized code with highlighting
         (div (~cssx/tw :tokens "font-mono bg-stone-50 rounded p-2 overflow-x-auto leading-relaxed whitespace-pre-wrap")
           :style "font-size:0.5rem"
           (lake :id "code-view"
-            (pre :style "margin:0;white-space:pre-wrap;" source)))
+            (map (fn (tok)
+              (let ((step (get tok "step"))
+                    (cur (deref step-idx))
+                    (active (<= step cur))
+                    (cls (str (get tok "cls")
+                              (if (and active (>= step 0) (not (get tok "spread")))
+                                " font-bold text-xs"
+                                (if (and (not active) (>= step 0) (not (get tok "spread")))
+                                  " opacity-40"
+                                  "")))))
+                (span :class cls (get tok "text"))))
+              (deref code-tokens))))
         ;; Controls
         (div :class "flex items-center justify-center gap-2 md:gap-3"
           (button :on-click (fn (e) (do-back))