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

package/dist/index.mjs

@@ -1,24 +1,5 @@
-// src/init.ts
-import { injectIntoLogic } from "@elementor/editor";
-import {
-  injectIntoClassSelectorActions,
-  injectIntoCssClassConvert,
-  registerStyleProviderToColors
-} from "@elementor/editor-editing-panel";
-import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
-import { __registerSlice as registerSlice } from "@elementor/store";
-
-// src/components/class-manager/class-manager-button.tsx
-import * as React19 from "react";
-import {
-  __useActiveDocument as useActiveDocument2,
-  __useActiveDocumentActions as useActiveDocumentActions
-} from "@elementor/editor-documents";
-import { useUserStylesCapability } from "@elementor/editor-styles-repository";
-import { SaveChangesDialog as SaveChangesDialog2, useDialog as useDialog2 } from "@elementor/editor-ui";
-import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+// src/mcp-integration/classes-resource.ts
+import { getMCPByDomain } from "@elementor/editor-mcp";
 
 // src/global-classes-styles-provider.ts
 import { generateId } from "@elementor/editor-styles";
@@ -202,7 +183,9 @@ var slice = createSlice({
       let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
       customCss = customCss?.raw ? customCss : null;
       if (variant) {
-        variant.props = mergeProps(variant.props, payload.props);
+        const variantProps = JSON.parse(JSON.stringify(variant.props));
+        const payloadProps = JSON.parse(JSON.stringify(payload.props));
+        variant.props = mergeProps(variantProps, payloadProps);
         variant.custom_css = customCss;
         style.variants = getNonEmptyVariants(style);
       } else {
@@ -508,6 +491,49 @@ var subscribeWithStates = (cb) => {
   );
 };
 
+// src/mcp-integration/classes-resource.ts
+var GLOBAL_CLASSES_URI = "elementor://global-classes";
+var initClassesResource = () => {
+  const { mcpServer } = 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
+import { injectIntoLogic } from "@elementor/editor";
+import {
+  injectIntoClassSelectorActions,
+  injectIntoCssClassConvert,
+  registerStyleProviderToColors
+} from "@elementor/editor-editing-panel";
+import { __registerPanel as registerPanel } from "@elementor/editor-panels";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { __registerSlice as registerSlice } from "@elementor/store";
+
+// src/components/class-manager/class-manager-button.tsx
+import * as React19 from "react";
+import {
+  __useActiveDocument as useActiveDocument2,
+  __useActiveDocumentActions as useActiveDocumentActions
+} from "@elementor/editor-documents";
+import { useUserStylesCapability } from "@elementor/editor-styles-repository";
+import { SaveChangesDialog as SaveChangesDialog2, useDialog as useDialog2 } from "@elementor/editor-ui";
+import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
+
 // src/hooks/use-prefetch-css-class-usage.ts
 import { useQueryClient } from "@elementor/query";
 
@@ -1928,7 +1954,7 @@ var GlobalClassesList = ({ disabled }) => {
   const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
   useEffect2(() => {
-    const handler = (event) => {
+    const handler3 = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         event.stopImmediatePropagation();
         event.preventDefault();
@@ -1939,10 +1965,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);
@@ -2332,80 +2358,10 @@ function PopulateStore() {
 // src/mcp-integration/index.ts
 import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 
-// src/mcp-integration/classes-resource.ts
-import { getMCPByDomain } from "@elementor/editor-mcp";
-var GLOBAL_CLASSES_URI = "elementor://classes";
-var initClassesResource = () => {
-  const { mcpServer } = 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
 import { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from "@elementor/editor-editing-panel";
-import { stylesRepository } from "@elementor/editor-styles-repository";
 import { z } from "@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: z.array(
-        z.object({
-          id: z.string().describe("The ID of the class"),
-          label: z.string().describe("The label of the class"),
-          variants: z.array(
-            z.object({
-              meta: z.object({
-                breakpoint: z.string().optional(),
-                state: z.string().optional()
-              }),
-              props: z.record(z.any())
-            })
-          )
-        })
-      )
-    },
-    handler: async () => {
-      const globalClassesProvider = 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: z.string().describe("The ID of the class to apply"),
@@ -2419,7 +2375,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;
@@ -2441,11 +2398,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) => {
@@ -2459,22 +2417,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
+import { STYLE_SCHEMA_URI } from "@elementor/editor-canvas";
+import { Schema } from "@elementor/editor-props";
+import { getStylesSchema } from "@elementor/editor-styles";
+import { Utils } from "@elementor/editor-variables";
 import { z as z2 } from "@elementor/schema";
+var inputSchema = {
+  globalClassName: z2.string().describe("The name of the global class to be created"),
+  props: z2.record(z2.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: z2.string().optional().describe(
+    "Additional CSS styles associated with the global class. Use only if you fail to use the schema, specifically backgrounds"
+  ),
+  breakpoint: z2.nullable(
+    z2.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: z2.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 = getStylesSchema();
+  const validProps = Object.keys(stylesSchema);
+  Object.keys(input.props).forEach((key) => {
+    const propType = getStylesSchema()[key];
+    if (!propType) {
+      errors.push(`Property "${key}" does not exist in styles schema.`);
+      return;
+    }
+    const { valid, jsonSchema } = 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] = Schema.adjustLlmPropValueSchema(input.props[key], {
+      transformers: 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: 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
+import { z as z3 } from "@elementor/schema";
 function initMcpApplyGetGlobalClassUsages(reg) {
   const { addTool } = reg;
   const globalClassesUsageSchema = {
-    usages: z2.array(
-      z2.object({
-        classId: z2.string().describe(
+    usages: z3.array(
+      z3.object({
+        classId: z3.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: z2.array(
-          z2.object({
-            pageId: z2.string().describe("The ID of the page where the class is used"),
-            title: z2.string().describe("The title of the page where the class is used"),
-            total: z2.number().describe("The number of times the class is used on this page"),
-            elements: z2.array(z2.string()).describe("List of element IDs using this class on the page")
+        usages: z3.array(
+          z3.object({
+            pageId: z3.string().describe("The ID of the page where the class is used"),
+            title: z3.string().describe("The title of the page where the class is used"),
+            total: z3.number().describe("The number of times the class is used on this page"),
+            elements: z3.array(z3.string()).describe("List of element IDs using this class on the page")
           })
         )
       })
@@ -2482,15 +2582,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 () => {
@@ -2523,14 +2626,134 @@ function initMcpApplyGetGlobalClassUsages(reg) {
   });
 }
 
+// src/mcp-integration/mcp-modify-global-class.ts
+import { BREAKPOINTS_SCHEMA_URI } from "@elementor/editor-canvas";
+import { Schema as Schema2 } from "@elementor/editor-props";
+import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
+import { Utils as Utils2 } from "@elementor/editor-variables";
+import { z as z4 } from "@elementor/schema";
+var schema = {
+  classId: z4.string().describe("The ID of the global class to modify"),
+  props: z4.record(z4.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: z4.nullable(z4.string()).default(null).describe("The responsive breakpoint name for which the global class styles should be applied"),
+  customCss: z4.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(getStylesSchema2());
+  Object.keys(props).forEach((key) => {
+    const propType = getStylesSchema2()[key];
+    if (!propType) {
+      errors.push(`Property "${key}" does not exist in styles schema.`);
+      return;
+    }
+    const { valid, jsonSchema } = Schema2.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] = Schema2.adjustLlmPropValueSchema(props[key], {
+      transformers: Utils2.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: 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 = getMCPByDomain2("classes");
-  reg.setMCPDescription(
-    "Tools for managing and applying Global CSS classes to elements within the Elementor editor."
-  );
+  const reg = getMCPByDomain2("canvas");
   initMcpApplyUnapplyGlobalClasses(reg);
   initMcpApplyGetGlobalClassUsages(reg);
+  initCreateGlobalClass(reg);
+  initModifyGlobalClass(reg);
   initClassesResource();
 };
 
@@ -2589,7 +2812,7 @@ function SyncWithDocumentSave() {
 function init() {
   registerSlice(slice);
   registerPanel(panel);
-  stylesRepository2.register(globalClassesStylesProvider);
+  stylesRepository.register(globalClassesStylesProvider);
   injectIntoLogic({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -2617,6 +2840,7 @@ function init() {
   initMcpIntegration();
 }
 export {
+  GLOBAL_CLASSES_URI,
   init
 };
 //# sourceMappingURL=index.mjs.map