cuoral-ionic 0.0.9 → 0.1.0

package/dist/index.js

@@ -382,10 +382,11 @@ class CuoralBridge {
  * Handles full-screen modal display with floating button
  */
 class CuoralModal {
-    constructor(widgetUrl, showFloatingButton = true) {
+    constructor(widgetUrl, showFloatingButton = true, primaryColor = '#007AFF') {
         this.isOpen = false;
         this.widgetUrl = widgetUrl;
         this.showFloatingButton = showFloatingButton;
+        this.primaryColor = primaryColor;
     }
     /**
      * Update the widget URL (e.g., to include new session_id)
@@ -453,12 +454,12 @@ class CuoralModal {
             width: '56px',
             height: '56px',
             borderRadius: '50%',
-            backgroundColor: '#007AFF',
+            backgroundColor: this.primaryColor,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             cursor: 'pointer',
-            boxShadow: '0 4px 12px rgba(0, 122, 255, 0.4)',
+            boxShadow: `0 4px 12px ${this.primaryColor}66`, // 40% opacity
             zIndex: '999999',
             transition: 'transform 0.2s, box-shadow 0.2s'
         });
@@ -466,13 +467,13 @@ class CuoralModal {
         this.floatingButton.addEventListener('mouseenter', () => {
             if (this.floatingButton) {
                 this.floatingButton.style.transform = 'scale(1.1)';
-                this.floatingButton.style.boxShadow = '0 6px 16px rgba(0, 122, 255, 0.5)';
+                this.floatingButton.style.boxShadow = `0 6px 16px ${this.primaryColor}80`; // 50% opacity
             }
         });
         this.floatingButton.addEventListener('mouseleave', () => {
             if (this.floatingButton) {
                 this.floatingButton.style.transform = 'scale(1)';
-                this.floatingButton.style.boxShadow = '0 4px 12px rgba(0, 122, 255, 0.4)';
+                this.floatingButton.style.boxShadow = `0 4px 12px ${this.primaryColor}66`; // 40% opacity
             }
         });
         // Click to open modal
@@ -671,11 +672,13 @@ class CuoralIntelligence {
         // Session replay state
         this.rrwebStopFn = null;
         this.rrwebEvents = [];
+        this.rrwebEmit = null; // Store emit function for custom events
         this.customEvents = [];
         this.sessionReplayTimer = null;
         this.clickTimestamps = new Map();
         this.rageClickThreshold = 5; // 5 rapid clicks
         this.rageClickWindowMs = 2000; // Within 2 seconds
+        this.shadowDOMNodeMap = new Map(); // Map elements to unique IDs
         this.sessionId = sessionId;
     }
     /**
@@ -1185,27 +1188,65 @@ class CuoralIntelligence {
     }
     /**
      * Setup session replay with rrweb
+     * Captures everything for maximum replay fidelity
      */
     setupSessionReplay() {
         if (!this.sessionId) {
             console.warn('[Cuoral Intelligence] Session replay requires a session ID');
             return;
         }
-        // Start rrweb recording
+        // Start rrweb recording with aggressive capture settings
         this.rrwebStopFn = rrweb__namespace.record({
             emit: (event) => {
                 this.rrwebEvents.push(event);
+                this.rrwebEmit = this.rrwebEmit || ((e) => this.rrwebEvents.push(e)); // Store emit reference
             },
-            checkoutEveryNms: 60000, // Full snapshot every minute
+            // Take full snapshots more frequently to catch dynamic content
+            checkoutEveryNms: 30000, // Every 30 seconds (was 60s)
+            // Capture everything - minimize sampling throttling
             sampling: {
-                scroll: 150, // Throttle scroll events
-                media: 800,
-                input: 'last', // Only record final input value (privacy)
+                scroll: 50, // Capture scroll very frequently (was 150)
+                media: 200, // Capture media interactions frequently (was 800)
+                input: 'last', // Only record final input value (privacy for passwords)
+                mousemove: true, // Capture all mouse movements
+                mouseInteraction: true, // Capture all mouse interactions
+            },
+            // Privacy: Only mask sensitive inputs (passwords, credit cards)
+            // Everything else is captured for maximum replay fidelity
+            maskAllInputs: false, // Don't mask all inputs
+            maskInputOptions: {
+                password: true, // Mask password fields
+                email: false, // Capture emails
+                text: false, // Capture text inputs
+                textarea: false, // Capture textareas
+                select: false, // Capture select dropdowns
+                // Mask credit card patterns
+            },
+            // Capture all content types
+            recordCanvas: true, // Capture canvas elements (charts, games, etc.)
+            // Inline everything for perfect replay
+            inlineStylesheet: true, // Inline all external stylesheets
+            inlineImages: true, // Inline images as base64 (larger but more reliable)
+            collectFonts: true, // Capture custom fonts
+            // Block/ignore classes - customers can add these to sensitive elements
+            blockClass: 'cuoral-block', // Add to elements that should be blocked (replaced with placeholder)
+            ignoreClass: 'cuoral-ignore', // Add to elements that should be ignored (not captured)
+            // Capture mutations aggressively
+            slimDOMOptions: {
+                // Don't slim anything - capture full fidelity
+                script: false, // Keep scripts
+                comment: false, // Keep comments
+                headFavicon: false, // Keep favicons
+                headWhitespace: false, // Keep whitespace
+                headMetaSocial: false, // Keep meta tags
+                headMetaRobots: false, // Keep robots meta
+                headMetaHttpEquiv: false, // Keep http-equiv
+                headMetaAuthorship: false, // Keep authorship
+                headMetaDescKeywords: false, // Keep description/keywords
             },
-            maskAllInputs: true, // Mask sensitive inputs (privacy)
-            blockClass: 'cuoral-block',
-            ignoreClass: 'cuoral-ignore',
         });
+        // Setup Shadow DOM observer to capture Ionic components
+        this.setupShadowDOMObserver();
         // Setup custom event tracking
         this.setupClickTracking();
         this.setupScrollTracking();
@@ -1357,6 +1398,159 @@ class CuoralIntelligence {
             });
         });
     }
+    /**
+     * Setup Shadow DOM observer to capture Ionic component content
+     * Emits custom rrweb events with Shadow DOM snapshots for viewer reconstruction
+     */
+    setupShadowDOMObserver() {
+        let shadowNodeIdCounter = 1;
+        let captureTimeout = null;
+        const captureShadowDOM = (immediate = false) => {
+            // Debounce rapid calls (e.g., during scroll)
+            if (!immediate && captureTimeout) {
+                clearTimeout(captureTimeout);
+            }
+            const doCapture = () => {
+                if (!this.rrwebEmit)
+                    return;
+                const shadowDOMData = [];
+                const elementsWithShadowDOM = document.querySelectorAll('*');
+                elementsWithShadowDOM.forEach((element) => {
+                    if (element.shadowRoot) {
+                        try {
+                            // Assign unique ID to element if it doesn't have one
+                            if (!this.shadowDOMNodeMap.has(element)) {
+                                this.shadowDOMNodeMap.set(element, shadowNodeIdCounter++);
+                            }
+                            const nodeId = this.shadowDOMNodeMap.get(element);
+                            const tagName = element.tagName.toLowerCase();
+                            // Capture Shadow DOM HTML
+                            const shadowHTML = element.shadowRoot.innerHTML;
+                            // Capture ALL styles from Shadow DOM
+                            const styleSheets = [];
+                            // 1. Capture inline <style> tags
+                            const shadowStyles = element.shadowRoot.querySelectorAll('style');
+                            shadowStyles.forEach((styleEl) => {
+                                if (styleEl.textContent) {
+                                    styleSheets.push(styleEl.textContent);
+                                }
+                            });
+                            // 2. Capture adoptedStyleSheets (modern CSS API)
+                            if (element.shadowRoot.adoptedStyleSheets) {
+                                try {
+                                    element.shadowRoot.adoptedStyleSheets.forEach((sheet) => {
+                                        try {
+                                            const rules = Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
+                                            if (rules)
+                                                styleSheets.push(rules);
+                                        }
+                                        catch (e) {
+                                            // CORS blocked stylesheet
+                                        }
+                                    });
+                                }
+                                catch (e) {
+                                    // Browser doesn't support adoptedStyleSheets
+                                }
+                            }
+                            // 3. Capture external <link> stylesheets in Shadow DOM
+                            const shadowLinks = element.shadowRoot.querySelectorAll('link[rel="stylesheet"]');
+                            shadowLinks.forEach((linkEl) => {
+                                const href = linkEl.href;
+                                if (href) {
+                                    // Store link href so dashboard can also load it
+                                    styleSheets.push(`/* @import url("${href}"); */`);
+                                }
+                            });
+                            // 4. Capture CSS custom properties from host element
+                            // Ionic components use CSS variables extensively (--ion-color-*, etc.)
+                            const computedStyle = window.getComputedStyle(element);
+                            const cssVariables = [];
+                            // Get all CSS custom properties from host
+                            for (let i = 0; i < computedStyle.length; i++) {
+                                const propertyName = computedStyle[i];
+                                if (propertyName.startsWith('--')) {
+                                    const propertyValue = computedStyle.getPropertyValue(propertyName).trim();
+                                    if (propertyValue) {
+                                        cssVariables.push(`${propertyName}: ${propertyValue};`);
+                                    }
+                                }
+                            }
+                            // Add CSS variables as a :host rule
+                            if (cssVariables.length > 0) {
+                                styleSheets.push(`:host { ${cssVariables.join(' ')} }`);
+                            }
+                            // Get element's CSS selector for reconstruction
+                            const selector = this.getElementSelector(element);
+                            // Capture element attributes (Ionic uses color="primary", mode="ios", etc.)
+                            const attributes = {};
+                            for (let i = 0; i < element.attributes.length; i++) {
+                                const attr = element.attributes[i];
+                                // Skip internal attributes
+                                if (!attr.name.startsWith('data-cuoral') && !attr.name.startsWith('ng-')) {
+                                    attributes[attr.name] = attr.value;
+                                }
+                            }
+                            // Create Shadow DOM snapshot
+                            shadowDOMData.push({
+                                nodeId,
+                                tagName,
+                                selector,
+                                attributes, // NEW: Include element attributes
+                                shadowHTML,
+                                styleSheets,
+                                timestamp: Date.now(),
+                            });
+                            // Also set data attribute as fallback
+                            element.setAttribute('data-cuoral-shadow-id', String(nodeId));
+                        }
+                        catch (error) {
+                            // Shadow DOM might be closed
+                            console.warn('[Cuoral Intelligence] Failed to capture Shadow DOM:', error);
+                        }
+                    }
+                });
+                // Emit custom event with Shadow DOM data
+                if (shadowDOMData.length > 0 && this.rrwebEmit) {
+                    this.rrwebEmit({
+                        type: 5, // CustomEvent type in rrweb
+                        data: {
+                            tag: 'cuoral-shadow-dom',
+                            payload: {
+                                shadows: shadowDOMData,
+                                url: window.location.href,
+                            },
+                        },
+                        timestamp: Date.now(),
+                    });
+                    console.log(`[Cuoral Intelligence] Captured ${shadowDOMData.length} Shadow DOM elements`);
+                }
+            };
+            if (immediate) {
+                doCapture();
+            }
+            else {
+                // Debounce: wait 500ms after last call
+                captureTimeout = setTimeout(doCapture, 500);
+            }
+        };
+        // Run immediately on init
+        captureShadowDOM(true);
+        // Observe DOM mutations to catch dynamically added Shadow DOM elements
+        const observer = new MutationObserver(() => {
+            captureShadowDOM(false); // Debounced
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // Capture on scroll events (debounced)
+        window.addEventListener('scroll', () => captureShadowDOM(false), { passive: true });
+        // Also listen for Ionic scroll events
+        document.addEventListener('ionScroll', () => captureShadowDOM(false), { passive: true });
+        // Periodic capture as fallback (every 5 seconds now, since we have scroll capture)
+        setInterval(() => captureShadowDOM(true), 5000);
+    }
     /**
      * Track custom business events (flows, features, etc.)
      */
@@ -1485,10 +1679,7 @@ class Cuoral {
         if (options.lastName)
             params.set('last_name', options.lastName);
         const widgetUrl = `${baseUrl}?${params.toString()}`;
-        // Initialize modal if enabled
-        if (this.options.useModal) {
-            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
-        }
+        // Note: Modal will be created in initialize() after fetching primary color from backend
         // Initialize bridge and recorder
         this.bridge = new CuoralBridge({
             widgetUrl,
@@ -1509,6 +1700,7 @@ class Cuoral {
      */
     async initialize() {
         // Fetch session configuration and initialize intelligence if enabled by backend
+        // This also fetches the organization's primary color
         await this.initializeIntelligence();
         console.log('[Cuoral] Initialize - Session ID:', localStorage.getItem('__x_loadID'));
         // Setup localStorage listener to detect when widget changes session
@@ -1517,7 +1709,7 @@ class Cuoral {
         // Recreate modal if it was destroyed (e.g., after clearSession)
         if (this.options.useModal && !this.modal) {
             const widgetUrl = this.getWidgetUrl();
-            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
+            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton, this.options.primaryColor);
         }
         // Update modal URL with session ID
         if (this.modal) {
@@ -1542,6 +1734,15 @@ class Cuoral {
             }
             // Fetch session configuration
             const config = await this.fetchSessionConfiguration(sessionId);
+            // Extract organization's primary color from config if available
+            if (!this.options.primaryColor && config?.color) {
+                this.options.primaryColor = config.color;
+                console.log('[Cuoral] Using organization primary color:', this.options.primaryColor);
+            }
+            else if (!this.options.primaryColor) {
+                this.options.primaryColor = '#007AFF';
+                console.log('[Cuoral] Using default primary color');
+            }
             // If session was invalid/expired, try to initiate a new one
             if (!config && !localStorage.getItem('__x_loadID')) {
                 sessionId = await this.initiateSession();

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/intelligence.d.ts

@@ -11,11 +11,13 @@ export declare class CuoralIntelligence {
     private originalXMLHttpRequest;
     private rrwebStopFn;
     private rrwebEvents;
+    private rrwebEmit;
     private customEvents;
     private sessionReplayTimer;
     private clickTimestamps;
     private rageClickThreshold;
     private rageClickWindowMs;
+    private shadowDOMNodeMap;
     constructor(sessionId: string);
     /**
      * Update the session ID (e.g., when user logs in)
@@ -75,6 +77,7 @@ export declare class CuoralIntelligence {
     private setupNativeErrorCapture;
     /**
      * Setup session replay with rrweb
+     * Captures everything for maximum replay fidelity
      */
     private setupSessionReplay;
     /**
@@ -89,6 +92,11 @@ export declare class CuoralIntelligence {
      * Setup form tracking
      */
     private setupFormTracking;
+    /**
+     * Setup Shadow DOM observer to capture Ionic component content
+     * Emits custom rrweb events with Shadow DOM snapshots for viewer reconstruction
+     */
+    private setupShadowDOMObserver;
     /**
      * Track custom business events (flows, features, etc.)
      */

package/dist/intelligence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"intelligence.d.ts","sourceRoot":"","sources":["../src/intelligence.ts"],"names":[],"mappings":"AA0EA,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAWZ;IAEF,OAAO,CAAC,MAAM,CAKZ;IAEF,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,qBAAqB,CAAc;IAC3C,OAAO,CAAC,kBAAkB,CAAM;IAChC,OAAO,CAAC,aAAa,CAAa;IAGlC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,sBAAsB,CAAa;IAG3C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,YAAY,CAAyB;IAC7C,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,eAAe,CAAoC;IAC3D,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,iBAAiB,CAAQ;gBAErB,SAAS,EAAE,MAAM;IAI7B;;OAEG;IACI,eAAe,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAkBlD;;OAEG;IACI,IAAI,IAAI,IAAI;IAgBnB;;OAEG;IACI,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAc1D;;OAEG;IACI,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAS7E;;OAEG;IACI,KAAK,IAAI,IAAI;IAMpB;;OAEG;IACI,OAAO,IAAI,IAAI;IA0CtB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAoFjC;;OAEG;IACH,OAAO,CAAC,sBAAsB;IA8H9B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAgB7B;;OAEG;IACH,OAAO,CAAC,YAAY;IAyCpB;;OAEG;IACH,OAAO,CAAC,UAAU;IAqFlB;;OAEG;YACW,aAAa;IAiC3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAgB/B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAiC1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoD1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwC3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA6DzB;;OAEG;IACI,gBAAgB,CACrB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACpC,eAAe,CAAC,EAAE,MAAM,EACxB,WAAW,CAAC,EAAE,MAAM,GACnB,IAAI;IAgBP;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAwB/B;;OAEG;YACW,sBAAsB;IAkBpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,OAAO,CAAC,WAAW;CAOpB"}
+{"version":3,"file":"intelligence.d.ts","sourceRoot":"","sources":["../src/intelligence.ts"],"names":[],"mappings":"AA0EA,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAWZ;IAEF,OAAO,CAAC,MAAM,CAKZ;IAEF,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,qBAAqB,CAAc;IAC3C,OAAO,CAAC,kBAAkB,CAAM;IAChC,OAAO,CAAC,aAAa,CAAa;IAGlC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,sBAAsB,CAAa;IAG3C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAuC;IACxD,OAAO,CAAC,YAAY,CAAyB;IAC7C,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,eAAe,CAAoC;IAC3D,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,iBAAiB,CAAQ;IACjC,OAAO,CAAC,gBAAgB,CAAmC;gBAE/C,SAAS,EAAE,MAAM;IAI7B;;OAEG;IACI,eAAe,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAkBlD;;OAEG;IACI,IAAI,IAAI,IAAI;IAgBnB;;OAEG;IACI,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAc1D;;OAEG;IACI,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAS7E;;OAEG;IACI,KAAK,IAAI,IAAI;IAMpB;;OAEG;IACI,OAAO,IAAI,IAAI;IA0CtB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAoFjC;;OAEG;IACH,OAAO,CAAC,sBAAsB;IA8H9B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAgB7B;;OAEG;IACH,OAAO,CAAC,YAAY;IAyCpB;;OAEG;IACH,OAAO,CAAC,UAAU;IAqFlB;;OAEG;YACW,aAAa;IAiC3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAgB/B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IA8E1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoD1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwC3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA6DzB;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IA2K9B;;OAEG;IACI,gBAAgB,CACrB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACpC,eAAe,CAAC,EAAE,MAAM,EACxB,WAAW,CAAC,EAAE,MAAM,GACnB,IAAI;IAgBP;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAwB/B;;OAEG;YACW,sBAAsB;IAkBpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,OAAO,CAAC,WAAW;CAOpB"}

package/dist/intelligence.js

@@ -35,11 +35,13 @@ export class CuoralIntelligence {
         // Session replay state
         this.rrwebStopFn = null;
         this.rrwebEvents = [];
+        this.rrwebEmit = null; // Store emit function for custom events
         this.customEvents = [];
         this.sessionReplayTimer = null;
         this.clickTimestamps = new Map();
         this.rageClickThreshold = 5; // 5 rapid clicks
         this.rageClickWindowMs = 2000; // Within 2 seconds
+        this.shadowDOMNodeMap = new Map(); // Map elements to unique IDs
         this.sessionId = sessionId;
     }
     /**
@@ -549,27 +551,65 @@ export class CuoralIntelligence {
     }
     /**
      * Setup session replay with rrweb
+     * Captures everything for maximum replay fidelity
      */
     setupSessionReplay() {
         if (!this.sessionId) {
             console.warn('[Cuoral Intelligence] Session replay requires a session ID');
             return;
         }
-        // Start rrweb recording
+        // Start rrweb recording with aggressive capture settings
         this.rrwebStopFn = rrweb.record({
             emit: (event) => {
                 this.rrwebEvents.push(event);
+                this.rrwebEmit = this.rrwebEmit || ((e) => this.rrwebEvents.push(e)); // Store emit reference
             },
-            checkoutEveryNms: 60000, // Full snapshot every minute
+            // Take full snapshots more frequently to catch dynamic content
+            checkoutEveryNms: 30000, // Every 30 seconds (was 60s)
+            // Capture everything - minimize sampling throttling
             sampling: {
-                scroll: 150, // Throttle scroll events
-                media: 800,
-                input: 'last', // Only record final input value (privacy)
+                scroll: 50, // Capture scroll very frequently (was 150)
+                media: 200, // Capture media interactions frequently (was 800)
+                input: 'last', // Only record final input value (privacy for passwords)
+                mousemove: true, // Capture all mouse movements
+                mouseInteraction: true, // Capture all mouse interactions
+            },
+            // Privacy: Only mask sensitive inputs (passwords, credit cards)
+            // Everything else is captured for maximum replay fidelity
+            maskAllInputs: false, // Don't mask all inputs
+            maskInputOptions: {
+                password: true, // Mask password fields
+                email: false, // Capture emails
+                text: false, // Capture text inputs
+                textarea: false, // Capture textareas
+                select: false, // Capture select dropdowns
+                // Mask credit card patterns
+            },
+            // Capture all content types
+            recordCanvas: true, // Capture canvas elements (charts, games, etc.)
+            // Inline everything for perfect replay
+            inlineStylesheet: true, // Inline all external stylesheets
+            inlineImages: true, // Inline images as base64 (larger but more reliable)
+            collectFonts: true, // Capture custom fonts
+            // Block/ignore classes - customers can add these to sensitive elements
+            blockClass: 'cuoral-block', // Add to elements that should be blocked (replaced with placeholder)
+            ignoreClass: 'cuoral-ignore', // Add to elements that should be ignored (not captured)
+            // Capture mutations aggressively
+            slimDOMOptions: {
+                // Don't slim anything - capture full fidelity
+                script: false, // Keep scripts
+                comment: false, // Keep comments
+                headFavicon: false, // Keep favicons
+                headWhitespace: false, // Keep whitespace
+                headMetaSocial: false, // Keep meta tags
+                headMetaRobots: false, // Keep robots meta
+                headMetaHttpEquiv: false, // Keep http-equiv
+                headMetaAuthorship: false, // Keep authorship
+                headMetaDescKeywords: false, // Keep description/keywords
             },
-            maskAllInputs: true, // Mask sensitive inputs (privacy)
-            blockClass: 'cuoral-block',
-            ignoreClass: 'cuoral-ignore',
         });
+        // Setup Shadow DOM observer to capture Ionic components
+        this.setupShadowDOMObserver();
         // Setup custom event tracking
         this.setupClickTracking();
         this.setupScrollTracking();
@@ -721,6 +761,159 @@ export class CuoralIntelligence {
             });
         });
     }
+    /**
+     * Setup Shadow DOM observer to capture Ionic component content
+     * Emits custom rrweb events with Shadow DOM snapshots for viewer reconstruction
+     */
+    setupShadowDOMObserver() {
+        let shadowNodeIdCounter = 1;
+        let captureTimeout = null;
+        const captureShadowDOM = (immediate = false) => {
+            // Debounce rapid calls (e.g., during scroll)
+            if (!immediate && captureTimeout) {
+                clearTimeout(captureTimeout);
+            }
+            const doCapture = () => {
+                if (!this.rrwebEmit)
+                    return;
+                const shadowDOMData = [];
+                const elementsWithShadowDOM = document.querySelectorAll('*');
+                elementsWithShadowDOM.forEach((element) => {
+                    if (element.shadowRoot) {
+                        try {
+                            // Assign unique ID to element if it doesn't have one
+                            if (!this.shadowDOMNodeMap.has(element)) {
+                                this.shadowDOMNodeMap.set(element, shadowNodeIdCounter++);
+                            }
+                            const nodeId = this.shadowDOMNodeMap.get(element);
+                            const tagName = element.tagName.toLowerCase();
+                            // Capture Shadow DOM HTML
+                            const shadowHTML = element.shadowRoot.innerHTML;
+                            // Capture ALL styles from Shadow DOM
+                            const styleSheets = [];
+                            // 1. Capture inline <style> tags
+                            const shadowStyles = element.shadowRoot.querySelectorAll('style');
+                            shadowStyles.forEach((styleEl) => {
+                                if (styleEl.textContent) {
+                                    styleSheets.push(styleEl.textContent);
+                                }
+                            });
+                            // 2. Capture adoptedStyleSheets (modern CSS API)
+                            if (element.shadowRoot.adoptedStyleSheets) {
+                                try {
+                                    element.shadowRoot.adoptedStyleSheets.forEach((sheet) => {
+                                        try {
+                                            const rules = Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
+                                            if (rules)
+                                                styleSheets.push(rules);
+                                        }
+                                        catch (e) {
+                                            // CORS blocked stylesheet
+                                        }
+                                    });
+                                }
+                                catch (e) {
+                                    // Browser doesn't support adoptedStyleSheets
+                                }
+                            }
+                            // 3. Capture external <link> stylesheets in Shadow DOM
+                            const shadowLinks = element.shadowRoot.querySelectorAll('link[rel="stylesheet"]');
+                            shadowLinks.forEach((linkEl) => {
+                                const href = linkEl.href;
+                                if (href) {
+                                    // Store link href so dashboard can also load it
+                                    styleSheets.push(`/* @import url("${href}"); */`);
+                                }
+                            });
+                            // 4. Capture CSS custom properties from host element
+                            // Ionic components use CSS variables extensively (--ion-color-*, etc.)
+                            const computedStyle = window.getComputedStyle(element);
+                            const cssVariables = [];
+                            // Get all CSS custom properties from host
+                            for (let i = 0; i < computedStyle.length; i++) {
+                                const propertyName = computedStyle[i];
+                                if (propertyName.startsWith('--')) {
+                                    const propertyValue = computedStyle.getPropertyValue(propertyName).trim();
+                                    if (propertyValue) {
+                                        cssVariables.push(`${propertyName}: ${propertyValue};`);
+                                    }
+                                }
+                            }
+                            // Add CSS variables as a :host rule
+                            if (cssVariables.length > 0) {
+                                styleSheets.push(`:host { ${cssVariables.join(' ')} }`);
+                            }
+                            // Get element's CSS selector for reconstruction
+                            const selector = this.getElementSelector(element);
+                            // Capture element attributes (Ionic uses color="primary", mode="ios", etc.)
+                            const attributes = {};
+                            for (let i = 0; i < element.attributes.length; i++) {
+                                const attr = element.attributes[i];
+                                // Skip internal attributes
+                                if (!attr.name.startsWith('data-cuoral') && !attr.name.startsWith('ng-')) {
+                                    attributes[attr.name] = attr.value;
+                                }
+                            }
+                            // Create Shadow DOM snapshot
+                            shadowDOMData.push({
+                                nodeId,
+                                tagName,
+                                selector,
+                                attributes, // NEW: Include element attributes
+                                shadowHTML,
+                                styleSheets,
+                                timestamp: Date.now(),
+                            });
+                            // Also set data attribute as fallback
+                            element.setAttribute('data-cuoral-shadow-id', String(nodeId));
+                        }
+                        catch (error) {
+                            // Shadow DOM might be closed
+                            console.warn('[Cuoral Intelligence] Failed to capture Shadow DOM:', error);
+                        }
+                    }
+                });
+                // Emit custom event with Shadow DOM data
+                if (shadowDOMData.length > 0 && this.rrwebEmit) {
+                    this.rrwebEmit({
+                        type: 5, // CustomEvent type in rrweb
+                        data: {
+                            tag: 'cuoral-shadow-dom',
+                            payload: {
+                                shadows: shadowDOMData,
+                                url: window.location.href,
+                            },
+                        },
+                        timestamp: Date.now(),
+                    });
+                    console.log(`[Cuoral Intelligence] Captured ${shadowDOMData.length} Shadow DOM elements`);
+                }
+            };
+            if (immediate) {
+                doCapture();
+            }
+            else {
+                // Debounce: wait 500ms after last call
+                captureTimeout = setTimeout(doCapture, 500);
+            }
+        };
+        // Run immediately on init
+        captureShadowDOM(true);
+        // Observe DOM mutations to catch dynamically added Shadow DOM elements
+        const observer = new MutationObserver(() => {
+            captureShadowDOM(false); // Debounced
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // Capture on scroll events (debounced)
+        window.addEventListener('scroll', () => captureShadowDOM(false), { passive: true });
+        // Also listen for Ionic scroll events
+        document.addEventListener('ionScroll', () => captureShadowDOM(false), { passive: true });
+        // Periodic capture as fallback (every 5 seconds now, since we have scroll capture)
+        setInterval(() => captureShadowDOM(true), 5000);
+    }
     /**
      * Track custom business events (flows, features, etc.)
      */

package/dist/modal.d.ts

@@ -9,8 +9,9 @@ export declare class CuoralModal {
     private isOpen;
     private widgetUrl;
     private showFloatingButton;
+    private primaryColor;
     private lastLoadedUrl?;
-    constructor(widgetUrl: string, showFloatingButton?: boolean);
+    constructor(widgetUrl: string, showFloatingButton?: boolean, primaryColor?: string);
     /**
      * Update the widget URL (e.g., to include new session_id)
      * Forces complete iframe recreation if URL changed to clear all cached state

package/dist/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/modal.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,YAAY,CAAC,CAAiB;IACtC,OAAO,CAAC,aAAa,CAAC,CAAoB;IAC1C,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,kBAAkB,CAAU;IACpC,OAAO,CAAC,aAAa,CAAC,CAAS;gBAEnB,SAAS,EAAE,MAAM,EAAE,kBAAkB,UAAO;IAKxD;;;OAGG;IACI,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IA4C5C;;OAEG;IACI,UAAU,IAAI,IAAI;IAOzB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAkD5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAmGnB;;OAEG;IACI,IAAI,IAAI,IAAI;IAsBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAqBpB;;OAEG;IACI,WAAW,IAAI,OAAO;IAI7B;;OAEG;IACI,OAAO,IAAI,IAAI;IAUtB;;OAEG;IACI,SAAS,IAAI,iBAAiB,GAAG,SAAS;CAGlD"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/modal.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,YAAY,CAAC,CAAiB;IACtC,OAAO,CAAC,aAAa,CAAC,CAAoB;IAC1C,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,kBAAkB,CAAU;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,aAAa,CAAC,CAAS;gBAEnB,SAAS,EAAE,MAAM,EAAE,kBAAkB,UAAO,EAAE,YAAY,SAAY;IAMlF;;;OAGG;IACI,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IA4C5C;;OAEG;IACI,UAAU,IAAI,IAAI;IAOzB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAkD5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAmGnB;;OAEG;IACI,IAAI,IAAI,IAAI;IAsBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAqBpB;;OAEG;IACI,WAAW,IAAI,OAAO;IAI7B;;OAEG;IACI,OAAO,IAAI,IAAI;IAUtB;;OAEG;IACI,SAAS,IAAI,iBAAiB,GAAG,SAAS;CAGlD"}