@asafarim/shared-i18n 0.8.1 → 0.9.0

package/demo/src/locales/fr/demo.json

@@ -1,85 +1,203 @@
-{
-  "title": "Démonstration Shared i18n",
-  "subtitle": "Un wrapper React i18next léger avec persistance des cookies.",
-  "cta": "Changer de langue",
-  "overview": {
-    "heading": "Aperçu",
-    "description": "@asafarim/shared-i18n est un package d'internationalisation (i18n) de qualité production pour les applications React.",
-    "features": {
-      "title": "Fonctionnalités Principales",
-      "items": [
-        "Support multi-langues avec persistance des cookies",
-        "Détection de langue et fallback intégrés",
-        "Support TypeScript avec sécurité typage complet",
-        "Espaces de noms common et identity-portal préconfigurés",
-        "Intégration transparente avec react-i18next",
-        "Synchronisation des préférences de langue avec le backend",
-        "Utilitaires SSR-safe pour le rendu côté serveur"
-      ]
-    },
-    "useCases": {
-      "title": "Idéal Pour",
-      "items": [
-        "Applications globales nécessitant un support multi-langues",
-        "Plateformes enterprise avec préférences de langue utilisateur",
-        "Systèmes d'identité et d'authentification",
-        "Systèmes de gestion de contenu avec localisation",
-        "Applications SaaS servant des utilisateurs internationaux"
-      ]
-    }
-  },
-  "getStarted": {
-    "heading": "Premiers Pas",
-    "intro": "Apprenez à intégrer @asafarim/shared-i18n dans votre application React en quelques minutes.",
-    "steps": [
-      {
-        "title": "1. Installer le Package",
-        "description": "Ajoutez le package aux dépendances de votre projet.",
-        "code": "pnpm add @asafarim/shared-i18n"
-      },
-      {
-        "title": "2. Initialiser i18n dans Votre App",
-        "description": "Appelez initI18n au démarrage de l'application pour configurer les paramètres de langue.",
-        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: /* vos traductions */\n});"
-      },
-      {
-        "title": "3. Utiliser le Hook useLanguage",
-        "description": "Accédez au changement de langue et à l'état de langue actuel dans vos composants.",
-        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Vers Anglais\n</button>"
-      },
-      {
-        "title": "4. Traduire avec useTranslation",
-        "description": "Utilisez le hook useTranslation pour accéder aux chaînes traduites.",
-        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
-      },
-      {
-        "title": "5. Profiter de la Persistance des Cookies",
-        "description": "Les préférences de langue des utilisateurs sont automatiquement sauvegardées et restaurées.",
-        "code": "// Sauvegardé automatiquement via cookies\n// Aucune configuration supplémentaire requise !"
-      },
-      {
-        "title": "6. Synchroniser avec le Backend (Optionnel)",
-        "description": "Mettez à jour les préférences de langue des utilisateurs sur votre backend.",
-        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('fr');"
-      }
-    ],
-    "tips": {
-      "title": "Conseils Pro",
-      "items": [
-        "Utilisez les espaces de noms pour organiser les traductions par fonctionnalité",
-        "Profitez du composant Trans pour les traductions complexes avec variables",
-        "Configurez VITE_IDENTITY_API_URL pour la synchronisation backend",
-        "Vérifiez la détection de langue du navigateur avec getInitialLanguage()",
-        "Combinez avec les design tokens pour des thèmes cohérents dans toutes les langues"
-      ]
-    }
-  },
-  "status": {
-    "heading": "Statut en direct",
-    "cookie": "Cookie",
-    "backend": "Backend",
-    "simulate": "Simuler la synchronisation backend",
-    "resultOk": "Synchronisation backend réussie",
-    "resultFail": "Échec de la synchronisation backend"
-  }
-}
+{
+  "title": "Démonstration Shared i18n",
+  "subtitle": "Un wrapper React i18next léger avec persistance des cookies.",
+  "cta": "Changer de langue",
+  "overview": {
+    "heading": "Aperçu",
+    "description": "@asafarim/shared-i18n est un package d'internationalisation (i18n) de qualité production pour les applications React.",
+    "features": {
+      "title": "Fonctionnalités Principales",
+      "items": [
+        "Support multi-langues avec persistance des cookies",
+        "Détection de langue et fallback intégrés",
+        "Support TypeScript avec sécurité typage complet",
+        "Espaces de noms common et identity-portal préconfigurés",
+        "Intégration transparente avec react-i18next",
+        "Synchronisation des préférences de langue avec le backend",
+        "Utilitaires SSR-safe pour le rendu côté serveur"
+      ]
+    },
+    "selectors": {
+      "title": "CountryLanguageSelector",
+      "items": [
+        "Contient à la fois le pays ET la langue: { country: 'BE', language: 'en' }",
+        "Peut distinguer be-en de nl-en, lu-en, gb-en",
+        "Drapeaux images (flagcdn.com) ou drapeaux emoji",
+        "Variantes compacte, complète, drapeau seul et déclencheur personnalisé",
+        "Idéal pour les URLs localisées comme /be-en/get-started"
+      ]
+    },
+    "useCases": {
+      "title": "Idéal Pour",
+      "items": [
+        "Applications globales nécessitant un support multi-langues",
+        "Plateformes enterprise avec préférences de langue utilisateur",
+        "Systèmes d'identité et d'authentification",
+        "Systèmes de gestion de contenu avec localisation",
+        "Applications SaaS servant des utilisateurs internationaux"
+      ]
+    }
+  },
+  "getStarted": {
+    "heading": "Premiers Pas",
+    "intro": "Apprenez à intégrer @asafarim/shared-i18n dans votre application React en quelques minutes.",
+    "steps": [
+      {
+        "title": "1. Installer le Package",
+        "description": "Ajoutez le package aux dépendances de votre projet.",
+        "code": "pnpm add @asafarim/shared-i18n"
+      },
+      {
+        "title": "2. Initialiser i18n dans Votre App",
+        "description": "Appelez initI18n au démarrage de l'application pour configurer les paramètres de langue.",
+        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: /* vos traductions */\n});"
+      },
+      {
+        "title": "3. Utiliser le Hook useLanguage",
+        "description": "Accédez au changement de langue et à l'état de langue actuel dans vos composants.",
+        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Vers Anglais\n</button>"
+      },
+      {
+        "title": "4. Traduire avec useTranslation",
+        "description": "Utilisez le hook useTranslation pour accéder aux chaînes traduites.",
+        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
+      },
+      {
+        "title": "5. Profiter de la Persistance des Cookies",
+        "description": "Les préférences de langue des utilisateurs sont automatiquement sauvegardées et restaurées.",
+        "code": "// Sauvegardé automatiquement via cookies\n// Aucune configuration supplémentaire requise !"
+      },
+      {
+        "title": "6. Synchroniser avec le Backend (Optionnel)",
+        "description": "Mettez à jour les préférences de langue des utilisateurs sur votre backend.",
+        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('fr');"
+      }
+    ],
+    "tips": {
+      "title": "Conseils Pro",
+      "items": [
+        "Utilisez les espaces de noms pour organiser les traductions par fonctionnalité",
+        "Profitez du composant Trans pour les traductions complexes avec variables",
+        "Configurez VITE_IDENTITY_API_URL pour la synchronisation backend",
+        "Vérifiez la détection de langue du navigateur avec getInitialLanguage()",
+        "Combinez avec les design tokens pour des thèmes cohérents dans toutes les langues"
+      ]
+    }
+  },
+  "routingContract": {
+    "heading": "Contrat de routage",
+    "description": "L'URL est la source de vérité pour à la fois la locale et la page active.",
+    "items": [
+      "{base} redirige vers {target}",
+      "{pattern} pilote l'UI",
+      "Changement CountryLanguageSelector → mise à jour locale complète",
+      "Changement LanguageSwitcher → langue résolue via resolveLocaleFromLanguage",
+      "Slug invalide → {defaultSlug}; page invalide → {defaultPage}"
+    ]
+  },
+  "languageSwitchers": {
+    "heading": "Changeurs de langue",
+    "intro": "LanguageSwitcher est langue-uniquement — il ne sait pas dans quel pays se trouve l'utilisateur. Chaque variante ci-dessous est connectée via resolveLocaleFromLanguage afin que sélectionner une langue produise toujours une URL locale valide.",
+    "distinction": {
+      "title": "Pourquoi LanguageSwitcher ne peut pas remplacer CountryLanguageSelector",
+      "p1": "Ces quatre slugs de locale portent la même langue (anglais) mais des pays différents. LanguageSwitcher ne peut pas les distinguer:",
+      "p2": "CountryLanguageSelector porte à la fois le pays et la langue, il peut donc représenter et distinguer les quatre.",
+      "link": "Voir l'onglet Country Language Selectors pour cela."
+    },
+    "comparison": {
+      "title": "Comparaison",
+      "capability": "Capacité",
+      "ls": "LanguageSwitcher",
+      "cls": "CountryLanguageSelector",
+      "yes": "Oui",
+      "no": "Non",
+      "needsAdapter": "Non — a besoin d'un adaptateur",
+      "optional": "Optionnel",
+      "yesVia": "Oui, via locale.language",
+      "changesLang": "Change la langue i18n",
+      "knowsCountry": "Connaît le pays",
+      "representsBeEn": "Peut représenter be-en",
+      "distinguishes": "Peut distinguer be-en de gb-en",
+      "bestUrls": "Idéal pour URLs localisées",
+      "bestTransOnly": "Idéal pour apps traduction-uniquement"
+    },
+    "variants": [
+      { "title": "Variante boutons", "desc": "Boutons individuels pour chaque langue. Déclenche onChanged avec un code de langue." },
+      { "title": "Select dropdown — texte uniquement", "desc": "<select> natif avec noms de langues. Pas d'emoji." },
+      { "title": "Icon dropdown — toutes les langues", "desc": "Dropdown compact drapeau-emoji affichant toutes les langues supportées." },
+      { "title": "Icon dropdown — langues limitées", "desc": "Limité à l'anglais et au néerlandais uniquement. Utile pour correspondre à la portée pays de la démo." },
+      { "title": "Icon dropdown — avec labels", "desc": "Identique ci-dessus mais affiche les noms de langues à côté de l'emoji drapeau." },
+      { "title": "Bouton toggle (2 langues)", "desc": "Quand exactement 2 langues sont fournies et isToggler=true, rend un seul bouton toggle." }
+    ],
+    "note": "Ce contrôle change uniquement la langue. La démo mappe la langue sélectionnée vers une locale complète via resolveLocaleFromLanguage pour que l'URL reste valide.",
+    "preview": "Aperçu",
+    "code": "Code"
+  },
+  "routingLab": {
+    "heading": "Lab de routage",
+    "intro": "Comparaison côte à côte de comment LanguageSwitcher et CountryLanguageSelector se comportent lors du changement de locale. L'URL se met à jour en direct.",
+    "currentLocale": "Locale actuelle",
+    "slug": "Slug",
+    "urlPath": "Chemin URL",
+    "langOnly": {
+      "title": "Action langue-uniquement",
+      "desc": "LanguageSwitcher déclenche un code de langue. La démo utilise resolveLocaleFromLanguage pour le mapper vers une locale complète valide. Si le pays actuel ne supporte pas la langue, un avis de fallback est affiché.",
+      "resolved": "Locale résolue:"
+    },
+    "countryLang": {
+      "title": "Action pays-langue",
+      "desc": "CountryLanguageSelector déclenche directement un objet complet { country, language } — pas d'adaptateur nécessaire. L'URL a toujours le bon pays + langue.",
+      "resolved": "Locale résolue:"
+    },
+    "scenarios": {
+      "title": "Scénarios scriptés",
+      "desc": "Cliquez sur une ligne pour appliquer le scénario et observez la mise à jour de l'URL et de la puce de locale.",
+      "expected": "Attendu:"
+    }
+  },
+  "status": {
+    "heading": "Statut en direct",
+    "cookie": "Cookie",
+    "backend": "Backend",
+    "simulate": "Simuler la synchronisation backend",
+    "resultOk": "Synchronisation backend réussie",
+    "resultFail": "Échec de la synchronisation backend"
+  },
+  "nav": {
+    "overview": "Aperçu",
+    "getStarted": "Premiers pas",
+    "languageSwitchers": "Changeurs de langue",
+    "countrySelectors": "Sélecteurs de pays",
+    "routingLab": "Lab de routage",
+    "tagline": "Démo routage locale Benelux + UK"
+  },
+  "footer": {
+    "activeRoute": "Route active",
+    "builtWith": "Construit avec"
+  },
+  "hero": {
+    "getStarted": "Premiers pas",
+    "trySelector": "Essayer le sélecteur",
+    "liveRoutePreview": "Aperçu de la route en direct"
+  },
+  "countryLanguageSelectors": {
+    "heading": "Sélecteurs Pays Langue",
+    "intro": "CountryLanguageSelector porte à la fois le pays et la langue, ce qui en fait le bon choix pour les URLs localisées. Toutes les variantes ci-dessous partagent la même locale contrôlée — changer l'une met à jour l'URL et les deux sélecteurs de navbar.",
+    "country": "Pays",
+    "language": "Langue",
+    "slug": "Slug",
+    "url": "URL",
+    "preview": "Aperçu",
+    "code": "Code",
+    "variants": [
+      { "title": "Drapeaux images · trigger compact", "desc": "Utilise des drapeaux SVG de flagcdn.com — fonctionne sur Windows où les drapeaux emoji s'affichent comme des codes ISO." },
+      { "title": "État désactivé", "desc": "Le sélecteur peut être désactivé pendant le chargement ou lorsque l'utilisateur n'a pas la permission de changer la locale." },
+      { "title": "Noms complets · drapeaux images", "desc": "Affiche les noms complets du pays et de la langue — utile quand l'espace n'est pas contraint." },
+      { "title": "Trigger drapeau uniquement", "desc": "Seul le drapeau est affiché dans le trigger — idéal pour les navbars très compactes." },
+      { "title": "Trigger personnalisé via renderTrigger", "desc": "Contrôle total sur le bouton trigger via la render prop renderTrigger. Utilise une image de drapeau inline pour fonctionner sur Windows." },
+      { "title": "Popover aligné au début", "desc": "Alignez la popover dropdown sur le bord gauche du trigger via align='start'." }
+    ],
+    "open": "Ouvrir",
+    "close": "Fermer"
+  }
+}

package/demo/src/locales/it/demo.json

@@ -1,85 +1,203 @@
-{
-  "title": "Demo i18n condiviso",
-  "subtitle": "Un wrapper leggero React i18next con persistenza dei cookie.",
-  "cta": "Cambia lingua",
-  "overview": {
-    "heading": "Panoramica",
-    "description": "@asafarim/shared-i18n è un pacchetto di internazionalizzazione (i18n) di livello produzione per applicazioni React.",
-    "features": {
-      "title": "Caratteristiche Principali",
-      "items": [
-        "Supporto multi-lingua con persistenza dei cookie",
-        "Rilevamento automatico della lingua e fallback",
-        "Supporto TypeScript con sicurezza completa dei tipi",
-        "Pre-configurato con namespace comuni e identity-portal",
-        "Integrazione perfetta con react-i18next",
-        "Sincronizzazione delle preferenze linguistiche del backend",
-        "Utilità sicure per SSR per il rendering lato server"
-      ]
-    },
-    "useCases": {
-      "title": "Perfetto Per",
-      "items": [
-        "Applicazioni globali che richiedono supporto multi-lingua",
-        "Piattaforme enterprise con preferenze linguistiche degli utenti",
-        "Sistemi di identità e autenticazione",
-        "Sistemi di gestione contenuti con localizzazione",
-        "Applicazioni SaaS che servono utenti internazionali"
-      ]
-    }
-  },
-  "getStarted": {
-    "heading": "Inizia",
-    "intro": "Scopri come integrare @asafarim/shared-i18n nella tua applicazione React in pochi minuti.",
-    "steps": [
-      {
-        "title": "1. Installa il Pacchetto",
-        "description": "Aggiungi il pacchetto alle dipendenze del tuo progetto.",
-        "code": "pnpm add @asafarim/shared-i18n"
-      },
-      {
-        "title": "2. Inizializza i18n nella Tua App",
-        "description": "Chiama initI18n all'avvio dell'applicazione per configurare le impostazioni linguistiche.",
-        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: { /* your translations */ }\n});"
-      },
-      {
-        "title": "3. Usa l'Hook useLanguage",
-        "description": "Accedi al cambio lingua e allo stato della lingua corrente nei tuoi componenti.",
-        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('nl')}>\n  Passa all'olandese\n</button>"
-      },
-      {
-        "title": "4. Traduci con useTranslation",
-        "description": "Usa l'hook useTranslation per accedere alle stringhe tradotte.",
-        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
-      },
-      {
-        "title": "5. Sfrutta la Persistenza dei Cookie",
-        "description": "Le preferenze linguistiche degli utenti vengono automaticamente salvate e ripristinate.",
-        "code": "// Automaticamente persistito tramite cookie\n// Nessuna configurazione aggiuntiva richiesta!"
-      },
-      {
-        "title": "6. Sincronizza con il Backend (Opzionale)",
-        "description": "Aggiorna le preferenze linguistiche degli utenti sul tuo backend.",
-        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('en');"
-      }
-    ],
-    "tips": {
-      "title": "Suggerimenti Pro",
-      "items": [
-        "Usa i namespace per organizzare le traduzioni per funzionalità",
-        "Sfrutta il componente Trans per traduzioni complesse con variabili",
-        "Imposta VITE_IDENTITY_API_URL per la sincronizzazione del backend",
-        "Verifica il rilevamento della lingua del browser con getInitialLanguage()",
-        "Combina con i design token per un tema consistente tra le lingue"
-      ]
-    }
-  },
-  "status": {
-    "heading": "Stato live",
-    "cookie": "Cookie",
-    "backend": "Backend",
-    "simulate": "Simula sincronizzazione backend",
-    "resultOk": "Sincronizzazione backend riuscita",
-    "resultFail": "Sincronizzazione backend fallita"
-  }
+{
+  "title": "Demo i18n condiviso",
+  "subtitle": "Un wrapper leggero React i18next con persistenza dei cookie.",
+  "cta": "Cambia lingua",
+  "overview": {
+    "heading": "Panoramica",
+    "description": "@asafarim/shared-i18n è un pacchetto di internazionalizzazione (i18n) di livello produzione per applicazioni React.",
+    "features": {
+      "title": "Caratteristiche Principali",
+      "items": [
+        "Supporto multi-lingua con persistenza dei cookie",
+        "Rilevamento automatico della lingua e fallback",
+        "Supporto TypeScript con sicurezza completa dei tipi",
+        "Pre-configurato con namespace comuni e identity-portal",
+        "Integrazione perfetta con react-i18next",
+        "Sincronizzazione delle preferenze linguistiche del backend",
+        "Utilità sicure per SSR per il rendering lato server"
+      ]
+    },
+    "selectors": {
+      "title": "CountryLanguageSelector",
+      "items": [
+        "Contiene sia il paese CHE la lingua: { country: 'BE', language: 'en' }",
+        "Può distinguere be-en da nl-en, lu-en, gb-en",
+        "Bandiere immagine (flagcdn.com) o bandiere emoji",
+        "Varianti compatte, complete, solo-bandiera e trigger personalizzato",
+        "Ideale per URL localizzati come /be-en/get-started"
+      ]
+    },
+    "useCases": {
+      "title": "Perfetto Per",
+      "items": [
+        "Applicazioni globali che richiedono supporto multi-lingua",
+        "Piattaforme enterprise con preferenze linguistiche degli utenti",
+        "Sistemi di identità e autenticazione",
+        "Sistemi di gestione contenuti con localizzazione",
+        "Applicazioni SaaS che servono utenti internazionali"
+      ]
+    }
+  },
+  "getStarted": {
+    "heading": "Inizia",
+    "intro": "Scopri come integrare @asafarim/shared-i18n nella tua applicazione React in pochi minuti.",
+    "steps": [
+      {
+        "title": "1. Installa il Pacchetto",
+        "description": "Aggiungi il pacchetto alle dipendenze del tuo progetto.",
+        "code": "pnpm add @asafarim/shared-i18n"
+      },
+      {
+        "title": "2. Inizializza i18n nella Tua App",
+        "description": "Chiama initI18n all'avvio dell'applicazione per configurare le impostazioni linguistiche.",
+        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: { /* your translations */ }\n});"
+      },
+      {
+        "title": "3. Usa l'Hook useLanguage",
+        "description": "Accedi al cambio lingua e allo stato della lingua corrente nei tuoi componenti.",
+        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('nl')}>\n  Passa all'olandese\n</button>"
+      },
+      {
+        "title": "4. Traduci con useTranslation",
+        "description": "Usa l'hook useTranslation per accedere alle stringhe tradotte.",
+        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
+      },
+      {
+        "title": "5. Sfrutta la Persistenza dei Cookie",
+        "description": "Le preferenze linguistiche degli utenti vengono automaticamente salvate e ripristinate.",
+        "code": "// Automaticamente persistito tramite cookie\n// Nessuna configurazione aggiuntiva richiesta!"
+      },
+      {
+        "title": "6. Sincronizza con il Backend (Opzionale)",
+        "description": "Aggiorna le preferenze linguistiche degli utenti sul tuo backend.",
+        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('en');"
+      }
+    ],
+    "tips": {
+      "title": "Suggerimenti Pro",
+      "items": [
+        "Usa i namespace per organizzare le traduzioni per funzionalità",
+        "Sfrutta il componente Trans per traduzioni complesse con variabili",
+        "Imposta VITE_IDENTITY_API_URL per la sincronizzazione del backend",
+        "Verifica il rilevamento della lingua del browser con getInitialLanguage()",
+        "Combina con i design token per un tema consistente tra le lingue"
+      ]
+    }
+  },
+  "routingContract": {
+    "heading": "Contratto di routing",
+    "description": "L'URL è la fonte di verità per sia la locale che la pagina attiva.",
+    "items": [
+      "{base} reindirizza a {target}",
+      "{pattern} guida la UI",
+      "Cambio CountryLanguageSelector → aggiornamento locale completo",
+      "Cambio LanguageSwitcher → lingua risolta via resolveLocaleFromLanguage",
+      "Slug non valido → {defaultSlug}; pagina non valida → {defaultPage}"
+    ]
+  },
+  "languageSwitchers": {
+    "heading": "Selettori lingua",
+    "intro": "LanguageSwitcher è solo-lingua — non sa in quale paese si trova l'utente. Ogni variante qui sotto è collegata via resolveLocaleFromLanguage così che selezionare una lingua produca comunque un URL locale valido.",
+    "distinction": {
+      "title": "Perché LanguageSwitcher non può sostituire CountryLanguageSelector",
+      "p1": "Queste quattro slug di locale portano la stessa lingua (inglese) ma paesi diversi. LanguageSwitcher non può distinguerli:",
+      "p2": "CountryLanguageSelector porta sia paese che lingua, quindi può rappresentare e distinguere tutti e quattro.",
+      "link": "Vedi la scheda Country Language Selectors per quello."
+    },
+    "comparison": {
+      "title": "Confronto",
+      "capability": "Capacità",
+      "ls": "LanguageSwitcher",
+      "cls": "CountryLanguageSelector",
+      "yes": "Sì",
+      "no": "No",
+      "needsAdapter": "No — ha bisogno di adattatore",
+      "optional": "Opzionale",
+      "yesVia": "Sì, via locale.language",
+      "changesLang": "Cambia lingua i18n",
+      "knowsCountry": "Conosce paese",
+      "representsBeEn": "Può rappresentare be-en",
+      "distinguishes": "Può distinguere be-en da gb-en",
+      "bestUrls": "Migliore per URL localizzati",
+      "bestTransOnly": "Migliore per app solo-traduzione"
+    },
+    "variants": [
+      { "title": "Variante pulsanti", "desc": "Pulsanti individuali per ogni lingua. Attiva onChanged con un codice lingua." },
+      { "title": "Select dropdown — solo testo", "desc": "<select> nativo con nomi lingua. Nessun emoji." },
+      { "title": "Icon dropdown — tutte le lingue", "desc": "Dropdown bandiera-emoji compatto che mostra tutte le lingue supportate." },
+      { "title": "Icon dropdown — lingue limitate", "desc": "Limitato solo a inglese e olandese. Utile per corrispondere alla portata paesi della demo." },
+      { "title": "Icon dropdown — con etichette", "desc": "Come sopra ma mostra nomi lingua accanto all'emoji bandiera." },
+      { "title": "Pulsante toggle (2 lingue)", "desc": "Quando esattamente 2 lingue sono fornite e isToggler=true, renderizza un singolo pulsante toggle." }
+    ],
+    "note": "Questo controllo cambia solo la lingua. La demo mappa la lingua selezionata a una locale completa via resolveLocaleFromLanguage così che l'URL rimanga valido.",
+    "preview": "Anteprima",
+    "code": "Codice"
+  },
+  "routingLab": {
+    "heading": "Lab di routing",
+    "intro": "Confronto affiancato di come LanguageSwitcher e CountryLanguageSelector si comportano quando si cambia locale. L'URL si aggiorna in tempo reale.",
+    "currentLocale": "Locale attuale",
+    "slug": "Slug",
+    "urlPath": "Percorso URL",
+    "langOnly": {
+      "title": "Azione solo-lingua",
+      "desc": "LanguageSwitcher attiva un codice lingua. La demo usa resolveLocaleFromLanguage per mapparlo a una locale completa valida. Se il paese attuale non supporta la lingua, viene mostrato un avviso di fallback.",
+      "resolved": "Locale risolta:"
+    },
+    "countryLang": {
+      "title": "Azione paese-lingua",
+      "desc": "CountryLanguageSelector attiva direttamente un oggetto completo { country, language } — nessun adattatore necessario. L'URL ha sempre il giusto paese + lingua.",
+      "resolved": "Locale risolta:"
+    },
+    "scenarios": {
+      "title": "Scenari scriptati",
+      "desc": "Clicca su una riga per applicare lo scenario e osserva l'aggiornamento dell'URL e del chip locale.",
+      "expected": "Atteso:"
+    }
+  },
+  "status": {
+    "heading": "Stato live",
+    "cookie": "Cookie",
+    "backend": "Backend",
+    "simulate": "Simula sincronizzazione backend",
+    "resultOk": "Sincronizzazione backend riuscita",
+    "resultFail": "Sincronizzazione backend fallita"
+  },
+  "nav": {
+    "overview": "Panoramica",
+    "getStarted": "Inizia",
+    "languageSwitchers": "Selettori lingua",
+    "countrySelectors": "Selettori paese",
+    "routingLab": "Lab di routing",
+    "tagline": "Demo routing locale Benelux + UK"
+  },
+  "footer": {
+    "activeRoute": "Route attiva",
+    "builtWith": "Costruito con"
+  },
+  "hero": {
+    "getStarted": "Inizia",
+    "trySelector": "Prova il selettore",
+    "liveRoutePreview": "Anteprima route live"
+  },
+  "countryLanguageSelectors": {
+    "heading": "Selettori Paese Lingua",
+    "intro": "CountryLanguageSelector porta sia il paese che la lingua, rendendolo la scelta giusta per URL localizzati. Tutte le varianti qui sotto condividono la stessa locale controllata — cambiandone una si aggiorna l'URL e entrambi i selettori della navbar.",
+    "country": "Paese",
+    "language": "Lingua",
+    "slug": "Slug",
+    "url": "URL",
+    "preview": "Anteprima",
+    "code": "Codice",
+    "variants": [
+      { "title": "Bandiere immagine · trigger compatto", "desc": "Utilizza bandiere SVG da flagcdn.com — funziona su Windows dove le bandiere emoji vengono visualizzate come codici ISO." },
+      { "title": "Stato disabilitato", "desc": "Il selettore può essere disabilitato durante il caricamento o quando l'utente non ha il permesso di cambiare la locale." },
+      { "title": "Nomi completi · bandiere immagine", "desc": "Mostra i nomi completi del paese e della lingua — utile quando lo spazio non è limitato." },
+      { "title": "Trigger solo-bandiera", "desc": "Solo la bandiera viene mostrata nel trigger — ideale per navbar molto compatte." },
+      { "title": "Trigger personalizzato via renderTrigger", "desc": "Controllo totale sul pulsante trigger tramite la render prop renderTrigger. Utilizza un'immagine bandiera inline per funzionare su Windows." },
+      { "title": "Popover allineato all'inizio", "desc": "Allinea la popover dropdown al bordo sinistro del trigger tramite align='start'." }
+    ],
+    "open": "Apri",
+    "close": "Chiudi"
+  }
 }