@asafarim/shared-i18n 0.8.1 → 0.9.0

package/demo/src/locales/lb/demo.json

@@ -0,0 +1,201 @@
+{
+  "title": "Shared i18n Demo",
+  "subtitle": "Eng liicht React i18next Wrapper mat Cookie-Persistenz.",
+  "cta": "Sprooch wiesselen",
+  "overview": {
+    "heading": "Iwwersiicht",
+    "description": "@asafarim/shared-i18n schéckt souwuel e LanguageSwitcher (nëmme Sprooch) wéi och e CountryLanguageSelector (Land + Sprooch) aus enger eenzeger Installatioun.",
+    "features": {
+      "title": "LanguageSwitcher",
+      "items": [
+        "Ännert i18n Iwwersetzungssprooch (en, nl, fr, de …)",
+        "Dräi Varianten: Knäppercher, Select Dropdown, Icon-Dropdown",
+        "Cookie-baséiert Persistenz an automatesch Browsererkennung",
+        "Benotzt resolveLocaleFromLanguage Adapter fir URL-sächer Routing",
+        "Bescht fir Apps wou Land / Markt net wichteg ass"
+      ]
+    },
+    "selectors": {
+      "title": "CountryLanguageSelector",
+      "items": [
+        "Droe souwuel Land WÉI Sprooch: { country: 'BE', language: 'en' }",
+        "Kann be-en vun nl-en, lu-en, gb-en ënnerscheeden",
+        "Bild Fändelen (flagcdn.com) oder Emoji Fändelen",
+        "Kompakt, voll, nëmmen-Fändel, an individuell Trigger-Varianten",
+        "Bescht fir lokaléiert URLs wéi /be-en/get-started"
+      ]
+    },
+    "useCases": {
+      "title": "Perfekt Fir",
+      "items": [
+        "Locale-bewosst URL Routing (Benelux, EU, global)",
+        "Enterprise Plattformen mat Land + Sprooch Preferenzen",
+        "Apps déi be-en vun gb-en ënnerscheede mussen",
+        "Identitéits- an Authentifikatiounssystemer mat per-Locale Inhalt",
+        "SaaS Applikatiounen déi international Mäert bedéngen"
+      ]
+    }
+  },
+  "getStarted": {
+    "heading": "Ufangen",
+    "intro": "Alles wat Dir braucht — LanguageSwitcher a CountryLanguageSelector — kënnt aus engem Package.",
+    "steps": [
+      {
+        "title": "1. Installéieren",
+        "description": "Ee Package gëtt Iech souwuel den nëmme-Sprooch Wiesseler wéi och den Land+Sprooch Selektor.",
+        "code": "pnpm add @asafarim/shared-i18n\n# oder: npm i @asafarim/shared-i18n"
+      },
+      {
+        "title": "2. Den Selector Stylesheet importéieren",
+        "description": "Setzt de CountryLanguageSelector CSS an Ärem Entry Point.",
+        "code": "// main.tsx\nimport '@asafarim/shared-i18n/country-language-selector.css';"
+      },
+      {
+        "title": "3. i18n initialiséieren",
+        "description": "Rufft initI18n beim App-Start mat Ären Iwwersetzungsressourcen op.",
+        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultLanguage: 'en',\n  defaultNS: 'common',\n  ns: ['common', 'app'],\n  resources: {\n    en: { app: enApp },\n    lb: { app: lbApp }\n  }\n});"
+      },
+      {
+        "title": "4. CountryLanguageSelector dobäisetzen",
+        "description": "Importéiert vun @asafarim/shared-i18n — kee separat Package néideg.",
+        "code": "import {\n  CountryLanguageSelector,\n  type Country,\n  type Locale,\n} from '@asafarim/shared-i18n';\n\n<CountryLanguageSelector\n  countries={countries}\n  value={locale}\n  onChange={(locale) => {\n    i18n.changeLanguage(locale.language);\n    navigate(`/${locale.country.toLowerCase()}-${locale.language}/`);\n  }}\n  triggerVariant=\"compact\"\n  flagMode=\"image\"\n/>"
+      },
+      {
+        "title": "5. LanguageSwitcher dobäisetzen",
+        "description": "Fir nëmme-Iwwersetzung Apps. Verdraht duerch resolveLocaleFromLanguage wann Dir och Locale URLs hutt.",
+        "code": "import { LanguageSwitcher } from '@asafarim/shared-i18n';\n\n<LanguageSwitcher\n  variant=\"buttons\"\n  onChanged={(lang) => {\n    // map Sprooch → voll Locale fir URL-sächer Routing:\n    const { locale } = resolveLocaleFromLanguage(currentLocale, lang, countries);\n    navigate(locale);\n  }}\n/>"
+      },
+      {
+        "title": "6. GitHub Pages SPA Fallback (optional)",
+        "description": "Fir statist Hosting op GitHub Pages, setzt eng 404.html Redirect Strategie.",
+        "code": "// public/404.html — leitet Deep Links duerch Query String ëm\n// index.html — decodéiert se zeréck duerch history.replaceState\n// Kuckt den Demo Source fir déi vollstänneg Implementatioun."
+      }
+    ],
+    "tips": {
+      "title": "Pro Tipps",
+      "items": [
+        "Benotzt CountryLanguageSelector wann Är App locale-bewosst URLs huet",
+        "Benotzt LanguageSwitcher + resolveLocaleFromLanguage als liichtgewiichteg Adapter Schicht",
+        "Béid Komponenten sinn kontrolléiert — gitt value={locale} an onChange fir synchron ze bleiwen",
+        "i18next späichert nëmme Sprooch; d'URL späichert Land + Sprooch",
+        "Setzt VITE_IDENTITY_API_URL fir Sprooch-Preferenz Synchronisatioun"
+      ]
+    }
+  },
+  "routingContract": {
+    "heading": "Routing Kontrakt",
+    "description": "D'URL ass d'Quell vun der Wourecht fir souwuel Locale wéi och aktiv Säit.",
+    "items": [
+      "{base} leitet ëm op {target}",
+      "{pattern} steiert d'UI",
+      "CountryLanguageSelector Ännerung → voll Locale Update",
+      "LanguageSwitcher Ännerung → Sprooch opgeléist duerch resolveLocaleFromLanguage",
+      "Ongülteg Slug → {defaultSlug}; ongülteg Säit → {defaultPage}"
+    ]
+  },
+  "languageSwitchers": {
+    "heading": "Sproochwiesseler",
+    "intro": "LanguageSwitcher ass nëmme-Sprooch — et weess net a wéi engem Land de Benotzer ass. All Variante hei ënnen ass duerch resolveLocaleFromLanguage verdraht sodatt d'Auswiel vun enger Sprooch nach ëmmer eng gülteg Locale URL produzéiert.",
+    "distinction": {
+      "title": "Warum LanguageSwitcher CountryLanguageSelector net ersetze kann",
+      "p1": "Déi véier Locale Slugs droen déiselwecht Sprooch (Englesch) mee verschidde Länner. LanguageSwitcher kann se net ënnerscheeden:",
+      "p2": "CountryLanguageSelector dréit souwuel Land wéi Sprooch, also kann et déi véier all duerstellen an ënnerscheeden.",
+      "link": "Kuckt den Country Language Selectors Tab dofir."
+    },
+    "comparison": {
+      "title": "Verglach",
+      "capability": "Fäegkeet",
+      "ls": "LanguageSwitcher",
+      "cls": "CountryLanguageSelector",
+      "yes": "Jo",
+      "no": "Nee",
+      "needsAdapter": "Nee — braucht Adapter",
+      "optional": "Optional",
+      "yesVia": "Jo, via locale.language",
+      "changesLang": "Ännert i18n Sprooch",
+      "knowsCountry": "Kennt Land",
+      "representsBeEn": "Kann be-en duerstellen",
+      "distinguishes": "Kann be-en vun gb-en ënnerscheeden",
+      "bestUrls": "Bescht fir lokaléiert URLs",
+      "bestTransOnly": "Bescht fir nëmme-Iwwersetzung Apps"
+    },
+    "variants": [
+      { "title": "Knäppercher Variante", "desc": "Individuell Knäppercher fir all Sprooch. Feuert onChanged mat engem Sproochcode." },
+      { "title": "Select dropdown — nëmmen Text", "desc": "Native <select> mat Sproochnimm. Keen Emoji." },
+      { "title": "Icon dropdown — all Sproochen", "desc": "Kompakt Fändel-Emoji Dropdown deen all ënnerstëtzt Sprooche weist." },
+      { "title": "Icon dropdown — ageschränkt Sproochen", "desc": "Agegrenzt op nëmme Englesch an Hollännesch. Nëtzlech fir den Demo Lännerumfang ze passen." },
+      { "title": "Icon dropdown — mat Labelen", "desc": "Dasselwecht mee weist Sproochnimm niewent dem Fändel-Emoji." },
+      { "title": "Toggle Knäppchen (2 Sproochen)", "desc": "Wann genee 2 Sproochen giwwer an isToggler=true, renderert een eenzelen Toggle Knäppchen." }
+    ],
+    "note": "Dës Kontroll ännert nëmmen d'Sprooch. D'Demo mapped déi ausgewielt Sprooch zeréck op eng voll Locale duerch resolveLocaleFromLanguage sodatt d'URL gülteg bleift.",
+    "preview": "Virschau",
+    "code": "Code"
+  },
+  "routingLab": {
+    "heading": "Routing Lab",
+    "intro": "Säit-an-Säit Verglach vu wéi LanguageSwitcher a CountryLanguageSelector sech verhalen beim Änneren vun der Locale. D'URL gëtt live aktualiséiert.",
+    "currentLocale": "Aktuell Locale",
+    "slug": "Slug",
+    "urlPath": "URL Pfad",
+    "langOnly": {
+      "title": "Nëmme-Sprooch Aktioun",
+      "desc": "LanguageSwitcher feuert ee Sproochcode of. D'Demo benotzt resolveLocaleFromLanguage fir en op eng gülteg voll Locale ze mappen. Wann d'aktuell Land d'Sprooch net ënnerstëtzt, gëtt eng Fallback Noriicht gewisen.",
+      "resolved": "Opgeléist Locale:"
+    },
+    "countryLang": {
+      "title": "Land-Sprooch Aktioun",
+      "desc": "CountryLanguageSelector feuert direkt ee vollstännegt { country, language } Objet of — keen Adapter néideg. D'URL huet ëmmer dat richteg Land + Sprooch.",
+      "resolved": "Opgeléist Locale:"
+    },
+    "scenarios": {
+      "title": "Skriptéiert Szenarien",
+      "desc": "Klickt op eng Rei fir d'Szenario unzewenden a kuckt wéi d'URL an d'Locale Chip aktualiséiert ginn.",
+      "expected": "Erwartet:"
+    }
+  },
+  "status": {
+    "heading": "Live Status",
+    "cookie": "Cookie",
+    "backend": "Backend",
+    "simulate": "Backend Synchronisatioun simuléieren",
+    "resultOk": "Backend Synchronisatioun gelongen",
+    "resultFail": "Backend Synchronisatioun feelgeschlagen"
+  },
+  "nav": {
+    "overview": "Iwwersiicht",
+    "getStarted": "Ufangen",
+    "languageSwitchers": "Sproochwiesseler",
+    "countrySelectors": "Land Selektoren",
+    "routingLab": "Routing Lab",
+    "tagline": "Benelux + UK Locale Routing Demo"
+  },
+  "footer": {
+    "activeRoute": "Aktiv Route",
+    "builtWith": "Gebaut mat"
+  },
+  "hero": {
+    "getStarted": "Ufangen",
+    "trySelector": "Selector probéieren",
+    "liveRoutePreview": "Live Route Virschau"
+  },
+  "countryLanguageSelectors": {
+    "heading": "Land Sprooch Selektoren",
+    "intro": "CountryLanguageSelector dréit souwuel Land wéi Sprooch, wat et zur richteger Wiel fir locale-bewosst URLs mécht. All Varianten hei ënnen deelen déiselwecht kontrolléiert Locale — dat Änneren vun engem aktualiséiert d'URL an béid Navbar-Selektoren.",
+    "country": "Land",
+    "language": "Sprooch",
+    "slug": "Slug",
+    "url": "URL",
+    "preview": "Virschau",
+    "code": "Code",
+    "variants": [
+      { "title": "Bild Fändelen · kompakten Trigger", "desc": "Benotzt SVG Fändelen vu flagcdn.com — funktionéiert op Windows wou Emoji Fändelen als ISO Codes ugewise ginn." },
+      { "title": "Deaktivéierte Zoustand", "desc": "Den Selector kann während dem Lueden oder wann de Benotzer keng Erlabnes huet fir d'Locale ze änneren, deaktivéiert ginn." },
+      { "title": "Vollstänneg Nimm · Bild Fändelen", "desc": "Weist déi vollstänneg Land- a Sprooch nimm — nëtzlech wann de Plaz net limitéiert ass." },
+      { "title": "Nëmme-Fändel Trigger", "desc": "Nëmme d'Fändel gëtt am Trigger gewisen — ideal fir ganz kompakt Navbars." },
+      { "title": "Individuellen Trigger via renderTrigger", "desc": "Voll Kontroll iwwer den Trigger Knäppchen via d'renderTrigger render prop. Benotzt eng inline Fändel Bild sou datt et op Windows fonctionnéiert." },
+      { "title": "Popover alignéiert op Start", "desc": "Alignéiert d'Dropdown Popover op déi lénk Kante vum Trigger via align='start'." }
+    ],
+    "open": "Opmaachen",
+    "close": "Zoumaachen"
+  }
+}

package/demo/src/locales/nl/demo.json

@@ -1,85 +1,203 @@
-{
-  "title": "Shared i18n demo",
-  "subtitle": "Een lichtgewicht React i18next wrapper met cookie persistentie.",
-  "cta": "Taal wisselen",
-  "overview": {
-    "heading": "Overzicht",
-    "description": "@asafarim/shared-i18n is een production-grade internationalisatie (i18n) pakket voor React-applicaties.",
-    "features": {
-      "title": "Belangrijkste Functies",
-      "items": [
-        "Ondersteuning voor meerdere talen met cookie persistentie",
-        "Ingebouwde taaldetectie en fallback",
-        "TypeScript-ondersteuning met volledige type veiligheid",
-        "Vooraf geconfigureerde common en identity-portal naamruimten",
-        "Naadloze integratie met react-i18next",
-        "Synchronisatie van taalvoorkeur met backend",
-        "SSR-veilige hulpprogramma's voor server-side rendering"
-      ]
-    },
-    "useCases": {
-      "title": "Ideaal Voor",
-      "items": [
-        "Globale applicaties die ondersteuning voor meerdere talen vereisen",
-        "Enterprise-platforms met taalvoorkeuren van gebruikers",
-        "Identiteits- en verificatiesystemen",
-        "Content management systemen met lokalisatie",
-        "SaaS-applicaties die internationale gebruikers bedienen"
-      ]
-    }
-  },
-  "getStarted": {
-    "heading": "Aan de Slag",
-    "intro": "Leer hoe je @asafarim/shared-i18n in minuten in je React-applicatie integreert.",
-    "steps": [
-      {
-        "title": "1. Installeer het Pakket",
-        "description": "Voeg het pakket toe aan je projectafhankelijkheden.",
-        "code": "pnpm add @asafarim/shared-i18n"
-      },
-      {
-        "title": "2. Initialiseer i18n in Je App",
-        "description": "Roep initI18n aan bij het opstarten van de applicatie om taalinstellingen te configureren.",
-        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: { /* je vertalingen */ }\n});"
-      },
-      {
-        "title": "3. Gebruik de useLanguage Hook",
-        "description": "Krijg toegang tot taalwisseling en huidige taaltoestand in je componenten.",
-        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Naar Engels\n</button>"
-      },
-      {
-        "title": "4. Vertaal met useTranslation",
-        "description": "Gebruik de useTranslation hook om toegang te krijgen tot vertaalde strings.",
-        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
-      },
-      {
-        "title": "5. Maak Gebruik van Cookie Persistentie",
-        "description": "Taalvoorkeuren van gebruikers worden automatisch opgeslagen en hersteld.",
-        "code": "// Automatisch opgeslagen via cookies\n// Geen extra setup vereist!"
-      },
-      {
-        "title": "6. Synchroniseer met Backend (Optioneel)",
-        "description": "Werk taalvoorkeuren van gebruikers bij op je backend.",
-        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('nl');"
-      }
-    ],
-    "tips": {
-      "title": "Pro Tips",
-      "items": [
-        "Gebruik naamruimten om vertalingen per functie in te delen",
-        "Maak gebruik van de Trans-component voor complexe vertalingen met variabelen",
-        "Stel VITE_IDENTITY_API_URL in voor backend-synchronisatie",
-        "Controleer browsertaldetectie met getInitialLanguage()",
-        "Combineer met design tokens voor consistent thema's in alle talen"
-      ]
-    }
-  },
-  "status": {
-    "heading": "Live status",
-    "cookie": "Cookie",
-    "backend": "Backend",
-    "simulate": "Backend synchronisatie simuleren",
-    "resultOk": "Backend synchronisatie geslaagd",
-    "resultFail": "Backend synchronisatie mislukt"
-  }
-}
+{
+  "title": "Shared i18n demo",
+  "subtitle": "Een lichtgewicht React i18next wrapper met cookie persistentie.",
+  "cta": "Taal wisselen",
+  "overview": {
+    "heading": "Overzicht",
+    "description": "@asafarim/shared-i18n is een production-grade internationalisatie (i18n) pakket voor React-applicaties.",
+    "features": {
+      "title": "Belangrijkste Functies",
+      "items": [
+        "Ondersteuning voor meerdere talen met cookie persistentie",
+        "Ingebouwde taaldetectie en fallback",
+        "TypeScript-ondersteuning met volledige type veiligheid",
+        "Vooraf geconfigureerde common en identity-portal naamruimten",
+        "Naadloze integratie met react-i18next",
+        "Synchronisatie van taalvoorkeur met backend",
+        "SSR-veilige hulpprogramma's voor server-side rendering"
+      ]
+    },
+    "selectors": {
+      "title": "CountryLanguageSelector",
+      "items": [
+        "Bevat zowel land ALS taal: { country: 'BE', language: 'en' }",
+        "Kan be-en onderscheiden van nl-en, lu-en, gb-en",
+        "Afbeeldingvlaggen (flagcdn.com) of emoji-vlaggen",
+        "Compacte, volledige, alleen-vlag en aangepaste trigger-varianten",
+        "Beste voor gelocaliseerde URLs zoals /be-en/get-started"
+      ]
+    },
+    "useCases": {
+      "title": "Ideaal Voor",
+      "items": [
+        "Globale applicaties die ondersteuning voor meerdere talen vereisen",
+        "Enterprise-platforms met taalvoorkeuren van gebruikers",
+        "Identiteits- en verificatiesystemen",
+        "Content management systemen met lokalisatie",
+        "SaaS-applicaties die internationale gebruikers bedienen"
+      ]
+    }
+  },
+  "getStarted": {
+    "heading": "Aan de Slag",
+    "intro": "Leer hoe je @asafarim/shared-i18n in minuten in je React-applicatie integreert.",
+    "steps": [
+      {
+        "title": "1. Installeer het Pakket",
+        "description": "Voeg het pakket toe aan je projectafhankelijkheden.",
+        "code": "pnpm add @asafarim/shared-i18n"
+      },
+      {
+        "title": "2. Initialiseer i18n in Je App",
+        "description": "Roep initI18n aan bij het opstarten van de applicatie om taalinstellingen te configureren.",
+        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: { /* je vertalingen */ }\n});"
+      },
+      {
+        "title": "3. Gebruik de useLanguage Hook",
+        "description": "Krijg toegang tot taalwisseling en huidige taaltoestand in je componenten.",
+        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Naar Engels\n</button>"
+      },
+      {
+        "title": "4. Vertaal met useTranslation",
+        "description": "Gebruik de useTranslation hook om toegang te krijgen tot vertaalde strings.",
+        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
+      },
+      {
+        "title": "5. Maak Gebruik van Cookie Persistentie",
+        "description": "Taalvoorkeuren van gebruikers worden automatisch opgeslagen en hersteld.",
+        "code": "// Automatisch opgeslagen via cookies\n// Geen extra setup vereist!"
+      },
+      {
+        "title": "6. Synchroniseer met Backend (Optioneel)",
+        "description": "Werk taalvoorkeuren van gebruikers bij op je backend.",
+        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('nl');"
+      }
+    ],
+    "tips": {
+      "title": "Pro Tips",
+      "items": [
+        "Gebruik naamruimten om vertalingen per functie in te delen",
+        "Maak gebruik van de Trans-component voor complexe vertalingen met variabelen",
+        "Stel VITE_IDENTITY_API_URL in voor backend-synchronisatie",
+        "Controleer browsertaldetectie met getInitialLanguage()",
+        "Combineer met design tokens voor consistent thema's in alle talen"
+      ]
+    }
+  },
+  "routingContract": {
+    "heading": "Routing contract",
+    "description": "De URL is de bron van waarheid voor zowel locale als actieve pagina.",
+    "items": [
+      "{base} redirect naar {target}",
+      "{pattern} stuurt de UI aan",
+      "CountryLanguageSelector wijziging → volledige locale update",
+      "LanguageSwitcher wijziging → taal opgelost via resolveLocaleFromLanguage",
+      "Ongeldige slug → {defaultSlug}; ongeldige pagina → {defaultPage}"
+    ]
+  },
+  "languageSwitchers": {
+    "heading": "Taalwisselaars",
+    "intro": "LanguageSwitcher is alleen-taal — het weet niet in welk land de gebruiker zich bevindt. Elke variant hieronder is aangesloten via resolveLocaleFromLanguage zodat het selecteren van een taal nog steeds een geldige locale-URL oplevert.",
+    "distinction": {
+      "title": "Waarom LanguageSwitcher CountryLanguageSelector niet kan vervangen",
+      "p1": "Al deze vier locale-slugs dragen dezelfde taal (Engels) maar verschillende landen. LanguageSwitcher kan ze niet onderscheiden:",
+      "p2": "CountryLanguageSelector draagt zowel land als taal, dus het kan alle vier vertegenwoordigen en onderscheiden.",
+      "link": "Zie het Country Language Selectors tabblad daarvoor."
+    },
+    "comparison": {
+      "title": "Vergelijking",
+      "capability": "Mogelijkheid",
+      "ls": "LanguageSwitcher",
+      "cls": "CountryLanguageSelector",
+      "yes": "Ja",
+      "no": "Nee",
+      "needsAdapter": "Nee — heeft adapter nodig",
+      "optional": "Optioneel",
+      "yesVia": "Ja, via locale.language",
+      "changesLang": "Wijzigt i18n taal",
+      "knowsCountry": "Kent land",
+      "representsBeEn": "Kan be-en vertegenwoordigen",
+      "distinguishes": "Kan be-en van gb-en onderscheiden",
+      "bestUrls": "Beste voor gelocaliseerde URLs",
+      "bestTransOnly": "Beste voor alleen-vertaling apps"
+    },
+    "variants": [
+      { "title": "Knoppen variant", "desc": "Individuele knoppen voor elke taal. Vuurt onChanged met een taalcode." },
+      { "title": "Select dropdown — alleen tekst", "desc": "Native <select> met taalnamen. Geen emoji." },
+      { "title": "Icon dropdown — alle talen", "desc": "Compacte vlag-emoji dropdown met alle ondersteunde talen." },
+      { "title": "Icon dropdown — beperkte talen", "desc": "Beperkt tot alleen Engels en Nederlands. Handig om de demo-landscope te matchen." },
+      { "title": "Icon dropdown — met labels", "desc": "Zelfde als boven maar toont taalnamen naast de vlag-emoji." },
+      { "title": "Toggle knop (2 talen)", "desc": "Wanneer exact 2 talen worden meegegeven en isToggler=true, rendert een enkele toggle knop." }
+    ],
+    "note": "Deze regelaar wijzigt alleen taal. De demo mapped de geselecteerde taal terug naar een volledige locale via resolveLocaleFromLanguage zodat de URL geldig blijft.",
+    "preview": "Voorbeeld",
+    "code": "Code"
+  },
+  "routingLab": {
+    "heading": "Routing Lab",
+    "intro": "Vergelijking naast elkaar van hoe LanguageSwitcher en CountryLanguageSelector zich gedragen bij het wijzigen van locale. De URL wordt live bijgewerkt.",
+    "currentLocale": "Huidige locale",
+    "slug": "Slug",
+    "urlPath": "URL pad",
+    "langOnly": {
+      "title": "Alleen-taal actie",
+      "desc": "LanguageSwitcher vuurt een taalcode af. De demo gebruikt resolveLocaleFromLanguage om deze te mappen naar een geldige volledige locale. Als het huidige land de taal niet ondersteunt, wordt een fallback melding getoond.",
+      "resolved": "Opgeloste locale:"
+    },
+    "countryLang": {
+      "title": "Land-taal actie",
+      "desc": "CountryLanguageSelector vuurt direct een volledig { country, language } object af — geen adapter nodig. De URL heeft altijd het juiste land + taal.",
+      "resolved": "Opgeloste locale:"
+    },
+    "scenarios": {
+      "title": "Gescripte scenario's",
+      "desc": "Klik op een rij om het scenario toe te passen en zie hoe de URL en locale chip worden bijgewerkt.",
+      "expected": "Verwacht:"
+    }
+  },
+  "status": {
+    "heading": "Live status",
+    "cookie": "Cookie",
+    "backend": "Backend",
+    "simulate": "Backend synchronisatie simuleren",
+    "resultOk": "Backend synchronisatie geslaagd",
+    "resultFail": "Backend synchronisatie mislukt"
+  },
+  "nav": {
+    "overview": "Overzicht",
+    "getStarted": "Aan de slag",
+    "languageSwitchers": "Taalwisselaars",
+    "countrySelectors": "Land Selectors",
+    "routingLab": "Routing Lab",
+    "tagline": "Benelux + UK locale routing demo"
+  },
+  "footer": {
+    "activeRoute": "Actieve route",
+    "builtWith": "Gebouwd met"
+  },
+  "hero": {
+    "getStarted": "Aan de slag",
+    "trySelector": "Probeer de selector",
+    "liveRoutePreview": "Live route voorbeeld"
+  },
+  "countryLanguageSelectors": {
+    "heading": "Land Taal Selectors",
+    "intro": "CountryLanguageSelector draagt zowel land als taal, waardoor het de juiste keuze is voor locale-bewuste URLs. Alle varianten hieronder delen dezelfde gecontroleerde locale — het wijzigen van één update de URL en beide navbar selectors.",
+    "country": "Land",
+    "language": "Taal",
+    "slug": "Slug",
+    "url": "URL",
+    "preview": "Voorbeeld",
+    "code": "Code",
+    "variants": [
+      { "title": "Afbeelding vlaggen · compacte trigger", "desc": "Gebruikt SVG vlaggen van flagcdn.com — werkt op Windows waar emoji vlaggen als ISO codes worden weergegeven." },
+      { "title": "Uitgeschakelde staat", "desc": "De selector kan worden uitgeschakeld tijdens het laden of wanneer de gebruiker geen toestemming heeft om de locale te wijzigen." },
+      { "title": "Volledige namen · afbeelding vlaggen", "desc": "Toont de volledige land- en taalnamen — handig wanneer ruimte niet beperkt is." },
+      { "title": "Alleen-vlag trigger", "desc": "Alleen de vlag wordt in de trigger getoond — ideaal voor zeer compacte navbars." },
+      { "title": "Aangepaste trigger via renderTrigger", "desc": "Volledige controle over de trigger knop via de renderTrigger render prop. Gebruikt een inline vlag afbeelding zodat het op Windows werkt." },
+      { "title": "Popover uitgelijnd naar start", "desc": "Lijn de dropdown popover uit met de linkerrand van de trigger via align='start'." }
+    ],
+    "open": "Openen",
+    "close": "Sluiten"
+  }
+}

package/demo/src/main.tsx

@@ -1,29 +1,32 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { initI18n } from '@asafarim/shared-i18n'
-import '@asafarim/country-language-selector/styles.css'
-import App from './App'
-import './index.css'
-import enDemo from './locales/en/demo.json'
-import nlDemo from './locales/nl/demo.json'
-import frDemo from './locales/fr/demo.json'
-import itDemo from './locales/it/demo.json'
-import deDemo from './locales/de/demo.json'
-
-initI18n({
-  defaultNS: 'common',
-  ns: ['common', 'demo'],
-  resources: {
-    en: { demo: enDemo },
-    nl: { demo: nlDemo },
-    fr: { demo: frDemo },
-    it: { demo: itDemo },
-    de: { demo: deDemo }
-  }
-})
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { initI18n } from '@asafarim/shared-i18n'
+import '@asafarim/shared-i18n/country-language-selector.css'
+import App from './App'
+import './index.css'
+import enDemo from './locales/en/demo.json'
+import nlDemo from './locales/nl/demo.json'
+import frDemo from './locales/fr/demo.json'
+import itDemo from './locales/it/demo.json'
+import deDemo from './locales/de/demo.json'
+import lbDemo from './locales/lb/demo.json'
+
+initI18n({
+  defaultLanguage: 'en',
+  defaultNS: 'common',
+  ns: ['common', 'demo'],
+  resources: {
+    en: { demo: enDemo },
+    nl: { demo: nlDemo },
+    fr: { demo: frDemo },
+    it: { demo: itDemo },
+    de: { demo: deDemo },
+    lb: { demo: lbDemo }
+  }
+})
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/demo/tsconfig.json

@@ -1,18 +1,18 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src", "../src/types", "./vite-env.d.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }, { "path": "../tsconfig.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "../src/types", "./vite-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "../tsconfig.json" }]
+}

package/demo/tsconfig.node.json

@@ -1,10 +1,10 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/demo/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/components/countrylanguagedemo.tsx","./src/components/getstartedsection.tsx","./src/components/keytable.tsx","./src/components/languagebar.tsx","./src/components/languageswitcherdemo.tsx","./src/components/logo.tsx","./src/components/overviewsection.tsx","./src/components/panel.tsx","./src/components/statuscard.tsx","../src/types/css.d.ts","./vite-env.d.ts"],"version":"5.8.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/components/countrylanguageselectorspage.tsx","./src/components/getstartedsection.tsx","./src/components/keytable.tsx","./src/components/languagebar.tsx","./src/components/languageswitcherspage.tsx","./src/components/logo.tsx","./src/components/overviewsection.tsx","./src/components/panel.tsx","./src/components/routinglabpage.tsx","./src/components/statuscard.tsx","./src/data/countries.ts","./src/i18n/localeadapter.ts","./src/i18n/localerouting.ts","../src/types/css.d.ts","./vite-env.d.ts"],"version":"5.8.3"}