funuicss 3.7.14 → 3.7.16

package/ui/theme/theme.js

@@ -280,7 +280,7 @@ exports.getAllVariables = getAllVariables;
 /*                                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 +323,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 +364,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 +376,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 +390,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 +401,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 +428,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 : {};
@@ -619,3 +624,546 @@ 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')
+// }