# Interface, idioma e prévia

A interface de tatuagens é carregada pelos arquivos gerados em `ui/dist/`. O pacote inclui esse build e as miniaturas vanilla em `ui/public/ImagenesVanilla/`; não presuma que inclui o código-fonte React nem os arquivos de desenvolvimento de `ui/`.

## Editar os arquivos fornecidos

Para uma personalização pequena, você pode editar os arquivos que acompanham o recurso:

- **Cores e tipografia:** abra `ui/dist/assets/index-*.css` e altere os valores das variáveis `--tat-*` e `--cxg-*`. Preserve o nome atual do CSS, pois a página NUI aponta para esse arquivo. Esse CSS é compilado e pode mudar em um novo build; mantenha uma cópia dos seus ajustes.
- **Logotipo:** substitua `ui/dist/assets/cxg-logo-CmIGK6Fh.png`, preservando exatamente o nome e o caminho, que são usados pela referência dentro do JavaScript gerado. Mantenha proporção e transparência compatíveis com o espaço de exibição.
- **Miniaturas vanilla:** substitua o arquivo de mesmo nome em `ui/dist/ImagenesVanilla/` para que a alteração apareça na versão em execução. Substitua também a cópia correspondente em `ui/public/ImagenesVanilla/`, se estiver disponível, pois uma nova compilação copia os arquivos dessa pasta para `dist/`.

Faça uma cópia de segurança antes de editar arquivos do build e confira as alterações dentro do FiveM. Para mudanças extensas de design, novos componentes ou traduções React, solicite o código-fonte da UI e gere um novo build; esse código-fonte não faz parte da entrega descrita aqui.

## Personalizar a aparência

Para mudanças extensas de layout, componentes ou textos React, use o código-fonte da UI se tiver recebido esses arquivos separadamente. Os principais pontos de entrada são:

- `ui/src/index.css`: variáveis globais `--tat-*` de cores, tipografia, tamanhos e sombras.
- `ui/src/studio-theme.css`: variáveis `--cxg-*` e aparência do estúdio.
- `ui/src/components/`: componentes React e estilos específicos de cada componente.
- `ui/src/main.tsx`: importações de Outfit Variable e Geist Mono Variable.

Comece alterando as variáveis do tema. Mudanças diretas nas regras dos componentes precisam preservar os estados de foco, erro, carregamento e desabilitado. Altere a fonte em `main.tsx` se também for usar outra fonte; os estilos que a utilizam estão definidos nas variáveis tipográficas.

## Miniaturas e imagens

As miniaturas vanilla incluídas ficam em `ui/public/ImagenesVanilla/` e são copiadas para o build de produção. Preserve os nomes e caminhos esperados pelo catálogo. Imagens fornecidas por packs externos permanecem nesses recursos; elas não são copiadas automaticamente para a UI.

O FiveM carrega `ui/dist/index.html` e seus arquivos em `ui/dist/` para exibir a NUI. O diretório `ui/dist/` é um artefato gerado; se você recebeu o código-fonte, altere o código-fonte e compile novamente em vez de editar manualmente os arquivos minificados do build.

## Idioma

`Config.Locale` e `Config.LocaleFallback` em `config.lua` definem o idioma padrão das mensagens Lua e da NUI para todos os jogadores. O valor é aplicado após reiniciar `cxg-tattoos`; não é uma opção individual nem um seletor dentro da NUI. Os códigos aceitos são `en`, `es`, `pt-BR`, `fr`, `de`, `it`, `pl`, `ru`, `tr`, `th` e `ar`.

Os rótulos próprios do React têm dicionários em `ui/src/i18n.tsx`, se esse código-fonte tiver sido fornecido. O inglês serve de base e cobre as chaves sem tradução; o árabe ativa a direção de leitura RTL. Alterar `Config.Locale` seleciona um idioma disponível, enquanto alterar os dicionários modifica as traduções presentes na UI. São ajustes diferentes.

## Compilar o código-fonte da UI

Estas etapas só se aplicam se você recebeu a pasta do código-fonte `ui/` com `package.json` e `package-lock.json`. Elas exigem Node.js e npm. Execute dentro de `ui/`:

```powershell
npm ci
npm run lint
npm run build
```

`npm run lint` verifica os tipos TypeScript e `npm run build` gera `ui/dist/`, o conteúdo usado pelo FiveM. Distribua o build atualizado junto com o recurso.

## Câmera e roupa de prévia

`config.lua` permite ajustar a câmera e a roupa aplicada enquanto o estúdio está aberto: `Config.CameraOffsets`, `Config.CameraFraming`, `Config.CameraFramingBySide`, `Config.CameraManualControls` e `Config.PreviewOutfit`. Para detalhes desses parâmetros, consulte [Configuração](https://docs.cxgstudios.com/docs/pt-BR/01-cxg-tattoos/03-configuracion.md).