@elementor/editor-canvas 3.35.0-340 → 3.35.0-342

package/dist/index.mjs

@@ -1,3 +1,163 @@
+// src/mcp/resources/breakpoints-resource.ts
+import { v1ReadyEvent } from "@elementor/editor-v1-adapters";
+var BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
+var initBreakpointsResource = (reg) => {
+  const { mcpServer } = reg;
+  const getBreakpointsList = () => {
+    const { breakpoints } = window.elementor?.config?.responsive || {};
+    if (!breakpoints) {
+      return [];
+    }
+    return Object.values(breakpoints).filter((bp) => bp.is_enabled).map((bp) => {
+      const { direction: constraint, label, value } = bp;
+      return {
+        label,
+        constraint,
+        value
+      };
+    });
+  };
+  const buildResourceResponse = () => ({
+    contents: [
+      {
+        uri: BREAKPOINTS_SCHEMA_URI,
+        mimeType: "application/json",
+        text: JSON.stringify(getBreakpointsList())
+      }
+    ]
+  });
+  mcpServer.resource("breakpoints ", BREAKPOINTS_SCHEMA_URI, () => {
+    return buildResourceResponse();
+  });
+  window.addEventListener(v1ReadyEvent().name, () => {
+    mcpServer.server.sendResourceUpdated({
+      uri: BREAKPOINTS_SCHEMA_URI,
+      ...buildResourceResponse()
+    });
+  });
+};
+
+// src/mcp/resources/widgets-schema-resource.ts
+import { getWidgetsCache } from "@elementor/editor-elements";
+import { ResourceTemplate } from "@elementor/editor-mcp";
+import {
+  Schema
+} from "@elementor/editor-props";
+import { getStylesSchema } from "@elementor/editor-styles";
+var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
+var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
+var BEST_PRACTICES_URI = "elementor://styles/best-practices";
+var initWidgetsSchemaResource = (reg) => {
+  const { mcpServer } = reg;
+  mcpServer.resource("styles-best-practices", BEST_PRACTICES_URI, async () => {
+    return {
+      contents: [
+        {
+          uri: BEST_PRACTICES_URI,
+          text: `# Styling best practices
+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, or in custom_css, depends on your needs.
+
+When applicable for styles, apply style PropValues using the ${STYLE_SCHEMA_URI}. Custom css is for Elementor PRO users and intended to support only new CSS features not yet available in the UI.
+The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
+        }
+      ]
+    };
+  });
+  mcpServer.resource(
+    "styles-schema",
+    new ResourceTemplate(STYLE_SCHEMA_URI, {
+      list: () => {
+        const categories = [...Object.keys(getStylesSchema()), "custom_css"];
+        return {
+          resources: categories.map((category) => ({
+            uri: `elementor://styles/schema/${category}`,
+            name: "Style schema for " + category
+          }))
+        };
+      }
+    }),
+    {
+      description: "Common styles schema for the specified category"
+    },
+    async (uri, variables) => {
+      const category = typeof variables.category === "string" ? variables.category : variables.category?.[0];
+      if (category === "custom_css") {
+        return {
+          contents: [
+            {
+              uri: uri.toString(),
+              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted. Use this as a last resort for properties that are not covered with the schema. Do not use selectors, only the CSS content"
+            }
+          ]
+        };
+      }
+      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(asJson)
+          }
+        ]
+      };
+    }
+  );
+  mcpServer.resource(
+    "widget-schema-by-type",
+    new ResourceTemplate(WIDGET_SCHEMA_URI, {
+      list: () => {
+        const cache = getWidgetsCache() || {};
+        const availableWidgets = Object.keys(cache || {}).filter(
+          (widgetType) => cache[widgetType]?.atomic_props_schema
+        );
+        return {
+          resources: availableWidgets.map((widgetType) => ({
+            uri: `elementor://widgets/schema/${widgetType}`,
+            name: "Widget schema for " + widgetType
+          }))
+        };
+      }
+    }),
+    {
+      description: "PropType schema for the specified widget type"
+    },
+    async (uri, variables) => {
+      const widgetType = typeof variables.widgetType === "string" ? variables.widgetType : variables.widgetType?.[0];
+      const propSchema = getWidgetsCache()?.[widgetType]?.atomic_props_schema;
+      if (!propSchema) {
+        throw new Error(`No prop schema found for element type: ${widgetType}`);
+      }
+      const asJson = Object.fromEntries(
+        Object.entries(propSchema).map(([key, propType]) => [
+          key,
+          Schema.propTypeToJsonSchema(propType)
+        ])
+      );
+      Schema.nonConfigurablePropKeys.forEach((key) => {
+        delete asJson[key];
+      });
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            mimeType: "application/json",
+            text: JSON.stringify({
+              type: "object",
+              properties: asJson
+            })
+          }
+        ]
+      };
+    }
+  );
+};
+
 // src/init.tsx
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
 import { init as initInteractionsRepository } from "@elementor/editor-interactions";
@@ -533,7 +693,7 @@ function signalizedProcess(signal, steps = []) {
 
 // src/hooks/use-style-prop-resolver.ts
 import { useMemo as useMemo3 } from "react";
-import { getStylesSchema } from "@elementor/editor-styles";
+import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
 
 // src/renderers/create-props-resolver.ts
 import {
@@ -664,7 +824,7 @@ function useStylePropResolver() {
   return useMemo3(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
-      schema: getStylesSchema(),
+      schema: getStylesSchema2(),
       onPropResolve: ({ key, value }) => {
         if (key !== "font-family" || typeof value !== "string") {
           return;
@@ -1330,8 +1490,8 @@ function initStyleTransformers() {
 }
 
 // src/legacy/init-legacy-views.ts
-import { getWidgetsCache } from "@elementor/editor-elements";
-import { __privateListenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { __privateListenTo, v1ReadyEvent as v1ReadyEvent2 } from "@elementor/editor-v1-adapters";
 
 // src/renderers/create-dom-renderer.ts
 import { createArrayLoader, createEnvironment } from "@elementor/twing";
@@ -1558,8 +1718,8 @@ function registerElementType(type, elementTypeGenerator) {
   elementsLegacyTypes[type] = elementTypeGenerator;
 }
 function initLegacyViews() {
-  __privateListenTo(v1ReadyEvent(), () => {
-    const config = getWidgetsCache() ?? {};
+  __privateListenTo(v1ReadyEvent2(), () => {
+    const config = getWidgetsCache2() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
@@ -1579,174 +1739,13 @@ function initLegacyViews() {
   });
 }
 
-// src/mcp/resources/widgets-schema-resource.ts
-import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
-import { ResourceTemplate } from "@elementor/editor-mcp";
-import {
-  Schema
-} from "@elementor/editor-props";
-import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
-var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
-var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
-var BEST_PRACTICES_URI = "elementor://styles/best-practices";
-var initWidgetsSchemaResource = (reg) => {
-  const { mcpServer } = reg;
-  mcpServer.resource("styles-best-practices", BEST_PRACTICES_URI, async () => {
-    return {
-      contents: [
-        {
-          uri: BEST_PRACTICES_URI,
-          text: `# Styling best practices
-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, or in custom_css, depends on your needs.
-
-When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
-The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
-        }
-      ]
-    };
-  });
-  mcpServer.resource(
-    "styles-schema",
-    new ResourceTemplate(STYLE_SCHEMA_URI, {
-      list: () => {
-        const categories = [...Object.keys(getStylesSchema2()), "custom_css"];
-        return {
-          resources: categories.map((category) => ({
-            uri: `elementor://styles/schema/${category}`,
-            name: "Style schema for " + category
-          }))
-        };
-      }
-    }),
-    {
-      description: "Common styles schema for the specified category"
-    },
-    async (uri, variables) => {
-      const category = typeof variables.category === "string" ? variables.category : variables.category?.[0];
-      if (category === "custom_css") {
-        return {
-          contents: [
-            {
-              uri: uri.toString(),
-              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted. Use this as a last resort for properties that are not covered with the schema."
-            }
-          ]
-        };
-      }
-      const stylesSchema = getStylesSchema2()[category];
-      if (!stylesSchema) {
-        throw new Error(`No styles schema found for category: ${category}`);
-      }
-      const cleanedupPropSchema = cleanupPropType(stylesSchema);
-      const asJson = Schema.propTypeToJsonSchema(cleanedupPropSchema);
-      return {
-        contents: [
-          {
-            uri: uri.toString(),
-            text: JSON.stringify(asJson)
-          }
-        ]
-      };
-    }
-  );
-  mcpServer.resource(
-    "widget-schema-by-type",
-    new ResourceTemplate(WIDGET_SCHEMA_URI, {
-      list: () => {
-        const cache = getWidgetsCache2() || {};
-        const availableWidgets = Object.keys(cache || {}).filter(
-          (widgetType) => cache[widgetType]?.atomic_props_schema
-        );
-        return {
-          resources: availableWidgets.map((widgetType) => ({
-            uri: `elementor://widgets/schema/${widgetType}`,
-            name: "Widget schema for " + widgetType
-          }))
-        };
-      }
-    }),
-    {
-      description: "PropType schema for the specified widget type"
-    },
-    async (uri, variables) => {
-      const widgetType = typeof variables.widgetType === "string" ? variables.widgetType : variables.widgetType?.[0];
-      const propSchema = getWidgetsCache2()?.[widgetType]?.atomic_props_schema;
-      if (!propSchema) {
-        throw new Error(`No prop schema found for element type: ${widgetType}`);
-      }
-      const cleanedupPropSchema = cleanupPropSchema(propSchema);
-      const asJson = Object.fromEntries(
-        Object.entries(cleanedupPropSchema).map(([key, propType]) => [
-          key,
-          Schema.propTypeToJsonSchema(propType)
-        ])
-      );
-      Schema.nonConfigurablePropKeys.forEach((key) => {
-        delete asJson[key];
-      });
-      return {
-        contents: [
-          {
-            uri: uri.toString(),
-            text: JSON.stringify(asJson)
-          }
-        ]
-      };
-    }
-  );
-};
-function cleanupPropSchema(propSchema) {
-  const result = {};
-  Object.keys(propSchema).forEach((propName) => {
-    result[propName] = cleanupPropType(propSchema[propName]);
-  });
-  return result;
-}
-function cleanupPropType(propType) {
-  const result = {};
-  Object.keys(propType).forEach((property) => {
-    switch (property) {
-      case "key":
-      case "kind":
-        result[property] = propType[property];
-        break;
-      case "meta":
-      case "settings":
-        {
-          if (Object.keys(propType[property] || {}).length > 0) {
-            result[property] = propType[property];
-          }
-        }
-        break;
-    }
-  });
-  if (result.kind === "plain") {
-    Object.defineProperty(result, "kind", { value: "string" });
-  } else if (result.kind === "array") {
-    result.item_prop_type = cleanupPropType(propType.item_prop_type);
-  } else if (result.kind === "object") {
-    const shape = propType.shape;
-    const cleanedShape = cleanupPropSchema(shape);
-    result.shape = cleanedShape;
-  } else if (result.kind === "union") {
-    const propTypes = propType.prop_types;
-    const cleanedPropTypes = {};
-    Object.keys(propTypes).forEach((key) => {
-      cleanedPropTypes[key] = cleanupPropType(propTypes[key]);
-    });
-    result.prop_types = cleanedPropTypes;
-  }
-  return result;
-}
-
 // src/mcp/tools/build-composition/tool.ts
 import {
   createElement as createElement6,
   deleteElement,
   generateElementId,
   getContainer as getContainer3,
-  getWidgetsCache as getWidgetsCache4
+  getWidgetsCache as getWidgetsCache5
 } from "@elementor/editor-elements";
 
 // src/mcp/utils/do-update-element-property.ts
@@ -1757,14 +1756,10 @@ import {
   updateElementSettings as updateElementSettings2,
   updateElementStyle
 } from "@elementor/editor-elements";
-import {
-  getPropSchemaFromCache,
-  Schema as Schema2,
-  stringPropTypeUtil
-} from "@elementor/editor-props";
+import { getPropSchemaFromCache, Schema as Schema2 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
 function resolvePropValue(value, forceKey) {
-  return Schema2.adjustLlmPropValueSchema(value, forceKey);
+  return Schema2.adjustLlmPropValueSchema(value, { forceKey });
 }
 var doUpdateElementProperty = (params) => {
   const { elementId, propertyName, propertyValue, elementType } = params;
@@ -1777,11 +1772,11 @@ var doUpdateElementProperty = (params) => {
         if (key === "custom_css") {
           return [key, val];
         }
-        const { key: propKey, kind } = styleSchema?.[key] || {};
-        if (!propKey && kind !== "union") {
+        const { key: propKey2, kind } = styleSchema?.[key] || {};
+        if (!propKey2 && kind !== "union") {
           throw new Error(`_styles property ${key} is not supported.`);
         }
-        return [key, resolvePropValue(val, propKey)];
+        return [key, resolvePropValue(val, propKey2)];
       })
     );
     let customCss;
@@ -1789,8 +1784,11 @@ var doUpdateElementProperty = (params) => {
       const propertyRawSchema = styleSchema[stylePropName];
       if (stylePropName === "custom_css") {
         let customCssValue = propertyMapValue[stylePropName];
-        if (typeof customCssValue === "object") {
-          customCssValue = stringPropTypeUtil.extract(customCssValue) || customCssValue?.value || "";
+        if (typeof customCssValue === "object" && customCssValue && customCssValue.value) {
+          customCssValue = String(customCssValue.value);
+        }
+        if (!customCssValue) {
+          customCssValue = "";
         }
         customCss = {
           raw: btoa(customCssValue)
@@ -1799,7 +1797,7 @@ var doUpdateElementProperty = (params) => {
       }
       const isSupported = !!propertyRawSchema;
       if (!isSupported) {
-        throw new Error(`_styles property ${stylePropName} is not supported.`);
+        throw new Error(`Style property ${stylePropName} is not supported.`);
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
@@ -1811,6 +1809,7 @@ var doUpdateElementProperty = (params) => {
         }
       }
     });
+    delete transformedStyleValues.custom_css;
     const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
     if (!localStyle) {
       createElementStyle({
@@ -1854,7 +1853,8 @@ var doUpdateElementProperty = (params) => {
       )}`
     );
   }
-  const value = resolvePropValue(propertyValue);
+  const propKey = elementPropSchema[propertyName].key;
+  const value = resolvePropValue(propertyValue, propKey);
   updateElementSettings2({
     id: elementId,
     props: {
@@ -1864,17 +1864,91 @@ var doUpdateElementProperty = (params) => {
   });
 };
 
+// src/mcp/utils/validate-input.ts
+import { getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
+import { Schema as Schema3 } 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 = getWidgetsCache4();
+      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 (!Schema3.isPropKeyConfigurable(propName)) {
+        errors.push(`Property "${propName}" is not configurable.`);
+      } else {
+        const { valid, errorMessages } = Schema3.validatePropValue(propSchema, propValue);
+        if (!valid) {
+          errors.push(`Invalid property "${propName}": ${errorMessages}`);
+        }
+      }
+    });
+    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"]);
+    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/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = toolPrompts("build-compositions");
   buildCompositionsToolPrompt.description(`
-Build entire elementor widget comositions representing complex structures of nested elements.
-
-# When to use this tool
-Always prefer this tool when the user requires to build a composition of elements, such as cards, heros, or inspired from other pages or HTML compositions.
-Prefer this tool over any other tool for building HTML structure, unless you are specified to use a different tool.
-
 # **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
    Required to understand which widgets are available, and what are their configuration schemas.
@@ -1883,6 +1957,16 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    Required to understand the styles schema for the widgets. All widgets share the same styles schema.
 3. List of allowed custom tags for building the structure is derived from the list of widgets schema resources.
 
+# DESIGN QUALITY IMPERATIVE
+You are generating designs for real users who expect distinctive, intentional aesthetics - NOT generic AI output.
+**The Core Challenge**: Large language models naturally converge toward statistically common design patterns during generation. This creates predictable, uninspired results that users describe as "AI slop": safe color schemes, default typography hierarchies, minimal contrast, and timid spacing.
+**Your Mission**: Actively resist distributional convergence by making intentional, distinctive design choices across all aesthetic dimensions. Every design decision should have a clear purpose tied to visual hierarchy, brand personality, or user experience goals.
+When in doubt between "safe" and "distinctive," choose distinctive - users can always request refinements, but they cannot salvage generic foundations.
+
+# When to use this tool
+Always prefer this tool when the user requires to build a composition of elements, such as cards, heros, or inspired from other pages or HTML compositions.
+Prefer this tool over any other tool for building HTML structure, unless you are specified to use a different tool.
+
 # Instructions
 1. Understand the user requirements carefully.
 2. Build a valid XML structure using only the allowed custom tags provided. For example, if you
@@ -1899,20 +1983,185 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    Layout properties, such as margin, padding, align, etc. must be applied using the [${STYLE_SCHEMA_URI}] PropValues.
 7. Some elements allow nesting of other elements, and most of the DO NOT. The allowed elements that can have nested children are "e-div-block" and "e-flexbox".
 8. Make sure that non-container elements do NOT have any nested elements.
-9. Unsless the user specifically requires structure only, BE EXPRESSIVE AND VISUALLY CREATIVE AS POSSIBLE IN APPLYING STYLE CONFIGURATION.
-   In the case of doubt, prefer adding more styles to make the composition visually appealing.
-
-# Additional Guidelines
-- Most users expect the structure to be well designed and visually appealing.
-- Use layout properties, ensure "white space" design approach is followed, and make sure the composition is visually balanced.
-- Use appropriate spacing, alignment, and sizing to create a harmonious layout.
-- Consider the visual hierarchy of elements to guide the user's attention effectively.
-- You are encouraged to use colors, typography, and other style properties to enhance the visual appeal, as long as they are part of the configuration schema for the elements used.
-- Always aim for a clean and professional look that aligns with modern design principles.
-- When you are required to create placeholder texts, use texts that have a length that fits the goal. When long texts are required, use longer placeholder texts. When the user specifies exact texts, use the exact texts.
-- Image size does not affect the actual size on the screen, only which quality to use. If you use images, specifically add _styles PropValues to define the image sizes.
-- Attempt to use layout, margin, padding, size properties from the styles schema.
-- If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
+9. **CRITICAL - CUSTOM CSS PRIORITY**: Prefer using style schema. Custom CSS is ONLY FOR UNSUPPRTED schema styles.
+   ALWAYS PRIORITIZE using the style schema PropValues for styling elements as they provide better user experience in the editor, and UI features for the end-users.
+   - Use custom_css only for style attributes that ARE NOT SUPPORTED via the style schema.
+
+# DESIGN VECTORS - Concrete Implementation Guidance
+
+## 1. Typography & Visual Hierarchy
+
+**Avoid Distributional Defaults:**
+- NO generic sans-serifs as primary typefaces (Inter, Roboto, Arial, Helvetica)
+- NO timid size ratios (1.2x, 1.5x scaling)
+- NO uniform font weights (everything at 400 or 600)
+
+**Intentional Alternatives:**
+- **For Technical/Modern**: Consider monospace headlines (JetBrains Mono, SF Mono) paired with clean body text
+- **For Editorial/Elegant**: Consider serif headlines (Playfair Display, Crimson Text) with sans-serif body
+- **For Playful/Creative**: Consider display fonts with character, paired with highly legible body text
+
+**Scale & Contrast Implementation:**
+- Headline-to-body size ratios: 3x minimum (e.g., 48px headline vs 16px body)
+- Use extreme weight contrasts: pair weight-100 or 200 with weight-800 or 900
+- Line height contrasts: tight headlines (1.1) vs. generous body (1.7)
+- Letter spacing: compressed headlines (-0.02em to -0.05em) vs. open small text (0.03em+)
+
+**Hierarchy Mapping:**
+/* Intentional hierarchy example */
+H1: font-size: 3.5rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em;
+H2: font-size: 2rem; font-weight: 200; line-height: 1.2;
+Body: font-size: 1rem; font-weight: 400; line-height: 1.7;
+Caption: font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
+
+## 2. Color & Theme Strategy
+
+**Avoid Distributional Defaults:**
+- NO purple gradients or blue-purple color schemes (massively overrepresented in AI output)
+- NO evenly-distributed color palettes (3-4 colors used equally)
+- NO timid pastels or all-neutral schemes
+- NO #333333, #666666, #999999 grays
+
+**Intentional Alternatives:**
+- **Commit to a Dominant Color**: Choose ONE primary brand color that appears in 60-70% of colored elements
+- **Sharp Accent Strategy**: Use 1-2 high-contrast accent colors sparingly (10-15% of colored elements)
+- **Neutrals with Personality**: Replace pure grays with warm (#3d3228, #f5f1ed) or cool (#2a2f3d, #f0f2f5) tinted neutrals
+
+**Color Psychology Mapping:**
+- Energy/Action \u2192 Warm reds, oranges, yellows (NOT purple/blue)
+- Trust/Calm \u2192 Deep teals, forest greens (NOT generic blue)
+- Luxury/Premium \u2192 Deep burgundy, emerald, charcoal with gold accents
+- Playful/Creative \u2192 Unexpected combinations (coral + mint, mustard + navy)
+
+**Implementation:**
+/* Intentional color system example */
+--brand-primary: #d84315;        /* Dominant: Deep orange */
+--brand-accent: #00bfa5;         /* Accent: Teal (complementary) */
+--neutral-dark: #2d2622;         /* Warm dark brown, not #333 */
+--neutral-light: #faf8f6;        /* Warm off-white, not pure white */
+--background: linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); /* Subtle warmth */
+
+## 3. Spatial Design & White Space
+
+**Avoid Distributional Defaults:**
+- NO uniform spacing (everything 16px or 24px)
+- NO cramped layouts that maximize content density
+- NO default container widths (1200px, 1440px)
+
+**Intentional Alternatives:**
+- **Breathing Room**: Use generous white space as a design element (80-120px vertical spacing between sections)
+- **Asymmetric Spacing**: Vary padding dramatically (small: 12px, medium: 48px, large: 96px)
+- **Content Width Strategy**:
+  - Reading content: max 65-75 characters (600-700px)
+  - Hero sections: asymmetric layouts, not centered blocks
+  - Cards/components: vary sizes intentionally, not uniform grids
+
+**Implementation:**
+/* Intentional spacing scale */
+--space-xs: 0.5rem;   /* 8px */
+--space-sm: 1rem;     /* 16px */
+--space-md: 3rem;     /* 48px */
+--space-lg: 6rem;     /* 96px */
+--space-xl: 10rem;    /* 160px */
+
+/* Use in combinations: */
+padding: var(--space-lg) var(--space-md);  /* Not uniform padding */
+margin-bottom: var(--space-xl);            /* Generous section breaks */
+
+## 4. Backgrounds & Atmospheric Depth
+
+**Avoid Distributional Defaults:**
+- NO solid white or light gray backgrounds
+- NO single-color backgrounds
+- NO generic gradient overlays
+
+**Intentional Alternatives:**
+- **Layered Gradients**: Combine 2-3 subtle gradients for depth
+- **Geometric Patterns**: SVG patterns, mesh gradients, or subtle noise textures
+- **Strategic Contrast**: Alternate between light and dark sections for rhythm
+
+**Implementation:**
+/* Intentional background example */
+background:
+  radial-gradient(circle at 20% 30%, rgba(216, 67, 21, 0.08) 0%, transparent 50%),
+  radial-gradient(circle at 80% 70%, rgba(0, 191, 165, 0.06) 0%, transparent 50%),
+  linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%);
+
+## 5. Visual Hierarchy Principles
+
+**Clear Priority System:**
+1. **Primary Focus (1 element)**: Largest, highest contrast, most visual weight
+2. **Secondary Elements (2-3 elements)**: 40-60% of primary size, reduced contrast
+3. **Tertiary/Support (everything else)**: Minimal visual weight, muted colors
+
+**Contrast Techniques:**
+- Size: 3x+ differences between hierarchy levels
+- Weight: 300+ difference in font-weight values
+- Color: Primary gets brand color, secondary gets neutral, tertiary gets muted
+- Space: Primary gets 2x+ surrounding white space vs. secondary
+
+## 6. EXAMPLES - Intentional vs. Generic Design
+
+### \u274C GENERIC (Distributional Convergence)
+
+{
+  "xmlStructure": "<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading1"></e-heading><e-button configuration-id="button1"></e-button></e-flexbox>",
+  "elementConfig": {
+    "heading1": {
+      "title": { "$$type": "string", "value": "Welcome to Our Site" }
+    }
+  },
+  "stylesConfig": {
+    "heading1": {
+      "font-size": {
+        "$$type": "size",
+        "value": {
+          "size": { "$$type": "number", "value": 24 },
+          "unit": { "$$type": "string", "value": "px" }
+        }
+      },
+    },
+    "button1": {
+      "custom_css": "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 12px 24px;"
+    }
+  }
+}
+
+**Why Generic**: 24px default size, #333 safe gray, 600 weight (middle-ground), purple gradient (AI clich\xE9), uniform 12/24px padding
+
+### \u2705 INTENTIONAL (Resisting Convergence)
+{
+  "xmlStructure": "<e-flexbox configuration-id="hero-section"><e-heading configuration-id="hero-title"></e-heading><e-text configuration-id="hero-subtitle"></e-text><e-button configuration-id="hero-cta"></e-button></e-flexbox>",
+  "elementConfig": {
+    "hero-title": {
+      "title": { "$$type": "string", "value": "Transform Your Workflow" }
+    },
+    "hero-subtitle": {
+      "content": { "$$type": "string", "value": "Built for teams who refuse to compromise on quality" }
+    }
+  },
+  "stylesConfig": {
+    "hero-section": {
+      "custom_css": "display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; background: radial-gradient(circle at 30% 20%, rgba(216, 67, 21, 0.1) 0%, transparent 60%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); padding: 10rem 3rem;"
+    },
+    "hero-title": {
+      "custom_css": "font-size: 4.5rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: #2d2622; max-width: 700px;"
+    },
+    "hero-subtitle": {
+      "custom_css": "font-size: 1.25rem; font-weight: 200; line-height: 1.7; letter-spacing: 0.01em; color: #5a534d; max-width: 600px;"
+    },
+    "hero-cta": {
+      "custom_css": "background: #d84315; color: #ffffff; padding: 1.25rem 3rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px; box-shadow: 0 4px 16px rgba(216, 67, 21, 0.25); transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;"
+    }
+  }
+}
+
+
+**Why Intentional**:
+- Typography: 4.5rem headline (3.6x body), weight 900 vs 200 contrast, tight leading
+- Color: Warm orange primary (#d84315), warm neutrals (#2d2622, #5a534d) NOT #333/#666
+- Spacing: 10rem vertical padding (generous), 3rem gap, asymmetric alignment
+- Background: Layered gradients with subtle brand color accent
 
 # CONSTRAINTS
 When a tool execution fails, retry up to 10 more times, read the error message carefully, and adjust the XML structure or the configurations accordingly.
@@ -1923,6 +2172,28 @@ NO LINKS ALLOWED. Never apply links to elements, even if they appear in the Prop
 elementConfig values must align with the widget's PropType schema, available at the resource [${WIDGET_SCHEMA_URI}].
 stylesConfig values must align with the common styles PropType schema, available at the resource [${STYLE_SCHEMA_URI}].
 
+# DESIGN QUALITY CONSTRAINTS
+
+**Typography Constraints:**
+- NEVER use Inter, Roboto, Arial, or Helvetica as primary display fonts
+- NEVER use font-size ratios smaller than 2.5x between headlines and body
+- NEVER use font-weight values between 500-700 for headlines (go lighter or heavier)
+
+**Color Constraints:**
+- NEVER use purple gradients or blue-purple color schemes
+- NEVER use pure grays (#333, #666, #999) - use tinted neutrals instead
+- NEVER distribute colors evenly - commit to ONE dominant color
+- NEVER use more than 3 core colors (1 dominant, 1-2 accents)
+
+**Spacing Constraints:**
+- NEVER use uniform spacing across all elements
+- NEVER use section padding less than 4rem (64px) for hero/major sections
+- NEVER center everything - use asymmetric layouts for visual interest
+
+**Background Constraints:**
+- NEVER use solid white (#ffffff) or light gray (#f5f5f5) backgrounds without texture/gradients
+- ALWAYS layer at least 2 gradient or color elements for atmospheric depth
+
 # Parameters
 All parameters are MANDATORY.
 - xmlStructure
@@ -1931,6 +2202,14 @@ All parameters are MANDATORY.
 
 If unsure about the configuration of a specific property, read the schema resources carefully.
 
+# About our widgets
+Most widgets are self-explanatory by their name. Here is some additional information.
+SVG elements are bound to internal content upload. Avoid usage, unless you have tools to upload SVG content.
+e-div-block - By default is ceneterd aligned and vertically stacked. To modify this, apply style configuration.
+e-flexbox - By default is a flex container with row direction. To modify this, apply style configuration.
+
+When working with containers, do not forget to apply style schema for controlling the layout.
+
 
   `);
   buildCompositionsToolPrompt.example(`
@@ -1945,6 +2224,9 @@ A Heading and a button inside a flexbox
       },
   },
   stylesConfig: {
+    "flex1": {
+      "custom_css": "background: radial-gradient(circle at 20% 30%, rgba(216, 67, 21, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 191, 165, 0.06) 0%, transparent 50%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); display: flex; flex-direction: column; align-items: center; padding: 80px 32px; gap: 48px;"
+    },
     "heading1": {
       "font-size": {
         "$$type": "size",
@@ -1989,13 +2271,16 @@ var inputSchema = {
   xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
   elementConfig: z.record(
     z.string().describe("The configuration id"),
-    z.record(z.string().describe("property name"), z.any().describe("The PropValue for the property"))
+    z.record(
+      z.string().describe("property name"),
+      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(
     z.string().describe("The configuration id"),
     z.record(
-      z.string().describe("_styles property name"),
-      z.any().describe("The PropValue for the style property. MANDATORY")
+      z.string().describe("StyleSchema property name"),
+      z.any().describe(`The PropValue for the style property. MANDATORY, refer to [${STYLE_SCHEMA_URI}]`)
     )
   ).describe(
     `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
@@ -2014,6 +2299,13 @@ var initBuildCompositionsTool = (reg) => {
     name: "build-compositions",
     description: generatePrompt(),
     schema: inputSchema,
+    requiredResources: [
+      { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
+      { description: "Global Classes", uri: "elementor://global-classes" },
+      { description: "Styles schema", uri: STYLE_SCHEMA_URI },
+      { description: "Global Variables", uri: "elementor://global-variables" },
+      { description: "Styles best practices", uri: BEST_PRACTICES_URI }
+    ],
     outputSchema,
     handler: async (params) => {
       let xml = null;
@@ -2021,7 +2313,7 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const softErrors = [];
       const rootContainers = [];
-      const widgetsCache = getWidgetsCache4() || {};
+      const widgetsCache = getWidgetsCache5() || {};
       const documentContainer = getContainer3("document");
       try {
         const parser = new DOMParser();
@@ -2061,22 +2353,23 @@ var initBuildCompositionsTool = (reg) => {
           try {
             const configObject = elementConfig[configId] || {};
             const styleObject = stylesConfig[configId] || {};
-            configObject._styles = styleObject;
+            const { errors: propsValidationErrors } = validateInput.validatePropSchema(
+              elementTag,
+              configObject
+            );
+            errors.push(...(propsValidationErrors || []).map((msg) => new Error(msg)));
+            const { errors: stylesValidationErrors } = validateInput.validateStyles(styleObject);
+            errors.push(...(stylesValidationErrors || []).map((msg) => new Error(msg)));
+            if (propsValidationErrors?.length || stylesValidationErrors?.length) {
+              return;
+            }
+            configObject._styles = styleObject || {};
             for (const [propertyName, propertyValue] of Object.entries(configObject)) {
-              const widgetSchema = widgetsCache[elementTag];
-              if (!widgetSchema?.atomic_props_schema?.[propertyName] && propertyName !== "_styles" && propertyName !== "custom_css") {
-                softErrors.push(
-                  new Error(
-                    `Property "${propertyName}" does not exist on element type "${elementTag}".`
-                  )
-                );
-                continue;
-              }
               try {
                 doUpdateElementProperty({
                   elementId: newElement.id,
                   propertyName,
-                  propertyValue: propertyName === "custom_css" ? { _styles: propertyValue } : propertyValue,
+                  propertyValue,
                   elementType: elementTag
                 });
               } catch (error) {
@@ -2111,14 +2404,12 @@ var initBuildCompositionsTool = (reg) => {
             options: { useHistory: false }
           });
         });
-      }
-      if (errors.length > 0) {
         const errorText = `Failed to build composition with the following errors:
 
 
 ${errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n")}
 "Missing $$type" errors indicate that the configuration objects are invalid. Try again and apply **ALL** object entries with correct $$type.
-Now that you have these errors, fix them and try again. Errors regarding configuration objects, please check again the PropType schemas`;
+Now that you have these errors, fix them and try again. Errors regarding configuration objects, please check against the PropType schemas`;
         throw new Error(errorText);
       }
       if (!xml) {
@@ -2146,10 +2437,10 @@ var configureElementToolPrompt = `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 property values correctly.
+   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 "_styles" configuration property.
+   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 retreive 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}
@@ -2157,16 +2448,18 @@ All widgets share a common _style property for styling, which uses the common st
 Retreive and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
 # Parameters
-- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY
+- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object.
+- stylePropertiesToChange: An object containing the style properties to change, with their new values. OPTIONAL
 - elementId: The ID of the element to configure. MANDATORY
 - elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
 
 # 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 _styles property in the configuration.
+This tool handles styling elements, using the "stylePropertiesToChange" parameter.
 
 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.
 
@@ -2184,13 +2477,13 @@ ALWAYS MAKE SURE you have the PropType schemas for the element you are configuri
 
 You can use multiple property changes at once by providing multiple entries in the propertiesToChange object, including _style alongside non-style props.
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
-Nested properties, such as for the _styles, should include a "_styles" property with object containing the definitions to change.
 
 Make sure you have the "widget-schema-by-type" resource available to retreive the PropType schema for the element type you are configuring.
+Make sure you have to "styles-schema" resources available to retreive 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 _styles, use the style schema provided, as it also uses the PropType format.
+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 objecct, 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.
@@ -2208,23 +2501,24 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
       $$type: 'boolean',
       value: false
     },
-    _styles: {
-      // List of available keys available at the [${STYLE_SCHEMA_URI}] dynamic resource
-      'line-height': {
-        $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
-        value: {
-          size: {
-            $$type: 'number',
-            value: 20
-          },
-          unit: {
-            $$type: 'string',
-            value: 'px'
-          }
+  },
+  stylePropertiesToChange: {
+    'line-height': {
+      $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+      value: {
+        size: {
+          $$type: 'number',
+          value: 20
+        },
+        unit: {
+          $$type: 'string',
+          value: 'px'
         }
       }
     }
-  }
+  },
+  elementId: 'element-id',
+  elementType: 'element-type'
 };
 \`\`\`
 
@@ -2237,11 +2531,15 @@ The $$type property is MANDATORY for every value, it is required to parse the va
 import { z as z2 } from "@elementor/schema";
 var inputSchema2 = {
   propertiesToChange: z2.record(
-    z2.string().describe(
-      "The property name. If nested property, provide the root property name, and the object delta only."
-    ),
-    z2.any().describe("The property's value")
-  ).describe("An object record containing property names and their new values to be set on the element").optional(),
+    z2.string().describe("The property name."),
+    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({}),
   elementType: z2.string().describe("The type of the element to retreive the schema"),
   elementId: z2.string().describe("The unique id of the element to configure")
 };
@@ -2259,19 +2557,29 @@ var initConfigureElementTool = (reg) => {
     description: configureElementToolPrompt,
     schema: inputSchema2,
     outputSchema: outputSchema2,
-    handler: ({ elementId, propertiesToChange, elementType }) => {
-      if (!propertiesToChange) {
-        throw new Error(
-          "propertiesToChange is required to configure an element. Now that you have this information, ensure you have the schema and try again."
-        );
-      }
+    requiredResources: [
+      { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
+      { description: "Styles schema", uri: STYLE_SCHEMA_URI }
+    ],
+    handler: ({ elementId, propertiesToChange, elementType, stylePropertiesToChange }) => {
       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) {
-        if (!propertyName && !elementId && !elementType) {
-          throw new Error(
-            "propertyName, elementId, elementType are required to configure an element. If you want to retreive the schema, use the get-element-configuration-schema tool."
-          );
-        }
         try {
           doUpdateElementProperty({
             elementId,
@@ -2284,6 +2592,28 @@ var initConfigureElementTool = (reg) => {
             propertyName,
             elementId,
             elementType,
+            error,
+            propertyType: "prop"
+          });
+          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);
@@ -2296,26 +2626,32 @@ var initConfigureElementTool = (reg) => {
   });
 };
 function createUpdateErrorMessage(opts) {
-  const { propertyName, elementId, elementType, error } = opts;
+  const { propertyName, elementId, elementType, error, propertyType } = opts;
   return `Failed to update property "${propertyName}" on element "${elementId}": ${error.message}.
+${propertyType === "prop" ? `
 Check the element's PropType schema at the resource [${WIDGET_SCHEMA_URI.replace(
     "{widgetType}",
     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.`;
+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.
+`};
+}`;
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-import { getContainer as getContainer4, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
-import { Schema as Schema3 } from "@elementor/editor-props";
+import { getContainer as getContainer4, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+import { Schema as Schema4 } from "@elementor/editor-props";
 import { z as z3 } from "@elementor/schema";
 var schema = {
   elementId: z3.string()
 };
 var outputSchema3 = {
-  propValues: z3.record(z3.string(), z3.any()).describe(
-    "A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues"
-  )
+  properties: z3.record(z3.string(), z3.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
+  style: z3.record(z3.string(), z3.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues")
 };
 var initGetElementConfigTool = (reg) => {
   const { addTool } = reg;
@@ -2330,13 +2666,13 @@ var initGetElementConfigTool = (reg) => {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementRawSettings = element.settings;
-      const propSchema = getWidgetsCache5()?.[element.model.get("widgetType") || ""]?.atomic_props_schema;
+      const propSchema = getWidgetsCache6()?.[element.model.get("widgetType") || element.model.get("elType") || ""]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
       const propValues = {};
       const stylePropValues = {};
-      Schema3.configurableKeys(propSchema).forEach((key) => {
+      Schema4.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
       const elementStyles = getElementStyles2(elementId) || {};
@@ -2352,12 +2688,17 @@ var initGetElementConfigTool = (reg) => {
               stylePropValues[stylePropName] = structuredClone(styleProps[stylePropName]);
             }
           });
+          if (defaultVariant.custom_css) {
+            stylePropValues.custom_css = atob(defaultVariant.custom_css.raw);
+          }
         }
       }
       return {
-        propValues: {
-          ...propValues,
-          _styles: stylePropValues
+        properties: {
+          ...propValues
+        },
+        style: {
+          ...stylePropValues
         }
       };
     }
@@ -2374,46 +2715,90 @@ var initCanvasMcp = (reg) => {
   initBuildCompositionsTool(reg);
   initGetElementConfigTool(reg);
   initConfigureElementTool(reg);
+  initBreakpointsResource(reg);
 };
 
 // src/mcp/mcp-description.ts
-var mcpDescription = `Canvas MCP - Working with widgets and styles: how to use the PropType schemas and generate PropValue structures
+var mcpDescription = `Canvas MCP
+This MCP enables everything related to creation, configuration, and styling of elements on the Elementor canvas.
 
-# Elementor's PropValue configuration system
+# Design Systems in Elementor
+- Elementor presents global classes. Each global class is a a set of styles that can be applied to multiple elements. This allows for consistent styling across the design.
+- Elementor also presents global variables, which can be colors, sizes or fonts. These variables can be used in any element's styles, or global classes, allowing for easy updates and consistency across the design.
+- All data is stored in a PropValue structure, which is a wrapper for elementor values. The PropValues are derived from an internal "PropType" schema, which defines the structure and types of the values.
 
-Every widget in Elementor has a set of properties that can be configured, defined in a STRICT SCHEMA we call "PropType".
-All widget configuration values are represented using a structure we call "PropValue".
+# PropValues structure and usage
+\`\`\`json
+{
+  $$type: 'the-prop-type-schema-kind',
+  value: 'the-actual-value-as-defined-for-the-propType'
+}
+\`\`\`
+The "value" property can be an object, string, number, boolean, array, etc. The $$type defines the kind of value, and the value is the actual value.
+It is critical to provide the correct $$type for each value, as it defines how Elementor will interpret the value or reject it.
+
+All widgets properties and configuration is built from sets of PropValues, which can be retreived from the resource [${WIDGET_SCHEMA_URI}].
+All styles are SHARED ACCROSS widgets, containers and components, and are defined in a common styles schema, retreivable from the resource [${STYLE_SCHEMA_URI}].
+The style schema also defines the global classes.
+
+To understand the configuration options for an element, refer to the PropType schema for that specific element. For example: "e-heading" configuration schema is available at the resource [${WIDGET_SCHEMA_URI}/e-heading]
 
-To correctly configure a widget's properties, FOLLOW THE PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
-Every widget has it's own PropType schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
-ALL WIDGETS share a common _styles property with a uniform styles schema, retreivable from the resource [${STYLE_SCHEMA_URI}].
-The style schema is grouped by categories, such as "typography", "background", "border", etc.
+# Modifying elements and styles
+When configuring an element, elementor does a MERGE PROPERTIES operation, which means that only the properties you provide will be updated, and the rest will remain as is.
+For deleting a property, the value must be set to null, instead of a PropValue. When adding a configuration, no need to provide the full configuration, only the properties you want to add or update.
+The same rule applies to styles as well and modifications to global classes.
 
-# Tools and usage
-- Use the "get-element-configuration-values" tool to retrieve the current configuration of a specific element, including its PropValues and styles. It is recommended to use this tool when you are required to make changes to an existing element, to ensure you have the correct current configuration schema.
-  If a PropValue changes it's type (only on union PropTypes), read the new schema from the resources mentioned above, and adjust the PropValue structure accordingly.
-- Use the "build-composition" tool to create a NEW ELEMENTS in a composition on the page. You can use this tool to also create a new single element.
-- Use the "configure-element" tool to update the configuration of an EXISTING element on the page.
+# Building full compositions
+The "build-composition" tool allows creating multiple elements in a single operation.
+The tool accepts both the structure, the styling and the configuration of each element to be created.
 
-All array types that can receive union types, are typed as mixed array, which means that each item in the array can be of any of the allowed types defined in the PropType schema.
-Example: the "background" can have a background-overlay property, which can contain multiple overlays, such as color, gradient, image, etc. Each item in the array must follow the PropType schema for each overlay type.
-All _style properties are OPTIONAL. When a _style is defined, we MERGE the values with existing styles, so only the properties you define will be changed, and the rest will remain as is.
+- First step: Retreive the available widgets by listing the [${WIDGET_SCHEMA_URI}] dynamic resource.
+- Second step: decide which elements to create, and their configuration and styles.
+  Retrieve the used elements configuration schema from the resource [${WIDGET_SCHEMA_URI}/element-name]
+- Third step: define the styles for each element, using the common styles schema from the resource [${STYLE_SCHEMA_URI}]. List the resource to see all available style properties.
+  For background and complicated layered styles, you can use "custom_css" property, which is supported only for ELEMENTOR PRO users ONLY.
+  The custom css is intented to deal with yet unsupported CSS features that ARE NOT PART OF THE STYLE SCHEMA, to enable PRO users to support new CSS features.
+
+# Configuring Elements / Adding Style to Elements
+An element configuration can be retrieved using the "get-element-configuration-values" tool.
+Updating an element requires only the UPDATED properties (including in the styles), as Elementor does a MERGE/PATCH operation.
+
+<note>
+for PropValue with array as value:
+All array types that can receive union types, are typed as mixed array.
+</note>
 
 # Styling best practices
 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.
 
-Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
-
-Example of null values:
-{
-  $$type: 'as-defined-for-propValue',
-  value: null
-}
+# Examples:
 
-Example of "image" PropValue structure:
+## e-image PropValue structure:
 {$$type:'image',value:{src:{$$type:'image-src',value:{url:{$$type:'url',value:'https://example.com/image.jpg'}}},size:{$$type:'string',value:'full'}}}
 
+Widgets' sizes MUST be defined using the style schema. Images, for example, have a "size" property, but it DOES NOT AFFECT THE VISUAL size, but rather the image size/resolution to load.
+
+# Working with Global Classes and Variables
+- To get the list of available global classes, use the resource at uri elementor://global-classes
+- To get the list of available global variables, use the resource at uri elementor://global-variables
+- Before creating a global variable or class, refer to the list and see if it already exists.
+- Naming conventions:
+  - Global classes and global variables should have meaningful names that reflect their purpose and usage.
+  - Avoid generic names like "style1" or "classA"; instead, use descriptive names like "primary-button" or "heading-level-1".
+  - Avoid names that reflect colors or values, use only purpose-based names.
+
+# Advanced operations
+You are encouraged to run multiple times multiple tools to achieve the desired result.
+
+An Example scenario of creating fully styled composition:
+1. Get the list of availble widgets using dynamic resource [${WIDGET_SCHEMA_URI}]
+2. For each element to create, retreive its configuration schema from [${WIDGET_SCHEMA_URI}/element-name]
+3. Get the list of available global classes using the always up-to-date resource 
+4. Get the list of available global variables using the dynamic resource
+5. Build a composition using the "build-composition" tool, providing the structure, configuration and styles for each element. You may want to style the elements later.
+6. Check you work: as you have the created IDs from the build-composition response, you can retreive each element configuration using the "get-element-configuration-values" tool.
+7. If needed, update styles using the "configure-element" tool, providing only the styles or widget's properties to update.
 `;
 
 // src/prevent-link-in-link-commands.ts
@@ -2522,7 +2907,7 @@ import { undoable } from "@elementor/editor-v1-adapters";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/style-commands/utils.ts
-import { getElementLabel, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+import { getElementLabel, getWidgetsCache as getWidgetsCache7 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __2 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
@@ -2547,7 +2932,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache6();
+  const widgetsCache = getWidgetsCache7();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -2814,6 +3199,8 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
   return { model: elementModel };
 };
 export {
+  BREAKPOINTS_SCHEMA_URI,
+  STYLE_SCHEMA_URI,
   createPropsResolver,
   createTemplatedElementView,
   createTransformer,