funuicss 3.8.7 → 3.8.8

package/ui/theme/theme.js

@@ -70,7 +70,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPaginatedRecords = exports.useBucketCache = exports.useAllJsonRecords = exports.usePaginatedRecords = exports.useBucketJsonFiles = exports.useBucketsByCategory = exports.useBucket = exports.useBuckets = exports.useDocumentAssets = exports.useAudioAssets = exports.useVideoAssets = exports.useImageAssets = exports.useAssetsByType = exports.useAssetInfo = exports.useAssetType = exports.useAssetValue = exports.useAsset = exports.useAssets = exports.getAssetInfo = exports.getAssetType = exports.getAssetValue = exports.getAllAssets = exports.getAsset = exports.useVariable = exports.useVariables = exports.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.getAllVariables = exports.getVariable = exports.useVariant = exports.useTheme = void 0;
+exports.getPaginatedRecords = exports.useBucketCache = exports.useAllJsonRecords = exports.usePaginatedRecords = exports.useBucketJsonFiles = exports.useBucketsByCategory = exports.useBucket = exports.useBuckets = exports.useDocumentAssets = exports.useAudioAssets = exports.useVideoAssets = exports.useImageAssets = exports.useAssetsByType = exports.useAssetInfo = exports.useAssetType = exports.useAssetValue = exports.useAsset = exports.useAssets = exports.getAssetInfo = exports.getAssetType = exports.getAssetValue = exports.getAllAssets = exports.getAsset = exports.useVariable = exports.useVariables = exports.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.getAllVariables = exports.getVariable = exports.clearGlobalProjectId = exports.getGlobalProjectId = exports.setGlobalProjectId = exports.useVariant = exports.useTheme = void 0;
 var react_1 = __importStar(require("react"));
 var themes_1 = require("./themes");
 var darkenUtils_1 = require("./darkenUtils");
@@ -98,6 +98,57 @@ var useVariant = function () {
 };
 exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
+/*                          GLOBAL PROJECT ID                                 */
+/* -------------------------------------------------------------------------- */
+// Global variable to store the project ID
+var globalProjectId = null;
+// Function to set the global project ID
+var setGlobalProjectId = function (id) {
+    globalProjectId = id;
+    console.log("\uD83C\uDF0D Global project ID set to: ".concat(id));
+};
+exports.setGlobalProjectId = setGlobalProjectId;
+// Function to get the global project ID
+var getGlobalProjectId = function () {
+    return globalProjectId;
+};
+exports.getGlobalProjectId = getGlobalProjectId;
+// Function to clear the global project ID
+var clearGlobalProjectId = function () {
+    globalProjectId = null;
+    console.log('🌍 Global project ID cleared');
+};
+exports.clearGlobalProjectId = clearGlobalProjectId;
+// Function to read project ID from a file
+var readProjectIdFromFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+    var text, data, error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, file.text()];
+            case 1:
+                text = _a.sent();
+                data = JSON.parse(text);
+                // Check for project_id field
+                if (data.project_id) {
+                    return [2 /*return*/, data.project_id];
+                }
+                // Also check for projectId (camelCase)
+                if (data.projectId) {
+                    return [2 /*return*/, data.projectId];
+                }
+                console.warn('⚠️ Project file does not contain a project_id field');
+                return [2 /*return*/, null];
+            case 2:
+                error_1 = _a.sent();
+                console.error('❌ Error reading project file:', error_1);
+                return [2 /*return*/, null];
+            case 3: return [2 /*return*/];
+        }
+    });
+}); };
+/* -------------------------------------------------------------------------- */
 /*                          ORIGIN VALIDATION                                 */
 /* -------------------------------------------------------------------------- */
 var getCurrentOrigin = function () {
@@ -113,7 +164,7 @@ var getCurrentOrigin = function () {
     return domain;
 };
 var validateOriginAccess = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
-    var currentOrigin, projectData, trustedDomains, hasAccess, error_1;
+    var currentOrigin, projectData, trustedDomains, hasAccess, error_2;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -149,8 +200,8 @@ var validateOriginAccess = function (projectId) { return __awaiter(void 0, void
                 }
                 return [2 /*return*/, true];
             case 3:
-                error_1 = _a.sent();
-                console.error('❌ Error during origin validation:', error_1);
+                error_2 = _a.sent();
+                console.error('❌ Error during origin validation:', error_2);
                 return [2 /*return*/, false];
             case 4: return [2 /*return*/];
         }
@@ -160,7 +211,7 @@ var validateOriginAccess = function (projectId) { return __awaiter(void 0, void
 /*                          LOCAL FILE MANAGEMENT                             */
 /* -------------------------------------------------------------------------- */
 var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var response, data, error_2;
+    var response, data, error_3;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -177,7 +228,7 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
                 return [2 /*return*/, data];
             case 3: return [3 /*break*/, 5];
             case 4:
-                error_2 = _a.sent();
+                error_3 = _a.sent();
                 console.log('ℹ️ No local theme file found');
                 return [3 /*break*/, 5];
             case 5: return [2 /*return*/, null];
@@ -188,7 +239,7 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
 /*                          CDN THEME LOADER                                  */
 /* -------------------------------------------------------------------------- */
 var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
-    var publicUrl, response, data, error_3;
+    var publicUrl, response, data, error_4;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -215,8 +266,8 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
                 _a.label = 5;
             case 5: return [3 /*break*/, 7];
             case 6:
-                error_3 = _a.sent();
-                console.error('❌ Error loading from Firebase Storage:', error_3);
+                error_4 = _a.sent();
+                console.error('❌ Error loading from Firebase Storage:', error_4);
                 return [3 /*break*/, 7];
             case 7: return [2 /*return*/, null];
         }
@@ -245,7 +296,7 @@ var cleanExpiredCache = function () {
 };
 // Load JSON file with caching and performance optimizations
 var loadBucketJsonFromCDN = function (bucketSanitizedName, projectId, page) { return __awaiter(void 0, void 0, void 0, function () {
-    var cacheKey, cached, pageNumber, publicUrl, controller_1, timeoutId, response, data, error_4;
+    var cacheKey, cached, pageNumber, publicUrl, controller_1, timeoutId, response, data, error_5;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -295,12 +346,12 @@ var loadBucketJsonFromCDN = function (bucketSanitizedName, projectId, page) { re
             return [2 /*return*/, null];
             case 5: return [3 /*break*/, 7];
             case 6:
-                error_4 = _a.sent();
-                if (error_4 instanceof DOMException && error_4.name === 'AbortError') {
+                error_5 = _a.sent();
+                if (error_5 instanceof DOMException && error_5.name === 'AbortError') {
                     console.error("\u23F0 Timeout loading JSON file for page ".concat(page));
                 }
                 else {
-                    console.error("\u274C Error loading JSON file for page ".concat(page, ":"), error_4);
+                    console.error("\u274C Error loading JSON file for page ".concat(page, ":"), error_5);
                 }
                 return [2 /*return*/, null];
             case 7: return [2 /*return*/];
@@ -309,7 +360,7 @@ var loadBucketJsonFromCDN = function (bucketSanitizedName, projectId, page) { re
 }); };
 // Parallel loading for multiple pages
 var loadMultipleJsonPages = function (bucketSanitizedName, projectId, pages) { return __awaiter(void 0, void 0, void 0, function () {
-    var promises, results, error_5;
+    var promises, results, error_6;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -322,15 +373,15 @@ var loadMultipleJsonPages = function (bucketSanitizedName, projectId, pages) { r
                 results = _a.sent();
                 return [2 /*return*/, results.filter(Boolean)];
             case 2:
-                error_5 = _a.sent();
-                console.error('❌ Error loading multiple JSON pages:', error_5);
+                error_6 = _a.sent();
+                console.error('❌ Error loading multiple JSON pages:', error_6);
                 return [2 /*return*/, []];
             case 3: return [2 /*return*/];
         }
     });
 }); };
 var listBucketJsonFiles = function (bucketSanitizedName, projectId) { return __awaiter(void 0, void 0, void 0, function () {
-    var files, page, hasMoreFiles, batchSize, pageChecks, batchPromises, i, paddedPage, publicUrl, responses, i, currentPage, paddedPage, publicUrl, error_6;
+    var files, page, hasMoreFiles, batchSize, pageChecks, batchPromises, i, paddedPage, publicUrl, responses, i, currentPage, paddedPage, publicUrl, error_7;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -383,8 +434,8 @@ var listBucketJsonFiles = function (bucketSanitizedName, projectId) { return __a
                 return [3 /*break*/, 2];
             case 4: return [2 /*return*/, files];
             case 5:
-                error_6 = _a.sent();
-                console.error('❌ Error listing JSON files:', error_6);
+                error_7 = _a.sent();
+                console.error('❌ Error listing JSON files:', error_7);
                 return [2 /*return*/, []];
             case 6: return [2 /*return*/];
         }
@@ -483,7 +534,7 @@ var transformProjectBucket = function (bucket, projectId) {
 /*                                COMPONENT                                   */
 /* -------------------------------------------------------------------------- */
 var ThemeProvider = function (_a) {
-    var theme = _a.theme, children = _a.children, _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.minHeight, minHeight = _c === void 0 ? '100vh' : _c, projectId = _a.projectId, providedProject = _a.project;
+    var theme = _a.theme, children = _a.children, _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.minHeight, minHeight = _c === void 0 ? '100vh' : _c, propProjectId = _a.projectId, providedProject = _a.project, projectFile = _a.projectFile;
     var _d = (0, react_1.useState)('standard'), variant = _d[0], setVariant = _d[1];
     var _e = (0, react_1.useState)({}), themeConfig = _e[0], setThemeConfig = _e[1];
     var _f = (0, react_1.useState)(null), projectData = _f[0], setProjectData = _f[1];
@@ -491,6 +542,8 @@ var ThemeProvider = function (_a) {
     var _h = (0, react_1.useState)(true), isInitialLoad = _h[0], setIsInitialLoad = _h[1];
     var _j = (0, react_1.useState)(null), error = _j[0], setError = _j[1];
     var _k = (0, react_1.useState)(null), currentVersion = _k[0], setCurrentVersion = _k[1];
+    // Determine the actual project ID to use
+    var _l = (0, react_1.useState)(propProjectId), actualProjectId = _l[0], setActualProjectId = _l[1];
     /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
@@ -522,20 +575,56 @@ var ThemeProvider = function (_a) {
         var root = document.documentElement;
         var pollTimer;
         var loadTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var finalTheme, finalVersion, localTheme, localVersion, hasAccess, cdnTheme, cdnVersion, err_1;
+            var finalTheme, finalVersion, finalProjectId, fileProjectId, text, fileData, localTheme, localVersion, projectIdToUse, hasAccess, cdnTheme, cdnVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 8, 9, 10]);
+                        _a.trys.push([0, 12, 13, 14]);
                         finalTheme = null;
                         finalVersion = null;
-                        // If project data is provided directly, use it and skip all loading
+                        finalProjectId = actualProjectId;
+                        if (!projectFile) return [3 /*break*/, 4];
+                        console.log('📁 Processing project file...');
+                        return [4 /*yield*/, readProjectIdFromFile(projectFile)];
+                    case 1:
+                        fileProjectId = _a.sent();
+                        if (!fileProjectId) return [3 /*break*/, 3];
+                        // Set global project ID
+                        (0, exports.setGlobalProjectId)(fileProjectId);
+                        setActualProjectId(fileProjectId);
+                        finalProjectId = fileProjectId;
+                        console.log("\u2705 Project ID from file: ".concat(fileProjectId));
+                        return [4 /*yield*/, projectFile.text()];
+                    case 2:
+                        text = _a.sent();
+                        fileData = JSON.parse(text);
+                        // Use the file data as the project data
+                        finalTheme = fileData;
+                        finalVersion = fileData.version || 0;
+                        // Apply theme immediately - fileData is guaranteed to be ProjectData here
+                        applyThemeData(fileData, root);
+                        setCurrentVersion(finalVersion);
+                        setError(null);
+                        setIsLoading(false);
+                        setIsInitialLoad(false);
+                        return [2 /*return*/]; // Skip all other loading logic
+                    case 3:
+                        console.warn('⚠️ Project file does not contain a project_id');
+                        _a.label = 4;
+                    case 4:
+                        // If project data is provided directly, use it
                         if (providedProject) {
                             console.log('✅ Using provided project data directly');
                             finalTheme = providedProject;
                             finalVersion = providedProject.version || 0;
-                            // Apply theme immediately
-                            applyThemeData(finalTheme, root);
+                            finalProjectId = providedProject.project_id || propProjectId;
+                            // Set global project ID if available
+                            if (finalProjectId) {
+                                (0, exports.setGlobalProjectId)(finalProjectId);
+                                setActualProjectId(finalProjectId);
+                            }
+                            // Apply theme immediately - providedProject is guaranteed to be ProjectData here
+                            applyThemeData(providedProject, root);
                             setCurrentVersion(finalVersion);
                             setError(null);
                             setIsLoading(false);
@@ -543,16 +632,17 @@ var ThemeProvider = function (_a) {
                             return [2 /*return*/]; // Skip all other loading logic
                         }
                         return [4 /*yield*/, loadLocalTheme()];
-                    case 1:
+                    case 5:
                         localTheme = _a.sent();
                         localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
-                        if (!projectId) return [3 /*break*/, 6];
-                        return [4 /*yield*/, validateOriginAccess(projectId)];
-                    case 2:
+                        projectIdToUse = finalProjectId || (0, exports.getGlobalProjectId)() || propProjectId;
+                        if (!projectIdToUse) return [3 /*break*/, 10];
+                        return [4 /*yield*/, validateOriginAccess(projectIdToUse)];
+                    case 6:
                         hasAccess = _a.sent();
-                        if (!hasAccess) return [3 /*break*/, 4];
-                        return [4 /*yield*/, loadThemeFromCDN(projectId)];
-                    case 3:
+                        if (!hasAccess) return [3 /*break*/, 8];
+                        return [4 /*yield*/, loadThemeFromCDN(projectIdToUse)];
+                    case 7:
                         cdnTheme = _a.sent();
                         cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
                         if (cdnTheme) {
@@ -575,8 +665,8 @@ var ThemeProvider = function (_a) {
                             console.warn('⚠️ No theme found (CDN unavailable and no local theme)');
                             setError('Theme not found');
                         }
-                        return [3 /*break*/, 5];
-                    case 4:
+                        return [3 /*break*/, 9];
+                    case 8:
                         // Origin validation failed
                         if (localTheme) {
                             console.log('⚠️ Origin validation failed, using local theme');
@@ -587,9 +677,9 @@ var ThemeProvider = function (_a) {
                             console.error('❌ Origin validation failed and no local theme available');
                             setError('Access denied and no local theme available');
                         }
-                        _a.label = 5;
-                    case 5: return [3 /*break*/, 7];
-                    case 6:
+                        _a.label = 9;
+                    case 9: return [3 /*break*/, 11];
+                    case 10:
                         // No project ID provided - only use local theme
                         console.log('ℹ️ No project ID provided, using local theme only');
                         if (localTheme) {
@@ -601,10 +691,12 @@ var ThemeProvider = function (_a) {
                             console.log('ℹ️ No local theme file found - using base theme only');
                             // No error here - it's valid to use only base theme
                         }
-                        _a.label = 7;
-                    case 7:
+                        _a.label = 11;
+                    case 11:
                         // Apply the theme if we have one
+                        // Check if finalTheme is not null before calling applyThemeData
                         if (finalTheme && (!currentVersion || finalVersion !== currentVersion)) {
+                            // finalTheme is guaranteed to be ProjectData here because we checked it's not null
                             applyThemeData(finalTheme, root);
                             setCurrentVersion(finalVersion);
                             setError(null);
@@ -612,26 +704,26 @@ var ThemeProvider = function (_a) {
                         else if (finalTheme) {
                             console.log('✓ Theme up to date');
                         }
-                        return [3 /*break*/, 10];
-                    case 8:
+                        return [3 /*break*/, 14];
+                    case 12:
                         err_1 = _a.sent();
                         console.error('❌ Error loading theme:', err_1);
                         setError('Failed to load theme');
-                        return [3 /*break*/, 10];
-                    case 9:
+                        return [3 /*break*/, 14];
+                    case 13:
                         setIsLoading(false);
                         setIsInitialLoad(false);
                         return [7 /*endfinally*/];
-                    case 10: return [2 /*return*/];
+                    case 14: return [2 /*return*/];
                 }
             });
         }); };
         // Only load theme if no project is provided
-        if (!providedProject) {
+        if (!providedProject && !projectFile) {
             // Initial load
             loadTheme();
             // Only poll for updates if we have a project ID
-            if (projectId) {
+            if (actualProjectId) {
                 pollTimer = setInterval(function () {
                     loadTheme();
                 }, 5 * 60 * 1000);
@@ -643,18 +735,21 @@ var ThemeProvider = function (_a) {
             };
         }
         else {
-            // If project is provided, skip loading and set state directly
-            console.log('✅ Using provided project data, skipping theme loading');
-            applyThemeData(providedProject, document.documentElement);
-            setCurrentVersion(providedProject.version || 0);
+            // If project or file is provided, skip loading and set state directly
+            console.log('✅ Using provided project data/file, skipping theme loading');
+            if (providedProject) {
+                applyThemeData(providedProject, document.documentElement);
+                setCurrentVersion(providedProject.version || 0);
+            }
             setIsLoading(false);
             setIsInitialLoad(false);
         }
-    }, [projectId, currentVersion, theme, providedProject]); // Added providedProject to dependencies
+    }, [propProjectId, actualProjectId, currentVersion, theme, providedProject, projectFile]);
     var applyThemeData = function (data, root) {
         var _a;
         var themeConfig = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
         var newVariant = data.default_variation || 'standard';
+        var projectId = data.project_id || actualProjectId;
         setVariant(newVariant);
         setThemeConfig(themeConfig);
         setProjectData(data);
@@ -665,10 +760,15 @@ var ThemeProvider = function (_a) {
         // Cache for bucket access
         var projectBuckets = data.buckets || [];
         cachedBuckets = projectBuckets.map(function (bucket) {
-            return transformProjectBucket(bucket, data.project_id || '');
+            return transformProjectBucket(bucket, projectId || '');
         });
         // Apply all theme config to CSS variables
         applyThemeConfig(themeConfig, root);
+        // Update global project ID if available
+        if (projectId) {
+            (0, exports.setGlobalProjectId)(projectId);
+            setActualProjectId(projectId);
+        }
     };
     var contextValue = (0, react_1.useMemo)(function () { return ({
         variant: variant,
@@ -678,8 +778,8 @@ var ThemeProvider = function (_a) {
         isLoading: isLoading,
         isInitialLoad: isInitialLoad,
         error: error,
-        projectId: projectId,
-    }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error, projectId]);
+        projectId: actualProjectId, // Use actual project ID in context
+    }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error, actualProjectId]);
     return (react_1.default.createElement(ThemeContext.Provider, { value: contextValue },
         react_1.default.createElement("div", { className: "theme-".concat(theme, " ").concat(funcss), style: {
                 backgroundColor: 'var(--page-bg)',
@@ -874,8 +974,9 @@ var useBuckets = function () {
     var _a = (0, react_1.useState)([]), buckets = _a[0], setBuckets = _a[1];
     (0, react_1.useEffect)(function () {
         if (projectData === null || projectData === void 0 ? void 0 : projectData.buckets) {
+            var projectId_1 = projectData.project_id || (0, exports.getGlobalProjectId)() || '';
             var transformedBuckets = projectData.buckets.map(function (bucket) {
-                return transformProjectBucket(bucket, projectData.project_id || '');
+                return transformProjectBucket(bucket, projectId_1);
             });
             setBuckets(transformedBuckets);
             cachedBuckets = transformedBuckets;
@@ -1409,6 +1510,24 @@ exports.getPaginatedRecords = getPaginatedRecords;
 // /* -------------------------------------------------------------------------- */
 // /*                          BUCKET JSON LOADER                                */
 // /* -------------------------------------------------------------------------- */
+// // Cache for JSON responses
+// const jsonFileCache = new Map<string, { data: JsonFileData; timestamp: number }>()
+// const CACHE_DURATION = 5 * 60 * 1000 // 5 minutes
+// // Helper function to get cache key
+// const getCacheKey = (bucketSanitizedName: string, projectId: string, page: number): string => {
+//   return `${projectId}:${bucketSanitizedName}:${page}`
+// }
+// // Helper function to clean expired cache entries
+// const cleanExpiredCache = () => {
+//   const now = Date.now()
+//   for (const key of Array.from(jsonFileCache.keys())) {
+//     const entry = jsonFileCache.get(key) 
+//     if (entry && now - entry.timestamp > CACHE_DURATION) {
+//       jsonFileCache.delete(key)
+//     }
+//   }
+//   }
+// // Load JSON file with caching and performance optimizations
 // const loadBucketJsonFromCDN = async (
 //   bucketSanitizedName: string, 
 //   projectId: string, 
@@ -1418,26 +1537,67 @@ exports.getPaginatedRecords = getPaginatedRecords;
 //     console.error('❌ Missing parameters for JSON loading')
 //     return null
 //   }
+//   // Clean expired cache entries periodically
+//   if (jsonFileCache.size > 100) { // Only clean when cache gets large
+//     cleanExpiredCache()
+//   }
+//   // Check cache first
+//   const cacheKey = getCacheKey(bucketSanitizedName, projectId, page)
+//   const cached = jsonFileCache.get(cacheKey)
+//   if (cached && (Date.now() - cached.timestamp < CACHE_DURATION)) {
+//     console.log(`📦 Returning cached data for page ${page}`)
+//     return cached.data
+//   }
 //   try {
 //     // Construct the URL for JSON files
 //     const pageNumber = page.toString()
 //     const publicUrl = `https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/projects%2F${projectId}%2Fbuckets%2F${bucketSanitizedName}%2F${pageNumber}.json?alt=media`
+//     // Use AbortController for request timeout
+//     const controller = new AbortController()
+//     const timeoutId = setTimeout(() => controller.abort(), 10000) // 10 second timeout
 //     const response = await fetch(publicUrl, {
 //       cache: 'no-cache',
+//       signal: controller.signal
 //     })
+//     clearTimeout(timeoutId)
 //     if (response.ok) {
 //       const data = await response.json()
-//       console.log(data)
+//       // Cache the response
+//       jsonFileCache.set(cacheKey, {
+//         data,
+//         timestamp: Date.now()
+//       })
 //       return data
 //     } else {
 //       // File might not exist (e.g., page out of range)
 //       return null
 //     }
 //   } catch (error) {
-//     console.error(`❌ Error loading JSON file for page ${page}:`, error)
+//     if (error instanceof DOMException && error.name === 'AbortError') {
+//       console.error(`⏰ Timeout loading JSON file for page ${page}`)
+//     } else {
+//       console.error(`❌ Error loading JSON file for page ${page}:`, error)
+//     }
 //     return null
 //   }
 // }
+// // Parallel loading for multiple pages
+// const loadMultipleJsonPages = async (
+//   bucketSanitizedName: string, 
+//   projectId: string, 
+//   pages: number[]
+// ): Promise<(JsonFileData | null)[]> => {
+//   try {
+//     const promises = pages.map(page => 
+//       loadBucketJsonFromCDN(bucketSanitizedName, projectId, page)
+//     )
+//     const results = await Promise.all(promises)
+//     return results.filter(Boolean) as JsonFileData[]
+//   } catch (error) {
+//     console.error('❌ Error loading multiple JSON pages:', error)
+//     return []
+//   }
+// }
 // const listBucketJsonFiles = async (
 //   bucketSanitizedName: string, 
 //   projectId: string
@@ -1450,24 +1610,39 @@ exports.getPaginatedRecords = getPaginatedRecords;
 //     const files: JsonFileInfo[] = []
 //     let page = 1
 //     let hasMoreFiles = true
+//     // Check multiple pages in parallel for faster discovery
+//     const batchSize = 5
+//     const pageChecks = []
 //     while (hasMoreFiles && page <= 100) {
-//       const paddedPage = page.toString().padStart(3, '0')
-//       const publicUrl = `https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/projects%2F${projectId}%2Fbuckets%2F${bucketSanitizedName}%2Fpage_${paddedPage}.json?alt=media`
-//       const response = await fetch(publicUrl, {
-//         method: 'HEAD',
-//         cache: 'no-cache',
-//       })
-//       if (response.ok) {
-//         files.push({
-//           name: `page_${paddedPage}.json`,
-//           fullPath: `projects/${projectId}/buckets/${bucketSanitizedName}/page_${paddedPage}.json`,
-//           url: publicUrl,
-//           size: parseInt(response.headers.get('content-length') || '0', 10),
-//           page: page
-//         })
+//       const batchPromises = []
+//       for (let i = 0; i < batchSize && page <= 100; i++) {
+//         const paddedPage = page.toString().padStart(3, '0')
+//         const publicUrl = `https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/projects%2F${projectId}%2Fbuckets%2F${bucketSanitizedName}%2Fpage_${paddedPage}.json?alt=media`
+//         batchPromises.push(
+//           fetch(publicUrl, {
+//             method: 'HEAD',
+//             cache: 'no-cache',
+//           })
+//         )
 //         page++
-//       } else {
-//         hasMoreFiles = false
+//       }
+//       const responses = await Promise.all(batchPromises)
+//       for (let i = 0; i < responses.length; i++) {
+//         if (responses[i].ok) {
+//           const currentPage = page - batchSize + i
+//           const paddedPage = currentPage.toString().padStart(3, '0')
+//           const publicUrl = `https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/projects%2F${projectId}%2Fbuckets%2F${bucketSanitizedName}%2Fpage_${paddedPage}.json?alt=media`
+//           files.push({
+//             name: `page_${paddedPage}.json`,
+//             fullPath: `projects/${projectId}/buckets/${bucketSanitizedName}/page_${paddedPage}.json`,
+//             url: publicUrl,
+//             size: parseInt(responses[i].headers.get('content-length') || '0', 10),
+//             page: currentPage
+//           })
+//         } else {
+//           hasMoreFiles = false
+//           break
+//         }
 //       }
 //     }
 //     return files
@@ -1540,7 +1715,6 @@ exports.getPaginatedRecords = getPaginatedRecords;
 // const transformProjectBucket = (bucket: any, projectId: string): Bucket => {
 //   return {
 //     id: bucket.id || bucket._id || '',
-//     // projectId: bucket.projectId || projectId || '',
 //     name: bucket.name || '',
 //     displayName: bucket.displayName || bucket.name || '',
 //     category: bucket.category || 'uncategorized',
@@ -1616,59 +1790,65 @@ exports.getPaginatedRecords = getPaginatedRecords;
 //           console.log('✅ Using provided project data directly')
 //           finalTheme = providedProject
 //           finalVersion = providedProject.version || 0
-//         } else {
-//           // Otherwise, follow the normal loading flow
-//           // First, try to load local theme
-//           const localTheme = await loadLocalTheme()
-//           const localVersion = localTheme?.version || 0
-//           if (projectId) {
-//             // Validate origin access for CDN
-//             const hasAccess = await validateOriginAccess(projectId)
-//             if (hasAccess) {
-//               // Try to load from CDN
-//               const cdnTheme = await loadThemeFromCDN(projectId)
-//               const cdnVersion = cdnTheme?.version || 0
-//               if (cdnTheme) {
-//                 // CDN theme available - use it
-//                 finalTheme = cdnTheme
-//                 finalVersion = cdnVersion
-//                 if (cdnVersion !== localVersion) {
-//                   console.log(`🔄 Version mismatch: Local(${localVersion}) vs CDN(${cdnVersion})`)
-//                   console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.')
-//                 }
-//               } else if (localTheme) {
-//                 // CDN not available but we have local theme
-//                 console.log('⚠️ CDN unavailable, using local theme')
-//                 finalTheme = localTheme
-//                 finalVersion = localVersion
-//               } else {
-//                 // No theme available anywhere
-//                 console.warn('⚠️ No theme found (CDN unavailable and no local theme)')
-//                 setError('Theme not found')
+//           // Apply theme immediately
+//           applyThemeData(finalTheme, root)
+//           setCurrentVersion(finalVersion)
+//           setError(null)
+//           setIsLoading(false)
+//           setIsInitialLoad(false)
+//           return // Skip all other loading logic
+//         }
+//         // Otherwise, follow the normal loading flow
+//         // First, try to load local theme
+//         const localTheme = await loadLocalTheme()
+//         const localVersion = localTheme?.version || 0
+//         if (projectId) {
+//           // Validate origin access for CDN
+//           const hasAccess = await validateOriginAccess(projectId)
+//           if (hasAccess) {
+//             // Try to load from CDN
+//             const cdnTheme = await loadThemeFromCDN(projectId)
+//             const cdnVersion = cdnTheme?.version || 0
+//             if (cdnTheme) {
+//               // CDN theme available - use it
+//               finalTheme = cdnTheme
+//               finalVersion = cdnVersion
+//               if (cdnVersion !== localVersion) {
+//                 console.log(`🔄 Version mismatch: Local(${localVersion}) vs CDN(${cdnVersion})`)
+//                 console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.')
 //               }
+//             } else if (localTheme) {
+//               // CDN not available but we have local theme
+//               console.log('⚠️ CDN unavailable, using local theme')
+//               finalTheme = localTheme
+//               finalVersion = localVersion
 //             } else {
-//               // Origin validation failed
-//               if (localTheme) {
-//                 console.log('⚠️ Origin validation failed, using local theme')
-//                 finalTheme = localTheme
-//                 finalVersion = localVersion
-//               } else {
-//                 console.error('❌ Origin validation failed and no local theme available')
-//                 setError('Access denied and no local theme available')
-//               }
+//               // No theme available anywhere
+//               console.warn('⚠️ No theme found (CDN unavailable and no local theme)')
+//               setError('Theme not found')
 //             }
 //           } else {
-//             // No project ID provided - only use local theme
-//             console.log('ℹ️ No project ID provided, using local theme only')
+//             // Origin validation failed
 //             if (localTheme) {
+//               console.log('⚠️ Origin validation failed, using local theme')
 //               finalTheme = localTheme
 //               finalVersion = localVersion
-//               console.log('✅ Theme loaded from local file')
 //             } else {
-//               console.log('ℹ️ No local theme file found - using base theme only')
-//               // No error here - it's valid to use only base theme
+//               console.error('❌ Origin validation failed and no local theme available')
+//               setError('Access denied and no local theme available')
 //             }
 //           }
+//         } else {
+//           // No project ID provided - only use local theme
+//           console.log('ℹ️ No project ID provided, using local theme only')
+//           if (localTheme) {
+//             finalTheme = localTheme
+//             finalVersion = localVersion
+//             console.log('✅ Theme loaded from local file')
+//           } else {
+//             console.log('ℹ️ No local theme file found - using base theme only')
+//             // No error here - it's valid to use only base theme
+//           }
 //         }
 //         // Apply the theme if we have one
 //         if (finalTheme && (!currentVersion || finalVersion !== currentVersion)) {
@@ -1686,18 +1866,28 @@ exports.getPaginatedRecords = getPaginatedRecords;
 //         setIsInitialLoad(false)
 //       }
 //     }
-//     // Initial load
-//     loadTheme()
-//     // Only poll for updates if we have a project ID AND no provided project
-//     if (projectId && !providedProject) {
-//       pollTimer = setInterval(() => {
-//         loadTheme()
-//       }, 5 * 60 * 1000)
-//     }
-//     return () => {
-//       if (pollTimer) {
-//         clearInterval(pollTimer)
+//     // Only load theme if no project is provided
+//     if (!providedProject) {
+//       // Initial load
+//       loadTheme()
+//       // Only poll for updates if we have a project ID
+//       if (projectId) {
+//         pollTimer = setInterval(() => {
+//           loadTheme()
+//         }, 5 * 60 * 1000)
+//       }
+//       return () => {
+//         if (pollTimer) {
+//           clearInterval(pollTimer)
+//         }
 //       }
+//     } else {
+//       // If project is provided, skip loading and set state directly
+//       console.log('✅ Using provided project data, skipping theme loading')
+//       applyThemeData(providedProject, document.documentElement)
+//       setCurrentVersion(providedProject.version || 0)
+//       setIsLoading(false)
+//       setIsInitialLoad(false)
 //     }
 //   }, [projectId, currentVersion, theme, providedProject]) // Added providedProject to dependencies
 //   const applyThemeData = (data: ProjectData, root: HTMLElement) => {
@@ -1809,7 +1999,7 @@ exports.getPaginatedRecords = getPaginatedRecords;
 // let cachedAssets: Asset[] = []
 // export const getAsset = (name: string): Asset | undefined => {
 //   if (!cachedAssets.length) {
-//     console.warn('No assets available. Make sure ThemeProvider is mounted and assets are loaded.')
+//     console.warn('No assets available. Make sure ThemeProvider is mounted.')
 //     return undefined
 //   }
 //   const asset = cachedAssets.find(a => a.name === name)
@@ -2068,14 +2258,19 @@ exports.getPaginatedRecords = getPaginatedRecords;
 //     try {
 //       setLoading(true)
 //       setError(null)
+//       // Load pages in parallel for better performance
+//       const pageNumbers = files.map(file => file.page)
+//       const jsonDataArray = await loadMultipleJsonPages(
+//         sanitizeBucketName(bucket.displayName || bucket.name),
+//         projectId,
+//         pageNumbers
+//       )
 //       const allRecords: BucketRecord[] = []
-//       for (const file of files) {
-//         const bucketSanitizedName = sanitizeBucketName(bucket.displayName || bucket.name)
-//         const jsonData = await loadBucketJsonFromCDN(bucketSanitizedName, projectId, file.page)
+//       jsonDataArray.forEach(jsonData => {
 //         if (jsonData && jsonData.records) {
 //           allRecords.push(...jsonData.records)
 //         }
-//       }
+//       })
 //       setRecords(allRecords)
 //     } catch (err) {
 //       console.error('Error loading all records:', err)
@@ -2107,11 +2302,19 @@ exports.getPaginatedRecords = getPaginatedRecords;
 //           const cacheKey = `${bucket.id}_${projectId}`
 //           delete cachedJsonFiles[cacheKey]
 //           delete cachedJsonData[cacheKey]
+//           // Also clear JSON file cache
+//           const bucketSanitizedName = sanitizeBucketName(bucket.displayName || bucket.name)
+//           for (const key of Array.from(jsonFileCache.keys())) {
+//             if (key.startsWith(`${projectId}:${bucketSanitizedName}`)) {
+//               jsonFileCache.delete(key)
+//             }
+//           }
 //         }
 //       }
 //     } else {
 //       cachedJsonFiles = {}
 //       cachedJsonData = {}
+//       jsonFileCache.clear()
 //     }
 //   }, [])
 //   const refresh = useCallback(() => {