@lovalingo/lovalingo 0.5.25 → 0.5.28

package/dist/__tests__/languageFlags.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/languageFlags.test.js

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { countryCodeToFlagEmoji, normalizeLocaleCode, parseLocale, resolveLocaleFlag } from "../utils/languageFlags";
+describe("languageFlags", () => {
+    it("normalizes locale codes with case and underscore variants", () => {
+        expect(normalizeLocaleCode("TR")).toBe("tr");
+        expect(normalizeLocaleCode("tr_TR")).toBe("tr-tr");
+        expect(normalizeLocaleCode("tr-TR")).toBe("tr-tr");
+    });
+    it("parses language and region", () => {
+        expect(parseLocale("en-CA")).toEqual({ language: "en", region: "CA" });
+        expect(parseLocale("fr")).toEqual({ language: "fr", region: null });
+    });
+    it("returns consistent flag for TR variants", () => {
+        expect(resolveLocaleFlag("TR")).toBe("🇹🇷");
+        expect(resolveLocaleFlag("tr")).toBe("🇹🇷");
+        expect(resolveLocaleFlag("tr-TR")).toBe("🇹🇷");
+        expect(resolveLocaleFlag("tr_TR")).toBe("🇹🇷");
+    });
+    it("uses region flag when locale includes region", () => {
+        expect(resolveLocaleFlag("en-CA")).toBe("🇨🇦");
+        expect(resolveLocaleFlag("pt-BR")).toBe("🇧🇷");
+    });
+    it("uses language default region when locale has no region", () => {
+        expect(resolveLocaleFlag("en")).toBe("🇬🇧");
+        expect(resolveLocaleFlag("zh")).toBe("🇨🇳");
+        expect(resolveLocaleFlag("pt")).toBe("🇵🇹");
+    });
+    it("falls back to globe for unknown or invalid locale", () => {
+        expect(resolveLocaleFlag("zzz")).toBe("🌐");
+        expect(resolveLocaleFlag("")).toBe("🌐");
+        expect(resolveLocaleFlag(null)).toBe("🌐");
+    });
+    it("never falls back to white flag", () => {
+        expect(resolveLocaleFlag("zzz")).not.toBe("🏳️");
+        expect(resolveLocaleFlag("foo-bar-baz")).not.toBe("🏳️");
+    });
+    it("converts country code to emoji", () => {
+        expect(countryCodeToFlagEmoji("ca")).toBe("🇨🇦");
+        expect(countryCodeToFlagEmoji("PT")).toBe("🇵🇹");
+        expect(countryCodeToFlagEmoji("ZZZ")).toBeNull();
+    });
+});

package/dist/__tests__/mergeEntitlements.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/mergeEntitlements.test.js

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { mergeEntitlementsSeoEnabled } from "../utils/mergeEntitlements";
+describe("mergeEntitlementsSeoEnabled", () => {
+    it("merges seoEnabled when provided", () => {
+        const entitlements = {
+            tier: "starter",
+            maxTargetLocales: 1,
+            allowedTargetLocales: [],
+            brandingRequired: true,
+            hreflangEnabled: false,
+        };
+        const merged = mergeEntitlementsSeoEnabled(entitlements, false);
+        expect(merged?.seoEnabled).toBe(false);
+    });
+    it("returns the same object when seoEnabled is not a boolean", () => {
+        const entitlements = {
+            tier: "startup",
+            maxTargetLocales: 3,
+            allowedTargetLocales: ["zh"],
+            brandingRequired: false,
+            hreflangEnabled: true,
+            seoEnabled: true,
+        };
+        const merged = mergeEntitlementsSeoEnabled(entitlements, null);
+        expect(merged).toBe(entitlements);
+    });
+});

package/dist/components/LanguageSwitcher.js

@@ -1,30 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react';
-const LANGUAGE_FLAGS = {
-    en: '🇬🇧',
-    de: '🇩🇪',
-    fr: '🇫🇷',
-    es: '🇪🇸',
-    it: '🇮🇹',
-    pt: '🇵🇹',
-    nl: '🇳🇱',
-    pl: '🇵🇱',
-    ru: '🇷🇺',
-    hi: '🇮🇳',
-    ja: '🇯🇵',
-    zh: '🇨🇳',
-    ko: '🇰🇷',
-    ar: '🇸🇦',
-    hy: '🇦🇲',
-    tr: '🇹🇷',
-    vi: '🇻🇳',
-    th: '🇹🇭',
-    sv: '🇸🇪',
-    da: '🇩🇰',
-    no: '🇳🇴',
-    fi: '🇫🇮',
-};
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { normalizeLocaleCode, resolveLocaleFlag } from '../utils/languageFlags';
 export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, position = 'bottom-right', offsetY = 20, theme = 'dark', branding, }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
     const containerRef = useRef(null);
     const isRight = position.endsWith('right');
     const isTop = position.startsWith('top');
@@ -56,11 +34,40 @@ export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, posit
             tabHoverShadowLeft: '4px 0 16px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.15)',
             panelShadow: '0 8px 24px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.10)',
         };
-    // Order locales: active first, then others
-    const orderedLocales = [
-        currentLocale,
-        ...locales.filter(l => l !== currentLocale)
-    ];
+    // Why: normalize locale codes for comparisons so variants like "tr_TR" and "tr-TR" are treated consistently.
+    const normalizedCurrentLocale = useMemo(() => normalizeLocaleCode(currentLocale), [currentLocale]);
+    // Why: keep active locale first while preserving caller order for the remaining locales.
+    const orderedLocales = useMemo(() => {
+        const seen = new Set();
+        const items = [];
+        const pushLocale = (value) => {
+            const raw = typeof value === 'string' ? value.trim() : '';
+            const normalized = normalizeLocaleCode(raw);
+            if (!raw || !normalized || seen.has(normalized))
+                return;
+            seen.add(normalized);
+            items.push({ raw, normalized });
+        };
+        if (normalizedCurrentLocale) {
+            pushLocale(currentLocale);
+        }
+        for (const locale of locales) {
+            const raw = typeof locale === 'string' ? locale.trim() : '';
+            const normalized = normalizeLocaleCode(raw);
+            if (!normalized || normalized === normalizedCurrentLocale)
+                continue;
+            pushLocale(raw);
+        }
+        if (items.length === 0) {
+            for (const locale of locales)
+                pushLocale(locale);
+        }
+        return items;
+    }, [currentLocale, locales, normalizedCurrentLocale]);
+    const tabFlag = useMemo(() => {
+        const fallbackLocale = orderedLocales[0]?.normalized || normalizedCurrentLocale;
+        return resolveLocaleFlag(fallbackLocale);
+    }, [orderedLocales, normalizedCurrentLocale]);
     // Close on outside click
     useEffect(() => {
         const handleClickOutside = (event) => {
@@ -73,6 +80,20 @@ export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, posit
             return () => document.removeEventListener('mousedown', handleClickOutside);
         }
     }, [isOpen]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const query = '(max-width: 640px)';
+        const media = window.matchMedia(query);
+        const update = () => setIsMobile(media.matches);
+        update();
+        if (typeof media.addEventListener === 'function') {
+            media.addEventListener('change', update);
+            return () => media.removeEventListener('change', update);
+        }
+        media.addListener(update);
+        return () => media.removeListener(update);
+    }, []);
     // Handle keyboard navigation
     useEffect(() => {
         const handleKeyDown = (event) => {
@@ -135,9 +156,12 @@ export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, posit
         gap: '10px',
         boxShadow: tokens.panelShadow,
         transition: 'opacity 0.25s ease, transform 0.25s ease',
+        width: isMobile ? 'min(320px, calc(100vw - 88px))' : 'auto',
     };
     const localeRowStyles = {
-        display: 'flex',
+        display: isMobile ? 'grid' : 'flex',
+        gridTemplateColumns: isMobile ? 'repeat(5, minmax(0, 1fr))' : undefined,
+        justifyItems: isMobile ? 'center' : undefined,
         gap: '10px',
         padding: '0 2px',
     };
@@ -159,7 +183,7 @@ export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, posit
         alignItems: 'center',
         gap: '6px',
     };
-    const flagButtonStyles = (locale) => ({
+    const flagButtonStyles = (isActive) => ({
         // Why: the panel stays mounted for the close animation, so buttons must be non-interactive while hidden.
         pointerEvents: isOpen ? 'auto' : 'none',
         width: '32px',
@@ -169,8 +193,8 @@ export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, posit
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: '20px',
-        background: locale === currentLocale ? 'rgba(59, 130, 246, 0.2)' : 'transparent',
-        border: locale === currentLocale ? '2px solid rgb(59, 130, 246)' : '2px solid transparent',
+        background: isActive ? 'rgba(59, 130, 246, 0.2)' : 'transparent',
+        border: isActive ? '2px solid rgb(59, 130, 246)' : '2px solid transparent',
         cursor: 'pointer',
         transition: 'transform 0.15s ease, filter 0.15s ease, background 0.15s ease',
         flexShrink: 0,
@@ -185,26 +209,29 @@ export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, posit
                 }, onMouseLeave: (e) => {
                     e.currentTarget.style.background = tokens.surfaceBg;
                     e.currentTarget.style.boxShadow = isRight ? tokens.tabShadowRight : tokens.tabShadowLeft;
-                }, "aria-label": "Open language switcher", "aria-expanded": isOpen }, LANGUAGE_FLAGS[currentLocale] || '🌐'),
+                }, "aria-label": "Open language switcher", "aria-expanded": isOpen }, tabFlag),
             React.createElement("div", { style: panelStyles, role: "toolbar", "aria-label": "Language options" },
-                React.createElement("div", { style: localeRowStyles }, orderedLocales.map((locale) => (React.createElement("button", { key: locale, style: flagButtonStyles(locale), onClick: (e) => {
-                        e.stopPropagation();
-                        if (locale === currentLocale) {
-                            setIsOpen(false);
-                        }
-                        else {
-                            onLocaleChange(locale);
-                            setIsOpen(false);
-                        }
-                    }, onMouseEnter: (e) => {
-                        if (locale !== currentLocale) {
-                            e.currentTarget.style.filter = 'brightness(1.3)';
-                        }
-                        e.currentTarget.style.transform = 'scale(1.1)';
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.filter = 'brightness(1)';
-                        e.currentTarget.style.transform = 'scale(1)';
-                    }, "aria-label": `Switch to ${locale.toUpperCase()}`, title: locale.toUpperCase(), tabIndex: isOpen ? 0 : -1 }, LANGUAGE_FLAGS[locale] || '🏳️')))),
+                React.createElement("div", { style: localeRowStyles }, orderedLocales.map((entry) => {
+                    const isActive = entry.normalized === normalizedCurrentLocale;
+                    return (React.createElement("button", { key: entry.normalized, style: flagButtonStyles(isActive), onClick: (e) => {
+                            e.stopPropagation();
+                            if (isActive) {
+                                setIsOpen(false);
+                            }
+                            else {
+                                onLocaleChange(entry.raw);
+                                setIsOpen(false);
+                            }
+                        }, onMouseEnter: (e) => {
+                            if (!isActive) {
+                                e.currentTarget.style.filter = 'brightness(1.3)';
+                            }
+                            e.currentTarget.style.transform = 'scale(1.1)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.filter = 'brightness(1)';
+                            e.currentTarget.style.transform = 'scale(1)';
+                        }, "aria-label": `Switch to ${entry.normalized.toUpperCase()}`, title: entry.normalized.toUpperCase(), tabIndex: isOpen ? 0 : -1 }, resolveLocaleFlag(entry.normalized)));
+                })),
                 (branding?.required || branding?.enabled) && (React.createElement("div", { style: badgeRowStyles, "aria-label": "Lovalingo branding" },
                     React.createElement("a", { href: branding.href || 'https://lovalingo.com', target: "_blank", rel: "noreferrer", style: { ...badgeLinkStyles, pointerEvents: isOpen ? 'auto' : 'none' }, tabIndex: isOpen ? 0 : -1, "aria-label": "Localized by Lovalingo", title: "Localized by Lovalingo" },
                         React.createElement("span", { style: {