Design Templates

Design templates são a feature mais poderosa do Seed. Eles permitem que componentes encapsulem estrutura HTML complexa, expondo apenas slots nomeados para o usuário.

Como funciona

Cada componente pode ter um ou mais arquivos .design. O arquivo define a estrutura HTML usando a sintaxe .seed normal, mas com placeholders {slotName} no lugar do conteúdo dinâmico.

Exemplo: hero.design

```seed
@div class=flex flex-col lg:flex-row-reverse items-center gap-12 w-full max-w-6xl mx-auto px-6
  @div class=flex-1
    {image}
  @div class=flex-1
    @h1 class=text-5xl font-bold leading-tight
      {title}
    @p class=py-6 text-lg opacity-80
      {description}
    @div class=flex gap-4
      {cta}
```

O usuário escreve:

```seed
@hero
  @title
    Meu Título
  @description
    Meu texto.
  @cta
    @button variant=primary
      Ação
```

E o Seed injeta cada slot no lugar correto. Se @image não for passado, o @div que envolve {image} é omitido do HTML.

Regra de omissão de slots

Quando um slot não é preenchido, o elemento container desse slot é omitido — não é deixado vazio. Isso evita <div></div> fantasmas no HTML.

Exceção: elementos puramente estruturais (sem slots) sempre são renderizados mesmo sem conteúdo textual.

Variantes de design

Um componente pode ter múltiplos designs. O design é selecionado pela prop design=. O padrão é default:

```seed
@hero design=center
  @title
    Centrado
```

Estrutura de arquivos

Componentes de uma biblioteca ficam em libs/components/<lib>/:

```
libs/components/seed-ui/
├── hero/
│   ├── hero.yaml         # config do componente (tag, class, variants)
│   ├── hero.design       # design padrão
│   └── center.design     # design variante "center"
├── accordion/
│   ├── accordion.yaml
│   ├── accordion.design
│   └── item.design
└── nav/
    ├── nav.yaml
    ├── nav.design
    ├── item.yaml
    └── item.design
```

Criando seu próprio componente

Componentes do projeto ficam em src/components/. O Seed carrega automaticamente qualquer YAML e .design dessa pasta.

1. Crie a pasta e o YAML:

```yaml
# src/components/meu-card/meu-card.yaml
meu-card:
  tag: div
  class: bg-white rounded-xl shadow-md overflow-hidden
```

2. Crie o arquivo .design:

```seed
# src/components/meu-card/meu-card.design
@div class=p-6
  @h3 class=text-lg font-semibold mb-2
    {title}
  @p class=text-gray-600 text-sm
    {description}
  @div class=mt-4
    {cta}
```

3. Use no .seed:

```seed
@meu-card
  @title
    Meu Título
  @description
    Descrição do card.
  @cta
    @button variant=primary
      Ver mais
```