Stepper island: eager parsing + SSR content in lakes

Moved source parsing (sx-parse, split-tag, build-code-tokens) out
of the effect so it runs eagerly during SSR. Only DOM manipulation
(build-code-dom, schedule-idle) stays in the effect.

Lakes now have SSR content:
- code-view: shows source code as preformatted text
- home-preview: shows "the joy of sx" with styled spans

Client hydrates and replaces with interactive version.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

sx/sx/home-stepper.sx

@@ -195,35 +195,35 @@
           ;; Validate — reset to default if out of range
           (when (or (< (deref step-idx) 0) (> (deref step-idx) 16))
             (reset! step-idx 9))))
-      ;; Auto-parse via effect (bind to _ to suppress return value in DOM)
+      ;; Parse source eagerly (pure computation — works in SSR and client)
+      (let ((parsed (sx-parse source)))
+        (when (not (empty? parsed))
+          (let ((result (list))
+                (step-ref (dict "v" 0)))
+            (split-tag (first parsed) result)
+            (reset! steps result)
+            (let ((tokens (list)))
+              (dict-set! step-ref "v" 0)
+              (build-code-tokens (first parsed) tokens step-ref 0)
+              (reset! code-tokens tokens)))))
+      ;; DOM build via effect (client-only — needs live DOM)
       (let ((_eff (effect (fn ()
-              (let ((parsed (sx-parse source)))
+              (schedule-idle (fn ()
-                (when (not (empty? parsed))
+                (build-code-dom)
-                  (let ((result (list))
+                (let ((preview (get-preview)))
-                        (step-ref (dict "v" 0)))
+                  (when preview (dom-set-prop preview "innerHTML" "")))
-                    (split-tag (first parsed) result)
+                (let ((target (deref step-idx)))
-                    (reset! steps result)
+                  (reset! step-idx 0)
-                    (let ((tokens (list)))
+                  (set-stack (list (get-preview)))
-                      (dict-set! step-ref "v" 0)
+                  (for-each (fn (_) (do-step)) (slice (deref steps) 0 target)))
-                      (build-code-tokens (first parsed) tokens step-ref 0)
+                (update-code-highlight)
-                      (reset! code-tokens tokens))
+                (run-post-render-hooks)))))))
-                    ;; Defer code DOM build until lake exists
-                    (schedule-idle (fn ()
-                      (build-code-dom)
-                      ;; Clear preview and replay to initial step-idx
-                      (let ((preview (get-preview)))
-                        (when preview (dom-set-prop preview "innerHTML" "")))
-                      (let ((target (deref step-idx)))
-                        (reset! step-idx 0)
-                        (set-stack (list (get-preview)))
-                        (for-each (fn (_) (do-step)) (slice (deref steps) 0 target)))
-                      (update-code-highlight)
-                      (run-post-render-hooks))))))))))
       (div :class "space-y-4"
-        ;; Code view lake — spans built imperatively, classes updated on step
+        ;; Code view lake — client builds interactive spans, SSR shows source
         (div (~cssx/tw :tokens "font-mono bg-stone-50 rounded p-2 overflow-x-auto leading-relaxed whitespace-pre-wrap")
           :style "font-size:0.5rem"
-          (lake :id "code-view"))
+          (lake :id "code-view"
+            (pre :style "margin:0;white-space:pre-wrap;" source)))
         ;; Controls
         (div :class "flex items-center justify-center gap-2 md:gap-3"
           (button :on-click (fn (e) (do-back))
@@ -240,5 +240,12 @@
                        "text-violet-600 hover:text-violet-800 hover:bg-violet-50"
                        "text-violet-300 cursor-not-allowed"))
             "\u25b6"))
-        ;; Live preview lake
+        ;; Live preview lake — SSR shows the final rendered result
-        (lake :id "home-preview"))))))
+        (lake :id "home-preview"
+          (div (~cssx/tw :tokens "text-center")
+            (h1 (~cssx/tw :tokens "text-3xl font-bold mb-2")
+              (span (~cssx/tw :tokens "text-rose-500") "the ")
+              (span (~cssx/tw :tokens "text-amber-500") "joy ")
+              (span (~cssx/tw :tokens "text-emerald-500") "of ")
+              (span (~cssx/tw :tokens "text-violet-600 text-4xl") "sx")))))))))
+