Add admin preview views + fix markdown converter

- Fix _markdown() in lexical_to_sx.py: render markdown to HTML with
  mistune.html() before storing in ~kg-html
- Add shared/sx/prettify.py: sx_to_pretty_sx and json_to_pretty_sx
  produce sx AST for syntax-highlighted DOM (uses canonical serialize())
- Add preview tab to admin header nav
- Add GET /preview/ route with 4 views: prettified sx, prettified
  lexical JSON, sx rendered HTML, lexical rendered HTML
- Add ~blog-preview-panel and ~blog-preview-section components
- Add syntax highlight CSS for sx/JSON tokens

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

blog/bp/blog/ghost/lexical_to_sx.py

@@ -14,6 +14,8 @@ from __future__ import annotations
 import json
 from typing import Callable
 
+import mistune
+
 
 # ---------------------------------------------------------------------------
 # Registry
@@ -435,4 +437,5 @@ def _paywall(_node: dict) -> str:
 @_converter("markdown")
 def _markdown(node: dict) -> str:
     md_text = node.get("markdown", "")
-    return f'(~kg-html :html "{_esc(md_text)}")'
+    rendered = mistune.html(md_text)
+    return f'(~kg-html :html "{_esc(rendered)}")'

blog/bp/post/admin/routes.py

@@ -200,6 +200,63 @@ def register():
       sx_src = await render_post_data_oob(tctx)
       return sx_response(sx_src)
 
+  @bp.get("/preview/")
+  @require_admin
+  async def preview(slug: str):
+    from models.ghost_content import Post
+    from sqlalchemy import select as sa_select
+
+    from shared.sx.page import get_template_context
+    from sx.sx_components import render_post_preview_page, render_post_preview_oob
+
+    post_id = g.post_data["post"]["id"]
+    post = (await g.s.execute(
+        sa_select(Post).where(Post.id == post_id)
+    )).scalar_one_or_none()
+
+    # Build the 4 preview views
+    preview_ctx = {}
+
+    # 1. Prettified sx source
+    sx_content = getattr(post, "sx_content", None) or ""
+    if sx_content:
+        from shared.sx.prettify import sx_to_pretty_sx
+        preview_ctx["sx_pretty"] = sx_to_pretty_sx(sx_content)
+
+    # 2. Prettified lexical JSON
+    lexical_raw = getattr(post, "lexical", None) or ""
+    if lexical_raw:
+        from shared.sx.prettify import json_to_pretty_sx
+        preview_ctx["json_pretty"] = json_to_pretty_sx(lexical_raw)
+
+    # 3. SX rendered preview
+    if sx_content:
+        from shared.sx.parser import parse as sx_parse
+        from shared.sx.html import render as sx_html_render
+        from shared.sx.jinja_bridge import _COMPONENT_ENV
+        try:
+            parsed = sx_parse(sx_content)
+            preview_ctx["sx_rendered"] = sx_html_render(parsed, dict(_COMPONENT_ENV))
+        except Exception:
+            preview_ctx["sx_rendered"] = "<em>Error rendering sx</em>"
+
+    # 4. Lexical rendered preview
+    if lexical_raw:
+        from bp.blog.ghost.lexical_renderer import render_lexical
+        try:
+            preview_ctx["lex_rendered"] = render_lexical(lexical_raw)
+        except Exception:
+            preview_ctx["lex_rendered"] = "<em>Error rendering lexical</em>"
+
+    tctx = await get_template_context()
+    tctx.update(preview_ctx)
+    if not is_htmx_request():
+        html = await render_post_preview_page(tctx)
+        return await make_response(html)
+    else:
+        sx_src = await render_post_preview_oob(tctx)
+        return sx_response(sx_src)
+
   @bp.get("/entries/calendar/<int:calendar_id>/")
   @require_admin
   async def calendar_view(slug: str, calendar_id: int):

blog/sx/admin.sx

@@ -142,3 +142,30 @@
 (defcomp ~blog-tag-group-edit-main (&key edit-form delete-form)
   (div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"
     edit-form delete-form))
+
+;; Preview panel components
+
+(defcomp ~blog-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; }
+      .sx-list, .json-obj, .json-arr { display: block; }
+      .sx-paren { color: #64748b; }
+      .sx-sym { color: #0369a1; }
+      .sx-kw { color: #7c3aed; }
+      .sx-str { color: #15803d; }
+      .sx-num { color: #c2410c; }
+      .sx-bool { color: #b91c1c; font-weight: 600; }
+      .json-brace, .json-bracket { color: #64748b; }
+      .json-key { color: #7c3aed; }
+      .json-str { color: #15803d; }
+      .json-num { color: #c2410c; }
+      .json-lit { color: #b91c1c; font-weight: 600; }
+      .json-field { display: block; }
+    ")
+    sections))
+
+(defcomp ~blog-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)))

blog/sx/sx_components.py

@@ -1377,6 +1377,68 @@ async def render_post_data_oob(ctx: dict) -> str:
     return oob_page_sx(oobs=admin_hdr_oob, content=content)
 
 
+# ---- Post preview ----
+
+def _preview_main_panel_sx(ctx: dict) -> str:
+    """Build the preview panel with 4 expandable sections."""
+    sections: list[str] = []
+
+    # 1. Prettified SX source
+    sx_pretty = ctx.get("sx_pretty", "")
+    if sx_pretty:
+        sections.append(sx_call("blog-preview-section",
+            title="S-Expression Source",
+            content=SxExpr(sx_pretty),
+        ))
+
+    # 2. Prettified Lexical JSON
+    json_pretty = ctx.get("json_pretty", "")
+    if json_pretty:
+        sections.append(sx_call("blog-preview-section",
+            title="Lexical JSON",
+            content=SxExpr(json_pretty),
+        ))
+
+    # 3. SX rendered preview
+    sx_rendered = ctx.get("sx_rendered", "")
+    if sx_rendered:
+        rendered_sx = f'(div :class "blog-content prose max-w-none" (raw! {sx_serialize(sx_rendered)}))'
+        sections.append(sx_call("blog-preview-section",
+            title="SX Rendered",
+            content=SxExpr(rendered_sx),
+        ))
+
+    # 4. Lexical rendered preview
+    lex_rendered = ctx.get("lex_rendered", "")
+    if lex_rendered:
+        rendered_sx = f'(div :class "blog-content prose max-w-none" (raw! {sx_serialize(lex_rendered)}))'
+        sections.append(sx_call("blog-preview-section",
+            title="Lexical Rendered",
+            content=SxExpr(rendered_sx),
+        ))
+
+    if not sections:
+        return '(div :class "p-8 text-stone-500" "No content to preview.")'
+
+    inner = " ".join(sections)
+    return sx_call("blog-preview-panel", sections=SxExpr(f"(<> {inner})"))
+
+
+async def render_post_preview_page(ctx: dict) -> str:
+    root_hdr = root_header_sx(ctx)
+    post_hdr = _post_header_sx(ctx)
+    admin_hdr = _post_admin_header_sx(ctx, selected="preview")
+    header_rows = "(<> " + root_hdr + " " + post_hdr + " " + admin_hdr + ")"
+    content = _preview_main_panel_sx(ctx)
+    return full_page_sx(ctx, header_rows=header_rows, content=content)
+
+
+async def render_post_preview_oob(ctx: dict) -> str:
+    admin_hdr_oob = _post_admin_header_sx(ctx, oob=True, selected="preview")
+    content = _preview_main_panel_sx(ctx)
+    return oob_page_sx(oobs=admin_hdr_oob, content=content)
+
+
 # ---- Post entries ----
 
 async def render_post_entries_page(ctx: dict) -> str: