@elementor/editor-canvas 4.2.0-946 → 4.2.0-beta2

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");
@@ -445,12 +446,8 @@ var React7 = __toESM(require("react"));
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
-// src/components/grid-outline/grid-outline-overlay.tsx
-var React6 = __toESM(require("react"));
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_props2 = require("@elementor/editor-props");
-var import_ui2 = require("@elementor/ui");
-var import_react10 = require("@floating-ui/react");
+// src/components/grid-outline/grid-empty-cell-positioner.tsx
+var import_react5 = require("react");
 
 // src/hooks/use-element-rect.ts
 var import_react2 = require("react");
@@ -515,49 +512,8 @@ function useMutationsListener({ element, onChange }) {
   }, [element, onChange]);
 }
 
-// src/hooks/use-floating-on-element.ts
-var import_react3 = require("react");
-var import_react4 = require("@floating-ui/react");
-function useFloatingOnElement({ element, isSelected }) {
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  const sizeModifier = 2;
-  const { refs, floatingStyles, context } = (0, import_react4.useFloating)({
-    // Must be controlled for interactions (like hover) to work.
-    open: isOpen || isSelected,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: import_react4.autoUpdate,
-    middleware: [
-      // Match the floating element's size to the reference element.
-      (0, import_react4.size)(() => {
-        return {
-          apply({ elements, rects }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width + sizeModifier}px`,
-              height: `${rects.reference.height + sizeModifier}px`
-            });
-          }
-        };
-      }),
-      // Center the floating element on the reference element.
-      (0, import_react4.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
-    ]
-  });
-  (0, import_react3.useEffect)(() => {
-    refs.setReference(element);
-  }, [element, refs]);
-  return {
-    isVisible: isOpen || isSelected,
-    context,
-    floating: {
-      setRef: refs.setFloating,
-      ref: refs.floating,
-      styles: floatingStyles
-    }
-  };
-}
-
 // src/hooks/use-grid-tracks.ts
-var import_react6 = require("react");
+var import_react4 = require("react");
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
@@ -644,10 +600,10 @@ function toPx(value) {
 }
 
 // src/hooks/use-grid-children.ts
-var import_react5 = require("react");
+var import_react3 = require("react");
 function useGridChildren(element) {
-  const [signal, setSignal] = (0, import_react5.useState)(0);
-  (0, import_react5.useEffect)(() => {
+  const [signal, setSignal] = (0, import_react3.useState)(0);
+  (0, import_react3.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -694,13 +650,13 @@ var EMPTY = {
 };
 var DEVICE_MODE_CHANGE_EVENT = "elementor/device-mode/change";
 function useGridTracks(element, rect) {
-  const [tracks, setTracks] = (0, import_react6.useState)(EMPTY);
+  const [tracks, setTracks] = (0, import_react4.useState)(EMPTY);
   const trigger = (0, import_editor_v1_adapters2.__privateUseListenTo)(
     [(0, import_editor_v1_adapters2.windowEvent)(import_editor_elements3.ELEMENT_STYLE_CHANGE_EVENT), (0, import_editor_v1_adapters2.windowEvent)(DEVICE_MODE_CHANGE_EVENT)],
     () => ({})
   );
   const childrenTrigger = useGridChildren(element);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const previewWindow = element?.ownerDocument?.defaultView;
     if (!element || !previewWindow) {
       setTracks(EMPTY);
@@ -716,98 +672,6 @@ function useGridTracks(element, rect) {
   return tracks;
 }
 
-// src/components/outline-overlay.tsx
-var React = __toESM(require("react"));
-var import_ui = require("@elementor/ui");
-var import_react8 = require("@floating-ui/react");
-
-// src/hooks/use-bind-react-props-to-element.ts
-var import_react7 = require("react");
-function useBindReactPropsToElement(element, getProps) {
-  (0, import_react7.useEffect)(() => {
-    const el = element;
-    const { events, attrs } = groupProps(getProps());
-    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
-    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
-    return () => {
-      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
-      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
-    };
-  }, [getProps, element]);
-}
-function groupProps(props) {
-  const eventRegex = /^on(?=[A-Z])/;
-  return Object.entries(props).reduce(
-    (acc, [propName, propValue]) => {
-      if (!eventRegex.test(propName)) {
-        acc.attrs.push([propName, propValue]);
-        return acc;
-      }
-      const eventName = propName.replace(eventRegex, "").toLowerCase();
-      const listener = propValue;
-      acc.events.push([eventName, listener]);
-      return acc;
-    },
-    {
-      events: [],
-      attrs: []
-    }
-  );
-}
-
-// src/hooks/use-has-overlapping.ts
-var possibleOverlappingSelectors = [".e-off-canvas"];
-var useHasOverlapping = () => {
-  const preview = window.elementor?.$preview?.[0];
-  if (!preview) {
-    return false;
-  }
-  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
-    (elem) => elem.checkVisibility({
-      opacityProperty: true,
-      visibilityProperty: true,
-      contentVisibilityAuto: true
-    })
-  );
-  return hasOverlapping;
-};
-
-// src/components/outline-overlay.tsx
-var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
-var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
-  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset" && prop !== "isGlobal"
-})(
-  ({ theme, isSelected, isSmallerOffset, isGlobal }) => ({
-    outline: `${isSelected ? "2px" : "1px"} solid ${isGlobal ? theme.palette.global.main : theme.palette.primary.light}`,
-    outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
-    pointerEvents: "none"
-  })
-);
-var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
-  const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
-  const { getFloatingProps, getReferenceProps } = (0, import_react8.useInteractions)([(0, import_react8.useHover)(context)]);
-  const hasOverlapping = useHasOverlapping();
-  useBindReactPropsToElement(element, getReferenceProps);
-  const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react8.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
-    OverlayBox,
-    {
-      ref: floating.setRef,
-      isSelected,
-      isGlobal,
-      style: floating.styles,
-      "data-element-overlay": id,
-      role: "presentation",
-      isSmallerOffset,
-      ...getFloatingProps()
-    }
-  ));
-};
-
-// src/components/grid-outline/grid-outline.tsx
-var React5 = __toESM(require("react"));
-var import_react9 = require("react");
-
 // src/utils/find-first-empty-cell.ts
 function findFirstEmptyCell(element, columnCount, rowCount) {
   if (!element || columnCount === 0 || rowCount === 0) {
@@ -970,6 +834,194 @@ function scanFirstEmpty(matrix, flowsByColumn) {
   return null;
 }
 
+// src/components/grid-outline/grid-empty-cell-positioner.tsx
+var CSS_VAR_ROW = "--e-grid-empty-cell-row";
+var CSS_VAR_COL = "--e-grid-empty-cell-col";
+var CSS_VAR_VISIBILITY = "--e-grid-empty-cell-visibility";
+var clearGridEmptyCellStyles = (target) => {
+  target.style.removeProperty(CSS_VAR_ROW);
+  target.style.removeProperty(CSS_VAR_COL);
+  target.style.removeProperty(CSS_VAR_VISIBILITY);
+};
+var GridEmptyCellPositioner = ({ element }) => {
+  const rect = useElementRect(element);
+  const tracks = useGridTracks(element, rect);
+  (0, import_react5.useEffect)(() => {
+    if (!element) {
+      return;
+    }
+    const firstEmpty = findFirstEmptyCell(element, tracks.columns.length, tracks.rows.length);
+    if (!firstEmpty) {
+      element.style.removeProperty(CSS_VAR_ROW);
+      element.style.removeProperty(CSS_VAR_COL);
+      element.style.setProperty(CSS_VAR_VISIBILITY, "hidden");
+      return () => clearGridEmptyCellStyles(element);
+    }
+    element.style.setProperty(CSS_VAR_ROW, String(firstEmpty.row + 1));
+    element.style.setProperty(CSS_VAR_COL, String(firstEmpty.col + 1));
+    element.style.setProperty(CSS_VAR_VISIBILITY, "visible");
+    return () => {
+      clearGridEmptyCellStyles(element);
+    };
+  }, [element, tracks]);
+  return null;
+};
+
+// src/components/grid-outline/grid-outline-overlay.tsx
+var React6 = __toESM(require("react"));
+var import_editor_elements4 = require("@elementor/editor-elements");
+var import_ui2 = require("@elementor/ui");
+var import_react11 = require("@floating-ui/react");
+
+// src/hooks/use-floating-on-element.ts
+var import_react6 = require("react");
+var import_react7 = require("@floating-ui/react");
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const sizeModifier = 2;
+  const { refs, floatingStyles, context } = (0, import_react7.useFloating)({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: import_react7.autoUpdate,
+    middleware: [
+      // Match the floating element's size to the reference element.
+      (0, import_react7.size)(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
+      }),
+      // Center the floating element on the reference element.
+      (0, import_react7.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  (0, import_react6.useEffect)(() => {
+    refs.setReference(element);
+  }, [element, refs]);
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
+// src/components/outline-overlay.tsx
+var React = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+var import_react9 = require("@floating-ui/react");
+
+// src/hooks/use-bind-react-props-to-element.ts
+var import_react8 = require("react");
+function useBindReactPropsToElement(element, getProps) {
+  (0, import_react8.useEffect)(() => {
+    const el = element;
+    const { events, attrs } = groupProps(getProps());
+    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
+    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
+    return () => {
+      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
+      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
+    };
+  }, [getProps, element]);
+}
+function groupProps(props) {
+  const eventRegex = /^on(?=[A-Z])/;
+  return Object.entries(props).reduce(
+    (acc, [propName, propValue]) => {
+      if (!eventRegex.test(propName)) {
+        acc.attrs.push([propName, propValue]);
+        return acc;
+      }
+      const eventName = propName.replace(eventRegex, "").toLowerCase();
+      const listener = propValue;
+      acc.events.push([eventName, listener]);
+      return acc;
+    },
+    {
+      events: [],
+      attrs: []
+    }
+  );
+}
+
+// src/hooks/use-has-overlapping.ts
+var possibleOverlappingSelectors = [".e-off-canvas"];
+var useHasOverlapping = () => {
+  const preview = window.elementor?.$preview?.[0];
+  if (!preview) {
+    return false;
+  }
+  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
+    (elem) => elem.checkVisibility({
+      opacityProperty: true,
+      visibilityProperty: true,
+      contentVisibilityAuto: true
+    })
+  );
+  return hasOverlapping;
+};
+
+// src/utils/outline-offset-utils.ts
+var THIN_ELEMENT_MAX_HEIGHT_PX = 1;
+var SMALLER_OUTLINE_OFFSET_WIDGET_TYPES = /* @__PURE__ */ new Set(["e-form-input"]);
+function shouldUseSmallerOutlineOffset(element, widgetType) {
+  if (element.offsetHeight <= THIN_ELEMENT_MAX_HEIGHT_PX) {
+    return true;
+  }
+  return widgetType !== void 0 && SMALLER_OUTLINE_OFFSET_WIDGET_TYPES.has(widgetType);
+}
+
+// src/components/outline-overlay.tsx
+var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
+var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
+  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset" && prop !== "isGlobal"
+})(
+  ({ theme, isSelected, isSmallerOffset, isGlobal }) => ({
+    outline: `${isSelected ? "2px" : "1px"} solid ${isGlobal ? theme.palette.global.main : theme.palette.primary.light}`,
+    outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
+    pointerEvents: "none"
+  })
+);
+var OutlineOverlay = ({
+  element,
+  isSelected,
+  id,
+  isGlobal = false,
+  widgetType
+}) => {
+  const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
+  const { getFloatingProps, getReferenceProps } = (0, import_react9.useInteractions)([(0, import_react9.useHover)(context)]);
+  const hasOverlapping = useHasOverlapping();
+  useBindReactPropsToElement(element, getReferenceProps);
+  const isSmallerOffset = shouldUseSmallerOutlineOffset(element, widgetType);
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react9.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+    OverlayBox,
+    {
+      ref: floating.setRef,
+      isSelected,
+      isGlobal,
+      style: floating.styles,
+      "data-element-overlay": id,
+      role: "presentation",
+      isSmallerOffset,
+      ...getFloatingProps()
+    }
+  ));
+};
+
+// src/components/grid-outline/grid-outline.tsx
+var React5 = __toESM(require("react"));
+var import_react10 = require("react");
+
 // src/components/grid-outline/cell.tsx
 var React2 = __toESM(require("react"));
 var FALLBACK_COLOR = "rgba(0, 0, 0, 0.12)";
@@ -1077,10 +1129,17 @@ var renderLines = (tracks, width, height) => {
     ))
   ];
 };
+var isDragActiveFromDom = (element) => {
+  return Boolean(
+    element?.querySelector(
+      ".e-dragging-over, .elementor-dragging-on-child, .elementor-draggable-over, .elementor-widget-placeholder, .elementor-sortable-placeholder"
+    )
+  );
+};
 function GridOutline({ element, tracks, width, height }) {
-  const cells = (0, import_react9.useMemo)(() => computeCellRects(tracks, width, height), [tracks, width, height]);
+  const cells = (0, import_react10.useMemo)(() => computeCellRects(tracks, width, height), [tracks, width, height]);
   const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
-  const firstEmpty = (0, import_react9.useMemo)(
+  const firstEmpty = (0, import_react10.useMemo)(
     () => findFirstEmptyCell(element, tracks.columns.length, tracks.rows.length),
     [element, tracks]
   );
@@ -1094,13 +1153,13 @@ function GridOutline({ element, tracks, width, height }) {
       xmlns: "http://www.w3.org/2000/svg"
     },
     hasGap ? renderCells(cells, tracks.borderColor) : renderLines(tracks, width, height)
-  ), emptyCellRect && /* @__PURE__ */ React5.createElement(FirstEmptyCell, { rect: emptyCellRect, color: tracks.borderColor }));
+  ), emptyCellRect && !isDragActiveFromDom(element) && /* @__PURE__ */ React5.createElement(FirstEmptyCell, { rect: emptyCellRect, color: tracks.borderColor }));
 }
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 var GridOutlineOverlay = ({ element, id, isSelected }) => {
-  const { settings } = (0, import_editor_elements4.useSelectedElementSettings)();
-  const enabled = import_editor_props2.booleanPropTypeUtil.extract(settings?.grid_outline);
+  const settings = (0, import_editor_elements4.useElementEditorSettings)(id);
+  const enabled = settings?.grid_outline;
   const rect = useElementRect(element);
   const tracks = useGridTracks(element, rect);
   const { floating } = useFloatingOnElement({ element, isSelected });
@@ -1110,7 +1169,7 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
   if (tracks.columns.length === 0 && tracks.rows.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(import_react10.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(import_react11.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React6.createElement(
     import_ui2.Box,
     {
       ref: floating.setRef,
@@ -1123,15 +1182,22 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
 };
 
 // src/components/elements-overlays.tsx
+var hasGridStyleDisplay = (element) => {
+  return element.computedStyleMap().get("display")?.toString() === "grid";
+};
 var ELEMENTS_DATA_ATTR = "atomic";
 var overlayRegistry = [
   {
     component: OutlineOverlay,
     shouldRender: () => true
   },
+  {
+    component: GridEmptyCellPositioner,
+    shouldRender: ({ element }) => hasGridStyleDisplay(element)
+  },
   {
     component: GridOutlineOverlay,
-    shouldRender: ({ element, isSelected }) => isSelected && element.dataset.eType === "e-grid"
+    shouldRender: ({ isSelected, element }) => isSelected && hasGridStyleDisplay(element)
   }
 ];
 function ElementsOverlays() {
@@ -1144,17 +1210,18 @@ function ElementsOverlays() {
   if (!isActive) {
     return null;
   }
-  return elements.map(({ id, domElement, isGlobal }) => {
+  return elements.map(({ id, domElement, isGlobal, widgetType }) => {
     const isSelected = selected.element?.id === id;
     return overlayRegistry.map(
-      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React7.createElement(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected, widgetType }) && /* @__PURE__ */ React7.createElement(
         Overlay,
         {
           key: `${id}-${index}`,
           id,
           element: domElement,
           isSelected,
-          isGlobal
+          isGlobal,
+          widgetType
         }
       )
     );
@@ -1167,7 +1234,8 @@ function useElementsDom() {
       return (0, import_editor_elements5.getElements)().filter((el) => isV4Element(el.view?.el?.dataset)).map((element) => ({
         id: element.id,
         domElement: element.view?.getDomElement?.()?.get?.(0),
-        isGlobal: element.model.get("isGlobal") ?? false
+        isGlobal: element.model.get("isGlobal") ?? false,
+        widgetType: element.model.get("widgetType")
       })).filter((item) => !!item.domElement);
     }
   );
@@ -1185,15 +1253,15 @@ var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-interactions-items.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_interactions = require("@elementor/editor-interactions");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-on-mount.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useOnMount(cb) {
-  const mounted = (0, import_react11.useRef)(false);
-  (0, import_react11.useEffect)(() => {
+  const mounted = (0, import_react12.useRef)(false);
+  (0, import_react12.useEffect)(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -1203,8 +1271,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = (0, import_react12.useState)({});
-  const providerAndSubscribers = (0, import_react12.useMemo)(() => {
+  const [interactionItems, setInteractionItems] = (0, import_react13.useState)({});
+  const providerAndSubscribers = (0, import_react13.useMemo)(() => {
     try {
       const providers = import_editor_interactions.interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -1221,7 +1289,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -1252,7 +1320,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return (0, import_react12.useMemo)(() => {
+  return (0, import_react13.useMemo)(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -1350,7 +1418,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles3 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
@@ -1412,12 +1480,12 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_editor_styles = require("@elementor/editor-styles");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-props-resolver.ts
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props2 = require("@elementor/editor-props");
 
 // src/renderers/multi-props.ts
 var isMultiProps = (propValue) => {
@@ -1455,7 +1523,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     if (value === null || value === void 0) {
       return null;
     }
-    if (!(0, import_editor_props3.isTransformable)(value)) {
+    if (!(0, import_editor_props2.isTransformable)(value)) {
       return value;
     }
     if (depth > TRANSFORM_DEPTH_LIMIT) {
@@ -1513,13 +1581,13 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
 }
 
 // src/renderers/enqueue-font-from-style-prop.ts
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 var maybeEnqueueFontFromStyleProp = (propType, propValue, enqueue) => {
-  if (!(0, import_editor_props4.isTransformable)(propValue) || propValue.disabled) {
+  if (!(0, import_editor_props3.isTransformable)(propValue) || propValue.disabled) {
     return;
   }
   const typeKey = propType.kind === "union" ? propValue.$$type : propType.key;
-  const propTypeUtil = (0, import_editor_props4.getPropSchemaFromCache)(typeKey);
+  const propTypeUtil = (0, import_editor_props3.getPropSchemaFromCache)(typeKey);
   if (!propTypeUtil || !("getEnqueueFontFamily" in propTypeUtil) || typeof propTypeUtil.getEnqueueFontFamily !== "function") {
     return;
   }
@@ -1561,7 +1629,7 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react14.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles.getStylesSchema)(),
@@ -1573,7 +1641,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
@@ -1682,7 +1750,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react14.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1696,9 +1764,9 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = (0, import_editor_responsive2.useBreakpoints)();
-  const [styleItems, setStyleItems] = (0, import_react15.useState)({});
-  const styleItemsCacheRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = (0, import_react15.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react16.useState)({});
+  const styleItemsCacheRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
+  const providerAndSubscribers = (0, import_react16.useMemo)(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1724,7 +1792,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1739,11 +1807,11 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = (0, import_react15.useMemo)(
+  const breakpointSorter = (0, import_react16.useMemo)(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return (0, import_react15.useMemo)(
+  return (0, import_react16.useMemo)(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1980,6 +2048,46 @@ function clipboardRootsAreAtomicForms(elements) {
   }
   return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
 }
+function hasFormAncestor(node) {
+  return node.closest(FORM_ELEMENT_TYPE) !== null;
+}
+function collectFormAncestorErrors(xml) {
+  const errors = [];
+  for (const node of xml.querySelectorAll("*")) {
+    if (!FORM_FIELD_ELEMENT_TYPES.has(node.tagName.toLowerCase())) {
+      continue;
+    }
+    if (hasFormAncestor(node)) {
+      continue;
+    }
+    const id = node.getAttribute("configuration-id");
+    errors.push(
+      `<${node.tagName}${id ? ` configuration-id="${id}"` : ""}> must be nested inside <e-form> (any ancestor depth is allowed).`
+    );
+  }
+  return errors;
+}
+function collectSubmitButtonErrors(xml) {
+  const errors = [];
+  for (const form of xml.querySelectorAll("e-form")) {
+    const submitButtons = form.querySelectorAll("e-form-submit-button");
+    if (submitButtons.length === 0) {
+      errors.push(`<e-form> has no <e-form-submit-button>.`);
+    } else if (submitButtons.length > 1) {
+      errors.push(`<e-form> has ${submitButtons.length} submit buttons \u2014 only 1 is allowed.`);
+    }
+  }
+  return errors;
+}
+function collectEmptyMessageErrors(xml) {
+  const errors = [];
+  for (const node of xml.querySelectorAll("e-form-success-message, e-form-error-message")) {
+    if (node.children.length === 0) {
+      errors.push(`<${node.tagName}> must have at least one child element (e.g. <e-atomic-paragraph>).`);
+    }
+  }
+  return errors;
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -2006,7 +2114,8 @@ function blockFormFieldCreate(args) {
   if (!elementType || !FORM_FIELD_ELEMENT_TYPES.has(elementType)) {
     return false;
   }
-  if (!isWithinForm(args.container)) {
+  const containers = args.containers ?? [args.container];
+  if (containers.some((container) => !isWithinForm(container))) {
     handleBlockedFormField();
     return true;
   }
@@ -2014,10 +2123,10 @@ function blockFormFieldCreate(args) {
 }
 function blockFormFieldMove(args) {
   const { containers = [args.container], target } = args;
-  const hasFormFieldElement = containers.some(
-    (container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
+  const hasLooseFormFields = containers.some(
+    (container) => container ? !hasElementType(container, FORM_ELEMENT_TYPE) && hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
   );
-  if (hasFormFieldElement && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
+  if (hasLooseFormFields && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
     handleBlockedFormField();
     return true;
   }
@@ -3375,7 +3484,7 @@ var import_client = require("react-dom/client");
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var React11 = __toESM(require("react"));
 var import_editor_elements9 = require("@elementor/editor-elements");
-var import_editor_props6 = require("@elementor/editor-props");
+var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
@@ -3423,13 +3532,13 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 var React10 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui5 = require("@elementor/ui");
-var import_react18 = require("@floating-ui/react");
+var import_react19 = require("@floating-ui/react");
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3460,8 +3569,8 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
-  const asyncUnmountInlineEditor = (0, import_react16.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  (0, import_react16.useEffect)(() => {
+  const asyncUnmountInlineEditor = (0, import_react17.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  (0, import_react17.useEffect)(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3471,8 +3580,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [anchor, setAnchor] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3486,7 +3595,7 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  const clearAnchor = (0, import_react16.useCallback)(() => {
+  const clearAnchor = (0, import_react17.useCallback)(() => {
     setAnchor(null);
   }, []);
   return { onSelectionEnd, anchor, clearAnchor };
@@ -3566,21 +3675,21 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = (0, import_react17.useState)(true);
-  const [editor, setEditor] = (0, import_react17.useState)(null);
+  const [active, setActive] = (0, import_react18.useState)(true);
+  const [editor, setEditor] = (0, import_react18.useState)(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
     }
   }, [active, clearAnchor, requestDestroy]);
-  const dismiss = (0, import_react17.useCallback)(() => {
+  const dismiss = (0, import_react18.useCallback)(() => {
     setEditor(null);
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3619,25 +3728,25 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = (0, import_react17.useState)(inlineEditedElement);
-  (0, import_react17.useEffect)(() => {
+  const [overlayRefElement, setOverlayElement] = (0, import_react18.useState)(inlineEditedElement);
+  (0, import_react18.useEffect)(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
   return overlayRefElement ? /* @__PURE__ */ React10.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
 };
 var InlineEditingToolbar = ({ anchor, editor, id }) => {
-  const { refs, floatingStyles } = (0, import_react18.useFloating)({
+  const { refs, floatingStyles } = (0, import_react19.useFloating)({
     placement: "top",
     strategy: "fixed",
     transform: false,
-    whileElementsMounted: import_react18.autoUpdate,
-    middleware: [horizontalShifterMiddleware, (0, import_react18.flip)()]
+    whileElementsMounted: import_react19.autoUpdate,
+    middleware: [horizontalShifterMiddleware, (0, import_react19.flip)()]
   });
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React10.createElement(import_react18.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(import_react19.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React10.createElement(
     import_ui5.Box,
     {
       ref: refs.setFloating,
@@ -3652,11 +3761,11 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -3676,7 +3785,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return import_editor_props5.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props5.stringPropTypeUtil.isValid(rawValue);
+  return import_editor_props4.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props4.stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -3761,15 +3870,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    const extracted = import_editor_props6.htmlV3PropTypeUtil.extract(propValue);
-    return import_editor_props6.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
+    const extracted = import_editor_props5.htmlV3PropTypeUtil.extract(propValue);
+    return import_editor_props5.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const html = value || "";
-    const parsed = (0, import_editor_props6.parseHtmlChildren)(html);
-    const valueToSave = import_editor_props6.htmlV3PropTypeUtil.create({
-      content: parsed.content ? import_editor_props6.stringPropTypeUtil.create(parsed.content) : null,
+    const parsed = (0, import_editor_props5.parseHtmlChildren)(html);
+    const valueToSave = import_editor_props5.htmlV3PropTypeUtil.create({
+      content: parsed.content ? import_editor_props5.stringPropTypeUtil.create(parsed.content) : null,
       children: parsed.children
     });
     (0, import_editor_v1_adapters13.undoable)(
@@ -3800,7 +3909,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [import_editor_props6.htmlV3PropTypeUtil.key, import_editor_props6.stringPropTypeUtil.key];
+      const textKeys = [import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -3829,7 +3938,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
   getExpectedTag() {
     const tagPropType = this.getTagPropType();
     const tagSettingKey = "tag";
-    return import_editor_props6.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props6.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
+    return import_editor_props5.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props5.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
   }
   getTagPropType() {
     const propsSchema = (0, import_editor_elements9.getElementType)(this.type)?.propsSchema;
@@ -4056,7 +4165,7 @@ function createNestedTemplatedType(type, renderer, element) {
 }
 
 // src/legacy/tabs-model-extensions.ts
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_props6 = require("@elementor/editor-props");
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -4072,8 +4181,8 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: import_editor_props7.htmlV3PropTypeUtil.create({
-          content: import_editor_props7.stringPropTypeUtil.create(`Tab ${position}`),
+        paragraph: import_editor_props6.htmlV3PropTypeUtil.create({
+          content: import_editor_props6.stringPropTypeUtil.create(`Tab ${position}`),
           children: []
         })
       }
@@ -4086,7 +4195,7 @@ function initTabsModelExtensions() {
 }
 
 // src/mcp/canvas-mcp.ts
-var import_editor_props12 = require("@elementor/editor-props");
+var import_editor_props11 = require("@elementor/editor-props");
 
 // src/mcp/resources/available-widgets-resource.ts
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
@@ -4238,7 +4347,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/resources/dynamic-tags-resource.ts
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_props7 = require("@elementor/editor-props");
 
 // src/mcp/utils/resolve-dynamic-tag.ts
 var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
@@ -4306,7 +4415,7 @@ var defaultSettingValue = (propType) => {
 var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
 var settingsSchema = (propsSchema) => {
   return Object.fromEntries(
-    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props8.Schema.propTypeToJsonSchema(propType)])
+    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props7.Schema.propTypeToJsonSchema(propType)])
   );
 };
 var buildDynamicTagsList = () => {
@@ -4656,13 +4765,14 @@ 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");
 
 // src/mcp/utils/do-update-element-property.ts
 var import_editor_elements14 = require("@elementor/editor-elements");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_props8 = require("@elementor/editor-props");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 
@@ -4739,7 +4849,7 @@ var LOCAL_STYLE_META = {
 };
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return import_editor_props9.Schema.adjustLlmPropValueSchema(value, {
+  return import_editor_props8.Schema.adjustLlmPropValueSchema(value, {
     forceKey,
     transformers: {
       ...Utils.globalVariablesLLMResolvers,
@@ -4798,7 +4908,7 @@ var doUpdateElementProperty = (params) => {
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
-          const propUtil = (0, import_editor_props9.getPropSchemaFromCache)(propertyRawSchema.key);
+          const propUtil = (0, import_editor_props8.getPropSchemaFromCache)(propertyRawSchema.key);
           if (propUtil) {
             const plainValue = propUtil.create(propertyMapValue[stylePropName]);
             propertyMapValue[stylePropName] = plainValue;
@@ -4851,7 +4961,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = import_editor_props9.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = import_editor_props8.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -5122,6 +5232,11 @@ var CompositionBuilder = class _CompositionBuilder {
       throw new Error(`Invalid element structure:
 ${childTypeErrors.join("\n")}`);
     }
+    const formErrors = [
+      ...collectFormAncestorErrors(this.xml),
+      ...collectSubmitButtonErrors(this.xml),
+      ...collectEmptyMessageErrors(this.xml)
+    ];
     const children = Array.from(this.xml.children);
     for (const childNode of children) {
       const modelTree = this.buildModelTree(childNode, widgetsCache);
@@ -5156,11 +5271,18 @@ ${childTypeErrors.join("\n")}`);
     return {
       configErrors,
       styleErrors,
+      formErrors,
       rootContainers: [...this.rootContainers]
     };
   }
 };
 
+// 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 +5530,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(
@@ -5459,12 +5582,28 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
         compositionBuilder.setCustomCSS(customCSS);
-        const { configErrors, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
+        const {
+          configErrors,
+          formErrors,
+          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)));
         }
+        if (formErrors.length) {
+          errors.push(...formErrors.map((msg) => new Error(msg)));
+        }
       } catch (error) {
         errors.push(error);
       }
@@ -5554,16 +5693,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_props10 = require("@elementor/editor-props");
+var import_editor_mcp5 = require("@elementor/editor-mcp");
+var import_editor_props9 = 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.
 
@@ -5746,7 +5908,7 @@ var initConfigureElementTool = (reg) => {
       const propertiesToUpdate = resolveCanonicalPropKeys(elementType, propertiesToChange);
       const toUpdate = Object.entries(propertiesToUpdate);
       for (const [propertyName, propertyValue] of toUpdate) {
-        if (!import_editor_props10.Schema.isPropKeyConfigurable(propertyName)) {
+        if (!import_editor_props9.Schema.isPropKeyConfigurable(propertyName)) {
           throw new Error(`Not allowed to update ${propertyName}`);
         }
         try {
@@ -5795,6 +5957,7 @@ async function applyStyleFromCss(opts) {
       propertyValue: styleValue,
       customCssWriteMode: "merge-with-stored"
     });
+    (0, import_editor_mcp5.dispatchMcpStylesAppliedEvent)({ styleValue });
   } catch (error) {
     throw new Error(
       createUpdateErrorMessage({
@@ -5822,7 +5985,7 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 
 // src/mcp/tools/get-element-config/tool.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
-var import_editor_props11 = require("@elementor/editor-props");
+var import_editor_props10 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
   elementId: import_schema5.z.string()
@@ -5879,7 +6042,7 @@ var initGetElementConfigTool = (reg) => {
       }
       const propValues = {};
       const stylePropValues = {};
-      import_editor_props11.Schema.configurableKeys(propSchema).forEach((key) => {
+      import_editor_props10.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
       const elementStyles = (0, import_editor_elements18.getElementStyles)(elementId) || {};
@@ -5915,7 +6078,7 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  import_editor_props12.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
+  import_editor_props11.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -6122,12 +6285,12 @@ function shouldBlock(sourceElements, targetElements) {
 
 // src/style-commands/paste-style.ts
 var import_editor_elements22 = require("@elementor/editor-elements");
-var import_editor_props14 = require("@elementor/editor-props");
+var import_editor_props13 = require("@elementor/editor-props");
 var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements20 = require("@elementor/editor-elements");
-var import_editor_props13 = require("@elementor/editor-props");
+var import_editor_props12 = require("@elementor/editor-props");
 var import_i18n5 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
@@ -6145,7 +6308,7 @@ function getClassesProp(container) {
     return null;
   }
   const [propKey] = Object.entries(propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props13.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props12.CLASSES_PROP_KEY
   ) ?? [];
   return propKey ?? null;
 }
@@ -6294,8 +6457,8 @@ function pasteClasses(containers, classes) {
       return;
     }
     const classesSetting = (0, import_editor_elements22.getElementSetting)(container.id, classesProp);
-    const currentClasses = import_editor_props14.classesPropTypeUtil.extract(classesSetting) ?? [];
-    const newClasses = import_editor_props14.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
+    const currentClasses = import_editor_props13.classesPropTypeUtil.extract(classesSetting) ?? [];
+    const newClasses = import_editor_props13.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
     (0, import_editor_elements22.updateElementSettings)({
       id: container.id,
       props: { [classesProp]: newClasses }
@@ -6406,7 +6569,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
@@ -6515,9 +6678,9 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-escape-on-canvas.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!canvasDocument) {
       return;
     }
@@ -6557,6 +6720,7 @@ function hasDoAfterRender(view) {
   BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
+  ELEMENT_ADDED_EVENT,
   GLOBAL_STYLES_IMPORTED_EVENT,
   SpotlightBackdrop,
   UnknownStyleStateError,