Fix Pretext island reactivity: deref inside DOM tree, not let binding

The (let ((lines (deref layout))) ...) pattern captured the layout value
once at island initialization. Replacing with (deref layout) inline in the
DOM expressions makes the reactive system track the dependency and
re-render when signals change.

Sliders and algorithm toggle now trigger layout recomputation and DOM
update. Remaining: reactive DOM patching for absolutely-positioned spans
creates visual artifacts (old spans persist). Needs keyed list or full
container replacement.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-12 18:08:45 +00:00
parent e71e74941e
commit 13f24e5f26

View File

@@ -67,11 +67,6 @@
(div (div
(~tw :tokens "text-xs text-stone-400") (~tw :tokens "text-xs text-stone-400")
(str (deref max-w) "px / " (deref font-size) "px"))) (str (deref max-w) "px / " (deref font-size) "px")))
(let
((lines (deref layout))
(lh (* (deref font-size) 1.5))
(mxw (deref max-w))
(sz (deref font-size)))
(div (div
:class "relative rounded-lg border border-stone-200 bg-white overflow-hidden" :class "relative rounded-lg border border-stone-200 bg-white overflow-hidden"
(div (div
@@ -80,14 +75,14 @@
:class "text-xs font-medium uppercase tracking-wide text-stone-400" :class "text-xs font-medium uppercase tracking-wide text-stone-400"
(str (str
"Client-side — " "Client-side — "
(len lines) (len (deref layout))
" lines, " " lines, "
(len words) (len words)
" words"))) " words")))
(div (div
:style (str :style (str
"position:relative;height:" "position:relative;height:"
(* (len lines) lh) (* (len (deref layout)) (* (deref font-size) 1.5))
"px;padding:12px 16px;") "px;padding:12px 16px;")
(map (map
(fn (fn
@@ -104,18 +99,18 @@
"px;top:" "px;top:"
(+ y 12) (+ y 12)
"px;font-family:'Pretext Serif',serif;font-size:" "px;font-family:'Pretext Serif',serif;font-size:"
sz (deref font-size)
"px;line-height:" "px;line-height:"
lh (* (deref font-size) 1.5)
"px;white-space:nowrap;") "px;white-space:nowrap;")
(get pw :word))) (get pw :word)))
(get line :words)))) (get line :words))))
lines)) (deref layout)))
(div (div
:class "px-4 py-2 border-t border-stone-100 bg-stone-50 flex justify-between" :class "px-4 py-2 border-t border-stone-100 bg-stone-50 flex justify-between"
(span (span
:class "text-xs text-stone-400" :class "text-xs text-stone-400"
(str (len lines) " lines")) (str (len (deref layout)) " lines"))
(span (span
:class "text-xs text-stone-400" :class "text-xs text-stone-400"
(str "width: " mxw "px")))))))))) (str "width: " (deref max-w) "px")))))))))