@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.11

package/docs/pt/dynamic_dictionaries/variants.md

@@ -1,13 +1,15 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
+updatedAt: 2026-06-26
 title: Variantes
-description: Use o campo de metadados variant nos arquivos de conteúdo do Intlayer para declarar alternativas de conteúdo nomeadas (testes A/B, banners sazonais, textos baseados em sinalizadores de recursos) e alternar entre elas em tempo de execução sem alterações de código.
+description: Use o campo de metadados variant nos arquivos de conteúdo do Intlayer para declarar alternativas de conteúdo nomeadas ou estruturadas — testes A/B, banners sazonais, texto com feature flag, registros de CMS, conteúdo específico do usuário — e alternar entre elas em tempo de execução sem mudanças de código.
 keywords:
   - Variantes
   - Testes A/B
-  - Sinalizadores de Recursos
-  - Conteúdo Dinâmico
+  - Feature Flags
+  - Conteúdo dinâmico
+  - Registros dinâmicos
+  - CMS
   - Intlayer
   - Internacionalização
 slugs:
@@ -15,19 +17,29 @@ slugs:
   - concept
   - variants
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
-    changes: "Lançamento do recurso de variantes de dicionários"
+    changes: "Lançamento do recurso de variantes"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "`variant` agora aceita uma string ou um objeto — os antigos `meta` / registros dinâmicos são declarados como variantes de objeto"
 author: aymericzip
 ---
 
 # Variantes
 
-Uma **variante** (Variant) é um conjunto de arquivos de conteúdo que compartilham a mesma chave de dicionário (`key`), mas cada um carrega um nome de variante (`variant`) diferente. O Intlayer serve o arquivo apropriado com base no seletor passado para `useIntlayer`.
+Uma **variante** é um conjunto de arquivos de conteúdo que compartilham a mesma chave de dicionário (`key`), mas cada um carrega um valor `variant` diferente. O Intlayer serve o arquivo apropriado com base no seletor passado para `useIntlayer`.
 
-## Declarando variantes
+O valor de `variant` pode assumir **duas formas**:
 
-Cada arquivo representa uma alternativa nomeada. Omitir `variant` (ou defini-lo como `"default"`) o marca como a variante padrão (fallback).
+- **Uma string** — uma única alternativa nomeada (testes A/B, banners sazonais, feature flags).
+- **Um objeto** — um discriminador estruturado endereçado por um conjunto de campos (registros de CMS, conteúdo específico do usuário, qualquer conteúdo cuja chave é um ID opaco). O objeto inteiro é a identidade: o seletor deve fornecer um objeto **igual** para resolver a entrada.
+
+> A forma de objeto substitui o antigo campo `meta`. Onde você antes escrevia `meta: { id, … }`, escreva `variant: { id, … }` e selecione-a com `{ variant: { id, … } }`.
+
+## Variantes nomeadas (string)
+
+Cada arquivo representa uma alternativa nomeada. Omitir `variant` (ou defini-lo como `"default"`) o marca como fallback.
 
 ```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
@@ -58,16 +70,16 @@ const dictionary = {
       en: "50 % off — today only",
       fr: "−50 % — aujourd'hui seulement",
     }),
-    cta: t({ en: "Shop now", fr: "Acheter agora" }),
+    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
   },
 } satisfies Dictionary;
 
 export default dictionary;
 ```
 
-## Consumindo variantes
+### Consumir variantes nomeadas
 
-### Variante padrão
+#### Variante padrão
 
 <Tabs group="framework">
   <Tab label="React" value="react">
@@ -209,7 +221,7 @@ export default dictionary;
   </Tab>
 </Tabs>
 
-### Variante nomeada
+#### Variante nomeada
 
 ```tsx
 const { headline, cta } = useIntlayer("hero-banner", {
@@ -217,18 +229,264 @@ const { headline, cta } = useIntlayer("hero-banner", {
 });
 ```
 
-### Variante nomeada com localidade explícita
+#### Variante nomeada com locale explícito
 
 ```tsx
 const content = useIntlayer("hero-banner", {
   variant: "black_friday",
-  locale: "pt",
+  locale: "fr",
 });
 ```
 
+## Variantes de objeto (estruturadas)
+
+Uma variante de objeto endereça o conteúdo por um conjunto arbitrário de pares chave-valor declarados no campo `variant` — possibilitando modelar registros de CMS, conteúdo específico do usuário ou qualquer conteúdo cuja chave seja um ID opaco. O **objeto inteiro** é a identidade: o seletor deve fornecer um objeto igual para que a entrada seja resolvida.
+
+```ts fileName="product.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
+    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+```ts fileName="product.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abcd", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
+    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+### Consumir variantes de objeto
+
+Passe o objeto correspondente para `variant`. Cada campo declarado no dicionário deve ser fornecido e igual; caso contrário, o resultado é `null`. A ordem dos campos não importa.
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "react-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "next-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+    ```vue fileName="Product.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script setup>
+    import { useIntlayer } from "vue-intlayer";
+
+    const props = defineProps({
+      productId: String,
+      userId: String,
+    });
+
+    const content = useIntlayer("product", {
+      variant: { id: props.productId, userId: props.userId },
+    });
+    </script>
+
+    <template>
+      <p v-if="content">{{ content.description }}</p>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+    ```svelte fileName="Product.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script lang="ts">
+    import { useIntlayer } from "svelte-intlayer";
+
+    export let productId: string;
+    export let userId: string;
+
+    const content = useIntlayer("product", {
+      variant: { id: productId, userId },
+    });
+    </script>
+
+    {#if $content}
+      <p>{$content.description}</p>
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "preact-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "solid-intlayer";
+
+    export const Product = (props: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: props.productId, userId: props.userId },
+      });
+
+      return (
+        <>
+          {content() && <p>{content().description}</p>}
+        </>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+    ```typescript fileName="product.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { Component, Input, OnInit } from "@angular/core";
+    import { useIntlayer } from "angular-intlayer";
+
+    @Component({
+      selector: "app-product",
+      template: `
+        @if (content()) {
+          <p>{{ content().description }}</p>
+        }
+      `,
+    })
+    export class ProductComponent implements OnInit {
+      @Input() productId!: string;
+      @Input() userId!: string;
+
+      content: any;
+
+      ngOnInit() {
+        this.content = useIntlayer("product", {
+          variant: { id: this.productId, userId: this.userId },
+        });
+      }
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+    ```javascript fileName="product.js"
+    import { useIntlayer } from "vanilla-intlayer";
+
+    const content = useIntlayer("product", {
+      variant: { id: "prod_abcd", userId: "user_123" },
+    });
+
+    if (content) {
+      document.body.innerHTML = `<p>${content.description}</p>`;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+#### Com locale explícito
+
+```tsx
+const content = useIntlayer("product", {
+  variant: { id: "prod_abc", userId: "user_123" },
+  locale: "fr",
+});
+```
+
+#### Campo ausente — sem correspondência
+
+```ts
+// Retorna null: `userId` está ausente, então o objeto não corresponde à variante declarada
+const content = useIntlayer("product", { variant: { id: "prod_abc" } });
+```
+
+## Modo de carregamento
+
+As variantes de objeto costumam ser carregadas de forma preguiçosa. Defina `importMode` no dicionário para controlar isso:
+
+```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+const dictionary = {
+  key: "product",
+  importMode: "fetch", // or "dynamic"
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: { … },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+Veja [otimização do bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/bundle_optimization.md) para detalhes sobre os modos `static`, `dynamic` e `fetch`.
+
 ## Casos de uso típicos
 
-- Testes A/B de textos controlados por uma chave de experimento
-- Banners promocionais ou sazonais
-- Mensagens baseadas em sinalizadores de recursos (feature flags)
-- Campanhas de marketing específicas de uma região
+- Testes A/B de texto orientados por uma chave de experimento
+- Banners sazonais ou promocionais
+- Mensagens com feature flag
+- Campanhas de marketing específicas por locale
+- Texto de marketing por produto gerenciado em um CMS
+- Conteúdo específico do usuário ou da conta
+- Qualquer conteúdo indexado por um ID opaco em tempo de execução

package/docs/pt/formatters.md

@@ -176,6 +176,61 @@ getLocaleName("de", "es"); // "alemán"
 - **displayLocale**: O locale para o qual obter o nome
 - **targetLocale**: O locale para exibir o nome (padrão é displayLocale)
 
+### Composables Disponíveis
+
+Todos os composables retornam computed refs que usam automaticamente a locale do `IntlayerProvider` injetado.
+
+| Composable          | Descrição                              | Exemplo de Saída              |
+| ------------------- | -------------------------------------- | ----------------------------- |
+| `useNumber()`       | Formatar números com agrupamento       | `"123,456.789"`               |
+| `useCurrency()`     | Formatar valores de moeda              | `"€1,234.50"`                 |
+| `usePercentage()`   | Formatar percentuais                   | `"25%"`                       |
+| `useDate()`         | Formatar datas e horas                 | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Formatar tempo relativo                | `"in 3 days"`                 |
+| `useUnit()`         | Formatar valores com unidades          | `"5 kilometers"`              |
+| `useCompact()`      | Formatar números em notação compacta   | `"1.2K"`                      |
+| `useList()`         | Formatar arrays como listas            | `"apple, banana, and orange"` |
+| `useIntl()`         | Obter objeto `Intl` vinculado à locale | Acesso completo à API `Intl`  |
+
+### Exemplo Completo
+
+```vue
+<script setup>
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+
+const number = useNumber();
+const currency = useCurrency();
+const date = useDate();
+const percentage = usePercentage();
+const compact = useCompact();
+const list = useList();
+const relativeTime = useRelativeTime();
+const unit = useUnit();
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(123456.789) }}</p>
+    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
+    <p>{{ date.value(new Date(), "short") }}</p>
+    <p>{{ percentage.value(0.25) }}</p>
+    <p>{{ compact.value(1200) }}</p>
+    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
+    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
+    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
+  </div>
+</template>
+```
+
 ### `getLocaleLang(locale?)`
 
 Extrai o código de idioma de uma string de locale:
@@ -190,6 +245,10 @@ getLocaleLang("de"); // "de"
 
 - **locale**: O locale do qual extrair o idioma (padrão é o locale atual)
 
+## Formatadores Vanilla JS / Node.js
+
+Para contextos sem framework, importe formatadores diretamente do `intlayer`. Observe que você deve passar o locale manualmente.
+
 ### `getLocaleFromPath(inputUrl)`
 
 Extrai o segmento de locale de uma URL ou pathname:
@@ -206,6 +265,8 @@ getLocaleFromPath("https://example.com/es/about"); // "es"
 - **inputUrl**: A string completa da URL ou caminho para processar
 - **returns**: O locale detectado ou o locale padrão se nenhum locale for encontrado
 
+### Funções de Formatter
+
 ### `getPathWithoutLocale(inputUrl, locales?)`
 
 Remove o segmento de locale de uma URL ou caminho:
@@ -330,6 +391,8 @@ const content = await getIntlayerAsync("common", "fr");
 
 Todos os helpers abaixo são exportados de `intlayer`.
 
+### Funcionalidades Intl Adicionais
+
 ### `number(value, options?)`
 
 Formata um valor numérico usando agrupamento e decimais sensíveis ao locale.
@@ -366,6 +429,23 @@ percentage(25); // "25%"
 percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
 ```
 
+#### `Intl.PluralRules`
+
+Para determinar formas plurais em diferentes locales:
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
+## Utilitários de Locale
+
 ### `currency(value, options?)`
 
 Formata um valor como moeda localizada. O padrão é `USD` com duas casas decimais.
@@ -610,3 +690,9 @@ import {
 ```
 
 > Esses composables irão considerar o locale do `IntlayerProvider` injetado
+
+## Notas
+
+- Todos os helpers aceitam entradas `string`; elas são internamente coagidas para números ou datas.
+- Locale padrão é sua `internationalization.defaultLocale` configurada, se não fornecida.
+- Esses utilitários são wrappers simples; para formatação avançada, passe pelas opções `Intl` padrão.

package/docs/pt/how_works_intlayer.md

@@ -22,6 +22,10 @@ author: aymericzip
 
 # Como Intlayer funciona
 
+## Índice
+
+<TOC/>
+
 ## Visão Geral
 
 A ideia principal por trás do Intlayer é adotar um gerenciamento de conteúdo por componente. Assim, a ideia do Intlayer é permitir que você declare seu conteúdo em qualquer lugar no seu código, como no mesmo diretório do seu componente.

package/docs/pt/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-06-30
 title: Intlayer CMS | Externalize seu conteúdo no Intlayer CMS
 description: Externalize seu conteúdo no Intlayer CMS para delegar a gestão do seu conteúdo para sua equipe.
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - cms
 youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 history:
+  - version: 9.0.0
+    date: 2026-06-30
+    changes: "Adicionada seção de Auto-hospedagem: bootstrap Docker Compose, inventário de serviços, configuração SDK, recursos opcionais e notas de atualização"
   - version: 6.0.1
     date: 2025-09-22
     changes: "Adiciona documentação sobre live sync"
@@ -40,6 +43,12 @@ Para isso, o Intlayer introduz o conceito de 'dicionários distantes'.
 
 ![Interface do Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
 
+## Índice
+
+<TOC/>
+
+---
+
 ## Entendendo os dicionários distantes
 
 O Intlayer faz uma distinção entre dicionários 'locais' e 'distantes'.
@@ -381,3 +390,131 @@ Notas e restrições:
 - Certifique-se de que a configuração do projeto foi enviada para o Intlayer CMS.
 
 - O editor visual usa um iframe para exibir seu site. Certifique-se de que a Política de Segurança de Conteúdo (CSP) do seu site permita a URL do CMS como `frame-ancestors` ('https://app.intlayer.org' por padrão). Verifique o console do editor para qualquer erro.
+
+## Auto-hospedagem
+
+O Intlayer pode ser executado inteiramente na sua própria infraestrutura — sem necessidade de conta no Intlayer Cloud. Um único comando inicializa toda a pilha (dashboard, API, banco de dados, armazenamento de objetos e e-mail) usando Docker Compose:
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+Isso baixa um `docker-compose.yml` e um `.env`, gera automaticamente os secrets necessários (`BETTER_AUTH_SECRET`, credenciais do MinIO) e inicia todos os contêineres com `docker compose up -d`. Executar o mesmo comando novamente em uma instalação existente realiza uma atualização gradual sem perda de dados.
+
+### Serviços iniciados
+
+| Serviço             | Porta(s)                              | Finalidade                                         |
+| ------------------- | ------------------------------------- | -------------------------------------------------- |
+| **app** (dashboard) | `3000`                                | Interface CMS TanStack Start                       |
+| **backend** (API)   | `3100`                                | API REST Fastify                                   |
+| **MongoDB 7**       | interno                               | Banco de dados principal (replica set de nó único) |
+| **Redis 7**         | interno                               | Filas de tarefas e cache                           |
+| **MinIO**           | `9000` (S3), `9001` (console)         | Armazenamento de objetos compatível com S3         |
+| **Mailpit**         | `1025` (SMTP), `8025` (interface web) | Sumidouro local de e-mail transacional             |
+
+O Chromium (para geração de capturas de tela com Puppeteer) está incluído na imagem do backend — nenhum contêiner adicional é necessário.
+
+### Conectando seu projeto a uma instância auto-hospedada
+
+Aponte sua configuração do Intlayer para seu próprio backend e dashboard em vez de `intlayer.org`:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+
+    /**
+     * URL do dashboard CMS auto-hospedado.
+     * Padrão: https://app.intlayer.org
+     */
+    cmsURL: process.env.INTLAYER_CMS_URL, // ex. http://localhost:3000
+
+    /**
+     * URL da API backend auto-hospedada.
+     * Padrão: https://back.intlayer.org
+     */
+    backendURL: process.env.INTLAYER_BACKEND_URL, // ex. http://localhost:3100
+  },
+};
+
+export default config;
+```
+
+Defina as variáveis de ambiente correspondentes no seu projeto:
+
+```sh
+INTLAYER_CMS_URL=http://localhost:3000
+INTLAYER_BACKEND_URL=http://localhost:3100
+INTLAYER_CLIENT_ID=<your-client-id>
+INTLAYER_CLIENT_SECRET=<your-client-secret>
+```
+
+Crie credenciais de acesso no seu dashboard auto-hospedado em `http://localhost:3000/projects`.
+
+### SDK `@intlayer/api`: apontando para um backend auto-hospedado
+
+Ao usar o SDK de forma programática, passe `backendURL` explicitamente para `createIntlayerCMS`:
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cms = createIntlayerCMS({
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    backendURL: process.env.INTLAYER_BACKEND_URL, // http://localhost:3100
+  },
+});
+
+const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
+```
+
+### Recursos opcionais
+
+Estes recursos requerem contas externas e funcionam corretamente quando suas chaves estão ausentes do `.env` auto-hospedado:
+
+| Recurso                                | Variável(is) de ambiente                        |
+| -------------------------------------- | ----------------------------------------------- |
+| Tradução / auditoria com IA            | `OPENAI_API_KEY`                                |
+| Faturamento                            | `STRIPE_SECRET_KEY`, `STRIPE_WEBHOOK_SECRET`, … |
+| OAuth do GitHub                        | `GITHUB_CLIENT_ID`, `GITHUB_CLIENT_SECRET`      |
+| OAuth do Google                        | `GOOGLE_CLIENT_ID`, `GOOGLE_CLIENT_SECRET`      |
+| OAuth do GitLab / Microsoft / LinkedIn | `GITLAB_*`, `MICROSOFT_*`, `LINKEDIN_*`         |
+| E-mail transacional via Resend         | `RESEND_API_KEY` (padrão: Mailpit SMTP)         |
+
+### Persistência de dados e atualizações
+
+Três volumes do Docker contêm todo o estado persistente: `mongo-data`, `redis-data` e `minio-data`. Eles sobrevivem a reinicializações e atualizações de contêineres. Executar o instalador novamente baixa as imagens mais recentes e realiza um `docker compose up -d` gradual.
+
+Portas expostas no host:
+
+| Porta  | Serviço                                                               |
+| ------ | --------------------------------------------------------------------- |
+| `3000` | Dashboard                                                             |
+| `3100` | API Backend                                                           |
+| `8025` | Interface web de e-mail Mailpit                                       |
+| `9000` | API S3 do MinIO (necessária para carregamento de assets no navegador) |
+| `9001` | Console do MinIO                                                      |
+
+Para uma referência completa de todas as variáveis de ambiente disponíveis e opções avançadas (proxy reverso, domínios personalizados, backup/restauração), consulte o [Guia de Auto-hospedagem](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/self_hosting.md).
+
+---
+
+## Depuração
+
+Se encontrar problemas com o CMS, verifique o seguinte:
+
+- A aplicação está em execução.
+
+- A configuração [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) está corretamente definida no seu arquivo de configuração do Intlayer.
+  - Campos obrigatórios:
+    - O URL da aplicação deve corresponder ao que você definiu na configuração do editor (`applicationURL`).
+    - O URL do CMS
+
+- Certifique-se de que a configuração do projeto foi enviada para o Intlayer CMS.
+
+- O editor visual usa um iframe para exibir seu website. Certifique-se de que a Política de Segurança de Conteúdo (CSP) do seu website permite o URL do CMS como `frame-ancestors` ('https://app.intlayer.org' por padrão). Verifique o console do editor para qualquer erro.