@elementor/editor-canvas 3.33.0-98 → 3.34.2

package/src/mcp/tools/build-composition/schema.ts

@@ -0,0 +1,31 @@
+import { z } from '@elementor/schema';
+
+import { STYLE_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+
+export const inputSchema = {
+	xmlStructure: z.string().describe( 'The XML structure representing the composition to be built' ),
+	elementConfig: z
+		.record(
+			z.string().describe( 'The configuration id' ),
+			z.record( z.string().describe( 'property name' ), z.any().describe( 'The PropValue for the property' ) )
+		)
+		.describe( 'A record mapping element IDs to their configuration objects. REQUIRED' ),
+	stylesConfig: z
+		.record(
+			z.string().describe( 'The configuration id' ),
+			z.record(
+				z.string().describe( '_styles property name' ),
+				z.any().describe( 'The PropValue for the style property. MANDATORY' )
+			)
+		)
+		.describe(
+			`A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${ STYLE_SCHEMA_URI }].`
+		)
+		.default( {} ),
+};
+
+export const outputSchema = {
+	errors: z.string().describe( 'Error message if the composition building failed' ).optional(),
+	xmlStructure: z.string().describe( 'The built XML structure as a string' ).optional(),
+	llmInstructions: z.string().describe( 'Instructions used to further actions for you' ).optional(),
+};

package/src/mcp/tools/build-composition/tool.ts

@@ -0,0 +1,163 @@
+import {
+	createElement,
+	deleteElement,
+	generateElementId,
+	getContainer,
+	getWidgetsCache,
+	type V1Element,
+} from '@elementor/editor-elements';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type PropValue } from '@elementor/editor-props';
+
+import { doUpdateElementProperty } from '../../utils/do-update-element-property';
+import { generatePrompt } from './prompt';
+import { inputSchema as schema, outputSchema } from './schema';
+
+export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = reg;
+
+	addTool( {
+		name: 'build-compositions',
+		description: generatePrompt(),
+		schema,
+		outputSchema,
+		handler: async ( params ) => {
+			let xml: Document | null = null;
+			const { xmlStructure, elementConfig, stylesConfig } = params;
+			const errors: Error[] = [];
+			const softErrors: Error[] = [];
+			const rootContainers: V1Element[] = [];
+			const widgetsCache = getWidgetsCache() || {};
+			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
+			try {
+				const parser = new DOMParser();
+				xml = parser.parseFromString( xmlStructure, 'application/xml' );
+				const errorNode = xml.querySelector( 'parsererror' );
+				if ( errorNode ) {
+					throw new Error( 'Failed to parse XML structure: ' + errorNode.textContent );
+				}
+
+				const children = Array.from( xml.children );
+				const iterate = ( node: Element, containerElement: V1Element = documentContainer ) => {
+					const elementTag = node.tagName;
+					if ( ! widgetsCache[ elementTag ] ) {
+						errors.push( new Error( `Unknown widget type: ${ elementTag }` ) );
+					}
+					const isContainer = elementTag === 'e-flexbox' || elementTag === 'e-div-block';
+					const newElement = isContainer
+						? createElement( {
+								containerId: containerElement.id,
+								model: {
+									elType: elementTag,
+									id: generateElementId(),
+								},
+								options: { useHistory: false },
+						  } )
+						: createElement( {
+								containerId: containerElement.id,
+								model: {
+									elType: 'widget',
+									widgetType: elementTag,
+									id: generateElementId(),
+								},
+								options: { useHistory: false },
+						  } );
+					if ( containerElement === documentContainer ) {
+						rootContainers.push( newElement );
+					}
+					node.setAttribute( 'id', newElement.id );
+					const configId = node.getAttribute( 'configuration-id' ) || '';
+					try {
+						const configObject = elementConfig[ configId ] || {};
+						const styleObject = stylesConfig[ configId ] || {};
+						configObject._styles = styleObject;
+						for ( const [ propertyName, propertyValue ] of Object.entries( configObject ) ) {
+							// validate property existance
+							const widgetSchema = widgetsCache[ elementTag ];
+							if (
+								! widgetSchema?.atomic_props_schema?.[ propertyName ] &&
+								propertyName !== '_styles' &&
+								propertyName !== 'custom_css'
+							) {
+								softErrors.push(
+									new Error(
+										`Property "${ propertyName }" does not exist on element type "${ elementTag }".`
+									)
+								);
+								continue;
+							}
+							try {
+								doUpdateElementProperty( {
+									elementId: newElement.id,
+									propertyName,
+									propertyValue:
+										propertyName === 'custom_css'
+											? { _styles: propertyValue }
+											: ( propertyValue as unknown as PropValue ),
+									elementType: elementTag,
+								} );
+							} catch ( error ) {
+								softErrors.push( error as Error );
+							}
+						}
+						if ( isContainer ) {
+							for ( const child of node.children ) {
+								iterate( child, newElement );
+							}
+						} else {
+							node.innerHTML = '';
+							node.removeAttribute( 'configuration' );
+						}
+					} finally {
+					}
+				};
+
+				for ( const childNode of children ) {
+					iterate( childNode, documentContainer );
+					try {
+					} catch ( error ) {
+						errors.push( error as Error );
+					}
+				}
+			} catch ( error ) {
+				errors.push( error as Error );
+			}
+
+			if ( errors.length ) {
+				rootContainers.forEach( ( rootContainer ) => {
+					deleteElement( {
+						elementId: rootContainer.id,
+						options: { useHistory: false },
+					} );
+				} );
+			}
+
+			if ( errors.length > 0 ) {
+				const errorText = `Failed to build composition with the following errors:\n\n
+${ errors.map( ( e ) => ( typeof e === 'string' ? e : e.message ) ).join( '\n\n' ) }
+"Missing $$type" errors indicate that the configuration objects are invalid. Try again and apply **ALL** object entries with correct $$type.
+Now that you have these errors, fix them and try again. Errors regarding configuration objects, please check again the PropType schemas`;
+				throw new Error( errorText );
+			}
+			if ( ! xml ) {
+				throw new Error( 'XML structure is null after parsing.' );
+			}
+			return {
+				xmlStructure: new XMLSerializer().serializeToString( xml ),
+				llmInstructions:
+					( softErrors.length
+						? `The composition was built successfully, but there were some issues with the provided configurations:
+
+${ softErrors.map( ( e ) => `- ${ e.message }` ).join( '\n' ) }
+
+Please use confiugure-element tool to fix these issues. Now that you have information about these issues, use the configure-element tool to fix them!`
+						: '' ) +
+					`
+Next Steps:
+- Use "apply-global-class" tool as there may be global styles ready to be applied to elements.
+- Use "configure-element" tool to further configure elements as needed, including styles.
+`,
+			};
+		},
+	} );
+};

package/src/mcp/tools/configure-element/prompt.ts

@@ -0,0 +1,93 @@
+import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+
+export const configureElementToolPrompt = `Configure an existing element on the page.
+
+# **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
+1. [${ WIDGET_SCHEMA_URI }]
+   Required to understand which widgets are available, and what are their configuration schemas.
+   Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
+2. [${ STYLE_SCHEMA_URI }]
+   Required to understand the styles schema for the widgets. All widgets share the same styles schema, grouped by categories.
+   Use this resource to understand which style properties are available for each element, and how to structure the "_styles" configuration property.
+3. If not sure about the PropValues schema, you can use the "get-element-configuration-values" tool to retreive the current PropValues configuration of the element.
+
+Before using this tool, check the definitions of the elements PropTypes at the resource "widget-schema-by-type" at editor-canvas__elementor://widgets/schema/{widgetType}
+All widgets share a common _style property for styling, which uses the common styles schema.
+Retreive and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
+
+# Parameters
+- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY
+- elementId: The ID of the element to configure. MANDATORY
+- elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
+
+# When to use this tool
+When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
+This tool handles elements of type "widget".
+This tool handles styling elements, using the _styles property in the configuration.
+
+The element's schema must be known before using this tool.
+
+Attached resource link describing how PropType schema should be parsed as PropValue for this tool.
+
+Read carefully the PropType Schema of the element and it's styles, then apply correct PropValue according to the schema.
+
+PropValue structure:
+{
+    "$$type": string, // MANDATORY as defined in the PropType schema under the "key" property
+    value: unknown // The value according to the PropType schema for kinds of "array", use array with PropValues items inside. For "object", read the shape property of the PropType schema. For "plain", use strings.
+}
+
+<IMPORTANT>
+ALWAYS MAKE SURE you have the PropType schemas for the element you are configuring, and the common-styles schema for styling. If you are not sure, retreive the schema from the resources mentioned above.
+</IMPORTANT>
+
+You can use multiple property changes at once by providing multiple entries in the propertiesToChange object, including _style alongside non-style props.
+Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
+Nested properties, such as for the _styles, should include a "_styles" property with object containing the definitions to change.
+
+Make sure you have the "widget-schema-by-type" resource available to retreive the PropType schema for the element type you are configuring.
+
+# How to configure elements
+We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
+For _styles, use the style schema provided, as it also uses the PropType format.
+For all non-primitive types, provide the key property as defined in the schema as $$type in the generated objecct, as it is MANDATORY for parsing.
+
+Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+
+# Example
+\`\`\`json
+{
+  propertiesToChange: {
+    // List of properties TO CHANGE, following the PropType schema for the element as defined in the resource [${ WIDGET_SCHEMA_URI }]
+    title: {
+      $$type: 'string',
+      value: 'New Title Text'
+    },
+    border: {
+      $$type: 'boolean',
+      value: false
+    },
+    _styles: {
+      // List of available keys available at the [${ STYLE_SCHEMA_URI }] dynamic resource
+      'line-height': {
+        $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+        value: {
+          size: {
+            $$type: 'number',
+            value: 20
+          },
+          unit: {
+            $$type: 'string',
+            value: 'px'
+          }
+        }
+      }
+    }
+  }
+};
+\`\`\`
+
+<IMPORTANT>
+The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
+</IMPORTANT>
+`;

package/src/mcp/tools/configure-element/schema.ts

@@ -0,0 +1,25 @@
+import { z } from '@elementor/schema';
+
+export const inputSchema = {
+	propertiesToChange: z
+		.record(
+			z
+				.string()
+				.describe(
+					'The property name. If nested property, provide the root property name, and the object delta only.'
+				),
+			z.any().describe( "The property's value" )
+		)
+		.describe( 'An object record containing property names and their new values to be set on the element' )
+		.optional(),
+	elementType: z.string().describe( 'The type of the element to retreive the schema' ),
+	elementId: z.string().describe( 'The unique id of the element to configure' ),
+};
+
+export const outputSchema = {
+	success: z
+		.boolean()
+		.describe(
+			'Whether the configuration change was successful, only if propertyName and propertyValue are provided'
+		),
+};

package/src/mcp/tools/configure-element/tool.ts

@@ -0,0 +1,67 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+
+import { WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+import { doUpdateElementProperty } from '../../utils/do-update-element-property';
+import { configureElementToolPrompt } from './prompt';
+import { inputSchema as schema, outputSchema } from './schema';
+
+export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = reg;
+
+	addTool( {
+		name: 'configure-element',
+		description: configureElementToolPrompt,
+		schema,
+		outputSchema,
+		handler: ( { elementId, propertiesToChange, elementType } ) => {
+			if ( ! propertiesToChange ) {
+				throw new Error(
+					'propertiesToChange is required to configure an element. Now that you have this information, ensure you have the schema and try again.'
+				);
+			}
+			const toUpdate = Object.entries( propertiesToChange );
+			for ( const [ propertyName, propertyValue ] of toUpdate ) {
+				if ( ! propertyName && ! elementId && ! elementType ) {
+					throw new Error(
+						'propertyName, elementId, elementType are required to configure an element. If you want to retreive the schema, use the get-element-configuration-schema tool.'
+					);
+				}
+
+				try {
+					doUpdateElementProperty( {
+						elementId,
+						elementType,
+						propertyName,
+						propertyValue,
+					} );
+				} catch ( error ) {
+					const errorMessage = createUpdateErrorMessage( {
+						propertyName,
+						elementId,
+						elementType,
+						error: error as Error,
+					} );
+					throw new Error( errorMessage );
+				}
+			}
+			return {
+				success: true,
+			};
+		},
+	} );
+};
+
+function createUpdateErrorMessage( opts: {
+	propertyName: string;
+	elementId: string;
+	elementType: string;
+	error: Error;
+} ) {
+	const { propertyName, elementId, elementType, error } = opts;
+	return `Failed to update property "${ propertyName }" on element "${ elementId }": ${ error.message }.
+Check the element's PropType schema at the resource [${ WIDGET_SCHEMA_URI.replace(
+		'{widgetType}',
+		elementType
+	) }] for type "${ elementType }" to ensure the property exists and the value matches the expected PropType.
+Now that you have this information, ensure you have the schema and try again.`;
+}

package/src/mcp/tools/get-element-config/tool.ts

@@ -0,0 +1,69 @@
+import { getContainer, getElementStyles, getWidgetsCache } from '@elementor/editor-elements';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type PropValue, Schema } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+const schema = {
+	elementId: z.string(),
+};
+
+const outputSchema = {
+	propValues: z
+		.record( z.string(), z.any() )
+		.describe(
+			'A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues'
+		),
+};
+
+export const initGetElementConfigTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = reg;
+
+	addTool( {
+		name: 'get-element-configuration-values',
+		description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
+		schema,
+		outputSchema,
+		handler: async ( { elementId } ) => {
+			const element = getContainer( elementId );
+			if ( ! element ) {
+				throw new Error( `Element with ID ${ elementId } not found.` );
+			}
+			const elementRawSettings = element.settings;
+			const propSchema = getWidgetsCache()?.[ element.model.get( 'widgetType' ) || '' ]?.atomic_props_schema;
+
+			if ( ! elementRawSettings || ! propSchema ) {
+				throw new Error( `No settings or prop schema found for element ID: ${ elementId }` );
+			}
+
+			const propValues: Record< string, PropValue > = {};
+			const stylePropValues: Record< string, PropValue > = {};
+
+			Schema.configurableKeys( propSchema ).forEach( ( key ) => {
+				propValues[ key ] = structuredClone( elementRawSettings.get( key ) );
+			} );
+			const elementStyles = getElementStyles( elementId ) || {};
+			const localStyle = Object.values( elementStyles ).find( ( style ) => style.label === 'local' );
+
+			if ( localStyle ) {
+				const defaultVariant = localStyle.variants.find(
+					( variant ) => variant.meta.breakpoint === 'desktop' && ! variant.meta.state
+				);
+				if ( defaultVariant ) {
+					const styleProps = defaultVariant.props || {};
+					Object.keys( styleProps ).forEach( ( stylePropName ) => {
+						if ( typeof styleProps[ stylePropName ] !== 'undefined' ) {
+							stylePropValues[ stylePropName ] = structuredClone( styleProps[ stylePropName ] );
+						}
+					} );
+				}
+			}
+
+			return {
+				propValues: {
+					...propValues,
+					_styles: stylePropValues,
+				},
+			};
+		},
+	} );
+};

package/src/mcp/utils/do-update-element-property.ts

@@ -0,0 +1,129 @@
+import {
+	createElementStyle,
+	getElementStyles,
+	getWidgetsCache,
+	updateElementSettings,
+	updateElementStyle,
+} from '@elementor/editor-elements';
+import {
+	getPropSchemaFromCache,
+	type PropValue,
+	Schema,
+	stringPropTypeUtil,
+	type TransformablePropValue,
+} from '@elementor/editor-props';
+import { type CustomCss, getStylesSchema } from '@elementor/editor-styles';
+
+type OwnParams = {
+	elementId: string;
+	elementType: string;
+	propertyName: string;
+	propertyValue: string | PropValue | TransformablePropValue< string, unknown >;
+};
+
+function resolvePropValue( value: unknown, forceKey?: string ): PropValue {
+	return Schema.adjustLlmPropValueSchema( value as PropValue, forceKey );
+}
+
+export const doUpdateElementProperty = ( params: OwnParams ) => {
+	const { elementId, propertyName, propertyValue, elementType } = params;
+
+	if ( propertyName === '_styles' ) {
+		const elementStyles = getElementStyles( elementId ) || {};
+		const propertyMapValue = propertyValue as Record< string, PropValue >;
+		const styleSchema = getStylesSchema();
+		const transformedStyleValues = Object.fromEntries(
+			Object.entries( propertyMapValue ).map( ( [ key, val ] ) => {
+				if ( key === 'custom_css' ) {
+					return [ key, val ];
+				}
+				const { key: propKey, kind } = styleSchema?.[ key ] || {};
+				if ( ! propKey && kind !== 'union' ) {
+					throw new Error( `_styles property ${ key } is not supported.` );
+				}
+				return [ key, resolvePropValue( val, propKey ) ];
+			} )
+		);
+		let customCss: CustomCss | undefined;
+		Object.keys( propertyMapValue as Record< string, unknown > ).forEach( ( stylePropName ) => {
+			const propertyRawSchema = styleSchema[ stylePropName ];
+			if ( stylePropName === 'custom_css' ) {
+				let customCssValue = propertyMapValue[ stylePropName ] as object | string;
+				if ( typeof customCssValue === 'object' ) {
+					customCssValue =
+						stringPropTypeUtil.extract( customCssValue ) ||
+						( customCssValue as { value: unknown } )?.value ||
+						'';
+				}
+				customCss = {
+					raw: btoa( customCssValue as string ),
+				};
+				return;
+			}
+			const isSupported = !! propertyRawSchema;
+			if ( ! isSupported ) {
+				throw new Error( `_styles property ${ stylePropName } is not supported.` );
+			}
+			if ( propertyRawSchema.kind === 'plain' ) {
+				if ( typeof ( propertyMapValue as Record< string, unknown > )[ stylePropName ] !== 'object' ) {
+					const propUtil = getPropSchemaFromCache( propertyRawSchema.key );
+					if ( propUtil ) {
+						const plainValue = propUtil.create( propertyMapValue[ stylePropName ] );
+						propertyMapValue[ stylePropName ] = plainValue;
+					}
+				}
+			}
+		} );
+		const localStyle = Object.values( elementStyles ).find( ( style ) => style.label === 'local' );
+		if ( ! localStyle ) {
+			createElementStyle( {
+				elementId,
+				...( typeof customCss !== 'undefined' ? { custom_css: customCss } : {} ),
+				classesProp: 'classes',
+				label: 'local',
+				meta: {
+					breakpoint: 'desktop',
+					state: null,
+				},
+				props: {
+					...transformedStyleValues,
+				},
+			} );
+		} else {
+			updateElementStyle( {
+				elementId,
+				styleId: localStyle.id,
+				meta: {
+					breakpoint: 'desktop',
+					state: null,
+				},
+				...( typeof customCss !== 'undefined' ? { custom_css: customCss } : {} ),
+				props: {
+					...transformedStyleValues,
+				},
+			} );
+		}
+		return;
+	}
+
+	const elementPropSchema = getWidgetsCache()?.[ elementType ]?.atomic_props_schema;
+	if ( ! elementPropSchema ) {
+		throw new Error( `No prop schema found for element type: ${ elementType }` );
+	}
+	if ( ! elementPropSchema[ propertyName ] ) {
+		const propertyNames = Object.keys( elementPropSchema );
+		throw new Error(
+			`Property "${ propertyName }" does not exist on element type "${ elementType }". Available properties are: ${ propertyNames.join(
+				', '
+			) }`
+		);
+	}
+	const value = resolvePropValue( propertyValue );
+	updateElementSettings( {
+		id: elementId,
+		props: {
+			[ propertyName ]: value,
+		},
+		withHistory: false,
+	} );
+};

package/src/mcp/utils/generate-available-tags.ts

@@ -0,0 +1,23 @@
+import { getWidgetsCache, type V1ElementConfig } from '@elementor/editor-elements';
+
+type ElTypedElementConfig = V1ElementConfig< {
+	elType?: string;
+} >;
+
+export const generateAvailableTags = () => {
+	const cache = getWidgetsCache< ElTypedElementConfig >();
+	if ( ! cache ) {
+		return [];
+	}
+	const customTags = Object.entries( cache )
+		.filter( ( [ , widgetData ] ) => !! widgetData.atomic_controls )
+		.map( ( [ widgetType, widgetData ] ) => {
+			const configurationSchema = widgetData; //getElementSchemaAsJsonSchema( widgetType );
+			return {
+				tag: `${ widgetType }`,
+				description: widgetData.title || widgetData.elType || `A ${ widgetType } element`,
+				configurationSchema: JSON.stringify( configurationSchema ),
+			};
+		} );
+	return customTags;
+};

package/src/renderers/__tests__/__snapshots__/create-styles-renderer.test.ts.snap

@@ -5,11 +5,13 @@ exports[`renderStyles should render styles 1`] = `
   {
     "breakpoint": "desktop",
     "id": "test",
+    "state": null,
     "value": ".test{font-size:10px;}.test:hover{font-size:20px;}@media(max-width:992px){.test{font-size:30px;}}@media(max-width:768px){.test:focus{font-size:40px;}}",
   },
   {
     "breakpoint": "desktop",
     "id": "test-2",
+    "state": null,
     "value": ".custom-name{font-size:50px;}",
   },
 ]

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -112,6 +112,7 @@ describe( 'renderStyles', () => {
 				breakpoint: 'desktop',
 				id: 'test',
 				value: '.elementor-prefix .test{font-size:24px;}',
+				state: null,
 			},
 		] );
 	} );
@@ -200,4 +201,28 @@ describe( 'custom_css rendering', () => {
 		// Assert.
 		expect( result[ 0 ].value ).toContain( css );
 	} );
+
+	it( 'should render class state with selector', async () => {
+		// Arrange.
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: 'e--selected' },
+					props: {},
+					custom_css: null,
+				},
+			],
+		};
+
+		// Act.
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve: async () => ( {} ) } );
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).toContain( '.test.e--selected{}' );
+	} );
 } );

package/src/renderers/create-props-resolver.ts

@@ -1,5 +1,6 @@
 import {
 	isTransformable,
+	migratePropValue,
 	type PropKey,
 	type Props,
 	type PropsSchema,
@@ -44,7 +45,7 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 			Object.entries( schema ).map( async ( [ key, type ] ) => {
 				const value = props[ key ] ?? type.default;
 
-				const transformed = await transform( { value, key, type, signal } );
+				const transformed = ( await transform( { value, key, type, signal } ) ) as PropValue;
 
 				onPropResolve?.( { key, value: transformed } );
 
@@ -76,6 +77,12 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 			return null;
 		}
 
+		value = migratePropValue( value, type );
+
+		if ( ! isTransformable( value ) ) {
+			return value;
+		}
+
 		if ( type.kind === 'union' ) {
 			type = type.prop_types[ value.$$type ];