@elementor/editor-canvas 4.2.0-beta2 → 4.3.0-1001

package/src/composition-builder/composition-builder.ts

@@ -1,350 +0,0 @@
-import {
-	createElement,
-	type CreateElementParams,
-	deleteElement,
-	generateElementId,
-	getContainer,
-	getWidgetsCache,
-	type V1Element,
-	type V1ElementConfig,
-	type V1ElementModelProps,
-} from '@elementor/editor-elements';
-import { type z } from '@elementor/schema';
-
-import {
-	collectEmptyMessageErrors,
-	collectFormAncestorErrors,
-	collectSubmitButtonErrors,
-} from '../form-structure/utils';
-import { doUpdateElementProperty } from '../mcp/utils/do-update-element-property';
-import { mergeCustomCssText } from '../mcp/utils/merge-custom-css';
-import { RequiredChildrenEnforcer } from './utils/required-children-enforcer';
-import { getRequiredDefaultChildTemplates } from './utils/required-default-child-tags';
-
-type AnyValue = z.infer< z.ZodTypeAny >;
-type AnyConfig = Record< string, Record< string, AnyValue > >;
-
-const CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE = 'createElement did not return an element container with a model.';
-
-type API = {
-	createElement: typeof createElement;
-	deleteElement: typeof deleteElement;
-	getWidgetsCache: typeof getWidgetsCache;
-	generateElementId: typeof generateElementId;
-	getContainer: typeof getContainer;
-	doUpdateElementProperty: typeof doUpdateElementProperty;
-};
-
-type CtorOptions = {
-	xml: Document;
-	api?: Partial< API >;
-	elementConfig?: AnyConfig;
-	stylesConfig?: AnyConfig;
-	customCSS?: Record< string, string >;
-};
-
-export class CompositionBuilder {
-	private elementConfig: Record< string, Record< string, AnyValue > > = {};
-	private elementStylesConfig: Record< string, Record< string, AnyValue > > = {};
-	private elementCustomCSS: Record< string, string > = {};
-	private rootContainers: V1Element[] = [];
-	private api: API = {
-		createElement,
-		deleteElement,
-		getWidgetsCache,
-		generateElementId,
-		getContainer,
-		doUpdateElementProperty,
-	};
-	private xml: Document;
-
-	public static fromXMLString( xmlString: string, api: Partial< API > = {} ): CompositionBuilder {
-		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: CtorOptions ) {
-		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: Record< string, Record< string, AnyValue > > ) {
-		this.elementConfig = config;
-	}
-
-	setStylesConfig( config: Record< string, Record< string, AnyValue > > ) {
-		this.elementStylesConfig = config;
-	}
-
-	setCustomCSS( config: Record< string, string > ) {
-		this.elementCustomCSS = config;
-	}
-
-	getXML() {
-		return this.xml;
-	}
-
-	private buildModelTree(
-		node: Element,
-		widgetsCache: Record< string, V1ElementConfig >
-	): Record< string, unknown > {
-		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: V1ElementModelProps = {
-			id,
-			skipDefaultChildren: true,
-			elements: children as V1ElementModelProps[ 'elements' ],
-			editor_settings: {
-				title: node.getAttribute( 'configuration-id' ) ?? undefined,
-			},
-			elType: 'widget',
-		};
-
-		// TODO: Restore this code once components are working in compositions
-		// if ( elementTag === 'e-component' ) {
-		// 	// apply component id before applying values
-		// 	const elementConfig = this.elementConfig[ String( node.getAttribute( 'configuration-id' ) ) ];
-		// 	if ( elementConfig ) {
-		// 		base.settings = base.settings || {};
-		// 		base.settings.component_instance = elementConfig.component_instance;
-		// 	}
-		// }
-
-		if ( isWidget ) {
-			return { ...base, elType: 'widget' as const, widgetType: elementTag };
-		}
-
-		return { ...base, elType: elementTag };
-	}
-
-	private async awaitViewRender( element: V1Element ) {
-		const view = element.view as Record< string, unknown > | undefined;
-		if ( view?._currentRenderPromise instanceof Promise ) {
-			await view._currentRenderPromise;
-		} else {
-			await Promise.resolve();
-		}
-	}
-
-	private validateChildTypes( node: Element, widgetsCache: Record< string, V1ElementConfig > ): string[] {
-		const errors: string[] = [];
-		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;
-	}
-
-	private matchNodeByConfigId( configId: string ) {
-		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,
-		};
-	}
-
-	private async applyProperties() {
-		const configErrors: string[] = [];
-		const styleErrors: string[] = [];
-
-		const allConfigIds = 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 as Error ).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 as Error ).message );
-					}
-				}
-			}
-
-			const styleConfig = this.elementStylesConfig[ configId ];
-			const hasInvalidStyles = false;
-			if ( styleConfig ) {
-				const validStylesPropValues: Record< string, AnyValue > = {};
-				for ( const [ styleName, stylePropValue ] of Object.entries( styleConfig ) ) {
-					if ( styleName === '$intention' ) {
-						continue;
-					} else {
-						// skipping actual validation - properies comes from the server
-						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: V1Element ) {
-		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: string[] = [];
-		for ( const rootChild of Array.from( this.xml.children ) ) {
-			childTypeErrors.push( ...this.validateChildTypes( rootChild, widgetsCache ) );
-		}
-		if ( childTypeErrors.length ) {
-			throw new Error( `Invalid element structure:\n${ childTypeErrors.join( '\n' ) }` );
-		}
-
-		const formErrors = [
-			...collectFormAncestorErrors( this.xml ),
-			...collectSubmitButtonErrors( this.xml ),
-			...collectEmptyMessageErrors( this.xml ),
-		];
-
-		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 as CreateElementParams[ 'model' ],
-					options: { useHistory: false },
-				} );
-				if ( ! newElement?.model ) {
-					throw new Error( CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE );
-				}
-				this.rootContainers.push( newElement );
-				await this.awaitViewRender( newElement );
-			} catch ( e: unknown ) {
-				const attempToRestoreInvalidContainer = this.api.getContainer( modelTree.id as string );
-				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,
-			formErrors,
-			rootContainers: [ ...this.rootContainers ],
-		};
-	}
-}

package/src/composition-builder/utils/__tests__/required-children-enforcer.test.ts

@@ -1,79 +0,0 @@
-import { type V1ElementConfig } from '@elementor/editor-elements';
-
-import { RequiredChildrenEnforcer } from '../required-children-enforcer';
-
-describe( 'RequiredChildrenEnforcer', () => {
-	const FULL_FORM_DIRECT_CHILD_COUNT = 3;
-
-	const createWidgetsCache = (): Record< string, V1ElementConfig > => ( {
-		'e-form': {
-			title: 'Form',
-			controls: {},
-			elType: 'widget',
-			default_children: [
-				{
-					elType: 'e-form-success-message',
-					meta: { required: true },
-					elements: [],
-				},
-				{
-					elType: 'e-form-error-message',
-					meta: { required: true },
-					elements: [],
-				},
-				{
-					elType: 'widget',
-					widgetType: 'e-form-input',
-					elements: [],
-				},
-			],
-		} as V1ElementConfig,
-		'e-form-input': { title: 'Input', controls: {}, elType: 'widget' } as V1ElementConfig,
-		'e-form-success-message': {
-			title: 'Success',
-			controls: {},
-			elType: 'e-form-success-message',
-		} as V1ElementConfig,
-		'e-form-error-message': {
-			title: 'Error',
-			controls: {},
-			elType: 'e-form-error-message',
-		} as V1ElementConfig,
-	} );
-
-	it( 'throws when required direct children are missing', () => {
-		// Arrange
-		const xml = new DOMParser().parseFromString( '<e-form><e-form-input /></e-form>', 'application/xml' );
-		const enforcer = new RequiredChildrenEnforcer( 'e-form', createWidgetsCache() );
-
-		// Act & Assert
-		expect( () => enforcer.enforce( xml ) ).toThrow(
-			/Missing required direct child element tag\(s\): e-form-success-message, e-form-error-message/
-		);
-	} );
-
-	it( 'throws when only some required direct children exist', () => {
-		// Arrange
-		const xml = new DOMParser().parseFromString( '<e-form><e-form-success-message /></e-form>', 'application/xml' );
-		const enforcer = new RequiredChildrenEnforcer( 'e-form', createWidgetsCache() );
-
-		// Act & Assert
-		expect( () => enforcer.enforce( xml ) ).toThrow(
-			/Missing required direct child element tag\(s\): e-form-error-message/
-		);
-	} );
-
-	it( 'does not throw when all required direct children exist', () => {
-		// Arrange
-		const xmlStr = '<e-form><e-form-success-message /><e-form-error-message /><e-form-input /></e-form>';
-		const xml = new DOMParser().parseFromString( xmlStr, 'application/xml' );
-		const enforcer = new RequiredChildrenEnforcer( 'e-form', createWidgetsCache() );
-
-		// Act
-		expect( () => enforcer.enforce( xml ) ).not.toThrow();
-
-		// Assert
-		const form = xml.querySelector( 'e-form' );
-		expect( form?.children.length ).toBe( FULL_FORM_DIRECT_CHILD_COUNT );
-	} );
-} );

package/src/composition-builder/utils/__tests__/required-default-child-tags.test.ts

@@ -1,35 +0,0 @@
-import { type V1ElementConfig } from '@elementor/editor-elements';
-
-import { getRequiredDefaultChildTypes } from '../required-default-child-tags';
-
-describe( 'required-default-child-tags', () => {
-	it( 'returns XML tag names for default children marked meta.required', () => {
-		// Arrange
-		const config = {
-			title: 'Form',
-			controls: {},
-			default_children: [
-				{
-					elType: 'e-form-success-message',
-					meta: { required: true },
-					elements: [],
-				},
-				{
-					elType: 'widget',
-					widgetType: 'e-form-input',
-					meta: { required: true },
-				},
-				{
-					elType: 'e-form-label',
-					elements: [],
-				},
-			],
-		} as unknown as V1ElementConfig;
-
-		// Act
-		const tags = getRequiredDefaultChildTypes( config );
-
-		// Assert
-		expect( tags ).toEqual( [ 'e-form-success-message', 'e-form-input' ] );
-	} );
-} );

package/src/composition-builder/utils/required-children-enforcer.ts

@@ -1,56 +0,0 @@
-import { type V1ElementConfig } from '@elementor/editor-elements';
-
-import { type ChildTemplate, getRequiredDefaultChildTemplates } from './required-default-child-tags';
-
-const REQUIRED_CHILD_SCHEMA_HINT =
-	'Use the widget schema resource; under llm_guidance.required_direct_children for V4 widgets.';
-
-export class RequiredChildrenEnforcer {
-	private readonly elementType: string;
-	private readonly requiredTemplates: ChildTemplate[];
-
-	constructor( elementType: string, widgetsCache: Record< string, V1ElementConfig > ) {
-		this.elementType = elementType;
-		this.requiredTemplates = getRequiredDefaultChildTemplates( widgetsCache[ elementType ] );
-	}
-
-	enforce( xml: Document ) {
-		if ( this.requiredTemplates.length === 0 ) {
-			return;
-		}
-
-		const errors: string[] = [];
-
-		for ( const rootNode of Array.from( xml.children ) ) {
-			this.collectMissingRequiredErrors( rootNode, errors );
-		}
-
-		if ( errors.length ) {
-			throw new Error( `${ errors.join( '\n' ) }\n${ REQUIRED_CHILD_SCHEMA_HINT }` );
-		}
-	}
-
-	private collectMissingRequiredErrors( node: Element, errors: string[] ) {
-		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 ) ) as string[];
-
-			if ( missingTags.length ) {
-				const configurationId = node.getAttribute( 'configuration-id' );
-				const location = configurationId
-					? `<${ node.tagName } configuration-id="${ configurationId }">`
-					: `<${ node.tagName }>`;
-
-				errors.push(
-					`${ location } Missing required direct child element tag(s): ${ missingTags.join( ', ' ) }.`
-				);
-			}
-		}
-
-		for ( const childNode of Array.from( node.children ) ) {
-			this.collectMissingRequiredErrors( childNode, errors );
-		}
-	}
-}

package/src/composition-builder/utils/required-default-child-tags.ts

@@ -1,22 +0,0 @@
-import { type V1ElementConfig } from '@elementor/editor-elements';
-
-export type ChildTemplate = {
-	widgetType?: string;
-	elType?: string;
-	meta?: { required?: boolean };
-};
-export function getRequiredDefaultChildTemplates( elementConfig: V1ElementConfig | undefined ): ChildTemplate[] {
-	const defaultChildren = elementConfig?.default_children as ChildTemplate[];
-
-	if ( ! Array.isArray( defaultChildren ) ) {
-		return [];
-	}
-
-	return defaultChildren.filter( ( child ) => child?.meta?.required ?? false );
-}
-
-export function getRequiredDefaultChildTypes( elementConfig: V1ElementConfig | undefined ): string[] {
-	return getRequiredDefaultChildTemplates( elementConfig )
-		.map( ( child ) => child.widgetType ?? child.elType ?? '' )
-		.filter( ( type ) => Boolean( type ) );
-}

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
-`;