@absmartly/sdk-plugins 1.1.2 → 1.2.1

package/es/core/DOMChangesPluginLite.js

@@ -79,6 +79,8 @@ import { ExposureTracker } from './ExposureTracker';
 import { HTMLInjector } from './HTMLInjector';
 import { logDebug, logExperimentSummary, logPerformance, DEBUG } from '../utils/debug';
 import { URLMatcher } from '../utils/URLMatcher';
+import { DOMPersistenceManager } from '../utils/persistence';
+import { registerPlugin, unregisterPlugin } from '../utils/plugin-registry';
 var DOMChangesPluginLite = /** @class */ (function () {
     function DOMChangesPluginLite(config) {
         var _this = this;
@@ -88,11 +90,7 @@ var DOMChangesPluginLite = /** @class */ (function () {
         this.eventListeners = new Map();
         this.styleManagers = new Map();
         this.initialized = false;
-        this.watchedElements = new WeakMap();
-        this.persistenceObserver = null;
-        this.reapplyingElements = new Set();
-        this.reapplyLogThrottle = new Map();
-        this.appliedChanges = new Map();
+        this.persistenceManager = null;
         this.antiFlickerTimeout = null;
         this.antiFlickerStyleId = 'absmartly-antiflicker';
         this.config = {
@@ -117,6 +115,17 @@ var DOMChangesPluginLite = /** @class */ (function () {
         this.variantExtractor = new VariantExtractor(this.config.context, this.config.variableName, this.config.debug);
         this.exposureTracker = new ExposureTracker(this.config.context, this.config.debug);
         this.htmlInjector = new HTMLInjector(this.config.debug);
+        this.persistenceManager = new DOMPersistenceManager({
+            debug: this.config.debug,
+            onReapply: function (change, experimentName) {
+                logDebug('[DOMChangesPluginLite] Re-applying change due to mutation', {
+                    experimentName: experimentName,
+                    selector: change.selector,
+                    type: change.type,
+                });
+                _this.domManipulator.applyChange(change, experimentName);
+            },
+        });
         // Auto-initialize when context is ready
         this.readyPromise = this.config.context
             .ready()
@@ -160,9 +169,14 @@ var DOMChangesPluginLite = /** @class */ (function () {
                     case 1:
                         _a.trys.push([1, 4, , 5]);
                         if (this.config.spa) {
+                            // SPA mode: observe body for React/Vue hydration recovery
+                            // and listen for URL changes to re-apply changes on navigation
                             this.setupMutationObserver();
                             this.setupURLChangeListener();
                         }
+                        else {
+                            logDebug('[DOMChangesPluginLite] SPA mode disabled - skipping body observer');
+                        }
                         if (!this.config.autoApply) return [3 /*break*/, 3];
                         // Apply HTML injections and DOM changes in parallel to minimize flickering
                         return [4 /*yield*/, this.applyInjectionsAndChanges()];
@@ -173,6 +187,7 @@ var DOMChangesPluginLite = /** @class */ (function () {
                     case 3:
                         this.initialized = true;
                         this.registerWithContext();
+                        this.registerGlobally();
                         this.emit('initialized');
                         duration = performance.now() - startTime;
                         logPerformance('Plugin initialization', duration);
@@ -198,10 +213,12 @@ var DOMChangesPluginLite = /** @class */ (function () {
                 if (mutation.type === 'childList') {
                     // Check if any added nodes match our applied change selectors
                     mutation.addedNodes.forEach(function (node) {
+                        var _a;
                         if (node.nodeType === Node.ELEMENT_NODE) {
                             var element_1 = node;
                             // Check all experiments with applied changes (not just style changes)
-                            _this.appliedChanges.forEach(function (changes, experimentName) {
+                            var appliedChanges = ((_a = _this.persistenceManager) === null || _a === void 0 ? void 0 : _a.getAppliedChanges()) || new Map();
+                            appliedChanges.forEach(function (changes, experimentName) {
                                 changes.forEach(function (change) {
                                     try {
                                         // Check if this new element or any of its descendants match the selector
@@ -231,11 +248,30 @@ var DOMChangesPluginLite = /** @class */ (function () {
                 }
             });
         });
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-        this.mutationObserver = observer;
+        // Wait for document.body to exist before observing
+        // This prevents "parameter 1 is not of type 'Node'" errors when SDK loads in <head>
+        var startObserving = function () {
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            _this.mutationObserver = observer;
+            logDebug('[DOMChangesPluginLite] MutationObserver started on document.body');
+        };
+        if (document.body) {
+            startObserving();
+        }
+        else {
+            // Use MutationObserver on documentElement to detect when body is added
+            var bodyObserver = new MutationObserver(function (_mutations, obs) {
+                if (document.body) {
+                    obs.disconnect();
+                    startObserving();
+                }
+            });
+            bodyObserver.observe(document.documentElement, { childList: true });
+            logDebug('[DOMChangesPluginLite] Waiting for document.body...');
+        }
     };
     /**
      * Set up URL change listener for SPA mode
@@ -302,7 +338,9 @@ var DOMChangesPluginLite = /** @class */ (function () {
                 // The stylesheets will be reused or cleared on next applyChanges
                 this.styleManagers.clear();
                 // Clear applied changes
-                this.appliedChanges.clear();
+                if (this.persistenceManager) {
+                    this.persistenceManager.clearAll();
+                }
                 // Clear HTML injections
                 this.htmlInjector.destroy();
                 // Clear variant extractor cache to force re-extraction
@@ -419,22 +457,46 @@ var DOMChangesPluginLite = /** @class */ (function () {
                         allExperiments = this.getAllExperimentsData();
                         totalApplied = 0;
                         experimentStats = new Map();
-                        logDebug('[ABsmartly] Experiments to process:', Array.from(allExperiments.keys()));
-                        logDebug('[ABsmartly] Total experiments with changes:', allExperiments.size);
+                        logDebug('[APPLY-CHANGES] Experiments found with DOM changes:', {
+                            experimentNames: Array.from(allExperiments.keys()),
+                            totalCount: allExperiments.size,
+                            currentURL: currentURL,
+                        });
+                        if (allExperiments.size === 0) {
+                            logDebug('[APPLY-CHANGES] ⚠️  No experiments found with DOM changes - nothing to process');
+                        }
                         try {
                             for (allExperiments_1 = __values(allExperiments), allExperiments_1_1 = allExperiments_1.next(); !allExperiments_1_1.done; allExperiments_1_1 = allExperiments_1.next()) {
                                 _a = __read(allExperiments_1_1.value, 2), expName = _a[0], experimentData = _a[1];
+                                logDebug("[APPLY-CHANGES] [".concat(expName, "] Starting to process experiment"), {
+                                    experimentName: expName,
+                                    currentURL: currentURL,
+                                });
                                 // Skip if filtering by specific experiment
                                 if (experimentName && expName !== experimentName) {
+                                    logDebug("[APPLY-CHANGES] [".concat(expName, "] \u23ED\uFE0F  Skipping - filtering for different experiment"), {
+                                        filteringFor: experimentName,
+                                    });
                                     continue;
                                 }
                                 currentVariant = this.config.context.peek(expName);
+                                if (currentVariant === undefined || currentVariant === null) {
+                                    logDebug("[APPLY-CHANGES] [".concat(expName, "] \u23ED\uFE0F  Skipping - no variant assigned (peek returned ").concat(currentVariant, ")"), {
+                                        experimentName: expName,
+                                    });
+                                    continue;
+                                }
+                                logDebug("[APPLY-CHANGES] [".concat(expName, "] User assigned to variant ").concat(currentVariant));
                                 variantData = experimentData.variantData, urlFilter = experimentData.urlFilter, globalDefaults = experimentData.globalDefaults;
                                 anyVariantMatchesURL = this.variantExtractor.anyVariantMatchesURL(expName, currentURL);
                                 if (!anyVariantMatchesURL) {
-                                    logDebug("[ABsmartly] Skipping experiment '".concat(expName, "' - no variant matches URL: ").concat(currentURL));
+                                    logDebug("[APPLY-CHANGES] [".concat(expName, "] \u23ED\uFE0F  Skipping - no variant matches URL: ").concat(currentURL), {
+                                        experimentName: expName,
+                                        currentURL: currentURL,
+                                    });
                                     continue;
                                 }
+                                logDebug("[APPLY-CHANGES] [".concat(expName, "] \u2713 At least one variant matches current URL"));
                                 shouldApplyVisualChanges = this.shouldApplyVisualChanges(variantData, urlFilter, currentURL);
                                 changes = this.extractChangesFromData(variantData, globalDefaults);
                                 allVariantChanges = this.extractAllVariantChanges(expName);
@@ -448,7 +510,9 @@ var DOMChangesPluginLite = /** @class */ (function () {
                                 }
                                 stats = { total: (changes === null || changes === void 0 ? void 0 : changes.length) || 0, success: 0, pending: 0 };
                                 if (this.config.debug) {
-                                    logDebug("[ABsmartly] Processing experiment '".concat(expName, "' (variant ").concat(currentVariant, "):"), {
+                                    logDebug("[ABsmartly] Processing experiment '".concat(expName, "' - User is in variant ").concat(currentVariant, ":"), {
+                                        experimentName: expName,
+                                        userVariant: currentVariant,
                                         urlMatches: shouldApplyVisualChanges,
                                         changeCount: (changes === null || changes === void 0 ? void 0 : changes.length) || 0,
                                         userVariantHasChanges: ((changes === null || changes === void 0 ? void 0 : changes.length) || 0) > 0,
@@ -459,11 +523,28 @@ var DOMChangesPluginLite = /** @class */ (function () {
                                         }); })) || [],
                                     });
                                 }
+                                // Log if user is in control variant (no changes)
+                                if (!changes || changes.length === 0) {
+                                    if (this.config.debug) {
+                                        logDebug("[ABsmartly] User is in control variant ".concat(currentVariant, " with no changes, but will still track for SRM prevention"), {
+                                            experimentName: expName,
+                                            currentVariant: currentVariant,
+                                        });
+                                    }
+                                }
                                 // Apply visual changes only if URL matches for user's variant AND user has changes
                                 if (shouldApplyVisualChanges && changes && changes.length > 0) {
                                     try {
                                         for (changes_1 = (e_2 = void 0, __values(changes)), changes_1_1 = changes_1.next(); !changes_1_1.done; changes_1_1 = changes_1.next()) {
                                             change = changes_1_1.value;
+                                            // Skip delete changes with viewport triggers - they must be applied AFTER exposure
+                                            // Otherwise the element is removed before it can be observed
+                                            if (change.type === 'delete' && change.trigger_on_view) {
+                                                if (this.config.debug) {
+                                                    logDebug("[ABsmartly] Deferring delete change until after viewport trigger for '".concat(expName, "'"), { selector: change.selector });
+                                                }
+                                                continue;
+                                            }
                                             success = this.domManipulator.applyChange(change, expName);
                                             if (success) {
                                                 totalApplied++;
@@ -581,14 +662,41 @@ var DOMChangesPluginLite = /** @class */ (function () {
                                     finally { if (e_3) throw e_3.error; }
                                 }
                                 if (this.config.debug) {
-                                    logDebug("[ABsmartly] Final trigger decision for '".concat(expName, "': hasImmediate=").concat(hasAnyImmediateTriggerInAnyVariant, ", hasViewport=").concat(hasAnyViewportTriggerInAnyVariant));
+                                    logDebug("[TRIGGER-DETECTION] [".concat(expName, "] Final trigger decision for '").concat(expName, "':"), {
+                                        experimentName: expName,
+                                        userVariant: currentVariant,
+                                        hasImmediateTrigger: hasAnyImmediateTriggerInAnyVariant,
+                                        hasViewportTrigger: hasAnyViewportTriggerInAnyVariant,
+                                        willRegisterExperiment: hasAnyViewportTriggerInAnyVariant || hasAnyImmediateTriggerInAnyVariant,
+                                        userChangesCount: (changes === null || changes === void 0 ? void 0 : changes.length) || 0,
+                                        allVariantsChangesCount: allVariantChanges.map(function (vc) { return vc.length; }),
+                                    });
                                 }
                                 // CRITICAL: Always register experiment for tracking if ANY variant has ANY trigger type
                                 // This prevents SRM even when user's variant doesn't match URL filter
                                 // Pass the URL-filtered trigger flags to ExposureTracker
                                 if (hasAnyViewportTriggerInAnyVariant || hasAnyImmediateTriggerInAnyVariant) {
+                                    logDebug("[TRIGGER-DETECTION] [".concat(expName, "] \u2713 REGISTERING EXPERIMENT - Calling exposureTracker.registerExperiment()"), {
+                                        experimentName: expName,
+                                        userVariant: currentVariant,
+                                        hasImmediateTrigger: hasAnyImmediateTriggerInAnyVariant,
+                                        hasViewportTrigger: hasAnyViewportTriggerInAnyVariant,
+                                        changesForUser: (changes === null || changes === void 0 ? void 0 : changes.length) || 0,
+                                        allVariantCounts: allVariantChanges.map(function (vc, idx) { return ({
+                                            variant: idx,
+                                            count: vc.length,
+                                        }); }),
+                                    });
                                     this.exposureTracker.registerExperiment(expName, currentVariant || 0, changes || [], allVariantChanges, hasAnyImmediateTriggerInAnyVariant, hasAnyViewportTriggerInAnyVariant);
                                 }
+                                else {
+                                    logDebug("[TRIGGER-DETECTION] [".concat(expName, "] \u26A0\uFE0F  No triggers detected - experiment will NOT be registered!"), {
+                                        experimentName: expName,
+                                        userVariant: currentVariant,
+                                        hasAnyChangesInAnyVariant: hasAnyChangesInAnyVariant,
+                                        allVariantsChangesCount: allVariantChanges.map(function (vc) { return vc.length; }),
+                                    });
+                                }
                                 // Note: We do NOT call treatment() here anymore to avoid duplicate calls.
                                 // The ExposureTracker.registerExperiment() will call triggerExposure() internally
                                 // when hasImmediateTrigger is true (see ExposureTracker line 169-174).
@@ -644,18 +752,43 @@ var DOMChangesPluginLite = /** @class */ (function () {
         var e_5, _a;
         var experiments = new Map();
         var allVariants = this.variantExtractor.extractAllChanges();
+        logDebug('[GET-EXPERIMENTS] Extracting experiment data from context', {
+            experimentsWithChanges: Array.from(allVariants.keys()),
+            totalCount: allVariants.size,
+        });
         try {
             for (var allVariants_1 = __values(allVariants), allVariants_1_1 = allVariants_1.next(); !allVariants_1_1.done; allVariants_1_1 = allVariants_1.next()) {
                 var _b = __read(allVariants_1_1.value, 1), expName = _b[0];
                 var currentVariant = this.config.context.peek(expName);
+                logDebug("[GET-EXPERIMENTS] [".concat(expName, "] Checking experiment"), {
+                    experimentName: expName,
+                    currentVariant: currentVariant,
+                    variantIsValid: currentVariant !== undefined && currentVariant !== null,
+                });
                 if (currentVariant === undefined || currentVariant === null) {
+                    logDebug("[GET-EXPERIMENTS] [".concat(expName, "] \u23ED\uFE0F  Skipping - context.peek() returned ").concat(currentVariant));
                     continue;
                 }
                 var variantsData = this.variantExtractor.getAllVariantsData(expName);
                 var variantData = variantsData.get(currentVariant);
+                if (this.config.debug) {
+                    logDebug("[GET-EXPERIMENTS] [".concat(expName, "] Variant data lookup:"), {
+                        experimentName: expName,
+                        userVariant: currentVariant,
+                        variantDataExists: !!variantData,
+                        allVariantsInMap: Array.from(variantsData.keys()),
+                        userVariantInMap: variantsData.has(currentVariant),
+                    });
+                }
                 if (!variantData) {
-                    continue;
+                    logDebug("[GET-EXPERIMENTS] [".concat(expName, "] \u26A0\uFE0F  User's variant ").concat(currentVariant, " has no DOM changes (control variant)"), {
+                        availableVariants: Array.from(variantsData.keys()),
+                        note: 'Will still track for SRM prevention',
+                    });
+                    // Don't skip! Include experiments even if user's variant has no changes
+                    // This is critical for SRM prevention - we need to track ALL experiments
                 }
+                logDebug("[GET-EXPERIMENTS] [".concat(expName, "] \u2713 Including experiment (variant ").concat(currentVariant, ")"));
                 // Extract URL filter and global defaults if using wrapped format
                 var urlFilter = null;
                 var globalDefaults = {};
@@ -688,12 +821,15 @@ var DOMChangesPluginLite = /** @class */ (function () {
      * Extract changes from DOMChangesData and apply global defaults
      */
     DOMChangesPluginLite.prototype.extractChangesFromData = function (data, globalDefaults) {
+        if (!data) {
+            return null;
+        }
         var changes = null;
         // Extract changes array
         if (Array.isArray(data)) {
             changes = data;
         }
-        else if (data && typeof data === 'object' && 'changes' in data) {
+        else if (typeof data === 'object' && 'changes' in data) {
             changes = data.changes;
         }
         if (!changes || changes.length === 0) {
@@ -750,6 +886,10 @@ var DOMChangesPluginLite = /** @class */ (function () {
      * Determine if visual changes should be applied based on URL filter
      */
     DOMChangesPluginLite.prototype.shouldApplyVisualChanges = function (variantData, urlFilter, url) {
+        // No data for this variant - no changes to apply
+        if (!variantData) {
+            return false;
+        }
         // Legacy array format has no URL filter - always apply
         if (Array.isArray(variantData)) {
             return true;
@@ -883,9 +1023,9 @@ var DOMChangesPluginLite = /** @class */ (function () {
             this.mutationObserver.disconnect();
             this.mutationObserver = null;
         }
-        if (this.persistenceObserver) {
-            this.persistenceObserver.disconnect();
-            this.persistenceObserver = null;
+        if (this.persistenceManager) {
+            this.persistenceManager.destroy();
+            this.persistenceManager = null;
         }
         // Clean up anti-flicker timeout and style
         if (this.antiFlickerTimeout !== null) {
@@ -898,11 +1038,8 @@ var DOMChangesPluginLite = /** @class */ (function () {
         }
         this.eventListeners.clear();
         this.exposedExperiments.clear();
-        this.watchedElements = new WeakMap();
-        this.appliedChanges.clear();
-        this.reapplyingElements.clear();
-        this.reapplyLogThrottle.clear();
         this.unregisterFromContext();
+        this.unregisterGlobally();
         this.initialized = false;
         if (this.config.debug) {
             logDebug('[ABsmartly] DOM Changes Plugin Lite destroyed');
@@ -941,6 +1078,31 @@ var DOMChangesPluginLite = /** @class */ (function () {
             }
         }
     };
+    /**
+     * Register plugin in global registry for detection
+     */
+    DOMChangesPluginLite.prototype.registerGlobally = function () {
+        registerPlugin('dom', {
+            name: 'DOMChangesPluginLite',
+            version: DOMChangesPluginLite.VERSION,
+            initialized: true,
+            timestamp: Date.now(),
+            capabilities: ['spa', 'visibility', 'auto-apply'],
+            instance: this,
+        });
+        if (this.config.debug) {
+            logDebug('[ABsmartly] DOMChangesPluginLite registered in global window.__ABSMARTLY_PLUGINS__');
+        }
+    };
+    /**
+     * Unregister plugin from global registry
+     */
+    DOMChangesPluginLite.prototype.unregisterGlobally = function () {
+        unregisterPlugin('dom');
+        if (this.config.debug) {
+            logDebug('[ABsmartly] DOMChangesPluginLite unregistered from global registry');
+        }
+    };
     /**
      * Hide content to prevent flicker before experiments are applied
      */
@@ -1020,204 +1182,14 @@ var DOMChangesPluginLite = /** @class */ (function () {
         }
     };
     DOMChangesPluginLite.prototype.watchElement = function (element, experimentName, change) {
-        var experiments = this.watchedElements.get(element);
-        if (!experiments) {
-            experiments = new Set();
-            this.watchedElements.set(element, experiments);
-        }
-        experiments.add(experimentName);
-        // Store the applied change for this experiment (ALL types: style, class, attribute, html, text, etc.)
-        if (!this.appliedChanges.has(experimentName)) {
-            this.appliedChanges.set(experimentName, []);
-        }
-        var changes = this.appliedChanges.get(experimentName);
-        var isNewWatch = !changes.includes(change);
-        if (isNewWatch) {
-            changes.push(change);
-            // Only log when actually adding a new watch, not on every reapply
-            if (this.config.debug) {
-                var currentStyles_1 = {};
-                if (change.value && typeof change.value === 'object') {
-                    Object.keys(change.value).forEach(function (prop) {
-                        var cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-                        currentStyles_1[cssProp] = element.style.getPropertyValue(cssProp);
-                    });
-                }
-                logDebug('[WATCH-ELEMENT] Started watching element for persistence/hydration recovery', {
-                    experimentName: experimentName,
-                    selector: change.selector,
-                    element: element.tagName,
-                    changeType: change.type,
-                    value: change.value,
-                    currentStyles: change.type === 'style' ? currentStyles_1 : undefined,
-                    timestamp: Date.now(),
-                });
-            }
-        }
-        if (!this.persistenceObserver) {
-            this.setupPersistenceObserver();
+        if (this.persistenceManager) {
+            this.persistenceManager.watchElement(element, experimentName, change);
         }
     };
     DOMChangesPluginLite.prototype.unwatchElement = function (element, experimentName) {
-        var experiments = this.watchedElements.get(element);
-        if (experiments) {
-            experiments.delete(experimentName);
-            if (experiments.size === 0) {
-                this.watchedElements.delete(element);
-            }
-        }
-    };
-    DOMChangesPluginLite.prototype.setupPersistenceObserver = function () {
-        var _this = this;
-        if (this.persistenceObserver)
-            return;
-        if (this.config.debug) {
-            logDebug('[PERSISTENCE-OBSERVER] Setting up persistence observer', {
-                timestamp: Date.now(),
-                watchedElementsCount: this.watchedElements ? 'has WeakMap' : 'no WeakMap',
-            });
-        }
-        this.persistenceObserver = new MutationObserver(function (mutations) {
-            if (_this.config.debug) {
-                logDebug('[MUTATION-DETECTED] Persistence observer detected mutations', {
-                    mutationCount: mutations.length,
-                    timestamp: Date.now(),
-                    mutations: mutations.map(function (m) {
-                        var _a;
-                        return ({
-                            target: m.target.tagName,
-                            oldValue: (_a = m.oldValue) === null || _a === void 0 ? void 0 : _a.substring(0, 100),
-                        });
-                    }),
-                });
-            }
-            mutations.forEach(function (mutation) {
-                var element = mutation.target;
-                if (_this.reapplyingElements.has(element)) {
-                    if (_this.config.debug) {
-                        logDebug('[MUTATION-SKIP] Skipping mutation - currently reapplying', {
-                            element: element.tagName,
-                        });
-                    }
-                    return;
-                }
-                var experiments = _this.watchedElements.get(element);
-                if (experiments) {
-                    // Throttle mutation detection logs to once per 5 seconds per element
-                    if (_this.config.debug) {
-                        var elementKey = "mutation:".concat(element.tagName, ":").concat(element.getAttribute('name') || element.className);
-                        var now = Date.now();
-                        var lastLogged = _this.reapplyLogThrottle.get(elementKey) || 0;
-                        if (now - lastLogged > 5000) {
-                            logDebug('[MUTATION-ON-WATCHED] Style mutation detected on watched element', {
-                                element: element.tagName,
-                                selector: element.getAttribute('name') || element.className,
-                                oldValue: mutation.oldValue,
-                                newValue: element.getAttribute('style'),
-                                experiments: Array.from(experiments),
-                            });
-                            _this.reapplyLogThrottle.set(elementKey, now);
-                        }
-                    }
-                    experiments.forEach(function (experimentName) {
-                        var appliedChanges = _this.appliedChanges.get(experimentName);
-                        if (appliedChanges) {
-                            appliedChanges.forEach(function (change) {
-                                var e_7, _a;
-                                // Skip the .matches() check - we already know this element should have this change
-                                // because we added it to watchedElements when we applied it successfully.
-                                // The .matches() check fails for complex selectors with parent relationships (e.g., "div > p")
-                                if (change.type === 'style') {
-                                    var needsReapply = _this.checkStyleOverwritten(element, change.value);
-                                    if (needsReapply) {
-                                        _this.reapplyingElements.add(element);
-                                        var logKey = "".concat(experimentName, "-").concat(change.selector);
-                                        var now = Date.now();
-                                        var lastLogged = _this.reapplyLogThrottle.get(logKey) || 0;
-                                        if (_this.config.debug && now - lastLogged > 5000) {
-                                            logDebug('[REAPPLY-TRIGGERED] Reapplying style after mutation (React/framework conflict detected)', {
-                                                experimentName: experimentName,
-                                                selector: change.selector,
-                                                element: element.tagName,
-                                                timestamp: now,
-                                                note: 'This happens when the page framework (React/Vue/etc) fights with DOM changes',
-                                            });
-                                            _this.reapplyLogThrottle.set(logKey, now);
-                                            // Cleanup old throttle entries to prevent memory leak
-                                            if (_this.reapplyLogThrottle.size > 100) {
-                                                var oldestAllowed = now - 60000; // 1 minute
-                                                try {
-                                                    for (var _b = __values(_this.reapplyLogThrottle.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                                                        var _d = __read(_c.value, 2), key = _d[0], time = _d[1];
-                                                        if (time < oldestAllowed) {
-                                                            _this.reapplyLogThrottle.delete(key);
-                                                        }
-                                                    }
-                                                }
-                                                catch (e_7_1) { e_7 = { error: e_7_1 }; }
-                                                finally {
-                                                    try {
-                                                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                                                    }
-                                                    finally { if (e_7) throw e_7.error; }
-                                                }
-                                            }
-                                        }
-                                        _this.domManipulator.applyChange(change, experimentName);
-                                        setTimeout(function () {
-                                            _this.reapplyingElements.delete(element);
-                                        }, 0);
-                                    }
-                                    else if (_this.config.debug) {
-                                        logDebug('[MUTATION-NO-REAPPLY] Style mutation detected but no reapply needed', {
-                                            experimentName: experimentName,
-                                            selector: change.selector,
-                                        });
-                                    }
-                                }
-                            });
-                        }
-                    });
-                }
-            });
-        });
-        this.persistenceObserver.observe(document.body, {
-            attributes: true,
-            attributeFilter: ['style'],
-            subtree: true,
-            attributeOldValue: true,
-        });
-        if (this.config.debug) {
-            logDebug('[PERSISTENCE-OBSERVER] Setup complete - now observing style mutations', {
-                target: 'document.body',
-                attributeFilter: ['style'],
-                subtree: true,
-                attributeOldValue: true,
-                timestamp: Date.now(),
-            });
-        }
-    };
-    DOMChangesPluginLite.prototype.checkStyleOverwritten = function (element, expectedStyles) {
-        var e_8, _a;
-        try {
-            for (var _b = __values(Object.entries(expectedStyles)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), prop = _d[0], value = _d[1];
-                var cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-                var currentValue = element.style.getPropertyValue(cssProp);
-                var currentPriority = element.style.getPropertyPriority(cssProp);
-                if (currentValue !== value || (value.includes('!important') && !currentPriority)) {
-                    return true;
-                }
-            }
-        }
-        catch (e_8_1) { e_8 = { error: e_8_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_8) throw e_8.error; }
+        if (this.persistenceManager) {
+            this.persistenceManager.unwatchElement(element, experimentName);
         }
-        return false;
     };
     DOMChangesPluginLite.VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : '1.1.2';
     return DOMChangesPluginLite;