@elementor/editor-canvas 4.0.0-683 → 4.0.0

package/dist/index.d.mts

@@ -164,6 +164,7 @@ type BackboneCollection<Model extends object> = {
 };
 type ElementModel = {
     id: string;
+    originId?: string;
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;

package/dist/index.d.ts

@@ -164,6 +164,7 @@ type BackboneCollection<Model extends object> = {
 };
 type ElementModel = {
     id: string;
+    originId?: string;
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;

package/dist/index.js

@@ -59,7 +59,7 @@ module.exports = __toCommonJS(index_exports);
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 var initBreakpointsResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   const getBreakpointsList = () => {
     const { breakpoints } = window.elementor?.config?.responsive || {};
     if (!breakpoints) {
@@ -83,9 +83,16 @@ var initBreakpointsResource = (reg) => {
       }
     ]
   });
-  mcpServer.resource("breakpoints ", BREAKPOINTS_SCHEMA_URI, () => {
-    return buildResourceResponse();
-  });
+  resource(
+    "breakpoints ",
+    BREAKPOINTS_SCHEMA_URI,
+    {
+      description: "Breakpoints list."
+    },
+    () => {
+      return buildResourceResponse();
+    }
+  );
   window.addEventListener((0, import_editor_v1_adapters.v1ReadyEvent)().name, () => {
     sendResourceUpdated({
       uri: BREAKPOINTS_SCHEMA_URI,
@@ -833,14 +840,22 @@ var UnknownStyleStateError = (0, import_utils2.createError)({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     const uniqueStyles = styles.filter((style) => {
-      if (seenIds.has(style.id)) {
+      const key = getStyleUniqueKey(style);
+      if (seenKeys.has(key)) {
         return false;
       }
-      seenIds.add(style.id);
+      seenKeys.add(key);
       return true;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -1025,7 +1040,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {
@@ -1625,6 +1640,9 @@ var shadowTransformer = createTransformer((value) => {
 
 // src/transformers/styles/size-transformer.ts
 var sizeTransformer = createTransformer((value) => {
+  if (value.unit === "auto") {
+    return "auto";
+  }
   return value.unit === "custom" ? value.size : `${value.size}${value.unit}`;
 });
 
@@ -2008,6 +2026,7 @@ function createTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary
@@ -2042,6 +2061,11 @@ function createTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => super._openEditingPanel(options));
     }
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
+    }
   };
 }
 
@@ -2074,10 +2098,11 @@ function createNestedTemplatedElementType({
 }
 function buildEditorAttributes(model) {
   const id = model.get("id");
+  const originId = model.get("originId");
   const cid = model.cid ?? "";
   const attrs = {
     "data-model-cid": cid,
-    "data-interaction-id": id,
+    "data-interaction-id": originId ?? id,
     "x-ignore": "true"
   };
   return Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
@@ -2111,6 +2136,9 @@ function createNestedTemplatedElementView({
     invalidateRenderCache() {
       this._lastResolvedSettingsHash = null;
     },
+    renderOnChange() {
+      this.render();
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2154,6 +2182,7 @@ function createNestedTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary,
@@ -2283,6 +2312,11 @@ function createNestedTemplatedElementView({
     },
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
+    },
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
     }
   });
 }
@@ -2937,7 +2971,7 @@ function initTabsModelExtensions() {
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   let currentDocumentStructure = null;
   const updateDocumentStructure = () => {
     const structure = getDocumentStructure();
@@ -2959,17 +2993,23 @@ var initDocumentStructureResource = (reg) => {
     updateDocumentStructure
   );
   updateDocumentStructure();
-  mcpServer.resource("document-structure", DOCUMENT_STRUCTURE_URI, async () => {
-    const structure = getDocumentStructure();
-    return {
-      contents: [
-        {
-          uri: DOCUMENT_STRUCTURE_URI,
-          text: JSON.stringify(structure, null, 2)
-        }
-      ]
-    };
-  });
+  resource(
+    "document-structure",
+    DOCUMENT_STRUCTURE_URI,
+    {
+      description: "Document structure."
+    },
+    async () => {
+      return {
+        contents: [
+          {
+            uri: DOCUMENT_STRUCTURE_URI,
+            text: JSON.stringify(getDocumentStructure(), null, 2)
+          }
+        ]
+      };
+    }
+  );
 };
 function getDocumentStructure() {
   const extendedWindow = window;
@@ -3009,6 +3049,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_elements10 = require("@elementor/editor-elements");
 
 // src/composition-builder/composition-builder.ts
@@ -3423,6 +3464,16 @@ var CompositionBuilder = class _CompositionBuilder {
   }
 };
 
+// src/mcp/utils/get-composition-target-container.ts
+var import_editor_documents2 = require("@elementor/editor-documents");
+function getCompositionTargetContainer(documentContainer, documentType) {
+  const firstChild = documentContainer.children?.[0];
+  if (documentType === import_editor_documents2.COMPONENT_DOCUMENT_TYPE && firstChild) {
+    return firstChild;
+  }
+  return documentContainer;
+}
+
 // src/mcp/tools/build-composition/prompt.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 var generatePrompt = () => {
@@ -3618,6 +3669,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const rootContainers = [];
       const documentContainer = (0, import_editor_elements10.getContainer)("document");
+      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
+      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: import_editor_elements10.createElement,
@@ -3630,7 +3683,7 @@ var initBuildCompositionsTool = (reg) => {
           configErrors,
           invalidStyles,
           rootContainers: generatedRootContainers
-        } = compositionBuilder.build(documentContainer);
+        } = compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
         if (configErrors.length) {
@@ -4014,14 +4067,12 @@ 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 V4 ( Atomic ) canvas.
 # 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`
+- 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);
   initDocumentStructureResource(reg);

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 var initBreakpointsResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   const getBreakpointsList = () => {
     const { breakpoints } = window.elementor?.config?.responsive || {};
     if (!breakpoints) {
@@ -26,9 +26,16 @@ var initBreakpointsResource = (reg) => {
       }
     ]
   });
-  mcpServer.resource("breakpoints ", BREAKPOINTS_SCHEMA_URI, () => {
-    return buildResourceResponse();
-  });
+  resource(
+    "breakpoints ",
+    BREAKPOINTS_SCHEMA_URI,
+    {
+      description: "Breakpoints list."
+    },
+    () => {
+      return buildResourceResponse();
+    }
+  );
   window.addEventListener(v1ReadyEvent().name, () => {
     sendResourceUpdated({
       uri: BREAKPOINTS_SCHEMA_URI,
@@ -799,14 +806,22 @@ var UnknownStyleStateError = createError({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     const uniqueStyles = styles.filter((style) => {
-      if (seenIds.has(style.id)) {
+      const key = getStyleUniqueKey(style);
+      if (seenKeys.has(key)) {
         return false;
       }
-      seenIds.add(style.id);
+      seenKeys.add(key);
       return true;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -991,7 +1006,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {
@@ -1591,6 +1606,9 @@ var shadowTransformer = createTransformer((value) => {
 
 // src/transformers/styles/size-transformer.ts
 var sizeTransformer = createTransformer((value) => {
+  if (value.unit === "auto") {
+    return "auto";
+  }
   return value.unit === "custom" ? value.size : `${value.size}${value.unit}`;
 });
 
@@ -1974,6 +1992,7 @@ function createTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary
@@ -2008,6 +2027,11 @@ function createTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => super._openEditingPanel(options));
     }
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
+    }
   };
 }
 
@@ -2040,10 +2064,11 @@ function createNestedTemplatedElementType({
 }
 function buildEditorAttributes(model) {
   const id = model.get("id");
+  const originId = model.get("originId");
   const cid = model.cid ?? "";
   const attrs = {
     "data-model-cid": cid,
-    "data-interaction-id": id,
+    "data-interaction-id": originId ?? id,
     "x-ignore": "true"
   };
   return Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
@@ -2077,6 +2102,9 @@ function createNestedTemplatedElementView({
     invalidateRenderCache() {
       this._lastResolvedSettingsHash = null;
     },
+    renderOnChange() {
+      this.render();
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2120,6 +2148,7 @@ function createNestedTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary,
@@ -2249,6 +2278,11 @@ function createNestedTemplatedElementView({
     },
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
+    },
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
     }
   });
 }
@@ -2907,7 +2941,7 @@ function initTabsModelExtensions() {
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   let currentDocumentStructure = null;
   const updateDocumentStructure = () => {
     const structure = getDocumentStructure();
@@ -2929,17 +2963,23 @@ var initDocumentStructureResource = (reg) => {
     updateDocumentStructure
   );
   updateDocumentStructure();
-  mcpServer.resource("document-structure", DOCUMENT_STRUCTURE_URI, async () => {
-    const structure = getDocumentStructure();
-    return {
-      contents: [
-        {
-          uri: DOCUMENT_STRUCTURE_URI,
-          text: JSON.stringify(structure, null, 2)
-        }
-      ]
-    };
-  });
+  resource(
+    "document-structure",
+    DOCUMENT_STRUCTURE_URI,
+    {
+      description: "Document structure."
+    },
+    async () => {
+      return {
+        contents: [
+          {
+            uri: DOCUMENT_STRUCTURE_URI,
+            text: JSON.stringify(getDocumentStructure(), null, 2)
+          }
+        ]
+      };
+    }
+  );
 };
 function getDocumentStructure() {
   const extendedWindow = window;
@@ -2979,6 +3019,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
 import {
   createElement as createElement8,
   deleteElement,
@@ -3409,6 +3450,16 @@ var CompositionBuilder = class _CompositionBuilder {
   }
 };
 
+// src/mcp/utils/get-composition-target-container.ts
+import { COMPONENT_DOCUMENT_TYPE } from "@elementor/editor-documents";
+function getCompositionTargetContainer(documentContainer, documentType) {
+  const firstChild = documentContainer.children?.[0];
+  if (documentType === COMPONENT_DOCUMENT_TYPE && firstChild) {
+    return firstChild;
+  }
+  return documentContainer;
+}
+
 // src/mcp/tools/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
 var generatePrompt = () => {
@@ -3604,6 +3655,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const rootContainers = [];
       const documentContainer = getContainer3("document");
+      const currentDocument = getCurrentDocument();
+      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement8,
@@ -3616,7 +3669,7 @@ var initBuildCompositionsTool = (reg) => {
           configErrors,
           invalidStyles,
           rootContainers: generatedRootContainers
-        } = compositionBuilder.build(documentContainer);
+        } = compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
         if (configErrors.length) {
@@ -4000,14 +4053,12 @@ 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 V4 ( Atomic ) canvas.
 # 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`
+- 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);
   initDocumentStructureResource(reg);

package/package.json

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

package/src/hooks/__tests__/use-style-items.test.ts

@@ -289,6 +289,57 @@ describe( 'useStyleItems', () => {
 		expect( result.current ).toHaveLength( 2 );
 	} );
 
+	it( 'should maintain breakpoint order after style update', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [
+			createMockStyleDefinitionWithVariants( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { padding: '10px' }, custom_css: null },
+					{ meta: { breakpoint: 'tablet', state: null }, props: { padding: '8px' }, custom_css: null },
+					{ meta: { breakpoint: 'mobile', state: null }, props: { padding: '5px' }, custom_css: null },
+				],
+			} ),
+		] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		// Act - initial render.
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: 'tablet', state: null },
+				props: { padding: '12px' },
+			} );
+		} );
+
+		// Assert - items should be ordered by breakpoint (desktop, tablet, mobile).
+		const breakpointOrder = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrder ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+
+		// Act - update again (should maintain order).
+		await act( async () => {
+			mockProvider.actions.update?.( { id: 'style1', label: 'Updated' } );
+		} );
+
+		// Assert - order should still be maintained.
+		const breakpointOrderAfterUpdate = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrderAfterUpdate ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+	} );
+
 	it( 'should only re-render changed styles on differential update', async () => {
 		// Arrange.
 		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>

package/src/hooks/use-style-items.ts

@@ -191,7 +191,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 		return renderStyles( { styles: breakToBreakpoints( styles ), signal } ).then( ( rendered ) => {
 			rebuildCache( cache, allStyles, rendered );
 
-			return rendered;
+			return getOrderedItems( cache );
 		} );
 	}
 

package/src/legacy/create-nested-templated-element-type.ts

@@ -61,13 +61,14 @@ export function createNestedTemplatedElementType( {
 	};
 }
 
-function buildEditorAttributes( model: { get: ( key: 'id' ) => string; cid?: string } ): string {
+function buildEditorAttributes( model: ElementView[ 'model' ] ): string {
 	const id = model.get( 'id' );
+	const originId = model.get( 'originId' );
 	const cid = model.cid ?? '';
 
 	const attrs: Record< string, string > = {
 		'data-model-cid': cid,
-		'data-interaction-id': id,
+		'data-interaction-id': originId ?? id,
 		'x-ignore': 'true',
 	};
 
@@ -116,6 +117,10 @@ export function createNestedTemplatedElementView( {
 			this._lastResolvedSettingsHash = null;
 		},
 
+		renderOnChange() {
+			this.render();
+		},
+
 		render() {
 			this._abortController?.abort();
 			this._abortController = new AbortController();
@@ -181,6 +186,7 @@ export function createNestedTemplatedElementView( {
 
 					const context = {
 						id: model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -361,5 +367,12 @@ export function createNestedTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => parentOpenEditingPanel.call( this, options ) );
 		},
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		},
 	} ) as unknown as typeof ElementView;
 }

package/src/legacy/create-templated-element-type.ts

@@ -162,6 +162,7 @@ export function createTemplatedElementView( {
 
 					const context = {
 						id: this.model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -206,5 +207,12 @@ export function createTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => super._openEditingPanel( options ) );
 		}
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		}
 	};
 }

package/src/legacy/types.ts

@@ -203,6 +203,7 @@ type BackboneCollection< Model extends object > = {
 
 export type ElementModel = {
 	id: string;
+	originId?: string;
 	elType: string;
 	settings: BackboneModel< Props >;
 	editor_settings: Record< string, unknown >;

package/src/mcp/canvas-mcp.ts

@@ -10,14 +10,12 @@ 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 V4 ( Atomic ) canvas.
 # 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`
+- 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 );
 	initDocumentStructureResource( reg );

package/src/mcp/resources/breakpoints-resource.ts

@@ -5,7 +5,7 @@ import { v1ReadyEvent } from '@elementor/editor-v1-adapters';
 export const BREAKPOINTS_SCHEMA_URI = 'elementor://breakpoints/list';
 
 export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	const getBreakpointsList = () => {
 		const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
@@ -34,9 +34,16 @@ export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
 		],
 	} );
 
-	mcpServer.resource( 'breakpoints ', BREAKPOINTS_SCHEMA_URI, () => {
-		return buildResourceResponse();
-	} );
+	resource(
+		'breakpoints ',
+		BREAKPOINTS_SCHEMA_URI,
+		{
+			description: 'Breakpoints list.',
+		},
+		() => {
+			return buildResourceResponse();
+		}
+	);
 
 	window.addEventListener( v1ReadyEvent().name, () => {
 		sendResourceUpdated( {

package/src/mcp/resources/document-structure-resource.ts

@@ -39,7 +39,7 @@ type ElementorContainer = {
 export const DOCUMENT_STRUCTURE_URI = 'elementor://document/structure';
 
 export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	let currentDocumentStructure: string | null = null;
 
@@ -69,18 +69,23 @@ export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
 	// Initialize on load
 	updateDocumentStructure();
 
-	mcpServer.resource( 'document-structure', DOCUMENT_STRUCTURE_URI, async () => {
-		const structure = getDocumentStructure();
-
-		return {
-			contents: [
-				{
-					uri: DOCUMENT_STRUCTURE_URI,
-					text: JSON.stringify( structure, null, 2 ),
-				},
-			],
-		};
-	} );
+	resource(
+		'document-structure',
+		DOCUMENT_STRUCTURE_URI,
+		{
+			description: 'Document structure.',
+		},
+		async () => {
+			return {
+				contents: [
+					{
+						uri: DOCUMENT_STRUCTURE_URI,
+						text: JSON.stringify( getDocumentStructure(), null, 2 ),
+					},
+				],
+			};
+		}
+	);
 };
 
 function getDocumentStructure() {

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

@@ -1,3 +1,4 @@
+import { getCurrentDocument } from '@elementor/editor-documents';
 import {
 	createElement,
 	deleteElement,
@@ -10,6 +11,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
 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 { inputSchema as schema, outputSchema } from './schema';
 
@@ -37,6 +39,8 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			const errors: Error[] = [];
 			const rootContainers: V1Element[] = [];
 			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
+			const currentDocument = getCurrentDocument();
+			const targetContainer = getCompositionTargetContainer( documentContainer, currentDocument?.type.value );
 			try {
 				const compositionBuilder = CompositionBuilder.fromXMLString( xmlStructure, {
 					createElement,
@@ -50,7 +54,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 					configErrors,
 					invalidStyles,
 					rootContainers: generatedRootContainers,
-				} = compositionBuilder.build( documentContainer );
+				} = compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );

package/src/mcp/utils/__tests__/get-composition-target-container.test.ts

@@ -0,0 +1,59 @@
+import { type V1Element } from '@elementor/editor-elements';
+
+import { getCompositionTargetContainer } from '../get-composition-target-container';
+
+const createMockContainer = ( id: string, children?: V1Element[] ): V1Element =>
+	( {
+		id,
+		model: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		settings: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		children,
+	} ) as unknown as V1Element;
+
+describe( 'getCompositionTargetContainer', () => {
+	it( 'should return first child when document type is elementor_component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( firstChild );
+	} );
+
+	it( 'should return document container when document type is not a component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'page' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when document type is undefined', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, undefined );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when component has no children', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+} );

package/src/mcp/utils/get-composition-target-container.ts

@@ -0,0 +1,15 @@
+import { COMPONENT_DOCUMENT_TYPE } from '@elementor/editor-documents';
+import { type V1Element } from '@elementor/editor-elements';
+
+export function getCompositionTargetContainer(
+	documentContainer: V1Element,
+	documentType: string | undefined
+): V1Element {
+	const firstChild = documentContainer.children?.[ 0 ];
+
+	if ( documentType === COMPONENT_DOCUMENT_TYPE && firstChild ) {
+		return firstChild;
+	}
+
+	return documentContainer;
+}

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -118,6 +118,123 @@ describe( 'renderStyles', () => {
 	} );
 } );
 
+describe( 'breakpoint deduplication', () => {
+	it( 'should render all breakpoints when same id has multiple breakpoint variants', async () => {
+		// Arrange - simulates output from breakToBreakpoints in use-style-items.
+		const desktopStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [ { meta: { breakpoint: null, state: null }, props: { 'font-size': '16px' }, custom_css: null } ],
+		};
+		const tabletStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const mobileStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'mobile', state: null }, props: { 'font-size': '12px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+				mobile: { width: 768, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ desktopStyle, tabletStyle, mobileStyle ] } );
+
+		// Assert - all three breakpoints must be rendered (previously tablet/mobile were dropped).
+		expect( result ).toHaveLength( 3 );
+		expect( result.map( ( r ) => r.breakpoint ) ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+		expect( result[ 0 ].value ).toContain( 'font-size:16px' );
+		expect( result[ 1 ].value ).toContain( '@media(max-width:992px)' );
+		expect( result[ 1 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 2 ].value ).toContain( '@media(max-width:768px)' );
+		expect( result[ 2 ].value ).toContain( 'font-size:12px' );
+	} );
+
+	it( 'should deduplicate same id + breakpoint + state combinations', async () => {
+		// Arrange - two styles with same id, breakpoint, and state should dedupe.
+		const style1: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const style2: RendererStyleDefinition = {
+			...style1,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ style1, style2 ] } );
+
+		// Assert - should only render first occurrence.
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+	} );
+
+	it( 'should render separately when same id + breakpoint have different states', async () => {
+		// Arrange - same id and breakpoint but different states should NOT dedupe.
+		const normalStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const hoverStyle: RendererStyleDefinition = {
+			...normalStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: 'hover' }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ normalStyle, hoverStyle ] } );
+
+		// Assert - both should be rendered since states differ.
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].state ).toBeNull();
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 1 ].state ).toBe( 'hover' );
+		expect( result[ 1 ].value ).toContain( 'font-size:16px' );
+	} );
+} );
+
 describe( 'custom_css rendering', () => {
 	it( 'should not render custom_css if raw is empty', async () => {
 		// Arrange.

package/src/renderers/create-styles-renderer.ts

@@ -46,14 +46,24 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 	class: '.',
 };
 
+const DEFAULT_BREAKPOINT = 'desktop';
+const DEFAULT_STATE = 'normal';
+
+function getStyleUniqueKey( style: RendererStyleDefinition ): string {
+	const breakpoint = style.variants[ 0 ]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+	const state = style.variants[ 0 ]?.meta?.state ?? DEFAULT_STATE;
+	return `${ style.id }-${ breakpoint }-${ state }`;
+}
+
 export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '' }: CreateStyleRendererArgs ) {
 	return async ( { styles, signal }: StyleRendererArgs ): Promise< StyleItem[] > => {
-		const seenIds = new Set< string >();
+		const seenKeys = new Set< string >();
 		const uniqueStyles = styles.filter( ( style ) => {
-			if ( seenIds.has( style.id ) ) {
+			const key = getStyleUniqueKey( style );
+			if ( seenKeys.has( key ) ) {
 				return false;
 			}
-			seenIds.add( style.id );
+			seenKeys.add( key );
 			return true;
 		} );
 

package/src/transformers/styles/__tests__/size-transformer.test.ts

@@ -0,0 +1,24 @@
+import { sizeTransformer } from '../size-transformer';
+
+function run( val: { size?: number; unit?: string } ) {
+	return sizeTransformer( val, { key: 'width', signal: undefined } );
+}
+
+describe( 'sizeTransformer', () => {
+	it( 'returns "auto" when unit is auto and size is null', () => {
+		expect( run( { size: undefined, unit: 'auto' } ) ).toBe( 'auto' );
+	} );
+
+	it( 'returns "auto" when unit is auto and size is undefined', () => {
+		expect( run( { unit: 'auto' } ) ).toBe( 'auto' );
+	} );
+
+	it( 'concatenates size and unit for normal units', () => {
+		expect( run( { size: 100, unit: 'px' } ) ).toBe( '100px' );
+		expect( run( { size: 50, unit: '%' } ) ).toBe( '50%' );
+	} );
+
+	it( 'returns only size for custom unit', () => {
+		expect( run( { size: 100, unit: 'custom' } ) ).toBe( 100 );
+	} );
+} );

package/src/transformers/styles/size-transformer.ts

@@ -6,5 +6,8 @@ type Size = {
 };
 
 export const sizeTransformer = createTransformer( ( value: Size ) => {
+	if ( value.unit === 'auto' ) {
+		return 'auto';
+	}
 	return value.unit === 'custom' ? value.size : `${ value.size }${ value.unit }`;
 } );