@webmate-studio/builder 0.2.180 → 0.2.182

package/package.json

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

package/src/template-evaluator.js

@@ -40,8 +40,11 @@ class TemplateEvaluator {
 			case 'Fragment':
 				return this.evalFragment(node, ctx);
 			case 'Text':
-				// Strip closing tags of built-in micro-components (they output complete HTML)
-				return node.value.replace(/<\/wm-button>/g, '');
+				// 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);
 			case 'HtmlExpression':
@@ -314,14 +317,10 @@ class TemplateEvaluator {
 	/**
 	 * Built-in micro-component: <wm-button settings={button}></wm-button>
 	 *
-	 * Transforms to semantic HTML with Design System button classes.
-	 * Settings object: { title, link, icon, variant, size, iconPosition, openInNewTab }
-	 *
-	 * Size mapping: small/sm → btn-sm, medium/md → btn-md, large/lg → btn-lg
-	 * Variant mapping: primary → btn-filled, filled/tonal/outline/ghost/text/destructive → btn-{variant}
+	 * 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,35 +337,21 @@ class TemplateEvaluator {
 		}
 
 		const {
-			title = '',
-			link = '#',
-			icon = '',
-			variant = 'filled',
-			size = 'md',
-			iconPosition = 'left',
-			openInNewTab = false
+			title = '', link = '#', icon = '', variant = 'filled',
+			size = 'md', iconPosition = 'left', openInNewTab = false
 		} = settings;
 
-		// Map size names
 		const sizeMap = { small: 'sm', medium: 'md', large: 'lg', sm: 'sm', md: 'md', lg: 'lg' };
-		const sizeClass = `btn-${sizeMap[size] || 'md'}`;
-
-		// Map variant names (primary → filled for backward compat)
 		const variantMap = { primary: 'filled', secondary: 'tonal' };
-		const variantClass = `btn-${variantMap[variant] || variant}`;
-
-		const classes = ['btn', sizeClass, variantClass].join(' ');
-		const target = openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : '';
+		const classes = `btn btn-${sizeMap[size] || 'md'} btn-${variantMap[variant] || variant}`;
 		const href = typeof link === 'object' ? (link.path || link.url || '#') : (link || '#');
-
-		// Build icon HTML
+		const target = openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : '';
 		const iconHtml = icon ? `<iconify-icon icon="${this.escapeAttr(icon)}"></iconify-icon>` : '';
 
-		// Build content based on icon position
-		let content = '';
+		let content;
 		if (icon && iconPosition === 'right') {
 			content = `${this.escapeHtml(title)}${iconHtml ? ' ' + iconHtml : ''}`;
-		} else if (icon && iconPosition === 'left') {
+		} else if (icon) {
 			content = `${iconHtml ? iconHtml + ' ' : ''}${this.escapeHtml(title)}`;
 		} else {
 			content = this.escapeHtml(title);