Add OCaml SX kernel build to sx_docs Docker image and enable in production

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.claude/plans/sx-ci-pipeline.md

@@ -0,0 +1,278 @@
+# SX CI Pipeline — Build/Test/Deploy in S-Expressions
+
+## Context
+
+Rose Ash currently uses shell scripts for CI:
+- `deploy.sh` — auto-detect changed apps via git diff, build Docker images, push to registry, restart services
+- `dev.sh` — start/stop dev environment, run tests
+- `test/Dockerfile.unit` — headless test runner in Docker
+- Tailwind CSS build via CLI command with v3 config
+- SX bootstrapping via `python bootstrap_js.py`, `python bootstrap_py.py`, `python bootstrap_test.py`
+
+These work, but they are opaque shell scripts with imperative logic, no reuse, and no relationship to the language the application is written in. The CI pipeline is the one remaining piece of Rose Ash infrastructure that is not expressed in s-expressions.
+
+## Goal
+
+Replace the shell-based CI with pipeline definitions written in SX. The pipeline runner is a minimal Python CLI that evaluates `.sx` files using the SX spec. Pipeline steps are s-expressions. Conditionals, composition, and reuse are the same language constructs used everywhere else in the codebase.
+
+This is not a generic CI framework — it is a project-specific pipeline that happens to be written in SX, proving the "one representation for everything" claim from the essays.
+
+## Design Principles
+
+1. **Same language** — Pipeline definitions use the same SX syntax, parser, and evaluator as the application
+2. **Boundary-enforced** — CI primitives (shell, docker, git) are IO primitives declared in boundary.sx, sandboxed like everything else
+3. **Composable** — Pipeline steps are components; complex pipelines compose them by nesting
+4. **Self-testing** — The pipeline can run the SX spec tests as a pipeline step, using the same spec that defines the pipeline language
+5. **Incremental** — Each phase is independently useful; shell scripts remain as fallback
+
+## Implementation
+
+### Phase 1: CI Spec + Runner
+
+#### `shared/sx/ref/ci.sx` — CI primitives spec
+
+Declare CI-specific IO primitives in the boundary:
+
+```lisp
+;; Shell execution
+(define shell-run ...)    ;; (shell-run "pytest shared/ -v") → {:exit 0 :stdout "..." :stderr "..."}
+(define shell-run! ...)   ;; Like shell-run but throws on non-zero exit
+
+;; Docker
+(define docker-build ...)  ;; (docker-build :file "sx/Dockerfile" :tag "registry/sx:latest" :context ".")
+(define docker-push ...)   ;; (docker-push "registry/sx:latest")
+(define docker-restart ...) ;; (docker-restart "coop_sx_docs")
+
+;; Git
+(define git-diff-files ...) ;; (git-diff-files "HEAD~1" "HEAD") → ("shared/sx/parser.py" "sx/sx/essays.sx")
+(define git-branch ...)     ;; (git-branch) → "macros"
+
+;; Filesystem
+(define file-exists? ...)   ;; (file-exists? "sx/Dockerfile") → true
+(define read-file ...)      ;; (read-file "version.txt") → "1.2.3"
+
+;; Pipeline control
+(define log-step ...)       ;; (log-step "Building sx_docs") — formatted output
+(define fail! ...)          ;; (fail! "Unit tests failed") — abort pipeline
+```
+
+#### `sx-ci` — CLI runner
+
+Minimal Python script (~100 lines):
+1. Loads SX evaluator (sx_ref.py)
+2. Registers CI IO primitives (subprocess, docker SDK, git)
+3. Evaluates the pipeline `.sx` file
+4. Exit code = pipeline result
+
+```bash
+python -m shared.sx.ci pipeline/deploy.sx
+python -m shared.sx.ci pipeline/test.sx
+```
+
+### Phase 2: Pipeline Definitions
+
+#### `pipeline/services.sx` — Service registry (data)
+
+```lisp
+(define services
+  (list
+    {:name "blog"       :dir "blog"   :compose "blog"       :port 8001}
+    {:name "market"     :dir "market" :compose "market"      :port 8002}
+    {:name "cart"       :dir "cart"   :compose "cart"        :port 8003}
+    {:name "events"     :dir "events" :compose "events"      :port 8004}
+    {:name "federation" :dir "federation" :compose "federation" :port 8005}
+    {:name "account"    :dir "account" :compose "account"    :port 8006}
+    {:name "relations"  :dir "relations" :compose "relations" :port 8008}
+    {:name "likes"      :dir "likes"  :compose "likes"       :port 8009}
+    {:name "orders"     :dir "orders" :compose "orders"      :port 8010}
+    {:name "sx_docs"    :dir "sx"     :compose "sx_docs"     :port 8011}))
+
+(define registry "registry.rose-ash.com:5000")
+```
+
+#### `pipeline/steps.sx` — Reusable step components
+
+```lisp
+(defcomp ~detect-changed (&key base)
+  ;; Returns list of services whose source dirs have changes
+  (let ((files (git-diff-files (or base "HEAD~1") "HEAD")))
+    (if (some (fn (f) (starts-with? f "shared/")) files)
+      services  ;; shared changed → rebuild all
+      (filter (fn (svc)
+        (some (fn (f) (starts-with? f (str (get svc "dir") "/"))) files))
+        services))))
+
+(defcomp ~unit-tests ()
+  (log-step "Running unit tests")
+  (shell-run! "docker build -f test/Dockerfile.unit -t rose-ash-test-unit:latest . -q")
+  (shell-run! "docker run --rm rose-ash-test-unit:latest"))
+
+(defcomp ~sx-spec-tests ()
+  (log-step "Running SX spec tests")
+  (shell-run! "cd shared/sx/ref && python bootstrap_test.py")
+  (shell-run! "node shared/sx/ref/test_sx_ref.js"))
+
+(defcomp ~bootstrap-check ()
+  (log-step "Checking bootstrapped files are up to date")
+  ;; Rebootstrap and check for diff
+  (shell-run! "python shared/sx/ref/bootstrap_js.py")
+  (shell-run! "python shared/sx/ref/bootstrap_py.py")
+  (let ((diff (shell-run "git diff --name-only shared/static/scripts/sx-ref.js shared/sx/ref/sx_ref.py")))
+    (when (not (= (get diff "stdout") ""))
+      (fail! "Bootstrapped files are stale — rebootstrap and commit"))))
+
+(defcomp ~tailwind-check ()
+  (log-step "Checking tw.css is up to date")
+  (shell-run! "cat <<'CSS' | npx tailwindcss -i /dev/stdin -o /tmp/tw-check.css --minify -c shared/static/styles/tailwind.config.js\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\nCSS")
+  (let ((diff (shell-run "diff shared/static/styles/tw.css /tmp/tw-check.css")))
+    (when (not (= (get diff "exit") 0))
+      (log-step "WARNING: tw.css may be stale"))))
+
+(defcomp ~build-service (&key service)
+  (let ((name (get service "name"))
+        (dir (get service "dir"))
+        (tag (str registry "/" name ":latest")))
+    (log-step (str "Building " name))
+    (docker-build :file (str dir "/Dockerfile") :tag tag :context ".")
+    (docker-push tag)))
+
+(defcomp ~restart-service (&key service)
+  (let ((name (get service "compose")))
+    (log-step (str "Restarting coop_" name))
+    (docker-restart (str "coop_" name))))
+```
+
+#### `pipeline/test.sx` — Test pipeline
+
+```lisp
+(load "pipeline/steps.sx")
+
+(do
+  (~unit-tests)
+  (~sx-spec-tests)
+  (~bootstrap-check)
+  (~tailwind-check)
+  (log-step "All checks passed"))
+```
+
+#### `pipeline/deploy.sx` — Deploy pipeline
+
+```lisp
+(load "pipeline/services.sx")
+(load "pipeline/steps.sx")
+
+(let ((targets (if (= (length ARGS) 0)
+                 (~detect-changed :base "HEAD~1")
+                 (filter (fn (svc) (some (fn (a) (= a (get svc "name"))) ARGS)) services))))
+  (when (= (length targets) 0)
+    (log-step "No changes detected")
+    (exit 0))
+
+  (log-step (str "Deploying: " (join " " (map (fn (s) (get s "name")) targets))))
+
+  ;; Tests first
+  (~unit-tests)
+  (~sx-spec-tests)
+
+  ;; Build and push
+  (for-each (fn (svc) (~build-service :service svc)) targets)
+
+  ;; Restart
+  (for-each (fn (svc) (~restart-service :service svc)) targets)
+
+  (log-step "Deploy complete"))
+```
+
+### Phase 3: Boundary Integration
+
+Add CI primitives to `boundary.sx`:
+
+```lisp
+;; CI primitives (pipeline runner only — not available in web context)
+(io-primitive shell-run    (command)        -> dict)
+(io-primitive shell-run!   (command)        -> dict)
+(io-primitive docker-build (&key file tag context) -> nil)
+(io-primitive docker-push  (tag)            -> nil)
+(io-primitive docker-restart (service)      -> nil)
+(io-primitive git-diff-files (base head)    -> list)
+(io-primitive git-branch   ()               -> string)
+(io-primitive file-exists? (path)           -> boolean)
+(io-primitive read-file    (path)           -> string)
+(io-primitive log-step     (message)        -> nil)
+(io-primitive fail!        (message)        -> nil)
+```
+
+These are only registered by the CI runner, never by the web app. The boundary enforces that web components cannot call `shell-run!`.
+
+### Phase 4: Bootstrap + Runner Implementation
+
+#### `shared/sx/ci.py` — Runner module
+
+```python
+"""SX CI pipeline runner.
+
+Usage: python -m shared.sx.ci pipeline/deploy.sx [args...]
+"""
+import sys, subprocess, os
+from .ref.sx_ref import evaluate, parse, create_env
+from .ref.boundary_parser import parse_boundary
+
+def register_ci_primitives(env):
+    """Register CI IO primitives into the evaluation environment."""
+    # shell-run, docker-build, git-diff-files, etc.
+    # Each is a thin Python wrapper around subprocess/docker SDK
+    ...
+
+def main():
+    pipeline_file = sys.argv[1]
+    args = sys.argv[2:]
+
+    env = create_env()
+    register_ci_primitives(env)
+    env_set(env, "ARGS", args)
+
+    with open(pipeline_file) as f:
+        source = f.read()
+
+    result = evaluate(parse(source), env)
+    sys.exit(0 if result else 1)
+```
+
+### Phase 5: Documentation + Essay Section
+
+- Add a section to the "No Alternative" essay about CI pipelines as proof of universality
+- Add a plan page at `/plans/sx-ci` documenting the pipeline architecture
+- The pipeline definitions themselves serve as examples of SX beyond web rendering
+
+## Files
+
+| File | Change |
+|------|--------|
+| `shared/sx/ref/ci.sx` | **NEW** — CI primitive declarations |
+| `shared/sx/ci.py` | **NEW** — Pipeline runner (~150 lines) |
+| `shared/sx/ci_primitives.py` | **NEW** — CI IO primitive implementations |
+| `pipeline/services.sx` | **NEW** — Service registry data |
+| `pipeline/steps.sx` | **NEW** — Reusable pipeline step components |
+| `pipeline/test.sx` | **NEW** — Test pipeline |
+| `pipeline/deploy.sx` | **NEW** — Deploy pipeline |
+| `shared/sx/ref/boundary.sx` | Add CI primitive declarations |
+| `sx/sx/plans.sx` | Add plan page |
+| `sx/sx/essays.sx` | Add CI section to "No Alternative" |
+
+## Verification
+
+1. `python -m shared.sx.ci pipeline/test.sx` — runs all checks, same results as manual
+2. `python -m shared.sx.ci pipeline/deploy.sx blog` — builds and deploys blog only
+3. `python -m shared.sx.ci pipeline/deploy.sx` — auto-detects changes, deploys affected services
+4. Pipeline output is readable: step names, pass/fail, timing
+5. Shell scripts remain as fallback — nothing is deleted
+
+## Order of Implementation
+
+1. Phase 1 first — get the runner evaluating simple pipeline files
+2. Phase 2 — define the actual pipeline steps
+3. Phase 3 — formal boundary declarations
+4. Phase 4 — full runner with all CI primitives
+5. Phase 5 — documentation and essay content
+
+Each phase is independently committable and testable.

.gitea/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
 env:
   REGISTRY: registry.rose-ash.com:5000
   APP_DIR: /root/rose-ash
+  BUILD_DIR: /root/rose-ash-ci
 
 jobs:
   build-and-deploy:
@@ -33,23 +34,26 @@ jobs:
           DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
         run: |
           ssh "root@$DEPLOY_HOST" "
-            cd ${{ env.APP_DIR }}
-
-            # Save current HEAD before updating
-            OLD_HEAD=\$(git rev-parse HEAD 2>/dev/null || echo none)
-
-            git fetch origin ${{ github.ref_name }}
+            # --- Build in isolated CI directory (never touch dev working tree) ---
+            BUILD=${{ env.BUILD_DIR }}
+            ORIGIN=\$(git -C ${{ env.APP_DIR }} remote get-url origin)
+            if [ ! -d \"\$BUILD/.git\" ]; then
+              git clone \"\$ORIGIN\" \"\$BUILD\"
+            fi
+            cd \"\$BUILD\"
+            git fetch origin
             git reset --hard origin/${{ github.ref_name }}
 
-            NEW_HEAD=\$(git rev-parse HEAD)
+            # Detect changes using push event SHAs (not local checkout state)
+            BEFORE='${{ github.event.before }}'
+            AFTER='${{ github.sha }}'
 
-            # Detect what changed
             REBUILD_ALL=false
-            if [ \"\$OLD_HEAD\" = \"none\" ] || [ \"\$OLD_HEAD\" = \"\$NEW_HEAD\" ]; then
-              # First deploy or CI re-run on same commit — rebuild all
+            if [ -z \"\$BEFORE\" ] || [ \"\$BEFORE\" = '0000000000000000000000000000000000000000' ] || ! git cat-file -e \"\$BEFORE\" 2>/dev/null; then
+              # New branch, force push, or unreachable parent — rebuild all
               REBUILD_ALL=true
             else
-              CHANGED=\$(git diff --name-only \$OLD_HEAD \$NEW_HEAD)
+              CHANGED=\$(git diff --name-only \$BEFORE \$AFTER)
               if echo \"\$CHANGED\" | grep -q '^shared/'; then
                 REBUILD_ALL=true
               fi
@@ -84,18 +88,32 @@ jobs:
               fi
             done
 
-            # Deploy swarm stack only on main branch
+            # Deploy swarm stacks only on main branch
             if [ '${{ github.ref_name }}' = 'main' ]; then
-              source .env
-              docker stack deploy -c docker-compose.yml rose-ash
+              source ${{ env.APP_DIR }}/.env
+              docker stack deploy --resolve-image always -c docker-compose.yml rose-ash
               echo 'Waiting for swarm services to update...'
               sleep 10
               docker stack services rose-ash
+
+              # Deploy sx-web standalone stack (sx-web.org)
+              SX_REBUILT=false
+              if [ \"\$REBUILD_ALL\" = true ] || echo \"\$CHANGED\" | grep -q '^sx/'; then
+                SX_REBUILT=true
+              fi
+              if [ \"\$SX_REBUILT\" = true ]; then
+                echo 'Deploying sx-web stack (sx-web.org)...'
+                docker stack deploy --resolve-image always -c /root/sx-web/docker-compose.yml sx-web
+                sleep 5
+                docker stack services sx-web
+                docker service update --force caddy_caddy 2>/dev/null || true
+              fi
             else
               echo 'Skipping swarm deploy (branch: ${{ github.ref_name }})'
             fi
 
-            # Dev stack always deployed (bind-mounted source + auto-reload)
+            # Dev stack uses working tree (bind-mounted source + auto-reload)
+            cd ${{ env.APP_DIR }}
             echo 'Deploying dev stack...'
             docker compose -p rose-ash-dev -f docker-compose.yml -f docker-compose.dev.yml up -d
             echo 'Dev stack deployed'

.gitignore

@@ -1,6 +1,7 @@
 __pycache__/
 *.pyc
 *.pyo
+shared/sx/.cache/
 .env
 node_modules/
 *.egg-info/
@@ -10,3 +11,7 @@ build/
 venv/
 _snapshot/
 _debug/
+sx-haskell/
+sx-rust/
+shared/static/scripts/sx-full-test.js
+hosts/ocaml/_build/

CLAUDE.md

@@ -5,6 +5,7 @@ Cooperative web platform: federated content, commerce, events, and media process
 ## Deployment
 
 - **Do NOT push** until explicitly told to. Pushes reload code to dev automatically.
+- **NEVER push to `main`** — pushing to main triggers a **PRODUCTION deploy**. Only push to main when the user explicitly requests a production deploy. Work on the `macros` branch by default; merge to main only with explicit permission.
 
 ## Project Structure
 
@@ -52,6 +53,65 @@ artdag/
   test/      # Integration & e2e tests
 ```
 
+## SX Language — Canonical Reference
+
+The SX language is defined by a self-hosting specification in `shared/sx/ref/`. **Read these files for authoritative SX semantics** — they supersede any implementation detail in `sx.js` or Python evaluators.
+
+### Specification files
+
+- **`shared/sx/ref/eval.sx`** — Core evaluator: types, trampoline (TCO), `eval-expr` dispatch, special forms (`if`, `when`, `cond`, `case`, `let`, `and`, `or`, `lambda`, `define`, `defcomp`, `defmacro`, `quasiquote`), higher-order forms (`map`, `filter`, `reduce`, `some`, `every?`, `for-each`), macro expansion, function/lambda/component calling.
+- **`shared/sx/ref/parser.sx`** — Tokenizer and parser: grammar, string escapes, dict literals `{:key val}`, quote sugar (`` ` ``, `,`, `,@`), serializer.
+- **`shared/sx/ref/primitives.sx`** — All ~80 built-in pure functions: arithmetic, comparison, predicates, string ops, collection ops, dict ops, format helpers, CSSX style primitives.
+- **`shared/sx/ref/render.sx`** — Three rendering modes: `render-to-html` (server HTML), `render-to-sx`/`aser` (SX wire format for client), `render-to-dom` (browser). HTML tag registry, void elements, boolean attrs.
+- **`shared/sx/ref/bootstrap_js.py`** — Transpiler: reads the `.sx` spec files and emits `sx-ref.js`.
+
+### Type system
+
+```
+number, string, boolean, nil, symbol, keyword, list, dict,
+lambda, component, macro, thunk (TCO deferred eval)
+```
+
+### Evaluation rules (from eval.sx)
+
+1. **Literals** (number, string, boolean, nil) — pass through
+2. **Symbols** — look up in env, then primitives, then `true`/`false`/`nil`, else error
+3. **Keywords** — evaluate to their string name
+4. **Dicts** — evaluate all values recursively
+5. **Lists** — dispatch on head:
+   - Special forms (`if`, `when`, `cond`, `case`, `let`, `lambda`, `define`, `defcomp`, `defmacro`, `quote`, `quasiquote`, `begin`/`do`, `set!`, `->`)
+   - Higher-order forms (`map`, `filter`, `reduce`, `some`, `every?`, `for-each`, `map-indexed`)
+   - Macros — expand then re-evaluate
+   - Function calls — evaluate head and args, then: native callable → `apply`, lambda → bind params + TCO thunk, component → parse keyword args + bind params + TCO thunk
+
+### Component calling convention
+
+```lisp
+(defcomp ~card (&key title subtitle &rest children)
+  (div :class "card"
+    (h2 title)
+    (when subtitle (p subtitle))
+    children))
+```
+
+- `&key` params are keyword arguments: `(~card :title "Hi" :subtitle "Sub")`
+- `&rest children` captures positional args as `children`
+- Component body evaluated in merged env: `closure + caller-env + bound-params`
+
+### Rendering modes (from render.sx)
+
+| Mode | Function | Expands components? | Output |
+|------|----------|-------------------|--------|
+| HTML | `render-to-html` | Yes (recursive) | HTML string |
+| SX wire | `aser` | No — serializes `(~name ...)` | SX source text |
+| DOM | `render-to-dom` | Yes (recursive) | DOM nodes |
+
+The `aser` (async-serialize) mode evaluates control flow and function calls but serializes HTML tags and component calls as SX source — the client renders them. This is the wire format for HTMX-like responses.
+
+### Platform interface
+
+Each target (JS, Python) must provide: type inspection (`type-of`), constructors (`make-lambda`, `make-component`, `make-macro`, `make-thunk`), accessors, environment operations (`env-has?`, `env-get`, `env-set!`, `env-extend`, `env-merge`), and DOM/HTML rendering primitives.
+
 ## Tech Stack
 
 **Web platform:** Python 3.11+, Quart (async Flask), SQLAlchemy (asyncpg), Jinja2, HTMX, PostgreSQL, Redis, Docker Swarm, Hypercorn.
@@ -108,6 +168,26 @@ cd artdag/l1 && mypy app/types.py app/routers/recipes.py tests/
 - Silent SSO: `prompt=none` OAuth flow for automatic cross-app login
 - ActivityPub: RSA signatures, per-app virtual actor projections sharing same keypair
 
+### SX Rendering Pipeline
+
+The SX system renders component trees defined in s-expressions. Canonical semantics are in `shared/sx/ref/` (see "SX Language" section above). The same AST can be evaluated in different modes depending on where the server/client rendering boundary is drawn:
+
+- `render_to_html(name, **kw)` — server-side, produces HTML. Maps to `render-to-html` in the spec.
+- `render_to_sx(name, **kw)` — server-side, produces SX wire format. Maps to `aser` in the spec. Component calls stay **unexpanded**.
+- `render_to_sx_with_env(name, env, **kw)` — server-side, **expands known components** then serializes as SX wire format. Used by layout components that need Python context.
+- `sx_page(ctx, page_sx)` — produces the full HTML shell (`<!doctype html>...`) with component definitions, CSS, and page SX inlined for client-side boot.
+
+See the docstring in `shared/sx/async_eval.py` for the full evaluation modes table.
+
+### Service SX Directory Convention
+
+Each service has two SX-related directories:
+
+- **`{service}/sx/`** — service-specific component definitions (`.sx` files with `defcomp`). Loaded at startup by `load_service_components()`. These define layout components, reusable UI fragments, etc.
+- **`{service}/sxc/`** — page definitions and Python rendering logic. Contains `defpage` definitions (client-routed pages) and the Python functions that compose headers, layouts, and page content.
+
+Shared components live in `shared/sx/templates/` and are loaded by `load_shared_components()` in the app factory.
+
 ### Art DAG
 
 - **3-Phase Execution:** Analyze → Plan → Execute (tasks in `artdag/l1/tasks/`)
@@ -130,6 +210,10 @@ cd artdag/l1 && mypy app/types.py app/routers/recipes.py tests/
 | likes | (internal only) | 8009 |
 | orders | orders.rose-ash.com | 8010 |
 
+## Dev Container Mounts
+
+Dev bind mounts in `docker-compose.dev.yml` must mirror the Docker image's COPY paths. When adding a new directory to a service (e.g. `{service}/sx/`), add a corresponding volume mount (`./service/sx:/app/sx`) or the directory won't be visible inside the dev container. Hypercorn `--reload` watches for Python file changes; `.sx` file hot-reload is handled by `reload_if_changed()` in `shared/sx/jinja_bridge.py`.
+
 ## Key Config Files
 
 - `docker-compose.yml` / `docker-compose.dev.yml` — service definitions, env vars, volumes

RESTRUCTURE_PLAN.md

@@ -0,0 +1,91 @@
+# Restructure Plan
+
+Reorganise from flat `shared/sx/ref/` to layered `spec/` + `hosts/` + `web/` + `sx/`.
+
+Recovery point: commit `1a3d7b3` on branch `macros`.
+
+## Phase 1: Directory structure
+Create all directories. No file moves.
+```
+spec/tests/
+hosts/python/
+hosts/javascript/
+web/adapters/
+web/tests/
+web/platforms/python/
+web/platforms/javascript/
+sx/platforms/python/
+sx/platforms/javascript/
+```
+
+## Phase 2: Spec files (git mv)
+Move from `shared/sx/ref/` to `spec/`:
+- eval.sx, parser.sx, primitives.sx, render.sx
+- cek.sx, frames.sx, special-forms.sx
+- continuations.sx, callcc.sx, types.sx
+Move tests to `spec/tests/`:
+- test-framework.sx, test.sx, test-eval.sx, test-parser.sx
+- test-render.sx, test-cek.sx, test-continuations.sx, test-types.sx
+Remove boundary-core.sx from spec/ (it's a contract doc, not spec)
+
+## Phase 3: Host files (git mv)
+Python host - move from `shared/sx/ref/` to `hosts/python/`:
+- bootstrap_py.py → hosts/python/bootstrap.py
+- platform_py.py → hosts/python/platform.py
+- py.sx → hosts/python/transpiler.sx
+- boundary_parser.py → hosts/python/boundary_parser.py
+- run_signal_tests.py, run_cek_tests.py, run_cek_reactive_tests.py,
+  run_continuation_tests.py, run_type_tests.py → hosts/python/tests/
+
+JS host - move from `shared/sx/ref/` to `hosts/javascript/`:
+- run_js_sx.py → hosts/javascript/bootstrap.py
+- bootstrap_js.py → hosts/javascript/cli.py
+- platform_js.py → hosts/javascript/platform.py
+- js.sx → hosts/javascript/transpiler.sx
+
+Generated output stays in place:
+- shared/sx/ref/sx_ref.py (Python runtime)
+- shared/static/scripts/sx-browser.js (JS runtime)
+
+## Phase 4: Web framework files (git mv)
+Move from `shared/sx/ref/` to `web/`:
+- signals.sx → web/signals.sx
+- engine.sx, orchestration.sx, boot.sx → web/
+- router.sx, deps.sx, forms.sx, page-helpers.sx → web/
+Move adapters to `web/adapters/`:
+- adapter-dom.sx → web/adapters/dom.sx
+- adapter-html.sx → web/adapters/html.sx
+- adapter-sx.sx → web/adapters/sx.sx
+- adapter-async.sx → web/adapters/async.sx
+Move web tests to `web/tests/`:
+- test-signals.sx, test-aser.sx, test-engine.sx, etc.
+Move boundary-web.sx to `web/boundary.sx`
+Move boundary-app.sx to `web/boundary-app.sx`
+
+## Phase 5: Platform bindings
+Web platforms:
+- Extract DOM/browser primitives from platform_js.py → web/platforms/javascript/
+- Extract IO/server primitives from platform_py.py → web/platforms/python/
+App platforms:
+- sx/sxc/pages/helpers.py → sx/platforms/python/helpers.py
+- sx/sxc/init-client.sx.txt → sx/platforms/javascript/init.sx
+
+## Phase 6: Update imports
+- All Python imports referencing shared.sx.ref.*
+- Bootstrapper paths (ref_dir, _source_dirs, _find_sx)
+- Docker volume mounts in docker-compose*.yml
+- Test runner paths
+- CLAUDE.md paths
+
+## Phase 7: Verify
+- Both bootstrappers build
+- All tests pass
+- Dev container starts
+- Website works
+- Remove duplicate files from shared/sx/ref/
+
+## Notes
+- Generated files (sx_ref.py, sx-browser.js) stay where they are
+- The runtime imports from shared.sx.ref.sx_ref — that doesn't change
+- Only the SOURCE .sx files and bootstrapper tools move
+- Each phase is a separate commit for safe rollback

_config/dev-sh-config.yaml

@@ -0,0 +1,86 @@
+root: "/rose-ash-wholefood-coop"  # no trailing slash needed (we normalize it)
+host: "https://rose-ash.com"
+base_host: "wholesale.suma.coop"
+base_login: https://wholesale.suma.coop/customer/account/login/
+base_url: https://wholesale.suma.coop/
+title: sx-web
+market_root: /market
+market_title: Market
+blog_root: /
+blog_title: all the news
+cart_root: /cart
+app_urls:
+  blog: "https://blog.rose-ash.com"
+  market: "https://market.rose-ash.com"
+  cart: "https://cart.rose-ash.com"
+  events: "https://events.rose-ash.com"
+  federation: "https://federation.rose-ash.com"
+  account: "https://account.rose-ash.com"
+  sx: "https://sx.rose-ash.com"
+  test: "https://test.rose-ash.com"
+  orders: "https://orders.rose-ash.com"
+cache:
+  fs_root: /app/_snapshot  # <- absolute path to your snapshot dir
+categories:
+  allow:
+    Basics: basics
+    Branded Goods: branded-goods
+    Chilled: chilled
+    Frozen: frozen
+    Non-foods: non-foods
+    Supplements: supplements
+    Christmas: christmas
+slugs:
+  skip:
+    - ""
+    - customer
+    - account
+    - checkout
+    - wishlist
+    - sales
+    - contact
+    - privacy-policy
+    - terms-and-conditions
+    - delivery
+    - catalogsearch
+    - quickorder
+    - apply
+    - search
+    - static
+    - media
+section-titles:
+    - ingredients
+    - allergy information
+    - allergens
+    - nutritional information
+    - nutrition
+    - storage
+    - directions
+    - preparation
+    - serving suggestions
+    - origin
+    - country of origin
+    - recycling
+    - general information
+    - additional information
+    - a note about prices
+
+blacklist:
+  category:
+    - branded-goods/alcoholic-drinks
+    - branded-goods/beers
+    - branded-goods/ciders
+    - branded-goods/wines
+  product:
+    - list-price-suma-current-suma-price-list-each-bk012-2-html
+  product-details:
+    - General Information
+    - A Note About Prices
+sumup:
+  merchant_code: "ME4J6100"
+  currency: "GBP"
+  # Name of the environment variable that holds your SumUp API key
+  api_key_env: "SUMUP_API_KEY"
+  webhook_secret: "jfwlekjfwef798ewf769ew8f679ew8f7weflwef"
+
+

account/bp/account/routes.py

@@ -13,7 +13,7 @@ from sqlalchemy import select
 
 from shared.models import UserNewsletter
 from shared.infrastructure.fragments import fetch_fragments
-from shared.sx.helpers import sx_response, render_to_sx
+from shared.sx.helpers import sx_response, sx_call
 
 
 def register(url_prefix="/"):
@@ -66,10 +66,10 @@ def register(url_prefix="/"):
         translate = "translate-x-6" if un.subscribed else "translate-x-1"
         checked = "true" if un.subscribed else "false"
 
-        return sx_response(await render_to_sx(
+        return sx_response(sx_call(
             "account-newsletter-toggle",
             id=f"nl-{nid}", url=toggle_url,
-            hdrs=f'{{"X-CSRFToken": "{csrf}"}}',
+            hdrs={"X-CSRFToken": csrf},
             target=f"#nl-{nid}",
             cls=f"relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 {bg}",
             checked=checked,

account/bp/auth/routes.py

@@ -47,11 +47,11 @@ ACCOUNT_SESSION_KEY = "account_sid"
 
 async def _render_auth_page(component: str, title: str, **kwargs) -> str:
     """Render an auth page with root layout — replaces sx_components helpers."""
-    from shared.sx.helpers import render_to_sx, full_page_sx, root_header_sx
+    from shared.sx.helpers import sx_call, full_page_sx, root_header_sx
     from shared.sx.page import get_template_context
     ctx = await get_template_context()
     hdr = await root_header_sx(ctx)
-    content = await render_to_sx(component, **{k: v for k, v in kwargs.items() if v})
+    content = sx_call(component, **{k: v for k, v in kwargs.items() if v})
     return await full_page_sx(ctx, header_rows=hdr, content=content,
                               meta_html=f"<title>{title}</title>")
 

account/sx/auth.sx

@@ -1,12 +1,12 @@
 ;; Auth page components (device auth — account-specific)
 ;; Login and check-email components are shared: see shared/sx/templates/auth.sx
 
-(defcomp ~account-device-error (&key error)
+(defcomp ~auth/device-error (&key (error :as string))
   (when error
     (div :class "bg-red-50 border border-red-200 text-red-700 p-3 rounded mb-4"
       error)))
 
-(defcomp ~account-device-form (&key error action csrf-token code)
+(defcomp ~auth/device-form (&key error (action :as string) (csrf-token :as string) (code :as string))
   (div :class "py-8 max-w-md mx-auto"
     (h1 :class "text-2xl font-bold mb-6" "Authorize device")
     (p :class "text-stone-600 mb-4" "Enter the code shown in your terminal to sign in.")
@@ -22,30 +22,30 @@
         :class "w-full bg-stone-800 text-white py-2 px-4 rounded hover:bg-stone-700 transition"
         "Authorize"))))
 
-(defcomp ~account-device-approved ()
+(defcomp ~auth/device-approved ()
   (div :class "py-8 max-w-md mx-auto text-center"
     (h1 :class "text-2xl font-bold mb-4" "Device authorized")
     (p :class "text-stone-600" "You can close this window and return to your terminal.")))
 
 ;; Assembled auth page content — replaces Python _login_page_content etc.
 
-(defcomp ~account-login-content (&key error email)
-  (~auth-login-form
-    :error (when error (~auth-error-banner :error error))
+(defcomp ~auth/login-content (&key (error :as string?) (email :as string?))
+  (~shared:auth/login-form
+    :error (when error (~shared:auth/error-banner :error error))
     :action (url-for "auth.start_login")
     :csrf-token (csrf-token)
     :email (or email "")))
 
-(defcomp ~account-device-content (&key error code)
-  (~account-device-form
-    :error (when error (~account-device-error :error error))
+(defcomp ~auth/device-content (&key (error :as string?) (code :as string?))
+  (~auth/device-form
+    :error (when error (~auth/device-error :error error))
     :action (url-for "auth.device_submit")
     :csrf-token (csrf-token)
     :code (or code "")))
 
-(defcomp ~account-check-email-content (&key email email-error)
-  (~auth-check-email
+(defcomp ~auth/check-email-content (&key (email :as string?) (email-error :as string?))
+  (~shared:auth/check-email
     :email (escape (or email ""))
     :error (when email-error
-             (~auth-check-email-error :error (escape email-error)))))
+             (~shared:auth/check-email-error :error (escape email-error)))))
 

account/sx/dashboard.sx

@@ -1,36 +1,36 @@
 ;; Account dashboard components
 
-(defcomp ~account-error-banner (&key error)
+(defcomp ~dashboard/error-banner (&key (error :as string))
   (when error
     (div :class "rounded-lg border border-red-200 bg-red-50 text-red-800 px-4 py-3 text-sm"
       error)))
 
-(defcomp ~account-user-email (&key email)
+(defcomp ~dashboard/user-email (&key (email :as string))
   (when email
     (p :class "text-sm text-stone-500 mt-1" email)))
 
-(defcomp ~account-user-name (&key name)
+(defcomp ~dashboard/user-name (&key (name :as string))
   (when name
     (p :class "text-sm text-stone-600" name)))
 
-(defcomp ~account-logout-form (&key csrf-token)
+(defcomp ~dashboard/logout-form (&key (csrf-token :as string))
   (form :action "/auth/logout/" :method "post"
     (input :type "hidden" :name "csrf_token" :value csrf-token)
     (button :type "submit"
       :class "inline-flex items-center gap-2 rounded-full border border-stone-300 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-50 transition"
       (i :class "fa-solid fa-right-from-bracket text-xs") " Sign out")))
 
-(defcomp ~account-label-item (&key name)
+(defcomp ~dashboard/label-item (&key (name :as string))
   (span :class "inline-flex items-center rounded-full border border-stone-200 px-3 py-1 text-xs font-medium bg-white/60"
     name))
 
-(defcomp ~account-labels-section (&key items)
+(defcomp ~dashboard/labels-section (&key items)
   (when items
     (div
       (h2 :class "text-base font-semibold tracking-tight mb-3" "Labels")
       (div :class "flex flex-wrap gap-2" items))))
 
-(defcomp ~account-main-panel (&key error email name logout labels)
+(defcomp ~dashboard/main-panel (&key error email name logout labels)
   (div :class "w-full max-w-3xl mx-auto px-4 py-6"
     (div :class "bg-white/70 backdrop-blur rounded-2xl shadow border border-stone-200 p-6 sm:p-8 space-y-8"
       error
@@ -43,18 +43,18 @@
       labels)))
 
 ;; Assembled dashboard content — replaces Python _account_main_panel_sx
-(defcomp ~account-dashboard-content (&key error)
+(defcomp ~dashboard/content (&key (error :as string?))
   (let* ((user (current-user))
          (csrf (csrf-token)))
-    (~account-main-panel
-      :error (when error (~account-error-banner :error error))
+    (~dashboard/main-panel
+      :error (when error (~dashboard/error-banner :error error))
       :email (when (get user "email")
-               (~account-user-email :email (get user "email")))
+               (~dashboard/user-email :email (get user "email")))
       :name (when (get user "name")
-              (~account-user-name :name (get user "name")))
-      :logout (~account-logout-form :csrf-token csrf)
+              (~dashboard/user-name :name (get user "name")))
+      :logout (~dashboard/logout-form :csrf-token csrf)
       :labels (when (not (empty? (or (get user "labels") (list))))
-                (~account-labels-section
+                (~dashboard/labels-section
                   :items (map (lambda (label)
-                    (~account-label-item :name (get label "name")))
+                    (~dashboard/label-item :name (get label "name")))
                     (get user "labels")))))))

account/sx/handlers/auth-menu.sx

@@ -1,4 +1,5 @@
 ;; Account auth-menu fragment handler
+;; returns: sx
 ;;
 ;; Renders the desktop + mobile auth menu (sign-in or user link).
 

account/sx/layouts.sx

@@ -0,0 +1,20 @@
+;; Account layout defcomps — fully self-contained via IO primitives.
+;; Registered via register_sx_layout("account", ...) in __init__.py.
+
+;; Full page: root header + auth header row in header-child
+(defcomp ~layouts/full ()
+  (<> (~root-header-auto)
+    (~shared:layout/header-child-sx
+      :inner (~auth-header-row-auto))))
+
+;; OOB (HTMX): auth row + root header, both with oob=true
+(defcomp ~layouts/oob ()
+  (<> (~auth-header-row-auto true)
+    (~root-header-auto true)))
+
+;; Mobile menu: auth section + root nav
+(defcomp ~layouts/mobile ()
+  (<> (~shared:layout/mobile-menu-section
+        :label "account" :href "/" :level 1 :colour "sky"
+        :items (~auth-nav-items-auto))
+    (~root-mobile-auto)))

account/sx/newsletters.sx

@@ -1,30 +1,30 @@
 ;; Newsletter management components
 
-(defcomp ~account-newsletter-desc (&key description)
+(defcomp ~newsletters/desc (&key (description :as string))
   (when description
     (p :class "text-xs text-stone-500 mt-0.5 truncate" description)))
 
-(defcomp ~account-newsletter-toggle (&key id url hdrs target cls checked knob-cls)
+(defcomp ~newsletters/toggle (&key (id :as string) (url :as string) (hdrs :as dict) (target :as string) (cls :as string) (checked :as string) (knob-cls :as string))
   (div :id id :class "flex items-center"
     (button :sx-post url :sx-headers hdrs :sx-target target :sx-swap "outerHTML"
       :class cls :role "switch" :aria-checked checked
       (span :class knob-cls))))
 
 
-(defcomp ~account-newsletter-item (&key name desc toggle)
+(defcomp ~newsletters/item (&key (name :as string) desc toggle)
   (div :class "flex items-center justify-between py-4 first:pt-0 last:pb-0"
     (div :class "min-w-0 flex-1"
       (p :class "text-sm font-medium text-stone-800" name)
       desc)
     (div :class "ml-4 flex-shrink-0" toggle)))
 
-(defcomp ~account-newsletter-list (&key items)
+(defcomp ~newsletters/list (&key items)
   (div :class "divide-y divide-stone-100" items))
 
-(defcomp ~account-newsletter-empty ()
+(defcomp ~newsletters/empty ()
   (p :class "text-sm text-stone-500" "No newsletters available."))
 
-(defcomp ~account-newsletters-panel (&key list)
+(defcomp ~newsletters/panel (&key list)
   (div :class "w-full max-w-3xl mx-auto px-4 py-6"
     (div :class "bg-white/70 backdrop-blur rounded-2xl shadow border border-stone-200 p-6 sm:p-8 space-y-6"
       (h1 :class "text-xl font-semibold tracking-tight" "Newsletters")
@@ -32,12 +32,12 @@
 
 ;; Assembled newsletters content — replaces Python _newsletters_panel_sx
 ;; Takes pre-fetched newsletter-list from page helper
-(defcomp ~account-newsletters-content (&key newsletter-list account-url)
+(defcomp ~newsletters/content (&key (newsletter-list :as list) (account-url :as string?))
   (let* ((csrf (csrf-token)))
     (if (empty? newsletter-list)
-      (~account-newsletter-empty)
-      (~account-newsletters-panel
-        :list (~account-newsletter-list
+      (~newsletters/empty)
+      (~newsletters/panel
+        :list (~newsletters/list
           :items (map (lambda (item)
             (let* ((nl (get item "newsletter"))
                    (un (get item "un"))
@@ -47,14 +47,14 @@
                    (bg (if subscribed "bg-emerald-500" "bg-stone-300"))
                    (translate (if subscribed "translate-x-6" "translate-x-1"))
                    (checked (if subscribed "true" "false")))
-              (~account-newsletter-item
+              (~newsletters/item
                 :name (get nl "name")
                 :desc (when (get nl "description")
-                        (~account-newsletter-desc :description (get nl "description")))
-                :toggle (~account-newsletter-toggle
+                        (~newsletters/desc :description (get nl "description")))
+                :toggle (~newsletters/toggle
                   :id (str "nl-" nid)
                   :url toggle-url
-                  :hdrs (str "{\"X-CSRFToken\": \"" csrf "\"}")
+                  :hdrs {:X-CSRFToken csrf}
                   :target (str "#nl-" nid)
                   :cls (str "relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 " bg)
                   :checked checked

account/sxc/pages/__init__.py

@@ -1,8 +1,6 @@
 """Account defpage setup — registers layouts and loads .sx pages."""
 from __future__ import annotations
 
-from typing import Any
-
 
 def setup_account_pages() -> None:
     """Register account-specific layouts and load page definitions."""
@@ -16,76 +14,6 @@ def _load_account_page_files() -> None:
     load_page_dir(os.path.dirname(__file__), "account")
 
 
-# ---------------------------------------------------------------------------
-# Layouts
-# ---------------------------------------------------------------------------
-
 def _register_account_layouts() -> None:
-    from shared.sx.layouts import register_custom_layout
-    register_custom_layout("account", _account_full, _account_oob, _account_mobile)
-
-
-async def _account_full(ctx: dict, **kw: Any) -> str:
-    from shared.sx.helpers import root_header_sx, header_child_sx, render_to_sx
-
-    root_hdr = await root_header_sx(ctx)
-    auth_hdr = await render_to_sx("auth-header-row",
-        account_url=_call_url(ctx, "account_url", ""),
-        select_colours=ctx.get("select_colours", ""),
-        account_nav=_as_sx_nav(ctx),
-    )
-    hdr_child = await header_child_sx(auth_hdr)
-    return "(<> " + root_hdr + " " + hdr_child + ")"
-
-
-async def _account_oob(ctx: dict, **kw: Any) -> str:
-    from shared.sx.helpers import root_header_sx, render_to_sx
-
-    auth_hdr = await render_to_sx("auth-header-row",
-        account_url=_call_url(ctx, "account_url", ""),
-        select_colours=ctx.get("select_colours", ""),
-        account_nav=_as_sx_nav(ctx),
-        oob=True,
-    )
-    return "(<> " + auth_hdr + " " + await root_header_sx(ctx, oob=True) + ")"
-
-
-async def _account_mobile(ctx: dict, **kw: Any) -> str:
-    from shared.sx.helpers import mobile_menu_sx, mobile_root_nav_sx, render_to_sx
-    from shared.sx.parser import SxExpr
-
-    ctx = _inject_account_nav(ctx)
-    nav_items = await render_to_sx("auth-nav-items",
-        account_url=_call_url(ctx, "account_url", ""),
-        select_colours=ctx.get("select_colours", ""),
-        account_nav=_as_sx_nav(ctx),
-    )
-    auth_section = await render_to_sx("mobile-menu-section",
-        label="account", href="/", level=1, colour="sky",
-        items=SxExpr(nav_items))
-    return mobile_menu_sx(auth_section, await mobile_root_nav_sx(ctx))
-
-
-def _call_url(ctx: dict, key: str, path: str = "/") -> str:
-    fn = ctx.get(key)
-    if callable(fn):
-        return fn(path)
-    return str(fn or "") + path
-
-
-def _inject_account_nav(ctx: dict) -> dict:
-    """Ensure account_nav is in ctx from g.account_nav."""
-    if "account_nav" not in ctx:
-        from quart import g
-        ctx = dict(ctx)
-        ctx["account_nav"] = getattr(g, "account_nav", "")
-    return ctx
-
-
-def _as_sx_nav(ctx: dict) -> Any:
-    """Convert account_nav fragment to SxExpr for use in component calls."""
-    from shared.sx.helpers import _as_sx
-    ctx = _inject_account_nav(ctx)
-    return _as_sx(ctx.get("account_nav"))
-
-
+    from shared.sx.layouts import register_sx_layout
+    register_sx_layout("account", "account-layout-full", "account-layout-oob", "account-layout-mobile")

account/sxc/pages/account.sx

@@ -8,7 +8,7 @@
   :path "/"
   :auth :login
   :layout :account
-  :content (~account-dashboard-content))
+  :content (~dashboard/content))
 
 ;; ---------------------------------------------------------------------------
 ;; Newsletters
@@ -19,7 +19,7 @@
   :auth :login
   :layout :account
   :data (service "account-page" "newsletters-data")
-  :content (~account-newsletters-content
+  :content (~newsletters/content
     :newsletter-list newsletter-list
     :account-url account-url))
 

blog/bp/blog/ghost/lexical_to_sx.py

@@ -256,7 +256,7 @@ def _image(node: dict) -> str:
         parts.append(f':width "{_esc(width)}"')
     if href:
         parts.append(f':href "{_esc(href)}"')
-    return "(~kg-image " + " ".join(parts) + ")"
+    return "(~kg_cards/kg-image " + " ".join(parts) + ")"
 
 
 @_converter("gallery")
@@ -282,14 +282,14 @@ def _gallery(node: dict) -> str:
     images_sx = "(list " + " ".join(rows) + ")"
     caption = node.get("caption", "")
     caption_attr = f" :caption {html_to_sx(caption)}" if caption else ""
-    return f"(~kg-gallery :images {images_sx}{caption_attr})"
+    return f"(~kg_cards/kg-gallery :images {images_sx}{caption_attr})"
 
 
 @_converter("html")
 def _html_card(node: dict) -> str:
     raw = node.get("html", "")
     inner = html_to_sx(raw)
-    return f"(~kg-html {inner})"
+    return f"(~kg_cards/kg-html {inner})"
 
 
 @_converter("embed")
@@ -299,7 +299,7 @@ def _embed(node: dict) -> str:
     parts = [f':html "{_esc(embed_html)}"']
     if caption:
         parts.append(f":caption {html_to_sx(caption)}")
-    return "(~kg-embed " + " ".join(parts) + ")"
+    return "(~kg_cards/kg-embed " + " ".join(parts) + ")"
 
 
 @_converter("bookmark")
@@ -330,7 +330,7 @@ def _bookmark(node: dict) -> str:
     if caption:
         parts.append(f":caption {html_to_sx(caption)}")
 
-    return "(~kg-bookmark " + " ".join(parts) + ")"
+    return "(~kg_cards/kg-bookmark " + " ".join(parts) + ")"
 
 
 @_converter("callout")
@@ -344,7 +344,7 @@ def _callout(node: dict) -> str:
         parts.append(f':emoji "{_esc(emoji)}"')
     if inner:
         parts.append(f':content {inner}')
-    return "(~kg-callout " + " ".join(parts) + ")"
+    return "(~kg_cards/kg-callout " + " ".join(parts) + ")"
 
 
 @_converter("button")
@@ -352,7 +352,7 @@ def _button(node: dict) -> str:
     text = node.get("buttonText", "")
     url = node.get("buttonUrl", "")
     alignment = node.get("alignment", "center")
-    return f'(~kg-button :url "{_esc(url)}" :text "{_esc(text)}" :alignment "{_esc(alignment)}")'
+    return f'(~kg_cards/kg-button :url "{_esc(url)}" :text "{_esc(text)}" :alignment "{_esc(alignment)}")'
 
 
 @_converter("toggle")
@@ -360,7 +360,7 @@ def _toggle(node: dict) -> str:
     heading = node.get("heading", "")
     inner = _convert_children(node.get("children", []))
     content_attr = f" :content {inner}" if inner else ""
-    return f'(~kg-toggle :heading "{_esc(heading)}"{content_attr})'
+    return f'(~kg_cards/kg-toggle :heading "{_esc(heading)}"{content_attr})'
 
 
 @_converter("audio")
@@ -380,7 +380,7 @@ def _audio(node: dict) -> str:
     parts.append(f':duration "{duration_str}"')
     if thumbnail:
         parts.append(f':thumbnail "{_esc(thumbnail)}"')
-    return "(~kg-audio " + " ".join(parts) + ")"
+    return "(~kg_cards/kg-audio " + " ".join(parts) + ")"
 
 
 @_converter("video")
@@ -400,7 +400,7 @@ def _video(node: dict) -> str:
         parts.append(f':thumbnail "{_esc(thumbnail)}"')
     if loop:
         parts.append(":loop true")
-    return "(~kg-video " + " ".join(parts) + ")"
+    return "(~kg_cards/kg-video " + " ".join(parts) + ")"
 
 
 @_converter("file")
@@ -429,12 +429,12 @@ def _file(node: dict) -> str:
         parts.append(f':filesize "{size_str}"')
     if caption:
         parts.append(f":caption {html_to_sx(caption)}")
-    return "(~kg-file " + " ".join(parts) + ")"
+    return "(~kg_cards/kg-file " + " ".join(parts) + ")"
 
 
 @_converter("paywall")
 def _paywall(_node: dict) -> str:
-    return "(~kg-paywall)"
+    return "(~kg_cards/kg-paywall)"
 
 
 @_converter("markdown")
@@ -442,4 +442,4 @@ def _markdown(node: dict) -> str:
     md_text = node.get("markdown", "")
     rendered = mistune.html(md_text)
     inner = html_to_sx(rendered)
-    return f"(~kg-md {inner})"
+    return f"(~kg_cards/kg-md {inner})"

blog/bp/blog/routes.py

@@ -21,7 +21,7 @@ from .services.pages_data import pages_data
 from shared.browser.app.redis_cacher import cache_page, invalidate_tag_cache
 from shared.browser.app.utils.htmx import is_htmx_request
 from shared.browser.app.authz import require_admin
-from shared.sx.helpers import sx_response, render_to_sx
+from shared.sx.helpers import sx_response, sx_call
 from shared.utils import host_url
 
 def register(url_prefix, title):
@@ -67,7 +67,7 @@ def register(url_prefix, title):
         from shared.sx.helpers import root_header_sx, full_page_sx
         from shared.sx.parser import SxExpr
         root_hdr = await root_header_sx(tctx)
-        blog_hdr = await render_to_sx("menu-row-sx",
+        blog_hdr = sx_call("menu-row-sx",
             id="blog-row", level=1,
             link_label_content=SxExpr("(div)"),
             child_id="blog-header-child")
@@ -132,7 +132,7 @@ def register(url_prefix, title):
 
       from shared.sx.page import get_template_context
       from shared.sx.helpers import (
-          render_to_sx, root_header_sx, full_page_sx, oob_page_sx,
+          sx_call, root_header_sx, full_page_sx, oob_page_sx,
           post_header_sx, oob_header_sx, mobile_menu_sx,
           post_mobile_nav_sx, mobile_root_nav_sx,
       )
@@ -143,11 +143,11 @@ def register(url_prefix, title):
       tctx.update(ctx)
 
       post = ctx.get("post", {})
-      content = await render_to_sx("blog-home-main",
+      content = sx_call("blog-home-main",
           html_content=post.get("html", ""),
           sx_content=SxExpr(post.get("sx_content", "")) if post.get("sx_content") else None)
-      meta_data = services.get("blog_page").post_meta_data(post, ctx.get("base_title", ""))
-      meta = await render_to_sx("blog-meta", **meta_data)
+      meta_data = services.blog_page.post_meta_data(post, ctx.get("base_title", ""))
+      meta = sx_call("blog-meta", **meta_data)
 
       if not is_htmx_request():
           root_hdr = await root_header_sx(tctx)
@@ -171,29 +171,29 @@ def register(url_prefix, title):
       """Blog listing — moved from / to /index."""
       from shared.services.registry import services
       from shared.sx.helpers import (
-          render_to_sx, root_header_sx, full_page_sx, oob_page_sx, oob_header_sx,
+          sx_call, root_header_sx, full_page_sx, oob_page_sx, oob_header_sx,
       )
       from shared.sx.parser import SxExpr
 
-      async def _blog_hdr(ctx, oob=False):
-          return await render_to_sx("menu-row-sx",
+      def _blog_hdr(ctx, oob=False):
+          return sx_call("menu-row-sx",
               id="blog-row", level=1,
               link_label_content=SxExpr("(div)"),
               child_id="blog-header-child", oob=oob)
 
-      data = await services.get("blog_page").index_data(g.s)
+      data = await services.blog_page.index_data(g.s)
 
       # Render content, aside, and filter via .sx defcomps
-      content = await render_to_sx("blog-index-main-content", **data)
-      aside = await render_to_sx("blog-index-aside-content", **data)
-      filter_sx = await render_to_sx("blog-index-filter-content", **data)
+      content = sx_call("blog-index-main-content", **data)
+      aside = sx_call("blog-index-aside-content", **data)
+      filter_sx = sx_call("blog-index-filter-content", **data)
 
       from shared.sx.page import get_template_context
       tctx = await get_template_context()
 
       if not is_htmx_request():
           root_hdr = await root_header_sx(tctx)
-          blog_hdr = await _blog_hdr(tctx)
+          blog_hdr = _blog_hdr(tctx)
           header_rows = "(<> " + root_hdr + " " + blog_hdr + ")"
           html = await full_page_sx(tctx, header_rows=header_rows,
                                     content=content, aside=aside, filter=filter_sx)
@@ -203,7 +203,7 @@ def register(url_prefix, title):
           return sx_response(content)
       else:
           root_hdr = await root_header_sx(tctx)
-          blog_hdr = await _blog_hdr(tctx)
+          blog_hdr = _blog_hdr(tctx)
           rows = "(<> " + root_hdr + " " + blog_hdr + ")"
           header_oob = await oob_header_sx("root-header-child", "blog-header-child", rows)
           sx_src = await oob_page_sx(oobs=header_oob, content=content,
@@ -229,18 +229,18 @@ def register(url_prefix, title):
         lexical_doc = json.loads(lexical_raw)
       except (json.JSONDecodeError, TypeError):
         from shared.sx.page import get_template_context
-        from sxc.pages import render_editor_panel
+        from sxc.pages.renders import render_editor_panel
         tctx = await get_template_context()
-        tctx["editor_html"] = await render_editor_panel(save_error="Invalid JSON in editor content.")
+        tctx["editor_html"] = render_editor_panel(save_error="Invalid JSON in editor content.")
         html = await _render_new_post_page(tctx)
         return await make_response(html, 400)
 
       ok, reason = validate_lexical(lexical_doc)
       if not ok:
         from shared.sx.page import get_template_context
-        from sxc.pages import render_editor_panel
+        from sxc.pages.renders import render_editor_panel
         tctx = await get_template_context()
-        tctx["editor_html"] = await render_editor_panel(save_error=reason)
+        tctx["editor_html"] = render_editor_panel(save_error=reason)
         html = await _render_new_post_page(tctx)
         return await make_response(html, 400)
 
@@ -285,9 +285,9 @@ def register(url_prefix, title):
         lexical_doc = json.loads(lexical_raw)
       except (json.JSONDecodeError, TypeError):
         from shared.sx.page import get_template_context
-        from sxc.pages import render_editor_panel
+        from sxc.pages.renders import render_editor_panel
         tctx = await get_template_context()
-        tctx["editor_html"] = await render_editor_panel(save_error="Invalid JSON in editor content.", is_page=True)
+        tctx["editor_html"] = render_editor_panel(save_error="Invalid JSON in editor content.", is_page=True)
         tctx["is_page"] = True
         html = await _render_new_post_page(tctx)
         return await make_response(html, 400)
@@ -295,9 +295,9 @@ def register(url_prefix, title):
       ok, reason = validate_lexical(lexical_doc)
       if not ok:
         from shared.sx.page import get_template_context
-        from sxc.pages import render_editor_panel
+        from sxc.pages.renders import render_editor_panel
         tctx = await get_template_context()
-        tctx["editor_html"] = await render_editor_panel(save_error=reason, is_page=True)
+        tctx["editor_html"] = render_editor_panel(save_error=reason, is_page=True)
         tctx["is_page"] = True
         html = await _render_new_post_page(tctx)
         return await make_response(html, 400)

blog/bp/menu_items/routes.py

@@ -13,12 +13,12 @@ from .services.menu_items import (
     MenuItemError,
 )
 from markupsafe import escape
-from shared.sx.helpers import sx_response, render_to_sx
+from shared.sx.helpers import sx_response, sx_call
 from shared.sx.parser import SxExpr
 from shared.browser.app.csrf import generate_csrf_token
 
 
-async def _render_menu_items_list(menu_items):
+def _render_menu_items_list(menu_items):
     """Serialize ORM menu items and render via .sx defcomp."""
     csrf = generate_csrf_token()
     items = []
@@ -32,8 +32,8 @@ async def _render_menu_items_list(menu_items):
             "delete_url": url_for("menu_items.delete_menu_item_route", item_id=item.id),
         })
     new_url = url_for("menu_items.new_menu_item")
-    return await render_to_sx("blog-menu-items-content",
-                              menu_items=items, new_url=new_url, csrf=csrf)
+    return sx_call("blog-menu-items-content",
+                    menu_items=items, new_url=new_url, csrf=csrf)
 
 
 def _render_menu_item_form(menu_item=None) -> str:
@@ -120,16 +120,16 @@ document.addEventListener('click', function(e) {{
     return html
 
 
-async def _render_page_search_results(pages, query, page, has_more) -> str:
+def _render_page_search_results(pages, query, page, has_more) -> str:
     """Render page search results."""
     if not pages and query:
-        return await render_to_sx("page-search-empty", query=query)
+        return sx_call("page-search-empty", query=query)
     if not pages:
         return ""
 
     items = []
     for post in pages:
-        items.append(await render_to_sx("page-search-item",
+        items.append(sx_call("page-search-item",
                              id=post.id, title=post.title,
                              slug=post.slug,
                              feature_image=post.feature_image or None))
@@ -137,22 +137,22 @@ async def _render_page_search_results(pages, query, page, has_more) -> str:
     sentinel = ""
     if has_more:
         search_url = url_for("menu_items.search_pages_route")
-        sentinel = await render_to_sx("page-search-sentinel",
+        sentinel = sx_call("page-search-sentinel",
                           url=search_url, query=query,
                           next_page=page + 1)
 
     items_sx = "(<> " + " ".join(items) + ")"
-    return await render_to_sx("page-search-results",
+    return sx_call("page-search-results",
                    items=SxExpr(items_sx),
-                   sentinel=SxExpr(sentinel) if sentinel else None)
+                   sentinel=sentinel or None)
 
 
-async def _render_menu_items_nav_oob(menu_items) -> str:
+def _render_menu_items_nav_oob(menu_items) -> str:
     """Render OOB nav update for menu items."""
     from quart import request as qrequest
 
     if not menu_items:
-        return await render_to_sx("blog-nav-empty", wrapper_id="menu-items-nav-wrapper")
+        return sx_call("blog-nav-empty", wrapper_id="menu-items-nav-wrapper")
 
     first_seg = qrequest.path.strip("/").split("/")[0] if qrequest else ""
 
@@ -185,23 +185,23 @@ async def _render_menu_items_nav_oob(menu_items) -> str:
         href = f"/{item_slug}/"
         selected = "true" if item_slug == first_seg else "false"
 
-        img_sx = await render_to_sx("img-or-placeholder", src=fi, alt=label,
+        img_sx = sx_call("img-or-placeholder", src=fi, alt=label,
             size_cls="w-8 h-8 rounded-full object-cover flex-shrink-0")
 
         if item_slug != "cart":
-            item_parts.append(await render_to_sx("blog-nav-item-link",
+            item_parts.append(sx_call("blog-nav-item-link",
                 href=href, hx_get=f"/{item_slug}/", selected=selected,
-                nav_cls=nav_button_cls, img=SxExpr(img_sx), label=label,
+                nav_cls=nav_button_cls, img=img_sx, label=label,
             ))
         else:
-            item_parts.append(await render_to_sx("blog-nav-item-plain",
+            item_parts.append(sx_call("blog-nav-item-plain",
                 href=href, selected=selected, nav_cls=nav_button_cls,
-                img=SxExpr(img_sx), label=label,
+                img=img_sx, label=label,
             ))
 
     items_sx = "(<> " + " ".join(item_parts) + ")" if item_parts else ""
 
-    return await render_to_sx("scroll-nav-wrapper",
+    return sx_call("scroll-nav-wrapper",
         wrapper_id="menu-items-nav-wrapper", container_id=container_id,
         arrow_cls=arrow_cls,
         left_hs=f"on click set #{container_id}.scrollLeft to #{container_id}.scrollLeft - 200",
@@ -214,9 +214,9 @@ async def _render_menu_items_nav_oob(menu_items) -> str:
 def register():
     bp = Blueprint("menu_items", __name__, url_prefix='/settings/menu_items')
 
-    async def get_menu_items_nav_oob_async(menu_items):
+    def get_menu_items_nav_oob_sync(menu_items):
         """Helper to generate OOB update for root nav menu items"""
-        return await _render_menu_items_nav_oob(menu_items)
+        return _render_menu_items_nav_oob(menu_items)
 
     @bp.get("/new/")
     @require_admin
@@ -245,8 +245,8 @@ def register():
 
             # Get updated list and nav OOB
             menu_items = await get_all_menu_items(g.s)
-            html = await _render_menu_items_list(menu_items)
-            nav_oob = await get_menu_items_nav_oob_async(menu_items)
+            html = _render_menu_items_list(menu_items)
+            nav_oob = get_menu_items_nav_oob_sync(menu_items)
             return sx_response(html + nav_oob)
 
         except MenuItemError as e:
@@ -283,8 +283,8 @@ def register():
 
             # Get updated list and nav OOB
             menu_items = await get_all_menu_items(g.s)
-            html = await _render_menu_items_list(menu_items)
-            nav_oob = await get_menu_items_nav_oob_async(menu_items)
+            html = _render_menu_items_list(menu_items)
+            nav_oob = get_menu_items_nav_oob_sync(menu_items)
             return sx_response(html + nav_oob)
 
         except MenuItemError as e:
@@ -303,8 +303,8 @@ def register():
 
         # Get updated list and nav OOB
         menu_items = await get_all_menu_items(g.s)
-        html = await _render_menu_items_list(menu_items)
-        nav_oob = await get_menu_items_nav_oob_async(menu_items)
+        html = _render_menu_items_list(menu_items)
+        nav_oob = get_menu_items_nav_oob_sync(menu_items)
         return sx_response(html + nav_oob)
 
     @bp.get("/pages/search/")
@@ -318,7 +318,7 @@ def register():
         pages, total = await search_pages(g.s, query, page, per_page)
         has_more = (page * per_page) < total
 
-        return sx_response(await _render_page_search_results(pages, query, page, has_more))
+        return sx_response(_render_page_search_results(pages, query, page, has_more))
 
     @bp.post("/reorder/")
     @require_admin
@@ -342,8 +342,8 @@ def register():
 
         # Get updated list and nav OOB
         menu_items = await get_all_menu_items(g.s)
-        html = await _render_menu_items_list(menu_items)
-        nav_oob = await get_menu_items_nav_oob_async(menu_items)
+        html = _render_menu_items_list(menu_items)
+        nav_oob = get_menu_items_nav_oob_sync(menu_items)
         return sx_response(html + nav_oob)
 
     return bp

blog/bp/post/admin/routes.py

@@ -11,7 +11,7 @@ from quart import (
 )
 from shared.browser.app.authz import require_admin, require_post_author
 from markupsafe import escape
-from shared.sx.helpers import sx_response, render_to_sx
+from shared.sx.helpers import sx_response, sx_call
 from shared.sx.parser import SxExpr, serialize as sx_serialize
 from shared.utils import host_url
 
@@ -60,10 +60,10 @@ def _post_to_edit_dict(post) -> dict:
     return d
 
 
-async def _render_features(features, post, result):
+def _render_features(features, post, result):
     """Render features panel via .sx defcomp."""
     slug = post.get("slug", "")
-    return await render_to_sx("blog-features-panel-content",
+    return sx_call("blog-features-panel-content",
         features_url=host_url(url_for("blog.post.admin.update_features", slug=slug)),
         calendar_checked=bool(features.get("calendar")),
         market_checked=bool(features.get("market")),
@@ -138,7 +138,7 @@ def _render_calendar_view(
                 e_id = getattr(e, "id", None)
                 e_name = esc(getattr(e, "name", ""))
                 t_url = toggle_url_fn(e_id)
-                hx_hdrs = f'{{"X-CSRFToken": "{csrf}"}}'
+                hx_hdrs = '{:X-CSRFToken "' + csrf + '"}'
 
                 if e_id in associated_entry_ids:
                     entry_btns.append(
@@ -187,60 +187,20 @@ def _render_calendar_view(
     return _raw_html_sx(html)
 
 
-async def _render_associated_entries(all_calendars, associated_entry_ids, post_slug: str) -> str:
+def _render_associated_entries(all_calendars, associated_entry_ids, post_slug: str) -> str:
     """Render the associated entries panel."""
     from shared.browser.app.csrf import generate_csrf_token
-    from quart import url_for as qurl
+    from sxc.pages.helpers import _extract_associated_entries_data
 
     csrf = generate_csrf_token()
+    entry_data = _extract_associated_entries_data(
+        all_calendars, associated_entry_ids, post_slug)
 
-    has_entries = False
-    entry_items: list[str] = []
-    for calendar in all_calendars:
-        entries = getattr(calendar, "entries", []) or []
-        cal_name = getattr(calendar, "name", "")
-        cal_post = getattr(calendar, "post", None)
-        cal_fi = getattr(cal_post, "feature_image", None) if cal_post else None
-        cal_title = getattr(cal_post, "title", "") if cal_post else ""
-
-        for entry in entries:
-            e_id = getattr(entry, "id", None)
-            if e_id not in associated_entry_ids:
-                continue
-            if getattr(entry, "deleted_at", None) is not None:
-                continue
-            has_entries = True
-            e_name = getattr(entry, "name", "")
-            e_start = getattr(entry, "start_at", None)
-            e_end = getattr(entry, "end_at", None)
-
-            toggle_url = host_url(qurl("blog.post.admin.toggle_entry", slug=post_slug, entry_id=e_id))
-
-            img_sx = await render_to_sx("blog-entry-image", src=cal_fi, title=cal_title)
-
-            date_str = e_start.strftime("%A, %B %d, %Y at %H:%M") if e_start else ""
-            if e_end:
-                date_str += f" \u2013 {e_end.strftime('%H:%M')}"
-
-            entry_items.append(await render_to_sx("blog-associated-entry",
-                confirm_text=f"This will remove {e_name} from this post",
-                toggle_url=toggle_url,
-                hx_headers=f'{{"X-CSRFToken": "{csrf}"}}',
-                img=SxExpr(img_sx), name=e_name,
-                date_str=f"{cal_name} \u2022 {date_str}",
-            ))
-
-    if has_entries:
-        content_sx = await render_to_sx("blog-associated-entries-content",
-            items=SxExpr("(<> " + " ".join(entry_items) + ")"),
-        )
-    else:
-        content_sx = await render_to_sx("blog-associated-entries-empty")
-
-    return await render_to_sx("blog-associated-entries-panel", content=SxExpr(content_sx))
+    return sx_call("blog-associated-entries-from-data",
+        entries=entry_data, csrf=csrf)
 
 
-async def _render_nav_entries_oob(associated_entries, calendars, post: dict) -> str:
+def _render_nav_entries_oob(associated_entries, calendars, post: dict) -> str:
     """Render the OOB nav entries swap."""
     entries_list = []
     if associated_entries and hasattr(associated_entries, "entries"):
@@ -249,7 +209,7 @@ async def _render_nav_entries_oob(associated_entries, calendars, post: dict) ->
     has_items = bool(entries_list or calendars)
 
     if not has_items:
-        return await render_to_sx("blog-nav-entries-empty")
+        return sx_call("blog-nav-entries-empty")
 
     select_colours = (
         "[.hover-capable_&]:hover:bg-yellow-300"
@@ -291,7 +251,7 @@ async def _render_nav_entries_oob(associated_entries, calendars, post: dict) ->
             entry_path = f"/{post_slug}/{cal_slug}/"
             date_str = ""
 
-        item_parts.append(await render_to_sx("calendar-entry-nav",
+        item_parts.append(sx_call("calendar-entry-nav",
             href=entry_path, nav_class=nav_cls, name=e_name, date_str=date_str,
         ))
 
@@ -300,13 +260,13 @@ async def _render_nav_entries_oob(associated_entries, calendars, post: dict) ->
         cal_slug = getattr(calendar, "slug", "")
         cal_path = f"/{post_slug}/{cal_slug}/"
 
-        item_parts.append(await render_to_sx("blog-nav-calendar-item",
+        item_parts.append(sx_call("blog-nav-calendar-item",
             href=cal_path, nav_cls=nav_cls, name=cal_name,
         ))
 
     items_sx = "(<> " + " ".join(item_parts) + ")" if item_parts else ""
 
-    return await render_to_sx("scroll-nav-wrapper",
+    return sx_call("scroll-nav-wrapper",
         wrapper_id="entries-calendars-nav-wrapper", container_id="associated-items-container",
         arrow_cls="entries-nav-arrow",
         left_hs="on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200",
@@ -353,7 +313,7 @@ def register():
     })
 
     features = result.get("features", {})
-    html = await _render_features(features, post, result)
+    html = _render_features(features, post, result)
     return sx_response(html)
 
   @bp.put("/admin/sumup/")
@@ -386,7 +346,7 @@ def register():
     result = await call_action("blog", "update-page-config", payload=payload)
 
     features = result.get("features", {})
-    html = await _render_features(features, post, result)
+    html = _render_features(features, post, result)
     return sx_response(html)
 
   @bp.get("/entries/calendar/<int:calendar_id>/")
@@ -508,8 +468,8 @@ def register():
 
     # Return the associated entries admin list + OOB update for nav entries
     post = g.post_data["post"]
-    admin_list = await _render_associated_entries(all_calendars, associated_entry_ids, post["slug"])
-    nav_entries_html = await _render_nav_entries_oob(associated_entries, calendars, post)
+    admin_list = _render_associated_entries(all_calendars, associated_entry_ids, post["slug"])
+    nav_entries_html = _render_nav_entries_oob(associated_entries, calendars, post)
 
     return sx_response(admin_list + nav_entries_html)
 
@@ -686,7 +646,7 @@ def register():
 
     slug = post.get("slug", "")
     create_url = host_url(url_for("blog.post.admin.create_market", slug=slug))
-    html = await render_to_sx("blog-markets-panel-content",
+    html = sx_call("blog-markets-panel-content",
         markets=_serialize_markets(page_markets, slug), create_url=create_url)
     return sx_response(html)
 
@@ -715,7 +675,7 @@ def register():
 
     slug = post.get("slug", "")
     create_url = host_url(url_for("blog.post.admin.create_market", slug=slug))
-    html = await render_to_sx("blog-markets-panel-content",
+    html = sx_call("blog-markets-panel-content",
         markets=_serialize_markets(page_markets, slug), create_url=create_url)
     return sx_response(html)
 
@@ -738,7 +698,7 @@ def register():
 
     slug = post.get("slug", "")
     create_url = host_url(url_for("blog.post.admin.create_market", slug=slug))
-    html = await render_to_sx("blog-markets-panel-content",
+    html = sx_call("blog-markets-panel-content",
         markets=_serialize_markets(page_markets, slug), create_url=create_url)
     return sx_response(html)
 

blog/bp/post/routes.py

@@ -106,7 +106,7 @@ def register():
   async def post_detail(slug: str):
     from shared.sx.page import get_template_context
     from shared.sx.helpers import (
-        render_to_sx, root_header_sx, full_page_sx, oob_page_sx,
+        sx_call, root_header_sx, full_page_sx, oob_page_sx,
         post_header_sx, oob_header_sx, mobile_menu_sx,
         post_mobile_nav_sx, mobile_root_nav_sx,
     )
@@ -122,11 +122,11 @@ def register():
     rights = tctx.get("rights") or {}
     blog_url_base = host_url(url_for("blog.index")).rstrip("/index").rstrip("/")
     csrf = generate_csrf_token()
-    svc = services.get("blog_page")
+    svc = services.blog_page
     detail_data = svc.post_detail_data(post, user, rights, csrf, blog_url_base)
-    content = await render_to_sx("blog-post-detail-content", **detail_data)
+    content = sx_call("blog-post-detail-content", **detail_data)
     meta_data = svc.post_meta_data(post, tctx.get("base_title", ""))
-    meta = await render_to_sx("blog-meta", **meta_data)
+    meta = sx_call("blog-meta", **meta_data)
 
     if not is_htmx_request():
         root_hdr = await root_header_sx(tctx)
@@ -149,24 +149,20 @@ def register():
   @clear_cache(tag="post.post_detail", tag_scope="user")
   async def like_toggle(slug: str):
       from shared.utils import host_url
-      from shared.sx.helpers import render_to_sx
+      from shared.sx.helpers import sx_call
       from shared.browser.app.csrf import generate_csrf_token
 
       like_url = host_url(url_for('blog.post.like_toggle', slug=slug))
       csrf = generate_csrf_token()
 
-      async def _like_btn(liked):
-          if liked:
-              colour, icon, label = "text-red-600", "fa-solid fa-heart", "Unlike this post"
-          else:
-              colour, icon, label = "text-stone-300", "fa-regular fa-heart", "Like this post"
-          return await render_to_sx("market-like-toggle-button",
-              colour=colour, action=like_url,
-              hx_headers=f'{{"X-CSRFToken": "{csrf}"}}',
-              label=label, icon_cls=icon)
+      def _like_btn(liked):
+          return sx_call("blog-like-toggle",
+              like_url=like_url,
+              hx_headers={"X-CSRFToken": csrf},
+              heart="\u2764\ufe0f" if liked else "\U0001f90d")
 
       if not g.user:
-          return sx_response(await _like_btn(False), status=403)
+          return sx_response(_like_btn(False), status=403)
 
       post_id = g.post_data["post"]["id"]
       user_id = g.user.id
@@ -175,7 +171,7 @@ def register():
           "user_id": user_id, "target_type": "post", "target_id": post_id,
       })
 
-      return sx_response(await _like_btn(result["liked"]))
+      return sx_response(_like_btn(result["liked"]))
 
   @bp.get("/w/<widget_domain>/")
   async def widget_paginate(slug: str, widget_domain: str):

blog/bp/snippets/routes.py

@@ -3,7 +3,7 @@ from __future__ import annotations
 from quart import Blueprint, request, g, abort
 
 from shared.browser.app.authz import require_login
-from shared.sx.helpers import sx_response, render_to_sx
+from shared.sx.helpers import sx_response, sx_call
 from models import Snippet
 
 
@@ -13,8 +13,8 @@ VALID_VISIBILITY = frozenset({"private", "shared", "admin"})
 async def _render_snippets():
     """Render snippets list via service data + .sx defcomp."""
     from shared.services.registry import services
-    data = await services.get("blog_page").snippets_data(g.s)
-    return await render_to_sx("blog-snippets-content", **data)
+    data = await services.blog_page.snippets_data(g.s)
+    return sx_call("blog-snippets-content", **data)
 
 
 def register():

blog/queries.sx

@@ -10,7 +10,8 @@
 
 (defquery posts-by-ids (&key ids)
   "Fetch multiple blog posts by comma-separated IDs."
-  (service "blog" "get-posts-by-ids" :ids (split-ids ids)))
+  (service "blog" "get-posts-by-ids"
+    :ids (map parse-int (filter (fn (s) (not (empty? s))) (split (str ids) ",")))))
 
 (defquery search-posts (&key query page per-page)
   "Search blog posts by text query, paginated."
@@ -35,4 +36,5 @@
 (defquery page-configs-batch (&key container-type ids)
   "Return PageConfigs for multiple container IDs (comma-separated)."
   (service "page-config" "get-batch"
-    :container-type container-type :ids (split-ids ids)))
+    :container-type container-type
+    :ids (map parse-int (filter (fn (s) (not (empty? s))) (split (str ids) ",")))))

blog/scripts/migrate_sx_html.py

@@ -1,10 +1,10 @@
 #!/usr/bin/env python3
 """
-Re-convert sx_content from lexical JSON to eliminate ~kg-html wrappers and
+Re-convert sx_content from lexical JSON to eliminate ~kg_cards/kg-html wrappers and
 raw caption strings.
 
 The updated lexical_to_sx converter now produces native sx expressions instead
-of (1) wrapping HTML/markdown cards in (~kg-html :html "...") and (2) storing
+of (1) wrapping HTML/markdown cards in (~kg_cards/kg-html :html "...") and (2) storing
 captions as escaped HTML strings.  This script re-runs the conversion on all
 posts that already have sx_content, overwriting the old output.
 
@@ -50,11 +50,11 @@ async def migrate(dry_run: bool = False) -> int:
                     continue
 
                 if dry_run:
-                    old_has_kg = "~kg-html" in (post.sx_content or "")
+                    old_has_kg = "~kg_cards/kg-html" in (post.sx_content or "")
                     old_has_raw = "raw! caption" in (post.sx_content or "")
                     markers = []
                     if old_has_kg:
-                        markers.append("~kg-html")
+                        markers.append("~kg_cards/kg-html")
                     if old_has_raw:
                         markers.append("raw-caption")
                     tag = f" [{', '.join(markers)}]" if markers else ""
@@ -76,7 +76,7 @@ async def migrate(dry_run: bool = False) -> int:
 
 def main():
     parser = argparse.ArgumentParser(
-        description="Re-convert sx_content to eliminate ~kg-html and raw captions"
+        description="Re-convert sx_content to eliminate ~kg_cards/kg-html and raw captions"
     )
     parser.add_argument("--dry-run", action="store_true",
                         help="Preview changes without writing to database")

blog/services/blog_page.py

@@ -1,6 +1,13 @@
 """Blog page data service — provides serialized dicts for .sx defpages."""
 from __future__ import annotations
 
+from shared.sx.parser import SxExpr
+
+
+def _sx_content_expr(raw: str) -> SxExpr | None:
+    """Wrap non-empty sx_content as SxExpr so it serializes unquoted."""
+    return SxExpr(raw) if raw else None
+
 
 class BlogPageService:
     """Service for blog page data, callable via (service "blog-page" ...)."""
@@ -391,7 +398,7 @@ class BlogPageService:
         }
 
     def post_detail_data(self, post, user, rights, csrf, blog_url_base):
-        """Serialize post detail view data for ~blog-post-detail-content defcomp."""
+        """Serialize post detail view data for ~detail/post-detail-content defcomp."""
         slug = post.get("slug", "")
         is_admin = rights.get("admin") if isinstance(rights, dict) else getattr(rights, "admin", False)
         user_id = getattr(user, "id", None) if user else None
@@ -424,7 +431,7 @@ class BlogPageService:
             "authors": authors,
             "feature_image": post.get("feature_image"),
             "html_content": post.get("html", ""),
-            "sx_content": post.get("sx_content", ""),
+            "sx_content": _sx_content_expr(post.get("sx_content", "")),
         }
 
     async def preview_data(self, session, *, slug=None, **kw):

blog/sx/admin.sx

@@ -1,6 +1,6 @@
 ;; Blog admin panel components
 
-(defcomp ~blog-cache-panel (&key clear-url csrf)
+(defcomp ~admin/cache-panel (&key (clear-url :as string) (csrf :as string))
   (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"
@@ -8,21 +8,21 @@
         (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)
+(defcomp ~admin/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-snippet-visibility-select (&key patch-url hx-headers options cls)
+(defcomp ~admin/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)
+(defcomp ~admin/snippet-option (&key (value :as string) (selected :as boolean) (label :as string))
   (option :value value :selected selected label))
 
-(defcomp ~blog-snippet-row (&key name owner badge-cls visibility extra)
+(defcomp ~admin/snippet-row (&key (name :as string) (owner :as string) (badge-cls :as string) (visibility :as string) 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)
@@ -30,10 +30,10 @@
     (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)
+(defcomp ~admin/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)
+(defcomp ~admin/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"
@@ -42,7 +42,7 @@
     (div :id "menu-item-form" :class "mb-6")
     (div :id "menu-items-list" list)))
 
-(defcomp ~blog-menu-item-row (&key img label slug sort-order edit-url delete-url confirm-text hx-headers)
+(defcomp ~admin/menu-item-row (&key img (label :as string) (slug :as string) (sort-order :as string) (edit-url :as string) (delete-url :as string) (confirm-text :as string) 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
@@ -54,16 +54,16 @@
       (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")
-      (~delete-btn :url delete-url :trigger-target "#menu-items-list"
+      (~shared:misc/delete-btn :url delete-url :trigger-target "#menu-items-list"
         :title "Delete menu item?" :text confirm-text
         :sx-headers hx-headers))))
 
-(defcomp ~blog-menu-items-list (&key rows)
+(defcomp ~admin/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)
+(defcomp ~admin/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")
@@ -74,14 +74,14 @@
     (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)
+(defcomp ~admin/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)
+(defcomp ~admin/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)
+(defcomp ~admin/tag-group-li (&key icon (edit-href :as string) (name :as string) (slug :as string) (sort-order :as number))
   (li :class "border rounded p-3 bg-white flex items-center gap-3"
     icon
     (div :class "flex-1"
@@ -89,32 +89,32 @@
       (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)
+(defcomp ~admin/tag-groups-list (&key items)
   (ul :class "space-y-2" items))
 
-(defcomp ~blog-unassigned-tag (&key name)
+(defcomp ~admin/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)
+(defcomp ~admin/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)
+(defcomp ~admin/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)
+(defcomp ~admin/tag-checkbox (&key (tag-id :as string) (checked :as boolean) img (name :as string))
   (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)
+(defcomp ~admin/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)
+(defcomp ~admin/tag-group-edit-form (&key (save-url :as string) (csrf :as string) (name :as string) (colour :as string?) (sort-order :as number) (feature-image :as string?) 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"
@@ -133,19 +133,93 @@
     (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)
+(defcomp ~admin/tag-group-delete-form (&key (delete-url :as string) (csrf :as string))
   (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)
+(defcomp ~admin/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))
 
+;; Data-driven snippets list (replaces Python _snippets_sx loop)
+(defcomp ~admin/snippets-from-data (&key snippets user-id is-admin csrf badge-colours)
+  (~admin/snippets-list
+    :rows (<> (map (lambda (s)
+      (let* ((s-id (get s "id"))
+             (s-name (get s "name"))
+             (s-uid (get s "user_id"))
+             (s-vis (get s "visibility"))
+             (owner (if (= s-uid user-id) "You" (str "User #" s-uid)))
+             (badge-cls (or (get badge-colours s-vis) "bg-stone-200 text-stone-700"))
+             (extra (<>
+               (when is-admin
+                 (~admin/snippet-visibility-select
+                   :patch-url (get s "patch_url")
+                   :hx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")
+                   :options (<>
+                     (~admin/snippet-option :value "private" :selected (= s-vis "private") :label "private")
+                     (~admin/snippet-option :value "shared" :selected (= s-vis "shared") :label "shared")
+                     (~admin/snippet-option :value "admin" :selected (= s-vis "admin") :label "admin"))
+                   :cls "text-sm border border-stone-300 rounded px-2 py-1"))
+               (when (or (= s-uid user-id) is-admin)
+                 (~shared:misc/delete-btn :url (get s "delete_url") :trigger-target "#snippets-list"
+                   :title "Delete snippet?"
+                   :text (str "Delete \u201c" s-name "\u201d?")
+                   :sx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")
+                   :cls "px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0")))))
+        (~admin/snippet-row :name s-name :owner owner :badge-cls badge-cls
+          :visibility s-vis :extra extra)))
+      (or snippets (list))))))
+
+;; Data-driven menu items list (replaces Python _menu_items_list_sx loop)
+(defcomp ~admin/menu-items-from-data (&key items csrf)
+  (~admin/menu-items-list
+    :rows (<> (map (lambda (item)
+      (let* ((img (~shared:misc/img-or-placeholder :src (get item "feature_image") :alt (get item "label")
+               :size-cls "w-12 h-12 rounded-full object-cover flex-shrink-0")))
+        (~admin/menu-item-row
+          :img img :label (get item "label") :slug (get item "slug")
+          :sort-order (get item "sort_order") :edit-url (get item "edit_url")
+          :delete-url (get item "delete_url")
+          :confirm-text (str "Remove " (get item "label") " from the menu?")
+          :hx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}"))))
+      (or items (list))))))
+
+;; Data-driven tag groups main (replaces Python _tag_groups_main_panel_sx loops)
+(defcomp ~admin/tag-groups-from-data (&key groups unassigned-tags csrf create-url)
+  (~admin/tag-groups-main
+    :form (~admin/tag-groups-create-form :create-url create-url :csrf csrf)
+    :groups (if (empty? (or groups (list)))
+      (~shared:misc/empty-state :message "No tag groups yet." :cls "text-stone-500 text-sm")
+      (~admin/tag-groups-list
+        :items (<> (map (lambda (g)
+          (let* ((icon (if (get g "feature_image")
+                   (~admin/tag-group-icon-image :src (get g "feature_image") :name (get g "name"))
+                   (~admin/tag-group-icon-color :style (get g "style") :initial (get g "initial")))))
+            (~admin/tag-group-li :icon icon :edit-href (get g "edit_href")
+              :name (get g "name") :slug (get g "slug") :sort-order (get g "sort_order"))))
+          groups))))
+    :unassigned (when (not (empty? (or unassigned-tags (list))))
+      (~admin/unassigned-tags
+        :heading (str "Unassigned Tags (" (len unassigned-tags) ")")
+        :spans (<> (map (lambda (t)
+          (~admin/unassigned-tag :name (get t "name")))
+          unassigned-tags))))))
+
+;; Data-driven tag group edit (replaces Python _tag_groups_edit_main_panel_sx loop)
+(defcomp ~admin/tag-checkboxes-from-data (&key tags)
+  (<> (map (lambda (t)
+    (~admin/tag-checkbox
+      :tag-id (get t "tag_id") :checked (get t "checked")
+      :img (when (get t "feature_image") (~admin/tag-checkbox-image :src (get t "feature_image")))
+      :name (get t "name")))
+    (or tags (list)))))
+
 ;; Preview panel components
 
-(defcomp ~blog-preview-panel (&key sections)
+(defcomp ~admin/preview-panel (&key sections)
   (div :class "max-w-4xl mx-auto px-4 py-6 space-y-4"
     (style "
       .sx-pretty, .json-pretty { font-family: monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
@@ -165,22 +239,31 @@
     ")
     sections))
 
-(defcomp ~blog-preview-section (&key title content)
+(defcomp ~admin/preview-section (&key title content)
   (details :class "border rounded bg-white"
     (summary :class "cursor-pointer px-4 py-3 font-medium text-sm bg-stone-100 hover:bg-stone-200 select-none" title)
     (div :class "p-4 overflow-x-auto text-xs" content)))
 
+(defcomp ~admin/preview-rendered (&key html)
+  (div :class "blog-content prose max-w-none" (raw! html)))
+
+(defcomp ~admin/preview-empty ()
+  (div :class "p-8 text-stone-500" "No content to preview."))
+
+(defcomp ~admin/placeholder ()
+  (div :class "pb-8"))
+
 ;; ---------------------------------------------------------------------------
 ;; Data-driven content defcomps (called from defpages with service data)
 ;; ---------------------------------------------------------------------------
 
 ;; Snippets — receives serialized snippet dicts from service
-(defcomp ~blog-snippets-content (&key snippets is-admin csrf)
-  (~blog-snippets-panel
+(defcomp ~admin/snippets-content (&key snippets is-admin csrf)
+  (~admin/snippets-panel
     :list (if (empty? (or snippets (list)))
-      (~empty-state :icon "fa fa-puzzle-piece"
+      (~shared:misc/empty-state :icon "fa fa-puzzle-piece"
         :message "No snippets yet. Create one from the blog editor.")
-      (~blog-snippets-list
+      (~admin/snippets-list
         :rows (map (lambda (s)
           (let* ((badge-colours (dict
                    "private" "bg-stone-200 text-stone-700"
@@ -191,38 +274,38 @@
                  (name (get s "name"))
                  (owner (get s "owner"))
                  (can-delete (get s "can_delete")))
-            (~blog-snippet-row
+            (~admin/snippet-row
               :name name :owner owner :badge-cls badge-cls :visibility vis
               :extra (<>
                 (when is-admin
-                  (~blog-snippet-visibility-select
+                  (~admin/snippet-visibility-select
                     :patch-url (get s "patch_url")
-                    :hx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")
+                    :hx-headers {:X-CSRFToken csrf}
                     :options (<>
-                      (~blog-snippet-option :value "private" :selected (= vis "private") :label "private")
-                      (~blog-snippet-option :value "shared" :selected (= vis "shared") :label "shared")
-                      (~blog-snippet-option :value "admin" :selected (= vis "admin") :label "admin"))))
+                      (~admin/snippet-option :value "private" :selected (= vis "private") :label "private")
+                      (~admin/snippet-option :value "shared" :selected (= vis "shared") :label "shared")
+                      (~admin/snippet-option :value "admin" :selected (= vis "admin") :label "admin"))))
                 (when can-delete
-                  (~delete-btn
+                  (~shared:misc/delete-btn
                     :url (get s "delete_url")
                     :trigger-target "#snippets-list"
                     :title "Delete snippet?"
                     :text (str "Delete \u201c" name "\u201d?")
-                    :sx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")
+                    :sx-headers {:X-CSRFToken csrf}
                     :cls "px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0"))))))
           (or snippets (list)))))))
 
 ;; Menu Items — receives serialized menu item dicts from service
-(defcomp ~blog-menu-items-content (&key menu-items new-url csrf)
-  (~blog-menu-items-panel
+(defcomp ~admin/menu-items-content (&key menu-items new-url csrf)
+  (~admin/menu-items-panel
     :new-url new-url
     :list (if (empty? (or menu-items (list)))
-      (~empty-state :icon "fa fa-inbox"
+      (~shared:misc/empty-state :icon "fa fa-inbox"
         :message "No menu items yet. Add one to get started!")
-      (~blog-menu-items-list
+      (~admin/menu-items-list
         :rows (map (lambda (mi)
-          (~blog-menu-item-row
-            :img (~img-or-placeholder
+          (~admin/menu-item-row
+            :img (~shared:misc/img-or-placeholder
               :src (get mi "feature_image") :alt (get mi "label")
               :size-cls "w-12 h-12 rounded-full object-cover flex-shrink-0")
             :label (get mi "label")
@@ -231,27 +314,27 @@
             :edit-url (get mi "edit_url")
             :delete-url (get mi "delete_url")
             :confirm-text (str "Remove " (get mi "label") " from the menu?")
-            :hx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")))
+            :hx-headers {:X-CSRFToken csrf}))
           (or menu-items (list)))))))
 
 ;; Tag Groups — receives serialized tag group data from service
-(defcomp ~blog-tag-groups-content (&key groups unassigned-tags create-url csrf)
-  (~blog-tag-groups-main
-    :form (~blog-tag-groups-create-form :create-url create-url :csrf csrf)
+(defcomp ~admin/tag-groups-content (&key groups unassigned-tags create-url csrf)
+  (~admin/tag-groups-main
+    :form (~admin/tag-groups-create-form :create-url create-url :csrf csrf)
     :groups (if (empty? (or groups (list)))
-      (~empty-state :icon "fa fa-tags" :message "No tag groups yet.")
-      (~blog-tag-groups-list
+      (~shared:misc/empty-state :icon "fa fa-tags" :message "No tag groups yet.")
+      (~admin/tag-groups-list
         :items (map (lambda (g)
           (let* ((fi (get g "feature_image"))
                  (colour (get g "colour"))
                  (name (get g "name"))
                  (initial (slice (or name "?") 0 1))
                  (icon (if fi
-                   (~blog-tag-group-icon-image :src fi :name name)
-                   (~blog-tag-group-icon-color
+                   (~admin/tag-group-icon-image :src fi :name name)
+                   (~admin/tag-group-icon-color
                      :style (if colour (str "background:" colour) "background:#e7e5e4")
                      :initial initial))))
-            (~blog-tag-group-li
+            (~admin/tag-group-li
               :icon icon
               :edit-href (get g "edit_href")
               :name name
@@ -259,27 +342,252 @@
               :sort-order (or (get g "sort_order") 0))))
           (or groups (list)))))
     :unassigned (when (not (empty? (or unassigned-tags (list))))
-      (~blog-unassigned-tags
+      (~admin/unassigned-tags
         :heading (str (len (or unassigned-tags (list))) " Unassigned Tags")
         :spans (map (lambda (t)
-          (~blog-unassigned-tag :name (get t "name")))
+          (~admin/unassigned-tag :name (get t "name")))
           (or unassigned-tags (list)))))))
 
 ;; Tag Group Edit — receives serialized tag group + tags from service
-(defcomp ~blog-tag-group-edit-content (&key group all-tags save-url delete-url csrf)
-  (~blog-tag-group-edit-main
-    :edit-form (~blog-tag-group-edit-form
+(defcomp ~admin/tag-group-edit-content (&key group all-tags save-url delete-url csrf)
+  (~admin/tag-group-edit-main
+    :edit-form (~admin/tag-group-edit-form
       :save-url save-url :csrf csrf
       :name (get group "name")
       :colour (get group "colour")
       :sort-order (get group "sort_order")
       :feature-image (get group "feature_image")
       :tags (map (lambda (t)
-        (~blog-tag-checkbox
+        (~admin/tag-checkbox
           :tag-id (get t "id")
           :checked (get t "checked")
           :img (when (get t "feature_image")
-            (~blog-tag-checkbox-image :src (get t "feature_image")))
+            (~admin/tag-checkbox-image :src (get t "feature_image")))
           :name (get t "name")))
         (or all-tags (list))))
-    :delete-form (~blog-tag-group-delete-form :delete-url delete-url :csrf csrf)))
+    :delete-form (~admin/tag-group-delete-form :delete-url delete-url :csrf csrf)))
+
+;; ---------------------------------------------------------------------------
+;; Preview content composition — replaces _h_post_preview_content
+;; ---------------------------------------------------------------------------
+
+(defcomp ~admin/preview-content (&key sx-pretty json-pretty sx-rendered lex-rendered)
+  (let* ((sections (list)))
+    (if (and (not sx-pretty) (not json-pretty) (not sx-rendered) (not lex-rendered))
+      (~admin/preview-empty)
+      (~admin/preview-panel :sections
+        (<>
+          (when sx-pretty
+            (~admin/preview-section :title "S-Expression Source" :content sx-pretty))
+          (when json-pretty
+            (~admin/preview-section :title "Lexical JSON" :content json-pretty))
+          (when sx-rendered
+            (~admin/preview-section :title "SX Rendered"
+              :content (~admin/preview-rendered :html sx-rendered)))
+          (when lex-rendered
+            (~admin/preview-section :title "Lexical Rendered"
+              :content (~admin/preview-rendered :html lex-rendered))))))))
+
+;; ---------------------------------------------------------------------------
+;; Data introspection composition — replaces _h_post_data_content
+;; ---------------------------------------------------------------------------
+
+(defcomp ~admin/data-value-cell (&key value value-type)
+  (if (= value-type "nil")
+    (span :class "text-neutral-400" "\u2014")
+    (pre :class "whitespace-pre-wrap break-words break-all text-xs"
+      (if (or (= value-type "date") (= value-type "other"))
+        (code value)
+        value))))
+
+(defcomp ~admin/data-scalar-table (&key columns)
+  (div :class "w-full overflow-x-auto sm:overflow-visible"
+    (table :class "w-full table-fixed text-sm border border-neutral-200 rounded-xl overflow-hidden"
+      (thead :class "bg-neutral-50/70"
+        (tr (th :class "px-3 py-2 text-left font-medium w-40 sm:w-56" "Field")
+            (th :class "px-3 py-2 text-left font-medium" "Value")))
+      (tbody
+        (map (lambda (col)
+          (tr :class "border-t border-neutral-200 align-top"
+            (td :class "px-3 py-2 whitespace-nowrap text-neutral-600 align-top" (get col "key"))
+            (td :class "px-3 py-2 align-top"
+              (~admin/data-value-cell :value (get col "value") :value-type (get col "type")))))
+          (or columns (list)))))))
+
+(defcomp ~admin/data-relationship-item (&key index summary children)
+  (tr :class "border-t border-neutral-200 align-top"
+    (td :class "px-2 py-1 whitespace-nowrap align-top" (str index))
+    (td :class "px-2 py-1 align-top"
+      (pre :class "whitespace-pre-wrap break-words break-all text-xs"
+        (code summary))
+      (when children
+        (div :class "mt-2 pl-3 border-l border-neutral-200"
+          (~admin/data-model-content
+            :columns (get children "columns")
+            :relationships (get children "relationships")))))))
+
+(defcomp ~admin/data-relationship (&key name cardinality class-name loaded value)
+  (div :class "rounded-xl border border-neutral-200"
+    (div :class "px-3 py-2 bg-neutral-50/70 text-sm font-medium"
+      "Relationship: " (span :class "font-semibold" name)
+      (span :class "ml-2 text-xs text-neutral-500"
+        cardinality " \u2192 " class-name
+        (when (not loaded) " \u2022 " (em "not loaded"))))
+    (div :class "p-3 text-sm"
+      (if (not value)
+        (span :class "text-neutral-400" "\u2014")
+        (if (get value "is_list")
+          (<>
+            (div :class "text-neutral-500 mb-2"
+              (str (get value "count") " item" (if (= (get value "count") 1) "" "s")))
+            (when (get value "items")
+              (div :class "w-full overflow-x-auto sm:overflow-visible"
+                (table :class "w-full table-fixed text-sm border border-neutral-200 rounded-lg overflow-hidden"
+                  (thead :class "bg-neutral-50/70"
+                    (tr (th :class "px-2 py-1 text-left w-10" "#")
+                        (th :class "px-2 py-1 text-left" "Summary")))
+                  (tbody
+                    (map (lambda (item)
+                      (~admin/data-relationship-item
+                        :index (get item "index")
+                        :summary (get item "summary")
+                        :children (get item "children")))
+                      (get value "items")))))))
+          ;; Single value
+          (<>
+            (pre :class "whitespace-pre-wrap break-words break-all text-xs mb-2"
+              (code (get value "summary")))
+            (when (get value "children")
+              (div :class "pl-3 border-l border-neutral-200"
+                (~admin/data-model-content
+                  :columns (get (get value "children") "columns")
+                  :relationships (get (get value "children") "relationships"))))))))))
+
+(defcomp ~admin/data-model-content (&key columns relationships)
+  (div :class "space-y-4"
+    (~admin/data-scalar-table :columns columns)
+    (when (not (empty? (or relationships (list))))
+      (div :class "space-y-3"
+        (map (lambda (rel)
+          (~admin/data-relationship
+            :name (get rel "name")
+            :cardinality (get rel "cardinality")
+            :class-name (get rel "class_name")
+            :loaded (get rel "loaded")
+            :value (get rel "value")))
+          relationships)))))
+
+(defcomp ~admin/data-table-content (&key tablename model-data)
+  (if (not model-data)
+    (div :class "px-4 py-8 text-stone-400" "No post data available.")
+    (div :class "px-4 py-8"
+      (div :class "mb-6 text-sm text-neutral-500"
+        "Model: " (code "Post") " \u2022 Table: " (code tablename))
+      (~admin/data-model-content
+        :columns (get model-data "columns")
+        :relationships (get model-data "relationships")))))
+
+;; ---------------------------------------------------------------------------
+;; Calendar month view for browsing/toggling entries (B1)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~admin/cal-entry-associated (&key name toggle-url csrf)
+  (div :class "flex items-center gap-1 text-[10px] rounded px-1 py-0.5 bg-green-200 text-green-900"
+    (span :class "truncate flex-1" name)
+    (button :type "button" :class "flex-shrink-0 hover:text-red-600"
+      :data-confirm "" :data-confirm-title "Remove entry?"
+      :data-confirm-text (str "Remove " name " from this post?")
+      :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 (str "{\"X-CSRFToken\": \"" csrf "\"}")
+      :sx-on:afterSwap "document.body.dispatchEvent(new CustomEvent('entryToggled'))"
+      (i :class "fa fa-times"))))
+
+(defcomp ~admin/cal-entry-unassociated (&key name toggle-url csrf)
+  (button :type "button"
+    :class "w-full text-left text-[10px] rounded px-1 py-0.5 bg-stone-100 text-stone-700 hover:bg-stone-200"
+    :data-confirm "" :data-confirm-title "Add entry?"
+    :data-confirm-text (str "Add " name " to this post?")
+    :data-confirm-icon "question" :data-confirm-confirm-text "Yes, add 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 (str "{\"X-CSRFToken\": \"" csrf "\"}")
+    :sx-on:afterSwap "document.body.dispatchEvent(new CustomEvent('entryToggled'))"
+    (span :class "truncate block" name)))
+
+(defcomp ~admin/calendar-view (&key cal-id year month-name
+                               current-url prev-month-url prev-year-url
+                               next-month-url next-year-url
+                               weekday-names days csrf)
+  (let* ((target (str "#calendar-view-" cal-id)))
+    (div :id (str "calendar-view-" cal-id)
+      :sx-get current-url :sx-trigger "entryToggled from:body" :sx-swap "outerHTML"
+      (header :class "flex items-center justify-center mb-4"
+        (nav :class "flex items-center gap-2 text-xl"
+          (a :class "px-2 py-1 hover:bg-stone-100 rounded"
+            :sx-get prev-year-url :sx-target target :sx-swap "outerHTML"
+            (raw! "&laquo;"))
+          (a :class "px-2 py-1 hover:bg-stone-100 rounded"
+            :sx-get prev-month-url :sx-target target :sx-swap "outerHTML"
+            (raw! "&lsaquo;"))
+          (div :class "px-3 font-medium" (str month-name " " year))
+          (a :class "px-2 py-1 hover:bg-stone-100 rounded"
+            :sx-get next-month-url :sx-target target :sx-swap "outerHTML"
+            (raw! "&rsaquo;"))
+          (a :class "px-2 py-1 hover:bg-stone-100 rounded"
+            :sx-get next-year-url :sx-target target :sx-swap "outerHTML"
+            (raw! "&raquo;"))))
+      (div :class "rounded border bg-white"
+        (div :class "hidden sm:grid grid-cols-7 text-center text-xs font-semibold text-stone-700 bg-stone-50 border-b"
+          (map (lambda (wd) (div :class "py-2" wd)) (or weekday-names (list))))
+        (div :class "grid grid-cols-1 sm:grid-cols-7 gap-px bg-stone-200"
+          (map (lambda (day)
+            (let* ((extra-cls (if (get day "in_month") "" " bg-stone-50 text-stone-400"))
+                   (entries (or (get day "entries") (list))))
+              (div :class (str "min-h-20 bg-white px-2 py-2 text-xs" extra-cls)
+                (div :class "font-medium mb-1" (str (get day "day")))
+                (when (not (empty? entries))
+                  (div :class "space-y-0.5"
+                    (map (lambda (e)
+                      (if (get e "is_associated")
+                        (~admin/cal-entry-associated
+                          :name (get e "name") :toggle-url (get e "toggle_url") :csrf csrf)
+                        (~admin/cal-entry-unassociated
+                          :name (get e "name") :toggle-url (get e "toggle_url") :csrf csrf)))
+                      entries))))))
+            (or days (list))))))))
+
+;; ---------------------------------------------------------------------------
+;; Nav entries OOB — renders associated entry/calendar items in scroll wrapper (B2)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~admin/nav-entries-oob (&key entries calendars)
+  (let* ((entry-list (or entries (list)))
+         (cal-list (or calendars (list)))
+         (has-items (or (not (empty? entry-list)) (not (empty? cal-list))))
+         (nav-cls "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black [.hover-capable_&]:hover:bg-yellow-300 aria-selected:bg-stone-500 aria-selected:text-white [.hover-capable_&[aria-selected=true]:hover]:bg-orange-500 p-2")
+         (scroll-hs "on load or scroll if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth remove .hidden from .entries-nav-arrow add .flex to .entries-nav-arrow else add .hidden to .entries-nav-arrow remove .flex from .entries-nav-arrow end"))
+    (if (not has-items)
+      (~shared:nav/blog-nav-entries-empty)
+      (~shared:misc/scroll-nav-wrapper
+        :wrapper-id "entries-calendars-nav-wrapper"
+        :container-id "associated-items-container"
+        :arrow-cls "entries-nav-arrow"
+        :left-hs "on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200"
+        :scroll-hs scroll-hs
+        :right-hs "on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200"
+        :items (<>
+          (map (lambda (e)
+            (~shared:navigation/calendar-entry-nav
+              :href (get e "href") :nav-class nav-cls
+              :name (get e "name") :date-str (get e "date_str")))
+            entry-list)
+          (map (lambda (c)
+            (~shared:nav/blog-nav-calendar-item
+              :href (get c "href") :nav-cls nav-cls
+              :name (get c "name")))
+            cal-list))
+        :oob true))))

blog/sx/boundary.sx

@@ -0,0 +1,41 @@
+;; Blog service — page helper declarations.
+
+(define-page-helper "editor-data"
+  :params (&key)
+  :returns "dict"
+  :service "blog")
+
+(define-page-helper "editor-page-data"
+  :params (&key)
+  :returns "dict"
+  :service "blog")
+
+(define-page-helper "post-admin-data"
+  :params (&key slug)
+  :returns "dict"
+  :service "blog")
+
+(define-page-helper "post-data-data"
+  :params (&key slug)
+  :returns "dict"
+  :service "blog")
+
+(define-page-helper "post-preview-data"
+  :params (&key slug)
+  :returns "dict"
+  :service "blog")
+
+(define-page-helper "post-entries-data"
+  :params (&key slug)
+  :returns "dict"
+  :service "blog")
+
+(define-page-helper "post-settings-data"
+  :params (&key slug)
+  :returns "dict"
+  :service "blog")
+
+(define-page-helper "post-edit-data"
+  :params (&key slug)
+  :returns "dict"
+  :service "blog")

blog/sx/cards.sx

@@ -1,62 +1,61 @@
 ;; Blog card components — pure data, no HTML injection
 
-(defcomp ~blog-like-button (&key like-url hx-headers heart)
+(defcomp ~cards/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)))
+    (~detail/like-toggle :like-url like-url :hx-headers hx-headers :heart heart)))
 
-(defcomp ~blog-draft-status (&key publish-requested timestamp)
+(defcomp ~cards/draft-status (&key (publish-requested :as boolean) (timestamp :as string?))
   (<> (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)
+(defcomp ~cards/published-status (&key (timestamp :as string))
   (p :class "text-sm text-stone-500" (str "Published: " timestamp)))
 
 ;; Tag components — accept data, not HTML
-(defcomp ~blog-tag-icon (&key src name initial)
+(defcomp ~cards/tag-icon (&key (src :as string?) (name :as string) (initial :as string))
   (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)
+(defcomp ~cards/tag-item (&key src name initial)
   (li (a :class "flex items-center gap-1"
-    (~blog-tag-icon :src src :name name :initial initial)
+    (~cards/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)
+(defcomp ~cards/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))))
+            (map (lambda (t) (~cards/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)))))))
+            (map (lambda (a) (~cards/author-item :image (get a "image") :name (get a "name"))) authors)))))))
 
 ;; Author components
-(defcomp ~blog-author-item (&key image name)
+(defcomp ~cards/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)
+(defcomp ~cards/index (&key (slug :as string) (href :as string) (hx-select :as string?) (title :as string)
+                          (feature-image :as string?) (excerpt :as string?)
+                          status (is-draft :as boolean) (publish-requested :as boolean) (status-timestamp :as string?)
+                          (liked :as boolean) (like-url :as string?) (csrf-token :as string?)
+                          (has-like :as boolean)
+                          (tags :as list?) (authors :as list?) widget)
   (article :class "border-b pb-6 last:border-b-0 relative"
     (when has-like
-      (~blog-like-button
+      (~cards/like-button
         :like-url like-url
-        :sx-headers (str "{\"X-CSRFToken\": \"" csrf-token "\"}")
+        :hx-headers {: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"
@@ -64,8 +63,8 @@
       (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))))
+          (~cards/draft-status :publish-requested publish-requested :timestamp status-timestamp)
+          (when status-timestamp (~cards/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
@@ -74,16 +73,16 @@
         (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))))
+              (map (lambda (t) (~cards/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))))))))
+              (map (lambda (a) (~cards/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)
+(defcomp ~cards/tile (&key (href :as string) (hx-select :as string?) (feature-image :as string?) (title :as string)
+                                (is-draft :as boolean) (publish-requested :as boolean) (status-timestamp :as string?)
+                                (excerpt :as string?) (tags :as list?) (authors :as list?))
   (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"
@@ -92,36 +91,73 @@
       (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)))
+          (~cards/draft-status :publish-requested publish-requested :timestamp status-timestamp)
+          (when status-timestamp (~cards/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))))
+              (map (lambda (t) (~cards/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))))))))
+              (map (lambda (a) (~cards/author-item :image (get a "image") :name (get a "name"))) authors))))))))
 
-(defcomp ~blog-page-badges (&key has-calendar has-market)
+;; Data-driven blog cards list (replaces Python _blog_cards_sx loop)
+(defcomp ~cards/from-data (&key (posts :as list?) (view :as string?) sentinel)
+  (<>
+    (map (lambda (p)
+      (if (= view "tile")
+        (~cards/tile
+          :href (get p "href") :hx-select (get p "hx_select")
+          :feature-image (get p "feature_image") :title (get p "title")
+          :is-draft (get p "is_draft") :publish-requested (get p "publish_requested")
+          :status-timestamp (get p "status_timestamp")
+          :excerpt (get p "excerpt") :tags (get p "tags") :authors (get p "authors"))
+        (~cards/index
+          :slug (get p "slug") :href (get p "href") :hx-select (get p "hx_select")
+          :title (get p "title") :feature-image (get p "feature_image")
+          :excerpt (get p "excerpt") :is-draft (get p "is_draft")
+          :publish-requested (get p "publish_requested")
+          :status-timestamp (get p "status_timestamp")
+          :has-like (get p "has_like") :liked (get p "liked")
+          :like-url (get p "like_url") :csrf-token (get p "csrf_token")
+          :tags (get p "tags") :authors (get p "authors")
+          :widget (when (get p "widget") (~rich-text :html (get p "widget"))))))
+      (or posts (list)))
+    sentinel))
+
+;; Data-driven page cards list (replaces Python _page_cards_sx loop)
+(defcomp ~cards/page-cards-from-data (&key (pages :as list?) sentinel)
+  (<>
+    (map (lambda (pg)
+      (~cards/page-card
+        :href (get pg "href") :hx-select (get pg "hx_select")
+        :title (get pg "title")
+        :has-calendar (get pg "has_calendar") :has-market (get pg "has_market")
+        :pub-timestamp (get pg "pub_timestamp")
+        :feature-image (get pg "feature_image") :excerpt (get pg "excerpt")))
+      (or pages (list)))
+    sentinel))
+
+(defcomp ~cards/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)
+(defcomp ~cards/page-card (&key (href :as string) (hx-select :as string?) (title :as string) (has-calendar :as boolean) (has-market :as boolean) (pub-timestamp :as string?) (feature-image :as string?) (excerpt :as string?))
   (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)))
+        (~cards/page-badges :has-calendar has-calendar :has-market has-market)
+        (when pub-timestamp (~cards/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

@@ -1,31 +1,34 @@
 ;; Blog post detail components
 
-(defcomp ~blog-detail-edit-link (&key href hx-select)
+(defcomp ~detail/edit-link (&key (href :as string) (hx-select :as string))
   (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)
+(defcomp ~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 ~detail/like-toggle (&key like-url hx-headers heart)
+  (button :sx-post like-url :sx-swap "outerHTML"
+    :sx-headers hx-headers :class "cursor-pointer" heart))
 
-(defcomp ~blog-detail-excerpt (&key excerpt)
+(defcomp ~detail/like (&key like-url hx-headers heart)
+  (div :class "absolute top-2 right-2 z-10 text-8xl md:text-6xl"
+    (~detail/like-toggle :like-url like-url :hx-headers hx-headers :heart heart)))
+
+(defcomp ~detail/excerpt (&key (excerpt :as string))
   (div :class "w-full text-center italic text-3xl p-2" excerpt))
 
-(defcomp ~blog-detail-chrome (&key like excerpt at-bar)
+(defcomp ~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 sx-content)
+(defcomp ~detail/main (&key draft chrome feature-image html-content sx-content)
   (<> (article :class "relative"
     draft
     chrome
@@ -40,34 +43,34 @@
 ;; Data-driven composition — replaces _post_main_panel_sx
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~blog-post-detail-content (&key slug is-draft publish-requested can-edit edit-href
-                                         is-page has-user liked like-url csrf
-                                         custom-excerpt tags authors
-                                         feature-image html-content sx-content)
+(defcomp ~detail/post-detail-content (&key (slug :as string) (is-draft :as boolean) (publish-requested :as boolean) (can-edit :as boolean) (edit-href :as string?)
+                                         (is-page :as boolean) (has-user :as boolean) (liked :as boolean) (like-url :as string?) (csrf :as string?)
+                                         (custom-excerpt :as string?) (tags :as list?) (authors :as list?)
+                                         (feature-image :as string?) (html-content :as string?) (sx-content :as string?))
   (let* ((hx-select "#main-panel")
          (draft-sx (when is-draft
-           (~blog-detail-draft
+           (~detail/draft
              :publish-requested publish-requested
              :edit (when can-edit
-               (~blog-detail-edit-link :href edit-href :hx-select hx-select)))))
+               (~detail/edit-link :href edit-href :hx-select hx-select)))))
          (chrome-sx (when (not is-page)
-           (~blog-detail-chrome
+           (~detail/chrome
              :like (when has-user
-               (~blog-detail-like
+               (~detail/like
                  :like-url like-url
-                 :hx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")
-                 :heart (if liked "\u2764\ufe0f" "\U0001f90d")))
+                 :hx-headers {:X-CSRFToken csrf}
+                 :heart (if liked "❤️" "🤍")))
              :excerpt (when (not (= custom-excerpt ""))
-               (~blog-detail-excerpt :excerpt custom-excerpt))
-             :at-bar (~blog-at-bar :tags tags :authors authors)))))
-    (~blog-detail-main
+               (~detail/excerpt :excerpt custom-excerpt))
+             :at-bar (~cards/at-bar :tags tags :authors authors)))))
+    (~detail/main
       :draft draft-sx
       :chrome chrome-sx
       :feature-image feature-image
       :html-content html-content
       :sx-content sx-content)))
 
-(defcomp ~blog-meta (&key robots page-title desc canonical og-type og-title image twitter-card twitter-title)
+(defcomp ~detail/meta (&key (robots :as string) (page-title :as string) (desc :as string) (canonical :as string?) (og-type :as string) (og-title :as string) (image :as string?) (twitter-card :as string) (twitter-title :as string))
   (<>
     (meta :name "robots" :content robots)
     (title page-title)
@@ -83,7 +86,7 @@
     (meta :name "twitter:description" :content desc)
     (when image (meta :name "twitter:image" :content image))))
 
-(defcomp ~blog-home-main (&key html-content sx-content)
+(defcomp ~detail/home-main (&key html-content sx-content)
   (article :class "relative"
     (if sx-content
       (div :class "blog-content p-2" sx-content)

blog/sx/editor.sx

@@ -1,10 +1,10 @@
 ;; Blog editor components
 
-(defcomp ~blog-editor-error (&key error)
+(defcomp ~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)
+(defcomp ~editor/form (&key (csrf :as string) (title-placeholder :as string) (create-label :as string))
   (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 "")
@@ -56,11 +56,11 @@
         :class "px-[20px] py-[6px] bg-stone-700 text-white text-[14px] rounded-[8px] hover:bg-stone-800 transition-colors cursor-pointer" create-label))))
 
 ;; Edit form — pre-populated version for /<slug>/admin/edit/
-(defcomp ~blog-editor-edit-form (&key csrf updated-at title-val excerpt-val
-                                      feature-image feature-image-caption
-                                      sx-content-val lexical-json
-                                      has-sx title-placeholder
-                                      status already-emailed
+(defcomp ~editor/edit-form (&key (csrf :as string) (updated-at :as string) (title-val :as string?) (excerpt-val :as string?)
+                                      (feature-image :as string?) (feature-image-caption :as string?)
+                                      (sx-content-val :as string?) (lexical-json :as string?)
+                                      (has-sx :as boolean) (title-placeholder :as string)
+                                      (status :as string) (already-emailed :as boolean)
                                       newsletter-options footer-extra)
   (let* ((sel-cls "text-[14px] rounded-[4px] border border-stone-200 px-[8px] py-[6px] bg-white text-stone-600")
          (active "px-[12px] py-[6px] text-[13px] font-medium text-stone-700 border-b-2 border-stone-700 cursor-pointer bg-transparent")
@@ -135,7 +135,7 @@
         (when footer-extra footer-extra)))))
 
 ;; Publish-mode show/hide script for edit form
-(defcomp ~blog-editor-publish-js (&key already-emailed)
+(defcomp ~editor/publish-js (&key already-emailed)
   (script
     "(function() {"
     "  var statusSel = document.getElementById('status-select');"
@@ -153,20 +153,20 @@
     "  sync();"
     "})();"))
 
-(defcomp ~blog-editor-styles (&key css-href)
+(defcomp ~editor/styles (&key (css-href :as string))
   (<> (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 sx-editor-js-src init-js)
+(defcomp ~editor/scripts (&key (js-src :as string) (sx-editor-js-src :as string?) (init-js :as string))
   (<> (script :src js-src)
       (when sx-editor-js-src (script :src sx-editor-js-src))
       (script init-js)))
 
 ;; SX editor styles — comprehensive CSS for the Koenig-style block editor
-(defcomp ~sx-editor-styles ()
+(defcomp ~editor/sx-editor-styles ()
   (style
     ;; Editor container
     ".sx-editor { position: relative; font-size: 18px; line-height: 1.6; font-family: Georgia, 'Times New Roman', serif; color: #1c1917; }"
@@ -303,3 +303,48 @@
 
     ;; Drag over editor
     ".sx-drag-over { outline: 2px dashed #3b82f6; outline-offset: -2px; border-radius: 4px; }"))
+
+;; ---------------------------------------------------------------------------
+;; Editor panel composition — replaces render_editor_panel (new post/page)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~editor/content (&key csrf title-placeholder create-label
+                                     css-href js-src sx-editor-js-src init-js
+                                     save-error)
+  (~layouts/editor-panel :parts
+    (<>
+      (when save-error (~editor/error :error save-error))
+      (~editor/form :csrf csrf :title-placeholder title-placeholder
+        :create-label create-label)
+      (~editor/styles :css-href css-href)
+      (~editor/sx-editor-styles)
+      (~editor/scripts :js-src js-src :sx-editor-js-src sx-editor-js-src
+        :init-js init-js))))
+
+;; ---------------------------------------------------------------------------
+;; Edit content composition — replaces _h_post_edit_content (existing post)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~editor/edit-content (&key csrf updated-at title-val excerpt-val
+                                   feature-image feature-image-caption
+                                   sx-content-val lexical-json has-sx
+                                   title-placeholder status already-emailed
+                                   newsletter-options footer-extra
+                                   css-href js-src sx-editor-js-src init-js
+                                   save-error)
+  (~layouts/editor-panel :parts
+    (<>
+      (when save-error (~editor/error :error save-error))
+      (~editor/edit-form
+        :csrf csrf :updated-at updated-at
+        :title-val title-val :excerpt-val excerpt-val
+        :feature-image feature-image :feature-image-caption feature-image-caption
+        :sx-content-val sx-content-val :lexical-json lexical-json
+        :has-sx has-sx :title-placeholder title-placeholder
+        :status status :already-emailed already-emailed
+        :newsletter-options newsletter-options :footer-extra footer-extra)
+      (~editor/publish-js :already-emailed already-emailed)
+      (~editor/styles :css-href css-href)
+      (~editor/sx-editor-styles)
+      (~editor/scripts :js-src js-src :sx-editor-js-src sx-editor-js-src
+        :init-js init-js))))

blog/sx/filters.sx

@@ -1,37 +1,37 @@
 ;; Blog filter components
 
-(defcomp ~blog-action-button (&key href hx-select btn-class title icon-class label)
+(defcomp ~filters/action-button (&key (href :as string) (hx-select :as string) (btn-class :as string) (title :as string) (icon-class :as string) (label :as string))
   (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)
+(defcomp ~filters/drafts-button (&key (href :as string) (hx-select :as string) (btn-class :as string) (title :as string) (label :as string) (draft-count :as number))
   (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)
+(defcomp ~filters/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)
+(defcomp ~filters/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)
+(defcomp ~filters/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)
+(defcomp ~filters/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)
+(defcomp ~filters/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)
+(defcomp ~filters/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"
@@ -40,19 +40,19 @@
     (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)
+(defcomp ~filters/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)
+(defcomp ~filters/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)
+(defcomp ~filters/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)
+(defcomp ~filters/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"
@@ -61,5 +61,41 @@
     (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)
+(defcomp ~filters/summary (&key (text :as string))
   (span :class "text-sm text-stone-600" text))
+
+;; Data-driven tag groups filter (replaces Python _tag_groups_filter_sx loop)
+(defcomp ~filters/tag-groups-filter-from-data (&key groups selected-groups hx-select)
+  (let* ((is-any (empty? (or selected-groups (list))))
+         (any-cls (if is-any "bg-stone-900 text-white border-stone-900" "bg-white text-stone-600 border-stone-300 hover:bg-stone-50")))
+    (~filters/nav
+      :items (<>
+        (~filters/any-topic :cls any-cls :hx-select hx-select)
+        (map (lambda (g)
+          (let* ((slug (get g "slug"))
+                 (name (get g "name"))
+                 (is-on (contains? selected-groups slug))
+                 (cls (if is-on "bg-stone-900 text-white border-stone-900" "bg-white text-stone-600 border-stone-300 hover:bg-stone-50"))
+                 (icon (if (get g "feature_image")
+                   (~filters/group-icon-image :src (get g "feature_image") :name name)
+                   (~filters/group-icon-color :style (get g "style") :initial (get g "initial")))))
+            (~filters/group-li :cls cls :hx-get (str "?group=" slug "&page=1") :hx-select hx-select
+              :icon icon :name name :count (get g "count"))))
+          (or groups (list)))))))
+
+;; Data-driven authors filter (replaces Python _authors_filter_sx loop)
+(defcomp ~filters/authors-filter-from-data (&key authors selected-authors hx-select)
+  (let* ((is-any (empty? (or selected-authors (list))))
+         (any-cls (if is-any "bg-stone-900 text-white border-stone-900" "bg-white text-stone-600 border-stone-300 hover:bg-stone-50")))
+    (~filters/nav
+      :items (<>
+        (~filters/any-author :cls any-cls :hx-select hx-select)
+        (map (lambda (a)
+          (let* ((slug (get a "slug"))
+                 (is-on (contains? selected-authors slug))
+                 (cls (if is-on "bg-stone-900 text-white border-stone-900" "bg-white text-stone-600 border-stone-300 hover:bg-stone-50"))
+                 (icon (when (get a "profile_image")
+                   (~filters/author-icon :src (get a "profile_image") :name (get a "name")))))
+            (~filters/author-li :cls cls :hx-get (str "?author=" slug "&page=1") :hx-select hx-select
+              :icon icon :name (get a "name") :count (get a "count"))))
+          (or authors (list)))))))

blog/sx/handlers/link-card.sx

@@ -1,4 +1,5 @@
 ;; Blog link-card fragment handler
+;; returns: sx
 ;;
 ;; Renders link-card(s) for blog posts by slug.
 ;; Supports single mode (?slug=x) and batch mode (?keys=x,y,z).
@@ -10,7 +11,7 @@
         (let ((post (query "blog" "post-by-slug" :slug (trim s))))
           (when post
             (<> (str "<!-- fragment:" (trim s) " -->")
-                (~link-card
+                (~shared:fragments/link-card
                   :link (app-url "blog" (str "/" (get post "slug") "/"))
                   :title (get post "title")
                   :image (get post "feature_image")
@@ -21,7 +22,7 @@
     (when slug
       (let ((post (query "blog" "post-by-slug" :slug slug)))
         (when post
-          (~link-card
+          (~shared:fragments/link-card
             :link (app-url "blog" (str "/" (get post "slug") "/"))
             :title (get post "title")
             :image (get post "feature_image")

blog/sx/handlers/nav-tree.sx

@@ -1,4 +1,5 @@
 ;; Blog nav-tree fragment handler
+;; returns: sx
 ;;
 ;; Renders the full scrollable navigation menu bar with app icons.
 ;; Uses nav-tree I/O primitive to fetch menu nodes from the blog DB.
@@ -29,25 +30,25 @@
                                 (app-url "blog" (str "/" item-slug "/"))))
                       (selected (or (= item-slug (or first-seg ""))
                                     (= item-slug app))))
-                  (~blog-nav-item-link
+                  (~shared:nav/blog-nav-item-link
                     :href href
                     :hx-get href
                     :selected (if selected "true" "false")
                     :nav-cls nav-cls
-                    :img (~img-or-placeholder
+                    :img (~shared:misc/img-or-placeholder
                            :src (get item "feature_image")
                            :alt (or (get item "label") item-slug)
                            :size-cls "w-8 h-8 rounded-full object-cover flex-shrink-0")
                     :label (or (get item "label") item-slug)))) items)
 
               ;; Hardcoded artdag link
-              (~blog-nav-item-link
+              (~shared:nav/blog-nav-item-link
                 :href (app-url "artdag" "/")
                 :hx-get (app-url "artdag" "/")
                 :selected (if (or (= "artdag" (or first-seg ""))
                                   (= "artdag" app)) "true" "false")
                 :nav-cls nav-cls
-                :img (~img-or-placeholder
+                :img (~shared:misc/img-or-placeholder
                        :src nil :alt "art-dag"
                        :size-cls "w-8 h-8 rounded-full object-cover flex-shrink-0")
                 :label "art-dag")))
@@ -68,8 +69,8 @@
           (right-hs     (str "on click set #" cid ".scrollLeft to #" cid ".scrollLeft + 200")))
 
       (if (empty? items)
-        (~blog-nav-empty :wrapper-id "menu-items-nav-wrapper")
-        (~scroll-nav-wrapper
+        (~shared:nav/blog-nav-empty :wrapper-id "menu-items-nav-wrapper")
+        (~shared:misc/scroll-nav-wrapper
           :wrapper-id "menu-items-nav-wrapper"
           :container-id cid
           :arrow-cls arrow-cls

blog/sx/header.sx

@@ -1,21 +1,21 @@
 ;; Blog header components
 
-(defcomp ~blog-container-nav (&key container-nav)
+(defcomp ~header/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 ()
+(defcomp ~header/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)
+(defcomp ~header/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)
+(defcomp ~header/sub-settings-label (&key icon label)
   (<> (i :class icon :aria-hidden "true") " " label))
 
-(defcomp ~blog-sub-admin-label (&key icon label)
+(defcomp ~header/sub-admin-label (&key icon label)
   (<> (i :class icon :aria-hidden "true") (div label)))

blog/sx/index.sx

@@ -1,9 +1,9 @@
 ;; Blog index components
 
-(defcomp ~blog-no-pages ()
+(defcomp ~index/no-pages ()
   (div :class "col-span-full mt-8 text-center text-stone-500" "No pages found."))
 
-(defcomp ~blog-content-type-tabs (&key posts-href pages-href hx-select posts-cls pages-cls)
+(defcomp ~index/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"
@@ -12,18 +12,18 @@
       :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)
+(defcomp ~index/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)
+(defcomp ~index/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)
+(defcomp ~index/aside (&key search action-buttons tag-groups-filter authors-filter)
   (<> search
       action-buttons
     (div :id "category-summary-desktop" :hxx-swap-oob "outerHTML"
@@ -36,12 +36,12 @@
 ;; ---------------------------------------------------------------------------
 
 ;; Helper: CSS class for filter item based on selection state
-(defcomp ~blog-filter-cls (&key is-on)
+(defcomp ~index/filter-cls (&key is-on)
   ;; Returns nothing — use inline (if is-on ...) instead
   nil)
 
 ;; Blog index main content — replaces _blog_main_panel_sx
-(defcomp ~blog-index-main-content (&key content-type view cards page total-pages
+(defcomp ~index/main-content (&key content-type view cards page total-pages
                                         current-local-href hx-select blog-url-base)
   (let* ((posts-href (str blog-url-base "/index"))
          (pages-href (str posts-href "?type=pages"))
@@ -51,13 +51,13 @@
            "bg-stone-700 text-white" "bg-stone-100 text-stone-600 hover:bg-stone-200")))
     (if (= content-type "pages")
       ;; Pages listing
-      (~blog-main-panel-pages
-        :tabs (~blog-content-type-tabs
+      (~index/main-panel-pages
+        :tabs (~index/content-type-tabs
           :posts-href posts-href :pages-href pages-href
           :hx-select hx-select :posts-cls posts-cls :pages-cls pages-cls)
         :cards (<>
           (map (lambda (card)
-            (~blog-page-card
+            (~cards/page-card
               :href (get card "href") :hx-select hx-select
               :title (get card "title")
               :has-calendar (get card "has_calendar")
@@ -67,14 +67,14 @@
               :excerpt (get card "excerpt")))
             (or cards (list)))
           (if (< page total-pages)
-            (~sentinel-simple
+            (~shared:misc/sentinel-simple
               :id (str "sentinel-" page "-d")
               :next-url (str current-local-href
                 (if (contains? current-local-href "?") "&" "?")
                 "page=" (+ page 1)))
             (if (not (empty? (or cards (list))))
-              (~end-of-results)
-              (~blog-no-pages)))))
+              (~shared:misc/end-of-results)
+              (~index/no-pages)))))
       ;; Posts listing
       (let* ((grid-cls (if (= view "tile")
                "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
@@ -88,19 +88,19 @@
              (tile-cls (if (= view "tile")
                "bg-stone-200 text-stone-800"
                "text-stone-400 hover:text-stone-600")))
-        (~blog-main-panel-posts
-          :tabs (~blog-content-type-tabs
+        (~index/main-panel-posts
+          :tabs (~index/content-type-tabs
             :posts-href posts-href :pages-href pages-href
             :hx-select hx-select :posts-cls posts-cls :pages-cls pages-cls)
-          :toggle (~view-toggle
+          :toggle (~shared:misc/view-toggle
             :list-href list-href :tile-href tile-href :hx-select hx-select
             :list-cls list-cls :tile-cls tile-cls :storage-key "blog_view"
-            :list-svg (~list-svg) :tile-svg (~tile-svg))
+            :list-svg (~shared:misc/list-svg) :tile-svg (~shared:misc/tile-svg))
           :grid-cls grid-cls
           :cards (<>
             (map (lambda (card)
               (if (= view "tile")
-                (~blog-card-tile
+                (~cards/tile
                   :href (get card "href") :hx-select hx-select
                   :feature-image (get card "feature_image")
                   :title (get card "title") :is-draft (get card "is_draft")
@@ -108,7 +108,7 @@
                   :status-timestamp (get card "status_timestamp")
                   :excerpt (get card "excerpt")
                   :tags (get card "tags") :authors (get card "authors"))
-                (~blog-card
+                (~cards/index
                   :slug (get card "slug") :href (get card "href") :hx-select hx-select
                   :title (get card "title") :feature-image (get card "feature_image")
                   :excerpt (get card "excerpt") :is-draft (get card "is_draft")
@@ -119,52 +119,52 @@
                   :tags (get card "tags") :authors (get card "authors")
                   :widget (get card "widget"))))
               (or cards (list)))
-            (~blog-index-sentinel
+            (~index/sentinel
               :page page :total-pages total-pages
               :current-local-href current-local-href)))))))
 
 ;; Sentinel for blog index infinite scroll
-(defcomp ~blog-index-sentinel (&key page total-pages current-local-href)
+(defcomp ~index/sentinel (&key page total-pages current-local-href)
   (when (< page total-pages)
     (let* ((next-url (str current-local-href "?page=" (+ page 1))))
-      (~sentinel-desktop
+      (~shared:misc/sentinel-desktop
         :id (str "sentinel-" page "-d")
         :next-url next-url
         :hyperscript "init if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end on htmx:beforeRequest(event) add .hidden to .js-neterr in me remove .hidden from .js-loading in me remove .opacity-100 from me add .opacity-0 to me set trig to null if event.detail and event.detail.triggeringEvent then set trig to event.detail.triggeringEvent end if trig and trig.type is 'intersect' set scroller to the closest .js-grid-viewport if scroller is null then halt end if scroller.scrollTop < 20 then halt end end def backoff() set ms to me.dataset.retryMs if ms > 30000 then set ms to 30000 end add .hidden to .js-loading in me remove .hidden from .js-neterr in me remove .opacity-0 from me add .opacity-100 to me wait ms ms trigger sentinel:retry set ms to ms * 2 if ms > 30000 then set ms to 30000 end set me.dataset.retryMs to ms end on htmx:sendError call backoff() on htmx:responseError call backoff() on htmx:timeout call backoff()"))))
 
 ;; Blog index action buttons — replaces _action_buttons_sx
-(defcomp ~blog-index-actions (&key is-admin has-user hx-select draft-count drafts
+(defcomp ~index/actions (&key is-admin has-user hx-select draft-count drafts
                                    new-post-href new-page-href current-local-href)
-  (~blog-action-buttons-wrapper
+  (~filters/action-buttons-wrapper
     :inner (<>
       (when is-admin
         (<>
-          (~blog-action-button
+          (~filters/action-button
             :href new-post-href :hx-select hx-select
             :btn-class "px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"
             :title "New Post" :icon-class "fa fa-plus mr-1" :label " New Post")
-          (~blog-action-button
+          (~filters/action-button
             :href new-page-href :hx-select hx-select
             :btn-class "px-3 py-1 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 transition-colors"
             :title "New Page" :icon-class "fa fa-plus mr-1" :label " New Page")))
       (when (and has-user (or draft-count drafts))
         (if drafts
-          (~blog-drafts-button
+          (~filters/drafts-button
             :href current-local-href :hx-select hx-select
             :btn-class "px-3 py-1 rounded bg-stone-700 text-white text-sm hover:bg-stone-800 transition-colors"
             :title "Hide Drafts" :label " Drafts " :draft-count (str draft-count))
           (let* ((on-href (str current-local-href
                    (if (contains? current-local-href "?") "&" "?") "drafts=1")))
-            (~blog-drafts-button-amber
+            (~filters/drafts-button-amber
               :href on-href :hx-select hx-select
               :btn-class "px-3 py-1 rounded bg-amber-600 text-white text-sm hover:bg-amber-700 transition-colors"
               :title "Show Drafts" :label " Drafts " :draft-count (str draft-count))))))))
 
 ;; Tag groups filter — replaces _tag_groups_filter_sx
-(defcomp ~blog-index-tag-groups-filter (&key tag-groups is-any-group hx-select)
-  (~blog-filter-nav
+(defcomp ~index/tag-groups-filter (&key tag-groups is-any-group hx-select)
+  (~filters/nav
     :items (<>
-      (~blog-filter-any-topic
+      (~filters/any-topic
         :cls (if is-any-group
           "bg-stone-900 text-white border-stone-900"
           "bg-white text-stone-600 border-stone-300 hover:bg-stone-50")
@@ -178,23 +178,23 @@
                (colour (get grp "colour"))
                (name (get grp "name"))
                (icon (if fi
-                 (~blog-filter-group-icon-image :src fi :name name)
-                 (~blog-filter-group-icon-color
+                 (~filters/group-icon-image :src fi :name name)
+                 (~filters/group-icon-color
                    :style (if colour
                      (str "background-color: " colour "; color: white;")
                      "background-color: #e7e5e4; color: #57534e;")
                    :initial (slice (or name "?") 0 1)))))
-          (~blog-filter-group-li
+          (~filters/group-li
             :cls cls :hx-get (str "?group=" (get grp "slug") "&page=1")
             :hx-select hx-select :icon icon
             :name name :count (str (get grp "post_count")))))
         (or tag-groups (list))))))
 
 ;; Authors filter — replaces _authors_filter_sx
-(defcomp ~blog-index-authors-filter (&key authors is-any-author hx-select)
-  (~blog-filter-nav
+(defcomp ~index/authors-filter (&key authors is-any-author hx-select)
+  (~filters/nav
     :items (<>
-      (~blog-filter-any-author
+      (~filters/any-author
         :cls (if is-any-author
           "bg-stone-900 text-white border-stone-900"
           "bg-white text-stone-600 border-stone-300 hover:bg-stone-50")
@@ -205,49 +205,49 @@
                  "bg-stone-900 text-white border-stone-900"
                  "bg-white text-stone-600 border-stone-300 hover:bg-stone-50"))
                (img (get a "profile_image")))
-          (~blog-filter-author-li
+          (~filters/author-li
             :cls cls :hx-get (str "?author=" (get a "slug") "&page=1")
             :hx-select hx-select
-            :icon (when img (~blog-filter-author-icon :src img :name (get a "name")))
+            :icon (when img (~filters/author-icon :src img :name (get a "name")))
             :name (get a "name")
             :count (str (get a "published_post_count")))))
         (or authors (list))))))
 
 ;; Blog index aside — replaces _blog_aside_sx
-(defcomp ~blog-index-aside-content (&key is-admin has-user hx-select draft-count drafts
+(defcomp ~index/aside-content (&key is-admin has-user hx-select draft-count drafts
                                          new-post-href new-page-href current-local-href
                                          tag-groups authors is-any-group is-any-author)
-  (~blog-aside
-    :search (~search-desktop)
-    :action-buttons (~blog-index-actions
+  (~index/aside
+    :search (~shared:controls/search-desktop)
+    :action-buttons (~index/actions
       :is-admin is-admin :has-user has-user :hx-select hx-select
       :draft-count draft-count :drafts drafts
       :new-post-href new-post-href :new-page-href new-page-href
       :current-local-href current-local-href)
-    :tag-groups-filter (~blog-index-tag-groups-filter
+    :tag-groups-filter (~index/tag-groups-filter
       :tag-groups tag-groups :is-any-group is-any-group :hx-select hx-select)
-    :authors-filter (~blog-index-authors-filter
+    :authors-filter (~index/authors-filter
       :authors authors :is-any-author is-any-author :hx-select hx-select)))
 
 ;; Blog index mobile filter — replaces _blog_filter_sx
-(defcomp ~blog-index-filter-content (&key is-admin has-user hx-select draft-count drafts
+(defcomp ~index/filter-content (&key is-admin has-user hx-select draft-count drafts
                                           new-post-href new-page-href current-local-href
                                           tag-groups authors is-any-group is-any-author
                                           tg-summary au-summary)
-  (~mobile-filter
+  (~shared:controls/mobile-filter
     :filter-summary (<>
-      (~search-mobile)
+      (~shared:controls/search-mobile)
       (when (not (= tg-summary ""))
-        (~blog-filter-summary :text tg-summary))
+        (~filters/summary :text tg-summary))
       (when (not (= au-summary ""))
-        (~blog-filter-summary :text au-summary)))
-    :action-buttons (~blog-index-actions
+        (~filters/summary :text au-summary)))
+    :action-buttons (~index/actions
       :is-admin is-admin :has-user has-user :hx-select hx-select
       :draft-count draft-count :drafts drafts
       :new-post-href new-post-href :new-page-href new-page-href
       :current-local-href current-local-href)
     :filter-details (<>
-      (~blog-index-tag-groups-filter
+      (~index/tag-groups-filter
         :tag-groups tag-groups :is-any-group is-any-group :hx-select hx-select)
-      (~blog-index-authors-filter
+      (~index/authors-filter
         :authors authors :is-any-author is-any-author :hx-select hx-select))))

blog/sx/kg_cards.sx

@@ -7,7 +7,7 @@
 ;; ---------------------------------------------------------------------------
 ;; Image card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-image (&key src alt caption width href)
+(defcomp ~kg_cards/kg-image (&key (src :as string) (alt :as string?) (caption :as string?) (width :as string?) (href :as string?))
   (figure :class (str "kg-card kg-image-card"
                    (if (= width "wide") " kg-width-wide"
                      (if (= width "full") " kg-width-full" "")))
@@ -19,7 +19,7 @@
 ;; ---------------------------------------------------------------------------
 ;; Gallery card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-gallery (&key images caption)
+(defcomp ~kg_cards/kg-gallery (&key (images :as list) (caption :as string?))
   (figure :class "kg-card kg-gallery-card kg-width-wide"
     (div :class "kg-gallery-container"
       (map (lambda (row)
@@ -36,19 +36,19 @@
 ;; HTML card — wraps user-pasted HTML so the editor can identify the block.
 ;; Content is native sx children (no longer an opaque HTML string).
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-html (&rest children)
+(defcomp ~kg_cards/kg-html (&rest children)
   (div :class "kg-card kg-html-card" children))
 
 ;; ---------------------------------------------------------------------------
 ;; Markdown card — rendered markdown content, editor can identify the block.
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-md (&rest children)
+(defcomp ~kg_cards/kg-md (&rest children)
   (div :class "kg-card kg-md-card" children))
 
 ;; ---------------------------------------------------------------------------
 ;; Embed card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-embed (&key html caption)
+(defcomp ~kg_cards/kg-embed (&key (html :as string) (caption :as string?))
   (figure :class "kg-card kg-embed-card"
     (~rich-text :html html)
     (when caption (figcaption caption))))
@@ -56,7 +56,7 @@
 ;; ---------------------------------------------------------------------------
 ;; Bookmark card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-bookmark (&key url title description icon author publisher thumbnail caption)
+(defcomp ~kg_cards/kg-bookmark (&key (url :as string) (title :as string?) (description :as string?) (icon :as string?) (author :as string?) (publisher :as string?) (thumbnail :as string?) (caption :as string?))
   (figure :class "kg-card kg-bookmark-card"
     (a :class "kg-bookmark-container" :href url
       (div :class "kg-bookmark-content"
@@ -75,7 +75,7 @@
 ;; ---------------------------------------------------------------------------
 ;; Callout card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-callout (&key color emoji content)
+(defcomp ~kg_cards/kg-callout (&key (color :as string?) (emoji :as string?) (content :as string?))
   (div :class (str "kg-card kg-callout-card kg-callout-card-" (or color "grey"))
     (when emoji (div :class "kg-callout-emoji" emoji))
     (div :class "kg-callout-text" (or content ""))))
@@ -83,14 +83,14 @@
 ;; ---------------------------------------------------------------------------
 ;; Button card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-button (&key url text alignment)
+(defcomp ~kg_cards/kg-button (&key (url :as string) (text :as string?) (alignment :as string?))
   (div :class (str "kg-card kg-button-card kg-align-" (or alignment "center"))
     (a :href url :class "kg-btn kg-btn-accent" (or text ""))))
 
 ;; ---------------------------------------------------------------------------
 ;; Toggle card (accordion)
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-toggle (&key heading content)
+(defcomp ~kg_cards/kg-toggle (&key (heading :as string?) (content :as string?))
   (div :class "kg-card kg-toggle-card" :data-kg-toggle-state "close"
     (div :class "kg-toggle-heading"
       (h4 :class "kg-toggle-heading-text" (or heading ""))
@@ -101,7 +101,7 @@
 ;; ---------------------------------------------------------------------------
 ;; Audio card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-audio (&key src title duration thumbnail)
+(defcomp ~kg_cards/kg-audio (&key (src :as string) (title :as string?) (duration :as string?) (thumbnail :as string?))
   (div :class "kg-card kg-audio-card"
     (if thumbnail
       (img :src thumbnail :alt "audio-thumbnail" :class "kg-audio-thumbnail")
@@ -124,7 +124,7 @@
 ;; ---------------------------------------------------------------------------
 ;; Video card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-video (&key src caption width thumbnail loop)
+(defcomp ~kg_cards/kg-video (&key (src :as string) (caption :as string?) (width :as string?) (thumbnail :as string?) (loop :as boolean?))
   (figure :class (str "kg-card kg-video-card"
                    (if (= width "wide") " kg-width-wide"
                      (if (= width "full") " kg-width-full" "")))
@@ -136,7 +136,7 @@
 ;; ---------------------------------------------------------------------------
 ;; File card
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-file (&key src filename title filesize caption)
+(defcomp ~kg_cards/kg-file (&key (src :as string) (filename :as string?) (title :as string?) (filesize :as string?) (caption :as string?))
   (div :class "kg-card kg-file-card"
     (a :class "kg-file-card-container" :href src :download (or filename "")
       (div :class "kg-file-card-contents"
@@ -149,5 +149,5 @@
 ;; ---------------------------------------------------------------------------
 ;; Paywall marker
 ;; ---------------------------------------------------------------------------
-(defcomp ~kg-paywall ()
+(defcomp ~kg_cards/kg-paywall ()
   (~rich-text :html "<!--members-only-->"))

blog/sx/layouts.sx

@@ -0,0 +1,185 @@
+;; Blog layout defcomps — fully self-contained via IO primitives.
+;; Registered via register_sx_layout in __init__.py.
+
+;; --- Blog header (invisible row for blog-header-child swap target) ---
+
+(defcomp ~layouts/header (&key oob)
+  (~shared:layout/menu-row-sx :id "blog-row" :level 1
+    :link-label-content (div)
+    :child-id "blog-header-child" :oob oob))
+
+;; --- Auto-fetching settings header macro ---
+
+(defmacro ~blog-settings-header-auto (oob)
+  (quasiquote
+    (~shared:layout/menu-row-sx :id "root-settings-row" :level 1
+      :link-href (url-for "settings.defpage_settings_home")
+      :link-label-content (~header/admin-label)
+      :nav (~layouts/settings-nav)
+      :child-id "root-settings-header-child"
+      :oob (unquote oob))))
+
+;; --- Auto-fetching sub-settings header macro ---
+
+(defmacro ~blog-sub-settings-header-auto (row-id child-id endpoint icon label oob)
+  (quasiquote
+    (~shared:layout/menu-row-sx :id (unquote row-id) :level 2
+      :link-href (url-for (unquote endpoint))
+      :link-label-content (~header/sub-settings-label
+        :icon (str "fa fa-" (unquote icon))
+        :label (unquote label))
+      :child-id (unquote child-id)
+      :oob (unquote oob))))
+
+;; ---------------------------------------------------------------------------
+;; Blog layout (root + blog header)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/full ()
+  (<> (~root-header-auto)
+    (~layouts/header)))
+
+(defcomp ~layouts/oob ()
+  (<> (~layouts/header :oob true)
+    (~shared:layout/clear-oob-div :id "blog-header-child")
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; Settings layout (root + settings header)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/settings-layout-full ()
+  (<> (~root-header-auto)
+    (~blog-settings-header-auto)))
+
+(defcomp ~layouts/settings-layout-oob ()
+  (<> (~blog-settings-header-auto true)
+    (~shared:layout/clear-oob-div :id "root-settings-header-child")
+    (~root-header-auto true)))
+
+(defcomp ~layouts/settings-layout-mobile ()
+  (~layouts/settings-nav))
+
+;; ---------------------------------------------------------------------------
+;; Cache layout (root + settings + cache sub-header)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/cache-layout-full ()
+  (<> (~root-header-auto)
+    (~blog-settings-header-auto)
+    (~blog-sub-settings-header-auto
+      "cache-row" "cache-header-child"
+      "settings.defpage_cache_page" "refresh" "Cache")))
+
+(defcomp ~layouts/cache-layout-oob ()
+  (<> (~blog-sub-settings-header-auto
+        "cache-row" "cache-header-child"
+        "settings.defpage_cache_page" "refresh" "Cache" true)
+    (~shared:layout/clear-oob-div :id "cache-header-child")
+    (~blog-settings-header-auto true)
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; Snippets layout (root + settings + snippets sub-header)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/snippets-layout-full ()
+  (<> (~root-header-auto)
+    (~blog-settings-header-auto)
+    (~blog-sub-settings-header-auto
+      "snippets-row" "snippets-header-child"
+      "snippets.defpage_snippets_page" "puzzle-piece" "Snippets")))
+
+(defcomp ~layouts/snippets-layout-oob ()
+  (<> (~blog-sub-settings-header-auto
+        "snippets-row" "snippets-header-child"
+        "snippets.defpage_snippets_page" "puzzle-piece" "Snippets" true)
+    (~shared:layout/clear-oob-div :id "snippets-header-child")
+    (~blog-settings-header-auto true)
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; Menu Items layout (root + settings + menu-items sub-header)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/menu-items-layout-full ()
+  (<> (~root-header-auto)
+    (~blog-settings-header-auto)
+    (~blog-sub-settings-header-auto
+      "menu_items-row" "menu_items-header-child"
+      "menu_items.defpage_menu_items_page" "bars" "Menu Items")))
+
+(defcomp ~layouts/menu-items-layout-oob ()
+  (<> (~blog-sub-settings-header-auto
+        "menu_items-row" "menu_items-header-child"
+        "menu_items.defpage_menu_items_page" "bars" "Menu Items" true)
+    (~shared:layout/clear-oob-div :id "menu_items-header-child")
+    (~blog-settings-header-auto true)
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; Tag Groups layout (root + settings + tag-groups sub-header)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/tag-groups-layout-full ()
+  (<> (~root-header-auto)
+    (~blog-settings-header-auto)
+    (~blog-sub-settings-header-auto
+      "tag-groups-row" "tag-groups-header-child"
+      "blog.tag_groups_admin.defpage_tag_groups_page" "tags" "Tag Groups")))
+
+(defcomp ~layouts/tag-groups-layout-oob ()
+  (<> (~blog-sub-settings-header-auto
+        "tag-groups-row" "tag-groups-header-child"
+        "blog.tag_groups_admin.defpage_tag_groups_page" "tags" "Tag Groups" true)
+    (~shared:layout/clear-oob-div :id "tag-groups-header-child")
+    (~blog-settings-header-auto true)
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; Tag Group Edit layout (root + settings + tag-groups sub-header with id)
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/tag-group-edit-layout-full ()
+  (<> (~root-header-auto)
+    (~blog-settings-header-auto)
+    (~shared:layout/menu-row-sx :id "tag-groups-row" :level 2
+      :link-href (url-for "blog.tag_groups_admin.defpage_tag_group_edit"
+                          :id (request-view-args "id"))
+      :link-label-content (~header/sub-settings-label
+        :icon "fa fa-tags" :label "Tag Groups")
+      :child-id "tag-groups-header-child")))
+
+(defcomp ~layouts/tag-group-edit-layout-oob ()
+  (<> (~shared:layout/menu-row-sx :id "tag-groups-row" :level 2
+        :link-href (url-for "blog.tag_groups_admin.defpage_tag_group_edit"
+                            :id (request-view-args "id"))
+        :link-label-content (~header/sub-settings-label
+          :icon "fa fa-tags" :label "Tag Groups")
+        :child-id "tag-groups-header-child"
+        :oob true)
+    (~shared:layout/clear-oob-div :id "tag-groups-header-child")
+    (~blog-settings-header-auto true)
+    (~root-header-auto true)))
+
+;; --- Settings nav links — uses IO primitives ---
+
+(defcomp ~layouts/settings-nav ()
+  (let* ((sc (select-colours))
+         (links (list
+           (dict :endpoint "menu_items.defpage_menu_items_page" :icon "fa fa-bars" :label "Menu Items")
+           (dict :endpoint "snippets.defpage_snippets_page" :icon "fa fa-puzzle-piece" :label "Snippets")
+           (dict :endpoint "blog.tag_groups_admin.defpage_tag_groups_page" :icon "fa fa-tags" :label "Tag Groups")
+           (dict :endpoint "settings.defpage_cache_page" :icon "fa fa-refresh" :label "Cache"))))
+    (<> (map (lambda (lnk)
+      (~shared:layout/nav-link
+        :href (url-for (get lnk "endpoint"))
+        :icon (get lnk "icon")
+        :label (get lnk "label")
+        :select-colours (or sc "")))
+      links))))
+
+;; --- Editor panel wrapper ---
+
+(defcomp ~layouts/editor-panel (&key parts)
+  (<> parts))

blog/sx/menu_items.sx

@@ -1,6 +1,6 @@
 ;; Menu item form and page search components
 
-(defcomp ~page-search-item (&key id title slug feature-image)
+(defcomp ~menu_items/page-search-item (&key id title slug feature-image)
   (div :class "flex items-center gap-3 p-3 hover:bg-stone-50 cursor-pointer border-b last:border-b-0"
     :data-page-id id :data-page-title title :data-page-slug slug
     :data-page-image (or feature-image "")
@@ -11,16 +11,50 @@
       (div :class "font-medium truncate" title)
       (div :class "text-xs text-stone-500 truncate" slug))))
 
-(defcomp ~page-search-results (&key items sentinel)
+(defcomp ~menu_items/page-search-results (&key items sentinel)
   (div :class "border border-stone-200 rounded-md max-h-64 overflow-y-auto"
     items sentinel))
 
-(defcomp ~page-search-sentinel (&key url query next-page)
+(defcomp ~menu_items/page-search-sentinel (&key url query next-page)
   (div :sx-get url :sx-trigger "intersect once" :sx-swap "outerHTML"
     :sx-vals (str "{\"q\": \"" query "\", \"page\": " next-page "}")
     :class "p-3 text-center text-sm text-stone-400"
     (i :class "fa fa-spinner fa-spin") " Loading more..."))
 
-(defcomp ~page-search-empty (&key query)
+(defcomp ~menu_items/page-search-empty (&key query)
   (div :class "p-3 text-center text-stone-400 border border-stone-200 rounded-md"
     (str "No pages found matching \"" query "\"")))
+
+;; Data-driven page search results (replaces Python render_page_search_results loop)
+(defcomp ~menu_items/page-search-results-from-data (&key pages query has-more search-url next-page)
+  (if (and (not pages) query)
+    (~menu_items/page-search-empty :query query)
+    (when pages
+      (~menu_items/page-search-results
+        :items (<> (map (lambda (p)
+          (~menu_items/page-search-item
+            :id (get p "id") :title (get p "title")
+            :slug (get p "slug") :feature-image (get p "feature_image")))
+          pages))
+        :sentinel (when has-more
+          (~menu_items/page-search-sentinel :url search-url :query query :next-page next-page))))))
+
+;; Data-driven menu nav items (replaces Python render_menu_items_nav_oob loop)
+(defcomp ~menu_items/menu-nav-from-data (&key items nav-cls container-id arrow-cls scroll-hs)
+  (if (not items)
+    (~shared:nav/blog-nav-empty :wrapper-id "menu-items-nav-wrapper")
+    (~shared:misc/scroll-nav-wrapper :wrapper-id "menu-items-nav-wrapper" :container-id container-id
+      :arrow-cls arrow-cls
+      :left-hs (str "on click set #" container-id ".scrollLeft to #" container-id ".scrollLeft - 200")
+      :scroll-hs scroll-hs
+      :right-hs (str "on click set #" container-id ".scrollLeft to #" container-id ".scrollLeft + 200")
+      :items (<> (map (lambda (item)
+        (let* ((img (~shared:misc/img-or-placeholder :src (get item "feature_image") :alt (get item "label")
+                 :size-cls "w-8 h-8 rounded-full object-cover flex-shrink-0")))
+          (if (= (get item "slug") "cart")
+            (~shared:nav/blog-nav-item-plain :href (get item "href") :selected (get item "selected")
+              :nav-cls nav-cls :img img :label (get item "label"))
+            (~shared:nav/blog-nav-item-link :href (get item "href") :hx-get (get item "hx_get")
+              :selected (get item "selected") :nav-cls nav-cls :img img :label (get item "label")))))
+        items))
+      :oob true)))

blog/sx/settings.sx

@@ -1,8 +1,8 @@
 ;; Blog settings panel components (features, markets, associated entries)
 
-(defcomp ~blog-features-form (&key features-url calendar-checked market-checked hs-trigger)
+(defcomp ~settings/features-form (&key (features-url :as string) (calendar-checked :as boolean) (market-checked :as boolean) (hs-trigger :as string))
   (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"
+    :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"
@@ -18,33 +18,33 @@
         (i :class "fa fa-shopping-bag text-green-600 mr-1")
         " Market \u2014 enable product catalog on this page"))))
 
-(defcomp ~blog-sumup-form (&key sumup-url merchant-code placeholder sumup-configured checkout-prefix)
+(defcomp ~settings/sumup-form (&key sumup-url merchant-code placeholder sumup-configured checkout-prefix)
   (div :class "mt-4 pt-4 border-t border-stone-100"
-    (~sumup-settings-form :update-url sumup-url :merchant-code merchant-code
+    (~shared:misc/sumup-settings-form :update-url sumup-url :merchant-code merchant-code
       :placeholder placeholder :sumup-configured sumup-configured
       :checkout-prefix checkout-prefix :panel-id "features-panel")))
 
-(defcomp ~blog-features-panel (&key form sumup)
+(defcomp ~settings/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)
+(defcomp ~settings/market-item (&key (name :as string) (slug :as string) (delete-url :as string) (confirm-text :as string))
   (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)
+(defcomp ~settings/markets-list (&key items)
   (ul :class "space-y-2 mb-4" items))
 
-(defcomp ~blog-markets-empty ()
+(defcomp ~settings/markets-empty ()
   (p :class "text-stone-500 mb-4 text-sm" "No markets yet."))
 
-(defcomp ~blog-markets-panel (&key list create-url)
+(defcomp ~settings/markets-panel (&key list create-url)
   (div :id "markets-panel"
     (h3 :class "text-lg font-semibold mb-3" "Markets")
     list
@@ -59,17 +59,17 @@
 ;; ---------------------------------------------------------------------------
 
 ;; Features panel composition — replaces render_features_panel
-(defcomp ~blog-features-panel-content (&key features-url calendar-checked market-checked
+(defcomp ~settings/features-panel-content (&key features-url calendar-checked market-checked
                                             show-sumup sumup-url merchant-code placeholder
                                             sumup-configured checkout-prefix)
-  (~blog-features-panel
-    :form (~blog-features-form
+  (~settings/features-panel
+    :form (~settings/features-form
       :features-url features-url
       :calendar-checked calendar-checked
       :market-checked market-checked
       :hs-trigger "on change trigger submit on closest <form/>")
     :sumup (when show-sumup
-      (~blog-sumup-form
+      (~settings/sumup-form
         :sumup-url sumup-url
         :merchant-code merchant-code
         :placeholder placeholder
@@ -77,13 +77,13 @@
         :checkout-prefix checkout-prefix))))
 
 ;; Markets panel composition — replaces render_markets_panel
-(defcomp ~blog-markets-panel-content (&key markets create-url)
-  (~blog-markets-panel
+(defcomp ~settings/markets-panel-content (&key markets create-url)
+  (~settings/markets-panel
     :list (if (empty? (or markets (list)))
-      (~blog-markets-empty)
-      (~blog-markets-list
+      (~settings/markets-empty)
+      (~settings/markets-list
         :items (map (lambda (m)
-          (~blog-market-item
+          (~settings/market-item
             :name (get m "name")
             :slug (get m "slug")
             :delete-url (get m "delete_url")
@@ -93,11 +93,11 @@
 
 ;; Associated entries
 
-(defcomp ~blog-entry-image (&key src title)
+(defcomp ~settings/entry-image (&key (src :as string?) (title :as string))
   (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)
+(defcomp ~settings/associated-entry (&key (confirm-text :as string) (toggle-url :as string) hx-headers img (name :as string) (date-str :as string))
   (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?"
@@ -115,14 +115,178 @@
         (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)
+(defcomp ~settings/associated-entries-content (&key items)
   (div :class "space-y-1" items))
 
-(defcomp ~blog-associated-entries-empty ()
+(defcomp ~settings/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)
+(defcomp ~settings/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))
+
+;; ---------------------------------------------------------------------------
+;; Associated entries composition — replaces _render_associated_entries
+;; ---------------------------------------------------------------------------
+
+(defcomp ~settings/associated-entries-from-data (&key entries csrf)
+  (~settings/associated-entries-panel
+    :content (if (empty? (or entries (list)))
+      (~settings/associated-entries-empty)
+      (~settings/associated-entries-content
+        :items (map (lambda (e)
+          (~settings/associated-entry
+            :confirm-text (get e "confirm_text")
+            :toggle-url (get e "toggle_url")
+            :hx-headers {:X-CSRFToken csrf}
+            :img (~settings/entry-image :src (get e "cal_image") :title (get e "cal_title"))
+            :name (get e "name")
+            :date-str (get e "date_str")))
+          (or entries (list)))))))
+
+;; ---------------------------------------------------------------------------
+;; Entries browser composition — replaces _h_post_entries_content
+;; ---------------------------------------------------------------------------
+
+(defcomp ~settings/calendar-browser-item (&key (name :as string) (title :as string) (image :as string?) (view-url :as string))
+  (details :class "border rounded-lg bg-white" :data-toggle-group "calendar-browser"
+    (summary :class "p-4 cursor-pointer hover:bg-stone-50 flex items-center gap-3"
+      (if image
+        (img :src image :alt title :class "w-12 h-12 rounded object-cover flex-shrink-0")
+        (div :class "w-12 h-12 rounded bg-stone-200 flex-shrink-0"))
+      (div :class "flex-1"
+        (div :class "font-semibold flex items-center gap-2"
+          (i :class "fa fa-calendar text-stone-500") " " name)
+        (div :class "text-sm text-stone-600" title)))
+    (div :class "p-4 border-t" :sx-get view-url :sx-trigger "intersect once" :sx-swap "innerHTML"
+      (div :class "text-sm text-stone-400" "Loading calendar..."))))
+
+(defcomp ~settings/entries-browser-content (&key entries-panel calendars)
+  (div :id "post-entries-content" :class "space-y-6 p-4"
+    entries-panel
+    (div :class "space-y-3"
+      (h3 :class "text-lg font-semibold" "Browse Calendars")
+      (if (empty? (or calendars (list)))
+        (div :class "text-sm text-stone-400" "No calendars found.")
+        (map (lambda (cal)
+          (~settings/calendar-browser-item
+            :name (get cal "name")
+            :title (get cal "title")
+            :image (get cal "image")
+            :view-url (get cal "view_url")))
+          (or calendars (list)))))))
+
+;; ---------------------------------------------------------------------------
+;; Post settings form composition — replaces _h_post_settings_content
+;; ---------------------------------------------------------------------------
+
+(defcomp ~settings/field-label (&key (text :as string) (field-for :as string))
+  (label :for field-for
+    :class "block text-[13px] font-medium text-stone-500 mb-[4px]" text))
+
+(defcomp ~settings/section (&key (title :as string) content (is-open :as boolean))
+  (details :class "border border-stone-200 rounded-[8px] overflow-hidden" :open is-open
+    (summary :class "px-[16px] py-[10px] bg-stone-50 text-[14px] font-medium text-stone-600 cursor-pointer select-none hover:bg-stone-100 transition-colors"
+      title)
+    (div :class "px-[16px] py-[12px] space-y-[12px]" content)))
+
+(defcomp ~settings/form-content (&key csrf updated-at is-page save-success
+                                           slug published-at featured visibility email-only
+                                           tags feature-image-alt
+                                           meta-title meta-description canonical-url
+                                           og-title og-description og-image
+                                           twitter-title twitter-description twitter-image
+                                           custom-template)
+  (let* ((input-cls "w-full text-[14px] rounded-[6px] border border-stone-200 px-[10px] py-[7px] bg-white text-stone-700 placeholder:text-stone-300 focus:outline-none focus:border-stone-400 focus:ring-1 focus:ring-stone-300")
+         (textarea-cls (str input-cls " resize-y"))
+         (slug-placeholder (if is-page "page-slug" "post-slug"))
+         (tmpl-placeholder (if is-page "custom-page.hbs" "custom-post.hbs"))
+         (featured-label (if is-page "Featured page" "Featured post")))
+    (form :method "post" :class "max-w-[640px] mx-auto pb-[48px] px-[16px]"
+      (input :type "hidden" :name "csrf_token" :value csrf)
+      (input :type "hidden" :name "updated_at" :value (or updated-at ""))
+      (div :class "space-y-[12px] mt-[16px]"
+        ;; General
+        (~settings/section :title "General" :is-open true :content
+          (<>
+            (div (~settings/field-label :text "Slug" :field-for "settings-slug")
+              (input :type "text" :name "slug" :id "settings-slug" :value (or slug "")
+                :placeholder slug-placeholder :class input-cls))
+            (div (~settings/field-label :text "Published at" :field-for "settings-published_at")
+              (input :type "datetime-local" :name "published_at" :id "settings-published_at"
+                :value (or published-at "") :class input-cls))
+            (div (label :class "inline-flex items-center gap-[8px] cursor-pointer"
+              (input :type "checkbox" :name "featured" :id "settings-featured" :checked featured
+                :class "rounded border-stone-300 text-stone-600 focus:ring-stone-300")
+              (span :class "text-[14px] text-stone-600" featured-label)))
+            (div (~settings/field-label :text "Visibility" :field-for "settings-visibility")
+              (select :name "visibility" :id "settings-visibility" :class input-cls
+                (option :value "public" :selected (= visibility "public") "Public")
+                (option :value "members" :selected (= visibility "members") "Members")
+                (option :value "paid" :selected (= visibility "paid") "Paid")))
+            (div (label :class "inline-flex items-center gap-[8px] cursor-pointer"
+              (input :type "checkbox" :name "email_only" :id "settings-email_only" :checked email-only
+                :class "rounded border-stone-300 text-stone-600 focus:ring-stone-300")
+              (span :class "text-[14px] text-stone-600" "Email only")))))
+        ;; Tags
+        (~settings/section :title "Tags" :content
+          (div (~settings/field-label :text "Tags (comma-separated)" :field-for "settings-tags")
+            (input :type "text" :name "tags" :id "settings-tags" :value (or tags "")
+              :placeholder "news, updates, featured" :class input-cls)
+            (p :class "text-[12px] text-stone-400 mt-[4px]" "Unknown tags will be created automatically.")))
+        ;; Feature Image
+        (~settings/section :title "Feature Image" :content
+          (div (~settings/field-label :text "Alt text" :field-for "settings-feature_image_alt")
+            (input :type "text" :name "feature_image_alt" :id "settings-feature_image_alt"
+              :value (or feature-image-alt "") :placeholder "Describe the feature image" :class input-cls)))
+        ;; SEO / Meta
+        (~settings/section :title "SEO / Meta" :content
+          (<>
+            (div (~settings/field-label :text "Meta title" :field-for "settings-meta_title")
+              (input :type "text" :name "meta_title" :id "settings-meta_title" :value (or meta-title "")
+                :placeholder "SEO title" :maxlength "300" :class input-cls)
+              (p :class "text-[12px] text-stone-400 mt-[2px]" "Recommended: 70 characters. Max: 300."))
+            (div (~settings/field-label :text "Meta description" :field-for "settings-meta_description")
+              (textarea :name "meta_description" :id "settings-meta_description" :rows "2"
+                :placeholder "SEO description" :maxlength "500" :class textarea-cls
+                (or meta-description ""))
+              (p :class "text-[12px] text-stone-400 mt-[2px]" "Recommended: 156 characters."))
+            (div (~settings/field-label :text "Canonical URL" :field-for "settings-canonical_url")
+              (input :type "url" :name "canonical_url" :id "settings-canonical_url"
+                :value (or canonical-url "") :placeholder "https://example.com/original-post" :class input-cls))))
+        ;; Facebook / OpenGraph
+        (~settings/section :title "Facebook / OpenGraph" :content
+          (<>
+            (div (~settings/field-label :text "OG title" :field-for "settings-og_title")
+              (input :type "text" :name "og_title" :id "settings-og_title" :value (or og-title "") :class input-cls))
+            (div (~settings/field-label :text "OG description" :field-for "settings-og_description")
+              (textarea :name "og_description" :id "settings-og_description" :rows "2" :class textarea-cls
+                (or og-description "")))
+            (div (~settings/field-label :text "OG image URL" :field-for "settings-og_image")
+              (input :type "url" :name "og_image" :id "settings-og_image" :value (or og-image "")
+                :placeholder "https://..." :class input-cls))))
+        ;; X / Twitter
+        (~settings/section :title "X / Twitter" :content
+          (<>
+            (div (~settings/field-label :text "Twitter title" :field-for "settings-twitter_title")
+              (input :type "text" :name "twitter_title" :id "settings-twitter_title"
+                :value (or twitter-title "") :class input-cls))
+            (div (~settings/field-label :text "Twitter description" :field-for "settings-twitter_description")
+              (textarea :name "twitter_description" :id "settings-twitter_description" :rows "2" :class textarea-cls
+                (or twitter-description "")))
+            (div (~settings/field-label :text "Twitter image URL" :field-for "settings-twitter_image")
+              (input :type "url" :name "twitter_image" :id "settings-twitter_image"
+                :value (or twitter-image "") :placeholder "https://..." :class input-cls))))
+        ;; Advanced
+        (~settings/section :title "Advanced" :content
+          (div (~settings/field-label :text "Custom template" :field-for "settings-custom_template")
+            (input :type "text" :name "custom_template" :id "settings-custom_template"
+              :value (or custom-template "") :placeholder tmpl-placeholder :class input-cls))))
+      (div :class "flex items-center gap-[16px] mt-[24px] pt-[16px] border-t border-stone-200"
+        (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"
+          "Save settings")
+        (when save-success
+          (span :class "text-[14px] text-green-600" "Saved."))))))

blog/sxc/pages/blog.sx

@@ -1,5 +1,6 @@
 ; Blog app defpage declarations
 ; Pages kept as Python: home, index, post-detail (cache_page / complex branching)
+; All helpers return data dicts — markup composition in SX.
 
 ; --- New post/page editors ---
 
@@ -7,13 +8,23 @@
   :path "/new/"
   :auth :admin
   :layout :blog
-  :content (editor-content))
+  :data (editor-data)
+  :content (~editor/content
+    :csrf csrf :title-placeholder title-placeholder
+    :create-label create-label :css-href css-href
+    :js-src js-src :sx-editor-js-src sx-editor-js-src
+    :init-js init-js))
 
 (defpage new-page
   :path "/new-page/"
   :auth :admin
   :layout :blog
-  :content (editor-page-content))
+  :data (editor-page-data)
+  :content (~editor/content
+    :csrf csrf :title-placeholder title-placeholder
+    :create-label create-label :css-href css-href
+    :js-src js-src :sx-editor-js-src sx-editor-js-src
+    :init-js init-js))
 
 ; --- Post admin pages (absolute paths under /<slug>/admin/) ---
 
@@ -21,37 +32,71 @@
   :path "/<slug>/admin/"
   :auth :admin
   :layout (:post-admin :selected "admin")
-  :content (post-admin-content slug))
+  :data (post-admin-data slug)
+  :content (~admin/placeholder))
 
 (defpage post-data
   :path "/<slug>/admin/data/"
   :auth :admin
   :layout (:post-admin :selected "data")
-  :content (post-data-content slug))
+  :data (post-data-data slug)
+  :content (~admin/data-table-content :tablename tablename :model-data model-data))
 
 (defpage post-preview
   :path "/<slug>/admin/preview/"
   :auth :admin
   :layout (:post-admin :selected "preview")
-  :content (post-preview-content slug))
+  :data (post-preview-data slug)
+  :content (~admin/preview-content
+    :sx-pretty sx-pretty :json-pretty json-pretty
+    :sx-rendered sx-rendered :lex-rendered lex-rendered))
 
 (defpage post-entries
   :path "/<slug>/admin/entries/"
   :auth :admin
   :layout (:post-admin :selected "entries")
-  :content (post-entries-content slug))
+  :data (post-entries-data slug)
+  :content (~settings/entries-browser-content
+    :entries-panel (~settings/associated-entries-from-data :entries entries :csrf csrf)
+    :calendars calendars))
 
 (defpage post-settings
   :path "/<slug>/admin/settings/"
   :auth :post_author
   :layout (:post-admin :selected "settings")
-  :content (post-settings-content slug))
+  :data (post-settings-data slug)
+  :content (~settings/form-content
+    :csrf csrf :updated-at updated-at :is-page is-page
+    :save-success save-success :slug settings-slug
+    :published-at published-at :featured featured
+    :visibility visibility :email-only email-only
+    :tags tags :feature-image-alt feature-image-alt
+    :meta-title meta-title :meta-description meta-description
+    :canonical-url canonical-url :og-title og-title
+    :og-description og-description :og-image og-image
+    :twitter-title twitter-title :twitter-description twitter-description
+    :twitter-image twitter-image :custom-template custom-template))
 
 (defpage post-edit
   :path "/<slug>/admin/edit/"
   :auth :post_author
   :layout (:post-admin :selected "edit")
-  :content (post-edit-content slug))
+  :data (post-edit-data slug)
+  :content (~editor/edit-content
+    :csrf csrf :updated-at updated-at
+    :title-val title-val :excerpt-val excerpt-val
+    :feature-image feature-image :feature-image-caption feature-image-caption
+    :sx-content-val sx-content-val :lexical-json lexical-json
+    :has-sx has-sx :title-placeholder title-placeholder
+    :status status :already-emailed already-emailed
+    :newsletter-options (<>
+      (option :value "" "Select newsletter\u2026")
+      (map (fn (nl) (option :value (get nl "slug") (get nl "name"))) newsletters))
+    :footer-extra (when badges
+      (<> (map (fn (b) (span :class (get b "cls") (get b "text"))) badges)))
+    :css-href css-href :js-src js-src
+    :sx-editor-js-src sx-editor-js-src
+    :init-js init-js :save-error save-error))
 
 ; --- Settings pages (absolute paths) ---
 
@@ -66,7 +111,7 @@
   :auth :admin
   :layout :blog-cache
   :data (service "blog-page" "cache-data")
-  :content (~blog-cache-panel :clear-url clear-url :csrf csrf))
+  :content (~admin/cache-panel :clear-url clear-url :csrf csrf))
 
 ; --- Snippets ---
 
@@ -75,7 +120,7 @@
   :auth :login
   :layout :blog-snippets
   :data (service "blog-page" "snippets-data")
-  :content (~blog-snippets-content
+  :content (~admin/snippets-content
     :snippets snippets :is-admin is-admin :csrf csrf))
 
 ; --- Menu Items ---
@@ -85,7 +130,7 @@
   :auth :admin
   :layout :blog-menu-items
   :data (service "blog-page" "menu-items-data")
-  :content (~blog-menu-items-content
+  :content (~admin/menu-items-content
     :menu-items menu-items :new-url new-url :csrf csrf))
 
 ; --- Tag Groups ---
@@ -95,7 +140,7 @@
   :auth :admin
   :layout :blog-tag-groups
   :data (service "blog-page" "tag-groups-data")
-  :content (~blog-tag-groups-content
+  :content (~admin/tag-groups-content
     :groups groups :unassigned-tags unassigned-tags
     :create-url create-url :csrf csrf))
 
@@ -104,6 +149,6 @@
   :auth :admin
   :layout :blog-tag-group-edit
   :data (service "blog-page" "tag-group-edit-data" :id id)
-  :content (~blog-tag-group-edit-content
+  :content (~admin/tag-group-edit-content
     :group group :all-tags all-tags
     :save-url save-url :delete-url delete-url :csrf csrf))

blog/sxc/pages/helpers.py

@@ -0,0 +1,703 @@
+"""Blog page helpers — async functions available in .sx defpage expressions.
+
+All helpers return data values (dicts, lists) — no sx_call().
+Markup composition lives entirely in .sx defpage and .sx defcomp files.
+"""
+from __future__ import annotations
+
+from typing import Any
+
+
+# ---------------------------------------------------------------------------
+# Shared hydration helpers (kept for auth/g._defpage_ctx side effects)
+# ---------------------------------------------------------------------------
+
+def _add_to_defpage_ctx(**kwargs: Any) -> None:
+    from quart import g
+    if not hasattr(g, '_defpage_ctx'):
+        g._defpage_ctx = {}
+    g._defpage_ctx.update(kwargs)
+
+
+async def _ensure_post_data(slug: str | None) -> None:
+    """Load post data and set g.post_data + defpage context.
+
+    Replicates post bp's hydrate_post_data + context_processor.
+    """
+    from quart import g, abort
+
+    if hasattr(g, 'post_data') and g.post_data:
+        await _inject_post_context(g.post_data)
+        return
+
+    if not slug:
+        abort(404)
+
+    from bp.post.services.post_data import post_data
+
+    is_admin = bool((g.get("rights") or {}).get("admin"))
+    p_data = await post_data(slug, g.s, include_drafts=True)
+    if not p_data:
+        abort(404)
+
+    # Draft access control
+    if p_data["post"].get("status") != "published":
+        if is_admin:
+            pass
+        elif g.user and p_data["post"].get("user_id") == g.user.id:
+            pass
+        else:
+            abort(404)
+
+    g.post_data = p_data
+    g.post_slug = slug
+    await _inject_post_context(p_data)
+
+
+async def _inject_post_context(p_data: dict) -> None:
+    """Add post context_processor data to defpage context."""
+    from shared.config import config
+    from shared.infrastructure.fragments import fetch_fragment
+    from shared.infrastructure.data_client import fetch_data
+    from shared.contracts.dtos import CartSummaryDTO, dto_from_dict
+    from shared.infrastructure.cart_identity import current_cart_identity
+
+    db_post_id = p_data["post"]["id"]
+    post_slug = p_data["post"]["slug"]
+
+    container_nav = await fetch_fragment("relations", "container-nav", params={
+        "container_type": "page",
+        "container_id": str(db_post_id),
+        "post_slug": post_slug,
+    })
+
+    ctx: dict = {
+        **p_data,
+        "base_title": config()["title"],
+        "container_nav": container_nav,
+    }
+
+    if p_data["post"].get("is_page"):
+        ident = current_cart_identity()
+        summary_params: dict = {"page_slug": post_slug}
+        if ident["user_id"] is not None:
+            summary_params["user_id"] = ident["user_id"]
+        if ident["session_id"] is not None:
+            summary_params["session_id"] = ident["session_id"]
+        raw_summary = await fetch_data(
+            "cart", "cart-summary", params=summary_params, required=False,
+        )
+        page_summary = dto_from_dict(CartSummaryDTO, raw_summary) if raw_summary else CartSummaryDTO()
+        ctx["page_cart_count"] = (
+            page_summary.count + page_summary.calendar_count + page_summary.ticket_count
+        )
+        ctx["page_cart_total"] = float(
+            page_summary.total + page_summary.calendar_total + page_summary.ticket_total
+        )
+
+    _add_to_defpage_ctx(**ctx)
+
+
+# ---------------------------------------------------------------------------
+# Registration
+# ---------------------------------------------------------------------------
+
+def _register_blog_helpers() -> None:
+    from shared.sx.pages import register_page_helpers
+    register_page_helpers("blog", {
+        "editor-data": _h_editor_data,
+        "editor-page-data": _h_editor_page_data,
+        "post-admin-data": _h_post_admin_data,
+        "post-data-data": _h_post_data_data,
+        "post-preview-data": _h_post_preview_data,
+        "post-entries-data": _h_post_entries_data,
+        "post-settings-data": _h_post_settings_data,
+        "post-edit-data": _h_post_edit_data,
+    })
+
+
+# ---------------------------------------------------------------------------
+# Editor helpers
+# ---------------------------------------------------------------------------
+
+def _editor_init_js(urls: dict, *, form_id: str = "post-edit-form",
+                    has_initial_json: bool = True) -> str:
+    """Build the editor initialization JavaScript string.
+
+    URLs dict must contain: upload_image, upload_media, upload_file, oembed,
+    snippets, unsplash_key.
+    """
+    font_size_preamble = (
+        "(function() {"
+        "  function applyEditorFontSize() {"
+        "    document.documentElement.style.fontSize = '62.5%';"
+        "    document.body.style.fontSize = '1.6rem';"
+        "  }"
+        "  function restoreDefaultFontSize() {"
+        "    document.documentElement.style.fontSize = '';"
+        "    document.body.style.fontSize = '';"
+        "  }"
+        "  applyEditorFontSize();"
+        "  document.body.addEventListener('htmx:beforeSwap', function cleanup(e) {"
+        "    if (e.detail.target && e.detail.target.id === 'main-panel') {"
+        "      restoreDefaultFontSize();"
+        "      document.body.removeEventListener('htmx:beforeSwap', cleanup);"
+        "    }"
+        "  });"
+    )
+
+    upload_image = urls["upload_image"]
+    upload_media = urls["upload_media"]
+    upload_file = urls["upload_file"]
+    oembed = urls["oembed"]
+    unsplash_key = urls["unsplash_key"]
+    snippets = urls["snippets"]
+
+    init_body = (
+        "  function init() {"
+        "    var csrfToken = document.querySelector('input[name=\"csrf_token\"]').value;"
+        f"    var uploadUrl = '{upload_image}';"
+        "    var uploadUrls = {"
+        "      image: uploadUrl,"
+        f"      media: '{upload_media}',"
+        f"      file: '{upload_file}',"
+        "    };"
+        "    var fileInput = document.getElementById('feature-image-file');"
+        "    var addBtn = document.getElementById('feature-image-add-btn');"
+        "    var deleteBtn = document.getElementById('feature-image-delete-btn');"
+        "    var preview = document.getElementById('feature-image-preview');"
+        "    var emptyState = document.getElementById('feature-image-empty');"
+        "    var filledState = document.getElementById('feature-image-filled');"
+        "    var hiddenUrl = document.getElementById('feature-image-input');"
+        "    var hiddenCaption = document.getElementById('feature-image-caption-input');"
+        "    var captionInput = document.getElementById('feature-image-caption');"
+        "    var uploading = document.getElementById('feature-image-uploading');"
+        "    function showFilled(url) {"
+        "      preview.src = url; hiddenUrl.value = url;"
+        "      emptyState.classList.add('hidden'); filledState.classList.remove('hidden'); uploading.classList.add('hidden');"
+        "    }"
+        "    function showEmpty() {"
+        "      preview.src = ''; hiddenUrl.value = ''; hiddenCaption.value = ''; captionInput.value = '';"
+        "      emptyState.classList.remove('hidden'); filledState.classList.add('hidden'); uploading.classList.add('hidden');"
+        "    }"
+        "    function uploadFile(file) {"
+        "      emptyState.classList.add('hidden'); uploading.classList.remove('hidden');"
+        "      var fd = new FormData(); fd.append('file', file);"
+        "      fetch(uploadUrl, { method: 'POST', body: fd, headers: { 'X-CSRFToken': csrfToken } })"
+        "      .then(function(r) { if (!r.ok) throw new Error('Upload failed (' + r.status + ')'); return r.json(); })"
+        "      .then(function(data) {"
+        "        var url = data.images && data.images[0] && data.images[0].url;"
+        "        if (url) showFilled(url); else { showEmpty(); alert('Upload succeeded but no image URL returned.'); }"
+        "      })"
+        "      .catch(function(e) { showEmpty(); alert(e.message); });"
+        "    }"
+        "    addBtn.addEventListener('click', function() { fileInput.click(); });"
+        "    preview.addEventListener('click', function() { fileInput.click(); });"
+        "    deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); showEmpty(); });"
+        "    fileInput.addEventListener('change', function() {"
+        "      if (fileInput.files && fileInput.files[0]) { uploadFile(fileInput.files[0]); fileInput.value = ''; }"
+        "    });"
+        "    captionInput.addEventListener('input', function() { hiddenCaption.value = captionInput.value; });"
+        "    var excerpt = document.querySelector('textarea[name=\"custom_excerpt\"]');"
+        "    function autoResize() { excerpt.style.height = 'auto'; excerpt.style.height = excerpt.scrollHeight + 'px'; }"
+        "    excerpt.addEventListener('input', autoResize); autoResize();"
+    )
+
+    if has_initial_json:
+        init_body += (
+            "    var dataEl = document.getElementById('lexical-initial-data');"
+            "    var initialJson = dataEl ? dataEl.textContent.trim() : null;"
+            "    if (initialJson) { var hidden = document.getElementById('lexical-json-input'); if (hidden) hidden.value = initialJson; }"
+        )
+        initial_json_arg = "initialJson: initialJson,"
+    else:
+        initial_json_arg = "initialJson: null,"
+
+    init_body += (
+        "    window.mountEditor('lexical-editor', {"
+        f"      {initial_json_arg}"
+        "      csrfToken: csrfToken,"
+        "      uploadUrls: uploadUrls,"
+        f"      oembedUrl: '{oembed}',"
+        f"      unsplashApiKey: '{unsplash_key}',"
+        f"      snippetsUrl: '{snippets}',"
+        "    });"
+        "    if (typeof SxEditor !== 'undefined') {"
+        "      SxEditor.mount('sx-editor', {"
+        "        initialSx: (document.getElementById('sx-content-input') || {}).value || null,"
+        "        csrfToken: csrfToken,"
+        "        uploadUrls: uploadUrls,"
+        f"        oembedUrl: '{oembed}',"
+        "        onChange: function(sx) {"
+        "          document.getElementById('sx-content-input').value = sx;"
+        "        }"
+        "      });"
+        "    }"
+        "    document.addEventListener('keydown', function(e) {"
+        "      if ((e.ctrlKey || e.metaKey) && e.key === 's') {"
+        f"        e.preventDefault(); document.getElementById('{form_id}').requestSubmit();"
+        "      }"
+        "    });"
+        "  }"
+        "  if (typeof window.mountEditor === 'function') { init(); }"
+        "  else { var _t = setInterval(function() {"
+        "    if (typeof window.mountEditor === 'function') { clearInterval(_t); init(); }"
+        "  }, 50); }"
+        "})();"
+    )
+
+    return font_size_preamble + init_body
+
+
+def _editor_urls() -> dict:
+    """Extract editor API URLs and asset paths."""
+    import os
+    from quart import url_for as qurl, current_app
+
+    asset_url_fn = current_app.jinja_env.globals.get("asset_url", lambda p: "")
+    return {
+        "upload_image": qurl("blog.editor_api.upload_image"),
+        "upload_media": qurl("blog.editor_api.upload_media"),
+        "upload_file": qurl("blog.editor_api.upload_file"),
+        "oembed": qurl("blog.editor_api.oembed_proxy"),
+        "snippets": qurl("blog.editor_api.list_snippets"),
+        "unsplash_key": os.environ.get("UNSPLASH_ACCESS_KEY", ""),
+        "css_href": asset_url_fn("scripts/editor.css"),
+        "js_src": asset_url_fn("scripts/editor.js"),
+        "sx_editor_js_src": asset_url_fn("scripts/sx-editor.js"),
+    }
+
+
+def _h_editor_data(**kw) -> dict:
+    """New post editor — return data for ~blog-editor-content."""
+    from shared.browser.app.csrf import generate_csrf_token
+
+    urls = _editor_urls()
+    csrf = generate_csrf_token()
+    init_js = _editor_init_js(urls, form_id="post-new-form", has_initial_json=False)
+
+    return {
+        "csrf": csrf,
+        "title-placeholder": "Post title...",
+        "create-label": "Create Post",
+        "css-href": urls["css_href"],
+        "js-src": urls["js_src"],
+        "sx-editor-js-src": urls["sx_editor_js_src"],
+        "init-js": init_js,
+    }
+
+
+def _h_editor_page_data(**kw) -> dict:
+    """New page editor — return data for ~blog-editor-content."""
+    from shared.browser.app.csrf import generate_csrf_token
+
+    urls = _editor_urls()
+    csrf = generate_csrf_token()
+    init_js = _editor_init_js(urls, form_id="post-new-form", has_initial_json=False)
+
+    return {
+        "csrf": csrf,
+        "title-placeholder": "Page title...",
+        "create-label": "Create Page",
+        "css-href": urls["css_href"],
+        "js-src": urls["js_src"],
+        "sx-editor-js-src": urls["sx_editor_js_src"],
+        "init-js": init_js,
+    }
+
+
+# ---------------------------------------------------------------------------
+# Post admin helpers
+# ---------------------------------------------------------------------------
+
+async def _h_post_admin_data(slug=None, **kw) -> dict:
+    await _ensure_post_data(slug)
+    return {}
+
+
+# ---------------------------------------------------------------------------
+# Data introspection
+# ---------------------------------------------------------------------------
+
+def _extract_model_data(obj, depth=0, max_depth=2) -> dict:
+    """Recursively extract ORM model data into a nested dict for .sx rendering."""
+    from markupsafe import escape as esc
+
+    # Scalar columns
+    columns = []
+    for col in obj.__mapper__.columns:
+        key = col.key
+        if key == "_sa_instance_state":
+            continue
+        val = getattr(obj, key, None)
+        if val is None:
+            columns.append({"key": str(key), "value": "", "type": "nil"})
+        elif hasattr(val, "isoformat"):
+            columns.append({"key": str(key), "value": str(esc(val.isoformat())), "type": "date"})
+        elif isinstance(val, str):
+            columns.append({"key": str(key), "value": str(esc(val)), "type": "str"})
+        else:
+            columns.append({"key": str(key), "value": str(esc(str(val))), "type": "other"})
+
+    # Relationships
+    relationships = []
+    for rel in obj.__mapper__.relationships:
+        rel_name = rel.key
+        loaded = rel_name in obj.__dict__
+        value = getattr(obj, rel_name, None) if loaded else None
+        cardinality = "many" if rel.uselist else "one"
+        cls_name = rel.mapper.class_.__name__
+
+        rel_data: dict[str, Any] = {
+            "name": rel_name,
+            "cardinality": cardinality,
+            "class_name": cls_name,
+            "loaded": loaded,
+            "value": None,
+        }
+
+        if value is None:
+            pass  # value stays None
+        elif rel.uselist:
+            items_list = list(value) if value else []
+            val_data: dict[str, Any] = {"is_list": True, "count": len(items_list)}
+            if items_list and depth < max_depth:
+                items = []
+                for i, it in enumerate(items_list, 1):
+                    summary = _obj_summary(it)
+                    children = _extract_model_data(it, depth + 1, max_depth) if depth < max_depth else None
+                    items.append({"index": i, "summary": summary, "children": children})
+                val_data["items"] = items
+            rel_data["value"] = val_data
+        else:
+            child = value
+            summary = _obj_summary(child)
+            children = _extract_model_data(child, depth + 1, max_depth) if depth < max_depth else None
+            rel_data["value"] = {"is_list": False, "summary": summary, "children": children}
+
+        relationships.append(rel_data)
+
+    return {"columns": columns, "relationships": relationships}
+
+
+def _obj_summary(obj) -> str:
+    """Build a summary string for an ORM object."""
+    from markupsafe import escape as esc
+    ident_parts = []
+    for k in ("id", "ghost_id", "uuid", "slug", "name", "title"):
+        if k in obj.__mapper__.c:
+            v = getattr(obj, k, "")
+            ident_parts.append(f"{k}={v}")
+    return str(esc(" \u2022 ".join(ident_parts) if ident_parts else str(obj)))
+
+
+async def _h_post_data_data(slug=None, **kw) -> dict:
+    await _ensure_post_data(slug)
+    from quart import g
+
+    original_post = getattr(g, "post_data", {}).get("original_post")
+    if original_post is None:
+        return {"tablename": None, "model-data": None}
+
+    tablename = getattr(original_post, "__tablename__", "?")
+    model_data = _extract_model_data(original_post, 0, 2)
+
+    return {"tablename": tablename, "model-data": model_data}
+
+
+# ---------------------------------------------------------------------------
+# Preview content
+# ---------------------------------------------------------------------------
+
+async def _h_post_preview_data(slug=None, **kw) -> dict:
+    await _ensure_post_data(slug)
+    from quart import g
+    from shared.services.registry import services
+    from shared.sx.helpers import SxExpr
+
+    preview = await services.blog_page.preview_data(g.s)
+
+    return {
+        "sx-pretty": SxExpr(preview["sx_pretty"]) if preview.get("sx_pretty") else None,
+        "json-pretty": SxExpr(preview["json_pretty"]) if preview.get("json_pretty") else None,
+        "sx-rendered": preview.get("sx_rendered") or None,
+        "lex-rendered": preview.get("lex_rendered") or None,
+    }
+
+
+# ---------------------------------------------------------------------------
+# Entries browser
+# ---------------------------------------------------------------------------
+
+def _extract_associated_entries_data(all_calendars, associated_entry_ids, post_slug: str) -> list:
+    """Extract associated entry data for .sx rendering."""
+    from quart import url_for as qurl
+    from shared.utils import host_url
+
+    entries = []
+    for calendar in all_calendars:
+        cal_entries = getattr(calendar, "entries", []) or []
+        cal_name = getattr(calendar, "name", "")
+        cal_post = getattr(calendar, "post", None)
+        cal_fi = getattr(cal_post, "feature_image", None) if cal_post else None
+        cal_title = getattr(cal_post, "title", "") if cal_post else ""
+
+        for entry in cal_entries:
+            e_id = getattr(entry, "id", None)
+            if e_id not in associated_entry_ids:
+                continue
+            if getattr(entry, "deleted_at", None) is not None:
+                continue
+
+            e_name = getattr(entry, "name", "")
+            e_start = getattr(entry, "start_at", None)
+            e_end = getattr(entry, "end_at", None)
+
+            toggle_url = host_url(qurl("blog.post.admin.toggle_entry",
+                                       slug=post_slug, entry_id=e_id))
+
+            date_str = e_start.strftime("%A, %B %d, %Y at %H:%M") if e_start else ""
+            if e_end:
+                date_str += f" \u2013 {e_end.strftime('%H:%M')}"
+
+            entries.append({
+                "name": e_name,
+                "confirm_text": f"This will remove {e_name} from this post",
+                "toggle_url": toggle_url,
+                "cal_image": cal_fi or "",
+                "cal_title": cal_title,
+                "date_str": f"{cal_name} \u2022 {date_str}",
+            })
+
+    return entries
+
+
+def _extract_calendar_browser_data(all_calendars, post_slug: str) -> list:
+    """Extract calendar browser data for .sx rendering."""
+    from quart import url_for as qurl
+    from shared.utils import host_url
+
+    calendars = []
+    for cal in all_calendars:
+        cal_post = getattr(cal, "post", None)
+        cal_fi = getattr(cal_post, "feature_image", None) if cal_post else None
+        cal_title = getattr(cal_post, "title", "") if cal_post else ""
+        cal_name = getattr(cal, "name", "")
+        view_url = host_url(qurl("blog.post.admin.calendar_view",
+                                  slug=post_slug, calendar_id=cal.id))
+        calendars.append({
+            "name": cal_name,
+            "title": cal_title,
+            "image": cal_fi or "",
+            "view_url": view_url,
+        })
+    return calendars
+
+
+async def _h_post_entries_data(slug=None, **kw) -> dict:
+    await _ensure_post_data(slug)
+    from quart import g
+    from sqlalchemy import select
+    from shared.models.calendars import Calendar
+    from shared.browser.app.csrf import generate_csrf_token
+    from bp.post.services.entry_associations import get_post_entry_ids
+
+    post_id = g.post_data["post"]["id"]
+    post_slug = g.post_data["post"]["slug"]
+    associated_entry_ids = await get_post_entry_ids(post_id)
+    result = await g.s.execute(
+        select(Calendar)
+        .where(Calendar.deleted_at.is_(None))
+        .order_by(Calendar.name.asc())
+    )
+    all_calendars = result.scalars().all()
+    for calendar in all_calendars:
+        await g.s.refresh(calendar, ["entries", "post"])
+
+    csrf = generate_csrf_token()
+    entries = _extract_associated_entries_data(
+        all_calendars, associated_entry_ids, post_slug)
+    calendars = _extract_calendar_browser_data(all_calendars, post_slug)
+
+    return {"entries": entries, "calendars": calendars, "csrf": csrf}
+
+
+# ---------------------------------------------------------------------------
+# Settings form
+# ---------------------------------------------------------------------------
+
+async def _h_post_settings_data(slug=None, **kw) -> dict:
+    await _ensure_post_data(slug)
+    from quart import g, request
+    from models.ghost_content import Post
+    from sqlalchemy import select as sa_select
+    from sqlalchemy.orm import selectinload
+    from shared.browser.app.csrf import generate_csrf_token
+    from bp.post.admin.routes import _post_to_edit_dict
+
+    post_id = g.post_data["post"]["id"]
+    post = (await g.s.execute(
+        sa_select(Post)
+        .where(Post.id == post_id)
+        .options(selectinload(Post.tags))
+    )).scalar_one_or_none()
+    ghost_post = _post_to_edit_dict(post) if post else {}
+    save_success = request.args.get("saved") == "1"
+    csrf = generate_csrf_token()
+
+    p = g.post_data.get("post", {}) if hasattr(g, "post_data") else {}
+    is_page = p.get("is_page", False)
+    gp = ghost_post
+
+    # Extract tag names
+    tags = gp.get("tags") or []
+    if tags:
+        tag_names = ", ".join(
+            getattr(t, "name", t.get("name", "") if isinstance(t, dict) else str(t))
+            for t in tags
+        )
+    else:
+        tag_names = ""
+
+    # Published at — trim to datetime-local format
+    pub_at = gp.get("published_at") or ""
+    pub_at_val = pub_at[:16] if pub_at else ""
+
+    return {
+        "csrf": csrf,
+        "updated-at": gp.get("updated_at") or "",
+        "is-page": is_page,
+        "save-success": save_success,
+        "settings-slug": gp.get("slug") or "",
+        "published-at": pub_at_val,
+        "featured": bool(gp.get("featured")),
+        "visibility": gp.get("visibility") or "public",
+        "email-only": bool(gp.get("email_only")),
+        "tags": tag_names,
+        "feature-image-alt": gp.get("feature_image_alt") or "",
+        "meta-title": gp.get("meta_title") or "",
+        "meta-description": gp.get("meta_description") or "",
+        "canonical-url": gp.get("canonical_url") or "",
+        "og-title": gp.get("og_title") or "",
+        "og-description": gp.get("og_description") or "",
+        "og-image": gp.get("og_image") or "",
+        "twitter-title": gp.get("twitter_title") or "",
+        "twitter-description": gp.get("twitter_description") or "",
+        "twitter-image": gp.get("twitter_image") or "",
+        "custom-template": gp.get("custom_template") or "",
+    }
+
+
+# ---------------------------------------------------------------------------
+# Post edit content
+# ---------------------------------------------------------------------------
+
+def _extract_newsletter_options(newsletters) -> list:
+    """Extract newsletter data for .sx rendering."""
+    return [{"slug": getattr(nl, "slug", ""),
+             "name": getattr(nl, "name", "")} for nl in newsletters]
+
+
+def _extract_footer_badges(ghost_post: dict, post: dict, save_success: bool,
+                           publish_requested: bool, already_emailed: bool) -> list:
+    """Extract footer badge data for .sx rendering."""
+    badges = []
+    if save_success:
+        badges.append({"cls": "text-[14px] text-green-600", "text": "Saved."})
+    if publish_requested:
+        badges.append({"cls": "text-[14px] text-blue-600",
+                       "text": "Publish requested \u2014 an admin will review."})
+    if post.get("publish_requested"):
+        badges.append({"cls": "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800",
+                       "text": "Publish requested"})
+    if already_emailed:
+        nl_name = ""
+        newsletter = ghost_post.get("newsletter")
+        if newsletter:
+            nl_name = (getattr(newsletter, "name", "")
+                       if not isinstance(newsletter, dict)
+                       else newsletter.get("name", ""))
+        suffix = f" to {nl_name}" if nl_name else ""
+        badges.append({"cls": "inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800",
+                       "text": f"Emailed{suffix}"})
+    return badges
+
+
+async def _h_post_edit_data(slug=None, **kw) -> dict:
+    await _ensure_post_data(slug)
+    from quart import g, request as qrequest
+    from models.ghost_content import Post
+    from sqlalchemy import select as sa_select
+    from sqlalchemy.orm import selectinload
+    from shared.infrastructure.data_client import fetch_data
+    from shared.browser.app.csrf import generate_csrf_token
+    from bp.post.admin.routes import _post_to_edit_dict
+
+    post_id = g.post_data["post"]["id"]
+    db_post = (await g.s.execute(
+        sa_select(Post)
+        .where(Post.id == post_id)
+        .options(selectinload(Post.tags))
+    )).scalar_one_or_none()
+    ghost_post = _post_to_edit_dict(db_post) if db_post else {}
+    save_success = qrequest.args.get("saved") == "1"
+    save_error = qrequest.args.get("error", "")
+    raw_newsletters = await fetch_data("account", "newsletters", required=False) or []
+    from types import SimpleNamespace
+    newsletters = [SimpleNamespace(**nl) for nl in raw_newsletters]
+
+    csrf = generate_csrf_token()
+    urls = _editor_urls()
+
+    post = g.post_data.get("post", {}) if hasattr(g, "post_data") else {}
+    is_page = post.get("is_page", False)
+
+    feature_image = ghost_post.get("feature_image") or ""
+    feature_image_caption = ghost_post.get("feature_image_caption") or ""
+    title_val = ghost_post.get("title") or ""
+    excerpt_val = ghost_post.get("custom_excerpt") or ""
+    updated_at = ghost_post.get("updated_at") or ""
+    status = ghost_post.get("status") or "draft"
+    lexical_json = ghost_post.get("lexical") or '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}'
+    sx_content = ghost_post.get("sx_content") or ""
+    has_sx = bool(sx_content)
+
+    already_emailed = bool(ghost_post and ghost_post.get("email") and
+                           (ghost_post["email"] if isinstance(ghost_post["email"], dict) else {}).get("status"))
+    email_obj = ghost_post.get("email")
+    if email_obj and not isinstance(email_obj, dict):
+        already_emailed = bool(getattr(email_obj, "status", None))
+
+    title_placeholder = "Page title..." if is_page else "Post title..."
+
+    # Return newsletter data as list of dicts (composed in SX)
+    nl_options = _extract_newsletter_options(newsletters)
+
+    # Return footer badge data as list of dicts (composed in SX)
+    publish_requested = bool(qrequest.args.get("publish_requested")) if hasattr(qrequest, 'args') else False
+    badges = _extract_footer_badges(ghost_post, post, save_success,
+                                     publish_requested, already_emailed)
+
+    init_js = _editor_init_js(urls, form_id="post-edit-form", has_initial_json=True)
+
+    return {
+        "csrf": csrf,
+        "updated-at": str(updated_at),
+        "title-val": title_val,
+        "excerpt-val": excerpt_val,
+        "feature-image": feature_image,
+        "feature-image-caption": feature_image_caption,
+        "sx-content-val": sx_content,
+        "lexical-json": lexical_json,
+        "has-sx": has_sx,
+        "title-placeholder": title_placeholder,
+        "status": status,
+        "already-emailed": already_emailed,
+        "newsletters": nl_options,
+        "badges": badges,
+        "css-href": urls["css_href"],
+        "js-src": urls["js_src"],
+        "sx-editor-js-src": urls["sx_editor_js_src"],
+        "init-js": init_js,
+        "save-error": save_error or None,
+    }

blog/sxc/pages/layouts.py

@@ -0,0 +1,19 @@
+"""Blog layout registration — all layouts delegate to .sx defcomps."""
+from __future__ import annotations
+
+
+def _register_blog_layouts() -> None:
+    from shared.sx.layouts import register_sx_layout
+    register_sx_layout("blog", "blog-layout-full", "blog-layout-oob")
+    register_sx_layout("blog-settings", "blog-settings-layout-full",
+                       "blog-settings-layout-oob", "blog-settings-layout-mobile")
+    register_sx_layout("blog-cache", "blog-cache-layout-full",
+                       "blog-cache-layout-oob")
+    register_sx_layout("blog-snippets", "blog-snippets-layout-full",
+                       "blog-snippets-layout-oob")
+    register_sx_layout("blog-menu-items", "blog-menu-items-layout-full",
+                       "blog-menu-items-layout-oob")
+    register_sx_layout("blog-tag-groups", "blog-tag-groups-layout-full",
+                       "blog-tag-groups-layout-oob")
+    register_sx_layout("blog-tag-group-edit", "blog-tag-group-edit-layout-full",
+                       "blog-tag-group-edit-layout-oob")

blog/sxc/pages/renders.py

@@ -0,0 +1,25 @@
+"""Blog editor panel rendering."""
+from __future__ import annotations
+
+
+def render_editor_panel(save_error: str | None = None, is_page: bool = False) -> str:
+    """Build the WYSIWYG editor panel for new post/page creation."""
+    from shared.browser.app.csrf import generate_csrf_token
+    from shared.sx.helpers import sx_call
+    from .helpers import _editor_urls, _editor_init_js
+
+    urls = _editor_urls()
+    csrf = generate_csrf_token()
+    title_placeholder = "Page title..." if is_page else "Post title..."
+    create_label = "Create Page" if is_page else "Create Post"
+    init_js = _editor_init_js(urls, form_id="post-new-form", has_initial_json=False)
+
+    return sx_call("blog-editor-content",
+        csrf=csrf,
+        title_placeholder=title_placeholder,
+        create_label=create_label,
+        css_href=urls["css_href"],
+        js_src=urls["js_src"],
+        sx_editor_js_src=urls["sx_editor_js_src"],
+        init_js=init_js,
+        save_error=save_error or None)

blog/tests/test_lexical_to_sx.py

@@ -167,7 +167,7 @@ class TestCards:
         result = lexical_to_sx(_doc({
             "type": "image", "src": "photo.jpg", "alt": "test"
         }))
-        assert '(~kg-image :src "photo.jpg" :alt "test")' == result
+        assert '(~kg_cards/kg-image :src "photo.jpg" :alt "test")' == result
 
     def test_image_wide_with_caption(self):
         result = lexical_to_sx(_doc({
@@ -189,7 +189,7 @@ class TestCards:
             "type": "bookmark", "url": "https://example.com",
             "metadata": {"title": "Example", "description": "A site"}
         }))
-        assert "(~kg-bookmark " in result
+        assert "(~kg_cards/kg-bookmark " in result
         assert ':url "https://example.com"' in result
         assert ':title "Example"' in result
 
@@ -199,7 +199,7 @@ class TestCards:
             "calloutEmoji": "💡",
             "children": [_text("Note")]
         }))
-        assert "(~kg-callout " in result
+        assert "(~kg_cards/kg-callout " in result
         assert ':color "blue"' in result
 
     def test_button(self):
@@ -207,7 +207,7 @@ class TestCards:
             "type": "button", "buttonText": "Click",
             "buttonUrl": "https://example.com"
         }))
-        assert "(~kg-button " in result
+        assert "(~kg_cards/kg-button " in result
         assert ':text "Click"' in result
 
     def test_toggle(self):
@@ -215,28 +215,28 @@ class TestCards:
             "type": "toggle", "heading": "FAQ",
             "children": [_text("Answer")]
         }))
-        assert "(~kg-toggle " in result
+        assert "(~kg_cards/kg-toggle " in result
         assert ':heading "FAQ"' in result
 
     def test_html(self):
         result = lexical_to_sx(_doc({
             "type": "html", "html": "<div>custom</div>"
         }))
-        assert result == '(~kg-html (div "custom"))'
+        assert result == '(~kg_cards/kg-html (div "custom"))'
 
     def test_embed(self):
         result = lexical_to_sx(_doc({
             "type": "embed", "html": "<iframe></iframe>",
             "caption": "Video"
         }))
-        assert "(~kg-embed " in result
+        assert "(~kg_cards/kg-embed " in result
         assert ':caption "Video"' in result
 
     def test_markdown(self):
         result = lexical_to_sx(_doc({
             "type": "markdown", "markdown": "**bold** text"
         }))
-        assert result.startswith("(~kg-md ")
+        assert result.startswith("(~kg_cards/kg-md ")
         assert "(p " in result
         assert "(strong " in result
 
@@ -244,14 +244,14 @@ class TestCards:
         result = lexical_to_sx(_doc({
             "type": "video", "src": "v.mp4", "cardWidth": "wide"
         }))
-        assert "(~kg-video " in result
+        assert "(~kg_cards/kg-video " in result
         assert ':width "wide"' in result
 
     def test_audio(self):
         result = lexical_to_sx(_doc({
             "type": "audio", "src": "s.mp3", "title": "Song", "duration": 195
         }))
-        assert "(~kg-audio " in result
+        assert "(~kg_cards/kg-audio " in result
         assert ':duration "3:15"' in result
 
     def test_file(self):
@@ -259,13 +259,13 @@ class TestCards:
             "type": "file", "src": "f.pdf", "fileName": "doc.pdf",
             "fileSize": 2100000
         }))
-        assert "(~kg-file " in result
+        assert "(~kg_cards/kg-file " in result
         assert ':filename "doc.pdf"' in result
         assert "MB" in result
 
     def test_paywall(self):
         result = lexical_to_sx(_doc({"type": "paywall"}))
-        assert result == "(~kg-paywall)"
+        assert result == "(~kg_cards/kg-paywall)"
 
 
 # ---------------------------------------------------------------------------

cart/bp/cart/global_routes.py

@@ -151,7 +151,7 @@ def register(url_prefix: str) -> Blueprint:
             page_config = await resolve_page_config(g.s, cart, calendar_entries, tickets)
         except ValueError as e:
             from shared.sx.page import get_template_context
-            from sxc.pages import render_checkout_error_page
+            from sxc.pages.renders import render_checkout_error_page
             tctx = await get_template_context()
             html = await render_checkout_error_page(tctx, error=str(e))
             return await make_response(html, 400)
@@ -208,7 +208,7 @@ def register(url_prefix: str) -> Blueprint:
 
         if not hosted_url:
             from shared.sx.page import get_template_context
-            from sxc.pages import render_checkout_error_page
+            from sxc.pages.renders import render_checkout_error_page
             tctx = await get_template_context()
             html = await render_checkout_error_page(tctx, error="No hosted checkout URL returned from SumUp.")
             return await make_response(html, 500)

cart/bp/cart/page_routes.py

@@ -73,7 +73,7 @@ def register(url_prefix: str) -> Blueprint:
 
         if not hosted_url:
             from shared.sx.page import get_template_context
-            from sxc.pages import render_checkout_error_page
+            from sxc.pages.renders import render_checkout_error_page
             tctx = await get_template_context()
             html = await render_checkout_error_page(tctx, error="No hosted checkout URL returned from SumUp.")
             return await make_response(html, 500)

cart/bp/order/routes.py

@@ -57,7 +57,7 @@ def register() -> Blueprint:
         if not order:
             return await make_response("Order not found", 404)
         from shared.sx.page import get_template_context
-        from sxc.pages import render_order_page, render_order_oob
+        from sxc.pages.renders import render_order_page, render_order_oob
 
         ctx = await get_template_context()
         calendar_entries = ctx.get("calendar_entries")
@@ -122,7 +122,7 @@ def register() -> Blueprint:
 
         if not hosted_url:
             from shared.sx.page import get_template_context
-            from sxc.pages import render_checkout_error_page
+            from sxc.pages.renders import render_checkout_error_page
             tctx = await get_template_context()
             html = await render_checkout_error_page(tctx, error="No hosted checkout URL returned from SumUp when trying to reopen payment.", order=order)
             return await make_response(html, 500)

cart/bp/orders/routes.py

@@ -138,7 +138,7 @@ def register(url_prefix: str) -> Blueprint:
         orders = result.scalars().all()
 
         from shared.sx.page import get_template_context
-        from sxc.pages import (
+        from sxc.pages.renders import (
             render_orders_page,
             render_orders_rows,
             render_orders_oob,
@@ -154,7 +154,7 @@ def register(url_prefix: str) -> Blueprint:
             )
             resp = await make_response(html)
         elif page > 1:
-            sx_src = await render_orders_rows(
+            sx_src = render_orders_rows(
                 ctx, orders, page, total_pages, url_for, qs_fn,
             )
             resp = sx_response(sx_src)

cart/bp/page_admin/routes.py

@@ -47,9 +47,9 @@ def register():
         g.page_config = SimpleNamespace(**raw_pc) if raw_pc else None
 
         from shared.sx.page import get_template_context
-        from sxc.pages import render_cart_payments_panel
+        from sxc.pages.renders import render_cart_payments_panel
         ctx = await get_template_context()
-        html = await render_cart_payments_panel(ctx)
+        html = render_cart_payments_panel(ctx)
         return sx_response(html)
 
     return bp

cart/services/cart_page.py

@@ -172,6 +172,45 @@ class CartPageService:
             "summary": summary,
         }
 
+    async def admin_data(self, session, **kw):
+        """Populate post context for cart-admin layout headers."""
+        from quart import g
+        from shared.infrastructure.fragments import fetch_fragments
+
+        post = g.page_post
+        slug = post.slug if post else ""
+        post_id = post.id if post else None
+
+        # Fetch container_nav for post header
+        container_nav = ""
+        if post_id:
+            nav_params = {
+                "container_type": "page",
+                "container_id": str(post_id),
+                "post_slug": slug,
+            }
+            events_nav, market_nav = await fetch_fragments([
+                ("events", "container-nav", nav_params),
+                ("market", "container-nav", nav_params),
+            ], required=False)
+            container_nav = events_nav + market_nav
+
+        return {
+            "post": {
+                "id": post_id,
+                "slug": slug,
+                "title": (post.title if post else "")[:160],
+                "feature_image": getattr(post, "feature_image", None),
+            },
+            "container_nav": container_nav,
+        }
+
+    async def payments_admin_data(self, session, **kw):
+        """Admin data + payments data combined for cart-payments page."""
+        admin = await self.admin_data(session)
+        payments = await self.payments_data(session)
+        return {**admin, **payments}
+
     async def payments_data(self, session, **kw):
         from shared.sx.page import get_template_context
 

cart/sx/calendar.sx

@@ -1,12 +1,12 @@
 ;; Cart calendar entry components
 
-(defcomp ~cart-cal-entry (&key name date-str cost)
+(defcomp ~calendar/cal-entry (&key (name :as string) (date-str :as string) (cost :as string))
   (li :class "flex items-start justify-between text-sm"
     (div (div :class "font-medium" name)
       (div :class "text-xs text-stone-500" date-str))
     (div :class "ml-4 font-medium" cost)))
 
-(defcomp ~cart-cal-section (&key items)
+(defcomp ~calendar/cal-section (&key items)
   (div :class "mt-6 border-t border-stone-200 pt-4"
     (h2 :class "text-base font-semibold mb-2" "Calendar bookings")
     (ul :class "space-y-2" items)))

cart/sx/handlers/account-nav-item.sx

@@ -1,8 +1,9 @@
 ;; Cart account-nav-item fragment handler
+;; returns: sx
 ;;
 ;; Renders the "orders" link for the account dashboard nav.
 
 (defhandler account-nav-item (&key)
-  (~account-nav-item
+  (~shared:fragments/account-nav-item
     :href (app-url "cart" "/orders/")
     :label "orders"))

cart/sx/handlers/cart-mini.sx

@@ -1,4 +1,5 @@
 ;; Cart cart-mini fragment handler
+;; returns: sx
 ;;
 ;; Renders the cart icon with badge (or logo when empty).
 
@@ -9,7 +10,7 @@
         (count (+ (or (get summary "count") 0)
                   (or (get summary "calendar_count") 0)
                   (or (get summary "ticket_count") 0))))
-    (~cart-mini
+    (~shared:fragments/cart-mini
       :cart-count count
       :blog-url (app-url "blog" "")
       :cart-url (app-url "cart" "")

cart/sx/header.sx

@@ -1,9 +1,14 @@
 ;; Cart header components
 
-(defcomp ~cart-page-label-img (&key src)
+(defcomp ~header/page-label-img (&key src)
   (img :src src :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0"))
 
-(defcomp ~cart-all-carts-link (&key href)
+(defcomp ~header/page-label (&key feature-image title)
+  (<> (when feature-image
+        (~header/page-label-img :src feature-image))
+    (span title)))
+
+(defcomp ~header/all-carts-link (&key href)
   (a :href href :class "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
     (i :class "fa fa-arrow-left text-xs" :aria-hidden "true") "All carts"))
 

cart/sx/items.sx

@@ -1,29 +1,29 @@
 ;; Cart item components
 
-(defcomp ~cart-item-img (&key src alt)
+(defcomp ~items/img (&key (src :as string) (alt :as string))
   (img :src src :alt alt :class "w-24 h-24 sm:w-32 sm:h-28 object-cover rounded-xl border border-stone-100" :loading "lazy"))
 
-(defcomp ~cart-item-price (&key text)
+(defcomp ~items/price (&key (text :as string))
   (p :class "text-sm sm:text-base font-semibold text-stone-900" text))
 
-(defcomp ~cart-item-price-was (&key text)
+(defcomp ~items/price-was (&key (text :as string))
   (p :class "text-xs text-stone-400 line-through" text))
 
-(defcomp ~cart-item-no-price ()
+(defcomp ~items/no-price ()
   (p :class "text-xs text-stone-500" "No price"))
 
-(defcomp ~cart-item-deleted ()
+(defcomp ~items/deleted ()
   (p :class "mt-2 inline-flex items-center gap-1 text-[0.65rem] sm:text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2 py-0.5"
     (i :class "fa-solid fa-triangle-exclamation text-[0.6rem]" :aria-hidden "true")
     " This item is no longer available or price has changed"))
 
-(defcomp ~cart-item-brand (&key brand)
+(defcomp ~items/brand (&key (brand :as string))
   (p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" brand))
 
-(defcomp ~cart-item-line-total (&key text)
+(defcomp ~items/line-total (&key (text :as string))
   (p :class "text-sm sm:text-base font-semibold text-stone-900" text))
 
-(defcomp ~cart-item (&key id img prod-url title brand deleted price qty-url csrf minus qty plus line-total)
+(defcomp ~items/index (&key (id :as string) img (prod-url :as string) (title :as string) brand deleted price (qty-url :as string) (csrf :as string) (minus :as string) (qty :as string) (plus :as string) line-total)
   (article :id id :class "flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4 md:p-5"
     (div :class "w-full sm:w-32 shrink-0 flex justify-center sm:block" (when img img))
     (div :class "flex-1 min-w-0"
@@ -47,14 +47,14 @@
             (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+")))
         (div :class "flex items-center justify-between sm:justify-end gap-3" (when line-total line-total))))))
 
-(defcomp ~cart-page-panel (&key items cal tickets summary)
+(defcomp ~items/page-panel (&key items cal tickets summary)
   (div :class "max-w-full px-3 py-3 space-y-3"
     (div :id "cart"
       (div (section :class "space-y-3 sm:space-y-4" items cal tickets)
         summary))))
 
 ;; Assembled cart item from serialized data — replaces Python _cart_item_sx
-(defcomp ~cart-item-from-data (&key item)
+(defcomp ~items/from-data (&key (item :as dict))
   (let* ((slug (or (get item "slug") ""))
          (title (or (get item "title") ""))
          (image (get item "image"))
@@ -71,48 +71,48 @@
          (qty-url (or (get item "qty_url") ""))
          (csrf (csrf-token))
          (line-total (when unit-price (* unit-price quantity))))
-    (~cart-item
+    (~items/index
       :id (str "cart-item-" slug)
       :img (if image
-             (~cart-item-img :src image :alt title)
-             (~img-or-placeholder :src nil
+             (~items/img :src image :alt title)
+             (~shared:misc/img-or-placeholder :src nil
                :size-cls "w-24 h-24 sm:w-32 sm:h-28 rounded-xl border border-dashed border-stone-300"
                :placeholder-text "No image"))
       :prod-url prod-url
       :title title
-      :brand (when brand (~cart-item-brand :brand brand))
-      :deleted (when is-deleted (~cart-item-deleted))
+      :brand (when brand (~items/brand :brand brand))
+      :deleted (when is-deleted (~items/deleted))
       :price (if unit-price
                (<>
-                 (~cart-item-price :text (str symbol (format-decimal unit-price 2)))
+                 (~items/price :text (str symbol (format-decimal unit-price 2)))
                  (when (and special-price (!= special-price regular-price))
-                   (~cart-item-price-was :text (str symbol (format-decimal regular-price 2)))))
-               (~cart-item-no-price))
+                   (~items/price-was :text (str symbol (format-decimal regular-price 2)))))
+               (~items/no-price))
       :qty-url qty-url :csrf csrf
       :minus (str (- quantity 1))
       :qty (str quantity)
       :plus (str (+ quantity 1))
       :line-total (when line-total
-        (~cart-item-line-total :text (str "Line total: " symbol (format-decimal line-total 2)))))))
+        (~items/line-total :text (str "Line total: " symbol (format-decimal line-total 2)))))))
 
 ;; Assembled calendar entries section — replaces Python _calendar_entries_sx
-(defcomp ~cart-cal-section-from-data (&key entries)
+(defcomp ~items/cal-section-from-data (&key (entries :as list))
   (when (not (empty? entries))
-    (~cart-cal-section
+    (~calendar/cal-section
       :items (map (lambda (e)
         (let* ((name (or (get e "name") ""))
                (date-str (or (get e "date_str") "")))
-          (~cart-cal-entry
+          (~calendar/cal-entry
             :name name :date-str date-str
             :cost (str "\u00a3" (format-decimal (or (get e "cost") 0) 2)))))
         entries))))
 
 ;; Assembled ticket groups section — replaces Python _ticket_groups_sx
-(defcomp ~cart-tickets-section-from-data (&key ticket-groups)
+(defcomp ~items/tickets-section-from-data (&key (ticket-groups :as list))
   (when (not (empty? ticket-groups))
     (let* ((csrf (csrf-token))
            (qty-url (url-for "cart_global.update_ticket_quantity")))
-      (~cart-tickets-section
+      (~tickets/section
         :items (map (lambda (tg)
           (let* ((name (or (get tg "entry_name") ""))
                  (tt-name (get tg "ticket_type_name"))
@@ -122,14 +122,14 @@
                  (entry-id (str (or (get tg "entry_id") "")))
                  (tt-id (get tg "ticket_type_id"))
                  (date-str (or (get tg "date_str") "")))
-            (~cart-ticket-article
+            (~tickets/article
               :name name
-              :type-name (when tt-name (~cart-ticket-type-name :name tt-name))
+              :type-name (when tt-name (~tickets/type-name :name tt-name))
               :date-str date-str
               :price (str "\u00a3" (format-decimal price 2))
               :qty-url qty-url :csrf csrf
               :entry-id entry-id
-              :type-hidden (when tt-id (~cart-ticket-type-hidden :value (str tt-id)))
+              :type-hidden (when tt-id (~tickets/type-hidden :value (str tt-id)))
               :minus (str (max (- quantity 1) 0))
               :qty (str quantity)
               :plus (str (+ quantity 1))
@@ -137,29 +137,29 @@
           ticket-groups)))))
 
 ;; Assembled cart summary — replaces Python _cart_summary_sx
-(defcomp ~cart-summary-from-data (&key item-count grand-total symbol is-logged-in checkout-action login-href user-email)
-  (~cart-summary-panel
+(defcomp ~items/summary-from-data (&key (item-count :as number) (grand-total :as number) (symbol :as string) (is-logged-in :as boolean) (checkout-action :as string) (login-href :as string) (user-email :as string?))
+  (~summary/panel
     :item-count (str item-count)
     :subtotal (str symbol (format-decimal grand-total 2))
     :checkout (if is-logged-in
-      (~cart-checkout-form
+      (~summary/checkout-form
         :action checkout-action :csrf (csrf-token)
         :label (str " Checkout as " user-email))
-      (~cart-checkout-signin :href login-href))))
+      (~summary/checkout-signin :href login-href))))
 
 ;; Assembled page cart content — replaces Python _page_cart_main_panel_sx
-(defcomp ~cart-page-cart-content (&key cart-items cal-entries ticket-groups summary)
+(defcomp ~items/page-cart-content (&key (cart-items :as list?) (cal-entries :as list?) (ticket-groups :as list?) summary)
   (if (and (empty? (or cart-items (list)))
            (empty? (or cal-entries (list)))
            (empty? (or ticket-groups (list))))
     (div :class "max-w-full px-3 py-3 space-y-3"
       (div :id "cart"
         (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"
-          (~empty-state :icon "fa fa-shopping-cart" :message "Your cart is empty" :cls "text-center"))))
-    (~cart-page-panel
-      :items (map (lambda (item) (~cart-item-from-data :item item)) (or cart-items (list)))
+          (~shared:misc/empty-state :icon "fa fa-shopping-cart" :message "Your cart is empty" :cls "text-center"))))
+    (~items/page-panel
+      :items (map (lambda (item) (~items/from-data :item item)) (or cart-items (list)))
       :cal (when (not (empty? (or cal-entries (list))))
-        (~cart-cal-section-from-data :entries cal-entries))
+        (~items/cal-section-from-data :entries cal-entries))
       :tickets (when (not (empty? (or ticket-groups (list))))
-        (~cart-tickets-section-from-data :ticket-groups ticket-groups))
+        (~items/tickets-section-from-data :ticket-groups ticket-groups))
       :summary summary)))

cart/sx/layouts.sx

@@ -0,0 +1,136 @@
+;; Cart layout defcomps — fully self-contained via IO primitives.
+;; Registered via register_sx_layout in __init__.py.
+
+;; ---------------------------------------------------------------------------
+;; Auto-fetching cart page header macros
+;; ---------------------------------------------------------------------------
+
+(defmacro ~cart-page-header-auto (oob)
+  "Cart page header: cart-row + page-cart-row using (cart-page-ctx)."
+  (quasiquote
+    (let ((__cpctx (cart-page-ctx)))
+      (<>
+        (~shared:layout/menu-row-sx :id "cart-row" :level 1 :colour "sky"
+          :link-href (get __cpctx "cart-url")
+          :link-label "cart" :icon "fa fa-shopping-cart"
+          :child-id "cart-header-child")
+        (~shared:layout/header-child-sx :id "cart-header-child"
+          :inner (~shared:layout/menu-row-sx :id "page-cart-row" :level 2 :colour "sky"
+            :link-href (get __cpctx "page-cart-url")
+            :link-label-content (~header/page-label
+              :feature-image (get __cpctx "feature-image")
+              :title (get __cpctx "title"))
+            :nav (~header/all-carts-link :href (get __cpctx "cart-url"))
+            :oob (unquote oob)))))))
+
+(defmacro ~cart-page-header-oob ()
+  "Cart page OOB: individual oob rows."
+  (quasiquote
+    (let ((__cpctx (cart-page-ctx)))
+      (<>
+        (~shared:layout/menu-row-sx :id "page-cart-row" :level 2 :colour "sky"
+          :link-href (get __cpctx "page-cart-url")
+          :link-label-content (~header/page-label
+            :feature-image (get __cpctx "feature-image")
+            :title (get __cpctx "title"))
+          :nav (~header/all-carts-link :href (get __cpctx "cart-url"))
+          :oob true)
+        (~shared:layout/menu-row-sx :id "cart-row" :level 1 :colour "sky"
+          :link-href (get __cpctx "cart-url")
+          :link-label "cart" :icon "fa fa-shopping-cart"
+          :child-id "cart-header-child"
+          :oob true)))))
+
+;; ---------------------------------------------------------------------------
+;; cart-page layout: root + cart row + page-cart row
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/page-layout-full ()
+  (<> (~root-header-auto)
+    (~shared:layout/header-child-sx
+      :inner (~cart-page-header-auto))))
+
+(defcomp ~layouts/page-layout-oob ()
+  (<> (~cart-page-header-oob)
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; cart-admin layout: root + post header + admin header
+;; Uses (post-header-ctx) — requires :data handler to populate g._defpage_ctx
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/admin-layout-full (&key selected)
+  (<> (~root-header-auto)
+    (~shared:layout/header-child-sx
+      :inner (~post-header-auto nil))))
+
+(defcomp ~layouts/admin-layout-oob (&key selected)
+  (<> (~post-header-auto true)
+    (~shared:layout/oob-header-sx :parent-id "post-header-child"
+      :row (~post-admin-header-auto nil selected))
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; orders-within-cart: root + auth-simple + orders
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/orders-layout-full (&key list-url)
+  (<> (~root-header-auto)
+    (~shared:layout/header-child-sx
+      :inner (<> (~auth-header-row-simple-auto)
+               (~shared:layout/header-child-sx :id "auth-header-child"
+                 :inner (~shared:auth/orders-header-row :list-url list-url))))))
+
+(defcomp ~layouts/orders-layout-oob (&key list-url)
+  (<> (~auth-header-row-simple-auto true)
+    (~shared:layout/oob-header-sx
+      :parent-id "auth-header-child"
+      :row (~shared:auth/orders-header-row :list-url list-url))
+    (~root-header-auto true)))
+
+;; ---------------------------------------------------------------------------
+;; order-detail-within-cart: root + auth-simple + orders + order
+;; ---------------------------------------------------------------------------
+
+(defcomp ~layouts/order-detail-layout-full (&key list-url detail-url order-label)
+  (<> (~root-header-auto)
+    (~shared:layout/header-child-sx
+      :inner (<> (~auth-header-row-simple-auto)
+               (~shared:layout/header-child-sx :id "auth-header-child"
+                 :inner (<> (~shared:auth/orders-header-row :list-url list-url)
+                          (~shared:layout/header-child-sx :id "orders-header-child"
+                            :inner (~shared:layout/menu-row-sx :id "order-row" :level 3 :colour "sky"
+                                     :link-href detail-url
+                                     :link-label order-label
+                                     :icon "fa fa-gbp"))))))))
+
+(defcomp ~layouts/order-detail-layout-oob (&key detail-url order-label)
+  (<> (~shared:layout/oob-header-sx
+        :parent-id "orders-header-child"
+        :row (~shared:layout/menu-row-sx :id "order-row" :level 3 :colour "sky"
+               :link-href detail-url :link-label order-label
+               :icon "fa fa-gbp" :oob true))
+    (~root-header-auto true)))
+
+;; --- orders rows wrapper (for infinite scroll) ---
+
+(defcomp ~layouts/orders-rows (&key rows next-scroll)
+  (<> rows next-scroll))
+
+;; Composition defcomp — replaces Python loop in render_orders_rows
+(defcomp ~layouts/orders-rows-content (&key orders detail-url-prefix page total-pages next-url)
+  (~layouts/orders-rows
+    :rows (map (lambda (od)
+      (~shared:orders/row-pair :order od :detail-url-prefix detail-url-prefix))
+      (or orders (list)))
+    :next-scroll (if (< page total-pages)
+      (~shared:controls/infinite-scroll :url next-url :page page
+        :total-pages total-pages :id-prefix "orders" :colspan 5)
+      (~shared:orders/end-row))))
+
+;; Composition defcomp — replaces conditional composition in render_checkout_error_page
+(defcomp ~layouts/checkout-error-from-data (&key msg order-id back-url)
+  (~shared:orders/checkout-error-content
+    :msg msg
+    :order (when order-id (~shared:orders/checkout-error-order-id :oid (str "#" order-id)))
+    :back-url back-url))

cart/sx/overview.sx

@@ -1,20 +1,20 @@
 ;; Cart overview components
 
-(defcomp ~cart-badge (&key icon text)
+(defcomp ~overview/badge (&key (icon :as string) (text :as string))
   (span :class "inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-stone-100"
     (i :class icon :aria-hidden "true") text))
 
-(defcomp ~cart-badges-wrap (&key badges)
+(defcomp ~overview/badges-wrap (&key badges)
   (div :class "mt-1 flex flex-wrap gap-2 text-xs text-stone-600"
     badges))
 
-(defcomp ~cart-group-card-img (&key src alt)
+(defcomp ~overview/group-card-img (&key (src :as string) (alt :as string))
   (img :src src :alt alt :class "h-16 w-16 rounded-xl object-cover border border-stone-200 flex-shrink-0"))
 
-(defcomp ~cart-mp-subtitle (&key title)
+(defcomp ~overview/mp-subtitle (&key (title :as string))
   (p :class "text-xs text-stone-500 truncate" title))
 
-(defcomp ~cart-group-card (&key href img display-title subtitle badges total)
+(defcomp ~overview/group-card (&key (href :as string) img (display-title :as string) subtitle badges (total :as string))
   (a :href href :class "block rounded-2xl border border-stone-200 bg-white shadow-sm hover:shadow-md hover:border-stone-300 transition p-4 sm:p-5"
     (div :class "flex items-start gap-4"
       img
@@ -25,7 +25,7 @@
         (div :class "text-lg font-bold text-stone-900" total)
         (div :class "mt-1 text-xs text-emerald-700 font-medium" "View cart \u2192")))))
 
-(defcomp ~cart-orphan-card (&key badges total)
+(defcomp ~overview/orphan-card (&key badges (total :as string))
   (div :class "rounded-2xl border border-dashed border-amber-300 bg-amber-50/60 p-4 sm:p-5"
     (div :class "flex items-start gap-4"
       (div :class "h-16 w-16 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0"
@@ -36,17 +36,17 @@
       (div :class "text-right flex-shrink-0"
         (div :class "text-lg font-bold text-stone-900" total)))))
 
-(defcomp ~cart-overview-panel (&key cards)
+(defcomp ~overview/panel (&key cards)
   (div :class "max-w-full px-3 py-3 space-y-3"
     (div :class "space-y-4" cards)))
 
-(defcomp ~cart-empty ()
+(defcomp ~overview/empty ()
   (div :class "max-w-full px-3 py-3 space-y-3"
     (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"
-      (~empty-state :icon "fa fa-shopping-cart" :message "Your cart is empty" :cls "text-center"))))
+      (~shared:misc/empty-state :icon "fa fa-shopping-cart" :message "Your cart is empty" :cls "text-center"))))
 
 ;; Assembled page group card — replaces Python _page_group_card_sx
-(defcomp ~cart-page-group-card-from-data (&key grp cart-url-base)
+(defcomp ~overview/page-group-card-from-data (&key (grp :as dict) (cart-url-base :as string))
   (let* ((post (get grp "post"))
          (product-count (or (get grp "product_count") 0))
          (calendar-count (or (get grp "calendar_count") 0))
@@ -55,13 +55,13 @@
          (market-place (get grp "market_place"))
          (badges (<>
            (when (> product-count 0)
-             (~cart-badge :icon "fa fa-box-open"
+             (~overview/badge :icon "fa fa-box-open"
                :text (str product-count " item" (pluralize product-count))))
            (when (> calendar-count 0)
-             (~cart-badge :icon "fa fa-calendar"
+             (~overview/badge :icon "fa fa-calendar"
                :text (str calendar-count " booking" (pluralize calendar-count))))
            (when (> ticket-count 0)
-             (~cart-badge :icon "fa fa-ticket"
+             (~overview/badge :icon "fa fa-ticket"
                :text (str ticket-count " ticket" (pluralize ticket-count)))))))
     (if post
       (let* ((slug (or (get post "slug") ""))
@@ -69,26 +69,26 @@
              (feature-image (get post "feature_image"))
              (mp-name (if market-place (or (get market-place "name") "") ""))
              (display-title (if (!= mp-name "") mp-name title)))
-        (~cart-group-card
+        (~overview/group-card
           :href (str cart-url-base "/" slug "/")
           :img (if feature-image
-                 (~cart-group-card-img :src feature-image :alt title)
-                 (~img-or-placeholder :src nil :size-cls "h-16 w-16 rounded-xl"
+                 (~overview/group-card-img :src feature-image :alt title)
+                 (~shared:misc/img-or-placeholder :src nil :size-cls "h-16 w-16 rounded-xl"
                    :placeholder-icon "fa fa-store text-xl"))
           :display-title display-title
           :subtitle (when (!= mp-name "")
-            (~cart-mp-subtitle :title title))
-          :badges (~cart-badges-wrap :badges badges)
+            (~overview/mp-subtitle :title title))
+          :badges (~overview/badges-wrap :badges badges)
           :total (str "\u00a3" (format-decimal total 2))))
-      (~cart-orphan-card
-        :badges (~cart-badges-wrap :badges badges)
+      (~overview/orphan-card
+        :badges (~overview/badges-wrap :badges badges)
         :total (str "\u00a3" (format-decimal total 2))))))
 
 ;; Assembled cart overview content — replaces Python _overview_main_panel_sx
-(defcomp ~cart-overview-content (&key page-groups cart-url-base)
+(defcomp ~overview/content (&key (page-groups :as list) (cart-url-base :as string))
   (if (empty? page-groups)
-    (~cart-empty)
-    (~cart-overview-panel
+    (~overview/empty)
+    (~overview/panel
       :cards (map (lambda (grp)
-        (~cart-page-group-card-from-data :grp grp :cart-url-base cart-url-base))
+        (~overview/page-group-card-from-data :grp grp :cart-url-base cart-url-base))
         page-groups))))

cart/sx/payments.sx

@@ -1,13 +1,13 @@
 ;; Cart payments components
 
-(defcomp ~cart-payments-panel (&key update-url csrf merchant-code placeholder input-cls sumup-configured checkout-prefix)
+(defcomp ~payments/panel (&key update-url csrf merchant-code placeholder input-cls sumup-configured checkout-prefix)
   (section :class "p-4 max-w-lg mx-auto"
-    (~sumup-settings-form :update-url update-url :csrf csrf :merchant-code merchant-code
+    (~shared:misc/sumup-settings-form :update-url update-url :csrf csrf :merchant-code merchant-code
       :placeholder placeholder :input-cls input-cls :sumup-configured sumup-configured
       :checkout-prefix checkout-prefix :sx-select "#payments-panel")))
 
 ;; Assembled cart admin overview content
-(defcomp ~cart-admin-content ()
+(defcomp ~payments/admin-content ()
   (let* ((payments-href (url-for "defpage_cart_payments")))
     (div :id "main-panel"
       (div :class "flex items-center justify-between p-3 border-b"
@@ -15,13 +15,13 @@
         (a :href payments-href :class "text-sm underline" "configure")))))
 
 ;; Assembled cart payments content
-(defcomp ~cart-payments-content (&key page-config)
+(defcomp ~payments/content (&key page-config)
   (let* ((sumup-configured (and page-config (get page-config "sumup_api_key")))
          (merchant-code (or (get page-config "sumup_merchant_code") ""))
          (checkout-prefix (or (get page-config "sumup_checkout_prefix") ""))
          (placeholder (if sumup-configured "--------" "sup_sk_..."))
          (input-cls "w-full px-3 py-1.5 text-sm border border-stone-300 rounded focus:ring-purple-500 focus:border-purple-500"))
-    (~cart-payments-panel
+    (~payments/panel
       :update-url (url-for "page_admin.update_sumup")
       :csrf (csrf-token)
       :merchant-code merchant-code

cart/sx/summary.sx

@@ -1,17 +1,17 @@
 ;; Cart summary / checkout components
 
-(defcomp ~cart-checkout-form (&key action csrf label)
+(defcomp ~summary/checkout-form (&key (action :as string) (csrf :as string) (label :as string))
   (form :method "post" :action action :class "w-full"
     (input :type "hidden" :name "csrf_token" :value csrf)
     (button :type "submit" :class "w-full inline-flex items-center justify-center px-4 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-solid fa-credit-card mr-2" :aria-hidden "true") label)))
 
-(defcomp ~cart-checkout-signin (&key href)
+(defcomp ~summary/checkout-signin (&key (href :as string))
   (div :class "w-full flex"
     (a :href href :class "w-full cursor-pointer flex flex-row items-center justify-center p-3 gap-2 rounded bg-stone-200 text-black hover:bg-stone-300 transition"
       (i :class "fa-solid fa-key") (span "sign in or register to checkout"))))
 
-(defcomp ~cart-summary-panel (&key item-count subtotal checkout)
+(defcomp ~summary/panel (&key (item-count :as string) (subtotal :as string) checkout)
   (aside :id "cart-summary" :class "lg:pl-2"
     (div :class "rounded-2xl bg-white shadow-sm border border-stone-200 p-4 sm:p-5"
       (h2 :class "text-sm sm:text-base font-semibold text-stone-900 mb-3 sm:mb-4" "Order summary")

cart/sx/tickets.sx

@@ -1,12 +1,12 @@
 ;; Cart ticket components
 
-(defcomp ~cart-ticket-type-name (&key name)
+(defcomp ~tickets/type-name (&key (name :as string))
   (p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" name))
 
-(defcomp ~cart-ticket-type-hidden (&key value)
+(defcomp ~tickets/type-hidden (&key (value :as string))
   (input :type "hidden" :name "ticket_type_id" :value value))
 
-(defcomp ~cart-ticket-article (&key name type-name date-str price qty-url csrf entry-id type-hidden minus qty plus line-total)
+(defcomp ~tickets/article (&key (name :as string) type-name (date-str :as string) (price :as string) (qty-url :as string) (csrf :as string) (entry-id :as string) type-hidden (minus :as string) (qty :as string) (plus :as string) (line-total :as string))
   (article :class "flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4"
     (div :class "flex-1 min-w-0"
       (div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-2 sm:gap-3"
@@ -35,7 +35,7 @@
         (div :class "flex items-center justify-between sm:justify-end gap-3"
           (p :class "text-sm sm:text-base font-semibold text-stone-900" line-total))))))
 
-(defcomp ~cart-tickets-section (&key items)
+(defcomp ~tickets/section (&key items)
   (div :class "mt-6 border-t border-stone-200 pt-4"
     (h2 :class "text-base font-semibold mb-2"
       (i :class "fa fa-ticket mr-1" :aria-hidden "true") " Event tickets")

cart/sxc/pages/__init__.py

@@ -1,14 +1,10 @@
 """Cart defpage setup — registers layouts and loads .sx pages."""
 from __future__ import annotations
 
-from typing import Any
-
-from markupsafe import escape
-from shared.sx.parser import SxExpr
-
 
 def setup_cart_pages() -> None:
     """Register cart-specific layouts and load page definitions."""
+    from .layouts import _register_cart_layouts
     _register_cart_layouts()
     _load_cart_page_files()
 
@@ -17,337 +13,3 @@ def _load_cart_page_files() -> None:
     import os
     from shared.sx.pages import load_page_dir
     load_page_dir(os.path.dirname(__file__), "cart")
-
-
-# ---------------------------------------------------------------------------
-# Header helpers (moved from sx_components.py)
-# ---------------------------------------------------------------------------
-
-def _ensure_post_ctx(ctx: dict, page_post: Any) -> dict:
-    """Ensure ctx has a 'post' dict from page_post DTO."""
-    if ctx.get("post") or not page_post:
-        return ctx
-    return {**ctx, "post": {
-        "id": getattr(page_post, "id", None),
-        "slug": getattr(page_post, "slug", ""),
-        "title": getattr(page_post, "title", ""),
-        "feature_image": getattr(page_post, "feature_image", None),
-    }}
-
-
-async def _ensure_container_nav(ctx: dict) -> dict:
-    """Fetch container_nav if not already present."""
-    if ctx.get("container_nav"):
-        return ctx
-    post = ctx.get("post") or {}
-    post_id = post.get("id")
-    if not post_id:
-        return ctx
-    slug = post.get("slug", "")
-    from shared.infrastructure.fragments import fetch_fragments
-    nav_params = {
-        "container_type": "page",
-        "container_id": str(post_id),
-        "post_slug": slug,
-    }
-    events_nav, market_nav = await fetch_fragments([
-        ("events", "container-nav", nav_params),
-        ("market", "container-nav", nav_params),
-    ], required=False)
-    return {**ctx, "container_nav": events_nav + market_nav}
-
-
-async def _post_header_sx(ctx: dict, page_post: Any, *, oob: bool = False) -> str:
-    from shared.sx.helpers import post_header_sx as _shared_post_header_sx
-    ctx = _ensure_post_ctx(ctx, page_post)
-    ctx = await _ensure_container_nav(ctx)
-    return await _shared_post_header_sx(ctx, oob=oob)
-
-
-async def _cart_header_sx(ctx: dict, *, oob: bool = False) -> str:
-    from shared.sx.helpers import render_to_sx, call_url
-    return await render_to_sx(
-        "menu-row-sx",
-        id="cart-row", level=1, colour="sky",
-        link_href=call_url(ctx, "cart_url", "/"),
-        link_label="cart", icon="fa fa-shopping-cart",
-        child_id="cart-header-child", oob=oob,
-    )
-
-
-async def _page_cart_header_sx(ctx: dict, page_post: Any, *, oob: bool = False) -> str:
-    from shared.sx.helpers import render_to_sx, call_url
-    slug = page_post.slug if page_post else ""
-    title = ((page_post.title if page_post else None) or "")[:160]
-    label_parts = []
-    if page_post and page_post.feature_image:
-        label_parts.append(await render_to_sx("cart-page-label-img", src=page_post.feature_image))
-    label_parts.append(f'(span "{escape(title)}")')
-    label_sx = "(<> " + " ".join(label_parts) + ")"
-    nav_sx = await render_to_sx("cart-all-carts-link", href=call_url(ctx, "cart_url", "/"))
-    return await render_to_sx(
-        "menu-row-sx",
-        id="page-cart-row", level=2, colour="sky",
-        link_href=call_url(ctx, "cart_url", f"/{slug}/"),
-        link_label_content=SxExpr(label_sx),
-        nav=SxExpr(nav_sx), oob=oob,
-    )
-
-
-async def _auth_header_sx(ctx: dict, *, oob: bool = False) -> str:
-    from shared.sx.helpers import render_to_sx, call_url
-    return await render_to_sx(
-        "auth-header-row-simple",
-        account_url=call_url(ctx, "account_url", ""),
-        oob=oob,
-    )
-
-
-async def _orders_header_sx(ctx: dict, list_url: str) -> str:
-    from shared.sx.helpers import render_to_sx
-    return await render_to_sx("orders-header-row", list_url=list_url)
-
-
-async def _cart_page_admin_header_sx(ctx: dict, page_post: Any, *, oob: bool = False,
-                                  selected: str = "") -> str:
-    from shared.sx.helpers import post_admin_header_sx
-    slug = page_post.slug if page_post else ""
-    ctx = _ensure_post_ctx(ctx, page_post)
-    return await post_admin_header_sx(ctx, slug, oob=oob, selected=selected)
-
-
-# ---------------------------------------------------------------------------
-# Order serialization helpers (used by route render functions below)
-# ---------------------------------------------------------------------------
-
-def _serialize_order(order: Any) -> dict:
-    from shared.infrastructure.urls import market_product_url
-    created = order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else "\u2014"
-    items = []
-    if order.items:
-        for item in order.items:
-            items.append({
-                "product_image": item.product_image,
-                "product_title": item.product_title or "Unknown product",
-                "product_id": item.product_id,
-                "product_slug": item.product_slug,
-                "product_url": market_product_url(item.product_slug),
-                "quantity": item.quantity,
-                "unit_price_formatted": f"{item.unit_price or 0:.2f}",
-                "currency": item.currency or order.currency or "GBP",
-            })
-    return {
-        "id": order.id,
-        "status": order.status or "pending",
-        "created_at_formatted": created,
-        "description": order.description or "",
-        "total_formatted": f"{order.total_amount or 0:.2f}",
-        "total_amount": float(order.total_amount or 0),
-        "currency": order.currency or "GBP",
-        "items": items,
-    }
-
-
-def _serialize_calendar_entry(e: Any) -> dict:
-    st = e.state or ""
-    ds = e.start_at.strftime("%-d %b %Y, %H:%M") if e.start_at else ""
-    if e.end_at:
-        ds += f" \u2013 {e.end_at.strftime('%-d %b %Y, %H:%M')}"
-    return {"name": e.name, "state": st, "date_str": ds, "cost_formatted": f"{e.cost or 0:.2f}"}
-
-
-# ---------------------------------------------------------------------------
-# Render functions (called by routes)
-# ---------------------------------------------------------------------------
-
-async def render_orders_page(ctx, orders, page, total_pages, search, search_count, url_for_fn, qs_fn):
-    from shared.sx.helpers import render_to_sx, root_header_sx, search_desktop_sx, search_mobile_sx, full_page_sx
-    from shared.utils import route_prefix
-    ctx["search"] = search
-    ctx["search_count"] = search_count
-    pfx = route_prefix()
-    list_url = pfx + url_for_fn("orders.list_orders")
-    detail_url_prefix = pfx + url_for_fn("orders.order.order_detail", order_id=0).rsplit("0/", 1)[0]
-    order_dicts = [_serialize_order(o) for o in orders]
-    content = await render_to_sx("orders-list-content", orders=order_dicts,
-        page=page, total_pages=total_pages, rows_url=list_url, detail_url_prefix=detail_url_prefix)
-    hdr = await root_header_sx(ctx)
-    auth = await _auth_header_sx(ctx)
-    orders_hdr = await _orders_header_sx(ctx, list_url)
-    auth_child_inner = await render_to_sx("header-child-sx", id="auth-header-child", inner=SxExpr(orders_hdr))
-    auth_child = await render_to_sx("header-child-sx", inner=SxExpr("(<> " + auth + " " + auth_child_inner + ")"))
-    header_rows = "(<> " + hdr + " " + auth_child + ")"
-    filt = await render_to_sx("order-list-header", search_mobile=SxExpr(await search_mobile_sx(ctx)))
-    return await full_page_sx(ctx, header_rows=header_rows, filter=filt,
-                          aside=await search_desktop_sx(ctx), content=content)
-
-
-async def render_orders_rows(ctx, orders, page, total_pages, url_for_fn, qs_fn):
-    from shared.sx.helpers import render_to_sx
-    from shared.utils import route_prefix
-    pfx = route_prefix()
-    list_url = pfx + url_for_fn("orders.list_orders")
-    detail_url_prefix = pfx + url_for_fn("orders.order.order_detail", order_id=0).rsplit("0/", 1)[0]
-    order_dicts = [_serialize_order(o) for o in orders]
-    parts = []
-    for od in order_dicts:
-        parts.append(await render_to_sx("order-row-pair", order=od, detail_url_prefix=detail_url_prefix))
-    if page < total_pages:
-        next_url = list_url + qs_fn(page=page + 1)
-        parts.append(await render_to_sx("infinite-scroll", url=next_url, page=page,
-            total_pages=total_pages, id_prefix="orders", colspan=5))
-    else:
-        parts.append(await render_to_sx("order-end-row"))
-    return "(<> " + " ".join(parts) + ")"
-
-
-async def render_orders_oob(ctx, orders, page, total_pages, search, search_count, url_for_fn, qs_fn):
-    from shared.sx.helpers import render_to_sx, root_header_sx, search_desktop_sx, search_mobile_sx, oob_page_sx
-    from shared.utils import route_prefix
-    ctx["search"] = search
-    ctx["search_count"] = search_count
-    pfx = route_prefix()
-    list_url = pfx + url_for_fn("orders.list_orders")
-    detail_url_prefix = pfx + url_for_fn("orders.order.order_detail", order_id=0).rsplit("0/", 1)[0]
-    order_dicts = [_serialize_order(o) for o in orders]
-    content = await render_to_sx("orders-list-content", orders=order_dicts,
-        page=page, total_pages=total_pages, rows_url=list_url, detail_url_prefix=detail_url_prefix)
-    auth_oob = await _auth_header_sx(ctx, oob=True)
-    orders_hdr = await _orders_header_sx(ctx, list_url)
-    auth_child_oob = await render_to_sx("oob-header-sx", parent_id="auth-header-child", row=SxExpr(orders_hdr))
-    root_oob = await root_header_sx(ctx, oob=True)
-    oobs = "(<> " + auth_oob + " " + auth_child_oob + " " + root_oob + ")"
-    filt = await render_to_sx("order-list-header", search_mobile=SxExpr(await search_mobile_sx(ctx)))
-    return await oob_page_sx(oobs=oobs, filter=filt, aside=await search_desktop_sx(ctx), content=content)
-
-
-async def render_order_page(ctx, order, calendar_entries, url_for_fn):
-    from shared.sx.helpers import render_to_sx, root_header_sx, full_page_sx
-    from shared.utils import route_prefix
-    from shared.browser.app.csrf import generate_csrf_token
-    pfx = route_prefix()
-    detail_url = pfx + url_for_fn("orders.order.order_detail", order_id=order.id)
-    list_url = pfx + url_for_fn("orders.list_orders")
-    recheck_url = pfx + url_for_fn("orders.order.order_recheck", order_id=order.id)
-    pay_url = pfx + url_for_fn("orders.order.order_pay", order_id=order.id)
-    order_data = _serialize_order(order)
-    cal_data = [_serialize_calendar_entry(e) for e in (calendar_entries or [])]
-    main = await render_to_sx("order-detail-content", order=order_data, calendar_entries=cal_data)
-    filt = await render_to_sx("order-detail-filter-content", order=order_data,
-        list_url=list_url, recheck_url=recheck_url, pay_url=pay_url, csrf=generate_csrf_token())
-    hdr = await root_header_sx(ctx)
-    order_row = await render_to_sx("menu-row-sx", id="order-row", level=3, colour="sky",
-        link_href=detail_url, link_label=f"Order {order.id}", icon="fa fa-gbp")
-    auth = await _auth_header_sx(ctx)
-    orders_hdr = await _orders_header_sx(ctx, list_url)
-    orders_child = await render_to_sx("header-child-sx", id="orders-header-child", inner=SxExpr(order_row))
-    auth_inner = "(<> " + orders_hdr + " " + orders_child + ")"
-    auth_child = await render_to_sx("header-child-sx", id="auth-header-child", inner=SxExpr(auth_inner))
-    order_child = await render_to_sx("header-child-sx", inner=SxExpr("(<> " + auth + " " + auth_child + ")"))
-    return await full_page_sx(ctx, header_rows="(<> " + hdr + " " + order_child + ")", filter=filt, content=main)
-
-
-async def render_order_oob(ctx, order, calendar_entries, url_for_fn):
-    from shared.sx.helpers import render_to_sx, root_header_sx, oob_page_sx
-    from shared.utils import route_prefix
-    from shared.browser.app.csrf import generate_csrf_token
-    pfx = route_prefix()
-    detail_url = pfx + url_for_fn("orders.order.order_detail", order_id=order.id)
-    list_url = pfx + url_for_fn("orders.list_orders")
-    recheck_url = pfx + url_for_fn("orders.order.order_recheck", order_id=order.id)
-    pay_url = pfx + url_for_fn("orders.order.order_pay", order_id=order.id)
-    order_data = _serialize_order(order)
-    cal_data = [_serialize_calendar_entry(e) for e in (calendar_entries or [])]
-    main = await render_to_sx("order-detail-content", order=order_data, calendar_entries=cal_data)
-    filt = await render_to_sx("order-detail-filter-content", order=order_data,
-        list_url=list_url, recheck_url=recheck_url, pay_url=pay_url, csrf=generate_csrf_token())
-    order_row_oob = await render_to_sx("menu-row-sx", id="order-row", level=3, colour="sky",
-        link_href=detail_url, link_label=f"Order {order.id}", icon="fa fa-gbp", oob=True)
-    orders_child_oob = await render_to_sx("oob-header-sx", parent_id="orders-header-child", row=SxExpr(order_row_oob))
-    root_oob = await root_header_sx(ctx, oob=True)
-    return await oob_page_sx(oobs="(<> " + orders_child_oob + " " + root_oob + ")", filter=filt, content=main)
-
-
-async def render_checkout_error_page(ctx, error=None, order=None):
-    from shared.sx.helpers import render_to_sx, root_header_sx, full_page_sx
-    from shared.infrastructure.urls import cart_url
-    err_msg = error or "Unexpected error while creating the hosted checkout session."
-    order_sx = await render_to_sx("checkout-error-order-id", oid=f"#{order.id}") if order else None
-    hdr = await root_header_sx(ctx)
-    filt = await render_to_sx("checkout-error-header")
-    content = await render_to_sx("checkout-error-content", msg=err_msg,
-        order=SxExpr(order_sx) if order_sx else None, back_url=cart_url("/"))
-    return await full_page_sx(ctx, header_rows=hdr, filter=filt, content=content)
-
-
-async def render_cart_payments_panel(ctx):
-    from shared.sx.helpers import render_to_sx
-    page_config = ctx.get("page_config")
-    pc_data = None
-    if page_config:
-        pc_data = {
-            "sumup_api_key": bool(getattr(page_config, "sumup_api_key", None)),
-            "sumup_merchant_code": getattr(page_config, "sumup_merchant_code", None) or "",
-            "sumup_checkout_prefix": getattr(page_config, "sumup_checkout_prefix", None) or "",
-        }
-    return await render_to_sx("cart-payments-content", page_config=pc_data)
-
-
-# ---------------------------------------------------------------------------
-# Layouts
-# ---------------------------------------------------------------------------
-
-def _register_cart_layouts() -> None:
-    from shared.sx.layouts import register_custom_layout
-    register_custom_layout("cart-page", _cart_page_full, _cart_page_oob)
-    register_custom_layout("cart-admin", _cart_admin_full, _cart_admin_oob)
-
-
-async def _cart_page_full(ctx: dict, **kw: Any) -> str:
-    from shared.sx.helpers import root_header_sx, render_to_sx
-    from shared.sx.parser import SxExpr
-    
-    page_post = ctx.get("page_post")
-    root_hdr = await root_header_sx(ctx)
-    child = await _cart_header_sx(ctx)
-    page_hdr = await _page_cart_header_sx(ctx, page_post)
-    inner_child = await render_to_sx("header-child-sx", id="cart-header-child", inner=SxExpr(page_hdr))
-    nested = await render_to_sx(
-        "header-child-sx",
-        inner=SxExpr("(<> " + child + " " + inner_child + ")"),
-    )
-    return "(<> " + root_hdr + " " + nested + ")"
-
-
-async def _cart_page_oob(ctx: dict, **kw: Any) -> str:
-    from shared.sx.helpers import root_header_sx, render_to_sx
-    from shared.sx.parser import SxExpr
-    
-    page_post = ctx.get("page_post")
-    page_hdr = await _page_cart_header_sx(ctx, page_post)
-    child_oob = await render_to_sx("oob-header-sx",
-                           parent_id="cart-header-child",
-                           row=SxExpr(page_hdr))
-    cart_hdr_oob = await _cart_header_sx(ctx, oob=True)
-    root_hdr_oob = await root_header_sx(ctx, oob=True)
-    return "(<> " + child_oob + " " + cart_hdr_oob + " " + root_hdr_oob + ")"
-
-
-async def _cart_admin_full(ctx: dict, **kw: Any) -> str:
-    from shared.sx.helpers import root_header_sx
-    
-    page_post = ctx.get("page_post")
-    selected = kw.get("selected", "")
-    root_hdr = await root_header_sx(ctx)
-    post_hdr = await _post_header_sx(ctx, page_post)
-    admin_hdr = await _cart_page_admin_header_sx(ctx, page_post, selected=selected)
-    return "(<> " + root_hdr + " " + post_hdr + " " + admin_hdr + ")"
-
-
-async def _cart_admin_oob(ctx: dict, **kw: Any) -> str:
-    
-    page_post = ctx.get("page_post")
-    selected = kw.get("selected", "")
-    return await _cart_page_admin_header_sx(ctx, page_post, oob=True, selected=selected)
-
-

cart/sxc/pages/cart.sx

@@ -6,7 +6,7 @@
   :auth :public
   :layout :root
   :data (service "cart-page" "overview-data")
-  :content (~cart-overview-content
+  :content (~overview/content
     :page-groups page-groups
     :cart-url-base cart-url-base))
 
@@ -15,11 +15,11 @@
   :auth :public
   :layout :cart-page
   :data (service "cart-page" "page-cart-data")
-  :content (~cart-page-cart-content
+  :content (~items/page-cart-content
     :cart-items cart-items
     :cal-entries cal-entries
     :ticket-groups ticket-groups
-    :summary (~cart-summary-from-data
+    :summary (~items/summary-from-data
       :item-count (get summary "item_count")
       :grand-total (get summary "grand_total")
       :symbol (get summary "symbol")
@@ -32,12 +32,13 @@
   :path "/<page_slug>/admin/"
   :auth :admin
   :layout :cart-admin
-  :content (~cart-admin-content))
+  :data (service "cart-page" "admin-data")
+  :content (~payments/admin-content))
 
 (defpage cart-payments
   :path "/<page_slug>/admin/payments/"
   :auth :admin
   :layout (:cart-admin :selected "payments")
-  :data (service "cart-page" "payments-data")
-  :content (~cart-payments-content
+  :data (service "cart-page" "payments-admin-data")
+  :content (~payments/content
     :page-config page-config))

cart/sxc/pages/layouts.py

@@ -0,0 +1,8 @@
+"""Cart layout registration — all layouts delegate to .sx defcomps."""
+from __future__ import annotations
+
+
+def _register_cart_layouts() -> None:
+    from shared.sx.layouts import register_sx_layout
+    register_sx_layout("cart-page", "cart-page-layout-full", "cart-page-layout-oob")
+    register_sx_layout("cart-admin", "cart-admin-layout-full", "cart-admin-layout-oob")

cart/sxc/pages/renders.py

@@ -0,0 +1,121 @@
+"""Cart render functions — called from bp routes."""
+from __future__ import annotations
+
+from .utils import _serialize_order, _serialize_calendar_entry
+
+
+async def render_orders_page(ctx, orders, page, total_pages, search, search_count, url_for_fn, qs_fn):
+    from shared.sx.helpers import sx_call, render_to_sx_with_env, search_desktop_sx, search_mobile_sx, full_page_sx
+    from shared.utils import route_prefix
+    ctx["search"] = search
+    ctx["search_count"] = search_count
+    pfx = route_prefix()
+    list_url = pfx + url_for_fn("orders.list_orders")
+    detail_url_prefix = pfx + url_for_fn("orders.order.order_detail", order_id=0).rsplit("0/", 1)[0]
+    order_dicts = [_serialize_order(o) for o in orders]
+    content = sx_call("orders-list-content", orders=order_dicts,
+        page=page, total_pages=total_pages, rows_url=list_url, detail_url_prefix=detail_url_prefix)
+    header_rows = await render_to_sx_with_env("layouts/orders-layout-full", {},
+        list_url=list_url,
+    )
+    filt = sx_call("order-list-header", search_mobile=await search_mobile_sx(ctx))
+    return await full_page_sx(ctx, header_rows=header_rows, filter=filt,
+                          aside=await search_desktop_sx(ctx), content=content)
+
+
+def render_orders_rows(ctx, orders, page, total_pages, url_for_fn, qs_fn):
+    from shared.sx.helpers import sx_call
+    from shared.utils import route_prefix
+    pfx = route_prefix()
+    list_url = pfx + url_for_fn("orders.list_orders")
+    detail_url_prefix = pfx + url_for_fn("orders.order.order_detail", order_id=0).rsplit("0/", 1)[0]
+    order_dicts = [_serialize_order(o) for o in orders]
+    next_url = list_url + qs_fn(page=page + 1) if page < total_pages else ""
+    return sx_call("cart-orders-rows-content",
+        orders=order_dicts, detail_url_prefix=detail_url_prefix,
+        page=page, total_pages=total_pages, next_url=next_url)
+
+
+async def render_orders_oob(ctx, orders, page, total_pages, search, search_count, url_for_fn, qs_fn):
+    from shared.sx.helpers import sx_call, render_to_sx_with_env, search_desktop_sx, search_mobile_sx, oob_page_sx
+    from shared.utils import route_prefix
+    ctx["search"] = search
+    ctx["search_count"] = search_count
+    pfx = route_prefix()
+    list_url = pfx + url_for_fn("orders.list_orders")
+    detail_url_prefix = pfx + url_for_fn("orders.order.order_detail", order_id=0).rsplit("0/", 1)[0]
+    order_dicts = [_serialize_order(o) for o in orders]
+    content = sx_call("orders-list-content", orders=order_dicts,
+        page=page, total_pages=total_pages, rows_url=list_url, detail_url_prefix=detail_url_prefix)
+    oobs = await render_to_sx_with_env("layouts/orders-layout-oob", {},
+        list_url=list_url,
+    )
+    filt = sx_call("order-list-header", search_mobile=await search_mobile_sx(ctx))
+    return await oob_page_sx(oobs=oobs, filter=filt, aside=await search_desktop_sx(ctx), content=content)
+
+
+async def render_order_page(ctx, order, calendar_entries, url_for_fn):
+    from shared.sx.helpers import sx_call, render_to_sx_with_env, full_page_sx
+    from shared.utils import route_prefix
+    from shared.browser.app.csrf import generate_csrf_token
+    pfx = route_prefix()
+    detail_url = pfx + url_for_fn("orders.order.order_detail", order_id=order.id)
+    list_url = pfx + url_for_fn("orders.list_orders")
+    recheck_url = pfx + url_for_fn("orders.order.order_recheck", order_id=order.id)
+    pay_url = pfx + url_for_fn("orders.order.order_pay", order_id=order.id)
+    order_data = _serialize_order(order)
+    cal_data = [_serialize_calendar_entry(e) for e in (calendar_entries or [])]
+    main = sx_call("order-detail-content", order=order_data, calendar_entries=cal_data)
+    filt = sx_call("order-detail-filter-content", order=order_data,
+        list_url=list_url, recheck_url=recheck_url, pay_url=pay_url, csrf=generate_csrf_token())
+    header_rows = await render_to_sx_with_env("layouts/order-detail-layout-full", {},
+        list_url=list_url, detail_url=detail_url,
+        order_label=f"Order {order.id}",
+    )
+    return await full_page_sx(ctx, header_rows=header_rows, filter=filt, content=main)
+
+
+async def render_order_oob(ctx, order, calendar_entries, url_for_fn):
+    from shared.sx.helpers import sx_call, render_to_sx_with_env, oob_page_sx
+    from shared.utils import route_prefix
+    from shared.browser.app.csrf import generate_csrf_token
+    pfx = route_prefix()
+    detail_url = pfx + url_for_fn("orders.order.order_detail", order_id=order.id)
+    list_url = pfx + url_for_fn("orders.list_orders")
+    recheck_url = pfx + url_for_fn("orders.order.order_recheck", order_id=order.id)
+    pay_url = pfx + url_for_fn("orders.order.order_pay", order_id=order.id)
+    order_data = _serialize_order(order)
+    cal_data = [_serialize_calendar_entry(e) for e in (calendar_entries or [])]
+    main = sx_call("order-detail-content", order=order_data, calendar_entries=cal_data)
+    filt = sx_call("order-detail-filter-content", order=order_data,
+        list_url=list_url, recheck_url=recheck_url, pay_url=pay_url, csrf=generate_csrf_token())
+    oobs = await render_to_sx_with_env("layouts/order-detail-layout-oob", {},
+        detail_url=detail_url,
+        order_label=f"Order {order.id}",
+    )
+    return await oob_page_sx(oobs=oobs, filter=filt, content=main)
+
+
+async def render_checkout_error_page(ctx, error=None, order=None):
+    from shared.sx.helpers import sx_call, render_to_sx_with_env, full_page_sx
+    from shared.infrastructure.urls import cart_url
+    err_msg = error or "Unexpected error while creating the hosted checkout session."
+    hdr = await render_to_sx_with_env("shared:layout/root-full", {})
+    filt = sx_call("checkout-error-header")
+    content = sx_call("cart-checkout-error-from-data",
+        msg=err_msg, order_id=order.id if order else None,
+        back_url=cart_url("/"))
+    return await full_page_sx(ctx, header_rows=hdr, filter=filt, content=content)
+
+
+def render_cart_payments_panel(ctx):
+    from shared.sx.helpers import sx_call
+    page_config = ctx.get("page_config")
+    pc_data = None
+    if page_config:
+        pc_data = {
+            "sumup_api_key": bool(getattr(page_config, "sumup_api_key", None)),
+            "sumup_merchant_code": getattr(page_config, "sumup_merchant_code", None) or "",
+            "sumup_checkout_prefix": getattr(page_config, "sumup_checkout_prefix", None) or "",
+        }
+    return sx_call("cart-payments-content", page_config=pc_data)

cart/sxc/pages/utils.py

@@ -0,0 +1,40 @@
+"""Cart page utilities — serializers and formatters."""
+from __future__ import annotations
+
+from typing import Any
+
+
+def _serialize_order(order: Any) -> dict:
+    from shared.infrastructure.urls import market_product_url
+    created = order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else "\u2014"
+    items = []
+    if order.items:
+        for item in order.items:
+            items.append({
+                "product_image": item.product_image,
+                "product_title": item.product_title or "Unknown product",
+                "product_id": item.product_id,
+                "product_slug": item.product_slug,
+                "product_url": market_product_url(item.product_slug),
+                "quantity": item.quantity,
+                "unit_price_formatted": f"{item.unit_price or 0:.2f}",
+                "currency": item.currency or order.currency or "GBP",
+            })
+    return {
+        "id": order.id,
+        "status": order.status or "pending",
+        "created_at_formatted": created,
+        "description": order.description or "",
+        "total_formatted": f"{order.total_amount or 0:.2f}",
+        "total_amount": float(order.total_amount or 0),
+        "currency": order.currency or "GBP",
+        "items": items,
+    }
+
+
+def _serialize_calendar_entry(e: Any) -> dict:
+    st = e.state or ""
+    ds = e.start_at.strftime("%-d %b %Y, %H:%M") if e.start_at else ""
+    if e.end_at:
+        ds += f" \u2013 {e.end_at.strftime('%-d %b %Y, %H:%M')}"
+    return {"name": e.name, "state": st, "date_str": ds, "cost_formatted": f"{e.cost or 0:.2f}"}

dev-sx.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Dev mode for sx_docs only (standalone, no DB)
+# Bind-mounted source + auto-reload on externalnet
+# Browse to sx.rose-ash.com
+#
+# Usage:
+#   ./dev-sx.sh              # Start sx_docs dev
+#   ./dev-sx.sh down          # Stop
+#   ./dev-sx.sh logs          # Tail logs
+#   ./dev-sx.sh --build       # Rebuild image then start
+
+COMPOSE="docker compose -p sx-dev -f docker-compose.dev-sx.yml"
+
+case "${1:-up}" in
+  down)
+    $COMPOSE down
+    ;;
+  logs)
+    $COMPOSE logs -f sx_docs
+    ;;
+  *)
+    BUILD_FLAG=""
+    if [[ "${1:-}" == "--build" ]]; then
+      BUILD_FLAG="--build"
+    fi
+    $COMPOSE up $BUILD_FLAG
+    ;;
+esac

docker-compose.dev-sx.yml

@@ -0,0 +1,64 @@
+# Standalone dev mode for sx_docs only
+# Replaces ~/sx-web production stack with bind-mounted source + auto-reload
+# Accessible at sx.rose-ash.com via Caddy on externalnet
+
+services:
+  sx_docs:
+    image: registry.rose-ash.com:5000/sx_docs:latest
+    environment:
+      SX_STANDALONE: "true"
+      SECRET_KEY: "${SECRET_KEY:-sx-dev-secret}"
+      REDIS_URL: redis://redis:6379/0
+      WORKERS: "1"
+      ENVIRONMENT: development
+      RELOAD: "true"
+      SX_USE_REF: "1"
+      SX_USE_OCAML: "1"
+      SX_OCAML_BIN: "/app/bin/sx_server"
+      SX_BOUNDARY_STRICT: "1"
+      SX_DEV: "1"
+    volumes:
+      - /root/rose-ash/_config/dev-sh-config.yaml:/app/config/app-config.yaml:ro
+      - ./shared:/app/shared
+      - ./sx/app.py:/app/app.py
+      - ./sx/sxc:/app/sxc
+      - ./sx/bp:/app/bp
+      - ./sx/services:/app/services
+      - ./sx/content:/app/content
+      - ./sx/sx:/app/sx
+      - ./sx/path_setup.py:/app/path_setup.py
+      - ./sx/entrypoint.sh:/usr/local/bin/entrypoint.sh
+      # OCaml SX kernel binary (built with: cd hosts/ocaml && eval $(opam env) && dune build)
+      - ./hosts/ocaml/_build/default/bin/sx_server.exe:/app/bin/sx_server:ro
+      - ./sx/__init__.py:/app/__init__.py:ro
+      # sibling models for cross-domain SQLAlchemy imports
+      - ./blog/__init__.py:/app/blog/__init__.py:ro
+      - ./blog/models:/app/blog/models:ro
+      - ./market/__init__.py:/app/market/__init__.py:ro
+      - ./market/models:/app/market/models:ro
+      - ./cart/__init__.py:/app/cart/__init__.py:ro
+      - ./cart/models:/app/cart/models:ro
+      - ./events/__init__.py:/app/events/__init__.py:ro
+      - ./events/models:/app/events/models:ro
+      - ./federation/__init__.py:/app/federation/__init__.py:ro
+      - ./federation/models:/app/federation/models:ro
+      - ./account/__init__.py:/app/account/__init__.py:ro
+      - ./account/models:/app/account/models:ro
+      - ./relations/__init__.py:/app/relations/__init__.py:ro
+      - ./relations/models:/app/relations/models:ro
+      - ./likes/__init__.py:/app/likes/__init__.py:ro
+      - ./likes/models:/app/likes/models:ro
+      - ./orders/__init__.py:/app/orders/__init__.py:ro
+      - ./orders/models:/app/orders/models:ro
+    networks:
+      - externalnet
+      - default
+    restart: unless-stopped
+
+  redis:
+    image: redis:7-alpine
+    restart: unless-stopped
+
+networks:
+  externalnet:
+    external: true

docker-compose.dev.yml

@@ -10,6 +10,8 @@
 x-dev-env: &dev-env
   RELOAD: "true"
   WORKERS: "1"
+  SX_USE_REF: "1"
+  SX_BOUNDARY_STRICT: "1"
 
 x-sibling-models: &sibling-models
   # Every app needs all sibling __init__.py + models/ for cross-domain SQLAlchemy imports
@@ -399,6 +401,7 @@ services:
       - ./sx/bp:/app/bp
       - ./sx/services:/app/services
       - ./sx/content:/app/content
+      - ./sx/sx:/app/sx
       - ./sx/path_setup.py:/app/path_setup.py
       - ./sx/entrypoint.sh:/usr/local/bin/entrypoint.sh
       - ./sx/__init__.py:/app/__init__.py:ro

docker-compose.yml

@@ -56,6 +56,8 @@ x-app-env: &app-env
   AP_DOMAIN_MARKET: market.rose-ash.com
   AP_DOMAIN_EVENTS: events.rose-ash.com
   EXTERNAL_INBOXES: "artdag|https://celery-artdag.rose-ash.com/inbox"
+  SX_BOUNDARY_STRICT: "1"
+  SX_USE_REF: "1"
 
 services:
   blog:
@@ -226,6 +228,8 @@ services:
       <<: *app-env
       REDIS_URL: redis://redis:6379/10
       WORKERS: "1"
+      SX_USE_OCAML: "1"
+      SX_OCAML_BIN: "/app/bin/sx_server"
 
   db:
     image: postgres:16

docs/cssx.md

@@ -105,9 +105,458 @@ Call `load_css_registry()` in `setup_sx_bridge()` after loading components.
 5. Inspect `<style id="sx-css">` — should grow as new pages introduce new classes
 6. Check non-sx pages still render correctly (full CSS dump fallback)
 
-## Phase 2 (Future)
+## Phase 2: S-Expression Styles — Native SX Style Primitives
 
-- **Component-level pre-computation:** Pre-scan classes per component at registration time
-- **Own rule generator:** Replace tw.css parsing with a Python rule engine (no Tailwind dependency at all)
-- **Header compression:** Use bitfield or hash instead of full class list
-- **Critical CSS:** Only inline above-fold CSS, lazy-load rest
+### Context
+
+SX eliminated the HTML/JS divide — code is data is DOM. But one foreign language remains: CSS. Components are full of `:class "flex gap-4 items-center p-2 bg-sky-100 rounded"` — opaque strings from a separate language (Tailwind) that requires a separate build step (Tailwind v3 CLI), a separate parser (css_registry.py parsing tw.css), and a separate delivery mechanism (hash-based dedup).
+
+**Goal:** Make styles first-class SX expressions. `(css :flex :gap-4 :items-center :p-2 :bg-sky-100 :rounded)` replaces `"flex gap-4 items-center p-2 bg-sky-100 rounded"`. Same mental model as Tailwind — atomic utility keywords — but native to the language. No build step. No external CSS framework. Code = data = DOM = styles.
+
+### Surface Syntax
+
+```lisp
+;; Before (Tailwind class strings)
+(div :class "flex gap-4 items-center p-2 bg-sky-100 rounded" ...)
+
+;; After (SX style expressions)
+(div :style (css :flex :gap-4 :items-center :p-2 :bg-sky-100 :rounded) ...)
+
+;; Responsive + pseudo-classes (variant:atom, parsed as single keyword)
+(div :style (css :flex :gap-2 :sm:gap-4 :sm:flex-row :hover:bg-sky-200) ...)
+
+;; Named styles
+(defstyle card-base (css :rounded-xl :bg-white :shadow :hover:shadow-md :transition))
+(div :style card-base ...)
+
+;; Composition
+(div :style (merge-styles card-base (css :p-4 :border :border-stone-200)) ...)
+
+;; Conditional
+(div :style (if active (css :bg-sky-500 :text-white) (css :bg-stone-100)) ...)
+
+;; Both :class and :style coexist during migration
+(div :class "prose" :style (css :p-4 :max-w-3xl) ...)
+```
+
+**Why `(css :flex :gap-4)` not `(flex :gap 4)` or `(style :display :flex :gap "1rem")`?**
+- Keywords mirror Tailwind class names 1:1 — migration is mechanical search-replace
+- Single `css` primitive, no namespace pollution (hundreds of functions like `flex`, `p`, `bg`)
+- Parser already handles `:hover:bg-sky-200` as one keyword (regex `:[a-zA-Z_][a-zA-Z0-9_>:-]*`)
+
+### Architecture
+
+#### Three layers
+
+1. **Style Dictionary** (`style_dict.py`) — maps keyword atoms to CSS declarations. Pure data. Replaces tw.css.
+2. **Style Resolver** (`style_resolver.py`) — `(css :flex :gap-4)` → `StyleValue(class_name="sx-a3f2c1", declarations="display:flex;gap:1rem")`. Memoized.
+3. **Style Registry** — generated CSS rules registered into the existing `css_registry.py` delivery system. Same hash-based dedup, same `<style data-sx-css>`, same `SX-Css` header.
+
+#### Output: generated classes (not inline styles)
+
+Inline `style="..."` can't express `:hover`, `:focus`, `@media` breakpoints, or combinators. Generated classes preserve all Tailwind functionality. The `css` primitive produces a `StyleValue` with a content-addressed class name. The renderer emits `class="sx-a3f2c1"` and registers the CSS rule for on-demand delivery.
+
+### @ Rules (Animations, Keyframes, Containers)
+
+`@media` breakpoints are handled via responsive variants (`:sm:flex-row`), but CSS has other @ rules that need first-class support:
+
+#### `@keyframes` — via `defkeyframes`
+
+```lisp
+;; Define a keyframes animation
+(defkeyframes fade-in
+  (from (css :opacity-0))
+  (to (css :opacity-100)))
+
+(defkeyframes slide-up
+  ("0%" (css :translate-y-4 :opacity-0))
+  ("100%" (css :translate-y-0 :opacity-100)))
+
+;; Use it — animate-[name] atom references the keyframes
+(div :style (css :animate-fade-in :duration-300) ...)
+```
+
+**Implementation:** `defkeyframes` is a special form that:
+1. Evaluates each step's `(css ...)` body to get declarations
+2. Builds a `@keyframes fade-in { from { opacity:0 } to { opacity:1 } }` rule
+3. Registers the `@keyframes` rule in `css_registry.py` via `register_generated_rule()`
+4. Binds the name so `animate-fade-in` can reference it
+
+**Built-in animations** in `style_dict.py`:
+```python
+# Keyframes registered at dictionary load time
+KEYFRAMES: dict[str, str] = {
+    "spin": "@keyframes spin{to{transform:rotate(360deg)}}",
+    "ping": "@keyframes ping{75%,100%{transform:scale(2);opacity:0}}",
+    "pulse": "@keyframes pulse{50%{opacity:.5}}",
+    "bounce": "@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}",
+}
+
+# Animation atoms reference keyframes by name
+STYLE_ATOMS |= {
+    "animate-spin": "animation:spin 1s linear infinite",
+    "animate-ping": "animation:ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    "animate-pulse": "animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    "animate-bounce": "animation:bounce 1s infinite",
+    "animate-none": "animation:none",
+    "duration-75": "animation-duration:75ms",
+    "duration-100": "animation-duration:100ms",
+    "duration-150": "animation-duration:150ms",
+    "duration-200": "animation-duration:200ms",
+    "duration-300": "animation-duration:300ms",
+    "duration-500": "animation-duration:500ms",
+    "duration-700": "animation-duration:700ms",
+    "duration-1000": "animation-duration:1000ms",
+}
+```
+
+When the resolver encounters `animate-spin`, it emits both the class rule AND ensures the `@keyframes spin` rule is registered. The `@keyframes` rules flow through the same `_REGISTRY` → `lookup_rules()` → `SX-Css` delta pipeline.
+
+#### `@container` queries
+
+```lisp
+;; Container context
+(div :style (css :container :container-name-sidebar) ...)
+
+;; Container query variant (like responsive but scoped to container)
+(div :style (css :flex-col :@sm/sidebar:flex-row) ...)
+```
+
+Variant prefix `@sm/sidebar` → `@container sidebar (min-width: 640px)`. Parsed the same way as responsive variants but emits `@container` instead of `@media`.
+
+#### `@font-face`
+
+Not needed as atoms — font loading stays in `basics.css` or a dedicated `(load-font ...)` primitive. Fonts are infrastructure, not component styles.
+
+### Dynamic Class Generation
+
+#### Static atoms (common case)
+
+```lisp
+(css :flex :gap-4 :bg-sky-100)
+```
+
+All atoms are keywords known at parse time. Server and client both resolve from the dictionary. No issues.
+
+#### Dynamic atoms (runtime-computed)
+
+```lisp
+;; Color from data
+(let ((color (get item "color")))
+  (div :style (css :p-4 :rounded (str "bg-" color "-100")) ...))
+
+;; Numeric from computation
+(div :style (css :flex (str "gap-" (if compact "1" "4"))) ...)
+```
+
+The `css` primitive accepts both keywords and strings. When it receives a string like `"bg-sky-100"`, it looks it up in `STYLE_ATOMS` the same way. This works on both server and client because both have the full dictionary in memory.
+
+**No server round-trip needed** — the client has the complete style dictionary cached in localStorage. Dynamic atom lookup is a local hash table read, same as static atoms.
+
+#### Arbitrary values (escape hatch)
+
+For values not in the dictionary — truly custom measurements, colors, etc.:
+
+```lisp
+;; Arbitrary value syntax (mirrors Tailwind's bracket notation)
+(css :w-[347px] :h-[calc(100vh-4rem)] :bg-[#ff6b35])
+```
+
+**Pattern-based generator** in the resolver (both server and client):
+```python
+ARBITRARY_PATTERNS: list[tuple[re.Pattern, Callable]] = [
+    # w-[value] → width:value
+    (re.compile(r"w-\[(.+)\]"), lambda v: f"width:{v}"),
+    # h-[value] → height:value
+    (re.compile(r"h-\[(.+)\]"), lambda v: f"height:{v}"),
+    # bg-\[value] → background-color:value
+    (re.compile(r"bg-\[(.+)\]"), lambda v: f"background-color:{v}"),
+    # p-[value] → padding:value
+    (re.compile(r"p-\[(.+)\]"), lambda v: f"padding:{v}"),
+    # text-[value] → font-size:value
+    (re.compile(r"text-\[(.+)\]"), lambda v: f"font-size:{v}"),
+    # top/right/bottom/left-[value]
+    (re.compile(r"(top|right|bottom|left)-\[(.+)\]"), lambda d, v: f"{d}:{v}"),
+    # grid-cols-[value] → grid-template-columns:value
+    (re.compile(r"grid-cols-\[(.+)\]"), lambda v: f"grid-template-columns:{v}"),
+    # min/max-w/h-[value]
+    (re.compile(r"(min|max)-(w|h)-\[(.+)\]"),
+     lambda mm, dim, v: f"{'width' if dim=='w' else 'height'}:{v}" if mm=='max' else f"min-{'width' if dim=='w' else 'height'}:{v}"),
+]
+```
+
+Resolution order: dictionary lookup → pattern match → error (unknown atom).
+
+The generator runs client-side too (it's just regex + string formatting), so arbitrary values never cause a server round-trip. The generated class and CSS rule are injected into `<style id="sx-css">` on the client, same as dictionary-resolved atoms.
+
+#### Fully dynamic (data-driven colors/sizes)
+
+For cases where the CSS property and value are both runtime data (e.g., user-chosen brand colors stored in the database):
+
+```lisp
+;; Inline style fallback — when value is truly unknown
+(div :style (str "background-color:" brand-color) ...)
+
+;; Or a raw-css escape hatch
+(div :style (raw-css "background-color" brand-color) ...)
+```
+
+These emit inline `style="..."` attributes, bypassing the class generation system. This is correct — these values are unique per-entity, so generating a class would be wasteful (class never reused). Inline styles are the right tool for truly unique values.
+
+### Style Delivery & Caching
+
+#### Current system (CSS classes)
+
+1. **Full page load**: Server scans rendered SX for class names → `lookup_rules()` gets CSS for those classes → embeds in `<style id="sx-css">` + stores hash in `<meta name="sx-css-classes">`
+2. **Subsequent SX requests**: Client sends `SX-Css: {8-char-hash}` header → server resolves hash to known class set → computes delta (new classes only) → sends `<style data-sx-css>{new rules}</style>` inline in response + `SX-Css-Hash` response header with updated cumulative hash
+3. **Client accumulates**: `sx.js` extracts `<style data-sx-css>` blocks, appends rules to `<style id="sx-css">`, updates its `_sxCssHash`
+
+#### Current system (components)
+
+- Components cached in **localStorage** by content hash
+- Server checks `sx-comp-hash` cookie → if client has current hash, omits component source from response body
+- Client loads from localStorage on cache hit, downloads on miss
+
+#### New system (SX styles) — same pattern as components
+
+**Key insight**: The style dictionary (`STYLE_ATOMS`) is a fixed dataset, like component definitions. It changes only on deployment, not per-request. Cache it in localStorage like components, not per-request like CSS class deltas.
+
+**Server side:**
+- At startup, hash the full style dictionary → `sx-style-dict-hash`
+- Check `sx-style-hash` cookie on each request
+- If client has current hash: omit dictionary from response
+- If client is stale/missing: include `<script type="text/sx-styles" data-hash="{hash}">{serialized dict}</script>` in full-page response
+- Generated CSS rules (from `(css ...)` evaluation) are tracked the same way current CSS classes are — server sends only new rules client doesn't have
+
+**Client side (`sx.js`):**
+- On full page load: check `<script type="text/sx-styles" data-hash="{hash}">`
+- If hash matches localStorage `sx-styles-hash`: load from localStorage (skip download)
+- If hash differs or no cache: parse inline dict, store in localStorage, set cookie
+- Style dictionary lives in memory as a JS object for `css` primitive lookups
+- Generated CSS rules injected into `<style id="sx-css">` (same as current system)
+
+**Per-request style delivery** (for SX responses after initial page):
+- `(css ...)` produces `StyleValue` on server → renderer emits `class="sx-a3f2c1"`
+- Server registers generated rule in `_REGISTRY` → `lookup_rules()` picks it up
+- Existing `SX-Css` hash mechanism sends only new CSS rules to client
+- No change needed to the delta delivery pipeline — generated class names flow through `lookup_rules()` exactly like Tailwind class names do today
+
+**Server-side session tracking** (optimization):
+- Server maintains `dict[client_id, set[str]]` mapping client IDs to known style rule hashes
+- Client ID = session cookie or device ID (already exists in rose-ash auth system)
+- On each response, server records which style rules were sent to this client
+- On subsequent requests, server checks its record before computing delta
+- Falls back to hash-based negotiation if server-side record is missing (restart, eviction)
+- This avoids the round-trip cost of the client needing to tell the server what it knows — the server already knows
+
+**Data transfer optimization:**
+- Style dictionary: ~15-20KB serialized, sent once, cached in localStorage indefinitely (until hash changes on deploy)
+- Per-request: only delta CSS rules (typically 0-500 bytes for navigation to a new page type)
+- Preamble (resets, FontAwesome, basics.css): sent once on full page load, same as today
+- Total initial download actually decreases: style dict (~20KB) < tw.css sent as rules (~40KB+ for pages using many classes)
+
+### Implementation Phases
+
+#### Phase 2.0: Style Dictionary
+
+**New file: `shared/sx/style_dict.py`**
+
+Pure data mapping ~500 keyword atoms (the ones actually used across the codebase) to CSS declarations:
+
+```python
+STYLE_ATOMS: dict[str, str] = {
+    "flex": "display:flex",
+    "hidden": "display:none",
+    "block": "display:block",
+    "flex-col": "flex-direction:column",
+    "flex-row": "flex-direction:row",
+    "items-center": "align-items:center",
+    "justify-between": "justify-content:space-between",
+    "gap-1": "gap:0.25rem",
+    "gap-2": "gap:0.5rem",
+    "gap-4": "gap:1rem",
+    "p-2": "padding:0.5rem",
+    "px-4": "padding-left:1rem;padding-right:1rem",
+    "bg-sky-100": "background-color:rgb(224 242 254)",
+    "rounded": "border-radius:0.25rem",
+    "rounded-xl": "border-radius:0.75rem",
+    "text-sm": "font-size:0.875rem;line-height:1.25rem",
+    "font-semibold": "font-weight:600",
+    "shadow": "box-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1)",
+    "transition": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+    # ... ~500 entries total
+}
+
+PSEUDO_VARIANTS: dict[str, str] = {
+    "hover": ":hover", "focus": ":focus", "active": ":active",
+    "disabled": ":disabled", "first": ":first-child", "last": ":last-child",
+    "group-hover": ":is(.group:hover) &",
+}
+
+RESPONSIVE_BREAKPOINTS: dict[str, str] = {
+    "sm": "(min-width:640px)", "md": "(min-width:768px)",
+    "lg": "(min-width:1024px)", "xl": "(min-width:1280px)",
+}
+
+KEYFRAMES: dict[str, str] = {
+    "spin": "@keyframes spin{to{transform:rotate(360deg)}}",
+    "ping": "@keyframes ping{75%,100%{transform:scale(2);opacity:0}}",
+    "pulse": "@keyframes pulse{50%{opacity:.5}}",
+    "bounce": "@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}",
+}
+
+# Arbitrary value patterns — fallback when atom not in STYLE_ATOMS
+ARBITRARY_PATTERNS: list[tuple[str, str]] = [
+    # pattern → CSS template ({0} = captured value)
+    (r"w-\[(.+)\]", "width:{0}"),
+    (r"h-\[(.+)\]", "height:{0}"),
+    (r"bg-\[(.+)\]", "background-color:{0}"),
+    (r"p-\[(.+)\]", "padding:{0}"),
+    (r"m-\[(.+)\]", "margin:{0}"),
+    (r"text-\[(.+)\]", "font-size:{0}"),
+    (r"(top|right|bottom|left)-\[(.+)\]", "{0}:{1}"),
+    (r"(min|max)-(w|h)-\[(.+)\]", "{0}-{1}:{2}"),
+    (r"grid-cols-\[(.+)\]", "grid-template-columns:{0}"),
+    (r"gap-\[(.+)\]", "gap:{0}"),
+]
+```
+
+Generated by: scanning all `:class "..."` across 64 .sx files to find used atoms, then extracting their CSS from the existing tw.css via `css_registry.py`'s parsed `_REGISTRY`.
+
+#### Phase 2.1: StyleValue type + `css` primitive + resolver
+
+**Modify: `shared/sx/types.py`** — add StyleValue:
+```python
+@dataclass(frozen=True)
+class StyleValue:
+    class_name: str           # "sx-a3f2c1"
+    declarations: str         # "display:flex;gap:1rem"
+    media_rules: tuple = ()   # ((query, decls), ...)
+    pseudo_rules: tuple = ()  # ((selector, decls), ...)
+    keyframes: tuple = ()     # (("spin", "@keyframes spin{...}"), ...)
+    container_rules: tuple = ()  # (("sidebar (min-width:640px)", decls), ...)
+```
+
+**New file: `shared/sx/style_resolver.py`** — memoized resolver:
+- Takes tuple of atom strings (e.g., `("flex", "gap-4", "hover:bg-sky-200", "sm:flex-row")`)
+- Splits variant prefixes (`hover:bg-sky-200` → variant=`hover`, atom=`bg-sky-200`)
+- Looks up declarations in STYLE_ATOMS
+- Falls back to `ARBITRARY_PATTERNS` for bracket notation (`w-[347px]` → `width:347px`)
+- Detects `animate-*` atoms → includes associated `@keyframes` rules
+- Groups into base / pseudo / media / keyframes / container
+- Hashes declarations → deterministic class name `sx-{hash[:6]}`
+- Returns `StyleValue`
+- Dict cache keyed on input tuple
+- Accepts both keywords and runtime strings (for dynamic atom construction)
+
+**Modify: `shared/sx/primitives.py`** — add `css` and `merge-styles`:
+```python
+@register_primitive("css")
+def prim_css(*args):
+    from .style_resolver import resolve_style
+    return resolve_style(tuple(str(a) for a in args if a))
+
+@register_primitive("merge-styles")
+def prim_merge_styles(*styles):
+    from .style_resolver import merge_styles
+    return merge_styles([s for s in styles if isinstance(s, StyleValue)])
+```
+
+#### Phase 2.2: Server-side rendering + delivery integration
+
+**Modify: `shared/sx/html.py`** — in `_render_element()` (line ~482):
+- When `:style` evaluates to a `StyleValue`: emit its `class_name` as a CSS class (appended to any existing `:class`), register the rule with `register_generated_rule()`, don't emit `:style` attribute
+- When `:style` is a string: existing behavior (inline style attribute)
+
+**Modify: `shared/sx/async_eval.py`** — same change in `_arender_element()` (line ~641)
+
+**Modify: `shared/sx/css_registry.py`** — add `register_generated_rule(style_val)`:
+- Builds CSS rule: `.sx-a3f2c1{display:flex;gap:1rem}`
+- Plus pseudo rules: `.sx-a3f2c1:hover{background-color:...}`
+- Plus media rules: `@media(min-width:640px){.sx-a3f2c1{flex-direction:row}}`
+- Inserts into `_REGISTRY` so existing `lookup_rules()` works transparently
+- Generated rules flow through the same `SX-Css` hash delta mechanism — no new delivery protocol needed
+
+**Modify: `shared/sx/helpers.py`** — style dictionary delivery:
+- In `sx_page_shell()` (full page): include style dictionary as `<script type="text/sx-styles" data-hash="{hash}">` with localStorage caching (same pattern as component caching)
+- Check `sx-style-hash` cookie: if client has current hash, omit dictionary source
+- In `sx_response()` (SX fragment responses): no change — generated CSS rules already flow through `<style data-sx-css>`
+
+**Modify: `shared/infrastructure/factory.py`** — add `sx-style-hash` to allowed headers in CORS config
+
+#### Phase 2.3: Client-side (sx.js)
+
+**Modify: `shared/static/scripts/sx.js`**:
+- Add `StyleValue` type (`{_style: true, className, declarations, pseudoRules, mediaRules}`)
+- Add `css` primitive to PRIMITIVES (accepts both keywords and dynamic strings)
+- Add resolver logic (split variants, lookup from in-memory dict, arbitrary pattern fallback, hash, memoize)
+- In `renderElement()`: when `:style` value is StyleValue, add className to element and inject CSS rule into `<style id="sx-css">` (same target as server-sent rules)
+- Add `merge-styles` primitive
+- Add `defstyle` to SPECIAL_FORMS
+- Add style dictionary localStorage caching (same pattern as components):
+  - On init: check `<script type="text/sx-styles" data-hash="{hash}">`
+  - Cache hit (hash matches localStorage): load dict from localStorage, skip inline parse
+  - Cache miss: parse inline dict, store in localStorage, set `sx-style-hash` cookie
+  - Dict lives in `_styleAtoms` var for `css` primitive to look up at render time
+
+**No separate `sx-styles.js`** — the style dictionary is delivered inline in the full-page shell (like components) and cached in localStorage. No extra HTTP request.
+
+#### Phase 2.4: `defstyle` and `defkeyframes` special forms
+
+**Modify: `shared/sx/evaluator.py`** — add `defstyle` and `defkeyframes`:
+```lisp
+(defstyle card-base (css :rounded-xl :bg-white :shadow))
+
+(defkeyframes fade-in
+  (from (css :opacity-0))
+  (to (css :opacity-100)))
+```
+
+`defstyle`: evaluates the body → StyleValue, binds to name in env. Essentially `define` but semantically distinct for tooling.
+
+`defkeyframes`: evaluates each step's `(css ...)` body, builds a `@keyframes` CSS rule, registers it via `register_generated_rule()`, and binds the animation name so `animate-[name]` atoms can reference it.
+
+**Mirror in `shared/sx/async_eval.py`** and `sx.js`.
+
+#### Phase 2.5: Migration tooling + gradual conversion
+
+**New: `shared/sx/tools/class_to_css.py`** — converter script:
+- `:class "flex gap-4 p-2"` → `:style (css :flex :gap-4 :p-2)`
+- `(str "base " conditional)` → leave as `:class` or split into static `:style` + dynamic `:class`
+- `(if cond "classes-a" "classes-b")` → `(if cond (css :classes-a) (css :classes-b))`
+
+**Dynamic class construction** (2-3 occurrences in `layout.sx`):
+- `(str "bg-" c "-" shade)` → `(css (str "bg-" c "-" shade))` — `css` accepts runtime strings, resolves from dictionary client-side (no server round-trip)
+- Truly unique values (user brand colors from DB) → inline `style="..."` or `(raw-css "background-color" brand-color)`
+
+#### Phase 2.6: Remove Tailwind
+
+- Delete `tailwind.config.js`, remove tw.css build step
+- Remove tw.css parsing from `load_css_registry()`
+- Keep extra CSS (basics.css, cards.css, blog-content.css, FontAwesome)
+- `css_registry.py` becomes pure runtime registry for generated + extra CSS
+
+### Phase 2 Files
+
+| File | Change |
+|------|--------|
+| `shared/sx/style_dict.py` | **New** — keyword → CSS declaration mapping (~500 atoms) |
+| `shared/sx/style_resolver.py` | **New** — resolve (css ...) → StyleValue, memoized |
+| `shared/sx/types.py` | Add `StyleValue` dataclass |
+| `shared/sx/primitives.py` | Add `css`, `merge-styles` primitives |
+| `shared/sx/html.py` | Handle StyleValue in `:style` attribute rendering |
+| `shared/sx/async_eval.py` | Same StyleValue handling in async render path |
+| `shared/sx/css_registry.py` | Add `register_generated_rule()` |
+| `shared/sx/helpers.py` | Style dict delivery in page shell, cookie check, localStorage caching protocol |
+| `shared/sx/evaluator.py` | Add `defstyle` special form |
+| `shared/infrastructure/factory.py` | Add `sx-style-hash` cookie/header to CORS |
+| `shared/static/scripts/sx.js` | StyleValue, css/merge-styles, defstyle, dict caching, style injection |
+| `shared/sx/tools/class_to_css.py` | **New** — migration converter |
+
+### Phase 2 Verification
+
+- **Phase 2.1**: Unit test — `(css :flex :gap-4 :p-2)` returns correct StyleValue
+- **Phase 2.2**: Render test — `(div :style (css :flex :gap-4))` → `<div class="sx-a3f2c1">` + CSS rule registered
+- **Phase 2.3**: Browser test — client renders `:style (css ...)` with injected `<style>` rules
+- **Phase 2.5**: Convert one .sx file, diff HTML output to verify identical rendering
+- **Throughout**: existing `:class "..."` continues to work unchanged

docs/isomorphic-sx-plan.md

@@ -1,446 +1,284 @@
-# Isomorphic SX Architecture Migration Plan
+# SX Isomorphic Architecture Roadmap
 
 ## Context
 
-The sx layer already renders full pages client-side — `sx_page()` ships raw sx source + component definitions to the browser, `sx.js` evaluates and renders them. Components are cached in localStorage with a hash-based invalidation protocol (cookie `sx-comp-hash` → server skips sending defs if hash matches).
+SX has a working server-client pipeline: server evaluates pages with IO (DB, fragments), serializes as SX wire format, client parses and renders to DOM. The language and primitives are already isomorphic — same spec, same semantics, both sides. What's missing is the **plumbing** that makes the boundary between server and client a sliding window rather than a fixed wall.
 
-**Key insight from the user:** Pages/routes are just components. They belong in the same component registry, cached in localStorage alongside `defcomp` definitions. On navigation, if the client's component hash is current, the server doesn't need to send any s-expression source at all — just data. The client already has the page component cached and renders it locally with fresh data from the API.
+The key insight: **s-expressions can partially unfold on the server after IO, then finish unfolding on the client.** The system should be clever enough to know which downstream components have data fetches, resolve those server-side, and send the rest as pure SX for client rendering. Eventually, the client can also do IO (mapping server DB queries to REST calls), handle routing (SPA), and even work offline with cached data.
 
-### Target Architecture
+## Current State (what's solid)
 
-```
-First visit:
-  Server → component defs (including page components) + page data → client caches defs in localStorage
+- **Primitive parity:** 100%. ~80 pure primitives, same names/semantics, JS and Python.
+- **eval/parse/render:** Complete both sides. sx-ref.js has eval, parse, render-to-html, render-to-dom, aser.
+- **Engine:** engine.sx (morph, swaps, triggers, history), orchestration.sx (fetch, events), boot.sx (hydration) — all transpiled.
+- **Wire format:** Server `_aser` → SX source → client parses → renders to DOM. Boundary is clean.
+- **Component caching:** Hash-based localStorage for component definitions and style dictionaries.
+- **CSS on-demand:** CSSX resolves keywords to CSS rules, injects only used rules.
+- **Boundary enforcement:** `boundary.sx` + `SX_BOUNDARY_STRICT=1` validates all primitives/IO/helpers at registration.
 
-Subsequent navigation (same session, hash valid):
-  Client has page component cached → fetches only JSON data from /api/data/ → renders locally
-  Server sends: { data: {...} } — zero sx source
-
-SSR (bots, first paint):
-  Server evaluates the same page component with direct DB queries → sends rendered HTML
-  Client hydrates (binds SxEngine handlers, no re-render)
-```
-
-This is React-like data fetching with an s-expression view layer instead of JSX, and the component transport is a content-addressed cache rather than a JS bundle.
-
-### Data Delivery Modes
-
-The data side is not a single pattern — it's a spectrum that can be mixed per page and per fragment:
-
-**Mode A: Server-bundled data** — Server evaluates the page's `:data` slot, resolves all queries (including cross-service `fetch_data` calls), returns one JSON blob. Fewest round-trips. Server aggregates.
-
-**Mode B: Client-fetched data** — Client evaluates `:data` slot locally. Each `(query ...)` / `(service ...)` hits the relevant service's `/api/data/` endpoint independently. More round-trips but fully decoupled — each service handles its own data.
-
-**Mode C: Hybrid** — Server bundles same-service data (direct DB). Client fetches cross-service data in parallel from other services' APIs. Mirrors current server pattern: own-domain = SQLAlchemy, cross-domain = `fetch_data()` HTTP.
-
-The same spectrum applies to **fragments** (`frag` / `fetch_fragment`):
-
-- **Server-composed:** Server calls `fetch_fragment()` during page evaluation, bakes result into data bundle or renders inline.
-- **Client-composed:** Client's `(frag ...)` primitive fetches from the service's public fragment endpoint. Fragment returns sx source, client renders locally using cached component defs.
-- **Mixed:** Stable fragments (nav, auth menu) server-composed; content-specific fragments client-fetched.
-
-A `(query ...)` or `(frag ...)` call resolves differently depending on execution context (server vs client) but produces the same result. The choice of mode can be per-page, per-fragment, or even per-request.
-
-## Delivery Order
-
-```
-Phase 1 (Primitive Parity) ──┐
-                              ├── Phase 4 (Client Data Primitives) ──┐
-Phase 3 (Public Data API) ───┘                                      ├── Phase 5 (Data-Only Navigation)
-Phase 2 (Server-Side Rendering) ────────────────────────────────────┘
-```
-
-Phases 1-3 are independent. Recommended order: **3 → 1 → 2 → 4 → 5**
+## Architecture Phases
 
 ---
 
-## Phase 1: Primitive Parity
+### Phase 1: Component Distribution & Dependency Analysis — DONE
 
-Align JS and Python primitive sets so the same component source evaluates identically on both sides.
+**What it enables:** Per-page component bundles instead of sending every definition to every page. Smaller payloads, faster boot, better cache hit rates.
 
-### 1a: Add missing pure primitives to sx.js
+**Implemented:**
 
-Add to `PRIMITIVES` in `shared/static/scripts/sx.js`:
+1. **Transitive closure analyzer** — `shared/sx/deps.py` (now `shared/sx/ref/deps.sx`, spec-level)
+   - Walk component body AST, collect all `~name` refs
+   - Recursively follow into their bodies
+   - Handle control forms (`if`/`when`/`cond`/`case`) — include ALL branches
+   - `components_needed(source, env) -> set[str]`
 
-| Primitive | JS implementation |
-|-----------|-------------------|
-| `clamp` | `Math.max(lo, Math.min(hi, x))` |
-| `chunk-every` | partition list into n-size sublists |
-| `zip-pairs` | `[[coll[0],coll[1]], [coll[2],coll[3]], ...]` |
-| `dissoc` | shallow copy without specified keys |
-| `into` | target-type-aware merge |
-| `format-date` | minimal strftime translator covering `%Y %m %d %b %B %H %M %S` |
-| `parse-int` | `parseInt` with NaN fallback to default |
-| `assert` | throw if falsy |
+2. **IO reference analysis** — `deps.sx` also tracks IO primitive usage
+   - `scan-io-refs` / `transitive-io-refs` / `component-pure?`
+   - Used by Phase 2 for automatic server/client boundary
 
-Fix existing parity gaps: `round` needs optional `ndigits`; `min`/`max` need to accept a single list arg.
+3. **Per-page component block** — `_build_pages_sx()` in `helpers.py`
+   - Each page entry includes `:deps` list of required components
+   - Client page registry carries dep info for prefetching
 
-### 1b: Inject `window.__sxConfig` for server-context primitives
+4. **SX partial responses** — `components_for_request()` diffs against `SX-Components` header, sends only missing components
 
-Modify `sx_page()` in `shared/sx/helpers.py` to inject before sx.js:
-
-```js
-window.__sxConfig = {
-  appUrls: { blog: "https://blog.rose-ash.com", ... },
-  assetUrl: "https://static...",
-  config: { /* public subset */ },
-  currentUser: { id, username, display_name, avatar } | null,
-  relations: [ /* serialized RelationDef list */ ]
-};
-```
-
-Sources: `ctx` has `blog_url`, `market_url`, etc. `g.user` has user info. `shared/infrastructure/urls.py` has the URL map.
-
-Add JS primitives reading from `__sxConfig`: `app-url`, `asset-url`, `config`, `current-user`, `relations-from`.
-
-`url-for` has no JS equivalent — isomorphic code uses `app-url` instead.
-
-### 1c: Add `defpage` to sx.js evaluator
-
-Add `defpage` to `SPECIAL_FORMS`. Parse the declaration, store it in `_componentEnv` under `"page:name"` (same registry as components). The page definition includes: name, path pattern, auth requirement, layout spec, and unevaluated AST for data/content/filter/aside/menu slots.
-
-Since pages live in `_componentEnv`, they're automatically included in the component hash, cached in localStorage, and skipped when the hash matches. No separate `<script data-pages>` block needed — they ship with components.
-
-**Files:** `shared/static/scripts/sx.js`, `shared/sx/helpers.py`
-
-**Verify:** `(format-date "2024-03-15" "%d %b %Y")` produces same output in Python and JS.
+**Files:** `shared/sx/ref/deps.sx`, `shared/sx/deps.py`, `shared/sx/helpers.py`, `shared/sx/jinja_bridge.py`
 
 ---
 
-## Phase 2: Server-Side Rendering (SSR)
+### Phase 2: Smart Server/Client Boundary — DONE
 
-Full-page HTML rendering on the server for SEO and first-paint.
+**What it enables:** Formalized partial evaluation model. Server evaluates IO, serializes pure subtrees. The system automatically knows "this component needs server data" vs "this component is pure and can render anywhere."
 
-### 2a: Add `render_mode` to `execute_page()`
+**Implemented:**
 
-In `shared/sx/pages.py`:
+1. **Automatic IO detection** — `deps.sx` walks component bodies for IO primitive refs
+   - `compute-all-io-refs` computes transitive IO analysis for all components
+   - `component-pure?` returns true if no IO refs transitively
 
-```python
-async def execute_page(..., render_mode: str = "client") -> str:
-```
+2. **Selective expansion** — `_aser` expands known components server-side via `_aser_component`
+   - IO-dependent components expand server-side (IO must resolve)
+   - Unknown components serialize for client rendering
+   - `_expand_components` context var controls override
 
-When `render_mode="server"`:
-- Evaluate all slots via `async_render()` (→ HTML) instead of `async_eval_to_sx()` (→ sx source)
-- Layout headers also rendered to HTML
-- Pass to new `ssr_page()` instead of `sx_page()`
+3. **Component metadata** — computed at registration, cached on Component objects
 
-### 2b: Create `ssr_page()` in helpers.py
-
-Wraps pre-rendered HTML in a document shell:
-- Same `<head>` (CSS, CSRF, meta)
-- Rendered HTML inline in `<body>` — no `<script type="text/sx" data-mount>`
-- Still ships component defs in `<script type="text/sx" data-components>` (client needs them for subsequent navigation)
-- Still includes sx.js + body.js (for SPA takeover after first paint)
-- Adds `<meta name="sx-ssr" content="true">`
-- Injects `__sxConfig` (Phase 1b)
-
-### 2c: SSR trigger
-
-Utility `should_ssr(request)`:
-- Bot UA patterns → SSR
-- `?_render=server` → SSR (debug)
-- `SX-Request: true` header → always client
-- Per-page opt-in via `defpage :ssr true`
-- Default → client (current behavior)
-
-### 2d: Hydration in sx.js
-
-When sx.js detects `<meta name="sx-ssr">`:
-- Skip `Sx.mount()` — DOM already correct
-- Run `SxEngine.process(document.body)` — bind sx-get/post handlers
-- Run `Sx.hydrate()` — process `[data-sx]` elements
-- Load component defs into registry (for subsequent navigations)
-
-**Files:** `shared/sx/pages.py`, `shared/sx/helpers.py`, `shared/static/scripts/sx.js`
-
-**Verify:** Googlebot UA → response has rendered HTML, no `<script data-mount>`. Normal UA → unchanged behavior.
+**Files:** `shared/sx/ref/deps.sx`, `shared/sx/async_eval.py`, `shared/sx/jinja_bridge.py`
 
 ---
 
-## Phase 3: Public Data API
+### Phase 3: Client-Side Routing (SPA Mode) — DONE
 
-Expose browser-accessible JSON endpoints mirroring internal `/internal/data/` queries.
+**What it enables:** After initial page load, client resolves routes locally using cached components. Only hits server for fresh data or unknown routes.
 
-### 3a: Shared blueprint factory
+**Implemented:**
 
-New `shared/sx/api_data.py`:
+1. **Client-side page registry** — `_build_pages_sx()` serializes defpage routing info
+   - `<script type="text/sx-pages">` with name, path, auth, content, deps, closure, has-data
+   - Processed by `boot.sx` → `_page-routes` list
 
-```python
-def create_public_data_blueprint(service_name: str) -> Blueprint:
-    """Session-authed public data blueprint at /api/data/"""
-```
+2. **Client route matcher** — `shared/sx/ref/router.sx`
+   - `parse-route-pattern` converts Flask-style `/docs/<slug>` to matchers
+   - `find-matching-route` matches URL against registered routes
+   - `match-route-segments` handles literal and param segments
 
-Queries registered with auth level: `"public"`, `"login"`, `"admin"`. Validates session (not HMAC). Returns JSON.
+3. **Client-side route intercept** — `orchestration.sx`
+   - `try-client-route` — match URL, eval content locally, swap DOM
+   - `bind-client-route-link` — intercept boost link clicks
+   - Pure pages render immediately, no server roundtrip
+   - Falls through to server fetch on miss
 
-### 3b: Extract and share handler implementations
+4. **Integration with engine** — boost link clicks try client route first, fall back to standard fetch
 
-Refactor `bp/data/routes.py` per service — separate query logic from HMAC auth. Same function serves both internal and public paths.
-
-### 3c: Per-service public data blueprints
-
-New `bp/api_data/routes.py` per service:
-
-| Service | Public queries | Auth |
-|---------|---------------|------|
-| blog | `post-by-slug`, `post-by-id`, `search-posts` | public |
-| market | `products-by-ids`, `marketplaces-for-container` | public |
-| events | `visible-entries-for-period`, `calendars-for-container`, `entries-for-page` | public |
-| cart | `cart-summary`, `cart-items` | login |
-| likes | `is-liked`, `liked-slugs` | login |
-| account | `newsletters` | public |
-
-Admin queries and write-actions stay internal only.
-
-### 3d: Public fragment endpoints
-
-The existing internal fragment system (`/internal/fragments/<type>`, HMAC-signed) needs public equivalents. Each service already has `create_handler_blueprint()` mounting defhandler fragments. Add a parallel public endpoint:
-
-`GET /api/fragments/<type>?params...` — session-authed, returns `text/sx` (same wire format the client already handles via SxEngine).
-
-This can reuse the same `execute_handler()` machinery — the only difference is auth (session vs HMAC). The blueprint factory in `shared/sx/api_data.py` can handle both data and fragment registration:
-
-```python
-bp.register_fragment("container-cards", handler_fn, auth="public")
-```
-
-The client's `(frag ...)` primitive then fetches from these public endpoints instead of the HMAC-signed internal ones.
-
-### 3e: Register in app factories
-
-Each service's `app.py` registers the new blueprint.
-
-**Files:** New `shared/sx/api_data.py`, new `{service}/bp/api_data/routes.py` per service, `{service}/app.py`
-
-**Verify:** `curl /api/data/post-by-slug?slug=test` → JSON. `curl /api/fragments/container-cards?type=page&id=1` → sx source. Login-gated query without session → 401.
+**Files:** `shared/sx/ref/router.sx`, `shared/sx/ref/boot.sx`, `shared/sx/ref/orchestration.sx`, `shared/sx/helpers.py`, `shared/sx/pages.py`
 
 ---
 
-## Phase 4: Client Data Primitives
+### Phase 4: Client Async & IO Bridge — DONE
 
-Async data-fetching in sx.js so I/O primitives work client-side via the public API.
+**What it enables:** Client fetches server-evaluated data and renders `:data` pages locally. Data cached to avoid redundant fetches on back/forward navigation.
 
-### 4a: Async evaluator — `sxEvalAsync()`
+**The approach:** Separate IO from rendering. Server evaluates `:data` expression (async, with DB/service access), serializes result as SX wire format. Client fetches this pre-evaluated data, parses it, merges into env, renders pure `:content` client-side. No continuations needed — all IO happens server-side.
 
-New function in `sx.js` returning a `Promise`. Mirrors `async_eval.py`:
-- Literals/symbols → `Promise.resolve(syncValue)`
-- I/O primitives (`query`, `service`, `frag`, etc.) → `fetch()` calls to `/api/data/`
-- Control flow → sequential async with short-circuit
-- `map`/`filter` with I/O → `Promise.all`
+**Implemented:**
 
-### 4b: I/O primitive dispatch
+1. **Abstract `resolve-page-data`** — spec-level primitive in `orchestration.sx`
+   - `(resolve-page-data name params callback)` — platform decides transport
+   - Spec says "I need data for this page"; platform provides concrete implementation
+   - Browser platform: HTTP fetch to `/sx/data/` endpoint
 
-```javascript
-IO_PRIMITIVES = {
-  "query":        (svc, name, kw) => fetch(__sxConfig.appUrls[svc] + "/api/data/" + name + "?" + params(kw), {credentials:"include"}).then(r=>r.json()),
-  "service":      (method, kw)    => fetch("/api/data/" + method + "?" + params(kw), {credentials:"include"}).then(r=>r.json()),
-  "frag":         (svc, type, kw) => fetch(__sxConfig.appUrls[svc] + "/api/fragments/" + type + "?" + params(kw), {credentials:"include"}).then(r=>r.text()),
-  "current-user": ()              => Promise.resolve(__sxConfig.currentUser),
-  "request-arg":  (name)          => Promise.resolve(new URLSearchParams(location.search).get(name)),
-  "request-path": ()              => Promise.resolve(location.pathname),
-  "nav-tree":     ()              => fetch("/api/data/nav-tree", {credentials:"include"}).then(r=>r.json()),
-};
-```
+2. **Server data endpoint** — `pages.py`
+   - `evaluate_page_data()` — evaluates `:data` expression, kebab-cases dict keys, serializes as SX
+   - `auto_mount_page_data()` — mounts `GET /sx/data/<page_name>` endpoint
+   - Per-page auth enforcement via `_check_page_auth()`
+   - Response content type: `text/sx; charset=utf-8`
 
-### 4c: Async DOM renderer — `renderDOMAsync()`
+3. **Client-side data rendering** — `orchestration.sx`
+   - `try-client-route` handles `:data` pages: fetch data → parse SX → merge into env → render content
+   - Console log: `sx:route client+data <pathname>` confirms client-side rendering
+   - Component deps computed for `:data` pages too (not just pure pages)
 
-Two-pass (avoids restructuring sync renderer):
-1. Walk AST, collect I/O call sites with placeholders
-2. `Promise.all` to resolve all I/O in parallel
-3. Substitute resolved values into AST
-4. Call existing sync `renderDOM()` on resolved tree
+4. **Client data cache** — `orchestration.sx`
+   - `_page-data-cache` dict keyed by `page-name:param=value`
+   - 30s TTL (configurable via `_page-data-cache-ttl`)
+   - Cache hit: `sx:route client+cache <pathname>` — renders instantly
+   - Cache miss: fetches, caches, renders
+   - Stale entries evicted on next access
 
-### 4d: Wire into `Sx.mount()`
+5. **Test page** — `sx/sx/data-test.sx`
+   - Exercises full data pipeline: server time, pipeline steps, phase/transport metadata
+   - Navigate from another page → console shows `sx:route client+data`
+   - Navigate back → console shows `sx:route client+cache`
 
-Detect I/O nodes. If present → async path. Otherwise → existing sync path (zero overhead for pure components).
+6. **Unit tests** — `shared/sx/tests/test_page_data.py` (20 tests)
+   - Serialize roundtrip for all data types
+   - Kebab-case key conversion
+   - Component deps for `:data` pages
+   - Full pipeline simulation (serialize → parse → merge → eval)
 
-**Files:** `shared/static/scripts/sx.js` (major addition)
-
-**Verify:** Page with `(query "blog" "post-by-slug" :slug "test")` in sx source → client fetches `/api/data/post-by-slug?slug=test`, renders result.
+**Files:**
+- `shared/sx/ref/orchestration.sx` — `resolve-page-data` spec, data cache
+- `shared/sx/ref/bootstrap_js.py` — platform `resolvePageData` implementation
+- `shared/sx/pages.py` — `evaluate_page_data()`, `auto_mount_page_data()`
+- `shared/sx/helpers.py` — deps for `:data` pages
+- `sx/sx/data-test.sx` — test component
+- `sx/sxc/pages/docs.sx` — test page defpage
+- `sx/sxc/pages/helpers.py` — `data-test-data` helper
+- `sx/sx/boundary.sx` — helper declaration
+- `shared/sx/tests/test_page_data.py` — unit tests
 
 ---
 
-## Phase 5: Data-Only Navigation
+### Phase 5: Async Continuations & Inline IO
 
-When the client already has page components cached, navigation requires only a data fetch — no sx source from the server.
+**What it enables:** Components call IO primitives directly in their body (e.g. `(query ...)`). The evaluator suspends mid-evaluation, fetches data, resumes. Same component source works on both server (Python async/await) and client (continuation-based suspension).
 
-### 5a: Page components in the registry
+**The problem:** The existing `shift/reset` continuations extension is synchronous (throw/catch). Client-side IO via `fetch()` returns a Promise, and you can't throw-catch across an async boundary. The evaluator needs Promise-aware continuations.
 
-`defpage` definitions are already in `_componentEnv` (Phase 1c) and cached in localStorage with the component hash. On navigation, if the hash is valid, the client has all page definitions locally.
+**Approach:**
 
-Build a `_pageRegistry` mapping URL path patterns → page definitions, populated when `defpage` forms are evaluated. Path patterns (`/posts/<slug>/`) converted to regex matchers for URL matching.
+1. **Async-aware shift/reset** — extend the continuations extension:
+   - `sfShift` captures the continuation and returns a Promise
+   - `sfReset` awaits Promise results in the trampoline
+   - Continuation resume feeds the fetched value back into the evaluation
 
-### 5b: Navigation intercept
+2. **IO primitive bridge** — register async IO primitives in client `PRIMITIVES`:
+   - `query` → fetch to `/internal/data/`
+   - `service` → fetch to target service internal endpoint
+   - `frag` → fetch fragment HTML
+   - `current-user` → cached from initial page load
 
-Extend SxEngine's link click handler:
+3. **CPS transform option** — alternative to Promise-aware shift/reset:
+   - Transform the evaluator to continuation-passing style
+   - Every eval step takes a continuation argument
+   - IO primitives call the continuation after fetch resolves
+   - Architecturally cleaner but requires deeper changes
 
-```
-1. Extract URL path from clicked link
-2. Match against _pageRegistry
-3. If matched:
-   a. Evaluate :data slot via sxEvalAsync() → parallel API fetches
-   b. Render :content/:filter/:aside via renderDOMAsync()
-   c. Morph into existing ~app-body (headers persist, slots update)
-   d. Push history state
-   e. Update document title
-4. If not matched → existing server fetch (graceful fallback)
-```
+**Depends on:** Phase 4 (data endpoint infrastructure)
 
-### 5c: Data delivery — flexible per page
-
-Three modes available (see Context section). The page definition can declare its preference:
-
-```scheme
-(defpage blog-post
-  :path "/posts/<slug>/"
-  :data-mode :server    ; :server (bundled), :client (fetch individually), :hybrid
-  :data (query "blog" "post-by-slug" :slug slug)
-  :content (~post-detail post))
-```
-
-**Mode :server** — Client sends `SX-Page: blog-post` header on navigation. Server evaluates `:data` slot (all queries, including cross-service), returns single JSON blob:
-```python
-if request.headers.get("SX-Page"):
-    data = await evaluate_data_slot(page_def, url_params)
-    return jsonify(data)
-```
-
-**Mode :client** — Client evaluates `:data` slot locally via `sxEvalAsync()`. Each `(query ...)` hits `/api/data/` independently. Each `(frag ...)` hits `/api/fragments/`. No server data endpoint needed.
-
-**Mode :hybrid** — Server bundles own-service data (direct DB). Client fetches cross-service data and fragments in parallel. The `:data` slot is split: server evaluates local queries, returns partial bundle + a manifest of remaining queries. Client resolves the rest.
-
-Default mode can be `:server` (fewest round-trips, simplest). Pages opt into `:client` or `:hybrid` when they want more decoupling or when cross-service data is heavy and benefits from parallel client fetches.
-
-### 5d: Popstate handling
-
-On browser back/forward:
-1. Check `_pageRegistry` for popped URL
-2. If matched → client render (same as 5b)
-3. If not → existing server fetch + morph
-
-### 5e: Graceful fallback
-
-Routes not in `_pageRegistry` fall through to server fetch. Partially migrated apps work — Python-only routes use server fetch, defpage routes get SPA behavior. No big-bang cutover.
-
-**Files:** `shared/static/scripts/sx.js`, `shared/sx/helpers.py`, `shared/sx/pages.py`
-
-**Verify:** Playwright: load page → click link to defpage route → assert no HTML response fetched (only JSON) → content correct → URL updated → back button works.
+**Verification:**
+- Component calling `(query ...)` on client fetches data and renders
+- Same component source → identical output on server and client
+- Suspension visible: placeholder → resolved content
 
 ---
 
-## Summary: The Full Lifecycle
+### Phase 6: Streaming & Suspense
 
-```
-1. App startup: Python loads .sx files → defcomp + defpage registered in _COMPONENT_ENV
-                                        → hash computed
+**What it enables:** Server streams partially-evaluated SX as IO resolves. Client renders available subtrees immediately, fills in suspended parts. Like React Suspense but built on delimited continuations.
 
-2. First visit:  Server sends HTML shell + component/page defs + __sxConfig + page sx source
-                  Client evaluates, renders, caches defs in localStorage, sets cookie
+**Approach:**
 
-3. Return visit: Cookie hash matches → server sends HTML shell with empty <script data-components>
-                  Client loads defs from localStorage → renders page
+1. **Continuation-based suspension** — when `_aser` encounters IO during slot evaluation, emit a placeholder with a suspension ID, schedule async resolution:
+   ```python
+   yield SxExpr(f'(~suspense :id "{placeholder_id}" :fallback (div "Loading..."))')
+   schedule_fill(placeholder_id, io_coroutine)
+   ```
 
-4. SPA navigation: Client matches URL against _pageRegistry
-                    → fetches data from /api/data/ (or server data-only endpoint)
-                    → renders page component locally with fresh data
-                    → morphs DOM, pushes history
-                    → zero sx source transferred
+2. **Chunked transfer** — Quart async generator responses:
+   - First chunk: HTML shell + synchronous content + placeholders
+   - Subsequent chunks: `<script>` tags replacing placeholders with resolved content
 
-5. Bot/SSR:      Server detects bot UA → evaluates page server-side with direct DB queries
-                  → sends rendered HTML + component defs
-                  → client hydrates (binds handlers, no re-render)
-```
+3. **Client suspension rendering** — `~suspense` component renders fallback, listens for resolution via inline script or SSE (existing SSE infrastructure in orchestration.sx).
 
-## Migration per Service
+4. **Priority-based IO** — above-fold content resolves first. All IO starts concurrently (`asyncio.create_task`), results flushed in priority order.
 
-Each service migrates independently, no coordination needed:
-1. Add public data blueprint (Phase 3) — immediate standalone value
-2. Convert remaining Jinja routes to `defpage` — already in progress
-3. Enable SSR for bots (Phase 2) — per-page opt-in
-4. Client data primitives (Phase 4) — global once sx.js updated
-5. Data-only navigation (Phase 5) — automatic for any `defpage` route
+**Files:**
+- `shared/sx/async_eval.py` — streaming `_aser` variant
+- `shared/sx/helpers.py` — chunked response builder
+- New: `shared/sx/ref/suspense.sx` — client suspension rendering
+- `shared/sx/ref/boot.sx` — handle resolution scripts
+
+**Depends on:** Phase 5 (async continuations for filling suspended subtrees), Phase 2 (IO analysis for priority)
 
 ---
 
-## Why: Architectural Rationale
+### Phase 7: Full Isomorphism
 
-The end state is: **sx.js is the only JavaScript in the browser.** All application code — components, pages, routing, event handling, data fetching — is expressed in sx, evaluated by the interpreter, with behavior mediated through bound primitives.
+**What it enables:** Same SX code runs on either side. Runtime chooses optimal split. Offline-first with cached data + client eval.
 
-### Benefits
+**Approach:**
 
-**Single language everywhere.** Components, pages, routing, event handling, data fetching — all sx. No context-switching between JS idioms and template syntax. One language for the entire frontend and the server rendering path.
+1. **Runtime boundary optimizer** — given component tree + IO dependency graph, decide per-component: server-expand, client-render, or stream. Planning step cached at registration, recomputed on component change.
 
-**Portability.** The same source runs on any VM that implements the ~50-primitive interface. Today: Python + JS. Tomorrow: WASM, edge workers, native mobile, embedded devices. Coupled to a primitive contract, not to a specific runtime.
+2. **Affinity annotations** — optional developer hints:
+   ```lisp
+   (defcomp ~product-grid (&key products)
+     :affinity :client  ;; interactive, prefer client
+     ...)
+   (defcomp ~auth-menu (&key user)
+     :affinity :server  ;; auth-sensitive, always server
+     ...)
+   ```
+   Default: auto (runtime decides from IO analysis).
 
-**Smaller wire transfer.** S-expressions are terser than equivalent JS. Combined with content-addressed caching (hash/localStorage), most navigations transfer zero code — just data.
+3. **Optimistic data updates** — extend existing `apply-optimistic`/`revert-optimistic` in `engine.sx` from DOM-level to data-level:
+   - Client updates cached data optimistically (e.g., like button increments count)
+   - Sends mutation to server
+   - If server confirms, keep; if rejects, revert cached data and re-render
 
-**Inspectability.** The sx source is the running program — no build step, no source maps, no minification. View source shows exactly what executes. The AST is the structure the evaluator walks. Debugging is tracing a tree.
+4. **Offline data layer** — Service Worker intercepts `/internal/data/` requests, serves from IndexedDB when offline, syncs when back online.
 
-**Controlled surface area.** The only JS that runs is sx.js. Everything else is mediated through defined primitives. No npm supply chain. No third-party scripts with ambient DOM access. Components can only do what primitives allow — the capability surface is fully controlled.
+5. **Isomorphic testing** — evaluate same component on Python and JS, compare output. Extends existing `test_sx_ref.py` cross-evaluator comparison.
 
-**Hot-reloadable everything.** Components are data (cached AST). Swapping a definition is replacing a dict entry. No module system, no import graph, no HMR machinery. Already works for .sx file changes in dev mode — extends to behaviors too.
+6. **Universal page descriptor** — `defpage` is portable: server executes via `execute_page()`, client executes via route match → fetch data → eval content → render DOM. Same descriptor, different execution environment.
 
-**AI-friendly.** S-expressions are trivially parseable and generatable. An LLM produces correct sx far more reliably than JS/JSX — fewer syntax edge cases, no semicolons/braces/arrow-function ambiguities. The codebase becomes more amenable to automated generation and transformation.
+**Depends on:** All previous phases.
 
-**Security boundary.** No `eval()`, no dynamic `<script>` injection, no prototype pollution. The sx evaluator is a sandbox — it only resolves symbols against the primitive table and component env. Auditing what any sx expression can do means auditing the primitive bindings.
+---
 
-### Performance and WASM
+## Cross-Cutting Concerns
 
-The tradeoff is interpreter overhead — a tree-walking interpreter is slower than native JS execution. For UI rendering (building DOM, handling events, fetching data), this is not the bottleneck — DOM operations dominate, and those are the same speed regardless of initiator.
+### Error Reporting (all phases)
+- Phase 1: "Unknown component" includes which page expected it and what bundle was sent
+- Phase 2: Server logs which components expanded server-side vs sent to client
+- Phase 3: Client route failures include unmatched path and available routes
+- Phase 4: Client IO errors include query name, params, server response
+- Source location tracking in parser → propagate through eval → include in error messages
 
-If performance ever becomes a concern, WASM is the escape hatch at three levels:
+### Backward Compatibility (all phases)
+- Pages without annotations behave as today
+- `SX-Request` / `SX-Components` / `SX-Css` header protocol continues
+- Existing `.sx` files require no changes
+- `_expand_components` continues as override
+- Each phase is opt-in: disable → identical to previous behavior
 
-1. **Evaluator in WASM.** Rewrite `sxEval` in Rust/Zig → WASM. The tight inner loop (symbol lookup, env traversal, function application) runs ~10-50x faster. DOM rendering stays in JS (it calls browser APIs regardless).
+### Spec Integrity
+All new behavior specified in `.sx` files under `shared/sx/ref/` before implementation. Bootstrappers transpile from spec. This ensures JS and Python stay in sync.
 
-2. **Compile sx to WASM.** Ahead-of-time compiler: `.sx` → WASM modules. Each `defcomp` becomes a WASM function returning DOM instructions. Eliminates the interpreter entirely. The content-addressed cache stores compiled WASM blobs instead of sx source.
+## Critical Files
 
-3. **Compute-heavy primitives in WASM.** Keep the sx interpreter in JS, bind specific primitives to WASM (image processing, crypto, data transformation). Most pragmatic and least disruptive — additive, no architecture change.
-
-The primitive-binding model means the evaluator doesn't care what's behind a primitive. `(blur-image data radius)` could be a JS Canvas call today and a WASM JAX kernel tomorrow. The sx source doesn't change.
-
-### Server-Driven by Default: The React Question
-
-The sx system is architecturally aligned with HTMX/LiveView — server-driven UI — even though it does far more on the client (full s-expression evaluation, DOM rendering, morph reconciliation, component caching). The server is the single source of truth. Every UI state is a URL. Auth is enforced at render time. There are no state synchronization bugs because there is no client state to synchronize.
-
-React's client-state model (`useState`, `useEffect`, Context, Suspense) exists because React was built for SPAs that need to feel like native apps — optimistic updates, offline capability, instant feedback without network latency. But it created an entire category of problems: state management libraries, hydration mismatches, cache invalidation, stale closures, memory leaks from forgotten cleanup, the `useEffect` footgun.
-
-**The question is not "should sx have useState" — it's which specific interactions actually suffer from the server round-trip.**
-
-For most of our apps, that's a very short list:
-- Toggle a mobile nav panel
-- Gallery image switching
-- Quantity steppers
-- Live search-as-you-type
-
-These don't need a general-purpose reactive state system. They need **targeted client-side primitives** that handle those specific cases without abandoning the server-driven model.
-
-**The dangerous path:** Add `useState` → need `useEffect` for cleanup → need Context to avoid prop drilling → need Suspense for async state → rebuild React inside sx → lose the simplicity that makes the server-driven model work.
-
-**The careful path:** Keep server-driven as the default. Add explicit, targeted escape hatches for interactions that genuinely need client-side state. Make those escape hatches obviously different from the normal flow so they don't creep into everything.
-
-#### What sx has vs React
-
-| React feature | SX status | Verdict |
-|---|---|---|
-| Components + props | `defcomp` + `&key` | Done — cleaner than JSX |
-| Fragments, conditionals, lists | `<>`, `if`/`when`/`cond`, `map` | Done — more expressive |
-| Macros | `defmacro` | Done — React has nothing like this |
-| OOB updates / portals | `sx-swap-oob` | Done — more powerful (server-driven) |
-| DOM reconciliation | `_morphDOM` (id-keyed) | Done — works during SxEngine swaps |
-| Reactive client state | None | **By design.** Server is source of truth. |
-| Component lifecycle | None | Add targeted primitives if body.js behaviors move to sx |
-| Context / providers | `_componentEnv` global | Sufficient for auth/theme; revisit if trees get deep |
-| Suspense / loading | `sx-request` CSS class | Sufficient for server-driven; revisit for Phase 4 client data |
-| Two-way data binding | None | Not needed — HTMX model (form POST → new HTML) works |
-| Error boundaries | Global `sx:responseError` | Sufficient; per-component boundaries are a future nice-to-have |
-| Keyed list reconciliation | id-based morph | Works; add `:key` prop support if list update bugs arise |
-
-#### Targeted escape hatches (not a general state system)
-
-For the few interactions that need client-side responsiveness, add **specific primitives** rather than a general framework:
-
-- `(toggle! el "class")` — CSS class toggle, no server trip
-- `(set-attr! el "attr" value)` — attribute manipulation
-- `(on-event el "click" handler)` — declarative event binding within sx
-- `(timer interval-ms handler)` — with automatic cleanup on DOM removal
-
-These are imperative DOM operations exposed as primitives — not reactive state. They let components handle simple client-side interactions without importing React's entire mental model. The server-driven flow remains the default for anything involving data.
+| File | Role | Phases |
+|------|------|--------|
+| `shared/sx/async_eval.py` | Core evaluator, `_aser`, server/client boundary | 2, 6 |
+| `shared/sx/helpers.py` | `sx_page()`, `sx_response()`, output pipeline | 1, 3, 4 |
+| `shared/sx/jinja_bridge.py` | `_COMPONENT_ENV`, component registry | 1, 2 |
+| `shared/sx/pages.py` | `defpage`, `execute_page()`, page lifecycle, data endpoint | 2, 3, 4 |
+| `shared/sx/ref/boot.sx` | Client boot, component caching, page registry | 1, 3, 4 |
+| `shared/sx/ref/orchestration.sx` | Client fetch/swap/morph, routing, data cache | 3, 4, 5 |
+| `shared/sx/ref/eval.sx` | Evaluator spec | 5 |
+| `shared/sx/ref/engine.sx` | Morph, swaps, triggers | 3 |
+| `shared/sx/ref/deps.sx` | Dependency + IO analysis (spec) | 1, 2 |
+| `shared/sx/ref/router.sx` | Client-side route matching | 3 |
+| `shared/sx/ref/bootstrap_js.py` | JS bootstrapper, platform implementations | 4, 5 |
+| New: `shared/sx/ref/suspense.sx` | Streaming/suspension | 6 |

events/app.py

@@ -1,7 +1,6 @@
 from __future__ import annotations
 
 import path_setup  # noqa: F401  # adds shared/ to sys.path
-import sx.sx_components as sx_components  # noqa: F401  # ensure Hypercorn --reload watches this file
 from pathlib import Path
 
 from quart import g, abort, request

events/bp/all_events/routes.py

@@ -67,7 +67,7 @@ def register() -> Blueprint:
         entries, has_more, pending_tickets, page_info = await _load_entries(page)
 
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_all_events_page, render_all_events_oob
+        from sxc.pages.renders import render_all_events_page, render_all_events_oob
 
         ctx = await get_template_context()
         if is_htmx_request():
@@ -84,8 +84,8 @@ def register() -> Blueprint:
 
         entries, has_more, pending_tickets, page_info = await _load_entries(page)
 
-        from sx.sx_components import render_all_events_cards
-        sx_src = await render_all_events_cards(entries, has_more, pending_tickets, page_info, page, view)
+        from sxc.pages.renders import render_all_events_cards
+        sx_src = render_all_events_cards(entries, has_more, pending_tickets, page_info, page, view)
         return sx_response(sx_src)
 
     @bp.post("/all-tickets/adjust")
@@ -125,8 +125,8 @@ def register() -> Blueprint:
         if ident["session_id"] is not None:
             frag_params["session_id"] = ident["session_id"]
 
-        from sx.sx_components import render_ticket_widget
-        widget_html = await render_ticket_widget(entry, qty, "/all-tickets/adjust")
+        from sxc.pages.tickets import render_ticket_widget
+        widget_html = render_ticket_widget(entry, qty, "/all-tickets/adjust")
         mini_html = await fetch_fragment("cart", "cart-mini", params=frag_params, required=False)
         return sx_response(widget_html + (mini_html or ""))
 

events/bp/calendar/admin/routes.py

@@ -18,8 +18,8 @@ def register():
     @bp.get("/description/")
     @require_admin
     async def calendar_description_edit(calendar_slug: str, **kwargs):
-        from sx.sx_components import render_calendar_description_edit
-        html = await render_calendar_description_edit(g.calendar)
+        from sxc.pages.renders import render_calendar_description_edit
+        html = render_calendar_description_edit(g.calendar)
         return sx_response(html)
 
 
@@ -34,16 +34,16 @@ def register():
         g.calendar.description = description
         await g.s.flush()
 
-        from sx.sx_components import render_calendar_description
-        html = await render_calendar_description(g.calendar, oob=True)
+        from sxc.pages.renders import render_calendar_description
+        html = render_calendar_description(g.calendar, oob=True)
         return sx_response(html)
 
 
     @bp.get("/description/view/")
     @require_admin
     async def calendar_description_view(calendar_slug: str, **kwargs):
-        from sx.sx_components import render_calendar_description
-        html = await render_calendar_description(g.calendar)
+        from sxc.pages.renders import render_calendar_description
+        html = render_calendar_description(g.calendar)
         return sx_response(html)
     
     return bp

events/bp/calendar/routes.py

@@ -158,7 +158,7 @@ def register():
         confirmed_entries = visible.confirmed_entries
 
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_calendar_page, render_calendar_oob
+        from sxc.pages.renders import render_calendar_page, render_calendar_oob
 
         tctx = await get_template_context()
         tctx.update(dict(
@@ -199,9 +199,9 @@ def register():
 
         await update_calendar_description(g.calendar, description)
         from shared.sx.page import get_template_context
-        from sx.sx_components import _calendar_admin_main_panel_html
+        from sxc.pages.calendar import _calendar_admin_main_panel_html
         ctx = await get_template_context()
-        html = await _calendar_admin_main_panel_html(ctx)
+        html = _calendar_admin_main_panel_html(ctx)
         return sx_response(html)
 
 
@@ -218,13 +218,13 @@ def register():
         # If we have post context (blog-embedded mode), update nav
         post_data = getattr(g, "post_data", None)
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_calendars_list_panel
+        from sxc.pages.renders import render_calendars_list_panel
         ctx = await get_template_context()
-        html = await render_calendars_list_panel(ctx)
+        html = render_calendars_list_panel(ctx)
 
         if post_data:
             from shared.services.entry_associations import get_associated_entries
-            from sx.sx_components import render_post_nav_entries_oob
+            from sxc.pages.entries import render_post_nav_entries_oob
 
             post_id = (post_data.get("post") or {}).get("id")
             cals = (
@@ -236,7 +236,7 @@ def register():
             ).scalars().all()
 
             associated_entries = await get_associated_entries(post_id)
-            nav_oob = await render_post_nav_entries_oob(associated_entries, cals, post_data["post"])
+            nav_oob = render_post_nav_entries_oob(associated_entries, cals, post_data["post"])
             html = html + nav_oob
 
         return sx_response(html)

events/bp/calendar_entries/routes.py

@@ -258,8 +258,8 @@ def register():
             "styles": styles,
         }
 
-        from sx.sx_components import render_day_main_panel
-        html = await render_day_main_panel(ctx)
+        from sxc.pages.renders import render_day_main_panel
+        html = render_day_main_panel(ctx)
         mini_html = await fetch_fragment("cart", "cart-mini", params=frag_params, required=False)
         return sx_response(html + (mini_html or ""))
     
@@ -279,13 +279,13 @@ def register():
         result = await g.s.execute(stmt)
         day_slots = list(result.scalars())
 
-        from sx.sx_components import render_entry_add_form
-        return sx_response(await render_entry_add_form(g.calendar, day, month, year, day_slots))
+        from sxc.pages.entries import render_entry_add_form
+        return sx_response(render_entry_add_form(g.calendar, day, month, year, day_slots))
 
     @bp.get("/add-button/")
     async def add_button(day: int, month: int, year: int, **kwargs):
-        from sx.sx_components import render_entry_add_button
-        return sx_response(await render_entry_add_button(g.calendar, day, month, year))
+        from sxc.pages.entries import render_entry_add_button
+        return sx_response(render_entry_add_button(g.calendar, day, month, year))
 
 
 

events/bp/calendar_entry/routes.py

@@ -111,8 +111,8 @@ def register():
         )
 
         # Render OOB nav
-        from sx.sx_components import render_day_entries_nav_oob
-        return await render_day_entries_nav_oob(visible.confirmed_entries, calendar, day_date)
+        from sxc.pages.entries import render_day_entries_nav_oob
+        return render_day_entries_nav_oob(visible.confirmed_entries, calendar, day_date)
 
     async def get_post_nav_oob(entry_id: int):
         """Helper to generate OOB update for post entries nav when entry state changes"""
@@ -148,8 +148,8 @@ def register():
             ).scalars().all()
 
             # Render OOB nav for this post
-            from sx.sx_components import render_post_nav_entries_oob
-            nav_oob = await render_post_nav_entries_oob(associated_entries, calendars, post)
+            from sxc.pages.entries import render_post_nav_entries_oob
+            nav_oob = render_post_nav_entries_oob(associated_entries, calendars, post)
             nav_oobs.append(nav_oob)
 
         return "".join(nav_oobs)
@@ -256,8 +256,8 @@ def register():
         result = await g.s.execute(stmt)
         day_slots = list(result.scalars())
 
-        from sx.sx_components import render_entry_edit_form
-        return sx_response(await render_entry_edit_form(g.entry, g.calendar, day, month, year, day_slots))
+        from sxc.pages.entries import render_entry_edit_form
+        return sx_response(render_entry_edit_form(g.entry, g.calendar, day, month, year, day_slots))
 
     @bp.put("/")
     @require_admin
@@ -420,10 +420,10 @@ def register():
         nav_oob = await get_day_nav_oob(year, month, day)
 
         from shared.sx.page import get_template_context
-        from sx.sx_components import _entry_main_panel_html
+        from sxc.pages.entries import _entry_main_panel_html
 
         tctx = await get_template_context()
-        html = await _entry_main_panel_html(tctx)
+        html = _entry_main_panel_html(tctx)
         return sx_response(html + nav_oob)
 
 
@@ -448,8 +448,8 @@ def register():
 
         # Re-read entry to get updated state
         await g.s.refresh(g.entry)
-        from sx.sx_components import render_entry_optioned
-        html = await render_entry_optioned(g.entry, g.calendar, day, month, year)
+        from sxc.pages.entries import render_entry_optioned
+        html = render_entry_optioned(g.entry, g.calendar, day, month, year)
         return sx_response(html + day_nav_oob + post_nav_oob)
 
     @bp.post("/decline/")
@@ -473,8 +473,8 @@ def register():
 
         # Re-read entry to get updated state
         await g.s.refresh(g.entry)
-        from sx.sx_components import render_entry_optioned
-        html = await render_entry_optioned(g.entry, g.calendar, day, month, year)
+        from sxc.pages.entries import render_entry_optioned
+        html = render_entry_optioned(g.entry, g.calendar, day, month, year)
         return sx_response(html + day_nav_oob + post_nav_oob)
 
     @bp.post("/provisional/")
@@ -498,8 +498,8 @@ def register():
 
         # Re-read entry to get updated state
         await g.s.refresh(g.entry)
-        from sx.sx_components import render_entry_optioned
-        html = await render_entry_optioned(g.entry, g.calendar, day, month, year)
+        from sxc.pages.entries import render_entry_optioned
+        html = render_entry_optioned(g.entry, g.calendar, day, month, year)
         return sx_response(html + day_nav_oob + post_nav_oob)
 
     @bp.post("/tickets/")
@@ -542,8 +542,8 @@ def register():
 
         # Return just the tickets fragment (targeted by hx-target="#entry-tickets-...")
         await g.s.refresh(g.entry)
-        from sx.sx_components import render_entry_tickets_config
-        html = await render_entry_tickets_config(g.entry, g.calendar, request.view_args.get("day"), request.view_args.get("month"), request.view_args.get("year"))
+        from sxc.pages.entries import render_entry_tickets_config
+        html = render_entry_tickets_config(g.entry, g.calendar, request.view_args.get("day"), request.view_args.get("month"), request.view_args.get("year"))
         return sx_response(html)
 
     @bp.get("/posts/search/")
@@ -558,8 +558,8 @@ def register():
         total_pages = math.ceil(total / per_page) if total > 0 else 0
 
         va = request.view_args or {}
-        from sx.sx_components import render_post_search_results
-        return sx_response(await render_post_search_results(
+        from sxc.pages.entries import render_post_search_results
+        return sx_response(render_post_search_results(
             search_posts, query, page, total_pages,
             g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
@@ -592,10 +592,10 @@ def register():
         entry_posts = await get_entry_posts(g.s, entry_id)
 
         # Return updated posts list + OOB nav update
-        from sx.sx_components import render_entry_posts_panel, render_entry_posts_nav_oob
+        from sxc.pages.entries import render_entry_posts_panel, render_entry_posts_nav_oob
         va = request.view_args or {}
-        html = await render_entry_posts_panel(entry_posts, g.entry, g.calendar, va.get("day"), va.get("month"), va.get("year"))
-        nav_oob = await render_entry_posts_nav_oob(entry_posts)
+        html = render_entry_posts_panel(entry_posts, g.entry, g.calendar, va.get("day"), va.get("month"), va.get("year"))
+        nav_oob = render_entry_posts_nav_oob(entry_posts)
         return sx_response(html + nav_oob)
 
     @bp.delete("/posts/<int:post_id>/")
@@ -614,10 +614,10 @@ def register():
         entry_posts = await get_entry_posts(g.s, entry_id)
 
         # Return updated posts list + OOB nav update
-        from sx.sx_components import render_entry_posts_panel, render_entry_posts_nav_oob
+        from sxc.pages.entries import render_entry_posts_panel, render_entry_posts_nav_oob
         va = request.view_args or {}
-        html = await render_entry_posts_panel(entry_posts, g.entry, g.calendar, va.get("day"), va.get("month"), va.get("year"))
-        nav_oob = await render_entry_posts_nav_oob(entry_posts)
+        html = render_entry_posts_panel(entry_posts, g.entry, g.calendar, va.get("day"), va.get("month"), va.get("year"))
+        nav_oob = render_entry_posts_nav_oob(entry_posts)
         return sx_response(html + nav_oob)
 
     return bp

events/bp/calendars/routes.py

@@ -32,7 +32,7 @@ def register():
     @cache_page(tag="calendars")
     async def home(**kwargs):
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_calendars_page, render_calendars_oob
+        from sxc.pages.renders import render_calendars_page, render_calendars_oob
 
         ctx = await get_template_context()
         if not is_htmx_request():
@@ -67,14 +67,14 @@ def register():
             return await make_response(render_comp("error-inline", message=str(e)), 422)
 
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_calendars_list_panel
+        from sxc.pages.renders import render_calendars_list_panel
         ctx = await get_template_context()
-        html = await render_calendars_list_panel(ctx)
+        html = render_calendars_list_panel(ctx)
 
         # Blog-embedded mode: also update post nav
         if post_data:
             from shared.services.entry_associations import get_associated_entries
-            from sx.sx_components import render_post_nav_entries_oob
+            from sxc.pages.entries import render_post_nav_entries_oob
 
             cals = (
                 await g.s.execute(
@@ -85,7 +85,7 @@ def register():
             ).scalars().all()
 
             associated_entries = await get_associated_entries(post_id)
-            nav_oob = await render_post_nav_entries_oob(associated_entries, cals, post_data["post"])
+            nav_oob = render_post_nav_entries_oob(associated_entries, cals, post_data["post"])
             html = html + nav_oob
 
         return sx_response(html)

events/bp/day/routes.py

@@ -123,7 +123,7 @@ def register():
             - pending only for current user/session
         """
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_day_page, render_day_oob
+        from sxc.pages.renders import render_day_page, render_day_oob
 
         tctx = await get_template_context()
         if not is_htmx_request():

events/bp/markets/routes.py

@@ -42,9 +42,9 @@ def register():
             return await make_response(render_comp("error-inline", message=str(e)), 422)
 
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_markets_list_panel
+        from sxc.pages.renders import render_markets_list_panel
         ctx = await get_template_context()
-        return sx_response(await render_markets_list_panel(ctx))
+        return sx_response(render_markets_list_panel(ctx))
 
     @bp.delete("/<market_slug>/")
     @require_admin
@@ -55,8 +55,8 @@ def register():
             return await make_response("Market not found", 404)
 
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_markets_list_panel
+        from sxc.pages.renders import render_markets_list_panel
         ctx = await get_template_context()
-        return sx_response(await render_markets_list_panel(ctx))
+        return sx_response(render_markets_list_panel(ctx))
 
     return bp

events/bp/page/routes.py

@@ -47,7 +47,7 @@ def register() -> Blueprint:
         entries, has_more, pending_tickets = await _load_entries(post["id"], page)
 
         from shared.sx.page import get_template_context
-        from sx.sx_components import render_page_summary_page, render_page_summary_oob
+        from sxc.pages.renders import render_page_summary_page, render_page_summary_oob
 
         ctx = await get_template_context()
         if is_htmx_request():
@@ -65,8 +65,8 @@ def register() -> Blueprint:
 
         entries, has_more, pending_tickets = await _load_entries(post["id"], page)
 
-        from sx.sx_components import render_page_summary_cards
-        sx_src = await render_page_summary_cards(entries, has_more, pending_tickets, {}, page, view, post)
+        from sxc.pages.renders import render_page_summary_cards
+        sx_src = render_page_summary_cards(entries, has_more, pending_tickets, {}, page, view, post)
         return sx_response(sx_src)
 
     @bp.post("/tickets/adjust")
@@ -106,8 +106,8 @@ def register() -> Blueprint:
         if ident["session_id"] is not None:
             frag_params["session_id"] = ident["session_id"]
 
-        from sx.sx_components import render_ticket_widget
-        widget_html = await render_ticket_widget(entry, qty, f"/{g.post_slug}/tickets/adjust")
+        from sxc.pages.tickets import render_ticket_widget
+        widget_html = render_ticket_widget(entry, qty, f"/{g.post_slug}/tickets/adjust")
         mini_html = await fetch_fragment("cart", "cart-mini", params=frag_params, required=False)
         return sx_response(widget_html + (mini_html or ""))
 

events/bp/slot/routes.py

@@ -35,8 +35,8 @@ def register():
         slot = await svc_get_slot(g.s, slot_id)
         if not slot:
             return await make_response("Not found", 404)
-        from sx.sx_components import render_slot_edit_form
-        return sx_response(await render_slot_edit_form(slot, g.calendar))
+        from sxc.pages.slots import render_slot_edit_form
+        return sx_response(render_slot_edit_form(slot, g.calendar))
 
     @bp.get("/view/")
     @require_admin
@@ -44,8 +44,8 @@ def register():
         slot = await svc_get_slot(g.s, slot_id)
         if not slot:
             return await make_response("Not found", 404)
-        from sx.sx_components import render_slot_main_panel
-        return sx_response(await render_slot_main_panel(slot, g.calendar))
+        from sxc.pages.slots import render_slot_main_panel
+        return sx_response(render_slot_main_panel(slot, g.calendar))
 
     @bp.delete("/")
     @require_admin
@@ -53,8 +53,8 @@ def register():
     async def slot_delete(slot_id: int, **kwargs):
         await svc_delete_slot(g.s, slot_id)
         slots = await svc_list_slots(g.s, g.calendar.id)
-        from sx.sx_components import render_slots_table
-        return sx_response(await render_slots_table(slots, g.calendar))
+        from sxc.pages.slots import render_slots_table
+        return sx_response(render_slots_table(slots, g.calendar))
 
     @bp.put("/")
     @require_admin
@@ -135,8 +135,8 @@ def register():
                 }
             ), 422
 
-        from sx.sx_components import render_slot_main_panel
-        return sx_response(await render_slot_main_panel(slot, g.calendar, oob=True))
+        from sxc.pages.slots import render_slot_main_panel
+        return sx_response(render_slot_main_panel(slot, g.calendar, oob=True))
 
     
 

events/bp/slots/routes.py

@@ -110,20 +110,20 @@ def register():
 
         # Success → re-render the slots table
         slots = await svc_list_slots(g.s, g.calendar.id)
-        from sx.sx_components import render_slots_table
-        return sx_response(await render_slots_table(slots, g.calendar))
+        from sxc.pages.slots import render_slots_table
+        return sx_response(render_slots_table(slots, g.calendar))
 
         
     @bp.get("/add")
     @require_admin
     async def add_form(**kwargs):
-        from sx.sx_components import render_slot_add_form
-        return sx_response(await render_slot_add_form(g.calendar))
+        from sxc.pages.slots import render_slot_add_form
+        return sx_response(render_slot_add_form(g.calendar))
 
     @bp.get("/add-button")
     @require_admin
     async def add_button(**kwargs):
-        from sx.sx_components import render_slot_add_button
-        return sx_response(await render_slot_add_button(g.calendar))
+        from sxc.pages.slots import render_slot_add_button
+        return sx_response(render_slot_add_button(g.calendar))
 
     return bp

events/bp/ticket_admin/routes.py

@@ -53,8 +53,8 @@ def register() -> Blueprint:
 
         tickets = await get_tickets_for_entry(g.s, entry_id)
 
-        from sx.sx_components import render_entry_tickets_admin
-        html = await render_entry_tickets_admin(entry, tickets)
+        from sxc.pages.tickets import render_entry_tickets_admin
+        html = render_entry_tickets_admin(entry, tickets)
         return sx_response(html)
 
     @bp.get("/lookup/")
@@ -69,11 +69,11 @@ def register() -> Blueprint:
             )
 
         ticket = await get_ticket_by_code(g.s, code)
-        from sx.sx_components import render_lookup_result
+        from sxc.pages.tickets import render_lookup_result
         if not ticket:
-            return sx_response(await render_lookup_result(None, "Ticket not found"))
+            return sx_response(render_lookup_result(None, "Ticket not found"))
 
-        return sx_response(await render_lookup_result(ticket, None))
+        return sx_response(render_lookup_result(ticket, None))
 
     @bp.post("/<code>/checkin/")
     @require_admin
@@ -82,11 +82,11 @@ def register() -> Blueprint:
         """Check in a ticket by its code."""
         success, error = await checkin_ticket(g.s, code)
 
-        from sx.sx_components import render_checkin_result
+        from sxc.pages.tickets import render_checkin_result
         if not success:
-            return sx_response(await render_checkin_result(False, error, None))
+            return sx_response(render_checkin_result(False, error, None))
 
         ticket = await get_ticket_by_code(g.s, code)
-        return sx_response(await render_checkin_result(True, None, ticket))
+        return sx_response(render_checkin_result(True, None, ticket))
 
     return bp

events/bp/ticket_type/routes.py

@@ -30,9 +30,9 @@ def register():
         if not ticket_type:
             return await make_response("Not found", 404)
 
-        from sx.sx_components import render_ticket_type_edit_form
+        from sxc.pages.tickets import render_ticket_type_edit_form
         va = request.view_args or {}
-        return sx_response(await render_ticket_type_edit_form(
+        return sx_response(render_ticket_type_edit_form(
             ticket_type, g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
         ))
@@ -45,9 +45,9 @@ def register():
         if not ticket_type:
             return await make_response("Not found", 404)
 
-        from sx.sx_components import render_ticket_type_main_panel
+        from sxc.pages.tickets import render_ticket_type_main_panel
         va = request.view_args or {}
-        return sx_response(await render_ticket_type_main_panel(
+        return sx_response(render_ticket_type_main_panel(
             ticket_type, g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
         ))
@@ -112,9 +112,9 @@ def register():
             return await make_response("Not found", 404)
 
         # Return updated view with OOB flag
-        from sx.sx_components import render_ticket_type_main_panel
+        from sxc.pages.tickets import render_ticket_type_main_panel
         va = request.view_args or {}
-        return sx_response(await render_ticket_type_main_panel(
+        return sx_response(render_ticket_type_main_panel(
             ticket_type, g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
             oob=True,
@@ -131,9 +131,9 @@ def register():
 
         # Re-render the ticket types list
         ticket_types = await svc_list_ticket_types(g.s, g.entry.id)
-        from sx.sx_components import render_ticket_types_table
+        from sxc.pages.tickets import render_ticket_types_table
         va = request.view_args or {}
-        return sx_response(await render_ticket_types_table(
+        return sx_response(render_ticket_types_table(
             ticket_types, g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
         ))

events/bp/ticket_types/routes.py

@@ -93,9 +93,9 @@ def register():
 
         # Success → re-render the ticket types table
         ticket_types = await svc_list_ticket_types(g.s, g.entry.id)
-        from sx.sx_components import render_ticket_types_table
+        from sxc.pages.tickets import render_ticket_types_table
         va = request.view_args or {}
-        return sx_response(await render_ticket_types_table(
+        return sx_response(render_ticket_types_table(
             ticket_types, g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
         ))
@@ -104,9 +104,9 @@ def register():
     @require_admin
     async def add_form(**kwargs):
         """Show the add ticket type form."""
-        from sx.sx_components import render_ticket_type_add_form
+        from sxc.pages.tickets import render_ticket_type_add_form
         va = request.view_args or {}
-        return sx_response(await render_ticket_type_add_form(
+        return sx_response(render_ticket_type_add_form(
             g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
         ))
@@ -115,9 +115,9 @@ def register():
     @require_admin
     async def add_button(**kwargs):
         """Show the add ticket type button."""
-        from sx.sx_components import render_ticket_type_add_button
+        from sxc.pages.tickets import render_ticket_type_add_button
         va = request.view_args or {}
-        return sx_response(await render_ticket_type_add_button(
+        return sx_response(render_ticket_type_add_button(
             g.entry, g.calendar,
             va.get("day"), va.get("month"), va.get("year"),
         ))

events/bp/tickets/routes.py

@@ -126,8 +126,8 @@ def register() -> Blueprint:
         summary = dto_from_dict(CartSummaryDTO, raw_summary) if raw_summary else CartSummaryDTO()
         cart_count = summary.count + summary.calendar_count + summary.ticket_count
 
-        from sx.sx_components import render_buy_result
-        return sx_response(await render_buy_result(entry, created, remaining, cart_count))
+        from sxc.pages.tickets import render_buy_result
+        return sx_response(render_buy_result(entry, created, remaining, cart_count))
 
     @bp.post("/adjust/")
     @clear_cache(tag="calendars", tag_scope="all")
@@ -249,8 +249,8 @@ def register() -> Blueprint:
         summary = dto_from_dict(CartSummaryDTO, raw_summary) if raw_summary else CartSummaryDTO()
         cart_count = summary.count + summary.calendar_count + summary.ticket_count
 
-        from sx.sx_components import render_adjust_response
-        return sx_response(await render_adjust_response(
+        from sxc.pages.tickets import render_adjust_response
+        return sx_response(render_adjust_response(
             entry, ticket_remaining, ticket_sold_count,
             user_ticket_count, user_ticket_counts_by_type, cart_count,
         ))

events/sx/admin.sx

@@ -1,6 +1,6 @@
 ;; Events admin components
 
-(defcomp ~events-calendar-admin-panel (&key description-content csrf description)
+(defcomp ~admin/calendar-admin-panel (&key description-content csrf description)
   (section :class "max-w-3xl mx-auto p-4 space-y-10"
     (div
       (h2 :class "text-xl font-semibold" "Calendar configuration")
@@ -19,45 +19,45 @@
         (div (button :class "px-3 py-2 rounded bg-stone-800 text-white" "Save"))))
     (hr :class "border-stone-200")))
 
-(defcomp ~events-entry-admin-link (&key href)
+(defcomp ~admin/entry-admin-link (&key href)
   (a :href href :class "inline-flex items-center gap-1 px-2 py-1 text-xs text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded"
     (i :class "fa fa-cog" :aria-hidden "true") " Admin"))
 
-(defcomp ~events-entry-field (&key label content)
+(defcomp ~admin/entry-field (&key label content)
   (div :class "flex flex-col mb-4"
     (div :class "text-xs font-semibold uppercase tracking-wide text-stone-500" label)
     content))
 
-(defcomp ~events-entry-name-field (&key name)
+(defcomp ~admin/entry-name-field (&key name)
   (div :class "mt-1 text-lg font-medium" name))
 
-(defcomp ~events-entry-slot-assigned (&key slot-name flex-label)
+(defcomp ~admin/entry-slot-assigned (&key slot-name flex-label)
   (div :class "mt-1"
     (span :class "px-2 py-1 rounded text-sm bg-blue-100 text-blue-700" slot-name)
     (span :class "ml-2 text-xs text-stone-500" flex-label)))
 
-(defcomp ~events-entry-slot-none ()
+(defcomp ~admin/entry-slot-none ()
   (div :class "mt-1" (span :class "text-sm text-stone-400" "No slot assigned")))
 
-(defcomp ~events-entry-time-field (&key time-str)
+(defcomp ~admin/entry-time-field (&key time-str)
   (div :class "mt-1" time-str))
 
-(defcomp ~events-entry-state-field (&key entry-id badge)
+(defcomp ~admin/entry-state-field (&key entry-id badge)
   (div :class "mt-1" (div :id (str "entry-state-" entry-id) badge)))
 
-(defcomp ~events-entry-cost-field (&key cost)
+(defcomp ~admin/entry-cost-field (&key cost)
   (div :class "mt-1" (span :class "font-medium text-green-600" cost)))
 
-(defcomp ~events-entry-tickets-field (&key entry-id tickets-config)
+(defcomp ~admin/entry-tickets-field (&key entry-id tickets-config)
   (div :class "mt-1" :id (str "entry-tickets-" entry-id) tickets-config))
 
-(defcomp ~events-entry-date-field (&key date-str)
+(defcomp ~admin/entry-date-field (&key date-str)
   (div :class "mt-1" date-str))
 
-(defcomp ~events-entry-posts-field (&key entry-id posts-panel)
+(defcomp ~admin/entry-posts-field (&key entry-id posts-panel)
   (div :class "mt-1" :id (str "entry-posts-" entry-id) posts-panel))
 
-(defcomp ~events-entry-panel (&key entry-id list-container name slot time state cost
+(defcomp ~admin/entry-panel (&key entry-id list-container name slot time state cost
                                     tickets buy date posts options pre-action edit-url)
   (section :id (str "entry-" entry-id) :class list-container
     name slot time state cost
@@ -68,21 +68,21 @@
               :sx-get edit-url :sx-target (str "#entry-" entry-id) :sx-swap "outerHTML"
         "Edit"))))
 
-(defcomp ~events-entry-title (&key name badge)
+(defcomp ~admin/entry-title (&key name badge)
   (<> (i :class "fa fa-clock") " " name " " badge))
 
-(defcomp ~events-entry-times (&key time-str)
+(defcomp ~admin/entry-times (&key time-str)
   (div :class "text-sm text-gray-600" time-str))
 
-(defcomp ~events-entry-optioned-oob (&key entry-id title state)
+(defcomp ~admin/entry-optioned-oob (&key entry-id title state)
   (<> (div :id (str "entry-title-" entry-id) :sx-swap-oob "innerHTML" title)
       (div :id (str "entry-state-" entry-id) :sx-swap-oob "innerHTML" state)))
 
-(defcomp ~events-entry-options (&key entry-id buttons)
+(defcomp ~admin/entry-options (&key entry-id buttons)
   (div :id (str "calendar_entry_options_" entry-id) :class "flex flex-col md:flex-row gap-1"
     buttons))
 
-(defcomp ~events-entry-option-button (&key url target csrf btn-type action-btn confirm-title confirm-text
+(defcomp ~admin/entry-option-button (&key url target csrf btn-type action-btn confirm-title confirm-text
                                             label is-btn)
   (form :sx-post url :sx-select target :sx-target target :sx-swap "outerHTML"
         :sx-trigger (if is-btn "confirmed" nil)

events/sx/boundary.sx

@@ -0,0 +1,61 @@
+;; Events service — page helper declarations.
+
+(define-page-helper "calendar-admin-data"
+  :params (&key calendar-slug)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "day-admin-data"
+  :params (&key calendar-slug year month day)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "slots-data"
+  :params (&key calendar-slug)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "slot-data"
+  :params (&key calendar-slug slot-id)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "entry-data"
+  :params (&key calendar-slug entry-id)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "entry-admin-data"
+  :params (&key calendar-slug entry-id year month day)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "ticket-types-data"
+  :params (&key calendar-slug entry-id year month day)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "ticket-type-data"
+  :params (&key calendar-slug entry-id ticket-type-id year month day)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "tickets-data"
+  :params (&key)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "ticket-detail-data"
+  :params (&key code)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "ticket-admin-data"
+  :params (&key)
+  :returns "dict"
+  :service "events")
+
+(define-page-helper "markets-data"
+  :params (&key)
+  :returns "dict"
+  :service "events")

events/sx/calendar.sx

@@ -1,34 +1,34 @@
 ;; Events calendar components
 
-(defcomp ~events-calendar-nav-arrow (&key pill-cls href label)
+(defcomp ~calendar/nav-arrow (&key (pill-cls :as string) (href :as string) (label :as string))
   (a :class (str pill-cls " text-xl") :href href
      :sx-get href :sx-target "#main-panel" :sx-select "#main-panel" :sx-swap "outerHTML" :sx-push-url "true" label))
 
-(defcomp ~events-calendar-month-label (&key month-name year)
+(defcomp ~calendar/month-label (&key (month-name :as string) (year :as string))
   (div :class "px-3 font-medium" (str month-name " " year)))
 
-(defcomp ~events-calendar-weekday (&key name)
+(defcomp ~calendar/weekday (&key (name :as string))
   (div :class "py-1" name))
 
-(defcomp ~events-calendar-day-short (&key day-str)
+(defcomp ~calendar/day-short (&key (day-str :as string))
   (span :class "sm:hidden text-[16px] text-stone-500" day-str))
 
-(defcomp ~events-calendar-day-num (&key pill-cls href num)
+(defcomp ~calendar/day-num (&key (pill-cls :as string) (href :as string) (num :as string))
   (a :class pill-cls :href href :sx-get href :sx-target "#main-panel" :sx-select "#main-panel"
      :sx-swap "outerHTML" :sx-push-url "true" num))
 
-(defcomp ~events-calendar-entry-badge (&key bg-cls name state-label)
+(defcomp ~calendar/entry-badge (&key (bg-cls :as string) (name :as string) (state-label :as string))
   (div :class (str "flex items-center justify-between gap-1 text-[11px] rounded px-1 py-0.5 " bg-cls)
     (span :class "truncate" name)
     (span :class "shrink-0 text-[10px] font-semibold uppercase tracking-tight" state-label)))
 
-(defcomp ~events-calendar-cell (&key cell-cls day-short day-num badges)
+(defcomp ~calendar/cell (&key (cell-cls :as string) day-short day-num badges)
   (div :class cell-cls
     (div :class "flex justify-between items-center"
       (div :class "flex flex-col" day-short day-num))
     (div :class "mt-1 space-y-0.5" badges)))
 
-(defcomp ~events-calendar-grid (&key arrows weekdays cells)
+(defcomp ~calendar/grid (&key arrows weekdays cells)
   (section :class "bg-orange-100"
     (header :class "flex items-center justify-center mt-2"
       (nav :class "flex items-center gap-2 text-2xl" arrows))
@@ -36,7 +36,37 @@
       (div :class "hidden sm:grid grid-cols-7 text-center text-md font-semibold text-stone-700 mb-2" weekdays)
       (div :class "grid grid-cols-1 sm:grid-cols-7 gap-px bg-stone-200 rounded-xl overflow-hidden" cells))))
 
-(defcomp ~events-calendar-description-display (&key description edit-url)
+;; Calendar grid from data — all iteration in sx
+(defcomp ~calendar/grid-from-data (&key (pill-cls :as string) (month-name :as string) (year :as string)
+                                               (prev-year-href :as string) (prev-month-href :as string)
+                                               (next-month-href :as string) (next-year-href :as string)
+                                               (weekday-names :as list) (cells :as list))
+  (~calendar/grid
+    :arrows (<>
+      (~calendar/nav-arrow :pill-cls pill-cls :href prev-year-href :label "\u00ab")
+      (~calendar/nav-arrow :pill-cls pill-cls :href prev-month-href :label "\u2039")
+      (~calendar/month-label :month-name month-name :year year)
+      (~calendar/nav-arrow :pill-cls pill-cls :href next-month-href :label "\u203a")
+      (~calendar/nav-arrow :pill-cls pill-cls :href next-year-href :label "\u00bb"))
+    :weekdays (<> (map (lambda (wd) (~calendar/weekday :name wd))
+                   (or weekday-names (list))))
+    :cells (<> (map (lambda (cell)
+      (~calendar/cell
+        :cell-cls (get cell "cell-cls")
+        :day-short (when (get cell "day-str")
+          (~calendar/day-short :day-str (get cell "day-str")))
+        :day-num (when (get cell "day-href")
+          (~calendar/day-num :pill-cls pill-cls
+            :href (get cell "day-href") :num (get cell "day-num")))
+        :badges (when (get cell "badges")
+          (<> (map (lambda (b)
+            (~calendar/entry-badge
+              :bg-cls (get b "bg-cls") :name (get b "name")
+              :state-label (get b "state-label")))
+            (get cell "badges"))))))
+      (or cells (list))))))
+
+(defcomp ~calendar/description-display (&key (description :as string?) (edit-url :as string))
   (div :id "calendar-description"
     (if description
       (p :class "text-stone-700 whitespace-pre-line break-all" description)
@@ -45,12 +75,12 @@
             :sx-get edit-url :sx-target "#calendar-description" :sx-swap "outerHTML"
       (i :class "fas fa-edit"))))
 
-(defcomp ~events-calendar-description-title-oob (&key description)
+(defcomp ~calendar/description-title-oob (&key (description :as string))
   (div :id "calendar-description-title" :sx-swap-oob "outerHTML"
        :class "text-base font-normal break-words whitespace-normal min-w-0 break-all w-full text-center block"
     description))
 
-(defcomp ~events-calendar-description-edit-form (&key save-url cancel-url csrf description)
+(defcomp ~calendar/description-edit-form (&key (save-url :as string) (cancel-url :as string) (csrf :as string) (description :as string?))
   (div :id "calendar-description"
     (form :sx-post save-url :sx-target "#calendar-description" :sx-swap "outerHTML"
       (input :type "hidden" :name "csrf_token" :value csrf)

events/sx/day.sx

@@ -1,18 +1,18 @@
 ;; Events day components
 
-(defcomp ~events-day-entry-link (&key href name time-str)
+(defcomp ~day/entry-link (&key (href :as string) (name :as string) (time-str :as string))
   (a :href href :class "flex items-center gap-2 px-3 py-2 hover:bg-stone-100 rounded transition text-sm border sm:whitespace-nowrap sm:flex-shrink-0"
     (div :class "flex-1 min-w-0"
       (div :class "font-medium truncate" name)
       (div :class "text-xs text-stone-600 truncate" time-str))))
 
-(defcomp ~events-day-entries-nav (&key inner)
+(defcomp ~day/entries-nav (&key inner)
   (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 "day-entries-nav-wrapper"
     (div :class "flex overflow-x-auto gap-1 scrollbar-thin"
       inner)))
 
-(defcomp ~events-day-table (&key list-container rows pre-action add-url)
+(defcomp ~day/table (&key (list-container :as string) rows (pre-action :as string) (add-url :as string))
   (section :id "day-entries" :class list-container
     (table :class "w-full text-sm border table-fixed"
       (thead :class "bg-stone-100"
@@ -29,56 +29,95 @@
               :sx-get add-url :sx-target "#entry-add-container" :sx-swap "innerHTML"
         "+ Add entry"))))
 
-(defcomp ~events-day-empty-row ()
+(defcomp ~day/empty-row ()
   (tr (td :colspan "6" :class "p-3 text-stone-500" "No entries yet.")))
 
-(defcomp ~events-day-row-name (&key href pill-cls name)
+(defcomp ~day/row-name (&key (href :as string) (pill-cls :as string) (name :as string))
   (td :class "p-2 align-top w-2/6" (div :class "font-medium"
     (a :href href :class pill-cls :sx-get href :sx-target "#main-panel" :sx-select "#main-panel"
        :sx-swap "outerHTML" :sx-push-url "true" name))))
 
-(defcomp ~events-day-row-slot (&key href pill-cls slot-name time-str)
+(defcomp ~day/row-slot (&key (href :as string) (pill-cls :as string) (slot-name :as string) (time-str :as string))
   (td :class "p-2 align-top w-1/6" (div :class "text-xs font-medium"
     (a :href href :class pill-cls :sx-get href :sx-target "#main-panel" :sx-select "#main-panel"
        :sx-swap "outerHTML" :sx-push-url "true" slot-name)
     (span :class "text-stone-600 font-normal" time-str))))
 
-(defcomp ~events-day-row-time (&key start end)
+(defcomp ~day/row-time (&key (start :as string) (end :as string))
   (td :class "p-2 align-top w-1/6" (div :class "text-xs text-stone-600" (str start end))))
 
-(defcomp ~events-day-row-state (&key state-id badge)
+(defcomp ~day/row-state (&key (state-id :as string) badge)
   (td :class "p-2 align-top w-1/6" (div :id state-id badge)))
 
-(defcomp ~events-day-row-cost (&key cost-str)
+(defcomp ~day/row-cost (&key (cost-str :as string))
   (td :class "p-2 align-top w-1/6" (span :class "font-medium text-green-600" cost-str)))
 
-(defcomp ~events-day-row-tickets (&key price-str count-str)
+(defcomp ~day/row-tickets (&key (price-str :as string) (count-str :as string))
   (td :class "p-2 align-top w-1/6" (div :class "text-xs space-y-1"
     (div :class "font-medium text-green-600" price-str)
     (div :class "text-stone-600" count-str))))
 
-(defcomp ~events-day-row-no-tickets ()
+(defcomp ~day/row-no-tickets ()
   (td :class "p-2 align-top w-1/6" (span :class "text-xs text-stone-400" "No tickets")))
 
-(defcomp ~events-day-row-actions ()
+(defcomp ~day/row-actions ()
   (td :class "p-2 align-top w-1/6"))
 
-(defcomp ~events-day-row (&key tr-cls name slot state cost tickets actions)
+(defcomp ~day/row (&key (tr-cls :as string) name slot state cost tickets actions)
   (tr :class tr-cls name slot state cost tickets actions))
 
-(defcomp ~events-day-admin-panel ()
+(defcomp ~day/admin-panel ()
   (div :class "p-4 text-sm text-stone-500" "Admin options"))
 
-(defcomp ~events-day-entries-nav-oob-empty ()
+(defcomp ~day/entries-nav-oob-empty ()
   (div :id "day-entries-nav-wrapper" :sx-swap-oob "true"))
 
-(defcomp ~events-day-entries-nav-oob (&key items)
+(defcomp ~day/entries-nav-oob (&key 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 "day-entries-nav-wrapper" :sx-swap-oob "true"
     (div :class "flex overflow-x-auto gap-1 scrollbar-thin" items)))
 
-(defcomp ~events-day-nav-entry (&key href nav-btn name time-str)
+(defcomp ~day/nav-entry (&key (href :as string) (nav-btn :as string) (name :as string) (time-str :as string))
   (a :href href :class nav-btn
     (div :class "flex-1 min-w-0"
       (div :class "font-medium truncate" name)
       (div :class "text-xs text-stone-600 truncate" time-str))))
+
+;; Day table from data — all row iteration in sx
+(defcomp ~day/table-from-data (&key (list-container :as string) (pre-action :as string) (add-url :as string) (tr-cls :as string) (pill-cls :as string) (rows :as list?))
+  (~day/table
+    :list-container list-container
+    :rows (if (empty? (or rows (list)))
+      (~day/empty-row)
+      (<> (map (lambda (r)
+        (~day/row
+          :tr-cls tr-cls
+          :name (~day/row-name
+            :href (get r "href") :pill-cls pill-cls :name (get r "name"))
+          :slot (if (get r "slot-name")
+            (~day/row-slot
+              :href (get r "slot-href") :pill-cls pill-cls
+              :slot-name (get r "slot-name") :time-str (get r "slot-time"))
+            (~day/row-time :start (get r "start") :end (get r "end")))
+          :state (~day/row-state
+            :state-id (get r "state-id")
+            :badge (~entries/entry-state-badge :state (get r "state")))
+          :cost (~day/row-cost :cost-str (get r "cost-str"))
+          :tickets (if (get r "has-tickets")
+            (~day/row-tickets
+              :price-str (get r "price-str") :count-str (get r "count-str"))
+            (~day/row-no-tickets))
+          :actions (~day/row-actions)))
+        (or rows (list)))))
+    :pre-action pre-action :add-url add-url))
+
+;; Day entries nav OOB from data
+(defcomp ~day/entries-nav-oob-from-data (&key (nav-btn :as string) (entries :as list?))
+  (if (empty? (or entries (list)))
+    (~day/entries-nav-oob-empty)
+    (~day/entries-nav-oob
+      :items (<> (map (lambda (e)
+        (~day/nav-entry
+          :href (get e "href") :nav-btn nav-btn
+          :name (get e "name") :time-str (get e "time-str")))
+        entries)))))

events/sx/entries.sx

@@ -1,35 +1,108 @@
 ;; Events entry card components (all events / page summary)
 
-(defcomp ~events-entry-title-linked (&key href name)
+;; ---------------------------------------------------------------------------
+;; State badges — cond maps state string to class + label
+;; ---------------------------------------------------------------------------
+
+(defcomp ~entries/entry-state-badge (&key state)
+  (~shared:misc/badge
+    :cls (cond
+      ((= state "confirmed") "bg-emerald-100 text-emerald-800")
+      ((= state "provisional") "bg-amber-100 text-amber-800")
+      ((= state "ordered") "bg-sky-100 text-sky-800")
+      ((= state "pending") "bg-stone-100 text-stone-700")
+      ((= state "declined") "bg-red-100 text-red-800")
+      (true "bg-stone-100 text-stone-700"))
+    :label (cond
+      ((= state "confirmed") "Confirmed")
+      ((= state "provisional") "Provisional")
+      ((= state "ordered") "Ordered")
+      ((= state "pending") "Pending")
+      ((= state "declined") "Declined")
+      (true (or state "Unknown")))))
+
+(defcomp ~entries/entry-state-badge-lg (&key state)
+  (span :class (str "inline-flex items-center rounded-full px-3 py-1 text-sm font-medium "
+                (cond
+                  ((= state "confirmed") "bg-emerald-100 text-emerald-800")
+                  ((= state "provisional") "bg-amber-100 text-amber-800")
+                  ((= state "ordered") "bg-sky-100 text-sky-800")
+                  ((= state "pending") "bg-stone-100 text-stone-700")
+                  ((= state "declined") "bg-red-100 text-red-800")
+                  (true "bg-stone-100 text-stone-700")))
+    (cond
+      ((= state "confirmed") "Confirmed")
+      ((= state "provisional") "Provisional")
+      ((= state "ordered") "Ordered")
+      ((= state "pending") "Pending")
+      ((= state "declined") "Declined")
+      (true (or state "Unknown")))))
+
+(defcomp ~entries/ticket-state-badge (&key state)
+  (~shared:misc/badge
+    :cls (cond
+      ((= state "confirmed") "bg-emerald-100 text-emerald-800")
+      ((= state "checked_in") "bg-blue-100 text-blue-800")
+      ((= state "reserved") "bg-amber-100 text-amber-800")
+      ((= state "cancelled") "bg-red-100 text-red-800")
+      (true "bg-stone-100 text-stone-700"))
+    :label (cond
+      ((= state "confirmed") "Confirmed")
+      ((= state "checked_in") "Checked in")
+      ((= state "reserved") "Reserved")
+      ((= state "cancelled") "Cancelled")
+      (true (or state "Unknown")))))
+
+(defcomp ~entries/ticket-state-badge-lg (&key state)
+  (span :class (str "inline-flex items-center rounded-full px-3 py-1 text-sm font-medium "
+                (cond
+                  ((= state "confirmed") "bg-emerald-100 text-emerald-800")
+                  ((= state "checked_in") "bg-blue-100 text-blue-800")
+                  ((= state "reserved") "bg-amber-100 text-amber-800")
+                  ((= state "cancelled") "bg-red-100 text-red-800")
+                  (true "bg-stone-100 text-stone-700")))
+    (cond
+      ((= state "confirmed") "Confirmed")
+      ((= state "checked_in") "Checked in")
+      ((= state "reserved") "Reserved")
+      ((= state "cancelled") "Cancelled")
+      (true (or state "Unknown")))))
+
+
+;; ---------------------------------------------------------------------------
+;; Entry card components
+;; ---------------------------------------------------------------------------
+
+(defcomp ~entries/entry-title-linked (&key href name)
   (a :href href :class "hover:text-emerald-700"
     (h2 :class "text-lg font-semibold text-stone-900" name)))
 
-(defcomp ~events-entry-title-plain (&key name)
+(defcomp ~entries/entry-title-plain (&key name)
   (h2 :class "text-lg font-semibold text-stone-900" name))
 
-(defcomp ~events-entry-title-tile-linked (&key href name)
+(defcomp ~entries/entry-title-tile-linked (&key href name)
   (a :href href :class "hover:text-emerald-700"
     (h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name)))
 
-(defcomp ~events-entry-title-tile-plain (&key name)
+(defcomp ~entries/entry-title-tile-plain (&key name)
   (h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name))
 
-(defcomp ~events-entry-page-badge (&key href title)
+(defcomp ~entries/entry-page-badge (&key href title)
   (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 ~events-entry-cal-badge (&key name)
+(defcomp ~entries/entry-cal-badge (&key name)
   (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-700" name))
 
-(defcomp ~events-entry-time-linked (&key href date-str)
+(defcomp ~entries/entry-time-linked (&key href date-str)
   (<> (a :href href :class "hover:text-stone-700" date-str) " · "))
 
-(defcomp ~events-entry-time-plain (&key date-str)
+(defcomp ~entries/entry-time-plain (&key date-str)
   (<> (span date-str) " · "))
 
-(defcomp ~events-entry-cost (&key cost)
+(defcomp ~entries/entry-cost (&key cost)
   (div :class "mt-1 text-sm font-medium text-green-600" cost))
 
-(defcomp ~events-entry-card (&key title badges time-parts cost widget)
+(defcomp ~entries/entry-card (&key title badges time-parts cost widget)
   (article :class "rounded-xl bg-white shadow-sm border border-stone-200 p-4"
     (div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-3"
       (div :class "flex-1 min-w-0"
@@ -39,7 +112,7 @@
         cost)
       widget)))
 
-(defcomp ~events-entry-card-tile (&key title badges time cost widget)
+(defcomp ~entries/entry-card-tile (&key title badges time cost widget)
   (article :class "rounded-xl bg-white shadow-sm border border-stone-200 overflow-hidden"
     (div :class "p-3"
       title
@@ -48,18 +121,142 @@
       cost)
     widget))
 
-(defcomp ~events-entry-tile-widget-wrapper (&key widget)
+(defcomp ~entries/entry-tile-widget-wrapper (&key widget)
   (div :class "border-t border-stone-100 px-3 py-2" widget))
 
-(defcomp ~events-entry-widget-wrapper (&key widget)
+(defcomp ~entries/entry-widget-wrapper (&key widget)
   (div :class "shrink-0" widget))
 
-(defcomp ~events-date-separator (&key date-str)
+(defcomp ~entries/date-separator (&key date-str)
   (div :class "pt-2 pb-1"
     (h3 :class "text-sm font-semibold text-stone-500 uppercase tracking-wide" date-str)))
 
-(defcomp ~events-grid (&key grid-cls cards)
+(defcomp ~entries/grid (&key grid-cls cards)
   (div :class grid-cls cards))
 
-(defcomp ~events-main-panel-body (&key toggle body)
+(defcomp ~entries/main-panel-body (&key toggle body)
   (<> toggle body (div :class "pb-8")))
+
+
+;; ---------------------------------------------------------------------------
+;; Composition defcomps — receive data, compose entry card trees
+;; ---------------------------------------------------------------------------
+
+;; Ticket widget from data — replaces _ticket_widget_html Python composition
+(defcomp ~entries/tw-widget-from-data (&key entry-id price qty ticket-url csrf)
+  (~page/tw-widget :entry-id (str entry-id) :price price
+    :inner (if (= (or qty 0) 0)
+      (~page/tw-form :ticket-url ticket-url :target (str "#page-ticket-" entry-id)
+        :csrf csrf :entry-id (str entry-id) :count-val "1"
+        :btn (~page/tw-cart-plus))
+      (<>
+        (~page/tw-form :ticket-url ticket-url :target (str "#page-ticket-" entry-id)
+          :csrf csrf :entry-id (str entry-id) :count-val (str (- qty 1))
+          :btn (~page/tw-minus))
+        (~page/tw-cart-icon :qty (str qty))
+        (~page/tw-form :ticket-url ticket-url :target (str "#page-ticket-" entry-id)
+          :csrf csrf :entry-id (str entry-id) :count-val (str (+ qty 1))
+          :btn (~page/tw-plus))))))
+
+;; Entry card (list view) from data
+(defcomp ~entries/entry-card-from-data (&key entry-href name day-href
+    page-badge-href page-badge-title cal-name
+    date-str start-time end-time is-page-scoped
+    cost has-ticket ticket-data)
+  (~entries/entry-card
+    :title (if entry-href
+      (~entries/entry-title-linked :href entry-href :name name)
+      (~entries/entry-title-plain :name name))
+    :badges (<>
+      (when page-badge-title
+        (~entries/entry-page-badge :href page-badge-href :title page-badge-title))
+      (when cal-name
+        (~entries/entry-cal-badge :name cal-name)))
+    :time-parts (<>
+      (when (and day-href (not is-page-scoped))
+        (~entries/entry-time-linked :href day-href :date-str date-str))
+      (when (and (not day-href) (not is-page-scoped) date-str)
+        (~entries/entry-time-plain :date-str date-str))
+      start-time
+      (when end-time (str " \u2013 " end-time)))
+    :cost (when cost (~entries/entry-cost :cost cost))
+    :widget (when has-ticket
+      (~entries/entry-widget-wrapper
+        :widget (~entries/tw-widget-from-data
+          :entry-id (get ticket-data "entry-id")
+          :price (get ticket-data "price")
+          :qty (get ticket-data "qty")
+          :ticket-url (get ticket-data "ticket-url")
+          :csrf (get ticket-data "csrf"))))))
+
+;; Entry card (tile view) from data
+(defcomp ~entries/entry-card-tile-from-data (&key entry-href name day-href
+    page-badge-href page-badge-title cal-name
+    date-str time-str
+    cost has-ticket ticket-data)
+  (~entries/entry-card-tile
+    :title (if entry-href
+      (~entries/entry-title-tile-linked :href entry-href :name name)
+      (~entries/entry-title-tile-plain :name name))
+    :badges (<>
+      (when page-badge-title
+        (~entries/entry-page-badge :href page-badge-href :title page-badge-title))
+      (when cal-name
+        (~entries/entry-cal-badge :name cal-name)))
+    :time time-str
+    :cost (when cost (~entries/entry-cost :cost cost))
+    :widget (when has-ticket
+      (~entries/entry-tile-widget-wrapper
+        :widget (~entries/tw-widget-from-data
+          :entry-id (get ticket-data "entry-id")
+          :price (get ticket-data "price")
+          :qty (get ticket-data "qty")
+          :ticket-url (get ticket-data "ticket-url")
+          :csrf (get ticket-data "csrf"))))))
+
+;; Entry cards list (with date separators + sentinel) from data
+(defcomp ~entries/entry-cards-from-data (&key items view page has-more next-url)
+  (<>
+    (map (lambda (item)
+      (if (get item "is-separator")
+        (~entries/date-separator :date-str (get item "date-str"))
+        (if (= view "tile")
+          (~entries/entry-card-tile-from-data
+            :entry-href (get item "entry-href") :name (get item "name")
+            :day-href (get item "day-href")
+            :page-badge-href (get item "page-badge-href")
+            :page-badge-title (get item "page-badge-title")
+            :cal-name (get item "cal-name")
+            :date-str (get item "date-str") :time-str (get item "time-str")
+            :cost (get item "cost") :has-ticket (get item "has-ticket")
+            :ticket-data (get item "ticket-data"))
+          (~entries/entry-card-from-data
+            :entry-href (get item "entry-href") :name (get item "name")
+            :day-href (get item "day-href")
+            :page-badge-href (get item "page-badge-href")
+            :page-badge-title (get item "page-badge-title")
+            :cal-name (get item "cal-name")
+            :date-str (get item "date-str")
+            :start-time (get item "start-time") :end-time (get item "end-time")
+            :is-page-scoped (get item "is-page-scoped")
+            :cost (get item "cost") :has-ticket (get item "has-ticket")
+            :ticket-data (get item "ticket-data")))))
+      (or items (list)))
+    (when has-more
+      (~shared:misc/sentinel-simple :id (str "sentinel-" page) :next-url next-url))))
+
+;; Events main panel (toggle + cards grid) from data
+(defcomp ~entries/main-panel-from-data (&key toggle items view page has-more next-url)
+  (~entries/main-panel-body
+    :toggle toggle
+    :body (if items
+      (~entries/grid
+        :grid-cls (if (= view "tile")
+          "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
+          "max-w-full px-3 py-3 space-y-3")
+        :cards (~entries/entry-cards-from-data
+          :items items :view view :page page
+          :has-more has-more :next-url next-url))
+      (~shared:misc/empty-state :icon "fa fa-calendar-xmark"
+        :message "No upcoming events"
+        :cls "px-3 py-12 text-center text-stone-400"))))

events/sx/forms.sx

@@ -5,25 +5,25 @@
 ;; Slot picker option (shared by entry-edit and entry-add)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-slot-option (&key value data-start data-end data-flexible data-cost selected label)
+(defcomp ~forms/slot-option (&key value data-start data-end data-flexible data-cost selected label)
   (option :value value :data-start data-start :data-end data-end
           :data-flexible data-flexible :data-cost data-cost
           :selected selected
     label))
 
-(defcomp ~events-slot-picker (&key id options)
+(defcomp ~forms/slot-picker (&key id options)
   (select :id id :name "slot_id" :class "w-full border p-2 rounded"
           :data-slot-picker "" :required "required"
     options))
 
-(defcomp ~events-no-slots ()
+(defcomp ~forms/no-slots ()
   (div :class "text-sm text-stone-500" "No slots defined for this day."))
 
 ;; ---------------------------------------------------------------------------
 ;; Entry edit form (_types/entry/_edit.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-entry-edit-form (&key entry-id list-container put-url cancel-url csrf
+(defcomp ~forms/entry-edit-form (&key entry-id list-container put-url cancel-url csrf
                                        name-val slot-picker
                                        start-val end-val cost-display
                                        ticket-price-val ticket-count-val
@@ -115,7 +115,7 @@
 ;; Post search results (_types/entry/_post_search_results.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-post-search-item (&key post-url entry-id csrf post-id
+(defcomp ~forms/post-search-item (&key post-url entry-id csrf post-id
                                          img title)
   (form :sx-post post-url :sx-target (str "#entry-posts-" entry-id) :sx-swap "innerHTML"
         :class "p-2 hover:bg-stone-50 cursor-pointer rounded text-sm border-b"
@@ -129,7 +129,7 @@
             :data-confirm-cancel-text "Cancel"
       img (span title))))
 
-(defcomp ~events-post-search-sentinel (&key page next-url)
+(defcomp ~forms/post-search-sentinel (&key page next-url)
   (div :id (str "post-search-sentinel-" page)
        :sx-get next-url
        :sx-trigger "intersect once delay:250ms, sentinel:retry"
@@ -172,7 +172,7 @@
     (div :class "text-xs text-center text-stone-400 js-loading" "Loading more...")
     (div :class "text-xs text-center text-stone-400 js-neterr hidden" "Connection error. Retrying...")))
 
-(defcomp ~events-post-search-end ()
+(defcomp ~forms/post-search-end ()
   (div :class "py-2 text-xs text-center text-stone-400" "End of results"))
 
 
@@ -180,17 +180,17 @@
 ;; Slot edit form (_types/slot/_edit.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-day-checkbox (&key name label checked)
+(defcomp ~forms/day-checkbox (&key name label checked)
   (label :class "flex items-center gap-1 px-2 py-1 rounded-full bg-slate-100"
     (input :type "checkbox" :name name :value "1" :data-day name :checked checked)
     (span label)))
 
-(defcomp ~events-day-all-checkbox (&key checked)
+(defcomp ~forms/day-all-checkbox (&key checked)
   (label :class "flex items-center gap-1 px-2 py-1 rounded-full bg-slate-200"
     (input :type "checkbox" :data-day-all "" :checked checked)
     (span "All")))
 
-(defcomp ~events-slot-edit-form (&key slot-id list-container put-url cancel-url csrf
+(defcomp ~forms/slot-edit-form (&key slot-id list-container put-url cancel-url csrf
                                        name-val cost-val start-val end-val desc-val
                                        days flexible-checked
                                        action-btn cancel-btn)
@@ -271,7 +271,7 @@
 ;; Slot add form (_types/slots/_add.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-slot-add-form (&key post-url csrf days action-btn cancel-btn cancel-url)
+(defcomp ~forms/slot-add-form (&key post-url csrf days action-btn cancel-btn cancel-url)
   (form :sx-post post-url :sx-target "#slots-table" :sx-select "#slots-table"
         :sx-disinherit "sx-select" :sx-swap "outerHTML"
         :sx-headers csrf :class "space-y-3"
@@ -312,17 +312,75 @@
               :data-confirm-cancel-text "Cancel"
         (i :class "fa fa-save") " Save slot"))))
 
-(defcomp ~events-slot-add-button (&key pre-action add-url)
+(defcomp ~forms/slot-add-button (&key pre-action add-url)
   (button :type "button" :class pre-action
           :sx-get add-url :sx-target "#slot-add-container" :sx-swap "innerHTML"
     "+ Add slot"))
 
 
+;; ---------------------------------------------------------------------------
+;; Composition defcomps — receive data, compose form trees
+;; ---------------------------------------------------------------------------
+
+;; Day checkboxes from data — replaces Python loop
+(defcomp ~forms/day-checkboxes-from-data (&key days-data all-checked)
+  (<>
+    (~forms/day-all-checkbox :checked (when all-checked "checked"))
+    (map (lambda (d)
+      (~forms/day-checkbox
+        :name (get d "name")
+        :label (get d "label")
+        :checked (when (get d "checked") "checked")))
+      (or days-data (list)))))
+
+;; Slot options from data — replaces _slot_options_html Python loop
+(defcomp ~forms/slot-options-from-data (&key slots)
+  (<> (map (lambda (s)
+    (~forms/slot-option
+      :value (get s "value")
+      :data-start (get s "data-start")
+      :data-end (get s "data-end")
+      :data-flexible (get s "data-flexible")
+      :data-cost (get s "data-cost")
+      :selected (get s "selected")
+      :label (get s "label")))
+    (or slots (list)))))
+
+;; Slot picker from data — wraps picker + options
+(defcomp ~forms/slot-picker-from-data (&key id slots)
+  (if (empty? (or slots (list)))
+    (~forms/no-slots)
+    (~forms/slot-picker
+      :id id
+      :options (~forms/slot-options-from-data :slots slots))))
+
+;; Slot edit form from data
+(defcomp ~forms/slot-edit-form-from-data (&key slot-id list-container put-url cancel-url csrf
+                                                  name-val cost-val start-val end-val desc-val
+                                                  days-data all-checked flexible-checked
+                                                  action-btn cancel-btn)
+  (~forms/slot-edit-form
+    :slot-id slot-id :list-container list-container
+    :put-url put-url :cancel-url cancel-url :csrf csrf
+    :name-val name-val :cost-val cost-val :start-val start-val
+    :end-val end-val :desc-val desc-val
+    :days (~forms/day-checkboxes-from-data :days-data days-data :all-checked all-checked)
+    :flexible-checked flexible-checked
+    :action-btn action-btn :cancel-btn cancel-btn))
+
+;; Slot add form from data
+(defcomp ~forms/slot-add-form-from-data (&key post-url csrf days-data action-btn cancel-btn cancel-url)
+  (~forms/slot-add-form
+    :post-url post-url :csrf csrf
+    :days (~forms/day-checkboxes-from-data :days-data days-data)
+    :action-btn action-btn :cancel-btn cancel-btn :cancel-url cancel-url))
+
+
 ;; ---------------------------------------------------------------------------
 ;; Entry add form (_types/day/_add.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-entry-add-form (&key post-url csrf slot-picker
+(defcomp ~forms/entry-add-form (&key post-url csrf slot-picker
                                        action-btn cancel-btn cancel-url)
   (<>
     (div :id "entry-errors" :class "mt-2 text-sm text-red-600")
@@ -388,7 +446,7 @@
                 :data-confirm-cancel-text "Cancel"
           (i :class "fa fa-save") " Save entry")))))
 
-(defcomp ~events-entry-add-button (&key pre-action add-url)
+(defcomp ~forms/entry-add-button (&key pre-action add-url)
   (button :type "button" :class pre-action
           :sx-get add-url :sx-target "#entry-add-container" :sx-swap "innerHTML"
     "+ Add entry"))
@@ -398,7 +456,7 @@
 ;; Ticket type edit form (_types/ticket_type/_edit.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-ticket-type-edit-form (&key ticket-id list-container put-url cancel-url csrf
+(defcomp ~forms/ticket-type-edit-form (&key ticket-id list-container put-url cancel-url csrf
                                               name-val cost-val count-val
                                               action-btn cancel-btn)
   (section :id (str "ticket-" ticket-id) :class list-container
@@ -451,7 +509,7 @@
 ;; Ticket type add form (_types/ticket_types/_add.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-ticket-type-add-form (&key post-url csrf action-btn cancel-btn cancel-url)
+(defcomp ~forms/ticket-type-add-form (&key post-url csrf action-btn cancel-btn cancel-url)
   (form :sx-post post-url :sx-target "#tickets-table" :sx-select "#tickets-table"
         :sx-disinherit "sx-select" :sx-swap "outerHTML"
         :sx-headers csrf :class "space-y-3"
@@ -482,7 +540,7 @@
               :data-confirm-cancel-text "Cancel"
         (i :class "fa fa-save") " Save ticket type"))))
 
-(defcomp ~events-ticket-type-add-button (&key action-btn add-url)
+(defcomp ~forms/ticket-type-add-button (&key action-btn add-url)
   (button :class action-btn
           :sx-get add-url :sx-target "#ticket-add-container" :sx-swap "innerHTML"
     (i :class "fa fa-plus") " Add ticket type"))
@@ -492,6 +550,6 @@
 ;; Entry admin nav — placeholder
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-admin-placeholder-nav ()
+(defcomp ~forms/admin-placeholder-nav ()
   (div :class "relative nav-group"
     (span :class "block px-3 py-2 text-stone-400 text-sm italic" "Admin options")))

events/sx/fragments.sx

@@ -5,14 +5,14 @@
 ;; Container cards entries (fragments/container_cards_entries.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-frag-entry-card (&key href name date-str time-str)
+(defcomp ~fragments/frag-entry-card (&key href name date-str time-str)
   (a :href href
      :class "flex flex-col gap-1 px-3 py-2 bg-stone-50 hover:bg-stone-100 rounded border border-stone-200 transition text-sm whitespace-nowrap flex-shrink-0 min-w-[180px]"
     (div :class "font-medium text-stone-900 truncate" name)
     (div :class "text-xs text-stone-600" date-str)
     (div :class "text-xs text-stone-500" time-str)))
 
-(defcomp ~events-frag-entries-widget (&key cards)
+(defcomp ~fragments/frag-entries-widget (&key cards)
   (div :class "mt-4 mb-2"
     (h3 :class "text-sm font-semibold text-stone-700 mb-2 px-2" "Events:")
     (div :class "overflow-x-auto scrollbar-hide" :style "scroll-behavior: smooth;"
@@ -23,7 +23,7 @@
 ;; Account page tickets (fragments/account_page_tickets.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-frag-ticket-item (&key href entry-name date-str calendar-name type-name badge)
+(defcomp ~fragments/frag-ticket-item (&key href entry-name date-str calendar-name type-name badge)
   (div :class "py-4 first:pt-0 last:pb-0"
     (div :class "flex items-start justify-between gap-4"
       (div :class "min-w-0 flex-1"
@@ -35,13 +35,13 @@
           type-name))
       (div :class "flex-shrink-0" badge))))
 
-(defcomp ~events-frag-tickets-panel (&key items)
+(defcomp ~fragments/frag-tickets-panel (&key items)
   (div :class "w-full max-w-3xl mx-auto px-4 py-6"
     (div :class "bg-white/70 backdrop-blur rounded-2xl shadow border border-stone-200 p-6 sm:p-8 space-y-6"
       (h1 :class "text-xl font-semibold tracking-tight" "Tickets")
       items)))
 
-(defcomp ~events-frag-tickets-list (&key items)
+(defcomp ~fragments/frag-tickets-list (&key items)
   (div :class "divide-y divide-stone-100" items))
 
 
@@ -49,7 +49,7 @@
 ;; Account page bookings (fragments/account_page_bookings.html)
 ;; ---------------------------------------------------------------------------
 
-(defcomp ~events-frag-booking-item (&key name date-str calendar-name cost-str badge)
+(defcomp ~fragments/frag-booking-item (&key name date-str calendar-name cost-str badge)
   (div :class "py-4 first:pt-0 last:pb-0"
     (div :class "flex items-start justify-between gap-4"
       (div :class "min-w-0 flex-1"
@@ -60,11 +60,73 @@
           cost-str))
       (div :class "flex-shrink-0" badge))))
 
-(defcomp ~events-frag-bookings-panel (&key items)
+(defcomp ~fragments/frag-bookings-panel (&key items)
   (div :class "w-full max-w-3xl mx-auto px-4 py-6"
     (div :class "bg-white/70 backdrop-blur rounded-2xl shadow border border-stone-200 p-6 sm:p-8 space-y-6"
       (h1 :class "text-xl font-semibold tracking-tight" "Bookings")
       items)))
 
-(defcomp ~events-frag-bookings-list (&key items)
+(defcomp ~fragments/frag-bookings-list (&key items)
   (div :class "divide-y divide-stone-100" items))
+
+
+;; ---------------------------------------------------------------------------
+;; From-data defcomps — iteration in sx
+;; ---------------------------------------------------------------------------
+
+;; Container cards: list of widgets, each with entries
+(defcomp ~fragments/frag-container-cards-from-data (&key widgets)
+  (<> (map (lambda (w)
+    (if (get w "entries")
+      (~fragments/frag-entries-widget
+        :cards (<> (map (lambda (e)
+          (~fragments/frag-entry-card
+            :href (get e "href") :name (get e "name")
+            :date-str (get e "date-str") :time-str (get e "time-str")))
+          (get w "entries"))))
+      ""))
+    (or widgets (list)))))
+
+;; Ticket item from data — composes badge + optional spans
+(defcomp ~fragments/frag-ticket-item-from-data (&key href entry-name date-str calendar-name type-name state)
+  (~fragments/frag-ticket-item
+    :href href :entry-name entry-name :date-str date-str
+    :calendar-name (when calendar-name (span "\u00b7 " calendar-name))
+    :type-name (when type-name (span "\u00b7 " type-name))
+    :badge (~shared:controls/status-pill :status state)))
+
+;; Tickets panel from data — full panel with list iteration
+(defcomp ~fragments/frag-tickets-panel-from-data (&key tickets)
+  (~fragments/frag-tickets-panel
+    :items (if (empty? (or tickets (list)))
+      (~shared:misc/empty-state :message "No tickets yet." :cls "text-sm text-stone-500")
+      (~fragments/frag-tickets-list
+        :items (<> (map (lambda (t)
+          (~fragments/frag-ticket-item-from-data
+            :href (get t "href") :entry-name (get t "entry-name")
+            :date-str (get t "date-str") :calendar-name (get t "calendar-name")
+            :type-name (get t "type-name") :state (get t "state")))
+          tickets))))))
+
+;; Booking item from data — composes badge + optional spans
+(defcomp ~fragments/frag-booking-item-from-data (&key name date-str end-time calendar-name cost-str state)
+  (~fragments/frag-booking-item
+    :name name
+    :date-str (<> date-str (when end-time (span "\u2013 " end-time)))
+    :calendar-name (when calendar-name (span "\u00b7 " calendar-name))
+    :cost-str (when cost-str (span "\u00b7 \u00a3" cost-str))
+    :badge (~shared:controls/status-pill :status state)))
+
+;; Bookings panel from data — full panel with list iteration
+(defcomp ~fragments/frag-bookings-panel-from-data (&key bookings)
+  (~fragments/frag-bookings-panel
+    :items (if (empty? (or bookings (list)))
+      (~shared:misc/empty-state :message "No bookings yet." :cls "text-sm text-stone-500")
+      (~fragments/frag-bookings-list
+        :items (<> (map (lambda (b)
+          (~fragments/frag-booking-item-from-data
+            :href (get b "href") :name (get b "name")
+            :date-str (get b "date-str") :end-time (get b "end-time")
+            :calendar-name (get b "calendar-name") :cost-str (get b "cost-str")
+            :state (get b "state")))
+          bookings))))))

events/sx/handlers/account-nav-item.sx

@@ -1,4 +1,5 @@
 ;; Events account-nav-item fragment handler
+;; returns: sx
 ;;
 ;; Renders tickets + bookings links for the account dashboard nav.
 
@@ -7,12 +8,12 @@
         (nav-class   (or (get styles "nav_button") ""))
         (hx-select   "#main-panel, #search-mobile, #search-count-mobile, #search-desktop, #search-count-desktop, #menu-items-nav-wrapper"))
     (<>
-      (~nav-group-link
+      (~shared:misc/nav-group-link
         :href (app-url "account" "/tickets/")
         :hx-select hx-select
         :nav-class nav-class
         :label "tickets")
-      (~nav-group-link
+      (~shared:misc/nav-group-link
         :href (app-url "account" "/bookings/")
         :hx-select hx-select
         :nav-class nav-class

events/sx/handlers/account-page.sx

@@ -1,4 +1,5 @@
 ;; Account-page fragment handler
+;; returns: sx
 ;;
 ;; Renders tickets or bookings panel for the account dashboard.
 ;; slug=tickets → ticket list; slug=bookings → booking list.
@@ -9,13 +10,13 @@
       (cond
         (= slug "tickets")
         (let ((tickets (service "calendar" "user-tickets" :user-id uid)))
-          (~events-frag-tickets-panel
+          (~fragments/frag-tickets-panel
             :items (if (empty? tickets)
-                    (~empty-state :message "No tickets yet."
+                    (~shared:misc/empty-state :message "No tickets yet."
                                  :cls "text-sm text-stone-500")
-                    (~events-frag-tickets-list
+                    (~fragments/frag-tickets-list
                       :items (<> (map (fn (t)
-                        (~events-frag-ticket-item
+                        (~fragments/frag-ticket-item
                           :href (app-url "events"
                                   (str "/tickets/" (get t "code") "/"))
                           :entry-name (get t "entry_name")
@@ -24,18 +25,18 @@
                                            (span (str "\u00b7 " (get t "calendar_name"))))
                           :type-name (when (get t "ticket_type_name")
                                       (span (str "\u00b7 " (get t "ticket_type_name"))))
-                          :badge (~status-pill :status (or (get t "state") ""))))
+                          :badge (~shared:controls/status-pill :status (or (get t "state") ""))))
                         tickets))))))
 
         (= slug "bookings")
         (let ((bookings (service "calendar" "user-bookings" :user-id uid)))
-          (~events-frag-bookings-panel
+          (~fragments/frag-bookings-panel
             :items (if (empty? bookings)
-                    (~empty-state :message "No bookings yet."
+                    (~shared:misc/empty-state :message "No bookings yet."
                                  :cls "text-sm text-stone-500")
-                    (~events-frag-bookings-list
+                    (~fragments/frag-bookings-list
                       :items (<> (map (fn (b)
-                        (~events-frag-booking-item
+                        (~fragments/frag-booking-item
                           :name (get b "name")
                           :date-str (str (format-date (get b "start_at") "%d %b %Y, %H:%M")
                                         (if (get b "end_at")
@@ -45,5 +46,5 @@
                                            (span (str "\u00b7 " (get b "calendar_name"))))
                           :cost-str (when (get b "cost")
                                       (span (str "\u00b7 \u00a3" (get b "cost"))))
-                          :badge (~status-pill :status (or (get b "state") ""))))
+                          :badge (~shared:controls/status-pill :status (or (get b "state") ""))))
                         bookings))))))))))

events/sx/handlers/container-cards.sx

@@ -1,4 +1,5 @@
 ;; Container-cards fragment handler
+;; returns: sx
 ;;
 ;; Returns HTML with <!-- card-widget:ID --> comment markers so the
 ;; blog consumer can split per-post fragments.  Each post section
@@ -18,13 +19,13 @@
                 (post-slug (or (nth slugs i) "")))
             (<> (str "<!-- card-widget:" pid " -->")
                 (when (not (empty? entries))
-                  (~events-frag-entries-widget
+                  (~fragments/frag-entries-widget
                     :cards (<> (map (fn (e)
                       (let ((time-str (str (format-date (get e "start_at") "%H:%M")
                                           (if (get e "end_at")
                                             (str " \u2013 " (format-date (get e "end_at") "%H:%M"))
                                             ""))))
-                        (~events-frag-entry-card
+                        (~fragments/frag-entry-card
                           :href (app-url "events"
                                   (str "/" post-slug
                                        "/" (get e "calendar_slug")

events/sx/handlers/container-nav.sx

@@ -1,4 +1,5 @@
 ;; Events container-nav fragment handler
+;; returns: sx
 ;;
 ;; Renders calendar entry nav items + calendar link nav items
 ;; for the scrollable navigation panel on blog post pages.
@@ -52,7 +53,7 @@
                                  (if (get entry "end_at")
                                    (str " – " (format-date (get entry "end_at") "%H:%M"))
                                    ""))))
-              (~calendar-entry-nav
+              (~shared:navigation/calendar-entry-nav
                 :href (app-url "events" entry-path)
                 :name (get entry "name")
                 :date-str date-str
@@ -60,7 +61,7 @@
 
           ;; Infinite scroll sentinel
           (when (and has-more (not (empty? purl)))
-            (~htmx-sentinel
+            (~shared:misc/htmx-sentinel
               :id (str "entries-load-sentinel-" pg)
               :hx-get (str purl "?page=" (+ pg 1))
               :hx-trigger "intersect once"
@@ -73,7 +74,7 @@
                   (is-selected (if (not (empty? cur-cal))
                                  (= (get cal "slug") cur-cal)
                                  false)))
-              (~calendar-link-nav
+              (~shared:navigation/calendar-link-nav
                 :href href
                 :name (get cal "name")
                 :nav-class nav-class

events/sx/handlers/link-card.sx

@@ -1,4 +1,5 @@
 ;; Events link-card fragment handler
+;; returns: sx
 ;;
 ;; Renders event page preview card(s) by slug.
 ;; Supports single mode (?slug=x) and batch mode (?keys=x,y,z).
@@ -15,7 +16,7 @@
                                    :container-type "page"
                                    :container-id (get post "id")))
                       (cal-names (join ", " (map (fn (c) (get c "name")) calendars))))
-                  (~link-card
+                  (~shared:fragments/link-card
                     :title (get post "title")
                     :image (get post "feature_image")
                     :subtitle cal-names
@@ -27,7 +28,7 @@
                              :container-type "page"
                              :container-id (get post "id")))
                 (cal-names (join ", " (map (fn (c) (get c "name")) calendars))))
-            (~link-card
+            (~shared:fragments/link-card
               :title (get post "title")
               :image (get post "feature_image")
               :subtitle cal-names

events/sx/header.sx

@@ -1,12 +1,12 @@
 ;; Events header components
 
-(defcomp ~events-calendars-label ()
+(defcomp ~header/calendars-label ()
   (<> (i :class "fa fa-calendar" :aria-hidden "true") (div "Calendars")))
 
-(defcomp ~events-markets-label ()
+(defcomp ~header/markets-label ()
   (<> (i :class "fa fa-shopping-bag" :aria-hidden "true") (div "Markets")))
 
-(defcomp ~events-calendar-label (&key name description)
+(defcomp ~header/calendar-label (&key name description)
   (div :class "flex flex-col md:flex-row md:gap-2 items-center min-w-0"
     (div :class "flex flex-row items-center gap-2"
       (i :class "fa fa-calendar")
@@ -15,12 +15,19 @@
          :class "text-base font-normal break-words whitespace-normal min-w-0 break-all w-full text-center block"
       description)))
 
-(defcomp ~events-day-label (&key date-str)
+(defcomp ~header/day-label (&key date-str)
   (div :class "flex gap-1 items-center"
     (i :class "fa fa-calendar-day")
     (span date-str)))
 
-(defcomp ~events-entry-label (&key entry-id title times)
+(defcomp ~header/entry-label (&key entry-id title times)
   (div :id (str "entry-title-" entry-id) :class "flex gap-1 items-center"
     title times))
 
+(defcomp ~header/slot-label (&key name description)
+  (div :class "flex flex-col md:flex-row md:gap-2 items-center"
+    (div :class "flex flex-row items-center gap-2"
+      (i :class "fa fa-clock")
+      (div :class "shrink-0" name))
+    (p :class "text-stone-500 whitespace-pre-line break-all w-full" description)))
+