@elementor/editor-variables 4.3.0-999 → 4.4.0-1064

package/package.json

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

package/src/components/variable-selection-popover.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
 import type { PropTypeKey } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 
 import { PopoverContentRefContextProvider } from '../context/variable-selection-popover.context';
 import { VariableTypeProvider } from '../context/variable-type-context';
@@ -27,13 +26,11 @@ type Props = {
 export const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedVariable }: Props ) => {
 	const [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );
 	const [ editId, setEditId ] = useState< string >( '' );
-	const onSettingsAvailable = isExperimentActive( 'e_variables_manager' )
-		? () => {
-				window.dispatchEvent(
-					new CustomEvent( 'elementor/toggle-design-system', { detail: { tab: 'variables' as const } } )
-				);
-		  }
-		: undefined;
+	const onSettingsAvailable = () => {
+		window.dispatchEvent(
+			new CustomEvent( 'elementor/toggle-design-system', { detail: { tab: 'variables' as const } } )
+		);
+	};
 
 	return (
 		<VariableTypeProvider propTypeKey={ propTypeKey }>

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

@@ -3,12 +3,20 @@ import { type HttpResponse, httpService } from '@elementor/http-client';
 import { z } from '@elementor/schema';
 import { isProActive } from '@elementor/utils';
 
+import { applyLocalMutation } from '../service';
+import { type TVariable } from '../storage';
 import { MANAGE_VARIABLES_GUIDE_URI } from './variable-tool-prompt';
 import { GLOBAL_VARIABLES_URI } from './variables-resource';
 
 const MCP_PROXY_URL = 'elementor/v1/mcp-proxy';
 const TOOL_NAME = 'manage-global-variable';
 
+type ManageVariableResponse = {
+	status: string;
+	variable?: TVariable & { id: string };
+	watermark?: number;
+};
+
 const VARIABLE_TYPES = {
 	COLOR: 'global-color-variable',
 	FONT: 'global-font-variable',
@@ -44,7 +52,7 @@ export const initManageVariableTool = ( reg: MCPRegistryEntry ) => {
 	addTool( {
 		name: TOOL_NAME,
 		description:
-			'Manage V4 global variables (color, font, size, custom-size). Read the guide resource before use. font = font-famliy, size = measured unit, custom-size = calculated values',
+			'Manage V4 global variables (color, font, size, custom-size). Read the guide resource before use. font = single Google Font family name, no fallback stacks, size = measured unit, custom-size = calculated values',
 		schema: {
 			action: z.enum( [ 'create', 'update', 'delete' ] ),
 			id: z
@@ -57,7 +65,7 @@ export const initManageVariableTool = ( reg: MCPRegistryEntry ) => {
 				.string()
 				.optional()
 				.describe(
-					'Plain CSS value — required for create/update. Color: hex/rgba/hsl. Font: family name only. Size: value with unit e.g. "16px", or "auto" (Pro). Do NOT pass JSON.'
+					'Plain CSS value — required for create/update. Color: hex/rgba/hsl. Font: single Google Font family name only — no fallback stacks, no generic families. Size: value with unit e.g. "16px", or "auto" (Pro). Do NOT pass JSON.'
 				),
 		},
 		outputSchema: {
@@ -73,11 +81,17 @@ export const initManageVariableTool = ( reg: MCPRegistryEntry ) => {
 		],
 		isDestructive: true,
 		handler: async ( params ) => {
-			await httpService().post( MCP_PROXY_URL, {
+			const { data } = await httpService().post< HttpResponse< ManageVariableResponse > >( MCP_PROXY_URL, {
 				tool: TOOL_NAME,
 				input: params,
 			} );
 
+			const payload = data.data;
+
+			if ( payload.variable && typeof payload.watermark === 'number' ) {
+				applyLocalMutation( params.action, payload.variable, payload.watermark );
+			}
+
 			return { status: 'ok' };
 		},
 	} );

package/src/service.ts

@@ -277,3 +277,23 @@ const handleWatermark = ( operation: string, newWatermark: number ) => {
 	}
 	storage.watermark( newWatermark );
 };
+
+export const applyLocalMutation = (
+	action: 'create' | 'update' | 'delete',
+	variableWithId: TVariable & { id: string },
+	watermark: number
+) => {
+	const { id: variableId, ...variable } = variableWithId;
+
+	handleWatermark( OP_RW, watermark );
+
+	if ( action === 'create' ) {
+		storage.add( variableId, variable );
+	} else {
+		storage.update( variableId, variable );
+	}
+
+	styleVariablesRepository.update( {
+		[ variableId ]: variable,
+	} );
+};