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>

shared/sexp/templates/cards.sexp

@@ -1,14 +1,14 @@
 (defcomp ~post-card (&key title slug href feature-image excerpt
                           status published-at updated-at publish-requested
-                          hx-select like-html widgets-html at-bar-html)
+                          hx-select like widgets at-bar)
   (article :class "border-b pb-6 last:border-b-0 relative"
-    (when like-html (raw! like-html))
+    (when like like)
     (a :href href
-       :hx-get href
-       :hx-target "#main-panel"
-       :hx-select hx-select
-       :hx-swap "outerHTML"
-       :hx-push-url "true"
+       :sx-get href
+       :sx-target "#main-panel"
+       :sx-select hx-select
+       :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"
         (h2 :class "text-4xl font-bold text-stone-900" title)
@@ -28,8 +28,8 @@
           (img :src feature-image :alt "" :class "rounded-lg w-full object-cover")))
       (when excerpt
         (p :class "text-stone-700 text-lg leading-relaxed text-center" excerpt)))
-    (when widgets-html (raw! widgets-html))
-    (when at-bar-html (raw! at-bar-html))))
+    (when widgets widgets)
+    (when at-bar at-bar)))
 
 (defcomp ~order-summary-card (&key order-id created-at description status currency total-amount)
   (div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6 space-y-2 text-xs sm:text-sm text-stone-800"

shared/sexp/templates/controls.sexp

@@ -4,21 +4,21 @@
     (input :id "search-mobile"
            :type "text" :name "search" :aria-label "search"
            :class "text-base md:text-sm col-span-5 rounded-md px-3 py-2 mb-2 w-full min-w-0 max-w-full border-2 border-stone-200 placeholder-shown:border-stone-200 [&:not(:placeholder-shown)]:border-yellow-200"
-           :hx-preserve true
+           :sx-preserve true
            :value (or search "")
            :placeholder "search"
-           :hx-trigger "input changed delay:300ms"
-           :hx-target "#main-panel"
-           :hx-select (str (or hx-select "#main-panel") ", #search-mobile-wrapper, #search-desktop-wrapper")
-           :hx-get current-local-href
-           :hx-swap "outerHTML"
-           :hx-push-url "true"
-           :hx-headers search-headers-mobile
-           :hx-sync "this:replace"
+           :sx-trigger "input changed delay:300ms"
+           :sx-target "#main-panel"
+           :sx-select (str (or hx-select "#main-panel") ", #search-mobile-wrapper, #search-desktop-wrapper")
+           :sx-get current-local-href
+           :sx-swap "outerHTML"
+           :sx-push-url "true"
+           :sx-headers search-headers-mobile
+           :sx-sync "this:replace"
            :autocomplete "off")
     (div :id "search-count-mobile" :aria-label "search count"
          :class (if (not search-count) "text-xl text-red-500" "")
-      (when search (raw! (str search-count))))))
+      (when search (str search-count)))))
 
 (defcomp ~search-desktop (&key current-local-href search search-count hx-select search-headers-desktop)
   (div :id "search-desktop-wrapper"
@@ -26,23 +26,23 @@
     (input :id "search-desktop"
            :type "text" :name "search" :aria-label "search"
            :class "w-full mx-1 my-3 px-3 py-2 text-md rounded-xl border-2 shadow-sm border-white placeholder-shown:border-white [&:not(:placeholder-shown)]:border-yellow-200"
-           :hx-preserve true
+           :sx-preserve true
            :value (or search "")
            :placeholder "search"
-           :hx-trigger "input changed delay:300ms"
-           :hx-target "#main-panel"
-           :hx-select (str (or hx-select "#main-panel") ", #search-mobile-wrapper, #search-desktop-wrapper")
-           :hx-get current-local-href
-           :hx-swap "outerHTML"
-           :hx-push-url "true"
-           :hx-headers search-headers-desktop
-           :hx-sync "this:replace"
+           :sx-trigger "input changed delay:300ms"
+           :sx-target "#main-panel"
+           :sx-select (str (or hx-select "#main-panel") ", #search-mobile-wrapper, #search-desktop-wrapper")
+           :sx-get current-local-href
+           :sx-swap "outerHTML"
+           :sx-push-url "true"
+           :sx-headers search-headers-desktop
+           :sx-sync "this:replace"
            :autocomplete "off")
     (div :id "search-count-desktop" :aria-label "search count"
          :class (if (not search-count) "text-xl text-red-500" "")
-      (when search (raw! (str search-count))))))
+      (when search (str search-count)))))
 
-(defcomp ~mobile-filter (&key filter-summary-html action-buttons-html filter-details-html)
+(defcomp ~mobile-filter (&key filter-summary action-buttons filter-details)
   (details :class "group/filter p-2 md:hidden" :data-toggle-group "mobile-panels"
     (summary :class "bg-white/90"
       (div :class "flex flex-row items-start"
@@ -57,58 +57,30 @@
         (div :id "filter-summary-mobile"
              :class "flex-1 md:hidden grid grid-cols-12 items-center gap-3"
           (div :class "flex flex-col items-start gap-2"
-            (raw! filter-summary-html)))))
-    (raw! (or action-buttons-html ""))
+            (when filter-summary filter-summary)))))
+    (when action-buttons action-buttons)
     (div :id "filter-details-mobile" :style "display:contents"
-      (raw! (or filter-details-html "")))))
+      (when filter-details filter-details))))
 
 (defcomp ~infinite-scroll (&key url page total-pages id-prefix colspan)
   (if (< page total-pages)
-    (raw! (str
-      "<tr id=\"" id-prefix "-sentinel-" page "\""
-      " hx-get=\"" url "\""
-      " 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 sentinel:retry "
-          "remove .hidden from .js-loading in me "
-          "add .hidden to .js-neterr in me "
-          "set me.style.pointerEvents to 'none' "
-          "set me.style.opacity to '0' "
-          "trigger htmx:consume on me "
-          "call htmx.trigger(me, 'intersect') "
-        "end "
-        "def backoff() "
-          "add .hidden to .js-loading in me "
-          "remove .hidden from .js-neterr in me "
-          "set myMs to Number(me.dataset.retryMs) "
-          "if myMs < 10000 then set me.dataset.retryMs to myMs * 2 end "
-          "js setTimeout(() => htmx.trigger(me, 'sentinel:retry'), myMs) "
-        "end "
-        "on htmx:beforeRequest "
-          "set me.style.pointerEvents to 'none' "
-          "set me.style.opacity to '0' "
-        "end "
-        "on htmx:afterSwap set me.dataset.retryMs to 1000 end "
-        "on htmx:sendError call backoff() "
-        "on htmx:responseError call backoff() "
-        "on htmx:timeout call backoff()"
-      "\""
-      " role=\"status\" aria-live=\"polite\" aria-hidden=\"true\">"
-      "<td colspan=\"" colspan "\" class=\"px-3 py-4\">"
-        "<div class=\"block md:hidden h-[60vh] js-mobile-sentinel\">"
-          "<div class=\"js-loading text-center text-xs text-stone-400\">loading\u2026 " page " / " total-pages "</div>"
-          "<div class=\"js-neterr hidden flex h-full items-center justify-center\"></div>"
-        "</div>"
-        "<div class=\"hidden md:block h-[30vh] js-desktop-sentinel\">"
-          "<div class=\"js-loading text-center text-xs text-stone-400\">loading\u2026 " page " / " total-pages "</div>"
-          "<div class=\"js-neterr hidden inset-0 grid place-items-center p-4\"></div>"
-        "</div>"
-      "</td></tr>"))
-    (raw! (str
-      "<tr><td colspan=\"" colspan "\" class=\"px-3 py-4 text-center text-xs text-stone-400\">End of results</td></tr>"))))
+    (tr :id (str id-prefix "-sentinel-" page)
+        :sx-get url
+        :sx-trigger "intersect once delay:250ms"
+        :sx-swap "outerHTML"
+        :sx-retry "exponential:1000:30000"
+        :role "status" :aria-live "polite" :aria-hidden "true"
+      (td :colspan colspan :class "px-3 py-4"
+        (div :class "block md:hidden h-[60vh] js-mobile-sentinel"
+          (div :class "sx-indicator js-loading text-center text-xs text-stone-400"
+            (str "loading\u2026 " page " / " total-pages))
+          (div :class "js-neterr hidden flex h-full items-center justify-center"))
+        (div :class "hidden md:block h-[30vh] js-desktop-sentinel"
+          (div :class "sx-indicator js-loading text-center text-xs text-stone-400"
+            (str "loading\u2026 " page " / " total-pages))
+          (div :class "js-neterr hidden inset-0 grid place-items-center p-4"))))
+    (tr (td :colspan colspan :class "px-3 py-4 text-center text-xs text-stone-400"
+      "End of results"))))
 
 (defcomp ~status-pill (&key status size)
   (let* ((s (or status "pending"))

shared/sexp/templates/fragments.sexp

@@ -3,7 +3,7 @@
      :class "block rounded border border-stone-200 bg-white hover:bg-stone-50 transition-colors no-underline"
      :data-fragment "link-card"
      :data-app data-app
-     :data-hx-disable true
+     :sx-disable true
     (div :class "flex flex-row items-start gap-3 p-3"
       (if image
         (img :src image :alt "" :class "flex-shrink-0 w-16 h-16 rounded object-cover")
@@ -18,7 +18,7 @@
 
 (defcomp ~cart-mini (&key cart-count blog-url cart-url oob)
   (div :id "cart-mini"
-       :hx-swap-oob oob
+       :sx-swap-oob oob
     (if (= cart-count 0)
       (div :class "h-12 w-12 rounded-full overflow-hidden border border-stone-300 flex-shrink-0"
         (a :href blog-url
@@ -58,5 +58,5 @@
   (div :class "relative nav-group"
     (a :href href
        :class "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black p-3"
-       :data-hx-disable true
+       :sx-disable true
       label)))

shared/sexp/templates/layout.sexp

@@ -10,9 +10,7 @@
     (link :rel "stylesheet" :type "text/css" :href (str asset-url "/styles/basics.css"))
     (link :rel "stylesheet" :type "text/css" :href (str asset-url "/styles/cards.css"))
     (link :rel "stylesheet" :type "text/css" :href (str asset-url "/styles/blog-content.css"))
-    (script :src "https://unpkg.com/htmx.org@2.0.8")
-    (meta :name "htmx-config" :content "{\"selfRequestsOnly\":false}")
-    (script :src "https://unpkg.com/hyperscript.org@0.9.12")
+    (meta :name "csrf-token" :content "")
     (script :src "https://cdn.tailwindcss.com")
     (link :rel "stylesheet" :href (str asset-url "/fontawesome/css/all.min.css"))
     (link :rel "stylesheet" :href (str asset-url "/fontawesome/css/v4-shims.min.css"))
@@ -33,7 +31,8 @@
       ".clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}"
       ".no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}"
       "details.group{overflow:hidden}details.group>summary{list-style:none}details.group>summary::-webkit-details-marker{display:none}"
-      ".htmx-indicator{display:none}.htmx-request .htmx-indicator{display:inline-flex}"
+      ".sx-indicator{display:none}.sx-request .sx-indicator{display:inline-flex}"
+      ".sx-error .sx-indicator{display:none}.sx-loading .sx-indicator{display:inline-flex}"
       ".js-wrap.open .js-pop{display:block}.js-wrap.open .js-backdrop{display:block}")))
 
 (defcomp ~app-layout (&key title asset-url meta-html menu-colour
@@ -55,7 +54,7 @@
                          :class (str "flex items-start gap-2 p-1 bg-" colour "-500")
                       (div :class "flex flex-col w-full items-center"
                         (when header-rows-html (raw! header-rows-html))))))
-                (div :id "root-menu" :hx-swap-oob "outerHTML" :class "md:hidden"
+                (div :id "root-menu" :sx-swap-oob "outerHTML" :class "md:hidden"
                   (when menu-html (raw! menu-html)))))
             (div :id "filter"
               (when filter-html (raw! filter-html)))
@@ -73,20 +72,60 @@
           (script :src (str asset-url "/scripts/sexp.js"))
           (script :src (str asset-url "/scripts/body.js")))))))
 
+(defcomp ~app-body (&key header-rows filter aside menu content)
+  (div :class "max-w-screen-2xl mx-auto py-1 px-1"
+    (div :class "w-full"
+      (details :class "group/root p-2" :data-toggle-group "mobile-panels"
+        (summary
+          (header :class "z-50"
+            (div :id "root-header-summary"
+                 :class "flex items-start gap-2 p-1 bg-sky-500"
+              (div :class "flex flex-col w-full items-center"
+                (when header-rows header-rows)))))
+        (div :id "root-menu" :sx-swap-oob "outerHTML" :class "md:hidden"
+          (when menu menu))))
+    (div :id "filter"
+      (when filter filter))
+    (main :id "root-panel" :class "max-w-full"
+      (div :class "md:min-h-0"
+        (div :class "flex flex-row md:h-full md:min-h-0"
+          (aside :id "aside"
+                 :class "hidden md:flex md:flex-col max-w-xs md:h-full md:min-h-0 mr-3"
+            (when aside aside))
+          (section :id "main-panel"
+                   :class "flex-1 md:h-full md:min-h-0 overflow-y-auto overscroll-contain js-grid-viewport"
+            (when content content)
+            (div :class "pb-8")))))))
+
 (defcomp ~oob-response (&key oobs-html filter-html aside-html menu-html content-html)
   (<>
     (when oobs-html (raw! oobs-html))
-    (div :id "filter" :hx-swap-oob "outerHTML"
+    (div :id "filter" :sx-swap-oob "outerHTML"
       (when filter-html (raw! filter-html)))
-    (aside :id "aside" :hx-swap-oob "outerHTML"
+    (aside :id "aside" :sx-swap-oob "outerHTML"
            :class "hidden md:flex md:flex-col max-w-xs md:h-full md:min-h-0 mr-3"
       (when aside-html (raw! aside-html)))
-    (div :id "root-menu" :hx-swap-oob "outerHTML" :class "md:hidden"
+    (div :id "root-menu" :sx-swap-oob "outerHTML" :class "md:hidden"
       (when menu-html (raw! menu-html)))
     (section :id "main-panel"
              :class "flex-1 md:h-full md:min-h-0 overflow-y-auto overscroll-contain js-grid-viewport"
       (when content-html (raw! content-html)))))
 
+;; Sexp-native OOB response — accepts nested sexp expressions, no raw!
+(defcomp ~oob-sexp (&key oobs filter aside menu content)
+  (<>
+    (when oobs oobs)
+    (div :id "filter" :sx-swap-oob "outerHTML"
+      (when filter filter))
+    (aside :id "aside" :sx-swap-oob "outerHTML"
+           :class "hidden md:flex md:flex-col max-w-xs md:h-full md:min-h-0 mr-3"
+      (when aside aside))
+    (div :id "root-menu" :sx-swap-oob "outerHTML" :class "md:hidden"
+      (when menu menu))
+    (section :id "main-panel"
+             :class "flex-1 md:h-full md:min-h-0 overflow-y-auto overscroll-contain js-grid-viewport"
+      (when content content))))
+
 (defcomp ~hamburger ()
   (div :class "md:hidden bg-stone-200 rounded"
     (svg :class "h-12 w-12 transition-transform group-open/root:hidden block self-start"
@@ -102,7 +141,7 @@
                            settings-url is-admin oob)
   (<>
     (div :id "root-row"
-         :hx-swap-oob (if oob "outerHTML" nil)
+         :sx-swap-oob (if oob "outerHTML" nil)
          :class "flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-sky-500"
       (div :class "w-full flex flex-row items-top"
         (when cart-mini-html (raw! cart-mini-html))
@@ -127,15 +166,15 @@
          (shade (str (- 500 (* lv 100)))))
     (<>
       (div :id id
-           :hx-swap-oob (if oob "outerHTML" nil)
+           :sx-swap-oob (if oob "outerHTML" nil)
            :class (str "flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-" c "-" shade)
         (div :class "relative nav-group"
           (a :href link-href
-             :hx-get (if external nil link-href)
-             :hx-target (if external nil "#main-panel")
-             :hx-select (if external nil (or hx-select "#main-panel"))
-             :hx-swap (if external nil "outerHTML")
-             :hx-push-url (if external nil "true")
+             :sx-get (if external nil link-href)
+             :sx-target (if external nil "#main-panel")
+             :sx-select (if external nil (or hx-select "#main-panel"))
+             :sx-swap (if external nil "outerHTML")
+             :sx-push-url (if external nil "true")
              :class "w-full whitespace-normal flex items-center gap-2 font-bold text-2xl px-3 py-2"
             (when icon (i :class icon :aria-hidden "true"))
             (if link-label-html (raw! link-label-html)
@@ -158,13 +197,75 @@
     (span count)))
 
 (defcomp ~oob-header (&key parent-id child-id row-html)
-  (div :id parent-id :hx-swap-oob "outerHTML" :class "w-full"
+  (div :id parent-id :sx-swap-oob "outerHTML" :class "w-full"
     (div :class "w-full" (raw! row-html)
       (div :id child-id))))
 
 (defcomp ~header-child (&key id inner-html)
   (div :id (or id "root-header-child") :class "w-full" (raw! inner-html)))
 
+;; Sexp-native header-row — accepts nested sexp expressions, no raw!
+(defcomp ~header-row-sx (&key cart-mini blog-url site-title app-label
+                              nav-tree auth-menu nav-panel
+                              settings-url is-admin oob)
+  (<>
+    (div :id "root-row"
+         :sx-swap-oob (if oob "outerHTML" nil)
+         :class "flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-sky-500"
+      (div :class "w-full flex flex-row items-top"
+        (when cart-mini cart-mini)
+        (div :class "font-bold text-5xl flex-1"
+          (a :href (or blog-url "/") :class "flex justify-center md:justify-start items-baseline gap-2"
+            (h1 (or site-title ""))))
+        (nav :class "hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0"
+          (when nav-tree nav-tree)
+          (when auth-menu auth-menu)
+          (when nav-panel nav-panel)
+          (when (and is-admin settings-url)
+            (a :href settings-url :class "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black p-3"
+              (i :class "fa fa-cog" :aria-hidden "true"))))
+        (~hamburger)))
+    (div :class "block md:hidden text-md font-bold"
+      (when auth-menu auth-menu))))
+
+;; Sexp-native menu-row — accepts nested sexp expressions, no raw!
+(defcomp ~menu-row-sx (&key id level colour link-href link-label link-label-content icon
+                             hx-select nav child-id child oob external)
+  (let* ((c (or colour "sky"))
+         (lv (or level 1))
+         (shade (str (- 500 (* lv 100)))))
+    (<>
+      (div :id id
+           :sx-swap-oob (if oob "outerHTML" nil)
+           :class (str "flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-" c "-" shade)
+        (div :class "relative nav-group"
+          (a :href link-href
+             :sx-get (if external nil link-href)
+             :sx-target (if external nil "#main-panel")
+             :sx-select (if external nil (or hx-select "#main-panel"))
+             :sx-swap (if external nil "outerHTML")
+             :sx-push-url (if external nil "true")
+             :class "w-full whitespace-normal flex items-center gap-2 font-bold text-2xl px-3 py-2"
+            (when icon (i :class icon :aria-hidden "true"))
+            (if link-label-content link-label-content
+              (when link-label (div link-label)))))
+        (when nav
+          (nav :class "hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0"
+            nav)))
+      (when (and child-id (not oob))
+        (div :id child-id :class "flex flex-col w-full items-center"
+          (when child child))))))
+
+;; Sexp-native oob-header — accepts nested sexp expression, no raw!
+(defcomp ~oob-header-sx (&key parent-id child-id row)
+  (div :id parent-id :sx-swap-oob "outerHTML" :class "w-full"
+    (div :class "w-full" row
+      (div :id child-id))))
+
+;; Sexp-native header-child — accepts nested sexp expression, no raw!
+(defcomp ~header-child-sx (&key id inner)
+  (div :id (or id "root-header-child") :class "w-full" inner))
+
 (defcomp ~error-content (&key errnum message image)
   (div :class "text-center p-8 max-w-lg mx-auto"
     (div :class "font-bold text-2xl md:text-4xl text-red-500 mb-4" errnum)
@@ -176,11 +277,11 @@
 (defcomp ~nav-link (&key href hx-select label icon aclass select-colours is-selected)
   (div :class "relative nav-group"
     (a :href href
-       :hx-get href
-       :hx-target "#main-panel"
-       :hx-select (or hx-select "#main-panel")
-       :hx-swap "outerHTML"
-       :hx-push-url "true"
+       :sx-get href
+       :sx-target "#main-panel"
+       :sx-select (or hx-select "#main-panel")
+       :sx-swap "outerHTML"
+       :sx-push-url "true"
        :aria-selected (when is-selected "true")
        :class (or aclass
                 (str "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black p-3 "

shared/sexp/templates/misc.sexp

@@ -1,30 +1,35 @@
 ;; Miscellaneous shared components for Phase 3 conversion
 
+;; The single place where raw! lives — for CMS content (Ghost post body,
+;; product descriptions, etc.) that arrives as pre-rendered HTML.
+(defcomp ~rich-text (&key html)
+  (raw! html))
+
 (defcomp ~error-inline (&key message)
-  (div :class "text-red-600 text-sm" (raw! message)))
+  (div :class "text-red-600 text-sm" message))
 
 (defcomp ~notification-badge (&key count)
-  (span :class "bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5" (raw! count)))
+  (span :class "bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5" count))
 
 (defcomp ~cache-cleared (&key time-str)
-  (span :class "text-green-600 font-bold" "Cache cleared at " (raw! time-str)))
+  (span :class "text-green-600 font-bold" "Cache cleared at " time-str))
 
-(defcomp ~error-list (&key items-html)
+(defcomp ~error-list (&key items)
   (ul :class "list-disc pl-5 space-y-1 text-sm text-red-600"
-    (raw! items-html)))
+    (when items items)))
 
 (defcomp ~error-list-item (&key message)
-  (li (raw! message)))
+  (li message))
 
 (defcomp ~fragment-error (&key service)
-  (p :class "text-sm text-red-600" "Service " (b (raw! service)) " is unavailable."))
+  (p :class "text-sm text-red-600" "Service " (b service) " is unavailable."))
 
 (defcomp ~htmx-sentinel (&key id hx-get hx-trigger hx-swap class extra-attrs)
-  (div :id id :hx-get hx-get :hx-trigger hx-trigger :hx-swap hx-swap :class class))
+  (div :id id :sx-get hx-get :sx-trigger hx-trigger :sx-swap hx-swap :class class))
 
 (defcomp ~nav-group-link (&key href hx-select nav-class label)
   (div :class "relative nav-group"
-    (a :href href :hx-get href :hx-target "#main-panel"
-      :hx-select hx-select :hx-swap "outerHTML"
-      :hx-push-url "true" :class nav-class
-      (raw! label))))
+    (a :href href :sx-get href :sx-target "#main-panel"
+      :sx-select hx-select :sx-swap "outerHTML"
+      :sx-push-url "true" :class nav-class
+      label)))

shared/sexp/templates/relations.sexp

@@ -1,15 +1,15 @@
 (defcomp ~relation-attach (&key create-url label icon)
   (a :href create-url
-     :hx-get create-url
-     :hx-target "#main-panel"
-     :hx-swap "outerHTML"
-     :hx-push-url "true"
+     :sx-get create-url
+     :sx-target "#main-panel"
+     :sx-swap "outerHTML"
+     :sx-push-url "true"
      :class "flex items-center gap-2 text-sm p-2 rounded hover:bg-stone-100 text-stone-500 hover:text-stone-700 transition-colors"
     (when icon (i :class icon))
     (span (or label "Add"))))
 
 (defcomp ~relation-detach (&key detach-url name)
-  (button :hx-delete detach-url
-          :hx-confirm (str "Remove " (or name "this item") "?")
+  (button :sx-delete detach-url
+          :sx-confirm (str "Remove " (or name "this item") "?")
           :class "text-red-500 hover:text-red-700 text-sm p-1 rounded hover:bg-red-50 transition-colors"
     (i :class "fa fa-times" :aria-hidden "true")))