@intlayer/docs 5.8.0-canary.0 → 5.8.1-canary.0

package/docs/ko/how_works_intlayer.md

@@ -25,8 +25,8 @@ Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 이를 위해 Intlayer의 역할은 프로젝트에 존재하는 다양한 형식의 `콘텐츠 선언 파일`을 모두 찾아내고, 이를 기반으로 `사전(dictionary)`을 생성하는 것입니다.
@@ -45,12 +45,10 @@ Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하
 - [`vite-intlayer` 패키지](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/vite-intlayer/index.md)와 같은 앱 플러그인 또는 [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/index.md)용 동등한 플러그인을 사용하는 방법. 이러한 플러그인 중 하나를 사용하면 Intlayer는 애플리케이션을 시작(개발)하거나 빌드(프로덕션)할 때 자동으로 사전을 빌드합니다.
 
 1. 콘텐츠 파일 선언
-
    - 콘텐츠 파일은 TypeScript, ECMAScript, CommonJS 또는 JSON과 같은 다양한 형식으로 정의할 수 있습니다.
    - 콘텐츠 파일은 프로젝트 어디에서나 정의할 수 있어 유지 관리와 확장성이 향상됩니다. 콘텐츠 파일의 파일 확장자 규칙을 준수하는 것이 중요합니다. 기본 확장자는 `*.content.{js|cjs|mjs|ts|tsx|json}`이지만, [설정 파일](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)에서 수정할 수 있습니다.
 
 2. `사전(dictionary)` 생성
-
    - 사전은 콘텐츠 파일에서 생성됩니다. 기본적으로 Intlayer 사전은 프로젝트의 `.intlayer/dictionaries` 디렉토리에 생성됩니다.
    - 이러한 사전은 모든 요구를 충족하고 애플리케이션 성능을 최적화하기 위해 다양한 형식으로 생성됩니다.
 

package/docs/ko/interest_of_intlayer.md

@@ -199,25 +199,22 @@ const ComponentExample = () => {
    - `.content.{{ts|mjs|cjs|json}}` 파일은 VSCode 확장 기능을 사용하여 생성할 수 있습니다.
    - IDE 내 자동완성 AI 도구(예: GitHub Copilot)가 콘텐츠 선언을 도와 복사/붙여넣기 작업을 줄여줍니다.
 
-2. **코드베이스의 복잡성 감소**
+2. **코드베이스 정리**
+   - 복잡성 감소
+   - 유지보수성 향상
 
-3. **코드베이스의 유지보수성 향상**
-
-4. **컴포넌트와 관련 콘텐츠를 더 쉽게 복제하기 (예: 로그인/회원가입 컴포넌트 등)**
+3. **컴포넌트와 관련 콘텐츠를 더 쉽게 복제하기 (예: 로그인/회원가입 컴포넌트 등)**
    - 다른 컴포넌트의 콘텐츠에 영향을 미칠 위험을 제한하여
    - 외부 의존성 없이 한 애플리케이션에서 다른 애플리케이션으로 콘텐츠를 복사/붙여넣기 가능
 
-5. **사용하지 않는 컴포넌트의 키/값으로 코드베이스를 오염시키지 않음**
-   - 컴포넌트를 사용하지 않는다면, 해당 콘텐츠를 임포트할 필요가 없습니다.
+4. **사용하지 않는 컴포넌트의 키/값으로 코드베이스를 오염시키지 않음**
+   - 컴포넌트를 사용하지 않으면 Intlayer는 관련 콘텐츠를 가져오지 않습니다.
    - 컴포넌트를 삭제하면 관련 콘텐츠가 동일한 폴더에 존재하기 때문에 관련 콘텐츠를 더 쉽게 제거할 수 있습니다.
 
-6. **AI 에이전트가 다국어 콘텐츠를 선언하는 데 드는 추론 비용 감소**
+5. **AI 에이전트가 다국어 콘텐츠를 선언하는 데 드는 추론 비용 감소**
    - AI 에이전트가 콘텐츠를 구현할 위치를 알기 위해 전체 코드베이스를 스캔할 필요가 없습니다.
    - IDE 내 자동완성 AI 도구(예: GitHub Copilot)를 통해 번역 작업을 쉽게 수행할 수 있습니다.
 
-7. **로딩 성능 최적화**
-   - 컴포넌트가 지연 로드(lazy-loaded)되는 경우, 관련 콘텐츠도 동시에 로드됩니다.
-
 ## Intlayer의 추가 기능
 
 | 기능                                                                                                                      | 설명                                                                                                                                                                                                                                                                                                                                                                                    |

package/docs/ko/intlayer_with_tanstack.md

@@ -2,7 +2,7 @@
 createdAt: 2025-08-11
 updatedAt: 2025-08-11
 title: TanStack Start (React)에서 Intlayer 시작하기
-description: Intlayer를 사용하여 TanStack Start 앱에 i18n 추가하기 — 컴포넌트 수준 사전, 지역화된 URL, SEO 친화적 메타데이터.
+description: Intlayer를 사용하여 TanStack Start 앱에 i18n 추가하기 - 컴포넌트 수준 사전, 지역화된 URL, SEO 친화적 메타데이터.
 keywords:
   - 국제화
   - 문서

package/docs/ko/introduction.md

@@ -32,8 +32,8 @@ Intlayer는 또한 콘텐츠를 쉽게 편집하고 관리할 수 있는 선택
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 ```tsx fileName="src/components/MyComponent/index.content.ts" contentDeclarationFormat="typescript"

package/docs/pt/formatters.md

@@ -2,17 +2,18 @@
 createdAt: 2024-08-13
 updatedAt: 2025-08-20
 title: Formatadores
-description: Utilitários de formatação sensíveis à localidade baseados no Intl para números, percentuais, moeda, datas, tempo relativo, unidades e notação compacta. Inclui um helper Intl com cache.
+description: Utilitários de formatação sensíveis à localidade baseados em Intl para números, percentagens, moeda, datas, tempo relativo, unidades e notação compacta. Inclui um helper Intl em cache.
 keywords:
   - Formatadores
   - Intl
   - Número
   - Moeda
-  - Percentual
+  - Percentagem
   - Data
   - Tempo Relativo
   - Unidades
   - Compacto
+  - Lista
   - Internacionalização
 slugs:
   - doc
@@ -23,7 +24,7 @@ slugs:
 
 ## Visão Geral
 
-O Intlayer fornece um conjunto de helpers leves construídos sobre as APIs nativas `Intl`, além de um wrapper `Intl` com 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`.
+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
 
@@ -37,40 +38,302 @@ import {
   relativeTime,
   units,
   compact,
+  list,
+  getLocaleName,
+  getLocaleLang,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  getLocalizedUrl,
+  getHTMLTextDir,
+  getContent,
+  getLocalisedContent,
+  getTranslation,
+  getIntlayer,
+  getIntlayerAsync,
 } from "intlayer";
 ```
 
-Se você estiver usando React, hooks também estão disponíveis; veja `react-intlayer/format`.
+Se estiver a usar React, os hooks também estão disponíveis; veja `react-intlayer/format`.
 
-## Intl com Cache
+## Intl em Cache
 
-O `Intl` exportado é um wrapper leve com cache em torno do `Intl` global. Ele memoiza instâncias de `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, o que evita reconstruir o mesmo formatador repetidamente.
+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 custosa, esse cache melhora a performance sem alterar o comportamento. O wrapper expõe a mesma API do `Intl` nativo, então o uso é idêntico.
+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 usar um polyfill).
+> Se `Intl.DisplayNames` não estiver disponível no ambiente, um único aviso para desenvolvedores é exibido (considere um polyfill).
 
-Exemplo:
+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"
+```
+
+## 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:
+
+### `Intl.DisplayNames`
+
+Para nomes localizados de idiomas, regiões, moedas e scripts:
+
+```ts
+import { Intl } from "intlayer";
+
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
+
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
+
+### `Intl.Collator`
+
+Para comparação e ordenação de strings sensíveis ao local:
+
+```ts
+import { Intl } from "intlayer";
+
+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`
+
+Para determinar formas plurais em diferentes locais:
+
+```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 Localidade
+
+### `getLocaleName(displayLocale, targetLocale?)`
+
+Obtém o nome localizado de uma localidade em outra localidade:
+
+```ts
+import { getLocaleName } from "intlayer";
+
+getLocaleName("fr", "en"); // "French"
+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)
+
+### `getLocaleLang(locale?)`
+
+Extrai o código de idioma de uma string de locale:
+
+```ts
+import { getLocaleLang } from "intlayer";
+
+getLocaleLang("en-US"); // "en"
+getLocaleLang("fr-CA"); // "fr"
+getLocaleLang("de"); // "de"
+```
+
+- **locale**: O locale do qual extrair o idioma (padrão é o locale atual)
+
+### `getLocaleFromPath(inputUrl)`
+
+Extrai o segmento de locale de uma URL ou pathname:
+
+```ts
+import { getLocaleFromPath } from "intlayer";
+
+getLocaleFromPath("/en/dashboard"); // "en"
+getLocaleFromPath("/fr/dashboard"); // "fr"
+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
+
+### `getPathWithoutLocale(inputUrl, locales?)`
+
+Remove o segmento de locale de uma URL ou caminho:
+
+```ts
+import { getPathWithoutLocale } from "intlayer";
+
+getPathWithoutLocale("/en/dashboard"); // "/dashboard"
+getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
+getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
+```
+
+- **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
+
+### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+
+Gera uma URL localizada para o locale atual:
+
+```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"
+```
+
+- **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)
+
+### `getHTMLTextDir(locale?)`
+
+Retorna a direção do texto para um locale:
+
+```ts
+import { getHTMLTextDir } from "intlayer";
+
+getHTMLTextDir("en-US"); // "ltr"
+getHTMLTextDir("ar"); // "rtl"
+getHTMLTextDir("he"); // "rtl"
+```
+
+- **locale**: O locale para obter a direção do texto (padrão para o locale atual)
+- **returns**: `"ltr"`, `"rtl"` ou `"auto"`
+
+## Utilitários para Manipulação de Conteúdo
+
+### `getContent(node, nodeProps, locale?)`
+
+Transforma um nó de conteúdo com todos os plugins disponíveis (tradução, enumeração, inserção, etc.):
+
+```ts
+import { getContent } from "intlayer";
+
+const content = getContent(
+  contentNode,
+  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
+  "fr"
+);
 ```
 
+- **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)
+
+### `getLocalisedContent(node, locale, nodeProps, fallback?)`
+
+Transforma um nó de conteúdo usando apenas o plugin de tradução:
+
+```ts
+import { getLocalisedContent } from "intlayer";
+
+const content = getLocalisedContent(
+  contentNode,
+  "fr",
+  { dictionaryKey: "common" },
+  true // fallback para o locale padrão se a tradução estiver ausente
+);
+```
+
+- **node**: O nó de conteúdo a ser transformado
+- **locale**: O locale a ser usado para tradução
+- **nodeProps**: Propriedades para o contexto da transformação
+- **fallback**: Se deve retornar ao locale padrão (padrão é false)
+
+### `getTranslation(languageContent, locale?, fallback?)`
+
+Extrai conteúdo para um locale específico a partir de um objeto de conteúdo multilíngue:
+
+```ts
+import { getTranslation } from "intlayer";
+
+const content = getTranslation(
+  {
+    en: "Hello",
+    fr: "Bonjour",
+    de: "Hallo",
+  },
+  "fr",
+  true
+); // "Bonjour"
+```
+
+- **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)
+
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Recupera e transforma conteúdo de um dicionário pela chave:
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+const nestedContent = getIntlayer("common", "fr", customPlugins);
+```
+
+- **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
+
+### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
+
+Recupera conteúdo de um dicionário remoto de forma assíncrona:
+
+```ts
+import { getIntlayerAsync } from "intlayer";
+
+const content = await getIntlayerAsync("common", "fr");
+```
+
+- **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 do `intlayer`.
+Todos os helpers abaixo são exportados de `intlayer`.
 
 ### `number(value, options?)`
 
-Formata um valor numérico usando agrupamento e decimais sensíveis ao local.
+Formata um valor numérico usando agrupamento e decimais sensíveis ao locale.
 
 - **value**: `number | string`
 - **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
@@ -81,7 +344,7 @@ Exemplos:
 import { number } from "intlayer";
 
 number(123456.789); // "123,456.789" (em en-US)
-number("1000000", { locale: "fr" }); // "1 000 000"
+number("1000000", { locale: "fr" }); // "1 000 000"
 number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
@@ -89,7 +352,7 @@ number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 
 Formata um número como uma string percentual.
 
-Comportamento: valores maiores que 1 são interpretados como percentagens inteiras e normalizados (por exemplo, `25` → `25%`, `0.25` → `25%`).
+Comportamento: valores maiores que 1 são interpretados como percentuais inteiros e normalizados (ex.: `25` → `25%`, `0.25` → `25%`).
 
 - **value**: `number | string`
 - **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
@@ -117,8 +380,8 @@ Exemplos:
 ```ts
 import { currency } from "intlayer";
 
-currency(1234.5, { currency: "EUR" }); // "€1.234,50"
-currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+currency(1234.5, { currency: "EUR" }); // "€1,234.50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
 ```
 
 ### `date(date, optionsOrPreset?)`
@@ -195,45 +458,168 @@ compact(1200); // "1.2K"
 compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 milhão"
 ```
 
+### `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
+import { list } from "intlayer";
+
+list(["apple", "banana", "orange"]); // "apple, banana e orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
+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 as opções padrão do `Intl`.
+- 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 reexportações (`@index.ts`)
+## Pontos de entrada e re-exportações (`@index.ts`)
 
-Os formatadores estão no pacote core e são reexportados por pacotes de nível superior para manter os imports ergonômicos em diferentes runtimes:
+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, Intl } from "intlayer";
+import {
+  number,
+  currency,
+  date,
+  relativeTime,
+  units,
+  compact,
+  list,
+  Intl,
+  getLocaleName,
+  getLocaleLang,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  getLocalizedUrl,
+  getHTMLTextDir,
+  getContent,
+  getLocalisedContent,
+  getTranslation,
+  getIntlayer,
+  getIntlayerAsync,
+} from "intlayer";
 ```
 
 ### React
 
 Componentes cliente:
 
-```ts
-import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
 // ou em apps Next.js
-import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
+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, useCurrency, useDate } from "intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/server/format";
 // ou em apps Next.js
-import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "next-intlayer/server/format";
+```
+
+> Esses hooks irão considerar a localidade do `IntlayerProvider` ou `IntlayerServerProvider`
+
+### Vue
+
+Componentes cliente:
+
+```ts
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
 ```
 
-> Esses hooks considerarão o locale do `IntlayerProvider` ou `IntlayerServerProvider`
+> Esses composables irão considerar o locale do `IntlayerProvider` injetado
 
-## Histórico da documentação
+## Histórico da Documentação
 
-| Versão | Data       | Alterações                             |
-| ------ | ---------- | -------------------------------------- |
-| 5.8.0  | 2025-08-18 | Adiciona documentação dos formatadores |
+| Versão | Data       | Alterações                                                                                         |
+| ------ | ---------- | -------------------------------------------------------------------------------------------------- |
+| 5.8.0  | 2025-08-20 | Adicionados formatadores para Vue                                                                  |
+| 5.8.0  | 2025-08-18 | Adicionada documentação dos formatadores                                                           |
+| 5.8.0  | 2025-08-20 | Adicionar documentação do formatador de listas                                                     |
+| 5.8.0  | 2025-08-20 | Adicionar utilitários adicionais do Intl (DisplayNames, Collator, PluralRules)                     |
+| 5.8.0  | 2025-08-20 | Adicionar utilitários de locale (getLocaleName, getLocaleLang, getLocaleFromPath, etc.)            |
+| 5.8.0  | 2025-08-20 | Adicionar utilitários para manipulação de conteúdo (getContent, getTranslation, getIntlayer, etc.) |

package/docs/pt/how_works_intlayer.md

@@ -25,8 +25,8 @@ A ideia principal por trás do Intlayer é adotar um gerenciamento de conteúdo
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 Para isso, o papel do Intlayer é encontrar todos os seus `arquivos de declaração de conteúdo`, em todos os formatos diferentes presentes no seu projeto, e então ele gerará os `dicionários` a partir deles.
@@ -45,12 +45,10 @@ A etapa de construção pode ser feita de três maneiras:
 - usando os plugins de aplicativos, como o pacote [`vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/vite-intlayer/index.md), ou seus equivalentes para [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/next-intlayer/index.md). Quando você usa um desses plugins, o Intlayer construirá automaticamente seus dicionários ao iniciar (dev) ou construir (prod) sua aplicação.
 
 1. Declaração de arquivos de conteúdo
-
    - Os arquivos de conteúdo podem ser definidos em vários formatos, como TypeScript, ECMAScript, CommonJS ou JSON.
    - Os arquivos de conteúdo podem ser definidos em qualquer lugar do projeto, o que permite uma melhor manutenção e escalabilidade. É importante respeitar as convenções de extensão de arquivo para arquivos de conteúdo. Essa extensão é por padrão `*.content.{js|cjs|mjs|ts|tsx|json}`, mas pode ser modificada no [arquivo de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
 2. Geração de `dicionários`
-
    - Os dicionários são gerados a partir dos arquivos de conteúdo. Por padrão, os dicionários do Intlayer são gerados no diretório `.intlayer/dictionaries` do projeto.
    - Esses dicionários são gerados em diferentes formatos para atender a todas as necessidades e otimizar o desempenho da aplicação.
 

package/docs/pt/intlayer_with_tanstack.md

@@ -2,7 +2,7 @@
 createdAt: 2025-08-11
 updatedAt: 2025-08-11
 title: Começando com Intlayer no TanStack Start (React)
-description: Adicione i18n ao seu app TanStack Start usando Intlayer—dicionários a nível de componente, URLs localizadas e metadados otimizados para SEO.
+description: Adicione i18n ao seu app TanStack Start usando Intlayer-dicionários a nível de componente, URLs localizadas e metadados otimizados para SEO.
 keywords:
   - Internacionalização
   - Documentação

package/docs/pt/introduction.md

@@ -32,8 +32,8 @@ O Intlayer também oferece um editor visual opcional que permite editar e gerenc
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 ```tsx fileName="src/components/MyComponent/index.content.ts" contentDeclarationFormat="typescript"