@webmate-studio/builder 0.2.159 → 0.2.160

package/package.json

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

package/src/design-tokens-v2-css.js

@@ -53,6 +53,7 @@ export function generateTailwindV4ThemeV2(tokens) {
 	globalStyles += generateTextAliasClasses(t);
 	globalStyles += generateTextResponsiveVariants(t);
 	globalStyles += generateButtonClasses(t);
+	globalStyles += generateSpacingStyles(t);
 	globalStyles += generateResponsiveMediaQueries(responsiveLines);
 
 	return { themeVars, globalStyles };
@@ -1022,6 +1023,11 @@ function generateLayoutVariables(t, lines) {
 	if (t.borderWidth) lines.push(`  --border-width: ${t.borderWidth};`);
 	if (t.borderRadius) lines.push(`  --radius: ${t.borderRadius};`);
 
+	if (t.spacing?.component) {
+		lines.push(`  /* component spacing */`);
+		lines.push(`  --spacing-component: ${t.spacing.component.base || '3rem'};`);
+	}
+
 	if (t.breakpoints) {
 		lines.push('  /* breakpoints */');
 		for (const [key, value] of Object.entries(t.breakpoints)) {
@@ -1031,6 +1037,42 @@ function generateLayoutVariables(t, lines) {
 }
 
 
+// ─── Component Spacing ──────────────────────────────────────────────────────
+
+function generateSpacingStyles(t) {
+	if (!t.spacing?.component) return '';
+
+	const breakpoints = {
+		sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px'
+	};
+
+	let css = '\n\n/* Component Spacing */';
+	css += '\n.component-wrapper {';
+	css += '\n  display: flex;';
+	css += '\n  flex-direction: column;';
+	css += '\n}';
+	css += '\n.component-wrapper > * + * {';
+	css += '\n  margin-top: var(--spacing-component);';
+	css += '\n}';
+
+	// Spacing-Modi
+	css += '\n[data-spacing="none"] { margin-top: 0 !important; }';
+	css += '\n[data-spacing="half"] { margin-top: calc(var(--spacing-component) / 2) !important; }';
+	css += '\n[data-spacing="double"] { margin-top: calc(var(--spacing-component) * 2) !important; }';
+
+	// Responsive Overrides
+	for (const [bp, minWidth] of Object.entries(breakpoints)) {
+		if (t.spacing.component[bp]) {
+			css += `\n@media (min-width: ${minWidth}) {`;
+			css += `\n  :root { --spacing-component: ${t.spacing.component[bp]}; }`;
+			css += '\n}';
+		}
+	}
+
+	return css;
+}
+
+
 // ─── Basis-Styles ───────────────────────────────────────────────────────────
 
 function generateBaseStyles(t) {