@absmartly/sdk-plugins 1.1.1 → 1.2.1

package/es/core/DOMChangesPluginLite.js

@@ -79,19 +79,18 @@ 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 _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         this.mutationObserver = null;
         this.exposedExperiments = new Set();
         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 = {
@@ -99,28 +98,54 @@ var DOMChangesPluginLite = /** @class */ (function () {
             autoApply: (_a = config.autoApply) !== null && _a !== void 0 ? _a : true,
             spa: (_b = config.spa) !== null && _b !== void 0 ? _b : true,
             visibilityTracking: (_c = config.visibilityTracking) !== null && _c !== void 0 ? _c : true,
-            extensionBridge: false, // Always false for lite version
-            dataSource: (_d = config.dataSource) !== null && _d !== void 0 ? _d : 'variable',
-            dataFieldName: (_e = config.dataFieldName) !== null && _e !== void 0 ? _e : '__dom_changes',
-            debug: (_f = config.debug) !== null && _f !== void 0 ? _f : false,
-            hideUntilReady: (_g = config.hideUntilReady) !== null && _g !== void 0 ? _g : false,
-            hideTimeout: (_h = config.hideTimeout) !== null && _h !== void 0 ? _h : 3000,
-            hideSelector: (_j = config.hideSelector) !== null && _j !== void 0 ? _j : '[data-absmartly-hide]',
-            hideTransition: (_k = config.hideTransition) !== null && _k !== void 0 ? _k : false,
+            variableName: (_d = config.variableName) !== null && _d !== void 0 ? _d : '__dom_changes',
+            debug: (_e = config.debug) !== null && _e !== void 0 ? _e : false,
+            hideUntilReady: (_f = config.hideUntilReady) !== null && _f !== void 0 ? _f : false,
+            hideTimeout: (_g = config.hideTimeout) !== null && _g !== void 0 ? _g : 3000,
+            hideTransition: (_h = config.hideTransition) !== null && _h !== void 0 ? _h : false,
         };
         if (!this.config.context) {
             throw new Error('[ABsmartly] Context is required');
         }
-        // Apply anti-flicker hiding immediately if enabled
+        console.log("[ABsmartly] DOMChangesPluginLite v".concat(DOMChangesPluginLite.VERSION, " initialized"));
         if (this.config.hideUntilReady) {
             this.hideContent();
         }
         this.domManipulator = new DOMManipulatorLite(this.config.debug, this);
-        this.variantExtractor = new VariantExtractor(this.config.context, this.config.dataSource, this.config.dataFieldName, this.config.debug);
+        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()
+            .then(function () {
+            logDebug('[DOMChangesPluginLite] Context is ready, starting initialization');
+            return _this.initialize();
+        })
+            .catch(function (error) {
+            logDebug('[DOMChangesPluginLite] ERROR during initialization:', error);
+            throw error;
+        });
     }
     DOMChangesPluginLite.prototype.ready = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.readyPromise];
+            });
+        });
+    };
+    DOMChangesPluginLite.prototype.initialize = function () {
         return __awaiter(this, void 0, void 0, function () {
             var startTime, duration, error_1;
             return __generator(this, function (_a) {
@@ -137,7 +162,6 @@ var DOMChangesPluginLite = /** @class */ (function () {
                                 autoApply: this.config.autoApply,
                                 spa: this.config.spa,
                                 visibilityTracking: this.config.visibilityTracking,
-                                dataSource: this.config.dataSource,
                                 DEBUG: DEBUG,
                             },
                         });
@@ -145,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()];
@@ -158,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);
@@ -175,13 +205,6 @@ var DOMChangesPluginLite = /** @class */ (function () {
             });
         });
     };
-    DOMChangesPluginLite.prototype.initialize = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.ready()];
-            });
-        });
-    };
     DOMChangesPluginLite.prototype.setupMutationObserver = function () {
         var _this = this;
         var observer = new MutationObserver(function (mutations) {
@@ -190,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
@@ -223,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
@@ -294,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
@@ -411,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);
@@ -440,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,
@@ -451,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++;
@@ -573,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).
@@ -636,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 = {};
@@ -680,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) {
@@ -742,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;
@@ -875,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) {
@@ -890,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');
@@ -933,13 +1078,38 @@ 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
      */
     DOMChangesPluginLite.prototype.hideContent = function () {
         var _this = this;
-        var mode = this.config.hideUntilReady;
-        if (!mode)
+        var selector = this.config.hideUntilReady;
+        if (!selector)
             return;
         // Check if style already exists (prevent duplicate injection)
         if (document.getElementById(this.antiFlickerStyleId)) {
@@ -948,7 +1118,6 @@ var DOMChangesPluginLite = /** @class */ (function () {
         var style = document.createElement('style');
         style.id = this.antiFlickerStyleId;
         var hasTransition = this.config.hideTransition !== false;
-        var selector = mode === 'body' ? 'body' : this.config.hideSelector || '[data-absmartly-hide]';
         if (hasTransition) {
             // Use both visibility:hidden and opacity:0 for smooth transition
             style.textContent = "\n        ".concat(selector, " {\n          visibility: hidden !important;\n          opacity: 0 !important;\n        }\n      ");
@@ -958,7 +1127,7 @@ var DOMChangesPluginLite = /** @class */ (function () {
             style.textContent = "\n        ".concat(selector, " {\n          visibility: hidden !important;\n        }\n      ");
         }
         document.head.appendChild(style);
-        // Set timeout to show content even if experiments fail to load
+        // Set timeout to show content even if experiments fail to load or timeout expires
         this.antiFlickerTimeout = window.setTimeout(function () {
             if (_this.config.debug) {
                 logDebug("[ABsmartly] Anti-flicker timeout reached (".concat(_this.config.hideTimeout, "ms), showing content"));
@@ -966,11 +1135,11 @@ var DOMChangesPluginLite = /** @class */ (function () {
             _this.showContent();
         }, this.config.hideTimeout);
         if (this.config.debug) {
-            logDebug("[ABsmartly] Anti-flicker enabled (mode: ".concat(mode, ", transition: ").concat(hasTransition ? this.config.hideTransition : 'none', ", timeout: ").concat(this.config.hideTimeout, "ms)"));
+            logDebug("[ABsmartly] Anti-flicker enabled (selector: '".concat(selector, "', transition: ").concat(hasTransition ? this.config.hideTransition : 'none', ", timeout: ").concat(this.config.hideTimeout, "ms)"));
         }
     };
     /**
-     * Show hidden content after experiments are applied
+     * Show hidden content after experiments are applied or timeout expires
      */
     DOMChangesPluginLite.prototype.showContent = function () {
         var _this = this;
@@ -985,8 +1154,7 @@ var DOMChangesPluginLite = /** @class */ (function () {
         var hasTransition = this.config.hideTransition !== false;
         if (hasTransition) {
             // Smooth fade-in: remove visibility, add transition, then animate opacity
-            var mode = this.config.hideUntilReady;
-            var selector = mode === 'body' ? 'body' : this.config.hideSelector || '[data-absmartly-hide]';
+            var selector = this.config.hideUntilReady;
             // Step 1: Remove visibility:hidden, keep opacity:0, add transition
             style.textContent = "\n        ".concat(selector, " {\n          opacity: 0 !important;\n          transition: opacity ").concat(this.config.hideTransition, " !important;\n        }\n      ");
             // Step 2: Force reflow to ensure transition applies
@@ -1014,206 +1182,16 @@ 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 = '1.0.0-lite';
+    DOMChangesPluginLite.VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : '1.1.2';
     return DOMChangesPluginLite;
 }());
 export { DOMChangesPluginLite };