@teamvortexsoftware/vortex-react-native 0.0.13 → 1.0.1

package/dist/utils/moduleLoaders.js

@@ -0,0 +1,275 @@
+"use strict";
+/**
+ * Module Loaders
+ *
+ * This module provides explicit module loading for optional dependencies.
+ * Instead of auto-detecting which libraries are installed (which causes Metro bundler issues),
+ * users explicitly specify which module they want to use via props.
+ *
+ * This approach:
+ * - Avoids Metro static analysis issues with optional dependencies
+ * - Gives users explicit control over which libraries to use
+ * - Provides clear error messages when a module is specified but not installed
+ * - Only requires the module that the user explicitly specifies
+ */
+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.parseGradientFirstColor = exports.angleToGradientPoints = exports.parseCSSLinearGradient = void 0;
+exports.loadGradientComponent = loadGradientComponent;
+exports.loadHapticsTrigger = loadHapticsTrigger;
+exports.loadQRCodeComponent = loadQRCodeComponent;
+exports.loadClipboardOperations = loadClipboardOperations;
+const react_native_1 = require("react-native");
+// ============================================================================
+// Module Loading Helpers
+// ============================================================================
+/**
+ * Cache for loaded modules to avoid repeated require calls
+ */
+const moduleCache = new Map();
+/**
+ * List of modules that are native-only and should not be loaded on web.
+ * These modules contain native code that doesn't exist in web builds.
+ */
+const NATIVE_ONLY_MODULES = [
+    'expo-linear-gradient',
+    'react-native-linear-gradient',
+    'expo-haptics',
+    'react-native-qrcode-svg',
+    '@react-native-clipboard/clipboard',
+];
+/**
+ * Loads a module by name, with caching and error handling.
+ * Uses explicit require statements to ensure Metro can resolve them.
+ *
+ * IMPORTANT: Native-only modules are skipped on web platform to prevent
+ * build errors. The web platform uses CSS equivalents (gradients) or
+ * browser APIs (clipboard) instead.
+ *
+ * @param moduleName - The name of the module to load
+ * @returns The loaded module or null if not available
+ */
+function loadModule(moduleName) {
+    // Check cache first
+    if (moduleCache.has(moduleName)) {
+        return moduleCache.get(moduleName);
+    }
+    // Skip native-only modules on web platform
+    // These modules contain native code that doesn't exist in web builds
+    if (react_native_1.Platform.OS === 'web' && NATIVE_ONLY_MODULES.includes(moduleName)) {
+        moduleCache.set(moduleName, null);
+        return null;
+    }
+    try {
+        let mod = null;
+        // Use explicit require statements for each supported module
+        // This ensures Metro can properly resolve and bundle them when installed
+        switch (moduleName) {
+            case 'expo-linear-gradient':
+                mod = require('expo-linear-gradient');
+                break;
+            case 'react-native-linear-gradient':
+                mod = require('react-native-linear-gradient');
+                break;
+            case 'expo-haptics':
+                mod = require('expo-haptics');
+                break;
+            case 'react-native-qrcode-svg':
+                mod = require('react-native-qrcode-svg');
+                break;
+            case 'react-qr-code':
+                mod = require('react-qr-code');
+                break;
+            case 'expo-clipboard':
+                mod = require('expo-clipboard');
+                break;
+            case '@react-native-clipboard/clipboard':
+                mod = require('@react-native-clipboard/clipboard');
+                break;
+            default:
+                console.warn(`[Vortex] Unknown module: ${moduleName}`);
+                return null;
+        }
+        moduleCache.set(moduleName, mod);
+        return mod;
+    }
+    catch (error) {
+        // Module not installed - cache null to avoid repeated attempts
+        moduleCache.set(moduleName, null);
+        console.error(`[Vortex] Failed to load module "${moduleName}". ` +
+            `Make sure it's installed: npm install ${moduleName}`);
+        return null;
+    }
+}
+// ============================================================================
+// Gradient Loading
+// ============================================================================
+/**
+ * Loads the gradient component based on the specified module name.
+ *
+ * @param moduleName - The gradient module to load ('expo-linear-gradient' or 'react-native-linear-gradient')
+ * @returns The gradient component or null if not available
+ *
+ * @example
+ * ```tsx
+ * const GradientComponent = loadGradientComponent('expo-linear-gradient');
+ * if (GradientComponent) {
+ *   return <GradientComponent colors={['#ff0000', '#0000ff']} style={styles.button} />;
+ * }
+ * ```
+ */
+function loadGradientComponent(moduleName) {
+    if (!moduleName) {
+        return null;
+    }
+    // On web, we use CSS gradients directly, no component needed
+    if (react_native_1.Platform.OS === 'web') {
+        return null;
+    }
+    const mod = loadModule(moduleName);
+    if (!mod) {
+        return null;
+    }
+    // expo-linear-gradient exports { LinearGradient }
+    // react-native-linear-gradient exports default
+    if (moduleName === 'expo-linear-gradient') {
+        return mod.LinearGradient || null;
+    }
+    else if (moduleName === 'react-native-linear-gradient') {
+        return mod.default || null;
+    }
+    return null;
+}
+// ============================================================================
+// Haptics Loading
+// ============================================================================
+/**
+ * Creates a haptic feedback trigger function based on the specified module.
+ *
+ * @param moduleName - The haptics module to use ('expo-haptics')
+ * @returns A function to trigger haptic feedback, or null if not available
+ *
+ * @example
+ * ```tsx
+ * const triggerHaptic = loadHapticsTrigger('expo-haptics');
+ * if (triggerHaptic) {
+ *   await triggerHaptic('light');
+ * }
+ * ```
+ */
+function loadHapticsTrigger(moduleName) {
+    if (!moduleName) {
+        return null;
+    }
+    // Haptics don't make sense on web
+    if (react_native_1.Platform.OS === 'web') {
+        return null;
+    }
+    const mod = loadModule(moduleName);
+    if (!mod) {
+        return null;
+    }
+    if (moduleName === 'expo-haptics') {
+        return (style) => __awaiter(this, void 0, void 0, function* () {
+            const feedbackStyle = style === 'light'
+                ? mod.ImpactFeedbackStyle.Light
+                : style === 'medium'
+                    ? mod.ImpactFeedbackStyle.Medium
+                    : mod.ImpactFeedbackStyle.Heavy;
+            yield mod.impactAsync(feedbackStyle);
+        });
+    }
+    return null;
+}
+// ============================================================================
+// QR Code Loading
+// ============================================================================
+/**
+ * Loads the QR code component based on the specified module name.
+ *
+ * @param moduleName - The QR code module to load ('react-native-qrcode-svg' or 'react-qr-code')
+ * @returns The QR code component or null if not available
+ *
+ * @example
+ * ```tsx
+ * const QRCodeComponent = loadQRCodeComponent('react-native-qrcode-svg');
+ * if (QRCodeComponent) {
+ *   return <QRCodeComponent value="https://example.com" size={200} />;
+ * }
+ * ```
+ */
+function loadQRCodeComponent(moduleName) {
+    if (!moduleName) {
+        return null;
+    }
+    const mod = loadModule(moduleName);
+    if (!mod) {
+        return null;
+    }
+    // react-native-qrcode-svg exports default
+    // react-qr-code exports default
+    return mod.default || null;
+}
+/**
+ * Loads clipboard operations based on the specified module.
+ *
+ * @param moduleName - The clipboard module to use ('expo-clipboard' or '@react-native-clipboard/clipboard')
+ * @returns Clipboard operations object or null if not available
+ *
+ * @example
+ * ```tsx
+ * const clipboard = loadClipboardOperations('expo-clipboard');
+ * if (clipboard) {
+ *   await clipboard.setString('Hello, world!');
+ * }
+ * ```
+ */
+function loadClipboardOperations(moduleName) {
+    if (!moduleName) {
+        return null;
+    }
+    const mod = loadModule(moduleName);
+    if (!mod) {
+        return null;
+    }
+    if (moduleName === 'expo-clipboard') {
+        return {
+            setString: (text) => __awaiter(this, void 0, void 0, function* () {
+                yield mod.setStringAsync(text);
+            }),
+            getString: () => __awaiter(this, void 0, void 0, function* () {
+                return yield mod.getStringAsync();
+            }),
+        };
+    }
+    else if (moduleName === '@react-native-clipboard/clipboard') {
+        const Clipboard = mod.default || mod;
+        return {
+            setString: (text) => __awaiter(this, void 0, void 0, function* () {
+                Clipboard.setString(text);
+            }),
+            getString: () => __awaiter(this, void 0, void 0, function* () {
+                return yield Clipboard.getString();
+            }),
+        };
+    }
+    return null;
+}
+// ============================================================================
+// Gradient Parsing Utilities (re-exported from shared gradientUtils.ts)
+// ============================================================================
+// Re-export gradient utilities from the shared module to maintain backward compatibility
+// and provide a single source of truth for gradient parsing logic
+var gradientUtils_1 = require("./gradientUtils");
+Object.defineProperty(exports, "parseCSSLinearGradient", { enumerable: true, get: function () { return gradientUtils_1.parseCSSLinearGradient; } });
+Object.defineProperty(exports, "angleToGradientPoints", { enumerable: true, get: function () { return gradientUtils_1.angleToGradientPoints; } });
+Object.defineProperty(exports, "parseGradientFirstColor", { enumerable: true, get: function () { return gradientUtils_1.parseGradientFirstColor; } });
+//# sourceMappingURL=moduleLoaders.js.map

package/dist/utils/moduleLoaders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moduleLoaders.js","sourceRoot":"","sources":["../../src/utils/moduleLoaders.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Module Loaders\n *\n * This module provides explicit module loading for optional dependencies.\n * Instead of auto-detecting which libraries are installed (which causes Metro bundler issues),\n * users explicitly specify which module they want to use via props.\n *\n * This approach:\n * - Avoids Metro static analysis issues with optional dependencies\n * - Gives users explicit control over which libraries to use\n * - Provides clear error messages when a module is specified but not installed\n * - Only requires the module that the user explicitly specifies\n */\n\nimport { Platform } from 'react-native';\nimport type { ComponentType } from 'react';\nimport type {\n  GradientModuleName,\n  HapticsModuleName,\n  QRCodeModuleName,\n  ClipboardModuleName,\n} from '../context/VortexModulesContext';\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Props for gradient components (compatible with both expo and react-native-linear-gradient)\n */\nexport interface GradientProps {\n  colors: string[];\n  locations?: number[];\n  start?: { x: number; y: number };\n  end?: { x: number; y: number };\n  style?: any;\n  children?: React.ReactNode;\n}\n\n/**\n * Props for QR code components\n */\nexport interface QRCodeProps {\n  value: string;\n  size?: number;\n  color?: string;\n  backgroundColor?: string;\n  style?: any;\n}\n\n/**\n * Haptic feedback style\n */\nexport type HapticStyle = 'light' | 'medium' | 'heavy';\n\n// ============================================================================\n// Module Loading Helpers\n// ============================================================================\n\n/**\n * Cache for loaded modules to avoid repeated require calls\n */\nconst moduleCache = new Map<string, any>();\n\n/**\n * List of modules that are native-only and should not be loaded on web.\n * These modules contain native code that doesn't exist in web builds.\n */\nconst NATIVE_ONLY_MODULES = [\n  'expo-linear-gradient',\n  'react-native-linear-gradient',\n  'expo-haptics',\n  'react-native-qrcode-svg',\n  '@react-native-clipboard/clipboard',\n];\n\n/**\n * Loads a module by name, with caching and error handling.\n * Uses explicit require statements to ensure Metro can resolve them.\n *\n * IMPORTANT: Native-only modules are skipped on web platform to prevent\n * build errors. The web platform uses CSS equivalents (gradients) or\n * browser APIs (clipboard) instead.\n *\n * @param moduleName - The name of the module to load\n * @returns The loaded module or null if not available\n */\nfunction loadModule<T>(moduleName: string): T | null {\n  // Check cache first\n  if (moduleCache.has(moduleName)) {\n    return moduleCache.get(moduleName);\n  }\n\n  // Skip native-only modules on web platform\n  // These modules contain native code that doesn't exist in web builds\n  if (Platform.OS === 'web' && NATIVE_ONLY_MODULES.includes(moduleName)) {\n    moduleCache.set(moduleName, null);\n    return null;\n  }\n\n  try {\n    let mod: any = null;\n\n    // Use explicit require statements for each supported module\n    // This ensures Metro can properly resolve and bundle them when installed\n    switch (moduleName) {\n      case 'expo-linear-gradient':\n        mod = require('expo-linear-gradient');\n        break;\n      case 'react-native-linear-gradient':\n        mod = require('react-native-linear-gradient');\n        break;\n      case 'expo-haptics':\n        mod = require('expo-haptics');\n        break;\n      case 'react-native-qrcode-svg':\n        mod = require('react-native-qrcode-svg');\n        break;\n      case 'react-qr-code':\n        mod = require('react-qr-code');\n        break;\n      case 'expo-clipboard':\n        mod = require('expo-clipboard');\n        break;\n      case '@react-native-clipboard/clipboard':\n        mod = require('@react-native-clipboard/clipboard');\n        break;\n      default:\n        console.warn(`[Vortex] Unknown module: ${moduleName}`);\n        return null;\n    }\n\n    moduleCache.set(moduleName, mod);\n    return mod;\n  } catch (error) {\n    // Module not installed - cache null to avoid repeated attempts\n    moduleCache.set(moduleName, null);\n    console.error(\n      `[Vortex] Failed to load module \"${moduleName}\". ` +\n        `Make sure it's installed: npm install ${moduleName}`\n    );\n    return null;\n  }\n}\n\n// ============================================================================\n// Gradient Loading\n// ============================================================================\n\n/**\n * Loads the gradient component based on the specified module name.\n *\n * @param moduleName - The gradient module to load ('expo-linear-gradient' or 'react-native-linear-gradient')\n * @returns The gradient component or null if not available\n *\n * @example\n * ```tsx\n * const GradientComponent = loadGradientComponent('expo-linear-gradient');\n * if (GradientComponent) {\n *   return <GradientComponent colors={['#ff0000', '#0000ff']} style={styles.button} />;\n * }\n * ```\n */\nexport function loadGradientComponent(\n  moduleName: GradientModuleName | undefined\n): ComponentType<GradientProps> | null {\n  if (!moduleName) {\n    return null;\n  }\n\n  // On web, we use CSS gradients directly, no component needed\n  if (Platform.OS === 'web') {\n    return null;\n  }\n\n  const mod = loadModule<any>(moduleName);\n  if (!mod) {\n    return null;\n  }\n\n  // expo-linear-gradient exports { LinearGradient }\n  // react-native-linear-gradient exports default\n  if (moduleName === 'expo-linear-gradient') {\n    return mod.LinearGradient || null;\n  } else if (moduleName === 'react-native-linear-gradient') {\n    return mod.default || null;\n  }\n\n  return null;\n}\n\n// ============================================================================\n// Haptics Loading\n// ============================================================================\n\n/**\n * Creates a haptic feedback trigger function based on the specified module.\n *\n * @param moduleName - The haptics module to use ('expo-haptics')\n * @returns A function to trigger haptic feedback, or null if not available\n *\n * @example\n * ```tsx\n * const triggerHaptic = loadHapticsTrigger('expo-haptics');\n * if (triggerHaptic) {\n *   await triggerHaptic('light');\n * }\n * ```\n */\nexport function loadHapticsTrigger(\n  moduleName: HapticsModuleName | undefined\n): ((style: HapticStyle) => Promise<void>) | null {\n  if (!moduleName) {\n    return null;\n  }\n\n  // Haptics don't make sense on web\n  if (Platform.OS === 'web') {\n    return null;\n  }\n\n  const mod = loadModule<any>(moduleName);\n  if (!mod) {\n    return null;\n  }\n\n  if (moduleName === 'expo-haptics') {\n    return async (style: HapticStyle) => {\n      const feedbackStyle =\n        style === 'light'\n          ? mod.ImpactFeedbackStyle.Light\n          : style === 'medium'\n            ? mod.ImpactFeedbackStyle.Medium\n            : mod.ImpactFeedbackStyle.Heavy;\n\n      await mod.impactAsync(feedbackStyle);\n    };\n  }\n\n  return null;\n}\n\n// ============================================================================\n// QR Code Loading\n// ============================================================================\n\n/**\n * Loads the QR code component based on the specified module name.\n *\n * @param moduleName - The QR code module to load ('react-native-qrcode-svg' or 'react-qr-code')\n * @returns The QR code component or null if not available\n *\n * @example\n * ```tsx\n * const QRCodeComponent = loadQRCodeComponent('react-native-qrcode-svg');\n * if (QRCodeComponent) {\n *   return <QRCodeComponent value=\"https://example.com\" size={200} />;\n * }\n * ```\n */\nexport function loadQRCodeComponent(\n  moduleName: QRCodeModuleName | undefined\n): ComponentType<QRCodeProps> | null {\n  if (!moduleName) {\n    return null;\n  }\n\n  const mod = loadModule<any>(moduleName);\n  if (!mod) {\n    return null;\n  }\n\n  // react-native-qrcode-svg exports default\n  // react-qr-code exports default\n  return mod.default || null;\n}\n\n// ============================================================================\n// Clipboard Loading\n// ============================================================================\n\n/**\n * Clipboard operations interface\n */\nexport interface ClipboardOperations {\n  setString: (text: string) => Promise<void>;\n  getString: () => Promise<string>;\n}\n\n/**\n * Loads clipboard operations based on the specified module.\n *\n * @param moduleName - The clipboard module to use ('expo-clipboard' or '@react-native-clipboard/clipboard')\n * @returns Clipboard operations object or null if not available\n *\n * @example\n * ```tsx\n * const clipboard = loadClipboardOperations('expo-clipboard');\n * if (clipboard) {\n *   await clipboard.setString('Hello, world!');\n * }\n * ```\n */\nexport function loadClipboardOperations(\n  moduleName: ClipboardModuleName | undefined\n): ClipboardOperations | null {\n  if (!moduleName) {\n    return null;\n  }\n\n  const mod = loadModule<any>(moduleName);\n  if (!mod) {\n    return null;\n  }\n\n  if (moduleName === 'expo-clipboard') {\n    return {\n      setString: async (text: string) => {\n        await mod.setStringAsync(text);\n      },\n      getString: async () => {\n        return await mod.getStringAsync();\n      },\n    };\n  } else if (moduleName === '@react-native-clipboard/clipboard') {\n    const Clipboard = mod.default || mod;\n    return {\n      setString: async (text: string) => {\n        Clipboard.setString(text);\n      },\n      getString: async () => {\n        return await Clipboard.getString();\n      },\n    };\n  }\n\n  return null;\n}\n\n// ============================================================================\n// Gradient Parsing Utilities (re-exported from shared gradientUtils.ts)\n// ============================================================================\n\n// Re-export gradient utilities from the shared module to maintain backward compatibility\n// and provide a single source of truth for gradient parsing logic\nexport {\n  parseCSSLinearGradient,\n  angleToGradientPoints,\n  parseGradientFirstColor,\n  type ParsedGradient,\n  type GradientPoints,\n} from './gradientUtils';\n"]}

package/dist/utils/moduleLoaders.web.js

@@ -0,0 +1,72 @@
+"use strict";
+/**
+ * Web-Safe Module Loaders
+ *
+ * This module provides stub implementations for web environments.
+ * On web, we use CSS gradients directly, browser clipboard APIs, etc.
+ * All loader functions return null, and components use CSS/browser fallbacks.
+ *
+ * This file is used by InviteFormWeb (web entry point) to avoid
+ * importing native modules that would cause Next.js/webpack build errors.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseGradientFirstColor = exports.angleToGradientPoints = exports.parseCSSLinearGradient = void 0;
+exports.loadGradientComponent = loadGradientComponent;
+exports.loadHapticsTrigger = loadHapticsTrigger;
+exports.loadQRCodeComponent = loadQRCodeComponent;
+exports.loadClipboardOperations = loadClipboardOperations;
+// ============================================================================
+// Web-Safe Loader Stubs
+// ============================================================================
+/**
+ * Web-safe gradient loader - always returns null.
+ * On web, CSS gradients are used directly via the `background` style property.
+ */
+function loadGradientComponent(_moduleName) {
+    // Web uses CSS gradients directly, no component needed
+    return null;
+}
+/**
+ * Web-safe haptics loader - always returns null.
+ * Haptic feedback doesn't make sense on web.
+ */
+function loadHapticsTrigger(_moduleName) {
+    // No haptics on web
+    return null;
+}
+/**
+ * Web-safe QR code loader - returns null for native modules.
+ * For web, react-qr-code can be loaded if needed.
+ */
+function loadQRCodeComponent(moduleName) {
+    // Only react-qr-code works on web
+    if (moduleName === 'react-qr-code') {
+        try {
+            const mod = require('react-qr-code');
+            return mod.default || null;
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    // react-native-qrcode-svg is native-only
+    return null;
+}
+/**
+ * Web-safe clipboard loader - always returns null.
+ * Web uses navigator.clipboard API directly.
+ */
+function loadClipboardOperations(_moduleName) {
+    // Web uses navigator.clipboard directly
+    return null;
+}
+// ============================================================================
+// Gradient Parsing Utilities (re-exported from shared gradientUtils.ts)
+// ============================================================================
+// Re-export gradient utilities from the shared module
+// These are pure JS functions with no native dependencies, safe for web
+var gradientUtils_1 = require("./gradientUtils");
+Object.defineProperty(exports, "parseCSSLinearGradient", { enumerable: true, get: function () { return gradientUtils_1.parseCSSLinearGradient; } });
+Object.defineProperty(exports, "angleToGradientPoints", { enumerable: true, get: function () { return gradientUtils_1.angleToGradientPoints; } });
+Object.defineProperty(exports, "parseGradientFirstColor", { enumerable: true, get: function () { return gradientUtils_1.parseGradientFirstColor; } });
+//# sourceMappingURL=moduleLoaders.web.js.map

package/dist/utils/moduleLoaders.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moduleLoaders.web.js","sourceRoot":"","sources":["../../src/utils/moduleLoaders.web.ts"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;;;AA6DH,sDAKC;AAMD,gDAKC;AAMD,kDAcC;AAMD,0DAKC;AAvDD,+EAA+E;AAC/E,wBAAwB;AACxB,+EAA+E;AAE/E;;;GAGG;AACH,SAAgB,qBAAqB,CACnC,WAA2C;IAE3C,uDAAuD;IACvD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,SAAgB,kBAAkB,CAChC,WAA0C;IAE1C,oBAAoB;IACpB,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,SAAgB,mBAAmB,CACjC,UAAwC;IAExC,kCAAkC;IAClC,IAAI,UAAU,KAAK,eAAe,EAAE,CAAC;QACnC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;YACrC,OAAO,GAAG,CAAC,OAAO,IAAI,IAAI,CAAC;QAC7B,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IACD,yCAAyC;IACzC,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,SAAgB,uBAAuB,CACrC,WAA4C;IAE5C,wCAAwC;IACxC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,+EAA+E;AAC/E,wEAAwE;AACxE,+EAA+E;AAE/E,sDAAsD;AACtD,wEAAwE;AACxE,iDAIyB;AAHvB,uHAAA,sBAAsB,OAAA;AACtB,sHAAA,qBAAqB,OAAA;AACrB,wHAAA,uBAAuB,OAAA","sourcesContent":["/**\n * Web-Safe Module Loaders\n *\n * This module provides stub implementations for web environments.\n * On web, we use CSS gradients directly, browser clipboard APIs, etc.\n * All loader functions return null, and components use CSS/browser fallbacks.\n *\n * This file is used by InviteFormWeb (web entry point) to avoid\n * importing native modules that would cause Next.js/webpack build errors.\n */\n\nimport type { ComponentType } from 'react';\nimport type {\n  GradientModuleName,\n  HapticsModuleName,\n  QRCodeModuleName,\n  ClipboardModuleName,\n} from '../context/VortexModulesContext';\n\n// ============================================================================\n// Types (re-exported for consistency with moduleLoaders.ts)\n// ============================================================================\n\n/**\n * Props for gradient components\n */\nexport interface GradientProps {\n  colors: string[];\n  locations?: number[];\n  start?: { x: number; y: number };\n  end?: { x: number; y: number };\n  style?: any;\n  children?: React.ReactNode;\n}\n\n/**\n * Props for QR code components\n */\nexport interface QRCodeProps {\n  value: string;\n  size?: number;\n  color?: string;\n  backgroundColor?: string;\n  style?: any;\n}\n\n/**\n * Haptic feedback style\n */\nexport type HapticStyle = 'light' | 'medium' | 'heavy';\n\n/**\n * Clipboard operations interface\n */\nexport interface ClipboardOperations {\n  setString: (text: string) => Promise<void>;\n  getString: () => Promise<string>;\n}\n\n// Re-export gradient types from shared module\nexport type { ParsedGradient, GradientPoints } from './gradientUtils';\n\n// ============================================================================\n// Web-Safe Loader Stubs\n// ============================================================================\n\n/**\n * Web-safe gradient loader - always returns null.\n * On web, CSS gradients are used directly via the `background` style property.\n */\nexport function loadGradientComponent(\n  _moduleName: GradientModuleName | undefined\n): ComponentType<GradientProps> | null {\n  // Web uses CSS gradients directly, no component needed\n  return null;\n}\n\n/**\n * Web-safe haptics loader - always returns null.\n * Haptic feedback doesn't make sense on web.\n */\nexport function loadHapticsTrigger(\n  _moduleName: HapticsModuleName | undefined\n): ((style: HapticStyle) => Promise<void>) | null {\n  // No haptics on web\n  return null;\n}\n\n/**\n * Web-safe QR code loader - returns null for native modules.\n * For web, react-qr-code can be loaded if needed.\n */\nexport function loadQRCodeComponent(\n  moduleName: QRCodeModuleName | undefined\n): ComponentType<QRCodeProps> | null {\n  // Only react-qr-code works on web\n  if (moduleName === 'react-qr-code') {\n    try {\n      const mod = require('react-qr-code');\n      return mod.default || null;\n    } catch {\n      return null;\n    }\n  }\n  // react-native-qrcode-svg is native-only\n  return null;\n}\n\n/**\n * Web-safe clipboard loader - always returns null.\n * Web uses navigator.clipboard API directly.\n */\nexport function loadClipboardOperations(\n  _moduleName: ClipboardModuleName | undefined\n): ClipboardOperations | null {\n  // Web uses navigator.clipboard directly\n  return null;\n}\n\n// ============================================================================\n// Gradient Parsing Utilities (re-exported from shared gradientUtils.ts)\n// ============================================================================\n\n// Re-export gradient utilities from the shared module\n// These are pure JS functions with no native dependencies, safe for web\nexport {\n  parseCSSLinearGradient,\n  angleToGradientPoints,\n  parseGradientFirstColor,\n} from './gradientUtils';\n"]}

package/dist/utils/nameUtils.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inferNameFromEmail = inferNameFromEmail;
+/**
+ * Infers a human-readable name from an email address
+ * Handles common separators like dots, dashes, underscores
+ *
+ * @param email - The email address to extract a name from
+ * @returns A capitalized name or the email if extraction fails
+ *
+ * @example
+ * inferNameFromEmail('john@foo.com') // 'John'
+ * inferNameFromEmail('john.doe@example.com') // 'John Doe'
+ * inferNameFromEmail('mary-jane@test.com') // 'Mary Jane'
+ * inferNameFromEmail('bob_smith123@mail.com') // 'Bob Smith'
+ */
+function inferNameFromEmail(email) {
+    if (!email || typeof email !== 'string') {
+        return 'Unknown';
+    }
+    // Extract the local part (before @)
+    const localPart = email.split('@')[0];
+    if (!localPart) {
+        return 'Unknown';
+    }
+    // Split by common separators: dot, dash, underscore
+    const parts = localPart.split(/[._-]+/);
+    // Filter out empty parts and numbers-only parts
+    const nameParts = parts
+        .filter(part => part.length > 0)
+        .filter(part => !/^\d+$/.test(part)); // Remove pure number parts
+    if (nameParts.length === 0) {
+        // If nothing left after filtering, just capitalize the whole local part
+        return capitalizeWord(localPart);
+    }
+    // Capitalize each part and join with spaces
+    return nameParts.map(capitalizeWord).join(' ');
+}
+/**
+ * Capitalizes the first letter of a word and lowercases the rest
+ *
+ * @param word - The word to capitalize
+ * @returns The capitalized word
+ */
+function capitalizeWord(word) {
+    if (!word || word.length === 0) {
+        return word;
+    }
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+}
+//# sourceMappingURL=nameUtils.js.map

package/dist/utils/nameUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nameUtils.js","sourceRoot":"","sources":["../../src/utils/nameUtils.ts"],"names":[],"mappings":";;AAaA,gDA0BC;AAvCD;;;;;;;;;;;;GAYG;AACH,SAAgB,kBAAkB,CAAC,KAAa;IAC9C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QACxC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,oCAAoC;IACpC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,oDAAoD;IACpD,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAExC,gDAAgD;IAChD,MAAM,SAAS,GAAG,KAAK;SACpB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;SAC/B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,2BAA2B;IAEnE,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,wEAAwE;QACxE,OAAO,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,CAAC;IAED,4CAA4C;IAC5C,OAAO,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACjD,CAAC;AAED;;;;;GAKG;AACH,SAAS,cAAc,CAAC,IAAY;IAClC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACpE,CAAC","sourcesContent":["/**\n * Infers a human-readable name from an email address\n * Handles common separators like dots, dashes, underscores\n * \n * @param email - The email address to extract a name from\n * @returns A capitalized name or the email if extraction fails\n * \n * @example\n * inferNameFromEmail('john@foo.com') // 'John'\n * inferNameFromEmail('john.doe@example.com') // 'John Doe'\n * inferNameFromEmail('mary-jane@test.com') // 'Mary Jane'\n * inferNameFromEmail('bob_smith123@mail.com') // 'Bob Smith'\n */\nexport function inferNameFromEmail(email: string): string {\n  if (!email || typeof email !== 'string') {\n    return 'Unknown';\n  }\n\n  // Extract the local part (before @)\n  const localPart = email.split('@')[0];\n  if (!localPart) {\n    return 'Unknown';\n  }\n\n  // Split by common separators: dot, dash, underscore\n  const parts = localPart.split(/[._-]+/);\n\n  // Filter out empty parts and numbers-only parts\n  const nameParts = parts\n    .filter(part => part.length > 0)\n    .filter(part => !/^\\d+$/.test(part)); // Remove pure number parts\n\n  if (nameParts.length === 0) {\n    // If nothing left after filtering, just capitalize the whole local part\n    return capitalizeWord(localPart);\n  }\n\n  // Capitalize each part and join with spaces\n  return nameParts.map(capitalizeWord).join(' ');\n}\n\n/**\n * Capitalizes the first letter of a word and lowercases the rest\n * \n * @param word - The word to capitalize\n * @returns The capitalized word\n */\nfunction capitalizeWord(word: string): string {\n  if (!word || word.length === 0) {\n    return word;\n  }\n  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();\n}\n"]}

package/dist/utils/themeUtils.js

@@ -2,55 +2,140 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractThemeColors = extractThemeColors;
 exports.extractFeatureFlags = extractFeatureFlags;
+/**
+ * Extracts the color from a CSS border shorthand value (e.g., "1px solid #c4c4c4" → "#c4c4c4")
+ * Returns undefined if the value doesn't match the expected format
+ */
+function extractBorderColor(borderValue) {
+    if (!borderValue)
+        return undefined;
+    const parts = borderValue.trim().split(/\s+/);
+    // Expect exactly 3 parts: width, style, color (e.g., "1px solid #c4c4c4")
+    if (parts.length === 3) {
+        return parts[2];
+    }
+    return undefined;
+}
 /**
  * Extracts theme colors from widget configuration
  */
 function extractThemeColors(widgetConfiguration) {
     var _a, _b;
-    const options = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props;
-    const colors = ((_b = options === null || options === void 0 ? void 0 : options['vortex.theme.colors']) === null || _b === void 0 ? void 0 : _b.value) || [];
+    const props = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props;
+    const themeValue = (_b = props === null || props === void 0 ? void 0 : props['vortex.theme']) === null || _b === void 0 ? void 0 : _b.value;
+    // Normalize theme entries to an array of { key, value }
+    let entries = [];
+    if (Array.isArray(themeValue)) {
+        entries = themeValue;
+    }
+    else if (themeValue && Array.isArray(themeValue.options)) {
+        entries = themeValue.options;
+    }
+    else if (themeValue && typeof themeValue === 'object') {
+        // Fallback: treat object map as entries if present
+        entries = Object.keys(themeValue)
+            .filter((k) => k.startsWith('--'))
+            .map((k) => ({ key: k, value: String(themeValue[k]) }));
+    }
     const colorMap = {};
-    colors.forEach((color) => {
-        if (color.key && color.value) {
-            colorMap[color.key] = color.value;
+    entries.forEach((item) => {
+        const k = item === null || item === void 0 ? void 0 : item.key;
+        const v = item === null || item === void 0 ? void 0 : item.value;
+        if (typeof k === 'string' && typeof v === 'string') {
+            colorMap[k] = v;
         }
     });
     return {
-        containerBackground: colorMap['--container-background'] || '#ffffff',
-        containerForeground: colorMap['--container-foreground-color'] || '#666666',
-        containerBorder: colorMap['--container-border-color'] || '#c4c4c4',
-        primaryButtonBackground: colorMap['--primary-button-background'] || '#197af3',
-        primaryButtonForeground: colorMap['--primary-button-foreground-color'] || '#ffffff',
-        primaryButtonBorder: colorMap['--primary-button-border-color'] || '#000000',
-        secondaryButtonBackground: colorMap['--secondary-button-background'] || '#dfdfdf',
-        secondaryButtonForeground: colorMap['--secondary-button-foreground-color'] || '#000000',
-        secondaryButtonBorder: colorMap['--secondary-button-border-color'] || '#c4c4c4',
+        containerBackground: colorMap['--vrtx-root-background'] || colorMap['--color-background'] || '#ffffff',
+        containerForeground: colorMap['--vrtx-root-color'] || colorMap['--color-foreground'] || '#666666',
+        containerBorder: extractBorderColor(colorMap['--vrtx-root-border']) ||
+            extractBorderColor(colorMap['--vrtx-input-border']) ||
+            colorMap['--color-border'] ||
+            '#c4c4c4',
+        primaryButtonBackground: colorMap['--vrtx-submit-primary-background'] ||
+            colorMap['--vrtx-button-primary-background'] ||
+            colorMap['--color-primary-background'] ||
+            '#197af3',
+        primaryButtonForeground: colorMap['--vrtx-submit-primary-color'] ||
+            colorMap['--color-primary-foreground'] ||
+            '#ffffff',
+        primaryButtonBorder: extractBorderColor(colorMap['--vrtx-submit-primary-border']) ||
+            colorMap['--vrtx-submit-primary-border-color'] ||
+            colorMap['--vrtx-button-primary-border-color'] ||
+            colorMap['--color-primary-border'] ||
+            '#000000',
+        secondaryButtonBackground: colorMap['--vrtx-submit-secondary-background'] ||
+            colorMap['--vrtx-button-secondary-background'] ||
+            colorMap['--color-secondary-background'] ||
+            '#dfdfdf',
+        secondaryButtonForeground: colorMap['--vrtx-submit-secondary-color'] ||
+            colorMap['--vrtx-button-secondary-color'] ||
+            colorMap['--color-secondary-foreground'] ||
+            '#000000',
+        secondaryButtonBorder: extractBorderColor(colorMap['--vrtx-submit-secondary-border']) ||
+            colorMap['--vrtx-submit-secondary-border-color'] ||
+            colorMap['--vrtx-button-secondary-border-color'] ||
+            colorMap['--color-secondary-border'] ||
+            '#c4c4c4',
     };
 }
 /**
  * Extracts feature flags from widget configuration
  */
 function extractFeatureFlags(widgetConfiguration) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const features = Array.isArray((_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)
-        ? (_f = (_e = (_d = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e['vortex.components']) === null || _f === void 0 ? void 0 : _f.value
+    var _a, _b, _c, _d;
+    const props = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props;
+    const features = Array.isArray((_b = props === null || props === void 0 ? void 0 : props['vortex.components']) === null || _b === void 0 ? void 0 : _b.value)
+        ? props['vortex.components'].value
         : [];
-    const shareOptions = Array.isArray((_j = (_h = (_g = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h['vortex.components.share.options']) === null || _j === void 0 ? void 0 : _j.value)
-        ? (_m = (_l = (_k = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _k === void 0 ? void 0 : _k.props) === null || _l === void 0 ? void 0 : _l['vortex.components.share.options']) === null || _m === void 0 ? void 0 : _m.value
+    const shareOptions = Array.isArray((_c = props === null || props === void 0 ? void 0 : props['vortex.components.share.options']) === null || _c === void 0 ? void 0 : _c.value)
+        ? props['vortex.components.share.options'].value
         : [];
+    // Detect presence of blocks in the form tree (row/column/block with subtype)
+    const formValue = (_d = props === null || props === void 0 ? void 0 : props['vortex.components.form']) === null || _d === void 0 ? void 0 : _d.value;
+    let hasEmailBlock = false;
+    let hasShareBlock = false;
+    const traverse = (node) => {
+        if (!node)
+            return;
+        if (Array.isArray(node)) {
+            node.forEach(traverse);
+            return;
+        }
+        if (node.type === 'block') {
+            if (node.subtype === 'vrtx-email-invitations')
+                hasEmailBlock = true;
+            if (node.subtype === 'vrtx-share-options')
+                hasShareBlock = true;
+        }
+        if (node.children && node.children.length) {
+            node.children.forEach(traverse);
+        }
+    };
+    if (formValue === null || formValue === void 0 ? void 0 : formValue.root) {
+        traverse(formValue.root);
+    }
+    else if (Array.isArray(formValue)) {
+        traverse(formValue);
+    }
     return {
-        shareableLinks: features.includes("vortex.components.emailinvitations"),
-        emailInvitations: features.includes("vortex.components.share"),
-        shareEnabled: features.includes("vortex.components.share"),
-        shareOptionsCopyLink: shareOptions.includes("copyLink"),
-        shareOptionsFacebookMessenger: shareOptions.includes("facebookMessenger"),
-        shareOptionsInstagramDms: shareOptions.includes("instagramDms"),
-        shareOptionsLinkedInMessaging: shareOptions.includes("linkedInMessaging"),
-        shareOptionsNativeShareSheet: shareOptions.includes("nativeShareSheet"),
-        shareOptionsQrCode: shareOptions.includes("qrCode"), // Only true if specifically included
-        shareOptionsEmail: shareOptions.includes("email"),
-        shareOptionsSms: shareOptions.includes("sms"),
-        shareOptionsTwitterDms: shareOptions.includes("twitterDms"),
-        shareOptionsWhatsApp: shareOptions.includes("whatsApp"),
+        // Email invites if feature enabled or email block present
+        emailInvitations: features.includes('vortex.components.emailinvitations') || hasEmailBlock,
+        // Share section enabled if share block present or explicit feature (if ever provided)
+        shareEnabled: hasShareBlock || features.includes('vortex.components.share'),
+        shareableLinks: hasShareBlock || features.includes('vortex.components.share'),
+        shareOptionsCopyLink: shareOptions.includes('copyLink'),
+        shareOptionsFacebookMessenger: shareOptions.includes('facebookMessenger'),
+        shareOptionsInstagramDms: shareOptions.includes('instagramDms'),
+        shareOptionsLinkedInMessaging: shareOptions.includes('linkedInMessaging'),
+        shareOptionsNativeShareSheet: shareOptions.includes('nativeShareSheet'),
+        shareOptionsQrCode: shareOptions.includes('qrCode'),
+        shareOptionsSms: shareOptions.includes('sms'),
+        shareOptionsTwitterDms: shareOptions.includes('twitterDms'),
+        shareOptionsEmail: shareOptions.includes('email'),
+        shareOptionsWhatsApp: shareOptions.includes('whatsApp'),
+        shareOptionsLine: shareOptions.includes('line'),
+        shareOptionsOrder: shareOptions,
     };
 }
+//# sourceMappingURL=themeUtils.js.map