@intlayer/docs 6.1.4 → 6.1.6-canary.0

package/docs/hi/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: आधिकारिक VS कोड एक्सटेंशन
-description: अपने विकास वर्कफ़्लो को बेहतर बनाने के लिए VS कोड में Intlayer एक्सटेंशन का उपयोग करना सीखें। स्थानीयकृत सामग्री के बीच तेजी से नेविगेट करें और अपनी शब्दकोशों का कुशलतापूर्वक प्रबंधन करें।
+description: अपने विकास वर्कफ़्लो को बेहतर बनाने के लिए VS कोड में Intlayer एक्सटेंशन का उपयोग कैसे करें, यह जानें। स्थानीयकृत सामग्री के बीच तेजी से नेविगेट करें और अपनी शब्दकोशों का कुशलतापूर्वक प्रबंधन करें।
 keywords:
   - VS कोड एक्सटेंशन
   - Intlayer
@@ -23,92 +23,36 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) **Intlayer** के लिए आधिकारिक विजुअल स्टूडियो कोड एक्सटेंशन है, जिसे आपके प्रोजेक्ट्स में स्थानीयकृत सामग्री के साथ काम करते समय डेवलपर अनुभव को बेहतर बनाने के लिए डिज़ाइन किया गया है।
 
-![Intlayer VS कोड एक्सटेंशन](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS कोड एक्सटेंशन](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 एक्सटेंशन लिंक: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## विशेषताएँ
 
-### त्वरित नेविगेशन
-
-**परिभाषा पर जाएं समर्थन** – `useIntlayer` कुंजी पर `⌘ + क्लिक` (Mac) या `Ctrl + क्लिक` (Windows/Linux) का उपयोग करें ताकि संबंधित सामग्री फ़ाइल तुरंत खुल जाए।  
-**सहज एकीकरण** – **react-intlayer** और **next-intlayer** प्रोजेक्ट्स के साथ बिना किसी परेशानी के काम करता है।  
-**बहुभाषी समर्थन** – विभिन्न भाषाओं में स्थानीयकृत सामग्री का समर्थन करता है।  
-**VS कोड एकीकरण** – VS कोड के नेविगेशन और कमांड पैलेट के साथ सहजता से एकीकृत होता है।
-
-### शब्दकोश प्रबंधन कमांड
-
-अपने कंटेंट शब्दकोशों का सीधे VS कोड से प्रबंधन करें:
-
-- **शब्दकोश बनाएँ** – अपने प्रोजेक्ट संरचना के आधार पर कंटेंट फ़ाइलें उत्पन्न करें।
-- **शब्दकोश पुश करें** – नवीनतम शब्दकोश सामग्री को अपने रिपॉजिटरी में अपलोड करें।
-- **शब्दकोश पुल करें** – अपने रिपॉजिटरी से नवीनतम शब्दकोश सामग्री को अपने स्थानीय पर्यावरण में सिंक करें।
-- **शब्दकोश भरें** – अपने प्रोजेक्ट से सामग्री के साथ शब्दकोशों को भरें।
-- **शब्दकोश परीक्षण करें** – गुम या अधूरी अनुवादों की पहचान करें।
+![शब्दकोश भरें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-### कंटेंट घोषणा जनरेटर
+- **तत्काल नेविगेशन** – `useIntlayer` कुंजी पर क्लिक करने पर सही सामग्री फ़ाइल पर तेजी से जाएं।
+- **शब्दकोश भरें** – अपने प्रोजेक्ट की सामग्री से शब्दकोश भरें।
 
-आसानी से विभिन्न प्रारूपों में संरचित शब्दकोश फ़ाइलें उत्पन्न करें:
+![कमांड सूची](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-यदि आप वर्तमान में किसी कॉम्पोनेंट पर काम कर रहे हैं, तो यह आपके लिए `.content.{ts,tsx,js,jsx,mjs,cjs,json}` फ़ाइल उत्पन्न करेगा।
+- **Intlayer कमांड्स तक आसान पहुँच** – सामग्री शब्दकोशों को आसानी से बनाएं, पुश करें, पुल करें, भरें, और परीक्षण करें।
 
-कॉम्पोनेंट का उदाहरण:
+![सामग्री फ़ाइल बनाएँ](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **सामग्री घोषणा जनरेटर** – विभिन्न स्वरूपों (`.ts`, `.esm`, `.cjs`, `.json`) में शब्दकोश सामग्री फ़ाइलें बनाएं।
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-TypeScript प्रारूप में उत्पन्न फ़ाइल:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+![शब्दकोशों का परीक्षण करें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
+- **शब्दकोश परीक्षण** – लापता अनुवादों के लिए शब्दकोशों का परीक्षण करें।
 
-उपलब्ध प्रारूप:
+![शब्दकोश पुनर्निर्माण करें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-- **TypeScript (`.ts`)**
-- **ES मॉड्यूल (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
+- **अपने शब्दकोशों को अद्यतित रखें** – अपने प्रोजेक्ट की नवीनतम सामग्री के साथ अपने शब्दकोशों को अद्यतित रखें।
 
-### Intlayer टैब (एक्टिविटी बार)
+![Intlayer टैब (गतिविधि बार)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-VS कोड एक्टिविटी बार में Intlayer आइकन पर क्लिक करके Intlayer टैब खोलें। इसमें दो दृश्य होते हैं:
-
-- **खोज**: एक लाइव खोज बार जो शब्दकोशों और उनके कंटेंट को जल्दी से फ़िल्टर करता है। टाइप करते ही परिणाम तुरंत अपडेट हो जाते हैं।
-- **शब्दकोश**: आपके एनवायरनमेंट/प्रोजेक्ट्स, शब्दकोश कुंजियों, और प्रविष्टियाँ देने वाली फ़ाइलों का एक ट्री व्यू। आप:
-  - किसी फ़ाइल पर क्लिक करके उसे एडिटर में खोल सकते हैं।
-  - टूलबार का उपयोग करके ये क्रियाएँ चला सकते हैं: Build, Pull, Push, Fill, Refresh, Test, और Create Dictionary File।
-  - आइटम-विशिष्ट क्रियाओं के लिए संदर्भ मेनू का उपयोग करें:
-    - किसी शब्दकोश पर: Pull या Push
-    - किसी फ़ाइल पर: Fill Dictionary
-  - जब आप एडिटर स्विच करते हैं, तो ट्री उस मेल खाने वाली फ़ाइल को दिखाएगा यदि वह किसी शब्दकोश से संबंधित हो।
-
-## स्थापना
-
-आप सीधे VS Code मार्केटप्लेस से **Intlayer** इंस्टॉल कर सकते हैं:
-
-1. **VS Code** खोलें।
-2. **Extensions Marketplace** पर जाएं।
-3. **"Intlayer"** खोजें।
-4. **Install** पर क्लिक करें।
+- **Intlayer टैब (गतिविधि बार)** – समर्पित साइड टैब से टूलबार और संदर्भ क्रियाओं (बिल्ड, पुल, पुश, फिल, रिफ्रेश, टेस्ट, फ़ाइल बनाएँ) के साथ शब्दकोश ब्राउज़ और खोजें।
 
 ## उपयोग
 
@@ -121,63 +65,58 @@ VS कोड एक्टिविटी बार में Intlayer आइक
    const content = useIntlayer("app");
    ```
 
-3. कुंजी (जैसे `"app"`) पर **Command-click** (`⌘+Click` macOS पर) या **Ctrl+Click** (Windows/Linux पर) करें।
-4. VS Code स्वचालित रूप से संबंधित शब्दकोश फ़ाइल खोल देगा, जैसे `src/app.content.ts`।
-
-### कंटेंट शब्दकोश प्रबंधन
+3. कुंजी (जैसे, `"app"`) पर **कमांड-क्लिक** (`⌘+Click` macOS पर) या **Ctrl+Click** (Windows/Linux पर) करें।
+4. VS Code स्वचालित रूप से संबंधित शब्दकोश फ़ाइल खोलेगा, जैसे `src/app.content.ts`।
 
-### Intlayer टैब (एक्टिविटी बार)
+### Intlayer टैब (गतिविधि बार)
 
 शब्दकोशों को ब्राउज़ और प्रबंधित करने के लिए साइड टैब का उपयोग करें:
 
-- एक्टिविटी बार में Intlayer आइकन खोलें।
-- **Search** में, वास्तविक समय में शब्दकोश और प्रविष्टियों को फ़िल्टर करने के लिए टाइप करें।
-- **Dictionaries** में, पर्यावरण, शब्दकोश, और फ़ाइलों को ब्राउज़ करें। टूलबार का उपयोग करें Build, Pull, Push, Fill, Refresh, Test, और Create Dictionary File के लिए। संदर्भ क्रियाओं के लिए राइट-क्लिक करें (शब्दकोशों पर Pull/Push, फ़ाइलों पर Fill)। जब लागू हो, तो वर्तमान संपादक फ़ाइल स्वचालित रूप से ट्री में प्रकट होती है।
+- गतिविधि बार में Intlayer आइकन खोलें।
+- **Search** में, वास्तविक समय में शब्दकोशों और प्रविष्टियों को फ़िल्टर करने के लिए टाइप करें।
+- **Dictionaries** में, पर्यावरण, शब्दकोश, और फ़ाइलों को ब्राउज़ करें। टूलबार का उपयोग करें जैसे Build, Pull, Push, Fill, Refresh, Test, और Create Dictionary File के लिए। संदर्भ क्रियाओं के लिए राइट-क्लिक करें (शब्दकोशों पर Pull/Push, फ़ाइलों पर Fill)। जब लागू हो, तो वर्तमान संपादक फ़ाइल स्वचालित रूप से पेड़ में प्रकट होती है।
 
-#### शब्दकोश बनाना
+### कमांड्स तक पहुँच
 
-सभी शब्दकोश सामग्री फ़ाइलें उत्पन्न करें:
+आप **Command Palette** से कमांड्स तक पहुँच सकते हैं।
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-**Build Dictionaries** खोजें और कमांड निष्पादित करें।
-
-#### शब्दकोश पुश करना
-
-नवीनतम शब्दकोश सामग्री अपलोड करें:
-
-1. **Command Palette** खोलें।
-2. **Push Dictionaries** खोजें।
-3. पुश करने के लिए शब्दकोश चुनें और पुष्टि करें।
-
-#### शब्दकोश पुल करना
+- **शब्दकोश बनाएं (Build Dictionaries)**
+- **शब्दकोश पुश करें (Push Dictionaries)**
+- **शब्दकोश पुल करें (Pull Dictionaries)**
+- **शब्दकोश भरें (Fill Dictionaries)**
+- **शब्दकोश परीक्षण करें (Test Dictionaries)**
+- **शब्दकोश फ़ाइल बनाएँ (Create Dictionary File)**
 
-नवीनतम शब्दकोश सामग्री सिंक करें:
+### पर्यावरण चर लोड करना
 
-1. **Command Palette** खोलें।
-2. **Pull Dictionaries** खोजें।
-3. पुल करने के लिए शब्दकोश चुनें।
+Intlayer सुझाव देता है कि आप अपने AI API कुंजी, साथ ही Intlayer क्लाइंट ID और सीक्रेट को पर्यावरण चर में संग्रहीत करें।
 
-#### शब्दकोश भरना
+एक्सटेंशन आपके वर्कस्पेस से पर्यावरण चर लोड कर सकता है ताकि Intlayer कमांड सही संदर्भ के साथ चल सकें।
 
-अपने प्रोजेक्ट की सामग्री से शब्दकोश भरें:
+- **लोड क्रम (प्राथमिकता के अनुसार)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **गैर-विनाशकारी**: मौजूदा `process.env` मानों को अधिलेखित नहीं किया जाता है।
+- **स्कोप**: फ़ाइलें कॉन्फ़िगर किए गए बेस डायरेक्टरी से हल की जाती हैं (डिफ़ॉल्ट वर्कस्पेस रूट)।
 
-1. **Command Palette** खोलें।
-2. **Fill Dictionaries** खोजें।
-3. शब्दकोश भरने के लिए कमांड चलाएं।
+#### सक्रिय पर्यावरण का चयन करना
 
-#### शब्दकोश परीक्षण
+- **कमांड पैलेट**: पैलेट खोलें और `Intlayer: Select Environment` चलाएं, फिर पर्यावरण चुनें (जैसे, `development`, `staging`, `production`)। एक्सटेंशन प्राथमिकता सूची में उपलब्ध पहली फ़ाइल लोड करने का प्रयास करेगा और “Loaded env from .env.<env>.local” जैसी सूचना दिखाएगा।
+- **सेटिंग्स**: `Settings → Extensions → Intlayer` पर जाएं, और सेट करें:
+  - **पर्यावरण**: वह पर्यावरण नाम जिसका उपयोग `.env.<env>*` फ़ाइलों को हल करने के लिए किया जाता है।
+  - (वैकल्पिक) **Env फ़ाइल**: `.env` फ़ाइल का स्पष्ट पथ। जब प्रदान किया जाता है, तो यह अनुमानित सूची पर प्राथमिकता लेता है।
 
-शब्दकोशों को मान्य करें और गायब अनुवाद खोजें:
+#### मोनोरिपोज़ और कस्टम निर्देशिकाएँ
 
-1. **Command Palette** खोलें।
-2. **Test Dictionaries** खोजें।
-3. रिपोर्ट की गई समस्याओं की समीक्षा करें और आवश्यकतानुसार सुधार करें।
+यदि आपकी `.env` फ़ाइलें वर्कस्पेस रूट के बाहर स्थित हैं, तो `Settings → Extensions → Intlayer` में **Base Directory** सेट करें। लोडर उस निर्देशिका के सापेक्ष `.env` फ़ाइलों को खोजेगा।
 
 ## दस्तावेज़ इतिहास
 
-| संस्करण | तिथि       | परिवर्तन       |
-| ------- | ---------- | -------------- |
-| 5.5.10  | 2025-06-29 | इतिहास प्रारंभ |
+| संस्करण | तिथि       | परिवर्तन                           |
+| ------- | ---------- | ---------------------------------- |
+| 6.1.5   | 2025-09-30 | डेमो GIF जोड़ा                     |
+| 6.1.0   | 2025-09-24 | पर्यावरण चयन अनुभाग जोड़ा          |
+| 6.0.0   | 2025-09-22 | Intlayer टैब / Fill & Test कमांड्स |
+| 5.5.10  | 2025-06-29 | प्रारंभिक इतिहास                   |

package/docs/it/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Rendere un componente multilingue (libreria i18n) in React e Next.js
+description: Impara come dichiarare e recuperare contenuti localizzati per costruire un componente React o Next.js multilingue con Intlayer.
+keywords:
+  - i18n
+  - componente
+  - 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
+---
+
+# Come rendere un componente multilingue (i18n) con Intlayer
+
+Questa guida mostra i passaggi minimi per rendere un componente UI multilingue in due configurazioni comuni:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Per prima cosa dichiarerai il tuo contenuto, poi lo recupererai nel tuo componente.
+
+## 1) Dichiara il tuo contenuto (condiviso per React e Next.js)
+
+Crea un file di dichiarazione del contenuto vicino al tuo componente. Questo mantiene le traduzioni vicine al punto in cui vengono utilizzate e consente la sicurezza dei tipi.
+
+```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;
+```
+
+Anche JSON è supportato se preferisci i file di configurazione.
+
+```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) Recupera il tuo contenuto
+
+### Caso A — App React (Vite/SPA)
+
+Approccio predefinito: usa `useIntlayer` per recuperare tramite chiave. Questo mantiene i componenti leggeri e tipizzati.
+
+```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>
+  );
+}
+```
+
+Rendering lato server o fuori dal provider: usa `react-intlayer/server` e passa un `locale` esplicito quando necessario.
+
+```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>
+    </>
+  );
+}
+```
+
+Alternativa: `useDictionary` può leggere un intero oggetto dichiarato se preferisci collocare la struttura nel punto di chiamata.
+
+```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>
+  );
+}
+```
+
+### Caso B — Next.js (App Router)
+
+Preferisci i componenti server per sicurezza dei dati e prestazioni. Usa `useIntlayer` da `next-intlayer/server` nei file server, e `useIntlayer` da `next-intlayer` nei componenti client.
+
+```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>
+  );
+}
+```
+
+Suggerimento: Per i metadata della pagina e la SEO, puoi anche recuperare contenuti usando `getIntlayer` e generare URL multilingue tramite `getMultilingualUrls`.
+
+## Perché l’approccio a componenti di Intlayer è il migliore
+
+- **Collocazione**: Le dichiarazioni di contenuto vivono vicino ai componenti, riducendo la deriva e migliorando il riutilizzo nei sistemi di design.
+- **Sicurezza dei tipi**: Chiavi e strutture sono fortemente tipizzate; le traduzioni mancanti emergono in fase di build anziché a runtime.
+- **Server-first**: Funziona nativamente nei componenti server per una migliore sicurezza e prestazioni; gli hook client rimangono ergonomici.
+- **Tree-shaking**: Viene incluso solo il contenuto utilizzato dal componente, mantenendo i payload piccoli nelle grandi applicazioni.
+- **DX e strumenti**: Middleware integrati, helper SEO e traduzioni opzionali con Visual Editor/AI semplificano il lavoro quotidiano.
+
+Consulta i confronti e i modelli nel riepilogo focalizzato su Next.js: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Guide e riferimenti correlati
+
+- Configurazione React (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Configurazione Next.js: https://intlayer.org/doc/environment/nextjs
+- Perché Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Queste pagine includono la configurazione end-to-end, i provider, il routing e gli helper SEO.

package/docs/it/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Estensione Ufficiale per VS Code
-description: Scopri come utilizzare l'estensione Intlayer in VS Code per migliorare il tuo flusso di lavoro di sviluppo. Naviga rapidamente tra contenuti localizzati e gestisci i tuoi dizionari in modo efficiente.
+description: Scopri come utilizzare l'estensione Intlayer in VS Code per migliorare il tuo flusso di lavoro di sviluppo. Naviga rapidamente tra i contenuti localizzati e gestisci i tuoi dizionari in modo efficiente.
 keywords:
   - Estensione VS Code
   - Intlayer
@@ -23,96 +23,40 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) è l'estensione ufficiale di Visual Studio Code per **Intlayer**, progettata per migliorare l'esperienza dello sviluppatore quando si lavora con contenuti localizzati nei tuoi progetti.
 
-![Estensione Intlayer per VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Estensione Intlayer per VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Link all'estensione: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funzionalità
 
-### Navigazione Istantanea
+![Riempi dizionari](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Supporto Vai alla Definizione** – Usa `⌘ + Click` (Mac) o `Ctrl + Click` (Windows/Linux) su una chiave `useIntlayer` per aprire immediatamente il file di contenuto corrispondente.  
-**Integrazione Perfetta** – Funziona senza problemi con i progetti **react-intlayer** e **next-intlayer**.  
-**Supporto Multilingue** – Supporta contenuti localizzati in diverse lingue.  
-**Integrazione con VS Code** – Si integra fluidamente con la navigazione e la palette dei comandi di VS Code.
+- **Navigazione Istantanea** – Passa rapidamente al file di contenuto corretto cliccando su una chiave `useIntlayer`.
+- **Riempi Dizionari** – Riempi i dizionari con i contenuti del tuo progetto.
 
-### Comandi per la Gestione dei Dizionari
+![Elenca comandi](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Gestisci i tuoi dizionari di contenuti direttamente da VS Code:
+- **Accesso facile ai comandi Intlayer** – Costruisci, invia, scarica, riempi, testa i dizionari di contenuti con facilità.
 
-- **Costruisci Dizionari** – Genera file di contenuto basati sulla struttura del tuo progetto.
-- **Carica Dizionari** – Carica l'ultimo contenuto del dizionario nel tuo repository.
-- **Scarica Dizionari** – Sincronizza l'ultimo contenuto del dizionario dal tuo repository al tuo ambiente locale.
-- **Riempi Dizionari** – Popola i dizionari con contenuti dal tuo progetto.
-- **Testa Dizionari** – Identifica traduzioni mancanti o incomplete.
+![Crea file di contenuto](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### Generatore di Dichiarazioni di Contenuto
+- **Generatore di dichiarazioni di contenuto** – Crea file di contenuto del dizionario in vari formati (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Genera facilmente file di dizionario strutturati in diversi formati:
+![Test dizionari](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Se stai lavorando su un componente, genererà per te il file `.content.{ts,tsx,js,jsx,mjs,cjs,json}`.
+- **Test dizionari** – Testa i dizionari per traduzioni mancanti.
 
-Esempio di componente:
+![Ricostruisci dizionario](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");
+- **Mantieni i tuoi dizionari aggiornati** – Mantieni i tuoi dizionari aggiornati con i contenuti più recenti del tuo progetto.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-File generato in 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;
-```
-
-Formati disponibili:
-
-- **TypeScript (`.ts`)**
-- **Modulo ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Scheda Intlayer (Barra delle Attività)
+![Scheda Intlayer (Barra attività)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Apri la scheda Intlayer cliccando sull'icona Intlayer nella barra delle attività di VS Code. Contiene due viste:
+- **Scheda Intlayer (Barra attività)** – Naviga e cerca nei dizionari da una scheda laterale dedicata con barra degli strumenti e azioni contestuali (Costruisci, Scarica, Invia, Riempi, Aggiorna, Testa, Crea file).
 
-- **Ricerca**: Una barra di ricerca live per filtrare rapidamente i dizionari e i loro contenuti. La digitazione aggiorna i risultati istantaneamente.
-- **Dizionari**: Una vista ad albero dei tuoi ambienti/progetti, delle chiavi del dizionario e dei file che contribuiscono con voci. Puoi:
-  - Cliccare su un file per aprirlo nell'editor.
-  - Usare la barra degli strumenti per eseguire azioni: Build, Pull, Push, Fill, Refresh, Test e Create Dictionary File.
-  - Usare il menu contestuale per azioni specifiche dell'elemento:
-    - Su un dizionario: Pull o Push
-    - Su un file: Fill Dictionary
-  - Quando cambi editor, l'albero rivelerà il file corrispondente se appartiene a un dizionario.
+## Uso
 
-## Installazione
-
-Puoi installare **Intlayer** direttamente dal Marketplace di VS Code:
-
-1. Apri **VS Code**.
-2. Vai al **Marketplace delle Estensioni**.
-3. Cerca **"Intlayer"**.
-4. Clicca su **Installa**.
-
-## Utilizzo
-
-### Navigazione Rapida
+### Navigazione rapida
 
 1. Apri un progetto che utilizza **react-intlayer**.
 2. Individua una chiamata a `useIntlayer()`, come:
@@ -122,62 +66,57 @@ Puoi installare **Intlayer** direttamente dal Marketplace di VS Code:
    ```
 
 3. **Command-click** (`⌘+Click` su macOS) o **Ctrl+Click** (su Windows/Linux) sulla chiave (ad esempio, `"app"`).
-4. VS Code aprirà automaticamente il file del dizionario corrispondente, ad esempio `src/app.content.ts`.
-
-### Gestione dei Dizionari di Contenuto
+4. VS Code aprirà automaticamente il file dizionario corrispondente, ad esempio, `src/app.content.ts`.
 
-### Scheda Intlayer (Barra delle Attività)
+### Scheda Intlayer (Barra attività)
 
 Usa la scheda laterale per navigare e gestire i dizionari:
 
-- Apri l'icona Intlayer nella Barra delle Attività.
-- In **Ricerca**, digita per filtrare dizionari e voci in tempo reale.
-- In **Dizionari**, esplora ambienti, dizionari e file. Usa la barra degli strumenti per Costruire, Scaricare, Caricare, Riempire, Aggiornare, Testare e Creare File Dizionario. Clic destro per azioni contestuali (Scarica/Carica sui dizionari, Riempi sui file). Il file attualmente aperto nell’editor si rivela automaticamente nell’albero quando applicabile.
+- Apri l'icona Intlayer nella Barra attività.
+- In **Cerca**, digita per filtrare dizionari e voci in tempo reale.
+- In **Dizionari**, esplora ambienti, dizionari e file. Usa la barra degli strumenti per Costruisci, Scarica, Invia, Riempi, Aggiorna, Testa e Crea file dizionario. Clic destro per azioni contestuali (Scarica/Invia sui dizionari, Riempi sui file). Il file attualmente aperto nell'editor si evidenzia automaticamente nell'albero quando applicabile.
 
-#### Costruire Dizionari
+### Accesso ai comandi
 
-Genera tutti i file di contenuto dei dizionari con:
+Puoi accedere ai comandi dalla **Command Palette**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Cerca **Costruisci Dizionari** ed esegui il comando.
-
-#### Caricare Dizionari
-
-Carica l’ultimo contenuto dei dizionari:
-
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Carica Dizionari**.
-3. Seleziona i dizionari da caricare e conferma.
-
-#### Scaricare Dizionari
+- **Costruisci Dizionari**
+- **Invia Dizionari**
+- **Scarica Dizionari**
+- **Riempi Dizionari**
+- **Testa Dizionari**
+- **Crea File Dizionario**
 
-Sincronizza l’ultimo contenuto del dizionario:
+### Caricamento delle Variabili d'Ambiente
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Scarica Dizionari**.
-3. Scegli i dizionari da scaricare.
+Intlayer consiglia di memorizzare le chiavi API AI, così come l'ID client e il segreto di Intlayer, nelle variabili d'ambiente.
 
-#### Riempire Dizionari
+L'estensione può caricare le variabili d'ambiente dal tuo workspace per eseguire i comandi Intlayer con il contesto corretto.
 
-Riempi i dizionari con contenuti dal tuo progetto:
+- **Ordine di caricamento (per priorità)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Non distruttivo**: i valori esistenti in `process.env` non vengono sovrascritti.
+- **Ambito**: i file vengono risolti dalla directory base configurata (predefinita alla radice del workspace).
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Riempi Dizionari**.
-3. Esegui il comando per popolare i dizionari.
+#### Selezione dell'ambiente attivo
 
-#### Testare Dizionari
+- **Palette dei Comandi**: apri la palette ed esegui `Intlayer: Select Environment`, quindi scegli l'ambiente (ad esempio, `development`, `staging`, `production`). L'estensione tenterà di caricare il primo file disponibile nella lista di priorità sopra indicata e mostrerà una notifica come “Caricato env da .env.<env>.local”.
+- **Impostazioni**: vai su `Impostazioni → Estensioni → Intlayer`, e imposta:
+  - **Ambiente**: il nome dell'ambiente usato per risolvere i file `.env.<env>*`.
+  - (Opzionale) **File Env**: un percorso esplicito a un file `.env`. Quando fornito, ha la precedenza sulla lista dedotta.
 
-Valida i dizionari e trova le traduzioni mancanti:
+#### Monorepo e directory personalizzate
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Testa Dizionari**.
-3. Rivedi i problemi segnalati e correggili se necessario.
+Se i tuoi file `.env` si trovano al di fuori della radice dello spazio di lavoro, imposta la **Directory Base** in `Impostazioni → Estensioni → Intlayer`. Il loader cercherà i file `.env` relativi a quella directory.
 
 ## Cronologia Documentazione
 
-| Versione | Data       | Modifiche         |
-| -------- | ---------- | ----------------- |
-| 5.5.10   | 2025-06-29 | Inizio cronologia |
+| Versione | Data       | Modifiche                           |
+| -------- | ---------- | ----------------------------------- |
+| 6.1.5    | 2025-09-30 | Aggiunta gif demo                   |
+| 6.1.0    | 2025-09-24 | Aggiunta sezione selezione ambiente |
+| 6.0.0    | 2025-09-22 | Comandi Intlayer Tab / Fill & Test  |
+| 5.5.10   | 2025-06-29 | Inizializzazione cronologia         |