Temas & Bibliotecas de Componentes

O Seed tem um sistema de libs que permite instalar temas e bibliotecas de componentes de fontes externas — caminhos locais ou repositórios GitHub — sem configuração manual.

Conceito

Um projeto Seed pode ter dois tipos de lib:

Tipo	Pasta	Configura	Função
Tema	`libs/themes/<nome>/`	`seed.yaml: theme: <nome>`	Fornece layouts (`.layout`), assets e componentes visuais do site
Componentes	`libs/components/<nome>/`	`seed.yaml: components: <nome>`	Fornece componentes reutilizáveis (YAML + `.design`) disponíveis em todo o projeto

O seed.yaml na raiz do projeto declara qual lib está ativa em cada categoria:

```yaml
theme: meu-tema
components: seed-ui
```

Instalando uma lib

A partir de um caminho local

```bash
seed theme-install meu-site /caminho/para/meu-tema
seed components-install meu-site /caminho/para/minha-lib
```

A partir de um repositório GitHub

```bash
seed theme-install meu-site https://github.com/usuario/seed-tema
seed components-install meu-site https://github.com/ssjunior/seed-ui
```

O Seed baixa o ZIP do branch main (ou master como fallback), extrai em libs/<tipo>/<nome>/ e atualiza o seed.yaml automaticamente.

ℹ️

Se a lib já estiver instalada, o Seed pergunta: '<nome>' already installed. Update? [y/N]. Pressione y para sobrescrever ou Enter para cancelar.

Atualizando uma lib

Os comandos *-update reinstalam a lib a partir de uma nova fonte, preservando o nome configurado no seed.yaml:

```bash
seed theme-update meu-site https://github.com/usuario/seed-tema
seed components-update meu-site https://github.com/ssjunior/seed-ui
```

Se a pasta da lib não existir localmente, o Seed oferece instalá-la: '<nome>' not found locally. Install it? [Y/n]

Estrutura de uma lib de componentes

Uma biblioteca de componentes é uma pasta com subpastas por componente, cada uma com seu YAML e arquivos .design:

```
seed-ui/
├── hero/
│   ├── hero.yaml
│   ├── hero.design
│   └── center.design
├── nav/
│   ├── nav.yaml
│   ├── nav.design
│   ├── item.yaml
│   └── item.design
├── button/
│   └── button.yaml
└── accordion/
    ├── accordion.yaml
    ├── accordion.design
    └── item.design
```

Estrutura de um tema

Um tema fornece layouts e assets. O Seed carrega automaticamente os layouts e copia o static/ do tema para o build:

```
meu-tema/
├── default.layout        # layout padrão do tema
├── blog.layout           # layout alternativo
├── components/           # componentes específicos do tema (opcional)
│   └── hero-tema/
│       ├── hero-tema.yaml
│       └── hero-tema.design
└── static/               # assets do tema (CSS, imagens, fontes)
    ├── tema.css
    └── logo.svg
```

💡

Assets de static/ do tema são copiados para dist/static/ no build. Os assets em src/static/ do projeto têm prioridade — se um arquivo existir nos dois lugares, o do projeto vence.

Prioridade de componentes

Quando há componentes em múltiplas fontes, a ordem de prioridade é:

1. src/components/ — componentes do projeto (maior prioridade)
2. Tema (libs/themes/<nome>/components/) — componentes do tema
3. Biblioteca (libs/components/<nome>/) — componentes da lib instalada

Isso permite sobrescrever qualquer componente de uma lib colocando uma versão em src/components/ com o mesmo nome.

seed-ui

A seed-ui é a biblioteca de componentes oficial do Seed. Ela inclui todos os componentes documentados neste site: @hero, @nav, @button, @accordion, @carousel e mais.

```bash
seed components-install meu-site https://github.com/ssjunior/seed-ui
```

O seed init oferece instalá-la automaticamente ao criar um projeto novo.