> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Componentes

> Componentes de UI e processo.

# Componentes

Componentes são as partes executáveis do seu app. Cada componente tem um `type` que determina como ele é executado.

## Componentes de UI

Um componente de UI é um frontend web — React, Vue, Svelte, HTML puro ou qualquer framework que rode em uma porta.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **Máx 1 por app** — Kazzle atribui uma única URL de preview por app
* `runtime.dev.command` — comando para o servidor de desenvolvimento (usado por "Iniciar preview")
* `runtime.prod.build` — comando para construir a imagem de produção
* `runtime.prod.command` — comando para iniciar um componente de processo de produção

Se `runtime.dev.command` não estiver definido, o sistema de preview executa `bun run dev` do seu `package.json`.

## Componentes de processo

Um componente de processo é um serviço backend, worker ou tarefa agendada.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### Ciclo de vida: `processMode`

Um componente de processo tem um de dois ciclos de vida:

* `processMode: 'persistent'` (padrão) — servidor HTTP de longa duração. Triggers são POSTados no servidor em execução no `path` declarado.
* `processMode: 'triggered'` — o script de entrada é executado por trigger e encerra. Sem máquinas ociosas em produção.

### Triggers

Triggers de agendamento e webhook são declarados no componente. Um componente pode ter muitos triggers. Cada trigger tem um `name` (único dentro do componente) e um `kind`.

```typescript theme={"theme":"material-theme-darker"}
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
```

`path` é obrigatório para `processMode: 'persistent'`. Para `processMode: 'triggered'` é omitido — o script lê `TRIGGER_NAME` do ambiente.

Veja [Automações](/work/automations) para o modelo completo de trigger, contrato de variáveis de ambiente e autenticação de header HTTP.

## Comandos de runtime

| Fase                   | Quando é executado          | Exemplo                                |
| ---------------------- | --------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Durante preview de rascunho | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | Em produção                 | `bun run start`, `node dist/server.js` |

Scripts de pacote de preview de rascunho podem usar `kazzle run -- <command>` para que Kazzle possa injetar portas locais e URLs de componentes irmãos. Componentes de processo de produção devem declarar o comando real em `runtime.prod.command` porque o deploy executa esse comando na imagem de produção.