@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/es/intlayer_with_react_router_v7_fs_routes.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-12-07
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Cómo traducir una aplicación React Router v7 en 2026
-description: Aprende cómo agregar internacionalización (i18n) a tu aplicación React Router v7 usando Intlayer con enrutamiento basado en el sistema de archivos. Sigue esta guía completa para hacer tu aplicación multilingüe con enrutamiento consciente del locale.
+updatedAt: 2026-05-31
+title: "React Router v7 i18n - Guía completa para traducir tu aplicación"
+description: "Sin más i18next. La guía 2026 para crear una aplicación React Router v7 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
   - Internacionalización
   - Documentación
@@ -44,17 +44,54 @@ Para el enrutamiento del lado del cliente, consulte la guía [Intlayer con React
 
 <TOC/>
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una biblioteca innovadora y de código abierto para internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
+En comparación con soluciones principales como `react-i18next` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer, puedes:
+<AccordionGroup>
 
-- **Gestionar traducciones fácilmente** usando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Garantizar soporte para TypeScript** con tipos autogenerados, mejorando la autocompletación y la detección de errores.
-- **Beneficiarte de características avanzadas**, como la detección y cambio dinámico de locale.
-- **Habilitar enrutamiento consciente del locale** con el sistema de enrutamiento basado en el sistema de archivos de React Router v7.
+<Accordion header="Cobertura completa del enrutador React">
+
+Intlayer está optimizado para funcionar perfectamente con React Router al ofrecer **enrutamiento con reconocimiento local**, **middleware para detección local** y todas las funciones necesarias para escalar la internacionalización (i18n).
+
+</Accordion>
+
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
+
+</Accordion>
+
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -92,7 +129,9 @@ Con Intlayer, puedes:
 
 See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) on GitHub.
 
-### Paso 1: Instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando tu gestor de paquetes preferido:
 
@@ -129,7 +168,9 @@ bun x intlayer init
 - **@react-router/fs-routes**
   El paquete que habilita el enrutamiento basado en el sistema de archivos para React Router v7.
 
-### Paso 2: Configuración de tu proyecto
+</Step>
+
+<Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
@@ -148,7 +189,9 @@ export default config;
 
 > A través de este archivo de configuración, puedes configurar URLs localizadas, redirección mediante middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, deshabilitar los registros de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
-### Paso 3: Integra Intlayer en tu configuración de Vite
+</Step>
+
+<Step number={3} title="Integra Intlayer en tu configuración de Vite">
 
 Agrega el plugin intlayer en tu configuración:
 
@@ -164,7 +207,9 @@ export default defineConfig({
 
 > El plugin `intlayer()` para Vite se utiliza para integrar Intlayer con Vite. Asegura la construcción de archivos de declaración de contenido y los supervisa en modo desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
 
-### Paso 4: Configurar las rutas basadas en el sistema de archivos de React Router v7
+</Step>
+
+<Step number={4} title="Configurar las rutas basadas en el sistema de archivos de React Router v7">
 
 Configura tu enrutamiento para usar rutas basadas en el sistema de archivos con `flatRoutes`:
 
@@ -185,7 +230,9 @@ export default routes;
 
 > La función `flatRoutes` de `@react-router/fs-routes` habilita el enrutamiento basado en el sistema de archivos, donde la estructura de archivos en el directorio `routes/` determina las rutas de tu aplicación. La opción `ignoredRouteFiles` garantiza que los archivos de declaración de contenido de Intlayer (`.content.ts`, etc.) no se traten como archivos de ruta.
 
-### Paso 5: Crear archivos de ruta con convenciones del sistema de archivos
+</Step>
+
+<Step number={5} title="Crear archivos de ruta con convenciones del sistema de archivos">
 
 Con el enrutamiento basado en el sistema de archivos, usas una convención de nomenclatura plana donde los puntos (`.`) representan segmentos de ruta y los paréntesis `()` denotan segmentos opcionales.
 
@@ -352,7 +399,9 @@ export default function AboutPage() {
 }
 ```
 
-### Paso 6: Declara Tu Contenido
+</Step>
+
+<Step number={6} title="Declara Tu Contenido">
 
 Crea y gestiona tus declaraciones de contenido para almacenar traducciones. Coloca los archivos de contenido junto a tus archivos de ruta:
 
@@ -416,7 +465,9 @@ export default aboutContent;
 
 > Si su aplicación ya existe, puede utilizar el [Compilador Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md), así como el [comando de extracción](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md), para transformar miles de componentes en un segundo.
 
-### Paso 7: Crear Componentes Sensibles al Idioma
+</Step>
+
+<Step number={7} title="Crear Componentes Sensibles al Idioma">
 
 Crea un componente `LocalizedLink` para la navegación sensible al idioma:
 
@@ -479,7 +530,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Paso 8: Crear un componente para cambiar de idioma
+</Step>
+
+<Step number={8} title="Crear un componente para cambiar de idioma">
 
 Crea un componente para permitir a los usuarios cambiar de idioma:
 
@@ -540,7 +593,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Para aprender más sobre el hook `useLocale`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md).
 
-### Paso 9: Añadir gestión de atributos HTML (Opcional)
+</Step>
+
+<Step number={9} title="Añadir gestión de atributos HTML">
 
 Crea un hook para gestionar los atributos lang y dir del HTML:
 
@@ -561,7 +616,9 @@ export const useI18nHTMLAttributes = () => {
 
 Este hook ya se usa en el componente de layout (`root.tsx`) mostrado en el Paso 5.
 
-### (Opcional) Paso 11 : Extraer el contenido de tus componentes
+</Step>
+
+<Step number={11} title="Extraer el contenido de tus componentes" isOptional={true}>
 
 Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
 
@@ -659,7 +716,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Paso 10: Añadir middleware (Opcional)
+</Step>
+
+<Step number={10} title="Añadir middleware">
 
 También puedes usar el `intlayerProxy` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
 
@@ -682,6 +741,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configurar TypeScript
 
 Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de TypeScript y fortalecer tu base de código.

package/docs/es/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Cómo configurar Intlayer con Storybook
-description: Aprenda a hacer que su sistema de diseño sea multilingüe usando Intlayer con Storybook - compile declaraciones de contenido, agregue un selector de idioma y previsualice sus componentes en cualquier idioma.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Guía completa para traducir tu aplicación"
+description: "Sin más i18next. La guía 2026 para crear una aplicación Storybook multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
   - Internacionalización
   - Documentación
@@ -31,16 +31,54 @@ history:
 
 <TOC/>
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una biblioteca de internacionalización (i18n) innovadora y de código abierto diseñada para simplificar el soporte multilingüe en aplicaciones web modernas. Funciona a **nivel de componente**: cada componente posee sus propias declaraciones de contenido, manteniendo las traducciones ubicadas junto al código que las utiliza.
+En comparación con soluciones principales como `storybook-react-i18next` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer puedes:
+<AccordionGroup>
 
-- **Gestionar traducciones de forma declarativa** con archivos de contenido por componente.
-- **Obtener soporte completo de TypeScript** a través de tipos generados automáticamente y autocompletado en el IDE.
-- **Cambiar de idioma en tiempo de ejecución** sin recargar la página.
-- **Traducir automáticamente** con integraciones integradas de proveedores de IA.
+<Accordion header="Cobertura completa del libro de cuentos">
+
+Intlayer está optimizado para funcionar perfectamente con Storybook al ofrecer **decoradores de historias multilingües**, **cambio de configuración regional** y todas las funciones necesarias para escalar la internacionalización (i18n) en todo su sistema de diseño.
+
+</Accordion>
+
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
+
+</Accordion>
+
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -59,7 +97,9 @@ Storybook es la herramienta estándar de la industria para desarrollar y documen
 <Tabs>
 <Tab value="Vite Setup">
 
-### Paso 1: Instalar Dependencias
+<Steps>
+
+<Step number={1} title="Instalar Dependencias">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Paso 2: Crear una Configuración de Intlayer
+</Step>
+
+<Step number={2} title="Crear una Configuración de Intlayer">
 
 Crea `intlayer.config.ts` en la raíz de tu proyecto (o dentro de tu paquete de sistema de diseño):
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Paso 3: Agregar el Complemento de Vite a Storybook
+</Step>
+
+<Step number={3} title="Agregar el Complemento de Vite a Storybook">
 
 El hook `viteFinal` de Storybook te permite extender la configuración interna de Vite. Importa y agrega el complemento `intlayer()` allí:
 
@@ -159,7 +203,9 @@ El complemento `intlayer()` vigila tus archivos `*.content.ts` y vuelve a genera
 
 ---
 
-### Paso 4: Agregar el Decorador `IntlayerProvider` y una Barra de Herramientas de Idioma
+</Step>
+
+<Step number={4} title="Agregar el Decorador `IntlayerProvider` y una Barra de Herramientas de Idioma">
 
 El archivo `preview` de Storybook es el lugar adecuado para envolver cada historia con el `IntlayerProvider` y exponer un selector de idioma en la barra de herramientas:
 
@@ -216,7 +262,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Paso 1: Instalar Dependencias
+</Step>
+
+<Step number={1} title="Instalar Dependencias">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Paso 2: Crear una Configuración de Intlayer
+</Step>
+
+<Step number={2} title="Crear una Configuración de Intlayer">
 
 Crea `intlayer.config.ts` en la raíz de tu proyecto:
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Paso 3: Configurar el Webpack de Storybook
+</Step>
+
+<Step number={3} title="Configurar el Webpack de Storybook">
 
 Para configuraciones de Storybook basadas en Webpack (por ejemplo, `@storybook/react-webpack5`), extiende la configuración de webpack a través de `webpackFinal` para agregar los alias y el cargador de Intlayer:
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Paso 4: Agregar el Decorador `IntlayerProvider` y una Barra de Herramientas de Idioma
+</Step>
+
+<Step number={4} title="Agregar el Decorador `IntlayerProvider` y una Barra de Herramientas de Idioma">
 
 Igual que en la configuración de Vite: agrega el decorador y el tipo de idioma global en `.storybook/preview.tsx`:
 
@@ -335,6 +389,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Declaración de Contenido
 
 Crea un archivo `*.content.ts` al lado de cada componente. Intlayer lo detecta automáticamente durante la compilación.

package/docs/es/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Cómo traducir una aplicación SvelteKit en 2026
-description: Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - Guía completa para traducir tu aplicación"
+description: "Sin más i18next. La guía 2026 para crear una aplicación SvelteKit multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
   - Internacionalización
   - Documentación
@@ -59,16 +59,54 @@ history:
 
 <TOC/>
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una biblioteca innovadora y de código abierto para internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas. Funciona perfectamente con las capacidades de Server-Side Rendering (SSR) de **SvelteKit**.
+En comparación con soluciones principales como `svelte-i18n` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer, puedes:
+<AccordionGroup>
 
-- **Gestionar traducciones fácilmente** usando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Garantizar soporte para TypeScript** con tipos autogenerados.
-- **Aprovechar el SSR de SvelteKit** para una internacionalización amigable con SEO.
+<Accordion header="Soporte completo de SvelteKit">
+
+Intlayer está optimizado para funcionar perfectamente con SvelteKit al ofrecer **enrutamiento multilingüe**, **soporte SSR** y todas las funciones necesarias para escalar la internacionalización (i18n).
+
+</Accordion>
+
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
+
+</Accordion>
+
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -116,7 +154,9 @@ Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final
 └── vite.config.ts
 ```
 
-### Paso 1: Instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando npm:
 
@@ -148,7 +188,9 @@ bun x intlayer init
 - **svelte-intlayer**: Proporciona context providers y stores para Svelte/SvelteKit.
 - **vite-intlayer**: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.
 
-### Paso 2: Configuración de tu proyecto
+</Step>
+
+<Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración en la raíz de tu proyecto:
 
@@ -165,7 +207,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Paso 3: Integra Intlayer en tu configuración de Vite
+</Step>
+
+<Step number={3} title="Integra Intlayer en tu configuración de Vite">
 
 Actualiza tu `vite.config.ts` para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.
 
@@ -179,7 +223,9 @@ export default defineConfig({
 });
 ```
 
-### Paso 4: Declara Tu Contenido
+</Step>
+
+<Step number={4} title="Declara Tu Contenido">
 
 Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta `src` (por ejemplo, `src/lib/content` o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función `t()` para cada locale.
 
@@ -200,13 +246,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Paso 5: Utiliza Intlayer en Tus Componentes
+</Step>
+
+<Step number={5} title="Utiliza Intlayer en Tus Componentes">
 
 Ahora puedes usar la función `useIntlayer` en cualquier componente Svelte. Esta devuelve una tienda reactiva que se actualiza automáticamente cuando cambia el locale. La función respetará automáticamente el locale actual (tanto durante SSR como en la navegación del lado del cliente).
 
 > **Nota:** `useIntlayer` devuelve una tienda de Svelte, por lo que necesitas usar el prefijo `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Cómo traducir tu aplicación SvelteKit – Guía i18n 2026
 > description: Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR).
 > keywords:
@@ -231,6 +279,10 @@ Ahora puedes usar la función `useIntlayer` en cualquier componente Svelte. Esta
 
 # Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)
 
+</Step>
+
+</Steps>
+
 ## Tabla de Contenidos
 
 <TOC/>
@@ -292,7 +344,9 @@ Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final
 └── vite.config.ts
 ```
 
-### Paso 1: Instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando npm:
 
@@ -324,7 +378,9 @@ bun x intlayer init
 - **svelte-intlayer**: Proporciona context providers y stores para Svelte/SvelteKit.
 - **vite-intlayer**: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.
 
-### Paso 2: Configuración de tu proyecto
+</Step>
+
+<Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración en la raíz de tu proyecto:
 
@@ -341,7 +397,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Paso 3: Integra Intlayer en tu configuración de Vite
+</Step>
+
+<Step number={3} title="Integra Intlayer en tu configuración de Vite">
 
 Actualiza tu `vite.config.ts` para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.
 
@@ -355,7 +413,9 @@ export default defineConfig({
 });
 ```
 
-### Paso 4: Declara Tu Contenido
+</Step>
+
+<Step number={4} title="Declara Tu Contenido">
 
 Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta `src` (por ejemplo, `src/lib/content` o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función `t()` para cada locale.
 
@@ -376,7 +436,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Paso 5: Utiliza Intlayer en Tus Componentes
+</Step>
+
+<Step number={5} title="Utiliza Intlayer en Tus Componentes">
 
 para acceder a su valor reactivo (por ejemplo, `$content.title`).
 
@@ -398,7 +460,9 @@ para acceder a su valor reactivo (por ejemplo, `$content.title`).
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Opcional) Paso 6: Configurar el enrutamiento
+</Step>
+
+<Step number={6} title="Configurar el enrutamiento" isOptional={true}>
 
 Los siguientes pasos muestran cómo configurar el enrutamiento basado en el locale en SvelteKit. Esto permite que tus URLs incluyan el prefijo del locale (por ejemplo, `/en/about`, `/fr/about`) para mejorar el SEO y la experiencia del usuario.
 
@@ -423,7 +487,9 @@ Los siguientes pasos muestran cómo configurar el enrutamiento basado en el loca
         └── +layout.svelte         # Diseño raíz para fuentes y estilos globales
 ```
 
-### Paso 7: Manejar la detección del locale en el servidor (Hooks)
+</Step>
+
+<Step number={7} title="Manejar la detección del locale en el servidor">
 
 En SvelteKit, el servidor necesita conocer el locale del usuario para renderizar el contenido correcto durante SSR. Usamos `hooks.server.ts` para detectar el locale desde la URL o las cookies.
 
@@ -635,7 +701,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Opcional) Paso 8: Enlaces internacionalizados
+</Step>
+
+<Step number={8} title="Enlaces internacionalizados" isOptional={true}>
 
 Para SEO, se recomienda prefijar tus rutas con la locale (por ejemplo, `/en/about`, `/fr/about`). Este componente automáticamente prefija cualquier enlace con la locale actual.
 
@@ -668,7 +736,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale
 ```
 
-### (Opcional) Paso 9: Selector de idioma
+</Step>
+
+<Step number={9} title="Selector de idioma" isOptional={true}>
 
 Para permitir a los usuarios cambiar de idioma, actualiza la URL.
 
@@ -709,7 +779,9 @@ Para permitir a los usuarios cambiar de idioma, actualiza la URL.
 </style>
 ```
 
-### (Opcional) Paso 10: Añadir proxy backend
+</Step>
+
+<Step number={10} title="Añadir proxy backend" isOptional={true}>
 
 Para añadir un proxy backend a tu aplicación SvelteKit, puedes usar la función `intlayerProxy` proporcionada por el plugin `vite-intlayer`. Este plugin detectará automáticamente la mejor locale para el usuario basándose en la URL, cookies y preferencias de idioma del navegador.
 
@@ -728,7 +800,9 @@ export default defineConfig({
 });
 ```
 
-### (Opcional) Paso 11: Configurar el editor / CMS de intlayer
+</Step>
+
+<Step number={11} title="Configurar el editor / CMS de intlayer" isOptional={true}>
 
 Para configurar el editor de intlayer, debes seguir la [documentación del editor de intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md).
 
@@ -753,7 +827,9 @@ Para poder visualizar el selector del editor intlayer, deberás usar la sintaxis
 </div>
 ```
 
-### (Opcional) Paso 12 : Extraer el contenido de tus componentes
+</Step>
+
+<Step number={12} title="Extraer el contenido de tus componentes" isOptional={true}>
 
 Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
 
@@ -848,6 +924,9 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### Configuración de Git