@elementor/editor-canvas 4.2.0-beta1 → 4.3.0-1000

package/dist/index.mjs

@@ -2,205 +2,37 @@
 import { v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/mcp/resources/widgets-schema-resource.ts
-import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
 import { ResourceTemplate } from "@elementor/editor-mcp";
-import {
-  Schema
-} from "@elementor/editor-props";
-
-// src/mcp/utils/element-data-util.ts
-import { getWidgetsCache } from "@elementor/editor-elements";
-function hasV3Controls(controls) {
-  return typeof controls === "object" && controls !== null && Object.keys(controls).length > 0;
-}
-function isWidgetAvailableForLLM(config) {
-  if (!config) {
-    return false;
-  }
-  if (config.meta?.llm_support === false) {
-    return false;
-  }
-  if (config.title === "Component") {
-    return false;
-  }
-  if (config.atomic_props_schema) {
-    return true;
-  }
-  return hasV3Controls(config.controls);
-}
-function getWidgetVersion(config) {
-  return config?.atomic_props_schema ? "v4" : "v3";
-}
-function getAvailableWidgets() {
-  const cache = getWidgetsCache() ?? {};
-  return Object.keys(cache).filter((widgetType) => isWidgetAvailableForLLM(cache[widgetType])).sort().map((widgetType) => {
-    const config = cache[widgetType];
-    const description = typeof config?.meta?.description === "string" ? config.meta.description : void 0;
-    return {
-      type: widgetType,
-      version: getWidgetVersion(config),
-      ...description && { description }
-    };
-  });
-}
-
-// src/composition-builder/utils/required-default-child-tags.ts
-function getRequiredDefaultChildTemplates(elementConfig) {
-  const defaultChildren = elementConfig?.default_children;
-  if (!Array.isArray(defaultChildren)) {
-    return [];
-  }
-  return defaultChildren.filter((child) => child?.meta?.required ?? false);
-}
-function getRequiredDefaultChildTypes(elementConfig) {
-  return getRequiredDefaultChildTemplates(elementConfig).map((child) => child.widgetType ?? child.elType ?? "").filter((type) => Boolean(type));
-}
-
-// src/mcp/resources/build-llm-guidance.ts
-var DEFAULT_STYLES_INSTRUCTION = "These are the default styles applied to the widget. Override only when necessary.";
-var DEFAULT_SETTINGS_INSTRUCTION = "These are the default settings applied to the widget. Omit them from elementConfig unless the user explicitly asks to change them.";
-var BASE_SETTING_PROP_HINT = "Has a widget default \u2014 omit unless user explicitly requests a change. See llm_guidance.default_settings.";
-function mergeInstructions(existing, additional) {
-  if (typeof existing === "string" && existing.length > 0) {
-    return `${existing} ${additional}`;
-  }
-  return additional;
-}
-function enrichPropertiesWithBaseSettingsHints(properties, baseSettingsKeys) {
-  if (!baseSettingsKeys.length) {
-    return properties;
-  }
-  const enriched = { ...properties };
-  for (const key of baseSettingsKeys) {
-    const propSchema = enriched[key];
-    if (!propSchema) {
-      continue;
-    }
-    enriched[key] = {
-      ...propSchema,
-      description: propSchema.description ? `${propSchema.description} ${BASE_SETTING_PROP_HINT}` : BASE_SETTING_PROP_HINT
-    };
-  }
-  return enriched;
-}
-function buildLlmGuidance(widgetData, widgetType, allWidgets) {
-  const defaultStyles = {};
-  const baseStyleSchema = widgetData?.base_styles;
-  if (baseStyleSchema) {
-    Object.values(baseStyleSchema).forEach((stylePropType) => {
-      stylePropType.variants.forEach((variant) => {
-        Object.assign(defaultStyles, variant.props);
-      });
-    });
-  }
-  const baseSettings = widgetData?.base_settings ?? {};
-  const hasDefaultStyles = Object.keys(defaultStyles).length > 0;
-  const hasDefaultSettings = Object.keys(baseSettings).length > 0;
-  const llmGuidance = {
-    can_have_children: !!widgetData?.meta?.is_container
-  };
-  if (hasDefaultStyles) {
-    llmGuidance.instructions = DEFAULT_STYLES_INSTRUCTION;
-    llmGuidance.default_styles = defaultStyles;
-  }
-  if (hasDefaultSettings) {
-    llmGuidance.instructions = mergeInstructions(llmGuidance.instructions, DEFAULT_SETTINGS_INSTRUCTION);
-    llmGuidance.default_settings = baseSettings;
-  }
-  const allowedChildTypes = widgetData.allowed_child_types;
-  const allowedParents = Object.entries(allWidgets).filter(([, parentConfig]) => parentConfig.allowed_child_types?.includes(widgetType)).map(([parentType]) => parentType);
-  if (allowedChildTypes?.length || allowedParents.length) {
-    llmGuidance.nesting = {
-      ...allowedChildTypes?.length ? { allowed_child_types: allowedChildTypes } : {},
-      ...allowedParents.length ? { allowed_parents: allowedParents } : {}
-    };
-  }
-  const requiredDirectChildTags = getRequiredDefaultChildTypes(widgetData);
-  if (requiredDirectChildTags.length) {
-    llmGuidance.required_direct_children = requiredDirectChildTags;
-  }
-  return llmGuidance;
-}
-
-// src/mcp/resources/widgets-schema-resource.ts
-var V3_LAYOUT_CONTROL_TYPES = /* @__PURE__ */ new Set(["section", "tab", "tabs"]);
-function extractV3ControlsMetadata(controls) {
-  if (!hasV3Controls(controls)) {
-    return {};
-  }
-  const result = {};
-  for (const [controlKey, raw] of Object.entries(controls)) {
-    if (!raw || typeof raw !== "object") {
-      continue;
-    }
-    const control = raw;
-    const controlType = typeof control.type === "string" ? control.type : void 0;
-    if (controlType && V3_LAYOUT_CONTROL_TYPES.has(controlType)) {
-      continue;
-    }
-    const entry = {};
-    if (Object.prototype.hasOwnProperty.call(control, "default")) {
-      entry.default = control.default;
-    }
-    if (controlType) {
-      entry.type = controlType;
-    }
-    if (Object.prototype.hasOwnProperty.call(control, "options") && control.options !== void 0) {
-      const options = control.options;
-      if (options && typeof options === "object" && !Array.isArray(options)) {
-        entry.options = Object.keys(options);
-      } else {
-        entry.options = options;
-      }
-    }
-    result[controlKey] = entry;
-  }
-  return result;
-}
+import { httpService } from "@elementor/http-client";
 var CANVAS_SERVER_NAME = "editor-canvas";
 var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
 var WIDGET_SCHEMA_FULL_URI = `${CANVAS_SERVER_NAME}_${WIDGET_SCHEMA_URI}`;
-var BEST_PRACTICES_URI = "elementor://styles/best-practices";
+var BEST_PRACTICES_URI = "elementor://style/best-practices";
 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: {}
+  });
+  return (data.data ?? []).map((widget) => widget.type);
+};
+var fetchWidgetSchema = async (widgetType) => {
+  const { data } = await httpService().post(MCP_PROXY_URL, {
+    tool: "get-widget-schema",
+    input: { widget_type: widgetType }
+  });
+  return data.data ?? {};
+};
 var initWidgetsSchemaResource = (reg) => {
   const { resource } = reg;
-  resource(
-    "styles-best-practices",
-    BEST_PRACTICES_URI,
-    {
-      description: "Styling best practices"
-    },
-    async () => {
-      return {
-        contents: [
-          {
-            uri: BEST_PRACTICES_URI,
-            text: `# Styling best practices
-Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
-This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
-
-Styling is provided as raw CSS. The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
-
-** CRITICAL - VARIABLES **
-When using global variables, ensure that the variables are defined in the ${"elementor://global-variables"} resource.
-Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
-
-`
-          }
-        ]
-      };
-    }
-  );
   resource(
     "widget-schema-by-type",
     new ResourceTemplate(WIDGET_SCHEMA_URI, {
-      list: () => {
-        const cache = getWidgetsCache2() || {};
-        const availableWidgets = Object.keys(cache).filter(
-          (widgetType) => isWidgetAvailableForLLM(cache[widgetType])
-        );
+      list: async () => {
+        const widgetTypes = await listWidgetTypes();
         return {
-          resources: availableWidgets.map((widgetType) => ({
+          resources: widgetTypes.map((widgetType) => ({
             uri: `elementor://widgets/schema/${widgetType}`,
             name: "Widget schema for " + widgetType
           }))
@@ -212,52 +44,16 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
     },
     async (uri, variables) => {
       const widgetType = typeof variables.widgetType === "string" ? variables.widgetType : variables.widgetType?.[0];
-      const widgetData = getWidgetsCache2()?.[widgetType];
-      if (!widgetData) {
-        throw new Error(`No prop schema found for element type: ${widgetType}`);
-      }
-      const propSchema = widgetData.atomic_props_schema;
-      if (!propSchema) {
-        if (!hasV3Controls(widgetData.controls)) {
-          throw new Error(`No prop schema found for element type: ${widgetType}`);
-        }
-        const controlMetadata = extractV3ControlsMetadata(widgetData.controls);
-        return {
-          contents: [
-            {
-              uri: uri.toString(),
-              mimeType: "application/json",
-              text: JSON.stringify({
-                widget_version: "v3",
-                message: "This widget exists in the editor but has no atomic props schema (V4). Use control_metadata as non-authoritative hints from legacy controls.",
-                fields_note: "All settings are optional; there is no JSON schema for this widget type.",
-                properties: controlMetadata
-              })
-            }
-          ]
-        };
+      if (!widgetType) {
+        throw new Error("No widget type provided.");
       }
-      const baseSettingsKeys = Object.keys(widgetData?.base_settings ?? {});
-      const asJson = enrichPropertiesWithBaseSettingsHints(
-        Object.fromEntries(
-          Object.entries(propSchema).filter(([key, propType]) => Schema.isPropKeyConfigurable(key, propType)).map(([key, propType]) => [key, Schema.propTypeToJsonSchema(propType)])
-        ),
-        baseSettingsKeys
-      );
-      const description = typeof widgetData?.meta?.description === "string" ? widgetData.meta.description : void 0;
-      const allWidgets = getWidgetsCache2() || {};
-      const llmGuidance = buildLlmGuidance(widgetData, widgetType, allWidgets);
+      const schema2 = await fetchWidgetSchema(widgetType);
       return {
         contents: [
           {
             uri: uri.toString(),
             mimeType: "application/json",
-            text: JSON.stringify({
-              type: "object",
-              properties: asJson,
-              description,
-              llm_guidance: llmGuidance
-            })
+            text: JSON.stringify(schema2)
           }
         ]
       };
@@ -312,11 +108,11 @@ var initBreakpointsResource = (reg) => {
 };
 
 // src/mcp/utils/convert-css-to-atomic.ts
-import { httpService } from "@elementor/http-client";
+import { httpService as httpService2 } from "@elementor/http-client";
 var CSS_TO_ATOMIC_URL = "elementor/v1/css-to-atomic";
 var SINGLE_BLOCK_KEY = "default";
 var convertBlocks = async (blocks) => {
-  const { data } = await httpService().post(
+  const { data } = await httpService2().post(
     CSS_TO_ATOMIC_URL,
     { blocks }
   );
@@ -460,8 +256,8 @@ function toGridTracks(computedStyle) {
   return {
     columns: parseTrackList(computedStyle.gridTemplateColumns),
     rows: parseTrackList(computedStyle.gridTemplateRows),
-    columnGap: toPx(computedStyle.columnGap),
-    rowGap: toPx(computedStyle.rowGap),
+    columnGap: resolveGapPx(computedStyle.columnGap, computedStyle.width),
+    rowGap: resolveGapPx(computedStyle.rowGap, computedStyle.height),
     padding: {
       top: toPx(computedStyle.paddingTop),
       right: toPx(computedStyle.paddingRight),
@@ -536,6 +332,14 @@ function toPx(value) {
   const parsed = parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
 }
+function resolveGapPx(value, referenceSize) {
+  if (value.trim().endsWith("%")) {
+    const percent = parseFloat(value);
+    const reference = parseFloat(referenceSize);
+    return Number.isFinite(percent) && Number.isFinite(reference) ? percent / 100 * reference : 0;
+  }
+  return toPx(value);
+}
 
 // src/hooks/use-grid-children.ts
 import { useEffect as useEffect3, useState as useState2 } from "react";
@@ -807,8 +611,7 @@ var GridEmptyCellPositioner = ({ element }) => {
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 import * as React6 from "react";
-import { useSelectedElementSettings } from "@elementor/editor-elements";
-import { booleanPropTypeUtil } from "@elementor/editor-props";
+import { useElementEditorSettings } from "@elementor/editor-elements";
 import { Box as Box2 } from "@elementor/ui";
 import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
 
@@ -909,6 +712,16 @@ var useHasOverlapping = () => {
   return hasOverlapping;
 };
 
+// src/utils/outline-offset-utils.ts
+var THIN_ELEMENT_MAX_HEIGHT_PX = 1;
+var SMALLER_OUTLINE_OFFSET_WIDGET_TYPES = /* @__PURE__ */ new Set(["e-form-input"]);
+function shouldUseSmallerOutlineOffset(element, widgetType) {
+  if (element.offsetHeight <= THIN_ELEMENT_MAX_HEIGHT_PX) {
+    return true;
+  }
+  return widgetType !== void 0 && SMALLER_OUTLINE_OFFSET_WIDGET_TYPES.has(widgetType);
+}
+
 // src/components/outline-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = styled(Box, {
@@ -920,12 +733,18 @@ var OverlayBox = styled(Box, {
     pointerEvents: "none"
   })
 );
-var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
+var OutlineOverlay = ({
+  element,
+  isSelected,
+  id,
+  isGlobal = false,
+  widgetType
+}) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
   const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
-  const isSmallerOffset = element.offsetHeight <= 1;
+  const isSmallerOffset = shouldUseSmallerOutlineOffset(element, widgetType);
   return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
@@ -1081,8 +900,8 @@ function GridOutline({ element, tracks, width, height }) {
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 var GridOutlineOverlay = ({ element, id, isSelected }) => {
-  const { settings } = useSelectedElementSettings();
-  const enabled = booleanPropTypeUtil.extract(settings?.grid_outline);
+  const settings = useElementEditorSettings(id);
+  const enabled = settings?.grid_outline;
   const rect = useElementRect(element);
   const tracks = useGridTracks(element, rect);
   const { floating } = useFloatingOnElement({ element, isSelected });
@@ -1105,9 +924,10 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
 };
 
 // src/components/elements-overlays.tsx
+var hasGridStyleDisplay = (element) => {
+  return element.computedStyleMap().get("display")?.toString() === "grid";
+};
 var ELEMENTS_DATA_ATTR = "atomic";
-var E_GRID_TYPE = "e-grid";
-var isGridElement = (element) => [element.dataset.eType, element.dataset.element_type].includes(E_GRID_TYPE);
 var overlayRegistry = [
   {
     component: OutlineOverlay,
@@ -1115,11 +935,11 @@ var overlayRegistry = [
   },
   {
     component: GridEmptyCellPositioner,
-    shouldRender: ({ element }) => isGridElement(element)
+    shouldRender: ({ element }) => hasGridStyleDisplay(element)
   },
   {
     component: GridOutlineOverlay,
-    shouldRender: ({ element, isSelected }) => isSelected && isGridElement(element)
+    shouldRender: ({ isSelected, element }) => isSelected && hasGridStyleDisplay(element)
   }
 ];
 function ElementsOverlays() {
@@ -1132,17 +952,18 @@ function ElementsOverlays() {
   if (!isActive) {
     return null;
   }
-  return elements.map(({ id, domElement, isGlobal }) => {
+  return elements.map(({ id, domElement, isGlobal, widgetType }) => {
     const isSelected = selected.element?.id === id;
     return overlayRegistry.map(
-      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React7.createElement(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected, widgetType }) && /* @__PURE__ */ React7.createElement(
         Overlay,
         {
           key: `${id}-${index}`,
           id,
           element: domElement,
           isSelected,
-          isGlobal
+          isGlobal,
+          widgetType
         }
       )
     );
@@ -1155,7 +976,8 @@ function useElementsDom() {
       return getElements().filter((el) => isV4Element(el.view?.el?.dataset)).map((element) => ({
         id: element.id,
         domElement: element.view?.getDomElement?.()?.get?.(0),
-        isGlobal: element.model.get("isGlobal") ?? false
+        isGlobal: element.model.get("isGlobal") ?? false,
+        widgetType: element.model.get("widgetType")
       })).filter((item) => !!item.domElement);
     }
   );
@@ -2010,7 +1832,8 @@ function blockFormFieldCreate(args) {
   if (!elementType || !FORM_FIELD_ELEMENT_TYPES.has(elementType)) {
     return false;
   }
-  if (!isWithinForm(args.container)) {
+  const containers = args.containers ?? [args.container];
+  if (containers.some((container) => !isWithinForm(container))) {
     handleBlockedFormField();
     return true;
   }
@@ -2018,10 +1841,10 @@ function blockFormFieldCreate(args) {
 }
 function blockFormFieldMove(args) {
   const { containers = [args.container], target } = args;
-  const hasFormFieldElement = containers.some(
-    (container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
+  const hasLooseFormFields = containers.some(
+    (container) => container ? !hasElementType(container, FORM_ELEMENT_TYPE) && hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
   );
-  if (hasFormFieldElement && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
+  if (hasLooseFormFields && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
     handleBlockedFormField();
     return true;
   }
@@ -2692,7 +2515,7 @@ function initStyleTransformers() {
 }
 
 // src/legacy/init-legacy-views.ts
-import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
+import { getWidgetsCache } from "@elementor/editor-elements";
 import { __privateIsReady as isV1Ready, __privateListenTo, v1ReadyEvent as v1ReadyEvent2 } from "@elementor/editor-v1-adapters";
 
 // src/renderers/create-dom-renderer.ts
@@ -4008,7 +3831,7 @@ function registerElementType(type, elementTypeGenerator) {
 }
 function initLegacyViews() {
   __privateListenTo(v1ReadyEvent2(), () => {
-    const widgetsCache = getWidgetsCache3() ?? {};
+    const widgetsCache = getWidgetsCache() ?? {};
     const renderer = createDomRenderer();
     registerProPromotionTypes(widgetsCache);
     Object.keys(widgetsCache).forEach((type) => {
@@ -4017,7 +3840,7 @@ function initLegacyViews() {
   });
 }
 function registerElementInLegacyManager(type, renderer) {
-  const element = (getWidgetsCache3() ?? {})[type];
+  const element = (getWidgetsCache() ?? {})[type];
   if (!element?.atomic) {
     return;
   }
@@ -4099,43 +3922,41 @@ function initTabsModelExtensions() {
 }
 
 // src/mcp/canvas-mcp.ts
-import { Schema as Schema6 } from "@elementor/editor-props";
+import { Schema as Schema4 } from "@elementor/editor-props";
 
 // src/mcp/resources/available-widgets-resource.ts
-import { v1ReadyEvent as v1ReadyEvent3 } from "@elementor/editor-v1-adapters";
+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 initAvailableWidgetsResource = (reg) => {
-  const { resource, sendResourceUpdated } = reg;
-  const buildContents = (uri, filterFunction = () => true) => {
-    const widgets = getAvailableWidgets().filter(filterFunction);
-    return {
-      contents: [
-        {
-          uri,
-          mimeType: "application/json",
-          text: JSON.stringify(widgets, null, 2)
-        }
-      ]
-    };
-  };
-  const notifyResourcesUpdated = () => {
-    sendResourceUpdated({
-      uri: AVAILABLE_WIDGETS_URI,
-      ...buildContents(AVAILABLE_WIDGETS_URI)
-    });
-    sendResourceUpdated({
-      uri: AVAILABLE_WIDGETS_URI_V4,
-      ...buildContents(AVAILABLE_WIDGETS_URI_V4, (w) => w.version === "v4")
-    });
+var fetchWidgets = async (version) => {
+  const { data } = await httpService3().post(MCP_PROXY_URL2, {
+    tool: "list-widgets",
+    input: version ? { version } : {}
+  });
+  return data.data ?? [];
+};
+var buildContents = async (uri, version) => {
+  const widgets = await fetchWidgets(version);
+  return {
+    contents: [
+      {
+        uri,
+        mimeType: "application/json",
+        text: JSON.stringify(widgets, null, 2)
+      }
+    ]
   };
+};
+var initAvailableWidgetsResource = (reg) => {
+  const { resource } = reg;
   resource(
     "available-widgets-v4",
     AVAILABLE_WIDGETS_URI_V4,
     {
       description: "All registered v4 version widgets"
     },
-    async () => buildContents(AVAILABLE_WIDGETS_URI_V4, (w) => w.version === "v4")
+    async () => buildContents(AVAILABLE_WIDGETS_URI_V4, "v4")
   );
   resource(
     "available-widgets",
@@ -4145,22 +3966,41 @@ var initAvailableWidgetsResource = (reg) => {
     },
     async () => buildContents(AVAILABLE_WIDGETS_URI)
   );
-  const eventName = v1ReadyEvent3().name;
-  const onV1Ready = () => {
-    const widgets = getAvailableWidgets();
-    if (widgets.length === 0) {
-      return;
+};
+
+// src/mcp/resources/best-practices-resource.ts
+import { httpService as httpService4 } from "@elementor/http-client";
+var MCP_PROXY_URL3 = "elementor/v1/mcp-proxy";
+var BEST_PRACTICES_URI2 = "elementor://style/best-practices";
+var initBestPracticesResource = (reg) => {
+  const { resource } = reg;
+  resource(
+    "style-best-practices",
+    BEST_PRACTICES_URI2,
+    {
+      description: "Design quality guidelines for avoiding generic AI output: typography, color strategy, spacing, motion, and visual hierarchy best practices.",
+      mimeType: "text/markdown"
+    },
+    async (uri) => {
+      const { data } = await httpService4().get(MCP_PROXY_URL3, {
+        params: { uri: uri.href }
+      });
+      return {
+        contents: [
+          {
+            uri: uri.href,
+            mimeType: "text/markdown",
+            text: data.data
+          }
+        ]
+      };
     }
-    window.removeEventListener(eventName, onV1Ready);
-    notifyResourcesUpdated();
-  };
-  window.addEventListener(eventName, onV1Ready);
-  onV1Ready();
+  );
 };
 
 // src/mcp/resources/document-structure-resource.ts
 import {
-  getWidgetsCache as getWidgetsCache4
+  getWidgetsCache as getWidgetsCache2
 } from "@elementor/editor-elements";
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
@@ -4226,7 +4066,7 @@ function resolveElementVersion(element) {
     return "v4";
   }
   const widgetType = element.model?.attributes?.widgetType;
-  if (widgetType && getWidgetsCache4()?.[widgetType]?.atomic_props_schema) {
+  if (widgetType && getWidgetsCache2()?.[widgetType]?.atomic_props_schema) {
     return "v4";
   }
   return "v3";
@@ -4253,84 +4093,15 @@ function extractElementData(element) {
 }
 
 // src/mcp/resources/dynamic-tags-resource.ts
-import { Schema as Schema2 } from "@elementor/editor-props";
-
-// src/mcp/utils/resolve-dynamic-tag.ts
-import { getElementorConfig } from "@elementor/editor-v1-adapters";
-var DYNAMIC_PROP_TYPE_KEY = "dynamic";
-var OMITTED_DYNAMIC_SETTING_KEYS = ["fallback"];
-var getAtomicDynamicTags = () => {
-  const config = getElementorConfig();
-  return config.atomicDynamicTags?.tags ?? {};
-};
-var getDynamicTagNamesByCategories = (categories) => {
-  if (!categories.length) {
-    return [];
-  }
-  const wanted = new Set(categories);
-  return Object.values(getAtomicDynamicTags()).filter((tag) => tag.categories?.some((category) => wanted.has(category))).map((tag) => tag.name);
-};
-var dynamicTagLLMResolver = (value) => {
-  const input = value ?? {};
-  const tag = input.name ? getAtomicDynamicTags()[input.name] : void 0;
-  if (!tag) {
-    return {
-      $$type: DYNAMIC_PROP_TYPE_KEY,
-      value: { name: input.name ?? "", group: "", settings: {} }
-    };
-  }
-  return {
-    $$type: DYNAMIC_PROP_TYPE_KEY,
-    value: {
-      name: tag.name,
-      group: tag.group,
-      settings: buildStrictSettings(tag.props_schema ?? {}, input.settings ?? {})
-    }
-  };
-};
-var buildStrictSettings = (schema2, provided) => {
-  const settings = {};
-  for (const [key, propType] of Object.entries(schema2)) {
-    if (OMITTED_DYNAMIC_SETTING_KEYS.includes(key)) {
-      continue;
-    }
-    const resolved = provided[key] !== void 0 ? wrapSettingValue(provided[key], propType) : defaultSettingValue(propType);
-    if (resolved !== void 0 && resolved !== null) {
-      settings[key] = resolved;
-    }
-  }
-  return settings;
-};
-var wrapSettingValue = (raw, propType) => {
-  if (raw !== null && typeof raw === "object") {
-    return raw;
-  }
-  return propType.key ? { $$type: propType.key, value: raw } : raw;
-};
-var defaultSettingValue = (propType) => {
-  if (propType.initial_value !== null && propType.initial_value !== void 0) {
-    return propType.initial_value;
-  }
-  if (propType.default !== null && propType.default !== void 0) {
-    return wrapSettingValue(propType.default, propType);
-  }
-  return void 0;
-};
-
-// src/mcp/resources/dynamic-tags-resource.ts
+import { httpService as httpService5 } from "@elementor/http-client";
 var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
-var settingsSchema = (propsSchema) => {
-  return Object.fromEntries(
-    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, Schema2.propTypeToJsonSchema(propType)])
-  );
-};
-var buildDynamicTagsList = () => {
-  return Object.values(getAtomicDynamicTags()).map((tag) => ({
-    name: tag.name,
-    label: tag.label,
-    categories: tag.categories,
-    settings: settingsSchema(tag.props_schema)
-  }));
+var MCP_PROXY_URL4 = "elementor/v1/mcp-proxy";
+var fetchDynamicTags = async () => {
+  const { data } = await httpService5().post(MCP_PROXY_URL4, {
+    tool: "list-dynamic-tags",
+    input: {}
+  });
+  return data.data ?? [];
 };
 var initDynamicTagsResource = (reg) => {
   const { resource } = reg;
@@ -4341,15 +4112,18 @@ var initDynamicTagsResource = (reg) => {
       description: `List of available dynamic tags. To bind a property to a dynamic source, set its value to { "$$type": "dynamic", "value": { "name": <tag name>, "settings": { ... } } } using a tag whose name appears in that property's allowed list, and populate "settings" per the tag entry here.`,
       mimeType: "application/json"
     },
-    async (uri) => ({
-      contents: [
-        {
-          uri: uri.href,
-          mimeType: "application/json",
-          text: JSON.stringify(buildDynamicTagsList())
-        }
-      ]
-    })
+    async (uri) => {
+      const tags = await fetchDynamicTags();
+      return {
+        contents: [
+          {
+            uri: uri.href,
+            mimeType: "application/json",
+            text: JSON.stringify(tags)
+          }
+        ]
+      };
+    }
   );
 };
 
@@ -4523,7 +4297,7 @@ var initGeneralContextResource = (reg) => {
 };
 
 // src/mcp/resources/selected-element-resource.ts
-import { getContainer as getContainer3, getSelectedElements, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
+import { getContainer as getContainer3, getSelectedElements, getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import {
   __privateListenTo as listenTo4,
   commandEndEvent as commandEndEvent7
@@ -4624,7 +4398,7 @@ function resolveElementVersion2(container, widgetType) {
   if (container.model?.config?.atomic) {
     return "v4";
   }
-  if (widgetType && getWidgetsCache5()?.[widgetType]?.atomic_props_schema) {
+  if (widgetType && getWidgetsCache3()?.[widgetType]?.atomic_props_schema) {
     return "v4";
   }
   return "v3";
@@ -4634,7 +4408,7 @@ function getElementProperties(container, widgetType) {
   if (!settings || typeof settings !== "object") {
     return null;
   }
-  const widgetConfig = widgetType ? getWidgetsCache5()?.[widgetType] : null;
+  const widgetConfig = widgetType ? getWidgetsCache3()?.[widgetType] : null;
   const controls = widgetConfig?.controls;
   const filtered = {};
   for (const [key, value] of Object.entries(settings)) {
@@ -4672,33 +4446,110 @@ function getElementDisplayName(container) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
-import { getCurrentDocument } from "@elementor/editor-documents";
-import {
-  createElement as createElement13,
-  deleteElement as deleteElement2,
-  getContainer as getContainer5,
-  getWidgetsCache as getWidgetsCache9
-} from "@elementor/editor-elements";
-import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
+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/composition-builder/composition-builder.ts
-import {
-  createElement as createElement12,
-  deleteElement,
-  generateElementId as generateElementId2,
-  getContainer as getContainer4,
-  getWidgetsCache as getWidgetsCache8
-} from "@elementor/editor-elements";
+// src/mcp/tools/configure-element/tool.ts
+import { getContainer as getContainer5, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
+import { Schema as Schema2 } from "@elementor/editor-props";
 
 // src/mcp/utils/do-update-element-property.ts
 import {
   createElementStyle,
   getElementStyles,
-  getWidgetsCache as getWidgetsCache7,
+  getWidgetsCache as getWidgetsCache5,
   updateElementSettings,
   updateElementStyle
 } from "@elementor/editor-elements";
-import { getPropSchemaFromCache as getPropSchemaFromCache2, Schema as Schema3 } from "@elementor/editor-props";
+import { getPropSchemaFromCache as getPropSchemaFromCache2, Schema } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema2, getVariantByMeta } from "@elementor/editor-styles";
 import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
 
@@ -4717,7 +4568,7 @@ var readStoredCustomCssText = (raw) => {
 };
 
 // src/mcp/utils/resolve-canonical-prop-name.ts
-import { getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+import { getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
 function buildAliasToCanonicalMap(schema2) {
   const aliasToCanonical = {};
   for (const [canonical, propType] of Object.entries(schema2)) {
@@ -4734,14 +4585,14 @@ function buildAliasToCanonicalMap(schema2) {
   return aliasToCanonical;
 }
 function resolveCanonicalPropName(elementType, propertyName) {
-  const schema2 = getWidgetsCache6()?.[elementType]?.atomic_props_schema;
+  const schema2 = getWidgetsCache4()?.[elementType]?.atomic_props_schema;
   if (!schema2 || schema2[propertyName]) {
     return propertyName;
   }
   return buildAliasToCanonicalMap(schema2)[propertyName] ?? propertyName;
 }
 function resolveCanonicalPropKeys(elementType, props) {
-  const schema2 = getWidgetsCache6()?.[elementType]?.atomic_props_schema;
+  const schema2 = getWidgetsCache4()?.[elementType]?.atomic_props_schema;
   if (!schema2) {
     return { ...props };
   }
@@ -4768,6 +4619,68 @@ function resolveCanonicalPropKeys(elementType, props) {
   return resolved;
 }
 
+// src/mcp/utils/resolve-dynamic-tag.ts
+import { getElementorConfig } from "@elementor/editor-v1-adapters";
+var DYNAMIC_PROP_TYPE_KEY = "dynamic";
+var OMITTED_DYNAMIC_SETTING_KEYS = ["fallback"];
+var getAtomicDynamicTags = () => {
+  const config = getElementorConfig();
+  return config.atomicDynamicTags?.tags ?? {};
+};
+var getDynamicTagNamesByCategories = (categories) => {
+  if (!categories.length) {
+    return [];
+  }
+  const wanted = new Set(categories);
+  return Object.values(getAtomicDynamicTags()).filter((tag) => tag.categories?.some((category) => wanted.has(category))).map((tag) => tag.name);
+};
+var dynamicTagLLMResolver = (value) => {
+  const input = value ?? {};
+  const tag = input.name ? getAtomicDynamicTags()[input.name] : void 0;
+  if (!tag) {
+    return {
+      $$type: DYNAMIC_PROP_TYPE_KEY,
+      value: { name: input.name ?? "", group: "", settings: {} }
+    };
+  }
+  return {
+    $$type: DYNAMIC_PROP_TYPE_KEY,
+    value: {
+      name: tag.name,
+      group: tag.group,
+      settings: buildStrictSettings(tag.props_schema ?? {}, input.settings ?? {})
+    }
+  };
+};
+var buildStrictSettings = (schema2, provided) => {
+  const settings = {};
+  for (const [key, propType] of Object.entries(schema2)) {
+    if (OMITTED_DYNAMIC_SETTING_KEYS.includes(key)) {
+      continue;
+    }
+    const resolved = provided[key] !== void 0 ? wrapSettingValue(provided[key], propType) : defaultSettingValue(propType);
+    if (resolved !== void 0 && resolved !== null) {
+      settings[key] = resolved;
+    }
+  }
+  return settings;
+};
+var wrapSettingValue = (raw, propType) => {
+  if (raw !== null && typeof raw === "object") {
+    return raw;
+  }
+  return propType.key ? { $$type: propType.key, value: raw } : raw;
+};
+var defaultSettingValue = (propType) => {
+  if (propType.initial_value !== null && propType.initial_value !== void 0) {
+    return propType.initial_value;
+  }
+  if (propType.default !== null && propType.default !== void 0) {
+    return wrapSettingValue(propType.default, propType);
+  }
+  return void 0;
+};
+
 // src/mcp/utils/do-update-element-property.ts
 var LOCAL_STYLE_META = {
   breakpoint: "desktop",
@@ -4775,7 +4688,7 @@ var LOCAL_STYLE_META = {
 };
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return Schema3.adjustLlmPropValueSchema(value, {
+  return Schema.adjustLlmPropValueSchema(value, {
     forceKey,
     transformers: {
       ...Utils.globalVariablesLLMResolvers,
@@ -4873,7 +4786,7 @@ var doUpdateElementProperty = (params) => {
     }
     return;
   }
-  const elementPropSchema = getWidgetsCache7()?.[elementType]?.atomic_props_schema;
+  const elementPropSchema = getWidgetsCache5()?.[elementType]?.atomic_props_schema;
   if (!elementPropSchema) {
     throw new Error(`No prop schema found for element type: ${elementType}`);
   }
@@ -4887,7 +4800,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = Schema3.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -4906,739 +4819,11 @@ Expected Schema: ${jsonSchema}`
   runCommandSync2("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
-// src/composition-builder/utils/required-children-enforcer.ts
-var REQUIRED_CHILD_SCHEMA_HINT = "Use the widget schema resource; under llm_guidance.required_direct_children for V4 widgets.";
-var RequiredChildrenEnforcer = class {
-  elementType;
-  requiredTemplates;
-  constructor(elementType, widgetsCache) {
-    this.elementType = elementType;
-    this.requiredTemplates = getRequiredDefaultChildTemplates(widgetsCache[elementType]);
-  }
-  enforce(xml) {
-    if (this.requiredTemplates.length === 0) {
-      return;
-    }
-    const errors = [];
-    for (const rootNode of Array.from(xml.children)) {
-      this.collectMissingRequiredErrors(rootNode, errors);
-    }
-    if (errors.length) {
-      throw new Error(`${errors.join("\n")}
-${REQUIRED_CHILD_SCHEMA_HINT}`);
-    }
-  }
-  collectMissingRequiredErrors(node, errors) {
-    if (node.tagName === this.elementType) {
-      const existingChildTags = new Set(Array.from(node.children).map((child) => child.tagName));
-      const missingTags = this.requiredTemplates.map((child) => child.widgetType ?? child.elType ?? "").filter((type) => type && !existingChildTags.has(type));
-      if (missingTags.length) {
-        const configurationId = node.getAttribute("configuration-id");
-        const location2 = configurationId ? `<${node.tagName} configuration-id="${configurationId}">` : `<${node.tagName}>`;
-        errors.push(
-          `${location2} Missing required direct child element tag(s): ${missingTags.join(", ")}.`
-        );
-      }
-    }
-    for (const childNode of Array.from(node.children)) {
-      this.collectMissingRequiredErrors(childNode, errors);
-    }
-  }
-};
-
-// src/composition-builder/composition-builder.ts
-var CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE = "createElement did not return an element container with a model.";
-var CompositionBuilder = class _CompositionBuilder {
-  elementConfig = {};
-  elementStylesConfig = {};
-  elementCustomCSS = {};
-  rootContainers = [];
-  api = {
-    createElement: createElement12,
-    deleteElement,
-    getWidgetsCache: getWidgetsCache8,
-    generateElementId: generateElementId2,
-    getContainer: getContainer4,
-    doUpdateElementProperty
-  };
-  xml;
-  static fromXMLString(xmlString, api = {}) {
-    const parser = new DOMParser();
-    const xmlDoc = parser.parseFromString(xmlString, "application/xml");
-    const errorNode = xmlDoc.querySelector("parsererror");
-    if (errorNode) {
-      throw new Error("Failed to parse XML string: " + errorNode.textContent);
-    }
-    return new _CompositionBuilder({
-      xml: xmlDoc,
-      api
-    });
-  }
-  constructor(opts) {
-    const { api = {}, elementConfig = {}, stylesConfig = {}, customCSS = {}, xml } = opts;
-    this.xml = xml;
-    Object.assign(this.api, api);
-    this.setElementConfig(elementConfig);
-    this.setStylesConfig(stylesConfig);
-    this.setCustomCSS(customCSS);
-  }
-  setElementConfig(config) {
-    this.elementConfig = config;
-  }
-  setStylesConfig(config) {
-    this.elementStylesConfig = config;
-  }
-  setCustomCSS(config) {
-    this.elementCustomCSS = config;
-  }
-  getXML() {
-    return this.xml;
-  }
-  buildModelTree(node, widgetsCache) {
-    const elementTag = node.tagName;
-    const isWidget = widgetsCache[elementTag]?.elType === "widget";
-    const id = this.api.generateElementId();
-    const children = Array.from(node.children).map((child) => this.buildModelTree(child, widgetsCache));
-    node.setAttribute("id", id);
-    const base = {
-      id,
-      skipDefaultChildren: true,
-      elements: children,
-      editor_settings: {
-        title: node.getAttribute("configuration-id") ?? void 0
-      },
-      elType: "widget"
-    };
-    if (isWidget) {
-      return { ...base, elType: "widget", widgetType: elementTag };
-    }
-    return { ...base, elType: elementTag };
-  }
-  async awaitViewRender(element) {
-    const view = element.view;
-    if (view?._currentRenderPromise instanceof Promise) {
-      await view._currentRenderPromise;
-    } else {
-      await Promise.resolve();
-    }
-  }
-  validateChildTypes(node, widgetsCache) {
-    const errors = [];
-    const allowedChildTypes = widgetsCache[node.tagName]?.allowed_child_types;
-    if (allowedChildTypes?.length) {
-      for (const child of Array.from(node.children)) {
-        if (!allowedChildTypes.includes(child.tagName)) {
-          errors.push(
-            `"${child.tagName}" is not allowed as a child of "${node.tagName}". Allowed: ${allowedChildTypes.join(", ")}`
-          );
-        }
-      }
-    }
-    for (const child of Array.from(node.children)) {
-      errors.push(...this.validateChildTypes(child, widgetsCache));
-    }
-    return errors;
-  }
-  matchNodeByConfigId(configId) {
-    const node = this.xml.querySelector(`[configuration-id="${configId}"]`);
-    if (!node) {
-      throw new Error(`Configuration id "${configId}" does not have target node.`);
-    }
-    const id = node.getAttribute("id");
-    if (!id) {
-      throw new Error(`Node with configuration id "${configId}" does not have element id.`);
-    }
-    const element = this.api.getContainer(id);
-    if (!element) {
-      throw new Error(`Element with id "${id}" not found but should exist.`);
-    }
-    return {
-      element,
-      node
-    };
-  }
-  async applyProperties() {
-    const configErrors = [];
-    const styleErrors = [];
-    const allConfigIds = /* @__PURE__ */ new Set([
-      ...Object.keys(this.elementConfig),
-      ...Object.keys(this.elementStylesConfig),
-      ...Object.keys(this.elementCustomCSS)
-    ]);
-    for (const configId of allConfigIds) {
-      let element, node;
-      try {
-        ({ element, node } = this.matchNodeByConfigId(configId));
-      } catch (matchErr) {
-        const msg = matchErr.message;
-        if (this.elementConfig[configId]) {
-          configErrors.push(msg);
-        }
-        if (this.elementStylesConfig[configId] || this.elementCustomCSS[configId]) {
-          styleErrors.push(msg);
-        }
-        continue;
-      }
-      const config = this.elementConfig[configId];
-      if (config) {
-        for (const [propertyName, propertyValue] of Object.entries(config)) {
-          try {
-            this.api.doUpdateElementProperty({
-              elementId: element.id,
-              propertyName,
-              propertyValue,
-              elementType: node.tagName
-            });
-          } catch (error) {
-            configErrors.push(error.message);
-          }
-        }
-      }
-      const styleConfig = this.elementStylesConfig[configId];
-      const hasInvalidStyles = false;
-      if (styleConfig) {
-        const validStylesPropValues = {};
-        for (const [styleName, stylePropValue] of Object.entries(styleConfig)) {
-          if (styleName === "$intention") {
-            continue;
-          } else {
-            validStylesPropValues[styleName] = stylePropValue;
-          }
-        }
-        if (Object.keys(validStylesPropValues).length > 0) {
-          try {
-            this.api.doUpdateElementProperty({
-              elementId: element.id,
-              propertyName: "_styles",
-              propertyValue: validStylesPropValues,
-              elementType: node.tagName
-            });
-          } catch (error) {
-            styleErrors.push(String(error));
-          }
-        }
-      }
-      const intentionCss = typeof styleConfig?.$intention === "string" ? styleConfig.$intention.trim() : "";
-      const fallbackCss = hasInvalidStyles && intentionCss ? intentionCss : "";
-      const mergedCustomCss = mergeCustomCssText(this.elementCustomCSS[configId], fallbackCss);
-      if (mergedCustomCss) {
-        try {
-          this.api.doUpdateElementProperty({
-            elementId: element.id,
-            propertyName: "_styles",
-            propertyValue: { custom_css: mergedCustomCss },
-            elementType: node.tagName
-          });
-        } catch (cssErr) {
-          styleErrors.push(String(cssErr));
-        }
-      }
-      await this.awaitViewRender(element);
-    }
-    return { configErrors, styleErrors };
-  }
-  async build(rootContainer) {
-    const widgetsCache = this.api.getWidgetsCache() || {};
-    new Set(this.xml.querySelectorAll("*")).forEach((node) => {
-      if (!widgetsCache[node.tagName]) {
-        throw new Error(`Unknown widget type: ${node.tagName}`);
-      }
-    });
-    const typesWithRequiredChildren = Object.keys(widgetsCache).filter(
-      (elementType) => getRequiredDefaultChildTemplates(widgetsCache[elementType]).length > 0
-    );
-    typesWithRequiredChildren.forEach((elementType) => {
-      new RequiredChildrenEnforcer(elementType, widgetsCache).enforce(this.xml);
-    });
-    const childTypeErrors = [];
-    for (const rootChild of Array.from(this.xml.children)) {
-      childTypeErrors.push(...this.validateChildTypes(rootChild, widgetsCache));
-    }
-    if (childTypeErrors.length) {
-      throw new Error(`Invalid element structure:
-${childTypeErrors.join("\n")}`);
-    }
-    const children = Array.from(this.xml.children);
-    for (const childNode of children) {
-      const modelTree = this.buildModelTree(childNode, widgetsCache);
-      try {
-        const newElement = this.api.createElement({
-          container: rootContainer,
-          model: modelTree,
-          options: { useHistory: false }
-        });
-        if (!newElement?.model) {
-          throw new Error(CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE);
-        }
-        this.rootContainers.push(newElement);
-        await this.awaitViewRender(newElement);
-      } catch (e) {
-        const attempToRestoreInvalidContainer = this.api.getContainer(modelTree.id);
-        if (attempToRestoreInvalidContainer) {
-          this.api.deleteElement({ container: attempToRestoreInvalidContainer });
-        }
-        throw e;
-      }
-    }
-    const { configErrors, styleErrors } = await this.applyProperties();
-    if (typeof window !== "undefined") {
-      const targetWindow = window.top || window;
-      targetWindow.dispatchEvent(
-        new CustomEvent("elementor/composition/built", {
-          detail: { rootContainers: this.rootContainers.map((c) => c.id) }
-        })
-      );
-    }
-    return {
-      configErrors,
-      styleErrors,
-      rootContainers: [...this.rootContainers]
-    };
-  }
-};
-
-// src/utils/tracking.ts
-import { trackEvent } from "@elementor/events";
-var trackCanvasEvent = (data) => {
-  trackEvent(data);
-};
-
-// 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 BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
-var generatePrompt = () => {
-  const buildCompositionsToolPrompt = toolPrompts("build-compositions");
-  buildCompositionsToolPrompt.description(`
-# RESOURCES (Read before use)
-- [elementor://global-classes] - Check FIRST for reusable classes
-- [elementor://global-variables] - ONLY use variables defined here
-- [${AVAILABLE_WIDGETS_URI}/v4]
-
-# TOOL SUPPORT
-This tool support v4 elements only
-
-# WORKFLOW
-1. Check/create global classes via "manage-global-classes" tool
-2. Build composition (THIS TOOL) - minimal inline styles
-3. Apply classes via "apply-global-class" tool
-
-# XML STRUCTURE
-- Use widget tags: \`<e-button configuration-id="btn1"></e-button>\`
-- Containers: "e-flexbox", "e-div-block", "e-tabs"
-- Every element needs unique "configuration-id"
-- No attributes, classes, IDs, or text nodes in XML
-
-## NESTED ELEMENTS
-Some elements have internal tree structures (nesting). When using these elements, you MUST build the FULL tree in XML.
-- Check \`llm_guidance.nesting\` in widget schemas for structure requirements
-- \`llm_guidance.required_direct_children\` lists element types that must appear as direct child tags in XML (from widget defaults)
-- \`allowed_child_types\` lists which element types can be nested inside
-- \`allowed_parents\` lists which element types this element can be placed inside
-
-# CONFIGURATION
-- Map configuration-id \u2192 elementConfig (props) + style (raw CSS declarations)
-- elementConfig PropValues require \`$$type\` matching schema
-- style is raw CSS (property \u2192 value strings); the server converts it to native styles and stores any unconvertible declarations as the element custom CSS
-- NO LINKS in configuration
-- Retry on errors up to 10x
-- Check \`llm_guidance.default_settings\` in widget schemas \u2014 omit only keys listed there from elementConfig unless the user explicitly asks to change them
-
-# DYNAMIC TAGS
-- A value can be made dynamic wherever its schema exposes a \`"$$type": "dynamic"\` variant. This may be the property root OR a NESTED field (e.g. an image's \`src\`, not the whole \`image\`).
-- Put the dynamic object EXACTLY at that node, in place of the static variant. The variant's \`name\` lists the allowed tags; read [${DYNAMIC_TAGS_URI}] for each tag's settings schema.
-- Provide at that node: \`{ "$$type": "dynamic", "value": { "name": "<allowed tag>", "settings": { ... } } }\`
-- Example (image): \`{ "$$type": "image", "value": { "src": { "$$type": "dynamic", "value": { "name": "<image tag>", "settings": { ... } } } } }\`
-- Do NOT send \`group\` (it is resolved automatically). Populate \`settings\` strictly per the tag's schema; use \`{}\` only when it has none.
-
-Note about configuration ids: These names are visible to the end-user, make sure they make sense, related and relevant.
-
-# DESIGN PHILOSOPHY: CONTEXT-DRIVEN CREATIVITY
-
-**Use the user's context aggressively.** Business type, brand personality, target audience, and purpose should drive every design decision. A law firm needs gravitas; a children's app needs playfulness. Don't default to generic.
-
-## SIZING: DEFAULT IS NO SIZE (CRITICAL)
-
-**DO NOT specify height or width unless you have a specific visual reason.**
-
-Flexbox and CSS already handle sizing automatically:
-- Containers grow to fit their content
-- Flex children distribute space via flex properties, not width/height
-- Text elements size to their content
-
-WHEN TO SPECIFY SIZE:
-- min-height on ROOT section for viewport-spanning hero (use min-height, NOT height)
-- max-width for contained content areas (e.g., max-width: 60rem)
-- Explicit aspect ratios for media containers
-
-NEVER SPECIFY:
-- height on nested containers (causes overflow)
-- width on flex children (use flex-basis or gap instead)
-- 100vh on anything except root-level sections
-- Any size "just to be safe" - if unsure, OMIT IT
-
-vh units are VIEWPORT-relative. Nested 100vh inside 100vh = 200vh overflow.
-
-GOOD: \`<e-flexbox>content naturally sizes</e-flexbox>\`
-BAD: \`<e-flexbox style="height:100vh"><e-div-block style="height:100vh">overflow</e-div-block></e-flexbox>\`
-
-## Layout Variety (Break the Template)
-- AVOID: Full-width 100vh hero \u2192 three columns \u2192 testimonials \u2192 CTA (every AI does this)
-- VARY heights: Use auto-height sections with generous padding (6rem+). Let content breathe
-- VARY widths: Not everything spans full width. Use contained sections (max-width: 960px) mixed with edge-to-edge
-- ASYMMETRIC grids: 2:1, 1:3, offset layouts. Avoid equal column widths
-- Negative space as design element: Large margins create focus and sophistication
-- Break alignment intentionally: Offset headings, overlapping elements, broken grids
-
-## Visual Depth & Effects
-- Layer elements: Overlapping cards, text over images, floating elements
-- Subtle shadows with color tint (not pure black): \`box-shadow: 0 20px 60px rgba(<brand-color-here>, 0.15)\`
-- Gradient overlays on images for text readability
-- Border radius variation: Mix sharp (0) and soft (1rem+) corners purposefully
-- Backdrop blur for glassmorphism where appropriate
-- Micro-interactions via CSS: hover transforms, transitions (0.3s ease)
-
-## Typography with Character
-- Display fonts for headlines (from user's brand or contextually appropriate)
-- Size contrast: 4rem+ headlines vs 1rem body. Make hierarchy unmistakable
-- Letter-spacing: Tight for large headlines (-0.02em), loose for small caps (0.1em)
-- Line-height: Tight for headlines (1.1), generous for body (1.6-1.8)
-- Text decoration: Underlines, highlights, gradient text for emphasis
-
-## Color with Purpose
-- Extract palette from user context (brand colors, industry norms, mood)
-- 60-30-10 rule: dominant, secondary, accent
-- Tinted neutrals over pure grays: warm (#faf8f5, #2d2a26) or cool (#f5f7fa, #1e2430)
-- Color blocking: Large colored sections create visual rhythm
-- Gradient directions: Diagonal (135deg, 225deg) feel more dynamic than vertical
-
-## Spacing Strategy
-- Section padding: 6rem-10rem vertical, creating breathing room
-- Rhythm variation: Tight groups (2rem) with generous gaps between (6rem)
-- Use rem/em exclusively for responsive scaling
-- Generous padding on CTAs: min 1rem 2.5rem
-
-# HARD CONSTRAINTS
-- Variables ONLY from [elementor://global-variables] (others throw errors)
-- Avoid SVG widgets unless assets are pre-uploaded
-- Check \`llm_guidance\` in widget schemas (\`default_styles\`, nesting, required children)
-
-# PARAMETERS
-- **xmlStructure**: Valid XML with configuration-id attributes
-- **elementConfig**: configuration-id \u2192 widget PropValues
-- **style**: configuration-id \u2192 raw CSS declarations (property \u2192 value strings; no selectors)
-  `);
-  buildCompositionsToolPrompt.example(`
-Section with heading + button (NO explicit heights - content sizes naturally):
-{
-  xmlStructure: "<e-flexbox configuration-id="Main Section"><e-heading configuration-id="Section Title"></e-heading><e-button configuration-id="Call to Action"></e-button></e-flexbox>",
-  elementConfig: {
-    "section1": { "tag": { "$$type": "string", "value": "section" } }
-  },
-  style: {
-    "Section Title": {
-      "padding": "6rem 4rem",
-      "background": "linear-gradient(135deg, #faf8f5 0%, #f0ebe4 100%)",
-      "font-size": "3.5rem",
-      "color": "#2d2a26"
-    }
-  }
-}
-Note: No height/width specified on any element - flexbox handles layout automatically.
-`);
-  buildCompositionsToolPrompt.parameter(
-    "xmlStructure",
-    `Valid XML structure with custom elementor tags and configuration-id attributes.`
-  );
-  buildCompositionsToolPrompt.parameter("elementConfig", `Record mapping configuration IDs to widget PropValues.`);
-  buildCompositionsToolPrompt.parameter(
-    "style",
-    `Record mapping configuration IDs to raw CSS declarations (property \u2192 value strings).`
-  );
-  buildCompositionsToolPrompt.instruction(
-    `Element IDs in the returned XML represent actual widgets. Use these IDs for subsequent styling or configuration changes.`
-  );
-  return buildCompositionsToolPrompt.prompt();
-};
-
-// src/mcp/tools/build-composition/schema.ts
-import { z } from "@elementor/schema";
-var inputSchema = {
-  xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
-  elementConfig: z.record(
-    z.string().describe("The configuration id"),
-    z.record(
-      z.string().describe("property name"),
-      z.any().describe(`The PropValue for the property, refer to ${WIDGET_SCHEMA_URI}`)
-    )
-  ).describe("A record mapping element IDs to their configuration objects. REQUIRED"),
-  style: z.record(
-    z.string().describe("The configuration id"),
-    z.record(
-      z.string().describe('A CSS property name, e.g. "color", "padding".'),
-      z.string().describe('A CSS value, e.g. "6rem 4rem", "#2d2a26".')
-    )
-  ).describe(
-    "A record mapping element configuration IDs to their raw CSS declarations (property\u2192value). Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS."
-  ).default({})
-};
-var outputSchema = {
-  errors: z.string().describe("Error message if the composition building failed").optional(),
-  xmlStructure: z.string().describe(
-    "The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs."
-  ).optional(),
-  llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
-};
-
-// src/mcp/tools/build-composition/xml-leaf-wrapper.ts
-var DIV_BLOCK_TAG = "e-div-block";
-var ZERO_SPACING = {
-  $$type: "size",
-  value: {
-    size: {
-      $$type: "number",
-      value: 0
-    },
-    unit: {
-      $$type: "string",
-      value: "px"
-    }
-  }
-};
-function adaptLeafRootParams(params) {
-  const doc = new DOMParser().parseFromString(params.xmlStructure, "application/xml");
-  const rootElement = doc.documentElement;
-  if (!isLeafWidget(rootElement.tagName, params.widgetsCache)) {
-    return params;
-  }
-  const wrapperConfigId = getDivBlockWrapperConfigId(params.widgetsCache);
-  return {
-    ...params,
-    xmlStructure: serializeWrapped(doc, rootElement, wrapperConfigId),
-    stylesConfig: {
-      ...params.stylesConfig,
-      [wrapperConfigId]: {
-        margin: ZERO_SPACING,
-        padding: ZERO_SPACING,
-        ...params.stylesConfig[wrapperConfigId]
-      }
-    }
-  };
-}
-function getDivBlockWrapperConfigId(widgetsCache) {
-  return widgetsCache[DIV_BLOCK_TAG]?.title ?? DIV_BLOCK_TAG;
-}
-function isLeafWidget(tagName, widgetsCache) {
-  return widgetsCache[tagName]?.elType === "widget";
-}
-function serializeWrapped(doc, rootElement, wrapperConfigId) {
-  const wrapper = doc.createElement(DIV_BLOCK_TAG);
-  wrapper.setAttribute("configuration-id", wrapperConfigId);
-  wrapper.appendChild(rootElement.cloneNode(true));
-  const wrappedDoc = new DOMParser().parseFromString(`<${DIV_BLOCK_TAG} />`, "application/xml");
-  wrappedDoc.replaceChild(wrapper, wrappedDoc.documentElement);
-  return new XMLSerializer().serializeToString(wrappedDoc);
-}
-
-// src/mcp/tools/build-composition/tool.ts
-var ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
-var initBuildCompositionsTool = (reg) => {
-  const { addTool, resource } = reg;
-  resource(
-    "build-compositions-guide",
-    BUILD_COMPOSITIONS_GUIDE_URI,
-    {
-      title: "Build Compositions Guide",
-      description: "Detailed guide for using the build-compositions tool",
-      mimeType: "text/plain"
-    },
-    async (uri) => ({
-      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
-    })
-  );
-  addTool({
-    name: "build-compositions",
-    description: "Build V4 element compositions on the Elementor canvas. Read the guide resource before use.",
-    schema: inputSchema,
-    requiredResources: [
-      { description: "Build compositions guide", uri: BUILD_COMPOSITIONS_GUIDE_URI },
-      { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Global Classes", uri: "elementor://global-classes" },
-      { description: "Global Variables", uri: "elementor://global-variables" },
-      { description: "Styles best practices", uri: BEST_PRACTICES_URI },
-      { description: "Available widgets for this tool", uri: AVAILABLE_WIDGETS_URI_V4 },
-      { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
-    ],
-    outputSchema,
-    handler: async (rawParams) => {
-      assertCompositionXmlUsesV4WidgetsOnly(rawParams.xmlStructure);
-      const { stylesConfig: convertedStyles, customCSS } = await convertCompositionStyles(rawParams.style);
-      const { xmlStructure, elementConfig, stylesConfig } = adaptLeafRootParams({
-        ...rawParams,
-        stylesConfig: convertedStyles,
-        widgetsCache: getWidgetsCache9() ?? {}
-      });
-      let generatedXML = "";
-      const errors = [];
-      const rootContainers = [];
-      const documentContainer = getContainer5("document");
-      const currentDocument = getCurrentDocument();
-      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
-      try {
-        const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: createElement13,
-          deleteElement: deleteElement2,
-          getWidgetsCache: getWidgetsCache9
-        });
-        compositionBuilder.setElementConfig(elementConfig);
-        compositionBuilder.setStylesConfig(stylesConfig);
-        compositionBuilder.setCustomCSS(customCSS);
-        const { configErrors, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
-        rootContainers.push(...generatedRootContainers);
-        generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        rootContainers.forEach((container) => {
-          const elementData = container.model?.toJSON();
-          if (elementData) {
-            onElementAdded(elementData);
-          }
-        });
-        Object.values(stylesConfig).forEach((styleValue) => {
-          dispatchMcpStylesAppliedEvent({ styleValue });
-        });
-        if (configErrors.length) {
-          errors.push(...configErrors.map((msg) => new Error(msg)));
-        }
-      } catch (error) {
-        errors.push(error);
-      }
-      if (errors.length) {
-        rootContainers.forEach((rootContainer) => {
-          deleteElement2({
-            container: rootContainer,
-            options: { useHistory: false }
-          });
-        });
-        const errorMessages = errors.map((e) => {
-          if (typeof e === "string") {
-            return e;
-          }
-          if (e instanceof Error) {
-            return e.message || String(e);
-          }
-          if (typeof e === "object" && e !== null) {
-            return JSON.stringify(e);
-          }
-          return String(e);
-        }).filter(
-          (msg) => msg && msg.trim() !== "" && msg !== "{}" && msg !== "null" && msg !== "undefined"
-        );
-        if (errorMessages.length === 0) {
-          throw new Error(
-            "Failed to build composition: Unknown error occurred. No error details available."
-          );
-        }
-        const errorText = `Failed to build composition with the following errors:
-
-${errorMessages.join(
-          "\n\n"
-        )}`;
-        throw new Error(errorText);
-      }
-      return {
-        xmlStructure: generatedXML,
-        errors: errors?.length ? errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n") : void 0,
-        llm_instructions: `The composition was built successfully with element IDs embedded in the XML.
-
-**CRITICAL NEXT STEPS** (Follow in order):
-1. **Apply Global Classes**: Use "apply-global-class" tool to apply the global classes you created BEFORE building this composition
-   - Check the created element IDs in the returned XML
-   - Apply semantic classes (heading-primary, button-cta, etc.) to appropriate elements
-
-2. **Fine-tune if needed**: Use "configure-element" tool only for element-specific adjustments that don't warrant global classes
-
-Remember: Global classes ensure design consistency and reusability. Don't skip applying them!
-`
-      };
-    }
-  });
-};
-async function convertCompositionStyles(style) {
-  const stylesConfig = {};
-  const customCSS = {};
-  if (!style || Object.keys(style).length === 0) {
-    return { stylesConfig, customCSS };
-  }
-  const results = await convertStyleBlocksToAtomic(style);
-  for (const [configId, { props, customCss }] of Object.entries(results)) {
-    stylesConfig[configId] = props;
-    if (customCss) {
-      customCSS[configId] = customCss;
-    }
-  }
-  return { stylesConfig, customCSS };
-}
-function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
-  const doc = new DOMParser().parseFromString(xmlStructure, "application/xml");
-  if (doc.querySelector("parsererror")) {
-    throw new Error("Failed to parse XML string: " + doc);
-  }
-  const widgetsCache = getWidgetsCache9() ?? {};
-  for (const node of doc.querySelectorAll("*")) {
-    const type = node.tagName;
-    const widgetData = widgetsCache[type];
-    if (!widgetData) {
-      continue;
-    }
-    if (widgetData.elType !== "widget") {
-      continue;
-    }
-    if (!isWidgetAvailableForLLM(widgetData) || !widgetData.atomic_props_schema) {
-      throw new Error(`This tool does not support element type: ${type}`);
-    }
-  }
-}
-function onElementAdded(element) {
-  const elType = element.elType ?? "";
-  const widgetType = element.widgetType ?? "";
-  const elementName = elType === "widget" ? widgetType : elType;
-  trackCanvasEvent({
-    eventName: "add_element",
-    executed_by: "mcp_tool",
-    element_name: elementName,
-    element_type: elType,
-    widget_type: widgetType
-  });
-  const event = {
-    element,
-    executedBy: "mcp_tool"
-  };
-  window.dispatchEvent(new CustomEvent(ELEMENT_ADDED_EVENT, { detail: event }));
-  if (element.elements?.length) {
-    element.elements?.forEach((childElement) => {
-      onElementAdded(childElement);
-    });
-  }
-}
-
-// src/mcp/tools/configure-element/tool.ts
-import { getContainer as getContainer6, getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
-import { dispatchMcpStylesAppliedEvent as dispatchMcpStylesAppliedEvent2 } from "@elementor/editor-mcp";
-import { Schema as Schema4 } from "@elementor/editor-props";
-
 // src/mcp/tools/configure-element/prompt.ts
-import { toolPrompts as toolPrompts2 } from "@elementor/editor-mcp";
+import { toolPrompts } from "@elementor/editor-mcp";
 var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
-var generatePrompt2 = () => {
-  const configureElementToolPrompt = toolPrompts2("configure-element");
+var generatePrompt = () => {
+  const configureElementToolPrompt = toolPrompts("configure-element");
   configureElementToolPrompt.description(`
 Configure an existing element on the page.
 
@@ -5746,11 +4931,11 @@ NO Advanced tab. Never mention Advanced tab.
 `);
   return configureElementToolPrompt.prompt();
 };
-var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();
+var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt();
 
 // src/mcp/tools/configure-element/schema.ts
 import { z as z2 } from "@elementor/schema";
-var inputSchema2 = {
+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`),
@@ -5767,7 +4952,7 @@ var inputSchema2 = {
   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")
 };
-var outputSchema2 = {
+var outputSchema = {
   success: z2.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
@@ -5785,27 +4970,27 @@ var initConfigureElementTool = (reg) => {
       mimeType: "text/plain"
     },
     async (uri) => ({
-      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt2() }]
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
     })
   );
   addTool({
     name: "configure-element",
     description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
-    schema: inputSchema2,
-    outputSchema: outputSchema2,
+    schema: inputSchema,
+    outputSchema,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI },
       { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
     handler: async ({ elementId, propertiesToChange, elementType, style }) => {
-      const widgetData = getWidgetsCache10()?.[elementType];
+      const widgetData = getWidgetsCache6()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
         );
       }
-      const container = getContainer6(elementId);
+      const container = getContainer5(elementId);
       if (!container) {
         throw new Error(`Element with id ${elementId} not found`);
       }
@@ -5821,7 +5006,7 @@ var initConfigureElementTool = (reg) => {
       const propertiesToUpdate = resolveCanonicalPropKeys(elementType, propertiesToChange);
       const toUpdate = Object.entries(propertiesToUpdate);
       for (const [propertyName, propertyValue] of toUpdate) {
-        if (!Schema4.isPropKeyConfigurable(propertyName)) {
+        if (!Schema2.isPropKeyConfigurable(propertyName)) {
           throw new Error(`Not allowed to update ${propertyName}`);
         }
         try {
@@ -5870,7 +5055,7 @@ async function applyStyleFromCss(opts) {
       propertyValue: styleValue,
       customCssWriteMode: "merge-with-stored"
     });
-    dispatchMcpStylesAppliedEvent2({ styleValue });
+    dispatchMcpStylesAppliedEvent({ styleValue });
   } catch (error) {
     throw new Error(
       createUpdateErrorMessage({
@@ -5897,13 +5082,13 @@ 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 getContainer7, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache11 } from "@elementor/editor-elements";
-import { Schema as Schema5 } from "@elementor/editor-props";
+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 outputSchema3 = {
+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(
@@ -5930,14 +5115,14 @@ var initGetElementConfigTool = (reg) => {
     name: "get-element-configuration-values",
     description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
     schema,
-    outputSchema: outputSchema3,
+    outputSchema: outputSchema2,
     handler: async ({ elementId }) => {
-      const element = getContainer7(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 = getWidgetsCache11()?.[elementType];
+      const widgetData = getWidgetsCache7()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -5949,13 +5134,13 @@ var initGetElementConfigTool = (reg) => {
         );
       }
       const elementRawSettings = element.settings;
-      const propSchema = getWidgetsCache11()?.[elementType]?.atomic_props_schema;
+      const propSchema = getWidgetsCache7()?.[elementType]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
       const propValues = {};
       const stylePropValues = {};
-      Schema5.configurableKeys(propSchema).forEach((key) => {
+      Schema3.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
       const elementStyles = getElementStyles2(elementId) || {};
@@ -5991,7 +5176,7 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  Schema6.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
+  Schema4.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -5999,9 +5184,10 @@ var initCanvasMcp = (reg) => {
   initSelectedElementResource(reg);
   initEditorStateResource(reg);
   initGeneralContextResource(reg);
-  initBuildCompositionsTool(reg);
+  initBestPracticesResource(reg);
   initGetElementConfigTool(reg);
   initConfigureElementTool(reg);
+  initBuildCompositionTool(reg);
   initBreakpointsResource(reg);
 };
 
@@ -6201,7 +5387,7 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-import { getContainer as getContainer8, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { getContainer as getContainer7, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
 import {
   __privateListenTo as listenTo5,
@@ -6210,7 +5396,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/utils/command-utils.ts
-import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache12 } from "@elementor/editor-elements";
+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";
 function hasAtomicWidgets(args) {
@@ -6235,7 +5421,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache12();
+  const widgetsCache = getWidgetsCache8();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -6354,7 +5540,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = getContainer8(clipboardElement.id);
+  const clipboardContainer = getContainer7(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -6631,10 +5817,10 @@ function useEscapeOnCanvas(canvasDocument, onEscape) {
 }
 
 // src/utils/after-render.ts
-import { getContainer as getContainer9 } from "@elementor/editor-elements";
+import { getContainer as getContainer8 } from "@elementor/editor-elements";
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = getContainer9(elementId)?.view;
+    const view = getContainer8(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }
@@ -6649,6 +5835,9 @@ function doAfterRender(elementIds, callback) {
 function hasDoAfterRender(view) {
   return typeof view?._doAfterRender === "function";
 }
+
+// src/sync/element-added-event.ts
+var ELEMENT_ADDED_EVENT = "elementor/canvas/element-added";
 export {
   BREAKPOINTS_SCHEMA_FULL_URI,
   BREAKPOINTS_SCHEMA_URI,