@intlayer/docs 6.1.5 → 6.1.6-canary.0

package/docs/es/vs_code_extension.md

@@ -1,10 +1,10 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
-title: Extensión Oficial de VS Code
+updatedAt: 2025-09-30
+title: Extensión Oficial para VS Code
 description: Aprende a usar la extensión Intlayer en VS Code para mejorar tu flujo de trabajo de desarrollo. Navega rápidamente entre contenido localizado y gestiona tus diccionarios de manera eficiente.
 keywords:
-  - Extensión de VS Code
+  - Extensión VS Code
   - Intlayer
   - Localización
   - Herramientas de Desarrollo
@@ -17,102 +17,46 @@ slugs:
   - vs-code-extension
 ---
 
-# Extensión Oficial de VS Code
+# Extensión Oficial para VS Code
 
-## Visión General
+## Descripción general
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) es la extensión oficial de Visual Studio Code para **Intlayer**, diseñada para mejorar la experiencia del desarrollador al trabajar con contenido localizado en tus proyectos.
 
-![Extensión Intlayer para VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Extensión Intlayer para VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Enlace de la extensión: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funcionalidades
 
-### Navegación Instantánea
+![Rellenar diccionarios](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Soporte para Ir a la Definición** – Usa `⌘ + Click` (Mac) o `Ctrl + Click` (Windows/Linux) sobre una clave `useIntlayer` para abrir instantáneamente el archivo de contenido correspondiente.  
-**Integración Perfecta** – Funciona sin problemas con proyectos **react-intlayer** y **next-intlayer**.  
-**Soporte Multilingüe** – Soporta contenido localizado en diferentes idiomas.  
-**Integración con VS Code** – Se integra de manera fluida con la navegación y la paleta de comandos de VS Code.
+- **Navegación Instantánea** – Salta rápidamente al archivo de contenido correcto al hacer clic en una clave `useIntlayer`.
+- **Rellenar Diccionarios** – Rellena los diccionarios con contenido de tu proyecto.
 
-### Comandos para la Gestión de Diccionarios
+![Listar comandos](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Gestiona tus diccionarios de contenido directamente desde VS Code:
+- **Acceso fácil a los comandos de Intlayer** – Construye, envía, descarga, rellena y prueba diccionarios de contenido con facilidad.
 
-- **Construir Diccionarios** – Genera archivos de contenido basados en la estructura de tu proyecto.
-- **Subir Diccionarios** – Sube el contenido más reciente del diccionario a tu repositorio.
-- **Descargar Diccionarios** – Sincroniza el contenido más reciente del diccionario desde tu repositorio a tu entorno local.
-- **Rellenar Diccionarios** – Llena los diccionarios con contenido de tu proyecto.
-- **Probar Diccionarios** – Identifica traducciones faltantes o incompletas.
+![Crear archivo de contenido](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### Generador de Declaración de Contenido
+- **Generador de declaración de contenido** – Crea archivos de contenido de diccionario en varios formatos (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Genera fácilmente archivos de diccionario estructurados en diferentes formatos:
+![Probar diccionarios](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Si estás trabajando actualmente en un componente, generará el archivo `.content.{ts,tsx,js,jsx,mjs,cjs,json}` para ti.
+- **Probar diccionarios** – Prueba diccionarios para detectar traducciones faltantes.
 
-Ejemplo de componente:
+![Reconstruir diccionario](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Mantén tus diccionarios actualizados** – Mantén tus diccionarios actualizados con el contenido más reciente de tu proyecto.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Archivo generado en formato TypeScript:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-Formatos disponibles:
-
-- **TypeScript (`.ts`)**
-- **Módulo ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Pestaña Intlayer (Barra de Actividad)
+![Pestaña Intlayer (Barra de Actividad)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Abre la pestaña de Intlayer haciendo clic en el ícono de Intlayer en la Barra de Actividades de VS Code. Contiene dos vistas:
-
-- **Buscar**: Una barra de búsqueda en vivo para filtrar rápidamente los diccionarios y su contenido. Al escribir, los resultados se actualizan instantáneamente.
-- **Diccionarios**: Una vista en árbol de tus entornos/proyectos, claves de diccionario y los archivos que aportan entradas. Puedes:
-  - Hacer clic en un archivo para abrirlo en el editor.
-  - Usar la barra de herramientas para ejecutar acciones: Construir, Extraer (Pull), Enviar (Push), Rellenar, Actualizar, Probar y Crear Archivo de Diccionario.
-  - Usar el menú contextual para acciones específicas del ítem:
-    - En un diccionario: Extraer (Pull) o Enviar (Push)
-    - En un archivo: Rellenar Diccionario
-  - Cuando cambias de editor, el árbol revelará el archivo correspondiente si pertenece a un diccionario.
-
-## Instalación
-
-Puedes instalar **Intlayer** directamente desde el Marketplace de VS Code:
-
-1. Abre **VS Code**.
-2. Ve al **Marketplace de Extensiones**.
-3. Busca **"Intlayer"**.
-4. Haz clic en **Instalar**.
+- **Pestaña Intlayer (Barra de Actividad)** – Navega y busca diccionarios desde una pestaña lateral dedicada con barra de herramientas y acciones contextuales (Construir, Descargar, Enviar, Rellenar, Actualizar, Probar, Crear Archivo).
 
 ## Uso
 
-### Navegación Rápida
+### Navegación rápida
 
 1. Abre un proyecto que use **react-intlayer**.
 2. Localiza una llamada a `useIntlayer()`, como:
@@ -121,63 +65,58 @@ Puedes instalar **Intlayer** directamente desde el Marketplace de VS Code:
    const content = useIntlayer("app");
    ```
 
-3. Haz **Command-click** (`⌘+Click` en macOS) o **Ctrl+Click** (en Windows/Linux) sobre la clave (por ejemplo, `"app"`).
+3. **Haz clic con comando** (`⌘+Click` en macOS) o **Ctrl+Click** (en Windows/Linux) sobre la clave (por ejemplo, `"app"`).
 4. VS Code abrirá automáticamente el archivo de diccionario correspondiente, por ejemplo, `src/app.content.ts`.
 
-### Gestión de Diccionarios de Contenido
-
-### Pestaña Intlayer (Barra de Actividades)
+### Pestaña Intlayer (Barra de Actividad)
 
-Usa la pestaña lateral para explorar y gestionar diccionarios:
+Usa la pestaña lateral para navegar y gestionar diccionarios:
 
-- Abre el ícono de Intlayer en la Barra de Actividades.
+- Abre el ícono de Intlayer en la Barra de Actividad.
 - En **Buscar**, escribe para filtrar diccionarios y entradas en tiempo real.
-- En **Diccionarios**, navega por entornos, diccionarios y archivos. Usa la barra de herramientas para Construir, Extraer, Enviar, Rellenar, Actualizar, Probar y Crear Archivo de Diccionario. Haz clic derecho para acciones contextuales (Extraer/Enviar en diccionarios, Rellenar en archivos). El archivo actual del editor se revela automáticamente en el árbol cuando es aplicable.
+- En **Diccionarios**, navega por entornos, diccionarios y archivos. Usa la barra de herramientas para Construir, Extraer (Pull), Enviar (Push), Rellenar, Actualizar, Probar y Crear Archivo de Diccionario. Haz clic derecho para acciones contextuales (Extraer/Enviar en diccionarios, Rellenar en archivos). El archivo actual del editor se revela automáticamente en el árbol cuando es aplicable.
 
-#### Construcción de Diccionarios
+### Acceso a los comandos
 
-Genera todos los archivos de contenido del diccionario con:
+Puedes acceder a los comandos desde la **Paleta de Comandos**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Busca **Construir Diccionarios** y ejecuta el comando.
-
-#### Envío de Diccionarios
-
-Sube el contenido más reciente del diccionario:
-
-1. Abre la **Paleta de Comandos**.
-2. Busca **Enviar Diccionarios**.
-3. Selecciona los diccionarios a enviar y confirma.
-
-#### Extracción de Diccionarios
+- **Construir Diccionarios**
+- **Enviar Diccionarios**
+- **Obtener Diccionarios**
+- **Rellenar Diccionarios**
+- **Probar Diccionarios**
+- **Crear Archivo de Diccionario**
 
-Sincroniza el contenido más reciente del diccionario:
+### Carga de Variables de Entorno
 
-1. Abre la **Paleta de Comandos**.
-2. Busca **Extraer Diccionarios**.
-3. Elige los diccionarios que deseas extraer.
+Intlayer recomienda almacenar tus claves API de IA, así como el ID y secreto del cliente de Intlayer en variables de entorno.
 
-#### Rellenar Diccionarios
+La extensión puede cargar variables de entorno desde tu espacio de trabajo para ejecutar comandos de Intlayer con el contexto correcto.
 
-Rellena los diccionarios con contenido de tu proyecto:
+- **Orden de carga (por prioridad)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **No destructivo**: los valores existentes en `process.env` no son sobrescritos.
+- **Alcance**: los archivos se resuelven desde el directorio base configurado (por defecto la raíz del espacio de trabajo).
 
-1. Abre la **Paleta de Comandos**.
-2. Busca **Rellenar Diccionarios**.
-3. Ejecuta el comando para poblar los diccionarios.
+#### Selección del entorno activo
 
-#### Probar Diccionarios
+- **Paleta de Comandos**: abre la paleta y ejecuta `Intlayer: Select Environment`, luego elige el entorno (por ejemplo, `development`, `staging`, `production`). La extensión intentará cargar el primer archivo disponible en la lista de prioridad mencionada y mostrará una notificación como “Entorno cargado desde .env.<env>.local”.
+- **Configuración**: ve a `Settings → Extensions → Intlayer`, y configura:
+  - **Environment**: el nombre del entorno usado para resolver archivos `.env.<env>*`.
+  - (Opcional) **Env File**: una ruta explícita a un archivo `.env`. Cuando se proporciona, tiene prioridad sobre la lista inferida.
 
-Valida los diccionarios y encuentra traducciones faltantes:
+#### Monorepos y directorios personalizados
 
-1. Abre la **Paleta de Comandos**.
-2. Busca **Probar Diccionarios**.
-3. Revisa los problemas reportados y corrígelos según sea necesario.
+Si tus archivos `.env` están fuera de la raíz del espacio de trabajo, configura el **Directorio Base** en `Configuración → Extensiones → Intlayer`. El cargador buscará los archivos `.env` relativos a ese directorio.
 
-## Historial del Documento
+## Historial de Documentación
 
-| Versión | Fecha      | Cambios           |
-| ------- | ---------- | ----------------- |
-| 5.5.10  | 2025-06-29 | Historial inicial |
+| Versión | Fecha      | Cambios                                       |
+| ------- | ---------- | --------------------------------------------- |
+| 6.1.5   | 2025-09-30 | Añadido gif de demostración                   |
+| 6.1.0   | 2025-09-24 | Añadida sección de selección de entorno       |
+| 6.0.0   | 2025-09-22 | Pestaña Intlayer / Comandos Rellenar y Probar |
+| 5.5.10  | 2025-06-29 | Historial inicial                             |

package/docs/fr/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Rendre un composant multilingue (i18n) en React et Next.js
+description: Apprenez à déclarer et récupérer du contenu localisé pour créer un composant React ou Next.js multilingue avec Intlayer.
+keywords:
+  - i18n
+  - composant
+  - react
+  - multilingue
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Comment rendre un composant multilingue (i18n) avec Intlayer
+
+Ce guide montre les étapes minimales pour rendre un composant d'interface utilisateur multilingue dans deux configurations courantes :
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Vous commencerez par déclarer votre contenu, puis vous le récupérerez dans votre composant.
+
+## 1) Déclarez votre contenu (partagé pour React et Next.js)
+
+Créez un fichier de déclaration de contenu à proximité de votre composant. Cela permet de garder les traductions proches de leur utilisation et assure la sécurité des types.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+Le JSON est également supporté si vous préférez les fichiers de configuration.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) Récupérez votre contenu
+
+### Cas A — Application React (Vite/SPA)
+
+Approche par défaut : utilisez `useIntlayer` pour récupérer par clé. Cela permet de garder les composants légers et typés.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Rendu côté serveur ou hors du provider : utilisez `react-intlayer/server` et passez un `locale` explicite si nécessaire.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+Alternative : `useDictionary` peut lire un objet déclaré en entier si vous préférez regrouper la structure au point d'appel.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### Cas B — Next.js (App Router)
+
+Privilégiez les composants serveur pour la sécurité des données et la performance. Utilisez `useIntlayer` depuis `next-intlayer/server` dans les fichiers serveur, et `useIntlayer` depuis `next-intlayer` dans les composants clients.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Astuce : Pour les métadonnées de page et le SEO, vous pouvez également récupérer le contenu en utilisant `getIntlayer` et générer des URLs multilingues via `getMultilingualUrls`.
+
+## Pourquoi l’approche composant d’Intlayer est la meilleure
+
+- **Collocation** : Les déclarations de contenu vivent à proximité des composants, réduisant les dérives et améliorant la réutilisation à travers les systèmes de design.
+- **Sécurité des types** : Les clés et structures sont fortement typées ; les traductions manquantes apparaissent à la compilation plutôt qu’à l’exécution.
+- **Serveur d'abord** : Fonctionne nativement dans les composants serveur pour une meilleure sécurité et performance ; les hooks client restent ergonomiques.
+- **Tree-shaking** : Seul le contenu utilisé par le composant est inclus, ce qui maintient les charges utiles légères dans les grandes applications.
+- **Expérience développeur & outils** : Middleware intégré, assistants SEO, et traductions optionnelles via éditeur visuel/IA facilitent le travail quotidien.
+
+Consultez les comparaisons et les modèles dans le résumé axé sur Next.js : https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Guides et références associés
+
+- Configuration React (Vite) : https://intlayer.org/doc/environment/vite-and-react
+- React Router v7 : https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- Démarrage TanStack : https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Configuration Next.js : https://intlayer.org/doc/environment/nextjs
+- Pourquoi Intlayer vs. next-intl vs. next-i18next : https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Ces pages incluent la configuration de bout en bout, les fournisseurs, le routage et les assistants SEO.

package/docs/fr/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Extension officielle VS Code
-description: Apprenez à utiliser l'extension Intlayer dans VS Code pour améliorer votre flux de développement. Naviguez rapidement entre les contenus localisés et gérez efficacement vos dictionnaires.
+description: Apprenez à utiliser l'extension Intlayer dans VS Code pour améliorer votre flux de travail de développement. Naviguez rapidement entre les contenus localisés et gérez efficacement vos dictionnaires.
 keywords:
   - Extension VS Code
   - Intlayer
@@ -19,165 +19,104 @@ slugs:
 
 # Extension officielle VS Code
 
-## Vue d'ensemble
+## Aperçu
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) est l'extension officielle Visual Studio Code pour **Intlayer**, conçue pour améliorer l'expérience développeur lors du travail avec du contenu localisé dans vos projets.
 
-![Extension Intlayer VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Extension Intlayer VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Lien de l'extension : [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Fonctionnalités
 
-### Navigation instantanée
+![Remplir les dictionnaires](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Support de Aller à la définition** – Utilisez `⌘ + Clic` (Mac) ou `Ctrl + Clic` (Windows/Linux) sur une clé `useIntlayer` pour ouvrir instantanément le fichier de contenu correspondant.  
-**Intégration transparente** – Fonctionne sans effort avec les projets **react-intlayer** et **next-intlayer**.  
-**Support multilingue** – Prend en charge le contenu localisé dans différentes langues.  
-**Intégration VS Code** – S'intègre parfaitement à la navigation et à la palette de commandes de VS Code.
-
-### Commandes de gestion des dictionnaires
-
-Gérez vos dictionnaires de contenu directement depuis VS Code :
-
-- **Construire les dictionnaires** – Générez des fichiers de contenu basés sur la structure de votre projet.
-- **Pousser les dictionnaires** – Téléchargez le contenu le plus récent des dictionnaires vers votre dépôt.
-- **Tirer les dictionnaires** – Synchronisez le contenu le plus récent des dictionnaires depuis votre dépôt vers votre environnement local.
+- **Navigation instantanée** – Accédez rapidement au fichier de contenu correct en cliquant sur une clé `useIntlayer`.
 - **Remplir les dictionnaires** – Remplissez les dictionnaires avec le contenu de votre projet.
-- **Tester les dictionnaires** – Identifiez les traductions manquantes ou incomplètes.
-
-### Générateur de déclaration de contenu
-
-Générez facilement des fichiers de dictionnaire structurés dans différents formats :
-
-Si vous travaillez actuellement sur un composant, il générera pour vous le fichier `.content.{ts,tsx,js,jsx,mjs,cjs,json}`.
-
-Exemple de composant :
-
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
 
-Fichier généré au format TypeScript :
+![Liste des commandes](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+- **Accès facile aux commandes Intlayer** – Construisez, poussez, tirez, remplissez, testez les dictionnaires de contenu en toute simplicité.
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+![Créer un fichier de contenu](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-export default componentContent;
-```
-
-Formats disponibles :
+- **Générateur de déclaration de contenu** – Créez des fichiers de contenu de dictionnaire dans divers formats (`.ts`, `.esm`, `.cjs`, `.json`).
 
-- **TypeScript (`.ts`)**
-- **Module ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
+![Tester les dictionnaires](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-### Onglet Intlayer (Barre d'activité)
+- **Tester les dictionnaires** – Testez les dictionnaires pour détecter les traductions manquantes.
 
-Ouvrez l’onglet Intlayer en cliquant sur l’icône Intlayer dans la barre d’activités de VS Code. Il contient deux vues :
+![Reconstruire le dictionnaire](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-- **Recherche** : Une barre de recherche en direct pour filtrer rapidement les dictionnaires et leur contenu. La saisie met à jour les résultats instantanément.
-- **Dictionnaires** : Une vue arborescente de vos environnements/projets, des clés de dictionnaire, et des fichiers contribuant aux entrées. Vous pouvez :
-  - Cliquer sur un fichier pour l’ouvrir dans l’éditeur.
-  - Utiliser la barre d’outils pour exécuter des actions : Construire, Pull, Push, Remplir, Actualiser, Tester, et Créer un fichier de dictionnaire.
-  - Utiliser le menu contextuel pour des actions spécifiques à l’élément :
-    - Sur un dictionnaire : Pull ou Push
-    - Sur un fichier : Remplir le dictionnaire
-  - Lorsque vous changez d’éditeur, l’arborescence révélera le fichier correspondant s’il appartient à un dictionnaire.
+- **Gardez vos dictionnaires à jour** – Maintenez vos dictionnaires à jour avec le contenu le plus récent de votre projet.
 
-## Installation
+![Onglet Intlayer (Barre d'activité)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Vous pouvez installer **Intlayer** directement depuis le Marketplace de VS Code :
-
-1. Ouvrez **VS Code**.
-2. Allez dans le **Marketplace des extensions**.
-3. Recherchez **"Intlayer"**.
-4. Cliquez sur **Installer**.
+- **Onglet Intlayer (Barre d'activité)** – Parcourez et recherchez les dictionnaires depuis un onglet latéral dédié avec une barre d'outils et des actions contextuelles (Construire, Tirer, Pousser, Remplir, Actualiser, Tester, Créer un fichier).
 
 ## Utilisation
 
 ### Navigation rapide
 
 1. Ouvrez un projet utilisant **react-intlayer**.
-2. Localisez un appel à `useIntlayer()`, par exemple :
+2. Localisez un appel à `useIntlayer()`, tel que :
 
    ```tsx
    const content = useIntlayer("app");
    ```
 
-3. **Command-clic** (`⌘+Click` sur macOS) ou **Ctrl-clic** (sur Windows/Linux) sur la clé (par exemple, `"app"`).
-4. VS Code ouvrira automatiquement le fichier de dictionnaire correspondant, par exemple `src/app.content.ts`.
-
-### Gestion des dictionnaires de contenu
+3. **Cliquez avec la commande** (`⌘+Click` sur macOS) ou **Ctrl+Click** (sur Windows/Linux) sur la clé (par exemple, `"app"`).
+4. VS Code ouvrira automatiquement le fichier de dictionnaire correspondant, par exemple, `src/app.content.ts`.
 
-### Onglet Intlayer (Barre d’activités)
+### Onglet Intlayer (Barre d'activité)
 
-Utilisez l’onglet latéral pour parcourir et gérer les dictionnaires :
+Utilisez l'onglet latéral pour parcourir et gérer les dictionnaires :
 
-- Ouvrez l’icône Intlayer dans la barre d’activités.
+- Ouvrez l'icône Intlayer dans la Barre d'activité.
 - Dans **Recherche**, tapez pour filtrer les dictionnaires et les entrées en temps réel.
-- Dans **Dictionnaires**, parcourez les environnements, les dictionnaires et les fichiers. Utilisez la barre d’outils pour Construire, Tirer, Pousser, Remplir, Actualiser, Tester et Créer un fichier de dictionnaire. Faites un clic droit pour les actions contextuelles (Tirer/Pousser sur les dictionnaires, Remplir sur les fichiers). Le fichier actuellement ouvert dans l’éditeur se révèle automatiquement dans l’arborescence lorsque c’est applicable.
+- Dans **Dictionnaires**, parcourez les environnements, dictionnaires et fichiers. Utilisez la barre d'outils pour Construire, Tirer, Pousser, Remplir, Actualiser, Tester et Créer un fichier de dictionnaire. Cliquez avec le bouton droit pour les actions contextuelles (Tirer/Pousser sur les dictionnaires, Remplir sur les fichiers). Le fichier actuel de l'éditeur se révèle automatiquement dans l'arborescence lorsque c'est applicable.
 
-#### Construction des dictionnaires
+### Accéder aux commandes
 
-Générez tous les fichiers de contenu des dictionnaires avec :
+Vous pouvez accéder aux commandes depuis la **Palette de commandes**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Recherchez **Construire les dictionnaires** et exécutez la commande.
-
-#### Pousser les dictionnaires
-
-Téléchargez le contenu le plus récent des dictionnaires :
-
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Pousser les dictionnaires**.
-3. Sélectionnez les dictionnaires à pousser et confirmez.
-
-#### Tirer les dictionnaires
+- **Construire les dictionnaires**
+- **Pousser les dictionnaires**
+- **Tirer les dictionnaires**
+- **Remplir les dictionnaires**
+- **Tester les dictionnaires**
+- **Créer un fichier de dictionnaire**
 
-Synchronisez le contenu le plus récent des dictionnaires :
+### Chargement des variables d'environnement
 
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Pull Dictionaries**.
-3. Choisissez les dictionnaires à synchroniser.
+Intlayer recommande de stocker vos clés API d'IA, ainsi que l'ID client et le secret Intlayer dans des variables d'environnement.
 
-#### Remplissage des dictionnaires
+L'extension peut charger les variables d'environnement depuis votre espace de travail pour exécuter les commandes Intlayer avec le contexte correct.
 
-Remplissez les dictionnaires avec le contenu de votre projet :
+- **Ordre de chargement (par priorité)** : `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Non destructif** : les valeurs existantes de `process.env` ne sont pas écrasées.
+- **Portée** : les fichiers sont résolus à partir du répertoire de base configuré (par défaut la racine de l'espace de travail).
 
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Fill Dictionaries**.
-3. Exécutez la commande pour peupler les dictionnaires.
+#### Sélection de l'environnement actif
 
-#### Test des dictionnaires
+- **Palette de commandes** : ouvrez la palette et exécutez `Intlayer : Sélectionner l’environnement`, puis choisissez l’environnement (par exemple, `development`, `staging`, `production`). L’extension tentera de charger le premier fichier disponible dans la liste de priorité ci-dessus et affichera une notification comme « Environnement chargé depuis .env.<env>.local ».
+- **Paramètres** : allez dans `Paramètres → Extensions → Intlayer`, et configurez :
+  - **Environnement** : le nom de l’environnement utilisé pour résoudre les fichiers `.env.<env>*`.
+  - (Optionnel) **Fichier Env** : un chemin explicite vers un fichier `.env`. Lorsqu’il est fourni, il prend le pas sur la liste déduite.
 
-Validez les dictionnaires et trouvez les traductions manquantes :
+#### Monorepos et répertoires personnalisés
 
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Test Dictionaries**.
-3. Passez en revue les problèmes signalés et corrigez-les si nécessaire.
+Si vos fichiers `.env` se trouvent en dehors de la racine de l’espace de travail, définissez le **Répertoire de base** dans `Paramètres → Extensions → Intlayer`. Le chargeur recherchera les fichiers `.env` relatifs à ce répertoire.
 
 ## Historique de la documentation
 
-| Version | Date       | Modifications      |
-| ------- | ---------- | ------------------ |
-| 5.5.10  | 2025-06-29 | Historique initial |
+| Version | Date       | Modifications                                       |
+| ------- | ---------- | --------------------------------------------------- |
+| 6.1.5   | 2025-09-30 | Ajout d’un gif de démonstration                     |
+| 6.1.0   | 2025-09-24 | Ajout de la section de sélection de l’environnement |
+| 6.0.0   | 2025-09-22 | Onglet Intlayer / Commandes Remplir & Tester        |
+| 5.5.10  | 2025-06-29 | Historique initial                                  |