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>

blog/templates/_types/blog/_action_buttons.html

@@ -4,11 +4,11 @@
     {% set new_href = url_for('blog.new_post')|host %}
     <a
       href="{{ new_href }}"
-      hx-get="{{ new_href }}"
-      hx-target="#main-panel"
-      hx-select="{{hx_select_search}}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ new_href }}"
+      sx-target="#main-panel"
+      sx-select="{{hx_select_search}}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       class="px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"
       title="New Post"
     >
@@ -17,11 +17,11 @@
     {% set new_page_href = url_for('blog.new_page')|host %}
     <a
       href="{{ new_page_href }}"
-      hx-get="{{ new_page_href }}"
-      hx-target="#main-panel"
-      hx-select="{{hx_select_search}}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ new_page_href }}"
+      sx-target="#main-panel"
+      sx-select="{{hx_select_search}}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       class="px-3 py-1 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 transition-colors"
       title="New Page"
     >
@@ -33,11 +33,11 @@
       {% set drafts_off_href = (current_local_href ~ {'drafts': None}|qs)|host %}
       <a
         href="{{ drafts_off_href }}"
-        hx-get="{{ drafts_off_href }}"
-        hx-target="#main-panel"
-        hx-select="{{hx_select_search}}"
-        hx-swap="outerHTML"
-        hx-push-url="true"
+        sx-get="{{ drafts_off_href }}"
+        sx-target="#main-panel"
+        sx-select="{{hx_select_search}}"
+        sx-swap="outerHTML"
+        sx-push-url="true"
         class="px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"
         title="Hide Drafts"
       >
@@ -48,11 +48,11 @@
       {% set drafts_on_href = (current_local_href ~ {'drafts': '1'}|qs)|host %}
       <a
         href="{{ drafts_on_href }}"
-        hx-get="{{ drafts_on_href }}"
-        hx-target="#main-panel"
-        hx-select="{{hx_select_search}}"
-        hx-swap="outerHTML"
-        hx-push-url="true"
+        sx-get="{{ drafts_on_href }}"
+        sx-target="#main-panel"
+        sx-select="{{hx_select_search}}"
+        sx-swap="outerHTML"
+        sx-push-url="true"
         class="px-3 py-1 rounded bg-amber-600 text-white text-sm hover:bg-amber-700 transition-colors"
         title="Show Drafts"
       >

blog/templates/_types/blog/_card.html

@@ -14,11 +14,11 @@
     {% set _href=url_for('blog.post.post_detail', slug=post.slug)|host %}
     <a
       href="{{ _href }}"
-      hx-get="{{ _href }}"
-      hx-target="#main-panel"
-      hx-select ="{{hx_select_search}}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ _href }}"
+      sx-target="#main-panel"
+      sx-select ="{{hx_select_search}}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       aria-selected="{{ 'true' if _active else 'false' }}"
       class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"
     >

blog/templates/_types/blog/_card_tile.html

@@ -2,11 +2,11 @@
     {% set _href=url_for('blog.post.post_detail', slug=post.slug)|host %}
     <a
       href="{{ _href }}"
-      hx-get="{{ _href }}"
-      hx-target="#main-panel"
-      hx-select ="{{hx_select_search}}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ _href }}"
+      sx-target="#main-panel"
+      sx-select ="{{hx_select_search}}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       aria-selected="{{ 'true' if _active else 'false' }}"
       class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"
     >

blog/templates/_types/blog/_cards.html

@@ -11,43 +11,11 @@
   <div
     id="sentinel-{{ page }}-m"
     class="block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"
-    hx-get="{{ (current_local_href ~ {'page': page + 1}|qs)|host }}"
-    hx-trigger="intersect once delay:250ms, sentinelmobile:retry"
-    hx-swap="outerHTML"
-    _="
-      init
-        if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end
-        if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' end
-
-      on resize from window
-        if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' else remove @hx-disabled end
-
-      on htmx:beforeRequest
-        if window.matchMedia('(min-width: 768px)').matches then halt end
-        add .hidden to .js-neterr in me
-        remove .hidden from .js-loading in me
-        remove .opacity-100 from me
-        add .opacity-0 to me
-
-      def backoff()
-        set ms to me.dataset.retryMs
-        if ms > 30000 then set ms to 30000 end
-        -- show big SVG panel & make sentinel visible
-        add .hidden to .js-loading in me
-        remove .hidden from .js-neterr in me
-        remove .opacity-0 from me
-        add .opacity-100 to me
-        wait ms ms
-        trigger sentinelmobile:retry
-        set ms to ms * 2
-        if ms > 30000 then set ms to 30000 end
-        set me.dataset.retryMs to ms
-      end
-
-      on htmx:sendError     call backoff()
-      on htmx:responseError call backoff()
-      on htmx:timeout       call backoff()
-    "
+    sx-get="{{ (current_local_href ~ {'page': page + 1}|qs)|host }}"
+    sx-trigger="intersect once delay:250ms, sentinelmobile:retry"
+    sx-swap="outerHTML"
+    sx-media="(max-width: 767px)"
+    sx-retry="exponential:1000:30000"
     role="status"
     aria-live="polite"
     aria-hidden="true"
@@ -58,47 +26,10 @@
   <div
     id="sentinel-{{ page }}-d"
     class="hidden md:block h-4 opacity-0 pointer-events-none"
-    hx-get="{{ (current_local_href ~ {'page': page + 1}|qs)|host}}"
-    hx-trigger="intersect once delay:250ms, sentinel:retry"
-    hx-swap="outerHTML"
-     _="
-      init
-        if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end
-
-      on htmx:beforeRequest(event)
-        add .hidden to .js-neterr in me
-        remove .hidden from .js-loading in me
-        remove .opacity-100 from me
-        add .opacity-0 to me
-
-        set trig to null
-        if event.detail and event.detail.triggeringEvent then
-          set trig to event.detail.triggeringEvent
-        end
-        if trig and trig.type is 'intersect'
-          set scroller to the closest .js-grid-viewport
-          if scroller is null then halt end
-          if scroller.scrollTop < 20 then halt end
-        end
-
-      def backoff()
-        set ms to me.dataset.retryMs
-        if ms > 30000 then set ms to 30000 end
-        add .hidden to .js-loading in me
-        remove .hidden from .js-neterr in me
-        remove .opacity-0 from me
-        add .opacity-100 to me
-        wait ms ms
-        trigger sentinel:retry
-        set ms to ms * 2
-        if ms > 30000 then set ms to 30000 end
-        set me.dataset.retryMs to ms
-      end
-
-      on htmx:sendError     call backoff()
-      on htmx:responseError call backoff()
-      on htmx:timeout       call backoff()
-    "
+    sx-get="{{ (current_local_href ~ {'page': page + 1}|qs)|host}}"
+    sx-trigger="intersect once delay:250ms, sentinel:retry"
+    sx-swap="outerHTML"
+    sx-retry="exponential:1000:30000"
     role="status"
     aria-live="polite"
     aria-hidden="true"

blog/templates/_types/blog/_main_panel.html

@@ -5,21 +5,21 @@
     {% set pages_href = (url_for('blog.index') ~ '?type=pages')|host %}
     <a
       href="{{ posts_href }}"
-      hx-get="{{ posts_href }}"
-      hx-target="#main-panel"
-      hx-select="{{ hx_select_search }}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ posts_href }}"
+      sx-target="#main-panel"
+      sx-select="{{ hx_select_search }}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       class="px-4 py-1.5 rounded-t text-sm font-medium transition-colors
         {{ 'bg-stone-700 text-white' if content_type != 'pages' else 'bg-stone-100 text-stone-600 hover:bg-stone-200' }}"
     >Posts</a>
     <a
       href="{{ pages_href }}"
-      hx-get="{{ pages_href }}"
-      hx-target="#main-panel"
-      hx-select="{{ hx_select_search }}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ pages_href }}"
+      sx-target="#main-panel"
+      sx-select="{{ hx_select_search }}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       class="px-4 py-1.5 rounded-t text-sm font-medium transition-colors
         {{ 'bg-stone-700 text-white' if content_type == 'pages' else 'bg-stone-100 text-stone-600 hover:bg-stone-200' }}"
     >Pages</a>
@@ -40,14 +40,14 @@
     {% set tile_href = (current_local_href ~ {'view': 'tile'}|qs)|host %}
     <a
       href="{{ list_href }}"
-      hx-get="{{ list_href }}"
-      hx-target="#main-panel"
-      hx-select="{{hx_select_search}}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ list_href }}"
+      sx-target="#main-panel"
+      sx-select="{{hx_select_search}}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       class="p-1.5 rounded {{ 'bg-stone-200 text-stone-800' if view != 'tile' else 'text-stone-400 hover:text-stone-600' }}"
       title="List view"
-      _="on click js localStorage.removeItem('blog_view') end"
+      onclick="localStorage.removeItem('blog_view')"
     >
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
         <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
@@ -55,14 +55,14 @@
     </a>
     <a
       href="{{ tile_href }}"
-      hx-get="{{ tile_href }}"
-      hx-target="#main-panel"
-      hx-select="{{hx_select_search}}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ tile_href }}"
+      sx-target="#main-panel"
+      sx-select="{{hx_select_search}}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       class="p-1.5 rounded {{ 'bg-stone-200 text-stone-800' if view == 'tile' else 'text-stone-400 hover:text-stone-600' }}"
       title="Tile view"
-      _="on click js localStorage.setItem('blog_view','tile') end"
+      onclick="localStorage.setItem('blog_view','tile')"
     >
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
         <path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />

blog/templates/_types/blog/_page_card.html

@@ -3,11 +3,11 @@
   {% set _href = url_for('blog.post.post_detail', slug=page.slug)|host %}
   <a
     href="{{ _href }}"
-    hx-get="{{ _href }}"
-    hx-target="#main-panel"
-    hx-select="{{ hx_select_search }}"
-    hx-swap="outerHTML"
-    hx-push-url="true"
+    sx-get="{{ _href }}"
+    sx-target="#main-panel"
+    sx-select="{{ hx_select_search }}"
+    sx-swap="outerHTML"
+    sx-push-url="true"
     class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"
   >
     <header class="mb-2 text-center">

blog/templates/_types/blog/_page_cards.html

@@ -6,9 +6,9 @@
   <div
     id="sentinel-{{ page_num }}-d"
     class="h-4 opacity-0 pointer-events-none"
-    hx-get="{{ (current_local_href ~ {'page': page_num + 1}|qs)|host }}"
-    hx-trigger="intersect once delay:250ms"
-    hx-swap="outerHTML"
+    sx-get="{{ (current_local_href ~ {'page': page_num + 1}|qs)|host }}"
+    sx-trigger="intersect once delay:250ms"
+    sx-swap="outerHTML"
   ></div>
 {% else %}
   {% if pages %}

blog/templates/_types/blog/desktop/menu/authors.html

@@ -13,11 +13,11 @@
           <a
             class="px-3 py-1 rounded {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
             href="{{ href }}"
-            hx-get="{{ href }}"
-            hx-target="#main-panel"
-            hx-select="{{hx_select_search}}"
-            hx-swap="outerHTML"
-            hx-push-url="true"
+            sx-get="{{ href }}"
+            sx-target="#main-panel"
+            sx-select="{{hx_select_search}}"
+            sx-swap="outerHTML"
+            sx-push-url="true"
           >
             Any author
           </a>
@@ -32,11 +32,11 @@
             <a
               class="flex items-center gap-2 px-3 py-1 rounded {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
               href="{{ href }}"
-              hx-get="{{ href }}"
-              hx-target="#main-panel"
-              hx-select="{{hx_select_search}}"
-              hx-swap="outerHTML"
-              hx-push-url="true"
+              sx-get="{{ href }}"
+              sx-target="#main-panel"
+              sx-select="{{hx_select_search}}"
+              sx-swap="outerHTML"
+              sx-push-url="true"
             >
 
               {{doauthor.author(author)}}

blog/templates/_types/blog/desktop/menu/tag_groups.html

@@ -11,11 +11,11 @@
           <a
             class="px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
             href="{{ href }}"
-            hx-get="{{ href }}"
-            hx-target="#main-panel"
-            hx-select="{{hx_select_search}}"
-            hx-swap="outerHTML"
-            hx-push-url="true"
+            sx-get="{{ href }}"
+            sx-target="#main-panel"
+            sx-select="{{hx_select_search}}"
+            sx-swap="outerHTML"
+            sx-push-url="true"
           >
             Any Topic
           </a>
@@ -31,11 +31,11 @@
             <a
               class="flex items-center gap-2 px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
               href="{{ href }}"
-              hx-get="{{ href }}"
-              hx-target="#main-panel"
-              hx-select="{{hx_select_search}}"
-              hx-swap="outerHTML"
-              hx-push-url="true"
+              sx-get="{{ href }}"
+              sx-target="#main-panel"
+              sx-select="{{hx_select_search}}"
+              sx-swap="outerHTML"
+              sx-push-url="true"
             >
 
               {% if group.feature_image %}

blog/templates/_types/blog/desktop/menu/tags.html

@@ -12,11 +12,11 @@
           <a
             class="px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
             href="{{ href }}"
-            hx-get="{{ href }}"
-            hx-target="#main-panel"
-            hx-select="{{hx_select_search}}"
-            hx-swap="outerHTML"
-            hx-push-url="true"
+            sx-get="{{ href }}"
+            sx-target="#main-panel"
+            sx-select="{{hx_select_search}}"
+            sx-swap="outerHTML"
+            sx-push-url="true"
           >
             Any Tag
           </a>
@@ -31,11 +31,11 @@
             <a
               class="flex items-center gap-2 px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
               href="{{ href }}"
-              hx-get="{{ href }}"
-              hx-target="#main-panel"
-              hx-select="{{hx_select_search}}"
-              hx-swap="outerHTML"
-              hx-push-url="true"
+              sx-get="{{ href }}"
+              sx-target="#main-panel"
+              sx-select="{{hx_select_search}}"
+              sx-swap="outerHTML"
+              sx-push-url="true"
             >
 
               {{dotag.tag(tag)}}

blog/templates/_types/blog/not_found.html

@@ -9,11 +9,11 @@
   </p>
   <a 
     href="{{ url_for('blog.index')|host }}"
-    hx-get="{{ url_for('blog.index')|host }}"
-    hx-target="#main-panel"
-    hx-select="{{ hx_select }}"
-    hx-swap="outerHTML"
-    hx-push-url="true"
+    sx-get="{{ url_for('blog.index')|host }}"
+    sx-target="#main-panel"
+    sx-select="{{ hx_select }}"
+    sx-swap="outerHTML"
+    sx-push-url="true"
     class="px-4 py-2 bg-stone-800 text-white rounded hover:bg-stone-700 transition-colors"
   >
     ← Back to Blog

blog/templates/_types/blog_drafts/_main_panel.html

@@ -5,11 +5,11 @@
     {% set new_href = url_for('blog.new_post')|host %}
     <a
       href="{{ new_href }}"
-      hx-get="{{ new_href }}"
-      hx-target="#main-panel"
-      hx-select="{{ hx_select_search }}"
-      hx-swap="outerHTML"
-      hx-push-url="true"
+      sx-get="{{ new_href }}"
+      sx-target="#main-panel"
+      sx-select="{{ hx_select_search }}"
+      sx-swap="outerHTML"
+      sx-push-url="true"
       class="px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"
     >
       <i class="fa fa-plus mr-1"></i> New Post
@@ -22,7 +22,7 @@
         {% set edit_href = url_for('blog.post.admin.edit', slug=draft.slug)|host %}
         <a
           href="{{ edit_href }}"
-          hx-boost="false"
+          sx-disable
           class="block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden p-4"
         >
           <div class="flex items-start justify-between gap-3">

blog/templates/_types/menu_items/_form.html

@@ -38,14 +38,14 @@
   {# Form for submission #}
   <form
     {% if menu_item %}
-      hx-put="{{ url_for('menu_items.update_menu_item_route', item_id=menu_item.id) }}"
+      sx-put="{{ url_for('menu_items.update_menu_item_route', item_id=menu_item.id) }}"
     {% else %}
-      hx-post="{{ url_for('menu_items.create_menu_item_route') }}"
+      sx-post="{{ url_for('menu_items.create_menu_item_route') }}"
     {% endif %}
-    hx-target="#menu-items-list"
-    hx-swap="innerHTML"
-    hx-include="#selected-post-id"
-    hx-on::after-request="if(event.detail.successful) { document.getElementById('menu-item-form').innerHTML = '' }"
+    sx-target="#menu-items-list"
+    sx-swap="innerHTML"
+    sx-include="#selected-post-id"
+    sx-on:afterRequest="if(event.detail.successful) { document.getElementById('menu-item-form').innerHTML = '' }"
     class="space-y-4">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
     {# Form actions #}
@@ -74,10 +74,10 @@
     <input
       type="text"
       placeholder="Search for a page... (or leave blank for all)"
-      hx-get="{{ url_for('menu_items.search_pages_route') }}"
-      hx-trigger="keyup changed delay:300ms, focus once"
-      hx-target="#page-search-results"
-      hx-swap="innerHTML"
+      sx-get="{{ url_for('menu_items.search_pages_route') }}"
+      sx-trigger="keyup changed delay:300ms, focus once"
+      sx-target="#page-search-results"
+      sx-swap="innerHTML"
       name="q"
       id="page-search-input"
       class="w-full px-3 py-2 border border-stone-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />

blog/templates/_types/menu_items/_list.html

@@ -32,9 +32,9 @@
           <div class="flex gap-2 flex-shrink-0">
             <button
               type="button"
-              hx-get="{{ url_for('menu_items.edit_menu_item', item_id=item.id) }}"
-              hx-target="#menu-item-form"
-              hx-swap="innerHTML"
+              sx-get="{{ url_for('menu_items.edit_menu_item', item_id=item.id) }}"
+              sx-target="#menu-item-form"
+              sx-swap="innerHTML"
               class="px-3 py-1 text-sm bg-stone-200 hover:bg-stone-300 rounded">
               <i class="fa fa-edit"></i> Edit
             </button>
@@ -47,11 +47,11 @@
               data-confirm-confirm-text="Yes, delete"
               data-confirm-cancel-text="Cancel"
               data-confirm-event="confirmed"
-              hx-delete="{{ url_for('menu_items.delete_menu_item_route', item_id=item.id) }}"
-              hx-trigger="confirmed"
-              hx-target="#menu-items-list"
-              hx-swap="innerHTML"
-              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
+              sx-delete="{{ url_for('menu_items.delete_menu_item_route', item_id=item.id) }}"
+              sx-trigger="confirmed"
+              sx-target="#menu-items-list"
+              sx-swap="innerHTML"
+              sx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
               class="px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800">
               <i class="fa fa-trash"></i> Delete
             </button>

blog/templates/_types/menu_items/_main_panel.html

@@ -2,9 +2,9 @@
   <div class="mb-6 flex justify-end items-center">
     <button
       type="button"
-      hx-get="{{ url_for('menu_items.new_menu_item') }}"
-      hx-target="#menu-item-form"
-      hx-swap="innerHTML"
+      sx-get="{{ url_for('menu_items.new_menu_item') }}"
+      sx-target="#menu-item-form"
+      sx-swap="innerHTML"
       class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
       <i class="fa fa-plus"></i> Add Menu Item
     </button>

blog/templates/_types/menu_items/_nav_oob.html

@@ -2,18 +2,18 @@
 {% set _first_seg = request.path.strip('/').split('/')[0] %}
 <div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
      id="menu-items-nav-wrapper"
-     hx-swap-oob="outerHTML">
+     sx-swap-oob="outerHTML">
   {% from 'macros/scrolling_menu.html' import scrolling_menu with context %}
   {% call(item) scrolling_menu('menu-items-container', menu_items) %}
     {% set _href = _app_slugs.get(item.slug, blog_url('/' + item.slug + '/')) %}
     <a
       href="{{ _href }}"
       {% if item.slug not in _app_slugs %}
-        hx-get="/{{ item.slug }}/"
-        hx-target="#main-panel"
-        hx-select="{{ hx_select_search }}"
-        hx-swap="outerHTML"
-        hx-push-url="true"
+        sx-get="/{{ item.slug }}/"
+        sx-target="#main-panel"
+        sx-select="{{ hx_select_search }}"
+        sx-swap="outerHTML"
+        sx-push-url="true"
       {% endif %}
       aria-selected="{{ 'true' if (item.slug == _first_seg or item.slug == app_name) else 'false' }}"
       class="{{styles.nav_button}}"

blog/templates/_types/menu_items/_page_search_results.html

@@ -28,10 +28,10 @@
     {# Infinite scroll sentinel #}
     {% if has_more %}
       <div
-        hx-get="{{ url_for('menu_items.search_pages_route') }}"
-        hx-trigger="intersect once"
-        hx-swap="outerHTML"
-        hx-vals='{"q": "{{ query }}", "page": {{ page + 1 }}}'
+        sx-get="{{ url_for('menu_items.search_pages_route') }}"
+        sx-trigger="intersect once"
+        sx-swap="outerHTML"
+        sx-vals='{"q": "{{ query }}", "page": {{ page + 1 }}}'
         class="p-3 text-center text-sm text-stone-400">
         <i class="fa fa-spinner fa-spin"></i> Loading more...
       </div>

blog/templates/_types/post/_entry_container.html

@@ -1,13 +1,7 @@
 <div id="associated-entries-container"
      class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"
      style="scroll-behavior: smooth;"
-     _="on load or scroll
-        -- Show arrows if content overflows (desktop only)
-        if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth
-          remove .hidden from .entries-nav-arrow
-        else
-          add .hidden to .entries-nav-arrow
-        end">
+     data-scroll-arrows="entries-nav-arrow">
   <div class="flex flex-col sm:flex-row gap-1">
     {% include '_types/post/_entry_items.html' with context %}
   </div>

blog/templates/_types/post/_entry_items.html

@@ -29,10 +29,10 @@
 {# Load more entries one at a time until container is full #}
 {% if has_more_entries %}
   <div id="entries-load-sentinel-{{ current_page }}"
-       hx-get="{{ url_for('blog.post.get_entries', slug=post.slug, page=current_page + 1) }}"
-       hx-trigger="intersect once"
-       hx-swap="beforebegin"
-       _="on htmx:afterRequest trigger scroll on #associated-entries-container"
+       sx-get="{{ url_for('blog.post.get_entries', slug=post.slug, page=current_page + 1) }}"
+       sx-trigger="intersect once"
+       sx-swap="beforebegin"
+       sx-on:afterSwap="document.querySelector('#associated-entries-container').dispatchEvent(new Event('scroll'))"
        class="flex-shrink-0 w-1">
   </div>
 {% endif %}

blog/templates/_types/post/_main_panel.html

@@ -12,11 +12,11 @@
           {% set edit_href = url_for('blog.post.admin.edit', slug=post.slug)|host %}
           <a
             href="{{ edit_href }}"
-            hx-get="{{ edit_href }}"
-            hx-target="#main-panel"
-            hx-select="{{hx_select_search}}"
-            hx-swap="outerHTML"
-            hx-push-url="true"
+            sx-get="{{ edit_href }}"
+            sx-target="#main-panel"
+            sx-select="{{hx_select_search}}"
+            sx-swap="outerHTML"
+            sx-push-url="true"
             class="inline-block px-3 py-1 rounded-full text-sm font-semibold bg-stone-700 text-white hover:bg-stone-800 transition-colors"
           >
             <i class="fa fa-pencil mr-1"></i> Edit

blog/templates/_types/post/admin/_associated_entries.html

@@ -15,12 +15,12 @@
               data-confirm-confirm-text="Yes, remove it"
               data-confirm-cancel-text="Cancel"
               data-confirm-event="confirmed"
-              hx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=entry.id) }}"
-              hx-trigger="confirmed"
-              hx-target="#associated-entries-list"
-              hx-swap="outerHTML"
-              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
-              _="on htmx:afterRequest trigger entryToggled on body"
+              sx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=entry.id) }}"
+              sx-trigger="confirmed"
+              sx-target="#associated-entries-list"
+              sx-swap="outerHTML"
+              sx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
+              sx-on:afterSwap="document.body.dispatchEvent(new CustomEvent('entryToggled'))"
             >
               <div class="flex items-center justify-between gap-3">
                 {% if calendar.post.feature_image %}

blog/templates/_types/post/admin/_calendar_view.html

@@ -1,15 +1,15 @@
 <div id="calendar-view-{{ calendar.id }}"
-     hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=year, month=month) }}"
-     hx-trigger="entryToggled from:body"
-     hx-swap="outerHTML">
+     sx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=year, month=month) }}"
+     sx-trigger="entryToggled from:body"
+     sx-swap="outerHTML">
   {# Month/year navigation #}
   <header class="flex items-center justify-center mb-4">
     <nav class="flex items-center gap-2 text-xl">
-      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ prev_year }}&month={{ month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=prev_year, month=month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&laquo;</a>
-      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ prev_month_year }}&month={{ prev_month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=prev_month_year, month=prev_month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&lsaquo;</a>
+      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ prev_year }}&month={{ month }}" sx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=prev_year, month=month) }}" sx-target="#calendar-view-{{ calendar.id }}" sx-swap="outerHTML">&laquo;</a>
+      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ prev_month_year }}&month={{ prev_month }}" sx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=prev_month_year, month=prev_month) }}" sx-target="#calendar-view-{{ calendar.id }}" sx-swap="outerHTML">&lsaquo;</a>
       <div class="px-3 font-medium">{{ month_name }} {{ year }}</div>
-      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ next_month_year }}&month={{ next_month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=next_month_year, month=next_month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&rsaquo;</a>
-      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ next_year }}&month={{ month }}" hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=next_year, month=month) }}" hx-target="#calendar-view-{{ calendar.id }}" hx-swap="outerHTML">&raquo;</a>
+      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ next_month_year }}&month={{ next_month }}" sx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=next_month_year, month=next_month) }}" sx-target="#calendar-view-{{ calendar.id }}" sx-swap="outerHTML">&rsaquo;</a>
+      <a class="px-2 py-1 hover:bg-stone-100 rounded" href="?calendar_id={{ calendar.id }}&year={{ next_year }}&month={{ month }}" sx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id, year=next_year, month=month) }}" sx-target="#calendar-view-{{ calendar.id }}" sx-swap="outerHTML">&raquo;</a>
     </nav>
   </header>
 
@@ -45,12 +45,12 @@
                         data-confirm-confirm-text="Yes, remove it"
                         data-confirm-cancel-text="Cancel"
                         data-confirm-event="confirmed"
-                        hx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=e.id) }}"
-                        hx-trigger="confirmed"
-                        hx-target="#associated-entries-list"
-                        hx-swap="outerHTML"
-                        hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
-                        _="on htmx:afterRequest trigger entryToggled on body"
+                        sx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=e.id) }}"
+                        sx-trigger="confirmed"
+                        sx-target="#associated-entries-list"
+                        sx-swap="outerHTML"
+                        sx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
+                        sx-on:afterSwap="document.body.dispatchEvent(new CustomEvent('entryToggled'))"
                       >
                         <i class="fa fa-times"></i>
                       </button>
@@ -67,12 +67,12 @@
                       data-confirm-confirm-text="Yes, add it"
                       data-confirm-cancel-text="Cancel"
                       data-confirm-event="confirmed"
-                      hx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=e.id) }}"
-                      hx-trigger="confirmed"
-                      hx-target="#associated-entries-list"
-                      hx-swap="outerHTML"
-                      hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
-                      _="on htmx:afterRequest trigger entryToggled on body"
+                      sx-post="{{ url_for('blog.post.admin.toggle_entry', slug=post.slug, entry_id=e.id) }}"
+                      sx-trigger="confirmed"
+                      sx-target="#associated-entries-list"
+                      sx-swap="outerHTML"
+                      sx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
+                      sx-on:afterSwap="document.body.dispatchEvent(new CustomEvent('entryToggled'))"
                     >
                       <span class="truncate block">{{ e.name }}</span>
                     </button>

blog/templates/_types/post/admin/_features_panel.html

@@ -3,11 +3,11 @@
   <h3 class="text-lg font-semibold text-stone-800">Page Features</h3>
 
   <form
-    hx-put="{{ url_for('blog.post.admin.update_features', slug=post.slug)|host }}"
-    hx-target="#features-panel"
-    hx-swap="outerHTML"
-    hx-headers='{"Content-Type": "application/json"}'
-    hx-ext="json-enc"
+    sx-put="{{ url_for('blog.post.admin.update_features', slug=post.slug)|host }}"
+    sx-target="#features-panel"
+    sx-swap="outerHTML"
+    sx-headers='{"Content-Type": "application/json"}'
+    sx-encoding="json"
     class="space-y-3"
   >
     <label class="flex items-center gap-3 cursor-pointer">
@@ -17,7 +17,7 @@
         value="true"
         {{ 'checked' if features.get('calendar') }}
         class="h-5 w-5 rounded border-stone-300 text-blue-600 focus:ring-blue-500"
-        _="on change trigger submit on closest <form/>"
+        onchange="this.closest('form').requestSubmit()"
       >
       <span class="text-sm text-stone-700">
         <i class="fa fa-calendar text-blue-600 mr-1"></i>
@@ -32,7 +32,7 @@
         value="true"
         {{ 'checked' if features.get('market') }}
         class="h-5 w-5 rounded border-stone-300 text-green-600 focus:ring-green-500"
-        _="on change trigger submit on closest <form/>"
+        onchange="this.closest('form').requestSubmit()"
       >
       <span class="text-sm text-stone-700">
         <i class="fa fa-shopping-bag text-green-600 mr-1"></i>
@@ -53,9 +53,9 @@
     </p>
 
     <form
-      hx-put="{{ url_for('blog.post.admin.update_sumup', slug=post.slug)|host }}"
-      hx-target="#features-panel"
-      hx-swap="outerHTML"
+      sx-put="{{ url_for('blog.post.admin.update_sumup', slug=post.slug)|host }}"
+      sx-target="#features-panel"
+      sx-swap="outerHTML"
       class="space-y-3"
     >
       <div>

blog/templates/_types/post/admin/_markets_panel.html

@@ -10,10 +10,10 @@
         <span class="text-stone-400 text-sm ml-2">/{{ m.slug }}/</span>
       </div>
       <button
-        hx-delete="{{ url_for('blog.post.admin.delete_market', slug=post.slug, market_slug=m.slug) }}"
-        hx-target="#markets-panel"
-        hx-swap="outerHTML"
-        hx-confirm="Delete market '{{ m.name }}'?"
+        sx-delete="{{ url_for('blog.post.admin.delete_market', slug=post.slug, market_slug=m.slug) }}"
+        sx-target="#markets-panel"
+        sx-swap="outerHTML"
+        sx-confirm="Delete market '{{ m.name }}'?"
         class="text-red-600 hover:text-red-800 text-sm"
       >Delete</button>
     </li>
@@ -24,9 +24,9 @@
   {% endif %}
 
   <form
-    hx-post="{{ url_for('blog.post.admin.create_market', slug=post.slug) }}"
-    hx-target="#markets-panel"
-    hx-swap="outerHTML"
+    sx-post="{{ url_for('blog.post.admin.create_market', slug=post.slug) }}"
+    sx-target="#markets-panel"
+    sx-swap="outerHTML"
     class="flex gap-2"
   >
     <input

blog/templates/_types/post/admin/_nav_entries.html

@@ -3,8 +3,7 @@
     <button
       class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
       aria-label="Scroll left"
-      _="on click
-         set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200">
+      onclick="document.getElementById('associated-items-container').scrollLeft -= 200">
       <i class="fa fa-chevron-left"></i>
     </button>
 
@@ -12,15 +11,8 @@
     <div id="associated-items-container"
          class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"
          style="scroll-behavior: smooth;"
-         _="on load or scroll
-            -- Show arrows if content overflows (desktop only)
-            if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth
-              remove .hidden from .entries-nav-arrow
-              add .flex to .entries-nav-arrow
-            else
-              add .hidden to .entries-nav-arrow
-              remove .flex from .entries-nav-arrow
-            end">
+         data-scroll-arrows="entries-nav-arrow"
+         onscroll="(function(el){var arrows=document.getElementsByClassName('entries-nav-arrow');var show=window.innerWidth>=640&&el.scrollWidth>el.clientWidth;for(var i=0;i<arrows.length;i++){if(show){arrows[i].classList.remove('hidden');arrows[i].classList.add('flex')}else{arrows[i].classList.add('hidden');arrows[i].classList.remove('flex')}}})(this)">
       <div class="flex flex-col sm:flex-row gap-1">
         {% for wdata in container_nav_widgets %}
           {% with ctx=wdata.ctx %}
@@ -44,7 +36,6 @@
     <button
       class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
       aria-label="Scroll right"
-      _="on click
-         set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200">
+      onclick="document.getElementById('associated-items-container').scrollLeft += 200">
       <i class="fa fa-chevron-right"></i>
     </button>

blog/templates/_types/post_entries/_main_panel.html

@@ -8,14 +8,7 @@
     <h3 class="text-lg font-semibold">Browse Calendars</h3>
     {% for calendar in all_calendars %}
       <details class="border rounded-lg bg-white"
-               _="on toggle
-                  if my.open
-                    for other in <details[open]/>
-                      if other is not me
-                        set other.open to false
-                      end
-                    end
-                  end">
+               data-toggle-group="calendar-browser">
         <summary class="p-4 cursor-pointer hover:bg-stone-50 flex items-center gap-3">
           {% if calendar.post.feature_image %}
             <img src="{{ calendar.post.feature_image }}"
@@ -35,9 +28,9 @@
           </div>
         </summary>
         <div class="p-4 border-t"
-             hx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id) }}"
-             hx-trigger="intersect once"
-             hx-swap="innerHTML">
+             sx-get="{{ url_for('blog.post.admin.calendar_view', slug=post.slug, calendar_id=calendar.id) }}"
+             sx-trigger="intersect once"
+             sx-swap="innerHTML">
           <div class="text-sm text-stone-400">Loading calendar...</div>
         </div>
       </details>

blog/templates/_types/root/settings/cache/_main_panel.html

@@ -1,10 +1,10 @@
   <div class="max-w-2xl mx-auto px-4 py-6 space-y-6">
     <div class="flex flex-col md:flex-row gap-3 items-start">
       <form
-        hx-post="{{ url_for('settings.cache_clear') }}"
-        hx-trigger="submit"
-        hx-target="#cache-status"
-        hx-swap="innerHTML"
+        sx-post="{{ url_for('settings.cache_clear') }}"
+        sx-trigger="submit"
+        sx-target="#cache-status"
+        sx-swap="innerHTML"
       >
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <button class="border rounded px-4 py-2 bg-stone-800 text-white text-sm" type="submit">Clear cache</button>

blog/templates/_types/snippets/_list.html

@@ -29,10 +29,10 @@
           {% if is_admin %}
             <select
               name="visibility"
-              hx-patch="{{ url_for('snippets.patch_visibility', snippet_id=s.id) }}"
-              hx-target="#snippets-list"
-              hx-swap="innerHTML"
-              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
+              sx-patch="{{ url_for('snippets.patch_visibility', snippet_id=s.id) }}"
+              sx-target="#snippets-list"
+              sx-swap="innerHTML"
+              sx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
               class="text-sm border border-stone-300 rounded px-2 py-1"
             >
               {% for v in ['private', 'shared', 'admin'] %}
@@ -52,11 +52,11 @@
               data-confirm-confirm-text="Yes, delete"
               data-confirm-cancel-text="Cancel"
               data-confirm-event="confirmed"
-              hx-delete="{{ url_for('snippets.delete_snippet', snippet_id=s.id) }}"
-              hx-trigger="confirmed"
-              hx-target="#snippets-list"
-              hx-swap="innerHTML"
-              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
+              sx-delete="{{ url_for('snippets.delete_snippet', snippet_id=s.id) }}"
+              sx-trigger="confirmed"
+              sx-target="#snippets-list"
+              sx-swap="innerHTML"
+              sx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
               class="px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0">
               <i class="fa fa-trash"></i> Delete
             </button>

blog/templates/macros/scrolling_menu.html

@@ -19,8 +19,7 @@
     <button
       class="scrolling-menu-arrow-{{ container_id }} hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
       aria-label="Scroll left"
-      _="on click
-         set #{{ container_id }}.scrollLeft to #{{ container_id }}.scrollLeft - 200">
+      onclick="document.getElementById('{{ container_id }}').scrollLeft -= 200">
       <i class="fa fa-chevron-left"></i>
     </button>
 
@@ -28,15 +27,8 @@
     <div id="{{ container_id }}"
          class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none {{ container_class }}"
          style="scroll-behavior: smooth;"
-         _="on load or scroll
-            -- Show arrows if content overflows (desktop only)
-            if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth
-              remove .hidden from .scrolling-menu-arrow-{{ container_id }}
-              add .flex to .scrolling-menu-arrow-{{ container_id }}
-            else
-              add .hidden to .scrolling-menu-arrow-{{ container_id }}
-              remove .flex from .scrolling-menu-arrow-{{ container_id }}
-            end">
+         data-scroll-arrows="scrolling-menu-arrow-{{ container_id }}"
+         onscroll="(function(el){var cls='scrolling-menu-arrow-{{ container_id }}';var arrows=document.getElementsByClassName(cls);var show=window.innerWidth>=640&&el.scrollWidth>el.clientWidth;for(var i=0;i<arrows.length;i++){if(show){arrows[i].classList.remove('hidden');arrows[i].classList.add('flex')}else{arrows[i].classList.add('hidden');arrows[i].classList.remove('flex')}}})(this)">
       <div class="flex flex-col sm:flex-row gap-1 {{ wrapper_class }}">
         {% for item in items %}
           <div class="{{ item_class }}">
@@ -60,8 +52,7 @@
     <button
       class="scrolling-menu-arrow-{{ container_id }} hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
       aria-label="Scroll right"
-      _="on click
-         set #{{ container_id }}.scrollLeft to #{{ container_id }}.scrollLeft + 200">
+      onclick="document.getElementById('{{ container_id }}').scrollLeft += 200">
       <i class="fa fa-chevron-right"></i>
     </button>
   {% endif %}