coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Details

Browse Source 
- 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:
giles
2026-03-14 20:43:57 +00:00
parent 93e140280b
commit a7638e48d5
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
sx/sx/home-stepper.sx
View File

@@ -52,7 +52,7 @@
(do (append! tokens {"text" (str "\"" expr "\"") "cls" "text-emerald-700" "step" (get step-ref "v")}) (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))) (dict-set! step-ref "v" (+ (get step-ref "v") 1)))
(number? expr) (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))) (dict-set! step-ref "v" (+ (get step-ref "v") 1)))
(= (type-of expr) "keyword") (= (type-of expr) "keyword")
(append! tokens {"text" (str ":" (keyword-name expr)) "cls" "text-violet-600" "step" (get step-ref "v")}) (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))) (let ((name (symbol-name expr)))
(append! tokens {"text" name "cls" (append! tokens {"text" name "cls"
(cond (cond
(is-html-tag? name) "text-rose-600 font-semibold" (is-html-tag? name) "text-sky-700 font-semibold"
(starts-with? name "~") "text-violet-700" (starts-with? name "~") "text-rose-600 font-semibold"
:else "text-blue-800") :else "text-stone-700")
"step" (get step-ref "v")})) "step" (get step-ref "v")}))
(list? expr) (list? expr)
(if (empty? expr) (if (empty? expr)
@@ -173,16 +173,15 @@
(build-code-tokens (first parsed) tokens step-ref 0) (build-code-tokens (first parsed) tokens step-ref 0)
(reset! code-tokens tokens))))))) (reset! code-tokens tokens)))))))
(div :class "space-y-4" (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" (pre :class "text-sm font-mono bg-stone-50 rounded p-4 overflow-x-auto leading-relaxed"
(map (fn (tok) (map (fn (tok)
(let ((step-num (get tok "step")) (let ((step-num (get tok "step")))
(cur (deref step-idx)))
(span :class (str (get tok "cls") (span :class (str (get tok "cls")
(cond (cond
(= step-num -1) "" (= step-num -1) ""
(= step-num cur) " bg-violet-100 rounded font-bold" (= step-num (deref step-idx)) " bg-violet-100 rounded font-bold"
(< step-num cur) " opacity-50" (< step-num (deref step-idx)) " opacity-60"
:else "")) :else ""))
(get tok "text")))) (get tok "text"))))
(deref code-tokens))) (deref code-tokens)))