funuicss 3.6.19 → 3.7.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.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.useVariant = exports.useTheme = void 0;
+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");
@@ -97,53 +97,64 @@ var useVariant = function () {
 };
 exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
-/*                          CDN THEME LOADER                                  */
+/*                          LOCAL FILE MANAGEMENT                             */
 /* -------------------------------------------------------------------------- */
-var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
-    var publicResponse, data, error_1, publicUrl, response, data, error_2;
+var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var response, data, error_1;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 _a.trys.push([0, 4, , 5]);
-                return [4 /*yield*/, fetch("/funui.json", {
+                return [4 /*yield*/, fetch('/funui.json', {
                         cache: 'no-cache',
                     })];
             case 1:
-                publicResponse = _a.sent();
-                if (!publicResponse.ok) return [3 /*break*/, 3];
-                return [4 /*yield*/, publicResponse.json()];
+                response = _a.sent();
+                if (!response.ok) return [3 /*break*/, 3];
+                return [4 /*yield*/, response.json()];
             case 2:
                 data = _a.sent();
-                console.log('✅ Loaded theme from public folder');
+                console.log('✅ Loaded theme from local file');
                 return [2 /*return*/, data];
             case 3: return [3 /*break*/, 5];
             case 4:
                 error_1 = _a.sent();
-                console.log('No theme in public folder, checking Firebase Storage...');
+                console.log('No local theme file found');
                 return [3 /*break*/, 5];
-            case 5:
-                _a.trys.push([5, 10, , 11]);
+            case 5: return [2 /*return*/, null];
+        }
+    });
+}); };
+/* -------------------------------------------------------------------------- */
+/*                          CDN THEME LOADER                                  */
+/* -------------------------------------------------------------------------- */
+var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
+    var publicUrl, response, data, error_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 5, , 6]);
                 publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F".concat(projectId, ".json?alt=media");
                 return [4 /*yield*/, fetch(publicUrl, {
                         cache: 'no-cache',
                     })];
-            case 6:
+            case 1:
                 response = _a.sent();
-                if (!response.ok) return [3 /*break*/, 8];
+                if (!response.ok) return [3 /*break*/, 3];
                 return [4 /*yield*/, response.json()];
-            case 7:
+            case 2:
                 data = _a.sent();
                 console.log('✅ Loaded theme from Firebase Storage CDN');
                 return [2 /*return*/, data];
-            case 8:
+            case 3:
                 console.error('Firebase Storage fetch failed:', response.status, response.statusText);
-                _a.label = 9;
-            case 9: return [3 /*break*/, 11];
-            case 10:
+                _a.label = 4;
+            case 4: return [3 /*break*/, 6];
+            case 5:
                 error_2 = _a.sent();
                 console.error('Error loading from Firebase Storage:', error_2);
-                return [3 /*break*/, 11];
-            case 11: return [2 /*return*/, null];
+                return [3 /*break*/, 6];
+            case 6: return [2 /*return*/, null];
         }
     });
 }); };
@@ -155,7 +166,6 @@ var applyTypographyVariables = function (typography, root) {
         return;
     Object.entries(typography).forEach(function (_a) {
         var key = _a[0], value = _a[1];
-        // Convert flat keys to CSS custom property format
         var cssVarName = "--".concat(key.replace(/_/g, '-'));
         root.style.setProperty(cssVarName, value);
     });
@@ -165,7 +175,6 @@ var applyColorVariables = function (colors, root) {
         return;
     Object.entries(colors).forEach(function (_a) {
         var key = _a[0], value = _a[1];
-        // Convert flat keys to CSS custom property format
         var cssVarName = "--".concat(key.replace(/_/g, '-'));
         root.style.setProperty(cssVarName, value);
     });
@@ -173,15 +182,12 @@ var applyColorVariables = function (colors, root) {
 var applyThemeConfig = function (themeConfig, root) {
     if (!themeConfig)
         return;
-    // Apply colors if they exist
     if (themeConfig.colors) {
         applyColorVariables(themeConfig.colors, root);
     }
-    // Apply typography if it exists
     if (themeConfig.typography) {
         applyTypographyVariables(themeConfig.typography, root);
     }
-    // Apply any other theme config properties
     Object.entries(themeConfig).forEach(function (_a) {
         var key = _a[0], value = _a[1];
         if (key !== 'colors' && key !== 'typography' && typeof value === 'string') {
@@ -191,6 +197,23 @@ var applyThemeConfig = function (themeConfig, root) {
     });
 };
 /* -------------------------------------------------------------------------- */
+/*                          VARIABLES HELPER                                  */
+/* -------------------------------------------------------------------------- */
+var cachedProjectData = null;
+var getVariable = function (name) {
+    if (!(cachedProjectData === null || cachedProjectData === void 0 ? void 0 : cachedProjectData.variables)) {
+        console.warn('No variables available. Make sure ThemeProvider is mounted.');
+        return undefined;
+    }
+    var variable = cachedProjectData.variables.find(function (v) { return v.name === name; });
+    return variable;
+};
+exports.getVariable = getVariable;
+var getAllVariables = function () {
+    return (cachedProjectData === null || cachedProjectData === void 0 ? void 0 : cachedProjectData.variables) || [];
+};
+exports.getAllVariables = getAllVariables;
+/* -------------------------------------------------------------------------- */
 /*                                COMPONENT                                   */
 /* -------------------------------------------------------------------------- */
 var ThemeProvider = function (_a) {
@@ -223,7 +246,7 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- CDN Theme Sync ----------------------- */
+    /* ---------------------- CDN Theme Sync with Local File ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined' || !projectId) {
             setIsLoading(false);
@@ -232,51 +255,68 @@ var ThemeProvider = function (_a) {
         }
         var root = document.documentElement;
         var pollTimer;
-        var fetchFromCDN = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var cdnTheme, newVersion, err_1;
+        var syncTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var localTheme, localVersion, cdnTheme, cdnVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 2, 3, 4]);
-                        return [4 /*yield*/, loadThemeFromCDN(projectId)];
+                        _a.trys.push([0, 3, 4, 5]);
+                        return [4 /*yield*/, loadLocalTheme()];
                     case 1:
+                        localTheme = _a.sent();
+                        localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
+                        return [4 /*yield*/, loadThemeFromCDN(projectId)];
+                    case 2:
                         cdnTheme = _a.sent();
+                        cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
                         if (cdnTheme) {
-                            newVersion = cdnTheme.version || Date.now();
-                            if (!currentVersion || newVersion !== currentVersion) {
-                                // Apply theme data to CSS variables and state
+                            // Compare versions and use the newer one
+                            if (cdnVersion !== localVersion) {
+                                console.log("\uD83D\uDD04 Version mismatch: Local(".concat(localVersion, ") vs CDN(").concat(cdnVersion, ")"));
+                                console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.');
+                            }
+                            // Always use CDN theme if available
+                            if (!currentVersion || cdnVersion !== currentVersion) {
                                 applyThemeData(cdnTheme, root);
-                                setCurrentVersion(newVersion);
-                                console.log('✅ Theme updated from CDN');
+                                setCurrentVersion(cdnVersion);
+                                console.log('✅ Theme loaded from CDN');
                             }
                             else {
-                                console.log('✓ Theme unchanged');
+                                console.log('✓ Theme up to date');
                             }
                             setError(null);
                         }
+                        else if (localTheme) {
+                            // CDN not available but we have local
+                            console.log('⚠️ Using local theme (CDN unavailable)');
+                            applyThemeData(localTheme, root);
+                            setCurrentVersion(localVersion);
+                            setError(null);
+                        }
                         else {
-                            console.warn('⚠️ No theme found in CDN');
-                            setError('Theme not found in CDN');
+                            // No theme available anywhere
+                            console.warn('⚠️ No theme found');
+                            setError('Theme not found');
                         }
-                        return [3 /*break*/, 4];
-                    case 2:
-                        err_1 = _a.sent();
-                        console.error('Error loading theme from CDN:', err_1);
-                        setError('Failed to load theme from CDN');
-                        return [3 /*break*/, 4];
+                        return [3 /*break*/, 5];
                     case 3:
+                        err_1 = _a.sent();
+                        console.error('Error syncing theme:', err_1);
+                        setError('Failed to sync theme');
+                        return [3 /*break*/, 5];
+                    case 4:
                         setIsLoading(false);
                         setIsInitialLoad(false);
                         return [7 /*endfinally*/];
-                    case 4: return [2 /*return*/];
+                    case 5: return [2 /*return*/];
                 }
             });
         }); };
-        // Initial load
-        fetchFromCDN();
+        // Initial sync
+        syncTheme();
         // Poll for updates every 5 minutes
         pollTimer = setInterval(function () {
-            fetchFromCDN();
+            syncTheme();
         }, 5 * 60 * 1000);
         return function () {
             clearInterval(pollTimer);
@@ -289,6 +329,8 @@ var ThemeProvider = function (_a) {
         setVariant(newVariant);
         setThemeConfig(themeConfig);
         setProjectData(data);
+        // Cache for variable access
+        cachedProjectData = data;
         // Apply all theme config to CSS variables
         applyThemeConfig(themeConfig, root);
     };
@@ -346,22 +388,32 @@ var useProjectData = function () {
     return projectData;
 };
 exports.useProjectData = useProjectData;
-// Get specific color value
 var useColor = function (colorName) {
     var colors = (0, exports.useColors)();
     return colors[colorName];
 };
 exports.useColor = useColor;
-// Get specific typography value
 var useTypographyValue = function (property) {
     var typography = (0, exports.useTypography)();
     return typography[property];
 };
 exports.useTypographyValue = useTypographyValue;
-// Get component variant
 var useComponentVariant = function (componentName, variantName) {
     if (variantName === void 0) { variantName = 'default'; }
     var componentConfig = (0, exports.useComponentConfig)(componentName);
     return componentConfig[variantName] || {};
 };
 exports.useComponentVariant = useComponentVariant;
+// Hook to access variables
+var useVariables = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    return (projectData === null || projectData === void 0 ? void 0 : projectData.variables) || [];
+};
+exports.useVariables = useVariables;
+// Hook to get a specific variable
+var useVariable = function (name) {
+    var variables = (0, exports.useVariables)();
+    var variable = variables.find(function (v) { return v.name === name; });
+    return variable === null || variable === void 0 ? void 0 : variable.value;
+};
+exports.useVariable = useVariable;

package/js/firebase/Auth.d.ts

@@ -1,191 +0,0 @@
-import { Auth, User, UserCredential } from 'firebase/auth';
-interface AuthResponse {
-    user: User;
-    credential: UserCredential;
-    isNewUser?: boolean;
-}
-interface AuthStateCallback {
-    (user: User | null): void;
-}
-type ProviderType = 'google' | 'facebook' | 'github' | 'twitter' | 'microsoft' | 'apple';
-/**
- * Firebase Authentication Operations
- * Users must pass their Auth instance to each method
- */
-export declare const FunFireAuth: {
-    /**
-     * 📧 Sign in with email and password
-     * @param auth - Firebase Auth instance
-     * @param email - User email
-     * @param password - User password
-     */
-    signInWithEmail: (auth: Auth, email: string, password: string) => Promise<AuthResponse>;
-    /**
-     * ✍️ Create account with email and password
-     * @param auth - Firebase Auth instance
-     * @param email - User email
-     * @param password - User password
-     * @param displayName - Optional display name
-     * @param photoURL - Optional photo URL
-     */
-    createAccount: (auth: Auth, email: string, password: string, displayName?: string, photoURL?: string) => Promise<AuthResponse>;
-    /**
-     * 🔐 Sign in with Google (Popup)
-     * @param auth - Firebase Auth instance
-     */
-    signInWithGoogle: (auth: Auth) => Promise<AuthResponse>;
-    /**
-     * 🔐 Sign in with Facebook (Popup)
-     * @param auth - Firebase Auth instance
-     */
-    signInWithFacebook: (auth: Auth) => Promise<AuthResponse>;
-    /**
-     * 🔐 Sign in with GitHub (Popup)
-     * @param auth - Firebase Auth instance
-     */
-    signInWithGithub: (auth: Auth) => Promise<AuthResponse>;
-    /**
-     * 🔐 Sign in with Twitter (Popup)
-     * @param auth - Firebase Auth instance
-     */
-    signInWithTwitter: (auth: Auth) => Promise<AuthResponse>;
-    /**
-     * 🔐 Sign in with Microsoft (Popup)
-     * @param auth - Firebase Auth instance
-     */
-    signInWithMicrosoft: (auth: Auth) => Promise<AuthResponse>;
-    /**
-     * 🔐 Sign in with Apple (Popup)
-     * @param auth - Firebase Auth instance
-     */
-    signInWithApple: (auth: Auth) => Promise<AuthResponse>;
-    /**
-     * 🔐 Generic provider sign in with redirect (better for mobile)
-     * @param auth - Firebase Auth instance
-     * @param providerType - Provider type
-     */
-    signInWithRedirect: (auth: Auth, providerType: ProviderType) => Promise<void>;
-    /**
-     * 🚪 Sign out
-     * @param auth - Firebase Auth instance
-     */
-    signOut: (auth: Auth) => Promise<void>;
-    /**
-     * 🔄 Send password reset email
-     * @param auth - Firebase Auth instance
-     * @param email - User email
-     * @param actionCodeSettings - Optional action code settings for custom redirect
-     */
-    resetPassword: (auth: Auth, email: string, actionCodeSettings?: {
-        url: string;
-        handleCodeInApp?: boolean;
-    }) => Promise<void>;
-    /**
-     * ✉️ Send email verification
-     * @param auth - Firebase Auth instance
-     * @param actionCodeSettings - Optional action code settings for custom redirect
-     */
-    sendVerificationEmail: (auth: Auth, actionCodeSettings?: {
-        url: string;
-        handleCodeInApp?: boolean;
-    }) => Promise<void>;
-    /**
-     * 🔑 Update user password
-     * @param auth - Firebase Auth instance
-     * @param newPassword - New password
-     */
-    updatePassword: (auth: Auth, newPassword: string) => Promise<void>;
-    /**
-     * 📧 Update user email
-     * @param auth - Firebase Auth instance
-     * @param newEmail - New email
-     */
-    updateEmail: (auth: Auth, newEmail: string) => Promise<void>;
-    /**
-     * 👤 Update user profile
-     * @param auth - Firebase Auth instance
-     * @param displayName - Display name
-     * @param photoURL - Photo URL
-     */
-    updateProfile: (auth: Auth, displayName?: string, photoURL?: string) => Promise<void>;
-    /**
-     * 🔐 Reauthenticate user (required before sensitive operations)
-     * @param auth - Firebase Auth instance
-     * @param password - Current password
-     */
-    reauthenticate: (auth: Auth, password: string) => Promise<UserCredential>;
-    /**
-     * ❌ Delete user account
-     * @param auth - Firebase Auth instance
-     */
-    deleteAccount: (auth: Auth) => Promise<void>;
-    /**
-     * 👁️ Listen to auth state changes
-     * @param auth - Firebase Auth instance
-     * @param callback - Callback function that receives user or null
-     * @returns Unsubscribe function
-     */
-    onAuthStateChanged: (auth: Auth, callback: AuthStateCallback) => (() => void);
-    /**
-     * 🔍 Get current user
-     * @param auth - Firebase Auth instance
-     * @returns Current user or null
-     */
-    getCurrentUser: (auth: Auth) => User | null;
-    /**
-     * 🔍 Check if email exists
-     * @param auth - Firebase Auth instance
-     * @param email - Email to check
-     * @returns Array of sign-in methods for the email
-     */
-    checkEmailExists: (auth: Auth, email: string) => Promise<string[]>;
-    /**
-     * ✅ Apply action code (email verification, password reset)
-     * @param auth - Firebase Auth instance
-     * @param code - Action code from email link
-     */
-    applyActionCode: (auth: Auth, code: string) => Promise<void>;
-    /**
-     * 🔍 Verify password reset code
-     * @param auth - Firebase Auth instance
-     * @param code - Password reset code
-     * @returns Email associated with the code
-     */
-    verifyPasswordResetCode: (auth: Auth, code: string) => Promise<string>;
-    /**
-     * ✅ Confirm password reset
-     * @param auth - Firebase Auth instance
-     * @param code - Password reset code
-     * @param newPassword - New password
-     */
-    confirmPasswordReset: (auth: Auth, code: string, newPassword: string) => Promise<void>;
-    /**
-     * 🔗 Link account with Google
-     * @param auth - Firebase Auth instance
-     */
-    linkWithGoogle: (auth: Auth) => Promise<UserCredential>;
-    /**
-     * 🔓 Unlink provider from account
-     * @param auth - Firebase Auth instance
-     * @param providerId - Provider ID to unlink (e.g., 'google.com', 'password')
-     */
-    unlinkProvider: (auth: Auth, providerId: string) => Promise<User>;
-    /**
-     * 📱 Get ID token (for backend verification)
-     * @param auth - Firebase Auth instance
-     * @param forceRefresh - Force token refresh
-     */
-    getIdToken: (auth: Auth, forceRefresh?: boolean) => Promise<string>;
-};
-export declare const AuthErrorCodes: {
-    EMAIL_EXISTS: string;
-    INVALID_EMAIL: string;
-    WEAK_PASSWORD: string;
-    USER_NOT_FOUND: string;
-    WRONG_PASSWORD: string;
-    TOO_MANY_REQUESTS: string;
-    NETWORK_ERROR: string;
-    POPUP_CLOSED: string;
-    REQUIRES_RECENT_LOGIN: string;
-};
-export type { AuthResponse, AuthStateCallback, ProviderType };