From 13f24e5f26288034821c2a2ff84627347d436b71 Mon Sep 17 00:00:00 2001 From: giles Date: Sun, 12 Apr 2026 18:08:45 +0000 Subject: [PATCH] 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) --- sx/sx/pretext-client.sx | 97 +++++++++++++++++++---------------------- 1 file changed, 46 insertions(+), 51 deletions(-) diff --git a/sx/sx/pretext-client.sx b/sx/sx/pretext-client.sx index 3896b6bc..8afd1917 100644 --- a/sx/sx/pretext-client.sx +++ b/sx/sx/pretext-client.sx @@ -67,55 +67,50 @@ (div (~tw :tokens "text-xs text-stone-400") (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 + :class "relative rounded-lg border border-stone-200 bg-white overflow-hidden" (div - :class "relative rounded-lg border border-stone-200 bg-white overflow-hidden" - (div - :class "px-4 pt-3 pb-1" - (span - :class "text-xs font-medium uppercase tracking-wide text-stone-400" - (str - "Client-side — " - (len lines) - " lines, " - (len words) - " words"))) - (div - :style (str - "position:relative;height:" - (* (len lines) lh) - "px;padding:12px 16px;") - (map - (fn - (line) - (let - ((y (get line :y))) - (map - (fn - (pw) - (span - :style (str - "position:absolute;left:" - (+ (get pw :x) 16) - "px;top:" - (+ y 12) - "px;font-family:'Pretext Serif',serif;font-size:" - sz - "px;line-height:" - lh - "px;white-space:nowrap;") - (get pw :word))) - (get line :words)))) - lines)) - (div - :class "px-4 py-2 border-t border-stone-100 bg-stone-50 flex justify-between" - (span - :class "text-xs text-stone-400" - (str (len lines) " lines")) - (span - :class "text-xs text-stone-400" - (str "width: " mxw "px")))))))))) + :class "px-4 pt-3 pb-1" + (span + :class "text-xs font-medium uppercase tracking-wide text-stone-400" + (str + "Client-side — " + (len (deref layout)) + " lines, " + (len words) + " words"))) + (div + :style (str + "position:relative;height:" + (* (len (deref layout)) (* (deref font-size) 1.5)) + "px;padding:12px 16px;") + (map + (fn + (line) + (let + ((y (get line :y))) + (map + (fn + (pw) + (span + :style (str + "position:absolute;left:" + (+ (get pw :x) 16) + "px;top:" + (+ y 12) + "px;font-family:'Pretext Serif',serif;font-size:" + (deref font-size) + "px;line-height:" + (* (deref font-size) 1.5) + "px;white-space:nowrap;") + (get pw :word))) + (get line :words)))) + (deref layout))) + (div + :class "px-4 py-2 border-t border-stone-100 bg-stone-50 flex justify-between" + (span + :class "text-xs text-stone-400" + (str (len (deref layout)) " lines")) + (span + :class "text-xs text-stone-400" + (str "width: " (deref max-w) "px")))))))))