@webmate-studio/builder 0.2.180 → 0.2.181

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.180",
+  "version": "0.2.181",
   "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,11 +317,9 @@ 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}
+	 * 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.
 	 */
 	evalWmButton(node, ctx) {
 		// Resolve the settings prop
@@ -337,42 +338,9 @@ class TemplateEvaluator {
 			return '<!-- wm-button: no settings -->';
 		}
 
-		const {
-			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 href = typeof link === 'object' ? (link.path || link.url || '#') : (link || '#');
-
-		// Build icon HTML
-		const iconHtml = icon ? `<iconify-icon icon="${this.escapeAttr(icon)}"></iconify-icon>` : '';
-
-		// Build content based on icon position
-		let content = '';
-		if (icon && iconPosition === 'right') {
-			content = `${this.escapeHtml(title)}${iconHtml ? ' ' + iconHtml : ''}`;
-		} else if (icon && iconPosition === 'left') {
-			content = `${iconHtml ? iconHtml + ' ' : ''}${this.escapeHtml(title)}`;
-		} else {
-			content = this.escapeHtml(title);
-		}
-
-		return `<a href="${this.escapeAttr(href)}" class="${classes}"${target}>${content}</a>`;
+		// Serialize settings as JSON attribute for the Web Component
+		const json = JSON.stringify(settings).replace(/'/g, '&apos;');
+		return `<wm-button settings='${json}'></wm-button>`;
 	}
 
 	// ========================================