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

package/dist/index.mjs

@@ -384,12 +384,8 @@ import {
   windowEvent as windowEvent2
 } from "@elementor/editor-v1-adapters";
 
-// src/components/grid-outline/grid-outline-overlay.tsx
-import * as React6 from "react";
-import { useSelectedElementSettings } from "@elementor/editor-elements";
-import { booleanPropTypeUtil } from "@elementor/editor-props";
-import { Box as Box2 } from "@elementor/ui";
-import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
+// src/components/grid-outline/grid-empty-cell-positioner.tsx
+import { useEffect as useEffect5 } from "react";
 
 // src/hooks/use-element-rect.ts
 import { useEffect as useEffect2, useState } from "react";
@@ -454,49 +450,8 @@ function useMutationsListener({ element, onChange }) {
   }, [element, onChange]);
 }
 
-// src/hooks/use-floating-on-element.ts
-import { useEffect as useEffect3, useState as useState2 } from "react";
-import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
-function useFloatingOnElement({ element, isSelected }) {
-  const [isOpen, setIsOpen] = useState2(false);
-  const sizeModifier = 2;
-  const { refs, floatingStyles, context } = useFloating({
-    // Must be controlled for interactions (like hover) to work.
-    open: isOpen || isSelected,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      // Match the floating element's size to the reference element.
-      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.
-      offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
-    ]
-  });
-  useEffect3(() => {
-    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
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
 import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
 
@@ -583,10 +538,10 @@ function toPx(value) {
 }
 
 // src/hooks/use-grid-children.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 function useGridChildren(element) {
-  const [signal, setSignal] = useState3(0);
-  useEffect4(() => {
+  const [signal, setSignal] = useState2(0);
+  useEffect3(() => {
     if (!element) {
       return;
     }
@@ -633,13 +588,13 @@ var EMPTY = {
 };
 var DEVICE_MODE_CHANGE_EVENT = "elementor/device-mode/change";
 function useGridTracks(element, rect) {
-  const [tracks, setTracks] = useState4(EMPTY);
+  const [tracks, setTracks] = useState3(EMPTY);
   const trigger = useListenTo(
     [windowEvent(ELEMENT_STYLE_CHANGE_EVENT), windowEvent(DEVICE_MODE_CHANGE_EVENT)],
     () => ({})
   );
   const childrenTrigger = useGridChildren(element);
-  useEffect5(() => {
+  useEffect4(() => {
     const previewWindow = element?.ownerDocument?.defaultView;
     if (!element || !previewWindow) {
       setTracks(EMPTY);
@@ -655,98 +610,6 @@ function useGridTracks(element, rect) {
   return tracks;
 }
 
-// src/components/outline-overlay.tsx
-import * as React from "react";
-import { Box, styled } from "@elementor/ui";
-import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
-
-// src/hooks/use-bind-react-props-to-element.ts
-import { useEffect as useEffect6 } from "react";
-function useBindReactPropsToElement(element, getProps) {
-  useEffect6(() => {
-    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 = styled(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 } = useInteractions([useHover(context)]);
-  const hasOverlapping = useHasOverlapping();
-  useBindReactPropsToElement(element, getReferenceProps);
-  const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(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
-import * as React5 from "react";
-import { useMemo } from "react";
-
 // src/utils/find-first-empty-cell.ts
 function findFirstEmptyCell(element, columnCount, rowCount) {
   if (!element || columnCount === 0 || rowCount === 0) {
@@ -909,6 +772,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);
+  useEffect5(() => {
+    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
+import * as React6 from "react";
+import { useElementEditorSettings } from "@elementor/editor-elements";
+import { Box as Box2 } from "@elementor/ui";
+import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
+
+// src/hooks/use-floating-on-element.ts
+import { useEffect as useEffect6, useState as useState4 } from "react";
+import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = useState4(false);
+  const sizeModifier = 2;
+  const { refs, floatingStyles, context } = useFloating({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      // Match the floating element's size to the reference element.
+      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.
+      offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  useEffect6(() => {
+    refs.setReference(element);
+  }, [element, refs]);
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
+// src/components/outline-overlay.tsx
+import * as React from "react";
+import { Box, styled } from "@elementor/ui";
+import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
+
+// src/hooks/use-bind-react-props-to-element.ts
+import { useEffect as useEffect7 } from "react";
+function useBindReactPropsToElement(element, getProps) {
+  useEffect7(() => {
+    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 = styled(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 } = useInteractions([useHover(context)]);
+  const hasOverlapping = useHasOverlapping();
+  useBindReactPropsToElement(element, getReferenceProps);
+  const isSmallerOffset = shouldUseSmallerOutlineOffset(element, widgetType);
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(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
+import * as React5 from "react";
+import { useMemo } from "react";
+
 // src/components/grid-outline/cell.tsx
 import * as React2 from "react";
 var FALLBACK_COLOR = "rgba(0, 0, 0, 0.12)";
@@ -1016,6 +1067,13 @@ 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 = useMemo(() => computeCellRects(tracks, width, height), [tracks, width, height]);
   const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
@@ -1033,13 +1091,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 } = useSelectedElementSettings();
-  const enabled = booleanPropTypeUtil.extract(settings?.grid_outline);
+  const settings = useElementEditorSettings(id);
+  const enabled = settings?.grid_outline;
   const rect = useElementRect(element);
   const tracks = useGridTracks(element, rect);
   const { floating } = useFloatingOnElement({ element, isSelected });
@@ -1062,15 +1120,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() {
@@ -1083,17 +1148,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
         }
       )
     );
@@ -1106,7 +1172,8 @@ function useElementsDom() {
       return 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);
     }
   );
@@ -1128,15 +1195,15 @@ import {
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect8, useMemo as useMemo2, useState as useState5 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo2, useState as useState5 } from "react";
 import { interactionsRepository } from "@elementor/editor-interactions";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-on-mount.ts
-import { useEffect as useEffect7, useRef } from "react";
+import { useEffect as useEffect8, useRef } from "react";
 function useOnMount(cb) {
   const mounted = useRef(false);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -1164,7 +1231,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -1301,7 +1368,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef2, useState as useState6 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo5, useRef as useRef2, useState as useState6 } from "react";
 import { useBreakpoints } from "@elementor/editor-responsive";
 import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
@@ -1679,7 +1746,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  useEffect9(() => {
+  useEffect10(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1935,6 +2002,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 = {
@@ -1961,7 +2068,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;
   }
@@ -1969,10 +2077,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;
   }
@@ -3387,13 +3495,13 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 import * as React10 from "react";
-import { useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect12, useLayoutEffect, useState as useState8 } from "react";
 import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
 import { Box as Box3, ThemeProvider } from "@elementor/ui";
 import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal3, useFloating as useFloating2 } from "@floating-ui/react";
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-import { useCallback, useEffect as useEffect10, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect11, useState as useState7 } from "react";
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3425,7 +3533,7 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
   const asyncUnmountInlineEditor = useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  useEffect10(() => {
+  useEffect11(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3436,7 +3544,7 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = useState7(null);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3533,7 +3641,7 @@ var CanvasInlineEditor = ({
   const [active, setActive] = useState8(true);
   const [editor, setEditor] = useState8(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
@@ -3544,7 +3652,7 @@ var CanvasInlineEditor = ({
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  useEffect11(() => {
+  useEffect12(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3584,7 +3692,7 @@ var InlineEditingOverlay = ({
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
   const [overlayRefElement, setOverlayElement] = useState8(inlineEditedElement);
-  useEffect11(() => {
+  useEffect12(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
   return overlayRefElement ? /* @__PURE__ */ React10.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
@@ -4630,6 +4738,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 {
@@ -5108,6 +5217,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);
@@ -5142,11 +5256,18 @@ ${childTypeErrors.join("\n")}`);
     return {
       configErrors,
       styleErrors,
+      formErrors,
       rootContainers: [...this.rootContainers]
     };
   }
 };
 
+// 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 +5515,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(
@@ -5445,12 +5567,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) => {
+          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);
       }
@@ -5540,9 +5678,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 +5942,7 @@ async function applyStyleFromCss(opts) {
       propertyValue: styleValue,
       customCssWriteMode: "merge-with-stored"
     });
+    dispatchMcpStylesAppliedEvent2({ styleValue });
   } catch (error) {
     throw new Error(
       createUpdateErrorMessage({
@@ -6522,9 +6684,9 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-escape-on-canvas.ts
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  useEffect12(() => {
+  useEffect13(() => {
     if (!canvasDocument) {
       return;
     }
@@ -6563,6 +6725,7 @@ export {
   BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
+  ELEMENT_ADDED_EVENT,
   GLOBAL_STYLES_IMPORTED_EVENT,
   SpotlightBackdrop,
   UnknownStyleStateError,