experimental-ciao-react 1.0.0

package/dist/index.js

@@ -0,0 +1,978 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useEffect, useRef } from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+//#region src/components/CTContextBlock.tsx
+function CTContextBlock({ children }) {
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+//#endregion
+//#region src/cache.ts
+const DB_NAME = "ciao-tools-translations";
+const DB_VERSION = 1;
+const STORE_NAME = "translations";
+let dbPromise = null;
+function openDB() {
+	if (dbPromise) return dbPromise;
+	dbPromise = new Promise((resolve, reject) => {
+		if (typeof indexedDB === "undefined") {
+			reject(/* @__PURE__ */ new Error("IndexedDB not available"));
+			return;
+		}
+		const request = indexedDB.open(DB_NAME, DB_VERSION);
+		request.onerror = () => reject(request.error);
+		request.onsuccess = () => resolve(request.result);
+		request.onupgradeneeded = (event) => {
+			const db = event.target.result;
+			if (!db.objectStoreNames.contains(STORE_NAME)) {
+				const store = db.createObjectStore(STORE_NAME, { keyPath: "url" });
+				store.createIndex("language", "language", { unique: false });
+				store.createIndex("projectId", "projectId", { unique: false });
+			}
+		};
+	});
+	return dbPromise;
+}
+async function getCachedTranslation(url) {
+	try {
+		const db = await openDB();
+		return new Promise((resolve, reject) => {
+			const request = db.transaction(STORE_NAME, "readonly").objectStore(STORE_NAME).get(url);
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => {
+				const entry = request.result;
+				resolve(entry?.data ?? null);
+			};
+		});
+	} catch {
+		return null;
+	}
+}
+async function cacheTranslation(url, language, projectId, data) {
+	try {
+		const db = await openDB();
+		return new Promise((resolve, reject) => {
+			const store = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME);
+			const entry = {
+				url,
+				language,
+				projectId,
+				data,
+				cachedAt: Date.now()
+			};
+			const request = store.put(entry);
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve();
+		});
+	} catch {}
+}
+async function clearCache(projectId) {
+	try {
+		const db = await openDB();
+		return new Promise((resolve, reject) => {
+			const transaction = db.transaction(STORE_NAME, "readwrite");
+			const store = transaction.objectStore(STORE_NAME);
+			if (projectId) {
+				const request = store.index("projectId").openCursor(IDBKeyRange.only(projectId));
+				request.onsuccess = (event) => {
+					const cursor = event.target.result;
+					if (cursor) {
+						cursor.delete();
+						cursor.continue();
+					}
+				};
+				transaction.oncomplete = () => resolve();
+				transaction.onerror = () => reject(transaction.error);
+			} else {
+				const request = store.clear();
+				request.onerror = () => reject(request.error);
+				request.onsuccess = () => resolve();
+			}
+		});
+	} catch {}
+}
+async function getCacheStats() {
+	try {
+		const db = await openDB();
+		return new Promise((resolve, reject) => {
+			const transaction = db.transaction(STORE_NAME, "readonly");
+			const store = transaction.objectStore(STORE_NAME);
+			const countRequest = store.count();
+			const languages = /* @__PURE__ */ new Set();
+			const cursorRequest = store.openCursor();
+			cursorRequest.onsuccess = (event) => {
+				const cursor = event.target.result;
+				if (cursor) {
+					languages.add(cursor.value.language);
+					cursor.continue();
+				}
+			};
+			transaction.oncomplete = () => {
+				resolve({
+					count: countRequest.result,
+					languages: Array.from(languages)
+				});
+			};
+			transaction.onerror = () => reject(transaction.error);
+		});
+	} catch {
+		return {
+			count: 0,
+			languages: []
+		};
+	}
+}
+
+//#endregion
+//#region src/interpolate.ts
+const numberFormatCache = /* @__PURE__ */ new Map();
+const dateFormatCache = /* @__PURE__ */ new Map();
+const pluralRulesCache = /* @__PURE__ */ new Map();
+function clearFormatterCache() {
+	numberFormatCache.clear();
+	dateFormatCache.clear();
+	pluralRulesCache.clear();
+}
+function getNumberFormatter(locale) {
+	const key = `number:${locale}`;
+	if (!numberFormatCache.has(key)) numberFormatCache.set(key, new Intl.NumberFormat(locale, { maximumFractionDigits: 20 }));
+	return numberFormatCache.get(key);
+}
+function getCurrencyFormatter(locale, currency) {
+	const key = `currency:${locale}:${currency}`;
+	if (!numberFormatCache.has(key)) numberFormatCache.set(key, new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency
+	}));
+	return numberFormatCache.get(key);
+}
+function getPercentFormatter(locale) {
+	const key = `percent:${locale}`;
+	if (!numberFormatCache.has(key)) numberFormatCache.set(key, new Intl.NumberFormat(locale, {
+		style: "percent",
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 2
+	}));
+	return numberFormatCache.get(key);
+}
+function getDateFormatter(locale, style) {
+	const key = `date:${locale}:${style}`;
+	if (!dateFormatCache.has(key)) {
+		const options = { dateStyle: style };
+		dateFormatCache.set(key, new Intl.DateTimeFormat(locale, options));
+	}
+	return dateFormatCache.get(key);
+}
+function getTimeFormatter(locale, style) {
+	const key = `time:${locale}:${style}`;
+	if (!dateFormatCache.has(key)) {
+		const options = { timeStyle: style };
+		dateFormatCache.set(key, new Intl.DateTimeFormat(locale, options));
+	}
+	return dateFormatCache.get(key);
+}
+function getPluralRules(locale) {
+	if (!pluralRulesCache.has(locale)) pluralRulesCache.set(locale, new Intl.PluralRules(locale));
+	return pluralRulesCache.get(locale);
+}
+function formatValue(value, format, locale) {
+	if (value === null || value === void 0) return "";
+	if (!format) return String(value);
+	const parts = format.split(":");
+	switch (parts[0]) {
+		case "number": {
+			const num = typeof value === "number" ? value : Number(value);
+			if (Number.isNaN(num)) return String(value);
+			return getNumberFormatter(locale).format(num);
+		}
+		case "currency": {
+			const currency = parts[1];
+			if (!currency) return String(value);
+			const num = typeof value === "number" ? value : Number(value);
+			if (Number.isNaN(num)) return String(value);
+			return getCurrencyFormatter(locale, currency).format(num);
+		}
+		case "percent": {
+			const num = typeof value === "number" ? value : Number(value);
+			if (Number.isNaN(num)) return String(value);
+			return getPercentFormatter(locale).format(num);
+		}
+		case "date":
+			if (!(value instanceof Date)) return String(value);
+			return getDateFormatter(locale, parts[1] || "medium").format(value);
+		case "time":
+			if (!(value instanceof Date)) return String(value);
+			return getTimeFormatter(locale, parts[1] || "medium").format(value);
+		case "plural": {
+			const singular = parts[1];
+			const plural = parts[2];
+			if (!singular || !plural) return String(value);
+			const num = typeof value === "number" ? value : Number(value);
+			return getPluralRules(locale).select(num) === "one" ? singular : plural;
+		}
+		default: return String(value);
+	}
+}
+function interpolate(text, values, locale) {
+	const escaped = text.replace(/\{\{/g, "\0").replace(/\}\}/g, "
");
+	let result;
+	if (!values || Object.keys(values).length === 0) result = escaped;
+	else result = escaped.replace(/\{([^}]+)\}/g, (match, placeholder) => {
+		const trimmed = placeholder.trim();
+		const colonIndex = trimmed.indexOf(":");
+		let key;
+		let format;
+		if (colonIndex === -1) {
+			key = trimmed;
+			format = void 0;
+		} else {
+			key = trimmed.substring(0, colonIndex);
+			format = trimmed.substring(colonIndex + 1);
+		}
+		if (!(key in values)) return match;
+		const value = values[key];
+		return formatValue(value, format, locale);
+	});
+	return result.replace(/\x00/g, "{").replace(/\x01/g, "}");
+}
+
+//#endregion
+//#region src/store.ts
+const useTranslationStore = create()(persist((set) => ({
+	currentLanguage: "en",
+	defaultLanguage: "en",
+	availableLanguages: ["en"],
+	translations: {},
+	isLoading: false,
+	isReady: false,
+	serverVersion: null,
+	lastVersionCheck: null,
+	setLanguage: (language) => {
+		set({
+			currentLanguage: language,
+			isReady: false
+		});
+	},
+	loadTranslations: (translations) => {
+		set((state) => {
+			const languages = Object.keys(translations);
+			const availableLanguages = [...new Set([...state.availableLanguages, ...languages])];
+			const merged = { ...state.translations };
+			for (const lang of languages) merged[lang] = {
+				...merged[lang],
+				...translations[lang]
+			};
+			return {
+				translations: merged,
+				availableLanguages
+			};
+		});
+	},
+	addLanguage: (language, translations) => {
+		set((state) => ({
+			translations: {
+				...state.translations,
+				[language]: {
+					...state.translations[language],
+					...translations
+				}
+			},
+			availableLanguages: state.availableLanguages.includes(language) ? state.availableLanguages : [...state.availableLanguages, language]
+		}));
+	},
+	setLoading: (loading) => {
+		set({ isLoading: loading });
+	},
+	setReady: (ready) => {
+		set({ isReady: ready });
+	},
+	setServerVersion: (version) => {
+		set({
+			serverVersion: version,
+			lastVersionCheck: Date.now()
+		});
+	}
+}), {
+	name: "ciao-tools-language",
+	partialize: (state) => ({ currentLanguage: state.currentLanguage })
+}));
+function getTranslation(translations, language, text, values) {
+	const translated = translations[language]?.[text] ?? text;
+	if (!values || Object.keys(values).length === 0) return translated;
+	return interpolate(translated, values, language);
+}
+
+//#endregion
+//#region src/hooks/useHotUpdates.ts
+const CDN_BASE_URL = "https://t1.ciao-tools.com";
+async function fetchLatestManifest(projectId) {
+	const url = `${CDN_BASE_URL}/translations/${projectId}/latest.json`;
+	try {
+		const response = await fetch(url, { cache: "no-cache" });
+		if (!response.ok) {
+			if (response.status === 404) return null;
+			throw new Error(`Failed to fetch latest manifest: ${response.statusText}`);
+		}
+		return response.json();
+	} catch {
+		return null;
+	}
+}
+async function fetchTranslations(url) {
+	const response = await fetch(url);
+	if (!response.ok) throw new Error(`Failed to fetch translations: ${response.statusText}`);
+	return response.json();
+}
+function useHotUpdates(config, projectId) {
+	const isCheckingRef = useRef(false);
+	const hasCheckedOnMountRef = useRef(false);
+	const { serverVersion, setServerVersion, addLanguage } = useTranslationStore();
+	const checkForUpdates = useCallback(async () => {
+		if (!config || !projectId || isCheckingRef.current) return;
+		if (config.enabled === false) return;
+		isCheckingRef.current = true;
+		try {
+			console.log("[ciao-tools] Checking for hot updates...");
+			const manifest = await fetchLatestManifest(projectId);
+			if (!manifest) {
+				console.log("[ciao-tools] No latest.json found (project may not have hot updates yet)");
+				return;
+			}
+			console.log("[ciao-tools] Found latest.json, version:", manifest.version);
+			const isFirstCheck = serverVersion === null;
+			const hasNewVersion = serverVersion !== null && manifest.version > serverVersion;
+			if (isFirstCheck || hasNewVersion) {
+				if (Object.keys(manifest.urls).length > 0) {
+					console.log("[ciao-tools] Fetching updated translations...");
+					await clearCache(projectId);
+					const updatedLanguages = [];
+					for (const [langCode, url] of Object.entries(manifest.urls)) try {
+						const translations = await fetchTranslations(url);
+						addLanguage(langCode, translations);
+						await cacheTranslation(url, langCode, projectId, translations);
+						updatedLanguages.push(langCode);
+					} catch (err) {
+						console.error(`[ciao-tools] Failed to fetch ${langCode} translations:`, err);
+					}
+					if (updatedLanguages.length > 0) {
+						console.log("[ciao-tools] Updated translations for:", updatedLanguages);
+						if (hasNewVersion && config.onTranslationsUpdated) config.onTranslationsUpdated(updatedLanguages);
+					}
+				}
+			} else console.log("[ciao-tools] Already up to date (version " + manifest.version + ")");
+			setServerVersion(manifest.version);
+		} catch (error) {
+			console.error("[ciao-tools] Hot update check failed:", error);
+		} finally {
+			isCheckingRef.current = false;
+		}
+	}, [
+		config,
+		projectId,
+		serverVersion,
+		setServerVersion,
+		addLanguage
+	]);
+	useEffect(() => {
+		if (!config || !projectId) return;
+		if (config.enabled === false) return;
+		if (!hasCheckedOnMountRef.current) {
+			hasCheckedOnMountRef.current = true;
+			checkForUpdates();
+		}
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "visible") checkForUpdates();
+		};
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		};
+	}, [
+		config,
+		projectId,
+		checkForUpdates
+	]);
+	return { checkForUpdates };
+}
+
+//#endregion
+//#region src/components/CTProvider.tsx
+const PRELOAD_DELAY_MS = 5e3;
+async function fetchTranslationsFromCDN(url) {
+	const response = await fetch(url);
+	if (!response.ok) throw new Error(`Failed to fetch translations: ${response.statusText}`);
+	return response.json();
+}
+function detectBrowserLanguage(availableLanguages) {
+	if (typeof navigator === "undefined") return null;
+	const browserLangs = navigator.languages || [navigator.language];
+	for (const browserLang of browserLangs) {
+		const normalized = browserLang.toLowerCase();
+		if (availableLanguages.includes(normalized)) return normalized;
+		const langCode = normalized.split("-")[0];
+		if (availableLanguages.includes(langCode)) return langCode;
+	}
+	return null;
+}
+function getManifestUrlsHash(manifest) {
+	if (!manifest) return "";
+	return JSON.stringify(manifest.cdnUrls);
+}
+function CTProvider({ children, translations, manifest, defaultLanguage = "en", availableLanguages, onLanguageChange, detectLanguage = true, blockUntilReady = false, fallback = null, preloadLanguages = true, preloadDelay = PRELOAD_DELAY_MS, hotUpdates }) {
+	const { loadTranslations, setLanguage, addLanguage, setLoading, setReady, currentLanguage, translations: storeTranslations, isReady } = useTranslationStore();
+	const manifestRef = useRef(manifest);
+	const loadedUrlsRef = useRef(/* @__PURE__ */ new Map());
+	const previousManifestHashRef = useRef("");
+	const initializedRef = useRef(false);
+	const preloadTimeoutRef = useRef(null);
+	useEffect(() => {
+		manifestRef.current = manifest;
+		const newHash = getManifestUrlsHash(manifest);
+		const oldHash = previousManifestHashRef.current;
+		if (oldHash && newHash && oldHash !== newHash) {
+			loadedUrlsRef.current.clear();
+			useTranslationStore.setState({ translations: {} });
+		}
+		previousManifestHashRef.current = newHash;
+	}, [manifest]);
+	useEffect(() => {
+		if (translations) {
+			loadTranslations(translations);
+			setReady(true);
+		}
+	}, [
+		translations,
+		loadTranslations,
+		setReady
+	]);
+	useEffect(() => {
+		if (initializedRef.current) return;
+		initializedRef.current = true;
+		const store = useTranslationStore.getState();
+		const effectiveLanguages = manifest ? [...manifest.languages] : availableLanguages || [];
+		if (store.currentLanguage && store.currentLanguage !== "en" && effectiveLanguages.includes(store.currentLanguage)) return;
+		if (detectLanguage && effectiveLanguages.length > 0) {
+			const detected = detectBrowserLanguage(effectiveLanguages);
+			if (detected) {
+				setLanguage(detected);
+				return;
+			}
+		}
+		if (defaultLanguage && defaultLanguage !== store.currentLanguage) setLanguage(defaultLanguage);
+	}, [
+		manifest,
+		availableLanguages,
+		defaultLanguage,
+		detectLanguage,
+		setLanguage
+	]);
+	useEffect(() => {
+		const effectiveLanguages = manifest ? [...manifest.languages] : availableLanguages;
+		if (effectiveLanguages) {
+			const store = useTranslationStore.getState();
+			const merged = [...new Set([...store.availableLanguages, ...effectiveLanguages])];
+			useTranslationStore.setState({
+				availableLanguages: merged,
+				defaultLanguage
+			});
+		}
+	}, [
+		availableLanguages,
+		manifest,
+		defaultLanguage
+	]);
+	const loadLanguageFromCDN = useCallback(async (language, isPreload = false) => {
+		const currentManifest = manifestRef.current;
+		if (!currentManifest) {
+			if (!isPreload) setReady(true);
+			return false;
+		}
+		const cdnUrl = currentManifest.cdnUrls[language];
+		if (!cdnUrl) {
+			if (!isPreload) setReady(true);
+			return false;
+		}
+		if (loadedUrlsRef.current.get(language) === cdnUrl) {
+			if (!isPreload) setReady(true);
+			return true;
+		}
+		if (!isPreload) {
+			setLoading(true);
+			setReady(false);
+		}
+		try {
+			const cached = await getCachedTranslation(cdnUrl);
+			if (cached) {
+				addLanguage(language, cached);
+				loadedUrlsRef.current.set(language, cdnUrl);
+				if (!isPreload) {
+					setReady(true);
+					setLoading(false);
+				}
+				return true;
+			}
+			const translationData = await fetchTranslationsFromCDN(cdnUrl);
+			addLanguage(language, translationData);
+			loadedUrlsRef.current.set(language, cdnUrl);
+			await cacheTranslation(cdnUrl, language, currentManifest.projectId, translationData);
+			if (!isPreload) setReady(true);
+			return true;
+		} catch (error) {
+			console.error(`[ciao-tools] Failed to load translations for ${language}:`, error);
+			if (!isPreload) setReady(true);
+			return false;
+		} finally {
+			if (!isPreload) setLoading(false);
+		}
+	}, [
+		addLanguage,
+		setLoading,
+		setReady
+	]);
+	useEffect(() => {
+		if (currentLanguage === manifest?.sourceLanguage) {
+			setReady(true);
+			return;
+		}
+		if (manifest && currentLanguage) loadLanguageFromCDN(currentLanguage, false);
+		else if (!manifest) setReady(true);
+	}, [
+		manifest,
+		currentLanguage,
+		loadLanguageFromCDN,
+		setReady
+	]);
+	useEffect(() => {
+		if (!preloadLanguages || !manifest) return;
+		if (preloadTimeoutRef.current) clearTimeout(preloadTimeoutRef.current);
+		preloadTimeoutRef.current = setTimeout(async () => {
+			const languages = [...manifest.languages];
+			for (const language of languages) {
+				if (language === manifest.sourceLanguage) continue;
+				if (language === currentLanguage) continue;
+				await loadLanguageFromCDN(language, true);
+			}
+		}, preloadDelay);
+		return () => {
+			if (preloadTimeoutRef.current) clearTimeout(preloadTimeoutRef.current);
+		};
+	}, [
+		manifest,
+		currentLanguage,
+		preloadLanguages,
+		preloadDelay,
+		loadLanguageFromCDN
+	]);
+	useEffect(() => {
+		if (onLanguageChange) onLanguageChange(currentLanguage);
+	}, [currentLanguage, onLanguageChange]);
+	useHotUpdates(hotUpdates, manifest?.projectId);
+	if (blockUntilReady && !isReady) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+//#endregion
+//#region src/components/LanguageSwitcher.tsx
+const LANGUAGE_DATA = {
+	en: {
+		name: "English",
+		nativeName: "English",
+		flag: "🇺🇸"
+	},
+	es: {
+		name: "Spanish",
+		nativeName: "Español",
+		flag: "🇪🇸"
+	},
+	fr: {
+		name: "French",
+		nativeName: "Français",
+		flag: "🇫🇷"
+	},
+	de: {
+		name: "German",
+		nativeName: "Deutsch",
+		flag: "🇩🇪"
+	},
+	it: {
+		name: "Italian",
+		nativeName: "Italiano",
+		flag: "🇮🇹"
+	},
+	pt: {
+		name: "Portuguese",
+		nativeName: "Português",
+		flag: "🇵🇹"
+	},
+	ja: {
+		name: "Japanese",
+		nativeName: "日本語",
+		flag: "🇯🇵"
+	},
+	ko: {
+		name: "Korean",
+		nativeName: "한국어",
+		flag: "🇰🇷"
+	},
+	zh: {
+		name: "Chinese",
+		nativeName: "中文",
+		flag: "🇨🇳"
+	},
+	ar: {
+		name: "Arabic",
+		nativeName: "العربية",
+		flag: "🇸🇦"
+	},
+	ru: {
+		name: "Russian",
+		nativeName: "Русский",
+		flag: "🇷🇺"
+	},
+	nl: {
+		name: "Dutch",
+		nativeName: "Nederlands",
+		flag: "🇳🇱"
+	},
+	pl: {
+		name: "Polish",
+		nativeName: "Polski",
+		flag: "🇵🇱"
+	},
+	sv: {
+		name: "Swedish",
+		nativeName: "Svenska",
+		flag: "🇸🇪"
+	},
+	da: {
+		name: "Danish",
+		nativeName: "Dansk",
+		flag: "🇩🇰"
+	},
+	fi: {
+		name: "Finnish",
+		nativeName: "Suomi",
+		flag: "🇫🇮"
+	},
+	no: {
+		name: "Norwegian",
+		nativeName: "Norsk",
+		flag: "🇳🇴"
+	},
+	tr: {
+		name: "Turkish",
+		nativeName: "Türkçe",
+		flag: "🇹🇷"
+	},
+	cs: {
+		name: "Czech",
+		nativeName: "Čeština",
+		flag: "🇨🇿"
+	},
+	el: {
+		name: "Greek",
+		nativeName: "Ελληνικά",
+		flag: "🇬🇷"
+	},
+	he: {
+		name: "Hebrew",
+		nativeName: "עברית",
+		flag: "🇮🇱"
+	},
+	hu: {
+		name: "Hungarian",
+		nativeName: "Magyar",
+		flag: "🇭🇺"
+	},
+	id: {
+		name: "Indonesian",
+		nativeName: "Bahasa Indonesia",
+		flag: "🇮🇩"
+	},
+	th: {
+		name: "Thai",
+		nativeName: "ไทย",
+		flag: "🇹🇭"
+	},
+	vi: {
+		name: "Vietnamese",
+		nativeName: "Tiếng Việt",
+		flag: "🇻🇳"
+	},
+	uk: {
+		name: "Ukrainian",
+		nativeName: "Українська",
+		flag: "🇺🇦"
+	},
+	ro: {
+		name: "Romanian",
+		nativeName: "Română",
+		flag: "🇷🇴"
+	},
+	bg: {
+		name: "Bulgarian",
+		nativeName: "Български",
+		flag: "🇧🇬"
+	},
+	sk: {
+		name: "Slovak",
+		nativeName: "Slovenčina",
+		flag: "🇸🇰"
+	},
+	lt: {
+		name: "Lithuanian",
+		nativeName: "Lietuvių",
+		flag: "🇱🇹"
+	},
+	lv: {
+		name: "Latvian",
+		nativeName: "Latviešu",
+		flag: "🇱🇻"
+	},
+	et: {
+		name: "Estonian",
+		nativeName: "Eesti",
+		flag: "🇪🇪"
+	},
+	sl: {
+		name: "Slovenian",
+		nativeName: "Slovenščina",
+		flag: "🇸🇮"
+	},
+	bs: {
+		name: "Bosnian",
+		nativeName: "Bosanski",
+		flag: "🇧🇦"
+	},
+	hr: {
+		name: "Croatian",
+		nativeName: "Hrvatski",
+		flag: "🇭🇷"
+	},
+	sr: {
+		name: "Serbian",
+		nativeName: "Српски",
+		flag: "🇷🇸"
+	},
+	kmr: {
+		name: "Kurdish",
+		nativeName: "Kurdî",
+		flag: "🇮🇶"
+	},
+	fa: {
+		name: "Persian",
+		nativeName: "فارسی",
+		flag: "🇮🇷"
+	},
+	hi: {
+		name: "Hindi",
+		nativeName: "हिन्दी",
+		flag: "🇮🇳"
+	},
+	bn: {
+		name: "Bengali",
+		nativeName: "বাংলা",
+		flag: "🇧🇩"
+	},
+	ms: {
+		name: "Malay",
+		nativeName: "Bahasa Melayu",
+		flag: "🇲🇾"
+	}
+};
+function getLanguageInfo(code) {
+	return LANGUAGE_DATA[code.toLowerCase()] ?? {
+		name: code.toUpperCase(),
+		nativeName: code.toUpperCase(),
+		flag: "🌐"
+	};
+}
+function getFullLanguageInfo(code) {
+	return {
+		code,
+		...getLanguageInfo(code)
+	};
+}
+function formatLanguageDisplay(code, display = "flag-native") {
+	const info = getLanguageInfo(code);
+	switch (display) {
+		case "flag": return info.flag;
+		case "name": return info.name;
+		case "native": return info.nativeName;
+		case "flag-name": return `${info.flag} ${info.name}`;
+		case "flag-native": return `${info.flag} ${info.nativeName}`;
+		case "code": return code.toUpperCase();
+		default: return `${info.flag} ${info.nativeName}`;
+	}
+}
+function LanguageSwitcher({ className, variant = "dropdown", display = "flag-native", onChange }) {
+	const { currentLanguage, availableLanguages, setLanguage } = useTranslationStore();
+	const handleChange = (newLanguage) => {
+		setLanguage(newLanguage);
+		onChange?.(newLanguage);
+	};
+	if (variant === "buttons") return /* @__PURE__ */ jsx("div", {
+		className,
+		role: "group",
+		"aria-label": "Language selection",
+		children: availableLanguages.map((lang) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => handleChange(lang),
+			"aria-pressed": currentLanguage === lang,
+			"data-active": currentLanguage === lang,
+			children: formatLanguageDisplay(lang, display)
+		}, lang))
+	});
+	if (variant === "minimal") return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		onClick: () => {
+			handleChange(availableLanguages[(availableLanguages.indexOf(currentLanguage) + 1) % availableLanguages.length]);
+		},
+		"aria-label": `Current language: ${getLanguageInfo(currentLanguage).name}. Click to change.`,
+		children: formatLanguageDisplay(currentLanguage, display)
+	});
+	return /* @__PURE__ */ jsx("select", {
+		value: currentLanguage,
+		onChange: (e) => handleChange(e.target.value),
+		className,
+		"aria-label": "Select language",
+		children: availableLanguages.map((lang) => /* @__PURE__ */ jsx("option", {
+			value: lang,
+			children: formatLanguageDisplay(lang, display)
+		}, lang))
+	});
+}
+
+//#endregion
+//#region src/hooks/useCt.ts
+function isInterpolationValues(arg) {
+	return typeof arg === "object" && arg !== null && !Array.isArray(arg) && !(arg instanceof Date);
+}
+function useCt() {
+	const { translations, currentLanguage } = useTranslationStore();
+	return useCallback((text, contextOrValues, maybeValues) => {
+		let values;
+		if (typeof contextOrValues === "string") values = maybeValues;
+		else if (isInterpolationValues(contextOrValues)) values = contextOrValues;
+		return getTranslation(translations, currentLanguage, text, values);
+	}, [translations, currentLanguage]);
+}
+
+//#endregion
+//#region src/components/Trans.tsx
+function parseChildren(children) {
+	const elements = [];
+	let template = "";
+	const processNode = (node) => {
+		if (node === null || node === void 0) return "";
+		if (typeof node === "string") return node;
+		if (typeof node === "number") return String(node);
+		if (isValidElement(node)) {
+			const index = elements.length;
+			elements.push(node);
+			return `<${index}>${processNode(node.props.children)}</${index}>`;
+		}
+		if (Array.isArray(node)) return node.map(processNode).join("");
+		return "";
+	};
+	template = processNode(children);
+	return {
+		template,
+		elements
+	};
+}
+function reconstructChildren(translated, elements) {
+	if (elements.length === 0) return translated;
+	const result = [];
+	let keyCounter = 0;
+	const tagRegex = /<(\d+)>(.*?)<\/\1>/gs;
+	let lastIndex = 0;
+	let match;
+	tagRegex.lastIndex = 0;
+	while ((match = tagRegex.exec(translated)) !== null) {
+		if (match.index > lastIndex) {
+			const textBefore = translated.slice(lastIndex, match.index);
+			if (textBefore) result.push(textBefore);
+		}
+		const elementIndex = parseInt(match[1], 10);
+		const innerContent = match[2];
+		const originalElement = elements[elementIndex];
+		if (originalElement) {
+			const processedInner = reconstructChildren(innerContent, elements);
+			const cloned = cloneElement(originalElement, {
+				key: `trans-${keyCounter++}`,
+				children: processedInner
+			});
+			result.push(cloned);
+		}
+		lastIndex = match.index + match[0].length;
+	}
+	if (lastIndex < translated.length) result.push(translated.slice(lastIndex));
+	if (result.length === 0) return translated;
+	return result.length === 1 ? result[0] : result;
+}
+function Trans({ children, context, values }) {
+	const ct = useCt();
+	const { template, elements } = parseChildren(children);
+	let translated;
+	if (context && values) translated = ct(template, context, values);
+	else if (context) translated = ct(template, context);
+	else if (values) translated = ct(template, values);
+	else translated = ct(template);
+	return /* @__PURE__ */ jsx(Fragment, { children: reconstructChildren(translated, elements) });
+}
+
+//#endregion
+//#region src/hooks/useLanguage.ts
+function useCurrentLanguage() {
+	return useTranslationStore((state) => state.currentLanguage);
+}
+function useSetLanguage() {
+	return useTranslationStore((state) => state.setLanguage);
+}
+function useAvailableLanguages() {
+	return useTranslationStore((state) => state.availableLanguages);
+}
+function useIsLoading() {
+	return useTranslationStore((state) => state.isLoading);
+}
+function useIsReady() {
+	return useTranslationStore((state) => state.isReady);
+}
+function useLanguageInfo(code) {
+	const currentLanguage = useTranslationStore((state) => state.currentLanguage);
+	return getFullLanguageInfo(code ?? currentLanguage);
+}
+function useAvailableLanguagesInfo() {
+	return useTranslationStore((state) => state.availableLanguages).map(getFullLanguageInfo);
+}
+function useLanguage() {
+	const currentLanguage = useTranslationStore((state) => state.currentLanguage);
+	const availableLanguages = useTranslationStore((state) => state.availableLanguages);
+	const setLanguage = useTranslationStore((state) => state.setLanguage);
+	const isLoading = useTranslationStore((state) => state.isLoading);
+	const isReady = useTranslationStore((state) => state.isReady);
+	return {
+		currentLanguage,
+		currentLanguageInfo: getFullLanguageInfo(currentLanguage),
+		availableLanguages,
+		availableLanguagesInfo: availableLanguages.map(getFullLanguageInfo),
+		setLanguage,
+		cycleLanguage: useCallback(() => {
+			setLanguage(availableLanguages[(availableLanguages.indexOf(currentLanguage) + 1) % availableLanguages.length]);
+		}, [
+			availableLanguages,
+			currentLanguage,
+			setLanguage
+		]),
+		isLoading,
+		isReady
+	};
+}
+
+//#endregion
+export { CTContextBlock, CTProvider, LANGUAGE_DATA, LanguageSwitcher, Trans, clearCache, clearFormatterCache, formatLanguageDisplay, getCacheStats, getFullLanguageInfo, getLanguageInfo, interpolate, useAvailableLanguages, useAvailableLanguagesInfo, useCt, useCurrentLanguage, useHotUpdates, useIsLoading, useIsReady, useLanguage, useLanguageInfo, useSetLanguage, useTranslationStore };
+//# sourceMappingURL=index.js.map