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

package/dist/index.js

@@ -844,10 +844,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 && (0, import_utils4.hash)(state.items[id2]) !== (0, import_utils4.hash)(initialData.items[id2]);
     }),
@@ -2666,11 +2668,11 @@ var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_mcp = require("@elementor/editor-mcp");
+var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
-var import_store32 = require("@elementor/store");
+var import_store31 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React20 = __toESM(require("react"));
@@ -2818,17 +2820,8 @@ var import_store28 = require("@elementor/store");
 function GlobalStylesImportListener() {
   const dispatch7 = (0, import_store28.__useDispatch)();
   (0, import_react11.useEffect)(() => {
-    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(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
@@ -2883,24 +2876,15 @@ function PopulateStore() {
 // src/mcp-integration/mcp-apply-unapply-global-classes.ts
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_schema = require("@elementor/schema");
-function initMcpApplyUnapplyGlobalClasses(server) {
-  server.addTool({
-    schema: {
-      classId: import_schema.z.string().describe("The ID of the class to apply"),
-      elementId: import_schema.z.string().describe("The ID of the element to which the class will be applied")
-    },
-    outputSchema: {
-      result: import_schema.z.string().describe("Result message indicating the success of the apply operation"),
-      llm_instructions: import_schema.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
+var import_editor_mcp = require("@elementor/editor-mcp");
+var APPLY_GLOBAL_CLASS_GUIDE_URI = "elementor://global-classes/tools/apply-global-class-guide";
+var generateApplyGlobalClassGuidePrompt = () => {
+  const prompt = (0, import_editor_mcp.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.)
@@ -2909,18 +2893,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: import_schema.z.string().describe("The ID of the class to apply"),
+      elementId: import_schema.z.string().describe("The ID of the element to which the class will be applied")
+    },
+    outputSchema: {
+      result: import_schema.z.string().describe("Result message indicating the success of the apply operation"),
+      llm_instructions: import_schema.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 = (0, import_editor_editing_panel.doGetAppliedClasses)(elementId);
@@ -2931,7 +2956,7 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       };
     }
   });
-  server.addTool({
+  addTool({
     name: "unapply-global-class",
     schema: {
       classId: import_schema.z.string().describe("The ID of the class to unapply"),
@@ -2944,21 +2969,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 = (0, import_editor_editing_panel.doUnapplyClass)(elementId, classId);
@@ -2999,19 +3011,15 @@ function initMcpApplyGetGlobalClassUsages(reg) {
       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 \u2014 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 \u2014 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 \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();
@@ -3211,15 +3219,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
@@ -3309,16 +3309,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);
@@ -3333,7 +3323,7 @@ var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_documents6 = require("@elementor/editor-documents");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store30 = require("@elementor/store");
+var import_store29 = require("@elementor/store");
 var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
@@ -3342,7 +3332,7 @@ function syncWithDocumentSave(panelActions) {
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store30.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store29.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
@@ -3385,7 +3375,7 @@ function bindBeforeSaveTemplateAction() {
   }));
 }
 function isDirty() {
-  return selectIsDirty((0, import_store30.__getState)());
+  return selectIsDirty((0, import_store29.__getState)());
 }
 
 // src/sync-with-document.tsx
@@ -3405,7 +3395,7 @@ function SyncWithDocumentSave() {
 
 // src/init.ts
 function init() {
-  (0, import_store32.__registerSlice)(slice);
+  (0, import_store31.__registerSlice)(slice);
   if (!(0, import_editor_v1_adapters8.isExperimentActive)("e_editor_design_system_panel")) {
     (0, import_editor_panels2.__registerPanel)(panel);
   }
@@ -3445,8 +3435,16 @@ function init() {
     getThemeColor: (theme) => theme.palette.global.dark
   });
   initMcpIntegration(
-    (0, import_editor_mcp.getMCPByDomain)("classes", { instructions: "MCP server for management of Elementor global classes" }),
-    (0, import_editor_mcp.getMCPByDomain)("canvas")
+    (0, import_editor_mcp2.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
+`
+    }),
+    (0, import_editor_mcp2.getMCPByDomain)("canvas")
   );
 }
 // Annotate the CommonJS export names for ESM import in node: