Fix SX history, OOB header swaps, cross-service nav components

- Always re-fetch on popstate (drop LRU cache) for fresh content on back/forward
- Save/restore scroll position via pushState
- Add id="root-header-child" to ~app-body so OOB swaps can target it
- Fix OOB renderers: nest root-row inside root-header-child swap instead of
  separate OOB that clobbers it
- Fix 3+ header rows dropped: wrap all headers in single fragment instead of
  concatenating outside (<> ...)
- Strip <script data-components> from text/sx responses before renderToString
- Fall back to location.assign for cross-origin pushState (SecurityError)
- Move blog/sx/nav.sx to shared/sx/templates/ so all services have nav components

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

shared/sx/helpers.py

@@ -209,9 +209,13 @@ def post_admin_header_sx(ctx: dict, slug: str, *, oob: bool = False,
 
 
 def oob_header_sx(parent_id: str, child_id: str, row_sx: str) -> str:
-    """Wrap a header row sx in an OOB swap."""
+    """Wrap a header row sx in an OOB swap.
+
+    child_id is accepted for call-site compatibility but no longer used —
+    the child placeholder is created by ~menu-row-sx itself.
+    """
     return sx_call("oob-header-sx",
-        parent_id=parent_id, child_id=child_id,
+        parent_id=parent_id,
         row=SxExpr(row_sx),
     )
 

shared/sx/templates/layout.sx

@@ -6,7 +6,7 @@
           (header :class "z-50"
             (div :id "root-header-summary"
                  :class "flex items-start gap-2 p-1 bg-sky-500"
-              (div :class "flex flex-col w-full items-center"
+              (div :id "root-header-child" :class "flex flex-col w-full items-center"
                 (when header-rows header-rows)))))
         (div :id "root-menu" :sx-swap-oob "outerHTML" :class "md:hidden"
           (when menu menu))))
@@ -107,13 +107,12 @@
         (div :id child-id :class "flex flex-col w-full items-center"
           (when child child))))))
 
-(defcomp ~oob-header-sx (&key parent-id child-id row)
-  (div :id parent-id :sx-swap-oob "outerHTML" :class "w-full"
-    (div :class "w-full" row
-      (div :id child-id))))
+(defcomp ~oob-header-sx (&key parent-id row)
+  (div :id parent-id :sx-swap-oob "outerHTML" :class "flex flex-col w-full items-center"
+    row))
 
 (defcomp ~header-child-sx (&key id inner)
-  (div :id (or id "root-header-child") :class "w-full" inner))
+  (div :id (or id "root-header-child") :class "flex flex-col w-full items-center" inner))
 
 (defcomp ~error-content (&key errnum message image)
   (div :class "text-center p-8 max-w-lg mx-auto"

shared/sx/templates/nav.sx

@@ -0,0 +1,67 @@
+;; Blog navigation components
+
+(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"
+    :aria-selected selected :class nav-cls
+    img (span label))))
+
+(defcomp ~blog-nav-item-plain (&key href selected nav-cls img label)
+  (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"))))