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

package/dist/index.js

@@ -114,7 +114,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.
+
+`
         }
       ]
     };
@@ -228,7 +234,7 @@ The css string must follow standard CSS syntax, with properties and values separ
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
-var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_mcp4 = require("@elementor/editor-mcp");
 
 // src/components/classes-rename.tsx
 var import_react = require("react");
@@ -3211,6 +3217,7 @@ var validateInput = {
 var CompositionBuilder = class _CompositionBuilder {
   elementConfig = {};
   elementStylesConfig = {};
+  elementCusomCSS = {};
   rootContainers = [];
   containerElements = [];
   api = {
@@ -3234,11 +3241,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;
@@ -3246,6 +3254,9 @@ var CompositionBuilder = class _CompositionBuilder {
   setStylesConfig(config) {
     this.elementStylesConfig = config;
   }
+  setCustomCSS(config) {
+    this.elementCusomCSS = config;
+  }
   getXML() {
     return this.xml;
   }
@@ -3261,7 +3272,10 @@ var CompositionBuilder = class _CompositionBuilder {
       container: targetContainer,
       model: {
         elType: elementTag,
-        id: (0, import_editor_elements9.generateElementId)()
+        id: (0, import_editor_elements9.generateElementId)(),
+        editor_settings: {
+          title: node.getAttribute("configuration-id") ?? void 0
+        }
       },
       options: { useHistory: false }
     }) : this.api.createElement({
@@ -3269,7 +3283,10 @@ var CompositionBuilder = class _CompositionBuilder {
       model: {
         elType: "widget",
         widgetType: elementTag,
-        id: (0, import_editor_elements9.generateElementId)()
+        id: (0, import_editor_elements9.generateElementId)(),
+        editor_settings: {
+          title: node.getAttribute("configuration-id") ?? void 0
+        }
       },
       options: { useHistory: false }
     });
@@ -3310,9 +3327,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
@@ -3326,14 +3343,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
@@ -3395,187 +3428,170 @@ 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
+# 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.`
+    `Record mapping configuration IDs to style PropValues (layout/positioning only).`
   );
   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.`
-  );
-  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
-var import_schema = require("@elementor/schema");
+var import_editor_mcp3 = require("@elementor/editor-mcp");
 var inputSchema = {
-  xmlStructure: import_schema.z.string().describe("The XML structure representing the composition to be built"),
-  elementConfig: import_schema.z.record(
-    import_schema.z.string().describe("The configuration id"),
-    import_schema.z.record(
-      import_schema.z.string().describe("property name"),
-      import_schema.z.any().describe(`The PropValue for the property, refer to ${WIDGET_SCHEMA_URI}`)
+  xmlStructure: import_editor_mcp3.zod.string().describe("The XML structure representing the composition to be built"),
+  elementConfig: import_editor_mcp3.zod.record(
+    import_editor_mcp3.zod.string().describe("The configuration id"),
+    import_editor_mcp3.zod.record(
+      import_editor_mcp3.zod.string().describe("property name"),
+      import_editor_mcp3.zod.any().describe(`The PropValue for the property, refer to ${WIDGET_SCHEMA_URI}`)
     )
   ).describe("A record mapping element IDs to their configuration objects. REQUIRED"),
-  stylesConfig: import_schema.z.record(
-    import_schema.z.string().describe("The configuration id"),
-    import_schema.z.record(
-      import_schema.z.string().describe("StyleSchema property name"),
-      import_schema.z.any().describe(`The PropValue for the style property. MANDATORY, refer to [${STYLE_SCHEMA_URI}]`)
+  stylesConfig: import_editor_mcp3.zod.record(
+    import_editor_mcp3.zod.string().describe("The configuration id"),
+    import_editor_mcp3.zod.record(
+      import_editor_mcp3.zod.string().describe("StyleSchema property name"),
+      import_editor_mcp3.zod.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}].`
-  ).default({})
+  ).default({}),
+  customCSS: import_editor_mcp3.zod.record(
+    import_editor_mcp3.zod.string().describe("The configuration id"),
+    import_editor_mcp3.zod.string().describe("The custom CSS for the element. MANDATORY")
+  ).describe("A record mapping element IDs to their custom CSS.").default({})
 };
 var outputSchema = {
-  errors: import_schema.z.string().describe("Error message if the composition building failed").optional(),
-  xmlStructure: import_schema.z.string().describe(
+  errors: import_editor_mcp3.zod.string().describe("Error message if the composition building failed").optional(),
+  xmlStructure: import_editor_mcp3.zod.string().describe(
     "The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs."
   ).optional(),
-  llm_instructions: import_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
+  llm_instructions: import_editor_mcp3.zod.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
 };
 
 // src/mcp/tools/build-composition/tool.ts
@@ -3597,7 +3613,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 = [];
@@ -3609,17 +3625,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")
@@ -3668,10 +3685,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 {
@@ -3792,23 +3806,23 @@ The $$type property is MANDATORY for every value, it is required to parse the va
 `;
 
 // src/mcp/tools/configure-element/schema.ts
-var import_schema3 = require("@elementor/schema");
+var import_schema2 = require("@elementor/schema");
 var inputSchema2 = {
-  propertiesToChange: import_schema3.z.record(
-    import_schema3.z.string().describe("The property name."),
-    import_schema3.z.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
-    import_schema3.z.any()
+  propertiesToChange: import_schema2.z.record(
+    import_schema2.z.string().describe("The property name."),
+    import_schema2.z.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
+    import_schema2.z.any()
   ).describe("An object record containing property names and their new values to be set on the element"),
-  stylePropertiesToChange: import_schema3.z.record(
-    import_schema3.z.string().describe("The style property name"),
-    import_schema3.z.any().describe(`The style PropValue, refer to [${STYLE_SCHEMA_URI}] how to generate values`),
-    import_schema3.z.any()
+  stylePropertiesToChange: import_schema2.z.record(
+    import_schema2.z.string().describe("The style property name"),
+    import_schema2.z.any().describe(`The style PropValue, refer to [${STYLE_SCHEMA_URI}] how to generate values`),
+    import_schema2.z.any()
   ).describe("An object record containing style property names and their new values to be set on the element").default({}),
-  elementType: import_schema3.z.string().describe("The type of the element to retreive the schema"),
-  elementId: import_schema3.z.string().describe("The unique id of the element to configure")
+  elementType: import_schema2.z.string().describe("The type of the element to retreive the schema"),
+  elementId: import_schema2.z.string().describe("The unique id of the element to configure")
 };
 var outputSchema2 = {
-  success: import_schema3.z.boolean().describe(
+  success: import_schema2.z.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
 };
@@ -3914,18 +3928,18 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 // src/mcp/tools/get-element-config/tool.ts
 var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_props8 = require("@elementor/editor-props");
-var import_schema5 = require("@elementor/schema");
+var import_schema4 = require("@elementor/schema");
 var schema = {
-  elementId: import_schema5.z.string()
+  elementId: import_schema4.z.string()
 };
 var outputSchema3 = {
-  properties: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
-  style: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
-  childElements: import_schema5.z.array(
-    import_schema5.z.object({
-      id: import_schema5.z.string(),
-      elementType: import_schema5.z.string(),
-      childElements: import_schema5.z.array(import_schema5.z.any()).describe("An array of child element IDs, when applicable, same structure recursively")
+  properties: import_schema4.z.record(import_schema4.z.string(), import_schema4.z.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
+  style: import_schema4.z.record(import_schema4.z.string(), import_schema4.z.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
+  childElements: import_schema4.z.array(
+    import_schema4.z.object({
+      id: import_schema4.z.string(),
+      elementType: import_schema4.z.string(),
+      childElements: import_schema4.z.array(import_schema4.z.any()).describe("An array of child element IDs, when applicable, same structure recursively")
     })
   ).describe("An array of child element IDs, when applicable, with recursive structure")
 };
@@ -4000,7 +4014,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);
@@ -4493,7 +4514,7 @@ function init() {
     component: ClassesRename
   });
   initCanvasMcp(
-    (0, import_editor_mcp3.getMCPByDomain)("canvas", {
+    (0, import_editor_mcp4.getMCPByDomain)("canvas", {
       instructions: mcpDescription
     })
   );