@elementor/editor-global-classes 4.2.0-841 → 4.2.0-843

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.2.0-841",
+  "version": "4.2.0-843",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,29 +39,29 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-841",
-    "@elementor/editor-current-user": "4.2.0-841",
-    "@elementor/editor-documents": "4.2.0-841",
-    "@elementor/editor-editing-panel": "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-variables": "4.2.0-841",
-    "@elementor/editor-styles": "4.2.0-841",
-    "@elementor/editor-canvas": "4.2.0-841",
-    "@elementor/editor-styles-repository": "4.2.0-841",
-    "@elementor/editor-ui": "4.2.0-841",
-    "@elementor/editor-v1-adapters": "4.2.0-841",
-    "@elementor/http-client": "4.2.0-841",
+    "@elementor/editor": "4.2.0-843",
+    "@elementor/editor-current-user": "4.2.0-843",
+    "@elementor/editor-documents": "4.2.0-843",
+    "@elementor/editor-editing-panel": "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-variables": "4.2.0-843",
+    "@elementor/editor-styles": "4.2.0-843",
+    "@elementor/editor-canvas": "4.2.0-843",
+    "@elementor/editor-styles-repository": "4.2.0-843",
+    "@elementor/editor-ui": "4.2.0-843",
+    "@elementor/editor-v1-adapters": "4.2.0-843",
+    "@elementor/http-client": "4.2.0-843",
     "@elementor/icons": "~1.75.1",
-    "@elementor/query": "4.2.0-841",
-    "@elementor/schema": "4.2.0-841",
-    "@elementor/store": "4.2.0-841",
+    "@elementor/query": "4.2.0-843",
+    "@elementor/schema": "4.2.0-843",
+    "@elementor/store": "4.2.0-843",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-841",
+    "@elementor/utils": "4.2.0-843",
     "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.2.0-841"
+    "@elementor/events": "4.2.0-843"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload } from '@elementor/editor-canvas';
 import { __useDispatch as useDispatch } from '@elementor/store';
 
+import { loadCurrentDocumentClasses } from '../load-document-classes';
 import { slice } from '../store';
 
 export function GlobalStylesImportListener() {
@@ -20,7 +21,11 @@ export function GlobalStylesImportListener() {
 						frontend: items,
 					} )
 				);
+
+				return;
 			}
+
+			void loadCurrentDocumentClasses();
 		};
 
 		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );

package/src/init.ts

@@ -74,7 +74,15 @@ export function init() {
 	} );
 
 	initMcpIntegration(
-		getMCPByDomain( 'classes', { instructions: 'MCP server for management of Elementor global classes' } ),
+		getMCPByDomain( 'classes', {
+			instructions: 'MCP server for management of Elementor global classes',
+			docs: `Everything related to V4 ( Atomic ) global classes.
+# Global classes
+- Create/update/delete global classes
+- Get list of global classes
+- Get details of a global class
+`,
+		} ),
 		getMCPByDomain( 'canvas' )
 	);
 }

package/src/mcp-integration/apply-global-class-guide-prompt.ts

@@ -0,0 +1,39 @@
+import { toolPrompts } from '@elementor/editor-mcp';
+
+export const APPLY_GLOBAL_CLASS_GUIDE_URI = 'elementor://global-classes/tools/apply-global-class-guide';
+
+export const generateApplyGlobalClassGuidePrompt = () => {
+	const prompt = toolPrompts( 'apply-global-class' );
+
+	prompt.description( 'Apply a global class to an element, enabling consistent styling through your design system.' );
+
+	prompt.instruction(
+		`## When to use this tool:
+**ALWAYS use this IMMEDIATELY AFTER building compositions** to apply the global classes you created beforehand:
+- After using "build-compositions" tool, apply semantic classes to the created elements
+- When applying consistent typography styles (heading-primary, text-body, etc.)
+- When applying theme colors or brand styles (bg-brand, button-cta, etc.)
+- When ensuring spacing consistency (spacing-section-large, etc.)
+
+**DO NOT use this tool** for:
+- Elements that don't share styles with other elements (use inline styles instead)
+- Layout-specific properties (those should remain inline in stylesConfig)`
+	);
+
+	prompt.instruction(
+		`## Prerequisites:
+- **REQUIRED**: Get the list of available global classes from 'elementor://global-classes' resource
+- **REQUIRED**: Get element IDs from the composition XML returned by "build-compositions" tool
+- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates
+- Make sure you have the correct class ID that you want to apply`
+	);
+
+	prompt.instruction(
+		`## Best Practices:
+1. Apply multiple classes to a single element if needed (typography + color + spacing)
+2. After applying, the tool will remind you to remove duplicate inline styles from elementConfig
+3. Classes should describe purpose, not implementation (e.g., "heading-primary" not "big-red-text")`
+	);
+
+	return prompt.prompt();
+};

package/src/mcp-integration/index.ts

@@ -6,16 +6,6 @@ import initMcpApplyGetGlobalClassUsages from './mcp-get-global-class-usages';
 import { initManageGlobalClasses } from './mcp-manage-global-classes';
 
 export const initMcpIntegration = ( reg: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) => {
-	const { setMCPDescription } = reg;
-	setMCPDescription(
-		`Everything related to V4 ( Atomic ) global classes.
-# Global classes
-- Create/update/delete global classes
-- Get list of global classes
-- Get details of a global class
-- Get details of a global class
-`
-	);
 	initMcpApplyUnapplyGlobalClasses( reg );
 	initMcpApplyGetGlobalClassUsages( reg );
 	initManageGlobalClasses( reg );

package/src/mcp-integration/mcp-apply-unapply-global-classes.ts

@@ -2,8 +2,27 @@ import { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from '@elementor/
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { z } from '@elementor/schema';
 
+import { APPLY_GLOBAL_CLASS_GUIDE_URI, generateApplyGlobalClassGuidePrompt } from './apply-global-class-guide-prompt';
+import { GLOBAL_CLASSES_URI } from './classes-resource';
+
 export default function initMcpApplyUnapplyGlobalClasses( server: MCPRegistryEntry ) {
-	server.addTool( {
+	const { addTool, resource } = server;
+	const applyGlobalClassGuideText = generateApplyGlobalClassGuidePrompt();
+
+	resource(
+		'apply-global-class-guide',
+		APPLY_GLOBAL_CLASS_GUIDE_URI,
+		{
+			description: 'Workflow, prerequisites, and best practices for apply-global-class',
+			mimeType: 'text/plain',
+			title: 'Apply global class tool guide',
+		},
+		async ( uri ) => ( {
+			contents: [ { mimeType: 'text/plain', text: applyGlobalClassGuideText, uri: uri.href } ],
+		} )
+	);
+
+	addTool( {
 		schema: {
 			classId: z.string().describe( 'The ID of the class to apply' ),
 			elementId: z.string().describe( 'The ID of the element to which the class will be applied' ),
@@ -19,29 +38,11 @@ export default function initMcpApplyUnapplyGlobalClasses( server: MCPRegistryEnt
 			intelligencePriority: 0.7,
 			speedPriority: 0.8,
 		},
-		description: `Apply a global class to an element, enabling consistent styling through your design system.
-
-## When to use this tool:
-**ALWAYS use this IMMEDIATELY AFTER building compositions** to apply the global classes you created beforehand:
-- After using "build-compositions" tool, apply semantic classes to the created elements
-- When applying consistent typography styles (heading-primary, text-body, etc.)
-- When applying theme colors or brand styles (bg-brand, button-cta, etc.)
-- When ensuring spacing consistency (spacing-section-large, etc.)
-
-**DO NOT use this tool** for:
-- Elements that don't share styles with other elements (use inline styles instead)
-- Layout-specific properties (those should remain inline in stylesConfig)
-
-## Prerequisites:
-- **REQUIRED**: Get the list of available global classes from 'elementor://global-classes' resource
-- **REQUIRED**: Get element IDs from the composition XML returned by "build-compositions" tool
-- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates
-- Make sure you have the correct class ID that you want to apply
-
-## Best Practices:
-1. Apply multiple classes to a single element if needed (typography + color + spacing)
-2. After applying, the tool will remind you to remove duplicate inline styles from elementConfig
-3. Classes should describe purpose, not implementation (e.g., "heading-primary" not "big-red-text")`,
+		description: `Apply a global class to an element for shared design-system styling. Read the full guide at [${ APPLY_GLOBAL_CLASS_GUIDE_URI }].`,
+		requiredResources: [
+			{ description: 'Apply global class tool guide', uri: APPLY_GLOBAL_CLASS_GUIDE_URI },
+			{ description: 'Global classes list', uri: GLOBAL_CLASSES_URI },
+		],
 		handler: async ( params ) => {
 			const { classId, elementId } = params;
 			const appliedClasses = doGetAppliedClasses( elementId );
@@ -54,7 +55,7 @@ export default function initMcpApplyUnapplyGlobalClasses( server: MCPRegistryEnt
 		},
 	} );
 
-	server.addTool( {
+	addTool( {
 		name: 'unapply-global-class',
 		schema: {
 			classId: z.string().describe( 'The ID of the class to unapply' ),
@@ -67,21 +68,8 @@ export default function initMcpApplyUnapplyGlobalClasses( server: MCPRegistryEnt
 			intelligencePriority: 0.7,
 			speedPriority: 0.8,
 		},
-		description: `Unapply a (global) class from the current element
-
-## When to use this tool:
-- When a user requests to unapply a global class or a class from an element in the Elementor editor.
-- When you need to remove a specific class from an element's applied classes.
-
-## Prerequisites:
-- Ensure you have the most up-to-date list of classes applied to the element to avoid errors.
-  The list is available at always up-to-date resource 'elementor://global-classes'.
-- Make sure you have the correct class ID that you want to unapply.
-
-<note>
-If the user want to unapply a class by it's name and not ID, retrieve the id from the list, available at uri elementor://global-classes
-</note>
-`,
+		description: `Unapply a global class from an element by class ID. Resolve class names to IDs via [${ GLOBAL_CLASSES_URI }].`,
+		requiredResources: [ { description: 'Global classes list', uri: GLOBAL_CLASSES_URI } ],
 		handler: async ( params ) => {
 			const { classId, elementId } = params;
 			const ok = doUnapplyClass( elementId, classId );

package/src/mcp-integration/mcp-get-global-class-usages.ts

@@ -3,6 +3,7 @@ import { z } from '@elementor/schema';
 
 import { fetchCssClassUsage } from '../../service/css-class-usage-service';
 import { type CssClassUsageContent, type EnhancedCssClassUsageContent } from '../components/css-class-usage/types';
+import { GLOBAL_CLASSES_URI } from './classes-resource';
 
 export default function initMcpApplyGetGlobalClassUsages( reg: MCPRegistryEntry ) {
 	const { addTool } = reg;
@@ -32,19 +33,15 @@ export default function initMcpApplyGetGlobalClassUsages( reg: MCPRegistryEntry
 			intelligencePriority: 0.6,
 			speedPriority: 0.8,
 		},
-		description: `Retrieve the usages of global-classes ACROSS PAGES designed by Elementor editor.
+		description: `Retrieve usages of global classes across all Elementor pages. Heavy operation — scans every page in the site.
 
-## Prerequisites: CRITICAL
-- The list of global classes and their applid values is available at resource uri elementor://global-classes
+## When to use:
+- Before deleting or radically changing a class — to understand cross-page side effects and decide whether to consult the user.
+- To identify unused global classes for cleanup.
 
-## When to use this tool:
-- When a user requests to see where a specific global class is being used across the site.
-- When you need to manage or clean up unused global classes.
-- Before deleting a global class, to ensure it is not in use in any other pages.
-
-## When NOT to use this tool:
-- For getting the list of global classes, refer to the resource at uri elementor://global-classes
-`,
+## When NOT to use:
+- To list global classes themselves — use the global-classes resource instead (this tool returns usages, not the class list).`,
+		requiredResources: [ { description: 'Global classes list', uri: GLOBAL_CLASSES_URI } ],
 		outputSchema: globalClassesUsageSchema,
 		handler: async () => {
 			const data = await fetchCssClassUsage();

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

@@ -213,15 +213,7 @@ export const initManageGlobalClasses = ( reg: MCPRegistryEntry ) => {
 			intelligencePriority: 0.85,
 			speedPriority: 0.6,
 		},
-		description: `Manages global classes (create/modify) in Elementor editor. Check [elementor://global-classes] and style schemas first.
-
-CREATE: Requires globalClassName, props. Use semantic naming (heading-primary, button-cta, text-muted). Check existing classes to avoid duplicates. ALWAYS create global classes BEFORE compositions for reusable styles.
-MODIFY: Requires classId, props. Get classId from [elementor://global-classes] resource.
-
-Naming pattern: [element-type]-[purpose/variant]-[modifier]
-DO NOT create global classes for: one-off styles, layout-specific properties.
-
-Use style schema at [elementor://styles/schema/{category}] for valid props. Errors include exact schema mismatch details.`,
+		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 compositions. Do NOT create classes for one-off styles or layout-specific properties.`,
 		schema,
 		outputSchema,
 		handler,