@elementor/editor-variables 4.0.0-manual → 4.0.0

package/dist/index.mjs

@@ -1,201 +1,16 @@
 // src/init.ts
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
 import { registerControlReplacement } from "@elementor/editor-controls";
+import { getMCPByDomain } from "@elementor/editor-mcp";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 import { controlActionsMenu } from "@elementor/menus";
 
-// src/components/open-panel-from-url.tsx
-import { useEffect as useEffect4, useRef as useRef7 } from "react";
-import { __privateListenTo as listenTo, routeOpenEvent } from "@elementor/editor-v1-adapters";
-
-// src/components/variables-manager/variables-manager-panel.tsx
-import * as React14 from "react";
-import { useCallback as useCallback5, useEffect as useEffect3, useState as useState6 } from "react";
-import { useSuppressedMessage } from "@elementor/editor-current-user";
-import {
-  __createPanel as createPanel,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
-import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, TrashIcon } from "@elementor/icons";
-import {
-  Alert,
-  AlertAction,
-  AlertTitle,
-  Button as Button2,
-  CloseButton,
-  Divider,
-  Infotip,
-  Stack as Stack6,
-  usePopupState as usePopupState2
-} from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
-
-// src/utils/tracking.ts
-import { getMixpanel } from "@elementor/events";
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const { dispatchEvent, config } = 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 } = 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
-import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
-import { __, sprintf } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __("There was a glitch. Try saving your variable again.", "elementor"),
-  BATCH: {
-    DUPLICATED_LABELS: (count, name) => (
-      // eslint-disable-next-line @wordpress/i18n-translator-comments
-      sprintf(__("We found %1$d duplicated %2$s.", "elementor"), count, name)
-    ),
-    UNEXPECTED_ERROR: __("There was a glitch.", "elementor"),
-    DUPLICATED_LABEL_ACTION: __("Take me there", "elementor"),
-    DUPLICATED_LABEL_ACTION_MESSAGE: __("Please rename the variables.", "elementor"),
-    UNEXPECTED_ERROR_ACTION_MESSAGE: __("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: 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: 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
-import {
-  stylesInheritanceTransformersRegistry,
-  styleTransformersRegistry
-} from "@elementor/editor-canvas";
-
-// src/transformers/inheritance-transformer.tsx
-import * as React from "react";
-import { createTransformer } from "@elementor/editor-canvas";
-import { Stack, Typography } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
-
-// src/components/ui/color-indicator.tsx
-import { styled, UnstableColorIndicator } from "@elementor/ui";
-var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
-
-// src/prop-types/color-variable-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z } from "@elementor/schema";
-var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
+// src/components/global-styles-import-listener.tsx
+import { useEffect } from "react";
 
 // src/service.ts
-import { __ as __2 } from "@wordpress/i18n";
+import { __ } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -360,9 +175,9 @@ var Storage = class {
 import { enqueueFont } from "@elementor/editor-v1-adapters";
 
 // src/prop-types/font-variable-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z2 } from "@elementor/schema";
-var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var fontVariablePropTypeUtil = createPropUtils("global-font-variable", z.string());
 
 // src/create-style-variables-repository.ts
 var createStyleVariablesRepository = () => {
@@ -474,7 +289,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -496,7 +311,7 @@ var service = {
     return apiClient.update(id2, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -577,15 +392,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
             });
           }
         });
@@ -605,6 +420,243 @@ var handleWatermark = (operation, newWatermark) => {
   storage.watermark(newWatermark);
 };
 
+// src/components/global-styles-import-listener.tsx
+function GlobalStylesImportListener() {
+  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
+import { useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
+import {
+  __privateListenTo as listenTo,
+  __privateOpenRoute as openRoute,
+  routeOpenEvent
+} from "@elementor/editor-v1-adapters";
+
+// src/components/variables-manager/variables-manager-panel.tsx
+import * as React14 from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
+import { useSuppressedMessage } from "@elementor/editor-current-user";
+import {
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, TrashIcon } from "@elementor/icons";
+import {
+  Alert,
+  AlertAction,
+  AlertTitle,
+  Button as Button2,
+  CloseButton,
+  Divider,
+  Infotip,
+  Stack as Stack6,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/events";
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const { dispatchEvent, config } = 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 } = 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 } = 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
+import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
+import { __ as __2, sprintf } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: __2("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __2("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __2("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __2("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __2("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __2("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __2("There was a glitch. Try saving your variable again.", "elementor"),
+  BATCH: {
+    DUPLICATED_LABELS: (count, name) => (
+      // eslint-disable-next-line @wordpress/i18n-translator-comments
+      sprintf(__2("We found %1$d duplicated %2$s.", "elementor"), count, name)
+    ),
+    UNEXPECTED_ERROR: __2("There was a glitch.", "elementor"),
+    DUPLICATED_LABEL_ACTION: __2("Take me there", "elementor"),
+    DUPLICATED_LABEL_ACTION_MESSAGE: __2("Please rename the variables.", "elementor"),
+    UNEXPECTED_ERROR_ACTION_MESSAGE: __2("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: 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: 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
+import {
+  stylesInheritanceTransformersRegistry,
+  styleTransformersRegistry
+} from "@elementor/editor-canvas";
+
+// src/transformers/inheritance-transformer.tsx
+import * as React from "react";
+import { createTransformer } from "@elementor/editor-canvas";
+import { Stack, Typography } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/components/ui/color-indicator.tsx
+import { styled, UnstableColorIndicator } from "@elementor/ui";
+var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
+
+// src/prop-types/color-variable-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var colorVariablePropTypeUtil = createPropUtils2("global-color-variable", z2.string());
+
 // src/transformers/utils/resolve-css-variable.ts
 var resolveCssVariable = (id2, variable) => {
   let name = id2;
@@ -1102,17 +1154,25 @@ var useQuotaPermissions = (variableType) => {
 
 // src/components/ui/variable-promotion-chip.tsx
 import * as React6 from "react";
-import { forwardRef, useImperativeHandle, useState as useState3 } from "react";
+import { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState3 } from "react";
+import { trackUpgradePromotionClick, trackViewPromotion } from "@elementor/editor-controls";
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
 import { Box } from "@elementor/ui";
 import { capitalize } from "@elementor/utils";
 import { __ as __7, sprintf as sprintf2 } from "@wordpress/i18n";
 var VariablePromotionChip = forwardRef(
-  ({ variableType, upgradeUrl }, ref) => {
+  ({ variableType, upgradeUrl, trackingData }, ref) => {
     const [isOpen, setIsOpen] = useState3(false);
     useCanvasClickHandler(isOpen, () => setIsOpen(false));
-    const toggle = () => setIsOpen((prev) => !prev);
-    useImperativeHandle(ref, () => ({ toggle }), []);
+    const toggle = useCallback4(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          trackViewPromotion(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    useImperativeHandle(ref, () => ({ toggle }), [toggle]);
     const title = sprintf2(
       /* translators: %s: Variable Type. */
       __7("%s variables", "elementor"),
@@ -1134,7 +1194,8 @@ var VariablePromotionChip = forwardRef(
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React6.createElement(
         Box,
@@ -1152,6 +1213,11 @@ var VariablePromotionChip = forwardRef(
 );
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
+var TRACKING_DATA = {
+  target_name: "variables_manager",
+  target_location: "variables_manager",
+  location_l1: "create variable menu"
+};
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
   const buttonRef = useRef2(null);
@@ -1234,24 +1300,30 @@ var MenuOption = ({
     {
       variableType: config.variableType,
       upgradeUrl: `https://go.elementor.com/go-pro-manager-${config.variableType}-variable/`,
-      ref: promotionRef
+      ref: promotionRef,
+      trackingData: TRACKING_DATA
     }
   ));
 };
 var getDefaultName = (variables, baseName) => {
   const pattern = new RegExp(`^${baseName}-(\\d+)$`, "i");
-  let counter = 1;
+  const takenNumbers = /* @__PURE__ */ new Set();
   Object.values(variables).forEach((variable) => {
-    if (pattern.test(variable.label)) {
-      counter = Math.max(counter, parseInt(variable.label.match(pattern)?.[1] ?? "0", 10) + 1);
+    const match = variable.label.match(pattern);
+    if (match) {
+      takenNumbers.add(parseInt(match[1], 10));
     }
   });
+  let counter = 1;
+  while (takenNumbers.has(counter)) {
+    counter++;
+  }
   return `${baseName}-${counter}`;
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
 import * as React13 from "react";
-import { useEffect as useEffect2, useRef as useRef6 } from "react";
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
 import {
   Table,
   TableBody,
@@ -1376,7 +1448,7 @@ var LabelField = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 import * as React10 from "react";
-import { useCallback as useCallback4, useEffect, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useRef as useRef4, useState as useState5 } from "react";
 import { ClickAwayListener, Stack as Stack4 } from "@elementor/ui";
 var VariableEditableCell = React10.memo(
   ({
@@ -1397,17 +1469,17 @@ var VariableEditableCell = React10.memo(
     const { labelFieldError, setLabelFieldError } = useLabelError();
     const [valueFieldError, setValueFieldError] = useState5("");
     const rowRef = useRef4(null);
-    const handleSave = useCallback4(() => {
+    const handleSave = useCallback5(() => {
       const hasError = fieldType === "label" && labelFieldError?.message || fieldType === "value" && valueFieldError;
       if (!hasError) {
         onChange(value);
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    useEffect(() => {
+    useEffect2(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    useEffect(() => {
+    useEffect2(() => {
       if (autoEdit && !isEditing && !disabled) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1433,10 +1505,10 @@ var VariableEditableCell = React10.memo(
         setIsEditing(true);
       }
     };
-    const handleChange = useCallback4((newValue) => {
+    const handleChange = useCallback5((newValue) => {
       setValue(newValue);
     }, []);
-    const handleValidationChange = useCallback4(
+    const handleValidationChange = useCallback5(
       (errorMsg) => {
         if (fieldType === "label") {
           setLabelFieldError({
@@ -1567,6 +1639,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
 };
 
 // src/components/variables-manager/ui/variable-table-row.tsx
+var TRACKING_DATA2 = { target_name: "variables_manager", target_location: "variables_manager" };
 var VariableRow = (props) => {
   const {
     row,
@@ -1729,7 +1802,8 @@ var VariableRow = (props) => {
       {
         variableType: row.variableType,
         upgradeUrl: `https://go.elementor.com/renew-license-manager-${row.variableType}-variable`,
-        ref: promotionRef
+        ref: promotionRef,
+        trackingData: TRACKING_DATA2
       }
     ), /* @__PURE__ */ React12.createElement(VariableEditMenu, { menuActions: menuActions(row.id), disabled: isSorting, itemId: row.id })))
   );
@@ -1746,7 +1820,7 @@ var VariablesManagerTable = ({
 }) => {
   const tableContainerRef = useRef6(null);
   const variableRowRefs = useRef6(/* @__PURE__ */ new Map());
-  useEffect2(() => {
+  useEffect3(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
       if (rowElement) {
@@ -1867,8 +1941,8 @@ function VariablesManagerPanel() {
     handleOnChange,
     createVariable: createVariable2,
     handleDeleteVariable,
-    handleStartSync,
-    handleStopSync,
+    handleStartSync: startSyncFromState,
+    handleStopSync: stopSyncFromState,
     handleSave,
     isSaving,
     handleSearch,
@@ -1888,7 +1962,7 @@ function VariablesManagerPanel() {
     }
     closePanel();
   };
-  const handleCreateVariable = useCallback5(
+  const handleCreateVariable = useCallback6(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
       if (newId) {
@@ -1922,31 +1996,44 @@ function VariablesManagerPanel() {
       setIsSaving(false);
     }
   };
-  const handleDeleteVariableWithConfirmation = useCallback5(
+  const handleDeleteVariableWithConfirmation = useCallback6(
     (itemId) => {
       handleDeleteVariable(itemId);
       setDeleteConfirmation(null);
     },
     [handleDeleteVariable]
   );
-  const handleStopSyncWithConfirmation = useCallback5(
+  const commitStopSync = useCallback6(
     (itemId) => {
-      handleStopSync(itemId);
-      setStopSyncConfirmation(null);
+      stopSyncFromState(itemId);
+      const variable = variables[itemId];
+      if (variable) {
+        trackVariableSyncToV3({ variableLabel: variable.label, action: "unsync" });
+      }
     },
-    [handleStopSync]
+    [stopSyncFromState, variables]
   );
-  const handleShowStopSyncDialog = useCallback5(
+  const handleStartSync = useCallback6(
+    (itemId) => {
+      startSyncFromState(itemId);
+      const variable = variables[itemId];
+      if (variable) {
+        trackVariableSyncToV3({ variableLabel: variable.label, action: "sync" });
+      }
+    },
+    [startSyncFromState, variables]
+  );
+  const handleStopSync = useCallback6(
     (itemId) => {
       if (!isStopSyncSuppressed) {
         setStopSyncConfirmation(itemId);
       } else {
-        handleStopSync(itemId);
+        commitStopSync(itemId);
       }
     },
-    [isStopSyncSuppressed, handleStopSync]
+    [isStopSyncSuppressed, commitStopSync]
   );
-  const buildMenuActions = useCallback5(
+  const buildMenuActions = useCallback6(
     (variableId) => {
       const variable = variables[variableId];
       if (!variable) {
@@ -1957,7 +2044,7 @@ function VariablesManagerPanel() {
         variableId,
         handlers: {
           onStartSync: handleStartSync,
-          onStopSync: handleShowStopSyncDialog
+          onStopSync: handleStopSync
         }
       });
       const deleteAction = {
@@ -1975,7 +2062,7 @@ function VariablesManagerPanel() {
       };
       return [...typeActions, deleteAction];
     },
-    [variables, handleStartSync, handleShowStopSyncDialog]
+    [variables, handleStartSync, handleStopSync]
   );
   const hasVariables = Object.keys(variables).length > 0;
   return /* @__PURE__ */ React14.createElement(ThemeProvider, null, /* @__PURE__ */ React14.createElement(Panel, null, /* @__PURE__ */ React14.createElement(
@@ -2110,7 +2197,10 @@ function VariablesManagerPanel() {
     {
       open: true,
       onClose: () => setStopSyncConfirmation(null),
-      onConfirm: () => handleStopSyncWithConfirmation(stopSyncConfirmation)
+      onConfirm: () => {
+        commitStopSync(stopSyncConfirmation);
+        setStopSyncConfirmation(null);
+      }
     }
   ), isSaveChangesDialogOpen && /* @__PURE__ */ React14.createElement(SaveChangesDialog, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __10("You have unsaved changes", "elementor")), /* @__PURE__ */ React14.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React14.createElement(SaveChangesDialog.ContentText, null, __10("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React14.createElement(
     SaveChangesDialog.Actions,
@@ -2138,7 +2228,7 @@ function VariablesManagerPanel() {
   )));
 }
 var usePreventUnload = (isDirty) => {
-  useEffect3(() => {
+  useEffect4(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -2153,7 +2243,7 @@ var usePreventUnload = (isDirty) => {
 var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   const [, suppressStopSyncMessage] = useSuppressedMessage(STOP_SYNC_MESSAGE_KEY);
   return /* @__PURE__ */ React14.createElement(ConfirmationDialog2, { open, onClose }, /* @__PURE__ */ React14.createElement(ConfirmationDialog2.Title, { icon: ColorFilterIcon, iconColor: "primary" }, __10("Stop syncing variable color", "elementor")), /* @__PURE__ */ React14.createElement(ConfirmationDialog2.Content, null, /* @__PURE__ */ React14.createElement(ConfirmationDialog2.ContentText, null, __10(
-    "This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.",
+    "This will disconnect the variable color from Global Colors. Existing uses on your site will automatically switch to a default color.",
     "elementor"
   ))), /* @__PURE__ */ React14.createElement(
     ConfirmationDialog2.Actions,
@@ -2169,20 +2259,54 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   ));
 };
 
+// src/components/open-panel-from-event.tsx
+var EVENT_NAME = "elementor/open-variables-manager";
+var DEFAULT_PANEL_ROUTE = "panel/elements/categories";
+function OpenPanelFromEvent() {
+  const { open } = usePanelActions();
+  const pendingRef = useRef7(false);
+  const [readyToOpen, setReadyToOpen] = useState7(false);
+  useEffect5(() => {
+    if (readyToOpen) {
+      setReadyToOpen(false);
+      open();
+    }
+  }, [readyToOpen, open]);
+  useEffect5(() => {
+    return listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
+      if (pendingRef.current) {
+        pendingRef.current = false;
+        setReadyToOpen(true);
+      }
+    });
+  }, []);
+  useEffect5(() => {
+    const handler = () => {
+      pendingRef.current = true;
+      openRoute(DEFAULT_PANEL_ROUTE);
+    };
+    window.addEventListener(EVENT_NAME, handler);
+    return () => window.removeEventListener(EVENT_NAME, handler);
+  }, []);
+  return null;
+}
+
 // src/components/open-panel-from-url.tsx
+import { useEffect as useEffect6, useRef as useRef8 } from "react";
+import { __privateListenTo as listenTo2, routeOpenEvent as routeOpenEvent2 } from "@elementor/editor-v1-adapters";
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "variables-manager";
-var DEFAULT_PANEL_ROUTE = "panel/elements";
+var DEFAULT_PANEL_ROUTE2 = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = useRef7(false);
-  useEffect4(() => {
+  const hasOpened = useRef8(false);
+  useEffect6(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
       return;
     }
-    const cleanup = listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
+    const cleanup = listenTo2(routeOpenEvent2(DEFAULT_PANEL_ROUTE2), () => {
       if (hasOpened.current) {
         return;
       }
@@ -2201,7 +2325,7 @@ import * as React33 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
-import { useId, useRef as useRef8 } from "react";
+import { useId, useRef as useRef9 } from "react";
 import * as React24 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
@@ -2225,16 +2349,16 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 import * as React22 from "react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
 import * as React15 from "react";
-import { createContext as createContext2, useContext as useContext2, useState as useState7 } from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState8 } from "react";
 import { Box as Box2 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState7(null);
+  const [anchorRef, setAnchorRef] = useState8(null);
   return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(Box2, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
@@ -2243,7 +2367,7 @@ var usePopoverContentRef = () => {
 
 // src/components/variable-creation.tsx
 import * as React17 from "react";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { PopoverContent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { PopoverHeader, SectionPopoverBody } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
@@ -2304,11 +2428,11 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = useBoundProp4();
   const initialValue = useInitialValue();
-  const [value, setValue] = useState8(initialValue);
-  const [label, setLabel] = useState8("");
-  const [errorMessage, setErrorMessage] = useState8("");
-  const [valueFieldError, setValueFieldError] = useState8("");
-  const [propTypeKey, setPropTypeKey] = useState8(propTypeUtil.key);
+  const [value, setValue] = useState9(initialValue);
+  const [label, setLabel] = useState9("");
+  const [errorMessage, setErrorMessage] = useState9("");
+  const [valueFieldError, setValueFieldError] = useState9("");
+  const [propTypeKey, setPropTypeKey] = useState9(propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -2392,11 +2516,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: __11("Value", "elementor") }, /* @__PURE__ */ React17.createElement(Typography6, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React17.createElement(
@@ -2428,7 +2553,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 import * as React19 from "react";
-import { useEffect as useEffect5, useState as useState10 } from "react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
@@ -2438,7 +2563,7 @@ import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/ui/edit-confirmation-dialog.tsx
 import * as React18 from "react";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
 import {
   Button as Button4,
@@ -2458,7 +2583,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = useState9(false);
+  const [dontShowAgain, setDontShowAgain] = useState10(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -2492,20 +2617,20 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = useBoundProp5();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage2(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = useState10(false);
-  const [editConfirmation, setEditConfirmation] = useState10(false);
-  const [errorMessage, setErrorMessage] = useState10("");
-  const [valueFieldError, setValueFieldError] = useState10("");
+  const [deleteConfirmation, setDeleteConfirmation] = useState11(false);
+  const [editConfirmation, setEditConfirmation] = useState11(false);
+  const [errorMessage, setErrorMessage] = useState11("");
+  const [valueFieldError, setValueFieldError] = useState11("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
-  const [propTypeKey, setPropTypeKey] = useState10(variable?.type ?? propTypeUtil.key);
+  const [propTypeKey, setPropTypeKey] = useState11(variable?.type ?? propTypeUtil.key);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = useState10(() => variable.value);
-  const [label, setLabel] = useState10(() => variable.label);
-  useEffect5(() => {
+  const [value, setValue] = useState11(() => variable.value);
+  const [label, setLabel] = useState11(() => variable.label);
+  useEffect7(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2628,11 +2753,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: __13("Value", "elementor") }, /* @__PURE__ */ React19.createElement(Typography8, { variant: "h5" }, /* @__PURE__ */ React19.createElement(
@@ -2669,8 +2795,9 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useState as useState11 } from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
 import * as React21 from "react";
+import { trackUpgradePromotionClick as trackUpgradePromotionClick2, trackViewPromotion as trackViewPromotion2 } from "@elementor/editor-controls";
 import {
   PopoverHeader as PopoverHeader3,
   PopoverMenuList,
@@ -2781,7 +2908,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] = useState11("");
+  const [searchValue, setSearchValue] = useState12("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -2858,6 +2985,15 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
+  useEffect8(() => {
+    if (disabled) {
+      trackViewPromotion2({
+        target_name: "variables_popover",
+        target_location: "widget_panel",
+        location_l1: "variables_list"
+      });
+    }
+  }, [disabled]);
   return /* @__PURE__ */ React21.createElement(SectionPopoverBody3, null, /* @__PURE__ */ React21.createElement(
     PopoverHeader3,
     {
@@ -2894,7 +3030,11 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
         __15("Upgrade to continue creating and editing %s variables.", "elementor"),
         variableType
       ),
-      upgradeUrl: getProUpgradeUrl(variableType)
+      upgradeUrl: getProUpgradeUrl(variableType),
+      onCtaClick: () => trackUpgradePromotionClick2({
+        target_name: "variables_popover",
+        location_l1: "variables_list"
+      })
     }
   )), !hasSearchResults && hasVariables && /* @__PURE__ */ React21.createElement(
     NoSearchResults,
@@ -2953,8 +3093,8 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState12(VIEW_LIST);
-  const [editId, setEditId] = useState12("");
+  const [currentView, setCurrentView] = useState13(VIEW_LIST);
+  const [editId, setEditId] = useState13("");
   const { open } = usePanelActions();
   const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
     open();
@@ -3065,7 +3205,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp6();
-  const anchorRef = useRef8(null);
+  const anchorRef = useRef9(null);
   const popupId = useId();
   const popupState = usePopupState3({
     variant: "popover",
@@ -3106,14 +3246,14 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 import * as React28 from "react";
-import { useId as useId2, useRef as useRef9, useState as useState14 } from "react";
+import { useId as useId2, useRef as useRef10, useState as useState15 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
 import * as React25 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader4, SectionPopoverBody as SectionPopoverBody4 } from "@elementor/editor-ui";
 import { Button as Button6, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4, Typography as Typography11 } from "@elementor/ui";
@@ -3127,11 +3267,11 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = useState13("");
-  const [valueFieldError, setValueFieldError] = useState13("");
-  const [label, setLabel] = useState13(variable.label);
-  const [value, setValue] = useState13(variable.value);
-  const [propTypeKey, setPropTypeKey] = useState13(variable?.type ?? propTypeUtil.key);
+  const [errorMessage, setErrorMessage] = useState14("");
+  const [valueFieldError, setValueFieldError] = useState14("");
+  const [label, setLabel] = useState14(variable.label);
+  const [value, setValue] = useState14(variable.value);
+  const [propTypeKey, setPropTypeKey] = useState14(variable?.type ?? propTypeUtil.key);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -3204,11 +3344,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: __17("Value", "elementor") }, /* @__PURE__ */ React25.createElement(Typography11, { variant: "h5" }, /* @__PURE__ */ React25.createElement(
@@ -3287,10 +3428,10 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const boundProp = useBoundProp8();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = useState14(false);
+  const [showInfotip, setShowInfotip] = useState15(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
-  const deletedChipAnchorRef = useRef9(null);
+  const deletedChipAnchorRef = useRef10(null);
   const popupId = useId2();
   const popupState = usePopupState4({
     variant: "popover",
@@ -3378,7 +3519,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 import * as React30 from "react";
-import { useId as useId3, useRef as useRef10, useState as useState15 } from "react";
+import { useId as useId3, useRef as useRef11, useState as useState16 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box8, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
@@ -3416,13 +3557,13 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
   const { setValue, value } = useBoundProp9();
-  const anchorRef = useRef10(null);
+  const anchorRef = useRef11(null);
   const popupId = useId3();
   const popupState = usePopupState5({
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = useState15(false);
+  const [infotipVisible, setInfotipVisible] = useState16(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -3495,7 +3636,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 import * as React32 from "react";
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop3, Infotip as Infotip4 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
@@ -3525,7 +3666,7 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = useBoundProp10();
-  const [infotipVisible, setInfotipVisible] = useState16(false);
+  const [infotipVisible, setInfotipVisible] = useState17(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -3613,22 +3754,15 @@ var trackOpenVariablePopover = (path, variableType) => {
   });
 };
 
-// src/mcp/index.ts
-import { isAngieAvailable } from "@elementor/editor-mcp";
-
 // src/mcp/manage-variable-tool.ts
-import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 import { z as z3 } from "@elementor/schema";
 
 // src/mcp/variables-resource.ts
-import { getMCPByDomain } from "@elementor/editor-mcp";
 var GLOBAL_VARIABLES_URI = "elementor://global-variables";
-var initVariablesResource = () => {
-  const canvasMcpEntry = getMCPByDomain("canvas");
-  const variablesMcpEntry = 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,
       {
@@ -3647,7 +3781,7 @@ var initVariablesResource = () => {
       }
     );
     window.addEventListener("variables:updated", () => {
-      mcpServer.server.sendResourceUpdated({
+      sendResourceUpdated({
         uri: GLOBAL_VARIABLES_URI
       });
     });
@@ -3655,8 +3789,9 @@ var initVariablesResource = () => {
 };
 
 // src/mcp/manage-variable-tool.ts
-var initManageVariableTool = () => {
-  getMCPByDomain2("variables").addTool({
+var initManageVariableTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
     name: "manage-global-variable",
     schema: {
       action: z3.enum(["create", "update", "delete"]).describe("Operation to perform"),
@@ -3726,30 +3861,36 @@ function getServiceActions(svc) {
 }
 
 // src/mcp/index.ts
-function initMcp() {
-  if (!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
 import * as React37 from "react";
+import { trackUpgradePromotionClick as trackUpgradePromotionClick3 } from "@elementor/editor-controls";
 import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 import { CtaButton } from "@elementor/editor-ui";
-import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
-import { BrushIcon, ExpandDiagonalIcon, ResetIcon, TextIcon as TextIcon2 } from "@elementor/icons";
+import { BrushIcon, ExpandDiagonalIcon, RefreshIcon, RefreshOffIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 import { __ as __26 } from "@wordpress/i18n";
 
 // src/components/fields/color-field.tsx
 import * as React35 from "react";
-import { useRef as useRef11, useState as useState17 } from "react";
+import { useRef as useRef12, useState as useState18 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState17(value);
-  const [errorMessage, setErrorMessage] = useState17("");
-  const defaultRef = useRef11(null);
+  const [color, setColor] = useState18(value);
+  const [errorMessage, setErrorMessage] = useState18("");
+  const defaultRef = useRef12(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
     setColor(newValue);
@@ -3788,15 +3929,15 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 import * as React36 from "react";
-import { useId as useId4, useRef as useRef12, useState as useState18 } from "react";
+import { useId as useId4, useRef as useRef13, useState as useState19 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector, useFontFamilies } from "@elementor/editor-controls";
 import { useSectionWidth } from "@elementor/editor-ui";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger4, Popover as Popover4, UnstableTag, usePopupState as usePopupState6 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState18(value);
-  const defaultRef = useRef12(null);
+  const [fontFamily, setFontFamily] = useState19(value);
+  const defaultRef = useRef13(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState6({ variant: "popover" });
   const fontFamilies = useFontFamilies();
@@ -3880,20 +4021,17 @@ function registerVariableTypes() {
     defaultValue: "#ffffff",
     menuActionsFactory: ({ variable, variableId, handlers }) => {
       const actions = [];
-      if (!isExperimentActive2("e_design_system_sync")) {
-        return [];
-      }
       if (variable.sync_to_v3) {
         actions.push({
-          name: __26("Stop syncing to Version 3", "elementor"),
-          icon: ResetIcon,
+          name: __26("Stop syncing to Global Colors", "elementor"),
+          icon: RefreshOffIcon,
           color: "text.primary",
           onClick: () => handlers.onStopSync(variableId)
         });
       } else {
         actions.push({
-          name: __26("Sync to Version 3", "elementor"),
-          icon: ResetIcon,
+          name: __26("Sync to Global Colors", "elementor"),
+          icon: RefreshIcon,
           color: "text.primary",
           onClick: () => handlers.onStartSync(variableId)
         });
@@ -3918,7 +4056,14 @@ function registerVariableTypes() {
     styleTransformer: EmptyTransformer,
     variableType: "size",
     selectionFilter: () => [],
-    emptyState: /* @__PURE__ */ React37.createElement(CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
+    emptyState: /* @__PURE__ */ React37.createElement(
+      CtaButton,
+      {
+        size: "small",
+        href: "https://go.elementor.com/go-pro-panel-size-variable/",
+        onClick: () => trackUpgradePromotionClick3({ target_name: "variables_popover", location_l1: "variables_list" })
+      }
+    )
   };
   registerVariableType({
     ...sizePromotions,
@@ -3933,14 +4078,14 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React38 from "react";
-import { useEffect as useEffect6, useState as useState19 } from "react";
+import { useEffect as useEffect9, useState as useState20 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent,
   getCanvasIframeDocument
 } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
-var VARIABLES_WRAPPER = "body";
+var VARIABLES_WRAPPER = ":root";
 function StyleVariablesRenderer() {
   const container = usePortalContainer();
   const styleVariables = useStyleVariables();
@@ -3956,8 +4101,8 @@ function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState19({});
-  useEffect6(() => {
+  const [variables, setVariables] = useState20({});
+  useEffect9(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4049,16 +4194,24 @@ function init() {
     useProps: usePropVariableAction
   });
   service.init().then(() => {
-    initMcp();
+    initMcp(getMCPByDomain("variables"), getMCPByDomain("canvas"));
   });
   injectIntoTop({
     id: "canvas-style-variables-render",
     component: StyleVariablesRenderer
   });
+  injectIntoLogic({
+    id: "variables-import-listener",
+    component: GlobalStylesImportListener
+  });
   injectIntoLogic({
     id: "variables-open-panel-from-url",
     component: OpenPanelFromUrl
   });
+  injectIntoLogic({
+    id: "variables-open-panel-from-event",
+    component: OpenPanelFromEvent
+  });
   registerPanel(panel);
 }
 function hasVariableAssigned(value) {