@webmate-studio/builder 0.2.82 → 0.2.84

package/package.json

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

package/src/design-tokens.js

@@ -7,6 +7,7 @@ function generateSemanticColorUtilities(tokens) {
 	if (!tokens.colors) return '';
 
 	let utilities = '\n/* Color Utilities */';
+	utilities += '\n@layer components {';
 
 	// Map of all colors: token name -> utility class base name
 	const colorMap = {
@@ -120,6 +121,8 @@ function generateSemanticColorUtilities(tokens) {
 		}
 	}
 
+	utilities += '\n}'; // Close @layer components
+
 	return utilities;
 }
 
@@ -1091,9 +1094,11 @@ export function generateCSSFromTokens(tokens) {
 	lines.push('}');
 
 	// Generate utility classes for text styles
+	// Wrap in @layer components so Tailwind utilities (@layer utilities) can override them
 	if (tokens.textStyles) {
 		lines.push('');
 		lines.push('/* Text Style Utilities */');
+		lines.push('@layer components {');
 		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
 			const kebabName = styleName
 				.replace(/([A-Z])/g, '-$1')
@@ -1102,35 +1107,36 @@ export function generateCSSFromTokens(tokens) {
 				.replace(/^-/, '');
 			const className = `text-${kebabName}`;
 
-			lines.push(`.${className} {`);
+			lines.push(`  .${className} {`);
 			if (style.fontFamily) {
 				const fontVar = `--font-${style.fontFamily}`;
-				lines.push(`  font-family: var(${fontVar});`);
+				lines.push(`    font-family: var(${fontVar});`);
 			}
 			if (style.fontWeight) {
-				lines.push(`  font-weight: ${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};`);
+				lines.push(`    font-size: ${fontSize};`);
 			}
 			if (style.lineHeight) {
 				const lineHeight = typeof style.lineHeight === 'object' ? style.lineHeight.base : style.lineHeight;
-				lines.push(`  line-height: ${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};`);
+				lines.push(`    letter-spacing: ${letterSpacing};`);
 			}
 			if (style.textTransform) {
-				lines.push(`  text-transform: ${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(`    color: var(${colorVar});`);
 			}
-			lines.push('}');
+			lines.push(`  }`);
 		}
+		lines.push('}'); // Close @layer components
 
 		// Add responsive media queries for textStyles
 		const breakpointKeys = ['md', 'lg', 'xl', '2xl'];
@@ -1158,24 +1164,26 @@ export function generateCSSFromTokens(tokens) {
 				);
 
 				if (hasResponsive) {
-					mediaQueryLines.push(`  .${className} {`);
+					mediaQueryLines.push(`    .${className} {`);
 					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
-						mediaQueryLines.push(`    font-size: ${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]};`);
+						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(`      letter-spacing: ${style.letterSpacing[bp]};`);
 					}
-					mediaQueryLines.push(`  }`);
+					mediaQueryLines.push(`    }`);
 				}
 			}
 
 			if (mediaQueryLines.length > 0) {
 				lines.push('');
-				lines.push(`@media (min-width: ${breakpointValues[bp]}) {`);
+				lines.push(`@layer components {`);
+				lines.push(`  @media (min-width: ${breakpointValues[bp]}) {`);
 				lines.push(...mediaQueryLines);
+				lines.push(`  }`);
 				lines.push('}');
 			}
 		}

package/src/markdown.js

@@ -19,12 +19,44 @@ marked.setOptions({
 	mangle: false, // Email-Adressen nicht verschleiern
 });
 
+/**
+ * Shift heading levels in HTML
+ * @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
+ */
+function shiftHeadingLevels(html, startLevel) {
+	if (!startLevel || startLevel === 1) return html;
+
+	const offset = startLevel - 1;
+
+	// Shift headings (h1 → h2, h2 → h3, etc.)
+	// We need to do this in reverse order to avoid double-shifting
+	for (let level = 6; level >= 1; level--) {
+		const newLevel = Math.min(level + offset, 6);
+		if (newLevel !== level) {
+			// Replace opening and closing tags
+			html = html.replace(
+				new RegExp(`<h${level}(\\s|>)`, 'gi'),
+				`<h${newLevel}$1`
+			);
+			html = html.replace(
+				new RegExp(`</h${level}>`, 'gi'),
+				`</h${newLevel}>`
+			);
+		}
+	}
+
+	return html;
+}
+
 /**
  * Konvertiert Markdown zu sicherem HTML
  *
  * @param {string} markdown - Markdown-String
  * @param {object} options - Optionale Konfiguration
  * @param {boolean} options.sanitize - HTML sanitizen (default: true)
+ * @param {number} options.headingStartLevel - Start level for headings (1-6, default: 1)
  * @returns {string} - Sicherer HTML-String
  */
 export function markdownToHtml(markdown, options = {}) {
@@ -35,6 +67,11 @@ export function markdownToHtml(markdown, options = {}) {
 	// Markdown zu HTML
 	let html = marked.parse(markdown);
 
+	// Shift heading levels if requested
+	if (options.headingStartLevel) {
+		html = shiftHeadingLevels(html, options.headingStartLevel);
+	}
+
 	// XSS-Schutz mit DOMPurify
 	if (options.sanitize !== false) {
 		const config = {
@@ -66,9 +103,10 @@ export function markdownToHtml(markdown, options = {}) {
  *
  * @param {Object} props - Component props
  * @param {Object} propSchema - Prop schema with format info (from component.json)
+ * @param {Object} componentMetadata - Component metadata (for headingStartLevel, etc.)
  * @returns {Object} Props with markdown converted to HTML
  */
-export function processMarkdownProps(props, propSchema = null) {
+export function processMarkdownProps(props, propSchema = null, componentMetadata = null) {
 	if (!props || typeof props !== 'object') return props;
 
 	const processed = { ...props };
@@ -81,8 +119,15 @@ export function processMarkdownProps(props, propSchema = null) {
 		const isMarkdown = propSchema?.[key]?.format === 'markdown';
 
 		if (isMarkdown) {
+			const options = {};
+
+			// Apply headingStartLevel from component metadata
+			if (componentMetadata?.headingStartLevel) {
+				options.headingStartLevel = componentMetadata.headingStartLevel;
+			}
+
 			// Convert markdown to HTML
-			processed[key] = markdownToHtml(value);
+			processed[key] = markdownToHtml(value, options);
 		}
 	}