@webmate-studio/builder 0.2.79 → 0.2.81

package/package.json

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

package/src/design-tokens.js

@@ -1179,6 +1179,126 @@ export function generateCSSFromTokens(tokens) {
 				lines.push('}');
 			}
 		}
+
+		// Generate markdown prose styles
+		lines.push('');
+		lines.push('/* Markdown Prose Styles */');
+		lines.push('/* Headings use text-heading-* styles */');
+
+		// Map h1-h6 to heading1-heading6 text styles
+		const headingMap = {
+			'h1': 'heading1',
+			'h2': 'heading2',
+			'h3': 'heading3',
+			'h4': 'heading4',
+			'h5': 'heading5',
+			'h6': 'heading6'
+		};
+
+		for (const [tag, styleName] of Object.entries(headingMap)) {
+			const style = tokens.textStyles[styleName];
+			if (!style) continue;
+
+			lines.push(`.prose ${tag} {`);
+			if (style.fontFamily) {
+				const fontVar = `--font-${style.fontFamily}`;
+				lines.push(`  font-family: var(${fontVar});`);
+			}
+			if (style.fontWeight) {
+				lines.push(`  font-weight: ${style.fontWeight};`);
+			}
+			if (style.fontSize) {
+				const fontSize = typeof style.fontSize === 'object' ? style.fontSize.base : style.fontSize;
+				lines.push(`  font-size: ${fontSize};`);
+			}
+			if (style.lineHeight) {
+				const lineHeight = typeof style.lineHeight === 'object' ? style.lineHeight.base : style.lineHeight;
+				lines.push(`  line-height: ${lineHeight};`);
+			}
+			if (style.letterSpacing) {
+				const letterSpacing = typeof style.letterSpacing === 'object' ? style.letterSpacing.base : style.letterSpacing;
+				lines.push(`  letter-spacing: ${letterSpacing};`);
+			}
+			if (style.textTransform) {
+				lines.push(`  text-transform: ${style.textTransform};`);
+			}
+			if (style.textColor) {
+				const colorVar = `--color-${style.textColor.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+				lines.push(`  color: var(${colorVar});`);
+			}
+			lines.push(`  margin-top: 1.5rem;`);
+			lines.push(`  margin-bottom: 0.75rem;`);
+			lines.push('}');
+		}
+
+		// Links
+		lines.push('.prose a {');
+		if (tokens.colors && tokens.colors.primary) {
+			lines.push('  color: var(--color-primary);');
+		}
+		lines.push('}');
+
+		// Paragraphs
+		lines.push('.prose p {');
+		lines.push('  margin-top: 1rem;');
+		lines.push('  margin-bottom: 1rem;');
+		lines.push('}');
+
+		// Lists
+		lines.push('.prose ul, .prose ol {');
+		lines.push('  margin-top: 1rem;');
+		lines.push('  margin-bottom: 1rem;');
+		lines.push('  padding-left: 1.5rem;');
+		lines.push('}');
+		lines.push('.prose li {');
+		lines.push('  margin-top: 0.25rem;');
+		lines.push('  margin-bottom: 0.25rem;');
+		lines.push('}');
+
+		// Inline styles
+		lines.push('.prose strong {');
+		lines.push('  font-weight: 700;');
+		lines.push('}');
+		lines.push('.prose em {');
+		lines.push('  font-style: italic;');
+		lines.push('}');
+
+		// Add responsive prose styles for headings
+		for (const bp of breakpointKeys) {
+			const mediaQueryLines = [];
+
+			for (const [tag, styleName] of Object.entries(headingMap)) {
+				const style = tokens.textStyles[styleName];
+				if (!style) continue;
+
+				const hasResponsive = (
+					(style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) ||
+					(style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) ||
+					(style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp])
+				);
+
+				if (hasResponsive) {
+					mediaQueryLines.push(`  .prose ${tag} {`);
+					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
+						mediaQueryLines.push(`    font-size: ${style.fontSize[bp]};`);
+					}
+					if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
+						mediaQueryLines.push(`    line-height: ${style.lineHeight[bp]};`);
+					}
+					if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
+						mediaQueryLines.push(`    letter-spacing: ${style.letterSpacing[bp]};`);
+					}
+					mediaQueryLines.push(`  }`);
+				}
+			}
+
+			if (mediaQueryLines.length > 0) {
+				lines.push('');
+				lines.push(`@media (min-width: ${breakpointValues[bp]}) {`);
+				lines.push(...mediaQueryLines);
+				lines.push('}');
+			}
+		}
 	}
 
 	// Generate button utility classes

package/src/html-cleaner.js

@@ -58,11 +58,18 @@ function transformIslandsToDataAttributes(html, availableIslands = []) {
 		// Convert island name to kebab-case for Custom Element tag
 		// SwiperTest → swiper-test
 		// MyAwesomeComponent → my-awesome-component
-		const kebabTag = tagName
+		let kebabTag = tagName
 			.replace(/([A-Z])/g, '-$1')
 			.toLowerCase()
 			.replace(/^-/, '');
 
+		// Svelte requires custom element names to be hyphenated
+		// If there's no hyphen, add a prefix to make it valid
+		// IMPORTANT: Must match the prefix logic in injectSvelteOptions()
+		if (!kebabTag.includes('-')) {
+			kebabTag = 'wm-' + kebabTag;  // e.g., "sidebar" → "wm-sidebar"
+		}
+
 		// Parse attributes and convert to HTML attributes
 		const attrs = [];