@elementor/editor-canvas 4.1.0-838 → 4.1.0-beta1

package/dist/index.js

@@ -121,6 +121,9 @@ function isWidgetAvailableForLLM(config) {
   if (config.meta?.llm_support === false) {
     return false;
   }
+  if (config.title === "Component") {
+    return false;
+  }
   if (config.atomic_props_schema) {
     return true;
   }
@@ -342,7 +345,7 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 
 // 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");
@@ -3882,6 +3885,7 @@ var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
+var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
   return import_editor_props6.Schema.adjustLlmPropValueSchema(value, {
@@ -3990,6 +3994,7 @@ var doUpdateElementProperty = (params) => {
     },
     withHistory: false
   });
+  (0, import_editor_v1_adapters19.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
 // src/mcp/utils/validate-input.ts
@@ -4085,6 +4090,7 @@ var CompositionBuilder = class _CompositionBuilder {
   rootContainers = [];
   api = {
     createElement: import_editor_elements13.createElement,
+    deleteElement: import_editor_elements13.deleteElement,
     getWidgetsCache: import_editor_elements13.getWidgetsCache,
     generateElementId: import_editor_elements13.generateElementId,
     getContainer: import_editor_elements13.getContainer,
@@ -4135,7 +4141,8 @@ var CompositionBuilder = class _CompositionBuilder {
       elements: children,
       editor_settings: {
         title: node.getAttribute("configuration-id") ?? void 0
-      }
+      },
+      elType: "widget"
     };
     if (isWidget) {
       return { ...base, elType: "widget", widgetType: elementTag };
@@ -4167,12 +4174,6 @@ var CompositionBuilder = class _CompositionBuilder {
     }
     return errors;
   }
-  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) {
@@ -4294,13 +4295,24 @@ ${childTypeErrors.join("\n")}`);
     const children = Array.from(this.xml.children);
     for (const childNode of children) {
       const modelTree = this.buildModelTree(childNode, widgetsCache);
-      const newElement = this.api.createElement({
-        container: rootContainer,
-        model: modelTree,
-        options: { useHistory: false }
-      });
-      this.rootContainers.push(newElement);
-      await this.awaitViewRender(newElement);
+      try {
+        const newElement = this.api.createElement({
+          container: rootContainer,
+          model: modelTree,
+          options: { useHistory: false }
+        });
+        this.rootContainers.push(newElement);
+        await this.awaitViewRender(newElement);
+      } catch (e) {
+        const attemptToRestoreInvalidContainer = this.api.getContainer(modelTree.id);
+        if (attemptToRestoreInvalidContainer) {
+          this.api.deleteElement({
+            container: attemptToRestoreInvalidContainer,
+            options: { useHistory: false }
+          });
+        }
+        throw e;
+      }
     }
     const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();
     return {
@@ -4324,6 +4336,7 @@ function getCompositionTargetContainer(documentContainer, documentType) {
 
 // src/mcp/tools/build-composition/prompt.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
+var BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = (0, import_editor_mcp2.toolPrompts)("build-compositions");
   buildCompositionsToolPrompt.description(`
@@ -4505,12 +4518,25 @@ var outputSchema = {
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "build-compositions-guide",
+    BUILD_COMPOSITIONS_GUIDE_URI,
+    {
+      title: "Build Compositions Guide",
+      description: "Detailed guide for using the build-compositions tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
+    })
+  );
   addTool({
     name: "build-compositions",
-    description: generatePrompt(),
+    description: "Build V4 element compositions on the Elementor canvas. Read the guide resource before use.",
     schema: inputSchema,
     requiredResources: [
+      { description: "Build compositions guide", uri: BUILD_COMPOSITIONS_GUIDE_URI },
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI },
       { description: "Global Classes", uri: "elementor://global-classes" },
@@ -4534,6 +4560,7 @@ var initBuildCompositionsTool = (reg) => {
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: import_editor_elements14.createElement,
+          deleteElement: import_editor_elements14.deleteElement,
           getWidgetsCache: import_editor_elements14.getWidgetsCache
         });
         compositionBuilder.setElementConfig(elementConfig);
@@ -4638,7 +4665,12 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/mcp/tools/configure-element/prompt.ts
-var configureElementToolPrompt = `Configure an existing element on the page.
+var import_editor_mcp3 = require("@elementor/editor-mcp");
+var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
+var generatePrompt2 = () => {
+  const configureElementToolPrompt = (0, import_editor_mcp3.toolPrompts)("configure-element");
+  configureElementToolPrompt.description(`
+Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
@@ -4653,12 +4685,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retrieve and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-# Parameters
-- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object.
-- stylePropertiesToChange: An object containing the style properties to change, with their new values. OPTIONAL
-- elementId: The ID of the element to configure. MANDATORY
-- elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
-
 # When to use this tool
 When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
 This tool handles elements of type "widget".
@@ -4687,7 +4713,7 @@ You can use multiple property changes at once by providing multiple entries in t
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
 
 Make sure you have the "widget-schema-by-type" resource available to retrieve the PropType schema for the element type you are configuring.
-Make sure you have to "styles-schema" resources available to retrieve the common styles schema.
+Make sure you have the "styles-schema" resources available to retrieve the common styles schema.
 
 # How to configure elements
 We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
@@ -4695,8 +4721,21 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
 
 Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
-
-# Example
+`);
+  configureElementToolPrompt.parameter("elementId", "The ID of the element to configure. MANDATORY.");
+  configureElementToolPrompt.parameter(
+    "elementType",
+    "The type of the element to configure (i.e. e-heading, e-button). MANDATORY."
+  );
+  configureElementToolPrompt.parameter(
+    "propertiesToChange",
+    "An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object."
+  );
+  configureElementToolPrompt.parameter(
+    "stylePropertiesToChange",
+    "An object containing the style properties to change, with their new values. OPTIONAL."
+  );
+  configureElementToolPrompt.example(`
 \`\`\`json
 {
   propertiesToChange: {
@@ -4712,7 +4751,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   },
   stylePropertiesToChange: {
     'line-height': {
-      $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+      $$type: 'size',
       value: {
         size: {
           $$type: 'number',
@@ -4729,11 +4768,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
-
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+`);
+  configureElementToolPrompt.instruction(
+    "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
+  );
+  return configureElementToolPrompt.prompt();
+};
+var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();
 
 // src/mcp/tools/configure-element/schema.ts
 var import_schema3 = require("@elementor/schema");
@@ -4759,15 +4800,28 @@ var outputSchema2 = {
 
 // src/mcp/tools/configure-element/tool.ts
 var initConfigureElementTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "configure-element-guide",
+    CONFIGURE_ELEMENT_GUIDE_URI,
+    {
+      title: "Configure Element Guide",
+      description: "Detailed guide for using the configure-element tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt2() }]
+    })
+  );
   addTool({
     name: "configure-element",
-    description: configureElementToolPrompt,
+    description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
     schema: inputSchema2,
     outputSchema: outputSchema2,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Styles schema", uri: STYLE_SCHEMA_URI }
+      { description: "Styles schema", uri: STYLE_SCHEMA_URI },
+      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI }
     ],
     modelPreferences: {
       hints: [{ name: "claude-sonnet-4-5" }],
@@ -4965,15 +5019,6 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  const { setMCPDescription } = reg;
-  setMCPDescription(
-    `Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- Configure elements settings and styles
-- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
-- Get and retrieve element configuration values
-`
-  );
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -5101,14 +5146,14 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters19.blockCommand)({
+  (0, import_editor_v1_adapters20.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters19.blockCommand)({
+  (0, import_editor_v1_adapters20.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -5184,7 +5229,7 @@ function shouldBlock(sourceElements, targetElements) {
 // src/style-commands/paste-style.ts
 var import_editor_elements20 = require("@elementor/editor-elements");
 var import_editor_props10 = require("@elementor/editor-props");
-var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
@@ -5231,9 +5276,9 @@ function getTitleForContainers(containers) {
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters21.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -5309,12 +5354,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters21.blockCommand)({
+  (0, import_editor_v1_adapters22.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters21.__privateListenTo)(
-    (0, import_editor_v1_adapters21.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters22.__privateListenTo)(
+    (0, import_editor_v1_adapters22.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -5365,14 +5410,14 @@ function pasteClasses(containers, classes) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements21 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters23.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -5416,12 +5461,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters23.blockCommand)({
+  (0, import_editor_v1_adapters24.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters23.__privateListenTo)(
-    (0, import_editor_v1_adapters23.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters24.__privateListenTo)(
+    (0, import_editor_v1_adapters24.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }
@@ -5467,8 +5512,14 @@ function init() {
     component: ClassesRename
   });
   initCanvasMcp(
-    (0, import_editor_mcp3.getMCPByDomain)("canvas", {
-      instructions: mcpDescription
+    (0, import_editor_mcp4.getMCPByDomain)("canvas", {
+      instructions: `Everything related to V4 ( Atomic ) canvas.
+# Canvas workflow for new compositions
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`,
+      docs: mcpDescription
     })
   );
   initTabsModelExtensions();

package/dist/index.mjs

@@ -64,6 +64,9 @@ function isWidgetAvailableForLLM(config) {
   if (config.meta?.llm_support === false) {
     return false;
   }
+  if (config.title === "Component") {
+    return false;
+  }
   if (config.atomic_props_schema) {
     return true;
   }
@@ -3853,7 +3856,7 @@ function getElementDisplayName(container) {
 import { getCurrentDocument } from "@elementor/editor-documents";
 import {
   createElement as createElement8,
-  deleteElement,
+  deleteElement as deleteElement2,
   getContainer as getContainer5,
   getWidgetsCache as getWidgetsCache9
 } from "@elementor/editor-elements";
@@ -3861,6 +3864,7 @@ import {
 // src/composition-builder/composition-builder.ts
 import {
   createElement as createElement7,
+  deleteElement,
   generateElementId as generateElementId2,
   getContainer as getContainer4,
   getWidgetsCache as getWidgetsCache8
@@ -3876,6 +3880,7 @@ import {
 } from "@elementor/editor-elements";
 import { getPropSchemaFromCache, Schema as Schema2 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
+import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
   return Schema2.adjustLlmPropValueSchema(value, {
@@ -3984,6 +3989,7 @@ var doUpdateElementProperty = (params) => {
     },
     withHistory: false
   });
+  runCommandSync2("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
 // src/mcp/utils/validate-input.ts
@@ -4079,6 +4085,7 @@ var CompositionBuilder = class _CompositionBuilder {
   rootContainers = [];
   api = {
     createElement: createElement7,
+    deleteElement,
     getWidgetsCache: getWidgetsCache8,
     generateElementId: generateElementId2,
     getContainer: getContainer4,
@@ -4129,7 +4136,8 @@ var CompositionBuilder = class _CompositionBuilder {
       elements: children,
       editor_settings: {
         title: node.getAttribute("configuration-id") ?? void 0
-      }
+      },
+      elType: "widget"
     };
     if (isWidget) {
       return { ...base, elType: "widget", widgetType: elementTag };
@@ -4161,12 +4169,6 @@ var CompositionBuilder = class _CompositionBuilder {
     }
     return errors;
   }
-  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) {
@@ -4288,13 +4290,24 @@ ${childTypeErrors.join("\n")}`);
     const children = Array.from(this.xml.children);
     for (const childNode of children) {
       const modelTree = this.buildModelTree(childNode, widgetsCache);
-      const newElement = this.api.createElement({
-        container: rootContainer,
-        model: modelTree,
-        options: { useHistory: false }
-      });
-      this.rootContainers.push(newElement);
-      await this.awaitViewRender(newElement);
+      try {
+        const newElement = this.api.createElement({
+          container: rootContainer,
+          model: modelTree,
+          options: { useHistory: false }
+        });
+        this.rootContainers.push(newElement);
+        await this.awaitViewRender(newElement);
+      } catch (e) {
+        const attemptToRestoreInvalidContainer = this.api.getContainer(modelTree.id);
+        if (attemptToRestoreInvalidContainer) {
+          this.api.deleteElement({
+            container: attemptToRestoreInvalidContainer,
+            options: { useHistory: false }
+          });
+        }
+        throw e;
+      }
     }
     const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();
     return {
@@ -4318,6 +4331,7 @@ function getCompositionTargetContainer(documentContainer, documentType) {
 
 // src/mcp/tools/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
+var BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = toolPrompts("build-compositions");
   buildCompositionsToolPrompt.description(`
@@ -4499,12 +4513,25 @@ var outputSchema = {
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "build-compositions-guide",
+    BUILD_COMPOSITIONS_GUIDE_URI,
+    {
+      title: "Build Compositions Guide",
+      description: "Detailed guide for using the build-compositions tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
+    })
+  );
   addTool({
     name: "build-compositions",
-    description: generatePrompt(),
+    description: "Build V4 element compositions on the Elementor canvas. Read the guide resource before use.",
     schema: inputSchema,
     requiredResources: [
+      { description: "Build compositions guide", uri: BUILD_COMPOSITIONS_GUIDE_URI },
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI },
       { description: "Global Classes", uri: "elementor://global-classes" },
@@ -4528,6 +4555,7 @@ var initBuildCompositionsTool = (reg) => {
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement8,
+          deleteElement: deleteElement2,
           getWidgetsCache: getWidgetsCache9
         });
         compositionBuilder.setElementConfig(elementConfig);
@@ -4556,7 +4584,7 @@ var initBuildCompositionsTool = (reg) => {
       }
       if (errors.length) {
         rootContainers.forEach((rootContainer) => {
-          deleteElement({
+          deleteElement2({
             container: rootContainer,
             options: { useHistory: false }
           });
@@ -4632,7 +4660,12 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 import { getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
 
 // src/mcp/tools/configure-element/prompt.ts
-var configureElementToolPrompt = `Configure an existing element on the page.
+import { toolPrompts as toolPrompts2 } from "@elementor/editor-mcp";
+var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
+var generatePrompt2 = () => {
+  const configureElementToolPrompt = toolPrompts2("configure-element");
+  configureElementToolPrompt.description(`
+Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
@@ -4647,12 +4680,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retrieve and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-# Parameters
-- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object.
-- stylePropertiesToChange: An object containing the style properties to change, with their new values. OPTIONAL
-- elementId: The ID of the element to configure. MANDATORY
-- elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
-
 # When to use this tool
 When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
 This tool handles elements of type "widget".
@@ -4681,7 +4708,7 @@ You can use multiple property changes at once by providing multiple entries in t
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
 
 Make sure you have the "widget-schema-by-type" resource available to retrieve the PropType schema for the element type you are configuring.
-Make sure you have to "styles-schema" resources available to retrieve the common styles schema.
+Make sure you have the "styles-schema" resources available to retrieve the common styles schema.
 
 # How to configure elements
 We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
@@ -4689,8 +4716,21 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
 
 Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
-
-# Example
+`);
+  configureElementToolPrompt.parameter("elementId", "The ID of the element to configure. MANDATORY.");
+  configureElementToolPrompt.parameter(
+    "elementType",
+    "The type of the element to configure (i.e. e-heading, e-button). MANDATORY."
+  );
+  configureElementToolPrompt.parameter(
+    "propertiesToChange",
+    "An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object."
+  );
+  configureElementToolPrompt.parameter(
+    "stylePropertiesToChange",
+    "An object containing the style properties to change, with their new values. OPTIONAL."
+  );
+  configureElementToolPrompt.example(`
 \`\`\`json
 {
   propertiesToChange: {
@@ -4706,7 +4746,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   },
   stylePropertiesToChange: {
     'line-height': {
-      $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+      $$type: 'size',
       value: {
         size: {
           $$type: 'number',
@@ -4723,11 +4763,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
-
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+`);
+  configureElementToolPrompt.instruction(
+    "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
+  );
+  return configureElementToolPrompt.prompt();
+};
+var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();
 
 // src/mcp/tools/configure-element/schema.ts
 import { z as z2 } from "@elementor/schema";
@@ -4753,15 +4795,28 @@ var outputSchema2 = {
 
 // src/mcp/tools/configure-element/tool.ts
 var initConfigureElementTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "configure-element-guide",
+    CONFIGURE_ELEMENT_GUIDE_URI,
+    {
+      title: "Configure Element Guide",
+      description: "Detailed guide for using the configure-element tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt2() }]
+    })
+  );
   addTool({
     name: "configure-element",
-    description: configureElementToolPrompt,
+    description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
     schema: inputSchema2,
     outputSchema: outputSchema2,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Styles schema", uri: STYLE_SCHEMA_URI }
+      { description: "Styles schema", uri: STYLE_SCHEMA_URI },
+      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI }
     ],
     modelPreferences: {
       hints: [{ name: "claude-sonnet-4-5" }],
@@ -4959,15 +5014,6 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  const { setMCPDescription } = reg;
-  setMCPDescription(
-    `Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- Configure elements settings and styles
-- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
-- Get and retrieve element configuration values
-`
-  );
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -5479,7 +5525,13 @@ function init() {
   });
   initCanvasMcp(
     getMCPByDomain("canvas", {
-      instructions: mcpDescription
+      instructions: `Everything related to V4 ( Atomic ) canvas.
+# Canvas workflow for new compositions
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`,
+      docs: mcpDescription
     })
   );
   initTabsModelExtensions();

package/package.json

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

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

@@ -1,11 +1,13 @@
 import {
 	createElement,
 	type CreateElementParams,
+	deleteElement,
 	generateElementId,
 	getContainer,
 	getWidgetsCache,
 	type V1Element,
 	type V1ElementConfig,
+	type V1ElementModelProps,
 } from '@elementor/editor-elements';
 import { type z } from '@elementor/schema';
 
@@ -17,6 +19,7 @@ type AnyConfig = Record< string, Record< string, AnyValue > >;
 
 type API = {
 	createElement: typeof createElement;
+	deleteElement: typeof deleteElement;
 	getWidgetsCache: typeof getWidgetsCache;
 	generateElementId: typeof generateElementId;
 	getContainer: typeof getContainer;
@@ -38,6 +41,7 @@ export class CompositionBuilder {
 	private rootContainers: V1Element[] = [];
 	private api: API = {
 		createElement,
+		deleteElement,
 		getWidgetsCache,
 		generateElementId,
 		getContainer,
@@ -94,15 +98,26 @@ export class CompositionBuilder {
 
 		node.setAttribute( 'id', id );
 
-		const base = {
+		const base: V1ElementModelProps = {
 			id,
 			skipDefaultChildren: true,
-			elements: children,
+			elements: children as V1ElementModelProps[ 'elements' ],
 			editor_settings: {
 				title: node.getAttribute( 'configuration-id' ) ?? undefined,
 			},
+			elType: 'widget',
 		};
 
+		// TODO: Restore this code once components are working in compositions
+		// if ( elementTag === 'e-component' ) {
+		// 	// apply component id before applying values
+		// 	const elementConfig = this.elementConfig[ String( node.getAttribute( 'configuration-id' ) ) ];
+		// 	if ( elementConfig ) {
+		// 		base.settings = base.settings || {};
+		// 		base.settings.component_instance = elementConfig.component_instance;
+		// 	}
+		// }
+
 		if ( isWidget ) {
 			return { ...base, elType: 'widget' as const, widgetType: elementTag };
 		}
@@ -142,13 +157,6 @@ export class CompositionBuilder {
 		return errors;
 	}
 
-	private findSchemaForNode( node: Element ) {
-		const widgetsCache = this.api.getWidgetsCache() || {};
-		const widgetType = node.tagName;
-		const widgetData = widgetsCache[ widgetType ]?.atomic_props_schema;
-		return widgetData || null;
-	}
-
 	private matchNodeByConfigId( configId: string ) {
 		const node = this.xml.querySelector( `[configuration-id="${ configId }"]` );
 		if ( ! node ) {
@@ -282,15 +290,24 @@ export class CompositionBuilder {
 		for ( const childNode of children ) {
 			const modelTree = this.buildModelTree( childNode, widgetsCache );
 
-			const newElement = this.api.createElement( {
-				container: rootContainer,
-				model: modelTree as CreateElementParams[ 'model' ],
-				options: { useHistory: false },
-			} );
-
-			this.rootContainers.push( newElement );
-
-			await this.awaitViewRender( newElement );
+			try {
+				const newElement = this.api.createElement( {
+					container: rootContainer,
+					model: modelTree as CreateElementParams[ 'model' ],
+					options: { useHistory: false },
+				} );
+				this.rootContainers.push( newElement );
+				await this.awaitViewRender( newElement );
+			} catch ( e: unknown ) {
+				const attemptToRestoreInvalidContainer = this.api.getContainer( modelTree.id as string );
+				if ( attemptToRestoreInvalidContainer ) {
+					this.api.deleteElement( {
+						container: attemptToRestoreInvalidContainer,
+						options: { useHistory: false },
+					} );
+				}
+				throw e;
+			}
 		}
 
 		const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();

package/src/init.tsx

@@ -53,7 +53,13 @@ export function init() {
 
 	initCanvasMcp(
 		getMCPByDomain( 'canvas', {
-			instructions: mcpDescription,
+			instructions: `Everything related to V4 ( Atomic ) canvas.
+# Canvas workflow for new compositions
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`,
+			docs: mcpDescription,
 		} )
 	);
 

package/src/mcp/canvas-mcp.ts

@@ -12,15 +12,6 @@ import { initConfigureElementTool } from './tools/configure-element/tool';
 import { initGetElementConfigTool } from './tools/get-element-config/tool';
 
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
-	const { setMCPDescription } = reg;
-	setMCPDescription(
-		`Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- Configure elements settings and styles
-- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
-- Get and retrieve element configuration values
-`
-	);
 	initWidgetsSchemaResource( reg );
 	initAvailableWidgetsResource( reg );
 	initDocumentStructureResource( reg );

package/src/mcp/tools/build-composition/prompt.ts

@@ -2,6 +2,8 @@ import { toolPrompts } from '@elementor/editor-mcp';
 
 import { AVAILABLE_WIDGETS_URI } from '../../resources/available-widgets-resource';
 
+export const BUILD_COMPOSITIONS_GUIDE_URI = 'elementor://canvas/tools/build-compositions-guide';
+
 export const generatePrompt = () => {
 	const buildCompositionsToolPrompt = toolPrompts( 'build-compositions' );
 

package/src/mcp/tools/build-composition/tool.ts

@@ -13,17 +13,31 @@ import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-reso
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
-import { generatePrompt } from './prompt';
+import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 
 export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
-	const { addTool } = reg;
+	const { addTool, resource } = reg;
+
+	resource(
+		'build-compositions-guide',
+		BUILD_COMPOSITIONS_GUIDE_URI,
+		{
+			title: 'Build Compositions Guide',
+			description: 'Detailed guide for using the build-compositions tool',
+			mimeType: 'text/plain',
+		},
+		async ( uri: URL ) => ( {
+			contents: [ { uri: uri.href, mimeType: 'text/plain', text: generatePrompt() } ],
+		} )
+	);
 
 	addTool( {
 		name: 'build-compositions',
-		description: generatePrompt(),
+		description: 'Build V4 element compositions on the Elementor canvas. Read the guide resource before use.',
 		schema,
 		requiredResources: [
+			{ description: 'Build compositions guide', uri: BUILD_COMPOSITIONS_GUIDE_URI },
 			{ description: 'Widgets schema', uri: WIDGET_SCHEMA_URI },
 			{ description: 'Styles schema', uri: STYLE_SCHEMA_URI },
 			{ description: 'Global Classes', uri: 'elementor://global-classes' },
@@ -47,6 +61,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			try {
 				const compositionBuilder = CompositionBuilder.fromXMLString( xmlStructure, {
 					createElement,
+					deleteElement,
 					getWidgetsCache,
 				} );
 				compositionBuilder.setElementConfig( elementConfig );

package/src/mcp/tools/configure-element/prompt.ts

@@ -1,6 +1,14 @@
+import { toolPrompts } from '@elementor/editor-mcp';
+
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 
-export const configureElementToolPrompt = `Configure an existing element on the page.
+export const CONFIGURE_ELEMENT_GUIDE_URI = 'elementor://canvas/tools/configure-element-guide';
+
+export const generatePrompt = () => {
+	const configureElementToolPrompt = toolPrompts( 'configure-element' );
+
+	configureElementToolPrompt.description( `
+Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${ WIDGET_SCHEMA_URI }]
@@ -15,12 +23,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retrieve and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-# Parameters
-- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object.
-- stylePropertiesToChange: An object containing the style properties to change, with their new values. OPTIONAL
-- elementId: The ID of the element to configure. MANDATORY
-- elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
-
 # When to use this tool
 When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
 This tool handles elements of type "widget".
@@ -49,7 +51,7 @@ You can use multiple property changes at once by providing multiple entries in t
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
 
 Make sure you have the "widget-schema-by-type" resource available to retrieve the PropType schema for the element type you are configuring.
-Make sure you have to "styles-schema" resources available to retrieve the common styles schema.
+Make sure you have the "styles-schema" resources available to retrieve the common styles schema.
 
 # How to configure elements
 We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
@@ -57,8 +59,26 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
 
 Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+` );
+
+	configureElementToolPrompt.parameter( 'elementId', 'The ID of the element to configure. MANDATORY.' );
+
+	configureElementToolPrompt.parameter(
+		'elementType',
+		'The type of the element to configure (i.e. e-heading, e-button). MANDATORY.'
+	);
+
+	configureElementToolPrompt.parameter(
+		'propertiesToChange',
+		'An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object.'
+	);
 
-# Example
+	configureElementToolPrompt.parameter(
+		'stylePropertiesToChange',
+		'An object containing the style properties to change, with their new values. OPTIONAL.'
+	);
+
+	configureElementToolPrompt.example( `
 \`\`\`json
 {
   propertiesToChange: {
@@ -74,7 +94,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   },
   stylePropertiesToChange: {
     'line-height': {
-      $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+      $$type: 'size',
       value: {
         size: {
           $$type: 'number',
@@ -91,8 +111,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
+` );
 
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+	configureElementToolPrompt.instruction(
+		'The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects.'
+	);
+
+	return configureElementToolPrompt.prompt();
+};
+
+export const CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt();

package/src/mcp/tools/configure-element/tool.ts

@@ -4,20 +4,34 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { validateInput } from '../../utils/validate-input';
-import { configureElementToolPrompt } from './prompt';
+import { CONFIGURE_ELEMENT_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 
 export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
-	const { addTool } = reg;
+	const { addTool, resource } = reg;
+
+	resource(
+		'configure-element-guide',
+		CONFIGURE_ELEMENT_GUIDE_URI,
+		{
+			title: 'Configure Element Guide',
+			description: 'Detailed guide for using the configure-element tool',
+			mimeType: 'text/plain',
+		},
+		async ( uri: URL ) => ( {
+			contents: [ { uri: uri.href, mimeType: 'text/plain', text: generatePrompt() } ],
+		} )
+	);
 
 	addTool( {
 		name: 'configure-element',
-		description: configureElementToolPrompt,
+		description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
 		schema,
 		outputSchema,
 		requiredResources: [
 			{ description: 'Widgets schema', uri: WIDGET_SCHEMA_URI },
 			{ description: 'Styles schema', uri: STYLE_SCHEMA_URI },
+			{ description: 'Configure element guide', uri: CONFIGURE_ELEMENT_GUIDE_URI },
 		],
 		modelPreferences: {
 			hints: [ { name: 'claude-sonnet-4-5' } ],

package/src/mcp/utils/do-update-element-property.ts

@@ -7,6 +7,7 @@ import {
 } from '@elementor/editor-elements';
 import { getPropSchemaFromCache, type PropValue, Schema, type TransformablePropValue } from '@elementor/editor-props';
 import { type CustomCss, getStylesSchema } from '@elementor/editor-styles';
+import { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';
 import { type Utils as IUtils } from '@elementor/editor-variables';
 import { type z } from '@elementor/schema';
 
@@ -135,4 +136,5 @@ export const doUpdateElementProperty = ( params: OwnParams ) => {
 		},
 		withHistory: false,
 	} );
+	runCommandSync( 'document/save/set-is-modified', { status: true }, { internal: true } );
 };

package/src/mcp/utils/element-data-util.ts

@@ -17,6 +17,10 @@ export function isWidgetAvailableForLLM( config: V1ElementConfig | undefined ):
 	if ( config.meta?.llm_support === false ) {
 		return false;
 	}
+	// TODO: Restore component once working in compositions
+	if ( config.title === 'Component' ) {
+		return false;
+	}
 	if ( config.atomic_props_schema ) {
 		return true;
 	}