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

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,179 @@ 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_editor_props2 = require("@elementor/editor-props");
+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/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_react9.useInteractions)([(0, import_react9.useHover)(context)]);
+  const hasOverlapping = useHasOverlapping();
+  useBindReactPropsToElement(element, getReferenceProps);
+  const isSmallerOffset = element.offsetHeight <= 1;
+  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 +1114,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,7 +1138,7 @@ 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
@@ -1110,7 +1154,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,
@@ -1124,14 +1168,20 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
 
 // src/components/elements-overlays.tsx
 var ELEMENTS_DATA_ATTR = "atomic";
+var E_GRID_TYPE = "e-grid";
+var isGridElement = (element) => [element.dataset.eType, element.dataset.element_type].includes(E_GRID_TYPE);
 var overlayRegistry = [
   {
     component: OutlineOverlay,
     shouldRender: () => true
   },
+  {
+    component: GridEmptyCellPositioner,
+    shouldRender: ({ element }) => isGridElement(element)
+  },
   {
     component: GridOutlineOverlay,
-    shouldRender: ({ element, isSelected }) => isSelected && element.dataset.eType === "e-grid"
+    shouldRender: ({ element, isSelected }) => isSelected && isGridElement(element)
   }
 ];
 function ElementsOverlays() {
@@ -1185,15 +1235,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 +1253,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 +1271,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -1252,7 +1302,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 +1400,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,7 +1462,7 @@ 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");
 
@@ -1561,7 +1611,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 +1623,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 +1732,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 +1746,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 +1774,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1739,11 +1789,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]
   );
@@ -3423,13 +3473,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 +3510,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 +3521,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 +3536,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 +3616,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 +3669,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,
@@ -4656,6 +4706,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 +5212,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 +5465,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 +5520,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 +5621,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 +5885,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 +6497,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 +6606,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 +6648,7 @@ function hasDoAfterRender(view) {
   BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
+  ELEMENT_ADDED_EVENT,
   GLOBAL_STYLES_IMPORTED_EVENT,
   SpotlightBackdrop,
   UnknownStyleStateError,