@elementor/editor-interactions 4.0.0-619 → 4.0.0-manual

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-619",
+  "version": "4.0.0-manual",
   "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-619",
-    "@elementor/editor-elements": "4.0.0-619",
-    "@elementor/editor-mcp": "4.0.0-619",
-    "@elementor/editor-props": "4.0.0-619",
-    "@elementor/editor-responsive": "4.0.0-619",
-    "@elementor/editor-ui": "4.0.0-619",
-    "@elementor/editor-v1-adapters": "4.0.0-619",
+    "@elementor/editor-controls": "4.0.0-manual",
+    "@elementor/editor-elements": "4.0.0-manual",
+    "@elementor/editor-mcp": "4.0.0-manual",
+    "@elementor/editor-props": "4.0.0-manual",
+    "@elementor/editor-responsive": "4.0.0-manual",
+    "@elementor/editor-ui": "4.0.0-manual",
+    "@elementor/editor-v1-adapters": "4.0.0-manual",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.0.0-619",
-    "@elementor/session": "4.0.0-619",
+    "@elementor/schema": "4.0.0-manual",
+    "@elementor/session": "4.0.0-manual",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-619",
+    "@elementor/utils": "4.0.0-manual",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/interaction-details.tsx

@@ -35,8 +35,8 @@ export const DEFAULT_VALUES = {
 	replay: false,
 	easing: 'easeIn',
 	relativeTo: 'viewport',
-	offsetTop: 15,
-	offsetBottom: 85,
+	start: 85,
+	end: 15,
 };
 
 const TRIGGERS_WITHOUT_REPLAY = [ 'load', 'scrollOn', 'hover', 'click' ];
@@ -51,8 +51,8 @@ type InteractionsControlType =
 	| 'replay'
 	| 'easing'
 	| 'relativeTo'
-	| 'offsetTop'
-	| 'offsetBottom'
+	| 'start'
+	| 'end'
 	| 'customEffects';
 
 type InteractionValues = {
@@ -65,8 +65,8 @@ type InteractionValues = {
 	replay: boolean;
 	easing: string;
 	relativeTo: string;
-	offsetTop: SizeStringValue;
-	offsetBottom: SizeStringValue;
+	start: SizeStringValue;
+	end: SizeStringValue;
 	customEffects?: PropValue;
 };
 
@@ -80,8 +80,8 @@ const controlVisibilityConfig: ControlVisibilityConfig = {
 	effectType: ( values ) => values.effect !== 'custom',
 	direction: ( values ) => values.effect !== 'custom',
 	relativeTo: ( values ) => values.trigger === 'scrollOn',
-	offsetTop: ( values ) => values.trigger === 'scrollOn',
-	offsetBottom: ( values ) => values.trigger === 'scrollOn',
+	start: ( values ) => values.trigger === 'scrollOn',
+	end: ( values ) => values.trigger === 'scrollOn',
 
 	duration: ( values ) => {
 		const isRelativeToVisible = values.trigger === 'scrollOn';
@@ -114,11 +114,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	const easing = extractString( interaction.animation.value.config?.value.easing, DEFAULT_VALUES.easing );
 	const relativeTo = extractString( interaction.animation.value.config?.value.relativeTo, DEFAULT_VALUES.relativeTo );
 
-	const offsetTop = extractSize( interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop );
-	const offsetBottom = extractSize(
-		interaction.animation.value.config?.value.offsetBottom,
-		DEFAULT_VALUES.offsetBottom
-	);
+	const start = extractSize( interaction.animation.value.config?.value.start, DEFAULT_VALUES.start );
+	const end = extractSize( interaction.animation.value.config?.value.end, DEFAULT_VALUES.end );
 
 	const interactionValues = {
 		trigger,
@@ -130,8 +127,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		easing,
 		replay,
 		relativeTo,
-		offsetTop,
-		offsetBottom,
+		start,
+		end,
 		customEffects,
 	};
 
@@ -142,11 +139,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		'relativeTo',
 		controlVisibilityConfig.relativeTo( interactionValues )
 	);
-	const OffsetTopControl = useControlComponent( 'offsetTop', controlVisibilityConfig.offsetTop( interactionValues ) );
-	const OffsetBottomControl = useControlComponent(
-		'offsetBottom',
-		controlVisibilityConfig.offsetBottom( interactionValues )
-	);
+	const StartControl = useControlComponent( 'start', controlVisibilityConfig.start( interactionValues ) );
+	const EndControl = useControlComponent( 'end', controlVisibilityConfig.end( interactionValues ) );
 	const CustomEffectControl = useControlComponent(
 		'customEffects',
 		controlVisibilityConfig.custom( interactionValues )
@@ -172,8 +166,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 			replay: boolean;
 			easing?: string;
 			relativeTo: string;
-			offsetTop: SizeStringValue;
-			offsetBottom: SizeStringValue;
+			start: SizeStringValue;
+			end: SizeStringValue;
 			customEffects?: PropValue;
 		} >
 	): void => {
@@ -198,8 +192,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 				replay: updates.replay ?? replay,
 				easing: updates.easing ?? easing,
 				relativeTo: updates.relativeTo ?? relativeTo,
-				offsetTop: updates.offsetTop ?? offsetTop,
-				offsetBottom: updates.offsetBottom ?? offsetBottom,
+				start: updates.start ?? start,
+				end: updates.end ?? end,
 				customEffects: updates.customEffects ?? customEffects,
 			} ),
 		};
@@ -297,32 +291,30 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 					<>
 						<Divider />
 						<Grid container spacing={ 1.5 }>
-							<Field label={ __( 'Relative To', 'elementor' ) }>
-								<RelativeToControl
-									value={ relativeTo }
-									onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
-								/>
-							</Field>
-							{ OffsetTopControl && (
-								<Field label={ __( 'Offset Top', 'elementor' ) }>
-									<OffsetTopControl
-										value={ String( parseSizeValue( offsetTop, [ '%' ] ).size ) }
+							{ StartControl && (
+								<Field label={ __( 'Start', 'elementor' ) }>
+									<StartControl
+										value={ parseSizeValue( start, [ '%' ] ).size?.toString() ?? '' }
 										onChange={ ( v: string ) =>
-											updateInteraction( { offsetTop: v as SizeStringValue } )
+											updateInteraction( { start: v as SizeStringValue } )
 										}
 									/>
 								</Field>
 							) }
-							{ OffsetBottomControl && (
-								<Field label={ __( 'Offset Bottom', 'elementor' ) }>
-									<OffsetBottomControl
-										value={ String( parseSizeValue( offsetBottom, [ '%' ] ).size ) }
-										onChange={ ( v: string ) =>
-											updateInteraction( { offsetBottom: v as SizeStringValue } )
-										}
+							{ EndControl && (
+								<Field label={ __( 'End', 'elementor' ) }>
+									<EndControl
+										value={ parseSizeValue( end, [ '%' ] ).size?.toString() ?? '' }
+										onChange={ ( v: string ) => updateInteraction( { end: v as SizeStringValue } ) }
 									/>
 								</Field>
 							) }
+							<Field label={ __( 'Relative To', 'elementor' ) }>
+								<RelativeToControl
+									value={ relativeTo }
+									onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
+								/>
+							</Field>
 						</Grid>
 						<Divider />
 					</>

package/src/interactions-controls-registry.ts

@@ -13,8 +13,8 @@ type InteractionsControlType =
 	| 'replay'
 	| 'easing'
 	| 'relativeTo'
-	| 'offsetTop'
-	| 'offsetBottom'
+	| 'start'
+	| 'end'
 	| 'customEffects';
 
 type InteractionsControlPropsMap = {
@@ -28,8 +28,8 @@ type InteractionsControlPropsMap = {
 	replay: ReplayFieldProps;
 	easing: FieldProps;
 	relativeTo: FieldProps;
-	offsetTop: FieldProps;
-	offsetBottom: FieldProps;
+	start: FieldProps;
+	end: FieldProps;
 };
 
 type ControlOptions< T extends InteractionsControlType > = {

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' ),
+};