@elementor/editor-canvas 3.33.0-98 → 3.35.0-324

package/dist/index.mjs

@@ -1,5 +1,7 @@
 // src/init.tsx
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
+import { init as initInteractionsRepository } from "@elementor/editor-interactions";
+import { getMCPByDomain } from "@elementor/editor-mcp";
 
 // src/components/classes-rename.tsx
 import { useEffect } from "react";
@@ -44,24 +46,108 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { getElements, useSelectedElement } from "@elementor/editor-elements";
 import {
   __privateUseIsRouteActive as useIsRouteActive,
   __privateUseListenTo as useListenTo,
+  isExperimentActive,
   useEditMode,
   windowEvent
 } from "@elementor/editor-v1-adapters";
 
-// src/components/element-overlay.tsx
+// src/utils/inline-editing-utils.ts
+import { getContainer, getElementType } from "@elementor/editor-elements";
+var WIDGET_PROPERTY_MAP = {
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var getHtmlPropertyName = (container) => {
+  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
+  if (!widgetType) {
+    return "";
+  }
+  if (WIDGET_PROPERTY_MAP[widgetType]) {
+    return WIDGET_PROPERTY_MAP[widgetType];
+  }
+  const propsSchema = getElementType(widgetType)?.propsSchema;
+  if (!propsSchema) {
+    return "";
+  }
+  const entry = Object.entries(propsSchema).find(([, propType]) => propType.key === "html");
+  return entry?.[0] ?? "";
+};
+var hasInlineEditableProperty = (containerId) => {
+  const container = getContainer(containerId);
+  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
+  if (!widgetType) {
+    return false;
+  }
+  return widgetType in WIDGET_PROPERTY_MAP;
+};
+var getInlineEditablePropertyName = (container) => {
+  return getHtmlPropertyName(container);
+};
+
+// src/components/inline-editor-overlay.tsx
+import * as React2 from "react";
+import { InlineEditor } from "@elementor/editor-controls";
+import { getContainer as getContainer2, updateElementSettings, useElementSetting } from "@elementor/editor-elements";
+import { htmlPropTypeUtil } from "@elementor/editor-props";
+import { Box as Box2 } from "@elementor/ui";
+import { debounce } from "@elementor/utils";
+import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
+
+// src/hooks/use-floating-on-element.ts
+import { useEffect as useEffect2, useState } from "react";
+import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const sizeModifier = 2;
+  const { refs, floatingStyles, context } = useFloating({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      // Match the floating element's size to the reference element.
+      size(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
+      }),
+      // Center the floating element on the reference element.
+      offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  useEffect2(() => {
+    refs.setReference(element);
+  }, [element, refs]);
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
+// src/components/outline-overlay.tsx
 import * as React from "react";
 import { Box, styled } from "@elementor/ui";
 import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
 
 // src/hooks/use-bind-react-props-to-element.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function useBindReactPropsToElement(element, getProps) {
-  useEffect2(() => {
+  useEffect3(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -92,45 +178,24 @@ function groupProps(props) {
   );
 }
 
-// src/hooks/use-floating-on-element.ts
-import { useEffect as useEffect3, useState } from "react";
-import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
-function useFloatingOnElement({ element, isSelected }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const { refs, floatingStyles, context } = useFloating({
-    // Must be controlled for interactions (like hover) to work.
-    open: isOpen || isSelected,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      // Match the floating element's size to the reference element.
-      size({
-        apply({ elements, rects }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width + 2}px`,
-            height: `${rects.reference.height + 2}px`
-          });
-        }
-      }),
-      // Center the floating element on the reference element.
-      offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
-    ]
-  });
-  useEffect3(() => {
-    refs.setReference(element);
-  }, [element, refs]);
-  return {
-    isVisible: isOpen || isSelected,
-    context,
-    floating: {
-      setRef: refs.setFloating,
-      ref: refs.floating,
-      styles: floatingStyles
-    }
-  };
-}
+// src/hooks/use-has-overlapping.ts
+var possibleOverlappingSelectors = [".e-off-canvas"];
+var useHasOverlapping = () => {
+  const preview = window.elementor?.$preview?.[0];
+  if (!preview) {
+    return false;
+  }
+  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
+    (elem) => elem.checkVisibility({
+      opacityProperty: true,
+      visibilityProperty: true,
+      contentVisibilityAuto: true
+    })
+  );
+  return hasOverlapping;
+};
 
-// src/components/element-overlay.tsx
+// src/components/outline-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = styled(Box, {
   shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset"
@@ -139,12 +204,13 @@ var OverlayBox = styled(Box, {
   outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
   pointerEvents: "none"
 }));
-function ElementOverlay({ element, isSelected, id }) {
+var OutlineOverlay = ({ element, isSelected, id }) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
+  const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,
@@ -156,9 +222,75 @@ function ElementOverlay({ element, isSelected, id }) {
       ...getFloatingProps()
     }
   ));
-}
+};
+
+// src/components/inline-editor-overlay.tsx
+var OVERLAY_Z_INDEX = 1e3;
+var DEBOUNCE_DELAY = 100;
+var InlineEditorOverlay = ({ element, isSelected, id }) => {
+  const { floating, isVisible } = useFloatingOnElement({ element, isSelected });
+  const propertyName = React2.useMemo(() => {
+    const container = getContainer2(id);
+    return getInlineEditablePropertyName(container);
+  }, [id]);
+  const contentProp = useElementSetting(id, propertyName);
+  const value = React2.useMemo(() => htmlPropTypeUtil.extract(contentProp) || "", [contentProp]);
+  const debouncedUpdateRef = React2.useRef(null);
+  const lastValueRef = React2.useRef("");
+  React2.useEffect(() => {
+    debouncedUpdateRef.current = debounce((newValue) => {
+      const textContent = newValue.replace(/<[^>]*>/g, "").trim();
+      const valueToSave = textContent === "" ? "&nbsp;" : newValue;
+      updateElementSettings({
+        id,
+        props: {
+          [propertyName]: htmlPropTypeUtil.create(valueToSave)
+        },
+        withHistory: true
+      });
+    }, DEBOUNCE_DELAY);
+    return () => {
+      debouncedUpdateRef.current?.cancel?.();
+    };
+  }, [id, propertyName]);
+  const handleValueChange = React2.useCallback((newValue) => {
+    lastValueRef.current = newValue;
+    debouncedUpdateRef.current?.(newValue);
+  }, []);
+  React2.useEffect(() => {
+    if (!isVisible && debouncedUpdateRef.current?.pending?.()) {
+      debouncedUpdateRef.current.flush(lastValueRef.current);
+    }
+  }, [isVisible]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React2.createElement(
+    Box2,
+    {
+      ref: floating.setRef,
+      style: {
+        ...floating.styles,
+        zIndex: OVERLAY_Z_INDEX,
+        pointerEvents: "auto"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(InlineEditor, { value, setValue: handleValueChange, showToolbar: isSelected })
+  ));
+};
 
 // src/components/elements-overlays.tsx
+var ELEMENTS_DATA_ATTR = "atomic";
+var overlayRegistry = [
+  {
+    component: OutlineOverlay,
+    shouldRender: () => true
+  },
+  {
+    component: InlineEditorOverlay,
+    shouldRender: ({ id, isSelected }) => isSelected && hasInlineEditableProperty(id) && isExperimentActive("v4-inline-text-editing")
+  }
+];
 function ElementsOverlays() {
   const selected = useSelectedElement();
   const elements = useElementsDom();
@@ -166,9 +298,16 @@ function ElementsOverlays() {
   const isEditMode = currentEditMode === "edit";
   const isKitRouteActive = useIsRouteActive("panel/global");
   const isActive = isEditMode && !isKitRouteActive;
-  return isActive && elements.map(([id, element]) => /* @__PURE__ */ React2.createElement(ElementOverlay, { key: id, id, element, isSelected: selected.element?.id === id }));
+  if (!isActive) {
+    return null;
+  }
+  return elements.map(([id, element]) => {
+    const isSelected = selected.element?.id === id;
+    return overlayRegistry.map(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element, isSelected }) && /* @__PURE__ */ React3.createElement(Overlay, { key: `${id}-${index}`, id, element, isSelected })
+    );
+  });
 }
-var ELEMENTS_DATA_ATTR = "atomic";
 function useElementsDom() {
   return useListenTo(
     [windowEvent("elementor/editor/element-rendered"), windowEvent("elementor/editor/element-destroyed")],
@@ -178,13 +317,100 @@ function useElementsDom() {
   );
 }
 
-// src/components/style-renderer.tsx
-import * as React3 from "react";
-import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
+// src/components/interactions-renderer.tsx
+import * as React4 from "react";
+import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
-// src/hooks/use-documents-css-links.ts
-import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
+// src/hooks/use-interactions-items.ts
+import { useEffect as useEffect6, useMemo as useMemo2, useState as useState2 } from "react";
+import { interactionsRepository } from "@elementor/editor-interactions";
+import { registerDataHook } from "@elementor/editor-v1-adapters";
+
+// src/hooks/use-on-mount.ts
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
+function useOnMount(cb) {
+  const mounted = useRef2(false);
+  useEffect5(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      cb();
+    }
+  }, []);
+}
+
+// src/hooks/use-interactions-items.ts
+function useInteractionsItems() {
+  const [interactionItems, setInteractionItems] = useState2({});
+  const providerAndSubscribers = useMemo2(() => {
+    try {
+      const providers = interactionsRepository.getProviders();
+      const mapped = providers.map((provider) => {
+        return {
+          provider,
+          subscriber: createProviderSubscriber({
+            provider,
+            setInteractionItems
+          })
+        };
+      });
+      return mapped;
+    } catch {
+      return [];
+    }
+  }, []);
+  useEffect6(() => {
+    if (providerAndSubscribers.length === 0) {
+      return;
+    }
+    const unsubscribes = providerAndSubscribers.map(({ provider, subscriber }) => {
+      const safeSubscriber = () => {
+        try {
+          subscriber();
+        } catch {
+        }
+      };
+      const unsubscribe = provider.subscribe(safeSubscriber);
+      return unsubscribe;
+    });
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [providerAndSubscribers]);
+  useOnMount(() => {
+    if (providerAndSubscribers.length === 0) {
+      return;
+    }
+    registerDataHook("after", "editor/documents/attach-preview", async () => {
+      providerAndSubscribers.forEach(({ subscriber }) => {
+        try {
+          subscriber();
+        } catch {
+        }
+      });
+    });
+  });
+  return useMemo2(() => {
+    const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
+    return result;
+  }, [interactionItems]);
+}
+function sortByProviderPriority({ provider: providerA }, { provider: providerB }) {
+  return providerA.priority - providerB.priority;
+}
+function createProviderSubscriber({ provider, setInteractionItems }) {
+  return () => {
+    try {
+      const items = provider.actions.all();
+      const providerKey = provider.getKey();
+      setInteractionItems((prev) => ({
+        ...prev,
+        [providerKey]: { provider, items }
+      }));
+    } catch {
+    }
+  };
+}
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -192,13 +418,42 @@ function getCanvasIframeDocument() {
   return extendedWindow.elementor?.$preview?.[0]?.contentDocument;
 }
 
+// src/components/interactions-renderer.tsx
+function InteractionsRenderer() {
+  const container = usePortalContainer();
+  const interactionItems = useInteractionsItems();
+  if (!container) {
+    return null;
+  }
+  const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
+  return /* @__PURE__ */ React4.createElement(Portal, { container }, /* @__PURE__ */ React4.createElement(
+    "script",
+    {
+      type: "application/json",
+      "data-e-interactions": "true",
+      dangerouslySetInnerHTML: {
+        __html: interactionsData
+      }
+    }
+  ));
+}
+function usePortalContainer() {
+  return useListenTo2(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+}
+
+// src/components/style-renderer.tsx
+import * as React5 from "react";
+import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
+import { Portal as Portal2 } from "@elementor/ui";
+
 // src/hooks/use-documents-css-links.ts
+import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
 var REMOVED_ATTR = "data-e-removed";
 var DOCUMENT_WRAPPER_ATTR = "data-elementor-id";
 var CSS_LINK_ID_PREFIX = "elementor-post-";
 var CSS_LINK_ID_SUFFIX = "-css";
 function useDocumentsCssLinks() {
-  return useListenTo2(commandEndEvent("editor/documents/attach-preview"), () => {
+  return useListenTo3(commandEndEvent2("editor/documents/attach-preview"), () => {
     const iframeDocument = getCanvasIframeDocument();
     if (!iframeDocument) {
       return [];
@@ -239,10 +494,11 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect5, useMemo as useMemo3, useState as useState2 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useState as useState3 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
+import { isClassState as isClassState2 } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
-import { registerDataHook } from "@elementor/editor-v1-adapters";
+import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 
 // src/utils/abort-previous-runs.ts
 function abortPreviousRuns(cb) {
@@ -275,20 +531,8 @@ function signalizedProcess(signal, steps = []) {
   };
 }
 
-// src/hooks/use-on-mount.ts
-import { useEffect as useEffect4, useRef } from "react";
-function useOnMount(cb) {
-  const mounted = useRef(false);
-  useEffect4(() => {
-    if (!mounted.current) {
-      mounted.current = true;
-      cb();
-    }
-  }, []);
-}
-
 // src/hooks/use-style-prop-resolver.ts
-import { useMemo } from "react";
+import { useMemo as useMemo3 } from "react";
 import { getStylesSchema } from "@elementor/editor-styles";
 
 // src/renderers/create-props-resolver.ts
@@ -313,10 +557,10 @@ var getMultiPropsValue = (multiProps) => {
 // src/renderers/create-props-resolver.ts
 var TRANSFORM_DEPTH_LIMIT = 3;
 function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
-  async function resolve({ props, schema, signal }) {
-    schema = schema ?? initialSchema;
+  async function resolve({ props, schema: schema2, signal }) {
+    schema2 = schema2 ?? initialSchema;
     const promises = Promise.all(
-      Object.entries(schema).map(async ([key, type]) => {
+      Object.entries(schema2).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
         const transformed = await transform({ value, key, type, signal });
         onPropResolve?.({ key, value: transformed });
@@ -412,7 +656,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return useMemo(() => {
+  return useMemo3(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema(),
@@ -427,11 +671,14 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
-import { EXPERIMENTAL_FEATURES, isExperimentActive } from "@elementor/editor-v1-adapters";
+import {
+  isClassState,
+  isPseudoState
+} from "@elementor/editor-styles";
 import { decodeString } from "@elementor/utils";
 
 // src/renderers/errors.ts
@@ -440,6 +687,10 @@ var UnknownStyleTypeError = createError({
   code: "unknown_style_type",
   message: "Unknown style type"
 });
+var UnknownStyleStateError = createError({
+  code: "unknown_style_state",
+  message: "Unknown style state"
+});
 
 // src/renderers/create-styles-renderer.ts
 var SELECTORS_MAP = {
@@ -457,7 +708,8 @@ function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
       return {
         id: style.id,
         breakpoint: style?.variants[0]?.meta?.breakpoint || "desktop",
-        value: variantsCss.join("")
+        value: variantsCss.join(""),
+        state: style?.variants[0]?.meta?.state || null
       };
     });
     return await Promise.all(stylesCssPromises);
@@ -473,7 +725,18 @@ function createStyleWrapper(value = "", wrapper) {
       return createStyleWrapper(`${value}${symbol}${cssName}`, wrapper);
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
-    withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
+    withState: (state) => {
+      if (!state) {
+        return createStyleWrapper(value, wrapper);
+      }
+      if (isClassState(state)) {
+        return createStyleWrapper(`${value}.${state}`, wrapper);
+      }
+      if (isPseudoState(state)) {
+        return createStyleWrapper(`${value}:${state}`, wrapper);
+      }
+      throw new UnknownStyleStateError({ context: { state } });
+    },
     withMediaQuery: (breakpoint) => {
       if (!breakpoint?.type) {
         return createStyleWrapper(value, wrapper);
@@ -501,10 +764,7 @@ async function propsToCss({ props, resolve, signal }) {
   }, []).join("");
 }
 function customCssToString(customCss) {
-  if (!isExperimentActive(EXPERIMENTAL_FEATURES.CUSTOM_CSS) || !customCss?.raw) {
-    return "";
-  }
-  const decoded = decodeString(customCss.raw);
+  const decoded = decodeString(customCss?.raw || "");
   if (!decoded.trim()) {
     return "";
   }
@@ -515,7 +775,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = useBreakpointsMap();
-  return useMemo2(() => {
+  return useMemo4(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -528,12 +788,12 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
-  const [styleItems, setStyleItems] = useState2({});
-  const providerAndSubscribers = useMemo3(() => {
+  const [styleItems, setStyleItems] = useState3({});
+  const providerAndSubscribers = useMemo5(() => {
     return stylesRepository2.getProviders().map((provider) => {
       return {
         provider,
-        subscriber: createProviderSubscriber({
+        subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems
@@ -541,7 +801,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  useEffect5(() => {
+  useEffect7(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -550,22 +810,34 @@ function useStyleItems() {
     };
   }, [providerAndSubscribers]);
   useOnMount(() => {
-    registerDataHook("after", "editor/documents/attach-preview", async () => {
+    registerDataHook2("after", "editor/documents/attach-preview", async () => {
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
   });
   const breakpointsOrder = getBreakpoints().map((breakpoint) => breakpoint.id);
-  return useMemo3(
-    () => Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items).sort(({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => {
-      return breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
-    }),
-    // eslint-disable-next-line
+  return useMemo5(
+    () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
   );
 }
-function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
+function sortByProviderPriority2({ provider: providerA }, { provider: providerB }) {
+  return providerA.priority - providerB.priority;
+}
+function sortByBreakpoint(breakpointsOrder) {
+  return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
+}
+function sortByStateType({ state: stateA }, { state: stateB }) {
+  if (isClassState2(stateA) && !isClassState2(stateB)) {
+    return -1;
+  }
+  if (!isClassState2(stateA) && isClassState2(stateB)) {
+    return 1;
+  }
+  return 0;
+}
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
     (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
       const styles = provider.actions.all().map((__5, index, items) => {
@@ -611,16 +883,16 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
 
 // src/components/style-renderer.tsx
 function StyleRenderer() {
-  const container = usePortalContainer();
+  const container = usePortalContainer2();
   const styleItems = useStyleItems();
   const linksAttrs = useDocumentsCssLinks();
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(Portal, { container }, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: `${item.id}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React5.createElement(Portal2, { container }, styleItems.map((item, i) => /* @__PURE__ */ React5.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React5.createElement("link", { ...attrs, key: attrs.id })));
 }
-function usePortalContainer() {
-  return useListenTo3(commandEndEvent2("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+function usePortalContainer2() {
+  return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 
 // src/settings-transformers-registry.ts
@@ -632,48 +904,39 @@ function createTransformer(cb) {
 }
 
 // src/transformers/settings/attributes-transformer.ts
-function escapeHtmlAttribute(value) {
-  const specialChars = {
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    "'": "&#39;",
-    '"': "&quot;"
-  };
-  return value.replace(/[&<>'"]/g, (char) => specialChars[char] || char);
-}
-var attributesTransformer = createTransformer((values) => {
-  return values.map((value) => {
-    if (!value.key || !value.value) {
-      return "";
-    }
-    const escapedValue = escapeHtmlAttribute(value.value);
-    return `${value.key}="${escapedValue}"`;
-  }).join(" ");
-});
+var attributesTransformer = createTransformer(() => "");
 
 // src/transformers/settings/classes-transformer.ts
 import { stylesRepository as stylesRepository3 } from "@elementor/editor-styles-repository";
+function transformClassId(id, cache) {
+  if (!cache.has(id)) {
+    const provider2 = stylesRepository3.getProviders().find((p) => {
+      return p.actions.all().find((style) => style.id === id);
+    });
+    if (!provider2) {
+      return id;
+    }
+    cache.set(id, provider2.getKey());
+  }
+  const providerKey = cache.get(id);
+  const provider = stylesRepository3.getProviderByKey(providerKey);
+  return provider?.actions.resolveCssName(id) ?? id;
+}
 function createClassesTransformer() {
   const cache = /* @__PURE__ */ new Map();
   return createTransformer((value) => {
-    return value.map((id) => {
-      if (!cache.has(id)) {
-        cache.set(id, getCssName(id));
-      }
-      return cache.get(id);
-    }).filter(Boolean);
+    return value.map((id) => transformClassId(id, cache)).filter(Boolean);
   });
 }
-function getCssName(id) {
-  const provider = stylesRepository3.getProviders().find((p) => {
-    return p.actions.all().find((style) => style.id === id);
-  });
-  if (!provider) {
-    return id;
-  }
-  return provider.actions.resolveCssName(id);
-}
+
+// src/transformers/settings/date-time-transformer.ts
+var dateTimeTransformer = createTransformer((values) => {
+  return values.map((value) => {
+    const date = (value.date || "").trim();
+    const time = (value.time || "").trim();
+    return !date && !time ? "" : `${date} ${time}`.trim();
+  }).join(" ");
+});
 
 // src/transformers/settings/link-transformer.ts
 var linkTransformer = createTransformer(({ destination, isTargetBlank }) => {
@@ -684,6 +947,11 @@ var linkTransformer = createTransformer(({ destination, isTargetBlank }) => {
   };
 });
 
+// src/transformers/settings/query-transformer.ts
+var queryTransformer = createTransformer(({ id }) => {
+  return id ?? null;
+});
+
 // src/transformers/shared/image-src-transformer.ts
 var imageSrcTransformer = createTransformer((value) => ({
   id: value.id ?? null,
@@ -723,7 +991,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -821,10 +1089,11 @@ function getValuesString(items, prop, defaultValue, preventUnification = false)
 
 // src/transformers/styles/background-transformer.ts
 var backgroundTransformer = createTransformer((value) => {
-  const { color = null, "background-overlay": overlays = null } = value;
+  const { color = null, "background-overlay": overlays = null, clip = null } = value;
   return createMultiPropsValue({
     ...overlays,
-    "background-color": color
+    "background-color": color,
+    "background-clip": clip
   });
 });
 
@@ -950,11 +1219,19 @@ var transformMoveTransformer = createTransformer((value) => {
 
 // src/transformers/styles/transform-origin-transformer.ts
 var EMPTY_VALUE = "0px";
+var DEFAULT_XY = "50%";
+var DEFAULT_Z = EMPTY_VALUE;
 function getVal2(val) {
   return `${val ?? EMPTY_VALUE}`;
 }
 var transformOriginTransformer = createTransformer((value) => {
-  return `${getVal2(value.x)} ${getVal2(value.y)} ${getVal2(value.z)}`;
+  const x = getVal2(value.x);
+  const y = getVal2(value.y);
+  const z4 = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z4 === DEFAULT_Z) {
+    return null;
+  }
+  return `${x} ${y} ${z4}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -982,17 +1259,36 @@ var transformSkewTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transition-transformer.ts
+import { transitionProperties } from "@elementor/editor-controls";
+var getAllowedProperties = () => {
+  const allowedProperties = /* @__PURE__ */ new Set();
+  transitionProperties.forEach((category) => {
+    category.properties.forEach((property) => {
+      allowedProperties.add(property.value);
+    });
+  });
+  return allowedProperties;
+};
 var transitionTransformer = createTransformer((transitionValues) => {
   if (transitionValues?.length < 1) {
     return null;
   }
-  return transitionValues.filter(Boolean).map(mapToTransitionString).join(", ");
+  const allowedProperties = getAllowedProperties();
+  const validTransitions = transitionValues.map((value) => mapToTransitionString(value, allowedProperties)).filter(Boolean);
+  if (validTransitions.length === 0) {
+    return null;
+  }
+  return validTransitions.join(", ");
 });
-var mapToTransitionString = (value) => {
+var mapToTransitionString = (value, allowedProperties) => {
   if (!value.selection || !value.size) {
     return "";
   }
-  return `${value.selection.value} ${value.size}`;
+  const property = value.selection.value;
+  if (!allowedProperties.has(property)) {
+    return "";
+  }
+  return `${property} ${value.size}`;
 };
 
 // src/init-style-transformers.ts
@@ -1153,26 +1449,21 @@ function createElementViewClassDeclaration() {
 }
 
 // src/legacy/create-templated-element-type.ts
-function createTemplatedElementType({ type, renderer, element }) {
+function createTemplatedElementType({
+  type,
+  renderer,
+  element
+}) {
   const legacyWindow = window;
-  Object.entries(element.twig_templates).forEach(([key, template]) => {
-    renderer.register(key, template);
-  });
-  const propsResolver = createPropsResolver({
-    transformers: settingsTransformersRegistry,
-    schema: element.atomic_props_schema
-  });
   return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
     getView() {
-      return createTemplatedElementViewClassDeclaration({
+      return createTemplatedElementView({
         type,
         renderer,
-        propsResolver,
-        baseStylesDictionary: element.base_styles_dictionary,
-        templateKey: element.twig_main_template
+        element
       });
     }
   };
@@ -1180,14 +1471,21 @@ function createTemplatedElementType({ type, renderer, element }) {
 function canBeTemplated(element) {
   return !!(element.atomic_props_schema && element.twig_templates && element.twig_main_template && element.base_styles_dictionary);
 }
-function createTemplatedElementViewClassDeclaration({
+function createTemplatedElementView({
   type,
   renderer,
-  propsResolver: resolveProps,
-  templateKey,
-  baseStylesDictionary
+  element
 }) {
   const BaseView = createElementViewClassDeclaration();
+  const templateKey = element.twig_main_template;
+  const baseStylesDictionary = element.base_styles_dictionary;
+  Object.entries(element.twig_templates).forEach(([key, template]) => {
+    renderer.register(key, template);
+  });
+  const resolveProps = createPropsResolver({
+    transformers: settingsTransformersRegistry,
+    schema: element.atomic_props_schema
+  });
   return class extends BaseView {
     #abortController = null;
     getTemplateType() {
@@ -1196,41 +1494,63 @@ function createTemplatedElementViewClassDeclaration({
     renderOnChange() {
       this.render();
     }
-    // Overriding Marionette original render method to inject our renderer.
-    async _renderTemplate() {
-      this.#beforeRenderTemplate();
+    // Override `render` function to support async `_renderTemplate`
+    // Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
+    render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then((_, signal) => {
+      const process = signalizedProcess(this.#abortController.signal).then(() => this.#beforeRender()).then(() => this._renderTemplate()).then(() => {
+        this._renderChildren();
+        this.#afterRender();
+      });
+      return process.execute();
+    }
+    // Overriding Marionette original `_renderTemplate` method to inject our renderer.
+    async _renderTemplate() {
+      this.triggerMethod("before:render:template");
+      const process = signalizedProcess(this.#abortController?.signal).then((_, signal) => {
         const settings = this.model.get("settings").toJSON();
         return resolveProps({
           props: settings,
           signal
         });
-      }).then((resolvedSettings) => {
+      }).then((settings) => {
+        return this.afterSettingsResolve(settings);
+      }).then(async (settings) => {
         const context = {
           id: this.model.get("id"),
           type,
-          settings: resolvedSettings,
+          settings,
           base_styles: baseStylesDictionary
         };
         return renderer.render(templateKey, context);
       }).then((html) => this.$el.html(html));
       await process.execute();
-      this.#afterRenderTemplate();
-    }
-    // Emulating the original Marionette behavior.
-    #beforeRenderTemplate() {
-      this.triggerMethod("before:render:template");
-    }
-    #afterRenderTemplate() {
       this.bindUIElements();
       this.triggerMethod("render:template");
     }
+    afterSettingsResolve(settings) {
+      return settings;
+    }
+    #beforeRender() {
+      this._ensureViewIsIntact();
+      this._isRendering = true;
+      this.resetChildViewContainer();
+      this.triggerMethod("before:render", this);
+    }
+    #afterRender() {
+      this._isRendering = false;
+      this.isRendered = true;
+      this.triggerMethod("render", this);
+    }
   };
 }
 
 // src/legacy/init-legacy-views.ts
+var elementsLegacyTypes = {};
+function registerElementType(type, elementTypeGenerator) {
+  elementsLegacyTypes[type] = elementTypeGenerator;
+}
 function initLegacyViews() {
   __privateListenTo(v1ReadyEvent(), () => {
     const config = getWidgetsCache() ?? {};
@@ -1240,12 +1560,856 @@ function initLegacyViews() {
       if (!element.atomic) {
         return;
       }
-      const ElementType = canBeTemplated(element) ? createTemplatedElementType({ type, renderer, element }) : createElementType(type);
+      let ElementType;
+      if (!!elementsLegacyTypes[type] && canBeTemplated(element)) {
+        ElementType = elementsLegacyTypes[type]({ type, renderer, element });
+      } else if (canBeTemplated(element)) {
+        ElementType = createTemplatedElementType({ type, renderer, element });
+      } else {
+        ElementType = createElementType(type);
+      }
       legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
 }
 
+// src/mcp/resources/widgets-schema-resource.ts
+import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { ResourceTemplate } from "@elementor/editor-mcp";
+import {
+  Schema
+} from "@elementor/editor-props";
+import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
+var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
+var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
+var BEST_PRACTICES_URI = "elementor://styles/best-practices";
+var initWidgetsSchemaResource = (reg) => {
+  const { mcpServer } = reg;
+  mcpServer.resource("styles-best-practices", BEST_PRACTICES_URI, async () => {
+    return {
+      contents: [
+        {
+          uri: BEST_PRACTICES_URI,
+          text: `# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema, or in custom_css, depends on your needs.
+
+When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
+The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
+        }
+      ]
+    };
+  });
+  mcpServer.resource(
+    "styles-schema",
+    new ResourceTemplate(STYLE_SCHEMA_URI, {
+      list: () => {
+        const categories = [...Object.keys(getStylesSchema2()), "custom_css"];
+        return {
+          resources: categories.map((category) => ({
+            uri: `elementor://styles/schema/${category}`,
+            name: "Style schema for " + category
+          }))
+        };
+      }
+    }),
+    {
+      description: "Common styles schema for the specified category"
+    },
+    async (uri, variables) => {
+      const category = typeof variables.category === "string" ? variables.category : variables.category?.[0];
+      if (category === "custom_css") {
+        return {
+          contents: [
+            {
+              uri: uri.toString(),
+              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted. Use this as a last resort for properties that are not covered with the schema."
+            }
+          ]
+        };
+      }
+      const stylesSchema = getStylesSchema2()[category];
+      if (!stylesSchema) {
+        throw new Error(`No styles schema found for category: ${category}`);
+      }
+      const cleanedupPropSchema = cleanupPropType(stylesSchema);
+      const asJson = Schema.propTypeToJsonSchema(cleanedupPropSchema);
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            text: JSON.stringify(asJson)
+          }
+        ]
+      };
+    }
+  );
+  mcpServer.resource(
+    "widget-schema-by-type",
+    new ResourceTemplate(WIDGET_SCHEMA_URI, {
+      list: () => {
+        const cache = getWidgetsCache2() || {};
+        const availableWidgets = Object.keys(cache || {}).filter(
+          (widgetType) => cache[widgetType]?.atomic_props_schema
+        );
+        return {
+          resources: availableWidgets.map((widgetType) => ({
+            uri: `elementor://widgets/schema/${widgetType}`,
+            name: "Widget schema for " + widgetType
+          }))
+        };
+      }
+    }),
+    {
+      description: "PropType schema for the specified widget type"
+    },
+    async (uri, variables) => {
+      const widgetType = typeof variables.widgetType === "string" ? variables.widgetType : variables.widgetType?.[0];
+      const propSchema = getWidgetsCache2()?.[widgetType]?.atomic_props_schema;
+      if (!propSchema) {
+        throw new Error(`No prop schema found for element type: ${widgetType}`);
+      }
+      const cleanedupPropSchema = cleanupPropSchema(propSchema);
+      const asJson = Object.fromEntries(
+        Object.entries(cleanedupPropSchema).map(([key, propType]) => [
+          key,
+          Schema.propTypeToJsonSchema(propType)
+        ])
+      );
+      Schema.nonConfigurablePropKeys.forEach((key) => {
+        delete asJson[key];
+      });
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            text: JSON.stringify(asJson)
+          }
+        ]
+      };
+    }
+  );
+};
+function cleanupPropSchema(propSchema) {
+  const result = {};
+  Object.keys(propSchema).forEach((propName) => {
+    result[propName] = cleanupPropType(propSchema[propName]);
+  });
+  return result;
+}
+function cleanupPropType(propType) {
+  const result = {};
+  Object.keys(propType).forEach((property) => {
+    switch (property) {
+      case "key":
+      case "kind":
+        result[property] = propType[property];
+        break;
+      case "meta":
+      case "settings":
+        {
+          if (Object.keys(propType[property] || {}).length > 0) {
+            result[property] = propType[property];
+          }
+        }
+        break;
+    }
+  });
+  if (result.kind === "plain") {
+    Object.defineProperty(result, "kind", { value: "string" });
+  } else if (result.kind === "array") {
+    result.item_prop_type = cleanupPropType(propType.item_prop_type);
+  } else if (result.kind === "object") {
+    const shape = propType.shape;
+    const cleanedShape = cleanupPropSchema(shape);
+    result.shape = cleanedShape;
+  } else if (result.kind === "union") {
+    const propTypes = propType.prop_types;
+    const cleanedPropTypes = {};
+    Object.keys(propTypes).forEach((key) => {
+      cleanedPropTypes[key] = cleanupPropType(propTypes[key]);
+    });
+    result.prop_types = cleanedPropTypes;
+  }
+  return result;
+}
+
+// src/mcp/tools/build-composition/tool.ts
+import {
+  createElement as createElement6,
+  deleteElement,
+  generateElementId,
+  getContainer as getContainer3,
+  getWidgetsCache as getWidgetsCache4
+} from "@elementor/editor-elements";
+
+// src/mcp/utils/do-update-element-property.ts
+import {
+  createElementStyle,
+  getElementStyles,
+  getWidgetsCache as getWidgetsCache3,
+  updateElementSettings as updateElementSettings2,
+  updateElementStyle
+} from "@elementor/editor-elements";
+import {
+  getPropSchemaFromCache,
+  Schema as Schema2,
+  stringPropTypeUtil
+} from "@elementor/editor-props";
+import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
+function resolvePropValue(value, forceKey) {
+  return Schema2.adjustLlmPropValueSchema(value, forceKey);
+}
+var doUpdateElementProperty = (params) => {
+  const { elementId, propertyName, propertyValue, elementType } = params;
+  if (propertyName === "_styles") {
+    const elementStyles = getElementStyles(elementId) || {};
+    const propertyMapValue = propertyValue;
+    const styleSchema = getStylesSchema3();
+    const transformedStyleValues = Object.fromEntries(
+      Object.entries(propertyMapValue).map(([key, val]) => {
+        if (key === "custom_css") {
+          return [key, val];
+        }
+        const { key: propKey, kind } = styleSchema?.[key] || {};
+        if (!propKey && kind !== "union") {
+          throw new Error(`_styles property ${key} is not supported.`);
+        }
+        return [key, resolvePropValue(val, propKey)];
+      })
+    );
+    let customCss;
+    Object.keys(propertyMapValue).forEach((stylePropName) => {
+      const propertyRawSchema = styleSchema[stylePropName];
+      if (stylePropName === "custom_css") {
+        let customCssValue = propertyMapValue[stylePropName];
+        if (typeof customCssValue === "object") {
+          customCssValue = stringPropTypeUtil.extract(customCssValue) || customCssValue?.value || "";
+        }
+        customCss = {
+          raw: btoa(customCssValue)
+        };
+        return;
+      }
+      const isSupported = !!propertyRawSchema;
+      if (!isSupported) {
+        throw new Error(`_styles property ${stylePropName} is not supported.`);
+      }
+      if (propertyRawSchema.kind === "plain") {
+        if (typeof propertyMapValue[stylePropName] !== "object") {
+          const propUtil = getPropSchemaFromCache(propertyRawSchema.key);
+          if (propUtil) {
+            const plainValue = propUtil.create(propertyMapValue[stylePropName]);
+            propertyMapValue[stylePropName] = plainValue;
+          }
+        }
+      }
+    });
+    const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
+    if (!localStyle) {
+      createElementStyle({
+        elementId,
+        ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
+        classesProp: "classes",
+        label: "local",
+        meta: {
+          breakpoint: "desktop",
+          state: null
+        },
+        props: {
+          ...transformedStyleValues
+        }
+      });
+    } else {
+      updateElementStyle({
+        elementId,
+        styleId: localStyle.id,
+        meta: {
+          breakpoint: "desktop",
+          state: null
+        },
+        ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
+        props: {
+          ...transformedStyleValues
+        }
+      });
+    }
+    return;
+  }
+  const elementPropSchema = getWidgetsCache3()?.[elementType]?.atomic_props_schema;
+  if (!elementPropSchema) {
+    throw new Error(`No prop schema found for element type: ${elementType}`);
+  }
+  if (!elementPropSchema[propertyName]) {
+    const propertyNames = Object.keys(elementPropSchema);
+    throw new Error(
+      `Property "${propertyName}" does not exist on element type "${elementType}". Available properties are: ${propertyNames.join(
+        ", "
+      )}`
+    );
+  }
+  const value = resolvePropValue(propertyValue);
+  updateElementSettings2({
+    id: elementId,
+    props: {
+      [propertyName]: value
+    },
+    withHistory: false
+  });
+};
+
+// src/mcp/tools/build-composition/prompt.ts
+import { toolPrompts } from "@elementor/editor-mcp";
+var generatePrompt = () => {
+  const buildCompositionsToolPrompt = toolPrompts("build-compositions");
+  buildCompositionsToolPrompt.description(`
+Build entire elementor widget comositions representing complex structures of nested elements.
+
+# When to use this tool
+Always prefer this tool when the user requires to build a composition of elements, such as cards, heros, or inspired from other pages or HTML compositions.
+Prefer this tool over any other tool for building HTML structure, unless you are specified to use a different tool.
+
+# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
+1. [${WIDGET_SCHEMA_URI}]
+   Required to understand which widgets are available, and what are their configuration schemas.
+   Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
+2. [${STYLE_SCHEMA_URI}]
+   Required to understand the styles schema for the widgets. All widgets share the same styles schema.
+3. List of allowed custom tags for building the structure is derived from the list of widgets schema resources.
+
+# Instructions
+1. Understand the user requirements carefully.
+2. Build a valid XML structure using only the allowed custom tags provided. For example, if you
+   use the "e-button" element, it would be represented as <e-button></e-button> in the XML structure.
+3. Plan the configuration for each element according to the user requirements, using the configuration schema provided for each custom tag.
+   Every widget type has it's own configuration schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
+   PropValues must follow the exact PropType schema provided in the resource.
+4. For every element, provide a "configuration-id" attribute. For example:
+   \`<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading2"></e-heading></e-flexbox>\`
+   In the elementConfig property, provide the actual configuration object for each configuration-id used in the XML structure.
+   In the stylesConfig property, provide the actual styles configuration object for each configuration-id used in the XML structure.
+5. Ensure the XML structure is valid and parsable.
+6. Do not add any attribute nodes, classes, id's, and no text nodes allowed.
+   Layout properties, such as margin, padding, align, etc. must be applied using the [${STYLE_SCHEMA_URI}] PropValues.
+7. Some elements allow nesting of other elements, and most of the DO NOT. The allowed elements that can have nested children are "e-div-block" and "e-flexbox".
+8. Make sure that non-container elements do NOT have any nested elements.
+9. Unsless the user specifically requires structure only, BE EXPRESSIVE AND VISUALLY CREATIVE AS POSSIBLE IN APPLYING STYLE CONFIGURATION.
+   In the case of doubt, prefer adding more styles to make the composition visually appealing.
+
+# Additional Guidelines
+- Most users expect the structure to be well designed and visually appealing.
+- Use layout properties, ensure "white space" design approach is followed, and make sure the composition is visually balanced.
+- Use appropriate spacing, alignment, and sizing to create a harmonious layout.
+- Consider the visual hierarchy of elements to guide the user's attention effectively.
+- You are encouraged to use colors, typography, and other style properties to enhance the visual appeal, as long as they are part of the configuration schema for the elements used.
+- Always aim for a clean and professional look that aligns with modern design principles.
+- When you are required to create placeholder texts, use texts that have a length that fits the goal. When long texts are required, use longer placeholder texts. When the user specifies exact texts, use the exact texts.
+- Image size does not affect the actual size on the screen, only which quality to use. If you use images, specifically add _styles PropValues to define the image sizes.
+- Attempt to use layout, margin, padding, size properties from the styles schema.
+- If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
+
+# CONSTRAINTS
+When a tool execution fails, retry up to 10 more times, read the error message carefully, and adjust the XML structure or the configurations accordingly.
+If a "$$type" is missing, update the invalid object, if the XML has parsing errors, fix it, etc. and RETRY.
+VALIDATE the XML structure before delivering it as the final result.
+VALIDATE the JSON structure used in the "configuration" attributes for each element before delivering the final result. The configuration must MATCH the PropValue schemas.
+NO LINKS ALLOWED. Never apply links to elements, even if they appear in the PropType schema.
+elementConfig values must align with the widget's PropType schema, available at the resource [${WIDGET_SCHEMA_URI}].
+stylesConfig values must align with the common styles PropType schema, available at the resource [${STYLE_SCHEMA_URI}].
+
+# Parameters
+All parameters are MANDATORY.
+- xmlStructure
+- elementConfig
+- stylesConfig
+
+If unsure about the configuration of a specific property, read the schema resources carefully.
+
+
+  `);
+  buildCompositionsToolPrompt.example(`
+A Heading and a button inside a flexbox
+{
+  xmlStructure: "<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading1"></e-heading><e-button configuration-id="button1"></e-button></e-flexbox>"
+  elementConfig: {
+    "flex1": {
+      "tag": {
+        "$$type": "string",
+        "value": "section"
+      },
+  },
+  stylesConfig: {
+    "heading1": {
+      "font-size": {
+        "$$type": "size",
+        "value": {
+          "size": { "$$type": "number", "value": 24 },
+          "unit": { "$$type": "string", "value": "px" }
+        }
+      },
+      "color": {
+        "$$type": "color",
+        "value": { "$$type": "string", "value": "#333" }
+      }
+    }
+  },
+}
+`);
+  buildCompositionsToolPrompt.parameter(
+    "xmlStructure",
+    `**MANDATORY** A valid XML structure representing the composition to be built, using custom elementor tags, styling and configuration PropValues.`
+  );
+  buildCompositionsToolPrompt.parameter(
+    "elementConfig",
+    `**MANDATORY** A record mapping configuration IDs to their corresponding configuration objects, defining the PropValues for each element created.`
+  );
+  buildCompositionsToolPrompt.parameter(
+    "stylesConfig",
+    `**MANDATORY** A record mapping style PropTypes to their corresponding style configuration objects, defining the PropValues for styles to be applied to elements.`
+  );
+  buildCompositionsToolPrompt.instruction(
+    `You will be provided the XML structure with element IDs. These IDs represent the actual elementor widgets created on the page/post.
+You should use these IDs as reference for further configuration, styling or changing elements later on.`
+  );
+  buildCompositionsToolPrompt.instruction(
+    `You must use styles/variables/classes that are available in the project resources, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
+  );
+  return buildCompositionsToolPrompt.prompt();
+};
+
+// src/mcp/tools/build-composition/schema.ts
+import { z } from "@elementor/schema";
+var inputSchema = {
+  xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
+  elementConfig: z.record(
+    z.string().describe("The configuration id"),
+    z.record(z.string().describe("property name"), z.any().describe("The PropValue for the property"))
+  ).describe("A record mapping element IDs to their configuration objects. REQUIRED"),
+  stylesConfig: z.record(
+    z.string().describe("The configuration id"),
+    z.record(
+      z.string().describe("_styles property name"),
+      z.any().describe("The PropValue for the style property. MANDATORY")
+    )
+  ).describe(
+    `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
+  ).default({})
+};
+var outputSchema = {
+  errors: z.string().describe("Error message if the composition building failed").optional(),
+  xmlStructure: z.string().describe("The built XML structure as a string").optional(),
+  llmInstructions: z.string().describe("Instructions used to further actions for you").optional()
+};
+
+// src/mcp/tools/build-composition/tool.ts
+var initBuildCompositionsTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "build-compositions",
+    description: generatePrompt(),
+    schema: inputSchema,
+    outputSchema,
+    handler: async (params) => {
+      let xml = null;
+      const { xmlStructure, elementConfig, stylesConfig } = params;
+      const errors = [];
+      const softErrors = [];
+      const rootContainers = [];
+      const widgetsCache = getWidgetsCache4() || {};
+      const documentContainer = getContainer3("document");
+      try {
+        const parser = new DOMParser();
+        xml = parser.parseFromString(xmlStructure, "application/xml");
+        const errorNode = xml.querySelector("parsererror");
+        if (errorNode) {
+          throw new Error("Failed to parse XML structure: " + errorNode.textContent);
+        }
+        const children = Array.from(xml.children);
+        const iterate = (node, containerElement = documentContainer) => {
+          const elementTag = node.tagName;
+          if (!widgetsCache[elementTag]) {
+            errors.push(new Error(`Unknown widget type: ${elementTag}`));
+          }
+          const isContainer = elementTag === "e-flexbox" || elementTag === "e-div-block";
+          const newElement = isContainer ? createElement6({
+            containerId: containerElement.id,
+            model: {
+              elType: elementTag,
+              id: generateElementId()
+            },
+            options: { useHistory: false }
+          }) : createElement6({
+            containerId: containerElement.id,
+            model: {
+              elType: "widget",
+              widgetType: elementTag,
+              id: generateElementId()
+            },
+            options: { useHistory: false }
+          });
+          if (containerElement === documentContainer) {
+            rootContainers.push(newElement);
+          }
+          node.setAttribute("id", newElement.id);
+          const configId = node.getAttribute("configuration-id") || "";
+          try {
+            const configObject = elementConfig[configId] || {};
+            const styleObject = stylesConfig[configId] || {};
+            configObject._styles = styleObject;
+            for (const [propertyName, propertyValue] of Object.entries(configObject)) {
+              const widgetSchema = widgetsCache[elementTag];
+              if (!widgetSchema?.atomic_props_schema?.[propertyName] && propertyName !== "_styles" && propertyName !== "custom_css") {
+                softErrors.push(
+                  new Error(
+                    `Property "${propertyName}" does not exist on element type "${elementTag}".`
+                  )
+                );
+                continue;
+              }
+              try {
+                doUpdateElementProperty({
+                  elementId: newElement.id,
+                  propertyName,
+                  propertyValue: propertyName === "custom_css" ? { _styles: propertyValue } : propertyValue,
+                  elementType: elementTag
+                });
+              } catch (error) {
+                softErrors.push(error);
+              }
+            }
+            if (isContainer) {
+              for (const child of node.children) {
+                iterate(child, newElement);
+              }
+            } else {
+              node.innerHTML = "";
+              node.removeAttribute("configuration");
+            }
+          } finally {
+          }
+        };
+        for (const childNode of children) {
+          iterate(childNode, documentContainer);
+          try {
+          } catch (error) {
+            errors.push(error);
+          }
+        }
+      } catch (error) {
+        errors.push(error);
+      }
+      if (errors.length) {
+        rootContainers.forEach((rootContainer) => {
+          deleteElement({
+            elementId: rootContainer.id,
+            options: { useHistory: false }
+          });
+        });
+      }
+      if (errors.length > 0) {
+        const errorText = `Failed to build composition with the following errors:
+
+
+${errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n")}
+"Missing $$type" errors indicate that the configuration objects are invalid. Try again and apply **ALL** object entries with correct $$type.
+Now that you have these errors, fix them and try again. Errors regarding configuration objects, please check again the PropType schemas`;
+        throw new Error(errorText);
+      }
+      if (!xml) {
+        throw new Error("XML structure is null after parsing.");
+      }
+      return {
+        xmlStructure: new XMLSerializer().serializeToString(xml),
+        llmInstructions: (softErrors.length ? `The composition was built successfully, but there were some issues with the provided configurations:
+
+${softErrors.map((e) => `- ${e.message}`).join("\n")}
+
+Please use confiugure-element tool to fix these issues. Now that you have information about these issues, use the configure-element tool to fix them!` : "") + `
+Next Steps:
+- Use "apply-global-class" tool as there may be global styles ready to be applied to elements.
+- Use "configure-element" tool to further configure elements as needed, including styles.
+`
+      };
+    }
+  });
+};
+
+// src/mcp/tools/configure-element/prompt.ts
+var configureElementToolPrompt = `Configure an existing element on the page.
+
+# **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
+1. [${WIDGET_SCHEMA_URI}]
+   Required to understand which widgets are available, and what are their configuration schemas.
+   Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
+2. [${STYLE_SCHEMA_URI}]
+   Required to understand the styles schema for the widgets. All widgets share the same styles schema, grouped by categories.
+   Use this resource to understand which style properties are available for each element, and how to structure the "_styles" configuration property.
+3. If not sure about the PropValues schema, you can use the "get-element-configuration-values" tool to retreive the current PropValues configuration of the element.
+
+Before using this tool, check the definitions of the elements PropTypes at the resource "widget-schema-by-type" at editor-canvas__elementor://widgets/schema/{widgetType}
+All widgets share a common _style property for styling, which uses the common styles schema.
+Retreive and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
+
+# Parameters
+- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY
+- elementId: The ID of the element to configure. MANDATORY
+- elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
+
+# When to use this tool
+When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
+This tool handles elements of type "widget".
+This tool handles styling elements, using the _styles property in the configuration.
+
+The element's schema must be known before using this tool.
+
+Attached resource link describing how PropType schema should be parsed as PropValue for this tool.
+
+Read carefully the PropType Schema of the element and it's styles, then apply correct PropValue according to the schema.
+
+PropValue structure:
+{
+    "$$type": string, // MANDATORY as defined in the PropType schema under the "key" property
+    value: unknown // The value according to the PropType schema for kinds of "array", use array with PropValues items inside. For "object", read the shape property of the PropType schema. For "plain", use strings.
+}
+
+<IMPORTANT>
+ALWAYS MAKE SURE you have the PropType schemas for the element you are configuring, and the common-styles schema for styling. If you are not sure, retreive the schema from the resources mentioned above.
+</IMPORTANT>
+
+You can use multiple property changes at once by providing multiple entries in the propertiesToChange object, including _style alongside non-style props.
+Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
+Nested properties, such as for the _styles, should include a "_styles" property with object containing the definitions to change.
+
+Make sure you have the "widget-schema-by-type" resource available to retreive the PropType schema for the element type you are configuring.
+
+# How to configure elements
+We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
+For _styles, use the style schema provided, as it also uses the PropType format.
+For all non-primitive types, provide the key property as defined in the schema as $$type in the generated objecct, as it is MANDATORY for parsing.
+
+Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+
+# Example
+\`\`\`json
+{
+  propertiesToChange: {
+    // List of properties TO CHANGE, following the PropType schema for the element as defined in the resource [${WIDGET_SCHEMA_URI}]
+    title: {
+      $$type: 'string',
+      value: 'New Title Text'
+    },
+    border: {
+      $$type: 'boolean',
+      value: false
+    },
+    _styles: {
+      // List of available keys available at the [${STYLE_SCHEMA_URI}] dynamic resource
+      'line-height': {
+        $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+        value: {
+          size: {
+            $$type: 'number',
+            value: 20
+          },
+          unit: {
+            $$type: 'string',
+            value: 'px'
+          }
+        }
+      }
+    }
+  }
+};
+\`\`\`
+
+<IMPORTANT>
+The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
+</IMPORTANT>
+`;
+
+// src/mcp/tools/configure-element/schema.ts
+import { z as z2 } from "@elementor/schema";
+var inputSchema2 = {
+  propertiesToChange: z2.record(
+    z2.string().describe(
+      "The property name. If nested property, provide the root property name, and the object delta only."
+    ),
+    z2.any().describe("The property's value")
+  ).describe("An object record containing property names and their new values to be set on the element").optional(),
+  elementType: z2.string().describe("The type of the element to retreive the schema"),
+  elementId: z2.string().describe("The unique id of the element to configure")
+};
+var outputSchema2 = {
+  success: z2.boolean().describe(
+    "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
+  )
+};
+
+// src/mcp/tools/configure-element/tool.ts
+var initConfigureElementTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "configure-element",
+    description: configureElementToolPrompt,
+    schema: inputSchema2,
+    outputSchema: outputSchema2,
+    handler: ({ elementId, propertiesToChange, elementType }) => {
+      if (!propertiesToChange) {
+        throw new Error(
+          "propertiesToChange is required to configure an element. Now that you have this information, ensure you have the schema and try again."
+        );
+      }
+      const toUpdate = Object.entries(propertiesToChange);
+      for (const [propertyName, propertyValue] of toUpdate) {
+        if (!propertyName && !elementId && !elementType) {
+          throw new Error(
+            "propertyName, elementId, elementType are required to configure an element. If you want to retreive the schema, use the get-element-configuration-schema tool."
+          );
+        }
+        try {
+          doUpdateElementProperty({
+            elementId,
+            elementType,
+            propertyName,
+            propertyValue
+          });
+        } catch (error) {
+          const errorMessage = createUpdateErrorMessage({
+            propertyName,
+            elementId,
+            elementType,
+            error
+          });
+          throw new Error(errorMessage);
+        }
+      }
+      return {
+        success: true
+      };
+    }
+  });
+};
+function createUpdateErrorMessage(opts) {
+  const { propertyName, elementId, elementType, error } = opts;
+  return `Failed to update property "${propertyName}" on element "${elementId}": ${error.message}.
+Check the element's PropType schema at the resource [${WIDGET_SCHEMA_URI.replace(
+    "{widgetType}",
+    elementType
+  )}] for type "${elementType}" to ensure the property exists and the value matches the expected PropType.
+Now that you have this information, ensure you have the schema and try again.`;
+}
+
+// src/mcp/tools/get-element-config/tool.ts
+import { getContainer as getContainer4, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
+import { Schema as Schema3 } from "@elementor/editor-props";
+import { z as z3 } from "@elementor/schema";
+var schema = {
+  elementId: z3.string()
+};
+var outputSchema3 = {
+  propValues: z3.record(z3.string(), z3.any()).describe(
+    "A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues"
+  )
+};
+var initGetElementConfigTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "get-element-configuration-values",
+    description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
+    schema,
+    outputSchema: outputSchema3,
+    handler: async ({ elementId }) => {
+      const element = getContainer4(elementId);
+      if (!element) {
+        throw new Error(`Element with ID ${elementId} not found.`);
+      }
+      const elementRawSettings = element.settings;
+      const propSchema = getWidgetsCache5()?.[element.model.get("widgetType") || ""]?.atomic_props_schema;
+      if (!elementRawSettings || !propSchema) {
+        throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
+      }
+      const propValues = {};
+      const stylePropValues = {};
+      Schema3.configurableKeys(propSchema).forEach((key) => {
+        propValues[key] = structuredClone(elementRawSettings.get(key));
+      });
+      const elementStyles = getElementStyles2(elementId) || {};
+      const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
+      if (localStyle) {
+        const defaultVariant = localStyle.variants.find(
+          (variant) => variant.meta.breakpoint === "desktop" && !variant.meta.state
+        );
+        if (defaultVariant) {
+          const styleProps = defaultVariant.props || {};
+          Object.keys(styleProps).forEach((stylePropName) => {
+            if (typeof styleProps[stylePropName] !== "undefined") {
+              stylePropValues[stylePropName] = structuredClone(styleProps[stylePropName]);
+            }
+          });
+        }
+      }
+      return {
+        propValues: {
+          ...propValues,
+          _styles: stylePropValues
+        }
+      };
+    }
+  });
+};
+
+// src/mcp/canvas-mcp.ts
+var initCanvasMcp = (reg) => {
+  const { setMCPDescription } = reg;
+  setMCPDescription(
+    'Everything related to creative design, layout, styling and building the pages, specifically element of type "widget"'
+  );
+  initWidgetsSchemaResource(reg);
+  initBuildCompositionsTool(reg);
+  initGetElementConfigTool(reg);
+  initConfigureElementTool(reg);
+};
+
+// src/mcp/mcp-description.ts
+var mcpDescription = `Canvas MCP - Working with widgets and styles: how to use the PropType schemas and generate PropValue structures
+
+# Elementor's PropValue configuration system
+
+Every widget in Elementor has a set of properties that can be configured, defined in a STRICT SCHEMA we call "PropType".
+All widget configuration values are represented using a structure we call "PropValue".
+
+To correctly configure a widget's properties, FOLLOW THE PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
+Every widget has it's own PropType schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
+ALL WIDGETS share a common _styles property with a uniform styles schema, retreivable from the resource [${STYLE_SCHEMA_URI}].
+The style schema is grouped by categories, such as "typography", "background", "border", etc.
+
+# Tools and usage
+- Use the "get-element-configuration-values" tool to retrieve the current configuration of a specific element, including its PropValues and styles. It is recommended to use this tool when you are required to make changes to an existing element, to ensure you have the correct current configuration schema.
+  If a PropValue changes it's type (only on union PropTypes), read the new schema from the resources mentioned above, and adjust the PropValue structure accordingly.
+- Use the "build-composition" tool to create a NEW ELEMENTS in a composition on the page. You can use this tool to also create a new single element.
+- Use the "configure-element" tool to update the configuration of an EXISTING element on the page.
+
+All array types that can receive union types, are typed as mixed array, which means that each item in the array can be of any of the allowed types defined in the PropType schema.
+Example: the "background" can have a background-overlay property, which can contain multiple overlays, such as color, gradient, image, etc. Each item in the array must follow the PropType schema for each overlay type.
+All _style properties are OPTIONAL. When a _style is defined, we MERGE the values with existing styles, so only the properties you define will be changed, and the rest will remain as is.
+
+# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
+
+Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
+
+Example of null values:
+{
+  $$type: 'as-defined-for-propValue',
+  value: null
+}
+
+Example of "image" PropValue structure:
+{$$type:'image',value:{src:{$$type:'image-src',value:{url:{$$type:'url',value:'https://example.com/image.jpg'}}},size:{$$type:'string',value:'full'}}}
+
+`;
+
 // src/prevent-link-in-link-commands.ts
 import {
   getAnchoredAncestorId,
@@ -1342,17 +2506,17 @@ import {
 
 // src/style-commands/undoable-actions/paste-element-style.ts
 import {
-  createElementStyle,
+  createElementStyle as createElementStyle2,
   deleteElementStyle,
-  getElementStyles,
-  updateElementStyle
+  getElementStyles as getElementStyles3,
+  updateElementStyle as updateElementStyle2
 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
 import { undoable } from "@elementor/editor-v1-adapters";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/style-commands/utils.ts
-import { getElementLabel, getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { getElementLabel, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __2 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
@@ -1377,7 +2541,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache2();
+  const widgetsCache = getWidgetsCache6();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -1403,7 +2567,7 @@ var undoablePasteElementStyle = () => undoable(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = getElementStyles(container.id);
+        const originalStyles = getElementStyles3(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -1412,7 +2576,7 @@ var undoablePasteElementStyle = () => undoable(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            updateElementStyle({
+            updateElementStyle2({
               elementId,
               styleId,
               meta,
@@ -1423,7 +2587,7 @@ var undoablePasteElementStyle = () => undoable(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = createElementStyle({
+          revertData.styleId = createElementStyle2({
             elementId,
             classesProp,
             label: ELEMENTS_STYLES_RESERVED_LABEL,
@@ -1450,7 +2614,7 @@ var undoablePasteElementStyle = () => undoable(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        createElementStyle({
+        createElementStyle2({
           elementId: container.id,
           classesProp,
           label: ELEMENTS_STYLES_RESERVED_LABEL,
@@ -1506,7 +2670,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-import { createElementStyle as createElementStyle2, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles2 } from "@elementor/editor-elements";
+import { createElementStyle as createElementStyle3, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles4 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL as ELEMENTS_STYLES_RESERVED_LABEL2 } from "@elementor/editor-styles-repository";
 import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
 import { __ as __4 } from "@wordpress/i18n";
@@ -1515,7 +2679,7 @@ var undoableResetElementStyle = () => undoable2(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = getElementStyles2(elementId);
+        const containerStyles = getElementStyles4(elementId);
         Object.keys(containerStyles ?? {}).forEach(
           (styleId) => deleteElementStyle2(elementId, styleId)
         );
@@ -1533,7 +2697,7 @@ var undoableResetElementStyle = () => undoable2(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          createElementStyle2({
+          createElementStyle3({
             elementId,
             classesProp,
             styleId,
@@ -1585,6 +2749,7 @@ function init() {
   initLinkInLinkPrevention();
   initLegacyViews();
   initSettingsTransformers();
+  initInteractionsRepository();
   injectIntoTop({
     id: "elements-overlays",
     component: ElementsOverlays
@@ -1593,17 +2758,66 @@ function init() {
     id: "canvas-style-render",
     component: StyleRenderer
   });
+  injectIntoTop({
+    id: "canvas-interactions-render",
+    component: InteractionsRenderer
+  });
   injectIntoLogic({
     id: "classes-rename",
     component: ClassesRename
   });
+  initCanvasMcp(
+    getMCPByDomain("canvas", {
+      instructions: mcpDescription
+    })
+  );
 }
+
+// src/sync/drag-element-from-panel.ts
+var startDragElementFromPanel = (props) => {
+  const channels = getElementorChannels();
+  channels?.editor.reply("element:dragged", null);
+  channels?.panelElements.reply("element:selected", getLegacyPanelElementView(props)).trigger("element:drag:start");
+};
+var endDragElementFromPanel = () => {
+  getElementorChannels()?.panelElements?.trigger("element:drag:end");
+};
+var getElementorChannels = () => {
+  const extendedWindow = window;
+  const channels = extendedWindow.elementor?.channels;
+  if (!channels) {
+    throw new Error(
+      "Elementor channels not found: Elementor editor is not initialized or channels are unavailable."
+    );
+  }
+  return channels;
+};
+var getLegacyPanelElementView = ({ settings, ...rest }) => {
+  const extendedWindow = window;
+  const LegacyElementModel = extendedWindow.elementor?.modules?.elements?.models?.Element;
+  if (!LegacyElementModel) {
+    throw new Error("Elementor legacy Element model not found in editor modules");
+  }
+  const elementModel = new LegacyElementModel({
+    ...rest,
+    custom: {
+      isPreset: !!settings,
+      preset_settings: settings
+    }
+  });
+  return { model: elementModel };
+};
 export {
   createPropsResolver,
+  createTemplatedElementView,
   createTransformer,
   createTransformersRegistry,
+  endDragElementFromPanel,
+  getCanvasIframeDocument,
   init,
+  registerElementType,
   settingsTransformersRegistry,
+  startDragElementFromPanel,
   styleTransformersRegistry
 };
 //# sourceMappingURL=index.mjs.map