@intlayer/docs 9.1.3 → 9.3.0

package/docs/pt/formatters.md

@@ -46,34 +46,6 @@ author: aymericzip
 
 O Intlayer fornece um conjunto de helpers leves construídos sobre as APIs nativas `Intl`, além de um wrapper `Intl` em cache para evitar a construção repetida de formatadores pesados. Esses utilitários são totalmente sensíveis à localidade e podem ser usados a partir do pacote principal `intlayer`.
 
-### Importação
-
-```ts
-import {
-  Intl,
-  number,
-  percentage,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-  getIntlayerAsync,
-} from "intlayer";
-```
-
-Se estiver a usar React, os hooks também estão disponíveis; veja `react-intlayer/format`.
-
 ## 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.
@@ -110,9 +82,7 @@ pluralRules.select(1); // "one"
 pluralRules.select(2); // "other"
 ```
 
-## Utilitários adicionais do Intl
-
-Além dos auxiliares de formatadores, você também pode usar diretamente o wrapper Intl em cache para outros recursos do Intl:
+## React Formatters
 
 ### `Intl.DisplayNames`
 
@@ -128,6 +98,22 @@ const regionNames = new Intl.DisplayNames("fr", { type: "region" });
 regionNames.of("US"); // "États-Unis"
 ```
 
+### Hooks Disponíveis
+
+Todos os hooks usam automaticamente a locale de `IntlayerProvider` ou `IntlayerServerProvider`.
+
+| Hook                | Description                            | Example Output                |
+| ------------------- | -------------------------------------- | ----------------------------- |
+| `useNumber()`       | Formatar números com agrupamento       | `"123,456.789"`               |
+| `useCurrency()`     | Formatar valores de moeda              | `"€1,234.50"`                 |
+| `usePercentage()`   | Formatar percentagens                  | `"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`  |
+
 ### `Intl.Collator`
 
 Para comparação e ordenação de strings sensíveis ao local:
@@ -267,166 +253,146 @@ getLocaleFromPath("https://example.com/es/about"); // "es"
 
 ### Funções de Formatter
 
-### `getPathWithoutLocale(inputUrl, locales?)`
+#### `number(value, options?)`
 
-Remove o segmento de locale de uma URL ou caminho:
+Formata um valor numérico usando agrupamento e decimais compatíveis com a localidade.
 
-```ts
-import { getPathWithoutLocale } from "intlayer";
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
 
-getPathWithoutLocale("/en/dashboard"); // "/dashboard"
-getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
-getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
+```ts
+number(123456.789); // "123,456.789" (em en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
-- **inputUrl**: A string completa da URL ou caminho para processar
-- **locales**: Array opcional de locales suportados (padrão para os locales configurados)
-- **returns**: A URL sem o segmento de locale
+#### `percentage(value, options?)`
 
-### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+Formata um número como uma string de percentual. Valores maiores que 1 são normalizados (ex: `25` → `25%`, `0.25` → `25%`).
 
-Gera uma URL localizada para o locale atual:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
 
 ```ts
-import { getLocalizedUrl } from "intlayer";
-
-getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
-getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
-getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
 ```
 
-- **url**: A URL original para localizar
-- **currentLocale**: O locale atual
-- **locales**: Array opcional de locales suportados (padrão para os locales configurados)
-- **defaultLocale**: Locale padrão opcional (padrão para o locale padrão configurado)
-- **prefixDefault**: Se deve prefixar o locale padrão (padrão para o valor configurado)
+#### `currency(value, options?)`
 
-### `getHTMLTextDir(locale?)`
+Formata um valor como moeda localizada. Padrão é `USD`.
 
-Retorna a direção do texto para um locale:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Comuns: `currency`, `currencyDisplay` (`"symbol" | "code" | "name"`)
 
 ```ts
-import { getHTMLTextDir } from "intlayer";
-
-getHTMLTextDir("en-US"); // "ltr"
-getHTMLTextDir("ar"); // "rtl"
-getHTMLTextDir("he"); // "rtl"
+currency(1234.5, { currency: "EUR" }); // "€1,234.50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
 ```
 
-- **locale**: O locale para obter a direção do texto (padrão para o locale atual)
-- **returns**: `"ltr"`, `"rtl"` ou `"auto"`
+#### `date(date, optionsOrPreset?)`
+
+Formata um valor de data/hora.
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` or preset: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+```ts
+date(new Date(), "short"); // e.g., "08/02/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
 
-## Utilitários para Manipulação de Conteúdo
+#### `relativeTime(from, to?, options?)`
 
-### `getContent(node, nodeProps, locale?)`
+Formata tempo relativo entre dois instantes.
 
-Transforma um nó de conteúdo com todos os plugins disponíveis (tradução, enumeração, inserção, etc.):
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (padrão para `new Date()`)
+- **options**: `{ locale?, unit?, numeric?, style? }`
 
 ```ts
-import { getContent } from "intlayer";
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "em 3 dias"
 
-const content = getContent(
-  contentNode,
-  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
-  "fr"
-);
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "há 2 horas"
 ```
 
-- **node**: O nó de conteúdo a ser transformado
-- **nodeProps**: Propriedades para o contexto da transformação
-- **locale**: Locale opcional (padrão para o locale padrão configurado)
+#### `units(value, options?)`
 
-### `getTranslation(languageContent, locale?, fallback?)`
+Formata um valor numérico com uma unidade.
 
-Extrai conteúdo para um locale específico a partir de um objeto de conteúdo multilíngue:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Common: `unit` (e.g., `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
 
 ```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"
 ```
 
-- **languageContent**: Objeto que mapeia locales para conteúdo
-- **locale**: Locale alvo (padrão para o locale padrão configurado)
-- **fallback**: Se deve retornar ao locale padrão (padrão é true)
+#### `compact(value, options?)`
 
-### `getIntlayer(dictionaryKey, locale?, plugins?)`
+Formata um número usando notação compacta.
 
-Recupera e transforma conteúdo de um dicionário pela chave:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
 
 ```ts
-import { getIntlayer } from "intlayer";
-
-const content = getIntlayer("common", "fr");
-const nestedContent = getIntlayer("common", "fr", customPlugins);
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 ```
 
-- **dictionaryKey**: A chave do dicionário a ser recuperada
-- **locale**: Locale opcional (padrão para o locale padrão configurado)
-- **plugins**: Array opcional de plugins de transformação personalizados
+#### `list(values, options?)`
 
-### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
+Formata um array em uma string de lista localizada.
 
-Recupera conteúdo de um dicionário remoto de forma assíncrona:
+- **values**: `(string | number)[]`
+- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Common: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
 
 ```ts
-import { getIntlayerAsync } from "intlayer";
-
-const content = await getIntlayerAsync("common", "fr");
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
 ```
 
-- **dictionaryKey**: A chave do dicionário a ser recuperada
-- **locale**: Locale opcional (padrão para o locale padrão configurado)
-- **plugins**: Array opcional de plugins de transformação personalizados
-
 ## Formatadores
 
 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.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+#### `Intl.DisplayNames`
 
-Exemplos:
+Para nomes localizados de idiomas, regiões, moedas e scripts:
 
 ```ts
-import { number } from "intlayer";
-
-number(123456.789); // "123,456.789" (em en-US)
-number("1000000", { locale: "fr" }); // "1 000 000"
-number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
-```
+import { Intl } from "intlayer";
 
-### `percentage(value, options?)`
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
 
-Formata um número como uma string percentual.
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
 
-Comportamento: valores maiores que 1 são interpretados como percentuais inteiros e normalizados (ex.: `25` → `25%`, `0.25` → `25%`).
+#### `Intl.Collator`
 
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-Exemplos:
+Para comparação e classificação de strings com reconhecimento de locale:
 
 ```ts
-import { percentage } from "intlayer";
+import { Intl } from "intlayer";
 
-percentage(0.25); // "25%"
-percentage(25); // "25%"
-percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
 ```
 
 #### `Intl.PluralRules`
@@ -537,6 +503,20 @@ compact(1200); // "1.2K"
 compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 milhão"
 ```
 
+### `getHTMLTextDir(locale?)`
+
+Retorna a direção do texto para uma localidade:
+
+```ts
+import { getHTMLTextDir } from "intlayer";
+
+getHTMLTextDir("en-US"); // "ltr"
+getHTMLTextDir("ar"); // "rtl"
+getHTMLTextDir("he"); // "rtl"
+```
+
+## Utilitários de Tratamento de Conteúdo
+
 ### `list(values, options?)`
 
 Formata um array de valores em uma string de lista localizada usando `Intl.ListFormat`.
@@ -556,42 +536,6 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
-## Notas
-
-- Todos os helpers aceitam entradas do tipo `string`; elas são internamente convertidas para números ou datas.
-- O locale padrão é o configurado em `internationalization.defaultLocale`, caso não seja fornecido.
-- Essas utilidades são wrappers simples; para formatações avançadas, utilize diretamente as opções padrão do `Intl`.
-
-## Pontos de entrada e re-exportações (`@index.ts`)
-
-Os formatadores estão no pacote core e são re-exportados por pacotes de nível superior para manter as importações ergonômicas em diferentes runtimes:
-
-Exemplos:
-
-```ts
-// Código da aplicação (recomendado)
-import {
-  number,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  Intl,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-  getIntlayerAsync,
-} from "intlayer";
-```
-
 ### React
 
 Componentes cliente:

package/docs/pt/intlayer_CMS.md

@@ -253,28 +253,61 @@ A Sincronização ao Vivo permite que a sua aplicação reflita as alterações
 
 Para o guia de configuração completo (ativação, início do servidor Live Sync, fluxo de trabalho de desenvolvimento local e restrições), consulte a [documentação do Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/live-sync.md).
 
-## Auto-hospedagem
+### Instalação
 
-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:
+```bash packageManager="npm"
+npm install @intlayer/api
+```
 
-```sh
-curl -fsSL https://intlayer.org/install.sh | sh
+```bash packageManager="yarn"
+yarn add @intlayer/api
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/api
+```
+
+```bash packageManager="bun"
+bun add @intlayer/api
 ```
 
-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.
+### Como funciona: autenticador + endpoints
+
+O SDK é dividido em **duas importações separadas** propositalmente, para manter seu bundle pequeno:
+
+1. `createIntlayerCMS` — cria um **autenticador** leve. Ele apenas contém as credenciais e o token de acesso gerenciado; não sabe nada sobre nenhum domínio específico.
+2. `dictionaryEndpoint`, `projectEndpoint`, … — **vinculadores de endpoint** por domínio, cada um importado de seu próprio subcaminho (`@intlayer/api/dictionary`, `@intlayer/api/project`, …). Você passa o autenticador para o endpoint que precisa.
 
-### Serviços iniciados
+Como cada endpoint é importado separadamente, seu bundle inclui apenas os domínios que você realmente usa — importar `dictionaryEndpoint` nunca puxa o cliente de projeto, IA ou qualquer outro domínio.
 
-| 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             |
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
 
-O Chromium (para geração de capturas de tela com Puppeteer) está incluído na imagem do backend — nenhum contêiner adicional é necessário.
+// A configuração é opcional: quando omitida, as credenciais são lidas de
+// `@intlayer/config/built`, que resolve as variáveis de ambiente
+// INTLAYER_CLIENT_ID e INTLAYER_CLIENT_SECRET.
+export const cmsAuthenticator = createIntlayerCMS();
+```
+
+> [!WARNING]
+> As credenciais do CMS (`clientId` / `clientSecret`) concedem **acesso de escrita** ao seu conteúdo. Sempre crie o autenticador apenas no **lado do servidor** (server actions, route handlers, scripts, CI). Nunca importe para código do lado do cliente ou exponha suas credenciais ao navegador.
+
+Se preferir não depender da configuração em tempo de build, passe as credenciais explicitamente:
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+export const cmsAuthenticator = createIntlayerCMS({
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    // Opcional, para backends auto-hospedados:
+    // backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+});
+```
+
+> Obtenha suas credenciais criando uma nova chave de acesso no [Intlayer Dashboard - Projects](https://app.intlayer.org/projects).
 
 ### Conectando seu projeto a uma instância auto-hospedada
 
@@ -366,6 +399,24 @@ Para uma referência completa de todas as variáveis de ambiente disponíveis e
 
 ---
 
+## 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ê.
+
+Para o guia de configuração completo (configuração, iniciando o servidor Live Sync, fluxo de trabalho de desenvolvimento local e restrições), consulte a [documentação do Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/live-sync.md).
+
+## Auto-hospedagem
+
+O Intlayer pode ser executado inteiramente em sua própria infraestrutura. Um comando único inicializa a pilha completa (dashboard, API, banco de dados, armazenamento de objetos e email) com Docker Compose:
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+Para o guia de configuração completo, referência de variáveis de ambiente, instruções de atualização e procedimentos de 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:

package/docs/pt/intlayer_with_angular_21.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-31
-title: "Angular 21 i18n - Guia completo para traduzir seu aplicativo"
-description: "Sem mais i18next. O guia 2026 para criar uma aplicação Angular 21 multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
+title: "Angular 22 i18n - Guia completo para traduzir seu aplicativo"
+description: "Sem mais i18next. O guia 2026 para criar uma aplicação Angular 22 multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
   - Internacionalização
   - Documentação
@@ -13,8 +13,8 @@ slugs:
   - doc
   - environment
   - angular
-applicationTemplate: https://github.com/aymericzip/intlayer-angular-21-template
-applicationShowcase: https://intlayer-angular-21-template.vercel.app/
+applicationTemplate: https://github.com/aymericzip/intlayer-angular-22-template
+applicationShowcase: https://intlayer-angular-22-template.vercel.app/
 history:
   - version: 8.9.0
     date: 2026-05-04
@@ -31,7 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Traduza seu site Angular 21 (Vite) usando Intlayer | Internacionalização (i18n)
+# Traduza seu site Angular 22 (Vite) usando Intlayer | Internacionalização (i18n)
 
 ## Índice
 
@@ -94,7 +94,7 @@ Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] a
   <Tab label="Código" value="code">
 
 <iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-21-template?file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-22-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 usando Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -105,7 +105,7 @@ Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] a
   <Tab label="Demonstração" value="demo">
 
 <iframe
-  src="https://intlayer-angular-21-template.vercel.app/"
+  src="https://intlayer-angular-22-template.vercel.app/"
   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 - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -115,7 +115,7 @@ Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] a
   </Tab>
 </Tabs>
 
-Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-angular-21-template) no GitHub.
+Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-angular-22-template) no GitHub.
 
 <Steps>
 
@@ -203,7 +203,7 @@ export default config;
 
 <Step number={3} title="Integrar o Intlayer na sua Configuração Angular">
 
-Para integrar o Intlayer com o Angular CLI, você precisa usar um builder personalizado. Este guia assume que você está usando Vite/esbuild (padrão para projetos Angular 21).
+Para integrar o Intlayer com o Angular CLI, você precisa usar um builder personalizado. Este guia assume que você está usando Vite/esbuild (padrão para projetos Angular 22).
 
 Primeiro, modifique seu `angular.json` para usar o construtor esbuild personalizado. Atualize as configurações `build` e `serve`:
 

package/docs/pt/intlayer_with_astro_lit.md

@@ -28,7 +28,32 @@ history:
 author: aymericzip 
 ---
 
-# Traduza o seu site Astro + Lit com o Intlayer | Internacionalização (i18n)
+# Traduza seu website Astro + Lit usando Intlayer | Internacionalização (i18n)
+
+<Tabs defaultTab="code">
+  <Tab label="Code" value="code">
+
+<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 usando Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-astro-template.vercel.app"
+  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 - intlayer-astro-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
 
 ## Índice
 

package/docs/pt/intlayer_with_nextjs_14.md

@@ -24,34 +24,7 @@ history:
 author: aymericzip
 ---
 
-# Traduza seu Next.js 14 and App Router com Intlayer | Internacionalização (i18n)
-
-<Tabs defaultTab="code">
-  <Tab label="Código" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-14-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 - Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Demo" value="demo">
-
-<iframe
-  src="https://intlayer-next-14-template.vercel.app"
-  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 - intlayer-next-14-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-Veja [Application Template](https://github.com/aymericzip/intlayer-next-14-template) no GitHub.
+# Traduzir seu website Next.js 14 e App Router usando Intlayer | Internacionalização (i18n)
 
 ## Índice
 

package/docs/pt/intlayer_with_nextjs_15.md

@@ -31,39 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Traduza seu Next.js 15 com Intlayer | Internacionalização (i18n)
-
-<Tabs defaultTab="video">
-  <Tab label="Vídeo" value="video">
-
-<iframe title="Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="Código" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-15-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 - Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Demo" value="demo">
-
-<iframe
-  src="https://next-15-intlayer-template-xt83.vercel.app"
-  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 - intlayer-next-15-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-next-15-template) no GitHub.
+# Traduza seu site Next.js 15 usando Intlayer | Internacionalização (i18n)
 
 ## Tabela de Conteúdos