@elementor/editor-variables 4.0.0-683 → 4.0.0

package/dist/index.js

@@ -45,181 +45,16 @@ module.exports = __toCommonJS(index_exports);
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_controls18 = require("@elementor/editor-controls");
+var import_editor_mcp = require("@elementor/editor-mcp");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_menus = require("@elementor/menus");
 
-// src/components/open-panel-from-event.tsx
-var import_react14 = require("react");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-
-// src/components/variables-manager/variables-manager-panel.tsx
-var React14 = __toESM(require("react"));
-var import_react13 = require("react");
-var import_editor_current_user2 = require("@elementor/editor-current-user");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons5 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
-
-// src/utils/tracking.ts
-var import_events = require("@elementor/events");
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  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 || "",
-    var_type: varType,
-    control_path: controlPath,
-    action_type: name
-  });
-};
-var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
-  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  const eventData = {
-    location: config?.locations?.variablesManager || "",
-    trigger: config?.triggers?.click || "",
-    action_type: name
-  };
-  if (varType) {
-    eventData.var_type = varType;
-  }
-  if (controlPath) {
-    eventData.style_control_path = controlPath;
-  }
-  dispatchEvent?.(name, eventData);
-};
-
-// src/utils/validations.ts
-var import_icons = require("@elementor/icons");
-var import_i18n = require("@wordpress/i18n");
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: (0, import_i18n.__)("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: (0, import_i18n.__)("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: (0, import_i18n.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: (0, import_i18n.__)("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n.__)("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: (0, import_i18n.__)("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: (0, import_i18n.__)("There was a glitch. Try saving your variable again.", "elementor"),
-  BATCH: {
-    DUPLICATED_LABELS: (count, name) => (
-      // eslint-disable-next-line @wordpress/i18n-translator-comments
-      (0, import_i18n.sprintf)((0, import_i18n.__)("We found %1$d duplicated %2$s.", "elementor"), count, name)
-    ),
-    UNEXPECTED_ERROR: (0, import_i18n.__)("There was a glitch.", "elementor"),
-    DUPLICATED_LABEL_ACTION: (0, import_i18n.__)("Take me there", "elementor"),
-    DUPLICATED_LABEL_ACTION_MESSAGE: (0, import_i18n.__)("Please rename the variables.", "elementor"),
-    UNEXPECTED_ERROR_ACTION_MESSAGE: (0, import_i18n.__)("Try saving your variables again.", "elementor")
-  }
-};
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  if (error?.response?.data?.code === "duplicated_label") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.DUPLICATED_LABEL
-    };
-  }
-  if (error?.response?.data?.code === "batch_duplicated_label") {
-    const errorData = error?.response?.data?.data ?? {};
-    const count = Object.keys(errorData).length;
-    const name = count === 1 ? "name" : "names";
-    const duplicatedIds = Object.keys(errorData);
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
-      severity: "error",
-      IconComponent: import_icons.AlertTriangleFilledIcon,
-      action: {
-        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
-        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
-        data: {
-          duplicatedIds
-        }
-      }
-    };
-  }
-  if (error?.response?.data?.code === "batch_operation_failed") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
-      severity: "secondary",
-      IconComponent: import_icons.InfoCircleFilledIcon,
-      action: {
-        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
-      }
-    };
-  }
-  return void 0;
-};
-var validateLabel = (name, variables) => {
-  if (!name.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
-  }
-  const allowedChars = /^[a-zA-Z0-9_-]+$/;
-  if (!allowedChars.test(name)) {
-    return ERROR_MESSAGES.INVALID_CHARACTERS;
-  }
-  const hasAlphanumeric = /[a-zA-Z0-9]/;
-  if (!hasAlphanumeric.test(name)) {
-    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
-  }
-  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
-    return ERROR_MESSAGES.DUPLICATED_LABEL;
-  }
-  return "";
-};
-var labelHint = (name) => {
-  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
-  if (hintThreshold < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  return "";
-};
-var validateValue = (value) => {
-  if (!value.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
-  }
-  return "";
-};
-
-// src/variables-registry/create-variable-type-registry.ts
-var import_editor_canvas3 = require("@elementor/editor-canvas");
-
-// src/transformers/inheritance-transformer.tsx
-var React = __toESM(require("react"));
-var import_editor_canvas = require("@elementor/editor-canvas");
-var import_ui2 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
-
-// src/components/ui/color-indicator.tsx
-var import_ui = require("@elementor/ui");
-var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
-
-// src/prop-types/color-variable-prop-type.ts
-var import_editor_props = require("@elementor/editor-props");
-var import_schema = require("@elementor/schema");
-var colorVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-color-variable", import_schema.z.string());
+// src/components/global-styles-import-listener.tsx
+var import_react = require("react");
 
 // src/service.ts
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n = require("@wordpress/i18n");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -384,9 +219,9 @@ var Storage = class {
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
 // src/prop-types/font-variable-prop-type.ts
-var import_editor_props2 = require("@elementor/editor-props");
-var import_schema2 = require("@elementor/schema");
-var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
+var import_editor_props = require("@elementor/editor-props");
+var import_schema = require("@elementor/schema");
+var fontVariablePropTypeUtil = (0, import_editor_props.createPropUtils)("global-font-variable", import_schema.z.string());
 
 // src/create-style-variables-repository.ts
 var createStyleVariablesRepository = () => {
@@ -498,7 +333,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -520,7 +355,7 @@ var service = {
     return apiClient.update(id2, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || (0, import_i18n2.__)("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || (0, import_i18n.__)("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -601,15 +436,15 @@ var service = {
       handleWatermark(OP_RW, watermark);
       if (results) {
         results.forEach((result) => {
+          const variableId = result.id;
           if (result.variable) {
-            const { id: variableId, ...variableData } = result.variable;
             if (result.type === "create") {
-              storage.add(variableId, variableData);
+              storage.add(variableId, result.variable);
             } else {
-              storage.update(variableId, variableData);
+              storage.update(variableId, result.variable);
             }
             styleVariablesRepository.update({
-              [variableId]: variableData
+              [variableId]: result.variable
             });
           }
         });
@@ -629,6 +464,219 @@ var handleWatermark = (operation, newWatermark) => {
   storage.watermark(newWatermark);
 };
 
+// src/components/global-styles-import-listener.tsx
+function GlobalStylesImportListener() {
+  (0, import_react.useEffect)(() => {
+    const handleGlobalStylesImported = (event) => {
+      const importedVars = event.detail?.global_variables;
+      if (!importedVars) {
+        return;
+      }
+      if (importedVars.data && typeof importedVars.data === "object") {
+        styleVariablesRepository.update(importedVars.data);
+      }
+      service.load();
+    };
+    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
+    return () => {
+      window.removeEventListener(
+        "elementor/global-styles/imported",
+        handleGlobalStylesImported
+      );
+    };
+  }, []);
+  return null;
+}
+
+// src/components/open-panel-from-event.tsx
+var import_react15 = require("react");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+
+// src/components/variables-manager/variables-manager-panel.tsx
+var React14 = __toESM(require("react"));
+var import_react14 = require("react");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_icons5 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+
+// src/utils/tracking.ts
+var import_events = require("@elementor/events");
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  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 || "",
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
+var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
+  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  const eventData = {
+    location: config?.locations?.variablesManager || "",
+    trigger: config?.triggers?.click || "",
+    action_type: name
+  };
+  if (varType) {
+    eventData.var_type = varType;
+  }
+  if (controlPath) {
+    eventData.style_control_path = 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 {
+  }
+};
+
+// src/utils/validations.ts
+var import_icons = require("@elementor/icons");
+var import_i18n2 = require("@wordpress/i18n");
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: (0, import_i18n2.__)("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: (0, import_i18n2.__)("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: (0, import_i18n2.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: (0, import_i18n2.__)("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n2.__)("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: (0, import_i18n2.__)("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: (0, import_i18n2.__)("There was a glitch. Try saving your variable again.", "elementor"),
+  BATCH: {
+    DUPLICATED_LABELS: (count, name) => (
+      // eslint-disable-next-line @wordpress/i18n-translator-comments
+      (0, import_i18n2.sprintf)((0, import_i18n2.__)("We found %1$d duplicated %2$s.", "elementor"), count, name)
+    ),
+    UNEXPECTED_ERROR: (0, import_i18n2.__)("There was a glitch.", "elementor"),
+    DUPLICATED_LABEL_ACTION: (0, import_i18n2.__)("Take me there", "elementor"),
+    DUPLICATED_LABEL_ACTION_MESSAGE: (0, import_i18n2.__)("Please rename the variables.", "elementor"),
+    UNEXPECTED_ERROR_ACTION_MESSAGE: (0, import_i18n2.__)("Try saving your variables again.", "elementor")
+  }
+};
+var VARIABLE_LABEL_MAX_LENGTH = 50;
+var mapServerError = (error) => {
+  if (error?.response?.data?.code === "duplicated_label") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.DUPLICATED_LABEL
+    };
+  }
+  if (error?.response?.data?.code === "batch_duplicated_label") {
+    const errorData = error?.response?.data?.data ?? {};
+    const count = Object.keys(errorData).length;
+    const name = count === 1 ? "name" : "names";
+    const duplicatedIds = Object.keys(errorData);
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
+      severity: "error",
+      IconComponent: import_icons.AlertTriangleFilledIcon,
+      action: {
+        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
+        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
+        data: {
+          duplicatedIds
+        }
+      }
+    };
+  }
+  if (error?.response?.data?.code === "batch_operation_failed") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+      severity: "secondary",
+      IconComponent: import_icons.InfoCircleFilledIcon,
+      action: {
+        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
+      }
+    };
+  }
+  return void 0;
+};
+var validateLabel = (name, variables) => {
+  if (!name.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
+    return ERROR_MESSAGES.DUPLICATED_LABEL;
+  }
+  return "";
+};
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  }
+  return "";
+};
+
+// src/variables-registry/create-variable-type-registry.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
+
+// src/transformers/inheritance-transformer.tsx
+var React = __toESM(require("react"));
+var import_editor_canvas = require("@elementor/editor-canvas");
+var import_ui2 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/components/ui/color-indicator.tsx
+var import_ui = require("@elementor/ui");
+var ColorIndicator = (0, import_ui.styled)(import_ui.UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
+
+// src/prop-types/color-variable-prop-type.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var import_schema2 = require("@elementor/schema");
+var colorVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-color-variable", import_schema2.z.string());
+
 // src/transformers/utils/resolve-css-variable.ts
 var resolveCssVariable = (id2, variable) => {
   let name = id2;
@@ -831,13 +879,13 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
 };
 
 // src/components/variables-manager/hooks/use-auto-edit.ts
-var import_react = require("react");
+var import_react2 = require("react");
 var useAutoEdit = () => {
-  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react.useState)(void 0);
-  const startAutoEdit = (0, import_react.useCallback)((variableId) => {
+  const [autoEditVariableId, setAutoEditVariableId] = (0, import_react2.useState)(void 0);
+  const startAutoEdit = (0, import_react2.useCallback)((variableId) => {
     setAutoEditVariableId(variableId);
   }, []);
-  const handleAutoEditComplete = (0, import_react.useCallback)(() => {
+  const handleAutoEditComplete = (0, import_react2.useCallback)(() => {
     setTimeout(() => {
       setAutoEditVariableId(void 0);
     }, 100);
@@ -850,10 +898,10 @@ var useAutoEdit = () => {
 };
 
 // src/components/variables-manager/hooks/use-error-navigation.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var useErrorNavigation = () => {
-  const currentIndexRef = (0, import_react2.useRef)(0);
-  const createNavigationCallback = (0, import_react2.useCallback)(
+  const currentIndexRef = (0, import_react3.useRef)(0);
+  const createNavigationCallback = (0, import_react3.useCallback)(
     (ids, onNavigate, onComplete) => {
       return () => {
         if (!ids?.length) {
@@ -875,7 +923,7 @@ var useErrorNavigation = () => {
     },
     []
   );
-  const resetNavigation = (0, import_react2.useCallback)(() => {
+  const resetNavigation = (0, import_react3.useCallback)(() => {
     currentIndexRef.current = 0;
   }, []);
   return {
@@ -885,21 +933,21 @@ var useErrorNavigation = () => {
 };
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/hooks/use-prop-variables.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 
 // src/context/variable-type-context.tsx
 var React5 = __toESM(require("react"));
-var import_react3 = require("react");
-var VariableTypeContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var VariableTypeContext = (0, import_react4.createContext)(null);
 function VariableTypeProvider({ children, propTypeKey }) {
   return /* @__PURE__ */ React5.createElement(VariableTypeContext.Provider, { value: propTypeKey }, children);
 }
 function useVariableType() {
-  const context = (0, import_react3.useContext)(VariableTypeContext);
+  const context = (0, import_react4.useContext)(VariableTypeContext);
   if (context === null) {
     throw new Error("useVariableType must be used within a VariableTypeProvider");
   }
@@ -982,7 +1030,7 @@ var useVariableSelectionFilter = (variables) => {
   return selectionFilter ? selectionFilter(variables, propType) : variables;
 };
 var usePropVariables = (propKey) => {
-  return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
+  return (0, import_react5.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
 var getMatchingTypes = (propKey) => {
   const matchingTypes = [];
@@ -1016,20 +1064,20 @@ var restoreVariable = (restoreId, label, value, type) => {
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
 var useVariablesManagerState = () => {
-  const [variables, setVariables] = (0, import_react5.useState)(() => getVariables(false));
-  const [deletedVariables, setDeletedVariables] = (0, import_react5.useState)([]);
-  const [isSaveDisabled, setIsSaveDisabled] = (0, import_react5.useState)(false);
-  const [isDirty, setIsDirty] = (0, import_react5.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
-  const handleOnChange = (0, import_react5.useCallback)(
+  const [variables, setVariables] = (0, import_react6.useState)(() => getVariables(false));
+  const [deletedVariables, setDeletedVariables] = (0, import_react6.useState)([]);
+  const [isSaveDisabled, setIsSaveDisabled] = (0, import_react6.useState)(false);
+  const [isDirty, setIsDirty] = (0, import_react6.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react6.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react6.useState)("");
+  const handleOnChange = (0, import_react6.useCallback)(
     (newVariables) => {
       setVariables({ ...variables, ...newVariables });
       setIsDirty(true);
     },
     [variables]
   );
-  const createVariable2 = (0, import_react5.useCallback)((type, defaultName, defaultValue) => {
+  const createVariable2 = (0, import_react6.useCallback)((type, defaultName, defaultValue) => {
     const newId = generateTempId();
     const newVariable = {
       id: newId,
@@ -1041,19 +1089,19 @@ var useVariablesManagerState = () => {
     setIsDirty(true);
     return newId;
   }, []);
-  const handleDeleteVariable = (0, import_react5.useCallback)((itemId) => {
+  const handleDeleteVariable = (0, import_react6.useCallback)((itemId) => {
     setDeletedVariables((prev) => [...prev, itemId]);
     setVariables((prev) => ({ ...prev, [itemId]: { ...prev[itemId], deleted: true } }));
     setIsDirty(true);
   }, []);
-  const handleStartSync = (0, import_react5.useCallback)((itemId) => {
+  const handleStartSync = (0, import_react6.useCallback)((itemId) => {
     setVariables((prev) => ({
       ...prev,
       [itemId]: { ...prev[itemId], sync_to_v3: true }
     }));
     setIsDirty(true);
   }, []);
-  const handleStopSync = (0, import_react5.useCallback)((itemId) => {
+  const handleStopSync = (0, import_react6.useCallback)((itemId) => {
     setVariables((prev) => ({
       ...prev,
       [itemId]: { ...prev[itemId], sync_to_v3: false }
@@ -1063,7 +1111,7 @@ var useVariablesManagerState = () => {
   const handleSearch = (searchTerm) => {
     setSearchValue(searchTerm);
   };
-  const handleSave = (0, import_react5.useCallback)(async () => {
+  const handleSave = (0, import_react6.useCallback)(async () => {
     const originalVariables = getVariables(false);
     setIsSaving(true);
     const result = await service.batchSave(originalVariables, variables, deletedVariables);
@@ -1076,7 +1124,7 @@ var useVariablesManagerState = () => {
     }
     return { success: result.success };
   }, [variables, deletedVariables]);
-  const filteredVariables = (0, import_react5.useCallback)(() => {
+  const filteredVariables = (0, import_react6.useCallback)(() => {
     const list = variablesToList(variables).filter((v) => !v.deleted);
     const typeFiltered = applySelectionFilters(list, getVariableTypes());
     const searchFiltered = filterBySearch(typeFiltered, searchValue);
@@ -1103,7 +1151,7 @@ var useVariablesManagerState = () => {
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
 var React7 = __toESM(require("react"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_icons2 = require("@elementor/icons");
 var import_ui7 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
@@ -1126,17 +1174,17 @@ var useQuotaPermissions = (variableType) => {
 
 // src/components/ui/variable-promotion-chip.tsx
 var React6 = __toESM(require("react"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui6 = require("@elementor/ui");
 var import_utils = require("@elementor/utils");
 var import_i18n7 = require("@wordpress/i18n");
-var VariablePromotionChip = (0, import_react6.forwardRef)(
+var VariablePromotionChip = (0, import_react7.forwardRef)(
   ({ variableType, upgradeUrl, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
     (0, import_editor_ui2.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
-    const toggle = (0, import_react6.useCallback)(() => {
+    const toggle = (0, import_react7.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           (0, import_editor_controls2.trackViewPromotion)(trackingData);
@@ -1144,7 +1192,7 @@ var VariablePromotionChip = (0, import_react6.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react6.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    (0, import_react7.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     const title = (0, import_i18n7.sprintf)(
       /* translators: %s: Variable Type. */
       (0, import_i18n7.__)("%s variables", "elementor"),
@@ -1192,9 +1240,9 @@ var TRACKING_DATA = {
 };
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
-  const buttonRef = (0, import_react7.useRef)(null);
+  const buttonRef = (0, import_react8.useRef)(null);
   const variableTypes = getVariableTypes();
-  const menuOptionConfigs = (0, import_react7.useMemo)(
+  const menuOptionConfigs = (0, import_react8.useMemo)(
     () => Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => ({
       key,
       propTypeKey: variable.propTypeUtil.key,
@@ -1253,7 +1301,7 @@ var MenuOption = ({
   onCreate,
   onClose
 }) => {
-  const promotionRef = (0, import_react7.useRef)(null);
+  const promotionRef = (0, import_react8.useRef)(null);
   const userQuotaPermissions = useQuotaPermissions(config.propTypeKey);
   const displayName = (0, import_utils2.capitalize)(config.variableType);
   const isDisabled = !userQuotaPermissions.canAdd();
@@ -1267,7 +1315,7 @@ var MenuOption = ({
     trackVariablesManagerEvent({ action: "add", varType: config.variableType });
     onClose();
   };
-  return /* @__PURE__ */ React7.createElement(import_ui7.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, (0, import_react7.createElement)(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_ui7.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, (0, import_react8.createElement)(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React7.createElement(
     VariablePromotionChip,
     {
       variableType: config.variableType,
@@ -1295,7 +1343,7 @@ var getDefaultName = (variables, baseName) => {
 
 // src/components/variables-manager/variables-manager-table.tsx
 var React13 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_ui13 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 
@@ -1325,21 +1373,21 @@ var VariableTableCell = ({
 
 // src/components/variables-manager/ui/variable-table-row.tsx
 var React12 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 
 // src/components/fields/label-field.tsx
 var React9 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_ui9 = require("@elementor/ui");
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
 var useLabelError = (initialError) => {
-  const [error, setError] = (0, import_react8.useState)(initialError ?? { value: "", message: "" });
+  const [error, setError] = (0, import_react9.useState)(initialError ?? { value: "", message: "" });
   return {
     labelFieldError: error,
     setLabelFieldError: setError
@@ -1358,9 +1406,9 @@ var LabelField = ({
   variables,
   onKeyDown
 }) => {
-  const [label, setLabel] = (0, import_react8.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
-  const fieldRef = (0, import_react8.useRef)(null);
+  const [label, setLabel] = (0, import_react9.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
+  const fieldRef = (0, import_react9.useRef)(null);
   const handleChange = (newValue) => {
     setLabel(newValue);
     const errorMsg2 = validateLabel(newValue, variables);
@@ -1412,7 +1460,7 @@ var LabelField = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 var React10 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_ui10 = require("@elementor/ui");
 var VariableEditableCell = React10.memo(
   ({
@@ -1428,22 +1476,22 @@ var VariableEditableCell = React10.memo(
     fieldType,
     disabled = false
   }) => {
-    const [value, setValue] = (0, import_react9.useState)(initialValue);
-    const [isEditing, setIsEditing] = (0, import_react9.useState)(false);
+    const [value, setValue] = (0, import_react10.useState)(initialValue);
+    const [isEditing, setIsEditing] = (0, import_react10.useState)(false);
     const { labelFieldError, setLabelFieldError } = useLabelError();
-    const [valueFieldError, setValueFieldError] = (0, import_react9.useState)("");
-    const rowRef = (0, import_react9.useRef)(null);
-    const handleSave = (0, import_react9.useCallback)(() => {
+    const [valueFieldError, setValueFieldError] = (0, import_react10.useState)("");
+    const rowRef = (0, import_react10.useRef)(null);
+    const handleSave = (0, import_react10.useCallback)(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
       if (!hasError) {
         onChange(value);
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (autoEdit && !isEditing && !disabled) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1469,10 +1517,10 @@ var VariableEditableCell = React10.memo(
         setIsEditing(true);
       }
     };
-    const handleChange = (0, import_react9.useCallback)((newValue) => {
+    const handleChange = (0, import_react10.useCallback)((newValue) => {
       setValue(newValue);
     }, []);
-    const handleValidationChange = (0, import_react9.useCallback)(
+    const handleValidationChange = (0, import_react10.useCallback)(
       (errorMsg) => {
         if (fieldType === "label") {
           setLabelFieldError({
@@ -1536,7 +1584,7 @@ var VariableEditableCell = React10.memo(
 
 // src/components/variables-manager/ui/variable-edit-menu.tsx
 var React11 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
 var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
@@ -1593,7 +1641,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
           gap: 1
         }
       },
-      action.icon && (0, import_react10.createElement)(action.icon, {
+      action.icon && (0, import_react11.createElement)(action.icon, {
         fontSize: "inherit"
       }),
       " ",
@@ -1624,7 +1672,7 @@ var VariableRow = (props) => {
     setTriggerRef,
     isSorting
   } = props;
-  const promotionRef = (0, import_react11.useRef)(null);
+  const promotionRef = (0, import_react12.useRef)(null);
   const isDisabled = !useQuotaPermissions(row.type).canEdit();
   const showIndicationBefore = showDropIndication && dropPosition === "before";
   const showIndicationAfter = showDropIndication && dropPosition === "after";
@@ -1682,7 +1730,7 @@ var VariableRow = (props) => {
             });
           }
         },
-        prefixElement: (0, import_react11.createElement)(row.icon, {
+        prefixElement: (0, import_react12.createElement)(row.icon, {
           fontSize: "inherit",
           color: isDisabled ? "disabled" : "inherit"
         }),
@@ -1782,9 +1830,9 @@ var VariablesManagerTable = ({
   onAutoEditComplete,
   onFieldError
 }) => {
-  const tableContainerRef = (0, import_react12.useRef)(null);
-  const variableRowRefs = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react12.useEffect)(() => {
+  const tableContainerRef = (0, import_react13.useRef)(null);
+  const variableRowRefs = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react13.useEffect)(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
       if (rowElement) {
@@ -1905,8 +1953,8 @@ function VariablesManagerPanel() {
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
-    handleStartSync,
-    handleStopSync,
+    handleStartSync: startSyncFromState,
+    handleStopSync: stopSyncFromState,
     handleSave,
     isSaving,
     handleSearch,
@@ -1915,9 +1963,9 @@ function VariablesManagerPanel() {
   } = useVariablesManagerState();
   const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
   const { createNavigationCallback, resetNavigation } = useErrorNavigation();
-  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react13.useState)(null);
-  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react13.useState)(null);
-  const [serverError, setServerError] = (0, import_react13.useState)(null);
+  const [deleteConfirmation, setDeleteConfirmation] = (0, import_react14.useState)(null);
+  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react14.useState)(null);
+  const [serverError, setServerError] = (0, import_react14.useState)(null);
   usePreventUnload(isDirty);
   const handleClosePanel = () => {
     if (isDirty) {
@@ -1926,7 +1974,7 @@ function VariablesManagerPanel() {
     }
     closePanel();
   };
-  const handleCreateVariable = (0, import_react13.useCallback)(
+  const handleCreateVariable = (0, import_react14.useCallback)(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
       if (newId) {
@@ -1960,31 +2008,44 @@ function VariablesManagerPanel() {
       setIsSaving(false);
     }
   };
-  const handleDeleteVariableWithConfirmation = (0, import_react13.useCallback)(
+  const handleDeleteVariableWithConfirmation = (0, import_react14.useCallback)(
     (itemId) => {
       handleDeleteVariable(itemId);
       setDeleteConfirmation(null);
     },
     [handleDeleteVariable]
   );
-  const handleStopSyncWithConfirmation = (0, import_react13.useCallback)(
+  const commitStopSync = (0, import_react14.useCallback)(
     (itemId) => {
-      handleStopSync(itemId);
-      setStopSyncConfirmation(null);
+      stopSyncFromState(itemId);
+      const variable = variables[itemId];
+      if (variable) {
+        trackVariableSyncToV3({ variableLabel: variable.label, action: "unsync" });
+      }
     },
-    [handleStopSync]
+    [stopSyncFromState, variables]
   );
-  const handleShowStopSyncDialog = (0, import_react13.useCallback)(
+  const handleStartSync = (0, import_react14.useCallback)(
+    (itemId) => {
+      startSyncFromState(itemId);
+      const variable = variables[itemId];
+      if (variable) {
+        trackVariableSyncToV3({ variableLabel: variable.label, action: "sync" });
+      }
+    },
+    [startSyncFromState, variables]
+  );
+  const handleStopSync = (0, import_react14.useCallback)(
     (itemId) => {
       if (!isStopSyncSuppressed) {
         setStopSyncConfirmation(itemId);
       } else {
-        handleStopSync(itemId);
+        commitStopSync(itemId);
       }
     },
-    [isStopSyncSuppressed, handleStopSync]
+    [isStopSyncSuppressed, commitStopSync]
   );
-  const buildMenuActions = (0, import_react13.useCallback)(
+  const buildMenuActions = (0, import_react14.useCallback)(
     (variableId) => {
       const variable = variables[variableId];
       if (!variable) {
@@ -1995,7 +2056,7 @@ function VariablesManagerPanel() {
         variableId,
         handlers: {
           onStartSync: handleStartSync,
-          onStopSync: handleShowStopSyncDialog
+          onStopSync: handleStopSync
         }
       });
       const deleteAction = {
@@ -2013,7 +2074,7 @@ function VariablesManagerPanel() {
       };
       return [...typeActions, deleteAction];
     },
-    [variables, handleStartSync, handleShowStopSyncDialog]
+    [variables, handleStartSync, handleStopSync]
   );
   const hasVariables = Object.keys(variables).length > 0;
   return /* @__PURE__ */ React14.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React14.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React14.createElement(
@@ -2148,7 +2209,10 @@ function VariablesManagerPanel() {
     {
       open: true,
       onClose: () => setStopSyncConfirmation(null),
-      onConfirm: () => handleStopSyncWithConfirmation(stopSyncConfirmation)
+      onConfirm: () => {
+        commitStopSync(stopSyncConfirmation);
+        setStopSyncConfirmation(null);
+      }
     }
   ), isSaveChangesDialogOpen && /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n10.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.SaveChangesDialog.ContentText, null, (0, import_i18n10.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
     import_editor_ui5.SaveChangesDialog.Actions,
@@ -2176,7 +2240,7 @@ function VariablesManagerPanel() {
   )));
 }
 var usePreventUnload = (isDirty) => {
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -2212,15 +2276,15 @@ var EVENT_NAME = "elementor/open-variables-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements/categories";
 function OpenPanelFromEvent() {
   const { open } = usePanelActions();
-  const pendingRef = (0, import_react14.useRef)(false);
-  const [readyToOpen, setReadyToOpen] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const pendingRef = (0, import_react15.useRef)(false);
+  const [readyToOpen, setReadyToOpen] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
     if (readyToOpen) {
       setReadyToOpen(false);
       open();
     }
   }, [readyToOpen, open]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     return (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
       if (pendingRef.current) {
         pendingRef.current = false;
@@ -2228,7 +2292,7 @@ function OpenPanelFromEvent() {
       }
     });
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const handler = () => {
       pendingRef.current = true;
       (0, import_editor_v1_adapters3.__privateOpenRoute)(DEFAULT_PANEL_ROUTE);
@@ -2240,15 +2304,15 @@ function OpenPanelFromEvent() {
 }
 
 // src/components/open-panel-from-url.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "variables-manager";
 var DEFAULT_PANEL_ROUTE2 = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = (0, import_react15.useRef)(false);
-  (0, import_react15.useEffect)(() => {
+  const hasOpened = (0, import_react16.useRef)(false);
+  (0, import_react16.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2273,7 +2337,7 @@ var React33 = __toESM(require("react"));
 var import_editor_controls13 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var React24 = __toESM(require("react"));
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_icons12 = require("@elementor/icons");
@@ -2297,25 +2361,25 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 var React22 = __toESM(require("react"));
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 
 // src/context/variable-selection-popover.context.tsx
 var React15 = __toESM(require("react"));
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_ui15 = require("@elementor/ui");
-var PopoverContentRefContext = (0, import_react16.createContext)(null);
+var PopoverContentRefContext = (0, import_react17.createContext)(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = (0, import_react16.useState)(null);
+  const [anchorRef, setAnchorRef] = (0, import_react17.useState)(null);
   return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(import_ui15.Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
-  return (0, import_react16.useContext)(PopoverContentRefContext);
+  return (0, import_react17.useContext)(PopoverContentRefContext);
 };
 
 // src/components/variable-creation.tsx
 var React17 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
@@ -2376,11 +2440,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls5.useBoundProp)();
   const initialValue = useInitialValue();
-  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 [value, setValue] = (0, import_react18.useState)(initialValue);
+  const [label, setLabel] = (0, import_react18.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react18.useState)("");
+  const [propTypeKey, setPropTypeKey] = (0, import_react18.useState)(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2464,11 +2528,12 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         },
         onErrorChange: (errorMsg) => {
           setLabelFieldError({
-            value: label,
+            value: "",
             message: errorMsg
           });
         },
-        onKeyDown: handleKeyDown
+        onKeyDown: handleKeyDown,
+        focusOnShow: true
       }
     )
   ), ValueField && /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n11.__)("Value", "elementor") }, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React17.createElement(
@@ -2500,7 +2565,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 var React19 = __toESM(require("react"));
-var import_react19 = require("react");
+var import_react20 = 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");
@@ -2510,7 +2575,7 @@ var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/ui/edit-confirmation-dialog.tsx
 var React18 = __toESM(require("react"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -2520,7 +2585,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react18.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react19.useState)(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -2554,20 +2619,20 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setVariableValue: notifyBoundPropChange, variableId } = 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_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 [deleteConfirmation, setDeleteConfirmation] = (0, import_react20.useState)(false);
+  const [editConfirmation, setEditConfirmation] = (0, import_react20.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_react20.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react20.useState)("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = (0, import_react19.useState)(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = (0, import_react20.useState)(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = (0, import_react19.useState)(() => variable.value);
-  const [label, setLabel] = (0, import_react19.useState)(() => variable.label);
-  (0, import_react19.useEffect)(() => {
+  const [value, setValue] = (0, import_react20.useState)(() => variable.value);
+  const [label, setLabel] = (0, import_react20.useState)(() => variable.label);
+  (0, import_react20.useEffect)(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2690,11 +2755,12 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         },
         onErrorChange: (errorMsg) => {
           setLabelFieldError({
-            value: label,
+            value: "",
             message: errorMsg
           });
         },
-        onKeyDown: handleKeyDown
+        onKeyDown: handleKeyDown,
+        focusOnShow: true
       }
     )
   ), ValueField && /* @__PURE__ */ React19.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n13.__)("Value", "elementor") }, /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "h5" }, /* @__PURE__ */ React19.createElement(
@@ -2731,7 +2797,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var React21 = __toESM(require("react"));
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui9 = require("@elementor/editor-ui");
@@ -2839,7 +2905,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_react20.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react21.useState)("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -2916,7 +2982,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (disabled) {
       (0, import_editor_controls7.trackViewPromotion)({
         target_name: "variables_popover",
@@ -3024,8 +3090,8 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = (0, import_react21.useState)(VIEW_LIST);
-  const [editId, setEditId] = (0, import_react21.useState)("");
+  const [currentView, setCurrentView] = (0, import_react22.useState)(VIEW_LIST);
+  const [editId, setEditId] = (0, import_react22.useState)("");
   const { open } = usePanelActions();
   const onSettingsAvailable = (0, import_editor_v1_adapters5.isExperimentActive)("e_variables_manager") ? () => {
     open();
@@ -3136,8 +3202,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_react22.useRef)(null);
-  const popupId = (0, import_react22.useId)();
+  const anchorRef = (0, import_react23.useRef)(null);
+  const popupId = (0, import_react23.useId)();
   const popupState = (0, import_ui24.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
@@ -3177,14 +3243,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 var React28 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react25 = 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_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_ui25 = require("@elementor/ui");
@@ -3198,11 +3264,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  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 [errorMessage, setErrorMessage] = (0, import_react24.useState)("");
+  const [valueFieldError, setValueFieldError] = (0, import_react24.useState)("");
+  const [label, setLabel] = (0, import_react24.useState)(variable.label);
+  const [value, setValue] = (0, import_react24.useState)(variable.value);
+  const [propTypeKey, setPropTypeKey] = (0, import_react24.useState)(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3275,11 +3341,12 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         },
         onErrorChange: (errorMsg) => {
           setLabelFieldError({
-            value: label,
+            value: "",
             message: errorMsg
           });
         },
-        onKeyDown: handleKeyDown
+        onKeyDown: handleKeyDown,
+        focusOnShow: true
       }
     )
   ), ValueField && /* @__PURE__ */ React25.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n17.__)("Value", "elementor") }, /* @__PURE__ */ React25.createElement(import_ui25.Typography, { variant: "h5" }, /* @__PURE__ */ React25.createElement(
@@ -3358,11 +3425,11 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = (0, import_editor_controls10.useBoundProp)();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = (0, import_react24.useState)(false);
+  const [showInfotip, setShowInfotip] = (0, import_react25.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = (0, import_react24.useRef)(null);
-  const popupId = (0, import_react24.useId)();
+  const deletedChipAnchorRef = (0, import_react25.useRef)(null);
+  const popupId = (0, import_react25.useId)();
   const popupState = (0, import_ui28.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-restore-${popupId}`
@@ -3449,7 +3516,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var React30 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_editor_controls11 = require("@elementor/editor-controls");
 var import_ui30 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
@@ -3487,13 +3554,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_react25.useRef)(null);
-  const popupId = (0, import_react25.useId)();
+  const anchorRef = (0, import_react26.useRef)(null);
+  const popupId = (0, import_react26.useId)();
   const popupState = (0, import_ui30.usePopupState)({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  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 triggerSelect = () => {
@@ -3566,7 +3633,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var React32 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_editor_controls12 = require("@elementor/editor-controls");
 var import_ui32 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
@@ -3596,7 +3663,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_react26.useState)(false);
+  const [infotipVisible, setInfotipVisible] = (0, import_react27.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -3684,22 +3751,15 @@ var trackOpenVariablePopover = (path, variableType) => {
   });
 };
 
-// src/mcp/index.ts
-var import_editor_mcp3 = require("@elementor/editor-mcp");
-
 // src/mcp/manage-variable-tool.ts
-var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_schema3 = require("@elementor/schema");
 
 // src/mcp/variables-resource.ts
-var import_editor_mcp = require("@elementor/editor-mcp");
 var GLOBAL_VARIABLES_URI = "elementor://global-variables";
-var initVariablesResource = () => {
-  const canvasMcpEntry = (0, import_editor_mcp.getMCPByDomain)("canvas");
-  const variablesMcpEntry = (0, import_editor_mcp.getMCPByDomain)("variables");
+var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
   [canvasMcpEntry, variablesMcpEntry].forEach((entry) => {
-    const { mcpServer } = entry;
-    mcpServer.resource(
+    const { resource, sendResourceUpdated } = entry;
+    resource(
       "global-variables",
       GLOBAL_VARIABLES_URI,
       {
@@ -3718,7 +3778,7 @@ var initVariablesResource = () => {
       }
     );
     window.addEventListener("variables:updated", () => {
-      mcpServer.server.sendResourceUpdated({
+      sendResourceUpdated({
         uri: GLOBAL_VARIABLES_URI
       });
     });
@@ -3726,8 +3786,9 @@ var initVariablesResource = () => {
 };
 
 // src/mcp/manage-variable-tool.ts
-var initManageVariableTool = () => {
-  (0, import_editor_mcp2.getMCPByDomain)("variables").addTool({
+var initManageVariableTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
     name: "manage-global-variable",
     schema: {
       action: import_schema3.z.enum(["create", "update", "delete"]).describe("Operation to perform"),
@@ -3797,12 +3858,18 @@ function getServiceActions(svc) {
 }
 
 // src/mcp/index.ts
-function initMcp() {
-  if (!(0, import_editor_mcp3.isAngieAvailable)()) {
-    return;
-  }
-  initManageVariableTool();
-  initVariablesResource();
+function initMcp(reg, canvasMcpEntry) {
+  const { setMCPDescription } = reg;
+  setMCPDescription(
+    `Everything related to V4 ( Atomic ) variables.
+# Global variables
+- Create/update/delete global variables
+- Get list of global variables
+- Get details of a global variable
+`
+  );
+  initManageVariableTool(reg);
+  initVariablesResource(reg, canvasMcpEntry);
 }
 
 // src/register-variable-types.tsx
@@ -3810,18 +3877,17 @@ var React37 = __toESM(require("react"));
 var import_editor_controls16 = require("@elementor/editor-controls");
 var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_ui13 = require("@elementor/editor-ui");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 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_react27 = require("react");
+var import_react28 = require("react");
 var import_ui33 = require("@elementor/ui");
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = (0, import_react27.useState)(value);
-  const [errorMessage, setErrorMessage] = (0, import_react27.useState)("");
-  const defaultRef = (0, import_react27.useRef)(null);
+  const [color, setColor] = (0, import_react28.useState)(value);
+  const [errorMessage, setErrorMessage] = (0, import_react28.useState)("");
+  const defaultRef = (0, import_react28.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -3860,15 +3926,15 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 var React36 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = 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_react28.useState)(value);
-  const defaultRef = (0, import_react28.useRef)(null);
+  const [fontFamily, setFontFamily] = (0, import_react29.useState)(value);
+  const defaultRef = (0, import_react29.useRef)(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = (0, import_ui34.usePopupState)({ variant: "popover" });
   const fontFamilies = (0, import_editor_controls15.useFontFamilies)();
@@ -3889,7 +3955,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     handleChange(newFontFamily);
     fontPopoverState.close();
   };
-  const id2 = (0, import_react28.useId)();
+  const id2 = (0, import_react29.useId)();
   return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     import_ui34.UnstableTag,
     {
@@ -3952,20 +4018,17 @@ function registerVariableTypes() {
     defaultValue: "#ffffff",
     menuActionsFactory: ({ variable, variableId, handlers }) => {
       const actions = [];
-      if (!(0, import_editor_v1_adapters6.isExperimentActive)("e_design_system_sync")) {
-        return [];
-      }
       if (variable.sync_to_v3) {
         actions.push({
           name: (0, import_i18n26.__)("Stop syncing to Global Colors", "elementor"),
-          icon: import_icons16.ResetIcon,
+          icon: import_icons16.RefreshOffIcon,
           color: "text.primary",
           onClick: () => handlers.onStopSync(variableId)
         });
       } else {
         actions.push({
           name: (0, import_i18n26.__)("Sync to Global Colors", "elementor"),
-          icon: import_icons16.ResetIcon,
+          icon: import_icons16.RefreshIcon,
           color: "text.primary",
           onClick: () => handlers.onStartSync(variableId)
         });
@@ -4012,8 +4075,8 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 var React38 = __toESM(require("react"));
-var import_react29 = require("react");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_react30 = require("react");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_ui35 = require("@elementor/ui");
 var VARIABLES_WRAPPER = ":root";
 function StyleVariablesRenderer() {
@@ -4028,11 +4091,11 @@ function StyleVariablesRenderer() {
   return /* @__PURE__ */ React38.createElement(import_ui35.Portal, { container }, /* @__PURE__ */ React38.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters7.__privateUseListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters7.getCanvasIframeDocument)()?.head);
+  return (0, import_editor_v1_adapters6.__privateUseListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters6.getCanvasIframeDocument)()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = (0, import_react29.useState)({});
-  (0, import_react29.useEffect)(() => {
+  const [variables, setVariables] = (0, import_react30.useState)({});
+  (0, import_react30.useEffect)(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4124,12 +4187,16 @@ function init() {
     useProps: usePropVariableAction
   });
   service.init().then(() => {
-    initMcp();
+    initMcp((0, import_editor_mcp.getMCPByDomain)("variables"), (0, import_editor_mcp.getMCPByDomain)("canvas"));
   });
   (0, import_editor.injectIntoTop)({
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
   });
+  (0, import_editor.injectIntoLogic)({
+    id: "variables-import-listener",
+    component: GlobalStylesImportListener
+  });
   (0, import_editor.injectIntoLogic)({
     id: "variables-open-panel-from-url",
     component: OpenPanelFromUrl