Reactive code view with syntax colouring, fix indenting and nil refs
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m3s

- 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) <noreply@anthropic.com>
This commit is contained in:
2026-03-14 20:43:57 +00:00
parent 93e140280b
commit a7638e48d5

View File

@@ -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)))