Restructure specs into hierarchical sections, add "The Art Chain" essay

Specs nav reorganized from flat list into 6 sections with children:
Core (5), Adapters (4), Browser (4), Reactive (1), Host Interface (3),
Extensions (4). Added missing spec items: adapter-async, signals,
boundary, forms, page-helpers, types. Architecture page updated to
match. New essay on ars, techne, and the self-making artifact chain.

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

sx/sx/specs.sx

@@ -12,9 +12,13 @@
         (p :class "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 :class "text-stone-600"
-          "The spec is split into two layers: a "
-          (strong "core") " that defines the language itself, and "
-          (strong "adapters") " that connect it to specific environments."))
+          "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 :class "space-y-3"
         (h2 :class "text-2xl font-semibold text-stone-800" "Core")
@@ -96,18 +100,20 @@
                      :sx-swap "outerHTML" :sx-push-url "true"
                      "adapter-sx.sx"))
                 (td :class "px-3 py-2 text-stone-700" "SX wire format")
-                (td :class "px-3 py-2 text-stone-500" "Server to client"))))))
+                (td :class "px-3 py-2 text-stone-500" "Server to client"))
+              (tr :class "border-b border-stone-100"
+                (td :class "px-3 py-2 font-mono text-sm text-violet-700"
+                  (a :href "/language/specs/adapter-async" :class "hover:underline"
+                     :sx-get "/language/specs/adapter-async" :sx-target "#main-panel" :sx-select "#main-panel"
+                     :sx-swap "outerHTML" :sx-push-url "true"
+                     "adapter-async.sx"))
+                (td :class "px-3 py-2 text-stone-700" "HTML/SX with awaited I/O")
+                (td :class "px-3 py-2 text-stone-500" "Server (async)"))))))
 
       (div :class "space-y-3"
-        (h2 :class "text-2xl font-semibold text-stone-800" "Engine")
+        (h2 :class "text-2xl font-semibold text-stone-800" "Browser Runtime")
         (p :class "text-stone-600"
-          "The engine is the browser-side fetch/swap/history system. It processes "
-          (code :class "text-violet-700 text-sm" "sx-*")
-          " attributes on elements to make HTTP requests, swap content, manage browser history, and handle events. It is split into two files: pure logic ("
-          (code :class "text-violet-700 text-sm" "engine.sx")
-          ") and browser wiring ("
-          (code :class "text-violet-700 text-sm" "orchestration.sx")
-          ").")
+          "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 :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-100"
@@ -127,16 +133,26 @@
                      :sx-get "/language/specs/orchestration" :sx-target "#main-panel" :sx-select "#main-panel"
                      :sx-swap "outerHTML" :sx-push-url "true"
                      "orchestration.sx"))
-                (td :class "px-3 py-2 text-stone-700" "Browser wiring — binds engine to DOM events, fetch, request lifecycle"))))))
+                (td :class "px-3 py-2 text-stone-700" "Browser wiring — binds engine to DOM events, fetch, request lifecycle"))
+              (tr :class "border-b border-stone-100"
+                (td :class "px-3 py-2 font-mono text-sm text-violet-700"
+                  (a :href "/language/specs/boot" :class "hover:underline"
+                     :sx-get "/language/specs/boot" :sx-target "#main-panel" :sx-select "#main-panel"
+                     :sx-swap "outerHTML" :sx-push-url "true"
+                     "boot.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Browser startup — mount, hydrate, script processing, head hoisting"))
+              (tr :class "border-b border-stone-100"
+                (td :class "px-3 py-2 font-mono text-sm text-violet-700"
+                  (a :href "/language/specs/router" :class "hover:underline"
+                     :sx-get "/language/specs/router" :sx-target "#main-panel" :sx-select "#main-panel"
+                     :sx-swap "outerHTML" :sx-push-url "true"
+                     "router.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Client-side route matching — Flask-style patterns, param extraction"))))))
 
       (div :class "space-y-3"
-        (h2 :class "text-2xl font-semibold text-stone-800" "Browser")
+        (h2 :class "text-2xl font-semibold text-stone-800" "Reactive")
         (p :class "text-stone-600"
-          "Browser-level support: startup lifecycle and on-demand CSS. "
-          (code :class "text-violet-700 text-sm" "boot.sx")
-          " handles page load — processing scripts, mounting content, and hydrating elements. "
-          (code :class "text-violet-700 text-sm" "cssx.sx")
-          " provides the on-demand CSS system that resolves keyword atoms into class names and injects rules as needed.")
+          "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 :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-100"
@@ -145,45 +161,80 @@
             (tbody
               (tr :class "border-b border-stone-100"
                 (td :class "px-3 py-2 font-mono text-sm text-violet-700"
-                  (a :href "/language/specs/boot" :class "hover:underline"
-                     :sx-get "/language/specs/boot" :sx-target "#main-panel" :sx-select "#main-panel"
+                  (a :href "/language/specs/signals" :class "hover:underline"
+                     :sx-get "/language/specs/signals" :sx-target "#main-panel" :sx-select "#main-panel"
                      :sx-swap "outerHTML" :sx-push-url "true"
-                     "boot.sx"))
-                (td :class "px-3 py-2 text-stone-700" "Browser startup lifecycle — mount, hydrate, script processing, head hoisting"))
+                     "signals.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Signal runtime — signal, deref, reset!, swap!, computed, effect, batch, island scope"))))))
+
+      (div :class "space-y-3"
+        (h2 :class "text-2xl font-semibold text-stone-800" "Host Interface")
+        (p :class "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 :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-100"
+              (th :class "px-3 py-2 font-medium text-stone-600" "File")
+              (th :class "px-3 py-2 font-medium text-stone-600" "Role")))
+            (tbody
               (tr :class "border-b border-stone-100"
                 (td :class "px-3 py-2 font-mono text-sm text-violet-700"
-                  (a :href "/language/specs/cssx" :class "hover:underline"
-                     :sx-get "/language/specs/cssx" :sx-target "#main-panel" :sx-select "#main-panel"
+                  (a :href "/language/specs/boundary" :class "hover:underline"
+                     :sx-get "/language/specs/boundary" :sx-target "#main-panel" :sx-select "#main-panel"
                      :sx-swap "outerHTML" :sx-push-url "true"
-                     "cssx.sx"))
-                (td :class "px-3 py-2 text-stone-700" "On-demand CSS — style dictionary, keyword resolution, rule injection"))))))
+                     "boundary.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Language boundary — I/O primitives, page helpers, tier declarations"))
+              (tr :class "border-b border-stone-100"
+                (td :class "px-3 py-2 font-mono text-sm text-violet-700"
+                  (a :href "/language/specs/forms" :class "hover:underline"
+                     :sx-get "/language/specs/forms" :sx-target "#main-panel" :sx-select "#main-panel"
+                     :sx-swap "outerHTML" :sx-push-url "true"
+                     "forms.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Definition forms — defhandler, defquery, defaction, defpage"))
+              (tr :class "border-b border-stone-100"
+                (td :class "px-3 py-2 font-mono text-sm text-violet-700"
+                  (a :href "/language/specs/page-helpers" :class "hover:underline"
+                     :sx-get "/language/specs/page-helpers" :sx-target "#main-panel" :sx-select "#main-panel"
+                     :sx-swap "outerHTML" :sx-push-url "true"
+                     "page-helpers.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Pure data-transformation helpers for page rendering"))))))
 
       (div :class "space-y-3"
         (h2 :class "text-2xl font-semibold text-stone-800" "Dependency graph")
         (div :class "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl"
           (pre :class "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono text-stone-700"
-"parser.sx          (standalone — no dependencies)
+";; Core
+parser.sx           (standalone — no dependencies)
 primitives.sx       (standalone — declarative registry)
 special-forms.sx    (standalone — declarative registry)
 eval.sx             depends on: parser, primitives, special-forms
 render.sx           (standalone — shared registries)
 
+;; Adapters
 adapter-dom.sx      depends on: render, eval
 adapter-html.sx     depends on: render, eval
 adapter-sx.sx       depends on: render, eval
+adapter-async.sx    depends on: adapter-html, adapter-sx, eval
 
+;; Browser Runtime
 engine.sx           depends on: eval, adapter-dom
 orchestration.sx    depends on: engine, adapter-dom
-cssx.sx             depends on: render
-boot.sx             depends on: cssx, orchestration, adapter-dom, render
+boot.sx             depends on: orchestration, adapter-dom, render
+router.sx           (standalone — pure string/list ops)
 
-;; Extensions (optional — loaded only when target requests them)
-continuations.sx    depends on: eval (optional)
-callcc.sx           depends on: eval (optional)
+;; Reactive
+signals.sx          depends on: eval
 
-;; Spec modules (optional — loaded via --spec-modules)
-deps.sx             depends on: eval (optional)
-router.sx           (standalone — pure string/list ops)")))
+;; Host Interface
+boundary.sx         (standalone — declarative contract)
+forms.sx            depends on: eval
+page-helpers.sx     (standalone — declarative registry)
+
+;; Extensions (optional)
+continuations.sx    depends on: eval
+callcc.sx           depends on: eval
+types.sx            depends on: eval, primitives
+deps.sx             depends on: eval")))
 
       (div :class "space-y-3"
         (h2 :class "text-2xl font-semibold text-stone-800" "Extensions")
@@ -193,8 +244,7 @@ router.sx           (standalone — pure string/list ops)")))
           (table :class "w-full text-left text-sm"
             (thead (tr :class "border-b border-stone-200 bg-stone-100"
               (th :class "px-3 py-2 font-medium text-stone-600" "File")
-              (th :class "px-3 py-2 font-medium text-stone-600" "Role")
-              (th :class "px-3 py-2 font-medium text-stone-600" "Recommended targets")))
+              (th :class "px-3 py-2 font-medium text-stone-600" "Role")))
             (tbody
               (tr :class "border-b border-stone-100"
                 (td :class "px-3 py-2 font-mono text-sm text-violet-700"
@@ -202,16 +252,28 @@ router.sx           (standalone — pure string/list ops)")))
                      :sx-get "/language/specs/continuations" :sx-target "#main-panel" :sx-select "#main-panel"
                      :sx-swap "outerHTML" :sx-push-url "true"
                      "continuations.sx"))
-                (td :class "px-3 py-2 text-stone-700" "Delimited continuations — shift/reset")
-                (td :class "px-3 py-2 text-stone-500" "All targets"))
+                (td :class "px-3 py-2 text-stone-700" "Delimited continuations — shift/reset"))
               (tr :class "border-b border-stone-100"
                 (td :class "px-3 py-2 font-mono text-sm text-violet-700"
                   (a :href "/language/specs/callcc" :class "hover:underline"
                      :sx-get "/language/specs/callcc" :sx-target "#main-panel" :sx-select "#main-panel"
                      :sx-swap "outerHTML" :sx-push-url "true"
                      "callcc.sx"))
-                (td :class "px-3 py-2 text-stone-700" "Full first-class continuations — call/cc")
-                (td :class "px-3 py-2 text-stone-500" "Scheme, Haskell"))))))
+                (td :class "px-3 py-2 text-stone-700" "Full first-class continuations — call/cc"))
+              (tr :class "border-b border-stone-100"
+                (td :class "px-3 py-2 font-mono text-sm text-violet-700"
+                  (a :href "/language/specs/types" :class "hover:underline"
+                     :sx-get "/language/specs/types" :sx-target "#main-panel" :sx-select "#main-panel"
+                     :sx-swap "outerHTML" :sx-push-url "true"
+                     "types.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Gradual type system — registration-time checking, zero runtime cost"))
+              (tr :class "border-b border-stone-100"
+                (td :class "px-3 py-2 font-mono text-sm text-violet-700"
+                  (a :href "/language/specs/deps" :class "hover:underline"
+                     :sx-get "/language/specs/deps" :sx-target "#main-panel" :sx-select "#main-panel"
+                     :sx-swap "outerHTML" :sx-push-url "true"
+                     "deps.sx"))
+                (td :class "px-3 py-2 text-stone-700" "Component dependency analysis — bundling, IO detection, CSS scoping"))))))
 
       (div :class "space-y-3"
         (h2 :class "text-2xl font-semibold text-stone-800" "Self-hosting")
@@ -235,11 +297,17 @@ router.sx           (standalone — pure string/list ops)")))
     (p :class "text-stone-600 mb-6"
       (case spec-title
         "Core Language"
-          "The core specification defines the language itself — parsing, evaluation, primitives, and shared rendering definitions. These four files are platform-independent and sufficient to implement SX on any target."
-        "Adapters & Engine"
-          "Adapters connect the core language to specific environments. Each adapter takes evaluated expression trees and produces output for its target. The engine adds browser-side fetch/swap behaviour, split into pure logic and browser orchestration."
-        "Browser"
-          "Browser-level support: the startup lifecycle that boots SX in the browser, and the on-demand CSS system that resolves keyword atoms into Tailwind-compatible class names."
+          "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 :class "space-y-8"
       (map (fn (spec)