@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/pt/formatters.md

@@ -48,46 +48,16 @@ O Intlayer fornece um conjunto de helpers leves construídos sobre as APIs nativ
 
 ## Intl em Cache
 
-O `Intl` exportado é um wrapper leve e em cache em torno do `Intl` global. Ele memoiza instâncias de `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` e `PluralRules`, o que evita reconstruir o mesmo formatador repetidamente.
-
 Como a construção do formatador é relativamente dispendiosa, este cache melhora o desempenho sem alterar o comportamento. O wrapper expõe a mesma API do `Intl` nativo, portanto o uso é idêntico.
 
-- O cache é por processo e transparente para os chamadores.
-
 > Se `Intl.DisplayNames` não estiver disponível no ambiente, um único aviso para desenvolvedores é exibido (considere um polyfill).
 
 Exemplos:
 
-```ts
-import { Intl } from "intlayer";
-
-// Formatação de números
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// Nomes exibidos para idiomas, regiões, etc.
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// Ordenação para sorting
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0 (igual)
-
-// Regras de plural
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## React Formatters
 
 ### `Intl.DisplayNames`
 
-Para nomes localizados de idiomas, regiões, moedas e scripts:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -116,8 +86,6 @@ Todos os hooks usam automaticamente a locale de `IntlayerProvider` ou `IntlayerS
 
 ### `Intl.Collator`
 
-Para comparação e ordenação de strings sensíveis ao local:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -149,8 +117,6 @@ pluralRules.select(11); // "many"
 
 ### `getLocaleName(displayLocale, targetLocale?)`
 
-Obtém o nome localizado de uma localidade em outra localidade:
-
 ```ts
 import { getLocaleName } from "intlayer";
 
@@ -159,9 +125,6 @@ getLocaleName("en", "fr"); // "anglais"
 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.
@@ -229,16 +192,12 @@ getLocaleLang("fr-CA"); // "fr"
 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:
-
 ```ts
 import { getLocaleFromPath } from "intlayer";
 
@@ -248,9 +207,6 @@ getLocaleFromPath("/dashboard"); // "en" (locale padrão)
 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
 
 #### `number(value, options?)`
@@ -363,6 +319,30 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 
 Todos os helpers abaixo são exportados de `intlayer`.
 
+```ts
+import { Intl } from "intlayer";
+
+// Formatação de números
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+
+// Nomes de exibição para idiomas, regiões, etc.
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Ordenação para classificação
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (igual)
+
+// Regras de plural
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
 ### Funcionalidades Intl Adicionais
 
 #### `Intl.DisplayNames`
@@ -414,12 +394,6 @@ pluralRules.select(11); // "many"
 
 ### `currency(value, options?)`
 
-Formata um valor como moeda localizada. O padrão é `USD` com duas casas decimais.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Campos comuns: `currency` (por exemplo, `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
-
 Exemplos:
 
 ```ts
@@ -431,12 +405,6 @@ currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); //
 
 ### `date(date, optionsOrPreset?)`
 
-Formata um valor de data/hora com `Intl.DateTimeFormat`.
-
-- **date**: `Date | string | number`
-- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` ou um dos predefinidos:
-  - Predefinidos: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
 Exemplos:
 
 ```ts
@@ -448,14 +416,6 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
 
 ### `relativeTime(from, to = new Date(), options?)`
 
-Formata o tempo relativo entre dois instantes com `Intl.RelativeTimeFormat`.
-
-- Passe "now" como o primeiro argumento e o alvo como o segundo para obter uma frase natural.
-- **from**: `Date | string | number`
-- **to**: `Date | string | number` (padrão é `new Date()`)
-- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
-  - O `unit` padrão é `"second"`.
-
 Exemplos:
 
 ```ts
@@ -471,13 +431,6 @@ relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "há 2 hor
 
 ### `units(value, options?)`
 
-Formata um valor numérico como uma string de unidade localizada usando `Intl.NumberFormat` com `style: 'unit'`.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Campos comuns: `unit` (ex.: `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - Padrões: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
 Exemplos:
 
 ```ts
@@ -489,11 +442,6 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1.024B" (dependente do
 
 ### `compact(value, options?)`
 
-Formata um número usando notação compacta (ex.: `1.2K`, `1M`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (usa `notation: 'compact'` internamente)
-
 Exemplos:
 
 ```ts
@@ -519,13 +467,6 @@ getHTMLTextDir("he"); // "rtl"
 
 ### `list(values, options?)`
 
-Formata um array de valores em uma string de lista localizada usando `Intl.ListFormat`.
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - Campos comuns: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
-  - Padrões: `type: 'conjunction'`, `style: 'long'`
-
 Exemplos:
 
 ```ts
@@ -540,56 +481,6 @@ list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 
 Componentes cliente:
 
-```tsx
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/format";
-// ou em apps Next.js
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/client/format";
-
-const MyComponent = () => {
-  const number = useNumber();
-  const currency = useCurrency();
-  const date = useDate();
-  const percentage = usePercentage();
-  const compact = useCompact();
-  const list = useList();
-  const relativeTime = useRelativeTime();
-  const unit = useUnit();
-
-  return (
-    <div>
-      <p>{number(123456.789)}</p>
-      <p>{currency(1234.5, { currency: "EUR" })}</p>
-      <p>{date(new Date(), "short")}</p>
-      <p>{percentage(0.25)}</p>
-      <p>{compact(1200)}</p>
-      <p>{list(["apple", "banana", "orange"])}</p>
-      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
-      <p>{unit(123456.789, { unit: "kilometer" })}</p>
-    </div>
-  );
-};
-```
-
-Componentes servidor (ou runtime React Server):
-
 ```ts
 import {
   useNumber,
@@ -614,8 +505,6 @@ import {
 } from "next-intlayer/server/format";
 ```
 
-> Esses hooks irão considerar a localidade do `IntlayerProvider` ou `IntlayerServerProvider`
-
 ### Vue
 
 Componentes cliente:
@@ -633,8 +522,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> 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.

package/docs/pt/how_works_intlayer.md

@@ -99,6 +99,9 @@ O Intlayer também fornece um editor visual para permitir que você edite seu co
 
 ![editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- O servidor é uma aplicação Express simples que escuta requisições do cliente e recupera o conteúdo da sua aplicação, como os `dictionaries` e a configuração para torná-lo acessível no lado do cliente.
+- Por outro lado, o cliente é uma aplicação React que é usada para interagir com seu conteúdo usando uma interface visual.
+
 - O servidor é uma aplicação simples em Express que escuta requisições do cliente e recupera o conteúdo da sua aplicação, como os `dictionaries` e a configuração para torná-los acessíveis no lado do cliente.
 - Por outro lado, o cliente é uma aplicação React que é usada para interagir com seu conteúdo usando uma interface visual.
   Quando você chama seu conteúdo usando `useIntlayer` e o editor está ativado, ele automaticamente envolve suas strings com um objeto Proxy chamado `IntlayerNode`. Esse nó usa `window.postMessage` para se comunicar com um iframe encapsulado que contém a interface do editor visual.  
@@ -109,6 +112,8 @@ O Intlayer também fornece um editor visual para permitir que você edite seu co
 Para otimizar o tamanho do bundle da sua aplicação, o Intlayer fornece dois plugins para otimizar a construção da sua aplicação: os plugins `@intlayer/babel` e `@intlayer/swc`.
 Os plugins Babel e SWC funcionam analisando a Árvore de Sintaxe Abstrata (AST) da sua aplicação para substituir chamadas das funções do Intlayer por código otimizado. Esse processo torna o pacote final mais leve em produção, garantindo que apenas os dicionários realmente usados sejam importados, otimizando o particionamento e reduzindo o tamanho do bundle.
 
+Os plugins Babel e SWC funcionam analisando a Abstract Syntax Tree (AST) da sua aplicação para substituir chamadas de funções Intlayer por código otimizado. Este processo torna seu bundle final mais leve em produção, garantindo que apenas os dicionários que são realmente usados sejam importados, otimizando o chunking e reduzindo o tamanho do bundle.
+
 No modo de desenvolvimento, o Intlayer usa uma importação estática centralizada para os dicionários, simplificando a experiência de desenvolvimento.
 
 Ao ativar a opção `importMode = "dynamic"` na [configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md), o Intlayer usará a importação dinâmica para carregar os dicionários. Essa opção está desativada por padrão para evitar processamento assíncrono ao renderizar a aplicação.

package/docs/pt/intlayer_CMS.md

@@ -311,8 +311,6 @@ export const cmsAuthenticator = createIntlayerCMS({
 
 ### 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";
 
@@ -338,21 +336,8 @@ const config: IntlayerConfig = {
 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";
@@ -372,6 +357,32 @@ const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
 
 Estes recursos requerem contas externas e funcionam corretamente quando suas chaves estão ausentes do `.env` auto-hospedado:
 
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Criar um novo dicionário
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// Upsert um lote de dicionários (criar ou atualizar em uma única chamada)
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// Atualizar um dicionário existente
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
 | Recurso                                | Variável(is) de ambiente                        |
 | -------------------------------------- | ----------------------------------------------- |
 | Tradução / auditoria com IA            | `OPENAI_API_KEY`                                |
@@ -383,8 +394,6 @@ Estes recursos requerem contas externas e funcionam corretamente quando suas cha
 
 ### 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                                                               |
@@ -395,10 +404,6 @@ Portas expostas no host:
 | `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).
-
----
-
 ## Live Sync
 
 O Live Sync permite que seu aplicativo reflita as alterações de conteúdo do CMS em tempo de execução — sem necessidade de reconstrução ou reimplantação. Quando habilitado, as atualizações são transmitidas para um servidor Live Sync que atualiza os dicionários que seu aplicativo lê.

package/docs/pt/intlayer_visual_editor.md

@@ -45,8 +45,6 @@ Para mais detalhes sobre como integrar o Intlayer, consulte a seção relevante
 
 ### Integração com Next.js
 
-///chunkStart### Integração com Next.js
-
 Para integração com Next.js, consulte o [guia de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_nextjs_15.md).
 
 ### Integração com Create React App
@@ -87,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+Com a flag `--with`, você pode iniciar o editor em paralelo com outro comando:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## Configuração
 
 No arquivo de configuração do Intlayer, você pode personalizar as configurações do editor:
@@ -148,6 +156,8 @@ export default config;
 
    > **Observe que você deve executar sua aplicação em paralelo.** A URL da aplicação deve corresponder à que você configurou no editor (`applicationURL`).
 
+> **Nota que o comando é reexportado pelo pacote `intlayer`. Você pode usar `npx intlayer editor start` em vez disso.**
+
 2. Em seguida, abra a URL fornecida. Por padrão `http://localhost:8000`.
 
    Você pode visualizar cada campo indexado pelo Intlayer passando o cursor sobre seu conteúdo.

package/docs/pt/intlayer_with_adonisjs.md

@@ -258,9 +258,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... Outras opções de configuração
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/pt/intlayer_with_astro.md

@@ -122,6 +122,30 @@ Confira o [modelo da aplicação](https://github.com/aymericzip/intlayer-astro-t
 
 Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> a flag `--interactive` é opcional. Use `intlayer-cli init` se você for um agente de IA.
+
+> Este comando detectará seu ambiente e instalará os pacotes necessários. Por exemplo:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # Opcional: Se você adicionar suporte para islands do React
@@ -313,12 +337,84 @@ const { title } = getIntlayer('app');
 <h1>{title}</h1>
 ```
 
+> **Nota sobre Configuração de Roteamento:**
+> A estrutura de diretórios que você usa depende da configuração `middleware.routing` em seu `intlayer.config.ts`:
+>
+> - **`prefix-no-default` (padrão):** Mantém a locale padrão na raiz (sem prefixo) e prefixia as outras. Use `[...locale]` para capturar todos os casos.
+> - **`prefix-all`:** Todos os URLs são prefixados com a locale. Você pode usar `[locale]` padrão se não precisar manipular a raiz separadamente.
+> - **`search-param` ou `no-prefix`:** Nenhuma pasta de locale é necessária. A locale é manipulada via parâmetros de busca ou cookies.
+
+</Step>
+
+<Step number={7} title="Add a Locale Switcher">
+
 A integração do Astro adiciona um middleware Vite que ajuda no roteamento sensível ao idioma e nas definições de ambiente durante o desenvolvimento. Você também pode criar links entre idiomas usando sua própria lógica ou ferramentas do `intlayer`, como o `getLocalizedUrl`.
 
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import {
+  locales,
+  getLocaleName,
+  getLocalizedUrl,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  type LocalesValues,
+} from "intlayer";
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<nav>
+  {
+    locales.map((localeItem) => (
+      <a
+        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+        data-locale={localeItem}
+        aria-current={localeItem === locale ? "page" : undefined}
+      >
+        {getLocaleName(localeItem)}
+      </a>
+    ))
+  }
+</nav>
+
+<script>
+  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  const localeLinks = document.querySelectorAll("[data-locale]");
+
+  localeLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const locale = link.getAttribute("data-locale") as LocalesValues;
+
+      // Atualizar o cookie de locale
+      setLocaleInStorageClient(locale);
+    });
+  });
+</script>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1rem;
+  }
+  a[aria-current="page"] {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+</style>
+```
+
+> **Nota sobre Persistência:**
+> Usar `setLocaleInStorageClient` no script do lado do cliente garante que a preferência de idioma do usuário seja salva em um cookie. Isso permite que o middleware Intlayer lembre da escolha e redirecione automaticamente o usuário para seu idioma preferido em visitas futuras.
+
 </Step>
 
 <Step number={8} title="Sitemap e Robots.txt">
 
+Intlayer fornece utilitários para gerar sitemaps localizados e arquivos robots.txt dinamicamente.
+
 #### Sitemap
 
 O Intlayer vem com um gerador de sitemap integrado para ajudá-lo a criar um sitemap para sua aplicação facilmente. Ele manipula rotas localizadas e adiciona os metadados necessários para mecanismos de busca.

package/docs/pt/intlayer_with_astro_lit.md

@@ -112,14 +112,6 @@ Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] a
 
 ## Guia passo a passo para configurar o Intlayer no Astro + Lit
 
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-astro-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Como internacionalizar sua aplicação com o Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
 Confira o [modelo da aplicação](https://github.com/aymericzip/intlayer-astro-template) no GitHub.
 
 <Steps>

package/docs/pt/intlayer_with_astro_preact.md

@@ -602,6 +602,12 @@ bun run build # Or bun run dev
 
 ### Configuração do TypeScript
 
+Intlayer utiliza module augmentation para aproveitar os benefícios do TypeScript e tornar seu codebase mais robusto.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Erro de tradução](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
 O Intlayer usa o aumento de módulos (module augmentation) para aproveitar o TypeScript, tornando sua base de código mais robusta. Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente e esteja configurada para o Preact:
 
 ```json5 fileName="tsconfig.json"