@elementor/editor-global-classes 3.35.0-340 → 3.35.0-342

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+declare const GLOBAL_CLASSES_URI = "elementor://global-classes";
+
 declare function init(): void;
 
-export { init };
+export { GLOBAL_CLASSES_URI, init };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+declare const GLOBAL_CLASSES_URI = "elementor://global-classes";
+
 declare function init(): void;
 
-export { init };
+export { GLOBAL_CLASSES_URI, init };

package/dist/index.js

@@ -30,24 +30,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  GLOBAL_CLASSES_URI: () => GLOBAL_CLASSES_URI,
   init: () => init
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/init.ts
-var import_editor = require("@elementor/editor");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
-var import_store26 = require("@elementor/store");
-
-// src/components/class-manager/class-manager-button.tsx
-var React19 = __toESM(require("react"));
-var import_editor_documents5 = require("@elementor/editor-documents");
-var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_ui9 = require("@elementor/editor-ui");
-var import_ui16 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+// src/mcp-integration/classes-resource.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
 
 // src/global-classes-styles-provider.ts
 var import_editor_styles2 = require("@elementor/editor-styles");
@@ -222,7 +211,9 @@ var slice = (0, import_store.__createSlice)({
       let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
       customCss = customCss?.raw ? customCss : null;
       if (variant) {
-        variant.props = (0, import_editor_props.mergeProps)(variant.props, payload.props);
+        const variantProps = JSON.parse(JSON.stringify(variant.props));
+        const payloadProps = JSON.parse(JSON.stringify(payload.props));
+        variant.props = (0, import_editor_props.mergeProps)(variantProps, payloadProps);
         variant.custom_css = customCss;
         style.variants = getNonEmptyVariants(style);
       } else {
@@ -528,6 +519,42 @@ var subscribeWithStates = (cb) => {
   );
 };
 
+// src/mcp-integration/classes-resource.ts
+var GLOBAL_CLASSES_URI = "elementor://global-classes";
+var initClassesResource = () => {
+  const { mcpServer } = (0, import_editor_mcp.getMCPByDomain)("canvas");
+  mcpServer.resource(
+    "global-classes",
+    GLOBAL_CLASSES_URI,
+    {
+      description: "Global classes list."
+    },
+    async () => {
+      return {
+        contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage["elementor-global-classes"] ?? {} }]
+      };
+    }
+  );
+  globalClassesStylesProvider.subscribe(() => {
+    mcpServer.sendResourceListChanged();
+  });
+};
+
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_store26 = require("@elementor/store");
+
+// src/components/class-manager/class-manager-button.tsx
+var React19 = __toESM(require("react"));
+var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_ui9 = require("@elementor/editor-ui");
+var import_ui16 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
+
 // src/hooks/use-prefetch-css-class-usage.ts
 var import_query = require("@elementor/query");
 
@@ -1872,7 +1899,7 @@ var GlobalClassesList = ({ disabled }) => {
   const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
   (0, import_react7.useEffect)(() => {
-    const handler = (event) => {
+    const handler3 = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         event.stopImmediatePropagation();
         event.preventDefault();
@@ -1883,10 +1910,10 @@ var GlobalClassesList = ({ disabled }) => {
         dispatch5(slice.actions.undo());
       }
     };
-    window.addEventListener("keydown", handler, {
+    window.addEventListener("keydown", handler3, {
       capture: true
     });
-    return () => window.removeEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler3);
   }, [dispatch5]);
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React17.createElement(EmptyState, null);
@@ -2276,80 +2303,10 @@ function PopulateStore() {
 // src/mcp-integration/index.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 
-// src/mcp-integration/classes-resource.ts
-var import_editor_mcp = require("@elementor/editor-mcp");
-var GLOBAL_CLASSES_URI = "elementor://classes";
-var initClassesResource = () => {
-  const { mcpServer } = (0, import_editor_mcp.getMCPByDomain)("classes");
-  mcpServer.resource(
-    "global-classes",
-    GLOBAL_CLASSES_URI,
-    {
-      description: "Global classes list."
-    },
-    async () => {
-      return {
-        contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage["elementor-global-classes"] ?? {} }]
-      };
-    }
-  );
-};
-
 // src/mcp-integration/mcp-apply-unapply-global-classes.ts
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_schema = require("@elementor/schema");
 function initMcpApplyUnapplyGlobalClasses(server) {
-  server.addTool({
-    name: "list-all-global-classes",
-    description: `List all classes applied to a specific element
-
-## When to use this tool:
-- When a user requests to see which classes or global classes exists.
-- When you need the list of global classes to allow the user to select from.
-- At least once before applying or unapplying a class, to ensure the class ID is correct.
-
-`,
-    outputSchema: {
-      appliedClasses: import_schema.z.array(
-        import_schema.z.object({
-          id: import_schema.z.string().describe("The ID of the class"),
-          label: import_schema.z.string().describe("The label of the class"),
-          variants: import_schema.z.array(
-            import_schema.z.object({
-              meta: import_schema.z.object({
-                breakpoint: import_schema.z.string().optional(),
-                state: import_schema.z.string().optional()
-              }),
-              props: import_schema.z.record(import_schema.z.any())
-            })
-          )
-        })
-      )
-    },
-    handler: async () => {
-      const globalClassesProvider = import_editor_styles_repository5.stylesRepository.getProviderByKey("global-classes");
-      if (!globalClassesProvider) {
-        throw new Error("Global classes provider not found");
-      }
-      const result = [];
-      globalClassesProvider.actions.all().forEach((style) => {
-        const { id: id2, label, variants } = style;
-        result.push({
-          id: id2,
-          label,
-          variants: variants.map((variant) => ({
-            meta: {
-              breakpoint: variant.meta.breakpoint,
-              state: variant.meta.state
-            },
-            props: variant.props
-          }))
-        });
-      });
-      return { appliedClasses: result };
-    }
-  });
   server.addTool({
     schema: {
       classId: import_schema.z.string().describe("The ID of the class to apply"),
@@ -2363,7 +2320,8 @@ function initMcpApplyUnapplyGlobalClasses(server) {
 - When you need to add a specific class to an element's applied classes.
 
 ## Prerequisites:
-- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates. You can use the "list-applied-classes" tool to fetch the current classes.
+- 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.`,
     handler: async (params) => {
       const { classId, elementId } = params;
@@ -2385,11 +2343,12 @@ function initMcpApplyUnapplyGlobalClasses(server) {
 - 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. You can use the "list-global-classes" tool to fetch the all classes applied to all elements.
+- 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, please use the "list-global-classes" tool to get the class ID from the name first.
+If the user want to unapply a class by it's name and not ID, retreive the id from the list, available at uri elementor://global-classes
 </note>
 `,
     handler: async (params) => {
@@ -2403,22 +2362,164 @@ If the user want to unapply a class by it's name and not ID, please use the "lis
   });
 }
 
-// src/mcp-integration/mcp-get-global-class-usages.ts
+// src/mcp-integration/mcp-create-global-class.ts
+var import_editor_canvas = require("@elementor/editor-canvas");
+var import_editor_props2 = 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_props2.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_props2.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" }
+    ],
+    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");
 function initMcpApplyGetGlobalClassUsages(reg) {
   const { addTool } = reg;
   const globalClassesUsageSchema = {
-    usages: import_schema2.z.array(
-      import_schema2.z.object({
-        classId: import_schema2.z.string().describe(
+    usages: import_schema3.z.array(
+      import_schema3.z.object({
+        classId: import_schema3.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_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")
+        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")
           })
         )
       })
@@ -2426,15 +2527,18 @@ function initMcpApplyGetGlobalClassUsages(reg) {
   };
   addTool({
     name: "get-global-class-usages",
-    description: `Retreive the usage details of global classes within the Elementor editor, accross all pages.
+    description: `Retreive the usages of global-classes ACCROSS PAGES designed by Elementor editor.
 
-## Prequisites:
-- Use "list-global-classes" tool to be able to match class IDs to class names/labels.
+## Prequisites: CRITICAL
+- The list of global classes and their applid values is available at resource uri elementor://global-classes
 
 ## When to use this tool:
 - When a user requests to see where a specific global class is being used accross 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
 `,
     outputSchema: globalClassesUsageSchema,
     handler: async () => {
@@ -2467,14 +2571,134 @@ function initMcpApplyGetGlobalClassUsages(reg) {
   });
 }
 
+// src/mcp-integration/mcp-modify-global-class.ts
+var import_editor_canvas2 = require("@elementor/editor-canvas");
+var import_editor_props3 = 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");
+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}"'
+  ),
+  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");
+  }
+  const errors = [];
+  const validProps = Object.keys((0, import_editor_styles4.getStylesSchema)());
+  Object.keys(props).forEach((key) => {
+    const propType = (0, import_editor_styles4.getStylesSchema)()[key];
+    if (!propType) {
+      errors.push(`Property "${key}" does not exist in styles schema.`);
+      return;
+    }
+    const { valid, jsonSchema } = import_editor_props3.Schema.validatePropValue(propType, props[key]);
+    if (!valid) {
+      errors.push(`- Property "${key}" has invalid value:
+  expected Schema: ${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(props).forEach((key) => {
+    props[key] = import_editor_props3.Schema.adjustLlmPropValueSchema(props[key], {
+      transformers: import_editor_variables2.Utils.globalVariablesLLMResolvers
+    });
+  });
+  const snapshot = structuredClone(globalClassesStylesProvider.actions.all());
+  try {
+    update({
+      id: classId,
+      variants: [
+        {
+          custom_css: customCss,
+          props,
+          meta: {
+            breakpoint: params.breakpoint === null ? "desktop" : params.breakpoint,
+            state: null
+          }
+        }
+      ]
+    });
+    await saveGlobalClasses({ context: "frontend" });
+  } 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 "ok";
+};
+var initModifyGlobalClass = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "modify-global-class",
+    requiredResources: [
+      {
+        description: "Breakpoints list",
+        uri: import_editor_canvas2.BREAKPOINTS_SCHEMA_URI
+      },
+      {
+        description: "Global classes list",
+        uri: GLOBAL_CLASSES_URI
+      }
+    ],
+    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"
+    },
+  }
+}\`\`\`
+`,
+    schema,
+    handler: handler2
+  });
+};
+
 // src/mcp-integration/index.ts
 var initMcpIntegration = () => {
-  const reg = (0, import_editor_mcp2.getMCPByDomain)("classes");
-  reg.setMCPDescription(
-    "Tools for managing and applying Global CSS classes to elements within the Elementor editor."
-  );
+  const reg = (0, import_editor_mcp2.getMCPByDomain)("canvas");
   initMcpApplyUnapplyGlobalClasses(reg);
   initMcpApplyGetGlobalClassUsages(reg);
+  initCreateGlobalClass(reg);
+  initModifyGlobalClass(reg);
   initClassesResource();
 };
 
@@ -2533,7 +2757,7 @@ function SyncWithDocumentSave() {
 function init() {
   (0, import_store26.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository6.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -2562,6 +2786,7 @@ function init() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  GLOBAL_CLASSES_URI,
   init
 });
 //# sourceMappingURL=index.js.map