Replace env free-variable threading with IO-primitive auto-fetch macros

Layout components now self-resolve context (cart-mini, auth-menu, nav-tree,
rights, URLs) via new IO primitives (root-header-ctx, select-colours,
account-nav-ctx, app-rights) and defmacro wrappers (~root-header-auto,
~auth-header-row-auto, ~root-mobile-auto). This eliminates _ctx_to_env(),
HELPER_CSS_CLASSES, and verbose :key threading across all 10 services.

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

sx/sx/docs.sx

@@ -0,0 +1,65 @@
+;; SX docs utility components
+
+(defcomp ~doc-placeholder (&key id)
+  (div :id id
+    (div :class "bg-stone-50 border border-stone-200 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"
+        (code text)))))
+
+(defcomp ~doc-attr-table (&key title rows)
+  (div :class "space-y-3"
+    (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"
+          (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?")))
+        (tbody rows)))))
+
+(defcomp ~doc-headers-table (&key title rows)
+  (div :class "space-y-3"
+    (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"
+          (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")))
+        (tbody rows)))))
+
+(defcomp ~doc-headers-row (&key name value description)
+  (tr :class "border-b border-stone-100"
+    (td :class "px-3 py-2 font-mono text-sm text-violet-700 whitespace-nowrap" name)
+    (td :class "px-3 py-2 font-mono text-sm text-stone-500" value)
+    (td :class "px-3 py-2 text-stone-700 text-sm" description)))
+
+(defcomp ~doc-two-col-row (&key name description)
+  (tr :class "border-b border-stone-100"
+    (td :class "px-3 py-2 font-mono text-sm text-violet-700 whitespace-nowrap" name)
+    (td :class "px-3 py-2 text-stone-700 text-sm" description)))
+
+(defcomp ~doc-two-col-table (&key title intro col1 col2 rows)
+  (div :class "space-y-3"
+    (when title (h3 :class "text-xl font-semibold text-stone-700" title))
+    (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"
+          (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>)"))
+
+(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)"
+    :class "text-xs text-stone-400 hover:text-stone-600 border border-stone-200 rounded px-2 py-1 transition-colors"
+    "Clear component cache"))