@webmate-studio/builder 0.2.181 → 0.2.183

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.181",
+  "version": "0.2.183",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/template-evaluator.js

@@ -40,10 +40,6 @@ class TemplateEvaluator {
 			case 'Fragment':
 				return this.evalFragment(node, ctx);
 			case 'Text':
-				// Strip closing tags of built-in micro-components (only if present)
-				if (node.value.includes('</wm-')) {
-					return node.value.replace(/<\/wm-button>/g, '');
-				}
 				return node.value;
 			case 'Expression':
 				return this.evalExpression(node, ctx);
@@ -198,10 +194,10 @@ class TemplateEvaluator {
 			return this.evalIslandTag(node, ctx);
 		}
 
-		// Built-in micro-components
-		if (node.tagName === 'wm-button') {
-			return this.evalWmButton(node, ctx);
-		}
+		// Built-in micro-components (disabled for testing)
+		// if (node.tagName === 'wm-button') {
+		// 	return this.evalWmButton(node, ctx);
+		// }
 
 		let result = `<${node.tagName}`;
 
@@ -317,12 +313,10 @@ class TemplateEvaluator {
 	/**
 	 * Built-in micro-component: <wm-button settings={button}></wm-button>
 	 *
-	 * Outputs a <wm-button> Custom Element with serialized settings.
-	 * In Preview: Web Component (wm-button.js) renders it live.
-	 * In Build: html-static-builder resolves it to static <a> HTML.
+	 * Resolves to static <a> HTML with Design System button classes.
+	 * Works identically in Preview and Build — no Web Component needed.
 	 */
 	evalWmButton(node, ctx) {
-		// Resolve the settings prop
 		let settings = null;
 		for (const attr of node.attributes) {
 			if (attr.name === 'settings') {
@@ -338,9 +332,28 @@ class TemplateEvaluator {
 			return '<!-- wm-button: no settings -->';
 		}
 
-		// Serialize settings as JSON attribute for the Web Component
-		const json = JSON.stringify(settings).replace(/'/g, '&apos;');
-		return `<wm-button settings='${json}'></wm-button>`;
+		const {
+			title = '', link = '#', icon = '', variant = 'filled',
+			size = 'md', iconPosition = 'left', openInNewTab = false
+		} = settings;
+
+		const sizeMap = { small: 'sm', medium: 'md', large: 'lg', sm: 'sm', md: 'md', lg: 'lg' };
+		const variantMap = { primary: 'filled', secondary: 'tonal' };
+		const classes = `btn btn-${sizeMap[size] || 'md'} btn-${variantMap[variant] || variant}`;
+		const href = typeof link === 'object' ? (link.path || link.url || '#') : (link || '#');
+		const target = openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : '';
+		const iconHtml = icon ? `<iconify-icon icon="${this.escapeAttr(icon)}"></iconify-icon>` : '';
+
+		let content;
+		if (icon && iconPosition === 'right') {
+			content = `${this.escapeHtml(title)}${iconHtml ? ' ' + iconHtml : ''}`;
+		} else if (icon) {
+			content = `${iconHtml ? iconHtml + ' ' : ''}${this.escapeHtml(title)}`;
+		} else {
+			content = this.escapeHtml(title);
+		}
+
+		return `<a href="${this.escapeAttr(href)}" class="${classes}"${target}>${content}</a>`;
 	}
 
 	// ========================================