@elementor/editor-global-classes 3.35.0-470 → 3.35.0-472

package/dist/index.js

@@ -532,22 +532,26 @@ var subscribeWithStates = (cb) => {
 // src/mcp-integration/classes-resource.ts
 var GLOBAL_CLASSES_URI = "elementor://global-classes";
 var initClassesResource = () => {
-  const { mcpServer, resource, waitForReady } = (0, import_editor_mcp.getMCPByDomain)("canvas");
-  resource(
-    "global-classes",
-    GLOBAL_CLASSES_URI,
-    {
-      description: "Global classes list."
-    },
-    async () => {
-      return {
-        contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage["elementor-global-classes"] ?? {} }]
-      };
-    }
-  );
-  waitForReady().then(() => {
-    globalClassesStylesProvider.subscribe(() => {
-      mcpServer.sendResourceListChanged();
+  const canvasMcpEntry = (0, import_editor_mcp.getMCPByDomain)("canvas");
+  const classesMcpEntry = (0, import_editor_mcp.getMCPByDomain)("classes");
+  [canvasMcpEntry, classesMcpEntry].forEach((entry) => {
+    const { mcpServer, resource, waitForReady } = entry;
+    resource(
+      "global-classes",
+      GLOBAL_CLASSES_URI,
+      {
+        description: "Global classes list."
+      },
+      async () => {
+        return {
+          contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage["elementor-global-classes"] ?? "{}" }]
+        };
+      }
+    );
+    waitForReady().then(() => {
+      globalClassesStylesProvider.subscribe(() => {
+        mcpServer.sendResourceListChanged();
+      });
     });
   });
 };
@@ -1901,7 +1905,7 @@ var GlobalClassesList = ({ disabled }) => {
   const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
   (0, import_react7.useEffect)(() => {
-    const handler3 = (event) => {
+    const handler2 = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         event.stopImmediatePropagation();
         event.preventDefault();
@@ -1912,10 +1916,10 @@ var GlobalClassesList = ({ disabled }) => {
         dispatch5(slice.actions.undo());
       }
     };
-    window.addEventListener("keydown", handler3, {
+    window.addEventListener("keydown", handler2, {
       capture: true
     });
-    return () => window.removeEventListener("keydown", handler3);
+    return () => window.removeEventListener("keydown", handler2);
   }, [dispatch5]);
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React17.createElement(EmptyState, null);
@@ -2322,16 +2326,29 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       intelligencePriority: 0.7,
       speedPriority: 0.8
     },
-    description: `Apply a global class to the current element
+    description: `Apply a global class to an element, enabling consistent styling through your design system.
 
 ## When to use this tool:
-- When a user requests to apply a global class or a class to an element in the Elementor editor.
-- When you need to add a specific class to an element's applied classes.
+**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:
-- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates.
-  List available at always up-to-date resource 'elementor://global-classes'.
-- Make sure you have the correct class ID that you want to apply.`,
+- **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")`,
     handler: async (params) => {
       const { classId, elementId } = params;
       const appliedClasses = (0, import_editor_editing_panel.doGetAppliedClasses)(elementId);
@@ -2383,168 +2400,22 @@ If the user want to unapply a class by it's name and not ID, retreive the id fro
   });
 }
 
-// src/mcp-integration/mcp-create-global-class.ts
-var import_editor_canvas = require("@elementor/editor-canvas");
-var import_editor_props = require("@elementor/editor-props");
-var import_editor_styles3 = require("@elementor/editor-styles");
-var import_editor_variables = require("@elementor/editor-variables");
-var import_schema2 = require("@elementor/schema");
-var inputSchema = {
-  globalClassName: import_schema2.z.string().describe("The name of the global class to be created"),
-  props: import_schema2.z.record(import_schema2.z.any()).describe(
-    'key-value of style-schema PropValues applied to the global class. Available properties at dynamic resource "elementor://styles/schema/{property-name}"'
-  ).default({}),
-  customCss: import_schema2.z.string().optional().describe(
-    "Additional CSS styles associated with the global class. Use only if you fail to use the schema, specifically backgrounds"
-  ),
-  breakpoint: import_schema2.z.nullable(
-    import_schema2.z.enum(["desktop", "tablet", "mobile", "laptop", "widescreen", "tablet_extra", "mobile_extra"]).describe("The responsive breakpoint name for which the global class styles should be applied")
-  ).default(null).describe("The responsive breakpoint name for which the global class styles should be applied")
-};
-var outputSchema = {
-  classId: import_schema2.z.string().describe("The unique identifier of the newly created global class")
-};
-var handler = async (input) => {
-  const customCss = input.customCss ? { raw: btoa(input.customCss) } : null;
-  const { delete: deleteClass2, create } = globalClassesStylesProvider.actions;
-  if (!create || !deleteClass2) {
-    throw new Error("Create action is not available");
-  }
-  const errors = [];
-  const stylesSchema = (0, import_editor_styles3.getStylesSchema)();
-  const validProps = Object.keys(stylesSchema);
-  Object.keys(input.props).forEach((key) => {
-    const propType = (0, import_editor_styles3.getStylesSchema)()[key];
-    if (!propType) {
-      errors.push(`Property "${key}" does not exist in styles schema.`);
-      return;
-    }
-    const { valid, jsonSchema } = import_editor_props.Schema.validatePropValue(propType, input.props[key]);
-    if (!valid) {
-      errors.push(
-        `- Property "${key}" has invalid value
-  Exact schema: \`\`\`json
-${jsonSchema}\`\`\`
-`
-      );
-    }
-  });
-  if (errors.length > 0) {
-    throw new Error(
-      `Errors:
-${errors.join("\n")}
-Available Properties: ${validProps.join(
-        ", "
-      )}
-Now that you have this information, update your input and try again`
-    );
-  }
-  Object.keys(input.props).forEach((key) => {
-    input.props[key] = import_editor_props.Schema.adjustLlmPropValueSchema(input.props[key], {
-      transformers: import_editor_variables.Utils.globalVariablesLLMResolvers
-    });
-  });
-  const classId = create(input.globalClassName, [
-    {
-      meta: {
-        breakpoint: input.breakpoint === null ? "desktop" : input.breakpoint,
-        state: null
-      },
-      custom_css: customCss,
-      props: input.props
-    }
-  ]);
-  try {
-    await saveGlobalClasses({ context: "frontend" });
-  } catch (err) {
-    deleteClass2(classId);
-    await saveGlobalClasses({ context: "frontend" });
-    throw new Error(`Failed to create global class, probably invalid schema values.`);
-  }
-  return {
-    classId
-  };
-};
-var initCreateGlobalClass = (reg) => {
-  const { addTool } = reg;
-  addTool({
-    requiredResources: [
-      { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
-      { uri: import_editor_canvas.STYLE_SCHEMA_URI, description: "Style schema resources" }
-    ],
-    modelPreferences: {
-      intelligencePriority: 0.85,
-      speedPriority: 0.6
-    },
-    description: `Create a new global class within the Elementor editor, allowing users to define reusable styles and properties for consistent design across their website.
-      
-# Prequisites: CRITICAL
-- Read the style schema at [elementor://styles/schema/{category}] to understand the valid properties and values that can be assigned to the global class.
-- Available style properties can be found in the styles schema dynamic resources available from 'canvas' mcp. List the resources to see all available properties.
-- YOU MUST USE THE STYLE SCHEMA TO BUILD THE "props" PARAMETER CORRECTLY, OTHERWISE THE GLOBAL CLASS CREATION WILL FAIL.
-- Ensure that the global class name provided does not already exist to avoid duplication.
-- Read the styles schema resource available from 'canvas' mcp to understand the valid properties and values that can be assigned to the global class.
-
-## Parameters:
-- \`globalClassName\` (string, required): The name of the global class to be created.
-- \`props\` (object, required): A key-value map of style-schema PropValues that define the styles for the global class.
-- \`breakpoint\` (string | null, optional): The responsive breakpoint for which the styles should be applied. If null, styles apply to all breakpoints.
-
-## Example usage:
-\`\`\`json
-{
-  "globalClassName": "my-new-class",
-  "props": {
-    "color": {
-      "$$type": "color",
-      "value": "#ff0000"
-    },
-    "fontSize": {
-      "$$type": "size",
-      "value": {
-        "size": {
-          "$$type": "number",
-          "value": 2.5
-        },
-        "unit": {
-          "$$type": "string",
-          "value": "em"
-        }
-      }
-    }
-  },
-  "breakpoint": "desktop"
-}
-
-# Next steps:
-If failed, read the error message carefully, it includes the exact schema that caused the failure for each invalid property.
-Now that you have this information, update your input and try again.
-
-\`\`\`
-`,
-    name: "create-global-class",
-    schema: inputSchema,
-    outputSchema,
-    handler
-  });
-};
-
 // src/mcp-integration/mcp-get-global-class-usages.ts
-var import_schema3 = require("@elementor/schema");
+var import_schema2 = require("@elementor/schema");
 function initMcpApplyGetGlobalClassUsages(reg) {
   const { addTool } = reg;
   const globalClassesUsageSchema = {
-    usages: import_schema3.z.array(
-      import_schema3.z.object({
-        classId: import_schema3.z.string().describe(
+    usages: import_schema2.z.array(
+      import_schema2.z.object({
+        classId: import_schema2.z.string().describe(
           'The ID of the class, not visible to the user. To retreive the name of the class, use the "list-global-classes" tool'
         ),
-        usages: import_schema3.z.array(
-          import_schema3.z.object({
-            pageId: import_schema3.z.string().describe("The ID of the page where the class is used"),
-            title: import_schema3.z.string().describe("The title of the page where the class is used"),
-            total: import_schema3.z.number().describe("The number of times the class is used on this page"),
-            elements: import_schema3.z.array(import_schema3.z.string()).describe("List of element IDs using this class on the page")
+        usages: import_schema2.z.array(
+          import_schema2.z.object({
+            pageId: import_schema2.z.string().describe("The ID of the page where the class is used"),
+            title: import_schema2.z.string().describe("The title of the page where the class is used"),
+            total: import_schema2.z.number().describe("The number of times the class is used on this page"),
+            elements: import_schema2.z.array(import_schema2.z.string()).describe("List of element IDs using this class on the page")
           })
         )
       })
@@ -2600,139 +2471,247 @@ function initMcpApplyGetGlobalClassUsages(reg) {
   });
 }
 
-// src/mcp-integration/mcp-modify-global-class.ts
-var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_props2 = require("@elementor/editor-props");
-var import_editor_styles4 = require("@elementor/editor-styles");
-var import_editor_variables2 = require("@elementor/editor-variables");
-var import_schema4 = require("@elementor/schema");
+// src/mcp-integration/mcp-manage-global-classes.ts
+var import_editor_canvas = require("@elementor/editor-canvas");
+var import_editor_props = require("@elementor/editor-props");
+var import_editor_styles3 = require("@elementor/editor-styles");
+var import_schema3 = require("@elementor/schema");
 var schema = {
-  classId: import_schema4.z.string().describe("The ID of the global class to modify"),
-  props: import_schema4.z.record(import_schema4.z.any()).describe(
-    'key-value of style-schema PropValues to update the global class with. Available properties at dynamic resource "elementor://styles/schema/{property-name}"'
+  action: import_schema3.z.enum(["create", "modify", "delete"]).describe("Operation to perform"),
+  classId: import_schema3.z.string().optional().describe("Global class ID (required for modify). Get from elementor://global-classes resource."),
+  globalClassName: import_schema3.z.string().optional().describe("Global class name (required for create)"),
+  props: import_schema3.z.record(import_schema3.z.any()).describe(
+    'key-value of style-schema PropValues. Available properties at dynamic resource "elementor://styles/schema/{property-name}"'
   ),
-  breakpoint: import_schema4.z.nullable(import_schema4.z.string()).default(null).describe("The responsive breakpoint name for which the global class styles should be applied"),
-  customCss: import_schema4.z.string().optional().describe("The CSS styles associated with the global class.")
-};
-var handler2 = async (params) => {
-  const { classId, props } = params;
-  const customCss = params.customCss ? { raw: btoa(params.customCss) } : null;
-  const { update, delete: deleteClass2 } = globalClassesStylesProvider.actions;
-  if (!update || !deleteClass2) {
-    throw new Error("Update action is not available");
+  breakpoint: import_schema3.z.nullable(import_schema3.z.string().describe("Responsive breakpoint name for styles. Defaults to desktop (null).")).default(null).describe("Responsive breakpoint name for styles. Defaults to desktop (null).")
+};
+var outputSchema = {
+  status: import_schema3.z.enum(["ok", "error"]).describe("Operation status"),
+  classId: import_schema3.z.string().optional().describe("Class ID (returned on create success)"),
+  message: import_schema3.z.string().optional().describe("Error details if status is error")
+};
+var handler = async (input) => {
+  const { action, classId, globalClassName, props, breakpoint } = input;
+  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: deleteClass2 } = globalClassesStylesProvider.actions;
+  if (!create || !update || !deleteClass2) {
+    return {
+      status: "error",
+      message: "Required actions not available"
+    };
   }
   const errors = [];
-  const validProps = Object.keys((0, import_editor_styles4.getStylesSchema)());
+  const stylesSchema = (0, import_editor_styles3.getStylesSchema)();
+  const validProps = Object.keys(stylesSchema);
   Object.keys(props).forEach((key) => {
-    const propType = (0, import_editor_styles4.getStylesSchema)()[key];
+    const propType = stylesSchema[key];
     if (!propType) {
       errors.push(`Property "${key}" does not exist in styles schema.`);
       return;
     }
-    const { valid, jsonSchema } = import_editor_props2.Schema.validatePropValue(propType, props[key]);
+    const { valid, jsonSchema } = import_editor_props.Schema.validatePropValue(propType, props[key]);
     if (!valid) {
-      errors.push(`- Property "${key}" has invalid value:
-  expected Schema: ${jsonSchema}
+      errors.push(`- Property "${key}" has invalid value
+  Expected schema: ${jsonSchema}
 `);
     }
   });
   if (errors.length > 0) {
-    throw new Error(
-      `Errors:
+    return {
+      status: "error",
+      message: `Validation errors:
 ${errors.join("\n")}
 Available Properties: ${validProps.join(
         ", "
       )}
-Now that you have this information, update your input and try again`
-    );
+Update your input and try again.`
+    };
   }
+  const Utils = window.elementorV2.editorVariables.Utils;
   Object.keys(props).forEach((key) => {
-    props[key] = import_editor_props2.Schema.adjustLlmPropValueSchema(props[key], {
-      transformers: import_editor_variables2.Utils.globalVariablesLLMResolvers
+    props[key] = import_editor_props.Schema.adjustLlmPropValueSchema(props[key], {
+      transformers: Utils.globalVariablesLLMResolvers
     });
   });
-  const snapshot = structuredClone(globalClassesStylesProvider.actions.all());
+  const breakpointValue = breakpoint ?? "desktop";
   try {
-    update({
-      id: classId,
-      variants: [
-        {
-          custom_css: customCss,
+    switch (action) {
+      case "create":
+        const newClassId = await attemptCreate({
           props,
-          meta: {
-            breakpoint: params.breakpoint === null ? "desktop" : params.breakpoint,
-            state: null
-          }
-        }
-      ]
-    });
-    await saveGlobalClasses({ context: "frontend" });
+          className: globalClassName,
+          stylesProvider: globalClassesStylesProvider,
+          breakpoint: breakpointValue
+        });
+        return newClassId ? {
+          status: "ok",
+          message: `created global class with ID ${newClassId}`
+        } : {
+          status: "error",
+          message: "error creating class"
+        };
+      case "modify":
+        const updated = await attemptUpdate({
+          classId,
+          props,
+          stylesProvider: globalClassesStylesProvider,
+          breakpoint: breakpointValue
+        });
+        return updated ? { status: "ok", classId } : {
+          status: "error",
+          message: "error modifying class"
+        };
+      case "delete":
+        const deleted = await attemptDelete({
+          classId,
+          stylesProvider: globalClassesStylesProvider
+        });
+        return deleted ? { status: "ok", message: `deleted global class with ID ${classId}` } : {
+          status: "error",
+          message: "error deleting class"
+        };
+    }
   } catch (error) {
-    snapshot.forEach((style) => {
-      update({
-        id: style.id,
-        variants: style.variants
-      });
-    });
-    await saveGlobalClasses({ context: "frontend" });
-    throw new Error(`Failed to modify global class: ${error.message}`);
+    return {
+      status: "error",
+      message: `${action} failed: ${error.message || "Unknown error"}`
+    };
   }
-  return "ok";
 };
-var initModifyGlobalClass = (reg) => {
+var initManageGlobalClasses = (reg) => {
   const { addTool } = reg;
   addTool({
-    name: "modify-global-class",
+    name: "manage-global-classes",
     requiredResources: [
-      {
-        description: "Breakpoints list",
-        uri: import_editor_canvas2.BREAKPOINTS_SCHEMA_URI
-      },
-      {
-        description: "Global classes list",
-        uri: GLOBAL_CLASSES_URI
-      }
+      { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
+      { uri: import_editor_canvas.STYLE_SCHEMA_URI, description: "Style schema resources" },
+      { uri: import_editor_canvas.BREAKPOINTS_SCHEMA_URI, description: "Breakpoints list" }
     ],
     modelPreferences: {
-      hints: [{ name: "claude-sonnet-4-5" }],
       intelligencePriority: 0.85,
       speedPriority: 0.6
     },
-    description: `Modify an existing global class within the Elementor editor, allowing users to update styles and properties for consistent design across their website.
-# CRITICAL Prequisites:
-- Read the style schema at [elementor://styles/schema/{category}] to understand the valid properties and values that can be assigned to the global class.
-- Ensure that the global class ID provided exists.
-- Prefer style schema over custom_css
-
-## Parameters:
-- \`classId\` (string, required): The ID of the global class to be modified.
-- \`props\` (object, required): A key-value map of style-schema PropValues that define the new styles for the global class.
-- \`customCss\` (string, optional): The CSS styles associated with the global class.
-
-## Example usage:
-\`\`\`json
-{
-  "classId": "existing-class-id",
-  "props": {
-    "color": {
-      "$$type": "color",
-      "value": "#00ff00"
-    },
-  }
-}\`\`\`
-`,
+    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.`,
     schema,
-    handler: handler2
+    outputSchema,
+    handler
   });
 };
+async function attemptCreate(opts) {
+  const { props, breakpoint, className, stylesProvider } = opts;
+  const { create, delete: deleteClass2 } = stylesProvider.actions;
+  if (!className) {
+    throw new Error("Global class name is a required for creation");
+  }
+  if (!create || !deleteClass2) {
+    throw new Error("User is unable to create global classes");
+  }
+  const newClassId = create(className, [
+    {
+      meta: {
+        breakpoint,
+        state: null
+      },
+      custom_css: null,
+      props
+    }
+  ]);
+  try {
+    await saveGlobalClasses({ context: "frontend" });
+    return newClassId;
+  } catch {
+    deleteClass2(newClassId);
+    return null;
+  }
+}
+async function attemptUpdate(opts) {
+  const { props, breakpoint, classId, stylesProvider } = 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");
+  }
+  const snapshot = structuredClone(stylesProvider.actions.all());
+  try {
+    updateProps({
+      id: classId,
+      props,
+      meta: {
+        breakpoint,
+        state: null
+      }
+    });
+    await saveGlobalClasses({ context: "frontend" });
+    return true;
+  } catch {
+    snapshot.forEach((style) => {
+      update({
+        id: style.id,
+        variants: style.variants
+      });
+    });
+    await saveGlobalClasses({ context: "frontend" });
+    return false;
+  }
+}
+async function attemptDelete(opts) {
+  const { classId, stylesProvider } = opts;
+  const { delete: deleteClass2, create } = stylesProvider.actions;
+  if (!classId) {
+    throw new Error("Class ID is required for deletion");
+  }
+  if (!deleteClass2 || !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`);
+  }
+  try {
+    deleteClass2(classId);
+    await saveGlobalClasses({ context: "frontend" });
+    return true;
+  } catch {
+    return false;
+  }
+}
 
 // src/mcp-integration/index.ts
 var initMcpIntegration = () => {
-  const reg = (0, import_editor_mcp2.getMCPByDomain)("canvas");
+  const reg = (0, import_editor_mcp2.getMCPByDomain)("classes", {
+    instructions: "MCP server for management of Elementor global classes"
+  });
   initMcpApplyUnapplyGlobalClasses(reg);
   initMcpApplyGetGlobalClassUsages(reg);
-  initCreateGlobalClass(reg);
-  initModifyGlobalClass(reg);
+  initManageGlobalClasses(reg);
   initClassesResource();
 };