@elementor/editor-global-classes 4.3.0-1001 → 4.3.0-1002

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.3.0-1001",
+  "version": "4.3.0-1002",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,30 +39,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-1001",
-    "@elementor/editor-current-user": "4.3.0-1001",
-    "@elementor/editor-documents": "4.3.0-1001",
-    "@elementor/editor-embedded-documents-manager": "4.3.0-1001",
-    "@elementor/editor-editing-panel": "4.3.0-1001",
-    "@elementor/editor-mcp": "4.3.0-1001",
-    "@elementor/editor-panels": "4.3.0-1001",
-    "@elementor/editor-props": "4.3.0-1001",
-    "@elementor/editor-variables": "4.3.0-1001",
-    "@elementor/editor-styles": "4.3.0-1001",
-    "@elementor/editor-canvas": "4.3.0-1001",
-    "@elementor/editor-styles-repository": "4.3.0-1001",
-    "@elementor/editor-ui": "4.3.0-1001",
-    "@elementor/editor-v1-adapters": "4.3.0-1001",
-    "@elementor/http-client": "4.3.0-1001",
+    "@elementor/editor": "4.3.0-1002",
+    "@elementor/editor-current-user": "4.3.0-1002",
+    "@elementor/editor-documents": "4.3.0-1002",
+    "@elementor/editor-embedded-documents-manager": "4.3.0-1002",
+    "@elementor/editor-editing-panel": "4.3.0-1002",
+    "@elementor/editor-mcp": "4.3.0-1002",
+    "@elementor/editor-panels": "4.3.0-1002",
+    "@elementor/editor-props": "4.3.0-1002",
+    "@elementor/editor-variables": "4.3.0-1002",
+    "@elementor/editor-styles": "4.3.0-1002",
+    "@elementor/editor-canvas": "4.3.0-1002",
+    "@elementor/editor-styles-repository": "4.3.0-1002",
+    "@elementor/editor-ui": "4.3.0-1002",
+    "@elementor/editor-v1-adapters": "4.3.0-1002",
+    "@elementor/http-client": "4.3.0-1002",
     "@elementor/icons": "~1.75.1",
-    "@elementor/query": "4.3.0-1001",
-    "@elementor/schema": "4.3.0-1001",
-    "@elementor/store": "4.3.0-1001",
+    "@elementor/query": "4.3.0-1002",
+    "@elementor/schema": "4.3.0-1002",
+    "@elementor/store": "4.3.0-1002",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1001",
+    "@elementor/utils": "4.3.0-1002",
     "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.3.0-1001"
+    "@elementor/events": "4.3.0-1002"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/mcp-integration/index.ts

@@ -1,13 +1,13 @@
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { initClassesResource } from './classes-resource';
+import { initManageClassesTool } from './manage-classes-tool';
 import initMcpApplyUnapplyGlobalClasses from './mcp-apply-unapply-global-classes';
 import initMcpApplyGetGlobalClassUsages from './mcp-get-global-class-usages';
-import { initManageGlobalClasses } from './mcp-manage-global-classes';
 
 export const initMcpIntegration = ( reg: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) => {
 	initMcpApplyUnapplyGlobalClasses( reg );
 	initMcpApplyGetGlobalClassUsages( reg );
-	initManageGlobalClasses( reg );
+	initManageClassesTool( reg );
 	initClassesResource( reg, canvasMcpEntry );
 };

package/src/mcp-integration/manage-classes-tool.ts

@@ -0,0 +1,85 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { type HttpResponse, httpService } from '@elementor/http-client';
+import { z } from '@elementor/schema';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { globalClassesStylesProvider } from '../global-classes-styles-provider';
+import { slice } from '../store';
+import { GLOBAL_CLASSES_URI } from './classes-resource';
+
+const MCP_PROXY_URL = 'elementor/v1/mcp-proxy';
+const TOOL_NAME = 'manage-classes';
+
+type ManageClassesResponse = {
+	status: string;
+	class?: StyleDefinition;
+	order?: string[];
+};
+
+export const initManageClassesTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = reg;
+
+	addTool( {
+		name: TOOL_NAME,
+		description:
+			'Manage V4 global CSS classes on the active kit. Create, update, or delete a single class using raw CSS declarations.',
+		schema: {
+			action: z.enum( [ 'create', 'update', 'delete' ] ),
+			id: z
+				.string()
+				.optional()
+				.describe( 'Class id — required for update/delete. Get from the global-classes resource.' ),
+			label: z
+				.string()
+				.optional()
+				.describe( 'Class label (lowercase, dash-separated) — required for create/update.' ),
+			css: z
+				.record( z.string() )
+				.optional()
+				.describe( 'Raw CSS declarations (property → value) — required for create/update.' ),
+		},
+		outputSchema: {
+			status: z.enum( [ 'ok' ] ).describe( 'Operation status' ),
+		},
+		requiredResources: [
+			{
+				uri: GLOBAL_CLASSES_URI,
+				description: 'Current global classes — check before creating to avoid duplicates',
+			},
+		],
+		isDestructive: true,
+		handler: async ( params ) => {
+			const { data } = await httpService().post< HttpResponse< ManageClassesResponse > >( MCP_PROXY_URL, {
+				tool: TOOL_NAME,
+				input: params,
+			} );
+
+			const payload = data.data;
+			const { create, update, delete: del } = globalClassesStylesProvider.actions;
+
+			switch ( params.action ) {
+				case 'create':
+					if ( payload.class && create ) {
+						create( payload.class.label, payload.class.variants, payload.class.id );
+					}
+					break;
+				case 'update':
+					if ( payload.class && update ) {
+						update( payload.class );
+					}
+					break;
+				case 'delete':
+					if ( params.id && del ) {
+						del( params.id );
+					}
+					break;
+			}
+
+			dispatch( slice.actions.reset( { context: 'frontend' } ) );
+			window.dispatchEvent( new CustomEvent( 'classes:updated', { detail: { context: 'frontend' } } ) );
+
+			return { status: 'ok' };
+		},
+	} );
+};

package/src/mcp-integration/mcp-manage-global-classes.ts

@@ -1,314 +0,0 @@
-import { BREAKPOINTS_SCHEMA_FULL_URI, convertStyleBlocksToAtomic, type StyleBlock } from '@elementor/editor-canvas';
-import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
-import { type MCPRegistryEntry } from '@elementor/editor-mcp';
-import { type Props } from '@elementor/editor-props';
-import { type BreakpointId } from '@elementor/editor-responsive';
-import { type CustomCss, type StyleDefinitionState } from '@elementor/editor-styles';
-import { type StylesProvider } from '@elementor/editor-styles-repository';
-import { z } from '@elementor/schema';
-
-import { globalClassesStylesProvider } from '../global-classes-styles-provider';
-import { loadExistingClasses } from '../load-existing-classes';
-import { saveGlobalClasses } from '../save-global-classes';
-import { GLOBAL_CLASSES_URI } from './classes-resource';
-
-const schema = {
-	action: z.enum( [ 'create', 'modify', 'delete' ] ).describe( 'Operation to perform' ),
-	classId: z
-		.string()
-		.optional()
-		.describe( 'Global class ID (required for modify). Get from elementor://global-classes resource.' ),
-	globalClassName: z.string().optional().describe( 'Global class name (required for create)' ),
-	style: z
-		.object( {
-			default: z
-				.string()
-				.describe( 'Plaintext CSS for the default state. MUST be non-empty — blank strings are rejected.' ),
-			hover: z.string().describe( 'Plaintext CSS for the :hover state. optional' ).optional(),
-			focus: z.string().describe( 'Plaintext CSS for the :focus state. optional' ).optional(),
-			active: z.string().describe( 'Plaintext CSS for the :active state. optional' ).optional(),
-		} )
-		.describe(
-			'Plaintext CSS per pseudo-state. All states are converted in one bulk request; unconvertible declarations are stored as custom CSS.'
-		),
-	breakpoint: z
-		.nullable( z.string().describe( 'Responsive breakpoint name for styles. Defaults to desktop (null).' ) )
-		.default( null )
-		.describe( 'Responsive breakpoint name for styles. Defaults to desktop (null).' ),
-};
-
-const outputSchema = {
-	status: z.enum( [ 'ok', 'error' ] ).describe( 'Operation status' ),
-	classId: z.string().optional().describe( 'Class ID (returned on create success)' ),
-	message: z.string().optional().describe( 'Error details if status is error' ),
-};
-
-type InputSchema = z.infer< ReturnType< typeof z.object< typeof schema > > >;
-type OutputSchema = z.infer< ReturnType< typeof z.object< typeof outputSchema > > >;
-
-type ConvertedStateStyle = {
-	props: Props;
-	customCss: CustomCss | null;
-};
-
-const handler = async ( input: InputSchema ): Promise< OutputSchema > => {
-	const { action, classId: rawClassId, globalClassName, style: rawStyle, breakpoint } = input;
-	let classId = rawClassId;
-	if ( action === 'create' && ! globalClassName ) {
-		return {
-			status: 'error',
-			message: 'Create requires globalClassName',
-		};
-	}
-
-	if ( action === 'modify' && ! classId ) {
-		return {
-			status: 'error',
-			message: 'Modify requires classId',
-		};
-	}
-
-	if ( action === 'delete' && ! classId ) {
-		return {
-			status: 'error',
-			message: 'Delete requires classId',
-		};
-	}
-
-	const { create, update, delete: deleteClass } = globalClassesStylesProvider.actions;
-	if ( ! create || ! update || ! deleteClass ) {
-		return {
-			status: 'error',
-			message: 'Required actions not available',
-		};
-	}
-
-	const styleBlocks = collectNonEmptyStyleBlocks( rawStyle );
-
-	if ( action !== 'delete' && Object.keys( styleBlocks ).length === 0 ) {
-		throw new Error(
-			'Style must not be empty. Provide plaintext CSS per state.\n\nExample: style.default = "display: flex; flex-direction: column; gap: 1rem;"'
-		);
-	}
-
-	let convertedByState: Record< string, ConvertedStateStyle > = {};
-	if ( action !== 'delete' ) {
-		const conversionResults = await convertStyleBlocksToAtomic( styleBlocks );
-		convertedByState = Object.fromEntries(
-			Object.entries( conversionResults ).map( ( [ state, { props, customCss } ] ) => [
-				state,
-				{ props: props as Props, customCss: toStoredCustomCss( customCss ) },
-			] )
-		);
-	}
-
-	const breakpointValue = breakpoint ?? 'desktop';
-	let result = {
-		status: 'error',
-		classId: '',
-		message: 'unknown error',
-	} as { status: 'error' | 'ok'; message?: string; classId?: string };
-
-	try {
-		if ( action === 'delete' ) {
-			const deleted = await attemptDelete( {
-				classId,
-				stylesProvider: globalClassesStylesProvider,
-			} );
-			if ( deleted ) {
-				return { status: 'ok', message: `deleted global class with ID ${ classId }` };
-			}
-			throw new Error( 'error deleting class' );
-		}
-
-		let currentAction = action;
-		for await ( const [ state, { props, customCss } ] of Object.entries( convertedByState ) ) {
-			switch ( currentAction ) {
-				case 'create':
-					const newClassId = await attemptCreate( {
-						props,
-						customCss,
-						className: globalClassName,
-						stylesProvider: globalClassesStylesProvider,
-						breakpoint: breakpointValue as BreakpointId,
-						state: state as StyleDefinitionState,
-					} );
-					if ( newClassId && currentAction === 'create' ) {
-						currentAction = 'modify';
-						classId = newClassId;
-						result = {
-							status: 'ok',
-							message: `created global class with ID ${ newClassId }`,
-						};
-						globalClassesStylesProvider.actions.tracking?.( {
-							event: 'classCreated',
-							executedBy: 'mcp_tool',
-							classId: newClassId,
-						} );
-						dispatchMcpStylesAppliedEvent( { styleValue: props } );
-					} else {
-						throw new Error( 'error creating class' );
-					}
-					break;
-				case 'modify':
-					const updated = await attemptUpdate( {
-						classId,
-						props,
-						customCss,
-						stylesProvider: globalClassesStylesProvider,
-						breakpoint: breakpointValue as BreakpointId,
-						state: state as StyleDefinitionState,
-					} );
-					if ( updated ) {
-						result = { status: 'ok', classId };
-						dispatchMcpStylesAppliedEvent( { styleValue: props } );
-					} else {
-						throw new Error( 'error modifying class' );
-					}
-					break;
-				default:
-					throw new Error( `Unsupported action ${ action }` );
-			}
-		}
-	} catch ( error ) {
-		return {
-			status: 'error',
-			message: `${ action } failed: ${ ( error as Error ).message || 'Unknown error' }`,
-		};
-	}
-	return result;
-};
-
-export const initManageGlobalClasses = ( reg: MCPRegistryEntry ) => {
-	const { addTool } = reg;
-
-	addTool( {
-		name: 'manage-global-classes',
-		requiredResources: [
-			{ uri: GLOBAL_CLASSES_URI, description: 'Global classes list' },
-			{ uri: BREAKPOINTS_SCHEMA_FULL_URI, description: 'Breakpoints list' },
-		],
-		description: `Create or modify global classes for reusable design-system styling. Class names must reflect purpose (e.g. heading-primary, button-cta). Create classes BEFORE applying them. Do NOT create classes for one-off styles.
-
-IMPORTANT: style must contain plaintext CSS rules per state — never pass empty strings.
-CSS is converted server-side in one bulk request; any declaration that cannot be converted is stored as the class custom CSS.
-
-Example — creating a flex column class:
-style.default = "display: flex; flex-direction: column; gap: 1rem;"
-
-Example — hover state:
-style.hover = "opacity: 0.85;"`,
-		schema,
-		outputSchema,
-		handler,
-	} );
-};
-
-type Opts = {
-	stylesProvider: StylesProvider;
-	className?: string;
-	classId?: string;
-	breakpoint: BreakpointId;
-	props: Props;
-	customCss: CustomCss | null;
-	state: StyleDefinitionState;
-};
-
-async function attemptCreate( opts: Opts ) {
-	const { props, customCss, breakpoint, className, stylesProvider, state } = opts;
-	const { create, delete: deleteClass } = stylesProvider.actions;
-	if ( ! className ) {
-		throw new Error( 'Global class name is a required for creation' );
-	}
-	if ( ! create || ! deleteClass ) {
-		throw new Error( 'User is unable to create global classes' );
-	}
-	const newClassId = create( className, [
-		{
-			meta: {
-				breakpoint,
-				state: ( state as string ) === 'default' ? null : state,
-			},
-			custom_css: customCss,
-			props,
-		},
-	] );
-	try {
-		await saveGlobalClasses( { context: 'frontend' } );
-		return newClassId;
-	} catch {
-		deleteClass( newClassId );
-		throw new Error( 'error creating class' );
-	}
-}
-
-async function attemptUpdate( opts: Opts ) {
-	const { props, customCss, breakpoint, classId, stylesProvider, state } = opts;
-	const { updateProps, update } = stylesProvider.actions;
-	if ( ! classId ) {
-		throw new Error( 'Class ID is required for modification' );
-	}
-	if ( ! updateProps || ! update ) {
-		throw new Error( 'User is unable to update global classes' );
-	}
-	await loadExistingClasses( [ classId ] );
-	const snapshot = structuredClone( stylesProvider.actions.all() );
-	try {
-		updateProps( {
-			id: classId,
-			props,
-			custom_css: customCss,
-			meta: {
-				breakpoint,
-				state: ( state as string ) === 'default' ? null : state,
-			},
-		} );
-		await saveGlobalClasses( { context: 'frontend' } );
-		return true;
-	} catch {
-		snapshot.forEach( ( style ) => {
-			update( {
-				id: style.id,
-				variants: style.variants,
-			} );
-		} );
-		await saveGlobalClasses( { context: 'frontend' } );
-		throw new Error( 'error updating class' );
-	}
-}
-
-async function attemptDelete( opts: Pick< Opts, 'classId' | 'stylesProvider' > ) {
-	const { classId, stylesProvider } = opts;
-	const { delete: deleteClass, create } = stylesProvider.actions;
-	if ( ! classId ) {
-		throw new Error( 'Class ID is required for deletion' );
-	}
-	if ( ! deleteClass || ! create ) {
-		throw new Error( 'User is unable to delete global classes' );
-	}
-	const snapshot = structuredClone( stylesProvider.actions.all() );
-	const targetClass = snapshot.find( ( style ) => style.id === classId );
-	if ( ! targetClass ) {
-		throw new Error( `Class with ID "${ classId }" not found` );
-	}
-	deleteClass( classId );
-	await saveGlobalClasses( { context: 'frontend' } );
-	return true;
-}
-
-function collectNonEmptyStyleBlocks( style: InputSchema[ 'style' ] ): Record< string, StyleBlock > {
-	const blocks: Record< string, StyleBlock > = {};
-	Object.entries( style ).forEach( ( [ state, cssText ] ) => {
-		if ( cssText?.trim() ) {
-			blocks[ state ] = cssText.trim();
-		}
-	} );
-	return blocks;
-}
-
-function toStoredCustomCss( customCss: string ): CustomCss | null {
-	if ( ! customCss?.trim() ) {
-		return null;
-	}
-	return { raw: btoa( customCss ) };
-}