@elementor/editor-canvas 4.0.0-manual → 4.0.0

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 var initBreakpointsResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   const getBreakpointsList = () => {
     const { breakpoints } = window.elementor?.config?.responsive || {};
     if (!breakpoints) {
@@ -26,9 +26,16 @@ var initBreakpointsResource = (reg) => {
       }
     ]
   });
-  mcpServer.resource("breakpoints ", BREAKPOINTS_SCHEMA_URI, () => {
-    return buildResourceResponse();
-  });
+  resource(
+    "breakpoints ",
+    BREAKPOINTS_SCHEMA_URI,
+    {
+      description: "Breakpoints list."
+    },
+    () => {
+      return buildResourceResponse();
+    }
+  );
   window.addEventListener(v1ReadyEvent().name, () => {
     sendResourceUpdated({
       uri: BREAKPOINTS_SCHEMA_URI,
@@ -799,14 +806,22 @@ var UnknownStyleStateError = createError({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     const uniqueStyles = styles.filter((style) => {
-      if (seenIds.has(style.id)) {
+      const key = getStyleUniqueKey(style);
+      if (seenKeys.has(key)) {
         return false;
       }
-      seenIds.add(style.id);
+      seenKeys.add(key);
       return true;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -983,7 +998,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
   }
   async function createItems(signal) {
     const allStyles = provider.actions.all();
-    const styles = allStyles.reverse().map((style) => {
+    const styles = [...allStyles].reverse().map((style) => {
       return {
         ...style,
         cssName: provider.actions.resolveCssName(style.id)
@@ -991,7 +1006,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {
@@ -1591,6 +1606,9 @@ var shadowTransformer = createTransformer((value) => {
 
 // src/transformers/styles/size-transformer.ts
 var sizeTransformer = createTransformer((value) => {
+  if (value.unit === "auto") {
+    return "auto";
+  }
   return value.unit === "custom" ? value.size : `${value.size}${value.unit}`;
 });
 
@@ -1974,6 +1992,7 @@ function createTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary
@@ -2008,6 +2027,11 @@ function createTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => super._openEditingPanel(options));
     }
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
+    }
   };
 }
 
@@ -2040,10 +2064,11 @@ function createNestedTemplatedElementType({
 }
 function buildEditorAttributes(model) {
   const id = model.get("id");
+  const originId = model.get("originId");
   const cid = model.cid ?? "";
   const attrs = {
     "data-model-cid": cid,
-    "data-interaction-id": id,
+    "data-interaction-id": originId ?? id,
     "x-ignore": "true"
   };
   return Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
@@ -2077,6 +2102,9 @@ function createNestedTemplatedElementView({
     invalidateRenderCache() {
       this._lastResolvedSettingsHash = null;
     },
+    renderOnChange() {
+      this.render();
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2120,6 +2148,7 @@ function createNestedTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary,
@@ -2249,6 +2278,11 @@ function createNestedTemplatedElementView({
     },
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
+    },
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
     }
   });
 }
@@ -2907,7 +2941,7 @@ function initTabsModelExtensions() {
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
-  const { mcpServer, sendResourceUpdated } = reg;
+  const { resource, sendResourceUpdated } = reg;
   let currentDocumentStructure = null;
   const updateDocumentStructure = () => {
     const structure = getDocumentStructure();
@@ -2929,17 +2963,23 @@ var initDocumentStructureResource = (reg) => {
     updateDocumentStructure
   );
   updateDocumentStructure();
-  mcpServer.resource("document-structure", DOCUMENT_STRUCTURE_URI, async () => {
-    const structure = getDocumentStructure();
-    return {
-      contents: [
-        {
-          uri: DOCUMENT_STRUCTURE_URI,
-          text: JSON.stringify(structure, null, 2)
-        }
-      ]
-    };
-  });
+  resource(
+    "document-structure",
+    DOCUMENT_STRUCTURE_URI,
+    {
+      description: "Document structure."
+    },
+    async () => {
+      return {
+        contents: [
+          {
+            uri: DOCUMENT_STRUCTURE_URI,
+            text: JSON.stringify(getDocumentStructure(), null, 2)
+          }
+        ]
+      };
+    }
+  );
 };
 function getDocumentStructure() {
   const extendedWindow = window;
@@ -2979,6 +3019,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
 import {
   createElement as createElement8,
   deleteElement,
@@ -3409,6 +3450,16 @@ var CompositionBuilder = class _CompositionBuilder {
   }
 };
 
+// src/mcp/utils/get-composition-target-container.ts
+import { COMPONENT_DOCUMENT_TYPE } from "@elementor/editor-documents";
+function getCompositionTargetContainer(documentContainer, documentType) {
+  const firstChild = documentContainer.children?.[0];
+  if (documentType === COMPONENT_DOCUMENT_TYPE && firstChild) {
+    return firstChild;
+  }
+  return documentContainer;
+}
+
 // src/mcp/tools/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
 var generatePrompt = () => {
@@ -3548,7 +3599,7 @@ Note: No height/width specified on any element - flexbox handles layout automati
 };
 
 // src/mcp/tools/build-composition/schema.ts
-import { zod as z } from "@elementor/editor-mcp";
+import { z } from "@elementor/schema";
 var inputSchema = {
   xmlStructure: z.string().describe("The XML structure representing the composition to be built"),
   elementConfig: z.record(
@@ -3604,6 +3655,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const rootContainers = [];
       const documentContainer = getContainer3("document");
+      const currentDocument = getCurrentDocument();
+      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement8,
@@ -3616,7 +3669,7 @@ var initBuildCompositionsTool = (reg) => {
           configErrors,
           invalidStyles,
           rootContainers: generatedRootContainers
-        } = compositionBuilder.build(documentContainer);
+        } = compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
         if (configErrors.length) {
@@ -4000,14 +4053,12 @@ var initGetElementConfigTool = (reg) => {
 var initCanvasMcp = (reg) => {
   const { setMCPDescription } = reg;
   setMCPDescription(
-    `Everything related to creative design, layout, styling and building the pages, specifically element of type "widget".
+    `Everything related to V4 ( Atomic ) canvas.
 # Canvas workflow for new compositions
-- Check existing global variables
-- Check existing global classes
-- Create missing global variables
-- Create reusable global classes
-- Build valid XML with minimal inline styles (layout/positioning only)
-- Apply global classes to elements`
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`
   );
   initWidgetsSchemaResource(reg);
   initDocumentStructureResource(reg);
@@ -4225,18 +4276,7 @@ import {
   commandStartEvent
 } from "@elementor/editor-v1-adapters";
 
-// src/style-commands/undoable-actions/paste-element-style.ts
-import {
-  createElementStyle as createElementStyle2,
-  deleteElementStyle,
-  getElementStyles as getElementStyles3,
-  updateElementStyle as updateElementStyle2
-} from "@elementor/editor-elements";
-import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
-import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
-import { __ as __6 } from "@wordpress/i18n";
-
-// src/style-commands/utils.ts
+// src/utils/command-utils.ts
 import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache8 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __5 } from "@wordpress/i18n";
@@ -4279,6 +4319,15 @@ function getTitleForContainers(containers) {
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
+import {
+  createElementStyle as createElementStyle2,
+  deleteElementStyle,
+  getElementStyles as getElementStyles3,
+  updateElementStyle as updateElementStyle2
+} from "@elementor/editor-elements";
+import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
+import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
+import { __ as __6 } from "@wordpress/i18n";
 var undoablePasteElementStyle = () => undoable2(
   {
     do: ({ containers, newStyle }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.0.0-manual",
+  "version": "4.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-manual",
-    "@elementor/editor-controls": "4.0.0-manual",
-    "@elementor/editor-documents": "4.0.0-manual",
-    "@elementor/editor-elements": "4.0.0-manual",
-    "@elementor/editor-interactions": "4.0.0-manual",
-    "@elementor/editor-mcp": "4.0.0-manual",
-    "@elementor/editor-notifications": "4.0.0-manual",
-    "@elementor/editor-props": "4.0.0-manual",
-    "@elementor/editor-responsive": "4.0.0-manual",
-    "@elementor/editor-styles": "4.0.0-manual",
-    "@elementor/editor-styles-repository": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
-    "@elementor/schema": "4.0.0-manual",
-    "@elementor/twing": "4.0.0-manual",
+    "@elementor/editor": "4.0.0",
+    "@elementor/editor-controls": "4.0.0",
+    "@elementor/editor-documents": "4.0.0",
+    "@elementor/editor-elements": "4.0.0",
+    "@elementor/editor-interactions": "4.0.0",
+    "@elementor/editor-mcp": "4.0.0",
+    "@elementor/editor-notifications": "4.0.0",
+    "@elementor/editor-props": "4.0.0",
+    "@elementor/editor-responsive": "4.0.0",
+    "@elementor/editor-styles": "4.0.0",
+    "@elementor/editor-styles-repository": "4.0.0",
+    "@elementor/editor-ui": "4.0.0",
+    "@elementor/editor-v1-adapters": "4.0.0",
+    "@elementor/schema": "4.0.0",
+    "@elementor/twing": "4.0.0",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-manual",
-    "@elementor/wp-media": "4.0.0-manual",
+    "@elementor/utils": "4.0.0",
+    "@elementor/wp-media": "4.0.0",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/hooks/__tests__/use-style-items.test.ts

@@ -128,6 +128,9 @@ describe( 'useStyleItems', () => {
 
 		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider1, mockProvider2 ] );
 
+		const provider1OriginalOrder = mockProvider1.actions.all().map( ( s ) => s.id );
+		const provider2OriginalOrder = mockProvider2.actions.all().map( ( s ) => s.id );
+
 		let attachPreviewCallback: () => Promise< void >;
 
 		jest.mocked( registerDataHook ).mockImplementation( ( position, command, callback ) => {
@@ -156,6 +159,9 @@ describe( 'useStyleItems', () => {
 			{ id: 'style2', breakpoint: 'desktop' },
 			{ id: 'style1', breakpoint: 'desktop' },
 		] );
+
+		expect( mockProvider1.actions.all().map( ( s ) => s.id ) ).toEqual( provider1OriginalOrder );
+		expect( mockProvider2.actions.all().map( ( s ) => s.id ) ).toEqual( provider2OriginalOrder );
 	} );
 
 	it( 'should return style items ordered by provider priority and breakpoint', async () => {
@@ -283,6 +289,57 @@ describe( 'useStyleItems', () => {
 		expect( result.current ).toHaveLength( 2 );
 	} );
 
+	it( 'should maintain breakpoint order after style update', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [
+			createMockStyleDefinitionWithVariants( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { padding: '10px' }, custom_css: null },
+					{ meta: { breakpoint: 'tablet', state: null }, props: { padding: '8px' }, custom_css: null },
+					{ meta: { breakpoint: 'mobile', state: null }, props: { padding: '5px' }, custom_css: null },
+				],
+			} ),
+		] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		// Act - initial render.
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: 'tablet', state: null },
+				props: { padding: '12px' },
+			} );
+		} );
+
+		// Assert - items should be ordered by breakpoint (desktop, tablet, mobile).
+		const breakpointOrder = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrder ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+
+		// Act - update again (should maintain order).
+		await act( async () => {
+			mockProvider.actions.update?.( { id: 'style1', label: 'Updated' } );
+		} );
+
+		// Assert - order should still be maintained.
+		const breakpointOrderAfterUpdate = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrderAfterUpdate ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+	} );
+
 	it( 'should only re-render changed styles on differential update', async () => {
 		// Arrange.
 		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>

package/src/hooks/use-style-items.ts

@@ -181,7 +181,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 	async function createItems( signal: AbortSignal ) {
 		const allStyles = provider.actions.all();
 
-		const styles = allStyles.reverse().map( ( style ) => {
+		const styles = [ ...allStyles ].reverse().map( ( style ) => {
 			return {
 				...style,
 				cssName: provider.actions.resolveCssName( style.id ),
@@ -191,7 +191,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 		return renderStyles( { styles: breakToBreakpoints( styles ), signal } ).then( ( rendered ) => {
 			rebuildCache( cache, allStyles, rendered );
 
-			return rendered;
+			return getOrderedItems( cache );
 		} );
 	}
 

package/src/index.ts

@@ -2,7 +2,7 @@ export { BREAKPOINTS_SCHEMA_URI } from './mcp/resources/breakpoints-resource';
 export { STYLE_SCHEMA_URI } from './mcp/resources/widgets-schema-resource';
 
 export { init } from './init';
-export { isAtomicWidget } from './style-commands/utils';
+export { isAtomicWidget } from './utils/command-utils';
 
 export {
 	createTemplatedElementView,

package/src/legacy/create-nested-templated-element-type.ts

@@ -61,13 +61,14 @@ export function createNestedTemplatedElementType( {
 	};
 }
 
-function buildEditorAttributes( model: { get: ( key: 'id' ) => string; cid?: string } ): string {
+function buildEditorAttributes( model: ElementView[ 'model' ] ): string {
 	const id = model.get( 'id' );
+	const originId = model.get( 'originId' );
 	const cid = model.cid ?? '';
 
 	const attrs: Record< string, string > = {
 		'data-model-cid': cid,
-		'data-interaction-id': id,
+		'data-interaction-id': originId ?? id,
 		'x-ignore': 'true',
 	};
 
@@ -116,6 +117,10 @@ export function createNestedTemplatedElementView( {
 			this._lastResolvedSettingsHash = null;
 		},
 
+		renderOnChange() {
+			this.render();
+		},
+
 		render() {
 			this._abortController?.abort();
 			this._abortController = new AbortController();
@@ -181,6 +186,7 @@ export function createNestedTemplatedElementView( {
 
 					const context = {
 						id: model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -361,5 +367,12 @@ export function createNestedTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => parentOpenEditingPanel.call( this, options ) );
 		},
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		},
 	} ) as unknown as typeof ElementView;
 }

package/src/legacy/create-templated-element-type.ts

@@ -162,6 +162,7 @@ export function createTemplatedElementView( {
 
 					const context = {
 						id: this.model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -206,5 +207,12 @@ export function createTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => super._openEditingPanel( options ) );
 		}
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		}
 	};
 }

package/src/legacy/types.ts

@@ -203,6 +203,7 @@ type BackboneCollection< Model extends object > = {
 
 export type ElementModel = {
 	id: string;
+	originId?: string;
 	elType: string;
 	settings: BackboneModel< Props >;
 	editor_settings: Record< string, unknown >;
@@ -223,13 +224,14 @@ type ContextMenuGroup = {
 	actions: ContextMenuAction[];
 };
 
+export type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
 export type ContextMenuAction = {
 	name: string;
 	icon: string;
 	title: string | ( () => string );
 	shortcut?: string;
 	isEnabled: () => boolean;
-	callback: ( _: unknown, eventData: unknown ) => void;
+	callback: ( _: unknown, eventData: ContextMenuEventData ) => void;
 };
 
 export type ReplacementSettings = {

package/src/mcp/canvas-mcp.ts

@@ -10,14 +10,12 @@ import { initGetElementConfigTool } from './tools/get-element-config/tool';
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	const { setMCPDescription } = reg;
 	setMCPDescription(
-		`Everything related to creative design, layout, styling and building the pages, specifically element of type "widget".
+		`Everything related to V4 ( Atomic ) canvas.
 # Canvas workflow for new compositions
-- Check existing global variables
-- Check existing global classes
-- Create missing global variables
-- Create reusable global classes
-- Build valid XML with minimal inline styles (layout/positioning only)
-- Apply global classes to elements`
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`
 	);
 	initWidgetsSchemaResource( reg );
 	initDocumentStructureResource( reg );

package/src/mcp/resources/breakpoints-resource.ts

@@ -5,7 +5,7 @@ import { v1ReadyEvent } from '@elementor/editor-v1-adapters';
 export const BREAKPOINTS_SCHEMA_URI = 'elementor://breakpoints/list';
 
 export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	const getBreakpointsList = () => {
 		const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
@@ -34,9 +34,16 @@ export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
 		],
 	} );
 
-	mcpServer.resource( 'breakpoints ', BREAKPOINTS_SCHEMA_URI, () => {
-		return buildResourceResponse();
-	} );
+	resource(
+		'breakpoints ',
+		BREAKPOINTS_SCHEMA_URI,
+		{
+			description: 'Breakpoints list.',
+		},
+		() => {
+			return buildResourceResponse();
+		}
+	);
 
 	window.addEventListener( v1ReadyEvent().name, () => {
 		sendResourceUpdated( {

package/src/mcp/resources/document-structure-resource.ts

@@ -39,7 +39,7 @@ type ElementorContainer = {
 export const DOCUMENT_STRUCTURE_URI = 'elementor://document/structure';
 
 export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	let currentDocumentStructure: string | null = null;
 
@@ -69,18 +69,23 @@ export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
 	// Initialize on load
 	updateDocumentStructure();
 
-	mcpServer.resource( 'document-structure', DOCUMENT_STRUCTURE_URI, async () => {
-		const structure = getDocumentStructure();
-
-		return {
-			contents: [
-				{
-					uri: DOCUMENT_STRUCTURE_URI,
-					text: JSON.stringify( structure, null, 2 ),
-				},
-			],
-		};
-	} );
+	resource(
+		'document-structure',
+		DOCUMENT_STRUCTURE_URI,
+		{
+			description: 'Document structure.',
+		},
+		async () => {
+			return {
+				contents: [
+					{
+						uri: DOCUMENT_STRUCTURE_URI,
+						text: JSON.stringify( getDocumentStructure(), null, 2 ),
+					},
+				],
+			};
+		}
+	);
 };
 
 function getDocumentStructure() {

package/src/mcp/tools/build-composition/schema.ts

@@ -1,4 +1,4 @@
-import { zod as z } from '@elementor/editor-mcp';
+import { z } from '@elementor/schema';
 
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';