@intlayer/docs 9.5.4 → 9.5.5

package/docs/es/intlayer_with_remix_3.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-09
-updatedAt: 2026-09-11
+updatedAt: 2026-09-19
 title: "Remix 3 i18n - Guía completa para traducir tu aplicación"
 description: "Olvídate de i18next. La guía 2026 para crear una aplicación Remix 3 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-remix-3-template
 applicationShowcase: https://intlayer-remix-3-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Usar el middleware y los hooks de remix-intlayer"
   - version: 9.5.0
     date: 2026-09-09
     changes: "Documentación inicial para Remix 3"
@@ -39,7 +42,7 @@ Esta guía demuestra cómo integrar **Intlayer** para una internacionalización
 - **`remix/node-fetch-server`**: Adaptadores de servidor para Node.js, con soporte nativo para Bun, Deno y entornos edge.
 - **`remix/cookie`**: Análisis y serialización de cookies criptográficamente seguras.
 
-Combinado con **Intlayer**, obtienes un sistema completo de internacionalización que ofrece seguridad en tiempo de compilación, traducciones automatizadas por IA, renderizado en servidor sin sobrecarga y enrutamiento fluido por idioma.
+Combinado con **Intlayer** y el paquete **`remix-intlayer`**, un middleware de idioma más los mismos hooks `useIntlayer` / `useDictionary` / `useLocale` que `react-intlayer`, vinculados al contexto de petición de Remix, obtienes un sistema completo de internacionalización que ofrece seguridad en tiempo de compilación, traducciones automatizadas por IA, renderizado en servidor sin sobrecarga y enrutamiento fluido por idioma.
 
 ## Tabla de contenidos
 
@@ -52,7 +55,7 @@ En comparación con soluciones tradicionales como `i18next` o cargadores de trad
 <AccordionGroup>
 <Accordion header="Cobertura total de Remix 3 y estándares web">
 
-Intlayer está diseñado para funcionar de forma nativa con los estándares web (`Request`, `Response`, `Headers` y `URL`). Se integra sin esfuerzo en el router Fetch de Remix 3 mediante un middleware ligero, extrayendo los idiomas de las rutas URL, cookies o encabezados `Accept-Language` sin atarte a un entorno específico.
+Intlayer está diseñado para funcionar de forma nativa con los estándares web (`Request`, `Response`, `Headers` y `URL`). `remix-intlayer` se integra en el router Fetch de Remix 3 como un middleware ligero, extrayendo el idioma de las rutas URL, cookies o encabezados `Accept-Language` y exponiéndolo al resto de la petición, handlers, vistas y componentes `remix/ui`, sin pasarlo manualmente ni atarte a un entorno de ejecución específico.
 
 </Accordion>
 <Accordion header="Declaraciones de contenido con seguridad de tipos">
@@ -109,25 +112,26 @@ Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-re
 <Steps>
 <Step number={1} title="Instalar dependencias">
 
-Instala `intlayer` y `remix` (versión 3) usando tu gestor de paquetes preferido:
+Instala `intlayer`, `remix-intlayer` y `remix` (versión 3) usando tu gestor de paquetes preferido:
 
 ```bash packageManager="npm"
-npm install intlayer remix@next
+npm install intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer remix@next
+pnpm add intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer remix@next
+yarn add intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="bun"
-bun add intlayer remix@next
+bun add intlayer remix-intlayer remix@next
 ```
 
 - **`intlayer`**: Motor central de internacionalización que proporciona gestión de configuración, declaración de diccionarios (`t()`, `Dictionary`), herramientas CLI e intérprete en tiempo de ejecución.
+- **`remix-intlayer`**: La integración con Remix 3: el middleware de router `intlayer()` que resuelve el idioma de cada petición, y los hooks `useIntlayer`, `useDictionary` y `useLocale` que lo leen en cualquier punto posterior.
 - **`remix`**: El paquete unificado del framework Remix 3 que exporta `remix/router`, `remix/routes`, `remix/ui`, `remix/middleware/render` y `remix/node-fetch-server`.
 
 </Step>
@@ -236,65 +240,30 @@ bun x intlayer build
 Esto compila tu contenido en el directorio de artefactos `.intlayer`, permitiendo autocompletado completo en TypeScript y acceso rápido a los diccionarios.
 
 </Step>
-<Step number={5} title="Implementar el middleware Intlayer">
-
-Remix 3 proporciona una canalización de middleware componible a través de `createRouter({ middleware: [...] })`.
-
-Crea un middleware de Intlayer que resuelva el idioma de cada solicitud entrante según:
-
-1. El prefijo de ruta URL mediante `getLocaleFromPath` de Intlayer (por ejemplo, `/es` o `/fr`).
-2. El asistente `getLocale` de Intlayer, que negocia automáticamente a través de cookies de almacenamiento (`INTLAYER_LOCALE`), encabezados personalizados (`x-intlayer-locale`), encabezados estándar `Accept-Language` y tu `defaultLocale` configurado.
-
-```typescript fileName="src/middleware/intlayer.ts" codeFormat={["typescript", "esm"]}
-import {
-  defaultLocale,
-  getCookie,
-  getLocale,
-  getLocaleFromPath,
-  type Locale,
-} from "intlayer";
-import { createContextKey, type Middleware } from "remix/router";
-
-/**
- * Clave de contexto con seguridad de tipos para recuperar el idioma resuelto del RequestContext de Remix 3.
- */
-export const localeKey = createContextKey<Locale>(defaultLocale);
-
-/**
- * Middleware de Intlayer para Remix 3.
- *
- * Resuelve el idioma de la solicitud siguiendo la prioridad:
- * 1. Prefijo de ruta URL (ej. `/es/...`) mediante `getLocaleFromPath`
- * 2. Negociación de almacenamiento y encabezados mediante `getLocale` (cookie, encabezado personalizado, negociación Accept-Language, fallback defaultLocale)
- *
- * Adjunta el idioma resuelto al RequestContext de Remix 3.
- */
-export const intlayer = (): Middleware => {
-  return async (context, next) => {
-    // Detección de ruta (/es/about -> "es", /about -> undefined)
-    const pathLocale = getLocaleFromPath(context.url.pathname);
-
-    if (pathLocale) {
-      // Adjuntar idioma resuelto al contexto de solicitud de Remix 3
-      context.set(localeKey, pathLocale);
-
-      return next();
-    }
-
-    const storedLocale = await getLocale({
-      getHeader: (name) => context.headers.get(name),
-      getCookie: (name) =>
-        getCookie(name, context.headers.get("cookie") ?? undefined),
-    });
-
-    // Adjuntar idioma resuelto al contexto de solicitud de Remix 3
-    context.set(localeKey, storedLocale ?? defaultLocale);
-
-    return next();
-  };
-};
+<Step number={5} title="Añadir el middleware de Intlayer">
+
+Remix 3 proporciona un pipeline de middleware componible mediante `createRouter({ middleware: [...] })`.
+
+`remix-intlayer` incluye el middleware `intlayer()`. Para cada petición entrante, resuelve el idioma utilizando:
+
+1. La URL, en todos los modos de enrutamiento excepto `no-prefix`: el prefijo de ruta (ej. `/fr` o `/es`) o el parámetro de búsqueda `?locale=`.
+2. El idioma persistido por el cliente: la cookie de almacenamiento (`INTLAYER_LOCALE`) o el encabezado personalizado (`x-intlayer-locale`).
+3. La negociación estándar de `Accept-Language`, recurriendo a tu `defaultLocale` configurado.
+
+El resultado se almacena en el contexto de petición de Remix como `context.intlayer` (o `context.get(Intlayer)`), con `locale`, `defaultLocale` y `availableLocales`. A continuación, el middleware ejecuta el resto de la petición dentro de un ámbito de `AsyncLocalStorage` vinculado a ese contexto, lo que permite que los hooks del paquete lean el idioma sin argumentos, tanto en manejadores de rutas como en vistas y componentes de `remix/ui`:
+
+```typescript
+import { useIntlayer, useLocale } from "remix-intlayer";
+
+// En cualquier punto posterior al middleware
+const { locale, availableLocales } = useLocale();
+const { title } = useIntlayer("home");
 ```
 
+`useIntlayer("home", "fr")` o `useIntlayer("faq", { item: 2 })` anulan el idioma de la petición para una llamada, y `useDictionary(homeContent)` lee un diccionario importado en lugar de una clave. Fuera de una petición, los hooks recurren al idioma predeterminado.
+
+> El middleware también prepara los diccionarios de Intlayer cuando se inicia el servidor, por lo que la falta de un `intlayer build` no deja el registro vacío.
+
 </Step>
 <Step number={6} title="Definir rutas con seguridad de tipos">
 
@@ -324,20 +293,21 @@ routes.localizedHome.href({ locale: "es" }); // "/es"
 
 Remix 3 renderiza la interfaz de usuario con componentes JSX de `remix/ui`. Un componente es una **función de setup** que recibe un `Handle` y devuelve una **función de render**. El setup se ejecuta una sola vez por instancia, el render se ejecuta en cada actualización, y las props se leen a través de `handle.props`.
 
-Comienza con un shell compartido `Document` que defina los atributos `<html lang="..." dir="...">` a partir del idioma resuelto:
+Comienza con un shell compartido `Document` que establece los atributos `<html lang="..." dir="...">` a partir del idioma resuelto por el middleware:
 
 ```tsx fileName="src/views/document.tsx" codeFormat={["typescript", "esm"]}
-import { getHTMLTextDir, type Locale } from "intlayer";
+import { getHTMLTextDir } from "intlayer";
+import { useLocale } from "remix-intlayer";
 import type { Handle, RemixNode } from "remix/ui";
 
 type DocumentProps = {
-  locale: Locale;
   title: string;
   children?: RemixNode;
 };
 
 export const Document = (handle: Handle<DocumentProps>) => () => {
-  const { locale, title, children } = handle.props;
+  const { title, children } = handle.props;
+  const { locale } = useLocale();
 
   return (
     <html lang={locale} dir={getHTMLTextDir(locale)}>
@@ -352,47 +322,40 @@ export const Document = (handle: Handle<DocumentProps>) => () => {
 };
 ```
 
-Luego crea la página de inicio. Extrae el diccionario localizado con `getIntlayer` y muestra un selector de idiomas:
+Luego crea la página de inicio. Lee el diccionario localizado con `useIntlayer` y renderiza un selector de idioma:
 
 ```tsx fileName="src/views/home.tsx" codeFormat={["typescript", "esm"]}
-import {
-  getIntlayer,
-  getLocaleName,
-  getLocalizedPath,
-  type Locale,
-  locales,
-} from "intlayer";
-import type { Handle } from "remix/ui";
-import { routes } from "../routes";
+import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
+import { useIntlayer, useLocale } from "remix-intlayer";
 import { Document } from "./document";
 
-type HomePageProps = {
-  locale: Locale;
-};
-
-export const HomePage = (handle: Handle<HomePageProps>) => () => {
-  const { locale } = handle.props;
-  const home = getIntlayer("home", locale);
+export const HomePage = () => () => {
+  const { locale, availableLocales } = useLocale();
+  const home = useIntlayer("home");
+  const pathWithoutLocale = getPathWithoutLocale();
 
   return (
-    <Document locale={locale} title={home.title}>
+    <Document title={home.title}>
       <header>
         <nav aria-label="Languages">
           <span>{home.switchLanguage}</span>
-          {locales.map((targetLocale) => {
-            const isActive = targetLocale === locale;
-
-            return (
-              <a
-                key={targetLocale}
-                href={getLocalizedPath(routes.home.href(), targetLocale)}
-                class={isActive ? "active" : undefined}
-                aria-current={isActive ? "page" : undefined}
-              >
-                {getLocaleName(targetLocale, locale)}
-              </a>
-            );
-          })}
+          <ul>
+            {availableLocales.map((localeItem) => {
+              const isActive = localeItem === locale;
+
+              return (
+                <li key={localeItem} class="p-1">
+                  <a
+                    href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+                    class={isActive ? "active" : undefined}
+                    aria-current={isActive ? "page" : undefined}
+                  >
+                    {getLocaleName(localeItem, locale)}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
         </nav>
       </header>
       <main>
@@ -404,7 +367,7 @@ export const HomePage = (handle: Handle<HomePageProps>) => () => {
 };
 ```
 
-> El JSX de Remix no es React: no hay hooks, `class` se escribe tal cual (`className` también se acepta), y los nuevos renderizados se disparan explícitamente con `handle.update()`. Los valores interpolados se escapan automáticamente.
+> Remix JSX no es React: `class` se escribe tal cual (`className` también se acepta) y los re-renderizados se activan explícitamente con `handle.update()`. Los valores interpolados se escapan automáticamente. Los hooks de Intlayer son funciones simples que leen el ámbito de la petición, por lo que se pueden llamar tanto desde la función de setup como desde la de renderizado.
 
 </Step>
 <Step number={8} title="Conectar el router y el servidor">
@@ -413,39 +376,37 @@ Añade el middleware `render()` de `remix/middleware/render` junto al middleware
 
 ```tsx fileName="src/router.tsx" codeFormat={["typescript", "esm"]}
 import { isDeclaredLocale } from "intlayer";
+import { intlayer } from "remix-intlayer";
 import { render } from "remix/middleware/render";
 import { createRouter } from "remix/router";
-import { intlayer, localeKey } from "./middleware/intlayer";
 import { routes } from "./routes";
 import { HomePage } from "./views/home";
 
-// 1. Inicializar el router con el middleware de Intlayer + render
+// 1. Initialize router with Intlayer + render middleware
 export const router = createRouter({
   middleware: [intlayer(), render()],
 });
 
-// 2. Mapear manejadores de ruta
+// 2. Map route handlers
 router.map(routes, {
   actions: {
-    // Ruta del idioma por defecto
+    // Default locale route
     home(context) {
-      const locale = context.get(localeKey);
-      return context.render(<HomePage locale={locale} />);
+      return context.render(<HomePage />);
     },
 
-    // Ruta localizada
+    // Localized route
     localizedHome(context) {
       if (!isDeclaredLocale(context.params.locale)) {
         return new Response("Not Found", { status: 404 });
       }
-      const locale = context.get(localeKey);
-      return context.render(<HomePage locale={locale} />);
+      return context.render(<HomePage />);
     },
   },
 });
 ```
 
-> `context.render` acepta un `ResponseInit` opcional como segundo argumento, por ejemplo: `context.render(<NotFoundPage locale={locale} />, { status: 404 })`.
+> `context.render` acepta un `ResponseInit` opcional como segundo argumento, ej. `context.render(<NotFoundPage />, { status: 404 })`. El idioma resuelto permanece accesible desde el manejador como `context.intlayer.locale`, por ejemplo para construir una respuesta `Response.json`.
 
 Por último, expón el router a través de un manejador `fetch` estándar. El mismo router funciona en Node.js, Bun, Deno y Cloudflare Workers:
 

package/docs/es/intlayer_with_tanstack+solid.md

@@ -1259,6 +1259,13 @@ Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/doc
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en la aplicación en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
 
+</Question>
+<Question title="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
+
+El [editor visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
+
+Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
+
 </Question>
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 

package/docs/es/intlayer_with_tanstack.md

@@ -1327,6 +1327,13 @@ Sí. Las declaraciones de contenido admiten [formas plurales](https://github.com
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en el sitio en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
 
+</Question>
+<Question title="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
+
+El [editor visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
+
+Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
+
 </Question>
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 

package/docs/es/intlayer_with_vite+preact.md

@@ -1121,6 +1121,13 @@ Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/doc
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en la aplicación en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
 
+</Question>
+<Question title="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
+
+El [editor visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
+
+Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
+
 </Question>
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 

package/docs/es/intlayer_with_vite+react.md

@@ -1065,6 +1065,13 @@ Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/doc
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), autoalojado, que permite que cualquiera edite texto en su sitio en la aplicación en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para el contenido que debe cambiar sin un despliegue.
 
+</Question>
+<Question title="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
+
+El [editor visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
+
+Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
+
 </Question>
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 

package/docs/es/intlayer_with_vite+solid.md

@@ -820,6 +820,13 @@ Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/doc
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en la aplicación en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
 
+</Question>
+<Question title="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
+
+El [editor visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
+
+Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
+
 </Question>
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 

package/docs/es/packages/astro-intlayer/exports.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-09-19
 title: Documentación del paquete astro-intlayer
-description: Integración de Astro para Intlayer, proporcionando configuración para el enrutamiento basado en locales y la gestión de diccionarios.
+description: Integración de Astro para Intlayer, que proporciona configuración para enrutamiento basado en locales, middleware, hooks, store de cliente y gestión de diccionarios.
 keywords:
   - astro-intlayer
   - astro
@@ -14,6 +14,9 @@ slugs:
   - astro-intlayer
   - exports
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Añadida documentación de hooks useIntlayer, useDictionary, useLocale, middleware y formateadores"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Documentación unificada para todas las exportaciones"
@@ -22,7 +25,7 @@ author: aymericzip
 
 # Paquete astro-intlayer
 
-El paquete `astro-intlayer` proporciona las herramientas necesarias para integrar Intlayer en aplicaciones Astro. Configura el enrutamiento basado en locales y la gestión de diccionarios.
+El paquete `astro-intlayer` proporciona las herramientas necesarias para integrar Intlayer en aplicaciones Astro. Configura el enrutamiento basado en locales, la gestión de diccionarios, la reescritura de páginas en tiempo de compilación, el middleware de solicitudes y los hooks para acceder al contenido multilingüe tanto en componentes `.astro` renderizados en el servidor como en scripts del lado del cliente.
 
 ## Instalación
 
@@ -34,22 +37,171 @@ npm install astro-intlayer
 
 ### Integración
 
-El paquete `astro-intlayer` proporciona una integración para Astro para configurar Intlayer en tu proyecto.
+El paquete `astro-intlayer` proporciona una integración de Astro que configura Intlayer en tu proyecto.
 
-Importar:
+Importación:
 
 ```tsx
-import "astro-intlayer";
+import { intlayer } from "astro-intlayer";
 ```
 
-o agregándolo a `astro.config.mjs`:
+o importación por defecto en `astro.config.mjs`:
 
 ```ts
+import { defineConfig } from "astro/config";
+import intlayer from "astro-intlayer";
+
 export default defineConfig({
   integrations: [intlayer()],
 });
 ```
 
-| Función    | Descripción                                                 |
-| ---------- | ----------------------------------------------------------- |
-| `intlayer` | Integración de Astro que configura Intlayer en tu proyecto. |
+| Función    | Descripción                                                                                                                                                                                                             | Documentación relacionada                                                                                     |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `intlayer` | Integración de Astro que prepara diccionarios, configura plugins de Vite (alias, proxy de enrutamiento, poda), registra automáticamente el middleware de solicitudes y emite páginas prerenderizadas en URL reescritas. | [intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/astro-intlayer/intlayer.md) |
+
+### Hooks (Servidor y Cliente)
+
+Importación:
+
+```tsx
+import { useIntlayer, useDictionary, useLocale } from "astro-intlayer";
+```
+
+| Hook            | Descripción                                                                                                                                                                                               | Documentación relacionada                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `useIntlayer`   | Selecciona un diccionario por su clave y devuelve su contenido localizado. En el frontmatter de `.astro`, lee el locale de la solicitud de `Astro.locals`. En `<script>`, lee desde el store del cliente. | [useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/astro-intlayer/useIntlayer.md)     |
+| `useDictionary` | Transforma un objeto diccionario y devuelve contenido para el locale resuelto. Funciona en frontmatter y scripts de cliente.                                                                              | [useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/astro-intlayer/useDictionary.md) |
+| `useLocale`     | Devuelve el locale actual, el locale predeterminado, los locales disponibles y una función para actualizar el locale.                                                                                     | [useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/astro-intlayer/useLocale.md)         |
+
+### Middleware (astro-intlayer/middleware)
+
+Importación:
+
+```tsx
+import { onRequest } from "astro-intlayer/middleware";
+```
+
+| Exportación | Tipo                | Descripción                                                                                                                                                                            | Documentación relacionada                                                                                       |
+| ----------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `onRequest` | `MiddlewareHandler` | Middleware de Astro que detecta el locale de la solicitud y adjunta `Astro.locals.intlayer`. Registrado automáticamente por `intlayer()`, o importado manualmente para su composición. | [onRequest](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/astro-intlayer/onRequest.md) |
+
+### Utilidades
+
+Importación:
+
+```tsx
+import { getIntlayerLocals } from "astro-intlayer";
+```
+
+| Función             | Descripción                                                                                                             | Documentación relacionada |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------- |
+| `getIntlayerLocals` | Función de ayuda para recuperar el objeto `IntlayerLocals` actual del ámbito de almacenamiento fuera de `Astro.locals`. | -                         |
+
+### Utilidades de Cliente (astro-intlayer/client)
+
+Importación:
+
+```tsx
+import {
+  useIntlayer,
+  useDictionary,
+  useDictionaryDynamic,
+  useLocale,
+  useLocaleStorage,
+  useLocaleCookie,
+  getIntlayer,
+  getDictionary,
+  installIntlayer,
+  setLocaleInStorage,
+  setLocaleCookie,
+  localeInStorage,
+  localeCookie,
+} from "astro-intlayer/client";
+```
+
+Cuando se importa en el navegador o dentro de etiquetas `<script>` del cliente, `astro-intlayer` se asigna automáticamente a `astro-intlayer/client` (impulsado por `vanilla-intlayer`), proporcionando getters de diccionario en el cliente, suscriptores al store y herramientas de persistencia de locale.
+
+### Formateadores (astro-intlayer/format)
+
+Importación:
+
+```tsx
+import {
+  useIntl,
+  useDate,
+  useNumber,
+  useCurrency,
+  usePercentage,
+  useRelativeTime,
+  useList,
+  useUnit,
+  useCompact,
+} from "astro-intlayer/format";
+```
+
+| Hook              | Descripción                                                                                                          |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `useIntl`         | Devuelve una instancia de Intl vinculada al locale con capacidades de almacenamiento en caché y suscripción.         |
+| `useDate`         | Devuelve una función de formato de fecha predeterminada para el locale actual (`Intl.DateTimeFormat`).               |
+| `useNumber`       | Devuelve una función de formato numérico predeterminada para el locale actual (`Intl.NumberFormat`).                 |
+| `useCurrency`     | Devuelve una función de formato de moneda predeterminada para el locale actual.                                      |
+| `usePercentage`   | Devuelve una función de formato de porcentaje predeterminada para el locale actual.                                  |
+| `useRelativeTime` | Devuelve una función de formato de tiempo relativo predeterminada para el locale actual (`Intl.RelativeTimeFormat`). |
+| `useList`         | Devuelve una función de formato de lista predeterminada para el locale actual (`Intl.ListFormat`).                   |
+| `useUnit`         | Devuelve una función de formato de unidad predeterminada para el locale actual.                                      |
+| `useCompact`      | Devuelve una función de formato de número compacto predeterminada para el locale actual (p. ej. `1.5K`).             |
+
+### Utilidades HTML (astro-intlayer/html)
+
+Importación:
+
+```tsx
+import { renderHTML, useHTML, useHTMLRenderer } from "astro-intlayer/html";
+```
+
+| Exportación       | Tipo       | Descripción                                                          |
+| ----------------- | ---------- | -------------------------------------------------------------------- |
+| `renderHTML`      | `Function` | Función de utilidad independiente para renderizar nodos HTML.        |
+| `useHTML`         | `Hook`     | Hook para obtener el contexto y configuración del proveedor de HTML. |
+| `useHTMLRenderer` | `Hook`     | Hook para obtener una función de renderizado de HTML preconfigurada. |
+
+### Utilidades Markdown (astro-intlayer/markdown)
+
+Importación:
+
+```tsx
+import {
+  compileMarkdown,
+  renderMarkdown,
+  parseMarkdown,
+  useMarkdown,
+  useMarkdownRenderer,
+} from "astro-intlayer/markdown";
+```
+
+| Exportación           | Tipo       | Descripción                                                              |
+| --------------------- | ---------- | ------------------------------------------------------------------------ |
+| `compileMarkdown`     | `Function` | Compila cadenas markdown en una representación estructurada.             |
+| `renderMarkdown`      | `Function` | Renderiza contenido markdown en nodos de salida.                         |
+| `parseMarkdown`       | `Function` | Analiza contenido markdown en un AST.                                    |
+| `useMarkdown`         | `Hook`     | Hook para obtener el contexto del proveedor de markdown.                 |
+| `useMarkdownRenderer` | `Hook`     | Hook para obtener una función de renderizado de Markdown preconfigurada. |
+
+### Tipos
+
+Importación:
+
+```tsx
+import type {
+  IntlayerLocals,
+  UseLocaleProps,
+  UseLocaleResult,
+} from "astro-intlayer";
+```
+
+| Tipo              | Descripción                                                                                              |
+| ----------------- | -------------------------------------------------------------------------------------------------------- |
+| `IntlayerLocals`  | El objeto adjunto a `Astro.locals.intlayer` que contiene `locale`, `defaultLocale` y `availableLocales`. |
+| `UseLocaleProps`  | Propiedades de configuración opcionales aceptadas por `useLocale()`.                                     |
+| `UseLocaleResult` | El tipo de retorno de `useLocale()`, que proporciona propiedades de locale y métodos de actualización.   |