@ninetailed/experience.js-plugin-preview 7.12.0 → 7.13.0-beta.0

package/index.cjs.js

@@ -128,7 +128,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.audienceDefinitions = [];
     this.audienceOverwrites = {};
     this.experienceVariantIndexOverwrites = {};
+    this.variableOverwrites = {};
     this.profile = null;
+    this.changes = [];
     this.container = null;
     this.bridge = null;
     /**
@@ -139,7 +141,7 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.clientId = null;
     this.environment = null;
     this.initialize = () => __awaiter(this, void 0, void 0, function* () {
-      var _b;
+      var _b, _c;
       if (typeof window !== 'undefined') {
         if (WidgetContainer.isContainerAttached()) {
           experience_jsShared.logger.warn('Preview plugin is already attached.');
@@ -165,6 +167,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
         this.bridge.updateProps({
           props: this.pluginApi
         });
+        if (!((_c = this.changes) === null || _c === void 0 ? void 0 : _c.length)) {
+          this.onChange();
+        }
       }
     });
     this.loaded = () => true;
@@ -175,9 +180,31 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
         return;
       }
       if (payload === null || payload === void 0 ? void 0 : payload.profile) {
-        this.onProfileChange(payload.profile);
+        this.onProfileChange(payload.profile, payload.changes || []);
       }
     };
+    /**
+     * Implements the HasChangesModificationMiddleware interface
+     * Returns a middleware function that applies variable overwrites to changes
+     */
+    this.getChangesModificationMiddleware = () => {
+      if (!this.isActiveInstance || Object.keys(this.variableOverwrites).length === 0) {
+        return undefined;
+      }
+      return ({
+        changes: inputChanges
+      }) => {
+        if (!inputChanges || inputChanges.length === 0) {
+          return {
+            changes: inputChanges
+          };
+        }
+        // Calculate and return overridden changes on demand instead of storing them
+        return {
+          changes: this.getEffectiveChanges(inputChanges)
+        };
+      };
+    };
     this.getExperienceSelectionMiddleware = ({
       baseline,
       experiences
@@ -197,7 +224,35 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
             variantIndex: 0
           };
         }
-        const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
+        // Handle entry replacements as before
+        const entryReplacementComponents = experience.components.filter(component => component.type === experience_jsShared.ComponentTypeEnum.EntryReplacement && 'id' in component.baseline);
+        const baselineComponent = entryReplacementComponents.find(component => component.baseline.id === baseline.id);
+        // Get the selected variant index
+        const variantIndex = this.pluginApi.experienceVariantIndexes[experience.id];
+        // Handle variable components for this experience (NEW CODE)
+        if (variantIndex !== undefined) {
+          // Process all variable components for this experience
+          const variableComponents = experience.components.filter(component => component.type === experience_jsShared.ComponentTypeEnum.InlineVariable);
+          // Set variable values based on the selected variant index
+          variableComponents.forEach(component => {
+            const key = component.key;
+            let value;
+            if (variantIndex === 0) {
+              value = component.baseline;
+            } else {
+              const variant = component.variants[variantIndex - 1];
+              value = variant && 'value' in variant ? variant.value : component.baseline;
+            }
+            // Set the variable in our changes system
+            this.setVariableValue({
+              experienceId: experience.id,
+              key,
+              value,
+              variantIndex
+            });
+          });
+        }
+        // Continue with entry replacement handling
         if (!baselineComponent) {
           return {
             experience,
@@ -206,7 +261,6 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
           };
         }
         const allVariants = [baseline, ...baselineComponent.variants];
-        const variantIndex = this.pluginApi.experienceVariantIndexes[experience.id];
         if (allVariants.length <= variantIndex) {
           return {
             experience,
@@ -232,18 +286,42 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.onChange = () => {
       var _b;
       experience_jsShared.logger.debug('Ninetailed Preview Plugin onChange pluginApi:', this.pluginApi);
-      Object.assign({}, window.ninetailed, {
-        plugins: Object.assign(Object.assign({}, (_b = window.ninetailed) === null || _b === void 0 ? void 0 : _b.plugins), {
-          preview: this.windowApi
-        })
-      });
+      if (typeof window !== 'undefined') {
+        window.ninetailed = Object.assign({}, window.ninetailed, {
+          plugins: Object.assign(Object.assign({}, (_b = window.ninetailed) === null || _b === void 0 ? void 0 : _b.plugins), {
+            preview: this.windowApi
+          })
+        });
+      }
       this.bridge.updateProps({
         props: this.pluginApi
       });
       this.onChangeEmitter.invokeListeners();
     };
-    this.onProfileChange = profile => {
+    this.onProfileChange = (profile, changes) => {
       this.profile = profile;
+      experience_jsShared.logger.debug('Profile changed:', {
+        profile,
+        changes
+      });
+      // If changes are provided, update them
+      if (changes) {
+        this.onChangesChange(changes);
+      }
+      this.onChange();
+    };
+    /**
+     * Handles changes from the SDK and applies any variable overrides.
+     * This should be called whenever the original changes are updated.
+     */
+    this.onChangesChange = incomingChanges => {
+      if (!this.isActiveInstance) {
+        return;
+      }
+      experience_jsShared.logger.debug('Received changes:', incomingChanges);
+      // Store the original changes
+      this.changes = incomingChanges;
+      // Notify listeners and update UI
       this.onChange();
     };
     this.setCredentials = ({
@@ -369,23 +447,40 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     }
     const experience = this.experiences.find(experience => experience.id === experienceId);
     if (!experience) {
-      experience_jsShared.logger.warn(`You cannot active a variant for an unknown experience (id: ${experienceId})`);
+      experience_jsShared.logger.warn(`Cannot activate a variant for an unknown experience (id: ${experienceId})`);
       return;
     }
     if (experience.audience && !this.activeAudiences.some(id => {
       var _b;
       return id === ((_b = experience.audience) === null || _b === void 0 ? void 0 : _b.id);
     })) {
-      experience_jsShared.logger.warn(`You cannot active a variant for an experience (id: ${experienceId}), which is not in the active audiences.`);
+      experience_jsShared.logger.warn(`Cannot activate a variant for an experience (id: ${experienceId}) which is not in the active audiences.`);
       return;
     }
     const isValidIndex = experience.components.map(component => component.variants.length + 1).every(length => length > variantIndex);
     if (!isValidIndex) {
       experience_jsShared.logger.warn(`You activated a variant at index ${variantIndex} for the experience (id: ${experienceId}). Not all components have that many variants, you may see the baseline for some.`);
     }
+    // Update the experience variant index
     this.experienceVariantIndexOverwrites = Object.assign(Object.assign({}, this.experienceVariantIndexOverwrites), {
       [experienceId]: variantIndex
     });
+    // Process all components to extract variable values
+    experience.components.forEach(component => {
+      var _b, _c;
+      if (component.type === experience_jsShared.ComponentTypeEnum.InlineVariable) {
+        const key = component.key;
+        const value = variantIndex === 0 ? component.baseline.value : (_c = (_b = component.variants[variantIndex - 1]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : component.baseline.value;
+        // Set the variable value
+        this.setVariableValue({
+          experienceId,
+          key,
+          value,
+          variantIndex
+        });
+      }
+    });
+    // Trigger change notification - this updates the middleware
     this.onChange();
   }
   resetExperience(experienceId) {
@@ -407,6 +502,42 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
       window.ninetailed.reset();
     }
   }
+  /**
+   * Sets a variable value override for preview
+   */
+  setVariableValue({
+    experienceId,
+    key,
+    value,
+    variantIndex
+  }) {
+    var _b;
+    if (!this.isActiveInstance) {
+      return;
+    }
+    const overrideKey = `${experienceId}:${key}`;
+    // Only create new object if actually changing
+    if (((_b = this.variableOverwrites[overrideKey]) === null || _b === void 0 ? void 0 : _b.value) === value) {
+      return; // No change needed
+    }
+
+    const change = {
+      type: experience_jsShared.ChangeTypes.Variable,
+      key,
+      value,
+      meta: {
+        experienceId,
+        variantIndex
+      }
+    };
+    // Update variable overwrites
+    this.variableOverwrites = Object.assign(Object.assign({}, this.variableOverwrites), {
+      [overrideKey]: change
+    });
+    // Notify listeners
+    this.onChangeEmitter.invokeListeners();
+    this.onChange();
+  }
   openExperienceEditor(experience) {
     if (this.onOpenExperienceEditor && typeof this.onOpenExperienceEditor === 'function') return this.onOpenExperienceEditor(experience);
   }
@@ -419,7 +550,7 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
   get pluginApi() {
     var _b;
     return {
-      version: "7.12.0" ,
+      version: "7.13.0-beta.0" ,
       open: this.open.bind(this),
       close: this.close.bind(this),
       toggle: this.toggle.bind(this),
@@ -455,7 +586,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
       activeAudiences: this.activeAudiences,
       setExperienceVariant: this.setExperienceVariant.bind(this),
       resetExperience: this.resetExperience.bind(this),
-      experienceVariantIndexes: Object.assign(Object.assign({}, this.experienceVariantIndexes), this.experienceVariantIndexOverwrites)
+      experienceVariantIndexes: Object.assign(Object.assign({}, this.experienceVariantIndexes), this.experienceVariantIndexOverwrites),
+      setVariableValue: this.setVariableValue.bind(this),
+      variableOverwrites: this.variableOverwrites
     };
   }
   isKnownAudience(id) {
@@ -502,6 +635,31 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
       audiences: this.activeAudiences
     }));
   }
+  /**
+   * Get the override key for a variable
+   */
+  getOverrideKey(experienceId, key) {
+    return `${experienceId}:${key}`;
+  }
+  /**
+   * Get effective changes by applying overrides - compute on demand
+   */
+  getEffectiveChanges(inputChanges = this.changes) {
+    if (!inputChanges || Object.keys(this.variableOverwrites).length === 0) {
+      return inputChanges || [];
+    }
+    // Filter out changes that we're overriding
+    const filteredChanges = inputChanges.filter(change => {
+      var _b;
+      if (change.type !== experience_jsShared.ChangeTypes.Variable) return true;
+      const changeKey = ((_b = change.meta) === null || _b === void 0 ? void 0 : _b.experienceId) ? this.getOverrideKey(change.meta.experienceId, change.key) : change.key;
+      return !this.variableOverwrites[changeKey];
+    });
+    const effectiveChanges = [...filteredChanges, ...Object.values(this.variableOverwrites)];
+    experience_jsShared.logger.debug('Overridden changes after applying override:', effectiveChanges);
+    // Add our overrides to create the final result
+    return effectiveChanges;
+  }
 }
 _a = experience_js.PROFILE_CHANGE;
 

package/index.esm.js

@@ -1,4 +1,4 @@
-import { logger, unionBy } from '@ninetailed/experience.js-shared';
+import { logger, ComponentTypeEnum, ChangeTypes, unionBy } from '@ninetailed/experience.js-shared';
 import { OnChangeEmitter, PROFILE_CHANGE, isExperienceMatch, selectDistribution } from '@ninetailed/experience.js';
 import { NinetailedPlugin } from '@ninetailed/experience.js-plugin-analytics';
 
@@ -97,7 +97,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.audienceDefinitions = [];
     this.audienceOverwrites = {};
     this.experienceVariantIndexOverwrites = {};
+    this.variableOverwrites = {};
     this.profile = null;
+    this.changes = [];
     this.container = null;
     this.bridge = null;
     /**
@@ -111,7 +113,7 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.environment = null;
     this.initialize = async function () {
       if (typeof window !== 'undefined') {
-        var _window$ninetailed;
+        var _window$ninetailed, _this$changes;
         if (WidgetContainer.isContainerAttached()) {
           logger.warn('Preview plugin is already attached.');
           _this.isActiveInstance = false;
@@ -136,6 +138,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
         _this.bridge.updateProps({
           props: _this.pluginApi
         });
+        if (!((_this$changes = _this.changes) != null && _this$changes.length)) {
+          _this.onChange();
+        }
       }
     };
     this.loaded = () => true;
@@ -146,8 +151,31 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
         return;
       }
       if (payload != null && payload.profile) {
-        this.onProfileChange(payload.profile);
+        this.onProfileChange(payload.profile, payload.changes || []);
+      }
+    };
+    /**
+     * Implements the HasChangesModificationMiddleware interface
+     * Returns a middleware function that applies variable overwrites to changes
+     */
+    this.getChangesModificationMiddleware = () => {
+      if (!this.isActiveInstance || Object.keys(this.variableOverwrites).length === 0) {
+        return undefined;
       }
+      return ({
+        changes: inputChanges
+      }) => {
+        if (!inputChanges || inputChanges.length === 0) {
+          return {
+            changes: inputChanges
+          };
+        }
+
+        // Calculate and return overridden changes on demand instead of storing them
+        return {
+          changes: this.getEffectiveChanges(inputChanges)
+        };
+      };
     };
     this.getExperienceSelectionMiddleware = ({
       baseline,
@@ -168,7 +196,41 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
             variantIndex: 0
           };
         }
-        const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
+
+        // Handle entry replacements as before
+        const entryReplacementComponents = experience.components.filter(component => component.type === ComponentTypeEnum.EntryReplacement && 'id' in component.baseline);
+        const baselineComponent = entryReplacementComponents.find(component => component.baseline.id === baseline.id);
+
+        // Get the selected variant index
+        const variantIndex = this.pluginApi.experienceVariantIndexes[experience.id];
+
+        // Handle variable components for this experience (NEW CODE)
+        if (variantIndex !== undefined) {
+          // Process all variable components for this experience
+          const variableComponents = experience.components.filter(component => component.type === ComponentTypeEnum.InlineVariable);
+
+          // Set variable values based on the selected variant index
+          variableComponents.forEach(component => {
+            const key = component.key;
+            let value;
+            if (variantIndex === 0) {
+              value = component.baseline;
+            } else {
+              const variant = component.variants[variantIndex - 1];
+              value = variant && 'value' in variant ? variant.value : component.baseline;
+            }
+
+            // Set the variable in our changes system
+            this.setVariableValue({
+              experienceId: experience.id,
+              key,
+              value,
+              variantIndex
+            });
+          });
+        }
+
+        // Continue with entry replacement handling
         if (!baselineComponent) {
           return {
             experience,
@@ -177,7 +239,6 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
           };
         }
         const allVariants = [baseline, ...baselineComponent.variants];
-        const variantIndex = this.pluginApi.experienceVariantIndexes[experience.id];
         if (allVariants.length <= variantIndex) {
           return {
             experience,
@@ -201,20 +262,47 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       };
     };
     this.onChange = () => {
-      var _window$ninetailed2;
       logger.debug('Ninetailed Preview Plugin onChange pluginApi:', this.pluginApi);
-      Object.assign({}, window.ninetailed, {
-        plugins: Object.assign({}, (_window$ninetailed2 = window.ninetailed) == null ? void 0 : _window$ninetailed2.plugins, {
-          preview: this.windowApi
-        })
-      });
+      if (typeof window !== 'undefined') {
+        var _window$ninetailed2;
+        window.ninetailed = Object.assign({}, window.ninetailed, {
+          plugins: Object.assign({}, (_window$ninetailed2 = window.ninetailed) == null ? void 0 : _window$ninetailed2.plugins, {
+            preview: this.windowApi
+          })
+        });
+      }
       this.bridge.updateProps({
         props: this.pluginApi
       });
       this.onChangeEmitter.invokeListeners();
     };
-    this.onProfileChange = profile => {
+    this.onProfileChange = (profile, changes) => {
       this.profile = profile;
+      logger.debug('Profile changed:', {
+        profile,
+        changes
+      });
+
+      // If changes are provided, update them
+      if (changes) {
+        this.onChangesChange(changes);
+      }
+      this.onChange();
+    };
+    /**
+     * Handles changes from the SDK and applies any variable overrides.
+     * This should be called whenever the original changes are updated.
+     */
+    this.onChangesChange = incomingChanges => {
+      if (!this.isActiveInstance) {
+        return;
+      }
+      logger.debug('Received changes:', incomingChanges);
+
+      // Store the original changes
+      this.changes = incomingChanges;
+
+      // Notify listeners and update UI
       this.onChange();
     };
     this.setCredentials = ({
@@ -339,23 +427,44 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     }
     const experience = this.experiences.find(experience => experience.id === experienceId);
     if (!experience) {
-      logger.warn(`You cannot active a variant for an unknown experience (id: ${experienceId})`);
+      logger.warn(`Cannot activate a variant for an unknown experience (id: ${experienceId})`);
       return;
     }
     if (experience.audience && !this.activeAudiences.some(id => {
       var _experience$audience4;
       return id === ((_experience$audience4 = experience.audience) == null ? void 0 : _experience$audience4.id);
     })) {
-      logger.warn(`You cannot active a variant for an experience (id: ${experienceId}), which is not in the active audiences.`);
+      logger.warn(`Cannot activate a variant for an experience (id: ${experienceId}) which is not in the active audiences.`);
       return;
     }
     const isValidIndex = experience.components.map(component => component.variants.length + 1).every(length => length > variantIndex);
     if (!isValidIndex) {
       logger.warn(`You activated a variant at index ${variantIndex} for the experience (id: ${experienceId}). Not all components have that many variants, you may see the baseline for some.`);
     }
+
+    // Update the experience variant index
     this.experienceVariantIndexOverwrites = Object.assign({}, this.experienceVariantIndexOverwrites, {
       [experienceId]: variantIndex
     });
+
+    // Process all components to extract variable values
+    experience.components.forEach(component => {
+      if (component.type === ComponentTypeEnum.InlineVariable) {
+        var _component$variants$v, _component$variants;
+        const key = component.key;
+        const value = variantIndex === 0 ? component.baseline.value : (_component$variants$v = (_component$variants = component.variants[variantIndex - 1]) == null ? void 0 : _component$variants.value) != null ? _component$variants$v : component.baseline.value;
+
+        // Set the variable value
+        this.setVariableValue({
+          experienceId,
+          key,
+          value,
+          variantIndex
+        });
+      }
+    });
+
+    // Trigger change notification - this updates the middleware
     this.onChange();
   }
   resetExperience(experienceId) {
@@ -375,6 +484,45 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       window.ninetailed.reset();
     }
   }
+  /**
+   * Sets a variable value override for preview
+   */
+  setVariableValue({
+    experienceId,
+    key,
+    value,
+    variantIndex
+  }) {
+    var _this$variableOverwri;
+    if (!this.isActiveInstance) {
+      return;
+    }
+    const overrideKey = `${experienceId}:${key}`;
+
+    // Only create new object if actually changing
+    if (((_this$variableOverwri = this.variableOverwrites[overrideKey]) == null ? void 0 : _this$variableOverwri.value) === value) {
+      return; // No change needed
+    }
+
+    const change = {
+      type: ChangeTypes.Variable,
+      key,
+      value,
+      meta: {
+        experienceId,
+        variantIndex
+      }
+    };
+
+    // Update variable overwrites
+    this.variableOverwrites = Object.assign({}, this.variableOverwrites, {
+      [overrideKey]: change
+    });
+
+    // Notify listeners
+    this.onChangeEmitter.invokeListeners();
+    this.onChange();
+  }
   openExperienceEditor(experience) {
     if (this.onOpenExperienceEditor && typeof this.onOpenExperienceEditor === 'function') return this.onOpenExperienceEditor(experience);
   }
@@ -387,7 +535,7 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
   get pluginApi() {
     var _this$profile;
     return {
-      version: "7.12.0" ,
+      version: "7.13.0-beta.0" ,
       open: this.open.bind(this),
       close: this.close.bind(this),
       toggle: this.toggle.bind(this),
@@ -423,7 +571,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       activeAudiences: this.activeAudiences,
       setExperienceVariant: this.setExperienceVariant.bind(this),
       resetExperience: this.resetExperience.bind(this),
-      experienceVariantIndexes: Object.assign({}, this.experienceVariantIndexes, this.experienceVariantIndexOverwrites)
+      experienceVariantIndexes: Object.assign({}, this.experienceVariantIndexes, this.experienceVariantIndexOverwrites),
+      setVariableValue: this.setVariableValue.bind(this),
+      variableOverwrites: this.variableOverwrites
     };
   }
   isKnownAudience(id) {
@@ -470,6 +620,35 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       audiences: this.activeAudiences
     }));
   }
+
+  /**
+   * Get the override key for a variable
+   */
+  getOverrideKey(experienceId, key) {
+    return `${experienceId}:${key}`;
+  }
+
+  /**
+   * Get effective changes by applying overrides - compute on demand
+   */
+  getEffectiveChanges(inputChanges = this.changes) {
+    if (!inputChanges || Object.keys(this.variableOverwrites).length === 0) {
+      return inputChanges || [];
+    }
+
+    // Filter out changes that we're overriding
+    const filteredChanges = inputChanges.filter(change => {
+      var _change$meta;
+      if (change.type !== ChangeTypes.Variable) return true;
+      const changeKey = (_change$meta = change.meta) != null && _change$meta.experienceId ? this.getOverrideKey(change.meta.experienceId, change.key) : change.key;
+      return !this.variableOverwrites[changeKey];
+    });
+    const effectiveChanges = [...filteredChanges, ...Object.values(this.variableOverwrites)];
+    logger.debug('Overridden changes after applying override:', effectiveChanges);
+
+    // Add our overrides to create the final result
+    return effectiveChanges;
+  }
 }
 
 if (typeof window === 'object' && !('process' in window)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-plugin-preview",
-  "version": "7.12.0",
+  "version": "7.13.0-beta.0",
   "description": "Ninetailed SDK plugin for preview",
   "license": "MIT",
   "repository": {
@@ -15,10 +15,10 @@
     "a/b testing"
   ],
   "dependencies": {
-    "@ninetailed/experience.js-shared": "7.12.0",
-    "@ninetailed/experience.js": "7.12.0",
-    "@ninetailed/experience.js-preview-bridge": "7.12.0",
-    "@ninetailed/experience.js-plugin-analytics": "7.12.0"
+    "@ninetailed/experience.js-shared": "7.13.0-beta.0",
+    "@ninetailed/experience.js": "7.13.0-beta.0",
+    "@ninetailed/experience.js-preview-bridge": "7.13.0-beta.0",
+    "@ninetailed/experience.js-plugin-analytics": "7.13.0-beta.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/lib/plugin/NinetailedPreviewPlugin.d.ts

@@ -1,5 +1,5 @@
-import { Reference } from '@ninetailed/experience.js-shared';
-import { ExperienceConfiguration, PROFILE_CHANGE, HasExperienceSelectionMiddleware, BuildExperienceSelectionMiddleware, type ProfileChangedPayload, type InterestedInProfileChange } from '@ninetailed/experience.js';
+import { Reference, AllowedVariableType } from '@ninetailed/experience.js-shared';
+import { ExperienceConfiguration, PROFILE_CHANGE, HasExperienceSelectionMiddleware, BuildExperienceSelectionMiddleware, HasChangesModificationMiddleware, BuildChangesModificationMiddleware, type ProfileChangedPayload, type InterestedInProfileChange } from '@ninetailed/experience.js';
 import type { ExposedAudienceDefinition } from '@ninetailed/experience.js-preview-bridge';
 import { type EventHandler, NinetailedPlugin } from '@ninetailed/experience.js-plugin-analytics';
 export declare const NINETAILED_PREVIEW_EVENTS: {
@@ -18,7 +18,7 @@ type NinetailedPreviewPluginOptions = {
         };
     };
 };
-export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements HasExperienceSelectionMiddleware<Reference, Reference>, InterestedInProfileChange {
+export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements HasExperienceSelectionMiddleware<Reference, Reference>, HasChangesModificationMiddleware, InterestedInProfileChange {
     private readonly options;
     name: string;
     private isOpen;
@@ -26,7 +26,9 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements
     private readonly audienceDefinitions;
     private audienceOverwrites;
     private experienceVariantIndexOverwrites;
+    private variableOverwrites;
     private profile;
+    private changes;
     private container;
     private bridge;
     /**
@@ -54,6 +56,20 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements
     }): void;
     resetExperience(experienceId: string): void;
     reset(): void;
+    /**
+     * Implements the HasChangesModificationMiddleware interface
+     * Returns a middleware function that applies variable overwrites to changes
+     */
+    getChangesModificationMiddleware: BuildChangesModificationMiddleware;
+    /**
+     * Sets a variable value override for preview
+     */
+    setVariableValue({ experienceId, key, value, variantIndex, }: {
+        experienceId: string;
+        key: string;
+        value: AllowedVariableType;
+        variantIndex: number;
+    }): void;
     getExperienceSelectionMiddleware: BuildExperienceSelectionMiddleware<Reference, Reference>;
     openExperienceEditor(experience: ExperienceConfiguration): void;
     openExperienceAnalytics(experience: ExperienceConfiguration): void;
@@ -66,8 +82,21 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements
     private calculateExperienceVariantIndexes;
     private get apiExperienceVariantIndexes();
     private get experienceVariantIndexes();
+    /**
+     * Get the override key for a variable
+     */
+    private getOverrideKey;
+    /**
+     * Get effective changes by applying overrides - compute on demand
+     */
+    private getEffectiveChanges;
     private onChange;
     private onProfileChange;
+    /**
+     * Handles changes from the SDK and applies any variable overrides.
+     * This should be called whenever the original changes are updated.
+     */
+    private onChangesChange;
     private setCredentials;
 }
 export {};