;; GraphQL: fragments — live fragment spreads against /api.execute-demo
(defcomp
  ()
  (~docs/page
    :title "GraphQL · Fragments"
    (p
      (~tw :tokens "text-lg text-gray-600 mb-6")
      "Fragment definitions collect reusable field sets. Spreads inline them during projection. "
      "The executor applies them unconditionally — type checking is available in "
      (code "spec/types.sx")
      " but not required here.")
    (~docs/section
      :title "Named fragment"
      :id "named"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Define "
        (code "UserFields")
        " once, use it wherever a "
        (code "User")
        " appears.")
      (~docs/code
        :src "query {\n  alice: user(id: 1) { ...UserFields }\n  bob:   user(id: 2) { ...UserFields }\n}\n\nfragment UserFields on User {\n  name\n  email\n  role\n}")
      (form
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#frag-named-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "query { alice: user(id: 1) { ...UserFields } bob: user(id: 2) { ...UserFields } } fragment UserFields on User { name email role }")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "frag-named-out"
        (~tw :tokens "mt-4")
        (span
          (~tw :tokens "text-gray-400 text-sm")
          "Result will appear here.")))
    (~docs/section
      :title "Inline fragment"
      :id "inline"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Inline fragments work without a name — the executor treats them the same way "
        "and projects their selection set into the parent.")
      (~docs/code
        :src "{\n  post(id: 101) {\n    title\n    ... on Post {\n      authorId\n      body\n    }\n  }\n}")
      (form
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#frag-inline-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "{ post(id: 101) { title ... on Post { authorId body } } }")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "frag-inline-out"
        (~tw :tokens "mt-4")
        (span
          (~tw :tokens "text-gray-400 text-sm")
          "Result will appear here.")))))
