@elementor/editor-global-classes 4.1.0-837 → 4.1.0-beta1

package/dist/index.mjs

@@ -836,10 +836,12 @@ function calculateChanges(state, initialData) {
   const initialDataIds = Object.keys(initialData.items);
   const { order: stateOrder } = state;
   const { order: initialDataOrder } = initialData;
+  const stateOrderIdSet = new Set(stateOrder);
+  const deleted = initialDataOrder.filter((id2) => !stateOrderIdSet.has(id2));
   const order = stateOrder.join(";") !== initialDataOrder.join(";");
   return {
     added: stateIds.filter((id2) => !initialDataIds.includes(id2)),
-    deleted: initialDataIds.filter((id2) => !stateIds.includes(id2)),
+    deleted,
     modified: stateIds.filter((id2) => {
       return id2 in initialData.items && hash(state.items[id2]) !== hash(initialData.items[id2]);
     }),
@@ -2872,17 +2874,8 @@ import { __useDispatch as useDispatch2 } from "@elementor/store";
 function GlobalStylesImportListener() {
   const dispatch7 = useDispatch2();
   useEffect5(() => {
-    const handleGlobalStylesImported = (event) => {
-      const importedClasses = event.detail?.global_classes;
-      if (importedClasses?.items && importedClasses?.order) {
-        const { items } = importedClasses;
-        dispatch7(
-          slice.actions.mergeExistingClasses({
-            preview: items,
-            frontend: items
-          })
-        );
-      }
+    const handleGlobalStylesImported = () => {
+      loadCurrentDocumentClasses();
     };
     window.addEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
@@ -2937,24 +2930,15 @@ function PopulateStore() {
 // src/mcp-integration/mcp-apply-unapply-global-classes.ts
 import { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from "@elementor/editor-editing-panel";
 import { z } from "@elementor/schema";
-function initMcpApplyUnapplyGlobalClasses(server) {
-  server.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")
-    },
-    outputSchema: {
-      result: z.string().describe("Result message indicating the success of the apply operation"),
-      llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!")
-    },
-    name: "apply-global-class",
-    modelPreferences: {
-      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:
+// src/mcp-integration/apply-global-class-guide-prompt.ts
+import { toolPrompts } from "@elementor/editor-mcp";
+var APPLY_GLOBAL_CLASS_GUIDE_URI = "elementor://global-classes/tools/apply-global-class-guide";
+var 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.)
@@ -2963,18 +2947,59 @@ function initMcpApplyUnapplyGlobalClasses(server) {
 
 **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:
+- 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
-
-## Best Practices:
+- 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")`,
+3. Classes should describe purpose, not implementation (e.g., "heading-primary" not "big-red-text")`
+  );
+  return prompt.prompt();
+};
+
+// src/mcp-integration/mcp-apply-unapply-global-classes.ts
+function initMcpApplyUnapplyGlobalClasses(server) {
+  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")
+    },
+    outputSchema: {
+      result: z.string().describe("Result message indicating the success of the apply operation"),
+      llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!")
+    },
+    name: "apply-global-class",
+    modelPreferences: {
+      intelligencePriority: 0.7,
+      speedPriority: 0.8
+    },
+    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);
@@ -2985,7 +3010,7 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       };
     }
   });
-  server.addTool({
+  addTool({
     name: "unapply-global-class",
     schema: {
       classId: z.string().describe("The ID of the class to unapply"),
@@ -2998,21 +3023,8 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       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);
@@ -3053,19 +3065,15 @@ function initMcpApplyGetGlobalClassUsages(reg) {
       intelligencePriority: 0.6,
       speedPriority: 0.8
     },
-    description: `Retrieve the usages of global-classes ACROSS PAGES designed by Elementor editor.
-
-## Prerequisites: CRITICAL
-- The list of global classes and their applid values is available at resource uri elementor://global-classes
+    description: `Retrieve usages of global classes across all Elementor pages. Heavy operation \u2014 scans every page in the site.
 
-## 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 to use:
+- Before deleting or radically changing a class \u2014 to understand cross-page side effects and decide whether to consult the user.
+- To identify unused global classes for cleanup.
 
-## 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 \u2014 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();
@@ -3265,15 +3273,7 @@ var initManageGlobalClasses = (reg) => {
       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
@@ -3363,16 +3363,6 @@ async function attemptDelete(opts) {
 
 // src/mcp-integration/index.ts
 var initMcpIntegration = (reg, canvasMcpEntry) => {
-  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);
@@ -3499,7 +3489,15 @@ function init() {
     getThemeColor: (theme) => theme.palette.global.dark
   });
   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")
   );
 }