@elementor/editor-canvas 4.2.0-898 → 4.2.0-900

package/dist/index.mjs

@@ -356,7 +356,7 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-import * as React2 from "react";
+import * as React5 from "react";
 import { getElements, useSelectedElement } from "@elementor/editor-elements";
 import {
   __privateUseIsRouteActive as useIsRouteActive,
@@ -365,50 +365,81 @@ import {
   windowEvent
 } from "@elementor/editor-v1-adapters";
 
-// 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/components/grid-outline/grid-outline-overlay.tsx
+import * as React4 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/hooks/use-bind-react-props-to-element.ts
-import { useEffect as useEffect2 } from "react";
-function useBindReactPropsToElement(element, getProps) {
+// src/hooks/use-element-rect.ts
+import { useEffect as useEffect2, useState } from "react";
+import { throttle } from "@elementor/utils";
+function useElementRect(element) {
+  const [rect, setRect] = useState(new DOMRect(0, 0, 0, 0));
+  const onChange = throttle(
+    () => {
+      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
+    },
+    20,
+    true
+  );
+  useScrollListener({ element, onChange });
+  useResizeListener({ element, onChange });
+  useMutationsListener({ element, onChange });
+  useEffect2(
+    () => () => {
+      onChange.cancel();
+    },
+    [onChange]
+  );
+  return rect;
+}
+function useScrollListener({ element, onChange }) {
   useEffect2(() => {
-    const el = element;
-    const { events, attrs } = groupProps(getProps());
-    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
-    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
+    if (!element) {
+      return;
+    }
+    const win = element.ownerDocument?.defaultView;
+    win?.addEventListener("scroll", onChange, { passive: true });
     return () => {
-      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
-      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
+      win?.removeEventListener("scroll", onChange);
     };
-  }, [getProps, element]);
+  }, [element, onChange]);
 }
-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: []
+function useResizeListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
     }
-  );
+    const resizeObserver = new ResizeObserver(onChange);
+    resizeObserver.observe(element);
+    const win = element.ownerDocument?.defaultView;
+    win?.addEventListener("resize", onChange, { passive: true });
+    return () => {
+      resizeObserver.disconnect();
+      win?.removeEventListener("resize", onChange);
+    };
+  }, [element, onChange]);
+}
+function useMutationsListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    const mutationObserver = new MutationObserver(onChange);
+    mutationObserver.observe(element, { childList: true, subtree: true });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [element, onChange]);
 }
 
 // src/hooks/use-floating-on-element.ts
-import { useEffect as useEffect3, useState } from "react";
+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] = useState(false);
+  const [isOpen, setIsOpen] = useState2(false);
   const sizeModifier = 2;
   const { refs, floatingStyles, context } = useFloating({
     // Must be controlled for interactions (like hover) to work.
@@ -445,6 +476,128 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
+// src/hooks/use-grid-tracks.ts
+import { useMemo } from "react";
+
+// src/utils/grid-outline-utils.ts
+function computeOutlineGeometry(tracks, width, height) {
+  const { columns, rows, columnGap, rowGap, padding } = tracks;
+  return {
+    vertical: computeBoundaries(columns, columnGap, padding.left),
+    horizontal: computeBoundaries(rows, rowGap, padding.top),
+    top: padding.top,
+    bottom: height - padding.bottom,
+    left: padding.left,
+    right: width - padding.right
+  };
+}
+function computeBoundaries(sizes, gap, offset2) {
+  if (sizes.length === 0) {
+    return [];
+  }
+  const boundaries = [];
+  let cursor = offset2;
+  for (let i = 0; i < sizes.length; i++) {
+    if (i === 0) {
+      boundaries.push(cursor);
+    }
+    cursor += sizes[i];
+    boundaries.push(cursor);
+    if (i < sizes.length - 1 && gap > 0) {
+      cursor += gap;
+      boundaries.push(cursor);
+    }
+  }
+  return boundaries;
+}
+function snapToHalfPixel(value) {
+  return Math.round(value) + 0.5;
+}
+function parseTrackList(value) {
+  if (!value || value === "none") {
+    return [];
+  }
+  return value.trim().split(/\s+/).map(toPx).filter((n) => n > 0);
+}
+function toPx(value) {
+  const parsed = parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+// src/hooks/use-grid-tracks.ts
+var EMPTY = {
+  columns: [],
+  rows: [],
+  columnGap: 0,
+  rowGap: 0,
+  padding: { top: 0, right: 0, bottom: 0, left: 0 },
+  borderColor: ""
+};
+function useGridTracks(element, rect) {
+  return useMemo(() => {
+    if (!element) {
+      return EMPTY;
+    }
+    const previewWindow = element.ownerDocument?.defaultView;
+    if (!previewWindow) {
+      return EMPTY;
+    }
+    const computedStyle = previewWindow.getComputedStyle(element);
+    return {
+      columns: parseTrackList(computedStyle.gridTemplateColumns),
+      rows: parseTrackList(computedStyle.gridTemplateRows),
+      columnGap: toPx(computedStyle.columnGap),
+      rowGap: toPx(computedStyle.rowGap),
+      padding: {
+        top: toPx(computedStyle.paddingTop),
+        right: toPx(computedStyle.paddingRight),
+        bottom: toPx(computedStyle.paddingBottom),
+        left: toPx(computedStyle.paddingLeft)
+      },
+      borderColor: computedStyle.getPropertyValue("--e-a-border-color-bold").trim()
+    };
+  }, [element, rect.width, rect.height]);
+}
+
+// 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 useEffect4 } from "react";
+function useBindReactPropsToElement(element, getProps) {
+  useEffect4(() => {
+    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 = () => {
@@ -494,12 +647,100 @@ var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
   ));
 };
 
+// src/components/grid-outline/grid-outline.tsx
+import * as React3 from "react";
+
+// src/components/grid-outline/grid-outline-line.tsx
+import * as React2 from "react";
+var FALLBACK_COLOR = "rgba(0, 0, 0, 0.12)";
+var DASH = "2 2";
+function GridOutlineLine({ x1, x2, y1, y2, color }) {
+  return /* @__PURE__ */ React2.createElement(
+    "line",
+    {
+      x1,
+      x2,
+      y1,
+      y2,
+      stroke: color || FALLBACK_COLOR,
+      strokeWidth: 1,
+      strokeDasharray: DASH,
+      vectorEffect: "non-scaling-stroke"
+    }
+  );
+}
+
+// src/components/grid-outline/grid-outline.tsx
+function GridOutline({ tracks, width, height }) {
+  const { vertical, horizontal, top, bottom, left, right } = computeOutlineGeometry(tracks, width, height);
+  return /* @__PURE__ */ React3.createElement(
+    "svg",
+    {
+      width,
+      height,
+      style: { position: "absolute", inset: 0, overflow: "visible" },
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    vertical.map((x, i) => /* @__PURE__ */ React3.createElement(
+      GridOutlineLine,
+      {
+        key: `v-${i}`,
+        x1: snapToHalfPixel(x),
+        x2: snapToHalfPixel(x),
+        y1: top,
+        y2: bottom,
+        color: tracks.borderColor
+      }
+    )),
+    horizontal.map((y, i) => /* @__PURE__ */ React3.createElement(
+      GridOutlineLine,
+      {
+        key: `h-${i}`,
+        x1: left,
+        x2: right,
+        y1: snapToHalfPixel(y),
+        y2: snapToHalfPixel(y),
+        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 rect = useElementRect(element);
+  const tracks = useGridTracks(element, rect);
+  const { floating } = useFloatingOnElement({ element, isSelected });
+  if (enabled === false) {
+    return null;
+  }
+  if (tracks.columns.length === 0 && tracks.rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React4.createElement(
+    Box2,
+    {
+      ref: floating.setRef,
+      style: { ...floating.styles, pointerEvents: "none" },
+      "data-grid-outline": id,
+      role: "presentation"
+    },
+    /* @__PURE__ */ React4.createElement(GridOutline, { tracks, width: rect.width, height: rect.height })
+  ));
+};
+
 // src/components/elements-overlays.tsx
 var ELEMENTS_DATA_ATTR = "atomic";
 var overlayRegistry = [
   {
     component: OutlineOverlay,
     shouldRender: () => true
+  },
+  {
+    component: GridOutlineOverlay,
+    shouldRender: ({ element, isSelected }) => isSelected && element.dataset.eType === "e-grid"
   }
 ];
 function ElementsOverlays() {
@@ -515,7 +756,7 @@ function ElementsOverlays() {
   return elements.map(({ id, domElement, isGlobal }) => {
     const isSelected = selected.element?.id === id;
     return overlayRegistry.map(
-      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React2.createElement(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React5.createElement(
         Overlay,
         {
           key: `${id}-${index}`,
@@ -532,7 +773,7 @@ function useElementsDom() {
   return useListenTo(
     [windowEvent("elementor/editor/element-rendered"), windowEvent("elementor/editor/element-destroyed")],
     () => {
-      return getElements().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => ({
+      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
@@ -540,9 +781,15 @@ function useElementsDom() {
     }
   );
 }
+function isV4Element(dataset) {
+  if (!dataset) {
+    return false;
+  }
+  return ELEMENTS_DATA_ATTR in dataset || "eType" in dataset;
+}
 
 // src/components/interactions-renderer.tsx
-import * as React3 from "react";
+import * as React6 from "react";
 import {
   __privateUseListenTo as useListenTo2,
   commandEndEvent,
@@ -551,15 +798,15 @@ import {
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect5, useMemo, useState as useState2 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo2, useState as useState3 } from "react";
 import { interactionsRepository } from "@elementor/editor-interactions";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-on-mount.ts
-import { useEffect as useEffect4, useRef } from "react";
+import { useEffect as useEffect5, useRef } from "react";
 function useOnMount(cb) {
   const mounted = useRef(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -569,8 +816,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = useState2({});
-  const providerAndSubscribers = useMemo(() => {
+  const [interactionItems, setInteractionItems] = useState3({});
+  const providerAndSubscribers = useMemo2(() => {
     try {
       const providers = interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -587,7 +834,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -618,7 +865,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return useMemo(() => {
+  return useMemo2(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -648,7 +895,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React3.createElement(Portal, { container }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React6.createElement(Portal, { container }, /* @__PURE__ */ React6.createElement(
     "script",
     {
       type: "application/json",
@@ -664,7 +911,7 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-import * as React4 from "react";
+import * as React7 from "react";
 import {
   __privateUseListenTo as useListenTo4,
   commandEndEvent as commandEndEvent3,
@@ -724,7 +971,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
 import { useBreakpoints } from "@elementor/editor-responsive";
 import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
@@ -786,7 +1033,7 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
 import { enqueueFont } from "@elementor/editor-v1-adapters";
 
@@ -916,7 +1163,7 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return useMemo2(() => {
+  return useMemo3(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema2(),
@@ -931,7 +1178,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
@@ -1042,7 +1289,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = useBreakpointsMap();
-  return useMemo3(() => {
+  return useMemo4(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1056,9 +1303,9 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = useBreakpoints();
-  const [styleItems, setStyleItems] = useState3({});
+  const [styleItems, setStyleItems] = useState4({});
   const styleItemsCacheRef = useRef2(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = useMemo4(() => {
+  const providerAndSubscribers = useMemo5(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1084,7 +1331,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  useEffect6(() => {
+  useEffect7(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1099,11 +1346,11 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = useMemo4(
+  const breakpointSorter = useMemo5(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return useMemo4(
+  return useMemo5(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1245,7 +1492,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(Portal2, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React7.createElement(Portal2, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React7.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React7.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
   return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument4()?.head);
@@ -2718,7 +2965,7 @@ function createPromotionView(BaseView) {
 import { createRoot } from "react-dom/client";
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-import * as React6 from "react";
+import * as React9 from "react";
 import { getContainer as getContainer2, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
@@ -2771,14 +3018,14 @@ var ReplacementBase = class {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-import * as React5 from "react";
-import { useCallback as useCallback2, useEffect as useEffect8, useLayoutEffect, useState as useState5 } from "react";
+import * as React8 from "react";
+import { useCallback as useCallback2, useEffect as useEffect9, useLayoutEffect, useState as useState6 } from "react";
 import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
-import { Box as Box2, ThemeProvider } from "@elementor/ui";
-import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal2, useFloating as useFloating2 } from "@floating-ui/react";
+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 useEffect7, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect8, useState as useState5 } from "react";
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -2810,7 +3057,7 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
   const asyncUnmountInlineEditor = useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  useEffect7(() => {
+  useEffect8(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -2820,8 +3067,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = useState4(null);
-  useEffect7(() => {
+  const [anchor, setAnchor] = useState5(null);
+  useEffect8(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -2915,10 +3162,10 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = useState5(true);
-  const [editor, setEditor] = useState5(null);
+  const [active, setActive] = useState6(true);
+  const [editor, setEditor] = useState6(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
@@ -2929,7 +3176,7 @@ var CanvasInlineEditor = ({
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  useEffect8(() => {
+  useEffect9(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -2943,7 +3190,7 @@ var CanvasInlineEditor = ({
   if (!active) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React8.createElement(
     InlineEditor,
     {
       onEditorCreate: setEditor,
@@ -2960,7 +3207,7 @@ var CanvasInlineEditor = ({
       autofocus: true,
       onSelectionEnd
     }
-  ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
+  ), toolbarAnchor && editor && /* @__PURE__ */ React8.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
 };
 var InlineEditingOverlay = ({
   expectedTag,
@@ -2968,11 +3215,11 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = useState5(inlineEditedElement);
-  useEffect8(() => {
+  const [overlayRefElement, setOverlayElement] = useState6(inlineEditedElement);
+  useEffect9(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
-  return overlayRefElement ? /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
+  return overlayRefElement ? /* @__PURE__ */ React8.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
 };
 var InlineEditingToolbar = ({ anchor, editor, id }) => {
   const { refs, floatingStyles } = useFloating2({
@@ -2986,8 +3233,8 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
-    Box2,
+  return /* @__PURE__ */ React8.createElement(FloatingPortal3, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React8.createElement(
+    Box3,
     {
       ref: refs.setFloating,
       role: "presentation",
@@ -2996,7 +3243,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React5.createElement(InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React8.createElement(InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 
@@ -3205,7 +3452,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     contentElement.innerHTML = "";
     this.editing = true;
     this.reactRoot.render(
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React9.createElement(
         CanvasInlineEditor,
         {
           elementClasses,
@@ -3899,7 +4146,7 @@ function getElementDisplayName(container) {
 // src/mcp/tools/build-composition/tool.ts
 import { getCurrentDocument } from "@elementor/editor-documents";
 import {
-  createElement as createElement8,
+  createElement as createElement11,
   deleteElement as deleteElement2,
   getContainer as getContainer5,
   getWidgetsCache as getWidgetsCache9
@@ -3907,7 +4154,7 @@ import {
 
 // src/composition-builder/composition-builder.ts
 import {
-  createElement as createElement7,
+  createElement as createElement10,
   deleteElement,
   generateElementId as generateElementId2,
   getContainer as getContainer4,
@@ -4178,7 +4425,7 @@ var CompositionBuilder = class _CompositionBuilder {
   elementCustomCSS = {};
   rootContainers = [];
   api = {
-    createElement: createElement7,
+    createElement: createElement10,
     deleteElement,
     getWidgetsCache: getWidgetsCache8,
     generateElementId: generateElementId2,
@@ -4612,6 +4859,56 @@ var outputSchema = {
   llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
 };
 
+// src/mcp/tools/build-composition/xml-leaf-wrapper.ts
+var DIV_BLOCK_TAG = "e-div-block";
+var ZERO_SPACING = {
+  $$type: "size",
+  value: {
+    size: {
+      $$type: "number",
+      value: 0
+    },
+    unit: {
+      $$type: "string",
+      value: "px"
+    }
+  }
+};
+function adaptLeafRootParams(params) {
+  const doc = new DOMParser().parseFromString(params.xmlStructure, "application/xml");
+  const rootElement = doc.documentElement;
+  if (!isLeafWidget(rootElement.tagName, params.widgetsCache)) {
+    return params;
+  }
+  const wrapperConfigId = getDivBlockWrapperConfigId(params.widgetsCache);
+  return {
+    ...params,
+    xmlStructure: serializeWrapped(doc, rootElement, wrapperConfigId),
+    stylesConfig: {
+      ...params.stylesConfig,
+      [wrapperConfigId]: {
+        margin: ZERO_SPACING,
+        padding: ZERO_SPACING,
+        ...params.stylesConfig[wrapperConfigId]
+      }
+    }
+  };
+}
+function getDivBlockWrapperConfigId(widgetsCache) {
+  return widgetsCache[DIV_BLOCK_TAG]?.title ?? DIV_BLOCK_TAG;
+}
+function isLeafWidget(tagName, widgetsCache) {
+  return widgetsCache[tagName]?.elType === "widget";
+}
+function serializeWrapped(doc, rootElement, wrapperConfigId) {
+  const wrapper = doc.createElement(DIV_BLOCK_TAG);
+  wrapper.setAttribute("configuration-id", wrapperConfigId);
+  wrapper.appendChild(rootElement.cloneNode(true));
+  const wrappedDoc = new DOMParser().parseFromString(`<${DIV_BLOCK_TAG} />`, "application/xml");
+  wrappedDoc.replaceChild(wrapper, wrappedDoc.documentElement);
+  return new XMLSerializer().serializeToString(wrappedDoc);
+}
+
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
   const { addTool, resource } = reg;
@@ -4641,9 +4938,12 @@ var initBuildCompositionsTool = (reg) => {
       { description: "Available widgets for this tool", uri: AVAILABLE_WIDGETS_URI_V4 }
     ],
     outputSchema,
-    handler: async (params) => {
-      assertCompositionXmlUsesV4WidgetsOnly(params.xmlStructure);
-      const { xmlStructure, elementConfig, stylesConfig, customCSS } = params;
+    handler: async (rawParams) => {
+      assertCompositionXmlUsesV4WidgetsOnly(rawParams.xmlStructure);
+      const { xmlStructure, elementConfig, stylesConfig, customCSS } = adaptLeafRootParams({
+        ...rawParams,
+        widgetsCache: getWidgetsCache9() ?? {}
+      });
       let generatedXML = "";
       const errors = [];
       const rootContainers = [];
@@ -4652,7 +4952,7 @@ var initBuildCompositionsTool = (reg) => {
       const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: createElement8,
+          createElement: createElement11,
           deleteElement: deleteElement2,
           getWidgetsCache: getWidgetsCache9
         });
@@ -4754,10 +5054,8 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
     if (widgetData.elType !== "widget") {
       continue;
     }
-    if (!widgetData.atomic_props_schema) {
-      throw new Error(
-        `This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${type}`
-      );
+    if (!isWidgetAvailableForLLM(widgetData) || !widgetData.atomic_props_schema) {
+      throw new Error(`This tool does not support element type: ${type}`);
     }
   }
 }
@@ -5690,72 +5988,7 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 var GLOBAL_STYLES_IMPORTED_EVENT = "elementor/global-styles/imported";
 
 // src/components/spotlight-backdrop.tsx
-import * as React7 from "react";
-
-// src/hooks/use-element-rect.ts
-import { useEffect as useEffect9, useState as useState6 } from "react";
-import { throttle } from "@elementor/utils";
-function useElementRect(element) {
-  const [rect, setRect] = useState6(new DOMRect(0, 0, 0, 0));
-  const onChange = throttle(
-    () => {
-      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
-    },
-    20,
-    true
-  );
-  useScrollListener({ element, onChange });
-  useResizeListener({ element, onChange });
-  useMutationsListener({ element, onChange });
-  useEffect9(
-    () => () => {
-      onChange.cancel();
-    },
-    [onChange]
-  );
-  return rect;
-}
-function useScrollListener({ element, onChange }) {
-  useEffect9(() => {
-    if (!element) {
-      return;
-    }
-    const win = element.ownerDocument?.defaultView;
-    win?.addEventListener("scroll", onChange, { passive: true });
-    return () => {
-      win?.removeEventListener("scroll", onChange);
-    };
-  }, [element, onChange]);
-}
-function useResizeListener({ element, onChange }) {
-  useEffect9(() => {
-    if (!element) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(onChange);
-    resizeObserver.observe(element);
-    const win = element.ownerDocument?.defaultView;
-    win?.addEventListener("resize", onChange, { passive: true });
-    return () => {
-      resizeObserver.disconnect();
-      win?.removeEventListener("resize", onChange);
-    };
-  }, [element, onChange]);
-}
-function useMutationsListener({ element, onChange }) {
-  useEffect9(() => {
-    if (!element) {
-      return;
-    }
-    const mutationObserver = new MutationObserver(onChange);
-    mutationObserver.observe(element, { childList: true, subtree: true });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [element, onChange]);
-}
-
-// src/components/spotlight-backdrop.tsx
+import * as React10 from "react";
 function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
   const rect = useElementRect(element);
   const clipPath = element ? getRectClipPath(rect, canvas.defaultView) : void 0;
@@ -5777,7 +6010,7 @@ function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
       onExit();
     }
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       style: backdropStyle,