@elementor/editor-canvas 4.3.0-999 → 4.3.0-beta1

package/dist/index.mjs

@@ -12,10 +12,10 @@ var BEST_PRACTICES_FULL_URI = `${CANVAS_SERVER_NAME}_${BEST_PRACTICES_URI}`;
 var MCP_PROXY_URL = "elementor/v1/mcp-proxy";
 var listWidgetTypes = async () => {
   const { data } = await httpService().post(MCP_PROXY_URL, {
-    tool: "list-widgets",
-    input: {}
+    tool: "list-widget-schemas",
+    input: { summary: true }
   });
-  return (data.data ?? []).map((widget) => widget.type);
+  return (data.data?.widgets ?? []).map((widget) => widget.type);
 };
 var fetchWidgetSchema = async (widgetType) => {
   const { data } = await httpService().post(MCP_PROXY_URL, {
@@ -47,13 +47,13 @@ var initWidgetsSchemaResource = (reg) => {
       if (!widgetType) {
         throw new Error("No widget type provided.");
       }
-      const schema2 = await fetchWidgetSchema(widgetType);
+      const schema = await fetchWidgetSchema(widgetType);
       return {
         contents: [
           {
             uri: uri.toString(),
             mimeType: "application/json",
-            text: JSON.stringify(schema2)
+            text: JSON.stringify(schema)
           }
         ]
       };
@@ -1260,10 +1260,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: schema2, signal, renderContext }) {
-    schema2 = schema2 ?? initialSchema;
+  async function resolve({ props, schema, signal, renderContext }) {
+    schema = schema ?? initialSchema;
     const promises = Promise.all(
-      Object.entries(schema2).map(async ([key, type]) => {
+      Object.entries(schema).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
         const transformed = await transform({ value, key, type, signal, renderContext });
         onPropResolve?.({ key, value: transformed, propValue: value, propType: type });
@@ -1989,6 +1989,40 @@ var dateTimeTransformer = createTransformer((values) => {
   }).join(" ");
 });
 
+// src/utils/sanitize-escaped-html.ts
+import DOMPurify from "dompurify";
+var ALLOWED_NON_OPERATIONAL_ATTRS = [
+  "href",
+  "target",
+  "class",
+  "id",
+  "style",
+  "title",
+  "lang",
+  "dir",
+  "role"
+];
+function getAllowedHtmlWrapperTags() {
+  return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
+function sanitizeEscapedHtml(value) {
+  if (!value) {
+    return "";
+  }
+  const allowedTags = [...getAllowedHtmlWrapperTags()];
+  return DOMPurify.sanitize(value, {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: [...ALLOWED_NON_OPERATIONAL_ATTRS],
+    ALLOW_DATA_ATTR: true,
+    ALLOW_ARIA_ATTR: true
+  });
+}
+
+// src/transformers/settings/escaped-html-transformer.ts
+var escapedHtmlTransformer = createTransformer((value) => {
+  return sanitizeEscapedHtml(value);
+});
+
 // src/transformers/settings/html-v2-transformer.ts
 var htmlV2Transformer = createTransformer((value) => {
   return value?.content ?? "";
@@ -2025,6 +2059,102 @@ var timeRangeTransformer = createTransformer((value) => {
   };
 });
 
+// src/transformers/shared/process-svg-content.ts
+import DOMPurify2 from "dompurify";
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  const sanitized = DOMPurify2.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;
+}
+
+// src/transformers/shared/icon-transformer.ts
+var FONT_AWESOME_JSON = {
+  width: 0,
+  height: 1,
+  path: 4
+};
+var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
+var iconTransformer = createTransformer(async (value, { signal }) => {
+  const iconValue = typeof value.value === "string" ? value.value : null;
+  const library = typeof value.library === "string" ? value.library : null;
+  if (!iconValue || !library) {
+    return { html: null, url: null };
+  }
+  const iconName = getFontAwesomeIconName(iconValue);
+  const jsonFileName = getFontAwesomeJsonFileName(library);
+  if (!iconName || !jsonFileName) {
+    return { html: null, url: null };
+  }
+  const icons = await fetchFontAwesomeIcons(jsonFileName, signal);
+  const iconData = icons?.[iconName];
+  if (!iconData) {
+    return { html: null, url: null };
+  }
+  const svgText = buildFontAwesomeSvg(iconData);
+  const html = processSvgContent(svgText);
+  return { html, url: null };
+});
+function getFontAwesomeIconName(iconValue) {
+  const match = iconValue.match(/^fa\S*\s+fa-(.+)$/);
+  return match?.[1] ?? null;
+}
+function getFontAwesomeJsonFileName(library) {
+  if (!library.startsWith("fa-")) {
+    return null;
+  }
+  return library.replace(/^fa-/, "");
+}
+function getAssetsBaseUrl() {
+  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+  return typeof assetsUrl === "string" && assetsUrl !== "" ? assetsUrl : null;
+}
+async function fetchFontAwesomeIcons(jsonFileName, signal) {
+  const cached = fontAwesomeJsonCache.get(jsonFileName);
+  if (cached) {
+    return cached;
+  }
+  const icons = await loadFontAwesomeIcons(jsonFileName, signal);
+  if (icons) {
+    fontAwesomeJsonCache.set(jsonFileName, icons);
+  }
+  return icons;
+}
+async function loadFontAwesomeIcons(jsonFileName, signal) {
+  const assetsUrl = getAssetsBaseUrl();
+  if (!assetsUrl) {
+    return null;
+  }
+  try {
+    const response = await fetch(`${assetsUrl}lib/font-awesome/json/${jsonFileName}.json`, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const data = await response.json();
+    return data.icons ?? null;
+  } catch {
+    return null;
+  }
+}
+function buildFontAwesomeSvg(iconData) {
+  const width = iconData[FONT_AWESOME_JSON.width];
+  const height = iconData[FONT_AWESOME_JSON.height];
+  const path = iconData[FONT_AWESOME_JSON.path];
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"><path d="${path}"></path></svg>`;
+}
+
 // src/transformers/shared/image-src-transformer.ts
 var imageSrcTransformer = createTransformer((value) => ({
   id: value.id ?? null,
@@ -2066,26 +2196,7 @@ var plainTransformer = createTransformer((value) => {
 });
 
 // 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 });
@@ -2141,7 +2252,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("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("icon", iconTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("escaped-html", escapedHtmlTransformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -2418,11 +2529,11 @@ function getVal2(val) {
 var transformOriginTransformer = createTransformer((value) => {
   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) {
+  const z3 = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z3 === DEFAULT_Z) {
     return null;
   }
-  return `${x} ${y} ${z4}`;
+  return `${x} ${y} ${z3}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -2500,13 +2611,13 @@ function initStyleTransformers() {
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register("flex", flexTransformer).register(
-    "border-width",
+    "border-width-v2",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ key }) => `border-${key}-width`
     )
   ).register(
-    "border-radius",
+    "border-radius-v2",
     createMultiPropsTransformer(
       ["start-start", "start-end", "end-start", "end-end"],
       ({ key }) => `border-${key}-radius`
@@ -2530,28 +2641,13 @@ function createDomRenderer() {
     render: environment.render
   };
 }
+function getAllowedHtmlWrapperTags2() {
+  return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
 function escapeHtmlTag(value) {
-  const allowedTags = [
-    "a",
-    "article",
-    "aside",
-    "button",
-    "div",
-    "footer",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "header",
-    "main",
-    "nav",
-    "p",
-    "section",
-    "span"
-  ];
-  return allowedTags.includes(value) ? value : "div";
+  const allowedTags = getAllowedHtmlWrapperTags2();
+  const normalizedTag = value?.toLowerCase?.() ?? "";
+  return allowedTags.includes(normalizedTag) ? value : "div";
 }
 function escapeURL(value) {
   const allowedProtocols = ["http:", "https:", "mailto:", "tel:"];
@@ -2646,6 +2742,52 @@ function createElementViewClassDeclaration() {
 // src/legacy/create-nested-templated-element-type.ts
 import { ELEMENT_STYLE_CHANGE_EVENT as ELEMENT_STYLE_CHANGE_EVENT2 } from "@elementor/editor-elements";
 
+// src/renderers/compute-html-tag.ts
+var DEFAULT_LINK_TAG = "a";
+function computeHtmlTag(settings, defaultTag, options = {}) {
+  const followLink = options.followLink ?? true;
+  if (followLink && settingsHaveActiveLink(settings)) {
+    const link = settings.link;
+    return extractLinkHtmlTag(isRecord(link) ? link : {});
+  }
+  const settingsTag = extractHtmlTagValue(settings.tag);
+  if (null !== settingsTag && "" !== settingsTag) {
+    return settingsTag;
+  }
+  return defaultTag;
+}
+function settingsHaveActiveLink(settings) {
+  const link = settings.link;
+  if (!isRecord(link)) {
+    return false;
+  }
+  const href = extractHtmlTagValue(link.href);
+  if (null !== href && "" !== href) {
+    return true;
+  }
+  const attributes = link.attributes;
+  return typeof attributes === "string" && "" !== attributes;
+}
+function extractLinkHtmlTag(link) {
+  const tag = extractHtmlTagValue(link.tag);
+  if (null !== tag && "" !== tag) {
+    return tag;
+  }
+  return DEFAULT_LINK_TAG;
+}
+function extractHtmlTagValue(value) {
+  if (isRecord(value) && typeof value.value === "string") {
+    return value.value;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return null;
+}
+function isRecord(value) {
+  return typeof value === "object" && null !== value && !Array.isArray(value);
+}
+
 // src/legacy/create-pending-element.ts
 import {
   addModelToParent,
@@ -2711,7 +2853,13 @@ function setupTwigRenderer({ renderer, element }) {
     transformers: settingsTransformersRegistry,
     schema: element.atomic_props_schema
   });
-  return { templateKey, baseStylesDictionary, resolveProps };
+  return {
+    templateKey,
+    baseStylesDictionary,
+    resolveProps,
+    defaultHtmlTag: element.default_html_tag ?? "div",
+    htmlTagFollowsLink: element.html_tag_follows_link ?? true
+  };
 }
 function createBeforeRender(view) {
   view._ensureViewIsIntact();
@@ -2751,7 +2899,7 @@ function createTemplatedElementView({
   element
 }) {
   const BaseView = createElementViewClassDeclaration();
-  const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer({
+  const { templateKey, baseStylesDictionary, resolveProps, defaultHtmlTag, htmlTagFollowsLink } = setupTwigRenderer({
     type,
     renderer,
     element
@@ -2821,6 +2969,7 @@ function createTemplatedElementView({
           interaction_id: this.getInteractionId(),
           type,
           settings,
+          tag: computeHtmlTag(settings, defaultHtmlTag, { followLink: htmlTagFollowsLink }),
           base_styles: baseStylesDictionary,
           ...this.getResolverRenderContext?.() ?? {}
         };
@@ -2910,7 +3059,7 @@ function createNestedTemplatedElementView({
   element
 }) {
   const legacyWindow = window;
-  const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer({
+  const { templateKey, baseStylesDictionary, resolveProps, defaultHtmlTag, htmlTagFollowsLink } = setupTwigRenderer({
     type,
     renderer,
     element
@@ -2985,6 +3134,7 @@ function createNestedTemplatedElementView({
           interaction_id: this.getInteractionId(),
           type,
           settings: resolvedSettings,
+          tag: computeHtmlTag(resolvedSettings, defaultHtmlTag, { followLink: htmlTagFollowsLink }),
           base_styles: baseStylesDictionary,
           editor_attributes: buildEditorAttributes(model),
           editor_classes: buildEditorClasses(model),
@@ -3208,8 +3358,8 @@ import { createRoot } from "react-dom/client";
 import * as React11 from "react";
 import { getContainer as getContainer2, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
+  escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2,
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
-  parseHtmlChildren,
   stringPropTypeUtil as stringPropTypeUtil2
 } from "@elementor/editor-props";
 import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from "@elementor/editor-v1-adapters";
@@ -3488,11 +3638,15 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-import { htmlV3PropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
+import {
+  escapedHtmlPropTypeUtil,
+  htmlV3PropTypeUtil,
+  stringPropTypeUtil
+} from "@elementor/editor-props";
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([htmlV3PropTypeUtil.key, stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([escapedHtmlPropTypeUtil.key, htmlV3PropTypeUtil.key, stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -3512,7 +3666,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return htmlV3PropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
+  return escapedHtmlPropTypeUtil.isValid(rawValue) || htmlV3PropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -3597,17 +3751,26 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
+    if (escapedHtmlPropTypeUtil2.isValid(propValue)) {
+      return escapedHtmlPropTypeUtil2.extract(propValue) ?? "";
+    }
     const extracted = htmlV3PropTypeUtil2.extract(propValue);
     return stringPropTypeUtil2.extract(extracted?.content ?? null) ?? "";
   }
+  createContentPropValue(value) {
+    const content = value || "";
+    const propTypeKey = this.getInlineEditablePropTypeKey();
+    if (propTypeKey === htmlV3PropTypeUtil2.key) {
+      return htmlV3PropTypeUtil2.create({
+        content: stringPropTypeUtil2.create(content),
+        children: []
+      });
+    }
+    return escapedHtmlPropTypeUtil2.create(content);
+  }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
-    const html = value || "";
-    const parsed = parseHtmlChildren(html);
-    const valueToSave = htmlV3PropTypeUtil2.create({
-      content: parsed.content ? stringPropTypeUtil2.create(parsed.content) : null,
-      children: parsed.children
-    });
+    const valueToSave = this.createContentPropValue(value);
     undoable(
       {
         do: () => {
@@ -3636,7 +3799,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [htmlV3PropTypeUtil2.key, stringPropTypeUtil2.key];
+      const textKeys = [escapedHtmlPropTypeUtil2.key, htmlV3PropTypeUtil2.key, stringPropTypeUtil2.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -3891,8 +4054,54 @@ function createNestedTemplatedType(type, renderer, element) {
   });
 }
 
+// src/legacy/list-type.ts
+var LIST_TYPE = "e-list";
+function initListType() {
+  registerElementType(
+    LIST_TYPE,
+    (options) => createListType(options)
+  );
+}
+function createListType(options) {
+  const BaseType = createNestedTemplatedElementType(options);
+  let ListView = null;
+  return class extends BaseType {
+    getView() {
+      if (!ListView) {
+        ListView = createListView(options);
+      }
+      return ListView;
+    }
+  };
+}
+function createListView(options) {
+  const BaseView = createNestedTemplatedElementView(options);
+  return BaseView.extend({
+    getRenderContext() {
+      const parentContext = this._parent?.getRenderContext?.();
+      const settings = this.model.get("settings");
+      const showMarkersProp = settings?.get?.("show_markers");
+      const showMarkers = showMarkersProp?.value ?? showMarkersProp ?? true;
+      return {
+        ...parentContext,
+        show_markers: showMarkers
+      };
+    },
+    getResolverRenderContext() {
+      const parentContext = this._parent?.getResolverRenderContext?.();
+      const settings = this.model.get("settings");
+      const showMarkersProp = settings?.get?.("show_markers");
+      const showMarkers = showMarkersProp?.value ?? showMarkersProp ?? true;
+      return {
+        ...parentContext,
+        show_markers: showMarkers
+      };
+    }
+  });
+}
+
 // src/legacy/tabs-model-extensions.ts
-import { htmlV3PropTypeUtil as htmlV3PropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
+import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil3 } from "@elementor/editor-props";
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -3908,10 +4117,7 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: htmlV3PropTypeUtil3.create({
-          content: stringPropTypeUtil3.create(`Tab ${position}`),
-          children: []
-        })
+        paragraph: escapedHtmlPropTypeUtil3.create(`Tab ${position}`)
       }
     };
     return [updatedParagraph, ...elements.slice(1)];
@@ -3922,22 +4128,22 @@ function initTabsModelExtensions() {
 }
 
 // src/mcp/canvas-mcp.ts
-import { Schema as Schema4 } from "@elementor/editor-props";
+import { Schema as Schema3 } from "@elementor/editor-props";
 
 // src/mcp/resources/available-widgets-resource.ts
 import { httpService as httpService3 } from "@elementor/http-client";
 var MCP_PROXY_URL2 = "elementor/v1/mcp-proxy";
 var AVAILABLE_WIDGETS_URI = "elementor://context/available-widgets";
 var AVAILABLE_WIDGETS_URI_V4 = "elementor://context/available-widgets/v4";
-var fetchWidgets = async (version) => {
+var fetchWidgets = async () => {
   const { data } = await httpService3().post(MCP_PROXY_URL2, {
-    tool: "list-widgets",
-    input: version ? { version } : {}
+    tool: "list-widget-schemas",
+    input: { summary: true }
   });
-  return data.data ?? [];
+  return data.data?.widgets ?? [];
 };
-var buildContents = async (uri, version) => {
-  const widgets = await fetchWidgets(version);
+var buildContents = async (uri) => {
+  const widgets = await fetchWidgets();
   return {
     contents: [
       {
@@ -3956,13 +4162,13 @@ var initAvailableWidgetsResource = (reg) => {
     {
       description: "All registered v4 version widgets"
     },
-    async () => buildContents(AVAILABLE_WIDGETS_URI_V4, "v4")
+    async () => buildContents(AVAILABLE_WIDGETS_URI_V4)
   );
   resource(
     "available-widgets",
     AVAILABLE_WIDGETS_URI,
     {
-      description: "All registered widget types with v3/v4 version metadata and description."
+      description: "All registered v4 widget types with description."
     },
     async () => buildContents(AVAILABLE_WIDGETS_URI)
   );
@@ -4097,11 +4303,10 @@ import { httpService as httpService5 } from "@elementor/http-client";
 var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
 var MCP_PROXY_URL4 = "elementor/v1/mcp-proxy";
 var fetchDynamicTags = async () => {
-  const { data } = await httpService5().post(MCP_PROXY_URL4, {
-    tool: "list-dynamic-tags",
-    input: {}
+  const { data } = await httpService5().get(MCP_PROXY_URL4, {
+    params: { uri: DYNAMIC_TAGS_URI }
   });
-  return data.data ?? [];
+  return data.data ?? "[]";
 };
 var initDynamicTagsResource = (reg) => {
   const { resource } = reg;
@@ -4113,13 +4318,12 @@ var initDynamicTagsResource = (reg) => {
       mimeType: "application/json"
     },
     async (uri) => {
-      const tags = await fetchDynamicTags();
       return {
         contents: [
           {
             uri: uri.href,
             mimeType: "application/json",
-            text: JSON.stringify(tags)
+            text: await fetchDynamicTags()
           }
         ]
       };
@@ -4445,99 +4649,8 @@ function getElementDisplayName(container) {
   }
 }
 
-// src/mcp/tools/build-composition/tool.ts
-import { getCurrentDocument, reloadCurrentDocument } from "@elementor/editor-documents";
-import { getContainer as getContainer4, selectElement } from "@elementor/editor-elements";
-import { AxiosError, httpService as httpService6 } from "@elementor/http-client";
-import { z } from "@elementor/schema";
-var MCP_PROXY_URL5 = "elementor/v1/mcp-proxy";
-var initBuildCompositionTool = (reg) => {
-  const { addTool } = reg;
-  addTool({
-    name: "build-composition",
-    description: "Build a V4 element composition on the Elementor canvas via the server-side MCP ability. Pass the raw XML tags directly as xmlStructure \u2014 do NOT wrap the value in <![CDATA[ ... ]]>, code fences, or quotes. The document is saved as a draft. Reload the editor after calling this tool to see the result.",
-    schema: {
-      xmlStructure: z.string().describe(
-        'Valid XML structure with custom Elementor widget tags. Every element MUST have a unique configuration-id attribute (e.g. <e-heading configuration-id="hero-title"></e-heading>). No attributes, classes, IDs, or text nodes in XML. Pass raw XML \u2014 do not wrap in CDATA.'
-      ),
-      elementConfig: z.record(
-        z.string().describe("configuration-id"),
-        z.record(z.string().describe("property name"), z.any().describe("PropValue"))
-      ).optional().describe("Map configuration-id \u2192 widget PropValues ($$type + value)."),
-      style: z.record(
-        z.string().describe("configuration-id"),
-        z.record(z.string().describe("CSS property name"), z.string().describe("CSS value"))
-      ).optional().describe(
-        "Map configuration-id \u2192 raw CSS declarations (property \u2192 value strings; no selectors). Server converts to native styles; unconvertible declarations become the element custom CSS."
-      ),
-      parentId: z.string().optional().describe("ID of the parent container. Omit or pass 'document' to insert at document root."),
-      dryRun: z.boolean().optional().describe("If true, validate and return the resolved tree without persisting.")
-    },
-    outputSchema: {
-      rootElementIds: z.array(z.string()),
-      previewUrl: z.string(),
-      version: z.string(),
-      resolvedXml: z.string(),
-      llmInstructions: z.string(),
-      warnings: z.array(z.string()).optional()
-    },
-    handler: async ({ xmlStructure, elementConfig, style, parentId, dryRun }) => {
-      const document2 = getCurrentDocument();
-      if (!document2?.id) {
-        throw new Error("No active document found.");
-      }
-      try {
-        const { data } = await httpService6().post(MCP_PROXY_URL5, {
-          tool: "build-composition",
-          input: {
-            post_id: document2.id,
-            xml_structure: xmlStructure,
-            element_config: elementConfig ?? {},
-            style: style ?? {},
-            parent_id: parentId ?? "document",
-            dry_run: dryRun ?? false
-          }
-        });
-        if (!dryRun) {
-          await reloadCurrentDocument();
-          const [firstRootId] = data.data.root_element_ids;
-          if (firstRootId) {
-            selectElement(firstRootId);
-            getContainer4(firstRootId)?.view?.el?.scrollIntoView({
-              behavior: "smooth",
-              block: "center"
-            });
-          }
-        }
-        return {
-          rootElementIds: data.data.root_element_ids,
-          previewUrl: data.data.preview_url,
-          version: data.data.version,
-          resolvedXml: data.data.resolved_xml,
-          llmInstructions: data.data.llm_instructions,
-          warnings: data.data.warnings
-        };
-      } catch (error) {
-        throw new Error(getErrorMessage(error));
-      }
-    }
-  });
-};
-function getErrorMessage(error) {
-  if (error instanceof AxiosError) {
-    const data = error.response?.data;
-    if (data?.message) {
-      return data.code ? `${data.code}: ${data.message}` : data.message;
-    }
-  }
-  if (error instanceof Error) {
-    return error.message;
-  }
-  return "build-composition failed with an unknown error.";
-}
-
 // src/mcp/tools/configure-element/tool.ts
-import { getContainer as getContainer5, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
 import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
 import { Schema as Schema2 } from "@elementor/editor-props";
 
@@ -4569,9 +4682,9 @@ var readStoredCustomCssText = (raw) => {
 
 // src/mcp/utils/resolve-canonical-prop-name.ts
 import { getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
-function buildAliasToCanonicalMap(schema2) {
+function buildAliasToCanonicalMap(schema) {
   const aliasToCanonical = {};
-  for (const [canonical, propType] of Object.entries(schema2)) {
+  for (const [canonical, propType] of Object.entries(schema)) {
     const aliases = propType.meta?.aliases;
     if (!Array.isArray(aliases)) {
       continue;
@@ -4585,26 +4698,26 @@ function buildAliasToCanonicalMap(schema2) {
   return aliasToCanonical;
 }
 function resolveCanonicalPropName(elementType, propertyName) {
-  const schema2 = getWidgetsCache4()?.[elementType]?.atomic_props_schema;
-  if (!schema2 || schema2[propertyName]) {
+  const schema = getWidgetsCache4()?.[elementType]?.atomic_props_schema;
+  if (!schema || schema[propertyName]) {
     return propertyName;
   }
-  return buildAliasToCanonicalMap(schema2)[propertyName] ?? propertyName;
+  return buildAliasToCanonicalMap(schema)[propertyName] ?? propertyName;
 }
 function resolveCanonicalPropKeys(elementType, props) {
-  const schema2 = getWidgetsCache4()?.[elementType]?.atomic_props_schema;
-  if (!schema2) {
+  const schema = getWidgetsCache4()?.[elementType]?.atomic_props_schema;
+  if (!schema) {
     return { ...props };
   }
-  const aliasToCanonical = buildAliasToCanonicalMap(schema2);
+  const aliasToCanonical = buildAliasToCanonicalMap(schema);
   const resolved = {};
   for (const [key, value] of Object.entries(props)) {
-    if (schema2[key]) {
+    if (schema[key]) {
       resolved[key] = value;
     }
   }
   for (const [key, value] of Object.entries(props)) {
-    if (schema2[key]) {
+    if (schema[key]) {
       continue;
     }
     const canonical = aliasToCanonical[key];
@@ -4652,9 +4765,9 @@ var dynamicTagLLMResolver = (value) => {
     }
   };
 };
-var buildStrictSettings = (schema2, provided) => {
+var buildStrictSettings = (schema, provided) => {
   const settings = {};
-  for (const [key, propType] of Object.entries(schema2)) {
+  for (const [key, propType] of Object.entries(schema)) {
     if (OMITTED_DYNAMIC_SETTING_KEYS.includes(key)) {
       continue;
     }
@@ -4686,6 +4799,20 @@ var LOCAL_STYLE_META = {
   breakpoint: "desktop",
   state: null
 };
+var UnsupportedPropertyError = class extends Error {
+  elementType;
+  propertyName;
+  constructor(elementType, propertyName, availableProperties) {
+    super(
+      `Property "${propertyName}" does not exist on element type "${elementType}". Available properties are: ${availableProperties.join(
+        ", "
+      )}`
+    );
+    this.name = "UnsupportedPropertyError";
+    this.elementType = elementType;
+    this.propertyName = propertyName;
+  }
+};
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
   return Schema.adjustLlmPropValueSchema(value, {
@@ -4791,12 +4918,7 @@ var doUpdateElementProperty = (params) => {
     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(
-        ", "
-      )}`
-    );
+    throw new UnsupportedPropertyError(elementType, propertyName, Object.keys(elementPropSchema));
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
@@ -4866,8 +4988,6 @@ For all non-primitive entries in \`propertiesToChange\`, provide the schema \`ke
 
 Use the EXACT PropType schema given, and ALWAYS include the \`key\` from the schema for every property you are changing in \`propertiesToChange\`.
 
-Check \`llm_guidance.default_settings\` in the widget schema \u2014 include a key in \`propertiesToChange\` only when the user explicitly asks to change it.
-
 # Dynamic tags
 A value can be made dynamic wherever its schema exposes a variant with "$$type": "dynamic". This may be the property root OR a NESTED field: for example an image is made dynamic on its "src" (the root stays "image"), NOT on the whole "image" value.
 Put the dynamic object EXACTLY at the node whose schema offers the "dynamic" variant, in place of the static variant. The variant's "name" enumerates the tags allowed at that node.
@@ -4894,7 +5014,7 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
   );
   configureElementToolPrompt.parameter(
     "style",
-    'A flat map of raw CSS declarations (property \u2192 value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. Set a value to null to reset that property to its default. OPTIONAL.'
+    'A flat map of raw CSS declarations (property \u2192 value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. font-family must be a single Google Font name or a var(--label) \u2014 no fallback stacks. Set a value to null to reset that property to its default. OPTIONAL.'
   );
   configureElementToolPrompt.example(`
 \`\`\`json
@@ -4926,36 +5046,39 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
 V4 only: If MCP fails, give manual steps using V4 UI.
 
 V4 Editor structure:
-Panel tabs: General (\u2192 Settings section: ID, Tag, Link), Style, Interactions.
+Panel tabs: General (\u2192 Settings section: ID, Tag, and Link where the widget supports it), Style, Interactions.
 NO Advanced tab. Never mention Advanced tab.
+Note: \`link\` is valid only when the element's PropType schema (which you must already have) includes a \`link\` property. Sending \`link\` to a widget whose schema lacks it is skipped and reported in the response \`warnings\` (other changes still apply) and the link is lost.
 `);
   return configureElementToolPrompt.prompt();
 };
-var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt();
 
 // src/mcp/tools/configure-element/schema.ts
-import { z as z2 } from "@elementor/schema";
+import { z } from "@elementor/schema";
 var inputSchema = {
-  propertiesToChange: z2.record(
-    z2.string().describe("The property name."),
-    z2.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
-    z2.any()
+  propertiesToChange: z.record(
+    z.string().describe("The property name."),
+    z.any().describe(`PropValue, refer to [${WIDGET_SCHEMA_URI}] by correct type, as appears in elementType`),
+    z.any()
   ).describe("An object record containing property names and their new values to be set on the element"),
-  style: z2.record(
-    z2.string().describe('A CSS property name, e.g. "color", "margin-top".'),
-    z2.string().nullable().describe(
+  style: z.record(
+    z.string().describe('A CSS property name, e.g. "color", "margin-top".'),
+    z.string().nullable().describe(
       'A CSS value, e.g. "red", "10px", "1px solid #000". Use null to reset the property to its default.'
     )
   ).describe(
     "Raw CSS declarations as a flat property\u2192value map. Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS. A null value resets that property to its default."
   ).default({}),
-  elementType: z2.string().describe("The type of the element to retrieve the schema"),
-  elementId: z2.string().describe("The unique id of the element to configure")
+  elementType: z.string().describe("The type of the element to retrieve the schema"),
+  elementId: z.string().describe("The unique id of the element to configure")
 };
 var outputSchema = {
-  success: z2.boolean().describe(
+  success: z.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
-  )
+  ),
+  warnings: z.string().describe(
+    'Non-fatal notices. Present when some props were skipped because they are not in the element schema (e.g. a "link" on a widget with no link prop). Other changes were still applied.'
+  ).optional()
 };
 
 // src/mcp/tools/configure-element/tool.ts
@@ -4990,7 +5113,7 @@ var initConfigureElementTool = (reg) => {
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
         );
       }
-      const container = getContainer5(elementId);
+      const container = getContainer4(elementId);
       if (!container) {
         throw new Error(`Element with id ${elementId} not found`);
       }
@@ -5005,6 +5128,7 @@ var initConfigureElementTool = (reg) => {
       }
       const propertiesToUpdate = resolveCanonicalPropKeys(elementType, propertiesToChange);
       const toUpdate = Object.entries(propertiesToUpdate);
+      const skippedProps = [];
       for (const [propertyName, propertyValue] of toUpdate) {
         if (!Schema2.isPropKeyConfigurable(propertyName)) {
           throw new Error(`Not allowed to update ${propertyName}`);
@@ -5017,6 +5141,10 @@ var initConfigureElementTool = (reg) => {
             propertyValue
           });
         } catch (error) {
+          if (error instanceof UnsupportedPropertyError) {
+            skippedProps.push(error.propertyName);
+            continue;
+          }
           const errorMessage = createUpdateErrorMessage({
             propertyName,
             elementId,
@@ -5029,7 +5157,10 @@ var initConfigureElementTool = (reg) => {
       }
       await applyStyleFromCss({ elementId, elementType, style });
       return {
-        success: true
+        success: true,
+        warnings: skippedProps.length ? `Skipped unsupported props (not in the "${elementType}" schema; other changes were applied): ${skippedProps.join(
+          ", "
+        )}.` : void 0
       };
     }
   });
@@ -5081,102 +5212,74 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 }`;
 }
 
-// src/mcp/tools/get-element-config/tool.ts
-import { getContainer as getContainer6, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache7 } 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 outputSchema2 = {
-  properties: z3.record(z3.string(), z3.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
-  style: z3.record(z3.string(), z3.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
-  childElements: z3.array(
-    z3.object({
-      id: z3.string(),
-      elementType: z3.string(),
-      childElements: z3.array(z3.any()).describe("An array of child element IDs, when applicable, same structure recursively")
-    })
-  ).describe("An array of child element IDs, when applicable, with recursive structure")
-};
-var structuredElements = (element) => {
-  const children = element.children || [];
-  return children.map((child) => {
-    return {
-      id: child.id,
-      elementType: child.model.get("elType") || child.model.get("widgetType") || "unknown",
-      childElements: structuredElements(child)
-    };
-  });
-};
-var initGetElementConfigTool = (reg) => {
+// src/mcp/tools/get-page-structure/tool.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { httpService as httpService6 } from "@elementor/http-client";
+import { z as z2 } from "@elementor/schema";
+
+// src/mcp/utils/get-mcp-error-message.ts
+import { AxiosError } from "@elementor/http-client";
+function getMcpErrorMessage(error, toolName) {
+  if (error instanceof AxiosError) {
+    const data = error.response?.data;
+    if (data?.message) {
+      return data.code ? `${data.code}: ${data.message}` : data.message;
+    }
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return `${toolName} failed with an unknown error.`;
+}
+
+// src/mcp/tools/get-page-structure/tool.ts
+var MCP_PROXY_URL5 = "elementor/v1/mcp-proxy";
+var initGetPageStructureTool = (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: outputSchema2,
-    handler: async ({ elementId }) => {
-      const element = getContainer6(elementId);
-      if (!element) {
-        throw new Error(`Element with ID ${elementId} not found.`);
-      }
-      const elementType = element.model.get("widgetType") || element.model.get("elType") || "";
-      const widgetData = getWidgetsCache7()?.[elementType];
-      if (!widgetData) {
-        throw new Error(
-          `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
-        );
-      }
-      if (!widgetData.atomic_props_schema) {
-        throw new Error(
-          `This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${elementType}`
-        );
-      }
-      const elementRawSettings = element.settings;
-      const propSchema = getWidgetsCache7()?.[elementType]?.atomic_props_schema;
-      if (!elementRawSettings || !propSchema) {
-        throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
+    name: "get-page-structure",
+    description: "Returns a lean Elementor element tree skeleton (id, elType, widgetType, title, nested elements) for a post or page. If no postId is provided, uses the currently open document. Optionally scope to a subtree with elementId. Set includeContent=true (requires elementId) to also return each node's settings and styles.",
+    schema: {
+      postId: z2.number().optional().describe(
+        "WordPress post ID of the Elementor document. If omitted, uses the currently open document."
+      ),
+      elementId: z2.string().optional().describe("If provided, returns only the subtree rooted at that element id."),
+      includeContent: z2.boolean().optional().describe(
+        "If true, includes each node's settings and styles (same shape build-composition accepts as input). Requires elementId."
+      )
+    },
+    outputSchema: {
+      elements: z2.array(z2.any()).describe(
+        "Skeleton of Elementor elements (id, elType, widgetType, title, nested elements). When includeContent is true, each node also includes settings and styles."
+      )
+    },
+    handler: async ({ postId, elementId, includeContent }) => {
+      const resolvedPostId = postId ?? getCurrentDocument()?.id;
+      if (!resolvedPostId) {
+        throw new Error("No post ID provided and no active document found.");
       }
-      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]);
-            }
-          });
-          if (defaultVariant.custom_css) {
-            stylePropValues.custom_css = atob(defaultVariant.custom_css.raw);
+      try {
+        const { data } = await httpService6().post(MCP_PROXY_URL5, {
+          tool: "get-page-structure",
+          input: {
+            post_id: resolvedPostId,
+            ...elementId ? { element_id: elementId } : {},
+            ...includeContent ? { include_content: true } : {}
           }
-        }
+        });
+        return {
+          elements: data.data.elements
+        };
+      } catch (error) {
+        throw new Error(getMcpErrorMessage(error, "get-page-structure"));
       }
-      return {
-        properties: {
-          ...propValues
-        },
-        style: {
-          ...stylePropValues
-        },
-        childElements: structuredElements(element)
-      };
     }
   });
 };
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  Schema4.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
+  Schema3.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -5185,16 +5288,15 @@ var initCanvasMcp = (reg) => {
   initEditorStateResource(reg);
   initGeneralContextResource(reg);
   initBestPracticesResource(reg);
-  initGetElementConfigTool(reg);
   initConfigureElementTool(reg);
-  initBuildCompositionTool(reg);
+  initGetPageStructureTool(reg);
   initBreakpointsResource(reg);
 };
 
 // src/mcp/mcp-description.ts
 var ELEMENT_SCHEMA_URI = WIDGET_SCHEMA_URI.replace("{widgetType}", "element-schema");
 var mcpDescription = `Elementor Canvas MCP
-This MCP enables creation, configuration, and styling of elements on the Elementor canvas using the build_composition tool.
+This MCP enables configuration and styling of existing V4 elements on the Elementor canvas using the configure-element tool.
 
 # Core Concepts
 
@@ -5213,66 +5315,54 @@ The \`$$type\` defines how Elementor interprets the value. Providing the correct
 - **Global Classes**: Reusable style sets that can be applied to elements (\`elementor://global-classes\`)
 - **Widget Schemas**: Configuration options for each widget type (\`${WIDGET_SCHEMA_URI}\`)
 
-# Building Compositions with build_composition
+# Configuring Elements with configure-element
 
-The \`build_composition\` tool is the primary way to create elements. It accepts structure (XML), configuration, and styling in a single operation.
+The \`configure-element\` tool updates settings and styles on existing V4 elements. Read the configure-element guide resource before use.
 
 ## Complete Workflow
 
 ### 1. Parse User Requirements
-Understand what needs to be built: structure, content, and styling.
+Understand what needs to change: content, settings, or styling on existing elements.
 
 ### 2. Check Global Resources FIRST
-Always check existing resources before building:
+Always check existing resources before styling:
 - List \`elementor://global-variables\` for available variables (colors, sizes, fonts)
 - List \`elementor://global-classes\` for available style sets
 - **Always prefer using existing global resources over creating inline styles**
 
 ### 3. Retrieve Widget Schemas
-For each widget you'll use:
+For each element you will configure:
 - List \`${WIDGET_SCHEMA_URI}\` to see available widgets
 - Retrieve configuration schema from \`${ELEMENT_SCHEMA_URI}\` for each widget
-- Check the \`llm_guidance\` property for container nesting, \`default_styles\`, and \`default_settings\` (omit default_settings from elementConfig unless the user asks to change them)
+- Check the \`llm_guidance\` property for container nesting, \`default_styles\`, and \`default_settings\`
 
-### 4. Build XML Structure
-Create valid XML with configuration-ids:
-- Each element must have a unique \`configuration-id\` attribute
-- No text nodes, classes, or IDs in XML - structure only
-- Example:
-\`\`\`xml
-<e-container configuration-id="container-1">
-  <e-heading configuration-id="heading-1" />
-  <e-text configuration-id="text-1" />
-</e-container>
-\`\`\`
+### 4. Get Current Element State
+Use page structure and element configuration resources to find element IDs and current values.
 
-### 5. Create elementConfig
-Map each configuration-id to its widget properties using PropValues:
+### 5. Create propertiesToChange
+Map property names to PropValues using the widget schema:
 - Use correct \`$$type\` matching the widget's schema
 - Use global variables in PropValues where applicable
 - Example:
 \`\`\`json
 {
-  "heading-1": {
-    "text": { "$$type": "string", "value": "Welcome" },
-    "tag": { "$$type": "string", "value": "h1" }
-  }
+  "text": { "$$type": "string", "value": "Welcome" },
+  "tag": { "$$type": "string", "value": "h1" }
 }
 \`\`\`
 
 ### 6. Create style
-Map each configuration-id to raw CSS declarations (property \u2192 value strings). The server converts them to native styles and stores any unconvertible declarations as the element custom CSS.
+Provide raw CSS declarations (property \u2192 value strings). The server converts them to native styles and stores any unconvertible declarations as the element custom CSS.
 - Example:
 \`\`\`json
 {
-  "heading-1": "color: #1a1a1a; font-size: 2rem;"
-  }
+  "color": "#1a1a1a",
+  "font-size": "2rem"
 }
 \`\`\`
 
-### 7. Execute build_composition
-Call the tool with your XML structure, elementConfig, and style. The response will contain the created element IDs.
-At the response you will also find llm_instructions for you to do afterwards, read and follow them!
+### 7. Execute configure-element
+Call the tool with elementId, elementType, propertiesToChange, and style as needed.
 
 ## Key Points
 
@@ -5387,7 +5477,7 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-import { getContainer as getContainer7, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { getContainer as getContainer5, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
 import {
   __privateListenTo as listenTo5,
@@ -5396,7 +5486,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/utils/command-utils.ts
-import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache8 } from "@elementor/editor-elements";
+import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache7 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __5 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
@@ -5421,7 +5511,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache8();
+  const widgetsCache = getWidgetsCache7();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -5441,7 +5531,7 @@ function getTitleForContainers(containers) {
 import {
   createElementStyle as createElementStyle2,
   deleteElementStyle,
-  getElementStyles as getElementStyles3,
+  getElementStyles as getElementStyles2,
   updateElementStyle as updateElementStyle2
 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
@@ -5456,7 +5546,7 @@ var undoablePasteElementStyle = () => undoable2(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = getElementStyles3(container.id);
+        const originalStyles = getElementStyles2(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -5540,7 +5630,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = getContainer7(clipboardElement.id);
+  const clipboardContainer = getContainer5(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -5586,7 +5676,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-import { createElementStyle as createElementStyle3, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles4 } from "@elementor/editor-elements";
+import { createElementStyle as createElementStyle3, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles3 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL as ELEMENTS_STYLES_RESERVED_LABEL2 } from "@elementor/editor-styles-repository";
 import { undoable as undoable3 } from "@elementor/editor-v1-adapters";
 import { __ as __7 } from "@wordpress/i18n";
@@ -5595,7 +5685,7 @@ var undoableResetElementStyle = () => undoable3(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = getElementStyles4(elementId);
+        const containerStyles = getElementStyles3(elementId);
         Object.keys(containerStyles ?? {}).forEach(
           (styleId) => deleteElementStyle2(elementId, styleId)
         );
@@ -5687,15 +5777,15 @@ function init() {
   initCanvasMcp(
     getMCPByDomain("canvas", {
       instructions: `Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- 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
+# Canvas workflow
+- Configure element settings and styles with configure-element
+- Get page structure and element configuration values
 `,
       docs: mcpDescription
     })
   );
   initTabsModelExtensions();
+  initListType();
 }
 
 // src/sync/drag-element-from-panel.ts
@@ -5817,10 +5907,10 @@ function useEscapeOnCanvas(canvasDocument, onEscape) {
 }
 
 // src/utils/after-render.ts
-import { getContainer as getContainer8 } from "@elementor/editor-elements";
+import { getContainer as getContainer6 } from "@elementor/editor-elements";
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = getContainer8(elementId)?.view;
+    const view = getContainer6(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }