Refactor SX templates: shared components, Python migration, cleanup

- Extract shared components (empty-state, delete-btn, sentinel, crud-*, view-toggle, img-or-placeholder, avatar, sumup-settings-form, auth forms, order tables/detail/checkout) - Migrate all Python sx_call() callers to use shared components directly - Remove 55+ thin wrapper defcomps from domain .sx files - Remove trivial passthrough wrappers (blog-header-label, market-card-text, etc) - Unify duplicate auth flows (account + federation) into shared/sx/templates/auth.sx - Unify duplicate order views (cart + orders) into shared/sx/templates/orders.sx - Disable static file caching in dev (SEND_FILE_MAX_AGE_DEFAULT=0) - Add SX response validation and debug headers Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 20:34:34 +00:00
parent 755313bd29
commit c0d369eb8e
58 changed files with 3473 additions and 1210 deletions
--- a/account/sx/auth.sx
+++ b/account/sx/auth.sx
@@ -1,23 +1,5 @@
-;; Auth page components (login, device, check email)
-
-(defcomp ~account-login-error (&key error)
-  (when error
-    (div :class "bg-red-50 border border-red-200 text-red-700 p-3 rounded mb-4"
-      error)))
-
-(defcomp ~account-login-form (&key error action csrf-token email)
-  (div :class "py-8 max-w-md mx-auto"
-    (h1 :class "text-2xl font-bold mb-6" "Sign in")
-    error
-    (form :method "post" :action action :class "space-y-4"
-      (input :type "hidden" :name "csrf_token" :value csrf-token)
-      (div
-        (label :for "email" :class "block text-sm font-medium mb-1" "Email address")
-        (input :type "email" :name "email" :id "email" :value email :required true :autofocus true
-          :class "w-full border border-stone-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-stone-500"))
-      (button :type "submit"
-        :class "w-full bg-stone-800 text-white py-2 px-4 rounded hover:bg-stone-700 transition"
-        "Send magic link"))))
+;; Auth page components (device auth — account-specific)
+;; Login and check-email components are shared: see shared/sx/templates/auth.sx

 (defcomp ~account-device-error (&key error)
  (when error
@@ -45,14 +27,3 @@
    (h1 :class "text-2xl font-bold mb-4" "Device authorized")
    (p :class "text-stone-600" "You can close this window and return to your terminal.")))

-(defcomp ~account-check-email-error (&key error)
-  (when error
-    (div :class "bg-yellow-50 border border-yellow-200 text-yellow-700 p-3 rounded mt-4"
-      error)))
-
-(defcomp ~account-check-email (&key email error)
-  (div :class "py-8 max-w-md mx-auto text-center"
-    (h1 :class "text-2xl font-bold mb-4" "Check your email")
-    (p :class "text-stone-600 mb-2" "We sent a sign-in link to " (strong email) ".")
-    (p :class "text-stone-500 text-sm" "Click the link in the email to sign in. The link expires in 15 minutes.")
-    error))
--- a/account/sx/dashboard.sx
+++ b/account/sx/dashboard.sx
@@ -41,8 +41,3 @@
          name)
        logout)
      labels)))
-
-;; Header child wrapper
-(defcomp ~account-header-child (&key inner)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    inner))
--- a/account/sx/newsletters.sx
+++ b/account/sx/newsletters.sx
@@ -10,12 +10,6 @@
      :class cls :role "switch" :aria-checked checked
      (span :class knob-cls))))

-(defcomp ~account-newsletter-toggle-off (&key id url hdrs target)
-  (div :id id :class "flex items-center"
-    (button :sx-post url :sx-headers hdrs :sx-target target :sx-swap "outerHTML"
-      :class "relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 bg-stone-300"
-      :role "switch" :aria-checked "false"
-      (span :class "inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform translate-x-1"))))

 (defcomp ~account-newsletter-item (&key name desc toggle)
  (div :class "flex items-center justify-between py-4 first:pt-0 last:pb-0"
--- a/account/sx/sx_components.py
+++ b/account/sx/sx_components.py
@@ -137,10 +137,13 @@ def _newsletter_toggle_sx(un: Any, account_url_fn: Any, csrf_token: str) -> str:
 def _newsletter_toggle_off_sx(nid: int, toggle_url: str, csrf_token: str) -> str:
    """Render an unsubscribed newsletter toggle (no subscription record yet)."""
    return sx_call(
-        "account-newsletter-toggle-off",
+        "account-newsletter-toggle",
        id=f"nl-{nid}", url=toggle_url,
        hdrs=f'{{"X-CSRFToken": "{csrf_token}"}}',
        target=f"#nl-{nid}",
+        cls="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 bg-stone-300",
+        checked="false",
+        knob_cls="inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform translate-x-1",
    )


@@ -196,10 +199,10 @@ def _login_page_content(ctx: dict) -> str:
    email = ctx.get("email", "")
    action = url_for("auth.start_login")

-    error_sx = sx_call("account-login-error", error=error) if error else ""
+    error_sx = sx_call("auth-error-banner", error=error) if error else ""

    return sx_call(
-        "account-login-form",
+        "auth-login-form",
        error=SxExpr(error_sx) if error_sx else None,
        action=action,
        csrf_token=generate_csrf_token(), email=email,
@@ -347,11 +350,11 @@ def _check_email_content(email: str, email_error: str | None = None) -> str:
    from markupsafe import escape

    error_sx = sx_call(
-        "account-check-email-error", error=str(escape(email_error))
+        "auth-check-email-error", error=str(escape(email_error))
    ) if email_error else ""

    return sx_call(
-        "account-check-email",
+        "auth-check-email",
        email=str(escape(email)),
        error=SxExpr(error_sx) if error_sx else None,
    )
--- a/blog/bp/fragments/routes.py
+++ b/blog/bp/fragments/routes.py
@@ -59,9 +59,10 @@ def register():
            href = app_slugs.get(item.slug, blog_url(f"/{item.slug}/"))
            selected = "true" if (item.slug == first_seg
                                  or item.slug == app_name) else "false"
-            img = sx_call("blog-nav-item-image",
+            img = sx_call("img-or-placeholder",
                            src=getattr(item, "feature_image", None),
-                            label=getattr(item, "label", item.slug))
+                            alt=getattr(item, "label", item.slug),
+                            size_cls="w-8 h-8 rounded-full object-cover flex-shrink-0")
            item_sxs.append(sx_call(
                "blog-nav-item-link",
                href=href, hx_get=href, selected=selected, nav_cls=nav_cls,
@@ -72,7 +73,8 @@ def register():
        href = artdag_url("/")
        selected = "true" if ("artdag" == first_seg
                              or "artdag" == app_name) else "false"
-        img = sx_call("blog-nav-item-image", src=None, label="art-dag")
+        img = sx_call("img-or-placeholder", src=None, alt="art-dag",
+                          size_cls="w-8 h-8 rounded-full object-cover flex-shrink-0")
        item_sxs.append(sx_call(
            "blog-nav-item-link",
            href=href, hx_get=href, selected=selected, nav_cls=nav_cls,
@@ -101,13 +103,15 @@ def register():
        right_hs = ("on click set #" + container_id
                     + ".scrollLeft to #" + container_id + ".scrollLeft + 200")

-        return sx_call("blog-nav-wrapper",
-                         arrow_cls=arrow_cls,
+        return sx_call("scroll-nav-wrapper",
+                         wrapper_id="menu-items-nav-wrapper",
                         container_id=container_id,
+                         arrow_cls=arrow_cls,
                         left_hs=left_hs,
                         scroll_hs=scroll_hs,
                         right_hs=right_hs,
-                         items=SxExpr(items_frag))
+                         items=SxExpr(items_frag),
+                         oob=True)

    _handlers["nav-tree"] = _nav_tree_handler

--- a/blog/sx/admin.sx
+++ b/blog/sx/admin.sx
@@ -14,12 +14,6 @@
      (h1 :class "text-3xl font-bold" "Snippets"))
    (div :id "snippets-list" list)))

-(defcomp ~blog-snippets-empty ()
-  (div :class "bg-white rounded-lg shadow"
-    (div :class "p-8 text-center text-stone-400"
-      (i :class "fa fa-puzzle-piece text-4xl mb-2")
-      (p "No snippets yet. Create one from the blog editor."))))
-
 (defcomp ~blog-snippet-visibility-select (&key patch-url hx-headers options cls)
  (select :name "visibility" :sx-patch patch-url :sx-target "#snippets-list" :sx-swap "innerHTML"
    :sx-headers hx-headers :class "text-sm border border-stone-300 rounded px-2 py-1"
@@ -28,16 +22,6 @@
 (defcomp ~blog-snippet-option (&key value selected label)
  (option :value value :selected selected label))

-(defcomp ~blog-snippet-delete-button (&key confirm-text delete-url hx-headers)
-  (button :type "button" :data-confirm "" :data-confirm-title "Delete snippet?"
-    :data-confirm-text confirm-text :data-confirm-icon "warning"
-    :data-confirm-confirm-text "Yes, delete" :data-confirm-cancel-text "Cancel"
-    :data-confirm-event "confirmed"
-    :sx-delete delete-url :sx-trigger "confirmed" :sx-target "#snippets-list" :sx-swap "innerHTML"
-    :sx-headers hx-headers
-    :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") " Delete"))
-
 (defcomp ~blog-snippet-row (&key name owner badge-cls visibility extra)
  (div :class "flex items-center gap-4 p-4 hover:bg-stone-50 transition"
    (div :class "flex-1 min-w-0"
@@ -58,16 +42,6 @@
    (div :id "menu-item-form" :class "mb-6")
    (div :id "menu-items-list" list)))

-(defcomp ~blog-menu-items-empty ()
-  (div :class "bg-white rounded-lg shadow"
-    (div :class "p-8 text-center text-stone-400"
-      (i :class "fa fa-inbox text-4xl mb-2")
-      (p "No menu items yet. Add one to get started!"))))
-
-(defcomp ~blog-menu-item-image (&key src label)
-  (if src (img :src src :alt label :class "w-12 h-12 rounded-full object-cover flex-shrink-0")
-    (div :class "w-12 h-12 rounded-full bg-stone-200 flex-shrink-0")))
-
 (defcomp ~blog-menu-item-row (&key img label slug sort-order edit-url delete-url confirm-text hx-headers)
  (div :class "flex items-center gap-4 p-4 hover:bg-stone-50 transition"
    (div :class "text-stone-400 cursor-move" (i :class "fa fa-grip-vertical"))
@@ -80,14 +54,9 @@
      (button :type "button" :sx-get edit-url :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") " Edit")
-      (button :type "button" :data-confirm "" :data-confirm-title "Delete menu item?"
-        :data-confirm-text confirm-text :data-confirm-icon "warning"
-        :data-confirm-confirm-text "Yes, delete" :data-confirm-cancel-text "Cancel"
-        :data-confirm-event "confirmed"
-        :sx-delete delete-url :sx-trigger "confirmed" :sx-target "#menu-items-list" :sx-swap "innerHTML"
-        :sx-headers hx-headers
-        :class "px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800"
-        (i :class "fa fa-trash") " Delete"))))
+      (~delete-btn :url delete-url :trigger-target "#menu-items-list"
+        :title "Delete menu item?" :text confirm-text
+        :sx-headers hx-headers))))

 (defcomp ~blog-menu-items-list (&key rows)
  (div :class "bg-white rounded-lg shadow" (div :class "divide-y" rows)))
@@ -123,9 +92,6 @@
 (defcomp ~blog-tag-groups-list (&key items)
  (ul :class "space-y-2" items))

-(defcomp ~blog-tag-groups-empty ()
-  (p :class "text-stone-500 text-sm" "No tag groups yet."))
-
 (defcomp ~blog-unassigned-tag (&key name)
  (span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200 rounded" name))

--- a/blog/sx/detail.sx
+++ b/blog/sx/detail.sx
@@ -52,9 +52,3 @@

 (defcomp ~blog-home-main (&key html-content)
  (article :class "relative" (div :class "blog-content p-2" (~rich-text :html html-content))))
-
-(defcomp ~blog-admin-empty ()
-  (div :class "pb-8"))
-
-(defcomp ~blog-settings-empty ()
-  (div :class "max-w-2xl mx-auto px-4 py-6"))
--- a/blog/sx/header.sx
+++ b/blog/sx/header.sx
@@ -1,8 +1,5 @@
 ;; Blog header components

-(defcomp ~blog-header-label ()
-  (div))
-
 (defcomp ~blog-container-nav (&key container-nav)
  (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 "entries-calendars-nav-wrapper" container-nav))
--- a/blog/sx/index.sx
+++ b/blog/sx/index.sx
@@ -1,55 +1,8 @@
 ;; Blog index components

-(defcomp ~blog-end-of-results ()
-  (div :class "col-span-full mt-4 text-center text-xs text-stone-400" "End of results"))
-
-(defcomp ~blog-sentinel-mobile (&key id next-url hyperscript)
-  (div :id id :class "block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"
-    :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinelmobile:retry"
-    :sx-swap "outerHTML" :_ hyperscript
-    :role "status" :aria-live "polite" :aria-hidden "true"
-    (div :class "js-loading hidden flex justify-center py-8"
-      (div :class "animate-spin h-8 w-8 border-4 border-stone-300 border-t-stone-600 rounded-full"))
-    (div :class "js-neterr hidden text-center py-8 text-stone-400"
-      (i :class "fa fa-exclamation-triangle text-2xl")
-      (p :class "mt-2" "Loading failed \u2014 retrying\u2026"))))
-
-(defcomp ~blog-sentinel-desktop (&key id next-url hyperscript)
-  (div :id id :class "hidden md:block h-4 opacity-0 pointer-events-none"
-    :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinel:retry"
-    :sx-swap "outerHTML" :_ hyperscript
-    :role "status" :aria-live "polite" :aria-hidden "true"
-    (div :class "js-loading hidden flex justify-center py-2"
-      (div :class "animate-spin h-6 w-6 border-2 border-stone-300 border-t-stone-600 rounded-full"))
-    (div :class "js-neterr hidden text-center py-2 text-stone-400 text-sm" "Retry\u2026")))
-
-(defcomp ~blog-page-sentinel (&key id next-url)
-  (div :id id :class "h-4 opacity-0 pointer-events-none"
-    :sx-get next-url :sx-trigger "intersect once delay:250ms" :sx-swap "outerHTML"))
-
 (defcomp ~blog-no-pages ()
  (div :class "col-span-full mt-8 text-center text-stone-500" "No pages found."))

-(defcomp ~blog-list-svg ()
-  (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")))
-
-(defcomp ~blog-tile-svg ()
-  (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")))
-
-(defcomp ~blog-view-toggle (&key list-href tile-href hx-select list-cls tile-cls list-svg tile-svg)
-  (div :class "hidden md:flex justify-end px-3 pt-3 gap-1"
-    (a :href list-href :sx-get list-href :sx-target "#main-panel" :sx-select hx-select
-      :sx-swap "outerHTML" :sx-push-url "true" :class (str "p-1.5 rounded " list-cls) :title "List view"
-      :_ "on click js localStorage.removeItem('blog_view') end" list-svg)
-    (a :href tile-href :sx-get tile-href :sx-target "#main-panel" :sx-select hx-select
-      :sx-swap "outerHTML" :sx-push-url "true" :class (str "p-1.5 rounded " tile-cls) :title "Tile view"
-      :_ "on click js localStorage.setItem('blog_view','tile') end" tile-svg)))
-
 (defcomp ~blog-content-type-tabs (&key posts-href pages-href hx-select posts-cls pages-cls)
  (div :class "flex justify-center gap-1 px-3 pt-3"
    (a :href posts-href :sx-get posts-href :sx-target "#main-panel"
--- a/blog/sx/settings.sx
+++ b/blog/sx/settings.sx
@@ -18,33 +18,11 @@
        (i :class "fa fa-shopping-bag text-green-600 mr-1")
        " Market \u2014 enable product catalog on this page"))))

-(defcomp ~blog-sumup-connected ()
-  (span :class "ml-2 text-xs text-green-600" (i :class "fa fa-check-circle") " Connected"))
-
-(defcomp ~blog-sumup-key-hint ()
-  (p :class "text-xs text-stone-400 mt-0.5" "Key is set. Leave blank to keep current key."))
-
-(defcomp ~blog-sumup-form (&key sumup-url merchant-code placeholder key-hint checkout-prefix connected)
+(defcomp ~blog-sumup-form (&key sumup-url merchant-code placeholder sumup-configured checkout-prefix)
  (div :class "mt-4 pt-4 border-t border-stone-100"
-    (h4 :class "text-sm font-medium text-stone-700"
-      (i :class "fa fa-credit-card text-purple-600 mr-1") " SumUp Payment")
-    (p :class "text-xs text-stone-400 mt-1 mb-3"
-      "Configure per-page SumUp credentials. Leave blank to use the global merchant account.")
-    (form :sx-put sumup-url :sx-target "#features-panel" :sx-swap "outerHTML" :class "space-y-3"
-      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Merchant Code")
-        (input :type "text" :name "merchant_code" :value merchant-code :placeholder "e.g. ME4J6100"
-          :class "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"))
-      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "API Key")
-        (input :type "password" :name "api_key" :value "" :placeholder placeholder
-          :class "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500")
-        key-hint)
-      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Checkout Reference Prefix")
-        (input :type "text" :name "checkout_prefix" :value checkout-prefix :placeholder "e.g. ROSE-"
-          :class "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"))
-      (button :type "submit"
-        :class "px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500"
-        "Save SumUp Settings")
-      connected)))
+    (~sumup-settings-form :update-url sumup-url :merchant-code merchant-code
+      :placeholder placeholder :sumup-configured sumup-configured
+      :checkout-prefix checkout-prefix :panel-id "features-panel")))

 (defcomp ~blog-features-panel (&key form sumup)
  (div :id "features-panel" :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"
--- a/blog/sx/sx_components.py
+++ b/blog/sx/sx_components.py
@@ -51,10 +51,9 @@ _oob_header_sx = oob_header_sx

 def _blog_header_sx(ctx: dict, *, oob: bool = False) -> str:
    """Blog header row — empty child of root."""
-    label_sx = sx_call("blog-header-label")
    return sx_call("menu-row-sx",
        id="blog-row", level=1,
-        link_label_content=SxExpr(label_sx),
+        link_label_content=SxExpr("(div)"),
        child_id="blog-header-child", oob=oob,
    )

@@ -160,7 +159,7 @@ def _blog_sentinel_sx(ctx: dict) -> str:
        total_pages = int(total_pages)

    if page >= total_pages:
-        return sx_call("blog-end-of-results")
+        return sx_call("end-of-results")

    current_local_href = ctx.get("current_local_href", "/index")
    next_url = f"{current_local_href}?page={page + 1}"
@@ -190,9 +189,9 @@ def _blog_sentinel_sx(ctx: dict) -> str:
    )

    return (
-        sx_call("blog-sentinel-mobile", id=f"sentinel-{page}-m", next_url=next_url, hyperscript=mobile_hs)
+        sx_call("sentinel-mobile", id=f"sentinel-{page}-m", next_url=next_url, hyperscript=mobile_hs)
        + " "
-        + sx_call("blog-sentinel-desktop", id=f"sentinel-{page}-d", next_url=next_url, hyperscript=desktop_hs)
+        + sx_call("sentinel-desktop", id=f"sentinel-{page}-d", next_url=next_url, hyperscript=desktop_hs)
    )


@@ -363,11 +362,11 @@ def _page_cards_sx(ctx: dict) -> str:
    if page_num < total_pages:
        current_local_href = ctx.get("current_local_href", "/index?type=pages")
        next_url = f"{current_local_href}&page={page_num + 1}" if "?" in current_local_href else f"{current_local_href}?page={page_num + 1}"
-        parts.append(sx_call("blog-page-sentinel",
+        parts.append(sx_call("sentinel-simple",
            id=f"sentinel-{page_num}-d", next_url=next_url,
        ))
    elif pages:
-        parts.append(sx_call("blog-end-of-results"))
+        parts.append(sx_call("end-of-results"))
    else:
        parts.append(sx_call("blog-no-pages"))

@@ -407,12 +406,12 @@ def _view_toggle_sx(ctx: dict) -> str:
    list_href = f"{current_local_href}"
    tile_href = f"{current_local_href}{'&' if '?' in current_local_href else '?'}view=tile"

-    list_svg_sx = sx_call("blog-list-svg")
-    tile_svg_sx = sx_call("blog-tile-svg")
+    list_svg_sx = sx_call("list-svg")
+    tile_svg_sx = sx_call("tile-svg")

-    return sx_call("blog-view-toggle",
+    return sx_call("view-toggle",
        list_href=list_href, tile_href=tile_href, hx_select=hx_select,
-        list_cls=list_cls, tile_cls=tile_cls,
+        list_cls=list_cls, tile_cls=tile_cls, storage_key="blog_view",
        list_svg=SxExpr(list_svg_sx), tile_svg=SxExpr(tile_svg_sx),
    )

@@ -782,7 +781,7 @@ def _home_main_panel_sx(ctx: dict) -> str:
 # ---------------------------------------------------------------------------

 def _post_admin_main_panel_sx(ctx: dict) -> str:
-    return sx_call("blog-admin-empty")
+    return '(div :class "pb-8")'


 # ---------------------------------------------------------------------------
@@ -790,7 +789,7 @@ def _post_admin_main_panel_sx(ctx: dict) -> str:
 # ---------------------------------------------------------------------------

 def _settings_main_panel_sx(ctx: dict) -> str:
-    return sx_call("blog-settings-empty")
+    return '(div :class "max-w-2xl mx-auto px-4 py-6")'


 def _cache_main_panel_sx(ctx: dict) -> str:
@@ -821,7 +820,7 @@ def _snippets_list_sx(ctx: dict) -> str:
    user_id = getattr(user, "id", None)

    if not snippets:
-        return sx_call("blog-snippets-empty")
+        return sx_call("empty-state", icon="fa fa-puzzle-piece", message="No snippets yet. Create one from the blog editor.")

    badge_colours = {
        "private": "bg-stone-200 text-stone-700",
@@ -856,10 +855,12 @@ def _snippets_list_sx(ctx: dict) -> str:

        if s_uid == user_id or is_admin:
            del_url = qurl("snippets.delete_snippet", snippet_id=s_id)
-            extra += sx_call("blog-snippet-delete-button",
-                confirm_text=f'Delete \u201c{s_name}\u201d?',
-                delete_url=del_url,
-                hx_headers=f'{{"X-CSRFToken": "{csrf}"}}',
+            extra += sx_call("delete-btn",
+                url=del_url, trigger_target="#snippets-list",
+                title="Delete snippet?",
+                text=f'Delete \u201c{s_name}\u201d?',
+                sx_headers=f'{{"X-CSRFToken": "{csrf}"}}',
+                cls="px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0",
            )

        row_parts.append(sx_call("blog-snippet-row",
@@ -890,7 +891,7 @@ def _menu_items_list_sx(ctx: dict) -> str:
    csrf = _ctx_csrf(ctx)

    if not menu_items:
-        return sx_call("blog-menu-items-empty")
+        return sx_call("empty-state", icon="fa fa-inbox", message="No menu items yet. Add one to get started!")

    row_parts = []
    for item in menu_items:
@@ -903,7 +904,8 @@ def _menu_items_list_sx(ctx: dict) -> str:
        edit_url = qurl("menu_items.edit_menu_item", item_id=i_id)
        del_url = qurl("menu_items.delete_menu_item_route", item_id=i_id)

-        img_sx = sx_call("blog-menu-item-image", src=fi, label=label)
+        img_sx = sx_call("img-or-placeholder", src=fi, alt=label,
+            size_cls="w-12 h-12 rounded-full object-cover flex-shrink-0")

        row_parts.append(sx_call("blog-menu-item-row",
            img=SxExpr(img_sx), label=label, slug=slug,
@@ -958,7 +960,7 @@ def _tag_groups_main_panel_sx(ctx: dict) -> str:
            ))
        groups_sx = sx_call("blog-tag-groups-list", items=SxExpr("(<> " + " ".join(li_parts) + ")"))
    else:
-        groups_sx = sx_call("blog-tag-groups-empty")
+        groups_sx = sx_call("empty-state", message="No tag groups yet.", cls="text-stone-500 text-sm")

    # Unassigned tags
    unassigned_sx = ""
@@ -1687,7 +1689,8 @@ def render_menu_items_nav_oob(menu_items, ctx: dict | None = None) -> str:

        selected = "true" if (item_slug == first_seg or item_slug == app_name) else "false"

-        img_sx = sx_call("blog-nav-item-image", src=fi, label=label)
+        img_sx = sx_call("img-or-placeholder", src=fi, alt=label,
+            size_cls="w-8 h-8 rounded-full object-cover flex-shrink-0")

        if item_slug != "cart":
            item_parts.append(sx_call("blog-nav-item-link",
@@ -1702,12 +1705,13 @@ def render_menu_items_nav_oob(menu_items, ctx: dict | None = None) -> str:

    items_sx = "(<> " + " ".join(item_parts) + ")" if item_parts else ""

-    return sx_call("blog-nav-wrapper",
-        arrow_cls=arrow_cls, container_id=container_id,
+    return sx_call("scroll-nav-wrapper",
+        wrapper_id="menu-items-nav-wrapper", container_id=container_id,
+        arrow_cls=arrow_cls,
        left_hs=f"on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft - 200",
        scroll_hs=scroll_hs,
        right_hs=f"on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft + 200",
-        items=SxExpr(items_sx) if items_sx else None,
+        items=SxExpr(items_sx) if items_sx else None, oob=True,
    )


@@ -1737,15 +1741,12 @@ def render_features_panel(features: dict, post: dict,
    sumup_sx = ""
    if features.get("calendar") or features.get("market"):
        placeholder = "\u2022" * 8 if sumup_configured else "sup_sk_..."
-        connected = sx_call("blog-sumup-connected") if sumup_configured else ""
-        key_hint = sx_call("blog-sumup-key-hint") if sumup_configured else ""

        sumup_sx = sx_call("blog-sumup-form",
            sumup_url=sumup_url, merchant_code=sumup_merchant_code,
            placeholder=placeholder,
-            key_hint=SxExpr(key_hint) if key_hint else None,
+            sumup_configured=sumup_configured,
            checkout_prefix=sumup_checkout_prefix,
-            connected=SxExpr(connected) if connected else None,
        )

    return sx_call("blog-features-panel",
@@ -1906,8 +1907,8 @@ def render_nav_entries_oob(associated_entries, calendars, post: dict, ctx: dict

        href = events_url_fn(entry_path) if events_url_fn else entry_path

-        item_parts.append(sx_call("blog-nav-entry-item",
-            href=href, nav_cls=nav_cls, name=e_name, date_str=date_str,
+        item_parts.append(sx_call("calendar-entry-nav",
+            href=href, nav_class=nav_cls, name=e_name, date_str=date_str,
        ))

    # Calendar links
@@ -1923,6 +1924,11 @@ def render_nav_entries_oob(associated_entries, calendars, post: dict, ctx: dict

    items_sx = "(<> " + " ".join(item_parts) + ")" if item_parts else ""

-    return sx_call("blog-nav-entries-wrapper",
-        scroll_hs=scroll_hs, items=SxExpr(items_sx) if items_sx else None,
+    return sx_call("scroll-nav-wrapper",
+        wrapper_id="entries-calendars-nav-wrapper", container_id="associated-items-container",
+        arrow_cls="entries-nav-arrow",
+        left_hs="on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200",
+        scroll_hs=scroll_hs,
+        right_hs="on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200",
+        items=SxExpr(items_sx) if items_sx else None, oob=True,
    )
--- a/cart/sx/checkout.sx
+++ b/cart/sx/checkout.sx
@@ -1,20 +0,0 @@
-;; Cart checkout error components
-
-(defcomp ~cart-checkout-error-filter ()
-  (header :class "mb-6 sm:mb-8"
-    (h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight" "Checkout error")
-    (p :class "text-xs sm:text-sm text-stone-600"
-      "We tried to start your payment with SumUp but hit a problem.")))
-
-(defcomp ~cart-checkout-error-order-id (&key order-id)
-  (p :class "text-xs text-rose-800/80"
-    "Order ID: " (span :class "font-mono" order-id)))
-
-(defcomp ~cart-checkout-error-content (&key error-msg order back-url)
-  (div :class "max-w-full px-3 py-3 space-y-4"
-    (div :class "rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2"
-      (p :class "font-medium" "Something went wrong.")
-      (p error-msg)
-      order)
-    (div (a :href back-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
-      (i :class "fa fa-shopping-cart mr-2" :aria-hidden "true") "Back to cart"))))
--- a/cart/sx/header.sx
+++ b/cart/sx/header.sx
@@ -7,38 +7,4 @@
  (a :href href :class "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
    (i :class "fa fa-arrow-left text-xs" :aria-hidden "true") "All carts"))

-(defcomp ~cart-header-child (&key inner)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    inner))

-(defcomp ~cart-header-child-nested (&key outer inner)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    outer
-    (div :id "cart-header-child" :class "flex flex-col w-full items-center"
-      inner)))
-
-(defcomp ~cart-header-child-oob (&key inner)
-  (div :id "cart-header-child" :sx-swap-oob "outerHTML" :class "flex flex-col w-full items-center"
-    inner))
-
-(defcomp ~cart-auth-header-child (&key auth orders)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    auth
-    (div :id "auth-header-child" :class "flex flex-col w-full items-center"
-      orders)))
-
-(defcomp ~cart-auth-header-child-oob (&key inner)
-  (div :id "auth-header-child" :sx-swap-oob "outerHTML" :class "flex flex-col w-full items-center"
-    inner))
-
-(defcomp ~cart-order-header-child (&key auth orders order)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    auth
-    (div :id "auth-header-child" :class "flex flex-col w-full items-center"
-      orders
-      (div :id "orders-header-child" :class "flex flex-col w-full items-center"
-        order))))
-
-(defcomp ~cart-orders-header-child-oob (&key inner)
-  (div :id "orders-header-child" :sx-swap-oob "outerHTML" :class "flex flex-col w-full items-center"
-    inner))
--- a/cart/sx/items.sx
+++ b/cart/sx/items.sx
@@ -3,10 +3,6 @@
 (defcomp ~cart-item-img (&key src alt)
  (img :src src :alt alt :class "w-24 h-24 sm:w-32 sm:h-28 object-cover rounded-xl border border-stone-100" :loading "lazy"))

-(defcomp ~cart-item-no-img ()
-  (div :class "w-24 h-24 sm:w-32 sm:h-28 rounded-xl border border-dashed border-stone-300 flex items-center justify-center text-xs text-stone-400"
-    "No image"))
-
 (defcomp ~cart-item-price (&key text)
  (p :class "text-sm sm:text-base font-semibold text-stone-900" text))

@@ -51,14 +47,6 @@
            (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+")))
        (div :class "flex items-center justify-between sm:justify-end gap-3" (when line-total line-total))))))

-(defcomp ~cart-page-empty ()
-  (div :class "max-w-full px-3 py-3 space-y-3"
-    (div :id "cart"
-      (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"
-        (div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"
-          (i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))
-        (p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty")))))
-
 (defcomp ~cart-page-panel (&key items cal tickets summary)
  (div :class "max-w-full px-3 py-3 space-y-3"
    (div :id "cart"
--- a/cart/sx/order_detail.sx
+++ b/cart/sx/order_detail.sx
@@ -1,53 +0,0 @@
-;; Cart single order detail components
-
-(defcomp ~cart-order-item-img (&key src alt)
-  (img :src src :alt alt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async"))
-
-(defcomp ~cart-order-item-no-img ()
-  (div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image"))
-
-(defcomp ~cart-order-item (&key prod-url img title product-id qty price)
-  (li (a :class "w-full py-2 flex gap-3" :href prod-url
-    (div :class "w-12 h-12 sm:w-14 sm:h-14 rounded-md bg-stone-100 flex-shrink-0 overflow-hidden" img)
-    (div :class "flex-1 flex justify-between gap-3"
-      (div (p :class "font-medium" title)
-        (p :class "text-[11px] text-stone-500" product-id))
-      (div :class "text-right whitespace-nowrap"
-        (p qty) (p price))))))
-
-(defcomp ~cart-order-items-panel (&key items)
-  (div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6"
-    (h2 :class "text-sm sm:text-base font-semibold mb-3" "Items")
-    (ul :class "divide-y divide-stone-100 text-xs sm:text-sm" items)))
-
-(defcomp ~cart-order-cal-entry (&key name pill status date-str cost)
-  (li :class "px-4 py-3 flex items-start justify-between text-sm"
-    (div (div :class "font-medium flex items-center gap-2"
-      name (span :class pill status))
-      (div :class "text-xs text-stone-500" date-str))
-    (div :class "ml-4 font-medium" cost)))
-
-(defcomp ~cart-order-cal-section (&key items)
-  (section :class "mt-6 space-y-3"
-    (h2 :class "text-base sm:text-lg font-semibold" "Calendar bookings in this order")
-    (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" items)))
-
-(defcomp ~cart-order-main (&key summary items cal)
-  (div :class "max-w-full px-3 py-3 space-y-4" summary items cal))
-
-(defcomp ~cart-order-pay-btn (&key url)
-  (a :href url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
-    (i :class "fa fa-credit-card mr-2" :aria-hidden "true") "Open payment page"))
-
-(defcomp ~cart-order-filter (&key info list-url recheck-url csrf pay)
-  (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
-    (div :class "space-y-1"
-      (p :class "text-xs sm:text-sm text-stone-600" info))
-    (div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"
-      (a :href list-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
-        (i :class "fa-solid fa-list mr-2" :aria-hidden "true") "All orders")
-      (form :method "post" :action recheck-url :class "inline"
-        (input :type "hidden" :name "csrf_token" :value csrf)
-        (button :type "submit" :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
-          (i :class "fa-solid fa-rotate mr-2" :aria-hidden "true") "Re-check status"))
-      pay)))
--- a/cart/sx/orders.sx
+++ b/cart/sx/orders.sx
@@ -1,51 +0,0 @@
-;; Cart orders list components
-
-(defcomp ~cart-order-row-desktop (&key order-id created desc total pill status detail-url)
-  (tr :class "hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60"
-    (td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" order-id))
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" created)
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" desc)
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" total)
-    (td :class "px-3 py-2 align-top" (span :class pill status))
-    (td :class "px-3 py-0.5 align-top text-right"
-      (a :href detail-url :class "inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition" "View"))))
-
-(defcomp ~cart-order-row-mobile (&key order-id pill status created total detail-url)
-  (tr :class "sm:hidden border-t border-stone-100"
-    (td :colspan "5" :class "px-3 py-3"
-      (div :class "flex flex-col gap-2 text-xs"
-        (div :class "flex items-center justify-between gap-2"
-          (span :class "font-mono text-[11px] text-stone-700" order-id)
-          (span :class pill status))
-        (div :class "text-[11px] text-stone-500 break-words" created)
-        (div :class "flex items-center justify-between gap-2"
-          (div :class "font-medium text-stone-800" total)
-          (a :href detail-url :class "inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0" "View"))))))
-
-(defcomp ~cart-orders-end ()
-  (tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400" "End of results")))
-
-(defcomp ~cart-orders-empty ()
-  (div :class "max-w-full px-3 py-3 space-y-3"
-    (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700"
-      "No orders yet.")))
-
-(defcomp ~cart-orders-table (&key rows)
-  (div :class "max-w-full px-3 py-3 space-y-3"
-    (div :class "overflow-x-auto rounded-2xl border border-stone-200 bg-white/80"
-      (table :class "min-w-full text-xs sm:text-sm"
-        (thead :class "bg-stone-50 border-b border-stone-200 text-stone-600"
-          (tr
-            (th :class "px-3 py-2 text-left font-medium" "Order")
-            (th :class "px-3 py-2 text-left font-medium" "Created")
-            (th :class "px-3 py-2 text-left font-medium" "Description")
-            (th :class "px-3 py-2 text-left font-medium" "Total")
-            (th :class "px-3 py-2 text-left font-medium" "Status")
-            (th :class "px-3 py-2 text-left font-medium")))
-        (tbody rows)))))
-
-(defcomp ~cart-orders-filter (&key search-mobile)
-  (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
-    (div :class "space-y-1"
-      (p :class "text-xs sm:text-sm text-stone-600" "Recent orders placed via the checkout."))
-    (div :class "md:hidden" search-mobile)))
--- a/cart/sx/overview.sx
+++ b/cart/sx/overview.sx
@@ -11,10 +11,6 @@
 (defcomp ~cart-group-card-img (&key src alt)
  (img :src src :alt alt :class "h-16 w-16 rounded-xl object-cover border border-stone-200 flex-shrink-0"))

-(defcomp ~cart-group-card-placeholder ()
-  (div :class "h-16 w-16 rounded-xl bg-stone-100 flex items-center justify-center flex-shrink-0"
-    (i :class "fa fa-store text-stone-400 text-xl" :aria-hidden "true")))
-
 (defcomp ~cart-mp-subtitle (&key title)
  (p :class "text-xs text-stone-500 truncate" title))

@@ -40,13 +36,6 @@
      (div :class "text-right flex-shrink-0"
        (div :class "text-lg font-bold text-stone-900" total)))))

-(defcomp ~cart-empty ()
-  (div :class "max-w-full px-3 py-3 space-y-3"
-    (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"
-      (div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"
-        (i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))
-      (p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty"))))
-
 (defcomp ~cart-overview-panel (&key cards)
  (div :class "max-w-full px-3 py-3 space-y-3"
    (div :class "space-y-4" cards)))
--- a/cart/sx/payments.sx
+++ b/cart/sx/payments.sx
@@ -2,20 +2,6 @@

 (defcomp ~cart-payments-panel (&key update-url csrf merchant-code placeholder input-cls sumup-configured checkout-prefix)
  (section :class "p-4 max-w-lg mx-auto"
-    (div :id "payments-panel" :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"
-      (h3 :class "text-lg font-semibold text-stone-800"
-        (i :class "fa fa-credit-card text-purple-600 mr-1") " SumUp Payment")
-      (p :class "text-xs text-stone-400" "Configure per-page SumUp credentials. Leave blank to use the global merchant account.")
-      (form :sx-put update-url :sx-target "#payments-panel" :sx-swap "outerHTML" :sx-select "#payments-panel" :class "space-y-3"
-        (input :type "hidden" :name "csrf_token" :value csrf)
-        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Merchant Code")
-          (input :type "text" :name "merchant_code" :value merchant-code :placeholder "e.g. ME4J6100" :class input-cls))
-        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "API Key")
-          (input :type "password" :name "api_key" :value "" :placeholder placeholder :class input-cls)
-          (when sumup-configured (p :class "text-xs text-stone-400 mt-0.5" "Key is set. Leave blank to keep current key.")))
-        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Checkout Reference Prefix")
-          (input :type "text" :name "checkout_prefix" :value checkout-prefix :placeholder "e.g. ROSE-" :class input-cls))
-        (button :type "submit" :class "px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500"
-          "Save SumUp Settings")
-        (when sumup-configured (span :class "ml-2 text-xs text-green-600"
-          (i :class "fa fa-check-circle") " Connected"))))))
+    (~sumup-settings-form :update-url update-url :csrf csrf :merchant-code merchant-code
+      :placeholder placeholder :input-cls input-cls :sumup-configured sumup-configured
+      :checkout-prefix checkout-prefix :sx-select "#payments-panel")))
--- a/cart/sx/sx_components.py
+++ b/cart/sx/sx_components.py
@@ -166,7 +166,9 @@ def _page_group_card_sx(grp: Any, ctx: dict) -> str:
        if feature_image:
            img = sx_call("cart-group-card-img", src=feature_image, alt=title)
        else:
-            img = sx_call("cart-group-card-placeholder")
+            img = sx_call("img-or-placeholder", src=None,
+                          size_cls="h-16 w-16 rounded-xl",
+                          placeholder_icon="fa fa-store text-xl")

        mp_sub = ""
        if market_place:
@@ -194,7 +196,13 @@ def _page_group_card_sx(grp: Any, ctx: dict) -> str:

 def _empty_cart_sx() -> str:
    """Empty cart state."""
-    return sx_call("cart-empty")
+    empty = sx_call("empty-state", icon="fa fa-shopping-cart",
+                    message="Your cart is empty", cls="text-center")
+    return (
+        '(div :class "max-w-full px-3 py-3 space-y-3"'
+        ' (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"'
+        f' {empty}))'
+    )


 def _overview_main_panel_sx(page_groups: list, ctx: dict) -> str:
@@ -232,7 +240,9 @@ def _cart_item_sx(item: Any, ctx: dict) -> str:
    if p.image:
        img = sx_call("cart-item-img", src=p.image, alt=p.title)
    else:
-        img = sx_call("cart-item-no-img")
+        img = sx_call("img-or-placeholder", src=None,
+                      size_cls="w-24 h-24 sm:w-32 sm:h-28 rounded-xl border border-dashed border-stone-300",
+                      placeholder_text="No image")

    price_parts = []
    if unit_price:
@@ -381,7 +391,14 @@ def _page_cart_main_panel_sx(ctx: dict, cart: list, cal_entries: list,
                                ticket_total_fn: Any) -> str:
    """Page cart main panel."""
    if not cart and not cal_entries and not tickets:
-        return sx_call("cart-page-empty")
+        empty = sx_call("empty-state", icon="fa fa-shopping-cart",
+                        message="Your cart is empty", cls="text-center")
+        return (
+            '(div :class "max-w-full px-3 py-3 space-y-3"'
+            ' (div :id "cart"'
+            ' (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"'
+            f' {empty})))'
+        )

    item_parts = [_cart_item_sx(item, ctx) for item in cart]
    items_sx = "(<> " + " ".join(item_parts) + ")" if item_parts else '""'
@@ -416,16 +433,16 @@ def _order_row_sx(order: Any, detail_url: str) -> str:
    total = f"{order.currency or 'GBP'} {order.total_amount or 0:.2f}"

    desktop = sx_call(
-        "cart-order-row-desktop",
-        order_id=f"#{order.id}", created=created, desc=order.description or "",
-        total=total, pill=pill_cls, status=status, detail_url=detail_url,
+        "order-row-desktop",
+        oid=f"#{order.id}", created=created, desc=order.description or "",
+        total=total, pill=pill_cls, status=status, url=detail_url,
    )

    mobile_pill = f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] {pill}"
    mobile = sx_call(
-        "cart-order-row-mobile",
-        order_id=f"#{order.id}", pill=mobile_pill, status=status,
-        created=created, total=total, detail_url=detail_url,
+        "order-row-mobile",
+        oid=f"#{order.id}", pill=mobile_pill, status=status,
+        created=created, total=total, url=detail_url,
    )

    return "(<> " + desktop + " " + mobile + ")"
@@ -450,7 +467,7 @@ def _orders_rows_sx(orders: list, page: int, total_pages: int,
            id_prefix="orders", colspan=5,
        ))
    else:
-        parts.append(sx_call("cart-orders-end"))
+        parts.append(sx_call("order-end-row"))

    return "(<> " + " ".join(parts) + ")"

@@ -458,13 +475,13 @@ def _orders_rows_sx(orders: list, page: int, total_pages: int,
 def _orders_main_panel_sx(orders: list, rows_sx: str) -> str:
    """Main panel for orders list."""
    if not orders:
-        return sx_call("cart-orders-empty")
-    return sx_call("cart-orders-table", rows=SxExpr(rows_sx))
+        return sx_call("order-empty-state")
+    return sx_call("order-table", rows=SxExpr(rows_sx))


 def _orders_summary_sx(ctx: dict) -> str:
    """Filter section for orders list."""
-    return sx_call("cart-orders-filter", search_mobile=SxExpr(search_mobile_sx(ctx)))
+    return sx_call("order-list-header", search_mobile=SxExpr(search_mobile_sx(ctx)))


 # ---------------------------------------------------------------------------
@@ -480,21 +497,21 @@ def _order_items_sx(order: Any) -> str:
        prod_url = market_product_url(item.product_slug)
        if item.product_image:
            img = sx_call(
-                "cart-order-item-img",
+                "order-item-image",
                src=item.product_image, alt=item.product_title or "Product image",
            )
        else:
-            img = sx_call("cart-order-item-no-img")
+            img = sx_call("order-item-no-image")
        parts.append(sx_call(
-            "cart-order-item",
-            prod_url=prod_url, img=SxExpr(img),
+            "order-item-row",
+            href=prod_url, img=SxExpr(img),
            title=item.product_title or "Unknown product",
-            product_id=f"Product ID: {item.product_id}",
+            pid=f"Product ID: {item.product_id}",
            qty=f"Qty: {item.quantity}",
            price=f"{item.currency or order.currency or 'GBP'} {item.unit_price or 0:.2f}",
        ))
    items_sx = "(<> " + " ".join(parts) + ")"
-    return sx_call("cart-order-items-panel", items=SxExpr(items_sx))
+    return sx_call("order-items-panel", items=SxExpr(items_sx))


 def _order_summary_sx(order: Any) -> str:
@@ -526,12 +543,12 @@ def _order_calendar_items_sx(calendar_entries: list | None) -> str:
        if e.end_at:
            ds += f" \u2013 {e.end_at.strftime('%-d %b %Y, %H:%M')}"
        parts.append(sx_call(
-            "cart-order-cal-entry",
+            "order-calendar-entry",
            name=e.name, pill=pill_cls, status=st.capitalize(),
            date_str=ds, cost=f"\u00a3{e.cost or 0:.2f}",
        ))
    items_sx = "(<> " + " ".join(parts) + ")"
-    return sx_call("cart-order-cal-section", items=SxExpr(items_sx))
+    return sx_call("order-calendar-section", items=SxExpr(items_sx))


 def _order_main_sx(order: Any, calendar_entries: list | None) -> str:
@@ -540,10 +557,10 @@ def _order_main_sx(order: Any, calendar_entries: list | None) -> str:
    items = _order_items_sx(order)
    cal = _order_calendar_items_sx(calendar_entries)
    return sx_call(
-        "cart-order-main",
+        "order-detail-panel",
        summary=SxExpr(summary),
        items=SxExpr(items) if items else None,
-        cal=SxExpr(cal) if cal else None,
+        calendar=SxExpr(cal) if cal else None,
    )


@@ -555,10 +572,10 @@ def _order_filter_sx(order: Any, list_url: str, recheck_url: str,

    pay_sx = None
    if status != "paid":
-        pay_sx = sx_call("cart-order-pay-btn", url=pay_url)
+        pay_sx = sx_call("order-pay-btn", url=pay_url)

    return sx_call(
-        "cart-order-filter",
+        "order-detail-filter",
        info=f"Placed {created} \u00b7 Status: {status}",
        list_url=list_url, recheck_url=recheck_url, csrf=csrf_token,
        pay=SxExpr(pay_sx) if pay_sx else None,
@@ -598,8 +615,8 @@ async def render_page_cart_page(ctx: dict, page_post: Any,
    child = _cart_header_sx(ctx)
    page_hdr = _page_cart_header_sx(ctx, page_post)
    nested = sx_call(
-        "cart-header-child-nested",
-        outer=SxExpr(child), inner=SxExpr(page_hdr),
+        "header-child-sx",
+        inner=SxExpr("(<> " + child + " " + sx_call("header-child-sx", id="cart-header-child", inner=SxExpr(page_hdr)) + ")"),
    )
    header_rows = "(<> " + hdr + " " + nested + ")"
    return full_page_sx(ctx, header_rows=header_rows, content=main)
@@ -612,8 +629,9 @@ async def render_page_cart_oob(ctx: dict, page_post: Any,
    """OOB response for page cart."""
    main = _page_cart_main_panel_sx(ctx, cart, cal_entries, tickets, ticket_groups,
                                       total_fn, cal_total_fn, ticket_total_fn)
-    child_oob = sx_call("cart-header-child-oob",
-                           inner=SxExpr(_page_cart_header_sx(ctx, page_post)))
+    child_oob = sx_call("oob-header-sx",
+                           parent_id="cart-header-child",
+                           row=SxExpr(_page_cart_header_sx(ctx, page_post)))
    cart_hdr_oob = _cart_header_sx(ctx, oob=True)
    root_hdr_oob = root_header_sx(ctx, oob=True)
    oobs = "(<> " + child_oob + " " + cart_hdr_oob + " " + root_hdr_oob + ")"
@@ -642,8 +660,8 @@ async def render_orders_page(ctx: dict, orders: list, page: int,
    auth = _auth_header_sx(ctx)
    orders_hdr = _orders_header_sx(ctx, list_url)
    auth_child = sx_call(
-        "cart-auth-header-child",
-        auth=SxExpr(auth), orders=SxExpr(orders_hdr),
+        "header-child-sx",
+        inner=SxExpr("(<> " + auth + " " + sx_call("header-child-sx", id="auth-header-child", inner=SxExpr(orders_hdr)) + ")"),
    )
    header_rows = "(<> " + hdr + " " + auth_child + ")"

@@ -676,8 +694,9 @@ async def render_orders_oob(ctx: dict, orders: list, page: int,

    auth_oob = _auth_header_sx(ctx, oob=True)
    auth_child_oob = sx_call(
-        "cart-auth-header-child-oob",
-        inner=SxExpr(_orders_header_sx(ctx, list_url)),
+        "oob-header-sx",
+        parent_id="auth-header-child",
+        row=SxExpr(_orders_header_sx(ctx, list_url)),
    )
    root_oob = root_header_sx(ctx, oob=True)
    oobs = "(<> " + auth_oob + " " + auth_child_oob + " " + root_oob + ")"
@@ -715,10 +734,10 @@ async def render_order_page(ctx: dict, order: Any,
        link_href=detail_url, link_label=f"Order {order.id}", icon="fa fa-gbp",
    )
    order_child = sx_call(
-        "cart-order-header-child",
-        auth=SxExpr(_auth_header_sx(ctx)),
-        orders=SxExpr(_orders_header_sx(ctx, list_url)),
-        order=SxExpr(order_row),
+        "header-child-sx",
+        inner=SxExpr("(<> " + _auth_header_sx(ctx) + " " + sx_call("header-child-sx", id="auth-header-child", inner=SxExpr(
+            "(<> " + _orders_header_sx(ctx, list_url) + " " + sx_call("header-child-sx", id="orders-header-child", inner=SxExpr(order_row)) + ")"
+        )) + ")"),
    )
    header_rows = "(<> " + hdr + " " + order_child + ")"

@@ -747,8 +766,9 @@ async def render_order_oob(ctx: dict, order: Any,
        link_href=detail_url, link_label=f"Order {order.id}", icon="fa fa-gbp",
        oob=True,
    )
-    orders_child_oob = sx_call("cart-orders-header-child-oob",
-                                  inner=SxExpr(order_row_oob))
+    orders_child_oob = sx_call("oob-header-sx",
+                                  parent_id="orders-header-child",
+                                  row=SxExpr(order_row_oob))
    root_oob = root_header_sx(ctx, oob=True)
    oobs = "(<> " + orders_child_oob + " " + root_oob + ")"

@@ -760,18 +780,18 @@ async def render_order_oob(ctx: dict, order: Any,
 # ---------------------------------------------------------------------------

 def _checkout_error_filter_sx() -> str:
-    return sx_call("cart-checkout-error-filter")
+    return sx_call("checkout-error-header")


 def _checkout_error_content_sx(error: str | None, order: Any | None) -> str:
    err_msg = error or "Unexpected error while creating the hosted checkout session."
    order_sx = None
    if order:
-        order_sx = sx_call("cart-checkout-error-order-id", order_id=f"#{order.id}")
+        order_sx = sx_call("checkout-error-order-id", oid=f"#{order.id}")
    back_url = cart_url("/")
    return sx_call(
-        "cart-checkout-error-content",
-        error_msg=err_msg,
+        "checkout-error-content",
+        msg=err_msg,
        order=SxExpr(order_sx) if order_sx else None,
        back_url=back_url,
    )
--- a/docs/cssx.md
+++ b/docs/cssx.md
@@ -0,0 +1,113 @@
+# On-Demand CSS System — Replace Tailwind with Server-Driven Style Delivery
+
+## Context
+
+The app recently moved from Tailwind CDN to a pre-built tw.css (92KB, Tailwind v4), but v4 broke styles since the classes target v3. Currently reverted to CDN for dev. Rather than fixing the v3/v4 mismatch, we replace Tailwind entirely with an on-demand CSS system: the server knows exactly which classes each response uses (because it renders sx→HTML), so it sends only the CSS rules needed — zero unused CSS, zero build step, zero Tailwind dependency.
+
+This mirrors the existing `SX-Components` dedup protocol: client tells server what it has, server sends only what's new.
+
+## Phase 1: Minimal Viable System
+
+### Step 1: CSS Registry — `shared/sx/css_registry.py` (new file)
+
+Parse `tw.css` at startup into a dict mapping HTML class names → CSS rule text.
+
+- **`load_css_registry(path)`** — parse tw.css once at startup, populate module-level `_REGISTRY: dict[str, str]` and `_PREAMBLE: str` (the `@property` / `@layer` declarations that define `--tw-*` vars)
+- **`_css_selector_to_class(selector)`** — unescape CSS selectors (`.sm\:hidden` → `sm:hidden`, `.h-\[60vh\]` → `h-[60vh]`)
+- **`lookup_rules(classes: set[str]) -> str`** — return concatenated CSS for a set of class names, preserving source order from tw.css
+- **`get_preamble() -> str`** — return the preamble (sent once per page load)
+
+The parser uses brace-depth tracking to split minified CSS into individual rules, extracts selectors, unescapes to get HTML class names. Rules inside `@media` blocks are stored with their wrapping `@media`.
+
+### Step 2: Class Collection During Render — `shared/sx/html.py`
+
+Add a `contextvars.ContextVar[set[str] | None]` for collecting classes. In `_render_element()` (line ~460-469), when processing a `class` attribute, split the value and add to the collector if active.
+
+```python
+# ~3 lines added in _render_element after the attr loop
+if attr_name == "class" and attr_val:
+    collector = _css_class_collector.get(None)
+    if collector is not None:
+        collector.update(str(attr_val).split())
+```
+
+### Step 3: Sx Source Scanner — `shared/sx/css_registry.py`
+
+For sx pages where the body is rendered *client-side* (sx source sent as text, not pre-rendered HTML), we can't use the render-time collector. Instead, scan sx source text for `:class "..."` patterns:
+
+```python
+def scan_classes_from_sx(source: str) -> set[str]:
+    """Extract class names from :class "..." in sx source text."""
+```
+
+This runs on both component definitions and page sx source at response time.
+
+### Step 4: Wire Into Responses — `shared/sx/helpers.py`
+
+**`sx_page()` (full page loads, line 416):**
+1. Scan `component_defs` + `page_sx` for classes via `scan_classes_from_sx()`
+2. Look up rules + preamble from registry
+3. Replace `<script src="https://cdn.tailwindcss.com...">` in `_SX_PAGE_TEMPLATE` with `<style id="sx-css">{preamble}\n{rules}</style>`
+4. Add `<meta name="sx-css-classes" content="{comma-separated classes}">` so client knows what it has
+
+**`sx_response()` (fragment swaps, line 325):**
+1. Read `SX-Css` header from request (client's known classes)
+2. Scan the sx source for classes
+3. Compute new classes = found - known
+4. If new rules exist, prepend `<style data-sx-css>{rules}</style>` to response body
+5. Set `SX-Css-Add` response header with the new class names (so client can track without parsing CSS)
+
+### Step 5: Client-Side Tracking — `shared/static/scripts/sx.js`
+
+**Boot (page load):**
+- Read `<meta name="sx-css-classes">` → populate `_sxCssKnown` dict
+
+**Request header (in `_doFetch`, line ~1516):**
+- After sending `SX-Components`, also send `SX-Css: flex,p-2,sm:hidden,...`
+
+**Response handling (line ~1641 for text/sx, ~1698 for HTML):**
+- Strip `<style data-sx-css>` blocks from response, inject into `<style id="sx-css">` in `<head>`
+- Read `SX-Css-Add` response header, merge class names into `_sxCssKnown`
+
+### Step 6: Jinja Path Fallback — `shared/browser/templates/_types/root/_head.html`
+
+For non-sx pages still using Jinja templates, serve all CSS rules (full registry dump) in `<style id="sx-css">`. Add a Jinja global `sx_css_all()` in `shared/sx/jinja_bridge.py` that returns preamble + all rules. This is the same 92KB but self-hosted with no Tailwind dependency. These pages can be optimized later.
+
+### Step 7: Startup — `shared/sx/jinja_bridge.py`
+
+Call `load_css_registry()` in `setup_sx_bridge()` after loading components.
+
+## Files to Modify
+
+| File | Change |
+|------|--------|
+| `shared/sx/css_registry.py` | **NEW** — registry, parser, scanner, lookup |
+| `shared/sx/html.py` | Add contextvar + 3 lines in `_render_element` |
+| `shared/sx/helpers.py` | Modify `_SX_PAGE_TEMPLATE`, `sx_page()`, `sx_response()` |
+| `shared/sx/jinja_bridge.py` | Call `load_css_registry()` at startup, add `sx_css_all()` Jinja global |
+| `shared/static/scripts/sx.js` | `_sxCssKnown` tracking, `SX-Css` header, response CSS injection |
+| `shared/browser/templates/_types/root/_head.html` | Replace Tailwind CDN with `{{ sx_css_all() }}` |
+
+## Key Design Decisions
+
+- **Source of truth:** tw.css (already compiled, known to be correct for current classes)
+- **Dedup model:** Mirrors `SX-Components` — client declares what it has, server sends the diff
+- **Header size:** ~599 class names × ~10 chars ≈ 6KB header — within limits, can optimize later with hashing
+- **CSS ordering:** Registry preserves tw.css source order (later rules win for equal specificity)
+- **Preamble:** `--tw-*` custom property defaults (~2KB) always included on first page load
+
+## Verification
+
+1. Start blog service: `./dev.sh blog`
+2. Load `https://blog.rose-ash.com/index/` — verify styles match current CDN appearance
+3. View page source — should have `<style id="sx-css">` instead of Tailwind CDN script
+4. Navigate via sx swap (click a post) — check DevTools Network tab for `SX-Css` request header and `SX-Css-Add` response header
+5. Inspect `<style id="sx-css">` — should grow as new pages introduce new classes
+6. Check non-sx pages still render correctly (full CSS dump fallback)
+
+## Phase 2 (Future)
+
+- **Component-level pre-computation:** Pre-scan classes per component at registration time
+- **Own rule generator:** Replace tw.css parsing with a Python rule engine (no Tailwind dependency at all)
+- **Header compression:** Use bitfield or hash instead of full class list
+- **Critical CSS:** Only inline above-fold CSS, lazy-load rest
--- a/docs/ghost-removal-execution-plan.md
+++ b/docs/ghost-removal-execution-plan.md
@@ -0,0 +1,366 @@
+# Remove Ghost CMS — Native Content Pipeline
+
+## Context
+
+Ghost CMS is the write-primary for all blog content. The blog service mirrors everything to its own DB, proxies editor uploads through Ghost, and relies on Ghost for newsletter dispatch. This creates a hard dependency on an external process that duplicates what we already have locally.
+
+We execute phases in order: implement → commit → push → test in dev → next phase. Ghost can be shut down after Phase 4.
+
+---
+
+## Phase 0 — Initial Sync & Cutover Preparation
+
+One-time migration script to ensure `db_blog` is a complete, verified copy of production Ghost before we cut writes over.
+
+### 0.1 Final sync script — `blog/scripts/final_ghost_sync.py`
+
+Standalone CLI script (not a route) that:
+1. Calls Ghost Admin API for ALL posts, pages, authors, tags with `?limit=all&formats=html,plaintext,mobiledoc,lexical&include=authors,tags`
+2. Upserts everything into `db_blog` (reuses existing `ghost_sync.py` logic)
+3. **Re-renders HTML** from `lexical` via `lexical_renderer.py` for every post — ensures our renderer matches Ghost's output
+4. Compares our rendered HTML vs Ghost's HTML, logs diffs (catch rendering gaps before cutover)
+5. Prints summary: X posts, Y pages, Z authors, W tags synced
+
+### 0.2 Verification queries
+
+After running the sync script:
+- `SELECT count(*) FROM posts WHERE deleted_at IS NULL` matches Ghost post count
+- `SELECT count(*) FROM posts WHERE html IS NULL AND status='published'` = 0
+- `SELECT count(*) FROM posts WHERE lexical IS NULL AND status='published'` = 0
+- Spot-check 5 posts: compare rendered HTML vs Ghost HTML
+
+### 0.3 Cutover sequence (deploy day)
+
+1. Run `final_ghost_sync.py` against production
+2. Deploy Phase 1 code
+3. Verify post create/edit works without Ghost
+4. Disable Ghost webhooks (Phase 1.5 neuters them in code)
+5. Ghost continues running for image serving only
+
+### Commit: `Prepare Ghost cutover: final sync script with HTML verification`
+
+---
+
+## Phase 1 — Native Post Writes
+
+Blog service creates/updates posts directly in `db_blog`. Ghost is no longer called for any content write.
+
+### 1.1 DB migration (`blog/alembic/`)
+
+- Make `ghost_id` nullable on `posts`, `authors`, `tags` in `shared/models/ghost_content.py`
+- Add `server_default=gen_random_uuid()` on `Post.uuid`
+- Add `server_default=func.now()` on `Post.updated_at`
+
+### 1.2 New `PostWriter` — `blog/services/post_writer.py`
+
+Replaces `ghost_posts.py`. Direct DB writes:
+
+```
+create_post(sess, title, lexical_json, status, feature_image, ..., user_id) -> Post
+create_page(sess, title, lexical_json, ..., user_id) -> Post
+update_post(sess, post_id, lexical_json, title, expected_updated_at, ...) -> Post
+update_post_settings(sess, post_id, expected_updated_at, **kwargs) -> Post
+delete_post(sess, post_id) -> None  (soft delete via deleted_at)
+```
+
+Key logic:
+- Render `html` + `plaintext` from `lexical_json` using existing `lexical_renderer.py`
+- Calculate `reading_time` (word count in plaintext / 265)
+- Generate slug from title (reuse existing slugify pattern in admin routes)
+- Upsert tags by name with generated slugs (`ghost_id=None` for new tags)
+- Optimistic lock: compare submitted `updated_at` vs DB value, 409 on mismatch
+- Fire AP federation publish on status transitions (extract from `ghost_sync.py:_build_ap_post_data`)
+- Invalidate Redis cache after writes
+
+### 1.3 Rewrite post save routes
+
+**`blog/bp/blog/admin/routes.py`** — `new_post_save`, `new_page_save`:
+- Replace `ghost_posts.create_post()` + `sync_single_post()` → `PostWriter.create_post()`
+
+**`blog/bp/post/admin/routes.py`** — `edit_save`, `settings_save`:
+- Replace `ghost_posts.update_post()` + `sync_single_post()` → `PostWriter.update_post()`
+- Replace `ghost_posts.update_post_settings()` + `sync_single_post()` → `PostWriter.update_post_settings()`
+
+### 1.4 Rewrite post edit GET routes
+
+**`blog/bp/post/admin/routes.py`** — `edit`, `settings`:
+- Currently call `get_post_for_edit(ghost_id)` which fetches from Ghost Admin API
+- Change to read `Post` row from local DB via `DBClient`
+- Build a `post_data` dict from the ORM object matching the shape the templates expect
+
+### 1.5 Neuter Ghost webhooks
+
+**`blog/bp/blog/web_hooks/routes.py`**:
+- Post/page/author/tag handlers → return 204 (no-op)
+- Keep member webhook active (membership sync handled in Phase 3)
+
+### 1.6 Newsletter sending — temporary disable
+
+The editor's "publish + email" flow currently triggers Ghost's email dispatch. For Phase 1, **disable email sending in the UI** (hide publish-mode dropdown). Phase 3 restores it natively.
+
+### Critical files
+
+| File | Action |
+|------|--------|
+| `shared/models/ghost_content.py` | Make `ghost_id` nullable, add defaults |
+| `blog/services/post_writer.py` | **New** — replaces `ghost_posts.py` |
+| `blog/bp/blog/ghost/ghost_sync.py` | Extract AP publish logic, rest unused |
+| `blog/bp/blog/ghost/ghost_db.py` | Keep — local DB reads, no Ghost coupling |
+| `blog/bp/blog/ghost/lexical_renderer.py` | Keep — renders HTML from Lexical JSON |
+| `blog/bp/blog/ghost/lexical_validator.py` | Keep — validates Lexical docs |
+| `blog/bp/blog/admin/routes.py` | Rewrite create handlers |
+| `blog/bp/post/admin/routes.py` | Rewrite edit/settings handlers |
+| `blog/bp/blog/web_hooks/routes.py` | Neuter post/page/author/tag handlers |
+
+### Verification
+
+- Create a new post → check it lands in `db_blog` with rendered HTML
+- Edit a post → verify `updated_at` optimistic lock works (edit in two tabs, second save gets 409)
+- Edit post settings (slug, tags, visibility) → check DB updates
+- Publish a post → verify AP federation fires
+- Verify Ghost is never called (grep active code paths for `GHOST_ADMIN_API_URL`)
+
+### Commit: `Phase 1: native post writes — blog service owns CRUD, Ghost no longer write-primary`
+
+---
+
+## Phase 2 — Local Image Storage
+
+Replace Ghost upload proxy with local filesystem. Existing Ghost-hosted image URLs continue working.
+
+### 2.1 Docker volume for media
+
+Add `blog_media` volume in `docker-compose.yml` / `docker-compose.dev.yml`, mounted at `/app/media`.
+
+### 2.2 Rewrite upload handlers — `blog/bp/blog/ghost/editor_api.py`
+
+Replace Ghost-proxying handlers with local filesystem writes:
+- Validate type + size (existing logic stays)
+- Save to `MEDIA_ROOT/YYYY/MM/filename.ext` (content-hash prefix to avoid collisions)
+- Return same JSON shape: `{"images": [{"url": "/media/YYYY/MM/filename.ext"}]}`
+- `useFileUpload.js` needs zero changes (reads `data[responseKey][0].url`)
+
+### 2.3 Static file route
+
+Add `GET /media/<path:filename>` → `send_from_directory(MEDIA_ROOT, filename)`
+
+### 2.4 OEmbed replacement
+
+Replace Ghost oembed proxy with direct httpx call to `https://oembed.com/providers.json` endpoint registry + provider-specific URLs.
+
+### 2.5 Legacy Ghost image URLs
+
+Add catch-all `GET /content/images/<path:rest>` that reverse-proxies to Ghost. Keeps all existing post images working. Removed when Phase 2b migration runs.
+
+### 2.6 (later) Bulk image migration script — `blog/scripts/migrate_ghost_images.py`
+
+- Scan all posts for `/content/images/` URLs in `html`, `feature_image`, `lexical`, `og_image`, `twitter_image`
+- Download each from Ghost
+- Save to `MEDIA_ROOT` with same path structure
+- Rewrite URLs in DB rows
+- After running: remove the `/content/images/` proxy route
+
+### Verification
+
+- Upload an image in the editor → appears at `/media/...` URL
+- Upload media and file → same
+- OEmbed: paste a YouTube link in editor → embed renders
+- Existing posts with Ghost image URLs still display correctly
+- New posts only reference `/media/...` URLs
+
+### Commit: `Phase 2: local image storage — uploads bypass Ghost, legacy URLs proxied`
+
+---
+
+## Phase 3 — Native Newsletter Sending
+
+Account service sends newsletter emails directly via SMTP. Re-enable the publish+email UI.
+
+### 3.1 New model — `NewsletterSend`
+
+In `shared/models/` (lives in `db_account`):
+```python
+class NewsletterSend(Base):
+    __tablename__ = "newsletter_sends"
+    id, post_id (int), newsletter_id (FK), status (str),
+    recipient_count (int), sent_at (datetime), error_message (text nullable)
+```
+
+### 3.2 Newsletter email template
+
+Create `account/templates/_email/newsletter_post.html` and `.txt`. Nick structure from Ghost's email templates (MIT-licensed). Template vars:
+- `post_title`, `post_html`, `post_url`, `post_excerpt`, `feature_image`
+- `newsletter_name`, `site_name`, `unsubscribe_url`
+
+### 3.3 Send function — `account/services/newsletter_sender.py`
+
+```python
+async def send_newsletter_for_post(sess, post_id, newsletter_id, post_data) -> int:
+```
+- Query `UserNewsletter` where `subscribed=True` for this newsletter, join `User` for emails
+- Render template per recipient (unique unsubscribe URL each)
+- Send via existing `aiosmtplib` SMTP infrastructure (same config as magic links)
+- Insert `NewsletterSend` record
+- Return recipient count
+
+### 3.4 Internal action — `account/bp/actions/routes.py`
+
+Add `send-newsletter` action handler. Blog calls `call_action("account", "send-newsletter", payload={...})` after publish.
+
+### 3.5 Unsubscribe route — `account/bp/auth/routes.py`
+
+`GET /unsubscribe/<token>/` — HMAC-signed token of `(user_id, newsletter_id)`. Sets `UserNewsletter.subscribed = False`. Shows confirmation page.
+
+### 3.6 Re-enable publish+email UI in blog editor
+
+Restore the publish-mode dropdown in `blog/bp/post/admin/routes.py` `edit_save`:
+- If `publish_mode in ("email", "both")` and `newsletter_id` set:
+  - Render post HTML from lexical
+  - `call_action("account", "send-newsletter", {...})`
+- Check `NewsletterSend` record to show "already emailed" badge (replaces Ghost's `post.email.status`)
+
+### Verification
+
+- Publish a post with "Web + Email" → newsletter lands in test inbox
+- Check `newsletter_sends` table has correct record
+- Click unsubscribe link → subscription toggled off
+- Re-publishing same post → "already emailed" badge shown, email controls disabled
+- Toggle newsletter subscription in account dashboard → still works
+
+### Commit: `Phase 3: native newsletter sending — SMTP via account service, Ghost email fully replaced`
+
+---
+
+## Phase 4 — Decouple Blog Models from Shared & Rename
+
+Blog models currently live in `shared/models/ghost_content.py` — this couples every service to blog's schema. The `SqlBlogService` in `shared/services/blog_impl.py` gives shared code direct DB access to blog tables, bypassing the HTTP boundary that all other cross-domain reads use.
+
+### 4.1 Move blog models out of shared
+
+- **Move** `shared/models/ghost_content.py` → `blog/models/content.py`
+  - Models: `Post`, `Author`, `Tag`, `PostTag`, `PostAuthor`, `PostUser`
+- **Delete** `blog/models/ghost_content.py` (the re-export shim) — imports now go to `blog/models/content.py`
+- **Remove** `ghost_content` line from `shared/models/__init__.py`
+- Update all blog-internal imports
+
+### 4.2 Remove `SqlBlogService` from shared
+
+- **Delete** `shared/services/blog_impl.py`
+- **Remove** `BlogService` protocol from `shared/contracts/protocols.py`
+- **Remove** `services.blog` slot from `shared/services/registry.py`
+- Blog's own `blog/services/__init__.py` keeps its local service — not shared
+
+### 4.3 Fix `entry_associations.py` to use HTTP
+
+`shared/services/entry_associations.py` calls `services.blog.get_post_by_id(session)` — direct DB access despite its docstring claiming otherwise. Replace with:
+
+```python
+post = await fetch_data("blog", "post-by-id", params={"id": post_id})
+```
+
+This aligns with the architecture: cross-domain reads go via HTTP.
+
+### 4.4 Rename ghost directories and files
+
+- `blog/bp/blog/ghost/` → `blog/bp/blog/legacy/` or inline into `blog/bp/blog/`
+  - `ghost_sync.py` → `sync.py` (if still needed)
+  - `ghost_db.py` → `queries.py` or merge into services
+  - `editor_api.py` — stays, not Ghost-specific
+  - `lexical_renderer.py`, `lexical_validator.py` — stay
+
+### 4.5 Delete Ghost integration code
+
+- `blog/bp/blog/ghost/ghost_sync.py` — delete (AP logic already extracted in Phase 1)
+- `blog/bp/blog/ghost/ghost_posts.py` — delete (replaced by PostWriter)
+- `blog/bp/blog/ghost/ghost_admin_token.py` — delete
+- `shared/infrastructure/ghost_admin_token.py` — delete
+- `blog/bp/blog/web_hooks/routes.py` — delete entire blueprint (or gut to empty)
+- `account/services/ghost_membership.py` — delete (sync functions, not needed)
+
+### 4.6 Rename membership models
+
+- `shared/models/ghost_membership_entities.py` → `shared/models/membership.py`
+
+### 4.7 Rename models (with DB migrations)
+
+| Old | New | Table rename |
+|-----|-----|-------------|
+| `GhostLabel` | `Label` | `ghost_labels` → `labels` |
+| `GhostNewsletter` | `Newsletter` | `ghost_newsletters` → `newsletters` |
+
+Drop entirely: `GhostTier` (`ghost_tiers`), `GhostSubscription` (`ghost_subscriptions`)
+
+### 4.4 Rename User columns (migration)
+
+- `ghost_status` → `member_status`
+- `ghost_subscribed` → `email_subscribed`
+- `ghost_note` → `member_note`
+- Drop: `ghost_raw` (JSONB blob of Ghost member data)
+- Keep `ghost_id` for now (dropped in Phase 5 with all other `ghost_id` columns)
+
+### 4.5 Remove Ghost env vars
+
+From `docker-compose.yml`, `docker-compose.dev.yml`, `.env`:
+- `GHOST_API_URL`, `GHOST_ADMIN_API_URL`, `GHOST_PUBLIC_URL`
+- `GHOST_CONTENT_API_KEY`, `GHOST_WEBHOOK_SECRET`, `GHOST_ADMIN_API_KEY`
+
+From `shared/infrastructure/factory.py`: remove Ghost config lines (~97-99)
+
+### Verification
+
+- `grep -r "ghost" --include="*.py" . | grep -v alembic | grep -v __pycache__ | grep -v artdag` — should be minimal (only migration files, model `ghost_id` column refs)
+- All services start cleanly without Ghost env vars
+- Blog CRUD still works end-to-end
+- Newsletter sending still works
+
+### Commit: `Phase 4: remove Ghost code — rename models, drop Ghost env vars, clean codebase`
+
+---
+
+## Phase 5 — Author/Tag/Label/Newsletter Admin
+
+Native admin UI for entities that were previously managed in Ghost Admin.
+
+### 5.1 Author admin in blog
+
+- Routes at `/settings/authors/` (follows existing `/settings/tag-groups/` pattern)
+- List, create, edit, soft-delete
+- Link author to User via email match
+
+### 5.2 Tag admin enhancement
+
+- Add create/edit/delete to existing tag admin
+- Tags fully managed in `db_blog`
+
+### 5.3 Newsletter admin in account
+
+- Routes at `/settings/newsletters/`
+- List, create, edit, soft-delete newsletters
+
+### 5.4 Label admin in account
+
+- Routes at `/settings/labels/`
+- CRUD + assign/unassign labels to users
+
+### 5.5 Drop all `ghost_id` columns
+
+Final migration: drop `ghost_id` from `posts`, `authors`, `tags`, `users`, `labels`, `newsletters`.
+Drop `Post.mobiledoc` (Ghost legacy format, always null for new posts).
+
+### Verification
+
+- Create/edit/delete authors, tags, newsletters, labels through admin UI
+- Assigned labels show on user's account dashboard
+- All CRUD operations persist correctly
+
+### Commit: `Phase 5: native admin for authors, tags, labels, newsletters — drop ghost_id columns`
+
+---
+
+## Phase 6 (future) — SX-Native Posts
+
+- New `body_sx` column on Post
+- Block-based SX editor (Notion-style: sequence of typed blocks, not WYSIWYG)
+- Each block = one SX form (paragraph, heading, image, quote, code)
+- Posts render through SX pipeline instead of Lexical renderer
+- Lexical → SX migration script for existing content
--- a/events/bp/fragments/routes.py
+++ b/events/bp/fragments/routes.py
@@ -50,9 +50,11 @@ def register():
        page = int(request.args.get("page", 1))
        exclude = request.args.get("exclude", "")
        excludes = [e.strip() for e in exclude.split(",") if e.strip()]
+        current_calendar = request.args.get("current_calendar", "")

        styles = current_app.jinja_env.globals.get("styles", {})
-        nav_class = styles.get("nav_button_less_pad", "")
+        nav_class = styles.get("nav_button", "")
+        select_colours = current_app.jinja_env.globals.get("select_colours", "")
        parts = []

        # Calendar entries nav
@@ -87,8 +89,10 @@ def register():
            )
            for cal in calendars:
                href = events_url(f"/{post_slug}/{cal.slug}/")
+                is_selected = (cal.slug == current_calendar) if current_calendar else False
                parts.append(sx_call("calendar-link-nav",
-                    href=href, name=cal.name, nav_class=nav_class))
+                    href=href, name=cal.name, nav_class=nav_class,
+                    is_selected=is_selected, select_colours=select_colours))

        if not parts:
            return ""
--- a/events/sx/calendar.sx
+++ b/events/sx/calendar.sx
@@ -36,45 +36,6 @@
      (div :class "hidden sm:grid grid-cols-7 text-center text-md font-semibold text-stone-700 mb-2" weekdays)
      (div :class "grid grid-cols-1 sm:grid-cols-7 gap-px bg-stone-200 rounded-xl overflow-hidden" cells))))

-(defcomp ~events-calendars-create-form (&key create-url csrf)
-  (<>
-    (div :id "cal-create-errors" :class "mt-2 text-sm text-red-600")
-    (form :class "mt-4 flex gap-2 items-end" :sx-post create-url
-          :sx-target "#calendars-list" :sx-select "#calendars-list" :sx-swap "outerHTML"
-          :sx-on:beforeRequest "document.querySelector('#cal-create-errors').textContent='';"
-          :sx-on:responseError "document.querySelector('#cal-create-errors').textContent='Error'; if(event.detail.response){event.detail.response.clone().text().then(function(t){event.target.closest('form').querySelector('[id$=errors]').innerHTML=t})}"
-      (input :type "hidden" :name "csrf_token" :value csrf)
-      (div :class "flex-1"
-        (label :class "block text-sm text-gray-600" "Name")
-        (input :name "name" :type "text" :required true :class "w-full border rounded px-3 py-2"
-               :placeholder "e.g. Events, Gigs, Meetings"))
-      (button :type "submit" :class "border rounded px-3 py-2" "Add calendar"))))
-
-(defcomp ~events-calendars-panel (&key form list)
-  (section :class "p-4"
-    form
-    (div :id "calendars-list" :class "mt-6" list)))
-
-(defcomp ~events-calendars-empty ()
-  (p :class "text-gray-500 mt-4" "No calendars yet. Create one above."))
-
-(defcomp ~events-calendars-item (&key href cal-name cal-slug del-url csrf-hdr)
-  (div :class "mt-6 border rounded-lg p-4"
-    (div :class "flex items-center justify-between gap-3"
-      (a :class "flex items-baseline gap-3" :href href
-         :sx-get href :sx-target "#main-panel" :sx-select "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
-        (h3 :class "font-semibold" cal-name)
-        (h4 :class "text-gray-500" (str "/" cal-slug "/")))
-      (button :class "text-sm border rounded px-3 py-1 hover:bg-red-50 hover:border-red-400"
-              :data-confirm true :data-confirm-title "Delete calendar?"
-              :data-confirm-text "Entries will be hidden (soft delete)"
-              :data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
-              :data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
-              :sx-delete del-url :sx-trigger "confirmed"
-              :sx-target "#calendars-list" :sx-select "#calendars-list" :sx-swap "outerHTML"
-              :sx-headers csrf-hdr
-        (i :class "fa-solid fa-trash")))))
-
 (defcomp ~events-calendar-description-display (&key description edit-url)
  (div :id "calendar-description"
    (if description
--- a/events/sx/entries.sx
+++ b/events/sx/entries.sx
@@ -1,8 +1,5 @@
 ;; Events entry card components (all events / page summary)

-(defcomp ~events-state-badge (&key cls label)
-  (span :class (str "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium " cls) label))
-
 (defcomp ~events-entry-title-linked (&key href name)
  (a :href href :class "hover:text-emerald-700"
    (h2 :class "text-lg font-semibold text-stone-900" name)))
@@ -61,43 +58,8 @@
  (div :class "pt-2 pb-1"
    (h3 :class "text-sm font-semibold text-stone-500 uppercase tracking-wide" date-str)))

-(defcomp ~events-sentinel (&key page next-url)
-  (div :id (str "sentinel-" page) :class "h-4 opacity-0 pointer-events-none"
-       :sx-get next-url :sx-trigger "intersect once delay:250ms" :sx-swap "outerHTML"
-       :role "status" :aria-hidden "true"
-    (div :class "text-center text-xs text-stone-400" "loading...")))
-
-(defcomp ~events-list-svg ()
-  (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")))
-
-(defcomp ~events-tile-svg ()
-  (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")))
-
-(defcomp ~events-view-toggle (&key list-href tile-href hx-select list-active tile-active list-svg tile-svg)
-  (div :class "hidden md:flex justify-end px-3 pt-3 gap-1"
-    (a :href list-href :sx-get list-href :sx-target "#main-panel" :sx-select hx-select
-       :sx-swap "outerHTML" :sx-push-url "true"
-       :class (str "p-1.5 rounded " list-active) :title "List view"
-       :_ "on click js localStorage.removeItem('events_view') end"
-      list-svg)
-    (a :href tile-href :sx-get tile-href :sx-target "#main-panel" :sx-select hx-select
-       :sx-swap "outerHTML" :sx-push-url "true"
-       :class (str "p-1.5 rounded " tile-active) :title "Tile view"
-       :_ "on click js localStorage.setItem('events_view','tile') end"
-      tile-svg)))
-
 (defcomp ~events-grid (&key grid-cls cards)
  (div :class grid-cls cards))

-(defcomp ~events-empty ()
-  (div :class "px-3 py-12 text-center text-stone-400"
-    (i :class "fa fa-calendar-xmark text-4xl mb-3" :aria-hidden "true")
-    (p :class "text-lg" "No upcoming events")))
-
 (defcomp ~events-main-panel-body (&key toggle body)
  (<> toggle body (div :class "pb-8")))
--- a/events/sx/forms.sx
+++ b/events/sx/forms.sx
@@ -494,8 +494,4 @@

 (defcomp ~events-admin-placeholder-nav ()
  (div :class "relative nav-group"
-    (span :class "block px-3 py-2 text-stone-400 text-sm italic" "Admin options")))
-
-;; Entry admin main panel — ticket_types link
-(defcomp ~events-entry-admin-main-panel (&key link)
-  link)
+    (span :class "block px-3 py-2 text-stone-400 text-sm italic" "Admin options")))
--- a/events/sx/fragments.sx
+++ b/events/sx/fragments.sx
@@ -23,15 +23,6 @@
 ;; Account page tickets (fragments/account_page_tickets.html)
 ;; ---------------------------------------------------------------------------

-(defcomp ~events-frag-ticket-badge (&key state)
-  (cond
-    ((= state "checked_in")
-     (span :class "inline-flex items-center rounded-full bg-blue-50 border border-blue-200 px-2.5 py-0.5 text-xs font-medium text-blue-700" "checked in"))
-    ((= state "confirmed")
-     (span :class "inline-flex items-center rounded-full bg-emerald-50 border border-emerald-200 px-2.5 py-0.5 text-xs font-medium text-emerald-700" "confirmed"))
-    (true
-     (span :class "inline-flex items-center rounded-full bg-amber-50 border border-amber-200 px-2.5 py-0.5 text-xs font-medium text-amber-700" state))))
-
 (defcomp ~events-frag-ticket-item (&key href entry-name date-str calendar-name type-name badge)
  (div :class "py-4 first:pt-0 last:pb-0"
    (div :class "flex items-start justify-between gap-4"
@@ -50,9 +41,6 @@
      (h1 :class "text-xl font-semibold tracking-tight" "Tickets")
      items)))

-(defcomp ~events-frag-tickets-empty ()
-  (p :class "text-sm text-stone-500" "No tickets yet."))
-
 (defcomp ~events-frag-tickets-list (&key items)
  (div :class "divide-y divide-stone-100" items))

@@ -61,15 +49,6 @@
 ;; Account page bookings (fragments/account_page_bookings.html)
 ;; ---------------------------------------------------------------------------

-(defcomp ~events-frag-booking-badge (&key state)
-  (cond
-    ((= state "confirmed")
-     (span :class "inline-flex items-center rounded-full bg-emerald-50 border border-emerald-200 px-2.5 py-0.5 text-xs font-medium text-emerald-700" "confirmed"))
-    ((= state "provisional")
-     (span :class "inline-flex items-center rounded-full bg-amber-50 border border-amber-200 px-2.5 py-0.5 text-xs font-medium text-amber-700" "provisional"))
-    (true
-     (span :class "inline-flex items-center rounded-full bg-stone-50 border border-stone-200 px-2.5 py-0.5 text-xs font-medium text-stone-600" state))))
-
 (defcomp ~events-frag-booking-item (&key name date-str calendar-name cost-str badge)
  (div :class "py-4 first:pt-0 last:pb-0"
    (div :class "flex items-start justify-between gap-4"
@@ -87,8 +66,5 @@
      (h1 :class "text-xl font-semibold tracking-tight" "Bookings")
      items)))

-(defcomp ~events-frag-bookings-empty ()
-  (p :class "text-sm text-stone-500" "No bookings yet."))
-
 (defcomp ~events-frag-bookings-list (&key items)
  (div :class "divide-y divide-stone-100" items))
--- a/events/sx/markets.sx
+++ b/events/sx/markets.sx
@@ -1,39 +0,0 @@
-;; Events markets components
-
-(defcomp ~events-markets-create-form (&key create-url csrf)
-  (<>
-    (div :id "market-create-errors" :class "mt-2 text-sm text-red-600")
-    (form :class "mt-4 flex gap-2 items-end" :sx-post create-url
-          :sx-target "#markets-list" :sx-select "#markets-list" :sx-swap "outerHTML"
-          :sx-on:beforeRequest "document.querySelector('#market-create-errors').textContent='';"
-          :sx-on:responseError "document.querySelector('#market-create-errors').textContent='Error'; if(event.detail.response){event.detail.response.clone().text().then(function(t){event.target.closest('form').querySelector('[id$=errors]').innerHTML=t})}"
-      (input :type "hidden" :name "csrf_token" :value csrf)
-      (div :class "flex-1"
-        (label :class "block text-sm text-gray-600" "Name")
-        (input :name "name" :type "text" :required true :class "w-full border rounded px-3 py-2"
-               :placeholder "e.g. Farm Shop, Bakery"))
-      (button :type "submit" :class "border rounded px-3 py-2" "Add market"))))
-
-(defcomp ~events-markets-panel (&key form list)
-  (section :class "p-4"
-    form
-    (div :id "markets-list" :class "mt-6" list)))
-
-(defcomp ~events-markets-empty ()
-  (p :class "text-gray-500 mt-4" "No markets yet. Create one above."))
-
-(defcomp ~events-markets-item (&key href market-name market-slug del-url csrf-hdr)
-  (div :class "mt-6 border rounded-lg p-4"
-    (div :class "flex items-center justify-between gap-3"
-      (a :class "flex items-baseline gap-3" :href href
-        (h3 :class "font-semibold" market-name)
-        (h4 :class "text-gray-500" (str "/" market-slug "/")))
-      (button :class "text-sm border rounded px-3 py-1 hover:bg-red-50 hover:border-red-400"
-              :data-confirm true :data-confirm-title "Delete market?"
-              :data-confirm-text "Products will be hidden (soft delete)"
-              :data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
-              :data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
-              :sx-delete del-url :sx-trigger "confirmed"
-              :sx-target "#markets-list" :sx-select "#markets-list" :sx-swap "outerHTML"
-              :sx-headers csrf-hdr
-        (i :class "fa-solid fa-trash")))))
--- a/events/sx/payments.sx
+++ b/events/sx/payments.sx
@@ -2,23 +2,9 @@

 (defcomp ~events-payments-panel (&key update-url csrf merchant-code placeholder input-cls sumup-configured checkout-prefix)
  (section :class "p-4 max-w-lg mx-auto"
-    (div :id "payments-panel" :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"
-      (h3 :class "text-lg font-semibold text-stone-800"
-        (i :class "fa fa-credit-card text-purple-600 mr-1") " SumUp Payment")
-      (p :class "text-xs text-stone-400" "Configure per-page SumUp credentials. Leave blank to use the global merchant account.")
-      (form :sx-put update-url :sx-target "#payments-panel" :sx-swap "outerHTML" :sx-select "#payments-panel" :class "space-y-3"
-        (input :type "hidden" :name "csrf_token" :value csrf)
-        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Merchant Code")
-          (input :type "text" :name "merchant_code" :value merchant-code :placeholder "e.g. ME4J6100" :class input-cls))
-        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "API Key")
-          (input :type "password" :name "api_key" :value "" :placeholder placeholder :class input-cls)
-          (when sumup-configured (p :class "text-xs text-stone-400 mt-0.5" "Key is set. Leave blank to keep current key.")))
-        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Checkout Reference Prefix")
-          (input :type "text" :name "checkout_prefix" :value checkout-prefix :placeholder "e.g. ROSE-" :class input-cls))
-        (button :type "submit" :class "px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500"
-          "Save SumUp Settings")
-        (when sumup-configured (span :class "ml-2 text-xs text-green-600"
-          (i :class "fa fa-check-circle") " Connected"))))))
+    (~sumup-settings-form :update-url update-url :csrf csrf :merchant-code merchant-code
+      :placeholder placeholder :input-cls input-cls :sumup-configured sumup-configured
+      :checkout-prefix checkout-prefix :sx-select "#payments-panel")))

 (defcomp ~events-markets-create-form (&key create-url csrf)
  (<>
--- a/events/sx/sx_components.py
+++ b/events/sx/sx_components.py
@@ -37,7 +37,7 @@ load_service_components(os.path.dirname(os.path.dirname(__file__)))

 def _clear_oob(*ids: str) -> str:
    """Generate OOB swaps to remove orphaned header rows/children."""
-    return "".join(f'<div id="{i}" hx-swap-oob="outerHTML"></div>' for i in ids)
+    return "".join(f'(div :id "{i}" :hx-swap-oob "outerHTML")' for i in ids)


 # All possible header row/child IDs at each depth (deepest first)
@@ -68,11 +68,14 @@ async def _ensure_container_nav(ctx: dict) -> dict:
    slug = post.get("slug", "")
    if not post_id:
        return ctx
+    from quart import g
    from shared.infrastructure.fragments import fetch_fragments
+    current_cal = getattr(g, "calendar_slug", "") or ""
    nav_params = {
        "container_type": "page",
        "container_id": str(post_id),
        "post_slug": slug,
+        "current_calendar": current_cal,
    }
    events_nav, market_nav = await fetch_fragments([
        ("events", "container-nav", nav_params),
@@ -361,12 +364,15 @@ def _calendars_main_panel_sx(ctx: dict) -> str:
    form_html = ""
    if can_create:
        create_url = url_for("calendars.create_calendar")
-        form_html = sx_call("events-calendars-create-form",
-                           create_url=create_url, csrf=csrf)
+        form_html = sx_call("crud-create-form",
+                           create_url=create_url, csrf=csrf,
+                           errors_id="cal-create-errors", list_id="calendars-list",
+                           placeholder="e.g. Events, Gigs, Meetings", btn_label="Add calendar")

    list_html = _calendars_list_sx(ctx, calendars)
-    return sx_call("events-calendars-panel",
-                  form=SxExpr(form_html), list=SxExpr(list_html))
+    return sx_call("crud-panel",
+                  form=SxExpr(form_html), list=SxExpr(list_html),
+                  list_id="calendars-list")


 def _calendars_list_sx(ctx: dict, calendars: list) -> str:
@@ -378,7 +384,8 @@ def _calendars_list_sx(ctx: dict, calendars: list) -> str:
    prefix = route_prefix()

    if not calendars:
-        return sx_call("events-calendars-empty")
+        return sx_call("empty-state", message="No calendars yet. Create one above.",
+                      cls="text-gray-500 mt-4")

    parts = []
    for cal in calendars:
@@ -387,9 +394,12 @@ def _calendars_list_sx(ctx: dict, calendars: list) -> str:
        href = prefix + url_for("calendar.get", calendar_slug=cal_slug)
        del_url = url_for("calendar.delete", calendar_slug=cal_slug)
        csrf_hdr = f'{{"X-CSRFToken":"{csrf}"}}'
-        parts.append(sx_call("events-calendars-item",
-                            href=href, cal_name=cal_name, cal_slug=cal_slug,
-                            del_url=del_url, csrf_hdr=csrf_hdr))
+        parts.append(sx_call("crud-item",
+                            href=href, name=cal_name, slug=cal_slug,
+                            del_url=del_url, csrf_hdr=csrf_hdr,
+                            list_id="calendars-list",
+                            confirm_title="Delete calendar?",
+                            confirm_text="Entries will be hidden (soft delete)"))
    return "".join(parts)


@@ -504,13 +514,15 @@ def _calendar_main_panel_html(ctx: dict) -> str:
                                                   bg_cls=bg_cls, name=e.name,
                                                   state_label=state_label))

-            badges_html = "".join(entry_badges)
+            badges_html = "(<> " + "".join(entry_badges) + ")" if entry_badges else ""
            cells.append(sx_call("events-calendar-cell",
                                cell_cls=cell_cls, day_short=SxExpr(day_short_html),
-                                day_num=SxExpr(day_num_html), badges=SxExpr(badges_html)))
+                                day_num=SxExpr(day_num_html),
+                                badges=SxExpr(badges_html) if badges_html else None))

-    cells_html = "".join(cells)
-    arrows_html = "".join(nav_arrows)
+    cells_html = "(<> " + "".join(cells) + ")"
+    arrows_html = "(<> " + "".join(nav_arrows) + ")"
+    wd_html = "(<> " + wd_html + ")"
    return sx_call("events-calendar-grid",
                  arrows=SxExpr(arrows_html), weekdays=SxExpr(wd_html),
                  cells=SxExpr(cells_html))
@@ -632,7 +644,7 @@ def _entry_state_badge_html(state: str) -> str:
    }
    cls = state_classes.get(state, "bg-stone-100 text-stone-700")
    label = state.replace("_", " ").capitalize()
-    return sx_call("events-state-badge", cls=cls, label=label)
+    return sx_call("badge", cls=cls, label=label)


 # ---------------------------------------------------------------------------
@@ -693,12 +705,15 @@ def _markets_main_panel_html(ctx: dict) -> str:
    form_html = ""
    if can_create:
        create_url = url_for("markets.create_market")
-        form_html = sx_call("events-markets-create-form",
-                           create_url=create_url, csrf=csrf)
+        form_html = sx_call("crud-create-form",
+                           create_url=create_url, csrf=csrf,
+                           errors_id="market-create-errors", list_id="markets-list",
+                           placeholder="e.g. Farm Shop, Bakery", btn_label="Add market")

    list_html = _markets_list_html(ctx, markets)
-    return sx_call("events-markets-panel",
-                  form=SxExpr(form_html), list=SxExpr(list_html))
+    return sx_call("crud-panel",
+                  form=SxExpr(form_html), list=SxExpr(list_html),
+                  list_id="markets-list")


 def _markets_list_html(ctx: dict, markets: list) -> str:
@@ -710,7 +725,8 @@ def _markets_list_html(ctx: dict, markets: list) -> str:
    slug = post.get("slug", "")

    if not markets:
-        return sx_call("events-markets-empty")
+        return sx_call("empty-state", message="No markets yet. Create one above.",
+                      cls="text-gray-500 mt-4")

    parts = []
    for m in markets:
@@ -719,10 +735,13 @@ def _markets_list_html(ctx: dict, markets: list) -> str:
        market_href = call_url(ctx, "market_url", f"/{slug}/{m_slug}/")
        del_url = url_for("markets.delete_market", market_slug=m_slug)
        csrf_hdr = f'{{"X-CSRFToken":"{csrf}"}}'
-        parts.append(sx_call("events-markets-item",
-                            href=market_href, market_name=m_name,
-                            market_slug=m_slug, del_url=del_url,
-                            csrf_hdr=csrf_hdr))
+        parts.append(sx_call("crud-item",
+                            href=market_href, name=m_name,
+                            slug=m_slug, del_url=del_url,
+                            csrf_hdr=csrf_hdr,
+                            list_id="markets-list",
+                            confirm_title="Delete market?",
+                            confirm_text="Products will be hidden (soft delete)"))
    return "".join(parts)


@@ -740,7 +759,7 @@ def _ticket_state_badge_html(state: str) -> str:
    }
    cls = cls_map.get(state, "bg-stone-100 text-stone-700")
    label = (state or "").replace("_", " ").capitalize()
-    return sx_call("events-state-badge", cls=cls, label=label)
+    return sx_call("badge", cls=cls, label=label)


 # ---------------------------------------------------------------------------
@@ -1085,8 +1104,8 @@ def _entry_cards_html(entries, page_info, pending_tickets, ticket_url,
            ))

    if has_more:
-        parts.append(sx_call("events-sentinel",
-                            page=str(page), next_url=next_url))
+        parts.append(sx_call("sentinel-simple",
+                            id=f"sentinel-{page}", next_url=next_url))
    return "".join(parts)


@@ -1101,14 +1120,14 @@ _TILE_SVG = None
 def _get_list_svg():
    global _LIST_SVG
    if _LIST_SVG is None:
-        _LIST_SVG = sx_call("events-list-svg")
+        _LIST_SVG = sx_call("list-svg")
    return _LIST_SVG


 def _get_tile_svg():
    global _TILE_SVG
    if _TILE_SVG is None:
-        _TILE_SVG = sx_call("events-tile-svg")
+        _TILE_SVG = sx_call("tile-svg")
    return _TILE_SVG


@@ -1131,11 +1150,11 @@ def _view_toggle_html(ctx: dict, view: str) -> str:
    list_active = 'bg-stone-200 text-stone-800' if view != 'tile' else 'text-stone-400 hover:text-stone-600'
    tile_active = 'bg-stone-200 text-stone-800' if view == 'tile' else 'text-stone-400 hover:text-stone-600'

-    return sx_call("events-view-toggle",
+    return sx_call("view-toggle",
                  list_href=list_href, tile_href=tile_href,
-                  hx_select=hx_select, list_active=list_active,
-                  tile_active=tile_active, list_svg=_get_list_svg(),
-                  tile_svg=_get_tile_svg())
+                  hx_select=hx_select, list_cls=list_active,
+                  tile_cls=tile_active, storage_key="events_view",
+                  list_svg=_get_list_svg(), tile_svg=_get_tile_svg())


 def _events_main_panel_html(ctx: dict, entries, has_more, pending_tickets, page_info,
@@ -1154,7 +1173,9 @@ def _events_main_panel_html(ctx: dict, entries, has_more, pending_tickets, page_
                    if view == "tile" else "max-w-full px-3 py-3 space-y-3")
        body = sx_call("events-grid", grid_cls=grid_cls, cards=SxExpr(cards))
    else:
-        body = sx_call("events-empty")
+        body = sx_call("empty-state", icon="fa fa-calendar-xmark",
+                      message="No upcoming events",
+                      cls="px-3 py-12 text-center text-stone-400")

    return sx_call("events-main-panel-body",
                  toggle=SxExpr(toggle), body=SxExpr(body))
@@ -1462,7 +1483,7 @@ async def render_slots_page(ctx: dict) -> str:
    slots = ctx.get("slots") or []
    calendar = ctx.get("calendar")
    content = render_slots_table(slots, calendar)
-    ctx = await _ensure_container_nav(ctx)
+    ctx = await _ensure_container_nav({**ctx, "is_admin_section": True})
    slug = (ctx.get("post") or {}).get("slug", "")
    root_hdr = root_header_sx(ctx)
    post_hdr = _post_header_sx(ctx)
@@ -1477,7 +1498,7 @@ async def render_slots_oob(ctx: dict) -> str:
    slots = ctx.get("slots") or []
    calendar = ctx.get("calendar")
    content = render_slots_table(slots, calendar)
-    ctx = await _ensure_container_nav(ctx)
+    ctx = await _ensure_container_nav({**ctx, "is_admin_section": True})
    slug = (ctx.get("post") or {}).get("slug", "")
    oobs = (post_admin_header_sx(ctx, slug, oob=True, selected="calendars")
            + _calendar_admin_header_sx(ctx, oob=True))
@@ -3012,7 +3033,7 @@ async def render_slot_page(ctx: dict) -> str:
    if not slot or not calendar:
        return ""
    content = render_slot_main_panel(slot, calendar)
-    ctx = await _ensure_container_nav(ctx)
+    ctx = await _ensure_container_nav({**ctx, "is_admin_section": True})
    slug = (ctx.get("post") or {}).get("slug", "")
    root_hdr = root_header_sx(ctx)
    post_hdr = _post_header_sx(ctx)
@@ -3030,7 +3051,7 @@ async def render_slot_oob(ctx: dict) -> str:
    if not slot or not calendar:
        return ""
    content = render_slot_main_panel(slot, calendar)
-    ctx = await _ensure_container_nav(ctx)
+    ctx = await _ensure_container_nav({**ctx, "is_admin_section": True})
    slug = (ctx.get("post") or {}).get("slug", "")
    oobs = (post_admin_header_sx(ctx, slug, oob=True, selected="calendars")
            + _calendar_admin_header_sx(ctx, oob=True))
@@ -3465,15 +3486,16 @@ def render_fragment_account_tickets(tickets) -> str:
            type_name = ""
            if getattr(ticket, "ticket_type_name", None):
                type_name = f'<span>&middot; {escape(ticket.ticket_type_name)}</span>'
-            badge_html = sx_call("events-frag-ticket-badge",
-                                state=getattr(ticket, "state", ""))
+            badge_html = sx_call("status-pill",
+                                status=getattr(ticket, "state", ""))
            items_html += sx_call("events-frag-ticket-item",
                                 href=href, entry_name=ticket.entry_name,
                                 date_str=date_str, calendar_name=cal_name,
                                 type_name=type_name, badge=badge_html)
        body = sx_call("events-frag-tickets-list", items=SxExpr(items_html))
    else:
-        body = sx_call("events-frag-tickets-empty")
+        body = sx_call("empty-state", message="No tickets yet.",
+                      cls="text-sm text-stone-500")

    return sx_call("events-frag-tickets-panel", items=SxExpr(body))

@@ -3498,8 +3520,8 @@ def render_fragment_account_bookings(bookings) -> str:
            cost_str = ""
            if getattr(booking, "cost", None):
                cost_str = f'<span>&middot; &pound;{escape(str(booking.cost))}</span>'
-            badge_html = sx_call("events-frag-booking-badge",
-                                state=getattr(booking, "state", ""))
+            badge_html = sx_call("status-pill",
+                                status=getattr(booking, "state", ""))
            items_html += sx_call("events-frag-booking-item",
                                 name=booking.name,
                                 date_str=date_str + date_str_extra,
@@ -3507,6 +3529,7 @@ def render_fragment_account_bookings(bookings) -> str:
                                 badge=badge_html)
        body = sx_call("events-frag-bookings-list", items=SxExpr(items_html))
    else:
-        body = sx_call("events-frag-bookings-empty")
+        body = sx_call("empty-state", message="No bookings yet.",
+                      cls="text-sm text-stone-500")

    return sx_call("events-frag-bookings-panel", items=SxExpr(body))
--- a/federation/sx/auth.sx
+++ b/federation/sx/auth.sx
@@ -1,31 +1,5 @@
-;; Auth components (login, check email, choose username)
-
-(defcomp ~federation-error-banner (&key error)
-  (div :class "bg-red-50 border border-red-200 text-red-700 p-3 rounded mb-4" error))
-
-(defcomp ~federation-login-form (&key error action csrf email)
-  (div :class "py-8 max-w-md mx-auto"
-    (h1 :class "text-2xl font-bold mb-6" "Sign in")
-    error
-    (form :method "post" :action action :class "space-y-4"
-      (input :type "hidden" :name "csrf_token" :value csrf)
-      (div
-        (label :for "email" :class "block text-sm font-medium mb-1" "Email address")
-        (input :type "email" :name "email" :id "email" :value email :required true :autofocus true
-          :class "w-full border border-stone-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-stone-500"))
-      (button :type "submit"
-        :class "w-full bg-stone-800 text-white py-2 px-4 rounded hover:bg-stone-700 transition"
-        "Send magic link"))))
-
-(defcomp ~federation-check-email-error (&key error)
-  (div :class "bg-yellow-50 border border-yellow-200 text-yellow-700 p-3 rounded mt-4" error))
-
-(defcomp ~federation-check-email (&key email error)
-  (div :class "py-8 max-w-md mx-auto text-center"
-    (h1 :class "text-2xl font-bold mb-4" "Check your email")
-    (p :class "text-stone-600 mb-2" "We sent a sign-in link to " (strong email) ".")
-    (p :class "text-stone-500 text-sm" "Click the link in the email to sign in. The link expires in 15 minutes.")
-    error))
+;; Auth components (choose username — federation-specific)
+;; Login and check-email components are shared: see shared/sx/templates/auth.sx

 (defcomp ~federation-choose-username (&key domain error csrf username check-url)
  (div :class "py-8 max-w-md mx-auto"
--- a/federation/sx/notifications.sx
+++ b/federation/sx/notifications.sx
@@ -15,9 +15,6 @@
        preview
        (div :class "text-xs text-stone-400 mt-1" time)))))

-(defcomp ~federation-notifications-empty ()
-  (p :class "text-stone-500" "No notifications yet."))
-
 (defcomp ~federation-notifications-list (&key items)
  (div :class "space-y-2" items))

--- a/federation/sx/search.sx
+++ b/federation/sx/search.sx
@@ -1,10 +1,11 @@
 ;; Search and actor card components

+;; Aliases — delegate to shared ~avatar
 (defcomp ~federation-actor-avatar-img (&key src cls)
-  (img :src src :alt "" :class cls))
+  (~avatar :src src :cls cls))

 (defcomp ~federation-actor-avatar-placeholder (&key cls initial)
-  (div :class cls initial))
+  (~avatar :cls cls :initial initial))

 (defcomp ~federation-actor-name-link (&key href name)
  (a :href href :class "font-semibold text-stone-900 hover:underline" name))
--- a/federation/sx/social.sx
+++ b/federation/sx/social.sx
@@ -6,9 +6,6 @@
  (nav :class "flex gap-3 text-sm items-center"
    (a :href url :class "px-2 py-1 rounded hover:bg-stone-200 font-bold" "Choose username")))

-(defcomp ~federation-nav-link (&key href cls label)
-  (a :href href :class cls label))
-
 (defcomp ~federation-nav-notification-link (&key href cls count-url)
  (a :href href :class cls "Notifications"
    (span :sx-get count-url :sx-trigger "load, every 30s" :sx-swap "innerHTML"
@@ -21,35 +18,29 @@
  (div :id "social-row" :class "flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-sky-400"
    (div :class "w-full flex flex-row items-center gap-2 flex-wrap" nav)))

-(defcomp ~federation-header-child (&key inner)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center" inner))
-
 ;; --- Post card ---

 (defcomp ~federation-boost-label (&key name)
  (div :class "text-sm text-stone-500 mb-2" "Boosted by " name))

+;; Aliases — delegate to shared ~avatar
 (defcomp ~federation-avatar-img (&key src cls)
-  (img :src src :alt "" :class cls))
+  (~avatar :src src :cls cls))

 (defcomp ~federation-avatar-placeholder (&key cls initial)
-  (div :class cls initial))
+  (~avatar :cls cls :initial initial))

-(defcomp ~federation-content-cw (&key summary content)
-  (details :class "mt-2"
-    (summary :class "text-stone-500 cursor-pointer" "CW: " (~rich-text :html summary))
+(defcomp ~federation-content (&key content summary)
+  (if summary
+    (details :class "mt-2"
+      (summary :class "text-stone-500 cursor-pointer" "CW: " (~rich-text :html summary))
+      (div :class "mt-2 prose prose-sm prose-stone max-w-none" (~rich-text :html content)))
    (div :class "mt-2 prose prose-sm prose-stone max-w-none" (~rich-text :html content))))

-(defcomp ~federation-content-plain (&key content)
-  (div :class "mt-2 prose prose-sm prose-stone max-w-none" (~rich-text :html content)))
-
 (defcomp ~federation-original-link (&key url)
  (a :href url :target "_blank" :rel "noopener"
    :class "text-sm text-stone-400 hover:underline mt-1 inline-block" "original"))

-(defcomp ~federation-interactions-wrap (&key id buttons)
-  (div :id id buttons))
-
 (defcomp ~federation-post-card (&key boost avatar actor-name actor-username domain time content original interactions)
  (article :class "bg-white rounded-lg shadow-sm border border-stone-200 p-4 mb-4"
    boost
--- a/federation/sx/sx_components.py
+++ b/federation/sx/sx_components.py
@@ -11,6 +11,7 @@ from typing import Any
 from markupsafe import escape

 from shared.sx.jinja_bridge import load_service_components
+from shared.sx.parser import serialize
 from shared.sx.helpers import (
    sx_call, SxExpr,
    root_header_sx, full_page_sx, header_child_sx,
@@ -45,12 +46,8 @@ def _social_nav_sx(actor: Any) -> str:
    for endpoint, label in links:
        href = url_for(endpoint)
        bold = " font-bold" if request.path == href else ""
-        parts.append(sx_call(
-            "federation-nav-link",
-            href=href,
-            cls=f"px-2 py-1 rounded hover:bg-stone-200{bold}",
-            label=label,
-        ))
+        cls = f"px-2 py-1 rounded hover:bg-stone-200{bold}"
+        parts.append(f'(a :href {serialize(href)} :class {serialize(cls)} {serialize(label)})')

    # Notifications with live badge
    notif_url = url_for("social.notifications")
@@ -65,12 +62,7 @@ def _social_nav_sx(actor: Any) -> str:

    # Profile link
    profile_url = url_for("activitypub.actor_profile", username=actor.preferred_username)
-    parts.append(sx_call(
-        "federation-nav-link",
-        href=profile_url,
-        cls="px-2 py-1 rounded hover:bg-stone-200",
-        label=f"@{actor.preferred_username}",
-    ))
+    parts.append(f'(a :href {serialize(profile_url)} :class "px-2 py-1 rounded hover:bg-stone-200" {serialize("@" + actor.preferred_username)})')

    items_sx = "(<> " + " ".join(parts) + ")"
    return sx_call("federation-nav-bar", items=SxExpr(items_sx))
@@ -171,26 +163,23 @@ def _post_card_sx(item: Any, actor: Any) -> str:
        "federation-boost-label", name=str(escape(boosted_by)),
    ) if boosted_by else ""

-    if actor_icon:
-        avatar = sx_call("federation-avatar-img", src=actor_icon, cls="w-10 h-10 rounded-full")
-    else:
-        initial = actor_name[0].upper() if actor_name else "?"
-        avatar = sx_call(
-            "federation-avatar-placeholder",
-            cls="w-10 h-10 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-sm",
-            initial=initial,
-        )
+    initial = actor_name[0].upper() if (not actor_icon and actor_name) else "?"
+    avatar = sx_call(
+        "avatar", src=actor_icon or None,
+        cls="w-10 h-10 rounded-full" if actor_icon else "w-10 h-10 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-sm",
+        initial=None if actor_icon else initial,
+    )

    domain_str = f"@{escape(actor_domain)}" if actor_domain else ""
    time_str = published.strftime("%b %d, %H:%M") if published else ""

    if summary:
        content_sx = sx_call(
-            "federation-content-cw",
-            summary=str(escape(summary)), content=content,
+            "federation-content",
+            content=content, summary=str(escape(summary)),
        )
    else:
-        content_sx = sx_call("federation-content-plain", content=content)
+        content_sx = sx_call("federation-content", content=content)

    original_sx = ""
    if url and post_type == "remote":
@@ -200,11 +189,7 @@ def _post_card_sx(item: Any, actor: Any) -> str:
    if actor:
        oid = getattr(item, "object_id", "") or ""
        safe_id = oid.replace("/", "_").replace(":", "_")
-        interactions_sx = sx_call(
-            "federation-interactions-wrap",
-            id=f"interactions-{safe_id}",
-            buttons=SxExpr(_interaction_buttons_sx(item, actor)),
-        )
+        interactions_sx = f'(div :id {serialize(f"interactions-{safe_id}")} {_interaction_buttons_sx(item, actor)})'

    return sx_call(
        "federation-post-card",
@@ -263,15 +248,12 @@ def _actor_card_sx(a: Any, actor: Any, followed_urls: set,

    safe_id = actor_url.replace("/", "_").replace(":", "_")

-    if icon_url:
-        avatar = sx_call("federation-actor-avatar-img", src=icon_url, cls="w-12 h-12 rounded-full")
-    else:
-        initial = (display_name or username)[0].upper() if (display_name or username) else "?"
-        avatar = sx_call(
-            "federation-actor-avatar-placeholder",
-            cls="w-12 h-12 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold",
-            initial=initial,
-        )
+    initial = (display_name or username)[0].upper() if (not icon_url and (display_name or username)) else "?"
+    avatar = sx_call(
+        "avatar", src=icon_url or None,
+        cls="w-12 h-12 rounded-full" if icon_url else "w-12 h-12 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold",
+        initial=None if icon_url else initial,
+    )

    # Name link
    if (list_type in ("following", "search")) and aid:
@@ -359,15 +341,12 @@ def _notification_sx(notif: Any) -> str:

    border = " border-l-4 border-l-stone-400" if not read else ""

-    if from_icon:
-        avatar = sx_call("federation-avatar-img", src=from_icon, cls="w-8 h-8 rounded-full")
-    else:
-        initial = from_name[0].upper() if from_name else "?"
-        avatar = sx_call(
-            "federation-avatar-placeholder",
-            cls="w-8 h-8 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-xs",
-            initial=initial,
-        )
+    initial = from_name[0].upper() if (not from_icon and from_name) else "?"
+    avatar = sx_call(
+        "avatar", src=from_icon or None,
+        cls="w-8 h-8 rounded-full" if from_icon else "w-8 h-8 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-xs",
+        initial=None if from_icon else initial,
+    )

    domain_str = f"@{escape(from_domain)}" if from_domain else ""

@@ -423,12 +402,12 @@ async def render_login_page(ctx: dict) -> str:
    action = url_for("auth.start_login")
    csrf = generate_csrf_token()

-    error_sx = sx_call("federation-error-banner", error=error) if error else ""
+    error_sx = sx_call("auth-error-banner", error=error) if error else ""

    content = sx_call(
-        "federation-login-form",
+        "auth-login-form",
        error=SxExpr(error_sx) if error_sx else None,
-        action=action, csrf=csrf,
+        action=action, csrf_token=csrf,
        email=str(escape(email)),
    )

@@ -442,11 +421,11 @@ async def render_check_email_page(ctx: dict) -> str:
    email_error = ctx.get("email_error")

    error_sx = sx_call(
-        "federation-check-email-error", error=str(escape(email_error)),
+        "auth-check-email-error", error=str(escape(email_error)),
    ) if email_error else ""

    content = sx_call(
-        "federation-check-email",
+        "auth-check-email",
        email=str(escape(email)),
        error=SxExpr(error_sx) if error_sx else None,
    )
@@ -622,15 +601,12 @@ async def render_actor_timeline_page(ctx: dict, remote_actor: Any, items: list,
    summary = getattr(remote_actor, "summary", None)
    actor_url = getattr(remote_actor, "actor_url", "")

-    if icon_url:
-        avatar = sx_call("federation-avatar-img", src=icon_url, cls="w-16 h-16 rounded-full")
-    else:
-        initial = display_name[0].upper() if display_name else "?"
-        avatar = sx_call(
-            "federation-avatar-placeholder",
-            cls="w-16 h-16 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-xl",
-            initial=initial,
-        )
+    initial = display_name[0].upper() if (not icon_url and display_name) else "?"
+    avatar = sx_call(
+        "avatar", src=icon_url or None,
+        cls="w-16 h-16 rounded-full" if icon_url else "w-16 h-16 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-xl",
+        initial=None if icon_url else initial,
+    )

    summary_sx = sx_call("federation-profile-summary", summary=summary) if summary else ""

@@ -687,7 +663,8 @@ async def render_notifications_page(ctx: dict, notifications: list,
                                     actor: Any) -> str:
    """Full page: notifications."""
    if not notifications:
-        notif_sx = sx_call("federation-notifications-empty")
+        notif_sx = sx_call("empty-state", message="No notifications yet.",
+                           cls="text-stone-500")
    else:
        items_sx = "(<> " + " ".join(_notification_sx(n) for n in notifications) + ")"
        notif_sx = sx_call(
@@ -717,7 +694,7 @@ async def render_choose_username_page(ctx: dict) -> str:
    check_url = url_for("identity.check_username")
    actor = ctx.get("actor")

-    error_sx = sx_call("federation-error-banner", error=error) if error else ""
+    error_sx = sx_call("auth-error-banner", error=error) if error else ""

    content = sx_call(
        "federation-choose-username",
--- a/market/bp/fragments/routes.py
+++ b/market/bp/fragments/routes.py
@@ -47,12 +47,14 @@ def register():
        if not markets:
            return ""
        styles = current_app.jinja_env.globals.get("styles", {})
-        nav_class = styles.get("nav_button_less_pad", "")
+        nav_class = styles.get("nav_button", "")
+        select_colours = current_app.jinja_env.globals.get("select_colours", "")
        parts = []
        for m in markets:
            href = market_url(f"/{post_slug}/{m.slug}/")
            parts.append(sx_call("market-link-nav",
-                                   href=href, name=m.name, nav_class=nav_class))
+                                   href=href, name=m.name, nav_class=nav_class,
+                                   select_colours=select_colours))
        return "(<> " + " ".join(parts) + ")"

    _handlers["container-nav"] = _container_nav_handler
--- a/market/sx/admin.sx
+++ b/market/sx/admin.sx
@@ -1,40 +0,0 @@
-;; Market admin panel components (page-level admin for markets)
-
-(defcomp ~market-admin-create-form (&key create-url csrf)
-  (<>
-    (div :id "market-create-errors" :class "mt-2 text-sm text-red-600")
-    (form :class "mt-4 flex gap-2 items-end" :sx-post create-url
-          :sx-target "#markets-list" :sx-select "#markets-list" :sx-swap "outerHTML"
-          :sx-on:beforeRequest "document.querySelector('#market-create-errors').textContent='';"
-          :sx-on:responseError "document.querySelector('#market-create-errors').textContent='Error'; if(event.detail.response){event.detail.response.clone().text().then(function(t){event.target.closest('form').querySelector('[id$=errors]').innerHTML=t})}"
-      (input :type "hidden" :name "csrf_token" :value csrf)
-      (div :class "flex-1"
-        (label :class "block text-sm text-gray-600" "Name")
-        (input :name "name" :type "text" :required true :class "w-full border rounded px-3 py-2"
-               :placeholder "e.g. Suma, Craft Fair"))
-      (button :type "submit" :class "border rounded px-3 py-2" "Add market"))))
-
-(defcomp ~market-admin-panel (&key form list)
-  (section :class "p-4"
-    form
-    (div :id "markets-list" :class "mt-6" list)))
-
-(defcomp ~market-admin-empty ()
-  (p :class "text-gray-500 mt-4" "No markets yet. Create one above."))
-
-(defcomp ~market-admin-item (&key href name slug del-url csrf-hdr)
-  (div :class "mt-6 border rounded-lg p-4"
-    (div :class "flex items-center justify-between gap-3"
-      (a :class "flex items-baseline gap-3" :href href
-         :sx-get href :sx-target "#main-panel" :sx-select "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
-        (h3 :class "font-semibold" name)
-        (h4 :class "text-gray-500" (str "/" slug "/")))
-      (button :class "text-sm border rounded px-3 py-1 hover:bg-red-50 hover:border-red-400"
-              :data-confirm true :data-confirm-title "Delete market?"
-              :data-confirm-text "Products will be hidden (soft delete)"
-              :data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
-              :data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
-              :sx-delete del-url :sx-trigger "confirmed"
-              :sx-target "#markets-list" :sx-select "#markets-list" :sx-swap "outerHTML"
-              :sx-headers csrf-hdr
-        (i :class "fa-solid fa-trash")))))
--- a/market/sx/cards.sx
+++ b/market/sx/cards.sx
@@ -19,9 +19,6 @@
      (when labels (ul :class "flex flex-row gap-1" (map (lambda (l) (li l)) labels)))
      (div :class "text-stone-900 text-center line-clamp-3 break-words [overflow-wrap:anywhere]" brand))))

-(defcomp ~market-card-label-item (&key label)
-  (li label))
-
 (defcomp ~market-card-sticker (&key src name ring-cls)
  (img :src src :alt name :class (str "w-6 h-6" ring-cls)))

@@ -32,15 +29,9 @@
 (defcomp ~market-card-highlight (&key pre mid post)
  (<> pre (mark mid) post))

-(defcomp ~market-card-text (&key text)
-  (<> text))
-
-;; Price — single component accepts both prices, renders correctly
+;; Price — delegates to shared ~price
 (defcomp ~market-card-price (&key special-price regular-price)
-  (div :class "mt-1 flex items-baseline gap-2 justify-center"
-    (when special-price (div :class "text-lg font-semibold text-emerald-700" special-price))
-    (when (and special-price regular-price) (div :class "text-sm line-through text-stone-500" regular-price))
-    (when (and (not special-price) regular-price) (div :class "mt-1 text-lg font-semibold" regular-price))))
+  (~price :special-price special-price :regular-price regular-price))

 ;; Main product card — accepts pure data, composes sub-components
 (defcomp ~market-product-card (&key href hx-select
@@ -104,31 +95,3 @@
      (if desc-content desc-content (when desc desc)))
    (if badge-content badge-content (when badge badge))))

-(defcomp ~market-sentinel-mobile (&key id next-url hyperscript)
-  (div :id id
-       :class "block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"
-       :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinelmobile:retry"
-       :sx-swap "outerHTML"
-       :_ hyperscript
-       :role "status" :aria-live "polite" :aria-hidden "true"
-    (div :class "js-loading text-center text-xs text-stone-400" "loading...")
-    (div :class "js-neterr hidden text-center text-xs text-stone-400" "Retrying...")))
-
-(defcomp ~market-sentinel-desktop (&key id next-url hyperscript)
-  (div :id id
-       :class "hidden md:block h-4 opacity-0 pointer-events-none"
-       :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinel:retry"
-       :sx-swap "outerHTML"
-       :_ hyperscript
-       :role "status" :aria-live "polite" :aria-hidden "true"
-    (div :class "js-loading text-center text-xs text-stone-400" "loading...")
-    (div :class "js-neterr hidden text-center text-xs text-stone-400" "Retrying...")))
-
-(defcomp ~market-sentinel-end ()
-  (div :class "col-span-full mt-4 text-center text-xs text-stone-400" "End of results"))
-
-(defcomp ~market-market-sentinel (&key id next-url)
-  (div :id id :class "h-4 opacity-0 pointer-events-none"
-       :sx-get next-url :sx-trigger "intersect once delay:250ms"
-       :sx-swap "outerHTML" :role "status" :aria-hidden "true"
-    (div :class "text-center text-xs text-stone-400" "loading...")))
--- a/market/sx/grids.sx
+++ b/market/sx/grids.sx
@@ -3,17 +3,9 @@
 (defcomp ~market-markets-grid (&key cards)
  (div :class "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" cards))

-(defcomp ~market-no-markets (&key message)
-  (div :class "px-3 py-12 text-center text-stone-400"
-    (i :class "fa fa-store text-4xl mb-3" :aria-hidden "true")
-    (p :class "text-lg" message)))
-
 (defcomp ~market-product-grid (&key cards)
  (<> (div :class "grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-3" cards) (div :class "pb-8")))

-(defcomp ~market-bottom-spacer ()
-  (div :class "pb-8"))
-
 (defcomp ~market-like-toggle-button (&key colour action hx-headers label icon-cls)
  (button :class (str "flex items-center gap-1 " colour " hover:text-red-600 transition-colors w-[1em] h-[1em]")
          :sx-post action :sx-target "this" :sx-swap "outerHTML" :sx-push-url "false"
--- a/market/sx/headers.sx
+++ b/market/sx/headers.sx
@@ -6,9 +6,6 @@
    (div :class "flex flex-col md:flex-row md:gap-2 text-xs"
      (div top-slug) sub-div)))

-(defcomp ~market-sub-slug (&key sub)
-  (div sub))
-
 (defcomp ~market-product-label (&key title)
  (<> (i :class "fa fa-shopping-bag" :aria-hidden "true") (div title)))

--- a/market/sx/sx_components.py
+++ b/market/sx/sx_components.py
@@ -10,6 +10,7 @@ from __future__ import annotations
 import os
 from typing import Any
 from shared.sx.jinja_bridge import load_service_components
+from shared.sx.parser import serialize
 from shared.sx.helpers import (
    call_url, get_asset_url, sx_call, SxExpr,
    root_header_sx,
@@ -102,7 +103,7 @@ def _market_header_sx(ctx: dict, *, oob: bool = False) -> str:
    sub_slug = ctx.get("sub_slug", "")
    hx_select_search = ctx.get("hx_select_search", "#main-panel")

-    sub_div = sx_call("market-sub-slug", sub=sub_slug) if sub_slug else ""
+    sub_div = f'(div {serialize(sub_slug)})' if sub_slug else ""
    label_sx = sx_call(
        "market-shop-label",
        title=market_title, top_slug=top_slug or "",
@@ -439,14 +440,14 @@ def _product_cards_sx(ctx: dict) -> str:
        else:
            next_qs = f"?page={page + 1}"
        next_url = prefix + current_local_href + next_qs
-        parts.append(sx_call("market-sentinel-mobile",
+        parts.append(sx_call("sentinel-mobile",
                               id=f"sentinel-{page}-m", next_url=next_url,
                               hyperscript=_MOBILE_SENTINEL_HS))
-        parts.append(sx_call("market-sentinel-desktop",
+        parts.append(sx_call("sentinel-desktop",
                               id=f"sentinel-{page}-d", next_url=next_url,
                               hyperscript=_DESKTOP_SENTINEL_HS))
    else:
-        parts.append(sx_call("market-sentinel-end"))
+        parts.append(sx_call("end-of-results"))

    return "(<> " + " ".join(parts) + ")"

@@ -1170,7 +1171,7 @@ def _market_cards_sx(markets: list, page_info: dict, page: int, has_more: bool,
                                post_slug=post_slug) for m in markets]
    if has_more:
        parts.append(sx_call(
-            "market-market-sentinel",
+            "sentinel-simple",
            id=f"sentinel-{page}", next_url=next_url,
        ))
    return "(<> " + " ".join(parts) + ")"
@@ -1197,7 +1198,8 @@ def _markets_grid(cards_sx: str) -> str:

 def _no_markets_sx(message: str = "No markets available") -> str:
    """Empty state for markets as sx."""
-    return sx_call("market-no-markets", message=message)
+    return sx_call("empty-state", icon="fa fa-store", message=message,
+                    cls="px-3 py-12 text-center text-stone-400")


 async def render_all_markets_page(ctx: dict, markets: list, has_more: bool,
@@ -1214,7 +1216,7 @@ async def render_all_markets_page(ctx: dict, markets: list, has_more: bool,
        content = _markets_grid(cards)
    else:
        content = _no_markets_sx()
-    content = "(<> " + content + " " + sx_call("market-bottom-spacer") + ")"
+    content = "(<> " + content + " " + '(div :class "pb-8")' + ")"

    hdr = root_header_sx(ctx)
    return full_page_sx(ctx, header_rows=hdr, content=content)
@@ -1234,7 +1236,7 @@ async def render_all_markets_oob(ctx: dict, markets: list, has_more: bool,
        content = _markets_grid(cards)
    else:
        content = _no_markets_sx()
-    content = "(<> " + content + " " + sx_call("market-bottom-spacer") + ")"
+    content = "(<> " + content + " " + '(div :class "pb-8")' + ")"

    oobs = root_header_sx(ctx, oob=True)
    return oob_page_sx(oobs=oobs, content=content)
@@ -1272,7 +1274,7 @@ async def render_page_markets_page(ctx: dict, markets: list, has_more: bool,
        content = _markets_grid(cards)
    else:
        content = _no_markets_sx("No markets for this page")
-    content = "(<> " + content + " " + sx_call("market-bottom-spacer") + ")"
+    content = "(<> " + content + " " + '(div :class "pb-8")' + ")"

    hdr = root_header_sx(ctx)
    hdr = "(<> " + hdr + " " + header_child_sx(_post_header_sx(ctx)) + ")"
@@ -1296,7 +1298,7 @@ async def render_page_markets_oob(ctx: dict, markets: list, has_more: bool,
        content = _markets_grid(cards)
    else:
        content = _no_markets_sx("No markets for this page")
-    content = "(<> " + content + " " + sx_call("market-bottom-spacer") + ")"
+    content = "(<> " + content + " " + '(div :class "pb-8")' + ")"

    oobs = _oob_header_sx("post-header-child", "market-header-child", "")
    oobs = "(<> " + oobs + " " + _post_header_sx(ctx, oob=True) + ")"
@@ -1535,12 +1537,17 @@ async def _markets_admin_panel_sx(ctx: dict) -> str:
    form_html = ""
    if can_create:
        create_url = url_for("page_admin.create_market")
-        form_html = sx_call("market-admin-create-form",
-                           create_url=create_url, csrf=csrf)
+        form_html = sx_call("crud-create-form",
+                           create_url=create_url, csrf=csrf,
+                           errors_id="market-create-errors",
+                           list_id="markets-list",
+                           placeholder="e.g. Suma, Craft Fair",
+                           btn_label="Add market")

    list_html = _markets_admin_list_sx(ctx, markets)
-    return sx_call("market-admin-panel",
-                  form=SxExpr(form_html), list=SxExpr(list_html))
+    return sx_call("crud-panel",
+                  form=SxExpr(form_html), list=SxExpr(list_html),
+                  list_id="markets-list")


 def _markets_admin_list_sx(ctx: dict, markets: list) -> str:
@@ -1552,7 +1559,9 @@ def _markets_admin_list_sx(ctx: dict, markets: list) -> str:
    prefix = route_prefix()

    if not markets:
-        return sx_call("market-admin-empty")
+        return sx_call("empty-state",
+                        message="No markets yet. Create one above.",
+                        cls="text-gray-500 mt-4")

    parts = []
    for m in markets:
@@ -1562,9 +1571,12 @@ def _markets_admin_list_sx(ctx: dict, markets: list) -> str:
        href = prefix + f"/{post_slug}/{m_slug}/"
        del_url = url_for("page_admin.delete_market", market_slug=m_slug)
        csrf_hdr = f'{{"X-CSRFToken":"{csrf}"}}'
-        parts.append(sx_call("market-admin-item",
+        parts.append(sx_call("crud-item",
                            href=href, name=m_name, slug=m_slug,
-                            del_url=del_url, csrf_hdr=csrf_hdr))
+                            del_url=del_url, csrf_hdr=csrf_hdr,
+                            list_id="markets-list",
+                            confirm_title="Delete market?",
+                            confirm_text="Products will be hidden (soft delete)"))
    return "".join(parts)


--- a/orders/sx/checkout.sx
+++ b/orders/sx/checkout.sx
@@ -1,38 +0,0 @@
-;; Checkout error components
-
-(defcomp ~orders-checkout-error-header ()
-  (header :class "mb-6 sm:mb-8"
-    (h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight" "Checkout error")
-    (p :class "text-xs sm:text-sm text-stone-600" "We tried to start your payment with SumUp but hit a problem.")))
-
-(defcomp ~orders-checkout-error-order-id (&key oid)
-  (p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" oid)))
-
-(defcomp ~orders-checkout-error-pay-btn (&key url)
-  (a :href url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
-    (i :class "fa fa-credit-card mr-2" :aria-hidden "true") "Open payment page"))
-
-(defcomp ~orders-checkout-error-content (&key msg order back-url)
-  (div :class "max-w-full px-3 py-3 space-y-4"
-    (div :class "rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2"
-      (p :class "font-medium" "Something went wrong.")
-      (p msg)
-      order)
-    (div
-      (a :href back-url
-        :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
-        (i :class "fa fa-shopping-cart mr-2" :aria-hidden "true") "Back to cart"))))
-
-(defcomp ~orders-detail-filter (&key created status list-url recheck-url csrf pay)
-  (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
-    (div :class "space-y-1"
-      (p :class "text-xs sm:text-sm text-stone-600" "Placed " created " \u00b7 Status: " status))
-    (div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"
-      (a :href list-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
-        (i :class "fa-solid fa-list mr-2" :aria-hidden "true") "All orders")
-      (form :method "post" :action recheck-url :class "inline"
-        (input :type "hidden" :name "csrf_token" :value csrf)
-        (button :type "submit"
-          :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
-          (i :class "fa-solid fa-rotate mr-2" :aria-hidden "true") "Re-check status"))
-      pay)))
--- a/orders/sx/detail.sx
+++ b/orders/sx/detail.sx
@@ -1,54 +0,0 @@
-;; Order detail components
-
-(defcomp ~orders-item-image (&key src alt)
-  (img :src src :alt alt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async"))
-
-(defcomp ~orders-item-no-image ()
-  (div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image"))
-
-(defcomp ~orders-item-row (&key href img title pid qty price)
-  (li (a :class "w-full py-2 flex gap-3" :href href
-    (div :class "w-12 h-12 sm:w-14 sm:h-14 rounded-md bg-stone-100 flex-shrink-0 overflow-hidden" img)
-    (div :class "flex-1 flex justify-between gap-3"
-      (div
-        (p :class "font-medium" title)
-        (p :class "text-[11px] text-stone-500" "Product ID: " pid))
-      (div :class "text-right whitespace-nowrap"
-        (p "Qty: " qty)
-        (p price))))))
-
-(defcomp ~orders-items-section (&key items)
-  (div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6"
-    (h2 :class "text-sm sm:text-base font-semibold mb-3" "Items")
-    (ul :class "divide-y divide-stone-100 text-xs sm:text-sm" items)))
-
-(defcomp ~orders-calendar-item (&key name pill state ds cost)
-  (li :class "px-4 py-3 flex items-start justify-between text-sm"
-    (div
-      (div :class "font-medium flex items-center gap-2"
-        name
-        (span :class pill state))
-      (div :class "text-xs text-stone-500" ds))
-    (div :class "ml-4 font-medium" cost)))
-
-(defcomp ~orders-calendar-section (&key items)
-  (section :class "mt-6 space-y-3"
-    (h2 :class "text-base sm:text-lg font-semibold" "Calendar bookings in this order")
-    (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" items)))
-
-(defcomp ~orders-detail-panel (&key summary items calendar)
-  (div :class "max-w-full px-3 py-3 space-y-4"
-    summary items calendar))
-
-(defcomp ~orders-detail-header-stack (&key auth orders order)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    auth
-    (div :id "auth-header-child" :class "flex flex-col w-full items-center"
-      orders
-      (div :id "orders-header-child" :class "flex flex-col w-full items-center"
-        order))))
-
-(defcomp ~orders-header-child-oob (&key inner)
-  (div :id "orders-header-child" :sx-swap-oob "outerHTML"
-    :class "flex flex-col w-full items-center"
-    inner))
--- a/orders/sx/list.sx
+++ b/orders/sx/list.sx
@@ -1,60 +0,0 @@
-;; Orders list components
-
-(defcomp ~orders-row-desktop (&key oid created desc total pill status url)
-  (tr :class "hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60"
-    (td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" oid))
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" created)
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" desc)
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" total)
-    (td :class "px-3 py-2 align-top" (span :class pill status))
-    (td :class "px-3 py-0.5 align-top text-right"
-      (a :href url :class "inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition" "View"))))
-
-(defcomp ~orders-row-mobile (&key oid created total pill status url)
-  (tr :class "sm:hidden border-t border-stone-100"
-    (td :colspan "5" :class "px-3 py-3"
-      (div :class "flex flex-col gap-2 text-xs"
-        (div :class "flex items-center justify-between gap-2"
-          (span :class "font-mono text-[11px] text-stone-700" oid)
-          (span :class pill status))
-        (div :class "text-[11px] text-stone-500 break-words" created)
-        (div :class "flex items-center justify-between gap-2"
-          (div :class "font-medium text-stone-800" total)
-          (a :href url :class "inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0" "View"))))))
-
-(defcomp ~orders-end-row ()
-  (tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400" "End of results")))
-
-(defcomp ~orders-empty-state ()
-  (div :class "max-w-full px-3 py-3 space-y-3"
-    (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700"
-      "No orders yet.")))
-
-(defcomp ~orders-table (&key rows)
-  (div :class "max-w-full px-3 py-3 space-y-3"
-    (div :class "overflow-x-auto rounded-2xl border border-stone-200 bg-white/80"
-      (table :class "min-w-full text-xs sm:text-sm"
-        (thead :class "bg-stone-50 border-b border-stone-200 text-stone-600"
-          (tr
-            (th :class "px-3 py-2 text-left font-medium" "Order")
-            (th :class "px-3 py-2 text-left font-medium" "Created")
-            (th :class "px-3 py-2 text-left font-medium" "Description")
-            (th :class "px-3 py-2 text-left font-medium" "Total")
-            (th :class "px-3 py-2 text-left font-medium" "Status")
-            (th :class "px-3 py-2 text-left font-medium" "")))
-        (tbody rows)))))
-
-(defcomp ~orders-summary (&key search-mobile)
-  (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
-    (div :class "space-y-1" (p :class "text-xs sm:text-sm text-stone-600" "Recent orders placed via the checkout."))
-    (div :class "md:hidden" search-mobile)))
-
-;; Header child wrapper
-(defcomp ~orders-header-child (&key inner)
-  (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    inner))
-
-(defcomp ~orders-auth-header-child-oob (&key inner)
-  (div :id "auth-header-child" :sx-swap-oob "outerHTML"
-    :class "flex flex-col w-full items-center"
-    inner))
--- a/orders/sx/sx_components.py
+++ b/orders/sx/sx_components.py
@@ -103,12 +103,12 @@ def _orders_rows_sx(orders: list, page: int, total_pages: int,
    parts = []
    for o in orders:
        d = _order_row_data(o, pfx + url_for_fn("orders.order.order_detail", order_id=o.id))
-        parts.append(sx_call("orders-row-desktop",
+        parts.append(sx_call("order-row-desktop",
                               oid=d["oid"], created=d["created"],
                               desc=d["desc"], total=d["total"],
                               pill=d["pill_desktop"], status=d["status"],
                               url=d["url"]))
-        parts.append(sx_call("orders-row-mobile",
+        parts.append(sx_call("order-row-mobile",
                               oid=d["oid"], created=d["created"],
                               total=d["total"], pill=d["pill_mobile"],
                               status=d["status"], url=d["url"]))
@@ -120,7 +120,7 @@ def _orders_rows_sx(orders: list, page: int, total_pages: int,
                               total_pages=total_pages,
                               id_prefix="orders", colspan=5))
    else:
-        parts.append(sx_call("orders-end-row"))
+        parts.append(sx_call("order-end-row"))

    return "(<> " + " ".join(parts) + ")"

@@ -128,13 +128,13 @@ def _orders_rows_sx(orders: list, page: int, total_pages: int,
 def _orders_main_panel_sx(orders: list, rows_sx: str) -> str:
    """Main panel with table or empty state (sx)."""
    if not orders:
-        return sx_call("orders-empty-state")
-    return sx_call("orders-table", rows=SxExpr(rows_sx))
+        return sx_call("order-empty-state")
+    return sx_call("order-table", rows=SxExpr(rows_sx))


 def _orders_summary_sx(ctx: dict) -> str:
    """Filter section for orders list (sx)."""
-    return sx_call("orders-summary", search_mobile=SxExpr(search_mobile_sx(ctx)))
+    return sx_call("order-list-header", search_mobile=SxExpr(search_mobile_sx(ctx)))



@@ -189,8 +189,9 @@ async def render_orders_oob(ctx: dict, orders: list, page: int,
    main = _orders_main_panel_sx(orders, rows)

    auth_hdr = _auth_header_sx(ctx, oob=True)
-    auth_child_oob = sx_call("orders-auth-header-child-oob",
-                                inner=SxExpr(_orders_header_sx(ctx, list_url)))
+    auth_child_oob = sx_call("oob-header-sx",
+                                parent_id="auth-header-child",
+                                row=SxExpr(_orders_header_sx(ctx, list_url)))
    root_hdr = root_header_sx(ctx, oob=True)
    oobs = "(<> " + auth_hdr + " " + auth_child_oob + " " + root_hdr + ")"

@@ -213,23 +214,23 @@ def _order_items_sx(order: Any) -> str:
        prod_url = market_product_url(item.product_slug)
        if item.product_image:
            img = sx_call(
-                "orders-item-image",
+                "order-item-image",
                src=item.product_image, alt=item.product_title or "Product image",
            )
        else:
-            img = sx_call("orders-item-no-image")
+            img = sx_call("order-item-no-image")

        items.append(sx_call(
-            "orders-item-row",
+            "order-item-row",
            href=prod_url, img=SxExpr(img),
            title=item.product_title or "Unknown product",
-            pid=str(item.product_id),
-            qty=str(item.quantity),
+            pid=f"Product ID: {item.product_id}",
+            qty=f"Qty: {item.quantity}",
            price=f"{item.currency or order.currency or 'GBP'} {item.unit_price or 0:.2f}",
        ))

    items_sx = "(<> " + " ".join(items) + ")"
-    return sx_call("orders-items-section", items=SxExpr(items_sx))
+    return sx_call("order-items-panel", items=SxExpr(items_sx))


 def _calendar_items_sx(calendar_entries: list | None) -> str:
@@ -249,15 +250,15 @@ def _calendar_items_sx(calendar_entries: list | None) -> str:
        if e.end_at:
            ds += f" \u2013 {e.end_at.strftime('%-d %b %Y, %H:%M')}"
        items.append(sx_call(
-            "orders-calendar-item",
+            "order-calendar-entry",
            name=e.name,
            pill=f"inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium {pill}",
-            state=st.capitalize(), ds=ds,
+            status=st.capitalize(), date_str=ds,
            cost=f"\u00a3{e.cost or 0:.2f}",
        ))

    items_sx = "(<> " + " ".join(items) + ")"
-    return sx_call("orders-calendar-section", items=SxExpr(items_sx))
+    return sx_call("order-calendar-section", items=SxExpr(items_sx))


 def _order_main_sx(order: Any, calendar_entries: list | None) -> str:
@@ -272,7 +273,7 @@ def _order_main_sx(order: Any, calendar_entries: list | None) -> str:
    items = _order_items_sx(order)
    calendar = _calendar_items_sx(calendar_entries)
    return sx_call(
-        "orders-detail-panel",
+        "order-detail-panel",
        summary=SxExpr(summary),
        items=SxExpr(items) if items else None,
        calendar=SxExpr(calendar) if calendar else None,
@@ -287,11 +288,11 @@ def _order_filter_sx(order: Any, list_url: str, recheck_url: str,

    pay = ""
    if status != "paid":
-        pay = sx_call("orders-checkout-error-pay-btn", url=pay_url)
+        pay = sx_call("order-pay-btn", url=pay_url)

    return sx_call(
-        "orders-detail-filter",
-        created=created, status=status,
+        "order-detail-filter",
+        info=f"Placed {created} \u00b7 Status: {status}",
        list_url=list_url, recheck_url=recheck_url,
        csrf=csrf_token,
        pay=SxExpr(pay) if pay else None,
@@ -322,7 +323,7 @@ async def render_order_page(ctx: dict, order: Any,
        link_label="Order", icon="fa fa-gbp",
    )
    detail_header = sx_call(
-        "orders-detail-header-stack",
+        "order-detail-header-stack",
        auth=SxExpr(_auth_header_sx(ctx)),
        orders=SxExpr(_orders_header_sx(ctx, list_url)),
        order=SxExpr(order_row),
@@ -353,8 +354,9 @@ async def render_order_oob(ctx: dict, order: Any,
        id="order-row", level=3, colour="sky", link_href=detail_url,
        link_label="Order", icon="fa fa-gbp", oob=True,
    )
-    header_child_oob = sx_call("orders-header-child-oob",
-                                  inner=SxExpr(order_row_oob))
+    header_child_oob = sx_call("oob-header-sx",
+                                  parent_id="orders-header-child",
+                                  row=SxExpr(order_row_oob))
    root_hdr = root_header_sx(ctx, oob=True)
    oobs = "(<> " + header_child_oob + " " + root_hdr + ")"

@@ -366,17 +368,17 @@ async def render_order_oob(ctx: dict, order: Any,
 # ---------------------------------------------------------------------------

 def _checkout_error_filter_sx() -> str:
-    return sx_call("orders-checkout-error-header")
+    return sx_call("checkout-error-header")


 def _checkout_error_content_sx(error: str | None, order: Any | None) -> str:
    err_msg = error or "Unexpected error while creating the hosted checkout session."
    order_sx = ""
    if order:
-        order_sx = sx_call("orders-checkout-error-order-id", oid=f"#{order.id}")
+        order_sx = sx_call("checkout-error-order-id", oid=f"#{order.id}")
    back_url = cart_url("/")
    return sx_call(
-        "orders-checkout-error-content",
+        "checkout-error-content",
        msg=err_msg,
        order=SxExpr(order_sx) if order_sx else None,
        back_url=back_url,
--- a/shared/browser/app/errors.py
+++ b/shared/browser/app/errors.py
@@ -223,16 +223,21 @@ def errors(app):
                errnum='403'
            )
        else:
-            try:
-                html = _sx_error_page(
-                    "403", "FORBIDDEN",
-                    image="/static/errors/403.gif",
-                )
-            except Exception:
-                html = await render_template(
-                    "_types/root/exceptions/_.html",
-                    errnum='403',
-                )
+            html = await _rich_error_page(
+                "403", "FORBIDDEN",
+                image="/static/errors/403.gif",
+            )
+            if html is None:
+                try:
+                    html = _sx_error_page(
+                        "403", "FORBIDDEN",
+                        image="/static/errors/403.gif",
+                    )
+                except Exception:
+                    html = await render_template(
+                        "_types/root/exceptions/_.html",
+                        errnum='403',
+                    )

        return await make_response(html, 403)

@@ -291,7 +296,11 @@ def errors(app):
                status,
            )

-        # Raw HTML — avoids context processor / fragment loop on errors.
-        return await make_response(_error_page(
-            "WELL THIS IS EMBARRASSING&hellip;"
-        ), status)
+        errnum = str(status)
+        html = await _rich_error_page(
+            errnum, "WELL THIS IS EMBARRASSING\u2026",
+            image="/static/errors/error.gif",
+        )
+        if html is None:
+            html = _error_page("WELL THIS IS EMBARRASSING&hellip;")
+        return await make_response(html, status)
--- a/shared/browser/templates/_types/root/_head.html
+++ b/shared/browser/templates/_types/root/_head.html
@@ -6,7 +6,7 @@
    <link rel="stylesheet" type="text/css" href="{{asset_url('styles/blog-content.css')}}">
    
    <meta name="csrf-token" content="{{ csrf_token() }}">
-    <link rel="stylesheet" type="text/css" href="{{asset_url('styles/tw.css')}}">
+    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <link rel="stylesheet" href="{{asset_url('fontawesome/css/all.min.css')}}">
    <link rel="stylesheet" href="{{asset_url('fontawesome/css/v4-shims.min.css')}}">
    <link href="https://unpkg.com/prismjs/themes/prism.css" rel="stylesheet" />
--- a/shared/infrastructure/factory.py
+++ b/shared/infrastructure/factory.py
@@ -77,6 +77,8 @@ def create_base_app(
        template_folder=TEMPLATE_DIR,
        root_path=str(BASE_DIR),
    )
+    # Disable aggressive browser caching of static files in dev
+    app.config["SEND_FILE_MAX_AGE_DEFAULT"] = 0

    configure_logging(name)

--- a/shared/static/scripts/editor.css
+++ b/shared/static/scripts/editor.css
--- a/shared/static/scripts/editor.js
+++ b/shared/static/scripts/editor.js
--- a/shared/static/scripts/sx.js
+++ b/shared/static/scripts/sx.js
@@ -1,5 +1,5 @@
 /**
- * sx.js — S-expression parser, evaluator, and DOM renderer.
+ * sx.js — S-expression parser, evaluator, and DOM renderer. [v2-debug]
 *
 * Client-side counterpart to shared/sx/ Python modules.
 * Parses s-expression text, evaluates it, and renders to DOM nodes.
@@ -1293,8 +1293,13 @@

    // Component management
    loadComponents: function (text) {
-      var exprs = parseAll(text);
-      for (var i = 0; i < exprs.length; i++) sxEval(exprs[i], _componentEnv);
+      try {
+        var exprs = parseAll(text);
+        for (var i = 0; i < exprs.length; i++) sxEval(exprs[i], _componentEnv);
+      } catch (err) {
+        console.error("sx.js loadComponents error [v2]:", err, "\ntext first 500:", text ? text.substring(0, 500) : "(empty)");
+        throw err;
+      }
    },

    getEnv: function () { return _componentEnv; },
@@ -1630,79 +1635,124 @@
        return resp.text().then(function (text) {
          dispatch(el, "sx:afterRequest", { response: resp });

-          // Check for text/sx content type
+          // Process the response
+          var swapStyle = el.getAttribute("sx-swap") || DEFAULT_SWAP;
+          var target = resolveTarget(el, null);
+          var selectSel = el.getAttribute("sx-select");
+
+          // Check for text/sx content type — use direct DOM rendering path
          var ct = resp.headers.get("Content-Type") || "";
          if (ct.indexOf("text/sx") >= 0) {
            try {
              // Strip and load any <script type="text/sx" data-components> blocks
              text = text.replace(/<script[^>]*type="text\/sx"[^>]*data-components[^>]*>([\s\S]*?)<\/script>/gi,
                function (_, defs) { Sx.loadComponents(defs); return ""; });
-              text = Sx.renderToString(text.trim());
-            }
-            catch (err) {
-              console.error("sx.js render error:", err);
+              var sxSource = text.trim();
+
+              // Parse and render to live DOM nodes (skip renderToString + DOMParser)
+              if (sxSource && sxSource.charAt(0) !== "(") {
+                console.error("sx.js: sxSource does not start with '(' — first 200 chars:", sxSource.substring(0, 200));
+              }
+              var sxDom = Sx.render(sxSource);
+
+              // Wrap in container for querySelectorAll (DocumentFragment doesn't support it)
+              var container = document.createElement("div");
+              container.appendChild(sxDom);
+
+              // OOB processing on live DOM nodes
+              var oobs = container.querySelectorAll("[sx-swap-oob]");
+              oobs.forEach(function (oob) {
+                var oobSwap = oob.getAttribute("sx-swap-oob") || "outerHTML";
+                var oobTarget = document.getElementById(oob.id);
+                oob.removeAttribute("sx-swap-oob");
+                oob.parentNode.removeChild(oob);
+                if (oobTarget) _swapDOM(oobTarget, oob, oobSwap);
+              });
+
+              // hx-swap-oob compat
+              var hxOobs = container.querySelectorAll("[hx-swap-oob]");
+              hxOobs.forEach(function (oob) {
+                var oobSwap = oob.getAttribute("hx-swap-oob") || "outerHTML";
+                var oobTarget = document.getElementById(oob.id);
+                oob.removeAttribute("hx-swap-oob");
+                oob.parentNode.removeChild(oob);
+                if (oobTarget) _swapDOM(oobTarget, oob, oobSwap);
+              });
+
+              // sx-select filtering
+              var selectedDOM;
+              if (selectSel) {
+                selectedDOM = document.createDocumentFragment();
+                selectSel.split(",").forEach(function (sel) {
+                  container.querySelectorAll(sel.trim()).forEach(function (m) {
+                    selectedDOM.appendChild(m);
+                  });
+                });
+              } else {
+                // Use all remaining children
+                selectedDOM = document.createDocumentFragment();
+                while (container.firstChild) selectedDOM.appendChild(container.firstChild);
+              }
+
+              // Main swap using DOM morph
+              if (swapStyle !== "none" && target) {
+                _swapDOM(target, selectedDOM, swapStyle);
+                _hoistHeadElements(target);
+              }
+            } catch (err) {
+              console.error("sx.js render error [v2]:", err, "\nsxSource first 500:", sxSource ? sxSource.substring(0, 500) : "(empty)");
              return;
            }
-          }
-
-          // Process the response
-          var swapStyle = el.getAttribute("sx-swap") || DEFAULT_SWAP;
-          var target = resolveTarget(el, null);
-
-          // sx-select: extract subset from response
-          var selectSel = el.getAttribute("sx-select");
-
-          // Parse response into DOM for OOB + select processing
-          var parser = new DOMParser();
-          var doc = parser.parseFromString(text, "text/html");
-
-          // Process any sx script blocks in the response (e.g. cross-domain component defs)
-          Sx.processScripts(doc);
-
-          // OOB processing: extract elements with sx-swap-oob
-          var oobs = doc.querySelectorAll("[sx-swap-oob]");
-          oobs.forEach(function (oob) {
-            var oobSwap = oob.getAttribute("sx-swap-oob") || "outerHTML";
-            var oobTarget = document.getElementById(oob.id);
-            oob.removeAttribute("sx-swap-oob");
-            if (oobTarget) {
-              _swapContent(oobTarget, oob.outerHTML, oobSwap);
-            }
-            oob.parentNode.removeChild(oob);
-          });
-
-          // Also support hx-swap-oob during migration
-          var hxOobs = doc.querySelectorAll("[hx-swap-oob]");
-          hxOobs.forEach(function (oob) {
-            var oobSwap = oob.getAttribute("hx-swap-oob") || "outerHTML";
-            var oobTarget = document.getElementById(oob.id);
-            oob.removeAttribute("hx-swap-oob");
-            if (oobTarget) {
-              _swapContent(oobTarget, oob.outerHTML, oobSwap);
-            }
-            oob.parentNode.removeChild(oob);
-          });
-
-          // Build final content
-          var content;
-          if (selectSel) {
-            // sx-select may be comma-separated
-            var parts = selectSel.split(",").map(function (s) { return s.trim(); });
-            var frags = [];
-            parts.forEach(function (sel) {
-              var matches = doc.querySelectorAll(sel);
-              matches.forEach(function (m) { frags.push(m.outerHTML); });
-            });
-            content = frags.join("");
          } else {
-            content = doc.body ? doc.body.innerHTML : text;
-          }
+            // HTML string path — existing DOMParser pipeline
+            var parser = new DOMParser();
+            var doc = parser.parseFromString(text, "text/html");

-          // Main swap
-          if (swapStyle !== "none" && target) {
-            _swapContent(target, content, swapStyle);
-            // Auto-hoist any head elements that ended up in body
-            _hoistHeadElements(target);
+            // Process any sx script blocks in the response
+            Sx.processScripts(doc);
+
+            // OOB processing
+            var oobs = doc.querySelectorAll("[sx-swap-oob]");
+            oobs.forEach(function (oob) {
+              var oobSwap = oob.getAttribute("sx-swap-oob") || "outerHTML";
+              var oobTarget = document.getElementById(oob.id);
+              oob.removeAttribute("sx-swap-oob");
+              if (oobTarget) {
+                _swapContent(oobTarget, oob.outerHTML, oobSwap);
+              }
+              oob.parentNode.removeChild(oob);
+            });
+
+            var hxOobs = doc.querySelectorAll("[hx-swap-oob]");
+            hxOobs.forEach(function (oob) {
+              var oobSwap = oob.getAttribute("hx-swap-oob") || "outerHTML";
+              var oobTarget = document.getElementById(oob.id);
+              oob.removeAttribute("hx-swap-oob");
+              if (oobTarget) {
+                _swapContent(oobTarget, oob.outerHTML, oobSwap);
+              }
+              oob.parentNode.removeChild(oob);
+            });
+
+            // Build final content
+            var content;
+            if (selectSel) {
+              var parts = selectSel.split(",").map(function (s) { return s.trim(); });
+              var frags = [];
+              parts.forEach(function (sel) {
+                var matches = doc.querySelectorAll(sel);
+                matches.forEach(function (m) { frags.push(m.outerHTML); });
+              });
+              content = frags.join("");
+            } else {
+              content = doc.body ? doc.body.innerHTML : text;
+            }
+
+            // Main swap
+            if (swapStyle !== "none" && target) {
+              _swapContent(target, content, swapStyle);
+              _hoistHeadElements(target);
+            }
          }

          // History
@@ -1733,7 +1783,180 @@
      });
    }

-    // ---- Swap engine ------------------------------------------------------
+    // ---- DOM morphing ------------------------------------------------------
+
+    /**
+     * Lightweight DOM reconciler — patches oldNode to match newNode in-place,
+     * preserving event listeners, focus, scroll position, and form state on
+     * keyed (id) elements.
+     */
+    function _morphDOM(oldNode, newNode) {
+      // Different node types or tag names → replace wholesale
+      if (oldNode.nodeType !== newNode.nodeType ||
+          oldNode.nodeName !== newNode.nodeName) {
+        oldNode.parentNode.replaceChild(newNode.cloneNode(true), oldNode);
+        return;
+      }
+
+      // Text/comment nodes → update content
+      if (oldNode.nodeType === 3 || oldNode.nodeType === 8) {
+        if (oldNode.nodeValue !== newNode.nodeValue)
+          oldNode.nodeValue = newNode.nodeValue;
+        return;
+      }
+
+      // Element nodes → sync attributes, then recurse children
+      if (oldNode.nodeType === 1) {
+        // Skip morphing focused input to preserve user's in-progress edits
+        if (oldNode === document.activeElement &&
+            (oldNode.tagName === "INPUT" || oldNode.tagName === "TEXTAREA" || oldNode.tagName === "SELECT")) {
+          _syncAttrs(oldNode, newNode);  // sync non-value attrs (class, style, etc.)
+          return;  // don't touch value or children
+        }
+        _syncAttrs(oldNode, newNode);
+        _morphChildren(oldNode, newNode);
+      }
+    }
+
+    function _syncAttrs(old, neu) {
+      // Add/update attributes from new
+      var newAttrs = neu.attributes;
+      for (var i = 0; i < newAttrs.length; i++) {
+        var a = newAttrs[i];
+        if (old.getAttribute(a.name) !== a.value)
+          old.setAttribute(a.name, a.value);
+      }
+      // Remove attributes not in new
+      var oldAttrs = old.attributes;
+      for (var j = oldAttrs.length - 1; j >= 0; j--) {
+        if (!neu.hasAttribute(oldAttrs[j].name))
+          old.removeAttribute(oldAttrs[j].name);
+      }
+    }
+
+    function _morphChildren(oldParent, newParent) {
+      var oldChildren = Array.prototype.slice.call(oldParent.childNodes);
+      var newChildren = Array.prototype.slice.call(newParent.childNodes);
+
+      // Build ID map of old children for keyed matching
+      var oldById = {};
+      for (var k = 0; k < oldChildren.length; k++) {
+        var kid = oldChildren[k];
+        if (kid.id) oldById[kid.id] = kid;
+      }
+
+      var oi = 0;
+      for (var ni = 0; ni < newChildren.length; ni++) {
+        var newChild = newChildren[ni];
+        var matchById = newChild.id ? oldById[newChild.id] : null;
+
+        if (matchById) {
+          // Keyed match — move into position if needed, then morph
+          if (matchById !== oldChildren[oi]) {
+            oldParent.insertBefore(matchById, oldChildren[oi] || null);
+          }
+          _morphDOM(matchById, newChild);
+          oi++;
+        } else if (oi < oldChildren.length) {
+          // Positional match — morph in place
+          var oldChild = oldChildren[oi];
+          if (oldChild.id && !newChild.id) {
+            // Old has ID, new doesn't — insert new before old (don't clobber keyed)
+            oldParent.insertBefore(newChild.cloneNode(true), oldChild);
+          } else {
+            _morphDOM(oldChild, newChild);
+            oi++;
+          }
+        } else {
+          // Extra new children — append
+          oldParent.appendChild(newChild.cloneNode(true));
+        }
+      }
+
+      // Remove leftover old children
+      while (oi < oldChildren.length) {
+        var leftover = oldChildren[oi];
+        if (leftover.parentNode === oldParent) oldParent.removeChild(leftover);
+        oi++;
+      }
+    }
+
+    // ---- DOM-native swap engine --------------------------------------------
+
+    /**
+     * Swap using live DOM nodes (from Sx.render) instead of HTML strings.
+     * Uses _morphDOM for innerHTML/outerHTML to preserve state.
+     */
+    function _swapDOM(target, newNodes, strategy) {
+      // newNodes is a DocumentFragment, Element, or Text node
+      var wrapper;
+      switch (strategy) {
+        case "innerHTML":
+          // Morph children of target to match newNodes
+          if (newNodes.nodeType === 11) {
+            // DocumentFragment — morph its children into target
+            _morphChildren(target, newNodes);
+          } else {
+            wrapper = document.createElement("div");
+            wrapper.appendChild(newNodes);
+            _morphChildren(target, wrapper);
+          }
+          break;
+        case "outerHTML":
+          var parent = target.parentNode;
+          if (newNodes.nodeType === 11) {
+            // Fragment — morph first child, insert rest
+            var first = newNodes.firstChild;
+            if (first) {
+              _morphDOM(target, first);
+              var sib = first.nextSibling;  // skip first (used as morph template, not consumed)
+              while (sib) {
+                var next = sib.nextSibling;
+                parent.insertBefore(sib, target.nextSibling);
+                sib = next;
+              }
+            } else {
+              parent.removeChild(target);
+            }
+          } else {
+            _morphDOM(target, newNodes);
+          }
+          _activateScripts(parent);
+          Sx.processScripts(parent);
+          Sx.hydrate(parent);
+          SxEngine.process(parent);
+          return;  // early return like existing outerHTML
+        case "afterend":
+          target.parentNode.insertBefore(newNodes, target.nextSibling);
+          break;
+        case "beforeend":
+          target.appendChild(newNodes);
+          break;
+        case "afterbegin":
+          target.insertBefore(newNodes, target.firstChild);
+          break;
+        case "beforebegin":
+          target.parentNode.insertBefore(newNodes, target);
+          break;
+        case "delete":
+          target.parentNode.removeChild(target);
+          return;
+        default:  // fallback = innerHTML
+          if (newNodes.nodeType === 11) {
+            _morphChildren(target, newNodes);
+          } else {
+            wrapper = document.createElement("div");
+            wrapper.appendChild(newNodes);
+            _morphChildren(target, wrapper);
+          }
+      }
+      _activateScripts(target);
+      Sx.processScripts(target);
+      Sx.hydrate(target);
+      SxEngine.process(target);
+    }
+
+    // ---- Swap engine (string-based, kept as fallback) ----------------------

    /** Scripts inserted via innerHTML/insertAdjacentHTML don't execute.
     *  Recreate them as live elements so the browser fetches & runs them. */
@@ -1942,26 +2165,44 @@
          return resp.text();
        }).then(function (text) {
          // Strip and load any <script type="text/sx" data-components> blocks
-          var hadScript = false;
          text = text.replace(/<script[^>]*type="text\/sx"[^>]*data-components[^>]*>([\s\S]*?)<\/script>/gi,
-            function (_, defs) { hadScript = true; Sx.loadComponents(defs); return ""; });
-          if (hadScript) text = text.trim();
+            function (_, defs) { Sx.loadComponents(defs); return ""; });
+          text = text.trim();
+
          if (text.charAt(0) === "(") {
-            try { text = Sx.renderToString(text); } catch (e) {}
-          }
-          var parser = new DOMParser();
-          var doc = parser.parseFromString(text, "text/html");
-          var newMain = doc.getElementById("main-panel");
-          if (newMain) {
-            main.innerHTML = newMain.innerHTML;
-            _activateScripts(main);
-            Sx.processScripts(main);
-            Sx.hydrate(main);
-            SxEngine.process(main);
-            dispatch(document.body, "sx:afterSettle", { target: main });
-            window.scrollTo(0, e.state && e.state.scrollY || 0);
+            // sx response — render to live DOM, morph into main
+            try {
+              var popDom = Sx.render(text);
+              var popContainer = document.createElement("div");
+              popContainer.appendChild(popDom);
+              var newMain = popContainer.querySelector("#main-panel");
+              _morphChildren(main, newMain || popContainer);
+              _activateScripts(main);
+              Sx.processScripts(main);
+              Sx.hydrate(main);
+              SxEngine.process(main);
+              dispatch(document.body, "sx:afterSettle", { target: main });
+              window.scrollTo(0, e.state && e.state.scrollY || 0);
+            } catch (err) {
+              console.error("sx.js popstate render error [v2]:", err, "\ntext first 500:", text ? text.substring(0, 500) : "(empty)");
+              location.reload();
+            }
          } else {
-            location.reload();
+            // HTML response — parse and morph
+            var parser = new DOMParser();
+            var doc = parser.parseFromString(text, "text/html");
+            var newMain = doc.getElementById("main-panel");
+            if (newMain) {
+              _morphChildren(main, newMain);
+              _activateScripts(main);
+              Sx.processScripts(main);
+              Sx.hydrate(main);
+              SxEngine.process(main);
+              dispatch(document.body, "sx:afterSettle", { target: main });
+              window.scrollTo(0, e.state && e.state.scrollY || 0);
+            } else {
+              location.reload();
+            }
          }
        }).catch(function () {
          location.reload();
@@ -2038,7 +2279,7 @@
  // Auto-init in browser
  // =========================================================================

-  Sx.VERSION = "2026-03-01a";
+  Sx.VERSION = "2026-03-01b-debug";

  if (typeof document !== "undefined") {
    var init = function () {
--- a/shared/sx/helpers.py
+++ b/shared/sx/helpers.py
@@ -127,7 +127,7 @@ def post_header_sx(ctx: dict, *, oob: bool = False) -> str:
        if has_admin and slug:
            from quart import request
            admin_href = call_url(ctx, "blog_url", f"/{slug}/admin/")
-            is_admin_page = "/admin" in request.path
+            is_admin_page = ctx.get("is_admin_section") or "/admin" in request.path
            sel_cls = "!bg-stone-500 !text-white" if is_admin_page else ""
            base_cls = ("justify-center cursor-pointer flex flex-row"
                        " items-center gap-2 rounded bg-stone-200 text-black p-3")
@@ -223,7 +223,7 @@ def oob_header_sx(parent_id: str, child_id: str, row_sx: str) -> str:
 def header_child_sx(inner_sx: str, *, id: str = "root-header-child") -> str:
    """Wrap inner sx in a header-child div."""
    return sx_call("header-child-sx",
-        id=id, inner=SxExpr(inner_sx),
+        id=id, inner=SxExpr(f"(<> {inner_sx})"),
    )


@@ -231,7 +231,7 @@ def oob_page_sx(*, oobs: str = "", filter: str = "", aside: str = "",
                   content: str = "", menu: str = "") -> str:
    """Build OOB response as sx call string."""
    return sx_call("oob-sx",
-        oobs=SxExpr(oobs) if oobs else None,
+        oobs=SxExpr(f"(<> {oobs})") if oobs else None,
        filter=SxExpr(filter) if filter else None,
        aside=SxExpr(aside) if aside else None,
        menu=SxExpr(menu) if menu else None,
@@ -249,7 +249,7 @@ def full_page_sx(ctx: dict, *, header_rows: str,
    meta: sx source for meta tags — auto-hoisted to <head> by sx.js.
    """
    body_sx = sx_call("app-body",
-        header_rows=SxExpr(header_rows) if header_rows else None,
+        header_rows=SxExpr(f"(<> {header_rows})") if header_rows else None,
        filter=SxExpr(filter) if filter else None,
        aside=SxExpr(aside) if aside else None,
        menu=SxExpr(menu) if menu else None,
@@ -345,6 +345,14 @@ def sx_response(source_or_component: str, status: int = 200,
        source = source_or_component

    body = source
+    # Validate the sx source parses as a single expression
+    try:
+        from .parser import parse as _parse_check
+        _parse_check(source)
+    except Exception as _e:
+        import logging
+        logging.getLogger("sx").error("sx_response parse error: %s\nSource (first 500): %s", _e, source[:500])
+
    # For SX requests, prepend missing component definitions
    if request.headers.get("SX-Request"):
        comp_defs = components_for_request()
@@ -353,6 +361,9 @@ def sx_response(source_or_component: str, status: int = 200,
                    f'{comp_defs}</script>\n{body}')

    resp = Response(body, status=status, content_type="text/sx")
+    resp.headers["X-SX-Body-Len"] = str(len(body))
+    resp.headers["X-SX-Source-Len"] = str(len(source))
+    resp.headers["X-SX-Has-Defs"] = "1" if "<script" in body else "0"
    if headers:
        for k, v in headers.items():
            resp.headers[k] = v
@@ -379,7 +390,7 @@ _SX_PAGE_TEMPLATE = """\
 <link rel="stylesheet" type="text/css" href="{asset_url}/styles/cards.css">
 <link rel="stylesheet" type="text/css" href="{asset_url}/styles/blog-content.css">
 <meta name="csrf-token" content="{csrf}">
-<link rel="stylesheet" type="text/css" href="{asset_url}/styles/tw.css">
+<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
 <link rel="stylesheet" href="{asset_url}/fontawesome/css/all.min.css">
 <link rel="stylesheet" href="{asset_url}/fontawesome/css/v4-shims.min.css">
 <link href="https://unpkg.com/prismjs/themes/prism.css" rel="stylesheet">
--- a/shared/sx/parser.py
+++ b/shared/sx/parser.py
@@ -138,6 +138,7 @@ class Tokenizer:
            content = content.replace("\\n", "\n")
            content = content.replace("\\t", "\t")
            content = content.replace('\\"', '"')
+            content = content.replace("\\/", "/")
            content = content.replace("\\\\", "\\")
            return content

@@ -284,6 +285,7 @@ def serialize(expr: Any, indent: int = 0, pretty: bool = False) -> str:
            .replace('"', '\\"')
            .replace("\n", "\\n")
            .replace("\t", "\\t")
+            .replace("</script", "<\\/script")
        )
        return f'"{escaped}"'

--- a/shared/sx/templates/auth.sx
+++ b/shared/sx/templates/auth.sx
@@ -0,0 +1,33 @@
+;; Shared auth components — login flow, check email
+;; Used by account and federation services.
+
+(defcomp ~auth-error-banner (&key error)
+  (when error
+    (div :class "bg-red-50 border border-red-200 text-red-700 p-3 rounded mb-4"
+      error)))
+
+(defcomp ~auth-login-form (&key error action csrf-token email)
+  (div :class "py-8 max-w-md mx-auto"
+    (h1 :class "text-2xl font-bold mb-6" "Sign in")
+    error
+    (form :method "post" :action action :class "space-y-4"
+      (input :type "hidden" :name "csrf_token" :value csrf-token)
+      (div
+        (label :for "email" :class "block text-sm font-medium mb-1" "Email address")
+        (input :type "email" :name "email" :id "email" :value email :required true :autofocus true
+          :class "w-full border border-stone-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-stone-500"))
+      (button :type "submit"
+        :class "w-full bg-stone-800 text-white py-2 px-4 rounded hover:bg-stone-700 transition"
+        "Send magic link"))))
+
+(defcomp ~auth-check-email-error (&key error)
+  (when error
+    (div :class "bg-yellow-50 border border-yellow-200 text-yellow-700 p-3 rounded mt-4"
+      error)))
+
+(defcomp ~auth-check-email (&key email error)
+  (div :class "py-8 max-w-md mx-auto text-center"
+    (h1 :class "text-2xl font-bold mb-4" "Check your email")
+    (p :class "text-stone-600 mb-2" "We sent a sign-in link to " (strong email) ".")
+    (p :class "text-stone-500 text-sm" "Click the link in the email to sign in. The link expires in 15 minutes.")
+    error))
--- a/shared/sx/templates/layout.sx
+++ b/shared/sx/templates/layout.sx
@@ -68,7 +68,9 @@
        (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 ""))))
+            (h1 (or site-title ""))
+            (when app-label
+              (span :class "text-lg text-white/80 font-normal" app-label))))
        (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)
--- a/shared/sx/templates/misc.sx
+++ b/shared/sx/templates/misc.sx
@@ -1,4 +1,4 @@
-;; Miscellaneous shared components for Phase 3 conversion
+;; Miscellaneous shared components

 ;; The single place where raw! lives — for CMS content (Ghost post body,
 ;; product descriptions, etc.) that arrives as pre-rendered HTML.
@@ -33,3 +33,226 @@
      :sx-select hx-select :sx-swap "outerHTML"
      :sx-push-url "true" :class nav-class
      label)))
+
+;; ---------------------------------------------------------------------------
+;; Shared sentinel components — infinite scroll triggers
+;; ---------------------------------------------------------------------------
+
+(defcomp ~sentinel-mobile (&key id next-url hyperscript)
+  (div :id id :class "block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"
+    :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinelmobile:retry"
+    :sx-swap "outerHTML" :_ hyperscript
+    :role "status" :aria-live "polite" :aria-hidden "true"
+    (div :class "js-loading hidden flex justify-center py-8"
+      (div :class "animate-spin h-8 w-8 border-4 border-stone-300 border-t-stone-600 rounded-full"))
+    (div :class "js-neterr hidden text-center py-8 text-stone-400"
+      (i :class "fa fa-exclamation-triangle text-2xl")
+      (p :class "mt-2" "Loading failed \u2014 retrying\u2026"))))
+
+(defcomp ~sentinel-desktop (&key id next-url hyperscript)
+  (div :id id :class "hidden md:block h-4 opacity-0 pointer-events-none"
+    :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinel:retry"
+    :sx-swap "outerHTML" :_ hyperscript
+    :role "status" :aria-live "polite" :aria-hidden "true"
+    (div :class "js-loading hidden flex justify-center py-2"
+      (div :class "animate-spin h-6 w-6 border-2 border-stone-300 border-t-stone-600 rounded-full"))
+    (div :class "js-neterr hidden text-center py-2 text-stone-400 text-sm" "Retry\u2026")))
+
+(defcomp ~sentinel-simple (&key id next-url)
+  (div :id id :class "h-4 opacity-0 pointer-events-none"
+    :sx-get next-url :sx-trigger "intersect once delay:250ms" :sx-swap "outerHTML"
+    :role "status" :aria-hidden "true"
+    (div :class "text-center text-xs text-stone-400" "loading...")))
+
+(defcomp ~end-of-results (&key cls)
+  (div :class (or cls "col-span-full mt-4 text-center text-xs text-stone-400") "End of results"))
+
+;; ---------------------------------------------------------------------------
+;; Shared empty state — icon + message + optional action
+;; ---------------------------------------------------------------------------
+
+(defcomp ~empty-state (&key icon message cls &rest children)
+  (div :class (or cls "p-8 text-center text-stone-400")
+    (when icon (div (i :class (str icon " text-4xl mb-2") :aria-hidden "true")))
+    (p message)
+    children))
+
+;; ---------------------------------------------------------------------------
+;; Shared badge — inline pill with configurable colours
+;; ---------------------------------------------------------------------------
+
+(defcomp ~badge (&key label cls)
+  (span :class (str "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium " (or cls "bg-stone-100 text-stone-700"))
+    label))
+
+;; ---------------------------------------------------------------------------
+;; Shared delete button with confirm dialog
+;; ---------------------------------------------------------------------------
+
+(defcomp ~delete-btn (&key url trigger-target title text confirm-text cancel-text
+                           sx-headers cls)
+  (button :type "button"
+    :data-confirm "" :data-confirm-title (or title "Delete?")
+    :data-confirm-text (or text "Are you sure?")
+    :data-confirm-icon "warning"
+    :data-confirm-confirm-text (or confirm-text "Yes, delete")
+    :data-confirm-cancel-text (or cancel-text "Cancel")
+    :data-confirm-event "confirmed"
+    :sx-delete url :sx-trigger "confirmed"
+    :sx-target trigger-target :sx-swap "outerHTML"
+    :sx-headers sx-headers
+    :class (or cls "px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800")
+    (i :class "fa fa-trash") " Delete"))
+
+;; ---------------------------------------------------------------------------
+;; Shared price display — special + regular with strikethrough
+;; ---------------------------------------------------------------------------
+
+(defcomp ~price (&key special-price regular-price)
+  (div :class "mt-1 flex items-baseline gap-2 justify-center"
+    (when special-price (div :class "text-lg font-semibold text-emerald-700" special-price))
+    (when (and special-price regular-price) (div :class "text-sm line-through text-stone-500" regular-price))
+    (when (and (not special-price) regular-price) (div :class "mt-1 text-lg font-semibold" regular-price))))
+
+;; ---------------------------------------------------------------------------
+;; Shared image-or-placeholder
+;; ---------------------------------------------------------------------------
+
+(defcomp ~img-or-placeholder (&key src alt size-cls placeholder-icon placeholder-text)
+  (if src
+    (img :src src :alt (or alt "") :class (or size-cls "w-12 h-12 rounded-full object-cover flex-shrink-0"))
+    (div :class (str (or size-cls "w-12 h-12 rounded-full") " bg-stone-200 flex items-center justify-center flex-shrink-0")
+      (if placeholder-icon
+        (i :class (str placeholder-icon " text-stone-400") :aria-hidden "true")
+        (when placeholder-text placeholder-text)))))
+
+;; ---------------------------------------------------------------------------
+;; Shared view toggle — list/tile view switcher
+;; ---------------------------------------------------------------------------
+
+(defcomp ~list-svg ()
+  (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")))
+
+(defcomp ~tile-svg ()
+  (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")))
+
+(defcomp ~view-toggle (&key list-href tile-href hx-select list-cls tile-cls
+                             storage-key list-svg tile-svg)
+  (div :class "hidden md:flex justify-end px-3 pt-3 gap-1"
+    (a :href list-href :sx-get list-href :sx-target "#main-panel" :sx-select hx-select
+      :sx-swap "outerHTML" :sx-push-url "true" :class (str "p-1.5 rounded " list-cls) :title "List view"
+      :_ (str "on click js localStorage.removeItem('" (or storage-key "view") "') end")
+      (or list-svg (~list-svg)))
+    (a :href tile-href :sx-get tile-href :sx-target "#main-panel" :sx-select hx-select
+      :sx-swap "outerHTML" :sx-push-url "true" :class (str "p-1.5 rounded " tile-cls) :title "Tile view"
+      :_ (str "on click js localStorage.setItem('" (or storage-key "view") "','tile') end")
+      (or tile-svg (~tile-svg)))))
+
+;; ---------------------------------------------------------------------------
+;; Shared CRUD admin panel — for calendars, markets, etc.
+;; ---------------------------------------------------------------------------
+
+(defcomp ~crud-create-form (&key create-url csrf errors-id list-id placeholder label btn-label)
+  (<>
+    (div :id (or errors-id "crud-create-errors") :class "mt-2 text-sm text-red-600")
+    (form :class "mt-4 flex gap-2 items-end" :sx-post create-url
+          :sx-target (str "#" (or list-id "crud-list")) :sx-select (str "#" (or list-id "crud-list")) :sx-swap "outerHTML"
+          :sx-on:beforeRequest (str "document.querySelector('#" (or errors-id "crud-create-errors") "').textContent='';")
+          :sx-on:responseError (str "document.querySelector('#" (or errors-id "crud-create-errors") "').textContent='Error'; if(event.detail.response){event.detail.response.clone().text().then(function(t){event.target.closest('form').querySelector('[id$=errors]').innerHTML=t})}")
+      (input :type "hidden" :name "csrf_token" :value csrf)
+      (div :class "flex-1"
+        (label :class "block text-sm text-gray-600" (or label "Name"))
+        (input :name "name" :type "text" :required true :class "w-full border rounded px-3 py-2"
+               :placeholder (or placeholder "Name")))
+      (button :type "submit" :class "border rounded px-3 py-2" (or btn-label "Add")))))
+
+(defcomp ~crud-panel (&key form list list-id)
+  (section :class "p-4"
+    form
+    (div :id (or list-id "crud-list") :class "mt-6" list)))
+
+(defcomp ~crud-item (&key href name slug del-url csrf-hdr list-id
+                           confirm-title confirm-text)
+  (div :class "mt-6 border rounded-lg p-4"
+    (div :class "flex items-center justify-between gap-3"
+      (a :class "flex items-baseline gap-3" :href href
+         :sx-get href :sx-target "#main-panel" :sx-select "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
+        (h3 :class "font-semibold" name)
+        (h4 :class "text-gray-500" (str "/" slug "/")))
+      (button :class "text-sm border rounded px-3 py-1 hover:bg-red-50 hover:border-red-400"
+              :data-confirm true :data-confirm-title (or confirm-title "Delete?")
+              :data-confirm-text (or confirm-text "This will be soft deleted")
+              :data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
+              :data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
+              :sx-delete del-url :sx-trigger "confirmed"
+              :sx-target (str "#" (or list-id "crud-list")) :sx-select (str "#" (or list-id "crud-list")) :sx-swap "outerHTML"
+              :sx-headers csrf-hdr
+        (i :class "fa-solid fa-trash")))))
+
+;; ---------------------------------------------------------------------------
+;; Shared SumUp settings form — payment credentials (merchant code, API key,
+;; checkout prefix) used by blog, events, and cart admin panels.
+;; ---------------------------------------------------------------------------
+
+(defcomp ~sumup-settings-form (&key update-url csrf merchant-code placeholder
+                                     input-cls sumup-configured checkout-prefix
+                                     panel-id sx-select)
+  (div :id (or panel-id "payments-panel") :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"
+    (h3 :class "text-lg font-semibold text-stone-800"
+      (i :class "fa fa-credit-card text-purple-600 mr-1") " SumUp Payment")
+    (p :class "text-xs text-stone-400 mt-1 mb-3"
+      "Configure per-page SumUp credentials. Leave blank to use the global merchant account.")
+    (form :sx-put update-url
+      :sx-target (str "#" (or panel-id "payments-panel"))
+      :sx-swap "outerHTML"
+      :sx-select sx-select
+      :class "space-y-3"
+      (when csrf (input :type "hidden" :name "csrf_token" :value csrf))
+      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Merchant Code")
+        (input :type "text" :name "merchant_code" :value merchant-code :placeholder "e.g. ME4J6100"
+          :class (or input-cls "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500")))
+      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "API Key")
+        (input :type "password" :name "api_key" :value "" :placeholder placeholder
+          :class (or input-cls "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"))
+        (when sumup-configured (p :class "text-xs text-stone-400 mt-0.5" "Key is set. Leave blank to keep current key.")))
+      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Checkout Reference Prefix")
+        (input :type "text" :name "checkout_prefix" :value checkout-prefix :placeholder "e.g. ROSE-"
+          :class (or input-cls "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500")))
+      (button :type "submit"
+        :class "px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500"
+        "Save SumUp Settings")
+      (when sumup-configured (span :class "ml-2 text-xs text-green-600"
+        (i :class "fa fa-check-circle") " Connected")))))
+
+;; ---------------------------------------------------------------------------
+;; Shared avatar — image or initial-letter placeholder
+;; ---------------------------------------------------------------------------
+
+(defcomp ~avatar (&key src cls initial)
+  (if src
+    (img :src src :alt "" :class cls)
+    (div :class cls initial)))
+
+;; ---------------------------------------------------------------------------
+;; Shared scroll-nav wrapper — horizontal scrollable nav with arrows
+;; ---------------------------------------------------------------------------
+
+(defcomp ~scroll-nav-wrapper (&key wrapper-id container-id arrow-cls left-hs scroll-hs right-hs items oob)
+  (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 wrapper-id :sx-swap-oob (if oob "outerHTML" nil)
+    (button :class (str (or arrow-cls "nav-arrow") " hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded")
+      :aria-label "Scroll left"
+      :_ left-hs (i :class "fa fa-chevron-left"))
+    (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"
+      :style "scroll-behavior: smooth;" :_ scroll-hs
+      (div :class "flex flex-col sm:flex-row gap-1" items))
+    (style ".scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }")
+    (button :class (str (or arrow-cls "nav-arrow") " hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded")
+      :aria-label "Scroll right"
+      :_ right-hs (i :class "fa fa-chevron-right"))))
--- a/shared/sx/templates/nav.sx
+++ b/shared/sx/templates/nav.sx
@@ -3,10 +3,6 @@
 (defcomp ~blog-nav-empty (&key wrapper-id)
  (div :id wrapper-id :sx-swap-oob "outerHTML"))

-(defcomp ~blog-nav-item-image (&key src label)
-  (if src (img :src src :alt label :class "w-8 h-8 rounded-full object-cover flex-shrink-0")
-    (div :class "w-8 h-8 rounded-full bg-stone-200 flex-shrink-0")))
-
 (defcomp ~blog-nav-item-link (&key href hx-get selected nav-cls img label)
  (div (a :href href :sx-get hx-get :sx-target "#main-panel"
    :sx-swap "outerHTML" :sx-push-url "true"
@@ -17,51 +13,13 @@
  (div (a :href href :aria-selected selected :class nav-cls
    img (span label))))

-(defcomp ~blog-nav-wrapper (&key arrow-cls container-id left-hs scroll-hs right-hs items)
-  (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" :sx-swap-oob "outerHTML"
-    (button :class (str arrow-cls " hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded")
-      :aria-label "Scroll left"
-      :_ left-hs (i :class "fa fa-chevron-left"))
-    (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"
-      :style "scroll-behavior: smooth;" :_ scroll-hs
-      (div :class "flex flex-col sm:flex-row gap-1" items))
-    (style ".scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }")
-    (button :class (str arrow-cls " hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded")
-      :aria-label "Scroll right"
-      :_ right-hs (i :class "fa fa-chevron-right"))))
-
 ;; Nav entries

 (defcomp ~blog-nav-entries-empty ()
  (div :id "entries-calendars-nav-wrapper" :sx-swap-oob "true"))

-(defcomp ~blog-nav-entry-item (&key href nav-cls name date-str)
-  (a :href href :class nav-cls
-    (div :class "w-8 h-8 rounded bg-stone-200 flex-shrink-0")
-    (div :class "flex-1 min-w-0"
-      (div :class "font-medium truncate" name)
-      (div :class "text-xs text-stone-600 truncate" date-str))))
-
 (defcomp ~blog-nav-calendar-item (&key href nav-cls name)
  (a :href href :class nav-cls
    (i :class "fa fa-calendar" :aria-hidden "true")
    (div name)))

-(defcomp ~blog-nav-entries-wrapper (&key scroll-hs items)
-  (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 "entries-calendars-nav-wrapper" :sx-swap-oob "true"
-    (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"
-      (i :class "fa fa-chevron-left"))
-    (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;" :_ scroll-hs
-      (div :class "flex flex-col sm:flex-row gap-1" items))
-    (style ".scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }")
-    (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"
-      (i :class "fa fa-chevron-right"))))
--- a/shared/sx/templates/navigation.sx
+++ b/shared/sx/templates/navigation.sx
@@ -5,15 +5,22 @@
      (div :class "font-medium truncate" name)
      (div :class "text-xs text-stone-600 truncate" date-str))))

-(defcomp ~calendar-link-nav (&key href name nav-class)
-  (a :href href :class nav-class
+(defcomp ~calendar-link-nav (&key href name nav-class is-selected select-colours)
+  (a :href href
+     :sx-get href
+     :sx-target "#main-panel"
+     :sx-select "#main-panel"
+     :sx-swap "outerHTML"
+     :sx-push-url "true"
+     :aria-selected (when is-selected "true")
+     :class (str (or nav-class "") " " (or select-colours ""))
    (i :class "fa fa-calendar" :aria-hidden "true")
-    (div name)))
+    (span name)))

-(defcomp ~market-link-nav (&key href name nav-class)
-  (a :href href :class nav-class
+(defcomp ~market-link-nav (&key href name nav-class select-colours)
+  (a :href href :class (str (or nav-class "") " " (or select-colours ""))
    (i :class "fa fa-shopping-bag" :aria-hidden "true")
-    (div name)))
+    (span name)))

 (defcomp ~relation-nav (&key href name icon nav-class relation-type)
  (a :href href :class (or nav-class "flex items-center gap-3 rounded-lg py-2 px-3 text-sm text-stone-700 hover:bg-stone-100 transition-colors")
--- a/shared/sx/templates/orders.sx
+++ b/shared/sx/templates/orders.sx
@@ -0,0 +1,142 @@
+;; Shared order components — used by both cart and orders services
+;;
+;; Order table (list view), order detail panels, and checkout error screens.
+
+;; ---------------------------------------------------------------------------
+;; Order table rows
+;; ---------------------------------------------------------------------------
+
+(defcomp ~order-row-desktop (&key oid created desc total pill status url)
+  (tr :class "hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60"
+    (td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" oid))
+    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" created)
+    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" desc)
+    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" total)
+    (td :class "px-3 py-2 align-top" (span :class pill status))
+    (td :class "px-3 py-0.5 align-top text-right"
+      (a :href url :class "inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition" "View"))))
+
+(defcomp ~order-row-mobile (&key oid created total pill status url)
+  (tr :class "sm:hidden border-t border-stone-100"
+    (td :colspan "5" :class "px-3 py-3"
+      (div :class "flex flex-col gap-2 text-xs"
+        (div :class "flex items-center justify-between gap-2"
+          (span :class "font-mono text-[11px] text-stone-700" oid)
+          (span :class pill status))
+        (div :class "text-[11px] text-stone-500 break-words" created)
+        (div :class "flex items-center justify-between gap-2"
+          (div :class "font-medium text-stone-800" total)
+          (a :href url :class "inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0" "View"))))))
+
+(defcomp ~order-end-row ()
+  (tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400"
+    (~end-of-results :cls "text-center text-xs text-stone-400"))))
+
+(defcomp ~order-empty-state ()
+  (div :class "max-w-full px-3 py-3 space-y-3"
+    (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700"
+      "No orders yet.")))
+
+(defcomp ~order-table (&key rows)
+  (div :class "max-w-full px-3 py-3 space-y-3"
+    (div :class "overflow-x-auto rounded-2xl border border-stone-200 bg-white/80"
+      (table :class "min-w-full text-xs sm:text-sm"
+        (thead :class "bg-stone-50 border-b border-stone-200 text-stone-600"
+          (tr
+            (th :class "px-3 py-2 text-left font-medium" "Order")
+            (th :class "px-3 py-2 text-left font-medium" "Created")
+            (th :class "px-3 py-2 text-left font-medium" "Description")
+            (th :class "px-3 py-2 text-left font-medium" "Total")
+            (th :class "px-3 py-2 text-left font-medium" "Status")
+            (th :class "px-3 py-2 text-left font-medium" "")))
+        (tbody rows)))))
+
+(defcomp ~order-list-header (&key search-mobile)
+  (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
+    (div :class "space-y-1"
+      (p :class "text-xs sm:text-sm text-stone-600" "Recent orders placed via the checkout."))
+    (div :class "md:hidden" search-mobile)))
+
+;; ---------------------------------------------------------------------------
+;; Order detail panels
+;; ---------------------------------------------------------------------------
+
+(defcomp ~order-item-image (&key src alt)
+  (img :src src :alt alt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async"))
+
+(defcomp ~order-item-no-image ()
+  (div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image"))
+
+(defcomp ~order-item-row (&key href img title pid qty price)
+  (li (a :class "w-full py-2 flex gap-3" :href href
+    (div :class "w-12 h-12 sm:w-14 sm:h-14 rounded-md bg-stone-100 flex-shrink-0 overflow-hidden" img)
+    (div :class "flex-1 flex justify-between gap-3"
+      (div
+        (p :class "font-medium" title)
+        (p :class "text-[11px] text-stone-500" pid))
+      (div :class "text-right whitespace-nowrap"
+        (p qty)
+        (p price))))))
+
+(defcomp ~order-items-panel (&key items)
+  (div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6"
+    (h2 :class "text-sm sm:text-base font-semibold mb-3" "Items")
+    (ul :class "divide-y divide-stone-100 text-xs sm:text-sm" items)))
+
+(defcomp ~order-calendar-entry (&key name pill status date-str cost)
+  (li :class "px-4 py-3 flex items-start justify-between text-sm"
+    (div (div :class "font-medium flex items-center gap-2"
+      name (span :class pill status))
+      (div :class "text-xs text-stone-500" date-str))
+    (div :class "ml-4 font-medium" cost)))
+
+(defcomp ~order-calendar-section (&key items)
+  (section :class "mt-6 space-y-3"
+    (h2 :class "text-base sm:text-lg font-semibold" "Calendar bookings in this order")
+    (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" items)))
+
+(defcomp ~order-detail-panel (&key summary items calendar)
+  (div :class "max-w-full px-3 py-3 space-y-4" summary items calendar))
+
+(defcomp ~order-pay-btn (&key url)
+  (a :href url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
+    (i :class "fa fa-credit-card mr-2" :aria-hidden "true") "Open payment page"))
+
+(defcomp ~order-detail-filter (&key info list-url recheck-url csrf pay)
+  (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
+    (div :class "space-y-1"
+      (p :class "text-xs sm:text-sm text-stone-600" info))
+    (div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"
+      (a :href list-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
+        (i :class "fa-solid fa-list mr-2" :aria-hidden "true") "All orders")
+      (form :method "post" :action recheck-url :class "inline"
+        (input :type "hidden" :name "csrf_token" :value csrf)
+        (button :type "submit" :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
+          (i :class "fa-solid fa-rotate mr-2" :aria-hidden "true") "Re-check status"))
+      pay)))
+
+(defcomp ~order-detail-header-stack (&key auth orders order)
+  (~header-child-sx :inner
+    (<> auth (~header-child-sx :id "auth-header-child" :inner
+      (<> orders (~header-child-sx :id "orders-header-child" :inner order))))))
+
+;; ---------------------------------------------------------------------------
+;; Checkout error screens
+;; ---------------------------------------------------------------------------
+
+(defcomp ~checkout-error-header ()
+  (header :class "mb-6 sm:mb-8"
+    (h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight" "Checkout error")
+    (p :class "text-xs sm:text-sm text-stone-600" "We tried to start your payment with SumUp but hit a problem.")))
+
+(defcomp ~checkout-error-order-id (&key oid)
+  (p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" oid)))
+
+(defcomp ~checkout-error-content (&key msg order back-url)
+  (div :class "max-w-full px-3 py-3 space-y-4"
+    (div :class "rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2"
+      (p :class "font-medium" "Something went wrong.")
+      (p msg)
+      order)
+    (div (a :href back-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
+      (i :class "fa fa-shopping-cart mr-2" :aria-hidden "true") "Back to cart"))))