funuicss 3.7.16 → 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,6 +367,41 @@ 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) {
@@ -440,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);
     };
@@ -451,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)',
@@ -624,546 +755,310 @@ var useDocumentAssets = function () {
     return (0, exports.useAssetsByType)('document');
 };
 exports.useDocumentAssets = useDocumentAssets;
-// 'use client'
-// import React, {
-//   useEffect,
-//   createContext,
-//   useContext,
-//   useState,
-//   ReactNode,
-//   useMemo,
-// } from 'react'
-// import { colorVarsToDarken, themes } from './themes'
-// import { getDarkenAmount, darkenToRgba } from './darkenUtils'
-// /* -------------------------------------------------------------------------- */
-// /*                                 TYPES                                      */
-// /* -------------------------------------------------------------------------- */
-// export type ThemeVariant = 'standard' | 'minimal'
-// export type ThemeName =
-//   | 'light'
-//   | 'dark'
-//   | 'dark-blue'
-//   | 'light-gray'
-//   | 'pastel-green'
-//   | 'warm-orange'
-//   | 'frosted-glass'
-//   | 'midnight-purple'
-//   | 'cyber-metal'
-// interface ThemeConfig {
-//   [key: string]: any
-// }
-// interface Variable {
-//   name: string
-//   value: any
-// }
-// interface ProjectData {
-//   theme_config?: {
-//     colors?: Record<string, string>
-//     typography?: Record<string, string>
-//     [key: string]: any
-//   }
-//   components?: Record<string, any>
-//   default_variation?: ThemeVariant
-//   variables?: Variable[]
-//   assets?: Asset[]
-//   name?: string
-//   project_id?: string
-//   version?: number
-//   updated_at?: string
-//   trustedDomains?: Array<{
-//     domain: string
-//     status: string
-//     isDefault?: boolean
-//   }>
-// }
-// interface ThemeProviderProps {
-//   theme: ThemeName
-//   projectId?: string
-//   funcss?: string
-//   minHeight?: string
-//   children: ReactNode
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                              THEME CONTEXT                                 */
-// /* -------------------------------------------------------------------------- */
-// interface ThemeContextType {
-//   variant: ThemeVariant
-//   setVariant: React.Dispatch<React.SetStateAction<ThemeVariant>>
-//   themeConfig: ThemeConfig
-//   projectData: ProjectData | null
-//   isLoading: boolean
-//   isInitialLoad: boolean
-//   error: string | null
-// }
-// const ThemeContext = createContext<ThemeContextType>({
-//   variant: 'standard',
-//   setVariant: () => {},
-//   themeConfig: {},
-//   projectData: null,
-//   isLoading: true,
-//   isInitialLoad: true,
-//   error: null,
-// })
-// export const useTheme = (): ThemeContextType => {
-//   const context = useContext(ThemeContext)
-//   if (!context) {
-//     throw new Error('useTheme must be used within ThemeProvider')
-//   }
-//   return context
-// }
-// export const useVariant = () => {
-//   const { variant, setVariant } = useTheme()
-//   return { variant, setVariant }
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                          ORIGIN VALIDATION                                 */
-// /* -------------------------------------------------------------------------- */
-// const getCurrentOrigin = (): string => {
-//   if (typeof window === 'undefined') return ''
-//   // For local development, return localhost
-//   if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-//     return 'localhost'
-//   }
-//   // For production, return the domain without protocol and www
-//   let domain = window.location.hostname
-//   domain = domain.replace(/^www\./, '')
-//   return domain
-// }
-// const validateOriginAccess = async (projectId: string): Promise<boolean> => {
-//   if (!projectId) {
-//     console.error('❌ No project ID provided for origin validation')
-//     return false
-//   }
-//   const currentOrigin = getCurrentOrigin()
-//   console.log(`🔍 Validating origin access for: ${currentOrigin}`)
-//   try {
-//     // Load project data from CDN to check trusted domains
-//     const projectData = await loadThemeFromCDN(projectId)
-//     if (!projectData) {
-//       console.error('❌ Project not found or inaccessible')
-//       return false
-//     }
-//     const trustedDomains = projectData.trustedDomains || []
-//     // Check if current origin is in trusted domains
-//     const hasAccess = trustedDomains.some(domain => {
-//       const trustedDomain = domain.domain.toLowerCase()
-//       const currentDomain = currentOrigin.toLowerCase()
-//       // Exact match or subdomain match
-//       return currentDomain === trustedDomain || 
-//              currentDomain.endsWith('.' + trustedDomain) ||
-//              (trustedDomain === 'localhost' && currentOrigin === 'localhost')
-//     })
-//     if (!hasAccess) {
-//       console.error(`❌ Access denied: Origin "${currentOrigin}" is not in trusted domains`)
-//       console.log('📋 Trusted domains:', trustedDomains.map(d => d.domain))
-//       return false
-//     }
-//     return true
-//   } catch (error) {
-//     console.error('❌ Error during origin validation:', error)
-//     return false
-//   }
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                          LOCAL FILE MANAGEMENT                             */
-// /* -------------------------------------------------------------------------- */
-// const loadLocalTheme = async (): Promise<ProjectData | null> => {
-//   try {
-//     const response = await fetch('/funui.json', {
-//       cache: 'no-cache',
-//     })
-//     if (response.ok) {
-//       const data = await response.json()
-//       return data
-//     }
-//   } catch (error) {
-//     console.log('ℹ️ No local theme file found')
-//   }
-//   return null
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                          CDN THEME LOADER                                  */
-// /* -------------------------------------------------------------------------- */
-// const loadThemeFromCDN = async (projectId: string): Promise<ProjectData | null> => {
-//   if (!projectId) {
-//     console.error('❌ No project ID provided for CDN loading')
-//     return null
-//   }
-//   // Try Firebase Storage public URL
-//   try {
-//     const publicUrl = `https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F${projectId}.json?alt=media`
-//     const response = await fetch(publicUrl, {
-//       cache: 'no-cache',
-//     })
-//     if (response.ok) {
-//       const data = await response.json()
-//       return data
-//     } else {
-//       console.error('❌ Firebase Storage fetch failed:', response.status, response.statusText)
-//     }
-//   } catch (error) {
-//     console.error('❌ Error loading from Firebase Storage:', error)
-//   }
-//   return null
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                          CSS VARIABLE APPLIER                              */
-// /* -------------------------------------------------------------------------- */
-// const applyTypographyVariables = (typography: Record<string, string>, root: HTMLElement) => {
-//   if (!typography) return
-//   Object.entries(typography).forEach(([key, value]) => {
-//     const cssVarName = `--${key.replace(/_/g, '-')}`
-//     root.style.setProperty(cssVarName, value)
-//   })
-// }
-// const applyColorVariables = (colors: Record<string, string>, root: HTMLElement) => {
-//   if (!colors) return
-//   Object.entries(colors).forEach(([key, value]) => {
-//     const cssVarName = `--${key.replace(/_/g, '-')}`
-//     root.style.setProperty(cssVarName, value)
-//   })
-// }
-// const applyThemeConfig = (themeConfig: Record<string, any>, root: HTMLElement) => {
-//   if (!themeConfig) return
-//   if (themeConfig.colors) {
-//     applyColorVariables(themeConfig.colors, root)
-//   }
-//   if (themeConfig.typography) {
-//     applyTypographyVariables(themeConfig.typography, root)
-//   }
-//   Object.entries(themeConfig).forEach(([key, value]) => {
-//     if (key !== 'colors' && key !== 'typography' && typeof value === 'string') {
-//       const cssVarName = `--${key.replace(/_/g, '-')}`
-//       root.style.setProperty(cssVarName, value)
-//     }
-//   })
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                          VARIABLES HELPER                                  */
-// /* -------------------------------------------------------------------------- */
-// let cachedProjectData: ProjectData | null = null
-// export const getVariable = (name: string): { name: string; value: any } | undefined => {
-//   if (!cachedProjectData?.variables) {
-//     console.warn('No variables available. Make sure ThemeProvider is mounted.')
-//     return undefined
-//   }
-//   const variable = cachedProjectData.variables.find(v => v.name === name)
-//   return variable
-// }
-// export const getAllVariables = (): Variable[] => {
-//   return cachedProjectData?.variables || []
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                                COMPONENT                                   */
-// /* -------------------------------------------------------------------------- */
-// const ThemeProvider: React.FC<ThemeProviderProps> = ({
-//   theme,
-//   children,
-//   funcss = '',
-//   minHeight = '100vh',
-//   projectId,
-// }) => {
-//   const [variant, setVariant] = useState<ThemeVariant>('standard')
-//   const [themeConfig, setThemeConfig] = useState<ThemeConfig>({})
-//   const [projectData, setProjectData] = useState<ProjectData | null>(null)
-//   const [isLoading, setIsLoading] = useState(true)
-//   const [isInitialLoad, setIsInitialLoad] = useState(true)
-//   const [error, setError] = useState<string | null>(null)
-//   const [currentVersion, setCurrentVersion] = useState<number | null>(null)
-//   /* -------------------------- Apply base theme --------------------------- */
-//   useEffect(() => {
-//     const root = document.documentElement
-//     const selectedTheme = themes[theme] || themes.light
-//     Object.entries(selectedTheme).forEach(([key, value]) => {
-//       root.style.setProperty(key, value)
-//     })
-//     if (
-//       ['dark', 'dark-blue', 'midnight-purple', 'cyber-metal'].includes(theme)
-//     ) {
-//       colorVarsToDarken.forEach((varName) => {
-//         const original = getComputedStyle(root)
-//           .getPropertyValue(varName)
-//           .trim()
-//         if (original) {
-//           const darkAmount = getDarkenAmount(varName)
-//           const rgba = darkenToRgba(original, darkAmount, 0.9)
-//           root.style.setProperty(varName, rgba)
-//         }
-//       })
-//     }
-//   }, [theme])
-//   /* ---------------------- Theme Loading Logic ----------------------- */
-//   useEffect(() => {
-//     if (typeof window === 'undefined') {
-//       setIsLoading(false)
-//       setIsInitialLoad(false)
-//       return
-//     }
-//     const root = document.documentElement
-//     let pollTimer: NodeJS.Timeout
-//     const loadTheme = async () => {
-//       try {
-//         let finalTheme: ProjectData | null = null
-//         let finalVersion: number | null = null
-//         // 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')
-//             }
-//           } 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')
-//             }
-//           }
-//         } 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)) {
-//           applyThemeData(finalTheme, root)
-//           setCurrentVersion(finalVersion)
-//           setError(null)
-//         } else if (finalTheme) {
-//           console.log('✓ Theme up to date')
-//         }
-//       } catch (err) {
-//         console.error('❌ Error loading theme:', err)
-//         setError('Failed to load theme')
-//       } finally {
-//         setIsLoading(false)
-//         setIsInitialLoad(false)
-//       }
-//     }
-//     // 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)
-//       }
-//     }
-//   }, [projectId, currentVersion, theme])
-//   const applyThemeData = (data: ProjectData, root: HTMLElement) => {
-//     const themeConfig = data.theme_config ?? {}
-//     const newVariant = data.default_variation || 'standard'
-//     setVariant(newVariant)
-//     setThemeConfig(themeConfig)
-//     setProjectData(data)
-//     // Cache for variable access
-//     cachedProjectData = data
-//     // Cache for asset access
-//     cachedAssets = data.assets || []
-//     // Apply all theme config to CSS variables
-//     applyThemeConfig(themeConfig, root)
-//   }
-//   const contextValue = useMemo(
-//     () => ({
-//       variant,
-//       setVariant,
-//       themeConfig,
-//       projectData,
-//       isLoading,
-//       isInitialLoad,
-//       error,
-//     }),
-//     [variant, themeConfig, projectData, isLoading, isInitialLoad, error]
-//   )
-//   return (
-//     <ThemeContext.Provider value={contextValue}>
-//       <div
-//         className={`theme-${theme} ${funcss}`}
-//         style={{
-//           backgroundColor: 'var(--page-bg)',
-//           color: 'var(--text-color)',
-//           minHeight: minHeight,
-//           transition: isInitialLoad ? 'none' : 'background-color 0.3s ease, color 0.3s ease',
-//         }}
-//       >
-//         {children}
-//       </div>
-//     </ThemeContext.Provider>
-//   )
-// }
-// export default ThemeProvider
-// /* -------------------------------------------------------------------------- */
-// /*                              HELPER HOOKS                                  */
-// /* -------------------------------------------------------------------------- */
-// export const useThemeValue = (key: string): string | undefined => {
-//   const { themeConfig } = useTheme()
-//   return themeConfig[key]
-// }
-// export const useComponentConfig = (componentName: string): any => {
-//   const { projectData } = useTheme()
-//   return projectData?.components?.[componentName] || {}
-// }
-// export const useColors = (): Record<string, string> => {
-//   const { projectData } = useTheme()
-//   return projectData?.theme_config?.colors || {}
-// }
-// export const useTypography = (): Record<string, string> => {
-//   const { projectData } = useTheme()
-//   return projectData?.theme_config?.typography || {}
-// }
-// export const useThemeConfig = (): Record<string, any> => {
-//   const { projectData } = useTheme()
-//   return projectData?.theme_config || {}
-// }
-// export const useProjectData = (): ProjectData | null => {
-//   const { projectData } = useTheme()
-//   return projectData
-// }
-// export const useColor = (colorName: string): string | undefined => {
-//   const colors = useColors()
-//   return colors[colorName]
-// }
-// export const useTypographyValue = (property: string): string | undefined => {
-//   const typography = useTypography()
-//   return typography[property]
-// }
-// export const useComponentVariant = (componentName: string, variantName: string = 'default'): any => {
-//   const componentConfig = useComponentConfig(componentName)
-//   return componentConfig[variantName] || {}
-// }
-// // Hook to access variables
-// export const useVariables = (): Variable[] => {
-//   const { projectData } = useTheme()
-//   return projectData?.variables || []
-// }
-// // Hook to get a specific variable
-// export const useVariable = (name: string): any => {
-//   const variables = useVariables()
-//   const variable = variables.find(v => v.name === name)
-//   return variable?.value
-// }
-// /* -------------------------------------------------------------------------- */
-// /*                              ASSETS HELPER                                 */
-// /* -------------------------------------------------------------------------- */
-// interface Asset {
-//   name: string
-//   url: string
-//   file_type: string
-// }
-// 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.')
-//     return undefined
-//   }
-//   const asset = cachedAssets.find(a => a.name === name)
-//   return asset
-// }
-// export const getAllAssets = (): Asset[] => {
-//   return cachedAssets
-// }
-// export const getAssetValue = (name: string): string | undefined => {
-//   const asset = getAsset(name)
-//   return asset?.url
-// }
-// export const getAssetType = (name: string): string | undefined => {
-//   const asset = getAsset(name)
-//   return asset?.file_type
-// }
-// export const getAssetInfo = (name: string): { value: string; type: string; name: string } | undefined => {
-//   const asset = getAsset(name)
-//   if (!asset) return undefined
-//   return {
-//     value: asset.url,
-//     type: asset.file_type,
-//     name: asset.name
-//   }
-// }
-// // Hook to access all assets
-// export const useAssets = (): Asset[] => {
-//   const { projectData } = useTheme()
-//   return projectData?.assets || []
-// }
-// // Hook to get a specific asset
-// export const useAsset = (name: string): Asset | undefined => {
-//   const assets = useAssets()
-//   const asset = assets.find(a => a.name === name)
-//   return asset
-// }
-// // Hook to get asset URL (most common use case)
-// export const useAssetValue = (name: string): string | undefined => {
-//   const asset = useAsset(name)
-//   return asset?.url
-// }
-// // Hook to get asset type
-// export const useAssetType = (name: string): string | undefined => {
-//   const asset = useAsset(name)
-//   return asset?.file_type
-// }
-// // Hook to get complete asset info
-// export const useAssetInfo = (name: string): { value: string; type: string; name: string } | undefined => {
-//   const asset = useAsset(name)
-//   if (!asset) return undefined
-//   return {
-//     value: asset.url,
-//     type: asset.file_type,
-//     name: asset.name
-//   }
-// }
-// // Hook to filter assets by type
-// export const useAssetsByType = (type: string): Asset[] => {
-//   const assets = useAssets()
-//   return assets.filter(asset => asset.file_type === type)
-// }
-// // Hook to get image assets
-// export const useImageAssets = (): Asset[] => {
-//   return useAssetsByType('image')
-// }
-// // Hook to get video assets
-// export const useVideoAssets = (): Asset[] => {
-//   return useAssetsByType('video')
-// }
-// // Hook to get audio assets
-// export const useAudioAssets = (): Asset[] => {
-//   return useAssetsByType('audio')
-// }
-// // Hook to get document assets
-// export const useDocumentAssets = (): Asset[] => {
-//   return useAssetsByType('document')
-// }
+/* -------------------------------------------------------------------------- */
+/*                              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;