Rebrand sexp → sx across web platform (173 files)

Rename all sexp directories, files, identifiers, and references to sx.
artdag/ excluded (separate media processing DSL).

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

blog/sx/admin.sx

@@ -0,0 +1,178 @@
+;; Blog admin panel components
+
+(defcomp ~blog-cache-panel (&key clear-url csrf)
+  (div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"
+    (div :class "flex flex-col md:flex-row gap-3 items-start"
+      (form :sx-post clear-url :sx-trigger "submit" :sx-target "#cache-status" :sx-swap "innerHTML"
+        (input :type "hidden" :name "csrf_token" :value csrf)
+        (button :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" :type "submit" "Clear cache"))
+      (div :id "cache-status" :class "py-2"))))
+
+(defcomp ~blog-snippets-panel (&key list)
+  (div :class "max-w-4xl mx-auto p-6"
+    (div :class "mb-6 flex justify-between items-center"
+      (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"
+    options))
+
+(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"
+      (div :class "font-medium truncate" name)
+      (div :class "text-xs text-stone-500" owner))
+    (span :class (str "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium " badge-cls) visibility)
+    extra))
+
+(defcomp ~blog-snippets-list (&key rows)
+  (div :class "bg-white rounded-lg shadow" (div :class "divide-y" rows)))
+
+(defcomp ~blog-menu-items-panel (&key new-url list)
+  (div :class "max-w-4xl mx-auto p-6"
+    (div :class "mb-6 flex justify-end items-center"
+      (button :type "button" :sx-get new-url :sx-target "#menu-item-form" :sx-swap "innerHTML"
+        :class "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        (i :class "fa fa-plus") " Add Menu Item"))
+    (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"))
+    img
+    (div :class "flex-1 min-w-0"
+      (div :class "font-medium truncate" label)
+      (div :class "text-xs text-stone-500 truncate" slug))
+    (div :class "text-sm text-stone-500" (str "Order: " sort-order))
+    (div :class "flex gap-2 flex-shrink-0"
+      (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"))))
+
+(defcomp ~blog-menu-items-list (&key rows)
+  (div :class "bg-white rounded-lg shadow" (div :class "divide-y" rows)))
+
+;; Tag groups admin
+
+(defcomp ~blog-tag-groups-create-form (&key create-url csrf)
+  (form :method "post" :action create-url :class "border rounded p-4 bg-white space-y-3"
+    (input :type "hidden" :name "csrf_token" :value csrf)
+    (h3 :class "text-sm font-semibold text-stone-700" "New Group")
+    (div :class "flex flex-col sm:flex-row gap-3"
+      (input :type "text" :name "name" :placeholder "Group name" :required "" :class "flex-1 border rounded px-3 py-2 text-sm")
+      (input :type "text" :name "colour" :placeholder "#colour" :class "w-28 border rounded px-3 py-2 text-sm")
+      (input :type "number" :name "sort_order" :placeholder "Order" :value "0" :class "w-20 border rounded px-3 py-2 text-sm"))
+    (input :type "text" :name "feature_image" :placeholder "Image URL (optional)" :class "w-full border rounded px-3 py-2 text-sm")
+    (button :type "submit" :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" "Create")))
+
+(defcomp ~blog-tag-group-icon-image (&key src name)
+  (img :src src :alt name :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0"))
+
+(defcomp ~blog-tag-group-icon-color (&key style initial)
+  (div :class "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"
+    :style style initial))
+
+(defcomp ~blog-tag-group-li (&key icon edit-href name slug sort-order)
+  (li :class "border rounded p-3 bg-white flex items-center gap-3"
+    icon
+    (div :class "flex-1"
+      (a :href edit-href :class "font-medium text-stone-800 hover:underline" name)
+      (span :class "text-xs text-stone-500 ml-2" slug))
+    (span :class "text-xs text-stone-500" (str "order: " sort-order))))
+
+(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))
+
+(defcomp ~blog-unassigned-tags (&key heading spans)
+  (div :class "border-t pt-4"
+    (h3 :class "text-sm font-semibold text-stone-700 mb-2" heading)
+    (div :class "flex flex-wrap gap-2" spans)))
+
+(defcomp ~blog-tag-groups-main (&key form groups unassigned)
+  (div :class "max-w-2xl mx-auto px-4 py-6 space-y-8"
+    form groups unassigned))
+
+;; Tag group edit
+
+(defcomp ~blog-tag-checkbox (&key tag-id checked img name)
+  (label :class "flex items-center gap-2 px-2 py-1 hover:bg-stone-50 rounded text-sm cursor-pointer"
+    (input :type "checkbox" :name "tag_ids" :value tag-id :checked checked :class "rounded border-stone-300")
+    img (span name)))
+
+(defcomp ~blog-tag-checkbox-image (&key src)
+  (img :src src :alt "" :class "h-4 w-4 rounded-full object-cover"))
+
+(defcomp ~blog-tag-group-edit-form (&key save-url csrf name colour sort-order feature-image tags)
+  (form :method "post" :action save-url :class "border rounded p-4 bg-white space-y-4"
+    (input :type "hidden" :name "csrf_token" :value csrf)
+    (div :class "space-y-3"
+      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Name")
+        (input :type "text" :name "name" :value name :required "" :class "w-full border rounded px-3 py-2 text-sm"))
+      (div :class "flex gap-3"
+        (div :class "flex-1" (label :class "block text-xs font-medium text-stone-600 mb-1" "Colour")
+          (input :type "text" :name "colour" :value colour :placeholder "#hex" :class "w-full border rounded px-3 py-2 text-sm"))
+        (div :class "w-24" (label :class "block text-xs font-medium text-stone-600 mb-1" "Order")
+          (input :type "number" :name "sort_order" :value sort-order :class "w-full border rounded px-3 py-2 text-sm")))
+      (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Feature Image URL")
+        (input :type "text" :name "feature_image" :value feature-image :placeholder "https://..." :class "w-full border rounded px-3 py-2 text-sm")))
+    (div (label :class "block text-xs font-medium text-stone-600 mb-2" "Assign Tags")
+      (div :class "grid grid-cols-1 sm:grid-cols-2 gap-1 max-h-64 overflow-y-auto border rounded p-2"
+        tags))
+    (div :class "flex gap-3"
+      (button :type "submit" :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" "Save"))))
+
+(defcomp ~blog-tag-group-delete-form (&key delete-url csrf)
+  (form :method "post" :action delete-url :class "border-t pt-4"
+    :onsubmit "return confirm('Delete this tag group? Tags will not be deleted.')"
+    (input :type "hidden" :name "csrf_token" :value csrf)
+    (button :type "submit" :class "border rounded px-4 py-2 bg-red-600 text-white text-sm" "Delete Group")))
+
+(defcomp ~blog-tag-group-edit-main (&key edit-form delete-form)
+  (div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"
+    edit-form delete-form))

blog/sx/cards.sx

@@ -0,0 +1,127 @@
+;; Blog card components — pure data, no HTML injection
+
+(defcomp ~blog-like-button (&key like-url hx-headers heart)
+  (div :class "absolute top-20 right-2 z-10 text-6xl md:text-4xl"
+    (button :sx-post like-url :sx-swap "outerHTML"
+      :sx-headers hx-headers :class "cursor-pointer" heart)))
+
+(defcomp ~blog-draft-status (&key publish-requested timestamp)
+  (<> (div :class "flex justify-center gap-2 mt-1"
+    (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-800" "Draft")
+    (when publish-requested (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800" "Publish requested")))
+    (when timestamp (p :class "text-sm text-stone-500" (str "Updated: " timestamp)))))
+
+(defcomp ~blog-published-status (&key timestamp)
+  (p :class "text-sm text-stone-500" (str "Published: " timestamp)))
+
+;; Tag components — accept data, not HTML
+(defcomp ~blog-tag-icon (&key src name initial)
+  (if src
+    (img :src src :alt name :class "h-4 w-4 rounded-full object-cover border border-stone-300 flex-shrink-0")
+    (div :class "h-4 w-4 rounded-full text-[8px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0 bg-stone-200 text-stone-600" initial)))
+
+(defcomp ~blog-tag-item (&key src name initial)
+  (li (a :class "flex items-center gap-1"
+    (~blog-tag-icon :src src :name name :initial initial)
+    (span :class "inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200" name))))
+
+;; At-bar — tags + authors row for detail pages
+(defcomp ~blog-at-bar (&key tags authors)
+  (when (or tags authors)
+    (div :class "flex flex-row justify-center gap-3"
+      (when tags
+        (div :class "mt-4 flex items-center gap-2" (div "in")
+          (ul :class "flex flex-wrap gap-2 text-sm"
+            (map (lambda (t) (~blog-tag-item :src (get t "src") :name (get t "name") :initial (get t "initial"))) tags))))
+      (div)
+      (when authors
+        (div :class "mt-4 flex items-center gap-2" (div "by")
+          (ul :class "flex flex-wrap gap-2 text-sm"
+            (map (lambda (a) (~blog-author-item :image (get a "image") :name (get a "name"))) authors)))))))
+
+;; Author components
+(defcomp ~blog-author-item (&key image name)
+  (li :class "flex items-center gap-1"
+    (when image (img :src image :alt name :class "h-5 w-5 rounded-full object-cover"))
+    (span :class "text-stone-700" name)))
+
+;; Card — accepts pure data
+(defcomp ~blog-card (&key slug href hx-select title
+                          feature-image excerpt
+                          status is-draft publish-requested status-timestamp
+                          liked like-url csrf-token
+                          has-like
+                          tags authors widget)
+  (article :class "border-b pb-6 last:border-b-0 relative"
+    (when has-like
+      (~blog-like-button
+        :like-url like-url
+        :sx-headers (str "{\"X-CSRFToken\": \"" csrf-token "\"}")
+        :heart (if liked "❤️" "🤍")))
+    (a :href href :sx-get href :sx-target "#main-panel"
+      :sx-select (or hx-select "#main-panel") :sx-swap "outerHTML" :sx-push-url "true"
+      :class "block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"
+      (header :class "mb-2 text-center"
+        (h2 :class "text-4xl font-bold text-stone-900" title)
+        (if is-draft
+          (~blog-draft-status :publish-requested publish-requested :timestamp status-timestamp)
+          (when status-timestamp (~blog-published-status :timestamp status-timestamp))))
+      (when feature-image (div :class "mb-4" (img :src feature-image :alt "" :class "rounded-lg w-full object-cover")))
+      (when excerpt (p :class "text-stone-700 text-lg leading-relaxed text-center" excerpt)))
+    widget
+    (when (or tags authors)
+      (div :class "flex flex-row justify-center gap-3"
+        (when tags
+          (div :class "mt-4 flex items-center gap-2" (div "in")
+            (ul :class "flex flex-wrap gap-2 text-sm"
+              (map (lambda (t) (~blog-tag-item :src (get t "src") :name (get t "name") :initial (get t "initial"))) tags))))
+        (div)
+        (when authors
+          (div :class "mt-4 flex items-center gap-2" (div "by")
+            (ul :class "flex flex-wrap gap-2 text-sm"
+              (map (lambda (a) (~blog-author-item :image (get a "image") :name (get a "name"))) authors))))))))
+
+(defcomp ~blog-card-tile (&key href hx-select feature-image title
+                                is-draft publish-requested status-timestamp
+                                excerpt tags authors)
+  (article :class "relative"
+    (a :href href :sx-get href :sx-target "#main-panel"
+      :sx-select (or hx-select "#main-panel") :sx-swap "outerHTML" :sx-push-url "true"
+      :class "block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"
+      (when feature-image (div (img :src feature-image :alt "" :class "w-full aspect-video object-cover")))
+      (div :class "p-3 text-center"
+        (h2 :class "text-lg font-bold text-stone-900" title)
+        (if is-draft
+          (~blog-draft-status :publish-requested publish-requested :timestamp status-timestamp)
+          (when status-timestamp (~blog-published-status :timestamp status-timestamp)))
+        (when excerpt (p :class "text-stone-700 text-sm leading-relaxed line-clamp-3 mt-1" excerpt))))
+    (when (or tags authors)
+      (div :class "flex flex-row justify-center gap-3"
+        (when tags
+          (div :class "mt-4 flex items-center gap-2" (div "in")
+            (ul :class "flex flex-wrap gap-2 text-sm"
+              (map (lambda (t) (~blog-tag-item :src (get t "src") :name (get t "name") :initial (get t "initial"))) tags))))
+        (div)
+        (when authors
+          (div :class "mt-4 flex items-center gap-2" (div "by")
+            (ul :class "flex flex-wrap gap-2 text-sm"
+              (map (lambda (a) (~blog-author-item :image (get a "image") :name (get a "name"))) authors))))))))
+
+(defcomp ~blog-page-badges (&key has-calendar has-market)
+  (div :class "flex justify-center gap-2 mt-2"
+    (when has-calendar (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800"
+      (i :class "fa fa-calendar mr-1") "Calendar"))
+    (when has-market (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800"
+      (i :class "fa fa-shopping-bag mr-1") "Market"))))
+
+(defcomp ~blog-page-card (&key href hx-select title has-calendar has-market pub-timestamp feature-image excerpt)
+  (article :class "border-b pb-6 last:border-b-0 relative"
+    (a :href href :sx-get href :sx-target "#main-panel"
+      :sx-select (or hx-select "#main-panel") :sx-swap "outerHTML" :sx-push-url "true"
+      :class "block rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden"
+      (header :class "mb-2 text-center"
+        (h2 :class "text-4xl font-bold text-stone-900" title)
+        (~blog-page-badges :has-calendar has-calendar :has-market has-market)
+        (when pub-timestamp (~blog-published-status :timestamp pub-timestamp)))
+      (when feature-image (div :class "mb-4" (img :src feature-image :alt "" :class "rounded-lg w-full object-cover")))
+      (when excerpt (p :class "text-stone-700 text-lg leading-relaxed text-center" excerpt)))))

blog/sx/detail.sx

@@ -0,0 +1,60 @@
+;; Blog post detail components
+
+(defcomp ~blog-detail-edit-link (&key href hx-select)
+  (a :href href :sx-get href :sx-target "#main-panel"
+    :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+    :class "inline-block px-3 py-1 rounded-full text-sm font-semibold bg-stone-700 text-white hover:bg-stone-800 transition-colors"
+    (i :class "fa fa-pencil mr-1") " Edit"))
+
+(defcomp ~blog-detail-draft (&key publish-requested edit)
+  (div :class "flex items-center justify-center gap-2 mb-3"
+    (span :class "inline-block px-3 py-1 rounded-full text-sm font-semibold bg-amber-100 text-amber-800" "Draft")
+    (when publish-requested (span :class "inline-block px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-800" "Publish requested"))
+    edit))
+
+(defcomp ~blog-detail-like (&key like-url hx-headers heart)
+  (div :class "absolute top-2 right-2 z-10 text-8xl md:text-6xl"
+    (button :sx-post like-url :sx-swap "outerHTML"
+      :sx-headers hx-headers :class "cursor-pointer" heart)))
+
+(defcomp ~blog-detail-excerpt (&key excerpt)
+  (div :class "w-full text-center italic text-3xl p-2" excerpt))
+
+(defcomp ~blog-detail-chrome (&key like excerpt at-bar)
+  (<> like
+      excerpt
+      (div :class "hidden md:block" at-bar)))
+
+(defcomp ~blog-detail-main (&key draft chrome feature-image html-content)
+  (<> (article :class "relative"
+    draft
+    chrome
+    (when feature-image (div :class "mb-3 flex justify-center"
+      (img :src feature-image :alt "" :class "rounded-lg w-full md:w-3/4 object-cover")))
+    (when html-content (div :class "blog-content p-2" (~rich-text :html html-content))))
+    (div :class "pb-8")))
+
+(defcomp ~blog-meta (&key robots page-title desc canonical og-type og-title image twitter-card twitter-title)
+  (<>
+    (meta :name "robots" :content robots)
+    (title page-title)
+    (meta :name "description" :content desc)
+    (when canonical (link :rel "canonical" :href canonical))
+    (meta :property "og:type" :content og-type)
+    (meta :property "og:title" :content og-title)
+    (meta :property "og:description" :content desc)
+    (when canonical (meta :property "og:url" :content canonical))
+    (when image (meta :property "og:image" :content image))
+    (meta :name "twitter:card" :content twitter-card)
+    (meta :name "twitter:title" :content twitter-title)
+    (meta :name "twitter:description" :content desc)
+    (when image (meta :name "twitter:image" :content image))))
+
+(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"))

blog/sx/editor.sx

@@ -0,0 +1,54 @@
+;; Blog editor components
+
+(defcomp ~blog-editor-error (&key error)
+  (div :class "max-w-[768px] mx-auto mt-[16px] rounded-[8px] border border-red-300 bg-red-50 px-[16px] py-[12px] text-[14px] text-red-700"
+    (strong "Save failed:") " " error))
+
+(defcomp ~blog-editor-form (&key csrf title-placeholder create-label)
+  (form :id "post-new-form" :method "post" :class "max-w-[768px] mx-auto pb-[48px]"
+    (input :type "hidden" :name "csrf_token" :value csrf)
+    (input :type "hidden" :id "lexical-json-input" :name "lexical" :value "")
+    (input :type "hidden" :id "feature-image-input" :name "feature_image" :value "")
+    (input :type "hidden" :id "feature-image-caption-input" :name "feature_image_caption" :value "")
+    (div :id "feature-image-container" :class "relative mt-[16px] mb-[24px] group"
+      (div :id "feature-image-empty"
+        (button :type "button" :id "feature-image-add-btn"
+          :class "text-[14px] text-stone-400 hover:text-stone-600 transition-colors cursor-pointer"
+          "+ Add feature image"))
+      (div :id "feature-image-filled" :class "relative hidden"
+        (img :id "feature-image-preview" :src "" :alt ""
+          :class "w-full max-h-[448px] object-cover rounded-[8px] cursor-pointer")
+        (button :type "button" :id "feature-image-delete-btn"
+          :class "absolute top-[8px] right-[8px] w-[32px] h-[32px] rounded-full bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/70 cursor-pointer text-[14px]"
+          :title "Remove feature image"
+          (i :class "fa-solid fa-trash-can"))
+        (input :type "text" :id "feature-image-caption" :value ""
+          :placeholder "Add a caption..."
+          :class "mt-[8px] w-full text-[14px] text-stone-500 bg-transparent border-none outline-none placeholder:text-stone-300 focus:text-stone-700"))
+      (div :id "feature-image-uploading"
+        :class "hidden flex items-center gap-[8px] mt-[8px] text-[14px] text-stone-400"
+        (i :class "fa-solid fa-spinner fa-spin") " Uploading...")
+      (input :type "file" :id "feature-image-file"
+        :accept "image/jpeg,image/png,image/gif,image/webp,image/svg+xml" :class "hidden"))
+    (input :type "text" :name "title" :value "" :placeholder title-placeholder
+      :class "w-full text-[36px] font-bold bg-transparent border-none outline-none placeholder:text-stone-300 mb-[8px] leading-tight")
+    (textarea :name "custom_excerpt" :rows "1" :placeholder "Add an excerpt..."
+      :class "w-full text-[18px] text-stone-500 bg-transparent border-none outline-none placeholder:text-stone-300 resize-none mb-[24px] leading-relaxed")
+    (div :id "lexical-editor" :class "relative w-full bg-transparent")
+    (div :class "flex items-center gap-[16px] mt-[32px] pt-[16px] border-t border-stone-200"
+      (select :name "status"
+        :class "text-[14px] rounded-[4px] border border-stone-200 px-[8px] py-[6px] bg-white text-stone-600"
+        (option :value "draft" :selected t "Draft")
+        (option :value "published" "Published"))
+      (button :type "submit"
+        :class "px-[20px] py-[6px] bg-stone-700 text-white text-[14px] rounded-[8px] hover:bg-stone-800 transition-colors cursor-pointer" create-label))))
+
+(defcomp ~blog-editor-styles (&key css-href)
+  (<> (link :rel "stylesheet" :href css-href)
+    (style
+      "#lexical-editor { display: flow-root; }"
+      "#lexical-editor [data-kg-card=\"html\"] * { float: none !important; }"
+      "#lexical-editor [data-kg-card=\"html\"] table { width: 100% !important; }")))
+
+(defcomp ~blog-editor-scripts (&key js-src init-js)
+  (<> (script :src js-src) (script init-js)))

blog/sx/filters.sx

@@ -0,0 +1,65 @@
+;; Blog filter components
+
+(defcomp ~blog-action-button (&key href hx-select btn-class title icon-class label)
+  (a :href href :sx-get href :sx-target "#main-panel"
+    :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+    :class btn-class :title title (i :class icon-class) label))
+
+(defcomp ~blog-drafts-button (&key href hx-select btn-class title label draft-count)
+  (a :href href :sx-get href :sx-target "#main-panel"
+    :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+    :class btn-class :title title (i :class "fa fa-file-text-o mr-1") " Drafts "
+    (span :class "inline-block bg-stone-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1" draft-count)))
+
+(defcomp ~blog-drafts-button-amber (&key href hx-select btn-class title label draft-count)
+  (a :href href :sx-get href :sx-target "#main-panel"
+    :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+    :class btn-class :title title (i :class "fa fa-file-text-o mr-1") " Drafts "
+    (span :class "inline-block bg-amber-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1" draft-count)))
+
+(defcomp ~blog-action-buttons-wrapper (&key inner)
+  (div :class "flex flex-wrap gap-2 px-4 py-3" inner))
+
+(defcomp ~blog-filter-any-topic (&key cls hx-select)
+  (li (a :class (str "px-3 py-1 rounded border " cls)
+    :sx-get "?page=1" :sx-target "#main-panel" :sx-select hx-select
+    :sx-swap "outerHTML" :sx-push-url "true" "Any Topic")))
+
+(defcomp ~blog-filter-group-icon-image (&key src name)
+  (img :src src :alt name :class "h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0"))
+
+(defcomp ~blog-filter-group-icon-color (&key style initial)
+  (div :class "h-6 w-6 rounded-full text-[10px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0" :style style initial))
+
+(defcomp ~blog-filter-group-li (&key cls hx-get hx-select icon name count)
+  (li (a :class (str "flex items-center gap-2 px-3 py-1 rounded border " cls)
+    :sx-get hx-get :sx-target "#main-panel" :sx-select hx-select
+    :sx-swap "outerHTML" :sx-push-url "true"
+    icon
+    (span :class "inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200" name)
+    (span :class "flex-1")
+    (span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200" count))))
+
+(defcomp ~blog-filter-nav (&key items)
+  (nav :class "max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm"
+    (ul :class "divide-y flex flex-col gap-3" items)))
+
+(defcomp ~blog-filter-any-author (&key cls hx-select)
+  (li (a :class (str "px-3 py-1 rounded " cls)
+    :sx-get "?page=1" :sx-target "#main-panel" :sx-select hx-select
+    :sx-swap "outerHTML" :sx-push-url "true" "Any author")))
+
+(defcomp ~blog-filter-author-icon (&key src name)
+  (img :src src :alt name :class "h-5 w-5 rounded-full object-cover"))
+
+(defcomp ~blog-filter-author-li (&key cls hx-get hx-select icon name count)
+  (li (a :class (str "flex items-center gap-2 px-3 py-1 rounded " cls)
+    :sx-get hx-get :sx-target "#main-panel" :sx-select hx-select
+    :sx-swap "outerHTML" :sx-push-url "true"
+    icon
+    (span :class "text-stone-700" name)
+    (span :class "flex-1")
+    (span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200" count))))
+
+(defcomp ~blog-filter-summary (&key text)
+  (span :class "text-sm text-stone-600" text))

blog/sx/header.sx

@@ -0,0 +1,24 @@
+;; 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))
+
+(defcomp ~blog-admin-label ()
+  (<> (i :class "fa fa-shield-halved" :aria-hidden "true") " admin"))
+
+(defcomp ~blog-admin-nav-item (&key href nav-btn-class label is-selected select-colours)
+  (div :class "relative nav-group"
+    (a :href href
+       :aria-selected (when is-selected "true")
+       :class (str (or nav-btn-class "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black p-3") " " (or select-colours ""))
+       label)))
+
+(defcomp ~blog-sub-settings-label (&key icon label)
+  (<> (i :class icon :aria-hidden "true") " " label))
+
+(defcomp ~blog-sub-admin-label (&key icon label)
+  (<> (i :class icon :aria-hidden "true") (div label)))

blog/sx/index.sx

@@ -0,0 +1,79 @@
+;; 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"
+      :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+      :class (str "px-4 py-1.5 rounded-t text-sm font-medium transition-colors " posts-cls) "Posts")
+    (a :href pages-href :sx-get pages-href :sx-target "#main-panel"
+      :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+      :class (str "px-4 py-1.5 rounded-t text-sm font-medium transition-colors " pages-cls) "Pages")))
+
+(defcomp ~blog-main-panel-pages (&key tabs cards)
+  (<> tabs
+      (div :class "max-w-full px-3 py-3 space-y-3" cards)
+      (div :class "pb-8")))
+
+(defcomp ~blog-main-panel-posts (&key tabs toggle grid-cls cards)
+  (<> tabs
+      toggle
+      (div :class grid-cls cards)
+      (div :class "pb-8")))
+
+(defcomp ~blog-aside (&key search action-buttons tag-groups-filter authors-filter)
+  (<> search
+      action-buttons
+    (div :id "category-summary-desktop" :hxx-swap-oob "outerHTML"
+      tag-groups-filter
+      authors-filter)
+    (div :id "filter-summary-desktop" :hxx-swap-oob "outerHTML")))

blog/sx/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"))))

blog/sx/settings.sx

@@ -0,0 +1,113 @@
+;; Blog settings panel components (features, markets, associated entries)
+
+(defcomp ~blog-features-form (&key features-url calendar-checked market-checked hs-trigger)
+  (form :sx-put features-url :sx-target "#features-panel" :sx-swap "outerHTML"
+    :sx-headers "{\"Content-Type\": \"application/json\"}" :sx-encoding "json" :class "space-y-3"
+    (label :class "flex items-center gap-3 cursor-pointer"
+      (input :type "checkbox" :name "calendar" :value "true" :checked calendar-checked
+        :class "h-5 w-5 rounded border-stone-300 text-blue-600 focus:ring-blue-500"
+        :_ hs-trigger)
+      (span :class "text-sm text-stone-700"
+        (i :class "fa fa-calendar text-blue-600 mr-1")
+        " Calendar \u2014 enable event booking on this page"))
+    (label :class "flex items-center gap-3 cursor-pointer"
+      (input :type "checkbox" :name "market" :value "true" :checked market-checked
+        :class "h-5 w-5 rounded border-stone-300 text-green-600 focus:ring-green-500"
+        :_ hs-trigger)
+      (span :class "text-sm text-stone-700"
+        (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)
+  (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)))
+
+(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"
+    (h3 :class "text-lg font-semibold text-stone-800" "Page Features")
+    form sumup))
+
+;; Markets panel
+
+(defcomp ~blog-market-item (&key name slug delete-url confirm-text)
+  (li :class "flex items-center justify-between p-3 bg-stone-50 rounded"
+    (div (span :class "font-medium" name)
+      (span :class "text-stone-400 text-sm ml-2" (str "/" slug "/")))
+    (button :sx-delete delete-url :sx-target "#markets-panel" :sx-swap "outerHTML"
+      :sx-confirm confirm-text :class "text-red-600 hover:text-red-800 text-sm" "Delete")))
+
+(defcomp ~blog-markets-list (&key items)
+  (ul :class "space-y-2 mb-4" items))
+
+(defcomp ~blog-markets-empty ()
+  (p :class "text-stone-500 mb-4 text-sm" "No markets yet."))
+
+(defcomp ~blog-markets-panel (&key list create-url)
+  (div :id "markets-panel"
+    (h3 :class "text-lg font-semibold mb-3" "Markets")
+    list
+    (form :sx-post create-url :sx-target "#markets-panel" :sx-swap "outerHTML" :class "flex gap-2"
+      (input :type "text" :name "name" :placeholder "Market name" :required ""
+        :class "flex-1 border border-stone-300 rounded px-3 py-1.5 text-sm")
+      (button :type "submit"
+        :class "bg-stone-800 text-white px-4 py-1.5 rounded text-sm hover:bg-stone-700" "Create"))))
+
+;; Associated entries
+
+(defcomp ~blog-entry-image (&key src title)
+  (if src (img :src src :alt title :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-associated-entry (&key confirm-text toggle-url hx-headers img name date-str)
+  (button :type "button"
+    :class "w-full text-left p-3 rounded border bg-green-50 border-green-300 transition hover:bg-green-100"
+    :data-confirm "" :data-confirm-title "Remove entry?"
+    :data-confirm-text confirm-text :data-confirm-icon "warning"
+    :data-confirm-confirm-text "Yes, remove it"
+    :data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
+    :sx-post toggle-url :sx-trigger "confirmed"
+    :sx-target "#associated-entries-list" :sx-swap "outerHTML"
+    :sx-headers hx-headers
+    :_ "on htmx:afterRequest trigger entryToggled on body"
+    (div :class "flex items-center justify-between gap-3"
+      img
+      (div :class "flex-1"
+        (div :class "font-medium text-sm" name)
+        (div :class "text-xs text-stone-600 mt-1" date-str))
+      (i :class "fa fa-times-circle text-green-600 text-lg flex-shrink-0"))))
+
+(defcomp ~blog-associated-entries-content (&key items)
+  (div :class "space-y-1" items))
+
+(defcomp ~blog-associated-entries-empty ()
+  (div :class "text-sm text-stone-400"
+    "No entries associated yet. Browse calendars below to add entries."))
+
+(defcomp ~blog-associated-entries-panel (&key content)
+  (div :id "associated-entries-list" :class "border rounded-lg p-4 bg-white"
+    (h3 :class "text-lg font-semibold mb-4" "Associated Entries")
+    content))