@webmate-studio/builder 0.2.110 → 0.2.112

package/package.json

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

package/src/design-tokens.js

@@ -34,6 +34,7 @@ function generateSemanticColorUtilities(tokens) {
 		'infoLight': 'info-light',
 
 		// Base semantic colors (use prefixed names to avoid conflicts)
+		'bgBody': 'bg-body',
 		'bgBase': 'bg-default',
 		'bgElevated': 'bg-elevated',
 		'bgLifted': 'bg-lifted',
@@ -217,6 +218,7 @@ export const defaultDesignTokens = {
 		infoLight: '#dbeafe',
 
 		// Background Colors (Semantic)
+		bgBody: '#ffffff',      // Page/body background
 		bgBase: '#ffffff',
 		bgElevated: '#f9fafb',
 		bgLifted: '#ffffff',
@@ -648,6 +650,7 @@ export function generateTailwindV4Theme(tokens) {
 		if (tokens.colors.infoLight) lines.push(`  --color-info-light: ${tokens.colors.infoLight};`);
 
 		// Background colors (Semantic)
+		if (tokens.colors.bgBody) lines.push(`  --color-bg-body: ${tokens.colors.bgBody};`);
 		if (tokens.colors.bgBase) lines.push(`  --color-bg-base: ${tokens.colors.bgBase};`);
 		if (tokens.colors.bgElevated) lines.push(`  --color-bg-elevated: ${tokens.colors.bgElevated};`);
 		if (tokens.colors.bgLifted) lines.push(`  --color-bg-lifted: ${tokens.colors.bgLifted};`);
@@ -871,14 +874,17 @@ export function generateTailwindV4Theme(tokens) {
 
 	// Global styles (MUST be outside @theme block)
 	let globalStyles = `
-/* Global baseline font */
+/* Global baseline styles */
 body {
   font-family: var(--font-body);
+  background-color: var(--color-bg-body, var(--color-bg-base, #ffffff));
 }`;
 
 	// Generate utility classes for text styles
+	// IMPORTANT: Wrap in @layer components so color utilities (@layer utilities) can override textColor
 	if (tokens.textStyles) {
 		globalStyles += '\n\n/* Text Style Utilities */';
+		globalStyles += '\n@layer components {';
 		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
 			const kebabName = styleName
 				.replace(/([A-Z])/g, '-$1')
@@ -914,9 +920,11 @@ body {
 			}
 			globalStyles += `\n}`;
 		}
+		globalStyles += '\n}'; // Close @layer components for base text styles
 
 		// Generate responsive variants (sm:, md:, lg:, xl:, 2xl:) for Tailwind compatibility
 		// These allow switching to a different text style at a breakpoint: class="text-body lg:text-lead"
+		// IMPORTANT: @layer must be INSIDE @media for proper cascade behavior
 		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
 		const breakpointValues = {
 			sm: '640px',
@@ -927,6 +935,8 @@ body {
 		};
 
 		for (const bp of breakpointKeys) {
+			globalStyles += `\n@media (min-width: ${breakpointValues[bp]}) {`;
+			globalStyles += `\n@layer components {`;
 			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
 				const kebabName = styleName
 					.replace(/([A-Z])/g, '-$1')
@@ -937,7 +947,6 @@ body {
 
 				// Generate Tailwind-compatible breakpoint class: md:text-body
 				// Apply ALL properties of the text style, not just responsive values
-				globalStyles += `\n@media (min-width: ${breakpointValues[bp]}) {`;
 				globalStyles += `\n  .${bp}\\:${className} {`;
 
 				// Font family
@@ -981,8 +990,9 @@ body {
 				}
 
 				globalStyles += `\n  }`;
-				globalStyles += `\n}`;
 			}
+			globalStyles += '\n}'; // Close @layer components
+			globalStyles += '\n}'; // Close @media
 		}
 	}
 
@@ -1210,11 +1220,12 @@ export function generateCSSFromTokens(tokens) {
 
 	lines.push('}');
 
-	// Add global body font-family as baseline
+	// Add global body styles as baseline
 	lines.push('');
-	lines.push('/* Global baseline font */');
+	lines.push('/* Global baseline styles */');
 	lines.push('body {');
 	lines.push('  font-family: var(--font-body);');
+	lines.push('  background-color: var(--color-bg-body, var(--color-bg-base, #ffffff));');
 	lines.push('}');
 
 	// Generate utility classes for text styles

package/src/markdown.js

@@ -114,6 +114,7 @@ export function markdownToHtml(markdown, options = {}) {
 
 /**
  * Process markdown props: Convert markdown strings to HTML
+ * Supports nested arrays with markdown fields (e.g., items[].text)
  *
  * @param {Object} props - Component props
  * @param {Object} propSchema - Prop schema with format info (from component.json)
@@ -126,17 +127,35 @@ export function processMarkdownProps(props, propSchema = null, componentMetadata
 	const processed = { ...props };
 
 	for (const [key, value] of Object.entries(processed)) {
-		// Only process strings
+		const schema = propSchema?.[key];
+
+		// Handle arrays with nested markdown fields
+		if (Array.isArray(value) && schema?.type === 'array' && schema?.props) {
+			// Process each item in the array using the nested props schema
+			processed[key] = value.map(item => {
+				if (typeof item !== 'object' || item === null) return item;
+				return processMarkdownProps(item, schema.props, componentMetadata);
+			});
+			continue;
+		}
+
+		// Handle nested objects
+		if (typeof value === 'object' && value !== null && !Array.isArray(value) && schema?.props) {
+			processed[key] = processMarkdownProps(value, schema.props, componentMetadata);
+			continue;
+		}
+
+		// Only process strings for markdown conversion
 		if (typeof value !== 'string' || !value) continue;
 
 		// Check if this prop is markdown (via schema)
-		const isMarkdown = propSchema?.[key]?.format === 'markdown';
+		const isMarkdown = schema?.format === 'markdown';
 
 		if (isMarkdown) {
 			const options = {};
 
 			// Apply headingStartLevel from prop schema (preferred) or component metadata (fallback)
-			const headingStartLevel = propSchema?.[key]?.headingStartLevel || componentMetadata?.headingStartLevel;
+			const headingStartLevel = schema?.headingStartLevel || componentMetadata?.headingStartLevel;
 			if (headingStartLevel) {
 				options.headingStartLevel = headingStartLevel;
 			}

package/src/template-processor.js

@@ -145,6 +145,7 @@ class TemplateProcessor {
 	 * - {#each items as item (item.id)}
 	 * - {#each items as item, index (item.id)}
 	 * - {#each items as item}{:else}Empty state{/each}
+	 * - {#each Array(n) as _} or {#each Array(n) as _, index} (creates array of n elements)
 	 *
 	 * @param {string} html - HTML template with {#each} blocks
 	 * @param {Object} contextData - Data context for evaluation
@@ -162,7 +163,8 @@ class TemplateProcessor {
 
 		// Find all {#each} opening tags with optional index parameter and key
 		// Matches: {#each items as item} or {#each items as item, index} or {#each items as item (item.id)}
-		const openPattern = /\{#each\s+([a-zA-Z_][a-zA-Z0-9_.]*)\s+as\s+([a-zA-Z_][a-zA-Z0-9_]*)(?:,\s*([a-zA-Z_][a-zA-Z0-9_]*))?\s*(?:\(([^)]+)\))?\}/g;
+		// Also matches: {#each Array(n) as _} or {#each Array(expr) as _, index} for generating arrays
+		const openPattern = /\{#each\s+((?:[a-zA-Z_][a-zA-Z0-9_.]*|Array\([^)]+\)))\s+as\s+([a-zA-Z_][a-zA-Z0-9_]*)(?:,\s*([a-zA-Z_][a-zA-Z0-9_]*))?\s*(?:\(([^)]+)\))?\}/g;
 
 		let result = html;
 		let iteration = 0;
@@ -239,27 +241,62 @@ class TemplateProcessor {
 				foundMatch = true;
 				console.log(`${indent}[processEachLoops] iteration=${iteration}, FOUND: ${loopVar} in ${arrayPath}`);
 
-				// Parse array path: "items" or "item.subitems"
-				let pathParts = arrayPath.split('.');
+				let arrayValue;
+				let pathValid = true;
 
-				// If we're in a nested context and the path starts with the parent loop variable,
-				// strip it since the context IS that variable
-				if (depth > 0 && parentLoopVar && pathParts.length > 1 && pathParts[0] === parentLoopVar) {
-					console.log(`${indent}[processEachLoops] Stripping parent loop var "${parentLoopVar}" from path "${arrayPath}"`);
-					pathParts = pathParts.slice(1);
-				}
+				// Check for Array(n) pattern - creates an array of n elements
+				const arrayConstructorMatch = arrayPath.match(/^Array\(([^)]+)\)$/);
+				if (arrayConstructorMatch) {
+					const countExpr = arrayConstructorMatch[1].trim();
+					console.log(`${indent}[processEachLoops] Array constructor pattern detected: Array(${countExpr})`);
+
+					// Evaluate the expression to get the count
+					let count = 0;
+					try {
+						// First try to parse as a simple number
+						if (/^\d+$/.test(countExpr)) {
+							count = parseInt(countExpr, 10);
+						} else {
+							// Otherwise evaluate as expression (e.g., item.rating)
+							const rawValue = this.evaluateExpressionValue(countExpr, contextData);
+							// Convert to number (handles string values like "3" from CMS)
+							count = typeof rawValue === 'string' ? parseInt(rawValue, 10) : Number(rawValue);
+						}
+						console.log(`${indent}[processEachLoops] Array count evaluated to: ${count}`);
+					} catch (err) {
+						console.warn(`${indent}[processEachLoops] Failed to evaluate Array count expression "${countExpr}":`, err.message);
+						pathValid = false;
+					}
+
+					// Create array with 'count' undefined elements (like Array(n) in JavaScript)
+					// Use Number.isFinite to handle NaN and non-numeric values
+					if (pathValid && Number.isFinite(count) && count > 0) {
+						arrayValue = Array(count).fill(undefined);
+					} else {
+						arrayValue = [];
+					}
+				} else {
+					// Parse array path: "items" or "item.subitems"
+					let pathParts = arrayPath.split('.');
+
+					// If we're in a nested context and the path starts with the parent loop variable,
+					// strip it since the context IS that variable
+					if (depth > 0 && parentLoopVar && pathParts.length > 1 && pathParts[0] === parentLoopVar) {
+						console.log(`${indent}[processEachLoops] Stripping parent loop var "${parentLoopVar}" from path "${arrayPath}"`);
+						pathParts = pathParts.slice(1);
+					}
 
-				let arrayValue = contextData;
+					arrayValue = contextData;
 
-				// Navigate through path
-				let pathValid = true;
-				for (const part of pathParts) {
-					if (arrayValue === null || arrayValue === undefined) {
-						console.warn(`[Preview] Array path not found: ${arrayPath} (stopped at ${part})`);
-						pathValid = false;
-						break;
+					// Navigate through path
+					for (const part of pathParts) {
+						if (arrayValue === null || arrayValue === undefined) {
+							console.warn(`[Preview] Array path not found: ${arrayPath} (stopped at ${part})`);
+							pathValid = false;
+							break;
+						}
+						arrayValue = arrayValue[part];
 					}
-					arrayValue = arrayValue[part];
 				}
 
 				let replacement = '';
@@ -282,21 +319,25 @@ class TemplateProcessor {
 						console.log(`${indent}[Preview] Processing loop item #${index}: ${loopVar} in ${arrayPath}`, item);
 						let itemHtml = content;
 
-						// First, recursively process any nested loops with this item as context
-						// Pass loopVar as parentLoopVar so nested loops can strip it from paths
-						console.log(`${indent}[DEBUG] BEFORE nested processEachLoops - HTML snippet:`, itemHtml.substring(0, 300));
-						itemHtml = this.processEachLoops(itemHtml, item, depth + 1, loopVar);
-						console.log(`${indent}[DEBUG] AFTER nested processEachLoops - HTML snippet:`, itemHtml.substring(0, 300));
-
-						// Process class:name={loopVar.field} conditionals BEFORE replacing {loopVar.field}
-						// Use loop item as context so loop variables are available
-						const loopContext = { [loopVar]: item };
+						// Build loop context with the loop variable and index
+						// Also merge with parent context so nested expressions can access parent data
+						const loopContext = { ...contextData, [loopVar]: item };
 						if (indexVar) {
 							loopContext[indexVar] = index;
 						}
 						// Add the array itself to context (use the last part of the path as name)
 						const arrayName = arrayPath.split('.').pop();
-						loopContext[arrayName] = arrayValue;
+						if (arrayName && !arrayName.includes('(')) {
+							loopContext[arrayName] = arrayValue;
+						}
+
+						// First, recursively process any nested loops with the merged context
+						// Pass loopVar as parentLoopVar so nested loops can strip it from paths
+						console.log(`${indent}[DEBUG] BEFORE nested processEachLoops - HTML snippet:`, itemHtml.substring(0, 300));
+						itemHtml = this.processEachLoops(itemHtml, loopContext, depth + 1, loopVar);
+						console.log(`${indent}[DEBUG] AFTER nested processEachLoops - HTML snippet:`, itemHtml.substring(0, 300));
+
+						// Process class:name={loopVar.field} conditionals BEFORE replacing {loopVar.field}
 						itemHtml = this.processClassConditionals(itemHtml, loopContext);
 
 						// First: Replace attribute expressions with quoted values (e.g., alt={item.image.alt} or alt="{item.image.alt}" → alt="value")
@@ -393,14 +434,8 @@ class TemplateProcessor {
 						});
 
 						// Process {#if} conditionals within loop (supports {:else if})
-						// Merge loop variable with parent context for nested conditionals
-						const evalContext = { ...contextData, [loopVar]: item };
-						if (indexVar) {
-							evalContext[indexVar] = index;
-						}
-						// Add the array itself to context
-						evalContext[arrayName] = arrayValue;
-						itemHtml = this.processIfConditionals(itemHtml, evalContext, depth + 2);
+						// Use loopContext which already has parent context + loop variable + index
+						itemHtml = this.processIfConditionals(itemHtml, loopContext, depth + 2);
 
 						// Process complex expressions within loop (e.g., {item.image.src ? "Ja" : "Nein"})
 						// This handles expressions that couldn't be processed by the simple regex replacements above
@@ -419,7 +454,7 @@ class TemplateProcessor {
 
 							// Evaluate complex expressions with loop context
 							try {
-								const result = this.evaluateExpressionValue(expression, evalContext);
+								const result = this.evaluateExpressionValue(expression, loopContext);
 								if (result === undefined || result === null) {
 									return '';
 								}