Merge branch 'worktree-cssx-components' into macros

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

sx/sx/nav-data.sx

@@ -9,7 +9,6 @@
   (dict :label "Evaluator" :href "/docs/evaluator")
   (dict :label "Primitives" :href "/docs/primitives")
   (dict :label "Special Forms" :href "/docs/special-forms")
-  (dict :label "CSS" :href "/docs/css")
   (dict :label "Server Rendering" :href "/docs/server-rendering")))
 
 (define reference-nav-items (list
@@ -55,13 +54,22 @@
   (dict :label "Request Abort" :href "/examples/sync-replace")
   (dict :label "Retry" :href "/examples/retry")))
 
+(define cssx-nav-items (list
+  (dict :label "Overview" :href "/cssx/")
+  (dict :label "Patterns" :href "/cssx/patterns")
+  (dict :label "Delivery" :href "/cssx/delivery")
+  (dict :label "Async CSS" :href "/cssx/async")
+  (dict :label "Live Styles" :href "/cssx/live")
+  (dict :label "Comparisons" :href "/cssx/comparisons")
+  (dict :label "Philosophy" :href "/cssx/philosophy")))
+
 (define essays-nav-items (list
   (dict :label "Why S-Expressions" :href "/essays/why-sexps"
         :summary "Why SX uses s-expressions instead of HTML templates, JSX, or any other syntax.")
   (dict :label "The htmx/React Hybrid" :href "/essays/htmx-react-hybrid"
         :summary "How SX combines the server-driven simplicity of htmx with the component model of React.")
   (dict :label "On-Demand CSS" :href "/essays/on-demand-css"
-        :summary "The CSSX system: keyword atoms resolved to class names, CSS rules injected on first use.")
+        :summary "How SX delivers only the CSS each page needs — server scans rendered classes, sends the delta.")
   (dict :label "Client Reactivity" :href "/essays/client-reactivity"
         :summary "Reactive UI updates without a virtual DOM, diffing library, or build step.")
   (dict :label "SX Native" :href "/essays/sx-native"
@@ -103,7 +111,6 @@
   (dict :label "SxEngine" :href "/specs/engine")
   (dict :label "Orchestration" :href "/specs/orchestration")
   (dict :label "Boot" :href "/specs/boot")
-  (dict :label "CSSX" :href "/specs/cssx")
   (dict :label "Continuations" :href "/specs/continuations")
   (dict :label "call/cc" :href "/specs/callcc")
   (dict :label "Deps" :href "/specs/deps")
@@ -147,8 +154,6 @@
         :summary "OAuth-based sharing to Facebook, Instagram, Threads, Twitter/X, LinkedIn, and Mastodon.")
   (dict :label "SX CI Pipeline" :href "/plans/sx-ci"
         :summary "Build, test, and deploy in s-expressions — CI pipelines as SX components.")
-  (dict :label "CSSX Components" :href "/plans/cssx-components"
-        :summary "Styling as components — replace the style dictionary with regular defcomps that apply classes, respond to data, and compose naturally.")
   (dict :label "Live Streaming" :href "/plans/live-streaming"
         :summary "SSE and WebSocket transports for re-resolving suspense slots after initial page load — live data, real-time collaboration.")))
 
@@ -177,7 +182,7 @@
         :prose "Special forms are the 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. The registry covers control flow (if, when, cond, case, and, or), binding (let, letrec, define, set!), functions (lambda, defcomp, defmacro), sequencing (begin, do, thread-first), quoting (quote, quasiquote), continuations (reset, shift), guards (dynamic-wind), higher-order forms (map, filter, reduce), and domain-specific definitions (defstyle, defhandler, defpage, defquery, defaction).")
   (dict :slug "renderer"   :filename "render.sx"      :title "Renderer"
         :desc "Shared rendering registries and utilities used by all adapters."
-        :prose "The renderer defines what is renderable and how arguments are parsed, but not the output format. It maintains registries of known HTML tags, SVG tags, void elements, and boolean attributes. It specifies how keyword arguments on elements become HTML attributes, how children are collected, and how special attributes (class, style, data-*) are handled. All three adapters (DOM, HTML, SX wire) share these definitions so they agree on what constitutes valid markup. The renderer also defines the StyleValue type used by the CSSX on-demand CSS system.")))
+        :prose "The renderer defines what is renderable and how arguments are parsed, but not the output format. It maintains registries of known HTML tags, SVG tags, void elements, and boolean attributes. It specifies how keyword arguments on elements become HTML attributes, how children are collected, and how special attributes (class, style, data-*) are handled. All three adapters (DOM, HTML, SX wire) share these definitions so they agree on what constitutes valid markup.")))
 
 (define adapter-spec-items (list
   (dict :slug "adapter-dom"   :filename "adapter-dom.sx"   :title "DOM Adapter"
@@ -199,10 +204,7 @@
 (define browser-spec-items (list
   (dict :slug "boot"  :filename "boot.sx"  :title "Boot"
         :desc "Browser startup lifecycle: mount, hydrate, script processing."
-        :prose "Boot handles the browser startup sequence and provides the public API for mounting SX content. On page load it: (1) initializes CSS tracking, (2) loads the style dictionary from inline JSON, (3) processes <script type=\"text/sx\"> tags (component definitions and mount directives), (4) hydrates [data-sx] elements, and (5) activates the engine on all elements. It also provides the public mount/hydrate/update/render-component API, and the head element hoisting logic that moves <meta>, <title>, and <link> tags from rendered content into <head>.")
-  (dict :slug "cssx"  :filename "cssx.sx"  :title "CSSX"
-        :desc "On-demand CSS: style dictionary, keyword resolution, rule injection."
-        :prose "CSSX is the on-demand CSS system. It resolves keyword atoms (:flex, :gap-4, :hover:bg-sky-200) into StyleValue objects with content-addressed class names, injecting CSS rules into the document on first use. The style dictionary is a JSON blob containing: atoms (keyword to CSS declarations), pseudo-variants (hover:, focus:, etc.), responsive breakpoints (md:, lg:, etc.), keyframe animations, arbitrary value patterns, and child selector prefixes (space-x-, space-y-). Classes are only emitted when used, keeping the CSS payload minimal. The dictionary is typically served inline in a <script type=\"text/sx-styles\"> tag.")))
+        :prose "Boot handles the browser startup sequence and provides the public API for mounting SX content. On page load it: (1) initializes CSS tracking, (2) processes <script type=\"text/sx\"> tags (component definitions and mount directives), (3) hydrates [data-sx] elements, and (4) activates the engine on all elements. It also provides the public mount/hydrate/update/render-component API, and the head element hoisting logic that moves <meta>, <title>, and <link> tags from rendered content into <head>.")))
 
 (define extension-spec-items (list
   (dict :slug "continuations" :filename "continuations.sx" :title "Continuations"