@elementor/editor-canvas 4.3.0-948 → 4.3.0-949

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { PropValue, Props, PropType, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
-import { V1Element, V1ElementModelProps, V1ElementConfig } from '@elementor/editor-elements';
+import { V1Element, V1ElementModelProps, V1ElementConfig, V1ElementData } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import { Root } from 'react-dom/client';
 import { StyleVariables, StyleDefinitionsMap, StyleDefinitionID, StyleDefinitionState } from '@elementor/editor-styles';
@@ -405,4 +405,10 @@ declare function useEscapeOnCanvas(canvasDocument: Document | null | undefined,
 
 declare function doAfterRender(elementIds: string[], callback: (elementIds: string[]) => void): void;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_FULL_URI, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type ContextMenuGroup, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, type CssConversionResult, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type MarionetteExtendable, type NamespacedRenderContext, type NestedTemplatedElementConfig, type NestedTemplatedElementViewClass, type PropsResolver, type RenderContext, type ReplacementSettings, SpotlightBackdrop, type StyleBlock, type StyleDeclarations, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_FULL_URI, WIDGET_SCHEMA_URI, canBeNestedTemplated, convertCssToAtomic, convertStyleBlocksToAtomic, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, formatGridTrackRepeat, init, isAtomicWidget, isGridTrackProperty, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry, useCanvasDocument, useEscapeOnCanvas, waitForChildrenToComplete };
+type ElementAddedEvent = {
+    element: V1ElementData;
+    executedBy: 'mcp_tool' | 'user';
+};
+declare const ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
+
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_FULL_URI, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type ContextMenuGroup, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, type CssConversionResult, DOCUMENT_STRUCTURE_URI, ELEMENT_ADDED_EVENT, type ElementAddedEvent, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type MarionetteExtendable, type NamespacedRenderContext, type NestedTemplatedElementConfig, type NestedTemplatedElementViewClass, type PropsResolver, type RenderContext, type ReplacementSettings, SpotlightBackdrop, type StyleBlock, type StyleDeclarations, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_FULL_URI, WIDGET_SCHEMA_URI, canBeNestedTemplated, convertCssToAtomic, convertStyleBlocksToAtomic, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, formatGridTrackRepeat, init, isAtomicWidget, isGridTrackProperty, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry, useCanvasDocument, useEscapeOnCanvas, waitForChildrenToComplete };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { PropValue, Props, PropType, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
-import { V1Element, V1ElementModelProps, V1ElementConfig } from '@elementor/editor-elements';
+import { V1Element, V1ElementModelProps, V1ElementConfig, V1ElementData } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import { Root } from 'react-dom/client';
 import { StyleVariables, StyleDefinitionsMap, StyleDefinitionID, StyleDefinitionState } from '@elementor/editor-styles';
@@ -405,4 +405,10 @@ declare function useEscapeOnCanvas(canvasDocument: Document | null | undefined,
 
 declare function doAfterRender(elementIds: string[], callback: (elementIds: string[]) => void): void;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_FULL_URI, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type ContextMenuGroup, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, type CssConversionResult, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type MarionetteExtendable, type NamespacedRenderContext, type NestedTemplatedElementConfig, type NestedTemplatedElementViewClass, type PropsResolver, type RenderContext, type ReplacementSettings, SpotlightBackdrop, type StyleBlock, type StyleDeclarations, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_FULL_URI, WIDGET_SCHEMA_URI, canBeNestedTemplated, convertCssToAtomic, convertStyleBlocksToAtomic, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, formatGridTrackRepeat, init, isAtomicWidget, isGridTrackProperty, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry, useCanvasDocument, useEscapeOnCanvas, waitForChildrenToComplete };
+type ElementAddedEvent = {
+    element: V1ElementData;
+    executedBy: 'mcp_tool' | 'user';
+};
+declare const ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
+
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_FULL_URI, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type ContextMenuGroup, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, type CssConversionResult, DOCUMENT_STRUCTURE_URI, ELEMENT_ADDED_EVENT, type ElementAddedEvent, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type MarionetteExtendable, type NamespacedRenderContext, type NestedTemplatedElementConfig, type NestedTemplatedElementViewClass, type PropsResolver, type RenderContext, type ReplacementSettings, SpotlightBackdrop, type StyleBlock, type StyleDeclarations, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_FULL_URI, WIDGET_SCHEMA_URI, canBeNestedTemplated, convertCssToAtomic, convertStyleBlocksToAtomic, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, formatGridTrackRepeat, init, isAtomicWidget, isGridTrackProperty, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry, useCanvasDocument, useEscapeOnCanvas, waitForChildrenToComplete };

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   BREAKPOINTS_SCHEMA_FULL_URI: () => BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI: () => BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI: () => DOCUMENT_STRUCTURE_URI,
+  ELEMENT_ADDED_EVENT: () => ELEMENT_ADDED_EVENT,
   GLOBAL_STYLES_IMPORTED_EVENT: () => GLOBAL_STYLES_IMPORTED_EVENT,
   SpotlightBackdrop: () => SpotlightBackdrop,
   UnknownStyleStateError: () => UnknownStyleStateError,
@@ -396,7 +397,7 @@ var convertCssToAtomic = async (style) => {
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
-var import_editor_mcp4 = require("@elementor/editor-mcp");
+var import_editor_mcp6 = require("@elementor/editor-mcp");
 
 // src/components/classes-rename.tsx
 var import_react = require("react");
@@ -4656,6 +4657,7 @@ function getElementDisplayName(container) {
 // src/mcp/tools/build-composition/tool.ts
 var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_elements16 = require("@elementor/editor-elements");
+var import_editor_mcp3 = require("@elementor/editor-mcp");
 
 // src/composition-builder/composition-builder.ts
 var import_editor_elements15 = require("@elementor/editor-elements");
@@ -5161,6 +5163,12 @@ ${childTypeErrors.join("\n")}`);
   }
 };
 
+// src/utils/tracking.ts
+var import_events = require("@elementor/events");
+var trackCanvasEvent = (data) => {
+  (0, import_events.trackEvent)(data);
+};
+
 // src/mcp/utils/get-composition-target-container.ts
 var import_editor_documents2 = require("@elementor/editor-documents");
 function getCompositionTargetContainer(documentContainer, documentType) {
@@ -5408,6 +5416,7 @@ function serializeWrapped(doc, rootElement, wrapperConfigId) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+var ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
 var initBuildCompositionsTool = (reg) => {
   const { addTool, resource } = reg;
   resource(
@@ -5462,6 +5471,15 @@ var initBuildCompositionsTool = (reg) => {
         const { configErrors, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
+        rootContainers.forEach((container) => {
+          const elementData = container.model?.toJSON();
+          if (elementData) {
+            onElementAdded(elementData);
+          }
+        });
+        Object.values(stylesConfig).forEach((styleValue) => {
+          (0, import_editor_mcp3.dispatchMcpStylesAppliedEvent)({ styleValue });
+        });
         if (configErrors.length) {
           errors.push(...configErrors.map((msg) => new Error(msg)));
         }
@@ -5554,16 +5572,39 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
     }
   }
 }
+function onElementAdded(element) {
+  const elType = element.elType ?? "";
+  const widgetType = element.widgetType ?? "";
+  const elementName = elType === "widget" ? widgetType : elType;
+  trackCanvasEvent({
+    eventName: "add_element",
+    executed_by: "mcp_tool",
+    element_name: elementName,
+    element_type: elType,
+    widget_type: widgetType
+  });
+  const event = {
+    element,
+    executedBy: "mcp_tool"
+  };
+  window.dispatchEvent(new CustomEvent(ELEMENT_ADDED_EVENT, { detail: event }));
+  if (element.elements?.length) {
+    element.elements?.forEach((childElement) => {
+      onElementAdded(childElement);
+    });
+  }
+}
 
 // src/mcp/tools/configure-element/tool.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_mcp5 = require("@elementor/editor-mcp");
 var import_editor_props10 = require("@elementor/editor-props");
 
 // src/mcp/tools/configure-element/prompt.ts
-var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_mcp4 = 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");
+  const configureElementToolPrompt = (0, import_editor_mcp4.toolPrompts)("configure-element");
   configureElementToolPrompt.description(`
 Configure an existing element on the page.
 
@@ -5795,6 +5836,7 @@ async function applyStyleFromCss(opts) {
       propertyValue: styleValue,
       customCssWriteMode: "merge-with-stored"
     });
+    (0, import_editor_mcp5.dispatchMcpStylesAppliedEvent)({ styleValue });
   } catch (error) {
     throw new Error(
       createUpdateErrorMessage({
@@ -6406,7 +6448,7 @@ function init() {
     component: ClassesRename
   });
   initCanvasMcp(
-    (0, import_editor_mcp4.getMCPByDomain)("canvas", {
+    (0, import_editor_mcp6.getMCPByDomain)("canvas", {
       instructions: `Everything related to V4 ( Atomic ) canvas.
 # Canvas workflow for new compositions
 - Configure elements settings and styles
@@ -6557,6 +6599,7 @@ function hasDoAfterRender(view) {
   BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
+  ELEMENT_ADDED_EVENT,
   GLOBAL_STYLES_IMPORTED_EVENT,
   SpotlightBackdrop,
   UnknownStyleStateError,

package/dist/index.mjs

@@ -4630,6 +4630,7 @@ import {
   getContainer as getContainer5,
   getWidgetsCache as getWidgetsCache9
 } from "@elementor/editor-elements";
+import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
 
 // src/composition-builder/composition-builder.ts
 import {
@@ -5147,6 +5148,12 @@ ${childTypeErrors.join("\n")}`);
   }
 };
 
+// src/utils/tracking.ts
+import { trackEvent } from "@elementor/events";
+var trackCanvasEvent = (data) => {
+  trackEvent(data);
+};
+
 // src/mcp/utils/get-composition-target-container.ts
 import { COMPONENT_DOCUMENT_TYPE } from "@elementor/editor-documents";
 function getCompositionTargetContainer(documentContainer, documentType) {
@@ -5394,6 +5401,7 @@ function serializeWrapped(doc, rootElement, wrapperConfigId) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+var ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
 var initBuildCompositionsTool = (reg) => {
   const { addTool, resource } = reg;
   resource(
@@ -5448,6 +5456,15 @@ var initBuildCompositionsTool = (reg) => {
         const { configErrors, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
+        rootContainers.forEach((container) => {
+          const elementData = container.model?.toJSON();
+          if (elementData) {
+            onElementAdded(elementData);
+          }
+        });
+        Object.values(stylesConfig).forEach((styleValue) => {
+          dispatchMcpStylesAppliedEvent({ styleValue });
+        });
         if (configErrors.length) {
           errors.push(...configErrors.map((msg) => new Error(msg)));
         }
@@ -5540,9 +5557,32 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
     }
   }
 }
+function onElementAdded(element) {
+  const elType = element.elType ?? "";
+  const widgetType = element.widgetType ?? "";
+  const elementName = elType === "widget" ? widgetType : elType;
+  trackCanvasEvent({
+    eventName: "add_element",
+    executed_by: "mcp_tool",
+    element_name: elementName,
+    element_type: elType,
+    widget_type: widgetType
+  });
+  const event = {
+    element,
+    executedBy: "mcp_tool"
+  };
+  window.dispatchEvent(new CustomEvent(ELEMENT_ADDED_EVENT, { detail: event }));
+  if (element.elements?.length) {
+    element.elements?.forEach((childElement) => {
+      onElementAdded(childElement);
+    });
+  }
+}
 
 // src/mcp/tools/configure-element/tool.ts
 import { getContainer as getContainer6, getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
+import { dispatchMcpStylesAppliedEvent as dispatchMcpStylesAppliedEvent2 } from "@elementor/editor-mcp";
 import { Schema as Schema4 } from "@elementor/editor-props";
 
 // src/mcp/tools/configure-element/prompt.ts
@@ -5781,6 +5821,7 @@ async function applyStyleFromCss(opts) {
       propertyValue: styleValue,
       customCssWriteMode: "merge-with-stored"
     });
+    dispatchMcpStylesAppliedEvent2({ styleValue });
   } catch (error) {
     throw new Error(
       createUpdateErrorMessage({
@@ -6563,6 +6604,7 @@ export {
   BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
+  ELEMENT_ADDED_EVENT,
   GLOBAL_STYLES_IMPORTED_EVENT,
   SpotlightBackdrop,
   UnknownStyleStateError,

package/package.json

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

package/src/index.ts

@@ -44,3 +44,4 @@ export { UnknownStyleTypeError, UnknownStyleStateError } from './renderers/error
 export { useCanvasDocument } from './hooks/use-canvas-document';
 export { useEscapeOnCanvas } from './hooks/use-escape-on-canvas';
 export { doAfterRender } from './utils/after-render';
+export { ELEMENT_ADDED_EVENT, type ElementAddedEvent } from './mcp/tools/build-composition/tool';

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

@@ -5,10 +5,13 @@ import {
 	getContainer,
 	getWidgetsCache,
 	type V1Element,
+	type V1ElementData,
 } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
 
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
+import { trackCanvasEvent } from '../../../utils/tracking';
 import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 import { BEST_PRACTICES_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
@@ -19,6 +22,13 @@ import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 import { adaptLeafRootParams } from './xml-leaf-wrapper';
 
+export type ElementAddedEvent = {
+	element: V1ElementData;
+	executedBy: 'mcp_tool' | 'user';
+};
+
+export const ELEMENT_ADDED_EVENT = 'elementor/canvas/element-added';
+
 export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 	const { addTool, resource } = reg;
 
@@ -80,6 +90,18 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
 
+				rootContainers.forEach( ( container ) => {
+					const elementData = container.model?.toJSON();
+
+					if ( elementData ) {
+						onElementAdded( elementData as V1ElementData );
+					}
+				} );
+
+				Object.values( stylesConfig ).forEach( ( styleValue ) => {
+					dispatchMcpStylesAppliedEvent( { styleValue } );
+				} );
+
 				if ( configErrors.length ) {
 					errors.push( ...configErrors.map( ( msg ) => new Error( msg ) ) );
 				}
@@ -186,3 +208,30 @@ function assertCompositionXmlUsesV4WidgetsOnly( xmlStructure: string ) {
 		}
 	}
 }
+
+function onElementAdded( element: V1ElementData ) {
+	const elType = element.elType ?? '';
+	const widgetType = element.widgetType ?? '';
+	const elementName = elType === 'widget' ? widgetType : elType;
+
+	trackCanvasEvent( {
+		eventName: 'add_element',
+		executed_by: 'mcp_tool',
+		element_name: elementName,
+		element_type: elType,
+		widget_type: widgetType,
+	} );
+
+	const event: ElementAddedEvent = {
+		element,
+		executedBy: 'mcp_tool',
+	};
+
+	window.dispatchEvent( new CustomEvent( ELEMENT_ADDED_EVENT, { detail: event } ) );
+
+	if ( element.elements?.length ) {
+		element.elements?.forEach( ( childElement ) => {
+			onElementAdded( childElement );
+		} );
+	}
+}

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

@@ -1,5 +1,6 @@
 import { getContainer, getWidgetsCache } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
 import { type PropValue, Schema } from '@elementor/editor-props';
 
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
@@ -115,6 +116,8 @@ async function applyStyleFromCss( opts: {
 			propertyValue: styleValue,
 			customCssWriteMode: 'merge-with-stored',
 		} );
+
+		dispatchMcpStylesAppliedEvent( { styleValue } );
 	} catch ( error ) {
 		throw new Error(
 			createUpdateErrorMessage( {

package/src/utils/tracking.ts

@@ -0,0 +1,14 @@
+import { trackEvent } from '@elementor/events';
+
+type ElementEventData = {
+	eventName: 'add_element';
+	element_name: string;
+	element_type: string;
+	widget_type: string;
+	location?: string;
+	executed_by: 'user' | 'mcp_tool' | 'system';
+};
+
+export const trackCanvasEvent = ( data: ElementEventData ) => {
+	trackEvent( data );
+};