Send all responses as sexp wire format with client-side rendering

- Server sends sexp source text, client (sexp.js) renders everything
- SexpExpr marker class for nested sexp composition in serialize()
- sexp_page() HTML shell with data-mount="body" for full page loads
- sexp_response() returns text/sexp for OOB/partial responses
- ~app-body layout component replaces ~app-layout (no raw!)
- ~rich-text is the only component using raw! (for CMS HTML content)
- Fragment endpoints return text/sexp, auto-wrapped in SexpExpr
- All _*_html() helpers converted to _*_sexp() returning sexp source
- Head auto-hoist: sexp.js moves meta/title/link/script[ld+json]
  from rendered body to document.head automatically
- Unknown components render warning box instead of crashing page
- Component kwargs preserve AST for lazy rendering (fixes <> in kwargs)
- Fix unterminated paren in events/sexp/tickets.sexpr

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

federation/templates/_types/social/header/_header.html

@@ -31,7 +31,7 @@
           <a href="{{ url_for('social.notifications') }}"
              class="px-2 py-1 rounded hover:bg-stone-200 relative {% if request.path == url_for('social.notifications') %}font-bold{% endif %}">
             Notifications
-            <span hx-get="{{ url_for('social.notification_count') }}" hx-trigger="load, every 30s" hx-swap="innerHTML"
+            <span sx-get="{{ url_for('social.notification_count') }}" sx-trigger="load, every 30s" sx-swap="innerHTML"
                   class="absolute -top-2 -right-3 text-xs bg-red-500 text-white rounded-full px-1 empty:hidden"></span>
           </a>
           <a href="{{ url_for('activitypub.actor_profile', username=actor.preferred_username) }}"

federation/templates/federation/_actor_list_items.html

@@ -29,9 +29,9 @@
       <div class="flex-shrink-0">
         {% if list_type == "following" or a.actor_url in (followed_urls or []) %}
           <form method="post" action="{{ url_for('social.unfollow') }}"
-                hx-post="{{ url_for('social.unfollow') }}"
-                hx-target="closest article"
-                hx-swap="outerHTML">
+                sx-post="{{ url_for('social.unfollow') }}"
+                sx-target="closest article"
+                sx-swap="outerHTML">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <input type="hidden" name="actor_url" value="{{ a.actor_url }}">
             <button type="submit" class="text-sm border border-stone-300 rounded px-3 py-1 hover:bg-stone-100">
@@ -40,9 +40,9 @@
           </form>
         {% else %}
           <form method="post" action="{{ url_for('social.follow') }}"
-                hx-post="{{ url_for('social.follow') }}"
-                hx-target="closest article"
-                hx-swap="outerHTML">
+                sx-post="{{ url_for('social.follow') }}"
+                sx-target="closest article"
+                sx-swap="outerHTML">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <input type="hidden" name="actor_url" value="{{ a.actor_url }}">
             <button type="submit" class="text-sm bg-stone-800 text-white rounded px-3 py-1 hover:bg-stone-700">
@@ -56,8 +56,8 @@
 {% endfor %}
 
 {% if actors | length >= 20 %}
-  <div hx-get="{{ url_for('social.' ~ list_type ~ '_list_page', page=page + 1) }}"
-       hx-trigger="revealed"
-       hx-swap="outerHTML">
+  <div sx-get="{{ url_for('social.' ~ list_type ~ '_list_page', page=page + 1) }}"
+       sx-trigger="revealed"
+       sx-swap="outerHTML">
   </div>
 {% endif %}

federation/templates/federation/_interaction_buttons.html

@@ -7,9 +7,9 @@
 
 <div class="flex items-center gap-4 mt-3 text-sm text-stone-500">
   {% if liked %}
-    <form hx-post="{{ url_for('social.unlike') }}"
-          hx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
-          hx-swap="innerHTML">
+    <form sx-post="{{ url_for('social.unlike') }}"
+          sx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
+          sx-swap="innerHTML">
       <input type="hidden" name="object_id" value="{{ oid }}">
       <input type="hidden" name="author_inbox" value="{{ ainbox }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
@@ -18,9 +18,9 @@
       </button>
     </form>
   {% else %}
-    <form hx-post="{{ url_for('social.like') }}"
-          hx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
-          hx-swap="innerHTML">
+    <form sx-post="{{ url_for('social.like') }}"
+          sx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
+          sx-swap="innerHTML">
       <input type="hidden" name="object_id" value="{{ oid }}">
       <input type="hidden" name="author_inbox" value="{{ ainbox }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
@@ -31,9 +31,9 @@
   {% endif %}
 
   {% if boosted %}
-    <form hx-post="{{ url_for('social.unboost') }}"
-          hx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
-          hx-swap="innerHTML">
+    <form sx-post="{{ url_for('social.unboost') }}"
+          sx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
+          sx-swap="innerHTML">
       <input type="hidden" name="object_id" value="{{ oid }}">
       <input type="hidden" name="author_inbox" value="{{ ainbox }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
@@ -42,9 +42,9 @@
       </button>
     </form>
   {% else %}
-    <form hx-post="{{ url_for('social.boost') }}"
-          hx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
-          hx-swap="innerHTML">
+    <form sx-post="{{ url_for('social.boost') }}"
+          sx-target="#interactions-{{ oid | replace('/', '_') | replace(':', '_') }}"
+          sx-swap="innerHTML">
       <input type="hidden" name="object_id" value="{{ oid }}">
       <input type="hidden" name="author_inbox" value="{{ ainbox }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

federation/templates/federation/_search_results.html

@@ -27,9 +27,9 @@
       <div class="flex-shrink-0">
         {% if a.actor_url in (followed_urls or []) %}
           <form method="post" action="{{ url_for('social.unfollow') }}"
-                hx-post="{{ url_for('social.unfollow') }}"
-                hx-target="closest article"
-                hx-swap="outerHTML">
+                sx-post="{{ url_for('social.unfollow') }}"
+                sx-target="closest article"
+                sx-swap="outerHTML">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <input type="hidden" name="actor_url" value="{{ a.actor_url }}">
             <button type="submit" class="text-sm border border-stone-300 rounded px-3 py-1 hover:bg-stone-100">
@@ -38,9 +38,9 @@
           </form>
         {% else %}
           <form method="post" action="{{ url_for('social.follow') }}"
-                hx-post="{{ url_for('social.follow') }}"
-                hx-target="closest article"
-                hx-swap="outerHTML">
+                sx-post="{{ url_for('social.follow') }}"
+                sx-target="closest article"
+                sx-swap="outerHTML">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <input type="hidden" name="actor_url" value="{{ a.actor_url }}">
             <button type="submit" class="text-sm bg-stone-800 text-white rounded px-3 py-1 hover:bg-stone-700">
@@ -54,8 +54,8 @@
 {% endfor %}
 
 {% if actors | length >= 20 %}
-  <div hx-get="{{ url_for('social.search_page', q=query, page=page + 1) }}"
-       hx-trigger="revealed"
-       hx-swap="outerHTML">
+  <div sx-get="{{ url_for('social.search_page', q=query, page=page + 1) }}"
+       sx-trigger="revealed"
+       sx-swap="outerHTML">
   </div>
 {% endif %}

federation/templates/federation/_timeline_items.html

@@ -5,14 +5,14 @@
 {% if items %}
   {% set last = items[-1] %}
   {% if timeline_type == "actor" %}
-    <div hx-get="{{ url_for('social.actor_timeline_page', id=actor_id, before=last.published.isoformat()) }}"
-         hx-trigger="revealed"
-         hx-swap="outerHTML">
+    <div sx-get="{{ url_for('social.actor_timeline_page', id=actor_id, before=last.published.isoformat()) }}"
+         sx-trigger="revealed"
+         sx-swap="outerHTML">
     </div>
   {% else %}
-    <div hx-get="{{ url_for('social.' ~ timeline_type ~ '_timeline_page', before=last.published.isoformat()) }}"
-         hx-trigger="revealed"
-         hx-swap="outerHTML">
+    <div sx-get="{{ url_for('social.' ~ timeline_type ~ '_timeline_page', before=last.published.isoformat()) }}"
+         sx-trigger="revealed"
+         sx-swap="outerHTML">
     </div>
   {% endif %}
 {% endif %}

federation/templates/federation/choose_username.html

@@ -31,10 +31,10 @@
           required
           autocomplete="off"
           class="flex-1 border border-stone-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-stone-500"
-          hx-get="{{ url_for('identity.check_username') }}"
-          hx-trigger="keyup changed delay:300ms"
-          hx-target="#username-status"
-          hx-include="[name='username']"
+          sx-get="{{ url_for('identity.check_username') }}"
+          sx-trigger="keyup changed delay:300ms"
+          sx-target="#username-status"
+          sx-include="[name='username']"
         >
       </div>
       <div id="username-status" class="text-sm mt-1"></div>

federation/templates/federation/search.html

@@ -6,9 +6,9 @@
 <h1 class="text-2xl font-bold mb-6">Search</h1>
 
 <form method="get" action="{{ url_for('social.search') }}" class="mb-6"
-      hx-get="{{ url_for('social.search_page') }}"
-      hx-target="#search-results"
-      hx-push-url="{{ url_for('social.search') }}">
+      sx-get="{{ url_for('social.search_page') }}"
+      sx-target="#search-results"
+      sx-push-url="{{ url_for('social.search') }}">
   <div class="flex gap-2">
     <input type="text" name="q" value="{{ query }}"
       class="flex-1 border border-stone-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-stone-500"