@webmate-studio/builder 0.2.97 → 0.2.99

package/package.json

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

package/src/design-tokens.js

@@ -602,6 +602,18 @@ export const defaultDesignTokens = {
 			opacity: 100,
 			opacityHover: 100
 		}
+	},
+
+	// Spacing between components
+	spacing: {
+		component: {
+			base: '3rem',   // 48px - Mobile
+			sm: '3rem',     // 48px - 640px+
+			md: '3.5rem',   // 56px - 768px+
+			lg: '4rem',     // 64px - 1024px+
+			xl: '4.5rem',   // 72px - 1280px+
+			'2xl': '5rem'   // 80px - 1536px+
+		}
 	}
 };
 
@@ -1555,5 +1567,36 @@ export function generateCSSFromTokens(tokens) {
 		lines.push(semanticUtilities);
 	}
 
+	// Add component spacing utilities
+	if (tokens.spacing?.component) {
+		lines.push('');
+		lines.push('/* Component Spacing */');
+		lines.push('.component-wrapper {');
+		lines.push('  display: flex;');
+		lines.push('  flex-direction: column;');
+		lines.push(`  gap: ${tokens.spacing.component.base || '3rem'};`);
+		lines.push('}');
+
+		// Responsive spacing
+		const breakpoints = {
+			sm: '640px',
+			md: '768px',
+			lg: '1024px',
+			xl: '1280px',
+			'2xl': '1536px'
+		};
+
+		for (const [breakpoint, minWidth] of Object.entries(breakpoints)) {
+			if (tokens.spacing.component[breakpoint]) {
+				lines.push('');
+				lines.push(`@media (min-width: ${minWidth}) {`);
+				lines.push('  .component-wrapper {');
+				lines.push(`    gap: ${tokens.spacing.component[breakpoint]};`);
+				lines.push('  }');
+				lines.push('}');
+			}
+		}
+	}
+
 	return lines.join('\n');
 }

package/src/markdown.js

@@ -20,10 +20,10 @@ marked.setOptions({
 });
 
 /**
- * Shift heading levels in HTML and add correct text-heading-* classes
+ * 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 and proper styling classes
+ * @returns {string} HTML with shifted heading levels
  */
 function shiftHeadingLevels(html, startLevel) {
 	if (!startLevel || startLevel === 1) return html;
@@ -35,24 +35,11 @@ function shiftHeadingLevels(html, startLevel) {
 	for (let level = 6; level >= 1; level--) {
 		const newLevel = Math.min(level + offset, 6);
 		if (newLevel !== level) {
-			// 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
+			// Replace opening and closing tags
 			html = html.replace(
 				new RegExp(`<h${level}(\\s|>)`, 'gi'),
-				(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}">`;
-				}
+				`<h${newLevel}$1`
 			);
-
-			// Replace closing tags
 			html = html.replace(
 				new RegExp(`</h${level}>`, 'gi'),
 				`</h${newLevel}>`
@@ -70,6 +57,7 @@ function shiftHeadingLevels(html, startLevel) {
  * @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)
+ * @param {boolean} options.wrapProse - Wrap with .prose class (default: true)
  * @returns {string} - Sicherer HTML-String
  */
 export function markdownToHtml(markdown, options = {}) {
@@ -102,7 +90,8 @@ export function markdownToHtml(markdown, options = {}) {
 				'blockquote', 'pre', 'code',
 				'a', 'img',
 				'table', 'thead', 'tbody', 'tr', 'th', 'td',
-				'hr', 'abbr', 'cite', 'mark', 'small', 'sub', 'sup'
+				'hr', 'abbr', 'cite', 'mark', 'small', 'sub', 'sup',
+				'div'
 			],
 			ALLOWED_ATTR: [
 				'href', 'title', 'alt', 'src',
@@ -115,6 +104,11 @@ export function markdownToHtml(markdown, options = {}) {
 		html = purify.sanitize(html, config);
 	}
 
+	// Wrap with .prose for automatic styling (can be disabled with options.wrapProse = false)
+	if (options.wrapProse !== false) {
+		html = `<div class="prose">${html}</div>`;
+	}
+
 	return html;
 }