@elementor/editor-variables 4.2.0-945 → 4.2.0-beta1

package/dist/index.js

@@ -56,20 +56,31 @@ var import_i18n10 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
 var import_events = require("@elementor/events");
-var trackVariableEvent = ({ varType, controlPath, action }) => {
+var trackVariableEvent = ({ varType, controlPath, action, executedBy }) => {
   const { dispatchEvent, config } = (0, import_events.getMixpanel)();
   if (!config?.names?.variables?.[action]) {
     return;
   }
   const name = config.names.variables[action];
-  dispatchEvent?.(name, {
-    location: config?.locations?.variables || "",
-    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
-    trigger: config?.triggers?.click || "",
+  let eventData = {
     var_type: varType,
-    control_path: controlPath,
     action_type: name
-  });
+  };
+  if (executedBy) {
+    eventData.executed_by = executedBy;
+  }
+  const defaultLocationInfo = {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || ""
+  };
+  if (!executedBy || executedBy !== "mcp_tool") {
+    eventData = { ...defaultLocationInfo, ...eventData };
+  }
+  if (controlPath) {
+    eventData.control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
 };
 var trackVariablesManagerEvent = ({ action, source, varType, controlPath }) => {
   const { dispatchEvent, config } = (0, import_events.getMixpanel)();
@@ -94,24 +105,21 @@ var trackVariablesManagerEvent = ({ action, source, varType, controlPath }) => {
   dispatchEvent?.(name, eventData);
 };
 var trackVariableSyncToV3 = ({ variableLabel, action }) => {
-  try {
-    const { dispatchEvent, config } = (0, import_events.getMixpanel)();
-    if (!config?.names?.variables?.variableSyncToV3) {
-      return;
-    }
-    const name = config.names.variables.variableSyncToV3;
-    const isSync = action === "sync";
-    dispatchEvent?.(name, {
-      interaction_type: "click",
-      target_type: variableLabel,
-      target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
-      interaction_result: isSync ? "var_is_synced_to_V3" : "var_is_unsynced_from_V3",
-      target_location: "widget_panel",
-      location_l1: "var_manager",
-      interaction_description: isSync ? `user_synced_${variableLabel}_to_v3` : `user_unsync_${variableLabel}_from_v3`
-    });
-  } catch {
+  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
+  if (!config?.names?.variables?.variableSyncToV3) {
+    return;
   }
+  const name = config.names.variables.variableSyncToV3;
+  const isSync = action === "sync";
+  dispatchEvent?.(name, {
+    interaction_type: "click",
+    target_type: variableLabel,
+    target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
+    interaction_result: isSync ? "var_is_synced_to_V3" : "var_is_unsynced_from_V3",
+    target_location: "widget_panel",
+    location_l1: "var_manager",
+    interaction_description: isSync ? `user_synced_${variableLabel}_to_v3` : `user_unsync_${variableLabel}_from_v3`
+  });
 };
 
 // src/utils/validations.ts
@@ -508,7 +516,7 @@ var service = {
       return variables;
     });
   },
-  create: ({ type, label, value }) => {
+  create: ({ type, label, value }, options = {}) => {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
@@ -524,13 +532,18 @@ var service = {
       styleVariablesRepository.update({
         [variableId]: createdVariable
       });
+      trackVariableEvent({
+        varType: type,
+        action: "save",
+        ...options.eventData
+      });
       return {
         id: variableId,
         variable: createdVariable
       };
     });
   },
-  update: (id, { label, value, type }) => {
+  update: (id, { label, value, type }, options = {}) => {
     return apiClient.update(id, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
@@ -546,6 +559,11 @@ var service = {
       styleVariablesRepository.update({
         [variableId]: updatedVariable
       });
+      trackVariableEvent({
+        varType: updatedVariable.type,
+        action: "update",
+        ...options.eventData
+      });
       return {
         id: variableId,
         variable: updatedVariable
@@ -1022,11 +1040,11 @@ var normalizeVariables = (propKey) => {
   return variablesToList(variables).filter((variable) => matchingTypes.includes(variable.type)).map(toNormalizedVariable);
 };
 var extractId = ({ id }) => id;
-var createVariable = (newVariable) => {
-  return service.create(newVariable).then(extractId);
+var createVariable = (newVariable, options) => {
+  return service.create(newVariable, options).then(extractId);
 };
-var updateVariable = (updateId, { value, label, type }) => {
-  return service.update(updateId, { value, label, type }).then(extractId);
+var updateVariable = (updateId, { value, label, type }, options) => {
+  return service.update(updateId, { value, label, type }, options).then(extractId);
 };
 var deleteVariable = (deleteId) => {
   return service.delete(deleteId).then(extractId);
@@ -2353,8 +2371,8 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_controls18 = require("@elementor/editor-controls");
-var import_editor_mcp2 = require("@elementor/editor-mcp");
-var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_props11 = require("@elementor/editor-props");
 var import_menus = require("@elementor/menus");
 
 // src/components/global-styles-import-listener.tsx
@@ -2373,12 +2391,84 @@ function GlobalStylesImportListener() {
   return null;
 }
 
+// src/components/mcp-variable-connect-listener.tsx
+var import_react15 = require("react");
+var import_editor_mcp = require("@elementor/editor-mcp");
+
+// src/utils/extract-variables-from-style-value.ts
+var import_editor_props3 = require("@elementor/editor-props");
+var VARIABLE_TYPE_KEYS = [
+  "global-color-variable",
+  "global-font-variable",
+  "global-size-variable",
+  "global-custom-size-variable"
+];
+function tryExtractVariable(value) {
+  for (const key of VARIABLE_TYPE_KEYS) {
+    const propUtil = (0, import_editor_props3.getPropSchemaFromCache)(key);
+    if (propUtil?.isValid(value)) {
+      return {
+        type: key,
+        variableId: propUtil.extract(value)
+      };
+    }
+  }
+  return null;
+}
+function traverse(value, path, result) {
+  const extracted = tryExtractVariable(value);
+  if (extracted) {
+    result.push({
+      ...extracted,
+      controlPath: path.join(".")
+    });
+    return;
+  }
+  if ((0, import_editor_props3.isTransformable)(value)) {
+    traverse(value.value, path, result);
+    return;
+  }
+  if (value && typeof value === "object") {
+    for (const [key, val] of Object.entries(value)) {
+      traverse(val, [...path, key], result);
+    }
+  }
+}
+function extractVariablesFromStyleValue(styleValue) {
+  const result = [];
+  traverse(styleValue, [], result);
+  return result;
+}
+
+// src/components/mcp-variable-connect-listener.tsx
+function McpVariableConnectListener() {
+  (0, import_react15.useEffect)(() => {
+    const handleMcpStylesApplied = (event) => {
+      const { styleValue } = event.detail;
+      const variables = extractVariablesFromStyleValue(styleValue);
+      variables.forEach(({ type, controlPath }) => {
+        trackVariableEvent({
+          varType: type,
+          controlPath,
+          action: "connect",
+          executedBy: "mcp_tool"
+        });
+      });
+    };
+    window.addEventListener(import_editor_mcp.MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied);
+    return () => {
+      window.removeEventListener(import_editor_mcp.MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied);
+    };
+  }, []);
+  return null;
+}
+
 // src/controls/variable-control.tsx
 var React33 = __toESM(require("react"));
 var import_editor_controls13 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var React24 = __toESM(require("react"));
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_icons12 = require("@elementor/icons");
@@ -2402,25 +2492,25 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 var React22 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
 var React15 = __toESM(require("react"));
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_ui15 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react15.createContext)(null);
+var PopoverContentRefContext = (0, import_react16.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react15.useState)(null);
+  const [anchorRef, setAnchorRef] = (0, import_react16.useState)(null);
   return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(import_ui15.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react15.useContext)(PopoverContentRefContext);
+  return (0, import_react16.useContext)(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
 var React17 = __toESM(require("react"));
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
@@ -2441,7 +2531,7 @@ var useInitialValue = () => {
 
 // src/hooks/use-variable-bound-prop.ts
 var import_editor_controls4 = require("@elementor/editor-controls");
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var useVariableBoundProp = () => {
   const { propTypeUtil } = useVariableType();
   const boundProp = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
@@ -2461,7 +2551,7 @@ var resolveBoundPropAndSetValue = (value, boundProp) => {
   return boundProp.setValue(value);
 };
 var unwrapValue = (input) => {
-  if ((0, import_editor_props3.isTransformable)(input)) {
+  if ((0, import_editor_props4.isTransformable)(input)) {
     return input.value;
   }
   return input;
@@ -2477,15 +2567,15 @@ var FormField = ({ id, label, errorMsg, noticeMsg, children }) => {
 // src/components/variable-creation.tsx
 var SIZE2 = "tiny";
 var VariableCreation = ({ onGoBack, onClose }) => {
-  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { icon: VariableIcon, valueField: ValueField, propTypeUtil } = useVariableType();
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls5.useBoundProp)();
   const initialValue = useInitialValue();
-  const [value, setValue] = (0, import_react16.useState)(initialValue);
-  const [label, setLabel] = (0, import_react16.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react16.useState)("");
-  const [propTypeKey, setPropTypeKey] = (0, import_react16.useState)(propTypeUtil.key);
+  const [value, setValue] = (0, import_react17.useState)(initialValue);
+  const [label, setLabel] = (0, import_react17.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react17.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react17.useState)("");
+  const [propTypeKey, setPropTypeKey] = (0, import_react17.useState)(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2498,11 +2588,14 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     onClose();
   };
   const handleCreateAndTrack = () => {
-    createVariable({
-      value,
-      label,
-      type: propTypeKey
-    }).then((key) => {
+    createVariable(
+      {
+        value,
+        label,
+        type: propTypeKey
+      },
+      { eventData: { controlPath: path.join(".") } }
+    ).then((key) => {
       setVariable(key);
       closePopover();
     }).catch((error) => {
@@ -2517,11 +2610,6 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       }
       setErrorMessage(ERROR_MESSAGES.UNEXPECTED_ERROR);
     });
-    trackVariableEvent({
-      varType: variableType,
-      controlPath: path.join("."),
-      action: "save"
-    });
   };
   const hasEmptyFields = () => {
     if ("" === label.trim()) {
@@ -2606,7 +2694,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 var React19 = __toESM(require("react"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_ui7 = require("@elementor/editor-ui");
@@ -2616,7 +2704,7 @@ var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
 var React18 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -2626,7 +2714,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react17.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react18.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -2657,23 +2745,23 @@ var SIZE3 = "tiny";
 var DELETE_LABEL = (0, import_i18n13.__)("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
+  const { setVariableValue: notifyBoundPropChange, variableId, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls6.useBoundProp)();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user3.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react18.useState)(false);
-  const [editConfirmation, setEditConfirmation] = (0, import_react18.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react18.useState)("");
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react19.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react19.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react19.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react19.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = (0, import_react18.useState)(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = (0, import_react19.useState)(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react18.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react18.useState)(() => variable.label);
-  (0, import_react18.useEffect)(() => {
+  const [value, setValue] = (0, import_react19.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react19.useState)(() => variable.label);
+  (0, import_react19.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2696,7 +2784,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const handleSaveVariable = () => {
     const typeChanged = propTypeKey !== variable.type;
     const updatePayload = typeChanged ? { value, label, type: propTypeKey } : { value, label };
-    updateVariable(editId, updatePayload).then(() => {
+    updateVariable(editId, updatePayload, { eventData: { controlPath: path.join(".") } }).then(() => {
       maybeTriggerBoundPropChange();
       onSubmit?.();
     }).catch((error) => {
@@ -2838,7 +2926,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var React21 = __toESM(require("react"));
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui9 = require("@elementor/editor-ui");
@@ -2946,7 +3034,7 @@ var getProUpgradeUrl = (variableType) => `https://go.elementor.com/renew-license
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled = false }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
-  const [searchValue, setSearchValue] = (0, import_react19.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react20.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -3024,7 +3112,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (disabled) {
       (0, import_editor_controls7.trackViewPromotion)({
         target_name: "variables_popover",
@@ -3132,8 +3220,8 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react20.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react20.useState)("");
+  const [currentView, setCurrentView] = (0, import_react21.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react21.useState)("");
   const onSettingsAvailable = (0, import_editor_v1_adapters2.isExperimentActive)("e_variables_manager") ? () => {
     window.dispatchEvent(
       new CustomEvent("elementor/toggle-design-system", { detail: { tab: "variables" } })
@@ -3245,8 +3333,8 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls8.useBoundProp)();
-  const anchorRef = (0, import_react21.useRef)(null);
-  const popupId = (0, import_react21.useId)();
+  const anchorRef = (0, import_react22.useRef)(null);
+  const popupId = (0, import_react22.useId)();
   const popupState = (0, import_ui24.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
@@ -3286,14 +3374,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 var React28 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_controls10 = require("@elementor/editor-controls");
 var import_ui28 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/variable-restore.tsx
 var React25 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_ui25 = require("@elementor/ui");
@@ -3307,11 +3395,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = (0, import_react22.useState)("");
-  const [valueFieldError, setValueFieldError] = (0, import_react22.useState)("");
-  const [label, setLabel] = (0, import_react22.useState)(variable.label);
-  const [value, setValue] = (0, import_react22.useState)(variable.value);
-  const [propTypeKey, setPropTypeKey] = (0, import_react22.useState)(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = (0, import_react23.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react23.useState)("");
+  const [label, setLabel] = (0, import_react23.useState)(variable.label);
+  const [value, setValue] = (0, import_react23.useState)(variable.value);
+  const [propTypeKey, setPropTypeKey] = (0, import_react23.useState)(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3468,11 +3556,11 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = (0, import_editor_controls10.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react23.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react24.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react23.useRef)(null);
-  const popupId = (0, import_react23.useId)();
+  const deletedChipAnchorRef = (0, import_react24.useRef)(null);
+  const popupId = (0, import_react24.useId)();
   const popupState = (0, import_ui28.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
@@ -3559,7 +3647,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var React30 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_editor_controls11 = require("@elementor/editor-controls");
 var import_ui30 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
@@ -3597,13 +3685,13 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = (0, import_editor_controls11.useBoundProp)();
-  const anchorRef = (0, import_react24.useRef)(null);
-  const popupId = (0, import_react24.useId)();
+  const anchorRef = (0, import_react25.useRef)(null);
+  const popupId = (0, import_react25.useId)();
   const popupState = (0, import_ui30.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = (0, import_react24.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react25.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3676,7 +3764,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var React32 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
 var import_ui32 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
@@ -3706,7 +3794,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = (0, import_editor_controls12.useBoundProp)();
-  const [infotipVisible, setInfotipVisible] = (0, import_react25.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react26.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -3804,11 +3892,11 @@ var getFontConfigs = () => {
 };
 
 // src/mcp/variable-tool-prompt.ts
-var import_editor_mcp = require("@elementor/editor-mcp");
+var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_utils3 = require("@elementor/utils");
 var MANAGE_VARIABLES_GUIDE_URI = "elementor://variables/tools/manage-global-variable-guide";
 var generateVariablesPrompt = () => {
-  const prompt = (0, import_editor_mcp.toolPrompts)("manage-global-variable");
+  const prompt = (0, import_editor_mcp2.toolPrompts)("manage-global-variable");
   const proIsActive = (0, import_utils3.isProActive)();
   const sizeVariableSection = proIsActive ? `- **global-size-variable** \u2014 A simple CSS length with a unit (Elementor Pro). Use this for fixed spacing, font sizes, or layout values. Example: \`16px\`, \`1.5rem\`, \`2em\`, \`10vh\`
 - **global-custom-size-variable** \u2014 Any CSS size expression that goes beyond a simple number + unit (Elementor Pro). Use this when the value is a CSS function, a keyword, or a combination of units that \`global-size-variable\` cannot represent. Example: \`auto\`, \`clamp(1rem, 2vw, 2rem)\`, \`calc(100% - 32px)\`, \`min(50vw, 600px)\`, \`300ms\`, \`2ch\`. When in doubt: if the value contains a function call or a keyword, use \`global-custom-size-variable\`.` : `- ~~global-size-variable~~ \u2014 requires Elementor Pro (not available on this site)
@@ -4016,7 +4104,7 @@ function getServiceActions(svc) {
       if (valueError) {
         throw new Error(valueError);
       }
-      return svc.create({ type, label, value });
+      return svc.create({ type, label, value }, { eventData: { executedBy: "mcp_tool" } });
     },
     update({ id, label, value }) {
       if (!id || !label || !value) {
@@ -4033,7 +4121,7 @@ function getServiceActions(svc) {
           throw new Error(valueError);
         }
       }
-      return svc.update(id, { label, value });
+      return svc.update(id, { label, value }, { eventData: { executedBy: "mcp_tool" } });
     },
     delete({ id }) {
       if (!id) {
@@ -4059,19 +4147,19 @@ function initMcp(reg, canvasMcpEntry) {
 // src/register-variable-types.tsx
 var React37 = __toESM(require("react"));
 var import_editor_controls16 = require("@elementor/editor-controls");
-var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_ui13 = require("@elementor/editor-ui");
 var import_icons16 = require("@elementor/icons");
 var import_i18n26 = require("@wordpress/i18n");
 
 // src/components/fields/color-field.tsx
 var React35 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_ui33 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react26.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react26.useState)("");
-  const defaultRef = (0, import_react26.useRef)(null);
+  const [color, setColor] = (0, import_react27.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react27.useState)("");
+  const defaultRef = (0, import_react27.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -4110,20 +4198,20 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 var React36 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_editor_controls15 = require("@elementor/editor-controls");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons15 = require("@elementor/icons");
 var import_ui34 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = (0, import_react27.useState)(value);
-  const defaultRef = (0, import_react27.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react28.useState)(value);
+  const defaultRef = (0, import_react28.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = (0, import_ui34.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_controls15.useFontFamilies)();
   const sectionWidth = (0, import_editor_ui12.useSectionWidth)();
-  const mapFontSubs = (0, import_react27.useMemo)(() => {
+  const mapFontSubs = (0, import_react28.useMemo)(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -4139,7 +4227,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id = (0, import_react27.useId)();
+  const id = (0, import_react28.useId)();
   return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     import_ui34.UnstableTag,
     {
@@ -4179,9 +4267,9 @@ var FontField = ({ value, onChange, onValidationChange }) => {
 };
 
 // src/prop-types/size-variable-prop-type.ts
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_props5 = require("@elementor/editor-props");
 var import_schema4 = require("@elementor/schema");
-var sizeVariablePropTypeUtil = (0, import_editor_props4.createPropUtils)("global-size-variable", import_schema4.z.string());
+var sizeVariablePropTypeUtil = (0, import_editor_props5.createPropUtils)("global-size-variable", import_schema4.z.string());
 
 // src/transformers/empty-transformer.tsx
 var import_editor_canvas5 = require("@elementor/editor-canvas");
@@ -4196,7 +4284,7 @@ function registerVariableTypes() {
     valueField: ColorField,
     icon: import_icons16.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
-    fallbackPropTypeUtil: import_editor_props5.colorPropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props6.colorPropTypeUtil,
     variableType: "color",
     startIcon: ({ value }) => /* @__PURE__ */ React37.createElement(ColorIndicator, { size: "inherit", component: "span", value }),
     defaultValue: "#ffffff",
@@ -4225,7 +4313,7 @@ function registerVariableTypes() {
     valueField: FontField,
     icon: import_icons16.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
-    fallbackPropTypeUtil: import_editor_props5.stringPropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props6.stringPropTypeUtil,
     variableType: "font",
     defaultValue: "Roboto"
   });
@@ -4233,7 +4321,7 @@ function registerVariableTypes() {
     isActive: false,
     icon: import_icons16.ExpandDiagonalIcon,
     propTypeUtil: sizeVariablePropTypeUtil,
-    fallbackPropTypeUtil: import_editor_props5.sizePropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props6.sizePropTypeUtil,
     styleTransformer: EmptyTransformer,
     variableType: "size",
     selectionFilter: () => [],
@@ -4259,7 +4347,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 var React38 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_ui35 = require("@elementor/ui");
 var VARIABLES_WRAPPER = ":root";
@@ -4278,8 +4366,8 @@ function usePortalContainer() {
   return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters4.getCanvasIframeDocument)()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react28.useState)({});
-  (0, import_react28.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react29.useState)({});
+  (0, import_react29.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4299,21 +4387,21 @@ function convertToCssVariables(variables) {
 
 // src/repeater-injections.ts
 var import_editor_controls17 = require("@elementor/editor-controls");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_props10 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
 var React39 = __toESM(require("react"));
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_props9 = require("@elementor/editor-props");
 var import_ui36 = require("@elementor/ui");
 var import_i18n27 = require("@wordpress/i18n");
 
 // src/utils/size-value.ts
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_props8 = require("@elementor/editor-props");
 
 // src/prop-types/custom-size-variable-prop-type.ts
-var import_editor_props6 = require("@elementor/editor-props");
+var import_editor_props7 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
-var customSizeVariablePropTypeUtil = (0, import_editor_props6.createPropUtils)("global-custom-size-variable", import_schema5.z.string());
+var customSizeVariablePropTypeUtil = (0, import_editor_props7.createPropUtils)("global-custom-size-variable", import_schema5.z.string());
 
 // src/utils/size-value.ts
 var DEFAULT_UNIT = "px";
@@ -4323,7 +4411,7 @@ function sizeValue(value) {
     const variable = getVariable(value?.value);
     return variable?.value;
   }
-  if (import_editor_props7.sizePropTypeUtil.isValid(value)) {
+  if (import_editor_props8.sizePropTypeUtil.isValid(value)) {
     const { size, unit } = value.value;
     if ("custom" !== unit) {
       return `${size ?? 0}${unit ?? DEFAULT_UNIT}`;
@@ -4354,14 +4442,14 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
   return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var FilterDropShadowIconIndicator = ({ value }) => {
-  const { args } = import_editor_props8.cssFilterFunctionPropUtil.extract(value) || {};
-  const { color } = import_editor_props8.dropShadowFilterPropTypeUtil.extract(args) || {};
+  const { args } = import_editor_props9.cssFilterFunctionPropUtil.extract(value) || {};
+  const { color } = import_editor_props9.dropShadowFilterPropTypeUtil.extract(args) || {};
   const colorVariable = getVariable(color?.value || "");
   return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
 var FilterSingleSizeRepeaterLabel = ({ value }) => {
-  const cssFilterFunction = import_editor_props8.cssFilterFunctionPropUtil.extract(value);
-  if (import_editor_props8.dropShadowFilterPropTypeUtil.isValid(cssFilterFunction?.args)) {
+  const cssFilterFunction = import_editor_props9.cssFilterFunctionPropUtil.extract(value);
+  if (import_editor_props9.dropShadowFilterPropTypeUtil.isValid(cssFilterFunction?.args)) {
     return null;
   }
   const args = cssFilterFunction?.args;
@@ -4370,8 +4458,8 @@ var FilterSingleSizeRepeaterLabel = ({ value }) => {
   return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(import_ui36.Box, { component: "span", style: { textTransform: "capitalize" } }, `${func}: `), /* @__PURE__ */ React39.createElement(import_ui36.Box, { component: "span" }, rendered));
 };
 var FilterDropShadowRepeaterLabel = ({ value }) => {
-  const { args } = import_editor_props8.cssFilterFunctionPropUtil.extract(value) || {};
-  const { xAxis, yAxis, blur } = import_editor_props8.dropShadowFilterPropTypeUtil.extract(args) || {};
+  const { args } = import_editor_props9.cssFilterFunctionPropUtil.extract(value) || {};
+  const { xAxis, yAxis, blur } = import_editor_props9.dropShadowFilterPropTypeUtil.extract(args) || {};
   const labels = [];
   for (const val of [xAxis, yAxis, blur]) {
     const rendered = sizeValue(val);
@@ -4382,7 +4470,7 @@ var FilterDropShadowRepeaterLabel = ({ value }) => {
   return /* @__PURE__ */ React39.createElement(import_ui36.Box, { component: "span" }, (0, import_i18n27.__)("Drop shadow:", "elementor"), " ", labels.join(" "));
 };
 var BoxShadowRepeaterLabel = ({ value }) => {
-  const { position, hOffset, vOffset, blur, spread } = import_editor_props8.shadowPropTypeUtil.extract(value) || {};
+  const { position, hOffset, vOffset, blur, spread } = import_editor_props9.shadowPropTypeUtil.extract(value) || {};
   const labels = [];
   for (const val of [hOffset, vOffset, blur, spread]) {
     const rendered = sizeValue(val);
@@ -4395,9 +4483,9 @@ var BoxShadowRepeaterLabel = ({ value }) => {
 };
 var TransformRepeaterLabel = ({ value }) => {
   const labels = [];
-  if (import_editor_props8.moveTransformPropTypeUtil.isValid(value)) {
+  if (import_editor_props9.moveTransformPropTypeUtil.isValid(value)) {
     labels.push((0, import_i18n27.__)("Move:", "elementor"));
-    const { x, y, z: z6 } = import_editor_props8.moveTransformPropTypeUtil.extract(value) || {};
+    const { x, y, z: z6 } = import_editor_props9.moveTransformPropTypeUtil.extract(value) || {};
     for (const val of [x, y, z6]) {
       const rendered = sizeValue(val);
       if (rendered) {
@@ -4411,7 +4499,7 @@ var TransitionsSizeVariableLabel = ({ value: prop }) => {
   let label = "";
   const variableId = prop?.value?.size?.value || "";
   const variable = getVariable(variableId);
-  if (variable && import_editor_props8.selectionSizePropTypeUtil.isValid(prop)) {
+  if (variable && import_editor_props9.selectionSizePropTypeUtil.isValid(prop)) {
     const selection = prop.value?.selection?.value?.key?.value;
     if (selection) {
       label += `${selection}: `;
@@ -4434,14 +4522,14 @@ function backgroundOverlayRepeaterInjections() {
     id: "background-color-variables-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value }) => {
-      return hasAssignedColorVariable(import_editor_props9.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
+      return hasAssignedColorVariable(import_editor_props10.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
   (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
     id: "background-color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value }) => {
-      return hasAssignedColorVariable(import_editor_props9.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
+      return hasAssignedColorVariable(import_editor_props10.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
 }
@@ -4450,7 +4538,7 @@ function boxShadowRepeaterInjections() {
     id: "box-shadow-color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value }) => {
-      const { color } = import_editor_props9.shadowPropTypeUtil.extract(value) || {};
+      const { color } = import_editor_props10.shadowPropTypeUtil.extract(value) || {};
       return hasAssignedColorVariable(color);
     }
   });
@@ -4458,7 +4546,7 @@ function boxShadowRepeaterInjections() {
     id: "color-variables-box-shadow-label",
     component: BoxShadowRepeaterLabel,
     condition: ({ value }) => {
-      const { hOffset, vOffset, blur, spread } = import_editor_props9.shadowPropTypeUtil.extract(value) || {};
+      const { hOffset, vOffset, blur, spread } = import_editor_props10.shadowPropTypeUtil.extract(value) || {};
       return hasAssignedSizeVariable(hOffset) || hasAssignedSizeVariable(vOffset) || hasAssignedSizeVariable(blur) || hasAssignedSizeVariable(spread);
     }
   });
@@ -4468,8 +4556,8 @@ function transformRepeaterInjections() {
     id: "transform-size-variables-label",
     component: TransformRepeaterLabel,
     condition: ({ value }) => {
-      if (import_editor_props9.moveTransformPropTypeUtil.isValid(value)) {
-        const { x: xAxis, y: yAxis, z: zAxis } = import_editor_props9.moveTransformPropTypeUtil.extract(value) || {};
+      if (import_editor_props10.moveTransformPropTypeUtil.isValid(value)) {
+        const { x: xAxis, y: yAxis, z: zAxis } = import_editor_props10.moveTransformPropTypeUtil.extract(value) || {};
         return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(zAxis);
       }
       return false;
@@ -4481,7 +4569,7 @@ function transitionsRepeaterInjections() {
     id: "transition-size-variables-label",
     component: TransitionsSizeVariableLabel,
     condition: ({ value }) => {
-      return hasAssignedSizeVariable(import_editor_props9.selectionSizePropTypeUtil.extract(value)?.size);
+      return hasAssignedSizeVariable(import_editor_props10.selectionSizePropTypeUtil.extract(value)?.size);
     }
   });
 }
@@ -4490,12 +4578,12 @@ function filterRepeaterInjections() {
     id: "filters-color-variables-icon",
     component: FilterDropShadowIconIndicator,
     condition: ({ value }) => {
-      if (!import_editor_props9.cssFilterFunctionPropUtil.isValid(value)) {
+      if (!import_editor_props10.cssFilterFunctionPropUtil.isValid(value)) {
         return false;
       }
-      const args = import_editor_props9.cssFilterFunctionPropUtil.extract(value)?.args;
-      if (import_editor_props9.dropShadowFilterPropTypeUtil.isValid(args)) {
-        return hasAssignedColorVariable(import_editor_props9.dropShadowFilterPropTypeUtil.extract(args)?.color);
+      const args = import_editor_props10.cssFilterFunctionPropUtil.extract(value)?.args;
+      if (import_editor_props10.dropShadowFilterPropTypeUtil.isValid(args)) {
+        return hasAssignedColorVariable(import_editor_props10.dropShadowFilterPropTypeUtil.extract(args)?.color);
       }
       return false;
     }
@@ -4504,12 +4592,12 @@ function filterRepeaterInjections() {
     id: "filters-drop-shadow-size-variables-label",
     component: FilterDropShadowRepeaterLabel,
     condition: ({ value }) => {
-      if (!import_editor_props9.cssFilterFunctionPropUtil.isValid(value)) {
+      if (!import_editor_props10.cssFilterFunctionPropUtil.isValid(value)) {
         return false;
       }
-      const args = import_editor_props9.cssFilterFunctionPropUtil.extract(value)?.args;
-      if (import_editor_props9.dropShadowFilterPropTypeUtil.isValid(args)) {
-        const { xAxis, yAxis, blur } = import_editor_props9.dropShadowFilterPropTypeUtil.extract(args) || {};
+      const args = import_editor_props10.cssFilterFunctionPropUtil.extract(value)?.args;
+      if (import_editor_props10.dropShadowFilterPropTypeUtil.isValid(args)) {
+        const { xAxis, yAxis, blur } = import_editor_props10.dropShadowFilterPropTypeUtil.extract(args) || {};
         return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(blur);
       }
       return false;
@@ -4519,10 +4607,10 @@ function filterRepeaterInjections() {
     id: "filters-size-variables-label",
     component: FilterSingleSizeRepeaterLabel,
     condition: ({ value }) => {
-      if (!import_editor_props9.cssFilterFunctionPropUtil.isValid(value)) {
+      if (!import_editor_props10.cssFilterFunctionPropUtil.isValid(value)) {
         return false;
       }
-      const args = import_editor_props9.cssFilterFunctionPropUtil.extract(value)?.args;
+      const args = import_editor_props10.cssFilterFunctionPropUtil.extract(value)?.args;
       return hasAssignedSizeVariable(args?.value?.size);
     }
   });
@@ -4563,7 +4651,7 @@ function init() {
     useProps: usePropVariableAction
   });
   service.init();
-  const variablesMcpRegistry = (0, import_editor_mcp2.getMCPByDomain)("variables", {
+  const variablesMcpRegistry = (0, import_editor_mcp3.getMCPByDomain)("variables", {
     instructions: `Everything related to V4 ( Atomic ) variables.
 # Global variables
 - Create/update/delete global variables
@@ -4571,7 +4659,7 @@ function init() {
 - Get details of a global variable
 `
   });
-  initMcp(variablesMcpRegistry, (0, import_editor_mcp2.getMCPByDomain)("canvas"));
+  initMcp(variablesMcpRegistry, (0, import_editor_mcp3.getMCPByDomain)("canvas"));
   (0, import_editor.injectIntoTop)({
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
@@ -4580,9 +4668,13 @@ function init() {
     id: "variables-import-listener",
     component: GlobalStylesImportListener
   });
+  (0, import_editor.injectIntoLogic)({
+    id: "mcp-variable-connect-listener",
+    component: McpVariableConnectListener
+  });
 }
 function hasVariableAssigned(value) {
-  if ((0, import_editor_props10.isTransformable)(value)) {
+  if ((0, import_editor_props11.isTransformable)(value)) {
     return hasVariableType(value.$$type);
   }
   return false;