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>

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)))

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))

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))

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,