funuicss 3.7.1 → 3.7.3

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,134 +21,51 @@ 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 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
-    heading = _a.heading, _l = _a.headingSize, headingSize = _l === void 0 ? '5xl' : _l, _m = _a.headingWeight, headingWeight = _m === void 0 ? 700 : _m, _o = _a.headingColor, headingColor = _o === void 0 ? '' : _o, _p = _a.headingClass, headingClass = _p === void 0 ? '' : _p, subheading = _a.subheading, _q = _a.subheadingSize, subheadingSize = _q === void 0 ? 'lg' : _q, _r = _a.subheadingWeight, subheadingWeight = _r === void 0 ? 400 : _r, _s = _a.subheadingColor, subheadingColor = _s === void 0 ? 'light' : _s, _t = _a.subheadingClass, subheadingClass = _t === void 0 ? '' : _t, content = _a.content, _u = _a.contentSize, contentSize = _u === void 0 ? 'base' : _u, _v = _a.contentWeight, contentWeight = _v === void 0 ? 400 : _v, _w = _a.contentColor, contentColor = _w === void 0 ? '' : _w, _x = _a.contentClass, contentClass = _x === void 0 ? '' : _x, image = _a.image, _y = _a.imageUrl, imageUrl = _y === void 0 ? '' : _y, _z = _a.imageAlt, imageAlt = _z === void 0 ? '' : _z, _0 = _a.imageClass, imageClass = _0 === void 0 ? '' : _0, _1 = _a.imageSize, imageSize = _1 === void 0 ? '100%' : _1, cta = _a.cta, _2 = _a.ctaClass, ctaClass = _2 === void 0 ? '' : _2, _3 = _a.sectionClass, sectionClass = _3 === void 0 ? '' : _3, _4 = _a.containerClass, containerClass = _4 === void 0 ? '' : _4, _5 = _a.textWrapperClass, textWrapperClass = _5 === void 0 ? '' : _5, _6 = _a.gap, gap = _6 === void 0 ? '2rem' : _6, _7 = _a.imageWrapperClass, imageWrapperClass = _7 === void 0 ? '' : _7, children = _a.children, 
-    // Gradient Props
-    _8 = _a.showGradient, 
-    // Gradient Props
-    showGradient = _8 === void 0 ? false : _8, _9 = _a.gradientPosition, gradientPosition = _9 === void 0 ? 'bottom-right' : _9, _10 = _a.gradientSize, gradientSize = _10 === void 0 ? '300px' : _10, _11 = _a.blurry, blurry = _11 === void 0 ? 100 : _11, _12 = _a.opacity, opacity = _12 === void 0 ? 0.4 : _12, gradientColors = _a.gradientColors, _13 = _a.fade, fade = _13 === void 0 ? false : _13, _14 = _a.fadeDirection, fadeDirection = _14 === void 0 ? 'bottom' : _14, _15 = _a.fadeRadial, fadeRadial = _15 === void 0 ? false : _15, _16 = _a.fadeOverlayDarken, fadeOverlayDarken = _16 === void 0 ? 0.5 : _16, _17 = _a.backgroundImage, backgroundImage = _17 === void 0 ? '' : _17, _18 = _a.variant, variant = _18 === void 0 ? '' : _18, 
-    // New CTA Button Props
-    _19 = _a.showPrimaryCTA, 
-    // New CTA Button Props
-    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({
-        layout: layout,
-        reverse: reverse,
-        bg: bg,
-        padding: padding,
-        textAlign: textAlign,
-        imgPosition: imgPosition,
-        funcss: funcss,
-        pattern: pattern,
-        patternOpacity: patternOpacity,
-        showGradient: showGradient,
-        gradientPosition: gradientPosition,
-        gradientSize: gradientSize,
-        blurry: blurry,
-        opacity: opacity,
-        gradientColors: gradientColors,
-        fade: fade,
-        fadeDirection: fadeDirection,
-        fadeRadial: fadeRadial,
-        fadeOverlayDarken: fadeOverlayDarken,
-        backgroundImage: backgroundImage,
-        sectionClass: sectionClass,
-        containerClass: containerClass,
-        textWrapperClass: textWrapperClass,
-        imageWrapperClass: imageWrapperClass,
-        gap: gap,
-        // Enhanced content props
-        heading: heading,
-        headingSize: headingSize,
-        headingWeight: headingWeight,
-        headingColor: headingColor,
-        headingClass: headingClass,
-        subheading: subheading,
-        subheadingSize: subheadingSize,
-        subheadingWeight: subheadingWeight,
-        subheadingColor: subheadingColor,
-        subheadingClass: subheadingClass,
-        content: content,
-        contentSize: contentSize,
-        contentWeight: contentWeight,
-        contentColor: contentColor,
-        contentClass: contentClass,
-        image: image,
-        imageUrl: imageUrl,
-        imageSize: imageSize,
-        imageAlt: imageAlt,
-        imageClass: imageClass,
-        cta: cta,
-        ctaClass: ctaClass,
-        // CTA Button props
-        showPrimaryCTA: showPrimaryCTA,
-        showSecondaryCTA: showSecondaryCTA,
-        showAccentCTA: showAccentCTA,
-        primaryButtonOutlined: primaryButtonOutlined,
-        secondaryButtonOutlined: secondaryButtonOutlined,
-        accentButtonOutlined: accentButtonOutlined,
-        ctaPrimaryUrl: ctaPrimaryUrl,
-        ctaSecondaryUrl: ctaSecondaryUrl,
-        ctaAccentUrl: ctaAccentUrl,
-        ctaPrimaryText: ctaPrimaryText,
-        ctaSecondaryText: ctaSecondaryText,
-        ctaAccentText: ctaAccentText,
-        ctaGap: ctaGap,
-        ctaFlexJustify: ctaFlexJustify,
-        ctaPrimaryRounded: ctaPrimaryRounded,
-        ctaPrimaryFlat: ctaPrimaryFlat,
-        ctaPrimaryPrefix: ctaPrimaryPrefix,
-        ctaPrimarySuffix: ctaPrimarySuffix,
-        ctaSecondaryRounded: ctaSecondaryRounded,
-        ctaSecondaryFlat: ctaSecondaryFlat,
-        ctaSecondaryPrefix: ctaSecondaryPrefix,
-        ctaSecondarySuffix: ctaSecondarySuffix,
-        ctaAccentRounded: ctaAccentRounded,
-        ctaAccentFlat: ctaAccentFlat,
-        ctaAccentPrefix: ctaAccentPrefix,
-        ctaAccentSuffix: ctaAccentSuffix,
-        primaryIconSize: primaryIconSize,
-        secondaryIconSize: secondaryIconSize,
-        accentIconSize: accentIconSize,
-    }).props;
+var Button_1 = __importDefault(require("../button/Button"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
+var Vista = function (localProps) {
+    // Use the component config hook with the variant from localProps
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', localProps.variant).mergeWithLocal;
+    // Merge config with local props - local props override config
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Use mergedProps directly - they already have the correct merge logic applied
+    var final = mergedProps;
+    // Debug: Log what props are actually coming through
+    react_1.default.useEffect(function () {
+        console.log('Vista merged props:', mergedProps);
+        console.log('Vista config available:', Object.keys(mergedProps).length > 0);
+    }, [mergedProps]);
     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 }, localProps.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 +75,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 || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity, filter: "blur(".concat(final.blurry || 4, "rem)"), 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: '',