Add Specs section, Reflexive Web essay, fix highlight and dev caching

- Fix highlight() returning SxExpr so syntax-highlighted code renders
  as DOM elements instead of leaking SX source text into the page
- Add Specs section that reads and displays canonical SX spec files
  from shared/sx/ref/ with syntax highlighting
- Add "The Reflexive Web" essay on SX becoming a complete LISP with
  AI as native participant
- Change logo from (<x>) to (<sx>) everywhere
- Unify all backgrounds to bg-stone-100, center code blocks
- Skip component/style cookie cache in dev mode so .sx edits are
  visible immediately on refresh without clearing localStorage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sx/sx/docs.sx

@@ -2,14 +2,14 @@
 
 (defcomp ~doc-placeholder (&key id)
   (div :id id
-    (div :class "bg-stone-50 border border-stone-200 rounded p-4 mt-3"
+    (div :class "bg-stone-100 rounded p-4 mt-3"
       (p :class "text-stone-400 italic text-sm"
         "Trigger the demo to see the actual content."))))
 
 (defcomp ~doc-oob-code (&key target-id text)
   (div :id target-id :sx-swap-oob "innerHTML"
-    (div :class "bg-stone-50 border border-stone-200 rounded p-4 mt-3 overflow-x-auto"
-      (pre :class "text-sm whitespace-pre-wrap"
+    (div :class "bg-stone-100 rounded p-4 mt-3"
+      (pre :class "text-sm whitespace-pre-wrap break-words"
         (code text)))))
 
 (defcomp ~doc-attr-table (&key title rows)
@@ -17,7 +17,7 @@
     (h3 :class "text-xl font-semibold text-stone-700" title)
     (div :class "overflow-x-auto rounded border border-stone-200"
       (table :class "w-full text-left text-sm"
-        (thead (tr :class "border-b border-stone-200 bg-stone-50"
+        (thead (tr :class "border-b border-stone-200 bg-stone-100"
           (th :class "px-3 py-2 font-medium text-stone-600" "Attribute")
           (th :class "px-3 py-2 font-medium text-stone-600" "Description")
           (th :class "px-3 py-2 font-medium text-stone-600 text-center w-20" "In sx?")))
@@ -28,7 +28,7 @@
     (h3 :class "text-xl font-semibold text-stone-700" title)
     (div :class "overflow-x-auto rounded border border-stone-200"
       (table :class "w-full text-left text-sm"
-        (thead (tr :class "border-b border-stone-200 bg-stone-50"
+        (thead (tr :class "border-b border-stone-200 bg-stone-100"
           (th :class "px-3 py-2 font-medium text-stone-600" "Header")
           (th :class "px-3 py-2 font-medium text-stone-600" "Value")
           (th :class "px-3 py-2 font-medium text-stone-600" "Description")))
@@ -51,13 +51,13 @@
     (when intro (p :class "text-stone-600 mb-6" intro))
     (div :class "overflow-x-auto rounded border border-stone-200"
       (table :class "w-full text-left text-sm"
-        (thead (tr :class "border-b border-stone-200 bg-stone-50"
+        (thead (tr :class "border-b border-stone-200 bg-stone-100"
           (th :class "px-3 py-2 font-medium text-stone-600" (or col1 "Name"))
           (th :class "px-3 py-2 font-medium text-stone-600" (or col2 "Description"))))
         (tbody rows)))))
 
 (defcomp ~sx-docs-label ()
-  (span :class "font-mono" "(<x>)"))
+  (span :class "font-mono" "(<sx>)"))
 
 (defcomp ~doc-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)"

sx/sx/layouts.sx

@@ -11,7 +11,8 @@
            (dict :label "Reference" :href "/reference/")
            (dict :label "Protocols" :href "/protocols/wire-format")
            (dict :label "Examples" :href "/examples/click-to-load")
-           (dict :label "Essays" :href "/essays/sx-sucks"))))
+           (dict :label "Essays" :href "/essays/sx-sucks")
+           (dict :label "Specs" :href "/specs/core"))))
     (<> (map (lambda (item)
       (~nav-link
         :href (get item "href")

sx/sx/nav-data.sx

@@ -64,7 +64,15 @@
   (dict :label "The SX Manifesto" :href "/essays/sx-manifesto")
   (dict :label "Tail-Call Optimization" :href "/essays/tail-call-optimization")
   (dict :label "Continuations" :href "/essays/continuations")
-  (dict :label "Godel, Escher, Bach" :href "/essays/godel-escher-bach")))
+  (dict :label "Godel, Escher, Bach" :href "/essays/godel-escher-bach")
+  (dict :label "The Reflexive Web" :href "/essays/reflexive-web")))
+
+(define specs-nav-items (list
+  (dict :label "Core" :href "/specs/core")
+  (dict :label "Parser" :href "/specs/parser")
+  (dict :label "Evaluator" :href "/specs/evaluator")
+  (dict :label "Primitives" :href "/specs/primitives")
+  (dict :label "Renderer" :href "/specs/renderer")))
 
 ;; Find the current nav label for a slug by matching href suffix.
 ;; Returns the label string or nil if no match.

sx/sx/specs.sx

@@ -0,0 +1,36 @@
+;; Spec viewer components — display canonical SX specification source
+
+(defcomp ~spec-core-content (&key spec-files)
+  (~doc-page :title "SX Core Specification"
+    (p :class "text-stone-600 mb-6"
+      "SX is defined in SX. These four files constitute the canonical, self-hosting specification of the language. Each file is both documentation and executable definition — bootstrap compilers read them to generate native implementations.")
+    (div :class "space-y-8"
+      (map (fn (spec)
+        (div :class "space-y-3"
+          (div :class "flex items-baseline gap-3"
+            (h2 :class "text-2xl font-semibold text-stone-800"
+              (a :href (get spec "href")
+                 :sx-get (get spec "href") :sx-target "#main-panel" :sx-select "#main-panel"
+                 :sx-swap "outerHTML" :sx-push-url "true"
+                 :class "text-violet-700 hover:text-violet-900 underline"
+                 (get spec "title")))
+            (span :class "text-sm text-stone-400 font-mono" (get spec "filename")))
+          (p :class "text-stone-600" (get spec "desc"))
+          (div :class "bg-stone-100 rounded-lg p-5 max-h-72 overflow-y-auto"
+            (pre :class "text-xs leading-relaxed whitespace-pre-wrap break-words"
+              (code (highlight (get spec "source") "sx"))))))
+        spec-files))))
+
+(defcomp ~spec-detail-content (&key spec-title spec-desc spec-filename spec-source)
+  (~doc-page :title spec-title
+    (div :class "flex items-baseline gap-3 mb-4"
+      (span :class "text-sm text-stone-400 font-mono" spec-filename)
+      (span :class "text-sm text-stone-500" spec-desc))
+    (div :class "bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl"
+      (pre :class "text-sm leading-relaxed whitespace-pre-wrap break-words"
+        (code (highlight spec-source "sx"))))))
+
+(defcomp ~spec-not-found (&key slug)
+  (~doc-page :title "Spec Not Found"
+    (p :class "text-stone-600"
+      "No specification found for \"" slug "\". This spec may not exist yet.")))