@elementor/editor-variables 3.35.0-340 → 3.35.0-341

package/package.json

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

package/src/index.ts

@@ -1,3 +1,11 @@
 export { init } from './init';
-export { registerVariableType } from './variables-registry/variable-type-registry';
 export { registerVariableTypes } from './register-variable-types';
+export { service } from './service';
+export { registerVariableType } from './variables-registry/variable-type-registry';
+export { GLOBAL_VARIABLES_URI } from './mcp/variables-resource';
+
+import { globalVariablesLLMResolvers } from './utils/llm-propvalue-label-resolver';
+
+export const Utils = {
+	globalVariablesLLMResolvers,
+} as const;

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

@@ -17,7 +17,7 @@ const OutputSchema = {
 };
 
 export const initCreateVariableTool = () => {
-	getMCPByDomain( 'variables' ).addTool( {
+	getMCPByDomain( 'canvas' ).addTool( {
 		name: 'create-global-variable',
 		schema: InputSchema,
 		outputSchema: OutputSchema,

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

@@ -4,7 +4,7 @@ import { z } from '@elementor/schema';
 import { service } from '../service';
 
 export const initDeleteVariableTool = () => {
-	getMCPByDomain( 'variables' ).addTool( {
+	getMCPByDomain( 'canvas' ).addTool( {
 		name: 'delete-global-variable',
 		schema: {
 			id: z.string().describe( 'The unique identifier of the variable to be deleted.' ),

package/src/mcp/index.ts

@@ -1,15 +1,9 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
-
 import { initCreateVariableTool } from './create-variable-tool';
 import { initDeleteVariableTool } from './delete-variable-tool';
-import { initListVariablesTool } from './list-variables-tool';
 import { initUpdateVariableTool } from './update-variable-tool';
 import { initVariablesResource } from './variables-resource';
 
 export function initMcp() {
-	const { setMCPDescription } = getMCPByDomain( 'variables' );
-	setMCPDescription( `Elementor Editor Variables MCP` );
-	initListVariablesTool();
 	initCreateVariableTool();
 	initUpdateVariableTool();
 	initDeleteVariableTool();

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

@@ -19,9 +19,9 @@ const VariableListSchema = {
 };
 
 export const initListVariablesTool = () => {
-	getMCPByDomain( 'variables' ).addTool( {
+	getMCPByDomain( 'canvas' ).addTool( {
 		name: 'list-global-variables',
-		description: `List editor 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.

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

@@ -4,7 +4,7 @@ import { z } from '@elementor/schema';
 import { service } from '../service';
 
 export const initUpdateVariableTool = () => {
-	getMCPByDomain( 'variables' ).addTool( {
+	getMCPByDomain( 'canvas' ).addTool( {
 		schema: {
 			id: z.string().describe( 'The unique identifier of the variable to be updated or renamed.' ),
 			label: z

package/src/mcp/variables-resource.ts

@@ -1,20 +1,30 @@
 import { getMCPByDomain } from '@elementor/editor-mcp';
 
-export const GLOBAL_VARIABLES_URI = 'elementor://variables';
+import { service } from '../service';
+import { type TVariable } from '../storage';
+
+export const GLOBAL_VARIABLES_URI = 'elementor://global-variables';
 
 export const initVariablesResource = () => {
-	const { mcpServer } = getMCPByDomain( 'variables' );
+	const { mcpServer } = getMCPByDomain( 'canvas' );
 
 	mcpServer.resource(
 		'global-variables',
 		GLOBAL_VARIABLES_URI,
 		{
 			description:
-				'Global variables list. Variables are being used in this way: If it is directly in the schema, you need to put the ID which is the key inside the object.',
+				'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: localStorage[ 'elementor-global-variables' ] } ],
+				contents: [ { uri: GLOBAL_VARIABLES_URI, text: JSON.stringify( variables ) } ],
 			};
 		}
 	);

package/src/service.ts

@@ -2,7 +2,7 @@ import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
 import { buildOperationsArray, type OperationResult } from './batch-operations';
-import { OP_RW, Storage, type TVariablesList } from './storage';
+import { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';
 import { styleVariablesRepository } from './style-variables-repository';
 import { type Variable } from './types';
 
@@ -13,6 +13,18 @@ export const service = {
 		return storage.load();
 	},
 
+	findIdByLabel( needle: string ): string {
+		const variableId = Object.entries( this.variables() ).find( ( [ , variable ] ) => variable.label === needle );
+		if ( ! variableId ) {
+			throw new Error( `Variable with label ${ needle } not found` );
+		}
+		return variableId[ 0 ];
+	},
+
+	findVariableByLabel( needle: string ): TVariable | null {
+		return Object.values( this.variables() ).find( ( variable ) => variable.label === needle ) || null;
+	},
+
 	getWatermark: (): number => {
 		return storage.state.watermark;
 	},

package/src/transformers/utils/resolve-css-variable.ts

@@ -16,9 +16,11 @@ export const resolveCssVariable = ( id: string, variable: TVariable ) => {
 		return null;
 	}
 
+	const validCssVariableName = `--${ name }`;
+
 	if ( ! fallbackValue.trim() ) {
-		return `var(--${ name })`;
+		return `var(${ validCssVariableName })`;
 	}
 
-	return `var(--${ name }, ${ fallbackValue })`;
+	return `var(${ validCssVariableName }, ${ fallbackValue })`;
 };

package/src/transformers/variable-transformer.ts

@@ -1,14 +1,17 @@
 import { createTransformer } from '@elementor/editor-canvas';
 
 import { service } from '../service';
+import { type TVariable } from '../storage';
 import { resolveCssVariable } from './utils/resolve-css-variable';
 
-export const variableTransformer = createTransformer( ( id: string ) => {
+export const variableTransformer = createTransformer( ( idOrLabel: string ) => {
 	const variables = service.variables();
 
-	if ( ! variables[ id ] ) {
+	const targetVariable: TVariable | null = variables[ idOrLabel ] || service.findVariableByLabel( idOrLabel );
+	if ( ! targetVariable ) {
 		return null;
 	}
+	const id = service.findIdByLabel( targetVariable.label );
 
-	return resolveCssVariable( id, variables[ id ] );
+	return resolveCssVariable( id, targetVariable );
 } );

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

@@ -0,0 +1,25 @@
+import { service } from '../service';
+
+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 ),
+		};
+	},
+};