@webmate-studio/builder 0.2.75 → 0.2.77

package/build-service.js

@@ -168,6 +168,20 @@ async function buildComponent(payload) {
 			console.log(`[Build Service] Wrote ${assets.length} asset(s)`);
 		}
 
+		// Detect which islands are actually used in component.html (top-level islands)
+		// These become Custom Elements, others are just utilities/sub-components
+		const usedIslands = new Set();
+		if (html) {
+			// Find all custom elements in HTML (e.g. <MenuMobile />, <SearchModal />)
+			// Match: <ComponentName or <ComponentName> or <ComponentName/>
+			const componentTagRegex = /<([A-Z][a-zA-Z0-9]*)\s*\/?>/g;
+			let match;
+			while ((match = componentTagRegex.exec(html)) !== null) {
+				const componentName = match[1]; // e.g. "MenuMobile"
+				usedIslands.add(componentName);
+			}
+		}
+
 		// Build islands
 		const bundledIslands = [];
 		if (islands && islands.length > 0) {
@@ -189,12 +203,29 @@ async function buildComponent(payload) {
 				await writeFile(inputPath, content);
 			}
 
-			// SECOND: Bundle each island
+			// SECOND: Bundle only top-level islands (those used in component.html)
+			// Others are utilities/sub-components that get bundled via imports
 			for (const island of islands) {
+				// Extract component name from filename (e.g. "MenuMobile.svelte" → "MenuMobile")
+				const componentName = island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '');
+				const isTopLevel = usedIslands.has(componentName);
+
+				// Skip non-component files (e.g. .js utilities that aren't top-level islands)
+				if (!island.file.match(/\.(jsx?|tsx?|svelte|vue)$/)) {
+					console.log(`[Build Service] Skipping ${island.file} (utility file, not an island)`);
+					continue;
+				}
+
+				// Only bundle top-level islands (those referenced in HTML)
+				if (!isTopLevel) {
+					console.log(`[Build Service] Skipping ${island.file} (sub-component, will be bundled via import)`);
+					continue;
+				}
+
 				const inputPath = join(islandsDir, island.file);
 				const outputPath = join(islandsDir, island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '.js'));
 
-				console.log(`[Build Service] Bundling ${island.file}...`);
+				console.log(`[Build Service] Bundling ${island.file} (top-level island)...`);
 
 				// Bundle with esbuild (pass tmpDir for node_modules resolution)
 				const result = await bundleIsland(inputPath, outputPath, {
@@ -222,6 +253,10 @@ async function buildComponent(payload) {
 
 				console.log(`[Build Service] ✓ ${island.file} → ${outputFilename} (${(result.size / 1024).toFixed(2)}kb)`);
 			}
+
+			if (usedIslands.size > 0) {
+				console.log(`[Build Service] Detected ${usedIslands.size} top-level island(s): ${Array.from(usedIslands).join(', ')}`);
+			}
 		}
 
 		// Transform HTML: Convert <IslandName /> to <island-name> Custom Elements

package/package.json

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

package/src/design-tokens.js

@@ -32,53 +32,92 @@ function generateSemanticColorUtilities(tokens) {
 		'infoDark': 'info-dark',
 		'infoLight': 'info-light',
 
-		// Base semantic colors
-		'bgBase': 'default',
-		'bgElevated': 'elevated',
-		'bgLifted': 'lifted',
-		'textBase': 'default',
-		'textSubtle': 'subtle',
-		'textMuted': 'muted',
-		'borderBase': 'default',
-		'borderSubtle': 'subtle',
-		'borderMuted': 'muted',
+		// Base semantic colors (use prefixed names to avoid conflicts)
+		'bgBase': 'bg-default',
+		'bgElevated': 'bg-elevated',
+		'bgLifted': 'bg-lifted',
+		'textBase': 'text-default',
+		'textSubtle': 'text-subtle',
+		'textMuted': 'text-muted',
+		'borderBase': 'border-default',
+		'borderSubtle': 'border-subtle',
+		'borderMuted': 'border-muted',
 
 		// Accent colors
-		'bgAccentBase': 'accent-default',
-		'bgAccentElevated': 'accent-elevated',
-		'bgAccentLifted': 'accent-lifted',
-		'textAccentBase': 'accent-default',
-		'textAccentSubtle': 'accent-subtle',
-		'textAccentMuted': 'accent-muted',
-		'borderAccentBase': 'accent-default',
-		'borderAccentSubtle': 'accent-subtle',
-		'borderAccentMuted': 'accent-muted'
+		'bgAccentBase': 'bg-accent-default',
+		'bgAccentElevated': 'bg-accent-elevated',
+		'bgAccentLifted': 'bg-accent-lifted',
+		'textAccentBase': 'text-accent-default',
+		'textAccentSubtle': 'text-accent-subtle',
+		'textAccentMuted': 'text-accent-muted',
+		'borderAccentBase': 'border-accent-default',
+		'borderAccentSubtle': 'border-accent-subtle',
+		'borderAccentMuted': 'border-accent-muted'
 	};
 
-	// Collect unique base names (deduplicate)
-	const processedNames = new Set();
+	// Collect unique class names (deduplicate)
+	const processedClasses = new Set();
 
-	for (const [tokenKey, baseName] of Object.entries(colorMap)) {
+	for (const [tokenKey, className] of Object.entries(colorMap)) {
 		if (!tokens.colors[tokenKey]) continue;
 
-		// Skip if we already processed this base name
-		if (processedNames.has(baseName)) continue;
-		processedNames.add(baseName);
-
 		const colorVar = `--color-${tokenKey.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
 
-		// Generate all three variants for every color
-		utilities += `\n.text-${baseName} {`;
-		utilities += `\n  color: var(${colorVar});`;
-		utilities += `\n}`;
+		// Determine which type(s) of utility classes to generate based on className prefix
+		// If className already has prefix (bg-, text-, border-), generate only that variant
+		// Otherwise generate all three variants
+
+		if (className.startsWith('bg-')) {
+			// Only generate bg-* utility
+			if (!processedClasses.has(className)) {
+				processedClasses.add(className);
+				utilities += `\n.${className} {`;
+				utilities += `\n  background-color: var(${colorVar});`;
+				utilities += `\n}`;
+			}
+		} else if (className.startsWith('text-')) {
+			// Only generate text-* utility
+			if (!processedClasses.has(className)) {
+				processedClasses.add(className);
+				utilities += `\n.${className} {`;
+				utilities += `\n  color: var(${colorVar});`;
+				utilities += `\n}`;
+			}
+		} else if (className.startsWith('border-')) {
+			// Only generate border-* utility
+			if (!processedClasses.has(className)) {
+				processedClasses.add(className);
+				utilities += `\n.${className} {`;
+				utilities += `\n  border-color: var(${colorVar});`;
+				utilities += `\n}`;
+			}
+		} else {
+			// No prefix: generate all three variants (for primary, secondary, etc.)
+			const textClass = `text-${className}`;
+			const bgClass = `bg-${className}`;
+			const borderClass = `border-${className}`;
+
+			if (!processedClasses.has(textClass)) {
+				processedClasses.add(textClass);
+				utilities += `\n.${textClass} {`;
+				utilities += `\n  color: var(${colorVar});`;
+				utilities += `\n}`;
+			}
 
-		utilities += `\n.bg-${baseName} {`;
-		utilities += `\n  background-color: var(${colorVar});`;
-		utilities += `\n}`;
+			if (!processedClasses.has(bgClass)) {
+				processedClasses.add(bgClass);
+				utilities += `\n.${bgClass} {`;
+				utilities += `\n  background-color: var(${colorVar});`;
+				utilities += `\n}`;
+			}
 
-		utilities += `\n.border-${baseName} {`;
-		utilities += `\n  border-color: var(${colorVar});`;
-		utilities += `\n}`;
+			if (!processedClasses.has(borderClass)) {
+				processedClasses.add(borderClass);
+				utilities += `\n.${borderClass} {`;
+				utilities += `\n  border-color: var(${colorVar});`;
+				utilities += `\n}`;
+			}
+		}
 	}
 
 	return utilities;