Files

T

João Henrique b541f502ba feat: initial commit - Jhonny Editor

- Adicionado estrutura completa do projeto
- Configurado MCP server para Premiere Pro
- Adicionado documentação e skills
- Configurado Gitignore para o projeto

2026-09-08 09:59:31 -04:00

2.6 KiB

Raw Blame History

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:
```
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:

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.

2.6 KiB Raw Blame History Unescape Escape