Sintaxe .seed

Cada linha que começa com @ declara um componente. O conteúdo e os filhos são definidos pelo recuo abaixo — quanto mais recuado, mais aninhado.

Estrutura básica

```seed
@componente: prop1=valor1, prop2="valor com espaços", flag
  Conteúdo textual aqui
  @filho: variante=primária
    Conteúdo do filho
```

Front Matter

O front matter é YAML opcional delimitado por --- no início do arquivo:

```seed
---
title: Título da Página
lang: pt-BR
layout: default
css: /meu-estilo.css
---

@section
  ...
```

Componentes

Um componente começa com @ seguido do nome. Props são separadas por vírgulas:

```seed
@button variant=primary
  Clique

@img src=foto.jpg, alt=Foto

@card template=center, variant=dark
  @h2
    Título
```

Tipos de props

Tipo	Exemplo	O que faz
Chave=valor	`variant=primary`	Passa o valor `primary` para a prop `variant`
Valor com espaços	`alt="Minha foto"`	Usa aspas quando o valor tem espaços
Flag booleana	`disabled`	Ativa a prop sem precisar de valor — equivale a `disabled=true`
Classes CSS extras	`class=mt-4 text-lg`	Adiciona classes ao elemento sem sobrescrever as do componente

⚠️

Vírgulas são obrigatórias entre props. Um espaço não separa props — é parte do valor. @button variant=primary size=lg é ERRADO: o parser lê size=lg como parte do valor de variant. Use: @button variant=primary, size=lg.

Aninhamento

O que está abaixo de um componente pertence a ele:

```seed
@header
  @div class=flex items-center justify-between
    @a href=.
      Logo
    @nav
      @a href=sobre
        Sobre
      @a href=contato
        Contato
    @div
      @button variant=primary
        Login
```

Conteúdo textual

Texto dentro de um componente é conteúdo plain ou Markdown (dependendo do componente):

```seed
@div
  Esta é a **resposta** em markdown.
  Pode ter _múltiplas linhas_.
```

Prop `class`

Adiciona classes CSS extras ao elemento sem sobrescrever as classes base:

```seed
@button variant=primary, class=w-full mt-4
  Botão largo
```

Prop `href`

Quando um componente que não é <a> recebe href, ele é automaticamente envolvido em um <a>:

```seed
@button variant=secondary, href=https://github.com, target=_blank
  Ver no GitHub
```

Gera:

```html
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  <button class="...">Ver no GitHub</button>
</a>
```

Feito com ❤️ e Seed