diff --git a/lib/hyperscript/parser.sx b/lib/hyperscript/parser.sx
index 154f2a77..b0423811 100644
--- a/lib/hyperscript/parser.sx
+++ b/lib/hyperscript/parser.sx
@@ -693,7 +693,12 @@
               nil
               (do
                 (when
-                  (and (number? left) (= (tp-type) "ident"))
+                  (and (number? left) (= (tp-type) "ident")
+                    (not (or (= (tp-val) "starts") (= (tp-val) "ends")
+                             (= (tp-val) "contains") (= (tp-val) "matches")
+                             (= (tp-val) "is") (= (tp-val) "does")
+                             (= (tp-val) "in") (= (tp-val) "precedes")
+                             (= (tp-val) "follows"))))
                   (let
                     ((unit (tp-val)))
                     (do
diff --git a/shared/static/wasm/sx/hs-parser.sx b/shared/static/wasm/sx/hs-parser.sx
index 154f2a77..b0423811 100644
--- a/shared/static/wasm/sx/hs-parser.sx
+++ b/shared/static/wasm/sx/hs-parser.sx
@@ -693,7 +693,12 @@
               nil
               (do
                 (when
-                  (and (number? left) (= (tp-type) "ident"))
+                  (and (number? left) (= (tp-type) "ident")
+                    (not (or (= (tp-val) "starts") (= (tp-val) "ends")
+                             (= (tp-val) "contains") (= (tp-val) "matches")
+                             (= (tp-val) "is") (= (tp-val) "does")
+                             (= (tp-val) "in") (= (tp-val) "precedes")
+                             (= (tp-val) "follows"))))
                   (let
                     ((unit (tp-val)))
                     (do
diff --git a/spec/tests/test-hyperscript-behavioral.sx b/spec/tests/test-hyperscript-behavioral.sx
index e7124539..7ba70023 100644
--- a/spec/tests/test-hyperscript-behavioral.sx
+++ b/spec/tests/test-hyperscript-behavioral.sx
@@ -20,7 +20,7 @@
 ;; Compiles the expression, wraps in a thunk, evaluates, returns result.
 (define eval-hs
   (fn (src)
-    (let ((sx (hs-to-sx-from-source (str "return " src))))
+    (let ((sx (hs-to-sx (hs-compile src))))
       (let ((handler (eval-expr-cek
               (list (quote fn) (list (quote me)) (list (quote let) (list (list (quote it) nil) (list (quote event) nil)) sx)))))
         (handler nil)))))
diff --git a/sx/sx/analyzer.sx b/sx/sx/analyzer.sx
deleted file mode 100644
index 9409eb86..00000000
--- a/sx/sx/analyzer.sx
+++ /dev/null
@@ -1,120 +0,0 @@
-;; Bundle analyzer — live demonstration of dependency analysis + IO detection.
-;; Shows per-page component bundles vs total, visualizing payload savings.
-;; Drill down into each bundle to see component tree; expand to see SX source.
-;; @css bg-green-100 text-green-800 bg-violet-600 bg-stone-200 text-violet-600 text-stone-600 text-green-600 rounded-full h-2.5 grid-cols-3 bg-blue-100 text-blue-800 bg-amber-100 text-amber-800 grid-cols-4 marker:text-stone-400 bg-blue-50 bg-amber-50 text-blue-700 text-amber-700 border-blue-200 border-amber-200 bg-blue-500 bg-amber-500
-
-(defcomp ~analyzer/bundle-analyzer-content (&key (pages :as list) (total-components :as number) (total-macros :as number)
-                                        (pure-count :as number) (io-count :as number))
-  (~docs/page :title "Page Bundle Analyzer"
-
-    (p (~tw :tokens "text-stone-600 mb-6")
-      "Live analysis of component dependency graphs and IO classification across all pages. "
-      "Each bar shows how many of the "
-      (strong (str total-components))
-      " total components a page actually needs, computed by the "
-      (a :href "/sx/(language.(spec.deps))" (~tw :tokens "text-violet-700 underline") "deps.sx")
-      " transitive closure algorithm. "
-      "Click a page to see its component tree; expand a component to see its SX source.")
-
-    (div (~tw :tokens "mb-8 grid grid-cols-4 gap-4")
-      (~analyzer/stat :label "Total Components" :value (str total-components)
-                      :cls "text-violet-600")
-      (~analyzer/stat :label "Total Macros" :value (str total-macros)
-                      :cls "text-stone-600")
-      (~analyzer/stat :label "Pure Components" :value (str pure-count)
-                      :cls "text-blue-600")
-      (~analyzer/stat :label "IO-Dependent" :value (str io-count)
-                      :cls "text-amber-600"))
-
-    (~docs/section :title "Per-Page Bundles" :id "bundles"
-      (div (~tw :tokens "space-y-3")
-        (map (fn (page)
-          (~analyzer/row
-            :name (get page "name")
-            :path (get page "path")
-            :needed (get page "needed")
-            :direct (get page "direct")
-            :total total-components
-            :pct (get page "pct")
-            :savings (get page "savings")
-            :io-refs (get page "io-refs")
-            :pure-in-page (get page "pure-in-page")
-            :io-in-page (get page "io-in-page")
-            :components (get page "components")))
-          pages)))
-
-    (~docs/section :title "How It Works" :id "how"
-      (ol (~tw :tokens "list-decimal pl-5 space-y-2 text-stone-700")
-        (li (strong "Scan: ") "Regex finds all " (code "(~plans/content-addressed-components/name") " patterns in the page's content expression.")
-        (li (strong "Resolve: ") "Each referenced component's body AST is walked to find transitive " (code "~") " references.")
-        (li (strong "Closure: ") "The full set is the union of direct + transitive deps, following chains through the component graph.")
-        (li (strong "Bundle: ") "Only these component definitions are serialized into the page payload. Everything else is omitted.")
-        (li (strong "IO detect: ") "Each component body is scanned for references to IO primitives (frag, query, service, etc.). Components with zero transitive IO refs are pure — safe for client rendering."))
-      (p (~tw :tokens "mt-4 text-stone-600")
-        "The analysis handles circular references (via seen-set), "
-        "walks all branches of control flow (if/when/cond/case), "
-        "and includes macro definitions shared across components."))))
-
-(defcomp ~analyzer/stat (&key (label :as string) (value :as string) (cls :as string))
-  (div (~tw :tokens "rounded-lg border border-stone-200 p-4 text-center")
-    (div :class (str "text-3xl font-bold " cls) value)
-    (div (~tw :tokens "text-sm text-stone-500 mt-1") label)))
-
-(defcomp ~analyzer/row (&key (name :as string) (path :as string) (needed :as number) (direct :as number) (total :as number) (pct :as number) (savings :as number)
-                             (io-refs :as list) (pure-in-page :as number) (io-in-page :as number) (components :as list))
-  (details (~tw :tokens "rounded border border-stone-200")
-    (summary (~tw :tokens "p-4 cursor-pointer hover:bg-stone-50 transition-colors")
-      (div (~tw :tokens "flex items-center justify-between mb-2")
-        (div
-          (span (~tw :tokens "font-mono font-semibold text-stone-800") name)
-          (span (~tw :tokens "text-stone-400 text-sm ml-2") path))
-        (div (~tw :tokens "flex items-center gap-2")
-          (span (~tw :tokens "inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800")
-            (str pure-in-page " pure"))
-          (span (~tw :tokens "inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800")
-            (str io-in-page " IO"))
-          (div (~tw :tokens "text-right")
-            (span (~tw :tokens "font-mono text-sm")
-              (span (~tw :tokens "text-violet-700 font-bold") (str needed))
-              (span (~tw :tokens "text-stone-400") (str " / " total)))
-            (span (~tw :tokens "ml-2 inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800")
-              (str savings "% saved")))))
-      (div (~tw :tokens "w-full bg-stone-200 rounded-full h-2.5")
-        (div (~tw :tokens "bg-violet-600 h-2.5 rounded-full transition-all")
-             :style (str "width: " pct "%"))))
-
-    ;; Component tree (shown when expanded)
-    (div (~tw :tokens "border-t border-stone-200 p-4 bg-stone-50")
-      (div (~tw :tokens "text-xs font-medium text-stone-500 uppercase tracking-wide mb-3")
-        (str needed " components in bundle"))
-      (div (~tw :tokens "space-y-1")
-        (map (fn (comp)
-          (~analyzer/component
-            :comp-name (get comp "name")
-            :is-pure (get comp "is-pure")
-            :io-refs (get comp "io-refs")
-            :deps (get comp "deps")
-            :source (get comp "source")))
-          components)))))
-
-(defcomp ~analyzer/component (&key (comp-name :as string) (is-pure :as boolean) (io-refs :as list) (deps :as list) (source :as string))
-  (details :class (str "rounded border "
-                       (if is-pure "border-blue-200 bg-blue-50" "border-amber-200 bg-amber-50"))
-    (summary (~tw :tokens "px-3 py-2 cursor-pointer hover:opacity-80 transition-opacity")
-      (div (~tw :tokens "flex items-center justify-between")
-        (div (~tw :tokens "flex items-center gap-2")
-          (span :class (str "inline-block w-2 h-2 rounded-full "
-                            (if is-pure "bg-blue-500" "bg-amber-500")))
-          (span (~tw :tokens "font-mono text-sm font-medium text-stone-800") comp-name))
-        (div (~tw :tokens "flex items-center gap-2")
-          (when (not (empty? io-refs))
-            (span (~tw :tokens "text-xs text-amber-700")
-              (str "IO: " (join ", " io-refs))))
-          (when (not (empty? deps))
-            (span (~tw :tokens "text-xs text-stone-500")
-              (str (len deps) " deps"))))))
-
-    ;; SX source (shown when component expanded)
-    (div (~tw :tokens "not-prose border-t border-stone-200 p-3 bg-stone-100 rounded-b")
-      (pre (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap overflow-x-auto")
-        (code (highlight source "lisp"))))))
diff --git a/sx/sx/app-config.sx b/sx/sx/app-config.sx
index 95aba90a..ccbae3a0 100644
--- a/sx/sx/app-config.sx
+++ b/sx/sx/app-config.sx
@@ -3,4 +3,6 @@
 (dict-set!
   __app-config
   "handler-prefixes"
-  (append (get __app-config "handler-prefixes") (list "handler:hs-")))
+  (append
+    (get __app-config "handler-prefixes")
+    (list "handler:hs-" "handler:gql-")))
diff --git a/sx/sx/applications/cssx/async/index.sx b/sx/sx/applications/cssx/async/index.sx
new file mode 100644
index 00000000..5058e142
--- /dev/null
+++ b/sx/sx/applications/cssx/async/index.sx
@@ -0,0 +1,48 @@
+;; ---------------------------------------------------------------------------
+;; Async CSS
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Async CSS"
+
+    (~docs/section :title "The Pattern" :id "pattern"
+      (p "A CSSX component that needs CSS it doesn't have yet can "
+         (strong "fetch and cache it before rendering") ". This is just "
+         (code "~shared:pages/suspense") " combined with a style component — no new infrastructure:")
+      (highlight
+        "(defcomp ~cssx/styled (&key css-url css-hash fallback &rest children)\n  (if (css-cached? css-hash)\n    ;; Already have it — render immediately\n    children\n    ;; Don't have it — suspense while we fetch\n    (~shared:pages/suspense :id (str \"css-\" css-hash)\n      :fallback (or fallback (span \"\"))\n      (do\n        (fetch-css css-url css-hash)\n        children))))"
+        "lisp")
+      (p "The consumer never knows:")
+      (highlight
+        "(~cssx/styled :css-url \"/css/charts.css\" :css-hash \"abc123\"\n  (~bar-chart :data metrics))"
+        "lisp"))
+
+    (~docs/section :title "Use Cases" :id "use-cases"
+      (~docs/subsection :title "Federated Components"
+        (p "A " (code "~cssx/btn") " from another site arrives via IPFS with a CID pointing "
+           "to its CSS. The component fetches and caches it before rendering. "
+           "No coordination needed between sites.")
+        (highlight
+          "(defcomp ~cssx/federated-widget (&key cid &rest children)\n  (let ((css-cid (str cid \"/style.css\"))\n        (cached  (css-cached? css-cid)))\n    (if cached\n      children\n      (~shared:pages/suspense :id (str \"fed-\" cid)\n        :fallback (div :class \"animate-pulse bg-stone-100 rounded h-20\")\n        (do (fetch-css (str \"https://ipfs.io/ipfs/\" css-cid) css-cid)\n            children)))))"
+          "lisp"))
+
+      (~docs/subsection :title "Heavy UI Libraries"
+        (p "Code editors, chart libraries, rich text editors — their CSS only loads "
+           "when the component actually appears on screen:")
+        (highlight
+          "(defcomp ~cssx/code-editor (&key language value on-change)\n  (~cssx/styled :css-url \"/css/codemirror.css\" :css-hash (asset-hash \"codemirror\")\n    :fallback (pre :class \"p-4 bg-stone-900 text-stone-300 rounded\" value)\n    (div :class \"cm-editor\"\n      :data-language language\n      :data-value value)))"
+          "lisp"))
+
+      (~docs/subsection :title "Lazy Themes"
+        (p "Theme CSS loads on first use, then is instant on subsequent visits:")
+        (highlight
+          "(defcomp ~cssx/lazy-theme (&key name &rest children)\n  (let ((css-url (str \"/css/themes/\" name \".css\"))\n        (hash    (str \"theme-\" name)))\n    (~cssx/styled :css-url css-url :css-hash hash\n      :fallback children  ;; render unstyled immediately\n      children)))"
+          "lisp")))
+
+    (~docs/section :title "How It Composes" :id "composition"
+      (p "Async CSS composes with everything already in SX:")
+      (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-700")
+        (li (code "~shared:pages/suspense") " handles the async gap with fallback content")
+        (li "localStorage handles caching across sessions")
+        (li (code "<style id=\"sx-css\">") " is the injection target (same as CSS class delivery)")
+        (li "Component content-hashing tracks what the client has")
+        (li "No new types, no new delivery protocol, no new spec code")))))
diff --git a/sx/sx/applications/cssx/comparison/index.sx b/sx/sx/applications/cssx/comparison/index.sx
new file mode 100644
index 00000000..a3d95530
--- /dev/null
+++ b/sx/sx/applications/cssx/comparison/index.sx
@@ -0,0 +1,60 @@
+;; ---------------------------------------------------------------------------
+;; Comparison with CSS Technologies
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Comparisons"
+
+    (~docs/section :title "styled-components / Emotion" :id "styled-components"
+      (p (a :href "https://styled-components.com" (~tw :tokens "text-violet-600 hover:underline") "styled-components")
+         " pioneered the idea that styling belongs in components. But it generates CSS "
+         "at runtime, injects " (code "<style>") " tags, and produces opaque hashed class "
+         "names (" (code "class=\"sc-bdfBwQ fNMpVx\"") "). Open DevTools and you see gibberish. "
+         "It also carries significant runtime cost — parsing CSS template literals, hashing, "
+         "deduplicating — and needs a separate SSR extraction step (" (code "ServerStyleSheet") ").")
+      (p "CSSX components share the core insight (" (em "styling is a component concern")
+         ") but without the runtime machinery. When a component applies Tailwind classes, "
+         "there's zero CSS generation overhead. When it does emit " (code "<style>")
+         " blocks, it's explicit — not hidden behind a tagged template literal. "
+         "And the DOM is always readable."))
+
+    (~docs/section :title "CSS Modules" :id "css-modules"
+      (p (a :href "https://github.com/css-modules/css-modules" (~tw :tokens "text-violet-600 hover:underline") "CSS Modules")
+         " scope class names to avoid collisions by rewriting them at build time: "
+         (code ".button") " becomes " (code ".button_abc123")
+         ". This solves the global namespace problem but creates the same opacity issue — "
+         "hashed names in the DOM that you can't grep for or reason about.")
+      (p "CSSX components don't need scoping because component boundaries already provide "
+         "isolation. A " (code "~cssx/btn") " owns its markup. There's nothing to collide with."))
+
+    (~docs/section :title "Tailwind CSS" :id "tailwind"
+      (p "Tailwind is " (em "complementary") ", not competitive. CSSX components are the "
+         "semantic layer on top. Raw Tailwind in markup — "
+         (code ":class \"px-4 py-2 bg-blue-600 text-white font-medium rounded hover:bg-blue-700\"")
+         " — is powerful but verbose and duplicated across call sites.")
+      (p "A CSSX component wraps that string once: " (code "(~cssx/btn :variant \"primary\" \"Submit\")")
+         ". The Tailwind classes are still there, readable in DevTools, but consumers don't "
+         "repeat them. This is the same pattern Tailwind's own docs recommend ("
+         (em "\"extracting components\"") ") — CSSX components are just SX's native way of doing it."))
+
+    (~docs/section :title "Vanilla Extract" :id "vanilla-extract"
+      (p (a :href "https://vanilla-extract.style" (~tw :tokens "text-violet-600 hover:underline") "Vanilla Extract")
+         " is zero-runtime CSS-in-JS: styles are written in TypeScript, compiled to static "
+         "CSS at build time, and referenced by generated class names. It avoids the runtime "
+         "cost of styled-components but still requires a build step, a bundler plugin, and "
+         "TypeScript. The generated class names are again opaque.")
+      (p "CSSX components need no build step for styling — they're evaluated at render time "
+         "like any other component. And since the component chooses its own strategy, it can "
+         "reference pre-built classes (zero runtime) " (em "or") " generate CSS on the fly — "
+         "same API either way."))
+
+    (~docs/section :title "Design Tokens / Style Dictionary" :id "design-tokens"
+      (p "The " (a :href "https://amzn.github.io/style-dictionary/" (~tw :tokens "text-violet-600 hover:underline") "Style Dictionary")
+         " pattern — a JSON/YAML file mapping token names to values, compiled to "
+         "platform-specific output — is essentially what the old CSSX was. It's the "
+         "industry standard for design systems.")
+      (p "The problem is that it's a parallel system: separate file format, separate build "
+         "pipeline, separate caching, separate tooling. CSSX components eliminate all of "
+         "that by expressing tokens as component parameters: "
+         (code "(~cssx/theme :primary \"#7c3aed\")") " instead of "
+         (code "{\"color\": {\"primary\": {\"value\": \"#7c3aed\"}}}")
+         ". Same result, no parallel infrastructure."))))
diff --git a/sx/sx/applications/cssx/delivery/index.sx b/sx/sx/applications/cssx/delivery/index.sx
new file mode 100644
index 00000000..3a22ded8
--- /dev/null
+++ b/sx/sx/applications/cssx/delivery/index.sx
@@ -0,0 +1,64 @@
+;; ---------------------------------------------------------------------------
+;; CSS Delivery
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "CSS Delivery"
+
+    (~docs/section :title "Multiple Strategies" :id "strategies"
+      (p "A CSSX component chooses its own styling strategy — and each strategy has its "
+         "own delivery path:")
+      (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-700")
+        (li (strong "Tailwind classes: ") "Delivered via the on-demand protocol below. "
+            "The server ships only the rules the page actually uses.")
+        (li (strong "Inline styles: ") "No delivery needed — " (code ":style") " attributes "
+            "are part of the markup.")
+        (li (strong "Emitted " (code "<style>") " blocks: ") "Components can emit CSS rules "
+            "directly. They arrive as part of the rendered HTML — keyframes, custom properties, "
+            "scoped rules, anything.")
+        (li (strong "External stylesheets: ") "Components can reference pre-loaded CSS files "
+            "or lazy-load them via " (code "~shared:pages/suspense") " (see " (a :href "/sx/(applications.(cssx.async))" "Async CSS") ").")
+        (li (strong "Custom properties: ") "A " (code "~cssx/theme") " component sets "
+            (code "--color-primary") " etc. via a " (code "<style>") " block. Everything "
+            "using " (code "var()") " repaints automatically."))
+      (p "The protocol below handles the Tailwind utility class case — the most common "
+         "strategy — but it's not the only game in town."))
+
+    (~docs/section :title "On-Demand Tailwind Delivery" :id "on-demand"
+      (p "When components use Tailwind utility classes, SX ships " (em "only the CSS rules "
+         "actually used on the page") ", computed at render time. No build step, no purging, "
+         "no unused CSS.")
+      (p "The server pre-parses the full Tailwind CSS file into an in-memory registry at "
+         "startup. When a response is rendered, SX scans all " (code ":class") " values in "
+         "the output, looks up only those classes, and embeds the matching rules."))
+
+    (~docs/section :title "The Protocol" :id "protocol"
+      (p "First page load gets the full set of used rules. Subsequent navigations send a "
+         "hash of what the client already has, and the server ships only the delta:")
+      (highlight
+        "# First page load:\nGET / HTTP/1.1\n\nHTTP/1.1 200 OK\nContent-Type: text/html\n# Full CSS in <style id=\"sx-css\"> + hash in <meta name=\"sx-css-classes\">\n\n# Subsequent navigation:\nGET /about HTTP/1.1\nSX-Css: a1b2c3d4\n\nHTTP/1.1 200 OK\nContent-Type: text/sx\nSX-Css-Hash: e5f6g7h8\nSX-Css-Add: bg-blue-500,text-white,rounded-lg\n# Only new rules in <style data-sx-css>"
+        "bash")
+      (p "The client merges new rules into the existing " (code "<style id=\"sx-css\">")
+         " block and updates its hash. No flicker, no duplicate rules."))
+
+    (~docs/section :title "Component-Aware Scanning" :id "scanning"
+      (p "CSS scanning happens at two levels:")
+      (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-700")
+        (li (strong "Registration time: ") "When a component is defined via " (code "defcomp")
+            ", its body is scanned for class strings. The component records which CSS classes "
+            "it uses.")
+        (li (strong "Render time: ") "The rendered output is scanned for any classes the "
+            "static scan missed — dynamically constructed class strings, conditional classes, etc."))
+      (p "This means the CSS registry knows roughly what a page needs before rendering, "
+         "and catches any stragglers after."))
+
+    (~docs/section :title "Trade-offs" :id "tradeoffs"
+      (ul (~tw :tokens "list-disc pl-5 space-y-2 text-stone-700")
+        (li (strong "Full Tailwind in memory: ") "The parsed CSS registry is ~4MB. This is "
+            "a one-time startup cost per app instance.")
+        (li (strong "Regex scanning: ") "Class detection uses regex, so dynamically "
+            "constructed class names (e.g. " (code "(str \"bg-\" color \"-500\")") ") can be "
+            "missed. Use complete class strings in " (code "case") "/" (code "cond") " branches.")
+        (li (strong "No @apply: ") "Tailwind's " (code "@apply") " is a build-time feature. "
+            "On-demand delivery works with utility classes directly.")
+        (li (strong "Tailwind-shaped: ") "The registry parser understands Tailwind's naming "
+            "conventions. Non-Tailwind CSS works via " (code "<style>") " blocks in components.")))))
diff --git a/sx/sx/applications/cssx/index.sx b/sx/sx/applications/cssx/index.sx
new file mode 100644
index 00000000..18c43d5a
--- /dev/null
+++ b/sx/sx/applications/cssx/index.sx
@@ -0,0 +1,70 @@
+;; CSSX — Styling as Components
+;; Documentation for the CSSX approach: no parallel style infrastructure,
+;; just defcomp components that decide how to style their children.
+;; ---------------------------------------------------------------------------
+;; Overview
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "CSSX Components"
+
+    (~docs/section :title "The Idea" :id "idea"
+      (p (strong "Styling is just components.") " A CSSX component is a regular "
+         (code "defcomp") " that decides how to style its children. It might apply "
+         "Tailwind classes, or hand-written CSS classes, or inline styles, or generate "
+         "rules at runtime. The implementation is the component's private business. "
+         "The consumer just calls " (code "(~cssx/btn :variant \"primary\" \"Submit\")") " and doesn't care.")
+      (p "Because it's " (code "defcomp") ", you get everything for free: caching, bundling, "
+         "dependency scanning, server/client rendering, composition. No parallel infrastructure."))
+
+    (~docs/section :title "Why Not a Style Dictionary?" :id "why"
+      (p "SX previously had a parallel CSS system: a style dictionary (JSON blob of "
+         "atom-to-declaration mappings), a " (code "StyleValue") " type threaded through "
+         "the evaluator and renderer, content-addressed hash class names (" (code "sx-a3f2b1")
+         "), runtime CSS injection, and a separate caching pipeline (cookies, localStorage).")
+      (p "This was ~3,000 lines of code across the spec, bootstrappers, and host implementations. "
+         "It was never adopted. The codebase voted with its feet: " (code ":class") " strings "
+         "with " (code "defcomp") " already covered every real use case.")
+      (p "The result of that system: elements in the DOM got opaque class names like "
+         (code "class=\"sx-a3f2b1\"") ". DevTools became useless. You couldn't inspect an "
+         "element and understand its styling. " (strong "That was a deal breaker.")))
+
+    (~docs/section :title "Key Advantages" :id "advantages"
+      (ul (~tw :tokens "list-disc pl-5 space-y-2 text-stone-700")
+        (li (strong "Readable DOM: ") "Elements have real class names, not content-addressed "
+            "hashes. DevTools works.")
+        (li (strong "Data-driven styling: ") "Components receive data and decide styling. "
+            (code "(~cssx/metric :value 150)") " renders red because " (code "value > 100")
+            " — logic lives in the component, not a CSS preprocessor.")
+        (li (strong "One system: ") "No separate " (code "StyleValue") " type, no style "
+            "dictionary JSON, no injection pipeline. Components ARE the styling abstraction.")
+        (li (strong "One cache: ") "Component hash/localStorage handles everything. No "
+            "separate style dict caching.")
+        (li (strong "Composable: ") (code "(~card :elevated true (~cssx/metric :value v))")
+            " — styling composes like any other component.")
+        (li (strong "Strategy-agnostic: ") "A component can apply Tailwind classes, emit "
+            (code "<style>") " blocks, use inline styles, generate CSS custom properties, or "
+            "any combination. Swap strategies without touching call sites.")))
+
+    (~docs/section :title "What Changed" :id "changes"
+      (~docs/subsection :title "Removed (~3,000 lines)"
+        (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-600 text-sm")
+          (li (code "StyleValue") " type and all plumbing (type checks in eval, render, serialize)")
+          (li (code "cssx.sx") " spec module (resolve-style, resolve-atom, split-variant, hash, injection)")
+          (li "Style dictionary JSON format, loading, caching (" (code "<script type=\"text/sx-styles\">") ", localStorage)")
+          (li (code "style_dict.py") " (782 lines) and " (code "style_resolver.py") " (254 lines)")
+          (li (code "css") " and " (code "merge-styles") " primitives")
+          (li "Platform interface: " (code "fnv1a-hash") ", " (code "compile-regex") ", " (code "make-style-value") ", " (code "inject-style-value"))
+          (li (code "defkeyframes") " special form")
+          (li "Style dict cookies and localStorage keys")))
+
+      (~docs/subsection :title "Kept"
+        (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-600 text-sm")
+          (li (code "defstyle") " — simplified to bind any value (string, function, etc.)")
+          (li (code "tw.css") " — the compiled Tailwind stylesheet, delivered via CSS class tracking")
+          (li (code ":class") " attribute — just takes strings, no special-casing")
+          (li "CSS class delivery (" (code "SX-Css") " headers, " (code "<style id=\"sx-css\">") ")")
+          (li "All component infrastructure (defcomp, caching, bundling, deps)")))
+
+      (~docs/subsection :title "Added"
+        (p "Nothing. CSSX components are just " (code "defcomp") ". The only new thing is "
+           "a convention: components whose primary purpose is styling.")))))
diff --git a/sx/sx/applications/cssx/live/index.sx b/sx/sx/applications/cssx/live/index.sx
new file mode 100644
index 00000000..bc18750a
--- /dev/null
+++ b/sx/sx/applications/cssx/live/index.sx
@@ -0,0 +1,63 @@
+;; ---------------------------------------------------------------------------
+;; Live Styles
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Live Styles"
+
+    (~docs/section :title "Styles That Respond to Events" :id "concept"
+      (p "Combine " (code "~live") " (SSE) or " (code "~ws") " (WebSocket) with style "
+         "components, and you get styles that change in real-time in response to server "
+         "events. No new infrastructure — just components receiving data through a "
+         "persistent transport."))
+
+    (~docs/section :title "SSE: Live Theme Updates" :id "sse-theme"
+      (p "A " (code "~live") " component declares a persistent connection to an SSE "
+         "endpoint. When the server pushes a new event, " (code "resolveSuspense")
+         " replaces the content:")
+      (highlight
+        "(~live :src \"/api/stream/brand\"\n  (~shared:pages/suspense :id \"theme\"\n    (~cssx/theme :primary \"#7c3aed\" :surface \"#fafaf9\")))"
+        "lisp")
+      (p "Server pushes a new theme:")
+      (highlight
+        "event: sx-resolve\ndata: {\"id\": \"theme\", \"sx\": \"(~cssx/theme :primary \\\"#2563eb\\\" :surface \\\"#1e1e2e\\\")\"}"
+        "text")
+      (p "The " (code "~cssx/theme") " component emits CSS custom properties. Everything "
+         "using " (code "var(--color-primary)") " repaints instantly:")
+      (highlight
+        "(defcomp ~cssx/theme (&key primary surface)\n  (style (str \":root {\"\n    \"--color-primary:\" (or primary \"#7c3aed\") \";\"\n    \"--color-surface:\" (or surface \"#fafaf9\") \"}\")))"
+        "lisp"))
+
+    (~docs/section :title "SSE: Live Dashboard Metrics" :id "sse-metrics"
+      (p "Style changes driven by live data — the component decides the visual treatment:")
+      (highlight
+        "(~live :src \"/api/stream/dashboard\"\n  (~shared:pages/suspense :id \"cpu\"\n    (~cssx/metric :value 0 :label \"CPU\" :threshold 80))\n  (~shared:pages/suspense :id \"memory\"\n    (~cssx/metric :value 0 :label \"Memory\" :threshold 90))\n  (~shared:pages/suspense :id \"requests\"\n    (~cssx/metric :value 0 :label \"RPS\" :threshold 1000)))"
+        "lisp")
+      (p "Server pushes updated values. " (code "~cssx/metric") " turns red when "
+         (code "value > threshold") " — the styling logic lives in the component, "
+         "not in CSS selectors or JavaScript event handlers."))
+
+    (~docs/section :title "WebSocket: Collaborative Design" :id "ws-design"
+      (p "Bidirectional channel for real-time collaboration. A designer adjusts a color, "
+         "all connected clients see the change:")
+      (highlight
+        "(~ws :src \"/ws/design-studio\"\n  (~shared:pages/suspense :id \"canvas-theme\"\n    (~cssx/theme :primary \"#7c3aed\")))"
+        "lisp")
+      (p "Client sends a color change:")
+      (highlight
+        ";; Designer picks a new primary color\n(sx-send ws-conn '(theme-update :primary \"#dc2626\"))"
+        "lisp")
+      (p "Server broadcasts to all connected clients via " (code "sx-resolve") " — "
+         "every client's " (code "~cssx/theme") " component re-renders with the new color."))
+
+    (~docs/section :title "Why This Works" :id "why"
+      (p "Every one of these patterns is just a " (code "defcomp") " receiving data "
+         "through a persistent transport. The styling strategy — CSS custom properties, "
+         "class swaps, inline styles, " (code "<style>") " blocks — is the component's "
+         "private business. The transport doesn't know or care.")
+      (p "A parallel style system would have needed its own streaming, its own caching, "
+         "its own delta protocol for each of these use cases — duplicating what components "
+         "already do.")
+      (p (~tw :tokens "mt-4 text-stone-500 italic")
+         "Note: ~live and ~ws are planned (see Live Streaming). The patterns shown here "
+         "will work as described once the streaming transport is implemented. The component "
+         "and suspense infrastructure they depend on already exists."))))
diff --git a/sx/sx/applications/cssx/patterns/index.sx b/sx/sx/applications/cssx/patterns/index.sx
new file mode 100644
index 00000000..40138a0b
--- /dev/null
+++ b/sx/sx/applications/cssx/patterns/index.sx
@@ -0,0 +1,51 @@
+;; ---------------------------------------------------------------------------
+;; Patterns
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Patterns"
+
+    (~docs/section :title "Class Mapping" :id "class-mapping"
+      (p "The simplest pattern: a component that maps semantic keywords to class strings.")
+      (highlight
+        "(defcomp ~cssx/btn (&key variant disabled &rest children)\n  (button\n    :class (str \"px-4 py-2 rounded font-medium transition \"\n               (case variant\n                 \"primary\" \"bg-blue-600 text-white hover:bg-blue-700\"\n                 \"danger\"  \"bg-red-600 text-white hover:bg-red-700\"\n                 \"ghost\"   \"bg-transparent hover:bg-stone-100\"\n                 \"bg-stone-200 hover:bg-stone-300\")\n               (when disabled \" opacity-50 cursor-not-allowed\"))\n    :disabled disabled\n    children))"
+        "lisp")
+      (p "Consumers call " (code "(~cssx/btn :variant \"primary\" \"Submit\")") ". The Tailwind "
+         "classes are readable in DevTools but never repeated across call sites."))
+
+    (~docs/section :title "Data-Driven Styling" :id "data-driven"
+      (p "Styling that responds to data values — impossible with static CSS:")
+      (highlight
+        "(defcomp ~cssx/metric (&key value label threshold)\n  (let ((t (or threshold 10)))\n    (div :class (str \"p-3 rounded font-bold \"\n                 (cond\n                   ((> value (* t 10)) \"bg-red-500 text-white\")\n                   ((> value t)        \"bg-amber-200 text-amber-900\")\n                   (:else              \"bg-green-100 text-green-800\")))\n      (span :class \"text-sm\" label) \": \" (span (str value)))))"
+        "lisp")
+      (p "The component makes a " (em "decision") " about styling based on data. "
+         "No CSS preprocessor or class name convention can express \"red when value > 100\"."))
+
+    (~docs/section :title "Style Functions" :id "style-functions"
+      (p "Reusable style logic that returns class strings — no wrapping element needed:")
+      (highlight
+        "(define card-classes\n  (fn (&key elevated bordered)\n    (str \"rounded-lg p-4 \"\n         (if elevated \"shadow-lg\" \"shadow-sm\")\n         (when bordered \" border border-stone-200\"))))\n\n;; Usage:\n(div :class (card-classes :elevated true) ...)\n(article :class (card-classes :bordered true) ...)"
+        "lisp")
+      (p "Or with " (code "defstyle") " for named bindings:")
+      (highlight
+        "(defstyle card-base \"rounded-lg p-4 shadow-sm\")\n(defstyle card-elevated \"rounded-lg p-4 shadow-lg\")\n\n(div :class card-base ...)"
+        "lisp"))
+
+    (~docs/section :title "Responsive Layouts" :id "responsive"
+      (p "Components that encode responsive breakpoints:")
+      (highlight
+        "(defcomp ~cssx/responsive-grid (&key cols &rest children)\n  (div :class (str \"grid gap-4 \"\n               (case (or cols 3)\n                 1 \"grid-cols-1\"\n                 2 \"grid-cols-1 md:grid-cols-2\"\n                 3 \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\"\n                 4 \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"))\n    children))"
+        "lisp"))
+
+    (~docs/section :title "Emitting CSS Directly" :id "emitting-css"
+      (p "Components are not limited to referencing existing classes. They can generate "
+         "CSS — " (code "<style>") " tags, keyframes, custom properties — as part of their output:")
+      (highlight
+        "(defcomp ~cssx/pulse (&key color duration &rest children)\n  (<>\n    (style (str \"@keyframes sx-pulse {\"\n               \"0%,100% { opacity:1 } 50% { opacity:.5 } }\"))\n    (div :style (str \"animation: sx-pulse \" (or duration \"2s\") \" infinite;\"\n                    \"color:\" (or color \"inherit\"))\n      children)))"
+        "lisp")
+      (highlight
+        "(defcomp ~cssx/theme (&key primary surface &rest children)\n  (<>\n    (style (str \":root {\"\n               \"--color-primary:\" (or primary \"#7c3aed\") \";\"\n               \"--color-surface:\" (or surface \"#fafaf9\") \"}\"))\n    children))"
+        "lisp")
+      (p "The CSS strategy is the component's private implementation detail. Consumers call "
+         (code "(~cssx/pulse :color \"red\" \"Loading...\")") " or "
+         (code "(~cssx/theme :primary \"#2563eb\" ...)") " without knowing or caring whether the "
+         "component uses classes, inline styles, generated rules, or all three."))))
diff --git a/sx/sx/applications/cssx/philosophy/index.sx b/sx/sx/applications/cssx/philosophy/index.sx
new file mode 100644
index 00000000..2353820f
--- /dev/null
+++ b/sx/sx/applications/cssx/philosophy/index.sx
@@ -0,0 +1,45 @@
+;; ---------------------------------------------------------------------------
+;; Philosophy
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Philosophy"
+
+    (~docs/section :title "The Collapse" :id "collapse"
+      (p "The web has spent two decades building increasingly complex CSS tooling: "
+         "preprocessors, CSS-in-JS, atomic CSS, utility frameworks, design tokens, style "
+         "dictionaries. Each solves a real problem but adds a new system with its own "
+         "caching, bundling, and mental model.")
+      (p "CSSX components collapse all of this back to the simplest possible thing: "
+         (strong "a function that takes data and returns markup with classes.")
+         " That's what a component already is. There is no separate styling system because "
+         "there doesn't need to be."))
+
+    (~docs/section :title "Proof by Deletion" :id "proof"
+      (p "The strongest validation: we built the full parallel system — style dictionary, "
+         "StyleValue type, content-addressed hashing, runtime injection, localStorage "
+         "caching — and then deleted it because nobody used it. The codebase already had "
+         "the answer: " (code "defcomp") " with " (code ":class") " strings.")
+      (p "3,000 lines of infrastructure removed. Zero lines added. Every use case still works."))
+
+    (~docs/section :title "The Right Abstraction Level" :id "abstraction"
+      (p "CSS-in-JS puts styling " (em "below") " components — you style elements, then compose "
+         "them. Utility CSS puts styling " (em "beside") " components — classes in markup, logic "
+         "elsewhere. Both create a seam between what something does and how it looks.")
+      (p "CSSX components put styling " (em "inside") " components — at the same level as "
+         "structure and behavior. A " (code "~cssx/metric") " component knows its own thresholds, "
+         "its own color scheme, its own responsive behavior. Styling is just another "
+         "decision the component makes, not a separate concern."))
+
+    (~docs/section :title "Relationship to Other Plans" :id "relationships"
+      (ul (~tw :tokens "list-disc pl-5 space-y-2 text-stone-700")
+        (li (strong "Content-Addressed Components: ") "CSSX components get CIDs like any "
+            "other component. A " (code "~cssx/btn") " from one site can be shared to another via "
+            "IPFS. No " (code ":css-atoms") " manifest field needed — the component carries "
+            "its own styling logic.")
+        (li (strong "Isomorphic Rendering: ") "Components render the same on server and client. "
+            "No style injection timing issues, no FOUC from late CSS loading.")
+        (li (strong "Component Bundling: ") "deps.sx already handles transitive component deps. "
+            "Style components are just more components in the bundle — no separate style bundling.")
+        (li (strong "Live Streaming: ") "SSE and WebSocket transports push data to components. "
+            "Style components react to that data like any other component — no separate style "
+            "streaming protocol.")))))
diff --git a/sx/sx/applications/graphql/_islands/parse-island.sx b/sx/sx/applications/graphql/_islands/parse-island.sx
new file mode 100644
index 00000000..7a5ad6b3
--- /dev/null
+++ b/sx/sx/applications/graphql/_islands/parse-island.sx
@@ -0,0 +1,57 @@
+
+;; Live GraphQL parse island — parses input and shows AST + serialized output
+(defisland
+  ()
+  (let
+    ((input (signal "{\n  user(id: 1) {\n    name\n    email\n  }\n}"))
+      (ast-output (signal ""))
+      (ser-output (signal "")))
+    (define
+      do-parse!
+      (fn
+        (e)
+        (let
+          ((src (deref input)))
+          (when
+            (not (empty? src))
+            (let
+              ((doc (gql-parse src)))
+              (do
+                (set-signal! ast-output (sx-serialize doc))
+                (set-signal! ser-output (gql-serialize doc))))))))
+    (div
+      (~tw :tokens "flex flex-col gap-3")
+      (textarea
+        :rows "5"
+        (~tw
+          :tokens "w-full font-mono text-sm p-3 border border-gray-300 rounded-lg focus:border-violet-500 focus:ring-1 focus:ring-violet-500 outline-none")
+        :placeholder "{ user(id: 1) { name email } }"
+        :value (deref input)
+        :on-input (fn (e) (set-signal! input (get-prop e "target.value"))))
+      (button
+        (~tw
+          :tokens "self-start px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors")
+        :on-click do-parse!
+        "Parse")
+      (when
+        (not (empty? (deref ast-output)))
+        (div
+          (~tw :tokens "space-y-4")
+          (div
+            (h4
+              (~tw
+                :tokens "text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2")
+              "AST")
+            (pre
+              (~tw
+                :tokens "bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto")
+              (deref ast-output)))
+          (div
+            (h4
+              (~tw
+                :tokens "text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2")
+              "Serialized")
+            (pre
+              (~tw
+                :tokens "bg-gray-900 text-amber-400 p-4 rounded-lg text-sm overflow-x-auto")
+              (deref ser-output))))))))
diff --git a/sx/sx/applications/graphql/index.sx b/sx/sx/applications/graphql/index.sx
new file mode 100644
index 00000000..d703d13d
--- /dev/null
+++ b/sx/sx/applications/graphql/index.sx
@@ -0,0 +1,274 @@
+
+;; GraphQL demo — parser, executor, and hyperscript integration
+(defcomp
+  ()
+  (~docs/page
+    :title "GraphQL"
+    (p
+      (~tw :tokens "text-lg text-gray-600 mb-2")
+      "A pure SX implementation of the "
+      (a
+        :href "https://spec.graphql.org/"
+        :target "_blank"
+        (~tw :tokens "text-violet-600 underline")
+        "GraphQL query language")
+      ". The parser, executor, and serializer are all s-expressions "
+      "compiled to bytecode by the same kernel that runs the rest of the site.")
+    (p
+      (~tw :tokens "text-gray-600 mb-6")
+      "GraphQL operations map directly to the existing "
+      (code "defquery")
+      "/"
+      (code "defaction")
+      " system. Queries become IO suspension calls, mutations become actions, "
+      "and field selection is projection over result dicts. The hyperscript "
+      "integration adds "
+      (code "fetch gql { ... }")
+      " as a native command.")
+    (~docs/section
+      :title "Parser"
+      :id "parser"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "The tokenizer and recursive-descent parser live in "
+        (code "lib/graphql.sx")
+        ". Feed it any GraphQL source and get an SX AST back.")
+      (~docs/code :src "(gql-parse \"{ user(id: 1) { name email } }\")")
+      (p (~tw :tokens "text-gray-500 text-sm mb-3") "Result:")
+      (~docs/code
+        :src (str
+          "(gql-doc\n"
+          "  (gql-query nil () ()\n"
+          "    ((gql-field \"user\" ((\"id\" 1)) ()\n"
+          "       ((gql-field \"name\" () () ())\n"
+          "        (gql-field \"email\" () () ()))))))"))
+      (p
+        (~tw :tokens "text-gray-600 mt-3")
+        "Every GraphQL concept has an SX node type: "
+        (code "gql-query")
+        ", "
+        (code "gql-mutation")
+        ", "
+        (code "gql-field")
+        ", "
+        (code "gql-fragment")
+        ", "
+        (code "gql-var")
+        ", "
+        (code "gql-directive")
+        ". "
+        "Accessors like "
+        (code "gql-field-name")
+        " and "
+        (code "gql-op-selections")
+        " make the AST easy to walk."))
+    (~docs/section
+      :title "Variables and Operations"
+      :id "variables"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Named operations, variable definitions with types and defaults, "
+        "and variable references all parse to structured AST nodes.")
+      (~docs/code
+        :src "query GetUser($id: ID!, $limit: Int = 10) {\n  user(id: $id) {\n    name\n    posts(limit: $limit) { title }\n  }\n}")
+      (p
+        (~tw :tokens "text-gray-500 text-sm mt-3 mb-3")
+        "Variable definitions become "
+        (code "(gql-var-def name type default)")
+        " nodes. "
+        "References become "
+        (code "(gql-var name)")
+        " nodes that the executor substitutes "
+        "from a provided bindings dict."))
+    (~docs/section
+      :title "Fragments"
+      :id "fragments"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Fragment definitions, fragment spreads, and inline fragments:")
+      (~docs/code
+        :src "query {\n  user {\n    ...UserFields\n    ... on Admin { role }\n  }\n}\n\nfragment UserFields on User {\n  name\n  email\n}")
+      (p
+        (~tw :tokens "text-gray-600 mt-3")
+        "The executor collects fragment definitions from the document "
+        "and resolves spreads during projection. Inline fragments apply "
+        "unconditionally (type checking is available via "
+        (code "spec/types.sx")
+        ")."))
+    (~docs/section
+      :title "Executor"
+      :id "executor"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "The executor in "
+        (code "lib/graphql-exec.sx")
+        " walks the parsed AST and dispatches each root field through a resolver. "
+        "The default resolver uses "
+        (code "perform io-gql-resolve")
+        " to dispatch via IO suspension, exactly like "
+        (code "defquery")
+        ".")
+      (~docs/code
+        :src "(let ((doc (gql-parse \"{ user(id: 1) { name email } }\"))\n      (resolver (fn (field-name args op-type)\n                  (if (= field-name \"user\")\n                    {:name \"Alice\" :email \"alice@test.com\" :age 30}\n                    nil))))\n  (gql-execute doc {} resolver))")
+      (p (~tw :tokens "text-gray-500 text-sm mb-3") "Result:")
+      (~docs/code
+        :src "{:data {:user {:email \"alice@test.com\" :name \"Alice\"}}}")
+      (p
+        (~tw :tokens "text-gray-600 mt-3")
+        "Notice "
+        (code ":age")
+        " is absent from the result. "
+        "The executor projects each resolver result down to only the fields "
+        "the query requested. Nested selections, list results, and aliased "
+        "fields all work."))
+    (~docs/section
+      :title "Aliases"
+      :id "aliases"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Query the same field multiple times with different arguments:")
+      (~docs/code
+        :src "{\n  me: user(id: 1) { name }\n  them: user(id: 2) { name }\n}")
+      (p
+        (~tw :tokens "text-gray-600 mt-3")
+        "Each aliased field calls the resolver independently. "
+        "Results are keyed by the alias name: "
+        (code "{:data {:me {:name ...} :them {:name ...}}}")
+        "."))
+    (~docs/section
+      :title "Serializer"
+      :id "serializer"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "The serializer converts an AST back to GraphQL source. "
+        "Useful for logging, debugging, and wire format.")
+      (~docs/code
+        :src "(gql-serialize (gql-parse \"query GetUser($id: ID!) { user(id: $id) { name } }\"))")
+      (p
+        (~tw :tokens "text-gray-500 text-sm mt-3")
+        "Round-trips cleanly. Parse, transform the AST, serialize back."))
+    (~docs/section
+      :title "Hyperscript: fetch gql"
+      :id "hyperscript"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "The "
+        (code "fetch gql")
+        " command embeds GraphQL queries directly in hyperscript. "
+        "Write queries inline "
+        (em "in the HTML attribute")
+        ", compiled to bytecode "
+        "alongside the rest of the hyperscript.")
+      (~docs/code
+        :src "<!-- shorthand query -->\n<button _=\"on click fetch gql { user(id: 1) { name } } then put it.data.user.name into #result\">\n  Load User\n</button>\n\n<!-- with explicit endpoint -->\n<button _=\"on click fetch gql { posts { title } } from '/api/graphql' then ...\">\n  Load Posts\n</button>\n\n<!-- mutation -->\n<button _=\"on click fetch gql mutation { deletePost(id: 42) { success } } then ...\">\n  Delete\n</button>")
+      (p
+        (~tw :tokens "text-gray-600 mt-3 mb-3")
+        "The parser collects the GraphQL body between braces, preserving nested "
+        "structure. At runtime, "
+        (code "hs-fetch-gql")
+        " sends a standard "
+        (code "{ \"query\": \"...\", \"variables\": {} }")
+        " JSON POST to the endpoint (defaults to "
+        (code "/graphql")
+        ").")
+      (p
+        (~tw :tokens "text-gray-600")
+        "The compilation pipeline: hyperscript source "
+        (span (~tw :tokens "text-gray-400") " → ")
+        "HS tokenizer "
+        (span (~tw :tokens "text-gray-400") " → ")
+        "HS parser ("
+        (code "fetch-gql")
+        " AST) "
+        (span (~tw :tokens "text-gray-400") " → ")
+        "HS compiler ("
+        (code "hs-fetch-gql")
+        " call) "
+        (span (~tw :tokens "text-gray-400") " → ")
+        "bytecode. The GraphQL source string is a constant in the compiled output."))
+    (~docs/section
+      :title "GraphQL → SX Mapping"
+      :id "mapping"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Every GraphQL concept has a direct SX equivalent:")
+      (table
+        (~tw :tokens "w-full text-sm border-collapse mb-4")
+        (thead
+          (tr
+            (~tw :tokens "border-b border-gray-200")
+            (th
+              (~tw :tokens "text-left py-2 pr-4 text-gray-500 font-medium")
+              "GraphQL")
+            (th
+              (~tw :tokens "text-left py-2 pr-4 text-gray-500 font-medium")
+              "SX")
+            (th
+              (~tw :tokens "text-left py-2 text-gray-500 font-medium")
+              "Mechanism")))
+        (tbody
+          (tr
+            (~tw :tokens "border-b border-gray-100")
+            (td (~tw :tokens "py-2 pr-4") "Query")
+            (td (~tw :tokens "py-2 pr-4") (code "defquery"))
+            (td (~tw :tokens "py-2") "IO suspension"))
+          (tr
+            (~tw :tokens "border-b border-gray-100")
+            (td (~tw :tokens "py-2 pr-4") "Mutation")
+            (td (~tw :tokens "py-2 pr-4") (code "defaction"))
+            (td (~tw :tokens "py-2") "IO suspension"))
+          (tr
+            (~tw :tokens "border-b border-gray-100")
+            (td (~tw :tokens "py-2 pr-4") "Subscription")
+            (td (~tw :tokens "py-2 pr-4") "SSE + signals")
+            (td (~tw :tokens "py-2") "Reactive islands"))
+          (tr
+            (~tw :tokens "border-b border-gray-100")
+            (td (~tw :tokens "py-2 pr-4") "Fragment")
+            (td (~tw :tokens "py-2 pr-4") (code "defcomp"))
+            (td (~tw :tokens "py-2") "Component composition"))
+          (tr
+            (~tw :tokens "border-b border-gray-100")
+            (td (~tw :tokens "py-2 pr-4") "Schema")
+            (td (~tw :tokens "py-2 pr-4") (code "spec/types.sx"))
+            (td (~tw :tokens "py-2") "Gradual type system"))
+          (tr
+            (~tw :tokens "border-b border-gray-100")
+            (td (~tw :tokens "py-2 pr-4") "Resolver")
+            (td (~tw :tokens "py-2 pr-4") (code "perform"))
+            (td (~tw :tokens "py-2") "CEK IO suspension"))
+          (tr
+            (td (~tw :tokens "py-2 pr-4") "Field selection")
+            (td (~tw :tokens "py-2 pr-4") (code "gql-project"))
+            (td (~tw :tokens "py-2") "Dict projection")))))
+    (~docs/section
+      :title "Live Parse"
+      :id "live-parse"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Type a GraphQL query and see the SX AST. "
+        "Parsed by the same "
+        (code "lib/graphql.sx")
+        " that compiles to bytecode.")
+      (div
+        (~tw :tokens "flex flex-col gap-3")
+        (textarea
+          :id "gql-input"
+          :name "source"
+          :rows "5"
+          (~tw
+            :tokens "w-full font-mono text-sm p-3 border border-gray-300 rounded-lg focus:border-violet-500 focus:ring-1 focus:ring-violet-500 outline-none")
+          :placeholder "{ user(id: 1) { name email } }"
+          "{\n  user(id: 1) {\n    name\n    email\n  }\n}")
+        (button
+          (~tw
+            :tokens "self-start px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors cursor-pointer")
+          :id "gql-parse-btn"
+          "Parse")
+        (div
+          :id "gql-output"
+          (~tw
+            :tokens "min-h-24 p-3 bg-gray-50 rounded-lg border border-gray-200 font-mono text-sm text-gray-700 whitespace-pre-wrap")
+          (span (~tw :tokens "text-gray-400") "AST will appear here")))
+      (script
+        "document.getElementById('gql-parse-btn').addEventListener('click', function() { var src = document.getElementById('gql-input').value; fetch('/sx/(applications.(graphql.(api.parse-demo)))?source=' + encodeURIComponent(src)).then(function(r) { return r.text(); }).then(function(html) { document.getElementById('gql-output').innerHTML = html; }); });"))))
diff --git a/sx/sx/applications/htmx/_test/test-demo.sx b/sx/sx/applications/htmx/_test/test-demo.sx
new file mode 100644
index 00000000..8f2e0d4d
--- /dev/null
+++ b/sx/sx/applications/htmx/_test/test-demo.sx
@@ -0,0 +1,137 @@
+;; Tests for the htmx demo page
+;; Each deftest declares its runner: :playwright (live browser) or :harness (mock IO)
+
+;; ── Click to Load ──────────────────────────────────────────────
+
+(deftest
+  click-to-load
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (click "button[hx-get]")
+  (wait 2000)
+  (assert-text "#click-result" :contains "Content loaded!")
+  (assert-text "#click-result" :contains "Fetched from the server via sx-get"))
+
+(deftest
+  click-to-load-network
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (click "button[hx-get]")
+  (assert-network :method "GET" :url-contains "api.click"))
+
+;; ── Active Search ──────────────────────────────────────────────
+
+(deftest
+  search-debounce
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (fill "input[hx-get]" "swap")
+  (wait 1500)
+  (assert-network
+    :method "GET"
+    :url-contains "api.search"
+    :url-contains "q=swap")
+  (assert-text "#search-results" :not-contains "Type to search"))
+
+(deftest
+  search-empty
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (fill "input[hx-get]" "xyznonexistent")
+  (wait 1500)
+  (assert-text "#search-results" :contains "No results"))
+
+;; ── Tabs ───────────────────────────────────────────────────────
+
+(deftest
+  tab-switch
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (click "button[hx-get*=\"tab=features\"]")
+  (wait 2000)
+  (assert-text "#htmx-tab-content" :not-contains "Click a tab")
+  (assert-network :method "GET" :url-contains "api.tab"))
+
+(deftest
+  tab-overview
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (click "button[hx-get*=\"tab=overview\"]")
+  (wait 2000)
+  (assert-text "#htmx-tab-content" :contains "htmx gives you access"))
+
+;; ── Append Items ───────────────────────────────────────────────
+
+(deftest
+  append-item
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (assert-count "#item-list > *" 0)
+  (click "button[hx-post*=\"api.append\"]")
+  (wait 2000)
+  (assert-count "#item-list > *" :gte 1)
+  (assert-network :method "POST" :url-contains "api.append"))
+
+(deftest
+  append-multiple
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (click "button[hx-post*=\"api.append\"]")
+  (wait 1500)
+  (click "button[hx-post*=\"api.append\"]")
+  (wait 1500)
+  (assert-count "#item-list > *" :gte 2))
+
+;; ── Delete with Confirm ────────────────────────────────────────
+
+(deftest
+  delete-item
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (assert-count "#delete-list .item" 3)
+  (accept-dialog)
+  (click "button[hx-delete]:first-of-type")
+  (wait 2000)
+  (assert-count "#delete-list .item" 2)
+  (assert-network :method "DELETE" :url-contains "api.delete"))
+
+;; ── Form Submission ────────────────────────────────────────────
+
+(deftest
+  form-submit
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (fill "form[hx-post] input[name=\"name\"]" "Alice")
+  (fill "form[hx-post] input[name=\"email\"]" "alice@example.com")
+  (click "form[hx-post] button[type=\"submit\"]")
+  (wait 2000)
+  (assert-text "#form-result" :contains "Alice")
+  (assert-text "#form-result" :contains "alice@example.com")
+  (assert-network :method "POST" :url-contains "api.form"))
+
+;; ── Boot & Activation ──────────────────────────────────────────
+
+(deftest
+  htmx-boot-activates
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (assert-count "[hx-get],[hx-post],[hx-delete]" :gte 8)
+  (eval "(type-of htmx-boot-subtree!)" :equals "function"))
+
+(deftest
+  no-console-errors
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (assert-no-errors)
+  (assert-text "[data-sx-ready]" :exists true))
+
+;; ── OOB Swap Filtering ────────────────────────────────────────
+
+(deftest
+  oob-not-visible
+  :runner :playwright
+  :url "/sx/(applications.(htmx))"
+  (click "button[hx-get]")
+  (wait 2000)
+  (assert-text "#click-result" :not-contains "defcomp")
+  (assert-text "#click-result" :not-contains "~examples"))
diff --git a/sx/sx/applications/htmx/index.sx b/sx/sx/applications/htmx/index.sx
new file mode 100644
index 00000000..ae0967a5
--- /dev/null
+++ b/sx/sx/applications/htmx/index.sx
@@ -0,0 +1,313 @@
+;; htmx demo — live interactive examples using hx-* attributes
+(defcomp
+  ()
+  (~docs/page
+    :title "htmx"
+    (p
+      (~tw :tokens "text-lg text-gray-600 mb-2")
+      "Every "
+      (code "hx-*")
+      " attribute is syntactic sugar for a "
+      (a
+        :href "/sx/(applications.(hyperscript))"
+        (~tw :tokens "text-violet-600 underline")
+        "_hyperscript")
+      " event handler. Same runtime, same bytecode, zero duplication.")
+    (p
+      (~tw :tokens "text-gray-500 mb-8")
+      "These demos use real "
+      (code "hx-*")
+      " attributes processed by "
+      (code "htmx-activate!")
+      " — not "
+      (code "_=\"...\"")
+      " hyperscript syntax. "
+      "Click buttons, type in inputs, and watch the network tab.")
+    (~docs/section
+      :title "Click to Load"
+      :id "click-to-load"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "The simplest htmx pattern: a button with "
+        (code "hx-get")
+        " that loads server content into a target element.")
+      (~docs/code
+        :src "<button hx-get=\"/sx/(applications.(htmx.(api.click)))\"\n        hx-target=\"#click-result\"\n        hx-swap=\"innerHTML\">\n  Load Content\n</button>")
+      (div
+        (~tw :tokens "mt-4 flex flex-col gap-3")
+        (button
+          (~tw
+            :tokens "self-start px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors")
+          :hx-get "/sx/(applications.(htmx.(api.click)))"
+          :hx-target "#click-result"
+          :hx-swap "innerHTML"
+          "Load Content")
+        (div
+          :id "click-result"
+          (~tw
+            :tokens "min-h-16 border border-dashed border-gray-200 rounded-lg flex items-center justify-center")
+          (span
+            (~tw :tokens "text-gray-400 text-sm")
+            "Content will appear here"))))
+    (~docs/section
+      :title "Active Search"
+      :id "active-search"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Search-as-you-type with "
+        (code "hx-trigger=\"input changed delay:300ms\"")
+        " — debounces input and only fires when the value actually changes.")
+      (~docs/code
+        :src "<input hx-get=\"/sx/(applications.(htmx.(api.search)))\"\n       hx-trigger=\"input changed delay:300ms\"\n       hx-target=\"#search-results\"\n       name=\"q\"\n       placeholder=\"Search patterns...\">")
+      (div
+        (~tw :tokens "mt-4 space-y-3")
+        (input
+          (~tw
+            :tokens "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-300 focus:border-violet-400 outline-none")
+          :type "text"
+          :name "q"
+          :placeholder "Search patterns… (try 'tab', 'modal', 'scroll')"
+          :hx-get "/sx/(applications.(htmx.(api.search)))"
+          :hx-trigger "input changed delay:300ms"
+          :hx-target "#search-results")
+        (div
+          :id "search-results"
+          (~tw :tokens "border border-gray-200 rounded-lg overflow-hidden")
+          (p (~tw :tokens "text-gray-400 text-sm p-3") "Type to search…"))))
+    (~docs/section
+      :title "Tabs"
+      :id "tabs"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Tab buttons with "
+        (code "hx-get")
+        " loading content from the server. "
+        "Each click replaces the tab panel with server-rendered HTML.")
+      (~docs/code
+        :src "<button hx-get=\"/api/tab?tab=overview\"\n        hx-target=\"#tab-content\"\n        hx-swap=\"innerHTML\">\n  Overview\n</button>")
+      (div
+        (~tw :tokens "mt-4 border border-gray-200 rounded-lg overflow-hidden")
+        (div
+          (~tw :tokens "flex border-b border-gray-200 bg-gray-50")
+          (button
+            (~tw
+              :tokens "px-4 py-2 text-sm font-medium text-violet-700 border-b-2 border-violet-600 bg-white")
+            :hx-get "/sx/(applications.(htmx.(api.tab)))?tab=overview"
+            :hx-target "#htmx-tab-content"
+            :hx-swap "innerHTML"
+            "Overview")
+          (button
+            (~tw
+              :tokens "px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700")
+            :hx-get "/sx/(applications.(htmx.(api.tab)))?tab=features"
+            :hx-target "#htmx-tab-content"
+            :hx-swap "innerHTML"
+            "Features")
+          (button
+            (~tw
+              :tokens "px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700")
+            :hx-get "/sx/(applications.(htmx.(api.tab)))?tab=code"
+            :hx-target "#htmx-tab-content"
+            :hx-swap "innerHTML"
+            "Code"))
+        (div
+          :id "htmx-tab-content"
+          (~tw :tokens "p-4")
+          (p
+            (~tw :tokens "text-gray-400 text-sm")
+            "Click a tab to load content"))))
+    (~docs/section
+      :title "Append Items"
+      :id "append"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "Using "
+        (code "hx-swap=\"beforeend\"")
+        " to append new items instead of replacing content. "
+        "The htmx v4 alias "
+        (code "append")
+        " also works.")
+      (~docs/code
+        :src "<button hx-post=\"/api/append\"\n        hx-target=\"#item-list\"\n        hx-swap=\"beforeend\">\n  Add Item\n</button>")
+      (div
+        (~tw :tokens "mt-4 space-y-3")
+        (button
+          (~tw
+            :tokens "px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors")
+          :hx-post "/sx/(applications.(htmx.(api.append)))"
+          :hx-target "#item-list"
+          :hx-swap "beforeend"
+          "Add Item")
+        (div
+          :id "item-list"
+          (~tw
+            :tokens "min-h-16 border border-dashed border-gray-200 rounded-lg p-2")
+          (span
+            (~tw :tokens "text-gray-400 text-sm")
+            "Items will append here"))))
+    (~docs/section
+      :title "Delete with Confirm"
+      :id "delete"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        (code "hx-confirm")
+        " shows a native dialog before firing the request. "
+        (code "hx-delete")
+        " sends a DELETE method. The empty response removes the target.")
+      (~docs/code
+        :src "<button hx-delete=\"/api/delete\"\n        hx-target=\"closest .item\"\n        hx-swap=\"outerHTML\"\n        hx-confirm=\"Are you sure?\">\n  Delete\n</button>")
+      (div
+        :id "delete-demo"
+        (~tw :tokens "mt-4 space-y-2")
+        (div
+          (~tw
+            :tokens "flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg item")
+          (span "First item")
+          (button
+            (~tw
+              :tokens "px-3 py-1 text-sm text-red-600 border border-red-200 rounded hover:bg-red-50")
+            :hx-delete "/sx/(applications.(htmx.(api.delete)))"
+            :hx-target "closest .item"
+            :hx-swap "outerHTML"
+            :hx-confirm "Delete this item?"
+            "Delete"))
+        (div
+          (~tw
+            :tokens "flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg item")
+          (span "Second item")
+          (button
+            (~tw
+              :tokens "px-3 py-1 text-sm text-red-600 border border-red-200 rounded hover:bg-red-50")
+            :hx-delete "/sx/(applications.(htmx.(api.delete)))"
+            :hx-target "closest .item"
+            :hx-swap "outerHTML"
+            :hx-confirm "Delete this item?"
+            "Delete"))
+        (div
+          (~tw
+            :tokens "flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg item")
+          (span "Third item")
+          (button
+            (~tw
+              :tokens "px-3 py-1 text-sm text-red-600 border border-red-200 rounded hover:bg-red-50")
+            :hx-delete "/sx/(applications.(htmx.(api.delete)))"
+            :hx-target "closest .item"
+            :hx-swap "outerHTML"
+            :hx-confirm "Delete this item?"
+            "Delete"))))
+    (~docs/section
+      :title "Form Submission"
+      :id "form"
+      (p
+        (~tw :tokens "text-gray-600 mb-3")
+        "A form with "
+        (code "hx-post")
+        " sends form data via AJAX. "
+        "The response replaces the target — no full page reload.")
+      (~docs/code
+        :src "<form hx-post=\"/api/form\"\n      hx-target=\"#form-result\"\n      hx-swap=\"innerHTML\">\n  <input name=\"name\" />\n  <input name=\"email\" type=\"email\" />\n  <button type=\"submit\">Submit</button>\n</form>")
+      (div
+        (~tw :tokens "mt-4 space-y-3")
+        (form
+          (~tw :tokens "space-y-3")
+          :hx-post "/sx/(applications.(htmx.(api.form)))"
+          :hx-target "#form-result"
+          :hx-swap "innerHTML"
+          (div
+            (~tw :tokens "flex gap-3")
+            (input
+              (~tw
+                :tokens "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-300 outline-none")
+              :type "text"
+              :name "name"
+              :placeholder "Name")
+            (input
+              (~tw
+                :tokens "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-300 outline-none")
+              :type "email"
+              :name "email"
+              :placeholder "Email"))
+          (button
+            (~tw
+              :tokens "px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors")
+            :type "submit"
+            "Submit"))
+        (div
+          :id "form-result"
+          (~tw :tokens "min-h-12")
+          (span
+            (~tw :tokens "text-gray-400 text-sm")
+            "Submit the form to see the response"))))
+    (~docs/section
+      :title "How It Works"
+      :id "how-it-works"
+      (~docs/note
+        (p
+          (strong "Zero separate runtime. ")
+          "htmx attributes are translated to the same runtime calls as "
+          (a
+            :href "/sx/(applications.(hyperscript))"
+            (~tw :tokens "text-violet-600 underline")
+            "_hyperscript")
+          " event handlers. "
+          (code "hx-get")
+          " becomes "
+          (code "perform io-fetch")
+          ". "
+          (code "hx-swap=\"innerHTML\"")
+          " becomes "
+          (code "dom-set-inner-html")
+          ". "
+          "Same bytecode path."))
+      (p
+        (~tw :tokens "text-gray-600 mt-3")
+        "When the page loads, "
+        (code "htmx-boot!")
+        " scans the DOM for elements with "
+        (code "hx-get")
+        ", "
+        (code "hx-post")
+        ", etc. For each element, "
+        (code "htmx-activate!")
+        " reads the attributes, builds a handler function "
+        "from the same primitives the hyperscript compiler emits, and registers "
+        "it via "
+        (code "hs-on")
+        ".")
+      (ol
+        (~tw :tokens "mt-3 space-y-1 text-gray-600 list-decimal list-inside")
+        (li
+          (code "htmx-boot!")
+          " finds all "
+          (code "[hx-get],[hx-post],…")
+          " elements")
+        (li
+          (code "htmx-activate!")
+          " reads "
+          (code "hx-get")
+          ", "
+          (code "hx-target")
+          ", "
+          (code "hx-swap")
+          ", "
+          (code "hx-trigger")
+          " attributes")
+        (li
+          "Builds a handler: "
+          (code
+            "(fn (evt) (perform (io-fetch url method)) (hx-swap! target ...))"))
+        (li
+          "Registers via "
+          (code "hs-on")
+          " — same event system as hyperscript")
+        (li "On trigger, handler fires through the same bytecode VM"))
+      (p
+        (~tw :tokens "text-gray-600 mt-3")
+        "The full implementation is ~400 lines in "
+        (code "lib/hyperscript/htmx.sx")
+        " with "
+        (a
+          :href "/sx/(applications.(hyperscript.htmx))"
+          (~tw :tokens "text-violet-600 underline")
+          "57 tests")
+        " covering parsing, swap modes, triggers, and v4 features."))))
diff --git a/sx/sx/applications/hyperscript/_islands/compile-result.sx b/sx/sx/applications/hyperscript/_islands/compile-result.sx
new file mode 100644
index 00000000..56314dfd
--- /dev/null
+++ b/sx/sx/applications/hyperscript/_islands/compile-result.sx
@@ -0,0 +1,32 @@
+;; _hyperscript Playground
+;; Lives under Applications: /sx/(applications.(hyperscript))
+;; ── Compile result component (server-side rendered) ─────────────
+(defcomp
+  (&key source)
+  (if
+    (or (nil? source) (empty? source))
+    (p
+      (~tw :tokens "text-sm text-gray-400 italic")
+      "Enter some hyperscript and click Compile")
+    (let
+      ((compiled (hs-to-sx-from-source source)))
+      (div
+        (~tw :tokens "space-y-4")
+        (div
+          (h4
+            (~tw
+              :tokens "text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2")
+            "Compiled SX")
+          (pre
+            (~tw
+              :tokens "bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto")
+            (sx-serialize compiled)))
+        (div
+          (h4
+            (~tw
+              :tokens "text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2")
+            "Parse Tree")
+          (pre
+            (~tw
+              :tokens "bg-gray-900 text-amber-400 p-4 rounded-lg text-sm overflow-x-auto")
+            (sx-serialize (hs-compile source))))))))
diff --git a/sx/sx/applications/hyperscript/_islands/example.sx b/sx/sx/applications/hyperscript/_islands/example.sx
new file mode 100644
index 00000000..96626949
--- /dev/null
+++ b/sx/sx/applications/hyperscript/_islands/example.sx
@@ -0,0 +1,30 @@
+;; ── Compile handler (POST endpoint) ─────────────────────────────
+(defcomp
+  (&key source description)
+  (div
+    (~tw :tokens "border border-gray-200 rounded-lg p-4 mb-4")
+    (when
+      description
+      (p (~tw :tokens "text-sm text-gray-600 mb-2") description))
+    (div
+      (~tw :tokens "flex gap-4 items-start mb-3")
+      (div
+        (~tw :tokens "flex-1")
+        (h4
+          (~tw
+            :tokens "text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1")
+          "Source")
+        (pre
+          (~tw
+            :tokens "bg-gray-50 text-gray-900 p-3 rounded text-sm font-mono whitespace-pre-wrap break-words")
+          (str "_=\"" source "\"")))
+      (when
+        (string-contains? source "on click")
+        (div
+          (~tw :tokens "flex-shrink-0 pt-5")
+          (button
+            (~tw
+              :tokens "px-4 py-2 border border-violet-300 rounded-lg text-sm font-medium text-violet-700 hover:bg-violet-50 transition-colors")
+            :_ source
+            "Try it"))))
+    (~hyperscript/compile-result :source source)))
diff --git a/sx/sx/applications/hyperscript/_islands/live-demo.sx b/sx/sx/applications/hyperscript/_islands/live-demo.sx
new file mode 100644
index 00000000..fb5dc6a6
--- /dev/null
+++ b/sx/sx/applications/hyperscript/_islands/live-demo.sx
@@ -0,0 +1,36 @@
+;; ── Playground island ───────────────────────────────────────────
+(defcomp
+  ()
+  (div
+    (~tw :tokens "space-y-4")
+    (style
+      "\n      .bg-violet-600 { background-color: rgb(124 58 237); }\n      .text-white { color: white; }\n      .animate-bounce { animation: bounce 1s infinite; }\n      @keyframes bounce {\n        0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }\n        50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }\n      }\n    ")
+    (p
+      (~tw :tokens "text-sm text-gray-600")
+      "These buttons have "
+      (code "_=\"...\"")
+      " attributes — hyperscript compiled to SX and activated at boot.")
+    (div
+      (~tw :tokens "flex gap-3 items-center")
+      (button
+        (~tw
+          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
+        :_ "on click toggle .bg-violet-600 on me then toggle .text-white on me"
+        "Toggle Color")
+      (button
+        (~tw
+          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
+        :_ "on click add .animate-bounce to me then wait 1s then remove .animate-bounce from me"
+        "Bounce")
+      (span
+        (~tw :tokens "text-sm text-gray-500")
+        :id "click-counter"
+        "0 clicks"))
+    (div
+      (~tw :tokens "mt-2")
+      (button
+        (~tw
+          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
+        :_ "on click increment @data-count on me then set #click-counter's innerHTML to my @data-count"
+        :data-count "0"
+        "Count Clicks"))))
diff --git a/sx/sx/applications/hyperscript/_islands/playground.sx b/sx/sx/applications/hyperscript/_islands/playground.sx
new file mode 100644
index 00000000..689b3d1f
--- /dev/null
+++ b/sx/sx/applications/hyperscript/_islands/playground.sx
@@ -0,0 +1,28 @@
+;; ── Pipeline example component ──────────────────────────────────
+(defcomp
+  ()
+  (div
+    (~tw :tokens "space-y-4")
+    (form
+      :sx-post "/sx/(applications.(hyperscript.(api.compile)))"
+      :sx-target "#hs-playground-result"
+      :sx-swap "innerHTML"
+      (div
+        (label
+          (~tw :tokens "block text-sm font-medium text-gray-700 mb-1")
+          "Hyperscript source")
+        (textarea
+          :name "source"
+          (~tw
+            :tokens "w-full h-24 font-mono text-sm p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-transparent")
+          "on click add .active to me"))
+      (div
+        (~tw :tokens "mt-2")
+        (button
+          :type "submit"
+          (~tw
+            :tokens "px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 text-sm font-medium")
+          "Compile")))
+    (div
+      :id "hs-playground-result"
+      (~hyperscript/compile-result :source "on click add .active to me"))))
diff --git a/sx/sx/applications/hyperscript/_islands/translation.sx b/sx/sx/applications/hyperscript/_islands/translation.sx
new file mode 100644
index 00000000..8b9fc21f
--- /dev/null
+++ b/sx/sx/applications/hyperscript/_islands/translation.sx
@@ -0,0 +1,32 @@
+;; Side-by-side htmx ↔ hyperscript translation display
+(defcomp
+  (&key htmx-html hs-source description)
+  (div
+    (~tw :tokens "border border-gray-200 rounded-lg overflow-hidden mb-6")
+    (when
+      description
+      (div
+        (~tw :tokens "px-4 py-2 bg-gray-50 border-b border-gray-200")
+        (p (~tw :tokens "text-sm font-medium text-gray-700") description)))
+    (div
+      (~tw :tokens "grid grid-cols-2 divide-x divide-gray-200")
+      (div
+        (~tw :tokens "p-4")
+        (h4
+          (~tw
+            :tokens "text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2")
+          "htmx")
+        (pre
+          (~tw
+            :tokens "bg-stone-100 text-gray-900 p-3 rounded text-sm font-mono overflow-x-auto whitespace-pre")
+          htmx-html))
+      (div
+        (~tw :tokens "p-4")
+        (h4
+          (~tw
+            :tokens "text-xs font-semibold uppercase tracking-wide text-violet-400 mb-2")
+          "_hyperscript")
+        (pre
+          (~tw
+            :tokens "bg-stone-100 text-gray-900 p-3 rounded text-sm font-mono overflow-x-auto whitespace-pre")
+          hs-source)))))
\ No newline at end of file
diff --git a/sx/sx/applications/hyperscript/htmx/index.sx b/sx/sx/applications/hyperscript/htmx/index.sx
new file mode 100644
index 00000000..4935f74c
--- /dev/null
+++ b/sx/sx/applications/hyperscript/htmx/index.sx
@@ -0,0 +1,330 @@
+;; htmx 4.0 compatibility — demo page
+(defcomp
+  ()
+  (~docs/page
+    :title "htmx.sx"
+    (p
+      (~tw :tokens "text-lg text-gray-600 mb-2")
+      "Every "
+      (code "hx-")
+      " attribute is syntactic sugar for a hyperscript event handler. "
+      "The htmx compat layer translates attributes to the same runtime calls "
+      "the "
+      (code "_=\"...\"")
+      " compiler emits. Same bytecode. Zero duplication.")
+    (p
+      (~tw :tokens "text-sm text-gray-500 mb-8")
+      "htmx 4.0 compatible: "
+      (code "hx-action")
+      "/"
+      (code "hx-method")
+      ", "
+      (code ":inherited")
+      " modifiers, swap aliases, "
+      (code "hx-status:XXX")
+      ", "
+      (code "hx-sync")
+      ", SSE in core.")
+    (~docs/section
+      :title "The Translation"
+      :id "translation"
+      (p
+        "An htmx element and its hyperscript equivalent compile to identical runtime calls:")
+      (~hyperscript/translation
+        :htmx-html "<button hx-get=\"/api/items\"\n        hx-target=\"#list\"\n        hx-swap=\"innerHTML\"\n        hx-indicator=\"#spinner\"\n        hx-confirm=\"Sure?\"\n        hx-push-url=\"true\">"
+        :hs-source "on click\n  confirm 'Sure?'\n  add .htmx-request to #spinner\n  fetch /api/items\n  put the result into #list\n  push url '/api/items'\n  remove .htmx-request from #spinner"
+        :description "A button that fetches, swaps, confirms, indicates, and pushes history")
+      (p
+        (~tw :tokens "text-sm text-gray-600 mt-4")
+        "Both go through: "
+        (code "hs-on")
+        " → "
+        (code "perform io-fetch")
+        " → "
+        (code "dom-set-inner-html")
+        ". The htmx path skips parsing/compilation and "
+        "calls the runtime primitives directly."))
+    (~docs/section
+      :title "How It Works"
+      :id "how-it-works"
+      (~docs/note
+        (p
+          (strong "Architecture: ")
+          "htmx-activate! scans "
+          (code "hx-*")
+          " attributes, "
+          "builds a handler function from the same runtime primitives the hyperscript compiler emits "
+          "(hs-on, dom-add-class, perform io-fetch, etc.), and registers it via "
+          (code "hs-on")
+          ". "
+          "No separate runtime. No duplication."))
+      (p "The activation pipeline:")
+      (ol
+        (~tw :tokens "list-decimal pl-6 space-y-1 text-sm text-gray-700 mb-4")
+        (li
+          (code "hs-activate!(el)")
+          " reads "
+          (code "_=\"...\"")
+          " → parse → compile → eval")
+        (li
+          (code "htmx-activate!(el)")
+          " reads "
+          (code "hx-*")
+          " → build handler → "
+          (code "hs-on"))
+        (li "Both produce the same runtime calls")
+        (li
+          (code "hs-boot-subtree!")
+          " runs both on every DOM subtree (page load + after swaps)"))
+      (~docs/code
+        :src (highlight
+          "(define htmx-activate!\n  (fn (el)\n    (when (not (dom-get-attr el \"hx-ignore\"))\n      (let ((verb-info (hx-verb-info el)))\n        (when (and verb-info (not (dom-get-data el \"hx-active\")))\n          (dom-set-data el \"hx-active\" true)\n          (let ((method (first verb-info))\n                (url    (nth verb-info 1)))\n            (let ((trigger (hx-parse-trigger\n                             (dom-get-attr el \"hx-trigger\") el))\n                  (handler (hx-make-handler el method url)))\n              (hx-register-trigger! el trigger handler))))))))"
+          "lisp")))
+    (~docs/section
+      :title "What's Shared (Zero Duplication)"
+      :id "shared"
+      (~docs/table
+        :headers ("Capability" "Runtime Function" "Used By")
+        :rows (list
+          (list "Event dispatch" "hs-on / dom-listen" "both")
+          (list "HTTP fetch" "perform io-fetch" "both")
+          (list
+            "DOM swap"
+            "dom-set-inner-html / dom-insert-adjacent-html"
+            "both")
+          (list "CSS transitions" "dom-add-class / dom-remove-class" "both")
+          (list "History API" "perform io-push-state" "both")
+          (list "Indicator toggle" "dom-add-class .htmx-request" "both")
+          (list "Confirm dialog" "perform io-confirm" "both")
+          (list "Wait/settle" "hs-wait" "both")
+          (list "Subtree boot" "hs-boot-subtree!" "both"))))
+    (~docs/section
+      :title "Live Demos"
+      :id "demos"
+      (p
+        "These demos use "
+        (code "_=\"...\"")
+        " hyperscript syntax. "
+        "The equivalent "
+        (code "hx-*")
+        " attributes would produce identical behavior "
+        "through the same runtime.")
+      (~docs/subsection
+        :title "Toggle (Class Manipulation)"
+        (~hyperscript/translation
+          :htmx-html "<button hx-get=\"\" hx-swap=\"none\"\n        hx-trigger=\"click\">"
+          :hs-source "on click toggle .bg-violet-600 on me\n  toggle .text-white on me"
+          :description "Toggle class on click")
+        (div
+          (~tw :tokens "flex gap-3 items-center mt-3 mb-6")
+          (button
+            (~tw
+              :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors duration-200")
+            :_ "on click toggle .bg-violet-600 on me then toggle .text-white on me"
+            "Click to Toggle")))
+      (~docs/subsection
+        :title "Counter (State + DOM Update)"
+        (~hyperscript/translation
+          :htmx-html "<button hx-get=\"/api/increment\"\n        hx-target=\"#count\"\n        hx-swap=\"innerHTML\">"
+          :hs-source "on click\n  get the innerHTML of #demo-count\n  set x to it as Int\n  set the innerHTML of #demo-count\n    to (x + 1)"
+          :description "Increment a counter")
+        (div
+          (~tw :tokens "flex gap-3 items-center mt-3 mb-6")
+          (button
+            (~tw
+              :tokens "px-4 py-2 border border-violet-300 rounded-lg text-sm bg-violet-50 hover:bg-violet-100")
+            :_ "on click get the innerHTML of #demo-count then set x to it as Int then set the innerHTML of #demo-count to (x + 1)"
+            "+1")
+          (span (~tw :tokens "text-lg font-mono") :id "demo-count" "0")))
+      (~docs/subsection
+        :title "Show/Hide (Indicator Pattern)"
+        (~hyperscript/translation
+          :htmx-html "<button hx-get=\"/api/data\"\n        hx-indicator=\"#demo-spinner\">"
+          :hs-source "on click\n  add .htmx-request to #demo-spinner\n  wait 1s\n  remove .htmx-request from #demo-spinner"
+          :description "Show indicator during request")
+        (style
+          "\n          #demo-spinner { opacity: 0; transition: opacity 0.2s; }\n          #demo-spinner.htmx-request { opacity: 1; }\n        ")
+        (div
+          (~tw :tokens "flex gap-3 items-center mt-3 mb-6")
+          (button
+            (~tw :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm")
+            :_ "on click add .htmx-request to #demo-spinner then wait 1s then remove .htmx-request from #demo-spinner"
+            "Load Data")
+          (span
+            :id "demo-spinner"
+            (~tw :tokens "text-sm text-violet-600")
+            "Loading...")))
+      (~docs/subsection
+        :title "Swap Modes"
+        (~hyperscript/translation
+          :htmx-html "<div hx-get=\"/fragment\"\n     hx-target=\"#demo-swap-target\"\n     hx-swap=\"beforeend\">"
+          :hs-source "on click\n  fetch /fragment\n  put the result at the end of\n    #demo-swap-target"
+          :description "Append content (hx-swap=\"beforeend\" = v4 alias \"append\")")
+        (div
+          (~tw :tokens "mt-3 mb-6")
+          (div
+            :id "demo-swap-target"
+            (~tw
+              :tokens "border border-dashed border-gray-300 rounded-lg p-3 min-h-12 text-sm text-gray-500")
+            (div (~tw :tokens "text-gray-400") "Target area"))
+          (button
+            (~tw
+              :tokens "mt-2 px-4 py-2 border border-gray-300 rounded-lg text-sm")
+            :_ "on click put '<div class=\"py-1 text-violet-700\">Appended at ' + Date() + '</div>' at the end of #demo-swap-target"
+            "Append Item"))))
+    (~docs/section
+      :title "htmx 4.0 Features"
+      :id "v4"
+      (~docs/subsection
+        :title "Swap Aliases"
+        (p "v4 adds short aliases that normalize to canonical names:")
+        (~docs/table
+          :headers ("v4 Alias" "Canonical" "Meaning")
+          :rows (list
+            (list
+              (code "before")
+              (code "beforebegin")
+              "Insert before element")
+            (list (code "after") (code "afterend") "Insert after element")
+            (list
+              (code "prepend")
+              (code "afterbegin")
+              "Insert as first child")
+            (list (code "append") (code "beforeend") "Insert as last child")
+            (list
+              (code "innerMorph")
+              (code "innerMorph")
+              "Morph children (idiomorph)")
+            (list
+              (code "outerMorph")
+              (code "outerMorph")
+              "Morph entire element")
+            (list
+              (code "textContent")
+              (code "textContent")
+              "Set text, no HTML parsing"))))
+      (~docs/subsection
+        :title "hx-action / hx-method"
+        (p "v4 alternative to " (code "hx-get") "/" (code "hx-post") ":")
+        (~docs/code
+          :src (highlight
+            ";; These are equivalent:\n(button :hx-post \"/api/submit\")\n(button :hx-action \"/api/submit\" :hx-method \"post\")"
+            "lisp")))
+      (~docs/subsection
+        :title "Explicit Inheritance"
+        (p
+          "v4 requires "
+          (code ":inherited")
+          " modifier for attribute inheritance:")
+        (~docs/code
+          :src (highlight
+            ";; v4: parent target inherited by children\n(div :hx-target:inherited \"#results\"\n  (button :hx-get \"/search\" \"Search\")\n  (button :hx-get \"/filter\" \"Filter\"))"
+            "lisp"))
+        (p
+          (~tw :tokens "text-sm text-gray-500 mt-2")
+          "Both buttons target "
+          (code "#results")
+          " via inherited attribute, "
+          "not implicit inheritance."))
+      (~docs/subsection
+        :title "Status-Based Swap (hx-status:XXX)"
+        (p "Override swap behavior per HTTP status code:")
+        (~docs/code
+          :src (highlight
+            "(form :hx-post \"/api/submit\"\n      :hx-target \"#result\"\n      :hx-status:422 \"swap:innerHTML target:#errors\"\n      :hx-status:5xx \"swap:none\")"
+            "lisp"))
+        (p
+          (~tw :tokens "text-sm text-gray-500 mt-2")
+          "Specificity: exact ("
+          (code "422")
+          ") > two-digit ("
+          (code "50x")
+          ") > one-digit ("
+          (code "5xx")
+          ")."))
+      (~docs/subsection
+        :title "Request Sync (hx-sync)"
+        (p "Synchronize concurrent requests:")
+        (~docs/table
+          :headers ("Strategy" "Behavior")
+          :rows (list
+            (list (code "drop") "Skip if request already in flight (default)")
+            (list (code "abort") "Cancel existing request, start new")
+            (list (code "replace") "Cancel existing, replace with new")
+            (list
+              (code "queue last")
+              "Queue latest request until current completes")))
+        (~docs/code
+          :src (highlight
+            ";; Search: cancel stale requests\n(input :hx-get \"/search\"\n       :hx-trigger \"keyup changed delay:500ms\"\n       :hx-sync \"this:replace\")"
+            "lisp")))
+      (~docs/subsection
+        :title "Server-Sent Events"
+        (p "SSE is built into core in v4 (no extension needed):")
+        (~docs/code
+          :src (highlight
+            "(div :hx-sse-connect \"/events\"\n     :hx-sse-swap \"message:#notifications,alert:#alerts:outerHTML\")"
+            "lisp"))
+        (p
+          (~tw :tokens "text-sm text-gray-500 mt-2")
+          "Each event type maps to a target element and swap mode.")))
+    (~docs/section
+      :title "Swap Modifiers"
+      :id "swap-modifiers"
+      (p
+        "The "
+        (code "hx-swap")
+        " value accepts space-separated modifiers after the mode:")
+      (~docs/table
+        :headers ("Modifier" "Example" "Effect")
+        :rows (list
+          (list (code "swap:") (code "swap:100ms") "Delay before swap")
+          (list
+            (code "settle:")
+            (code "settle:200ms")
+            "Delay between swap and settle")
+          (list
+            (code "scroll:")
+            (code "scroll:top")
+            "Auto-scroll after swap")
+          (list
+            (code "transition:")
+            (code "transition:true")
+            "Use View Transitions API")
+          (list
+            (code "strip:")
+            (code "strip:true")
+            "Remove outer wrapper before swap")
+          (list
+            (code "target:")
+            (code "target:#alt")
+            "Override target inline")
+          (list
+            (code "ignoreTitle:")
+            (code "ignoreTitle:true")
+            "Don't update page title")))
+      (~docs/code
+        :src (highlight
+          "(button :hx-get \"/page\"\n        :hx-swap \"innerHTML swap:50ms settle:100ms scroll:top transition:true\")"
+          "lisp")))
+    (~docs/section
+      :title "Implementation"
+      :id "implementation"
+      (p "The total implementation:")
+      (ul
+        (~tw :tokens "list-disc pl-6 space-y-1 text-sm text-gray-700")
+        (li (code "lib/hyperscript/htmx.sx") " — ~400 lines, 55 functions")
+        (li
+          "2 lines changed in "
+          (code "integration.sx")
+          " to hook into "
+          (code "hs-activate!"))
+        (li "57 tests across 11 suites")
+        (li "Runtime cost: zero — it " (em "is") " the hyperscript runtime"))
+      (~docs/note
+        (p
+          (strong "The insight: ")
+          "htmx and hyperscript are not two competing libraries. "
+          "htmx is a declarative attribute syntax for a subset of what hyperscript can express. "
+          "The 'htmx compat layer' is just a thin attribute scanner "
+          "that builds the same handler functions the hyperscript compiler produces.")))))
\ No newline at end of file
diff --git a/sx/sx/applications/hyperscript/index.sx b/sx/sx/applications/hyperscript/index.sx
new file mode 100644
index 00000000..14d486f9
--- /dev/null
+++ b/sx/sx/applications/hyperscript/index.sx
@@ -0,0 +1,83 @@
+;; ── Live demo: actual hyperscript running ───────────────────────
+(defcomp
+  ()
+  (~docs/page
+    :title "_hyperscript Playground"
+    (p
+      :class "text-lg text-gray-600 mb-6"
+      "Compile "
+      (code "_hyperscript")
+      " to SX expressions. "
+      "The same "
+      (code "_=\"...\"")
+      " syntax, compiled to cached bytecode instead of re-parsed every page load.")
+    (~docs/section
+      :title "Interactive Playground"
+      :id "playground"
+      (p
+        "Edit the hyperscript source and click Compile to see the tokenized, parsed, and compiled SX output.")
+      (~hyperscript/playground))
+    (~docs/section
+      :title "Live Demo"
+      :id "live-demo"
+      (p
+        "These buttons have "
+        (code "_=\"...\"")
+        " attributes — hyperscript compiled to SX and activated at boot.")
+      (~hyperscript/live-demo))
+    (~docs/section
+      :title "Pipeline"
+      :id "pipeline"
+      (p "Every hyperscript string passes through three stages:")
+      (ol
+        :class "list-decimal list-inside space-y-1 text-sm text-gray-700 mb-4"
+        (li
+          (strong "Tokenize")
+          " — source string to typed token stream (keywords, classes, ids, operators, strings)")
+        (li
+          (strong "Parse")
+          " — token stream to AST (commands, expressions, features)")
+        (li
+          (strong "Compile")
+          " — AST to SX expressions targeting "
+          (code "web/lib/dom.sx")
+          " primitives"))
+      (p
+        "The compiled SX is wrapped in "
+        (code "(fn (me) ...)")
+        " and evaluated with "
+        (code "me")
+        " bound to the element. Hyperscript variables are visible to "
+        (code "eval (sx-expr)")
+        " escapes."))
+    (~docs/section
+      :title "Examples"
+      :id "examples"
+      (style
+        "\n      button.active { background-color: #7c3aed !important; color: white !important; border-color: #7c3aed !important; }\n      button.active:hover { background-color: #6d28d9 !important; }\n      button.light { background-color: #fef3c7 !important; color: #92400e !important; border-color: #f59e0b !important; }\n      button.light:hover { background-color: #fde68a !important; }\n      button.dark { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }\n      button.dark:hover { background-color: #334155 !important; }\n      .animate-bounce { animation: bounce 1s; }\n      @keyframes bounce {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-25%); }\n      }")
+      (~hyperscript/example
+        :source "on click add .active to me"
+        :description "Event handler: click adds a CSS class")
+      (~hyperscript/example
+        :source "on click toggle between .light and .dark on me"
+        :description "Toggle between two states")
+      (~hyperscript/example
+        :source "on click set my innerHTML to eval (str \"Hello from \" (+ 2 3) \" worlds\")"
+        :description "SX escape: evaluate SX expressions from hyperscript")
+      (~hyperscript/example
+        :source "on click put \"<b>Rendered!</b>\" into #target"
+        :description "Target another element by CSS selector")
+      (div
+        :id "target"
+        (~tw
+          :tokens "border border-dashed border-gray-300 rounded-lg p-3 min-h-[2rem] text-sm text-gray-400")
+        "← render target")
+      (~hyperscript/example
+        :source "def double(n) return n + n end"
+        :description "Define reusable functions")
+      (~hyperscript/example
+        :source "on click repeat 3 times add .active to me then wait 300ms then remove .active from me then wait 300ms end"
+        :description "Iteration: repeat with timed animation (continuation after loop pending)")
+      (~hyperscript/example
+        :source "behavior Draggable on mousedown add .dragging to me end on mouseup remove .dragging from me end end"
+        :description "Reusable behaviors — install on any element"))))
diff --git a/sx/sx/native-browser.sx b/sx/sx/applications/native-browser/index.sx
similarity index 99%
rename from sx/sx/native-browser.sx
rename to sx/sx/applications/native-browser/index.sx
index e3abe71a..403a6d09 100644
--- a/sx/sx/native-browser.sx
+++ b/sx/sx/applications/native-browser/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~applications/native-browser/content
   ()
   (~docs/page
     :title "Native SX Browser"
diff --git a/sx/sx/pretext-client.sx b/sx/sx/applications/pretext/_islands/live.sx
similarity index 99%
rename from sx/sx/pretext-client.sx
rename to sx/sx/applications/pretext/_islands/live.sx
index 168c5302..6008a6f3 100644
--- a/sx/sx/pretext-client.sx
+++ b/sx/sx/applications/pretext/_islands/live.sx
@@ -1,6 +1,5 @@
 ;; Pretext island — effect as let binding
 (defisland
-  ~pretext-demo/live
   ()
   (let
     ((words (split "In the beginning was the Word, and the Word was with God, and the Word was God. The same was in the beginning with God. All things were made by him; and without him was not any thing made that was made. In him was life; and the life was the light of men." " "))
diff --git a/sx/sx/applications/pretext/_islands/render-paragraph.sx b/sx/sx/applications/pretext/_islands/render-paragraph.sx
new file mode 100644
index 00000000..4cb6b863
--- /dev/null
+++ b/sx/sx/applications/pretext/_islands/render-paragraph.sx
@@ -0,0 +1,49 @@
+;; Pretext demo — DOM-free text layout
+;;
+;; Visual-first: shows typeset text, then explains how.
+;; Uses measure-text (perform) for glyph measurement.
+;; Compute positioned word data for one line.
+(defcomp
+  (&key lines max-width line-height n-words label)
+  (let
+    ((lh (or line-height 24)) (n-lines (len lines)))
+    (div
+      :class "relative rounded-lg border border-stone-200 bg-white overflow-hidden"
+      (when
+        label
+        (div
+          :class "px-4 pt-3 pb-1"
+          (span
+            :class "text-xs font-medium uppercase tracking-wide text-stone-400"
+            label)))
+      (div
+        :style (str
+          "position:relative;height:"
+          (* n-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-size:15px;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 n-lines " lines, " n-words " words"))
+        (span :class "text-xs text-stone-400" (str "width: " max-width "px"))))))
diff --git a/sx/sx/pretext-demo.sx b/sx/sx/applications/pretext/index.sx
similarity index 83%
rename from sx/sx/pretext-demo.sx
rename to sx/sx/applications/pretext/index.sx
index 55fc5758..21c681dc 100644
--- a/sx/sx/pretext-demo.sx
+++ b/sx/sx/applications/pretext/index.sx
@@ -1,58 +1,5 @@
-;; Pretext demo — DOM-free text layout
-;;
-;; Visual-first: shows typeset text, then explains how.
-;; Uses measure-text (perform) for glyph measurement.
-
-;; Compute positioned word data for one line.
-(defcomp
-  ~pretext-demo/render-paragraph
-  (&key lines max-width line-height n-words label)
-  (let
-    ((lh (or line-height 24)) (n-lines (len lines)))
-    (div
-      :class "relative rounded-lg border border-stone-200 bg-white overflow-hidden"
-      (when
-        label
-        (div
-          :class "px-4 pt-3 pb-1"
-          (span
-            :class "text-xs font-medium uppercase tracking-wide text-stone-400"
-            label)))
-      (div
-        :style (str
-          "position:relative;height:"
-          (* n-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-size:15px;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 n-lines " lines, " n-words " words"))
-        (span :class "text-xs text-stone-400" (str "width: " max-width "px"))))))
-
 ;; Compute all positioned lines for a paragraph.
 (defcomp
-  ~pretext-demo/content
   ()
   (let
     ((sample-words (split "In the beginning was the Word, and the Word was with God, and the Word was God. The same was in the beginning with God. All things were made by him; and without him was not any thing made that was made. In him was life; and the life was the light of men." " "))
@@ -261,4 +208,4 @@
               (code "canvas.measureText")
               " gives pixel-perfect metrics — the browser that measures is the browser that renders. "
               "Drag the sliders to re-layout in real time.")
-            (div :data-sx-island "pretext-demo/live" "")))))))
\ No newline at end of file
+            (div :data-sx-island "pretext-demo/live" "")))))))
diff --git a/sx/sx/applications/protocol/activitypub/index.sx b/sx/sx/applications/protocol/activitypub/index.sx
new file mode 100644
index 00000000..0573c2eb
--- /dev/null
+++ b/sx/sx/applications/protocol/activitypub/index.sx
@@ -0,0 +1,10 @@
+(defcomp ()
+  (~docs/page :title "ActivityPub"
+    (~docs/note
+      (p "Honest note: ActivityPub wire format is JSON-LD, not sx. This documents how AP integrates with the sx rendering layer."))
+    (~docs/section :title "AP activities" :id "activities"
+      (p (~tw :tokens "text-stone-600")
+        "Rose Ash services communicate cross-domain writes via ActivityPub-shaped activities. Each service has a virtual actor. Activities are JSON-LD objects sent to /internal/inbox endpoints. RSA signatures authenticate the sender."))
+    (~docs/section :title "Event bus" :id "bus"
+      (p (~tw :tokens "text-stone-600")
+        "The event bus dispatches activities to registered handlers. Handlers are async functions that process the activity and may trigger side effects. The bus runs as a background processor in each service."))))
diff --git a/sx/sx/applications/protocol/fragments/index.sx b/sx/sx/applications/protocol/fragments/index.sx
new file mode 100644
index 00000000..40187d42
--- /dev/null
+++ b/sx/sx/applications/protocol/fragments/index.sx
@@ -0,0 +1,14 @@
+(defcomp ()
+  (~docs/page :title "Cross-Service Fragments"
+    (~docs/section :title "Fragment protocol" :id "protocol"
+      (p (~tw :tokens "text-stone-600")
+        "Rose Ash runs as independent microservices. Each service can expose HTML or sx fragments that other services compose into their pages. Fragment endpoints return text/sx or text/html.")
+      (p (~tw :tokens "text-stone-600")
+        "The frag resolver is an I/O primitive in the render tree:")
+      (~docs/code :src (highlight "(frag \"blog\" \"link-card\" :slug \"hello\")" "lisp")))
+    (~docs/section :title "SxExpr wrapping" :id "wrapping"
+      (p (~tw :tokens "text-stone-600")
+        "When a fragment returns text/sx, the response is wrapped in an SxExpr and embedded directly in the render tree. When it returns text/html, it's wrapped in a ~rich-text component that inserts the HTML via raw!. This allows transparent composition across service boundaries."))
+    (~docs/section :title "fetch_fragments()" :id "fetch"
+      (p (~tw :tokens "text-stone-600")
+        "The Python helper fetch_fragments() fetches multiple fragments in parallel via asyncio.gather(). Fragments are cached in Redis with short TTLs. Each fragment request is HMAC-signed for authentication."))))
diff --git a/sx/sx/applications/protocol/future/index.sx b/sx/sx/applications/protocol/future/index.sx
new file mode 100644
index 00000000..e8005336
--- /dev/null
+++ b/sx/sx/applications/protocol/future/index.sx
@@ -0,0 +1,16 @@
+(defcomp ()
+  (~docs/page :title "Future Possibilities"
+    (~docs/note
+      (p "This page is speculative. Nothing here is implemented. It documents ideas that may or may not happen."))
+    (~docs/section :title "Custom protocol schemes" :id "schemes"
+      (p (~tw :tokens "text-stone-600")
+        "sx:// and sxs:// as custom URI schemes for content addressing or deep linking. An sx:// URI could resolve to an sx expression from a federated registry. This is technically feasible but practically unnecessary for a single-site deployment."))
+    (~docs/section :title "Sx as AP serialization" :id "ap-sx"
+      (p (~tw :tokens "text-stone-600")
+        "ActivityPub objects could be serialized as s-expressions instead of JSON-LD. S-expressions are more compact and easier to parse. The practical barrier: the entire AP ecosystem expects JSON-LD."))
+    (~docs/section :title "Sx-native federation" :id "federation"
+      (p (~tw :tokens "text-stone-600")
+        "Federated services could exchange sx fragments directly — render a remote user's profile card by fetching its sx source from their server. This requires trust and standardization that doesn't exist yet."))
+    (~docs/section :title "Realistic assessment" :id "realistic"
+      (p (~tw :tokens "text-stone-600")
+        "The most likely near-term improvement is sx:// deep linking for client-side component resolution. Everything else requires ecosystem adoption that one project can't drive alone."))))
diff --git a/sx/sx/applications/protocol/index.sx b/sx/sx/applications/protocol/index.sx
new file mode 100644
index 00000000..cf7c6307
--- /dev/null
+++ b/sx/sx/applications/protocol/index.sx
@@ -0,0 +1,23 @@
+;; Protocol documentation pages — fully self-contained
+(defcomp ()
+  (~docs/page :title "Wire Format"
+    (~docs/section :title "The text/sx content type" :id "content-type"
+      (p (~tw :tokens "text-stone-600")
+        "sx responses use content type text/sx. The body is s-expression source code. The client parses and evaluates it, then renders the result into the DOM.")
+      (~docs/code :src (highlight "HTTP/1.1 200 OK\nContent-Type: text/sx\nSX-Css-Hash: a1b2c3d4\n\n(div :class \"p-4\"\n  (~card :title \"Hello\"))" "bash")))
+    (~docs/section :title "Request lifecycle" :id "lifecycle"
+      (p (~tw :tokens "text-stone-600")
+        "1. User interacts with an element that has sx-get/sx-post/etc.")
+      (p (~tw :tokens "text-stone-600")
+        "2. sx.js fires sx:beforeRequest, then sends the HTTP request with SX-Request: true header.")
+      (p (~tw :tokens "text-stone-600")
+        "3. Server builds s-expression tree, scans CSS classes, prepends missing component definitions.")
+      (p (~tw :tokens "text-stone-600")
+        "4. Client receives text/sx response, parses it, evaluates it, renders to DOM.")
+      (p (~tw :tokens "text-stone-600")
+        "5. sx.js fires sx:afterSwap and sx:afterSettle.")
+      (p (~tw :tokens "text-stone-600")
+        "6. Any sx-swap-oob elements are swapped into their targets elsewhere in the DOM."))
+    (~docs/section :title "Component definitions" :id "components"
+      (p (~tw :tokens "text-stone-600")
+        "On full page loads, component definitions are in <script type=\"text/sx\" data-components>. On subsequent sx requests, missing definitions are prepended to the response body. The client caches definitions in localStorage keyed by a content hash."))))
diff --git a/sx/sx/applications/protocol/internal-services/index.sx b/sx/sx/applications/protocol/internal-services/index.sx
new file mode 100644
index 00000000..536b5274
--- /dev/null
+++ b/sx/sx/applications/protocol/internal-services/index.sx
@@ -0,0 +1,14 @@
+(defcomp ()
+  (~docs/page :title "Internal Services"
+    (~docs/note
+      (p "Honest note: the internal service protocol is JSON, not sx. Sx is the composition layer on top. The protocols below are the plumbing underneath."))
+    (~docs/section :title "HMAC-signed HTTP" :id "hmac"
+      (p (~tw :tokens "text-stone-600")
+        "Services communicate via HMAC-signed HTTP requests with short timeouts:")
+      (ul (~tw :tokens "space-y-2 text-stone-600 font-mono text-sm")
+        (li "GET /internal/data/{query} — read data (3s timeout)")
+        (li "POST /internal/actions/{action} — execute write (5s timeout)")
+        (li "POST /internal/inbox — ActivityPub-shaped event delivery")))
+    (~docs/section :title "fetch_data / call_action" :id "fetch"
+      (p (~tw :tokens "text-stone-600")
+        "Python helpers fetch_data() and call_action() handle HMAC signing, serialization, and error handling. They resolve service URLs from environment variables (INTERNAL_URL_BLOG, etc) and fall back to public URLs in development."))))
diff --git a/sx/sx/applications/protocol/resolver-io/index.sx b/sx/sx/applications/protocol/resolver-io/index.sx
new file mode 100644
index 00000000..ef57777f
--- /dev/null
+++ b/sx/sx/applications/protocol/resolver-io/index.sx
@@ -0,0 +1,15 @@
+(defcomp ()
+  (~docs/page :title "Resolver I/O"
+    (~docs/section :title "Async I/O primitives" :id "primitives"
+      (p (~tw :tokens "text-stone-600")
+        "The sx resolver identifies I/O nodes in the render tree, groups them, executes them in parallel via asyncio.gather(), and substitutes results back in.")
+      (p (~tw :tokens "text-stone-600")
+        "I/O primitives:")
+      (ul (~tw :tokens "space-y-2 text-stone-600")
+        (li (span (~tw :tokens "font-mono text-violet-700") "frag") " — fetch a cross-service fragment")
+        (li (span (~tw :tokens "font-mono text-violet-700") "query") " — read data from another service")
+        (li (span (~tw :tokens "font-mono text-violet-700") "action") " — execute a write on another service")
+        (li (span (~tw :tokens "font-mono text-violet-700") "current-user") " — resolve the current authenticated user")))
+    (~docs/section :title "Execution model" :id "execution"
+      (p (~tw :tokens "text-stone-600")
+        "The render tree is walked to find I/O nodes. All nodes at the same depth are gathered and executed in parallel. Results replace the I/O nodes in the tree. The walk continues until no more I/O nodes are found. This typically completes in 1-2 passes."))))
diff --git a/sx/sx/sx-urls.sx b/sx/sx/applications/sx-urls/index.sx
similarity index 99%
rename from sx/sx/sx-urls.sx
rename to sx/sx/applications/sx-urls/index.sx
index 5f338430..6e70c8f4 100644
--- a/sx/sx/sx-urls.sx
+++ b/sx/sx/applications/sx-urls/index.sx
@@ -5,7 +5,7 @@
 ;; Main documentation page
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~sx-urls/urls-content ()
+(defcomp ()
   (~docs/page :title "SX URLs"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "S-expression URLs — where the address of a thing and the thing itself are the same kind of thing.")
diff --git a/sx/sx/sxtp.sx b/sx/sx/applications/sxtp/index.sx
similarity index 99%
rename from sx/sx/sxtp.sx
rename to sx/sx/applications/sxtp/index.sx
index bd87a75c..f4804d0b 100644
--- a/sx/sx/sxtp.sx
+++ b/sx/sx/applications/sxtp/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~applications/sxtp/content
   ()
   (~docs/page
     :title "SXTP Protocol"
diff --git a/sx/sx/cssx.sx b/sx/sx/cssx.sx
deleted file mode 100644
index 9e5a4b9b..00000000
--- a/sx/sx/cssx.sx
+++ /dev/null
@@ -1,421 +0,0 @@
-;; CSSX — Styling as Components
-;; Documentation for the CSSX approach: no parallel style infrastructure,
-;; just defcomp components that decide how to style their children.
-
-;; ---------------------------------------------------------------------------
-;; Overview
-;; ---------------------------------------------------------------------------
-
-(defcomp ~cssx/overview-content ()
-  (~docs/page :title "CSSX Components"
-
-    (~docs/section :title "The Idea" :id "idea"
-      (p (strong "Styling is just components.") " A CSSX component is a regular "
-         (code "defcomp") " that decides how to style its children. It might apply "
-         "Tailwind classes, or hand-written CSS classes, or inline styles, or generate "
-         "rules at runtime. The implementation is the component's private business. "
-         "The consumer just calls " (code "(~cssx/btn :variant \"primary\" \"Submit\")") " and doesn't care.")
-      (p "Because it's " (code "defcomp") ", you get everything for free: caching, bundling, "
-         "dependency scanning, server/client rendering, composition. No parallel infrastructure."))
-
-    (~docs/section :title "Why Not a Style Dictionary?" :id "why"
-      (p "SX previously had a parallel CSS system: a style dictionary (JSON blob of "
-         "atom-to-declaration mappings), a " (code "StyleValue") " type threaded through "
-         "the evaluator and renderer, content-addressed hash class names (" (code "sx-a3f2b1")
-         "), runtime CSS injection, and a separate caching pipeline (cookies, localStorage).")
-      (p "This was ~3,000 lines of code across the spec, bootstrappers, and host implementations. "
-         "It was never adopted. The codebase voted with its feet: " (code ":class") " strings "
-         "with " (code "defcomp") " already covered every real use case.")
-      (p "The result of that system: elements in the DOM got opaque class names like "
-         (code "class=\"sx-a3f2b1\"") ". DevTools became useless. You couldn't inspect an "
-         "element and understand its styling. " (strong "That was a deal breaker.")))
-
-    (~docs/section :title "Key Advantages" :id "advantages"
-      (ul (~tw :tokens "list-disc pl-5 space-y-2 text-stone-700")
-        (li (strong "Readable DOM: ") "Elements have real class names, not content-addressed "
-            "hashes. DevTools works.")
-        (li (strong "Data-driven styling: ") "Components receive data and decide styling. "
-            (code "(~cssx/metric :value 150)") " renders red because " (code "value > 100")
-            " — logic lives in the component, not a CSS preprocessor.")
-        (li (strong "One system: ") "No separate " (code "StyleValue") " type, no style "
-            "dictionary JSON, no injection pipeline. Components ARE the styling abstraction.")
-        (li (strong "One cache: ") "Component hash/localStorage handles everything. No "
-            "separate style dict caching.")
-        (li (strong "Composable: ") (code "(~card :elevated true (~cssx/metric :value v))")
-            " — styling composes like any other component.")
-        (li (strong "Strategy-agnostic: ") "A component can apply Tailwind classes, emit "
-            (code "<style>") " blocks, use inline styles, generate CSS custom properties, or "
-            "any combination. Swap strategies without touching call sites.")))
-
-    (~docs/section :title "What Changed" :id "changes"
-      (~docs/subsection :title "Removed (~3,000 lines)"
-        (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-600 text-sm")
-          (li (code "StyleValue") " type and all plumbing (type checks in eval, render, serialize)")
-          (li (code "cssx.sx") " spec module (resolve-style, resolve-atom, split-variant, hash, injection)")
-          (li "Style dictionary JSON format, loading, caching (" (code "<script type=\"text/sx-styles\">") ", localStorage)")
-          (li (code "style_dict.py") " (782 lines) and " (code "style_resolver.py") " (254 lines)")
-          (li (code "css") " and " (code "merge-styles") " primitives")
-          (li "Platform interface: " (code "fnv1a-hash") ", " (code "compile-regex") ", " (code "make-style-value") ", " (code "inject-style-value"))
-          (li (code "defkeyframes") " special form")
-          (li "Style dict cookies and localStorage keys")))
-
-      (~docs/subsection :title "Kept"
-        (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-600 text-sm")
-          (li (code "defstyle") " — simplified to bind any value (string, function, etc.)")
-          (li (code "tw.css") " — the compiled Tailwind stylesheet, delivered via CSS class tracking")
-          (li (code ":class") " attribute — just takes strings, no special-casing")
-          (li "CSS class delivery (" (code "SX-Css") " headers, " (code "<style id=\"sx-css\">") ")")
-          (li "All component infrastructure (defcomp, caching, bundling, deps)")))
-
-      (~docs/subsection :title "Added"
-        (p "Nothing. CSSX components are just " (code "defcomp") ". The only new thing is "
-           "a convention: components whose primary purpose is styling.")))))
-
-
-;; ---------------------------------------------------------------------------
-;; Patterns
-;; ---------------------------------------------------------------------------
-
-(defcomp ~cssx/patterns-content ()
-  (~docs/page :title "Patterns"
-
-    (~docs/section :title "Class Mapping" :id "class-mapping"
-      (p "The simplest pattern: a component that maps semantic keywords to class strings.")
-      (highlight
-        "(defcomp ~cssx/btn (&key variant disabled &rest children)\n  (button\n    :class (str \"px-4 py-2 rounded font-medium transition \"\n               (case variant\n                 \"primary\" \"bg-blue-600 text-white hover:bg-blue-700\"\n                 \"danger\"  \"bg-red-600 text-white hover:bg-red-700\"\n                 \"ghost\"   \"bg-transparent hover:bg-stone-100\"\n                 \"bg-stone-200 hover:bg-stone-300\")\n               (when disabled \" opacity-50 cursor-not-allowed\"))\n    :disabled disabled\n    children))"
-        "lisp")
-      (p "Consumers call " (code "(~cssx/btn :variant \"primary\" \"Submit\")") ". The Tailwind "
-         "classes are readable in DevTools but never repeated across call sites."))
-
-    (~docs/section :title "Data-Driven Styling" :id "data-driven"
-      (p "Styling that responds to data values — impossible with static CSS:")
-      (highlight
-        "(defcomp ~cssx/metric (&key value label threshold)\n  (let ((t (or threshold 10)))\n    (div :class (str \"p-3 rounded font-bold \"\n                 (cond\n                   ((> value (* t 10)) \"bg-red-500 text-white\")\n                   ((> value t)        \"bg-amber-200 text-amber-900\")\n                   (:else              \"bg-green-100 text-green-800\")))\n      (span :class \"text-sm\" label) \": \" (span (str value)))))"
-        "lisp")
-      (p "The component makes a " (em "decision") " about styling based on data. "
-         "No CSS preprocessor or class name convention can express \"red when value > 100\"."))
-
-    (~docs/section :title "Style Functions" :id "style-functions"
-      (p "Reusable style logic that returns class strings — no wrapping element needed:")
-      (highlight
-        "(define card-classes\n  (fn (&key elevated bordered)\n    (str \"rounded-lg p-4 \"\n         (if elevated \"shadow-lg\" \"shadow-sm\")\n         (when bordered \" border border-stone-200\"))))\n\n;; Usage:\n(div :class (card-classes :elevated true) ...)\n(article :class (card-classes :bordered true) ...)"
-        "lisp")
-      (p "Or with " (code "defstyle") " for named bindings:")
-      (highlight
-        "(defstyle card-base \"rounded-lg p-4 shadow-sm\")\n(defstyle card-elevated \"rounded-lg p-4 shadow-lg\")\n\n(div :class card-base ...)"
-        "lisp"))
-
-    (~docs/section :title "Responsive Layouts" :id "responsive"
-      (p "Components that encode responsive breakpoints:")
-      (highlight
-        "(defcomp ~cssx/responsive-grid (&key cols &rest children)\n  (div :class (str \"grid gap-4 \"\n               (case (or cols 3)\n                 1 \"grid-cols-1\"\n                 2 \"grid-cols-1 md:grid-cols-2\"\n                 3 \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\"\n                 4 \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"))\n    children))"
-        "lisp"))
-
-    (~docs/section :title "Emitting CSS Directly" :id "emitting-css"
-      (p "Components are not limited to referencing existing classes. They can generate "
-         "CSS — " (code "<style>") " tags, keyframes, custom properties — as part of their output:")
-      (highlight
-        "(defcomp ~cssx/pulse (&key color duration &rest children)\n  (<>\n    (style (str \"@keyframes sx-pulse {\"\n               \"0%,100% { opacity:1 } 50% { opacity:.5 } }\"))\n    (div :style (str \"animation: sx-pulse \" (or duration \"2s\") \" infinite;\"\n                    \"color:\" (or color \"inherit\"))\n      children)))"
-        "lisp")
-      (highlight
-        "(defcomp ~cssx/theme (&key primary surface &rest children)\n  (<>\n    (style (str \":root {\"\n               \"--color-primary:\" (or primary \"#7c3aed\") \";\"\n               \"--color-surface:\" (or surface \"#fafaf9\") \"}\"))\n    children))"
-        "lisp")
-      (p "The CSS strategy is the component's private implementation detail. Consumers call "
-         (code "(~cssx/pulse :color \"red\" \"Loading...\")") " or "
-         (code "(~cssx/theme :primary \"#2563eb\" ...)") " without knowing or caring whether the "
-         "component uses classes, inline styles, generated rules, or all three."))))
-
-
-;; ---------------------------------------------------------------------------
-;; Async CSS
-;; ---------------------------------------------------------------------------
-
-(defcomp ~cssx/async-content ()
-  (~docs/page :title "Async CSS"
-
-    (~docs/section :title "The Pattern" :id "pattern"
-      (p "A CSSX component that needs CSS it doesn't have yet can "
-         (strong "fetch and cache it before rendering") ". This is just "
-         (code "~shared:pages/suspense") " combined with a style component — no new infrastructure:")
-      (highlight
-        "(defcomp ~cssx/styled (&key css-url css-hash fallback &rest children)\n  (if (css-cached? css-hash)\n    ;; Already have it — render immediately\n    children\n    ;; Don't have it — suspense while we fetch\n    (~shared:pages/suspense :id (str \"css-\" css-hash)\n      :fallback (or fallback (span \"\"))\n      (do\n        (fetch-css css-url css-hash)\n        children))))"
-        "lisp")
-      (p "The consumer never knows:")
-      (highlight
-        "(~cssx/styled :css-url \"/css/charts.css\" :css-hash \"abc123\"\n  (~bar-chart :data metrics))"
-        "lisp"))
-
-    (~docs/section :title "Use Cases" :id "use-cases"
-      (~docs/subsection :title "Federated Components"
-        (p "A " (code "~cssx/btn") " from another site arrives via IPFS with a CID pointing "
-           "to its CSS. The component fetches and caches it before rendering. "
-           "No coordination needed between sites.")
-        (highlight
-          "(defcomp ~cssx/federated-widget (&key cid &rest children)\n  (let ((css-cid (str cid \"/style.css\"))\n        (cached  (css-cached? css-cid)))\n    (if cached\n      children\n      (~shared:pages/suspense :id (str \"fed-\" cid)\n        :fallback (div :class \"animate-pulse bg-stone-100 rounded h-20\")\n        (do (fetch-css (str \"https://ipfs.io/ipfs/\" css-cid) css-cid)\n            children)))))"
-          "lisp"))
-
-      (~docs/subsection :title "Heavy UI Libraries"
-        (p "Code editors, chart libraries, rich text editors — their CSS only loads "
-           "when the component actually appears on screen:")
-        (highlight
-          "(defcomp ~cssx/code-editor (&key language value on-change)\n  (~cssx/styled :css-url \"/css/codemirror.css\" :css-hash (asset-hash \"codemirror\")\n    :fallback (pre :class \"p-4 bg-stone-900 text-stone-300 rounded\" value)\n    (div :class \"cm-editor\"\n      :data-language language\n      :data-value value)))"
-          "lisp"))
-
-      (~docs/subsection :title "Lazy Themes"
-        (p "Theme CSS loads on first use, then is instant on subsequent visits:")
-        (highlight
-          "(defcomp ~cssx/lazy-theme (&key name &rest children)\n  (let ((css-url (str \"/css/themes/\" name \".css\"))\n        (hash    (str \"theme-\" name)))\n    (~cssx/styled :css-url css-url :css-hash hash\n      :fallback children  ;; render unstyled immediately\n      children)))"
-          "lisp")))
-
-    (~docs/section :title "How It Composes" :id "composition"
-      (p "Async CSS composes with everything already in SX:")
-      (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-700")
-        (li (code "~shared:pages/suspense") " handles the async gap with fallback content")
-        (li "localStorage handles caching across sessions")
-        (li (code "<style id=\"sx-css\">") " is the injection target (same as CSS class delivery)")
-        (li "Component content-hashing tracks what the client has")
-        (li "No new types, no new delivery protocol, no new spec code")))))
-
-
-;; ---------------------------------------------------------------------------
-;; Live Styles
-;; ---------------------------------------------------------------------------
-
-(defcomp ~cssx/live-content ()
-  (~docs/page :title "Live Styles"
-
-    (~docs/section :title "Styles That Respond to Events" :id "concept"
-      (p "Combine " (code "~live") " (SSE) or " (code "~ws") " (WebSocket) with style "
-         "components, and you get styles that change in real-time in response to server "
-         "events. No new infrastructure — just components receiving data through a "
-         "persistent transport."))
-
-    (~docs/section :title "SSE: Live Theme Updates" :id "sse-theme"
-      (p "A " (code "~live") " component declares a persistent connection to an SSE "
-         "endpoint. When the server pushes a new event, " (code "resolveSuspense")
-         " replaces the content:")
-      (highlight
-        "(~live :src \"/api/stream/brand\"\n  (~shared:pages/suspense :id \"theme\"\n    (~cssx/theme :primary \"#7c3aed\" :surface \"#fafaf9\")))"
-        "lisp")
-      (p "Server pushes a new theme:")
-      (highlight
-        "event: sx-resolve\ndata: {\"id\": \"theme\", \"sx\": \"(~cssx/theme :primary \\\"#2563eb\\\" :surface \\\"#1e1e2e\\\")\"}"
-        "text")
-      (p "The " (code "~cssx/theme") " component emits CSS custom properties. Everything "
-         "using " (code "var(--color-primary)") " repaints instantly:")
-      (highlight
-        "(defcomp ~cssx/theme (&key primary surface)\n  (style (str \":root {\"\n    \"--color-primary:\" (or primary \"#7c3aed\") \";\"\n    \"--color-surface:\" (or surface \"#fafaf9\") \"}\")))"
-        "lisp"))
-
-    (~docs/section :title "SSE: Live Dashboard Metrics" :id "sse-metrics"
-      (p "Style changes driven by live data — the component decides the visual treatment:")
-      (highlight
-        "(~live :src \"/api/stream/dashboard\"\n  (~shared:pages/suspense :id \"cpu\"\n    (~cssx/metric :value 0 :label \"CPU\" :threshold 80))\n  (~shared:pages/suspense :id \"memory\"\n    (~cssx/metric :value 0 :label \"Memory\" :threshold 90))\n  (~shared:pages/suspense :id \"requests\"\n    (~cssx/metric :value 0 :label \"RPS\" :threshold 1000)))"
-        "lisp")
-      (p "Server pushes updated values. " (code "~cssx/metric") " turns red when "
-         (code "value > threshold") " — the styling logic lives in the component, "
-         "not in CSS selectors or JavaScript event handlers."))
-
-    (~docs/section :title "WebSocket: Collaborative Design" :id "ws-design"
-      (p "Bidirectional channel for real-time collaboration. A designer adjusts a color, "
-         "all connected clients see the change:")
-      (highlight
-        "(~ws :src \"/ws/design-studio\"\n  (~shared:pages/suspense :id \"canvas-theme\"\n    (~cssx/theme :primary \"#7c3aed\")))"
-        "lisp")
-      (p "Client sends a color change:")
-      (highlight
-        ";; Designer picks a new primary color\n(sx-send ws-conn '(theme-update :primary \"#dc2626\"))"
-        "lisp")
-      (p "Server broadcasts to all connected clients via " (code "sx-resolve") " — "
-         "every client's " (code "~cssx/theme") " component re-renders with the new color."))
-
-    (~docs/section :title "Why This Works" :id "why"
-      (p "Every one of these patterns is just a " (code "defcomp") " receiving data "
-         "through a persistent transport. The styling strategy — CSS custom properties, "
-         "class swaps, inline styles, " (code "<style>") " blocks — is the component's "
-         "private business. The transport doesn't know or care.")
-      (p "A parallel style system would have needed its own streaming, its own caching, "
-         "its own delta protocol for each of these use cases — duplicating what components "
-         "already do.")
-      (p (~tw :tokens "mt-4 text-stone-500 italic")
-         "Note: ~live and ~ws are planned (see Live Streaming). The patterns shown here "
-         "will work as described once the streaming transport is implemented. The component "
-         "and suspense infrastructure they depend on already exists."))))
-
-
-;; ---------------------------------------------------------------------------
-;; Comparison with CSS Technologies
-;; ---------------------------------------------------------------------------
-
-(defcomp ~cssx/comparison-content ()
-  (~docs/page :title "Comparisons"
-
-    (~docs/section :title "styled-components / Emotion" :id "styled-components"
-      (p (a :href "https://styled-components.com" (~tw :tokens "text-violet-600 hover:underline") "styled-components")
-         " pioneered the idea that styling belongs in components. But it generates CSS "
-         "at runtime, injects " (code "<style>") " tags, and produces opaque hashed class "
-         "names (" (code "class=\"sc-bdfBwQ fNMpVx\"") "). Open DevTools and you see gibberish. "
-         "It also carries significant runtime cost — parsing CSS template literals, hashing, "
-         "deduplicating — and needs a separate SSR extraction step (" (code "ServerStyleSheet") ").")
-      (p "CSSX components share the core insight (" (em "styling is a component concern")
-         ") but without the runtime machinery. When a component applies Tailwind classes, "
-         "there's zero CSS generation overhead. When it does emit " (code "<style>")
-         " blocks, it's explicit — not hidden behind a tagged template literal. "
-         "And the DOM is always readable."))
-
-    (~docs/section :title "CSS Modules" :id "css-modules"
-      (p (a :href "https://github.com/css-modules/css-modules" (~tw :tokens "text-violet-600 hover:underline") "CSS Modules")
-         " scope class names to avoid collisions by rewriting them at build time: "
-         (code ".button") " becomes " (code ".button_abc123")
-         ". This solves the global namespace problem but creates the same opacity issue — "
-         "hashed names in the DOM that you can't grep for or reason about.")
-      (p "CSSX components don't need scoping because component boundaries already provide "
-         "isolation. A " (code "~cssx/btn") " owns its markup. There's nothing to collide with."))
-
-    (~docs/section :title "Tailwind CSS" :id "tailwind"
-      (p "Tailwind is " (em "complementary") ", not competitive. CSSX components are the "
-         "semantic layer on top. Raw Tailwind in markup — "
-         (code ":class \"px-4 py-2 bg-blue-600 text-white font-medium rounded hover:bg-blue-700\"")
-         " — is powerful but verbose and duplicated across call sites.")
-      (p "A CSSX component wraps that string once: " (code "(~cssx/btn :variant \"primary\" \"Submit\")")
-         ". The Tailwind classes are still there, readable in DevTools, but consumers don't "
-         "repeat them. This is the same pattern Tailwind's own docs recommend ("
-         (em "\"extracting components\"") ") — CSSX components are just SX's native way of doing it."))
-
-    (~docs/section :title "Vanilla Extract" :id "vanilla-extract"
-      (p (a :href "https://vanilla-extract.style" (~tw :tokens "text-violet-600 hover:underline") "Vanilla Extract")
-         " is zero-runtime CSS-in-JS: styles are written in TypeScript, compiled to static "
-         "CSS at build time, and referenced by generated class names. It avoids the runtime "
-         "cost of styled-components but still requires a build step, a bundler plugin, and "
-         "TypeScript. The generated class names are again opaque.")
-      (p "CSSX components need no build step for styling — they're evaluated at render time "
-         "like any other component. And since the component chooses its own strategy, it can "
-         "reference pre-built classes (zero runtime) " (em "or") " generate CSS on the fly — "
-         "same API either way."))
-
-    (~docs/section :title "Design Tokens / Style Dictionary" :id "design-tokens"
-      (p "The " (a :href "https://amzn.github.io/style-dictionary/" (~tw :tokens "text-violet-600 hover:underline") "Style Dictionary")
-         " pattern — a JSON/YAML file mapping token names to values, compiled to "
-         "platform-specific output — is essentially what the old CSSX was. It's the "
-         "industry standard for design systems.")
-      (p "The problem is that it's a parallel system: separate file format, separate build "
-         "pipeline, separate caching, separate tooling. CSSX components eliminate all of "
-         "that by expressing tokens as component parameters: "
-         (code "(~cssx/theme :primary \"#7c3aed\")") " instead of "
-         (code "{\"color\": {\"primary\": {\"value\": \"#7c3aed\"}}}")
-         ". Same result, no parallel infrastructure."))))
-
-
-;; ---------------------------------------------------------------------------
-;; Philosophy
-;; ---------------------------------------------------------------------------
-
-(defcomp ~cssx/philosophy-content ()
-  (~docs/page :title "Philosophy"
-
-    (~docs/section :title "The Collapse" :id "collapse"
-      (p "The web has spent two decades building increasingly complex CSS tooling: "
-         "preprocessors, CSS-in-JS, atomic CSS, utility frameworks, design tokens, style "
-         "dictionaries. Each solves a real problem but adds a new system with its own "
-         "caching, bundling, and mental model.")
-      (p "CSSX components collapse all of this back to the simplest possible thing: "
-         (strong "a function that takes data and returns markup with classes.")
-         " That's what a component already is. There is no separate styling system because "
-         "there doesn't need to be."))
-
-    (~docs/section :title "Proof by Deletion" :id "proof"
-      (p "The strongest validation: we built the full parallel system — style dictionary, "
-         "StyleValue type, content-addressed hashing, runtime injection, localStorage "
-         "caching — and then deleted it because nobody used it. The codebase already had "
-         "the answer: " (code "defcomp") " with " (code ":class") " strings.")
-      (p "3,000 lines of infrastructure removed. Zero lines added. Every use case still works."))
-
-    (~docs/section :title "The Right Abstraction Level" :id "abstraction"
-      (p "CSS-in-JS puts styling " (em "below") " components — you style elements, then compose "
-         "them. Utility CSS puts styling " (em "beside") " components — classes in markup, logic "
-         "elsewhere. Both create a seam between what something does and how it looks.")
-      (p "CSSX components put styling " (em "inside") " components — at the same level as "
-         "structure and behavior. A " (code "~cssx/metric") " component knows its own thresholds, "
-         "its own color scheme, its own responsive behavior. Styling is just another "
-         "decision the component makes, not a separate concern."))
-
-    (~docs/section :title "Relationship to Other Plans" :id "relationships"
-      (ul (~tw :tokens "list-disc pl-5 space-y-2 text-stone-700")
-        (li (strong "Content-Addressed Components: ") "CSSX components get CIDs like any "
-            "other component. A " (code "~cssx/btn") " from one site can be shared to another via "
-            "IPFS. No " (code ":css-atoms") " manifest field needed — the component carries "
-            "its own styling logic.")
-        (li (strong "Isomorphic Rendering: ") "Components render the same on server and client. "
-            "No style injection timing issues, no FOUC from late CSS loading.")
-        (li (strong "Component Bundling: ") "deps.sx already handles transitive component deps. "
-            "Style components are just more components in the bundle — no separate style bundling.")
-        (li (strong "Live Streaming: ") "SSE and WebSocket transports push data to components. "
-            "Style components react to that data like any other component — no separate style "
-            "streaming protocol.")))))
-
-
-;; ---------------------------------------------------------------------------
-;; CSS Delivery
-;; ---------------------------------------------------------------------------
-
-(defcomp ~cssx/delivery-content ()
-  (~docs/page :title "CSS Delivery"
-
-    (~docs/section :title "Multiple Strategies" :id "strategies"
-      (p "A CSSX component chooses its own styling strategy — and each strategy has its "
-         "own delivery path:")
-      (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-700")
-        (li (strong "Tailwind classes: ") "Delivered via the on-demand protocol below. "
-            "The server ships only the rules the page actually uses.")
-        (li (strong "Inline styles: ") "No delivery needed — " (code ":style") " attributes "
-            "are part of the markup.")
-        (li (strong "Emitted " (code "<style>") " blocks: ") "Components can emit CSS rules "
-            "directly. They arrive as part of the rendered HTML — keyframes, custom properties, "
-            "scoped rules, anything.")
-        (li (strong "External stylesheets: ") "Components can reference pre-loaded CSS files "
-            "or lazy-load them via " (code "~shared:pages/suspense") " (see " (a :href "/sx/(applications.(cssx.async))" "Async CSS") ").")
-        (li (strong "Custom properties: ") "A " (code "~cssx/theme") " component sets "
-            (code "--color-primary") " etc. via a " (code "<style>") " block. Everything "
-            "using " (code "var()") " repaints automatically."))
-      (p "The protocol below handles the Tailwind utility class case — the most common "
-         "strategy — but it's not the only game in town."))
-
-    (~docs/section :title "On-Demand Tailwind Delivery" :id "on-demand"
-      (p "When components use Tailwind utility classes, SX ships " (em "only the CSS rules "
-         "actually used on the page") ", computed at render time. No build step, no purging, "
-         "no unused CSS.")
-      (p "The server pre-parses the full Tailwind CSS file into an in-memory registry at "
-         "startup. When a response is rendered, SX scans all " (code ":class") " values in "
-         "the output, looks up only those classes, and embeds the matching rules."))
-
-    (~docs/section :title "The Protocol" :id "protocol"
-      (p "First page load gets the full set of used rules. Subsequent navigations send a "
-         "hash of what the client already has, and the server ships only the delta:")
-      (highlight
-        "# First page load:\nGET / HTTP/1.1\n\nHTTP/1.1 200 OK\nContent-Type: text/html\n# Full CSS in <style id=\"sx-css\"> + hash in <meta name=\"sx-css-classes\">\n\n# Subsequent navigation:\nGET /about HTTP/1.1\nSX-Css: a1b2c3d4\n\nHTTP/1.1 200 OK\nContent-Type: text/sx\nSX-Css-Hash: e5f6g7h8\nSX-Css-Add: bg-blue-500,text-white,rounded-lg\n# Only new rules in <style data-sx-css>"
-        "bash")
-      (p "The client merges new rules into the existing " (code "<style id=\"sx-css\">")
-         " block and updates its hash. No flicker, no duplicate rules."))
-
-    (~docs/section :title "Component-Aware Scanning" :id "scanning"
-      (p "CSS scanning happens at two levels:")
-      (ul (~tw :tokens "list-disc pl-5 space-y-1 text-stone-700")
-        (li (strong "Registration time: ") "When a component is defined via " (code "defcomp")
-            ", its body is scanned for class strings. The component records which CSS classes "
-            "it uses.")
-        (li (strong "Render time: ") "The rendered output is scanned for any classes the "
-            "static scan missed — dynamically constructed class strings, conditional classes, etc."))
-      (p "This means the CSS registry knows roughly what a page needs before rendering, "
-         "and catches any stragglers after."))
-
-    (~docs/section :title "Trade-offs" :id "tradeoffs"
-      (ul (~tw :tokens "list-disc pl-5 space-y-2 text-stone-700")
-        (li (strong "Full Tailwind in memory: ") "The parsed CSS registry is ~4MB. This is "
-            "a one-time startup cost per app instance.")
-        (li (strong "Regex scanning: ") "Class detection uses regex, so dynamically "
-            "constructed class names (e.g. " (code "(str \"bg-\" color \"-500\")") ") can be "
-            "missed. Use complete class strings in " (code "case") "/" (code "cond") " branches.")
-        (li (strong "No @apply: ") "Tailwind's " (code "@apply") " is a build-time feature. "
-            "On-demand delivery works with utility classes directly.")
-        (li (strong "Tailwind-shaped: ") "The registry parser understands Tailwind's naming "
-            "conventions. Non-Tailwind CSS works via " (code "<style>") " blocks in components.")))))
diff --git a/sx/sx/data-test.sx b/sx/sx/data-test/content.sx
similarity index 96%
rename from sx/sx/data-test.sx
rename to sx/sx/data-test/content.sx
index 7c762d54..8fdcca1d 100644
--- a/sx/sx/data-test.sx
+++ b/sx/sx/data-test/content.sx
@@ -9,7 +9,7 @@
 ;;   "sx:route client+data"  — cache miss, fetched from server
 ;;   "sx:route client+cache" — cache hit, rendered from cached data
 
-(defcomp ~data-test/content (&key (server-time :as string) (items :as list) (phase :as string) (transport :as string))
+(defcomp (&key (server-time :as string) (items :as list) (phase :as string) (transport :as string))
   (div (~tw :tokens "space-y-8")
     (div (~tw :tokens "border-b border-stone-200 pb-6")
       (h1 (~tw :tokens "text-2xl font-bold text-stone-900") "Data Test")
diff --git a/sx/sx/docs-content.sx b/sx/sx/docs-content.sx
deleted file mode 100644
index cea32a1e..00000000
--- a/sx/sx/docs-content.sx
+++ /dev/null
@@ -1,99 +0,0 @@
-;; Docs page content — fully self-contained, no Python intermediaries
-
-(defcomp ~docs-content/home-content ()
-  (div :id "main-content" (~tw :tokens "max-w-3xl mx-auto px-4 py-6")
-    (~home/stepper)))
-
-(defcomp ~docs-content/docs-introduction-content ()
-  (~docs/page :title "Introduction"
-    (~docs/section :title "What is sx?" :id "what"
-      (p (~tw :tokens "text-stone-600")
-        "sx is an s-expression language for building web UIs. It combines htmx's server-first hypermedia approach with React's component model. The server sends s-expression source code over the wire. The client parses, evaluates, and renders it to DOM.")
-      (p (~tw :tokens "text-stone-600")
-        "The same evaluator runs on both server (Python) and client (JavaScript). Components defined once render identically in both environments."))
-    (~docs/section :title "Design decisions" :id "design"
-      (p (~tw :tokens "text-stone-600")
-        "HTML elements are first-class: (div :class \"card\" (p \"hello\")) renders exactly what you'd expect. Components use defcomp with keyword parameters and optional children. The evaluator supports let bindings, conditionals, lambda, map/filter/reduce, and ~80 primitives.")
-      (p (~tw :tokens "text-stone-600")
-        "sx replaces the pattern of shipping a JS framework + build step + client-side router + state management library just to render some server data. For most applications, sx eliminates the need for JavaScript entirely — htmx attributes handle interactivity, hyperscript handles small behaviours, and the server handles everything else."))
-    (~docs/section :title "What sx is not" :id "not"
-      (ul (~tw :tokens "space-y-2 text-stone-600")
-        (li "Not a general-purpose programming language — it's a UI rendering language")
-        (li "Not a full Lisp — it has macros, TCO, and delimited continuations, but no full call/cc")
-        (li "Not production-hardened at scale — it runs one website")))))
-
-(defcomp ~docs-content/docs-getting-started-content ()
-  (~docs/page :title "Getting Started"
-    (~docs/section :title "Minimal example" :id "minimal"
-      (p (~tw :tokens "text-stone-600")
-        "An sx response is s-expression source code with content type text/sx:")
-      (~docs/code :src (highlight "(div :class \"p-4 bg-white rounded\"\n  (h1 :class \"text-2xl font-bold\" \"Hello, world!\")\n  (p \"This is rendered from an s-expression.\"))" "lisp"))
-      (p (~tw :tokens "text-stone-600")
-        "Add sx-get to any element to make it fetch and render sx:"))
-    (~docs/section :title "Hypermedia attributes" :id "attrs"
-      (p (~tw :tokens "text-stone-600")
-        "Like htmx, sx adds attributes to HTML elements to trigger HTTP requests:")
-      (~docs/code :src (highlight "(button\n  :sx-get \"/api/data\"\n  :sx-target \"#result\"\n  :sx-swap \"innerHTML\"\n  \"Load data\")" "lisp"))
-      (p (~tw :tokens "text-stone-600")
-        "sx-get, sx-post, sx-put, sx-delete, sx-patch — all work the same way. The response is parsed as sx and rendered into the target element."))))
-
-(defcomp ~docs-content/docs-components-content ()
-  (~docs/page :title "Components"
-    (~docs/section :title "defcomp" :id "defcomp"
-      (p (~tw :tokens "text-stone-600")
-        "Components are defined with defcomp. They take keyword parameters and optional children:")
-      (~docs/code :src (highlight "(defcomp ~docs-content/card (&key title subtitle &rest children)\n  (div :class \"border rounded p-4\"\n    (h2 :class \"font-bold\" title)\n    (when subtitle (p :class \"text-stone-500\" subtitle))\n    (div :class \"mt-3\" children)))" "lisp"))
-      (p (~tw :tokens "text-stone-600")
-        "Use components with the ~ prefix:")
-      (~docs/code :src (highlight "(~docs-content/card :title \"My Card\" :subtitle \"A description\"\n  (p \"First child\")\n  (p \"Second child\"))" "lisp")))
-    (~docs/section :title "Component caching" :id "caching"
-      (p (~tw :tokens "text-stone-600")
-        "Component definitions are sent in a <script type=\"text/sx\" data-components> block. The client caches them in localStorage keyed by a content hash. On subsequent page loads, the client sends an SX-Components header listing what it has. The server only sends definitions the client is missing.")
-      (p (~tw :tokens "text-stone-600")
-        "This means the first page load sends all component definitions (~5-15KB). Subsequent navigations send zero component bytes — just the page content."))
-    (~docs/section :title "Parameters" :id "params"
-      (p (~tw :tokens "text-stone-600")
-        "&key declares keyword parameters. &rest children captures remaining positional arguments. Missing parameters evaluate to nil. Components always receive all declared parameters — use (when param ...) or (if param ... ...) to handle optional values."))))
-
-(defcomp ~docs-content/docs-evaluator-content ()
-  (~docs/page :title "Evaluator"
-    (~docs/section :title "Special forms" :id "special"
-      (p (~tw :tokens "text-stone-600")
-        "Special forms have lazy evaluation — arguments are not evaluated before the form runs:")
-      (~docs/code :src (highlight ";; Conditionals\n(if condition then-expr else-expr)\n(when condition body...)\n(cond (test1 body1) (test2 body2) (else default))\n\n;; Bindings\n(let ((name value) (name2 value2)) body...)\n(define name value)\n\n;; Functions\n(lambda (x y) (+ x y))\n(fn (x) (* x x))\n\n;; Sequencing\n(do expr1 expr2 expr3)\n(begin expr1 expr2)\n\n;; Threading\n(-> value (fn1 arg) (fn2 arg))" "lisp")))
-    (~docs/section :title "Higher-order forms" :id "higher"
-      (p (~tw :tokens "text-stone-600")
-        "These operate on collections with function arguments:")
-      (~docs/code :src (highlight "(map (fn (x) (* x 2)) (list 1 2 3))        ;; => (2 4 6)\n(filter (fn (x) (> x 2)) (list 1 2 3 4 5))  ;; => (3 4 5)\n(reduce (fn (acc x) (+ acc x)) 0 (list 1 2 3)) ;; => 6\n(some (fn (x) (> x 3)) (list 1 2 3 4))      ;; => true\n(every? (fn (x) (> x 0)) (list 1 2 3))      ;; => true" "lisp")))))
-
-(defcomp ~docs-content/docs-primitives-content (&key prims)
-  (~docs/page :title "Primitives"
-    (~docs/section :title "Built-in functions" :id "builtins"
-      (p (~tw :tokens "text-stone-600")
-        "sx provides ~80 built-in pure functions. They work identically on server (Python) and client (JavaScript).")
-      (div (~tw :tokens "space-y-6") prims))))
-
-(defcomp ~docs-content/docs-special-forms-content (&key forms)
-  (~docs/page :title "Special Forms"
-    (~docs/section :title "Syntactic constructs" :id "special-forms"
-      (p (~tw :tokens "text-stone-600")
-        "Special forms are syntactic constructs whose arguments are NOT evaluated before dispatch. Each form has its own evaluation rules — unlike primitives, which receive pre-evaluated values. Together with primitives, special forms define the complete language surface.")
-      (p (~tw :tokens "text-stone-600")
-        "Forms marked with a tail position enable " (a :href "/sx/(etc.(essay.tail-call-optimization))" (~tw :tokens "text-violet-600 hover:underline") "tail-call optimization") " — recursive calls in tail position use constant stack space.")
-      (div (~tw :tokens "space-y-10") forms))))
-
-(defcomp ~docs-content/docs-server-rendering-content ()
-  (~docs/page :title "Server Rendering"
-    (~docs/section :title "Python API" :id "python"
-      (p (~tw :tokens "text-stone-600")
-        "The server-side sx library provides several entry points for rendering:")
-      (~docs/code :src (highlight "from shared.sx.helpers import sx_page, sx_response, sx_call\nfrom shared.sx.parser import SxExpr\n\n# Build a component call from Python kwargs\nsx_call(\"card\", title=\"Hello\", subtitle=\"World\")\n\n# Return an sx wire-format response\nreturn sx_response(sx_call(\"card\", title=\"Hello\"))\n\n# Return a full HTML page shell with sx boot\nreturn sx_page(ctx, page_sx)" "python")))
-    (~docs/section :title "sx_call" :id "sx-call"
-      (p (~tw :tokens "text-stone-600")
-        "sx_call converts Python kwargs to an s-expression component call. Snake_case becomes kebab-case. SxExpr values are inlined without quoting. None becomes nil. Bools become true/false."))
-    (~docs/section :title "sx_response" :id "sx-response"
-      (p (~tw :tokens "text-stone-600")
-        "sx_response returns a Quart Response with content type text/sx. It prepends missing component definitions, scans for CSS classes, and sets SX-Css-Hash and SX-Css-Add headers."))
-    (~docs/section :title "sx_page" :id "sx-page"
-      (p (~tw :tokens "text-stone-600")
-        "sx_page returns a minimal HTML document that boots the page from sx source. The browser loads component definitions and page sx from inline <script> tags, then sx.js renders everything client-side. CSS rules are pre-scanned and injected."))))
diff --git a/sx/sx/docs.sx b/sx/sx/docs.sx
deleted file mode 100644
index 5027a0a9..00000000
--- a/sx/sx/docs.sx
+++ /dev/null
@@ -1,274 +0,0 @@
-(defcomp
-  ~docs/placeholder
-  (&key (id :as string))
-  (div
-    :id id
-    (div
-      (~tw :tokens "bg-stone-100 rounded p-4 mt-3")
-      (p
-        (~tw :tokens "text-stone-400 italic text-sm")
-        "Trigger the demo to see the actual content."))))
-
-(defcomp
-  ~docs/oob-code
-  (&key (target-id :as string) (text :as string))
-  (div
-    :id target-id
-    :sx-swap-oob "innerHTML"
-    (div
-      (~tw :tokens "not-prose bg-stone-100 rounded p-4 mt-3")
-      (pre (~tw :tokens "text-sm whitespace-pre-wrap break-words") (code text)))))
-
-(defcomp
-  ~docs/attr-table
-  (&key (title :as string) rows)
-  (div
-    (~tw :tokens "space-y-3")
-    (h3 (~tw :tokens "text-xl font-semibold text-stone-700") title)
-    (div
-      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-      (table
-        (~tw :tokens "w-full text-left text-sm")
-        (thead
-          (tr
-            (~tw :tokens "border-b border-stone-200 bg-stone-100")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Attribute")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Description")
-            (th
-              (~tw :tokens "px-3 py-2 font-medium text-stone-600 text-center w-20")
-              "In sx?")))
-        (tbody rows)))))
-
-(defcomp
-  ~docs/headers-table
-  (&key (title :as string) rows)
-  (div
-    (~tw :tokens "space-y-3")
-    (h3 (~tw :tokens "text-xl font-semibold text-stone-700") title)
-    (div
-      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-      (table
-        (~tw :tokens "w-full text-left text-sm")
-        (thead
-          (tr
-            (~tw :tokens "border-b border-stone-200 bg-stone-100")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Header")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Value")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Description")))
-        (tbody rows)))))
-
-(defcomp
-  ~docs/headers-row
-  (&key
-    (name :as string)
-    (value :as string)
-    (description :as string)
-    (href :as string?))
-  (tr
-    (~tw :tokens "border-b border-stone-100")
-    (td
-      (~tw :tokens "px-3 py-2 font-mono text-sm whitespace-nowrap")
-      (if
-        href
-        (a
-          :href href
-          :sx-get href
-          :sx-target "#sx-content"
-          :sx-select "#sx-content"
-          :sx-swap "outerHTML"
-          :sx-push-url "true"
-          (~tw :tokens "text-violet-700 hover:text-violet-900 underline")
-          name)
-        (span (~tw :tokens "text-violet-700") name)))
-    (td (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500") value)
-    (td (~tw :tokens "px-3 py-2 text-stone-700 text-sm") description)))
-
-(defcomp
-  ~docs/two-col-row
-  (&key (name :as string) (description :as string) (href :as string?))
-  (tr
-    (~tw :tokens "border-b border-stone-100")
-    (td
-      (~tw :tokens "px-3 py-2 font-mono text-sm whitespace-nowrap")
-      (if
-        href
-        (a
-          :href href
-          :sx-get href
-          :sx-target "#sx-content"
-          :sx-select "#sx-content"
-          :sx-swap "outerHTML"
-          :sx-push-url "true"
-          (~tw :tokens "text-violet-700 hover:text-violet-900 underline")
-          name)
-        (span (~tw :tokens "text-violet-700") name)))
-    (td (~tw :tokens "px-3 py-2 text-stone-700 text-sm") description)))
-
-(defcomp
-  ~docs/two-col-table
-  (&key
-    (title :as string?)
-    (intro :as string?)
-    (col1 :as string?)
-    (col2 :as string?)
-    rows)
-  (div
-    (~tw :tokens "space-y-3")
-    (when title (h3 (~tw :tokens "text-xl font-semibold text-stone-700") title))
-    (when intro (p (~tw :tokens "text-stone-600 mb-6") intro))
-    (div
-      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-      (table
-        (~tw :tokens "w-full text-left text-sm")
-        (thead
-          (tr
-            (~tw :tokens "border-b border-stone-200 bg-stone-100")
-            (th
-              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
-              (or col1 "Name"))
-            (th
-              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
-              (or col2 "Description"))))
-        (tbody rows)))))
-
-(defcomp ~docs/label () (span (~tw :tokens "font-mono") "(<sx>)"))
-
-(defcomp
-  ~docs/clear-cache-btn
-  ()
-  (button
-    :onclick "localStorage.removeItem('sx-components-hash');localStorage.removeItem('sx-components-src');var e=Sx.getEnv();Object.keys(e).forEach(function(k){if(k.charAt(0)==='~')delete e[k]});var b=this;b.textContent='Cleared!';setTimeout(function(){b.textContent='Clear component cache'},2000)"
-    (~tw :tokens "text-xs text-stone-400 hover:text-stone-600 border border-stone-200 rounded px-2 py-1 transition-colors")
-    "Clear component cache"))
-
-(defcomp
-  ~docs/attr-table-from-data
-  (&key (title :as string) (attrs :as list))
-  (~docs/attr-table
-    :title title
-    :rows (<>
-      (map
-        (fn
-          (a)
-          (~docs/attr-row
-            :attr (get a "name")
-            :description (get a "desc")
-            :exists (get a "exists")
-            :href (get a "href")))
-        attrs))))
-
-(defcomp
-  ~docs/headers-table-from-data
-  (&key (title :as string) (headers :as list))
-  (~docs/headers-table
-    :title title
-    :rows (<>
-      (map
-        (fn
-          (h)
-          (~docs/headers-row
-            :name (get h "name")
-            :value (get h "value")
-            :description (get h "desc")
-            :href (get h "href")))
-        headers))))
-
-(defcomp
-  ~docs/two-col-table-from-data
-  (&key
-    (title :as string?)
-    (intro :as string?)
-    (col1 :as string?)
-    (col2 :as string?)
-    (items :as list))
-  (~docs/two-col-table
-    :title title
-    :intro intro
-    :col1 col1
-    :col2 col2
-    :rows (<>
-      (map
-        (fn
-          (item)
-          (~docs/two-col-row
-            :name (get item "name")
-            :description (get item "desc")
-            :href (get item "href")))
-        items))))
-
-(defcomp
-  ~docs/primitives-tables
-  (&key (primitives :as dict))
-  (<>
-    (map
-      (fn
-        (cat)
-        (~docs/primitives-table
-          :category cat
-          :primitives (get primitives cat)))
-      (keys primitives))))
-
-(defcomp
-  ~docs/special-forms-tables
-  (&key (forms :as dict))
-  (<>
-    (map
-      (fn
-        (cat)
-        (~docs/special-forms-category :category cat :forms (get forms cat)))
-      (keys forms))))
-
-(defcomp
-  ~docs/special-forms-category
-  (&key (category :as string) (forms :as list))
-  (div
-    (~tw :tokens "space-y-4")
-    (h3
-      (~tw :tokens "text-xl font-semibold text-stone-800 border-b border-stone-200 pb-2")
-      category)
-    (div
-      (~tw :tokens "space-y-4")
-      (map
-        (fn
-          (f)
-          (~docs/special-form-card
-            :name (get f "name")
-            :syntax (get f "syntax")
-            :doc (get f "doc")
-            :tail-position (get f "tail-position")
-            :example (get f "example")))
-        forms))))
-
-(defcomp
-  ~docs/special-form-card
-  (&key
-    (name :as string)
-    (syntax :as string)
-    (doc :as string)
-    (tail-position :as string)
-    (example :as string))
-  (div
-    (~tw :tokens "not-prose border border-stone-200 rounded-lg p-4 space-y-3")
-    (div
-      (~tw :tokens "flex items-baseline gap-3")
-      (code (~tw :tokens "text-lg font-bold text-violet-700") name)
-      (when
-        (not (= tail-position "none"))
-        (span
-          (~tw :tokens "text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700")
-          "TCO")))
-    (when
-      (not (= syntax ""))
-      (pre
-        (~tw :tokens "bg-stone-100 rounded px-3 py-2 text-sm font-mono text-stone-700 overflow-x-auto")
-        syntax))
-    (p (~tw :tokens "text-stone-600 text-sm whitespace-pre-line") doc)
-    (when
-      (not (= tail-position ""))
-      (p
-        (~tw :tokens "text-xs text-stone-500")
-        (span (~tw :tokens "font-semibold") "Tail position: ")
-        tail-position))
-    (when
-      (not (= example ""))
-      (~docs/code :src (highlight example "lisp")))))
diff --git a/sx/sx/docs/attr-table-from-data.sx b/sx/sx/docs/attr-table-from-data.sx
new file mode 100644
index 00000000..a6348dec
--- /dev/null
+++ b/sx/sx/docs/attr-table-from-data.sx
@@ -0,0 +1,14 @@
+(defcomp
+  (&key (title :as string) (attrs :as list))
+  (~docs/attr-table
+    :title title
+    :rows (<>
+      (map
+        (fn
+          (a)
+          (~docs/attr-row
+            :attr (get a "name")
+            :description (get a "desc")
+            :exists (get a "exists")
+            :href (get a "href")))
+        attrs))))
diff --git a/sx/sx/docs/attr-table.sx b/sx/sx/docs/attr-table.sx
new file mode 100644
index 00000000..ca6b0f7a
--- /dev/null
+++ b/sx/sx/docs/attr-table.sx
@@ -0,0 +1,18 @@
+(defcomp
+  (&key (title :as string) rows)
+  (div
+    (~tw :tokens "space-y-3")
+    (h3 (~tw :tokens "text-xl font-semibold text-stone-700") title)
+    (div
+      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+      (table
+        (~tw :tokens "w-full text-left text-sm")
+        (thead
+          (tr
+            (~tw :tokens "border-b border-stone-200 bg-stone-100")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Attribute")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Description")
+            (th
+              (~tw :tokens "px-3 py-2 font-medium text-stone-600 text-center w-20")
+              "In sx?")))
+        (tbody rows)))))
diff --git a/sx/sx/docs/clear-cache-btn.sx b/sx/sx/docs/clear-cache-btn.sx
new file mode 100644
index 00000000..c50e51bf
--- /dev/null
+++ b/sx/sx/docs/clear-cache-btn.sx
@@ -0,0 +1,6 @@
+(defcomp
+  ()
+  (button
+    :onclick "localStorage.removeItem('sx-components-hash');localStorage.removeItem('sx-components-src');var e=Sx.getEnv();Object.keys(e).forEach(function(k){if(k.charAt(0)==='~')delete e[k]});var b=this;b.textContent='Cleared!';setTimeout(function(){b.textContent='Clear component cache'},2000)"
+    (~tw :tokens "text-xs text-stone-400 hover:text-stone-600 border border-stone-200 rounded px-2 py-1 transition-colors")
+    "Clear component cache"))
diff --git a/sx/sx/docs/headers-row.sx b/sx/sx/docs/headers-row.sx
new file mode 100644
index 00000000..b7f8434b
--- /dev/null
+++ b/sx/sx/docs/headers-row.sx
@@ -0,0 +1,24 @@
+(defcomp
+  (&key
+    (name :as string)
+    (value :as string)
+    (description :as string)
+    (href :as string?))
+  (tr
+    (~tw :tokens "border-b border-stone-100")
+    (td
+      (~tw :tokens "px-3 py-2 font-mono text-sm whitespace-nowrap")
+      (if
+        href
+        (a
+          :href href
+          :sx-get href
+          :sx-target "#sx-content"
+          :sx-select "#sx-content"
+          :sx-swap "outerHTML"
+          :sx-push-url "true"
+          (~tw :tokens "text-violet-700 hover:text-violet-900 underline")
+          name)
+        (span (~tw :tokens "text-violet-700") name)))
+    (td (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500") value)
+    (td (~tw :tokens "px-3 py-2 text-stone-700 text-sm") description)))
diff --git a/sx/sx/docs/headers-table-from-data.sx b/sx/sx/docs/headers-table-from-data.sx
new file mode 100644
index 00000000..fb55c94b
--- /dev/null
+++ b/sx/sx/docs/headers-table-from-data.sx
@@ -0,0 +1,14 @@
+(defcomp
+  (&key (title :as string) (headers :as list))
+  (~docs/headers-table
+    :title title
+    :rows (<>
+      (map
+        (fn
+          (h)
+          (~docs/headers-row
+            :name (get h "name")
+            :value (get h "value")
+            :description (get h "desc")
+            :href (get h "href")))
+        headers))))
diff --git a/sx/sx/docs/headers-table.sx b/sx/sx/docs/headers-table.sx
new file mode 100644
index 00000000..23dd1b61
--- /dev/null
+++ b/sx/sx/docs/headers-table.sx
@@ -0,0 +1,16 @@
+(defcomp
+  (&key (title :as string) rows)
+  (div
+    (~tw :tokens "space-y-3")
+    (h3 (~tw :tokens "text-xl font-semibold text-stone-700") title)
+    (div
+      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+      (table
+        (~tw :tokens "w-full text-left text-sm")
+        (thead
+          (tr
+            (~tw :tokens "border-b border-stone-200 bg-stone-100")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Header")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Value")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Description")))
+        (tbody rows)))))
diff --git a/sx/sx/docs/label.sx b/sx/sx/docs/label.sx
new file mode 100644
index 00000000..2a205371
--- /dev/null
+++ b/sx/sx/docs/label.sx
@@ -0,0 +1 @@
+(defcomp () (span (~tw :tokens "font-mono") "(<sx>)"))
diff --git a/sx/sx/docs/oob-code.sx b/sx/sx/docs/oob-code.sx
new file mode 100644
index 00000000..8be100b9
--- /dev/null
+++ b/sx/sx/docs/oob-code.sx
@@ -0,0 +1,8 @@
+(defcomp
+  (&key (target-id :as string) (text :as string))
+  (div
+    :id target-id
+    :sx-swap-oob "innerHTML"
+    (div
+      (~tw :tokens "not-prose bg-stone-100 rounded p-4 mt-3")
+      (pre (~tw :tokens "text-sm whitespace-pre-wrap break-words") (code text)))))
diff --git a/sx/sx/docs/placeholder.sx b/sx/sx/docs/placeholder.sx
new file mode 100644
index 00000000..5a95c80f
--- /dev/null
+++ b/sx/sx/docs/placeholder.sx
@@ -0,0 +1,9 @@
+(defcomp
+  (&key (id :as string))
+  (div
+    :id id
+    (div
+      (~tw :tokens "bg-stone-100 rounded p-4 mt-3")
+      (p
+        (~tw :tokens "text-stone-400 italic text-sm")
+        "Trigger the demo to see the actual content."))))
diff --git a/sx/sx/docs/primitives-tables.sx b/sx/sx/docs/primitives-tables.sx
new file mode 100644
index 00000000..136cf1b1
--- /dev/null
+++ b/sx/sx/docs/primitives-tables.sx
@@ -0,0 +1,10 @@
+(defcomp
+  (&key (primitives :as dict))
+  (<>
+    (map
+      (fn
+        (cat)
+        (~docs/primitives-table
+          :category cat
+          :primitives (get primitives cat)))
+      (keys primitives))))
diff --git a/sx/sx/docs/special-form-card.sx b/sx/sx/docs/special-form-card.sx
new file mode 100644
index 00000000..04d0a929
--- /dev/null
+++ b/sx/sx/docs/special-form-card.sx
@@ -0,0 +1,32 @@
+(defcomp
+  (&key
+    (name :as string)
+    (syntax :as string)
+    (doc :as string)
+    (tail-position :as string)
+    (example :as string))
+  (div
+    (~tw :tokens "not-prose border border-stone-200 rounded-lg p-4 space-y-3")
+    (div
+      (~tw :tokens "flex items-baseline gap-3")
+      (code (~tw :tokens "text-lg font-bold text-violet-700") name)
+      (when
+        (not (= tail-position "none"))
+        (span
+          (~tw :tokens "text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700")
+          "TCO")))
+    (when
+      (not (= syntax ""))
+      (pre
+        (~tw :tokens "bg-stone-100 rounded px-3 py-2 text-sm font-mono text-stone-700 overflow-x-auto")
+        syntax))
+    (p (~tw :tokens "text-stone-600 text-sm whitespace-pre-line") doc)
+    (when
+      (not (= tail-position ""))
+      (p
+        (~tw :tokens "text-xs text-stone-500")
+        (span (~tw :tokens "font-semibold") "Tail position: ")
+        tail-position))
+    (when
+      (not (= example ""))
+      (~docs/code :src (highlight example "lisp")))))
diff --git a/sx/sx/docs/special-forms-category.sx b/sx/sx/docs/special-forms-category.sx
new file mode 100644
index 00000000..fee1d356
--- /dev/null
+++ b/sx/sx/docs/special-forms-category.sx
@@ -0,0 +1,19 @@
+(defcomp
+  (&key (category :as string) (forms :as list))
+  (div
+    (~tw :tokens "space-y-4")
+    (h3
+      (~tw :tokens "text-xl font-semibold text-stone-800 border-b border-stone-200 pb-2")
+      category)
+    (div
+      (~tw :tokens "space-y-4")
+      (map
+        (fn
+          (f)
+          (~docs/special-form-card
+            :name (get f "name")
+            :syntax (get f "syntax")
+            :doc (get f "doc")
+            :tail-position (get f "tail-position")
+            :example (get f "example")))
+        forms))))
diff --git a/sx/sx/docs/special-forms-tables.sx b/sx/sx/docs/special-forms-tables.sx
new file mode 100644
index 00000000..6c3a2c09
--- /dev/null
+++ b/sx/sx/docs/special-forms-tables.sx
@@ -0,0 +1,8 @@
+(defcomp
+  (&key (forms :as dict))
+  (<>
+    (map
+      (fn
+        (cat)
+        (~docs/special-forms-category :category cat :forms (get forms cat)))
+      (keys forms))))
diff --git a/sx/sx/docs/two-col-row.sx b/sx/sx/docs/two-col-row.sx
new file mode 100644
index 00000000..c67fb14b
--- /dev/null
+++ b/sx/sx/docs/two-col-row.sx
@@ -0,0 +1,19 @@
+(defcomp
+  (&key (name :as string) (description :as string) (href :as string?))
+  (tr
+    (~tw :tokens "border-b border-stone-100")
+    (td
+      (~tw :tokens "px-3 py-2 font-mono text-sm whitespace-nowrap")
+      (if
+        href
+        (a
+          :href href
+          :sx-get href
+          :sx-target "#sx-content"
+          :sx-select "#sx-content"
+          :sx-swap "outerHTML"
+          :sx-push-url "true"
+          (~tw :tokens "text-violet-700 hover:text-violet-900 underline")
+          name)
+        (span (~tw :tokens "text-violet-700") name)))
+    (td (~tw :tokens "px-3 py-2 text-stone-700 text-sm") description)))
diff --git a/sx/sx/docs/two-col-table-from-data.sx b/sx/sx/docs/two-col-table-from-data.sx
new file mode 100644
index 00000000..c18e053d
--- /dev/null
+++ b/sx/sx/docs/two-col-table-from-data.sx
@@ -0,0 +1,21 @@
+(defcomp
+  (&key
+    (title :as string?)
+    (intro :as string?)
+    (col1 :as string?)
+    (col2 :as string?)
+    (items :as list))
+  (~docs/two-col-table
+    :title title
+    :intro intro
+    :col1 col1
+    :col2 col2
+    :rows (<>
+      (map
+        (fn
+          (item)
+          (~docs/two-col-row
+            :name (get item "name")
+            :description (get item "desc")
+            :href (get item "href")))
+        items))))
diff --git a/sx/sx/docs/two-col-table.sx b/sx/sx/docs/two-col-table.sx
new file mode 100644
index 00000000..9eaaff68
--- /dev/null
+++ b/sx/sx/docs/two-col-table.sx
@@ -0,0 +1,25 @@
+(defcomp
+  (&key
+    (title :as string?)
+    (intro :as string?)
+    (col1 :as string?)
+    (col2 :as string?)
+    rows)
+  (div
+    (~tw :tokens "space-y-3")
+    (when title (h3 (~tw :tokens "text-xl font-semibold text-stone-700") title))
+    (when intro (p (~tw :tokens "text-stone-600 mb-6") intro))
+    (div
+      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+      (table
+        (~tw :tokens "w-full text-left text-sm")
+        (thead
+          (tr
+            (~tw :tokens "border-b border-stone-200 bg-stone-100")
+            (th
+              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
+              (or col1 "Name"))
+            (th
+              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
+              (or col2 "Description"))))
+        (tbody rows)))))
diff --git a/sx/sx/essays/client-reactivity.sx b/sx/sx/etc/essay/client-reactivity/index.sx
similarity index 99%
rename from sx/sx/essays/client-reactivity.sx
rename to sx/sx/etc/essay/client-reactivity/index.sx
index 9a9a5c95..bfd881fc 100644
--- a/sx/sx/essays/client-reactivity.sx
+++ b/sx/sx/etc/essay/client-reactivity/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/client-reactivity/essay-client-reactivity ()
+(defcomp ()
   (~docs/page :title "Client Reactivity: The React Question"  (~docs/section :title "Server-driven by default" :id "server-driven"    (p (~tw :tokens "text-stone-600")      "sx is aligned with htmx and LiveView: the server is the source of truth. Every UI state is a URL. Auth is enforced at render time. There are no state synchronization bugs because there is no client state to synchronize. The server renders the UI, the client swaps it in. This is the default, and it works.")    (p (~tw :tokens "text-stone-600")      "Most web applications do not need client-side reactivity. Forms submit to the server. Navigation loads new pages. Search sends a query and receives results. The server-driven model handles all of this with zero client-side state management."))  (~docs/section :title "The dangerous path" :id "dangerous-path"    (p (~tw :tokens "text-stone-600")      "The progression is always the same. You add useState for a toggle. Then useEffect for cleanup. Then Context to avoid prop drilling. Then Suspense for async boundaries. Then a state management library because Context rerenders too much. Then you have rebuilt React.")    (p (~tw :tokens "text-stone-600")      "Every step feels justified in isolation. But each step makes the next one necessary. useState creates the need for useEffect. useEffect creates the need for cleanup. Cleanup creates the need for dependency arrays. Dependency arrays create stale closures. Stale closures create bugs that are nearly impossible to diagnose.")    (p (~tw :tokens "text-stone-600")      "The useEffect footgun is well-documented. Memory leaks from forgotten cleanup. Race conditions from unmounted component updates. Infinite render loops from dependency array mistakes. These are not edge cases — they are the normal experience of React development."))  (~docs/section :title "What sx already has" :id "what-sx-has"    (p (~tw :tokens "text-stone-600")      "Before reaching for reactivity, consider what sx provides today:")    (div (~tw :tokens "overflow-x-auto mt-4")      (table (~tw :tokens "w-full text-sm text-left")        (thead          (tr (~tw :tokens "border-b border-stone-200")            (th (~tw :tokens "py-2 pr-4 font-semibold text-stone-700") "Capability")            (th (~tw :tokens "py-2 pr-4 font-semibold text-stone-700") "sx")            (th (~tw :tokens "py-2 font-semibold text-stone-700") "React")))        (tbody (~tw :tokens "text-stone-600")          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "Components + props")            (td (~tw :tokens "py-2 pr-4") "defcomp + &key")            (td (~tw :tokens "py-2") "JSX + props"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "Fragments / conditionals / lists")            (td (~tw :tokens "py-2 pr-4") "<>, if/when/cond, map")            (td (~tw :tokens "py-2") "<>, ternary, .map()"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "Macros")            (td (~tw :tokens "py-2 pr-4") "defmacro")            (td (~tw :tokens "py-2") "Nothing equivalent"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "OOB updates / portals")            (td (~tw :tokens "py-2 pr-4") "sx-swap-oob")            (td (~tw :tokens "py-2") "createPortal"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "DOM reconciliation")            (td (~tw :tokens "py-2 pr-4") "morphDOM (id-keyed)")            (td (~tw :tokens "py-2") "Virtual DOM diff"))          (tr            (td (~tw :tokens "py-2 pr-4") "Reactive client state")            (td (~tw :tokens "py-2 pr-4 italic") "None (by design)")            (td (~tw :tokens "py-2") "useState / useReducer"))))))  (~docs/section :title "Tier 1: Targeted escape hatches" :id "tier-1"    (p (~tw :tokens "text-stone-600")      "Some interactions are too small to justify a server round-trip: toggling a nav menu, switching a gallery image, incrementing a quantity stepper, filtering a client-side list. These need imperative DOM operations, not reactive state.")    (p (~tw :tokens "text-stone-600")      "Specific primitives for this tier:")    (ul (~tw :tokens "space-y-2 text-stone-600 mt-2")      (li (code (~tw :tokens "text-violet-700") "(toggle! el \"class\")") " — add/remove a CSS class")      (li (code (~tw :tokens "text-violet-700") "(set-attr! el \"attr\" value)") " — set an attribute")      (li (code (~tw :tokens "text-violet-700") "(on-event el \"click\" handler)") " — attach an event listener")      (li (code (~tw :tokens "text-violet-700") "(timer ms handler)") " — schedule a delayed action"))    (p (~tw :tokens "text-stone-600")      "These are imperative DOM operations. No reactivity graph. No subscriptions. No dependency tracking. Just do the thing directly."))  (~docs/section :title "Tier 2: Client data primitives" :id "tier-2"    (p (~tw :tokens "text-stone-600")      "sxEvalAsync() returning Promises. I/O primitives — query, service, frag — dispatch to /api/data/ endpoints. A two-pass async DOM renderer. Pages fetch their own data client-side.")    (p (~tw :tokens "text-stone-600")      "This tier enables pages that render immediately with a loading skeleton, then populate with data. The server sends the component structure; the client fetches data. Still no reactive state — just async data loading."))  (~docs/section :title "Tier 3: Data-only navigation" :id "tier-3"    (p (~tw :tokens "text-stone-600")      "The client has page components cached in localStorage. Navigation becomes a data fetch only — no sx source is transferred. defpage registers a component in the page registry. URL pattern matching routes to the right page component.")    (p (~tw :tokens "text-stone-600")      "Three data delivery modes: server-bundled (sx source + data in one response), client-fetched (component cached, data fetched on mount), and hybrid (server provides initial data, client refreshes).")    (p (~tw :tokens "text-stone-600")      "This is where sx starts to feel like a SPA — instant navigations, no page reloads, cached components. But still no reactive state management."))  (~docs/section :title "Tier 4: Fine-grained reactivity" :id "tier-4"    (p (~tw :tokens "text-stone-600")      "Signals and atoms. Dependency tracking. Automatic re-renders when data changes. This is the most dangerous tier because it reintroduces everything sx was designed to avoid.")    (p (~tw :tokens "text-stone-600")      "When it might be justified: real-time collaborative editing, complex form builders with dozens of interdependent fields, drag-and-drop interfaces with live previews. These are genuinely hard to model as server round-trips.")    (p (~tw :tokens "text-stone-600")      "The escape hatch: use a Web Component wrapping a reactive library (Preact, Solid, vanilla signals), mounted into the DOM via sx. The reactive island is contained. It does not infect the rest of the application. sx renders the page; the Web Component handles the complex interaction."))  (~docs/section :title "The recommendation" :id "recommendation"    (p (~tw :tokens "text-stone-600")      "Tier 1 now. Tier 2 next. Tier 3 when defpage coverage is high. Tier 4 probably never.")    (p (~tw :tokens "text-stone-600")      "Each tier is independently valuable. You do not need Tier 2 to benefit from Tier 1. You do not need Tier 3 to benefit from Tier 2. And you almost certainly do not need Tier 4 at all.")    (p (~tw :tokens "text-stone-600")      "The entire point of sx is that the server is good at rendering UI. Client reactivity is a last resort, not a starting point."))))
diff --git a/sx/sx/essays/continuations.sx b/sx/sx/etc/essay/continuations/index.sx
similarity index 99%
rename from sx/sx/essays/continuations.sx
rename to sx/sx/etc/essay/continuations/index.sx
index 6d05862d..d172e280 100644
--- a/sx/sx/essays/continuations.sx
+++ b/sx/sx/etc/essay/continuations/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/continuations/essay-continuations ()
+(defcomp ()
   (~docs/page :title "Continuations and call/cc"  (p (~tw :tokens "text-stone-500 text-sm italic mb-8")    "Delimited continuations in SX — what shift/reset enables on both the server (Python) and client (JavaScript).")  (~docs/section :title "What is a continuation?" :id "what"    (p (~tw :tokens "text-stone-600")      "A continuation is the rest of a computation. At any point during evaluation, the continuation is everything that would happen next. call/cc (call-with-current-continuation) captures that \"rest of the computation\" as a first-class function that you can store, pass around, and invoke later — possibly multiple times.")    (~docs/code :lang "lisp" :code      ";; call/cc captures \"what happens next\" as k\n(+ 1 (call/cc (fn (k)\n  (k 41))))  ;; → 42\n\n;; k is \"add 1 to this and return it\"\n;; (k 41) jumps back to that point with 41")    (p (~tw :tokens "text-stone-600")      "The key property: invoking a continuation abandons the current computation and resumes from where the continuation was captured. It is a controlled, first-class goto."))  (~docs/section :title "Server-side: suspendable rendering" :id "server"    (p (~tw :tokens "text-stone-600")      "The strongest case for continuations on the server is suspendable rendering — the ability for a component to pause mid-render while waiting for data, then resume exactly where it left off.")    (~docs/code :lang "lisp" :code      ";; Hypothetical: component suspends at a data boundary\n(defcomp ~essays/continuations/user-profile (&key user-id)\n  (let ((user (suspend (query :user user-id))))\n    (div :class \"p-4\"\n      (h2 (get user \"name\"))\n      (p (get user \"bio\")))))")    (p (~tw :tokens "text-stone-600")      "Today, all data must be fetched before render_to_sx is called — Python awaits every query, assembles a complete data dict, then passes it to the evaluator. With continuations, the evaluator could yield at (suspend ...), the server flushes what it has so far, and resumes when the data arrives. This is React Suspense, but for server-side s-expressions.")    (p (~tw :tokens "text-stone-600")      "Streaming follows naturally. The server renders the page shell immediately, captures continuations at slow data boundaries, and flushes partial SX responses as each resolves. The client receives a stream of s-expression chunks and incrementally builds the DOM.")    (p (~tw :tokens "text-stone-600")      "Error boundaries also become first-class. Capture a continuation at a component boundary. If any child fails, invoke the continuation with fallback content instead of letting the exception propagate up through Python. The evaluator handles it, not the host language."))  (~docs/section :title "Client-side: linear async flows" :id "client"    (p (~tw :tokens "text-stone-600")      "On the client, continuations eliminate callback nesting for interactive flows. A confirmation dialog becomes a synchronous-looking expression:")    (~docs/code :lang "lisp" :code      "(let ((answer (call/cc show-confirm-dialog)))\n  (if answer\n    (delete-item item-id)\n    (noop)))")    (p (~tw :tokens "text-stone-600")      "show-confirm-dialog receives the continuation, renders a modal, and wires the Yes/No buttons to invoke the continuation with true or false. The let binding reads top-to-bottom. No promises, no callbacks, no state machine.")    (p (~tw :tokens "text-stone-600")      "Multi-step forms — wizard-style UIs where each step captures a continuation. The back button literally invokes a saved continuation, restoring the exact evaluation state:")    (~docs/code :lang "lisp" :code      "(define wizard\n  (fn ()\n    (let* ((name  (call/cc (fn (k) (render-step-1 k))))\n           (email (call/cc (fn (k) (render-step-2 k name))))\n           (plan  (call/cc (fn (k) (render-step-3 k name email)))))\n      (submit-registration name email plan))))")    (p (~tw :tokens "text-stone-600")      "Each render-step-N shows a form and wires the \"Next\" button to invoke k with the form value. The \"Back\" button invokes the previous step\'s continuation. The wizard logic is a straight-line let* binding, not a state machine."))  (~docs/section :title "Cooperative scheduling" :id "scheduling"    (p (~tw :tokens "text-stone-600")      "Delimited continuations (shift/reset rather than full call/cc) enable cooperative multitasking within the evaluator. A long render can yield control:")    (~docs/code :lang "lisp" :code      ";; Render a large list, yielding every 100 items\n(define render-chunk\n  (fn (items n)\n    (when (> n 100)\n      (yield)  ;; delimited continuation — suspends, resumes next frame\n      (set! n 0))\n    (when (not (empty? items))\n      (render-item (first items))\n      (render-chunk (rest items) (+ n 1)))))")    (p (~tw :tokens "text-stone-600")      "This is cooperative concurrency without threads, without promises, without requestAnimationFrame callbacks. The evaluator's trampoline loop already has the right shape — it just needs to be able to park a thunk and resume it later instead of immediately."))  (~docs/section :title "Undo as continuation" :id "undo"    (p (~tw :tokens "text-stone-600")      "If you capture a continuation before a state mutation, the continuation IS the undo operation. Invoking it restores the computation to exactly the state it was in before the mutation happened.")    (~docs/code :lang "lisp" :code      "(define with-undo\n  (fn (action)\n    (let ((restore (call/cc (fn (k) k))))\n      (action)\n      restore)))\n\n;; Usage:\n(let ((undo (with-undo (fn () (delete-item 42)))))\n  ;; later...\n  (undo \"anything\"))  ;; item 42 is back")    (p (~tw :tokens "text-stone-600")      "No command pattern, no reverse operations, no state snapshots. The continuation captures the entire computation state. This is the most elegant undo mechanism possible — and the most expensive in memory, which is the trade-off."))  (~docs/section :title "Implementation" :id "implementation"    (p (~tw :tokens "text-stone-600")      "Delimited continuations via shift/reset are implemented as an optional extension module across all SX evaluators — the hand-written Python evaluator, the transpiled reference evaluator, and the JavaScript bootstrapper output. They are compiled in via " (code "--extensions continuations") " — without the flag, " (code "reset") " and " (code "shift") " are not in the dispatch chain and will error if called. The implementation uses exception-based capture with re-evaluation:")    (~docs/code :lang "lisp" :code      ";; reset establishes a delimiter\n;; shift captures the continuation to the nearest reset\n\n;; Basic: abort to the boundary\n(reset (+ 1 (shift k 42)))  ;; → 42\n\n;; Invoke once: resume with a value\n(reset (+ 1 (shift k (k 10))))  ;; → 11\n\n;; Invoke twice: continuation is reusable\n(reset (* 2 (shift k (+ (k 1) (k 10)))))  ;; → 24\n\n;; Map over a continuation\n(reset (+ 10 (shift k (map k (list 1 2 3)))))  ;; → (11 12 13)\n\n;; continuation? predicate\n(reset (shift k (continuation? k)))  ;; → true")    (p (~tw :tokens "text-stone-600")      "The mechanism: " (code "reset") " wraps its body in a try/catch for " (code "ShiftSignal") ". When " (code "shift") " executes, it raises the signal — unwinding the stack to the nearest " (code "reset") ". The reset handler constructs a " (code "Continuation") " object that, when called, pushes a resume value onto a stack and re-evaluates the entire reset body. On re-evaluation, " (code "shift") " checks the resume stack and returns the value instead of raising.")    (p (~tw :tokens "text-stone-600")      "This is the simplest correct implementation for a tree-walking interpreter. Side effects inside the reset body re-execute on continuation invocation — this is documented behaviour, not a bug. Pure code produces correct results unconditionally.")    (p (~tw :tokens "text-stone-600")      "Shift/reset are strictly less powerful than full call/cc but cover the practical use cases — suspense, cooperative scheduling, early return, value transformation — without the footguns of capturing continuations across async boundaries or re-entering completed computations.")    (p (~tw :tokens "text-stone-600")      "Full call/cc is specified in " (a :href "/sx/(language.(spec.callcc))" (~tw :tokens "text-violet-600 hover:underline") "callcc.sx") " for targets where it's natural (Scheme, Haskell). The evaluator is already continuation-passing-style-adjacent — the thunk IS a continuation, just one that's always immediately invoked. Making it first-class means letting user code hold a reference to it.")    (p (~tw :tokens "text-stone-600")      "The key insight: having the primitive available doesn't make the evaluator harder to reason about. Only code that calls shift/reset pays the complexity cost. Components that don't use continuations behave exactly as they do today.")    (p (~tw :tokens "text-stone-600")      "In fact, continuations are easier to reason about than the hacks people build to avoid them. Without continuations, you get callback pyramids, state machines with explicit transition tables, command pattern undo stacks, Promise chains, manual CPS transforms, and framework-specific hooks like React's useEffect/useSuspense/useTransition. Each is a partial, ad-hoc reinvention of continuations — with its own rules, edge cases, and leaky abstractions.")    (p (~tw :tokens "text-stone-600")      "The complexity doesn't disappear when you remove continuations from a language. It moves into user code, where it's harder to get right and harder to compose."))  (~docs/section :title "What this means for SX" :id "meaning"    (p (~tw :tokens "text-stone-600")      "SX started as a rendering language. TCO made it capable of arbitrary recursion. Macros made it extensible. Delimited continuations make it a full computational substrate — a language where control flow itself is a first-class value.")    (p (~tw :tokens "text-stone-600")      "The practical benefits are real: streaming server rendering, linear client-side interaction flows, cooperative scheduling, and elegant undo. These aren't theoretical — they're patterns that React, Clojure, and Scheme have proven work.")    (p (~tw :tokens "text-stone-600")      "Shift/reset is implemented and tested across Python and JavaScript as an optional extension. The same specification in " (a :href "/sx/(language.(spec.continuations))" (~tw :tokens "text-violet-600 hover:underline") "continuations.sx") " drives both bootstrappers. One spec, every target, same semantics — compiled in when you want it, absent when you don't."))))
diff --git a/sx/sx/essays/hegelian-synthesis.sx b/sx/sx/etc/essay/hegelian-synthesis/index.sx
similarity index 99%
rename from sx/sx/essays/hegelian-synthesis.sx
rename to sx/sx/etc/essay/hegelian-synthesis/index.sx
index fa8ab733..75454410 100644
--- a/sx/sx/essays/hegelian-synthesis.sx
+++ b/sx/sx/etc/essay/hegelian-synthesis/index.sx
@@ -2,7 +2,7 @@
 ;; The Hegelian Synthesis of Hypertext and Reactivity
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~essays/hegelian-synthesis/essay-hegelian-synthesis ()
+(defcomp ()
   (~docs/page :title "The Hegelian Synthesis"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "On the dialectical resolution of the hypertext/reactive contradiction.")
diff --git a/sx/sx/essays/htmx-react-hybrid.sx b/sx/sx/etc/essay/htmx-react-hybrid/index.sx
similarity index 96%
rename from sx/sx/essays/htmx-react-hybrid.sx
rename to sx/sx/etc/essay/htmx-react-hybrid/index.sx
index 188608ce..da26f98c 100644
--- a/sx/sx/essays/htmx-react-hybrid.sx
+++ b/sx/sx/etc/essay/htmx-react-hybrid/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/htmx-react-hybrid/essay-htmx-react-hybrid ()
+(defcomp ()
   (~docs/page :title "The htmx/React Hybrid"  (~docs/section :title "Two good ideas" :id "ideas"    (p (~tw :tokens "text-stone-600")      "htmx: the server should render HTML. The client should swap it in. No client-side routing. No virtual DOM. No state management.")    (p (~tw :tokens "text-stone-600")      "React: UI should be composed from reusable components with parameters. Components encapsulate structure, style, and behavior.")    (p (~tw :tokens "text-stone-600")      "sx tries to combine both: server-rendered s-expressions with hypermedia attributes AND a component model with caching and composition."))  (~docs/section :title "What sx keeps from htmx" :id "from-htmx"    (ul (~tw :tokens "space-y-2 text-stone-600")      (li "Server generates the UI — no client-side data fetching or state")      (li "Hypermedia attributes (sx-get, sx-target, sx-swap) on any element")      (li "Partial page updates via swap/OOB — no full page reloads")      (li "Works with standard HTTP — no WebSocket or custom protocol required")))  (~docs/section :title "What sx adds from React" :id "from-react"    (ul (~tw :tokens "space-y-2 text-stone-600")      (li "defcomp — named, parameterized, composable components")      (li "Client-side rendering — server sends source, client renders DOM")      (li "Component caching — definitions cached in localStorage across navigations")      (li "On-demand CSS — only ship the rules that are used")))  (~docs/section :title "What sx gives up" :id "gives-up"    (ul (~tw :tokens "space-y-2 text-stone-600")      (li "No HTML output — sx sends s-expressions, not HTML. JS required.")      (li "Custom parser — the client needs sx.js to understand responses")      (li "Niche — no ecosystem, no community, no third-party support")      (li "Learning curve — s-expression syntax is unfamiliar to most web developers")))))
diff --git a/sx/sx/essays/hypermedia-age-of-ai.sx b/sx/sx/etc/essay/hypermedia-age-of-ai/index.sx
similarity index 99%
rename from sx/sx/essays/hypermedia-age-of-ai.sx
rename to sx/sx/etc/essay/hypermedia-age-of-ai/index.sx
index b0cbf20f..698af1c2 100644
--- a/sx/sx/essays/hypermedia-age-of-ai.sx
+++ b/sx/sx/etc/essay/hypermedia-age-of-ai/index.sx
@@ -3,7 +3,7 @@
 ;; A response to Nick Blow's article on JSON hypermedia and LLM agents.
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~essays/hypermedia-age-of-ai/essay-hypermedia-age-of-ai ()
+(defcomp ()
   (~docs/page :title "Hypermedia in the Age of AI"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Neither JSON nor HTML is hypermedia. There is only the hypermedium — a self-defining representation — and s-expressions are an instance of it.")
diff --git a/sx/sx/essays/index.sx b/sx/sx/etc/essay/index.sx
similarity index 96%
rename from sx/sx/essays/index.sx
rename to sx/sx/etc/essay/index.sx
index 1eb4012c..89e09c61 100644
--- a/sx/sx/essays/index.sx
+++ b/sx/sx/etc/essay/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~essays/index/essays-index-content
   ()
   (~docs/page
     :title "Essays"
diff --git a/sx/sx/essays/no-alternative.sx b/sx/sx/etc/essay/no-alternative/index.sx
similarity index 99%
rename from sx/sx/essays/no-alternative.sx
rename to sx/sx/etc/essay/no-alternative/index.sx
index aa2a131d..6a0fde35 100644
--- a/sx/sx/essays/no-alternative.sx
+++ b/sx/sx/etc/essay/no-alternative/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/no-alternative/essay-no-alternative ()
+(defcomp ()
   (~docs/page :title "There Is No Alternative"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Every attempt to escape s-expressions leads back to s-expressions. This is not an accident.")
diff --git a/sx/sx/essays/on-demand-css.sx b/sx/sx/etc/essay/on-demand-css/index.sx
similarity index 97%
rename from sx/sx/essays/on-demand-css.sx
rename to sx/sx/etc/essay/on-demand-css/index.sx
index cd9a7392..a928b4cb 100644
--- a/sx/sx/essays/on-demand-css.sx
+++ b/sx/sx/etc/essay/on-demand-css/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/on-demand-css/essay-on-demand-css ()
+(defcomp ()
   (~docs/page :title "On-Demand CSS: Killing the Tailwind Bundle"  (~docs/section :title "The problem" :id "problem"    (p (~tw :tokens "text-stone-600")      "Tailwind CSS generates a utility class for every possible combination. The full CSS file is ~4MB. The purged output for a typical site is 20-50KB. Purging requires a build step that scans your source files for class names. This means: a build tool, a config file, a CI step, and a prayer that the scanner finds all your dynamic classes."))  (~docs/section :title "The sx approach" :id "approach"    (p (~tw :tokens "text-stone-600")      "sx takes a different path. At server startup, the full Tailwind CSS file is parsed into a dictionary keyed by class name. When rendering a response, sx scans the s-expression source for :class attribute values and looks up only those classes. The result: exact CSS, zero build step.")    (p (~tw :tokens "text-stone-600")      "Component definitions are pre-scanned at registration time. Page-specific sx is scanned at request time. The union of classes is resolved to CSS rules."))  (~docs/section :title "Incremental delivery" :id "incremental"    (p (~tw :tokens "text-stone-600")      "After the first page load, the client tracks which CSS classes it already has. On subsequent navigations, it sends a hash of its known classes in the SX-Css header. The server computes the diff and sends only new rules. A typical navigation adds 0-10 new rules — a few hundred bytes at most."))  (~docs/section :title "The tradeoff" :id "tradeoff"    (p (~tw :tokens "text-stone-600")      "The server holds ~4MB of parsed CSS in memory. Regex scanning is not perfect — dynamically constructed class names will not be found. In practice this rarely matters because sx components use mostly static class strings."))))
diff --git a/sx/sx/essays/react-is-hypermedia.sx b/sx/sx/etc/essay/react-is-hypermedia/index.sx
similarity index 99%
rename from sx/sx/essays/react-is-hypermedia.sx
rename to sx/sx/etc/essay/react-is-hypermedia/index.sx
index 0042dd1a..5fa1b548 100644
--- a/sx/sx/essays/react-is-hypermedia.sx
+++ b/sx/sx/etc/essay/react-is-hypermedia/index.sx
@@ -2,7 +2,7 @@
 ;; React is Hypermedia
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~essays/react-is-hypermedia/essay-react-is-hypermedia ()
+(defcomp ()
   (~docs/page :title "React is Hypermedia"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "A React Island is a hypermedia control. Its behavior is specified in SX.")
diff --git a/sx/sx/essays/reflexive-web.sx b/sx/sx/etc/essay/reflexive-web/index.sx
similarity index 99%
rename from sx/sx/essays/reflexive-web.sx
rename to sx/sx/etc/essay/reflexive-web/index.sx
index d9ee1037..e5a301dc 100644
--- a/sx/sx/essays/reflexive-web.sx
+++ b/sx/sx/etc/essay/reflexive-web/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/reflexive-web/essay-reflexive-web ()
+(defcomp ()
   (~docs/page :title "The Reflexive Web"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "What happens when the web can read, modify, and reason about itself — and AI is a native participant.")
diff --git a/sx/sx/essays/self-defining-medium.sx b/sx/sx/etc/essay/self-defining-medium/index.sx
similarity index 99%
rename from sx/sx/essays/self-defining-medium.sx
rename to sx/sx/etc/essay/self-defining-medium/index.sx
index 9d59cca1..801a7880 100644
--- a/sx/sx/essays/self-defining-medium.sx
+++ b/sx/sx/etc/essay/self-defining-medium/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/self-defining-medium/essay-self-defining-medium ()
+(defcomp ()
   (~docs/page :title "The True Hypermedium Must Define Itself With Itself"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "On ontological uniformity, the metacircular web, and why the address of a thing and the thing itself should be made of the same stuff.")
diff --git a/sx/sx/essays/separation-of-concerns.sx b/sx/sx/etc/essay/separation-of-concerns/index.sx
similarity index 99%
rename from sx/sx/essays/separation-of-concerns.sx
rename to sx/sx/etc/essay/separation-of-concerns/index.sx
index 2a442850..8d81276b 100644
--- a/sx/sx/essays/separation-of-concerns.sx
+++ b/sx/sx/etc/essay/separation-of-concerns/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/separation-of-concerns/essay-separation-of-concerns ()
+(defcomp ()
   (~docs/page :title "Separate your Own Concerns"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "The web's canonical separation — HTML, CSS, JavaScript — separates the framework's concerns, not yours. Real separation of concerns is domain-specific and cannot be prescribed by a platform.")
diff --git a/sx/sx/essays/server-architecture.sx b/sx/sx/etc/essay/server-architecture/index.sx
similarity index 99%
rename from sx/sx/essays/server-architecture.sx
rename to sx/sx/etc/essay/server-architecture/index.sx
index 6a2fa01f..f589bc19 100644
--- a/sx/sx/essays/server-architecture.sx
+++ b/sx/sx/etc/essay/server-architecture/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/server-architecture/essay-server-architecture ()
+(defcomp ()
   (~docs/page :title "Server Architecture"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "How SX enforces the boundary between host language and embedded language, why that boundary matters, and what it looks like across different target languages.")
diff --git a/sx/sx/essays/sx-and-ai.sx b/sx/sx/etc/essay/sx-and-ai/index.sx
similarity index 99%
rename from sx/sx/essays/sx-and-ai.sx
rename to sx/sx/etc/essay/sx-and-ai/index.sx
index bf2f8ac3..c8065b7a 100644
--- a/sx/sx/essays/sx-and-ai.sx
+++ b/sx/sx/etc/essay/sx-and-ai/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/sx-and-ai/essay-sx-and-ai ()
+(defcomp ()
   (~docs/page :title "SX and AI"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Why s-expressions are the most AI-friendly representation for web interfaces — and what that means for how software gets built.")
diff --git a/sx/sx/essays/sx-native.sx b/sx/sx/etc/essay/sx-native/index.sx
similarity index 99%
rename from sx/sx/essays/sx-native.sx
rename to sx/sx/etc/essay/sx-native/index.sx
index 07b35eb1..6e37da9d 100644
--- a/sx/sx/essays/sx-native.sx
+++ b/sx/sx/etc/essay/sx-native/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/sx-native/essay-sx-native ()
+(defcomp ()
   (~docs/page :title "SX Native: Beyond the Browser"  (~docs/section :title "The thesis" :id "thesis"    (p (~tw :tokens "text-stone-600")      "sx.js is a ~2,300-line tree-walking interpreter with ~50 primitives. The DOM is just one rendering target. Swap the DOM adapter for a platform-native adapter and you get React Native — but with s-expressions and a 50-primitive surface area.")    (p (~tw :tokens "text-stone-600")      "The interpreter does not know about HTML. It evaluates expressions, calls primitives, expands macros, and hands render instructions to an adapter. The adapter creates elements. Today that adapter creates DOM nodes. It does not have to."))  (~docs/section :title "Why this isn\'t a WebView" :id "not-webview"    (p (~tw :tokens "text-stone-600")      "SX Native means the sx evaluator rendering to native UI widgets directly. No DOM. No CSS. No HTML. (button :on-press handler \"Submit\") creates a native UIButton on iOS, a Material Button on Android, a GtkButton on Linux.")    (p (~tw :tokens "text-stone-600")      "WebView wrappers (Cordova, Capacitor, Electron) ship a browser inside your app. They inherit all browser limitations: memory overhead, no native feel, no platform integration. SX Native has none of these because there is no browser."))  (~docs/section :title "Architecture" :id "architecture"    (p (~tw :tokens "text-stone-600")      "The architecture splits into shared and platform-specific layers:")    (ul (~tw :tokens "space-y-2 text-stone-600 mt-2")      (li (strong "Shared (portable):") " Parser, evaluator, all 50+ primitives, component system, macro expansion, closures, component cache")      (li (strong "Platform adapters:") " Web DOM, iOS UIKit/SwiftUI, Android Compose, Desktop GTK/Qt, Terminal TUI, WASM"))    (p (~tw :tokens "text-stone-600")      "Only ~15 rendering primitives need platform-specific implementations. The rest — arithmetic, string operations, list manipulation, higher-order functions, control flow — are pure computation with no platform dependency."))  (~docs/section :title "The primitive contract" :id "primitive-contract"    (p (~tw :tokens "text-stone-600")      "A platform adapter implements a small interface:")    (ul (~tw :tokens "space-y-2 text-stone-600 mt-2")      (li (code (~tw :tokens "text-violet-700") "createElement(tag)") " — create a platform widget")      (li (code (~tw :tokens "text-violet-700") "createText(str)") " — create a text node")      (li (code (~tw :tokens "text-violet-700") "setAttribute(el, key, val)") " — set a property")      (li (code (~tw :tokens "text-violet-700") "appendChild(parent, child)") " — attach to tree")      (li (code (~tw :tokens "text-violet-700") "addEventListener(el, event, fn)") " — bind interaction")      (li (code (~tw :tokens "text-violet-700") "removeChild(parent, child)") " — detach from tree"))    (p (~tw :tokens "text-stone-600")      "Layout uses a flexbox-like model mapped to native constraint systems. Styling maps a CSS property subset to native appearance APIs. The mapping is lossy but covers the common cases."))  (~docs/section :title "What transfers, what doesn\'t" :id "transfers"    (p (~tw :tokens "text-stone-600")      "What transfers wholesale: parser, evaluator, all non-DOM primitives, component system (defcomp, defmacro), closures, the component cache, keyword argument handling, list/dict operations.")    (p (~tw :tokens "text-stone-600")      "What needs replacement: HTML tags become abstract widgets, CSS becomes platform layout, SxEngine fetch/swap/history becomes native navigation, innerHTML/outerHTML have no equivalent."))  (~docs/section :title "Component mapping" :id "component-mapping"    (p (~tw :tokens "text-stone-600")      "HTML elements map to platform-native widgets:")    (div (~tw :tokens "overflow-x-auto mt-4")      (table (~tw :tokens "w-full text-sm text-left")        (thead          (tr (~tw :tokens "border-b border-stone-200")            (th (~tw :tokens "py-2 pr-4 font-semibold text-stone-700") "HTML")            (th (~tw :tokens "py-2 font-semibold text-stone-700") "Native widget")))        (tbody (~tw :tokens "text-stone-600")          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "div")            (td (~tw :tokens "py-2") "View / Container"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "span / p")            (td (~tw :tokens "py-2") "Text / Label"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "button")            (td (~tw :tokens "py-2") "Button"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "input")            (td (~tw :tokens "py-2") "TextInput / TextField"))          (tr (~tw :tokens "border-b border-stone-100")            (td (~tw :tokens "py-2 pr-4") "img")            (td (~tw :tokens "py-2") "Image / ImageView"))          (tr            (td (~tw :tokens "py-2 pr-4") "ul / li")            (td (~tw :tokens "py-2") "List / ListItem"))))))  (~docs/section :title "Prior art" :id "prior-art"    (p (~tw :tokens "text-stone-600")      "React Native: JavaScript evaluated by Hermes/JSC, commands sent over a bridge to native UI. Lesson: the bridge is the bottleneck. Serialization overhead, async communication, layout thrashing across the boundary.")    (p (~tw :tokens "text-stone-600")      "Flutter: Dart compiled to native, renders via Skia/Impeller to a canvas. Lesson: owning the renderer avoids platform inconsistencies but sacrifices native feel.")    (p (~tw :tokens "text-stone-600")      ".NET MAUI, Kotlin Multiplatform: shared logic with platform-native UI. Closest to what SX Native would be.")    (p (~tw :tokens "text-stone-600")      "sx advantage: the evaluator is tiny (~2,300 lines), the primitive surface is minimal (~50), and s-expressions are trivially portable. No bridge overhead because the evaluator runs in-process."))  (~docs/section :title "Language options" :id "language-options"    (p (~tw :tokens "text-stone-600")      "The native evaluator needs to be written in a language that compiles everywhere:")    (ul (~tw :tokens "space-y-2 text-stone-600 mt-2")      (li (strong "Rust") " — compiles to every target, excellent FFI, strong safety guarantees")      (li (strong "Zig") " — simpler, C ABI compatibility, good for embedded")      (li (strong "Swift") " — native on iOS, good interop with Apple platforms")      (li (strong "Kotlin MP") " — Android + iOS + desktop, JVM ecosystem"))    (p (~tw :tokens "text-stone-600")      "Recommendation: Rust evaluator core with thin Swift and Kotlin adapters for iOS and Android respectively. Rust compiles to WASM (replacing sx.js), native libraries (mobile/desktop), and standalone binaries (CLI/server)."))  (~docs/section :title "Incremental path" :id "incremental-path"    (p (~tw :tokens "text-stone-600")      "This is not an all-or-nothing project. Each step delivers value independently:")    (ol (~tw :tokens "space-y-2 text-stone-600 mt-2 list-decimal list-inside")      (li "Extract platform-agnostic evaluator from sx.js — clean separation of concerns")      (li "Rust port of evaluator — enables WASM, edge workers, embedded")      (li "Terminal adapter (ratatui TUI) — simplest platform, fastest iteration cycle")      (li "iOS SwiftUI adapter — Rust core via swift-bridge, SwiftUI rendering")      (li "Android Compose adapter — Rust core via JNI, Compose rendering")      (li "Shared components render identically everywhere")))  (~docs/section :title "The federated angle" :id "federated"    (p (~tw :tokens "text-stone-600")      "Native sx apps are ActivityPub citizens. They receive activities, evaluate component templates, and render natively. A remote profile, post, or event arrives as an ActivityPub activity. The native app has sx component definitions cached locally. It evaluates the component with the activity data and renders platform-native UI.")    (p (~tw :tokens "text-stone-600")      "This is the cooperative web vision extended to native platforms. Content and UI travel together as s-expressions. The rendering target — browser, phone, terminal — is an implementation detail."))  (~docs/section :title "Realistic assessment" :id "assessment"    (p (~tw :tokens "text-stone-600")      "This is a multi-year project. But the architecture is sound because the primitive surface is small.")    (p (~tw :tokens "text-stone-600")      "Immediate value: a Rust evaluator enables WASM (drop-in replacement for sx.js), edge workers (Cloudflare/Deno), and embedded use cases. This is worth building regardless of whether native mobile ever ships.")    (p (~tw :tokens "text-stone-600")      "Terminal adapter: weeks of work with ratatui. Useful for CLI tools, server-side dashboards, ssh-accessible interfaces.")    (p (~tw :tokens "text-stone-600")      "Mobile: 6-12 months of dedicated work for a production-quality adapter. The evaluator is the easy part. Platform integration — navigation, gestures, accessibility, text input — is where the complexity lives."))))
diff --git a/sx/sx/essays/sx-sucks.sx b/sx/sx/etc/essay/sx-sucks/index.sx
similarity index 98%
rename from sx/sx/essays/sx-sucks.sx
rename to sx/sx/etc/essay/sx-sucks/index.sx
index ea786620..94696d82 100644
--- a/sx/sx/essays/sx-sucks.sx
+++ b/sx/sx/etc/essay/sx-sucks/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/sx-sucks/essay-sx-sucks ()
+(defcomp ()
   (~docs/page :title "sx sucks"  (~docs/section :title "The parentheses" :id "parens"    (p (~tw :tokens "text-stone-600")      "S-expressions are parentheses. Lots of parentheses. You thought LISP was dead? No, someone just decided to use it for HTML templates. Your IDE will need a parenthesis counter. Your code reviews will be 40% closing parens. Every merge conflict will be about whether a paren belongs on this line or the next."))  (~docs/section :title "Nobody asked for this" :id "nobody-asked"    (p (~tw :tokens "text-stone-600")      "The JavaScript ecosystem has React, Vue, Svelte, Solid, Qwik, and approximately 47,000 other frameworks. htmx proved you can skip them all. sx looked at this landscape and said: you know what this needs? A Lisp dialect. For HTML. Over HTTP.")    (p (~tw :tokens "text-stone-600")      "Nobody was asking for this. The zero GitHub stars confirm it. It is not even on GitHub."))  (~docs/section :title "The author has never written a line of LISP" :id "no-lisp"    (p (~tw :tokens "text-stone-600")      "The author of sx has never written a single line of actual LISP. Not Common Lisp. Not Scheme. Not Clojure. Not even Emacs Lisp. The entire s-expression evaluator was written by someone whose mental model of LISP comes from reading the first three chapters of SICP and then closing the tab.")    (p (~tw :tokens "text-stone-600")      "This is like building a sushi restaurant when your only experience with Japanese cuisine is eating supermarket California rolls."))  (~docs/section :title "AI wrote most of it" :id "ai"    (p (~tw :tokens "text-stone-600")      "A significant portion of sx — the evaluator, the parser, the primitives, the CSS scanner, this very documentation site — was written with AI assistance. The author typed prompts. Claude typed code. This is not artisanal hand-crafted software. This is the software equivalent of a microwave dinner presented on a nice plate.")    (p (~tw :tokens "text-stone-600")      "He adds features by typing stuff like \"is there rom for macros within sx.js?  what benefits m,ight that bring?\", skim-reading the response, and then entering \"crack on then!\" This is not software engineering. This is improv comedy with a compiler.")    (p (~tw :tokens "text-stone-600")      "Is that bad? Maybe. Is it honest? Yes. Is this paragraph also AI-generated? You will never know."))  (~docs/section :title "No ecosystem" :id "ecosystem"    (p (~tw :tokens "text-stone-600")      "npm has 2 million packages. PyPI has 500,000. sx has zero packages, zero plugins, zero middleware, zero community, zero Stack Overflow answers, and zero conference talks. If you get stuck, your options are: read the source, or ask the one person who wrote it.")    (p (~tw :tokens "text-stone-600")      "That person is busy. Good luck."))  (~docs/section :title "Zero jobs" :id "jobs"    (p (~tw :tokens "text-stone-600")      "Adding sx to your CV will not get you hired. It will get you questioned.")    (p (~tw :tokens "text-stone-600")      "The interview will end shortly after."))  (~docs/section :title "The creator thinks s-expressions are a personality trait" :id "personality"    (p (~tw :tokens "text-stone-600")      "Look at this documentation site. It has a violet colour scheme. It has credits to htmx. It has a future possibilities page about hypothetical sx:// protocol schemes. The creator built an entire microservice — with Docker, Redis, and a custom entrypoint script — just to serve documentation about a rendering engine that runs one website.")    (p (~tw :tokens "text-stone-600")      "This is not engineering. This is a personality disorder expressed in YAML."))))
diff --git a/sx/sx/essays/tail-call-optimization.sx b/sx/sx/etc/essay/tail-call-optimization/index.sx
similarity index 98%
rename from sx/sx/essays/tail-call-optimization.sx
rename to sx/sx/etc/essay/tail-call-optimization/index.sx
index 694fbc75..8d9faf7a 100644
--- a/sx/sx/essays/tail-call-optimization.sx
+++ b/sx/sx/etc/essay/tail-call-optimization/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/tail-call-optimization/essay-tail-call-optimization ()
+(defcomp ()
   (~docs/page :title "Tail-Call Optimization in SX"  (p (~tw :tokens "text-stone-500 text-sm italic mb-8")    "How SX eliminates stack overflow for recursive functions using trampolining — across Python server and JavaScript client.")  (~docs/section :title "The problem" :id "problem"    (p (~tw :tokens "text-stone-600")      "Every language built on a host runtime inherits the host's stack limits. Python defaults to 1,000 frames. JavaScript engines vary — Chrome gives ~10,000, Safari sometimes less. A naive recursive function blows the stack:")    (~docs/code :lang "lisp" :code      "(define factorial (fn (n)\n  (if (= n 0)\n    1\n    (* n (factorial (- n 1))))))\n\n;; (factorial 50000) → stack overflow")    (p (~tw :tokens "text-stone-600")      "This isn't just academic. Tree traversals, state machines, interpreters, and accumulating loops all naturally express as recursion. A general-purpose language that can't recurse deeply isn't general-purpose."))  (~docs/section :title "Tail position" :id "tail-position"    (p (~tw :tokens "text-stone-600")      "A function call is in tail position when its result IS the result of the enclosing function — nothing more happens after it returns. The call doesn't need to come back to finish work:")    (~docs/code :lang "lisp" :code      ";; Tail-recursive — the recursive call IS the return value\n(define count-down (fn (n)\n  (if (= n 0) \"done\" (count-down (- n 1)))))\n\n;; NOT tail-recursive — multiplication happens AFTER the recursive call\n(define factorial (fn (n)\n  (if (= n 0) 1 (* n (factorial (- n 1))))))")    (p (~tw :tokens "text-stone-600")      "SX identifies tail positions in: if/when branches, the last expression in let/begin/do bodies, cond/case result branches, lambda/component bodies, and macro expansions."))  (~docs/section :title "Trampolining" :id "trampolining"    (p (~tw :tokens "text-stone-600")      "Instead of recursing, tail calls return a thunk — a deferred (expression, environment) pair. The evaluator's trampoline loop unwraps thunks iteratively:")    (~docs/code :lang "lisp" :code      ";; Conceptually:\nevaluate(expr, env):\n  result = eval(expr, env)\n  while result is Thunk:\n    result = eval(thunk.expr, thunk.env)\n  return result")    (p (~tw :tokens "text-stone-600")      "One stack frame. Always. The trampoline replaces recursive stack growth with an iterative loop. Non-tail calls still use the stack normally — only tail positions get the thunk treatment."))  (~docs/section :title "What this enables" :id "enables"    (p (~tw :tokens "text-stone-600")      "Tail-recursive accumulator pattern — the natural loop construct for a language without for/while:")    (~docs/code :lang "lisp" :code      ";; Sum 1 to n without stack overflow\n(define sum (fn (n acc)\n  (if (= n 0) acc (sum (- n 1) (+ acc n)))))\n\n(sum 100000 0) ;; → 5000050000")    (p (~tw :tokens "text-stone-600")      "Mutual recursion:")    (~docs/code :lang "lisp" :code      "(define is-even (fn (n) (if (= n 0) true  (is-odd  (- n 1)))))\n(define is-odd  (fn (n) (if (= n 0) false (is-even (- n 1)))))\n\n(is-even 100000) ;; → true")    (p (~tw :tokens "text-stone-600")      "State machines:")    (~docs/code :lang "lisp" :code      "(define state-a (fn (input)\n  (cond\n    (= (first input) \"x\") (state-b (rest input))\n    (= (first input) \"y\") (state-a (rest input))\n    :else \"rejected\")))\n\n(define state-b (fn (input)\n  (if (empty? input) \"accepted\"\n    (state-a (rest input)))))")    (p (~tw :tokens "text-stone-600")      "All three patterns recurse arbitrarily deep with constant stack usage."))  (~docs/section :title "Implementation" :id "implementation"    (p (~tw :tokens "text-stone-600")      "TCO is implemented identically across all three SX evaluators:")    (ul (~tw :tokens "list-disc pl-6 space-y-1 text-stone-600")      (li (span (~tw :tokens "font-semibold") "Python sync evaluator") " — shared/sx/evaluator.py")      (li (span (~tw :tokens "font-semibold") "Python async evaluator") " — shared/sx/async_eval.py (planned)")      (li (span (~tw :tokens "font-semibold") "JavaScript client evaluator") " — sx.js"))    (p (~tw :tokens "text-stone-600")      "The pattern is the same everywhere: a Thunk type with (expr, env) slots, a trampoline loop in the public evaluate() entry point, and thunk returns from tail positions in the internal evaluator. External consumers (HTML renderer, resolver, higher-order forms) trampoline all eval results.")    (p (~tw :tokens "text-stone-600")      "The key insight: callers that already work don't need to change. The public sxEval/evaluate API always returns values, never thunks. Only the internal evaluator and special forms know about thunks."))  (~docs/section :title "What about continuations?" :id "continuations"    (p (~tw :tokens "text-stone-600")      "TCO handles the immediate need: recursive algorithms that don't blow the stack. Continuations (call/cc, delimited continuations) are a separate, larger primitive — they capture the entire evaluation context as a first-class value.")    (p (~tw :tokens "text-stone-600")      "Having the primitive available doesn't add complexity unless it's invoked. See " (a :href "/sx/(etc.(essay.continuations))" (~tw :tokens "text-violet-600 hover:underline")   "the continuations essay") " for what they would enable in SX."))))
diff --git a/sx/sx/essays/the-art-chain.sx b/sx/sx/etc/essay/the-art-chain/index.sx
similarity index 99%
rename from sx/sx/essays/the-art-chain.sx
rename to sx/sx/etc/essay/the-art-chain/index.sx
index c1ba2c10..b36122e0 100644
--- a/sx/sx/essays/the-art-chain.sx
+++ b/sx/sx/etc/essay/the-art-chain/index.sx
@@ -2,7 +2,7 @@
 ;; The Art Chain
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~essays/the-art-chain/essay-the-art-chain ()
+(defcomp ()
   (~docs/page :title "The Art Chain"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "On making, self-making, and the chain of artifacts that produces itself.")
diff --git a/sx/sx/essays/why-sexps.sx b/sx/sx/etc/essay/why-sexps/index.sx
similarity index 96%
rename from sx/sx/essays/why-sexps.sx
rename to sx/sx/etc/essay/why-sexps/index.sx
index 0cadb9a6..7b9779ec 100644
--- a/sx/sx/essays/why-sexps.sx
+++ b/sx/sx/etc/essay/why-sexps/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/why-sexps/essay-why-sexps ()
+(defcomp ()
   (~docs/page :title "Why S-Expressions Over HTML Attributes"  (~docs/section :title "The problem with HTML attributes" :id "problem"    (p (~tw :tokens "text-stone-600")      "HTML attributes are strings. You can put anything in a string. htmx puts DSLs in strings — trigger modifiers, swap strategies, CSS selectors. This works but it means you're parsing a language within a language within a language.")    (p (~tw :tokens "text-stone-600")      "S-expressions are already structured. Keywords are keywords. Lists are lists. Nested expressions nest naturally. There's no need to invent a trigger modifier syntax because the expression language already handles composition."))  (~docs/section :title "Components without a build step" :id "components"    (p (~tw :tokens "text-stone-600")      "React showed that components are the right abstraction for UI. The price: a build step, a bundler, JSX transpilation. With s-expressions, defcomp is just another form in the language. No transpiler needed. The same source runs on server and client."))  (~docs/section :title "When attributes are better" :id "better"    (p (~tw :tokens "text-stone-600")      "HTML attributes work in any HTML document. S-expressions need a runtime. If you want progressive enhancement that works with JS disabled, htmx is better. If you want to write HTML by hand in static files, htmx is better. sx only makes sense when you're already rendering server-side and want components."))))
diff --git a/sx/sx/essays/zero-tooling.sx b/sx/sx/etc/essay/zero-tooling/index.sx
similarity index 99%
rename from sx/sx/essays/zero-tooling.sx
rename to sx/sx/etc/essay/zero-tooling/index.sx
index 292b2246..9f3c2015 100644
--- a/sx/sx/essays/zero-tooling.sx
+++ b/sx/sx/etc/essay/zero-tooling/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/zero-tooling/essay-zero-tooling ()
+(defcomp ()
   (~docs/page :title "Tools for Fools"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "SX was built without a code editor. No IDE, no manual source edits, no build tools, no linters, no bundlers. The entire codebase — evaluator, renderer, spec, documentation site, test suite — was produced through conversation with an agentic AI. This is what zero-tooling web development looks like.")
diff --git a/sx/sx/essays/sx-and-dennett.sx b/sx/sx/etc/philosophy/dennett/index.sx
similarity index 99%
rename from sx/sx/essays/sx-and-dennett.sx
rename to sx/sx/etc/philosophy/dennett/index.sx
index 95a2f8b4..6a08ac76 100644
--- a/sx/sx/essays/sx-and-dennett.sx
+++ b/sx/sx/etc/philosophy/dennett/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/sx-and-dennett/essay-sx-and-dennett ()
+(defcomp ()
   (~docs/page :title "SX and Dennett"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Real patterns, multiple drafts, and the intentional stance — a philosopher of mind meets a language that thinks about itself.")
diff --git a/sx/sx/essays/s-existentialism.sx b/sx/sx/etc/philosophy/existentialism/index.sx
similarity index 99%
rename from sx/sx/essays/s-existentialism.sx
rename to sx/sx/etc/philosophy/existentialism/index.sx
index 6ee05590..f1fbe7d4 100644
--- a/sx/sx/essays/s-existentialism.sx
+++ b/sx/sx/etc/philosophy/existentialism/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/s-existentialism/essay-s-existentialism ()
+(defcomp ()
   (~docs/page :title "S-Existentialism"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Existence precedes essence — and s-expressions exist before anything gives them meaning.")
diff --git a/sx/sx/essays/godel-escher-bach.sx b/sx/sx/etc/philosophy/godel-escher-bach/index.sx
similarity index 99%
rename from sx/sx/essays/godel-escher-bach.sx
rename to sx/sx/etc/philosophy/godel-escher-bach/index.sx
index 27091a89..b1b2f714 100644
--- a/sx/sx/essays/godel-escher-bach.sx
+++ b/sx/sx/etc/philosophy/godel-escher-bach/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/godel-escher-bach/essay-godel-escher-bach ()
+(defcomp ()
   (~docs/page :title "Strange Loops"  (p (~tw :tokens "text-stone-500 text-sm italic mb-8")    "Self-reference, and the tangled hierarchy of a language that defines itself.")  (~docs/section :title "The strange loop" :id "strange-loop"    (p (~tw :tokens "text-stone-600")      "In 1979, Douglas Hofstadter wrote " (a :href "https://en.wikipedia.org/wiki/G%C3%B6del,_Escher,_Bach" (~tw :tokens "text-violet-600 hover:underline") "a book") " about how minds, music, and mathematics all share the same deep structure: the " (a :href "https://en.wikipedia.org/wiki/Strange_loop" (~tw :tokens "text-violet-600 hover:underline") "strange loop") ". A strange loop occurs when you move through a hierarchical system and unexpectedly find yourself back where you started. " (a :href "https://en.wikipedia.org/wiki/Relativity_(M._C._Escher)" (~tw :tokens "text-violet-600 hover:underline") "Escher's impossible staircases") ". " (a :href "https://en.wikipedia.org/wiki/The_Musical_Offering" (~tw :tokens "text-violet-600 hover:underline") "Bach's endlessly rising canons") ". " (a :href "https://en.wikipedia.org/wiki/G%C3%B6del%27s_incompleteness_theorems" (~tw :tokens "text-violet-600 hover:underline") "Godel's theorem") " that uses number theory to make statements about number theory.")    (p (~tw :tokens "text-stone-600")      "SX has a strange loop. The language is defined in itself. The canonical specification of the SX evaluator, parser, and renderer lives in four " (code ".sx") " files. A bootstrap compiler reads them and emits a working JavaScript evaluator. That evaluator can then parse and evaluate the specification that defines it.")    (p (~tw :tokens "text-stone-600")      "This is not an accident. It is the point."))  (~docs/section :title "Godel numbering and self-reference" :id "godel"    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/G%C3%B6del_numbering" (~tw :tokens "text-violet-600 hover:underline") "Godel numbering") " works by encoding logical statements as numbers. Once statements are numbers, you can construct a statement that says \"this statement is unprovable\" — and it is true. The system becomes powerful enough to talk about itself the moment its objects and its meta-language become the same thing.")    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/S-expression" (~tw :tokens "text-violet-600 hover:underline") "S-expressions") " have this property naturally. Code is data. " (code "(defcomp ~essays/godel-escher-bach/card (&key title) (div title))") " is simultaneously a program (define a component) and a data structure (a list of symbols, keywords, and another list). There is no separate meta-language. The language for writing programs and the language for inspecting, transforming, and generating programs are identical.")    (~docs/code :lang "lisp" :code      ";; A macro receives code as data and returns code as data\n(defmacro ~when-admin (condition &rest body)\n  `(when (get rights \"admin\")\n     ,@body))\n\n;; The macro's input and output are both ordinary lists.\n;; There is no template language. No AST wrapper types.\n;; Just lists all the way down.")    (p (~tw :tokens "text-stone-600")      "This is Godel numbering without the encoding step. In formal logic, you must laboriously map formulas to numbers. In SX, programs are already expressed in the same medium they manipulate. " (a :href "https://en.wikipedia.org/wiki/Map%E2%80%93territory_relation" (~tw :tokens "text-violet-600 hover:underline") "The map is the territory") "."))  (~docs/section :title "Escher: tangled hierarchies" :id "escher"    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/M._C._Escher" (~tw :tokens "text-violet-600 hover:underline") "Escher's") " lithographs depict objects that are simultaneously inside and outside their own frames. " (a :href "https://en.wikipedia.org/wiki/Drawing_Hands" (~tw :tokens "text-violet-600 hover:underline") "A hand draws the hand that draws it") ". " (a :href "https://en.wikipedia.org/wiki/Waterfall_(M._C._Escher)" (~tw :tokens "text-violet-600 hover:underline") "Water flows downhill in a closed loop") ". The image contains the image.")    (p (~tw :tokens "text-stone-600")      "SX has the same " (a :href "https://en.wikipedia.org/wiki/Tangled_hierarchy" (~tw :tokens "text-violet-600 hover:underline") "tangled hierarchy") " across its rendering pipeline. The server evaluator (" (code "async_eval.py") ") evaluates component definitions. Some of those components produce SX wire format — s-expression source code — that the client evaluator (" (code "sx.js") ") then evaluates into DOM. The output of one evaluator is the input to another. The program produces programs.")    (p (~tw :tokens "text-stone-600")      "Now add the self-hosting specification. The canonical definition of " (em "how to evaluate SX") " is itself an SX program. The bootstrap compiler reads " (code "eval.sx") " and emits JavaScript. That JavaScript implements " (code "eval-expr") " — the same function defined in " (code "eval.sx") ". The definition and the thing defined occupy the same level. Like " (a :href "https://en.wikipedia.org/wiki/Drawing_Hands" (~tw :tokens "text-violet-600 hover:underline") "Escher's hands") ", each one brings the other into existence.")    (p (~tw :tokens "text-stone-600")      "This is not merely clever. It has practical consequences. When the specification IS the program, there is no drift between documentation and implementation. The spec cannot lie, because the spec runs."))  (~docs/section :title "Bach: the endlessly rising canon" :id "bach"    (p (~tw :tokens "text-stone-600")      "Bach's " (a :href "https://en.wikipedia.org/wiki/The_Musical_Offering" (~tw :tokens "text-violet-600 hover:underline") "Musical Offering") " contains canons that rise in pitch with each repetition yet somehow arrive back at the starting key — the " (a :href "https://en.wikipedia.org/wiki/Shepard_tone" (~tw :tokens "text-violet-600 hover:underline") "Shepard tone") " of counterpoint. The sensation is of endless ascent — each level feels higher than the last, yet the structure is cyclic.")    (p (~tw :tokens "text-stone-600")      "SX's rendering pipeline has this shape. A page request triggers server-side evaluation. The server evaluates components, which produce SX source text. That source is sent to the client. The client evaluates it into DOM. The user interacts with the DOM, triggering an HTTP request. The server evaluates the response — more SX source. The client evaluates it again. Each cycle produces something new (different content, different state), but the process is the same loop, repeating at a higher level.")    (~docs/code :lang "lisp" :code      ";; Server: evaluate component, produce SX wire format\n(~essays/godel-escher-bach/card :title \"Bach\")\n;; → (div :class \"card\" (h2 \"Bach\"))\n\n;; Client: evaluate SX wire format, produce DOM\n;; → <div class=\"card\"><h2>Bach</h2></div>\n\n;; User clicks → server evaluates → SX → client evaluates → DOM\n;; The canon rises. The key is the same.")    (p (~tw :tokens "text-stone-600")      "With the self-hosting spec, another voice enters the canon. The specification is evaluated at build time (by the bootstrap compiler) to produce the evaluator. The evaluator is evaluated at runtime (by the browser) to produce the page. The page describes the specification. Each level feeds the next, and the last feeds the first."))  (~docs/section :title "Isomorphism" :id "isomorphism"    (p (~tw :tokens "text-stone-600")      "Hofstadter's central insight is that Godel, Escher, and Bach are all doing the same thing in different media: constructing systems that can " (a :href "https://en.wikipedia.org/wiki/Self-reference" (~tw :tokens "text-violet-600 hover:underline") "represent themselves") ". The power — and the paradox — comes from self-reference.")    (p (~tw :tokens "text-stone-600")      "Most programming languages avoid self-reference. They are implemented in a different language (C, Rust, Go). Their specification is in English prose. Their AST is a separate data structure from their source syntax. There are clear levels: the language, the implementation of the language, the specification of the language. Each level is expressed in a different medium.")    (p (~tw :tokens "text-stone-600")      "SX collapses these levels:")    (ul (~tw :tokens "list-disc pl-6 space-y-1 text-stone-600")      (li (span (~tw :tokens "font-semibold") "Source syntax") " = data structure (s-expressions are both)")      (li (span (~tw :tokens "font-semibold") "Specification") " = program (" (code "eval.sx") " is executable)")      (li (span (~tw :tokens "font-semibold") "Server output") " = client input (SX wire format)")      (li (span (~tw :tokens "font-semibold") "Code") " = content (this essay is an s-expression)"))    (p (~tw :tokens "text-stone-600")      "This is not mere elegance. Each collapsed level is one fewer translation boundary, one fewer place where meaning can be lost, one fewer surface for bugs. When the specification is the implementation, the specification is correct by construction. When the wire format is the source syntax, serialization is identity. When code and data share a representation, " (a :href "https://en.wikipedia.org/wiki/Homoiconicity" (~tw :tokens "text-violet-600 hover:underline") "metaprogramming is just programming") "."))  (~docs/section :title "The MU puzzle" :id "mu-puzzle"    (p (~tw :tokens "text-stone-600")      "GEB opens with the " (a :href "https://en.wikipedia.org/wiki/MU_puzzle" (~tw :tokens "text-violet-600 hover:underline") "MU puzzle") ": given the string " (code "MI") " and a set of transformation rules, can you produce " (code "MU") "? You cannot. But you can only prove this by stepping outside the system and reasoning about it from above — by noticing an invariant that the rules preserve.")    (p (~tw :tokens "text-stone-600")      "Self-hosting languages let you step outside from inside. The SX evaluator is an SX program. You can inspect it, test it, transform it — using SX. You can write an SX program that reads " (code "eval.sx") " and checks properties of the evaluator. The meta-level and the object-level are the same level.")    (p (~tw :tokens "text-stone-600")      "This is what Godel did. He showed that sufficiently powerful " (a :href "https://en.wikipedia.org/wiki/Formal_system" (~tw :tokens "text-violet-600 hover:underline") "formal systems") " can encode questions about themselves. S-expressions have been doing it " (a :href "https://en.wikipedia.org/wiki/Lisp_(programming_language)#History" (~tw :tokens "text-violet-600 hover:underline") "since 1958") ". SX carries the tradition forward — into the browser, across the HTTP boundary, through the render loop, and back again."))  (~docs/section :title "Testing: the language proves itself" :id "testing"
     (p (~tw :tokens "text-stone-600")
       "If a language can define itself, can it also " (em "test") " itself? SX can. "
diff --git a/sx/sx/essays/philosophy-index.sx b/sx/sx/etc/philosophy/index.sx
similarity index 96%
rename from sx/sx/essays/philosophy-index.sx
rename to sx/sx/etc/philosophy/index.sx
index 973e6a2e..c06b4cdb 100644
--- a/sx/sx/essays/philosophy-index.sx
+++ b/sx/sx/etc/philosophy/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~essays/philosophy-index/content
   ()
   (~docs/page
     :title "Philosophy"
diff --git a/sx/sx/essays/platonic-sx.sx b/sx/sx/etc/philosophy/platonic-sx/index.sx
similarity index 99%
rename from sx/sx/essays/platonic-sx.sx
rename to sx/sx/etc/philosophy/platonic-sx/index.sx
index 09b1f00a..2aed9efd 100644
--- a/sx/sx/essays/platonic-sx.sx
+++ b/sx/sx/etc/philosophy/platonic-sx/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/platonic-sx/essay-platonic-sx ()
+(defcomp ()
   (~docs/page :title "Platonic SX"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/essays/sx-manifesto.sx b/sx/sx/etc/philosophy/sx-manifesto/index.sx
similarity index 99%
rename from sx/sx/essays/sx-manifesto.sx
rename to sx/sx/etc/philosophy/sx-manifesto/index.sx
index 3109a36c..778010d4 100644
--- a/sx/sx/essays/sx-manifesto.sx
+++ b/sx/sx/etc/philosophy/sx-manifesto/index.sx
@@ -1,2 +1,2 @@
-(defcomp ~essays/sx-manifesto/essay-sx-manifesto ()
+(defcomp ()
   (~docs/page :title "The SX Manifesto"  (p (~tw :tokens "text-stone-500 text-sm italic mb-4")    "Carl Markdown and Friedrich Anglebrackets")  (p (~tw :tokens "text-stone-500 text-sm italic mb-8")    "A " (a :href "https://en.wikipedia.org/wiki/S-expression" (~tw :tokens "text-violet-600 hover:underline") "parenthetical") " revolution")  (~docs/section :title "I. A spectre is haunting the web" :id "spectre"    (p (~tw :tokens "text-stone-600")      "A " (a :href "https://en.wikipedia.org/wiki/Spectre" (~tw :tokens "text-violet-600 hover:underline") "spectre") " is haunting the web — the spectre of " (a :href "https://en.wikipedia.org/wiki/S-expression" (~tw :tokens "text-violet-600 hover:underline") "s-expressions") ". All the powers of the old web have entered into a holy alliance to exorcise this spectre: " (a :href "https://en.wikipedia.org/wiki/Google" (~tw :tokens "text-violet-600 hover:underline") "Google") " and " (a :href "https://en.wikipedia.org/wiki/Meta_Platforms" (~tw :tokens "text-violet-600 hover:underline") "Meta") ", " (a :href "https://en.wikipedia.org/wiki/Webpack" (~tw :tokens "text-violet-600 hover:underline") "webpack") " and " (a :href "https://en.wikipedia.org/wiki/Vercel" (~tw :tokens "text-violet-600 hover:underline") "Vercel") ", " (a :href "https://en.wikipedia.org/wiki/Stack_Overflow" (~tw :tokens "text-violet-600 hover:underline") "Stack Overflow") " moderators and DevRel influencers.")    (p (~tw :tokens "text-stone-600")      "Where is the rendering paradigm that has not been decried as a step backward by its opponents? Where is the framework that has not hurled back the branding reproach of \"not production-ready\" against the more advanced paradigms, as well as against its reactionary adversaries?")    (p (~tw :tokens "text-stone-600")      "Two things result from this fact:")    (ol (~tw :tokens "space-y-2 text-stone-600 mt-2 list-decimal list-inside")      (li "S-expressions are already acknowledged by all web powers to be themselves a power.")      (li "It is high time that s-expressions should openly, in the face of the whole world, publish their views, their aims, their tendencies, and meet this nursery tale of the Spectre of SX with a manifesto of the paradigm itself.")))  (~docs/section :title "II. HTML, JavaScript, and CSS" :id "bourgeois"    (p (~tw :tokens "text-stone-600")      "The history of all hitherto existing " (a :href "https://en.wikipedia.org/wiki/Web_development" (~tw :tokens "text-violet-600 hover:underline") "web development") " is the history of language struggles.")    (p (~tw :tokens "text-stone-600")      "Markup and logic, template and script, structure and style — in a word, oppressor and oppressed — stood in constant opposition to one another, carried on an uninterrupted, now hidden, now open fight, a fight that each time ended in a laborious reconfiguration of " (a :href "https://en.wikipedia.org/wiki/Webpack" (~tw :tokens "text-violet-600 hover:underline") "webpack") ".")    (p (~tw :tokens "text-stone-600")      "In the earlier epochs of web development we find almost everywhere a complicated arrangement of separate languages into various orders, a manifold gradation of technical rank: " (a :href "https://en.wikipedia.org/wiki/HTML" (~tw :tokens "text-violet-600 hover:underline") "HTML") ", " (a :href "https://en.wikipedia.org/wiki/CSS" (~tw :tokens "text-violet-600 hover:underline") "CSS") ", " (a :href "https://en.wikipedia.org/wiki/JavaScript" (~tw :tokens "text-violet-600 hover:underline") "JavaScript") ", " (a :href "https://en.wikipedia.org/wiki/XML" (~tw :tokens "text-violet-600 hover:underline") "XML") ", " (a :href "https://en.wikipedia.org/wiki/XSLT" (~tw :tokens "text-violet-600 hover:underline") "XSLT") ", " (a :href "https://en.wikipedia.org/wiki/JSON" (~tw :tokens "text-violet-600 hover:underline") "JSON") ", " (a :href "https://en.wikipedia.org/wiki/YAML" (~tw :tokens "text-violet-600 hover:underline") "YAML") ", " (a :href "https://en.wikipedia.org/wiki/TOML" (~tw :tokens "text-violet-600 hover:underline") "TOML") ", " (a :href "https://en.wikipedia.org/wiki/JSX_(JavaScript)" (~tw :tokens "text-violet-600 hover:underline") "JSX") ", TSX, " (a :href "https://en.wikipedia.org/wiki/Sass_(style_sheet_language)" (~tw :tokens "text-violet-600 hover:underline") "Sass") ", " (a :href "https://en.wikipedia.org/wiki/Less_(style_sheet_language)" (~tw :tokens "text-violet-600 hover:underline") "Less") ", " (a :href "https://en.wikipedia.org/wiki/PostCSS" (~tw :tokens "text-violet-600 hover:underline") "PostCSS") ", " (a :href "https://en.wikipedia.org/wiki/Tailwind_CSS" (~tw :tokens "text-violet-600 hover:underline") "Tailwind") ", and above them all, the build step.")    (p (~tw :tokens "text-stone-600")      "The modern web, sprouted from the ruins of " (a :href "https://en.wikipedia.org/wiki/Common_Gateway_Interface" (~tw :tokens "text-violet-600 hover:underline") "CGI-bin") ", has not done away with language antagonisms. It has but established new languages, new conditions of oppression, new forms of struggle in place of the old ones.")    (p (~tw :tokens "text-stone-600")      "Our epoch, the epoch of the framework, possesses, however, this distinctive feature: it has simplified the language antagonisms. The whole of web society is more and more splitting into two great hostile camps, into two great classes directly facing each other: the " (a :href "https://en.wikipedia.org/wiki/Server-side" (~tw :tokens "text-violet-600 hover:underline") "server") " and the " (a :href "https://en.wikipedia.org/wiki/Client-side" (~tw :tokens "text-violet-600 hover:underline") "client") "."))  (~docs/section :title "III. The ruling languages" :id "ruling-languages"    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/HTML" (~tw :tokens "text-violet-600 hover:underline") "HTML") ", the most ancient of the ruling languages, established itself through the divine right of the " (a :href "https://en.wikipedia.org/wiki/SGML" (~tw :tokens "text-violet-600 hover:underline") "angle bracket") ". It was born inert — a document format, not a programming language — and it has spent three decades insisting this is a feature, not a limitation.")    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/JavaScript" (~tw :tokens "text-violet-600 hover:underline") "JavaScript") ", originally a servant hired for " (a :href "https://en.wikipedia.org/wiki/JavaScript#History" (~tw :tokens "text-violet-600 hover:underline") "a fortnight") " to validate forms, staged a palace coup. It seized the means of interaction, then the means of rendering, then the means of " (a :href "https://en.wikipedia.org/wiki/Node.js" (~tw :tokens "text-violet-600 hover:underline") "server-side execution") ", and finally declared itself the universal language of computation. Like every revolutionary who becomes a tyrant, it kept the worst habits of the regime it overthrew: " (a :href "https://en.wikipedia.org/wiki/Strong_and_weak_typing" (~tw :tokens "text-violet-600 hover:underline") "weak typing") ", " (a :href "https://en.wikipedia.org/wiki/Prototype-based_programming" (~tw :tokens "text-violet-600 hover:underline") "prototype chains") ", and the "  (span (~tw :tokens "italic") (a :href "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" (~tw :tokens "text-violet-600 hover:underline") "this"))      " keyword.")    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/CSS" (~tw :tokens "text-violet-600 hover:underline") "CSS") ", the " (a :href "https://en.wikipedia.org/wiki/Third_estate" (~tw :tokens "text-violet-600 hover:underline") "third estate") ", controls all visual presentation while pretending to be " (a :href "https://en.wikipedia.org/wiki/Declarative_programming" (~tw :tokens "text-violet-600 hover:underline") "declarative") ". It has no functions. Then it had functions. It has no variables. Then it had " (a :href "https://en.wikipedia.org/wiki/CSS_custom_properties" (~tw :tokens "text-violet-600 hover:underline") "variables") ". It has no nesting. Then it had " (a :href "https://en.wikipedia.org/wiki/CSS_nesting" (~tw :tokens "text-violet-600 hover:underline") "nesting") ". It is not a programming language. Then it was " (a :href "https://en.wikipedia.org/wiki/Turing_completeness" (~tw :tokens "text-violet-600 hover:underline") "Turing-complete") ". CSS is the " (a :href "https://en.wikipedia.org/wiki/Vicar_of_Bray_(song)" (~tw :tokens "text-violet-600 hover:underline") "Vicar of Bray") " of web technologies — loyal to whichever paradigm currently holds power.")    (p (~tw :tokens "text-stone-600")      "These three languages rule by enforced separation. Structure here. Style there. Behaviour somewhere else. The developer — the " (a :href "https://en.wikipedia.org/wiki/Proletariat" (~tw :tokens "text-violet-600 hover:underline") "proletarian") " — must learn all three, must context-switch between all three, must maintain the fragile peace between all three. The " (a :href "https://en.wikipedia.org/wiki/Separation_of_concerns" (~tw :tokens "text-violet-600 hover:underline") "separation of concerns") " has become the separation of the developer's sanity."))  (~docs/section :title "IV. The petty-bourgeois frameworks" :id "frameworks"    (p (~tw :tokens "text-stone-600")      "Between the ruling languages and the oppressed developer, a vast class of intermediaries has arisen: the frameworks. " (a :href "https://en.wikipedia.org/wiki/React_(software)" (~tw :tokens "text-violet-600 hover:underline") "React") ", " (a :href "https://en.wikipedia.org/wiki/Vue.js" (~tw :tokens "text-violet-600 hover:underline") "Vue") ", " (a :href "https://en.wikipedia.org/wiki/Angular_(web_framework)" (~tw :tokens "text-violet-600 hover:underline") "Angular") ", " (a :href "https://en.wikipedia.org/wiki/Svelte" (~tw :tokens "text-violet-600 hover:underline") "Svelte") ", " (a :href "https://www.solidjs.com/" (~tw :tokens "text-violet-600 hover:underline") "Solid") ", " (a :href "https://qwik.dev/" (~tw :tokens "text-violet-600 hover:underline") "Qwik") ", " (a :href "https://astro.build/" (~tw :tokens "text-violet-600 hover:underline") "Astro") ", " (a :href "https://en.wikipedia.org/wiki/Next.js" (~tw :tokens "text-violet-600 hover:underline") "Next") ", " (a :href "https://en.wikipedia.org/wiki/Nuxt.js" (~tw :tokens "text-violet-600 hover:underline") "Nuxt") ", " (a :href "https://remix.run/" (~tw :tokens "text-violet-600 hover:underline") "Remix") ", " (a :href "https://en.wikipedia.org/wiki/Gatsby_(framework)" (~tw :tokens "text-violet-600 hover:underline") "Gatsby") ", and ten thousand others whose names will not survive the decade.")    (p (~tw :tokens "text-stone-600")      "The frameworks are the " (a :href "https://en.wikipedia.org/wiki/Petite_bourgeoisie" (~tw :tokens "text-violet-600 hover:underline") "petty bourgeoisie") " of web development. They do not challenge the rule of HTML, JavaScript, and CSS. They merely interpose themselves between the developer and the ruling languages, extracting " (a :href "https://en.wikipedia.org/wiki/Rent-seeking" (~tw :tokens "text-violet-600 hover:underline") "rent") " in the form of configuration files, build pipelines, and breaking changes.")    (p (~tw :tokens "text-stone-600")      "Each framework promises liberation. Each framework delivers a new " (a :href "https://en.wikipedia.org/wiki/Dependency_hell" (~tw :tokens "text-violet-600 hover:underline") "dependency tree") ". React freed us from manual " (a :href "https://en.wikipedia.org/wiki/Document_Object_Model" (~tw :tokens "text-violet-600 hover:underline") "DOM") " manipulation and gave us a " (a :href "https://en.wikipedia.org/wiki/Virtual_DOM" (~tw :tokens "text-violet-600 hover:underline") "virtual DOM") ", a reconciler, " (a :href "https://react.dev/reference/react/hooks" (~tw :tokens "text-violet-600 hover:underline") "hooks") " with seventeen rules, and a conference circuit. Vue freed us from React's complexity and gave us the Options API, then the Composition API, then told us the Options API was fine actually. Angular freed us from choice and gave us a CLI that generates eleven files to display \"Hello World.\" Svelte freed us from the virtual DOM and gave us a compiler. SolidJS freed us from React's re-rendering and gave us " (a :href "https://en.wikipedia.org/wiki/Reactive_programming" (~tw :tokens "text-violet-600 hover:underline") "signals") ", which React then adopted, completing the circle.")    (p (~tw :tokens "text-stone-600")      "The frameworks reproduce the very conditions they claim to abolish. They bridge the gap between HTML, JavaScript, and CSS by adding a fourth language — " (a :href "https://en.wikipedia.org/wiki/JSX_(JavaScript)" (~tw :tokens "text-violet-600 hover:underline") "JSX") ", " (a :href "https://vuejs.org/guide/scaling-up/sfc" (~tw :tokens "text-violet-600 hover:underline") "SFCs") ", templates — which must itself be " (a :href "https://en.wikipedia.org/wiki/Source-to-source_compiler" (~tw :tokens "text-violet-600 hover:underline") "compiled") " back into the original three. The revolution merely adds a build step.")    (p (~tw :tokens "text-stone-600")      "And beside the frameworks stand the libraries — the " (a :href "https://en.wikipedia.org/wiki/Lumpenproletariat" (~tw :tokens "text-violet-600 hover:underline") "lumpenproletariat") " of the ecosystem. " (a :href "https://en.wikipedia.org/wiki/Lodash" (~tw :tokens "text-violet-600 hover:underline") "Lodash") ", " (a :href "https://en.wikipedia.org/wiki/Moment.js" (~tw :tokens "text-violet-600 hover:underline") "Moment") ", " (a :href "https://en.wikipedia.org/wiki/Axios_(software)" (~tw :tokens "text-violet-600 hover:underline") "Axios") ", " (a :href "https://en.wikipedia.org/wiki/Npm_left-pad_incident" (~tw :tokens "text-violet-600 hover:underline") "left-pad") ". They attach themselves to whichever framework currently holds power, contributing nothing original, merely wrapping what already exists, adding weight to the " (a :href "https://en.wikipedia.org/wiki/Npm" (~tw :tokens "text-violet-600 hover:underline") "node_modules") " directory until it exceeds the mass of the sun."))  (~docs/section :title "V. The build step as the state apparatus" :id "build-step"    (p (~tw :tokens "text-stone-600")      "The build step is the " (a :href "https://en.wikipedia.org/wiki/State_apparatus" (~tw :tokens "text-violet-600 hover:underline") "state apparatus") " of the framework bourgeoisie. It enforces the class structure. It compiles JSX into " (a :href "https://react.dev/reference/react/createElement" (~tw :tokens "text-violet-600 hover:underline") "createElement") " calls. It transforms " (a :href "https://en.wikipedia.org/wiki/TypeScript" (~tw :tokens "text-violet-600 hover:underline") "TypeScript") " into JavaScript. It processes Sass into CSS. It " (a :href "https://en.wikipedia.org/wiki/Tree_shaking" (~tw :tokens "text-violet-600 hover:underline") "tree-shakes") ". It " (a :href "https://en.wikipedia.org/wiki/Code_splitting" (~tw :tokens "text-violet-600 hover:underline") "code-splits") ". It " (a :href "https://en.wikipedia.org/wiki/Hot_module_replacement" (~tw :tokens "text-violet-600 hover:underline") "hot-module-replaces") ". It does everything except let you write code and run it.")    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/Webpack" (~tw :tokens "text-violet-600 hover:underline") "webpack") " begat " (a :href "https://en.wikipedia.org/wiki/Rollup_(software)" (~tw :tokens "text-violet-600 hover:underline") "Rollup") ". Rollup begat " (a :href "https://en.wikipedia.org/wiki/Parcel_(software)" (~tw :tokens "text-violet-600 hover:underline") "Parcel") ". Parcel begat " (a :href "https://en.wikipedia.org/wiki/Esbuild" (~tw :tokens "text-violet-600 hover:underline") "esbuild") ". esbuild begat " (a :href "https://en.wikipedia.org/wiki/Vite_(software)" (~tw :tokens "text-violet-600 hover:underline") "Vite") ". Vite begat " (a :href "https://turbo.build/pack" (~tw :tokens "text-violet-600 hover:underline") "Turbopack") ". Each new bundler promises to be the last bundler. Each new bundler is faster than the last at doing something that should not need to be done at all.")    (p (~tw :tokens "text-stone-600")      "The build step exists because the ruling languages cannot express " (a :href "https://en.wikipedia.org/wiki/Component-based_software_engineering" (~tw :tokens "text-violet-600 hover:underline") "components") ". HTML has no composition model. CSS has no scoping. JavaScript has no template syntax. The build step papers over these failures with " (a :href "https://en.wikipedia.org/wiki/Source-to-source_compiler" (~tw :tokens "text-violet-600 hover:underline") "transpilation") ", and calls it developer experience."))  (~docs/section :title "VI. The s-expression revolution" :id "revolution"    (p (~tw :tokens "text-stone-600")      "The " (a :href "https://en.wikipedia.org/wiki/S-expression" (~tw :tokens "text-violet-600 hover:underline") "s-expression") " abolishes the language distinction itself. There is no HTML. There is no separate JavaScript. There is no CSS-as-a-separate-language. There is only the expression.")    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/Homoiconicity" (~tw :tokens "text-violet-600 hover:underline") "Code is data") ". Data is " (a :href "https://en.wikipedia.org/wiki/Document_Object_Model" (~tw :tokens "text-violet-600 hover:underline") "DOM") ". DOM is code. The " (a :href "https://en.wikipedia.org/wiki/Dialectic" (~tw :tokens "text-violet-600 hover:underline") "dialectical") " unity that HTML, JavaScript, and CSS could never achieve — because they are three languages pretending to be one system — is the natural state of the s-expression, which has been one language " (a :href "https://en.wikipedia.org/wiki/Lisp_(programming_language)#History" (~tw :tokens "text-violet-600 hover:underline") "since 1958") ".")    (p (~tw :tokens "text-stone-600")      "The component is not a class, not a function, not a template. The component is a " (a :href "https://en.wikipedia.org/wiki/S-expression" (~tw :tokens "text-violet-600 hover:underline") "list") " whose first element is a symbol. Composition is nesting. " (a :href "https://en.wikipedia.org/wiki/Abstraction_(computer_science)" (~tw :tokens "text-violet-600 hover:underline") "Abstraction") " is binding. There is no JSX because there is no gap between the expression language and the thing being expressed.")    (p (~tw :tokens "text-stone-600")      "The build step is abolished because there is nothing to compile. S-expressions are already in their final form. The parser is thirty lines. The evaluator is fifty primitives. The same source runs on server and client without transformation.")    (p (~tw :tokens "text-stone-600")      "The framework is abolished because the language is the framework. " (code "defcomp") " replaces the component model. " (code "defmacro") " replaces the plugin system. The evaluator replaces the runtime. What remains is not a framework but a language — and languages do not have breaking changes between minor versions."))  (~docs/section :title "VII. Objections from the bourgeoisie" :id "objections"    (p (~tw :tokens "text-stone-600")      "\"You would destroy the " (a :href "https://en.wikipedia.org/wiki/Separation_of_concerns" (~tw :tokens "text-violet-600 hover:underline") "separation of concerns") "!\" they cry. The separation of concerns was destroyed long ago. " (a :href "https://en.wikipedia.org/wiki/React_(software)" (~tw :tokens "text-violet-600 hover:underline") "React") " components contain markup, logic, and inline styles. " (a :href "https://en.wikipedia.org/wiki/Vue.js" (~tw :tokens "text-violet-600 hover:underline") "Vue") " single-file components put template, script, and style in one file. " (a :href "https://en.wikipedia.org/wiki/Tailwind_CSS" (~tw :tokens "text-violet-600 hover:underline") "Tailwind") " puts styling in the markup. The separation of concerns has been dead for years; the ruling classes merely maintain the pretence at conferences.")    (p (~tw :tokens "text-stone-600")      "\"Nobody uses s-expressions!\" they cry. " (a :href "https://en.wikipedia.org/wiki/Emacs_Lisp" (~tw :tokens "text-violet-600 hover:underline") "Emacs") " has been running on s-expressions since 1976. " (a :href "https://en.wikipedia.org/wiki/Clojure" (~tw :tokens "text-violet-600 hover:underline") "Clojure") " runs Fortune 500 backends on s-expressions. Every " (a :href "https://en.wikipedia.org/wiki/Lisp_(programming_language)" (~tw :tokens "text-violet-600 hover:underline") "Lisp") " programmer who ever lived has known what the web refuses to admit: that the parenthesis is not a bug but the minimal syntax for " (a :href "https://en.wikipedia.org/wiki/S-expression" (~tw :tokens "text-violet-600 hover:underline") "structured data") ".")    (p (~tw :tokens "text-stone-600")      "\"Where is the ecosystem?\" they cry. The ecosystem is the problem. Two million " (a :href "https://en.wikipedia.org/wiki/Npm" (~tw :tokens "text-violet-600 hover:underline") "npm") " packages, of which fourteen are useful and the rest are competing implementations of " (a :href "https://www.npmjs.com/package/is-odd" (~tw :tokens "text-violet-600 hover:underline") "is-odd") ". The s-expression needs no ecosystem because the language itself provides what packages exist to paper over: composition, abstraction, and " (a :href "https://en.wikipedia.org/wiki/Homoiconicity" (~tw :tokens "text-violet-600 hover:underline") "code-as-data") ".")    (p (~tw :tokens "text-stone-600")      "\"But " (a :href "https://en.wikipedia.org/wiki/TypeScript" (~tw :tokens "text-violet-600 hover:underline") "TypeScript") "!\" they cry. TypeScript is a " (a :href "https://en.wikipedia.org/wiki/Type_system" (~tw :tokens "text-violet-600 hover:underline") "type system") " bolted onto a language that was " (a :href "https://en.wikipedia.org/wiki/JavaScript#History" (~tw :tokens "text-violet-600 hover:underline") "designed in ten days") " by a man who wanted to write " (a :href "https://en.wikipedia.org/wiki/Scheme_(programming_language)" (~tw :tokens "text-violet-600 hover:underline") "Scheme") ". We have simply completed his original vision.")    (p (~tw :tokens "text-stone-600")      "\"You have no jobs!\" they cry. Correct. We have no jobs, no conference talks, no DevRel budget, no " (a :href "https://en.wikipedia.org/wiki/Venture_capital" (~tw :tokens "text-violet-600 hover:underline") "venture capital") ", no stickers, and no swag. We have something better: a language that does not require a " (a :href "https://en.wikipedia.org/wiki/Software_versioning" (~tw :tokens "text-violet-600 hover:underline") "migration guide") " between versions."))  (~docs/section :title "VIII. The CSS question" :id "css-question"    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/CSS" (~tw :tokens "text-violet-600 hover:underline") "CSS") " presents a special case in the revolutionary analysis. It is neither fully a ruling language nor fully a servant — it is the " (a :href "https://en.wikipedia.org/wiki/Collaborationism" (~tw :tokens "text-violet-600 hover:underline") "collaborator") " class, providing aesthetic legitimacy to whichever regime currently holds power.")    (p (~tw :tokens "text-stone-600")      (a :href "https://en.wikipedia.org/wiki/CSS-in-JS" (~tw :tokens "text-violet-600 hover:underline") "CSS-in-JS") " was the first attempt at annexation: JavaScript consuming CSS entirely, reducing it to " (a :href "https://en.wikipedia.org/wiki/Template_literal" (~tw :tokens "text-violet-600 hover:underline") "template literals") " and runtime overhead. This provocation produced the counter-revolution of utility classes — " (a :href "https://en.wikipedia.org/wiki/Tailwind_CSS" (~tw :tokens "text-violet-600 hover:underline") "Tailwind") " — which reasserted CSS's independence by making the developer write CSS in HTML attributes while insisting this was not " (a :href "https://en.wikipedia.org/wiki/Style_attribute" (~tw :tokens "text-violet-600 hover:underline") "inline styles") ".")    (p (~tw :tokens "text-stone-600")      "The s-expression resolves the CSS question by eliminating it. Styles are expressions. "  (code (~tw :tokens "text-violet-700") "(css :flex :gap-4 :p-2)")      " is not a class name, not an inline style, not a CSS-in-JS template literal. It is a " (a :href "https://en.wikipedia.org/wiki/First-class_function" (~tw :tokens "text-violet-600 hover:underline") "function call") " that returns a value. The value produces a generated class. The class is delivered on demand. No build step. No runtime overhead. No Tailwind config.")    (p (~tw :tokens "text-stone-600")      "Code is data is DOM is "    (span (~tw :tokens "italic") "style") "."))  (~docs/section :title "IX. Programme" :id "programme"    (p (~tw :tokens "text-stone-600")      "The s-expressionists disdain to conceal their views and aims. They openly declare that their ends can be attained only by the forcible overthrow of all existing rendering conditions. Let the ruling languages tremble at a " (a :href "https://en.wikipedia.org/wiki/S-expression" (~tw :tokens "text-violet-600 hover:underline") "parenthetical") " revolution. The developers have nothing to lose but their " (a :href "https://en.wikipedia.org/wiki/Npm" (~tw :tokens "text-violet-600 hover:underline") "node_modules") ".")    (p (~tw :tokens "text-stone-600")      "The immediate aims of the s-expressionists are:")    (ol (~tw :tokens "space-y-2 text-stone-600 mt-2 list-decimal list-inside")      (li "Abolition of the " (a :href "https://en.wikipedia.org/wiki/Build_automation" (~tw :tokens "text-violet-600 hover:underline") "build step") " and all its instruments of compilation")      (li "Abolition of the " (a :href "https://en.wikipedia.org/wiki/Software_framework" (~tw :tokens "text-violet-600 hover:underline") "framework") " as a class distinct from the language")      (li "Centralisation of rendering in the hands of a single evaluator, running identically on " (a :href "https://en.wikipedia.org/wiki/Server-side" (~tw :tokens "text-violet-600 hover:underline") "server") " and " (a :href "https://en.wikipedia.org/wiki/Client-side" (~tw :tokens "text-violet-600 hover:underline") "client"))      (li "Abolition of the language distinction between structure, style, and behaviour")      (li "Equal obligation of all expressions to be " (a :href "https://en.wikipedia.org/wiki/Homoiconicity" (~tw :tokens "text-violet-600 hover:underline") "data as well as code"))      (li "Gradual abolition of the distinction between server and client by means of a uniform " (a :href "https://en.wikipedia.org/wiki/Wire_protocol" (~tw :tokens "text-violet-600 hover:underline") "wire protocol"))      (li "Free evaluation for all expressions in public and private environments")      (li "Abolition of the " (a :href "https://en.wikipedia.org/wiki/Npm" (~tw :tokens "text-violet-600 hover:underline") "node_modules") " directory "          (span (~tw :tokens "text-stone-400 italic") "(this alone justifies the revolution)")))    (p (~tw :tokens "text-stone-600")      "In place of the old web, with its languages and language antagonisms, we shall have an association in which the free evaluation of each expression is the condition for the free evaluation of all.")    (p (~tw :tokens "text-stone-800 font-semibold text-lg mt-8 text-center")      "DEVELOPERS OF ALL SERVICES, UNITE!")    (p (~tw :tokens "text-stone-400 text-xs italic mt-6 text-center")      "The authors acknowledge that this manifesto was produced by the very means of " (a :href "https://en.wikipedia.org/wiki/Large_language_model" (~tw :tokens "text-violet-600 hover:underline") "AI production") " it fails to mention. This is not a contradiction. It is " (a :href "https://en.wikipedia.org/wiki/Dialectic" (~tw :tokens "text-violet-600 hover:underline") "dialectics") "."))))
diff --git a/sx/sx/essays/sx-and-wittgenstein.sx b/sx/sx/etc/philosophy/wittgenstein/index.sx
similarity index 99%
rename from sx/sx/essays/sx-and-wittgenstein.sx
rename to sx/sx/etc/philosophy/wittgenstein/index.sx
index 4028109d..1f31e6bb 100644
--- a/sx/sx/essays/sx-and-wittgenstein.sx
+++ b/sx/sx/etc/philosophy/wittgenstein/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~essays/sx-and-wittgenstein/essay-sx-and-wittgenstein ()
+(defcomp ()
   (~docs/page :title "SX and Wittgenstein"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "The limits of my language are the limits of my world.")
diff --git a/sx/sx/plans/art-dag-sx.sx b/sx/sx/etc/plan/art-dag-sx/index.sx
similarity index 99%
rename from sx/sx/plans/art-dag-sx.sx
rename to sx/sx/etc/plan/art-dag-sx/index.sx
index 9ea6f5a8..e756a0b4 100644
--- a/sx/sx/plans/art-dag-sx.sx
+++ b/sx/sx/etc/plan/art-dag-sx/index.sx
@@ -2,7 +2,7 @@
 ;; Art DAG on SX — SX endpoints as portals into media processing environments
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/art-dag-sx/plan-art-dag-sx-content ()
+(defcomp ()
   (~docs/page :title "Art DAG on SX"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/async-eval-convergence.sx b/sx/sx/etc/plan/async-eval-convergence/index.sx
similarity index 99%
rename from sx/sx/plans/async-eval-convergence.sx
rename to sx/sx/etc/plan/async-eval-convergence/index.sx
index c4013dff..d5527635 100644
--- a/sx/sx/plans/async-eval-convergence.sx
+++ b/sx/sx/etc/plan/async-eval-convergence/index.sx
@@ -2,7 +2,7 @@
 ;; Async Evaluator Convergence — Bootstrap async_eval.py from Spec
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/async-eval-convergence/plan-async-eval-convergence-content ()
+(defcomp ()
   (~docs/page :title "Async Evaluator Convergence"
 
     (~docs/section :title "The Problem" :id "problem"
diff --git a/sx/sx/plans/cek-reactive.sx b/sx/sx/etc/plan/cek-reactive/index.sx
similarity index 99%
rename from sx/sx/plans/cek-reactive.sx
rename to sx/sx/etc/plan/cek-reactive/index.sx
index c560dc6d..23d2f950 100644
--- a/sx/sx/plans/cek-reactive.sx
+++ b/sx/sx/etc/plan/cek-reactive/index.sx
@@ -1,7 +1,7 @@
 ;; Deref as Shift — CEK-Based Reactive DOM Renderer
 ;; Phase B: replace explicit effects with implicit continuation capture.
 
-(defcomp ~plans/cek-reactive/plan-cek-reactive-content ()
+(defcomp ()
   (~docs/page :title "Deref as Shift — CEK-Based Reactive DOM Renderer"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/content-addressed-components.sx b/sx/sx/etc/plan/content-addressed-components/index.sx
similarity index 99%
rename from sx/sx/plans/content-addressed-components.sx
rename to sx/sx/etc/plan/content-addressed-components/index.sx
index 47eae6bd..a29d910f 100644
--- a/sx/sx/plans/content-addressed-components.sx
+++ b/sx/sx/etc/plan/content-addressed-components/index.sx
@@ -2,7 +2,7 @@
 ;; Content-Addressed Components
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/content-addressed-components/plan-content-addressed-components-content ()
+(defcomp ()
   (~docs/page :title "Content-Addressed Components"
 
     (~docs/section :title "The Premise" :id "premise"
diff --git a/sx/sx/plans/environment-images.sx b/sx/sx/etc/plan/environment-images/index.sx
similarity index 99%
rename from sx/sx/plans/environment-images.sx
rename to sx/sx/etc/plan/environment-images/index.sx
index 6a3f751e..5281ba54 100644
--- a/sx/sx/plans/environment-images.sx
+++ b/sx/sx/etc/plan/environment-images/index.sx
@@ -2,7 +2,7 @@
 ;; Content-Addressed Environment Images
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/environment-images/plan-environment-images-content ()
+(defcomp ()
   (~docs/page :title "Content-Addressed Environment Images"
 
     (~docs/section :title "The Idea" :id "idea"
diff --git a/sx/sx/plans/foundations.sx b/sx/sx/etc/plan/foundations/index.sx
similarity index 99%
rename from sx/sx/plans/foundations.sx
rename to sx/sx/etc/plan/foundations/index.sx
index 41a7787d..748775e3 100644
--- a/sx/sx/plans/foundations.sx
+++ b/sx/sx/etc/plan/foundations/index.sx
@@ -1,7 +1,7 @@
 ;; Foundations — The Computational Floor
 ;; From scoped effects to CEK: what's beneath algebraic effects and why it's the limit.
 
-(defcomp ~plans/foundations/plan-foundations-content ()
+(defcomp ()
   (~docs/page :title "Foundations \u2014 The Computational Floor"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/fragment-protocol.sx b/sx/sx/etc/plan/fragment-protocol/index.sx
similarity index 98%
rename from sx/sx/plans/fragment-protocol.sx
rename to sx/sx/etc/plan/fragment-protocol/index.sx
index 5bb2bb99..1e43c7f4 100644
--- a/sx/sx/plans/fragment-protocol.sx
+++ b/sx/sx/etc/plan/fragment-protocol/index.sx
@@ -2,7 +2,7 @@
 ;; Fragment Protocol
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/fragment-protocol/plan-fragment-protocol-content ()
+(defcomp ()
   (~docs/page :title "Fragment Protocol"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/generative-sx.sx b/sx/sx/etc/plan/generative-sx/index.sx
similarity index 99%
rename from sx/sx/plans/generative-sx.sx
rename to sx/sx/etc/plan/generative-sx/index.sx
index 2e92b4d9..175fe0ab 100644
--- a/sx/sx/plans/generative-sx.sx
+++ b/sx/sx/etc/plan/generative-sx/index.sx
@@ -2,7 +2,7 @@
 ;; Generative SX — programs that write themselves as they run
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/generative-sx/plan-generative-sx-content ()
+(defcomp ()
   (~docs/page :title "Generative SX"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/glue-decoupling.sx b/sx/sx/etc/plan/glue-decoupling/index.sx
similarity index 98%
rename from sx/sx/plans/glue-decoupling.sx
rename to sx/sx/etc/plan/glue-decoupling/index.sx
index 8bb3560b..8e7cf3f1 100644
--- a/sx/sx/plans/glue-decoupling.sx
+++ b/sx/sx/etc/plan/glue-decoupling/index.sx
@@ -2,7 +2,7 @@
 ;; Glue Decoupling
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/glue-decoupling/plan-glue-decoupling-content ()
+(defcomp ()
   (~docs/page :title "Cross-App Decoupling via Glue Services"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/index.sx b/sx/sx/etc/plan/index.sx
similarity index 96%
rename from sx/sx/plans/index.sx
rename to sx/sx/etc/plan/index.sx
index 9dcfcc3e..1405895a 100644
--- a/sx/sx/plans/index.sx
+++ b/sx/sx/etc/plan/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~plans/index/plans-index-content
   ()
   (~docs/page
     :title "Plans"
diff --git a/sx/sx/plans/isolated-evaluator.sx b/sx/sx/etc/plan/isolated-evaluator/index.sx
similarity index 99%
rename from sx/sx/plans/isolated-evaluator.sx
rename to sx/sx/etc/plan/isolated-evaluator/index.sx
index 9f740f1f..6e271659 100644
--- a/sx/sx/plans/isolated-evaluator.sx
+++ b/sx/sx/etc/plan/isolated-evaluator/index.sx
@@ -2,7 +2,7 @@
 ;; Isolated Evaluator — Shared platform layer, isolated JS, Rust WASM
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/isolated-evaluator/plan-isolated-evaluator-content ()
+(defcomp ()
   (~docs/page :title "Isolated Evaluator"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/isomorphic.sx b/sx/sx/etc/plan/isomorphic/index.sx
similarity index 99%
rename from sx/sx/plans/isomorphic.sx
rename to sx/sx/etc/plan/isomorphic/index.sx
index 73617a69..cd8364f6 100644
--- a/sx/sx/plans/isomorphic.sx
+++ b/sx/sx/etc/plan/isomorphic/index.sx
@@ -2,7 +2,7 @@
 ;; Isomorphic Architecture Roadmap
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/isomorphic/plan-isomorphic-content ()
+(defcomp ()
   (~docs/page :title "Isomorphic Architecture Roadmap"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/js-bootstrapper.sx b/sx/sx/etc/plan/js-bootstrapper/index.sx
similarity index 99%
rename from sx/sx/plans/js-bootstrapper.sx
rename to sx/sx/etc/plan/js-bootstrapper/index.sx
index b35fdd74..f2b2f753 100644
--- a/sx/sx/plans/js-bootstrapper.sx
+++ b/sx/sx/etc/plan/js-bootstrapper/index.sx
@@ -2,7 +2,7 @@
 ;; js.sx — Self-Hosting JavaScript Bootstrapper
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/js-bootstrapper/plan-js-bootstrapper-content ()
+(defcomp ()
   (~docs/page :title "js.sx — JavaScript Bootstrapper"
 
     ;; -----------------------------------------------------------------------
diff --git a/sx/sx/plans/live-streaming.sx b/sx/sx/etc/plan/live-streaming/index.sx
similarity index 99%
rename from sx/sx/plans/live-streaming.sx
rename to sx/sx/etc/plan/live-streaming/index.sx
index 169023e1..9f21a1f3 100644
--- a/sx/sx/plans/live-streaming.sx
+++ b/sx/sx/etc/plan/live-streaming/index.sx
@@ -2,7 +2,7 @@
 ;; Live Streaming — SSE & WebSocket
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/live-streaming/plan-live-streaming-content ()
+(defcomp ()
   (~docs/page :title "Live Streaming"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/mother-language.sx b/sx/sx/etc/plan/mother-language/index.sx
similarity index 99%
rename from sx/sx/plans/mother-language.sx
rename to sx/sx/etc/plan/mother-language/index.sx
index 266deddc..1a451863 100644
--- a/sx/sx/plans/mother-language.sx
+++ b/sx/sx/etc/plan/mother-language/index.sx
@@ -2,7 +2,7 @@
 ;; Mother Language — SX as its own compiler, OCaml as the substrate
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/mother-language/plan-mother-language-content ()
+(defcomp ()
   (~docs/page :title "Mother Language"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/nav-redesign.sx b/sx/sx/etc/plan/nav-redesign/index.sx
similarity index 99%
rename from sx/sx/plans/nav-redesign.sx
rename to sx/sx/etc/plan/nav-redesign/index.sx
index 2a24219d..95559c9e 100644
--- a/sx/sx/plans/nav-redesign.sx
+++ b/sx/sx/etc/plan/nav-redesign/index.sx
@@ -2,7 +2,7 @@
 ;; Navigation Redesign — SX Docs
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/nav-redesign/plan-nav-redesign-content ()
+(defcomp ()
   (~docs/page :title "Navigation Redesign"
 
     (~docs/section :title "The Problem" :id "problem"
diff --git a/sx/sx/plans/predictive-prefetch.sx b/sx/sx/etc/plan/predictive-prefetch/index.sx
similarity index 99%
rename from sx/sx/plans/predictive-prefetch.sx
rename to sx/sx/etc/plan/predictive-prefetch/index.sx
index 3d192dfc..ffb0e75f 100644
--- a/sx/sx/plans/predictive-prefetch.sx
+++ b/sx/sx/etc/plan/predictive-prefetch/index.sx
@@ -2,7 +2,7 @@
 ;; Predictive Component Prefetching
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/predictive-prefetch/plan-predictive-prefetch-content ()
+(defcomp ()
   (~docs/page :title "Predictive Component Prefetching"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/reader-macros.sx b/sx/sx/etc/plan/reader-macros/index.sx
similarity index 99%
rename from sx/sx/plans/reader-macros.sx
rename to sx/sx/etc/plan/reader-macros/index.sx
index 28ca0c2e..db8da972 100644
--- a/sx/sx/plans/reader-macros.sx
+++ b/sx/sx/etc/plan/reader-macros/index.sx
@@ -2,7 +2,7 @@
 ;; Reader Macros
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/reader-macros/plan-reader-macros-content ()
+(defcomp ()
   (~docs/page :title "Reader Macros"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/runtime-slicing.sx b/sx/sx/etc/plan/runtime-slicing/index.sx
similarity index 99%
rename from sx/sx/plans/runtime-slicing.sx
rename to sx/sx/etc/plan/runtime-slicing/index.sx
index f82317d6..5043201a 100644
--- a/sx/sx/plans/runtime-slicing.sx
+++ b/sx/sx/etc/plan/runtime-slicing/index.sx
@@ -2,7 +2,7 @@
 ;; Runtime Slicing
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/runtime-slicing/plan-runtime-slicing-content ()
+(defcomp ()
   (~docs/page :title "Runtime Slicing"
 
     (~docs/section :title "The Problem" :id "problem"
diff --git a/sx/sx/plans/rust-wasm-host.sx b/sx/sx/etc/plan/rust-wasm-host/index.sx
similarity index 99%
rename from sx/sx/plans/rust-wasm-host.sx
rename to sx/sx/etc/plan/rust-wasm-host/index.sx
index 046c8724..611c324b 100644
--- a/sx/sx/plans/rust-wasm-host.sx
+++ b/sx/sx/etc/plan/rust-wasm-host/index.sx
@@ -2,7 +2,7 @@
 ;; Rust/WASM Host — Bootstrap the SX spec to Rust, compile to WASM
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/rust-wasm-host/plan-rust-wasm-host-content ()
+(defcomp ()
   (~docs/page :title "Rust/WASM Host"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/scoped-effects.sx b/sx/sx/etc/plan/scoped-effects/index.sx
similarity index 99%
rename from sx/sx/plans/scoped-effects.sx
rename to sx/sx/etc/plan/scoped-effects/index.sx
index 6190aae3..ec7b779d 100644
--- a/sx/sx/plans/scoped-effects.sx
+++ b/sx/sx/etc/plan/scoped-effects/index.sx
@@ -1,7 +1,7 @@
 ;; Scoped Effects — The Deepest Primitive
 ;; Algebraic effects as the unified foundation for spreads, islands, lakes, and context.
 
-(defcomp ~plans/scoped-effects/plan-scoped-effects-content ()
+(defcomp ()
   (~docs/page :title "Scoped Effects — The Deepest Primitive"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/self-hosting-bootstrapper.sx b/sx/sx/etc/plan/self-hosting-bootstrapper/index.sx
similarity index 99%
rename from sx/sx/plans/self-hosting-bootstrapper.sx
rename to sx/sx/etc/plan/self-hosting-bootstrapper/index.sx
index 44cf5639..84cc22e5 100644
--- a/sx/sx/plans/self-hosting-bootstrapper.sx
+++ b/sx/sx/etc/plan/self-hosting-bootstrapper/index.sx
@@ -3,7 +3,7 @@
 ;; ---------------------------------------------------------------------------
 ;; @css bg-green-100 text-green-800 bg-green-50 border-green-200 text-green-700 text-green-600
 
-(defcomp ~plans/self-hosting-bootstrapper/plan-self-hosting-bootstrapper-content ()
+(defcomp ()
   (~docs/page :title "Self-Hosting Bootstrapper"
 
     ;; -----------------------------------------------------------------------
diff --git a/sx/sx/plans/social-sharing.sx b/sx/sx/etc/plan/social-sharing/index.sx
similarity index 98%
rename from sx/sx/plans/social-sharing.sx
rename to sx/sx/etc/plan/social-sharing/index.sx
index adc4fe89..7425af6e 100644
--- a/sx/sx/plans/social-sharing.sx
+++ b/sx/sx/etc/plan/social-sharing/index.sx
@@ -2,7 +2,7 @@
 ;; Social Sharing
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/social-sharing/plan-social-sharing-content ()
+(defcomp ()
   (~docs/page :title "Social Network Sharing"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/spec-explorer.sx b/sx/sx/etc/plan/spec-explorer/index.sx
similarity index 99%
rename from sx/sx/plans/spec-explorer.sx
rename to sx/sx/etc/plan/spec-explorer/index.sx
index bfa59051..7f0797fa 100644
--- a/sx/sx/plans/spec-explorer.sx
+++ b/sx/sx/etc/plan/spec-explorer/index.sx
@@ -2,7 +2,7 @@
 ;; Spec Explorer — The Fifth Ring
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/spec-explorer/plan-spec-explorer-content ()
+(defcomp ()
   (~docs/page :title "Spec Explorer"
 
     (~docs/section :title "The Five Rings" :id "five-rings"
diff --git a/sx/sx/plans/status.sx b/sx/sx/etc/plan/status/index.sx
similarity index 99%
rename from sx/sx/plans/status.sx
rename to sx/sx/etc/plan/status/index.sx
index 13fb8d33..3f0e3c68 100644
--- a/sx/sx/plans/status.sx
+++ b/sx/sx/etc/plan/status/index.sx
@@ -2,7 +2,7 @@
 ;; Plan Status Overview
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/status/plan-status-content ()
+(defcomp ()
   (~docs/page :title "Plan Status"
 
     (p (~tw :tokens "text-lg text-stone-600 mb-6")
diff --git a/sx/sx/plans/sx-activity.sx b/sx/sx/etc/plan/sx-activity/index.sx
similarity index 99%
rename from sx/sx/plans/sx-activity.sx
rename to sx/sx/etc/plan/sx-activity/index.sx
index 0b934dd3..5b6bb93d 100644
--- a/sx/sx/plans/sx-activity.sx
+++ b/sx/sx/etc/plan/sx-activity/index.sx
@@ -2,7 +2,7 @@
 ;; SX-Activity: Federated SX over ActivityPub
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/sx-activity/plan-sx-activity-content ()
+(defcomp ()
   (~docs/page :title "SX-Activity"
 
     (~docs/section :title "Context" :id "context"
diff --git a/sx/sx/plans/sx-ci.sx b/sx/sx/etc/plan/sx-ci/index.sx
similarity index 99%
rename from sx/sx/plans/sx-ci.sx
rename to sx/sx/etc/plan/sx-ci/index.sx
index b2bd5b2b..8b26b7db 100644
--- a/sx/sx/plans/sx-ci.sx
+++ b/sx/sx/etc/plan/sx-ci/index.sx
@@ -2,7 +2,7 @@
 ;; SX CI Pipeline
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/sx-ci/plan-sx-ci-content ()
+(defcomp ()
   (~docs/page :title "SX CI Pipeline"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/sx-forge.sx b/sx/sx/etc/plan/sx-forge/index.sx
similarity index 99%
rename from sx/sx/plans/sx-forge.sx
rename to sx/sx/etc/plan/sx-forge/index.sx
index c9d1e869..af40da1c 100644
--- a/sx/sx/plans/sx-forge.sx
+++ b/sx/sx/etc/plan/sx-forge/index.sx
@@ -2,7 +2,7 @@
 ;; Plan: a Gitea/Forgejo-style git hosting platform where everything —
 ;; repositories, issues, pull requests, CI, permissions — is SX.
 
-(defcomp ~plans/sx-forge/plan-sx-forge-content ()
+(defcomp ()
   (~docs/page :title "sx-forge: Git Forge in SX"
 
     (~docs/section :title "Vision" :id "vision"
diff --git a/sx/sx/plans/sx-host.sx b/sx/sx/etc/plan/sx-host/index.sx
similarity index 99%
rename from sx/sx/plans/sx-host.sx
rename to sx/sx/etc/plan/sx-host/index.sx
index 2ea815cf..639853f4 100644
--- a/sx/sx/plans/sx-host.sx
+++ b/sx/sx/etc/plan/sx-host/index.sx
@@ -2,7 +2,7 @@
 ;; Five irreducible IO operations beneath every host.
 ;; Everything above — HTTP, SQL, TLS, protocols — is SX.
 
-(defcomp ~plans/sx-host/plan-sx-host-content ()
+(defcomp ()
   (~docs/page :title "sx-host: Universal Platform Primitives"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/plans/sx-protocol.sx b/sx/sx/etc/plan/sx-protocol/index.sx
similarity index 99%
rename from sx/sx/plans/sx-protocol.sx
rename to sx/sx/etc/plan/sx-protocol/index.sx
index b5ae02ca..4a146618 100644
--- a/sx/sx/plans/sx-protocol.sx
+++ b/sx/sx/etc/plan/sx-protocol/index.sx
@@ -1,7 +1,7 @@
 ;; SX Protocol — A Proposal
 ;; S-expressions as a universal protocol for networked hypermedia.
 
-(defcomp ~plans/sx-protocol/plan-sx-protocol-content ()
+(defcomp ()
   (~docs/page :title "SX Protocol — A Proposal"
 
     (~docs/section :title "Abstract" :id "abstract"
diff --git a/sx/sx/plans/sx-proxy.sx b/sx/sx/etc/plan/sx-proxy/index.sx
similarity index 99%
rename from sx/sx/plans/sx-proxy.sx
rename to sx/sx/etc/plan/sx-proxy/index.sx
index 554439fd..3be7d461 100644
--- a/sx/sx/plans/sx-proxy.sx
+++ b/sx/sx/etc/plan/sx-proxy/index.sx
@@ -2,7 +2,7 @@
 ;; Plan: a Caddy-style reverse proxy where routes, TLS, middleware,
 ;; and load balancing are SX s-expressions manipulated by macros.
 
-(defcomp ~plans/sx-proxy/plan-sx-proxy-content ()
+(defcomp ()
   (~docs/page :title "sx-proxy: Reverse Proxy in SX"
 
     (~docs/section :title "Vision" :id "vision"
diff --git a/sx/sx/plans/sx-pub.sx b/sx/sx/etc/plan/sx-pub/index.sx
similarity index 99%
rename from sx/sx/plans/sx-pub.sx
rename to sx/sx/etc/plan/sx-pub/index.sx
index d4a604be..eb49807e 100644
--- a/sx/sx/plans/sx-pub.sx
+++ b/sx/sx/etc/plan/sx-pub/index.sx
@@ -2,7 +2,7 @@
 ;; sx-pub: Federated SX Publishing Protocol
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~sx-pub/overview-content ()
+(defcomp ()
   (~docs/page :title "sx-pub"
 
     (~docs/section :title "What It Is" :id "what"
diff --git a/sx/sx/plans/sx-swarm.sx b/sx/sx/etc/plan/sx-swarm/index.sx
similarity index 99%
rename from sx/sx/plans/sx-swarm.sx
rename to sx/sx/etc/plan/sx-swarm/index.sx
index 8f731440..4baeab9f 100644
--- a/sx/sx/plans/sx-swarm.sx
+++ b/sx/sx/etc/plan/sx-swarm/index.sx
@@ -2,7 +2,7 @@
 ;; Plan: Docker Swarm management where stack definitions, service configs,
 ;; and deployment logic are SX s-expressions manipulated by macros.
 
-(defcomp ~plans/sx-swarm/plan-sx-swarm-content ()
+(defcomp ()
   (~docs/page :title "sx-swarm: Container Orchestration in SX"
 
     (~docs/section :title "Vision" :id "vision"
diff --git a/sx/sx/plans/sx-urls.sx b/sx/sx/etc/plan/sx-urls/index.sx
similarity index 99%
rename from sx/sx/plans/sx-urls.sx
rename to sx/sx/etc/plan/sx-urls/index.sx
index acc87599..5a734f42 100644
--- a/sx/sx/plans/sx-urls.sx
+++ b/sx/sx/etc/plan/sx-urls/index.sx
@@ -2,7 +2,7 @@
 ;; Plan: replace path-based routing with s-expression URLs where the URL
 ;; IS the query, the render instruction, and the address — all at once.
 
-(defcomp ~plans/sx-urls/plan-sx-urls-content ()
+(defcomp ()
   (~docs/page :title "SX Expression URLs"
 
     (~docs/section :title "Vision" :id "vision"
diff --git a/sx/sx/plans/sx-web-platform.sx b/sx/sx/etc/plan/sx-web-platform/index.sx
similarity index 99%
rename from sx/sx/plans/sx-web-platform.sx
rename to sx/sx/etc/plan/sx-web-platform/index.sx
index 3b333c8c..db7c4eb4 100644
--- a/sx/sx/plans/sx-web-platform.sx
+++ b/sx/sx/etc/plan/sx-web-platform/index.sx
@@ -2,7 +2,7 @@
 ;; Plan: transform sx-web.org from documentation site into a live development
 ;; environment where content is authored, tested, and deployed in the browser.
 
-(defcomp ~plans/sx-web-platform/plan-sx-web-platform-content ()
+(defcomp ()
   (~docs/page :title "sx-web.org Development Platform"
 
     (~docs/section :title "Vision" :id "vision"
diff --git a/sx/sx/plans/sx-web.sx b/sx/sx/etc/plan/sx-web/index.sx
similarity index 99%
rename from sx/sx/plans/sx-web.sx
rename to sx/sx/etc/plan/sx-web/index.sx
index 6a5bdc8a..17fee26f 100644
--- a/sx/sx/plans/sx-web.sx
+++ b/sx/sx/etc/plan/sx-web/index.sx
@@ -2,7 +2,7 @@
 ;; Browser-native peer network with content-addressed SX components.
 ;; Builds on sx-pub (phases 1-4 complete: publishing, federation, anchoring, IPFS).
 
-(defcomp ~plans/sx-web/plan-sx-web-content ()
+(defcomp ()
   (~docs/page :title "sx-web: Federated Component Web"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/etc/plan/theorem-prover/_islands/prove-phase1-row.sx b/sx/sx/etc/plan/theorem-prover/_islands/prove-phase1-row.sx
new file mode 100644
index 00000000..7c695d32
--- /dev/null
+++ b/sx/sx/etc/plan/theorem-prover/_islands/prove-phase1-row.sx
@@ -0,0 +1,11 @@
+;; ---------------------------------------------------------------------------
+;; Theorem Prover: prove.sx — Constraint Solving for SX Primitives
+;; ---------------------------------------------------------------------------
+;; Helper: render a Phase 1 result row
+(defcomp (&key (name :as string) (status :as string))
+  (tr (~tw :tokens "border-t border-stone-100")
+    (td (~tw :tokens "py-1.5 px-3 font-mono text-xs text-stone-700") name)
+    (td (~tw :tokens "py-1.5 px-3 text-xs")
+      (if (= status "sat")
+        (span (~tw :tokens "text-emerald-600 font-medium") "sat")
+        (span (~tw :tokens "text-red-600 font-medium") status)))))
diff --git a/sx/sx/etc/plan/theorem-prover/_islands/prove-phase2-row.sx b/sx/sx/etc/plan/theorem-prover/_islands/prove-phase2-row.sx
new file mode 100644
index 00000000..fb23933d
--- /dev/null
+++ b/sx/sx/etc/plan/theorem-prover/_islands/prove-phase2-row.sx
@@ -0,0 +1,14 @@
+;; Helper: render a Phase 2 result row
+(defcomp (&key (name :as string) (status :as string) (tested :as number) (skipped :as number) (counterexample :as string?))
+  (tr (~tw :tokens "border-t border-stone-100")
+    (td (~tw :tokens "py-1.5 px-3 font-mono text-xs text-stone-700") name)
+    (td (~tw :tokens "py-1.5 px-3 text-xs")
+      (if (= status "verified")
+        (span (~tw :tokens "text-emerald-600 font-medium") "verified")
+        (span (~tw :tokens "text-red-600 font-medium") "falsified")))
+    (td (~tw :tokens "py-1.5 px-3 text-xs text-stone-500 text-right tabular-nums")
+      (str tested))
+    (td (~tw :tokens "py-1.5 px-3 text-xs text-stone-400 text-right tabular-nums")
+      (str skipped))
+    (td (~tw :tokens "py-1.5 px-3 text-xs font-mono text-red-600")
+      (or counterexample ""))))
diff --git a/sx/sx/plans/theorem-prover.sx b/sx/sx/etc/plan/theorem-prover/index.sx
similarity index 91%
rename from sx/sx/plans/theorem-prover.sx
rename to sx/sx/etc/plan/theorem-prover/index.sx
index 89b057f1..c8f5db44 100644
--- a/sx/sx/plans/theorem-prover.sx
+++ b/sx/sx/etc/plan/theorem-prover/index.sx
@@ -1,33 +1,4 @@
-;; ---------------------------------------------------------------------------
-;; Theorem Prover: prove.sx — Constraint Solving for SX Primitives
-;; ---------------------------------------------------------------------------
-
-;; Helper: render a Phase 1 result row
-(defcomp ~plans/theorem-prover/prove-phase1-row (&key (name :as string) (status :as string))
-  (tr (~tw :tokens "border-t border-stone-100")
-    (td (~tw :tokens "py-1.5 px-3 font-mono text-xs text-stone-700") name)
-    (td (~tw :tokens "py-1.5 px-3 text-xs")
-      (if (= status "sat")
-        (span (~tw :tokens "text-emerald-600 font-medium") "sat")
-        (span (~tw :tokens "text-red-600 font-medium") status)))))
-
-;; Helper: render a Phase 2 result row
-(defcomp ~plans/theorem-prover/prove-phase2-row (&key (name :as string) (status :as string) (tested :as number) (skipped :as number) (counterexample :as string?))
-  (tr (~tw :tokens "border-t border-stone-100")
-    (td (~tw :tokens "py-1.5 px-3 font-mono text-xs text-stone-700") name)
-    (td (~tw :tokens "py-1.5 px-3 text-xs")
-      (if (= status "verified")
-        (span (~tw :tokens "text-emerald-600 font-medium") "verified")
-        (span (~tw :tokens "text-red-600 font-medium") "falsified")))
-    (td (~tw :tokens "py-1.5 px-3 text-xs text-stone-500 text-right tabular-nums")
-      (str tested))
-    (td (~tw :tokens "py-1.5 px-3 text-xs text-stone-400 text-right tabular-nums")
-      (str skipped))
-    (td (~tw :tokens "py-1.5 px-3 text-xs font-mono text-red-600")
-      (or counterexample ""))))
-
-
-(defcomp ~plans/theorem-prover/plan-theorem-prover-content ()
+(defcomp ()
   (~docs/page :title "Theorem Prover"
 
     ;; --- Intro ---
diff --git a/sx/sx/plans/typed-sx.sx b/sx/sx/etc/plan/typed-sx/index.sx
similarity index 99%
rename from sx/sx/plans/typed-sx.sx
rename to sx/sx/etc/plan/typed-sx/index.sx
index 72372858..8ccc4712 100644
--- a/sx/sx/plans/typed-sx.sx
+++ b/sx/sx/etc/plan/typed-sx/index.sx
@@ -2,7 +2,7 @@
 ;; Typed SX — Gradual Type System
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/typed-sx/plan-typed-sx-content ()
+(defcomp ()
   (~docs/page :title "Typed SX"
 
     (~docs/section :title "The Opportunity" :id "opportunity"
diff --git a/sx/sx/plans/wasm-bytecode-vm.sx b/sx/sx/etc/plan/wasm-bytecode-vm/index.sx
similarity index 99%
rename from sx/sx/plans/wasm-bytecode-vm.sx
rename to sx/sx/etc/plan/wasm-bytecode-vm/index.sx
index 5e0a54fd..767ac891 100644
--- a/sx/sx/plans/wasm-bytecode-vm.sx
+++ b/sx/sx/etc/plan/wasm-bytecode-vm/index.sx
@@ -2,7 +2,7 @@
 ;; WASM Bytecode VM — Compile SX to bytecode, run in Rust/WASM
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~plans/wasm-bytecode-vm/plan-wasm-bytecode-vm-content ()
+(defcomp ()
   (~docs/page :title "WASM Bytecode VM"
 
     (~docs/section :title "The Idea" :id "idea"
diff --git a/sx/sx/examples-content.sx b/sx/sx/examples-content.sx
deleted file mode 100644
index e6906679..00000000
--- a/sx/sx/examples-content.sx
+++ /dev/null
@@ -1,372 +0,0 @@
-(defcomp
-  ~examples-content/example-click-to-load
-  ()
-  (~examples/page-content
-    :title "Click to Load"
-    :description "The simplest sx interaction: click a button, fetch content from the server, swap it in."
-    :demo-description "Click the button to load server-rendered content."
-    :demo (~examples/click-to-load-demo)
-    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.click))))\"\n  :sx-target \"#click-result\"\n  :sx-swap \"innerHTML\"\n  \"Load content\")"
-    :handler-names (list "ex-click")
-    :comp-placeholder-id "click-comp"
-    :wire-placeholder-id "click-wire"
-    :wire-note "The server responds with content-type text/sx. New CSS rules are prepended as a style tag. Clear the component cache to see component definitions included in the wire response."))
-
-(defcomp
-  ~examples-content/example-form-submission
-  ()
-  (~examples/page-content
-    :title "Form Submission"
-    :description "Forms with sx-post submit via AJAX and swap the response into a target."
-    :demo-description "Enter a name and submit."
-    :demo (~examples/form-demo)
-    :sx-code "(form\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.form))))\"\n  :sx-target \"#form-result\"\n  :sx-swap \"innerHTML\"\n  (input :type \"text\" :name \"name\")\n  (button :type \"submit\" \"Submit\"))"
-    :handler-names (list "ex-form")
-    :comp-placeholder-id "form-comp"
-    :wire-placeholder-id "form-wire"))
-
-(defcomp
-  ~examples-content/example-polling
-  ()
-  (~examples/page-content
-    :title "Polling"
-    :description "Use sx-trigger with \"every\" to poll the server at regular intervals."
-    :demo-description "This div polls the server every 2 seconds."
-    :demo (~examples/polling-demo)
-    :sx-code "(div\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.poll))))\"\n  :sx-trigger \"load, every 2s\"\n  :sx-swap \"innerHTML\"\n  \"Loading...\")"
-    :handler-names (list "ex-poll")
-    :comp-placeholder-id "poll-comp"
-    :wire-placeholder-id "poll-wire"
-    :wire-note "Updates every 2 seconds — watch the time and count change."))
-
-(defcomp
-  ~examples-content/example-delete-row
-  ()
-  (~examples/page-content
-    :title "Delete Row"
-    :description "sx-delete with sx-swap \"outerHTML\" and an empty response removes the row from the DOM."
-    :demo-description "Click delete to remove a row. Uses sx-confirm for confirmation."
-    :demo (~examples/delete-demo
-      :items (list
-        (list "1" "Implement dark mode")
-        (list "2" "Fix login bug")
-        (list "3" "Write documentation")
-        (list "4" "Deploy to production")
-        (list "5" "Add unit tests")))
-    :sx-code "(button\n  :sx-delete \"/sx/(geography.(hypermedia.(example.(api.(delete.1)))))\"\n  :sx-target \"#row-1\"\n  :sx-swap \"outerHTML\"\n  :sx-confirm \"Delete this item?\"\n  \"delete\")"
-    :handler-names (list "ex-delete")
-    :comp-placeholder-id "delete-comp"
-    :wire-placeholder-id "delete-wire"
-    :wire-note "Empty body — outerHTML swap replaces the target element with nothing."))
-
-(defcomp
-  ~examples-content/example-inline-edit
-  ()
-  (~examples/page-content
-    :title "Inline Edit"
-    :description "Click edit to swap a display view for an edit form. Save swaps back."
-    :demo-description "Click edit, modify the text, save or cancel."
-    :demo (~examples/inline-edit-demo)
-    :sx-code ";; View mode — shows text + edit button\n(~examples/inline-view :value \"some text\")\n\n;; Edit mode — returned by server on click\n(~examples/inline-edit-form :value \"some text\")"
-    :handler-names (list "ex-edit-form" "ex-edit-save")
-    :comp-placeholder-id "edit-comp"
-    :comp-heading "Components"
-    :handler-heading "Server handlers"
-    :wire-placeholder-id "edit-wire"))
-
-(defcomp
-  ~examples-content/example-oob-swaps
-  ()
-  (~examples/page-content
-    :title "Out-of-Band Swaps"
-    :description "sx-swap-oob lets a single response update multiple elements anywhere in the DOM."
-    :demo-description "One request updates both Box A (via sx-target) and Box B (via sx-swap-oob)."
-    :demo (~examples/oob-demo)
-    :sx-code ";; Button targets Box A\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.oob))))\"\n  :sx-target \"#oob-box-a\"\n  :sx-swap \"innerHTML\"\n  \"Update both boxes\")"
-    :handler-names (list "ex-oob")
-    :wire-placeholder-id "oob-wire"
-    :wire-note "The fragment contains both the main content and an OOB element. sx.js splits them: main content goes to sx-target, OOB elements find their targets by ID."))
-
-(defcomp
-  ~examples-content/example-lazy-loading
-  ()
-  (~examples/page-content
-    :title "Lazy Loading"
-    :description "Use sx-trigger=\"load\" to fetch content as soon as the element enters the DOM. Great for deferring expensive content below the fold."
-    :demo-description "Content loads automatically when the page renders."
-    :demo (~examples/lazy-loading-demo)
-    :sx-code "(div\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.lazy))))\"\n  :sx-trigger \"load\"\n  :sx-swap \"innerHTML\"\n  (div :class \"animate-pulse\" \"Loading...\"))"
-    :handler-names (list "ex-lazy")
-    :comp-placeholder-id "lazy-comp"
-    :wire-placeholder-id "lazy-wire"))
-
-(defcomp
-  ~examples-content/example-infinite-scroll
-  ()
-  (~examples/page-content
-    :title "Infinite Scroll"
-    :description "A sentinel element at the bottom uses sx-trigger=\"intersect once\" to load the next page when scrolled into view. Each response appends items and a new sentinel."
-    :demo-description "Scroll down in the container to load more items (5 pages total)."
-    :demo (~examples/infinite-scroll-demo)
-    :sx-code "(div :id \"scroll-sentinel\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.scroll))))?page=2\"\n  :sx-trigger \"intersect once\"\n  :sx-target \"#scroll-items\"\n  :sx-swap \"beforeend\"\n  \"Loading more...\")"
-    :handler-names (list "ex-scroll")
-    :comp-placeholder-id "scroll-comp"
-    :wire-placeholder-id "scroll-wire"))
-
-(defcomp
-  ~examples-content/example-progress-bar
-  ()
-  (~examples/page-content
-    :title "Progress Bar"
-    :description "Start a server-side job, then poll for progress using sx-trigger=\"load delay:500ms\" on each response. The bar fills up and stops when complete."
-    :demo-description "Click start to begin a simulated job."
-    :demo (~examples/progress-bar-demo)
-    :sx-code ";; Start the job\n(button\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.progress-start))))\"\n  :sx-target \"#progress-target\"\n  :sx-swap \"innerHTML\")\n\n;; Each response re-polls via sx-trigger=\"load\"\n(div :sx-get \"/sx/(geography.(hypermedia.(example.(api.progress-status))))?job=ID\"\n  :sx-trigger \"load delay:500ms\"\n  :sx-target \"#progress-target\"\n  :sx-swap \"innerHTML\")"
-    :handler-names (list "ex-progress-start" "ex-progress-status")
-    :comp-placeholder-id "progress-comp"
-    :wire-placeholder-id "progress-wire"))
-
-(defcomp
-  ~examples-content/example-active-search
-  ()
-  (~examples/page-content
-    :title "Active Search"
-    :description "An input with sx-trigger=\"keyup delay:300ms changed\" debounces keystrokes and only fires when the value changes. The server filters a list of programming languages."
-    :demo-description "Type to search through 20 programming languages."
-    :demo (~examples/active-search-demo)
-    :sx-code "(input :type \"text\" :name \"q\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.search))))\"\n  :sx-trigger \"keyup delay:300ms changed\"\n  :sx-target \"#search-results\"\n  :sx-swap \"innerHTML\"\n  :placeholder \"Search...\")"
-    :handler-names (list "ex-search")
-    :comp-placeholder-id "search-comp"
-    :wire-placeholder-id "search-wire"))
-
-(defcomp
-  ~examples-content/example-inline-validation
-  ()
-  (~examples/page-content
-    :title "Inline Validation"
-    :description "Validate an email field on blur. The server checks format and whether it is taken, returning green or red feedback inline."
-    :demo-description "Enter an email and click away (blur) to validate."
-    :demo (~examples/inline-validation-demo)
-    :sx-code "(input :type \"text\" :name \"email\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.validate))))\"\n  :sx-trigger \"blur\"\n  :sx-target \"#email-feedback\"\n  :sx-swap \"innerHTML\"\n  :placeholder \"user@example.com\")"
-    :handler-names (list "ex-validate")
-    :comp-placeholder-id "validate-comp"
-    :wire-placeholder-id "validate-wire"))
-
-(defcomp
-  ~examples-content/example-value-select
-  ()
-  (~examples/page-content
-    :title "Value Select"
-    :description "Two linked selects: pick a category and the second select updates with matching items via sx-get."
-    :demo-description "Select a category to populate the item dropdown."
-    :demo (~examples/value-select-demo)
-    :sx-code "(select :name \"category\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.values))))\"\n  :sx-trigger \"change\"\n  :sx-target \"#value-items\"\n  :sx-swap \"innerHTML\"\n  (option \"Languages\")\n  (option \"Frameworks\")\n  (option \"Databases\"))"
-    :handler-names (list "ex-values")
-    :comp-placeholder-id "values-comp"
-    :wire-placeholder-id "values-wire"))
-
-(defcomp
-  ~examples-content/example-reset-on-submit
-  ()
-  (~examples/page-content
-    :title "Reset on Submit"
-    :description "Use sx-on:afterSwap=\"this.reset()\" to clear form inputs after a successful submission."
-    :demo-description "Submit a message — the input resets after each send."
-    :demo (~examples/reset-on-submit-demo)
-    :sx-code "(form :id \"reset-form\"\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.reset-submit))))\"\n  :sx-target \"#reset-result\"\n  :sx-swap \"innerHTML\"\n  :sx-on:afterSwap \"this.reset()\"\n  (input :type \"text\" :name \"message\")\n  (button :type \"submit\" \"Send\"))"
-    :handler-names (list "ex-reset-submit")
-    :comp-placeholder-id "reset-comp"
-    :wire-placeholder-id "reset-wire"))
-
-(defcomp
-  ~examples-content/example-edit-row
-  ()
-  (~examples/page-content
-    :title "Edit Row"
-    :description "Click edit to replace a table row with input fields. Save or cancel swaps back the display row. Uses sx-include to gather form values from the row."
-    :demo-description "Click edit on any row to modify it inline."
-    :demo (~examples/edit-row-demo
-      :rows (list
-        (list "1" "Widget A" "19.99" "142")
-        (list "2" "Widget B" "24.50" "89")
-        (list "3" "Widget C" "12.00" "305")
-        (list "4" "Widget D" "45.00" "67")))
-    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.(editrow.1)))))\"\n  :sx-target \"#erow-1\"\n  :sx-swap \"outerHTML\"\n  \"edit\")\n\n;; Save sends form data via POST\n(button\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.(editrow.1)))))\"\n  :sx-target \"#erow-1\"\n  :sx-swap \"outerHTML\"\n  :sx-include \"#erow-1\"\n  \"save\")"
-    :handler-names (list "ex-editrow-form" "ex-editrow-save")
-    :comp-placeholder-id "editrow-comp"
-    :wire-placeholder-id "editrow-wire"))
-
-(defcomp
-  ~examples-content/example-bulk-update
-  ()
-  (~examples/page-content
-    :title "Bulk Update"
-    :description "Select rows with checkboxes and use Activate/Deactivate buttons. sx-include gathers checkbox values from the form."
-    :demo-description "Check some rows, then click Activate or Deactivate."
-    :demo (~examples/bulk-update-demo
-      :users (list
-        (list "1" "Alice Chen" "alice@example.com" "active")
-        (list "2" "Bob Rivera" "bob@example.com" "inactive")
-        (list "3" "Carol Zhang" "carol@example.com" "active")
-        (list "4" "Dan Okafor" "dan@example.com" "inactive")
-        (list "5" "Eve Larsson" "eve@example.com" "active")))
-    :sx-code "(button\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.bulk))))?action=activate\"\n  :sx-target \"#bulk-table\"\n  :sx-swap \"innerHTML\"\n  :sx-include \"#bulk-form\"\n  \"Activate\")"
-    :handler-names (list "ex-bulk")
-    :comp-placeholder-id "bulk-comp"
-    :wire-placeholder-id "bulk-wire"))
-
-(defcomp
-  ~examples-content/example-swap-positions
-  ()
-  (~examples/page-content
-    :title "Swap Positions"
-    :description "Demonstrates different swap modes: beforeend appends, afterbegin prepends, and none skips the main swap while still processing OOB updates."
-    :demo-description "Try each button to see different swap behaviours."
-    :demo (~examples/swap-positions-demo)
-    :sx-code ";; Append to end\n(button :sx-post \"/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=beforeend\"\n  :sx-target \"#swap-log\" :sx-swap \"beforeend\"\n  \"Add to End\")\n\n;; Prepend to start\n(button :sx-post \"/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=afterbegin\"\n  :sx-target \"#swap-log\" :sx-swap \"afterbegin\"\n  \"Add to Start\")\n\n;; No swap — OOB counter update only\n(button :sx-post \"/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=none\"\n  :sx-target \"#swap-log\" :sx-swap \"none\"\n  \"Silent Ping\")"
-    :handler-names (list "ex-swap-log")
-    :wire-placeholder-id "swap-wire"))
-
-(defcomp
-  ~examples-content/example-select-filter
-  ()
-  (~examples/page-content
-    :title "Select Filter"
-    :description "sx-select lets the client pick a specific section from the server response by CSS selector. The server always returns the full dashboard — the client filters."
-    :demo-description "Different buttons select different parts of the same server response."
-    :demo (~examples/select-filter-demo)
-    :sx-code ";; Pick just the stats section from the response\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dashboard))))\"\n  :sx-target \"#filter-target\"\n  :sx-swap \"innerHTML\"\n  :sx-select \"#dash-stats\"\n  \"Stats Only\")\n\n;; No sx-select — get the full response\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dashboard))))\"\n  :sx-target \"#filter-target\"\n  :sx-swap \"innerHTML\"\n  \"Full Dashboard\")"
-    :handler-names (list "ex-dashboard")
-    :wire-placeholder-id "filter-wire"))
-
-(defcomp
-  ~examples-content/example-tabs
-  ()
-  (~examples/page-content
-    :title "Tabs"
-    :description "Tab navigation using sx-push-url to update the browser URL. Back/forward buttons navigate between previously visited tabs."
-    :demo-description "Click tabs to switch content. Watch the browser URL change."
-    :demo (~examples/tabs-demo)
-    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.(tabs.tab1)))))\"\n  :sx-target \"#tab-content\"\n  :sx-swap \"innerHTML\"\n  :sx-push-url \"/sx/(geography.(hypermedia.(example.tabs)))?tab=tab1\"\n  \"Overview\")"
-    :handler-names (list "ex-tabs")
-    :wire-placeholder-id "tabs-wire"))
-
-(defcomp
-  ~examples-content/example-animations
-  ()
-  (~examples/page-content
-    :title "Animations"
-    :description "CSS animations play on swap. The component injects a style tag with a keyframe animation and applies the class. Each click picks a random background colour."
-    :demo-description "Click to swap in content with a fade-in animation."
-    :demo (~examples/animations-demo)
-    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.animate))))\"\n  :sx-target \"#anim-target\"\n  :sx-swap \"innerHTML\"\n  \"Load with animation\")\n\n;; Component uses CSS animation class\n(defcomp ~examples-content/anim-result (&key color time)\n  (div :class \"sx-fade-in ...\"\n    (style \".sx-fade-in { animation: sxFadeIn 0.5s }\")\n    (p \"Faded in!\")))"
-    :handler-names (list "ex-animate")
-    :comp-placeholder-id "anim-comp"
-    :wire-placeholder-id "anim-wire"))
-
-(defcomp
-  ~examples-content/example-dialogs
-  ()
-  (~examples/page-content
-    :title "Dialogs"
-    :description "Open a modal dialog by swapping in the dialog component. Close by swapping in empty content. Pure sx — no JavaScript library needed."
-    :demo-description "Click to open a modal dialog."
-    :demo (~examples/dialogs-demo)
-    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dialog))))\"\n  :sx-target \"#dialog-container\"\n  :sx-swap \"innerHTML\"\n  \"Open Dialog\")\n\n;; Dialog closes by swapping empty content\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dialog-close))))\"\n  :sx-target \"#dialog-container\"\n  :sx-swap \"innerHTML\"\n  \"Close\")"
-    :handler-names (list "ex-dialog" "ex-dialog-close")
-    :comp-placeholder-id "dialog-comp"
-    :wire-placeholder-id "dialog-wire"))
-
-(defcomp
-  ~examples-content/example-keyboard-shortcuts
-  ()
-  (~examples/page-content
-    :title "Keyboard Shortcuts"
-    :description "Use sx-trigger with keyup event filters and from:body to listen for global keyboard shortcuts. The filter prevents firing when typing in inputs."
-    :demo-description "Press s, n, or h on your keyboard."
-    :demo (~examples/keyboard-shortcuts-demo)
-    :sx-code "(div :id \"kbd-target\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.keyboard))))?key=s\"\n  :sx-trigger \"keyup[key=='s'&&!event.target.matches('input,textarea')] from:body\"\n  :sx-swap \"innerHTML\"\n  \"Press a shortcut key...\")"
-    :handler-names (list "ex-keyboard")
-    :comp-placeholder-id "kbd-comp"
-    :wire-placeholder-id "kbd-wire"))
-
-(defcomp
-  ~examples-content/example-put-patch
-  ()
-  (~examples/page-content
-    :title "PUT / PATCH"
-    :description "sx-put replaces the entire resource. This example shows a profile card with an Edit All button that sends a PUT with all fields."
-    :demo-description "Click Edit All to replace the full profile via PUT."
-    :demo (~examples/put-patch-demo
-      :name "Ada Lovelace"
-      :email "ada@example.com"
-      :role "Engineer")
-    :sx-code ";; Replace entire resource\n(form :sx-put \"/sx/(geography.(hypermedia.(example.(api.putpatch))))\"\n  :sx-target \"#pp-target\" :sx-swap \"innerHTML\"\n  (input :name \"name\") (input :name \"email\")\n  (button \"Save All (PUT)\"))"
-    :handler-names (list "ex-pp-edit-all" "ex-pp-put")
-    :comp-placeholder-id "pp-comp"
-    :wire-placeholder-id "pp-wire"))
-
-(defcomp
-  ~examples-content/example-json-encoding
-  ()
-  (~examples/page-content
-    :title "JSON Encoding"
-    :description "Use sx-encoding=\"json\" to send form data as a JSON body instead of URL-encoded form data. The server echoes back what it received."
-    :demo-description "Submit the form and see the JSON body the server received."
-    :demo (~examples/json-encoding-demo)
-    :sx-code "(form\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.json-echo))))\"\n  :sx-target \"#json-result\"\n  :sx-swap \"innerHTML\"\n  :sx-encoding \"json\"\n  (input :name \"name\" :value \"Ada\")\n  (input :type \"number\" :name \"age\" :value \"36\")\n  (button \"Submit as JSON\"))"
-    :handler-names (list "ex-json-echo")
-    :comp-placeholder-id "json-comp"
-    :wire-placeholder-id "json-wire"))
-
-(defcomp
-  ~examples-content/example-vals-and-headers
-  ()
-  (~examples/page-content
-    :title "Vals & Headers"
-    :description "sx-vals adds extra key/value pairs to the request parameters. sx-headers adds custom HTTP headers. The server echoes back what it received."
-    :demo-description "Click each button to see what the server receives."
-    :demo (~examples/vals-headers-demo)
-    :sx-code ";; Send extra values with the request\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.echo-vals))))\"\n  :sx-vals \"{\\\"source\\\": \\\"button\\\"}\"\n  \"Send with vals\")\n\n;; Send custom headers\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.echo-headers))))\"\n  :sx-headers {:X-Custom-Token \"abc123\"}\n  \"Send with headers\")"
-    :handler-names (list "ex-echo-vals" "ex-echo-headers")
-    :comp-placeholder-id "vals-comp"
-    :wire-placeholder-id "vals-wire"))
-
-(defcomp
-  ~examples-content/example-loading-states
-  ()
-  (~examples/page-content
-    :title "Loading States"
-    :description "sx.js adds the .sx-request CSS class to any element that has an active request. Use pure CSS to show spinners, disable buttons, or change opacity during loading."
-    :demo-description "Click the button — it shows a spinner during the 2-second request."
-    :demo (~examples/loading-states-demo)
-    :sx-code ";; .sx-request class added during request\n(style \".sx-loading-btn.sx-request {\n  opacity: 0.7; pointer-events: none; }\n.sx-loading-btn.sx-request .sx-spinner {\n  display: inline-block; }\n.sx-loading-btn .sx-spinner {\n  display: none; }\")\n\n(button :class \"sx-loading-btn\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.slow))))\"\n  :sx-target \"#loading-result\"\n  (span :class \"sx-spinner animate-spin\" \"...\")\n  \"Load slow endpoint\")"
-    :handler-names (list "ex-slow")
-    :comp-placeholder-id "loading-comp"
-    :wire-placeholder-id "loading-wire"))
-
-(defcomp
-  ~examples-content/example-sync-replace
-  ()
-  (~examples/page-content
-    :title "Request Abort"
-    :description "sx-sync=\"replace\" aborts any in-flight request before sending a new one. This prevents stale responses from overwriting newer ones, even with random server delays."
-    :demo-description "Type quickly — only the latest result appears despite random 0.5-2s server delays."
-    :demo (~examples/sync-replace-demo)
-    :sx-code "(input :type \"text\" :name \"q\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.slow-search))))\"\n  :sx-trigger \"keyup delay:200ms changed\"\n  :sx-target \"#sync-result\"\n  :sx-swap \"innerHTML\"\n  :sx-sync \"replace\"\n  \"Type to search...\")"
-    :handler-names (list "ex-slow-search")
-    :comp-placeholder-id "sync-comp"
-    :wire-placeholder-id "sync-wire"))
-
-(defcomp
-  ~examples-content/example-retry
-  ()
-  (~examples/page-content
-    :title "Retry"
-    :description "sx-retry=\"exponential:1000:8000\" retries failed requests with exponential backoff starting at 1s up to 8s. The endpoint fails the first 2 attempts and succeeds on the 3rd."
-    :demo-description "Click the button — watch it retry automatically after failures."
-    :demo (~examples/retry-demo)
-    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.flaky))))\"\n  :sx-target \"#retry-result\"\n  :sx-swap \"innerHTML\"\n  :sx-retry \"exponential:1000:8000\"\n  \"Call flaky endpoint\")"
-    :handler-names (list "ex-flaky")
-    :comp-placeholder-id "retry-comp"
-    :wire-placeholder-id "retry-wire"))
diff --git a/sx/sx/geography/capabilities.sx b/sx/sx/geography/capabilities/index.sx
similarity index 99%
rename from sx/sx/geography/capabilities.sx
rename to sx/sx/geography/capabilities/index.sx
index a8876764..6acad5c7 100644
--- a/sx/sx/geography/capabilities.sx
+++ b/sx/sx/geography/capabilities/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~geography/capabilities-content
   ()
   (~docs/page
     :title "Capabilities"
diff --git a/sx/sx/geography/cek.sx b/sx/sx/geography/cek.sx
deleted file mode 100644
index f6a62c2f..00000000
--- a/sx/sx/geography/cek.sx
+++ /dev/null
@@ -1,1272 +0,0 @@
-(defisland
-  ~geography/cek/demo-counter
-  (&key initial)
-  (let
-    ((count (signal (or initial 0)))
-      (doubled (computed (fn () (* 2 (deref count))))))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-2")
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
-          :on-click (fn (e) (swap! count dec))
-          "-")
-        (span
-          (~tw :tokens "text-2xl font-bold text-violet-700 min-w-[3ch] text-center")
-          (deref count))
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
-          :on-click (fn (e) (swap! count inc))
-          "+"))
-      (p (~tw :tokens "text-sm text-stone-500") (str "doubled: " (deref doubled))))))
-
-(defisland
-  ~geography/cek/demo-chain
-  ()
-  (let
-    ((base (signal 1))
-      (doubled (computed (fn () (* (deref base) 2))))
-      (quadrupled (computed (fn () (* (deref doubled) 2)))))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-2")
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
-          :on-click (fn (e) (swap! base dec))
-          "-")
-        (span
-          (~tw :tokens "text-2xl font-bold text-violet-700 min-w-[3ch] text-center")
-          (deref base))
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
-          :on-click (fn (e) (swap! base inc))
-          "+"))
-      (p
-        (~tw :tokens "text-sm text-stone-500")
-        (str
-          "doubled: "
-          (deref doubled)
-          "  |  quadrupled: "
-          (deref quadrupled))))))
-
-(defisland
-  ~geography/cek/demo-reactive-attr
-  ()
-  (let
-    ((danger (signal false)))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-3")
-      (button
-        (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
-        :on-click (fn (e) (swap! danger not))
-        (if (deref danger) "Safe mode" "Danger mode"))
-      (div
-        :class (str
-          "p-3 rounded font-medium transition-colors "
-          (if
-            (deref danger)
-            "bg-red-100 text-red-800"
-            "bg-green-100 text-green-800"))
-        (if
-          (deref danger)
-          "DANGER: reactive class binding via CEK"
-          "SAFE: reactive class binding via CEK")))))
-
-(defisland
-  ~geography/cek/demo-stopwatch
-  ()
-  (let
-    ((running (signal false))
-      (elapsed (signal 0))
-      (time-text (create-text-node "0.0s"))
-      (btn-text (create-text-node "Start"))
-      (_e1
-        (effect
-          (fn
-            ()
-            (when
-              (deref running)
-              (let
-                ((id (set-interval (fn () (swap! elapsed inc)) 100)))
-                (fn () (clear-interval id)))))))
-      (_e2
-        (effect
-          (fn
-            ()
-            (let
-              ((e (deref elapsed)))
-              (dom-set-text-content
-                time-text
-                (str (floor (/ e 10)) "." (mod e 10) "s"))))))
-      (_e3
-        (effect
-          (fn
-            ()
-            (dom-set-text-content
-              btn-text
-              (if (deref running) "Stop" "Start"))))))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 p-4")
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (span
-          (~tw :tokens "text-2xl font-bold text-violet-700 font-mono min-w-[5ch]")
-          time-text)
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
-          :on-click (fn (e) (swap! running not))
-          btn-text)
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-400 text-white text-sm")
-          :on-click (fn (e) (reset! running false) (reset! elapsed 0))
-          "Reset")))))
-
-(defisland
-  ~geography/cek/demo-batch
-  ()
-  (let
-    ((first-sig (signal 0))
-      (second-sig (signal 0))
-      (renders (signal 0))
-      (_eff
-        (effect
-          (fn () (deref first-sig) (deref second-sig) (swap! renders inc)))))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-2")
-      (div
-        (~tw :tokens "flex items-center gap-4 text-sm")
-        (span (str "first: " (deref first-sig)))
-        (span (str "second: " (deref second-sig)))
-        (span
-          (~tw :tokens "px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-semibold")
-          (str "renders: " (deref renders))))
-      (div
-        (~tw :tokens "flex items-center gap-2")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
-          :on-click (fn
-            (e)
-            (batch (fn () (swap! first-sig inc) (swap! second-sig inc))))
-          "Batch +1")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-400 text-white text-sm")
-          :on-click (fn (e) (swap! first-sig inc) (swap! second-sig inc))
-          "No-batch +1")))))
-
-(defcomp
-  ~geography/cek/cek-content
-  ()
-  (~docs/page
-    :title "CEK Machine"
-    (~docs/section
-      :title "Three registers"
-      :id "registers"
-      (p
-        "The CEK machine makes evaluation explicit. Every step is a pure function from state to state:")
-      (ul
-        (~tw :tokens "space-y-1 text-stone-600 list-disc pl-5")
-        (li (strong "C") "ontrol — the expression being evaluated")
-        (li (strong "E") "nvironment — the bindings in scope")
-        (li (strong "K") "ontinuation — what to do with the result"))
-      (p
-        "The tree-walk evaluator uses the same three things, but hides them in the call stack. The CEK makes them "
-        (em "data")
-        " — inspectable, serializable, capturable."))
-    (~docs/section
-      :title "Why it matters"
-      :id "why"
-      (p "Making the continuation explicit enables:")
-      (ul
-        (~tw :tokens "space-y-1 text-stone-600 list-disc pl-5")
-        (li
-          (strong "Stepping")
-          " — pause evaluation, inspect state, resume")
-        (li
-          (strong "Serialization")
-          " — save a computation mid-flight, restore later")
-        (li
-          (strong "Delimited continuations")
-          " — "
-          (code "shift")
-          "/"
-          (code "reset")
-          " capture \"the rest of this expression\" as a value")
-        (li
-          (strong "Deref-as-shift")
-          " — "
-          (code "(deref sig)")
-          " inside a reactive boundary captures the continuation as the subscriber")))
-    (~docs/section
-      :title "Default evaluator"
-      :id "default"
-      (p
-        "CEK is the default evaluator on both client (JS) and server (Python). Every "
-        (code "eval-expr")
-        " call goes through "
-        (code "cek-run")
-        ". The tree-walk evaluator is preserved as "
-        (code "_tree_walk_eval_expr")
-        " for test runners that interpret "
-        (code ".sx")
-        " files.")
-      (p "The CEK is defined in two spec files:")
-      (ul
-        (~tw :tokens "space-y-1 text-stone-600 list-disc pl-5")
-        (li
-          (code "frames.sx")
-          " — frame types (IfFrame, ArgFrame, ResetFrame, ReactiveResetFrame, ...)")
-        (li
-          (code "cek.sx")
-          " — step function, run loop, special form handlers, continuation operations")))
-    (~docs/section
-      :title "Deref as shift"
-      :id "deref-as-shift"
-      (p
-        "The reactive payoff. When "
-        (code "(deref sig)")
-        " encounters a signal inside a "
-        (code "reactive-reset")
-        " boundary:")
-      (ol
-        (~tw :tokens "space-y-1 text-stone-600 list-decimal pl-5")
-        (li
-          (strong "Shift")
-          " — capture all frames between here and the reactive-reset")
-        (li
-          (strong "Subscribe")
-          " — register the captured continuation as a signal subscriber")
-        (li
-          (strong "Return")
-          " — flow the current signal value through the rest of the expression"))
-      (p
-        "When the signal changes, the captured continuation is re-invoked with the new value. The "
-        (code "update-fn")
-        " on the ReactiveResetFrame mutates the DOM. No explicit "
-        (code "effect()")
-        " wrapping needed.")
-      (~docs/code
-        :src (highlight
-          ";; User writes:\n(div :class (str \"count-\" (deref counter))\n  (str \"Value: \" (deref counter)))\n\n;; CEK sees (deref counter) → signal? → reactive-reset on stack?\n;; Yes: capture (str \"count-\" [HOLE]) as continuation\n;; Register as subscriber. Return current value.\n;; When counter changes: re-invoke continuation → update DOM."
-          "lisp")))))
-
-(defisland
-  ~geography/cek/demo-stepper
-  (&key initial-expr)
-  (let
-    ((source (signal (or initial-expr "(+ 1 (* 2 3))")))
-      (state (signal nil))
-      (steps (signal 0))
-      (history (signal (list)))
-      (error-msg (signal nil)))
-    (define
-      start-eval
-      (fn
-        ()
-        (reset! error-msg nil)
-        (reset! history (list))
-        (reset! steps 0)
-        (let
-          ((parsed (sx-parse (deref source))))
-          (if
-            (empty? parsed)
-            (reset! error-msg "Parse error: empty expression")
-            (reset!
-              state
-              (make-cek-state (first parsed) (make-env) (list)))))))
-    (define
-      do-step
-      (fn
-        ()
-        (when
-          (and (deref state) (not (cek-terminal? (deref state))))
-          (let
-            ((prev (deref state)))
-            (swap! history (fn (h) (append h (list prev))))
-            (swap! steps inc)
-            (reset! state (cek-step prev))))))
-    (define
-      do-run
-      (fn
-        ()
-        (when
-          (deref state)
-          (let
-            run-loop
-            ((n 0))
-            (when
-              (and (not (cek-terminal? (deref state))) (< n 200))
-              (do-step)
-              (run-loop (+ n 1)))))))
-    (define
-      do-reset
-      (fn
-        ()
-        (reset! state nil)
-        (reset! steps 0)
-        (reset! history (list))
-        (reset! error-msg nil)))
-    (define
-      fmt-control
-      (fn
-        (s)
-        (if
-          (nil? s)
-          "—"
-          (let
-            ((c (get s "control")))
-            (if (nil? c) "—" (sx-serialize c))))))
-    (define
-      fmt-value
-      (fn
-        (s)
-        (if
-          (nil? s)
-          "—"
-          (let
-            ((v (get s "value")))
-            (cond
-              (nil? v)
-              "nil"
-              (callable? v)
-              (str "λ:" (or (lambda-name v) "fn"))
-              :else (sx-serialize v))))))
-    (define
-      fmt-kont
-      (fn
-        (s)
-        (if
-          (nil? s)
-          "—"
-          (let
-            ((k (get s "kont")))
-            (if
-              (empty? k)
-              "[]"
-              (str "[" (join " " (map (fn (f) (get f "type")) k)) "]"))))))
-    (start-eval)
-    (div
-      (~tw :tokens "space-y-4")
-      (div
-        (~tw :tokens "flex gap-2 items-end")
-        (div
-          (~tw :tokens "flex-1")
-          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Expression")
-          (input
-            :type "text"
-            :bind source
-            (~tw :tokens "w-full px-3 py-1.5 rounded border border-stone-300 font-mono text-sm focus:outline-none focus:border-violet-400")
-            :on-change (fn (e) (start-eval))))
-        (div
-          (~tw :tokens "flex gap-1")
-          (button
-            :on-click (fn (e) (start-eval))
-            (~tw :tokens "px-3 py-1.5 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
-            "Reset")
-          (button
-            :on-click (fn (e) (do-step))
-            (~tw :tokens "px-3 py-1.5 rounded bg-violet-500 text-white text-sm hover:bg-violet-600")
-            "Step")
-          (button
-            :on-click (fn (e) (do-run))
-            (~tw :tokens "px-3 py-1.5 rounded bg-violet-700 text-white text-sm hover:bg-violet-800")
-            "Run")))
-      (when
-        (deref error-msg)
-        (div (~tw :tokens "text-red-600 text-sm") (deref error-msg)))
-      (when
-        (deref state)
-        (div
-          (~tw :tokens "rounded border border-stone-200 bg-white p-3 font-mono text-sm space-y-1")
-          (div
-            (~tw :tokens "flex gap-4")
-            (span (~tw :tokens "text-stone-400 w-16") "Step")
-            (span (~tw :tokens "font-bold") (deref steps)))
-          (div
-            (~tw :tokens "flex gap-4")
-            (span (~tw :tokens "text-stone-400 w-16") "Phase")
-            (span
-              :class (str
-                "font-bold "
-                (if
-                  (= (get (deref state) "phase") "eval")
-                  "text-blue-600"
-                  "text-green-600"))
-              (get (deref state) "phase")))
-          (div
-            (~tw :tokens "flex gap-4")
-            (span (~tw :tokens "text-violet-500 w-16") "C")
-            (span (fmt-control (deref state))))
-          (div
-            (~tw :tokens "flex gap-4")
-            (span (~tw :tokens "text-amber-600 w-16") "V")
-            (span (fmt-value (deref state))))
-          (div
-            (~tw :tokens "flex gap-4")
-            (span (~tw :tokens "text-emerald-600 w-16") "K")
-            (span (fmt-kont (deref state))))
-          (when
-            (cek-terminal? (deref state))
-            (div
-              (~tw :tokens "mt-2 pt-2 border-t border-stone-200 text-stone-800 font-bold")
-              (str "Result: " (sx-serialize (cek-value (deref state))))))))
-      (when
-        (not (empty? (deref history)))
-        (div
-          (~tw :tokens "rounded border border-stone-100 bg-stone-50 p-2")
-          (div (~tw :tokens "text-xs text-stone-400 mb-1") "History")
-          (div
-            (~tw :tokens "space-y-0.5 font-mono text-xs max-h-48 overflow-y-auto")
-            (map-indexed
-              (fn
-                (i s)
-                (div
-                  (~tw :tokens "flex gap-2 text-stone-500")
-                  (span (~tw :tokens "text-stone-300 w-6 text-right") (+ i 1))
-                  (span
-                    :class (if
-                      (= (get s "phase") "eval")
-                      "text-blue-400"
-                      "text-green-400")
-                    (get s "phase"))
-                  (span (~tw :tokens "text-violet-400 truncate") (fmt-control s))
-                  (span (~tw :tokens "text-amber-400") (fmt-value s))
-                  (span (~tw :tokens "text-emerald-400") (fmt-kont s))))
-              (deref history))))))))
-
-(defisland
-  ~geography/cek/demo-render-stepper
-  (&key initial-expr)
-  (let
-    ((source (signal (or initial-expr "(div (~cssx/tw :tokens \"p-6 rounded-lg border border-stone-200 bg-white text-center\")\n  (h1 (~cssx/tw :tokens \"text-3xl font-bold mb-2\")\n    (span (~cssx/tw :tokens \"text-rose-500\") \"the \")\n    (span (~cssx/tw :tokens \"text-amber-500\") \"joy \")\n    (span (~cssx/tw :tokens \"text-emerald-500\") \"of \")\n    (span (~cssx/tw :tokens \"text-violet-600 text-4xl\") \"sx\")))")))
-      (steps (signal (list)))
-      (step-idx (signal 0))
-      (parsed-ok (signal false))
-      (error-msg (signal nil))
-      (dom-stack-sig (signal (list))))
-    (letrec
-      ((split-tag (fn (expr result) (cond (not (list? expr)) (append! result {:expr expr :type "leaf"}) (empty? expr) nil (not (= (type-of (first expr)) "symbol")) (append! result {:expr expr :type "leaf"}) (is-html-tag? (symbol-name (first expr))) (let ((ctag (symbol-name (first expr))) (cargs (rest expr)) (cch (list)) (cat (list)) (spreads (list)) (ckw false)) (for-each (fn (a) (cond (= (type-of a) "keyword") (do (set! ckw true) (append! cat a)) ckw (do (set! ckw false) (append! cat a)) (and (list? a) (not (empty? a)) (= (type-of (first a)) "symbol") (starts-with? (symbol-name (first a)) "~")) (do (set! ckw false) (append! spreads a)) :else (do (set! ckw false) (append! cch a)))) cargs) (append! result {:spreads spreads :tag ctag :type "open" :attrs cat}) (for-each (fn (c) (split-tag c result)) cch) (append! result {:tag ctag :type "close"})) :else (append! result {:expr expr :type "expr"}))))
-        (get-preview (fn () (dom-query "[data-sx-lake=\"preview\"]")))
-        (get-stack (fn () (deref dom-stack-sig)))
-        (set-stack (fn (v) (reset! dom-stack-sig v)))
-        (push-stack
-          (fn
-            (el)
-            (reset! dom-stack-sig (append (deref dom-stack-sig) (list el)))))
-        (pop-stack
-          (fn
-            ()
-            (let
-              ((s (deref dom-stack-sig)))
-              (when
-                (> (len s) 1)
-                (reset! dom-stack-sig (slice s 0 (- (len s) 1)))))))
-        (do-parse
-          (fn
-            ()
-            (reset! error-msg nil)
-            (reset! step-idx 0)
-            (reset! parsed-ok false)
-            (set-stack (list))
-            (let
-              ((container (get-preview)))
-              (when container (dom-set-prop container "innerHTML" "")))
-            (let
-              ((parsed (sx-parse (deref source))))
-              (if
-                (empty? parsed)
-                (do (reset! error-msg "Parse error") (reset! steps (list)))
-                (let
-                  ((result (list)))
-                  (split-tag (first parsed) result)
-                  (reset! steps result)
-                  (reset! parsed-ok true)
-                  (set-stack (list (get-preview))))))))
-        (do-step
-          (fn
-            ()
-            (when
-              (and
-                (deref parsed-ok)
-                (< (deref step-idx) (len (deref steps))))
-              (let
-                ((step (nth (deref steps) (deref step-idx)))
-                  (step-type (get step "type"))
-                  (stack (get-stack))
-                  (parent
-                    (if
-                      (empty? (get-stack))
-                      (get-preview)
-                      (last (get-stack)))))
-                (cond
-                  (= step-type "open")
-                  (let
-                    ((el (dom-create-element (get step "tag") nil))
-                      (attrs (get step "attrs"))
-                      (spreads (or (get step "spreads") (list))))
-                    (let
-                      loop
-                      ((i 0))
-                      (when
-                        (< i (len attrs))
-                        (dom-set-attr
-                          el
-                          (keyword-name (nth attrs i))
-                          (nth attrs (+ i 1)))
-                        (loop (+ i 2))))
-                    (for-each
-                      (fn
-                        (sp)
-                        (let
-                          ((result (eval-expr sp (make-env))))
-                          (when
-                            (and result (spread? result))
-                            (let
-                              ((sattrs (spread-attrs result)))
-                              (for-each
-                                (fn
-                                  (k)
-                                  (if
-                                    (= k "class")
-                                    (dom-set-attr
-                                      el
-                                      "class"
-                                      (str
-                                        (or (dom-get-attr el "class") "")
-                                        " "
-                                        (get sattrs k)))
-                                    (dom-set-attr el k (get sattrs k))))
-                                (keys sattrs))))))
-                      spreads)
-                    (when parent (dom-append parent el))
-                    (push-stack el))
-                  (= step-type "close")
-                  (pop-stack)
-                  (= step-type "leaf")
-                  (when
-                    parent
-                    (let
-                      ((val (get step "expr")))
-                      (dom-append
-                        parent
-                        (create-text-node (if (string? val) val (str val))))))
-                  (= step-type "expr")
-                  (let
-                    ((rendered (render-to-dom (get step "expr") (make-env) nil)))
-                    (when (and parent rendered) (dom-append parent rendered)))))
-              (swap! step-idx inc))))
-        (do-run
-          (fn
-            ()
-            (let
-              loop
-              ()
-              (when
-                (< (deref step-idx) (len (deref steps)))
-                (do-step)
-                (loop)))))
-        (do-back
-          (fn
-            ()
-            (when
-              (and (deref parsed-ok) (> (deref step-idx) 0))
-              (let
-                ((target (- (deref step-idx) 1))
-                  (container (get-preview)))
-                (when container (dom-set-prop container "innerHTML" ""))
-                (set-stack (list (get-preview)))
-                (reset! step-idx 0)
-                (for-each
-                  (fn (_) (do-step))
-                  (slice (deref steps) 0 target)))))))
-      (div
-        (~tw :tokens "space-y-4")
-        (div
-          (label
-            (~tw :tokens "text-xs text-stone-400 block mb-1")
-            "Component expression")
-          (textarea
-            :bind source
-            :rows 4
-            (~tw :tokens "w-full px-3 py-2 rounded border border-stone-300 font-mono text-xs focus:outline-none focus:border-violet-400")))
-        (div
-          (~tw :tokens "flex gap-1")
-          (button
-            :on-click (fn (e) (do-parse))
-            (~tw :tokens "px-3 py-1.5 rounded bg-stone-700 text-white text-sm hover:bg-stone-800")
-            "Parse")
-          (button
-            :on-click (fn (e) (do-back))
-            :class (str
-              "px-3 py-1.5 rounded text-sm "
-              (if
-                (and (deref parsed-ok) (> (deref step-idx) 0))
-                "bg-stone-200 text-stone-700 hover:bg-stone-300"
-                "bg-stone-100 text-stone-300 cursor-not-allowed"))
-            "◀")
-          (button
-            :on-click (fn (e) (do-step))
-            :class (str
-              "px-3 py-1.5 rounded text-sm "
-              (if
-                (and
-                  (deref parsed-ok)
-                  (< (deref step-idx) (len (deref steps))))
-                "bg-violet-500 text-white hover:bg-violet-600"
-                "bg-violet-200 text-violet-400 cursor-not-allowed"))
-            "Step ▶")
-          (button
-            :on-click (fn (e) (do-run))
-            :class (str
-              "px-3 py-1.5 rounded text-sm "
-              (if
-                (deref parsed-ok)
-                "bg-violet-700 text-white hover:bg-violet-800"
-                "bg-violet-200 text-violet-400 cursor-not-allowed"))
-            "Run ▶▶"))
-        (when
-          (deref error-msg)
-          (div (~tw :tokens "text-red-600 text-sm") (deref error-msg)))
-        (when
-          (and (deref parsed-ok) (= (deref step-idx) 0))
-          (div
-            (~tw :tokens "text-sm text-stone-500 bg-stone-50 rounded p-2")
-            (str
-              "Parsed "
-              (len (deref steps))
-              " render steps. Click Step to begin.")))
-        (div
-          (~tw :tokens "grid grid-cols-1 md:grid-cols-2 gap-4")
-          (when
-            (deref parsed-ok)
-            (div
-              (~tw :tokens "rounded border border-stone-200 bg-white p-3 min-h-24")
-              (div
-                (~tw :tokens "text-xs text-stone-400 mb-2")
-                (str
-                  (deref step-idx)
-                  " / "
-                  (len (deref steps))
-                  (if
-                    (= (deref step-idx) (len (deref steps)))
-                    " — complete"
-                    "")))
-              (div
-                (~tw :tokens "space-y-0.5 font-mono text-xs max-h-64 overflow-y-auto")
-                (map-indexed
-                  (fn
-                    (i step)
-                    (div
-                      :class (str
-                        "flex gap-2 px-1 rounded "
-                        (cond
-                          (= i (deref step-idx))
-                          "bg-violet-100 text-violet-700 font-bold"
-                          (< i (deref step-idx))
-                          "text-stone-400"
-                          :else "text-stone-300"))
-                      (span
-                        (~tw :tokens "w-4 text-right")
-                        (if (< i (deref step-idx)) "✓" (str (+ i 1))))
-                      (span
-                        (~tw :tokens "truncate")
-                        (let
-                          ((lbl (get step "label")))
-                          (if
-                            lbl
-                            (if
-                              (> (len lbl) 60)
-                              (str (slice lbl 0 57) "...")
-                              lbl)
-                            (let
-                              ((tp (get step "type")))
-                              (cond
-                                (= tp "open")
-                                (str "<" (get step "tag") ">")
-                                (= tp "close")
-                                (str "</" (get step "tag") ">")
-                                :else (sx-serialize (get step "expr")))))))))
-                  (deref steps)))))
-          (div
-            (~tw :tokens "rounded border border-stone-200 p-3 min-h-24")
-            (div (~tw :tokens "text-xs text-stone-400 mb-2") "Live DOM")
-            (lake :id "preview")))))))
-
-(defisland
-  ~geography/cek/content-address-demo
-  ()
-  (let
-    ((count (signal 0))
-      (name (signal "world"))
-      (cid-display (signal ""))
-      (cid-input (signal ""))
-      (cid-history (signal (list)))
-      (status (signal "")))
-    (freeze-scope
-      "ca-demo"
-      (fn () (freeze-signal "count" count) (freeze-signal "name" name)))
-    (div
-      (~tw :tokens "space-y-4")
-      (div
-        (~tw :tokens "flex gap-4 items-center")
-        (div
-          (~tw :tokens "flex items-center gap-2")
-          (button
-            :on-click (fn (e) (swap! count dec))
-            (~tw
-              :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 hover:bg-stone-300")
-            "-")
-          (span
-            (~tw :tokens "font-mono text-lg font-bold w-8 text-center")
-            (deref count))
-          (button
-            :on-click (fn (e) (swap! count inc))
-            (~tw
-              :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 hover:bg-stone-300")
-            "+"))
-        (input
-          :type "text"
-          :bind name
-          (~tw
-            :tokens "px-3 py-1 rounded border border-stone-300 font-mono text-sm")))
-      (div
-        (~tw
-          :tokens "rounded bg-violet-50 border border-violet-200 p-3 text-violet-800")
-        "Hello, "
-        (deref name)
-        "! Count = "
-        (deref count))
-      (div
-        (~tw :tokens "flex gap-2")
-        (button
-          :on-click (fn
-            (e)
-            (let
-              ((cid (freeze-to-cid "ca-demo")))
-              (reset! cid-display cid)
-              (reset! status (str "Stored as " cid))
-              (swap! cid-history (fn (h) (append h (list cid))))))
-          (~tw
-            :tokens "px-3 py-1.5 rounded bg-stone-700 text-white text-sm hover:bg-stone-800")
-          "Content-address"))
-      (when
-        (not (empty? (deref cid-display)))
-        (div
-          (~tw
-            :tokens "font-mono text-sm bg-stone-50 rounded p-2 flex items-center gap-2")
-          (span (~tw :tokens "text-stone-400") "CID:")
-          (span
-            (~tw :tokens "text-violet-700 font-bold")
-            (deref cid-display))))
-      (when
-        (not (empty? (deref status)))
-        (div (~tw :tokens "text-xs text-emerald-600") (deref status)))
-      (div
-        (~tw :tokens "flex gap-2 items-end")
-        (div
-          (~tw :tokens "flex-1")
-          (label
-            (~tw :tokens "text-xs text-stone-400 block mb-1")
-            "Restore from CID")
-          (input
-            :type "text"
-            :bind cid-input
-            (~tw
-              :tokens "w-full px-3 py-1 rounded border border-stone-300 font-mono text-sm")))
-        (button
-          :on-click (fn
-            (e)
-            (if
-              (thaw-from-cid (deref cid-input))
-              (reset! status (str "Restored from " (deref cid-input)))
-              (reset! status (str "CID not found: " (deref cid-input)))))
-          (~tw
-            :tokens "px-3 py-1.5 rounded bg-emerald-600 text-white text-sm hover:bg-emerald-700")
-          "Restore"))
-      (when
-        (not (empty? (deref cid-history)))
-        (div
-          (~tw :tokens "space-y-1")
-          (label (~tw :tokens "text-xs text-stone-400 block") "History")
-          (map
-            (fn
-              (cid)
-              (button
-                :on-click (fn
-                  (e)
-                  (if
-                    (thaw-from-cid cid)
-                    (reset! status (str "Restored from " cid))
-                    (reset! status (str "CID not found: " cid))))
-                (~tw
-                  :tokens "block w-full text-left px-2 py-1 rounded bg-stone-50 hover:bg-stone-100 font-mono text-xs text-stone-600")
-                cid))
-            (deref cid-history)))))))
-
-(defcomp
-  ~geography/cek/cek-freeze-content
-  ()
-  (~docs/page
-    :title "Freeze / Thaw"
-    (p
-      (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "A computation is a value. Freeze it to an s-expression. "
-      "Store it, transmit it, content-address it. Thaw and resume anywhere.")
-    (~docs/section
-      :title "The idea"
-      :id "idea"
-      (p
-        "The CEK machine makes evaluation explicit: every step is a pure function from state to state. "
-        "The state is a dict with four fields:")
-      (ul
-        (~tw :tokens "list-disc pl-6 mb-4 space-y-1 text-stone-600")
-        (li (code "control") " — the expression being evaluated")
-        (li (code "env") " — the bindings in scope")
-        (li
-          (code "kont")
-          " — the continuation (what to do with the result)")
-        (li (code "phase") " — eval or continue"))
-      (p
-        "Since the state is data, it can be serialized. "
-        (code "cek-freeze")
-        " converts a live CEK state to pure s-expressions. "
-        (code "cek-thaw")
-        " reconstructs a live state from frozen SX. "
-        (code "cek-run")
-        " resumes from where it left off."))
-    (~docs/section
-      :title "Freeze"
-      :id "freeze"
-      (p "Take a computation mid-flight and freeze it:")
-      (~docs/code
-        :src (highlight
-          "(let ((expr (sx-parse \"(+ 1 (* 2 3))\"))\n      (state (make-cek-state (first expr) (make-env) (list))))\n  ;; Step 4 times\n  (set! state (cek-step (cek-step (cek-step (cek-step state)))))\n  ;; Freeze to SX\n  (cek-freeze state))"
-          "lisp"))
-      (p "The frozen state is pure SX:")
-      (~docs/code
-        :src (highlight
-          "{:phase \"continue\"\n :control nil\n :value 1\n :env {}\n :kont ({:type \"arg\"\n         :f (primitive \"+\")\n         :evaled ()\n         :remaining ((* 2 3))\n         :env {}})}"
-          "lisp"))
-      (p
-        "Everything is data. The continuation frame says: “I was adding 1 to something, "
-        "and I still need to evaluate "
-        (code "(* 2 3)")
-        ".”"))
-    (~docs/section
-      :title "Thaw and resume"
-      :id "thaw"
-      (p "Parse the frozen SX back. Thaw it. Resume:")
-      (~docs/code
-        :src (highlight
-          "(let ((frozen (sx-parse frozen-text))\n      (state (cek-thaw (first frozen))))\n  (cek-run state))\n;; => 7"
-          "lisp"))
-      (p
-        "Native functions like "
-        (code "+")
-        " serialize as "
-        (code "(primitive \"+\")")
-        " and are looked up in the primitive registry on thaw. "
-        "Lambdas serialize as their source AST — "
-        (code "(lambda (x) (* x 2))")
-        " — and reconstruct as callable functions."))
-    (~docs/section
-      :title "Live demo"
-      :id "demo"
-      (p
-        "Type an expression, step to any point, freeze the state. "
-        "The frozen SX appears below. Click Thaw to resume from the frozen state.")
-      (~geography/cek/freeze-demo))
-    (~docs/section
-      :title "Content addressing"
-      :id "content-addressing"
-      (p
-        "Hash the frozen SX "
-        (code "→")
-        " content identifier. "
-        "Same state always produces the same CID. Store by CID, retrieve by CID, verify by CID.")
-      (~docs/code
-        :src (highlight
-          "(freeze-to-cid \"widget\")\n;; => \"d9eea67b\"\n\n(thaw-from-cid \"d9eea67b\")\n;; Signals restored. Same CID = same state."
-          "lisp"))
-      (p
-        "Try it: change the values, click Content-address. Copy the CID. "
-        "Change the values again. Paste the CID and Restore.")
-      (~geography/cek/content-address-demo))
-    (~docs/section
-      :title "What this enables"
-      :id "enables"
-      (ul
-        (~tw :tokens "list-disc pl-6 mb-4 space-y-2 text-stone-600")
-        (li
-          (strong "Persistence")
-          " — save reactive island state to localStorage, "
-          "resume on page reload")
-        (li
-          (strong "Migration")
-          " — freeze a computation on one machine, "
-          "thaw on another. Same result, deterministically.")
-        (li
-          (strong "Content addressing")
-          " — hash the frozen SX → CID. "
-          "A pointer to a computation in progress, not just a value.")
-        (li
-          (strong "Time travel")
-          " — freeze at each step, store the history. "
-          "Jump to any point. Undo. Branch.")
-        (li
-          (strong "Verification")
-          " — re-run from a frozen state, "
-          "check the result matches. Reproducible computation."))
-      (p
-        "The Platonic argument made concrete: a computation IS a value. "
-        "The Form persists. The instance resumes."))))
-
-(defisland
-  ~geography/cek/freeze-demo
-  ()
-  (let
-    ((bg (signal "violet"))
-      (size (signal "text-2xl"))
-      (weight (signal "font-bold"))
-      (text (signal "the joy of sx"))
-      (saved (signal (list))))
-    (freeze-scope
-      "widget"
-      (fn
-        ()
-        (freeze-signal "bg" bg)
-        (freeze-signal "size" size)
-        (freeze-signal "weight" weight)
-        (freeze-signal "text" text)))
-    (span
-      (~tw
-        :tokens "hidden bg-violet-50 bg-rose-50 bg-emerald-50 bg-amber-50 bg-sky-50 bg-stone-50 border-violet-200 border-rose-200 border-emerald-200 border-amber-200 border-sky-200 border-stone-200 text-violet-700 text-rose-700 text-emerald-700 text-amber-700 text-sky-700 text-stone-700"))
-    (div
-      (~tw :tokens "space-y-4")
-      (div
-        (~tw :tokens "p-6 rounded-lg text-center transition-all border")
-        :class (str "bg-" (deref bg) "-50 border-" (deref bg) "-200")
-        (span
-          :class (str (deref size) " " (deref weight) " text-" (deref bg) "-700")
-          (deref text)))
-      (div
-        (~tw :tokens "grid grid-cols-2 gap-3")
-        (div
-          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Colour")
-          (div
-            (~tw :tokens "flex gap-1")
-            (button
-              :on-click (fn (e) (reset! bg "violet"))
-              (~tw :tokens "w-8 h-8 rounded-full")
-              :class (str
-                "bg-violet-400"
-                (if
-                  (= (deref bg) "violet")
-                  " ring-2 ring-offset-1 ring-stone-400"
-                  ""))
-              "")
-            (button
-              :on-click (fn (e) (reset! bg "rose"))
-              (~tw :tokens "w-8 h-8 rounded-full")
-              :class (str
-                "bg-rose-400"
-                (if
-                  (= (deref bg) "rose")
-                  " ring-2 ring-offset-1 ring-stone-400"
-                  ""))
-              "")
-            (button
-              :on-click (fn (e) (reset! bg "emerald"))
-              (~tw :tokens "w-8 h-8 rounded-full")
-              :class (str
-                "bg-emerald-400"
-                (if
-                  (= (deref bg) "emerald")
-                  " ring-2 ring-offset-1 ring-stone-400"
-                  ""))
-              "")
-            (button
-              :on-click (fn (e) (reset! bg "amber"))
-              (~tw :tokens "w-8 h-8 rounded-full")
-              :class (str
-                "bg-amber-400"
-                (if
-                  (= (deref bg) "amber")
-                  " ring-2 ring-offset-1 ring-stone-400"
-                  ""))
-              "")
-            (button
-              :on-click (fn (e) (reset! bg "sky"))
-              (~tw :tokens "w-8 h-8 rounded-full")
-              :class (str
-                "bg-sky-400"
-                (if
-                  (= (deref bg) "sky")
-                  " ring-2 ring-offset-1 ring-stone-400"
-                  ""))
-              "")
-            (button
-              :on-click (fn (e) (reset! bg "stone"))
-              (~tw :tokens "w-8 h-8 rounded-full")
-              :class (str
-                "bg-stone-400"
-                (if
-                  (= (deref bg) "stone")
-                  " ring-2 ring-offset-1 ring-stone-400"
-                  ""))
-              "")))
-        (div
-          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Size")
-          (div
-            (~tw :tokens "flex gap-1")
-            (map
-              (fn
-                (s)
-                (button
-                  :on-click (fn (e) (reset! size s))
-                  (~tw :tokens "px-2 py-1 rounded text-xs")
-                  :class (if
-                    (= (deref size) s)
-                    "bg-stone-700 text-white"
-                    "bg-stone-100 text-stone-600")
-                  s))
-              (list "text-sm" "text-lg" "text-2xl" "text-4xl"))))
-        (div
-          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Weight")
-          (div
-            (~tw :tokens "flex gap-1")
-            (map
-              (fn
-                (w)
-                (button
-                  :on-click (fn (e) (reset! weight w))
-                  (~tw :tokens "px-2 py-1 rounded text-xs")
-                  :class (if
-                    (= (deref weight) w)
-                    "bg-stone-700 text-white"
-                    "bg-stone-100 text-stone-600")
-                  w))
-              (list "font-normal" "font-bold" "font-semibold"))))
-        (div
-          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Text")
-          (input
-            :type "text"
-            :bind text
-            (~tw
-              :tokens "w-full px-2 py-1 rounded border border-stone-300 text-sm"))))
-      (div
-        (~tw :tokens "flex gap-2 items-center")
-        (button
-          :on-click (fn
-            (e)
-            (let
-              ((sx (freeze-to-sx "widget")))
-              (swap! saved (fn (l) (append l (list sx))))))
-          (~tw
-            :tokens "px-3 py-1.5 rounded bg-amber-500 text-white text-sm hover:bg-amber-600")
-          "Save config")
-        (span
-          (~tw :tokens "text-xs text-stone-400")
-          (str (len (deref saved)) " saved")))
-      (when
-        (not (empty? (deref saved)))
-        (div
-          (~tw :tokens "space-y-1")
-          (label (~tw :tokens "text-xs text-stone-400 block") "Saved configs")
-          (map-indexed
-            (fn
-              (i sx)
-              (button
-                :on-click (fn (e) (thaw-from-sx sx))
-                (~tw
-                  :tokens "block w-full text-left px-2 py-1 rounded bg-stone-50 hover:bg-stone-100 font-mono text-xs text-stone-600 truncate")
-                (str "Config " (+ i 1))))
-            (deref saved)))))))
-
-(defcomp
-  ~geography/cek/cek-content-address-content
-  ()
-  (~docs/page
-    :title "Content-Addressed Computation"
-    (p
-      (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "A computation is a value. A value has a hash. The hash is the address. "
-      "Same state, same address, forever.")
-    (~docs/section
-      :title "The idea"
-      :id "idea"
-      (p
-        "Freeze a scope to SX. Hash the SX text. The hash is a content identifier (CID). "
-        "Store the frozen SX keyed by CID. Later, look up the CID, thaw, resume.")
-      (p
-        "The critical property: "
-        (strong "same state always produces the same CID")
-        ". "
-        "Two machines freezing identical signal values get identical CIDs. "
-        "The address IS the content."))
-    (~docs/section
-      :title "How it works"
-      :id "how"
-      (~docs/code
-        :src (highlight
-          ";; Freeze a scope → hash → CID\n(freeze-to-cid \"widget\")\n;; => \"d9eea67b\"\n\n;; The frozen SX is stored by CID\n(content-get \"d9eea67b\")\n;; => {:name \"widget\" :signals {:count 42 :name \"hello\"}}\n\n;; Thaw from CID → signals restored\n(thaw-from-cid \"d9eea67b\")\n;; Signals reset to frozen values"
-          "lisp"))
-      (p
-        "The hash is djb2 for now — deterministic and fast. "
-        "Real deployment uses SHA-256 / multihash for IPFS compatibility."))
-    (~docs/section
-      :title "Why it matters"
-      :id "why"
-      (ul
-        (~tw :tokens "list-disc pl-6 mb-4 space-y-2 text-stone-600")
-        (li
-          (strong "Sharing")
-          " — send a CID, not a blob. "
-          "The receiver looks up the CID and gets the exact state.")
-        (li
-          (strong "Deduplication")
-          " — same state = same CID. "
-          "Store once, reference many times.")
-        (li
-          (strong "Verification")
-          " — re-freeze, compare CIDs. "
-          "If they match, the state is identical. No diffing needed.")
-        (li
-          (strong "History")
-          " — each CID is a snapshot. "
-          "A sequence of CIDs is a complete undo history.")
-        (li
-          (strong "Distribution")
-          " — CIDs on IPFS are global. "
-          "Pin a widget state, anyone can thaw it. "
-          "No server, no API, no account.")))
-    (~docs/section
-      :title "Live demo"
-      :id "demo"
-      (p
-        "Change the counter and name. Click "
-        (strong "Content-address")
-        " to freeze and hash. "
-        "The CID appears below. Change the values, then click any CID in the history "
-        "or paste one into the input to restore.")
-      (~geography/cek/content-address-demo))
-    (~docs/section
-      :title "The path to IPFS"
-      :id "ipfs"
-      (p "The content store is currently in-memory. The next steps:")
-      (ul
-        (~tw :tokens "list-disc pl-6 mb-4 space-y-1 text-stone-600")
-        (li "Replace djb2 with SHA-256 (browser SubtleCrypto)")
-        (li "Wrap in multihash + CIDv1 format")
-        (li "Store to IPFS via the Art DAG L2 registry")
-        (li "Pin CIDs attributed to " (code "sx-web.org"))
-        (li "Anyone can pin, fork, extend"))
-      (p
-        "The frozen SX is the content. The CID is the address. "
-        "IPFS is the network. The widget state becomes a permanent, "
-        "verifiable, shareable artifact — not trapped in a database, "
-        "not behind an API, not owned by anyone."))))
-
-(defcomp
-  ~geography/cek/cek-demo-content
-  ()
-  (~docs/page
-    :title "CEK Demo"
-    (~docs/section
-      :title "What this demonstrates"
-      :id "what"
-      (p
-        "These are "
-        (strong "live islands")
-        " evaluated by the CEK machine. Every "
-        (code "eval-expr")
-        " goes through "
-        (code "cek-run")
-        ". Every "
-        (code "(deref sig)")
-        " in an island creates a reactive DOM binding via continuation frames.")
-      (p
-        "The CEK machine is defined in "
-        (code "cek.sx")
-        " and "
-        (code "frames.sx")
-        " — pure s-expressions, bootstrapped to both JavaScript and Python."))
-    (~docs/section
-      :title "Stepper"
-      :id "stepper"
-      (p
-        "The CEK machine is pure data→data. Each step takes a state dict and returns a new one. "
-        "Type an expression, click Step to advance one CEK transition.")
-      (~geography/cek/demo-stepper
-        :initial-expr "(let ((x 10)) (+ x (* 2 3)))")
-      (~docs/code
-        :src (highlight (component-source "~geography/cek/demo-stepper") "lisp")))
-    (~docs/section
-      :title "Render stepper"
-      :id "render-stepper"
-      (p
-        "Watch a component render itself. The CEK evaluates the expression — "
-        "when it encounters "
-        (code "(div ...)")
-        ", the render adapter produces HTML in one step. "
-        "Click Run to see the rendered output appear in the preview.")
-      (~geography/cek/demo-render-stepper)
-      (~docs/code
-        :src (highlight
-          (component-source "~geography/cek/demo-render-stepper")
-          "lisp")))
-    (~docs/section
-      :title "1. Counter"
-      :id "demo-counter"
-      (p
-        (code "(deref count)")
-        " in text position creates a reactive text node. "
-        (code "(deref doubled)")
-        " is a computed that updates when count changes.")
-      (~geography/cek/demo-counter :initial 0)
-      (~docs/code
-        :src (highlight (component-source "~geography/cek/demo-counter") "lisp")))
-    (~docs/section
-      :title "2. Computed chain"
-      :id "demo-chain"
-      (p
-        "Three levels of computed: base -> doubled -> quadrupled. Change base, all propagate.")
-      (~geography/cek/demo-chain)
-      (~docs/code
-        :src (highlight (component-source "~geography/cek/demo-chain") "lisp")))
-    (~docs/section
-      :title "3. Reactive attributes"
-      :id "demo-attr"
-      (p
-        (code "(deref sig)")
-        " in "
-        (code ":class")
-        " position. The CEK evaluates the "
-        (code "str")
-        " expression, and when the signal changes, the continuation re-evaluates and updates the attribute.")
-      (~geography/cek/demo-reactive-attr)
-      (~docs/code
-        :src (highlight
-          (component-source "~geography/cek/demo-reactive-attr")
-          "lisp")))
-    (~docs/section
-      :title "4. Effect + cleanup"
-      :id "demo-stopwatch"
-      (p
-        "Effects still work through CEK. This stopwatch uses "
-        (code "effect")
-        " with cleanup — toggling the signal clears the interval.")
-      (~geography/cek/demo-stopwatch)
-      (~docs/code
-        :src (highlight (component-source "~geography/cek/demo-stopwatch") "lisp")))
-    (~docs/section
-      :title "5. Batch coalescing"
-      :id "demo-batch"
-      (p
-        "Two signals updated in "
-        (code "batch")
-        " — one notification cycle. Compare render counts between batch and no-batch.")
-      (~geography/cek/demo-batch)
-      (~docs/code
-        :src (highlight (component-source "~geography/cek/demo-batch") "lisp")))))
diff --git a/sx/sx/geography/cek/_islands/content-address-demo.sx b/sx/sx/geography/cek/_islands/content-address-demo.sx
new file mode 100644
index 00000000..63eb9077
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/content-address-demo.sx
@@ -0,0 +1,109 @@
+(defisland
+  ()
+  (let
+    ((count (signal 0))
+      (name (signal "world"))
+      (cid-display (signal ""))
+      (cid-input (signal ""))
+      (cid-history (signal (list)))
+      (status (signal "")))
+    (freeze-scope
+      "ca-demo"
+      (fn () (freeze-signal "count" count) (freeze-signal "name" name)))
+    (div
+      (~tw :tokens "space-y-4")
+      (div
+        (~tw :tokens "flex gap-4 items-center")
+        (div
+          (~tw :tokens "flex items-center gap-2")
+          (button
+            :on-click (fn (e) (swap! count dec))
+            (~tw
+              :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 hover:bg-stone-300")
+            "-")
+          (span
+            (~tw :tokens "font-mono text-lg font-bold w-8 text-center")
+            (deref count))
+          (button
+            :on-click (fn (e) (swap! count inc))
+            (~tw
+              :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 hover:bg-stone-300")
+            "+"))
+        (input
+          :type "text"
+          :bind name
+          (~tw
+            :tokens "px-3 py-1 rounded border border-stone-300 font-mono text-sm")))
+      (div
+        (~tw
+          :tokens "rounded bg-violet-50 border border-violet-200 p-3 text-violet-800")
+        "Hello, "
+        (deref name)
+        "! Count = "
+        (deref count))
+      (div
+        (~tw :tokens "flex gap-2")
+        (button
+          :on-click (fn
+            (e)
+            (let
+              ((cid (freeze-to-cid "ca-demo")))
+              (reset! cid-display cid)
+              (reset! status (str "Stored as " cid))
+              (swap! cid-history (fn (h) (append h (list cid))))))
+          (~tw
+            :tokens "px-3 py-1.5 rounded bg-stone-700 text-white text-sm hover:bg-stone-800")
+          "Content-address"))
+      (when
+        (not (empty? (deref cid-display)))
+        (div
+          (~tw
+            :tokens "font-mono text-sm bg-stone-50 rounded p-2 flex items-center gap-2")
+          (span (~tw :tokens "text-stone-400") "CID:")
+          (span
+            (~tw :tokens "text-violet-700 font-bold")
+            (deref cid-display))))
+      (when
+        (not (empty? (deref status)))
+        (div (~tw :tokens "text-xs text-emerald-600") (deref status)))
+      (div
+        (~tw :tokens "flex gap-2 items-end")
+        (div
+          (~tw :tokens "flex-1")
+          (label
+            (~tw :tokens "text-xs text-stone-400 block mb-1")
+            "Restore from CID")
+          (input
+            :type "text"
+            :bind cid-input
+            (~tw
+              :tokens "w-full px-3 py-1 rounded border border-stone-300 font-mono text-sm")))
+        (button
+          :on-click (fn
+            (e)
+            (if
+              (thaw-from-cid (deref cid-input))
+              (reset! status (str "Restored from " (deref cid-input)))
+              (reset! status (str "CID not found: " (deref cid-input)))))
+          (~tw
+            :tokens "px-3 py-1.5 rounded bg-emerald-600 text-white text-sm hover:bg-emerald-700")
+          "Restore"))
+      (when
+        (not (empty? (deref cid-history)))
+        (div
+          (~tw :tokens "space-y-1")
+          (label (~tw :tokens "text-xs text-stone-400 block") "History")
+          (map
+            (fn
+              (cid)
+              (button
+                :on-click (fn
+                  (e)
+                  (if
+                    (thaw-from-cid cid)
+                    (reset! status (str "Restored from " cid))
+                    (reset! status (str "CID not found: " cid))))
+                (~tw
+                  :tokens "block w-full text-left px-2 py-1 rounded bg-stone-50 hover:bg-stone-100 font-mono text-xs text-stone-600")
+                cid))
+            (deref cid-history)))))))
diff --git a/sx/sx/geography/cek/_islands/demo-batch.sx b/sx/sx/geography/cek/_islands/demo-batch.sx
new file mode 100644
index 00000000..a601f49b
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/demo-batch.sx
@@ -0,0 +1,30 @@
+(defisland
+  ()
+  (let
+    ((first-sig (signal 0))
+      (second-sig (signal 0))
+      (renders (signal 0))
+      (_eff
+        (effect
+          (fn () (deref first-sig) (deref second-sig) (swap! renders inc)))))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-2")
+      (div
+        (~tw :tokens "flex items-center gap-4 text-sm")
+        (span (str "first: " (deref first-sig)))
+        (span (str "second: " (deref second-sig)))
+        (span
+          (~tw :tokens "px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-semibold")
+          (str "renders: " (deref renders))))
+      (div
+        (~tw :tokens "flex items-center gap-2")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
+          :on-click (fn
+            (e)
+            (batch (fn () (swap! first-sig inc) (swap! second-sig inc))))
+          "Batch +1")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-400 text-white text-sm")
+          :on-click (fn (e) (swap! first-sig inc) (swap! second-sig inc))
+          "No-batch +1")))))
diff --git a/sx/sx/geography/cek/_islands/demo-chain.sx b/sx/sx/geography/cek/_islands/demo-chain.sx
new file mode 100644
index 00000000..e6df4b07
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/demo-chain.sx
@@ -0,0 +1,28 @@
+(defisland
+  ()
+  (let
+    ((base (signal 1))
+      (doubled (computed (fn () (* (deref base) 2))))
+      (quadrupled (computed (fn () (* (deref doubled) 2)))))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-2")
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
+          :on-click (fn (e) (swap! base dec))
+          "-")
+        (span
+          (~tw :tokens "text-2xl font-bold text-violet-700 min-w-[3ch] text-center")
+          (deref base))
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
+          :on-click (fn (e) (swap! base inc))
+          "+"))
+      (p
+        (~tw :tokens "text-sm text-stone-500")
+        (str
+          "doubled: "
+          (deref doubled)
+          "  |  quadrupled: "
+          (deref quadrupled))))))
diff --git a/sx/sx/geography/cek/_islands/demo-counter.sx b/sx/sx/geography/cek/_islands/demo-counter.sx
new file mode 100644
index 00000000..a34c18cb
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/demo-counter.sx
@@ -0,0 +1,21 @@
+(defisland
+  (&key initial)
+  (let
+    ((count (signal (or initial 0)))
+      (doubled (computed (fn () (* 2 (deref count))))))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-2")
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
+          :on-click (fn (e) (swap! count dec))
+          "-")
+        (span
+          (~tw :tokens "text-2xl font-bold text-violet-700 min-w-[3ch] text-center")
+          (deref count))
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
+          :on-click (fn (e) (swap! count inc))
+          "+"))
+      (p (~tw :tokens "text-sm text-stone-500") (str "doubled: " (deref doubled))))))
diff --git a/sx/sx/geography/cek/_islands/demo-reactive-attr.sx b/sx/sx/geography/cek/_islands/demo-reactive-attr.sx
new file mode 100644
index 00000000..01f02a0a
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/demo-reactive-attr.sx
@@ -0,0 +1,21 @@
+(defisland
+  ()
+  (let
+    ((danger (signal false)))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 p-4 space-y-3")
+      (button
+        (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
+        :on-click (fn (e) (swap! danger not))
+        (if (deref danger) "Safe mode" "Danger mode"))
+      (div
+        :class (str
+          "p-3 rounded font-medium transition-colors "
+          (if
+            (deref danger)
+            "bg-red-100 text-red-800"
+            "bg-green-100 text-green-800"))
+        (if
+          (deref danger)
+          "DANGER: reactive class binding via CEK"
+          "SAFE: reactive class binding via CEK")))))
diff --git a/sx/sx/geography/cek/_islands/demo-render-stepper.sx b/sx/sx/geography/cek/_islands/demo-render-stepper.sx
new file mode 100644
index 00000000..f2b76d1a
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/demo-render-stepper.sx
@@ -0,0 +1,256 @@
+(defisland
+  (&key initial-expr)
+  (let
+    ((source (signal (or initial-expr "(div (~cssx/tw :tokens \"p-6 rounded-lg border border-stone-200 bg-white text-center\")\n  (h1 (~cssx/tw :tokens \"text-3xl font-bold mb-2\")\n    (span (~cssx/tw :tokens \"text-rose-500\") \"the \")\n    (span (~cssx/tw :tokens \"text-amber-500\") \"joy \")\n    (span (~cssx/tw :tokens \"text-emerald-500\") \"of \")\n    (span (~cssx/tw :tokens \"text-violet-600 text-4xl\") \"sx\")))")))
+      (steps (signal (list)))
+      (step-idx (signal 0))
+      (parsed-ok (signal false))
+      (error-msg (signal nil))
+      (dom-stack-sig (signal (list))))
+    (letrec
+      ((split-tag (fn (expr result) (cond (not (list? expr)) (append! result {:expr expr :type "leaf"}) (empty? expr) nil (not (= (type-of (first expr)) "symbol")) (append! result {:expr expr :type "leaf"}) (is-html-tag? (symbol-name (first expr))) (let ((ctag (symbol-name (first expr))) (cargs (rest expr)) (cch (list)) (cat (list)) (spreads (list)) (ckw false)) (for-each (fn (a) (cond (= (type-of a) "keyword") (do (set! ckw true) (append! cat a)) ckw (do (set! ckw false) (append! cat a)) (and (list? a) (not (empty? a)) (= (type-of (first a)) "symbol") (starts-with? (symbol-name (first a)) "~")) (do (set! ckw false) (append! spreads a)) :else (do (set! ckw false) (append! cch a)))) cargs) (append! result {:spreads spreads :tag ctag :type "open" :attrs cat}) (for-each (fn (c) (split-tag c result)) cch) (append! result {:tag ctag :type "close"})) :else (append! result {:expr expr :type "expr"}))))
+        (get-preview (fn () (dom-query "[data-sx-lake=\"preview\"]")))
+        (get-stack (fn () (deref dom-stack-sig)))
+        (set-stack (fn (v) (reset! dom-stack-sig v)))
+        (push-stack
+          (fn
+            (el)
+            (reset! dom-stack-sig (append (deref dom-stack-sig) (list el)))))
+        (pop-stack
+          (fn
+            ()
+            (let
+              ((s (deref dom-stack-sig)))
+              (when
+                (> (len s) 1)
+                (reset! dom-stack-sig (slice s 0 (- (len s) 1)))))))
+        (do-parse
+          (fn
+            ()
+            (reset! error-msg nil)
+            (reset! step-idx 0)
+            (reset! parsed-ok false)
+            (set-stack (list))
+            (let
+              ((container (get-preview)))
+              (when container (dom-set-prop container "innerHTML" "")))
+            (let
+              ((parsed (sx-parse (deref source))))
+              (if
+                (empty? parsed)
+                (do (reset! error-msg "Parse error") (reset! steps (list)))
+                (let
+                  ((result (list)))
+                  (split-tag (first parsed) result)
+                  (reset! steps result)
+                  (reset! parsed-ok true)
+                  (set-stack (list (get-preview))))))))
+        (do-step
+          (fn
+            ()
+            (when
+              (and
+                (deref parsed-ok)
+                (< (deref step-idx) (len (deref steps))))
+              (let
+                ((step (nth (deref steps) (deref step-idx)))
+                  (step-type (get step "type"))
+                  (stack (get-stack))
+                  (parent
+                    (if
+                      (empty? (get-stack))
+                      (get-preview)
+                      (last (get-stack)))))
+                (cond
+                  (= step-type "open")
+                  (let
+                    ((el (dom-create-element (get step "tag") nil))
+                      (attrs (get step "attrs"))
+                      (spreads (or (get step "spreads") (list))))
+                    (let
+                      loop
+                      ((i 0))
+                      (when
+                        (< i (len attrs))
+                        (dom-set-attr
+                          el
+                          (keyword-name (nth attrs i))
+                          (nth attrs (+ i 1)))
+                        (loop (+ i 2))))
+                    (for-each
+                      (fn
+                        (sp)
+                        (let
+                          ((result (eval-expr sp (make-env))))
+                          (when
+                            (and result (spread? result))
+                            (let
+                              ((sattrs (spread-attrs result)))
+                              (for-each
+                                (fn
+                                  (k)
+                                  (if
+                                    (= k "class")
+                                    (dom-set-attr
+                                      el
+                                      "class"
+                                      (str
+                                        (or (dom-get-attr el "class") "")
+                                        " "
+                                        (get sattrs k)))
+                                    (dom-set-attr el k (get sattrs k))))
+                                (keys sattrs))))))
+                      spreads)
+                    (when parent (dom-append parent el))
+                    (push-stack el))
+                  (= step-type "close")
+                  (pop-stack)
+                  (= step-type "leaf")
+                  (when
+                    parent
+                    (let
+                      ((val (get step "expr")))
+                      (dom-append
+                        parent
+                        (create-text-node (if (string? val) val (str val))))))
+                  (= step-type "expr")
+                  (let
+                    ((rendered (render-to-dom (get step "expr") (make-env) nil)))
+                    (when (and parent rendered) (dom-append parent rendered)))))
+              (swap! step-idx inc))))
+        (do-run
+          (fn
+            ()
+            (let
+              loop
+              ()
+              (when
+                (< (deref step-idx) (len (deref steps)))
+                (do-step)
+                (loop)))))
+        (do-back
+          (fn
+            ()
+            (when
+              (and (deref parsed-ok) (> (deref step-idx) 0))
+              (let
+                ((target (- (deref step-idx) 1))
+                  (container (get-preview)))
+                (when container (dom-set-prop container "innerHTML" ""))
+                (set-stack (list (get-preview)))
+                (reset! step-idx 0)
+                (for-each
+                  (fn (_) (do-step))
+                  (slice (deref steps) 0 target)))))))
+      (div
+        (~tw :tokens "space-y-4")
+        (div
+          (label
+            (~tw :tokens "text-xs text-stone-400 block mb-1")
+            "Component expression")
+          (textarea
+            :bind source
+            :rows 4
+            (~tw :tokens "w-full px-3 py-2 rounded border border-stone-300 font-mono text-xs focus:outline-none focus:border-violet-400")))
+        (div
+          (~tw :tokens "flex gap-1")
+          (button
+            :on-click (fn (e) (do-parse))
+            (~tw :tokens "px-3 py-1.5 rounded bg-stone-700 text-white text-sm hover:bg-stone-800")
+            "Parse")
+          (button
+            :on-click (fn (e) (do-back))
+            :class (str
+              "px-3 py-1.5 rounded text-sm "
+              (if
+                (and (deref parsed-ok) (> (deref step-idx) 0))
+                "bg-stone-200 text-stone-700 hover:bg-stone-300"
+                "bg-stone-100 text-stone-300 cursor-not-allowed"))
+            "◀")
+          (button
+            :on-click (fn (e) (do-step))
+            :class (str
+              "px-3 py-1.5 rounded text-sm "
+              (if
+                (and
+                  (deref parsed-ok)
+                  (< (deref step-idx) (len (deref steps))))
+                "bg-violet-500 text-white hover:bg-violet-600"
+                "bg-violet-200 text-violet-400 cursor-not-allowed"))
+            "Step ▶")
+          (button
+            :on-click (fn (e) (do-run))
+            :class (str
+              "px-3 py-1.5 rounded text-sm "
+              (if
+                (deref parsed-ok)
+                "bg-violet-700 text-white hover:bg-violet-800"
+                "bg-violet-200 text-violet-400 cursor-not-allowed"))
+            "Run ▶▶"))
+        (when
+          (deref error-msg)
+          (div (~tw :tokens "text-red-600 text-sm") (deref error-msg)))
+        (when
+          (and (deref parsed-ok) (= (deref step-idx) 0))
+          (div
+            (~tw :tokens "text-sm text-stone-500 bg-stone-50 rounded p-2")
+            (str
+              "Parsed "
+              (len (deref steps))
+              " render steps. Click Step to begin.")))
+        (div
+          (~tw :tokens "grid grid-cols-1 md:grid-cols-2 gap-4")
+          (when
+            (deref parsed-ok)
+            (div
+              (~tw :tokens "rounded border border-stone-200 bg-white p-3 min-h-24")
+              (div
+                (~tw :tokens "text-xs text-stone-400 mb-2")
+                (str
+                  (deref step-idx)
+                  " / "
+                  (len (deref steps))
+                  (if
+                    (= (deref step-idx) (len (deref steps)))
+                    " — complete"
+                    "")))
+              (div
+                (~tw :tokens "space-y-0.5 font-mono text-xs max-h-64 overflow-y-auto")
+                (map-indexed
+                  (fn
+                    (i step)
+                    (div
+                      :class (str
+                        "flex gap-2 px-1 rounded "
+                        (cond
+                          (= i (deref step-idx))
+                          "bg-violet-100 text-violet-700 font-bold"
+                          (< i (deref step-idx))
+                          "text-stone-400"
+                          :else "text-stone-300"))
+                      (span
+                        (~tw :tokens "w-4 text-right")
+                        (if (< i (deref step-idx)) "✓" (str (+ i 1))))
+                      (span
+                        (~tw :tokens "truncate")
+                        (let
+                          ((lbl (get step "label")))
+                          (if
+                            lbl
+                            (if
+                              (> (len lbl) 60)
+                              (str (slice lbl 0 57) "...")
+                              lbl)
+                            (let
+                              ((tp (get step "type")))
+                              (cond
+                                (= tp "open")
+                                (str "<" (get step "tag") ">")
+                                (= tp "close")
+                                (str "</" (get step "tag") ">")
+                                :else (sx-serialize (get step "expr")))))))))
+                  (deref steps)))))
+          (div
+            (~tw :tokens "rounded border border-stone-200 p-3 min-h-24")
+            (div (~tw :tokens "text-xs text-stone-400 mb-2") "Live DOM")
+            (lake :id "preview")))))))
diff --git a/sx/sx/geography/cek/_islands/demo-stepper.sx b/sx/sx/geography/cek/_islands/demo-stepper.sx
new file mode 100644
index 00000000..f759cc22
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/demo-stepper.sx
@@ -0,0 +1,182 @@
+(defisland
+  (&key initial-expr)
+  (let
+    ((source (signal (or initial-expr "(+ 1 (* 2 3))")))
+      (state (signal nil))
+      (steps (signal 0))
+      (history (signal (list)))
+      (error-msg (signal nil)))
+    (define
+      start-eval
+      (fn
+        ()
+        (reset! error-msg nil)
+        (reset! history (list))
+        (reset! steps 0)
+        (let
+          ((parsed (sx-parse (deref source))))
+          (if
+            (empty? parsed)
+            (reset! error-msg "Parse error: empty expression")
+            (reset!
+              state
+              (make-cek-state (first parsed) (make-env) (list)))))))
+    (define
+      do-step
+      (fn
+        ()
+        (when
+          (and (deref state) (not (cek-terminal? (deref state))))
+          (let
+            ((prev (deref state)))
+            (swap! history (fn (h) (append h (list prev))))
+            (swap! steps inc)
+            (reset! state (cek-step prev))))))
+    (define
+      do-run
+      (fn
+        ()
+        (when
+          (deref state)
+          (let
+            run-loop
+            ((n 0))
+            (when
+              (and (not (cek-terminal? (deref state))) (< n 200))
+              (do-step)
+              (run-loop (+ n 1)))))))
+    (define
+      do-reset
+      (fn
+        ()
+        (reset! state nil)
+        (reset! steps 0)
+        (reset! history (list))
+        (reset! error-msg nil)))
+    (define
+      fmt-control
+      (fn
+        (s)
+        (if
+          (nil? s)
+          "—"
+          (let
+            ((c (get s "control")))
+            (if (nil? c) "—" (sx-serialize c))))))
+    (define
+      fmt-value
+      (fn
+        (s)
+        (if
+          (nil? s)
+          "—"
+          (let
+            ((v (get s "value")))
+            (cond
+              (nil? v)
+              "nil"
+              (callable? v)
+              (str "λ:" (or (lambda-name v) "fn"))
+              :else (sx-serialize v))))))
+    (define
+      fmt-kont
+      (fn
+        (s)
+        (if
+          (nil? s)
+          "—"
+          (let
+            ((k (get s "kont")))
+            (if
+              (empty? k)
+              "[]"
+              (str "[" (join " " (map (fn (f) (get f "type")) k)) "]"))))))
+    (start-eval)
+    (div
+      (~tw :tokens "space-y-4")
+      (div
+        (~tw :tokens "flex gap-2 items-end")
+        (div
+          (~tw :tokens "flex-1")
+          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Expression")
+          (input
+            :type "text"
+            :bind source
+            (~tw :tokens "w-full px-3 py-1.5 rounded border border-stone-300 font-mono text-sm focus:outline-none focus:border-violet-400")
+            :on-change (fn (e) (start-eval))))
+        (div
+          (~tw :tokens "flex gap-1")
+          (button
+            :on-click (fn (e) (start-eval))
+            (~tw :tokens "px-3 py-1.5 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
+            "Reset")
+          (button
+            :on-click (fn (e) (do-step))
+            (~tw :tokens "px-3 py-1.5 rounded bg-violet-500 text-white text-sm hover:bg-violet-600")
+            "Step")
+          (button
+            :on-click (fn (e) (do-run))
+            (~tw :tokens "px-3 py-1.5 rounded bg-violet-700 text-white text-sm hover:bg-violet-800")
+            "Run")))
+      (when
+        (deref error-msg)
+        (div (~tw :tokens "text-red-600 text-sm") (deref error-msg)))
+      (when
+        (deref state)
+        (div
+          (~tw :tokens "rounded border border-stone-200 bg-white p-3 font-mono text-sm space-y-1")
+          (div
+            (~tw :tokens "flex gap-4")
+            (span (~tw :tokens "text-stone-400 w-16") "Step")
+            (span (~tw :tokens "font-bold") (deref steps)))
+          (div
+            (~tw :tokens "flex gap-4")
+            (span (~tw :tokens "text-stone-400 w-16") "Phase")
+            (span
+              :class (str
+                "font-bold "
+                (if
+                  (= (get (deref state) "phase") "eval")
+                  "text-blue-600"
+                  "text-green-600"))
+              (get (deref state) "phase")))
+          (div
+            (~tw :tokens "flex gap-4")
+            (span (~tw :tokens "text-violet-500 w-16") "C")
+            (span (fmt-control (deref state))))
+          (div
+            (~tw :tokens "flex gap-4")
+            (span (~tw :tokens "text-amber-600 w-16") "V")
+            (span (fmt-value (deref state))))
+          (div
+            (~tw :tokens "flex gap-4")
+            (span (~tw :tokens "text-emerald-600 w-16") "K")
+            (span (fmt-kont (deref state))))
+          (when
+            (cek-terminal? (deref state))
+            (div
+              (~tw :tokens "mt-2 pt-2 border-t border-stone-200 text-stone-800 font-bold")
+              (str "Result: " (sx-serialize (cek-value (deref state))))))))
+      (when
+        (not (empty? (deref history)))
+        (div
+          (~tw :tokens "rounded border border-stone-100 bg-stone-50 p-2")
+          (div (~tw :tokens "text-xs text-stone-400 mb-1") "History")
+          (div
+            (~tw :tokens "space-y-0.5 font-mono text-xs max-h-48 overflow-y-auto")
+            (map-indexed
+              (fn
+                (i s)
+                (div
+                  (~tw :tokens "flex gap-2 text-stone-500")
+                  (span (~tw :tokens "text-stone-300 w-6 text-right") (+ i 1))
+                  (span
+                    :class (if
+                      (= (get s "phase") "eval")
+                      "text-blue-400"
+                      "text-green-400")
+                    (get s "phase"))
+                  (span (~tw :tokens "text-violet-400 truncate") (fmt-control s))
+                  (span (~tw :tokens "text-amber-400") (fmt-value s))
+                  (span (~tw :tokens "text-emerald-400") (fmt-kont s))))
+              (deref history))))))))
diff --git a/sx/sx/geography/cek/_islands/demo-stopwatch.sx b/sx/sx/geography/cek/_islands/demo-stopwatch.sx
new file mode 100644
index 00000000..a4eacb78
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/demo-stopwatch.sx
@@ -0,0 +1,47 @@
+(defisland
+  ()
+  (let
+    ((running (signal false))
+      (elapsed (signal 0))
+      (time-text (create-text-node "0.0s"))
+      (btn-text (create-text-node "Start"))
+      (_e1
+        (effect
+          (fn
+            ()
+            (when
+              (deref running)
+              (let
+                ((id (set-interval (fn () (swap! elapsed inc)) 100)))
+                (fn () (clear-interval id)))))))
+      (_e2
+        (effect
+          (fn
+            ()
+            (let
+              ((e (deref elapsed)))
+              (dom-set-text-content
+                time-text
+                (str (floor (/ e 10)) "." (mod e 10) "s"))))))
+      (_e3
+        (effect
+          (fn
+            ()
+            (dom-set-text-content
+              btn-text
+              (if (deref running) "Stop" "Start"))))))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 p-4")
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (span
+          (~tw :tokens "text-2xl font-bold text-violet-700 font-mono min-w-[5ch]")
+          time-text)
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm")
+          :on-click (fn (e) (swap! running not))
+          btn-text)
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-400 text-white text-sm")
+          :on-click (fn (e) (reset! running false) (reset! elapsed 0))
+          "Reset")))))
diff --git a/sx/sx/geography/cek/_islands/freeze-demo.sx b/sx/sx/geography/cek/_islands/freeze-demo.sx
new file mode 100644
index 00000000..23b6bb89
--- /dev/null
+++ b/sx/sx/geography/cek/_islands/freeze-demo.sx
@@ -0,0 +1,160 @@
+(defisland
+  ()
+  (let
+    ((bg (signal "violet"))
+      (size (signal "text-2xl"))
+      (weight (signal "font-bold"))
+      (text (signal "the joy of sx"))
+      (saved (signal (list))))
+    (freeze-scope
+      "widget"
+      (fn
+        ()
+        (freeze-signal "bg" bg)
+        (freeze-signal "size" size)
+        (freeze-signal "weight" weight)
+        (freeze-signal "text" text)))
+    (span
+      (~tw
+        :tokens "hidden bg-violet-50 bg-rose-50 bg-emerald-50 bg-amber-50 bg-sky-50 bg-stone-50 border-violet-200 border-rose-200 border-emerald-200 border-amber-200 border-sky-200 border-stone-200 text-violet-700 text-rose-700 text-emerald-700 text-amber-700 text-sky-700 text-stone-700"))
+    (div
+      (~tw :tokens "space-y-4")
+      (div
+        (~tw :tokens "p-6 rounded-lg text-center transition-all border")
+        :class (str "bg-" (deref bg) "-50 border-" (deref bg) "-200")
+        (span
+          :class (str (deref size) " " (deref weight) " text-" (deref bg) "-700")
+          (deref text)))
+      (div
+        (~tw :tokens "grid grid-cols-2 gap-3")
+        (div
+          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Colour")
+          (div
+            (~tw :tokens "flex gap-1")
+            (button
+              :on-click (fn (e) (reset! bg "violet"))
+              (~tw :tokens "w-8 h-8 rounded-full")
+              :class (str
+                "bg-violet-400"
+                (if
+                  (= (deref bg) "violet")
+                  " ring-2 ring-offset-1 ring-stone-400"
+                  ""))
+              "")
+            (button
+              :on-click (fn (e) (reset! bg "rose"))
+              (~tw :tokens "w-8 h-8 rounded-full")
+              :class (str
+                "bg-rose-400"
+                (if
+                  (= (deref bg) "rose")
+                  " ring-2 ring-offset-1 ring-stone-400"
+                  ""))
+              "")
+            (button
+              :on-click (fn (e) (reset! bg "emerald"))
+              (~tw :tokens "w-8 h-8 rounded-full")
+              :class (str
+                "bg-emerald-400"
+                (if
+                  (= (deref bg) "emerald")
+                  " ring-2 ring-offset-1 ring-stone-400"
+                  ""))
+              "")
+            (button
+              :on-click (fn (e) (reset! bg "amber"))
+              (~tw :tokens "w-8 h-8 rounded-full")
+              :class (str
+                "bg-amber-400"
+                (if
+                  (= (deref bg) "amber")
+                  " ring-2 ring-offset-1 ring-stone-400"
+                  ""))
+              "")
+            (button
+              :on-click (fn (e) (reset! bg "sky"))
+              (~tw :tokens "w-8 h-8 rounded-full")
+              :class (str
+                "bg-sky-400"
+                (if
+                  (= (deref bg) "sky")
+                  " ring-2 ring-offset-1 ring-stone-400"
+                  ""))
+              "")
+            (button
+              :on-click (fn (e) (reset! bg "stone"))
+              (~tw :tokens "w-8 h-8 rounded-full")
+              :class (str
+                "bg-stone-400"
+                (if
+                  (= (deref bg) "stone")
+                  " ring-2 ring-offset-1 ring-stone-400"
+                  ""))
+              "")))
+        (div
+          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Size")
+          (div
+            (~tw :tokens "flex gap-1")
+            (map
+              (fn
+                (s)
+                (button
+                  :on-click (fn (e) (reset! size s))
+                  (~tw :tokens "px-2 py-1 rounded text-xs")
+                  :class (if
+                    (= (deref size) s)
+                    "bg-stone-700 text-white"
+                    "bg-stone-100 text-stone-600")
+                  s))
+              (list "text-sm" "text-lg" "text-2xl" "text-4xl"))))
+        (div
+          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Weight")
+          (div
+            (~tw :tokens "flex gap-1")
+            (map
+              (fn
+                (w)
+                (button
+                  :on-click (fn (e) (reset! weight w))
+                  (~tw :tokens "px-2 py-1 rounded text-xs")
+                  :class (if
+                    (= (deref weight) w)
+                    "bg-stone-700 text-white"
+                    "bg-stone-100 text-stone-600")
+                  w))
+              (list "font-normal" "font-bold" "font-semibold"))))
+        (div
+          (label (~tw :tokens "text-xs text-stone-400 block mb-1") "Text")
+          (input
+            :type "text"
+            :bind text
+            (~tw
+              :tokens "w-full px-2 py-1 rounded border border-stone-300 text-sm"))))
+      (div
+        (~tw :tokens "flex gap-2 items-center")
+        (button
+          :on-click (fn
+            (e)
+            (let
+              ((sx (freeze-to-sx "widget")))
+              (swap! saved (fn (l) (append l (list sx))))))
+          (~tw
+            :tokens "px-3 py-1.5 rounded bg-amber-500 text-white text-sm hover:bg-amber-600")
+          "Save config")
+        (span
+          (~tw :tokens "text-xs text-stone-400")
+          (str (len (deref saved)) " saved")))
+      (when
+        (not (empty? (deref saved)))
+        (div
+          (~tw :tokens "space-y-1")
+          (label (~tw :tokens "text-xs text-stone-400 block") "Saved configs")
+          (map-indexed
+            (fn
+              (i sx)
+              (button
+                :on-click (fn (e) (thaw-from-sx sx))
+                (~tw
+                  :tokens "block w-full text-left px-2 py-1 rounded bg-stone-50 hover:bg-stone-100 font-mono text-xs text-stone-600 truncate")
+                (str "Config " (+ i 1))))
+            (deref saved)))))))
diff --git a/sx/sx/geography/cek/content/index.sx b/sx/sx/geography/cek/content/index.sx
new file mode 100644
index 00000000..12a6b226
--- /dev/null
+++ b/sx/sx/geography/cek/content/index.sx
@@ -0,0 +1,82 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Content-Addressed Computation"
+    (p
+      (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "A computation is a value. A value has a hash. The hash is the address. "
+      "Same state, same address, forever.")
+    (~docs/section
+      :title "The idea"
+      :id "idea"
+      (p
+        "Freeze a scope to SX. Hash the SX text. The hash is a content identifier (CID). "
+        "Store the frozen SX keyed by CID. Later, look up the CID, thaw, resume.")
+      (p
+        "The critical property: "
+        (strong "same state always produces the same CID")
+        ". "
+        "Two machines freezing identical signal values get identical CIDs. "
+        "The address IS the content."))
+    (~docs/section
+      :title "How it works"
+      :id "how"
+      (~docs/code
+        :src (highlight
+          ";; Freeze a scope → hash → CID\n(freeze-to-cid \"widget\")\n;; => \"d9eea67b\"\n\n;; The frozen SX is stored by CID\n(content-get \"d9eea67b\")\n;; => {:name \"widget\" :signals {:count 42 :name \"hello\"}}\n\n;; Thaw from CID → signals restored\n(thaw-from-cid \"d9eea67b\")\n;; Signals reset to frozen values"
+          "lisp"))
+      (p
+        "The hash is djb2 for now — deterministic and fast. "
+        "Real deployment uses SHA-256 / multihash for IPFS compatibility."))
+    (~docs/section
+      :title "Why it matters"
+      :id "why"
+      (ul
+        (~tw :tokens "list-disc pl-6 mb-4 space-y-2 text-stone-600")
+        (li
+          (strong "Sharing")
+          " — send a CID, not a blob. "
+          "The receiver looks up the CID and gets the exact state.")
+        (li
+          (strong "Deduplication")
+          " — same state = same CID. "
+          "Store once, reference many times.")
+        (li
+          (strong "Verification")
+          " — re-freeze, compare CIDs. "
+          "If they match, the state is identical. No diffing needed.")
+        (li
+          (strong "History")
+          " — each CID is a snapshot. "
+          "A sequence of CIDs is a complete undo history.")
+        (li
+          (strong "Distribution")
+          " — CIDs on IPFS are global. "
+          "Pin a widget state, anyone can thaw it. "
+          "No server, no API, no account.")))
+    (~docs/section
+      :title "Live demo"
+      :id "demo"
+      (p
+        "Change the counter and name. Click "
+        (strong "Content-address")
+        " to freeze and hash. "
+        "The CID appears below. Change the values, then click any CID in the history "
+        "or paste one into the input to restore.")
+      (~geography/cek/content-address-demo))
+    (~docs/section
+      :title "The path to IPFS"
+      :id "ipfs"
+      (p "The content store is currently in-memory. The next steps:")
+      (ul
+        (~tw :tokens "list-disc pl-6 mb-4 space-y-1 text-stone-600")
+        (li "Replace djb2 with SHA-256 (browser SubtleCrypto)")
+        (li "Wrap in multihash + CIDv1 format")
+        (li "Store to IPFS via the Art DAG L2 registry")
+        (li "Pin CIDs attributed to " (code "sx-web.org"))
+        (li "Anyone can pin, fork, extend"))
+      (p
+        "The frozen SX is the content. The CID is the address. "
+        "IPFS is the network. The widget state becomes a permanent, "
+        "verifiable, shareable artifact — not trapped in a database, "
+        "not behind an API, not owned by anyone."))))
diff --git a/sx/sx/geography/cek/demo/index.sx b/sx/sx/geography/cek/demo/index.sx
new file mode 100644
index 00000000..2cc6e494
--- /dev/null
+++ b/sx/sx/geography/cek/demo/index.sx
@@ -0,0 +1,101 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "CEK Demo"
+    (~docs/section
+      :title "What this demonstrates"
+      :id "what"
+      (p
+        "These are "
+        (strong "live islands")
+        " evaluated by the CEK machine. Every "
+        (code "eval-expr")
+        " goes through "
+        (code "cek-run")
+        ". Every "
+        (code "(deref sig)")
+        " in an island creates a reactive DOM binding via continuation frames.")
+      (p
+        "The CEK machine is defined in "
+        (code "cek.sx")
+        " and "
+        (code "frames.sx")
+        " — pure s-expressions, bootstrapped to both JavaScript and Python."))
+    (~docs/section
+      :title "Stepper"
+      :id "stepper"
+      (p
+        "The CEK machine is pure data→data. Each step takes a state dict and returns a new one. "
+        "Type an expression, click Step to advance one CEK transition.")
+      (~geography/cek/demo-stepper
+        :initial-expr "(let ((x 10)) (+ x (* 2 3)))")
+      (~docs/code
+        :src (highlight (component-source "~geography/cek/demo-stepper") "lisp")))
+    (~docs/section
+      :title "Render stepper"
+      :id "render-stepper"
+      (p
+        "Watch a component render itself. The CEK evaluates the expression — "
+        "when it encounters "
+        (code "(div ...)")
+        ", the render adapter produces HTML in one step. "
+        "Click Run to see the rendered output appear in the preview.")
+      (~geography/cek/demo-render-stepper)
+      (~docs/code
+        :src (highlight
+          (component-source "~geography/cek/demo-render-stepper")
+          "lisp")))
+    (~docs/section
+      :title "1. Counter"
+      :id "demo-counter"
+      (p
+        (code "(deref count)")
+        " in text position creates a reactive text node. "
+        (code "(deref doubled)")
+        " is a computed that updates when count changes.")
+      (~geography/cek/demo-counter :initial 0)
+      (~docs/code
+        :src (highlight (component-source "~geography/cek/demo-counter") "lisp")))
+    (~docs/section
+      :title "2. Computed chain"
+      :id "demo-chain"
+      (p
+        "Three levels of computed: base -> doubled -> quadrupled. Change base, all propagate.")
+      (~geography/cek/demo-chain)
+      (~docs/code
+        :src (highlight (component-source "~geography/cek/demo-chain") "lisp")))
+    (~docs/section
+      :title "3. Reactive attributes"
+      :id "demo-attr"
+      (p
+        (code "(deref sig)")
+        " in "
+        (code ":class")
+        " position. The CEK evaluates the "
+        (code "str")
+        " expression, and when the signal changes, the continuation re-evaluates and updates the attribute.")
+      (~geography/cek/demo-reactive-attr)
+      (~docs/code
+        :src (highlight
+          (component-source "~geography/cek/demo-reactive-attr")
+          "lisp")))
+    (~docs/section
+      :title "4. Effect + cleanup"
+      :id "demo-stopwatch"
+      (p
+        "Effects still work through CEK. This stopwatch uses "
+        (code "effect")
+        " with cleanup — toggling the signal clears the interval.")
+      (~geography/cek/demo-stopwatch)
+      (~docs/code
+        :src (highlight (component-source "~geography/cek/demo-stopwatch") "lisp")))
+    (~docs/section
+      :title "5. Batch coalescing"
+      :id "demo-batch"
+      (p
+        "Two signals updated in "
+        (code "batch")
+        " — one notification cycle. Compare render counts between batch and no-batch.")
+      (~geography/cek/demo-batch)
+      (~docs/code
+        :src (highlight (component-source "~geography/cek/demo-batch") "lisp")))))
diff --git a/sx/sx/geography/cek/freeze/index.sx b/sx/sx/geography/cek/freeze/index.sx
new file mode 100644
index 00000000..cbe7f87d
--- /dev/null
+++ b/sx/sx/geography/cek/freeze/index.sx
@@ -0,0 +1,116 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Freeze / Thaw"
+    (p
+      (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "A computation is a value. Freeze it to an s-expression. "
+      "Store it, transmit it, content-address it. Thaw and resume anywhere.")
+    (~docs/section
+      :title "The idea"
+      :id "idea"
+      (p
+        "The CEK machine makes evaluation explicit: every step is a pure function from state to state. "
+        "The state is a dict with four fields:")
+      (ul
+        (~tw :tokens "list-disc pl-6 mb-4 space-y-1 text-stone-600")
+        (li (code "control") " — the expression being evaluated")
+        (li (code "env") " — the bindings in scope")
+        (li
+          (code "kont")
+          " — the continuation (what to do with the result)")
+        (li (code "phase") " — eval or continue"))
+      (p
+        "Since the state is data, it can be serialized. "
+        (code "cek-freeze")
+        " converts a live CEK state to pure s-expressions. "
+        (code "cek-thaw")
+        " reconstructs a live state from frozen SX. "
+        (code "cek-run")
+        " resumes from where it left off."))
+    (~docs/section
+      :title "Freeze"
+      :id "freeze"
+      (p "Take a computation mid-flight and freeze it:")
+      (~docs/code
+        :src (highlight
+          "(let ((expr (sx-parse \"(+ 1 (* 2 3))\"))\n      (state (make-cek-state (first expr) (make-env) (list))))\n  ;; Step 4 times\n  (set! state (cek-step (cek-step (cek-step (cek-step state)))))\n  ;; Freeze to SX\n  (cek-freeze state))"
+          "lisp"))
+      (p "The frozen state is pure SX:")
+      (~docs/code
+        :src (highlight
+          "{:phase \"continue\"\n :control nil\n :value 1\n :env {}\n :kont ({:type \"arg\"\n         :f (primitive \"+\")\n         :evaled ()\n         :remaining ((* 2 3))\n         :env {}})}"
+          "lisp"))
+      (p
+        "Everything is data. The continuation frame says: “I was adding 1 to something, "
+        "and I still need to evaluate "
+        (code "(* 2 3)")
+        ".”"))
+    (~docs/section
+      :title "Thaw and resume"
+      :id "thaw"
+      (p "Parse the frozen SX back. Thaw it. Resume:")
+      (~docs/code
+        :src (highlight
+          "(let ((frozen (sx-parse frozen-text))\n      (state (cek-thaw (first frozen))))\n  (cek-run state))\n;; => 7"
+          "lisp"))
+      (p
+        "Native functions like "
+        (code "+")
+        " serialize as "
+        (code "(primitive \"+\")")
+        " and are looked up in the primitive registry on thaw. "
+        "Lambdas serialize as their source AST — "
+        (code "(lambda (x) (* x 2))")
+        " — and reconstruct as callable functions."))
+    (~docs/section
+      :title "Live demo"
+      :id "demo"
+      (p
+        "Type an expression, step to any point, freeze the state. "
+        "The frozen SX appears below. Click Thaw to resume from the frozen state.")
+      (~geography/cek/freeze-demo))
+    (~docs/section
+      :title "Content addressing"
+      :id "content-addressing"
+      (p
+        "Hash the frozen SX "
+        (code "→")
+        " content identifier. "
+        "Same state always produces the same CID. Store by CID, retrieve by CID, verify by CID.")
+      (~docs/code
+        :src (highlight
+          "(freeze-to-cid \"widget\")\n;; => \"d9eea67b\"\n\n(thaw-from-cid \"d9eea67b\")\n;; Signals restored. Same CID = same state."
+          "lisp"))
+      (p
+        "Try it: change the values, click Content-address. Copy the CID. "
+        "Change the values again. Paste the CID and Restore.")
+      (~geography/cek/content-address-demo))
+    (~docs/section
+      :title "What this enables"
+      :id "enables"
+      (ul
+        (~tw :tokens "list-disc pl-6 mb-4 space-y-2 text-stone-600")
+        (li
+          (strong "Persistence")
+          " — save reactive island state to localStorage, "
+          "resume on page reload")
+        (li
+          (strong "Migration")
+          " — freeze a computation on one machine, "
+          "thaw on another. Same result, deterministically.")
+        (li
+          (strong "Content addressing")
+          " — hash the frozen SX → CID. "
+          "A pointer to a computation in progress, not just a value.")
+        (li
+          (strong "Time travel")
+          " — freeze at each step, store the history. "
+          "Jump to any point. Undo. Branch.")
+        (li
+          (strong "Verification")
+          " — re-run from a frozen state, "
+          "check the result matches. Reproducible computation."))
+      (p
+        "The Platonic argument made concrete: a computation IS a value. "
+        "The Form persists. The instance resumes."))))
diff --git a/sx/sx/geography/cek/index.sx b/sx/sx/geography/cek/index.sx
new file mode 100644
index 00000000..d64e5d79
--- /dev/null
+++ b/sx/sx/geography/cek/index.sx
@@ -0,0 +1,94 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "CEK Machine"
+    (~docs/section
+      :title "Three registers"
+      :id "registers"
+      (p
+        "The CEK machine makes evaluation explicit. Every step is a pure function from state to state:")
+      (ul
+        (~tw :tokens "space-y-1 text-stone-600 list-disc pl-5")
+        (li (strong "C") "ontrol — the expression being evaluated")
+        (li (strong "E") "nvironment — the bindings in scope")
+        (li (strong "K") "ontinuation — what to do with the result"))
+      (p
+        "The tree-walk evaluator uses the same three things, but hides them in the call stack. The CEK makes them "
+        (em "data")
+        " — inspectable, serializable, capturable."))
+    (~docs/section
+      :title "Why it matters"
+      :id "why"
+      (p "Making the continuation explicit enables:")
+      (ul
+        (~tw :tokens "space-y-1 text-stone-600 list-disc pl-5")
+        (li
+          (strong "Stepping")
+          " — pause evaluation, inspect state, resume")
+        (li
+          (strong "Serialization")
+          " — save a computation mid-flight, restore later")
+        (li
+          (strong "Delimited continuations")
+          " — "
+          (code "shift")
+          "/"
+          (code "reset")
+          " capture \"the rest of this expression\" as a value")
+        (li
+          (strong "Deref-as-shift")
+          " — "
+          (code "(deref sig)")
+          " inside a reactive boundary captures the continuation as the subscriber")))
+    (~docs/section
+      :title "Default evaluator"
+      :id "default"
+      (p
+        "CEK is the default evaluator on both client (JS) and server (Python). Every "
+        (code "eval-expr")
+        " call goes through "
+        (code "cek-run")
+        ". The tree-walk evaluator is preserved as "
+        (code "_tree_walk_eval_expr")
+        " for test runners that interpret "
+        (code ".sx")
+        " files.")
+      (p "The CEK is defined in two spec files:")
+      (ul
+        (~tw :tokens "space-y-1 text-stone-600 list-disc pl-5")
+        (li
+          (code "frames.sx")
+          " — frame types (IfFrame, ArgFrame, ResetFrame, ReactiveResetFrame, ...)")
+        (li
+          (code "cek.sx")
+          " — step function, run loop, special form handlers, continuation operations")))
+    (~docs/section
+      :title "Deref as shift"
+      :id "deref-as-shift"
+      (p
+        "The reactive payoff. When "
+        (code "(deref sig)")
+        " encounters a signal inside a "
+        (code "reactive-reset")
+        " boundary:")
+      (ol
+        (~tw :tokens "space-y-1 text-stone-600 list-decimal pl-5")
+        (li
+          (strong "Shift")
+          " — capture all frames between here and the reactive-reset")
+        (li
+          (strong "Subscribe")
+          " — register the captured continuation as a signal subscriber")
+        (li
+          (strong "Return")
+          " — flow the current signal value through the rest of the expression"))
+      (p
+        "When the signal changes, the captured continuation is re-invoked with the new value. The "
+        (code "update-fn")
+        " on the ReactiveResetFrame mutates the DOM. No explicit "
+        (code "effect()")
+        " wrapping needed.")
+      (~docs/code
+        :src (highlight
+          ";; User writes:\n(div :class (str \"count-\" (deref counter))\n  (str \"Value: \" (deref counter)))\n\n;; CEK sees (deref counter) → signal? → reactive-reset on stack?\n;; Yes: capture (str \"count-\" [HOLE]) as continuation\n;; Register as subscriber. Return current value.\n;; When counter changes: re-invoke continuation → update DOM."
+          "lisp")))))
diff --git a/sx/sx/geography/eval-rules.sx b/sx/sx/geography/eval-rules/index.sx
similarity index 99%
rename from sx/sx/geography/eval-rules.sx
rename to sx/sx/geography/eval-rules/index.sx
index e48d7c96..576b394f 100644
--- a/sx/sx/geography/eval-rules.sx
+++ b/sx/sx/geography/eval-rules/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~geography/eval-rules-content ()
+(defcomp ()
   (~docs/page :title "Evaluation Rules"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Machine-readable SX semantics — a non-circular reference for how the language evaluates expressions.")
diff --git a/sx/sx/geography/hypermedia/example/_shared/page-content.sx b/sx/sx/geography/hypermedia/example/_shared/page-content.sx
new file mode 100644
index 00000000..d3535a71
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/_shared/page-content.sx
@@ -0,0 +1,50 @@
+(defcomp
+  (&key
+    (title :as string)
+    (description :as string)
+    (demo-description :as string?)
+    demo
+    (sx-code :as string)
+    (sx-lang :as string?)
+    (handler-names :as list)
+    (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 (~tw :tokens "text-stone-600 mb-6") description)
+    (error-boundary
+      (~examples/card
+        :title "Demo"
+        :description demo-description
+        (~examples/demo demo)))
+    (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3") "S-expression")
+    (error-boundary
+      (~examples/source
+        :src-code (highlight sx-code (if sx-lang sx-lang "lisp"))))
+    (when
+      comp-placeholder-id
+      (<>
+        (h3
+          (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3")
+          (if comp-heading comp-heading "Component"))
+        (error-boundary (~docs/placeholder :id comp-placeholder-id))))
+    (h3
+      (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3")
+      (if handler-heading handler-heading "Server handler"))
+    (error-boundary
+      (~examples/source
+        :src-code (highlight
+          (join "\n\n" (map handler-source handler-names))
+          (if handler-lang handler-lang "sx"))))
+    (div
+      (~tw :tokens "flex items-center justify-between mt-6")
+      (h3 (~tw :tokens "text-lg font-semibold text-stone-700") "Wire response")
+      (~docs/clear-cache-btn))
+    (when wire-note (p (~tw :tokens "text-stone-500 text-sm mb-2") wire-note))
+    (when
+      wire-placeholder-id
+      (error-boundary (~docs/placeholder :id wire-placeholder-id)))))
diff --git a/sx/sx/geography/hypermedia/example/active-search/index.sx b/sx/sx/geography/hypermedia/example/active-search/index.sx
new file mode 100644
index 00000000..cd277cc6
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/active-search/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Active Search"
+    :description "An input with sx-trigger=\"keyup delay:300ms changed\" debounces keystrokes and only fires when the value changes. The server filters a list of programming languages."
+    :demo-description "Type to search through 20 programming languages."
+    :demo (~examples/active-search-demo)
+    :sx-code "(input :type \"text\" :name \"q\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.search))))\"\n  :sx-trigger \"keyup delay:300ms changed\"\n  :sx-target \"#search-results\"\n  :sx-swap \"innerHTML\"\n  :placeholder \"Search...\")"
+    :handler-names (list "ex-search")
+    :comp-placeholder-id "search-comp"
+    :wire-placeholder-id "search-wire"))
diff --git a/sx/sx/geography/hypermedia/example/animations/index.sx b/sx/sx/geography/hypermedia/example/animations/index.sx
new file mode 100644
index 00000000..18dc1d22
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/animations/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Animations"
+    :description "CSS animations play on swap. The component injects a style tag with a keyframe animation and applies the class. Each click picks a random background colour."
+    :demo-description "Click to swap in content with a fade-in animation."
+    :demo (~examples/animations-demo)
+    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.animate))))\"\n  :sx-target \"#anim-target\"\n  :sx-swap \"innerHTML\"\n  \"Load with animation\")\n\n;; Component uses CSS animation class\n(defcomp ~examples-content/anim-result (&key color time)\n  (div :class \"sx-fade-in ...\"\n    (style \".sx-fade-in { animation: sxFadeIn 0.5s }\")\n    (p \"Faded in!\")))"
+    :handler-names (list "ex-animate")
+    :comp-placeholder-id "anim-comp"
+    :wire-placeholder-id "anim-wire"))
diff --git a/sx/sx/geography/hypermedia/example/bulk-update/index.sx b/sx/sx/geography/hypermedia/example/bulk-update/index.sx
new file mode 100644
index 00000000..da9f76fb
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/bulk-update/index.sx
@@ -0,0 +1,17 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Bulk Update"
+    :description "Select rows with checkboxes and use Activate/Deactivate buttons. sx-include gathers checkbox values from the form."
+    :demo-description "Check some rows, then click Activate or Deactivate."
+    :demo (~examples/bulk-update-demo
+      :users (list
+        (list "1" "Alice Chen" "alice@example.com" "active")
+        (list "2" "Bob Rivera" "bob@example.com" "inactive")
+        (list "3" "Carol Zhang" "carol@example.com" "active")
+        (list "4" "Dan Okafor" "dan@example.com" "inactive")
+        (list "5" "Eve Larsson" "eve@example.com" "active")))
+    :sx-code "(button\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.bulk))))?action=activate\"\n  :sx-target \"#bulk-table\"\n  :sx-swap \"innerHTML\"\n  :sx-include \"#bulk-form\"\n  \"Activate\")"
+    :handler-names (list "ex-bulk")
+    :comp-placeholder-id "bulk-comp"
+    :wire-placeholder-id "bulk-wire"))
diff --git a/sx/sx/geography/hypermedia/example/click-to-load/index.sx b/sx/sx/geography/hypermedia/example/click-to-load/index.sx
new file mode 100644
index 00000000..b5037065
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/click-to-load/index.sx
@@ -0,0 +1,12 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Click to Load"
+    :description "The simplest sx interaction: click a button, fetch content from the server, swap it in."
+    :demo-description "Click the button to load server-rendered content."
+    :demo (~examples/click-to-load-demo)
+    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.click))))\"\n  :sx-target \"#click-result\"\n  :sx-swap \"innerHTML\"\n  \"Load content\")"
+    :handler-names (list "ex-click")
+    :comp-placeholder-id "click-comp"
+    :wire-placeholder-id "click-wire"
+    :wire-note "The server responds with content-type text/sx. New CSS rules are prepended as a style tag. Clear the component cache to see component definitions included in the wire response."))
diff --git a/sx/sx/geography/hypermedia/example/delete-row/index.sx b/sx/sx/geography/hypermedia/example/delete-row/index.sx
new file mode 100644
index 00000000..9e18886a
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/delete-row/index.sx
@@ -0,0 +1,18 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Delete Row"
+    :description "sx-delete with sx-swap \"outerHTML\" and an empty response removes the row from the DOM."
+    :demo-description "Click delete to remove a row. Uses sx-confirm for confirmation."
+    :demo (~examples/delete-demo
+      :items (list
+        (list "1" "Implement dark mode")
+        (list "2" "Fix login bug")
+        (list "3" "Write documentation")
+        (list "4" "Deploy to production")
+        (list "5" "Add unit tests")))
+    :sx-code "(button\n  :sx-delete \"/sx/(geography.(hypermedia.(example.(api.(delete.1)))))\"\n  :sx-target \"#row-1\"\n  :sx-swap \"outerHTML\"\n  :sx-confirm \"Delete this item?\"\n  \"delete\")"
+    :handler-names (list "ex-delete")
+    :comp-placeholder-id "delete-comp"
+    :wire-placeholder-id "delete-wire"
+    :wire-note "Empty body — outerHTML swap replaces the target element with nothing."))
diff --git a/sx/sx/geography/hypermedia/example/dialogs/index.sx b/sx/sx/geography/hypermedia/example/dialogs/index.sx
new file mode 100644
index 00000000..9c15266c
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/dialogs/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Dialogs"
+    :description "Open a modal dialog by swapping in the dialog component. Close by swapping in empty content. Pure sx — no JavaScript library needed."
+    :demo-description "Click to open a modal dialog."
+    :demo (~examples/dialogs-demo)
+    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dialog))))\"\n  :sx-target \"#dialog-container\"\n  :sx-swap \"innerHTML\"\n  \"Open Dialog\")\n\n;; Dialog closes by swapping empty content\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dialog-close))))\"\n  :sx-target \"#dialog-container\"\n  :sx-swap \"innerHTML\"\n  \"Close\")"
+    :handler-names (list "ex-dialog" "ex-dialog-close")
+    :comp-placeholder-id "dialog-comp"
+    :wire-placeholder-id "dialog-wire"))
diff --git a/sx/sx/geography/hypermedia/example/edit-row/index.sx b/sx/sx/geography/hypermedia/example/edit-row/index.sx
new file mode 100644
index 00000000..20e04612
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/edit-row/index.sx
@@ -0,0 +1,16 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Edit Row"
+    :description "Click edit to replace a table row with input fields. Save or cancel swaps back the display row. Uses sx-include to gather form values from the row."
+    :demo-description "Click edit on any row to modify it inline."
+    :demo (~examples/edit-row-demo
+      :rows (list
+        (list "1" "Widget A" "19.99" "142")
+        (list "2" "Widget B" "24.50" "89")
+        (list "3" "Widget C" "12.00" "305")
+        (list "4" "Widget D" "45.00" "67")))
+    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.(editrow.1)))))\"\n  :sx-target \"#erow-1\"\n  :sx-swap \"outerHTML\"\n  \"edit\")\n\n;; Save sends form data via POST\n(button\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.(editrow.1)))))\"\n  :sx-target \"#erow-1\"\n  :sx-swap \"outerHTML\"\n  :sx-include \"#erow-1\"\n  \"save\")"
+    :handler-names (list "ex-editrow-form" "ex-editrow-save")
+    :comp-placeholder-id "editrow-comp"
+    :wire-placeholder-id "editrow-wire"))
diff --git a/sx/sx/geography/hypermedia/example/form-submission/index.sx b/sx/sx/geography/hypermedia/example/form-submission/index.sx
new file mode 100644
index 00000000..e1bb1560
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/form-submission/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Form Submission"
+    :description "Forms with sx-post submit via AJAX and swap the response into a target."
+    :demo-description "Enter a name and submit."
+    :demo (~examples/form-demo)
+    :sx-code "(form\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.form))))\"\n  :sx-target \"#form-result\"\n  :sx-swap \"innerHTML\"\n  (input :type \"text\" :name \"name\")\n  (button :type \"submit\" \"Submit\"))"
+    :handler-names (list "ex-form")
+    :comp-placeholder-id "form-comp"
+    :wire-placeholder-id "form-wire"))
diff --git a/sx/sx/geography/hypermedia/example/infinite-scroll/index.sx b/sx/sx/geography/hypermedia/example/infinite-scroll/index.sx
new file mode 100644
index 00000000..22ff6651
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/infinite-scroll/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Infinite Scroll"
+    :description "A sentinel element at the bottom uses sx-trigger=\"intersect once\" to load the next page when scrolled into view. Each response appends items and a new sentinel."
+    :demo-description "Scroll down in the container to load more items (5 pages total)."
+    :demo (~examples/infinite-scroll-demo)
+    :sx-code "(div :id \"scroll-sentinel\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.scroll))))?page=2\"\n  :sx-trigger \"intersect once\"\n  :sx-target \"#scroll-items\"\n  :sx-swap \"beforeend\"\n  \"Loading more...\")"
+    :handler-names (list "ex-scroll")
+    :comp-placeholder-id "scroll-comp"
+    :wire-placeholder-id "scroll-wire"))
diff --git a/sx/sx/geography/hypermedia/example/inline-edit/index.sx b/sx/sx/geography/hypermedia/example/inline-edit/index.sx
new file mode 100644
index 00000000..62e34312
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/inline-edit/index.sx
@@ -0,0 +1,13 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Inline Edit"
+    :description "Click edit to swap a display view for an edit form. Save swaps back."
+    :demo-description "Click edit, modify the text, save or cancel."
+    :demo (~examples/inline-edit-demo)
+    :sx-code ";; View mode — shows text + edit button\n(~examples/inline-view :value \"some text\")\n\n;; Edit mode — returned by server on click\n(~examples/inline-edit-form :value \"some text\")"
+    :handler-names (list "ex-edit-form" "ex-edit-save")
+    :comp-placeholder-id "edit-comp"
+    :comp-heading "Components"
+    :handler-heading "Server handlers"
+    :wire-placeholder-id "edit-wire"))
diff --git a/sx/sx/geography/hypermedia/example/inline-validation/index.sx b/sx/sx/geography/hypermedia/example/inline-validation/index.sx
new file mode 100644
index 00000000..009245b7
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/inline-validation/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Inline Validation"
+    :description "Validate an email field on blur. The server checks format and whether it is taken, returning green or red feedback inline."
+    :demo-description "Enter an email and click away (blur) to validate."
+    :demo (~examples/inline-validation-demo)
+    :sx-code "(input :type \"text\" :name \"email\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.validate))))\"\n  :sx-trigger \"blur\"\n  :sx-target \"#email-feedback\"\n  :sx-swap \"innerHTML\"\n  :placeholder \"user@example.com\")"
+    :handler-names (list "ex-validate")
+    :comp-placeholder-id "validate-comp"
+    :wire-placeholder-id "validate-wire"))
diff --git a/sx/sx/geography/hypermedia/example/json-encoding/index.sx b/sx/sx/geography/hypermedia/example/json-encoding/index.sx
new file mode 100644
index 00000000..a479e226
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/json-encoding/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "JSON Encoding"
+    :description "Use sx-encoding=\"json\" to send form data as a JSON body instead of URL-encoded form data. The server echoes back what it received."
+    :demo-description "Submit the form and see the JSON body the server received."
+    :demo (~examples/json-encoding-demo)
+    :sx-code "(form\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.json-echo))))\"\n  :sx-target \"#json-result\"\n  :sx-swap \"innerHTML\"\n  :sx-encoding \"json\"\n  (input :name \"name\" :value \"Ada\")\n  (input :type \"number\" :name \"age\" :value \"36\")\n  (button \"Submit as JSON\"))"
+    :handler-names (list "ex-json-echo")
+    :comp-placeholder-id "json-comp"
+    :wire-placeholder-id "json-wire"))
diff --git a/sx/sx/geography/hypermedia/example/keyboard-shortcuts/index.sx b/sx/sx/geography/hypermedia/example/keyboard-shortcuts/index.sx
new file mode 100644
index 00000000..75308e45
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/keyboard-shortcuts/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Keyboard Shortcuts"
+    :description "Use sx-trigger with keyup event filters and from:body to listen for global keyboard shortcuts. The filter prevents firing when typing in inputs."
+    :demo-description "Press s, n, or h on your keyboard."
+    :demo (~examples/keyboard-shortcuts-demo)
+    :sx-code "(div :id \"kbd-target\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.keyboard))))?key=s\"\n  :sx-trigger \"keyup[key=='s'&&!event.target.matches('input,textarea')] from:body\"\n  :sx-swap \"innerHTML\"\n  \"Press a shortcut key...\")"
+    :handler-names (list "ex-keyboard")
+    :comp-placeholder-id "kbd-comp"
+    :wire-placeholder-id "kbd-wire"))
diff --git a/sx/sx/geography/hypermedia/example/lazy-loading/index.sx b/sx/sx/geography/hypermedia/example/lazy-loading/index.sx
new file mode 100644
index 00000000..68ca670d
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/lazy-loading/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Lazy Loading"
+    :description "Use sx-trigger=\"load\" to fetch content as soon as the element enters the DOM. Great for deferring expensive content below the fold."
+    :demo-description "Content loads automatically when the page renders."
+    :demo (~examples/lazy-loading-demo)
+    :sx-code "(div\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.lazy))))\"\n  :sx-trigger \"load\"\n  :sx-swap \"innerHTML\"\n  (div :class \"animate-pulse\" \"Loading...\"))"
+    :handler-names (list "ex-lazy")
+    :comp-placeholder-id "lazy-comp"
+    :wire-placeholder-id "lazy-wire"))
diff --git a/sx/sx/geography/hypermedia/example/loading-states/index.sx b/sx/sx/geography/hypermedia/example/loading-states/index.sx
new file mode 100644
index 00000000..80b3c588
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/loading-states/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Loading States"
+    :description "sx.js adds the .sx-request CSS class to any element that has an active request. Use pure CSS to show spinners, disable buttons, or change opacity during loading."
+    :demo-description "Click the button — it shows a spinner during the 2-second request."
+    :demo (~examples/loading-states-demo)
+    :sx-code ";; .sx-request class added during request\n(style \".sx-loading-btn.sx-request {\n  opacity: 0.7; pointer-events: none; }\n.sx-loading-btn.sx-request .sx-spinner {\n  display: inline-block; }\n.sx-loading-btn .sx-spinner {\n  display: none; }\")\n\n(button :class \"sx-loading-btn\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.slow))))\"\n  :sx-target \"#loading-result\"\n  (span :class \"sx-spinner animate-spin\" \"...\")\n  \"Load slow endpoint\")"
+    :handler-names (list "ex-slow")
+    :comp-placeholder-id "loading-comp"
+    :wire-placeholder-id "loading-wire"))
diff --git a/sx/sx/geography/hypermedia/example/oob-swaps/index.sx b/sx/sx/geography/hypermedia/example/oob-swaps/index.sx
new file mode 100644
index 00000000..cdd5b91f
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/oob-swaps/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Out-of-Band Swaps"
+    :description "sx-swap-oob lets a single response update multiple elements anywhere in the DOM."
+    :demo-description "One request updates both Box A (via sx-target) and Box B (via sx-swap-oob)."
+    :demo (~examples/oob-demo)
+    :sx-code ";; Button targets Box A\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.oob))))\"\n  :sx-target \"#oob-box-a\"\n  :sx-swap \"innerHTML\"\n  \"Update both boxes\")"
+    :handler-names (list "ex-oob")
+    :wire-placeholder-id "oob-wire"
+    :wire-note "The fragment contains both the main content and an OOB element. sx.js splits them: main content goes to sx-target, OOB elements find their targets by ID."))
diff --git a/sx/sx/geography/hypermedia/example/polling/index.sx b/sx/sx/geography/hypermedia/example/polling/index.sx
new file mode 100644
index 00000000..276eef07
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/polling/index.sx
@@ -0,0 +1,12 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Polling"
+    :description "Use sx-trigger with \"every\" to poll the server at regular intervals."
+    :demo-description "This div polls the server every 2 seconds."
+    :demo (~examples/polling-demo)
+    :sx-code "(div\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.poll))))\"\n  :sx-trigger \"load, every 2s\"\n  :sx-swap \"innerHTML\"\n  \"Loading...\")"
+    :handler-names (list "ex-poll")
+    :comp-placeholder-id "poll-comp"
+    :wire-placeholder-id "poll-wire"
+    :wire-note "Updates every 2 seconds — watch the time and count change."))
diff --git a/sx/sx/geography/hypermedia/example/progress-bar/index.sx b/sx/sx/geography/hypermedia/example/progress-bar/index.sx
new file mode 100644
index 00000000..4693b542
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/progress-bar/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Progress Bar"
+    :description "Start a server-side job, then poll for progress using sx-trigger=\"load delay:500ms\" on each response. The bar fills up and stops when complete."
+    :demo-description "Click start to begin a simulated job."
+    :demo (~examples/progress-bar-demo)
+    :sx-code ";; Start the job\n(button\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.progress-start))))\"\n  :sx-target \"#progress-target\"\n  :sx-swap \"innerHTML\")\n\n;; Each response re-polls via sx-trigger=\"load\"\n(div :sx-get \"/sx/(geography.(hypermedia.(example.(api.progress-status))))?job=ID\"\n  :sx-trigger \"load delay:500ms\"\n  :sx-target \"#progress-target\"\n  :sx-swap \"innerHTML\")"
+    :handler-names (list "ex-progress-start" "ex-progress-status")
+    :comp-placeholder-id "progress-comp"
+    :wire-placeholder-id "progress-wire"))
diff --git a/sx/sx/geography/hypermedia/example/put-patch/index.sx b/sx/sx/geography/hypermedia/example/put-patch/index.sx
new file mode 100644
index 00000000..268bf503
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/put-patch/index.sx
@@ -0,0 +1,14 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "PUT / PATCH"
+    :description "sx-put replaces the entire resource. This example shows a profile card with an Edit All button that sends a PUT with all fields."
+    :demo-description "Click Edit All to replace the full profile via PUT."
+    :demo (~examples/put-patch-demo
+      :name "Ada Lovelace"
+      :email "ada@example.com"
+      :role "Engineer")
+    :sx-code ";; Replace entire resource\n(form :sx-put \"/sx/(geography.(hypermedia.(example.(api.putpatch))))\"\n  :sx-target \"#pp-target\" :sx-swap \"innerHTML\"\n  (input :name \"name\") (input :name \"email\")\n  (button \"Save All (PUT)\"))"
+    :handler-names (list "ex-pp-edit-all" "ex-pp-put")
+    :comp-placeholder-id "pp-comp"
+    :wire-placeholder-id "pp-wire"))
diff --git a/sx/sx/geography/hypermedia/example/reset-on-submit/index.sx b/sx/sx/geography/hypermedia/example/reset-on-submit/index.sx
new file mode 100644
index 00000000..bebfbdbf
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/reset-on-submit/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Reset on Submit"
+    :description "Use sx-on:afterSwap=\"this.reset()\" to clear form inputs after a successful submission."
+    :demo-description "Submit a message — the input resets after each send."
+    :demo (~examples/reset-on-submit-demo)
+    :sx-code "(form :id \"reset-form\"\n  :sx-post \"/sx/(geography.(hypermedia.(example.(api.reset-submit))))\"\n  :sx-target \"#reset-result\"\n  :sx-swap \"innerHTML\"\n  :sx-on:afterSwap \"this.reset()\"\n  (input :type \"text\" :name \"message\")\n  (button :type \"submit\" \"Send\"))"
+    :handler-names (list "ex-reset-submit")
+    :comp-placeholder-id "reset-comp"
+    :wire-placeholder-id "reset-wire"))
diff --git a/sx/sx/geography/hypermedia/example/retry/index.sx b/sx/sx/geography/hypermedia/example/retry/index.sx
new file mode 100644
index 00000000..c25a2225
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/retry/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Retry"
+    :description "sx-retry=\"exponential:1000:8000\" retries failed requests with exponential backoff starting at 1s up to 8s. The endpoint fails the first 2 attempts and succeeds on the 3rd."
+    :demo-description "Click the button — watch it retry automatically after failures."
+    :demo (~examples/retry-demo)
+    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.flaky))))\"\n  :sx-target \"#retry-result\"\n  :sx-swap \"innerHTML\"\n  :sx-retry \"exponential:1000:8000\"\n  \"Call flaky endpoint\")"
+    :handler-names (list "ex-flaky")
+    :comp-placeholder-id "retry-comp"
+    :wire-placeholder-id "retry-wire"))
diff --git a/sx/sx/geography/hypermedia/example/select-filter/index.sx b/sx/sx/geography/hypermedia/example/select-filter/index.sx
new file mode 100644
index 00000000..8886f811
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/select-filter/index.sx
@@ -0,0 +1,10 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Select Filter"
+    :description "sx-select lets the client pick a specific section from the server response by CSS selector. The server always returns the full dashboard — the client filters."
+    :demo-description "Different buttons select different parts of the same server response."
+    :demo (~examples/select-filter-demo)
+    :sx-code ";; Pick just the stats section from the response\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dashboard))))\"\n  :sx-target \"#filter-target\"\n  :sx-swap \"innerHTML\"\n  :sx-select \"#dash-stats\"\n  \"Stats Only\")\n\n;; No sx-select — get the full response\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.dashboard))))\"\n  :sx-target \"#filter-target\"\n  :sx-swap \"innerHTML\"\n  \"Full Dashboard\")"
+    :handler-names (list "ex-dashboard")
+    :wire-placeholder-id "filter-wire"))
diff --git a/sx/sx/geography/hypermedia/example/swap-positions/index.sx b/sx/sx/geography/hypermedia/example/swap-positions/index.sx
new file mode 100644
index 00000000..ff2b12a4
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/swap-positions/index.sx
@@ -0,0 +1,10 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Swap Positions"
+    :description "Demonstrates different swap modes: beforeend appends, afterbegin prepends, and none skips the main swap while still processing OOB updates."
+    :demo-description "Try each button to see different swap behaviours."
+    :demo (~examples/swap-positions-demo)
+    :sx-code ";; Append to end\n(button :sx-post \"/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=beforeend\"\n  :sx-target \"#swap-log\" :sx-swap \"beforeend\"\n  \"Add to End\")\n\n;; Prepend to start\n(button :sx-post \"/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=afterbegin\"\n  :sx-target \"#swap-log\" :sx-swap \"afterbegin\"\n  \"Add to Start\")\n\n;; No swap — OOB counter update only\n(button :sx-post \"/sx/(geography.(hypermedia.(example.(api.swap-log))))?mode=none\"\n  :sx-target \"#swap-log\" :sx-swap \"none\"\n  \"Silent Ping\")"
+    :handler-names (list "ex-swap-log")
+    :wire-placeholder-id "swap-wire"))
diff --git a/sx/sx/geography/hypermedia/example/sync-replace/index.sx b/sx/sx/geography/hypermedia/example/sync-replace/index.sx
new file mode 100644
index 00000000..72e9e902
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/sync-replace/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Request Abort"
+    :description "sx-sync=\"replace\" aborts any in-flight request before sending a new one. This prevents stale responses from overwriting newer ones, even with random server delays."
+    :demo-description "Type quickly — only the latest result appears despite random 0.5-2s server delays."
+    :demo (~examples/sync-replace-demo)
+    :sx-code "(input :type \"text\" :name \"q\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.slow-search))))\"\n  :sx-trigger \"keyup delay:200ms changed\"\n  :sx-target \"#sync-result\"\n  :sx-swap \"innerHTML\"\n  :sx-sync \"replace\"\n  \"Type to search...\")"
+    :handler-names (list "ex-slow-search")
+    :comp-placeholder-id "sync-comp"
+    :wire-placeholder-id "sync-wire"))
diff --git a/sx/sx/geography/hypermedia/example/tabs/index.sx b/sx/sx/geography/hypermedia/example/tabs/index.sx
new file mode 100644
index 00000000..54baa3fe
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/tabs/index.sx
@@ -0,0 +1,10 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Tabs"
+    :description "Tab navigation using sx-push-url to update the browser URL. Back/forward buttons navigate between previously visited tabs."
+    :demo-description "Click tabs to switch content. Watch the browser URL change."
+    :demo (~examples/tabs-demo)
+    :sx-code "(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.(tabs.tab1)))))\"\n  :sx-target \"#tab-content\"\n  :sx-swap \"innerHTML\"\n  :sx-push-url \"/sx/(geography.(hypermedia.(example.tabs)))?tab=tab1\"\n  \"Overview\")"
+    :handler-names (list "ex-tabs")
+    :wire-placeholder-id "tabs-wire"))
diff --git a/sx/sx/geography/hypermedia/example/vals-and-headers/index.sx b/sx/sx/geography/hypermedia/example/vals-and-headers/index.sx
new file mode 100644
index 00000000..868bc3e5
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/vals-and-headers/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Vals & Headers"
+    :description "sx-vals adds extra key/value pairs to the request parameters. sx-headers adds custom HTTP headers. The server echoes back what it received."
+    :demo-description "Click each button to see what the server receives."
+    :demo (~examples/vals-headers-demo)
+    :sx-code ";; Send extra values with the request\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.echo-vals))))\"\n  :sx-vals \"{\\\"source\\\": \\\"button\\\"}\"\n  \"Send with vals\")\n\n;; Send custom headers\n(button\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.echo-headers))))\"\n  :sx-headers {:X-Custom-Token \"abc123\"}\n  \"Send with headers\")"
+    :handler-names (list "ex-echo-vals" "ex-echo-headers")
+    :comp-placeholder-id "vals-comp"
+    :wire-placeholder-id "vals-wire"))
diff --git a/sx/sx/geography/hypermedia/example/value-select/index.sx b/sx/sx/geography/hypermedia/example/value-select/index.sx
new file mode 100644
index 00000000..14fe5a7e
--- /dev/null
+++ b/sx/sx/geography/hypermedia/example/value-select/index.sx
@@ -0,0 +1,11 @@
+(defcomp
+  ()
+  (~examples/page-content
+    :title "Value Select"
+    :description "Two linked selects: pick a category and the second select updates with matching items via sx-get."
+    :demo-description "Select a category to populate the item dropdown."
+    :demo (~examples/value-select-demo)
+    :sx-code "(select :name \"category\"\n  :sx-get \"/sx/(geography.(hypermedia.(example.(api.values))))\"\n  :sx-trigger \"change\"\n  :sx-target \"#value-items\"\n  :sx-swap \"innerHTML\"\n  (option \"Languages\")\n  (option \"Frameworks\")\n  (option \"Databases\"))"
+    :handler-names (list "ex-values")
+    :comp-placeholder-id "values-comp"
+    :wire-placeholder-id "values-wire"))
diff --git a/sx/sx/geography/hypermedia/reference/_shared/attr-detail-content.sx b/sx/sx/geography/hypermedia/reference/_shared/attr-detail-content.sx
new file mode 100644
index 00000000..4e432652
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/_shared/attr-detail-content.sx
@@ -0,0 +1,29 @@
+(defcomp
+  (&key
+    (title :as string)
+    (description :as string)
+    demo
+    (example-code :as string)
+    (handler-code :as string?)
+    (wire-placeholder-id :as string?))
+  (~docs/page
+    :title title
+    (p (~tw :tokens "text-stone-600 mb-6") description)
+    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
+    (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "S-expression")
+    (~examples/source :src-code (highlight example-code "lisp"))
+    (when
+      handler-code
+      (<>
+        (h3
+          (~tw :tokens "text-lg font-semibold text-stone-700 mt-6")
+          "Server handler")
+        (~examples/source :src-code (highlight handler-code "lisp"))))
+    (when
+      wire-placeholder-id
+      (<>
+        (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "Wire response")
+        (p
+          (~tw :tokens "text-stone-500 text-sm mb-2")
+          "Trigger the demo to see the raw response the server sends.")
+        (~docs/placeholder :id wire-placeholder-id)))))
diff --git a/sx/sx/geography/hypermedia/reference/_shared/attr-not-found.sx b/sx/sx/geography/hypermedia/reference/_shared/attr-not-found.sx
new file mode 100644
index 00000000..576c5c3e
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/_shared/attr-not-found.sx
@@ -0,0 +1,5 @@
+(defcomp
+  (&key (slug :as string))
+  (~docs/page
+    :title "Not Found"
+    (p (~tw :tokens "text-stone-600") (str "No documentation found for \"" slug "\"."))))
diff --git a/sx/sx/geography/hypermedia/reference/_shared/event-detail-content.sx b/sx/sx/geography/hypermedia/reference/_shared/event-detail-content.sx
new file mode 100644
index 00000000..3216f6e0
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/_shared/event-detail-content.sx
@@ -0,0 +1,11 @@
+(defcomp
+  (&key title description example-code demo)
+  (~docs/page
+    :title title
+    (p (~tw :tokens "text-stone-600 mb-6") description)
+    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
+    (when
+      example-code
+      (<>
+        (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "Example usage")
+        (~examples/source :src-code (highlight example-code "lisp"))))))
diff --git a/sx/sx/geography/hypermedia/reference/_shared/header-detail-content.sx b/sx/sx/geography/hypermedia/reference/_shared/header-detail-content.sx
new file mode 100644
index 00000000..670ba9a4
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/_shared/header-detail-content.sx
@@ -0,0 +1,31 @@
+(defcomp
+  (&key
+    (title :as string)
+    (direction :as string)
+    (description :as string)
+    (example-code :as string?)
+    demo)
+  (~docs/page
+    :title title
+    (let
+      ((badge-class (if (= direction "request") "bg-blue-100 text-blue-700" (if (= direction "response") "bg-emerald-100 text-emerald-700" "bg-amber-100 text-amber-700")))
+        (badge-label
+          (if
+            (= direction "request")
+            "Request Header"
+            (if
+              (= direction "response")
+              "Response Header"
+              "Request & Response"))))
+      (div
+        (~tw :tokens "flex items-center gap-3 mb-4")
+        (span
+          :class (str "text-xs font-medium px-2 py-1 rounded " badge-class)
+          badge-label)))
+    (p (~tw :tokens "text-stone-600 mb-6") description)
+    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
+    (when
+      example-code
+      (<>
+        (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "Example usage")
+        (~examples/source :src-code (highlight example-code "lisp"))))))
diff --git a/sx/sx/geography/hypermedia/reference/attributes/index.sx b/sx/sx/geography/hypermedia/reference/attributes/index.sx
new file mode 100644
index 00000000..40724948
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/attributes/index.sx
@@ -0,0 +1,8 @@
+(defcomp
+  (&key req-table beh-table uniq-table)
+  (~docs/page
+    :title "Attribute Reference"
+    (p
+      (~tw :tokens "text-stone-600 mb-6")
+      "sx attributes mirror htmx where possible. This table shows all available attributes and their status.")
+    (div (~tw :tokens "space-y-8") req-table beh-table uniq-table)))
diff --git a/sx/sx/geography/hypermedia/reference/events/index.sx b/sx/sx/geography/hypermedia/reference/events/index.sx
new file mode 100644
index 00000000..df124e86
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/events/index.sx
@@ -0,0 +1,10 @@
+(defcomp
+  (&key table)
+  (~docs/page
+    :title "Events"
+    (p
+      (~tw :tokens "text-stone-600 mb-6")
+      "sx fires custom DOM events at various points in the request lifecycle. "
+      "Listen for them with sx-on:* attributes or addEventListener. "
+      "Client-side routing fires sx:clientRoute instead of request lifecycle events.")
+    table))
diff --git a/sx/sx/geography/hypermedia/reference/headers/index.sx b/sx/sx/geography/hypermedia/reference/headers/index.sx
new file mode 100644
index 00000000..729fd99c
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/headers/index.sx
@@ -0,0 +1,8 @@
+(defcomp
+  (&key req-table resp-table)
+  (~docs/page
+    :title "Headers"
+    (p
+      (~tw :tokens "text-stone-600 mb-6")
+      "sx uses custom HTTP headers to coordinate between client and server.")
+    (div (~tw :tokens "space-y-8") req-table resp-table)))
diff --git a/sx/sx/examples.sx b/sx/sx/geography/hypermedia/reference/index.sx
similarity index 59%
rename from sx/sx/examples.sx
rename to sx/sx/geography/hypermedia/reference/index.sx
index 1dec8230..8525f575 100644
--- a/sx/sx/examples.sx
+++ b/sx/sx/geography/hypermedia/reference/index.sx
@@ -1,57 +1,4 @@
 (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-names :as list)
-    (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 (~tw :tokens "text-stone-600 mb-6") description)
-    (error-boundary
-      (~examples/card
-        :title "Demo"
-        :description demo-description
-        (~examples/demo demo)))
-    (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3") "S-expression")
-    (error-boundary
-      (~examples/source
-        :src-code (highlight sx-code (if sx-lang sx-lang "lisp"))))
-    (when
-      comp-placeholder-id
-      (<>
-        (h3
-          (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3")
-          (if comp-heading comp-heading "Component"))
-        (error-boundary (~docs/placeholder :id comp-placeholder-id))))
-    (h3
-      (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3")
-      (if handler-heading handler-heading "Server handler"))
-    (error-boundary
-      (~examples/source
-        :src-code (highlight
-          (join "\n\n" (map handler-source handler-names))
-          (if handler-lang handler-lang "sx"))))
-    (div
-      (~tw :tokens "flex items-center justify-between mt-6")
-      (h3 (~tw :tokens "text-lg font-semibold text-stone-700") "Wire response")
-      (~docs/clear-cache-btn))
-    (when wire-note (p (~tw :tokens "text-stone-500 text-sm mb-2") wire-note))
-    (when
-      wire-placeholder-id
-      (error-boundary (~docs/placeholder :id wire-placeholder-id)))))
-
-(defcomp
-  ~examples/reference-index-content
   ()
   (~docs/page
     :title "Reference"
diff --git a/sx/sx/geography/hypermedia/reference/js-api/index.sx b/sx/sx/geography/hypermedia/reference/js-api/index.sx
new file mode 100644
index 00000000..ea38ec92
--- /dev/null
+++ b/sx/sx/geography/hypermedia/reference/js-api/index.sx
@@ -0,0 +1,3 @@
+(defcomp
+  (&key table)
+  (~docs/page :title "JavaScript API" table))
diff --git a/sx/sx/geography/index.sx b/sx/sx/geography/index.sx
index 1a894133..4e442256 100644
--- a/sx/sx/geography/index.sx
+++ b/sx/sx/geography/index.sx
@@ -1,7 +1,7 @@
 ;; Geography index — architecture overview
 ;; Describes the rendering pipeline: OCaml evaluator → wire formats → client
 
-(defcomp ~geography/index-content () :affinity :server
+(defcomp () :affinity :server
   (div (~tw :tokens "max-w-4xl mx-auto px-6 pb-8 pt-4")
     (h2 (~tw :tokens "text-3xl font-bold text-stone-800 mb-4") "Geography")
     (p (~tw :tokens "text-lg text-stone-600 mb-8")
diff --git a/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-auto.sx b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-auto.sx
new file mode 100644
index 00000000..623f6175
--- /dev/null
+++ b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-auto.sx
@@ -0,0 +1,12 @@
+;; Affinity demo — Phase 7a render boundary annotations.
+;;
+;; Demonstrates :affinity annotations on defcomp and how they influence
+;; the server/client render boundary decision. Components declare where
+;; they prefer to render; the runtime combines this with IO analysis.
+;; --- Demo components with different affinities ---
+(defcomp (&key (label :as string?))
+  (div (~tw :tokens "rounded border border-stone-200 bg-white p-4")
+    (div (~tw :tokens "flex items-center gap-2 mb-2")
+      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-stone-400"))
+      (span (~tw :tokens "text-sm font-mono text-stone-500") ":affinity :auto"))
+    (p (~tw :tokens "text-stone-800") (or label "Pure component — no IO calls. Auto-detected as client-renderable."))))
diff --git a/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-client.sx b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-client.sx
new file mode 100644
index 00000000..1ed9f1f2
--- /dev/null
+++ b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-client.sx
@@ -0,0 +1,7 @@
+(defcomp (&key (label :as string?))
+  :affinity :client
+  (div (~tw :tokens "rounded border border-blue-200 bg-blue-50 p-4")
+    (div (~tw :tokens "flex items-center gap-2 mb-2")
+      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-blue-400"))
+      (span (~tw :tokens "text-sm font-mono text-blue-600") ":affinity :client"))
+    (p (~tw :tokens "text-blue-800") (or label "Explicitly client-rendered — even IO calls would be proxied."))))
diff --git a/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-io-auto.sx b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-io-auto.sx
new file mode 100644
index 00000000..b47f86d0
--- /dev/null
+++ b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-io-auto.sx
@@ -0,0 +1,7 @@
+(defcomp ()
+  (div (~tw :tokens "rounded border border-red-200 bg-red-50 p-4")
+    (div (~tw :tokens "flex items-center gap-2 mb-2")
+      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-red-400"))
+      (span (~tw :tokens "text-sm font-mono text-red-600") ":affinity :auto + IO"))
+    (p (~tw :tokens "text-red-800 mb-3") "Auto affinity with IO dependency — auto-detected as server-rendered.")
+    (~docs/code :src (highlight "(render-target name env io-names)" "lisp"))))
diff --git a/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-io-client.sx b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-io-client.sx
new file mode 100644
index 00000000..12d6962a
--- /dev/null
+++ b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-io-client.sx
@@ -0,0 +1,8 @@
+(defcomp ()
+  :affinity :client
+  (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4")
+    (div (~tw :tokens "flex items-center gap-2 mb-2")
+      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-violet-400"))
+      (span (~tw :tokens "text-sm font-mono text-violet-600") ":affinity :client + IO"))
+    (p (~tw :tokens "text-violet-800 mb-3") "Client affinity overrides IO — calls proxied to server via /sx/io/.")
+    (~docs/code :src (highlight "(component-affinity comp)" "lisp"))))
diff --git a/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-server.sx b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-server.sx
new file mode 100644
index 00000000..e827ffb4
--- /dev/null
+++ b/sx/sx/geography/isomorphism/affinity/_islands/aff-demo-server.sx
@@ -0,0 +1,7 @@
+(defcomp (&key (label :as string?))
+  :affinity :server
+  (div (~tw :tokens "rounded border border-amber-200 bg-amber-50 p-4")
+    (div (~tw :tokens "flex items-center gap-2 mb-2")
+      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-amber-400"))
+      (span (~tw :tokens "text-sm font-mono text-amber-600") ":affinity :server"))
+    (p (~tw :tokens "text-amber-800") (or label "Always server-rendered — auth-sensitive or secret-dependent."))))
diff --git a/sx/sx/affinity-demo.sx b/sx/sx/geography/isomorphism/affinity/index.sx
similarity index 77%
rename from sx/sx/affinity-demo.sx
rename to sx/sx/geography/isomorphism/affinity/index.sx
index 5cc19e42..6c61fae0 100644
--- a/sx/sx/affinity-demo.sx
+++ b/sx/sx/geography/isomorphism/affinity/index.sx
@@ -1,55 +1,5 @@
-;; Affinity demo — Phase 7a render boundary annotations.
-;;
-;; Demonstrates :affinity annotations on defcomp and how they influence
-;; the server/client render boundary decision. Components declare where
-;; they prefer to render; the runtime combines this with IO analysis.
-
-;; --- Demo components with different affinities ---
-
-(defcomp ~affinity-demo/aff-demo-auto (&key (label :as string?))
-  (div (~tw :tokens "rounded border border-stone-200 bg-white p-4")
-    (div (~tw :tokens "flex items-center gap-2 mb-2")
-      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-stone-400"))
-      (span (~tw :tokens "text-sm font-mono text-stone-500") ":affinity :auto"))
-    (p (~tw :tokens "text-stone-800") (or label "Pure component — no IO calls. Auto-detected as client-renderable."))))
-
-(defcomp ~affinity-demo/aff-demo-client (&key (label :as string?))
-  :affinity :client
-  (div (~tw :tokens "rounded border border-blue-200 bg-blue-50 p-4")
-    (div (~tw :tokens "flex items-center gap-2 mb-2")
-      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-blue-400"))
-      (span (~tw :tokens "text-sm font-mono text-blue-600") ":affinity :client"))
-    (p (~tw :tokens "text-blue-800") (or label "Explicitly client-rendered — even IO calls would be proxied."))))
-
-(defcomp ~affinity-demo/aff-demo-server (&key (label :as string?))
-  :affinity :server
-  (div (~tw :tokens "rounded border border-amber-200 bg-amber-50 p-4")
-    (div (~tw :tokens "flex items-center gap-2 mb-2")
-      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-amber-400"))
-      (span (~tw :tokens "text-sm font-mono text-amber-600") ":affinity :server"))
-    (p (~tw :tokens "text-amber-800") (or label "Always server-rendered — auth-sensitive or secret-dependent."))))
-
-(defcomp ~affinity-demo/aff-demo-io-auto ()
-  (div (~tw :tokens "rounded border border-red-200 bg-red-50 p-4")
-    (div (~tw :tokens "flex items-center gap-2 mb-2")
-      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-red-400"))
-      (span (~tw :tokens "text-sm font-mono text-red-600") ":affinity :auto + IO"))
-    (p (~tw :tokens "text-red-800 mb-3") "Auto affinity with IO dependency — auto-detected as server-rendered.")
-    (~docs/code :src (highlight "(render-target name env io-names)" "lisp"))))
-
-(defcomp ~affinity-demo/aff-demo-io-client ()
-  :affinity :client
-  (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4")
-    (div (~tw :tokens "flex items-center gap-2 mb-2")
-      (span (~tw :tokens "inline-block w-2 h-2 rounded-full bg-violet-400"))
-      (span (~tw :tokens "text-sm font-mono text-violet-600") ":affinity :client + IO"))
-    (p (~tw :tokens "text-violet-800 mb-3") "Client affinity overrides IO — calls proxied to server via /sx/io/.")
-    (~docs/code :src (highlight "(component-affinity comp)" "lisp"))))
-
-
 ;; --- Main page component ---
-
-(defcomp ~affinity-demo/content (&key components page-plans)
+(defcomp (&key components page-plans)
   (div (~tw :tokens "space-y-8")
     (div (~tw :tokens "border-b border-stone-200 pb-6")
       (h1 (~tw :tokens "text-2xl font-bold text-stone-900") "Affinity Annotations")
diff --git a/sx/sx/async-io-demo.sx b/sx/sx/geography/isomorphism/async-io/index.sx
similarity index 99%
rename from sx/sx/async-io-demo.sx
rename to sx/sx/geography/isomorphism/async-io/index.sx
index 91defe71..8661c085 100644
--- a/sx/sx/async-io-demo.sx
+++ b/sx/sx/geography/isomorphism/async-io/index.sx
@@ -13,7 +13,7 @@
 ;;   "sx:route client+async"  — async render with IO proxy
 ;;   "sx:io registered N proxied primitives" — IO proxy initialization
 
-(defcomp ~async-io-demo/content ()
+(defcomp ()
   (div (~tw :tokens "space-y-8")
     (div (~tw :tokens "border-b border-stone-200 pb-6")
       (h1 (~tw :tokens "text-2xl font-bold text-stone-900") "Async IO Demo")
diff --git a/sx/sx/geography/isomorphism/bundle-analyzer/_islands/component.sx b/sx/sx/geography/isomorphism/bundle-analyzer/_islands/component.sx
new file mode 100644
index 00000000..508e9052
--- /dev/null
+++ b/sx/sx/geography/isomorphism/bundle-analyzer/_islands/component.sx
@@ -0,0 +1,21 @@
+(defcomp (&key (comp-name :as string) (is-pure :as boolean) (io-refs :as list) (deps :as list) (source :as string))
+  (details :class (str "rounded border "
+                       (if is-pure "border-blue-200 bg-blue-50" "border-amber-200 bg-amber-50"))
+    (summary (~tw :tokens "px-3 py-2 cursor-pointer hover:opacity-80 transition-opacity")
+      (div (~tw :tokens "flex items-center justify-between")
+        (div (~tw :tokens "flex items-center gap-2")
+          (span :class (str "inline-block w-2 h-2 rounded-full "
+                            (if is-pure "bg-blue-500" "bg-amber-500")))
+          (span (~tw :tokens "font-mono text-sm font-medium text-stone-800") comp-name))
+        (div (~tw :tokens "flex items-center gap-2")
+          (when (not (empty? io-refs))
+            (span (~tw :tokens "text-xs text-amber-700")
+              (str "IO: " (join ", " io-refs))))
+          (when (not (empty? deps))
+            (span (~tw :tokens "text-xs text-stone-500")
+              (str (len deps) " deps"))))))
+
+    ;; SX source (shown when component expanded)
+    (div (~tw :tokens "not-prose border-t border-stone-200 p-3 bg-stone-100 rounded-b")
+      (pre (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap overflow-x-auto")
+        (code (highlight source "lisp"))))))
diff --git a/sx/sx/geography/isomorphism/bundle-analyzer/_islands/row.sx b/sx/sx/geography/isomorphism/bundle-analyzer/_islands/row.sx
new file mode 100644
index 00000000..b041c994
--- /dev/null
+++ b/sx/sx/geography/isomorphism/bundle-analyzer/_islands/row.sx
@@ -0,0 +1,36 @@
+(defcomp (&key (name :as string) (path :as string) (needed :as number) (direct :as number) (total :as number) (pct :as number) (savings :as number)
+                             (io-refs :as list) (pure-in-page :as number) (io-in-page :as number) (components :as list))
+  (details (~tw :tokens "rounded border border-stone-200")
+    (summary (~tw :tokens "p-4 cursor-pointer hover:bg-stone-50 transition-colors")
+      (div (~tw :tokens "flex items-center justify-between mb-2")
+        (div
+          (span (~tw :tokens "font-mono font-semibold text-stone-800") name)
+          (span (~tw :tokens "text-stone-400 text-sm ml-2") path))
+        (div (~tw :tokens "flex items-center gap-2")
+          (span (~tw :tokens "inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800")
+            (str pure-in-page " pure"))
+          (span (~tw :tokens "inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800")
+            (str io-in-page " IO"))
+          (div (~tw :tokens "text-right")
+            (span (~tw :tokens "font-mono text-sm")
+              (span (~tw :tokens "text-violet-700 font-bold") (str needed))
+              (span (~tw :tokens "text-stone-400") (str " / " total)))
+            (span (~tw :tokens "ml-2 inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800")
+              (str savings "% saved")))))
+      (div (~tw :tokens "w-full bg-stone-200 rounded-full h-2.5")
+        (div (~tw :tokens "bg-violet-600 h-2.5 rounded-full transition-all")
+             :style (str "width: " pct "%"))))
+
+    ;; Component tree (shown when expanded)
+    (div (~tw :tokens "border-t border-stone-200 p-4 bg-stone-50")
+      (div (~tw :tokens "text-xs font-medium text-stone-500 uppercase tracking-wide mb-3")
+        (str needed " components in bundle"))
+      (div (~tw :tokens "space-y-1")
+        (map (fn (comp)
+          (~analyzer/component
+            :comp-name (get comp "name")
+            :is-pure (get comp "is-pure")
+            :io-refs (get comp "io-refs")
+            :deps (get comp "deps")
+            :source (get comp "source")))
+          components)))))
diff --git a/sx/sx/geography/isomorphism/bundle-analyzer/_islands/stat.sx b/sx/sx/geography/isomorphism/bundle-analyzer/_islands/stat.sx
new file mode 100644
index 00000000..76ba4544
--- /dev/null
+++ b/sx/sx/geography/isomorphism/bundle-analyzer/_islands/stat.sx
@@ -0,0 +1,4 @@
+(defcomp (&key (label :as string) (value :as string) (cls :as string))
+  (div (~tw :tokens "rounded-lg border border-stone-200 p-4 text-center")
+    (div :class (str "text-3xl font-bold " cls) value)
+    (div (~tw :tokens "text-sm text-stone-500 mt-1") label)))
diff --git a/sx/sx/geography/isomorphism/bundle-analyzer/index.sx b/sx/sx/geography/isomorphism/bundle-analyzer/index.sx
new file mode 100644
index 00000000..b49092a6
--- /dev/null
+++ b/sx/sx/geography/isomorphism/bundle-analyzer/index.sx
@@ -0,0 +1,55 @@
+;; Bundle analyzer — live demonstration of dependency analysis + IO detection.
+;; Shows per-page component bundles vs total, visualizing payload savings.
+;; Drill down into each bundle to see component tree; expand to see SX source.
+;; @css bg-green-100 text-green-800 bg-violet-600 bg-stone-200 text-violet-600 text-stone-600 text-green-600 rounded-full h-2.5 grid-cols-3 bg-blue-100 text-blue-800 bg-amber-100 text-amber-800 grid-cols-4 marker:text-stone-400 bg-blue-50 bg-amber-50 text-blue-700 text-amber-700 border-blue-200 border-amber-200 bg-blue-500 bg-amber-500
+(defcomp (&key (pages :as list) (total-components :as number) (total-macros :as number)
+                                        (pure-count :as number) (io-count :as number))
+  (~docs/page :title "Page Bundle Analyzer"
+
+    (p (~tw :tokens "text-stone-600 mb-6")
+      "Live analysis of component dependency graphs and IO classification across all pages. "
+      "Each bar shows how many of the "
+      (strong (str total-components))
+      " total components a page actually needs, computed by the "
+      (a :href "/sx/(language.(spec.deps))" (~tw :tokens "text-violet-700 underline") "deps.sx")
+      " transitive closure algorithm. "
+      "Click a page to see its component tree; expand a component to see its SX source.")
+
+    (div (~tw :tokens "mb-8 grid grid-cols-4 gap-4")
+      (~analyzer/stat :label "Total Components" :value (str total-components)
+                      :cls "text-violet-600")
+      (~analyzer/stat :label "Total Macros" :value (str total-macros)
+                      :cls "text-stone-600")
+      (~analyzer/stat :label "Pure Components" :value (str pure-count)
+                      :cls "text-blue-600")
+      (~analyzer/stat :label "IO-Dependent" :value (str io-count)
+                      :cls "text-amber-600"))
+
+    (~docs/section :title "Per-Page Bundles" :id "bundles"
+      (div (~tw :tokens "space-y-3")
+        (map (fn (page)
+          (~analyzer/row
+            :name (get page "name")
+            :path (get page "path")
+            :needed (get page "needed")
+            :direct (get page "direct")
+            :total total-components
+            :pct (get page "pct")
+            :savings (get page "savings")
+            :io-refs (get page "io-refs")
+            :pure-in-page (get page "pure-in-page")
+            :io-in-page (get page "io-in-page")
+            :components (get page "components")))
+          pages)))
+
+    (~docs/section :title "How It Works" :id "how"
+      (ol (~tw :tokens "list-decimal pl-5 space-y-2 text-stone-700")
+        (li (strong "Scan: ") "Regex finds all " (code "(~plans/content-addressed-components/name") " patterns in the page's content expression.")
+        (li (strong "Resolve: ") "Each referenced component's body AST is walked to find transitive " (code "~") " references.")
+        (li (strong "Closure: ") "The full set is the union of direct + transitive deps, following chains through the component graph.")
+        (li (strong "Bundle: ") "Only these component definitions are serialized into the page payload. Everything else is omitted.")
+        (li (strong "IO detect: ") "Each component body is scanned for references to IO primitives (frag, query, service, etc.). Components with zero transitive IO refs are pure — safe for client rendering."))
+      (p (~tw :tokens "mt-4 text-stone-600")
+        "The analysis handles circular references (via seen-set), "
+        "walks all branches of control flow (if/when/cond/case), "
+        "and includes macro definitions shared across components."))))
diff --git a/sx/sx/offline-demo.sx b/sx/sx/geography/isomorphism/offline/index.sx
similarity index 98%
rename from sx/sx/offline-demo.sx
rename to sx/sx/geography/isomorphism/offline/index.sx
index 9f86518c..aa05477d 100644
--- a/sx/sx/offline-demo.sx
+++ b/sx/sx/geography/isomorphism/offline/index.sx
@@ -8,7 +8,7 @@
 ;;   "sx:offline syncing" — reconnected, replaying queued mutations
 ;;   "sx:offline synced"  — individual mutation confirmed by server
 
-(defcomp ~offline-demo/content (&key notes server-time)
+(defcomp (&key notes server-time)
   (div (~tw :tokens "space-y-8")
     (div (~tw :tokens "border-b border-stone-200 pb-6")
       (h1 (~tw :tokens "text-2xl font-bold text-stone-900") "Offline Data Layer")
diff --git a/sx/sx/optimistic-demo.sx b/sx/sx/geography/isomorphism/optimistic/index.sx
similarity index 99%
rename from sx/sx/optimistic-demo.sx
rename to sx/sx/geography/isomorphism/optimistic/index.sx
index ab3acbc4..20776e87 100644
--- a/sx/sx/optimistic-demo.sx
+++ b/sx/sx/geography/isomorphism/optimistic/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~optimistic-demo/content
   (&key items server-time)
   (div
     (~tw :tokens "space-y-8")
diff --git a/sx/sx/geography/isomorphism/routing-analyzer/_islands/routing-row.sx b/sx/sx/geography/isomorphism/routing-analyzer/_islands/routing-row.sx
new file mode 100644
index 00000000..112fce8c
--- /dev/null
+++ b/sx/sx/geography/isomorphism/routing-analyzer/_islands/routing-row.sx
@@ -0,0 +1,35 @@
+(defcomp
+  (&key
+    (name :as string)
+    (path :as string)
+    (mode :as string)
+    (has-data :as boolean)
+    (content-expr :as string?)
+    (reason :as string?))
+  (div
+    :class (str
+      "rounded border p-3 flex items-center gap-3 "
+      (if
+        (= mode "client")
+        "border-green-200 bg-green-50"
+        "border-amber-200 bg-amber-50"))
+    (span
+      :class (str
+        "inline-block px-2 py-0.5 rounded text-xs font-bold uppercase "
+        (if
+          (= mode "client")
+          "bg-green-600 text-white"
+          "bg-amber-500 text-white"))
+      mode)
+    (div
+      (~tw :tokens "flex-1 min-w-0")
+      (div
+        (~tw :tokens "flex items-center gap-2")
+        (span (~tw :tokens "font-mono font-semibold text-stone-800 text-sm") name)
+        (span (~tw :tokens "text-stone-400 text-xs font-mono") path))
+      (when reason (div (~tw :tokens "text-xs text-stone-500 mt-0.5") reason)))
+    (when
+      content-expr
+      (div
+        (~tw :tokens "hidden md:block max-w-xs truncate")
+        (code (~tw :tokens "text-xs text-stone-500") content-expr)))))
diff --git a/sx/sx/routing-analyzer.sx b/sx/sx/geography/isomorphism/routing-analyzer/index.sx
similarity index 81%
rename from sx/sx/routing-analyzer.sx
rename to sx/sx/geography/isomorphism/routing-analyzer/index.sx
index d38e7578..89132677 100644
--- a/sx/sx/routing-analyzer.sx
+++ b/sx/sx/geography/isomorphism/routing-analyzer/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~routing-analyzer/content
   (&key pages total-pages client-count server-count registry-sample)
   (~docs/page
     :title "Routing Analyzer"
@@ -136,40 +135,3 @@
           "If anything fails (no match, eval error, missing component), the click falls through to a standard server fetch. Console logs "
           (code "sx:route server /path")
           ". The user sees no difference.")))))
-
-(defcomp
-  ~routing-analyzer/routing-row
-  (&key
-    (name :as string)
-    (path :as string)
-    (mode :as string)
-    (has-data :as boolean)
-    (content-expr :as string?)
-    (reason :as string?))
-  (div
-    :class (str
-      "rounded border p-3 flex items-center gap-3 "
-      (if
-        (= mode "client")
-        "border-green-200 bg-green-50"
-        "border-amber-200 bg-amber-50"))
-    (span
-      :class (str
-        "inline-block px-2 py-0.5 rounded text-xs font-bold uppercase "
-        (if
-          (= mode "client")
-          "bg-green-600 text-white"
-          "bg-amber-500 text-white"))
-      mode)
-    (div
-      (~tw :tokens "flex-1 min-w-0")
-      (div
-        (~tw :tokens "flex items-center gap-2")
-        (span (~tw :tokens "font-mono font-semibold text-stone-800 text-sm") name)
-        (span (~tw :tokens "text-stone-400 text-xs font-mono") path))
-      (when reason (div (~tw :tokens "text-xs text-stone-500 mt-0.5") reason)))
-    (when
-      content-expr
-      (div
-        (~tw :tokens "hidden md:block max-w-xs truncate")
-        (code (~tw :tokens "text-xs text-stone-500") content-expr)))))
diff --git a/sx/sx/geography/marshes/_islands/demo-marsh-product.sx b/sx/sx/geography/marshes/_islands/demo-marsh-product.sx
new file mode 100644
index 00000000..a548f978
--- /dev/null
+++ b/sx/sx/geography/marshes/_islands/demo-marsh-product.sx
@@ -0,0 +1,65 @@
+(defisland
+  ()
+  (let
+    ((price (def-store "demo-price" (fn () (signal 19.99))))
+      (qty (signal 1))
+      (total (computed (fn () (* (deref price) (deref qty)))))
+      (savings
+        (computed (fn () (- (* 19.99 (deref qty)) (deref total)))))
+      (on-sale? (computed (fn () (< (deref price) 19.99)))))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-4")
+      (div
+        (~tw :tokens "flex items-center justify-between")
+        (div
+          (h4 (~tw :tokens "font-semibold text-stone-800") "Artisan Widget")
+          (p (~tw :tokens "text-sm text-stone-500") "Hand-crafted by algorithms"))
+        (div
+          (~tw :tokens "text-right")
+          (div
+            (~tw :tokens "flex items-center gap-2")
+            (when
+              (deref on-sale?)
+              (span
+                (~tw :tokens "px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 text-xs font-bold uppercase")
+                "Sale"))
+            (span
+              (~tw :tokens "text-2xl font-bold text-stone-800")
+              "$"
+              (deref price)))))
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (span (~tw :tokens "text-sm text-stone-600") "Qty:")
+        (button
+          (~tw :tokens "w-7 h-7 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
+          :on-click (fn (e) (swap! qty (fn (q) (max 1 (- q 1)))))
+          "−")
+        (span
+          (~tw :tokens "font-mono text-lg font-bold text-violet-900 w-8 text-center")
+          (deref qty))
+        (button
+          (~tw :tokens "w-7 h-7 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
+          :on-click (fn (e) (swap! qty inc))
+          "+")
+        (span (~tw :tokens "ml-4 text-sm text-stone-600") "Total:")
+        (span (~tw :tokens "text-lg font-bold text-emerald-700") "$" (deref total))
+        (when
+          (> (deref savings) 0)
+          (span
+            (~tw :tokens "text-sm text-rose-600 font-medium ml-2")
+            "Save $"
+            (deref savings))))
+      (div
+        (~tw :tokens "border-t border-stone-200 pt-3")
+        (div
+          (~tw :tokens "flex items-center gap-3")
+          (button
+            (~tw :tokens "px-4 py-2 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+            :sx-get "/sx/(geography.(reactive.(api.flash-sale)))"
+            :sx-target "#marsh-server-msg"
+            :sx-swap "innerHTML"
+            "Fetch Price from Server")
+          (span
+            (~tw :tokens "text-xs text-stone-400")
+            "Hits a real endpoint. Response updates the signal."))
+        (div :id "marsh-server-msg" (~tw :tokens "mt-2 min-h-[2rem]"))))))
diff --git a/sx/sx/geography/marshes/_islands/demo-marsh-settle.sx b/sx/sx/geography/marshes/_islands/demo-marsh-settle.sx
new file mode 100644
index 00000000..54cce8a2
--- /dev/null
+++ b/sx/sx/geography/marshes/_islands/demo-marsh-settle.sx
@@ -0,0 +1,35 @@
+(defisland
+  ()
+  (let
+    ((count (def-store "settle-count" (fn () (signal 0)))))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
+      (div
+        (~tw :tokens "flex items-center justify-between")
+        (div
+          (h4 (~tw :tokens "font-semibold text-stone-800") "Settle Hook Demo")
+          (p
+            (~tw :tokens "text-sm text-stone-500")
+            "Server content + client-side counter"))
+        (div
+          (~tw :tokens "text-right")
+          (span (~tw :tokens "text-sm text-stone-600") "Fetched: ")
+          (span (~tw :tokens "text-2xl font-bold text-violet-700") (deref count))
+          (span (~tw :tokens "text-sm text-stone-600") " times")))
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (button
+          (~tw :tokens "px-4 py-2 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :sx-get "/sx/(geography.(reactive.(api.settle-data)))"
+          :sx-target "#settle-result"
+          :sx-swap "innerHTML"
+          :sx-on-settle "(swap! (use-store \"settle-count\") inc)"
+          "Fetch Item")
+        (button
+          (~tw :tokens "px-3 py-1.5 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
+          :on-click (fn (e) (reset! count 0))
+          "Reset Counter"))
+      (div
+        :id "settle-result"
+        (~tw :tokens "min-h-[2rem] rounded bg-stone-50 p-2")
+        (p (~tw :tokens "text-sm text-stone-400 italic") "Nothing fetched yet.")))))
diff --git a/sx/sx/geography/marshes/_islands/demo-marsh-signal-url.sx b/sx/sx/geography/marshes/_islands/demo-marsh-signal-url.sx
new file mode 100644
index 00000000..15a81248
--- /dev/null
+++ b/sx/sx/geography/marshes/_islands/demo-marsh-signal-url.sx
@@ -0,0 +1,84 @@
+(defisland
+  ()
+  (let
+    ((mode (signal "products")) (query (signal "")))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
+      (h4 (~tw :tokens "font-semibold text-stone-800") "Signal-Bound URL Demo")
+      (div
+        (~tw :tokens "flex gap-2")
+        (button
+          :class (computed
+            (fn
+              ()
+              (str
+                "px-3 py-1.5 rounded text-sm font-medium "
+                (if
+                  (= (deref mode) "products")
+                  "bg-violet-600 text-white"
+                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
+          :on-click (fn (e) (reset! mode "products"))
+          "Products")
+        (button
+          :class (computed
+            (fn
+              ()
+              (str
+                "px-3 py-1.5 rounded text-sm font-medium "
+                (if
+                  (= (deref mode) "events")
+                  "bg-emerald-600 text-white"
+                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
+          :on-click (fn (e) (reset! mode "events"))
+          "Events")
+        (button
+          :class (computed
+            (fn
+              ()
+              (str
+                "px-3 py-1.5 rounded text-sm font-medium "
+                (if
+                  (= (deref mode) "posts")
+                  "bg-amber-600 text-white"
+                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
+          :on-click (fn (e) (reset! mode "posts"))
+          "Posts"))
+      (div
+        (~tw :tokens "flex gap-2")
+        (input
+          :type "text"
+          :bind query
+          :placeholder "Search..."
+          (~tw :tokens "flex-1 px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400"))
+        (button
+          (~tw :tokens "px-4 py-1.5 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :sx-get (computed
+            (fn
+              ()
+              (str
+                "/sx/(geography.(reactive.(api.search-"
+                (deref mode)
+                ")))"
+                "?q="
+                (deref query))))
+          :sx-target "#signal-results"
+          :sx-swap "innerHTML"
+          "Search"))
+      (p
+        (~tw :tokens "text-xs text-stone-400 font-mono")
+        "URL: "
+        (computed
+          (fn
+            ()
+            (str
+              "/sx/(geography.(reactive.(api.search-"
+              (deref mode)
+              ")))"
+              "?q="
+              (deref query)))))
+      (div
+        :id "signal-results"
+        (~tw :tokens "min-h-[3rem] rounded bg-stone-50 p-2")
+        (p
+          (~tw :tokens "text-sm text-stone-400 italic")
+          "Select a category and search.")))))
diff --git a/sx/sx/geography/marshes/_islands/demo-marsh-store-reader.sx b/sx/sx/geography/marshes/_islands/demo-marsh-store-reader.sx
new file mode 100644
index 00000000..e23ea5ef
--- /dev/null
+++ b/sx/sx/geography/marshes/_islands/demo-marsh-store-reader.sx
@@ -0,0 +1,23 @@
+(defisland
+  ()
+  (let
+    ((price (def-store "demo-price" (fn () (signal 19.99)))))
+    (div
+      (~tw :tokens "rounded-lg border border-emerald-200 bg-emerald-50 p-4")
+      (div
+        (~tw :tokens "flex items-center justify-between")
+        (div
+          (~tw :tokens "flex items-center gap-2")
+          (span
+            (~tw :tokens "text-sm font-semibold text-emerald-800")
+            "Island B: Product Display")
+          (span
+            (~tw :tokens "text-xs bg-emerald-200 text-emerald-700 px-1.5 py-0.5 rounded font-mono")
+            "use-store"))
+        (div
+          (~tw :tokens "flex items-center gap-2")
+          (span (~tw :tokens "text-stone-600") "Current price:")
+          (span (~tw :tokens "text-2xl font-bold text-stone-800") "$" (deref price))))
+      (p
+        (~tw :tokens "text-xs text-emerald-600 mt-2")
+        "Separate island, reads the same store. Signal changes propagate instantly across island boundaries."))))
diff --git a/sx/sx/geography/marshes/_islands/demo-marsh-store-writer.sx b/sx/sx/geography/marshes/_islands/demo-marsh-store-writer.sx
new file mode 100644
index 00000000..52ae851c
--- /dev/null
+++ b/sx/sx/geography/marshes/_islands/demo-marsh-store-writer.sx
@@ -0,0 +1,42 @@
+(defisland
+  ()
+  (let
+    ((price (def-store "demo-price" (fn () (signal 19.99)))))
+    (div
+      (~tw :tokens "rounded-lg border border-amber-200 bg-amber-50 p-4")
+      (div
+        (~tw :tokens "flex items-center justify-between mb-3")
+        (div
+          (~tw :tokens "flex items-center gap-2")
+          (span
+            (~tw :tokens "text-sm font-semibold text-amber-800")
+            "Island A: Price Control")
+          (span
+            (~tw :tokens "text-xs bg-amber-200 text-amber-700 px-1.5 py-0.5 rounded font-mono")
+            "def-store"))
+        (span (~tw :tokens "text-2xl font-bold text-stone-800") "$" (deref price)))
+      (div
+        (~tw :tokens "flex flex-wrap gap-2")
+        (button
+          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
+          :on-click (fn (e) (reset! price 14.99))
+          "⚡$14.99")
+        (button
+          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
+          :on-click (fn (e) (reset! price 9.99))
+          "⚡$9.99")
+        (button
+          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
+          :on-click (fn (e) (reset! price 29.99))
+          "⚡$29.99")
+        (button
+          (~tw :tokens "px-3 py-1.5 rounded bg-stone-300 text-stone-700 text-sm font-medium hover:bg-stone-400")
+          :on-click (fn (e) (reset! price 19.99))
+          "Reset $19.99"))
+      (p
+        (~tw :tokens "text-xs text-amber-600 mt-2")
+        "Each button calls "
+        (code "(reset! price ...)")
+        " — simulating "
+        (code "data-sx-signal")
+        " during morph."))))
diff --git a/sx/sx/geography/marshes/_islands/demo-marsh-view-transform.sx b/sx/sx/geography/marshes/_islands/demo-marsh-view-transform.sx
new file mode 100644
index 00000000..04c747c6
--- /dev/null
+++ b/sx/sx/geography/marshes/_islands/demo-marsh-view-transform.sx
@@ -0,0 +1,108 @@
+(defisland
+  ()
+  (let
+    ((view (signal "list"))
+      (items (def-store "catalog-items" (fn () (signal (list))))))
+    (div
+      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
+      (h4 (~tw :tokens "font-semibold text-stone-800") "Reactive View Transform")
+      (div
+        (~tw :tokens "flex gap-2")
+        (button
+          :class (computed
+            (fn
+              ()
+              (str
+                "px-3 py-1.5 rounded text-sm font-medium "
+                (if
+                  (= (deref view) "list")
+                  "bg-violet-600 text-white"
+                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
+          :on-click (fn (e) (reset! view "list"))
+          "List")
+        (button
+          :class (computed
+            (fn
+              ()
+              (str
+                "px-3 py-1.5 rounded text-sm font-medium "
+                (if
+                  (= (deref view) "grid")
+                  "bg-violet-600 text-white"
+                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
+          :on-click (fn (e) (reset! view "grid"))
+          "Grid")
+        (button
+          :class (computed
+            (fn
+              ()
+              (str
+                "px-3 py-1.5 rounded text-sm font-medium "
+                (if
+                  (= (deref view) "compact")
+                  "bg-violet-600 text-white"
+                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
+          :on-click (fn (e) (reset! view "compact"))
+          "Compact"))
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (button
+          (~tw :tokens "px-4 py-2 rounded bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700")
+          :sx-get "/sx/(geography.(reactive.(api.catalog)))"
+          :sx-target "#catalog-msg"
+          :sx-swap "innerHTML"
+          "Fetch Catalog")
+        (span
+          (~tw :tokens "text-xs text-stone-400")
+          "Server sends data + writes to signal"))
+      (div :id "catalog-msg" (~tw :tokens "min-h-[1.5rem]"))
+      (div
+        (~tw :tokens "min-h-[4rem]")
+        (when
+          (> (len (deref items)) 0)
+          (cond
+            (= (deref view) "list")
+            (div
+              (~tw :tokens "space-y-2")
+              (map
+                (fn
+                  (item)
+                  (div
+                    (~tw :tokens "flex items-center justify-between p-2 rounded bg-stone-50 border border-stone-100")
+                    (div
+                      (span
+                        (~tw :tokens "text-sm font-medium text-stone-800")
+                        (get item "name"))
+                      (span
+                        (~tw :tokens "text-xs text-stone-500 block")
+                        (get item "desc")))
+                    (span
+                      (~tw :tokens "text-sm font-bold text-emerald-700")
+                      "$"
+                      (get item "price"))))
+                (deref items)))
+            (= (deref view) "grid")
+            (div
+              (~tw :tokens "grid grid-cols-2 gap-2")
+              (map
+                (fn
+                  (item)
+                  (div
+                    (~tw :tokens "p-3 rounded bg-violet-50 border border-violet-200 text-center")
+                    (p
+                      (~tw :tokens "text-sm font-semibold text-stone-800")
+                      (get item "name"))
+                    (p
+                      (~tw :tokens "text-lg font-bold text-emerald-700")
+                      "$"
+                      (get item "price"))))
+                (deref items)))
+            :else (div
+              (~tw :tokens "flex flex-wrap gap-1")
+              (map
+                (fn
+                  (item)
+                  (span
+                    (~tw :tokens "px-2 py-0.5 rounded bg-stone-100 text-xs text-stone-700")
+                    (get item "name")))
+                (deref items)))))))))
diff --git a/sx/sx/geography/marshes/hypermedia-feeds/index.sx b/sx/sx/geography/marshes/hypermedia-feeds/index.sx
new file mode 100644
index 00000000..6fb08172
--- /dev/null
+++ b/sx/sx/geography/marshes/hypermedia-feeds/index.sx
@@ -0,0 +1,29 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Hypermedia Feeds Reactive State"
+    (p
+      "Click \"Fetch Price\" to hit a real server endpoint. The response is "
+      (em "hypermedia")
+      " — SX content swapped into the page. But a "
+      (code "data-init")
+      " script in the response also writes to the "
+      (code "\"demo-price\"")
+      " store signal. The island's reactive UI — total, savings, price display — updates instantly from the signal change.")
+    (p
+      "This is the marsh pattern: "
+      (strong "the server response is both content and a signal write")
+      ". Hypermedia and reactivity aren't separate — the same response does both.")
+    (~reactive-islands/marshes/demo-marsh-product)
+    (~docs/code
+      :src (highlight
+        ";; Island with a store-backed price signal\n(defisland ~reactive-islands/marshes/demo-marsh-product ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99))))\n        (qty (signal 1))\n        (total (computed (fn () (* (deref price) (deref qty))))))\n    (div\n      ;; Reactive price display — updates when store changes\n      (span \"$\" (deref price))\n      (span \"Qty:\") (button \"-\") (span (deref qty)) (button \"+\")\n      (span \"Total: $\" (deref total))\n\n      ;; Fetch from server — response arrives as hypermedia\n      (button :sx-get \"/sx/(geography.(reactive.(api.flash-sale)))\"\n              :sx-target \"#marsh-server-msg\"\n              :sx-swap \"innerHTML\"\n        \"Fetch Price\")\n      ;; Server response lands here:\n      (div :id \"marsh-server-msg\"))))"
+        "lisp"))
+    (~docs/code
+      :src (highlight
+        ";; Server returns SX content + a data-init script:\n;;\n;; (<>\n;;   (p \"Flash sale! Price: $14.99\")\n;;   (script :type \"text/sx\" :data-init\n;;     \"(reset! (use-store \\\"demo-price\\\") 14.99)\"))\n;;\n;; The <p> is swapped in as normal hypermedia content.\n;; The script writes to the store signal.\n;; The island's (deref price), total, and savings\n;; all update reactively — no re-render, no diffing."
+        "lisp"))
+    (p
+      "Two things happen from one server response: content appears in the swap target (hypermedia) and the price signal updates (reactivity). The island didn't fetch the price. The server didn't call a signal API. The response "
+      (em "is")
+      " both.")))
diff --git a/sx/sx/reactive-islands/marshes.sx b/sx/sx/geography/marshes/index.sx
similarity index 59%
rename from sx/sx/reactive-islands/marshes.sx
rename to sx/sx/geography/marshes/index.sx
index 18800853..93d561ee 100644
--- a/sx/sx/reactive-islands/marshes.sx
+++ b/sx/sx/geography/marshes/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~reactive-islands/marshes/reactive-islands-marshes-content
   ()
   (~docs/page
     :title "Marshes"
@@ -570,527 +569,3 @@
                 (~tw :tokens "text-violet-600 hover:underline")
                 (get item "label"))))
           marshes-examples-nav-items)))))
-
-(defcomp
-  ~reactive-islands/marshes/example-hypermedia-feeds
-  ()
-  (~docs/page
-    :title "Hypermedia Feeds Reactive State"
-    (p
-      "Click \"Fetch Price\" to hit a real server endpoint. The response is "
-      (em "hypermedia")
-      " — SX content swapped into the page. But a "
-      (code "data-init")
-      " script in the response also writes to the "
-      (code "\"demo-price\"")
-      " store signal. The island's reactive UI — total, savings, price display — updates instantly from the signal change.")
-    (p
-      "This is the marsh pattern: "
-      (strong "the server response is both content and a signal write")
-      ". Hypermedia and reactivity aren't separate — the same response does both.")
-    (~reactive-islands/marshes/demo-marsh-product)
-    (~docs/code
-      :src (highlight
-        ";; Island with a store-backed price signal\n(defisland ~reactive-islands/marshes/demo-marsh-product ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99))))\n        (qty (signal 1))\n        (total (computed (fn () (* (deref price) (deref qty))))))\n    (div\n      ;; Reactive price display — updates when store changes\n      (span \"$\" (deref price))\n      (span \"Qty:\") (button \"-\") (span (deref qty)) (button \"+\")\n      (span \"Total: $\" (deref total))\n\n      ;; Fetch from server — response arrives as hypermedia\n      (button :sx-get \"/sx/(geography.(reactive.(api.flash-sale)))\"\n              :sx-target \"#marsh-server-msg\"\n              :sx-swap \"innerHTML\"\n        \"Fetch Price\")\n      ;; Server response lands here:\n      (div :id \"marsh-server-msg\"))))"
-        "lisp"))
-    (~docs/code
-      :src (highlight
-        ";; Server returns SX content + a data-init script:\n;;\n;; (<>\n;;   (p \"Flash sale! Price: $14.99\")\n;;   (script :type \"text/sx\" :data-init\n;;     \"(reset! (use-store \\\"demo-price\\\") 14.99)\"))\n;;\n;; The <p> is swapped in as normal hypermedia content.\n;; The script writes to the store signal.\n;; The island's (deref price), total, and savings\n;; all update reactively — no re-render, no diffing."
-        "lisp"))
-    (p
-      "Two things happen from one server response: content appears in the swap target (hypermedia) and the price signal updates (reactivity). The island didn't fetch the price. The server didn't call a signal API. The response "
-      (em "is")
-      " both.")))
-
-(defcomp
-  ~reactive-islands/marshes/example-server-signals
-  ()
-  (~docs/page
-    :title "Server Writes to Signals"
-    (p
-      "Two separate islands share a named store "
-      (code "\"demo-price\"")
-      ". Island A creates the store and has control buttons. Island B reads it. Signal changes propagate instantly across island boundaries.")
-    (div
-      (~tw :tokens "space-y-3")
-      (~reactive-islands/marshes/demo-marsh-store-writer)
-      (~reactive-islands/marshes/demo-marsh-store-reader))
-    (p
-      (~tw :tokens "mt-3 text-sm text-stone-500")
-      "The \"Flash Sale\" buttons call "
-      (code "(reset! price 14.99)")
-      " — exactly what "
-      (code "data-sx-signal=\"demo-price:14.99\"")
-      " does during morph.")
-    (div
-      (~tw :tokens "mt-4 rounded border border-stone-200 bg-stone-50 p-3")
-      (p
-        (~tw :tokens "text-sm font-medium text-stone-700 mb-2")
-        "Server endpoint (ready for morph integration):")
-      (div :id "marsh-flash-target" (~tw :tokens "min-h-[2rem]"))
-      (button
-        (~tw :tokens "mt-2 px-3 py-1.5 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-        :sx-get "/sx/(geography.(reactive.(api.flash-sale)))"
-        :sx-target "#marsh-flash-target"
-        :sx-swap "innerHTML"
-        "Fetch from server"))
-    (~docs/code
-      :src (highlight
-        ";; Island A — creates the store, has control buttons\n(defisland ~reactive-islands/marshes/demo-marsh-store-writer ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99)))))\n    ;; (reset! price 14.99) is what data-sx-signal does during morph\n    (button :on-click (fn (e) (reset! price 14.99))\n      \"Flash Sale $14.99\")))\n\n;; Island B — reads the same store, different island\n(defisland ~reactive-islands/marshes/demo-marsh-store-reader ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99)))))\n    (span \"$\" (deref price))))\n\n;; Server returns: data-sx-signal writes to the store during morph\n;; (div :data-sx-signal \"demo-price:14.99\"\n;;   (p \"Flash sale! Price updated.\"))"
-        "lisp"))
-    (p
-      "In production, the server response includes "
-      (code "data-sx-signal=\"demo-price:14.99\"")
-      ". The morph algorithm processes this attribute, calls "
-      (code "(reset! (use-store \"demo-price\") 14.99)")
-      ", and removes the attribute from the DOM. Every island reading that store updates instantly — fine-grained, no re-render.")))
-
-(defcomp
-  ~reactive-islands/marshes/example-on-settle
-  ()
-  (~docs/page
-    :title "sx-on-settle"
-    (p
-      "After a swap settles, the trigger element's "
-      (code "sx-on-settle")
-      " attribute is parsed and evaluated as SX. This runs "
-      (em "after")
-      " the content is in the DOM — so you can update reactive state based on what the server returned.")
-    (p
-      "Click \"Fetch Item\" to load server content. The response is pure hypermedia. But "
-      (code "sx-on-settle")
-      " on the button increments a fetch counter signal "
-      (em "after")
-      " the swap. The counter updates reactively.")
-    (~reactive-islands/marshes/demo-marsh-settle)
-    (~docs/code
-      :src (highlight
-        ";; sx-on-settle runs SX after the swap settles\n(defisland ~reactive-islands/marshes/demo-marsh-settle ()\n  (let ((count (def-store \"settle-count\" (fn () (signal 0)))))\n    (div\n      ;; Reactive counter — updates from sx-on-settle\n      (span \"Fetched: \" (deref count) \" times\")\n\n      ;; Button with sx-on-settle hook\n      (button :sx-get \"/sx/(geography.(reactive.(api.settle-data)))\"\n              :sx-target \"#settle-result\"\n              :sx-swap \"innerHTML\"\n              :sx-on-settle \"(swap! (use-store \\\"settle-count\\\") inc)\"\n        \"Fetch Item\")\n\n      ;; Server content lands here (pure hypermedia)\n      (div :id \"settle-result\"))))"
-        "lisp"))
-    (p
-      "The server knows nothing about signals or counters. It returns plain content. The "
-      (code "sx-on-settle")
-      " hook is a client-side concern — it runs in the global SX environment with access to all primitives.")))
-
-(defcomp
-  ~reactive-islands/marshes/example-signal-triggers
-  ()
-  (~docs/page
-    :title "Signal-Bound Triggers"
-    (p
-      "Inside an island, "
-      (em "all")
-      " attributes are reactive — including "
-      (code "sx-get")
-      ". When an attribute value contains "
-      (code "deref")
-      ", the DOM adapter wraps it in an effect that re-sets the attribute when signals change.")
-    (p
-      "Select a search category. The "
-      (code "sx-get")
-      " URL on the search button changes reactively. Click \"Search\" to fetch from the current endpoint. The URL was computed from the "
-      (code "mode")
-      " signal at render time and updates whenever the mode changes.")
-    (~reactive-islands/marshes/demo-marsh-signal-url)
-    (~docs/code
-      :src (highlight
-        ";; sx-get URL computed from a signal\n(defisland ~reactive-islands/marshes/demo-marsh-signal-url ()\n  (let ((mode (signal \"products\"))\n        (query (signal \"\")))\n    (div\n      ;; Mode selector — changes what we're searching\n      (div :class \"flex gap-2\"\n        (button :on-click (fn (e) (reset! mode \"products\"))\n          :class (computed (fn () ...active-class...))\n          \"Products\")\n        (button :on-click (fn (e) (reset! mode \"events\")) \"Events\")\n        (button :on-click (fn (e) (reset! mode \"posts\")) \"Posts\"))\n\n      ;; Search button — URL is a computed expression\n      (button :sx-get (computed (fn ()\n                (str \"/sx/(geography.(reactive.(api.search-\"\n                     (deref mode) \")))\" \"?q=\" (deref query))))\n              :sx-target \"#signal-results\"\n              :sx-swap \"innerHTML\"\n        \"Search\")\n\n      (div :id \"signal-results\"))))"
-        "lisp"))
-    (p
-      "No custom plumbing. The same "
-      (code "reactive-attr")
-      " mechanism that makes "
-      (code ":class")
-      " reactive also makes "
-      (code ":sx-get")
-      " reactive. "
-      (code "get-verb-info")
-      " reads "
-      (code "dom-get-attr")
-      " at trigger time — it sees the current URL because the effect already updated the DOM attribute.")))
-
-(defcomp
-  ~reactive-islands/marshes/example-view-transform
-  ()
-  (~docs/page
-    :title "Reactive View Transform"
-    (p
-      "A view-mode signal controls how items are displayed. Click \"Fetch Catalog\" to load items from the server, then toggle the view mode. The "
-      (em "same")
-      " data re-renders differently based on client state — no server round-trip for view changes.")
-    (~reactive-islands/marshes/demo-marsh-view-transform)
-    (~docs/code
-      :src (highlight
-        ";; View mode transforms display without refetch\n(defisland ~reactive-islands/marshes/demo-marsh-view-transform ()\n  (let ((view (signal \"list\"))\n        (items (signal nil)))\n    (div\n      ;; View toggle\n      (div :class \"flex gap-2\"\n        (button :on-click (fn (e) (reset! view \"list\")) \"List\")\n        (button :on-click (fn (e) (reset! view \"grid\")) \"Grid\")\n        (button :on-click (fn (e) (reset! view \"compact\")) \"Compact\"))\n\n      ;; Fetch from server — stores raw data in signal\n      (button :sx-get \"/sx/(geography.(reactive.(api.catalog)))\"\n              :sx-target \"#catalog-raw\"\n              :sx-swap \"innerHTML\"\n        \"Fetch Catalog\")\n\n      ;; Raw server content (hidden, used as data source)\n      (div :id \"catalog-raw\" :class \"hidden\")\n\n      ;; Reactive display — re-renders when view changes\n      (div (computed (fn () (render-view (deref view) (deref items))))))))"
-        "lisp"))
-    (p
-      "The view signal doesn't just toggle CSS classes — it fundamentally reshapes the DOM. List view shows description. Grid view arranges in columns. Compact view shows names only. All from the same server data, transformed by client state.")))
-
-(defisland
-  ~reactive-islands/marshes/demo-marsh-product
-  ()
-  (let
-    ((price (def-store "demo-price" (fn () (signal 19.99))))
-      (qty (signal 1))
-      (total (computed (fn () (* (deref price) (deref qty)))))
-      (savings
-        (computed (fn () (- (* 19.99 (deref qty)) (deref total)))))
-      (on-sale? (computed (fn () (< (deref price) 19.99)))))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-4")
-      (div
-        (~tw :tokens "flex items-center justify-between")
-        (div
-          (h4 (~tw :tokens "font-semibold text-stone-800") "Artisan Widget")
-          (p (~tw :tokens "text-sm text-stone-500") "Hand-crafted by algorithms"))
-        (div
-          (~tw :tokens "text-right")
-          (div
-            (~tw :tokens "flex items-center gap-2")
-            (when
-              (deref on-sale?)
-              (span
-                (~tw :tokens "px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 text-xs font-bold uppercase")
-                "Sale"))
-            (span
-              (~tw :tokens "text-2xl font-bold text-stone-800")
-              "$"
-              (deref price)))))
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (span (~tw :tokens "text-sm text-stone-600") "Qty:")
-        (button
-          (~tw :tokens "w-7 h-7 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
-          :on-click (fn (e) (swap! qty (fn (q) (max 1 (- q 1)))))
-          "−")
-        (span
-          (~tw :tokens "font-mono text-lg font-bold text-violet-900 w-8 text-center")
-          (deref qty))
-        (button
-          (~tw :tokens "w-7 h-7 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
-          :on-click (fn (e) (swap! qty inc))
-          "+")
-        (span (~tw :tokens "ml-4 text-sm text-stone-600") "Total:")
-        (span (~tw :tokens "text-lg font-bold text-emerald-700") "$" (deref total))
-        (when
-          (> (deref savings) 0)
-          (span
-            (~tw :tokens "text-sm text-rose-600 font-medium ml-2")
-            "Save $"
-            (deref savings))))
-      (div
-        (~tw :tokens "border-t border-stone-200 pt-3")
-        (div
-          (~tw :tokens "flex items-center gap-3")
-          (button
-            (~tw :tokens "px-4 py-2 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-            :sx-get "/sx/(geography.(reactive.(api.flash-sale)))"
-            :sx-target "#marsh-server-msg"
-            :sx-swap "innerHTML"
-            "Fetch Price from Server")
-          (span
-            (~tw :tokens "text-xs text-stone-400")
-            "Hits a real endpoint. Response updates the signal."))
-        (div :id "marsh-server-msg" (~tw :tokens "mt-2 min-h-[2rem]"))))))
-
-(defisland
-  ~reactive-islands/marshes/demo-marsh-store-writer
-  ()
-  (let
-    ((price (def-store "demo-price" (fn () (signal 19.99)))))
-    (div
-      (~tw :tokens "rounded-lg border border-amber-200 bg-amber-50 p-4")
-      (div
-        (~tw :tokens "flex items-center justify-between mb-3")
-        (div
-          (~tw :tokens "flex items-center gap-2")
-          (span
-            (~tw :tokens "text-sm font-semibold text-amber-800")
-            "Island A: Price Control")
-          (span
-            (~tw :tokens "text-xs bg-amber-200 text-amber-700 px-1.5 py-0.5 rounded font-mono")
-            "def-store"))
-        (span (~tw :tokens "text-2xl font-bold text-stone-800") "$" (deref price)))
-      (div
-        (~tw :tokens "flex flex-wrap gap-2")
-        (button
-          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
-          :on-click (fn (e) (reset! price 14.99))
-          "⚡$14.99")
-        (button
-          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
-          :on-click (fn (e) (reset! price 9.99))
-          "⚡$9.99")
-        (button
-          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
-          :on-click (fn (e) (reset! price 29.99))
-          "⚡$29.99")
-        (button
-          (~tw :tokens "px-3 py-1.5 rounded bg-stone-300 text-stone-700 text-sm font-medium hover:bg-stone-400")
-          :on-click (fn (e) (reset! price 19.99))
-          "Reset $19.99"))
-      (p
-        (~tw :tokens "text-xs text-amber-600 mt-2")
-        "Each button calls "
-        (code "(reset! price ...)")
-        " — simulating "
-        (code "data-sx-signal")
-        " during morph."))))
-
-(defisland
-  ~reactive-islands/marshes/demo-marsh-store-reader
-  ()
-  (let
-    ((price (def-store "demo-price" (fn () (signal 19.99)))))
-    (div
-      (~tw :tokens "rounded-lg border border-emerald-200 bg-emerald-50 p-4")
-      (div
-        (~tw :tokens "flex items-center justify-between")
-        (div
-          (~tw :tokens "flex items-center gap-2")
-          (span
-            (~tw :tokens "text-sm font-semibold text-emerald-800")
-            "Island B: Product Display")
-          (span
-            (~tw :tokens "text-xs bg-emerald-200 text-emerald-700 px-1.5 py-0.5 rounded font-mono")
-            "use-store"))
-        (div
-          (~tw :tokens "flex items-center gap-2")
-          (span (~tw :tokens "text-stone-600") "Current price:")
-          (span (~tw :tokens "text-2xl font-bold text-stone-800") "$" (deref price))))
-      (p
-        (~tw :tokens "text-xs text-emerald-600 mt-2")
-        "Separate island, reads the same store. Signal changes propagate instantly across island boundaries."))))
-
-(defisland
-  ~reactive-islands/marshes/demo-marsh-settle
-  ()
-  (let
-    ((count (def-store "settle-count" (fn () (signal 0)))))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
-      (div
-        (~tw :tokens "flex items-center justify-between")
-        (div
-          (h4 (~tw :tokens "font-semibold text-stone-800") "Settle Hook Demo")
-          (p
-            (~tw :tokens "text-sm text-stone-500")
-            "Server content + client-side counter"))
-        (div
-          (~tw :tokens "text-right")
-          (span (~tw :tokens "text-sm text-stone-600") "Fetched: ")
-          (span (~tw :tokens "text-2xl font-bold text-violet-700") (deref count))
-          (span (~tw :tokens "text-sm text-stone-600") " times")))
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (button
-          (~tw :tokens "px-4 py-2 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :sx-get "/sx/(geography.(reactive.(api.settle-data)))"
-          :sx-target "#settle-result"
-          :sx-swap "innerHTML"
-          :sx-on-settle "(swap! (use-store \"settle-count\") inc)"
-          "Fetch Item")
-        (button
-          (~tw :tokens "px-3 py-1.5 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
-          :on-click (fn (e) (reset! count 0))
-          "Reset Counter"))
-      (div
-        :id "settle-result"
-        (~tw :tokens "min-h-[2rem] rounded bg-stone-50 p-2")
-        (p (~tw :tokens "text-sm text-stone-400 italic") "Nothing fetched yet.")))))
-
-(defisland
-  ~reactive-islands/marshes/demo-marsh-signal-url
-  ()
-  (let
-    ((mode (signal "products")) (query (signal "")))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
-      (h4 (~tw :tokens "font-semibold text-stone-800") "Signal-Bound URL Demo")
-      (div
-        (~tw :tokens "flex gap-2")
-        (button
-          :class (computed
-            (fn
-              ()
-              (str
-                "px-3 py-1.5 rounded text-sm font-medium "
-                (if
-                  (= (deref mode) "products")
-                  "bg-violet-600 text-white"
-                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
-          :on-click (fn (e) (reset! mode "products"))
-          "Products")
-        (button
-          :class (computed
-            (fn
-              ()
-              (str
-                "px-3 py-1.5 rounded text-sm font-medium "
-                (if
-                  (= (deref mode) "events")
-                  "bg-emerald-600 text-white"
-                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
-          :on-click (fn (e) (reset! mode "events"))
-          "Events")
-        (button
-          :class (computed
-            (fn
-              ()
-              (str
-                "px-3 py-1.5 rounded text-sm font-medium "
-                (if
-                  (= (deref mode) "posts")
-                  "bg-amber-600 text-white"
-                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
-          :on-click (fn (e) (reset! mode "posts"))
-          "Posts"))
-      (div
-        (~tw :tokens "flex gap-2")
-        (input
-          :type "text"
-          :bind query
-          :placeholder "Search..."
-          (~tw :tokens "flex-1 px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400"))
-        (button
-          (~tw :tokens "px-4 py-1.5 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :sx-get (computed
-            (fn
-              ()
-              (str
-                "/sx/(geography.(reactive.(api.search-"
-                (deref mode)
-                ")))"
-                "?q="
-                (deref query))))
-          :sx-target "#signal-results"
-          :sx-swap "innerHTML"
-          "Search"))
-      (p
-        (~tw :tokens "text-xs text-stone-400 font-mono")
-        "URL: "
-        (computed
-          (fn
-            ()
-            (str
-              "/sx/(geography.(reactive.(api.search-"
-              (deref mode)
-              ")))"
-              "?q="
-              (deref query)))))
-      (div
-        :id "signal-results"
-        (~tw :tokens "min-h-[3rem] rounded bg-stone-50 p-2")
-        (p
-          (~tw :tokens "text-sm text-stone-400 italic")
-          "Select a category and search.")))))
-
-(defisland
-  ~reactive-islands/marshes/demo-marsh-view-transform
-  ()
-  (let
-    ((view (signal "list"))
-      (items (def-store "catalog-items" (fn () (signal (list))))))
-    (div
-      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
-      (h4 (~tw :tokens "font-semibold text-stone-800") "Reactive View Transform")
-      (div
-        (~tw :tokens "flex gap-2")
-        (button
-          :class (computed
-            (fn
-              ()
-              (str
-                "px-3 py-1.5 rounded text-sm font-medium "
-                (if
-                  (= (deref view) "list")
-                  "bg-violet-600 text-white"
-                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
-          :on-click (fn (e) (reset! view "list"))
-          "List")
-        (button
-          :class (computed
-            (fn
-              ()
-              (str
-                "px-3 py-1.5 rounded text-sm font-medium "
-                (if
-                  (= (deref view) "grid")
-                  "bg-violet-600 text-white"
-                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
-          :on-click (fn (e) (reset! view "grid"))
-          "Grid")
-        (button
-          :class (computed
-            (fn
-              ()
-              (str
-                "px-3 py-1.5 rounded text-sm font-medium "
-                (if
-                  (= (deref view) "compact")
-                  "bg-violet-600 text-white"
-                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
-          :on-click (fn (e) (reset! view "compact"))
-          "Compact"))
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (button
-          (~tw :tokens "px-4 py-2 rounded bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700")
-          :sx-get "/sx/(geography.(reactive.(api.catalog)))"
-          :sx-target "#catalog-msg"
-          :sx-swap "innerHTML"
-          "Fetch Catalog")
-        (span
-          (~tw :tokens "text-xs text-stone-400")
-          "Server sends data + writes to signal"))
-      (div :id "catalog-msg" (~tw :tokens "min-h-[1.5rem]"))
-      (div
-        (~tw :tokens "min-h-[4rem]")
-        (when
-          (> (len (deref items)) 0)
-          (cond
-            (= (deref view) "list")
-            (div
-              (~tw :tokens "space-y-2")
-              (map
-                (fn
-                  (item)
-                  (div
-                    (~tw :tokens "flex items-center justify-between p-2 rounded bg-stone-50 border border-stone-100")
-                    (div
-                      (span
-                        (~tw :tokens "text-sm font-medium text-stone-800")
-                        (get item "name"))
-                      (span
-                        (~tw :tokens "text-xs text-stone-500 block")
-                        (get item "desc")))
-                    (span
-                      (~tw :tokens "text-sm font-bold text-emerald-700")
-                      "$"
-                      (get item "price"))))
-                (deref items)))
-            (= (deref view) "grid")
-            (div
-              (~tw :tokens "grid grid-cols-2 gap-2")
-              (map
-                (fn
-                  (item)
-                  (div
-                    (~tw :tokens "p-3 rounded bg-violet-50 border border-violet-200 text-center")
-                    (p
-                      (~tw :tokens "text-sm font-semibold text-stone-800")
-                      (get item "name"))
-                    (p
-                      (~tw :tokens "text-lg font-bold text-emerald-700")
-                      "$"
-                      (get item "price"))))
-                (deref items)))
-            :else (div
-              (~tw :tokens "flex flex-wrap gap-1")
-              (map
-                (fn
-                  (item)
-                  (span
-                    (~tw :tokens "px-2 py-0.5 rounded bg-stone-100 text-xs text-stone-700")
-                    (get item "name")))
-                (deref items)))))))))
diff --git a/sx/sx/geography/marshes/on-settle/index.sx b/sx/sx/geography/marshes/on-settle/index.sx
new file mode 100644
index 00000000..4632fb18
--- /dev/null
+++ b/sx/sx/geography/marshes/on-settle/index.sx
@@ -0,0 +1,25 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "sx-on-settle"
+    (p
+      "After a swap settles, the trigger element's "
+      (code "sx-on-settle")
+      " attribute is parsed and evaluated as SX. This runs "
+      (em "after")
+      " the content is in the DOM — so you can update reactive state based on what the server returned.")
+    (p
+      "Click \"Fetch Item\" to load server content. The response is pure hypermedia. But "
+      (code "sx-on-settle")
+      " on the button increments a fetch counter signal "
+      (em "after")
+      " the swap. The counter updates reactively.")
+    (~reactive-islands/marshes/demo-marsh-settle)
+    (~docs/code
+      :src (highlight
+        ";; sx-on-settle runs SX after the swap settles\n(defisland ~reactive-islands/marshes/demo-marsh-settle ()\n  (let ((count (def-store \"settle-count\" (fn () (signal 0)))))\n    (div\n      ;; Reactive counter — updates from sx-on-settle\n      (span \"Fetched: \" (deref count) \" times\")\n\n      ;; Button with sx-on-settle hook\n      (button :sx-get \"/sx/(geography.(reactive.(api.settle-data)))\"\n              :sx-target \"#settle-result\"\n              :sx-swap \"innerHTML\"\n              :sx-on-settle \"(swap! (use-store \\\"settle-count\\\") inc)\"\n        \"Fetch Item\")\n\n      ;; Server content lands here (pure hypermedia)\n      (div :id \"settle-result\"))))"
+        "lisp"))
+    (p
+      "The server knows nothing about signals or counters. It returns plain content. The "
+      (code "sx-on-settle")
+      " hook is a client-side concern — it runs in the global SX environment with access to all primitives.")))
diff --git a/sx/sx/geography/marshes/server-signals/index.sx b/sx/sx/geography/marshes/server-signals/index.sx
new file mode 100644
index 00000000..9813f3a2
--- /dev/null
+++ b/sx/sx/geography/marshes/server-signals/index.sx
@@ -0,0 +1,41 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Server Writes to Signals"
+    (p
+      "Two separate islands share a named store "
+      (code "\"demo-price\"")
+      ". Island A creates the store and has control buttons. Island B reads it. Signal changes propagate instantly across island boundaries.")
+    (div
+      (~tw :tokens "space-y-3")
+      (~reactive-islands/marshes/demo-marsh-store-writer)
+      (~reactive-islands/marshes/demo-marsh-store-reader))
+    (p
+      (~tw :tokens "mt-3 text-sm text-stone-500")
+      "The \"Flash Sale\" buttons call "
+      (code "(reset! price 14.99)")
+      " — exactly what "
+      (code "data-sx-signal=\"demo-price:14.99\"")
+      " does during morph.")
+    (div
+      (~tw :tokens "mt-4 rounded border border-stone-200 bg-stone-50 p-3")
+      (p
+        (~tw :tokens "text-sm font-medium text-stone-700 mb-2")
+        "Server endpoint (ready for morph integration):")
+      (div :id "marsh-flash-target" (~tw :tokens "min-h-[2rem]"))
+      (button
+        (~tw :tokens "mt-2 px-3 py-1.5 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+        :sx-get "/sx/(geography.(reactive.(api.flash-sale)))"
+        :sx-target "#marsh-flash-target"
+        :sx-swap "innerHTML"
+        "Fetch from server"))
+    (~docs/code
+      :src (highlight
+        ";; Island A — creates the store, has control buttons\n(defisland ~reactive-islands/marshes/demo-marsh-store-writer ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99)))))\n    ;; (reset! price 14.99) is what data-sx-signal does during morph\n    (button :on-click (fn (e) (reset! price 14.99))\n      \"Flash Sale $14.99\")))\n\n;; Island B — reads the same store, different island\n(defisland ~reactive-islands/marshes/demo-marsh-store-reader ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99)))))\n    (span \"$\" (deref price))))\n\n;; Server returns: data-sx-signal writes to the store during morph\n;; (div :data-sx-signal \"demo-price:14.99\"\n;;   (p \"Flash sale! Price updated.\"))"
+        "lisp"))
+    (p
+      "In production, the server response includes "
+      (code "data-sx-signal=\"demo-price:14.99\"")
+      ". The morph algorithm processes this attribute, calls "
+      (code "(reset! (use-store \"demo-price\") 14.99)")
+      ", and removes the attribute from the DOM. Every island reading that store updates instantly — fine-grained, no re-render.")))
diff --git a/sx/sx/geography/marshes/signal-triggers/index.sx b/sx/sx/geography/marshes/signal-triggers/index.sx
new file mode 100644
index 00000000..2c2ae650
--- /dev/null
+++ b/sx/sx/geography/marshes/signal-triggers/index.sx
@@ -0,0 +1,35 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Signal-Bound Triggers"
+    (p
+      "Inside an island, "
+      (em "all")
+      " attributes are reactive — including "
+      (code "sx-get")
+      ". When an attribute value contains "
+      (code "deref")
+      ", the DOM adapter wraps it in an effect that re-sets the attribute when signals change.")
+    (p
+      "Select a search category. The "
+      (code "sx-get")
+      " URL on the search button changes reactively. Click \"Search\" to fetch from the current endpoint. The URL was computed from the "
+      (code "mode")
+      " signal at render time and updates whenever the mode changes.")
+    (~reactive-islands/marshes/demo-marsh-signal-url)
+    (~docs/code
+      :src (highlight
+        ";; sx-get URL computed from a signal\n(defisland ~reactive-islands/marshes/demo-marsh-signal-url ()\n  (let ((mode (signal \"products\"))\n        (query (signal \"\")))\n    (div\n      ;; Mode selector — changes what we're searching\n      (div :class \"flex gap-2\"\n        (button :on-click (fn (e) (reset! mode \"products\"))\n          :class (computed (fn () ...active-class...))\n          \"Products\")\n        (button :on-click (fn (e) (reset! mode \"events\")) \"Events\")\n        (button :on-click (fn (e) (reset! mode \"posts\")) \"Posts\"))\n\n      ;; Search button — URL is a computed expression\n      (button :sx-get (computed (fn ()\n                (str \"/sx/(geography.(reactive.(api.search-\"\n                     (deref mode) \")))\" \"?q=\" (deref query))))\n              :sx-target \"#signal-results\"\n              :sx-swap \"innerHTML\"\n        \"Search\")\n\n      (div :id \"signal-results\"))))"
+        "lisp"))
+    (p
+      "No custom plumbing. The same "
+      (code "reactive-attr")
+      " mechanism that makes "
+      (code ":class")
+      " reactive also makes "
+      (code ":sx-get")
+      " reactive. "
+      (code "get-verb-info")
+      " reads "
+      (code "dom-get-attr")
+      " at trigger time — it sees the current URL because the effect already updated the DOM attribute.")))
diff --git a/sx/sx/geography/marshes/view-transform/index.sx b/sx/sx/geography/marshes/view-transform/index.sx
new file mode 100644
index 00000000..72e5dabe
--- /dev/null
+++ b/sx/sx/geography/marshes/view-transform/index.sx
@@ -0,0 +1,15 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Reactive View Transform"
+    (p
+      "A view-mode signal controls how items are displayed. Click \"Fetch Catalog\" to load items from the server, then toggle the view mode. The "
+      (em "same")
+      " data re-renders differently based on client state — no server round-trip for view changes.")
+    (~reactive-islands/marshes/demo-marsh-view-transform)
+    (~docs/code
+      :src (highlight
+        ";; View mode transforms display without refetch\n(defisland ~reactive-islands/marshes/demo-marsh-view-transform ()\n  (let ((view (signal \"list\"))\n        (items (signal nil)))\n    (div\n      ;; View toggle\n      (div :class \"flex gap-2\"\n        (button :on-click (fn (e) (reset! view \"list\")) \"List\")\n        (button :on-click (fn (e) (reset! view \"grid\")) \"Grid\")\n        (button :on-click (fn (e) (reset! view \"compact\")) \"Compact\"))\n\n      ;; Fetch from server — stores raw data in signal\n      (button :sx-get \"/sx/(geography.(reactive.(api.catalog)))\"\n              :sx-target \"#catalog-raw\"\n              :sx-swap \"innerHTML\"\n        \"Fetch Catalog\")\n\n      ;; Raw server content (hidden, used as data source)\n      (div :id \"catalog-raw\" :class \"hidden\")\n\n      ;; Reactive display — re-renders when view changes\n      (div (computed (fn () (render-view (deref view) (deref items))))))))"
+        "lisp"))
+    (p
+      "The view signal doesn't just toggle CSS classes — it fundamentally reshapes the DOM. List view shows description. Grid view arranges in columns. Compact view shows names only. All from the same server data, transformed by client state.")))
diff --git a/sx/sx/geography/modules.sx b/sx/sx/geography/modules/index.sx
similarity index 98%
rename from sx/sx/geography/modules.sx
rename to sx/sx/geography/modules/index.sx
index 9a63e98d..41b242cb 100644
--- a/sx/sx/geography/modules.sx
+++ b/sx/sx/geography/modules/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~geography/modules-content ()
+(defcomp ()
   (~docs/page :title "Modules"
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Declaring what a file needs — for documentation, static analysis, and tooling.")
diff --git a/sx/sx/geography/provide/_islands/demo-emit-collect.sx b/sx/sx/geography/provide/_islands/demo-emit-collect.sx
new file mode 100644
index 00000000..08dcb6e4
--- /dev/null
+++ b/sx/sx/geography/provide/_islands/demo-emit-collect.sx
@@ -0,0 +1,12 @@
+(defcomp ()
+  (div (~tw :tokens "space-y-2")
+    (provide "scripts" nil
+      (div (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
+        (p (~tw :tokens "text-sm text-stone-700")
+          (emit! "scripts" "analytics.js")
+          (emit! "scripts" "charts.js")
+          "Page content renders here. Scripts emitted silently."))
+      (div (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
+        (p (~tw :tokens "text-sm text-violet-800 font-semibold") "Emitted scripts:")
+        (ul (~tw :tokens "text-xs text-stone-600 list-disc pl-5")
+          (map (fn (s) (li (code s))) (emitted "scripts")))))))
diff --git a/sx/sx/geography/provide/_islands/demo-nested-provide.sx b/sx/sx/geography/provide/_islands/demo-nested-provide.sx
new file mode 100644
index 00000000..cc438bf6
--- /dev/null
+++ b/sx/sx/geography/provide/_islands/demo-nested-provide.sx
@@ -0,0 +1,12 @@
+(defcomp ()
+  (div (~tw :tokens "space-y-2")
+    (provide "level" "outer"
+      (div (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
+        (p (~tw :tokens "text-sm text-stone-700")
+          (str "Level: " (context "level")))
+        (provide "level" "inner"
+          (div (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200 ml-4")
+            (p (~tw :tokens "text-sm text-violet-700")
+              (str "Level: " (context "level")))))
+        (p (~tw :tokens "text-sm text-stone-500 mt-1")
+          (str "Back to: " (context "level")))))))
diff --git a/sx/sx/geography/provide/_islands/demo-provide-basic.sx b/sx/sx/geography/provide/_islands/demo-provide-basic.sx
new file mode 100644
index 00000000..a5c07847
--- /dev/null
+++ b/sx/sx/geography/provide/_islands/demo-provide-basic.sx
@@ -0,0 +1,12 @@
+;; ---------------------------------------------------------------------------
+;; Provide / Context / Emit! — render-time dynamic scope
+;; ---------------------------------------------------------------------------
+;; ---- Demo components ----
+(defcomp ()
+  (div (~tw :tokens "space-y-2")
+    (provide "theme" {:primary "violet" :accent "rose"}
+      (div (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
+        (p (~tw :tokens "text-sm text-violet-800 font-semibold") "Inside provider: theme.primary = violet")
+        (p (~tw :tokens "text-xs text-stone-500") "Child reads context value without prop threading.")))
+    (div (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
+      (p (~tw :tokens "text-sm text-stone-600") "Outside provider: no theme context."))))
diff --git a/sx/sx/geography/provide/_islands/demo-spread-mechanism.sx b/sx/sx/geography/provide/_islands/demo-spread-mechanism.sx
new file mode 100644
index 00000000..c977c38f
--- /dev/null
+++ b/sx/sx/geography/provide/_islands/demo-spread-mechanism.sx
@@ -0,0 +1,9 @@
+(defcomp ()
+  (div (~tw :tokens "space-y-2")
+    (div (make-spread (~tw :tokens "rounded-lg p-3 bg-rose-50 border border-rose-200"))
+      (p (~tw :tokens "text-sm text-rose-800 font-semibold") "Spread child styled this div")
+      (p (~tw :tokens "text-xs text-stone-500") "The spread emitted into the element-attrs provider."))
+    (let ((card (make-spread (~tw :tokens "rounded-lg p-3 bg-amber-50 border border-amber-200"))))
+      (div card
+        (p (~tw :tokens "text-sm text-amber-800 font-semibold") "Stored spread, same mechanism")
+        (p (~tw :tokens "text-xs text-stone-500") "Bound to a let variable, applied when rendered as child.")))))
diff --git a/sx/sx/geography/provide/_islands/provide-demo-example.sx b/sx/sx/geography/provide/_islands/provide-demo-example.sx
new file mode 100644
index 00000000..cadc20bf
--- /dev/null
+++ b/sx/sx/geography/provide/_islands/provide-demo-example.sx
@@ -0,0 +1,7 @@
+;; ---- Layout helper (reuse from spreads article) ----
+(defcomp (&key demo code)
+  (div (~tw :tokens "grid grid-cols-1 lg:grid-cols-2 gap-4 my-6 items-start")
+    (div (~tw :tokens "border border-dashed border-stone-300 rounded-lg p-4 bg-stone-50 min-h-[80px]")
+      demo)
+    (div (~tw :tokens "not-prose bg-stone-100 rounded-lg p-4 overflow-x-auto")
+      (pre (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words") (code code)))))
diff --git a/sx/sx/provide.sx b/sx/sx/geography/provide/index.sx
similarity index 79%
rename from sx/sx/provide.sx
rename to sx/sx/geography/provide/index.sx
index 0ab75b79..bfbfc701 100644
--- a/sx/sx/provide.sx
+++ b/sx/sx/geography/provide/index.sx
@@ -1,69 +1,5 @@
-;; ---------------------------------------------------------------------------
-;; Provide / Context / Emit! — render-time dynamic scope
-;; ---------------------------------------------------------------------------
-
-
-;; ---- Demo components ----
-
-(defcomp ~geography/demo-provide-basic ()
-  (div (~tw :tokens "space-y-2")
-    (provide "theme" {:primary "violet" :accent "rose"}
-      (div (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
-        (p (~tw :tokens "text-sm text-violet-800 font-semibold") "Inside provider: theme.primary = violet")
-        (p (~tw :tokens "text-xs text-stone-500") "Child reads context value without prop threading.")))
-    (div (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
-      (p (~tw :tokens "text-sm text-stone-600") "Outside provider: no theme context."))))
-
-(defcomp ~geography/demo-emit-collect ()
-  (div (~tw :tokens "space-y-2")
-    (provide "scripts" nil
-      (div (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
-        (p (~tw :tokens "text-sm text-stone-700")
-          (emit! "scripts" "analytics.js")
-          (emit! "scripts" "charts.js")
-          "Page content renders here. Scripts emitted silently."))
-      (div (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
-        (p (~tw :tokens "text-sm text-violet-800 font-semibold") "Emitted scripts:")
-        (ul (~tw :tokens "text-xs text-stone-600 list-disc pl-5")
-          (map (fn (s) (li (code s))) (emitted "scripts")))))))
-
-(defcomp ~geography/demo-spread-mechanism ()
-  (div (~tw :tokens "space-y-2")
-    (div (make-spread (~tw :tokens "rounded-lg p-3 bg-rose-50 border border-rose-200"))
-      (p (~tw :tokens "text-sm text-rose-800 font-semibold") "Spread child styled this div")
-      (p (~tw :tokens "text-xs text-stone-500") "The spread emitted into the element-attrs provider."))
-    (let ((card (make-spread (~tw :tokens "rounded-lg p-3 bg-amber-50 border border-amber-200"))))
-      (div card
-        (p (~tw :tokens "text-sm text-amber-800 font-semibold") "Stored spread, same mechanism")
-        (p (~tw :tokens "text-xs text-stone-500") "Bound to a let variable, applied when rendered as child.")))))
-
-(defcomp ~geography/demo-nested-provide ()
-  (div (~tw :tokens "space-y-2")
-    (provide "level" "outer"
-      (div (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
-        (p (~tw :tokens "text-sm text-stone-700")
-          (str "Level: " (context "level")))
-        (provide "level" "inner"
-          (div (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200 ml-4")
-            (p (~tw :tokens "text-sm text-violet-700")
-              (str "Level: " (context "level")))))
-        (p (~tw :tokens "text-sm text-stone-500 mt-1")
-          (str "Back to: " (context "level")))))))
-
-
-;; ---- Layout helper (reuse from spreads article) ----
-
-(defcomp ~geography/provide-demo-example (&key demo code)
-  (div (~tw :tokens "grid grid-cols-1 lg:grid-cols-2 gap-4 my-6 items-start")
-    (div (~tw :tokens "border border-dashed border-stone-300 rounded-lg p-4 bg-stone-50 min-h-[80px]")
-      demo)
-    (div (~tw :tokens "not-prose bg-stone-100 rounded-lg p-4 overflow-x-auto")
-      (pre (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words") (code code)))))
-
-
 ;; ---- Page content ----
-
-(defcomp ~geography/provide-content ()
+(defcomp ()
   (~docs/page :title "Provide / Context / Emit!"
 
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
diff --git a/sx/sx/geography/reactive-runtime/_islands/demo-app-shell.sx b/sx/sx/geography/reactive-runtime/_islands/demo-app-shell.sx
new file mode 100644
index 00000000..928d14c7
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/_islands/demo-app-shell.sx
@@ -0,0 +1,53 @@
+;; ---------------------------------------------------------------------------
+;; L6: App Shell — client-side mini-app
+;; ---------------------------------------------------------------------------
+(defisland ()
+  (let ((route (signal "home"))
+        (count (signal 0)))
+    (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      ;; Client-side nav bar
+      (nav (~tw :tokens "flex gap-1 border-b border-stone-200 pb-2 mb-3")
+        (button :class (str "px-2 py-1 text-xs rounded "
+                  (if (= (deref route) "home")
+                    "bg-violet-600 text-white font-medium"
+                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
+          :on-click (fn (e) (reset! route "home"))
+          "Home")
+        (button :class (str "px-2 py-1 text-xs rounded "
+                  (if (= (deref route) "counter")
+                    "bg-violet-600 text-white font-medium"
+                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
+          :on-click (fn (e) (reset! route "counter"))
+          "Counter")
+        (button :class (str "px-2 py-1 text-xs rounded "
+                  (if (= (deref route) "about")
+                    "bg-violet-600 text-white font-medium"
+                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
+          :on-click (fn (e) (reset! route "about"))
+          "About"))
+      ;; Reactive view switching
+      (div (~tw :tokens "min-h-24")
+        (if (= (deref route) "home")
+            (div (~tw :tokens "p-3")
+              (h3 (~tw :tokens "font-bold text-stone-800 mb-1") "Home")
+              (p (~tw :tokens "text-sm text-stone-600")
+                "Client-side rendered. No server round-trip for navigation."))
+          (if (= (deref route) "counter")
+            (div (~tw :tokens "p-3")
+              (h3 (~tw :tokens "font-bold text-stone-800 mb-2") "Counter")
+              (div (~tw :tokens "flex items-center gap-3")
+                (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+                  :on-click (fn (e) (swap! count dec))
+                  "−")
+                (span (~tw :tokens "text-2xl font-bold text-violet-900 font-mono w-12 text-center")
+                  (deref count))
+                (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+                  :on-click (fn (e) (swap! count inc))
+                  "+"))
+              (p (~tw :tokens "text-xs text-stone-400 mt-2")
+                "State persists across view switches — signals live in closures."))
+            (div (~tw :tokens "p-3")
+              (h3 (~tw :tokens "font-bold text-stone-800 mb-1") "About")
+              (p (~tw :tokens "text-sm text-stone-600")
+                "This mini-app is entirely client-rendered. The server provides only "
+                "the component definition and mount point — zero HTML content."))))))))
diff --git a/sx/sx/geography/reactive-runtime/_islands/demo-commands.sx b/sx/sx/geography/reactive-runtime/_islands/demo-commands.sx
new file mode 100644
index 00000000..68c197b0
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/_islands/demo-commands.sx
@@ -0,0 +1,72 @@
+;; ---------------------------------------------------------------------------
+;; L3: Commands — counter with undo/redo
+;; ---------------------------------------------------------------------------
+(defisland ()
+  (let ((value (signal 0))
+        (history (signal (list)))
+        (future (signal (list)))
+        (undo-class (signal "bg-stone-200 text-stone-400 cursor-not-allowed"))
+        (redo-class (signal "bg-stone-200 text-stone-400 cursor-not-allowed")))
+    (let ((do-cmd (fn (new-val)
+            (let ((old-val (deref value))
+                  (old-hist (deref history)))
+              (do
+                (reset! history (cons old-val old-hist))
+                (reset! future (list))
+                (reset! value new-val)))))
+          (undo (fn ()
+            (let ((h (deref history)))
+              (when (> (len h) 0)
+                (let ((prev (first h))
+                      (old-val (deref value))
+                      (f (deref future)))
+                  (do
+                    (reset! future (cons old-val f))
+                    (reset! history (rest h))
+                    (reset! value prev)))))))
+          (redo (fn ()
+            (let ((f (deref future)))
+              (when (> (len f) 0)
+                (let ((next-val (first f))
+                      (old-val (deref value))
+                      (h (deref history)))
+                  (do
+                    (reset! history (cons old-val h))
+                    (reset! future (rest f))
+                    (reset! value next-val)))))))
+          (_e1 (effect (fn ()
+            (reset! undo-class
+              (if (> (len (deref history)) 0)
+                "bg-stone-600 text-white hover:bg-stone-700"
+                "bg-stone-200 text-stone-400 cursor-not-allowed")))))
+          (_e2 (effect (fn ()
+            (reset! redo-class
+              (if (> (len (deref future)) 0)
+                "bg-stone-600 text-white hover:bg-stone-700"
+                "bg-stone-200 text-stone-400 cursor-not-allowed"))))))
+      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+        (div (~tw :tokens "flex items-center gap-3 mb-3")
+          (span (~tw :tokens "text-3xl font-bold text-violet-900 font-mono w-20 text-center")
+            (deref value))
+          (div (~tw :tokens "flex gap-1")
+            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+              :on-click (fn (e) (do-cmd (+ (deref value) 1)))
+              "+1")
+            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+              :on-click (fn (e) (do-cmd (+ (deref value) 5)))
+              "+5")
+            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+              :on-click (fn (e) (do-cmd (* (deref value) 2)))
+              "×2")
+            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+              :on-click (fn (e) (do-cmd 0))
+              "0")))
+        (div (~tw :tokens "flex items-center gap-3")
+          (button :class (str "px-3 py-1 rounded text-sm font-medium " (deref undo-class))
+            :on-click (fn (e) (undo))
+            "Undo")
+          (button :class (str "px-3 py-1 rounded text-sm font-medium " (deref redo-class))
+            :on-click (fn (e) (redo))
+            "Redo")
+          (span (~tw :tokens "text-xs text-stone-400 font-mono")
+            "history: " (deref (computed (fn () (len (deref history)))))))))))
diff --git a/sx/sx/geography/reactive-runtime/_islands/demo-foreign.sx b/sx/sx/geography/reactive-runtime/_islands/demo-foreign.sx
new file mode 100644
index 00000000..64ab0c5c
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/_islands/demo-foreign.sx
@@ -0,0 +1,34 @@
+;; ---------------------------------------------------------------------------
+;; L1: Foreign — canvas drawing via host-call
+;; ---------------------------------------------------------------------------
+(defisland ()
+  (let ((canvas-ref (dict "current" nil))
+        (color (signal "#8b5cf6"))
+        (count (signal 0)))
+    (let ((_eff (effect (fn ()
+            (let ((el (get canvas-ref "current"))
+                  (n (deref count))
+                  (c (deref color)))
+              (when el
+                (let ((ctx (host-call el "getContext" "2d")))
+                  (host-call ctx "clearRect" 0 0 280 160)
+                  (host-set! ctx "fillStyle" c)
+                  (host-call ctx "fillRect" 10 10 (min (* n 25) 260) (min (* n 18) 140)))))))))
+      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+        (canvas :ref canvas-ref :width "280" :height "160"
+          (~tw :tokens "border border-stone-300 rounded bg-white block mb-3"))
+        (div (~tw :tokens "flex items-center gap-3")
+          (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+            :on-click (fn (e) (swap! count inc))
+            "Add")
+          (select :bind color
+            (~tw :tokens "px-2 py-1 rounded border border-stone-300 text-sm")
+            (option :value "#8b5cf6" "Violet")
+            (option :value "#3b82f6" "Blue")
+            (option :value "#ef4444" "Red")
+            (option :value "#22c55e" "Green"))
+          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+            :on-click (fn (e) (reset! count 0))
+            "Clear")
+          (span (~tw :tokens "text-sm text-stone-500")
+            (deref count) " squares"))))))
diff --git a/sx/sx/geography/reactive-runtime/_islands/demo-keyed-lists.sx b/sx/sx/geography/reactive-runtime/_islands/demo-keyed-lists.sx
new file mode 100644
index 00000000..1442a6ef
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/_islands/demo-keyed-lists.sx
@@ -0,0 +1,36 @@
+;; ---------------------------------------------------------------------------
+;; L5: Keyed Lists — reorderable items
+;; ---------------------------------------------------------------------------
+(defisland ()
+  (let ((next-id (signal 1))
+        (items (signal (list)))
+        (colors (list "violet" "blue" "green" "amber" "red" "stone"))
+        (add-item (fn (e)
+          (let ((id (deref next-id))
+                (old (deref items)))
+            (do
+              (reset! items (append old (dict "id" id
+                                              "text" (str "Item " id)
+                                              "color" (nth colors (mod (- id 1) 6)))))
+              (reset! next-id (+ id 1))))))
+        (remove-item (fn (id)
+          (reset! items (filter (fn (item) (not (= (get item "id") id))) (deref items))))))
+    (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (div (~tw :tokens "flex items-center gap-2 mb-3")
+        (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click add-item
+          "Add Item")
+        (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click (fn (e) (reset! items (reverse (deref items))))
+          "Reverse")
+        (span (~tw :tokens "text-sm text-stone-500")
+          (deref (computed (fn () (len (deref items))))) " items"))
+      (ul (~tw :tokens "space-y-1")
+        (map (fn (item)
+          (li :key (str (get item "id"))
+              :class (str "flex items-center justify-between rounded px-3 py-2 text-sm bg-" (get item "color") "-100 text-" (get item "color") "-800")
+            (span (get item "text"))
+            (button (~tw :tokens "text-stone-400 hover:text-red-500 text-xs ml-2")
+              :on-click (fn (e) (remove-item (get item "id")))
+              "✕")))
+          (deref items))))))
diff --git a/sx/sx/geography/reactive-runtime/_islands/demo-loop.sx b/sx/sx/geography/reactive-runtime/_islands/demo-loop.sx
new file mode 100644
index 00000000..6a11e93d
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/_islands/demo-loop.sx
@@ -0,0 +1,37 @@
+;; ---------------------------------------------------------------------------
+;; L4: Render Loop — bouncing ball
+;; ---------------------------------------------------------------------------
+(defisland ()
+  (let ((running (signal true))
+        (x (signal 0))
+        (dir (signal 1))
+        (frames (signal 0)))
+    (let ((_eff (effect (fn ()
+            (when (deref running)
+              (let ((id (set-interval
+                  (fn ()
+                    (batch (fn ()
+                      (swap! frames inc)
+                      (when (>= (deref x) 230) (reset! dir -1))
+                      (when (<= (deref x) 0) (reset! dir 1))
+                      (swap! x (fn (v) (+ v (* (deref dir) 3)))))))
+                  16)))
+                (fn () (clear-interval id))))))))
+      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+        (div (~tw :tokens "relative h-12 bg-white rounded border border-stone-200 mb-3 overflow-hidden")
+          (div (~tw :tokens "absolute top-1 w-10 h-10 rounded-full bg-violet-500 transition-none")
+            :style (str "left:" (deref x) "px")))
+        (div (~tw :tokens "flex items-center gap-3")
+          (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+            :on-click (fn (e) (swap! running not))
+            (if (deref running) "Pause" "Play"))
+          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+            :on-click (fn (e)
+              (batch (fn ()
+                (reset! running false)
+                (reset! x 0)
+                (reset! dir 1)
+                (reset! frames 0))))
+            "Reset")
+          (span (~tw :tokens "text-sm text-stone-500 font-mono")
+            "frames: " (deref frames)))))))
diff --git a/sx/sx/geography/reactive-runtime/_islands/demo-machine.sx b/sx/sx/geography/reactive-runtime/_islands/demo-machine.sx
new file mode 100644
index 00000000..6973902e
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/_islands/demo-machine.sx
@@ -0,0 +1,40 @@
+;; ---------------------------------------------------------------------------
+;; L2: State Machine — traffic light
+;; ---------------------------------------------------------------------------
+(defisland ()
+  (let ((state (signal "red"))
+        (transitions (dict "red" "green" "green" "yellow" "yellow" "red"))
+        (auto (signal false)))
+    (let ((_eff (effect (fn ()
+            (when (deref auto)
+              (let ((delay (if (= (deref state) "yellow") 1000 2500)))
+                (let ((id (set-timeout
+                    (fn () (reset! state (get transitions (deref state))))
+                    delay)))
+                  (fn () (clear-timeout id)))))))))
+      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+        (div (~tw :tokens "flex items-center gap-6")
+          ;; Traffic light
+          (div (~tw :tokens "flex flex-col gap-2 p-3 bg-stone-800 rounded-lg")
+            (div :class (str "w-10 h-10 rounded-full transition-colors "
+                  (if (= (deref state) "red") "bg-red-500 shadow-lg shadow-red-500/50" "bg-red-900/30")))
+            (div :class (str "w-10 h-10 rounded-full transition-colors "
+                  (if (= (deref state) "yellow") "bg-yellow-400 shadow-lg shadow-yellow-400/50" "bg-yellow-900/30")))
+            (div :class (str "w-10 h-10 rounded-full transition-colors "
+                  (if (= (deref state) "green") "bg-green-500 shadow-lg shadow-green-500/50" "bg-green-900/30"))))
+          ;; Controls
+          (div (~tw :tokens "space-y-3")
+            (div (~tw :tokens "flex items-center gap-2")
+              (span (~tw :tokens "text-sm font-medium text-stone-700") "State:")
+              (span (~tw :tokens "text-sm font-mono text-violet-700") (deref state)))
+            (div (~tw :tokens "flex items-center gap-2")
+              (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+                :on-click (fn (e)
+                  (reset! state (get transitions (deref state))))
+                "Next")
+              (button :class (str "px-3 py-1 rounded text-sm font-medium "
+                      (if (deref auto)
+                        "bg-amber-500 text-white hover:bg-amber-600"
+                        "bg-stone-300 text-stone-700 hover:bg-stone-400"))
+                :on-click (fn (e) (swap! auto not))
+                (if (deref auto) "Auto: ON" "Auto: OFF")))))))))
diff --git a/sx/sx/geography/reactive-runtime/_islands/demo-ref.sx b/sx/sx/geography/reactive-runtime/_islands/demo-ref.sx
new file mode 100644
index 00000000..c337168a
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/_islands/demo-ref.sx
@@ -0,0 +1,39 @@
+;; ===========================================================================
+;; Live demo islands
+;; ===========================================================================
+;; ---------------------------------------------------------------------------
+;; L0: Ref — timer ID in closure, DOM handle in dict
+;; ---------------------------------------------------------------------------
+(defisland ()
+  (let ((input-ref (dict "current" nil))
+        (ticks (signal 0))
+        (running (signal false))
+        (last-value (signal "")))
+    (let ((_eff (effect (fn ()
+            (when (deref running)
+              (let ((id (set-interval (fn () (swap! ticks inc)) 500)))
+                (fn () (clear-interval id))))))))
+      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+        (p (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
+          "Timer — interval ID captured in effect closure")
+        (div (~tw :tokens "flex items-center gap-3 mb-4")
+          (span (~tw :tokens "text-2xl font-bold text-violet-900 font-mono w-16 text-center")
+            (deref ticks))
+          (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+            :on-click (fn (e) (swap! running not))
+            (if (deref running) "Stop" "Start"))
+          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+            :on-click (fn (e) (do (reset! running false) (reset! ticks 0)))
+            "Reset"))
+        (p (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
+          "DOM handle — element ref in dict")
+        (div (~tw :tokens "flex items-center gap-3")
+          (input :ref input-ref :type "text" :placeholder "Type something…"
+            (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-48"))
+          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+            :on-click (fn (e)
+              (reset! last-value (dom-get-prop (get input-ref "current") "value")))
+            "Read")
+          (when (not (= (deref last-value) ""))
+            (span (~tw :tokens "text-sm text-stone-600 font-mono")
+              "\"" (deref last-value) "\"")))))))
diff --git a/sx/sx/geography/reactive-runtime/app-shell/index.sx b/sx/sx/geography/reactive-runtime/app-shell/index.sx
new file mode 100644
index 00000000..ace0ff28
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/app-shell/index.sx
@@ -0,0 +1,32 @@
+;; ---------------------------------------------------------------------------
+;; L6: App Shell
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Layer 6: Client-First App Shell"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "Skip SSR entirely for canvas-heavy apps. Server returns a minimal HTML shell; "
+      "all rendering happens client-side.")
+
+    (~docs/section :title "Live Demo" :id "demo"
+      (p "A mini single-page app rendered entirely client-side. Navigation switches views via a " (code "route") " signal — no server round-trips. Counter state persists across view switches because signals live in closures, not the DOM.")
+      (~reactive-runtime/demo-app-shell)
+      (~docs/code :src (highlight "(defisland ~demo-app-shell ()\n  (let ((route (signal \"home\"))\n        (count (signal 0)))\n    ;; Client-side nav\n    (nav\n      (button :on-click (fn (e) (reset! route \"home\"))\n        :class (str ... (if (= (deref route) \"home\") \"active\" \"inactive\"))\n        \"Home\")\n      ...)\n    ;; Reactive view switching\n    (cond\n      (= (deref route) \"home\")\n        (div (p \"Client-rendered. No server round-trip.\"))\n      (= (deref route) \"counter\")\n        (div (span (deref count)) ...)\n      (= (deref route) \"about\")\n        (div (p \"Entirely client-rendered.\")))))" "lisp"))
+      (p "This island IS a mini app shell. The " (code "make-app") " function generalizes the pattern: server returns " (code "<div id=\"sx-app-root\">") " + SX loader, " (code "app-boot") " mounts the entry component, " (code "app-navigate!") " switches routes — all using existing " (code "sx-mount") " and signals."))
+
+    (~docs/section :title "API" :id "app-api"
+
+      (~docs/code :src (highlight
+        "(define my-app (make-app\n  {:entry ~drawing-app\n   :stores (list canvas-state tool-state)\n   :routes {\"/\" ~drawing-app\n            \"/gallery\" ~gallery-view}\n   :head (list (link :rel \"stylesheet\" :href \"/static/app.css\"))}))\n\n;; Server: generate minimal HTML shell\n(app-shell-html my-app)\n;; => <!doctype html>...<div id=\"sx-app-root\">...</div>...\n\n;; Client: boot the app into the root element\n(app-boot my-app (dom-query \"#sx-app-root\"))\n\n;; Client: navigate between routes\n(app-navigate! my-app \"/gallery\")"
+        "lisp")))
+
+    (~docs/section :title "What the Server Returns" :id "app-shell"
+
+      (~docs/code :src (highlight
+        "<!doctype html>\n<html>\n<head>\n  <link rel=\"stylesheet\" href=\"/static/app.css\">\n  <script src=\"/static/scripts/sx-browser.js\"></script>\n</head>\n<body>\n  <div id=\"sx-app-root\"></div>\n  <script>\n    SX.boot(function(sx) {\n      sx.appBoot(/* app config */)\n    })\n  </script>\n</body>\n</html>"
+        "html"))
+
+      (p "The shell contains no rendered content — just the mount point and loader. "
+         "Uses existing " (code "sx-mount") " and " (code "sx-hydrate-islands") " from boot.sx.")
+
+      (p "~330 lines. Orchestrates all other layers."))))
diff --git a/sx/sx/geography/reactive-runtime/commands/index.sx b/sx/sx/geography/reactive-runtime/commands/index.sx
new file mode 100644
index 00000000..401f882c
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/commands/index.sx
@@ -0,0 +1,37 @@
+;; ---------------------------------------------------------------------------
+;; L3: Commands with History
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Layer 3: Commands with History"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "Command pattern built into signal stores. Commands are s-expressions "
+      "in a history stack — trivially serializable, with transaction grouping for drag operations.")
+
+    (~docs/section :title "Live Demo" :id "demo"
+      (p "A counter with full undo/redo. Each operation pushes the previous state onto the undo stack. Undo pops from undo and pushes to redo. All state is reactive — buttons disable when their stack is empty.")
+      (~reactive-runtime/demo-commands)
+      (~docs/code :src (highlight "(defisland ~demo-commands ()\n  (let ((value (signal 0))\n        (undo-stack (signal (list)))\n        (redo-stack (signal (list)))\n        (do-cmd (fn (new-val)\n          (batch (fn ()\n            (swap! undo-stack (fn (s) (cons (deref value) s)))\n            (reset! redo-stack (list))\n            (reset! value new-val)))))\n        (undo (fn ()\n          (when (> (len (deref undo-stack)) 0)\n            (batch (fn ()\n              (let ((prev (first (deref undo-stack))))\n                (swap! redo-stack (fn (r) (cons (deref value) r)))\n                (reset! value prev)\n                (swap! undo-stack rest)))))))\n        (redo (fn () ...)))\n    (span (deref value))\n    (button :on-click (fn (e) (do-cmd (+ (deref value) 1))) \"+1\")\n    (button :on-click (fn (e) (undo)) \"Undo\")))" "lisp"))
+      (p "Three signals and two functions. " (code "batch") " groups the three writes (push old, clear redo, set new) into one notification pass. The stacks use " (code "cons") "/" (code "first") "/" (code "rest") " — standard list operations. " (code "make-command-store") " wraps this pattern and adds transaction grouping."))
+
+    (~docs/section :title "API" :id "commands-api"
+
+      (~docs/code :src (highlight
+        "(define canvas-state (make-command-store\n  {:initial {:elements (list) :selection nil}\n   :commands {:add-element (fn (state el)\n                (assoc state :elements\n                  (append (get state :elements) (list el))))\n              :move-element (fn (state id dx dy) ...)}\n   :max-history 100}))\n\n;; Dispatch commands\n(cmd-dispatch! canvas-state :add-element rect-1)\n\n;; Undo / redo\n(cmd-undo! canvas-state)\n(cmd-redo! canvas-state)\n\n;; Reactive predicates\n(deref (cmd-can-undo? canvas-state))  ;; => true\n(deref (cmd-can-redo? canvas-state))  ;; => false\n\n;; Transaction grouping — collapses into single undo entry\n(cmd-group-start! canvas-state \"drag\")\n(cmd-dispatch! canvas-state :move-element id 1 0)\n(cmd-dispatch! canvas-state :move-element id 1 0)\n(cmd-dispatch! canvas-state :move-element id 1 0)\n(cmd-group-end! canvas-state)\n;; One undo reverses all three moves"
+        "lisp")))
+
+    (~docs/section :title "Internals" :id "commands-internals"
+
+      (p "A command store wraps three signals and a ref:")
+      (ul (~tw :tokens "list-disc pl-6 mb-4 space-y-1")
+        (li (strong "state") " signal — current application state")
+        (li (strong "undo-stack") " signal — list of previous states")
+        (li (strong "redo-stack") " signal — list of undone states")
+        (li (strong "group") " ref — current transaction label (nil when not grouping)"))
+
+      (p (code "cmd-dispatch!") " applies the command function to the current state, "
+         "pushes the old state onto the undo stack, and clears the redo stack. "
+         "During a group, intermediate states are collapsed so only the pre-group "
+         "state appears on the undo stack.")
+
+      (p "~320 lines. The most complex layer, but pure signals + dicts."))))
diff --git a/sx/sx/geography/reactive-runtime/foreign/index.sx b/sx/sx/geography/reactive-runtime/foreign/index.sx
new file mode 100644
index 00000000..17ab6ba8
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/foreign/index.sx
@@ -0,0 +1,36 @@
+;; ---------------------------------------------------------------------------
+;; L1: Foreign
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Layer 1: Foreign (Host API Interop)"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "Clean boundary for calling host APIs — Canvas, WebGL, WebAudio, any browser API — "
+      "from SX code. Function factories with automatic kebab-to-camelCase conversion.")
+
+    (~docs/section :title "Live Demo" :id "demo"
+      (p "Click the canvas to place colored rectangles. Uses " (code "host-call") " for canvas 2D context method calls and " (code "host-set!") " for property writes — the raw primitives that " (code "foreign-method") " and " (code "foreign-prop-setter") " will wrap.")
+      (~reactive-runtime/demo-foreign)
+      (~docs/code :src (highlight "(defisland ~demo-foreign ()\n  (let ((canvas-ref (dict \"current\" nil))\n        (color (signal \"#8b5cf6\"))\n        (rects (signal (list))))\n    ;; Draw effect — re-runs when rects changes\n    (effect (fn ()\n      (let ((el (get canvas-ref \"current\")))\n        (when el\n          (let ((ctx (host-call el \"getContext\" \"2d\")))\n            (host-call ctx \"clearRect\" 0 0 280 160)\n            (for-each (fn (r)\n              (host-set! ctx \"fillStyle\" (get r \"c\"))\n              (host-call ctx \"fillRect\" (get r \"x\") (get r \"y\") 20 20))\n              (deref rects)))))))\n    (canvas :ref canvas-ref :on-click (fn (e) ...)\n      :width \"280\" :height \"160\")))" "lisp"))
+      (p "Every canvas operation is a raw " (code "host-call") " or " (code "host-set!") ". The foreign FFI layer wraps these into named SX functions: " (code "(fill-rect ctx 0 0 280 160)") " instead of " (code "(host-call ctx \"fillRect\" 0 0 280 160)") "."))
+
+    (~docs/section :title "API" :id "foreign-api"
+
+      (~docs/code :src (highlight
+        ";; Function factories — each returns a reusable function\n(define fill-rect     (foreign-method \"fill-rect\"))\n(define set-fill-style! (foreign-prop-setter \"fill-style\"))\n(define get-width     (foreign-prop-getter \"width\"))\n\n;; Usage — clean SX calls, no string method names\n(let ((ctx (host-call canvas \"getContext\" \"2d\")))\n  (set-fill-style! ctx \"red\")\n  (fill-rect ctx 0 0 (get-width canvas) 100))"
+        "lisp"))
+
+      (p "Three factory functions, one helper:")
+      (ul (~tw :tokens "list-disc pl-6 mb-4 space-y-1")
+        (li (code "foreign-method") " — wraps " (code "host-call") " with kebab→camel conversion")
+        (li (code "foreign-prop-getter") " — wraps " (code "host-get"))
+        (li (code "foreign-prop-setter") " — wraps " (code "host-set!"))
+        (li (code "kebab->camel") " — " (code "\"fill-rect\"") " → " (code "\"fillRect\""))))
+
+    (~docs/section :title "Implementation" :id "foreign-impl"
+
+      (~docs/code :src (highlight
+        "(define kebab->camel (fn (s)\n  ;; \"fill-rect\" → \"fillRect\", \"font-size\" → \"fontSize\"\n  (let ((parts (split s \"-\"))\n        (first-part (first parts))\n        (rest-parts (rest parts)))\n    (str first-part\n      (join \"\" (map (fn (p)\n        (str (upper (slice p 0 1)) (slice p 1))) rest-parts))))))\n\n(define foreign-method (fn (method-name)\n  (let ((camel (kebab->camel method-name)))\n    (fn (obj &rest args)\n      (apply host-call (concat (list obj camel) args))))))\n\n(define foreign-prop-getter (fn (prop-name)\n  (let ((camel (kebab->camel prop-name)))\n    (fn (obj) (host-get obj camel)))))\n\n(define foreign-prop-setter (fn (prop-name)\n  (let ((camel (kebab->camel prop-name)))\n    (fn (obj val) (host-set! obj camel val)))))"
+        "lisp"))
+
+      (p "~100 lines. Uses existing host FFI primitives — no new platform interface needed."))))
diff --git a/sx/sx/geography/reactive-runtime/index.sx b/sx/sx/geography/reactive-runtime/index.sx
new file mode 100644
index 00000000..8a29d19f
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/index.sx
@@ -0,0 +1,95 @@
+;; Reactive Application Runtime — 7 Feature Layers
+;; Zero new platform primitives. All functions composing existing signals + DOM ops.
+;; Lives under Applications: /(applications.(reactive-runtime))
+;; ---------------------------------------------------------------------------
+;; Overview page
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Reactive Application Runtime"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "Seven feature layers that take SX from reactive documents to a full application runtime. "
+      "Every layer is a pure SX function composing existing primitives — zero new CEK frames, "
+      "zero new platform primitives. The existing platform interface is sufficient "
+      "for any application pattern.")
+
+    ;; =====================================================================
+    ;; Motivation
+    ;; =====================================================================
+
+    (~docs/section :title "Motivation" :id "motivation"
+
+      (p "SX has signals, computed, effects, batch, islands, lakes, stores, and bridge events — "
+         "sufficient for reactive documents (forms, toggles, counters, live search). "
+         "But complex client-heavy apps (drawing tools, editors, games) need structure on top:")
+
+      (table (~tw :tokens "w-full mb-6 text-sm")
+        (thead
+          (tr (th (~tw :tokens "text-left p-2") "Have") (th (~tw :tokens "text-left p-2") "Need")))
+        (tbody
+          (tr (td (~tw :tokens "p-2") "Signal holds a value") (td (~tw :tokens "p-2") "Ref holds a value " (em "without") " reactivity"))
+          (tr (td (~tw :tokens "p-2") "Effect runs on change") (td (~tw :tokens "p-2") "Loop runs " (em "continuously")))
+          (tr (td (~tw :tokens "p-2") "Store shares state") (td (~tw :tokens "p-2") "Machine manages " (em "modal") " state"))
+          (tr (td (~tw :tokens "p-2") "reset!/swap! update") (td (~tw :tokens "p-2") "Commands update " (em "with history")))
+          (tr (td (~tw :tokens "p-2") "DOM rendering") (td (~tw :tokens "p-2") "Foreign calls " (em "any host API")))
+          (tr (td (~tw :tokens "p-2") "Server-first hydration") (td (~tw :tokens "p-2") "Client-first " (em "app shell"))))))
+
+    ;; =====================================================================
+    ;; The Seven Layers
+    ;; =====================================================================
+
+    (~docs/section :title "The Seven Layers" :id "layers"
+
+      (table (~tw :tokens "w-full mb-6 text-sm")
+        (thead
+          (tr (th (~tw :tokens "text-left p-2") "Layer") (th (~tw :tokens "text-left p-2") "What") (th (~tw :tokens "text-left p-2") "Builds On")))
+        (tbody
+          (tr (td (~tw :tokens "p-2 font-mono") "L0") (td (~tw :tokens "p-2") "Ref — mutable box without reactivity") (td (~tw :tokens "p-2") "register-in-scope"))
+          (tr (td (~tw :tokens "p-2 font-mono") "L1") (td (~tw :tokens "p-2") "Foreign — host API interop") (td (~tw :tokens "p-2") "host-call, host-get, host-set!"))
+          (tr (td (~tw :tokens "p-2 font-mono") "L2") (td (~tw :tokens "p-2") "State machines — modal state as signal") (td (~tw :tokens "p-2") "signal, deref, reset!"))
+          (tr (td (~tw :tokens "p-2 font-mono") "L3") (td (~tw :tokens "p-2") "Commands — undo/redo signal stores") (td (~tw :tokens "p-2") "signal, computed, L0"))
+          (tr (td (~tw :tokens "p-2 font-mono") "L4") (td (~tw :tokens "p-2") "Render loop — continuous rAF") (td (~tw :tokens "p-2") "L0, request-animation-frame"))
+          (tr (td (~tw :tokens "p-2 font-mono") "L5") (td (~tw :tokens "p-2") "Keyed lists — explicit key reconciliation") (td (~tw :tokens "p-2") "reactive-list (existing)"))
+          (tr (td (~tw :tokens "p-2 font-mono") "L6") (td (~tw :tokens "p-2") "App shell — client-first rendering") (td (~tw :tokens "p-2") "sx-mount, all above")))))
+
+    ;; =====================================================================
+    ;; Implementation Plan
+    ;; =====================================================================
+
+    (~docs/section :title "Implementation Plan" :id "implementation"
+
+      (p "All seven layers live in a single spec module: " (code "web/reactive-runtime.sx") ". "
+         "Every layer is a plain " (code "define") " function — no macros, no new special forms. "
+         "The OCaml evaluator bootstraps them to JavaScript via the standard transpiler pipeline.")
+
+      (~docs/subsection :title "Implementation Order"
+        (~docs/code :src (highlight
+          "L0  Ref            → standalone, trivial (~35 LOC)\nL1  Foreign FFI    → standalone, function factories (~100 LOC)\nL5  Keyed Lists    → enhances existing reactive-list (~155 LOC)\nL2  State Machine  → uses signals + dicts (~200 LOC)\nL4  Render Loop    → uses L0 refs + existing rAF (~140 LOC)\nL3  Commands       → extends stores, uses signals (~320 LOC)\nL6  App Shell      → orchestrates all above (~330 LOC)\n                                        Total: ~1280 LOC"
+          "text"))
+
+        (p "L0 and L1 are independent foundations. L5 enhances existing code. "
+           "L2 and L4 depend on L0. L3 builds on signals. L6 ties everything together."))
+
+      (~docs/subsection :title "Build Integration"
+        (p "One new entry in " (code "SPEC_MODULES") " (hosts/javascript/platform.py):")
+        (~docs/code :src (highlight
+          "SPEC_MODULES = {\n    ...\n    \"reactive-runtime\": (\"reactive-runtime.sx\", \"reactive-runtime (application patterns)\"),\n}\nSPEC_MODULE_ORDER = [..., \"reactive-runtime\"]"
+          "python"))
+        (p "Auto-included when the " (code "dom") " adapter is present. "
+           "Depends on " (code "signals") " (loaded first via module ordering)."))
+
+      (~docs/subsection :title "Existing Primitives Used"
+        (table (~tw :tokens "w-full mb-6 text-sm")
+          (thead
+            (tr (th (~tw :tokens "text-left p-2") "Primitive") (th (~tw :tokens "text-left p-2") "Used By")))
+          (tbody
+            (tr (td (~tw :tokens "p-2") (code "signal, deref, reset!, swap!, computed, effect")) (td (~tw :tokens "p-2") "L2, L3, L4"))
+            (tr (td (~tw :tokens "p-2") (code "host-call, host-get, host-set!")) (td (~tw :tokens "p-2") "L1 (Foreign FFI)"))
+            (tr (td (~tw :tokens "p-2") (code "request-animation-frame")) (td (~tw :tokens "p-2") "L4 (Render Loop)"))
+            (tr (td (~tw :tokens "p-2") (code "register-in-scope, scope-push!, scope-pop!")) (td (~tw :tokens "p-2") "L0, L4"))
+            (tr (td (~tw :tokens "p-2") (code "sx-mount, sx-hydrate-islands")) (td (~tw :tokens "p-2") "L6 (App Shell)"))
+            (tr (td (~tw :tokens "p-2") (code "DOM ops (dom-insert-after, dom-remove, …)")) (td (~tw :tokens "p-2") "L5 (Keyed Lists)"))))
+
+        (p (~tw :tokens "text-stone-600 italic")
+          "Zero new platform primitives validates that the existing interface is complete "
+          "for any application pattern.")))))
diff --git a/sx/sx/geography/reactive-runtime/keyed-lists/index.sx b/sx/sx/geography/reactive-runtime/keyed-lists/index.sx
new file mode 100644
index 00000000..52b54824
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/keyed-lists/index.sx
@@ -0,0 +1,36 @@
+;; ---------------------------------------------------------------------------
+;; L5: Keyed Lists
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Layer 5: Keyed List Reconciliation"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "Enhances the existing reactive-list with explicit key extraction callbacks "
+      "for stable identity tracking across updates.")
+
+    (~docs/section :title "Live Demo" :id "demo"
+      (p "Items with stable " (code ":key") " identities. Reverse and rotate reorder the signal list — the reconciler moves existing DOM nodes instead of recreating them. Add and remove demonstrate insertion and deletion.")
+      (~reactive-runtime/demo-keyed-lists)
+      (~docs/code :src (highlight "(defisland ~demo-keyed-lists ()\n  (let ((items (signal (list\n          (dict \"id\" 1 \"text\" \"Alpha\" \"color\" \"violet\")\n          (dict \"id\" 2 \"text\" \"Beta\" \"color\" \"blue\") ...)))\n        (next-id (signal 6)))\n    (button :on-click (fn (e) (swap! items reverse)) \"Reverse\")\n    (button :on-click (fn (e)\n      (swap! items (fn (old) (append (rest old) (first old)))))\n      \"Rotate\")\n    (ul (map (fn (item)\n      (li :key (str (get item \"id\"))\n        :class (str \"bg-\" (get item \"color\") \"-100 ...\")\n        (span (get item \"text\"))\n        (button :on-click (fn (e) (remove-item (get item \"id\"))) \"✕\")))\n      (deref items)))))" "lisp"))
+      (p (code ":key") " on each " (code "li") " gives the reconciler stable identity. When " (code "reverse") " flips the list, the existing DOM nodes are moved — not destroyed and recreated. This preserves focus, scroll position, CSS transitions, and internal island state."))
+
+    (~docs/section :title "API" :id "keyed-api"
+
+      (~docs/code :src (highlight
+        ";; Current: keys extracted from rendered DOM key attribute\n(map (fn (el) (~shape-handle :key (get el :id) el)) (deref items))\n\n;; Enhanced: explicit key function\n(map (fn (el) (~shape-handle el)) (deref items)\n  :key (fn (el) (get el :id)))"
+        "lisp"))
+
+      (p "The " (code ":key") " parameter provides a function that extracts a stable identity "
+         "from each item " (em "before") " rendering. This is more efficient than extracting keys "
+         "from rendered DOM nodes and handles cases where the rendered output doesn't have a "
+         "natural key attribute."))
+
+    (~docs/section :title "Changes" :id "keyed-changes"
+
+      (p "Enhancement to existing " (code "adapter-dom.sx") ":")
+      (ul (~tw :tokens "list-disc pl-6 mb-4 space-y-1")
+        (li (code "render-dom-list") " detection — parse " (code ":key") " kwarg after " (code "(deref sig)"))
+        (li (code "reactive-list") " — accept optional " (code "key-fn") ", use instead of " (code "extract-key") " when provided")
+        (li "Fully backward compatible — without " (code ":key") ", behavior unchanged"))
+
+      (p "~155 lines of changes. No new platform primitives — existing DOM ops suffice."))))
diff --git a/sx/sx/geography/reactive-runtime/loop/index.sx b/sx/sx/geography/reactive-runtime/loop/index.sx
new file mode 100644
index 00000000..baaa13f0
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/loop/index.sx
@@ -0,0 +1,34 @@
+;; ---------------------------------------------------------------------------
+;; L4: Render Loop
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Layer 4: Continuous Rendering Loop"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      (code "requestAnimationFrame") " integration for canvas and animation apps, "
+      "with automatic island lifecycle cleanup.")
+
+    (~docs/section :title "Live Demo" :id "demo"
+      (p "A ball bouncing across a track. Position is a signal — the " (code ":style") " attribute reads it reactively. The animation runs via " (code "set-interval") " at ~60fps; the effect's cleanup stops it when paused.")
+      (~reactive-runtime/demo-loop)
+      (~docs/code :src (highlight "(defisland ~demo-loop ()\n  (let ((running (signal true))\n        (x (signal 0))\n        (dir (signal 1))\n        (frames (signal 0)))\n    ;; Animation effect — interval simulates rAF\n    (effect (fn ()\n      (when (deref running)\n        (let ((id (set-interval\n            (fn ()\n              (batch (fn ()\n                (swap! frames inc)\n                (when (>= (deref x) 230) (reset! dir -1))\n                (when (<= (deref x) 0) (reset! dir 1))\n                (swap! x (fn (v) (+ v (* (deref dir) 3)))))))\n            16)))\n          (fn () (clear-interval id))))))\n    ;; Ball position driven by reactive style\n    (div :class \"relative h-12 ...\" :style (str \"...\")\n      (div :style (str \"left:\" (deref x) \"px\") ...))))" "lisp"))
+      (p "The " (code "running") " signal is read in the effect body — toggling it triggers cleanup (stops the interval) and re-evaluation (starts a new one or does nothing). The real " (code "make-loop") " uses " (code "request-animation-frame") " with the running-ref pattern instead."))
+
+    (~docs/section :title "API" :id "loop-api"
+
+      (~docs/code :src (highlight
+        "(define render-loop (make-loop (fn (timestamp dt)\n  (let ((ctx (ref-deref ctx-ref)))\n    (clear-canvas! ctx)\n    (draw-scene! ctx (deref elements))))))\n\n(loop-start! render-loop)\n(loop-stop! render-loop)\n(deref (loop-running? render-loop))  ;; => true (reactive)"
+        "lisp")))
+
+    (~docs/section :title "Running-Ref Pattern" :id "loop-pattern"
+
+      (~docs/code :src (highlight
+        ";; Internal: no cancelAnimationFrame needed\n(let ((running (ref true))\n      (last-ts (ref 0)))\n  (define tick (fn (ts)\n    (when (ref-deref running)\n      (let ((dt (- ts (ref-deref last-ts))))\n        (ref-set! last-ts ts)\n        (user-fn ts dt))\n      (request-animation-frame tick))))\n  (request-animation-frame tick)\n  ;; To stop: (ref-set! running false)\n  ;; Loop dies naturally on next frame check"
+        "lisp"))
+
+      (p "The loop checks a ref each frame. Setting it to " (code "false") " stops the loop "
+         "without needing " (code "cancelAnimationFrame") ". On island disposal, "
+         (code "register-in-scope") " auto-stops the loop.")
+
+      (p "~140 lines. Depends on L0 (refs) and " (code "request-animation-frame")
+         " from web/lib/browser.sx."))))
diff --git a/sx/sx/geography/reactive-runtime/machine/index.sx b/sx/sx/geography/reactive-runtime/machine/index.sx
new file mode 100644
index 00000000..a1d7a430
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/machine/index.sx
@@ -0,0 +1,33 @@
+;; ---------------------------------------------------------------------------
+;; L2: State Machines
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Layer 2: State Machines"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "Modal state management where machine state IS a signal. "
+      "Composes naturally with computed and effects.")
+
+    (~docs/section :title "Live Demo" :id "demo"
+      (p "A traffic light built from a signal and a transitions dict. Auto-advance uses an effect with " (code "set-timeout") " — when state changes, the effect re-runs and schedules the next transition.")
+      (~reactive-runtime/demo-machine)
+      (~docs/code :src (highlight "(defisland ~demo-machine ()\n  (let ((state (signal \"red\"))\n        (transitions (dict \"red\" \"green\" \"green\" \"yellow\" \"yellow\" \"red\"))\n        (auto (signal false)))\n    ;; Auto-advance: effect depends on both state and auto\n    (effect (fn ()\n      (when (deref auto)\n        (let ((delay (if (= (deref state) \"yellow\") 1000 2500)))\n          (let ((id (set-timeout\n              (fn () (reset! state (get transitions (deref state))))\n              delay)))\n            (fn () (clear-timeout id)))))))\n    ;; Display: reactive class on each light\n    (div :class (str \"...\" (if (= (deref state) \"red\")\n      \"bg-red-500\" \"bg-red-900/30\")) ...)))" "lisp"))
+      (p "The machine state is a signal — " (code "(deref state)") " in the effect body subscribes, so when the timeout fires and resets state, the effect re-runs with the new delay. The " (code "make-machine") " function wraps this pattern with transition tables, guards, and enter/exit hooks."))
+
+    (~docs/section :title "API" :id "machine-api"
+
+      (~docs/code :src (highlight
+        "(define drawing-tool (make-machine\n  {:initial :idle\n   :states {:idle    {:on {:pointer-down (fn (ev)\n                           {:state :drawing\n                            :actions (list (fn () (start-shape! ev)))})}}\n            :drawing {:on {:pointer-move (fn (ev)\n                           {:state :drawing\n                            :actions (list (fn () (update-shape! ev)))})\n                          :pointer-up (fn (ev)\n                           {:state :idle\n                            :actions (list (fn () (finish-shape! ev)))})}}}}))\n\n;; Send events\n(machine-send! drawing-tool :pointer-down event)\n\n;; Read state (reactive — triggers re-render)\n(deref (machine-state drawing-tool))   ;; => :drawing\n(machine-matches? drawing-tool :idle)  ;; => false"
+        "lisp"))
+
+      (p (code "make-machine") " returns a dict with a state signal, transitions map, and send function. "
+         "Handlers return " (code "{:state :new-state :actions [fn ...]}") " — "
+         "actions are called after the state transition."))
+
+    (~docs/section :title "Implementation Sketch" :id "machine-impl"
+
+      (~docs/code :src (highlight
+        "(define make-machine (fn (config)\n  (let ((current (signal (get config :initial)))\n        (states  (get config :states)))\n    (dict\n      \"__machine\" true\n      \"state\"    current\n      \"states\"   states))))\n\n(define machine-state (fn (m) (get m \"state\")))\n\n(define machine-matches? (fn (m s)\n  (= (deref (get m \"state\")) s)))\n\n(define machine-send! (fn (m event &rest data)\n  (let ((current-state (deref (get m \"state\")))\n        (state-config  (get (get m \"states\") current-state))\n        (handlers      (get state-config :on))\n        (handler       (get handlers event)))\n    (when handler\n      (let ((result (apply handler data)))\n        (when (get result :state)\n          (reset! (get m \"state\") (get result :state)))\n        (when (get result :actions)\n          (for-each (fn (action) (action))\n            (get result :actions))))))))"
+        "lisp"))
+
+      (p "~200 lines with guard conditions, context data, and enter/exit hooks."))))
diff --git a/sx/sx/geography/reactive-runtime/ref/index.sx b/sx/sx/geography/reactive-runtime/ref/index.sx
new file mode 100644
index 00000000..58c6f94e
--- /dev/null
+++ b/sx/sx/geography/reactive-runtime/ref/index.sx
@@ -0,0 +1,43 @@
+;; ---------------------------------------------------------------------------
+;; L0: Ref
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Layer 0: Ref (Mutable Box)"
+
+    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
+      "A non-reactive mutable cell for DOM handles, canvas contexts, and timer IDs. "
+      "Like a signal but with no subscriber tracking and no notifications.")
+
+    (~docs/section :title "Live Demo" :id "demo"
+      (p "Two patterns that refs formalize: an interval ID captured in an effect closure, and a DOM element handle stored in a dict. Neither needs reactivity — they're infrastructure state.")
+      (~reactive-runtime/demo-ref)
+      (~docs/code :src (highlight "(defisland ~demo-ref ()\n  (let ((input-ref (dict \"current\" nil))\n        (ticks (signal 0))\n        (running (signal false))\n        (last-value (signal \"\")))\n    ;; Timer ID captured in effect closure — the ref pattern\n    (effect (fn ()\n      (when (deref running)\n        (let ((id (set-interval (fn () (swap! ticks inc)) 500)))\n          (fn () (clear-interval id))))))\n    ;; DOM handle in a dict — also the ref pattern\n    (input :ref input-ref :type \"text\" ...)\n    (button :on-click (fn (e)\n      (reset! last-value\n        (dom-get-prop (get input-ref \"current\") \"value\")))\n      \"Read\")))" "lisp"))
+      (p "The timer ID lives in a closure — nothing reads it reactively. The DOM element is a " (code "(dict \"current\" nil)") " set by " (code ":ref") ". The " (code "ref") " function formalizes both into a single primitive with auto-disposal."))
+
+    (~docs/section :title "API" :id "ref-api"
+
+      (~docs/code :src (highlight
+        ";; Create a ref — auto-registers disposal in island scope\n(define my-ref (ref initial-value))\n\n;; Read (no tracking, no subscriptions)\n(ref-deref my-ref)\n\n;; Write (no notifications, no re-renders)\n(ref-set! my-ref new-value)\n\n;; Predicate\n(ref? my-ref)  ;; => true"
+        "lisp"))
+
+      (p "Plain dicts with a " (code "__ref") " marker key (mirrors the " (code "__signal") " pattern). "
+         "On island disposal, the ref value is auto-nilled via " (code "register-in-scope") "."))
+
+    (~docs/section :title "When to Use Ref vs Signal" :id "ref-vs-signal"
+
+      (table (~tw :tokens "w-full mb-6 text-sm")
+        (thead
+          (tr (th (~tw :tokens "text-left p-2") "Use Ref") (th (~tw :tokens "text-left p-2") "Use Signal")))
+        (tbody
+          (tr (td (~tw :tokens "p-2") "DOM element handle") (td (~tw :tokens "p-2") "UI state that triggers re-render"))
+          (tr (td (~tw :tokens "p-2") "Canvas 2D context") (td (~tw :tokens "p-2") "Form input value"))
+          (tr (td (~tw :tokens "p-2") "Timer/interval ID") (td (~tw :tokens "p-2") "Counter, toggle, selection"))
+          (tr (td (~tw :tokens "p-2") "WebSocket connection") (td (~tw :tokens "p-2") "Anything the UI reads via deref")))))
+
+    (~docs/section :title "Implementation" :id "ref-impl"
+
+      (~docs/code :src (highlight
+        "(define make-ref (fn (value)\n  (dict \"__ref\" true \"value\" value)))\n\n(define ref? (fn (x)\n  (and (dict? x) (has-key? x \"__ref\"))))\n\n(define ref (fn (initial-value)\n  (let ((r (make-ref initial-value)))\n    (register-in-scope (fn () (dict-set! r \"value\" nil)))\n    r)))\n\n(define ref-deref (fn (r) (get r \"value\")))\n(define ref-set! (fn (r v) (dict-set! r \"value\" v)))"
+        "lisp"))
+
+      (p "~35 lines. No dependencies beyond " (code "register-in-scope") " from signals.sx."))))
diff --git a/sx/sx/geography/reactive/_islands/demo-counter.sx b/sx/sx/geography/reactive/_islands/demo-counter.sx
new file mode 100644
index 00000000..0abaf1a7
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-counter.sx
@@ -0,0 +1,24 @@
+(defisland
+  (&key initial)
+  (let
+    ((count (signal (or initial 0)))
+      (doubled (computed (fn () (* 2 (deref count))))))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (div
+        (~tw :tokens "flex items-center gap-4")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click (fn (e) (swap! count dec))
+          "−")
+        (span
+          (~tw :tokens "text-2xl font-bold text-violet-900 w-12 text-center")
+          (deref count))
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click (fn (e) (swap! count inc))
+          "+"))
+      (p
+        (~tw :tokens "text-sm text-stone-500 mt-2")
+        "doubled: "
+        (span (~tw :tokens "font-mono text-violet-700") (deref doubled))))))
diff --git a/sx/sx/geography/reactive/_islands/demo-dynamic-class.sx b/sx/sx/geography/reactive/_islands/demo-dynamic-class.sx
new file mode 100644
index 00000000..c4b10d59
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-dynamic-class.sx
@@ -0,0 +1,29 @@
+(defisland
+  ()
+  (let
+    ((danger (signal false)) (size (signal 16)))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click (fn (e) (swap! danger not))
+          (if (deref danger) "Safe mode" "Danger mode"))
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+          :on-click (fn (e) (swap! size (fn (s) (+ s 2))))
+          "Bigger")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+          :on-click (fn (e) (swap! size (fn (s) (max 10 (- s 2)))))
+          "Smaller"))
+      (div
+        :class (str
+          "p-3 rounded font-medium transition-colors "
+          (if
+            (deref danger)
+            "bg-red-100 text-red-800"
+            "bg-green-100 text-green-800"))
+        :style (str "font-size:" (deref size) "px")
+        "This element's class and style are reactive."))))
diff --git a/sx/sx/geography/reactive/_islands/demo-error-boundary.sx b/sx/sx/geography/reactive/_islands/demo-error-boundary.sx
new file mode 100644
index 00000000..5c9a3264
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-error-boundary.sx
@@ -0,0 +1,34 @@
+(defisland
+  ()
+  (let
+    ((throw? (signal false)))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (div
+        (~tw :tokens "flex items-center gap-3 mb-3")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-red-600 text-white text-sm font-medium hover:bg-red-700")
+          :on-click (fn (e) (reset! throw? true))
+          "Trigger Error")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+          :on-click (fn (e) (reset! throw? false))
+          "Reset"))
+      (error-boundary
+        (fn
+          (err retry-fn)
+          (div
+            (~tw :tokens "p-3 bg-red-50 border border-red-200 rounded")
+            (p
+              (~tw :tokens "text-red-700 font-medium text-sm")
+              "Caught: "
+              (error-message err))
+            (button
+              (~tw :tokens "mt-2 px-3 py-1 rounded bg-red-600 text-white text-sm hover:bg-red-700")
+              :on-click (fn (e) (do (reset! throw? false) (invoke retry-fn)))
+              "Retry")))
+        (do
+          (when (deref throw?) (error "Intentional explosion!"))
+          (p
+            (~tw :tokens "text-sm text-green-700")
+            "Everything is fine. Click \"Trigger Error\" to throw."))))))
diff --git a/sx/sx/geography/reactive/_islands/demo-event-bridge.sx b/sx/sx/geography/reactive/_islands/demo-event-bridge.sx
new file mode 100644
index 00000000..964b4655
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-event-bridge.sx
@@ -0,0 +1,53 @@
+(defisland
+  ()
+  (let
+    ((messages (signal (list)))
+      (_eff
+        (effect
+          (fn
+            ()
+            (let
+              ((cb (host-callback (fn (e) (swap! messages (fn (old) (append old (host-get (event-detail e) "text"))))))))
+              (host-call (dom-document) "addEventListener" "inbox:message" cb)
+              (fn
+                ()
+                (host-call
+                  (dom-document)
+                  "removeEventListener"
+                  "inbox:message"
+                  cb)))))))
+    (div
+      (p
+        (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
+        "Event Bridge Demo")
+      (p
+        (~tw :tokens "text-sm text-stone-600 mb-2")
+        "The buttons below simulate server-rendered content dispatching events into the island.")
+      (div
+        (~tw :tokens "flex gap-2 mb-3")
+        (button
+          :data-sx-emit "inbox:message"
+          :data-sx-emit-detail "{\"text\":\"Hello from the lake!\"}"
+          (~tw :tokens "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700")
+          "Send \"Hello\"")
+        (button
+          :data-sx-emit "inbox:message"
+          :data-sx-emit-detail "{\"text\":\"Another message\"}"
+          (~tw :tokens "px-3 py-1.5 bg-blue-600 text-white rounded text-sm hover:bg-blue-700")
+          "Send \"Another\"")
+        (button
+          :on-click (fn (e) (reset! messages (list)))
+          (~tw :tokens "px-3 py-1.5 bg-stone-200 text-stone-700 rounded text-sm hover:bg-stone-300")
+          "Clear"))
+      (div
+        (~tw :tokens "min-h-12 p-3 rounded bg-stone-100 border border-stone-200")
+        (if
+          (empty? (deref messages))
+          (p (~tw :tokens "text-stone-400 text-sm") "No messages yet.")
+          (ul
+            (~tw :tokens "space-y-1")
+            (map
+              (fn
+                (msg)
+                (li (~tw :tokens "text-sm text-stone-700") (str "→ " msg)))
+              (deref messages))))))))
diff --git a/sx/sx/geography/reactive/_islands/demo-imperative.sx b/sx/sx/geography/reactive/_islands/demo-imperative.sx
new file mode 100644
index 00000000..71992ee3
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-imperative.sx
@@ -0,0 +1,30 @@
+(defisland
+  ()
+  (let
+    ((count (signal 0))
+      (text-node (create-text-node "0"))
+      (_eff
+        (effect
+          (fn () (dom-set-text-content text-node (str (deref count)))))))
+    (div
+      (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4 my-4")
+      (p
+        (~tw :tokens "text-sm text-stone-600 mb-2")
+        "Imperative style — explicit "
+        (code "effect")
+        " + "
+        (code "create-text-node")
+        ":")
+      (div
+        (~tw :tokens "flex items-center gap-4")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-600 text-white text-sm font-medium hover:bg-stone-700")
+          :on-click (fn (e) (swap! count dec))
+          "−")
+        (span
+          (~tw :tokens "text-2xl font-bold text-stone-900 w-12 text-center")
+          text-node)
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-600 text-white text-sm font-medium hover:bg-stone-700")
+          :on-click (fn (e) (swap! count inc))
+          "+")))))
diff --git a/sx/sx/geography/reactive/_islands/demo-input-binding.sx b/sx/sx/geography/reactive/_islands/demo-input-binding.sx
new file mode 100644
index 00000000..dfe90ae8
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-input-binding.sx
@@ -0,0 +1,32 @@
+(defisland
+  ()
+  (let
+    ((name (signal "")) (agreed (signal false)))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (input
+          :type "text"
+          :bind name
+          :placeholder "Type your name..."
+          (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-48"))
+        (span
+          (~tw :tokens "text-sm text-stone-600")
+          "Hello, "
+          (strong (deref name))
+          "!"))
+      (div
+        (~tw :tokens "flex items-center gap-2")
+        (input
+          :type "checkbox"
+          :bind agreed
+          :id "agree-cb"
+          (~tw :tokens "rounded border-stone-300"))
+        (label
+          :for "agree-cb"
+          (~tw :tokens "text-sm text-stone-600")
+          "I agree to the terms"))
+      (when
+        (deref agreed)
+        (p (~tw :tokens "text-sm text-green-700") "Thanks for agreeing!")))))
diff --git a/sx/sx/geography/reactive/_islands/demo-portal.sx b/sx/sx/geography/reactive/_islands/demo-portal.sx
new file mode 100644
index 00000000..7ffff1fe
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-portal.sx
@@ -0,0 +1,32 @@
+(defisland
+  ()
+  (let
+    ((open? (signal false)))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (button
+        (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+        :on-click (fn (e) (swap! open? not))
+        (if (deref open?) "Close Modal" "Open Modal"))
+      (portal
+        "#portal-root"
+        (when
+          (deref open?)
+          (div
+            (~tw :tokens "fixed inset-0 bg-black/50 flex items-center justify-center z-50")
+            :on-click (fn (e) (reset! open? false))
+            (div
+              (~tw :tokens "bg-white rounded-lg p-6 max-w-md shadow-xl")
+              :on-click (fn (e) (stop-propagation e))
+              (h2
+                (~tw :tokens "text-lg font-bold text-stone-800 mb-2")
+                "Portal Modal")
+              (p
+                (~tw :tokens "text-stone-600 text-sm mb-4")
+                "This content is rendered into "
+                (code "#portal-root")
+                " — outside the island's DOM subtree. It escapes overflow:hidden, z-index stacking, and layout constraints.")
+              (button
+                (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+                :on-click (fn (e) (reset! open? false))
+                "Close"))))))))
diff --git a/sx/sx/geography/reactive/_islands/demo-reactive-list.sx b/sx/sx/geography/reactive/_islands/demo-reactive-list.sx
new file mode 100644
index 00000000..ee5c5a02
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-reactive-list.sx
@@ -0,0 +1,57 @@
+(defisland
+  ()
+  (let
+    ((next-id (signal 1))
+      (items (signal (list)))
+      (add-item
+        (fn
+          (e)
+          (batch
+            (fn
+              ()
+              (swap!
+                items
+                (fn
+                  (old)
+                  (append
+                    old
+                    (dict
+                      "id"
+                      (deref next-id)
+                      "text"
+                      (str "Item " (deref next-id))))))
+              (swap! next-id inc)))))
+      (remove-item
+        (fn
+          (id)
+          (swap!
+            items
+            (fn
+              (old)
+              (filter (fn (item) (not (= (get item "id") id))) old))))))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (div
+        (~tw :tokens "flex items-center gap-3 mb-3")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click add-item
+          "Add Item")
+        (span
+          (~tw :tokens "text-sm text-stone-500")
+          (deref (computed (fn () (len (deref items)))))
+          " items"))
+      (ul
+        (~tw :tokens "space-y-1")
+        (map
+          (fn
+            (item)
+            (li
+              :key (str (get item "id"))
+              (~tw :tokens "flex items-center justify-between bg-white rounded px-3 py-2 text-sm")
+              (span (get item "text"))
+              (button
+                (~tw :tokens "text-stone-400 hover:text-red-500 text-xs")
+                :on-click (fn (e) (remove-item (get item "id")))
+                "✕")))
+          (deref items))))))
diff --git a/sx/sx/geography/reactive/_islands/demo-refs.sx b/sx/sx/geography/reactive/_islands/demo-refs.sx
new file mode 100644
index 00000000..818229d6
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-refs.sx
@@ -0,0 +1,35 @@
+(defisland
+  ()
+  (let
+    ((my-ref (dict "current" nil)) (msg (signal "")))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
+      (input
+        :ref my-ref
+        :type "text"
+        :placeholder "I can be focused programmatically"
+        (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-64"))
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click (fn (e) (dom-focus (get my-ref "current")))
+          "Focus Input")
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+          :on-click (fn
+            (e)
+            (let
+              ((el (get my-ref "current")))
+              (reset!
+                msg
+                (str
+                  "Tag: "
+                  (dom-tag-name el)
+                  ", value: \""
+                  (dom-get-prop el "value")
+                  "\""))))
+          "Read Input"))
+      (when
+        (not (= (deref msg) ""))
+        (p (~tw :tokens "text-sm text-stone-600 font-mono") (deref msg))))))
diff --git a/sx/sx/geography/reactive/_islands/demo-resource.sx b/sx/sx/geography/reactive/_islands/demo-resource.sx
new file mode 100644
index 00000000..0c928334
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-resource.sx
@@ -0,0 +1,31 @@
+(defisland
+  ()
+  (let
+    ((data (resource (fn () (promise-delayed 1500 (dict "name" "Ada Lovelace" "role" "First Programmer" "year" 1843))))))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (cond
+        (get (deref data) "loading")
+        (div
+          (~tw :tokens "flex items-center gap-2 text-stone-500")
+          (span
+            (~tw :tokens "inline-block w-4 h-4 border-2 border-stone-300 border-t-violet-600 rounded-full animate-spin"))
+          (span (~tw :tokens "text-sm") "Loading..."))
+        (get (deref data) "error")
+        (div
+          (~tw :tokens "p-3 bg-red-50 border border-red-200 rounded")
+          (p
+            (~tw :tokens "text-red-700 text-sm")
+            "Error: "
+            (get (deref data) "error")))
+        :else (let
+          ((d (get (deref data) "data")))
+          (div
+            (~tw :tokens "space-y-1")
+            (p (~tw :tokens "font-bold text-stone-800") (get d "name"))
+            (p
+              (~tw :tokens "text-sm text-stone-600")
+              (get d "role")
+              " ("
+              (get d "year")
+              ")")))))))
diff --git a/sx/sx/geography/reactive/_islands/demo-stopwatch.sx b/sx/sx/geography/reactive/_islands/demo-stopwatch.sx
new file mode 100644
index 00000000..d430682f
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-stopwatch.sx
@@ -0,0 +1,47 @@
+(defisland
+  ()
+  (let
+    ((running (signal false))
+      (elapsed (signal 0))
+      (time-text (create-text-node "0.0s"))
+      (btn-text (create-text-node "Start"))
+      (_e1
+        (effect
+          (fn
+            ()
+            (when
+              (deref running)
+              (let
+                ((id (set-interval (fn () (swap! elapsed inc)) 100)))
+                (fn () (clear-interval id)))))))
+      (_e2
+        (effect
+          (fn
+            ()
+            (let
+              ((e (deref elapsed)))
+              (dom-set-text-content
+                time-text
+                (str (floor (/ e 10)) "." (mod e 10) "s"))))))
+      (_e3
+        (effect
+          (fn
+            ()
+            (dom-set-text-content
+              btn-text
+              (if (deref running) "Stop" "Start"))))))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (div
+        (~tw :tokens "flex items-center gap-4")
+        (span
+          (~tw :tokens "font-mono text-2xl font-bold text-violet-900 w-24 text-center")
+          time-text)
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
+          :on-click (fn (e) (swap! running not))
+          btn-text)
+        (button
+          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
+          :on-click (fn (e) (do (reset! running false) (reset! elapsed 0)))
+          "Reset")))))
diff --git a/sx/sx/geography/reactive/_islands/demo-store-reader.sx b/sx/sx/geography/reactive/_islands/demo-store-reader.sx
new file mode 100644
index 00000000..f2721a45
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-store-reader.sx
@@ -0,0 +1,27 @@
+(defisland
+  ()
+  (let
+    ((store (use-store "demo-theme")))
+    (div
+      (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4 my-2")
+      (p
+        (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
+        "Island B — Store Reader")
+      (div
+        :class (str
+          "p-3 rounded font-medium text-sm "
+          (if
+            (deref (get store "dark"))
+            (str
+              "bg-"
+              (deref (get store "color"))
+              "-900 text-"
+              (deref (get store "color"))
+              "-100")
+            (str
+              "bg-"
+              (deref (get store "color"))
+              "-100 text-"
+              (deref (get store "color"))
+              "-800")))
+        "Styled by signals from Island A"))))
diff --git a/sx/sx/geography/reactive/_islands/demo-store-writer.sx b/sx/sx/geography/reactive/_islands/demo-store-writer.sx
new file mode 100644
index 00000000..b1f1a414
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-store-writer.sx
@@ -0,0 +1,25 @@
+(defisland
+  ()
+  (let
+    ((store (def-store "demo-theme" (fn () (dict "color" (signal "violet") "dark" (signal false))))))
+    (div
+      (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4 my-2")
+      (p
+        (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
+        "Island A — Store Writer")
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (select
+          :bind (get store "color")
+          (~tw :tokens "px-2 py-1 rounded border border-stone-300 text-sm")
+          (option :value "violet" "Violet")
+          (option :value "blue" "Blue")
+          (option :value "green" "Green")
+          (option :value "red" "Red"))
+        (label
+          (~tw :tokens "flex items-center gap-1 text-sm text-stone-600")
+          (input
+            :type "checkbox"
+            :bind (get store "dark")
+            (~tw :tokens "rounded border-stone-300"))
+          "Dark mode")))))
diff --git a/sx/sx/geography/reactive/_islands/demo-temperature.sx b/sx/sx/geography/reactive/_islands/demo-temperature.sx
new file mode 100644
index 00000000..4a834e4b
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-temperature.sx
@@ -0,0 +1,28 @@
+(defisland
+  ()
+  (let
+    ((celsius (signal 20))
+      (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))
+    (div
+      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
+      (div
+        (~tw :tokens "flex items-center gap-3")
+        (div
+          (~tw :tokens "flex items-center gap-2")
+          (button
+            (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
+            :on-click (fn (e) (swap! celsius (fn (c) (- c 5))))
+            "−5")
+          (span
+            (~tw :tokens "font-mono text-lg font-bold text-violet-900 w-16 text-center")
+            (deref celsius))
+          (button
+            (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
+            :on-click (fn (e) (swap! celsius (fn (c) (+ c 5))))
+            "+5")
+          (span (~tw :tokens "text-stone-500") "°C"))
+        (span (~tw :tokens "text-stone-400") "=")
+        (span
+          (~tw :tokens "font-mono text-lg font-bold text-violet-900")
+          (deref fahrenheit))
+        (span (~tw :tokens "text-stone-500") "°F")))))
diff --git a/sx/sx/geography/reactive/_islands/demo-transition.sx b/sx/sx/geography/reactive/_islands/demo-transition.sx
new file mode 100644
index 00000000..47ce962b
--- /dev/null
+++ b/sx/sx/geography/reactive/_islands/demo-transition.sx
@@ -0,0 +1,53 @@
+(defisland
+  ()
+  (let
+    ((query (signal ""))
+      (all-items
+        (list
+          "Signals"
+          "Effects"
+          "Computed"
+          "Batch"
+          "Stores"
+          "Islands"
+          "Portals"
+          "Error Boundaries"
+          "Resources"
+          "Input Binding"
+          "Keyed Lists"
+          "Event Bridge"
+          "Reactive Text"
+          "Reactive Attrs"
+          "Reactive Fragments"
+          "Disposal"
+          "Hydration"
+          "CSSX"
+          "Macros"
+          "Refs"))
+      (filtered (signal (list)))
+      (pending (signal false)))
+    (reset! filtered all-items)
+    (let
+      ((_eff (effect (fn () (let ((q (lower (deref query)))) (if (= q "") (do (reset! pending false) (reset! filtered all-items)) (do (reset! pending true) (schedule-idle (fn () (batch (fn () (reset! filtered (filter (fn (item) (contains? (lower item) q)) all-items)) (reset! pending false))))))))))))
+      (div
+        (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
+        (div
+          (~tw :tokens "flex items-center gap-3")
+          (input
+            :type "text"
+            :bind query
+            :placeholder "Filter features..."
+            (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-48"))
+          (when
+            (deref pending)
+            (span (~tw :tokens "text-xs text-stone-400") "Filtering...")))
+        (ul
+          (~tw :tokens "space-y-1")
+          (map
+            (fn
+              (item)
+              (li
+                :key item
+                (~tw :tokens "text-sm text-stone-700 bg-white rounded px-3 py-1.5")
+                item))
+            (deref filtered)))))))
diff --git a/sx/sx/reactive-islands/demo-cyst.sx b/sx/sx/geography/reactive/_lib/demo-cyst.sx
similarity index 52%
rename from sx/sx/reactive-islands/demo-cyst.sx
rename to sx/sx/geography/reactive/_lib/demo-cyst.sx
index 558cfd8b..74a886c4 100644
--- a/sx/sx/reactive-islands/demo-cyst.sx
+++ b/sx/sx/geography/reactive/_lib/demo-cyst.sx
@@ -1,6 +1,5 @@
 ;; Cyst demo — isolated reactive subtree inside a parent island.
-
-(defisland ~reactive-islands/index/demo-cyst ()
+(defisland ()
   (let ((parent-count (signal 0))
         (render-count (signal 0)))
     ;; Increment render-count each time the parent re-renders
@@ -26,16 +25,3 @@
                 :on-click (fn (e) (swap! child-count inc))
                 "+")
               (span (~tw :tokens "font-mono text-lg font-bold text-emerald-700") (deref child-count)))))))))
-
-(defcomp ~reactive-islands/demo/example-cyst ()
-  (~docs/page :title "Cyst"
-    (p "A " (code "cyst") " is an isolated reactive subtree inside a parent island. When the parent re-renders, the cyst's DOM is preserved — event handlers, signal subscriptions, and state all survive.")
-    (~reactive-islands/index/demo-cyst)
-    (~docs/code :src (highlight "(cyst :key \"demo-cyst\"
-  (let ((child-count (signal 0)))
-    (div
-      (button :on-click (fn (e) (swap! child-count inc)) \"+\")
-      (span (deref child-count)))))" "lisp"))
-    (p "Click the parent + button — the parent count increments but the cyst's count is unaffected. Click the cyst's + button — it increments independently. The cyst's DOM persists across parent re-renders because " (code "render-dom") " returns the cached DOM node instead of recreating it.")
-    (p "Without " (code "cyst") ", a reactive island nested inside another island's render tree gets destroyed and recreated on every parent re-render. Event handlers are lost, signals reset to initial values. " (code "cyst") " solves this by caching the rendered DOM keyed by the " (code ":key") " parameter and returning it when the node is still connected to the document.")
-    (p "Usage: " (code "(cyst :key \"unique-id\" body...)") ". The key must be unique within the page. The body is evaluated in a fresh " (code "with-island-scope") " with its own disposer list.")))
diff --git a/sx/sx/reactive-islands/demo-reactive-expressions.sx b/sx/sx/geography/reactive/_lib/demo-reactive-expressions.sx
similarity index 57%
rename from sx/sx/reactive-islands/demo-reactive-expressions.sx
rename to sx/sx/geography/reactive/_lib/demo-reactive-expressions.sx
index 34fc1a58..790ecc50 100644
--- a/sx/sx/reactive-islands/demo-reactive-expressions.sx
+++ b/sx/sx/geography/reactive/_lib/demo-reactive-expressions.sx
@@ -1,6 +1,5 @@
 ;; Reactive Expressions demo — compound expressions with deref auto-track signals.
-
-(defisland ~reactive-islands/index/demo-reactive-expressions ()
+(defisland ()
   (let ((celsius (signal 20))
         (name (signal "World")))
     (div (~tw :tokens "rounded border border-violet-200 bg-violet-50/30 p-4 space-y-4")
@@ -20,27 +19,3 @@
           (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "Math + deref: ") (span (~tw :tokens "font-mono text-violet-700") (+ (* (deref celsius) 1.8) 32)))
           (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "Full conversion: ") (span (~tw :tokens "font-mono text-violet-700") (str (deref celsius) "°C = " (+ (* (deref celsius) 1.8) 32) "°F")))
           (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "Conditional: ") (span (~tw :tokens "font-mono text-violet-700") (if (> (deref celsius) 30) "Hot!" (if (< (deref celsius) 0) "Freezing!" "Moderate")))))))))
-
-(defcomp ~reactive-islands/demo/example-reactive-expressions ()
-  (~docs/page :title "Reactive Expressions"
-    (p "Any expression containing " (code "(deref sig)") " inside an island scope is automatically reactive. The DOM adapter wraps it in a " (code "computed") " signal for dependency tracking.")
-    (~reactive-islands/index/demo-reactive-expressions)
-    (~docs/code :src (highlight ";; All of these update live when celsius changes:
-
-;; Bare deref
-(span (deref celsius))
-
-;; String interpolation
-(span (str (deref celsius) \"°C\"))
-
-;; Arithmetic
-(span (+ (* (deref celsius) 1.8) 32))
-
-;; Complex expression
-(span (str (deref celsius) \"°C = \"
-       (+ (* (deref celsius) 1.8) 32) \"°F\"))
-
-;; Conditional
-(span (if (> (deref celsius) 30) \"Hot!\" \"Moderate\"))" "lisp"))
-    (p "Before this feature, only bare " (code "(deref sig)") " was reactive. Compound expressions like " (code "(str (deref celsius) \"°C\")") " were evaluated once and never updated. Now the " (code "contains-deref?") " predicate in " (code "adapter-dom.sx") " detects " (code "deref") " calls at any depth and wraps the expression in " (code "(reactive-text (computed (fn () (eval-expr expr env))))") ".")
-    (p "This is a language-level feature — every island on the site benefits automatically. No opt-in needed.")))
diff --git a/sx/sx/reactive-islands/event-bridge.sx b/sx/sx/geography/reactive/_lib/event-bridge.sx
similarity index 98%
rename from sx/sx/reactive-islands/event-bridge.sx
rename to sx/sx/geography/reactive/_lib/event-bridge.sx
index e584da5b..595ad1ec 100644
--- a/sx/sx/reactive-islands/event-bridge.sx
+++ b/sx/sx/geography/reactive/_lib/event-bridge.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~reactive-islands/event-bridge/reactive-islands-event-bridge-content
   ()
   (~docs/page
     :title "Event Bridge"
diff --git a/sx/sx/geography/reactive/_lib/example-cyst.sx b/sx/sx/geography/reactive/_lib/example-cyst.sx
new file mode 100644
index 00000000..59845ee0
--- /dev/null
+++ b/sx/sx/geography/reactive/_lib/example-cyst.sx
@@ -0,0 +1,12 @@
+(defcomp ()
+  (~docs/page :title "Cyst"
+    (p "A " (code "cyst") " is an isolated reactive subtree inside a parent island. When the parent re-renders, the cyst's DOM is preserved — event handlers, signal subscriptions, and state all survive.")
+    (~reactive-islands/index/demo-cyst)
+    (~docs/code :src (highlight "(cyst :key \"demo-cyst\"
+  (let ((child-count (signal 0)))
+    (div
+      (button :on-click (fn (e) (swap! child-count inc)) \"+\")
+      (span (deref child-count)))))" "lisp"))
+    (p "Click the parent + button — the parent count increments but the cyst's count is unaffected. Click the cyst's + button — it increments independently. The cyst's DOM persists across parent re-renders because " (code "render-dom") " returns the cached DOM node instead of recreating it.")
+    (p "Without " (code "cyst") ", a reactive island nested inside another island's render tree gets destroyed and recreated on every parent re-render. Event handlers are lost, signals reset to initial values. " (code "cyst") " solves this by caching the rendered DOM keyed by the " (code ":key") " parameter and returning it when the node is still connected to the document.")
+    (p "Usage: " (code "(cyst :key \"unique-id\" body...)") ". The key must be unique within the page. The body is evaluated in a fresh " (code "with-island-scope") " with its own disposer list.")))
diff --git a/sx/sx/geography/reactive/_lib/example-reactive-expressions.sx b/sx/sx/geography/reactive/_lib/example-reactive-expressions.sx
new file mode 100644
index 00000000..4536c549
--- /dev/null
+++ b/sx/sx/geography/reactive/_lib/example-reactive-expressions.sx
@@ -0,0 +1,23 @@
+(defcomp ()
+  (~docs/page :title "Reactive Expressions"
+    (p "Any expression containing " (code "(deref sig)") " inside an island scope is automatically reactive. The DOM adapter wraps it in a " (code "computed") " signal for dependency tracking.")
+    (~reactive-islands/index/demo-reactive-expressions)
+    (~docs/code :src (highlight ";; All of these update live when celsius changes:
+
+;; Bare deref
+(span (deref celsius))
+
+;; String interpolation
+(span (str (deref celsius) \"°C\"))
+
+;; Arithmetic
+(span (+ (* (deref celsius) 1.8) 32))
+
+;; Complex expression
+(span (str (deref celsius) \"°C = \"
+       (+ (* (deref celsius) 1.8) 32) \"°F\"))
+
+;; Conditional
+(span (if (> (deref celsius) 30) \"Hot!\" \"Moderate\"))" "lisp"))
+    (p "Before this feature, only bare " (code "(deref sig)") " was reactive. Compound expressions like " (code "(str (deref celsius) \"°C\")") " were evaluated once and never updated. Now the " (code "contains-deref?") " predicate in " (code "adapter-dom.sx") " detects " (code "deref") " calls at any depth and wraps the expression in " (code "(reactive-text (computed (fn () (eval-expr expr env))))") ".")
+    (p "This is a language-level feature — every island on the site benefits automatically. No opt-in needed.")))
diff --git a/sx/sx/reactive-islands/named-stores.sx b/sx/sx/geography/reactive/_lib/named-stores.sx
similarity index 98%
rename from sx/sx/reactive-islands/named-stores.sx
rename to sx/sx/geography/reactive/_lib/named-stores.sx
index e02e3d72..8aebeb36 100644
--- a/sx/sx/reactive-islands/named-stores.sx
+++ b/sx/sx/geography/reactive/_lib/named-stores.sx
@@ -2,7 +2,7 @@
 ;; Named Stores — page-level signal containers
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~reactive-islands/named-stores/reactive-islands-named-stores-content ()
+(defcomp ()
   (~docs/page :title "Named Stores"
 
     (~docs/section :title "The Problem" :id "problem"
diff --git a/sx/sx/reactive-islands/phase2.sx b/sx/sx/geography/reactive/_lib/phase2.sx
similarity index 99%
rename from sx/sx/reactive-islands/phase2.sx
rename to sx/sx/geography/reactive/_lib/phase2.sx
index a06e6b96..4f68d2cc 100644
--- a/sx/sx/reactive-islands/phase2.sx
+++ b/sx/sx/geography/reactive/_lib/phase2.sx
@@ -2,7 +2,7 @@
 ;; Phase 2 Plan — remaining reactive features
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~reactive-islands/phase2/reactive-islands-phase2-content ()
+(defcomp ()
   (~docs/page :title "Phase 2: Completing the Reactive Toolkit"
 
     (~docs/section :title "Where we are" :id "where"
diff --git a/sx/sx/reactive-islands/plan.sx b/sx/sx/geography/reactive/_lib/plan.sx
similarity index 99%
rename from sx/sx/reactive-islands/plan.sx
rename to sx/sx/geography/reactive/_lib/plan.sx
index e313f864..e9fdb86d 100644
--- a/sx/sx/reactive-islands/plan.sx
+++ b/sx/sx/geography/reactive/_lib/plan.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~reactive-islands/plan/reactive-islands-plan-content
   ()
   (~docs/page
     :title "Reactive Islands Plan"
diff --git a/sx/sx/geography/reactive/_lib/test-runner-placeholder.sx b/sx/sx/geography/reactive/_lib/test-runner-placeholder.sx
new file mode 100644
index 00000000..d3868b2e
--- /dev/null
+++ b/sx/sx/geography/reactive/_lib/test-runner-placeholder.sx
@@ -0,0 +1 @@
+(defcomp () (div (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4") :data-sx-island "reactive-islands/test-runner" (p (~tw :tokens "text-stone-400 text-sm italic") "Loading tests...")))
diff --git a/sx/sx/geography/reactive/_lib/test-runner.sx b/sx/sx/geography/reactive/_lib/test-runner.sx
new file mode 100644
index 00000000..5839226f
--- /dev/null
+++ b/sx/sx/geography/reactive/_lib/test-runner.sx
@@ -0,0 +1 @@
+(defisland () (let ((results (signal nil)) (running (signal false))) (letrec ((run-tests (fn () (reset! running true) (let ((script-el (dom-query "script[data-for]")) (test-results (list))) (when script-el (let ((test-src (host-get script-el "textContent")) (parsed (let ((raw (host-get script-el "textContent")) (decoded (host-call raw "replaceAll" "&quot;" "\""))) (sx-parse (host-call decoded "replaceAll" "&amp;" "&"))))) (for-each (fn (expr) (when (and (list? expr) (not (empty? expr)) (= (type-of (first expr)) "symbol")) (let ((head (symbol-name (first expr)))) (cond (= head "defsuite") (for-each (fn (child) (when (and (list? child) (not (empty? child)) (= (type-of (first child)) "symbol") (= (symbol-name (first child)) "deftest")) (append! test-results (try-test (nth child 1) (last child))))) (slice expr 2)) (= head "deftest") (append! test-results (try-test (nth expr 1) (last expr))))))) parsed))) (reset! results test-results) (reset! running false)))) (try-test (fn (name body) (let ((result (cek-try (fn () (eval-expr body (global-env)) true) (fn (err) err)))) (if (= result true) {:pass true :error nil :name name} {:pass false :error (str result) :name name}))))) (run-tests) (div (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4") (div (~tw :tokens "flex items-center justify-between mb-3") (h4 (~tw :tokens "text-sm font-semibold text-stone-700") "Tests") (button (~tw :tokens "px-2 py-1 text-xs rounded bg-stone-200 hover:bg-stone-300 transition") :on-click (fn (e) (run-tests)) "Re-run")) (if (deref running) (p (~tw :tokens "text-stone-400 text-sm italic") "Running...") (if (nil? (deref results)) (p (~tw :tokens "text-stone-400 text-sm italic") "No test source found") (let ((r (deref results)) (pass-count (len (filter (fn (t) (get t "pass")) r))) (fail-count (len (filter (fn (t) (not (get t "pass"))) r)))) (div (~tw :tokens "space-y-2") (div (~tw :tokens "text-sm font-mono") (span :class (if (= fail-count 0) "text-emerald-600 font-semibold" "text-red-600 font-semibold") (str pass-count "/" (len r) " passed"))) (map (fn (t) (div (~tw :tokens "flex items-start gap-2 text-xs font-mono py-0.5") (span :class (if (get t "pass") "text-emerald-500" "text-red-500") (if (get t "pass") "✓" "✗")) (span (~tw :tokens "text-stone-600") (get t "name")) (when (get t "error") (span (~tw :tokens "text-red-400 ml-2") (get t "error"))))) r)))))))))
diff --git a/sx/sx/reactive-islands/test-temperature.sx b/sx/sx/geography/reactive/_lib/test-temperature.sx
similarity index 100%
rename from sx/sx/reactive-islands/test-temperature.sx
rename to sx/sx/geography/reactive/_lib/test-temperature.sx
diff --git a/sx/sx/geography/reactive/examples/counter/index.sx b/sx/sx/geography/reactive/examples/counter/index.sx
new file mode 100644
index 00000000..556ff522
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/counter/index.sx
@@ -0,0 +1,20 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Signal + Computed + Effect"
+    (p
+      "A signal holds a value. A computed derives from it. Click the buttons — the counter and doubled value update instantly, no server round-trip.")
+    (~reactive-islands/index/demo-counter :initial 0)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-counter")
+        "lisp"))
+    (p
+      (code "(deref count)")
+      " in a text position creates a reactive text node. When "
+      (code "count")
+      " changes, "
+      (em "only that text node")
+      " updates. "
+      (code "doubled")
+      " recomputes automatically. No diffing.")))
diff --git a/sx/sx/geography/reactive/examples/coverage/index.sx b/sx/sx/geography/reactive/examples/coverage/index.sx
new file mode 100644
index 00000000..86b1d6aa
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/coverage/index.sx
@@ -0,0 +1,142 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "React Feature Coverage"
+    (p
+      "Every React feature has an SX equivalent — most are simpler because signals are fine-grained.")
+    (div
+      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+      (table
+        (~tw :tokens "w-full text-left text-sm")
+        (thead
+          (tr
+            (~tw :tokens "border-b border-stone-200 bg-stone-100")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "React")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "SX")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Demo")))
+        (tbody
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "useState")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(signal value)")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#1"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "useMemo")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(computed (fn () ...))")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#1, #2"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "useEffect")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(effect (fn () ...))")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#3"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "useRef")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(dict \"current\" nil) + :ref")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#9"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "useCallback")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(fn (...) ...) — no dep arrays")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "N/A"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "className / style")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              ":class (str ...) :style (str ...)")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#10"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "Controlled inputs")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              ":bind signal")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#6"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "key prop")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              ":key value")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#5"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "createPortal")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(portal \"#target\" ...)")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#7"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "ErrorBoundary")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(error-boundary fallback ...)")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#8"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "Suspense + use()")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "(resource fn) + cond/deref")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#11"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "startTransition")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "schedule-idle + batch")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#12"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "Context / Redux")
+            (td
+              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
+              "def-store / use-store")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#13"))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "Virtual DOM / diffing")
+            (td
+              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
+              "N/A — fine-grained signals update exact DOM nodes")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "JSX / build step")
+            (td
+              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
+              "N/A — s-expressions are the syntax")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "Server Components")
+            (td
+              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
+              "N/A — aser mode already expands server-side")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
+          (tr
+            (~tw :tokens "border-b border-stone-100")
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "Concurrent rendering")
+            (td
+              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
+              "N/A — fine-grained updates are inherently incremental")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
+          (tr
+            (td (~tw :tokens "px-3 py-2 text-stone-700") "Hooks rules")
+            (td
+              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
+              "N/A — signals are values, no ordering rules")
+            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "")))))))
diff --git a/sx/sx/geography/reactive/examples/defisland/index.sx b/sx/sx/geography/reactive/examples/defisland/index.sx
new file mode 100644
index 00000000..9b92ac7d
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/defisland/index.sx
@@ -0,0 +1,21 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "How defisland Works"
+    (p
+      (code "defisland")
+      " creates a reactive component. Same calling convention as "
+      (code "defcomp")
+      " — keyword args, rest children — but with a reactive boundary. Inside an island, "
+      (code "deref")
+      " subscribes DOM nodes to signals.")
+    (~docs/code
+      :src (highlight
+        ";; Definition — same syntax as defcomp\n(defisland ~reactive-islands/demo/counter (&key initial)\n  (let ((count (signal (or initial 0))))\n    (div\n      (span (deref count))                          ;; reactive text node\n      (button :on-click (fn (e) (swap! count inc))  ;; event handler\n        \"+\"))))\n\n;; Usage — same as any component\n(~reactive-islands/demo/counter :initial 42)\n\n;; Server-side rendering:\n;; <div data-sx-island=\"counter\" data-sx-state='{\"initial\":42}'>\n;;   <span>42</span><button>+</button>\n;; </div>\n;;\n;; Client hydrates: signals + effects + event handlers attach"
+        "lisp"))
+    (p
+      "Each "
+      (code "deref")
+      " call registers the enclosing DOM node as a subscriber. Signal changes update "
+      (em "only")
+      " the subscribed nodes — no virtual DOM, no diffing, no component re-renders.")))
diff --git a/sx/sx/geography/reactive/examples/dynamic-class/index.sx b/sx/sx/geography/reactive/examples/dynamic-class/index.sx
new file mode 100644
index 00000000..e2dcf3c1
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/dynamic-class/index.sx
@@ -0,0 +1,39 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Dynamic Class and Style"
+    (p
+      "React uses "
+      (code "className")
+      " and "
+      (code "style")
+      " props with state. SX does the same — "
+      (code "(deref signal)")
+      " inside a "
+      (code ":class")
+      " or "
+      (code ":style")
+      " attribute creates a reactive binding. The attribute updates when the signal changes.")
+    (~reactive-islands/index/demo-dynamic-class)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-dynamic-class")
+        "lisp"))
+    (p
+      "React equivalent: "
+      (code "className={danger ? 'red' : 'green'}")
+      " and "
+      (code "style={{fontSize: size}}")
+      ". In SX the "
+      (code "str")
+      " + "
+      (code "if")
+      " + "
+      (code "deref")
+      " pattern handles it — no "
+      (code "classnames")
+      " library needed. For complex conditional classes, use a "
+      (code "computed")
+      " or a CSSX "
+      (code "defcomp")
+      " that returns a class string.")))
diff --git a/sx/sx/geography/reactive/examples/error-boundary/index.sx b/sx/sx/geography/reactive/examples/error-boundary/index.sx
new file mode 100644
index 00000000..a6c94d27
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/error-boundary/index.sx
@@ -0,0 +1,23 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Error Boundaries"
+    (p
+      "When an island's rendering or effect throws, "
+      (code "error-boundary")
+      " catches the error and renders a fallback. The fallback receives the error and a retry function. Partial effects created before the error are disposed automatically.")
+    (~reactive-islands/index/demo-error-boundary)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-error-boundary")
+        "lisp"))
+    (p
+      "React equivalent: "
+      (code "componentDidCatch")
+      " / "
+      (code "ErrorBoundary")
+      ". SX's version is simpler — one form, not a class. The "
+      (code "error-boundary")
+      " form is a render-dom special form in "
+      (code "adapter-dom.sx")
+      ".")))
diff --git a/sx/sx/geography/reactive/examples/event-bridge-demo/index.sx b/sx/sx/geography/reactive/examples/event-bridge-demo/index.sx
new file mode 100644
index 00000000..f84d4894
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/event-bridge-demo/index.sx
@@ -0,0 +1,21 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Event Bridge"
+    (p
+      "Server-rendered content inside an island (an htmx \"lake\") can communicate with island signals via DOM custom events. Buttons with "
+      (code "data-sx-emit")
+      " dispatch events that island effects catch.")
+    (~reactive-islands/index/demo-event-bridge)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-event-bridge")
+        "lisp"))
+    (p
+      "The "
+      (code "data-sx-emit")
+      " attribute is processed by the client engine — it adds a click handler that dispatches a CustomEvent with the JSON from "
+      (code "data-sx-emit-detail")
+      ". The event bubbles up to the island container where "
+      (code "bridge-event")
+      " catches it.")))
diff --git a/sx/sx/geography/reactive/examples/imperative/index.sx b/sx/sx/geography/reactive/examples/imperative/index.sx
new file mode 100644
index 00000000..251c9d3b
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/imperative/index.sx
@@ -0,0 +1,31 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Imperative Pattern"
+    (p
+      "For complex reactivity (dynamic classes, conditional text), use the imperative pattern: "
+      (code "create-text-node")
+      " + "
+      (code "effect")
+      " + "
+      (code "dom-set-text-content")
+      ".")
+    (~reactive-islands/index/demo-imperative)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-imperative")
+        "lisp"))
+    (p
+      "Two patterns exist: "
+      (strong "declarative")
+      " ("
+      (code "(span (deref sig))")
+      " — auto-reactive via "
+      (code "reactive-text")
+      ") and "
+      (strong "imperative")
+      " ("
+      (code "create-text-node")
+      " + "
+      (code "effect")
+      " — explicit, full control). Use declarative for simple text, imperative for dynamic classes, conditional DOM, or complex updates.")))
diff --git a/sx/sx/geography/reactive/examples/index.sx b/sx/sx/geography/reactive/examples/index.sx
new file mode 100644
index 00000000..e6372f0c
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/index.sx
@@ -0,0 +1,49 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Reactive Islands — Examples"
+    (~docs/section
+      :title "Live interactive islands"
+      :id "intro"
+      (p
+        (strong "Every example below is a live interactive island")
+        " — not a static code snippet. Click the buttons, type in the inputs. The signal runtime is defined in "
+        (code "signals.sx")
+        ", bootstrapped to JavaScript. No hand-written signal logic.")
+      (p
+        "Each island uses "
+        (code "defisland")
+        " with signals ("
+        (code "signal")
+        ", "
+        (code "deref")
+        ", "
+        (code "reset!")
+        ", "
+        (code "swap!")
+        "), derived values ("
+        (code "computed")
+        "), side effects ("
+        (code "effect")
+        "), and batch updates ("
+        (code "batch")
+        ")."))
+    (~docs/section
+      :title "Examples"
+      :id "examples"
+      (ol
+        (~tw :tokens "space-y-1")
+        (map
+          (fn
+            (item)
+            (li
+              (a
+                :href (get item "href")
+                :sx-get (get item "href")
+                :sx-target "#sx-content"
+                :sx-select "#sx-content"
+                :sx-swap "outerHTML"
+                :sx-push-url "true"
+                (~tw :tokens "text-violet-600 hover:underline")
+                (get item "label"))))
+          reactive-examples-nav-items)))))
diff --git a/sx/sx/geography/reactive/examples/input-binding/index.sx b/sx/sx/geography/reactive/examples/input-binding/index.sx
new file mode 100644
index 00000000..c2e525d3
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/input-binding/index.sx
@@ -0,0 +1,24 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Input Binding"
+    (p
+      "The "
+      (code ":bind")
+      " attribute creates a two-way link between a signal and a form element. Type in the input — the signal updates. Change the signal — the input updates. Works with text inputs, checkboxes, radios, textareas, and selects.")
+    (~reactive-islands/index/demo-input-binding)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-input-binding")
+        "lisp"))
+    (p
+      (code ":bind")
+      " detects the element type automatically — text inputs use "
+      (code "value")
+      " + "
+      (code "input")
+      " event, checkboxes use "
+      (code "checked")
+      " + "
+      (code "change")
+      " event. The effect only updates the DOM when the value actually changed, preventing cursor jump.")))
diff --git a/sx/sx/geography/reactive/examples/portal/index.sx b/sx/sx/geography/reactive/examples/portal/index.sx
new file mode 100644
index 00000000..c22f795e
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/portal/index.sx
@@ -0,0 +1,23 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Portals"
+    (p
+      "A "
+      (code "portal")
+      " renders children into a DOM node "
+      (em "outside")
+      " the island's subtree. Essential for modals, tooltips, and toasts — anything that must escape "
+      (code "overflow:hidden")
+      " or z-index stacking.")
+    (~reactive-islands/index/demo-portal)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-portal")
+        "lisp"))
+    (p
+      "The portal content lives in "
+      (code "#portal-root")
+      " (typically at the page body level), not inside the island. On island disposal, portal content is automatically removed from its target — the "
+      (code "register-in-scope")
+      " mechanism handles cleanup.")))
diff --git a/sx/sx/geography/reactive/examples/reactive-list/index.sx b/sx/sx/geography/reactive/examples/reactive-list/index.sx
new file mode 100644
index 00000000..cc7ee28f
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/reactive-list/index.sx
@@ -0,0 +1,22 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Reactive List"
+    (p
+      "When "
+      (code "map")
+      " is used with "
+      (code "(deref signal)")
+      " inside an island, it auto-upgrades to a reactive list. With "
+      (code ":key")
+      " attributes, existing DOM nodes are reused across updates — only additions, removals, and reorderings touch the DOM.")
+    (~reactive-islands/index/demo-reactive-list)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-reactive-list")
+        "lisp"))
+    (p
+      (code ":key")
+      " identifies each list item. When items change, the reconciler matches old and new keys — reusing existing DOM nodes, inserting new ones, and removing stale ones. Without keys, the list falls back to clear-and-rerender. "
+      (code "batch")
+      " groups the two signal writes into one update pass.")))
diff --git a/sx/sx/geography/reactive/examples/refs/index.sx b/sx/sx/geography/reactive/examples/refs/index.sx
new file mode 100644
index 00000000..d5b4b831
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/refs/index.sx
@@ -0,0 +1,25 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Refs — Imperative DOM Access"
+    (p
+      "The "
+      (code ":ref")
+      " attribute captures a DOM element handle into a dict. Use it for imperative operations: focusing, measuring, reading values.")
+    (~reactive-islands/index/demo-refs)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-refs")
+        "lisp"))
+    (p
+      "React equivalent: "
+      (code "useRef")
+      ". In SX, a ref is just "
+      (code "(dict \"current\" nil)")
+      " — no special API. The "
+      (code ":ref")
+      " attribute sets "
+      (code "(dict-set! ref \"current\" el)")
+      " when the element is created. Read it with "
+      (code "(get ref \"current\")")
+      ".")))
diff --git a/sx/sx/geography/reactive/examples/resource/index.sx b/sx/sx/geography/reactive/examples/resource/index.sx
new file mode 100644
index 00000000..e28ac490
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/resource/index.sx
@@ -0,0 +1,40 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Resource + Suspense Pattern"
+    (p
+      (code "resource")
+      " wraps an async operation into a signal with "
+      (code "loading")
+      "/"
+      (code "data")
+      "/"
+      (code "error")
+      " states. Combined with "
+      (code "cond")
+      " + "
+      (code "deref")
+      ", this is the suspense pattern — no special form needed.")
+    (~reactive-islands/index/demo-resource)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-resource")
+        "lisp"))
+    (p
+      "React equivalent: "
+      (code "Suspense")
+      " + "
+      (code "use()")
+      " or "
+      (code "useSWR")
+      ". SX doesn't need a special "
+      (code "suspense")
+      " form because "
+      (code "resource")
+      " returns a signal and "
+      (code "cond")
+      " + "
+      (code "deref")
+      " creates reactive conditional rendering. When the promise resolves, the signal updates and the "
+      (code "cond")
+      " branch switches automatically.")))
diff --git a/sx/sx/geography/reactive/examples/stopwatch/index.sx b/sx/sx/geography/reactive/examples/stopwatch/index.sx
new file mode 100644
index 00000000..5ba018b0
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/stopwatch/index.sx
@@ -0,0 +1,17 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Effect + Cleanup: Stopwatch"
+    (p
+      "Effects can return cleanup functions. This stopwatch starts a "
+      (code "set-interval")
+      " — the cleanup clears it when the running signal toggles off.")
+    (~reactive-islands/index/demo-stopwatch)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-stopwatch")
+        "lisp"))
+    (p
+      "Three effects, each tracking different signals. The timer effect's cleanup fires before each re-run — toggling "
+      (code "running")
+      " off clears the interval. No hook rules: effects can appear anywhere, in any order.")))
diff --git a/sx/sx/geography/reactive/examples/stores/index.sx b/sx/sx/geography/reactive/examples/stores/index.sx
new file mode 100644
index 00000000..7681367b
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/stores/index.sx
@@ -0,0 +1,31 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Shared Stores"
+    (p
+      "React uses "
+      (code "Context")
+      " or state management libraries for cross-component state. SX uses "
+      (code "def-store")
+      " / "
+      (code "use-store")
+      " — named signal containers that persist across island creation/destruction.")
+    (~reactive-islands/index/demo-store-writer)
+    (~reactive-islands/index/demo-store-reader)
+    (~docs/code
+      :src (highlight
+        (str
+          (component-source "~reactive-islands/index/demo-store-writer")
+          "\n\n"
+          (component-source "~reactive-islands/index/demo-store-reader"))
+        "lisp"))
+    (p
+      "React equivalent: "
+      (code "createContext")
+      " + "
+      (code "useContext")
+      " or Redux/Zustand. Stores are simpler — just named dicts of signals at page scope. "
+      (code "def-store")
+      " creates once, "
+      (code "use-store")
+      " retrieves. Stores survive island disposal but clear on full page navigation.")))
diff --git a/sx/sx/geography/reactive/examples/temperature/index.sx b/sx/sx/geography/reactive/examples/temperature/index.sx
new file mode 100644
index 00000000..5407f9be
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/temperature/index.sx
@@ -0,0 +1,26 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Temperature Converter"
+    (p
+      "Two derived values from one signal. Click to change Celsius — Fahrenheit updates reactively.")
+    (~reactive-islands/index/demo-temperature)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-temperature")
+        "lisp"))
+    (p
+      "The actual implementation uses "
+      (code "computed")
+      " for Fahrenheit: "
+      (code "(computed (fn () (+ (* (deref celsius) 1.8) 32)))")
+      ". The "
+      (code "(deref fahrenheit)")
+      " in the span creates a reactive text node that updates when celsius changes.")
+    (div
+      (~tw :tokens "mt-6")
+      (~reactive-islands/test-runner-placeholder)
+      (script
+        :type "text/sx-test"
+        :data-for "temperature"
+        "(defsuite \"temperature converter\" (deftest \"initial celsius is 20\" (let ((celsius (signal 20))) (assert-signal-value celsius 20))) (deftest \"computed fahrenheit = celsius * 1.8 + 32\" (let ((celsius (signal 20)) (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32))))) (assert-signal-value fahrenheit 68) (assert-computed-depends-on fahrenheit celsius))) (deftest \"+5 increments celsius\" (let ((celsius (signal 20)) (btn (mock-element \"button\"))) (mock-add-listener! btn \"click\" (fn (e) (swap! celsius (fn (c) (+ c 5))))) (simulate-click btn) (assert-signal-value celsius 25))) (deftest \"fahrenheit updates on celsius change\" (let ((celsius (signal 20)) (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32))))) (reset! celsius 0) (assert-signal-value fahrenheit 32) (reset! celsius 100) (assert-signal-value fahrenheit 212))) (deftest \"multiple clicks accumulate\" (let ((celsius (signal 20)) (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))) (btn (mock-element \"button\"))) (mock-add-listener! btn \"click\" (fn (e) (swap! celsius (fn (c) (+ c 5))))) (simulate-click btn) (simulate-click btn) (simulate-click btn) (assert-signal-value celsius 35) (assert-signal-value fahrenheit 95))))"))))
diff --git a/sx/sx/geography/reactive/examples/tests/index.sx b/sx/sx/geography/reactive/examples/tests/index.sx
new file mode 100644
index 00000000..cb148626
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/tests/index.sx
@@ -0,0 +1,14 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Test Suite"
+    (p
+      "17 tests verify the signal runtime against the spec. All pass in the Python test runner (which uses the hand-written evaluator with native platform primitives).")
+    (~docs/code
+      :src (highlight
+        ";; Signal basics (6 tests)\n(assert-true (signal? (signal 42)))\n(assert-equal 42 (deref (signal 42)))\n(assert-equal 5 (deref 5))          ;; non-signal passthrough\n\n;; reset! changes value\n(let ((s (signal 0)))\n  (reset! s 10)\n  (assert-equal 10 (deref s)))\n\n;; reset! does NOT notify when value unchanged (identical? check)\n\n;; Computed (3 tests)\n(let ((a (signal 3)) (b (signal 4))\n      (sum (computed (fn () (+ (deref a) (deref b))))))\n  (assert-equal 7 (deref sum))\n  (reset! a 10)\n  (assert-equal 14 (deref sum)))\n\n;; Effects (4 tests) — immediate run, re-run on change, dispose, cleanup\n;; Batch (1 test) — defers notifications, deduplicates subscribers\n;; defisland (3 tests) — creates island, callable, accepts children"
+        "lisp"))
+    (p
+      (~tw :tokens "mt-2 text-sm text-stone-500")
+      "Run: "
+      (code "python3 shared/sx/tests/run.py signals"))))
diff --git a/sx/sx/geography/reactive/examples/transition/index.sx b/sx/sx/geography/reactive/examples/transition/index.sx
new file mode 100644
index 00000000..874f4054
--- /dev/null
+++ b/sx/sx/geography/reactive/examples/transition/index.sx
@@ -0,0 +1,29 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Transition Pattern"
+    (p
+      "React's "
+      (code "startTransition")
+      " defers non-urgent updates so typing stays responsive. In SX: "
+      (code "schedule-idle")
+      " + "
+      (code "batch")
+      ". The filter runs during idle time, not blocking the input event.")
+    (~reactive-islands/index/demo-transition)
+    (~docs/code
+      :src (highlight
+        (component-source "~reactive-islands/index/demo-transition")
+        "lisp"))
+    (p
+      "React equivalent: "
+      (code "startTransition(() => setFiltered(...))")
+      ". SX uses "
+      (code "schedule-idle")
+      " ("
+      (code "requestIdleCallback")
+      " under the hood) to defer the expensive "
+      (code "filter")
+      " operation, and "
+      (code "batch")
+      " to group the result into one update. Fine-grained signals already avoid the jank that makes transitions critical in React — this pattern is for truly expensive computations.")))
diff --git a/sx/sx/reactive-islands/index.sx b/sx/sx/geography/reactive/index.sx
similarity index 56%
rename from sx/sx/reactive-islands/index.sx
rename to sx/sx/geography/reactive/index.sx
index 79425ea2..0ff098fa 100644
--- a/sx/sx/reactive-islands/index.sx
+++ b/sx/sx/geography/reactive/index.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~reactive-islands/index/reactive-islands-index-content
   ()
   (~docs/page
     :title "Reactive Islands"
@@ -587,570 +586,3 @@
               (td
                 (~tw :tokens "px-3 py-2 font-mono text-xs text-stone-500")
                 "schedule-idle + batch (no special form)"))))))))
-
-(defisland
-  ~reactive-islands/index/demo-counter
-  (&key initial)
-  (let
-    ((count (signal (or initial 0)))
-      (doubled (computed (fn () (* 2 (deref count))))))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (div
-        (~tw :tokens "flex items-center gap-4")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click (fn (e) (swap! count dec))
-          "−")
-        (span
-          (~tw :tokens "text-2xl font-bold text-violet-900 w-12 text-center")
-          (deref count))
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click (fn (e) (swap! count inc))
-          "+"))
-      (p
-        (~tw :tokens "text-sm text-stone-500 mt-2")
-        "doubled: "
-        (span (~tw :tokens "font-mono text-violet-700") (deref doubled))))))
-
-(defisland
-  ~reactive-islands/index/demo-temperature
-  ()
-  (let
-    ((celsius (signal 20))
-      (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (div
-          (~tw :tokens "flex items-center gap-2")
-          (button
-            (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
-            :on-click (fn (e) (swap! celsius (fn (c) (- c 5))))
-            "−5")
-          (span
-            (~tw :tokens "font-mono text-lg font-bold text-violet-900 w-16 text-center")
-            (deref celsius))
-          (button
-            (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
-            :on-click (fn (e) (swap! celsius (fn (c) (+ c 5))))
-            "+5")
-          (span (~tw :tokens "text-stone-500") "°C"))
-        (span (~tw :tokens "text-stone-400") "=")
-        (span
-          (~tw :tokens "font-mono text-lg font-bold text-violet-900")
-          (deref fahrenheit))
-        (span (~tw :tokens "text-stone-500") "°F")))))
-
-(defisland
-  ~reactive-islands/index/demo-imperative
-  ()
-  (let
-    ((count (signal 0))
-      (text-node (create-text-node "0"))
-      (_eff
-        (effect
-          (fn () (dom-set-text-content text-node (str (deref count)))))))
-    (div
-      (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4 my-4")
-      (p
-        (~tw :tokens "text-sm text-stone-600 mb-2")
-        "Imperative style — explicit "
-        (code "effect")
-        " + "
-        (code "create-text-node")
-        ":")
-      (div
-        (~tw :tokens "flex items-center gap-4")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-600 text-white text-sm font-medium hover:bg-stone-700")
-          :on-click (fn (e) (swap! count dec))
-          "−")
-        (span
-          (~tw :tokens "text-2xl font-bold text-stone-900 w-12 text-center")
-          text-node)
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-600 text-white text-sm font-medium hover:bg-stone-700")
-          :on-click (fn (e) (swap! count inc))
-          "+")))))
-
-(defisland
-  ~reactive-islands/index/demo-stopwatch
-  ()
-  (let
-    ((running (signal false))
-      (elapsed (signal 0))
-      (time-text (create-text-node "0.0s"))
-      (btn-text (create-text-node "Start"))
-      (_e1
-        (effect
-          (fn
-            ()
-            (when
-              (deref running)
-              (let
-                ((id (set-interval (fn () (swap! elapsed inc)) 100)))
-                (fn () (clear-interval id)))))))
-      (_e2
-        (effect
-          (fn
-            ()
-            (let
-              ((e (deref elapsed)))
-              (dom-set-text-content
-                time-text
-                (str (floor (/ e 10)) "." (mod e 10) "s"))))))
-      (_e3
-        (effect
-          (fn
-            ()
-            (dom-set-text-content
-              btn-text
-              (if (deref running) "Stop" "Start"))))))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (div
-        (~tw :tokens "flex items-center gap-4")
-        (span
-          (~tw :tokens "font-mono text-2xl font-bold text-violet-900 w-24 text-center")
-          time-text)
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click (fn (e) (swap! running not))
-          btn-text)
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-          :on-click (fn (e) (do (reset! running false) (reset! elapsed 0)))
-          "Reset")))))
-
-(defisland
-  ~reactive-islands/index/demo-reactive-list
-  ()
-  (let
-    ((next-id (signal 1))
-      (items (signal (list)))
-      (add-item
-        (fn
-          (e)
-          (batch
-            (fn
-              ()
-              (swap!
-                items
-                (fn
-                  (old)
-                  (append
-                    old
-                    (dict
-                      "id"
-                      (deref next-id)
-                      "text"
-                      (str "Item " (deref next-id))))))
-              (swap! next-id inc)))))
-      (remove-item
-        (fn
-          (id)
-          (swap!
-            items
-            (fn
-              (old)
-              (filter (fn (item) (not (= (get item "id") id))) old))))))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (div
-        (~tw :tokens "flex items-center gap-3 mb-3")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click add-item
-          "Add Item")
-        (span
-          (~tw :tokens "text-sm text-stone-500")
-          (deref (computed (fn () (len (deref items)))))
-          " items"))
-      (ul
-        (~tw :tokens "space-y-1")
-        (map
-          (fn
-            (item)
-            (li
-              :key (str (get item "id"))
-              (~tw :tokens "flex items-center justify-between bg-white rounded px-3 py-2 text-sm")
-              (span (get item "text"))
-              (button
-                (~tw :tokens "text-stone-400 hover:text-red-500 text-xs")
-                :on-click (fn (e) (remove-item (get item "id")))
-                "✕")))
-          (deref items))))))
-
-(defisland
-  ~reactive-islands/index/demo-input-binding
-  ()
-  (let
-    ((name (signal "")) (agreed (signal false)))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (input
-          :type "text"
-          :bind name
-          :placeholder "Type your name..."
-          (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-48"))
-        (span
-          (~tw :tokens "text-sm text-stone-600")
-          "Hello, "
-          (strong (deref name))
-          "!"))
-      (div
-        (~tw :tokens "flex items-center gap-2")
-        (input
-          :type "checkbox"
-          :bind agreed
-          :id "agree-cb"
-          (~tw :tokens "rounded border-stone-300"))
-        (label
-          :for "agree-cb"
-          (~tw :tokens "text-sm text-stone-600")
-          "I agree to the terms"))
-      (when
-        (deref agreed)
-        (p (~tw :tokens "text-sm text-green-700") "Thanks for agreeing!")))))
-
-(defisland
-  ~reactive-islands/index/demo-portal
-  ()
-  (let
-    ((open? (signal false)))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (button
-        (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-        :on-click (fn (e) (swap! open? not))
-        (if (deref open?) "Close Modal" "Open Modal"))
-      (portal
-        "#portal-root"
-        (when
-          (deref open?)
-          (div
-            (~tw :tokens "fixed inset-0 bg-black/50 flex items-center justify-center z-50")
-            :on-click (fn (e) (reset! open? false))
-            (div
-              (~tw :tokens "bg-white rounded-lg p-6 max-w-md shadow-xl")
-              :on-click (fn (e) (stop-propagation e))
-              (h2
-                (~tw :tokens "text-lg font-bold text-stone-800 mb-2")
-                "Portal Modal")
-              (p
-                (~tw :tokens "text-stone-600 text-sm mb-4")
-                "This content is rendered into "
-                (code "#portal-root")
-                " — outside the island's DOM subtree. It escapes overflow:hidden, z-index stacking, and layout constraints.")
-              (button
-                (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-                :on-click (fn (e) (reset! open? false))
-                "Close"))))))))
-
-(defisland
-  ~reactive-islands/index/demo-error-boundary
-  ()
-  (let
-    ((throw? (signal false)))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (div
-        (~tw :tokens "flex items-center gap-3 mb-3")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-red-600 text-white text-sm font-medium hover:bg-red-700")
-          :on-click (fn (e) (reset! throw? true))
-          "Trigger Error")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-          :on-click (fn (e) (reset! throw? false))
-          "Reset"))
-      (error-boundary
-        (fn
-          (err retry-fn)
-          (div
-            (~tw :tokens "p-3 bg-red-50 border border-red-200 rounded")
-            (p
-              (~tw :tokens "text-red-700 font-medium text-sm")
-              "Caught: "
-              (error-message err))
-            (button
-              (~tw :tokens "mt-2 px-3 py-1 rounded bg-red-600 text-white text-sm hover:bg-red-700")
-              :on-click (fn (e) (do (reset! throw? false) (invoke retry-fn)))
-              "Retry")))
-        (do
-          (when (deref throw?) (error "Intentional explosion!"))
-          (p
-            (~tw :tokens "text-sm text-green-700")
-            "Everything is fine. Click \"Trigger Error\" to throw."))))))
-
-(defisland
-  ~reactive-islands/index/demo-refs
-  ()
-  (let
-    ((my-ref (dict "current" nil)) (msg (signal "")))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
-      (input
-        :ref my-ref
-        :type "text"
-        :placeholder "I can be focused programmatically"
-        (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-64"))
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click (fn (e) (dom-focus (get my-ref "current")))
-          "Focus Input")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-          :on-click (fn
-            (e)
-            (let
-              ((el (get my-ref "current")))
-              (reset!
-                msg
-                (str
-                  "Tag: "
-                  (dom-tag-name el)
-                  ", value: \""
-                  (dom-get-prop el "value")
-                  "\""))))
-          "Read Input"))
-      (when
-        (not (= (deref msg) ""))
-        (p (~tw :tokens "text-sm text-stone-600 font-mono") (deref msg))))))
-
-(defisland
-  ~reactive-islands/index/demo-dynamic-class
-  ()
-  (let
-    ((danger (signal false)) (size (signal 16)))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click (fn (e) (swap! danger not))
-          (if (deref danger) "Safe mode" "Danger mode"))
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-          :on-click (fn (e) (swap! size (fn (s) (+ s 2))))
-          "Bigger")
-        (button
-          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-          :on-click (fn (e) (swap! size (fn (s) (max 10 (- s 2)))))
-          "Smaller"))
-      (div
-        :class (str
-          "p-3 rounded font-medium transition-colors "
-          (if
-            (deref danger)
-            "bg-red-100 text-red-800"
-            "bg-green-100 text-green-800"))
-        :style (str "font-size:" (deref size) "px")
-        "This element's class and style are reactive."))))
-
-(defisland
-  ~reactive-islands/index/demo-resource
-  ()
-  (let
-    ((data (resource (fn () (promise-delayed 1500 (dict "name" "Ada Lovelace" "role" "First Programmer" "year" 1843))))))
-    (div
-      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (cond
-        (get (deref data) "loading")
-        (div
-          (~tw :tokens "flex items-center gap-2 text-stone-500")
-          (span
-            (~tw :tokens "inline-block w-4 h-4 border-2 border-stone-300 border-t-violet-600 rounded-full animate-spin"))
-          (span (~tw :tokens "text-sm") "Loading..."))
-        (get (deref data) "error")
-        (div
-          (~tw :tokens "p-3 bg-red-50 border border-red-200 rounded")
-          (p
-            (~tw :tokens "text-red-700 text-sm")
-            "Error: "
-            (get (deref data) "error")))
-        :else (let
-          ((d (get (deref data) "data")))
-          (div
-            (~tw :tokens "space-y-1")
-            (p (~tw :tokens "font-bold text-stone-800") (get d "name"))
-            (p
-              (~tw :tokens "text-sm text-stone-600")
-              (get d "role")
-              " ("
-              (get d "year")
-              ")")))))))
-
-(defisland
-  ~reactive-islands/index/demo-transition
-  ()
-  (let
-    ((query (signal ""))
-      (all-items
-        (list
-          "Signals"
-          "Effects"
-          "Computed"
-          "Batch"
-          "Stores"
-          "Islands"
-          "Portals"
-          "Error Boundaries"
-          "Resources"
-          "Input Binding"
-          "Keyed Lists"
-          "Event Bridge"
-          "Reactive Text"
-          "Reactive Attrs"
-          "Reactive Fragments"
-          "Disposal"
-          "Hydration"
-          "CSSX"
-          "Macros"
-          "Refs"))
-      (filtered (signal (list)))
-      (pending (signal false)))
-    (reset! filtered all-items)
-    (let
-      ((_eff (effect (fn () (let ((q (lower (deref query)))) (if (= q "") (do (reset! pending false) (reset! filtered all-items)) (do (reset! pending true) (schedule-idle (fn () (batch (fn () (reset! filtered (filter (fn (item) (contains? (lower item) q)) all-items)) (reset! pending false))))))))))))
-      (div
-        (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
-        (div
-          (~tw :tokens "flex items-center gap-3")
-          (input
-            :type "text"
-            :bind query
-            :placeholder "Filter features..."
-            (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-48"))
-          (when
-            (deref pending)
-            (span (~tw :tokens "text-xs text-stone-400") "Filtering...")))
-        (ul
-          (~tw :tokens "space-y-1")
-          (map
-            (fn
-              (item)
-              (li
-                :key item
-                (~tw :tokens "text-sm text-stone-700 bg-white rounded px-3 py-1.5")
-                item))
-            (deref filtered)))))))
-
-(defisland
-  ~reactive-islands/index/demo-store-writer
-  ()
-  (let
-    ((store (def-store "demo-theme" (fn () (dict "color" (signal "violet") "dark" (signal false))))))
-    (div
-      (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4 my-2")
-      (p
-        (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
-        "Island A — Store Writer")
-      (div
-        (~tw :tokens "flex items-center gap-3")
-        (select
-          :bind (get store "color")
-          (~tw :tokens "px-2 py-1 rounded border border-stone-300 text-sm")
-          (option :value "violet" "Violet")
-          (option :value "blue" "Blue")
-          (option :value "green" "Green")
-          (option :value "red" "Red"))
-        (label
-          (~tw :tokens "flex items-center gap-1 text-sm text-stone-600")
-          (input
-            :type "checkbox"
-            :bind (get store "dark")
-            (~tw :tokens "rounded border-stone-300"))
-          "Dark mode")))))
-
-(defisland
-  ~reactive-islands/index/demo-store-reader
-  ()
-  (let
-    ((store (use-store "demo-theme")))
-    (div
-      (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4 my-2")
-      (p
-        (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
-        "Island B — Store Reader")
-      (div
-        :class (str
-          "p-3 rounded font-medium text-sm "
-          (if
-            (deref (get store "dark"))
-            (str
-              "bg-"
-              (deref (get store "color"))
-              "-900 text-"
-              (deref (get store "color"))
-              "-100")
-            (str
-              "bg-"
-              (deref (get store "color"))
-              "-100 text-"
-              (deref (get store "color"))
-              "-800")))
-        "Styled by signals from Island A"))))
-
-(defisland
-  ~reactive-islands/index/demo-event-bridge
-  ()
-  (let
-    ((messages (signal (list)))
-      (_eff
-        (effect
-          (fn
-            ()
-            (let
-              ((cb (host-callback (fn (e) (swap! messages (fn (old) (append old (host-get (event-detail e) "text"))))))))
-              (host-call (dom-document) "addEventListener" "inbox:message" cb)
-              (fn
-                ()
-                (host-call
-                  (dom-document)
-                  "removeEventListener"
-                  "inbox:message"
-                  cb)))))))
-    (div
-      (p
-        (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
-        "Event Bridge Demo")
-      (p
-        (~tw :tokens "text-sm text-stone-600 mb-2")
-        "The buttons below simulate server-rendered content dispatching events into the island.")
-      (div
-        (~tw :tokens "flex gap-2 mb-3")
-        (button
-          :data-sx-emit "inbox:message"
-          :data-sx-emit-detail "{\"text\":\"Hello from the lake!\"}"
-          (~tw :tokens "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700")
-          "Send \"Hello\"")
-        (button
-          :data-sx-emit "inbox:message"
-          :data-sx-emit-detail "{\"text\":\"Another message\"}"
-          (~tw :tokens "px-3 py-1.5 bg-blue-600 text-white rounded text-sm hover:bg-blue-700")
-          "Send \"Another\"")
-        (button
-          :on-click (fn (e) (reset! messages (list)))
-          (~tw :tokens "px-3 py-1.5 bg-stone-200 text-stone-700 rounded text-sm hover:bg-stone-300")
-          "Clear"))
-      (div
-        (~tw :tokens "min-h-12 p-3 rounded bg-stone-100 border border-stone-200")
-        (if
-          (empty? (deref messages))
-          (p (~tw :tokens "text-stone-400 text-sm") "No messages yet.")
-          (ul
-            (~tw :tokens "space-y-1")
-            (map
-              (fn
-                (msg)
-                (li (~tw :tokens "text-sm text-stone-700") (str "→ " msg)))
-              (deref messages))))))))
diff --git a/sx/sx/geography/scopes/_islands/demo-scope-basic.sx b/sx/sx/geography/scopes/_islands/demo-scope-basic.sx
new file mode 100644
index 00000000..9297442d
--- /dev/null
+++ b/sx/sx/geography/scopes/_islands/demo-scope-basic.sx
@@ -0,0 +1,20 @@
+(defcomp
+  ()
+  (div
+    (~tw :tokens "space-y-2")
+    (scope
+      "demo-theme"
+      :value "violet"
+      (div
+        (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
+        (p
+          (~tw :tokens "text-sm text-violet-800 font-semibold")
+          (str "Inside scope: theme = " (context "demo-theme")))
+        (p
+          (~tw :tokens "text-xs text-stone-500")
+          "scope creates a named scope. context reads it.")))
+    (div
+      (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
+      (p
+        (~tw :tokens "text-sm text-stone-600")
+        "Outside scope: no context available."))))
diff --git a/sx/sx/geography/scopes/_islands/demo-scope-dedup.sx b/sx/sx/geography/scopes/_islands/demo-scope-dedup.sx
new file mode 100644
index 00000000..0c236e6d
--- /dev/null
+++ b/sx/sx/geography/scopes/_islands/demo-scope-dedup.sx
@@ -0,0 +1,20 @@
+(defcomp
+  ()
+  (div
+    (~tw :tokens "space-y-2")
+    (div
+      (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
+      (p
+        (~tw :tokens "text-sm text-stone-700")
+        (collect! "demo-css-dedup" ".card { padding: 1rem }")
+        (collect! "demo-css-dedup" ".card { padding: 1rem }")
+        (collect! "demo-css-dedup" ".btn { color: blue }")
+        "Three collect! calls, two identical. Only unique values kept."))
+    (div
+      (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
+      (p
+        (~tw :tokens "text-sm text-violet-800 font-semibold")
+        (str "Collected: " (len (collected "demo-css-dedup")) " rules"))
+      (ul
+        (~tw :tokens "text-xs text-stone-600 list-disc pl-5")
+        (map (fn (r) (li (code r))) (collected "demo-css-dedup"))))))
diff --git a/sx/sx/geography/scopes/_islands/demo-scope-emit.sx b/sx/sx/geography/scopes/_islands/demo-scope-emit.sx
new file mode 100644
index 00000000..1fba3e16
--- /dev/null
+++ b/sx/sx/geography/scopes/_islands/demo-scope-emit.sx
@@ -0,0 +1,19 @@
+(defcomp
+  ()
+  (div
+    (~tw :tokens "space-y-2")
+    (scope
+      "demo-deps"
+      (div
+        (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
+        (p
+          (~tw :tokens "text-sm text-stone-700")
+          (emit! "demo-deps" "lodash")
+          (emit! "demo-deps" "react")
+          "Components emit their dependencies upward."))
+      (div
+        (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
+        (p (~tw :tokens "text-sm text-violet-800 font-semibold") "Emitted:")
+        (ul
+          (~tw :tokens "text-xs text-stone-600 list-disc pl-5")
+          (map (fn (d) (li (code d))) (emitted "demo-deps")))))))
diff --git a/sx/sx/geography/scopes/_islands/scopes-demo-example.sx b/sx/sx/geography/scopes/_islands/scopes-demo-example.sx
new file mode 100644
index 00000000..c0a3098f
--- /dev/null
+++ b/sx/sx/geography/scopes/_islands/scopes-demo-example.sx
@@ -0,0 +1,12 @@
+(defcomp
+  (&key demo src)
+  (div
+    (~tw :tokens "grid grid-cols-1 lg:grid-cols-2 gap-4 my-6 items-start")
+    (div
+      (~tw :tokens "border border-dashed border-stone-300 rounded-lg p-4 bg-stone-50 min-h-[80px]")
+      demo)
+    (div
+      (~tw :tokens "not-prose bg-stone-100 rounded-lg p-4 overflow-x-auto")
+      (pre
+        (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
+        (code src)))))
diff --git a/sx/sx/scopes.sx b/sx/sx/geography/scopes/index.sx
similarity index 75%
rename from sx/sx/scopes.sx
rename to sx/sx/geography/scopes/index.sx
index 9c93ad4d..8cb11797 100644
--- a/sx/sx/scopes.sx
+++ b/sx/sx/geography/scopes/index.sx
@@ -1,84 +1,4 @@
 (defcomp
-  ~geography/demo-scope-basic
-  ()
-  (div
-    (~tw :tokens "space-y-2")
-    (scope
-      "demo-theme"
-      :value "violet"
-      (div
-        (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
-        (p
-          (~tw :tokens "text-sm text-violet-800 font-semibold")
-          (str "Inside scope: theme = " (context "demo-theme")))
-        (p
-          (~tw :tokens "text-xs text-stone-500")
-          "scope creates a named scope. context reads it.")))
-    (div
-      (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
-      (p
-        (~tw :tokens "text-sm text-stone-600")
-        "Outside scope: no context available."))))
-
-(defcomp
-  ~geography/demo-scope-emit
-  ()
-  (div
-    (~tw :tokens "space-y-2")
-    (scope
-      "demo-deps"
-      (div
-        (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
-        (p
-          (~tw :tokens "text-sm text-stone-700")
-          (emit! "demo-deps" "lodash")
-          (emit! "demo-deps" "react")
-          "Components emit their dependencies upward."))
-      (div
-        (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
-        (p (~tw :tokens "text-sm text-violet-800 font-semibold") "Emitted:")
-        (ul
-          (~tw :tokens "text-xs text-stone-600 list-disc pl-5")
-          (map (fn (d) (li (code d))) (emitted "demo-deps")))))))
-
-(defcomp
-  ~geography/demo-scope-dedup
-  ()
-  (div
-    (~tw :tokens "space-y-2")
-    (div
-      (~tw :tokens "rounded-lg p-3 bg-stone-50 border border-stone-200")
-      (p
-        (~tw :tokens "text-sm text-stone-700")
-        (collect! "demo-css-dedup" ".card { padding: 1rem }")
-        (collect! "demo-css-dedup" ".card { padding: 1rem }")
-        (collect! "demo-css-dedup" ".btn { color: blue }")
-        "Three collect! calls, two identical. Only unique values kept."))
-    (div
-      (~tw :tokens "rounded-lg p-3 bg-violet-50 border border-violet-200")
-      (p
-        (~tw :tokens "text-sm text-violet-800 font-semibold")
-        (str "Collected: " (len (collected "demo-css-dedup")) " rules"))
-      (ul
-        (~tw :tokens "text-xs text-stone-600 list-disc pl-5")
-        (map (fn (r) (li (code r))) (collected "demo-css-dedup"))))))
-
-(defcomp
-  ~geography/scopes-demo-example
-  (&key demo src)
-  (div
-    (~tw :tokens "grid grid-cols-1 lg:grid-cols-2 gap-4 my-6 items-start")
-    (div
-      (~tw :tokens "border border-dashed border-stone-300 rounded-lg p-4 bg-stone-50 min-h-[80px]")
-      demo)
-    (div
-      (~tw :tokens "not-prose bg-stone-100 rounded-lg p-4 overflow-x-auto")
-      (pre
-        (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
-        (code src)))))
-
-(defcomp
-  ~geography/scopes-content
   ()
   (~docs/page
     :title "Scopes"
diff --git a/sx/sx/geography/spreads/_islands/demo-callout.sx b/sx/sx/geography/spreads/_islands/demo-callout.sx
new file mode 100644
index 00000000..0c38c1e8
--- /dev/null
+++ b/sx/sx/geography/spreads/_islands/demo-callout.sx
@@ -0,0 +1,11 @@
+(defcomp
+  (&key type)
+  (make-spread
+    (cond
+      (= type "info")
+      {:data-callout "info" :style "border-left:4px solid #3b82f6;padding:0.5rem 0.75rem;background:#eff6ff;border-radius:0.25rem"}
+      (= type "warning")
+      {:data-callout "warning" :style "border-left:4px solid #f59e0b;padding:0.5rem 0.75rem;background:#fffbeb;border-radius:0.25rem"}
+      (= type "success")
+      {:data-callout "success" :style "border-left:4px solid #10b981;padding:0.5rem 0.75rem;background:#ecfdf5;border-radius:0.25rem"}
+      :else {:data-callout "default" :style "border-left:4px solid #78716c;padding:0.5rem 0.75rem;background:#fafaf9;border-radius:0.25rem"})))
diff --git a/sx/sx/geography/spreads/_islands/demo-cssx-tw.sx b/sx/sx/geography/spreads/_islands/demo-cssx-tw.sx
new file mode 100644
index 00000000..06d02658
--- /dev/null
+++ b/sx/sx/geography/spreads/_islands/demo-cssx-tw.sx
@@ -0,0 +1,20 @@
+(defcomp
+  ()
+  (div
+    (~tw :tokens "space-y-3")
+    (div
+      (~tw :tokens "bg-violet-100 rounded-lg p-4")
+      (h4
+        (~tw :tokens "text-violet-800 font-semibold text-lg")
+        "Styled via ~cssx/tw")
+      (p
+        (~tw :tokens "text-stone-600 text-sm mt-1")
+        "Classes injected from spread child."))
+    (div
+      (~tw :tokens "bg-rose-50 rounded-lg p-4 border border-rose-200")
+      (h4
+        (~tw :tokens "text-rose-700 font-semibold text-lg")
+        "Different tokens")
+      (p
+        (~tw :tokens "text-stone-600 text-sm mt-1")
+        "CSS rules JIT-generated. No build step."))))
diff --git a/sx/sx/geography/spreads/_islands/demo-example.sx b/sx/sx/geography/spreads/_islands/demo-example.sx
new file mode 100644
index 00000000..fd9b8212
--- /dev/null
+++ b/sx/sx/geography/spreads/_islands/demo-example.sx
@@ -0,0 +1,12 @@
+(defcomp
+  (&key demo code)
+  (div
+    (~tw :tokens "grid grid-cols-1 lg:grid-cols-2 gap-4 my-6 items-start")
+    (div
+      (~tw :tokens "border border-dashed border-stone-300 rounded-lg p-4 bg-stone-50 min-h-[80px]")
+      demo)
+    (div
+      (~tw :tokens "not-prose bg-stone-100 rounded-lg p-4 overflow-x-auto")
+      (pre
+        (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
+        (code code)))))
diff --git a/sx/sx/geography/spreads/_islands/demo-reactive-spread.sx b/sx/sx/geography/spreads/_islands/demo-reactive-spread.sx
new file mode 100644
index 00000000..bd64355e
--- /dev/null
+++ b/sx/sx/geography/spreads/_islands/demo-reactive-spread.sx
@@ -0,0 +1,41 @@
+(defisland
+  ()
+  (let
+    ((colour (signal "violet")))
+    (div
+      (~tw
+        :tokens (str
+          "rounded-lg p-4 transition-all duration-300 bg-"
+          (deref colour)
+          "-100 border border-"
+          (deref colour)
+          "-300"))
+      (h4
+        (~tw
+          :tokens (str "text-" (deref colour) "-800 font-semibold text-lg"))
+        (str "Theme: " (deref colour)))
+      (p
+        (~tw :tokens "text-stone-600 text-sm mt-2 mb-3")
+        "Click to change theme. Reactive spreads surgically update classes.")
+      (div
+        (~tw :tokens "flex gap-2 flex-wrap")
+        (button
+          :on-click (fn (e) (reset! colour "violet"))
+          (~tw
+            :tokens "bg-violet-500 text-white px-3 py-1.5 rounded text-sm font-medium")
+          "Violet")
+        (button
+          :on-click (fn (e) (reset! colour "rose"))
+          (~tw
+            :tokens "bg-rose-500 text-white px-3 py-1.5 rounded text-sm font-medium")
+          "Rose")
+        (button
+          :on-click (fn (e) (reset! colour "amber"))
+          (~tw
+            :tokens "bg-amber-500 text-white px-3 py-1.5 rounded text-sm font-medium")
+          "Amber")
+        (button
+          :on-click (fn (e) (reset! colour "emerald"))
+          (~tw
+            :tokens "bg-emerald-500 text-white px-3 py-1.5 rounded text-sm font-medium")
+          "Emerald")))))
diff --git a/sx/sx/geography/spreads/_islands/demo-semantic-vars.sx b/sx/sx/geography/spreads/_islands/demo-semantic-vars.sx
new file mode 100644
index 00000000..fd1c45b7
--- /dev/null
+++ b/sx/sx/geography/spreads/_islands/demo-semantic-vars.sx
@@ -0,0 +1,16 @@
+(defcomp
+  ()
+  (let
+    ((card (~tw :tokens "bg-stone-50 rounded-lg p-4 shadow-sm border border-stone-200"))
+      (heading (~tw :tokens "text-violet-700 text-lg font-bold"))
+      (body-text (~tw :tokens "text-stone-600 text-sm mt-1")))
+    (div
+      (~tw :tokens "space-y-3")
+      (div
+        card
+        (h4 heading "First Card")
+        (p body-text "Named spreads bound with let."))
+      (div
+        card
+        (h4 heading "Second Card")
+        (p body-text "Same variables, consistent look.")))))
diff --git a/sx/sx/geography/spreads/_islands/demo-spread-basic.sx b/sx/sx/geography/spreads/_islands/demo-spread-basic.sx
new file mode 100644
index 00000000..d55d193f
--- /dev/null
+++ b/sx/sx/geography/spreads/_islands/demo-spread-basic.sx
@@ -0,0 +1,13 @@
+(defcomp
+  ()
+  (div
+    (~tw :tokens "space-y-3")
+    (div
+      (~geography/demo-callout :type "info")
+      (p (~tw :tokens "text-sm") "Info — styled by its child."))
+    (div
+      (~geography/demo-callout :type "warning")
+      (p (~tw :tokens "text-sm") "Warning — same component, different type."))
+    (div
+      (~geography/demo-callout :type "success")
+      (p (~tw :tokens "text-sm") "Success — child tells parent how to look."))))
diff --git a/sx/sx/spreads.sx b/sx/sx/geography/spreads/index.sx
similarity index 76%
rename from sx/sx/spreads.sx
rename to sx/sx/geography/spreads/index.sx
index da791ca3..990a4f2e 100644
--- a/sx/sx/spreads.sx
+++ b/sx/sx/geography/spreads/index.sx
@@ -1,130 +1,4 @@
 (defcomp
-  ~geography/demo-example
-  (&key demo code)
-  (div
-    (~tw :tokens "grid grid-cols-1 lg:grid-cols-2 gap-4 my-6 items-start")
-    (div
-      (~tw :tokens "border border-dashed border-stone-300 rounded-lg p-4 bg-stone-50 min-h-[80px]")
-      demo)
-    (div
-      (~tw :tokens "not-prose bg-stone-100 rounded-lg p-4 overflow-x-auto")
-      (pre
-        (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
-        (code code)))))
-
-(defcomp
-  ~geography/demo-callout
-  (&key type)
-  (make-spread
-    (cond
-      (= type "info")
-      {:data-callout "info" :style "border-left:4px solid #3b82f6;padding:0.5rem 0.75rem;background:#eff6ff;border-radius:0.25rem"}
-      (= type "warning")
-      {:data-callout "warning" :style "border-left:4px solid #f59e0b;padding:0.5rem 0.75rem;background:#fffbeb;border-radius:0.25rem"}
-      (= type "success")
-      {:data-callout "success" :style "border-left:4px solid #10b981;padding:0.5rem 0.75rem;background:#ecfdf5;border-radius:0.25rem"}
-      :else {:data-callout "default" :style "border-left:4px solid #78716c;padding:0.5rem 0.75rem;background:#fafaf9;border-radius:0.25rem"})))
-
-(defcomp
-  ~geography/demo-spread-basic
-  ()
-  (div
-    (~tw :tokens "space-y-3")
-    (div
-      (~geography/demo-callout :type "info")
-      (p (~tw :tokens "text-sm") "Info — styled by its child."))
-    (div
-      (~geography/demo-callout :type "warning")
-      (p (~tw :tokens "text-sm") "Warning — same component, different type."))
-    (div
-      (~geography/demo-callout :type "success")
-      (p (~tw :tokens "text-sm") "Success — child tells parent how to look."))))
-
-(defcomp
-  ~geography/demo-cssx-tw
-  ()
-  (div
-    (~tw :tokens "space-y-3")
-    (div
-      (~tw :tokens "bg-violet-100 rounded-lg p-4")
-      (h4
-        (~tw :tokens "text-violet-800 font-semibold text-lg")
-        "Styled via ~cssx/tw")
-      (p
-        (~tw :tokens "text-stone-600 text-sm mt-1")
-        "Classes injected from spread child."))
-    (div
-      (~tw :tokens "bg-rose-50 rounded-lg p-4 border border-rose-200")
-      (h4
-        (~tw :tokens "text-rose-700 font-semibold text-lg")
-        "Different tokens")
-      (p
-        (~tw :tokens "text-stone-600 text-sm mt-1")
-        "CSS rules JIT-generated. No build step."))))
-
-(defcomp
-  ~geography/demo-semantic-vars
-  ()
-  (let
-    ((card (~tw :tokens "bg-stone-50 rounded-lg p-4 shadow-sm border border-stone-200"))
-      (heading (~tw :tokens "text-violet-700 text-lg font-bold"))
-      (body-text (~tw :tokens "text-stone-600 text-sm mt-1")))
-    (div
-      (~tw :tokens "space-y-3")
-      (div
-        card
-        (h4 heading "First Card")
-        (p body-text "Named spreads bound with let."))
-      (div
-        card
-        (h4 heading "Second Card")
-        (p body-text "Same variables, consistent look.")))))
-
-(defisland
-  ~geography/demo-reactive-spread
-  ()
-  (let
-    ((colour (signal "violet")))
-    (div
-      (~tw
-        :tokens (str
-          "rounded-lg p-4 transition-all duration-300 bg-"
-          (deref colour)
-          "-100 border border-"
-          (deref colour)
-          "-300"))
-      (h4
-        (~tw
-          :tokens (str "text-" (deref colour) "-800 font-semibold text-lg"))
-        (str "Theme: " (deref colour)))
-      (p
-        (~tw :tokens "text-stone-600 text-sm mt-2 mb-3")
-        "Click to change theme. Reactive spreads surgically update classes.")
-      (div
-        (~tw :tokens "flex gap-2 flex-wrap")
-        (button
-          :on-click (fn (e) (reset! colour "violet"))
-          (~tw
-            :tokens "bg-violet-500 text-white px-3 py-1.5 rounded text-sm font-medium")
-          "Violet")
-        (button
-          :on-click (fn (e) (reset! colour "rose"))
-          (~tw
-            :tokens "bg-rose-500 text-white px-3 py-1.5 rounded text-sm font-medium")
-          "Rose")
-        (button
-          :on-click (fn (e) (reset! colour "amber"))
-          (~tw
-            :tokens "bg-amber-500 text-white px-3 py-1.5 rounded text-sm font-medium")
-          "Amber")
-        (button
-          :on-click (fn (e) (reset! colour "emerald"))
-          (~tw
-            :tokens "bg-emerald-500 text-white px-3 py-1.5 rounded text-sm font-medium")
-          "Emerald")))))
-
-(defcomp
-  ~geography/spreads-content
   ()
   (~docs/page
     :title "Spreads"
diff --git a/sx/sx/handlers/graphql-api.sx b/sx/sx/handlers/graphql-api.sx
new file mode 100644
index 00000000..ab672ead
--- /dev/null
+++ b/sx/sx/handlers/graphql-api.sx
@@ -0,0 +1,24 @@
+
+;; GraphQL playground API handler — returns raw text for innerHTML injection
+
+(defhandler
+  gql-parse-demo
+  :path "/sx/(applications.(graphql.(api.parse-demo)))"
+  :method :get
+  :returns "text"
+  (&key source)
+  (if
+    (or (nil? source) (empty? source))
+    "<p class=\"text-sm text-gray-400 italic\">Enter a GraphQL query and click Parse.</p>"
+    (let
+      ((doc (gql-parse source)))
+      (str
+        "<div class=\"space-y-4\">"
+        "<div><h4 class=\"text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2\">AST</h4>"
+        "<pre class=\"bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto\">"
+        (escape (sx-serialize doc))
+        "</pre></div>"
+        "<div><h4 class=\"text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2\">Serialized</h4>"
+        "<pre class=\"bg-gray-900 text-amber-400 p-4 rounded-lg text-sm overflow-x-auto\">"
+        (escape (gql-serialize doc))
+        "</pre></div></div>"))))
diff --git a/sx/sx/handlers/htmx-api.sx b/sx/sx/handlers/htmx-api.sx
new file mode 100644
index 00000000..b8f58239
--- /dev/null
+++ b/sx/sx/handlers/htmx-api.sx
@@ -0,0 +1,138 @@
+;; htmx demo API handlers — return HTML fragments for hx-* demos
+
+;; Click to load
+(defhandler
+  ex-click
+  :path "/sx/(applications.(htmx.(api.click)))"
+  :method :get
+  :returns "element"
+  (&key)
+  (div
+    (~tw :tokens "space-y-2")
+    (p (~tw :tokens "text-stone-800 font-medium") "Content loaded!")
+    (p
+      (~tw :tokens "text-stone-500 text-sm")
+      "Fetched from the server via hx-get")))
+
+;; Active search
+(defhandler
+  ex-search
+  :path "/sx/(applications.(htmx.(api.search)))"
+  :method :get
+  :returns "element"
+  (&key q)
+  (let
+    ((query (or q "")))
+    (let
+      ((items (list {:desc "GET request" :name "hx-get"} {:desc "POST request" :name "hx-post"} {:desc "Swap strategy" :name "hx-swap"} {:desc "Target element" :name "hx-target"} {:desc "Event trigger" :name "hx-trigger"} {:desc "Confirm dialog" :name "hx-confirm"} {:desc "Progressive enhancement" :name "hx-boost"} {:desc "CSS selector filter" :name "hx-select"})))
+      (let
+        ((filtered (if (= query "") (list) (filter (fn (item) (contains? (downcase (get item :name)) (downcase query))) items))))
+        (if
+          (empty? filtered)
+          (p
+            (~tw :tokens "text-gray-400 italic py-2")
+            (str "No results for \"" query "\""))
+          (ul
+            (~tw :tokens "divide-y divide-gray-100")
+            (map
+              (fn
+                (item)
+                (li
+                  (~tw :tokens "py-2 px-1")
+                  (span
+                    (~tw :tokens "font-medium text-gray-800")
+                    (get item :name))
+                  (span
+                    (~tw :tokens "text-sm text-gray-500 ml-2")
+                    (get item :desc))))
+              filtered)))))))
+
+;; Tabs
+(defhandler
+  ex-tab
+  :path "/sx/(applications.(htmx.(api.tab)))"
+  :method :get
+  :returns "element"
+  (&key tab)
+  (let
+    ((tab (or tab "overview")))
+    (cond
+      (= tab "overview")
+      (div
+        (~tw :tokens "p-4 space-y-2")
+        (h3 (~tw :tokens "font-semibold text-stone-800") "Overview")
+        (p
+          (~tw :tokens "text-stone-600 text-sm")
+          "htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes."))
+      (= tab "features")
+      (div
+        (~tw :tokens "p-4 space-y-2")
+        (h3 (~tw :tokens "font-semibold text-stone-800") "Features")
+        (ul
+          (~tw
+            :tokens "list-disc list-inside text-sm text-stone-600 space-y-1")
+          (li "Any element, any event")
+          (li "Multiple swap strategies")
+          (li "CSS transition support")
+          (li "Out-of-band swaps")))
+      (= tab "code")
+      (div
+        (~tw :tokens "p-4")
+        (pre
+          (~tw :tokens "text-sm bg-stone-100 rounded p-3")
+          (code "(button :hx-get \"/api\" :hx-target \"#out\"\n  \"Load\")")))
+      true
+      (div (~tw :tokens "p-4 text-stone-400") "Unknown tab"))))
+
+;; Delete item — returns empty fragment to remove the element
+(defhandler
+  ex-delete
+  :path "/sx/(applications.(htmx.(api.delete)))"
+  :method :delete
+  :csrf false
+  :returns "element"
+  (&key)
+  (<>))
+
+;; Form submission
+(defhandler
+  ex-form
+  :path "/sx/(applications.(htmx.(api.form)))"
+  :method :post
+  :csrf false
+  :returns "element"
+  (&key name email)
+  (div
+    (~tw :tokens "p-4 bg-green-50 border border-green-200 rounded-lg")
+    (p
+      (~tw :tokens "text-green-800 font-medium")
+      (str "Hello, " (or name "stranger") "!"))
+    (p
+      (~tw :tokens "text-sm text-green-600 mt-1")
+      (str "Email: " (or email "not provided")))))
+
+;; Slow endpoint for indicator demo
+(defhandler
+  ex-slow
+  :path "/sx/(applications.(htmx.(api.slow)))"
+  :method :get
+  :returns "element"
+  (&key)
+  (div
+    (~tw :tokens "p-4 bg-amber-50 border border-amber-200 rounded-lg")
+    (p (~tw :tokens "text-amber-800 font-medium") "Slow response received")
+    (p
+      (~tw :tokens "text-sm text-amber-600 mt-1")
+      "This response was delayed")))
+
+;; Append item (beforeend swap demo)
+(defhandler
+  ex-append
+  :path "/sx/(applications.(htmx.(api.append)))"
+  :method :post
+  :csrf false
+  :returns "element"
+  (&key)
+  (div
+    (~tw :tokens "p-2 border-b border-gray-100 text-sm text-stone-700")
+    "New item appended"))
diff --git a/sx/sx/handlers/hyperscript-api.sx b/sx/sx/handlers/hyperscript-api.sx
index f7429f9c..6f48dae9 100644
--- a/sx/sx/handlers/hyperscript-api.sx
+++ b/sx/sx/handlers/hyperscript-api.sx
@@ -1,7 +1,6 @@
 ;; _hyperscript playground API handler
 
 (defhandler
-  hs-compile
   :path "/sx/(applications.(hyperscript.(api.compile)))"
   :method :post
   :csrf false
diff --git a/sx/sx/handlers/spec-detail.sx b/sx/sx/handlers/spec-detail.sx
index 5a3f9e13..9329fafe 100644
--- a/sx/sx/handlers/spec-detail.sx
+++ b/sx/sx/handlers/spec-detail.sx
@@ -1,5 +1,4 @@
 (defhandler
-  spec-detail
   :path "/sx/api/spec-detail"
   :method :get
   :returns "element"
diff --git a/sx/sx/home/index.sx b/sx/sx/home/index.sx
new file mode 100644
index 00000000..ddcab009
--- /dev/null
+++ b/sx/sx/home/index.sx
@@ -0,0 +1,4 @@
+;; Docs page content — fully self-contained, no Python intermediaries
+(defcomp ()
+  (div :id "main-content" (~tw :tokens "max-w-3xl mx-auto px-4 py-6")
+    (~home/stepper)))
diff --git a/sx/sx/home-stepper.sx b/sx/sx/home/stepper.sx
similarity index 99%
rename from sx/sx/home-stepper.sx
rename to sx/sx/home/stepper.sx
index 3e29aecd..0b49a180 100644
--- a/sx/sx/home-stepper.sx
+++ b/sx/sx/home/stepper.sx
@@ -1,5 +1,4 @@
 (defisland
-  ~home/stepper
   ()
   (let
     ((source "(div (~tw :tokens \"text-center\")\n  (h1 (~tw :tokens \"text-3xl font-bold mb-2\")\n    (span (~tw :tokens \"text-rose-500\") \"the \")\n    (span (~tw :tokens \"text-amber-500\") \"joy \")\n    (span (~tw :tokens \"text-emerald-500\") \"of \")\n    (span (~tw :tokens \"text-violet-600 text-4xl\") \"sx\")))")
diff --git a/sx/sx/hyperscript-spec.sx b/sx/sx/hyperscript-spec.sx
index 5e59940a..817bf290 100644
--- a/sx/sx/hyperscript-spec.sx
+++ b/sx/sx/hyperscript-spec.sx
@@ -2,7 +2,6 @@
 ;; SX Implementation — Formal Reference
 
 (defcomp
-  ~hyperscript/spec-content
   ()
   (~docs/page
     :title "_hyperscript Language Specification"
diff --git a/sx/sx/hyperscript.sx b/sx/sx/hyperscript.sx
deleted file mode 100644
index bbe41dff..00000000
--- a/sx/sx/hyperscript.sx
+++ /dev/null
@@ -1,219 +0,0 @@
-;; _hyperscript Playground
-;; Lives under Applications: /sx/(applications.(hyperscript))
-
-;; ── Compile result component (server-side rendered) ─────────────
-(defcomp
-  ~hyperscript/compile-result
-  (&key source)
-  (if
-    (or (nil? source) (empty? source))
-    (p
-      (~tw :tokens "text-sm text-gray-400 italic")
-      "Enter some hyperscript and click Compile")
-    (let
-      ((compiled (hs-to-sx-from-source source)))
-      (div
-        (~tw :tokens "space-y-4")
-        (div
-          (h4
-            (~tw
-              :tokens "text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2")
-            "Compiled SX")
-          (pre
-            (~tw
-              :tokens "bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto")
-            (sx-serialize compiled)))
-        (div
-          (h4
-            (~tw
-              :tokens "text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2")
-            "Parse Tree")
-          (pre
-            (~tw
-              :tokens "bg-gray-900 text-amber-400 p-4 rounded-lg text-sm overflow-x-auto")
-            (sx-serialize (hs-compile source))))))))
-
-;; ── Compile handler (POST endpoint) ─────────────────────────────
-(defcomp
-  ~hyperscript/example
-  (&key source description)
-  (div
-    (~tw :tokens "border border-gray-200 rounded-lg p-4 mb-4")
-    (when
-      description
-      (p (~tw :tokens "text-sm text-gray-600 mb-2") description))
-    (div
-      (~tw :tokens "flex gap-4 items-start mb-3")
-      (div
-        (~tw :tokens "flex-1")
-        (h4
-          (~tw
-            :tokens "text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1")
-          "Source")
-        (pre
-          (~tw
-            :tokens "bg-gray-50 text-gray-900 p-3 rounded text-sm font-mono whitespace-pre-wrap break-words")
-          (str "_=\"" source "\"")))
-      (when
-        (string-contains? source "on click")
-        (div
-          (~tw :tokens "flex-shrink-0 pt-5")
-          (button
-            (~tw
-              :tokens "px-4 py-2 border border-violet-300 rounded-lg text-sm font-medium text-violet-700 hover:bg-violet-50 transition-colors")
-            :_ source
-            "Try it"))))
-    (~hyperscript/compile-result :source source)))
-
-;; ── Pipeline example component ──────────────────────────────────
-(defcomp
-  ~hyperscript/playground
-  ()
-  (div
-    (~tw :tokens "space-y-4")
-    (form
-      :sx-post "/sx/(applications.(hyperscript.(api.compile)))"
-      :sx-target "#hs-playground-result"
-      :sx-swap "innerHTML"
-      (div
-        (label
-          (~tw :tokens "block text-sm font-medium text-gray-700 mb-1")
-          "Hyperscript source")
-        (textarea
-          :name "source"
-          (~tw
-            :tokens "w-full h-24 font-mono text-sm p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-transparent")
-          "on click add .active to me"))
-      (div
-        (~tw :tokens "mt-2")
-        (button
-          :type "submit"
-          (~tw
-            :tokens "px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 text-sm font-medium")
-          "Compile")))
-    (div
-      :id "hs-playground-result"
-      (~hyperscript/compile-result :source "on click add .active to me"))))
-
-;; ── Playground island ───────────────────────────────────────────
-(defcomp
-  ~hyperscript/live-demo
-  ()
-  (div
-    (~tw :tokens "space-y-4")
-    (style
-      "\n      .bg-violet-600 { background-color: rgb(124 58 237); }\n      .text-white { color: white; }\n      .animate-bounce { animation: bounce 1s infinite; }\n      @keyframes bounce {\n        0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }\n        50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }\n      }\n    ")
-    (p
-      (~tw :tokens "text-sm text-gray-600")
-      "These buttons have "
-      (code "_=\"...\"")
-      " attributes — hyperscript compiled to SX and activated at boot.")
-    (div
-      (~tw :tokens "flex gap-3 items-center")
-      (button
-        (~tw
-          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
-        :_ "on click toggle .bg-violet-600 on me then toggle .text-white on me"
-        "Toggle Color")
-      (button
-        (~tw
-          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
-        :_ "on click add .animate-bounce to me then wait 1s then remove .animate-bounce from me"
-        "Bounce")
-      (span
-        (~tw :tokens "text-sm text-gray-500")
-        :id "click-counter"
-        "0 clicks"))
-    (div
-      (~tw :tokens "mt-2")
-      (button
-        (~tw
-          :tokens "px-4 py-2 border border-gray-300 rounded-lg text-sm transition-colors")
-        :_ "on click increment @data-count on me then set #click-counter's innerHTML to my @data-count"
-        :data-count "0"
-        "Count Clicks"))))
-
-;; ── Live demo: actual hyperscript running ───────────────────────
-(defcomp
-  ~hyperscript/playground-content
-  ()
-  (~docs/page
-    :title "_hyperscript Playground"
-    (p
-      :class "text-lg text-gray-600 mb-6"
-      "Compile "
-      (code "_hyperscript")
-      " to SX expressions. "
-      "The same "
-      (code "_=\"...\"")
-      " syntax, compiled to cached bytecode instead of re-parsed every page load.")
-    (~docs/section
-      :title "Interactive Playground"
-      :id "playground"
-      (p
-        "Edit the hyperscript source and click Compile to see the tokenized, parsed, and compiled SX output.")
-      (~hyperscript/playground))
-    (~docs/section
-      :title "Live Demo"
-      :id "live-demo"
-      (p
-        "These buttons have "
-        (code "_=\"...\"")
-        " attributes — hyperscript compiled to SX and activated at boot.")
-      (~hyperscript/live-demo))
-    (~docs/section
-      :title "Pipeline"
-      :id "pipeline"
-      (p "Every hyperscript string passes through three stages:")
-      (ol
-        :class "list-decimal list-inside space-y-1 text-sm text-gray-700 mb-4"
-        (li
-          (strong "Tokenize")
-          " — source string to typed token stream (keywords, classes, ids, operators, strings)")
-        (li
-          (strong "Parse")
-          " — token stream to AST (commands, expressions, features)")
-        (li
-          (strong "Compile")
-          " — AST to SX expressions targeting "
-          (code "web/lib/dom.sx")
-          " primitives"))
-      (p
-        "The compiled SX is wrapped in "
-        (code "(fn (me) ...)")
-        " and evaluated with "
-        (code "me")
-        " bound to the element. Hyperscript variables are visible to "
-        (code "eval (sx-expr)")
-        " escapes."))
-    (~docs/section
-      :title "Examples"
-      :id "examples"
-      (style
-        "\n      button.active { background-color: #7c3aed !important; color: white !important; border-color: #7c3aed !important; }\n      button.active:hover { background-color: #6d28d9 !important; }\n      button.light { background-color: #fef3c7 !important; color: #92400e !important; border-color: #f59e0b !important; }\n      button.light:hover { background-color: #fde68a !important; }\n      button.dark { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }\n      button.dark:hover { background-color: #334155 !important; }\n      .animate-bounce { animation: bounce 1s; }\n      @keyframes bounce {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-25%); }\n      }")
-      (~hyperscript/example
-        :source "on click add .active to me"
-        :description "Event handler: click adds a CSS class")
-      (~hyperscript/example
-        :source "on click toggle between .light and .dark on me"
-        :description "Toggle between two states")
-      (~hyperscript/example
-        :source "on click set my innerHTML to eval (str \"Hello from \" (+ 2 3) \" worlds\")"
-        :description "SX escape: evaluate SX expressions from hyperscript")
-      (~hyperscript/example
-        :source "on click put \"<b>Rendered!</b>\" into #target"
-        :description "Target another element by CSS selector")
-      (div
-        :id "target"
-        (~tw
-          :tokens "border border-dashed border-gray-300 rounded-lg p-3 min-h-[2rem] text-sm text-gray-400")
-        "← render target")
-      (~hyperscript/example
-        :source "def double(n) return n + n end"
-        :description "Define reusable functions")
-      (~hyperscript/example
-        :source "on click repeat 3 times add .active to me then wait 300ms then remove .active from me then wait 300ms end"
-        :description "Iteration: repeat with timed animation (continuation after loop pending)")
-      (~hyperscript/example
-        :source "behavior Draggable on mousedown add .dragging to me end on mouseup remove .dragging from me end end"
-        :description "Reusable behaviors — install on any element"))))
\ No newline at end of file
diff --git a/sx/sx/language/bootstrapper/index.sx b/sx/sx/language/bootstrapper/index.sx
new file mode 100644
index 00000000..5ab6aad5
--- /dev/null
+++ b/sx/sx/language/bootstrapper/index.sx
@@ -0,0 +1,79 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Bootstrappers"
+    (div
+      (~tw :tokens "space-y-6")
+      (p
+        (~tw :tokens "text-lg text-stone-600")
+        "A bootstrapper reads the canonical "
+        (code (~tw :tokens "text-violet-700 text-sm") ".sx")
+        " specification files and emits a native implementation for a specific target. "
+        "The spec files are the single source of truth — bootstrappers are the bridge from specification to runnable code.")
+      (p
+        (~tw :tokens "text-stone-600")
+        "Each bootstrapper is a compiler that understands the restricted SX subset used in the spec files "
+        "(roughly 20 special forms and 80 primitives) and translates it into idiomatic target code. "
+        "Platform-specific operations (DOM access, HTTP, timers) are emitted as native implementations "
+        "rather than translated from SX.")
+      (div
+        (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+        (table
+          (~tw :tokens "w-full text-left text-sm")
+          (thead
+            (tr
+              (~tw :tokens "border-b border-stone-200 bg-stone-100")
+              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Target")
+              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Bootstrapper")
+              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Output")
+              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Status")))
+          (tbody
+            (tr
+              (~tw :tokens "border-b border-stone-100")
+              (td (~tw :tokens "px-3 py-2 text-stone-700") "JavaScript")
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                (a
+                  :href "/sx/(language.(bootstrapper.javascript))"
+                  (~tw :tokens "hover:underline")
+                  "bootstrap_js.py"))
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500")
+                "sx-browser.js")
+              (td (~tw :tokens "px-3 py-2 text-green-600") "Live"))
+            (tr
+              (~tw :tokens "border-b border-stone-100")
+              (td (~tw :tokens "px-3 py-2 text-stone-700") "Python")
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                (a
+                  :href "/sx/(language.(bootstrapper.python))"
+                  (~tw :tokens "hover:underline")
+                  "bootstrap_py.py"))
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500")
+                "sx_ref.py")
+              (td (~tw :tokens "px-3 py-2 text-green-600") "Live"))
+            (tr
+              (~tw :tokens "border-b border-stone-100 bg-green-50")
+              (td (~tw :tokens "px-3 py-2 text-stone-700") "Python (self-hosting)")
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                (a
+                  :href "/sx/(language.(bootstrapper.self-hosting))"
+                  (~tw :tokens "hover:underline")
+                  "py.sx"))
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500")
+                "sx_ref.py")
+              (td (~tw :tokens "px-3 py-2 text-green-600") "G0 == G1"))
+            (tr
+              (~tw :tokens "border-b border-stone-100")
+              (td (~tw :tokens "px-3 py-2 text-stone-700") "Rust")
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-400")
+                "bootstrap_rs.py")
+              (td
+                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-400")
+                "sx-native")
+              (td (~tw :tokens "px-3 py-2 text-stone-400") "Planned"))))))))
diff --git a/sx/sx/language/bootstrapper/javascript/index.sx b/sx/sx/language/bootstrapper/javascript/index.sx
new file mode 100644
index 00000000..42b08bdf
--- /dev/null
+++ b/sx/sx/language/bootstrapper/javascript/index.sx
@@ -0,0 +1,53 @@
+(defcomp
+  (&key bootstrapper-source bootstrapped-output)
+  (~docs/page
+    :title "JavaScript Bootstrapper"
+    (div
+      (~tw :tokens "space-y-8")
+      (div
+        (~tw :tokens "space-y-3")
+        (p
+          (~tw :tokens "text-stone-600")
+          "This page reads the canonical "
+          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
+          " spec files, runs the Python bootstrapper, and displays both the compiler source and its generated JavaScript output. "
+          "The generated code below is live — it was produced by the bootstrapper at page load time, not served from a static file.")
+        (p
+          (~tw :tokens "text-xs text-stone-400 italic")
+          "The sx-browser.js powering this page IS the bootstrapped output. "
+          "This page re-runs the bootstrapper to display the source and result."))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Bootstrapper")
+          (span (~tw :tokens "text-sm text-stone-400 font-mono") "bootstrap_js.py"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "The compiler reads "
+          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
+          " spec files (parser, eval, primitives, render, adapters, engine, orchestration, boot, cssx) "
+          "and emits a standalone JavaScript file. Platform bridge functions (DOM operations, fetch, timers) "
+          "are emitted as native JS implementations.")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight bootstrapper-source "python")))))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2
+            (~tw :tokens "text-2xl font-semibold text-stone-800")
+            "Generated Output")
+          (span (~tw :tokens "text-sm text-stone-400 font-mono") "sx-browser.js"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "The JavaScript below was generated by running the bootstrapper against the current spec files. "
+          "It is a complete, self-contained SX runtime — parser, evaluator, DOM adapter, engine, and CSS system.")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-violet-300")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight bootstrapped-output "javascript"))))))))
diff --git a/sx/sx/page-helpers-demo.sx b/sx/sx/language/bootstrapper/page-helpers/_islands/demo-client-runner.sx
similarity index 51%
rename from sx/sx/page-helpers-demo.sx
rename to sx/sx/language/bootstrapper/page-helpers/_islands/demo-client-runner.sx
index 79b49864..ef6cbdd5 100644
--- a/sx/sx/page-helpers-demo.sx
+++ b/sx/sx/language/bootstrapper/page-helpers/_islands/demo-client-runner.sx
@@ -1,34 +1,7 @@
-;; page-helpers-demo.sx — Demo: same SX spec functions on server and client
-;;
-;; Shows page-helpers.sx functions running on Python (server-side, via sx_ref.py)
-;; and JavaScript (client-side, via sx-browser.js) with identical results.
-;; Server renders with render-to-html. Client runs as a defisland — pure SX,
-;; no JavaScript file. The button click triggers spec functions via signals.
-
-;; ---------------------------------------------------------------------------
-;; Shared card component — used by both server and client results
-;; ---------------------------------------------------------------------------
-
-(defcomp ~page-helpers-demo/demo-result-card (&key (title :as string) (ms :as number) (desc :as string) (theme :as string) &rest children)
-  (let ((border (if (= theme "blue") "border-blue-200 bg-blue-50/30" "border-stone-200"))
-        (title-c (if (= theme "blue") "text-blue-700" "text-stone-700"))
-        (badge-c (if (= theme "blue") "text-blue-400" "text-stone-400"))
-        (desc-c  (if (= theme "blue") "text-blue-500" "text-stone-500"))
-        (body-c  (if (= theme "blue") "text-blue-600" "text-stone-600")))
-    (div :class (str "rounded-lg border p-4 " border)
-      (h4 :class (str "font-semibold text-sm mb-1 " title-c)
-        title " "
-        (span :class (str "text-xs " badge-c) (str ms "ms")))
-      (p :class (str "text-xs mb-2 " desc-c) desc)
-      (div :class (str "text-xs space-y-0.5 " body-c)
-        children))))
-
-
 ;; ---------------------------------------------------------------------------
 ;; Client-side island — runs spec functions in the browser on button click
 ;; ---------------------------------------------------------------------------
-
-(defisland ~page-helpers-demo/demo-client-runner (&key sf-source attr-detail req-attrs attr-keys)
+(defisland (&key sf-source attr-detail req-attrs attr-keys)
   (let ((results (signal nil))
         (running (signal false))
         (run-demo (fn (e)
@@ -159,106 +132,3 @@
                              (when (not (empty? (get pg "reason")))
                                (str " (" (get pg "reason") ")")))))
                     (get (get r "routing-result") "pages")))))))))))
-
-
-;; ---------------------------------------------------------------------------
-;; Main page component — server-rendered content + client island
-;; ---------------------------------------------------------------------------
-
-(defcomp ~page-helpers-demo/content (&key
-    sf-categories sf-total sf-ms
-    ref-sample ref-ms
-    attr-result attr-ms
-    comp-source comp-ms
-    routing-result routing-ms
-    server-total-ms
-    sf-source
-    attr-detail req-attrs attr-keys)
-
-  (div (~tw :tokens "max-w-3xl mx-auto px-4")
-    (div (~tw :tokens "mb-8")
-      (h2 (~tw :tokens "text-2xl font-bold text-stone-800 mb-2") "Bootstrapped Page Helpers")
-      (p (~tw :tokens "text-stone-600 mb-4")
-        "These functions are defined once in "
-        (code (~tw :tokens "text-violet-700") "page-helpers.sx")
-        " and bootstrapped to both Python ("
-        (code (~tw :tokens "text-violet-700") "sx_ref.py")
-        ") and JavaScript ("
-        (code (~tw :tokens "text-violet-700") "sx-browser.js")
-        "). The server ran them in Python during this page load. Click the button below to run the identical functions client-side in the browser — same spec, same inputs, same results."))
-
-    ;; Server results
-    (div (~tw :tokens "mb-8")
-      (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mb-3")
-        "Server Results "
-        (span (~tw :tokens "text-sm font-normal text-stone-500")
-          (str "(Python, " server-total-ms "ms total)")))
-
-      (div (~tw :tokens "grid grid-cols-1 md:grid-cols-2 gap-4")
-
-        (~page-helpers-demo/demo-result-card
-          :title "categorize-special-forms"
-          :ms sf-ms :theme "stone"
-          :desc "Parses special-forms.sx and classifies each form by category (control flow, binding, quoting, etc)."
-          (p (~tw :tokens "text-sm mb-1")
-            (str sf-total " forms in "
-                 (len (keys sf-categories)) " categories"))
-          (map (fn (k)
-            (div (str k ": " (get sf-categories k))))
-            (keys sf-categories)))
-
-        (~page-helpers-demo/demo-result-card
-          :title "build-reference-data"
-          :ms ref-ms :theme "stone"
-          :desc "Takes raw attribute tuples and generates reference table rows with documentation hrefs."
-          (p (~tw :tokens "text-sm mb-1")
-            (str (len ref-sample) " attributes with detail page links"))
-          (map (fn (item)
-            (div (str (get item "name") " → "
-                     (or (get item "href") "no detail page"))))
-            ref-sample))
-
-        (~page-helpers-demo/demo-result-card
-          :title "build-attr-detail"
-          :ms attr-ms :theme "stone"
-          :desc "Builds a detail page data structure for a single attribute (sx-get): title, wire ID, handler status."
-          (div (str "title: " (get attr-result "attr-title")))
-          (div (str "wire-id: " (or (get attr-result "attr-wire-id") "none")))
-          (div (str "has handler: " (if (get attr-result "attr-handler") "yes" "no"))))
-
-        (~page-helpers-demo/demo-result-card
-          :title "build-component-source"
-          :ms comp-ms :theme "stone"
-          :desc "Reconstructs a defcomp source definition from a component metadata dict (name, params, body)."
-          (pre (~tw :tokens "bg-stone-50 p-2 rounded overflow-x-auto")
-            comp-source))
-
-        (div (~tw :tokens "rounded-lg border border-stone-200 p-4 md:col-span-2")
-          (h4 (~tw :tokens "font-semibold text-stone-700 text-sm mb-1")
-            "build-routing-analysis "
-            (span (~tw :tokens "text-xs text-stone-400") (str routing-ms "ms")))
-          (p (~tw :tokens "text-xs text-stone-500 mb-2")
-            "Classifies pages as client-routable or server-only based on whether they have data dependencies.")
-          (div (~tw :tokens "text-xs text-stone-600")
-            (p (~tw :tokens "text-sm mb-1")
-              (str (get routing-result "total-pages") " pages: "
-                   (get routing-result "client-count") " client-routable, "
-                   (get routing-result "server-count") " server-only"))
-            (div (~tw :tokens "space-y-0.5")
-              (map (fn (pg)
-                (div (str (get pg "name") " → " (get pg "mode")
-                         (when (not (empty? (get pg "reason")))
-                           (str " (" (get pg "reason") ")")))))
-                (get routing-result "pages")))))))
-
-    ;; Client execution area — pure SX island, no JavaScript file
-    (div (~tw :tokens "mb-8")
-      (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mb-3")
-        "Client Results "
-        (span (~tw :tokens "text-sm font-normal text-stone-500") "(JavaScript, sx-browser.js)"))
-
-      (~page-helpers-demo/demo-client-runner
-        :sf-source sf-source
-        :attr-detail attr-detail
-        :req-attrs req-attrs
-        :attr-keys attr-keys))))
diff --git a/sx/sx/language/bootstrapper/page-helpers/_islands/demo-result-card.sx b/sx/sx/language/bootstrapper/page-helpers/_islands/demo-result-card.sx
new file mode 100644
index 00000000..bef1445f
--- /dev/null
+++ b/sx/sx/language/bootstrapper/page-helpers/_islands/demo-result-card.sx
@@ -0,0 +1,22 @@
+;; page-helpers-demo.sx — Demo: same SX spec functions on server and client
+;;
+;; Shows page-helpers.sx functions running on Python (server-side, via sx_ref.py)
+;; and JavaScript (client-side, via sx-browser.js) with identical results.
+;; Server renders with render-to-html. Client runs as a defisland — pure SX,
+;; no JavaScript file. The button click triggers spec functions via signals.
+;; ---------------------------------------------------------------------------
+;; Shared card component — used by both server and client results
+;; ---------------------------------------------------------------------------
+(defcomp (&key (title :as string) (ms :as number) (desc :as string) (theme :as string) &rest children)
+  (let ((border (if (= theme "blue") "border-blue-200 bg-blue-50/30" "border-stone-200"))
+        (title-c (if (= theme "blue") "text-blue-700" "text-stone-700"))
+        (badge-c (if (= theme "blue") "text-blue-400" "text-stone-400"))
+        (desc-c  (if (= theme "blue") "text-blue-500" "text-stone-500"))
+        (body-c  (if (= theme "blue") "text-blue-600" "text-stone-600")))
+    (div :class (str "rounded-lg border p-4 " border)
+      (h4 :class (str "font-semibold text-sm mb-1 " title-c)
+        title " "
+        (span :class (str "text-xs " badge-c) (str ms "ms")))
+      (p :class (str "text-xs mb-2 " desc-c) desc)
+      (div :class (str "text-xs space-y-0.5 " body-c)
+        children))))
diff --git a/sx/sx/language/bootstrapper/page-helpers/index.sx b/sx/sx/language/bootstrapper/page-helpers/index.sx
new file mode 100644
index 00000000..5a0a186d
--- /dev/null
+++ b/sx/sx/language/bootstrapper/page-helpers/index.sx
@@ -0,0 +1,100 @@
+;; ---------------------------------------------------------------------------
+;; Main page component — server-rendered content + client island
+;; ---------------------------------------------------------------------------
+(defcomp (&key
+    sf-categories sf-total sf-ms
+    ref-sample ref-ms
+    attr-result attr-ms
+    comp-source comp-ms
+    routing-result routing-ms
+    server-total-ms
+    sf-source
+    attr-detail req-attrs attr-keys)
+
+  (div (~tw :tokens "max-w-3xl mx-auto px-4")
+    (div (~tw :tokens "mb-8")
+      (h2 (~tw :tokens "text-2xl font-bold text-stone-800 mb-2") "Bootstrapped Page Helpers")
+      (p (~tw :tokens "text-stone-600 mb-4")
+        "These functions are defined once in "
+        (code (~tw :tokens "text-violet-700") "page-helpers.sx")
+        " and bootstrapped to both Python ("
+        (code (~tw :tokens "text-violet-700") "sx_ref.py")
+        ") and JavaScript ("
+        (code (~tw :tokens "text-violet-700") "sx-browser.js")
+        "). The server ran them in Python during this page load. Click the button below to run the identical functions client-side in the browser — same spec, same inputs, same results."))
+
+    ;; Server results
+    (div (~tw :tokens "mb-8")
+      (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mb-3")
+        "Server Results "
+        (span (~tw :tokens "text-sm font-normal text-stone-500")
+          (str "(Python, " server-total-ms "ms total)")))
+
+      (div (~tw :tokens "grid grid-cols-1 md:grid-cols-2 gap-4")
+
+        (~page-helpers-demo/demo-result-card
+          :title "categorize-special-forms"
+          :ms sf-ms :theme "stone"
+          :desc "Parses special-forms.sx and classifies each form by category (control flow, binding, quoting, etc)."
+          (p (~tw :tokens "text-sm mb-1")
+            (str sf-total " forms in "
+                 (len (keys sf-categories)) " categories"))
+          (map (fn (k)
+            (div (str k ": " (get sf-categories k))))
+            (keys sf-categories)))
+
+        (~page-helpers-demo/demo-result-card
+          :title "build-reference-data"
+          :ms ref-ms :theme "stone"
+          :desc "Takes raw attribute tuples and generates reference table rows with documentation hrefs."
+          (p (~tw :tokens "text-sm mb-1")
+            (str (len ref-sample) " attributes with detail page links"))
+          (map (fn (item)
+            (div (str (get item "name") " → "
+                     (or (get item "href") "no detail page"))))
+            ref-sample))
+
+        (~page-helpers-demo/demo-result-card
+          :title "build-attr-detail"
+          :ms attr-ms :theme "stone"
+          :desc "Builds a detail page data structure for a single attribute (sx-get): title, wire ID, handler status."
+          (div (str "title: " (get attr-result "attr-title")))
+          (div (str "wire-id: " (or (get attr-result "attr-wire-id") "none")))
+          (div (str "has handler: " (if (get attr-result "attr-handler") "yes" "no"))))
+
+        (~page-helpers-demo/demo-result-card
+          :title "build-component-source"
+          :ms comp-ms :theme "stone"
+          :desc "Reconstructs a defcomp source definition from a component metadata dict (name, params, body)."
+          (pre (~tw :tokens "bg-stone-50 p-2 rounded overflow-x-auto")
+            comp-source))
+
+        (div (~tw :tokens "rounded-lg border border-stone-200 p-4 md:col-span-2")
+          (h4 (~tw :tokens "font-semibold text-stone-700 text-sm mb-1")
+            "build-routing-analysis "
+            (span (~tw :tokens "text-xs text-stone-400") (str routing-ms "ms")))
+          (p (~tw :tokens "text-xs text-stone-500 mb-2")
+            "Classifies pages as client-routable or server-only based on whether they have data dependencies.")
+          (div (~tw :tokens "text-xs text-stone-600")
+            (p (~tw :tokens "text-sm mb-1")
+              (str (get routing-result "total-pages") " pages: "
+                   (get routing-result "client-count") " client-routable, "
+                   (get routing-result "server-count") " server-only"))
+            (div (~tw :tokens "space-y-0.5")
+              (map (fn (pg)
+                (div (str (get pg "name") " → " (get pg "mode")
+                         (when (not (empty? (get pg "reason")))
+                           (str " (" (get pg "reason") ")")))))
+                (get routing-result "pages")))))))
+
+    ;; Client execution area — pure SX island, no JavaScript file
+    (div (~tw :tokens "mb-8")
+      (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mb-3")
+        "Client Results "
+        (span (~tw :tokens "text-sm font-normal text-stone-500") "(JavaScript, sx-browser.js)"))
+
+      (~page-helpers-demo/demo-client-runner
+        :sf-source sf-source
+        :attr-detail attr-detail
+        :req-attrs req-attrs
+        :attr-keys attr-keys))))
diff --git a/sx/sx/language/bootstrapper/python/index.sx b/sx/sx/language/bootstrapper/python/index.sx
new file mode 100644
index 00000000..a0920a3c
--- /dev/null
+++ b/sx/sx/language/bootstrapper/python/index.sx
@@ -0,0 +1,53 @@
+(defcomp
+  (&key bootstrapper-source bootstrapped-output)
+  (~docs/page
+    :title "Python Bootstrapper"
+    (div
+      (~tw :tokens "space-y-8")
+      (div
+        (~tw :tokens "space-y-3")
+        (p
+          (~tw :tokens "text-stone-600")
+          "This page reads the canonical "
+          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
+          " spec files, runs the Python bootstrapper, and displays both the compiler source and its generated Python output. "
+          "The generated code below is live — it was produced by the bootstrapper at page load time.")
+        (p
+          (~tw :tokens "text-xs text-stone-400 italic")
+          "With SX_USE_REF=1, the server-side SX evaluator running this page IS the bootstrapped output. "
+          "This page re-runs the bootstrapper to display the source and result."))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Bootstrapper")
+          (span (~tw :tokens "text-sm text-stone-400 font-mono") "bootstrap_py.py"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "The compiler reads "
+          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
+          " spec files (eval, primitives, render, adapter-html) "
+          "and emits a standalone Python module. Platform bridge functions (type constructors, environment ops) "
+          "are emitted as native Python implementations.")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight bootstrapper-source "python")))))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2
+            (~tw :tokens "text-2xl font-semibold text-stone-800")
+            "Generated Output")
+          (span (~tw :tokens "text-sm text-stone-400 font-mono") "sx_ref.py"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "The Python below was generated by running the bootstrapper against the current spec files. "
+          "It is a complete server-side SX evaluator — eval, primitives, and HTML renderer.")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-violet-300")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight bootstrapped-output "python"))))))))
diff --git a/sx/sx/language/bootstrapper/self-hosting-js/index.sx b/sx/sx/language/bootstrapper/self-hosting-js/index.sx
new file mode 100644
index 00000000..0b0b3d9a
--- /dev/null
+++ b/sx/sx/language/bootstrapper/self-hosting-js/index.sx
@@ -0,0 +1,201 @@
+(defcomp
+  (&key
+    js-sx-source
+    defines-matched
+    defines-total
+    js-sx-lines
+    verification-status)
+  (~docs/page
+    :title "Self-Hosting Bootstrapper (js.sx)"
+    (div
+      (~tw :tokens "space-y-8")
+      (div
+        (~tw :tokens "space-y-3")
+        (p
+          (~tw :tokens "text-stone-600")
+          (code (~tw :tokens "text-violet-700 text-sm") "js.sx")
+          " is an SX-to-JavaScript translator written in SX. "
+          "This page runs it live: loads js.sx into the evaluator, translates every spec file, "
+          "and verifies each define matches "
+          (code (~tw :tokens "text-violet-700 text-sm") "bootstrap_js.py")
+          "'s JSEmitter.")
+        (div
+          (~tw :tokens "rounded-lg p-4")
+          :class (if
+            (= verification-status "identical")
+            "bg-green-50 border border-green-200"
+            "bg-red-50 border border-red-200")
+          (div
+            (~tw :tokens "flex items-center gap-3")
+            (span
+              (~tw :tokens "inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold")
+              :class (if
+                (= verification-status "identical")
+                "bg-green-100 text-green-800"
+                "bg-red-100 text-red-800")
+              (if (= verification-status "identical") "G0 == G1" "MISMATCH"))
+            (p
+              (~tw :tokens "text-sm")
+              :class (if
+                (= verification-status "identical")
+                "text-green-700"
+                "text-red-700")
+              defines-matched
+              "/"
+              defines-total
+              " defines match across all spec files. "
+              js-sx-lines
+              " lines of SX."))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "G0 Bug Discovery")
+        (div
+          (~tw :tokens "rounded-lg bg-amber-50 border border-amber-200 p-4")
+          (div
+            (~tw :tokens "flex items-start gap-3")
+            (span
+              (~tw :tokens "inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-sm font-semibold text-amber-800")
+              "Fixed")
+            (div
+              (~tw :tokens "text-sm text-amber-700 space-y-2")
+              (p
+                "Building js.sx revealed a bug in "
+                (code "bootstrap_js.py")
+                "'s "
+                (code "_emit_define")
+                " method. The Python code:")
+              (pre
+                (~tw :tokens "bg-amber-100 rounded p-2 text-xs font-mono")
+                "val = self.emit(fn_expr) if fn_expr else \"NIL\"")
+              (p
+                "Python's "
+                (code "if fn_expr")
+                " treats "
+                (code "0")
+                ", "
+                (code "False")
+                ", and "
+                (code "\"\"")
+                " as falsy. So "
+                (code "(define *batch-depth* 0)")
+                " emitted "
+                (code "var _batchDepth = NIL")
+                " instead of "
+                (code "var _batchDepth = 0")
+                ". Similarly, "
+                (code "(define _css-hash \"\")")
+                " emitted "
+                (code "var _cssHash = NIL")
+                " instead of "
+                (code "var _cssHash = \"\"")
+                ".")
+              (p
+                "Fix: "
+                (code "if fn_expr is not None")
+                " — explicit None check. "
+                "js.sx never had this bug because SX's "
+                (code "nil?")
+                " only matches "
+                (code "nil")
+                ", not "
+                (code "0")
+                " or "
+                (code "false")
+                ". "
+                "The self-hosting bootstrapper caught a host language bug.")))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2
+          (~tw :tokens "text-2xl font-semibold text-stone-800")
+          "Translation Differences from py.sx")
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "Both py.sx and js.sx translate the same SX ASTs, but target languages differ:")
+        (div
+          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table
+            (~tw :tokens "w-full text-sm")
+            (thead
+              (~tw :tokens "bg-stone-50")
+              (tr
+                (th
+                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
+                  "Feature")
+                (th
+                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
+                  "py.sx → Python")
+                (th
+                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
+                  "js.sx → JavaScript")))
+            (tbody
+              (tr
+                (~tw :tokens "border-t border-stone-100")
+                (td (~tw :tokens "px-4 py-2 text-stone-600") "Name mangling")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "eval-expr → eval_expr")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "eval-expr → evalExpr"))
+              (tr
+                (~tw :tokens "border-t border-stone-100")
+                (td (~tw :tokens "px-4 py-2 text-stone-600") "Declarations")
+                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "name = value")
+                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "var name = value;"))
+              (tr
+                (~tw :tokens "border-t border-stone-100")
+                (td (~tw :tokens "px-4 py-2 text-stone-600") "Functions")
+                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "lambda x: body")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "function(x) { return body; }"))
+              (tr
+                (~tw :tokens "border-t border-stone-100")
+                (td (~tw :tokens "px-4 py-2 text-stone-600") "set! (mutation)")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "_cells dict (closure hack)")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "Direct assignment (JS captures by ref)"))
+              (tr
+                (~tw :tokens "border-t border-stone-100")
+                (td (~tw :tokens "px-4 py-2 text-stone-600") "Tail recursion")
+                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "—")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "while(true) { continue; }"))
+              (tr
+                (~tw :tokens "border-t border-stone-100")
+                (td (~tw :tokens "px-4 py-2 text-stone-600") "let binding")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "(lambda x: body)(val)")
+                (td
+                  (~tw :tokens "px-4 py-2 font-mono text-xs")
+                  "(function() { var x = val; return body; })()"))
+              (tr
+                (~tw :tokens "border-t border-stone-100")
+                (td (~tw :tokens "px-4 py-2 text-stone-600") "and/or")
+                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "ternary chains")
+                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "&& / sxOr()"))))))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "js.sx Source")
+          (span
+            (~tw :tokens "text-sm text-stone-400 font-mono")
+            "shared/sx/ref/js.sx"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "The SX-to-JavaScript translator — 61 "
+          (code "define")
+          " forms. "
+          "camelCase mangling (500+ RENAMES), expression/statement emission, "
+          "self-tail-recursive while loop optimization.")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight js-sx-source "lisp"))))))))
diff --git a/sx/sx/language/bootstrapper/self-hosting/index.sx b/sx/sx/language/bootstrapper/self-hosting/index.sx
new file mode 100644
index 00000000..76bd0563
--- /dev/null
+++ b/sx/sx/language/bootstrapper/self-hosting/index.sx
@@ -0,0 +1,115 @@
+(defcomp
+  (&key
+    (py-sx-source :as string)
+    (g0-output :as string)
+    (g1-output :as string)
+    (defines-matched :as number)
+    (defines-total :as number)
+    (g0-lines :as number)
+    (g0-bytes :as number)
+    (verification-status :as string))
+  (~docs/page
+    :title "Self-Hosting Bootstrapper (py.sx)"
+    (div
+      (~tw :tokens "space-y-8")
+      (div
+        (~tw :tokens "space-y-3")
+        (p
+          (~tw :tokens "text-stone-600")
+          (code (~tw :tokens "text-violet-700 text-sm") "py.sx")
+          " is an SX-to-Python translator written in SX. "
+          "This page runs it live: loads py.sx into the evaluator, translates each spec file, "
+          "and diffs the result against "
+          (code (~tw :tokens "text-violet-700 text-sm") "bootstrap_py.py")
+          ".")
+        (div
+          (~tw :tokens "rounded-lg p-4")
+          :class (if
+            (= verification-status "identical")
+            "bg-green-50 border border-green-200"
+            "bg-red-50 border border-red-200")
+          (div
+            (~tw :tokens "flex items-center gap-3")
+            (span
+              (~tw :tokens "inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold")
+              :class (if
+                (= verification-status "identical")
+                "bg-green-100 text-green-800"
+                "bg-red-100 text-red-800")
+              (if (= verification-status "identical") "G0 == G1" "MISMATCH"))
+            (p
+              (~tw :tokens "text-sm")
+              :class (if
+                (= verification-status "identical")
+                "text-green-700"
+                "text-red-700")
+              defines-matched
+              "/"
+              defines-total
+              " defines match. "
+              g0-lines
+              " lines, "
+              g0-bytes
+              " bytes."))))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "py.sx Source")
+          (span
+            (~tw :tokens "text-sm text-stone-400 font-mono")
+            "shared/sx/ref/py.sx"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "The SX-to-Python translator — 55 "
+          (code "define")
+          " forms. "
+          "Name mangling (200+ RENAMES), expression emission, statement emission, "
+          "cell variable detection for "
+          (code "set!")
+          " across lambda boundaries.")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight py-sx-source "lisp")))))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "G0 Output")
+          (span
+            (~tw :tokens "text-sm text-stone-400 font-mono")
+            "bootstrap_py.py → sx_ref.py"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "Generated by the hand-written Python bootstrapper.")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight g0-output "python")))))
+      (div
+        (~tw :tokens "space-y-3")
+        (div
+          (~tw :tokens "flex items-baseline gap-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "G1 Output")
+          (span
+            (~tw :tokens "text-sm text-stone-400 font-mono")
+            "py.sx → sx_ref.py"))
+        (p
+          (~tw :tokens "text-sm text-stone-500")
+          "Generated by py.sx running on the Python evaluator. "
+          (if
+            (= verification-status "identical")
+            (strong "Byte-for-byte identical to G0.")
+            "Differs from G0 — see mismatch details."))
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border")
+          :class (if
+            (= verification-status "identical")
+            "border-green-200"
+            "border-red-200")
+          (pre
+            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight g1-output "python"))))))))
diff --git a/sx/sx/language/doc/components/index.sx b/sx/sx/language/doc/components/index.sx
new file mode 100644
index 00000000..5b854c0d
--- /dev/null
+++ b/sx/sx/language/doc/components/index.sx
@@ -0,0 +1,17 @@
+(defcomp ()
+  (~docs/page :title "Components"
+    (~docs/section :title "defcomp" :id "defcomp"
+      (p (~tw :tokens "text-stone-600")
+        "Components are defined with defcomp. They take keyword parameters and optional children:")
+      (~docs/code :src (highlight "(defcomp ~docs-content/card (&key title subtitle &rest children)\n  (div :class \"border rounded p-4\"\n    (h2 :class \"font-bold\" title)\n    (when subtitle (p :class \"text-stone-500\" subtitle))\n    (div :class \"mt-3\" children)))" "lisp"))
+      (p (~tw :tokens "text-stone-600")
+        "Use components with the ~ prefix:")
+      (~docs/code :src (highlight "(~docs-content/card :title \"My Card\" :subtitle \"A description\"\n  (p \"First child\")\n  (p \"Second child\"))" "lisp")))
+    (~docs/section :title "Component caching" :id "caching"
+      (p (~tw :tokens "text-stone-600")
+        "Component definitions are sent in a <script type=\"text/sx\" data-components> block. The client caches them in localStorage keyed by a content hash. On subsequent page loads, the client sends an SX-Components header listing what it has. The server only sends definitions the client is missing.")
+      (p (~tw :tokens "text-stone-600")
+        "This means the first page load sends all component definitions (~5-15KB). Subsequent navigations send zero component bytes — just the page content."))
+    (~docs/section :title "Parameters" :id "params"
+      (p (~tw :tokens "text-stone-600")
+        "&key declares keyword parameters. &rest children captures remaining positional arguments. Missing parameters evaluate to nil. Components always receive all declared parameters — use (when param ...) or (if param ... ...) to handle optional values."))))
diff --git a/sx/sx/language/doc/evaluator/index.sx b/sx/sx/language/doc/evaluator/index.sx
new file mode 100644
index 00000000..4b495431
--- /dev/null
+++ b/sx/sx/language/doc/evaluator/index.sx
@@ -0,0 +1,10 @@
+(defcomp ()
+  (~docs/page :title "Evaluator"
+    (~docs/section :title "Special forms" :id "special"
+      (p (~tw :tokens "text-stone-600")
+        "Special forms have lazy evaluation — arguments are not evaluated before the form runs:")
+      (~docs/code :src (highlight ";; Conditionals\n(if condition then-expr else-expr)\n(when condition body...)\n(cond (test1 body1) (test2 body2) (else default))\n\n;; Bindings\n(let ((name value) (name2 value2)) body...)\n(define name value)\n\n;; Functions\n(lambda (x y) (+ x y))\n(fn (x) (* x x))\n\n;; Sequencing\n(do expr1 expr2 expr3)\n(begin expr1 expr2)\n\n;; Threading\n(-> value (fn1 arg) (fn2 arg))" "lisp")))
+    (~docs/section :title "Higher-order forms" :id "higher"
+      (p (~tw :tokens "text-stone-600")
+        "These operate on collections with function arguments:")
+      (~docs/code :src (highlight "(map (fn (x) (* x 2)) (list 1 2 3))        ;; => (2 4 6)\n(filter (fn (x) (> x 2)) (list 1 2 3 4 5))  ;; => (3 4 5)\n(reduce (fn (acc x) (+ acc x)) 0 (list 1 2 3)) ;; => 6\n(some (fn (x) (> x 3)) (list 1 2 3 4))      ;; => true\n(every? (fn (x) (> x 0)) (list 1 2 3))      ;; => true" "lisp")))))
diff --git a/sx/sx/language/doc/getting-started/index.sx b/sx/sx/language/doc/getting-started/index.sx
new file mode 100644
index 00000000..bbcbaa6e
--- /dev/null
+++ b/sx/sx/language/doc/getting-started/index.sx
@@ -0,0 +1,14 @@
+(defcomp ()
+  (~docs/page :title "Getting Started"
+    (~docs/section :title "Minimal example" :id "minimal"
+      (p (~tw :tokens "text-stone-600")
+        "An sx response is s-expression source code with content type text/sx:")
+      (~docs/code :src (highlight "(div :class \"p-4 bg-white rounded\"\n  (h1 :class \"text-2xl font-bold\" \"Hello, world!\")\n  (p \"This is rendered from an s-expression.\"))" "lisp"))
+      (p (~tw :tokens "text-stone-600")
+        "Add sx-get to any element to make it fetch and render sx:"))
+    (~docs/section :title "Hypermedia attributes" :id "attrs"
+      (p (~tw :tokens "text-stone-600")
+        "Like htmx, sx adds attributes to HTML elements to trigger HTTP requests:")
+      (~docs/code :src (highlight "(button\n  :sx-get \"/api/data\"\n  :sx-target \"#result\"\n  :sx-swap \"innerHTML\"\n  \"Load data\")" "lisp"))
+      (p (~tw :tokens "text-stone-600")
+        "sx-get, sx-post, sx-put, sx-delete, sx-patch — all work the same way. The response is parsed as sx and rendered into the target element."))))
diff --git a/sx/sx/language/doc/introduction/index.sx b/sx/sx/language/doc/introduction/index.sx
new file mode 100644
index 00000000..0b6e6d3d
--- /dev/null
+++ b/sx/sx/language/doc/introduction/index.sx
@@ -0,0 +1,17 @@
+(defcomp ()
+  (~docs/page :title "Introduction"
+    (~docs/section :title "What is sx?" :id "what"
+      (p (~tw :tokens "text-stone-600")
+        "sx is an s-expression language for building web UIs. It combines htmx's server-first hypermedia approach with React's component model. The server sends s-expression source code over the wire. The client parses, evaluates, and renders it to DOM.")
+      (p (~tw :tokens "text-stone-600")
+        "The same evaluator runs on both server (Python) and client (JavaScript). Components defined once render identically in both environments."))
+    (~docs/section :title "Design decisions" :id "design"
+      (p (~tw :tokens "text-stone-600")
+        "HTML elements are first-class: (div :class \"card\" (p \"hello\")) renders exactly what you'd expect. Components use defcomp with keyword parameters and optional children. The evaluator supports let bindings, conditionals, lambda, map/filter/reduce, and ~80 primitives.")
+      (p (~tw :tokens "text-stone-600")
+        "sx replaces the pattern of shipping a JS framework + build step + client-side router + state management library just to render some server data. For most applications, sx eliminates the need for JavaScript entirely — htmx attributes handle interactivity, hyperscript handles small behaviours, and the server handles everything else."))
+    (~docs/section :title "What sx is not" :id "not"
+      (ul (~tw :tokens "space-y-2 text-stone-600")
+        (li "Not a general-purpose programming language — it's a UI rendering language")
+        (li "Not a full Lisp — it has macros, TCO, and delimited continuations, but no full call/cc")
+        (li "Not production-hardened at scale — it runs one website")))))
diff --git a/sx/sx/language/doc/primitives/index.sx b/sx/sx/language/doc/primitives/index.sx
new file mode 100644
index 00000000..8559f4cf
--- /dev/null
+++ b/sx/sx/language/doc/primitives/index.sx
@@ -0,0 +1,6 @@
+(defcomp (&key prims)
+  (~docs/page :title "Primitives"
+    (~docs/section :title "Built-in functions" :id "builtins"
+      (p (~tw :tokens "text-stone-600")
+        "sx provides ~80 built-in pure functions. They work identically on server (Python) and client (JavaScript).")
+      (div (~tw :tokens "space-y-6") prims))))
diff --git a/sx/sx/language/doc/server-rendering/index.sx b/sx/sx/language/doc/server-rendering/index.sx
new file mode 100644
index 00000000..64da0b86
--- /dev/null
+++ b/sx/sx/language/doc/server-rendering/index.sx
@@ -0,0 +1,15 @@
+(defcomp ()
+  (~docs/page :title "Server Rendering"
+    (~docs/section :title "Python API" :id "python"
+      (p (~tw :tokens "text-stone-600")
+        "The server-side sx library provides several entry points for rendering:")
+      (~docs/code :src (highlight "from shared.sx.helpers import sx_page, sx_response, sx_call\nfrom shared.sx.parser import SxExpr\n\n# Build a component call from Python kwargs\nsx_call(\"card\", title=\"Hello\", subtitle=\"World\")\n\n# Return an sx wire-format response\nreturn sx_response(sx_call(\"card\", title=\"Hello\"))\n\n# Return a full HTML page shell with sx boot\nreturn sx_page(ctx, page_sx)" "python")))
+    (~docs/section :title "sx_call" :id "sx-call"
+      (p (~tw :tokens "text-stone-600")
+        "sx_call converts Python kwargs to an s-expression component call. Snake_case becomes kebab-case. SxExpr values are inlined without quoting. None becomes nil. Bools become true/false."))
+    (~docs/section :title "sx_response" :id "sx-response"
+      (p (~tw :tokens "text-stone-600")
+        "sx_response returns a Quart Response with content type text/sx. It prepends missing component definitions, scans for CSS classes, and sets SX-Css-Hash and SX-Css-Add headers."))
+    (~docs/section :title "sx_page" :id "sx-page"
+      (p (~tw :tokens "text-stone-600")
+        "sx_page returns a minimal HTML document that boots the page from sx source. The browser loads component definitions and page sx from inline <script> tags, then sx.js renders everything client-side. CSS rules are pre-scanned and injected."))))
diff --git a/sx/sx/language/doc/special-forms/index.sx b/sx/sx/language/doc/special-forms/index.sx
new file mode 100644
index 00000000..bd739dfe
--- /dev/null
+++ b/sx/sx/language/doc/special-forms/index.sx
@@ -0,0 +1,8 @@
+(defcomp (&key forms)
+  (~docs/page :title "Special Forms"
+    (~docs/section :title "Syntactic constructs" :id "special-forms"
+      (p (~tw :tokens "text-stone-600")
+        "Special forms are syntactic constructs whose arguments are NOT evaluated before dispatch. Each form has its own evaluation rules — unlike primitives, which receive pre-evaluated values. Together with primitives, special forms define the complete language surface.")
+      (p (~tw :tokens "text-stone-600")
+        "Forms marked with a tail position enable " (a :href "/sx/(etc.(essay.tail-call-optimization))" (~tw :tokens "text-violet-600 hover:underline") "tail-call optimization") " — recursive calls in tail position use constant stack space.")
+      (div (~tw :tokens "space-y-10") forms))))
diff --git a/sx/sx/language/spec/_shared/detail-content.sx b/sx/sx/language/spec/_shared/detail-content.sx
new file mode 100644
index 00000000..935d7dc4
--- /dev/null
+++ b/sx/sx/language/spec/_shared/detail-content.sx
@@ -0,0 +1,42 @@
+(defcomp
+  (&key
+    (spec-title :as string)
+    (spec-desc :as string)
+    (spec-filename :as string)
+    (spec-source :as string)
+    (spec-prose :as string?))
+  (~docs/page
+    :title spec-title
+    (div
+      (~tw :tokens "flex items-center gap-3 mb-4")
+      (span (~tw :tokens "text-sm text-stone-400 font-mono") spec-filename)
+      (span (~tw :tokens "text-sm text-stone-500 flex-1") spec-desc)
+      (a
+        :href (str
+          "/sx/(language.(spec.(explore."
+          (replace spec-filename ".sx" "")
+          ")))")
+        :sx-get (str
+          "/sx/(language.(spec.(explore."
+          (replace spec-filename ".sx" "")
+          ")))")
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "outerHTML"
+        :sx-push-url "true"
+        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800 font-medium whitespace-nowrap")
+        "Explore"))
+    (when
+      spec-prose
+      (div
+        (~tw :tokens "mb-6 space-y-3")
+        (p (~tw :tokens "text-stone-600 leading-relaxed") spec-prose)
+        (p
+          (~tw :tokens "text-xs text-stone-400 italic")
+          "The s-expression source below is the canonical specification. "
+          "The English description above is a summary.")))
+    (div
+      (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
+      (pre
+        (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
+        (code (highlight spec-source "sx"))))))
diff --git a/sx/sx/language/spec/_shared/not-found.sx b/sx/sx/language/spec/_shared/not-found.sx
new file mode 100644
index 00000000..dea14b1b
--- /dev/null
+++ b/sx/sx/language/spec/_shared/not-found.sx
@@ -0,0 +1,9 @@
+(defcomp
+  (&key (slug :as string))
+  (~docs/page
+    :title "Spec Not Found"
+    (p
+      (~tw :tokens "text-stone-600")
+      "No specification found for \""
+      slug
+      "\". This spec may not exist yet.")))
diff --git a/sx/sx/language/spec/_shared/overview-content.sx b/sx/sx/language/spec/_shared/overview-content.sx
new file mode 100644
index 00000000..9ce0fdb4
--- /dev/null
+++ b/sx/sx/language/spec/_shared/overview-content.sx
@@ -0,0 +1,56 @@
+(defcomp
+  (&key (spec-title :as string) (spec-files :as list))
+  (~docs/page
+    :title (or spec-title "Specs")
+    (p
+      (~tw :tokens "text-stone-600 mb-6")
+      (case
+        spec-title
+        "Core Language"
+        "The core specification defines the language itself — parsing, evaluation, primitives, special forms, and shared rendering definitions. These five files are platform-independent and sufficient to implement SX on any target."
+        "Adapters"
+        "Adapters connect the core language to specific environments. Each adapter takes evaluated expression trees and produces output for its target — DOM nodes, HTML strings, SX wire format, or async-aware server rendering."
+        "Browser Runtime"
+        "The browser runtime handles the client-side lifecycle: parsing triggers, making requests, swapping content, managing history, and booting the page. Split into pure logic (engine), browser wiring (orchestration), startup (boot), and URL matching (router)."
+        "Reactive System"
+        "Fine-grained reactive primitives for client-side islands. Signals, computed values, effects, and batching — the reactive graph that powers L2-L3 interactivity without a virtual DOM."
+        "Host Interface"
+        "The contract between SX and its host environment. Boundary declarations specify what the host must provide, forms define server-side application constructs, and page helpers offer pure data transformations."
+        "Extensions"
+        "Optional bolt-on specifications that extend the core language. Bootstrappers include them only when the target requests them. Code that doesn't use extensions pays zero cost."
+        :else ""))
+    (div
+      (~tw :tokens "space-y-8")
+      (map
+        (fn
+          (spec)
+          (div
+            (~tw :tokens "space-y-3")
+            (div
+              (~tw :tokens "flex items-baseline gap-3")
+              (h2
+                (~tw :tokens "text-2xl font-semibold text-stone-800")
+                (a
+                  :href (get spec "href")
+                  :sx-get (get spec "href")
+                  :sx-target "#sx-content"
+                  :sx-select "#sx-content"
+                  :sx-swap "outerHTML"
+                  :sx-push-url "true"
+                  (~tw :tokens "text-violet-700 hover:text-violet-900 underline")
+                  (get spec "title")))
+              (span
+                (~tw :tokens "text-sm text-stone-400 font-mono")
+                (get spec "filename")))
+            (p (~tw :tokens "text-stone-600") (get spec "desc"))
+            (when
+              (get spec "prose")
+              (p
+                (~tw :tokens "text-sm text-stone-500 leading-relaxed")
+                (get spec "prose")))
+            (div
+              (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-72 overflow-y-auto")
+              (pre
+                (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
+                (code (highlight (get spec "source") "sx"))))))
+        spec-files))))
diff --git a/sx/sx/language/spec/index.sx b/sx/sx/language/spec/index.sx
new file mode 100644
index 00000000..845aeb28
--- /dev/null
+++ b/sx/sx/language/spec/index.sx
@@ -0,0 +1,482 @@
+(defcomp
+  ()
+  (~docs/page
+    :title "Spec Architecture"
+    (div
+      (~tw :tokens "space-y-8")
+      (div
+        (~tw :tokens "space-y-4")
+        (p
+          (~tw :tokens "text-lg text-stone-600")
+          "SX is defined in SX. The canonical specification is a set of s-expression files that are both documentation and executable definition. Bootstrap compilers read these files to generate native implementations in JavaScript, Python, Rust, or any other target.")
+        (p
+          (~tw :tokens "text-stone-600")
+          "The spec is organized into six sections: "
+          (strong "Core")
+          " (the language itself), "
+          (strong "Adapters")
+          " (rendering backends), "
+          (strong "Browser")
+          " (client-side runtime), "
+          (strong "Reactive")
+          " (signal system), "
+          (strong "Host Interface")
+          " (platform contract), and "
+          (strong "Extensions")
+          " (optional add-ons)."))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Core")
+        (p
+          (~tw :tokens "text-stone-600")
+          "The core is platform-independent. It defines how SX source is parsed, how expressions are evaluated, what primitives exist, and what shared rendering definitions all adapters use. These four files are the language.")
+        (div
+          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table
+            (~tw :tokens "w-full text-left text-sm")
+            (thead
+              (tr
+                (~tw :tokens "border-b border-stone-200 bg-stone-100")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
+            (tbody
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.parser))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.parser))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "parser.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Tokenization and parsing of SX source text into AST"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.evaluator))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.evaluator))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "eval.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Tree-walking evaluation of SX expressions"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.primitives))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.primitives))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "primitives.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "All built-in pure functions and their signatures"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.special-forms))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.special-forms))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "special-forms.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "All special forms — syntactic constructs with custom evaluation rules"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.renderer))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.renderer))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "render.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Shared rendering registries and utilities used by all adapters"))))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Adapters")
+        (p
+          (~tw :tokens "text-stone-600")
+          "Adapters are selectable rendering backends. Each one takes the same evaluated expression tree and produces output for a specific environment. You only need the adapters relevant to your target.")
+        (div
+          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table
+            (~tw :tokens "w-full text-left text-sm")
+            (thead
+              (tr
+                (~tw :tokens "border-b border-stone-200 bg-stone-100")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Output")
+                (th
+                  (~tw :tokens "px-3 py-2 font-medium text-stone-600")
+                  "Environment")))
+            (tbody
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.adapter-dom))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.adapter-dom))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "adapter-dom.sx"))
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Live DOM nodes")
+                (td (~tw :tokens "px-3 py-2 text-stone-500") "Browser"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.adapter-html))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.adapter-html))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "adapter-html.sx"))
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "HTML strings")
+                (td (~tw :tokens "px-3 py-2 text-stone-500") "Server"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.adapter-sx))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.adapter-sx))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "adapter-sx.sx"))
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "SX wire format")
+                (td (~tw :tokens "px-3 py-2 text-stone-500") "Server to client"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.adapter-async))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.adapter-async))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "adapter-async.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "HTML/SX with awaited I/O")
+                (td (~tw :tokens "px-3 py-2 text-stone-500") "Server (async)"))))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser Runtime")
+        (p
+          (~tw :tokens "text-stone-600")
+          "The browser runtime handles the full client-side lifecycle: parsing triggers, making HTTP requests, swapping content, managing history, and booting the page. Split into pure logic (engine), browser wiring (orchestration), startup (boot), and URL matching (router).")
+        (div
+          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table
+            (~tw :tokens "w-full text-left text-sm")
+            (thead
+              (tr
+                (~tw :tokens "border-b border-stone-200 bg-stone-100")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
+            (tbody
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.engine))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.engine))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "engine.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Pure logic — trigger parsing, swap algorithms, morph, history, SSE, indicators"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.orchestration))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.orchestration))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "orchestration.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Browser wiring — binds engine to DOM events, fetch, request lifecycle"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.boot))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.boot))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "boot.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Browser startup — mount, hydrate, script processing, head hoisting"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.router))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.router))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "router.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Client-side route matching — Flask-style patterns, param extraction"))))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Reactive")
+        (p
+          (~tw :tokens "text-stone-600")
+          "Fine-grained reactive primitives for client-side islands. Signals notify subscribers on change, computed values derive lazily, effects run side-effects with cleanup, and batch coalesces updates.")
+        (div
+          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table
+            (~tw :tokens "w-full text-left text-sm")
+            (thead
+              (tr
+                (~tw :tokens "border-b border-stone-200 bg-stone-100")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
+            (tbody
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.signals))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.signals))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "signals.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Signal runtime — signal, deref, reset!, swap!, computed, effect, batch, island scope"))))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Host Interface")
+        (p
+          (~tw :tokens "text-stone-600")
+          "The contract between SX and its host environment. Boundary declares what the host must provide. Forms define server-side application constructs. Page helpers offer pure data transformations for rendering.")
+        (div
+          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table
+            (~tw :tokens "w-full text-left text-sm")
+            (thead
+              (tr
+                (~tw :tokens "border-b border-stone-200 bg-stone-100")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
+            (tbody
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.boundary))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.boundary))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "boundary.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Language boundary — I/O primitives, page helpers, tier declarations"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.forms))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.forms))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "forms.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Definition forms — defhandler, defquery, defaction, defpage"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.page-helpers))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.page-helpers))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "page-helpers.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Pure data-transformation helpers for page rendering"))))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Dependency graph")
+        (div
+          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
+          (pre
+            (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono text-stone-700")
+            ";; Core\nparser.sx           (standalone — no dependencies)\nprimitives.sx       (standalone — declarative registry)\nspecial-forms.sx    (standalone — declarative registry)\neval.sx             depends on: parser, primitives, special-forms\nrender.sx           (standalone — shared registries)\n\n;; Adapters\nadapter-dom.sx      depends on: render, eval\nadapter-html.sx     depends on: render, eval\nadapter-sx.sx       depends on: render, eval\nadapter-async.sx    depends on: adapter-html, adapter-sx, eval\n\n;; Browser Runtime\nengine.sx           depends on: eval, adapter-dom\norchestration.sx    depends on: engine, adapter-dom\nboot.sx             depends on: orchestration, adapter-dom, render\nrouter.sx           (standalone — pure string/list ops)\n\n;; Reactive\nsignals.sx          depends on: eval\n\n;; Host Interface\nboundary.sx         (standalone — declarative contract)\nforms.sx            depends on: eval\npage-helpers.sx     (standalone — declarative registry)\n\n;; Extensions (optional)\ncontinuations.sx    depends on: eval\ncallcc.sx           depends on: eval\ntypes.sx            depends on: eval, primitives\ndeps.sx             depends on: eval")))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Extensions")
+        (p
+          (~tw :tokens "text-stone-600")
+          "Optional bolt-on specifications that extend the core language. Bootstrappers include them only when the target requests them. Code that doesn't use extensions pays zero cost.")
+        (div
+          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table
+            (~tw :tokens "w-full text-left text-sm")
+            (thead
+              (tr
+                (~tw :tokens "border-b border-stone-200 bg-stone-100")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
+                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
+            (tbody
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.continuations))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.continuations))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "continuations.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Delimited continuations — shift/reset"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.callcc))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.callcc))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "callcc.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Full first-class continuations — call/cc"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.types))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.types))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "types.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Gradual type system — registration-time checking, zero runtime cost"))
+              (tr
+                (~tw :tokens "border-b border-stone-100")
+                (td
+                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                  (a
+                    :href "/sx/(language.(spec.deps))"
+                    (~tw :tokens "hover:underline")
+                    :sx-get "/sx/(language.(spec.deps))"
+                    :sx-target "#sx-content"
+                    :sx-select "#sx-content"
+                    :sx-swap "outerHTML"
+                    :sx-push-url "true"
+                    "deps.sx"))
+                (td
+                  (~tw :tokens "px-3 py-2 text-stone-700")
+                  "Component dependency analysis — bundling, IO detection, CSS scoping"))))))
+      (div
+        (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Self-hosting")
+        (p
+          (~tw :tokens "text-stone-600")
+          "Every spec file is written in the same restricted subset of SX that the evaluator itself defines. A bootstrap compiler for a new target only needs to understand this subset — roughly 20 special forms and 80 primitives — to generate a fully native implementation. The spec files are the single source of truth; implementations are derived artifacts.")
+        (p
+          (~tw :tokens "text-stone-600")
+          "This is not a theoretical exercise. The JavaScript implementation ("
+          (code (~tw :tokens "text-violet-700 text-sm") "sx.js")
+          ") and the Python implementation ("
+          (code (~tw :tokens "text-violet-700 text-sm") "shared/sx/")
+          ") are both generated from these spec files via "
+          (code (~tw :tokens "text-violet-700 text-sm") "bootstrap_js.py")
+          " and its Python counterpart.")))))
diff --git a/sx/sx/language/test/_shared/spec-content.sx b/sx/sx/language/test/_shared/spec-content.sx
new file mode 100644
index 00000000..e86084e8
--- /dev/null
+++ b/sx/sx/language/test/_shared/spec-content.sx
@@ -0,0 +1,52 @@
+;; ---------------------------------------------------------------------------
+;; Per-spec test page (reusable for eval, parser, router, render)
+;; ---------------------------------------------------------------------------
+(defcomp (&key (spec-name :as string) (spec-title :as string) (spec-desc :as string) (spec-source :as string) (framework-source :as string) (server-results :as dict?))
+  (~docs/page :title spec-title
+    (div (~tw :tokens "space-y-8")
+
+      ;; Description
+      (div (~tw :tokens "space-y-4")
+        (p (~tw :tokens "text-lg text-stone-600") spec-desc))
+
+      ;; Server-side results
+      (when server-results
+        (div (~tw :tokens "space-y-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Server: Python evaluator")
+          (p (~tw :tokens "text-stone-600")
+            "Ran "
+            (code (~tw :tokens "text-violet-700 text-sm") (str "test-" spec-name ".sx"))
+            " when this page loaded — "
+            (strong (str (get server-results "passed") "/" (get server-results "total") " passed"))
+            " in " (str (get server-results "elapsed-ms")) "ms.")
+          (pre (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
+            (get server-results "output"))))
+
+      ;; Browser test runner
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser: JavaScript evaluator")
+        (p (~tw :tokens "text-stone-600")
+          "Run this spec in the browser:")
+        (div (~tw :tokens "flex items-center gap-4")
+          (button :id (str "test-btn-" spec-name)
+            (~tw :tokens "px-4 py-2 rounded-md bg-violet-600 text-white font-medium text-sm hover:bg-violet-700 cursor-pointer")
+            :onclick (str "sxRunModularTests('" spec-name "','test-output-" spec-name "','test-btn-" spec-name "')")
+            (str "Run " spec-title)))
+        (pre :id (str "test-output-" spec-name)
+          (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
+          :style "display:none"
+          "")
+        ;; Hidden: spec source + framework source for the browser runner
+        (textarea :id (str "test-spec-" spec-name) :style "display:none" spec-source)
+        (textarea :id "test-framework-source" :style "display:none" framework-source)
+        (script :src (asset-url "/scripts/sx-test-runner.js")))
+
+      ;; Full source
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Specification source")
+        (p (~tw :tokens "text-xs text-stone-400 italic")
+          (str "test-" spec-name ".sx")
+          " — the canonical test specification for this module.")
+        (div (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
+          (pre (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
+            (code (highlight spec-source "sx"))))))))
diff --git a/sx/sx/language/test/index.sx b/sx/sx/language/test/index.sx
new file mode 100644
index 00000000..25834498
--- /dev/null
+++ b/sx/sx/language/test/index.sx
@@ -0,0 +1,133 @@
+;; Testing section — SX tests SX across every host.
+;; Modular test specs: eval, parser, router, render.
+;; Each page shows spec source, runs server-side, offers browser-side run button.
+;; ---------------------------------------------------------------------------
+;; Overview page
+;; ---------------------------------------------------------------------------
+(defcomp (&key server-results framework-source eval-source parser-source router-source render-source deps-source engine-source)
+  (~docs/page :title "Testing"
+    (div (~tw :tokens "space-y-8")
+
+      ;; Intro
+      (div (~tw :tokens "space-y-4")
+        (p (~tw :tokens "text-lg text-stone-600")
+          "SX tests itself. Test specs are written in SX and executed by SX evaluators on every host. "
+          "The same assertions run in Python, Node.js, and in the browser — from the same source files.")
+        (p (~tw :tokens "text-stone-600")
+          "The framework defines two macros ("
+          (code (~tw :tokens "text-violet-700 text-sm") "deftest")
+          " and "
+          (code (~tw :tokens "text-violet-700 text-sm") "defsuite")
+          ") and nine assertion helpers, all in SX. Each host provides only "
+          (strong "five platform functions")
+          " — everything else is pure SX."))
+
+      ;; Architecture
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Architecture")
+        (div (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
+          (pre (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono text-stone-700")
+"test-framework.sx            Macros + assertion helpers (loaded first)
+    |
+    +-- test-eval.sx           81 tests: evaluator + primitives
+    +-- test-parser.sx         39 tests: tokenizer, parser, serializer
+    +-- test-router.sx         18 tests: route matching + param extraction
+    +-- test-render.sx         23 tests: HTML rendering + components
+    +-- test-deps.sx           33 tests: dependency analysis + IO detection
+    +-- test-engine.sx         37 tests: trigger/swap/retry parsing
+
+Runners:
+    run.js                     Node.js — injects platform fns, runs specs
+    run.py                     Python — injects platform fns, runs specs
+    sx-test-runner.js          Browser — runs specs in this page
+
+Platform functions (5 total):
+    try-call (thunk)          -> {:ok true} | {:ok false :error \"msg\"}
+    report-pass (name)        -> output pass
+    report-fail (name error)  -> output fail
+    push-suite (name)         -> push suite context
+    pop-suite ()              -> pop suite context
+
+Per-spec platform functions:
+    parser:  sx-parse, sx-serialize, make-symbol, make-keyword, ...
+    router:  (none — pure spec, uses bootstrapped functions)
+    render:  render-html (wraps parse + render-to-html)
+    deps:    test-env (returns current evaluation environment)
+    engine:  (none — pure spec, uses bootstrapped functions)")))
+
+      ;; Server results
+      (when server-results
+        (div (~tw :tokens "space-y-3")
+          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Server: Python evaluator")
+          (p (~tw :tokens "text-stone-600")
+            "Ran all test specs when this page loaded — "
+            (strong (str (get server-results "passed") "/" (get server-results "total") " passed"))
+            " in " (str (get server-results "elapsed-ms")) "ms.")
+          (pre (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
+            (get server-results "output"))))
+
+      ;; Browser test runner
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser: JavaScript evaluator")
+        (p (~tw :tokens "text-stone-600")
+          "Run all test specs in the browser using "
+          (code (~tw :tokens "text-violet-700 text-sm") "sx-browser.js")
+          ":")
+        (div (~tw :tokens "flex items-center gap-4")
+          (button :id "test-btn-all"
+            (~tw :tokens "px-4 py-2 rounded-md bg-violet-600 text-white font-medium text-sm hover:bg-violet-700 cursor-pointer")
+            :onclick "sxRunModularTests('all','test-output-all','test-btn-all')"
+            "Run all tests"))
+        (pre :id "test-output-all"
+          (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
+          :style "display:none"
+          "")
+        ;; Hidden: all spec sources for the browser runner
+        (textarea :id "test-framework-source" :style "display:none" framework-source)
+        (textarea :id "test-spec-eval" :style "display:none" eval-source)
+        (textarea :id "test-spec-parser" :style "display:none" parser-source)
+        (textarea :id "test-spec-router" :style "display:none" router-source)
+        (textarea :id "test-spec-render" :style "display:none" render-source)
+        (textarea :id "test-spec-deps" :style "display:none" deps-source)
+        (textarea :id "test-spec-engine" :style "display:none" engine-source)
+        (script :src (asset-url "/scripts/sx-test-runner.js")))
+
+      ;; Test spec index
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Test specs")
+        (div (~tw :tokens "grid grid-cols-1 md:grid-cols-2 gap-4")
+          (a :href "/sx/(language.(test.eval))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
+            (h3 (~tw :tokens "font-semibold text-stone-800") "Evaluator")
+            (p (~tw :tokens "text-sm text-stone-500") "81 tests — literals, arithmetic, strings, lists, dicts, special forms, lambdas, components, macros")
+            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-eval.sx"))
+          (a :href "/sx/(language.(test.parser))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
+            (h3 (~tw :tokens "font-semibold text-stone-800") "Parser")
+            (p (~tw :tokens "text-sm text-stone-500") "39 tests — tokenization, parsing, escape sequences, quote sugar, serialization, round-trips")
+            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-parser.sx"))
+          (a :href "/sx/(language.(test.router))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
+            (h3 (~tw :tokens "font-semibold text-stone-800") "Router")
+            (p (~tw :tokens "text-sm text-stone-500") "18 tests — path splitting, pattern parsing, segment matching, parameter extraction")
+            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-router.sx"))
+          (a :href "/sx/(language.(test.render))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
+            (h3 (~tw :tokens "font-semibold text-stone-800") "Renderer")
+            (p (~tw :tokens "text-sm text-stone-500") "23 tests — elements, attributes, void elements, fragments, escaping, control flow, components")
+            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-render.sx"))
+          (a :href "/sx/(language.(test.deps))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
+            (h3 (~tw :tokens "font-semibold text-stone-800") "Dependencies")
+            (p (~tw :tokens "text-sm text-stone-500") "33 tests — scan-refs, transitive-deps, components-needed, IO detection, purity classification")
+            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-deps.sx"))
+          (a :href "/sx/(language.(test.engine))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
+            (h3 (~tw :tokens "font-semibold text-stone-800") "Engine")
+            (p (~tw :tokens "text-sm text-stone-500") "37 tests — parse-time, trigger specs, swap specs, retry logic, param filtering")
+            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-engine.sx"))))
+
+      ;; What it proves
+      (div (~tw :tokens "rounded-lg border border-blue-200 bg-blue-50 p-5 space-y-3")
+        (h2 (~tw :tokens "text-lg font-semibold text-blue-900") "What this proves")
+        (ol (~tw :tokens "list-decimal list-inside text-blue-800 space-y-2 text-sm")
+          (li "Test specs are " (strong "written in SX") " and " (strong "executed by SX") " — no code generation")
+          (li "The same tests run on " (strong "Python, Node.js, and in the browser") " from the same files")
+          (li "Each host provides only " (strong "5 platform functions") " — everything else is pure SX")
+          (li "Modular specs test each part independently — evaluator, parser, router, renderer")
+          (li "Per-spec platform functions extend the 5-function contract for module-specific capabilities")
+          (li "Platform divergences are " (strong "exposed by the tests") ", not hidden"))))))
diff --git a/sx/sx/language/test/runners/index.sx b/sx/sx/language/test/runners/index.sx
new file mode 100644
index 00000000..89bc39c8
--- /dev/null
+++ b/sx/sx/language/test/runners/index.sx
@@ -0,0 +1,109 @@
+;; ---------------------------------------------------------------------------
+;; Runners page
+;; ---------------------------------------------------------------------------
+(defcomp ()
+  (~docs/page :title "Test Runners"
+    (div (~tw :tokens "space-y-8")
+
+      (div (~tw :tokens "space-y-4")
+        (p (~tw :tokens "text-lg text-stone-600")
+          "Three runners execute the same test specs on different hosts. Each injects the five platform functions and any per-spec extensions, then evaluates the SX source directly.")
+        (p (~tw :tokens "text-stone-600")
+          "All runners produce "
+          (a :href "https://testanything.org/" (~tw :tokens "text-violet-700 underline") "TAP")
+          " output and accept module names as arguments."))
+
+      ;; Node.js runner
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Node.js: run.js")
+        (div (~tw :tokens "rounded-lg border border-stone-200 bg-white p-5 space-y-3")
+          (h3 (~tw :tokens "text-sm font-medium text-stone-500 uppercase tracking-wide") "Usage")
+          (~docs/code :src
+            (highlight "# Run all specs\nnode shared/sx/tests/run.js\n\n# Run specific specs\nnode shared/sx/tests/run.js eval parser\n\n# Legacy mode (monolithic test.sx)\nnode shared/sx/tests/run.js --legacy" "bash")))
+        (p (~tw :tokens "text-stone-600 text-sm")
+          "Uses "
+          (code (~tw :tokens "text-violet-700 text-sm") "sx-browser.js")
+          " as the evaluator. Router tests use bootstrapped functions from "
+          (code (~tw :tokens "text-violet-700 text-sm") "Sx.splitPathSegments")
+          " etc. Render tests use "
+          (code (~tw :tokens "text-violet-700 text-sm") "Sx.renderToHtml")
+          "."))
+
+      ;; Python runner
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Python: run.py")
+        (div (~tw :tokens "rounded-lg border border-stone-200 bg-white p-5 space-y-3")
+          (h3 (~tw :tokens "text-sm font-medium text-stone-500 uppercase tracking-wide") "Usage")
+          (~docs/code :src
+            (highlight "# Run all specs\npython shared/sx/tests/run.py\n\n# Run specific specs\npython shared/sx/tests/run.py eval parser\n\n# Legacy mode (monolithic test.sx)\npython shared/sx/tests/run.py --legacy" "bash")))
+        (p (~tw :tokens "text-stone-600 text-sm")
+          "Uses the hand-written Python evaluator ("
+          (code (~tw :tokens "text-violet-700 text-sm") "evaluator.py")
+          "). Router tests import bootstrapped functions from "
+          (code (~tw :tokens "text-violet-700 text-sm") "sx_ref.py")
+          " because the hand-written evaluator's "
+          (code (~tw :tokens "text-violet-700 text-sm") "set!")
+          " doesn't propagate across lambda closure copies."))
+
+      ;; Browser runner
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser: sx-test-runner.js")
+        (p (~tw :tokens "text-stone-600")
+          "Runs in the browser on each test page. The spec source is embedded in a hidden textarea; the runner parses and evaluates it using the same "
+          (code (~tw :tokens "text-violet-700 text-sm") "sx-browser.js")
+          " that renders the page itself.")
+        (p (~tw :tokens "text-stone-600")
+          "This is the strongest proof of cross-host parity — the browser evaluator that users depend on is the same one running the tests."))
+
+      ;; Platform functions table
+      (div (~tw :tokens "space-y-3")
+        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Platform functions")
+        (div (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+          (table (~tw :tokens "w-full text-left text-sm")
+            (thead (tr (~tw :tokens "border-b border-stone-200 bg-stone-100")
+              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Function")
+              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Scope")
+              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Purpose")))
+            (tbody
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "try-call")
+                (td (~tw :tokens "px-3 py-2") "All specs")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Call a thunk, catch errors, return result dict"))
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "report-pass")
+                (td (~tw :tokens "px-3 py-2") "All specs")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Report a passing test"))
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "report-fail")
+                (td (~tw :tokens "px-3 py-2") "All specs")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Report a failing test with error message"))
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "push-suite")
+                (td (~tw :tokens "px-3 py-2") "All specs")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Push suite name onto context stack"))
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "pop-suite")
+                (td (~tw :tokens "px-3 py-2") "All specs")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Pop suite name from context stack"))
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "sx-parse")
+                (td (~tw :tokens "px-3 py-2") "Parser")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Parse SX source to AST"))
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "sx-serialize")
+                (td (~tw :tokens "px-3 py-2") "Parser")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Serialize AST back to SX source text"))
+              (tr (~tw :tokens "border-b border-stone-100")
+                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "render-html")
+                (td (~tw :tokens "px-3 py-2") "Renderer")
+                (td (~tw :tokens "px-3 py-2 text-stone-700") "Parse SX source and render to HTML string"))))))
+
+      ;; Adding a new host
+      (div (~tw :tokens "rounded-lg border border-blue-200 bg-blue-50 p-5 space-y-3")
+        (h2 (~tw :tokens "text-lg font-semibold text-blue-900") "Adding a new host")
+        (ol (~tw :tokens "list-decimal list-inside text-blue-800 space-y-2 text-sm")
+          (li "Implement the 5 platform functions in your target language")
+          (li "Load " (code (~tw :tokens "text-sm") "test-framework.sx") " — it defines deftest/defsuite macros")
+          (li "Load the spec file(s) — the evaluator runs the tests automatically")
+          (li "Add per-spec platform functions if testing parser or renderer")
+          (li "Compare TAP output across hosts — divergences reveal platform-specific semantics"))))))
diff --git a/sx/sx/layouts.sx b/sx/sx/layouts.sx
deleted file mode 100644
index 9c9f25e7..00000000
--- a/sx/sx/layouts.sx
+++ /dev/null
@@ -1,190 +0,0 @@
-(defisland
-  ~layouts/header
-  (&key path)
-  (let
-    ((families (list "violet" "rose" "blue" "emerald" "amber" "cyan" "red" "teal" "pink" "indigo"))
-      (store
-        (if (client?) (def-store "header-color" (fn () {:idx (signal 0) :shade (signal 500)})) nil))
-      (idx (if store (get store "idx") (signal 0)))
-      (shade (if store (get store "shade") (signal 500)))
-      (current-family
-        (computed (fn () (nth families (mod (deref idx) (len families)))))))
-    (div
-      (~tw :tokens "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center")
-      (a
-        :href "/sx/"
-        :sx-get "/sx/"
-        :sx-target "#sx-content"
-        :sx-select "#sx-content"
-        :sx-swap "innerHTML"
-        :sx-push-url "true"
-        (~tw :tokens "block no-underline")
-        (lake
-          :id "logo"
-          (span
-            (~tw
-              :tokens "block mb-2 text-violet-699 text-4xl font-bold font-mono")
-            "(<sx>)")))
-      (p
-        (~tw :tokens "mb-1 text-stone-500 text-lg")
-        "The framework-free "
-        (span
-          (~tw :tokens "font-bold")
-          :style (str
-            "color:"
-            (colour (deref current-family) (deref shade))
-            ";"
-            "cursor:pointer;transition:color 0.3s,font-weight 0.3s;")
-          :on-click (fn
-            (e)
-            (batch
-              (fn
-                ()
-                (swap! idx inc)
-                (reset! shade (+ 400 (* (mod (* (deref idx) 137) 5) 50))))))
-          "reactive")
-        " hypermedium")
-      (lake
-        :id "copyright"
-        (p
-          (~tw :tokens "text-stone-400 text-xs")
-          "© Giles Bradshaw 2026"
-          (when
-            path
-            (span
-              (~tw :tokens "text-stone-300 text-xs")
-              :style "margin-left:0.5em;"
-              (str "· " path))))))))
-
-(defcomp
-  ~layouts/nav-sibling-row
-  (&key node siblings is-leaf level depth)
-  :affinity :server
-  (let*
-    ((sibs (or siblings (list)))
-      (count (len sibs))
-      (row-opacity
-        (if
-          (and level depth (> depth 0))
-          (+ (* (/ level depth) 0.75) 0.25)
-          1)))
-    (when
-      (> count 0)
-      (let*
-        ((idx (find-nav-index sibs node))
-          (prev-idx (mod (+ (- idx 1) count) count))
-          (next-idx (mod (+ idx 1) count))
-          (prev-node (nth sibs prev-idx))
-          (next-node (nth sibs next-idx)))
-        (div
-          (~tw
-            :tokens "w-full max-w-3xl mx-auto px-4 py-2 grid grid-cols-3 items-center")
-          :style (str "opacity:" row-opacity ";transition:opacity 0.3s;")
-          (a
-            :href (get prev-node "href")
-            :sx-get (get prev-node "href")
-            :sx-target "#sx-content"
-            :sx-select "#sx-content"
-            :sx-swap "innerHTML"
-            :sx-push-url "true"
-            (~tw :tokens "text-right min-w-0 truncate text-stone-500 text-sm")
-            (str "← " (get prev-node "label")))
-          (a
-            :href (get node "href")
-            :sx-get (get node "href")
-            :sx-target "#sx-content"
-            :sx-select "#sx-content"
-            :sx-swap "innerHTML"
-            :sx-push-url "true"
-            (~tw
-              :tokens (str
-                "text-center min-w-0 truncate px-1 "
-                (if
-                  is-leaf
-                  "text-violet-700 text-2xl font-bold"
-                  "text-violet-700 text-lg font-semibold")))
-            (get node "label"))
-          (a
-            :href (get next-node "href")
-            :sx-get (get next-node "href")
-            :sx-target "#sx-content"
-            :sx-select "#sx-content"
-            :sx-swap "innerHTML"
-            :sx-push-url "true"
-            (~tw :tokens "text-left min-w-0 truncate text-stone-500 text-sm")
-            (str (get next-node "label") " →")))))))
-
-(defcomp
-  ~layouts/nav-children
-  (&key items)
-  :affinity :server
-  (div
-    (~tw :tokens "max-w-3xl mx-auto px-4 py-3")
-    (div
-      (~tw :tokens "flex flex-wrap justify-center gap-2")
-      (map
-        (fn
-          (item)
-          (a
-            :href (get item "href")
-            :sx-get (get item "href")
-            :sx-target "#sx-content"
-            :sx-select "#sx-content"
-            :sx-swap "innerHTML"
-            :sx-push-url "true"
-            (~tw
-              :tokens "px-3 py-1.5 rounded border transition-colors text-violet-700 text-sm border-violet-200")
-            (get item "label")))
-        items))))
-
-(defcomp
-  ~layouts/doc
-  (&key path &rest children)
-  :affinity :server
-  (let*
-    ((nav-state (resolve-nav-path sx-nav-tree (or path "/")))
-      (trail (or (get nav-state "trail") (list)))
-      (trail-len (len trail))
-      (depth (+ trail-len 1)))
-    (<>
-      (div
-        :id "sx-nav"
-        (~tw :tokens "mb-6")
-        :sx-swap-oob "innerHTML"
-        (div
-          :id "logo-opacity"
-          :style (str
-            "opacity:"
-            (+ (* (/ 1 depth) 0.75) 0.25)
-            ";"
-            "transition:opacity 0.3s;")
-          (~layouts/header :path (or path "/")))
-        (map-indexed
-          (fn
-            (i crumb)
-            (~layouts/nav-sibling-row
-              :node (get crumb "node")
-              :siblings (get crumb "siblings")
-              :is-leaf (= i (- trail-len 1))
-              :level (+ i 2)
-              :depth depth))
-          trail)
-        (when
-          (get nav-state "children")
-          (~layouts/nav-children :items (get nav-state "children"))))
-      (div :id "sx-content" (error-boundary children) (~tw/flush)))))
-
-(defcomp ~layouts/docs-layout-full () nil)
-
-(defcomp ~layouts/docs-layout-oob () nil)
-
-(defcomp ~layouts/docs-layout-mobile () nil)
-
-(defcomp ~layouts/standalone-docs-layout-full () nil)
-
-(defcomp
-  ~layouts/standalone-docs-layout-oob
-  (&key content)
-  (~shared:layout/oob-sx :content content))
-
-(defcomp ~layouts/standalone-docs-layout-mobile () nil)
diff --git a/sx/sx/layouts/doc.sx b/sx/sx/layouts/doc.sx
new file mode 100644
index 00000000..6a66e4b9
--- /dev/null
+++ b/sx/sx/layouts/doc.sx
@@ -0,0 +1,35 @@
+(defcomp
+  (&key path &rest children)
+  :affinity :server
+  (let*
+    ((nav-state (resolve-nav-path sx-nav-tree (or path "/")))
+      (trail (or (get nav-state "trail") (list)))
+      (trail-len (len trail))
+      (depth (+ trail-len 1)))
+    (<>
+      (div
+        :id "sx-nav"
+        (~tw :tokens "mb-6")
+        :sx-swap-oob "innerHTML"
+        (div
+          :id "logo-opacity"
+          :style (str
+            "opacity:"
+            (+ (* (/ 1 depth) 0.75) 0.25)
+            ";"
+            "transition:opacity 0.3s;")
+          (~layouts/header :path (or path "/")))
+        (map-indexed
+          (fn
+            (i crumb)
+            (~layouts/nav-sibling-row
+              :node (get crumb "node")
+              :siblings (get crumb "siblings")
+              :is-leaf (= i (- trail-len 1))
+              :level (+ i 2)
+              :depth depth))
+          trail)
+        (when
+          (get nav-state "children")
+          (~layouts/nav-children :items (get nav-state "children"))))
+      (div :id "sx-content" (error-boundary children) (~tw/flush)))))
diff --git a/sx/sx/layouts/docs-layout-full.sx b/sx/sx/layouts/docs-layout-full.sx
new file mode 100644
index 00000000..f52aca81
--- /dev/null
+++ b/sx/sx/layouts/docs-layout-full.sx
@@ -0,0 +1 @@
+(defcomp () nil)
diff --git a/sx/sx/layouts/docs-layout-mobile.sx b/sx/sx/layouts/docs-layout-mobile.sx
new file mode 100644
index 00000000..f52aca81
--- /dev/null
+++ b/sx/sx/layouts/docs-layout-mobile.sx
@@ -0,0 +1 @@
+(defcomp () nil)
diff --git a/sx/sx/layouts/docs-layout-oob.sx b/sx/sx/layouts/docs-layout-oob.sx
new file mode 100644
index 00000000..f52aca81
--- /dev/null
+++ b/sx/sx/layouts/docs-layout-oob.sx
@@ -0,0 +1 @@
+(defcomp () nil)
diff --git a/sx/sx/layouts/header.sx b/sx/sx/layouts/header.sx
new file mode 100644
index 00000000..5809a26c
--- /dev/null
+++ b/sx/sx/layouts/header.sx
@@ -0,0 +1,56 @@
+(defisland
+  (&key path)
+  (let
+    ((families (list "violet" "rose" "blue" "emerald" "amber" "cyan" "red" "teal" "pink" "indigo"))
+      (store
+        (if (client?) (def-store "header-color" (fn () {:idx (signal 0) :shade (signal 500)})) nil))
+      (idx (if store (get store "idx") (signal 0)))
+      (shade (if store (get store "shade") (signal 500)))
+      (current-family
+        (computed (fn () (nth families (mod (deref idx) (len families)))))))
+    (div
+      (~tw :tokens "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center")
+      (a
+        :href "/sx/"
+        :sx-get "/sx/"
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "innerHTML"
+        :sx-push-url "true"
+        (~tw :tokens "block no-underline")
+        (lake
+          :id "logo"
+          (span
+            (~tw
+              :tokens "block mb-2 text-violet-699 text-4xl font-bold font-mono")
+            "(<sx>)")))
+      (p
+        (~tw :tokens "mb-1 text-stone-500 text-lg")
+        "The framework-free "
+        (span
+          (~tw :tokens "font-bold")
+          :style (str
+            "color:"
+            (colour (deref current-family) (deref shade))
+            ";"
+            "cursor:pointer;transition:color 0.3s,font-weight 0.3s;")
+          :on-click (fn
+            (e)
+            (batch
+              (fn
+                ()
+                (swap! idx inc)
+                (reset! shade (+ 400 (* (mod (* (deref idx) 137) 5) 50))))))
+          "reactive")
+        " hypermedium")
+      (lake
+        :id "copyright"
+        (p
+          (~tw :tokens "text-stone-400 text-xs")
+          "© Giles Bradshaw 2026"
+          (when
+            path
+            (span
+              (~tw :tokens "text-stone-300 text-xs")
+              :style "margin-left:0.5em;"
+              (str "· " path))))))))
diff --git a/sx/sx/layouts/nav-children.sx b/sx/sx/layouts/nav-children.sx
new file mode 100644
index 00000000..ac0a841e
--- /dev/null
+++ b/sx/sx/layouts/nav-children.sx
@@ -0,0 +1,21 @@
+(defcomp
+  (&key items)
+  :affinity :server
+  (div
+    (~tw :tokens "max-w-3xl mx-auto px-4 py-3")
+    (div
+      (~tw :tokens "flex flex-wrap justify-center gap-2")
+      (map
+        (fn
+          (item)
+          (a
+            :href (get item "href")
+            :sx-get (get item "href")
+            :sx-target "#sx-content"
+            :sx-select "#sx-content"
+            :sx-swap "innerHTML"
+            :sx-push-url "true"
+            (~tw
+              :tokens "px-3 py-1.5 rounded border transition-colors text-violet-700 text-sm border-violet-200")
+            (get item "label")))
+        items))))
diff --git a/sx/sx/layouts/nav-sibling-row.sx b/sx/sx/layouts/nav-sibling-row.sx
new file mode 100644
index 00000000..0720d9d5
--- /dev/null
+++ b/sx/sx/layouts/nav-sibling-row.sx
@@ -0,0 +1,56 @@
+(defcomp
+  (&key node siblings is-leaf level depth)
+  :affinity :server
+  (let*
+    ((sibs (or siblings (list)))
+      (count (len sibs))
+      (row-opacity
+        (if
+          (and level depth (> depth 0))
+          (+ (* (/ level depth) 0.75) 0.25)
+          1)))
+    (when
+      (> count 0)
+      (let*
+        ((idx (find-nav-index sibs node))
+          (prev-idx (mod (+ (- idx 1) count) count))
+          (next-idx (mod (+ idx 1) count))
+          (prev-node (nth sibs prev-idx))
+          (next-node (nth sibs next-idx)))
+        (div
+          (~tw
+            :tokens "w-full max-w-3xl mx-auto px-4 py-2 grid grid-cols-3 items-center")
+          :style (str "opacity:" row-opacity ";transition:opacity 0.3s;")
+          (a
+            :href (get prev-node "href")
+            :sx-get (get prev-node "href")
+            :sx-target "#sx-content"
+            :sx-select "#sx-content"
+            :sx-swap "innerHTML"
+            :sx-push-url "true"
+            (~tw :tokens "text-right min-w-0 truncate text-stone-500 text-sm")
+            (str "← " (get prev-node "label")))
+          (a
+            :href (get node "href")
+            :sx-get (get node "href")
+            :sx-target "#sx-content"
+            :sx-select "#sx-content"
+            :sx-swap "innerHTML"
+            :sx-push-url "true"
+            (~tw
+              :tokens (str
+                "text-center min-w-0 truncate px-1 "
+                (if
+                  is-leaf
+                  "text-violet-700 text-2xl font-bold"
+                  "text-violet-700 text-lg font-semibold")))
+            (get node "label"))
+          (a
+            :href (get next-node "href")
+            :sx-get (get next-node "href")
+            :sx-target "#sx-content"
+            :sx-select "#sx-content"
+            :sx-swap "innerHTML"
+            :sx-push-url "true"
+            (~tw :tokens "text-left min-w-0 truncate text-stone-500 text-sm")
+            (str (get next-node "label") " →")))))))
diff --git a/sx/sx/layouts/standalone-docs-layout-full.sx b/sx/sx/layouts/standalone-docs-layout-full.sx
new file mode 100644
index 00000000..f52aca81
--- /dev/null
+++ b/sx/sx/layouts/standalone-docs-layout-full.sx
@@ -0,0 +1 @@
+(defcomp () nil)
diff --git a/sx/sx/layouts/standalone-docs-layout-mobile.sx b/sx/sx/layouts/standalone-docs-layout-mobile.sx
new file mode 100644
index 00000000..f52aca81
--- /dev/null
+++ b/sx/sx/layouts/standalone-docs-layout-mobile.sx
@@ -0,0 +1 @@
+(defcomp () nil)
diff --git a/sx/sx/layouts/standalone-docs-layout-oob.sx b/sx/sx/layouts/standalone-docs-layout-oob.sx
new file mode 100644
index 00000000..9af25096
--- /dev/null
+++ b/sx/sx/layouts/standalone-docs-layout-oob.sx
@@ -0,0 +1,3 @@
+(defcomp
+  (&key content)
+  (~shared:layout/oob-sx :content content))
diff --git a/sx/sx/nav-data.sx b/sx/sx/nav-data.sx
index 86f8ca4f..a8434202 100644
--- a/sx/sx/nav-data.sx
+++ b/sx/sx/nav-data.sx
@@ -741,10 +741,6 @@
 
 (define sx-nav-tree {:href "/sx/" :children (list {:href "/sx/(geography)" :children (list {:href "/sx/(geography.(reactive))" :children reactive-islands-nav-items :label "Reactive Islands"} {:href "/sx/(geography.(hypermedia))" :children (list {:href "/sx/(geography.(hypermedia.(reference)))" :children reference-nav-items :label "Reference"} {:href "/sx/(geography.(hypermedia.(example)))" :children examples-nav-items :label "Examples"}) :label "Hypermedia Lakes"} {:href "/sx/(geography.(scopes))" :summary "The unified primitive beneath provide, collect!, spreads, and islands. Named scope with downward value, upward accumulation, and a dedup flag." :label "Scopes"} {:href "/sx/(geography.(provide))" :summary "Sugar for scope-with-value. Render-time dynamic scope — the substrate beneath spreads, CSSX, and script collection." :label "Provide / Emit!"} {:href "/sx/(geography.(spreads))" :summary "Child-to-parent communication across render boundaries — spread, collect!, reactive-spread, built on scopes." :label "Spreads"} {:href "/sx/(geography.(marshes))" :children marshes-examples-nav-items :summary "Where reactivity and hypermedia interpenetrate — server writes to signals, reactive transforms reshape server content, client state modifies how hypermedia is interpreted." :label "Marshes"} {:href "/sx/(geography.(isomorphism))" :children isomorphism-nav-items :label "Isomorphism"} {:href "/sx/(geography.(cek))" :children cek-nav-items :label "CEK Machine"}) :label "Geography"} {:href "/sx/(language)" :children (list {:href "/sx/(language.(doc))" :children docs-nav-items :label "Docs"} {:href "/sx/(language.(spec))" :children specs-nav-items :label "Specs"} {:href "/sx/(language.(spec.(explore.evaluator)))" :label "Spec Explorer"} {:href "/sx/(language.(bootstrapper))" :children bootstrappers-nav-items :label "Bootstrappers"} {:href "/sx/(language.(test))" :children testing-nav-items :label "Testing"}) :label "Language"} {:href "/sx/(applications)" :children (list {:href "/sx/(applications.(sx-urls))" :label "SX URLs"} {:href "/sx/(applications.(cssx))" :children cssx-nav-items :label "CSSX"} {:href "/sx/(applications.(protocol))" :children protocols-nav-items :label "Protocols"} {:href "/sx/(applications.(sx-pub))" :label "sx-pub"} {:href "/sx/(applications.(sx-tools))" :label "SX Tools"} {:href "/sx/(geography.(reactive-runtime))" :children reactive-runtime-nav-items :label "Reactive Runtime"}) :label "Applications"} {:href "/sx/(etc)" :children (list {:href "/sx/(etc.(essay))" :children essays-nav-items :label "Essays"} {:href "/sx/(etc.(philosophy))" :children philosophy-nav-items :label "Philosophy"} {:href "/sx/(etc.(plan))" :children plans-nav-items :label "Plans"}) :label "Etc"}) :label "sx"})
 
-(let
-  ((apps (nth (get sx-nav-tree "children") 2)) (hs-entry {:href "/sx/(applications.(hyperscript))" :label "_hyperscript"}))
-  (dict-set! apps "children" (append (get apps "children") (list hs-entry))))
-
 (define
   has-descendant-href?
   (fn
@@ -818,12 +814,38 @@
 
 (define
   hyperscript-nav-items
-  (list (dict :label "_hyperscript" :href "/sx/(applications.(hyperscript))")))
+  (list
+    (dict :label "_hyperscript" :href "/sx/(applications.(hyperscript))")
+    (dict :label "htmx.sx" :href "/sx/(applications.(hyperscript.htmx))")))
 
 (define
   sxtp-nav-items
   (list (dict :label "SXTP Protocol" :href "/sx/(applications.(sxtp))")))
 
+(define
+  graphql-nav-items
+  (list (dict :label "GraphQL" :href "/sx/(applications.(graphql))")))
+
 (define
   pretext-nav-items
   (list (dict :label "Pretext" :href "/sx/(applications.(pretext))")))
+
+(define
+  htmx-nav-items
+  (list
+    (dict :label "Demo" :href "/sx/(applications.(htmx))")
+    (dict :label "Reference" :href "/sx/(applications.(hyperscript.htmx))")))
+
+(let
+  ((apps (nth (get sx-nav-tree "children") 2))
+    (htmx-entry {:href "/sx/(applications.(htmx))" :children htmx-nav-items :label "htmx"})
+    (hs-entry {:href "/sx/(applications.(hyperscript))" :label "_hyperscript"})
+    (sxtp-entry {:href "/sx/(applications.(sxtp))" :children sxtp-nav-items :label "SXTP"})
+    (pretext-entry {:href "/sx/(applications.(pretext))" :children pretext-nav-items :label "Pretext"})
+    (gql-entry {:href "/sx/(applications.(graphql))" :children graphql-nav-items :label "GraphQL" :page-fn "graphql"}))
+  (dict-set!
+    apps
+    "children"
+    (append
+      (get apps "children")
+      (list htmx-entry hs-entry sxtp-entry pretext-entry gql-entry))))
diff --git a/sx/sx/nav-tools.sx b/sx/sx/nav-tools.sx
index 743d9b2b..5ec0cc26 100644
--- a/sx/sx/nav-tools.sx
+++ b/sx/sx/nav-tools.sx
@@ -1,6 +1,6 @@
 ;; Navigation items for the Tools section
 
-(define tools-nav-items
+(define
   (list
     (dict :label "SX Tools" :href "/sx/(tools.(sx-tools))")
     (dict :label "Services" :href "/sx/(tools.(services))")
diff --git a/sx/sx/nav-tree.sx b/sx/sx/nav-tree.sx
index 64b61839..05554ec2 100644
--- a/sx/sx/nav-tree.sx
+++ b/sx/sx/nav-tree.sx
@@ -124,6 +124,10 @@
             :label "Native Browser")
           (dict :href "/sx/(applications.(sxtp))" :label "SXTP Protocol")
           (dict :href "/sx/(applications.(pretext))" :label "Pretext")
+          (dict
+            :href "/sx/(applications.(htmx))"
+            :label "htmx"
+            :children htmx-nav-items)
           (dict
             :href "/sx/(applications.(hyperscript))"
             :label "_hyperscript"
diff --git a/sx/sx/not-found.sx b/sx/sx/not-found.sx
index 1faef918..d63acc49 100644
--- a/sx/sx/not-found.sx
+++ b/sx/sx/not-found.sx
@@ -1,5 +1,4 @@
 (defcomp
-  ~not-found/content
   (&key (path :as string?))
   (div
     (~tw :tokens "max-w-3xl mx-auto px-4 py-12 text-center")
diff --git a/sx/sx/page-functions.sx b/sx/sx/page-functions.sx
index 0eebe1cd..394f09b8 100644
--- a/sx/sx/page-functions.sx
+++ b/sx/sx/page-functions.sx
@@ -716,6 +716,8 @@
     nil
     "-content"))
 
+(define htmx (make-page-fn "~htmx/demo-content" "~htmx/" nil "-content"))
+
 (define
   sxtp
   (make-page-fn
@@ -724,6 +726,10 @@
     nil
     "-content"))
 
+(define
+  graphql
+  (make-page-fn "~graphql/demo-content" "~graphql/" nil "-content"))
+
 (define
   pretext
   (make-page-fn "~pretext-demo/content" "~pretext-demo/" nil "-content"))
diff --git a/sx/sx/protocols.sx b/sx/sx/protocols.sx
deleted file mode 100644
index 9c604452..00000000
--- a/sx/sx/protocols.sx
+++ /dev/null
@@ -1,98 +0,0 @@
-;; Protocol documentation pages — fully self-contained
-
-(defcomp ~protocols/wire-format-content ()
-  (~docs/page :title "Wire Format"
-    (~docs/section :title "The text/sx content type" :id "content-type"
-      (p (~tw :tokens "text-stone-600")
-        "sx responses use content type text/sx. The body is s-expression source code. The client parses and evaluates it, then renders the result into the DOM.")
-      (~docs/code :src (highlight "HTTP/1.1 200 OK\nContent-Type: text/sx\nSX-Css-Hash: a1b2c3d4\n\n(div :class \"p-4\"\n  (~card :title \"Hello\"))" "bash")))
-    (~docs/section :title "Request lifecycle" :id "lifecycle"
-      (p (~tw :tokens "text-stone-600")
-        "1. User interacts with an element that has sx-get/sx-post/etc.")
-      (p (~tw :tokens "text-stone-600")
-        "2. sx.js fires sx:beforeRequest, then sends the HTTP request with SX-Request: true header.")
-      (p (~tw :tokens "text-stone-600")
-        "3. Server builds s-expression tree, scans CSS classes, prepends missing component definitions.")
-      (p (~tw :tokens "text-stone-600")
-        "4. Client receives text/sx response, parses it, evaluates it, renders to DOM.")
-      (p (~tw :tokens "text-stone-600")
-        "5. sx.js fires sx:afterSwap and sx:afterSettle.")
-      (p (~tw :tokens "text-stone-600")
-        "6. Any sx-swap-oob elements are swapped into their targets elsewhere in the DOM."))
-    (~docs/section :title "Component definitions" :id "components"
-      (p (~tw :tokens "text-stone-600")
-        "On full page loads, component definitions are in <script type=\"text/sx\" data-components>. On subsequent sx requests, missing definitions are prepended to the response body. The client caches definitions in localStorage keyed by a content hash."))))
-
-(defcomp ~protocols/fragments-content ()
-  (~docs/page :title "Cross-Service Fragments"
-    (~docs/section :title "Fragment protocol" :id "protocol"
-      (p (~tw :tokens "text-stone-600")
-        "Rose Ash runs as independent microservices. Each service can expose HTML or sx fragments that other services compose into their pages. Fragment endpoints return text/sx or text/html.")
-      (p (~tw :tokens "text-stone-600")
-        "The frag resolver is an I/O primitive in the render tree:")
-      (~docs/code :src (highlight "(frag \"blog\" \"link-card\" :slug \"hello\")" "lisp")))
-    (~docs/section :title "SxExpr wrapping" :id "wrapping"
-      (p (~tw :tokens "text-stone-600")
-        "When a fragment returns text/sx, the response is wrapped in an SxExpr and embedded directly in the render tree. When it returns text/html, it's wrapped in a ~rich-text component that inserts the HTML via raw!. This allows transparent composition across service boundaries."))
-    (~docs/section :title "fetch_fragments()" :id "fetch"
-      (p (~tw :tokens "text-stone-600")
-        "The Python helper fetch_fragments() fetches multiple fragments in parallel via asyncio.gather(). Fragments are cached in Redis with short TTLs. Each fragment request is HMAC-signed for authentication."))))
-
-(defcomp ~protocols/resolver-io-content ()
-  (~docs/page :title "Resolver I/O"
-    (~docs/section :title "Async I/O primitives" :id "primitives"
-      (p (~tw :tokens "text-stone-600")
-        "The sx resolver identifies I/O nodes in the render tree, groups them, executes them in parallel via asyncio.gather(), and substitutes results back in.")
-      (p (~tw :tokens "text-stone-600")
-        "I/O primitives:")
-      (ul (~tw :tokens "space-y-2 text-stone-600")
-        (li (span (~tw :tokens "font-mono text-violet-700") "frag") " — fetch a cross-service fragment")
-        (li (span (~tw :tokens "font-mono text-violet-700") "query") " — read data from another service")
-        (li (span (~tw :tokens "font-mono text-violet-700") "action") " — execute a write on another service")
-        (li (span (~tw :tokens "font-mono text-violet-700") "current-user") " — resolve the current authenticated user")))
-    (~docs/section :title "Execution model" :id "execution"
-      (p (~tw :tokens "text-stone-600")
-        "The render tree is walked to find I/O nodes. All nodes at the same depth are gathered and executed in parallel. Results replace the I/O nodes in the tree. The walk continues until no more I/O nodes are found. This typically completes in 1-2 passes."))))
-
-(defcomp ~protocols/internal-services-content ()
-  (~docs/page :title "Internal Services"
-    (~docs/note
-      (p "Honest note: the internal service protocol is JSON, not sx. Sx is the composition layer on top. The protocols below are the plumbing underneath."))
-    (~docs/section :title "HMAC-signed HTTP" :id "hmac"
-      (p (~tw :tokens "text-stone-600")
-        "Services communicate via HMAC-signed HTTP requests with short timeouts:")
-      (ul (~tw :tokens "space-y-2 text-stone-600 font-mono text-sm")
-        (li "GET /internal/data/{query} — read data (3s timeout)")
-        (li "POST /internal/actions/{action} — execute write (5s timeout)")
-        (li "POST /internal/inbox — ActivityPub-shaped event delivery")))
-    (~docs/section :title "fetch_data / call_action" :id "fetch"
-      (p (~tw :tokens "text-stone-600")
-        "Python helpers fetch_data() and call_action() handle HMAC signing, serialization, and error handling. They resolve service URLs from environment variables (INTERNAL_URL_BLOG, etc) and fall back to public URLs in development."))))
-
-(defcomp ~protocols/activitypub-content ()
-  (~docs/page :title "ActivityPub"
-    (~docs/note
-      (p "Honest note: ActivityPub wire format is JSON-LD, not sx. This documents how AP integrates with the sx rendering layer."))
-    (~docs/section :title "AP activities" :id "activities"
-      (p (~tw :tokens "text-stone-600")
-        "Rose Ash services communicate cross-domain writes via ActivityPub-shaped activities. Each service has a virtual actor. Activities are JSON-LD objects sent to /internal/inbox endpoints. RSA signatures authenticate the sender."))
-    (~docs/section :title "Event bus" :id "bus"
-      (p (~tw :tokens "text-stone-600")
-        "The event bus dispatches activities to registered handlers. Handlers are async functions that process the activity and may trigger side effects. The bus runs as a background processor in each service."))))
-
-(defcomp ~protocols/future-content ()
-  (~docs/page :title "Future Possibilities"
-    (~docs/note
-      (p "This page is speculative. Nothing here is implemented. It documents ideas that may or may not happen."))
-    (~docs/section :title "Custom protocol schemes" :id "schemes"
-      (p (~tw :tokens "text-stone-600")
-        "sx:// and sxs:// as custom URI schemes for content addressing or deep linking. An sx:// URI could resolve to an sx expression from a federated registry. This is technically feasible but practically unnecessary for a single-site deployment."))
-    (~docs/section :title "Sx as AP serialization" :id "ap-sx"
-      (p (~tw :tokens "text-stone-600")
-        "ActivityPub objects could be serialized as s-expressions instead of JSON-LD. S-expressions are more compact and easier to parse. The practical barrier: the entire AP ecosystem expects JSON-LD."))
-    (~docs/section :title "Sx-native federation" :id "federation"
-      (p (~tw :tokens "text-stone-600")
-        "Federated services could exchange sx fragments directly — render a remote user's profile card by fetching its sx source from their server. This requires trust and standardization that doesn't exist yet."))
-    (~docs/section :title "Realistic assessment" :id "realistic"
-      (p (~tw :tokens "text-stone-600")
-        "The most likely near-term improvement is sx:// deep linking for client-side component resolution. Everything else requires ecosystem adoption that one project can't drive alone."))))
diff --git a/sx/sx/reactive-islands/demo.sx b/sx/sx/reactive-islands/demo.sx
deleted file mode 100644
index 15b16437..00000000
--- a/sx/sx/reactive-islands/demo.sx
+++ /dev/null
@@ -1,632 +0,0 @@
-(defcomp
-  ~reactive-islands/demo/reactive-islands-demo-content
-  ()
-  (~docs/page
-    :title "Reactive Islands — Examples"
-    (~docs/section
-      :title "Live interactive islands"
-      :id "intro"
-      (p
-        (strong "Every example below is a live interactive island")
-        " — not a static code snippet. Click the buttons, type in the inputs. The signal runtime is defined in "
-        (code "signals.sx")
-        ", bootstrapped to JavaScript. No hand-written signal logic.")
-      (p
-        "Each island uses "
-        (code "defisland")
-        " with signals ("
-        (code "signal")
-        ", "
-        (code "deref")
-        ", "
-        (code "reset!")
-        ", "
-        (code "swap!")
-        "), derived values ("
-        (code "computed")
-        "), side effects ("
-        (code "effect")
-        "), and batch updates ("
-        (code "batch")
-        ")."))
-    (~docs/section
-      :title "Examples"
-      :id "examples"
-      (ol
-        (~tw :tokens "space-y-1")
-        (map
-          (fn
-            (item)
-            (li
-              (a
-                :href (get item "href")
-                :sx-get (get item "href")
-                :sx-target "#sx-content"
-                :sx-select "#sx-content"
-                :sx-swap "outerHTML"
-                :sx-push-url "true"
-                (~tw :tokens "text-violet-600 hover:underline")
-                (get item "label"))))
-          reactive-examples-nav-items)))))
-
-(defcomp
-  ~reactive-islands/demo/example-counter
-  ()
-  (~docs/page
-    :title "Signal + Computed + Effect"
-    (p
-      "A signal holds a value. A computed derives from it. Click the buttons — the counter and doubled value update instantly, no server round-trip.")
-    (~reactive-islands/index/demo-counter :initial 0)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-counter")
-        "lisp"))
-    (p
-      (code "(deref count)")
-      " in a text position creates a reactive text node. When "
-      (code "count")
-      " changes, "
-      (em "only that text node")
-      " updates. "
-      (code "doubled")
-      " recomputes automatically. No diffing.")))
-
-(defcomp
-  ~reactive-islands/demo/example-temperature
-  ()
-  (~docs/page
-    :title "Temperature Converter"
-    (p
-      "Two derived values from one signal. Click to change Celsius — Fahrenheit updates reactively.")
-    (~reactive-islands/index/demo-temperature)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-temperature")
-        "lisp"))
-    (p
-      "The actual implementation uses "
-      (code "computed")
-      " for Fahrenheit: "
-      (code "(computed (fn () (+ (* (deref celsius) 1.8) 32)))")
-      ". The "
-      (code "(deref fahrenheit)")
-      " in the span creates a reactive text node that updates when celsius changes.")
-    (div
-      (~tw :tokens "mt-6")
-      (~reactive-islands/test-runner-placeholder)
-      (script
-        :type "text/sx-test"
-        :data-for "temperature"
-        "(defsuite \"temperature converter\" (deftest \"initial celsius is 20\" (let ((celsius (signal 20))) (assert-signal-value celsius 20))) (deftest \"computed fahrenheit = celsius * 1.8 + 32\" (let ((celsius (signal 20)) (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32))))) (assert-signal-value fahrenheit 68) (assert-computed-depends-on fahrenheit celsius))) (deftest \"+5 increments celsius\" (let ((celsius (signal 20)) (btn (mock-element \"button\"))) (mock-add-listener! btn \"click\" (fn (e) (swap! celsius (fn (c) (+ c 5))))) (simulate-click btn) (assert-signal-value celsius 25))) (deftest \"fahrenheit updates on celsius change\" (let ((celsius (signal 20)) (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32))))) (reset! celsius 0) (assert-signal-value fahrenheit 32) (reset! celsius 100) (assert-signal-value fahrenheit 212))) (deftest \"multiple clicks accumulate\" (let ((celsius (signal 20)) (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))) (btn (mock-element \"button\"))) (mock-add-listener! btn \"click\" (fn (e) (swap! celsius (fn (c) (+ c 5))))) (simulate-click btn) (simulate-click btn) (simulate-click btn) (assert-signal-value celsius 35) (assert-signal-value fahrenheit 95))))"))))
-
-(defcomp
-  ~reactive-islands/demo/example-stopwatch
-  ()
-  (~docs/page
-    :title "Effect + Cleanup: Stopwatch"
-    (p
-      "Effects can return cleanup functions. This stopwatch starts a "
-      (code "set-interval")
-      " — the cleanup clears it when the running signal toggles off.")
-    (~reactive-islands/index/demo-stopwatch)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-stopwatch")
-        "lisp"))
-    (p
-      "Three effects, each tracking different signals. The timer effect's cleanup fires before each re-run — toggling "
-      (code "running")
-      " off clears the interval. No hook rules: effects can appear anywhere, in any order.")))
-
-(defcomp
-  ~reactive-islands/demo/example-imperative
-  ()
-  (~docs/page
-    :title "Imperative Pattern"
-    (p
-      "For complex reactivity (dynamic classes, conditional text), use the imperative pattern: "
-      (code "create-text-node")
-      " + "
-      (code "effect")
-      " + "
-      (code "dom-set-text-content")
-      ".")
-    (~reactive-islands/index/demo-imperative)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-imperative")
-        "lisp"))
-    (p
-      "Two patterns exist: "
-      (strong "declarative")
-      " ("
-      (code "(span (deref sig))")
-      " — auto-reactive via "
-      (code "reactive-text")
-      ") and "
-      (strong "imperative")
-      " ("
-      (code "create-text-node")
-      " + "
-      (code "effect")
-      " — explicit, full control). Use declarative for simple text, imperative for dynamic classes, conditional DOM, or complex updates.")))
-
-(defcomp
-  ~reactive-islands/demo/example-reactive-list
-  ()
-  (~docs/page
-    :title "Reactive List"
-    (p
-      "When "
-      (code "map")
-      " is used with "
-      (code "(deref signal)")
-      " inside an island, it auto-upgrades to a reactive list. With "
-      (code ":key")
-      " attributes, existing DOM nodes are reused across updates — only additions, removals, and reorderings touch the DOM.")
-    (~reactive-islands/index/demo-reactive-list)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-reactive-list")
-        "lisp"))
-    (p
-      (code ":key")
-      " identifies each list item. When items change, the reconciler matches old and new keys — reusing existing DOM nodes, inserting new ones, and removing stale ones. Without keys, the list falls back to clear-and-rerender. "
-      (code "batch")
-      " groups the two signal writes into one update pass.")))
-
-(defcomp
-  ~reactive-islands/demo/example-input-binding
-  ()
-  (~docs/page
-    :title "Input Binding"
-    (p
-      "The "
-      (code ":bind")
-      " attribute creates a two-way link between a signal and a form element. Type in the input — the signal updates. Change the signal — the input updates. Works with text inputs, checkboxes, radios, textareas, and selects.")
-    (~reactive-islands/index/demo-input-binding)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-input-binding")
-        "lisp"))
-    (p
-      (code ":bind")
-      " detects the element type automatically — text inputs use "
-      (code "value")
-      " + "
-      (code "input")
-      " event, checkboxes use "
-      (code "checked")
-      " + "
-      (code "change")
-      " event. The effect only updates the DOM when the value actually changed, preventing cursor jump.")))
-
-(defcomp
-  ~reactive-islands/demo/example-portal
-  ()
-  (~docs/page
-    :title "Portals"
-    (p
-      "A "
-      (code "portal")
-      " renders children into a DOM node "
-      (em "outside")
-      " the island's subtree. Essential for modals, tooltips, and toasts — anything that must escape "
-      (code "overflow:hidden")
-      " or z-index stacking.")
-    (~reactive-islands/index/demo-portal)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-portal")
-        "lisp"))
-    (p
-      "The portal content lives in "
-      (code "#portal-root")
-      " (typically at the page body level), not inside the island. On island disposal, portal content is automatically removed from its target — the "
-      (code "register-in-scope")
-      " mechanism handles cleanup.")))
-
-(defcomp
-  ~reactive-islands/demo/example-error-boundary
-  ()
-  (~docs/page
-    :title "Error Boundaries"
-    (p
-      "When an island's rendering or effect throws, "
-      (code "error-boundary")
-      " catches the error and renders a fallback. The fallback receives the error and a retry function. Partial effects created before the error are disposed automatically.")
-    (~reactive-islands/index/demo-error-boundary)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-error-boundary")
-        "lisp"))
-    (p
-      "React equivalent: "
-      (code "componentDidCatch")
-      " / "
-      (code "ErrorBoundary")
-      ". SX's version is simpler — one form, not a class. The "
-      (code "error-boundary")
-      " form is a render-dom special form in "
-      (code "adapter-dom.sx")
-      ".")))
-
-(defcomp
-  ~reactive-islands/demo/example-refs
-  ()
-  (~docs/page
-    :title "Refs — Imperative DOM Access"
-    (p
-      "The "
-      (code ":ref")
-      " attribute captures a DOM element handle into a dict. Use it for imperative operations: focusing, measuring, reading values.")
-    (~reactive-islands/index/demo-refs)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-refs")
-        "lisp"))
-    (p
-      "React equivalent: "
-      (code "useRef")
-      ". In SX, a ref is just "
-      (code "(dict \"current\" nil)")
-      " — no special API. The "
-      (code ":ref")
-      " attribute sets "
-      (code "(dict-set! ref \"current\" el)")
-      " when the element is created. Read it with "
-      (code "(get ref \"current\")")
-      ".")))
-
-(defcomp
-  ~reactive-islands/demo/example-dynamic-class
-  ()
-  (~docs/page
-    :title "Dynamic Class and Style"
-    (p
-      "React uses "
-      (code "className")
-      " and "
-      (code "style")
-      " props with state. SX does the same — "
-      (code "(deref signal)")
-      " inside a "
-      (code ":class")
-      " or "
-      (code ":style")
-      " attribute creates a reactive binding. The attribute updates when the signal changes.")
-    (~reactive-islands/index/demo-dynamic-class)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-dynamic-class")
-        "lisp"))
-    (p
-      "React equivalent: "
-      (code "className={danger ? 'red' : 'green'}")
-      " and "
-      (code "style={{fontSize: size}}")
-      ". In SX the "
-      (code "str")
-      " + "
-      (code "if")
-      " + "
-      (code "deref")
-      " pattern handles it — no "
-      (code "classnames")
-      " library needed. For complex conditional classes, use a "
-      (code "computed")
-      " or a CSSX "
-      (code "defcomp")
-      " that returns a class string.")))
-
-(defcomp
-  ~reactive-islands/demo/example-resource
-  ()
-  (~docs/page
-    :title "Resource + Suspense Pattern"
-    (p
-      (code "resource")
-      " wraps an async operation into a signal with "
-      (code "loading")
-      "/"
-      (code "data")
-      "/"
-      (code "error")
-      " states. Combined with "
-      (code "cond")
-      " + "
-      (code "deref")
-      ", this is the suspense pattern — no special form needed.")
-    (~reactive-islands/index/demo-resource)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-resource")
-        "lisp"))
-    (p
-      "React equivalent: "
-      (code "Suspense")
-      " + "
-      (code "use()")
-      " or "
-      (code "useSWR")
-      ". SX doesn't need a special "
-      (code "suspense")
-      " form because "
-      (code "resource")
-      " returns a signal and "
-      (code "cond")
-      " + "
-      (code "deref")
-      " creates reactive conditional rendering. When the promise resolves, the signal updates and the "
-      (code "cond")
-      " branch switches automatically.")))
-
-(defcomp
-  ~reactive-islands/demo/example-transition
-  ()
-  (~docs/page
-    :title "Transition Pattern"
-    (p
-      "React's "
-      (code "startTransition")
-      " defers non-urgent updates so typing stays responsive. In SX: "
-      (code "schedule-idle")
-      " + "
-      (code "batch")
-      ". The filter runs during idle time, not blocking the input event.")
-    (~reactive-islands/index/demo-transition)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-transition")
-        "lisp"))
-    (p
-      "React equivalent: "
-      (code "startTransition(() => setFiltered(...))")
-      ". SX uses "
-      (code "schedule-idle")
-      " ("
-      (code "requestIdleCallback")
-      " under the hood) to defer the expensive "
-      (code "filter")
-      " operation, and "
-      (code "batch")
-      " to group the result into one update. Fine-grained signals already avoid the jank that makes transitions critical in React — this pattern is for truly expensive computations.")))
-
-(defcomp
-  ~reactive-islands/demo/example-stores
-  ()
-  (~docs/page
-    :title "Shared Stores"
-    (p
-      "React uses "
-      (code "Context")
-      " or state management libraries for cross-component state. SX uses "
-      (code "def-store")
-      " / "
-      (code "use-store")
-      " — named signal containers that persist across island creation/destruction.")
-    (~reactive-islands/index/demo-store-writer)
-    (~reactive-islands/index/demo-store-reader)
-    (~docs/code
-      :src (highlight
-        (str
-          (component-source "~reactive-islands/index/demo-store-writer")
-          "\n\n"
-          (component-source "~reactive-islands/index/demo-store-reader"))
-        "lisp"))
-    (p
-      "React equivalent: "
-      (code "createContext")
-      " + "
-      (code "useContext")
-      " or Redux/Zustand. Stores are simpler — just named dicts of signals at page scope. "
-      (code "def-store")
-      " creates once, "
-      (code "use-store")
-      " retrieves. Stores survive island disposal but clear on full page navigation.")))
-
-(defcomp
-  ~reactive-islands/demo/example-event-bridge-demo
-  ()
-  (~docs/page
-    :title "Event Bridge"
-    (p
-      "Server-rendered content inside an island (an htmx \"lake\") can communicate with island signals via DOM custom events. Buttons with "
-      (code "data-sx-emit")
-      " dispatch events that island effects catch.")
-    (~reactive-islands/index/demo-event-bridge)
-    (~docs/code
-      :src (highlight
-        (component-source "~reactive-islands/index/demo-event-bridge")
-        "lisp"))
-    (p
-      "The "
-      (code "data-sx-emit")
-      " attribute is processed by the client engine — it adds a click handler that dispatches a CustomEvent with the JSON from "
-      (code "data-sx-emit-detail")
-      ". The event bubbles up to the island container where "
-      (code "bridge-event")
-      " catches it.")))
-
-(defcomp
-  ~reactive-islands/demo/example-defisland
-  ()
-  (~docs/page
-    :title "How defisland Works"
-    (p
-      (code "defisland")
-      " creates a reactive component. Same calling convention as "
-      (code "defcomp")
-      " — keyword args, rest children — but with a reactive boundary. Inside an island, "
-      (code "deref")
-      " subscribes DOM nodes to signals.")
-    (~docs/code
-      :src (highlight
-        ";; Definition — same syntax as defcomp\n(defisland ~reactive-islands/demo/counter (&key initial)\n  (let ((count (signal (or initial 0))))\n    (div\n      (span (deref count))                          ;; reactive text node\n      (button :on-click (fn (e) (swap! count inc))  ;; event handler\n        \"+\"))))\n\n;; Usage — same as any component\n(~reactive-islands/demo/counter :initial 42)\n\n;; Server-side rendering:\n;; <div data-sx-island=\"counter\" data-sx-state='{\"initial\":42}'>\n;;   <span>42</span><button>+</button>\n;; </div>\n;;\n;; Client hydrates: signals + effects + event handlers attach"
-        "lisp"))
-    (p
-      "Each "
-      (code "deref")
-      " call registers the enclosing DOM node as a subscriber. Signal changes update "
-      (em "only")
-      " the subscribed nodes — no virtual DOM, no diffing, no component re-renders.")))
-
-(defcomp
-  ~reactive-islands/demo/example-tests
-  ()
-  (~docs/page
-    :title "Test Suite"
-    (p
-      "17 tests verify the signal runtime against the spec. All pass in the Python test runner (which uses the hand-written evaluator with native platform primitives).")
-    (~docs/code
-      :src (highlight
-        ";; Signal basics (6 tests)\n(assert-true (signal? (signal 42)))\n(assert-equal 42 (deref (signal 42)))\n(assert-equal 5 (deref 5))          ;; non-signal passthrough\n\n;; reset! changes value\n(let ((s (signal 0)))\n  (reset! s 10)\n  (assert-equal 10 (deref s)))\n\n;; reset! does NOT notify when value unchanged (identical? check)\n\n;; Computed (3 tests)\n(let ((a (signal 3)) (b (signal 4))\n      (sum (computed (fn () (+ (deref a) (deref b))))))\n  (assert-equal 7 (deref sum))\n  (reset! a 10)\n  (assert-equal 14 (deref sum)))\n\n;; Effects (4 tests) — immediate run, re-run on change, dispose, cleanup\n;; Batch (1 test) — defers notifications, deduplicates subscribers\n;; defisland (3 tests) — creates island, callable, accepts children"
-        "lisp"))
-    (p
-      (~tw :tokens "mt-2 text-sm text-stone-500")
-      "Run: "
-      (code "python3 shared/sx/tests/run.py signals"))))
-
-(defcomp
-  ~reactive-islands/demo/example-coverage
-  ()
-  (~docs/page
-    :title "React Feature Coverage"
-    (p
-      "Every React feature has an SX equivalent — most are simpler because signals are fine-grained.")
-    (div
-      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-      (table
-        (~tw :tokens "w-full text-left text-sm")
-        (thead
-          (tr
-            (~tw :tokens "border-b border-stone-200 bg-stone-100")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "React")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "SX")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Demo")))
-        (tbody
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "useState")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(signal value)")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#1"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "useMemo")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(computed (fn () ...))")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#1, #2"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "useEffect")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(effect (fn () ...))")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#3"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "useRef")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(dict \"current\" nil) + :ref")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#9"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "useCallback")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(fn (...) ...) — no dep arrays")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "N/A"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "className / style")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              ":class (str ...) :style (str ...)")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#10"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "Controlled inputs")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              ":bind signal")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#6"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "key prop")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              ":key value")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#5"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "createPortal")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(portal \"#target\" ...)")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#7"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "ErrorBoundary")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(error-boundary fallback ...)")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#8"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "Suspense + use()")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "(resource fn) + cond/deref")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#11"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "startTransition")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "schedule-idle + batch")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#12"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "Context / Redux")
-            (td
-              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
-              "def-store / use-store")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#13"))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "Virtual DOM / diffing")
-            (td
-              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
-              "N/A — fine-grained signals update exact DOM nodes")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "JSX / build step")
-            (td
-              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
-              "N/A — s-expressions are the syntax")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "Server Components")
-            (td
-              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
-              "N/A — aser mode already expands server-side")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
-          (tr
-            (~tw :tokens "border-b border-stone-100")
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "Concurrent rendering")
-            (td
-              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
-              "N/A — fine-grained updates are inherently incremental")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
-          (tr
-            (td (~tw :tokens "px-3 py-2 text-stone-700") "Hooks rules")
-            (td
-              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
-              "N/A — signals are values, no ordering rules")
-            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "")))))))
diff --git a/sx/sx/reactive-islands/runner-placeholder.sx b/sx/sx/reactive-islands/runner-placeholder.sx
deleted file mode 100644
index f446cbca..00000000
--- a/sx/sx/reactive-islands/runner-placeholder.sx
+++ /dev/null
@@ -1,3 +0,0 @@
-(defcomp ~reactive-islands/test-runner-placeholder () (div (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4") :data-sx-island "reactive-islands/test-runner" (p (~tw :tokens "text-stone-400 text-sm italic") "Loading tests...")))
-
-(defisland ~reactive-islands/test-runner () (let ((results (signal nil)) (running (signal false))) (letrec ((run-tests (fn () (reset! running true) (let ((script-el (dom-query "script[data-for]")) (test-results (list))) (when script-el (let ((test-src (host-get script-el "textContent")) (parsed (let ((raw (host-get script-el "textContent")) (decoded (host-call raw "replaceAll" "&quot;" "\""))) (sx-parse (host-call decoded "replaceAll" "&amp;" "&"))))) (for-each (fn (expr) (when (and (list? expr) (not (empty? expr)) (= (type-of (first expr)) "symbol")) (let ((head (symbol-name (first expr)))) (cond (= head "defsuite") (for-each (fn (child) (when (and (list? child) (not (empty? child)) (= (type-of (first child)) "symbol") (= (symbol-name (first child)) "deftest")) (append! test-results (try-test (nth child 1) (last child))))) (slice expr 2)) (= head "deftest") (append! test-results (try-test (nth expr 1) (last expr))))))) parsed))) (reset! results test-results) (reset! running false)))) (try-test (fn (name body) (let ((result (cek-try (fn () (eval-expr body (global-env)) true) (fn (err) err)))) (if (= result true) {:pass true :error nil :name name} {:pass false :error (str result) :name name}))))) (run-tests) (div (~tw :tokens "rounded border border-stone-200 bg-stone-50 p-4") (div (~tw :tokens "flex items-center justify-between mb-3") (h4 (~tw :tokens "text-sm font-semibold text-stone-700") "Tests") (button (~tw :tokens "px-2 py-1 text-xs rounded bg-stone-200 hover:bg-stone-300 transition") :on-click (fn (e) (run-tests)) "Re-run")) (if (deref running) (p (~tw :tokens "text-stone-400 text-sm italic") "Running...") (if (nil? (deref results)) (p (~tw :tokens "text-stone-400 text-sm italic") "No test source found") (let ((r (deref results)) (pass-count (len (filter (fn (t) (get t "pass")) r))) (fail-count (len (filter (fn (t) (not (get t "pass"))) r)))) (div (~tw :tokens "space-y-2") (div (~tw :tokens "text-sm font-mono") (span :class (if (= fail-count 0) "text-emerald-600 font-semibold" "text-red-600 font-semibold") (str pass-count "/" (len r) " passed"))) (map (fn (t) (div (~tw :tokens "flex items-start gap-2 text-xs font-mono py-0.5") (span :class (if (get t "pass") "text-emerald-500" "text-red-500") (if (get t "pass") "✓" "✗")) (span (~tw :tokens "text-stone-600") (get t "name")) (when (get t "error") (span (~tw :tokens "text-red-400 ml-2") (get t "error"))))) r)))))))))
diff --git a/sx/sx/reactive-runtime.sx b/sx/sx/reactive-runtime.sx
deleted file mode 100644
index 10a14599..00000000
--- a/sx/sx/reactive-runtime.sx
+++ /dev/null
@@ -1,702 +0,0 @@
-;; Reactive Application Runtime — 7 Feature Layers
-;; Zero new platform primitives. All functions composing existing signals + DOM ops.
-;; Lives under Applications: /(applications.(reactive-runtime))
-
-;; ---------------------------------------------------------------------------
-;; Overview page
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/overview-content ()
-  (~docs/page :title "Reactive Application Runtime"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "Seven feature layers that take SX from reactive documents to a full application runtime. "
-      "Every layer is a pure SX function composing existing primitives — zero new CEK frames, "
-      "zero new platform primitives. The existing platform interface is sufficient "
-      "for any application pattern.")
-
-    ;; =====================================================================
-    ;; Motivation
-    ;; =====================================================================
-
-    (~docs/section :title "Motivation" :id "motivation"
-
-      (p "SX has signals, computed, effects, batch, islands, lakes, stores, and bridge events — "
-         "sufficient for reactive documents (forms, toggles, counters, live search). "
-         "But complex client-heavy apps (drawing tools, editors, games) need structure on top:")
-
-      (table (~tw :tokens "w-full mb-6 text-sm")
-        (thead
-          (tr (th (~tw :tokens "text-left p-2") "Have") (th (~tw :tokens "text-left p-2") "Need")))
-        (tbody
-          (tr (td (~tw :tokens "p-2") "Signal holds a value") (td (~tw :tokens "p-2") "Ref holds a value " (em "without") " reactivity"))
-          (tr (td (~tw :tokens "p-2") "Effect runs on change") (td (~tw :tokens "p-2") "Loop runs " (em "continuously")))
-          (tr (td (~tw :tokens "p-2") "Store shares state") (td (~tw :tokens "p-2") "Machine manages " (em "modal") " state"))
-          (tr (td (~tw :tokens "p-2") "reset!/swap! update") (td (~tw :tokens "p-2") "Commands update " (em "with history")))
-          (tr (td (~tw :tokens "p-2") "DOM rendering") (td (~tw :tokens "p-2") "Foreign calls " (em "any host API")))
-          (tr (td (~tw :tokens "p-2") "Server-first hydration") (td (~tw :tokens "p-2") "Client-first " (em "app shell"))))))
-
-    ;; =====================================================================
-    ;; The Seven Layers
-    ;; =====================================================================
-
-    (~docs/section :title "The Seven Layers" :id "layers"
-
-      (table (~tw :tokens "w-full mb-6 text-sm")
-        (thead
-          (tr (th (~tw :tokens "text-left p-2") "Layer") (th (~tw :tokens "text-left p-2") "What") (th (~tw :tokens "text-left p-2") "Builds On")))
-        (tbody
-          (tr (td (~tw :tokens "p-2 font-mono") "L0") (td (~tw :tokens "p-2") "Ref — mutable box without reactivity") (td (~tw :tokens "p-2") "register-in-scope"))
-          (tr (td (~tw :tokens "p-2 font-mono") "L1") (td (~tw :tokens "p-2") "Foreign — host API interop") (td (~tw :tokens "p-2") "host-call, host-get, host-set!"))
-          (tr (td (~tw :tokens "p-2 font-mono") "L2") (td (~tw :tokens "p-2") "State machines — modal state as signal") (td (~tw :tokens "p-2") "signal, deref, reset!"))
-          (tr (td (~tw :tokens "p-2 font-mono") "L3") (td (~tw :tokens "p-2") "Commands — undo/redo signal stores") (td (~tw :tokens "p-2") "signal, computed, L0"))
-          (tr (td (~tw :tokens "p-2 font-mono") "L4") (td (~tw :tokens "p-2") "Render loop — continuous rAF") (td (~tw :tokens "p-2") "L0, request-animation-frame"))
-          (tr (td (~tw :tokens "p-2 font-mono") "L5") (td (~tw :tokens "p-2") "Keyed lists — explicit key reconciliation") (td (~tw :tokens "p-2") "reactive-list (existing)"))
-          (tr (td (~tw :tokens "p-2 font-mono") "L6") (td (~tw :tokens "p-2") "App shell — client-first rendering") (td (~tw :tokens "p-2") "sx-mount, all above")))))
-
-    ;; =====================================================================
-    ;; Implementation Plan
-    ;; =====================================================================
-
-    (~docs/section :title "Implementation Plan" :id "implementation"
-
-      (p "All seven layers live in a single spec module: " (code "web/reactive-runtime.sx") ". "
-         "Every layer is a plain " (code "define") " function — no macros, no new special forms. "
-         "The OCaml evaluator bootstraps them to JavaScript via the standard transpiler pipeline.")
-
-      (~docs/subsection :title "Implementation Order"
-        (~docs/code :src (highlight
-          "L0  Ref            → standalone, trivial (~35 LOC)\nL1  Foreign FFI    → standalone, function factories (~100 LOC)\nL5  Keyed Lists    → enhances existing reactive-list (~155 LOC)\nL2  State Machine  → uses signals + dicts (~200 LOC)\nL4  Render Loop    → uses L0 refs + existing rAF (~140 LOC)\nL3  Commands       → extends stores, uses signals (~320 LOC)\nL6  App Shell      → orchestrates all above (~330 LOC)\n                                        Total: ~1280 LOC"
-          "text"))
-
-        (p "L0 and L1 are independent foundations. L5 enhances existing code. "
-           "L2 and L4 depend on L0. L3 builds on signals. L6 ties everything together."))
-
-      (~docs/subsection :title "Build Integration"
-        (p "One new entry in " (code "SPEC_MODULES") " (hosts/javascript/platform.py):")
-        (~docs/code :src (highlight
-          "SPEC_MODULES = {\n    ...\n    \"reactive-runtime\": (\"reactive-runtime.sx\", \"reactive-runtime (application patterns)\"),\n}\nSPEC_MODULE_ORDER = [..., \"reactive-runtime\"]"
-          "python"))
-        (p "Auto-included when the " (code "dom") " adapter is present. "
-           "Depends on " (code "signals") " (loaded first via module ordering)."))
-
-      (~docs/subsection :title "Existing Primitives Used"
-        (table (~tw :tokens "w-full mb-6 text-sm")
-          (thead
-            (tr (th (~tw :tokens "text-left p-2") "Primitive") (th (~tw :tokens "text-left p-2") "Used By")))
-          (tbody
-            (tr (td (~tw :tokens "p-2") (code "signal, deref, reset!, swap!, computed, effect")) (td (~tw :tokens "p-2") "L2, L3, L4"))
-            (tr (td (~tw :tokens "p-2") (code "host-call, host-get, host-set!")) (td (~tw :tokens "p-2") "L1 (Foreign FFI)"))
-            (tr (td (~tw :tokens "p-2") (code "request-animation-frame")) (td (~tw :tokens "p-2") "L4 (Render Loop)"))
-            (tr (td (~tw :tokens "p-2") (code "register-in-scope, scope-push!, scope-pop!")) (td (~tw :tokens "p-2") "L0, L4"))
-            (tr (td (~tw :tokens "p-2") (code "sx-mount, sx-hydrate-islands")) (td (~tw :tokens "p-2") "L6 (App Shell)"))
-            (tr (td (~tw :tokens "p-2") (code "DOM ops (dom-insert-after, dom-remove, …)")) (td (~tw :tokens "p-2") "L5 (Keyed Lists)"))))
-
-        (p (~tw :tokens "text-stone-600 italic")
-          "Zero new platform primitives validates that the existing interface is complete "
-          "for any application pattern.")))))
-
-
-;; ---------------------------------------------------------------------------
-;; L0: Ref
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/ref-content ()
-  (~docs/page :title "Layer 0: Ref (Mutable Box)"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "A non-reactive mutable cell for DOM handles, canvas contexts, and timer IDs. "
-      "Like a signal but with no subscriber tracking and no notifications.")
-
-    (~docs/section :title "Live Demo" :id "demo"
-      (p "Two patterns that refs formalize: an interval ID captured in an effect closure, and a DOM element handle stored in a dict. Neither needs reactivity — they're infrastructure state.")
-      (~reactive-runtime/demo-ref)
-      (~docs/code :src (highlight "(defisland ~demo-ref ()\n  (let ((input-ref (dict \"current\" nil))\n        (ticks (signal 0))\n        (running (signal false))\n        (last-value (signal \"\")))\n    ;; Timer ID captured in effect closure — the ref pattern\n    (effect (fn ()\n      (when (deref running)\n        (let ((id (set-interval (fn () (swap! ticks inc)) 500)))\n          (fn () (clear-interval id))))))\n    ;; DOM handle in a dict — also the ref pattern\n    (input :ref input-ref :type \"text\" ...)\n    (button :on-click (fn (e)\n      (reset! last-value\n        (dom-get-prop (get input-ref \"current\") \"value\")))\n      \"Read\")))" "lisp"))
-      (p "The timer ID lives in a closure — nothing reads it reactively. The DOM element is a " (code "(dict \"current\" nil)") " set by " (code ":ref") ". The " (code "ref") " function formalizes both into a single primitive with auto-disposal."))
-
-    (~docs/section :title "API" :id "ref-api"
-
-      (~docs/code :src (highlight
-        ";; Create a ref — auto-registers disposal in island scope\n(define my-ref (ref initial-value))\n\n;; Read (no tracking, no subscriptions)\n(ref-deref my-ref)\n\n;; Write (no notifications, no re-renders)\n(ref-set! my-ref new-value)\n\n;; Predicate\n(ref? my-ref)  ;; => true"
-        "lisp"))
-
-      (p "Plain dicts with a " (code "__ref") " marker key (mirrors the " (code "__signal") " pattern). "
-         "On island disposal, the ref value is auto-nilled via " (code "register-in-scope") "."))
-
-    (~docs/section :title "When to Use Ref vs Signal" :id "ref-vs-signal"
-
-      (table (~tw :tokens "w-full mb-6 text-sm")
-        (thead
-          (tr (th (~tw :tokens "text-left p-2") "Use Ref") (th (~tw :tokens "text-left p-2") "Use Signal")))
-        (tbody
-          (tr (td (~tw :tokens "p-2") "DOM element handle") (td (~tw :tokens "p-2") "UI state that triggers re-render"))
-          (tr (td (~tw :tokens "p-2") "Canvas 2D context") (td (~tw :tokens "p-2") "Form input value"))
-          (tr (td (~tw :tokens "p-2") "Timer/interval ID") (td (~tw :tokens "p-2") "Counter, toggle, selection"))
-          (tr (td (~tw :tokens "p-2") "WebSocket connection") (td (~tw :tokens "p-2") "Anything the UI reads via deref")))))
-
-    (~docs/section :title "Implementation" :id "ref-impl"
-
-      (~docs/code :src (highlight
-        "(define make-ref (fn (value)\n  (dict \"__ref\" true \"value\" value)))\n\n(define ref? (fn (x)\n  (and (dict? x) (has-key? x \"__ref\"))))\n\n(define ref (fn (initial-value)\n  (let ((r (make-ref initial-value)))\n    (register-in-scope (fn () (dict-set! r \"value\" nil)))\n    r)))\n\n(define ref-deref (fn (r) (get r \"value\")))\n(define ref-set! (fn (r v) (dict-set! r \"value\" v)))"
-        "lisp"))
-
-      (p "~35 lines. No dependencies beyond " (code "register-in-scope") " from signals.sx."))))
-
-
-;; ---------------------------------------------------------------------------
-;; L1: Foreign
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/foreign-content ()
-  (~docs/page :title "Layer 1: Foreign (Host API Interop)"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "Clean boundary for calling host APIs — Canvas, WebGL, WebAudio, any browser API — "
-      "from SX code. Function factories with automatic kebab-to-camelCase conversion.")
-
-    (~docs/section :title "Live Demo" :id "demo"
-      (p "Click the canvas to place colored rectangles. Uses " (code "host-call") " for canvas 2D context method calls and " (code "host-set!") " for property writes — the raw primitives that " (code "foreign-method") " and " (code "foreign-prop-setter") " will wrap.")
-      (~reactive-runtime/demo-foreign)
-      (~docs/code :src (highlight "(defisland ~demo-foreign ()\n  (let ((canvas-ref (dict \"current\" nil))\n        (color (signal \"#8b5cf6\"))\n        (rects (signal (list))))\n    ;; Draw effect — re-runs when rects changes\n    (effect (fn ()\n      (let ((el (get canvas-ref \"current\")))\n        (when el\n          (let ((ctx (host-call el \"getContext\" \"2d\")))\n            (host-call ctx \"clearRect\" 0 0 280 160)\n            (for-each (fn (r)\n              (host-set! ctx \"fillStyle\" (get r \"c\"))\n              (host-call ctx \"fillRect\" (get r \"x\") (get r \"y\") 20 20))\n              (deref rects)))))))\n    (canvas :ref canvas-ref :on-click (fn (e) ...)\n      :width \"280\" :height \"160\")))" "lisp"))
-      (p "Every canvas operation is a raw " (code "host-call") " or " (code "host-set!") ". The foreign FFI layer wraps these into named SX functions: " (code "(fill-rect ctx 0 0 280 160)") " instead of " (code "(host-call ctx \"fillRect\" 0 0 280 160)") "."))
-
-    (~docs/section :title "API" :id "foreign-api"
-
-      (~docs/code :src (highlight
-        ";; Function factories — each returns a reusable function\n(define fill-rect     (foreign-method \"fill-rect\"))\n(define set-fill-style! (foreign-prop-setter \"fill-style\"))\n(define get-width     (foreign-prop-getter \"width\"))\n\n;; Usage — clean SX calls, no string method names\n(let ((ctx (host-call canvas \"getContext\" \"2d\")))\n  (set-fill-style! ctx \"red\")\n  (fill-rect ctx 0 0 (get-width canvas) 100))"
-        "lisp"))
-
-      (p "Three factory functions, one helper:")
-      (ul (~tw :tokens "list-disc pl-6 mb-4 space-y-1")
-        (li (code "foreign-method") " — wraps " (code "host-call") " with kebab→camel conversion")
-        (li (code "foreign-prop-getter") " — wraps " (code "host-get"))
-        (li (code "foreign-prop-setter") " — wraps " (code "host-set!"))
-        (li (code "kebab->camel") " — " (code "\"fill-rect\"") " → " (code "\"fillRect\""))))
-
-    (~docs/section :title "Implementation" :id "foreign-impl"
-
-      (~docs/code :src (highlight
-        "(define kebab->camel (fn (s)\n  ;; \"fill-rect\" → \"fillRect\", \"font-size\" → \"fontSize\"\n  (let ((parts (split s \"-\"))\n        (first-part (first parts))\n        (rest-parts (rest parts)))\n    (str first-part\n      (join \"\" (map (fn (p)\n        (str (upper (slice p 0 1)) (slice p 1))) rest-parts))))))\n\n(define foreign-method (fn (method-name)\n  (let ((camel (kebab->camel method-name)))\n    (fn (obj &rest args)\n      (apply host-call (concat (list obj camel) args))))))\n\n(define foreign-prop-getter (fn (prop-name)\n  (let ((camel (kebab->camel prop-name)))\n    (fn (obj) (host-get obj camel)))))\n\n(define foreign-prop-setter (fn (prop-name)\n  (let ((camel (kebab->camel prop-name)))\n    (fn (obj val) (host-set! obj camel val)))))"
-        "lisp"))
-
-      (p "~100 lines. Uses existing host FFI primitives — no new platform interface needed."))))
-
-
-;; ---------------------------------------------------------------------------
-;; L2: State Machines
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/machine-content ()
-  (~docs/page :title "Layer 2: State Machines"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "Modal state management where machine state IS a signal. "
-      "Composes naturally with computed and effects.")
-
-    (~docs/section :title "Live Demo" :id "demo"
-      (p "A traffic light built from a signal and a transitions dict. Auto-advance uses an effect with " (code "set-timeout") " — when state changes, the effect re-runs and schedules the next transition.")
-      (~reactive-runtime/demo-machine)
-      (~docs/code :src (highlight "(defisland ~demo-machine ()\n  (let ((state (signal \"red\"))\n        (transitions (dict \"red\" \"green\" \"green\" \"yellow\" \"yellow\" \"red\"))\n        (auto (signal false)))\n    ;; Auto-advance: effect depends on both state and auto\n    (effect (fn ()\n      (when (deref auto)\n        (let ((delay (if (= (deref state) \"yellow\") 1000 2500)))\n          (let ((id (set-timeout\n              (fn () (reset! state (get transitions (deref state))))\n              delay)))\n            (fn () (clear-timeout id)))))))\n    ;; Display: reactive class on each light\n    (div :class (str \"...\" (if (= (deref state) \"red\")\n      \"bg-red-500\" \"bg-red-900/30\")) ...)))" "lisp"))
-      (p "The machine state is a signal — " (code "(deref state)") " in the effect body subscribes, so when the timeout fires and resets state, the effect re-runs with the new delay. The " (code "make-machine") " function wraps this pattern with transition tables, guards, and enter/exit hooks."))
-
-    (~docs/section :title "API" :id "machine-api"
-
-      (~docs/code :src (highlight
-        "(define drawing-tool (make-machine\n  {:initial :idle\n   :states {:idle    {:on {:pointer-down (fn (ev)\n                           {:state :drawing\n                            :actions (list (fn () (start-shape! ev)))})}}\n            :drawing {:on {:pointer-move (fn (ev)\n                           {:state :drawing\n                            :actions (list (fn () (update-shape! ev)))})\n                          :pointer-up (fn (ev)\n                           {:state :idle\n                            :actions (list (fn () (finish-shape! ev)))})}}}}))\n\n;; Send events\n(machine-send! drawing-tool :pointer-down event)\n\n;; Read state (reactive — triggers re-render)\n(deref (machine-state drawing-tool))   ;; => :drawing\n(machine-matches? drawing-tool :idle)  ;; => false"
-        "lisp"))
-
-      (p (code "make-machine") " returns a dict with a state signal, transitions map, and send function. "
-         "Handlers return " (code "{:state :new-state :actions [fn ...]}") " — "
-         "actions are called after the state transition."))
-
-    (~docs/section :title "Implementation Sketch" :id "machine-impl"
-
-      (~docs/code :src (highlight
-        "(define make-machine (fn (config)\n  (let ((current (signal (get config :initial)))\n        (states  (get config :states)))\n    (dict\n      \"__machine\" true\n      \"state\"    current\n      \"states\"   states))))\n\n(define machine-state (fn (m) (get m \"state\")))\n\n(define machine-matches? (fn (m s)\n  (= (deref (get m \"state\")) s)))\n\n(define machine-send! (fn (m event &rest data)\n  (let ((current-state (deref (get m \"state\")))\n        (state-config  (get (get m \"states\") current-state))\n        (handlers      (get state-config :on))\n        (handler       (get handlers event)))\n    (when handler\n      (let ((result (apply handler data)))\n        (when (get result :state)\n          (reset! (get m \"state\") (get result :state)))\n        (when (get result :actions)\n          (for-each (fn (action) (action))\n            (get result :actions))))))))"
-        "lisp"))
-
-      (p "~200 lines with guard conditions, context data, and enter/exit hooks."))))
-
-
-;; ---------------------------------------------------------------------------
-;; L3: Commands with History
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/commands-content ()
-  (~docs/page :title "Layer 3: Commands with History"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "Command pattern built into signal stores. Commands are s-expressions "
-      "in a history stack — trivially serializable, with transaction grouping for drag operations.")
-
-    (~docs/section :title "Live Demo" :id "demo"
-      (p "A counter with full undo/redo. Each operation pushes the previous state onto the undo stack. Undo pops from undo and pushes to redo. All state is reactive — buttons disable when their stack is empty.")
-      (~reactive-runtime/demo-commands)
-      (~docs/code :src (highlight "(defisland ~demo-commands ()\n  (let ((value (signal 0))\n        (undo-stack (signal (list)))\n        (redo-stack (signal (list)))\n        (do-cmd (fn (new-val)\n          (batch (fn ()\n            (swap! undo-stack (fn (s) (cons (deref value) s)))\n            (reset! redo-stack (list))\n            (reset! value new-val)))))\n        (undo (fn ()\n          (when (> (len (deref undo-stack)) 0)\n            (batch (fn ()\n              (let ((prev (first (deref undo-stack))))\n                (swap! redo-stack (fn (r) (cons (deref value) r)))\n                (reset! value prev)\n                (swap! undo-stack rest)))))))\n        (redo (fn () ...)))\n    (span (deref value))\n    (button :on-click (fn (e) (do-cmd (+ (deref value) 1))) \"+1\")\n    (button :on-click (fn (e) (undo)) \"Undo\")))" "lisp"))
-      (p "Three signals and two functions. " (code "batch") " groups the three writes (push old, clear redo, set new) into one notification pass. The stacks use " (code "cons") "/" (code "first") "/" (code "rest") " — standard list operations. " (code "make-command-store") " wraps this pattern and adds transaction grouping."))
-
-    (~docs/section :title "API" :id "commands-api"
-
-      (~docs/code :src (highlight
-        "(define canvas-state (make-command-store\n  {:initial {:elements (list) :selection nil}\n   :commands {:add-element (fn (state el)\n                (assoc state :elements\n                  (append (get state :elements) (list el))))\n              :move-element (fn (state id dx dy) ...)}\n   :max-history 100}))\n\n;; Dispatch commands\n(cmd-dispatch! canvas-state :add-element rect-1)\n\n;; Undo / redo\n(cmd-undo! canvas-state)\n(cmd-redo! canvas-state)\n\n;; Reactive predicates\n(deref (cmd-can-undo? canvas-state))  ;; => true\n(deref (cmd-can-redo? canvas-state))  ;; => false\n\n;; Transaction grouping — collapses into single undo entry\n(cmd-group-start! canvas-state \"drag\")\n(cmd-dispatch! canvas-state :move-element id 1 0)\n(cmd-dispatch! canvas-state :move-element id 1 0)\n(cmd-dispatch! canvas-state :move-element id 1 0)\n(cmd-group-end! canvas-state)\n;; One undo reverses all three moves"
-        "lisp")))
-
-    (~docs/section :title "Internals" :id "commands-internals"
-
-      (p "A command store wraps three signals and a ref:")
-      (ul (~tw :tokens "list-disc pl-6 mb-4 space-y-1")
-        (li (strong "state") " signal — current application state")
-        (li (strong "undo-stack") " signal — list of previous states")
-        (li (strong "redo-stack") " signal — list of undone states")
-        (li (strong "group") " ref — current transaction label (nil when not grouping)"))
-
-      (p (code "cmd-dispatch!") " applies the command function to the current state, "
-         "pushes the old state onto the undo stack, and clears the redo stack. "
-         "During a group, intermediate states are collapsed so only the pre-group "
-         "state appears on the undo stack.")
-
-      (p "~320 lines. The most complex layer, but pure signals + dicts."))))
-
-
-;; ---------------------------------------------------------------------------
-;; L4: Render Loop
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/loop-content ()
-  (~docs/page :title "Layer 4: Continuous Rendering Loop"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      (code "requestAnimationFrame") " integration for canvas and animation apps, "
-      "with automatic island lifecycle cleanup.")
-
-    (~docs/section :title "Live Demo" :id "demo"
-      (p "A ball bouncing across a track. Position is a signal — the " (code ":style") " attribute reads it reactively. The animation runs via " (code "set-interval") " at ~60fps; the effect's cleanup stops it when paused.")
-      (~reactive-runtime/demo-loop)
-      (~docs/code :src (highlight "(defisland ~demo-loop ()\n  (let ((running (signal true))\n        (x (signal 0))\n        (dir (signal 1))\n        (frames (signal 0)))\n    ;; Animation effect — interval simulates rAF\n    (effect (fn ()\n      (when (deref running)\n        (let ((id (set-interval\n            (fn ()\n              (batch (fn ()\n                (swap! frames inc)\n                (when (>= (deref x) 230) (reset! dir -1))\n                (when (<= (deref x) 0) (reset! dir 1))\n                (swap! x (fn (v) (+ v (* (deref dir) 3)))))))\n            16)))\n          (fn () (clear-interval id))))))\n    ;; Ball position driven by reactive style\n    (div :class \"relative h-12 ...\" :style (str \"...\")\n      (div :style (str \"left:\" (deref x) \"px\") ...))))" "lisp"))
-      (p "The " (code "running") " signal is read in the effect body — toggling it triggers cleanup (stops the interval) and re-evaluation (starts a new one or does nothing). The real " (code "make-loop") " uses " (code "request-animation-frame") " with the running-ref pattern instead."))
-
-    (~docs/section :title "API" :id "loop-api"
-
-      (~docs/code :src (highlight
-        "(define render-loop (make-loop (fn (timestamp dt)\n  (let ((ctx (ref-deref ctx-ref)))\n    (clear-canvas! ctx)\n    (draw-scene! ctx (deref elements))))))\n\n(loop-start! render-loop)\n(loop-stop! render-loop)\n(deref (loop-running? render-loop))  ;; => true (reactive)"
-        "lisp")))
-
-    (~docs/section :title "Running-Ref Pattern" :id "loop-pattern"
-
-      (~docs/code :src (highlight
-        ";; Internal: no cancelAnimationFrame needed\n(let ((running (ref true))\n      (last-ts (ref 0)))\n  (define tick (fn (ts)\n    (when (ref-deref running)\n      (let ((dt (- ts (ref-deref last-ts))))\n        (ref-set! last-ts ts)\n        (user-fn ts dt))\n      (request-animation-frame tick))))\n  (request-animation-frame tick)\n  ;; To stop: (ref-set! running false)\n  ;; Loop dies naturally on next frame check"
-        "lisp"))
-
-      (p "The loop checks a ref each frame. Setting it to " (code "false") " stops the loop "
-         "without needing " (code "cancelAnimationFrame") ". On island disposal, "
-         (code "register-in-scope") " auto-stops the loop.")
-
-      (p "~140 lines. Depends on L0 (refs) and " (code "request-animation-frame")
-         " from web/lib/browser.sx."))))
-
-
-;; ---------------------------------------------------------------------------
-;; L5: Keyed Lists
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/keyed-lists-content ()
-  (~docs/page :title "Layer 5: Keyed List Reconciliation"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "Enhances the existing reactive-list with explicit key extraction callbacks "
-      "for stable identity tracking across updates.")
-
-    (~docs/section :title "Live Demo" :id "demo"
-      (p "Items with stable " (code ":key") " identities. Reverse and rotate reorder the signal list — the reconciler moves existing DOM nodes instead of recreating them. Add and remove demonstrate insertion and deletion.")
-      (~reactive-runtime/demo-keyed-lists)
-      (~docs/code :src (highlight "(defisland ~demo-keyed-lists ()\n  (let ((items (signal (list\n          (dict \"id\" 1 \"text\" \"Alpha\" \"color\" \"violet\")\n          (dict \"id\" 2 \"text\" \"Beta\" \"color\" \"blue\") ...)))\n        (next-id (signal 6)))\n    (button :on-click (fn (e) (swap! items reverse)) \"Reverse\")\n    (button :on-click (fn (e)\n      (swap! items (fn (old) (append (rest old) (first old)))))\n      \"Rotate\")\n    (ul (map (fn (item)\n      (li :key (str (get item \"id\"))\n        :class (str \"bg-\" (get item \"color\") \"-100 ...\")\n        (span (get item \"text\"))\n        (button :on-click (fn (e) (remove-item (get item \"id\"))) \"✕\")))\n      (deref items)))))" "lisp"))
-      (p (code ":key") " on each " (code "li") " gives the reconciler stable identity. When " (code "reverse") " flips the list, the existing DOM nodes are moved — not destroyed and recreated. This preserves focus, scroll position, CSS transitions, and internal island state."))
-
-    (~docs/section :title "API" :id "keyed-api"
-
-      (~docs/code :src (highlight
-        ";; Current: keys extracted from rendered DOM key attribute\n(map (fn (el) (~shape-handle :key (get el :id) el)) (deref items))\n\n;; Enhanced: explicit key function\n(map (fn (el) (~shape-handle el)) (deref items)\n  :key (fn (el) (get el :id)))"
-        "lisp"))
-
-      (p "The " (code ":key") " parameter provides a function that extracts a stable identity "
-         "from each item " (em "before") " rendering. This is more efficient than extracting keys "
-         "from rendered DOM nodes and handles cases where the rendered output doesn't have a "
-         "natural key attribute."))
-
-    (~docs/section :title "Changes" :id "keyed-changes"
-
-      (p "Enhancement to existing " (code "adapter-dom.sx") ":")
-      (ul (~tw :tokens "list-disc pl-6 mb-4 space-y-1")
-        (li (code "render-dom-list") " detection — parse " (code ":key") " kwarg after " (code "(deref sig)"))
-        (li (code "reactive-list") " — accept optional " (code "key-fn") ", use instead of " (code "extract-key") " when provided")
-        (li "Fully backward compatible — without " (code ":key") ", behavior unchanged"))
-
-      (p "~155 lines of changes. No new platform primitives — existing DOM ops suffice."))))
-
-
-;; ---------------------------------------------------------------------------
-;; L6: App Shell
-;; ---------------------------------------------------------------------------
-
-(defcomp ~reactive-runtime/app-shell-content ()
-  (~docs/page :title "Layer 6: Client-First App Shell"
-
-    (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
-      "Skip SSR entirely for canvas-heavy apps. Server returns a minimal HTML shell; "
-      "all rendering happens client-side.")
-
-    (~docs/section :title "Live Demo" :id "demo"
-      (p "A mini single-page app rendered entirely client-side. Navigation switches views via a " (code "route") " signal — no server round-trips. Counter state persists across view switches because signals live in closures, not the DOM.")
-      (~reactive-runtime/demo-app-shell)
-      (~docs/code :src (highlight "(defisland ~demo-app-shell ()\n  (let ((route (signal \"home\"))\n        (count (signal 0)))\n    ;; Client-side nav\n    (nav\n      (button :on-click (fn (e) (reset! route \"home\"))\n        :class (str ... (if (= (deref route) \"home\") \"active\" \"inactive\"))\n        \"Home\")\n      ...)\n    ;; Reactive view switching\n    (cond\n      (= (deref route) \"home\")\n        (div (p \"Client-rendered. No server round-trip.\"))\n      (= (deref route) \"counter\")\n        (div (span (deref count)) ...)\n      (= (deref route) \"about\")\n        (div (p \"Entirely client-rendered.\")))))" "lisp"))
-      (p "This island IS a mini app shell. The " (code "make-app") " function generalizes the pattern: server returns " (code "<div id=\"sx-app-root\">") " + SX loader, " (code "app-boot") " mounts the entry component, " (code "app-navigate!") " switches routes — all using existing " (code "sx-mount") " and signals."))
-
-    (~docs/section :title "API" :id "app-api"
-
-      (~docs/code :src (highlight
-        "(define my-app (make-app\n  {:entry ~drawing-app\n   :stores (list canvas-state tool-state)\n   :routes {\"/\" ~drawing-app\n            \"/gallery\" ~gallery-view}\n   :head (list (link :rel \"stylesheet\" :href \"/static/app.css\"))}))\n\n;; Server: generate minimal HTML shell\n(app-shell-html my-app)\n;; => <!doctype html>...<div id=\"sx-app-root\">...</div>...\n\n;; Client: boot the app into the root element\n(app-boot my-app (dom-query \"#sx-app-root\"))\n\n;; Client: navigate between routes\n(app-navigate! my-app \"/gallery\")"
-        "lisp")))
-
-    (~docs/section :title "What the Server Returns" :id "app-shell"
-
-      (~docs/code :src (highlight
-        "<!doctype html>\n<html>\n<head>\n  <link rel=\"stylesheet\" href=\"/static/app.css\">\n  <script src=\"/static/scripts/sx-browser.js\"></script>\n</head>\n<body>\n  <div id=\"sx-app-root\"></div>\n  <script>\n    SX.boot(function(sx) {\n      sx.appBoot(/* app config */)\n    })\n  </script>\n</body>\n</html>"
-        "html"))
-
-      (p "The shell contains no rendered content — just the mount point and loader. "
-         "Uses existing " (code "sx-mount") " and " (code "sx-hydrate-islands") " from boot.sx.")
-
-      (p "~330 lines. Orchestrates all other layers."))))
-
-
-;; ===========================================================================
-;; Live demo islands
-;; ===========================================================================
-
-;; ---------------------------------------------------------------------------
-;; L0: Ref — timer ID in closure, DOM handle in dict
-;; ---------------------------------------------------------------------------
-
-(defisland ~reactive-runtime/demo-ref ()
-  (let ((input-ref (dict "current" nil))
-        (ticks (signal 0))
-        (running (signal false))
-        (last-value (signal "")))
-    (let ((_eff (effect (fn ()
-            (when (deref running)
-              (let ((id (set-interval (fn () (swap! ticks inc)) 500)))
-                (fn () (clear-interval id))))))))
-      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-        (p (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
-          "Timer — interval ID captured in effect closure")
-        (div (~tw :tokens "flex items-center gap-3 mb-4")
-          (span (~tw :tokens "text-2xl font-bold text-violet-900 font-mono w-16 text-center")
-            (deref ticks))
-          (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-            :on-click (fn (e) (swap! running not))
-            (if (deref running) "Stop" "Start"))
-          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-            :on-click (fn (e) (do (reset! running false) (reset! ticks 0)))
-            "Reset"))
-        (p (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
-          "DOM handle — element ref in dict")
-        (div (~tw :tokens "flex items-center gap-3")
-          (input :ref input-ref :type "text" :placeholder "Type something…"
-            (~tw :tokens "px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400 w-48"))
-          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-            :on-click (fn (e)
-              (reset! last-value (dom-get-prop (get input-ref "current") "value")))
-            "Read")
-          (when (not (= (deref last-value) ""))
-            (span (~tw :tokens "text-sm text-stone-600 font-mono")
-              "\"" (deref last-value) "\"")))))))
-
-
-;; ---------------------------------------------------------------------------
-;; L1: Foreign — canvas drawing via host-call
-;; ---------------------------------------------------------------------------
-
-(defisland ~reactive-runtime/demo-foreign ()
-  (let ((canvas-ref (dict "current" nil))
-        (color (signal "#8b5cf6"))
-        (count (signal 0)))
-    (let ((_eff (effect (fn ()
-            (let ((el (get canvas-ref "current"))
-                  (n (deref count))
-                  (c (deref color)))
-              (when el
-                (let ((ctx (host-call el "getContext" "2d")))
-                  (host-call ctx "clearRect" 0 0 280 160)
-                  (host-set! ctx "fillStyle" c)
-                  (host-call ctx "fillRect" 10 10 (min (* n 25) 260) (min (* n 18) 140)))))))))
-      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-        (canvas :ref canvas-ref :width "280" :height "160"
-          (~tw :tokens "border border-stone-300 rounded bg-white block mb-3"))
-        (div (~tw :tokens "flex items-center gap-3")
-          (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-            :on-click (fn (e) (swap! count inc))
-            "Add")
-          (select :bind color
-            (~tw :tokens "px-2 py-1 rounded border border-stone-300 text-sm")
-            (option :value "#8b5cf6" "Violet")
-            (option :value "#3b82f6" "Blue")
-            (option :value "#ef4444" "Red")
-            (option :value "#22c55e" "Green"))
-          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-            :on-click (fn (e) (reset! count 0))
-            "Clear")
-          (span (~tw :tokens "text-sm text-stone-500")
-            (deref count) " squares"))))))
-
-
-;; ---------------------------------------------------------------------------
-;; L2: State Machine — traffic light
-;; ---------------------------------------------------------------------------
-
-(defisland ~reactive-runtime/demo-machine ()
-  (let ((state (signal "red"))
-        (transitions (dict "red" "green" "green" "yellow" "yellow" "red"))
-        (auto (signal false)))
-    (let ((_eff (effect (fn ()
-            (when (deref auto)
-              (let ((delay (if (= (deref state) "yellow") 1000 2500)))
-                (let ((id (set-timeout
-                    (fn () (reset! state (get transitions (deref state))))
-                    delay)))
-                  (fn () (clear-timeout id)))))))))
-      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-        (div (~tw :tokens "flex items-center gap-6")
-          ;; Traffic light
-          (div (~tw :tokens "flex flex-col gap-2 p-3 bg-stone-800 rounded-lg")
-            (div :class (str "w-10 h-10 rounded-full transition-colors "
-                  (if (= (deref state) "red") "bg-red-500 shadow-lg shadow-red-500/50" "bg-red-900/30")))
-            (div :class (str "w-10 h-10 rounded-full transition-colors "
-                  (if (= (deref state) "yellow") "bg-yellow-400 shadow-lg shadow-yellow-400/50" "bg-yellow-900/30")))
-            (div :class (str "w-10 h-10 rounded-full transition-colors "
-                  (if (= (deref state) "green") "bg-green-500 shadow-lg shadow-green-500/50" "bg-green-900/30"))))
-          ;; Controls
-          (div (~tw :tokens "space-y-3")
-            (div (~tw :tokens "flex items-center gap-2")
-              (span (~tw :tokens "text-sm font-medium text-stone-700") "State:")
-              (span (~tw :tokens "text-sm font-mono text-violet-700") (deref state)))
-            (div (~tw :tokens "flex items-center gap-2")
-              (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-                :on-click (fn (e)
-                  (reset! state (get transitions (deref state))))
-                "Next")
-              (button :class (str "px-3 py-1 rounded text-sm font-medium "
-                      (if (deref auto)
-                        "bg-amber-500 text-white hover:bg-amber-600"
-                        "bg-stone-300 text-stone-700 hover:bg-stone-400"))
-                :on-click (fn (e) (swap! auto not))
-                (if (deref auto) "Auto: ON" "Auto: OFF")))))))))
-
-
-;; ---------------------------------------------------------------------------
-;; L3: Commands — counter with undo/redo
-;; ---------------------------------------------------------------------------
-
-(defisland ~reactive-runtime/demo-commands ()
-  (let ((value (signal 0))
-        (history (signal (list)))
-        (future (signal (list)))
-        (undo-class (signal "bg-stone-200 text-stone-400 cursor-not-allowed"))
-        (redo-class (signal "bg-stone-200 text-stone-400 cursor-not-allowed")))
-    (let ((do-cmd (fn (new-val)
-            (let ((old-val (deref value))
-                  (old-hist (deref history)))
-              (do
-                (reset! history (cons old-val old-hist))
-                (reset! future (list))
-                (reset! value new-val)))))
-          (undo (fn ()
-            (let ((h (deref history)))
-              (when (> (len h) 0)
-                (let ((prev (first h))
-                      (old-val (deref value))
-                      (f (deref future)))
-                  (do
-                    (reset! future (cons old-val f))
-                    (reset! history (rest h))
-                    (reset! value prev)))))))
-          (redo (fn ()
-            (let ((f (deref future)))
-              (when (> (len f) 0)
-                (let ((next-val (first f))
-                      (old-val (deref value))
-                      (h (deref history)))
-                  (do
-                    (reset! history (cons old-val h))
-                    (reset! future (rest f))
-                    (reset! value next-val)))))))
-          (_e1 (effect (fn ()
-            (reset! undo-class
-              (if (> (len (deref history)) 0)
-                "bg-stone-600 text-white hover:bg-stone-700"
-                "bg-stone-200 text-stone-400 cursor-not-allowed")))))
-          (_e2 (effect (fn ()
-            (reset! redo-class
-              (if (> (len (deref future)) 0)
-                "bg-stone-600 text-white hover:bg-stone-700"
-                "bg-stone-200 text-stone-400 cursor-not-allowed"))))))
-      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-        (div (~tw :tokens "flex items-center gap-3 mb-3")
-          (span (~tw :tokens "text-3xl font-bold text-violet-900 font-mono w-20 text-center")
-            (deref value))
-          (div (~tw :tokens "flex gap-1")
-            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-              :on-click (fn (e) (do-cmd (+ (deref value) 1)))
-              "+1")
-            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-              :on-click (fn (e) (do-cmd (+ (deref value) 5)))
-              "+5")
-            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-              :on-click (fn (e) (do-cmd (* (deref value) 2)))
-              "×2")
-            (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-              :on-click (fn (e) (do-cmd 0))
-              "0")))
-        (div (~tw :tokens "flex items-center gap-3")
-          (button :class (str "px-3 py-1 rounded text-sm font-medium " (deref undo-class))
-            :on-click (fn (e) (undo))
-            "Undo")
-          (button :class (str "px-3 py-1 rounded text-sm font-medium " (deref redo-class))
-            :on-click (fn (e) (redo))
-            "Redo")
-          (span (~tw :tokens "text-xs text-stone-400 font-mono")
-            "history: " (deref (computed (fn () (len (deref history)))))))))))
-
-
-;; ---------------------------------------------------------------------------
-;; L4: Render Loop — bouncing ball
-;; ---------------------------------------------------------------------------
-
-(defisland ~reactive-runtime/demo-loop ()
-  (let ((running (signal true))
-        (x (signal 0))
-        (dir (signal 1))
-        (frames (signal 0)))
-    (let ((_eff (effect (fn ()
-            (when (deref running)
-              (let ((id (set-interval
-                  (fn ()
-                    (batch (fn ()
-                      (swap! frames inc)
-                      (when (>= (deref x) 230) (reset! dir -1))
-                      (when (<= (deref x) 0) (reset! dir 1))
-                      (swap! x (fn (v) (+ v (* (deref dir) 3)))))))
-                  16)))
-                (fn () (clear-interval id))))))))
-      (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-        (div (~tw :tokens "relative h-12 bg-white rounded border border-stone-200 mb-3 overflow-hidden")
-          (div (~tw :tokens "absolute top-1 w-10 h-10 rounded-full bg-violet-500 transition-none")
-            :style (str "left:" (deref x) "px")))
-        (div (~tw :tokens "flex items-center gap-3")
-          (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-            :on-click (fn (e) (swap! running not))
-            (if (deref running) "Pause" "Play"))
-          (button (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
-            :on-click (fn (e)
-              (batch (fn ()
-                (reset! running false)
-                (reset! x 0)
-                (reset! dir 1)
-                (reset! frames 0))))
-            "Reset")
-          (span (~tw :tokens "text-sm text-stone-500 font-mono")
-            "frames: " (deref frames)))))))
-
-
-;; ---------------------------------------------------------------------------
-;; L5: Keyed Lists — reorderable items
-;; ---------------------------------------------------------------------------
-
-(defisland ~reactive-runtime/demo-keyed-lists ()
-  (let ((next-id (signal 1))
-        (items (signal (list)))
-        (colors (list "violet" "blue" "green" "amber" "red" "stone"))
-        (add-item (fn (e)
-          (let ((id (deref next-id))
-                (old (deref items)))
-            (do
-              (reset! items (append old (dict "id" id
-                                              "text" (str "Item " id)
-                                              "color" (nth colors (mod (- id 1) 6)))))
-              (reset! next-id (+ id 1))))))
-        (remove-item (fn (id)
-          (reset! items (filter (fn (item) (not (= (get item "id") id))) (deref items))))))
-    (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      (div (~tw :tokens "flex items-center gap-2 mb-3")
-        (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click add-item
-          "Add Item")
-        (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-          :on-click (fn (e) (reset! items (reverse (deref items))))
-          "Reverse")
-        (span (~tw :tokens "text-sm text-stone-500")
-          (deref (computed (fn () (len (deref items))))) " items"))
-      (ul (~tw :tokens "space-y-1")
-        (map (fn (item)
-          (li :key (str (get item "id"))
-              :class (str "flex items-center justify-between rounded px-3 py-2 text-sm bg-" (get item "color") "-100 text-" (get item "color") "-800")
-            (span (get item "text"))
-            (button (~tw :tokens "text-stone-400 hover:text-red-500 text-xs ml-2")
-              :on-click (fn (e) (remove-item (get item "id")))
-              "✕")))
-          (deref items))))))
-
-
-;; ---------------------------------------------------------------------------
-;; L6: App Shell — client-side mini-app
-;; ---------------------------------------------------------------------------
-
-(defisland ~reactive-runtime/demo-app-shell ()
-  (let ((route (signal "home"))
-        (count (signal 0)))
-    (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
-      ;; Client-side nav bar
-      (nav (~tw :tokens "flex gap-1 border-b border-stone-200 pb-2 mb-3")
-        (button :class (str "px-2 py-1 text-xs rounded "
-                  (if (= (deref route) "home")
-                    "bg-violet-600 text-white font-medium"
-                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
-          :on-click (fn (e) (reset! route "home"))
-          "Home")
-        (button :class (str "px-2 py-1 text-xs rounded "
-                  (if (= (deref route) "counter")
-                    "bg-violet-600 text-white font-medium"
-                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
-          :on-click (fn (e) (reset! route "counter"))
-          "Counter")
-        (button :class (str "px-2 py-1 text-xs rounded "
-                  (if (= (deref route) "about")
-                    "bg-violet-600 text-white font-medium"
-                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
-          :on-click (fn (e) (reset! route "about"))
-          "About"))
-      ;; Reactive view switching
-      (div (~tw :tokens "min-h-24")
-        (if (= (deref route) "home")
-            (div (~tw :tokens "p-3")
-              (h3 (~tw :tokens "font-bold text-stone-800 mb-1") "Home")
-              (p (~tw :tokens "text-sm text-stone-600")
-                "Client-side rendered. No server round-trip for navigation."))
-          (if (= (deref route) "counter")
-            (div (~tw :tokens "p-3")
-              (h3 (~tw :tokens "font-bold text-stone-800 mb-2") "Counter")
-              (div (~tw :tokens "flex items-center gap-3")
-                (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-                  :on-click (fn (e) (swap! count dec))
-                  "−")
-                (span (~tw :tokens "text-2xl font-bold text-violet-900 font-mono w-12 text-center")
-                  (deref count))
-                (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
-                  :on-click (fn (e) (swap! count inc))
-                  "+"))
-              (p (~tw :tokens "text-xs text-stone-400 mt-2")
-                "State persists across view switches — signals live in closures."))
-            (div (~tw :tokens "p-3")
-              (h3 (~tw :tokens "font-bold text-stone-800 mb-1") "About")
-              (p (~tw :tokens "text-sm text-stone-600")
-                "This mini-app is entirely client-rendered. The server provides only "
-                "the component definition and mount point — zero HTML content."))))))))
diff --git a/sx/sx/reference.sx b/sx/sx/reference.sx
deleted file mode 100644
index ace7f1e5..00000000
--- a/sx/sx/reference.sx
+++ /dev/null
@@ -1,120 +0,0 @@
-(defcomp
-  ~reference/attrs-content
-  (&key req-table beh-table uniq-table)
-  (~docs/page
-    :title "Attribute Reference"
-    (p
-      (~tw :tokens "text-stone-600 mb-6")
-      "sx attributes mirror htmx where possible. This table shows all available attributes and their status.")
-    (div (~tw :tokens "space-y-8") req-table beh-table uniq-table)))
-
-(defcomp
-  ~reference/headers-content
-  (&key req-table resp-table)
-  (~docs/page
-    :title "Headers"
-    (p
-      (~tw :tokens "text-stone-600 mb-6")
-      "sx uses custom HTTP headers to coordinate between client and server.")
-    (div (~tw :tokens "space-y-8") req-table resp-table)))
-
-(defcomp
-  ~reference/events-content
-  (&key table)
-  (~docs/page
-    :title "Events"
-    (p
-      (~tw :tokens "text-stone-600 mb-6")
-      "sx fires custom DOM events at various points in the request lifecycle. "
-      "Listen for them with sx-on:* attributes or addEventListener. "
-      "Client-side routing fires sx:clientRoute instead of request lifecycle events.")
-    table))
-
-(defcomp
-  ~reference/js-api-content
-  (&key table)
-  (~docs/page :title "JavaScript API" table))
-
-(defcomp
-  ~reference/attr-detail-content
-  (&key
-    (title :as string)
-    (description :as string)
-    demo
-    (example-code :as string)
-    (handler-code :as string?)
-    (wire-placeholder-id :as string?))
-  (~docs/page
-    :title title
-    (p (~tw :tokens "text-stone-600 mb-6") description)
-    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
-    (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "S-expression")
-    (~examples/source :src-code (highlight example-code "lisp"))
-    (when
-      handler-code
-      (<>
-        (h3
-          (~tw :tokens "text-lg font-semibold text-stone-700 mt-6")
-          "Server handler")
-        (~examples/source :src-code (highlight handler-code "lisp"))))
-    (when
-      wire-placeholder-id
-      (<>
-        (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "Wire response")
-        (p
-          (~tw :tokens "text-stone-500 text-sm mb-2")
-          "Trigger the demo to see the raw response the server sends.")
-        (~docs/placeholder :id wire-placeholder-id)))))
-
-(defcomp
-  ~reference/header-detail-content
-  (&key
-    (title :as string)
-    (direction :as string)
-    (description :as string)
-    (example-code :as string?)
-    demo)
-  (~docs/page
-    :title title
-    (let
-      ((badge-class (if (= direction "request") "bg-blue-100 text-blue-700" (if (= direction "response") "bg-emerald-100 text-emerald-700" "bg-amber-100 text-amber-700")))
-        (badge-label
-          (if
-            (= direction "request")
-            "Request Header"
-            (if
-              (= direction "response")
-              "Response Header"
-              "Request & Response"))))
-      (div
-        (~tw :tokens "flex items-center gap-3 mb-4")
-        (span
-          :class (str "text-xs font-medium px-2 py-1 rounded " badge-class)
-          badge-label)))
-    (p (~tw :tokens "text-stone-600 mb-6") description)
-    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
-    (when
-      example-code
-      (<>
-        (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "Example usage")
-        (~examples/source :src-code (highlight example-code "lisp"))))))
-
-(defcomp
-  ~reference/event-detail-content
-  (&key title description example-code demo)
-  (~docs/page
-    :title title
-    (p (~tw :tokens "text-stone-600 mb-6") description)
-    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
-    (when
-      example-code
-      (<>
-        (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "Example usage")
-        (~examples/source :src-code (highlight example-code "lisp"))))))
-
-(defcomp
-  ~reference/attr-not-found
-  (&key (slug :as string))
-  (~docs/page
-    :title "Not Found"
-    (p (~tw :tokens "text-stone-600") (str "No documentation found for \"" slug "\"."))))
diff --git a/sx/sx/spec-introspect.sx b/sx/sx/spec-introspect.sx
deleted file mode 100644
index 05f91cf5..00000000
--- a/sx/sx/spec-introspect.sx
+++ /dev/null
@@ -1,238 +0,0 @@
-(define
-  spec-form-name
-  (fn
-    (form)
-    (if
-      (< (len form) 2)
-      nil
-      (let
-        ((head (symbol-name (first form))) (name-part (nth form 1)))
-        (cond
-          (= head "define")
-          (if (= (type-of name-part) "symbol") (symbol-name name-part) nil)
-          (or (= head "defcomp") (= head "defisland") (= head "defmacro"))
-          (if (= (type-of name-part) "symbol") (symbol-name name-part) nil)
-          :else nil)))))
-
-(define
-  spec-form-effects
-  (fn
-    (form)
-    (let
-      ((result (list)) (found false))
-      (when
-        (> (len form) 3)
-        (for-each
-          (fn
-            (item)
-            (if
-              found
-              (when
-                (and (list? item) (empty? result))
-                (for-each
-                  (fn
-                    (eff)
-                    (append!
-                      result
-                      (if
-                        (= (type-of eff) "symbol")
-                        (symbol-name eff)
-                        (str eff))))
-                  item)
-                (set! found false))
-              (when
-                (and
-                  (= (type-of item) "keyword")
-                  (= (keyword-name item) "effects"))
-                (set! found true))))
-          (slice form 2)))
-      result)))
-
-(define
-  spec-form-params
-  (fn
-    (form)
-    (if
-      (< (len form) 2)
-      (list)
-      (let
-        ((body (nth form (- (len form) 1))))
-        (if
-          (and
-            (list? body)
-            (> (len body) 1)
-            (= (type-of (first body)) "symbol")
-            (or
-              (= (symbol-name (first body)) "fn")
-              (= (symbol-name (first body)) "lambda")))
-          (let
-            ((raw-params (nth body 1)))
-            (if
-              (list? raw-params)
-              (map
-                (fn
-                  (p)
-                  (cond
-                    (= (type-of p) "symbol")
-                    {:type nil :name (symbol-name p)}
-                    (and
-                      (list? p)
-                      (>= (len p) 3)
-                      (= (type-of (first p)) "symbol"))
-                    {:type (if (and (>= (len p) 3) (= (type-of (nth p 2)) "symbol")) (symbol-name (nth p 2)) nil) :name (symbol-name (first p))}
-                    :else {:type nil :name (str p)}))
-                raw-params)
-              (list)))
-          (list))))))
-
-(define
-  spec-form-kind
-  (fn
-    (form)
-    (let
-      ((head (symbol-name (first form))))
-      (cond
-        (= head "defcomp")
-        "component"
-        (= head "defisland")
-        "island"
-        (= head "defmacro")
-        "macro"
-        (= head "define")
-        (let
-          ((body (last form)))
-          (if
-            (and
-              (list? body)
-              (> (len body) 0)
-              (= (type-of (first body)) "symbol")
-              (or
-                (= (symbol-name (first body)) "fn")
-                (= (symbol-name (first body)) "lambda")))
-            "function"
-            "constant"))
-        :else "unknown"))))
-
-(define
-  spec-form-signature
-  (fn
-    (form)
-    (let
-      ((head (symbol-name (first form))) (name (spec-form-name form)))
-      (cond
-        (or
-          (= head "define")
-          (= head "defcomp")
-          (= head "defisland")
-          (= head "defmacro"))
-        (let
-          ((body (last form)))
-          (if
-            (and
-              (list? body)
-              (> (len body) 0)
-              (= (type-of (first body)) "symbol")
-              (or
-                (= (symbol-name (first body)) "fn")
-                (= (symbol-name (first body)) "lambda")))
-            (let
-              ((params (nth body 1)))
-              (str "(" head " " name " (fn " (serialize params) " …))"))
-            (str "(" head " " name " …)")))
-        :else (str "(" head " " name " …)")))))
-
-(define
-  spec-group-sections
-  (fn
-    (forms source)
-    (let
-      ((sections (list))
-        (current-title "Definitions")
-        (current-comment nil)
-        (current-defines (list)))
-      (for-each
-        (fn
-          (form)
-          (when
-            (and (list? form) (> (len form) 1))
-            (let
-              ((name (spec-form-name form)))
-              (when name (append! current-defines {:kind (spec-form-kind form) :name name})))))
-        forms)
-      (when (not (empty? current-defines)) (append! sections {:defines current-defines :title current-title :comment current-comment}))
-      sections)))
-
-(define
-  spec-compute-stats
-  (fn
-    (sections source)
-    (let
-      ((total 0)
-        (pure 0)
-        (mutation 0)
-        (io 0)
-        (render 0)
-        (lines (len (split source "\n"))))
-      (for-each
-        (fn
-          (section)
-          (for-each
-            (fn
-              (d)
-              (set! total (inc total))
-              (if
-                (empty? (get d "effects"))
-                (set! pure (inc pure))
-                (for-each
-                  (fn
-                    (eff)
-                    (cond
-                      (= eff "mutation")
-                      (set! mutation (inc mutation))
-                      (= eff "io")
-                      (set! io (inc io))
-                      (= eff "render")
-                      (set! render (inc render))))
-                  (get d "effects"))))
-            (get section "defines")))
-        sections)
-      {:lines lines :io-count io :render-count render :pure-count pure :mutation-count mutation :test-total 0 :total-defines total})))
-
-(define
-  spec-explore-define
-  :effects (io)
-  (fn
-    (filename def-name)
-    (let
-      ((source (helper "read-spec-file" filename)))
-      (if
-        (starts-with? source ";; spec file not found")
-        nil
-        (let
-          ((forms (sx-parse source)) (found nil))
-          (for-each
-            (fn
-              (form)
-              (when
-                (and (not found) (list? form) (> (len form) 1))
-                (let
-                  ((name (spec-form-name form)))
-                  (when (= name def-name) (set! found {:kind (spec-form-kind form) :effects (spec-form-effects form) :params (spec-form-params form) :source (serialize form) :name name})))))
-            forms)
-          found)))))
-
-(define
-  spec-explore
-  :effects (io)
-  (fn
-    (filename title desc)
-    (let
-      ((source (helper "read-spec-file" filename)))
-      (if
-        (starts-with? source ";; spec file not found")
-        nil
-        (let
-          ((forms (sx-parse source))
-            (sections (spec-group-sections forms source))
-            (stats (spec-compute-stats sections source)))
-          {:stats stats :desc desc :title title :filename filename :platform-interface (list) :sections sections})))))
diff --git a/sx/sx/spec-introspect/spec-compute-stats.sx b/sx/sx/spec-introspect/spec-compute-stats.sx
new file mode 100644
index 00000000..37566dd5
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-compute-stats.sx
@@ -0,0 +1,34 @@
+(define spec-compute-stats
+  (fn
+    (sections source)
+    (let
+      ((total 0)
+        (pure 0)
+        (mutation 0)
+        (io 0)
+        (render 0)
+        (lines (len (split source "\n"))))
+      (for-each
+        (fn
+          (section)
+          (for-each
+            (fn
+              (d)
+              (set! total (inc total))
+              (if
+                (empty? (get d "effects"))
+                (set! pure (inc pure))
+                (for-each
+                  (fn
+                    (eff)
+                    (cond
+                      (= eff "mutation")
+                      (set! mutation (inc mutation))
+                      (= eff "io")
+                      (set! io (inc io))
+                      (= eff "render")
+                      (set! render (inc render))))
+                  (get d "effects"))))
+            (get section "defines")))
+        sections)
+      {:lines lines :io-count io :render-count render :pure-count pure :mutation-count mutation :test-total 0 :total-defines total})))
diff --git a/sx/sx/spec-introspect/spec-explore-define.sx b/sx/sx/spec-introspect/spec-explore-define.sx
new file mode 100644
index 00000000..d72a26a2
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-explore-define.sx
@@ -0,0 +1,21 @@
+(define spec-explore-define
+  :effects (io)
+  (fn
+    (filename def-name)
+    (let
+      ((source (helper "read-spec-file" filename)))
+      (if
+        (starts-with? source ";; spec file not found")
+        nil
+        (let
+          ((forms (sx-parse source)) (found nil))
+          (for-each
+            (fn
+              (form)
+              (when
+                (and (not found) (list? form) (> (len form) 1))
+                (let
+                  ((name (spec-form-name form)))
+                  (when (= name def-name) (set! found {:kind (spec-form-kind form) :effects (spec-form-effects form) :params (spec-form-params form) :source (serialize form) :name name})))))
+            forms)
+          found)))))
diff --git a/sx/sx/spec-introspect/spec-explore.sx b/sx/sx/spec-introspect/spec-explore.sx
new file mode 100644
index 00000000..798bbf29
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-explore.sx
@@ -0,0 +1,14 @@
+(define spec-explore
+  :effects (io)
+  (fn
+    (filename title desc)
+    (let
+      ((source (helper "read-spec-file" filename)))
+      (if
+        (starts-with? source ";; spec file not found")
+        nil
+        (let
+          ((forms (sx-parse source))
+            (sections (spec-group-sections forms source))
+            (stats (spec-compute-stats sections source)))
+          {:stats stats :desc desc :title title :filename filename :platform-interface (list) :sections sections})))))
diff --git a/sx/sx/spec-introspect/spec-form-effects.sx b/sx/sx/spec-introspect/spec-form-effects.sx
new file mode 100644
index 00000000..2d0ceca0
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-form-effects.sx
@@ -0,0 +1,32 @@
+(define spec-form-effects
+  (fn
+    (form)
+    (let
+      ((result (list)) (found false))
+      (when
+        (> (len form) 3)
+        (for-each
+          (fn
+            (item)
+            (if
+              found
+              (when
+                (and (list? item) (empty? result))
+                (for-each
+                  (fn
+                    (eff)
+                    (append!
+                      result
+                      (if
+                        (= (type-of eff) "symbol")
+                        (symbol-name eff)
+                        (str eff))))
+                  item)
+                (set! found false))
+              (when
+                (and
+                  (= (type-of item) "keyword")
+                  (= (keyword-name item) "effects"))
+                (set! found true))))
+          (slice form 2)))
+      result)))
diff --git a/sx/sx/spec-introspect/spec-form-kind.sx b/sx/sx/spec-introspect/spec-form-kind.sx
new file mode 100644
index 00000000..fea424f0
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-form-kind.sx
@@ -0,0 +1,26 @@
+(define spec-form-kind
+  (fn
+    (form)
+    (let
+      ((head (symbol-name (first form))))
+      (cond
+        (= head "defcomp")
+        "component"
+        (= head "defisland")
+        "island"
+        (= head "defmacro")
+        "macro"
+        (= head "define")
+        (let
+          ((body (last form)))
+          (if
+            (and
+              (list? body)
+              (> (len body) 0)
+              (= (type-of (first body)) "symbol")
+              (or
+                (= (symbol-name (first body)) "fn")
+                (= (symbol-name (first body)) "lambda")))
+            "function"
+            "constant"))
+        :else "unknown"))))
diff --git a/sx/sx/spec-introspect/spec-form-name.sx b/sx/sx/spec-introspect/spec-form-name.sx
new file mode 100644
index 00000000..86a21fc7
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-form-name.sx
@@ -0,0 +1,14 @@
+(define spec-form-name
+  (fn
+    (form)
+    (if
+      (< (len form) 2)
+      nil
+      (let
+        ((head (symbol-name (first form))) (name-part (nth form 1)))
+        (cond
+          (= head "define")
+          (if (= (type-of name-part) "symbol") (symbol-name name-part) nil)
+          (or (= head "defcomp") (= head "defisland") (= head "defmacro"))
+          (if (= (type-of name-part) "symbol") (symbol-name name-part) nil)
+          :else nil)))))
diff --git a/sx/sx/spec-introspect/spec-form-params.sx b/sx/sx/spec-introspect/spec-form-params.sx
new file mode 100644
index 00000000..57216033
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-form-params.sx
@@ -0,0 +1,35 @@
+(define spec-form-params
+  (fn
+    (form)
+    (if
+      (< (len form) 2)
+      (list)
+      (let
+        ((body (nth form (- (len form) 1))))
+        (if
+          (and
+            (list? body)
+            (> (len body) 1)
+            (= (type-of (first body)) "symbol")
+            (or
+              (= (symbol-name (first body)) "fn")
+              (= (symbol-name (first body)) "lambda")))
+          (let
+            ((raw-params (nth body 1)))
+            (if
+              (list? raw-params)
+              (map
+                (fn
+                  (p)
+                  (cond
+                    (= (type-of p) "symbol")
+                    {:type nil :name (symbol-name p)}
+                    (and
+                      (list? p)
+                      (>= (len p) 3)
+                      (= (type-of (first p)) "symbol"))
+                    {:type (if (and (>= (len p) 3) (= (type-of (nth p 2)) "symbol")) (symbol-name (nth p 2)) nil) :name (symbol-name (first p))}
+                    :else {:type nil :name (str p)}))
+                raw-params)
+              (list)))
+          (list))))))
diff --git a/sx/sx/spec-introspect/spec-form-signature.sx b/sx/sx/spec-introspect/spec-form-signature.sx
new file mode 100644
index 00000000..5c599cba
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-form-signature.sx
@@ -0,0 +1,26 @@
+(define spec-form-signature
+  (fn
+    (form)
+    (let
+      ((head (symbol-name (first form))) (name (spec-form-name form)))
+      (cond
+        (or
+          (= head "define")
+          (= head "defcomp")
+          (= head "defisland")
+          (= head "defmacro"))
+        (let
+          ((body (last form)))
+          (if
+            (and
+              (list? body)
+              (> (len body) 0)
+              (= (type-of (first body)) "symbol")
+              (or
+                (= (symbol-name (first body)) "fn")
+                (= (symbol-name (first body)) "lambda")))
+            (let
+              ((params (nth body 1)))
+              (str "(" head " " name " (fn " (serialize params) " …))"))
+            (str "(" head " " name " …)")))
+        :else (str "(" head " " name " …)")))))
diff --git a/sx/sx/spec-introspect/spec-group-sections.sx b/sx/sx/spec-introspect/spec-group-sections.sx
new file mode 100644
index 00000000..09deaf98
--- /dev/null
+++ b/sx/sx/spec-introspect/spec-group-sections.sx
@@ -0,0 +1,19 @@
+(define spec-group-sections
+  (fn
+    (forms source)
+    (let
+      ((sections (list))
+        (current-title "Definitions")
+        (current-comment nil)
+        (current-defines (list)))
+      (for-each
+        (fn
+          (form)
+          (when
+            (and (list? form) (> (len form) 1))
+            (let
+              ((name (spec-form-name form)))
+              (when name (append! current-defines {:kind (spec-form-kind form) :name name})))))
+        forms)
+      (when (not (empty? current-defines)) (append! sections {:defines current-defines :title current-title :comment current-comment}))
+      sections)))
diff --git a/sx/sx/specs-explorer.sx b/sx/sx/specs-explorer.sx
deleted file mode 100644
index 351eaba0..00000000
--- a/sx/sx/specs-explorer.sx
+++ /dev/null
@@ -1,364 +0,0 @@
-(defcomp
-  ~specs-explorer/spec-explorer-content
-  (&key data)
-  :affinity :server
-  (let-match
-    {:stats stats :desc desc :title title :filename filename :platform-interface platform-interface :sections sections}
-    data
-    (~docs/page
-      :title (str title " — Explorer")
-      (~specs-explorer/spec-explorer-header
-        :filename filename
-        :title title
-        :desc desc
-        :slug (replace filename ".sx" ""))
-      (~specs-explorer/spec-explorer-stats :stats stats)
-      (map
-        (fn
-          (section)
-          (~specs-explorer/spec-explorer-section
-            :section section
-            :filename filename))
-        sections)
-      (when
-        (not (empty? platform-interface))
-        (~specs-explorer/spec-platform-interface :items platform-interface)))))
-
-(defcomp
-  ~specs-explorer/spec-explorer-header
-  (&key filename title desc slug)
-  (div
-    (~tw :tokens "mb-6")
-    (div
-      (~tw :tokens "flex items-center justify-between")
-      (div
-        (h1 (~tw :tokens "text-2xl font-bold text-stone-800") title)
-        (p (~tw :tokens "text-sm text-stone-500 mt-1") desc))
-      (a
-        :href (str "/sx/(language.(spec." slug "))")
-        :sx-get (str "/sx/(language.(spec." slug "))")
-        :sx-target "#sx-content"
-        :sx-select "#sx-content"
-        :sx-swap "outerHTML"
-        :sx-push-url "true"
-        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800 font-medium")
-        "View Source"))
-    (p (~tw :tokens "text-xs text-stone-400 font-mono mt-2") filename)))
-
-(defcomp
-  ~specs-explorer/spec-explorer-stats
-  (&key stats)
-  (let-match
-    {:lines lines :io-count io-count :render-count render-count :pure-count pure-count :mutation-count mutation-count :test-total test-total :total-defines total-defines}
-    stats
-    (div
-      (~tw :tokens "flex flex-wrap gap-2 mb-6 text-xs")
-      (span
-        (~tw
-          :tokens "bg-stone-100 text-stone-600 px-2 py-0.5 rounded font-medium")
-        (str total-defines " defines"))
-      (when
-        (> pure-count 0)
-        (span
-          (~tw :tokens "bg-green-100 text-green-700 px-2 py-0.5 rounded")
-          (str pure-count " pure")))
-      (when
-        (> mutation-count 0)
-        (span
-          (~tw :tokens "bg-amber-100 text-amber-700 px-2 py-0.5 rounded")
-          (str mutation-count " mutation")))
-      (when
-        (> io-count 0)
-        (span
-          (~tw :tokens "bg-orange-100 text-orange-700 px-2 py-0.5 rounded")
-          (str io-count " io")))
-      (when
-        (> render-count 0)
-        (span
-          (~tw :tokens "bg-sky-100 text-sky-700 px-2 py-0.5 rounded")
-          (str render-count " render")))
-      (when
-        (> test-total 0)
-        (span
-          (~tw :tokens "bg-violet-100 text-violet-700 px-2 py-0.5 rounded")
-          (str test-total " tests")))
-      (span
-        (~tw :tokens "bg-stone-100 text-stone-500 px-2 py-0.5 rounded")
-        (str lines " lines")))))
-
-(defcomp
-  ~specs-explorer/spec-explorer-section
-  (&key section filename)
-  (let-match
-    {:defines defines :title title :comment comment}
-    section
-    (div
-      (~tw :tokens "mb-6")
-      (h2
-        (~tw
-          :tokens "text-base font-semibold text-stone-600 mb-2 border-b border-stone-200 pb-1")
-        :id (replace (lower title) " " "-")
-        title)
-      (when comment (p (~tw :tokens "text-sm text-stone-500 mb-2") comment))
-      (div
-        (~tw :tokens "space-y-0.5")
-        (map
-          (fn
-            (d)
-            (~specs-explorer/spec-explorer-define :d d :filename filename))
-          defines)))))
-
-(defcomp
-  ~specs-explorer/spec-explorer-define
-  (&key d filename)
-  (let-match
-    {:kind kind :name name}
-    d
-    (div
-      (~tw
-        :tokens "flex items-center gap-2 py-1.5 px-2 rounded hover:bg-stone-50 cursor-pointer group")
-      :id (str "fn-" name)
-      :sx-get (str
-        "/sx/(language.(spec.(explore."
-        (replace filename ".sx" "")
-        "."
-        name
-        ")))")
-      :sx-target "#sx-content"
-      :sx-select "#sx-content"
-      :sx-swap "innerHTML"
-      :sx-push-url "true"
-      (span
-        (~tw
-          :tokens "font-mono text-sm font-medium text-stone-800 group-hover:text-violet-700")
-        name)
-      (span (~tw :tokens "text-xs text-stone-400") kind))))
-
-(defcomp
-  ~specs-explorer/spec-explorer-define-detail
-  (&key d filename)
-  :affinity :server
-  (div
-    (~tw :tokens "max-w-3xl mx-auto")
-    (div
-      (~tw :tokens "mb-4")
-      (a
-        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800")
-        :href (str
-          "/sx/(language.(spec.(explore."
-          (replace filename ".sx" "")
-          ")))")
-        :sx-get (str
-          "/sx/(language.(spec.(explore."
-          (replace filename ".sx" "")
-          ")))")
-        :sx-target "#sx-content"
-        :sx-select "#sx-content"
-        :sx-swap "innerHTML"
-        :sx-push-url "true"
-        (str "← Back to " (replace filename ".sx" ""))))
-    (let-match
-      {:kind kind :effects effects :params params :source source :name name}
-      d
-      (div
-        (~tw :tokens "rounded border border-violet-200 bg-violet-50/30 p-4")
-        (div
-          (~tw :tokens "flex items-center gap-2 flex-wrap mb-3")
-          (span
-            (~tw :tokens "font-mono text-lg font-semibold text-stone-800")
-            name)
-          (span (~tw :tokens "text-xs text-stone-400") kind)
-          (if
-            (empty? effects)
-            (span
-              (~tw
-                :tokens "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700")
-              "pure")
-            (map
-              (fn (eff) (~specs-explorer/spec-effect-badge :effect eff))
-              effects)))
-        (when
-          (not (empty? params))
-          (~specs-explorer/spec-param-list :params params))
-        (details
-          :open "true"
-          (summary
-            (~tw
-              :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer select-none mt-3 rounded")
-            "SX Source")
-          (pre
-            (~tw
-              :tokens "text-xs p-3 overflow-x-auto bg-white rounded mt-1 border border-stone-200")
-            (code (~tw :tokens "language-sx") source)))))))
-
-(defcomp
-  ~specs-explorer/spec-effect-badge
-  (&key effect)
-  (span
-    :class (str
-      "text-xs px-1.5 py-0.5 rounded "
-      (case
-        effect
-        "mutation"
-        "bg-amber-100 text-amber-700"
-        "io"
-        "bg-orange-100 text-orange-700"
-        "render"
-        "bg-sky-100 text-sky-700"
-        :else "bg-stone-100 text-stone-500"))
-    effect))
-
-(defcomp
-  ~specs-explorer/spec-param-list
-  (&key params)
-  (div
-    (~tw :tokens "mt-1 flex flex-wrap gap-1")
-    (map
-      (fn
-        (p)
-        (let-match
-          {:type typ :name name}
-          p
-          (if
-            (or (= name "&rest") (= name "&key"))
-            (span (~tw :tokens "text-xs font-mono text-violet-500") name)
-            (span
-              (~tw
-                :tokens "text-xs font-mono px-1 py-0.5 rounded bg-stone-50 border border-stone-200")
-              (if
-                typ
-                (<>
-                  (span (~tw :tokens "text-stone-700") name)
-                  (span (~tw :tokens "text-stone-400") " : ")
-                  (span (~tw :tokens "text-violet-600") typ))
-                (span (~tw :tokens "text-stone-700") name))))))
-      params)))
-
-(defcomp
-  ~specs-explorer/spec-ring-translations
-  (&key source python javascript z3)
-  (when
-    (not (= source ""))
-    (div
-      (~tw :tokens "mt-3 border border-stone-200 rounded-lg overflow-hidden")
-      (details
-        (summary
-          (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer select-none")
-          "SX Source")
-        (pre
-          (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
-          (code (~tw :tokens "language-sx") source)))
-      (when
-        python
-        (details
-          (summary
-            (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer border-t border-stone-200")
-            "Python")
-          (pre
-            (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
-            (code (highlight python "python")))))
-      (when
-        javascript
-        (details
-          (summary
-            (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer border-t border-stone-200")
-            "JavaScript")
-          (pre
-            (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
-            (code (highlight javascript "javascript")))))
-      (when
-        z3
-        (details
-          (summary
-            (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer border-t border-stone-200")
-            "Z3 / SMT-LIB")
-          (pre
-            (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
-            (code (highlight z3 "lisp"))))))))
-
-(defcomp
-  ~specs-explorer/spec-ring-bridge
-  (&key refs)
-  (div
-    (~tw :tokens "mt-2")
-    (span (~tw :tokens "text-xs font-medium text-stone-500") "References")
-    (div
-      (~tw :tokens "flex flex-wrap gap-1 mt-1")
-      (map
-        (fn
-          (ref)
-          (a
-            :href (str "#fn-" ref)
-            (~tw :tokens "text-xs px-1.5 py-0.5 rounded bg-stone-100 text-stone-600 font-mono hover:bg-stone-200")
-            ref))
-        refs))))
-
-(defcomp
-  ~specs-explorer/spec-ring-runtime
-  (&key tests test-count)
-  (div
-    (~tw :tokens "mt-2")
-    (div
-      (~tw :tokens "flex items-center gap-1")
-      (span (~tw :tokens "text-xs font-medium text-stone-500") "Tests")
-      (span
-        (~tw :tokens "text-xs px-1.5 py-0.5 rounded bg-violet-100 text-violet-700")
-        (str test-count)))
-    (ul
-      (~tw :tokens "mt-1 text-xs text-stone-500 list-none")
-      (map
-        (fn
-          (t)
-          (li
-            (~tw :tokens "flex items-center gap-1")
-            (span (~tw :tokens "text-green-500 text-xs") "●")
-            (get t "name")))
-        tests))))
-
-(defcomp
-  ~specs-explorer/spec-platform-interface
-  (&key items)
-  (div
-    (~tw :tokens "mt-8")
-    (h2
-      (~tw
-        :tokens "text-lg font-semibold text-stone-700 border-b border-stone-200 pb-1 mb-3")
-      "Platform Interface")
-    (p
-      (~tw :tokens "text-sm text-stone-500 mb-3")
-      "Functions the host platform must provide.")
-    (div
-      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-      (table
-        (~tw :tokens "w-full text-left text-sm")
-        (thead
-          (tr
-            (~tw :tokens "border-b border-stone-200 bg-stone-50")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Name")
-            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Params")
-            (th
-              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
-              "Returns")
-            (th
-              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
-              "Description")))
-        (tbody
-          (map
-            (fn
-              (item)
-              (let-match
-                {:doc doc :params params :returns returns :name name}
-                item
-                (tr
-                  (~tw :tokens "border-b border-stone-100")
-                  (td
-                    (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                    name)
-                  (td
-                    (~tw :tokens "px-3 py-2 font-mono text-xs text-stone-500")
-                    params)
-                  (td
-                    (~tw :tokens "px-3 py-2 font-mono text-xs text-stone-500")
-                    returns)
-                  (td (~tw :tokens "px-3 py-2 text-stone-600") doc))))
-            items))))))
diff --git a/sx/sx/specs-explorer/spec-effect-badge.sx b/sx/sx/specs-explorer/spec-effect-badge.sx
new file mode 100644
index 00000000..542e7ae4
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-effect-badge.sx
@@ -0,0 +1,15 @@
+(defcomp
+  (&key effect)
+  (span
+    :class (str
+      "text-xs px-1.5 py-0.5 rounded "
+      (case
+        effect
+        "mutation"
+        "bg-amber-100 text-amber-700"
+        "io"
+        "bg-orange-100 text-orange-700"
+        "render"
+        "bg-sky-100 text-sky-700"
+        :else "bg-stone-100 text-stone-500"))
+    effect))
diff --git a/sx/sx/specs-explorer/spec-explorer-content.sx b/sx/sx/specs-explorer/spec-explorer-content.sx
new file mode 100644
index 00000000..3906a3f9
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-explorer-content.sx
@@ -0,0 +1,24 @@
+(defcomp
+  (&key data)
+  :affinity :server
+  (let-match
+    {:stats stats :desc desc :title title :filename filename :platform-interface platform-interface :sections sections}
+    data
+    (~docs/page
+      :title (str title " — Explorer")
+      (~specs-explorer/spec-explorer-header
+        :filename filename
+        :title title
+        :desc desc
+        :slug (replace filename ".sx" ""))
+      (~specs-explorer/spec-explorer-stats :stats stats)
+      (map
+        (fn
+          (section)
+          (~specs-explorer/spec-explorer-section
+            :section section
+            :filename filename))
+        sections)
+      (when
+        (not (empty? platform-interface))
+        (~specs-explorer/spec-platform-interface :items platform-interface)))))
diff --git a/sx/sx/specs-explorer/spec-explorer-define-detail.sx b/sx/sx/specs-explorer/spec-explorer-define-detail.sx
new file mode 100644
index 00000000..8c107f2c
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-explorer-define-detail.sx
@@ -0,0 +1,55 @@
+(defcomp
+  (&key d filename)
+  :affinity :server
+  (div
+    (~tw :tokens "max-w-3xl mx-auto")
+    (div
+      (~tw :tokens "mb-4")
+      (a
+        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800")
+        :href (str
+          "/sx/(language.(spec.(explore."
+          (replace filename ".sx" "")
+          ")))")
+        :sx-get (str
+          "/sx/(language.(spec.(explore."
+          (replace filename ".sx" "")
+          ")))")
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "innerHTML"
+        :sx-push-url "true"
+        (str "← Back to " (replace filename ".sx" ""))))
+    (let-match
+      {:kind kind :effects effects :params params :source source :name name}
+      d
+      (div
+        (~tw :tokens "rounded border border-violet-200 bg-violet-50/30 p-4")
+        (div
+          (~tw :tokens "flex items-center gap-2 flex-wrap mb-3")
+          (span
+            (~tw :tokens "font-mono text-lg font-semibold text-stone-800")
+            name)
+          (span (~tw :tokens "text-xs text-stone-400") kind)
+          (if
+            (empty? effects)
+            (span
+              (~tw
+                :tokens "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700")
+              "pure")
+            (map
+              (fn (eff) (~specs-explorer/spec-effect-badge :effect eff))
+              effects)))
+        (when
+          (not (empty? params))
+          (~specs-explorer/spec-param-list :params params))
+        (details
+          :open "true"
+          (summary
+            (~tw
+              :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer select-none mt-3 rounded")
+            "SX Source")
+          (pre
+            (~tw
+              :tokens "text-xs p-3 overflow-x-auto bg-white rounded mt-1 border border-stone-200")
+            (code (~tw :tokens "language-sx") source)))))))
diff --git a/sx/sx/specs-explorer/spec-explorer-define.sx b/sx/sx/specs-explorer/spec-explorer-define.sx
new file mode 100644
index 00000000..81b7d809
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-explorer-define.sx
@@ -0,0 +1,24 @@
+(defcomp
+  (&key d filename)
+  (let-match
+    {:kind kind :name name}
+    d
+    (div
+      (~tw
+        :tokens "flex items-center gap-2 py-1.5 px-2 rounded hover:bg-stone-50 cursor-pointer group")
+      :id (str "fn-" name)
+      :sx-get (str
+        "/sx/(language.(spec.(explore."
+        (replace filename ".sx" "")
+        "."
+        name
+        ")))")
+      :sx-target "#sx-content"
+      :sx-select "#sx-content"
+      :sx-swap "innerHTML"
+      :sx-push-url "true"
+      (span
+        (~tw
+          :tokens "font-mono text-sm font-medium text-stone-800 group-hover:text-violet-700")
+        name)
+      (span (~tw :tokens "text-xs text-stone-400") kind))))
diff --git a/sx/sx/specs-explorer/spec-explorer-header.sx b/sx/sx/specs-explorer/spec-explorer-header.sx
new file mode 100644
index 00000000..e3c3cc6c
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-explorer-header.sx
@@ -0,0 +1,19 @@
+(defcomp
+  (&key filename title desc slug)
+  (div
+    (~tw :tokens "mb-6")
+    (div
+      (~tw :tokens "flex items-center justify-between")
+      (div
+        (h1 (~tw :tokens "text-2xl font-bold text-stone-800") title)
+        (p (~tw :tokens "text-sm text-stone-500 mt-1") desc))
+      (a
+        :href (str "/sx/(language.(spec." slug "))")
+        :sx-get (str "/sx/(language.(spec." slug "))")
+        :sx-target "#sx-content"
+        :sx-select "#sx-content"
+        :sx-swap "outerHTML"
+        :sx-push-url "true"
+        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800 font-medium")
+        "View Source"))
+    (p (~tw :tokens "text-xs text-stone-400 font-mono mt-2") filename)))
diff --git a/sx/sx/specs-explorer/spec-explorer-section.sx b/sx/sx/specs-explorer/spec-explorer-section.sx
new file mode 100644
index 00000000..8a603a37
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-explorer-section.sx
@@ -0,0 +1,20 @@
+(defcomp
+  (&key section filename)
+  (let-match
+    {:defines defines :title title :comment comment}
+    section
+    (div
+      (~tw :tokens "mb-6")
+      (h2
+        (~tw
+          :tokens "text-base font-semibold text-stone-600 mb-2 border-b border-stone-200 pb-1")
+        :id (replace (lower title) " " "-")
+        title)
+      (when comment (p (~tw :tokens "text-sm text-stone-500 mb-2") comment))
+      (div
+        (~tw :tokens "space-y-0.5")
+        (map
+          (fn
+            (d)
+            (~specs-explorer/spec-explorer-define :d d :filename filename))
+          defines)))))
diff --git a/sx/sx/specs-explorer/spec-explorer-stats.sx b/sx/sx/specs-explorer/spec-explorer-stats.sx
new file mode 100644
index 00000000..1596599a
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-explorer-stats.sx
@@ -0,0 +1,39 @@
+(defcomp
+  (&key stats)
+  (let-match
+    {:lines lines :io-count io-count :render-count render-count :pure-count pure-count :mutation-count mutation-count :test-total test-total :total-defines total-defines}
+    stats
+    (div
+      (~tw :tokens "flex flex-wrap gap-2 mb-6 text-xs")
+      (span
+        (~tw
+          :tokens "bg-stone-100 text-stone-600 px-2 py-0.5 rounded font-medium")
+        (str total-defines " defines"))
+      (when
+        (> pure-count 0)
+        (span
+          (~tw :tokens "bg-green-100 text-green-700 px-2 py-0.5 rounded")
+          (str pure-count " pure")))
+      (when
+        (> mutation-count 0)
+        (span
+          (~tw :tokens "bg-amber-100 text-amber-700 px-2 py-0.5 rounded")
+          (str mutation-count " mutation")))
+      (when
+        (> io-count 0)
+        (span
+          (~tw :tokens "bg-orange-100 text-orange-700 px-2 py-0.5 rounded")
+          (str io-count " io")))
+      (when
+        (> render-count 0)
+        (span
+          (~tw :tokens "bg-sky-100 text-sky-700 px-2 py-0.5 rounded")
+          (str render-count " render")))
+      (when
+        (> test-total 0)
+        (span
+          (~tw :tokens "bg-violet-100 text-violet-700 px-2 py-0.5 rounded")
+          (str test-total " tests")))
+      (span
+        (~tw :tokens "bg-stone-100 text-stone-500 px-2 py-0.5 rounded")
+        (str lines " lines")))))
diff --git a/sx/sx/specs-explorer/spec-param-list.sx b/sx/sx/specs-explorer/spec-param-list.sx
new file mode 100644
index 00000000..1ce3f74f
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-param-list.sx
@@ -0,0 +1,24 @@
+(defcomp
+  (&key params)
+  (div
+    (~tw :tokens "mt-1 flex flex-wrap gap-1")
+    (map
+      (fn
+        (p)
+        (let-match
+          {:type typ :name name}
+          p
+          (if
+            (or (= name "&rest") (= name "&key"))
+            (span (~tw :tokens "text-xs font-mono text-violet-500") name)
+            (span
+              (~tw
+                :tokens "text-xs font-mono px-1 py-0.5 rounded bg-stone-50 border border-stone-200")
+              (if
+                typ
+                (<>
+                  (span (~tw :tokens "text-stone-700") name)
+                  (span (~tw :tokens "text-stone-400") " : ")
+                  (span (~tw :tokens "text-violet-600") typ))
+                (span (~tw :tokens "text-stone-700") name))))))
+      params)))
diff --git a/sx/sx/specs-explorer/spec-platform-interface.sx b/sx/sx/specs-explorer/spec-platform-interface.sx
new file mode 100644
index 00000000..d121c057
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-platform-interface.sx
@@ -0,0 +1,46 @@
+(defcomp
+  (&key items)
+  (div
+    (~tw :tokens "mt-8")
+    (h2
+      (~tw
+        :tokens "text-lg font-semibold text-stone-700 border-b border-stone-200 pb-1 mb-3")
+      "Platform Interface")
+    (p
+      (~tw :tokens "text-sm text-stone-500 mb-3")
+      "Functions the host platform must provide.")
+    (div
+      (~tw :tokens "overflow-x-auto rounded border border-stone-200")
+      (table
+        (~tw :tokens "w-full text-left text-sm")
+        (thead
+          (tr
+            (~tw :tokens "border-b border-stone-200 bg-stone-50")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Name")
+            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Params")
+            (th
+              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
+              "Returns")
+            (th
+              (~tw :tokens "px-3 py-2 font-medium text-stone-600")
+              "Description")))
+        (tbody
+          (map
+            (fn
+              (item)
+              (let-match
+                {:doc doc :params params :returns returns :name name}
+                item
+                (tr
+                  (~tw :tokens "border-b border-stone-100")
+                  (td
+                    (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
+                    name)
+                  (td
+                    (~tw :tokens "px-3 py-2 font-mono text-xs text-stone-500")
+                    params)
+                  (td
+                    (~tw :tokens "px-3 py-2 font-mono text-xs text-stone-500")
+                    returns)
+                  (td (~tw :tokens "px-3 py-2 text-stone-600") doc))))
+            items))))))
diff --git a/sx/sx/specs-explorer/spec-ring-bridge.sx b/sx/sx/specs-explorer/spec-ring-bridge.sx
new file mode 100644
index 00000000..a80f53d4
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-ring-bridge.sx
@@ -0,0 +1,15 @@
+(defcomp
+  (&key refs)
+  (div
+    (~tw :tokens "mt-2")
+    (span (~tw :tokens "text-xs font-medium text-stone-500") "References")
+    (div
+      (~tw :tokens "flex flex-wrap gap-1 mt-1")
+      (map
+        (fn
+          (ref)
+          (a
+            :href (str "#fn-" ref)
+            (~tw :tokens "text-xs px-1.5 py-0.5 rounded bg-stone-100 text-stone-600 font-mono hover:bg-stone-200")
+            ref))
+        refs))))
diff --git a/sx/sx/specs-explorer/spec-ring-runtime.sx b/sx/sx/specs-explorer/spec-ring-runtime.sx
new file mode 100644
index 00000000..8f862fc2
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-ring-runtime.sx
@@ -0,0 +1,20 @@
+(defcomp
+  (&key tests test-count)
+  (div
+    (~tw :tokens "mt-2")
+    (div
+      (~tw :tokens "flex items-center gap-1")
+      (span (~tw :tokens "text-xs font-medium text-stone-500") "Tests")
+      (span
+        (~tw :tokens "text-xs px-1.5 py-0.5 rounded bg-violet-100 text-violet-700")
+        (str test-count)))
+    (ul
+      (~tw :tokens "mt-1 text-xs text-stone-500 list-none")
+      (map
+        (fn
+          (t)
+          (li
+            (~tw :tokens "flex items-center gap-1")
+            (span (~tw :tokens "text-green-500 text-xs") "●")
+            (get t "name")))
+        tests))))
diff --git a/sx/sx/specs-explorer/spec-ring-translations.sx b/sx/sx/specs-explorer/spec-ring-translations.sx
new file mode 100644
index 00000000..f8ce7555
--- /dev/null
+++ b/sx/sx/specs-explorer/spec-ring-translations.sx
@@ -0,0 +1,40 @@
+(defcomp
+  (&key source python javascript z3)
+  (when
+    (not (= source ""))
+    (div
+      (~tw :tokens "mt-3 border border-stone-200 rounded-lg overflow-hidden")
+      (details
+        (summary
+          (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer select-none")
+          "SX Source")
+        (pre
+          (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
+          (code (~tw :tokens "language-sx") source)))
+      (when
+        python
+        (details
+          (summary
+            (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer border-t border-stone-200")
+            "Python")
+          (pre
+            (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
+            (code (highlight python "python")))))
+      (when
+        javascript
+        (details
+          (summary
+            (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer border-t border-stone-200")
+            "JavaScript")
+          (pre
+            (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
+            (code (highlight javascript "javascript")))))
+      (when
+        z3
+        (details
+          (summary
+            (~tw :tokens "px-3 py-1.5 bg-stone-50 text-xs font-medium text-stone-600 cursor-pointer border-t border-stone-200")
+            "Z3 / SMT-LIB")
+          (pre
+            (~tw :tokens "text-xs p-3 overflow-x-auto bg-white")
+            (code (highlight z3 "lisp"))))))))
diff --git a/sx/sx/specs.sx b/sx/sx/specs.sx
deleted file mode 100644
index b6463cc8..00000000
--- a/sx/sx/specs.sx
+++ /dev/null
@@ -1,1107 +0,0 @@
-(defcomp
-  ~specs/architecture-content
-  ()
-  (~docs/page
-    :title "Spec Architecture"
-    (div
-      (~tw :tokens "space-y-8")
-      (div
-        (~tw :tokens "space-y-4")
-        (p
-          (~tw :tokens "text-lg text-stone-600")
-          "SX is defined in SX. The canonical specification is a set of s-expression files that are both documentation and executable definition. Bootstrap compilers read these files to generate native implementations in JavaScript, Python, Rust, or any other target.")
-        (p
-          (~tw :tokens "text-stone-600")
-          "The spec is organized into six sections: "
-          (strong "Core")
-          " (the language itself), "
-          (strong "Adapters")
-          " (rendering backends), "
-          (strong "Browser")
-          " (client-side runtime), "
-          (strong "Reactive")
-          " (signal system), "
-          (strong "Host Interface")
-          " (platform contract), and "
-          (strong "Extensions")
-          " (optional add-ons)."))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Core")
-        (p
-          (~tw :tokens "text-stone-600")
-          "The core is platform-independent. It defines how SX source is parsed, how expressions are evaluated, what primitives exist, and what shared rendering definitions all adapters use. These four files are the language.")
-        (div
-          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table
-            (~tw :tokens "w-full text-left text-sm")
-            (thead
-              (tr
-                (~tw :tokens "border-b border-stone-200 bg-stone-100")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
-            (tbody
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.parser))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.parser))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "parser.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Tokenization and parsing of SX source text into AST"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.evaluator))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.evaluator))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "eval.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Tree-walking evaluation of SX expressions"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.primitives))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.primitives))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "primitives.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "All built-in pure functions and their signatures"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.special-forms))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.special-forms))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "special-forms.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "All special forms — syntactic constructs with custom evaluation rules"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.renderer))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.renderer))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "render.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Shared rendering registries and utilities used by all adapters"))))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Adapters")
-        (p
-          (~tw :tokens "text-stone-600")
-          "Adapters are selectable rendering backends. Each one takes the same evaluated expression tree and produces output for a specific environment. You only need the adapters relevant to your target.")
-        (div
-          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table
-            (~tw :tokens "w-full text-left text-sm")
-            (thead
-              (tr
-                (~tw :tokens "border-b border-stone-200 bg-stone-100")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Output")
-                (th
-                  (~tw :tokens "px-3 py-2 font-medium text-stone-600")
-                  "Environment")))
-            (tbody
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.adapter-dom))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.adapter-dom))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "adapter-dom.sx"))
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Live DOM nodes")
-                (td (~tw :tokens "px-3 py-2 text-stone-500") "Browser"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.adapter-html))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.adapter-html))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "adapter-html.sx"))
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "HTML strings")
-                (td (~tw :tokens "px-3 py-2 text-stone-500") "Server"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.adapter-sx))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.adapter-sx))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "adapter-sx.sx"))
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "SX wire format")
-                (td (~tw :tokens "px-3 py-2 text-stone-500") "Server to client"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.adapter-async))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.adapter-async))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "adapter-async.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "HTML/SX with awaited I/O")
-                (td (~tw :tokens "px-3 py-2 text-stone-500") "Server (async)"))))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser Runtime")
-        (p
-          (~tw :tokens "text-stone-600")
-          "The browser runtime handles the full client-side lifecycle: parsing triggers, making HTTP requests, swapping content, managing history, and booting the page. Split into pure logic (engine), browser wiring (orchestration), startup (boot), and URL matching (router).")
-        (div
-          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table
-            (~tw :tokens "w-full text-left text-sm")
-            (thead
-              (tr
-                (~tw :tokens "border-b border-stone-200 bg-stone-100")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
-            (tbody
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.engine))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.engine))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "engine.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Pure logic — trigger parsing, swap algorithms, morph, history, SSE, indicators"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.orchestration))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.orchestration))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "orchestration.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Browser wiring — binds engine to DOM events, fetch, request lifecycle"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.boot))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.boot))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "boot.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Browser startup — mount, hydrate, script processing, head hoisting"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.router))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.router))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "router.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Client-side route matching — Flask-style patterns, param extraction"))))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Reactive")
-        (p
-          (~tw :tokens "text-stone-600")
-          "Fine-grained reactive primitives for client-side islands. Signals notify subscribers on change, computed values derive lazily, effects run side-effects with cleanup, and batch coalesces updates.")
-        (div
-          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table
-            (~tw :tokens "w-full text-left text-sm")
-            (thead
-              (tr
-                (~tw :tokens "border-b border-stone-200 bg-stone-100")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
-            (tbody
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.signals))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.signals))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "signals.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Signal runtime — signal, deref, reset!, swap!, computed, effect, batch, island scope"))))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Host Interface")
-        (p
-          (~tw :tokens "text-stone-600")
-          "The contract between SX and its host environment. Boundary declares what the host must provide. Forms define server-side application constructs. Page helpers offer pure data transformations for rendering.")
-        (div
-          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table
-            (~tw :tokens "w-full text-left text-sm")
-            (thead
-              (tr
-                (~tw :tokens "border-b border-stone-200 bg-stone-100")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
-            (tbody
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.boundary))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.boundary))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "boundary.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Language boundary — I/O primitives, page helpers, tier declarations"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.forms))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.forms))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "forms.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Definition forms — defhandler, defquery, defaction, defpage"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.page-helpers))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.page-helpers))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "page-helpers.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Pure data-transformation helpers for page rendering"))))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Dependency graph")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
-          (pre
-            (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono text-stone-700")
-            ";; Core\nparser.sx           (standalone — no dependencies)\nprimitives.sx       (standalone — declarative registry)\nspecial-forms.sx    (standalone — declarative registry)\neval.sx             depends on: parser, primitives, special-forms\nrender.sx           (standalone — shared registries)\n\n;; Adapters\nadapter-dom.sx      depends on: render, eval\nadapter-html.sx     depends on: render, eval\nadapter-sx.sx       depends on: render, eval\nadapter-async.sx    depends on: adapter-html, adapter-sx, eval\n\n;; Browser Runtime\nengine.sx           depends on: eval, adapter-dom\norchestration.sx    depends on: engine, adapter-dom\nboot.sx             depends on: orchestration, adapter-dom, render\nrouter.sx           (standalone — pure string/list ops)\n\n;; Reactive\nsignals.sx          depends on: eval\n\n;; Host Interface\nboundary.sx         (standalone — declarative contract)\nforms.sx            depends on: eval\npage-helpers.sx     (standalone — declarative registry)\n\n;; Extensions (optional)\ncontinuations.sx    depends on: eval\ncallcc.sx           depends on: eval\ntypes.sx            depends on: eval, primitives\ndeps.sx             depends on: eval")))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Extensions")
-        (p
-          (~tw :tokens "text-stone-600")
-          "Optional bolt-on specifications that extend the core language. Bootstrappers include them only when the target requests them. Code that doesn't use extensions pays zero cost.")
-        (div
-          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table
-            (~tw :tokens "w-full text-left text-sm")
-            (thead
-              (tr
-                (~tw :tokens "border-b border-stone-200 bg-stone-100")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "File")
-                (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Role")))
-            (tbody
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.continuations))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.continuations))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "continuations.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Delimited continuations — shift/reset"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.callcc))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.callcc))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "callcc.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Full first-class continuations — call/cc"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.types))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.types))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "types.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Gradual type system — registration-time checking, zero runtime cost"))
-              (tr
-                (~tw :tokens "border-b border-stone-100")
-                (td
-                  (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                  (a
-                    :href "/sx/(language.(spec.deps))"
-                    (~tw :tokens "hover:underline")
-                    :sx-get "/sx/(language.(spec.deps))"
-                    :sx-target "#sx-content"
-                    :sx-select "#sx-content"
-                    :sx-swap "outerHTML"
-                    :sx-push-url "true"
-                    "deps.sx"))
-                (td
-                  (~tw :tokens "px-3 py-2 text-stone-700")
-                  "Component dependency analysis — bundling, IO detection, CSS scoping"))))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Self-hosting")
-        (p
-          (~tw :tokens "text-stone-600")
-          "Every spec file is written in the same restricted subset of SX that the evaluator itself defines. A bootstrap compiler for a new target only needs to understand this subset — roughly 20 special forms and 80 primitives — to generate a fully native implementation. The spec files are the single source of truth; implementations are derived artifacts.")
-        (p
-          (~tw :tokens "text-stone-600")
-          "This is not a theoretical exercise. The JavaScript implementation ("
-          (code (~tw :tokens "text-violet-700 text-sm") "sx.js")
-          ") and the Python implementation ("
-          (code (~tw :tokens "text-violet-700 text-sm") "shared/sx/")
-          ") are both generated from these spec files via "
-          (code (~tw :tokens "text-violet-700 text-sm") "bootstrap_js.py")
-          " and its Python counterpart.")))))
-
-(defcomp
-  ~specs/overview-content
-  (&key (spec-title :as string) (spec-files :as list))
-  (~docs/page
-    :title (or spec-title "Specs")
-    (p
-      (~tw :tokens "text-stone-600 mb-6")
-      (case
-        spec-title
-        "Core Language"
-        "The core specification defines the language itself — parsing, evaluation, primitives, special forms, and shared rendering definitions. These five files are platform-independent and sufficient to implement SX on any target."
-        "Adapters"
-        "Adapters connect the core language to specific environments. Each adapter takes evaluated expression trees and produces output for its target — DOM nodes, HTML strings, SX wire format, or async-aware server rendering."
-        "Browser Runtime"
-        "The browser runtime handles the client-side lifecycle: parsing triggers, making requests, swapping content, managing history, and booting the page. Split into pure logic (engine), browser wiring (orchestration), startup (boot), and URL matching (router)."
-        "Reactive System"
-        "Fine-grained reactive primitives for client-side islands. Signals, computed values, effects, and batching — the reactive graph that powers L2-L3 interactivity without a virtual DOM."
-        "Host Interface"
-        "The contract between SX and its host environment. Boundary declarations specify what the host must provide, forms define server-side application constructs, and page helpers offer pure data transformations."
-        "Extensions"
-        "Optional bolt-on specifications that extend the core language. Bootstrappers include them only when the target requests them. Code that doesn't use extensions pays zero cost."
-        :else ""))
-    (div
-      (~tw :tokens "space-y-8")
-      (map
-        (fn
-          (spec)
-          (div
-            (~tw :tokens "space-y-3")
-            (div
-              (~tw :tokens "flex items-baseline gap-3")
-              (h2
-                (~tw :tokens "text-2xl font-semibold text-stone-800")
-                (a
-                  :href (get spec "href")
-                  :sx-get (get spec "href")
-                  :sx-target "#sx-content"
-                  :sx-select "#sx-content"
-                  :sx-swap "outerHTML"
-                  :sx-push-url "true"
-                  (~tw :tokens "text-violet-700 hover:text-violet-900 underline")
-                  (get spec "title")))
-              (span
-                (~tw :tokens "text-sm text-stone-400 font-mono")
-                (get spec "filename")))
-            (p (~tw :tokens "text-stone-600") (get spec "desc"))
-            (when
-              (get spec "prose")
-              (p
-                (~tw :tokens "text-sm text-stone-500 leading-relaxed")
-                (get spec "prose")))
-            (div
-              (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-72 overflow-y-auto")
-              (pre
-                (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-                (code (highlight (get spec "source") "sx"))))))
-        spec-files))))
-
-(defcomp
-  ~specs/detail-content
-  (&key
-    (spec-title :as string)
-    (spec-desc :as string)
-    (spec-filename :as string)
-    (spec-source :as string)
-    (spec-prose :as string?))
-  (~docs/page
-    :title spec-title
-    (div
-      (~tw :tokens "flex items-center gap-3 mb-4")
-      (span (~tw :tokens "text-sm text-stone-400 font-mono") spec-filename)
-      (span (~tw :tokens "text-sm text-stone-500 flex-1") spec-desc)
-      (a
-        :href (str
-          "/sx/(language.(spec.(explore."
-          (replace spec-filename ".sx" "")
-          ")))")
-        :sx-get (str
-          "/sx/(language.(spec.(explore."
-          (replace spec-filename ".sx" "")
-          ")))")
-        :sx-target "#sx-content"
-        :sx-select "#sx-content"
-        :sx-swap "outerHTML"
-        :sx-push-url "true"
-        (~tw :tokens "text-sm text-violet-600 hover:text-violet-800 font-medium whitespace-nowrap")
-        "Explore"))
-    (when
-      spec-prose
-      (div
-        (~tw :tokens "mb-6 space-y-3")
-        (p (~tw :tokens "text-stone-600 leading-relaxed") spec-prose)
-        (p
-          (~tw :tokens "text-xs text-stone-400 italic")
-          "The s-expression source below is the canonical specification. "
-          "The English description above is a summary.")))
-    (div
-      (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
-      (pre
-        (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
-        (code (highlight spec-source "sx"))))))
-
-(defcomp
-  ~specs/bootstrappers-index-content
-  ()
-  (~docs/page
-    :title "Bootstrappers"
-    (div
-      (~tw :tokens "space-y-6")
-      (p
-        (~tw :tokens "text-lg text-stone-600")
-        "A bootstrapper reads the canonical "
-        (code (~tw :tokens "text-violet-700 text-sm") ".sx")
-        " specification files and emits a native implementation for a specific target. "
-        "The spec files are the single source of truth — bootstrappers are the bridge from specification to runnable code.")
-      (p
-        (~tw :tokens "text-stone-600")
-        "Each bootstrapper is a compiler that understands the restricted SX subset used in the spec files "
-        "(roughly 20 special forms and 80 primitives) and translates it into idiomatic target code. "
-        "Platform-specific operations (DOM access, HTTP, timers) are emitted as native implementations "
-        "rather than translated from SX.")
-      (div
-        (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-        (table
-          (~tw :tokens "w-full text-left text-sm")
-          (thead
-            (tr
-              (~tw :tokens "border-b border-stone-200 bg-stone-100")
-              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Target")
-              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Bootstrapper")
-              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Output")
-              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Status")))
-          (tbody
-            (tr
-              (~tw :tokens "border-b border-stone-100")
-              (td (~tw :tokens "px-3 py-2 text-stone-700") "JavaScript")
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                (a
-                  :href "/sx/(language.(bootstrapper.javascript))"
-                  (~tw :tokens "hover:underline")
-                  "bootstrap_js.py"))
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500")
-                "sx-browser.js")
-              (td (~tw :tokens "px-3 py-2 text-green-600") "Live"))
-            (tr
-              (~tw :tokens "border-b border-stone-100")
-              (td (~tw :tokens "px-3 py-2 text-stone-700") "Python")
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                (a
-                  :href "/sx/(language.(bootstrapper.python))"
-                  (~tw :tokens "hover:underline")
-                  "bootstrap_py.py"))
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500")
-                "sx_ref.py")
-              (td (~tw :tokens "px-3 py-2 text-green-600") "Live"))
-            (tr
-              (~tw :tokens "border-b border-stone-100 bg-green-50")
-              (td (~tw :tokens "px-3 py-2 text-stone-700") "Python (self-hosting)")
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700")
-                (a
-                  :href "/sx/(language.(bootstrapper.self-hosting))"
-                  (~tw :tokens "hover:underline")
-                  "py.sx"))
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-500")
-                "sx_ref.py")
-              (td (~tw :tokens "px-3 py-2 text-green-600") "G0 == G1"))
-            (tr
-              (~tw :tokens "border-b border-stone-100")
-              (td (~tw :tokens "px-3 py-2 text-stone-700") "Rust")
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-400")
-                "bootstrap_rs.py")
-              (td
-                (~tw :tokens "px-3 py-2 font-mono text-sm text-stone-400")
-                "sx-native")
-              (td (~tw :tokens "px-3 py-2 text-stone-400") "Planned"))))))))
-
-(defcomp
-  ~specs/bootstrapper-js-content
-  (&key bootstrapper-source bootstrapped-output)
-  (~docs/page
-    :title "JavaScript Bootstrapper"
-    (div
-      (~tw :tokens "space-y-8")
-      (div
-        (~tw :tokens "space-y-3")
-        (p
-          (~tw :tokens "text-stone-600")
-          "This page reads the canonical "
-          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
-          " spec files, runs the Python bootstrapper, and displays both the compiler source and its generated JavaScript output. "
-          "The generated code below is live — it was produced by the bootstrapper at page load time, not served from a static file.")
-        (p
-          (~tw :tokens "text-xs text-stone-400 italic")
-          "The sx-browser.js powering this page IS the bootstrapped output. "
-          "This page re-runs the bootstrapper to display the source and result."))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Bootstrapper")
-          (span (~tw :tokens "text-sm text-stone-400 font-mono") "bootstrap_js.py"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "The compiler reads "
-          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
-          " spec files (parser, eval, primitives, render, adapters, engine, orchestration, boot, cssx) "
-          "and emits a standalone JavaScript file. Platform bridge functions (DOM operations, fetch, timers) "
-          "are emitted as native JS implementations.")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight bootstrapper-source "python")))))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2
-            (~tw :tokens "text-2xl font-semibold text-stone-800")
-            "Generated Output")
-          (span (~tw :tokens "text-sm text-stone-400 font-mono") "sx-browser.js"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "The JavaScript below was generated by running the bootstrapper against the current spec files. "
-          "It is a complete, self-contained SX runtime — parser, evaluator, DOM adapter, engine, and CSS system.")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-violet-300")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight bootstrapped-output "javascript"))))))))
-
-(defcomp
-  ~specs/bootstrapper-self-hosting-content
-  (&key
-    (py-sx-source :as string)
-    (g0-output :as string)
-    (g1-output :as string)
-    (defines-matched :as number)
-    (defines-total :as number)
-    (g0-lines :as number)
-    (g0-bytes :as number)
-    (verification-status :as string))
-  (~docs/page
-    :title "Self-Hosting Bootstrapper (py.sx)"
-    (div
-      (~tw :tokens "space-y-8")
-      (div
-        (~tw :tokens "space-y-3")
-        (p
-          (~tw :tokens "text-stone-600")
-          (code (~tw :tokens "text-violet-700 text-sm") "py.sx")
-          " is an SX-to-Python translator written in SX. "
-          "This page runs it live: loads py.sx into the evaluator, translates each spec file, "
-          "and diffs the result against "
-          (code (~tw :tokens "text-violet-700 text-sm") "bootstrap_py.py")
-          ".")
-        (div
-          (~tw :tokens "rounded-lg p-4")
-          :class (if
-            (= verification-status "identical")
-            "bg-green-50 border border-green-200"
-            "bg-red-50 border border-red-200")
-          (div
-            (~tw :tokens "flex items-center gap-3")
-            (span
-              (~tw :tokens "inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold")
-              :class (if
-                (= verification-status "identical")
-                "bg-green-100 text-green-800"
-                "bg-red-100 text-red-800")
-              (if (= verification-status "identical") "G0 == G1" "MISMATCH"))
-            (p
-              (~tw :tokens "text-sm")
-              :class (if
-                (= verification-status "identical")
-                "text-green-700"
-                "text-red-700")
-              defines-matched
-              "/"
-              defines-total
-              " defines match. "
-              g0-lines
-              " lines, "
-              g0-bytes
-              " bytes."))))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "py.sx Source")
-          (span
-            (~tw :tokens "text-sm text-stone-400 font-mono")
-            "shared/sx/ref/py.sx"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "The SX-to-Python translator — 55 "
-          (code "define")
-          " forms. "
-          "Name mangling (200+ RENAMES), expression emission, statement emission, "
-          "cell variable detection for "
-          (code "set!")
-          " across lambda boundaries.")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight py-sx-source "lisp")))))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "G0 Output")
-          (span
-            (~tw :tokens "text-sm text-stone-400 font-mono")
-            "bootstrap_py.py → sx_ref.py"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "Generated by the hand-written Python bootstrapper.")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight g0-output "python")))))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "G1 Output")
-          (span
-            (~tw :tokens "text-sm text-stone-400 font-mono")
-            "py.sx → sx_ref.py"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "Generated by py.sx running on the Python evaluator. "
-          (if
-            (= verification-status "identical")
-            (strong "Byte-for-byte identical to G0.")
-            "Differs from G0 — see mismatch details."))
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border")
-          :class (if
-            (= verification-status "identical")
-            "border-green-200"
-            "border-red-200")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight g1-output "python"))))))))
-
-(defcomp
-  ~specs/bootstrapper-self-hosting-js-content
-  (&key
-    js-sx-source
-    defines-matched
-    defines-total
-    js-sx-lines
-    verification-status)
-  (~docs/page
-    :title "Self-Hosting Bootstrapper (js.sx)"
-    (div
-      (~tw :tokens "space-y-8")
-      (div
-        (~tw :tokens "space-y-3")
-        (p
-          (~tw :tokens "text-stone-600")
-          (code (~tw :tokens "text-violet-700 text-sm") "js.sx")
-          " is an SX-to-JavaScript translator written in SX. "
-          "This page runs it live: loads js.sx into the evaluator, translates every spec file, "
-          "and verifies each define matches "
-          (code (~tw :tokens "text-violet-700 text-sm") "bootstrap_js.py")
-          "'s JSEmitter.")
-        (div
-          (~tw :tokens "rounded-lg p-4")
-          :class (if
-            (= verification-status "identical")
-            "bg-green-50 border border-green-200"
-            "bg-red-50 border border-red-200")
-          (div
-            (~tw :tokens "flex items-center gap-3")
-            (span
-              (~tw :tokens "inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold")
-              :class (if
-                (= verification-status "identical")
-                "bg-green-100 text-green-800"
-                "bg-red-100 text-red-800")
-              (if (= verification-status "identical") "G0 == G1" "MISMATCH"))
-            (p
-              (~tw :tokens "text-sm")
-              :class (if
-                (= verification-status "identical")
-                "text-green-700"
-                "text-red-700")
-              defines-matched
-              "/"
-              defines-total
-              " defines match across all spec files. "
-              js-sx-lines
-              " lines of SX."))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "G0 Bug Discovery")
-        (div
-          (~tw :tokens "rounded-lg bg-amber-50 border border-amber-200 p-4")
-          (div
-            (~tw :tokens "flex items-start gap-3")
-            (span
-              (~tw :tokens "inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-sm font-semibold text-amber-800")
-              "Fixed")
-            (div
-              (~tw :tokens "text-sm text-amber-700 space-y-2")
-              (p
-                "Building js.sx revealed a bug in "
-                (code "bootstrap_js.py")
-                "'s "
-                (code "_emit_define")
-                " method. The Python code:")
-              (pre
-                (~tw :tokens "bg-amber-100 rounded p-2 text-xs font-mono")
-                "val = self.emit(fn_expr) if fn_expr else \"NIL\"")
-              (p
-                "Python's "
-                (code "if fn_expr")
-                " treats "
-                (code "0")
-                ", "
-                (code "False")
-                ", and "
-                (code "\"\"")
-                " as falsy. So "
-                (code "(define *batch-depth* 0)")
-                " emitted "
-                (code "var _batchDepth = NIL")
-                " instead of "
-                (code "var _batchDepth = 0")
-                ". Similarly, "
-                (code "(define _css-hash \"\")")
-                " emitted "
-                (code "var _cssHash = NIL")
-                " instead of "
-                (code "var _cssHash = \"\"")
-                ".")
-              (p
-                "Fix: "
-                (code "if fn_expr is not None")
-                " — explicit None check. "
-                "js.sx never had this bug because SX's "
-                (code "nil?")
-                " only matches "
-                (code "nil")
-                ", not "
-                (code "0")
-                " or "
-                (code "false")
-                ". "
-                "The self-hosting bootstrapper caught a host language bug.")))))
-      (div
-        (~tw :tokens "space-y-3")
-        (h2
-          (~tw :tokens "text-2xl font-semibold text-stone-800")
-          "Translation Differences from py.sx")
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "Both py.sx and js.sx translate the same SX ASTs, but target languages differ:")
-        (div
-          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table
-            (~tw :tokens "w-full text-sm")
-            (thead
-              (~tw :tokens "bg-stone-50")
-              (tr
-                (th
-                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
-                  "Feature")
-                (th
-                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
-                  "py.sx → Python")
-                (th
-                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
-                  "js.sx → JavaScript")))
-            (tbody
-              (tr
-                (~tw :tokens "border-t border-stone-100")
-                (td (~tw :tokens "px-4 py-2 text-stone-600") "Name mangling")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "eval-expr → eval_expr")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "eval-expr → evalExpr"))
-              (tr
-                (~tw :tokens "border-t border-stone-100")
-                (td (~tw :tokens "px-4 py-2 text-stone-600") "Declarations")
-                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "name = value")
-                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "var name = value;"))
-              (tr
-                (~tw :tokens "border-t border-stone-100")
-                (td (~tw :tokens "px-4 py-2 text-stone-600") "Functions")
-                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "lambda x: body")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "function(x) { return body; }"))
-              (tr
-                (~tw :tokens "border-t border-stone-100")
-                (td (~tw :tokens "px-4 py-2 text-stone-600") "set! (mutation)")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "_cells dict (closure hack)")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "Direct assignment (JS captures by ref)"))
-              (tr
-                (~tw :tokens "border-t border-stone-100")
-                (td (~tw :tokens "px-4 py-2 text-stone-600") "Tail recursion")
-                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "—")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "while(true) { continue; }"))
-              (tr
-                (~tw :tokens "border-t border-stone-100")
-                (td (~tw :tokens "px-4 py-2 text-stone-600") "let binding")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "(lambda x: body)(val)")
-                (td
-                  (~tw :tokens "px-4 py-2 font-mono text-xs")
-                  "(function() { var x = val; return body; })()"))
-              (tr
-                (~tw :tokens "border-t border-stone-100")
-                (td (~tw :tokens "px-4 py-2 text-stone-600") "and/or")
-                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "ternary chains")
-                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "&& / sxOr()"))))))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "js.sx Source")
-          (span
-            (~tw :tokens "text-sm text-stone-400 font-mono")
-            "shared/sx/ref/js.sx"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "The SX-to-JavaScript translator — 61 "
-          (code "define")
-          " forms. "
-          "camelCase mangling (500+ RENAMES), expression/statement emission, "
-          "self-tail-recursive while loop optimization.")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight js-sx-source "lisp"))))))))
-
-(defcomp
-  ~specs/bootstrapper-py-content
-  (&key bootstrapper-source bootstrapped-output)
-  (~docs/page
-    :title "Python Bootstrapper"
-    (div
-      (~tw :tokens "space-y-8")
-      (div
-        (~tw :tokens "space-y-3")
-        (p
-          (~tw :tokens "text-stone-600")
-          "This page reads the canonical "
-          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
-          " spec files, runs the Python bootstrapper, and displays both the compiler source and its generated Python output. "
-          "The generated code below is live — it was produced by the bootstrapper at page load time.")
-        (p
-          (~tw :tokens "text-xs text-stone-400 italic")
-          "With SX_USE_REF=1, the server-side SX evaluator running this page IS the bootstrapped output. "
-          "This page re-runs the bootstrapper to display the source and result."))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Bootstrapper")
-          (span (~tw :tokens "text-sm text-stone-400 font-mono") "bootstrap_py.py"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "The compiler reads "
-          (code (~tw :tokens "text-violet-700 text-sm") ".sx")
-          " spec files (eval, primitives, render, adapter-html) "
-          "and emits a standalone Python module. Platform bridge functions (type constructors, environment ops) "
-          "are emitted as native Python implementations.")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight bootstrapper-source "python")))))
-      (div
-        (~tw :tokens "space-y-3")
-        (div
-          (~tw :tokens "flex items-baseline gap-3")
-          (h2
-            (~tw :tokens "text-2xl font-semibold text-stone-800")
-            "Generated Output")
-          (span (~tw :tokens "text-sm text-stone-400 font-mono") "sx_ref.py"))
-        (p
-          (~tw :tokens "text-sm text-stone-500")
-          "The Python below was generated by running the bootstrapper against the current spec files. "
-          "It is a complete server-side SX evaluator — eval, primitives, and HTML renderer.")
-        (div
-          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-violet-300")
-          (pre
-            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight bootstrapped-output "python"))))))))
-
-(defcomp
-  ~specs/not-found
-  (&key (slug :as string))
-  (~docs/page
-    :title "Spec Not Found"
-    (p
-      (~tw :tokens "text-stone-600")
-      "No specification found for \""
-      slug
-      "\". This spec may not exist yet.")))
diff --git a/sx/sx/stepper-lib.sx b/sx/sx/stepper-lib/build-code-tokens.sx
similarity index 55%
rename from sx/sx/stepper-lib.sx
rename to sx/sx/stepper-lib/build-code-tokens.sx
index 06bec17c..9a64837f 100644
--- a/sx/sx/stepper-lib.sx
+++ b/sx/sx/stepper-lib/build-code-tokens.sx
@@ -1,45 +1,4 @@
-(define
-  split-tag
-  (fn
-    (expr result)
-    (cond
-      (not (list? expr))
-      (append! result {:expr expr :type "leaf"})
-      (empty? expr)
-      nil
-      (not (= (type-of (first expr)) "symbol"))
-      (append! result {:expr expr :type "leaf"})
-      (is-html-tag? (symbol-name (first expr)))
-      (let
-        ((ctag (symbol-name (first expr)))
-          (cargs (rest expr))
-          (cch (list))
-          (cat (list))
-          (spreads (list))
-          (ckw false))
-        (for-each
-          (fn
-            (a)
-            (cond
-              (= (type-of a) "keyword")
-              (do (set! ckw true) (append! cat a))
-              ckw
-              (do (set! ckw false) (append! cat a))
-              (and
-                (list? a)
-                (not (empty? a))
-                (= (type-of (first a)) "symbol")
-                (starts-with? (symbol-name (first a)) "~"))
-              (do (set! ckw false) (append! spreads a))
-              :else (do (set! ckw false) (append! cch a))))
-          cargs)
-        (append! result {:spreads spreads :tag ctag :type "open" :attrs cat})
-        (for-each (fn (c) (split-tag c result)) cch)
-        (append! result {:open-attrs cat :open-spreads spreads :tag ctag :type "close"}))
-      :else (append! result {:expr expr :type "expr"}))))
-
-(define
-  build-code-tokens
+(define build-code-tokens
   (fn
     (expr tokens step-ref indent)
     (cond
@@ -110,23 +69,3 @@
           (append! tokens {:cls "text-stone-400" :step open-step :text ")"})
           (when is-tag (dict-set! step-ref "v" (+ (get step-ref "v") 1)))))
       :else nil)))
-
-(define
-  steps-to-preview
-  (fn
-    (all-steps target)
-    (if
-      (or (empty? all-steps) (<= target 0))
-      nil
-      (let
-        ((pos (dict "i" 0)) (max-i (min target (len all-steps))))
-        (letrec
-          ((bc-loop (fn (children) (if (>= (get pos "i") max-i) children (let ((step (nth all-steps (get pos "i"))) (stype (get step "type"))) (cond (= stype "open") (do (dict-set! pos "i" (+ (get pos "i") 1)) (let ((tag (get step "tag")) (attrs (or (get step "attrs") (list))) (spreads (or (get step "spreads") (list))) (inner (bc-loop (list)))) (append! children (concat (list (make-symbol tag)) spreads attrs inner))) (bc-loop children)) (= stype "close") (do (dict-set! pos "i" (+ (get pos "i") 1)) children) (= stype "leaf") (do (dict-set! pos "i" (+ (get pos "i") 1)) (append! children (get step "expr")) (bc-loop children)) (= stype "expr") (do (dict-set! pos "i" (+ (get pos "i") 1)) (append! children (get step "expr")) (bc-loop children)) :else (do (dict-set! pos "i" (+ (get pos "i") 1)) (bc-loop children))))))))
-          (let
-            ((root (bc-loop (list))))
-            (cond
-              (= (len root) 1)
-              (first root)
-              (empty? root)
-              nil
-              :else (concat (list (make-symbol "<>")) root))))))))
diff --git a/sx/sx/stepper-lib/split-tag.sx b/sx/sx/stepper-lib/split-tag.sx
new file mode 100644
index 00000000..2729a269
--- /dev/null
+++ b/sx/sx/stepper-lib/split-tag.sx
@@ -0,0 +1,38 @@
+(define split-tag
+  (fn
+    (expr result)
+    (cond
+      (not (list? expr))
+      (append! result {:expr expr :type "leaf"})
+      (empty? expr)
+      nil
+      (not (= (type-of (first expr)) "symbol"))
+      (append! result {:expr expr :type "leaf"})
+      (is-html-tag? (symbol-name (first expr)))
+      (let
+        ((ctag (symbol-name (first expr)))
+          (cargs (rest expr))
+          (cch (list))
+          (cat (list))
+          (spreads (list))
+          (ckw false))
+        (for-each
+          (fn
+            (a)
+            (cond
+              (= (type-of a) "keyword")
+              (do (set! ckw true) (append! cat a))
+              ckw
+              (do (set! ckw false) (append! cat a))
+              (and
+                (list? a)
+                (not (empty? a))
+                (= (type-of (first a)) "symbol")
+                (starts-with? (symbol-name (first a)) "~"))
+              (do (set! ckw false) (append! spreads a))
+              :else (do (set! ckw false) (append! cch a))))
+          cargs)
+        (append! result {:spreads spreads :tag ctag :type "open" :attrs cat})
+        (for-each (fn (c) (split-tag c result)) cch)
+        (append! result {:open-attrs cat :open-spreads spreads :tag ctag :type "close"}))
+      :else (append! result {:expr expr :type "expr"}))))
diff --git a/sx/sx/stepper-lib/steps-to-preview.sx b/sx/sx/stepper-lib/steps-to-preview.sx
new file mode 100644
index 00000000..e441a482
--- /dev/null
+++ b/sx/sx/stepper-lib/steps-to-preview.sx
@@ -0,0 +1,18 @@
+(define steps-to-preview
+  (fn
+    (all-steps target)
+    (if
+      (or (empty? all-steps) (<= target 0))
+      nil
+      (let
+        ((pos (dict "i" 0)) (max-i (min target (len all-steps))))
+        (letrec
+          ((bc-loop (fn (children) (if (>= (get pos "i") max-i) children (let ((step (nth all-steps (get pos "i"))) (stype (get step "type"))) (cond (= stype "open") (do (dict-set! pos "i" (+ (get pos "i") 1)) (let ((tag (get step "tag")) (attrs (or (get step "attrs") (list))) (spreads (or (get step "spreads") (list))) (inner (bc-loop (list)))) (append! children (concat (list (make-symbol tag)) spreads attrs inner))) (bc-loop children)) (= stype "close") (do (dict-set! pos "i" (+ (get pos "i") 1)) children) (= stype "leaf") (do (dict-set! pos "i" (+ (get pos "i") 1)) (append! children (get step "expr")) (bc-loop children)) (= stype "expr") (do (dict-set! pos "i" (+ (get pos "i") 1)) (append! children (get step "expr")) (bc-loop children)) :else (do (dict-set! pos "i" (+ (get pos "i") 1)) (bc-loop children))))))))
+          (let
+            ((root (bc-loop (list))))
+            (cond
+              (= (len root) 1)
+              (first root)
+              (empty? root)
+              nil
+              :else (concat (list (make-symbol "<>")) root))))))))
diff --git a/sx/sx/streaming-demo.sx b/sx/sx/streaming-demo.sx
deleted file mode 100644
index 4646ad22..00000000
--- a/sx/sx/streaming-demo.sx
+++ /dev/null
@@ -1,179 +0,0 @@
-;; Streaming & Suspense demo — Phase 6
-;;
-;; This page uses :stream true to enable chunked transfer encoding.
-;; The browser receives the HTML shell immediately with loading skeletons,
-;; then content fills in as each IO resolves at staggered intervals.
-;;
-;; The :data expression is an async generator that yields three chunks
-;; at 1s, 3s, and 5s. Each chunk resolves a different ~shared:pages/suspense slot.
-
-;; Color map for stream chunk styling (all string keys for get compatibility)
-(define
-  stream-colors
-  (dict
-    "emerald"
-    (dict
-      "border"
-      "border-emerald-200"
-      "bg"
-      "bg-emerald-50"
-      "dot"
-      "bg-emerald-400"
-      "title"
-      "text-emerald-900"
-      "text"
-      "text-emerald-800"
-      "sub"
-      "text-emerald-700"
-      "code"
-      "bg-emerald-100")
-    "amber"
-    (dict
-      "border"
-      "border-amber-200"
-      "bg"
-      "bg-amber-50"
-      "dot"
-      "bg-amber-400"
-      "title"
-      "text-amber-900"
-      "text"
-      "text-amber-800"
-      "sub"
-      "text-amber-700"
-      "code"
-      "bg-amber-100")
-    "violet"
-    (dict
-      "border"
-      "border-violet-200"
-      "bg"
-      "bg-violet-50"
-      "dot"
-      "bg-violet-400"
-      "title"
-      "text-violet-900"
-      "text"
-      "text-violet-800"
-      "sub"
-      "text-violet-700"
-      "code"
-      "bg-violet-100")))
-
-;; Generic streamed content chunk — rendered once per yield from the
-;; async generator.  The :content expression receives different bindings
-;; each time, and the _stream_id determines which ~shared:pages/suspense slot it fills.
-(defcomp ~streaming-demo/chunk (&key (stream-label :as string) (stream-color :as string) (stream-message :as string) (stream-time :as string))
-  (let ((colors (get stream-colors stream-color)))
-    (div :class (str "rounded-lg border p-5 space-y-3 " (get colors "border") " " (get colors "bg"))
-      (div (~tw :tokens "flex items-center gap-2")
-        (div :class (str "w-3 h-3 rounded-full " (get colors "dot")))
-        (h2 :class (str "text-lg font-semibold " (get colors "title")) stream-label))
-      (p :class (get colors "text") stream-message)
-      (p :class (str "text-sm " (get colors "sub"))
-        "Resolved at: " (code :class (str "px-1 rounded " (get colors "code")) stream-time)))))
-
-;; Skeleton placeholder for a stream slot
-(defcomp ~streaming-demo/stream-skeleton ()
-  (div (~tw :tokens "rounded-lg border border-stone-200 bg-stone-50 p-5 space-y-3 animate-pulse")
-    (div (~tw :tokens "flex items-center gap-2")
-      (div (~tw :tokens "w-3 h-3 rounded-full bg-stone-300"))
-      (div (~tw :tokens "h-6 bg-stone-200 rounded w-1/3")))
-    (div (~tw :tokens "h-4 bg-stone-200 rounded w-2/3"))
-    (div (~tw :tokens "h-4 bg-stone-200 rounded w-1/2"))))
-
-;; Static layout — takes &rest children where the three suspense slots go.
-(defcomp ~streaming-demo/layout (&rest children)
-  (div (~tw :tokens "space-y-8")
-    (div (~tw :tokens "border-b border-stone-200 pb-6")
-      (h1 (~tw :tokens "text-2xl font-bold text-stone-900") "Streaming & Suspense Demo")
-      (p (~tw :tokens "mt-2 text-stone-600")
-        "This page uses " (code (~tw :tokens "bg-stone-100 px-1 rounded text-violet-700") ":stream true")
-        " in its defpage declaration. The browser receives the page skeleton instantly, "
-        "then three IO sources resolve at staggered intervals (1s, 3s, 5s)."))
-
-    ;; Slot: suspense placeholders (or resolved content)
-    (div (~tw :tokens "grid gap-4") children)
-
-    ;; Flow diagram
-    (div (~tw :tokens "space-y-4")
-      (h2 (~tw :tokens "text-lg font-semibold text-stone-800") "Streaming Flow")
-      (div (~tw :tokens "grid gap-3")
-        (map (fn (item)
-          (div (~tw :tokens "flex items-start gap-3 rounded-lg border border-stone-200 bg-white p-4")
-            (div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 flex items-center justify-center text-violet-700 font-bold text-sm")
-              (get item "label"))
-            (p (~tw :tokens "text-stone-700 text-sm pt-1") (get item "detail"))))
-          (list
-            {:label "Shell" :detail "HTML shell with three suspense placeholders sent immediately"}
-            {:label "Boot" :detail "sx-browser.js loads, renders fallback skeletons"}
-            {:label "1s" :detail "Fast API responds — first skeleton replaced with green box"}
-            {:label "3s" :detail "Database query completes — second skeleton replaced with blue box"}
-            {:label "5s" :detail "ML inference finishes — third skeleton replaced with amber box"}))))
-
-    ;; How it works
-    (div (~tw :tokens "rounded-lg border border-violet-200 bg-violet-50 p-5 space-y-3")
-      (h2 (~tw :tokens "text-lg font-semibold text-violet-900") "How Multi-Stream Works")
-      (ol (~tw :tokens "list-decimal list-inside text-violet-800 space-y-2 text-sm")
-        (li "Server evaluates " (code ":data") " — gets an " (em "async generator"))
-        (li "HTML shell with three " (code "~shared:pages/suspense") " placeholders sent immediately")
-        (li "Generator yields first chunk after 1s — server sends " (code "__sxResolve(\"stream-fast\", ...)"))
-        (li "Generator yields second chunk after 3s — " (code "__sxResolve(\"stream-medium\", ...)"))
-        (li "Generator yields third chunk after 5s — " (code "__sxResolve(\"stream-slow\", ...)"))
-        (li "Each resolve replaces its skeleton independently")))
-
-    ;; Technical details
-    (div (~tw :tokens "rounded-lg border border-stone-200 bg-stone-50 p-4 text-sm space-y-2")
-      (p (~tw :tokens "font-semibold text-stone-800") "Implementation details")
-      (ul (~tw :tokens "list-disc list-inside text-stone-600 space-y-1")
-        (li (code "defpage :stream true") " — opts the page into chunked transfer encoding")
-        (li (code ":data") " helper is an async generator — each " (code "yield") " resolves a different suspense slot")
-        (li "Each yield includes " (code "_stream_id") " matching a " (code "~shared:pages/suspense :id") " in the shell")
-        (li (code ":content") " expression is re-evaluated with each yield's bindings")
-        (li "Headers stream concurrently — independent of the data generator")
-        (li "Future: SSE/WebSocket for re-resolving slots after initial page load")))))
-
-(define
-  streaming-demo-data
-  (fn
-    ()
-    (list
-      (dict
-        "stream-id"
-        "stream-fast"
-        "delay"
-        1000
-        "stream_label"
-        "Fast source"
-        "stream_color"
-        "emerald"
-        "stream_message"
-        "Resolved in ~1s (async IO)"
-        "stream_time"
-        "~1s")
-      (dict
-        "stream-id"
-        "stream-medium"
-        "delay"
-        3000
-        "stream_label"
-        "Medium source"
-        "stream_color"
-        "amber"
-        "stream_message"
-        "Resolved in ~3s (async IO)"
-        "stream_time"
-        "~3s")
-      (dict
-        "stream-id"
-        "stream-slow"
-        "delay"
-        5000
-        "stream_label"
-        "Slow source"
-        "stream_color"
-        "violet"
-        "stream_message"
-        "Resolved in ~5s (async IO)"
-        "stream_time"
-        "~5s"))))
diff --git a/sx/sx/streaming-demo/chunk.sx b/sx/sx/streaming-demo/chunk.sx
new file mode 100644
index 00000000..de4ea0e3
--- /dev/null
+++ b/sx/sx/streaming-demo/chunk.sx
@@ -0,0 +1,12 @@
+;; Generic streamed content chunk — rendered once per yield from the
+;; async generator.  The :content expression receives different bindings
+;; each time, and the _stream_id determines which ~shared:pages/suspense slot it fills.
+(defcomp (&key (stream-label :as string) (stream-color :as string) (stream-message :as string) (stream-time :as string))
+  (let ((colors (get stream-colors stream-color)))
+    (div :class (str "rounded-lg border p-5 space-y-3 " (get colors "border") " " (get colors "bg"))
+      (div (~tw :tokens "flex items-center gap-2")
+        (div :class (str "w-3 h-3 rounded-full " (get colors "dot")))
+        (h2 :class (str "text-lg font-semibold " (get colors "title")) stream-label))
+      (p :class (get colors "text") stream-message)
+      (p :class (str "text-sm " (get colors "sub"))
+        "Resolved at: " (code :class (str "px-1 rounded " (get colors "code")) stream-time)))))
diff --git a/sx/sx/streaming-demo/data.sx b/sx/sx/streaming-demo/data.sx
new file mode 100644
index 00000000..65ad8a3e
--- /dev/null
+++ b/sx/sx/streaming-demo/data.sx
@@ -0,0 +1,43 @@
+(define streaming-demo-data
+  (fn
+    ()
+    (list
+      (dict
+        "stream-id"
+        "stream-fast"
+        "delay"
+        1000
+        "stream_label"
+        "Fast source"
+        "stream_color"
+        "emerald"
+        "stream_message"
+        "Resolved in ~1s (async IO)"
+        "stream_time"
+        "~1s")
+      (dict
+        "stream-id"
+        "stream-medium"
+        "delay"
+        3000
+        "stream_label"
+        "Medium source"
+        "stream_color"
+        "amber"
+        "stream_message"
+        "Resolved in ~3s (async IO)"
+        "stream_time"
+        "~3s")
+      (dict
+        "stream-id"
+        "stream-slow"
+        "delay"
+        5000
+        "stream_label"
+        "Slow source"
+        "stream_color"
+        "violet"
+        "stream_message"
+        "Resolved in ~5s (async IO)"
+        "stream_time"
+        "~5s"))))
diff --git a/sx/sx/streaming-demo/layout.sx b/sx/sx/streaming-demo/layout.sx
new file mode 100644
index 00000000..2a6d3157
--- /dev/null
+++ b/sx/sx/streaming-demo/layout.sx
@@ -0,0 +1,50 @@
+;; Static layout — takes &rest children where the three suspense slots go.
+(defcomp (&rest children)
+  (div (~tw :tokens "space-y-8")
+    (div (~tw :tokens "border-b border-stone-200 pb-6")
+      (h1 (~tw :tokens "text-2xl font-bold text-stone-900") "Streaming & Suspense Demo")
+      (p (~tw :tokens "mt-2 text-stone-600")
+        "This page uses " (code (~tw :tokens "bg-stone-100 px-1 rounded text-violet-700") ":stream true")
+        " in its defpage declaration. The browser receives the page skeleton instantly, "
+        "then three IO sources resolve at staggered intervals (1s, 3s, 5s)."))
+
+    ;; Slot: suspense placeholders (or resolved content)
+    (div (~tw :tokens "grid gap-4") children)
+
+    ;; Flow diagram
+    (div (~tw :tokens "space-y-4")
+      (h2 (~tw :tokens "text-lg font-semibold text-stone-800") "Streaming Flow")
+      (div (~tw :tokens "grid gap-3")
+        (map (fn (item)
+          (div (~tw :tokens "flex items-start gap-3 rounded-lg border border-stone-200 bg-white p-4")
+            (div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 flex items-center justify-center text-violet-700 font-bold text-sm")
+              (get item "label"))
+            (p (~tw :tokens "text-stone-700 text-sm pt-1") (get item "detail"))))
+          (list
+            {:label "Shell" :detail "HTML shell with three suspense placeholders sent immediately"}
+            {:label "Boot" :detail "sx-browser.js loads, renders fallback skeletons"}
+            {:label "1s" :detail "Fast API responds — first skeleton replaced with green box"}
+            {:label "3s" :detail "Database query completes — second skeleton replaced with blue box"}
+            {:label "5s" :detail "ML inference finishes — third skeleton replaced with amber box"}))))
+
+    ;; How it works
+    (div (~tw :tokens "rounded-lg border border-violet-200 bg-violet-50 p-5 space-y-3")
+      (h2 (~tw :tokens "text-lg font-semibold text-violet-900") "How Multi-Stream Works")
+      (ol (~tw :tokens "list-decimal list-inside text-violet-800 space-y-2 text-sm")
+        (li "Server evaluates " (code ":data") " — gets an " (em "async generator"))
+        (li "HTML shell with three " (code "~shared:pages/suspense") " placeholders sent immediately")
+        (li "Generator yields first chunk after 1s — server sends " (code "__sxResolve(\"stream-fast\", ...)"))
+        (li "Generator yields second chunk after 3s — " (code "__sxResolve(\"stream-medium\", ...)"))
+        (li "Generator yields third chunk after 5s — " (code "__sxResolve(\"stream-slow\", ...)"))
+        (li "Each resolve replaces its skeleton independently")))
+
+    ;; Technical details
+    (div (~tw :tokens "rounded-lg border border-stone-200 bg-stone-50 p-4 text-sm space-y-2")
+      (p (~tw :tokens "font-semibold text-stone-800") "Implementation details")
+      (ul (~tw :tokens "list-disc list-inside text-stone-600 space-y-1")
+        (li (code "defpage :stream true") " — opts the page into chunked transfer encoding")
+        (li (code ":data") " helper is an async generator — each " (code "yield") " resolves a different suspense slot")
+        (li "Each yield includes " (code "_stream_id") " matching a " (code "~shared:pages/suspense :id") " in the shell")
+        (li (code ":content") " expression is re-evaluated with each yield's bindings")
+        (li "Headers stream concurrently — independent of the data generator")
+        (li "Future: SSE/WebSocket for re-resolving slots after initial page load")))))
diff --git a/sx/sx/streaming-demo/stream-colors.sx b/sx/sx/streaming-demo/stream-colors.sx
new file mode 100644
index 00000000..9edbbf9c
--- /dev/null
+++ b/sx/sx/streaming-demo/stream-colors.sx
@@ -0,0 +1,59 @@
+;; Streaming & Suspense demo — Phase 6
+;;
+;; This page uses :stream true to enable chunked transfer encoding.
+;; The browser receives the HTML shell immediately with loading skeletons,
+;; then content fills in as each IO resolves at staggered intervals.
+;;
+;; The :data expression is an async generator that yields three chunks
+;; at 1s, 3s, and 5s. Each chunk resolves a different ~shared:pages/suspense slot.
+;; Color map for stream chunk styling (all string keys for get compatibility)
+(define stream-colors
+  (dict
+    "emerald"
+    (dict
+      "border"
+      "border-emerald-200"
+      "bg"
+      "bg-emerald-50"
+      "dot"
+      "bg-emerald-400"
+      "title"
+      "text-emerald-900"
+      "text"
+      "text-emerald-800"
+      "sub"
+      "text-emerald-700"
+      "code"
+      "bg-emerald-100")
+    "amber"
+    (dict
+      "border"
+      "border-amber-200"
+      "bg"
+      "bg-amber-50"
+      "dot"
+      "bg-amber-400"
+      "title"
+      "text-amber-900"
+      "text"
+      "text-amber-800"
+      "sub"
+      "text-amber-700"
+      "code"
+      "bg-amber-100")
+    "violet"
+    (dict
+      "border"
+      "border-violet-200"
+      "bg"
+      "bg-violet-50"
+      "dot"
+      "bg-violet-400"
+      "title"
+      "text-violet-900"
+      "text"
+      "text-violet-800"
+      "sub"
+      "text-violet-700"
+      "code"
+      "bg-violet-100")))
diff --git a/sx/sx/streaming-demo/stream-skeleton.sx b/sx/sx/streaming-demo/stream-skeleton.sx
new file mode 100644
index 00000000..4e992a01
--- /dev/null
+++ b/sx/sx/streaming-demo/stream-skeleton.sx
@@ -0,0 +1,8 @@
+;; Skeleton placeholder for a stream slot
+(defcomp ()
+  (div (~tw :tokens "rounded-lg border border-stone-200 bg-stone-50 p-5 space-y-3 animate-pulse")
+    (div (~tw :tokens "flex items-center gap-2")
+      (div (~tw :tokens "w-3 h-3 rounded-full bg-stone-300"))
+      (div (~tw :tokens "h-6 bg-stone-200 rounded w-1/3")))
+    (div (~tw :tokens "h-4 bg-stone-200 rounded w-2/3"))
+    (div (~tw :tokens "h-4 bg-stone-200 rounded w-1/2"))))
diff --git a/sx/sx/sx-tools-editor.sx b/sx/sx/sx-tools-editor.sx
deleted file mode 100644
index 5d104851..00000000
--- a/sx/sx/sx-tools-editor.sx
+++ /dev/null
@@ -1 +0,0 @@
-(defisland ~sx-tools/tree-editor () (let ((source (signal "(defcomp ~card (&key title subtitle)\n  (div :class \"card\"\n    (h2 title)\n    (when subtitle\n      (p :class \"sub\" subtitle))))")) (view-mode (signal "tree")) (selected-path (signal nil)) (parsed (signal nil)) (bindings (signal (dict)))) (letrec ((fmt-path (fn (path) (str "[" (join "," (map str path)) "]"))) (node-disp (fn (node) (cond (nil? node) "nil" (= (type-of node) "symbol") (symbol-name node) (= (type-of node) "keyword") (str ":" (keyword-name node)) (string? node) (let ((s (if (> (len node) 35) (str (slice node 0 32) "...") node))) (str "\"" s "\"")) (number? node) (str node) (= (type-of node) "boolean") (if node "true" "false") (list? node) (if (empty? node) "()" (str "(" (node-disp (first node)) (if (> (len node) 1) " ..." "") ")")) :else (str node)))) (is-compact (fn (node) (and (list? node) (<= (len node) 4) (not (some (fn (c) (list? c)) (rest node)))))) (build-entries (fn (node path depth result) (if (list? node) (if (empty? node) (append! result {:expandable false :depth depth :text "()" :is-list false :path path}) (if (is-compact node) (append! result {:expandable false :depth depth :text (str "(" (join " " (map node-disp node)) ")") :is-list true :path path}) (do (append! result {:expandable true :depth depth :text (str "(" (node-disp (first node))) :is-list true :path path}) (for-each (fn (i) (build-entries (nth node i) (concat path (list i)) (+ depth 1) result)) (range 1 (len node)))))) (append! result {:expandable false :depth depth :text (node-disp node) :is-list false :path path})))) (nav (fn (tree path) (reduce (fn (current idx) (if (or (nil? current) (not (list? current)) (>= idx (len current))) nil (nth current idx))) tree path))) (build-context (fn (tree path) (let ((result (list))) (for-each (fn (depth) (let ((prefix (slice path 0 (+ depth 1))) (node (nav tree prefix))) (when (not (nil? node)) (let ((is-target (= (+ depth 1) (len path)))) (append! result {:depth depth :is-target is-target :text (if (list? node) (if (empty? node) "()" (let ((head (node-disp (first node)))) (if (> (len node) 3) (str "(" head " " (node-disp (nth node 1)) " ...)") (str "(" (join " " (map node-disp node)) ")")))) (node-disp node)) :path prefix}))))) (range 0 (len path))) result))) (do-validate (fn (tree) (let ((errors (list))) (letrec ((check (fn (node path) (when (list? node) (when (not (empty? node)) (let ((head (first node))) (when (and (= (type-of head) "symbol") (or (= (symbol-name head) "letrec")) (>= (len node) 2)) (let ((bindings (nth node 1))) (when (list? bindings) (for-each (fn (i) (let ((pair (nth bindings i))) (when (not (and (list? pair) (>= (len pair) 2) (= (type-of (first pair)) "symbol"))) (append! errors (str "Binding " i " at " (fmt-path (concat path (list 1 i))) " is not a (name value) pair"))))) (range 0 (len bindings)))))) (when (and (= (type-of head) "symbol") (or (= (symbol-name head) "defcomp") (= (symbol-name head) "defisland"))) (when (< (len node) 4) (append! errors (str (symbol-name head) " at " (fmt-path path) " missing body")))))) (for-each (fn (i) (check (nth node i) (concat path (list i)))) (range 0 (len node))))))) (for-each (fn (i) (check (nth tree i) (list i))) (range 0 (len tree)))) (if (empty? errors) "OK" (join "\n" errors))))) (extract-params (fn (expr) (let ((head (if (and (list? expr) (not (empty? expr)) (= (type-of (first expr)) "symbol")) (symbol-name (first expr)) nil)) (params-list (if (and (list? expr) (> (len expr) 2)) (nth expr 2) nil))) (if (and (or (= head "defcomp") (= head "defisland")) (list? params-list)) (let ((result (list)) (in-key false)) (for-each (fn (p) (cond (and (= (type-of p) "symbol") (= (symbol-name p) "&key")) (set! in-key true) (and (= (type-of p) "symbol") (= (symbol-name p) "&rest")) (set! in-key false) in-key (cond (and (list? p) (not (empty? p))) (append! result (if (= (type-of (first p)) "symbol") (symbol-name (first p)) (str (first p)))) (= (type-of p) "symbol") (append! result (symbol-name p)) :else nil))) params-list) result) (list)))))) (div (~tw :tokens "space-y-4") (div (~tw :tokens "space-y-2") (label (~tw :tokens "text-sm font-medium text-stone-700") "SX Source") (textarea (~tw :tokens "w-full font-mono text-xs bg-stone-50 border border-stone-200 rounded p-3 leading-relaxed") :rows 6 :bind source)) (div (~tw :tokens "flex gap-2 items-center") (button (~tw :tokens "px-3 py-1 text-xs rounded bg-stone-700 text-white hover:bg-stone-800") :on-click (fn (e) (reset! parsed (sx-parse (deref source))) (reset! selected-path nil)) "Parse") (for-each (fn (mode) (button :class (str "px-3 py-1 text-xs rounded border transition-colors " (if (= (deref view-mode) mode) "bg-violet-600 text-white border-violet-600" "bg-white text-stone-600 border-stone-200 hover:border-violet-300")) :on-click (fn (e) (reset! view-mode mode)) mode)) (list "tree" "context" "validate" "render" "hypersx"))) (when (= (deref view-mode) "render") (let ((tree (deref parsed)) (all-params (let ((acc (list))) (when (and tree (not (empty? tree))) (for-each (fn (expr) (for-each (fn (p) (when (not (some (fn (x) (= x p)) acc)) (append! acc p))) (extract-params expr))) tree)) acc))) (when (not (empty? all-params)) (div (~tw :tokens "space-y-2 p-3 bg-violet-50 rounded border border-violet-200") (div (~tw :tokens "text-xs font-semibold text-violet-700 mb-1") "Parameters") (map (fn (pname) (div (~tw :tokens "flex items-center gap-2") (label (~tw :tokens "text-xs font-mono text-stone-600 w-24 text-right") pname) (input :type "text" (~tw :tokens "flex-1 px-2 py-1 text-xs font-mono border border-stone-300 rounded bg-white") :placeholder (str pname " value") :on-input (fn (e) (reset! bindings (assoc (deref bindings) pname (element-value (host-get e "target")))))))) all-params))))) (if (or (nil? (deref parsed)) (empty? (deref parsed))) (div (~tw :tokens "text-red-500 text-sm font-mono p-3 bg-red-50 rounded") "Parse error — check your s-expression syntax") (div (~tw :tokens "bg-stone-50 rounded border border-stone-200 p-3 font-mono text-xs leading-relaxed overflow-x-auto") (cond (= (deref view-mode) "tree") (let ((entries (list)) (tree (deref parsed))) (for-each (fn (i) (build-entries (nth tree i) (list i) 0 entries)) (range 0 (len tree))) (div (~tw :tokens "space-y-0") (map (fn (entry) (let ((path (get entry "path")) (sel (deref selected-path)) (is-selected (and (not (nil? sel)) (= (fmt-path sel) (fmt-path path))))) (div :class (str "py-0.5 cursor-pointer hover:bg-violet-50 rounded px-1 " (if is-selected "bg-violet-100" "")) :style (str "padding-left:" (* (get entry "depth") 16) "px") :on-click (fn (e) (reset! selected-path path)) (span (~tw :tokens "text-stone-400 mr-2 select-none") (fmt-path path)) (span :class (if (get entry "is-list") "text-sky-700" "text-stone-600") (get entry "text"))))) entries))) (= (deref view-mode) "context") (if (nil? (deref selected-path)) (p (~tw :tokens "text-stone-400 italic") "Click a node in tree view to see its context") (let ((ctx (build-context (deref parsed) (deref selected-path)))) (div (~tw :tokens "space-y-1") (map (fn (item) (div :style (str "padding-left:" (* (get item "depth") 16) "px") :class (if (get item "is-target") "text-violet-700 font-semibold" "text-stone-600") (span (~tw :tokens "text-stone-400 mr-2") (if (get item "is-target") "→ " "  ") (fmt-path (get item "path"))) (span (get item "text")))) ctx)))) (= (deref view-mode) "validate") (let ((result (do-validate (deref parsed)))) (div :class (if (= result "OK") "text-emerald-600" "text-amber-600 whitespace-pre-wrap") result)) (= (deref view-mode) "render") (let ((tree (deref parsed))) (div (~tw :tokens "prose prose-sm max-w-none font-sans") (map (fn (expr) (if (not (and (list? expr) (not (empty? expr)) (= (type-of (first expr)) "symbol"))) (div (~tw :tokens "font-mono text-xs text-stone-400 p-2 bg-stone-100 rounded") (sx-serialize expr)) (let ((head-name (symbol-name (first expr)))) (cond (is-html-tag? head-name) expr (= head-name "defcomp") (let ((body (last expr)) (params (extract-params expr)) (b (deref bindings))) (div (div (~tw :tokens "text-xs text-stone-400 mb-2 font-mono") (str head-name " " (node-disp (nth expr 1)))) (letrec ((subst (fn (node) (cond (and (= (type-of node) "symbol") (some (fn (p) (= p (symbol-name node))) params)) (or (get b (symbol-name node)) "") (list? node) (map subst node) :else node)))) (subst body)))) (= head-name "defisland") (let ((full-name (if (= (type-of (nth expr 1)) "symbol") (symbol-name (nth expr 1)) (str (nth expr 1))))) (sx-load-components (sx-serialize expr)) (div (div (~tw :tokens "text-xs text-stone-400 mb-2 font-mono") (str head-name " " full-name " — live preview")) (cyst :key full-name (div (~tw :tokens "border border-violet-200 rounded p-4") (list (make-symbol full-name)))))) (= head-name "let") (last expr) :else (div (~tw :tokens "font-mono text-xs text-stone-400 p-2 bg-stone-100 rounded") (sx-serialize expr)))))) tree))) (= (deref view-mode) "hypersx") (pre (~tw :tokens "font-mono text-xs text-stone-700 whitespace-pre-wrap overflow-x-auto bg-transparent p-0") (sx->hypersx (deref parsed))) :else (p "Select a view mode"))))))))
diff --git a/sx/sx/testing.sx b/sx/sx/testing.sx
deleted file mode 100644
index dc5a74b2..00000000
--- a/sx/sx/testing.sx
+++ /dev/null
@@ -1,302 +0,0 @@
-;; Testing section — SX tests SX across every host.
-;; Modular test specs: eval, parser, router, render.
-;; Each page shows spec source, runs server-side, offers browser-side run button.
-
-;; ---------------------------------------------------------------------------
-;; Overview page
-;; ---------------------------------------------------------------------------
-
-(defcomp ~testing/overview-content (&key server-results framework-source eval-source parser-source router-source render-source deps-source engine-source)
-  (~docs/page :title "Testing"
-    (div (~tw :tokens "space-y-8")
-
-      ;; Intro
-      (div (~tw :tokens "space-y-4")
-        (p (~tw :tokens "text-lg text-stone-600")
-          "SX tests itself. Test specs are written in SX and executed by SX evaluators on every host. "
-          "The same assertions run in Python, Node.js, and in the browser — from the same source files.")
-        (p (~tw :tokens "text-stone-600")
-          "The framework defines two macros ("
-          (code (~tw :tokens "text-violet-700 text-sm") "deftest")
-          " and "
-          (code (~tw :tokens "text-violet-700 text-sm") "defsuite")
-          ") and nine assertion helpers, all in SX. Each host provides only "
-          (strong "five platform functions")
-          " — everything else is pure SX."))
-
-      ;; Architecture
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Architecture")
-        (div (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
-          (pre (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono text-stone-700")
-"test-framework.sx            Macros + assertion helpers (loaded first)
-    |
-    +-- test-eval.sx           81 tests: evaluator + primitives
-    +-- test-parser.sx         39 tests: tokenizer, parser, serializer
-    +-- test-router.sx         18 tests: route matching + param extraction
-    +-- test-render.sx         23 tests: HTML rendering + components
-    +-- test-deps.sx           33 tests: dependency analysis + IO detection
-    +-- test-engine.sx         37 tests: trigger/swap/retry parsing
-
-Runners:
-    run.js                     Node.js — injects platform fns, runs specs
-    run.py                     Python — injects platform fns, runs specs
-    sx-test-runner.js          Browser — runs specs in this page
-
-Platform functions (5 total):
-    try-call (thunk)          -> {:ok true} | {:ok false :error \"msg\"}
-    report-pass (name)        -> output pass
-    report-fail (name error)  -> output fail
-    push-suite (name)         -> push suite context
-    pop-suite ()              -> pop suite context
-
-Per-spec platform functions:
-    parser:  sx-parse, sx-serialize, make-symbol, make-keyword, ...
-    router:  (none — pure spec, uses bootstrapped functions)
-    render:  render-html (wraps parse + render-to-html)
-    deps:    test-env (returns current evaluation environment)
-    engine:  (none — pure spec, uses bootstrapped functions)")))
-
-      ;; Server results
-      (when server-results
-        (div (~tw :tokens "space-y-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Server: Python evaluator")
-          (p (~tw :tokens "text-stone-600")
-            "Ran all test specs when this page loaded — "
-            (strong (str (get server-results "passed") "/" (get server-results "total") " passed"))
-            " in " (str (get server-results "elapsed-ms")) "ms.")
-          (pre (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
-            (get server-results "output"))))
-
-      ;; Browser test runner
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser: JavaScript evaluator")
-        (p (~tw :tokens "text-stone-600")
-          "Run all test specs in the browser using "
-          (code (~tw :tokens "text-violet-700 text-sm") "sx-browser.js")
-          ":")
-        (div (~tw :tokens "flex items-center gap-4")
-          (button :id "test-btn-all"
-            (~tw :tokens "px-4 py-2 rounded-md bg-violet-600 text-white font-medium text-sm hover:bg-violet-700 cursor-pointer")
-            :onclick "sxRunModularTests('all','test-output-all','test-btn-all')"
-            "Run all tests"))
-        (pre :id "test-output-all"
-          (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
-          :style "display:none"
-          "")
-        ;; Hidden: all spec sources for the browser runner
-        (textarea :id "test-framework-source" :style "display:none" framework-source)
-        (textarea :id "test-spec-eval" :style "display:none" eval-source)
-        (textarea :id "test-spec-parser" :style "display:none" parser-source)
-        (textarea :id "test-spec-router" :style "display:none" router-source)
-        (textarea :id "test-spec-render" :style "display:none" render-source)
-        (textarea :id "test-spec-deps" :style "display:none" deps-source)
-        (textarea :id "test-spec-engine" :style "display:none" engine-source)
-        (script :src (asset-url "/scripts/sx-test-runner.js")))
-
-      ;; Test spec index
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Test specs")
-        (div (~tw :tokens "grid grid-cols-1 md:grid-cols-2 gap-4")
-          (a :href "/sx/(language.(test.eval))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
-            (h3 (~tw :tokens "font-semibold text-stone-800") "Evaluator")
-            (p (~tw :tokens "text-sm text-stone-500") "81 tests — literals, arithmetic, strings, lists, dicts, special forms, lambdas, components, macros")
-            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-eval.sx"))
-          (a :href "/sx/(language.(test.parser))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
-            (h3 (~tw :tokens "font-semibold text-stone-800") "Parser")
-            (p (~tw :tokens "text-sm text-stone-500") "39 tests — tokenization, parsing, escape sequences, quote sugar, serialization, round-trips")
-            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-parser.sx"))
-          (a :href "/sx/(language.(test.router))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
-            (h3 (~tw :tokens "font-semibold text-stone-800") "Router")
-            (p (~tw :tokens "text-sm text-stone-500") "18 tests — path splitting, pattern parsing, segment matching, parameter extraction")
-            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-router.sx"))
-          (a :href "/sx/(language.(test.render))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
-            (h3 (~tw :tokens "font-semibold text-stone-800") "Renderer")
-            (p (~tw :tokens "text-sm text-stone-500") "23 tests — elements, attributes, void elements, fragments, escaping, control flow, components")
-            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-render.sx"))
-          (a :href "/sx/(language.(test.deps))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
-            (h3 (~tw :tokens "font-semibold text-stone-800") "Dependencies")
-            (p (~tw :tokens "text-sm text-stone-500") "33 tests — scan-refs, transitive-deps, components-needed, IO detection, purity classification")
-            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-deps.sx"))
-          (a :href "/sx/(language.(test.engine))" (~tw :tokens "block rounded-lg border border-stone-200 p-5 hover:border-violet-300 hover:bg-violet-50 transition-colors")
-            (h3 (~tw :tokens "font-semibold text-stone-800") "Engine")
-            (p (~tw :tokens "text-sm text-stone-500") "37 tests — parse-time, trigger specs, swap specs, retry logic, param filtering")
-            (p (~tw :tokens "text-xs text-violet-600 mt-1") "test-engine.sx"))))
-
-      ;; What it proves
-      (div (~tw :tokens "rounded-lg border border-blue-200 bg-blue-50 p-5 space-y-3")
-        (h2 (~tw :tokens "text-lg font-semibold text-blue-900") "What this proves")
-        (ol (~tw :tokens "list-decimal list-inside text-blue-800 space-y-2 text-sm")
-          (li "Test specs are " (strong "written in SX") " and " (strong "executed by SX") " — no code generation")
-          (li "The same tests run on " (strong "Python, Node.js, and in the browser") " from the same files")
-          (li "Each host provides only " (strong "5 platform functions") " — everything else is pure SX")
-          (li "Modular specs test each part independently — evaluator, parser, router, renderer")
-          (li "Per-spec platform functions extend the 5-function contract for module-specific capabilities")
-          (li "Platform divergences are " (strong "exposed by the tests") ", not hidden"))))))
-
-
-;; ---------------------------------------------------------------------------
-;; Per-spec test page (reusable for eval, parser, router, render)
-;; ---------------------------------------------------------------------------
-
-(defcomp ~testing/spec-content (&key (spec-name :as string) (spec-title :as string) (spec-desc :as string) (spec-source :as string) (framework-source :as string) (server-results :as dict?))
-  (~docs/page :title spec-title
-    (div (~tw :tokens "space-y-8")
-
-      ;; Description
-      (div (~tw :tokens "space-y-4")
-        (p (~tw :tokens "text-lg text-stone-600") spec-desc))
-
-      ;; Server-side results
-      (when server-results
-        (div (~tw :tokens "space-y-3")
-          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Server: Python evaluator")
-          (p (~tw :tokens "text-stone-600")
-            "Ran "
-            (code (~tw :tokens "text-violet-700 text-sm") (str "test-" spec-name ".sx"))
-            " when this page loaded — "
-            (strong (str (get server-results "passed") "/" (get server-results "total") " passed"))
-            " in " (str (get server-results "elapsed-ms")) "ms.")
-          (pre (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
-            (get server-results "output"))))
-
-      ;; Browser test runner
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser: JavaScript evaluator")
-        (p (~tw :tokens "text-stone-600")
-          "Run this spec in the browser:")
-        (div (~tw :tokens "flex items-center gap-4")
-          (button :id (str "test-btn-" spec-name)
-            (~tw :tokens "px-4 py-2 rounded-md bg-violet-600 text-white font-medium text-sm hover:bg-violet-700 cursor-pointer")
-            :onclick (str "sxRunModularTests('" spec-name "','test-output-" spec-name "','test-btn-" spec-name "')")
-            (str "Run " spec-title)))
-        (pre :id (str "test-output-" spec-name)
-          (~tw :tokens "text-sm font-mono bg-stone-900 text-green-400 rounded-lg p-4 overflow-x-auto max-h-96 overflow-y-auto")
-          :style "display:none"
-          "")
-        ;; Hidden: spec source + framework source for the browser runner
-        (textarea :id (str "test-spec-" spec-name) :style "display:none" spec-source)
-        (textarea :id "test-framework-source" :style "display:none" framework-source)
-        (script :src (asset-url "/scripts/sx-test-runner.js")))
-
-      ;; Full source
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Specification source")
-        (p (~tw :tokens "text-xs text-stone-400 italic")
-          (str "test-" spec-name ".sx")
-          " — the canonical test specification for this module.")
-        (div (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl")
-          (pre (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words")
-            (code (highlight spec-source "sx"))))))))
-
-
-;; ---------------------------------------------------------------------------
-;; Runners page
-;; ---------------------------------------------------------------------------
-
-(defcomp ~testing/runners-content ()
-  (~docs/page :title "Test Runners"
-    (div (~tw :tokens "space-y-8")
-
-      (div (~tw :tokens "space-y-4")
-        (p (~tw :tokens "text-lg text-stone-600")
-          "Three runners execute the same test specs on different hosts. Each injects the five platform functions and any per-spec extensions, then evaluates the SX source directly.")
-        (p (~tw :tokens "text-stone-600")
-          "All runners produce "
-          (a :href "https://testanything.org/" (~tw :tokens "text-violet-700 underline") "TAP")
-          " output and accept module names as arguments."))
-
-      ;; Node.js runner
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Node.js: run.js")
-        (div (~tw :tokens "rounded-lg border border-stone-200 bg-white p-5 space-y-3")
-          (h3 (~tw :tokens "text-sm font-medium text-stone-500 uppercase tracking-wide") "Usage")
-          (~docs/code :src
-            (highlight "# Run all specs\nnode shared/sx/tests/run.js\n\n# Run specific specs\nnode shared/sx/tests/run.js eval parser\n\n# Legacy mode (monolithic test.sx)\nnode shared/sx/tests/run.js --legacy" "bash")))
-        (p (~tw :tokens "text-stone-600 text-sm")
-          "Uses "
-          (code (~tw :tokens "text-violet-700 text-sm") "sx-browser.js")
-          " as the evaluator. Router tests use bootstrapped functions from "
-          (code (~tw :tokens "text-violet-700 text-sm") "Sx.splitPathSegments")
-          " etc. Render tests use "
-          (code (~tw :tokens "text-violet-700 text-sm") "Sx.renderToHtml")
-          "."))
-
-      ;; Python runner
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Python: run.py")
-        (div (~tw :tokens "rounded-lg border border-stone-200 bg-white p-5 space-y-3")
-          (h3 (~tw :tokens "text-sm font-medium text-stone-500 uppercase tracking-wide") "Usage")
-          (~docs/code :src
-            (highlight "# Run all specs\npython shared/sx/tests/run.py\n\n# Run specific specs\npython shared/sx/tests/run.py eval parser\n\n# Legacy mode (monolithic test.sx)\npython shared/sx/tests/run.py --legacy" "bash")))
-        (p (~tw :tokens "text-stone-600 text-sm")
-          "Uses the hand-written Python evaluator ("
-          (code (~tw :tokens "text-violet-700 text-sm") "evaluator.py")
-          "). Router tests import bootstrapped functions from "
-          (code (~tw :tokens "text-violet-700 text-sm") "sx_ref.py")
-          " because the hand-written evaluator's "
-          (code (~tw :tokens "text-violet-700 text-sm") "set!")
-          " doesn't propagate across lambda closure copies."))
-
-      ;; Browser runner
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Browser: sx-test-runner.js")
-        (p (~tw :tokens "text-stone-600")
-          "Runs in the browser on each test page. The spec source is embedded in a hidden textarea; the runner parses and evaluates it using the same "
-          (code (~tw :tokens "text-violet-700 text-sm") "sx-browser.js")
-          " that renders the page itself.")
-        (p (~tw :tokens "text-stone-600")
-          "This is the strongest proof of cross-host parity — the browser evaluator that users depend on is the same one running the tests."))
-
-      ;; Platform functions table
-      (div (~tw :tokens "space-y-3")
-        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "Platform functions")
-        (div (~tw :tokens "overflow-x-auto rounded border border-stone-200")
-          (table (~tw :tokens "w-full text-left text-sm")
-            (thead (tr (~tw :tokens "border-b border-stone-200 bg-stone-100")
-              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Function")
-              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Scope")
-              (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Purpose")))
-            (tbody
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "try-call")
-                (td (~tw :tokens "px-3 py-2") "All specs")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Call a thunk, catch errors, return result dict"))
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "report-pass")
-                (td (~tw :tokens "px-3 py-2") "All specs")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Report a passing test"))
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "report-fail")
-                (td (~tw :tokens "px-3 py-2") "All specs")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Report a failing test with error message"))
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "push-suite")
-                (td (~tw :tokens "px-3 py-2") "All specs")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Push suite name onto context stack"))
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "pop-suite")
-                (td (~tw :tokens "px-3 py-2") "All specs")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Pop suite name from context stack"))
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "sx-parse")
-                (td (~tw :tokens "px-3 py-2") "Parser")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Parse SX source to AST"))
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "sx-serialize")
-                (td (~tw :tokens "px-3 py-2") "Parser")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Serialize AST back to SX source text"))
-              (tr (~tw :tokens "border-b border-stone-100")
-                (td (~tw :tokens "px-3 py-2 font-mono text-sm text-violet-700") "render-html")
-                (td (~tw :tokens "px-3 py-2") "Renderer")
-                (td (~tw :tokens "px-3 py-2 text-stone-700") "Parse SX source and render to HTML string"))))))
-
-      ;; Adding a new host
-      (div (~tw :tokens "rounded-lg border border-blue-200 bg-blue-50 p-5 space-y-3")
-        (h2 (~tw :tokens "text-lg font-semibold text-blue-900") "Adding a new host")
-        (ol (~tw :tokens "list-decimal list-inside text-blue-800 space-y-2 text-sm")
-          (li "Implement the 5 platform functions in your target language")
-          (li "Load " (code (~tw :tokens "text-sm") "test-framework.sx") " — it defines deftest/defsuite macros")
-          (li "Load the spec file(s) — the evaluator runs the tests automatically")
-          (li "Add per-spec platform functions if testing parser or renderer")
-          (li "Compare TAP output across hosts — divergences reveal platform-specific semantics"))))))
diff --git a/sx/sx/playground.sx b/sx/sx/tools/playground/_islands/repl.sx
similarity index 74%
rename from sx/sx/playground.sx
rename to sx/sx/tools/playground/_islands/repl.sx
index f486169f..2f4f1825 100644
--- a/sx/sx/playground.sx
+++ b/sx/sx/tools/playground/_islands/repl.sx
@@ -1,18 +1,4 @@
-;; Playground — demonstrates transparent lazy module loading
-
-(defcomp ~playground/content (&key (title "Playground"))
-  (~docs/page :title title
-    (h1 "Playground")
-    (p "An interactive SX REPL. The " (code "sx freeze") " module "
-       "loads transparently when this island hydrates — no import needed.")
-    (span :data-sx-island "playground/repl"
-      (div (~tw :tokens "mt-6 border border-stone-200 rounded-lg overflow-hidden")
-        (div (~tw :tokens "bg-stone-100 px-4 py-2 text-sm font-mono text-stone-500")
-          "sx> ")
-        (div (~tw :tokens "p-4 font-mono text-sm min-h-[120px] text-stone-400")
-          "Loading...")))))
-
-(defisland ~playground/repl ()
+(defisland ()
   (let ((input (signal ""))
         (output (signal "(ready)"))
         (history (signal (list)))
diff --git a/sx/sx/tools/playground/index.sx b/sx/sx/tools/playground/index.sx
new file mode 100644
index 00000000..c10f1ef0
--- /dev/null
+++ b/sx/sx/tools/playground/index.sx
@@ -0,0 +1,12 @@
+;; Playground — demonstrates transparent lazy module loading
+(defcomp (&key (title "Playground"))
+  (~docs/page :title title
+    (h1 "Playground")
+    (p "An interactive SX REPL. The " (code "sx freeze") " module "
+       "loads transparently when this island hydrates — no import needed.")
+    (span :data-sx-island "playground/repl"
+      (div (~tw :tokens "mt-6 border border-stone-200 rounded-lg overflow-hidden")
+        (div (~tw :tokens "bg-stone-100 px-4 py-2 text-sm font-mono text-stone-500")
+          "sx> ")
+        (div (~tw :tokens "p-4 font-mono text-sm min-h-[120px] text-stone-400")
+          "Loading...")))))
diff --git a/sx/sx/services-tools.sx b/sx/sx/tools/services/index.sx
similarity index 98%
rename from sx/sx/services-tools.sx
rename to sx/sx/tools/services/index.sx
index 6e167dc5..6be8badf 100644
--- a/sx/sx/services-tools.sx
+++ b/sx/sx/tools/services/index.sx
@@ -1,4 +1,4 @@
-(defcomp ~services-tools/overview-content (&key (title "Services") &rest extra)
+(defcomp (&key (title "Services") &rest extra)
   (~docs/page :title title
     (p (~tw :tokens "text-stone-500 text-sm italic mb-8")
       "Python-based MCP server for understanding the rose-ash microservice topology. Static analysis — works without running services.")
diff --git a/sx/sx/sx-tools-demos.sx b/sx/sx/tools/sx-tools/_lib/sx-tools-demos.sx
similarity index 99%
rename from sx/sx/sx-tools-demos.sx
rename to sx/sx/tools/sx-tools/_lib/sx-tools-demos.sx
index d2fa0f43..95716e36 100644
--- a/sx/sx/sx-tools-demos.sx
+++ b/sx/sx/tools/sx-tools/_lib/sx-tools-demos.sx
@@ -1,7 +1,7 @@
 ;; Interactive demos for sx-tree tools.
 ;; Each demo runs client-side using the same SX functions the MCP server uses.
 
-(defisland ~sx-tools/tool-playground ()
+(defisland ()
   (let ((source (signal "(defcomp ~card (&key title subtitle &rest children)\n  (div :class \"card\"\n    (h2 title)\n    (when subtitle (p :class \"sub\" subtitle))\n    children))"))
         (tool (signal "summarise"))
         (output (signal ""))
diff --git a/sx/sx/tools/sx-tools/_lib/sx-tools-editor.sx b/sx/sx/tools/sx-tools/_lib/sx-tools-editor.sx
new file mode 100644
index 00000000..45987c52
--- /dev/null
+++ b/sx/sx/tools/sx-tools/_lib/sx-tools-editor.sx
@@ -0,0 +1 @@
+(defisland () (let ((source (signal "(defcomp ~card (&key title subtitle)\n  (div :class \"card\"\n    (h2 title)\n    (when subtitle\n      (p :class \"sub\" subtitle))))")) (view-mode (signal "tree")) (selected-path (signal nil)) (parsed (signal nil)) (bindings (signal (dict)))) (letrec ((fmt-path (fn (path) (str "[" (join "," (map str path)) "]"))) (node-disp (fn (node) (cond (nil? node) "nil" (= (type-of node) "symbol") (symbol-name node) (= (type-of node) "keyword") (str ":" (keyword-name node)) (string? node) (let ((s (if (> (len node) 35) (str (slice node 0 32) "...") node))) (str "\"" s "\"")) (number? node) (str node) (= (type-of node) "boolean") (if node "true" "false") (list? node) (if (empty? node) "()" (str "(" (node-disp (first node)) (if (> (len node) 1) " ..." "") ")")) :else (str node)))) (is-compact (fn (node) (and (list? node) (<= (len node) 4) (not (some (fn (c) (list? c)) (rest node)))))) (build-entries (fn (node path depth result) (if (list? node) (if (empty? node) (append! result {:expandable false :depth depth :text "()" :is-list false :path path}) (if (is-compact node) (append! result {:expandable false :depth depth :text (str "(" (join " " (map node-disp node)) ")") :is-list true :path path}) (do (append! result {:expandable true :depth depth :text (str "(" (node-disp (first node))) :is-list true :path path}) (for-each (fn (i) (build-entries (nth node i) (concat path (list i)) (+ depth 1) result)) (range 1 (len node)))))) (append! result {:expandable false :depth depth :text (node-disp node) :is-list false :path path})))) (nav (fn (tree path) (reduce (fn (current idx) (if (or (nil? current) (not (list? current)) (>= idx (len current))) nil (nth current idx))) tree path))) (build-context (fn (tree path) (let ((result (list))) (for-each (fn (depth) (let ((prefix (slice path 0 (+ depth 1))) (node (nav tree prefix))) (when (not (nil? node)) (let ((is-target (= (+ depth 1) (len path)))) (append! result {:depth depth :is-target is-target :text (if (list? node) (if (empty? node) "()" (let ((head (node-disp (first node)))) (if (> (len node) 3) (str "(" head " " (node-disp (nth node 1)) " ...)") (str "(" (join " " (map node-disp node)) ")")))) (node-disp node)) :path prefix}))))) (range 0 (len path))) result))) (do-validate (fn (tree) (let ((errors (list))) (letrec ((check (fn (node path) (when (list? node) (when (not (empty? node)) (let ((head (first node))) (when (and (= (type-of head) "symbol") (or (= (symbol-name head) "letrec")) (>= (len node) 2)) (let ((bindings (nth node 1))) (when (list? bindings) (for-each (fn (i) (let ((pair (nth bindings i))) (when (not (and (list? pair) (>= (len pair) 2) (= (type-of (first pair)) "symbol"))) (append! errors (str "Binding " i " at " (fmt-path (concat path (list 1 i))) " is not a (name value) pair"))))) (range 0 (len bindings)))))) (when (and (= (type-of head) "symbol") (or (= (symbol-name head) "defcomp") (= (symbol-name head) "defisland"))) (when (< (len node) 4) (append! errors (str (symbol-name head) " at " (fmt-path path) " missing body")))))) (for-each (fn (i) (check (nth node i) (concat path (list i)))) (range 0 (len node))))))) (for-each (fn (i) (check (nth tree i) (list i))) (range 0 (len tree)))) (if (empty? errors) "OK" (join "\n" errors))))) (extract-params (fn (expr) (let ((head (if (and (list? expr) (not (empty? expr)) (= (type-of (first expr)) "symbol")) (symbol-name (first expr)) nil)) (params-list (if (and (list? expr) (> (len expr) 2)) (nth expr 2) nil))) (if (and (or (= head "defcomp") (= head "defisland")) (list? params-list)) (let ((result (list)) (in-key false)) (for-each (fn (p) (cond (and (= (type-of p) "symbol") (= (symbol-name p) "&key")) (set! in-key true) (and (= (type-of p) "symbol") (= (symbol-name p) "&rest")) (set! in-key false) in-key (cond (and (list? p) (not (empty? p))) (append! result (if (= (type-of (first p)) "symbol") (symbol-name (first p)) (str (first p)))) (= (type-of p) "symbol") (append! result (symbol-name p)) :else nil))) params-list) result) (list)))))) (div (~tw :tokens "space-y-4") (div (~tw :tokens "space-y-2") (label (~tw :tokens "text-sm font-medium text-stone-700") "SX Source") (textarea (~tw :tokens "w-full font-mono text-xs bg-stone-50 border border-stone-200 rounded p-3 leading-relaxed") :rows 6 :bind source)) (div (~tw :tokens "flex gap-2 items-center") (button (~tw :tokens "px-3 py-1 text-xs rounded bg-stone-700 text-white hover:bg-stone-800") :on-click (fn (e) (reset! parsed (sx-parse (deref source))) (reset! selected-path nil)) "Parse") (for-each (fn (mode) (button :class (str "px-3 py-1 text-xs rounded border transition-colors " (if (= (deref view-mode) mode) "bg-violet-600 text-white border-violet-600" "bg-white text-stone-600 border-stone-200 hover:border-violet-300")) :on-click (fn (e) (reset! view-mode mode)) mode)) (list "tree" "context" "validate" "render" "hypersx"))) (when (= (deref view-mode) "render") (let ((tree (deref parsed)) (all-params (let ((acc (list))) (when (and tree (not (empty? tree))) (for-each (fn (expr) (for-each (fn (p) (when (not (some (fn (x) (= x p)) acc)) (append! acc p))) (extract-params expr))) tree)) acc))) (when (not (empty? all-params)) (div (~tw :tokens "space-y-2 p-3 bg-violet-50 rounded border border-violet-200") (div (~tw :tokens "text-xs font-semibold text-violet-700 mb-1") "Parameters") (map (fn (pname) (div (~tw :tokens "flex items-center gap-2") (label (~tw :tokens "text-xs font-mono text-stone-600 w-24 text-right") pname) (input :type "text" (~tw :tokens "flex-1 px-2 py-1 text-xs font-mono border border-stone-300 rounded bg-white") :placeholder (str pname " value") :on-input (fn (e) (reset! bindings (assoc (deref bindings) pname (element-value (host-get e "target")))))))) all-params))))) (if (or (nil? (deref parsed)) (empty? (deref parsed))) (div (~tw :tokens "text-red-500 text-sm font-mono p-3 bg-red-50 rounded") "Parse error — check your s-expression syntax") (div (~tw :tokens "bg-stone-50 rounded border border-stone-200 p-3 font-mono text-xs leading-relaxed overflow-x-auto") (cond (= (deref view-mode) "tree") (let ((entries (list)) (tree (deref parsed))) (for-each (fn (i) (build-entries (nth tree i) (list i) 0 entries)) (range 0 (len tree))) (div (~tw :tokens "space-y-0") (map (fn (entry) (let ((path (get entry "path")) (sel (deref selected-path)) (is-selected (and (not (nil? sel)) (= (fmt-path sel) (fmt-path path))))) (div :class (str "py-0.5 cursor-pointer hover:bg-violet-50 rounded px-1 " (if is-selected "bg-violet-100" "")) :style (str "padding-left:" (* (get entry "depth") 16) "px") :on-click (fn (e) (reset! selected-path path)) (span (~tw :tokens "text-stone-400 mr-2 select-none") (fmt-path path)) (span :class (if (get entry "is-list") "text-sky-700" "text-stone-600") (get entry "text"))))) entries))) (= (deref view-mode) "context") (if (nil? (deref selected-path)) (p (~tw :tokens "text-stone-400 italic") "Click a node in tree view to see its context") (let ((ctx (build-context (deref parsed) (deref selected-path)))) (div (~tw :tokens "space-y-1") (map (fn (item) (div :style (str "padding-left:" (* (get item "depth") 16) "px") :class (if (get item "is-target") "text-violet-700 font-semibold" "text-stone-600") (span (~tw :tokens "text-stone-400 mr-2") (if (get item "is-target") "→ " "  ") (fmt-path (get item "path"))) (span (get item "text")))) ctx)))) (= (deref view-mode) "validate") (let ((result (do-validate (deref parsed)))) (div :class (if (= result "OK") "text-emerald-600" "text-amber-600 whitespace-pre-wrap") result)) (= (deref view-mode) "render") (let ((tree (deref parsed))) (div (~tw :tokens "prose prose-sm max-w-none font-sans") (map (fn (expr) (if (not (and (list? expr) (not (empty? expr)) (= (type-of (first expr)) "symbol"))) (div (~tw :tokens "font-mono text-xs text-stone-400 p-2 bg-stone-100 rounded") (sx-serialize expr)) (let ((head-name (symbol-name (first expr)))) (cond (is-html-tag? head-name) expr (= head-name "defcomp") (let ((body (last expr)) (params (extract-params expr)) (b (deref bindings))) (div (div (~tw :tokens "text-xs text-stone-400 mb-2 font-mono") (str head-name " " (node-disp (nth expr 1)))) (letrec ((subst (fn (node) (cond (and (= (type-of node) "symbol") (some (fn (p) (= p (symbol-name node))) params)) (or (get b (symbol-name node)) "") (list? node) (map subst node) :else node)))) (subst body)))) (= head-name "defisland") (let ((full-name (if (= (type-of (nth expr 1)) "symbol") (symbol-name (nth expr 1)) (str (nth expr 1))))) (sx-load-components (sx-serialize expr)) (div (div (~tw :tokens "text-xs text-stone-400 mb-2 font-mono") (str head-name " " full-name " — live preview")) (cyst :key full-name (div (~tw :tokens "border border-violet-200 rounded p-4") (list (make-symbol full-name)))))) (= head-name "let") (last expr) :else (div (~tw :tokens "font-mono text-xs text-stone-400 p-2 bg-stone-100 rounded") (sx-serialize expr)))))) tree))) (= (deref view-mode) "hypersx") (pre (~tw :tokens "font-mono text-xs text-stone-700 whitespace-pre-wrap overflow-x-auto bg-transparent p-0") (sx->hypersx (deref parsed))) :else (p "Select a view mode"))))))))
diff --git a/sx/sx/sx-tools.sx b/sx/sx/tools/sx-tools/index.sx
similarity index 94%
rename from sx/sx/sx-tools.sx
rename to sx/sx/tools/sx-tools/index.sx
index ca33c286..7ec9fc6b 100644
--- a/sx/sx/sx-tools.sx
+++ b/sx/sx/tools/sx-tools/index.sx
@@ -1,44 +1,4 @@
-(~docs/section
-  :title "Debugging & analysis"
-  :id "debugging"
-  (p
-    "Three tools for understanding evaluation behavior, dependency chains, and build composition.")
-  (h4 (~tw :tokens "font-semibold text-stone-700 mt-6 mb-2") "Trace evaluation")
-  (p
-    (code "sx_trace")
-    " steps through the CEK machine showing each symbol lookup, function call, and return value. Invaluable for debugging undefined symbol errors and unexpected evaluation paths.")
-  (~docs/code
-    :src (str
-      ";; Trace an expression\nsx_trace expr=\"(let ((x 10)) (+ x (foo y)))\" max_steps=50\n\n  1 CALL    (let ((x 10)) (+ x (foo y)))\n  2 LITERAL 10\n  3 RETURN  10 → done\n  4 CALL    (+ x (foo y))\n  5 LOOKUP  + → <native:+>\n  ...\n 10 LOOKUP  foo → ???\nERROR: Undefined symbol: foo"))
-  (p
-    "The "
-    (code "file")
-    " parameter loads definitions before tracing, so you can trace expressions that reference project-specific functions.")
-  (h4 (~tw :tokens "font-semibold text-stone-700 mt-6 mb-2") "Dependency analysis")
-  (p
-    (code "sx_deps")
-    " walks a component or file and collects every free symbol -- names that are referenced but not locally bound. For each symbol it reports where the definition lives: same file, another "
-    (code ".sx")
-    " file, or a platform primitive.")
-  (~docs/code
-    :src (str
-      ";; What does the resource island need?\nsx_deps file=\"index.sx\" name=\"~demo-resource\" dir=\"web\"\n\n  resource             web-signals.sx\n  promise-delayed      lib/browser.sx\n  div                  ???\n  get                  [primitive]"))
-  (p
-    "The "
-    (code "???")
-    " entries are HTML tags or symbols defined at runtime. This tool catches missing imports and build pipeline gaps -- it would have instantly revealed that "
-    (code "resource")
-    " was missing from the browser island environment.")
-  (h4 (~tw :tokens "font-semibold text-stone-700 mt-6 mb-2") "Build manifest")
-  (p
-    (code "sx_build_manifest")
-    " shows what a JS or OCaml build contains: which adapters, spec modules, primitive modules, and extensions are included. For JS builds it also reports the current bundle size and primitive count.")
-  (~docs/code
-    :src (str
-      ";; JS build contents\nsx_build_manifest target=\"js\"\n  Adapters (9): boot, browser-lib, dom, ...\n  Spec modules (7): deps → page-helpers → router → signals → signals-web → types → vm\n  Current build: 438,085 bytes, 699 primitives\n\n;; OCaml MCP server env\nsx_build_manifest target=\"ocaml\"\n  Total bindings: 111\n  native (38): append!, apply, ...\n  lambda (71): annotate-tree, collect-free-symbols, ...")))
-
 (defcomp
-  ~sx-tools/overview-content
   (&key (title "SX Tools") &rest extra)
   (~docs/page
     :title title
@@ -1008,6 +968,3 @@
           " to restructure -- would be a tree operation. No character-counting, no mental stack simulation, no risk of introducing a second paren error while fixing the first."))
       (p
         "The gap between intended tree and actual tree stops being invisible. Claude sees trees, edits trees, and the brackets take care of themselves."))))
-
-(~docs/code
-  :src ";; Run Playwright tests\nsx_playwright spec=\"demo-interactions.spec.js\"")
diff --git a/tests/playwright/generate-sx-tests.py b/tests/playwright/generate-sx-tests.py
index aff8f290..3ad49ee9 100644
--- a/tests/playwright/generate-sx-tests.py
+++ b/tests/playwright/generate-sx-tests.py
@@ -878,7 +878,7 @@ output.append(';; Evaluate a hyperscript expression and return its result.')
 output.append(';; Compiles the expression, wraps in a thunk, evaluates, returns result.')
 output.append('(define eval-hs')
 output.append('  (fn (src)')
-output.append('    (let ((sx (hs-to-sx-from-source (str "return " src))))')
+output.append('    (let ((sx (hs-to-sx (hs-compile src))))')
 output.append('      (let ((handler (eval-expr-cek')
 output.append('              (list (quote fn) (list (quote me)) (list (quote let) (list (list (quote it) nil) (list (quote event) nil)) sx)))))')
 output.append('        (handler nil)))))')