funuicss 3.7.1 → 3.7.2

package/ui/theme/theme.js

@@ -70,7 +70,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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");
@@ -97,10 +97,70 @@ var useVariant = function () {
 };
 exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
+/*                          ORIGIN VALIDATION                                 */
+/* -------------------------------------------------------------------------- */
+var getCurrentOrigin = function () {
+    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
+    var domain = window.location.hostname;
+    domain = domain.replace(/^www\./, '');
+    return domain;
+};
+var validateOriginAccess = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
+    var currentOrigin, projectData, trustedDomains, hasAccess, error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!projectId) {
+                    console.error('❌ No project ID provided');
+                    return [2 /*return*/, false];
+                }
+                currentOrigin = getCurrentOrigin();
+                console.log("\uD83D\uDD0D Validating origin access for: ".concat(currentOrigin));
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, loadThemeFromCDN(projectId)];
+            case 2:
+                projectData = _a.sent();
+                if (!projectData) {
+                    console.error('❌ Project not found or inaccessible');
+                    return [2 /*return*/, false];
+                }
+                trustedDomains = projectData.trustedDomains || [];
+                hasAccess = trustedDomains.some(function (domain) {
+                    var trustedDomain = domain.domain.toLowerCase();
+                    var currentDomain = currentOrigin.toLowerCase();
+                    // Exact match or subdomain match
+                    return currentDomain === trustedDomain ||
+                        currentDomain.endsWith('.' + trustedDomain) ||
+                        (trustedDomain === 'localhost' && currentOrigin === 'localhost');
+                });
+                if (!hasAccess) {
+                    console.error("\u274C Access denied: Origin \"".concat(currentOrigin, "\" is not in trusted domains"));
+                    console.log('📋 Trusted domains:', trustedDomains.map(function (d) { return d.domain; }));
+                    return [2 /*return*/, false];
+                }
+                console.log('✅ Origin validation passed');
+                return [2 /*return*/, true];
+            case 3:
+                error_1 = _a.sent();
+                console.error('❌ Error during origin validation:', error_1);
+                return [2 /*return*/, false];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+/* -------------------------------------------------------------------------- */
 /*                          LOCAL FILE MANAGEMENT                             */
 /* -------------------------------------------------------------------------- */
 var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var response, data, error_1;
+    var response, data, error_2;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -118,7 +178,7 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
                 return [2 /*return*/, data];
             case 3: return [3 /*break*/, 5];
             case 4:
-                error_1 = _a.sent();
+                error_2 = _a.sent();
                 console.log('No local theme file found');
                 return [3 /*break*/, 5];
             case 5: return [2 /*return*/, null];
@@ -129,7 +189,7 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
 /*                          CDN THEME LOADER                                  */
 /* -------------------------------------------------------------------------- */
 var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
-    var publicUrl, response, data, error_2;
+    var publicUrl, response, data, error_3;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -151,8 +211,8 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
                 _a.label = 4;
             case 4: return [3 /*break*/, 6];
             case 5:
-                error_2 = _a.sent();
-                console.error('Error loading from Firebase Storage:', error_2);
+                error_3 = _a.sent();
+                console.error('Error loading from Firebase Storage:', error_3);
                 return [3 /*break*/, 6];
             case 6: return [2 /*return*/, null];
         }
@@ -246,9 +306,16 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- CDN Theme Sync with Local File ----------------------- */
+    /* ---------------------- CDN Theme Sync with Origin Validation ----------------------- */
     (0, react_1.useEffect)(function () {
-        if (typeof window === 'undefined' || !projectId) {
+        if (typeof window === 'undefined') {
+            setIsLoading(false);
+            setIsInitialLoad(false);
+            return;
+        }
+        if (!projectId) {
+            console.error('❌ ThemeProvider: No projectId provided');
+            setError('Project ID is required');
             setIsLoading(false);
             setIsInitialLoad(false);
             return;
@@ -256,17 +323,27 @@ var ThemeProvider = function (_a) {
         var root = document.documentElement;
         var pollTimer;
         var syncTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var localTheme, localVersion, cdnTheme, cdnVersion, err_1;
+            var hasAccess, localTheme, localVersion, cdnTheme, cdnVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 3, 4, 5]);
-                        return [4 /*yield*/, loadLocalTheme()];
+                        _a.trys.push([0, 4, 5, 6]);
+                        console.log('🔄 Starting theme sync with origin validation...');
+                        return [4 /*yield*/, validateOriginAccess(projectId)];
                     case 1:
+                        hasAccess = _a.sent();
+                        if (!hasAccess) {
+                            setError('Access denied: This domain is not authorized to use this theme');
+                            setIsLoading(false);
+                            setIsInitialLoad(false);
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, loadLocalTheme()];
+                    case 2:
                         localTheme = _a.sent();
                         localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
                         return [4 /*yield*/, loadThemeFromCDN(projectId)];
-                    case 2:
+                    case 3:
                         cdnTheme = _a.sent();
                         cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
                         if (cdnTheme) {
@@ -298,17 +375,17 @@ var ThemeProvider = function (_a) {
                             console.warn('⚠️ No theme found');
                             setError('Theme not found');
                         }
-                        return [3 /*break*/, 5];
-                    case 3:
+                        return [3 /*break*/, 6];
+                    case 4:
                         err_1 = _a.sent();
-                        console.error('Error syncing theme:', err_1);
+                        console.error('❌ Error syncing theme:', err_1);
                         setError('Failed to sync theme');
-                        return [3 /*break*/, 5];
-                    case 4:
+                        return [3 /*break*/, 6];
+                    case 5:
                         setIsLoading(false);
                         setIsInitialLoad(false);
                         return [7 /*endfinally*/];
-                    case 5: return [2 /*return*/];
+                    case 6: return [2 /*return*/];
                 }
             });
         }); };
@@ -331,6 +408,8 @@ var ThemeProvider = function (_a) {
         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);
     };
@@ -417,3 +496,104 @@ var useVariable = function (name) {
     return variable === null || variable === void 0 ? void 0 : variable.value;
 };
 exports.useVariable = useVariable;
+var cachedAssets = [];
+var getAsset = function (name) {
+    if (!cachedAssets.length) {
+        console.warn('No assets available. Make sure ThemeProvider is mounted and assets are loaded.');
+        return undefined;
+    }
+    var asset = cachedAssets.find(function (a) { return a.name === name; });
+    return asset;
+};
+exports.getAsset = getAsset;
+var getAllAssets = function () {
+    return cachedAssets;
+};
+exports.getAllAssets = getAllAssets;
+var getAssetValue = function (name) {
+    var asset = (0, exports.getAsset)(name);
+    return asset === null || asset === void 0 ? void 0 : asset.url;
+};
+exports.getAssetValue = getAssetValue;
+var getAssetType = function (name) {
+    var asset = (0, exports.getAsset)(name);
+    return asset === null || asset === void 0 ? void 0 : asset.file_type;
+};
+exports.getAssetType = getAssetType;
+var getAssetInfo = function (name) {
+    var asset = (0, exports.getAsset)(name);
+    if (!asset)
+        return undefined;
+    return {
+        value: asset.url,
+        type: asset.file_type,
+        name: asset.name
+    };
+};
+exports.getAssetInfo = getAssetInfo;
+/* -------------------------------------------------------------------------- */
+/*                              ASSETS HOOKS                                  */
+/* -------------------------------------------------------------------------- */
+// Hook to access all assets
+var useAssets = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    return (projectData === null || projectData === void 0 ? void 0 : projectData.assets) || [];
+};
+exports.useAssets = useAssets;
+// Hook to get a specific asset
+var useAsset = function (name) {
+    var assets = (0, exports.useAssets)();
+    var asset = assets.find(function (a) { return a.name === name; });
+    return asset;
+};
+exports.useAsset = useAsset;
+// Hook to get asset URL (most common use case)
+var useAssetValue = function (name) {
+    var asset = (0, exports.useAsset)(name);
+    return asset === null || asset === void 0 ? void 0 : asset.url;
+};
+exports.useAssetValue = useAssetValue;
+// Hook to get asset type
+var useAssetType = function (name) {
+    var asset = (0, exports.useAsset)(name);
+    return asset === null || asset === void 0 ? void 0 : asset.file_type;
+};
+exports.useAssetType = useAssetType;
+// Hook to get complete asset info
+var useAssetInfo = function (name) {
+    var asset = (0, exports.useAsset)(name);
+    if (!asset)
+        return undefined;
+    return {
+        value: asset.url,
+        type: asset.file_type,
+        name: asset.name
+    };
+};
+exports.useAssetInfo = useAssetInfo;
+// Hook to filter assets by type
+var useAssetsByType = function (type) {
+    var assets = (0, exports.useAssets)();
+    return assets.filter(function (asset) { return asset.file_type === type; });
+};
+exports.useAssetsByType = useAssetsByType;
+// Hook to get image assets
+var useImageAssets = function () {
+    return (0, exports.useAssetsByType)('image');
+};
+exports.useImageAssets = useImageAssets;
+// Hook to get video assets
+var useVideoAssets = function () {
+    return (0, exports.useAssetsByType)('video');
+};
+exports.useVideoAssets = useVideoAssets;
+// Hook to get audio assets
+var useAudioAssets = function () {
+    return (0, exports.useAssetsByType)('audio');
+};
+exports.useAudioAssets = useAudioAssets;
+// Hook to get document assets
+var useDocumentAssets = function () {
+    return (0, exports.useAssetsByType)('document');
+};
+exports.useDocumentAssets = useDocumentAssets;

package/ui/vista/Vista.js

@@ -21,8 +21,8 @@ var getCssVariable_1 = require("../../utils/getCssVariable");
 var componentUtils_1 = require("../../utils/componentUtils");
 var Text_1 = __importDefault(require("../text/Text"));
 var Col_1 = __importDefault(require("../grid/Col"));
-var Button_1 = __importDefault(require("../button/Button")); // Import your Button component
-var Flex_1 = __importDefault(require("../flex/Flex")); // Import your Flex component
+var Button_1 = __importDefault(require("../button/Button"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
 var Vista = function (_a) {
     var _b = _a.layout, layout = _b === void 0 ? 'imageRight' : _b, _c = _a.reverse, reverse = _c === void 0 ? false : _c, _d = _a.bg, bg = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? 'padding-lg' : _e, _f = _a.textAlign, textAlign = _f === void 0 ? 'left' : _f, _g = _a.imgPosition, imgPosition = _g === void 0 ? 'top' : _g, _h = _a.funcss, funcss = _h === void 0 ? '' : _h, _j = _a.pattern, pattern = _j === void 0 ? '' : _j, _k = _a.patternOpacity, patternOpacity = _k === void 0 ? pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1 : _k, 
     // Enhanced Content
@@ -37,8 +37,8 @@ var Vista = function (_a) {
     showPrimaryCTA = _19 === void 0 ? false : _19, _20 = _a.showSecondaryCTA, showSecondaryCTA = _20 === void 0 ? false : _20, _21 = _a.showAccentCTA, showAccentCTA = _21 === void 0 ? false : _21, _22 = _a.primaryButtonOutlined, primaryButtonOutlined = _22 === void 0 ? false : _22, _23 = _a.secondaryButtonOutlined, secondaryButtonOutlined = _23 === void 0 ? false : _23, _24 = _a.accentButtonOutlined, accentButtonOutlined = _24 === void 0 ? false : _24, _25 = _a.ctaPrimaryUrl, ctaPrimaryUrl = _25 === void 0 ? '' : _25, _26 = _a.ctaSecondaryUrl, ctaSecondaryUrl = _26 === void 0 ? '' : _26, _27 = _a.ctaAccentUrl, ctaAccentUrl = _27 === void 0 ? '' : _27, _28 = _a.ctaPrimaryText, ctaPrimaryText = _28 === void 0 ? 'Primary Action' : _28, _29 = _a.ctaSecondaryText, ctaSecondaryText = _29 === void 0 ? 'Secondary Action' : _29, _30 = _a.ctaAccentText, ctaAccentText = _30 === void 0 ? 'Accent Action' : _30, _31 = _a.ctaGap, ctaGap = _31 === void 0 ? 1 : _31, _32 = _a.ctaFlexJustify, ctaFlexJustify = _32 === void 0 ? 'center' : _32, _33 = _a.ctaPrimaryRounded, ctaPrimaryRounded = _33 === void 0 ? false : _33, _34 = _a.ctaPrimaryFlat, ctaPrimaryFlat = _34 === void 0 ? false : _34, _35 = _a.ctaPrimaryPrefix, ctaPrimaryPrefix = _35 === void 0 ? '' : _35, _36 = _a.ctaPrimarySuffix, ctaPrimarySuffix = _36 === void 0 ? '' : _36, _37 = _a.ctaSecondaryRounded, ctaSecondaryRounded = _37 === void 0 ? false : _37, _38 = _a.ctaSecondaryFlat, ctaSecondaryFlat = _38 === void 0 ? false : _38, _39 = _a.ctaSecondaryPrefix, ctaSecondaryPrefix = _39 === void 0 ? '' : _39, _40 = _a.ctaSecondarySuffix, ctaSecondarySuffix = _40 === void 0 ? '' : _40, _41 = _a.ctaAccentRounded, ctaAccentRounded = _41 === void 0 ? false : _41, _42 = _a.ctaAccentFlat, ctaAccentFlat = _42 === void 0 ? false : _42, _43 = _a.ctaAccentPrefix, ctaAccentPrefix = _43 === void 0 ? '' : _43, _44 = _a.ctaAccentSuffix, ctaAccentSuffix = _44 === void 0 ? '' : _44, primaryIconSize = _a.primaryIconSize, secondaryIconSize = _a.secondaryIconSize, accentIconSize = _a.accentIconSize;
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal({
+    // Create local props object
+    var localProps = {
         layout: layout,
         reverse: reverse,
         bg: bg,
@@ -117,38 +117,124 @@ var Vista = function (_a) {
         primaryIconSize: primaryIconSize,
         secondaryIconSize: secondaryIconSize,
         accentIconSize: accentIconSize,
-    }).props;
+    };
+    // Merge config with local props - local props override config
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Extract final values - use NULLISH COALESCING to ensure local props take precedence
+    var final = {
+        // Layout & styling
+        layout: layout !== null && layout !== void 0 ? layout : mergedProps.layout,
+        reverse: reverse !== null && reverse !== void 0 ? reverse : mergedProps.reverse,
+        bg: bg !== null && bg !== void 0 ? bg : mergedProps.bg,
+        padding: padding !== null && padding !== void 0 ? padding : mergedProps.padding,
+        textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : mergedProps.textAlign,
+        imgPosition: imgPosition !== null && imgPosition !== void 0 ? imgPosition : mergedProps.imgPosition,
+        funcss: funcss !== null && funcss !== void 0 ? funcss : mergedProps.funcss,
+        pattern: pattern !== null && pattern !== void 0 ? pattern : mergedProps.pattern,
+        patternOpacity: patternOpacity !== null && patternOpacity !== void 0 ? patternOpacity : mergedProps.patternOpacity,
+        // Gradient & effects
+        showGradient: showGradient !== null && showGradient !== void 0 ? showGradient : mergedProps.showGradient,
+        gradientPosition: gradientPosition !== null && gradientPosition !== void 0 ? gradientPosition : mergedProps.gradientPosition,
+        gradientSize: gradientSize !== null && gradientSize !== void 0 ? gradientSize : mergedProps.gradientSize,
+        blurry: blurry !== null && blurry !== void 0 ? blurry : mergedProps.blurry,
+        opacity: opacity !== null && opacity !== void 0 ? opacity : mergedProps.opacity,
+        gradientColors: gradientColors !== null && gradientColors !== void 0 ? gradientColors : mergedProps.gradientColors,
+        fade: fade !== null && fade !== void 0 ? fade : mergedProps.fade,
+        fadeDirection: fadeDirection !== null && fadeDirection !== void 0 ? fadeDirection : mergedProps.fadeDirection,
+        fadeRadial: fadeRadial !== null && fadeRadial !== void 0 ? fadeRadial : mergedProps.fadeRadial,
+        fadeOverlayDarken: fadeOverlayDarken !== null && fadeOverlayDarken !== void 0 ? fadeOverlayDarken : mergedProps.fadeOverlayDarken,
+        backgroundImage: backgroundImage !== null && backgroundImage !== void 0 ? backgroundImage : mergedProps.backgroundImage,
+        // Classes
+        sectionClass: sectionClass !== null && sectionClass !== void 0 ? sectionClass : mergedProps.sectionClass,
+        containerClass: containerClass !== null && containerClass !== void 0 ? containerClass : mergedProps.containerClass,
+        textWrapperClass: textWrapperClass !== null && textWrapperClass !== void 0 ? textWrapperClass : mergedProps.textWrapperClass,
+        imageWrapperClass: imageWrapperClass !== null && imageWrapperClass !== void 0 ? imageWrapperClass : mergedProps.imageWrapperClass,
+        gap: gap !== null && gap !== void 0 ? gap : mergedProps.gap,
+        // Content
+        heading: heading !== null && heading !== void 0 ? heading : mergedProps.heading,
+        headingSize: headingSize !== null && headingSize !== void 0 ? headingSize : mergedProps.headingSize,
+        headingWeight: headingWeight !== null && headingWeight !== void 0 ? headingWeight : mergedProps.headingWeight,
+        headingColor: headingColor !== null && headingColor !== void 0 ? headingColor : mergedProps.headingColor,
+        headingClass: headingClass !== null && headingClass !== void 0 ? headingClass : mergedProps.headingClass,
+        subheading: subheading !== null && subheading !== void 0 ? subheading : mergedProps.subheading,
+        subheadingSize: subheadingSize !== null && subheadingSize !== void 0 ? subheadingSize : mergedProps.subheadingSize,
+        subheadingWeight: subheadingWeight !== null && subheadingWeight !== void 0 ? subheadingWeight : mergedProps.subheadingWeight,
+        subheadingColor: subheadingColor !== null && subheadingColor !== void 0 ? subheadingColor : mergedProps.subheadingColor,
+        subheadingClass: subheadingClass !== null && subheadingClass !== void 0 ? subheadingClass : mergedProps.subheadingClass,
+        content: content !== null && content !== void 0 ? content : mergedProps.content,
+        contentSize: contentSize !== null && contentSize !== void 0 ? contentSize : mergedProps.contentSize,
+        contentWeight: contentWeight !== null && contentWeight !== void 0 ? contentWeight : mergedProps.contentWeight,
+        contentColor: contentColor !== null && contentColor !== void 0 ? contentColor : mergedProps.contentColor,
+        contentClass: contentClass !== null && contentClass !== void 0 ? contentClass : mergedProps.contentClass,
+        image: image !== null && image !== void 0 ? image : mergedProps.image,
+        imageUrl: imageUrl !== null && imageUrl !== void 0 ? imageUrl : mergedProps.imageUrl,
+        imageAlt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : mergedProps.imageAlt,
+        imageClass: imageClass !== null && imageClass !== void 0 ? imageClass : mergedProps.imageClass,
+        imageSize: imageSize !== null && imageSize !== void 0 ? imageSize : mergedProps.imageSize,
+        cta: cta !== null && cta !== void 0 ? cta : mergedProps.cta,
+        ctaClass: ctaClass !== null && ctaClass !== void 0 ? ctaClass : mergedProps.ctaClass,
+        // CTA Buttons
+        showPrimaryCTA: showPrimaryCTA !== null && showPrimaryCTA !== void 0 ? showPrimaryCTA : mergedProps.showPrimaryCTA,
+        showSecondaryCTA: showSecondaryCTA !== null && showSecondaryCTA !== void 0 ? showSecondaryCTA : mergedProps.showSecondaryCTA,
+        showAccentCTA: showAccentCTA !== null && showAccentCTA !== void 0 ? showAccentCTA : mergedProps.showAccentCTA,
+        primaryButtonOutlined: primaryButtonOutlined !== null && primaryButtonOutlined !== void 0 ? primaryButtonOutlined : mergedProps.primaryButtonOutlined,
+        secondaryButtonOutlined: secondaryButtonOutlined !== null && secondaryButtonOutlined !== void 0 ? secondaryButtonOutlined : mergedProps.secondaryButtonOutlined,
+        accentButtonOutlined: accentButtonOutlined !== null && accentButtonOutlined !== void 0 ? accentButtonOutlined : mergedProps.accentButtonOutlined,
+        ctaPrimaryUrl: ctaPrimaryUrl !== null && ctaPrimaryUrl !== void 0 ? ctaPrimaryUrl : mergedProps.ctaPrimaryUrl,
+        ctaSecondaryUrl: ctaSecondaryUrl !== null && ctaSecondaryUrl !== void 0 ? ctaSecondaryUrl : mergedProps.ctaSecondaryUrl,
+        ctaAccentUrl: ctaAccentUrl !== null && ctaAccentUrl !== void 0 ? ctaAccentUrl : mergedProps.ctaAccentUrl,
+        ctaPrimaryText: ctaPrimaryText !== null && ctaPrimaryText !== void 0 ? ctaPrimaryText : mergedProps.ctaPrimaryText,
+        ctaSecondaryText: ctaSecondaryText !== null && ctaSecondaryText !== void 0 ? ctaSecondaryText : mergedProps.ctaSecondaryText,
+        ctaAccentText: ctaAccentText !== null && ctaAccentText !== void 0 ? ctaAccentText : mergedProps.ctaAccentText,
+        ctaGap: ctaGap !== null && ctaGap !== void 0 ? ctaGap : mergedProps.ctaGap,
+        ctaFlexJustify: ctaFlexJustify !== null && ctaFlexJustify !== void 0 ? ctaFlexJustify : mergedProps.ctaFlexJustify,
+        ctaPrimaryRounded: ctaPrimaryRounded !== null && ctaPrimaryRounded !== void 0 ? ctaPrimaryRounded : mergedProps.ctaPrimaryRounded,
+        ctaPrimaryFlat: ctaPrimaryFlat !== null && ctaPrimaryFlat !== void 0 ? ctaPrimaryFlat : mergedProps.ctaPrimaryFlat,
+        ctaPrimaryPrefix: ctaPrimaryPrefix !== null && ctaPrimaryPrefix !== void 0 ? ctaPrimaryPrefix : mergedProps.ctaPrimaryPrefix,
+        ctaPrimarySuffix: ctaPrimarySuffix !== null && ctaPrimarySuffix !== void 0 ? ctaPrimarySuffix : mergedProps.ctaPrimarySuffix,
+        ctaSecondaryRounded: ctaSecondaryRounded !== null && ctaSecondaryRounded !== void 0 ? ctaSecondaryRounded : mergedProps.ctaSecondaryRounded,
+        ctaSecondaryFlat: ctaSecondaryFlat !== null && ctaSecondaryFlat !== void 0 ? ctaSecondaryFlat : mergedProps.ctaSecondaryFlat,
+        ctaSecondaryPrefix: ctaSecondaryPrefix !== null && ctaSecondaryPrefix !== void 0 ? ctaSecondaryPrefix : mergedProps.ctaSecondaryPrefix,
+        ctaSecondarySuffix: ctaSecondarySuffix !== null && ctaSecondarySuffix !== void 0 ? ctaSecondarySuffix : mergedProps.ctaSecondarySuffix,
+        ctaAccentRounded: ctaAccentRounded !== null && ctaAccentRounded !== void 0 ? ctaAccentRounded : mergedProps.ctaAccentRounded,
+        ctaAccentFlat: ctaAccentFlat !== null && ctaAccentFlat !== void 0 ? ctaAccentFlat : mergedProps.ctaAccentFlat,
+        ctaAccentPrefix: ctaAccentPrefix !== null && ctaAccentPrefix !== void 0 ? ctaAccentPrefix : mergedProps.ctaAccentPrefix,
+        ctaAccentSuffix: ctaAccentSuffix !== null && ctaAccentSuffix !== void 0 ? ctaAccentSuffix : mergedProps.ctaAccentSuffix,
+        primaryIconSize: primaryIconSize !== null && primaryIconSize !== void 0 ? primaryIconSize : mergedProps.primaryIconSize,
+        secondaryIconSize: secondaryIconSize !== null && secondaryIconSize !== void 0 ? secondaryIconSize : mergedProps.secondaryIconSize,
+        accentIconSize: accentIconSize !== null && accentIconSize !== void 0 ? accentIconSize : mergedProps.accentIconSize,
+    };
     var layoutClass = [
-        mergedProps.layout,
-        mergedProps.reverse ? 'reverse' : '',
-        "text-".concat(mergedProps.textAlign),
+        final.layout,
+        final.reverse ? 'reverse' : '',
+        "text-".concat(final.textAlign),
     ]
         .filter(Boolean)
         .join(' ');
     // CTA Buttons Component
     var CTAButtons = function () {
-        var hasCTAs = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
+        var hasCTAs = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
         if (!hasCTAs)
             return null;
-        return (react_1.default.createElement(Flex_1.default, { gap: mergedProps.ctaGap, justify: mergedProps.ctaFlexJustify, className: "mt-6 ".concat(mergedProps.ctaClass), wrap: "wrap", width: '100%' },
-            mergedProps.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: mergedProps.primaryButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaPrimaryUrl; }, rounded: mergedProps.ctaPrimaryRounded, flat: mergedProps.ctaPrimaryFlat, stringPrefix: mergedProps.ctaPrimaryPrefix, stringSuffix: mergedProps.ctaPrimarySuffix, iconSize: mergedProps.primaryIconSize }, mergedProps.ctaPrimaryText)),
-            mergedProps.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: mergedProps.secondaryButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaSecondaryUrl; }, rounded: mergedProps.ctaSecondaryRounded, flat: mergedProps.ctaSecondaryFlat, stringPrefix: mergedProps.ctaSecondaryPrefix, stringSuffix: mergedProps.ctaSecondarySuffix, iconSize: mergedProps.secondaryIconSize }, mergedProps.ctaSecondaryText)),
-            mergedProps.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: mergedProps.accentButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaAccentUrl; }, rounded: mergedProps.ctaAccentRounded, flat: mergedProps.ctaAccentFlat, stringPrefix: mergedProps.ctaAccentPrefix, stringSuffix: mergedProps.ctaAccentSuffix, iconSize: mergedProps.accentIconSize }, mergedProps.ctaAccentText))));
+        return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-6 ".concat(final.ctaClass), wrap: "wrap", width: '100%' },
+            final.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: final.primaryButtonOutlined, onClick: function () { return final.ctaPrimaryUrl && (window.location.href = final.ctaPrimaryUrl); }, rounded: final.ctaPrimaryRounded, flat: final.ctaPrimaryFlat, stringPrefix: final.ctaPrimaryPrefix, stringSuffix: final.ctaPrimarySuffix, iconSize: final.primaryIconSize }, final.ctaPrimaryText)),
+            final.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: final.secondaryButtonOutlined, onClick: function () { return final.ctaSecondaryUrl && (window.location.href = final.ctaSecondaryUrl); }, rounded: final.ctaSecondaryRounded, flat: final.ctaSecondaryFlat, stringPrefix: final.ctaSecondaryPrefix, stringSuffix: final.ctaSecondarySuffix, iconSize: final.secondaryIconSize }, final.ctaSecondaryText)),
+            final.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: final.accentButtonOutlined, onClick: function () { return final.ctaAccentUrl && (window.location.href = final.ctaAccentUrl); }, rounded: final.ctaAccentRounded, flat: final.ctaAccentFlat, stringPrefix: final.ctaAccentPrefix, stringSuffix: final.ctaAccentSuffix, iconSize: final.accentIconSize }, final.ctaAccentText))));
     };
     // Enhanced Text Content with flexible styling
-    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(mergedProps.layout === 'centered' ? "text-center" : "", " ").concat(mergedProps.textWrapperClass) },
-        mergedProps.heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass }, mergedProps.heading)),
-        mergedProps.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.subheadingSize, weight: mergedProps.subheadingWeight, color: mergedProps.subheadingColor, funcss: "mt-2 ".concat(mergedProps.subheadingClass) }, mergedProps.subheading)),
-        mergedProps.content && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.contentSize, weight: mergedProps.contentWeight, color: mergedProps.contentColor, funcss: "mt-4 ".concat(mergedProps.contentClass), article: true }, children || (typeof mergedProps.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: mergedProps.content } }) : mergedProps.content))),
-        mergedProps.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(mergedProps.ctaClass) }, mergedProps.cta)) : (react_1.default.createElement(CTAButtons, null))));
+    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass) },
+        final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass }, final.heading)),
+        final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-2 ".concat(final.subheadingClass) }, final.subheading)),
+        final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-4 ".concat(final.contentClass), article: true }, children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
+        final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass) }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
     // Enhanced Image Content - uses imageUrl if no image component provided
-    var ImageContent = (mergedProps.image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(mergedProps.imageWrapperClass) }, mergedProps.image ? (mergedProps.image) : (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt || 'Vista image', className: "".concat(mergedProps.imageClass), style: {
+    var ImageContent = (final.image || final.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(final.imageWrapperClass) }, final.image ? (final.image) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: "".concat(final.imageClass), style: {
             objectFit: 'cover',
-            maxWidth: mergedProps.imageSize,
+            maxWidth: final.imageSize,
             borderRadius: 'inherit'
         } }))));
-    var isCentered = mergedProps.layout === 'centered';
-    var isStacked = mergedProps.layout === 'stacked';
+    var isCentered = final.layout === 'centered';
+    var isStacked = final.layout === 'stacked';
     var positionStyles = {
         'top-left': { top: '-100px', left: '-100px' },
         'top-right': { top: '-100px', right: '-100px' },
@@ -158,61 +244,61 @@ var Vista = function (_a) {
     };
     var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
     var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
-    var gradientStyle = __assign({ position: 'absolute', width: mergedProps.gradientSize, height: mergedProps.gradientSize, background: mergedProps.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: mergedProps.opacity, filter: "blur(".concat(mergedProps.blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[mergedProps.gradientPosition]);
+    var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize, height: final.gradientSize, background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity, filter: "blur(".concat(final.blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition]);
     return (react_1.default.createElement(ScrollInView_1.default, null,
-        react_1.default.createElement("div", { className: "vista \n          ".concat(mergedProps.pattern === 'grid' ? 'grid-bg' :
-                mergedProps.pattern === 'dots' ? 'bg-pattern-dots' :
-                    mergedProps.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
-                        mergedProps.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
-                            mergedProps.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
-                                mergedProps.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(mergedProps.bg, " p-").concat(mergedProps.padding, " ").concat(layoutClass, " ").concat(mergedProps.sectionClass, " ").concat(mergedProps.funcss), style: {
+        react_1.default.createElement("div", { className: "vista \n          ".concat(final.pattern === 'grid' ? 'grid-bg' :
+                final.pattern === 'dots' ? 'bg-pattern-dots' :
+                    final.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
+                        final.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
+                            final.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
+                                final.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(final.bg, " p-").concat(final.padding, " ").concat(layoutClass, " ").concat(final.sectionClass, " ").concat(final.funcss), style: {
                 position: 'relative',
                 overflow: 'hidden',
                 minHeight: "90vh",
-                backgroundImage: mergedProps.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
-                    mergedProps.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
-                        mergedProps.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, "), rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
-                            mergedProps.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 75%)") :
-                                mergedProps.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
-                                    mergedProps.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") : ''
+                backgroundImage: final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px)") :
+                    final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
+                        final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, "), rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
+                            final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%)") :
+                                final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
+                                    final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") : ''
             } },
-            mergedProps.showGradient && react_1.default.createElement("div", { style: gradientStyle }),
-            react_1.default.createElement("div", { className: "vista-container ".concat(mergedProps.containerClass), style: { position: 'relative', zIndex: 1, gap: mergedProps.gap || "2rem" } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
-                (mergedProps.imgPosition === 'top') && ImageContent,
+            final.showGradient && react_1.default.createElement("div", { style: gradientStyle }),
+            react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass), style: { position: 'relative', zIndex: 1, gap: final.gap || "2rem" } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
+                (final.imgPosition === 'top') && ImageContent,
                 TextContent,
-                (mergedProps.imgPosition === 'bottom') && ImageContent)) : mergedProps.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
+                (final.imgPosition === 'bottom') && ImageContent)) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
                 ImageContent,
                 TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                (mergedProps.layout === 'imageLeft') && react_1.default.createElement(Col_1.default, null, ImageContent),
+                (final.layout === 'imageLeft') && react_1.default.createElement(Col_1.default, null, ImageContent),
                 TextContent,
-                (mergedProps.layout === 'imageRight') && react_1.default.createElement(Col_1.default, null, ImageContent)))),
-            mergedProps.fade && (react_1.default.createElement("div", { style: {
+                (final.layout === 'imageRight') && react_1.default.createElement(Col_1.default, null, ImageContent)))),
+            final.fade && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     width: '100%',
                     height: '100%',
-                    background: mergedProps.fadeRadial
-                        ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(mergedProps.bg || 'page-bg'), " 100%)")
-                        : "linear-gradient(to ".concat(mergedProps.fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(mergedProps.bg || 'page-bg'), " 0%, transparent 100%)"),
+                    background: final.fadeRadial
+                        ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 100%)")
+                        : "linear-gradient(to ".concat(final.fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 0%, transparent 100%)"),
                     zIndex: 0,
                     pointerEvents: 'none'
                 } })),
-            mergedProps.backgroundImage && (react_1.default.createElement("div", { style: {
+            final.backgroundImage && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     inset: 0,
-                    backgroundImage: "url(".concat(mergedProps.backgroundImage, ")"),
+                    backgroundImage: "url(".concat(final.backgroundImage, ")"),
                     backgroundSize: 'cover',
                     backgroundPosition: 'center',
                     zIndex: -1,
                     width: '100%',
                     height: '100%',
                 } })),
-            mergedProps.backgroundImage && mergedProps.fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
+            final.backgroundImage && final.fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     width: '100%',
                     height: '100%',
                     inset: 0,
-                    backgroundColor: "rgba(0, 0, 0, ".concat(mergedProps.fadeOverlayDarken, ")"),
+                    backgroundColor: "rgba(0, 0, 0, ".concat(final.fadeOverlayDarken, ")"),
                     zIndex: -1,
                 } })))));
 };

package/utils/componentUtils.js

@@ -14,6 +14,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAvailableVariants = exports.hasComponentVariant = exports.useComponentProps = exports.useComponentConfiguration = exports.mergeComponentConfig = exports.getComponentConfig = void 0;
 var theme_1 = require("../ui/theme/theme");
 var react_1 = require("react");
+/**
+ * Check if a variant name is valid (not empty or whitespace only)
+ */
+var isValidVariantName = function (variantName) {
+    return !!variantName && variantName.trim() !== '';
+};
+/**
+ * Filter out empty string and undefined values from component props
+ */
+var filterEmptyProps = function (props) {
+    var filtered = {};
+    for (var key in props) {
+        var value = props[key];
+        // Only include props that are not undefined and not empty strings
+        if (value !== undefined && value !== '') {
+            filtered[key] = value;
+        }
+    }
+    return filtered;
+};
 /**
  * Universal component config getter
  *
@@ -61,8 +81,10 @@ var getComponentConfig = function (projectData, componentName, variantName) {
         }
     }
     var variantData = component[targetVariant];
+    // Filter out empty string and undefined props from config
+    var filteredComponentProps = filterEmptyProps((variantData === null || variantData === void 0 ? void 0 : variantData.componentProps) || {});
     return {
-        componentProps: (variantData === null || variantData === void 0 ? void 0 : variantData.componentProps) || {},
+        componentProps: filteredComponentProps,
         variantExists: variantExists,
         actualVariant: targetVariant,
         availableVariants: availableVariants,
@@ -135,7 +157,8 @@ var useComponentConfiguration = function (componentName, variantName) {
     var projectData = (0, theme_1.useTheme)().projectData;
     // Memoize config computation - only recompute when dependencies change
     var config = (0, react_1.useMemo)(function () {
-        if (!variantName) {
+        // Check for valid variant name (not empty or whitespace only)
+        if (!isValidVariantName(variantName)) {
             return {
                 componentProps: {},
                 variantExists: false,
@@ -150,8 +173,8 @@ var useComponentConfiguration = function (componentName, variantName) {
     var mergeWithLocal = (0, react_1.useMemo)(function () {
         return function (localProps) {
             if (localProps === void 0) { localProps = {}; }
-            // If no variant name was provided, return local props as-is
-            if (!variantName) {
+            // If no valid variant name was provided, return local props as-is
+            if (!isValidVariantName(variantName)) {
                 return {
                     props: localProps,
                     variant: '',