@webmate-studio/builder 0.2.149 → 0.2.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.149",
+  "version": "0.2.152",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@webmate-studio/builder": "^0.2.132",
+    "@webmate-studio/builder": "^0.2.150",
     "@webmate-studio/core": "^0.2.7",
     "@webmate-studio/parser": "^0.2.8",
     "dom-serializer": "^2.0.0",

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

@@ -296,6 +296,8 @@ function generateTypographyVariables(t, lines, responsiveLines) {
 	const textStyles = t.typography.textStyles;
 	if (!textStyles) return;
 
+	const fluidConfig = t.typography.fluidConfig;
+
 	for (const voice of TEXT_VOICES) {
 		if (!textStyles[voice]) continue;
 
@@ -314,38 +316,94 @@ function generateTypographyVariables(t, lines, responsiveLines) {
 				lines.push(`  ${prefix}-font: "${style.font}", ${fallback};`);
 			}
 
-			// fontWeight, letterSpacing, textTransform — nicht responsive
 			if (style.fontWeight != null) lines.push(`  ${prefix}-weight: ${style.fontWeight};`);
 			if (style.textTransform) lines.push(`  ${prefix}-transform: ${style.textTransform};`);
 
-			// fontSize — kann responsive sein
-			addResponsiveVar(prefix + '-size', style.fontSize, lines, responsiveLines);
+			// fontSize — fluid clamp() oder statisch
+			addFluidVar(prefix + '-size', style.fontSize, lines, fluidConfig);
 
-			// lineHeight — kann responsive sein
-			addResponsiveVar(prefix + '-line-height', style.lineHeight, lines, responsiveLines);
+			// lineHeight — fluid clamp() oder statisch
+			addFluidVar(prefix + '-line-height', style.lineHeight, lines, fluidConfig);
 
-			// letterSpacing — kann responsive sein
-			addResponsiveVar(prefix + '-letter-spacing', style.letterSpacing, lines, responsiveLines);
+			// letterSpacing — fluid clamp() oder statisch
+			addFluidVar(prefix + '-letter-spacing', style.letterSpacing, lines, fluidConfig);
 		}
 	}
 }
 
-function addResponsiveVar(varName, value, lines, responsiveLines) {
+/**
+ * Generates a CSS variable with optional clamp() for fluid values.
+ * Static string → plain value. Fluid { min, max } → clamp().
+ * Legacy { base, md, lg } → treated as { min: base, max: lg||md } for backward compat.
+ */
+function addFluidVar(varName, value, lines, fluidConfig) {
 	if (value == null) return;
 
 	if (typeof value === 'object') {
-		if (value.base) lines.push(`  ${varName}: ${value.base};`);
-		for (const [bp, bpValue] of Object.entries(value)) {
-			if (bp !== 'base' && bpValue) {
-				responsiveLines[bp] = responsiveLines[bp] || [];
-				responsiveLines[bp].push(`  ${varName}: ${bpValue};`);
-			}
+		let min, max;
+		if ('min' in value) {
+			min = value.min;
+			max = value.max || value.min;
+		} else if ('base' in value) {
+			// Legacy backward compatibility
+			min = value.base;
+			max = value.lg || value.md || value.base;
+		} else {
+			return;
+		}
+
+		if (min === max || !max) {
+			lines.push(`  ${varName}: ${min};`);
+		} else {
+			const clampValue = buildClampValue(min, max, fluidConfig);
+			lines.push(`  ${varName}: ${clampValue};`);
 		}
 	} else {
 		lines.push(`  ${varName}: ${value};`);
 	}
 }
 
+/**
+ * Builds a CSS clamp() expression (Utopia formula).
+ * clamp(min, intercept + slope·vw, max)
+ * slope = (max - min) / (maxVP - minVP)
+ * intercept = min - slope * minVP
+ */
+function buildClampValue(min, max, fluidConfig) {
+	const minVP = parseFloat(fluidConfig?.minViewport || '20');
+	const maxVP = parseFloat(fluidConfig?.maxViewport || '90');
+
+	const minNum = parseFloat(min);
+	const maxNum = parseFloat(max);
+	const unit = min.replace(/[\d.\-]/g, '') || 'rem';
+
+	// Unitless values (like lineHeight '1.5') can't use vw-based clamp
+	if (!unit || unit === '') {
+		return min;
+	}
+
+	if (isNaN(minNum) || isNaN(maxNum) || minVP >= maxVP) {
+		return min;
+	}
+
+	const slope = (maxNum - minNum) / (maxVP - minVP);
+	const intercept = minNum - slope * minVP;
+
+	const slopeVw = +(slope * 100).toFixed(3);
+	const interceptUnit = +intercept.toFixed(3);
+
+	let preferred;
+	if (interceptUnit === 0) {
+		preferred = `${slopeVw}vw`;
+	} else if (interceptUnit > 0) {
+		preferred = `${interceptUnit}${unit} + ${slopeVw}vw`;
+	} else {
+		preferred = `${interceptUnit}${unit} + ${slopeVw}vw`;
+	}
+
+	return `clamp(${min}, ${preferred}, ${max})`;
+}
+
 function findFont(t, fontName) {
 	if (!t.typography?.fonts) return null;
 	return t.typography.fonts.find(f => f.name === fontName);

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

@@ -22,6 +22,27 @@ import {
 } from './design-tokens-v2.js';
 
 
+// ─── Fluid Typography Migration ──────────────────────────────────────────────
+
+/**
+ * Migriert einen responsiven Wert von Breakpoint-Format zu Fluid-Format.
+ * { base: '2.5rem', md: '3.5rem', lg: '4.5rem' } → { min: '2.5rem', max: '4.5rem' }
+ * Bereits im Fluid-Format ({ min, max }) → unverändert.
+ * Statische Werte (Strings) → unverändert.
+ */
+export function migrateResponsiveToFluid(value) {
+	if (value == null || typeof value !== 'object') return value;
+	if ('min' in value) return value; // Already fluid
+	if ('base' in value) {
+		const min = value.base;
+		const max = value.lg || value.md || value.base;
+		if (min === max) return min; // Collapse to static
+		return { min, max };
+	}
+	return value;
+}
+
+
 // ─── Hauptfunktionen ────────────────────────────────────────────────────────
 
 /**
@@ -112,8 +133,30 @@ export function validateDesignTokensV2(tokens) {
 		}
 	}
 
+	// Migrate breakpoint-based responsive values to fluid { min, max }
+	for (const voice of TEXT_VOICES) {
+		for (const level of TEXT_LEVELS) {
+			const style = v2.typography.textStyles[voice]?.[level];
+			if (style) {
+				style.fontSize = migrateResponsiveToFluid(style.fontSize);
+				style.lineHeight = migrateResponsiveToFluid(style.lineHeight);
+				style.letterSpacing = migrateResponsiveToFluid(style.letterSpacing);
+			}
+		}
+	}
+
+	// Ensure fluidConfig exists
+	if (!v2.typography.fluidConfig) {
+		v2.typography.fluidConfig = { minViewport: '20rem', maxViewport: '90rem' };
+	}
+
 	// Aliases
 	if (!v2.typography.aliases) v2.typography.aliases = { ...DEFAULT_TEXT_ALIASES };
+	// Migrate fine → lead
+	if (v2.typography.aliases.fine && !v2.typography.aliases.lead) {
+		v2.typography.aliases.lead = 'body-1';
+		delete v2.typography.aliases.fine;
+	}
 
 	// ── Buttons validieren ──
 	if (!v2.buttons) v2.buttons = structuredClone(defaultDesignTokensV2.buttons);

package/src/design-tokens-v2.js

@@ -663,7 +663,7 @@ export const DEFAULT_TEXT_ALIASES = {
 	label: 'ui-3',
 	caption: 'body-4',
 	overline: 'accent-4',
-	fine: 'body-5'
+	lead: 'body-1'
 };
 
 
@@ -748,6 +748,10 @@ export const defaultDesignTokensV2 = {
 
 	// ── Typografie ──
 	typography: {
+		fluidConfig: {
+			minViewport: '20rem',   // 320px
+			maxViewport: '90rem'    // 1440px
+		},
 		fonts: [
 			{
 				name: 'Inter',
@@ -766,15 +770,15 @@ export const defaultDesignTokensV2 = {
 			display: {
 				1: {
 					font: 'Inter',
-					fontSize: { base: '2.5rem', md: '3.5rem', lg: '4.5rem' },
+					fontSize: { min: '2.5rem', max: '4.5rem' },
 					fontWeight: 700,
-					lineHeight: { base: '1.15', md: '1.1' },
+					lineHeight: '1.1',
 					letterSpacing: '-0.02em',
 					textTransform: 'none'
 				},
 				2: {
 					font: 'Inter',
-					fontSize: { base: '2rem', md: '2.5rem', lg: '3rem' },
+					fontSize: { min: '2rem', max: '3rem' },
 					fontWeight: 700,
 					lineHeight: '1.15',
 					letterSpacing: '-0.015em',
@@ -782,7 +786,7 @@ export const defaultDesignTokensV2 = {
 				},
 				3: {
 					font: 'Inter',
-					fontSize: { base: '1.5rem', md: '1.75rem', lg: '2rem' },
+					fontSize: { min: '1.5rem', max: '2rem' },
 					fontWeight: 600,
 					lineHeight: '1.2',
 					letterSpacing: '-0.01em',
@@ -790,7 +794,7 @@ export const defaultDesignTokensV2 = {
 				},
 				4: {
 					font: 'Inter',
-					fontSize: { base: '1.25rem', md: '1.5rem' },
+					fontSize: { min: '1.25rem', max: '1.5rem' },
 					fontWeight: 600,
 					lineHeight: '1.3',
 					letterSpacing: '-0.005em',
@@ -798,7 +802,7 @@ export const defaultDesignTokensV2 = {
 				},
 				5: {
 					font: 'Inter',
-					fontSize: { base: '1.125rem', md: '1.25rem' },
+					fontSize: { min: '1.125rem', max: '1.25rem' },
 					fontWeight: 600,
 					lineHeight: '1.3',
 					letterSpacing: '0em',
@@ -808,7 +812,7 @@ export const defaultDesignTokensV2 = {
 			body: {
 				1: {
 					font: 'Inter',
-					fontSize: { base: '1.125rem', md: '1.25rem' },
+					fontSize: { min: '1.125rem', max: '1.25rem' },
 					fontWeight: 400,
 					lineHeight: '1.6',
 					letterSpacing: '0em',
@@ -892,7 +896,7 @@ export const defaultDesignTokensV2 = {
 			accent: {
 				1: {
 					font: 'Inter',
-					fontSize: { base: '1.5rem', md: '1.75rem', lg: '2rem' },
+					fontSize: { min: '1.5rem', max: '2rem' },
 					fontWeight: 400,
 					lineHeight: '1.5',
 					letterSpacing: '0em',
@@ -900,7 +904,7 @@ export const defaultDesignTokensV2 = {
 				},
 				2: {
 					font: 'Inter',
-					fontSize: { base: '1.25rem', md: '1.5rem' },
+					fontSize: { min: '1.25rem', max: '1.5rem' },
 					fontWeight: 400,
 					lineHeight: '1.4',
 					letterSpacing: '0em',

package/src/index.js

@@ -11,7 +11,7 @@ import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, g
 // V2 Design Tokens
 import { defaultDesignTokensV2, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_STATUS_SEMANTIC_MAPPINGS, getDefaultMappingsForWorld, DEFAULT_TEXT_ALIASES } from './design-tokens-v2.js';
 import { generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2 } from './design-tokens-v2-css.js';
-import { migrateDesignTokensV1toV2, validateDesignTokensV2 } from './design-tokens-v2-migrate.js';
+import { migrateDesignTokensV1toV2, validateDesignTokensV2, migrateResponsiveToFluid } from './design-tokens-v2-migrate.js';
 
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
@@ -29,4 +29,4 @@ function getMotionRuntime() {
 export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };
 
 // V2 exports
-export { defaultDesignTokensV2, generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2, migrateDesignTokensV1toV2, validateDesignTokensV2, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_STATUS_SEMANTIC_MAPPINGS, getDefaultMappingsForWorld, DEFAULT_TEXT_ALIASES };
+export { defaultDesignTokensV2, generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2, migrateDesignTokensV1toV2, validateDesignTokensV2, migrateResponsiveToFluid, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_STATUS_SEMANTIC_MAPPINGS, getDefaultMappingsForWorld, DEFAULT_TEXT_ALIASES };