experimental-ciao-react 1.1.10 → 1.1.11

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, isValidElement, useCallback, useEffect, useRef } from "react";
+import React, { cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
@@ -8,127 +8,32 @@ function CTContextBlock({ 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();
+//#region src/interpolate.ts
+const MAX_CACHE_SIZE = 100;
+function createBoundedCache(maxSize) {
+	const cache = /* @__PURE__ */ new Map();
+	return {
+		get(key) {
+			return cache.get(key);
+		},
+		set(key, value) {
+			if (cache.size >= maxSize) {
+				const firstKey = cache.keys().next().value;
+				if (firstKey !== void 0) cache.delete(firstKey);
 			}
-		});
-	} 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: []
-		};
-	}
+			cache.set(key, value);
+		},
+		has(key) {
+			return cache.has(key);
+		},
+		clear() {
+			cache.clear();
+		}
+	};
 }
-
-//#endregion
-//#region src/interpolate.ts
-const numberFormatCache = /* @__PURE__ */ new Map();
-const dateFormatCache = /* @__PURE__ */ new Map();
-const pluralRulesCache = /* @__PURE__ */ new Map();
+const numberFormatCache = createBoundedCache(MAX_CACHE_SIZE);
+const dateFormatCache = createBoundedCache(MAX_CACHE_SIZE);
+const pluralRulesCache = createBoundedCache(MAX_CACHE_SIZE);
 function clearFormatterCache() {
 	numberFormatCache.clear();
 	dateFormatCache.clear();
@@ -251,7 +156,7 @@ const useTranslationStore = create()(persist((set) => ({
 	isLoading: false,
 	isReady: false,
 	isHydrated: false,
-	serverVersion: null,
+	storedManifest: null,
 	lastVersionCheck: null,
 	setLanguage: (language) => {
 		set({
@@ -292,9 +197,9 @@ const useTranslationStore = create()(persist((set) => ({
 	setReady: (ready) => {
 		set({ isReady: ready });
 	},
-	setServerVersion: (version) => {
+	setStoredManifest: (manifest) => {
 		set({
-			serverVersion: version,
+			storedManifest: manifest,
 			lastVersionCheck: Date.now()
 		});
 	}
@@ -302,10 +207,14 @@ const useTranslationStore = create()(persist((set) => ({
 	name: "ciao-tools-language",
 	partialize: (state) => ({
 		currentLanguage: state.currentLanguage,
-		serverVersion: state.serverVersion
+		storedManifest: state.storedManifest
 	}),
 	onRehydrateStorage: () => (_, error) => {
-		if (!error && hydrationResolver) hydrationResolver();
+		if (error) console.error("[ciao-tools] Storage hydration failed:", error);
+		if (hydrationResolver) {
+			hydrationResolver();
+			hydrationResolver = null;
+		}
 	}
 }));
 hydrationPromise.then(() => {
@@ -317,6 +226,133 @@ function getTranslation(translations, language, text, values) {
 	return interpolate(translated, values, language);
 }
 
+//#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") {
+			dbPromise = null;
+			reject(/* @__PURE__ */ new Error("IndexedDB not available"));
+			return;
+		}
+		const request = indexedDB.open(DB_NAME, DB_VERSION);
+		request.onerror = () => {
+			dbPromise = null;
+			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 (error) {
+		console.warn("[ciao-tools] Failed to read from cache:", error);
+		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 (error) {
+		console.warn("[ciao-tools] Failed to write to cache:", error);
+	}
+}
+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 (error) {
+		console.warn("[ciao-tools] Failed to clear cache:", error);
+	}
+}
+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 (error) {
+		console.warn("[ciao-tools] Failed to get cache stats:", error);
+		return {
+			count: 0,
+			languages: []
+		};
+	}
+}
+
 //#endregion
 //#region src/hooks/useHotUpdates.ts
 const CDN_BASE_URL = "https://t1.ciao-tools.com";
@@ -329,7 +365,8 @@ async function fetchLatestManifest(projectId) {
 			throw new Error(`Failed to fetch latest manifest: ${response.statusText}`);
 		}
 		return response.json();
-	} catch {
+	} catch (error) {
+		console.warn("[ciao-tools] Failed to fetch latest manifest:", error);
 		return null;
 	}
 }
@@ -338,60 +375,81 @@ async function fetchTranslations(url) {
 	if (!response.ok) throw new Error(`Failed to fetch translations: ${response.statusText}`);
 	return response.json();
 }
-function useHotUpdates(config, projectId) {
+function useHotUpdates(config, projectId, sourceLanguage) {
 	const isCheckingRef = useRef(false);
 	const hasCheckedOnMountRef = useRef(false);
-	const { serverVersion, setServerVersion, addLanguage } = useTranslationStore();
+	const configRef = useRef(config);
+	const projectIdRef = useRef(projectId);
+	const sourceLanguageRef = useRef(sourceLanguage);
+	useEffect(() => {
+		configRef.current = config;
+		projectIdRef.current = projectId;
+		sourceLanguageRef.current = sourceLanguage;
+	}, [
+		config,
+		projectId,
+		sourceLanguage
+	]);
+	const { setStoredManifest, addLanguage } = useTranslationStore();
 	const checkForUpdates = useCallback(async () => {
-		if (!config || !projectId || isCheckingRef.current) return;
-		if (config.enabled !== true) return;
+		const currentConfig = configRef.current;
+		const currentProjectId = projectIdRef.current;
+		const currentSourceLanguage = sourceLanguageRef.current;
+		if (!currentConfig || !currentProjectId || isCheckingRef.current) return;
+		if (currentConfig.enabled !== true) return;
 		isCheckingRef.current = true;
 		try {
 			console.log("[ciao-tools] Checking for hot updates...");
-			const manifest = await fetchLatestManifest(projectId);
-			if (!manifest) {
+			const latestManifest = await fetchLatestManifest(currentProjectId);
+			if (!latestManifest) {
 				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;
+			console.log("[ciao-tools] Found latest.json, version:", latestManifest.version);
+			const currentManifest = useTranslationStore.getState().storedManifest;
+			const currentVersion = currentManifest?.serverVersion ?? null;
+			const isFirstCheck = currentVersion === null;
+			const hasNewVersion = currentVersion !== null && latestManifest.version > currentVersion;
 			if (isFirstCheck || hasNewVersion) {
-				if (Object.keys(manifest.urls).length > 0) {
+				if (Object.keys(latestManifest.urls).length > 0) {
 					const reason = hasNewVersion ? "new version" : "first check";
 					console.log(`[ciao-tools] Fetching translations (${reason})...`);
-					if (hasNewVersion) await clearCache(projectId);
+					if (hasNewVersion) await clearCache(currentProjectId);
 					const updatedLanguages = [];
-					for (const [langCode, url] of Object.entries(manifest.urls)) try {
+					for (const [langCode, url] of Object.entries(latestManifest.urls)) try {
 						const translations = await fetchTranslations(url);
 						addLanguage(langCode, translations);
-						await cacheTranslation(url, langCode, projectId, translations);
+						await cacheTranslation(url, langCode, currentProjectId, 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);
+						if (hasNewVersion && currentConfig.onTranslationsUpdated) currentConfig.onTranslationsUpdated(updatedLanguages);
 					}
 				}
-			} else console.log("[ciao-tools] Already up to date (version " + manifest.version + ")");
-			setServerVersion(manifest.version);
+				setStoredManifest({
+					serverVersion: latestManifest.version,
+					updatedAt: latestManifest.updatedAt,
+					projectId: currentProjectId,
+					sourceLanguage: currentManifest?.sourceLanguage ?? currentSourceLanguage ?? "en",
+					languages: Object.keys(latestManifest.urls),
+					cdnUrls: latestManifest.urls
+				});
+			} else console.log("[ciao-tools] Already up to date (version " + latestManifest.version + ")");
 		} catch (error) {
 			console.error("[ciao-tools] Hot update check failed:", error);
 		} finally {
 			isCheckingRef.current = false;
 		}
-	}, [
-		config,
-		projectId,
-		serverVersion,
-		setServerVersion,
-		addLanguage
-	]);
+	}, [setStoredManifest, addLanguage]);
 	useEffect(() => {
-		if (!config || !projectId) return;
-		if (config.enabled !== true) return;
+		const currentConfig = configRef.current;
+		const currentProjectId = projectIdRef.current;
+		if (!currentConfig || !currentProjectId) return;
+		if (currentConfig.enabled !== true) return;
+		if (typeof document === "undefined") return;
 		if (!hasCheckedOnMountRef.current) {
 			hasCheckedOnMountRef.current = true;
 			checkForUpdates();
@@ -403,22 +461,133 @@ function useHotUpdates(config, projectId) {
 		return () => {
 			document.removeEventListener("visibilitychange", handleVisibilityChange);
 		};
-	}, [
-		config,
-		projectId,
-		checkForUpdates
-	]);
+	}, [checkForUpdates]);
 	return { checkForUpdates };
 }
 
 //#endregion
-//#region src/components/CTProvider.tsx
-const PRELOAD_DELAY_MS = 5e3;
-async function fetchTranslationsFromCDN(url) {
-	const response = await fetch(url);
+//#region src/hooks/useManifest.ts
+function getManifestUrlsHash(manifest) {
+	if (!manifest) return "";
+	return JSON.stringify(manifest.cdnUrls);
+}
+function useManifest({ manifest }) {
+	const storedManifest = useTranslationStore((state) => state.storedManifest);
+	const effectiveManifest = useMemo(() => {
+		if (storedManifest && storedManifest.projectId === manifest?.projectId) return {
+			version: String(storedManifest.serverVersion),
+			projectId: storedManifest.projectId,
+			sourceLanguage: storedManifest.sourceLanguage,
+			languages: storedManifest.languages,
+			cdnUrls: storedManifest.cdnUrls,
+			generatedAt: storedManifest.updatedAt
+		};
+		return manifest;
+	}, [storedManifest, manifest]);
+	const manifestRef = useRef(effectiveManifest);
+	const previousManifestHashRef = useRef("");
+	const loadedUrlsRef = useRef(/* @__PURE__ */ new Map());
+	const hasManifestChangedRef = useRef(false);
+	useEffect(() => {
+		manifestRef.current = effectiveManifest;
+		const newHash = getManifestUrlsHash(effectiveManifest);
+		const oldHash = previousManifestHashRef.current;
+		if (oldHash && newHash && oldHash !== newHash) {
+			loadedUrlsRef.current.clear();
+			useTranslationStore.setState({ translations: {} });
+			hasManifestChangedRef.current = true;
+		} else hasManifestChangedRef.current = false;
+		previousManifestHashRef.current = newHash;
+	}, [effectiveManifest]);
+	return {
+		effectiveManifest,
+		manifestRef,
+		hasManifestChanged: hasManifestChangedRef.current,
+		loadedUrlsRef
+	};
+}
+
+//#endregion
+//#region src/hooks/useTranslationLoader.ts
+async function fetchTranslationsFromCDN(url, signal) {
+	const response = await fetch(url, { signal });
 	if (!response.ok) throw new Error(`Failed to fetch translations: ${response.statusText}`);
 	return response.json();
 }
+function useTranslationLoader({ manifestRef, loadedUrlsRef, hotUpdatesEnabled }) {
+	const addLanguage = useTranslationStore((state) => state.addLanguage);
+	const setLoading = useTranslationStore((state) => state.setLoading);
+	const setReady = useTranslationStore((state) => state.setReady);
+	const abortControllerRef = useRef(null);
+	return {
+		loadLanguage: 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) {
+				if (abortControllerRef.current) abortControllerRef.current.abort();
+				abortControllerRef.current = new AbortController();
+			}
+			const controller = isPreload ? void 0 : abortControllerRef.current;
+			if (!isPreload) {
+				setLoading(true);
+				setReady(false);
+			}
+			const useCache = hotUpdatesEnabled !== true;
+			try {
+				if (useCache) {
+					const cached = await getCachedTranslation(cdnUrl);
+					if (cached) {
+						if (controller?.signal.aborted) return false;
+						addLanguage(language, cached);
+						loadedUrlsRef.current.set(language, cdnUrl);
+						if (!isPreload) {
+							setReady(true);
+							setLoading(false);
+						}
+						return true;
+					}
+				}
+				const translationData = await fetchTranslationsFromCDN(cdnUrl, controller?.signal);
+				if (controller?.signal.aborted) return false;
+				addLanguage(language, translationData);
+				loadedUrlsRef.current.set(language, cdnUrl);
+				if (useCache) await cacheTranslation(cdnUrl, language, currentManifest.projectId, translationData);
+				if (!isPreload) setReady(true);
+				return true;
+			} catch (error) {
+				if (error instanceof Error && error.name === "AbortError") return false;
+				console.error(`[ciao-tools] Failed to load translations for ${language}:`, error);
+				if (!isPreload) setReady(true);
+				return false;
+			} finally {
+				if (!isPreload) setLoading(false);
+			}
+		}, [
+			manifestRef,
+			loadedUrlsRef,
+			hotUpdatesEnabled,
+			addLanguage,
+			setLoading,
+			setReady
+		]),
+		abortControllerRef
+	};
+}
+
+//#endregion
+//#region src/utils/browserLanguage.ts
 function detectBrowserLanguage(availableLanguages) {
 	if (typeof navigator === "undefined") return null;
 	const browserLangs = navigator.languages || [navigator.language];
@@ -430,43 +599,19 @@ function detectBrowserLanguage(availableLanguages) {
 	}
 	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 = true, fallback = null, preloadLanguages = true, preloadDelay = PRELOAD_DELAY_MS, hotUpdates }) {
-	const { loadTranslations, setLanguage, addLanguage, setLoading, setReady, currentLanguage, translations: storeTranslations, isReady, isHydrated } = useTranslationStore();
-	const manifestRef = useRef(manifest);
-	const loadedUrlsRef = useRef(/* @__PURE__ */ new Map());
-	const previousManifestHashRef = useRef("");
+
+//#endregion
+//#region src/hooks/useLanguageInit.ts
+function useLanguageInit({ effectiveManifest, availableLanguages, defaultLanguage, detectLanguage }) {
+	const isHydrated = useTranslationStore((state) => state.isHydrated);
+	const setLanguage = useTranslationStore((state) => state.setLanguage);
 	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 (!isHydrated) return;
 		if (initializedRef.current) return;
 		initializedRef.current = true;
 		const store = useTranslationStore.getState();
-		const effectiveLanguages = manifest ? [...manifest.languages] : availableLanguages || [];
+		const effectiveLanguages = effectiveManifest ? [...effectiveManifest.languages] : availableLanguages || [];
 		if (store.currentLanguage && store.currentLanguage !== "en" && effectiveLanguages.includes(store.currentLanguage)) return;
 		if (detectLanguage && effectiveLanguages.length > 0) {
 			const detected = detectBrowserLanguage(effectiveLanguages);
@@ -477,18 +622,95 @@ function CTProvider({ children, translations, manifest, defaultLanguage = "en",
 		}
 		if (defaultLanguage && defaultLanguage !== store.currentLanguage) setLanguage(defaultLanguage);
 	}, [
-		manifest,
+		effectiveManifest,
 		availableLanguages,
 		defaultLanguage,
 		detectLanguage,
 		setLanguage,
 		isHydrated
 	]);
+}
+
+//#endregion
+//#region src/hooks/usePreloader.ts
+function usePreloader({ effectiveManifest, currentLanguage, delay, enabled, loadLanguage }) {
+	const preloadTimeoutRef = useRef(null);
+	const isMountedRef = useRef(true);
+	useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	useEffect(() => {
+		if (!enabled || !effectiveManifest) return;
+		if (preloadTimeoutRef.current) clearTimeout(preloadTimeoutRef.current);
+		preloadTimeoutRef.current = setTimeout(async () => {
+			if (!isMountedRef.current) return;
+			const languages = [...effectiveManifest.languages];
+			for (const language of languages) {
+				if (!isMountedRef.current) break;
+				if (language === effectiveManifest.sourceLanguage) continue;
+				if (language === currentLanguage) continue;
+				await loadLanguage(language, true);
+			}
+		}, delay);
+		return () => {
+			if (preloadTimeoutRef.current) clearTimeout(preloadTimeoutRef.current);
+		};
+	}, [
+		effectiveManifest,
+		currentLanguage,
+		enabled,
+		delay,
+		loadLanguage
+	]);
+}
+
+//#endregion
+//#region src/components/CiaoProvider.tsx
+const PRELOAD_DELAY_MS = 5e3;
+function CiaoProvider({ children, translations, manifest, defaultLanguage = "en", availableLanguages, onLanguageChange, detectLanguage = true, blockUntilReady = true, fallback = null, preloadLanguages = true, preloadDelay = PRELOAD_DELAY_MS, hotUpdates }) {
+	const loadTranslations = useTranslationStore((state) => state.loadTranslations);
+	const setReady = useTranslationStore((state) => state.setReady);
+	const currentLanguage = useTranslationStore((state) => state.currentLanguage);
+	const isReady = useTranslationStore((state) => state.isReady);
+	const isHydrated = useTranslationStore((state) => state.isHydrated);
+	const { effectiveManifest, manifestRef, loadedUrlsRef } = useManifest({ manifest });
+	const { loadLanguage, abortControllerRef } = useTranslationLoader({
+		manifestRef,
+		loadedUrlsRef,
+		hotUpdatesEnabled: hotUpdates?.enabled
+	});
+	useLanguageInit({
+		effectiveManifest,
+		availableLanguages,
+		defaultLanguage,
+		detectLanguage
+	});
+	usePreloader({
+		effectiveManifest,
+		currentLanguage,
+		delay: preloadDelay,
+		enabled: preloadLanguages,
+		loadLanguage
+	});
+	useHotUpdates(hotUpdates, manifest?.projectId, manifest?.sourceLanguage);
+	useEffect(() => {
+		if (translations) {
+			loadTranslations(translations);
+			setReady(true);
+		}
+	}, [
+		translations,
+		loadTranslations,
+		setReady
+	]);
 	useEffect(() => {
-		const effectiveLanguages = manifest ? [...manifest.languages] : availableLanguages;
-		if (effectiveLanguages) {
+		const languagesList = effectiveManifest ? [...effectiveManifest.languages] : availableLanguages;
+		if (languagesList) {
 			const store = useTranslationStore.getState();
-			const merged = [...new Set([...store.availableLanguages, ...effectiveLanguages])];
+			const merged = [...new Set([...store.availableLanguages, ...languagesList])];
 			useTranslationStore.setState({
 				availableLanguages: merged,
 				defaultLanguage
@@ -496,97 +718,32 @@ function CTProvider({ children, translations, manifest, defaultLanguage = "en",
 		}
 	}, [
 		availableLanguages,
-		manifest,
+		effectiveManifest,
 		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 (!isHydrated) return;
-		if (currentLanguage === manifest?.sourceLanguage) {
+		if (currentLanguage === effectiveManifest?.sourceLanguage) {
 			setReady(true);
 			return;
 		}
-		if (manifest && currentLanguage) loadLanguageFromCDN(currentLanguage, false);
-		else if (!manifest) setReady(true);
+		if (effectiveManifest && currentLanguage) loadLanguage(currentLanguage, false);
+		else if (!effectiveManifest) setReady(true);
 	}, [
-		manifest,
+		effectiveManifest,
 		currentLanguage,
-		loadLanguageFromCDN,
+		loadLanguage,
 		setReady,
 		isHydrated
 	]);
-	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);
+	useEffect(() => {
+		return () => {
+			abortControllerRef.current?.abort();
+		};
+	}, [abortControllerRef]);
 	if (blockUntilReady && (!isReady || !isHydrated)) return /* @__PURE__ */ React.createElement(React.Fragment, null, fallback);
 	return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 }
@@ -878,6 +1035,7 @@ function useCt() {
 
 //#endregion
 //#region src/components/Trans.tsx
+const TAG_REGEX = /<(\d+)>(.*?)<\/\1>/gs;
 function parseChildren(children) {
 	const elements = [];
 	let template = "";
@@ -903,11 +1061,10 @@ 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) {
+	TAG_REGEX.lastIndex = 0;
+	while ((match = TAG_REGEX.exec(translated)) !== null) {
 		if (match.index > lastIndex) {
 			const textBefore = translated.slice(lastIndex, match.index);
 			if (textBefore) result.push(textBefore);
@@ -977,6 +1134,11 @@ function useLanguage() {
 		availableLanguagesInfo: availableLanguages.map(getFullLanguageInfo),
 		setLanguage,
 		cycleLanguage: useCallback(() => {
+			if (availableLanguages.length === 0) {
+				console.warn("[ciao-tools] Cannot cycle language: no languages available");
+				return;
+			}
+			if (availableLanguages.length === 1) return;
 			setLanguage(availableLanguages[(availableLanguages.indexOf(currentLanguage) + 1) % availableLanguages.length]);
 		}, [
 			availableLanguages,
@@ -989,5 +1151,5 @@ function useLanguage() {
 }
 
 //#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 };
+export { CTContextBlock, CiaoProvider as CTProvider, CiaoProvider, 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