@elementor/editor-variables 3.35.0-470 → 3.35.0-471

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.35.0-470",
+  "version": "3.35.0-471",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-470",
-    "@elementor/editor-canvas": "3.35.0-470",
-    "@elementor/editor-controls": "3.35.0-470",
-    "@elementor/editor-current-user": "3.35.0-470",
-    "@elementor/editor-editing-panel": "3.35.0-470",
-    "@elementor/editor-mcp": "3.35.0-470",
-    "@elementor/editor-panels": "3.35.0-470",
-    "@elementor/editor-props": "3.35.0-470",
-    "@elementor/editor-ui": "3.35.0-470",
-    "@elementor/editor-v1-adapters": "3.35.0-470",
-    "@elementor/http-client": "3.35.0-470",
+    "@elementor/editor": "3.35.0-471",
+    "@elementor/editor-canvas": "3.35.0-471",
+    "@elementor/editor-controls": "3.35.0-471",
+    "@elementor/editor-current-user": "3.35.0-471",
+    "@elementor/editor-editing-panel": "3.35.0-471",
+    "@elementor/editor-mcp": "3.35.0-471",
+    "@elementor/editor-panels": "3.35.0-471",
+    "@elementor/editor-props": "3.35.0-471",
+    "@elementor/editor-ui": "3.35.0-471",
+    "@elementor/editor-v1-adapters": "3.35.0-471",
+    "@elementor/http-client": "3.35.0-471",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-470",
-    "@elementor/schema": "3.35.0-470",
+    "@elementor/mixpanel": "3.35.0-471",
+    "@elementor/schema": "3.35.0-471",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-470",
+    "@elementor/utils": "3.35.0-471",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/mcp/index.ts

@@ -1,11 +1,7 @@
-import { initCreateVariableTool } from './create-variable-tool';
-import { initDeleteVariableTool } from './delete-variable-tool';
-import { initUpdateVariableTool } from './update-variable-tool';
+import { initManageVariableTool } from './manage-variable-tool';
 import { initVariablesResource } from './variables-resource';
 
 export function initMcp() {
-	initCreateVariableTool();
-	initUpdateVariableTool();
-	initDeleteVariableTool();
+	initManageVariableTool();
 	initVariablesResource();
 }

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

@@ -0,0 +1,85 @@
+import { getMCPByDomain } from '@elementor/editor-mcp';
+import { z } from '@elementor/schema';
+
+import { service } from '../service';
+import { GLOBAL_VARIABLES_URI } from './variables-resource';
+
+export const initManageVariableTool = () => {
+	getMCPByDomain( 'variables' ).addTool( {
+		name: 'manage-global-variable',
+		schema: {
+			action: z.enum( [ 'create', 'update', 'delete' ] ).describe( 'Operation to perform' ),
+			id: z
+				.string()
+				.optional()
+				.describe( 'Variable id (required for update/delete). Get from list-global-variables.' ),
+			type: z
+				.string()
+				.optional()
+				.describe( 'Variable type: "global-color-variable" or "global-font-variable" (required for create)' ),
+			label: z.string().optional().describe( 'Variable label (required for create/update)' ),
+			value: z.string().optional().describe( 'Variable value (required for create/update)' ),
+		},
+		outputSchema: {
+			status: z.enum( [ 'ok' ] ).describe( 'Operation status' ),
+			message: z.string().optional().describe( 'Error details if status is error' ),
+		},
+		modelPreferences: {
+			intelligencePriority: 0.75,
+			speedPriority: 0.75,
+		},
+		requiredResources: [
+			{
+				uri: GLOBAL_VARIABLES_URI,
+				description: 'Global variables',
+			},
+		],
+		description: `Manages global variables (create/update/delete). Existing variables available in resources.
+CREATE: requires type, label, value. Ensure label is unique.
+UPDATE: requires id, label, value. When renaming: keep existing value. When updating value: keep exact label.
+DELETE: requires id. DESTRUCTIVE - confirm with user first.
+
+# NAMING - IMPORTANT
+the variables names should ALWAYS be lowercased and dashed spaced. example: "Headline Primary" should be "headline-primary"
+`,
+		handler: async ( params ) => {
+			const operations = getServiceActions( service );
+			const op = operations[ params.action ];
+			if ( op ) {
+				await op( params );
+				return {
+					status: 'ok',
+				};
+			}
+			throw new Error( `Unknown action ${ params.action }` );
+		},
+		isDestructive: true, // Because delete is destructive
+	} );
+};
+
+type Opts< T extends Record< string, string > > = Partial< T > & {
+	[ k: string ]: unknown;
+};
+
+function getServiceActions( svc: typeof service ) {
+	return {
+		create( { type, label, value }: Opts< { type: string; label: string; value: string } > ) {
+			if ( ! type || ! label || ! value ) {
+				throw new Error( 'Create requires type, label, and value' );
+			}
+			return svc.create( { type, label, value } );
+		},
+		update( { id, label, value }: Opts< { id: string; label: string; value: string } > ) {
+			if ( ! id || ! label || ! value ) {
+				throw new Error( 'Update requires id, label, and value' );
+			}
+			return svc.update( id, { label, value } );
+		},
+		delete( { id }: Opts< { id: string } > ) {
+			if ( ! id ) {
+				throw new Error( 'delete requires id' );
+			}
+			return svc.delete( id );
+		},
+	};
+}

package/src/mcp/variables-resource.ts

@@ -6,33 +6,37 @@ import { type TVariable } from '../storage';
 export const GLOBAL_VARIABLES_URI = 'elementor://global-variables';
 
 export const initVariablesResource = () => {
-	const { mcpServer } = getMCPByDomain( 'canvas' );
+	const canvasMcpEntry = getMCPByDomain( 'canvas' );
+	const variablesMcpEntry = getMCPByDomain( 'variables' );
 
-	mcpServer.resource(
-		'global-variables',
-		GLOBAL_VARIABLES_URI,
-		{
-			description:
-				'List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)',
-		},
-		async () => {
-			const variables: Record< string, TVariable > = {};
-			Object.entries( service.variables() ).forEach( ( [ id, variable ] ) => {
-				if ( ! variable.deleted ) {
-					variables[ id ] = variable;
-				}
-			} );
+	[ canvasMcpEntry, variablesMcpEntry ].forEach( ( entry ) => {
+		const { mcpServer } = entry;
+		mcpServer.resource(
+			'global-variables',
+			GLOBAL_VARIABLES_URI,
+			{
+				description:
+					'List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)',
+			},
+			async () => {
+				const variables: Record< string, TVariable > = {};
+				Object.entries( service.variables() ).forEach( ( [ id, variable ] ) => {
+					if ( ! variable.deleted ) {
+						variables[ id ] = variable;
+					}
+				} );
 
-			return {
-				contents: [ { uri: GLOBAL_VARIABLES_URI, text: JSON.stringify( variables ) } ],
-			};
-		}
-	);
+				return {
+					contents: [ { uri: GLOBAL_VARIABLES_URI, text: JSON.stringify( variables ) } ],
+				};
+			}
+		);
 
-	window.addEventListener( 'variables:updated', () => {
-		mcpServer.server.sendResourceUpdated( {
-			uri: GLOBAL_VARIABLES_URI,
-			contents: [ { uri: GLOBAL_VARIABLES_URI, text: localStorage[ 'elementor-global-variables' ] } ],
+		window.addEventListener( 'variables:updated', () => {
+			mcpServer.server.sendResourceUpdated( {
+				uri: GLOBAL_VARIABLES_URI,
+				contents: [ { uri: GLOBAL_VARIABLES_URI, text: localStorage[ 'elementor-global-variables' ] } ],
+			} );
 		} );
 	} );
 };

package/src/utils/llm-propvalue-label-resolver.ts

@@ -1,25 +1,15 @@
 import { service } from '../service';
 
+const defaultResolver = ( key: string ) => ( value: unknown ) => {
+	const idOrLabel = String( value );
+	return {
+		$$type: key,
+		value: service.variables()[ idOrLabel ] ? idOrLabel : service.findIdByLabel( idOrLabel ),
+	};
+};
+
 export const globalVariablesLLMResolvers = {
-	'global-color-variable': ( value: unknown ) => {
-		const idOrLabel = String( value );
-		return {
-			$$type: 'global-color-variable',
-			value: service.variables()[ idOrLabel ] ? idOrLabel : service.findIdByLabel( idOrLabel ),
-		};
-	},
-	'global-font-variable': ( value: unknown ) => {
-		const idOrLabel = String( value );
-		return {
-			$$type: 'global-font-variable',
-			value: service.variables()[ idOrLabel ] ? idOrLabel : service.findIdByLabel( idOrLabel ),
-		};
-	},
-	'global-size-variable': ( value: unknown ) => {
-		const idOrLabel = String( value );
-		return {
-			$$type: 'global-size-variable',
-			value: service.variables()[ idOrLabel ] ? idOrLabel : service.findIdByLabel( idOrLabel ),
-		};
-	},
+	'global-color-variable': defaultResolver( 'global-color-variable' ),
+	'global-font-variable': defaultResolver( 'global-font-variable' ),
+	'global-size-variable': defaultResolver( 'global-size-variable' ),
 };

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

@@ -1,74 +0,0 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
-import { z } from '@elementor/schema';
-
-import { service } from '../service';
-
-const InputSchema = {
-	type: z
-		.string()
-		.describe( 'The type of the variable. Example values: "global-color-variable" or "global-font-variable".' ),
-	label: z.string().describe( 'The label of the variable, displayed to the user' ),
-	value: z.string().describe( 'The value of the variable, should correspond to the type' ),
-};
-
-const OutputSchema = {
-	status: z.enum( [ 'ok', 'error' ] ).describe( 'The status of the operation' ),
-	message: z.string().optional().describe( 'Optional message providing additional information about the operation' ),
-};
-
-export const initCreateVariableTool = () => {
-	getMCPByDomain( 'canvas' ).addTool( {
-		name: 'create-global-variable',
-		schema: InputSchema,
-		outputSchema: OutputSchema,
-		modelPreferences: {
-			intelligencePriority: 0.7,
-			speedPriority: 0.7,
-		},
-		description: `Create a new global variable
-## When to use this tool:
-- When a user requests to create a new global variable in the Elementor editor.
-- When you need to add a new variable to be used in the editor.
-
-## Prequisites:
-- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.
-- Make sure when creating a new variable, the label is unique and not already in use.
-- If the user does not provide a label, ask them to provide one before proceeding.
-- If the user does not provide a type, ask them to provide one before proceeding.
-- If the user does not provide a value, ask them to provide one before proceeding.
-
-## Required parameters:
-- type: The type of the variable. Possible values are 'global-color-variable' or 'global-font-variable'.
-- label: The label of the variable, displayed to the user. Must be unique and not already in use.
-- value: The value of the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif').
-
-## Example tool call (JSON format):
-\`\`\`json
-{ "type": "global-color-variable", "label": "My Cool Color", "value": "rgb(1,2,3)" }
-\`\`\`
-
-## Example tool response (JSON format):
-\`\`\`json
-{ "status": "ok" }
-\`\`\`
-
-## Example to a failed tool response, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.
-{ "status": "error", "message": "Unsupported type 'global-kuku-variable'" }
-
-In that case, inform the user the type is unsupported and they should try another type, perhaps consult to online documentation.
-`,
-		handler: async ( params ) => {
-			const { type, label, value } = params;
-			try {
-				await service.create( { type, label, value } );
-			} catch ( error ) {
-				const message: string = ( error as Error ).message || 'Unknown server error';
-				return {
-					status: 'error',
-					message: `There was an error creating the variable: ${ message }`,
-				};
-			}
-			return { status: 'ok' };
-		},
-	} );
-};

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

@@ -1,54 +0,0 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
-import { z } from '@elementor/schema';
-
-import { service } from '../service';
-
-export const initDeleteVariableTool = () => {
-	getMCPByDomain( 'canvas' ).addTool( {
-		name: 'delete-global-variable',
-		schema: {
-			id: z.string().describe( 'The unique identifier of the variable to be deleted.' ),
-		},
-		outputSchema: {
-			status: z.enum( [ 'ok', 'error' ] ).describe( 'The status of the operation' ),
-		},
-		modelPreferences: {
-			intelligencePriority: 0.7,
-			speedPriority: 0.8,
-		},
-		description: `Delete an existing global variable
-    
-## When to use this tool:
-- When a user requests to delete an existing global variable in the Elementor editor.
-- When you need to remove a variable that is no longer needed or relevant, with the user's confirmation.
-
-## Prerequisites:
-- Ensure you have the most up-to-date list of existing global variables. You can use the "list-global-variables" tool to fetch the current variables.
-- Reference the variable by the "id" property, given from the "list-global-variables" tool.
-- Make sure you have the unique identifier of the variable to be deleted before using this tool.
-- Confirm with the user that they want to proceed with the deletion, as this action is irreversible.
-
-<notice>
-A use might reference a variable by it's label, but you must always use the unique identifier (id) to delete it.
-If you only have the label, use the "list-global-variables" tool to find the corresponding id.
-</notice>
-
-<important>
-This operation is destructive and cannot be undone. Ensure that the user is fully aware of the consequences before proceeding.
-When a variable is deleted, all references to it in all pages accross the website will lose their effect.
-</important>`,
-		handler: async ( params ) => {
-			const { id } = params;
-			try {
-				await service.delete( id );
-				return { status: 'ok' };
-				// eslint-disable-next-line @typescript-eslint/no-unused-vars
-			} catch ( err: unknown ) {
-				return {
-					status: 'error',
-				};
-			}
-		},
-		isDestrcutive: true,
-	} );
-};

package/src/mcp/list-variables-tool.ts

@@ -1,62 +0,0 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
-import { z } from '@elementor/schema';
-
-import { service } from '../service';
-import { type TVariable } from '../storage';
-
-const VariableSchema = {
-	type: z.string().describe( 'The type of the variable.' ),
-	label: z.string().describe( 'The label of the variable, displayed to the user' ),
-	value: z.string().describe( 'The value of the variable.' ),
-	id: z
-		.string()
-		.describe(
-			'The unique identifier of the variable. Used for internal reference, not to be exposed to end users'
-		),
-};
-const VariableListSchema = {
-	variables: z.array( z.object( VariableSchema ) ).describe( 'List of variables' ),
-};
-
-export const initListVariablesTool = () => {
-	getMCPByDomain( 'canvas' ).addTool( {
-		name: 'list-global-variables',
-		description: `List the global variables
-
-  ## When to use this tool:
-  - When a user requests to see all available global variables in the Elementor editor.
-  - When you need to be exact on a variable label, to avoid any mistakes.
-  - When you want to see the most up-to-date list of global variables.
-  - Before using any other variables related tools that makes changes, such as deletion, creation, or updates. This ensures you have the latest information and there is no naming collision or mismatching.
-
-  ## Example tool response (JSON format):
-  \`\`\`json
-  { variables: [
-   { type: 'global-color-variable', label: 'Cool', value: 'rgb(1,2,3)', id: 'some-unique-id' },
-   { type: 'global-font-variable', label: 'Headline', value: 'serif', id: 'some-other-unique-id' },
-  ] }
-  \`\`\`
-
-  Once you get the response, please display the variables in a user-friendly way, unless explicitly requested otherwise.
-  Unless explicitly requested otherwise, response in HTML Format, prefer to use tables or unordered lists.
-
-  Note: **The label is most improtant to be seen as-is without any changes.**
-
-  <important>
-  **Do not omit the label**. This is important for the user to identify the variable.
-  **Do not change the label**, it must be displayed exactly as it is, in it's original characters as received from this tool.
-  </important>
-  `,
-		outputSchema: VariableListSchema,
-		modelPreferences: {
-			intelligencePriority: 0.5,
-			speedPriority: 0.95,
-		},
-		handler: async () => {
-			const variables = service.variables() as Record< string, TVariable >;
-			return {
-				variables: Object.entries( variables ).map( ( [ id, varData ] ) => ( { id, ...varData } ) ),
-			};
-		},
-	} );
-};

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

@@ -1,85 +0,0 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
-import { z } from '@elementor/schema';
-
-import { service } from '../service';
-
-export const initUpdateVariableTool = () => {
-	getMCPByDomain( 'canvas' ).addTool( {
-		schema: {
-			id: z.string().describe( 'The unique identifier of the variable to be updated or renamed.' ),
-			label: z
-				.string()
-				.describe(
-					'The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label.'
-				),
-			value: z
-				.string()
-				.describe(
-					"The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value."
-				),
-		},
-		outputSchema: {
-			status: z.enum( [ 'ok', 'error' ] ).describe( 'The status of the operation' ),
-			message: z
-				.string()
-				.optional()
-				.describe( 'Optional message providing additional information about the operation' ),
-		},
-		name: 'update-global-variable',
-		modelPreferences: {
-			intelligencePriority: 0.75,
-			speedPriority: 0.7,
-		},
-		description: `Update an existing global variable
-
-## When to use this tool:
-- When a user requests to update an existing global variable in the Elementor editor.
-- When you need to modify the value of an existing variable.
-- When you want to rename an existing variable (change its label).
-- When you want to both rename and modify the value of an existing variable.
-
-## Prerequisites:
-- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.
-- Make sure when updating a variable, the new label is unique and not already in use by another variable.
-- Make sure you understand whether you are updating a value, renaming, or both.
-- Reference the variable by the "id" property, given from the "list-global-variables" tool.
-- If the user wishes to rename, make sure you have the existing value.
-- If the user wishes to update the value, make sure you have to **correct label**.
-- You must have the unique identifier, the current label, the current value, and the new value or label or both, before using this tool.
-
-## Required parameters:
-- id: The unique identifier of the variable to be updated or renamed.
-- label: The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label.
-- value: The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value.
-
-## Example tool call (JSON format):
-\`\`\`json
-{ "id": "some-unique-id", "label": "Cool", "value": "rgb(0,140,250)" }
-\`\`\`
-
-## Example responses (JSON format):
-Successful update:
-\`\`\`json
-{ "status": "ok" }
-\`\`\`
-
-Failed update, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.
-\`\`\`json
-{ "status": "error", "message": "Label 'Cool' is already in use by another variable." }
-\`\`\`
-`,
-		handler: async ( params ) => {
-			const { id, label, value } = params;
-			try {
-				await service.update( id, { label, value } );
-				return { status: 'ok' };
-			} catch ( error ) {
-				const message: string = ( error as Error ).message || 'Unknown server error';
-				return {
-					status: 'error',
-					message: `There was an error creating the variable: ${ message }`,
-				};
-			}
-		},
-	} );
-};