@elementor/editor-variables 4.3.0-948 → 4.3.0-949

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.3.0-948",
+  "version": "4.3.0-949",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-948",
-    "@elementor/editor-canvas": "4.3.0-948",
-    "@elementor/editor-controls": "4.3.0-948",
-    "@elementor/editor-current-user": "4.3.0-948",
-    "@elementor/editor-mcp": "4.3.0-948",
-    "@elementor/editor-panels": "4.3.0-948",
-    "@elementor/editor-props": "4.3.0-948",
-    "@elementor/editor-ui": "4.3.0-948",
-    "@elementor/editor-v1-adapters": "4.3.0-948",
-    "@elementor/menus": "4.3.0-948",
-    "@elementor/http-client": "4.3.0-948",
+    "@elementor/editor": "4.3.0-949",
+    "@elementor/editor-canvas": "4.3.0-949",
+    "@elementor/editor-controls": "4.3.0-949",
+    "@elementor/editor-current-user": "4.3.0-949",
+    "@elementor/editor-mcp": "4.3.0-949",
+    "@elementor/editor-panels": "4.3.0-949",
+    "@elementor/editor-props": "4.3.0-949",
+    "@elementor/editor-ui": "4.3.0-949",
+    "@elementor/editor-v1-adapters": "4.3.0-949",
+    "@elementor/menus": "4.3.0-949",
+    "@elementor/http-client": "4.3.0-949",
     "@elementor/icons": "~1.75.1",
-    "@elementor/events": "4.3.0-948",
-    "@elementor/schema": "4.3.0-948",
+    "@elementor/events": "4.3.0-949",
+    "@elementor/schema": "4.3.0-949",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-948",
+    "@elementor/utils": "4.3.0-949",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/mcp-variable-connect-listener.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { MCP_STYLES_APPLIED_EVENT, type McpStylesAppliedPayload } from '@elementor/editor-mcp';
+
+import { extractVariablesFromStyleValue } from '../utils/extract-variables-from-style-value';
+import { trackVariableEvent } from '../utils/tracking';
+
+export function McpVariableConnectListener() {
+	useEffect( () => {
+		const handleMcpStylesApplied = ( event: CustomEvent< McpStylesAppliedPayload > ) => {
+			const { styleValue } = event.detail;
+			const variables = extractVariablesFromStyleValue( styleValue );
+
+			variables.forEach( ( { type, controlPath } ) => {
+				trackVariableEvent( {
+					varType: type,
+					controlPath,
+					action: 'connect',
+					executedBy: 'mcp_tool',
+				} );
+			} );
+		};
+
+		window.addEventListener( MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied as EventListener );
+
+		return () => {
+			window.removeEventListener( MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied as EventListener );
+		};
+	}, [] );
+
+	return null;
+}

package/src/components/variable-creation.tsx

@@ -10,7 +10,6 @@ import { useVariableType } from '../context/variable-type-context';
 import { useInitialValue } from '../hooks/use-initial-value';
 import { createVariable } from '../hooks/use-prop-variables';
 import { useVariableBoundProp } from '../hooks/use-variable-bound-prop';
-import { trackVariableEvent } from '../utils/tracking';
 import { ERROR_MESSAGES, labelHint, mapServerError } from '../utils/validations';
 import { LabelField, useLabelError } from './fields/label-field';
 import { FormField } from './ui/form-field';
@@ -23,7 +22,7 @@ type Props = {
 };
 
 export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
-	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+	const { icon: VariableIcon, valueField: ValueField, propTypeUtil } = useVariableType();
 
 	const { setVariableValue: setVariable, path } = useVariableBoundProp();
 	const { propType } = useBoundProp();
@@ -51,11 +50,14 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 	};
 
 	const handleCreateAndTrack = () => {
-		createVariable( {
-			value,
-			label,
-			type: propTypeKey,
-		} )
+		createVariable(
+			{
+				value,
+				label,
+				type: propTypeKey,
+			},
+			{ eventData: { controlPath: path.join( '.' ) } }
+		)
 			.then( ( key ) => {
 				setVariable( key );
 				closePopover();
@@ -73,12 +75,6 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 
 				setErrorMessage( ERROR_MESSAGES.UNEXPECTED_ERROR );
 			} );
-
-		trackVariableEvent( {
-			varType: variableType,
-			controlPath: path.join( '.' ),
-			action: 'save',
-		} );
 	};
 
 	const hasEmptyFields = () => {

package/src/components/variable-edit.tsx

@@ -31,7 +31,7 @@ type Props = {
 export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
 	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
 
-	const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
+	const { setVariableValue: notifyBoundPropChange, variableId, path } = useVariableBoundProp();
 	const { propType } = useBoundProp();
 	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( EDIT_CONFIRMATION_DIALOG_ID );
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
@@ -80,7 +80,7 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 		const typeChanged = propTypeKey !== variable.type;
 		const updatePayload = typeChanged ? { value, label, type: propTypeKey } : { value, label };
 
-		updateVariable( editId, updatePayload )
+		updateVariable( editId, updatePayload, { eventData: { controlPath: path.join( '.' ) } } )
 			.then( () => {
 				maybeTriggerBoundPropChange();
 				onSubmit?.();

package/src/hooks/use-prop-variables.ts

@@ -3,7 +3,7 @@ import { useBoundProp } from '@elementor/editor-controls';
 import { type PropKey } from '@elementor/editor-props';
 
 import { useVariableType } from '../context/variable-type-context';
-import { service } from '../service';
+import { type CreateVariableOptions, service, type UpdateVariableOptions } from '../service';
 import { type NormalizedVariable, type Variable } from '../types';
 import { filterBySearch } from '../utils/filter-by-search';
 import { toNormalizedVariable, variablesToList } from '../utils/variables-to-list';
@@ -100,15 +100,16 @@ const normalizeVariables = ( propKey: string ): NormalizedVariable[] => {
 
 const extractId = ( { id }: { id: string } ): string => id;
 
-export const createVariable = ( newVariable: Variable ): Promise< string > => {
-	return service.create( newVariable ).then( extractId );
+export const createVariable = ( newVariable: Variable, options: CreateVariableOptions ): Promise< string > => {
+	return service.create( newVariable, options ).then( extractId );
 };
 
 export const updateVariable = (
 	updateId: string,
-	{ value, label, type }: { value: string; label: string; type?: string }
+	{ value, label, type }: { value: string; label: string; type?: string },
+	options?: UpdateVariableOptions
 ): Promise< string > => {
-	return service.update( updateId, { value, label, type } ).then( extractId );
+	return service.update( updateId, { value, label, type }, options ).then( extractId );
 };
 
 export const deleteVariable = ( deleteId: string ): Promise< string > => {

package/src/init.ts

@@ -5,6 +5,7 @@ import { isTransformable, type PropValue } from '@elementor/editor-props';
 import { controlActionsMenu } from '@elementor/menus';
 
 import { GlobalStylesImportListener } from './components/global-styles-import-listener';
+import { McpVariableConnectListener } from './components/mcp-variable-connect-listener';
 import { VariableControl } from './controls/variable-control';
 import { usePropVariableAction } from './hooks/use-prop-variable-action';
 import { initMcp } from './mcp';
@@ -63,6 +64,11 @@ export function init() {
 		id: 'variables-import-listener',
 		component: GlobalStylesImportListener,
 	} );
+
+	injectIntoLogic( {
+		id: 'mcp-variable-connect-listener',
+		component: McpVariableConnectListener,
+	} );
 }
 
 function hasVariableAssigned( value: PropValue ) {

package/src/mcp/manage-variable-tool.ts

@@ -128,7 +128,7 @@ function getServiceActions( svc: typeof service ) {
 			if ( valueError ) {
 				throw new Error( valueError );
 			}
-			return svc.create( { type, label, value } );
+			return svc.create( { type, label, value }, { eventData: { executedBy: 'mcp_tool' } } );
 		},
 		update( { id, label, value }: Opts< { id: string; label: string; value: string } > ) {
 			if ( ! id || ! label || ! value ) {
@@ -145,7 +145,7 @@ function getServiceActions( svc: typeof service ) {
 					throw new Error( valueError );
 				}
 			}
-			return svc.update( id, { label, value } );
+			return svc.update( id, { label, value }, { eventData: { executedBy: 'mcp_tool' } } );
 		},
 		delete( { id }: Opts< { id: string } > ) {
 			if ( ! id ) {

package/src/service.ts

@@ -5,6 +5,20 @@ import { buildOperationsArray, type OperationResult } from './batch-operations';
 import { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';
 import { styleVariablesRepository } from './style-variables-repository';
 import { type Variable } from './types';
+import { trackVariableEvent, type VariableEventData } from './utils/tracking';
+
+type EventData = {
+	controlPath?: VariableEventData[ 'controlPath' ];
+	executedBy?: VariableEventData[ 'executedBy' ];
+};
+
+export type CreateVariableOptions = {
+	eventData?: EventData;
+};
+
+export type UpdateVariableOptions = {
+	eventData?: EventData;
+};
 
 const storage = new Storage();
 
@@ -56,7 +70,7 @@ export const service = {
 			} );
 	},
 
-	create: ( { type, label, value }: Variable ) => {
+	create: ( { type, label, value }: Variable, options: CreateVariableOptions = {} ) => {
 		return apiClient
 			.create( type, label, value )
 			.then( ( response ) => {
@@ -82,6 +96,12 @@ export const service = {
 					[ variableId ]: createdVariable,
 				} );
 
+				trackVariableEvent( {
+					varType: type,
+					action: 'save',
+					...options.eventData,
+				} );
+
 				return {
 					id: variableId,
 					variable: createdVariable,
@@ -89,7 +109,11 @@ export const service = {
 			} );
 	},
 
-	update: ( id: string, { label, value, type }: Omit< Variable, 'type' > & { type?: Variable[ 'type' ] } ) => {
+	update: (
+		id: string,
+		{ label, value, type }: Omit< Variable, 'type' > & { type?: Variable[ 'type' ] },
+		options: UpdateVariableOptions = {}
+	) => {
 		return apiClient
 			.update( id, label, value, type )
 			.then( ( response ) => {
@@ -115,6 +139,12 @@ export const service = {
 					[ variableId ]: updatedVariable,
 				} );
 
+				trackVariableEvent( {
+					varType: updatedVariable.type,
+					action: 'update',
+					...options.eventData,
+				} );
+
 				return {
 					id: variableId,
 					variable: updatedVariable,

package/src/utils/extract-variables-from-style-value.ts

@@ -0,0 +1,55 @@
+import { getPropSchemaFromCache, isTransformable } from '@elementor/editor-props';
+
+type VariableInfo = {
+	type: string;
+	variableId: string;
+	controlPath: string;
+};
+
+const VARIABLE_TYPE_KEYS = [
+	'global-color-variable',
+	'global-font-variable',
+	'global-size-variable',
+	'global-custom-size-variable',
+] as const;
+
+function tryExtractVariable( value: unknown ): { type: string; variableId: string } | null {
+	for ( const key of VARIABLE_TYPE_KEYS ) {
+		const propUtil = getPropSchemaFromCache( key );
+		if ( propUtil?.isValid( value ) ) {
+			return {
+				type: key,
+				variableId: propUtil.extract( value ) as string,
+			};
+		}
+	}
+	return null;
+}
+
+function traverse( value: unknown, path: string[], result: VariableInfo[] ): void {
+	const extracted = tryExtractVariable( value );
+	if ( extracted ) {
+		result.push( {
+			...extracted,
+			controlPath: path.join( '.' ),
+		} );
+		return;
+	}
+
+	if ( isTransformable( value ) ) {
+		traverse( value.value, path, result );
+		return;
+	}
+
+	if ( value && typeof value === 'object' ) {
+		for ( const [ key, val ] of Object.entries( value ) ) {
+			traverse( val, [ ...path, key ], result );
+		}
+	}
+}
+
+export function extractVariablesFromStyleValue( styleValue: Record< string, unknown > ): VariableInfo[] {
+	const result: VariableInfo[] = [];
+	traverse( styleValue, [], result );
+	return result;
+}

package/src/utils/tracking.ts

@@ -1,26 +1,44 @@
 import { getMixpanel } from '@elementor/events';
 
-type VariableEventData = {
+export type VariableEventData = {
 	varType: string;
-	controlPath: string;
-	action: 'open' | 'add' | 'connect' | 'save';
+	controlPath?: string;
+	action: 'open' | 'add' | 'connect' | 'save' | 'update';
+	executedBy?: 'mcp_tool' | 'user';
 };
 
-export const trackVariableEvent = ( { varType, controlPath, action }: VariableEventData ) => {
+export const trackVariableEvent = ( { varType, controlPath, action, executedBy }: VariableEventData ) => {
 	const { dispatchEvent, config } = getMixpanel();
 	if ( ! config?.names?.variables?.[ action ] ) {
 		return;
 	}
 
 	const name = config.names.variables[ action ];
-	dispatchEvent?.( name, {
+
+	let eventData: Record< string, string > = {
+		var_type: varType,
+		action_type: name,
+	};
+
+	if ( executedBy ) {
+		eventData.executed_by = executedBy;
+	}
+
+	const defaultLocationInfo = {
 		location: config?.locations?.variables || '',
 		secondaryLocation: config?.secondaryLocations?.variablesPopover || '',
 		trigger: config?.triggers?.click || '',
-		var_type: varType,
-		control_path: controlPath,
-		action_type: name,
-	} );
+	};
+
+	if ( ! executedBy || executedBy !== 'mcp_tool' ) {
+		eventData = { ...defaultLocationInfo, ...eventData };
+	}
+
+	if ( controlPath ) {
+		eventData.control_path = controlPath;
+	}
+
+	dispatchEvent?.( name, eventData );
 };
 
 export type VariablesManagerOpenSource = 'vars-popover' | 'system-panel';