From a7638e48d5c502b88e438e6c26141a16208eb8b7 Mon Sep 17 00:00:00 2001 From: giles Date: Sat, 14 Mar 2026 20:43:57 +0000 Subject: [PATCH] Reactive code view with syntax colouring, fix indenting and nil refs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Each token span independently reacts to step-idx via deref-as-shift - Colours match highlight.py: sky for HTML tags, rose for components, emerald for strings, violet for keywords, amber for numbers - Current step bold+violet bg, completed steps dimmed - No closing paren on separate line - Fix bare nil → NIL in eventDetail and domGetData Co-Authored-By: Claude Opus 4.6 (1M context) --- sx/sx/home-stepper.sx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/sx/sx/home-stepper.sx b/sx/sx/home-stepper.sx index 3dc4463..81a7e40 100644 --- a/sx/sx/home-stepper.sx +++ b/sx/sx/home-stepper.sx @@ -52,7 +52,7 @@ (do (append! tokens {"text" (str "\"" expr "\"") "cls" "text-emerald-700" "step" (get step-ref "v")}) (dict-set! step-ref "v" (+ (get step-ref "v") 1))) (number? expr) - (do (append! tokens {"text" (str expr) "cls" "text-blue-600" "step" (get step-ref "v")}) + (do (append! tokens {"text" (str expr) "cls" "text-amber-700" "step" (get step-ref "v")}) (dict-set! step-ref "v" (+ (get step-ref "v") 1))) (= (type-of expr) "keyword") (append! tokens {"text" (str ":" (keyword-name expr)) "cls" "text-violet-600" "step" (get step-ref "v")}) @@ -60,9 +60,9 @@ (let ((name (symbol-name expr))) (append! tokens {"text" name "cls" (cond - (is-html-tag? name) "text-rose-600 font-semibold" - (starts-with? name "~") "text-violet-700" - :else "text-blue-800") + (is-html-tag? name) "text-sky-700 font-semibold" + (starts-with? name "~") "text-rose-600 font-semibold" + :else "text-stone-700") "step" (get step-ref "v")})) (list? expr) (if (empty? expr) @@ -173,16 +173,15 @@ (build-code-tokens (first parsed) tokens step-ref 0) (reset! code-tokens tokens))))))) (div :class "space-y-4" - ;; Reactive code view — tokens highlight as you step + ;; Reactive code view — each token span reacts to step-idx via deref-as-shift (pre :class "text-sm font-mono bg-stone-50 rounded p-4 overflow-x-auto leading-relaxed" (map (fn (tok) - (let ((step-num (get tok "step")) - (cur (deref step-idx))) + (let ((step-num (get tok "step"))) (span :class (str (get tok "cls") (cond (= step-num -1) "" - (= step-num cur) " bg-violet-100 rounded font-bold" - (< step-num cur) " opacity-50" + (= step-num (deref step-idx)) " bg-violet-100 rounded font-bold" + (< step-num (deref step-idx)) " opacity-60" :else "")) (get tok "text")))) (deref code-tokens)))