@intlayer/docs 9.1.3 → 9.3.0

package/docs/it/dictionary/nesting.md

@@ -64,6 +64,53 @@ export default firstDictionary;
 }
 ```
 
+### Referencing with Nest
+
+Ora, crea un altro modulo di contenuto che utilizza la funzione `nest` per fare riferimento al contenuto precedente. Puoi fare riferimento all'intero contenuto o a un valore annidato specifico:
+
+```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { nest, type Dictionary } from "intlayer";
+
+const myNestingContent = {
+  key: "key_of_my_second_dictionary",
+  content: {
+    // Fa riferimento all'intero dizionario:
+    fullNestedContent: nest("key_of_my_first_dictionary"),
+    // Fa riferimento a un valore annidato specifico:
+    partialNestedContent: nest(
+      "key_of_my_first_dictionary",
+      "subContent.contentNumber"
+    ),
+  },
+} satisfies Dictionary;
+
+export default myNestingContent;
+```
+
+```json fileName="secondDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_second_dictionary",
+  "content": {
+    "fullNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary"
+      }
+    },
+    "partialNestedContent": {
+      "nodeType": "nested",
+      "nested": {
+        "dictionaryKey": "key_of_my_first_dictionary",
+        "path": "subContent.contentNumber"
+      }
+    }
+  }
+}
+```
+
+Come secondo parametro, puoi specificare un percorso a un valore annidato all'interno di quel contenuto. Quando non viene fornito alcun percorso, viene restituito l'intero contenuto del dizionario di riferimento.
+
 ## Configurazione dell'Annidamento
 
 <Tabs group="framework">
@@ -258,36 +305,6 @@ document.getElementById("nested")!.textContent = content.partialNestedContent;
   </Tab>
 </Tabs>
 
-## Utilizzo dell'Annidamento con React Intlayer
-
-Per utilizzare contenuti annidati in un componente React, sfrutta il hook `useIntlayer` del pacchetto `react-intlayer`. Questo hook recupera il contenuto corretto in base alla chiave specificata. Ecco un esempio di come utilizzarlo:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const NestComponent: FC = () => {
-  const { fullNestedContent, partialNestedContent } = useIntlayer(
-    "key_of_my_second_dictionary"
-  );
-
-  return (
-    <div>
-      <p>
-        Contenuto Annidato Completo: {JSON.stringify(fullNestedContent)}
-        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
-      </p>
-      <p>
-        Valore Annidato Parziale: {partialNestedContent}
-        {/* Output: 0 */}
-      </p>
-    </div>
-  );
-};
-
-export default NestComponent;
-```
-
 ## Risorse Aggiuntive
 
 Per informazioni più dettagliate sulla configurazione e sull'utilizzo, consulta le seguenti risorse:

package/docs/it/formatters.md

@@ -46,34 +46,6 @@ author: aymericzip
 
 Intlayer fornisce un set di helper leggeri costruiti sopra le API native `Intl`, oltre a un wrapper `Intl` con cache per evitare di costruire ripetutamente formattatori pesanti. Queste utilità sono completamente sensibili alla localizzazione e possono essere utilizzate dal pacchetto principale `intlayer`.
 
-### Importazione
-
-```ts
-import {
-  Intl,
-  number,
-  percentage,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-  getIntlayerAsync,
-} from "intlayer";
-```
-
-Se stai usando React, sono disponibili anche gli hook; vedi `react-intlayer/format`.
-
 ## Intl con cache
 
 L'`Intl` esportato è un wrapper sottile con cache attorno all'`Intl` globale. Memorizza in cache le istanze di `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` e `PluralRules`, evitando così di ricostruire ripetutamente lo stesso formattatore.
@@ -110,9 +82,7 @@ pluralRules.select(1); // "one"
 pluralRules.select(2); // "other"
 ```
 
-## Utilità aggiuntive di Intl
-
-Oltre agli helper per i formatter, puoi anche utilizzare direttamente il wrapper Intl con cache per altre funzionalità Intl:
+## React Formatters
 
 ### `Intl.DisplayNames`
 
@@ -128,6 +98,22 @@ const regionNames = new Intl.DisplayNames("fr", { type: "region" });
 regionNames.of("US"); // "États-Unis"
 ```
 
+### Hook Disponibili
+
+Tutti gli hook utilizzano automaticamente la locale da `IntlayerProvider` o `IntlayerServerProvider`.
+
+| Hook                | Description                               | Example Output                |
+| ------------------- | ----------------------------------------- | ----------------------------- |
+| `useNumber()`       | Formatta numeri con raggruppamento        | `"123,456.789"`               |
+| `useCurrency()`     | Formatta valori di valuta                 | `"€1,234.50"`                 |
+| `usePercentage()`   | Formatta percentuali                      | `"25%"`                       |
+| `useDate()`         | Formatta date e orari                     | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Formatta tempo relativo                   | `"in 3 days"`                 |
+| `useUnit()`         | Formatta valori con unità                 | `"5 kilometers"`              |
+| `useCompact()`      | Formatta numeri in notazione compatta     | `"1.2K"`                      |
+| `useList()`         | Formatta array come liste                 | `"apple, banana, and orange"` |
+| `useIntl()`         | Ottieni oggetto `Intl` legato alla locale | Accesso completo API `Intl`   |
+
 ### `Intl.Collator`
 
 Per il confronto e l'ordinamento di stringhe sensibili alla localizzazione:
@@ -267,166 +253,146 @@ getLocaleFromPath("https://example.com/es/about"); // "es"
 
 ### Funzioni Formatter
 
-### `getPathWithoutLocale(inputUrl, locales?)`
+#### `number(value, options?)`
 
-Rimuove il segmento di localizzazione da un URL o percorso:
+Formatta un valore numerico utilizzando il raggruppamento e i decimali consapevoli della locale.
 
-```ts
-import { getPathWithoutLocale } from "intlayer";
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
 
-getPathWithoutLocale("/en/dashboard"); // "/dashboard"
-getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
-getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
+```ts
+number(123456.789); // "123,456.789" (in en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
-- **inputUrl**: La stringa URL completa o il percorso da elaborare
-- **locales**: Array opzionale delle localizzazioni supportate (predefinito alle localizzazioni configurate)
-- **returns**: L'URL senza il segmento della localizzazione
+#### `percentage(value, options?)`
 
-### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+Formatta un numero come stringa percentuale. I valori maggiori di 1 sono normalizzati (es. `25` → `25%`, `0.25` → `25%`).
 
-Genera un URL localizzato per la localizzazione corrente:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
 
 ```ts
-import { getLocalizedUrl } from "intlayer";
-
-getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
-getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
-getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
 ```
 
-- **url**: L'URL originale da localizzare
-- **currentLocale**: La localizzazione corrente
-- **locales**: Array opzionale delle localizzazioni supportate (predefinito alle localizzazioni configurate)
-- **defaultLocale**: Localizzazione predefinita opzionale (predefinita alla localizzazione predefinita configurata)
-- **prefixDefault**: Se aggiungere il prefisso alla localizzazione predefinita (predefinito al valore configurato)
+#### `currency(value, options?)`
 
-### `getHTMLTextDir(locale?)`
+Formatta un valore come valuta localizzata. Il valore predefinito è `USD`.
 
-Restituisce la direzione del testo per una localizzazione:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Comuni: `currency`, `currencyDisplay` (`"symbol" | "code" | "name"`)
 
 ```ts
-import { getHTMLTextDir } from "intlayer";
-
-getHTMLTextDir("en-US"); // "ltr"
-getHTMLTextDir("ar"); // "rtl"
-getHTMLTextDir("he"); // "rtl"
+currency(1234.5, { currency: "EUR" }); // "€1,234.50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
 ```
 
-- **locale**: La localizzazione per cui ottenere la direzione del testo (predefinita alla localizzazione corrente)
-- **returns**: `"ltr"`, `"rtl"`, o `"auto"`
+#### `date(date, optionsOrPreset?)`
+
+Formatta un valore di data/ora.
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` o preset: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+```ts
+date(new Date(), "short"); // es. "08/02/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
 
-## Utilità per la gestione dei contenuti
+#### `relativeTime(from, to?, options?)`
 
-### `getContent(node, nodeProps, locale?)`
+Formatta il tempo relativo tra due istanti.
 
-Trasforma un nodo di contenuto con tutti i plugin disponibili (traduzione, enumerazione, inserimento, ecc.):
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (predefinito `new Date()`)
+- **options**: `{ locale?, unit?, numeric?, style? }`
 
 ```ts
-import { getContent } from "intlayer";
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "in 3 days"
 
-const content = getContent(
-  contentNode,
-  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
-  "fr"
-);
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 hours ago"
 ```
 
-- **node**: Il nodo di contenuto da trasformare
-- **nodeProps**: Proprietà per il contesto di trasformazione
-- **locale**: Localizzazione opzionale (predefinita alla localizzazione predefinita configurata)
+#### `units(value, options?)`
 
-### `getTranslation(languageContent, locale?, fallback?)`
+Formatta un valore numerico con un'unità.
 
-Estrae il contenuto per una specifica lingua da un oggetto contenente più lingue:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Common: `unit` (e.g., `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
 
 ```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"
 ```
 
-- **languageContent**: Oggetto che mappa le lingue al contenuto
-- **locale**: Lingua di destinazione (default è la lingua configurata come predefinita)
-- **fallback**: Se effettuare il fallback alla lingua predefinita (default è true)
+#### `compact(value, options?)`
 
-### `getIntlayer(dictionaryKey, locale?, plugins?)`
+Formatta un numero utilizzando la notazione compatta.
 
-Recupera e trasforma il contenuto da un dizionario tramite la chiave:
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
 
 ```ts
-import { getIntlayer } from "intlayer";
-
-const content = getIntlayer("common", "fr");
-const nestedContent = getIntlayer("common", "fr", customPlugins);
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 ```
 
-- **dictionaryKey**: La chiave del dizionario da recuperare
-- **locale**: Locale opzionale (default è la locale configurata di default)
-- **plugins**: Array opzionale di plugin di trasformazione personalizzati
+#### `list(values, options?)`
 
-### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
+Formatta un array in una stringa di lista localizzata.
 
-Recupera asincronamente contenuti da un dizionario remoto:
+- **values**: `(string | number)[]`
+- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Common: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
 
 ```ts
-import { getIntlayerAsync } from "intlayer";
-
-const content = await getIntlayerAsync("common", "fr");
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
 ```
 
-- **dictionaryKey**: La chiave del dizionario da recuperare
-- **locale**: Locale opzionale (default è la locale configurata di default)
-- **plugins**: Array opzionale di plugin di trasformazione personalizzati
-
 ## Formatter
 
 Tutti gli helper seguenti sono esportati da `intlayer`.
 
 ### Funzionalità Intl Aggiuntive
 
-### `number(value, options?)`
-
-Formatta un valore numerico utilizzando la separazione delle migliaia e i decimali in base alla localizzazione.
+#### `Intl.DisplayNames`
 
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-Esempi:
+Per nomi localizzati di lingue, regioni, valute e script:
 
 ```ts
-import { number } from "intlayer";
-
-number(123456.789); // "123,456.789" (in en-US)
-number("1000000", { locale: "fr" }); // "1 000 000"
-number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
-```
-
-### `percentage(value, options?)`
+import { Intl } from "intlayer";
 
-Formatta un numero come stringa percentuale.
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
 
-Comportamento: i valori maggiori di 1 sono interpretati come percentuali intere e normalizzati (es. `25` → `25%`, `0.25` → `25%`).
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
 
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+#### `Intl.Collator`
 
-Esempi:
+Per il confronto e l'ordinamento di stringhe consapevoli della locale:
 
 ```ts
-import { percentage } from "intlayer";
+import { Intl } from "intlayer";
 
-percentage(0.25); // "25%"
-percentage(25); // "25%"
-percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
 ```
 
 #### `Intl.PluralRules`
@@ -558,42 +524,6 @@ list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 
 ## Utility di Gestione dei Contenuti
 
-## Note
-
-- Tutti gli helper accettano input di tipo `string`; internamente vengono convertiti in numeri o date.
-- La localizzazione predefinita è quella configurata in `internationalization.defaultLocale` se non specificata.
-- Queste utility sono dei semplici wrapper; per formattazioni avanzate, passare le opzioni standard di `Intl`.
-
-## Punti di ingresso e re-export (`@index.ts`)
-
-I formatter risiedono nel pacchetto core e vengono re-esportati da pacchetti di livello superiore per mantenere gli import ergonomici attraverso i runtime:
-
-Esempi:
-
-```ts
-// Codice dell'app (consigliato)
-import {
-  number,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  Intl,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-  getIntlayerAsync,
-} da "intlayer";
-```
-
 ### React
 
 Componenti client:
@@ -692,3 +622,19 @@ import {
 ```
 
 > Questi composables considereranno la localizzazione dal `IntlayerProvider` iniettato
+
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Recupera e trasforma il contenuto da un dizionario:
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+```
+
+## Note
+
+- Tutti gli helper accettano input `string`; vengono convertiti internamente a numeri o date.
+- La locale predefinita è quella configurata in `internationalization.defaultLocale` se non fornita.
+- Questi utility sono wrapper sottili; per la formattazione avanzata, passa attraverso le opzioni standard `Intl`.

package/docs/it/intlayer_CMS.md

@@ -253,28 +253,61 @@ La Sincronizzazione Live consente alla tua app di riflettere le modifiche ai con
 
 Per la guida completa alla configurazione (attivazione, avvio del server Live Sync, flusso di lavoro di sviluppo locale e limitazioni), consulta la [documentazione di Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/live-sync.md).
 
-## Self-Hosting
+### Installazione
 
-Intlayer può essere eseguito interamente sulla propria infrastruttura — nessun account Intlayer Cloud richiesto. Un singolo comando avvia l'intera pila (dashboard, API, database, archiviazione di oggetti ed e-mail) tramite Docker Compose:
+```bash packageManager="npm"
+npm install @intlayer/api
+```
 
-```sh
-curl -fsSL https://intlayer.org/install.sh | sh
+```bash packageManager="yarn"
+yarn add @intlayer/api
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/api
+```
+
+```bash packageManager="bun"
+bun add @intlayer/api
 ```
 
-Questo scarica un `docker-compose.yml` e un `.env`, genera automaticamente i secret necessari (`BETTER_AUTH_SECRET`, credenziali MinIO) e avvia tutti i container con `docker compose up -d`. Rieseguire lo stesso comando su un'installazione esistente esegue un aggiornamento progressivo senza perdita di dati.
+### Come funziona: authenticator + endpoints
+
+L'SDK è suddiviso in **due import separati** di proposito, per mantenere il bundle piccolo:
+
+1. `createIntlayerCMS` — crea un leggero **authenticator**. Contiene solo le credenziali e il token di accesso gestito; non conosce nulla di alcun dominio specifico.
+2. `dictionaryEndpoint`, `projectEndpoint`, … — **endpoint binder** per dominio, ognuno importato dal suo sottopercorso (`@intlayer/api/dictionary`, `@intlayer/api/project`, …). Passi l'authenticator all'endpoint di cui hai bisogno.
 
-### Servizi avviati
+Poiché ogni endpoint è importato separatamente, il tuo bundle include solo i domini che effettivamente utilizzi — importare `dictionaryEndpoint` non porta mai con sé il client del progetto, dell'AI o di alcun altro dominio.
 
-| Servizio            | Porta/e                                 | Scopo                                            |
-| ------------------- | --------------------------------------- | ------------------------------------------------ |
-| **app** (dashboard) | `3000`                                  | Interfaccia CMS TanStack Start                   |
-| **backend** (API)   | `3100`                                  | API REST Fastify                                 |
-| **MongoDB 7**       | interno                                 | Database principale (replica set a nodo singolo) |
-| **Redis 7**         | interno                                 | Code di lavori e caching                         |
-| **MinIO**           | `9000` (S3), `9001` (console)           | Archiviazione di oggetti compatibile S3          |
-| **Mailpit**         | `1025` (SMTP), `8025` (interfaccia web) | Sink locale per e-mail transazionali             |
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
 
-Chromium (per la generazione di screenshot con Puppeteer) è incluso nell'immagine del backend — non è necessario un container separato.
+// La configurazione è opzionale: quando omessa, le credenziali vengono lette da
+// `@intlayer/config/built`, che risolve le variabili di ambiente
+// INTLAYER_CLIENT_ID e INTLAYER_CLIENT_SECRET.
+export const cmsAuthenticator = createIntlayerCMS();
+```
+
+> [!WARNING]
+> Le credenziali CMS (`clientId` / `clientSecret`) concedono **accesso in scrittura** ai tuoi contenuti. Crea sempre l'authenticator sul **lato server** (server actions, route handlers, script, CI). Non importarlo mai nel codice lato client o esporre le tue credenziali al browser.
+
+Se preferisci non fare affidamento sulla configurazione al momento della build, passa le credenziali esplicitamente:
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+export const cmsAuthenticator = createIntlayerCMS({
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    // Opzionale, per backend self-hosted:
+    // backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+});
+```
+
+> Ottieni le tue credenziali creando una nuova chiave di accesso in [Intlayer Dashboard - Projects](https://app.intlayer.org/projects).
 
 ### Connettere il tuo progetto a un'istanza self-hosted
 
@@ -366,6 +399,24 @@ Per un riferimento completo di tutte le variabili d'ambiente disponibili e le op
 
 ---
 
+## Live sync
+
+Live Sync consente all'app di riflettere i cambiamenti del contenuto CMS in fase di runtime — nessuna ricostruzione o ridistribuzione richiesta. Quando abilitato, gli aggiornamenti vengono trasmessi a un server Live Sync che aggiorna i dizionari letti dall'applicazione.
+
+Per la guida di configurazione completa (configurazione, avvio del server Live Sync, workflow di sviluppo locale e vincoli), consulta la [documentazione Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/live-sync.md).
+
+## Self-Hosting
+
+Intlayer può funzionare interamente sulla tua infrastruttura. Un singolo comando inizializza l'intero stack (dashboard, API, database, object storage, e email) con Docker Compose:
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+Per la guida di configurazione completa, il riferimento delle variabili di ambiente, le istruzioni di aggiornamento e le procedure di backup/restore, consulta la [Guida Self-Hosting](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/self_hosting.md).
+
+---
+
 ## Debug
 
 Se riscontri problemi con il CMS, verifica quanto segue:

package/docs/it/intlayer_with_angular_21.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-31
-title: "Angular 21 i18n - Guida completa per tradurre la tua applicazione"
-description: "Niente più i18next. La guida 2026 per creare un'applicazione Angular 21 multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
+title: "Angular 22 i18n - Guida completa per tradurre la tua applicazione"
+description: "Niente più i18next. La guida 2026 per creare un'applicazione Angular 22 multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -13,8 +13,8 @@ slugs:
   - doc
   - environment
   - angular
-applicationTemplate: https://github.com/aymericzip/intlayer-angular-21-template
-applicationShowcase: https://intlayer-angular-21-template.vercel.app/
+applicationTemplate: https://github.com/aymericzip/intlayer-angular-22-template
+applicationShowcase: https://intlayer-angular-22-template.vercel.app/
 history:
   - version: 8.9.0
     date: 2026-05-04
@@ -31,7 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Traduci il tuo sito Angular 21 (Vite) utilizzando Intlayer | Internazionalizzazione (i18n)
+# Traduci il tuo sito Angular 22 (Vite) utilizzando Intlayer | Internazionalizzazione (i18n)
 
 ## Sommario
 
@@ -94,7 +94,7 @@ Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](http
   <Tab label="Codice" value="code">
 
 <iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-21-template?file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-22-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - Come internazionalizzare la tua applicazione usando Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -105,7 +105,7 @@ Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](http
   <Tab label="Demo" value="demo">
 
 <iframe
-  src="https://intlayer-angular-21-template.vercel.app/"
+  src="https://intlayer-angular-22-template.vercel.app/"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -115,7 +115,7 @@ Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](http
   </Tab>
 </Tabs>
 
-Vedi il [Modello di Applicazione](https://github.com/aymericzip/intlayer-angular-21-template) su GitHub.
+Vedi il [Modello di Applicazione](https://github.com/aymericzip/intlayer-angular-22-template) su GitHub.
 
 <Steps>
 
@@ -203,7 +203,7 @@ export default config;
 
 <Step number={3} title="Integrare Intlayer nella tua Configurazione Angular">
 
-Per integrare Intlayer con la CLI di Angular, devi utilizzare un costruttore (builder) personalizzato. Questa guida presuppone che tu stia utilizzando Vite/esbuild (predefinito per i progetti Angular 21).
+Per integrare Intlayer con la CLI di Angular, devi utilizzare un costruttore (builder) personalizzato. Questa guida presuppone che tu stia utilizzando Vite/esbuild (predefinito per i progetti Angular 22).
 
 Per prima cosa, modifica il tuo `angular.json` per utilizzare il costruttore esbuild personalizzato. Aggiorna le configurazioni `build` e `serve`: