@elementor/editor-canvas 4.0.0-621 → 4.0.0-manual

package/dist/index.mjs

@@ -59,7 +59,13 @@ Prefer using "em" and "rem" values for text-related sizes, padding and spacing.
 This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
 When applicable for styles, apply style PropValues using the ${STYLE_SCHEMA_URI}.
-The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
+The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
+
+** CRITICAL - VARIABLES **
+When using global variables, ensure that the variables are defined in the ${"elementor://global-variables"} resource.
+Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
+
+`
         }
       ]
     };
@@ -3197,6 +3203,7 @@ var validateInput = {
 var CompositionBuilder = class _CompositionBuilder {
   elementConfig = {};
   elementStylesConfig = {};
+  elementCusomCSS = {};
   rootContainers = [];
   containerElements = [];
   api = {
@@ -3220,11 +3227,12 @@ var CompositionBuilder = class _CompositionBuilder {
     });
   }
   constructor(opts) {
-    const { api = {}, elementConfig = {}, stylesConfig = {}, xml } = opts;
+    const { api = {}, elementConfig = {}, stylesConfig = {}, customCSS = {}, xml } = opts;
     this.xml = xml;
     Object.assign(this.api, api);
     this.setElementConfig(elementConfig);
     this.setStylesConfig(stylesConfig);
+    this.setCustomCSS(customCSS);
   }
   setElementConfig(config) {
     this.elementConfig = config;
@@ -3232,6 +3240,9 @@ var CompositionBuilder = class _CompositionBuilder {
   setStylesConfig(config) {
     this.elementStylesConfig = config;
   }
+  setCustomCSS(config) {
+    this.elementCusomCSS = config;
+  }
   getXML() {
     return this.xml;
   }
@@ -3247,7 +3258,10 @@ var CompositionBuilder = class _CompositionBuilder {
       container: targetContainer,
       model: {
         elType: elementTag,
-        id: generateElementId()
+        id: generateElementId(),
+        editor_settings: {
+          title: node.getAttribute("configuration-id") ?? void 0
+        }
       },
       options: { useHistory: false }
     }) : this.api.createElement({
@@ -3255,7 +3269,10 @@ var CompositionBuilder = class _CompositionBuilder {
       model: {
         elType: "widget",
         widgetType: elementTag,
-        id: generateElementId()
+        id: generateElementId(),
+        editor_settings: {
+          title: node.getAttribute("configuration-id") ?? void 0
+        }
       },
       options: { useHistory: false }
     });
@@ -3296,9 +3313,9 @@ var CompositionBuilder = class _CompositionBuilder {
   applyStyles() {
     const errors = [];
     const invalidStyles = {};
-    const validStylesPropValues = {};
     for (const [styleId, styleConfig] of Object.entries(this.elementStylesConfig)) {
       const { element, node } = this.matchNodeByConfigId(styleId);
+      const validStylesPropValues = {};
       for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
         const { valid, errors: validationErrors } = validateInput.validateStyles({
           [styleName]: stylePropValue
@@ -3312,14 +3329,30 @@ var CompositionBuilder = class _CompositionBuilder {
         } else {
           validStylesPropValues[styleName] = stylePropValue;
         }
+      }
+      if (Object.keys(validStylesPropValues).length === 0) {
+        continue;
+      }
+      try {
         this.api.doUpdateElementProperty({
           elementId: element.id,
           propertyName: "_styles",
           propertyValue: validStylesPropValues,
           elementType: node.tagName
         });
+      } catch (error) {
+        errors.push(String(error));
       }
     }
+    for (const [customCSSId, customCSS] of Object.entries(this.elementCusomCSS)) {
+      const { element, node } = this.matchNodeByConfigId(customCSSId);
+      this.api.doUpdateElementProperty({
+        elementId: element.id,
+        propertyName: "_styles",
+        propertyValue: { custom_css: customCSS },
+        elementType: node.tagName
+      });
+    }
     return {
       errors,
       invalidStyles
@@ -3381,162 +3414,141 @@ import { toolPrompts } from "@elementor/editor-mcp";
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = 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
+# RESOURCES (Read before use)
+- [elementor://global-classes] - Check FIRST for reusable classes
+- [elementor://global-variables] - ONLY use variables defined here
+
+# WORKFLOW
+1. Check/create global classes via "create-global-class" tool
+2. Build composition (THIS TOOL) - minimal inline styles
+3. Apply classes via "apply-global-class" tool
+
+# XML STRUCTURE
+- Use widget tags: \`<e-button configuration-id="btn1"></e-button>\`
+- Containers: "e-flexbox", "e-div-block", "e-tabs"
+- Every element needs unique "configuration-id"
 - 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)
+# CONFIGURATION
+- Map configuration-id \u2192 elementConfig (props) + stylesConfig (layout only)
+- All PropValues require \`$$type\` matching schema
+- NO LINKS in configuration
+- Retry on errors up to 10x
+
+Note about configuration ids: These names are visible to the end-user, make sure they make sense, related and relevant.
+
+# DESIGN PHILOSOPHY: CONTEXT-DRIVEN CREATIVITY
+
+**Use the user's context aggressively.** Business type, brand personality, target audience, and purpose should drive every design decision. A law firm needs gravitas; a children's app needs playfulness. Don't default to generic.
+
+## SIZING: DEFAULT IS NO SIZE (CRITICAL)
+
+**DO NOT specify height or width unless you have a specific visual reason.**
+
+Flexbox and CSS already handle sizing automatically:
+- Containers grow to fit their content
+- Flex children distribute space via flex properties, not width/height
+- Text elements size to their content
+
+WHEN TO SPECIFY SIZE:
+- min-height on ROOT section for viewport-spanning hero (use min-height, NOT height)
+- max-width for contained content areas (e.g., max-width: 60rem)
+- Explicit aspect ratios for media containers
+
+NEVER SPECIFY:
+- height on nested containers (causes overflow)
+- width on flex children (use flex-basis or gap instead)
+- 100vh on anything except root-level sections
+- Any size "just to be safe" - if unsure, OMIT IT
+
+vh units are VIEWPORT-relative. Nested 100vh inside 100vh = 200vh overflow.
+
+GOOD: \`<e-flexbox>content naturally sizes</e-flexbox>\`
+BAD: \`<e-flexbox style="height:100vh"><e-div-block style="height:100vh">overflow</e-div-block></e-flexbox>\`
+
+## Layout Variety (Break the Template)
+- AVOID: Full-width 100vh hero \u2192 three columns \u2192 testimonials \u2192 CTA (every AI does this)
+- VARY heights: Use auto-height sections with generous padding (6rem+). Let content breathe
+- VARY widths: Not everything spans full width. Use contained sections (max-width: 960px) mixed with edge-to-edge
+- ASYMMETRIC grids: 2:1, 1:3, offset layouts. Avoid equal column widths
+- Negative space as design element: Large margins create focus and sophistication
+- Break alignment intentionally: Offset headings, overlapping elements, broken grids
+
+## Visual Depth & Effects
+- Layer elements: Overlapping cards, text over images, floating elements
+- Subtle shadows with color tint (not pure black): \`box-shadow: 0 20px 60px rgba(<brand-color-here>, 0.15)\`
+- Gradient overlays on images for text readability
+- Border radius variation: Mix sharp (0) and soft (1rem+) corners purposefully
+- Backdrop blur for glassmorphism where appropriate
+- Micro-interactions via CSS: hover transforms, transitions (0.3s ease)
+
+## Typography with Character
+- Display fonts for headlines (from user's brand or contextually appropriate)
+- Size contrast: 4rem+ headlines vs 1rem body. Make hierarchy unmistakable
+- Letter-spacing: Tight for large headlines (-0.02em), loose for small caps (0.1em)
+- Line-height: Tight for headlines (1.1), generous for body (1.6-1.8)
+- Text decoration: Underlines, highlights, gradient text for emphasis
+
+## Color with Purpose
+- Extract palette from user context (brand colors, industry norms, mood)
+- 60-30-10 rule: dominant, secondary, accent
+- Tinted neutrals over pure grays: warm (#faf8f5, #2d2a26) or cool (#f5f7fa, #1e2430)
+- Color blocking: Large colored sections create visual rhythm
+- Gradient directions: Diagonal (135deg, 225deg) feel more dynamic than vertical
+
+## Spacing Strategy
+- Section padding: 6rem-10rem vertical, creating breathing room
+- Rhythm variation: Tight groups (2rem) with generous gaps between (6rem)
+- Use rem/em exclusively for responsive scaling
+- Generous padding on CTAs: min 1rem 2.5rem
+
+# HARD CONSTRAINTS
+- Variables ONLY from [elementor://global-variables] (others throw errors)
+- Avoid SVG widgets unless assets are pre-uploaded
+- Check \`llm_guidance\` in widget schemas
+
+# PARAMETERS
 - **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)
+- **elementConfig**: configuration-id \u2192 widget PropValues
+- **stylesConfig**: configuration-id \u2192 style PropValues (layout only)
+- **customCSS**: configuration-id \u2192 CSS rules (no selectors, semicolon-separated)
   `);
   buildCompositionsToolPrompt.example(`
-A Heading and a button inside a flexbox
+Section with heading + button (NO explicit heights - content sizes naturally):
 {
-  xmlStructure: "<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading1"></e-heading><e-button configuration-id="button1"></e-button></e-flexbox>"
+  xmlStructure: "<e-flexbox configuration-id="Main Section"><e-heading configuration-id="Section Title"></e-heading><e-button configuration-id="Call to Action"></e-button></e-flexbox>",
   elementConfig: {
-    "flex1": {
-      "tag": {
-        "$$type": "string",
-        "value": "section"
-      },
+    "section1": { "tag": { "$$type": "string", "value": "section" } }
+  },
+  customCSS: {
+    "Section Title": "padding: 6rem 4rem; background: linear-gradient(135deg, #faf8f5 0%, #f0ebe4 100%);"
   },
   stylesConfig: {
-    "heading1": {
-      "font-size": {
-        "$$type": "size",
-        "value": {
-          "size": { "$$type": "number", "value": 24 },
-          "unit": { "$$type": "string", "value": "px" }
-        }
-      },
-      "color": {
-        "$$type": "color",
-        "value": { "$$type": "string", "value": "#333" }
-      }
+    "Section Title": {
+      "font-size": { "$$type": "size", "value": { "size": { "$$type": "number", "value": 3.5 }, "unit": { "$$type": "string", "value": "rem" } } },
+      "color": { "$$type": "color", "value": { "$$type": "string", "value": "#2d2a26" } }
     }
-  },
+  }
 }
+Note: No height/width specified on any element - flexbox handles layout automatically.
 `);
   buildCompositionsToolPrompt.parameter(
     "xmlStructure",
-    `**MANDATORY** A valid XML structure representing the composition to be built, using custom elementor tags, styling and configuration PropValues.`
-  );
-  buildCompositionsToolPrompt.parameter(
-    "elementConfig",
-    `**MANDATORY** A record mapping configuration IDs to their corresponding configuration objects, defining the PropValues for each element created.`
+    `Valid XML structure with custom elementor tags and configuration-id attributes.`
   );
+  buildCompositionsToolPrompt.parameter("elementConfig", `Record mapping configuration IDs to widget PropValues.`);
   buildCompositionsToolPrompt.parameter(
     "stylesConfig",
-    `**MANDATORY** A record mapping style PropTypes to their corresponding style configuration objects, defining the PropValues for styles to be applied to elements.`
-  );
-  buildCompositionsToolPrompt.instruction(
-    `You will be provided the XML structure with element IDs. These IDs represent the actual elementor widgets created on the page/post.
-You should use these IDs as reference for further configuration, styling or changing elements later on.`
+    `Record mapping configuration IDs to style PropValues (layout/positioning only).`
   );
   buildCompositionsToolPrompt.instruction(
-    `**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.`
+    `Element IDs in the returned XML represent actual widgets. Use these IDs for subsequent styling or configuration changes.`
   );
   return buildCompositionsToolPrompt.prompt();
 };
 
 // src/mcp/tools/build-composition/schema.ts
-import { z } from "@elementor/schema";
+import { zod as z } from "@elementor/editor-mcp";
 var inputSchema = {
   xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
   elementConfig: z.record(
@@ -3554,7 +3566,11 @@ var inputSchema = {
     )
   ).describe(
     `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
-  ).default({})
+  ).default({}),
+  customCSS: z.record(
+    z.string().describe("The configuration id"),
+    z.string().describe("The custom CSS for the element. MANDATORY")
+  ).describe("A record mapping element IDs to their custom CSS.").default({})
 };
 var outputSchema = {
   errors: z.string().describe("Error message if the composition building failed").optional(),
@@ -3583,7 +3599,7 @@ var initBuildCompositionsTool = (reg) => {
       hints: [{ name: "claude-sonnet-4-5" }]
     },
     handler: async (params) => {
-      const { xmlStructure, elementConfig, stylesConfig } = params;
+      const { xmlStructure, elementConfig, stylesConfig, customCSS } = params;
       let generatedXML = "";
       const errors = [];
       const rootContainers = [];
@@ -3595,17 +3611,18 @@ var initBuildCompositionsTool = (reg) => {
         });
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
+        compositionBuilder.setCustomCSS(customCSS);
         const {
           configErrors,
           invalidStyles,
           rootContainers: generatedRootContainers
         } = compositionBuilder.build(documentContainer);
+        rootContainers.push(...generatedRootContainers);
         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.");
         }
-        rootContainers.push(...generatedRootContainers);
         Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
           const customCss = {
             value: rawCssRules.join(";\n")
@@ -3654,10 +3671,7 @@ var initBuildCompositionsTool = (reg) => {
 
 ${errorMessages.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 against the PropType schemas`;
+        )}`;
         throw new Error(errorText);
       }
       return {
@@ -3986,7 +4000,14 @@ var initGetElementConfigTool = (reg) => {
 var initCanvasMcp = (reg) => {
   const { setMCPDescription } = reg;
   setMCPDescription(
-    'Everything related to creative design, layout, styling and building the pages, specifically element of type "widget"'
+    `Everything related to creative design, layout, styling and building the pages, specifically element of type "widget".
+# Canvas workflow for new compositions
+- Check existing global variables
+- Check existing global classes
+- Create missing global variables
+- Create reusable global classes
+- Build valid XML with minimal inline styles (layout/positioning only)
+- Apply global classes to elements`
   );
   initWidgetsSchemaResource(reg);
   initDocumentStructureResource(reg);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.0.0-621",
+  "version": "4.0.0-manual",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-621",
-    "@elementor/editor-controls": "4.0.0-621",
-    "@elementor/editor-documents": "4.0.0-621",
-    "@elementor/editor-elements": "4.0.0-621",
-    "@elementor/editor-interactions": "4.0.0-621",
-    "@elementor/editor-mcp": "4.0.0-621",
-    "@elementor/editor-notifications": "4.0.0-621",
-    "@elementor/editor-props": "4.0.0-621",
-    "@elementor/editor-responsive": "4.0.0-621",
-    "@elementor/editor-styles": "4.0.0-621",
-    "@elementor/editor-styles-repository": "4.0.0-621",
-    "@elementor/editor-ui": "4.0.0-621",
-    "@elementor/editor-v1-adapters": "4.0.0-621",
-    "@elementor/schema": "4.0.0-621",
-    "@elementor/twing": "4.0.0-621",
+    "@elementor/editor": "4.0.0-manual",
+    "@elementor/editor-controls": "4.0.0-manual",
+    "@elementor/editor-documents": "4.0.0-manual",
+    "@elementor/editor-elements": "4.0.0-manual",
+    "@elementor/editor-interactions": "4.0.0-manual",
+    "@elementor/editor-mcp": "4.0.0-manual",
+    "@elementor/editor-notifications": "4.0.0-manual",
+    "@elementor/editor-props": "4.0.0-manual",
+    "@elementor/editor-responsive": "4.0.0-manual",
+    "@elementor/editor-styles": "4.0.0-manual",
+    "@elementor/editor-styles-repository": "4.0.0-manual",
+    "@elementor/editor-ui": "4.0.0-manual",
+    "@elementor/editor-v1-adapters": "4.0.0-manual",
+    "@elementor/schema": "4.0.0-manual",
+    "@elementor/twing": "4.0.0-manual",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-621",
-    "@elementor/wp-media": "4.0.0-621",
+    "@elementor/utils": "4.0.0-manual",
+    "@elementor/wp-media": "4.0.0-manual",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/composition-builder/composition-builder.ts

@@ -26,11 +26,13 @@ type CtorOptions = {
 	api?: Partial< API >;
 	elementConfig?: AnyConfig;
 	stylesConfig?: AnyConfig;
+	customCSS?: Record< string, string >;
 };
 
 export class CompositionBuilder {
 	private elementConfig: Record< string, Record< string, AnyValue > > = {};
 	private elementStylesConfig: Record< string, Record< string, AnyValue > > = {};
+	private elementCusomCSS: Record< string, string > = {};
 	private rootContainers: V1Element[] = [];
 	private containerElements: string[] = [];
 	private api: API = {
@@ -56,11 +58,12 @@ export class CompositionBuilder {
 	}
 
 	constructor( opts: CtorOptions ) {
-		const { api = {}, elementConfig = {}, stylesConfig = {}, xml } = opts;
+		const { api = {}, elementConfig = {}, stylesConfig = {}, customCSS = {}, xml } = opts;
 		this.xml = xml;
 		Object.assign( this.api, api );
 		this.setElementConfig( elementConfig );
 		this.setStylesConfig( stylesConfig );
+		this.setCustomCSS( customCSS );
 	}
 
 	setElementConfig( config: Record< string, Record< string, AnyValue > > ) {
@@ -71,6 +74,10 @@ export class CompositionBuilder {
 		this.elementStylesConfig = config;
 	}
 
+	setCustomCSS( config: Record< string, string > ) {
+		this.elementCusomCSS = config;
+	}
+
 	getXML() {
 		return this.xml;
 	}
@@ -92,6 +99,9 @@ export class CompositionBuilder {
 					model: {
 						elType: elementTag,
 						id: generateElementId(),
+						editor_settings: {
+							title: node.getAttribute( 'configuration-id' ) ?? undefined,
+						},
 					},
 					options: { useHistory: false },
 			  } )
@@ -101,6 +111,9 @@ export class CompositionBuilder {
 						elType: 'widget',
 						widgetType: elementTag,
 						id: generateElementId(),
+						editor_settings: {
+							title: node.getAttribute( 'configuration-id' ) ?? undefined,
+						},
 					},
 					options: { useHistory: false },
 			  } );
@@ -144,9 +157,9 @@ export class CompositionBuilder {
 	applyStyles() {
 		const errors: string[] = [];
 		const invalidStyles: Record< string, string[] > = {};
-		const validStylesPropValues: Record< string, AnyValue > = {};
 		for ( const [ styleId, styleConfig ] of Object.entries( this.elementStylesConfig ) ) {
 			const { element, node } = this.matchNodeByConfigId( styleId );
+			const validStylesPropValues: Record< string, AnyValue > = {};
 			for ( const [ styleName, stylePropValue ] of Object.entries( styleConfig ) ) {
 				const { valid, errors: validationErrors } = validateInput.validateStyles( {
 					[ styleName ]: stylePropValue,
@@ -160,14 +173,30 @@ export class CompositionBuilder {
 				} else {
 					validStylesPropValues[ styleName ] = stylePropValue;
 				}
+			}
+			if ( Object.keys( validStylesPropValues ).length === 0 ) {
+				continue;
+			}
+			try {
 				this.api.doUpdateElementProperty( {
 					elementId: element.id,
 					propertyName: '_styles',
 					propertyValue: validStylesPropValues,
 					elementType: node.tagName,
 				} );
+			} catch ( error ) {
+				errors.push( String( error ) );
 			}
 		}
+		for ( const [ customCSSId, customCSS ] of Object.entries( this.elementCusomCSS ) ) {
+			const { element, node } = this.matchNodeByConfigId( customCSSId );
+			this.api.doUpdateElementProperty( {
+				elementId: element.id,
+				propertyName: '_styles',
+				propertyValue: { custom_css: customCSS },
+				elementType: node.tagName,
+			} );
+		}
 		return {
 			errors,
 			invalidStyles,

package/src/mcp/canvas-mcp.ts

@@ -10,7 +10,14 @@ import { initGetElementConfigTool } from './tools/get-element-config/tool';
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	const { setMCPDescription } = reg;
 	setMCPDescription(
-		'Everything related to creative design, layout, styling and building the pages, specifically element of type "widget"'
+		`Everything related to creative design, layout, styling and building the pages, specifically element of type "widget".
+# Canvas workflow for new compositions
+- Check existing global variables
+- Check existing global classes
+- Create missing global variables
+- Create reusable global classes
+- Build valid XML with minimal inline styles (layout/positioning only)
+- Apply global classes to elements`
 	);
 	initWidgetsSchemaResource( reg );
 	initDocumentStructureResource( reg );