// @bun
// src/components/docs/libraries/LibrariesGraphQLPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function LibrariesGraphQLPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "GraphQL Libraries"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "This suite of libraries enables seamless GraphQL integration, transforming your ContractSpecs into a type-safe Pothos schema, connecting with Prisma, and enabling Apollo Federation."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Libraries"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "grid gap-4 md:grid-cols-1",
            children: [
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-6",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-bold",
                    children: "@contractspec/lib.graphql-core"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground mt-2 text-sm",
                    children: "The foundation. Provides a configured Pothos builder, common scalars (JSON, DateTime), and utilities for mapping ContractSpec I/O to Pothos types."
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-6",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-bold",
                    children: "@contractspec/lib.graphql-prisma"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground mt-2 text-sm",
                    children: "Connects Pothos to Prisma. Automatically generates GraphQL types from your Prisma schema and optimizes queries to prevent N+1 issues."
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "card-subtle p-6",
                children: [
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-bold",
                    children: "@contractspec/lib.graphql-federation"
                  }),
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground mt-2 text-sm",
                    children: "Adds Apollo Federation V2 support. Allows your subgraph to define keys and entities, making it ready for a supergraph."
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: [
              "@contractspec/lib.graphql-core",
              "@contractspec/lib.graphql-prisma",
              "@contractspec/lib.graphql-federation"
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Usage: Building a Schema"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Here's how to assemble a federated GraphQL schema from your specs:"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { builder } from '@contractspec/lib.graphql-core';
import { registerContractsOnBuilder } from '@contractspec/lib.contracts-runtime-server-graphql/graphql-pothos';
import { OperationSpecRegistry } from '@contractspec/lib.contracts-spec';
import { MySpecs } from './specs';

// 1. Register contracts
const registry = new OperationSpecRegistry();
registry.register(MySpecs);

// 2. Mount specs onto Pothos builder
registerContractsOnBuilder(builder, registry);

// 3. Build and print schema
const schema = builder.toSchema();
console.log(printSchema(schema));`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Features"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Code-First"
                  }),
                  ": Define schema in TypeScript (Pothos), get SDL as artifact."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Spec Integration"
                  }),
                  ": `registerContractsOnBuilder` automatically converts Command/Query specs into Mutations/Queries."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Federation Ready"
                  }),
                  ": Just add `provider: 'federation'` to your config."
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries/data-backend",
            className: "btn-primary",
            children: [
              "Next: Data & Backend ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/libraries",
            className: "btn-ghost",
            children: "Back to Libraries"
          })
        ]
      })
    ]
  });
}
export {
  LibrariesGraphQLPage
};
