Sintaxe .seed

A sintaxe do Seed é baseada em indentação. Cada linha que começa com @ declara um componente. O conteúdo e os filhos são definidos pela indentação abaixo.

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: layout
css: /meu-estilo.css
---

@hero
  ...
```

Componentes

Um componente começa com @ seguido do nome. Props são separadas por vírgulas após os dois pontos (: é opcional para componentes sem props):

```seed
@button variant=primary
  Clique

@image src=/foto.jpg, alt=Foto

@hero design=center, variant=dark
  @title
    Título
```

Tipos de props

Tipo	Exemplo	Resultado
		`{"variant": "primary"}`
Valor com espaços		`{"alt": "Minha foto"}`
Flag booleana	`disabled`	`{"disabled": true}`
Classe CSS

⚠️

Props sem vírgula que contêm espaços são todas agrupadas no class. Use vírgulas para separar props distintas: @button variant=primary, aria-label=Enviar.

Aninhamento

Filhos são definidos por indentação maior (2 ou 4 espaços, consistente no arquivo):

```seed
@nav
  @logo
    @image src=/logo.png, alt=Logo
  @menu
    @item href=/
      @title
        Home
    @item href=/sobre
      @title
        Sobre
  @actions
    @button variant=primary
      Login
```

Conteúdo textual

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

```seed
@accordion
  @item
    @title
      Pergunta aqui
    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>
```

Componentes inline (em Markdown)

Dentro de conteúdo Markdown, você pode usar a sintaxe inline de componentes:

```seed
@section
  Veja nossa {btn variant=primary href=/planos}página de planos{/btn}.
```