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>

market/sx/cards.sx

@@ -0,0 +1,134 @@
+;; Market card components — pure data, no raw! HTML injection
+
+(defcomp ~market-label-overlay (&key src)
+  (img :src src :alt ""
+       :class "pointer-events-none absolute inset-0 w-full h-full object-contain object-top"))
+
+(defcomp ~market-card-image (&key image labels brand brand-highlight)
+  (div :class "w-full aspect-square bg-stone-100 relative"
+    (figure :class "inline-block w-full h-full"
+      (div :class "relative w-full h-full"
+        (img :src image :alt "no image" :class "absolute inset-0 w-full h-full object-contain object-top" :loading "lazy" :decoding "async" :fetchpriority "low")
+        (when labels (map (lambda (src) (~market-label-overlay :src src)) labels)))
+      (figcaption :class (str "mt-2 text-sm text-center" brand-highlight " text-stone-600") brand))))
+
+(defcomp ~market-card-no-image (&key labels brand)
+  (div :class "w-full aspect-square bg-stone-100 relative"
+    (div :class "p-2 flex flex-col items-center justify-center gap-2 text-red-500 h-full relative"
+      (div :class "text-stone-400 text-xs" "No image")
+      (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)))
+
+(defcomp ~market-card-stickers (&key stickers)
+  (div :class "flex flex-row justify-center gap-2 p-2"
+    (map (lambda (s) (~market-card-sticker :src (get s "src") :name (get s "name") :ring-cls (get s "ring-cls"))) stickers)))
+
+(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
+(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))))
+
+;; Main product card — accepts pure data, composes sub-components
+(defcomp ~market-product-card (&key href hx-select
+                                     has-like liked slug csrf like-action
+                                     image labels brand brand-highlight
+                                     special-price regular-price
+                                     cart-action quantity cart-href
+                                     stickers
+                                     title has-highlight search-pre search-mid search-post)
+  (div :class "flex flex-col rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden relative"
+    (when has-like
+      (~market-like-button :form-id (str "like-" slug) :action like-action :slug slug :csrf csrf
+        :icon-cls (if liked "fa-solid fa-heart text-red-500" "fa-regular fa-heart text-stone-400")))
+    (a :href href :sx-get href :sx-target "#main-panel"
+       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+      (if image
+        (~market-card-image :image image :labels labels :brand brand :brand-highlight brand-highlight)
+        (~market-card-no-image :labels labels :brand brand))
+      (~market-card-price :special-price special-price :regular-price regular-price))
+    (div :class "flex justify-center"
+      (if quantity
+        (~market-cart-add-quantity :cart-id (str "cart-" slug) :action cart-action :csrf csrf
+          :minus-val (str (- quantity 1)) :plus-val (str (+ quantity 1))
+          :quantity (str quantity) :cart-href cart-href)
+        (~market-cart-add-empty :cart-id (str "cart-" slug) :action cart-action :csrf csrf)))
+    (a :href href :sx-get href :sx-target "#main-panel"
+       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+      (when stickers (~market-card-stickers :stickers stickers))
+      (div :class "text-sm font-medium text-stone-800 text-center line-clamp-3 break-words [overflow-wrap:anywhere]"
+        (if has-highlight
+          (~market-card-highlight :pre search-pre :mid search-mid :post search-post)
+          title)))))
+
+(defcomp ~market-like-button (&key form-id action slug csrf icon-cls)
+  (div :class "absolute top-2 right-2 z-10 text-6xl md:text-xl"
+    (form :id form-id :action action :method "post"
+          :sx-post action :sx-target (str "#like-" slug) :sx-swap "outerHTML"
+      (input :type "hidden" :name "csrf_token" :value csrf)
+      (button :type "submit" :class "cursor-pointer"
+        (i :class icon-cls :aria-hidden "true")))))
+
+(defcomp ~market-market-card-title-link (&key href name)
+  (a :href href :class "hover:text-emerald-700"
+    (h2 :class "text-lg font-semibold text-stone-900" name)))
+
+(defcomp ~market-market-card-title (&key name)
+  (h2 :class "text-lg font-semibold text-stone-900" name))
+
+(defcomp ~market-market-card-desc (&key description)
+  (p :class "text-sm text-stone-600 mt-1 line-clamp-2" description))
+
+(defcomp ~market-market-card-badge (&key href title)
+  (div :class "flex flex-wrap items-center gap-1.5 mt-3"
+    (a :href href :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 hover:bg-amber-200"
+      title)))
+
+(defcomp ~market-market-card (&key title-content desc-content badge-content title desc badge)
+  (article :class "rounded-xl bg-white shadow-sm border border-stone-200 p-5 flex flex-col justify-between hover:border-stone-400 transition-colors"
+    (div
+      (if title-content title-content (when title title))
+      (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...")))

market/sx/cart.sx

@@ -0,0 +1,45 @@
+;; Market cart components
+
+(defcomp ~market-cart-add-empty (&key cart-id action csrf)
+  (div :id cart-id
+    (form :action action :method "post" :sx-post action :sx-target "#cart-mini" :sx-swap "outerHTML" :class "rounded flex items-center"
+      (input :type "hidden" :name "csrf_token" :value csrf)
+      (input :type "hidden" :name "count" :value "1")
+      (button :type "submit" :class "relative inline-flex items-center justify-center text-sm font-medium text-stone-500 hover:bg-emerald-50"
+        (span :class "relative inline-flex items-center justify-center"
+          (i :class "fa fa-cart-plus text-4xl" :aria-hidden "true"))))))
+
+(defcomp ~market-cart-add-quantity (&key cart-id action csrf minus-val plus-val quantity cart-href)
+  (div :id cart-id
+    (div :class "rounded flex items-center gap-2"
+      (form :action action :method "post" :sx-post action :sx-target "#cart-mini" :sx-swap "outerHTML"
+        (input :type "hidden" :name "csrf_token" :value csrf)
+        (input :type "hidden" :name "count" :value minus-val)
+        (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" "-"))
+      (a :class "relative inline-flex items-center justify-center text-emerald-700" :href cart-href
+        (span :class "relative inline-flex items-center justify-center"
+          (i :class "fa-solid fa-shopping-cart text-2xl" :aria-hidden "true")
+          (span :class "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+            (span :class "flex items-center justify-center bg-black text-white rounded-full w-4 h-4 text-xs font-bold" quantity))))
+      (form :action action :method "post" :sx-post action :sx-target "#cart-mini" :sx-swap "outerHTML"
+        (input :type "hidden" :name "csrf_token" :value csrf)
+        (input :type "hidden" :name "count" :value plus-val)
+        (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" "+")))))
+
+(defcomp ~market-cart-mini-count (&key href count)
+  (div :id "cart-mini" :sx-swap-oob "outerHTML"
+    (a :href href :class "relative inline-flex items-center justify-center"
+      (span :class "relative inline-flex items-center justify-center"
+        (i :class "fa-solid fa-shopping-cart text-xl" :aria-hidden "true")
+        (span :class "absolute -top-1.5 -right-2 pointer-events-none"
+          (span :class "flex items-center justify-center bg-emerald-500 text-white rounded-full min-w-[1.25rem] h-5 text-xs font-bold px-1"
+            count))))))
+
+(defcomp ~market-cart-mini-empty (&key href logo)
+  (div :id "cart-mini" :sx-swap-oob "outerHTML"
+    (a :href href :class "relative inline-flex items-center justify-center"
+      (img :src logo :class "h-8 w-8 rounded-full object-cover border border-stone-300" :alt ""))))
+
+(defcomp ~market-cart-add-oob (&key id content inner)
+  (div :id id :sx-swap-oob "outerHTML"
+    (if content content (when inner inner))))

market/sx/detail.sx

@@ -0,0 +1,94 @@
+;; Market product detail components
+
+(defcomp ~market-detail-gallery-inner (&key like image alt labels brand)
+  (<> like
+    (figure :class "inline-block"
+      (div :class "relative w-full aspect-square"
+        (img :data-main-img "" :src image :alt alt
+             :class "w-full h-full object-contain object-top" :loading "eager" :decoding "async")
+        labels)
+      (figcaption :class "mt-2 text-sm text-stone-600 text-center" brand))))
+
+(defcomp ~market-detail-nav-buttons ()
+  (<>
+    (button :type "button" :data-prev ""
+            :class "absolute left-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg text-3xl md:text-4xl"
+            :title "Previous" "\u2039")
+    (button :type "button" :data-next ""
+            :class "absolute right-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg text-3xl md:text-4xl"
+            :title "Next" "\u203a")))
+
+(defcomp ~market-detail-gallery (&key inner nav)
+  (div :class "relative rounded-xl overflow-hidden bg-stone-100"
+    inner nav))
+
+(defcomp ~market-detail-thumb (&key title src alt)
+  (<> (button :type "button" :data-thumb ""
+              :class "shrink-0 rounded-lg overflow-hidden bg-stone-100 hover:opacity-90 ring-offset-2"
+              :title title
+      (img :src src :class "h-16 w-16 object-contain" :alt alt :loading "lazy" :decoding "async"))
+    (span :data-image-src src :class "hidden")))
+
+(defcomp ~market-detail-thumbs (&key thumbs)
+  (div :class "flex flex-row justify-center"
+    (div :class "mt-3 flex gap-2 overflow-x-auto no-scrollbar" thumbs)))
+
+(defcomp ~market-detail-no-image (&key like)
+  (div :class "relative aspect-square bg-stone-100 rounded-xl flex items-center justify-center text-stone-400"
+    like "No image"))
+
+(defcomp ~market-detail-sticker (&key src name)
+  (img :src src :alt name :class "w-10 h-10"))
+
+(defcomp ~market-detail-stickers (&key items)
+  (div :class "p-2 flex flex-row justify-center gap-2" items))
+
+(defcomp ~market-detail-unit-price (&key price)
+  (div (str "Unit price: " price)))
+
+(defcomp ~market-detail-case-size (&key size)
+  (div (str "Case size: " size)))
+
+(defcomp ~market-detail-extras (&key inner)
+  (div :class "mt-2 space-y-1 text-sm text-stone-600" inner))
+
+(defcomp ~market-detail-desc-short (&key text)
+  (p :class "leading-relaxed text-lg" text))
+
+(defcomp ~market-detail-desc-html (&key html)
+  (div :class "max-w-none text-sm leading-relaxed" (~rich-text :html html)))
+
+(defcomp ~market-detail-desc-wrapper (&key inner)
+  (div :class "mt-4 text-stone-800 space-y-3" inner))
+
+(defcomp ~market-detail-section (&key title html)
+  (details :class "group rounded-xl border bg-white shadow-sm open:shadow p-0"
+    (summary :class "cursor-pointer select-none px-4 py-3 flex items-center justify-between"
+      (span :class "font-medium" title)
+      (span :class "ml-2 text-xl transition-transform group-open:rotate-180" "\u2304"))
+    (div :class "px-4 pb-4 max-w-none text-sm leading-relaxed" (~rich-text :html html))))
+
+(defcomp ~market-detail-sections (&key items)
+  (div :class "mt-8 space-y-3" items))
+
+(defcomp ~market-detail-right-col (&key inner)
+  (div :class "md:col-span-3" inner))
+
+(defcomp ~market-detail-layout (&key gallery stickers details)
+  (<> (div :class "mt-3 grid grid-cols-1 md:grid-cols-5 gap-6" :data-gallery-root ""
+        (div :class "md:col-span-2" gallery stickers)
+        details)
+      (div :class "pb-8")))
+
+(defcomp ~market-landing-excerpt (&key text)
+  (div :class "w-full text-center italic text-3xl p-2" text))
+
+(defcomp ~market-landing-image (&key src)
+  (div :class "mb-3 flex justify-center"
+    (img :src src :alt "" :class "rounded-lg w-full md:w-3/4 object-cover")))
+
+(defcomp ~market-landing-html (&key html)
+  (div :class "blog-content p-2" (~rich-text :html html)))
+
+(defcomp ~market-landing-content (&key inner)
+  (<> (article :class "relative w-full" inner) (div :class "pb-8")))

market/sx/filters.sx

@@ -0,0 +1,124 @@
+;; Market filter components
+
+(defcomp ~market-filter-sort-item (&key href hx-select ring-cls src label)
+  (a :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+     :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring-cls)
+    (img :src src :alt label :class "w-10 h-10")
+    (span :class "text-xs" label)))
+
+(defcomp ~market-filter-sort-row (&key items)
+  (div :class "flex flex-row gap-2 justify-center p-1"
+    items))
+
+(defcomp ~market-filter-like (&key href hx-select icon-cls size-cls)
+  (a :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+     :class "flex flex-col items-center gap-1 p-1 cursor-pointer"
+    (i :aria-hidden "true" :class (str icon-cls " " size-cls " leading-none"))))
+
+(defcomp ~market-filter-label-item (&key href hx-select ring-cls src name)
+  (a :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+     :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring-cls)
+    (img :src src :alt name :class "w-10 h-10")))
+
+(defcomp ~market-filter-sticker-item (&key href hx-select ring-cls src name count-cls count)
+  (a :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+     :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring-cls)
+    (img :src src :alt name :class "w-6 h-6")
+    (span :class count-cls count)))
+
+(defcomp ~market-filter-stickers-row (&key items)
+  (div :class "flex flex-wrap gap-2 justify-center p-1"
+    items))
+
+(defcomp ~market-filter-brand-item (&key href hx-select bg-cls name-cls name count)
+  (a :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+     :class (str "flex flex-row items-center gap-2 px-2 py-1 rounded hover:bg-stone-100" bg-cls)
+    (div :class name-cls name) (div :class name-cls count)))
+
+(defcomp ~market-filter-brands-panel (&key items)
+  (div :class "space-y-1 p-2"
+    items))
+
+(defcomp ~market-filter-category-label (&key label)
+  (div :class "mb-4" (div :class "text-2xl uppercase tracking-wide text-black-500" label)))
+
+(defcomp ~market-filter-like-labels-nav (&key content inner)
+  (nav :aria-label "like" :class "flex flex-row justify-center w-full p-0 m-0 border bg-white shadow-sm rounded-xl gap-1"
+    (if content content (when inner inner))))
+
+(defcomp ~market-desktop-category-summary (&key content inner)
+  (div :id "category-summary-desktop" :hxx-swap-oob "outerHTML"
+    (if content content (when inner inner))))
+
+(defcomp ~market-desktop-brand-summary (&key inner)
+  (div :id "filter-summary-desktop" :hxx-swap-oob "outerHTML" inner))
+
+(defcomp ~market-filter-subcategory-item (&key href hx-select active-cls name)
+  (a :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+     :class (str "block px-2 py-1 rounded hover:bg-stone-100" active-cls)
+     name))
+
+(defcomp ~market-filter-subcategory-panel (&key items)
+  (div :class "mt-4 space-y-1" items))
+
+(defcomp ~market-mobile-clear-filters (&key href hx-select)
+  (div :class "flex flex-row justify-center"
+    (a :href href :sx-get href :sx-target "#main-panel"
+       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+       :role "button" :title "clear filters" :aria-label "clear filters"
+       :class "flex flex-col items-center justify-start p-1 rounded bg-stone-200 text-black cursor-pointer"
+      (span :class "mt-1 leading-none tabular-nums" "clear filters"))))
+
+(defcomp ~market-mobile-like-labels-row (&key inner)
+  (div :class "flex flex-row gap-2 justify-center items-center" inner))
+
+(defcomp ~market-mobile-filter-summary (&key search-bar chips filter)
+  (details :class "md:hidden group" :id "/filter"
+    (summary :class "cursor-pointer select-none" :id "filter-summary-mobile"
+      search-bar
+      (div :class "col-span-12 min-w-0 grid grid-cols-1 gap-1 bg-gray-100 px-2" :role "list"
+        chips))
+    (div :id "filter-details-mobile" :style "display:contents"
+      filter)))
+
+(defcomp ~market-mobile-chips-row (&key inner)
+  (div :class "flex flex-row items-start gap-2" inner))
+
+(defcomp ~market-mobile-chip-sort (&key src label)
+  (ul :class "relative inline-flex items-center justify-center gap-2"
+    (li :role "listitem" (img :src src :alt label :class "w-10 h-10"))))
+
+(defcomp ~market-mobile-chip-liked-icon ()
+  (i :aria-hidden "true" :class "fa-solid fa-heart text-red-500 text-[40px] leading-none"))
+
+(defcomp ~market-mobile-chip-count (&key cls count)
+  (div :class (str cls " mt-1 leading-none tabular-nums") count))
+
+(defcomp ~market-mobile-chip-liked (&key inner)
+  (div :class "flex flex-col items-center gap-1 pb-1" inner))
+
+(defcomp ~market-mobile-chip-image (&key src name)
+  (img :src src :alt name :class "w-10 h-10"))
+
+(defcomp ~market-mobile-chip-item (&key inner)
+  (li :role "listitem" :class "flex flex-col items-center gap-1 pb-1" inner))
+
+(defcomp ~market-mobile-chip-list (&key items)
+  (ul :class "relative inline-flex items-center justify-center gap-2" items))
+
+(defcomp ~market-mobile-chip-brand (&key name count)
+  (li :role "listitem" :class "flex flex-row items-center gap-2"
+    (div :class "text-md" name) (div :class "text-md" count)))
+
+(defcomp ~market-mobile-chip-brand-zero (&key name)
+  (li :role "listitem" :class "flex flex-row items-center gap-2"
+    (div :class "text-md text-red-500" name) (div :class "text-xl text-red-500" "0")))
+
+(defcomp ~market-mobile-chip-brand-list (&key items)
+  (ul items))

market/sx/grids.sx

@@ -0,0 +1,22 @@
+;; Market grid and layout components
+
+(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"
+          :sx-headers hx-headers
+          :sx-swap-settle "0ms" :aria-label label
+    (i :aria-hidden "true" :class icon-cls)))

market/sx/headers.sx

@@ -0,0 +1,20 @@
+;; Market header components
+
+(defcomp ~market-shop-label (&key title top-slug sub-div)
+  (div :class "font-bold text-xl flex-shrink-0 flex gap-2 items-center"
+    (div (i :class "fa fa-shop") " " title)
+    (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)))
+
+(defcomp ~market-admin-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 "px-2 py-1 text-stone-500 hover:text-stone-700"
+     (i :class "fa fa-cog" :aria-hidden "true")))
+

market/sx/meta.sx

@@ -0,0 +1,19 @@
+;; Market meta/SEO components
+
+(defcomp ~market-meta-title (&key title)
+  (title title))
+
+(defcomp ~market-meta-description (&key description)
+  (meta :name "description" :content description))
+
+(defcomp ~market-meta-canonical (&key href)
+  (link :rel "canonical" :href href))
+
+(defcomp ~market-meta-og (&key property content)
+  (meta :property property :content content))
+
+(defcomp ~market-meta-twitter (&key name content)
+  (meta :name name :content content))
+
+(defcomp ~market-meta-jsonld (&key json)
+  (script :type "application/ld+json" (~rich-text :html json)))

market/sx/navigation.sx

@@ -0,0 +1,63 @@
+;; Market navigation components
+
+(defcomp ~market-category-link (&key href hx-select active select-colours label)
+  (div :class "relative nav-group"
+    (a :href href :sx-get href :sx-target "#main-panel"
+       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+       :aria-selected (if active "true" "false")
+       :class (str "block px-2 py-1 rounded text-center whitespace-normal break-words leading-snug bg-stone-200 text-black " select-colours)
+       label)))
+
+(defcomp ~market-desktop-category-nav (&key links admin)
+  (nav :class "hidden md:flex gap-4 text-sm ml-2 w-full justify-end items-center"
+    links admin))
+
+(defcomp ~market-mobile-nav-wrapper (&key items)
+  (div :class "px-4 py-2" (div :class "divide-y" items)))
+
+(defcomp ~market-mobile-all-link (&key href hx-select active select-colours)
+  (a :role "option" :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+     :aria-selected (if active "true" "false")
+     :class (str "block rounded-lg px-3 py-3 text-base hover:bg-stone-50 " select-colours)
+     (div :class "prose prose-stone max-w-none" "All")))
+
+(defcomp ~market-mobile-chevron ()
+  (svg :class "w-4 h-4 shrink-0 transition-transform group-open/cat:rotate-180"
+       :viewBox "0 0 20 20" :fill "currentColor"
+    (path :fill-rule "evenodd" :clip-rule "evenodd"
+          :d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z")))
+
+(defcomp ~market-mobile-cat-summary (&key bg-cls href hx-select select-colours cat-name count-label count-str chevron)
+  (summary :class (str "flex items-center justify-between cursor-pointer select-none block rounded-lg px-3 py-3 text-base hover:bg-stone-50" bg-cls)
+    (a :href href :sx-get href :sx-target "#main-panel"
+       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+       :class (str "font-medium " select-colours " flex flex-row gap-2")
+      (div cat-name)
+      (div :aria-label count-label count-str))
+    chevron))
+
+(defcomp ~market-mobile-sub-link (&key select-colours active href hx-select label count-label count-str)
+  (a :class (str "snap-start px-2 py-3 rounded " select-colours " flex flex-row gap-2")
+     :aria-selected (if active "true" "false")
+     :href href :sx-get href :sx-target "#main-panel"
+     :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+    (div label)
+    (div :aria-label count-label count-str)))
+
+(defcomp ~market-mobile-subs-panel (&key links)
+  (div :class "pb-3 pl-2"
+    (div :data-peek-viewport "" :data-peek-size-px "18" :data-peek-edge "bottom" :data-peek-mask "true" :class "m-2 bg-stone-100"
+      (div :data-peek-inner "" :class "grid grid-cols-1 gap-1 snap-y snap-mandatory pr-1" :aria-label "Subcategories"
+        links))))
+
+(defcomp ~market-mobile-view-all (&key href hx-select)
+  (div :class "pb-3 pl-2"
+    (a :class "px-2 py-1 rounded hover:bg-stone-100 block"
+       :href href :sx-get href :sx-target "#main-panel"
+       :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
+       "View all")))
+
+(defcomp ~market-mobile-cat-details (&key open summary subs)
+  (details :class "group/cat py-1" :open open
+    summary subs))

market/sx/prices.sx

@@ -0,0 +1,34 @@
+;; Market price display components
+
+(defcomp ~market-price-special (&key price)
+  (div :class "text-lg font-semibold text-emerald-700" price))
+
+(defcomp ~market-price-regular-strike (&key price)
+  (div :class "text-sm line-through text-stone-500" price))
+
+(defcomp ~market-price-regular (&key price)
+  (div :class "mt-1 text-lg font-semibold" price))
+
+(defcomp ~market-price-line (&key inner)
+  (div :class "mt-1 flex items-baseline gap-2 justify-center" inner))
+
+(defcomp ~market-header-price-special-label ()
+  (div :class "text-md font-bold text-emerald-700" "Special price"))
+
+(defcomp ~market-header-price-special (&key price)
+  (div :class "text-xl font-semibold text-emerald-700" price))
+
+(defcomp ~market-header-price-strike (&key price)
+  (div :class "text-base text-md line-through text-stone-500" price))
+
+(defcomp ~market-header-price-regular-label ()
+  (div :class "hidden md:block text-xl font-bold" "Our price"))
+
+(defcomp ~market-header-price-regular (&key price)
+  (div :class "text-xl font-semibold" price))
+
+(defcomp ~market-header-rrp (&key rrp)
+  (div :class "text-base text-stone-400" (span "rrp:") " " (span rrp)))
+
+(defcomp ~market-prices-row (&key inner)
+  (div :class "flex flex-row items-center justify-between md:gap-2 md:px-2" inner))