@intlayer/docs 9.0.0-canary.3 → 9.0.0-canary.5

package/docs/es/compat/react-i18next.md

@@ -0,0 +1,58 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Migrar de react-i18next a Intlayer"
+description: "Aprende cómo migrar tu aplicación React desde react-i18next a Intlayer usando el adaptador de compatibilidad."
+keywords:
+  - react-i18next
+  - i18next
+  - intlayer
+  - migración
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - react-i18next
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Inicializar historial"
+author: aymericzip
+---
+
+# Migrar de react-i18next a Intlayer
+
+Para un tutorial completo y detallado paso a paso, por favor consulta nuestra [Guía Completa de Migración de react-i18next](../migration_from_react-i18next_to_intlayer.md).
+
+Usar el adaptador de compatibilidad de Intlayer te permite migrar desde `react-i18next` sin ningún cambio en las importaciones de tu código fuente.
+
+## Qué hacer
+
+Para inicializar el proyecto, ejecuta:
+
+```bash
+npx intlayer init
+```
+
+Durante la inicialización, Intlayer instalará `@intlayer/react-i18next` y creará `intlayer.config.ts`. En tu empaquetador (como Vite), aplica el plugin de Intlayer:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { reactI18nextVitePlugin } from "@intlayer/react-i18next/plugin";
+
+export default defineConfig({
+  plugins: [react(), reactI18nextVitePlugin()],
+});
+```
+
+## Qué hace bajo el capó
+
+El `reactI18nextVitePlugin` envuelve el plugin principal `vite-intlayer` e inyecta alias de resolución para `react-i18next` e `i18next`, redireccionándolos a `@intlayer/react-i18next` y `@intlayer/i18next`.
+
+Bajo el capó:
+
+- **`useTranslation` y `withTranslation`:** Reescritos para usar hooks nativos de Intlayer, dándote finalización automática de TypeScript para tus claves de diccionario. Soporta sin problemas namespaces (p. ej. `t('namespace:key')`).
+- **Plurales y contexto:** Maneja la pluralización basada en sufijos de i18next (`key_one`, `key_other`) usando `Intl.PluralRules` nativo y sufijos de contexto (`key_male`).
+- **Componente `<Trans>`:** Reimplementado para soportar la prop `components`, formularios de objeto y array, y etiquetas numeradas `<1>...</1>` directamente mapeadas a tus nodos React.
+- **Instancia de `i18n`:** Resuelve claves directamente desde Intlayer sin buscar archivos JSON grandes, resultando en tamaños de bundle significativamente menores.

package/docs/es/compat/react-intl.md

@@ -0,0 +1,55 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Migrar de React Intl a Intlayer"
+description: "Aprende cómo migrar tu aplicación React desde react-intl a Intlayer usando el adaptador de compatibilidad."
+keywords:
+  - react-intl
+  - formatjs
+  - intlayer
+  - migración
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - react-intl
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Inicializar historial"
+author: aymericzip
+---
+
+# Migrar de React Intl a Intlayer
+
+Si tu aplicación React usa `react-intl` (FormatJS), hacer la transición a Intlayer es muy fácil. Nuestra capa de compatibilidad maneja sin problemas ICU MessageFormat y todos los componentes `Formatted*` existentes.
+
+## Qué hacer
+
+Comienza ejecutando el comando de inicialización en tu proyecto:
+
+```bash
+npx intlayer init
+```
+
+Luego, configura el plugin de Vite o Next.js de Intlayer en tu configuración. Este plugin inyecta aliases en tiempo de compilación para redireccionara importaciones de `react-intl` a `@intlayer/react-intl`.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import reactIntlVitePlugin from "@intlayer/react-intl/plugin";
+
+export default defineConfig({
+  plugins: [react(), reactIntlVitePlugin()],
+});
+```
+
+## Qué hace bajo el capó
+
+El plugin del empaquetador asigna `react-intl` a `@intlayer/react-intl`. En lugar de analizar manualmente grandes archivos JSON y envolver tu aplicación en un `IntlProvider`, el plugin de Intlayer extrae estáticamente claves y usa diccionarios de Intlayer en tiempo de ejecución.
+
+Bajo el capó:
+
+- **ICU MessageFormat:** Intlayer utiliza el resolvedor `resolveMessage(..., 'icu')` que soporta completamente pluralización ICU, selección, formateo de fechas/números y etiquetas de texto rico nativamente.
+- **Llamadores de método y JSX:** `intl.formatMessage({ id: 'a.b' })` y `<FormattedMessage id="a.b">` son identificados por los plugins del compilador de Intlayer (`@intlayer/babel` / `@intlayer/swc`), convirtiendo claves con puntos planos para que el primer segmento se resuelva correctamente a la clave del diccionario de Intlayer.
+- **Formateadores:** `<FormattedNumber>`, `<FormattedDate>`, etc., se puenten a los `core/formatters` nativos usando `Intl`.

package/docs/es/compat/svelte-i18n.md

@@ -0,0 +1,47 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Migrar de Svelte I18n a Intlayer"
+description: "Aprende cómo migrar tu aplicación Svelte desde svelte-i18n a Intlayer usando el adaptador de compatibilidad."
+keywords:
+  - svelte-i18n
+  - svelte
+  - intlayer
+  - migración
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - svelte-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Inicializar historial"
+author: aymericzip
+---
+
+# Migrar de Svelte I18n a Intlayer
+
+Mover tu aplicación Svelte desde `svelte-i18n` a Intlayer toma solo un momento usando el adaptador de compatibilidad.
+
+## Qué hacer
+
+Simplemente ejecuta el comando de inicialización en tu proyecto:
+
+```bash
+npx intlayer init
+```
+
+Esto genera `intlayer.config.ts`. Asegúrate de que tus plugins de SvelteKit / Vite estén envueltos con el plugin de alias de Intlayer para mapear sin problemas `svelte-i18n` a `@intlayer/svelte-i18n`.
+
+## Qué hace bajo el capó
+
+Svelte-i18n se basa en stores muy utilizados (`$_`, `$t`, `$format`, etc.) e ICU MessageFormat.
+
+Bajo el capó:
+
+- **Stores:** Intlayer proxies los stores de `svelte-i18n`. `$_` se convierte en un store derivado del locale actual que devuelve un resolvedor de Intlayer.
+- **Claves:** Tus claves planas (p. ej. `$_('home.title')`) se evalúan de modo que el primer segmento de ruta representa el diccionario de Intlayer.
+- **Sintaxis ICU:** Completamente manejada por el resolvedor ICU compartido (análisis equivalente de `intl-messageformat`).
+- **Formateadores:** Las llamadas `$date`, `$time`, `$number` se redireccionan de forma segura a los formateadores de núcleo nativos de Intlayer.
+- **Análisis Babel/SWC:** El analizador de Intlayer lee los llamadores de stores de Svelte (`$_`) dentro de tus archivos fuente `.svelte` antes de la compilación para construir automáticamente los fragmentos de diccionario relevantes.

package/docs/es/compat/transloco.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Migrar de Transloco a Intlayer"
+description: "Aprende cómo migrar tu aplicación Angular desde Transloco a Intlayer usando el adaptador de compatibilidad."
+keywords:
+  - transloco
+  - angular
+  - intlayer
+  - migración
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - transloco
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Inicializar historial"
+author: aymericzip
+---
+
+# Migrar de Transloco a Intlayer
+
+Si tu aplicación Angular actualmente usa `@jsverse/transloco`, puedes migrar a Intlayer usando nuestro adaptador de compatibilidad. Esta transición te permite mantener tu sintaxis de plantilla existente mientras utilizas la poderosa estructura de diccionarios de Intlayer.
+
+## Qué hacer
+
+Simplemente ejecuta el comando de inicialización en tu proyecto:
+
+```bash
+npx intlayer init
+```
+
+Esto generará la configuración necesaria de `intlayer.config.ts`. Entonces reemplazarás tus importaciones de Transloco con módulos de `@intlayer/transloco` o confiarás en los aliases de compilación.
+
+## Qué hace bajo el capó
+
+Transloco utiliza scopes y un `TranslocoService` (`translate`, `selectTranslate`), junto con directivas estructurales (`*transloco="let t"`) y pipes (`| transloco`).
+
+Bajo el capó:
+
+- **Scopes:** Se asignan naturalmente a claves de diccionarios de Intlayer, proporcionando una gran historia de poda para optimización de bundle.
+- **Servicio y directivas:** El adaptador de Angular de Intlayer reemplaza sin problemas los proveedores, permitiendo que tus pipes y directivas de plantilla existentes resuelvan cadenas contra diccionarios de Intlayer.
+- **Análisis en tiempo de compilación:** El analizador de TypeScript reconoce llamadas `instant/get`, y la poda de fallback asegura correctitud incluso cuando el uso de plantilla no es estáticamente rastreable.

package/docs/es/compat/vue-i18n.md

@@ -0,0 +1,58 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Migrar de Vue I18n a Intlayer"
+description: "Aprende cómo migrar tu aplicación Vue desde vue-i18n a Intlayer usando el adaptador de compatibilidad."
+keywords:
+  - vue-i18n
+  - vue
+  - intlayer
+  - migración
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Inicializar historial"
+author: aymericzip
+---
+
+# Migrar de Vue I18n a Intlayer
+
+Si tu aplicación Vue actualmente usa `vue-i18n`, puedes migrar a Intlayer sin reescribir tus componentes ni tus hooks de traducción. Intlayer proporciona un adaptador de compatibilidad que refleja perfectamente la API de `vue-i18n` mientras aprovecha las poderosas características de Intlayer bajo el capó.
+
+## Qué hacer
+
+Para comenzar, simplemente ejecuta el comando de inicialización en tu proyecto:
+
+```bash
+npx intlayer init
+```
+
+Durante la inicialización, Intlayer configurará tu archivo de configuración (`intlayer.config.ts`) y preparará tu proyecto para la migración. Solo necesitarás agregar el plugin de Intlayer a tu configuración de Vite para asignar automáticamente las importaciones de `vue-i18n`.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+## Qué hace bajo el capó
+
+El `vueI18nVitePlugin` inyecta un alias de módulo en tu empaquetador. Cualquier importación de `vue-i18n` en tu base de código será transparentemente redireccionada a `@intlayer/vue-i18n`.
+
+**Bajo el capó, el adaptador maneja la sintaxis compleja de `vue-i18n` nativamente:**
+
+- **Interpolación y plurales:** Resuelve interpolaciones `{name}` y lista `{0}`. Los plurales de tubería (`"car | cars"`) se convierten en nodos de enumeración/plural de Intlayer basados en semántica posicional.
+- **Formatos:** Funciones como `d()` y `n()` envuelven `Intl` bajo el capó, honrando los `datetimeFormats` y `numberFormats` definidos en tus opciones.
+- **Estado global y local:** `global.locale` se asigna a una `WritableComputedRef` respaldada por el cliente de Intlayer, por lo que la reactividad se comporta exactamente como se esperaba (p. ej. `locale.value = 'fr'`).
+- **Directivas:** La directiva `v-t` se registra y funciona normalmente.
+
+Tu aplicación continúa renderizando exactamente como antes, pero el contenido está impulsado por tus diccionarios de Intlayer, dándote seguridad de tipos, mejor optimización de bundle e integración perfecta de CMS.

package/docs/es/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-12
+updatedAt: 2026-06-23
 title: Intlayer Compiler | Extracción Automática de Contenido para i18n
 description: Automatiza tu proceso de internacionalización con el Intlayer Compiler. Extrae contenido directamente de tus componentes para una i18n más rápida y eficiente en Vite, Next.js y más.
 keywords:
@@ -60,6 +60,8 @@ Como alternativa, para automatizar tu proceso i18n mientras mantienes el control
 
 ## Uso
 
+> The quickest way to wire the compiler in is the interactive setup: run `npx intlayer init --interactive` and select **Compiler**. On Vite there is nothing to configure — the compiler is plugged in directly through the `intlayerCompiler()` plugin. On Next.js the command scaffolds the `babel.config.js` shown below. The non-interactive `intlayer init` leaves the compiler setup untouched.
+
 <Tabs>
  <Tab value='vite'>
 

package/docs/es/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-17
+updatedAt: 2026-06-23
 title: Configuración (Configuration)
 description: Aprenda a configure Intlayer para su aplicación. Entienda los diversos ajustes y opciones disponibles para personalizar Intlayer según sus necesidades.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-06-24
+    changes: "Add `enableProxy` option to the routing configuration"
   - version: 8.10.0
     date: 2026-06-17
     changes: "Añadida la opción `format` a la configuración del diccionario"
@@ -884,6 +887,21 @@ Ajustes relacionados con el procesamiento de contenido dentro de la aplicación
 
 ---
 
+### Configuración del Sistema
+
+Configuración relacionada con rutas internas y resultados de salida de Intlayer. Estas configuraciones son típicamente internas y normalmente no deberían necesitar ser modificadas por el usuario.
+
+| Field                     | Description                                                                                          | Type     | Default                           | Example              | Note                                                                      |
+| ------------------------- | ---------------------------------------------------------------------------------------------------- | -------- | --------------------------------- | -------------------- | ------------------------------------------------------------------------- |
+| `baseDir`                 | El directorio base del proyecto.                                                                     | `string` | `process.cwd()`                   | `'/path/to/project'` | Se utiliza para resolver todos los directorios relacionados con Intlayer. |
+| `dictionariesDir`         | La ruta del directorio para almacenar diccionarios de localización.                                  | `string` | `'.intlayer/dictionary'`          |                      |                                                                           |
+| `moduleAugmentationDir`   | Directorio para aumento de módulos, permitiendo mejores sugerencias del IDE y verificación de tipos. | `string` | `'.intlayer/types'`               | `'intlayer-types'`   | Asegúrate de incluir esto en `tsconfig.json`.                             |
+| `unmergedDictionariesDir` | El directorio para almacenar diccionarios sin fusionar.                                              | `string` | `'.intlayer/unmerged_dictionary'` |                      |                                                                           |
+| `typesDir`                | El directorio para almacenar tipos de diccionarios.                                                  | `string` | `'.intlayer/types'`               |                      |                                                                           |
+| `mainDir`                 | El directorio donde se almacenan los archivos principales de la aplicación.                          | `string` | `'.intlayer/main'`                |                      |                                                                           |
+| `configDir`               | El directorio donde se almacenan los archivos de configuración.                                      | `string` | `'.intlayer/config'`              |                      |                                                                           |
+| `cacheDir`                | El directorio donde se almacenan los archivos de caché.                                              | `string` | `'.intlayer/cache'`               |                      |                                                                           |
+
 ### Configuración del Diccionario (Dictionary Configuration)
 
 Parámetros que controlan las operaciones de diccionarios, incluido el comportamiento de relleno automático y la generación de contenido.
@@ -992,22 +1010,6 @@ Las opciones de compilación se aplican a los complementos `@intlayer/babel` y `
 
 ---
 
-### Configuración del Sistema (System Configuration)
-
-Estos ajustes son para casos de uso avanzados y configuración interna de Intlayer.
-
-| Campo                     | Descripción                                         | Tipo     | Predeterminado                    | Ejemplo | Nota |
-| ------------------------- | --------------------------------------------------- | -------- | --------------------------------- | ------- | ---- |
-| `dictionariesDir`         | Directorio de diccionarios compilados.              | `string` | `'.intlayer/dictionary'`          |         |      |
-| `moduleAugmentationDir`   | Directorio de aumento de módulos TypeScript.        | `string` | `'.intlayer/types'`               |         |      |
-| `unmergedDictionariesDir` | Directorio de diccionarios no fusionados.           | `string` | `'.intlayer/unmerged_dictionary'` |         |      |
-| `typesDir`                | Directorio de tipos generados.                      | `string` | `'.intlayer/types'`               |         |      |
-| `mainDir`                 | Directorio del archivo principal de Intlayer.       | `string` | `'.intlayer/main'`                |         |      |
-| `configDir`               | Directorio de archivos de configuración compilados. | `string` | `'.intlayer/config'`              |         |      |
-| `cacheDir`                | Directorio de archivos de caché.                    | `string` | `'.intlayer/cache'`               |         |      |
-
----
-
 ### Configuración del Compilador (Compiler Configuration)
 
 Ajustes que controlan el compilador de Intlayer, que extrae diccionarios directamente de sus componentes.

package/docs/es/custom_domains.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-02
-updatedAt: 2026-04-02
+updatedAt: 2026-06-23
 title: Dominios personalizados
 description: Aprenda a configurar el enrutamiento por locales basado en dominios en Intlayer para servir diferentes locales desde nombres de host dedicados.
 keywords:

package/docs/es/custom_url_rewrites.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-01-26
+updatedAt: 2026-06-23
 title: Reescrituras de URL personalizadas
 description: Aprende cómo configurar y usar reescrituras de URL personalizadas en Intlayer para definir rutas específicas por locale.
 keywords:

package/docs/es/dictionary/content_file.md

@@ -581,6 +581,10 @@ Esquema JSON utilizado para la validación de la estructura del diccionario. Añ
 
 Para diccionarios remotos, este es el identificador único del diccionario en el servidor remoto. Se usa para obtener y gestionar contenido remoto.
 
+##### `projectIds` (string[])
+
+Para diccionarios remotos, este array contiene los IDs de los proyectos que pueden usar este diccionario. Un diccionario remoto puede ser compartido entre múltiples proyectos.
+
 ##### `localId` (LocalDictionaryId)
 
 Identificador único para diccionarios locales. Generado automáticamente por Intlayer para ayudar a identificar el diccionario y determinar si es local o remoto, junto con su ubicación.

package/docs/es/dictionary/file.md

@@ -255,6 +255,14 @@ export default myMultilingualContent;
 
 Esta configuración permite que el contenido se recupere dinámicamente según la preferencia de idioma del usuario. Cuando se utiliza en el Editor Visual de Intlayer o en el CMS, el sistema reconocerá que el contenido proviene de los archivos Markdown especificados y garantizará que permanezcan editables.
 
+## Diferentes tipos de rutas
+
+Cuando uses la función `file`, puedes usar diferentes tipos de rutas para especificar el archivo a incrustar.
+
+- `file("./path/to/file.txt")` - Ruta relativa al archivo actual
+- `file("path/to/file.txt")` - Ruta relativa al directorio raíz del proyecto
+- `file("/users/username/path/to/file.txt")` - Ruta absoluta
+
 ## Cómo Intlayer Maneja el Contenido de Archivos
 
 La función `file` se basa en el módulo `fs` de Node.js para leer el contenido del archivo especificado e insertarlo en el diccionario. Cuando se usa junto con el Editor Visual de Intlayer o el CMS, Intlayer puede rastrear la relación entre el diccionario y el archivo. Esto permite a Intlayer:

package/docs/es/dictionary/nesting.md

@@ -25,6 +25,45 @@ author: aymericzip
 
 En Intlayer, la anidación se logra a través de la función `nest`, que permite referenciar y reutilizar contenido de otro diccionario. En lugar de duplicar contenido, puedes apuntar a un módulo de contenido existente mediante su clave.
 
+## Configurar Anidamiento
+
+Para configurar anidamiento en tu proyecto de Intlayer, primero defines el contenido base que deseas reutilizar. Luego, en un módulo de contenido separado, utilizas la función `nest` para importar ese contenido.
+
+### Diccionario Base
+
+A continuación se muestra un ejemplo de un diccionario base para anidar en otro diccionario:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
 ## Configuración de la Anidación
 
 <Tabs group="framework">

package/docs/es/dictionary/translation.md

@@ -259,64 +259,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Objetos de Contenido Personalizados
-
-`intlayer` soporta objetos de contenido personalizados para la traducción, permitiéndole definir estructuras más complejas mientras asegura la seguridad de tipos. Aquí hay un ejemplo con un objeto personalizado:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Título de la Página",
-          "content": "Contenido de la Página"
-        },
-        "fr": {
-          "title": "Titre de la Page",
-          "content": "Contenu de la Page"
-        },
-        "es": {
-          "title": "Título de la Página",
-          "content": "Contenido de la Página"
-        }
-      }
-    }
-  }
-}
-```

package/docs/es/formatters.md

@@ -182,6 +182,61 @@ getLocaleName("de", "es"); // "alemán"
 - **displayLocale**: El locale para el cual obtener el nombre
 - **targetLocale**: El locale en el que se mostrará el nombre (por defecto es displayLocale)
 
+### Composables Disponibles
+
+Todos los composables devuelven refs computadas que utilizan automáticamente la locale del `IntlayerProvider` inyectado.
+
+| Composable          | Description                              | Example Output                  |
+| ------------------- | ---------------------------------------- | ------------------------------- |
+| `useNumber()`       | Formatear números con agrupación         | `"123,456.789"`                 |
+| `useCurrency()`     | Formatear valores de moneda              | `"€1,234.50"`                   |
+| `usePercentage()`   | Formatear porcentajes                    | `"25%"`                         |
+| `useDate()`         | Formatear fechas y horas                 | `"Aug 2, 2025"`                 |
+| `useRelativeTime()` | Formatear tiempo relativo                | `"in 3 days"`                   |
+| `useUnit()`         | Formatear valores con unidades           | `"5 kilometers"`                |
+| `useCompact()`      | Formatear números en notación compacta   | `"1.2K"`                        |
+| `useList()`         | Formatear arrays como listas             | `"apple, banana, and orange"`   |
+| `useIntl()`         | Obtener objeto `Intl` vinculado a locale | Acceso completo a la API `Intl` |
+
+### Ejemplo 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?)`
 
 Extrae el código de idioma de una cadena de locale:
@@ -196,6 +251,10 @@ getLocaleLang("de"); // "de"
 
 - **locale**: El locale del cual extraer el idioma (por defecto es el locale actual)
 
+## Formateadores Vanilla JS / Node.js
+
+Para contextos sin framework, importa formateadores directamente desde `intlayer`. Ten en cuenta que debes pasar la locale manualmente.
+
 ### `getLocaleFromPath(inputUrl)`
 
 Extrae el segmento de locale de una URL o ruta:
@@ -212,6 +271,8 @@ getLocaleFromPath("https://example.com/es/about"); // "es"
 - **inputUrl**: La cadena completa de URL o ruta a procesar
 - **returns**: El locale detectado o el locale predeterminado si no se encuentra ningún locale
 
+### Funciones de Formato
+
 ### `getPathWithoutLocale(inputUrl, locales?)`
 
 Elimina el segmento de locale de una URL o ruta:
@@ -336,6 +397,8 @@ const content = await getIntlayerAsync("common", "fr");
 
 Todos los helpers a continuación son exportados desde `intlayer`.
 
+### Características Intl Adicionales
+
 ### `number(value, options?)`
 
 Formatea un valor numérico utilizando agrupación y decimales sensibles al locale.
@@ -372,6 +435,23 @@ percentage(25); // "25%"
 percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
 ```
 
+#### `Intl.PluralRules`
+
+Para determinar formas plurales en 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"
+```
+
+## Utilidades de Locale
+
 ### `currency(value, options?)`
 
 Formatea un valor como moneda localizada. Por defecto es `USD` con dos dígitos decimales.
@@ -482,6 +562,8 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
+## Utilidades de Manejo de Contenido
+
 ## Notas
 
 - Todos los ayudantes aceptan entradas de tipo `string`; internamente se convierten a números o fechas.

package/docs/es/how_works_intlayer.md

@@ -22,6 +22,10 @@ author: aymericzip
 
 # Cómo funciona Intlayer
 
+## Tabla de contenidos
+
+<TOC/>
+
 ## Resumen
 
 La idea principal detrás de Intlayer es adoptar una gestión de contenido por componente. Entonces, la idea detrás de Intlayer es permitirte declarar tu contenido en cualquier lugar de tu base de código, como en el mismo directorio que tu componente.
@@ -139,8 +143,6 @@ El paquete `vue-intlayer` se utiliza para interpretar los diccionarios de Intlay
 
 ### nuxt-intlayer
 
-### nuxt-intlayer
-
 El paquete `nuxt-intlayer` es un módulo de Nuxt para hacer que los diccionarios de Intlayer sean utilizables en aplicaciones Nuxt. Integra características esenciales para que Intlayer funcione en un entorno Nuxt, como middleware de traducción, enrutamiento o la configuración del archivo `nuxt.config.js`.
 
 ### svelte-intlayer
@@ -157,8 +159,6 @@ El paquete `preact-intlayer` se utiliza para interpretar los diccionarios de Int
 
 ### angular-intlayer (WIP)
 
-### angular-intlayer (WIP)
-
 El paquete `angular-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Angular.
 
 ### express-intlayer