@elementor/editor-canvas 4.2.0-930 → 4.2.0-932

package/dist/index.mjs

@@ -7,7 +7,6 @@ import { ResourceTemplate } from "@elementor/editor-mcp";
 import {
   Schema
 } from "@elementor/editor-props";
-import { getStylesSchema } from "@elementor/editor-styles";
 
 // src/composition-builder/utils/required-default-child-tags.ts
 function getRequiredDefaultChildTemplates(elementConfig) {
@@ -96,7 +95,6 @@ var CANVAS_SERVER_NAME = "editor-canvas";
 var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
 var WIDGET_SCHEMA_FULL_URI = `${CANVAS_SERVER_NAME}_${WIDGET_SCHEMA_URI}`;
 var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
-var STYLE_SCHEMA_FULL_URI = `${CANVAS_SERVER_NAME}_${STYLE_SCHEMA_URI}`;
 var BEST_PRACTICES_URI = "elementor://styles/best-practices";
 var BEST_PRACTICES_FULL_URI = `${CANVAS_SERVER_NAME}_${BEST_PRACTICES_URI}`;
 var initWidgetsSchemaResource = (reg) => {
@@ -116,8 +114,7 @@ var initWidgetsSchemaResource = (reg) => {
 Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
 This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
-When applicable for styles, apply style PropValues using the ${STYLE_SCHEMA_URI}.
-The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
+Styling is provided as raw CSS. The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
 
 ** CRITICAL - VARIABLES **
 When using global variables, ensure that the variables are defined in the ${"elementor://global-variables"} resource.
@@ -129,42 +126,6 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
       };
     }
   );
-  resource(
-    "styles-schema",
-    new ResourceTemplate(STYLE_SCHEMA_URI, {
-      list: () => {
-        const categories = [...Object.keys(getStylesSchema())].filter((category) => category !== "all");
-        return {
-          resources: categories.map((category) => ({
-            uri: `elementor://styles/schema/${category}`,
-            name: "Style schema for " + category
-          }))
-        };
-      }
-    }),
-    {
-      description: "Common styles schema for the specified category (applicable for V4 elements only)"
-    },
-    async (uri, variables) => {
-      const category = typeof variables.category === "string" ? variables.category : variables.category?.[0];
-      const stylesSchema = getStylesSchema()[category];
-      if (!stylesSchema) {
-        throw new Error(`No styles schema found for category: ${category}`);
-      }
-      const asJson = Schema.propTypeToJsonSchema(stylesSchema);
-      return {
-        contents: [
-          {
-            uri: uri.toString(),
-            mimeType: "application/json",
-            text: JSON.stringify(
-              Schema.enrichWithIntention(asJson, 'Desired CSS in format "property: value;"')
-            )
-          }
-        ]
-      };
-    }
-  );
   resource(
     "widget-schema-by-type",
     new ResourceTemplate(WIDGET_SCHEMA_URI, {
@@ -309,6 +270,23 @@ var initBreakpointsResource = (reg) => {
   });
 };
 
+// src/mcp/utils/convert-css-to-atomic.ts
+import { httpService } from "@elementor/http-client";
+var CSS_TO_ATOMIC_URL = "elementor/v1/css-to-atomic";
+var SINGLE_BLOCK_KEY = "default";
+var convertBlocks = async (blocks) => {
+  const { data } = await httpService().post(
+    CSS_TO_ATOMIC_URL,
+    { blocks }
+  );
+  return data.data;
+};
+var convertStyleBlocksToAtomic = async (styleByName) => convertBlocks(styleByName);
+var convertCssToAtomic = async (style) => {
+  const results = await convertStyleBlocksToAtomic({ [SINGLE_BLOCK_KEY]: style });
+  return results[SINGLE_BLOCK_KEY];
+};
+
 // src/init.tsx
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
 import { getMCPByDomain } from "@elementor/editor-mcp";
@@ -1345,7 +1323,7 @@ function signalizedProcess(signal, steps = []) {
 
 // src/hooks/use-style-prop-resolver.ts
 import { useMemo as useMemo3 } from "react";
-import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
+import { getStylesSchema } from "@elementor/editor-styles";
 import { enqueueFont } from "@elementor/editor-v1-adapters";
 
 // src/renderers/create-props-resolver.ts
@@ -1477,7 +1455,7 @@ function useStylePropResolver() {
   return useMemo3(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
-      schema: getStylesSchema2(),
+      schema: getStylesSchema(),
       onPropResolve: ({ key, value }) => {
         if (key !== "font-family" || typeof value !== "string") {
           return;
@@ -4579,7 +4557,7 @@ import {
   createElement as createElement13,
   deleteElement as deleteElement2,
   getContainer as getContainer5,
-  getWidgetsCache as getWidgetsCache9
+  getWidgetsCache as getWidgetsCache8
 } from "@elementor/editor-elements";
 
 // src/composition-builder/composition-builder.ts
@@ -4588,7 +4566,7 @@ import {
   deleteElement,
   generateElementId as generateElementId2,
   getContainer as getContainer4,
-  getWidgetsCache as getWidgetsCache8
+  getWidgetsCache as getWidgetsCache7
 } from "@elementor/editor-elements";
 
 // src/mcp/utils/do-update-element-property.ts
@@ -4600,7 +4578,7 @@ import {
   updateElementStyle
 } from "@elementor/editor-elements";
 import { getPropSchemaFromCache, Schema as Schema3 } from "@elementor/editor-props";
-import { getStylesSchema as getStylesSchema3, getVariantByMeta } from "@elementor/editor-styles";
+import { getStylesSchema as getStylesSchema2, getVariantByMeta } from "@elementor/editor-styles";
 import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
 
 // src/mcp/utils/merge-custom-css.ts
@@ -4637,7 +4615,7 @@ var doUpdateElementProperty = (params) => {
   if (propertyName === "_styles") {
     const elementStyles = getElementStyles(elementId) || {};
     const propertyMapValue = propertyValue;
-    const styleSchema = getStylesSchema3();
+    const styleSchema = getStylesSchema2();
     const transformedStyleValues = Object.fromEntries(
       Object.entries(propertyMapValue).map(([key, val]) => {
         if (key === "custom_css") {
@@ -4647,6 +4625,9 @@ var doUpdateElementProperty = (params) => {
         if (!propKey2 && kind !== "union") {
           throw new Error(`_styles property ${key} is not supported.`);
         }
+        if (val === null) {
+          return [key, null];
+        }
         return [key, resolvePropValue(val, propKey2)];
       })
     );
@@ -4751,91 +4732,6 @@ Expected Schema: ${jsonSchema}`
   runCommandSync2("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
-// src/mcp/utils/validate-input.ts
-import { getWidgetsCache as getWidgetsCache7 } from "@elementor/editor-elements";
-import { Schema as Schema4 } from "@elementor/editor-props";
-import { getStylesSchema as getStylesSchema4 } from "@elementor/editor-styles";
-var _widgetsSchema = null;
-var validateInput = {
-  get widgetsSchema() {
-    if (!_widgetsSchema) {
-      const schema2 = {};
-      const cache = getWidgetsCache7();
-      if (!cache) {
-        return {};
-      }
-      Object.entries(cache).forEach(([widgetType, widgetData]) => {
-        if (widgetData.atomic_props_schema) {
-          schema2[widgetType] = structuredClone(widgetData.atomic_props_schema);
-        }
-      });
-      _widgetsSchema = schema2;
-    }
-    return _widgetsSchema;
-  },
-  validateProps(schema2, values, ignore = []) {
-    if (!schema2) {
-      throw new Error("No schema provided for validation.");
-    }
-    const errors = [];
-    let hasInvalidKey = false;
-    Object.entries(values).forEach(([propName, propValue]) => {
-      if (ignore.includes(propName)) {
-        return;
-      }
-      const propSchema = schema2[propName];
-      if (!propSchema) {
-        errors.push(`Property "${propName}" is not defined in the schema.`);
-        hasInvalidKey = true;
-      } else if (!Schema4.isPropKeyConfigurable(propName, propSchema)) {
-        errors.push(`Property "${propName}" is not configurable.`);
-      } else {
-        const { valid } = Schema4.validatePropValue(propSchema, propValue);
-        if (!valid) {
-          errors.push(
-            `Invalid property "${propName}". Validate input with resource [${STYLE_SCHEMA_URI.replace(
-              "{category}",
-              propName
-            )}]`
-          );
-        }
-      }
-    });
-    if (hasInvalidKey) {
-      errors.push("Available properties: " + Object.keys(schema2).join(", "));
-    }
-    return {
-      errors,
-      valid: errors.length === 0
-    };
-  },
-  validateStyles(values) {
-    const styleSchema = getStylesSchema4();
-    const customCssValue = values.custom_css;
-    const result = this.validateProps(styleSchema, values, ["custom_css", "$intention"]);
-    const appendInvalidCustomCssErr = () => {
-      result.valid = false;
-      result.errors = result.errors || [];
-      result.errors.push('Invalid property "custom_css". Expected a string value.');
-    };
-    if (customCssValue && typeof customCssValue === "object") {
-      if (typeof customCssValue.value !== "string") {
-        appendInvalidCustomCssErr();
-      }
-    } else if (typeof customCssValue !== "string" && typeof customCssValue !== "undefined" && customCssValue !== null) {
-      appendInvalidCustomCssErr();
-    }
-    return result;
-  },
-  validatePropSchema(widgetType, values, ignore = []) {
-    const schema2 = this.widgetsSchema[widgetType];
-    if (!schema2) {
-      return { valid: false, errors: [`No schema found for widget type "${widgetType}".`] };
-    }
-    return this.validateProps(schema2, values, ignore);
-  }
-};
-
 // src/composition-builder/utils/required-children-enforcer.ts
 var REQUIRED_CHILD_SCHEMA_HINT = "Use the widget schema resource; under llm_guidance.required_direct_children for V4 widgets.";
 var RequiredChildrenEnforcer = class {
@@ -4886,7 +4782,7 @@ var CompositionBuilder = class _CompositionBuilder {
   api = {
     createElement: createElement12,
     deleteElement,
-    getWidgetsCache: getWidgetsCache8,
+    getWidgetsCache: getWidgetsCache7,
     generateElementId: generateElementId2,
     getContainer: getContainer4,
     doUpdateElementProperty
@@ -5025,19 +4921,12 @@ var CompositionBuilder = class _CompositionBuilder {
         }
       }
       const styleConfig = this.elementStylesConfig[configId];
-      let hasInvalidStyles = false;
+      const hasInvalidStyles = false;
       if (styleConfig) {
         const validStylesPropValues = {};
         for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
           if (styleName === "$intention") {
             continue;
-          }
-          const { valid, errors: validationErrors } = validateInput.validateStyles({
-            [styleName]: stylePropValue
-          });
-          if (!valid) {
-            hasInvalidStyles = true;
-            styleErrors.push(...validationErrors || []);
           } else {
             validStylesPropValues[styleName] = stylePropValue;
           }
@@ -5151,7 +5040,7 @@ var generatePrompt = () => {
 This tool support v4 elements only
 
 # WORKFLOW
-1. Check/create global classes via "create-global-class" tool
+1. Check/create global classes via "manage-global-classes" tool
 2. Build composition (THIS TOOL) - minimal inline styles
 3. Apply classes via "apply-global-class" tool
 
@@ -5169,8 +5058,9 @@ Some elements have internal tree structures (nesting). When using these elements
 - \`allowed_parents\` lists which element types this element can be placed inside
 
 # CONFIGURATION
-- Map configuration-id \u2192 elementConfig (props) + stylesConfig (layout only)
-- All PropValues require \`$$type\` matching schema
+- Map configuration-id \u2192 elementConfig (props) + style (raw CSS declarations)
+- elementConfig PropValues require \`$$type\` matching schema
+- style is raw CSS (property \u2192 value strings); the server converts it to native styles and stores any unconvertible declarations as the element custom CSS
 - NO LINKS in configuration
 - Retry on errors up to 10x
 
@@ -5256,8 +5146,7 @@ BAD: \`<e-flexbox style="height:100vh"><e-div-block style="height:100vh">overflo
 # PARAMETERS
 - **xmlStructure**: Valid XML with configuration-id attributes
 - **elementConfig**: configuration-id \u2192 widget PropValues
-- **stylesConfig**: configuration-id \u2192 style PropValues (layout only)
-- **customCSS**: configuration-id \u2192 CSS rules (no selectors, semicolon-separated)
+- **style**: configuration-id \u2192 raw CSS declarations (property \u2192 value strings; no selectors)
   `);
   buildCompositionsToolPrompt.example(`
 Section with heading + button (NO explicit heights - content sizes naturally):
@@ -5266,13 +5155,12 @@ Section with heading + button (NO explicit heights - content sizes naturally):
   elementConfig: {
     "section1": { "tag": { "$$type": "string", "value": "section" } }
   },
-  customCSS: {
-    "Section Title": "padding: 6rem 4rem; background: linear-gradient(135deg, #faf8f5 0%, #f0ebe4 100%);"
-  },
-  stylesConfig: {
+  style: {
     "Section Title": {
-      "font-size": { "$$type": "size", "value": { "size": { "$$type": "number", "value": 3.5 }, "unit": { "$$type": "string", "value": "rem" } } },
-      "color": { "$$type": "color", "value": { "$$type": "string", "value": "#2d2a26" } }
+      "padding": "6rem 4rem",
+      "background": "linear-gradient(135deg, #faf8f5 0%, #f0ebe4 100%)",
+      "font-size": "3.5rem",
+      "color": "#2d2a26"
     }
   }
 }
@@ -5284,8 +5172,8 @@ Note: No height/width specified on any element - flexbox handles layout automati
   );
   buildCompositionsToolPrompt.parameter("elementConfig", `Record mapping configuration IDs to widget PropValues.`);
   buildCompositionsToolPrompt.parameter(
-    "stylesConfig",
-    `Record mapping configuration IDs to style PropValues (layout/positioning only).`
+    "style",
+    `Record mapping configuration IDs to raw CSS declarations (property \u2192 value strings).`
   );
   buildCompositionsToolPrompt.instruction(
     `Element IDs in the returned XML represent actual widgets. Use these IDs for subsequent styling or configuration changes.`
@@ -5304,19 +5192,15 @@ var inputSchema = {
       z.any().describe(`The PropValue for the property, refer to ${WIDGET_SCHEMA_URI}`)
     )
   ).describe("A record mapping element IDs to their configuration objects. REQUIRED"),
-  stylesConfig: z.record(
+  style: z.record(
     z.string().describe("The configuration id"),
     z.record(
-      z.string().describe("StyleSchema property name"),
-      z.any().describe(`The PropValue for the style property. MANDATORY, refer to [${STYLE_SCHEMA_URI}]`)
+      z.string().describe('A CSS property name, e.g. "color", "padding".'),
+      z.string().describe('A CSS value, e.g. "6rem 4rem", "#2d2a26".')
     )
   ).describe(
-    `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
-  ).default({}),
-  customCSS: z.record(
-    z.string().describe("The configuration id"),
-    z.string().describe("The custom CSS for the element. MANDATORY")
-  ).describe("A record mapping element IDs to their custom CSS.").default({})
+    "A record mapping element configuration IDs to their raw CSS declarations (property\u2192value). Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS."
+  ).default({})
 };
 var outputSchema = {
   errors: z.string().describe("Error message if the composition building failed").optional(),
@@ -5398,7 +5282,6 @@ var initBuildCompositionsTool = (reg) => {
     requiredResources: [
       { description: "Build compositions guide", uri: BUILD_COMPOSITIONS_GUIDE_URI },
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Styles schema", uri: STYLE_SCHEMA_URI },
       { description: "Global Classes", uri: "elementor://global-classes" },
       { description: "Global Variables", uri: "elementor://global-variables" },
       { description: "Styles best practices", uri: BEST_PRACTICES_URI },
@@ -5408,9 +5291,11 @@ var initBuildCompositionsTool = (reg) => {
     outputSchema,
     handler: async (rawParams) => {
       assertCompositionXmlUsesV4WidgetsOnly(rawParams.xmlStructure);
-      const { xmlStructure, elementConfig, stylesConfig, customCSS } = adaptLeafRootParams({
+      const { stylesConfig: convertedStyles, customCSS } = await convertCompositionStyles(rawParams.style);
+      const { xmlStructure, elementConfig, stylesConfig } = adaptLeafRootParams({
         ...rawParams,
-        widgetsCache: getWidgetsCache9() ?? {}
+        stylesConfig: convertedStyles,
+        widgetsCache: getWidgetsCache8() ?? {}
       });
       let generatedXML = "";
       const errors = [];
@@ -5422,7 +5307,7 @@ var initBuildCompositionsTool = (reg) => {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement13,
           deleteElement: deleteElement2,
-          getWidgetsCache: getWidgetsCache9
+          getWidgetsCache: getWidgetsCache8
         });
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
@@ -5487,12 +5372,27 @@ Remember: Global classes ensure design consistency and reusability. Don't skip a
     }
   });
 };
+async function convertCompositionStyles(style) {
+  const stylesConfig = {};
+  const customCSS = {};
+  if (!style || Object.keys(style).length === 0) {
+    return { stylesConfig, customCSS };
+  }
+  const results = await convertStyleBlocksToAtomic(style);
+  for (const [configId, { props, customCss }] of Object.entries(results)) {
+    stylesConfig[configId] = props;
+    if (customCss) {
+      customCSS[configId] = customCss;
+    }
+  }
+  return { stylesConfig, customCSS };
+}
 function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
   const doc = new DOMParser().parseFromString(xmlStructure, "application/xml");
   if (doc.querySelector("parsererror")) {
     throw new Error("Failed to parse XML string: " + doc);
   }
-  const widgetsCache = getWidgetsCache9() ?? {};
+  const widgetsCache = getWidgetsCache8() ?? {};
   for (const node of doc.querySelectorAll("*")) {
     const type = node.tagName;
     const widgetData = widgetsCache[type];
@@ -5511,6 +5411,91 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 // src/mcp/tools/configure-element/tool.ts
 import { getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
 
+// src/mcp/utils/validate-input.ts
+import { getWidgetsCache as getWidgetsCache9 } from "@elementor/editor-elements";
+import { Schema as Schema4 } from "@elementor/editor-props";
+import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
+var _widgetsSchema = null;
+var validateInput = {
+  get widgetsSchema() {
+    if (!_widgetsSchema) {
+      const schema2 = {};
+      const cache = getWidgetsCache9();
+      if (!cache) {
+        return {};
+      }
+      Object.entries(cache).forEach(([widgetType, widgetData]) => {
+        if (widgetData.atomic_props_schema) {
+          schema2[widgetType] = structuredClone(widgetData.atomic_props_schema);
+        }
+      });
+      _widgetsSchema = schema2;
+    }
+    return _widgetsSchema;
+  },
+  validateProps(schema2, values, ignore = []) {
+    if (!schema2) {
+      throw new Error("No schema provided for validation.");
+    }
+    const errors = [];
+    let hasInvalidKey = false;
+    Object.entries(values).forEach(([propName, propValue]) => {
+      if (ignore.includes(propName)) {
+        return;
+      }
+      const propSchema = schema2[propName];
+      if (!propSchema) {
+        errors.push(`Property "${propName}" is not defined in the schema.`);
+        hasInvalidKey = true;
+      } else if (!Schema4.isPropKeyConfigurable(propName, propSchema)) {
+        errors.push(`Property "${propName}" is not configurable.`);
+      } else {
+        const { valid } = Schema4.validatePropValue(propSchema, propValue);
+        if (!valid) {
+          errors.push(
+            `Invalid property "${propName}". Validate input with resource [${STYLE_SCHEMA_URI.replace(
+              "{category}",
+              propName
+            )}]`
+          );
+        }
+      }
+    });
+    if (hasInvalidKey) {
+      errors.push("Available properties: " + Object.keys(schema2).join(", "));
+    }
+    return {
+      errors,
+      valid: errors.length === 0
+    };
+  },
+  validateStyles(values) {
+    const styleSchema = getStylesSchema3();
+    const customCssValue = values.custom_css;
+    const result = this.validateProps(styleSchema, values, ["custom_css", "$intention"]);
+    const appendInvalidCustomCssErr = () => {
+      result.valid = false;
+      result.errors = result.errors || [];
+      result.errors.push('Invalid property "custom_css". Expected a string value.');
+    };
+    if (customCssValue && typeof customCssValue === "object") {
+      if (typeof customCssValue.value !== "string") {
+        appendInvalidCustomCssErr();
+      }
+    } else if (typeof customCssValue !== "string" && typeof customCssValue !== "undefined" && customCssValue !== null) {
+      appendInvalidCustomCssErr();
+    }
+    return result;
+  },
+  validatePropSchema(widgetType, values, ignore = []) {
+    const schema2 = this.widgetsSchema[widgetType];
+    if (!schema2) {
+      return { valid: false, errors: [`No schema found for widget type "${widgetType}".`] };
+    }
+    return this.validateProps(schema2, values, ignore);
+  }
+};
+
 // src/mcp/tools/configure-element/prompt.ts
 import { toolPrompts as toolPrompts2 } from "@elementor/editor-mcp";
 var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
@@ -5520,54 +5505,43 @@ var generatePrompt2 = () => {
 Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
-1. [${WIDGET_SCHEMA_URI}]
-   Required to understand which widgets are available, and what are their configuration schemas.
-   Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply parameter values correctly.
-2. [${STYLE_SCHEMA_URI}]
-   Required to understand the styles schema for the widgets. All widgets share the same styles schema, grouped by categories.
-   Use this resource to understand which style properties are available for each element, and how to structure the "stylePropertiesToChange" parameter.
-3. If not sure about the PropValues schema, you can use the "get-element-configuration-values" tool to retrieve the current PropValues configuration of the element.
-
-Before using this tool, check the definitions of the elements PropTypes at the resource "widget-schema-by-type" at editor-canvas__elementor://widgets/schema/{widgetType}
-All widgets share a common _style property for styling, which uses the common styles schema.
-Retrieve and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
+1. [${WIDGET_SCHEMA_URI}] \u2014 **Widget properties** (\`propertiesToChange\`): each widgetType (e.g. e-heading, e-button) has its own PropType schema; values must be PropValues with \`$$type\`.
+2. [elementor://global-variables] \u2014 **Design tokens for styling**: use labels in CSS as \`var(--label)\` or \`var(--label, fallback)\`; only variables listed here are valid.
+3. **Styling** (\`style\` parameter): flat map of CSS property \u2192 value strings \u2014 **not** PropValues. The server converts to native styles; unconvertible declarations become custom CSS.
+4. **Current state**: \`get-element-configuration-values\` returns \`properties\` as PropValues and \`style\` in stored form; when writing, send raw CSS in \`style\`, not copied PropValues.
+
+Before using this tool, read the widget PropType schema at editor-canvas__elementor://widgets/schema/{widgetType}
 
 # When to use this tool
 When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
 This tool handles elements of type "widget".
-This tool handles styling elements, using the "stylePropertiesToChange" parameter.
+This tool handles styling elements, using the "style" parameter (raw CSS as a property \u2192 value map).
 
-To CLEAR a property (i.e., set it to default or none), provide null as a value.
+To CLEAR a property (i.e., set it to default or none), provide null as a value - example: \`background-color: null\`.
 
 The element's schema must be known before using this tool.
-The style schema must be known before using this tool.
-
-Attached resource link describing how PropType schema should be parsed as PropValue for this tool.
 
-Read carefully the PropType Schema of the element and it's styles, then apply correct PropValue according to the schema.
-
-PropValue structure:
+**PropValue structure (for \`propertiesToChange\` only \u2014 not for \`style\`):**
 {
     "$$type": string, // MANDATORY as defined in the PropType schema under the "key" property
     value: unknown // The value according to the PropType schema for kinds of "array", use array with PropValues items inside. For "object", read the shape property of the PropType schema. For "plain", use strings.
 }
 
 <IMPORTANT>
-ALWAYS MAKE SURE you have the PropType schemas for the element you are configuring, and the common-styles schema for styling. If you are not sure, retrieve the schema from the resources mentioned above.
+ALWAYS MAKE SURE you have the PropType schemas for the element you are configuring. If you are not sure, retrieve the schema from the resources mentioned above.
 </IMPORTANT>
 
-You can use multiple property changes at once by providing multiple entries in the propertiesToChange object, including _style alongside non-style props.
+You can use multiple property changes at once by providing multiple entries in the propertiesToChange object.
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
 
 Make sure you have the "widget-schema-by-type" resource available to retrieve the PropType schema for the element type you are configuring.
-Make sure you have the "styles-schema" resources available to retrieve the common styles schema.
 
 # How to configure elements
-We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
-For styleProperties, use the style schema provided, as it also uses the PropType format.
-For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
+We use a dedicated PropType Schema for configuring element properties (propertiesToChange). When you configure an element property, you must use the EXACT PropType Value as defined in the schema.
+For styling, use the "style" parameter with raw CSS declarations (property \u2192 value strings) - e.g. \`color: var(--primary-text, #000); height: 4rem;\`;
+For all non-primitive entries in \`propertiesToChange\`, provide the schema \`key\` as \`$$type\` in the generated object, as it is MANDATORY for parsing.
 
-Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+Use the EXACT PropType schema given, and ALWAYS include the \`key\` from the schema for every property you are changing in \`propertiesToChange\`.
 
 # Dynamic tags
 A value can be made dynamic wherever its schema exposes a variant with "$$type": "dynamic". This may be the property root OR a NESTED field: for example an image is made dynamic on its "src" (the root stays "image"), NOT on the whole "image" value.
@@ -5594,8 +5568,8 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
     "An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object."
   );
   configureElementToolPrompt.parameter(
-    "stylePropertiesToChange",
-    "An object containing the style properties to change, with their new values. OPTIONAL."
+    "style",
+    'A flat map of raw CSS declarations (property \u2192 value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. Set a value to null to reset that property to its default. OPTIONAL.'
   );
   configureElementToolPrompt.example(`
 \`\`\`json
@@ -5611,20 +5585,9 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
       value: false
     },
   },
-  stylePropertiesToChange: {
-    'line-height': {
-      $$type: 'size',
-      value: {
-        size: {
-          $$type: 'number',
-          value: 20
-        },
-        unit: {
-          $$type: 'string',
-          value: 'px'
-        }
-      }
-    }
+  style: {
+    'line-height': '1.25rem',
+    'color': 'var(--primary-text, #000)'
   },
   elementId: 'element-id',
   elementType: 'element-type'
@@ -5632,7 +5595,7 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
 \`\`\`
 `);
   configureElementToolPrompt.instruction(
-    "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
+    "The $$type property is MANDATORY for every value in propertiesToChange; it is not used in the style parameter (raw CSS only)."
   );
   configureElementToolPrompt.instruction(`
 V4 only: If MCP fails, give manual steps using V4 UI.
@@ -5653,11 +5616,14 @@ var inputSchema2 = {
     z2.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
     z2.any()
   ).describe("An object record containing property names and their new values to be set on the element"),
-  stylePropertiesToChange: z2.record(
-    z2.string().describe("The style property name"),
-    z2.any().describe(`The style PropValue, refer to [${STYLE_SCHEMA_URI}] how to generate values`),
-    z2.any()
-  ).describe("An object record containing style property names and their new values to be set on the element").default({}),
+  style: z2.record(
+    z2.string().describe('A CSS property name, e.g. "color", "margin-top".'),
+    z2.string().nullable().describe(
+      'A CSS value, e.g. "red", "10px", "1px solid #000". Use null to reset the property to its default.'
+    )
+  ).describe(
+    "Raw CSS declarations as a flat property\u2192value map. Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS. A null value resets that property to its default."
+  ).default({}),
   elementType: z2.string().describe("The type of the element to retrieve the schema"),
   elementId: z2.string().describe("The unique id of the element to configure")
 };
@@ -5689,11 +5655,10 @@ var initConfigureElementTool = (reg) => {
     outputSchema: outputSchema2,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Styles schema", uri: STYLE_SCHEMA_URI },
       { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI },
       { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
-    handler: ({ elementId, propertiesToChange, elementType, stylePropertiesToChange }) => {
+    handler: async ({ elementId, propertiesToChange, elementType, style }) => {
       const widgetData = getWidgetsCache10()?.[elementType];
       if (!widgetData) {
         throw new Error(
@@ -5707,21 +5672,12 @@ var initConfigureElementTool = (reg) => {
       }
       const toUpdate = Object.entries(propertiesToChange);
       const { valid, errors } = validateInput.validatePropSchema(elementType, propertiesToChange);
-      const { valid: stylesValid, errors: stylesErrors } = validateInput.validateStyles(
-        stylePropertiesToChange || {}
-      );
       if (!valid) {
         const errorMessage = `Failed to configure element "${elementId}" due to invalid properties: ${errors?.join(
           "\n- "
         )}`;
         throw new Error(errorMessage);
       }
-      if (!stylesValid) {
-        const errorMessage = `Failed to configure element "${elementId}" due to invalid style properties: ${stylesErrors?.join(
-          "\n- "
-        )}`;
-        throw new Error(errorMessage);
-      }
       for (const [propertyName, propertyValue] of toUpdate) {
         try {
           doUpdateElementProperty({
@@ -5741,33 +5697,46 @@ var initConfigureElementTool = (reg) => {
           throw new Error(errorMessage);
         }
       }
-      for (const [stylePropertyName, stylePropertyValue] of Object.entries(stylePropertiesToChange || {})) {
-        try {
-          doUpdateElementProperty({
-            elementId,
-            elementType,
-            propertyName: "_styles",
-            propertyValue: {
-              [stylePropertyName]: stylePropertyValue
-            }
-          });
-        } catch (error) {
-          const errorMessage = createUpdateErrorMessage({
-            propertyName: `(style) ${stylePropertyName}`,
-            elementId,
-            elementType,
-            propertyType: "style",
-            error
-          });
-          throw new Error(errorMessage);
-        }
-      }
+      await applyStyleFromCss({ elementId, elementType, style });
       return {
         success: true
       };
     }
   });
 };
+async function applyStyleFromCss(opts) {
+  const { elementId, elementType, style } = opts;
+  if (!style || Object.keys(style).length === 0) {
+    return;
+  }
+  const { props, customCss } = await convertCssToAtomic(style);
+  const styleValue = { ...props };
+  if (customCss) {
+    styleValue.custom_css = customCss;
+  }
+  if (Object.keys(styleValue).length === 0) {
+    return;
+  }
+  try {
+    doUpdateElementProperty({
+      elementId,
+      elementType,
+      propertyName: "_styles",
+      propertyValue: styleValue,
+      customCssWriteMode: "merge-with-stored"
+    });
+  } catch (error) {
+    throw new Error(
+      createUpdateErrorMessage({
+        propertyName: "(style)",
+        elementId,
+        elementType,
+        propertyType: "style",
+        error
+      })
+    );
+  }
+}
 function createUpdateErrorMessage(opts) {
   const { propertyName, elementId, elementType, error, propertyType } = opts;
   return `Failed to update property "${propertyName}" on element "${elementId}": ${error.message}.
@@ -5777,11 +5746,7 @@ Check the element's PropType schema at the resource [${WIDGET_SCHEMA_URI.replace
     elementType
   )}] for type "${elementType}" to ensure the property exists and the value matches the expected PropType.
 Now that you have this information, ensure you have the schema and try again.` : `
-Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
-    "{category}",
-    propertyName
-  )}] at editor-canvas__elementor://styles/schema/{category} to ensure the style property exists and the value matches the expected PropType.
-`};
+Provide styling as raw CSS via the "style" parameter (a flat map of CSS property \u2192 value). Declarations that cannot be converted are stored as the element custom CSS.`};
 }`;
 }
 
@@ -5915,7 +5880,6 @@ The \`$$type\` defines how Elementor interprets the value. Providing the correct
 - **Global Variables**: Reusable colors, sizes, and fonts (\`elementor://global-variables\`)
 - **Global Classes**: Reusable style sets that can be applied to elements (\`elementor://global-classes\`)
 - **Widget Schemas**: Configuration options for each widget type (\`${WIDGET_SCHEMA_URI}\`)
-- **Style Schema**: Common styles shared across all widgets and containers (\`${STYLE_SCHEMA_URI}\`)
 
 # Building Compositions with build_composition
 
@@ -5964,28 +5928,25 @@ Map each configuration-id to its widget properties using PropValues:
 }
 \`\`\`
 
-### 6. Create stylesConfig
-Map each configuration-id to style PropValues from \`${STYLE_SCHEMA_URI}\`:
-- Use global variables for colors, sizes, and fonts
-- Example using global variable:
+### 6. Create style
+Map each configuration-id to raw CSS declarations (property \u2192 value strings). The server converts them to native styles and stores any unconvertible declarations as the element custom CSS.
+- Example:
 \`\`\`json
 {
-  "heading-1": {
-    "color": { "$$type": "global-color-variable", "value": "primary-color-id" },
-    "font-size": { "$$type": "size", "value": "2rem" }
+  "heading-1": "color: #1a1a1a; font-size: 2rem;"
   }
 }
 \`\`\`
 
 ### 7. Execute build_composition
-Call the tool with your XML structure, elementConfig, and stylesConfig. The response will contain the created element IDs.
+Call the tool with your XML structure, elementConfig, and style. The response will contain the created element IDs.
 At the response you will also find llm_instructions for you to do afterwards, read and follow them!
 
 ## Key Points
 
 - **PropValue Types**: Arrays that accept union types are typed as mixed arrays
-- **Visual Sizing**: Widget sizes MUST be defined in stylesConfig. Widget properties like image "size" control resolution, not visual appearance
-- **Global Variables**: Reference by ID in PropValues (e.g., \`{ "$$type": "global-color-variable", "value": "variable-id" }\`)
+- **Visual Sizing**: Widget sizes MUST be defined via the style parameter (raw CSS). Widget properties like image "size" control resolution, not visual appearance
+- **Global Variables**: Reference by label/name: (e.g. var(--card-background-color)
 - **Naming Conventions**: Use meaningful, purpose-based names (e.g., "primary-button", "heading-large"), not value-based names (e.g., "blue-style", "20px-padding")
 
 ## Example: e-image PropValue Structure
@@ -6003,7 +5964,7 @@ At the response you will also find llm_instructions for you to do afterwards, re
   }
 }
 \`\`\`
-Note: The "size" property controls image resolution/loading, not visual size. Set visual dimensions in stylesConfig.
+Note: The "size" property controls image resolution/loading, not visual size. Set visual dimensions via the style parameter (raw CSS).
 `;
 
 // src/prevent-link-in-link-commands.ts
@@ -6547,14 +6508,14 @@ export {
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
   GLOBAL_STYLES_IMPORTED_EVENT,
-  STYLE_SCHEMA_FULL_URI,
-  STYLE_SCHEMA_URI,
   SpotlightBackdrop,
   UnknownStyleStateError,
   UnknownStyleTypeError,
   WIDGET_SCHEMA_FULL_URI,
   WIDGET_SCHEMA_URI,
   canBeNestedTemplated,
+  convertCssToAtomic,
+  convertStyleBlocksToAtomic,
   createNestedTemplatedElementType,
   createNestedTemplatedElementView,
   createPropsResolver,