@teamvortexsoftware/vortex-react-native 1.0.0 → 1.0.1

package/dist/components/InviteFormWeb.js

@@ -0,0 +1,295 @@
+"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.InviteFormWeb = InviteFormWeb;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const InviteFormCore_1 = require("./InviteFormCore");
+const mockData_1 = require("../constants/mockData");
+const VortexModulesContext_1 = require("../context/VortexModulesContext");
+// Import web-safe loaders that don't contain native require() statements
+const webLoaders = __importStar(require("../utils/moduleLoaders.web"));
+function InviteFormWeb({ renderIcon, fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', widgetConfiguration, isEditMode = false, isDragging = false, onComponentSelect, onDrop, onSetDropTarget, onClearDropTarget, }) {
+    // Web QR code renderer - always points to vortexsoftware.com for preview
+    const renderQRCode = ({ value, size }) => {
+        try {
+            // Dynamic import to avoid hard dependency
+            const QRCodeWeb = require('react-qr-code').default;
+            return (<react_native_1.View style={{ padding: 10, backgroundColor: '#fff' }}>
+          <QRCodeWeb value="https://vortexsoftware.com" size={size} style={{ height: "auto", maxWidth: "100%", width: "100%" }}/>
+        </react_native_1.View>);
+        }
+        catch (error) {
+            console.warn('[Vortex Preview] react-qr-code not available:', error);
+            return (<react_native_1.View style={{ padding: 20, alignItems: 'center' }}>
+          <react_native_1.Text style={{ fontSize: 14, color: '#666', textAlign: 'center' }}>
+            QR Code preview not available
+          </react_native_1.Text>
+        </react_native_1.View>);
+        }
+    };
+    // Web-compatible platform operations - NO native dependencies
+    // Memoized to prevent re-fetching contacts on every render (e.g., hover events in edit mode)
+    const platformOperations = (0, react_1.useMemo)(() => ({
+        copyToClipboard: () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            // Mock invitation link for preview
+            const mockInvitationLink = 'https://app.vortexsoftware.com/invite/preview-abc123';
+            if (typeof navigator !== 'undefined' && ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText)) {
+                yield navigator.clipboard.writeText(mockInvitationLink);
+                console.log('[Preview] Copied invitation link to clipboard:', mockInvitationLink);
+            }
+            else {
+                console.warn('[Preview] Clipboard not available, would copy:', mockInvitationLink);
+            }
+        }),
+        share: () => __awaiter(this, void 0, void 0, function* () {
+            // Mock invitation link and message for preview
+            const mockInvitationLink = 'https://app.vortexsoftware.com/invite/preview-abc123';
+            const mockMessage = `You're invited to join our team! ${mockInvitationLink}`;
+            if (typeof navigator !== 'undefined' && navigator.share) {
+                yield navigator.share({
+                    title: 'Join our team',
+                    text: mockMessage,
+                    url: mockInvitationLink,
+                });
+            }
+            else {
+                console.log('[Preview] Share not available, would share:', {
+                    title: 'Join our team',
+                    text: mockMessage,
+                    url: mockInvitationLink,
+                });
+            }
+        }),
+        close: () => {
+            console.log('Close (preview mode - no-op)');
+        },
+        triggerHaptic: (style) => __awaiter(this, void 0, void 0, function* () {
+            // No-op for web preview - haptics don't make sense on web
+            console.debug(`[Preview] Haptic feedback (${style}) - no-op on web`);
+        }),
+        fetchContacts: () => __awaiter(this, void 0, void 0, function* () {
+            // Always return mock data for consistent preview behavior
+            return mockData_1.MOCK_CONTACTS;
+        }),
+        invite: (email, contactName) => __awaiter(this, void 0, void 0, function* () {
+            // Simulate API delay for realistic preview behavior
+            yield new Promise((resolve) => setTimeout(resolve, 500));
+            console.log('[Preview] Would send invite to:', email, contactName ? `(${contactName})` : '');
+        }),
+        fetchGoogleContacts: () => __awaiter(this, void 0, void 0, function* () {
+            // Simulate API delay for realistic preview behavior
+            yield new Promise((resolve) => setTimeout(resolve, 800));
+            // Return mock Google contacts for consistent preview behavior
+            return [
+                { id: 'google-1', name: 'Alice Johnson', email: 'alice.johnson@gmail.com' },
+                { id: 'google-2', name: 'Bob Smith', email: 'bob.smith@gmail.com' },
+                { id: 'google-3', name: 'Carol Davis', email: 'carol.davis@gmail.com' },
+            ];
+        }),
+        shareViaEmail: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would open email composer');
+        }),
+        shareViaSms: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would open SMS composer');
+        }),
+        shareViaTwitter: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would share via X/Twitter');
+        }),
+        shareViaInstagram: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would share via Instagram');
+        }),
+        shareViaWhatsApp: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would share via WhatsApp');
+        }),
+        shareViaLine: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would share via Line');
+        }),
+        shareViaFacebookMessenger: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would share via Facebook Messenger');
+        }),
+        shareViaTelegram: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would share via Telegram');
+        }),
+        shareViaDiscord: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Would share via Discord');
+        }),
+        showQrCode: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Navigating to QR Code view');
+            // Navigation handled by InviteFormCore
+        }),
+    }), []);
+    // Container styles for web preview (no absolute positioning, flex layout)
+    const containerStyle = react_native_1.StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: '#fff',
+            paddingTop: 8,
+        },
+    }).container;
+    // Mock contacts for preview
+    const mockContacts = (0, react_1.useMemo)(() => [
+        {
+            userId: 'user-2',
+            name: 'Bob Smith',
+            subtitle: '@bobsmith',
+        },
+        {
+            userId: 'user-4',
+            name: 'David Wilson',
+            subtitle: '@dwilson',
+        },
+    ], []);
+    // Mock Find Friends configuration for preview
+    const mockFindFriendsConfig = (0, react_1.useMemo)(() => ({
+        contacts: mockContacts,
+        onConnect: (contact) => {
+            console.log('[Preview] Would connect with:', contact.name, contact.userId);
+            return true; // Allow invitation to be created
+        },
+        connectButtonText: 'Connect',
+        emptyStateMessage: 'No contacts found',
+    }), [mockContacts]);
+    // Mock incoming invitations for preview
+    const mockIncomingInvitations = (0, react_1.useMemo)(() => [
+        { id: 'incoming-1', name: 'Sarah Connor', subtitle: '@sarahconnor', avatarUrl: undefined },
+    ], []);
+    // Mock Incoming Invitations configuration for preview
+    const mockIncomingInvitationsConfig = (0, react_1.useMemo)(() => ({
+        invitations: mockIncomingInvitations,
+        onAccept: (invitation) => {
+            console.log('[Preview] Would accept invitation from:', invitation.name);
+        },
+        onDelete: (invitation) => {
+            console.log('[Preview] Would delete invitation from:', invitation.name);
+        },
+        acceptButtonText: 'Accept',
+        deleteButtonText: 'Delete',
+        emptyStateMessage: 'No incoming invitations',
+    }), [mockIncomingInvitations]);
+    // Mock outgoing invitations for preview
+    const mockOutgoingInvitations = (0, react_1.useMemo)(() => [
+        { id: 'outgoing-1', name: 'Mike Johnson', subtitle: '@mikejohnson', avatarUrl: undefined },
+    ], []);
+    // Mock Outgoing Invitations configuration for preview
+    const mockOutgoingInvitationsConfig = (0, react_1.useMemo)(() => ({
+        onCancel: (invitation) => {
+            console.log('[Preview] Would cancel invitation to:', invitation.name);
+        },
+        _mockInvitations: mockOutgoingInvitations,
+    }), [mockOutgoingInvitations]);
+    // Mock invitation suggestions for preview
+    const mockInvitationSuggestions = (0, react_1.useMemo)(() => [
+        { id: 'suggestion-1', name: 'Alex Turner', subtitle: '@alexturner', avatarUrl: undefined },
+    ], []);
+    // Mock Invitation Suggestions configuration for preview
+    const mockInvitationSuggestionsConfig = (0, react_1.useMemo)(() => ({
+        suggestions: mockInvitationSuggestions,
+        onInvite: (suggestion) => {
+            console.log('[Preview] Would invite:', suggestion.name);
+        },
+        onDismiss: (suggestion) => {
+            console.log('[Preview] Would dismiss suggestion:', suggestion.name);
+        },
+        inviteButtonText: 'Invite',
+        emptyStateMessage: 'No suggestions',
+    }), [mockInvitationSuggestions]);
+    // Mock contacts for Invite Contacts preview
+    const mockInviteContacts = (0, react_1.useMemo)(() => [
+        { id: 'contact-1', name: 'Alice Johnson', phoneNumber: '+1 (555) 123-4567' },
+        { id: 'contact-2', name: 'Bob Smith', phoneNumber: '+1 (555) 234-5678' },
+        { id: 'contact-3', name: 'Carol Davis', phoneNumber: '+1 (555) 345-6789' },
+    ], []);
+    // Mock Invite Contacts configuration for preview
+    const mockInviteContactsConfig = (0, react_1.useMemo)(() => ({
+        contacts: mockInviteContacts,
+        onInvite: (contact, shortLink) => {
+            console.log('[Preview] Would invite via SMS:', contact.name, contact.phoneNumber, 'with link:', shortLink);
+        },
+        onInvitationCreated: (contact, shortLink) => {
+            console.log('[Preview] Invitation created for:', contact.name, 'link:', shortLink);
+        },
+        inviteYourContactsText: 'Invite your contacts',
+        inviteButtonText: 'Invite',
+        emptyStateMessage: 'No contacts to invite',
+    }), [mockInviteContacts]);
+    // Hard-coded contacts for search box partial text matching
+    const searchBoxContacts = (0, react_1.useMemo)(() => [
+        { userId: 'search-1', name: 'Bob Smith', subtitle: '@bobsmith' },
+        { userId: 'search-2', name: 'David Wilson', subtitle: '@dwilson' },
+        { userId: 'search-3', name: 'Alice Johnson', subtitle: '@alicej' },
+        { userId: 'search-4', name: 'Sarah Connor', subtitle: '@sarahconnor' },
+        { userId: 'search-5', name: 'Mike Davis', subtitle: '@mikedavis' },
+    ], []);
+    // Mock Search Box configuration for preview
+    const mockSearchBoxConfig = (0, react_1.useMemo)(() => ({
+        onSearch: (query) => __awaiter(this, void 0, void 0, function* () {
+            console.log('[Preview] Searching for:', query);
+            const q = query.toLowerCase();
+            return searchBoxContacts.filter((c) => c.name.toLowerCase().includes(q) ||
+                (c.subtitle && c.subtitle.toLowerCase().includes(q)));
+        }),
+        onConnect: (contact) => {
+            console.log('[Preview] Would connect with:', contact.name, contact.userId);
+            return true;
+        },
+        connectButtonText: 'Connect',
+        noResultsMessage: 'No results found',
+    }), []);
+    // Create modules config with web-safe loaders
+    const modulesConfig = (0, react_1.useMemo)(() => ({
+        // No module names needed for web - we use CSS gradients directly
+        loaders: {
+            loadGradientComponent: webLoaders.loadGradientComponent,
+            parseCSSLinearGradient: webLoaders.parseCSSLinearGradient,
+            angleToGradientPoints: webLoaders.angleToGradientPoints,
+            parseGradientFirstColor: webLoaders.parseGradientFirstColor,
+        },
+    }), []);
+    return (<VortexModulesContext_1.VortexModulesProvider config={modulesConfig}>
+      <InviteFormCore_1.InviteFormCore renderIcon={renderIcon} renderQRCode={renderQRCode} platformOperations={platformOperations} fontFamily={fontFamily} containerStyle={containerStyle} widgetConfiguration={widgetConfiguration} isEditMode={isEditMode} isDragging={isDragging} onComponentSelect={onComponentSelect} onDrop={onDrop} onSetDropTarget={onSetDropTarget} onClearDropTarget={onClearDropTarget} findFriendsConfig={mockFindFriendsConfig} incomingInvitationsConfig={mockIncomingInvitationsConfig} outgoingInvitationsConfig={mockOutgoingInvitationsConfig} invitationSuggestionsConfig={mockInvitationSuggestionsConfig} inviteContactsConfig={mockInviteContactsConfig} searchBoxConfig={mockSearchBoxConfig} apiUrl="https://client-api.vortexsoftware.com" jwt="preview-mock-jwt"/>
+    </VortexModulesContext_1.VortexModulesProvider>);
+}
+//# sourceMappingURL=InviteFormWeb.js.map

package/dist/components/InviteFormWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteFormWeb.js","sourceRoot":"","sources":["../../src/components/InviteFormWeb.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport { InviteFormCore, type IconRendererProps } from './InviteFormCore';\nimport { PlatformOperations } from '../types/platformOperations';\nimport { FindFriendsConfig, FindFriendsContact } from '../types/findFriends';\nimport { IncomingInvitationsConfig, OutgoingInvitationsConfig, InvitationSuggestionsConfig, InvitationItem } from '../types/invitations';\nimport { InviteContactsConfig, InviteContactsContact } from '../types/inviteContacts';\nimport { SearchBoxConfig } from '../types/searchBox';\nimport { MOCK_CONTACTS } from '../constants/mockData';\nimport { VortexModulesProvider, type ModuleLoaders } from '../context/VortexModulesContext';\n// Import web-safe loaders that don't contain native require() statements\nimport * as webLoaders from '../utils/moduleLoaders.web';\n\n/**\n * InviteFormWeb - Web-compatible version of InviteFormMobile\n *\n * This component is designed for web preview environments where native dependencies\n * like react-native-vector-icons are not available. It accepts a custom icon renderer\n * that should use FontAwesome5-compatible icon libraries to match the mobile experience.\n *\n * The mobile InviteFormMobile uses FontAwesome5 icons. To ensure consistency between\n * preview and mobile, use FontAwesome5 equivalents in your web icon library.\n *\n * @example\n * // Using with React Icons (FontAwesome5)\n * import { FaTimes, FaArrowLeft, FaLink, FaShareAlt, FaAddressBook, FaEnvelope, FaGoogle } from 'react-icons/fa';\n *\n * const iconComponents = {\n *   'close': FaTimes,\n *   'arrow-back': FaArrowLeft,\n *   'link': FaLink,\n *   'share': FaShareAlt,\n *   'import-contacts': FaAddressBook,\n *   'email': FaEnvelope,\n *   'google': FaGoogle,\n * };\n *\n * const renderIcon = ({ name, size, color }) => {\n *   const IconComponent = iconComponents[name];\n *   if (!IconComponent) return null;\n *   return <IconComponent style={{ fontSize: size, color }} />;\n * };\n *\n * <InviteFormWeb renderIcon={renderIcon} />\n */\n\nexport interface ComponentInfo {\n  id: string;\n  type: string; // 'button', 'text', 'input', etc.\n  element: HTMLElement | null;\n  styles: React.CSSProperties;\n  content?: string;\n}\n\nexport interface InvitationFormPreviewProps {\n  /**\n   * Function to render icons - allows web-compatible icon libraries to be used\n   * Must handle all icon names and should use FontAwesome5 equivalents for consistency:\n   * 'close' (times), 'arrow-back' (arrow-left), 'link', 'share' (share-alt),\n   * 'import-contacts' (address-book), 'email' (envelope), 'google'\n   */\n  renderIcon: (props: IconRendererProps) => React.ReactNode;\n\n  /**\n   * Optional font family override\n   */\n  fontFamily?: string;\n\n  /**\n   * Widget configuration containing component settings\n   */\n  widgetConfiguration?: any;\n\n  /**\n   * Whether edit mode is enabled (for hover highlighting)\n   */\n  isEditMode?: boolean;\n\n  /**\n   * Whether a drag is currently active (to show drop zones)\n   */\n  isDragging?: boolean;\n\n  /**\n   * Callback when a component is selected in edit mode\n   */\n  onComponentSelect?: (componentInfo: ComponentInfo) => void;\n\n  /**\n   * Callback when a palette item is dropped onto a component\n   */\n  onDrop?: (componentInfo: ComponentInfo, droppedItem: any) => void;\n\n  /**\n   * Callbacks for setting/clearing drop targets (for Redux integration)\n   */\n  onSetDropTarget?: (target: { elementId: string; elementType: string; position: string; rowId?: string; insertionIndex?: number }) => void;\n  onClearDropTarget?: () => void;\n}\n\nexport function InviteFormWeb({\n  renderIcon,\n  fontFamily = '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n  widgetConfiguration,\n  isEditMode = false,\n  isDragging = false,\n  onComponentSelect,\n  onDrop,\n  onSetDropTarget,\n  onClearDropTarget,\n}: InvitationFormPreviewProps) {\n  // Web QR code renderer - always points to vortexsoftware.com for preview\n  const renderQRCode = ({ value, size }: { value: string; size: number }) => {\n    try {\n      // Dynamic import to avoid hard dependency\n      const QRCodeWeb = require('react-qr-code').default;\n      return (\n        <View style={{ padding: 10, backgroundColor: '#fff' }}>\n          <QRCodeWeb\n            value=\"https://vortexsoftware.com\"\n            size={size}\n            style={{ height: \"auto\", maxWidth: \"100%\", width: \"100%\" }}\n          />\n        </View>\n      );\n    } catch (error) {\n      console.warn('[Vortex Preview] react-qr-code not available:', error);\n      return (\n        <View style={{ padding: 20, alignItems: 'center' }}>\n          <Text style={{ fontSize: 14, color: '#666', textAlign: 'center' }}>\n            QR Code preview not available\n          </Text>\n        </View>\n      );\n    }\n  };\n\n  // Web-compatible platform operations - NO native dependencies\n  // Memoized to prevent re-fetching contacts on every render (e.g., hover events in edit mode)\n  const platformOperations: PlatformOperations = useMemo(() => ({\n    copyToClipboard: async () => {\n      // Mock invitation link for preview\n      const mockInvitationLink = 'https://app.vortexsoftware.com/invite/preview-abc123';\n      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {\n        await navigator.clipboard.writeText(mockInvitationLink);\n        console.log('[Preview] Copied invitation link to clipboard:', mockInvitationLink);\n      } else {\n        console.warn('[Preview] Clipboard not available, would copy:', mockInvitationLink);\n      }\n    },\n    share: async () => {\n      // Mock invitation link and message for preview\n      const mockInvitationLink = 'https://app.vortexsoftware.com/invite/preview-abc123';\n      const mockMessage = `You're invited to join our team! ${mockInvitationLink}`;\n\n      if (typeof navigator !== 'undefined' && (navigator as any).share) {\n        await (navigator as any).share({\n          title: 'Join our team',\n          text: mockMessage,\n          url: mockInvitationLink,\n        });\n      } else {\n        console.log('[Preview] Share not available, would share:', {\n          title: 'Join our team',\n          text: mockMessage,\n          url: mockInvitationLink,\n        });\n      }\n    },\n    close: () => {\n      console.log('Close (preview mode - no-op)');\n    },\n    triggerHaptic: async (style: 'light' | 'medium' | 'heavy') => {\n      // No-op for web preview - haptics don't make sense on web\n      console.debug(`[Preview] Haptic feedback (${style}) - no-op on web`);\n    },\n    fetchContacts: async () => {\n      // Always return mock data for consistent preview behavior\n      return MOCK_CONTACTS;\n    },\n    invite: async (email: string, contactName?: string) => {\n      // Simulate API delay for realistic preview behavior\n      await new Promise((resolve) => setTimeout(resolve, 500));\n      console.log('[Preview] Would send invite to:', email, contactName ? `(${contactName})` : '');\n    },\n    fetchGoogleContacts: async () => {\n      // Simulate API delay for realistic preview behavior\n      await new Promise((resolve) => setTimeout(resolve, 800));\n      // Return mock Google contacts for consistent preview behavior\n      return [\n        { id: 'google-1', name: 'Alice Johnson', email: 'alice.johnson@gmail.com' },\n        { id: 'google-2', name: 'Bob Smith', email: 'bob.smith@gmail.com' },\n        { id: 'google-3', name: 'Carol Davis', email: 'carol.davis@gmail.com' },\n      ];\n    },\n    shareViaEmail: async () => {\n      console.log('[Preview] Would open email composer');\n    },\n    shareViaSms: async () => {\n      console.log('[Preview] Would open SMS composer');\n    },\n    shareViaTwitter: async () => {\n      console.log('[Preview] Would share via X/Twitter');\n    },\n    shareViaInstagram: async () => {\n      console.log('[Preview] Would share via Instagram');\n    },\n    shareViaWhatsApp: async () => {\n      console.log('[Preview] Would share via WhatsApp');\n    },\n    shareViaLine: async () => {\n      console.log('[Preview] Would share via Line');\n    },\n    shareViaFacebookMessenger: async () => {\n      console.log('[Preview] Would share via Facebook Messenger');\n    },\n    shareViaTelegram: async () => {\n      console.log('[Preview] Would share via Telegram');\n    },\n    shareViaDiscord: async () => {\n      console.log('[Preview] Would share via Discord');\n    },\n    showQrCode: async () => {\n      console.log('[Preview] Navigating to QR Code view');\n      // Navigation handled by InviteFormCore\n    },\n  }), []);\n\n  // Container styles for web preview (no absolute positioning, flex layout)\n  const containerStyle = StyleSheet.create({\n    container: {\n      flex: 1,\n      backgroundColor: '#fff',\n      paddingTop: 8,\n    },\n  }).container;\n\n  // Mock contacts for preview\n  const mockContacts: FindFriendsContact[] = useMemo(\n    () => [\n      {\n        userId: 'user-2',\n        name: 'Bob Smith',\n        subtitle: '@bobsmith',\n      },\n      {\n        userId: 'user-4',\n        name: 'David Wilson',\n        subtitle: '@dwilson',\n      },\n    ],\n    []\n  );\n\n  // Mock Find Friends configuration for preview\n  const mockFindFriendsConfig: FindFriendsConfig = useMemo(() => ({\n    contacts: mockContacts,\n    onConnect: (contact) => {\n      console.log('[Preview] Would connect with:', contact.name, contact.userId);\n      return true; // Allow invitation to be created\n    },\n    connectButtonText: 'Connect',\n    emptyStateMessage: 'No contacts found',\n  }), [mockContacts]);\n\n  // Mock incoming invitations for preview\n  const mockIncomingInvitations: InvitationItem[] = useMemo(() => [\n    { id: 'incoming-1', name: 'Sarah Connor', subtitle: '@sarahconnor', avatarUrl: undefined },\n  ], []);\n\n  // Mock Incoming Invitations configuration for preview\n  const mockIncomingInvitationsConfig: IncomingInvitationsConfig = useMemo(() => ({\n    invitations: mockIncomingInvitations,\n    onAccept: (invitation) => {\n      console.log('[Preview] Would accept invitation from:', invitation.name);\n    },\n    onDelete: (invitation) => {\n      console.log('[Preview] Would delete invitation from:', invitation.name);\n    },\n    acceptButtonText: 'Accept',\n    deleteButtonText: 'Delete',\n    emptyStateMessage: 'No incoming invitations',\n  }), [mockIncomingInvitations]);\n\n  // Mock outgoing invitations for preview\n  const mockOutgoingInvitations: InvitationItem[] = useMemo(() => [\n    { id: 'outgoing-1', name: 'Mike Johnson', subtitle: '@mikejohnson', avatarUrl: undefined },\n  ], []);\n\n  // Mock Outgoing Invitations configuration for preview\n  const mockOutgoingInvitationsConfig: OutgoingInvitationsConfig = useMemo(() => ({\n    onCancel: (invitation) => {\n      console.log('[Preview] Would cancel invitation to:', invitation.name);\n    },\n    _mockInvitations: mockOutgoingInvitations,\n  }), [mockOutgoingInvitations]);\n\n  // Mock invitation suggestions for preview\n  const mockInvitationSuggestions: InvitationItem[] = useMemo(() => [\n    { id: 'suggestion-1', name: 'Alex Turner', subtitle: '@alexturner', avatarUrl: undefined },\n  ], []);\n\n  // Mock Invitation Suggestions configuration for preview\n  const mockInvitationSuggestionsConfig: InvitationSuggestionsConfig = useMemo(() => ({\n    suggestions: mockInvitationSuggestions,\n    onInvite: (suggestion) => {\n      console.log('[Preview] Would invite:', suggestion.name);\n    },\n    onDismiss: (suggestion) => {\n      console.log('[Preview] Would dismiss suggestion:', suggestion.name);\n    },\n    inviteButtonText: 'Invite',\n    emptyStateMessage: 'No suggestions',\n  }), [mockInvitationSuggestions]);\n\n  // Mock contacts for Invite Contacts preview\n  const mockInviteContacts: InviteContactsContact[] = useMemo(() => [\n    { id: 'contact-1', name: 'Alice Johnson', phoneNumber: '+1 (555) 123-4567' },\n    { id: 'contact-2', name: 'Bob Smith', phoneNumber: '+1 (555) 234-5678' },\n    { id: 'contact-3', name: 'Carol Davis', phoneNumber: '+1 (555) 345-6789' },\n  ], []);\n\n  // Mock Invite Contacts configuration for preview\n  const mockInviteContactsConfig: InviteContactsConfig = useMemo(() => ({\n    contacts: mockInviteContacts,\n    onInvite: (contact, shortLink) => {\n      console.log('[Preview] Would invite via SMS:', contact.name, contact.phoneNumber, 'with link:', shortLink);\n    },\n    onInvitationCreated: (contact, shortLink) => {\n      console.log('[Preview] Invitation created for:', contact.name, 'link:', shortLink);\n    },\n    inviteYourContactsText: 'Invite your contacts',\n    inviteButtonText: 'Invite',\n    emptyStateMessage: 'No contacts to invite',\n  }), [mockInviteContacts]);\n\n  // Hard-coded contacts for search box partial text matching\n  const searchBoxContacts: FindFriendsContact[] = useMemo(() => [\n    { userId: 'search-1', name: 'Bob Smith', subtitle: '@bobsmith' },\n    { userId: 'search-2', name: 'David Wilson', subtitle: '@dwilson' },\n    { userId: 'search-3', name: 'Alice Johnson', subtitle: '@alicej' },\n    { userId: 'search-4', name: 'Sarah Connor', subtitle: '@sarahconnor' },\n    { userId: 'search-5', name: 'Mike Davis', subtitle: '@mikedavis' },\n  ], []);\n\n  // Mock Search Box configuration for preview\n  const mockSearchBoxConfig: SearchBoxConfig = useMemo(() => ({\n    onSearch: async (query) => {\n      console.log('[Preview] Searching for:', query);\n      const q = query.toLowerCase();\n      return searchBoxContacts.filter(\n        (c) =>\n          c.name.toLowerCase().includes(q) ||\n          (c.subtitle && c.subtitle.toLowerCase().includes(q))\n      );\n    },\n    onConnect: (contact) => {\n      console.log('[Preview] Would connect with:', contact.name, contact.userId);\n      return true;\n    },\n    connectButtonText: 'Connect',\n    noResultsMessage: 'No results found',\n  }), []);\n\n  // Create modules config with web-safe loaders\n  const modulesConfig = useMemo(\n    () => ({\n      // No module names needed for web - we use CSS gradients directly\n      loaders: {\n        loadGradientComponent: webLoaders.loadGradientComponent,\n        parseCSSLinearGradient: webLoaders.parseCSSLinearGradient,\n        angleToGradientPoints: webLoaders.angleToGradientPoints,\n        parseGradientFirstColor: webLoaders.parseGradientFirstColor,\n      } as ModuleLoaders,\n    }),\n    []\n  );\n\n  return (\n    <VortexModulesProvider config={modulesConfig}>\n      <InviteFormCore\n        renderIcon={renderIcon}\n        renderQRCode={renderQRCode}\n        platformOperations={platformOperations}\n        fontFamily={fontFamily}\n        containerStyle={containerStyle}\n        widgetConfiguration={widgetConfiguration}\n        isEditMode={isEditMode}\n        isDragging={isDragging}\n        onComponentSelect={onComponentSelect}\n        onDrop={onDrop}\n        onSetDropTarget={onSetDropTarget}\n        onClearDropTarget={onClearDropTarget}\n        findFriendsConfig={mockFindFriendsConfig}\n        incomingInvitationsConfig={mockIncomingInvitationsConfig}\n        outgoingInvitationsConfig={mockOutgoingInvitationsConfig}\n        invitationSuggestionsConfig={mockInvitationSuggestionsConfig}\n        inviteContactsConfig={mockInviteContactsConfig}\n        searchBoxConfig={mockSearchBoxConfig}\n        apiUrl=\"https://client-api.vortexsoftware.com\"\n        jwt=\"preview-mock-jwt\"\n      />\n    </VortexModulesProvider>\n  );\n}\n"]}

package/dist/components/PlacedItemToolbar.js

@@ -0,0 +1,147 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlacedItemToolbar = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const isWeb = react_native_1.Platform.OS === 'web';
+/**
+ * PlacedItemToolbar - A portal-based toolbar that appears on the right side of selected elements
+ * Displays a delete button for removing the element from the page builder
+ */
+const usePlacedItemToolbar = ({ wrapperRef, isSelected, componentId, componentType, isRow, nodeSubtype, }) => {
+    const toolbarRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        if (!isWeb || !isSelected) {
+            // Clean up toolbar if it exists
+            if (toolbarRef.current && toolbarRef.current.parentNode) {
+                toolbarRef.current.parentNode.removeChild(toolbarRef.current);
+                toolbarRef.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 toolbar element if it doesn't exist
+        if (!toolbarRef.current) {
+            toolbarRef.current = document.createElement('div');
+            document.body.appendChild(toolbarRef.current);
+        }
+        const handleDelete = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            const deleteEvent = new CustomEvent('vortex-delete-component', {
+                detail: { id: componentId, type: componentType, subtype: nodeSubtype },
+                bubbles: true,
+            });
+            document.dispatchEvent(deleteEvent);
+        };
+        const updateToolbarPosition = () => {
+            if (!wrapperRef.current || !toolbarRef.current)
+                return;
+            const rect = wrapperRef.current.getBoundingClientRect();
+            const toolbar = toolbarRef.current;
+            // For rows on web, position at extreme right of container
+            let leftPos = rect.right + 3;
+            if (isRow && scrollContainer) {
+                const containerRect = scrollContainer.getBoundingClientRect();
+                // Rows...
+                leftPos = containerRect.right + 6;
+            }
+            // Update styles
+            Object.assign(toolbar.style, {
+                position: 'fixed',
+                left: `${leftPos}px`,
+                top: `${rect.top + rect.height / 2}px`,
+                transform: 'translateY(-50%)',
+                backgroundColor: '#fff',
+                borderRadius: '4px',
+                border: '1px solid #1166c2',
+                boxShadow: '0px 3px 5px rgba(0, 0, 0, 0.2)',
+                display: 'flex',
+                flexDirection: 'column',
+                zIndex: '1200',
+                pointerEvents: 'auto',
+            });
+            // Create delete button if it doesn't exist
+            if (toolbar.children.length === 0) {
+                const button = document.createElement('button');
+                button.title = 'Delete';
+                button.innerHTML = `
+          <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" style="width: 24px; height: 24px; fill: currentColor;">
+            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5-1-1h-5l-1 1H5v2h14V4z"></path>
+          </svg>
+        `;
+                Object.assign(button.style, {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '40px',
+                    height: '40px',
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    color: '#c20a0a',
+                    fontSize: '20px',
+                    transition: 'background-color 0.2s',
+                });
+                button.addEventListener('mouseenter', () => {
+                    button.style.backgroundColor = 'rgba(194, 10, 10, 0.1)';
+                });
+                button.addEventListener('mouseleave', () => {
+                    button.style.backgroundColor = 'transparent';
+                });
+                button.addEventListener('mousedown', (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                });
+                button.addEventListener('click', handleDelete);
+                toolbar.appendChild(button);
+            }
+        };
+        updateToolbarPosition();
+        window.addEventListener('scroll', updateToolbarPosition, true);
+        window.addEventListener('resize', updateToolbarPosition);
+        return () => {
+            window.removeEventListener('scroll', updateToolbarPosition, true);
+            window.removeEventListener('resize', updateToolbarPosition);
+            if (toolbarRef.current && toolbarRef.current.parentNode) {
+                toolbarRef.current.parentNode.removeChild(toolbarRef.current);
+                toolbarRef.current = null;
+            }
+        };
+    }, [isSelected, componentId, componentType, isRow, nodeSubtype, wrapperRef]);
+    return null;
+};
+exports.usePlacedItemToolbar = usePlacedItemToolbar;
+//# sourceMappingURL=PlacedItemToolbar.js.map

package/dist/components/PlacedItemToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlacedItemToolbar.js","sourceRoot":"","sources":["../../src/components/PlacedItemToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform } from 'react-native';\n\nconst isWeb = Platform.OS === 'web';\n\ninterface PlacedItemToolbarProps {\n  wrapperRef: React.RefObject<HTMLDivElement | null>;\n  isSelected: boolean;\n  componentId: string;\n  componentType: string;\n  isRow: boolean;\n  nodeSubtype?: string;\n}\n\n/**\n * PlacedItemToolbar - A portal-based toolbar that appears on the right side of selected elements\n * Displays a delete button for removing the element from the page builder\n */\nexport const usePlacedItemToolbar = ({\n  wrapperRef,\n  isSelected,\n  componentId,\n  componentType,\n  isRow,\n  nodeSubtype,\n}: PlacedItemToolbarProps) => {\n  const toolbarRef = React.useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => {\n    if (!isWeb || !isSelected) {\n      // Clean up toolbar if it exists\n      if (toolbarRef.current && toolbarRef.current.parentNode) {\n        toolbarRef.current.parentNode.removeChild(toolbarRef.current);\n        toolbarRef.current = null;\n      }\n      return;\n    }\n\n    if (!wrapperRef.current) return;\n\n    // Find the container using the same logic as margin detectors\n    let scrollContainer: HTMLElement | null = null;\n    if (isRow) {\n      // For rows, find the outermost container with padding\n      scrollContainer = wrapperRef.current.parentElement;\n      const rowWidth = wrapperRef.current.getBoundingClientRect().width;\n      let attempts = 0;\n      while (scrollContainer && attempts < 15) {\n        const containerWidth = scrollContainer.getBoundingClientRect().width;\n        if (containerWidth > rowWidth + 20) {\n          break;\n        }\n        scrollContainer = scrollContainer.parentElement;\n        attempts++;\n      }\n      if (!scrollContainer || scrollContainer.getBoundingClientRect().width <= rowWidth) {\n        scrollContainer = wrapperRef.current.parentElement;\n        while (scrollContainer?.parentElement) {\n          const parent = scrollContainer.parentElement;\n          if (\n            parent.getBoundingClientRect().width > scrollContainer.getBoundingClientRect().width\n          ) {\n            scrollContainer = parent;\n          } else {\n            break;\n          }\n        }\n      }\n    }\n\n    // Create toolbar element if it doesn't exist\n    if (!toolbarRef.current) {\n      toolbarRef.current = document.createElement('div');\n      document.body.appendChild(toolbarRef.current);\n    }\n\n    const handleDelete = (e: MouseEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n\n      const deleteEvent = new CustomEvent('vortex-delete-component', {\n        detail: { id: componentId, type: componentType, subtype: nodeSubtype },\n        bubbles: true,\n      });\n      document.dispatchEvent(deleteEvent);\n    };\n\n    const updateToolbarPosition = () => {\n      if (!wrapperRef.current || !toolbarRef.current) return;\n\n      const rect = wrapperRef.current.getBoundingClientRect();\n      const toolbar = toolbarRef.current;\n\n      // For rows on web, position at extreme right of container\n      let leftPos = rect.right + 3;\n      if (isRow && scrollContainer) {\n        const containerRect = scrollContainer.getBoundingClientRect();\n        // Rows...\n        leftPos = containerRect.right + 6;\n      }\n\n      // Update styles\n      Object.assign(toolbar.style, {\n        position: 'fixed',\n        left: `${leftPos}px`,\n        top: `${rect.top + rect.height / 2}px`,\n        transform: 'translateY(-50%)',\n        backgroundColor: '#fff',\n        borderRadius: '4px',\n        border: '1px solid #1166c2',\n        boxShadow: '0px 3px 5px rgba(0, 0, 0, 0.2)',\n        display: 'flex',\n        flexDirection: 'column',\n        zIndex: '1200',\n        pointerEvents: 'auto',\n      });\n\n      // Create delete button if it doesn't exist\n      if (toolbar.children.length === 0) {\n        const button = document.createElement('button');\n        button.title = 'Delete';\n        button.innerHTML = `\n          <svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" style=\"width: 24px; height: 24px; fill: currentColor;\">\n            <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5-1-1h-5l-1 1H5v2h14V4z\"></path>\n          </svg>\n        `;\n        Object.assign(button.style, {\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: '40px',\n          height: '40px',\n          border: 'none',\n          background: 'transparent',\n          cursor: 'pointer',\n          color: '#c20a0a',\n          fontSize: '20px',\n          transition: 'background-color 0.2s',\n        });\n\n        button.addEventListener('mouseenter', () => {\n          button.style.backgroundColor = 'rgba(194, 10, 10, 0.1)';\n        });\n        button.addEventListener('mouseleave', () => {\n          button.style.backgroundColor = 'transparent';\n        });\n        button.addEventListener('mousedown', (e) => {\n          e.stopPropagation();\n          e.preventDefault();\n        });\n        button.addEventListener('click', handleDelete);\n\n        toolbar.appendChild(button);\n      }\n    };\n\n    updateToolbarPosition();\n\n    window.addEventListener('scroll', updateToolbarPosition, true);\n    window.addEventListener('resize', updateToolbarPosition);\n\n    return () => {\n      window.removeEventListener('scroll', updateToolbarPosition, true);\n      window.removeEventListener('resize', updateToolbarPosition);\n      if (toolbarRef.current && toolbarRef.current.parentNode) {\n        toolbarRef.current.parentNode.removeChild(toolbarRef.current);\n        toolbarRef.current = null;\n      }\n    };\n  }, [isSelected, componentId, componentType, isRow, nodeSubtype, wrapperRef]);\n\n  return null;\n};\n"]}