@cxpinsight/react-native 0.2.0

package/lib/setup/SetupController.js

@@ -0,0 +1,189 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeviceId = getDeviceId;
+exports.onSetupStateChange = onSetupStateChange;
+exports.getSetupState = getSetupState;
+exports.isSetupActive = isSetupActive;
+exports.claimSetup = claimSetup;
+exports.endSetup = endSetup;
+exports.restoreSetupState = restoreSetupState;
+exports.clearSetupState = clearSetupState;
+const react_native_1 = require("react-native");
+const network_1 = require("../core/network");
+const deviceInfo_1 = require("../core/deviceInfo");
+const storage = __importStar(require("../core/storage"));
+const DEVICE_ID_KEY = '@cxpinsight:deviceId';
+const SETUP_STATE_KEY = '@cxpinsight:setupState';
+let currentState = null;
+let heartbeatTimer = null;
+let listeners = [];
+let debugMode = false;
+function log(...args) {
+    if (debugMode)
+        console.log('[CXPinsight:Setup]', ...args);
+}
+/** Generate or retrieve a stable device ID */
+async function getDeviceId() {
+    const saved = await storage.get(DEVICE_ID_KEY);
+    if (saved)
+        return saved;
+    const device = (0, deviceInfo_1.getDeviceInfo)();
+    const id = [
+        'cxp_device',
+        react_native_1.Platform.OS,
+        device.osVersion,
+        Date.now().toString(36),
+        Math.random().toString(36).substring(2, 10),
+    ].join('_');
+    await storage.set(DEVICE_ID_KEY, id);
+    return id;
+}
+/** Subscribe to setup state changes */
+function onSetupStateChange(listener) {
+    listeners.push(listener);
+    return () => {
+        listeners = listeners.filter(l => l !== listener);
+    };
+}
+function notifyListeners(active) {
+    listeners.forEach(l => l(active));
+}
+/** Get current setup state */
+function getSetupState() {
+    return currentState;
+}
+function isSetupActive() {
+    return currentState?.active === true;
+}
+/** Claim a mobile setup session with a 6-digit code */
+async function claimSetup(siteId, setupCode, debug) {
+    debugMode = debug ?? false;
+    const deviceId = await getDeviceId();
+    log('Claiming setup:', { siteId, setupCode: '***', deviceId });
+    const result = await (0, network_1.sdkFetch)('POST', '/api/engagement/sites/claim-mobile-setup', {
+        siteId,
+        setupCode,
+        deviceId,
+    });
+    if (!result.success || !result.data) {
+        const errMsg = result.data?.error || result.error || 'Failed to claim setup';
+        log('Claim failed:', errMsg);
+        return { success: false, error: errMsg };
+    }
+    const data = result.data.data ?? result.data;
+    currentState = {
+        active: true,
+        siteId: data.siteId || siteId,
+        apiKey: data.apiKey || '',
+        deviceId,
+        expiresAt: data.expiresAt,
+        enteredAt: Date.now(),
+    };
+    await storage.set(SETUP_STATE_KEY, currentState);
+    startHeartbeat();
+    notifyListeners(true);
+    log('Setup claimed successfully, expires:', data.expiresAt);
+    return { success: true };
+}
+/** End the setup session */
+async function endSetup() {
+    if (!currentState)
+        return;
+    log('Ending setup session');
+    stopHeartbeat();
+    // Tell the server
+    (0, network_1.sdkFetch)('POST', `/api/engagement/sites/${currentState.siteId}/end-mobile-setup`).catch(() => { });
+    currentState = null;
+    await storage.remove(SETUP_STATE_KEY);
+    notifyListeners(false);
+}
+/** Heartbeat — validates session is still active every 30s */
+function startHeartbeat() {
+    stopHeartbeat();
+    heartbeatTimer = setInterval(async () => {
+        if (!currentState) {
+            stopHeartbeat();
+            return;
+        }
+        // Check expiry locally first
+        if (new Date(currentState.expiresAt).getTime() < Date.now()) {
+            log('Setup session expired locally');
+            await endSetup();
+            return;
+        }
+        // Validate with server
+        const result = await (0, network_1.sdkFetch)('POST', '/api/engagement/sites/validate-mobile-setup', {
+            siteId: currentState.siteId,
+            deviceId: currentState.deviceId,
+        });
+        const data = result.data?.data ?? result.data;
+        if (!data?.active) {
+            log('Setup session invalidated by server');
+            await endSetup();
+        }
+    }, 30000);
+}
+function stopHeartbeat() {
+    if (heartbeatTimer) {
+        clearInterval(heartbeatTimer);
+        heartbeatTimer = null;
+    }
+}
+/** Restore setup state on SDK init (in case app was restarted during setup) */
+async function restoreSetupState(debug) {
+    debugMode = debug ?? false;
+    const saved = await storage.get(SETUP_STATE_KEY);
+    if (!saved || !saved.active)
+        return;
+    // Check if still valid
+    if (new Date(saved.expiresAt).getTime() < Date.now()) {
+        log('Saved setup session expired, clearing');
+        await storage.remove(SETUP_STATE_KEY);
+        return;
+    }
+    currentState = saved;
+    startHeartbeat();
+    notifyListeners(true);
+    log('Restored active setup session');
+}
+/** Clear all setup state (called on SDK reset) */
+async function clearSetupState() {
+    stopHeartbeat();
+    currentState = null;
+    await storage.multiRemove([SETUP_STATE_KEY]);
+    notifyListeners(false);
+}
+//# sourceMappingURL=SetupController.js.map

package/lib/setup/SetupController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetupController.js","sourceRoot":"","sources":["../../src/setup/SetupController.ts"],"names":[],"mappings":"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"}

package/lib/setup/SetupOverlay.d.ts

@@ -0,0 +1,10 @@
+import type { ElementInfo } from './ElementIdentifier';
+interface SetupOverlayProps {
+    visible: boolean;
+    screenName: string;
+    elements: ElementInfo[];
+    onRefreshElements: () => void;
+}
+export declare function SetupOverlay({ visible, screenName, elements, onRefreshElements }: SetupOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SetupOverlay.d.ts.map

package/lib/setup/SetupOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetupOverlay.d.ts","sourceRoot":"","sources":["../../src/setup/SetupOverlay.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAA2B,MAAM,qBAAqB,CAAC;AAoBhF,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AA8CD,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE,iBAAiB,kDAsanG"}

package/lib/setup/SetupOverlay.js

@@ -0,0 +1,408 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetupOverlay = SetupOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const network_1 = require("../core/network");
+const SetupController_1 = require("./SetupController");
+const ElementIdentifier_1 = require("./ElementIdentifier");
+const ElementRegistry_1 = require("./ElementRegistry");
+const interactionObserver_1 = require("../instrumented/interactionObserver");
+const EVENT_TYPES = [
+    { value: 'tap', label: 'Tap' },
+    { value: 'long_press', label: 'Long Press' },
+    { value: 'input_focus', label: 'Input Focus' },
+    { value: 'input_blur', label: 'Input Blur' },
+    { value: 'value_change', label: 'Value Change' },
+    { value: 'custom', label: 'Custom' },
+];
+const CAPTURE_OPTIONS = [
+    { value: 'element_text', label: 'Element Text' },
+    { value: 'element_value', label: 'Element Value' },
+    { value: 'screen_context', label: 'Screen Context' },
+    { value: 'timestamp', label: 'Timestamp' },
+];
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+// ── FAB (Floating Action Button) ──
+// Simple TouchableOpacity positioned at bottom-right. No PanResponder to avoid
+// touch-stealing from the responder system.
+function FloatingButton({ onPress, visible }) {
+    if (!visible)
+        return null;
+    // Render FAB directly — no container view.
+    // position: 'absolute' makes it float over content.
+    // It's only 56x56px so it can't block the screen.
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.8, style: styles.fab, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fabText, children: "CXP" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fabBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fabBadgeText, children: "SETUP" }) })] }));
+}
+// ── Main Setup Overlay ──
+function SetupOverlay({ visible, screenName, elements, onRefreshElements }) {
+    const [panelOpen, setPanelOpen] = (0, react_1.useState)(false);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('elements');
+    const [configuredEvents, setConfiguredEvents] = (0, react_1.useState)([]);
+    const [selectedElement, setSelectedElement] = (0, react_1.useState)(null);
+    const [showEventForm, setShowEventForm] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [registryElements, setRegistryElements] = (0, react_1.useState)((0, ElementRegistry_1.getRegisteredElements)(screenName));
+    const [tappedHistory, setTappedHistory] = (0, react_1.useState)([]);
+    // Event form state
+    const [eventName, setEventName] = (0, react_1.useState)('');
+    const [eventType, setEventType] = (0, react_1.useState)('tap');
+    const [captureData, setCaptureData] = (0, react_1.useState)(['element_text']);
+    const [formTestID, setFormTestID] = (0, react_1.useState)('');
+    const [formAccessibilityLabel, setFormAccessibilityLabel] = (0, react_1.useState)('');
+    const state = (0, SetupController_1.getSetupState)();
+    // Listen for interactions from instrumented components
+    (0, react_1.useEffect)(() => {
+        if (!visible)
+            return;
+        const unsubscribe = (0, interactionObserver_1.setInteractionListener)((event) => {
+            // Add to tapped history (most recent first, max 30)
+            setTappedHistory(prev => {
+                const key = event.testID || event.accessibilityLabel || event.text;
+                const exists = prev.find(e => (e.testID || e.accessibilityLabel || e.text) === key);
+                if (exists) {
+                    // Move to top with fresh timestamp
+                    return [
+                        { ...event, tappedAt: Date.now() },
+                        ...prev.filter(e => e !== exists),
+                    ].slice(0, 30);
+                }
+                return [{ ...event, tappedAt: Date.now() }, ...prev].slice(0, 30);
+            });
+        });
+        return unsubscribe;
+    }, [visible]);
+    // Listen for registry changes (elements mounting/unmounting)
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = (0, ElementRegistry_1.onRegistryChange)(() => {
+            setRegistryElements((0, ElementRegistry_1.getRegisteredElements)(screenName));
+        });
+        return unsubscribe;
+    }, [screenName]);
+    // Update registry elements when screen changes
+    (0, react_1.useEffect)(() => {
+        setRegistryElements((0, ElementRegistry_1.getRegisteredElements)(screenName));
+    }, [screenName]);
+    // Merge registry elements with scanned elements (deduplicated)
+    const allElements = react_1.default.useMemo(() => {
+        const merged = [...registryElements];
+        const seen = new Set(registryElements.map(e => e.testID || e.accessibilityLabel || e.text || '').filter(Boolean));
+        for (const el of elements) {
+            const key = el.testID || el.accessibilityLabel || el.text || '';
+            if (key && !seen.has(key)) {
+                seen.add(key);
+                merged.push(el);
+            }
+        }
+        return merged;
+    }, [elements, registryElements]);
+    // Fetch configured events for this screen
+    const fetchEvents = (0, react_1.useCallback)(async () => {
+        if (!state?.siteId)
+            return;
+        try {
+            const result = await (0, network_1.sdkFetch)('GET', `/api/engagement/setup/mobile-element-configs?siteId=${state.siteId}&screenName=${encodeURIComponent(screenName)}`);
+            const data = result.data?.data ?? result.data ?? [];
+            setConfiguredEvents(Array.isArray(data) ? data : []);
+        }
+        catch (err) {
+            console.warn('[CXPinsight:Setup] Failed to fetch events:', err);
+        }
+    }, [state?.siteId, screenName]);
+    (0, react_1.useEffect)(() => {
+        if (panelOpen)
+            fetchEvents();
+    }, [panelOpen, fetchEvents]);
+    // Handle element selection
+    const handleSelectElement = (element) => {
+        setSelectedElement(element);
+        setEventName((0, ElementIdentifier_1.extractLabel)(element));
+        setEventType(element.elementType === 'text_input' ? 'input_focus' : 'tap');
+        setFormTestID(element.testID || '');
+        setFormAccessibilityLabel(element.accessibilityLabel || '');
+        // Close panel first, then show form — avoids stacking two Modals
+        setPanelOpen(false);
+        setTimeout(() => setShowEventForm(true), 300);
+    };
+    // Save event config
+    const handleSaveEvent = async () => {
+        if (!state?.siteId || !eventName.trim())
+            return;
+        if (!formTestID.trim() && !formAccessibilityLabel.trim()) {
+            react_native_1.Alert.alert('Identifier Required', 'Please enter a testID or accessibility label to identify the element.');
+            return;
+        }
+        setLoading(true);
+        try {
+            const identifier = {
+                testID: formTestID.trim() || undefined,
+                accessibilityLabel: formAccessibilityLabel.trim() || undefined,
+                hierarchyPath: selectedElement?.hierarchyPath || undefined,
+            };
+            await (0, network_1.sdkFetch)('POST', '/api/engagement/setup/mobile-element-configs', {
+                siteId: state.siteId,
+                name: eventName.trim(),
+                screenName,
+                elementIdentifier: identifier,
+                elementLabel: eventName.trim(),
+                elementType: selectedElement?.elementType || 'button',
+                eventType,
+                trigger: eventType,
+                captureData,
+                createdVia: 'sdk_setup',
+            });
+            setShowEventForm(false);
+            setSelectedElement(null);
+            setEventName('');
+            setFormTestID('');
+            setFormAccessibilityLabel('');
+            await fetchEvents();
+        }
+        catch (err) {
+            react_native_1.Alert.alert('Error', 'Failed to save event configuration');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    // Delete event config
+    const handleDeleteEvent = async (configId) => {
+        react_native_1.Alert.alert('Delete Event', 'Remove this event configuration?', [
+            { text: 'Cancel', style: 'cancel' },
+            {
+                text: 'Delete',
+                style: 'destructive',
+                onPress: async () => {
+                    await (0, network_1.sdkFetch)('DELETE', `/api/engagement/setup/mobile-element-configs/${configId}`);
+                    await fetchEvents();
+                },
+            },
+        ]);
+    };
+    // Handle exit setup
+    const handleExit = () => {
+        react_native_1.Alert.alert('Exit Setup', 'End the setup session?', [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Exit', style: 'destructive', onPress: () => (0, SetupController_1.endSetup)() },
+        ]);
+    };
+    if (!visible)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!panelOpen && !showEventForm && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fabAnchor, pointerEvents: "box-none", children: (0, jsx_runtime_1.jsx)(FloatingButton, { visible: true, onPress: () => setPanelOpen(true) }) })), panelOpen && (0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: true, animationType: "slide", transparent: true, statusBarTranslucent: true, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.panelBackdrop, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.panel, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.panelHeader, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.panelTitle, children: "CXP Setup Mode" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.panelSubtitle, children: screenName })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.panelHeaderActions, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handleExit, style: styles.exitButton, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.exitButtonText, children: "Exit" }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setPanelOpen(false), style: styles.closeButton, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.closeButtonText, children: "\u00D7" }) })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.tabs, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.tab, activeTab === 'elements' && styles.tabActive], onPress: () => setActiveTab('elements'), children: (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.tabText, activeTab === 'elements' && styles.tabTextActive], children: ["Tapped (", tappedHistory.length, ")"] }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.tab, activeTab === 'events' && styles.tabActive], onPress: () => setActiveTab('events'), children: (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.tabText, activeTab === 'events' && styles.tabTextActive], children: ["Events (", configuredEvents.length, ")"] }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.panelContent, children: activeTab === 'elements' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                                padding: 12,
+                                                marginBottom: 8,
+                                                backgroundColor: 'rgba(214,245,81,0.08)',
+                                                borderRadius: 8,
+                                                borderWidth: 1,
+                                                borderColor: 'rgba(214,245,81,0.2)',
+                                            }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: '#D6F551', fontSize: 13, fontWeight: '600', marginBottom: 4 }, children: "Close this panel and use your app" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: 'rgba(255,255,255,0.6)', fontSize: 12, lineHeight: 18 }, children: "Navigate to any screen and tap buttons, links, or inputs. Every interaction appears here. Then tap \"Track This\" to create an event." })] }), tappedHistory.length > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.refreshButton, { marginBottom: 8 }], onPress: () => setTappedHistory([]), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.refreshButtonText, children: "Clear History" }) })), tappedHistory.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.emptyState, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyText, children: "No interactions captured yet." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptySubtext, children: "Close this panel, navigate your app, and tap any button or input. Come back to see what was captured." })] })) : (tappedHistory.map((element, index) => {
+                                            const quality = (0, ElementIdentifier_1.identifierQuality)((0, ElementIdentifier_1.buildIdentifier)(element));
+                                            return ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.elementRow, onPress: () => handleSelectElement(element), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.elementIcon, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.elementIconText, children: element.elementType === 'button' ? '⬚' :
+                                                                element.elementType === 'text_input' ? '⌨' :
+                                                                    element.elementType === 'switch' ? '⇆' :
+                                                                        element.elementType === 'link' ? '🔗' : '◉' }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.elementInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.elementLabel, numberOfLines: 1, children: (0, ElementIdentifier_1.extractLabel)(element) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.elementMeta, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.elementType, children: element.elementType }), element.testID && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.testIdBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.testIdText, children: "testID" }) })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.qualityDot, {
+                                                                                backgroundColor: quality === 'excellent' ? '#10B981' :
+                                                                                    quality === 'good' ? '#F59E0B' :
+                                                                                        quality === 'fair' ? '#F97316' : '#EF4444'
+                                                                            }] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { alignItems: 'center', gap: 2 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: 10, color: 'rgba(255,255,255,0.3)' }, children: new Date(element.tappedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: 11, color: '#D6F551', fontWeight: '600' }, children: "Track" })] })] }, `${element.testID || element.hierarchyPath || index}`));
+                                        }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: configuredEvents.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.emptyState, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyText, children: "No events configured for this screen." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptySubtext, children: "Select an element from the Elements tab to create one." })] })) : (configuredEvents.map((event) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.eventRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.eventInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.eventName, children: event.name }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.eventMeta, children: [event.eventType, " \u00B7 ", event.elementType, " \u00B7 ", event.isActive ? 'Active' : 'Inactive'] })] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => handleDeleteEvent(event.configId), style: styles.deleteButton, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.deleteButtonText, children: "\u2715" }) })] }, event.configId)))) })) })] }) }) }), showEventForm && (0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: true, animationType: "slide", transparent: true, statusBarTranslucent: true, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.formBackdrop, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.formPanel, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.formTitle, children: "Configure Event" }), selectedElement && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.formSubtitle, children: [selectedElement.elementType, " \u2014 ", (0, ElementIdentifier_1.extractLabel)(selectedElement), selectedElement.testID && `\ntestID: ${selectedElement.testID}`] })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fieldLabel, children: "Event Name" }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.textInput, value: eventName, onChangeText: setEventName, placeholder: "e.g. Checkout Button Tap", placeholderTextColor: "#666" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fieldLabel, children: "Element testID" }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.textInput, value: formTestID, onChangeText: setFormTestID, placeholder: "e.g. checkout-btn, submit-order", placeholderTextColor: "#666", autoCapitalize: "none", autoCorrect: false }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fieldLabel, children: "Accessibility Label (alternative)" }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.textInput, value: formAccessibilityLabel, onChangeText: setFormAccessibilityLabel, placeholder: "e.g. Place Order, Submit", placeholderTextColor: "#666" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fieldLabel, children: "Event Type" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.chipRow, children: EVENT_TYPES.map(({ value, label }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.chip, eventType === value && styles.chipActive], onPress: () => setEventType(value), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.chipText, eventType === value && styles.chipTextActive], children: label }) }, value))) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fieldLabel, children: "Capture Data" }), CAPTURE_OPTIONS.map(({ value, label }) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.checkRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Switch, { value: captureData.includes(value), onValueChange: (on) => {
+                                            setCaptureData(prev => on ? [...prev, value] : prev.filter(v => v !== value));
+                                        }, trackColor: { true: '#D6F551', false: '#333' }, thumbColor: "#fff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.checkLabel, children: label })] }, value))), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.formActions, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.cancelButton, onPress: () => { setShowEventForm(false); setSelectedElement(null); setFormTestID(''); setFormAccessibilityLabel(''); }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cancelButtonText, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.saveButton, loading && { opacity: 0.6 }], onPress: handleSaveEvent, disabled: loading || !eventName.trim(), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.saveButtonText, children: loading ? 'Saving...' : 'Save Event' }) })] })] }) }) })] }));
+}
+// ── Styles ──
+const styles = react_native_1.StyleSheet.create({
+    // Zero-size anchor for FAB — no layout impact, just provides positioning context
+    fabAnchor: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    // FAB button
+    fab: {
+        position: 'absolute',
+        bottom: 160,
+        right: 16,
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        backgroundColor: '#D6F551',
+        justifyContent: 'center',
+        alignItems: 'center',
+        elevation: 8,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        zIndex: 999999,
+    },
+    fabText: { fontSize: 12, fontWeight: '900', color: '#030712', letterSpacing: 1 },
+    fabBadge: {
+        position: 'absolute',
+        top: -4,
+        right: -4,
+        backgroundColor: '#EF4444',
+        borderRadius: 6,
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+    },
+    fabBadgeText: { fontSize: 7, fontWeight: '700', color: '#fff', letterSpacing: 0.5 },
+    // Panel
+    panelBackdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' },
+    panel: {
+        maxHeight: SCREEN_HEIGHT * 0.8,
+        backgroundColor: '#111827',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        overflow: 'hidden',
+    },
+    panelHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(255,255,255,0.1)',
+    },
+    panelTitle: { fontSize: 16, fontWeight: '700', color: '#D6F551' },
+    panelSubtitle: { fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 2 },
+    panelHeaderActions: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    exitButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        backgroundColor: 'rgba(239,68,68,0.15)',
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: 'rgba(239,68,68,0.3)',
+    },
+    exitButtonText: { fontSize: 12, fontWeight: '600', color: '#EF4444' },
+    closeButton: { padding: 4 },
+    closeButtonText: { fontSize: 24, color: 'rgba(255,255,255,0.5)' },
+    // Tabs
+    tabs: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: 'rgba(255,255,255,0.1)' },
+    tab: { flex: 1, paddingVertical: 12, alignItems: 'center' },
+    tabActive: { borderBottomWidth: 2, borderBottomColor: '#D6F551' },
+    tabText: { fontSize: 13, fontWeight: '500', color: 'rgba(255,255,255,0.5)' },
+    tabTextActive: { color: '#D6F551' },
+    // Content
+    panelContent: { padding: 12 },
+    refreshButton: {
+        padding: 10,
+        marginBottom: 8,
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    refreshButtonText: { fontSize: 13, fontWeight: '500', color: '#D6F551' },
+    // Elements
+    elementRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        marginBottom: 4,
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.06)',
+    },
+    elementIcon: { width: 36, height: 36, borderRadius: 8, backgroundColor: 'rgba(214,245,81,0.1)', justifyContent: 'center', alignItems: 'center', marginRight: 12 },
+    elementIconText: { fontSize: 16 },
+    elementInfo: { flex: 1 },
+    elementLabel: { fontSize: 14, fontWeight: '500', color: '#fff' },
+    elementMeta: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4 },
+    elementType: { fontSize: 11, color: 'rgba(255,255,255,0.4)' },
+    testIdBadge: { backgroundColor: 'rgba(16,185,129,0.15)', paddingHorizontal: 6, paddingVertical: 1, borderRadius: 4 },
+    testIdText: { fontSize: 9, fontWeight: '600', color: '#10B981' },
+    qualityDot: { width: 6, height: 6, borderRadius: 3 },
+    addArrow: { fontSize: 20, color: '#D6F551', fontWeight: '300', marginLeft: 8 },
+    // Events
+    eventRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        marginBottom: 4,
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.06)',
+    },
+    eventInfo: { flex: 1 },
+    eventName: { fontSize: 14, fontWeight: '500', color: '#fff' },
+    eventMeta: { fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 2 },
+    deleteButton: { padding: 8 },
+    deleteButtonText: { fontSize: 14, color: '#EF4444' },
+    // Empty
+    emptyState: { paddingVertical: 40, alignItems: 'center' },
+    emptyText: { fontSize: 14, color: 'rgba(255,255,255,0.5)', textAlign: 'center' },
+    emptySubtext: { fontSize: 12, color: 'rgba(255,255,255,0.3)', textAlign: 'center', marginTop: 8, paddingHorizontal: 32 },
+    // Form
+    formBackdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', padding: 20 },
+    formPanel: { backgroundColor: '#111827', borderRadius: 16, padding: 20, maxHeight: SCREEN_HEIGHT * 0.75 },
+    formTitle: { fontSize: 18, fontWeight: '700', color: '#D6F551', marginBottom: 4 },
+    formSubtitle: { fontSize: 12, color: 'rgba(255,255,255,0.5)', marginBottom: 16 },
+    fieldLabel: { fontSize: 12, fontWeight: '600', color: 'rgba(255,255,255,0.7)', marginBottom: 6, marginTop: 12 },
+    textInput: {
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+        borderRadius: 8,
+        padding: 12,
+        color: '#fff',
+        fontSize: 14,
+    },
+    chipRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+    chip: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    chipActive: { backgroundColor: 'rgba(214,245,81,0.15)', borderColor: 'rgba(214,245,81,0.3)' },
+    chipText: { fontSize: 12, color: 'rgba(255,255,255,0.6)' },
+    chipTextActive: { color: '#D6F551', fontWeight: '600' },
+    checkRow: { flexDirection: 'row', alignItems: 'center', gap: 10, marginVertical: 4 },
+    checkLabel: { fontSize: 13, color: 'rgba(255,255,255,0.7)' },
+    formActions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 12, marginTop: 20 },
+    cancelButton: { paddingHorizontal: 16, paddingVertical: 10, borderRadius: 8 },
+    cancelButtonText: { fontSize: 14, color: 'rgba(255,255,255,0.5)' },
+    saveButton: { paddingHorizontal: 20, paddingVertical: 10, backgroundColor: '#D6F551', borderRadius: 8 },
+    saveButtonText: { fontSize: 14, fontWeight: '600', color: '#030712' },
+});
+//# sourceMappingURL=SetupOverlay.js.map