@elementor/editor-canvas 3.35.0-470 → 3.35.0-471

package/dist/index.js

@@ -118,7 +118,7 @@ The css string must follow standard CSS syntax, with properties and values separ
     "styles-schema",
     new import_editor_mcp.ResourceTemplate(STYLE_SCHEMA_URI, {
       list: () => {
-        const categories = [...Object.keys((0, import_editor_styles.getStylesSchema)())];
+        const categories = [...Object.keys((0, import_editor_styles.getStylesSchema)())].filter((category) => category !== "all");
         return {
           resources: categories.map((category) => ({
             uri: `elementor://styles/schema/${category}`,
@@ -2240,6 +2240,9 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+var import_editor_elements8 = require("@elementor/editor-elements");
+
+// src/composition-builder/composition-builder.ts
 var import_editor_elements7 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
@@ -2247,7 +2250,11 @@ var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
 function resolvePropValue(value, forceKey) {
-  return import_editor_props5.Schema.adjustLlmPropValueSchema(value, { forceKey });
+  const Utils = window.elementorV2.editorVariables.Utils;
+  return import_editor_props5.Schema.adjustLlmPropValueSchema(value, {
+    forceKey,
+    transformers: Utils.globalVariablesLLMResolvers
+  });
 }
 var doUpdateElementProperty = (params) => {
   const { elementId, propertyName, propertyValue, elementType } = params;
@@ -2391,9 +2398,14 @@ var validateInput = {
       } else if (!import_editor_props6.Schema.isPropKeyConfigurable(propName)) {
         errors.push(`Property "${propName}" is not configurable.`);
       } else {
-        const { valid, jsonSchema } = import_editor_props6.Schema.validatePropValue(propSchema, propValue);
+        const { valid } = import_editor_props6.Schema.validatePropValue(propSchema, propValue);
         if (!valid) {
-          errors.push(`Invalid property "${propName}". Expected schema: ${jsonSchema}`);
+          errors.push(
+            `Invalid property "${propName}". Validate input with resource [${STYLE_SCHEMA_URI.replace(
+              "{category}",
+              propName
+            )}]`
+          );
         }
       }
     });
@@ -2432,290 +2444,292 @@ var validateInput = {
   }
 };
 
-// src/mcp/tools/build-composition/prompt.ts
-var import_editor_mcp2 = require("@elementor/editor-mcp");
-var generatePrompt = () => {
-  const buildCompositionsToolPrompt = (0, import_editor_mcp2.toolPrompts)("build-compositions");
-  buildCompositionsToolPrompt.description(`
-# **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.
-   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.
-2. [${STYLE_SCHEMA_URI}]
-   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.
-
-# **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.
-   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.
-2. [${STYLE_SCHEMA_URI}]
-   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
-   use the "e-button" element, it would be represented as <e-button></e-button> in the XML structure.
-3. Plan the configuration for each element according to the user requirements, using the configuration schema provided for each custom tag.
-   Every widget type has it's own configuration schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
-   PropValues must follow the exact PropType schema provided in the resource.
-4. For every element, provide a "configuration-id" attribute. For example:
-   \`<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading2"></e-heading></e-flexbox>\`
-   In the elementConfig property, provide the actual configuration object for each configuration-id used in the XML structure.
-   In the stylesConfig property, provide the actual styles configuration object for each configuration-id used in the XML structure.
-5. Ensure the XML structure is valid and parsable.
-6. Do not add any attribute nodes, classes, id's, and no text nodes allowed.
-   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-tabs", "e-div-block", and "e-flexbox".
-8. Make sure that non-container elements do NOT have any nested elements.
-
-# 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" }
-        }
+// src/composition-builder/composition-builder.ts
+var CompositionBuilder = class _CompositionBuilder {
+  elementConfig = {};
+  elementStylesConfig = {};
+  rootContainers = [];
+  containerElements = [];
+  api = {
+    createElement: import_editor_elements7.createElement,
+    getWidgetsCache: import_editor_elements7.getWidgetsCache,
+    generateElementId: import_editor_elements7.generateElementId,
+    getContainer: import_editor_elements7.getContainer,
+    doUpdateElementProperty
+  };
+  xml;
+  static fromXMLString(xmlString, api = {}) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xmlString, "application/xml");
+    const errorNode = xmlDoc.querySelector("parsererror");
+    if (errorNode) {
+      throw new Error("Failed to parse XML string: " + errorNode.textContent);
+    }
+    return new _CompositionBuilder({
+      xml: xmlDoc,
+      api
+    });
+  }
+  constructor(opts) {
+    const { api = {}, elementConfig = {}, stylesConfig = {}, xml } = opts;
+    this.xml = xml;
+    Object.assign(this.api, api);
+    this.setElementConfig(elementConfig);
+    this.setStylesConfig(stylesConfig);
+  }
+  setElementConfig(config) {
+    this.elementConfig = config;
+  }
+  setStylesConfig(config) {
+    this.elementStylesConfig = config;
+  }
+  getXML() {
+    return this.xml;
+  }
+  iterateBuild(node, containerElement, childIndex) {
+    const elementTag = node.tagName;
+    const isContainer = this.containerElements.includes(elementTag);
+    const parentElType = containerElement.model.get("elType");
+    let targetContainerId = parentElType === "e-tabs" ? containerElement.children?.[1].children?.[childIndex]?.id || containerElement.children?.[1].id : containerElement.id;
+    if (!targetContainerId) {
+      targetContainerId = containerElement.id;
+    }
+    const newElement = isContainer ? this.api.createElement({
+      containerId: targetContainerId,
+      model: {
+        elType: elementTag,
+        id: (0, import_editor_elements7.generateElementId)()
+      },
+      options: { useHistory: false }
+    }) : this.api.createElement({
+      containerId: targetContainerId,
+      model: {
+        elType: "widget",
+        widgetType: elementTag,
+        id: (0, import_editor_elements7.generateElementId)()
       },
+      options: { useHistory: false }
+    });
+    if (containerElement.id === "document") {
+      this.rootContainers.push(newElement);
+    }
+    node.setAttribute("id", newElement.id);
+    let currentChild = 0;
+    for (const childNode of Array.from(node.children)) {
+      this.iterateBuild(childNode, newElement, currentChild);
+      currentChild++;
     }
   }
-}
-
-**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" }
+  findSchemaForNode(node) {
+    const widgetsCache = this.api.getWidgetsCache() || {};
+    const widgetType = node.tagName;
+    const widgetData = widgetsCache[widgetType]?.atomic_props_schema;
+    return widgetData || null;
+  }
+  matchNodeByConfigId(configId) {
+    const node = this.xml.querySelector(`[configuration-id="${configId}"]`);
+    if (!node) {
+      throw new Error(`Configuration id "${configId}" does not have target node.`);
     }
-  },
-  "stylesConfig": {
-    "hero-section": {
-      "display": { "$$type": "string", "value": "flex" },
-      "flex-direction": { "$$type": "string", "value": "column" },
-      "align-items": { "$$type": "string", "value": "flex-start" },
-      "background": {
-        "$$type": "color",
-        "value": "#f0ebe6",
-        "$intention": "background: #f0ebe6",
+    const id = node.getAttribute("id");
+    if (!id) {
+      throw new Error(`Node with configuration id "${configId}" does not have element id.`);
+    }
+    const element = this.api.getContainer(id);
+    if (!element) {
+      throw new Error(`Element with id "${id}" not found but should exist.`);
+    }
+    return {
+      element,
+      node
+    };
+  }
+  applyStyles() {
+    const errors = [];
+    const invalidStyles = {};
+    const validStylesPropValues = {};
+    for (const [styleId, styleConfig] of Object.entries(this.elementStylesConfig)) {
+      const { element, node } = this.matchNodeByConfigId(styleId);
+      for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
+        const { valid, errors: validationErrors } = validateInput.validateStyles({
+          [styleName]: stylePropValue
+        });
+        if (!valid) {
+          if (styleConfig.$intention) {
+            invalidStyles[element.id] = invalidStyles[element.id] || [];
+            invalidStyles[element.id].push(styleName);
+          }
+          errors.push(...validationErrors || []);
+        } else {
+          validStylesPropValues[styleName] = stylePropValue;
+        }
+        this.api.doUpdateElementProperty({
+          elementId: element.id,
+          propertyName: "_styles",
+          propertyValue: validStylesPropValues,
+          elementType: node.tagName
+        });
       }
-    },
-    "hero-title": {
-      "font-size": {
-          "$$type": "size",
-          "value": {
-            "size": { "$$type": "number", "value": 72 },
-            "unit": { "$$type": "string", "value": "px" }
+    }
+    return {
+      errors,
+      invalidStyles
+    };
+  }
+  applyConfigs() {
+    const errors = [];
+    for (const [configId, config] of Object.entries(this.elementConfig)) {
+      const { element, node } = this.matchNodeByConfigId(configId);
+      const propSchema = this.findSchemaForNode(node);
+      const result = validateInput.validateProps(propSchema, config);
+      if (!result.valid && result.errors?.length) {
+        errors.push(...result.errors);
+      } else {
+        for (const [propertyName, propertyValue] of Object.entries(config)) {
+          try {
+            this.api.doUpdateElementProperty({
+              elementId: element.id,
+              propertyName,
+              propertyValue,
+              elementType: node.tagName
+            });
+          } catch (error) {
+            errors.push(error.message);
           }
-        },
+        }
+      }
     }
+    return errors;
   }
-}
-
-
-**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.
-If a "$$type" is missing, update the invalid object, if the XML has parsing errors, fix it, etc. and RETRY.
-VALIDATE the XML structure before delivering it as the final result.
-VALIDATE the JSON structure used in the "configuration" attributes for each element before delivering the final result. The configuration must MATCH the PropValue schemas.
-NO LINKS ALLOWED. Never apply links to elements, even if they appear in the PropType schema.
-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
-- elementConfig
-- stylesConfig
-
-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.
-Check for available llm_guidance property in the widget's schema.
-SVG elements are bound to internal content upload. Avoid usage, unless you have tools to upload SVG content.
-When working with containers, do not forget to apply style schema for controlling the layout.
-
+  build(rootContainer) {
+    const widgetsCache = this.api.getWidgetsCache() || {};
+    const CONTAINER_ELEMENTS = Object.values(widgetsCache).filter((widget) => widget.meta?.is_container).map((widget) => widget.elType).filter((x) => typeof x === "string");
+    this.containerElements = CONTAINER_ELEMENTS;
+    new Set(this.xml.querySelectorAll("*")).forEach((node) => {
+      if (!widgetsCache[node.tagName]) {
+        throw new Error(`Unknown widget type: ${node.tagName}`);
+      }
+    });
+    const children = Array.from(this.xml.children);
+    let currentChild = 0;
+    for (const childNode of children) {
+      this.iterateBuild(childNode, rootContainer, currentChild);
+      currentChild++;
+    }
+    const { errors: styleErrors, invalidStyles } = this.applyStyles();
+    const configErrors = this.applyConfigs();
+    return {
+      configErrors,
+      styleErrors,
+      invalidStyles,
+      rootContainers: [...this.rootContainers]
+    };
+  }
+};
 
+// src/mcp/tools/build-composition/prompt.ts
+var import_editor_mcp2 = require("@elementor/editor-mcp");
+var generatePrompt = () => {
+  const buildCompositionsToolPrompt = (0, import_editor_mcp2.toolPrompts)("build-compositions");
+  buildCompositionsToolPrompt.description(`
+# REQUIRED RESOURCES (Read before use)
+1. [${WIDGET_SCHEMA_URI}] - Widget types, configuration schemas, and PropType definitions
+2. [${STYLE_SCHEMA_URI}] - Common styles schema shared by all widgets
+3. [elementor://global-classes] - Existing global classes (check FIRST to reuse)
+
+# THREE-PHASE WORKFLOW (MANDATORY)
+
+## Phase 1: Create Global Classes
+1. Analyze requirements \u2192 identify reusable patterns (typography, colors, spacing)
+2. Check [elementor://global-classes] for existing classes
+3. Use "create-global-class" tool for NEW reusable styles BEFORE building
+
+## Phase 2: Build Composition (THIS TOOL)
+4. Build valid XML with minimal inline styles (layout/positioning only)
+5. Avoid duplicating styles that should be global classes
+
+## Phase 3: Apply Classes
+6. Use "apply-global-class" tool to apply global classes to elements
+
+# CORE INSTRUCTIONS
+
+**Structure:**
+- Build valid XML using allowed widget tags (e.g., \`<e-button configuration-id="btn1"></e-button>\`)
+- Containers only: "e-flexbox", "e-div-block", "e-tabs"
+- Every element MUST have unique "configuration-id" attribute
+- No attributes, classes, IDs, or text nodes in XML
+
+**Configuration:**
+- Map each configuration-id to elementConfig (widget props) and stylesConfig (styles)
+- Follow exact PropType schemas from resources above
+- All PropValues need \`$$type\` property matching schema
+- Keep stylesConfig MINIMAL - layout only, NOT reusable styles
+
+**Validation:**
+- Parse XML before submission
+- Match all PropValues to schema (\`$$type\` required)
+- NO LINKS in any configuration
+- Retry on errors up to 10x, reading error messages carefully
+
+# DESIGN QUALITY: AVOID AI SLOP
+
+**Problem:** LLMs default to generic patterns (purple gradients, #333 grays, 24px headings, uniform spacing)
+**Solution:** Make intentional, distinctive choices. When unsure, choose bold over safe.
+
+## Typography Rules
+\u274C AVOID: Inter/Roboto/Arial, small ratios (1.5x), medium weights (500-700)
+\u2705 USE: 3x+ size ratios, extreme weight contrasts (100/200 vs 800/900), tight headlines (1.1 line-height)
+
+## Color Rules
+\u274C AVOID: Purple gradients, pure grays (#333/#666/#999), even distribution
+\u2705 USE: ONE dominant color (60-70%), 1-2 accent colors (10-15%), tinted neutrals (warm/cool grays)
+
+## Spacing Rules
+\u274C AVOID: Uniform spacing (all 16px/24px), cramped layouts, centered everything
+\u2705 USE: Generous spacing (80-120px sections), dramatic variation (12px/48px/96px), asymmetric layouts
+
+## Background Rules
+\u274C AVOID: Solid white/gray, single colors
+\u2705 USE: Layered gradients (2-3 layers), subtle patterns, alternating light/dark sections
+
+## Visual Hierarchy
+1. **Primary** (1 element): Largest, highest contrast, most space
+2. **Secondary** (2-3 elements): 40-60% of primary size
+3. **Tertiary** (rest): Minimal weight, muted
+
+**Contrast techniques:** 3x size differences, 300+ weight differences, color hierarchy (brand \u2192 neutral \u2192 muted)
+
+# DESIGN CONSTRAINTS (NEVER VIOLATE)
+
+**Typography:**
+- NEVER use Inter, Roboto, Arial, Helvetica as primary display fonts
+- NEVER use font-size ratios < 2.5x between headlines and body
+- NEVER use font-weight 500-700 for headlines (go lighter or heavier)
+
+**Color:**
+- PREFER not to use pure grays - use tinted neutrals (#2d2622, #faf8f6, not #333/#f5f5f5)
+- NEVER distribute colors evenly - commit to ONE dominant
+- NEVER use more than 3 core colors - except for info/alert/badges
+
+**Spacing:**
+- NEVER use uniform spacing
+- NEVER use < 4rem (64px) padding for major sections
+- NEVER center everything
+- PRIORITIZE rem based values over pixel based
+
+**Background:**
+- NEVER use solid #ffffff or #f5f5f5 without texture/gradients
+- ALWAYS layer 2+ gradient/color elements
+
+# WIDGET NOTES
+- Check \`llm_guidance\` property in widget schemas for context
+- Avoid SVG widgets (require content upload tools) - when must, prior to execution ensure assets uploaded
+- Apply style schema to containers for layout control
+
+# PARAMETERS (ALL MANDATORY)
+- **xmlStructure**: Valid XML with configuration-id attributes
+- **elementConfig**: Record of configuration-id \u2192 widget PropValues
+- **stylesConfig**: Record of configuration-id \u2192 style PropValues (layout only)
   `);
   buildCompositionsToolPrompt.example(`
 A Heading and a button inside a flexbox
@@ -2762,7 +2776,12 @@ A Heading and a button inside a flexbox
 You should use these IDs as reference for further configuration, styling or changing elements later on.`
   );
   buildCompositionsToolPrompt.instruction(
-    `You must use styles/variables/classes that are available in the project resources, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
+    `**CRITICAL WORKFLOW REMINDER**:
+1. FIRST: Create reusable global classes for typography, colors, spacing patterns using "create-global-class" tool
+2. SECOND: Use THIS tool with minimal inline styles (only layout & unique properties)
+3. THIRD: Apply global classes to elements using "apply-global-class" tool
+
+This ensures maximum reusability and consistency across your design system. ALWAYS check [elementor://global-classes] for existing classes before creating new ones.`
   );
   return buildCompositionsToolPrompt.prompt();
 };
@@ -2792,8 +2811,7 @@ var outputSchema = {
   errors: import_schema.z.string().describe("Error message if the composition building failed").optional(),
   xmlStructure: import_schema.z.string().describe(
     "The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs."
-  ).optional(),
-  llmInstructions: import_schema.z.string().describe("Instructions for what to do next, Important to follow these instructions!")
+  ).optional()
 };
 
 // src/mcp/tools/build-composition/tool.ts
@@ -2805,120 +2823,60 @@ var initBuildCompositionsTool = (reg) => {
     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 Classes", uri: "elementor://global-classes" },
       { description: "Global Variables", uri: "elementor://global-variables" },
       { description: "Styles best practices", uri: BEST_PRACTICES_URI }
     ],
     outputSchema,
     modelPreferences: {
-      hints: [{ name: "claude-sonnet-4-5" }],
-      intelligencePriority: 0.95,
-      speedPriority: 0.5
+      hints: [{ name: "claude-sonnet-4-5" }]
     },
     handler: async (params) => {
-      let xml = null;
       const { xmlStructure, elementConfig, stylesConfig } = params;
+      let generatedXML = "";
       const errors = [];
-      const softErrors = [];
       const rootContainers = [];
-      const widgetsCache = (0, import_editor_elements7.getWidgetsCache)() || {};
-      const documentContainer = (0, import_editor_elements7.getContainer)("document");
+      const documentContainer = (0, import_editor_elements8.getContainer)("document");
       try {
-        const parser = new DOMParser();
-        xml = parser.parseFromString(xmlStructure, "application/xml");
-        const errorNode = xml.querySelector("parsererror");
-        if (errorNode) {
-          throw new Error("Failed to parse XML structure: " + errorNode.textContent);
+        const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
+          createElement: import_editor_elements8.createElement,
+          getWidgetsCache: import_editor_elements8.getWidgetsCache
+        });
+        compositionBuilder.setElementConfig(elementConfig);
+        compositionBuilder.setStylesConfig(stylesConfig);
+        const {
+          configErrors,
+          invalidStyles,
+          rootContainers: generatedRootContainers
+        } = compositionBuilder.build(documentContainer);
+        generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
+        if (configErrors.length) {
+          errors.push(...configErrors.map((e) => new Error(e)));
+          throw new Error("Configuration errors occurred during composition building.");
         }
-        const children = Array.from(xml.children);
-        const iterate = async (node, containerElement = documentContainer, childIndex) => {
-          const elementTag = node.tagName;
-          if (!widgetsCache[elementTag]) {
-            errors.push(new Error(`Unknown widget type: ${elementTag}`));
-          }
-          const CONTAINER_ELEMENTS = Object.values(widgetsCache).filter((widget) => widget.meta?.is_container).map((widget) => widget.elType);
-          const isContainer = CONTAINER_ELEMENTS.includes(elementTag);
-          const parentElType = containerElement.model.get("elType");
-          let targetContainerId = parentElType === "e-tabs" ? containerElement.children?.[1].children?.[childIndex]?.id || containerElement.children?.[1].id : containerElement.id;
-          if (!targetContainerId) {
-            targetContainerId = containerElement.id;
-          }
-          const newElement = isContainer ? (0, import_editor_elements7.createElement)({
-            containerId: targetContainerId,
-            model: {
-              elType: elementTag,
-              id: (0, import_editor_elements7.generateElementId)()
-            },
-            options: { useHistory: false }
-          }) : (0, import_editor_elements7.createElement)({
-            containerId: targetContainerId,
-            model: {
-              elType: "widget",
-              widgetType: elementTag,
-              id: (0, import_editor_elements7.generateElementId)()
+        rootContainers.push(...generatedRootContainers);
+        Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
+          const customCss = {
+            value: rawCssRules.join(";\n")
+          };
+          doUpdateElementProperty({
+            elementId,
+            propertyName: "_styles",
+            propertyValue: {
+              _styles: {
+                custom_css: customCss
+              }
             },
-            options: { useHistory: false }
+            elementType: "widget"
           });
-          if (containerElement === documentContainer) {
-            rootContainers.push(newElement);
-          }
-          node.setAttribute("id", newElement.id);
-          const configId = node.getAttribute("configuration-id") || "";
-          try {
-            const configObject = elementConfig[configId] || {};
-            const styleObject = stylesConfig[configId] || {};
-            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)) {
-              try {
-                doUpdateElementProperty({
-                  elementId: newElement.id,
-                  propertyName,
-                  propertyValue,
-                  elementType: elementTag
-                });
-              } catch (error) {
-                softErrors.push(error);
-              }
-            }
-            if (isContainer) {
-              let currentChild2 = 0;
-              for (const child of node.children) {
-                iterate(child, newElement, currentChild2);
-                currentChild2++;
-              }
-            } else {
-              node.innerHTML = "";
-              node.removeAttribute("configuration");
-            }
-          } finally {
-          }
-        };
-        let currentChild = 0;
-        for await (const childNode of children) {
-          await iterate(childNode, documentContainer, currentChild);
-          currentChild++;
-          try {
-          } catch (error) {
-            errors.push(error);
-          }
-        }
+        });
       } catch (error) {
         errors.push(error);
       }
       if (errors.length) {
         rootContainers.forEach((rootContainer) => {
-          (0, import_editor_elements7.deleteElement)({
+          (0, import_editor_elements8.deleteElement)({
             elementId: rootContainer.id,
             options: { useHistory: false }
           });
@@ -2952,20 +2910,19 @@ ${errorMessages.join(
 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) {
-        throw new Error("XML structure is null after parsing.");
-      }
       return {
-        xmlStructure: new XMLSerializer().serializeToString(xml),
+        xmlStructure: generatedXML,
         errors: errors?.length ? errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n") : void 0,
-        llmInstructions: (softErrors.length ? `The composition was built successfully, but there were some issues with the provided configurations:
+        llm_instructions: `The composition was built successfully with element IDs embedded in the XML.
 
-${softErrors.map((e) => `- ${e.message}`).join("\n")}
+**CRITICAL NEXT STEPS** (Follow in order):
+1. **Apply Global Classes**: Use "apply-global-class" tool to apply the global classes you created BEFORE building this composition
+   - Check the created element IDs in the returned XML
+   - Apply semantic classes (heading-primary, button-cta, etc.) to appropriate elements
 
-Please use configure-element tool to fix these issues. Now that you have information about these issues, use the configure-element tool to fix them!` : "") + `
-Next Steps:
-- Use "apply-global-class" tool as there may be global styles ready to be applied to elements.
-- Use "configure-element" tool to further configure elements as needed, including styles.
+2. **Fine-tune if needed**: Use "configure-element" tool only for element-specific adjustments that don't warrant global classes
+
+Remember: Global classes ensure design consistency and reusability. Don't skip applying them!
 `
       };
     }
@@ -3191,7 +3148,7 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
@@ -3230,12 +3187,12 @@ var initGetElementConfigTool = (reg) => {
       speedPriority: 0.9
     },
     handler: async ({ elementId }) => {
-      const element = (0, import_editor_elements8.getContainer)(elementId);
+      const element = (0, import_editor_elements9.getContainer)(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementRawSettings = element.settings;
-      const propSchema = (0, import_editor_elements8.getWidgetsCache)()?.[element.model.get("widgetType") || element.model.get("elType") || ""]?.atomic_props_schema;
+      const propSchema = (0, import_editor_elements9.getWidgetsCache)()?.[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}`);
       }
@@ -3244,7 +3201,7 @@ var initGetElementConfigTool = (reg) => {
       import_editor_props7.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
-      const elementStyles = (0, import_editor_elements8.getElementStyles)(elementId) || {};
+      const elementStyles = (0, import_editor_elements9.getElementStyles)(elementId) || {};
       const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
       if (localStyle) {
         const defaultVariant = localStyle.variants.find(
@@ -3291,127 +3248,118 @@ var initCanvasMcp = (reg) => {
 
 // src/mcp/mcp-description.ts
 var ELEMENT_SCHEMA_URI = WIDGET_SCHEMA_URI.replace("{widgetType}", "element-schema");
-var mcpDescription = `Canvas MCP
-This MCP enables everything related to creation, configuration, and styling of elements on the Elementor canvas.
+var mcpDescription = `Elementor Canvas MCP
+This MCP enables creation, configuration, and styling of elements on the Elementor canvas using the build_composition tool.
 
-# 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.
+# Core Concepts
+
+## PropValues Structure
+All data in Elementor uses PropValues - a typed wrapper for values:
+\`\`\`json
+{
+  "$$type": "the-prop-type-schema-kind",
+  "value": "the-actual-value-as-defined-for-the-propType"
+}
+\`\`\`
+The \`$$type\` defines how Elementor interprets the value. Providing the correct \`$$type\` is critical - incorrect types will be rejected.
+
+## Design System Resources
+- **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
+
+The \`build_composition\` tool is the primary way to create elements. It accepts structure (XML), configuration, and styling in a single operation.
+
+## Complete Workflow
+
+### 1. Parse User Requirements
+Understand what needs to be built: structure, content, and styling.
+
+### 2. Check Global Resources FIRST
+Always check existing resources before building:
+- List \`elementor://global-variables\` for available variables (colors, sizes, fonts)
+- List \`elementor://global-classes\` for available style sets
+- **Always prefer using existing global resources over creating inline styles**
+
+### 3. Retrieve Widget Schemas
+For each widget you'll use:
+- List \`${WIDGET_SCHEMA_URI}\` to see available widgets
+- Retrieve configuration schema from \`${ELEMENT_SCHEMA_URI}\` for each widget
+- Check the \`llm_guidance\` property to understand if a widget is a container (can have children)
+
+### 4. Build XML Structure
+Create valid XML with configuration-ids:
+- Each element must have a unique \`configuration-id\` attribute
+- No text nodes, classes, or IDs in XML - structure only
+- Example:
+\`\`\`xml
+<e-container configuration-id="container-1">
+  <e-heading configuration-id="heading-1" />
+  <e-text configuration-id="text-1" />
+</e-container>
+\`\`\`
 
-# PropValues structure and usage
+### 5. Create elementConfig
+Map each configuration-id to its widget properties using PropValues:
+- Use correct \`$$type\` matching the widget's schema
+- Use global variables in PropValues where applicable
+- Example:
 \`\`\`json
 {
-  $$type: 'the-prop-type-schema-kind',
-  value: 'the-actual-value-as-defined-for-the-propType'
+  "heading-1": {
+    "text": { "$$type": "string", "value": "Welcome" },
+    "tag": { "$$type": "string", "value": "h1" }
+  }
 }
 \`\`\`
-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]
-
-# 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.
-
-# 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.
-
-- 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 [${ELEMENT_SCHEMA_URI}]
-- 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.
-
-## Workflow for build-compositions tool
-1. **Parse user requirements** - Undestand what needs to be built (structure, content, styling).
-2. ** Check global resources FIRST** - Always check before building:
-   - List \`elementor://global-classes\` to see if the needed global classes already exist.
-   - List \`elementor://global-variables\` to see if the needed global variables already exist.
-   - **Preference**: Use existing global classes and variables over creating new inline styles.
-3. **Retreive widget schemas** - For each widget you will use:
-   - List [${WIDGET_SCHEMA_URI}] to see available widgets.
-   - Retrieve configuration schema from [${ELEMENT_SCHEMA_URI}] for each widget to understand required properties.
-   - Understand if a widget is a container (can have children) by checking the "llm_guidance" property in the widget's schema.
-4. **Build XML structure** - Create valid XML width configuration-ids:
-   - Every element has unique configuration-id attribute
-   - No text nodes, classes, IDs in XML.
-   
-5. **Create elementConfig** - For each configuration-id:
-   - Use PropValues with corrent \`$$type\` matching the schema.
-   - **Use global variables** in PropValues where applicable
-
-6. **Create stylesConfig** - For each configuration-id:
-   - Use style schema PropValues from [${STYLE_SCHEMA_URI}]
-   - **Use global variables** for colors, sizes, fonts where applicable
-   - **Important**: Global classes are applied AFTER building the composition. Once built, apply classes using the "apply-global-class" tool - after completion of building the composition.
-
-7. **Validate** - Ensure:
-   - XML structure is valid
-   - All PropValues have corrent \`$$type\`
-   - After building a composition, you can retreive each element configuration using the "get-element-configuration-values" tool to verify correctness, using the IDs returned from the build-composition tool.
-
-## Key relationships:
-- **XML structure**: Defines the hierarchy of elements/widgets
-- **elementConfig**: Maps configuration-id to widget PropValues
-- **stylesConfig**: Maps configuration-id to style PropValues
-
-## Using global variables example:
-Existing global variables can be used during composition
+
+### 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:
 \`\`\`json
-{ "color": { "$$type": "global-color-variable", "value": "global-variable-id" } }
+{
+  "heading-1": {
+    "color": { "$$type": "global-color-variable", "value": "primary-color-id" },
+    "font-size": { "$$type": "size", "value": "2rem" }
+  }
+}
 \`\`\`
 
-# 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.
+### 7. Execute build_composition
+Call the tool with your XML structure, elementConfig, and stylesConfig. 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!
 
-<note>
-for PropValue with array as value:
-All array types that can receive union types, are typed as mixed array.
-</note>
+## Key Points
 
-# 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.
+- **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" }\`)
+- **Naming Conventions**: Use meaningful, purpose-based names (e.g., "primary-button", "heading-large"), not value-based names (e.g., "blue-style", "20px-padding")
 
-# Examples:
-
-## 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.
+## Example: e-image PropValue Structure
+\`\`\`json
+{
+  "$$type": "image",
+  "value": {
+    "src": {
+      "$$type": "image-src",
+      "value": {
+        "url": { "$$type": "url", "value": "https://example.com/image.jpg" }
+      }
+    },
+    "size": { "$$type": "string", "value": "full" }
+  }
+}
+\`\`\`
+Note: The "size" property controls image resolution/loading, not visual size. Set visual dimensions in stylesConfig.
 `;
 
 // src/prevent-link-in-link-commands.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_i18n2 = require("@wordpress/i18n");
@@ -3482,13 +3430,13 @@ function shouldBlock(sourceElements, targetElements) {
     return false;
   }
   const isSourceContainsAnAnchor = sourceElements.some((src) => {
-    return src?.id ? (0, import_editor_elements9.isElementAnchored)(src.id) || !!(0, import_editor_elements9.getAnchoredDescendantId)(src.id) : false;
+    return src?.id ? (0, import_editor_elements10.isElementAnchored)(src.id) || !!(0, import_editor_elements10.getAnchoredDescendantId)(src.id) : false;
   });
   if (!isSourceContainsAnAnchor) {
     return false;
   }
   const isTargetContainsAnAnchor = targetElements.some((target) => {
-    return target?.id ? (0, import_editor_elements9.isElementAnchored)(target.id) || !!(0, import_editor_elements9.getAnchoredAncestorId)(target.id) : false;
+    return target?.id ? (0, import_editor_elements10.isElementAnchored)(target.id) || !!(0, import_editor_elements10.getAnchoredAncestorId)(target.id) : false;
   });
   return isTargetContainsAnAnchor;
 }
@@ -3497,13 +3445,13 @@ function shouldBlock(sourceElements, targetElements) {
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements11 = require("@elementor/editor-elements");
+var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_props8 = require("@elementor/editor-props");
 var import_i18n3 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
@@ -3528,7 +3476,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements10.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements11.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -3541,7 +3489,7 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n3.__)("Elements", "elementor") : (0, import_editor_elements10.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n3.__)("Elements", "elementor") : (0, import_editor_elements11.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
@@ -3554,7 +3502,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements11.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements12.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -3563,7 +3511,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            (0, import_editor_elements11.updateElementStyle)({
+            (0, import_editor_elements12.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -3574,7 +3522,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements11.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements12.createElementStyle)({
             elementId,
             classesProp,
             label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -3592,7 +3540,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements11.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements12.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -3601,7 +3549,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements11.createElementStyle)({
+        (0, import_editor_elements12.createElementStyle)({
           elementId: container.id,
           classesProp,
           label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -3653,7 +3601,7 @@ function pasteStyles(args, pasteCallback) {
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements12 = require("@elementor/editor-elements");
+var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 var import_i18n5 = require("@wordpress/i18n");
@@ -3662,9 +3610,9 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters14.undoable)(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements12.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements13.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements12.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements13.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -3680,7 +3628,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters14.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements12.createElementStyle)({
+          (0, import_editor_elements13.createElementStyle)({
             elementId,
             classesProp,
             styleId,