Component

type Component {
  id: ID!
  name: String!
  title: String!
  description: String!
  content: String!
  compiled: String!
  schema: String!
  status: String!
  createdAt: DateTime!
  updatedAt: DateTime!
}

// In BindJS code, components are referenced by name
ProductCard({ title: "Widget", price: 9.99 })

// Example compiled output
const body = (props) => {
  return VStack([
    Text(props.title),
    Text(`$${props.price}`)
  ])
}

{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "description": "Product title"
    },
    "price": {
      "type": "number",
      "description": "Product price"
    },
    "imageUrl": {
      "type": "string",
      "format": "uri",
      "description": "Product image URL"
    }
  },
  "required": ["title", "price"]
}

query GetComponent($id: ID!) {
  component(id: $id) {
    id
    name
    title
    description
    compiled
    schema
  }
}

{
  "data": {
    "component": {
      "id": "comp123",
      "name": "ProductCard",
      "title": "Product Card",
      "description": "Displays product information in a card layout",
      "compiled": "const body = (props) => { ... }",
      "schema": "{\"type\":\"object\",\"properties\":{...}}"
    }
  }
}