@webmate-studio/builder 0.2.98 → 0.2.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.98",
+  "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');
 }