@billdog.io/react-native 1.0.0-beta.2

package/dist/ComponentRenderer.js

@@ -0,0 +1,886 @@
+"use strict";
+/**
+ * Component Renderer - Maps PaywallComponent types to React Native components
+ * Enhanced with CSS-first rendering, gradient support, and theme-aware color resolution
+ * UPDATED: Comprehensive theme support and fixed stack alignment
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentRenderer = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const VariableResolver_1 = require("./VariableResolver");
+const LayoutEngine_1 = require("./LayoutEngine");
+const dynamicValues_1 = require("./dynamicValues");
+const PaywallStateManager_1 = require("./PaywallStateManager");
+const BillDog_1 = require("./BillDog");
+const deviceDetection_1 = require("./utils/deviceDetection");
+const CountdownComponent_1 = require("./components/CountdownComponent");
+const CarouselComponent_1 = require("./components/CarouselComponent");
+const AccordionComponent_1 = require("./components/AccordionComponent");
+const SliderComponent_1 = require("./components/SliderComponent");
+const ToggleComponent_1 = require("./components/ToggleComponent");
+const CheckboxComponent_1 = require("./components/CheckboxComponent");
+const SegmentedPickerComponent_1 = require("./components/SegmentedPickerComponent");
+const ConfettiComponent_1 = require("./components/ConfettiComponent");
+const HapticFeedbackComponent_1 = require("./components/HapticFeedbackComponent");
+const DelayedXComponent_1 = require("./components/DelayedXComponent");
+const ProgressLoaderComponent_1 = require("./components/ProgressLoaderComponent");
+const ChartCurveComponent_1 = require("./components/ChartCurveComponent");
+const SingleChoiceGridComponent_1 = require("./components/SingleChoiceGridComponent");
+const MultiChoiceGridComponent_1 = require("./components/MultiChoiceGridComponent");
+const DrawerModalComponent_1 = require("./components/DrawerModalComponent");
+const TimelineComponent_1 = require("./components/TimelineComponent");
+const TextInputComponent_1 = require("./components/TextInputComponent");
+const StarRatingInputComponent_1 = require("./components/StarRatingInputComponent");
+const NPSScaleComponent_1 = require("./components/NPSScaleComponent");
+const OAuthButtonComponent_1 = require("./components/OAuthButtonComponent");
+const ProgressStepperComponent_1 = require("./components/ProgressStepperComponent");
+const ShareCodeComponent_1 = require("./components/ShareCodeComponent");
+const ShareButtonsComponent_1 = require("./components/ShareButtonsComponent");
+const VerticalProductsComponent_1 = require("./components/VerticalProductsComponent");
+const HorizontalProductsComponent_1 = require("./components/HorizontalProductsComponent");
+const AccoladeCpsComponent_1 = require("./components/AccoladeCpsComponent");
+const StickerCompositeComponent_1 = require("./components/StickerCompositeComponent");
+const AnimatedWrapper_1 = require("./components/AnimatedWrapper");
+const NavigationComponent_1 = require("./components/NavigationComponent");
+const TabsComponent_1 = require("./components/TabsComponent");
+const GradientView_1 = require("./components/GradientView");
+const ComponentRenderer = ({ component, configuration, theme, onButtonPress, stateManager, isPreviewMode = true, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    // Process full component to evaluate dynamic values across ALL property bags.
+    //
+    // Device variables MUST be merged in. iOS (WallManager) and Android (PaywallManager) both enrich the
+    // bag with `buildDeviceVariables` before resolving dynamic values; React Native was the only native SDK
+    // that did not, so every `device.*` condition (device.osName, device.platform, …) silently resolved to
+    // its default here. buildDeviceVariables emits the canonical flat keys (`device.osName`) the audience
+    // authors target; explicit `configuration.variables` win on any collision.
+    // Live product selection (Phase 2b). Seeded from the store, then kept current via a
+    // subscription, so `products.selectedIndex` / `selectedProduct.*` conditions resolve
+    // against what the user actually picked instead of being pinned to the first package.
+    // Falls back to 0 whenever no state manager is supplied (e.g. standalone renders),
+    // which is exactly the previous behaviour.
+    const [liveSelectedIndex, setLiveSelectedIndex] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!stateManager)
+            return;
+        const key = PaywallStateManager_1.PaywallStateManager.SELECTED_INDEX_KEY;
+        const initial = (_a = stateManager.getState) === null || _a === void 0 ? void 0 : _a.call(stateManager, key);
+        if (initial !== undefined && initial !== null)
+            setLiveSelectedIndex(Number(initial) || 0);
+        return (_b = stateManager.subscribeToState) === null || _b === void 0 ? void 0 : _b.call(stateManager, key, (value) => {
+            setLiveSelectedIndex(Number(value) || 0);
+        });
+    }, [stateManager]);
+    const [customerInfo, setCustomerInfo] = (0, react_1.useState)(() => BillDog_1.BillDog.customerInfoEmitter.latest);
+    (0, react_1.useEffect)(() => {
+        const sub = BillDog_1.BillDog.customerInfoEmitter.addListener((info) => {
+            setCustomerInfo(info);
+        });
+        return () => {
+            sub.remove();
+        };
+    }, []);
+    const resolvedComponent = (0, react_1.useMemo)(() => {
+        // Full offering-aware render bag (device + product/offer/user + user.seed/
+        // subscription) — parity with iOS/Android Phase 2. Was device + config.variables
+        // only, so every product/user DV condition silently resolved to `default`.
+        // appUserId + customerInfo are read here (sync) and threaded in to avoid an
+        // import cycle.
+        const bag = VariableResolver_1.VariableResolver.buildRenderVariables(configuration, (0, deviceDetection_1.getDeviceInfo)(), {
+            selectedIndex: liveSelectedIndex,
+            appUserId: BillDog_1.BillDog.getAppUserId(),
+            customerInfo: customerInfo,
+        });
+        const allVariables = { ...bag, ...(configuration.variables || {}) };
+        return (0, dynamicValues_1.processFullComponent)(component, allVariables);
+    }, [component, configuration.variables, configuration.packages, liveSelectedIndex, customerInfo]);
+    // Create a VariableResolver with full localization support (must be before early returns)
+    const variableResolver = (0, react_1.useMemo)(() => {
+        return VariableResolver_1.VariableResolver.withLocalization(configuration);
+    }, [configuration]);
+    // Resolve variables in text using the full resolver (must be before early returns)
+    const resolveVariable = (0, react_1.useCallback)((text) => {
+        if (!text)
+            return '';
+        return variableResolver.resolve(text);
+    }, [variableResolver]);
+    const processedProperties = resolvedComponent.properties || {};
+    // Don't render if not visible (resolved from dynamic values)
+    if (resolvedComponent.visible === false || processedProperties.visible === false) {
+        return null;
+    }
+    // Get combined style with absolute position support and custom CSS
+    const style = LayoutEngine_1.LayoutEngine.getComponentStyle(resolvedComponent.layout, resolvedComponent.appearance, resolvedComponent.size, resolvedComponent.type, processedProperties, resolvedComponent.absolutePosition, resolvedComponent.zIndex, processedProperties.customCSS);
+    /**
+     * Theme-aware color resolution
+     * Resolves CSS variables and color objects using the provided theme
+     */
+    const resolveColor = (color, fallback) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (!color)
+            return fallback || 'transparent';
+        if (typeof color === 'string') {
+            // Handle CSS variable references
+            if (color.includes('var(--')) {
+                return resolveCSSVariable(color) || fallback || 'transparent';
+            }
+            return color;
+        }
+        // Handle object format
+        if (typeof color === 'object') {
+            // Check for resolvedColor first (pre-computed by web builder)
+            if (color.resolvedColor) {
+                return resolveColor(color.resolvedColor, fallback);
+            }
+            if (color.type === 'color' && color.color) {
+                return resolveColor(color.color, fallback);
+            }
+            if (color.type === 'gradient' && ((_b = (_a = color.gradient) === null || _a === void 0 ? void 0 : _a.stops) === null || _b === void 0 ? void 0 : _b.length)) {
+                const firstStop = color.gradient.stops[0];
+                if (firstStop === null || firstStop === void 0 ? void 0 : firstStop.color) {
+                    return resolveColor(firstStop.color, fallback);
+                }
+            }
+            // HSL format
+            if (color.type === 'hsl' || (color.h !== undefined && color.s !== undefined && color.l !== undefined)) {
+                const h = (_c = color.h) !== null && _c !== void 0 ? _c : 0;
+                const s = (_d = color.s) !== null && _d !== void 0 ? _d : 0;
+                const l = (_e = color.l) !== null && _e !== void 0 ? _e : 0;
+                const a = (_g = (_f = color.a) !== null && _f !== void 0 ? _f : color.opacity) !== null && _g !== void 0 ? _g : 1;
+                if (a < 1) {
+                    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+                }
+                return `hsl(${h}, ${s}%, ${l}%)`;
+            }
+            // RGBA format
+            if (color.type === 'rgba' || (color.r !== undefined && color.g !== undefined && color.b !== undefined)) {
+                const r = (_h = color.r) !== null && _h !== void 0 ? _h : 0;
+                const g = (_j = color.g) !== null && _j !== void 0 ? _j : 0;
+                const b = (_k = color.b) !== null && _k !== void 0 ? _k : 0;
+                const a = (_m = (_l = color.a) !== null && _l !== void 0 ? _l : color.opacity) !== null && _m !== void 0 ? _m : 1;
+                return `rgba(${r}, ${g}, ${b}, ${a})`;
+            }
+            if (color.hex)
+                return color.hex;
+            if (color.value)
+                return color.value;
+            if (color.color && typeof color.color === 'string')
+                return color.color;
+        }
+        return fallback || 'transparent';
+    };
+    /**
+     * Resolve CSS variable to actual color value using theme
+     * UPDATED: Handle themingMode disabled
+     */
+    const resolveCSSVariable = (cssVar) => {
+        var _a;
+        const varMatch = cssVar.match(/var\(--([a-zA-Z-]+)\)/);
+        if (!varMatch)
+            return cssVar;
+        const varName = varMatch[1];
+        // Extract opacity if present
+        const opacityMatch = cssVar.match(/\/\s*([\d.]+)\s*\)?$/);
+        const opacity = opacityMatch ? parseFloat(opacityMatch[1]) : 1;
+        // If theming is disabled, use default colors only
+        if ((theme === null || theme === void 0 ? void 0 : theme.themingMode) === 'disabled') {
+            const defaultColor = LayoutEngine_1.ThemeColorResolver.getDefaultVariableColor(varName);
+            return opacity < 1 ? applyOpacity(defaultColor, opacity) : defaultColor;
+        }
+        // First try theme's resolvedColors (direct lookup)
+        if ((_a = theme === null || theme === void 0 ? void 0 : theme.resolvedColors) === null || _a === void 0 ? void 0 : _a[varName]) {
+            const color = parseHexColor(theme.resolvedColors[varName]);
+            return opacity < 1 ? applyOpacity(color, opacity) : color;
+        }
+        // Then try ThemeColorResolver (which was initialized with theme)
+        const resolved = LayoutEngine_1.ThemeColorResolver.resolveVariable(varName);
+        if (resolved) {
+            const parsedResolved = parseHexColor(resolved);
+            return opacity < 1 ? applyOpacity(parsedResolved, opacity) : parsedResolved;
+        }
+        // Fallback to defaults
+        const defaultColor = LayoutEngine_1.ThemeColorResolver.getDefaultVariableColor(varName);
+        return opacity < 1 ? applyOpacity(defaultColor, opacity) : defaultColor;
+    };
+    /**
+     * Parse 8-character hex colors (#AARRGGBB format) to rgba
+     */
+    const parseHexColor = (hex) => {
+        if (!hex || typeof hex !== 'string')
+            return hex;
+        // Handle 8-character hex with alpha prefix (#AARRGGBB format)
+        if (hex.length === 9 && hex.startsWith('#')) {
+            const alpha = parseInt(hex.substring(1, 3), 16) / 255;
+            const r = parseInt(hex.substring(3, 5), 16);
+            const g = parseInt(hex.substring(5, 7), 16);
+            const b = parseInt(hex.substring(7, 9), 16);
+            return `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`;
+        }
+        return hex;
+    };
+    /**
+     * Apply opacity to a color
+     */
+    const applyOpacity = (color, opacity) => {
+        if (color.startsWith('#')) {
+            const cleanHex = color.replace('#', '');
+            if (cleanHex.length >= 6) {
+                const r = parseInt(cleanHex.substring(0, 2), 16);
+                const g = parseInt(cleanHex.substring(2, 4), 16);
+                const b = parseInt(cleanHex.substring(4, 6), 16);
+                return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+            }
+        }
+        if (color.startsWith('hsl(')) {
+            const match = color.match(/hsl\(\s*([\d.]+)\s*,?\s*([\d.]+)%?\s*,?\s*([\d.]+)%?\s*\)/);
+            if (match) {
+                return `hsla(${match[1]}, ${match[2]}%, ${match[3]}%, ${opacity})`;
+            }
+        }
+        return color;
+    };
+    /**
+     * Universal children rendering function for composite components
+     * Renders children in a stack layout (horizontal, vertical, or layered)
+     */
+    const renderWithChildren = (component) => {
+        var _a;
+        if (!((_a = component.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return <react_native_1.View />;
+        }
+        // Build container style from component's containerLayout - uses canonical 'direction'
+        const containerLayout = component.containerLayout || { direction: 'vertical' };
+        const containerStyle = {
+            flexDirection: containerLayout.direction === 'horizontal' ? 'row' : 'column',
+        };
+        // Add gap (React Native doesn't support gap directly, use margin on children)
+        if (containerLayout.gap) {
+            // Will need to add margin to children instead
+        }
+        // Add alignment
+        if (containerLayout.verticalAlignment) {
+            containerStyle.alignItems = containerLayout.verticalAlignment === 'center' ? 'center'
+                : containerLayout.verticalAlignment === 'end' ? 'flex-end'
+                    : 'flex-start';
+        }
+        if (containerLayout.horizontalAlignment) {
+            containerStyle.justifyContent = containerLayout.horizontalAlignment === 'center' ? 'center'
+                : containerLayout.horizontalAlignment === 'end' ? 'flex-end'
+                    : containerLayout.horizontalAlignment === 'space-between' ? 'space-between'
+                        : 'flex-start';
+        }
+        return (<react_native_1.View style={[containerStyle, style]}>
+        {component.children.map((child) => (<exports.ComponentRenderer key={child.id} component={child} configuration={configuration} theme={theme} onButtonPress={onButtonPress} stateManager={stateManager} isPreviewMode={isPreviewMode}/>))}
+      </react_native_1.View>);
+    };
+    // Render child component helper for accordion etc.
+    const renderChild = (child) => (<exports.ComponentRenderer key={child.id} component={child} configuration={configuration} theme={theme} onButtonPress={onButtonPress} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+    // Animation wrapper helper
+    const wrapWithAnimation = (content) => {
+        const animationMode = processedProperties.animationMode;
+        const animationPreset = processedProperties.animationPreset;
+        if (animationMode === 'none' || !animationPreset) {
+            return content;
+        }
+        return (<AnimatedWrapper_1.AnimatedWrapper preset={animationPreset} trigger={animationMode === 'loop' ? 'loop' : 'enter'} duration={processedProperties.animationDuration} delay={processedProperties.animationDelay} easing={processedProperties.animationEasing}>
+        {content}
+      </AnimatedWrapper_1.AnimatedWrapper>);
+    };
+    /**
+     * Helper to map alignment strings to flex values
+     * FIXED: Proper mapping for both axes
+     */
+    const mapAlignment = (align) => {
+        switch (align) {
+            case 'start': return 'flex-start';
+            case 'center': return 'center';
+            case 'end': return 'flex-end';
+            case 'stretch': return 'stretch';
+            case 'space-between': return 'space-between';
+            default: return 'flex-start';
+        }
+    };
+    // Helper to get gap value from containerLayout
+    const getGapValue = (gap) => {
+        if (typeof gap === 'number')
+            return gap;
+        if (gap && typeof gap === 'object' && 'value' in gap)
+            return gap.value;
+        return 8;
+    };
+    // Helper to parse color values (HSL, hex, rgba, gradient, or object format)
+    const parseColorValue = (color) => {
+        return resolveColor(color, 'transparent');
+    };
+    // Helper to parse size values (number or { value, unit } format)
+    const parseSizeValue = (size) => {
+        if (typeof size === 'number')
+            return size;
+        if (size && typeof size === 'object' && 'value' in size)
+            return size.value;
+        return undefined;
+    };
+    // Helper to extract gradient config from backgroundColor
+    const extractGradientConfig = (backgroundColor) => {
+        if (!backgroundColor || typeof backgroundColor !== 'object')
+            return null;
+        if (backgroundColor.type === 'gradient' && backgroundColor.gradient) {
+            const gradient = backgroundColor.gradient;
+            return {
+                type: gradient.type || 'linear',
+                angle: gradient.angle,
+                stops: (gradient.stops || []).map((stop) => {
+                    const rawPos = stop.position !== undefined ? stop.position : stop.offset;
+                    let posD = 0;
+                    if (typeof rawPos === 'number') {
+                        posD = rawPos;
+                    }
+                    else if (typeof rawPos === 'string') {
+                        const trimmed = rawPos.trim();
+                        if (trimmed.endsWith('%')) {
+                            const val = parseFloat(trimmed.slice(0, -1));
+                            posD = isNaN(val) ? 0 : val / 100;
+                        }
+                        else {
+                            const val = parseFloat(trimmed);
+                            posD = isNaN(val) ? 0 : val;
+                        }
+                    }
+                    const position = posD <= 1 ? posD : posD / 100;
+                    return {
+                        color: parseColorValue(stop.color),
+                        position,
+                    };
+                }),
+            };
+        }
+        return null;
+    };
+    /**
+     * Get text color from properties or theme
+     * Falls back to theme's text color if not specified
+     */
+    const getTextColor = () => {
+        var _a;
+        // Check component properties first
+        if (processedProperties.color) {
+            return resolveColor(processedProperties.color);
+        }
+        if (processedProperties.textColor) {
+            return resolveColor(processedProperties.textColor);
+        }
+        // Fall back to theme text color
+        if (theme === null || theme === void 0 ? void 0 : theme.textColor) {
+            return theme.textColor;
+        }
+        if ((_a = theme === null || theme === void 0 ? void 0 : theme.resolvedColors) === null || _a === void 0 ? void 0 : _a.foreground) {
+            return theme.resolvedColors.foreground;
+        }
+        // Default fallback
+        return '#1A1A2E';
+    };
+    // Render based on component type
+    switch (component.type) {
+        case 'text':
+            const textColor = getTextColor();
+            return (<react_native_1.Text style={[styles.text, style, { color: textColor }]}>
+          {resolveVariable(processedProperties.text || '')}
+        </react_native_1.Text>);
+        case 'image': {
+            const imgUrl = processedProperties.imageUrl
+                || processedProperties.src
+                || processedProperties.source
+                || '';
+            const imgObjectFit = processedProperties.objectFit || 'cover';
+            const imgAlt = processedProperties.altText || processedProperties.alt || '';
+            if (imgUrl) {
+                return (<react_native_1.Image source={{ uri: imgUrl }} 
+                // `style` is a shared ViewStyle whose `overflow: 'scroll'` is not valid
+                // for ImageStyle; cast to ImageStyle (RN ignores the extra value).
+                style={[styles.image, style]} resizeMode={imgObjectFit} accessibilityLabel={imgAlt}/>);
+            }
+            return (<react_native_1.View style={[styles.mediaPlaceholder, style]}>
+          <react_native_1.Text style={styles.placeholderIcon}>🖼</react_native_1.Text>
+          <react_native_1.Text style={styles.placeholderText}>No image</react_native_1.Text>
+        </react_native_1.View>);
+        }
+        case 'stack': {
+            // Enhanced stack rendering with containerLayout support
+            // Uses canonical 'direction' property
+            const containerLayout = component.containerLayout || {};
+            const direction = containerLayout.direction || 'vertical';
+            const gap = getGapValue(containerLayout.gap);
+            const isHorizontal = direction === 'horizontal';
+            // Layered mode (similar to CSS Grid stacking)
+            if (direction === 'layered') {
+                return (<react_native_1.View style={[style, { position: 'relative' }]}>
+            {(_a = component.children) === null || _a === void 0 ? void 0 : _a.map((child, index) => {
+                        var _a, _b;
+                        // Size-based inference: fill+fill = non-measuring background layer
+                        const childSize = child.size;
+                        const isBackground = ((_a = childSize === null || childSize === void 0 ? void 0 : childSize.width) === null || _a === void 0 ? void 0 : _a.type) === 'fill' && ((_b = childSize === null || childSize === void 0 ? void 0 : childSize.height) === null || _b === void 0 ? void 0 : _b.type) === 'fill';
+                        return (<react_native_1.View key={child.id} 
+                        // mapAlignment can yield 'space-between' which is valid for
+                        // justifyContent but not the narrower alignItems FlexAlignType;
+                        // cast to ViewStyle (RN ignores an out-of-range alignItems).
+                        style={{
+                                position: isBackground ? 'absolute' : 'relative',
+                                top: isBackground ? 0 : undefined,
+                                left: isBackground ? 0 : undefined,
+                                right: isBackground ? 0 : undefined,
+                                bottom: isBackground ? 0 : undefined,
+                                zIndex: isBackground ? 0 : index + 1,
+                                alignItems: mapAlignment(containerLayout.horizontalAlignment),
+                                justifyContent: mapAlignment(containerLayout.verticalAlignment),
+                            }}>
+                  <exports.ComponentRenderer key={child.id} component={child} configuration={configuration} theme={theme} onButtonPress={onButtonPress} stateManager={stateManager} isPreviewMode={isPreviewMode}/>
+                </react_native_1.View>);
+                    })}
+          </react_native_1.View>);
+            }
+            /**
+             * Direction-aware alignment mapping
+             * For horizontal direction (row):
+             *   - horizontalAlignment controls justifyContent (main axis)
+             *   - verticalAlignment controls alignItems (cross axis)
+             * For vertical direction (column):
+             *   - verticalAlignment controls justifyContent (main axis)
+             *   - horizontalAlignment controls alignItems (cross axis)
+             */
+            const justifyContent = isHorizontal
+                ? mapAlignment(containerLayout.horizontalAlignment)
+                : mapAlignment(containerLayout.verticalAlignment);
+            const alignItems = isHorizontal
+                ? mapAlignment(containerLayout.verticalAlignment)
+                : mapAlignment(containerLayout.horizontalAlignment);
+            return (<react_native_1.View style={[styles.stack, style, {
+                        flexDirection: isHorizontal ? 'row' : 'column',
+                        gap: gap,
+                        // justifyContent/alignItems come from mapAlignment whose 'stretch' value
+                        // is valid for alignItems but not justifyContent; cast (RN ignores it).
+                        justifyContent,
+                        alignItems,
+                    }]}>
+          {(_b = component.children) === null || _b === void 0 ? void 0 : _b.map((child) => (<exports.ComponentRenderer key={child.id} component={child} configuration={configuration} theme={theme} onButtonPress={onButtonPress} stateManager={stateManager} isPreviewMode={isPreviewMode}/>))}
+        </react_native_1.View>);
+        }
+        case 'divider':
+            // Use theme border color for divider
+            const dividerColor = resolveColor((_c = resolvedComponent.appearance) === null || _c === void 0 ? void 0 : _c.backgroundColor, (theme === null || theme === void 0 ? void 0 : theme.borderColor) || ((_d = theme === null || theme === void 0 ? void 0 : theme.resolvedColors) === null || _d === void 0 ? void 0 : _d.border) || '#E5E7EB');
+            return (<react_native_1.View style={[
+                    styles.divider,
+                    style,
+                    {
+                        backgroundColor: dividerColor,
+                        height: processedProperties.orientation === 'vertical' ? '100%' : 1,
+                        width: processedProperties.orientation === 'vertical' ? 1 : '100%',
+                    },
+                ]}/>);
+        case 'spacer':
+            return (<react_native_1.View style={[
+                    style,
+                    {
+                        width: processedProperties.size || 16,
+                        height: processedProperties.size || 16,
+                    },
+                ]}/>);
+        // Interactive components (keep dedicated handlers)
+        case 'checkbox':
+            return (<CheckboxComponent_1.CheckboxComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'toggle':
+            return (<ToggleComponent_1.ToggleComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'segmented-picker':
+            return (<SegmentedPickerComponent_1.SegmentedPickerComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'price':
+            const priceColor = getTextColor();
+            return (<react_native_1.View style={[styles.priceContainer, style]}>
+          <react_native_1.Text style={[styles.priceText, { color: priceColor }]}>
+            {processedProperties.currency || '$'}
+            {processedProperties.amount || '0.00'}
+          </react_native_1.Text>
+          {processedProperties.period && (<react_native_1.Text style={[styles.pricePeriod, { color: applyOpacity(priceColor, 0.6) }]}>
+              /{processedProperties.period}
+            </react_native_1.Text>)}
+        </react_native_1.View>);
+        case 'countdown':
+            return (<CountdownComponent_1.CountdownComponent component={resolvedComponent} configuration={configuration} style={style}/>);
+        case 'carousel':
+            return (<CarouselComponent_1.CarouselComponent component={resolvedComponent} configuration={configuration} style={style} onButtonPress={onButtonPress} stateManager={stateManager}/>);
+        case 'accordion':
+            return (<AccordionComponent_1.AccordionComponent component={resolvedComponent} renderChild={renderChild} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'slider':
+            return (<SliderComponent_1.SliderComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'tabs':
+            return (<TabsComponent_1.TabsComponent component={resolvedComponent} children={component.children || []} renderChild={renderChild} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'navigation':
+            return (<NavigationComponent_1.NavigationComponent component={resolvedComponent} children={component.children || []} renderChild={renderChild} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'confetti':
+            return (<ConfettiComponent_1.ConfettiComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'delayed-x':
+            return (<DelayedXComponent_1.DelayedXComponent component={resolvedComponent} configuration={configuration} renderChild={renderChild} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'haptic-feedback':
+            return (<HapticFeedbackComponent_1.HapticFeedbackComponent component={resolvedComponent} isPreviewMode={isPreviewMode}/>);
+        case 'button': {
+            // Theme-aware button rendering
+            const buttonBgColor = resolveColor((_e = resolvedComponent.appearance) === null || _e === void 0 ? void 0 : _e.backgroundColor, (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || ((_f = theme === null || theme === void 0 ? void 0 : theme.resolvedColors) === null || _f === void 0 ? void 0 : _f.primary) || '#007AFF');
+            const buttonTextColor = processedProperties.textColor
+                ? resolveColor(processedProperties.textColor)
+                : '#FFFFFF';
+            return (<react_native_1.TouchableOpacity style={[styles.button, style, { backgroundColor: buttonBgColor }]} onPress={() => onButtonPress === null || onButtonPress === void 0 ? void 0 : onButtonPress(component.id, processedProperties.action || 'tap')}>
+          <react_native_1.Text style={[styles.buttonText, { color: buttonTextColor }]}>
+            {resolveVariable(processedProperties.text || processedProperties.label || 'Button')}
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>);
+        }
+        case 'badge': {
+            const badgeBgColor = resolveColor((_g = resolvedComponent.appearance) === null || _g === void 0 ? void 0 : _g.backgroundColor, (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || '#FF3B30');
+            const badgeTextColor = processedProperties.textColor
+                ? resolveColor(processedProperties.textColor)
+                : '#FFFFFF';
+            return (<react_native_1.View style={[styles.badge, style, { backgroundColor: badgeBgColor }]}>
+          <react_native_1.Text style={[styles.badgeText, { color: badgeTextColor }]}>
+            {resolveVariable(processedProperties.text || '')}
+          </react_native_1.Text>
+        </react_native_1.View>);
+        }
+        case 'feature-list': {
+            const features = processedProperties.features || [];
+            const checkColor = (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || ((_h = theme === null || theme === void 0 ? void 0 : theme.resolvedColors) === null || _h === void 0 ? void 0 : _h.primary) || '#34C759';
+            const textColor = getTextColor();
+            return (<react_native_1.View style={[styles.featureList, style]}>
+          {features.map((feature, index) => (<react_native_1.View key={index} style={styles.featureItem}>
+              <react_native_1.Text style={[styles.featureIcon, { color: checkColor }]}>✓</react_native_1.Text>
+              <react_native_1.Text style={[styles.featureText, { color: textColor }]}>
+                {resolveVariable(feature)}
+              </react_native_1.Text>
+            </react_native_1.View>))}
+        </react_native_1.View>);
+        }
+        case 'shape': {
+            // Render shape primitives (rectangles, circles, etc.)
+            const shapeType = processedProperties.shapeType || 'rectangle';
+            const cornerRadius = ((_j = resolvedComponent.appearance) === null || _j === void 0 ? void 0 : _j.cornerRadius) || 0;
+            const backgroundColor = (_k = resolvedComponent.appearance) === null || _k === void 0 ? void 0 : _k.backgroundColor;
+            const borderWidth = ((_l = resolvedComponent.appearance) === null || _l === void 0 ? void 0 : _l.borderWidth) || 0;
+            const borderColor = (_m = resolvedComponent.appearance) === null || _m === void 0 ? void 0 : _m.borderColor;
+            // backgroundColor may be a plain color string or a structured object;
+            // only the object branch carries an opacity field.
+            const opacity = (_o = (typeof backgroundColor === 'object' ? backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.opacity : undefined)) !== null && _o !== void 0 ? _o : 1;
+            // Check for gradient background
+            const gradientConfig = extractGradientConfig(backgroundColor);
+            const effectiveBorderRadius = shapeType === 'circle' ? 9999 : cornerRadius;
+            // If gradient is detected and supported, use GradientView
+            if (gradientConfig && (0, GradientView_1.isGradientSupported)()) {
+                return (<GradientView_1.GradientView gradient={gradientConfig} fallbackColor={parseColorValue(backgroundColor)} style={[style, { opacity }]} borderRadius={effectiveBorderRadius} borderWidth={borderWidth} borderColor={parseColorValue(borderColor)}/>);
+            }
+            // Fallback to solid color (uses first stop color for gradients)
+            const bgColor = parseColorValue(backgroundColor);
+            return (<react_native_1.View style={[
+                    style,
+                    {
+                        backgroundColor: bgColor,
+                        borderRadius: effectiveBorderRadius,
+                        borderWidth,
+                        borderColor: parseColorValue(borderColor),
+                        opacity,
+                    }
+                ]}/>);
+        }
+        case 'icon': {
+            // Render icon primitives using Lucide icons (same as web editor)
+            const rawIcon = processedProperties.iconName;
+            let iconName = 'Circle';
+            const { Platform } = require('react-native');
+            if (rawIcon && typeof rawIcon === 'object' && 'iconName' in rawIcon) {
+                if (Platform.OS === 'ios' && rawIcon.iconNameIos) {
+                    iconName = rawIcon.iconNameIos;
+                }
+                else if (Platform.OS === 'android' && rawIcon.iconNameAndroid) {
+                    iconName = rawIcon.iconNameAndroid;
+                }
+                else {
+                    iconName = rawIcon.iconName || 'Circle';
+                }
+            }
+            else if (typeof rawIcon === 'string') {
+                if (Platform.OS === 'ios' && processedProperties.iconNameIos) {
+                    iconName = processedProperties.iconNameIos;
+                }
+                else if (Platform.OS === 'android' && processedProperties.iconNameAndroid) {
+                    iconName = processedProperties.iconNameAndroid;
+                }
+                else {
+                    iconName = rawIcon;
+                }
+            }
+            else {
+                iconName = processedProperties.name || 'Circle';
+            }
+            const iconSize = parseSizeValue(processedProperties.iconSize) || parseSizeValue(processedProperties.size) || 24;
+            const iconColor = resolveColor(processedProperties.iconColor || processedProperties.color, getTextColor());
+            const strokeWidth = typeof processedProperties.strokeWidth === 'number'
+                ? processedProperties.strokeWidth
+                : 2;
+            // Use getLucideIcon for SVG icon parity with web editor
+            const { getLucideIcon } = require('./utils/iconMapper');
+            const { component: IconComp, fallback } = getLucideIcon(iconName);
+            if (IconComp) {
+                return (<react_native_1.View style={[style, { alignItems: 'center', justifyContent: 'center' }]}>
+            <IconComp size={iconSize} color={iconColor} strokeWidth={strokeWidth}/>
+          </react_native_1.View>);
+            }
+            // Emoji fallback for unmapped icons
+            const fallbackEmoji = {
+                'check': '✓', 'x': '✕', 'plus': '+', 'minus': '−',
+                'star': '☆', 'heart': '♡', 'circle': '○',
+            };
+            const emojiChar = fallbackEmoji[iconName.toLowerCase()] || '○';
+            return (<react_native_1.View style={[style, { width: iconSize, height: iconSize, alignItems: 'center', justifyContent: 'center' }]}>
+          <react_native_1.Text style={{ fontSize: iconSize * 0.8, color: iconColor, lineHeight: iconSize }}>
+            {emojiChar}
+          </react_native_1.Text>
+        </react_native_1.View>);
+        }
+        case 'webp':
+        case 'gif': {
+            // Render animated/static images — same property chain as 'image'
+            const mediaUrl = processedProperties.imageUrl
+                || processedProperties.src
+                || processedProperties.source
+                || '';
+            const mediaObjectFit = processedProperties.objectFit || 'cover';
+            const mediaAlt = processedProperties.altText || processedProperties.alt || '';
+            return mediaUrl ? (<react_native_1.Image source={{ uri: mediaUrl }} 
+            // See note above: cast shared ViewStyle to ImageStyle for Image.
+            style={[styles.image, style]} resizeMode={mediaObjectFit} accessibilityLabel={mediaAlt}/>) : (<react_native_1.View style={[styles.mediaPlaceholder, style]}>
+          <react_native_1.Text style={styles.placeholderIcon}>🖼</react_native_1.Text>
+          <react_native_1.Text style={styles.placeholderText}>{component.type.toUpperCase()}</react_native_1.Text>
+        </react_native_1.View>);
+        }
+        case 'video': {
+            // Video placeholder - in production, use expo-av or react-native-video
+            return (<react_native_1.View style={[styles.mediaPlaceholder, style]}>
+          <react_native_1.Text style={styles.placeholderIcon}>🎬</react_native_1.Text>
+          <react_native_1.Text style={styles.placeholderText}>Video</react_native_1.Text>
+          {processedProperties.source && (<react_native_1.Text style={styles.placeholderHint}>Source: {processedProperties.source}</react_native_1.Text>)}
+        </react_native_1.View>);
+        }
+        case 'lottie': {
+            // Lottie animation placeholder - in production, use lottie-react-native
+            return (<react_native_1.View style={[styles.mediaPlaceholder, style]}>
+          <react_native_1.Text style={styles.placeholderIcon}>✨</react_native_1.Text>
+          <react_native_1.Text style={styles.placeholderText}>Lottie Animation</react_native_1.Text>
+          {processedProperties.source && (<react_native_1.Text style={styles.placeholderHint}>Source: {processedProperties.source}</react_native_1.Text>)}
+        </react_native_1.View>);
+        }
+        case 'progress-loader':
+            return (<ProgressLoaderComponent_1.ProgressLoaderComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'chart-curve':
+            return (<ChartCurveComponent_1.ChartCurveComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'single-choice-grid':
+            return (<SingleChoiceGridComponent_1.SingleChoiceGridComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'multi-choice-grid':
+            return (<MultiChoiceGridComponent_1.MultiChoiceGridComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'drawer-modal':
+            return (<DrawerModalComponent_1.DrawerModalComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode} renderComponent={renderChild}/>);
+        case 'timeline':
+            return (<TimelineComponent_1.TimelineComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode} renderComponent={renderChild}/>);
+        case 'text-input':
+            return (<TextInputComponent_1.TextInputComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'star-rating-input':
+            return (<StarRatingInputComponent_1.StarRatingInputComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'nps-scale':
+            return (<NPSScaleComponent_1.NPSScaleComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'oauth-button':
+            return (<OAuthButtonComponent_1.OAuthButtonComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'progress-stepper':
+            return (<ProgressStepperComponent_1.ProgressStepperComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'share-code':
+            return (<ShareCodeComponent_1.ShareCodeComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'share-buttons':
+            return (<ShareButtonsComponent_1.ShareButtonsComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode} renderChild={(child, index) => (<exports.ComponentRenderer key={child.id} component={child} configuration={configuration} theme={theme} onButtonPress={onButtonPress} stateManager={stateManager} isPreviewMode={isPreviewMode}/>)}/>);
+        case 'vertical-products':
+            return (<VerticalProductsComponent_1.VerticalProductsComponent component={resolvedComponent} configuration={configuration} renderChild={(child) => (<exports.ComponentRenderer key={child.id} component={child} configuration={configuration} theme={theme} onButtonPress={onButtonPress} stateManager={stateManager} isPreviewMode={isPreviewMode}/>)} stateManager={stateManager} onAction={onButtonPress}/>);
+        case 'horizontal-products':
+            return (<HorizontalProductsComponent_1.HorizontalProductsComponent component={resolvedComponent} configuration={configuration} renderChild={(child) => (<exports.ComponentRenderer key={child.id} component={child} configuration={configuration} theme={theme} onButtonPress={onButtonPress} stateManager={stateManager} isPreviewMode={isPreviewMode}/>)} stateManager={stateManager} onAction={onButtonPress}/>);
+        case 'accolade-cps':
+            return (<AccoladeCpsComponent_1.AccoladeCpsComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        case 'sticker-composite':
+            return (<StickerCompositeComponent_1.StickerCompositeComponent component={resolvedComponent} stateManager={stateManager} isPreviewMode={isPreviewMode}/>);
+        default:
+            // Fallback for unknown component types - render children if available (composite handling)
+            if ((_p = component.children) === null || _p === void 0 ? void 0 : _p.length) {
+                return renderWithChildren(component);
+            }
+            return <react_native_1.View style={[styles.fallback, style]}/>;
+    }
+};
+exports.ComponentRenderer = ComponentRenderer;
+/**
+ * StyleSheet with minimal defaults
+ * Colors should come from theme, not hardcoded here
+ */
+const styles = react_native_1.StyleSheet.create({
+    text: {
+        fontSize: 16,
+        // Color set dynamically from theme
+    },
+    image: {
+        width: 100,
+        height: 100,
+    },
+    button: {
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    stack: {
+        flexDirection: 'column',
+    },
+    divider: {
+    // backgroundColor set dynamically from theme
+    },
+    badge: {
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+    },
+    badgeText: {
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    featureList: {
+        gap: 8,
+    },
+    featureItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    featureIcon: {
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    featureText: {
+        fontSize: 14,
+    },
+    priceContainer: {
+        flexDirection: 'row',
+        alignItems: 'baseline',
+    },
+    priceText: {
+        fontSize: 32,
+        fontWeight: 'bold',
+    },
+    pricePeriod: {
+        fontSize: 16,
+        marginLeft: 4,
+    },
+    package: {
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: 2,
+    },
+    packageTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    packageSubtitle: {
+        fontSize: 14,
+        marginTop: 4,
+    },
+    fallback: {
+        padding: 8,
+    },
+    advancedWarning: {
+        backgroundColor: '#FFF3CD',
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: '#FFE69C',
+        alignItems: 'center',
+    },
+    warningIcon: {
+        fontSize: 32,
+        marginBottom: 8,
+    },
+    warningTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#000000',
+        marginBottom: 4,
+    },
+    warningText: {
+        fontSize: 13,
+        color: '#856404',
+        textAlign: 'center',
+        marginBottom: 4,
+    },
+    warningHint: {
+        fontSize: 11,
+        color: '#0056B3',
+        textAlign: 'center',
+    },
+    mediaPlaceholder: {
+        backgroundColor: '#F0F0F0',
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 60,
+    },
+    placeholderIcon: {
+        fontSize: 24,
+        marginBottom: 4,
+    },
+    placeholderText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#666666',
+    },
+    placeholderHint: {
+        fontSize: 10,
+        color: '#999999',
+        marginTop: 4,
+    },
+});