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

package/dist/index.js

@@ -422,47 +422,78 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-var React2 = __toESM(require("react"));
-var import_editor_elements3 = require("@elementor/editor-elements");
+var React5 = __toESM(require("react"));
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
-// src/components/outline-overlay.tsx
-var React = __toESM(require("react"));
-var import_ui = require("@elementor/ui");
-var import_react5 = require("@floating-ui/react");
+// src/components/grid-outline/grid-outline-overlay.tsx
+var React4 = __toESM(require("react"));
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_props2 = require("@elementor/editor-props");
+var import_ui2 = require("@elementor/ui");
+var import_react8 = require("@floating-ui/react");
 
-// src/hooks/use-bind-react-props-to-element.ts
+// src/hooks/use-element-rect.ts
 var import_react2 = require("react");
-function useBindReactPropsToElement(element, getProps) {
+var import_utils2 = require("@elementor/utils");
+function useElementRect(element) {
+  const [rect, setRect] = (0, import_react2.useState)(new DOMRect(0, 0, 0, 0));
+  const onChange = (0, import_utils2.throttle)(
+    () => {
+      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
+    },
+    20,
+    true
+  );
+  useScrollListener({ element, onChange });
+  useResizeListener({ element, onChange });
+  useMutationsListener({ element, onChange });
+  (0, import_react2.useEffect)(
+    () => () => {
+      onChange.cancel();
+    },
+    [onChange]
+  );
+  return rect;
+}
+function useScrollListener({ element, onChange }) {
   (0, import_react2.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));
+    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 }) {
+  (0, import_react2.useEffect)(() => {
+    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 }) {
+  (0, import_react2.useEffect)(() => {
+    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
@@ -506,6 +537,128 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
+// src/hooks/use-grid-tracks.ts
+var import_react5 = require("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 (0, import_react5.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
+var React = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+var import_react7 = require("@floating-ui/react");
+
+// src/hooks/use-bind-react-props-to-element.ts
+var import_react6 = require("react");
+function useBindReactPropsToElement(element, getProps) {
+  (0, import_react6.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 = () => {
@@ -536,11 +689,11 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
 );
 var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
-  const { getFloatingProps, getReferenceProps } = (0, import_react5.useInteractions)([(0, import_react5.useHover)(context)]);
+  const { getFloatingProps, getReferenceProps } = (0, import_react7.useInteractions)([(0, import_react7.useHover)(context)]);
   const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react5.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react7.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,
@@ -555,16 +708,104 @@ var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
   ));
 };
 
+// src/components/grid-outline/grid-outline.tsx
+var React3 = __toESM(require("react"));
+
+// src/components/grid-outline/grid-outline-line.tsx
+var React2 = __toESM(require("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 } = (0, import_editor_elements3.useSelectedElementSettings)();
+  const enabled = import_editor_props2.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(import_react8.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React4.createElement(
+    import_ui2.Box,
+    {
+      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() {
-  const selected = (0, import_editor_elements3.useSelectedElement)();
+  const selected = (0, import_editor_elements4.useSelectedElement)();
   const elements = useElementsDom();
   const currentEditMode = (0, import_editor_v1_adapters2.useEditMode)();
   const isEditMode = currentEditMode === "edit";
@@ -576,7 +817,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}`,
@@ -593,7 +834,7 @@ function useElementsDom() {
   return (0, import_editor_v1_adapters2.__privateUseListenTo)(
     [(0, import_editor_v1_adapters2.windowEvent)("elementor/editor/element-rendered"), (0, import_editor_v1_adapters2.windowEvent)("elementor/editor/element-destroyed")],
     () => {
-      return (0, import_editor_elements3.getElements)().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => ({
+      return (0, import_editor_elements4.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
@@ -601,22 +842,28 @@ function useElementsDom() {
     }
   );
 }
+function isV4Element(dataset) {
+  if (!dataset) {
+    return false;
+  }
+  return ELEMENTS_DATA_ATTR in dataset || "eType" in dataset;
+}
 
 // src/components/interactions-renderer.tsx
-var React3 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_ui2 = require("@elementor/ui");
+var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-interactions-items.ts
-var import_react7 = require("react");
+var import_react10 = require("react");
 var import_editor_interactions = require("@elementor/editor-interactions");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-on-mount.ts
-var import_react6 = require("react");
+var import_react9 = require("react");
 function useOnMount(cb) {
-  const mounted = (0, import_react6.useRef)(false);
-  (0, import_react6.useEffect)(() => {
+  const mounted = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -626,8 +873,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = (0, import_react7.useState)({});
-  const providerAndSubscribers = (0, import_react7.useMemo)(() => {
+  const [interactionItems, setInteractionItems] = (0, import_react10.useState)({});
+  const providerAndSubscribers = (0, import_react10.useMemo)(() => {
     try {
       const providers = import_editor_interactions.interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -644,7 +891,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -675,7 +922,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react10.useMemo)(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -705,7 +952,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React6.createElement(import_ui3.Portal, { container }, /* @__PURE__ */ React6.createElement(
     "script",
     {
       type: "application/json",
@@ -721,9 +968,9 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-var React4 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
-var import_ui3 = require("@elementor/ui");
+var import_ui4 = require("@elementor/ui");
 
 // src/hooks/use-documents-css-links.ts
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
@@ -773,7 +1020,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react10 = require("react");
+var import_react13 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
@@ -835,12 +1082,12 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-var import_react8 = require("react");
+var import_react11 = require("react");
 var import_editor_styles2 = require("@elementor/editor-styles");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-props-resolver.ts
-var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 
 // src/renderers/multi-props.ts
 var isMultiProps = (propValue) => {
@@ -878,7 +1125,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     if (value === null || value === void 0) {
       return null;
     }
-    if (!(0, import_editor_props2.isTransformable)(value)) {
+    if (!(0, import_editor_props3.isTransformable)(value)) {
       return value;
     }
     if (depth > TRANSFORM_DEPTH_LIMIT) {
@@ -963,7 +1210,7 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react11.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles2.getStylesSchema)(),
@@ -978,20 +1225,20 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react9 = require("react");
+var import_react12 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
 var import_editor_styles3 = require("@elementor/editor-styles");
-var import_utils3 = require("@elementor/utils");
+var import_utils4 = require("@elementor/utils");
 
 // src/renderers/errors.ts
-var import_utils2 = require("@elementor/utils");
-var UnknownStyleTypeError = (0, import_utils2.createError)({
+var import_utils3 = require("@elementor/utils");
+var UnknownStyleTypeError = (0, import_utils3.createError)({
   code: "unknown_style_type",
   message: "Unknown style type"
 });
-var UnknownStyleStateError = (0, import_utils2.createError)({
+var UnknownStyleStateError = (0, import_utils3.createError)({
   code: "unknown_style_state",
   message: "Unknown style state"
 });
@@ -1076,7 +1323,7 @@ async function propsToCss({ props, resolve, signal }) {
   }, []).join("");
 }
 function customCssToString(customCss) {
-  const decoded = (0, import_utils3.decodeString)(customCss?.raw || "");
+  const decoded = (0, import_utils4.decodeString)(customCss?.raw || "");
   if (!decoded.trim()) {
     return "";
   }
@@ -1087,7 +1334,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1101,9 +1348,9 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = (0, import_editor_responsive2.useBreakpoints)();
-  const [styleItems, setStyleItems] = (0, import_react10.useState)({});
-  const styleItemsCacheRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = (0, import_react10.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react13.useState)({});
+  const styleItemsCacheRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
+  const providerAndSubscribers = (0, import_react13.useMemo)(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1129,7 +1376,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1144,11 +1391,11 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = (0, import_react10.useMemo)(
+  const breakpointSorter = (0, import_react13.useMemo)(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return (0, import_react10.useMemo)(
+  return (0, import_react13.useMemo)(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1290,7 +1537,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(import_ui3.Portal, { 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(import_ui4.Portal, { 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 (0, import_editor_v1_adapters9.__privateUseListenTo)((0, import_editor_v1_adapters9.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters9.getCanvasIframeDocument)()?.head);
@@ -1320,7 +1567,7 @@ var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 
 // src/form-structure/utils.ts
-var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var FORM_ELEMENT_TYPE = "e-form";
 var FORM_FIELD_ELEMENT_TYPES = /* @__PURE__ */ new Set([
   "e-form-input",
@@ -1350,10 +1597,10 @@ function isWithinForm(element) {
   return isElementWithinFormSelector(element);
 }
 function hasElementType(element, type) {
-  return (0, import_editor_elements4.getAllDescendants)(element).some((item) => getElementType(item) === type);
+  return (0, import_editor_elements5.getAllDescendants)(element).some((item) => getElementType(item) === type);
 }
 function hasElementTypes(element, types) {
-  return (0, import_editor_elements4.getAllDescendants)(element).some((item) => {
+  return (0, import_editor_elements5.getAllDescendants)(element).some((item) => {
     const itemType = getElementType(item);
     return itemType ? types.has(itemType) : false;
   });
@@ -2081,7 +2328,7 @@ function initStyleTransformers() {
 }
 
 // src/legacy/init-legacy-views.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
@@ -2210,25 +2457,25 @@ function createElementViewClassDeclaration() {
 }
 
 // src/legacy/create-nested-templated-element-type.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 
 // src/legacy/create-pending-element.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 function createPendingElement(wrapperView, data, options = {}) {
   const parentContainer = wrapperView.getContainer();
   const model = { ...data };
   if (!model.id) {
-    model.id = (0, import_editor_elements5.generateElementId)();
+    model.id = (0, import_editor_elements6.generateElementId)();
   }
   if (!model.elements) {
     model.elements = [];
   }
-  const added = (0, import_editor_elements5.addModelToParent)(parentContainer.id, model, options);
+  const added = (0, import_editor_elements6.addModelToParent)(parentContainer.id, model, options);
   if (!added) {
     return void 0;
   }
   const childId = model.id;
-  const childModel = (0, import_editor_elements5.findModelInDocument)(childId);
+  const childModel = (0, import_editor_elements6.findModelInDocument)(childId);
   if (!childModel) {
     return void 0;
   }
@@ -2239,7 +2486,7 @@ function createPendingElement(wrapperView, data, options = {}) {
     model: childModel,
     view: void 0,
     lookup() {
-      return (0, import_editor_elements5.getContainer)(childId) ?? pendingContainer;
+      return (0, import_editor_elements6.getContainer)(childId) ?? pendingContainer;
     }
   };
   wrapperView.once("render", () => {
@@ -2252,7 +2499,7 @@ function createPendingElement(wrapperView, data, options = {}) {
 }
 function selectChildWhenWrapperRenders(wrapperView, childId) {
   wrapperView.once("render", () => {
-    const childContainer = (0, import_editor_elements5.getContainer)(childId);
+    const childContainer = (0, import_editor_elements6.getContainer)(childId);
     if (childContainer?.model?.trigger) {
       childContainer.model.trigger("request:edit");
       return;
@@ -2518,7 +2765,7 @@ function createNestedTemplatedElementView({
         this._initAlpine();
       });
       this.model.trigger("render:complete");
-      window.dispatchEvent(new CustomEvent(import_editor_elements6.ELEMENT_STYLE_CHANGE_EVENT));
+      window.dispatchEvent(new CustomEvent(import_editor_elements7.ELEMENT_STYLE_CHANGE_EVENT));
     },
     async _renderTemplate() {
       const model = this.model;
@@ -2758,9 +3005,9 @@ function createPromotionView(BaseView) {
 var import_client = require("react-dom/client");
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-var React6 = __toESM(require("react"));
-var import_editor_elements7 = require("@elementor/editor-elements");
-var import_editor_props4 = require("@elementor/editor-props");
+var React9 = __toESM(require("react"));
+var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
@@ -2807,14 +3054,14 @@ var ReplacementBase = class {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var React5 = __toESM(require("react"));
-var import_react12 = require("react");
+var React8 = __toESM(require("react"));
+var import_react15 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_ui4 = require("@elementor/ui");
-var import_react13 = require("@floating-ui/react");
+var import_ui5 = require("@elementor/ui");
+var import_react16 = require("@floating-ui/react");
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var import_react11 = require("react");
+var import_react14 = require("react");
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -2845,8 +3092,8 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
-  const asyncUnmountInlineEditor = (0, import_react11.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  (0, import_react11.useEffect)(() => {
+  const asyncUnmountInlineEditor = (0, import_react14.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  (0, import_react14.useEffect)(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -2856,8 +3103,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  const [anchor, setAnchor] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -2871,7 +3118,7 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  const clearAnchor = (0, import_react11.useCallback)(() => {
+  const clearAnchor = (0, import_react14.useCallback)(() => {
     setAnchor(null);
   }, []);
   return { onSelectionEnd, anchor, clearAnchor };
@@ -2951,21 +3198,21 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = (0, import_react12.useState)(true);
-  const [editor, setEditor] = (0, import_react12.useState)(null);
+  const [active, setActive] = (0, import_react15.useState)(true);
+  const [editor, setEditor] = (0, import_react15.useState)(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
     }
   }, [active, clearAnchor, requestDestroy]);
-  const dismiss = (0, import_react12.useCallback)(() => {
+  const dismiss = (0, import_react15.useCallback)(() => {
     setEditor(null);
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -2979,7 +3226,7 @@ var CanvasInlineEditor = ({
   if (!active) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React8.createElement(import_ui5.ThemeProvider, null, /* @__PURE__ */ React8.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React8.createElement(
     import_editor_controls2.InlineEditor,
     {
       onEditorCreate: setEditor,
@@ -2996,7 +3243,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,
@@ -3004,26 +3251,26 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = (0, import_react12.useState)(inlineEditedElement);
-  (0, import_react12.useEffect)(() => {
+  const [overlayRefElement, setOverlayElement] = (0, import_react15.useState)(inlineEditedElement);
+  (0, import_react15.useEffect)(() => {
     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 } = (0, import_react13.useFloating)({
+  const { refs, floatingStyles } = (0, import_react16.useFloating)({
     placement: "top",
     strategy: "fixed",
     transform: false,
-    whileElementsMounted: import_react13.autoUpdate,
-    middleware: [horizontalShifterMiddleware, (0, import_react13.flip)()]
+    whileElementsMounted: import_react16.autoUpdate,
+    middleware: [horizontalShifterMiddleware, (0, import_react16.flip)()]
   });
-  (0, import_react12.useLayoutEffect)(() => {
+  (0, import_react15.useLayoutEffect)(() => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React5.createElement(import_react13.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
-    import_ui4.Box,
+  return /* @__PURE__ */ React8.createElement(import_react16.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React8.createElement(
+    import_ui5.Box,
     {
       ref: refs.setFloating,
       role: "presentation",
@@ -3032,16 +3279,16 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React5.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React8.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props3.htmlV3PropTypeUtil.key, import_editor_props3.stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -3061,7 +3308,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return import_editor_props3.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
+  return import_editor_props4.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props4.stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -3135,7 +3382,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return INLINE_EDITING_PROPERTY_PER_TYPE[this.type] ?? "";
   }
   getInlineEditablePropType() {
-    const propSchema = (0, import_editor_elements7.getElementType)(this.type)?.propsSchema;
+    const propSchema = (0, import_editor_elements8.getElementType)(this.type)?.propsSchema;
     const propertyName = this.getInlineEditablePropertyName();
     return propSchema?.[propertyName] ?? null;
   }
@@ -3146,15 +3393,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    const extracted = import_editor_props4.htmlV3PropTypeUtil.extract(propValue);
-    return import_editor_props4.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
+    const extracted = import_editor_props5.htmlV3PropTypeUtil.extract(propValue);
+    return import_editor_props5.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const html = value || "";
-    const parsed = (0, import_editor_props4.parseHtmlChildren)(html);
-    const valueToSave = import_editor_props4.htmlV3PropTypeUtil.create({
-      content: parsed.content ? import_editor_props4.stringPropTypeUtil.create(parsed.content) : null,
+    const parsed = (0, import_editor_props5.parseHtmlChildren)(html);
+    const valueToSave = import_editor_props5.htmlV3PropTypeUtil.create({
+      content: parsed.content ? import_editor_props5.stringPropTypeUtil.create(parsed.content) : null,
       children: parsed.children
     });
     (0, import_editor_v1_adapters12.undoable)(
@@ -3169,7 +3416,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
         }
       },
       {
-        title: (0, import_editor_elements7.getElementLabel)(this.id),
+        title: (0, import_editor_elements8.getElementLabel)(this.id),
         // translators: %s is the name of the property that was edited.
         subtitle: (0, import_i18n3.__)("%s edited", "elementor").replace(
           "%s",
@@ -3185,7 +3432,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key];
+      const textKeys = [import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -3202,7 +3449,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     (0, import_editor_v1_adapters12.__privateRunCommandSync)(
       "document/elements/set-settings",
       {
-        container: (0, import_editor_elements7.getContainer)(this.id),
+        container: (0, import_editor_elements8.getContainer)(this.id),
         settings: {
           [key]: value
         }
@@ -3214,10 +3461,10 @@ var InlineEditingReplacement = class extends ReplacementBase {
   getExpectedTag() {
     const tagPropType = this.getTagPropType();
     const tagSettingKey = "tag";
-    return import_editor_props4.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props4.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
+    return import_editor_props5.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props5.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
   }
   getTagPropType() {
-    const propsSchema = (0, import_editor_elements7.getElementType)(this.type)?.propsSchema;
+    const propsSchema = (0, import_editor_elements8.getElementType)(this.type)?.propsSchema;
     if (!propsSchema?.tag) {
       return null;
     }
@@ -3241,7 +3488,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     contentElement.innerHTML = "";
     this.editing = true;
     this.reactRoot.render(
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React9.createElement(
         CanvasInlineEditor,
         {
           elementClasses,
@@ -3377,7 +3624,7 @@ function registerElementType(type, elementTypeGenerator) {
 }
 function initLegacyViews() {
   (0, import_editor_v1_adapters13.__privateListenTo)((0, import_editor_v1_adapters13.v1ReadyEvent)(), () => {
-    const widgetsCache = (0, import_editor_elements8.getWidgetsCache)() ?? {};
+    const widgetsCache = (0, import_editor_elements9.getWidgetsCache)() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
     registerProPromotionTypes(widgetsCache);
@@ -3434,7 +3681,7 @@ function createNestedTemplatedType(type, renderer, element) {
 }
 
 // src/legacy/tabs-model-extensions.ts
-var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_props6 = require("@elementor/editor-props");
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -3450,8 +3697,8 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: import_editor_props5.htmlV3PropTypeUtil.create({
-          content: import_editor_props5.stringPropTypeUtil.create(`Tab ${position}`),
+        paragraph: import_editor_props6.htmlV3PropTypeUtil.create({
+          content: import_editor_props6.stringPropTypeUtil.create(`Tab ${position}`),
           children: []
         })
       }
@@ -3521,7 +3768,7 @@ var initAvailableWidgetsResource = (reg) => {
 };
 
 // src/mcp/resources/document-structure-resource.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
@@ -3586,7 +3833,7 @@ function resolveElementVersion(element) {
     return "v4";
   }
   const widgetType = element.model?.attributes?.widgetType;
-  if (widgetType && (0, import_editor_elements9.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
+  if (widgetType && (0, import_editor_elements10.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
     return "v4";
   }
   return "v3";
@@ -3782,7 +4029,7 @@ var initGeneralContextResource = (reg) => {
 };
 
 // src/mcp/resources/selected-element-resource.ts
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
 var SELECTED_ELEMENT_URI = "elementor://context/selected-element";
 var initSelectedElementResource = (reg) => {
@@ -3853,11 +4100,11 @@ function createEmptySelectedElementPayload() {
   };
 }
 function readSelectionFromEditor() {
-  const elements = (0, import_editor_elements10.getSelectedElements)();
+  const elements = (0, import_editor_elements11.getSelectedElements)();
   if (elements.length !== 1) {
     return createEmptySelectedElementPayload();
   }
-  const container = (0, import_editor_elements10.getContainer)(elements[0].id);
+  const container = (0, import_editor_elements11.getContainer)(elements[0].id);
   return buildPayloadFromContainer(container);
 }
 function buildPayloadFromContainer(container) {
@@ -3880,7 +4127,7 @@ function resolveElementVersion2(container, widgetType) {
   if (container.model?.config?.atomic) {
     return "v4";
   }
-  if (widgetType && (0, import_editor_elements10.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
+  if (widgetType && (0, import_editor_elements11.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
     return "v4";
   }
   return "v3";
@@ -3890,7 +4137,7 @@ function getElementProperties(container, widgetType) {
   if (!settings || typeof settings !== "object") {
     return null;
   }
-  const widgetConfig = widgetType ? (0, import_editor_elements10.getWidgetsCache)()?.[widgetType] : null;
+  const widgetConfig = widgetType ? (0, import_editor_elements11.getWidgetsCache)()?.[widgetType] : null;
   const controls = widgetConfig?.controls;
   const filtered = {};
   for (const [key, value] of Object.entries(settings)) {
@@ -3929,19 +4176,19 @@ function getElementDisplayName(container) {
 
 // src/mcp/tools/build-composition/tool.ts
 var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_elements14 = require("@elementor/editor-elements");
+var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/composition-builder/composition-builder.ts
-var import_editor_elements13 = require("@elementor/editor-elements");
+var import_editor_elements14 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
-var import_editor_elements11 = require("@elementor/editor-elements");
-var import_editor_props6 = require("@elementor/editor-props");
+var import_editor_elements12 = require("@elementor/editor-elements");
+var import_editor_props7 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
 var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return import_editor_props6.Schema.adjustLlmPropValueSchema(value, {
+  return import_editor_props7.Schema.adjustLlmPropValueSchema(value, {
     forceKey,
     transformers: Utils.globalVariablesLLMResolvers
   });
@@ -3949,7 +4196,7 @@ function resolvePropValue(value, forceKey) {
 var doUpdateElementProperty = (params) => {
   const { elementId, propertyName, propertyValue, elementType } = params;
   if (propertyName === "_styles") {
-    const elementStyles = (0, import_editor_elements11.getElementStyles)(elementId) || {};
+    const elementStyles = (0, import_editor_elements12.getElementStyles)(elementId) || {};
     const propertyMapValue = propertyValue;
     const styleSchema = (0, import_editor_styles5.getStylesSchema)();
     const transformedStyleValues = Object.fromEntries(
@@ -3986,7 +4233,7 @@ var doUpdateElementProperty = (params) => {
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
-          const propUtil = (0, import_editor_props6.getPropSchemaFromCache)(propertyRawSchema.key);
+          const propUtil = (0, import_editor_props7.getPropSchemaFromCache)(propertyRawSchema.key);
           if (propUtil) {
             const plainValue = propUtil.create(propertyMapValue[stylePropName]);
             propertyMapValue[stylePropName] = plainValue;
@@ -3997,7 +4244,7 @@ var doUpdateElementProperty = (params) => {
     delete transformedStyleValues.custom_css;
     const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
     if (!localStyle) {
-      (0, import_editor_elements11.createElementStyle)({
+      (0, import_editor_elements12.createElementStyle)({
         elementId,
         ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         classesProp: "classes",
@@ -4011,7 +4258,7 @@ var doUpdateElementProperty = (params) => {
         }
       });
     } else {
-      (0, import_editor_elements11.updateElementStyle)({
+      (0, import_editor_elements12.updateElementStyle)({
         elementId,
         styleId: localStyle.id,
         meta: {
@@ -4026,7 +4273,7 @@ var doUpdateElementProperty = (params) => {
     }
     return;
   }
-  const elementPropSchema = (0, import_editor_elements11.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+  const elementPropSchema = (0, import_editor_elements12.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
   if (!elementPropSchema) {
     throw new Error(`No prop schema found for element type: ${elementType}`);
   }
@@ -4040,7 +4287,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = import_editor_props6.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = import_editor_props7.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -4049,7 +4296,7 @@ var doUpdateElementProperty = (params) => {
 Expected Schema: ${jsonSchema}`
     );
   }
-  (0, import_editor_elements11.updateElementSettings)({
+  (0, import_editor_elements12.updateElementSettings)({
     id: elementId,
     props: {
       [propertyName]: value
@@ -4060,15 +4307,15 @@ Expected Schema: ${jsonSchema}`
 };
 
 // src/mcp/utils/validate-input.ts
-var import_editor_elements12 = require("@elementor/editor-elements");
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_elements13 = require("@elementor/editor-elements");
+var import_editor_props8 = require("@elementor/editor-props");
 var import_editor_styles6 = require("@elementor/editor-styles");
 var _widgetsSchema = null;
 var validateInput = {
   get widgetsSchema() {
     if (!_widgetsSchema) {
       const schema2 = {};
-      const cache = (0, import_editor_elements12.getWidgetsCache)();
+      const cache = (0, import_editor_elements13.getWidgetsCache)();
       if (!cache) {
         return {};
       }
@@ -4095,10 +4342,10 @@ var validateInput = {
       if (!propSchema) {
         errors.push(`Property "${propName}" is not defined in the schema.`);
         hasInvalidKey = true;
-      } else if (!import_editor_props7.Schema.isPropKeyConfigurable(propName, propSchema)) {
+      } else if (!import_editor_props8.Schema.isPropKeyConfigurable(propName, propSchema)) {
         errors.push(`Property "${propName}" is not configurable.`);
       } else {
-        const { valid } = import_editor_props7.Schema.validatePropValue(propSchema, propValue);
+        const { valid } = import_editor_props8.Schema.validatePropValue(propSchema, propValue);
         if (!valid) {
           errors.push(
             `Invalid property "${propName}". Validate input with resource [${STYLE_SCHEMA_URI.replace(
@@ -4192,11 +4439,11 @@ var CompositionBuilder = class _CompositionBuilder {
   elementCustomCSS = {};
   rootContainers = [];
   api = {
-    createElement: import_editor_elements13.createElement,
-    deleteElement: import_editor_elements13.deleteElement,
-    getWidgetsCache: import_editor_elements13.getWidgetsCache,
-    generateElementId: import_editor_elements13.generateElementId,
-    getContainer: import_editor_elements13.getContainer,
+    createElement: import_editor_elements14.createElement,
+    deleteElement: import_editor_elements14.deleteElement,
+    getWidgetsCache: import_editor_elements14.getWidgetsCache,
+    generateElementId: import_editor_elements14.generateElementId,
+    getContainer: import_editor_elements14.getContainer,
     doUpdateElementProperty
   };
   xml;
@@ -4661,14 +4908,14 @@ var initBuildCompositionsTool = (reg) => {
       let generatedXML = "";
       const errors = [];
       const rootContainers = [];
-      const documentContainer = (0, import_editor_elements14.getContainer)("document");
+      const documentContainer = (0, import_editor_elements15.getContainer)("document");
       const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
       const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: import_editor_elements14.createElement,
-          deleteElement: import_editor_elements14.deleteElement,
-          getWidgetsCache: import_editor_elements14.getWidgetsCache
+          createElement: import_editor_elements15.createElement,
+          deleteElement: import_editor_elements15.deleteElement,
+          getWidgetsCache: import_editor_elements15.getWidgetsCache
         });
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
@@ -4704,7 +4951,7 @@ var initBuildCompositionsTool = (reg) => {
       }
       if (errors.length) {
         rootContainers.forEach((rootContainer) => {
-          (0, import_editor_elements14.deleteElement)({
+          (0, import_editor_elements15.deleteElement)({
             container: rootContainer,
             options: { useHistory: false }
           });
@@ -4758,7 +5005,7 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
   if (doc.querySelector("parsererror")) {
     throw new Error("Failed to parse XML string: " + doc);
   }
-  const widgetsCache = (0, import_editor_elements14.getWidgetsCache)() ?? {};
+  const widgetsCache = (0, import_editor_elements15.getWidgetsCache)() ?? {};
   for (const node of doc.querySelectorAll("*")) {
     const type = node.tagName;
     const widgetData = widgetsCache[type];
@@ -4777,7 +5024,7 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 }
 
 // src/mcp/tools/configure-element/tool.ts
-var import_editor_elements15 = require("@elementor/editor-elements");
+var import_editor_elements16 = require("@elementor/editor-elements");
 
 // src/mcp/tools/configure-element/prompt.ts
 var import_editor_mcp3 = require("@elementor/editor-mcp");
@@ -4946,7 +5193,7 @@ var initConfigureElementTool = (reg) => {
       { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI }
     ],
     handler: ({ elementId, propertiesToChange, elementType, stylePropertiesToChange }) => {
-      const widgetData = (0, import_editor_elements15.getWidgetsCache)()?.[elementType];
+      const widgetData = (0, import_editor_elements16.getWidgetsCache)()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -5038,8 +5285,8 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-var import_editor_elements16 = require("@elementor/editor-elements");
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_props9 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
   elementId: import_schema5.z.string()
@@ -5073,12 +5320,12 @@ var initGetElementConfigTool = (reg) => {
     schema,
     outputSchema: outputSchema3,
     handler: async ({ elementId }) => {
-      const element = (0, import_editor_elements16.getContainer)(elementId);
+      const element = (0, import_editor_elements17.getContainer)(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementType = element.model.get("widgetType") || element.model.get("elType") || "";
-      const widgetData = (0, import_editor_elements16.getWidgetsCache)()?.[elementType];
+      const widgetData = (0, import_editor_elements17.getWidgetsCache)()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -5090,16 +5337,16 @@ var initGetElementConfigTool = (reg) => {
         );
       }
       const elementRawSettings = element.settings;
-      const propSchema = (0, import_editor_elements16.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+      const propSchema = (0, import_editor_elements17.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
       const propValues = {};
       const stylePropValues = {};
-      import_editor_props8.Schema.configurableKeys(propSchema).forEach((key) => {
+      import_editor_props9.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
-      const elementStyles = (0, import_editor_elements16.getElementStyles)(elementId) || {};
+      const elementStyles = (0, import_editor_elements17.getElementStyles)(elementId) || {};
       const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
       if (localStyle) {
         const defaultVariant = localStyle.variants.find(
@@ -5257,7 +5504,7 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 `;
 
 // src/prevent-link-in-link-commands.ts
-var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
@@ -5328,25 +5575,25 @@ function shouldBlock(sourceElements, targetElements) {
     return false;
   }
   const isSourceContainsAnAnchor = sourceElements.some((src) => {
-    return src?.id ? (0, import_editor_elements17.isElementAnchored)(src.id) || !!(0, import_editor_elements17.getAnchoredDescendantId)(src.id) : false;
+    return src?.id ? (0, import_editor_elements18.isElementAnchored)(src.id) || !!(0, import_editor_elements18.getAnchoredDescendantId)(src.id) : false;
   });
   if (!isSourceContainsAnAnchor) {
     return false;
   }
   const isTargetContainsAnAnchor = targetElements.some((target) => {
-    return target?.id ? (0, import_editor_elements17.isElementAnchored)(target.id) || !!(0, import_editor_elements17.getAnchoredAncestorId)(target.id) : false;
+    return target?.id ? (0, import_editor_elements18.isElementAnchored)(target.id) || !!(0, import_editor_elements18.getAnchoredAncestorId)(target.id) : false;
   });
   return isTargetContainsAnAnchor;
 }
 
 // src/style-commands/paste-style.ts
-var import_editor_elements20 = require("@elementor/editor-elements");
-var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_elements21 = require("@elementor/editor-elements");
+var import_editor_props11 = require("@elementor/editor-props");
 var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
-var import_editor_elements18 = require("@elementor/editor-elements");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_elements19 = require("@elementor/editor-elements");
+var import_editor_props10 = require("@elementor/editor-props");
 var import_i18n5 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
@@ -5364,13 +5611,13 @@ function getClassesProp(container) {
     return null;
   }
   const [propKey] = Object.entries(propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props9.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props10.CLASSES_PROP_KEY
   ) ?? [];
   return propKey ?? null;
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements18.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements19.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -5383,11 +5630,11 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n5.__)("Elements", "elementor") : (0, import_editor_elements18.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n5.__)("Elements", "elementor") : (0, import_editor_elements19.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements19 = require("@elementor/editor-elements");
+var import_editor_elements20 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
@@ -5400,7 +5647,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters21.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements19.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements20.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -5409,7 +5656,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters21.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            (0, import_editor_elements19.updateElementStyle)({
+            (0, import_editor_elements20.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -5420,7 +5667,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters21.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements19.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements20.createElementStyle)({
             elementId,
             classesProp,
             label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -5438,7 +5685,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters21.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements19.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements20.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -5447,7 +5694,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters21.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements19.createElementStyle)({
+        (0, import_editor_elements20.createElementStyle)({
           elementId: container.id,
           classesProp,
           label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -5484,7 +5731,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = (0, import_editor_elements20.getContainer)(clipboardElement.id);
+  const clipboardContainer = (0, import_editor_elements21.getContainer)(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -5503,7 +5750,7 @@ function getClassesWithoutLocalStyle(clipboardContainer, style) {
   if (!classesProp) {
     return [];
   }
-  const classesSetting = (0, import_editor_elements20.getElementSetting)(clipboardContainer.id, classesProp);
+  const classesSetting = (0, import_editor_elements21.getElementSetting)(clipboardContainer.id, classesProp);
   return classesSetting?.value.filter((styleId) => styleId !== style?.id) ?? [];
 }
 function pasteClasses(containers, classes) {
@@ -5512,10 +5759,10 @@ function pasteClasses(containers, classes) {
     if (!classesProp) {
       return;
     }
-    const classesSetting = (0, import_editor_elements20.getElementSetting)(container.id, classesProp);
-    const currentClasses = import_editor_props10.classesPropTypeUtil.extract(classesSetting) ?? [];
-    const newClasses = import_editor_props10.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
-    (0, import_editor_elements20.updateElementSettings)({
+    const classesSetting = (0, import_editor_elements21.getElementSetting)(container.id, classesProp);
+    const currentClasses = import_editor_props11.classesPropTypeUtil.extract(classesSetting) ?? [];
+    const newClasses = import_editor_props11.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
+    (0, import_editor_elements21.updateElementSettings)({
       id: container.id,
       props: { [classesProp]: newClasses }
     });
@@ -5526,7 +5773,7 @@ function pasteClasses(containers, classes) {
 var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements21 = require("@elementor/editor-elements");
+var import_editor_elements22 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
@@ -5535,9 +5782,9 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters23.undoable)(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements21.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements22.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements21.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements22.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -5553,7 +5800,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters23.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements21.createElementStyle)({
+          (0, import_editor_elements22.createElementStyle)({
             elementId,
             classesProp,
             styleId,
@@ -5687,72 +5934,7 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 var GLOBAL_STYLES_IMPORTED_EVENT = "elementor/global-styles/imported";
 
 // src/components/spotlight-backdrop.tsx
-var React7 = __toESM(require("react"));
-
-// src/hooks/use-element-rect.ts
-var import_react14 = require("react");
-var import_utils6 = require("@elementor/utils");
-function useElementRect(element) {
-  const [rect, setRect] = (0, import_react14.useState)(new DOMRect(0, 0, 0, 0));
-  const onChange = (0, import_utils6.throttle)(
-    () => {
-      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
-    },
-    20,
-    true
-  );
-  useScrollListener({ element, onChange });
-  useResizeListener({ element, onChange });
-  useMutationsListener({ element, onChange });
-  (0, import_react14.useEffect)(
-    () => () => {
-      onChange.cancel();
-    },
-    [onChange]
-  );
-  return rect;
-}
-function useScrollListener({ element, onChange }) {
-  (0, import_react14.useEffect)(() => {
-    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 }) {
-  (0, import_react14.useEffect)(() => {
-    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 }) {
-  (0, import_react14.useEffect)(() => {
-    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
+var React10 = __toESM(require("react"));
 function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
   const rect = useElementRect(element);
   const clipPath = element ? getRectClipPath(rect, canvas.defaultView) : void 0;
@@ -5774,7 +5956,7 @@ function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
       onExit();
     }
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       style: backdropStyle,
@@ -5799,9 +5981,9 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-escape-on-canvas.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!canvasDocument) {
       return;
     }
@@ -5818,10 +6000,10 @@ function useEscapeOnCanvas(canvasDocument, onEscape) {
 }
 
 // src/utils/after-render.ts
-var import_editor_elements22 = require("@elementor/editor-elements");
+var import_editor_elements23 = require("@elementor/editor-elements");
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = (0, import_editor_elements22.getContainer)(elementId)?.view;
+    const view = (0, import_editor_elements23.getContainer)(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }