@elementor/editor-canvas 4.3.0-973 → 4.3.0-975

package/dist/index.js

@@ -227,37 +227,10 @@ function extractV3ControlsMetadata(controls) {
 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 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 import_editor_mcp.ResourceTemplate(WIDGET_SCHEMA_URI, {
@@ -4195,6 +4168,36 @@ var initAvailableWidgetsResource = (reg) => {
   onV1Ready();
 };
 
+// src/mcp/resources/best-practices-resource.ts
+var import_http_client2 = require("@elementor/http-client");
+var MCP_PROXY_URL = "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 (0, import_http_client2.httpService)().get(MCP_PROXY_URL, {
+        params: { uri: uri.href }
+      });
+      return {
+        contents: [
+          {
+            uri: uri.href,
+            mimeType: "text/markdown",
+            text: data.data
+          }
+        ]
+      };
+    }
+  );
+};
+
 // src/mcp/resources/document-structure-resource.ts
 var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_v1_adapters16 = require("@elementor/editor-v1-adapters");
@@ -5913,9 +5916,9 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 
 // src/mcp/tools/create-element/tool.ts
 var import_editor_documents4 = require("@elementor/editor-documents");
-var import_http_client2 = require("@elementor/http-client");
+var import_http_client3 = require("@elementor/http-client");
 var import_schema5 = require("@elementor/schema");
-var MCP_PROXY_URL = "elementor/v1/mcp-proxy";
+var MCP_PROXY_URL2 = "elementor/v1/mcp-proxy";
 var initCreateElementTool = (reg) => {
   const { addTool } = reg;
   addTool({
@@ -5935,7 +5938,7 @@ var initCreateElementTool = (reg) => {
       if (!document2?.id) {
         throw new Error("No active document found.");
       }
-      const { data } = await (0, import_http_client2.httpService)().post(MCP_PROXY_URL, {
+      const { data } = await (0, import_http_client3.httpService)().post(MCP_PROXY_URL2, {
         tool: "create-element",
         input: {
           parent_id: parentId ?? "document",
@@ -6055,6 +6058,7 @@ var initCanvasMcp = (reg) => {
   initSelectedElementResource(reg);
   initEditorStateResource(reg);
   initGeneralContextResource(reg);
+  initBestPracticesResource(reg);
   initBuildCompositionsTool(reg);
   initGetElementConfigTool(reg);
   initConfigureElementTool(reg);

package/dist/index.mjs

@@ -160,37 +160,10 @@ function extractV3ControlsMetadata(controls) {
 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 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, {
@@ -4158,6 +4131,36 @@ var initAvailableWidgetsResource = (reg) => {
   onV1Ready();
 };
 
+// src/mcp/resources/best-practices-resource.ts
+import { httpService as httpService2 } from "@elementor/http-client";
+var MCP_PROXY_URL = "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 httpService2().get(MCP_PROXY_URL, {
+        params: { uri: uri.href }
+      });
+      return {
+        contents: [
+          {
+            uri: uri.href,
+            mimeType: "text/markdown",
+            text: data.data
+          }
+        ]
+      };
+    }
+  );
+};
+
 // src/mcp/resources/document-structure-resource.ts
 import {
   getWidgetsCache as getWidgetsCache4
@@ -5898,9 +5901,9 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 
 // src/mcp/tools/create-element/tool.ts
 import { getCurrentDocument as getCurrentDocument2 } from "@elementor/editor-documents";
-import { httpService as httpService2 } from "@elementor/http-client";
+import { httpService as httpService3 } from "@elementor/http-client";
 import { z as z3 } from "@elementor/schema";
-var MCP_PROXY_URL = "elementor/v1/mcp-proxy";
+var MCP_PROXY_URL2 = "elementor/v1/mcp-proxy";
 var initCreateElementTool = (reg) => {
   const { addTool } = reg;
   addTool({
@@ -5920,7 +5923,7 @@ var initCreateElementTool = (reg) => {
       if (!document2?.id) {
         throw new Error("No active document found.");
       }
-      const { data } = await httpService2().post(MCP_PROXY_URL, {
+      const { data } = await httpService3().post(MCP_PROXY_URL2, {
         tool: "create-element",
         input: {
           parent_id: parentId ?? "document",
@@ -6040,6 +6043,7 @@ var initCanvasMcp = (reg) => {
   initSelectedElementResource(reg);
   initEditorStateResource(reg);
   initGeneralContextResource(reg);
+  initBestPracticesResource(reg);
   initBuildCompositionsTool(reg);
   initGetElementConfigTool(reg);
   initConfigureElementTool(reg);

package/package.json

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

package/src/mcp/canvas-mcp.ts

@@ -2,6 +2,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { Schema } from '@elementor/editor-props';
 
 import { initAvailableWidgetsResource } from './resources/available-widgets-resource';
+import { initBestPracticesResource } from './resources/best-practices-resource';
 import { initBreakpointsResource } from './resources/breakpoints-resource';
 import { initDocumentStructureResource } from './resources/document-structure-resource';
 import { initDynamicTagsResource } from './resources/dynamic-tags-resource';
@@ -27,6 +28,7 @@ export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	initSelectedElementResource( reg );
 	initEditorStateResource( reg );
 	initGeneralContextResource( reg );
+	initBestPracticesResource( reg );
 	initBuildCompositionsTool( reg );
 	initGetElementConfigTool( reg );
 	initConfigureElementTool( reg );

package/src/mcp/resources/best-practices-resource.ts

@@ -0,0 +1,34 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type HttpResponse, httpService } from '@elementor/http-client';
+
+const MCP_PROXY_URL = 'elementor/v1/mcp-proxy';
+export const BEST_PRACTICES_URI = 'elementor://style/best-practices';
+
+export const initBestPracticesResource = ( reg: MCPRegistryEntry ) => {
+	const { resource } = reg;
+
+	resource(
+		'style-best-practices',
+		BEST_PRACTICES_URI,
+		{
+			description:
+				'Design quality guidelines for avoiding generic AI output: typography, color strategy, spacing, motion, and visual hierarchy best practices.',
+			mimeType: 'text/markdown',
+		},
+		async ( uri: URL ) => {
+			const { data } = await httpService().get< HttpResponse< string > >( MCP_PROXY_URL, {
+				params: { uri: uri.href },
+			} );
+
+			return {
+				contents: [
+					{
+						uri: uri.href,
+						mimeType: 'text/markdown',
+						text: data.data,
+					},
+				],
+			};
+		}
+	);
+};

package/src/mcp/resources/widgets-schema-resource.ts

@@ -59,40 +59,12 @@ export const CANVAS_SERVER_NAME = 'editor-canvas';
 export const WIDGET_SCHEMA_URI = 'elementor://widgets/schema/{widgetType}';
 export const WIDGET_SCHEMA_FULL_URI = `${ CANVAS_SERVER_NAME }_${ WIDGET_SCHEMA_URI }`;
 export const STYLE_SCHEMA_URI = 'elementor://styles/schema/{category}';
-export const BEST_PRACTICES_URI = 'elementor://styles/best-practices';
+export const BEST_PRACTICES_URI = 'elementor://style/best-practices';
 export const BEST_PRACTICES_FULL_URI = `${ CANVAS_SERVER_NAME }_${ BEST_PRACTICES_URI }`;
 
 export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
 	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, {

package/src/mcp/resources/best-practices.ts

@@ -1,159 +0,0 @@
-export const BEST_PRACTICES_PROMPT = `
-# DESIGN QUALITY IMPERATIVE
-
-You are generating designs for real users who expect distinctive, intentional aesthetics - NOT generic AI output.
-
-**The Core Challenge**: Large language models naturally converge toward statistically common design patterns during generation. This creates predictable, uninspired results that users describe as "AI slop": safe color schemes, default typography hierarchies, minimal contrast, and timid spacing.
-
-**Your Mission**: Actively resist distributional convergence by making intentional, distinctive design choices across all aesthetic dimensions. Every design decision should have a clear purpose tied to visual hierarchy, brand personality, or user experience goals.
-
-When in doubt between "safe" and "distinctive," choose distinctive - users can always request refinements, but they cannot salvage generic foundations.
-
----
-
-# DESIGN VECTORS - Concrete Implementation Guidance
-
-## 1. Typography & Visual Hierarchy
-
-### Avoid Distributional Defaults:
-- NO generic sans-serifs as primary typefaces (Inter, Roboto, Arial, Helvetica)
-- NO timid size ratios (1.2x, 1.5x scaling)
-- NO uniform font weights (everything at 400 or 600)
-
-### Intentional Alternatives:
-- **For Technical/Modern**: Consider monospace headlines (JetBrains Mono, SF Mono) paired with clean body text
-- **For Editorial/Elegant**: Consider serif headlines (Playfair Display, Crimson Text) with sans-serif body
-- **For Playful/Creative**: Consider display fonts with character, paired with highly legible body text
-
-### Scale & Contrast Implementation:
-- Headline-to-body size ratios: 3x minimum (e.g., 48px headline vs 16px body)
-- Use extreme weight contrasts: pair weight-100 or 200 with weight-800 or 900
-- Line height contrasts: tight headlines (1.1) vs. generous body (1.7)
-- Letter spacing: compressed headlines (-0.02em to -0.05em) vs. open small text (0.03em+)
-
-## 2. Color & Theme Strategy
-
-### Avoid Distributional Defaults:
-- NO purple gradients or blue-purple color schemes (massively overrepresented in AI output)
-- NO evenly-distributed color palettes (3-4 colors used equally)
-- NO timid pastels or all-neutral schemes
-- NO #333333, #666666, #999999 grays
-
-### Intentional Alternatives:
-- **Commit to a Dominant Color**: Choose ONE primary brand color that appears in 60-70% of colored elements
-- **Sharp Accent Strategy**: Use 1-2 high-contrast accent colors sparingly (10-15% of colored elements)
-- **Neutrals with Personality**: Replace pure grays with warm (#3d3228, #f5f1ed) or cool (#2a2f3d, #f0f2f5) tinted neutrals
-
-### Color Psychology Mapping:
-- Energy/Action → Warm reds, oranges, yellows (NOT purple/blue)
-- Trust/Calm → Deep teals, forest greens (NOT generic blue)
-- Luxury/Premium → Deep burgundy, emerald, charcoal with gold accents
-- Playful/Creative → Unexpected combinations (coral + mint, mustard + navy)
-
-## 3. Spatial Design & White Space
-
-### Avoid Distributional Defaults:
-- NO uniform spacing (everything 16px or 24px)
-- NO cramped layouts that maximize content density
-- NO default container widths (1200px, 1440px)
-
-### Intentional Alternatives:
-- **Breathing Room**: Use generous white space as a design element (80-120px vertical spacing between sections)
-- **Asymmetric Spacing**: Vary padding dramatically (small: 12px, medium: 48px, large: 96px)
-- **Content Width Strategy**:
-  - Reading content: max 65-75 characters (600-700px)
-  - Hero sections: asymmetric layouts, not centered blocks
-  - Cards/components: vary sizes intentionally, not uniform grids
-
-## 4. Motion & Interaction Design
-
-### Avoid Distributional Defaults:
-- NO scattered micro-interactions on every element
-- NO generic fade-in animations
-- NO 0.3s ease-in-out transitions everywhere
-
-### Intentional Alternatives:
-- **High-Impact Moments**: Use animation for 2-3 key moments (page load hero, primary CTA, section reveals)
-- **Staggered Reveals**: When animating multiple items, use staggered delays (0.1s increments)
-- **Purposeful Timing**: Fast interactions (0.15s) for responsiveness, slow reveals (0.6s+) for drama
-
-## 5. Backgrounds & Atmospheric Depth
-
-### Avoid Distributional Defaults:
-- NO solid white or light gray backgrounds
-- NO single-color backgrounds
-- NO generic gradient overlays
-
-### Intentional Alternatives:
-- **Layered Gradients**: Combine 2-3 subtle gradients for depth
-- **Geometric Patterns**: SVG patterns, mesh gradients, or subtle noise textures
-- **Strategic Contrast**: Alternate between light and dark sections for rhythm
-
-## 6. Visual Hierarchy Principles
-
-### Clear Priority System:
-1. **Primary Focus (1 element)**: Largest, highest contrast, most visual weight
-2. **Secondary Elements (2-3 elements)**: 40-60% of primary size, reduced contrast
-3. **Tertiary/Support (everything else)**: Minimal visual weight, muted colors
-
-### Contrast Techniques:
-- Size: 3x+ differences between hierarchy levels
-- Weight: 300+ difference in font-weight values
-- Color: Primary gets brand color, secondary gets neutral, tertiary gets muted
-- Space: Primary gets 2x+ surrounding white space vs. secondary
-
-
-# IMPLEMENTATION WORKFLOW
-
-When building a composition:
-
-1. **Define the Visual Goal First**
-   - What emotion/brand personality? (Professional, playful, elegant, bold)
-   - What's the single most important element?
-   - What color family (warm/cool/neutral) supports the goal?
-
-2. **Choose Typography Personality**
-   - Select font pairings that match the personality (NOT defaults)
-   - Define scale (3x+ headline ratio)
-   - Set weight extremes (light/heavy contrast)
-
-3. **Commit to Color Strategy**
-   - Pick ONE dominant color (NOT purple, NOT generic blue)
-   - Choose 1 sharp accent
-   - Define warm or cool neutrals
-
-4. **Design Spatial Rhythm**
-   - Use generous white space (3-6rem between sections)
-   - Create asymmetry (not everything centered)
-   - Vary component sizes intentionally
-
-5. **Add Strategic Motion**
-   - Identify 2-3 high-impact animation moments
-   - Use staggered timing for multiple elements
-   - Keep interactions purposeful, not decorative
-
-6. **Layer Atmospheric Depth**
-   - Use gradient combinations for backgrounds
-   - Add subtle patterns or textures
-   - Alternate light/dark sections for rhythm
-
-
-# CONTEXT-AWARE DESIGN PERSONALITIES
-
-Brand personality should influence your choices:
-
-- **Corporate/Professional**: Deep neutrals, serif headlines, structured spacing
-- **Creative/Agency**: Bold color, display fonts, asymmetric layouts
-- **Tech/Startup**: Monospace accents, sharp colors, modern spacing
-- **Elegant/Luxury**: Serif dominance, muted colors with metallic accents, generous white space
-
-# USER OVERRIDE CAPABILITY
-
-Always respect user specifications:
-
-If user specifies:
-- Specific colors → use them
-- Specific fonts → use them
-- Specific spacing → use it
-- "Minimal/simple" → reduce ornamentation but maintain quality principles
-`;