@elementor/editor-canvas 4.0.0-682 → 4.0.0-beta5

package/dist/index.js

@@ -59,7 +59,7 @@ module.exports = __toCommonJS(index_exports);
 var import_editor_v1_adapters = require("@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) {
@@ -83,9 +83,16 @@ var initBreakpointsResource = (reg) => {
       }
     ]
   });
-  mcpServer.resource("breakpoints ", BREAKPOINTS_SCHEMA_URI, () => {
-    return buildResourceResponse();
-  });
+  resource(
+    "breakpoints ",
+    BREAKPOINTS_SCHEMA_URI,
+    {
+      description: "Breakpoints list."
+    },
+    () => {
+      return buildResourceResponse();
+    }
+  );
   window.addEventListener((0, import_editor_v1_adapters.v1ReadyEvent)().name, () => {
     sendResourceUpdated({
       uri: BREAKPOINTS_SCHEMA_URI,
@@ -833,14 +840,22 @@ var UnknownStyleStateError = (0, import_utils2.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) => {
@@ -929,22 +944,30 @@ function useStyleItems() {
   const [styleItems, setStyleItems] = (0, import_react10.useState)({});
   const styleItemsCacheRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
   const providerAndSubscribers = (0, import_react10.useMemo)(() => {
-    return import_editor_styles_repository2.stylesRepository.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 import_editor_styles_repository2.stylesRepository.getProviders().map(
+      (provider) => ({
         provider,
         subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems,
-          cache
+          getCache: () => getCache(provider)
         })
-      };
-    });
+      })
+    );
   }, [renderStyles]);
   (0, import_react10.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
@@ -984,15 +1007,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,
@@ -1000,7 +1031,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) {
@@ -1015,7 +1046,7 @@ 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) => {
       return {
@@ -1025,7 +1056,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) {
@@ -1410,14 +1441,74 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/video-src-transformer.ts
+// src/transformers/shared/svg-src-transformer.ts
+var import_dompurify = __toESM(require("dompurify"));
 var import_wp_media2 = require("@elementor/wp-media");
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  const sanitized = import_dompurify.default.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 (0, import_wp_media2.getMediaAttachment)({ 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
+var import_wp_media3 = require("@elementor/wp-media");
 var videoSrcTransformer = createTransformer(async (value) => {
   const { id, url } = value;
   if (!id) {
     return { id: null, url };
   }
-  const attachment = await (0, import_wp_media2.getMediaAttachment)({ id });
+  const attachment = await (0, import_wp_media3.getMediaAttachment)({ id });
   return {
     id,
     url: attachment?.url ?? url
@@ -1426,7 +1517,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
@@ -1625,6 +1716,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}`;
 });
 
@@ -2008,6 +2102,7 @@ function createTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary
@@ -2042,6 +2137,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;
+    }
   };
 }
 
@@ -2074,10 +2174,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(" ");
@@ -2111,6 +2212,9 @@ function createNestedTemplatedElementView({
     invalidateRenderCache() {
       this._lastResolvedSettingsHash = null;
     },
+    renderOnChange() {
+      this.render();
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2154,6 +2258,7 @@ function createNestedTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary,
@@ -2283,13 +2388,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
+var import_client = require("react-dom/client");
+
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var React6 = __toESM(require("react"));
-var import_client = require("react-dom/client");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
@@ -2308,6 +2420,8 @@ var ReplacementBase = class {
   type;
   id;
   refreshView;
+  reactRoot;
+  reactContainer;
   constructor(settings) {
     this.getSetting = settings.getSetting;
     this.setSetting = settings.setSetting;
@@ -2315,6 +2429,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;
@@ -2365,7 +2481,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);
@@ -2383,6 +2500,11 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    if (!anchor) {
+      removeToolbarAnchor(ownerDocument, id);
+    }
+  }, [anchor, ownerDocument, id]);
   const onSelectionEnd = (view) => {
     const hasSelection = !view.state.selection.empty;
     removeToolbarAnchor(ownerDocument, id);
@@ -2392,7 +2514,10 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  return { onSelectionEnd, anchor };
+  const clearAnchor = (0, import_react11.useCallback)(() => {
+    setAnchor(null);
+  }, []);
+  return { onSelectionEnd, anchor, clearAnchor };
 };
 var createAnchorBasedOnSelection = (ownerDocument, id) => {
   const frameWindow = ownerDocument.defaultView;
@@ -2459,46 +2584,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] = (0, import_react12.useState)(true);
   const [editor, setEditor] = (0, import_react12.useState)(null);
-  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  const onBlur = () => {
-    removeToolbarAnchor(rootElement.ownerDocument, id);
-    props.onBlur();
-  };
-  useOnClickOutsideIframe(onBlur);
-  return /* @__PURE__ */ React5.createElement(import_ui4.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);
+  (0, import_react12.useEffect)(() => {
+    if (!active) {
+      clearAnchor();
+      requestDestroy();
+    }
+  }, [active, clearAnchor, requestDestroy]);
+  const dismiss = (0, import_react12.useCallback)(() => {
+    setEditor(null);
+    setActive(false);
+  }, []);
+  useOnClickOutsideIframe(dismiss);
+  (0, import_react12.useEffect)(() => {
+    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(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
     import_editor_controls2.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 }));
@@ -2527,7 +2665,18 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React5.createElement(import_react13.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(import_ui4.Box, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })));
+  return /* @__PURE__ */ React5.createElement(import_react13.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    import_ui4.Box,
+    {
+      ref: refs.setFloating,
+      role: "presentation",
+      style: {
+        ...floatingStyles,
+        pointerEvents: "none"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
+  ));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
@@ -2561,8 +2710,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";
   }
@@ -2570,7 +2719,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() && (0, import_editor_v1_adapters11.getCurrentEditMode)() === "edit";
@@ -2613,8 +2762,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();
@@ -2725,12 +2874,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 = (0, import_client.createRoot)(this.element);
-    this.inlineEditorRoot.render(
+    contentElement.innerHTML = "";
+    this.editing = true;
+    this.reactRoot.render(
       /* @__PURE__ */ React6.createElement(
         CanvasInlineEditor,
         {
@@ -2738,9 +2891,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)
         }
       )
     );
@@ -2769,16 +2923,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 = (0, import_client.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() {
@@ -2799,6 +2961,8 @@ var createViewWithReplacements = (options) => {
     }
     onDestroy() {
       this.#triggerAltMethod("onDestroy");
+      this.#reactRoot.unmount();
+      this.#reactContainer.remove();
     }
     _afterRender() {
       this.#triggerAltMethod("_afterRender");
@@ -2937,7 +3101,7 @@ function initTabsModelExtensions() {
 var import_editor_v1_adapters13 = require("@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();
@@ -2959,17 +3123,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;
@@ -3009,6 +3179,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_elements10 = require("@elementor/editor-elements");
 
 // src/composition-builder/composition-builder.ts
@@ -3423,6 +3594,16 @@ var CompositionBuilder = class _CompositionBuilder {
   }
 };
 
+// src/mcp/utils/get-composition-target-container.ts
+var import_editor_documents2 = require("@elementor/editor-documents");
+function getCompositionTargetContainer(documentContainer, documentType) {
+  const firstChild = documentContainer.children?.[0];
+  if (documentType === import_editor_documents2.COMPONENT_DOCUMENT_TYPE && firstChild) {
+    return firstChild;
+  }
+  return documentContainer;
+}
+
 // src/mcp/tools/build-composition/prompt.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 var generatePrompt = () => {
@@ -3618,6 +3799,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const rootContainers = [];
       const documentContainer = (0, import_editor_elements10.getContainer)("document");
+      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
+      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: import_editor_elements10.createElement,
@@ -3630,7 +3813,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) {
@@ -4014,14 +4197,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);