@elementor/editor-interactions 4.0.0-609 → 4.0.0-621

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-609",
+  "version": "4.0.0-621",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "4.0.0-609",
-    "@elementor/editor-elements": "4.0.0-609",
-    "@elementor/editor-mcp": "4.0.0-609",
-    "@elementor/editor-props": "4.0.0-609",
-    "@elementor/editor-responsive": "4.0.0-609",
-    "@elementor/editor-ui": "4.0.0-609",
-    "@elementor/editor-v1-adapters": "4.0.0-609",
+    "@elementor/editor-controls": "4.0.0-621",
+    "@elementor/editor-elements": "4.0.0-621",
+    "@elementor/editor-mcp": "4.0.0-621",
+    "@elementor/editor-props": "4.0.0-621",
+    "@elementor/editor-responsive": "4.0.0-621",
+    "@elementor/editor-ui": "4.0.0-621",
+    "@elementor/editor-v1-adapters": "4.0.0-621",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.0.0-609",
-    "@elementor/session": "4.0.0-609",
+    "@elementor/schema": "4.0.0-621",
+    "@elementor/session": "4.0.0-621",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-609",
+    "@elementor/utils": "4.0.0-621",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/mcp/index.ts

@@ -1,13 +1,74 @@
 import { getMCPByDomain } from '@elementor/editor-mcp';
 
+import { MAX_INTERACTIONS_PER_ELEMENT } from './constants';
 import { initInteractionsSchemaResource } from './resources/interactions-schema-resource';
 import { initManageElementInteractionTool } from './tools/manage-element-interaction-tool';
 
 export const initMcpInteractions = () => {
 	const reg = getMCPByDomain( 'interactions', {
-		instructions:
-			'MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view.',
+		instructions: `
+		MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view.
+		** IMPORTANT **
+		Use the "interactions-schema" resource to get the schema of the interactions.
+		Actions:
+		- get: Read the current interactions on the element.
+		- add: Add a new interaction (max ${ MAX_INTERACTIONS_PER_ELEMENT } per element).
+		- update: Update an existing interaction by its interactionId.
+		- delete: Remove a specific interaction by its interactionId.
+		- clear: Remove all interactions from the element.
+		
+		For add/update, provide: trigger, effect, effectType, direction (required for slide effect), duration, delay, easing.
+		Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).
+		Example Get Request:
+		{
+			"elementId": "123",
+			"action": "get",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Add Request:
+		{
+			"elementId": "123",
+			"action": "add",
+			"animationData": {
+				"effectType": "in",
+				"direction": "top",
+				"trigger": "click",
+				"effect": "fade",
+				"duration": 1000,
+				"delay": 0,
+				"easing": "easeIn",
+				"excludedBreakpoints": ["mobile", "tablet"],
+			}
+		}
+		Example Update Request:
+		{
+			"elementId": "123",
+			"action": "update",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Delete Request:
+		{
+			"elementId": "123",
+			"action": "delete",
+			"interactionId": "123",
+		}
+		Example Clear Request:
+		{
+			"elementId": "123",
+			"action": "clear",
+		}
+		`,
+	} );
+	reg.waitForReady().then( () => {
+		initInteractionsSchemaResource( reg );
+		initManageElementInteractionTool( reg );
 	} );
-	initInteractionsSchemaResource( reg );
-	initManageElementInteractionTool( reg );
 };

package/src/mcp/resources/interactions-schema-resource.ts

@@ -1,60 +1,27 @@
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { isProActive } from '@elementor/utils';
 
-import { EASING_OPTIONS } from '../../components/controls/easing';
-import { BASE_TRIGGERS, TRIGGER_OPTIONS } from '../../components/controls/trigger';
-import { MAX_INTERACTIONS_PER_ELEMENT } from '../constants';
+import { baseSchema, proSchema } from '../tools/schema';
 
 export const INTERACTIONS_SCHEMA_URI = 'elementor://interactions/schema';
 
-const schema = {
-	triggers: BASE_TRIGGERS.map( ( key ) => ( {
-		value: key,
-		label: TRIGGER_OPTIONS[ key as keyof typeof TRIGGER_OPTIONS ] ?? key,
-	} ) ),
-	effects: [
-		{ value: 'fade', label: 'Fade' },
-		{ value: 'slide', label: 'Slide' },
-		{ value: 'scale', label: 'Scale' },
-	],
-	effectTypes: [
-		{ value: 'in', label: 'In' },
-		{ value: 'out', label: 'Out' },
-	],
-	directions: [
-		{ value: 'top', label: 'Top', note: '' },
-		{ value: 'bottom', label: 'Bottom', note: '' },
-		{ value: 'left', label: 'Left', note: '' },
-		{ value: 'right', label: 'Right', note: '' },
-		{ value: '', label: 'None', note: 'Slide animation must have a direction' },
-	],
-	easings: Object.entries( EASING_OPTIONS ).map( ( [ value, label ] ) => ( { value, label } ) ),
-	timing: {
-		duration: { min: 0, max: 10000, unit: 'ms', description: 'Animation duration in milliseconds' },
-		delay: { min: 0, max: 10000, unit: 'ms', description: 'Animation delay in milliseconds' },
-	},
-	excludedBreakpoints: {
-		type: 'string[]',
-		description: 'List of breakpoint IDs on which this interaction is disabled. Omit to enable on all breakpoints.',
-	},
-	maxInteractionsPerElement: MAX_INTERACTIONS_PER_ELEMENT,
-};
-
 export const initInteractionsSchemaResource = ( reg: MCPRegistryEntry ) => {
 	const { resource } = reg;
+	const schema = isProActive() ? { ...baseSchema, ...proSchema } : baseSchema;
 
 	resource(
 		'interactions-schema',
 		INTERACTIONS_SCHEMA_URI,
 		{
-			description:
-				'Schema describing all available options for element interactions (triggers, effects, easings, timing, breakpoints, etc.).',
+			description: 'Schema describing all available options for element interactions.',
 		},
 		async () => {
 			return {
 				contents: [
 					{
 						uri: INTERACTIONS_SCHEMA_URI,
-						text: JSON.stringify( schema, null, 2 ),
+						mimeType: 'application/json',
+						text: JSON.stringify( schema ),
 					},
 				],
 			};

package/src/mcp/tools/manage-element-interaction-tool.ts

@@ -1,19 +1,15 @@
 import { updateElementInteractions } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { z } from '@elementor/schema';
+import { isProActive } from '@elementor/utils';
 
-import { DEFAULT_VALUES } from '../../components/interaction-details';
 import { interactionsRepository } from '../../interactions-repository';
 import { type ElementInteractions } from '../../types';
-import {
-	createInteractionItem,
-	extractExcludedBreakpoints,
-	extractSize,
-	extractString,
-} from '../../utils/prop-value-utils';
+import { createInteractionItem, extractString } from '../../utils/prop-value-utils';
 import { generateTempInteractionId } from '../../utils/temp-id-utils';
 import { MAX_INTERACTIONS_PER_ELEMENT } from '../constants';
 import { INTERACTIONS_SCHEMA_URI } from '../resources/interactions-schema-resource';
+import { baseSchema, proSchema } from './schema';
 
 const EMPTY_INTERACTIONS: ElementInteractions = {
 	version: 1,
@@ -22,94 +18,56 @@ const EMPTY_INTERACTIONS: ElementInteractions = {
 
 export const initManageElementInteractionTool = ( reg: MCPRegistryEntry ) => {
 	const { addTool } = reg;
+	const extendedSchema = isProActive() ? { ...baseSchema, ...proSchema } : baseSchema;
+	const schema = {
+		elementId: z.string().describe( 'The ID of the element to read or modify interactions on' ),
+		action: z
+			.enum( [ 'get', 'add', 'update', 'delete', 'clear' ] )
+			.describe( 'Operation to perform. Use "get" first to inspect existing interactions.' ),
+		interactionId: z
+			.string()
+			.optional()
+			.describe( 'Interaction ID — required for update and delete. Obtain from a prior "get" call.' ),
+		...extendedSchema,
+	};
 
 	addTool( {
 		name: 'manage-element-interaction',
-		description: `Read or manage interactions (animations) on an element. Always call with action=get first to see existing interactions before making changes.
-
-Actions:
-- get: Read the current interactions on the element.
-- add: Add a new interaction (max ${ MAX_INTERACTIONS_PER_ELEMENT } per element).
-- update: Update an existing interaction by its interactionId.
-- delete: Remove a specific interaction by its interactionId.
-- clear: Remove all interactions from the element.
-
-For add/update, provide: trigger, effect, effectType, direction (empty string for non-slide effects), duration, delay, easing.
-Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).`,
-		schema: {
-			elementId: z.string().describe( 'The ID of the element to read or modify interactions on' ),
-			action: z
-				.enum( [ 'get', 'add', 'update', 'delete', 'clear' ] )
-				.describe( 'Operation to perform. Use "get" first to inspect existing interactions.' ),
-			interactionId: z
-				.string()
-				.optional()
-				.describe( 'Interaction ID — required for update and delete. Obtain from a prior "get" call.' ),
-			trigger: z.enum( [ 'load', 'scrollIn' ] ).optional().describe( 'Event that triggers the animation' ),
-			effect: z.enum( [ 'fade', 'slide', 'scale' ] ).optional().describe( 'Animation effect type' ),
-			effectType: z.enum( [ 'in', 'out' ] ).optional().describe( 'Whether the animation plays in or out' ),
-			direction: z
-				.enum( [ 'top', 'bottom', 'left', 'right', '' ] )
-				.optional()
-				.describe( 'Direction for slide effect. Use empty string for fade/scale.' ),
-			duration: z.number().min( 0 ).max( 10000 ).optional().describe( 'Animation duration in milliseconds' ),
-			delay: z.number().min( 0 ).max( 10000 ).optional().describe( 'Animation delay in milliseconds' ),
-			easing: z.string().optional().describe( 'Easing function. See interactions schema for options.' ),
-			excludedBreakpoints: z
-				.array( z.string() )
-				.optional()
-				.describe(
-					'Breakpoint IDs on which this interaction is disabled (e.g. ["mobile", "tablet"]). Omit to enable on all breakpoints.'
-				),
-		},
+		description: `Manage the element interaction.`,
+		schema,
 		requiredResources: [
 			{ uri: INTERACTIONS_SCHEMA_URI, description: 'Interactions schema with all available options' },
 		],
 		isDestructive: true,
-		handler: ( input ) => {
-			const {
-				elementId,
-				action,
-				interactionId,
-				trigger,
-				effect,
-				effectType,
-				direction,
-				duration,
-				delay,
-				easing,
-				excludedBreakpoints,
-			} = input;
+		outputSchema: {
+			success: z.boolean().describe( 'Whether the action was successful' ),
+			action: z
+				.enum( [ 'get', 'add', 'update', 'delete', 'clear' ] )
+				.describe( 'Operation to perform. Use "get" first to inspect existing interactions.' ),
+			elementId: z.string().optional().describe( 'The ID of the element to read or modify interactions on' ),
+			interactions: z.array( z.any() ).optional().describe( 'The interactions on the element' ),
+			count: z.number().optional().describe( 'The number of interactions on the element' ),
+		},
+		handler: ( input: {
+			elementId: string;
+			action: 'get' | 'add' | 'update' | 'delete' | 'clear';
+			interactionId?: string;
+			[ key: string ]: unknown;
+		} ) => {
+			const { elementId, action, interactionId, ...animationData } = input;
 
 			const allInteractions = interactionsRepository.all();
 			const elementData = allInteractions.find( ( data ) => data.elementId === elementId );
 			const currentInteractions: ElementInteractions = elementData?.interactions ?? EMPTY_INTERACTIONS;
 
 			if ( action === 'get' ) {
-				const summary = currentInteractions.items.map( ( item ) => {
-					const { value } = item;
-					const animValue = value.animation.value;
-					const timingValue = animValue.timing_config.value;
-					const configValue = animValue.config.value;
-
-					return {
-						id: extractString( value.interaction_id ),
-						trigger: extractString( value.trigger ),
-						effect: extractString( animValue.effect ),
-						effectType: extractString( animValue.type ),
-						direction: extractString( animValue.direction ),
-						duration: extractSize( timingValue.duration ),
-						delay: extractSize( timingValue.delay ),
-						easing: extractString( configValue.easing ),
-						excludedBreakpoints: extractExcludedBreakpoints( value.breakpoints ),
-					};
-				} );
-
-				return JSON.stringify( {
+				return {
+					success: true,
 					elementId,
-					interactions: summary,
-					count: summary.length,
-				} );
+					action,
+					interactions: currentInteractions.items,
+					count: currentInteractions.items.length,
+				};
 			}
 
 			let updatedItems = [ ...currentInteractions.items ];
@@ -124,15 +82,7 @@ Use excludedBreakpoints to disable the animation on specific responsive breakpoi
 
 					const newItem = createInteractionItem( {
 						interactionId: generateTempInteractionId(),
-						trigger: trigger ?? DEFAULT_VALUES.trigger,
-						effect: effect ?? DEFAULT_VALUES.effect,
-						type: effectType ?? DEFAULT_VALUES.type,
-						direction: direction ?? DEFAULT_VALUES.direction,
-						duration: duration ?? DEFAULT_VALUES.duration,
-						delay: delay ?? DEFAULT_VALUES.delay,
-						replay: DEFAULT_VALUES.replay,
-						easing: easing ?? DEFAULT_VALUES.easing,
-						excludedBreakpoints,
+						...animationData,
 					} );
 
 					updatedItems = [ ...updatedItems, newItem ];
@@ -154,26 +104,9 @@ Use excludedBreakpoints to disable the animation on specific responsive breakpoi
 						);
 					}
 
-					const existingItem = updatedItems[ itemIndex ];
-					const existingValue = existingItem.value;
-					const existingAnimation = existingValue.animation.value;
-					const existingTiming = existingAnimation.timing_config.value;
-					const existingConfig = existingAnimation.config.value;
-					const existingExcludedBreakpoints = extractExcludedBreakpoints( existingValue.breakpoints );
-
 					const updatedItem = createInteractionItem( {
 						interactionId,
-						trigger: trigger ?? extractString( existingValue.trigger ),
-						effect: effect ?? extractString( existingAnimation.effect ),
-						type: effectType ?? extractString( existingAnimation.type ),
-						direction: direction !== undefined ? direction : extractString( existingAnimation.direction ),
-						duration:
-							duration !== undefined ? duration : ( extractSize( existingTiming.duration ) as number ),
-						delay: delay !== undefined ? delay : ( extractSize( existingTiming.delay ) as number ),
-						replay: existingConfig.replay?.value ?? DEFAULT_VALUES.replay,
-						easing: easing ?? extractString( existingConfig.easing ),
-						excludedBreakpoints:
-							excludedBreakpoints !== undefined ? excludedBreakpoints : existingExcludedBreakpoints,
+						...animationData,
 					} );
 
 					updatedItems = [
@@ -223,12 +156,12 @@ Use excludedBreakpoints to disable the animation on specific responsive breakpoi
 				);
 			}
 
-			return JSON.stringify( {
+			return {
 				success: true,
 				action,
 				elementId,
-				interactionCount: updatedItems.length,
-			} );
+				count: updatedItems.length,
+			};
 		},
 	} );
 };

package/src/mcp/tools/schema.ts

@@ -0,0 +1,73 @@
+import { z } from '@elementor/schema';
+
+export const baseSchema = {
+	trigger: z.enum( [ 'load', 'scrollIn' ] ).optional().describe( 'Event that triggers the animation' ),
+	effect: z.enum( [ 'fade', 'slide', 'scale' ] ).optional().describe( 'Animation effect type' ),
+	effectType: z.enum( [ 'in', 'out' ] ).optional().describe( 'Whether the animation plays in or out' ),
+	direction: z
+		.enum( [ 'top', 'bottom', 'left', 'right', '' ] )
+		.optional()
+		.describe( 'Direction for slide effect. Use empty string for fade/scale.' ),
+	duration: z.number().min( 0 ).max( 10000 ).optional().describe( 'Animation duration in milliseconds' ),
+	delay: z.number().min( 0 ).max( 10000 ).optional().describe( 'Animation delay in milliseconds' ),
+	easing: z.string().optional().describe( 'Easing function. See interactions schema for options.' ),
+	excludedBreakpoints: z
+		.array( z.string() )
+		.optional()
+		.describe(
+			'Breakpoint IDs on which this interaction is disabled (e.g. ["mobile", "tablet"]). Omit to enable on all breakpoints.'
+		),
+};
+
+export const proSchema = {
+	trigger: z
+		.enum( [ 'load', 'scrollIn', 'scrollOut', 'scrollOn', 'hover', 'click' ] )
+		.optional()
+		.describe( 'Event that triggers the animation' ),
+	effect: z.enum( [ 'fade', 'slide', 'scale', 'custom' ] ).optional().describe( 'Animation effect type' ),
+	customEffect: z
+		.object( {
+			keyframes: z
+				.array(
+					z.object( {
+						stop: z.number().describe( 'The stop of the keyframe in percent, can be either 0 or 100' ),
+						value: z.object( {
+							opacity: z.number().min( 0 ).max( 1 ).describe( 'The opacity of the keyframe' ),
+							scale: z
+								.object( {
+									x: z.number().min( 0 ).max( 1 ).describe( 'The x scale of the keyframe' ),
+									y: z.number().min( 0 ).max( 1 ).describe( 'The y scale of the keyframe' ),
+								} )
+								.optional()
+								.describe( 'The scale of the keyframe' ),
+							rotate: z
+								.object( {
+									x: z.number().min( 0 ).max( 360 ).describe( 'The x rotate of the keyframe' ),
+									y: z.number().min( 0 ).max( 360 ).describe( 'The y rotate of the keyframe' ),
+									z: z.number().min( 0 ).max( 360 ).describe( 'The z rotate of the keyframe' ),
+								} )
+								.optional()
+								.describe( 'The rotate of the keyframe' ),
+							move: z
+								.object( {
+									x: z.number().min( 0 ).max( 1 ).describe( 'The x move of the keyframe' ),
+									y: z.number().min( 0 ).max( 1 ).describe( 'The y move of the keyframe' ),
+									z: z.number().min( 0 ).max( 1 ).describe( 'The z move of the keyframe' ),
+								} )
+								.optional()
+								.describe( 'The move of the keyframe' ),
+							skew: z
+								.object( {
+									x: z.number().min( 0 ).max( 360 ).describe( 'The x skew of the keyframe' ),
+									y: z.number().min( 0 ).max( 360 ).describe( 'The y skew of the keyframe' ),
+								} )
+								.optional()
+								.describe( 'The skew of the keyframe' ),
+						} ),
+					} )
+				)
+				.describe( 'The keyframes of the custom effect' ),
+		} )
+		.optional()
+		.describe( 'The custom effect to use for the animation' ),
+};

package/src/types.ts

@@ -26,11 +26,6 @@ export type {
 	InteractionBreakpointsPropValue,
 };
 
-export type AnimationOption = {
-	value: string;
-	label: string;
-};
-
 export type InteractionConstants = {
 	defaultDuration: number;
 	defaultDelay: number;
@@ -41,7 +36,6 @@ export type InteractionConstants = {
 
 export type InteractionsConfig = {
 	constants: InteractionConstants;
-	animationOptions: AnimationOption[];
 };
 
 export type FieldProps< T = string > = {

package/src/utils/get-interactions-config.ts

@@ -8,7 +8,6 @@ const DEFAULT_CONFIG: InteractionsConfig = {
 		scaleStart: 0.5,
 		easing: 'linear',
 	},
-	animationOptions: [],
 };
 
 export function getInteractionsConfig(): InteractionsConfig {

package/src/utils/prop-value-utils.ts

@@ -151,14 +151,14 @@ export const createInteractionItem = ( {
 	excludedBreakpoints,
 	customEffects,
 }: {
-	trigger: string;
-	effect: string;
-	type: string;
+	trigger?: string;
+	effect?: string;
+	type?: string;
 	direction?: string;
-	duration: SizeStringValue;
-	delay: SizeStringValue;
+	duration?: SizeStringValue;
+	delay?: SizeStringValue;
 	interactionId?: string;
-	replay: boolean;
+	replay?: boolean;
 	easing?: string;
 	relativeTo?: string;
 	offsetTop?: number;
@@ -169,13 +169,13 @@ export const createInteractionItem = ( {
 	$$type: 'interaction-item',
 	value: {
 		...( interactionId && { interaction_id: createString( interactionId ) } ),
-		trigger: createString( trigger ),
+		trigger: createString( trigger ?? '' ),
 		animation: createAnimationPreset( {
-			effect,
-			type,
+			effect: effect ?? '',
+			type: type ?? '',
 			direction,
-			duration,
-			delay,
+			duration: duration ?? 0,
+			delay: delay ?? 0,
 			replay,
 			easing,
 			relativeTo,