@elementor/editor-global-classes 4.2.0-930 → 4.2.0-932

package/dist/index.mjs

@@ -2897,7 +2897,7 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       const appliedClasses = doGetAppliedClasses(elementId);
       doApplyClasses(elementId, [...appliedClasses, classId]);
       return {
-        llm_instructions: "Please check the element-configuration, find DUPLICATES in the style schema that are in the class, and remove them",
+        llm_instructions: "Please check the element configuration, find inline styles duplicated by the applied global class, and remove them",
         result: `Class ${classId} applied to element ${elementId} successfully.`
       };
     }
@@ -2990,40 +2990,20 @@ function initMcpApplyGetGlobalClassUsages(reg) {
 }
 
 // src/mcp-integration/mcp-manage-global-classes.ts
-import { BREAKPOINTS_SCHEMA_FULL_URI, STYLE_SCHEMA_FULL_URI } from "@elementor/editor-canvas";
-import { Schema } from "@elementor/editor-props";
-import { getStylesSchema } from "@elementor/editor-styles";
+import { BREAKPOINTS_SCHEMA_FULL_URI, convertStyleBlocksToAtomic } from "@elementor/editor-canvas";
 import { z as z3 } from "@elementor/schema";
 var schema = {
   action: z3.enum(["create", "modify", "delete"]).describe("Operation to perform"),
   classId: z3.string().optional().describe("Global class ID (required for modify). Get from elementor://global-classes resource."),
   globalClassName: z3.string().optional().describe("Global class name (required for create)"),
-  props: z3.object({
-    default: z3.record(
-      z3.string().describe("The style property name"),
-      z3.any().describe(`The style PropValue, refer to [${STYLE_SCHEMA_FULL_URI}] how to generate values`)
-    ).describe(
-      "An object record containing style property names and their new values. MUST contain at least one property \u2014 empty objects are rejected."
-    ),
-    hover: z3.record(
-      z3.string().describe("The style property name"),
-      z3.any().describe(`The style PropValue, refer to [${STYLE_SCHEMA_FULL_URI}] how to generate values`)
-    ).describe(
-      "An object record containing style property names and their new values to be set on the element. for :hover css state. optional"
-    ).optional(),
-    focus: z3.record(
-      z3.string().describe("The style property name"),
-      z3.any().describe(`The style PropValue, refer to [${STYLE_SCHEMA_FULL_URI}] how to generate values`)
-    ).describe(
-      "An object record containing style property names and their new values to be set on the element. for :focus css state. optional"
-    ).optional(),
-    active: z3.record(
-      z3.string().describe("The style property name"),
-      z3.any().describe(`The style PropValue, refer to [${STYLE_SCHEMA_FULL_URI}] how to generate values`)
-    ).describe(
-      "An object record containing style property names and their new values to be set on the element. for :active css state. optional"
-    ).optional()
-  }),
+  style: z3.object({
+    default: z3.string().describe("Plaintext CSS for the default state. MUST be non-empty \u2014 blank strings are rejected."),
+    hover: z3.string().describe("Plaintext CSS for the :hover state. optional").optional(),
+    focus: z3.string().describe("Plaintext CSS for the :focus state. optional").optional(),
+    active: z3.string().describe("Plaintext CSS for the :active state. optional").optional()
+  }).describe(
+    "Plaintext CSS per pseudo-state. All states are converted in one bulk request; unconvertible declarations are stored as custom CSS."
+  ),
   breakpoint: z3.nullable(z3.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 = {
@@ -3032,8 +3012,7 @@ var outputSchema = {
   message: z3.string().optional().describe("Error details if status is error")
 };
 var handler = async (input) => {
-  const { action, classId: rawClassId, globalClassName, props: rawProps, breakpoint } = input;
-  const propsWithStates = rawProps;
+  const { action, classId: rawClassId, globalClassName, style: rawStyle, breakpoint } = input;
   let classId = rawClassId;
   if (action === "create" && !globalClassName) {
     return {
@@ -3060,59 +3039,22 @@ var handler = async (input) => {
       message: "Required actions not available"
     };
   }
-  const errors = [];
-  const stylesSchema = getStylesSchema();
-  const validProps = Object.keys(stylesSchema);
-  Object.values(propsWithStates).forEach((props) => {
-    Object.keys(props).forEach((key) => {
-      const propType = stylesSchema[key];
-      if (!propType) {
-        errors.push(`Property "${key}" does not exist in styles schema.`);
-        return;
-      }
-      const { valid, jsonSchema } = Schema.validatePropValue(propType, props[key]);
-      if (!valid) {
-        errors.push(`- Property "${key}" has invalid value
-  Expected schema: ${jsonSchema}
-`);
-      }
-    });
-  });
-  if (action !== "delete") {
-    const hasAnyProps = Object.values(propsWithStates).some(
-      (stateProps) => Object.keys(stateProps).length > 0
+  const styleBlocks = collectNonEmptyStyleBlocks(rawStyle);
+  if (action !== "delete" && Object.keys(styleBlocks).length === 0) {
+    throw new Error(
+      'Style must not be empty. Provide plaintext CSS per state.\n\nExample: style.default = "display: flex; flex-direction: column; gap: 1rem;"'
     );
-    if (!hasAnyProps) {
-      throw new Error(
-        `Props must not be empty. Each prop must be a PropValue object from the style schema.
-
-Example: { "display": { "$$type": "string", "value": "flex" }, "flex-direction": { "$$type": "string", "value": "column" } }
-
-${STYLE_SCHEMA_FULL_URI} to get the allowed values (look at the "value" enum in the schema response), then construct { "$$type": "string", "value": "<chosen value>" } for each property.
-Available Properties: ${validProps.join(
-          ", "
-        )}`
-      );
-    }
   }
-  if (errors.length > 0) {
-    throw new Error(
-      `Validation errors:
-${errors.join("\n")}
-Available Properties: ${validProps.join(
-        ", "
-      )}
-Update your input and try again.`
+  let convertedByState = {};
+  if (action !== "delete") {
+    const conversionResults = await convertStyleBlocksToAtomic(styleBlocks);
+    convertedByState = Object.fromEntries(
+      Object.entries(conversionResults).map(([state, { props, customCss }]) => [
+        state,
+        { props, customCss: toStoredCustomCss(customCss) }
+      ])
     );
   }
-  const Utils = window.elementorV2.editorVariables.Utils;
-  Object.values(propsWithStates).forEach((props) => {
-    Object.keys(props).forEach((key) => {
-      props[key] = Schema.adjustLlmPropValueSchema(props[key], {
-        transformers: Utils.globalVariablesLLMResolvers
-      });
-    });
-  });
   const breakpointValue = breakpoint ?? "desktop";
   let result = {
     status: "error",
@@ -3131,11 +3073,12 @@ Update your input and try again.`
       throw new Error("error deleting class");
     }
     let currentAction = action;
-    for await (const [state, props] of Object.entries(propsWithStates)) {
+    for await (const [state, { props, customCss }] of Object.entries(convertedByState)) {
       switch (currentAction) {
         case "create":
           const newClassId = await attemptCreate({
             props,
+            customCss,
             className: globalClassName,
             stylesProvider: globalClassesStylesProvider,
             breakpoint: breakpointValue,
@@ -3156,6 +3099,7 @@ Update your input and try again.`
           const updated = await attemptUpdate({
             classId,
             props,
+            customCss,
             stylesProvider: globalClassesStylesProvider,
             breakpoint: breakpointValue,
             state
@@ -3184,28 +3128,25 @@ var initManageGlobalClasses = (reg) => {
     name: "manage-global-classes",
     requiredResources: [
       { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
-      { uri: STYLE_SCHEMA_FULL_URI, description: "Style schema resources" },
       { uri: BREAKPOINTS_SCHEMA_FULL_URI, description: "Breakpoints list" }
     ],
     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 applying them. Do NOT create classes for one-off styles.
 
-IMPORTANT: props must contain actual CSS property values \u2014 never pass empty objects.
-Fetch ${STYLE_SCHEMA_FULL_URI} to get the allowed values for each property, then use them to build the props object.
+IMPORTANT: style must contain plaintext CSS rules per state \u2014 never pass empty strings.
+CSS is converted server-side in one bulk request; any declaration that cannot be converted is stored as the class custom CSS.
 
 Example \u2014 creating a flex column class:
-props.default = {
-  "display": { "$$type": "string", "value": "flex" },
-  "flex-direction": { "$$type": "string", "value": "column" }
-}
+style.default = "display: flex; flex-direction: column; gap: 1rem;"
 
-The style schema returns a JSON Schema. Extract the "value" enum to pick the right value, then construct { "$$type": "string", "value": "<picked value>" }.`,
+Example \u2014 hover state:
+style.hover = "opacity: 0.85;"`,
     schema,
     outputSchema,
     handler
   });
 };
 async function attemptCreate(opts) {
-  const { props, breakpoint, className, stylesProvider, state } = opts;
+  const { props, customCss, breakpoint, className, stylesProvider, state } = opts;
   const { create, delete: deleteClass2 } = stylesProvider.actions;
   if (!className) {
     throw new Error("Global class name is a required for creation");
@@ -3219,7 +3160,7 @@ async function attemptCreate(opts) {
         breakpoint,
         state: state === "default" ? null : state
       },
-      custom_css: null,
+      custom_css: customCss,
       props
     }
   ]);
@@ -3232,7 +3173,7 @@ async function attemptCreate(opts) {
   }
 }
 async function attemptUpdate(opts) {
-  const { props, breakpoint, classId, stylesProvider, state } = opts;
+  const { props, customCss, breakpoint, classId, stylesProvider, state } = opts;
   const { updateProps, update } = stylesProvider.actions;
   if (!classId) {
     throw new Error("Class ID is required for modification");
@@ -3246,6 +3187,7 @@ async function attemptUpdate(opts) {
     updateProps({
       id: classId,
       props,
+      custom_css: customCss,
       meta: {
         breakpoint,
         state: state === "default" ? null : state
@@ -3282,6 +3224,21 @@ async function attemptDelete(opts) {
   await saveGlobalClasses2({ context: "frontend" });
   return true;
 }
+function collectNonEmptyStyleBlocks(style) {
+  const blocks = {};
+  Object.entries(style).forEach(([state, cssText]) => {
+    if (cssText?.trim()) {
+      blocks[state] = cssText.trim();
+    }
+  });
+  return blocks;
+}
+function toStoredCustomCss(customCss) {
+  if (!customCss?.trim()) {
+    return null;
+  }
+  return { raw: btoa(customCss) };
+}
 
 // src/mcp-integration/index.ts
 var initMcpIntegration = (reg, canvasMcpEntry) => {