@elementor/editor-variables 4.2.0-841 → 4.2.0-843

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.2.0-841",
+  "version": "4.2.0-843",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-841",
-    "@elementor/editor-canvas": "4.2.0-841",
-    "@elementor/editor-controls": "4.2.0-841",
-    "@elementor/editor-current-user": "4.2.0-841",
-    "@elementor/editor-mcp": "4.2.0-841",
-    "@elementor/editor-panels": "4.2.0-841",
-    "@elementor/editor-props": "4.2.0-841",
-    "@elementor/editor-ui": "4.2.0-841",
-    "@elementor/editor-v1-adapters": "4.2.0-841",
-    "@elementor/menus": "4.2.0-841",
-    "@elementor/http-client": "4.2.0-841",
+    "@elementor/editor": "4.2.0-843",
+    "@elementor/editor-canvas": "4.2.0-843",
+    "@elementor/editor-controls": "4.2.0-843",
+    "@elementor/editor-current-user": "4.2.0-843",
+    "@elementor/editor-mcp": "4.2.0-843",
+    "@elementor/editor-panels": "4.2.0-843",
+    "@elementor/editor-props": "4.2.0-843",
+    "@elementor/editor-ui": "4.2.0-843",
+    "@elementor/editor-v1-adapters": "4.2.0-843",
+    "@elementor/menus": "4.2.0-843",
+    "@elementor/http-client": "4.2.0-843",
     "@elementor/icons": "~1.75.1",
-    "@elementor/events": "4.2.0-841",
-    "@elementor/schema": "4.2.0-841",
+    "@elementor/events": "4.2.0-843",
+    "@elementor/schema": "4.2.0-843",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-841",
+    "@elementor/utils": "4.2.0-843",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/global-styles-import-listener.tsx

@@ -2,28 +2,17 @@ import { useEffect } from 'react';
 import { GLOBAL_STYLES_IMPORTED_EVENT } from '@elementor/editor-canvas';
 
 import { service } from '../service';
-import { styleVariablesRepository } from '../style-variables-repository';
 
 export function GlobalStylesImportListener() {
 	useEffect( () => {
-		const handleGlobalStylesImported = ( event: CustomEvent ) => {
-			const importedVars = event.detail?.global_variables;
-
-			if ( ! importedVars ) {
-				return;
-			}
-
-			if ( importedVars.data && typeof importedVars.data === 'object' ) {
-				styleVariablesRepository.update( importedVars.data );
-			}
-
+		const handleGlobalStylesImported = () => {
 			service.load();
 		};
 
-		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
+		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported );
 
 		return () => {
-			window.removeEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
+			window.removeEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported );
 		};
 	}, [] );
 

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -1,9 +1,9 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { generateTempId } from '../../../batch-operations';
 import { getVariables } from '../../../hooks/use-prop-variables';
 import { service } from '../../../service';
-import { type TVariablesList } from '../../../storage';
+import { STORAGE_UPDATED_EVENT, type TVariablesList } from '../../../storage';
 import { generateDuplicateLabel } from '../../../utils/duplicate-label';
 import { filterBySearch } from '../../../utils/filter-by-search';
 import { applySelectionFilters, variablesToList } from '../../../utils/variables-to-list';
@@ -17,6 +17,20 @@ export const useVariablesManagerState = () => {
 	const [ isSaving, setIsSaving ] = useState( false );
 	const [ searchValue, setSearchValue ] = useState( '' );
 
+	useEffect( () => {
+		const handleStorageUpdated = () => {
+			setVariables( getVariables( false ) );
+			setDeletedVariables( [] );
+			setIsDirty( false );
+		};
+
+		window.addEventListener( STORAGE_UPDATED_EVENT, handleStorageUpdated );
+
+		return () => {
+			window.removeEventListener( STORAGE_UPDATED_EVENT, handleStorageUpdated );
+		};
+	}, [] );
+
 	const handleOnChange = useCallback(
 		( newVariables: TVariablesList ) => {
 			setVariables( { ...variables, ...newVariables } );

package/src/init.ts

@@ -47,7 +47,15 @@ export function init() {
 	} );
 
 	variablesService.init().then( () => {
-		initMcp( getMCPByDomain( 'variables' ), getMCPByDomain( 'canvas' ) );
+		const variablesMcpRegistry = getMCPByDomain( 'variables', {
+			instructions: `Everything related to V4 ( Atomic ) variables.
+# Global variables
+- Create/update/delete global variables
+- Get list of global variables
+- Get details of a global variable
+`,
+		} );
+		initMcp( variablesMcpRegistry, getMCPByDomain( 'canvas' ) );
 	} );
 
 	injectIntoTop( {

package/src/mcp/index.ts

@@ -4,15 +4,6 @@ import { initManageVariableTool } from './manage-variable-tool';
 import { initVariablesResource } from './variables-resource';
 
 export function initMcp( reg: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) {
-	const { setMCPDescription } = reg;
-	setMCPDescription(
-		`Everything related to V4 ( Atomic ) variables.
-# Global variables
-- Create/update/delete global variables
-- Get list of global variables
-- Get details of a global variable
-`
-	);
 	initManageVariableTool( reg );
 	initVariablesResource( reg, canvasMcpEntry );
 }

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

@@ -20,7 +20,12 @@ export const initManageVariableTool = ( reg: MCPRegistryEntry ) => {
 				.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)' ),
+			value: z
+				.string()
+				.optional()
+				.describe(
+					'The variable value (required for create/update). Provide a plain CSS value matching the variable type (font: family name; color: CSS color; size: value with unit). Never JSON.'
+				),
 		},
 		outputSchema: {
 			status: z.enum( [ 'ok' ] ).describe( 'Operation status' ),
@@ -36,14 +41,11 @@ export const initManageVariableTool = ( reg: MCPRegistryEntry ) => {
 				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"
-`,
+		description: `Create, update, or delete V4 global variables (distinct from legacy "globals").
+- Values: any valid CSS value, inserted as-is (1:1 with \`--css-var: VALUE\`). Do NOT pass JSON or legacy-globals object structures.
+- Names: lowercase, dash-separated (e.g. "Headline Primary" → "headline-primary").
+- Update: when renaming, keep the existing value; when updating value, keep the exact label.
+- Delete: destructive — confirm with user first.`,
 		handler: async ( params ) => {
 			const operations = getServiceActions( service );
 			const op = operations[ params.action ];

package/src/mcp/variables-resource.ts

@@ -2,7 +2,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 
 import { service } from '../service';
-import { type TVariable } from '../storage';
+import { STORAGE_UPDATED_EVENT, type TVariable } from '../storage';
 
 export const GLOBAL_VARIABLES_URI = 'elementor://global-variables';
 
@@ -47,7 +47,7 @@ export const initVariablesResource = ( variablesMcpEntry: MCPRegistryEntry, canv
 			}
 		);
 
-		window.addEventListener( 'variables:updated', notifyGlobalVariablesUpdated );
+		window.addEventListener( STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated );
 
 		listenTo( commandEndEvent( 'document/save/update' ), notifyGlobalVariablesUpdated );
 	} );

package/src/storage.ts

@@ -13,6 +13,8 @@ export type TVariablesList = Record< string, TVariable >;
 const STORAGE_KEY = 'elementor-global-variables';
 const STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';
 
+export const STORAGE_UPDATED_EVENT = 'variables:updated';
+
 export const OP_RW = 'RW';
 const OP_RO = 'RO';
 
@@ -23,7 +25,7 @@ export class Storage {
 	};
 
 	notifyChange() {
-		window.dispatchEvent( new Event( 'variables:updated' ) );
+		window.dispatchEvent( new Event( STORAGE_UPDATED_EVENT ) );
 	}
 
 	constructor() {