funuicss 3.7.15 → 3.8.0

package/ui/theme/theme.js

@@ -70,7 +70,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.useVariant = exports.useTheme = void 0;
 var react_1 = __importStar(require("react"));
 var themes_1 = require("./themes");
 var darkenUtils_1 = require("./darkenUtils");
@@ -82,6 +82,7 @@ var ThemeContext = (0, react_1.createContext)({
     isLoading: true,
     isInitialLoad: true,
     error: null,
+    projectId: undefined,
 });
 var useTheme = function () {
     var context = (0, react_1.useContext)(ThemeContext);
@@ -222,6 +223,95 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
     });
 }); };
 /* -------------------------------------------------------------------------- */
+/*                          BUCKET JSON LOADER                                */
+/* -------------------------------------------------------------------------- */
+var loadBucketJsonFromCDN = function (bucketSanitizedName, projectId, page) { return __awaiter(void 0, void 0, void 0, function () {
+    var pageNumber, publicUrl, response, data, error_4;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!bucketSanitizedName || !projectId) {
+                    console.error('❌ Missing parameters for JSON loading');
+                    return [2 /*return*/, null];
+                }
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 6, , 7]);
+                pageNumber = page.toString();
+                publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/projects%2F".concat(projectId, "%2Fbuckets%2F").concat(bucketSanitizedName, "%2F").concat(pageNumber, ".json?alt=media");
+                return [4 /*yield*/, fetch(publicUrl, {
+                        cache: 'no-cache',
+                    })];
+            case 2:
+                response = _a.sent();
+                if (!response.ok) return [3 /*break*/, 4];
+                return [4 /*yield*/, response.json()];
+            case 3:
+                data = _a.sent();
+                console.log(data);
+                return [2 /*return*/, data];
+            case 4: 
+            // File might not exist (e.g., page out of range)
+            return [2 /*return*/, null];
+            case 5: return [3 /*break*/, 7];
+            case 6:
+                error_4 = _a.sent();
+                console.error("\u274C Error loading JSON file for page ".concat(page, ":"), error_4);
+                return [2 /*return*/, null];
+            case 7: return [2 /*return*/];
+        }
+    });
+}); };
+var listBucketJsonFiles = function (bucketSanitizedName, projectId) { return __awaiter(void 0, void 0, void 0, function () {
+    var files, page, hasMoreFiles, paddedPage, publicUrl, response, error_5;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!bucketSanitizedName || !projectId) {
+                    console.error('❌ Missing parameters for listing JSON files');
+                    return [2 /*return*/, []];
+                }
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 5, , 6]);
+                files = [];
+                page = 1;
+                hasMoreFiles = true;
+                _a.label = 2;
+            case 2:
+                if (!(hasMoreFiles && page <= 100)) return [3 /*break*/, 4];
+                paddedPage = page.toString().padStart(3, '0');
+                publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/projects%2F".concat(projectId, "%2Fbuckets%2F").concat(bucketSanitizedName, "%2Fpage_").concat(paddedPage, ".json?alt=media");
+                return [4 /*yield*/, fetch(publicUrl, {
+                        method: 'HEAD',
+                        cache: 'no-cache',
+                    })];
+            case 3:
+                response = _a.sent();
+                if (response.ok) {
+                    files.push({
+                        name: "page_".concat(paddedPage, ".json"),
+                        fullPath: "projects/".concat(projectId, "/buckets/").concat(bucketSanitizedName, "/page_").concat(paddedPage, ".json"),
+                        url: publicUrl,
+                        size: parseInt(response.headers.get('content-length') || '0', 10),
+                        page: page
+                    });
+                    page++;
+                }
+                else {
+                    hasMoreFiles = false;
+                }
+                return [3 /*break*/, 2];
+            case 4: return [2 /*return*/, files];
+            case 5:
+                error_5 = _a.sent();
+                console.error('❌ Error listing JSON files:', error_5);
+                return [2 /*return*/, []];
+            case 6: return [2 /*return*/];
+        }
+    });
+}); };
+/* -------------------------------------------------------------------------- */
 /*                          CSS VARIABLE APPLIER                              */
 /* -------------------------------------------------------------------------- */
 var applyTypographyVariables = function (typography, root) {
@@ -277,10 +367,45 @@ var getAllVariables = function () {
 };
 exports.getAllVariables = getAllVariables;
 /* -------------------------------------------------------------------------- */
+/*                          BUCKET UTILITIES                                  */
+/* -------------------------------------------------------------------------- */
+// Cache for buckets and JSON files
+var cachedBuckets = [];
+var cachedJsonFiles = {};
+var cachedJsonData = {};
+var sanitizeBucketName = function (name) {
+    return name
+        .trim()
+        .replace(/\s+/g, '_')
+        .replace(/[^a-zA-Z0-9_-]/g, '')
+        .toLowerCase();
+};
+var transformProjectBucket = function (bucket, projectId) {
+    return {
+        id: bucket.id || bucket._id || '',
+        // projectId: bucket.projectId || projectId || '',
+        name: bucket.name || '',
+        displayName: bucket.displayName || bucket.name || '',
+        category: bucket.category || 'uncategorized',
+        fields: Array.isArray(bucket.fields) ? bucket.fields : [],
+        createdBy: bucket.createdBy || bucket.userId || '',
+        createdAt: typeof bucket.createdAt === 'number' ? bucket.createdAt : Date.now(),
+        updatedAt: typeof bucket.updatedAt === 'number' ? bucket.updatedAt : Date.now(),
+        updatedBy: bucket.updatedBy || bucket.createdBy || '',
+        recordCount: bucket.recordCount || 0,
+        jsonFilesCount: bucket.jsonFilesCount || 0,
+        totalRecordsInJson: bucket.totalRecordsInJson || 0,
+        lastJsonExport: bucket.lastJsonExport,
+        userId: bucket.userId,
+        createdAtString: bucket.createdAt,
+        updatedAtString: bucket.updatedAt
+    };
+};
+/* -------------------------------------------------------------------------- */
 /*                                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;
+    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 _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];
@@ -323,20 +448,25 @@ var ThemeProvider = function (_a) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 8, 9, 10]);
+                        _a.trys.push([0, 9, 10, 11]);
                         finalTheme = null;
                         finalVersion = null;
-                        return [4 /*yield*/, loadLocalTheme()];
-                    case 1:
+                        if (!providedProject) return [3 /*break*/, 1];
+                        console.log('✅ Using provided project data directly');
+                        finalTheme = providedProject;
+                        finalVersion = providedProject.version || 0;
+                        return [3 /*break*/, 8];
+                    case 1: return [4 /*yield*/, loadLocalTheme()];
+                    case 2:
                         localTheme = _a.sent();
                         localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
-                        if (!projectId) return [3 /*break*/, 6];
+                        if (!projectId) return [3 /*break*/, 7];
                         return [4 /*yield*/, validateOriginAccess(projectId)];
-                    case 2:
+                    case 3:
                         hasAccess = _a.sent();
-                        if (!hasAccess) return [3 /*break*/, 4];
+                        if (!hasAccess) return [3 /*break*/, 5];
                         return [4 /*yield*/, loadThemeFromCDN(projectId)];
-                    case 3:
+                    case 4:
                         cdnTheme = _a.sent();
                         cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
                         if (cdnTheme) {
@@ -359,8 +489,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*/, 6];
+                    case 5:
                         // Origin validation failed
                         if (localTheme) {
                             console.log('⚠️ Origin validation failed, using local theme');
@@ -371,9 +501,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 = 6;
+                    case 6: return [3 /*break*/, 8];
+                    case 7:
                         // No project ID provided - only use local theme
                         console.log('ℹ️ No project ID provided, using local theme only');
                         if (localTheme) {
@@ -385,8 +515,8 @@ 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 = 8;
+                    case 8:
                         // Apply the theme if we have one
                         if (finalTheme && (!currentVersion || finalVersion !== currentVersion)) {
                             applyThemeData(finalTheme, root);
@@ -396,24 +526,24 @@ var ThemeProvider = function (_a) {
                         else if (finalTheme) {
                             console.log('✓ Theme up to date');
                         }
-                        return [3 /*break*/, 10];
-                    case 8:
+                        return [3 /*break*/, 11];
+                    case 9:
                         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*/, 11];
+                    case 10:
                         setIsLoading(false);
                         setIsInitialLoad(false);
                         return [7 /*endfinally*/];
-                    case 10: return [2 /*return*/];
+                    case 11: return [2 /*return*/];
                 }
             });
         }); };
         // Initial load
         loadTheme();
-        // Only poll for updates if we have a project ID
-        if (projectId) {
+        // Only poll for updates if we have a project ID AND no provided project
+        if (projectId && !providedProject) {
             pollTimer = setInterval(function () {
                 loadTheme();
             }, 5 * 60 * 1000);
@@ -423,7 +553,7 @@ var ThemeProvider = function (_a) {
                 clearInterval(pollTimer);
             }
         };
-    }, [projectId, currentVersion, theme]);
+    }, [projectId, currentVersion, theme, providedProject]); // Added providedProject to dependencies
     var applyThemeData = function (data, root) {
         var _a;
         var themeConfig = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
@@ -435,6 +565,11 @@ var ThemeProvider = function (_a) {
         cachedProjectData = data;
         // Cache for asset access
         cachedAssets = data.assets || [];
+        // Cache for bucket access
+        var projectBuckets = data.buckets || [];
+        cachedBuckets = projectBuckets.map(function (bucket) {
+            return transformProjectBucket(bucket, data.project_id || '');
+        });
         // Apply all theme config to CSS variables
         applyThemeConfig(themeConfig, root);
     };
@@ -446,7 +581,8 @@ var ThemeProvider = function (_a) {
         isLoading: isLoading,
         isInitialLoad: isInitialLoad,
         error: error,
-    }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error]);
+        projectId: projectId,
+    }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error, projectId]);
     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)',
@@ -619,3 +755,310 @@ var useDocumentAssets = function () {
     return (0, exports.useAssetsByType)('document');
 };
 exports.useDocumentAssets = useDocumentAssets;
+/* -------------------------------------------------------------------------- */
+/*                              BUCKET HOOKS                                  */
+/* -------------------------------------------------------------------------- */
+// Helper function to get bucket
+var getBucketFromCache = function (bucketIdOrName) {
+    if (!cachedBuckets.length) {
+        console.warn('No buckets available. Make sure ThemeProvider is mounted.');
+        return undefined;
+    }
+    return cachedBuckets.find(function (b) {
+        var _a;
+        return b.id === bucketIdOrName ||
+            b.name.toLowerCase() === bucketIdOrName.toLowerCase() ||
+            ((_a = b.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === bucketIdOrName.toLowerCase();
+    });
+};
+// Hook to access all buckets
+var useBuckets = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    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 transformedBuckets = projectData.buckets.map(function (bucket) {
+                return transformProjectBucket(bucket, projectData.project_id || '');
+            });
+            setBuckets(transformedBuckets);
+            cachedBuckets = transformedBuckets;
+        }
+        else {
+            setBuckets([]);
+        }
+    }, [projectData]);
+    return buckets;
+};
+exports.useBuckets = useBuckets;
+// Hook to get a specific bucket
+var useBucket = function (bucketIdOrName) {
+    var buckets = (0, exports.useBuckets)();
+    return buckets.find(function (b) {
+        var _a;
+        return b.id === bucketIdOrName ||
+            b.name.toLowerCase() === bucketIdOrName.toLowerCase() ||
+            ((_a = b.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === bucketIdOrName.toLowerCase();
+    });
+};
+exports.useBucket = useBucket;
+// Hook to get buckets by category
+var useBucketsByCategory = function (category) {
+    var buckets = (0, exports.useBuckets)();
+    if (category === 'all' || category === 'uncategorized') {
+        return buckets.filter(function (b) { return !b.category || b.category === 'uncategorized'; });
+    }
+    return buckets.filter(function (b) { return b.category === category; });
+};
+exports.useBucketsByCategory = useBucketsByCategory;
+// Hook to get bucket JSON files
+var useBucketJsonFiles = function (bucketIdOrName) {
+    var _a = (0, react_1.useState)([]), files = _a[0], setFiles = _a[1];
+    var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
+    var _c = (0, react_1.useState)(null), error = _c[0], setError = _c[1];
+    var bucket = (0, exports.useBucket)(bucketIdOrName);
+    var projectId = (0, exports.useTheme)().projectId;
+    var loadFiles = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var bucketSanitizedName, jsonFiles, cacheKey, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!bucket || !projectId) {
+                        setFiles([]);
+                        setLoading(false);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    setLoading(true);
+                    setError(null);
+                    bucketSanitizedName = sanitizeBucketName(bucket.displayName || bucket.name);
+                    return [4 /*yield*/, listBucketJsonFiles(bucketSanitizedName, projectId)];
+                case 2:
+                    jsonFiles = _a.sent();
+                    setFiles(jsonFiles);
+                    cacheKey = "".concat(bucket.id, "_").concat(projectId);
+                    cachedJsonFiles[cacheKey] = jsonFiles;
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_2 = _a.sent();
+                    console.error('Error loading JSON files:', err_2);
+                    setError(err_2 instanceof Error ? err_2.message : 'Failed to load JSON files');
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [bucket, projectId]);
+    (0, react_1.useEffect)(function () {
+        loadFiles();
+    }, [loadFiles]);
+    return {
+        files: files,
+        loading: loading,
+        error: error,
+        refresh: loadFiles
+    };
+};
+exports.useBucketJsonFiles = useBucketJsonFiles;
+// Hook to get paginated records (YOU ONLY NEED TO PASS PAGE NUMBER!)
+var usePaginatedRecords = function (bucketIdOrName, page, pageSize) {
+    var _a = (0, react_1.useState)([]), records = _a[0], setRecords = _a[1];
+    var _b = (0, react_1.useState)(null), metadata = _b[0], setMetadata = _b[1];
+    var _c = (0, react_1.useState)(true), loading = _c[0], setLoading = _c[1];
+    var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
+    var bucket = (0, exports.useBucket)(bucketIdOrName);
+    var projectId = (0, exports.useTheme)().projectId;
+    var loadRecords = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var bucketSanitizedName, jsonData, recordsToSet, cacheKey, err_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!bucket || !projectId) {
+                        setRecords([]);
+                        setMetadata(null);
+                        setLoading(false);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    setLoading(true);
+                    setError(null);
+                    bucketSanitizedName = sanitizeBucketName(bucket.displayName || bucket.name);
+                    return [4 /*yield*/, loadBucketJsonFromCDN(bucketSanitizedName, projectId, page)];
+                case 2:
+                    jsonData = _a.sent();
+                    if (jsonData) {
+                        recordsToSet = jsonData.records || [];
+                        // If pageSize is specified, limit the records
+                        if (pageSize && recordsToSet.length > pageSize) {
+                            recordsToSet = recordsToSet.slice(0, pageSize);
+                        }
+                        setRecords(recordsToSet);
+                        setMetadata(jsonData.metadata);
+                        cacheKey = "".concat(bucket.id, "_").concat(projectId);
+                        if (!cachedJsonData[cacheKey]) {
+                            cachedJsonData[cacheKey] = {};
+                        }
+                        cachedJsonData[cacheKey][page] = jsonData;
+                    }
+                    else {
+                        setRecords([]);
+                        setMetadata(null);
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_3 = _a.sent();
+                    console.error("Error loading records for page ".concat(page, ":"), err_3);
+                    setError(err_3 instanceof Error ? err_3.message : 'Failed to load records');
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [bucket, projectId, page, pageSize]);
+    (0, react_1.useEffect)(function () {
+        loadRecords();
+    }, [loadRecords]);
+    return {
+        records: records,
+        metadata: metadata,
+        loading: loading,
+        error: error,
+        refresh: loadRecords
+    };
+};
+exports.usePaginatedRecords = usePaginatedRecords;
+// Hook to get all records from JSON files
+var useAllJsonRecords = function (bucketIdOrName) {
+    var _a = (0, react_1.useState)([]), records = _a[0], setRecords = _a[1];
+    var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
+    var _c = (0, react_1.useState)(null), error = _c[0], setError = _c[1];
+    var bucket = (0, exports.useBucket)(bucketIdOrName);
+    var projectId = (0, exports.useTheme)().projectId;
+    var _d = (0, exports.useBucketJsonFiles)(bucketIdOrName), files = _d.files, filesLoading = _d.loading;
+    var loadAllRecords = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var allRecords, _i, files_1, file, bucketSanitizedName, jsonData, err_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!bucket || !projectId || filesLoading) {
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, 7, 8]);
+                    setLoading(true);
+                    setError(null);
+                    allRecords = [];
+                    _i = 0, files_1 = files;
+                    _a.label = 2;
+                case 2:
+                    if (!(_i < files_1.length)) return [3 /*break*/, 5];
+                    file = files_1[_i];
+                    bucketSanitizedName = sanitizeBucketName(bucket.displayName || bucket.name);
+                    return [4 /*yield*/, loadBucketJsonFromCDN(bucketSanitizedName, projectId, file.page)];
+                case 3:
+                    jsonData = _a.sent();
+                    if (jsonData && jsonData.records) {
+                        allRecords.push.apply(allRecords, jsonData.records);
+                    }
+                    _a.label = 4;
+                case 4:
+                    _i++;
+                    return [3 /*break*/, 2];
+                case 5:
+                    setRecords(allRecords);
+                    return [3 /*break*/, 8];
+                case 6:
+                    err_4 = _a.sent();
+                    console.error('Error loading all records:', err_4);
+                    setError(err_4 instanceof Error ? err_4.message : 'Failed to load records');
+                    return [3 /*break*/, 8];
+                case 7:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); }, [bucket, projectId, files, filesLoading]);
+    (0, react_1.useEffect)(function () {
+        if (!filesLoading) {
+            loadAllRecords();
+        }
+    }, [loadAllRecords, filesLoading]);
+    return {
+        records: records,
+        loading: loading || filesLoading,
+        error: error,
+        refresh: loadAllRecords
+    };
+};
+exports.useAllJsonRecords = useAllJsonRecords;
+// Hook for cache management
+var useBucketCache = function () {
+    var clearCache = (0, react_1.useCallback)(function (bucketIdOrName) {
+        if (bucketIdOrName) {
+            var bucket = getBucketFromCache(bucketIdOrName);
+            if (bucket) {
+                var projectId = (0, react_1.useContext)(ThemeContext).projectId;
+                if (projectId) {
+                    var cacheKey = "".concat(bucket.id, "_").concat(projectId);
+                    delete cachedJsonFiles[cacheKey];
+                    delete cachedJsonData[cacheKey];
+                }
+            }
+        }
+        else {
+            cachedJsonFiles = {};
+            cachedJsonData = {};
+        }
+    }, []);
+    var refresh = (0, react_1.useCallback)(function () {
+        // This will be handled by the ThemeProvider when project data changes
+        console.log('Buckets will refresh when project data updates');
+    }, []);
+    return {
+        clearCache: clearCache,
+        refresh: refresh
+    };
+};
+exports.useBucketCache = useBucketCache;
+// Helper function to get bucket records (for non-hook usage)
+var getPaginatedRecords = function (bucketIdOrName, page, pageSize) { return __awaiter(void 0, void 0, void 0, function () {
+    var bucket, projectId, bucketSanitizedName, jsonData, records;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                bucket = getBucketFromCache(bucketIdOrName);
+                if (!bucket) {
+                    throw new Error("Bucket not found: ".concat(bucketIdOrName));
+                }
+                projectId = (0, react_1.useContext)(ThemeContext).projectId;
+                if (!projectId) {
+                    throw new Error('Project ID not available');
+                }
+                bucketSanitizedName = sanitizeBucketName(bucket.displayName || bucket.name);
+                return [4 /*yield*/, loadBucketJsonFromCDN(bucketSanitizedName, projectId, page)];
+            case 1:
+                jsonData = _a.sent();
+                if (!jsonData) {
+                    return [2 /*return*/, { records: [], metadata: null }];
+                }
+                records = jsonData.records || [];
+                if (pageSize && records.length > pageSize) {
+                    records = records.slice(0, pageSize);
+                }
+                return [2 /*return*/, {
+                        records: records,
+                        metadata: jsonData.metadata
+                    }];
+        }
+    });
+}); };
+exports.getPaginatedRecords = getPaginatedRecords;

package/ui/vista/Vista.js

@@ -186,23 +186,19 @@ var Vista = function (localProps) {
                     position: 'relative',
                     width: '100%',
                     maxWidth: mediaSize || '100%',
-                    aspectRatio: '16/9',
                     margin: '0 auto',
+                    height: 'fit-content',
                 } },
-                react_1.default.createElement("div", { style: {
-                        position: 'relative',
+                react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.mediaCss || ''), style: {
                         width: '100%',
-                        height: '100%',
+                        height: 'auto',
+                        aspectRatio: '16/9',
+                        border: 'none',
+                        display: 'block', // Crucial for 'height: auto' to work reliably
                         filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
                         mixBlendMode: final.mediaBlendMode,
-                    } },
-                    react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.mediaCss || ''), style: {
-                            width: '100%',
-                            height: '100%',
-                            border: 'none',
-                            display: 'block',
-                        }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
-                    final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
+                    }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
+                final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
             mediaType === 'image' && (final.media || final.mediaUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
                 final.media ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.media)) : (react_1.default.createElement("img", { src: final.mediaUrl, alt: final.mediaAlt || 'Vista media', className: final.mediaCss || '', style: mediaStyle, loading: "lazy" })),
                 final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))));

package/utils/Buckets.js

@@ -0,0 +1 @@
+"use strict";