-- Detail page: one article, its body, its comments, and a "related" section
-- that traverses the :RELATED_TO graph edge. Every section can be live-bound.

##ui
#article-detail
    title:  $article.title
    source: Article
    key:    slug
    live:   true

    sections:
        - header:
            fields: [title, author.display, published_at, tags]

        - body:
            renderer: markdown
            source:   meta.body_md

        -- Graph traversal: one hop along :RELATED_TO, rendered inline.
        - related:
            title:    "You might also like"
            renderer: list
            source:   Article{ slug == $key }.related
            columns:  [title, meta.excerpt, published_at]
            live:     true

        -- Reader comments. The article-comments component owns its own data
        -- source, sort, live binding, and create action — this screen only
        -- declares the embed and binds its typed inputs.
        - comments:
            use: article-comments
            with:
                article-id: $article.id