SPA navigation, page component refactors, WASM rebuild

Refactor page components (docs, examples, specs, reference, layouts)
and adapters (adapter-sx, boot-helpers, orchestration) across sx/ and
web/ directories. Add Playwright SPA navigation tests. Rebuild WASM
kernel with updated bytecode. Add OCaml primitives for request handling.

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

sx/sx/examples.sx

@@ -1,58 +1,103 @@
-;; Example page template and reference index
-;; Template receives data values (code strings, titles), calls highlight internally.
-
-(defcomp ~examples/page-content (&key (title :as string) (description :as string) (demo-description :as string?) demo
-    (sx-code :as string) (sx-lang :as string?) (handler-code :as string) (handler-lang :as string?)
-    (comp-placeholder-id :as string?) (wire-placeholder-id :as string?) (wire-note :as string?)
-    (comp-heading :as string?) (handler-heading :as string?))
-  (~docs/page :title title
+(defcomp
+  ~examples/page-content
+  (&key
+    (title :as string)
+    (description :as string)
+    (demo-description :as string?)
+    demo
+    (sx-code :as string)
+    (sx-lang :as string?)
+    (handler-code :as string)
+    (handler-lang :as string?)
+    (comp-placeholder-id :as string?)
+    (wire-placeholder-id :as string?)
+    (wire-note :as string?)
+    (comp-heading :as string?)
+    (handler-heading :as string?))
+  (~docs/page
+    :title title
     (p :class "text-stone-600 mb-6" description)
-    (~examples/card :title "Demo" :description demo-description
+    (~examples/card
+      :title "Demo"
+      :description demo-description
       (~examples/demo demo))
     (h3 :class "text-lg font-semibold text-stone-700 mt-6" "S-expression")
-    (~examples/source :code (highlight sx-code (if sx-lang sx-lang "lisp")))
-    (when comp-placeholder-id
+    (~examples/source
+      :src-code (highlight sx-code (if sx-lang sx-lang "lisp")))
+    (when
+      comp-placeholder-id
       (<>
-        (h3 :class "text-lg font-semibold text-stone-700 mt-6"
+        (h3
+          :class "text-lg font-semibold text-stone-700 mt-6"
           (if comp-heading comp-heading "Component"))
         (~docs/placeholder :id comp-placeholder-id)))
-    (h3 :class "text-lg font-semibold text-stone-700 mt-6"
+    (h3
+      :class "text-lg font-semibold text-stone-700 mt-6"
       (if handler-heading handler-heading "Server handler"))
-    (~examples/source :code (highlight handler-code (if handler-lang handler-lang "python")))
-    (div :class "flex items-center justify-between mt-6"
+    (~examples/source
+      :src-code (highlight handler-code (if handler-lang handler-lang "python")))
+    (div
+      :class "flex items-center justify-between mt-6"
       (h3 :class "text-lg font-semibold text-stone-700" "Wire response")
       (~docs/clear-cache-btn))
-    (when wire-note
-      (p :class "text-stone-500 text-sm mb-2" wire-note))
-    (when wire-placeholder-id
-      (~docs/placeholder :id wire-placeholder-id))))
+    (when wire-note (p :class "text-stone-500 text-sm mb-2" wire-note))
+    (when wire-placeholder-id (~docs/placeholder :id wire-placeholder-id))))
 
-(defcomp ~examples/reference-index-content ()
-  (~docs/page :title "Reference"
-    (p :class "text-stone-600 mb-6"
+(defcomp
+  ~examples/reference-index-content
+  ()
+  (~docs/page
+    :title "Reference"
+    (p
+      :class "text-stone-600 mb-6"
       "Complete reference for the sx client library.")
-    (div :class "grid gap-4 sm:grid-cols-2"
-      (a :href "/sx/(geography.(hypermedia.(reference.attributes)))"
-        :sx-get "/sx/(geography.(hypermedia.(reference.attributes)))" :sx-target "#main-panel" :sx-select "#main-panel"
-        :sx-swap "outerHTML" :sx-push-url "true"
+    (div
+      :class "grid gap-4 sm:grid-cols-2"
+      (a
+        :href "/sx/(geography.(hypermedia.(reference.attributes)))"
+        :sx-get "/sx/(geography.(hypermedia.(reference.attributes)))"
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "outerHTML"
+        :sx-push-url "true"
         :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
         (h3 :class "text-lg font-semibold text-violet-700 mb-1" "Attributes")
-        (p :class "text-stone-600 text-sm" "All sx attributes — request verbs, behavior modifiers, and sx-unique features."))
-      (a :href "/sx/(geography.(hypermedia.(reference.headers)))"
-        :sx-get "/sx/(geography.(hypermedia.(reference.headers)))" :sx-target "#main-panel" :sx-select "#main-panel"
-        :sx-swap "outerHTML" :sx-push-url "true"
+        (p
+          :class "text-stone-600 text-sm"
+          "All sx attributes — request verbs, behavior modifiers, and sx-unique features."))
+      (a
+        :href "/sx/(geography.(hypermedia.(reference.headers)))"
+        :sx-get "/sx/(geography.(hypermedia.(reference.headers)))"
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "outerHTML"
+        :sx-push-url "true"
         :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
         (h3 :class "text-lg font-semibold text-violet-700 mb-1" "Headers")
-        (p :class "text-stone-600 text-sm" "Custom HTTP headers used to coordinate between the sx client and server."))
-      (a :href "/sx/(geography.(hypermedia.(reference.events)))"
-        :sx-get "/sx/(geography.(hypermedia.(reference.events)))" :sx-target "#main-panel" :sx-select "#main-panel"
-        :sx-swap "outerHTML" :sx-push-url "true"
+        (p
+          :class "text-stone-600 text-sm"
+          "Custom HTTP headers used to coordinate between the sx client and server."))
+      (a
+        :href "/sx/(geography.(hypermedia.(reference.events)))"
+        :sx-get "/sx/(geography.(hypermedia.(reference.events)))"
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "outerHTML"
+        :sx-push-url "true"
         :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
         (h3 :class "text-lg font-semibold text-violet-700 mb-1" "Events")
-        (p :class "text-stone-600 text-sm" "DOM events fired during the sx request lifecycle."))
-      (a :href "/sx/(geography.(hypermedia.(reference.js-api)))"
-        :sx-get "/sx/(geography.(hypermedia.(reference.js-api)))" :sx-target "#main-panel" :sx-select "#main-panel"
-        :sx-swap "outerHTML" :sx-push-url "true"
+        (p
+          :class "text-stone-600 text-sm"
+          "DOM events fired during the sx request lifecycle."))
+      (a
+        :href "/sx/(geography.(hypermedia.(reference.js-api)))"
+        :sx-get "/sx/(geography.(hypermedia.(reference.js-api)))"
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "outerHTML"
+        :sx-push-url "true"
         :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
         (h3 :class "text-lg font-semibold text-violet-700 mb-1" "JS API")
-        (p :class "text-stone-600 text-sm" "JavaScript functions for parsing, evaluating, and rendering s-expressions.")))))
+        (p
+          :class "text-stone-600 text-sm"
+          "JavaScript functions for parsing, evaluating, and rendering s-expressions.")))))