@webmate-studio/builder 0.2.85 → 0.2.87

package/package.json

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

package/src/design-tokens.js

@@ -7,7 +7,7 @@ function generateSemanticColorUtilities(tokens) {
 	if (!tokens.colors) return '';
 
 	let utilities = '\n/* Color Utilities */';
-	utilities += '\n@layer components {';
+	utilities += '\n@layer utilities {';
 
 	// Map of all colors: token name -> utility class base name
 	const colorMap = {
@@ -1008,7 +1008,13 @@ export function generateTailwindConfig(tokens) {
  * Generate CSS Variables from Design Tokens
  */
 export function generateCSSFromTokens(tokens) {
-	const lines = [':root {'];
+	const lines = [];
+
+	// Define layer order FIRST (before any other CSS)
+	lines.push('/* CSS Layer Order Declaration */');
+	lines.push('@layer base, components, utilities;');
+	lines.push('');
+	lines.push(':root {');
 
 	// Colors
 	for (const [key, value] of Object.entries(tokens.colors || {})) {

package/src/markdown.js

@@ -20,10 +20,10 @@ marked.setOptions({
 });
 
 /**
- * Shift heading levels in HTML
+ * Shift heading levels in HTML and add correct text-heading-* classes
  * @param {string} html - HTML string
  * @param {number} startLevel - The level that h1 should become (e.g., 2 means h1 → h2)
- * @returns {string} HTML with shifted heading levels
+ * @returns {string} HTML with shifted heading levels and proper styling classes
  */
 function shiftHeadingLevels(html, startLevel) {
 	if (!startLevel || startLevel === 1) return html;
@@ -35,11 +35,24 @@ function shiftHeadingLevels(html, startLevel) {
 	for (let level = 6; level >= 1; level--) {
 		const newLevel = Math.min(level + offset, 6);
 		if (newLevel !== level) {
-			// Replace opening and closing tags
+			// Add text-heading-{originalLevel} class to preserve original styling
+			// e.g., H1 becoming H2 gets class="text-heading-1" to keep H1 styles
+			const styleClass = `text-heading-${level}`;
+
+			// Replace opening tag and add class
 			html = html.replace(
 				new RegExp(`<h${level}(\\s|>)`, 'gi'),
-				`<h${newLevel}$1`
+				(match, afterTag) => {
+					// If there's already a space (attributes exist), add class
+					if (afterTag === ' ') {
+						return `<h${newLevel} class="${styleClass}"`;
+					}
+					// Otherwise, add class before closing >
+					return `<h${newLevel} class="${styleClass}">`;
+				}
 			);
+
+			// Replace closing tags
 			html = html.replace(
 				new RegExp(`</h${level}>`, 'gi'),
 				`</h${newLevel}>`

package/src/tailwind-generator.js

@@ -411,6 +411,10 @@ ${themeCSS}
 			result = stripNonUtilityLayers(result);
 			console.log(`[Tailwind Generator] Generated CSS length AFTER stripping: ${result.length}`);
 			console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
+
+			// Wrap in @layer components (btn, etc. are components, not utilities)
+			// Utilities from design tokens (@layer utilities) can then override them
+			result = `@layer components {\n${result}\n}`;
 		}
 
 		return result;