@elementor/editor-canvas 4.0.0-manual → 4.0.1

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 var initBreakpointsResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   const getBreakpointsList = () => {
     const { breakpoints } = window.elementor?.config?.responsive || {};
     if (!breakpoints) {
@@ -26,9 +26,16 @@ var initBreakpointsResource = (reg) => {
       }
     ]
   });
-  mcpServer.resource("breakpoints ", BREAKPOINTS_SCHEMA_URI, () => {
-    return buildResourceResponse();
-  });
+  resource(
+    "breakpoints ",
+    BREAKPOINTS_SCHEMA_URI,
+    {
+      description: "Breakpoints list."
+    },
+    () => {
+      return buildResourceResponse();
+    }
+  );
   window.addEventListener(v1ReadyEvent().name, () => {
     sendResourceUpdated({
       uri: BREAKPOINTS_SCHEMA_URI,
@@ -799,14 +806,22 @@ var UnknownStyleStateError = createError({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     const uniqueStyles = styles.filter((style) => {
-      if (seenIds.has(style.id)) {
+      const key = getStyleUniqueKey(style);
+      if (seenKeys.has(key)) {
         return false;
       }
-      seenIds.add(style.id);
+      seenKeys.add(key);
       return true;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -895,22 +910,30 @@ function useStyleItems() {
   const [styleItems, setStyleItems] = useState3({});
   const styleItemsCacheRef = useRef2(/* @__PURE__ */ new Map());
   const providerAndSubscribers = useMemo4(() => {
-    return stylesRepository2.getProviders().map((provider) => {
-      const providerKey = provider.getKey();
+    const createEmptyCache = () => {
+      return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
+    };
+    const getCache = (provider) => {
+      const providerKey = safeGetKey(provider);
+      if (!providerKey) {
+        return createEmptyCache();
+      }
       if (!styleItemsCacheRef.current.has(providerKey)) {
-        styleItemsCacheRef.current.set(providerKey, { orderedIds: [], itemsById: /* @__PURE__ */ new Map() });
+        styleItemsCacheRef.current.set(providerKey, createEmptyCache());
       }
-      const cache = styleItemsCacheRef.current.get(providerKey);
-      return {
+      return styleItemsCacheRef.current.get(providerKey);
+    };
+    return stylesRepository2.getProviders().map(
+      (provider) => ({
         provider,
         subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems,
-          cache
+          getCache: () => getCache(provider)
         })
-      };
-    });
+      })
+    );
   }, [renderStyles]);
   useEffect6(() => {
     const unsubscribes = providerAndSubscribers.map(
@@ -950,15 +973,23 @@ function stateSorter({ state: stateA }, { state: stateB }) {
 function createBreakpointSorter(breakpointsOrder) {
   return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
 }
-function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cache }) {
+function safeGetKey(provider) {
+  try {
+    return provider.getKey();
+  } catch {
+    return null;
+  }
+}
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getCache }) {
   return abortPreviousRuns(
     (abortController, previous, current) => signalizedProcess(abortController.signal).then((_, signal) => {
+      const cache = getCache();
       const hasDiffInfo = current !== void 0 && previous !== void 0;
       const hasCache = cache.orderedIds.length > 0;
       if (hasDiffInfo && hasCache) {
-        return updateItems(previous, current, signal);
+        return updateItems(cache, previous, current, signal);
       }
-      return createItems(signal);
+      return createItems(cache, signal);
     }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
@@ -966,7 +997,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
       }));
     }).execute()
   );
-  async function updateItems(previous, current, signal) {
+  async function updateItems(cache, previous, current, signal) {
     const changedIds = getChangedStyleIds(previous, current);
     cache.orderedIds = provider.actions.all().map((style) => style.id).reverse();
     if (changedIds.length > 0) {
@@ -981,9 +1012,9 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     }
     return getOrderedItems(cache);
   }
-  async function createItems(signal) {
+  async function createItems(cache, signal) {
     const allStyles = provider.actions.all();
-    const styles = allStyles.reverse().map((style) => {
+    const styles = [...allStyles].reverse().map((style) => {
       return {
         ...style,
         cssName: provider.actions.resolveCssName(style.id)
@@ -991,7 +1022,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {
@@ -1376,14 +1407,74 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/video-src-transformer.ts
+// src/transformers/shared/svg-src-transformer.ts
+import DOMPurify from "dompurify";
 import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  const sanitized = DOMPurify.sanitize(svgText, {
+    USE_PROFILES: { svg: true, svgFilters: true }
+  });
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(sanitized, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
+    return null;
+  }
+  svgElement.setAttribute("fill", "currentColor");
+  const existingStyle = svgElement.getAttribute("style") ?? "";
+  const trimmed = existingStyle.trim();
+  const merged = trimmed ? `${trimmed.replace(/;$/, "")}; ${SVG_INLINE_STYLES}` : SVG_INLINE_STYLES;
+  svgElement.setAttribute("style", merged);
+  return svgElement.outerHTML;
+}
+async function fetchSvgContent(url, signal) {
+  try {
+    const response = await fetch(url, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const contentType = response.headers.get("content-type") ?? "";
+    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
+    if (!isSvg) {
+      return null;
+    }
+    return await response.text();
+  } catch {
+    return null;
+  }
+}
+function resolveSvgSrcId(id) {
+  if (typeof id !== "number" || id <= 0) {
+    return null;
+  }
+  return id;
+}
+var svgSrcTransformer = createTransformer(async (value, { signal }) => {
+  const id = resolveSvgSrcId(value.id);
+  const urlFromValue = typeof value.url === "string" ? value.url : null;
+  let url = urlFromValue;
+  if (id && !urlFromValue) {
+    const attachment = await getMediaAttachment2({ id });
+    url = attachment?.url ?? null;
+  }
+  const resolvedUrl = typeof url === "string" ? url : null;
+  if (!resolvedUrl) {
+    return { html: null, url: null };
+  }
+  const svgText = await fetchSvgContent(resolvedUrl, signal);
+  const html = svgText ? processSvgContent(svgText) : null;
+  return { html, url: resolvedUrl };
+});
+
+// src/transformers/shared/video-src-transformer.ts
+import { getMediaAttachment as getMediaAttachment3 } from "@elementor/wp-media";
 var videoSrcTransformer = createTransformer(async (value) => {
   const { id, url } = value;
   if (!id) {
     return { id: null, url };
   }
-  const attachment = await getMediaAttachment2({ id });
+  const attachment = await getMediaAttachment3({ id });
   return {
     id,
     url: attachment?.url ?? url
@@ -1392,7 +1483,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -1591,6 +1682,9 @@ var shadowTransformer = createTransformer((value) => {
 
 // src/transformers/styles/size-transformer.ts
 var sizeTransformer = createTransformer((value) => {
+  if (value.unit === "auto") {
+    return "auto";
+  }
   return value.unit === "custom" ? value.size : `${value.size}${value.unit}`;
 });
 
@@ -1974,6 +2068,7 @@ function createTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary
@@ -2008,6 +2103,11 @@ function createTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => super._openEditingPanel(options));
     }
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
+    }
   };
 }
 
@@ -2040,10 +2140,11 @@ function createNestedTemplatedElementType({
 }
 function buildEditorAttributes(model) {
   const id = model.get("id");
+  const originId = model.get("originId");
   const cid = model.cid ?? "";
   const attrs = {
     "data-model-cid": cid,
-    "data-interaction-id": id,
+    "data-interaction-id": originId ?? id,
     "x-ignore": "true"
   };
   return Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
@@ -2077,6 +2178,9 @@ function createNestedTemplatedElementView({
     invalidateRenderCache() {
       this._lastResolvedSettingsHash = null;
     },
+    renderOnChange() {
+      this.render();
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2120,6 +2224,7 @@ function createNestedTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary,
@@ -2249,13 +2354,20 @@ function createNestedTemplatedElementView({
     },
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
+    },
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
     }
   });
 }
 
+// src/legacy/replacements/manager.ts
+import { createRoot } from "react-dom/client";
+
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 import * as React6 from "react";
-import { createRoot } from "react-dom/client";
 import { getContainer, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
@@ -2278,6 +2390,8 @@ var ReplacementBase = class {
   type;
   id;
   refreshView;
+  reactRoot;
+  reactContainer;
   constructor(settings) {
     this.getSetting = settings.getSetting;
     this.setSetting = settings.setSetting;
@@ -2285,6 +2399,8 @@ var ReplacementBase = class {
     this.type = settings.type;
     this.id = settings.id;
     this.refreshView = settings.refreshView;
+    this.reactRoot = settings.reactRoot;
+    this.reactContainer = settings.reactContainer;
   }
   static getTypes() {
     return null;
@@ -2305,7 +2421,7 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 import * as React5 from "react";
-import { useEffect as useEffect8, useLayoutEffect, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useLayoutEffect, useState as useState5 } from "react";
 import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
 import { Box as Box2, ThemeProvider } from "@elementor/ui";
 import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal2, useFloating as useFloating2 } from "@floating-ui/react";
@@ -2335,7 +2451,8 @@ var INLINE_EDITING_PROPERTY_PER_TYPE = {
   "e-button": "text",
   "e-form-label": "text",
   "e-heading": "title",
-  "e-paragraph": "paragraph"
+  "e-paragraph": "paragraph",
+  "e-form-submit-button": "text"
 };
 var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
@@ -2353,6 +2470,11 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = useState4(null);
+  useEffect7(() => {
+    if (!anchor) {
+      removeToolbarAnchor(ownerDocument, id);
+    }
+  }, [anchor, ownerDocument, id]);
   const onSelectionEnd = (view) => {
     const hasSelection = !view.state.selection.empty;
     removeToolbarAnchor(ownerDocument, id);
@@ -2362,7 +2484,10 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  return { onSelectionEnd, anchor };
+  const clearAnchor = useCallback(() => {
+    setAnchor(null);
+  }, []);
+  return { onSelectionEnd, anchor, clearAnchor };
 };
 var createAnchorBasedOnSelection = (ownerDocument, id) => {
   const frameWindow = ownerDocument.defaultView;
@@ -2429,46 +2554,59 @@ var horizontalShifterMiddleware = {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
 var CanvasInlineEditor = ({
   elementClasses,
   initialValue,
   expectedTag,
   rootElement,
+  contentElement,
   id,
   setValue,
-  ...props
+  requestDestroy
 }) => {
+  const [active, setActive] = useState5(true);
   const [editor, setEditor] = useState5(null);
-  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  const onBlur = () => {
-    removeToolbarAnchor(rootElement.ownerDocument, id);
-    props.onBlur();
-  };
-  useOnClickOutsideIframe(onBlur);
-  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
-			.ProseMirror > * {
-				height: 100%;
-			}
-			.${EDITOR_WRAPPER_SELECTOR} .ProseMirror > button[contenteditable="true"] {
-				height: auto;
-				cursor: text;
-			}
-			`), /* @__PURE__ */ React5.createElement(
+  const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  useEffect8(() => {
+    if (!active) {
+      clearAnchor();
+      requestDestroy();
+    }
+  }, [active, clearAnchor, requestDestroy]);
+  const dismiss = useCallback2(() => {
+    setEditor(null);
+    setActive(false);
+  }, []);
+  useOnClickOutsideIframe(dismiss);
+  useEffect8(() => {
+    const ownerDocument = contentElement.ownerDocument;
+    const handleClickAway = (event) => {
+      if (contentElement.contains(event.target)) {
+        return;
+      }
+      dismiss();
+    };
+    ownerDocument.addEventListener("mousedown", handleClickAway);
+    return () => ownerDocument.removeEventListener("mousedown", handleClickAway);
+  }, [contentElement, dismiss]);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
     InlineEditor,
     {
       onEditorCreate: setEditor,
+      mountElement: contentElement,
       editorProps: {
         attributes: {
-          style: "outline: none;overflow-wrap: normal;height:100%"
+          style: "outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;"
         }
       },
       elementClasses,
       value: initialValue,
       setValue,
-      onBlur,
+      onBlur: dismiss,
       autofocus: true,
-      expectedTag,
       onSelectionEnd
     }
   ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
@@ -2497,7 +2635,18 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(Box2, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(InlineEditorToolbar, { editor, elementId: id })));
+  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    Box2,
+    {
+      ref: refs.setFloating,
+      role: "presentation",
+      style: {
+        ...floatingStyles,
+        pointerEvents: "none"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(InlineEditorToolbar, { editor, elementId: id })
+  ));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
@@ -2531,8 +2680,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var HISTORY_DEBOUNCE_WAIT = 800;
 var InlineEditingReplacement = class extends ReplacementBase {
-  inlineEditorRoot = null;
   handlerAttached = false;
+  editing = false;
   getReplacementKey() {
     return "inline-editing";
   }
@@ -2540,7 +2689,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return Object.keys(INLINE_EDITING_PROPERTY_PER_TYPE);
   }
   isEditingModeActive() {
-    return !!this.inlineEditorRoot;
+    return this.editing;
   }
   shouldRenderReplacement() {
     return this.isInlineEditingEligible() && getCurrentEditMode() === "edit";
@@ -2583,8 +2732,8 @@ var InlineEditingReplacement = class extends ReplacementBase {
   resetInlineEditorRoot() {
     this.element.removeEventListener("click", this.handleRenderInlineEditor);
     this.handlerAttached = false;
-    this.inlineEditorRoot?.unmount?.();
-    this.inlineEditorRoot = null;
+    this.reactRoot.render(null);
+    this.editing = false;
   }
   unmountInlineEditor() {
     this.resetInlineEditorRoot();
@@ -2695,12 +2844,16 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const contentElement = this.element.children?.[0];
+    if (!contentElement) {
+      return;
+    }
+    const elementClasses = contentElement.classList.toString();
     const propValue = this.getExtractedContentValue();
     const expectedTag = this.getExpectedTag();
-    this.element.innerHTML = "";
-    this.inlineEditorRoot = createRoot(this.element);
-    this.inlineEditorRoot.render(
+    contentElement.innerHTML = "";
+    this.editing = true;
+    this.reactRoot.render(
       /* @__PURE__ */ React6.createElement(
         CanvasInlineEditor,
         {
@@ -2708,9 +2861,10 @@ var InlineEditingReplacement = class extends ReplacementBase {
           initialValue: propValue,
           expectedTag,
           rootElement: this.element,
+          contentElement,
           id: this.id,
           setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this)
+          requestDestroy: this.unmountInlineEditor.bind(this)
         }
       )
     );
@@ -2739,16 +2893,24 @@ var createViewWithReplacements = (options) => {
   return class extends TemplatedView {
     #replacement = null;
     #config;
+    #reactContainer;
+    #reactRoot;
     constructor(...args) {
       super(...args);
       const settings = this.model.get("settings");
+      this.#reactContainer = this.el.ownerDocument.createElement("div");
+      this.#reactContainer.style.display = "none";
+      this.el.ownerDocument.body.appendChild(this.#reactContainer);
+      this.#reactRoot = createRoot(this.#reactContainer);
       this.#config = {
         getSetting: settings.get.bind(settings),
         setSetting: settings.set.bind(settings),
         element: this.el,
         type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
         id: this?.model?.get("id") ?? null,
-        refreshView: this.refreshView.bind(this)
+        refreshView: this.refreshView.bind(this),
+        reactRoot: this.#reactRoot,
+        reactContainer: this.#reactContainer
       };
     }
     refreshView() {
@@ -2769,6 +2931,8 @@ var createViewWithReplacements = (options) => {
     }
     onDestroy() {
       this.#triggerAltMethod("onDestroy");
+      this.#reactRoot.unmount();
+      this.#reactContainer.remove();
     }
     _afterRender() {
       this.#triggerAltMethod("_afterRender");
@@ -2907,7 +3071,7 @@ function initTabsModelExtensions() {
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   let currentDocumentStructure = null;
   const updateDocumentStructure = () => {
     const structure = getDocumentStructure();
@@ -2929,17 +3093,23 @@ var initDocumentStructureResource = (reg) => {
     updateDocumentStructure
   );
   updateDocumentStructure();
-  mcpServer.resource("document-structure", DOCUMENT_STRUCTURE_URI, async () => {
-    const structure = getDocumentStructure();
-    return {
-      contents: [
-        {
-          uri: DOCUMENT_STRUCTURE_URI,
-          text: JSON.stringify(structure, null, 2)
-        }
-      ]
-    };
-  });
+  resource(
+    "document-structure",
+    DOCUMENT_STRUCTURE_URI,
+    {
+      description: "Document structure."
+    },
+    async () => {
+      return {
+        contents: [
+          {
+            uri: DOCUMENT_STRUCTURE_URI,
+            text: JSON.stringify(getDocumentStructure(), null, 2)
+          }
+        ]
+      };
+    }
+  );
 };
 function getDocumentStructure() {
   const extendedWindow = window;
@@ -2979,6 +3149,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
 import {
   createElement as createElement8,
   deleteElement,
@@ -3409,6 +3580,16 @@ var CompositionBuilder = class _CompositionBuilder {
   }
 };
 
+// src/mcp/utils/get-composition-target-container.ts
+import { COMPONENT_DOCUMENT_TYPE } from "@elementor/editor-documents";
+function getCompositionTargetContainer(documentContainer, documentType) {
+  const firstChild = documentContainer.children?.[0];
+  if (documentType === COMPONENT_DOCUMENT_TYPE && firstChild) {
+    return firstChild;
+  }
+  return documentContainer;
+}
+
 // src/mcp/tools/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
 var generatePrompt = () => {
@@ -3548,7 +3729,7 @@ Note: No height/width specified on any element - flexbox handles layout automati
 };
 
 // src/mcp/tools/build-composition/schema.ts
-import { zod as z } from "@elementor/editor-mcp";
+import { z } from "@elementor/schema";
 var inputSchema = {
   xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
   elementConfig: z.record(
@@ -3604,6 +3785,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const rootContainers = [];
       const documentContainer = getContainer3("document");
+      const currentDocument = getCurrentDocument();
+      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement8,
@@ -3616,7 +3799,7 @@ var initBuildCompositionsTool = (reg) => {
           configErrors,
           invalidStyles,
           rootContainers: generatedRootContainers
-        } = compositionBuilder.build(documentContainer);
+        } = compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
         if (configErrors.length) {
@@ -4000,14 +4183,12 @@ var initGetElementConfigTool = (reg) => {
 var initCanvasMcp = (reg) => {
   const { setMCPDescription } = reg;
   setMCPDescription(
-    `Everything related to creative design, layout, styling and building the pages, specifically element of type "widget".
+    `Everything related to V4 ( Atomic ) canvas.
 # Canvas workflow for new compositions
-- Check existing global variables
-- Check existing global classes
-- Create missing global variables
-- Create reusable global classes
-- Build valid XML with minimal inline styles (layout/positioning only)
-- Apply global classes to elements`
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`
   );
   initWidgetsSchemaResource(reg);
   initDocumentStructureResource(reg);
@@ -4225,18 +4406,7 @@ import {
   commandStartEvent
 } from "@elementor/editor-v1-adapters";
 
-// src/style-commands/undoable-actions/paste-element-style.ts
-import {
-  createElementStyle as createElementStyle2,
-  deleteElementStyle,
-  getElementStyles as getElementStyles3,
-  updateElementStyle as updateElementStyle2
-} from "@elementor/editor-elements";
-import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
-import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
-import { __ as __6 } from "@wordpress/i18n";
-
-// src/style-commands/utils.ts
+// src/utils/command-utils.ts
 import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache8 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __5 } from "@wordpress/i18n";
@@ -4279,6 +4449,15 @@ function getTitleForContainers(containers) {
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
+import {
+  createElementStyle as createElementStyle2,
+  deleteElementStyle,
+  getElementStyles as getElementStyles3,
+  updateElementStyle as updateElementStyle2
+} from "@elementor/editor-elements";
+import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
+import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
+import { __ as __6 } from "@wordpress/i18n";
 var undoablePasteElementStyle = () => undoable2(
   {
     do: ({ containers, newStyle }) => {