@teamvortexsoftware/vortex-react-native 0.0.13 → 1.0.1

package/dist/components/InviteFormCore.js

@@ -0,0 +1,2141 @@
+"use strict";
+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;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InviteFormCore = InviteFormCore;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useInvitationFormLogic_1 = require("../hooks/useInvitationFormLogic");
+const contactUtils_1 = require("../utils/contactUtils");
+const VrtxShareOptions_1 = require("./VrtxShareOptions");
+const VrtxContactsImport_1 = require("./VrtxContactsImport");
+const VrtxEmailInvitations_1 = require("./VrtxEmailInvitations");
+const VrtxFindFriends_1 = require("./VrtxFindFriends");
+const VrtxIncomingInvitations_1 = require("./VrtxIncomingInvitations");
+const VrtxOutgoingInvitations_1 = require("./VrtxOutgoingInvitations");
+const VrtxInvitationSuggestions_1 = require("./VrtxInvitationSuggestions");
+const VrtxInviteContacts_1 = require("./VrtxInviteContacts");
+const VrtxHeading_1 = require("./VrtxHeading");
+const VrtxText_1 = require("./VrtxText");
+const VrtxSelect_1 = require("./VrtxSelect");
+const VrtxSubmit_1 = require("./VrtxSubmit");
+const VrtxSearchBox_1 = require("./VrtxSearchBox");
+const PlacedItemToolbar_1 = require("./PlacedItemToolbar");
+const isWeb = react_native_1.Platform.OS === 'web';
+// Parse CSS linear-gradient to extract first color for fallback
+function parseGradientFirstColor(gradientString) {
+    if (!gradientString || !gradientString.includes('linear-gradient')) {
+        return null;
+    }
+    const stopsRegex = /(rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|[a-z]+)\s+(\d+)%/i;
+    const match = stopsRegex.exec(gradientString);
+    if (match) {
+        return match[1].trim();
+    }
+    return null;
+}
+const ButtonWrapper = ({ children, style, gradientString, onPress, disabled, wrapperStyle, }) => {
+    const styleArray = Array.isArray(style) ? style : [style];
+    // On web, use CSS gradients directly
+    if (gradientString && isWeb) {
+        return (<react_native_1.TouchableOpacity style={[wrapperStyle, ...styleArray, { background: gradientString }]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+        {children}
+      </react_native_1.TouchableOpacity>);
+    }
+    // On native, use first color from gradient as solid background
+    const fallbackColor = gradientString ? parseGradientFirstColor(gradientString) : null;
+    const finalStyle = fallbackColor
+        ? [wrapperStyle, ...styleArray, { backgroundColor: fallbackColor }]
+        : [wrapperStyle, ...styleArray];
+    return (<react_native_1.TouchableOpacity style={finalStyle} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      {children}
+    </react_native_1.TouchableOpacity>);
+};
+function InviteFormCore({ renderIcon, renderQRCode, platformOperations, fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', containerStyle = {}, widgetConfiguration, isEditMode = false, isDragging = false, onComponentSelect, onDrop, onSetDropTarget, onClearDropTarget, onComponentDelete, getShareableInviteLink, 
+// Analytics callbacks (optional - no-op for preview mode)
+onShareLinkClick, onEmailFieldFocus, onEmailFieldBlur, onEmailValidation, onEmailInvitationsSubmitted, onEmailValidationError, onEmailSubmitError, 
+// Find Friends configuration
+findFriendsConfig, createUserIdInvitation, 
+// Incoming/Outgoing Invitations configuration
+incomingInvitationsConfig, outgoingInvitationsConfig, 
+// Invitation Suggestions configuration
+invitationSuggestionsConfig, 
+// Invite Contacts configuration
+inviteContactsConfig, 
+// Search Box configuration
+searchBoxConfig, 
+// API configuration
+apiUrl, jwt, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // Get the form structure from widget configuration
+    const getFormStructure = () => {
+        var _a, _b, _c;
+        try {
+            const formData = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.form']) === null || _c === void 0 ? void 0 : _c.value;
+            if (formData && typeof formData === 'object' && formData.root) {
+                return formData.root;
+            }
+        }
+        catch (err) {
+            console.error('[InviteFormCore] Failed to parse form structure:', err);
+        }
+        return null;
+    };
+    const formStructure = getFormStructure();
+    if (!formStructure) {
+        console.error('[InviteFormCore] No form structure found in widget configuration. ' +
+            'The widget may not have a form configured, or the configuration format is unexpected. ' +
+            'Expected path: configuration.props["vortex.components.form"].value.root');
+    }
+    // Extract form title from widget configuration (mobile-specific key takes priority)
+    const resolvedTitle = ((_c = (_b = (_a = formStructure === null || formStructure === void 0 ? void 0 : formStructure.settings) === null || _a === void 0 ? void 0 : _a.customizations) === null || _b === void 0 ? void 0 : _b['mobile.formTitle']) === null || _c === void 0 ? void 0 : _c.textContent) ||
+        ((_f = (_e = (_d = formStructure === null || formStructure === void 0 ? void 0 : formStructure.settings) === null || _d === void 0 ? void 0 : _d.customizations) === null || _e === void 0 ? void 0 : _e.formTitle) === null || _f === void 0 ? void 0 : _f.textContent) ||
+        null;
+    // Extract title theme styles from root theme options
+    const resolvedTitleStyle = (() => {
+        var _a;
+        const themeOptions = (_a = formStructure === null || formStructure === void 0 ? void 0 : formStructure.theme) === null || _a === void 0 ? void 0 : _a.options;
+        if (!Array.isArray(themeOptions))
+            return undefined;
+        const getVal = (key) => { var _a; return ((_a = themeOptions.find((o) => o.key === key)) === null || _a === void 0 ? void 0 : _a.value) || undefined; };
+        const color = getVal('--vrtx-form-title-color');
+        const fontSize = getVal('--vrtx-form-title-font-size');
+        const fontWeight = getVal('--vrtx-form-title-font-weight');
+        const fontFamily = getVal('--vrtx-form-title-font-family');
+        if (!color && !fontSize && !fontWeight && !fontFamily)
+            return undefined;
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, (color && { color })), (fontSize && { fontSize: parseFloat(fontSize) || undefined })), (fontWeight && { fontWeight })), (fontFamily && { fontFamily }));
+    })();
+    // Helper function to find email invitations block in form structure
+    const findEmailInvitationsBlock = () => {
+        if (!formStructure)
+            return null;
+        const searchChildren = (children) => {
+            if (!Array.isArray(children))
+                return null;
+            for (const child of children) {
+                if (child.type === 'block' &&
+                    child.subtype === 'vrtx-email-invitations' &&
+                    child.hidden !== true) {
+                    return child;
+                }
+                if (child.children) {
+                    const found = searchChildren(child.children);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        if (formStructure.children) {
+            return searchChildren(formStructure.children);
+        }
+        return null;
+    };
+    const emailInvitationsBlock = findEmailInvitationsBlock();
+    // Helper function to find submit button block in form structure
+    const findSubmitButtonBlock = () => {
+        if (!formStructure)
+            return null;
+        const searchChildren = (children) => {
+            if (!Array.isArray(children))
+                return null;
+            for (const child of children) {
+                if (child.type === 'block' && child.subtype === 'vrtx-submit') {
+                    return child;
+                }
+                if (child.children) {
+                    const found = searchChildren(child.children);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        if (formStructure.children) {
+            return searchChildren(formStructure.children);
+        }
+        return null;
+    };
+    const submitButtonBlock = findSubmitButtonBlock();
+    // Helper function to find contacts-import block in form structure
+    const findContactsImportBlock = () => {
+        if (!formStructure)
+            return null;
+        const searchChildren = (children) => {
+            if (!Array.isArray(children))
+                return null;
+            for (const child of children) {
+                if (child.type === 'block' && child.subtype === 'vrtx-contacts-import') {
+                    return child;
+                }
+                if (child.children) {
+                    const found = searchChildren(child.children);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        if (formStructure.children) {
+            return searchChildren(formStructure.children);
+        }
+        return null;
+    };
+    const contactsImportBlock = findContactsImportBlock();
+    // Helper to get customization text from contacts-import block
+    const getContactsCustomization = (key, defaultValue) => {
+        var _a, _b, _c;
+        const textContent = (_c = (_b = (_a = contactsImportBlock === null || contactsImportBlock === void 0 ? void 0 : contactsImportBlock.settings) === null || _a === void 0 ? void 0 : _a.customizations) === null || _b === void 0 ? void 0 : _b[key]) === null || _c === void 0 ? void 0 : _c.textContent;
+        if (textContent === null || textContent === undefined) {
+            return defaultValue;
+        }
+        return textContent;
+    };
+    // Extract styles from email invitations block for "Add by Email" button
+    const emailInvitationsStyle = (emailInvitationsBlock === null || emailInvitationsBlock === void 0 ? void 0 : emailInvitationsBlock.style) || {};
+    // Extract gradient string and fallback color
+    // On native, 'background' is a CSS property that doesn't work — convert solid colors to 'backgroundColor'
+    const rawEmailBackground = emailInvitationsStyle.background || null;
+    const isEmailGradient = rawEmailBackground === null || rawEmailBackground === void 0 ? void 0 : rawEmailBackground.includes('gradient');
+    const emailInvitationsGradientString = isEmailGradient ? rawEmailBackground : null;
+    const emailInvitationsFallbackColor = isEmailGradient
+        ? parseGradientFirstColor(rawEmailBackground)
+        : rawEmailBackground || emailInvitationsStyle.backgroundColor;
+    const emailInvitationsTextColor = emailInvitationsStyle.color || '#333';
+    // Helper function to check if native Contacts import is enabled
+    const isNativeContactsEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const components = widgetConfiguration.configuration.props['vortex.components'].value;
+        return (Array.isArray(components) &&
+            components.includes('vortex.components.importcontacts.providers.importcontacts'));
+    };
+    // Helper function to check if Google Contacts import is enabled
+    const isGoogleContactsEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const components = widgetConfiguration.configuration.props['vortex.components'].value;
+        return (Array.isArray(components) &&
+            components.includes('vortex.components.importcontacts.providers.google'));
+    };
+    // Helper function to check if Copy Link is enabled
+    const isCopyLinkEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('copyLink');
+    };
+    // Helper function to check if Share (native share sheet) is enabled
+    const isShareEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('nativeShareSheet');
+    };
+    // Helper function to check if Email Invitations is enabled
+    // Check if the form structure contains a vrtx-email-invitations block
+    const isEmailInvitationsEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const components = widgetConfiguration.configuration.props['vortex.components'].value;
+        return Array.isArray(components) && components.includes('vortex.components.emailinvitations');
+    };
+    // Helper function to check if Email share is enabled
+    const isEmailShareEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('email');
+    };
+    // Helper function to check if SMS is enabled
+    const isSmsEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('sms');
+    };
+    // Helper function to check if X/Twitter DMs is enabled
+    const isTwitterDmsEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('twitterDms');
+    };
+    // Helper function to check if Instagram DMs is enabled
+    const isInstagramDmsEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('instagramDms');
+    };
+    // Helper function to check if WhatsApp is enabled
+    const isWhatsAppEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('whatsApp');
+    };
+    // Helper function to check if Line is enabled
+    const isLineEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('line');
+    };
+    // Helper function to check if Line LIFF is enabled
+    const isLineLiffEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('lineLiff');
+    };
+    // Helper function to check if QR Code is enabled
+    const isQrCodeEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('qrCode');
+    };
+    // Helper function to check if Facebook Messenger is enabled
+    const isFacebookMessengerEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('facebookMessenger');
+    };
+    // Helper function to check if Telegram is enabled
+    const isTelegramEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('telegram');
+    };
+    // Helper function to check if Discord is enabled
+    const isDiscordEnabled = () => {
+        var _a, _b, _c;
+        if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)) {
+            return false;
+        }
+        const shareOptions = widgetConfiguration.configuration.props['vortex.components.share.options'].value;
+        return Array.isArray(shareOptions) && shareOptions.includes('discord');
+    };
+    // Helper function to get share options order from configuration
+    const getShareOptionsOrder = () => {
+        var _a, _b, _c;
+        const shareOptions = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value;
+        return Array.isArray(shareOptions) ? shareOptions : [];
+    };
+    // State for fetched contacts
+    const [contacts, setContacts] = (0, react_1.useState)([]);
+    const [loadingContacts, setLoadingContacts] = (0, react_1.useState)(false);
+    const [contactsFetchAttempted, setContactsFetchAttempted] = (0, react_1.useState)(false);
+    const [contactsError, setContactsError] = (0, react_1.useState)(null);
+    // State for fetched Google contacts
+    const [googleContacts, setGoogleContacts] = (0, react_1.useState)([]);
+    const [loadingGoogleContacts, setLoadingGoogleContacts] = (0, react_1.useState)(false);
+    const [googleContactsFetchAttempted, setGoogleContactsFetchAttempted] = (0, react_1.useState)(false);
+    const [googleContactsError, setGoogleContactsError] = (0, react_1.useState)(null);
+    // State for hover tracking in edit mode
+    const [hoveredComponentId, setHoveredComponentId] = (0, react_1.useState)(null);
+    const [selectedComponentId, setSelectedComponentId] = (0, react_1.useState)(null);
+    const logic = (0, useInvitationFormLogic_1.useInvitationFormLogic)(platformOperations, contacts, googleContacts, getShareableInviteLink);
+    // Destructure for easier access
+    const { view, emailInput, emails, copySuccess, shareSuccess, sendSuccess, searchQuery, invitedContactIds, invitedGoogleContactIds, googleSearchQuery, setEmailInput, setSearchQuery, setGoogleSearchQuery, loadingContactIds, loadingGoogleContactIds, loadingEmailInvite, loadingCopy, loadingShare, loadingInvitationLink, lastInvalidEmail, handleClose, handleSendInvitation, handleCopyLink, handleShare, handleEmailSubmit, handleRemoveEmail, handleSelectFromGoogle, handleSelectFromContacts, handleAddByEmail, handleShowQrCode, handleBackToMain, handleInviteContact, handleInviteGoogleContact, } = logic;
+    // Fetch contacts on-demand when the contacts view is opened
+    (0, react_1.useEffect)(() => {
+        // Reset fetch attempt when view changes away from contacts
+        if (view !== 'contacts' && contactsFetchAttempted) {
+            setContactsFetchAttempted(false);
+            setContactsError(null);
+        }
+        if (view === 'contacts' && !contactsFetchAttempted && !loadingContacts) {
+            setLoadingContacts(true);
+            setContactsFetchAttempted(true);
+            setContactsError(null); // Clear previous errors
+            platformOperations
+                .fetchContacts()
+                .then((fetchedContacts) => {
+                setContacts(fetchedContacts);
+                setContactsError(null);
+            })
+                .catch((err) => {
+                console.error('[Vortex] Failed to fetch contacts:', err);
+                setContactsError(err instanceof Error ? err : new Error(String(err)));
+                setContacts([]); // Clear contacts on error
+            })
+                .finally(() => setLoadingContacts(false));
+        }
+    }, [view, contactsFetchAttempted, loadingContacts]);
+    // Fetch Google contacts on-demand when the googleContacts view is opened
+    (0, react_1.useEffect)(() => {
+        // Reset fetch attempt when view changes away from googleContacts
+        if (view !== 'googleContacts' && googleContactsFetchAttempted) {
+            setGoogleContactsFetchAttempted(false);
+            setGoogleContactsError(null);
+        }
+        if (view === 'googleContacts' && !googleContactsFetchAttempted && !loadingGoogleContacts) {
+            setLoadingGoogleContacts(true);
+            setGoogleContactsFetchAttempted(true);
+            setGoogleContactsError(null); // Clear previous errors
+            platformOperations
+                .fetchGoogleContacts()
+                .then((fetchedContacts) => {
+                setGoogleContacts(fetchedContacts);
+                setGoogleContactsError(null);
+            })
+                .catch((err) => {
+                console.error('[Vortex] Failed to fetch Google contacts:', err);
+                setGoogleContactsError(err instanceof Error ? err : new Error(String(err)));
+                setGoogleContacts([]); // Clear contacts on error
+            })
+                .finally(() => setLoadingGoogleContacts(false));
+        }
+    }, [view, googleContactsFetchAttempted, loadingGoogleContacts]);
+    // Filter contacts using shared utility
+    const filteredContacts = (0, contactUtils_1.filterContacts)(contacts, searchQuery);
+    const filteredGoogleContacts = (0, contactUtils_1.filterContacts)(googleContacts, googleSearchQuery);
+    // Wrapper functions with haptic feedback and analytics tracking
+    const handleCopyLinkWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('copyLink');
+        yield handleCopyLink();
+    });
+    const handleShareWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaNativeShare');
+        yield handleShare();
+    });
+    const handleSelectFromContactsWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        handleSelectFromContacts();
+    });
+    const handleSelectFromGoogleWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        handleSelectFromGoogle();
+    });
+    const handleAddByEmailWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        handleAddByEmail();
+    });
+    const handleInviteContactWithHaptics = (contactId) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        yield handleInviteContact(contactId);
+    });
+    const handleInviteGoogleContactWithHaptics = (contactId) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        yield handleInviteGoogleContact(contactId);
+    });
+    const handleSendInvitationWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        yield handleSendInvitation();
+    });
+    const handleRetryContacts = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        // Clear the error and reset fetch attempt to trigger a new fetch
+        setContactsError(null);
+        setContactsFetchAttempted(false);
+    });
+    const handleOpenSettings = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        try {
+            yield react_native_1.Linking.openSettings();
+        }
+        catch (err) {
+            console.warn('[Vortex] Failed to open settings:', err);
+        }
+    });
+    const handleEmailShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaEmail');
+        yield ((_b = platformOperations.shareViaEmail) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleSmsShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaSMS');
+        yield ((_b = platformOperations.shareViaSms) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleTwitterShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaTwitter');
+        yield ((_b = platformOperations.shareViaTwitter) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleInstagramShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaInstagram');
+        yield ((_b = platformOperations.shareViaInstagram) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleWhatsAppShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaWhatsApp');
+        yield ((_b = platformOperations.shareViaWhatsApp) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleLineShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaLine');
+        yield ((_b = platformOperations.shareViaLine) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleLineLiffShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaLineLiff');
+        yield ((_b = platformOperations.shareViaLineLiff) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleFacebookMessengerShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaFacebookMessenger');
+        yield ((_b = platformOperations.shareViaFacebookMessenger) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleTelegramShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaTelegram');
+        yield ((_b = platformOperations.shareViaTelegram) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleDiscordShare = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaDiscord');
+        yield ((_b = platformOperations.shareViaDiscord) === null || _b === void 0 ? void 0 : _b.call(platformOperations));
+    });
+    const handleQrCode = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = platformOperations.triggerHaptic) === null || _a === void 0 ? void 0 : _a.call(platformOperations, 'light'));
+        onShareLinkClick === null || onShareLinkClick === void 0 ? void 0 : onShareLinkClick('shareViaQrCode');
+        handleShowQrCode();
+    });
+    // Block renderer functions - render individual components based on block type
+    const renderShareOptionsBlock = (block) => {
+        return (<VrtxShareOptions_1.VrtxShareOptions block={block} renderIcon={renderIcon} isCopyLinkEnabled={isCopyLinkEnabled} isShareEnabled={isShareEnabled} isEmailShareEnabled={isEmailShareEnabled} isSmsEnabled={isSmsEnabled} isTwitterDmsEnabled={isTwitterDmsEnabled} isInstagramDmsEnabled={isInstagramDmsEnabled} isWhatsAppEnabled={isWhatsAppEnabled} isLineEnabled={isLineEnabled} isLineLiffEnabled={isLineLiffEnabled} isQrCodeEnabled={isQrCodeEnabled} isFacebookMessengerEnabled={isFacebookMessengerEnabled} isTelegramEnabled={isTelegramEnabled} isDiscordEnabled={isDiscordEnabled} handleCopyLink={handleCopyLink} handleShare={handleShare} handleEmailShare={handleEmailShare} handleSmsShare={handleSmsShare} handleTwitterShare={handleTwitterShare} handleInstagramShare={handleInstagramShare} handleWhatsAppShare={handleWhatsAppShare} handleLineShare={handleLineShare} handleLineLiffShare={handleLineLiffShare} handleQrCode={handleQrCode} handleFacebookMessengerShare={handleFacebookMessengerShare} handleTelegramShare={handleTelegramShare} handleDiscordShare={handleDiscordShare} triggerHaptic={platformOperations.triggerHaptic} loadingCopy={loadingCopy} loadingShare={loadingShare} copySuccess={copySuccess} shareSuccess={shareSuccess} isEditMode={isEditMode} shareOptionsOrder={getShareOptionsOrder()}/>);
+    };
+    const renderContactsImportBlock = (block) => {
+        return (<VrtxContactsImport_1.VrtxContactsImport block={block} renderIcon={renderIcon} isNativeContactsEnabled={isNativeContactsEnabled} isGoogleContactsEnabled={isGoogleContactsEnabled} handleSelectFromContacts={handleSelectFromContacts} handleSelectFromGoogle={handleSelectFromGoogle} triggerHaptic={platformOperations.triggerHaptic} isEditMode={isEditMode}/>);
+    };
+    const renderEmailInvitationsBlock = (block) => {
+        // Don't pass submitButtonBlock - we'll render it separately
+        return (<VrtxEmailInvitations_1.VrtxEmailInvitations block={block} view={view} emails={emails} emailInput={emailInput} setEmailInput={setEmailInput} handleEmailSubmit={handleEmailSubmit} handleRemoveEmail={handleRemoveEmail} submitButtonBlock={undefined} handleSendInvitation={handleSendInvitation} triggerHaptic={platformOperations.triggerHaptic} loadingEmailInvite={loadingEmailInvite} sendSuccess={sendSuccess} lastInvalidEmail={lastInvalidEmail} EditableWrapper={EditableWrapper} onEmailFieldFocus={onEmailFieldFocus} onEmailFieldBlur={onEmailFieldBlur} handleAddByEmail={handleAddByEmail} renderIcon={renderIcon} isEditMode={isEditMode}/>);
+    };
+    const renderHeadingBlock = (block) => {
+        return <VrtxHeading_1.VrtxHeading block={block}/>;
+    };
+    // Stable text update handler that doesn't depend on block
+    const handleTextUpdate = (0, react_1.useCallback)((blockId, updates) => {
+        // Dispatch a custom event that PageBuilderMobile can listen to
+        const updateEvent = new CustomEvent('vortex-update-text', {
+            detail: {
+                blockId,
+                textContent: updates.textContent,
+            },
+            bubbles: true,
+        });
+        // Dispatch from document if we're on web
+        if (isWeb && document) {
+            document.dispatchEvent(updateEvent);
+        }
+    }, []); // Empty deps - this handler never needs to change
+    const renderTextBlock = (block) => {
+        return <VrtxText_1.VrtxText block={block} isEditMode={isEditMode} onUpdate={handleTextUpdate}/>;
+    };
+    const renderSelectBlock = (block) => {
+        return <VrtxSelect_1.VrtxSelect block={block}/>;
+    };
+    const renderSubmitBlock = (block) => {
+        var _a;
+        return (<VrtxSubmit_1.VrtxSubmit block={block} view={view} handleSendInvitation={handleSendInvitation} triggerHaptic={platformOperations.triggerHaptic} loadingEmailInvite={loadingEmailInvite} sendSuccess={sendSuccess} emailCount={emails.length} emailBlockCustomizations={(_a = emailInvitationsBlock === null || emailInvitationsBlock === void 0 ? void 0 : emailInvitationsBlock.settings) === null || _a === void 0 ? void 0 : _a.customizations} emailBlockStyle={emailInvitationsBlock === null || emailInvitationsBlock === void 0 ? void 0 : emailInvitationsBlock.style}/>);
+    };
+    const renderFindFriendsBlock = (block) => {
+        var _a, _b, _c, _d;
+        // Extract theme colors from widget configuration
+        const themeOptions = (_d = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.theme']) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.options;
+        const getThemeValue = (key) => {
+            const option = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.find((opt) => opt.key === key);
+            return (option === null || option === void 0 ? void 0 : option.value) || undefined;
+        };
+        const extractBorderColor = (borderValue) => {
+            if (!borderValue)
+                return undefined;
+            const parts = borderValue.trim().split(/\s+/);
+            if (parts.length === 3)
+                return parts[2];
+            return undefined;
+        };
+        const theme = {
+            primaryBackground: getThemeValue('--vrtx-submit-primary-background') ||
+                getThemeValue('--vrtx-button-primary-background') ||
+                getThemeValue('--color-primary-background'),
+            primaryForeground: getThemeValue('--vrtx-submit-primary-color') || getThemeValue('--color-primary-foreground'),
+            secondaryBackground: getThemeValue('--vrtx-submit-secondary-background') ||
+                getThemeValue('--vrtx-button-secondary-background') ||
+                getThemeValue('--color-secondary-background'),
+            secondaryForeground: getThemeValue('--vrtx-submit-secondary-color') ||
+                getThemeValue('--vrtx-button-secondary-color') ||
+                getThemeValue('--color-secondary-foreground'),
+            foreground: getThemeValue('--vrtx-root-color') || getThemeValue('--color-foreground'),
+            border: extractBorderColor(getThemeValue('--vrtx-root-border')) ||
+                extractBorderColor(getThemeValue('--vrtx-input-border')) ||
+                getThemeValue('--color-border'),
+        };
+        return (<VrtxFindFriends_1.VrtxFindFriends block={block} findFriendsConfig={findFriendsConfig} createUserIdInvitation={createUserIdInvitation} triggerHaptic={platformOperations.triggerHaptic} theme={theme}/>);
+    };
+    const renderIncomingInvitationsBlock = (block) => {
+        var _a, _b, _c, _d;
+        // Extract theme colors from widget configuration
+        const themeOptions = (_d = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.theme']) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.options;
+        const getThemeValue = (key) => {
+            const option = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.find((opt) => opt.key === key);
+            return (option === null || option === void 0 ? void 0 : option.value) || undefined;
+        };
+        const extractBorderColor = (borderValue) => {
+            if (!borderValue)
+                return undefined;
+            const parts = borderValue.trim().split(/\s+/);
+            if (parts.length === 3)
+                return parts[2];
+            return undefined;
+        };
+        const theme = {
+            primaryBackground: getThemeValue('--vrtx-submit-primary-background') ||
+                getThemeValue('--vrtx-button-primary-background') ||
+                getThemeValue('--color-primary-background'),
+            primaryForeground: getThemeValue('--vrtx-submit-primary-color') || getThemeValue('--color-primary-foreground'),
+            secondaryBackground: getThemeValue('--vrtx-submit-secondary-background') ||
+                getThemeValue('--vrtx-button-secondary-background') ||
+                getThemeValue('--color-secondary-background'),
+            secondaryForeground: getThemeValue('--vrtx-submit-secondary-color') ||
+                getThemeValue('--vrtx-button-secondary-color') ||
+                getThemeValue('--color-secondary-foreground'),
+            foreground: getThemeValue('--vrtx-root-color') || getThemeValue('--color-foreground'),
+            border: extractBorderColor(getThemeValue('--vrtx-root-border')) ||
+                extractBorderColor(getThemeValue('--vrtx-input-border')) ||
+                getThemeValue('--color-border'),
+        };
+        return (<VrtxIncomingInvitations_1.VrtxIncomingInvitations block={block} incomingInvitationsConfig={incomingInvitationsConfig} apiUrl={apiUrl} jwt={jwt} triggerHaptic={platformOperations.triggerHaptic} theme={theme}/>);
+    };
+    const renderOutgoingInvitationsBlock = (block) => {
+        var _a, _b, _c, _d;
+        // Extract theme colors from widget configuration
+        const themeOptions = (_d = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.theme']) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.options;
+        const getThemeValue = (key) => {
+            const option = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.find((opt) => opt.key === key);
+            return (option === null || option === void 0 ? void 0 : option.value) || undefined;
+        };
+        const extractBorderColor = (borderValue) => {
+            if (!borderValue)
+                return undefined;
+            const parts = borderValue.trim().split(/\s+/);
+            if (parts.length === 3)
+                return parts[2];
+            return undefined;
+        };
+        const theme = {
+            primaryBackground: getThemeValue('--vrtx-submit-primary-background') ||
+                getThemeValue('--vrtx-button-primary-background') ||
+                getThemeValue('--color-primary-background'),
+            primaryForeground: getThemeValue('--vrtx-submit-primary-color') || getThemeValue('--color-primary-foreground'),
+            secondaryBackground: getThemeValue('--vrtx-submit-secondary-background') ||
+                getThemeValue('--vrtx-button-secondary-background') ||
+                getThemeValue('--color-secondary-background'),
+            secondaryForeground: getThemeValue('--vrtx-submit-secondary-color') ||
+                getThemeValue('--vrtx-button-secondary-color') ||
+                getThemeValue('--color-secondary-foreground'),
+            foreground: getThemeValue('--vrtx-root-color') || getThemeValue('--color-foreground'),
+            border: extractBorderColor(getThemeValue('--vrtx-root-border')) ||
+                extractBorderColor(getThemeValue('--vrtx-input-border')) ||
+                getThemeValue('--color-border'),
+        };
+        return (<VrtxOutgoingInvitations_1.VrtxOutgoingInvitations block={block} outgoingInvitationsConfig={outgoingInvitationsConfig} apiUrl={apiUrl} jwt={jwt} triggerHaptic={platformOperations.triggerHaptic} theme={theme}/>);
+    };
+    const renderSearchBoxBlock = (block) => {
+        var _a, _b, _c, _d;
+        // Extract theme colors from widget configuration
+        const themeOptions = (_d = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.theme']) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.options;
+        const getThemeValue = (key) => {
+            const option = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.find((opt) => opt.key === key);
+            return (option === null || option === void 0 ? void 0 : option.value) || undefined;
+        };
+        const theme = {
+            primaryBackground: getThemeValue('--color-primary-background'),
+            primaryForeground: getThemeValue('--color-primary-foreground'),
+            secondaryBackground: getThemeValue('--color-secondary-background'),
+            secondaryForeground: getThemeValue('--color-secondary-foreground'),
+            foreground: getThemeValue('--color-foreground'),
+            border: getThemeValue('--color-border'),
+        };
+        return (<VrtxSearchBox_1.VrtxSearchBox block={block} searchBoxConfig={searchBoxConfig} createUserIdInvitation={createUserIdInvitation} triggerHaptic={platformOperations.triggerHaptic} renderIcon={renderIcon} theme={theme}/>);
+    };
+    const renderInvitationSuggestionsBlock = (block) => {
+        var _a, _b, _c, _d;
+        // Extract theme colors from widget configuration
+        const themeOptions = (_d = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.theme']) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.options;
+        const getThemeValue = (key) => {
+            const option = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.find((opt) => opt.key === key);
+            return (option === null || option === void 0 ? void 0 : option.value) || undefined;
+        };
+        const extractBorderColor = (borderValue) => {
+            if (!borderValue)
+                return undefined;
+            const parts = borderValue.trim().split(/\s+/);
+            if (parts.length === 3)
+                return parts[2];
+            return undefined;
+        };
+        const theme = {
+            primaryBackground: getThemeValue('--vrtx-submit-primary-background') ||
+                getThemeValue('--vrtx-button-primary-background') ||
+                getThemeValue('--color-primary-background'),
+            primaryForeground: getThemeValue('--vrtx-submit-primary-color') || getThemeValue('--color-primary-foreground'),
+            secondaryBackground: getThemeValue('--vrtx-submit-secondary-background') ||
+                getThemeValue('--vrtx-button-secondary-background') ||
+                getThemeValue('--color-secondary-background'),
+            secondaryForeground: getThemeValue('--vrtx-submit-secondary-color') ||
+                getThemeValue('--vrtx-button-secondary-color') ||
+                getThemeValue('--color-secondary-foreground'),
+            foreground: getThemeValue('--vrtx-root-color') || getThemeValue('--color-foreground'),
+            border: extractBorderColor(getThemeValue('--vrtx-root-border')) ||
+                extractBorderColor(getThemeValue('--vrtx-input-border')) ||
+                getThemeValue('--color-border'),
+        };
+        return (<VrtxInvitationSuggestions_1.VrtxInvitationSuggestions block={block} invitationSuggestionsConfig={invitationSuggestionsConfig} createUserIdInvitation={createUserIdInvitation} triggerHaptic={platformOperations.triggerHaptic} theme={theme}/>);
+    };
+    const renderInviteContactsBlock = (block) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // Extract theme colors from widget configuration
+        const themeOptions = (_d = (_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.theme']) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.options;
+        const getThemeValue = (key) => {
+            const option = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.find((opt) => opt.key === key);
+            return (option === null || option === void 0 ? void 0 : option.value) || undefined;
+        };
+        const extractBorderColor = (borderValue) => {
+            if (!borderValue)
+                return undefined;
+            const parts = borderValue.trim().split(/\s+/);
+            if (parts.length === 3)
+                return parts[2];
+            return undefined;
+        };
+        const theme = {
+            primaryBackground: getThemeValue('--vrtx-submit-primary-background') ||
+                getThemeValue('--vrtx-button-primary-background') ||
+                getThemeValue('--color-primary-background'),
+            primaryForeground: getThemeValue('--vrtx-submit-primary-color') || getThemeValue('--color-primary-foreground'),
+            secondaryBackground: getThemeValue('--vrtx-submit-secondary-background') ||
+                getThemeValue('--vrtx-button-secondary-background') ||
+                getThemeValue('--color-secondary-background'),
+            secondaryForeground: getThemeValue('--vrtx-submit-secondary-color') ||
+                getThemeValue('--vrtx-button-secondary-color') ||
+                getThemeValue('--color-secondary-foreground'),
+            foreground: getThemeValue('--vrtx-root-color') || getThemeValue('--color-foreground'),
+            border: extractBorderColor(getThemeValue('--vrtx-root-border')) ||
+                extractBorderColor(getThemeValue('--vrtx-input-border')) ||
+                getThemeValue('--color-border'),
+        };
+        // Get SMS message template from block settings
+        const smsMessageTemplate = (_g = (_f = (_e = block === null || block === void 0 ? void 0 : block.settings) === null || _e === void 0 ? void 0 : _e.customizations) === null || _f === void 0 ? void 0 : _f.smsMessage) === null || _g === void 0 ? void 0 : _g.textContent;
+        // Create SMS invitation function that calls the API
+        const createSmsInvitation = (phoneNumber, contactName) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (platformOperations.createSmsInvitation) {
+                    return yield platformOperations.createSmsInvitation(phoneNumber, contactName);
+                }
+                console.warn('[VrtxInviteContacts] No createSmsInvitation function provided');
+                return null;
+            }
+            catch (err) {
+                console.error('[VrtxInviteContacts] Failed to create SMS invitation:', err);
+                return null;
+            }
+        });
+        return (<VrtxInviteContacts_1.VrtxInviteContacts block={block} inviteContactsConfig={inviteContactsConfig} createSmsInvitation={createSmsInvitation} triggerHaptic={platformOperations.triggerHaptic} theme={theme} smsMessageTemplate={smsMessageTemplate}/>);
+    };
+    const renderBlock = (block) => {
+        if (!block)
+            return null;
+        // Skip rendering if block is hidden
+        if (block.hidden === true) {
+            return null;
+        }
+        const content = (() => {
+            switch (block.subtype) {
+                case 'vrtx-share-options':
+                    return renderShareOptionsBlock(block);
+                case 'vrtx-contacts-import':
+                    return renderContactsImportBlock(block);
+                case 'vrtx-email-invitations':
+                    return renderEmailInvitationsBlock(block);
+                case 'vrtx-find-friends':
+                    return renderFindFriendsBlock(block);
+                case 'vrtx-incoming-invitations':
+                    return renderIncomingInvitationsBlock(block);
+                case 'vrtx-outgoing-invitations':
+                    return renderOutgoingInvitationsBlock(block);
+                case 'vrtx-invitation-suggestions':
+                    return renderInvitationSuggestionsBlock(block);
+                case 'vrtx-invite-contacts':
+                    return renderInviteContactsBlock(block);
+                case 'vrtx-search-box':
+                    return renderSearchBoxBlock(block);
+                case 'vrtx-heading':
+                    return renderHeadingBlock(block);
+                case 'vrtx-text':
+                    return renderTextBlock(block);
+                case 'vrtx-select':
+                    return null; //renderSelectBlock(block);
+                case 'vrtx-submit':
+                    return renderSubmitBlock(block);
+                default:
+                    console.warn(`here [InvitationFormCore] Unknown block type: ${block.subtype}`);
+                    return null;
+            }
+        })();
+        if (!content)
+            return null;
+        // Wrap in EditableWrapper for edit mode
+        return (<EditableWrapper key={block.id} componentId={block.id} componentType={block.type} node={block}>
+        {content}
+      </EditableWrapper>);
+    };
+    const renderColumn = (column, filterGroup, excludeGroups) => {
+        if (!column || !column.children)
+            return null;
+        // If filtering by include group, check if this column has any matching blocks
+        if (filterGroup) {
+            const hasMatchingBlocks = column.children.some((child) => {
+                var _a, _b, _c;
+                if (child.type === 'block') {
+                    const blockGroup = (_c = (_b = (_a = child.meta) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.group) === null || _c === void 0 ? void 0 : _c.name;
+                    return blockGroup === filterGroup;
+                }
+                return false;
+            });
+            // Skip rendering this column if it has no matching blocks
+            if (!hasMatchingBlocks) {
+                return null;
+            }
+        }
+        // If excluding groups, check if this column has any blocks NOT in excluded groups
+        if (excludeGroups && excludeGroups.length > 0) {
+            const hasNonExcludedBlocks = column.children.some((child) => {
+                var _a, _b, _c;
+                if (child.type === 'block') {
+                    const blockGroup = (_c = (_b = (_a = child.meta) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.group) === null || _c === void 0 ? void 0 : _c.name;
+                    return !excludeGroups.includes(blockGroup);
+                }
+                return false;
+            });
+            // Skip rendering this column if all its blocks are excluded
+            if (!hasNonExcludedBlocks) {
+                return null;
+            }
+        }
+        return (<EditableWrapper key={column.id} componentId={column.id} componentType={column.type} node={column}>
+        <react_native_1.View style={{ flex: 1 }}>
+          {column.children.map((child) => {
+                var _a, _b, _c, _d, _e, _f;
+                if (child.type === 'block') {
+                    // Skip submit button blocks - they're rendered after email invitations
+                    if (child.subtype === 'vrtx-submit') {
+                        return null;
+                    }
+                    // If filterGroup is provided, only render blocks from that group
+                    if (filterGroup) {
+                        const blockGroup = (_c = (_b = (_a = child.meta) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.group) === null || _c === void 0 ? void 0 : _c.name;
+                        if (blockGroup !== filterGroup) {
+                            return null;
+                        }
+                    }
+                    // If excludeGroups is provided, skip blocks from those groups
+                    if (excludeGroups && excludeGroups.length > 0) {
+                        const blockGroup = (_f = (_e = (_d = child.meta) === null || _d === void 0 ? void 0 : _d.source) === null || _e === void 0 ? void 0 : _e.group) === null || _f === void 0 ? void 0 : _f.name;
+                        if (excludeGroups.includes(blockGroup)) {
+                            return null;
+                        }
+                    }
+                    // Special handling for email invitations block - render submit button separately
+                    if (child.subtype === 'vrtx-email-invitations' && submitButtonBlock) {
+                        return (<react_1.default.Fragment key={child.id}>
+                    {renderBlock(child)}
+                    {renderBlock(submitButtonBlock)}
+                  </react_1.default.Fragment>);
+                    }
+                    return renderBlock(child);
+                }
+                return null;
+            })}
+        </react_native_1.View>
+      </EditableWrapper>);
+    };
+    const renderRow = (row, index, totalRows, filterGroup, excludeGroups) => {
+        var _a, _b, _c, _d;
+        if (!row)
+            return null;
+        // Check if row has any visible content (columns with blocks)
+        const hasVisibleContent = (_a = row.children) === null || _a === void 0 ? void 0 : _a.some((child) => {
+            if (child.type === 'column' && child.children) {
+                return child.children.some((blockChild) => blockChild.type === 'block');
+            }
+            return false;
+        });
+        // In non-edit mode, skip rows without children entirely
+        if (!row.children && !isEditMode)
+            return null;
+        // If filtering by include group, check if this row has any columns with matching blocks
+        if (filterGroup) {
+            const hasMatchingContent = (_b = row.children) === null || _b === void 0 ? void 0 : _b.some((child) => {
+                if (child.type === 'column' && child.children) {
+                    return child.children.some((blockChild) => {
+                        var _a, _b, _c;
+                        if (blockChild.type === 'block') {
+                            const blockGroup = (_c = (_b = (_a = blockChild.meta) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.group) === null || _c === void 0 ? void 0 : _c.name;
+                            return blockGroup === filterGroup;
+                        }
+                        return false;
+                    });
+                }
+                return false;
+            });
+            // Skip rendering this row if it has no matching content
+            if (!hasMatchingContent) {
+                return null;
+            }
+        }
+        // If excluding groups, check if this row has any columns with non-excluded blocks
+        if (excludeGroups && excludeGroups.length > 0) {
+            const hasNonExcludedContent = (_c = row.children) === null || _c === void 0 ? void 0 : _c.some((child) => {
+                if (child.type === 'column' && child.children) {
+                    return child.children.some((blockChild) => {
+                        var _a, _b, _c;
+                        if (blockChild.type === 'block') {
+                            const blockGroup = (_c = (_b = (_a = blockChild.meta) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.group) === null || _c === void 0 ? void 0 : _c.name;
+                            return !excludeGroups.includes(blockGroup);
+                        }
+                        return false;
+                    });
+                }
+                return false;
+            });
+            // Skip rendering this row if all its blocks are excluded
+            // BUT in edit mode, allow empty rows through so they can be selected
+            if (!hasNonExcludedContent && !(isEditMode && !hasVisibleContent)) {
+                return null;
+            }
+        }
+        // Determine if this is an empty row (no visible content)
+        const isEmptyRow = !hasVisibleContent;
+        return (<react_1.default.Fragment key={row.id}>
+        {/* Drop zone before this row */}
+        {isEditMode && isDragging && (<react_native_1.View 
+            // @ts-ignore
+            data-drop-zone="between-rows" data-insertion-index={index} style={{
+                    height: 40,
+                    // borderWidth: 2,
+                    // borderColor: '#4CAF50',
+                    // borderStyle: 'dashed',
+                    // borderRadius: 4,
+                    // backgroundColor: 'rgba(76, 175, 80, 0.1)',
+                    marginVertical: 8,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+            <react_native_1.Text style={{ color: '#4CAF50', fontSize: 12, fontWeight: '600' }}>
+              {/* Drop here to insert at position {index} */}
+            </react_native_1.Text>
+          </react_native_1.View>)}
+
+        {/* The actual row */}
+        <EditableWrapper componentId={row.id} componentType={row.type} node={row}>
+          <react_native_1.View style={[
+                styles.section,
+                // In edit mode, empty rows get a minimum height so they can be selected
+                isEditMode && isEmptyRow && styles.emptyRowEditMode,
+            ]}>
+            {(_d = row.children) === null || _d === void 0 ? void 0 : _d.map((child) => {
+                if (child.type === 'column') {
+                    return renderColumn(child, filterGroup, excludeGroups);
+                }
+                return null;
+            })}
+          </react_native_1.View>
+        </EditableWrapper>
+
+        {/* Drop zone after last row */}
+        {isEditMode && isDragging && index === totalRows - 1 && (<react_native_1.View 
+            // @ts-ignore
+            data-drop-zone="between-rows" data-insertion-index={totalRows} style={{
+                    height: 40,
+                    borderWidth: 2,
+                    borderColor: '#4CAF50',
+                    borderStyle: 'dashed',
+                    borderRadius: 4,
+                    backgroundColor: 'rgba(76, 175, 80, 0.1)',
+                    marginVertical: 8,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+            <react_native_1.Text style={{ color: '#4CAF50', fontSize: 12, fontWeight: '600' }}>
+              Drop here to insert at position {totalRows}
+            </react_native_1.Text>
+          </react_native_1.View>)}
+      </react_1.default.Fragment>);
+    };
+    // Helper function to get component label
+    const getComponentLabel = (type) => {
+        const labelMap = {
+            'vrtx-share-options': 'Share Options',
+            'vrtx-contacts-import': 'Contacts Import',
+            'vrtx-email-invitations': 'Email Invitations',
+            'vrtx-find-friends': 'Find Friends',
+            'vrtx-incoming-invitations': 'Incoming Invitations',
+            'vrtx-outgoing-invitations': 'Outgoing Invitations',
+            'vrtx-invitation-suggestions': 'Invitation Suggestions',
+            'vrtx-heading': 'Heading',
+            'vrtx-text': 'Text',
+            'vrtx-select': 'Select',
+            'vrtx-submit': 'Submit',
+            'vrtx-form-label': 'Label',
+            'vrtx-row': 'Row',
+            row: 'Row',
+            column: 'Column',
+            block: 'Block',
+        };
+        return labelMap[type] || type;
+    };
+    // EditableWrapper component for hover highlighting and drag-drop in edit mode
+    // IMPORTANT: Memoized via useMemo to maintain stable component identity across re-renders.
+    // Without this, every parent state change (e.g., typing in email input) would create a new
+    // component type, causing React to unmount/remount all children — which blurs TextInputs.
+    const EditableWrapper = react_1.default.useMemo(() => {
+        const Wrapper = ({ children, componentId, componentType, node, flex, }) => {
+            const wrapperRef = react_1.default.useRef(null);
+            const labelRef = react_1.default.useRef(null);
+            const leftMarginRef = react_1.default.useRef(null);
+            const rightMarginRef = react_1.default.useRef(null);
+            const outlineRef = react_1.default.useRef(null);
+            // For rows on web, allow margin-based hover/selection
+            const isRow = componentType === 'row';
+            const isColumn = componentType === 'column';
+            const isBlock = !isRow && !isColumn;
+            // State for row margin hover
+            const [isRowMarginHovered, setIsRowMarginHovered] = react_1.default.useState(false);
+            // Determine hover and selection states
+            const isHovered = isBlock
+                ? hoveredComponentId === componentId
+                : isRow && isWeb
+                    ? isRowMarginHovered
+                    : false;
+            const isSelected = isBlock
+                ? selectedComponentId === componentId
+                : isRow && isWeb
+                    ? selectedComponentId === componentId
+                    : false;
+            const showLabel = isEditMode && (isHovered || isSelected);
+            // Create margin detection boxes for rows on web
+            react_1.default.useEffect(() => {
+                if (!isWeb || !isRow || !isEditMode) {
+                    // Clean up margin detectors if they exist
+                    if (leftMarginRef.current && leftMarginRef.current.parentNode) {
+                        leftMarginRef.current.parentNode.removeChild(leftMarginRef.current);
+                        leftMarginRef.current = null;
+                    }
+                    if (rightMarginRef.current && rightMarginRef.current.parentNode) {
+                        rightMarginRef.current.parentNode.removeChild(rightMarginRef.current);
+                        rightMarginRef.current = null;
+                    }
+                    if (outlineRef.current && outlineRef.current.parentNode) {
+                        outlineRef.current.parentNode.removeChild(outlineRef.current);
+                        outlineRef.current = null;
+                    }
+                    return;
+                }
+                if (!wrapperRef.current)
+                    return;
+                // Find the outermost container with padding - this creates the margin areas
+                // Walk up the DOM tree until we find a container that's significantly wider than the row
+                let scrollContainer = wrapperRef.current.parentElement;
+                const rowWidth = wrapperRef.current.getBoundingClientRect().width;
+                let attempts = 0;
+                while (scrollContainer && attempts < 15) {
+                    const containerWidth = scrollContainer.getBoundingClientRect().width;
+                    // If this container is significantly wider than the row (has margins/padding)
+                    if (containerWidth > rowWidth + 20) {
+                        break;
+                    }
+                    scrollContainer = scrollContainer.parentElement;
+                    attempts++;
+                }
+                // Fallback: use the widest ancestor we can find
+                if (!scrollContainer || scrollContainer.getBoundingClientRect().width <= rowWidth) {
+                    scrollContainer = wrapperRef.current.parentElement;
+                    while (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.parentElement) {
+                        const parent = scrollContainer.parentElement;
+                        if (parent.getBoundingClientRect().width > scrollContainer.getBoundingClientRect().width) {
+                            scrollContainer = parent;
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                if (!scrollContainer)
+                    return;
+                // Create margin detectors and outline if they don't exist
+                if (!leftMarginRef.current) {
+                    leftMarginRef.current = document.createElement('div');
+                    document.body.appendChild(leftMarginRef.current);
+                }
+                if (!rightMarginRef.current) {
+                    rightMarginRef.current = document.createElement('div');
+                    document.body.appendChild(rightMarginRef.current);
+                }
+                if (!outlineRef.current) {
+                    outlineRef.current = document.createElement('div');
+                    document.body.appendChild(outlineRef.current);
+                }
+                const updateMarginDetectors = () => {
+                    if (!wrapperRef.current || !scrollContainer)
+                        return;
+                    const rowRect = wrapperRef.current.getBoundingClientRect();
+                    const containerRect = scrollContainer.getBoundingClientRect();
+                    // Update outline box (full width)
+                    if (outlineRef.current) {
+                        Object.assign(outlineRef.current.style, {
+                            position: 'fixed',
+                            top: `${rowRect.top}px`,
+                            left: `${containerRect.left}px`,
+                            width: `${containerRect.width}px`,
+                            height: `${rowRect.height}px`,
+                            outline: isRowMarginHovered || isSelected
+                                ? `3px solid ${isSelected ? '#1166c2' : '#72b3f3'}`
+                                : 'none',
+                            outlineOffset: '0px',
+                            borderRadius: '8px',
+                            pointerEvents: 'none',
+                            zIndex: '1199',
+                        });
+                    }
+                    // Update left margin detector
+                    if (leftMarginRef.current) {
+                        const leftWidth = rowRect.left - containerRect.left;
+                        Object.assign(leftMarginRef.current.style, {
+                            position: 'fixed',
+                            top: `${rowRect.top}px`,
+                            left: `${containerRect.left}px`,
+                            width: `${leftWidth}px`,
+                            height: `${rowRect.height}px`,
+                            cursor: 'pointer',
+                            pointerEvents: 'auto',
+                            zIndex: '1199',
+                        });
+                    }
+                    // Update right margin detector
+                    if (rightMarginRef.current) {
+                        const rightWidth = containerRect.right - rowRect.right;
+                        Object.assign(rightMarginRef.current.style, {
+                            position: 'fixed',
+                            top: `${rowRect.top}px`,
+                            left: `${rowRect.right}px`,
+                            width: `${rightWidth}px`,
+                            height: `${rowRect.height}px`,
+                            cursor: 'pointer',
+                            pointerEvents: 'auto',
+                            zIndex: '1199',
+                        });
+                    }
+                };
+                // Set up event handlers for margin detectors
+                const handleMarginEnter = () => {
+                    setIsRowMarginHovered(true);
+                };
+                const handleMarginLeave = () => {
+                    setIsRowMarginHovered(false);
+                };
+                const handleMarginClick = (e) => {
+                    e.stopPropagation();
+                    setSelectedComponentId(componentId);
+                    if (onComponentSelect) {
+                        onComponentSelect({
+                            id: componentId,
+                            type: componentType,
+                            element: node || null,
+                            styles: {},
+                        });
+                    }
+                };
+                leftMarginRef.current.addEventListener('mouseenter', handleMarginEnter);
+                leftMarginRef.current.addEventListener('mouseleave', handleMarginLeave);
+                leftMarginRef.current.addEventListener('click', handleMarginClick);
+                rightMarginRef.current.addEventListener('mouseenter', handleMarginEnter);
+                rightMarginRef.current.addEventListener('mouseleave', handleMarginLeave);
+                rightMarginRef.current.addEventListener('click', handleMarginClick);
+                updateMarginDetectors();
+                window.addEventListener('scroll', updateMarginDetectors, true);
+                window.addEventListener('resize', updateMarginDetectors);
+                return () => {
+                    window.removeEventListener('scroll', updateMarginDetectors, true);
+                    window.removeEventListener('resize', updateMarginDetectors);
+                    if (leftMarginRef.current) {
+                        leftMarginRef.current.removeEventListener('mouseenter', handleMarginEnter);
+                        leftMarginRef.current.removeEventListener('mouseleave', handleMarginLeave);
+                        leftMarginRef.current.removeEventListener('click', handleMarginClick);
+                        if (leftMarginRef.current.parentNode) {
+                            leftMarginRef.current.parentNode.removeChild(leftMarginRef.current);
+                        }
+                        leftMarginRef.current = null;
+                    }
+                    if (rightMarginRef.current) {
+                        rightMarginRef.current.removeEventListener('mouseenter', handleMarginEnter);
+                        rightMarginRef.current.removeEventListener('mouseleave', handleMarginLeave);
+                        rightMarginRef.current.removeEventListener('click', handleMarginClick);
+                        if (rightMarginRef.current.parentNode) {
+                            rightMarginRef.current.parentNode.removeChild(rightMarginRef.current);
+                        }
+                        rightMarginRef.current = null;
+                    }
+                    if (outlineRef.current && outlineRef.current.parentNode) {
+                        outlineRef.current.parentNode.removeChild(outlineRef.current);
+                        outlineRef.current = null;
+                    }
+                };
+            }, [
+                isWeb,
+                isRow,
+                isEditMode,
+                isRowMarginHovered,
+                isSelected,
+                componentId,
+                componentType,
+                node,
+                onComponentSelect,
+            ]);
+            // Create and manage a portal-like label element
+            react_1.default.useEffect(() => {
+                if (!isWeb || !showLabel) {
+                    // Clean up label if it exists
+                    if (labelRef.current && labelRef.current.parentNode) {
+                        labelRef.current.parentNode.removeChild(labelRef.current);
+                        labelRef.current = null;
+                    }
+                    return;
+                }
+                if (!wrapperRef.current)
+                    return;
+                // Find the container using the same logic as margin detectors
+                let scrollContainer = null;
+                if (isRow) {
+                    // For rows, find the outermost container with padding
+                    scrollContainer = wrapperRef.current.parentElement;
+                    const rowWidth = wrapperRef.current.getBoundingClientRect().width;
+                    let attempts = 0;
+                    while (scrollContainer && attempts < 15) {
+                        const containerWidth = scrollContainer.getBoundingClientRect().width;
+                        if (containerWidth > rowWidth + 20) {
+                            break;
+                        }
+                        scrollContainer = scrollContainer.parentElement;
+                        attempts++;
+                    }
+                    if (!scrollContainer || scrollContainer.getBoundingClientRect().width <= rowWidth) {
+                        scrollContainer = wrapperRef.current.parentElement;
+                        while (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.parentElement) {
+                            const parent = scrollContainer.parentElement;
+                            if (parent.getBoundingClientRect().width > scrollContainer.getBoundingClientRect().width) {
+                                scrollContainer = parent;
+                            }
+                            else {
+                                break;
+                            }
+                        }
+                    }
+                }
+                // Create label element if it doesn't exist
+                if (!labelRef.current) {
+                    labelRef.current = document.createElement('div');
+                    document.body.appendChild(labelRef.current);
+                }
+                const updateLabelPosition = () => {
+                    if (!wrapperRef.current || !labelRef.current)
+                        return;
+                    const rect = wrapperRef.current.getBoundingClientRect();
+                    const label = labelRef.current;
+                    // For rows on web, position at extreme left of container
+                    let leftPos = rect.left + 5;
+                    if (isRow && scrollContainer) {
+                        const containerRect = scrollContainer.getBoundingClientRect();
+                        leftPos = containerRect.left;
+                    }
+                    // Update styles
+                    Object.assign(label.style, {
+                        position: 'fixed',
+                        left: `${leftPos}px`,
+                        top: `${rect.top - 25}px`,
+                        height: '25px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        backgroundColor: isSelected ? '#1166c2' : '#72b3f3',
+                        color: 'white',
+                        padding: '0 12px',
+                        fontSize: '11px',
+                        fontWeight: '600',
+                        borderRadius: '2px 2px 0 0',
+                        whiteSpace: 'nowrap',
+                        zIndex: '1200',
+                        pointerEvents: 'none',
+                        userSelect: 'none',
+                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
+                    });
+                    label.textContent = getComponentLabel((node === null || node === void 0 ? void 0 : node.subtype) || componentType);
+                };
+                updateLabelPosition();
+                window.addEventListener('scroll', updateLabelPosition, true);
+                window.addEventListener('resize', updateLabelPosition);
+                return () => {
+                    window.removeEventListener('scroll', updateLabelPosition, true);
+                    window.removeEventListener('resize', updateLabelPosition);
+                    if (labelRef.current && labelRef.current.parentNode) {
+                        labelRef.current.parentNode.removeChild(labelRef.current);
+                        labelRef.current = null;
+                    }
+                };
+            }, [showLabel, isSelected, node, componentType, isWeb, isRow, isEditMode]);
+            // Use the toolbar hook to manage the delete button
+            (0, PlacedItemToolbar_1.usePlacedItemToolbar)({
+                wrapperRef,
+                isSelected,
+                componentId,
+                componentType,
+                isRow,
+                nodeSubtype: node === null || node === void 0 ? void 0 : node.subtype,
+            });
+            if (!isEditMode)
+                return <>{children}</>;
+            // Helper function to check if element is inside a contentEditable element
+            const isInsideContentEditable = (target) => {
+                var _a, _b;
+                if (!target)
+                    return false;
+                let el = target;
+                let depth = 0;
+                while (el && depth < 20) {
+                    if (((_a = el.getAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-slate-editor')) === 'true') {
+                        return true;
+                    }
+                    if (el.contentEditable === 'true' || ((_b = el.getAttribute) === null || _b === void 0 ? void 0 : _b.call(el, 'contenteditable')) === 'true') {
+                        return true;
+                    }
+                    el = el.parentElement;
+                    depth++;
+                }
+                return false;
+            };
+            const handleClick = (e) => {
+                var _a, _b, _c, _d, _e;
+                // Don't handle clicks on columns - let them pass through to child blocks
+                // Rows are allowed so empty rows can be selected and deleted
+                if (isColumn) {
+                    return;
+                }
+                const target = (e === null || e === void 0 ? void 0 : e.target) || ((_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.target);
+                // Check if the click is inside a contentEditable element
+                if (isInsideContentEditable(target)) {
+                    // If the component is already selected, allow the click to proceed for text editing
+                    if (isSelected) {
+                        console.log('[EditableWrapper] Allowing click inside contentEditable element (already selected)');
+                        (_b = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _b === void 0 ? void 0 : _b.call(e);
+                        return;
+                    }
+                    // If not selected, we'll select it first (don't return early)
+                    console.log('[EditableWrapper] Selecting component with contentEditable element');
+                }
+                if (target) {
+                    let el = target;
+                    let depth = 0;
+                    while (el && depth < 20) {
+                        // Check for circle button attribute
+                        if (((_c = el.getAttribute) === null || _c === void 0 ? void 0 : _c.call(el, 'data-circle-button')) === 'true') {
+                            console.log('[EditableWrapper] Ignoring circle button click - found data attribute');
+                            return;
+                        }
+                        el = el.parentElement;
+                        depth++;
+                    }
+                }
+                // Ignore clicks from circle button (legacy flag check)
+                if ((e === null || e === void 0 ? void 0 : e._circleButtonClick) || ((_d = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _d === void 0 ? void 0 : _d._circleButtonClick)) {
+                    console.log('[EditableWrapper] Ignoring circle button click - found flag');
+                    return;
+                }
+                // Only handle once - prevent double firing from both capture and bubble
+                if (e === null || e === void 0 ? void 0 : e._editable_handled)
+                    return;
+                if (e)
+                    e._editable_handled = true;
+                (_e = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _e === void 0 ? void 0 : _e.call(e);
+                console.log('[EditableWrapper] Clicked:', componentId, componentType, 'onComponentSelect exists:', !!onComponentSelect);
+                setSelectedComponentId(componentId);
+                if (onComponentSelect) {
+                    console.log('[EditableWrapper] Calling onComponentSelect with:', {
+                        id: componentId,
+                        type: componentType,
+                        element: node || null,
+                    });
+                    onComponentSelect({
+                        id: componentId,
+                        type: componentType,
+                        element: node || null,
+                        styles: {},
+                    });
+                }
+                else {
+                    console.warn('[EditableWrapper] onComponentSelect is not defined!');
+                }
+            };
+            return (<div ref={wrapperRef} data-component-id={componentId} data-component-type={componentType} style={Object.assign({ position: 'relative' }, (flex && { flex: 1 }))} onMouseEnter={isColumn
+                    ? undefined
+                    : isColumn
+                        ? undefined
+                        : (e) => {
+                            if (!isInsideContentEditable(e.target)) {
+                                setHoveredComponentId(componentId);
+                            }
+                        }} onMouseLeave={isColumn
+                    ? undefined
+                    : isColumn
+                        ? undefined
+                        : (e) => {
+                            if (!isInsideContentEditable(e.target)) {
+                                setHoveredComponentId(null);
+                            }
+                        }} onClick={handleClick}>
+        {children}
+        {/* Selection border - only for blocks, not rows (rows use full-width outline) */}
+        {showLabel && !isRow && (<>
+            <div style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        border: `3px solid ${isSelected ? '#1166c2' : '#72b3f3'}`,
+                        borderRadius: '8px',
+                        pointerEvents: 'none',
+                        zIndex: 1,
+                    }}/>
+          </>)}
+      </div>);
+        };
+        return Wrapper;
+    }, [isEditMode, hoveredComponentId, selectedComponentId, onComponentSelect, onComponentDelete]);
+    const styles = createStyles(fontFamily);
+    const handleHeaderButtonPress = () => {
+        if (view === 'main') {
+            handleClose();
+        }
+        else {
+            handleBackToMain();
+        }
+    };
+    // Deselect when clicking on empty space (web only)
+    react_1.default.useEffect(() => {
+        if (!isEditMode || !isWeb)
+            return;
+        const handleDocumentClick = (e) => {
+            let el = e.target;
+            while (el) {
+                // If the click is inside an editable element, do nothing
+                if (el.getAttribute) {
+                    if (el.getAttribute('data-component-id') ||
+                        el.getAttribute('data-circle-button') === 'true') {
+                        return;
+                    }
+                }
+                el = el.parentElement;
+            }
+            // Click was on empty space, deselect
+            setSelectedComponentId(null);
+        };
+        document.addEventListener('click', handleDocumentClick, true);
+        return () => {
+            document.removeEventListener('click', handleDocumentClick, true);
+        };
+    }, [isEditMode]);
+    // Handle component deletion (web only)
+    react_1.default.useEffect(() => {
+        if (!isWeb || !isEditMode)
+            return;
+        const handleDeleteEvent = (e) => {
+            const customEvent = e;
+            const { id, type } = customEvent.detail;
+            if (onComponentDelete) {
+                onComponentDelete(id, type);
+            }
+            // Also deselect the component
+            setSelectedComponentId(null);
+        };
+        document.addEventListener('vortex-delete-component', handleDeleteEvent, true);
+        return () => {
+            document.removeEventListener('vortex-delete-component', handleDeleteEvent, true);
+        };
+    }, [isEditMode, onComponentDelete]);
+    // Extract root form styles from formStructure
+    // Transform CSS properties to React Native equivalents (e.g., 'background' -> 'backgroundColor')
+    const rawRootStyle = (formStructure === null || formStructure === void 0 ? void 0 : formStructure.style) || {};
+    const rootFormStyle = {};
+    for (const [key, value] of Object.entries(rawRootStyle)) {
+        if (key === 'background' && typeof value === 'string' && !value.includes('gradient')) {
+            // Convert CSS 'background' to RN 'backgroundColor' for solid colors
+            rootFormStyle.backgroundColor = value;
+        }
+        else if (key !== 'background') {
+            // Pass through other properties (skip gradients which need special handling)
+            rootFormStyle[key] = value;
+        }
+    }
+    return (<react_native_1.View style={Object.assign(Object.assign(Object.assign({}, styles.container), containerStyle), rootFormStyle)}>
+      {/* Header with Close or Back button */}
+      <react_native_1.View style={Object.assign(Object.assign({}, styles.header), rootFormStyle)}>
+        <react_native_1.View style={[styles.headerButton, { minWidth: 44, minHeight: 44, justifyContent: 'center' }]} onStartShouldSetResponder={() => {
+            return true;
+        }} onResponderGrant={() => {
+            // Handle responder grant
+        }} onResponderRelease={() => {
+            handleHeaderButtonPress();
+        }}>
+          {renderIcon({
+            name: view === 'main' ? 'close' : 'arrow-back',
+            size: 24,
+            color: (resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color) || '#666',
+            opacity: 0.75,
+        })}
+        </react_native_1.View>
+        {resolvedTitle && (<react_native_1.Text style={[
+                styles.headerTitle,
+                resolvedTitleStyle && Object.assign(Object.assign(Object.assign(Object.assign({}, (resolvedTitleStyle.color && { color: resolvedTitleStyle.color })), (resolvedTitleStyle.fontSize && { fontSize: resolvedTitleStyle.fontSize })), (resolvedTitleStyle.fontWeight && { fontWeight: resolvedTitleStyle.fontWeight })), (resolvedTitleStyle.fontFamily && { fontFamily: resolvedTitleStyle.fontFamily })),
+            ]}>
+            {resolvedTitle}
+          </react_native_1.Text>)}
+        {/* Empty spacer to balance the header when title is present */}
+        {resolvedTitle && <react_native_1.View style={[styles.headerButton, { minWidth: 44, minHeight: 44 }]}/>}
+      </react_native_1.View>
+
+      <react_native_1.ScrollView style={Object.assign(Object.assign({}, styles.scrollContent), rootFormStyle)} contentContainerStyle={rootFormStyle} showsVerticalScrollIndicator={false}>
+        {view === 'main' && formStructure && (<>
+            {/* <EditableWrapper componentId="title-text" componentType="text">
+              <Text style={styles.title}>Invite people to join your team</Text>
+            </EditableWrapper> */}
+
+            {/* Dynamic rendering from formStructure */}
+            {(_g = formStructure.children) === null || _g === void 0 ? void 0 : _g.map((child, index) => {
+                if (child.type === 'row') {
+                    return renderRow(child, index, formStructure.children.length);
+                }
+                return null;
+            })}
+          </>)}
+
+        {view === 'main' && !formStructure && (<react_native_1.View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+            <react_native_1.Text style={{ fontSize: 50, marginBottom: 16 }}>⚠️</react_native_1.Text>
+            <react_native_1.Text style={{ fontSize: 18, fontWeight: 'bold', color: '#d9534f', marginBottom: 8, fontFamily }}>
+              Configuration Error
+            </react_native_1.Text>
+            <react_native_1.Text style={{ fontSize: 14, color: '#666', textAlign: 'center', fontFamily }}>
+              Unable to load form structure from widget configuration. Please check your widget configuration and try again.
+            </react_native_1.Text>
+          </react_native_1.View>)}
+
+        {view === 'email' && formStructure && (<>
+            <react_native_1.View style={styles.section}>
+              {/* Dynamic rendering from formStructure - only email-related blocks */}
+              {(_h = formStructure.children) === null || _h === void 0 ? void 0 : _h.map((child, index) => {
+                if (child.type === 'row') {
+                    // Render all rows, but filter blocks inside to only show grp-email-invitations
+                    return renderRow(child, index, formStructure.children.length, 'grp-email-invitations');
+                }
+                return null;
+            })}
+            </react_native_1.View>
+          </>)}
+
+        {view === 'email' && !formStructure && (<react_native_1.View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+            <react_native_1.Text style={{ fontSize: 50, marginBottom: 16 }}>⚠️</react_native_1.Text>
+            <react_native_1.Text style={{ fontSize: 18, fontWeight: 'bold', color: '#d9534f', marginBottom: 8, fontFamily }}>
+              Configuration Error
+            </react_native_1.Text>
+            <react_native_1.Text style={{ fontSize: 14, color: '#666', textAlign: 'center', fontFamily }}>
+              Unable to load form structure from widget configuration. Please check your widget configuration and try again.
+            </react_native_1.Text>
+          </react_native_1.View>)}
+
+        {view === 'contacts' && (<>
+            <react_native_1.Text style={styles.title}>{getContactsCustomization('importContacts.title', 'Add from Contacts')}</react_native_1.Text>
+
+            <react_native_1.View style={styles.section}>
+              <react_native_1.TextInput style={styles.input} placeholder={getContactsCustomization('importContacts.searchPlaceholder', 'Search contacts...')} placeholderTextColor="#999" value={searchQuery} onChangeText={setSearchQuery} autoCapitalize="none" autoCorrect={false} returnKeyType="search"/>
+
+              {loadingContacts ? (<react_native_1.View style={styles.loadingContainer}>
+                  <react_native_1.ActivityIndicator size="large" color="#6291d5"/>
+                  <react_native_1.Text style={styles.loadingText}>{getContactsCustomization('importContacts.loadingText', 'Loading contacts...')}</react_native_1.Text>
+                </react_native_1.View>) : contactsError ? (<react_native_1.View style={styles.errorContainer}>
+                  <react_native_1.Text style={styles.errorTitle}>{getContactsCustomization('importContacts.errorTitle', 'Unable to Access Contacts')}</react_native_1.Text>
+                  <react_native_1.Text style={styles.errorMessage}>{contactsError.message}</react_native_1.Text>
+                  {contactsError.message.includes('Settings') && (<>
+                      <react_native_1.Text style={styles.errorHint}>
+                        To grant access: Open Settings → Privacy & Security → Contacts → Enable for
+                        this app
+                      </react_native_1.Text>
+                      <react_native_1.View style={styles.errorActions}>
+                        <react_native_1.TouchableOpacity style={[styles.button, styles.secondaryButton, styles.halfButton]} onPress={handleOpenSettings}>
+                          <react_native_1.Text style={styles.secondaryButtonText}>{getContactsCustomization('importContacts.openSettingsButton', 'Open Settings')}</react_native_1.Text>
+                        </react_native_1.TouchableOpacity>
+                        <react_native_1.TouchableOpacity style={[styles.button, styles.secondaryButton, styles.halfButton]} onPress={handleRetryContacts}>
+                          <react_native_1.Text style={styles.secondaryButtonText}>{getContactsCustomization('importContacts.retryButton', 'Retry')}</react_native_1.Text>
+                        </react_native_1.TouchableOpacity>
+                      </react_native_1.View>
+                    </>)}
+                  {!contactsError.message.includes('Settings') && (<react_native_1.TouchableOpacity style={[styles.button, styles.secondaryButton, { marginTop: 16 }]} onPress={handleRetryContacts}>
+                      <react_native_1.Text style={styles.secondaryButtonText}>{getContactsCustomization('importContacts.tryAgainButton', 'Try Again')}</react_native_1.Text>
+                    </react_native_1.TouchableOpacity>)}
+                  <react_native_1.Text style={styles.errorDetails}>
+                    {contactsError.message || 'Unknown error occurred'}
+                  </react_native_1.Text>
+                </react_native_1.View>) : (<react_native_1.View style={styles.contactsList}>
+                  {filteredContacts.length === 0 ? (<react_native_1.Text style={styles.emptyText}>
+                      {searchQuery
+                        ? getContactsCustomization('importContacts.emptySearchState', 'No contacts match your search')
+                        : getContactsCustomization('importContacts.emptyState', 'No contacts with email addresses found')}
+                    </react_native_1.Text>) : (filteredContacts.map((contact) => {
+                    const isInvited = invitedContactIds.has(contact.id);
+                    const isLoading = loadingContactIds.has(contact.id);
+                    const initials = contact.name
+                        .split(' ')
+                        .map((part) => part[0])
+                        .join('')
+                        .toUpperCase()
+                        .slice(0, 2);
+                    return (<react_native_1.View key={contact.id} style={styles.contactItem}>
+                          {contact.imageUri ? (<react_native_1.Image source={{ uri: contact.imageUri }} style={styles.contactAvatar}/>) : (<react_native_1.View style={styles.contactAvatarPlaceholder}>
+                              <react_native_1.Text style={styles.contactAvatarInitials}>{initials}</react_native_1.Text>
+                            </react_native_1.View>)}
+                          <react_native_1.View style={styles.contactInfo}>
+                            <react_native_1.Text style={styles.contactName}>{contact.name}</react_native_1.Text>
+                            <react_native_1.Text style={styles.contactEmail}>{contact.email}</react_native_1.Text>
+                          </react_native_1.View>
+                          {isInvited ? (<react_native_1.Text style={styles.invitedText}>{getContactsCustomization('importContacts.invitedStatus', '✓ Invited!')}</react_native_1.Text>) : (<react_native_1.TouchableOpacity style={styles.inviteButton} onPress={() => handleInviteContactWithHaptics(contact.id)} disabled={isLoading}>
+                              {isLoading ? (<react_native_1.ActivityIndicator size="small" color="#333"/>) : (<react_native_1.Text style={styles.inviteButtonText}>{getContactsCustomization('importContacts.inviteButton', 'Invite')}</react_native_1.Text>)}
+                            </react_native_1.TouchableOpacity>)}
+                        </react_native_1.View>);
+                }))}
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </>)}
+
+        {view === 'googleContacts' && (<>
+            <react_native_1.Text style={styles.title}>{getContactsCustomization('google.title', 'Add from Google Contacts')}</react_native_1.Text>
+
+            <react_native_1.View style={styles.section}>
+              <react_native_1.TextInput style={styles.input} placeholder={getContactsCustomization('google.searchPlaceholder', 'Search contacts...')} placeholderTextColor="#999" value={googleSearchQuery} onChangeText={setGoogleSearchQuery} autoCapitalize="none" autoCorrect={false} returnKeyType="search"/>
+
+              {loadingGoogleContacts ? (<react_native_1.View style={styles.loadingContainer}>
+                  <react_native_1.ActivityIndicator size="large" color="#6291d5"/>
+                  <react_native_1.Text style={styles.loadingText}>{getContactsCustomization('google.loadingText', 'Loading Google contacts...')}</react_native_1.Text>
+                </react_native_1.View>) : googleContactsError ? (<react_native_1.View style={styles.errorContainer}>
+                  <react_native_1.Text style={styles.errorTitle}>{getContactsCustomization('google.errorTitle', 'Unable to Access Google Contacts')}</react_native_1.Text>
+                  <react_native_1.Text style={styles.errorMessage}>{googleContactsError.message}</react_native_1.Text>
+                  <react_native_1.TouchableOpacity style={[styles.button, styles.secondaryButton, { marginTop: 16 }]} onPress={handleRetryContacts}>
+                    <react_native_1.Text style={styles.secondaryButtonText}>{getContactsCustomization('google.tryAgainButton', 'Try Again')}</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                  <react_native_1.Text style={styles.errorDetails}>
+                    {googleContactsError.message || 'Unknown error occurred'}
+                  </react_native_1.Text>
+                </react_native_1.View>) : (<react_native_1.View style={styles.contactsList}>
+                  {filteredGoogleContacts.length === 0 ? (<react_native_1.Text style={styles.emptyText}>
+                      {googleSearchQuery
+                        ? getContactsCustomization('google.emptySearchState', 'No contacts match your search')
+                        : getContactsCustomization('google.emptyState', 'No Google contacts with email addresses found')}
+                    </react_native_1.Text>) : (filteredGoogleContacts.map((contact) => {
+                    const isInvited = invitedGoogleContactIds.has(contact.id);
+                    const isLoading = loadingGoogleContactIds.has(contact.id);
+                    const initials = contact.name
+                        .split(' ')
+                        .map((part) => part[0])
+                        .join('')
+                        .toUpperCase()
+                        .slice(0, 2);
+                    return (<react_native_1.View key={contact.id} style={styles.contactItem}>
+                          {contact.imageUri ? (<react_native_1.Image source={{ uri: contact.imageUri }} style={styles.contactAvatar}/>) : (<react_native_1.View style={styles.contactAvatarPlaceholder}>
+                              <react_native_1.Text style={styles.contactAvatarInitials}>{initials}</react_native_1.Text>
+                            </react_native_1.View>)}
+                          <react_native_1.View style={styles.contactInfo}>
+                            <react_native_1.Text style={styles.contactName}>{contact.name}</react_native_1.Text>
+                            <react_native_1.Text style={styles.contactEmail}>{contact.email}</react_native_1.Text>
+                          </react_native_1.View>
+                          {isInvited ? (<react_native_1.Text style={styles.invitedText}>{getContactsCustomization('google.invitedStatus', '✓ Invited!')}</react_native_1.Text>) : (<react_native_1.TouchableOpacity style={styles.inviteButton} onPress={() => handleInviteGoogleContactWithHaptics(contact.id)} disabled={isLoading}>
+                              {isLoading ? (<react_native_1.ActivityIndicator size="small" color="#333"/>) : (<react_native_1.Text style={styles.inviteButtonText}>{getContactsCustomization('google.inviteButton', 'Invite')}</react_native_1.Text>)}
+                            </react_native_1.TouchableOpacity>)}
+                        </react_native_1.View>);
+                }))}
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </>)}
+
+        {view === 'qrcode' && (<react_native_1.View style={styles.section}>
+            <react_native_1.View style={styles.qrCodeViewContainer}>
+              {react_native_1.Platform.OS === 'web' ? (
+            // In web preview mode, show placeholder QR code immediately for demo
+            renderQRCode ? (renderQRCode({
+                value: logic.invitationLink,
+                size: 250,
+            })) : (<react_native_1.Text style={styles.errorMessage}>QR Code rendering not available</react_native_1.Text>)) : loadingInvitationLink ||
+                logic.invitationLink === 'https://app.vortexsoftware.com/invite/abc123' ? (
+            // In native mode, show loading while fetching real link
+            <react_native_1.View style={styles.loadingContainer}>
+                  <react_native_1.ActivityIndicator size="large" color="#6291d5"/>
+                  <react_native_1.Text style={styles.loadingText}>Generating QR Code...</react_native_1.Text>
+                </react_native_1.View>) : renderQRCode ? (renderQRCode({
+                value: logic.invitationLink,
+                size: 250,
+            })) : (<react_native_1.Text style={styles.errorMessage}>QR Code rendering not available</react_native_1.Text>)}
+            </react_native_1.View>
+          </react_native_1.View>)}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+}
+const createStyles = (fontFamily) => react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingTop: 8,
+        backgroundColor: '#fff',
+    },
+    handle: {
+        width: 40,
+        height: 4,
+        backgroundColor: '#ddd',
+        borderRadius: 2,
+        alignSelf: 'center',
+        marginBottom: 2,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 4,
+        zIndex: 10,
+        backgroundColor: '#fff',
+    },
+    headerButton: {
+        padding: 4,
+    },
+    headerTitle: {
+        fontFamily,
+        fontSize: 17,
+        fontWeight: '600',
+        color: '#1a1a1a',
+        textAlign: 'center',
+        flex: 1,
+    },
+    sendButton: {
+        paddingHorizontal: 8,
+        paddingVertical: 8,
+    },
+    sendButtonText: {
+        fontFamily,
+        color: '#2196F3',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    scrollContent: {
+        flex: 1,
+        paddingHorizontal: 20,
+        // backgroundColor: 'none',
+    },
+    title: {
+        fontFamily,
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#1a1a1a',
+        marginTop: 16,
+        marginBottom: 20,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontFamily,
+        fontSize: 13,
+        color: '#666',
+        marginBottom: 20,
+        lineHeight: 18,
+    },
+    // Sections
+    section: {
+        marginBottom: 10,
+    },
+    emptyRowEditMode: {
+        minHeight: 40,
+        backgroundColor: 'rgba(200, 200, 200, 0.2)',
+        borderWidth: 1,
+        borderColor: 'rgba(150, 150, 150, 0.3)',
+        borderStyle: 'dashed',
+        borderRadius: 4,
+    },
+    sectionTitle: {
+        fontFamily,
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#1a1a1a',
+        marginBottom: 12,
+    },
+    // Email chips
+    emailChipsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12,
+    },
+    emailChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#e3f2fd',
+        borderRadius: 16,
+        paddingVertical: 6,
+        paddingLeft: 12,
+        paddingRight: 8,
+        borderWidth: 1,
+        borderColor: '#90caf9',
+    },
+    emailChipText: {
+        fontFamily,
+        fontSize: 13,
+        color: '#1565c0',
+        marginRight: 6,
+    },
+    emailChipRemove: {
+        fontFamily,
+        fontSize: 20,
+        color: '#1565c0',
+        fontWeight: '600',
+        lineHeight: 20,
+    },
+    // Input
+    input: {
+        fontFamily,
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 8,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        fontSize: 15,
+        color: '#1a1a1a',
+        backgroundColor: '#fafafa',
+        marginBottom: 12,
+    },
+    // Buttons
+    button: {
+        borderRadius: 8,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    secondaryButton: {
+        backgroundColor: '#f5f5f5',
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+    },
+    secondaryButtonText: {
+        fontFamily,
+        color: '#333',
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    tertiaryButton: {
+        backgroundColor: '#f5f5f5',
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+    },
+    tertiaryButtonText: {
+        fontFamily,
+        color: '#333',
+        fontSize: 11,
+        fontWeight: '600',
+    },
+    actionButtons: {
+        flexDirection: 'row',
+        gap: 10,
+    },
+    halfButton: {
+        flex: 1,
+    },
+    shareButtonsContainer: {
+        flexDirection: 'column',
+        gap: 10,
+    },
+    contactButtonsContainer: {
+        flexDirection: 'column',
+        gap: 10,
+    },
+    fullButton: {
+        width: '100%',
+    },
+    buttonIconContainer: {
+        marginRight: 8,
+    },
+    // Contacts list
+    contactsList: {
+        gap: 0,
+    },
+    contactItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+    },
+    contactAvatar: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+    },
+    contactAvatarPlaceholder: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: '#6291d5',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    contactAvatarInitials: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#ffffff',
+    },
+    contactInfo: {
+        flex: 1,
+        marginLeft: 12,
+        marginRight: 12,
+    },
+    contactName: {
+        fontFamily,
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#1a1a1a',
+        marginBottom: 4,
+    },
+    contactEmail: {
+        fontFamily,
+        fontSize: 13,
+        color: '#666',
+    },
+    inviteButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        backgroundColor: '#f5f5f5',
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        borderRadius: 6,
+        minWidth: 80,
+        alignItems: 'center',
+    },
+    inviteButtonText: {
+        fontFamily,
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#333',
+    },
+    invitedText: {
+        fontFamily,
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#666',
+    },
+    successMessageContainer: {
+        paddingVertical: 12,
+        alignItems: 'center',
+    },
+    // Loading state
+    loadingContainer: {
+        paddingVertical: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    loadingText: {
+        fontFamily,
+        fontSize: 14,
+        color: '#666',
+        marginTop: 12,
+    },
+    emptyText: {
+        fontFamily,
+        fontSize: 14,
+        color: '#999',
+        textAlign: 'center',
+        paddingVertical: 20,
+    },
+    // Error state
+    errorContainer: {
+        paddingVertical: 40,
+        paddingHorizontal: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    errorTitle: {
+        fontFamily,
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#d9534f',
+        marginBottom: 12,
+        textAlign: 'center',
+    },
+    errorMessage: {
+        fontFamily,
+        fontSize: 14,
+        color: '#666',
+        marginBottom: 16,
+        textAlign: 'center',
+        lineHeight: 20,
+    },
+    errorHint: {
+        fontFamily,
+        fontSize: 13,
+        color: '#666',
+        marginTop: 12,
+        marginBottom: 8,
+        textAlign: 'center',
+        lineHeight: 18,
+        backgroundColor: '#f0f8ff',
+        padding: 12,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: '#b3d9ff',
+    },
+    errorActions: {
+        flexDirection: 'row',
+        gap: 10,
+        marginTop: 16,
+        marginBottom: 8,
+        width: '100%',
+    },
+    errorDetails: {
+        fontFamily,
+        fontSize: 12,
+        color: '#999',
+        textAlign: 'center',
+        fontStyle: 'italic',
+    },
+    // QR Code view
+    qrCodeViewContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 20,
+        backgroundColor: '#fff',
+        borderRadius: 10,
+        marginVertical: 10,
+    },
+    // Edit mode circle button
+    editModeCircleButton: {
+        position: 'absolute',
+        right: 8,
+        top: '50%',
+        transform: [{ translateY: -15 }],
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        backgroundColor: '#2196F3',
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    editModeCircleButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+});
+//# sourceMappingURL=InviteFormCore.js.map