# Boas práticas de UI para os nossos painéis (CEP/UXP)

Padrão a seguir em qualquer tela nova ou existente deste projeto
(`cep-plugin/`, `uxp-plugin/`, `chat-plugin/` e afins). Escrito depois de um
caso real: o painel `cep-plugin` ficou sem scroll e com fonte grande demais
ao adicionarmos a aba "Cortar silêncio", cortando conteúdo fora da vista.

## 1. Scroll sempre habilitado

Painéis do Premiere/Adobe rodam num container de tamanho variável e
imprevisível (o usuário pode redimensionar o painel, encaixá-lo, ou o
conteúdo pode crescer com o tempo — abas, listas, logs). **Nunca assumir que
tudo cabe na tela.**

- O container raiz do painel (ex: `.panel-shell`) deve ter:
  ```css
  overflow-y: auto;
  overflow-x: hidden;
  ```
- `height: 100%` continua correto — o scroll é vertical, dentro da altura
  disponível, não uma altura fixa maior que a tela.
- Não usar `overflow: hidden` no elemento que contém o conteúdo real do
  painel (pode ficar em `body` como reset, mas o container interno com o
  conteúdo precisa poder rolar).

## 2. Tamanho de fonte

Painéis CEP/UXP são compactos por natureza (encaixados em painéis estreitos
do Premiere). O padrão desta base é fonte **10% menor** que o tamanho "web
normal" para caber mais informação sem parecer apertado:

- Fonte base do `body`: `10.8px` (era `12px`, reduzida em 10%).
- Qualquer `font-size` declarado explicitamente em outro seletor deve seguir
  a mesma proporção (multiplicar o valor "normal" por `0.9`).
- Ao adicionar um elemento novo com fonte própria, comece do tamanho que
  pareceria natural numa web app comum e aplique o fator `× 0.9`.

## 3. Ao criar uma aba/seção nova

- Reaproveitar as classes existentes (`.config-section`, `.section-heading`,
  `.action-row`, `.field-help`, `.button`, `.log-entry` com `ok`/`err`) em
  vez de inventar estilos novos — mantém a tela inteira visualmente
  consistente.
- Toda seção com log/atividade deve ter altura própria com scroll interno
  quando fizer sentido (ex: `#log`, `#silenceLog`), mas isso não substitui o
  scroll do painel inteiro — os dois podem coexistir.

## 4. Depois de editar o painel CEP, sempre reinstalar

O Premiere carrega o painel de uma **cópia instalada** em
`~/Library/Application Support/Adobe/CEP/extensions/MCPBridgeCEP/`, não
direto da pasta `cep-plugin/` deste repositório. Editar os arquivos fonte
não é suficiente — é preciso rodar:

```bash
node dist/index.js --install-cep
```

(ou `admin/PremiereMCP.command`, que já faz isso automaticamente) e depois
**reiniciar o Premiere Pro por completo** — o painel não recarrega sozinho
nem com um simples fechar/abrir da aba.