@intlayer/docs 9.1.3 → 9.3.0

package/docs/es/dictionary/nesting.md

@@ -64,6 +64,53 @@ export default firstDictionary;
 }
 ```
 
+### Referencing with Nest
+
+Ahora, crea otro módulo de contenido que use la función `nest` para referenciar el contenido anterior. Puedes referenciar el contenido completo o un valor anidado específico:
+
+```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { nest, type Dictionary } from "intlayer";
+
+const myNestingContent = {
+  key: "key_of_my_second_dictionary",
+  content: {
+    // Referencia el diccionario completo:
+    fullNestedContent: nest("key_of_my_first_dictionary"),
+    // Referencia un valor anidado específico:
+    partialNestedContent: nest(
+      "key_of_my_first_dictionary",
+      "subContent.contentNumber"
+    ),
+  },
+} satisfies Dictionary;
+
+export default myNestingContent;
+```
+
+```json fileName="secondDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_second_dictionary",
+  "content": {
+    "fullNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary"
+      }
+    },
+    "partialNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary",
+        "path": "subContent.contentNumber"
+      }
+    }
+  }
+}
+```
+
+Como segundo parámetro, puedes especificar una ruta a un valor anidado dentro de ese contenido. Cuando no se proporciona ninguna ruta, se devuelve el contenido completo del diccionario referenciado.
+
 ## Configuración de la Anidación
 
 <Tabs group="framework">
@@ -258,36 +305,6 @@ document.getElementById("nested")!.textContent = content.partialNestedContent;
   </Tab>
 </Tabs>
 
-## Usando Anidación con React Intlayer
-
-Para usar contenido anidado en un componente de React, utiliza el hook `useIntlayer` del paquete `react-intlayer`. Este hook recupera el contenido correcto basado en la clave especificada. Aquí tienes un ejemplo de cómo usarlo:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>
-        Contenido Anidado Completo: {JSON.stringify(fullNestedContent)}
-        {/* Salida: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
-      </p>
-      <p>
-        Valor Anidado Parcial: {partialNestedContent}
-        {/* Salida: 0 */}
-      </p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
 ## Recursos Adicionales
 
 Para obtener información más detallada sobre la configuración y el uso, consulta los siguientes recursos:

package/docs/es/formatters.md

@@ -52,34 +52,6 @@ author: aymericzip
 
 Intlayer proporciona un conjunto de helpers ligeros construidos sobre las APIs nativas de `Intl`, además de un wrapper `Intl` en caché para evitar construir repetidamente formateadores pesados. Estas utilidades son completamente conscientes del locale y pueden usarse desde el paquete principal `intlayer`.
 
-### Importar
-
-```ts
-import {
-  Intl,
-  number,
-  percentage,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-  getIntlayerAsync,
-} from "intlayer";
-```
-
-Si usas React, también hay hooks disponibles; consulta `react-intlayer/format`.
-
 ## Intl en caché
 
 El `Intl` exportado es un wrapper ligero y en caché alrededor del `Intl` global. Memoiza instancias de `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` y `PluralRules`, lo que evita reconstruir repetidamente el mismo formateador.
@@ -116,9 +88,7 @@ pluralRules.select(1); // "one"
 pluralRules.select(2); // "other"
 ```
 
-## Utilidades adicionales de Intl
-
-Más allá de los ayudantes para formateadores, también puedes usar directamente el wrapper cacheado de Intl para otras funcionalidades de Intl:
+## Formateadores de React
 
 ### `Intl.DisplayNames`
 
@@ -134,6 +104,22 @@ const regionNames = new Intl.DisplayNames("fr", { type: "region" });
 regionNames.of("US"); // "Estados Unidos"
 ```
 
+### Hooks Disponibles
+
+Todos los hooks utilizan automáticamente la configuración regional de `IntlayerProvider` o `IntlayerServerProvider`.
+
+| Hook                | 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 la configuración regional | Full `Intl` API access        |
+
 ### `Intl.Collator`
 
 Para la comparación y ordenación de cadenas conscientes del locale:
@@ -273,166 +259,146 @@ getLocaleFromPath("https://example.com/es/about"); // "es"
 
 ### Funciones de Formato
 
-### `getPathWithoutLocale(inputUrl, locales?)`
+#### `number(value, options?)`
 
-Elimina el segmento de locale de una URL o ruta:
+Formatea un valor numérico usando agrupación y decimales conscientes de la configuración regional.
 
-```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" (en en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
-- **inputUrl**: La cadena completa de URL o ruta a procesar
-- **locales**: Matriz opcional de locales soportados (por defecto, los locales configurados)
-- **returns**: La URL sin el segmento de locale
+#### `percentage(value, options?)`
 
-### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+Formatea un número como una cadena de porcentaje. Los valores mayores que 1 se normalizan (por ejemplo, `25` → `25%`, `0.25` → `25%`).
 
-Genera una URL localizada para el locale actual:
+- **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**: La URL original para localizar
-- **currentLocale**: El locale actual
-- **locales**: Matriz opcional de locales soportados (por defecto, los locales configurados)
-- **defaultLocale**: Locale predeterminado opcional (por defecto, el locale predeterminado configurado)
-- **prefixDefault**: Indica si se debe prefijar el locale predeterminado (por defecto, el valor configurado)
+#### `currency(value, options?)`
 
-### `getHTMLTextDir(locale?)`
+Formatea un valor como moneda localizada. Por defecto es `USD`.
 
-Devuelve la dirección del texto para un locale:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Common: `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**: El locale para obtener la dirección del texto (por defecto, el locale actual)
-- **returns**: `"ltr"`, `"rtl"` o `"auto"`
+#### `date(date, optionsOrPreset?)`
+
+Formatea un valor de fecha/hora.
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` o preset: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+```ts
+date(new Date(), "short"); // p. ej., "08/02/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
 
-## Utilidades para el Manejo de Contenido
+#### `relativeTime(from, to?, options?)`
 
-### `getContent(node, nodeProps, locale?)`
+Formatea el tiempo relativo entre dos instantes.
 
-Transforma un nodo de contenido con todos los plugins disponibles (traducción, enumeración, inserción, etc.):
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (por defecto `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" }); // "in 3 days"
 
-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" }); // "2 hours ago"
 ```
 
-- **node**: El nodo de contenido a transformar
-- **nodeProps**: Propiedades para el contexto de transformación
-- **locale**: Locale opcional (por defecto, el locale predeterminado configurado)
+#### `units(value, options?)`
 
-### `getTranslation(languageContent, locale?, fallback?)`
+Formatea un valor numérico con una unidad.
 
-Extrae contenido para un locale específico de un objeto de contenido multilingüe:
+- **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 mapea locales a contenido
-- **locale**: Locale objetivo (por defecto el locale predeterminado configurado)
-- **fallback**: Indica si se debe usar el locale predeterminado como respaldo (por defecto es true)
+#### `compact(value, options?)`
 
-### `getIntlayer(dictionaryKey, locale?, plugins?)`
+Formatea un número usando notación compacta.
 
-Recupera y transforma contenido de un diccionario por clave:
+- **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**: La clave del diccionario a recuperar
-- **locale**: Locale opcional (por defecto es el locale predeterminado configurado)
-- **plugins**: Array opcional de plugins personalizados para transformación
+#### `list(values, options?)`
 
-### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
+Formatea un array en una cadena de lista localizada.
 
-Recupera contenido de un diccionario remoto de forma así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**: La clave del diccionario a recuperar
-- **locale**: Locale opcional (por defecto es el locale predeterminado configurado)
-- **plugins**: Array opcional de plugins personalizados para transformación
-
 ## Formateadores
 
 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.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+#### `Intl.DisplayNames`
 
-Ejemplos:
+Para nombres localizados de idiomas, regiones, monedas y escrituras:
 
 ```ts
-import { number } from "intlayer";
-
-number(123456.789); // "123,456.789" (en en-US)
-number("1000000", { locale: "fr" }); // "1 000 000"
-number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
-```
-
-### `percentage(value, options?)`
+import { Intl } from "intlayer";
 
-Formatea un número como una cadena de porcentaje.
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
 
-Comportamiento: los valores mayores que 1 se interpretan como porcentajes enteros y se normalizan (por ejemplo, `25` → `25%`, `0.25` → `25%`).
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
 
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+#### `Intl.Collator`
 
-Ejemplos:
+Para comparación y ordenamiento de cadenas sensibles a la configuración regional:
 
 ```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`
@@ -564,42 +530,6 @@ 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.
-- El locale por defecto es el configurado en `internationalization.defaultLocale` si no se proporciona.
-- Estas utilidades son envoltorios ligeros; para un formateo avanzado, pase las opciones estándar de `Intl`.
-
-## Puntos de entrada y re-exportaciones (`@index.ts`)
-
-Los formateadores residen en el paquete core y se re-exportan desde paquetes de nivel superior para mantener las importaciones ergonómicas en diferentes entornos de ejecución:
-
-Ejemplos:
-
-```ts
-// Código de la aplicación (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:
@@ -698,3 +628,19 @@ import {
 ```
 
 > Esos composables considerarán la configuración regional del `IntlayerProvider` inyectado.
+
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Recupera y transforma contenido de un diccionario:
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+```
+
+## Notas
+
+- Todos los helpers aceptan entradas `string`; internamente se convierten a números o fechas.
+- La configuración regional por defecto es tu `internationalization.defaultLocale` si no se proporciona.
+- Estas utilidades son wrappers delgados; para formateo avanzado, pasa las opciones estándar de `Intl`.

package/docs/es/intlayer_CMS.md

@@ -253,16 +253,6 @@ La sincronización en vivo permite que tu aplicación refleje los cambios de con
 
 Para la guía de configuración completa (activación, inicio del servidor Live Sync, flujo de trabajo de desarrollo local y restricciones), consulta la [documentación de Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/live-sync.md).
 
-## Auto-alojamiento
-
-Intlayer puede ejecutarse completamente en tu propia infraestructura — no se requiere cuenta de Intlayer Cloud. Un solo comando arranca toda la pila (panel de control, API, base de datos, almacenamiento de objetos y correo electrónico) mediante Docker Compose:
-
-```sh
-curl -fsSL https://intlayer.org/install.sh | sh
-```
-
-Esto descarga un `docker-compose.yml` y un `.env`, genera automáticamente los secretos necesarios (`BETTER_AUTH_SECRET`, credenciales de MinIO) y arranca todos los contenedores con `docker compose up -d`. Volver a ejecutar el mismo comando en una instalación existente realiza una actualización progresiva sin pérdida de datos.
-
 ### Servicios iniciados
 
 | Servicio                   | Puerto(s)                            | Propósito                                             |
@@ -366,6 +356,41 @@ Para una referencia completa de todas las variables de entorno disponibles y opc
 
 ---
 
+### Extrayendo un método único
+
+Cada método de endpoint ya está autenticado y es independiente (maneja su propio token), por lo que puedes extraer uno y pasarlo — por ejemplo para inyectarlo como una dependencia:
+
+```typescript fileName="push.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const dictionary = dictionaryEndpoint(createIntlayerCMS());
+
+// Ya autenticado — refresca el token automáticamente en cada llamada
+export const pushDictionaries = dictionary.pushDictionaries;
+
+// Uso
+await pushDictionaries([{ key: "home", content: { title: "Home" } }]);
+```
+
+## Live sync
+
+Live Sync permite que tu aplicación refleje los cambios de contenido del CMS en tiempo de ejecución — sin necesidad de reconstruir o redeplegar. Cuando está habilitado, las actualizaciones se transmiten a un servidor Live Sync que actualiza los diccionarios que tu aplicación lee.
+
+Para la guía de configuración completa (configuración, iniciar el servidor Live Sync, el flujo de trabajo de desarrollo local y limitaciones), consulta la [documentación de Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/live-sync.md).
+
+## Auto-hospedaje
+
+Intlayer puede ejecutarse completamente en tu propia infraestructura. Una sola línea arranca el stack completo (dashboard, API, base de datos, almacenamiento de objetos y correo electrónico) con Docker Compose:
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+Para la guía de configuración completa, referencia de variables de entorno, instrucciones de actualización y procedimientos de copia de seguridad/restauración, consulta la [Guía de Auto-hospedaje](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md).
+
+---
+
 ## Depuración
 
 Si encuentras problemas con el CMS, verifica lo siguiente:

package/docs/es/intlayer_with_angular_21.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-31
-title: "Angular 21 i18n - Guía completa para traducir tu aplicación"
-description: "Sin más i18next. La guía 2026 para crear una aplicación Angular 21 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
+title: "Angular 22 i18n - Guía completa para traducir tu aplicación"
+description: "Sin más i18next. La guía 2026 para crear una aplicación Angular 22 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
   - Internacionalización
   - Documentación
@@ -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
 ---
 
-# Traduce tu sitio Angular 21 (Vite) usando Intlayer | Internacionalización (i18n)
+# Traduce tu sitio Angular 22 (Vite) usando Intlayer | Internacionalización (i18n)
 
 ## Tabla de Contenidos
 
@@ -94,7 +94,7 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
   <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 - Cómo Internacionalizar tu aplicación usando Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -105,7 +105,7 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
   <Tab label="Demo" 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 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
   </Tab>
 </Tabs>
 
-Ver la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-angular-21-template) en GitHub.
+Ver la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-angular-22-template) en GitHub.
 
 <Steps>
 
@@ -203,7 +203,7 @@ export default config;
 
 <Step number={3} title="Integrar Intlayer en tu Configuración Angular">
 
-Para integrar Intlayer con la CLI de Angular, necesitas usar un constructor (builder) personalizado. Esta guía asume que estás usando Vite/esbuild (por defecto para proyectos Angular 21).
+Para integrar Intlayer con la CLI de Angular, necesitas usar un constructor (builder) personalizado. Esta guía asume que estás usando Vite/esbuild (por defecto para proyectos Angular 22).
 
 Primero, modifica tu `angular.json` para usar el constructor esbuild personalizado. Actualiza las configuraciones `build` y `serve`:
 

package/docs/es/intlayer_with_nextjs_14.md

@@ -30,34 +30,7 @@ history:
 author: aymericzip
 ---
 
-# Traduce tu Next.js 14 and App Router con Intlayer | Internacionalización (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>
-
-Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-next-14-template) en GitHub.
+# Traduce tu sitio web Next.js 14 y App Router usando Intlayer | Internacionalización (i18n)
 
 ## Tabla de Contenidos