@webmate-studio/builder 0.1.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@webmate-studio/builder",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Webmate Studio Component Builder",
+  "keywords": [
+    "webmate",
+    "builder",
+    "web-components"
+  ],
+  "author": "Michael Wischang",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webmate-studio/builder.git"
+  },
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "dom-serializer": "^2.0.0",
+    "esbuild": "^0.19.0",
+    "glob": "^10.3.0",
+    "htmlparser2": "^9.0.0",
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/cli": "^4.1.0"
+  }
+}

package/src/build.js

@@ -0,0 +1,398 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, statSync, cpSync } from 'fs';
+import { join, dirname, relative, extname, basename } from 'path';
+import { glob } from 'glob';
+import { parseComponent } from '../../parser/src/index.js';
+import { loadConfig, logger } from '../../core/src/index.js';
+import { cleanComponentHTML, extractStyles } from './html-cleaner.js';
+import { generateManifest } from './manifest.js';
+import { generateComponentCSS } from './tailwind-generator-v4.js';
+import { bundleComponentIslands } from '../../cli/src/utils/bundler.js';
+import { parseDocument } from 'htmlparser2';
+import { DomUtils } from 'htmlparser2';
+import render from 'dom-serializer';
+
+/**
+ * Add scoping attribute to root element of component
+ * @param {string} html - Component HTML
+ * @param {string} componentName - Name of component
+ * @returns {string} HTML with scoping attribute
+ */
+function addScopingAttribute(html, componentName) {
+	const dom = parseDocument(html);
+	const scopeId = `wm-${componentName.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
+
+	// Find first element (skip text nodes and comments)
+	const rootElement = DomUtils.findOne((elem) => elem.type === 'tag', dom.children, true);
+
+	if (rootElement) {
+		// Add data-wm-component attribute
+		if (!rootElement.attribs) {
+			rootElement.attribs = {};
+		}
+		rootElement.attribs['data-wm-component'] = scopeId;
+	}
+
+	return render(dom, {
+		encodeEntities: false,
+		selfClosingTags: true
+	});
+}
+
+/**
+ * Scope CSS to component using attribute selector
+ * @param {string} css - Component CSS
+ * @param {string} componentName - Name of component
+ * @returns {string} Scoped CSS
+ */
+function scopeCSS(css, componentName) {
+	if (!css || css.trim() === '') return '';
+
+	const scopeId = `wm-${componentName.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
+	const scopeSelector = `[data-wm-component="${scopeId}"]`;
+
+	// Split CSS into rules
+	const rules = [];
+	let currentRule = '';
+	let braceDepth = 0;
+
+	for (let i = 0; i < css.length; i++) {
+		const char = css[i];
+		currentRule += char;
+
+		if (char === '{') braceDepth++;
+		if (char === '}') {
+			braceDepth--;
+			if (braceDepth === 0) {
+				rules.push(currentRule.trim());
+				currentRule = '';
+			}
+		}
+	}
+
+	// Scope each rule
+	const scopedRules = rules.map(rule => {
+		// Skip @keyframes, @media, @supports, etc.
+		if (rule.startsWith('@')) {
+			// For @media, @supports, etc., scope the rules inside
+			if (rule.includes('{')) {
+				const parts = rule.split('{');
+				const atRule = parts[0] + '{';
+				const innerCSS = parts.slice(1).join('{');
+				const scopedInner = scopeCSS(innerCSS, componentName);
+				return atRule + scopedInner;
+			}
+			return rule;
+		}
+
+		// Extract selector and declarations
+		const selectorEnd = rule.indexOf('{');
+		if (selectorEnd === -1) return rule;
+
+		const selectors = rule.substring(0, selectorEnd).trim();
+		const declarations = rule.substring(selectorEnd);
+
+		// Split multiple selectors
+		const selectorList = selectors.split(',').map(s => s.trim());
+
+		// Scope each selector
+		const scopedSelectors = selectorList.map(selector => {
+			// Skip :root, html, body
+			if (selector.match(/^(:root|html|body)(\s|$|:)/)) {
+				return selector;
+			}
+
+			// Add scope attribute before first selector
+			return `${scopeSelector} ${selector}`;
+		});
+
+		return scopedSelectors.join(', ') + declarations;
+	});
+
+	return scopedRules.join('\n\n');
+}
+
+/**
+ * Build components from source to distribution
+ * @param {Object} options - Build options
+ * @returns {Promise<Object>} Build result with manifest
+ */
+export async function build(options = {}) {
+	const config = await loadConfig();
+	const componentsDir = options.componentsDir || config.components.path;
+	const outputDir = options.outputDir || config.output.dir;
+	const minify = options.minify ?? config.output.minify;
+
+	logger.info('Building components...');
+	logger.debug('Components dir:', componentsDir);
+	logger.debug('Output dir:', outputDir);
+
+	// Create output directory
+	if (!existsSync(outputDir)) {
+		mkdirSync(outputDir, { recursive: true });
+	}
+
+	// Find all component files (both single-file and directory-based)
+	const componentFiles = await glob('**/*.html', {
+		cwd: componentsDir,
+		absolute: false,
+		ignore: ['**/node_modules/**']
+	});
+
+	// Also find directory-based components (with component.html)
+	const dirComponents = await glob('**/component.html', {
+		cwd: componentsDir,
+		absolute: false,
+		ignore: ['**/node_modules/**']
+	});
+
+	// Combine and deduplicate
+	const allComponents = [...new Set([...componentFiles, ...dirComponents])];
+
+	logger.info(`Found ${allComponents.length} components`);
+
+	const manifest = {
+		version: '1.0.0',
+		components: [],
+		styles: [],
+		metadata: {
+			buildTime: new Date().toISOString(),
+			minified: minify
+		}
+	};
+
+	// Process each component
+	for (const file of allComponents) {
+		const componentPath = join(componentsDir, file);
+		const html = readFileSync(componentPath, 'utf8');
+
+		try {
+			// Parse component to extract schema
+			const component = parseComponent(html, file);
+
+			// Extract and scope component styles
+			const { html: htmlWithoutStyles, css: componentCSS } = extractStyles(html);
+
+			// Clean HTML (remove wm: attributes)
+			const cleanHTML = cleanComponentHTML(htmlWithoutStyles);
+
+			// Add scoping attribute to root element
+			const scopedHTML = addScopingAttribute(cleanHTML, component.name);
+
+			// Determine if this is a directory-based component
+			const isDirectoryComponent = file.endsWith('component.html');
+			const componentDir = isDirectoryComponent ? dirname(join(componentsDir, file)) : null;
+
+			// For directory-based components, load component.json to get the correct name
+			if (isDirectoryComponent && componentDir) {
+				const componentJsonPath = join(componentDir, 'component.json');
+				if (existsSync(componentJsonPath)) {
+					try {
+						const componentJson = JSON.parse(readFileSync(componentJsonPath, 'utf8'));
+						if (componentJson.name) {
+							component.name = componentJson.name;
+							// Also merge props from component.json
+							if (componentJson.props) {
+								component.props = { ...component.props, ...componentJson.props };
+							}
+						}
+					} catch (error) {
+						logger.warn(`Failed to parse component.json for ${file}: ${error.message}`);
+					}
+				}
+			}
+
+			// Generate output filename
+			const outputFile = file.replace(/\.html$/, '.wm.html');
+			const outputPath = join(outputDir, outputFile);
+
+			// Ensure output directory exists
+			const outputFileDir = dirname(outputPath);
+			if (!existsSync(outputFileDir)) {
+				mkdirSync(outputFileDir, { recursive: true });
+			}
+
+			// Write scoped HTML
+			writeFileSync(outputPath, scopedHTML, 'utf8');
+
+			// Scope and write component CSS if it exists
+			let componentCSSFile = null;
+			if (componentCSS) {
+				const scopedCSS = scopeCSS(componentCSS, component.name);
+				const componentCSSFileName = file.replace(/\.html$/, '.component.css');
+				const componentCSSPath = join(outputDir, componentCSSFileName);
+				writeFileSync(componentCSSPath, scopedCSS, 'utf8');
+				componentCSSFile = componentCSSFileName;
+				logger.debug(`Generated scoped CSS for ${component.name}`);
+			}
+
+			// Collect all HTML for Tailwind scanning (including islands)
+			let allHTML = scopedHTML;
+
+			// For directory-based components, also scan island files for Tailwind classes
+			if (isDirectoryComponent && componentDir) {
+				const islandsSourceDir = join(componentDir, 'islands');
+				if (existsSync(islandsSourceDir)) {
+					// Scan Svelte, JS, and JSX files for Tailwind classes
+					const islandFiles = readdirSync(islandsSourceDir).filter(f =>
+						f.endsWith('.svelte') || f.endsWith('.js') || f.endsWith('.jsx')
+					);
+					for (const islandFile of islandFiles) {
+						const islandPath = join(islandsSourceDir, islandFile);
+						const islandContent = readFileSync(islandPath, 'utf8');
+						allHTML += '\n' + islandContent;
+					}
+				}
+			}
+
+			// Generate Tailwind CSS for this component
+			logger.info(`Generating Tailwind CSS for ${component.name}...`);
+			const { css, classes } = await generateComponentCSS(allHTML, {
+				minify: minify,
+				designTokens: options.designTokens // Pass design tokens to Tailwind generator
+			});
+
+			// Write CSS file
+			const cssFile = file.replace(/\.html$/, '.tailwind.css');
+			const cssPath = join(outputDir, cssFile);
+			writeFileSync(cssPath, css, 'utf8');
+
+			logger.debug(`Found ${classes.length} Tailwind classes in ${component.name}`);
+
+			// Component manifest entry
+			const manifestEntry = {
+				name: component.name,
+				type: component.type,
+				file: outputFile,
+				cssFile: cssFile,
+				componentCSSFile: componentCSSFile, // Scoped component CSS
+				tailwindClasses: classes,
+				props: component.props,
+				conditionals: component.conditionals,
+				loops: component.loops,
+				source: file
+			};
+
+			// Handle directory-based components (islands + assets)
+			if (isDirectoryComponent && componentDir) {
+				const componentOutputDir = dirname(outputPath);
+
+				// Bundle islands if they exist
+				const islandsSourceDir = join(componentDir, 'islands');
+				if (existsSync(islandsSourceDir)) {
+					logger.info(`Bundling islands for ${component.name}...`);
+					const islandsOutputDir = join(componentOutputDir, 'islands');
+
+					const bundleResult = await bundleComponentIslands(componentDir, islandsOutputDir);
+
+					if (bundleResult.success && bundleResult.islands.length > 0) {
+						manifestEntry.islands = bundleResult.islands.map((island) => ({
+							file: `${dirname(file)}/islands/${island.file}`,
+							size: island.size
+						}));
+						logger.success(`Bundled ${bundleResult.islands.length} islands for ${component.name}`);
+					} else if (!bundleResult.success) {
+						logger.error(`Failed to bundle islands for ${component.name}`);
+					}
+				}
+
+				// Copy assets if they exist
+				const assetsSourceDir = join(componentDir, 'assets');
+				if (existsSync(assetsSourceDir)) {
+					logger.info(`Copying assets for ${component.name}...`);
+					const assetsOutputDir = join(componentOutputDir, 'assets');
+
+					cpSync(assetsSourceDir, assetsOutputDir, { recursive: true });
+
+					const assetFiles = readdirSync(assetsSourceDir, { recursive: true });
+					manifestEntry.assets = assetFiles
+						.filter((f) => statSync(join(assetsSourceDir, f)).isFile())
+						.map((f) => `${dirname(file)}/assets/${f}`);
+
+					logger.success(`Copied ${manifestEntry.assets.length} assets for ${component.name}`);
+				}
+			}
+
+			// Add to manifest
+			manifest.components.push(manifestEntry);
+
+			logger.success(`Built ${component.name} → ${outputFile} + ${cssFile}`);
+		} catch (error) {
+			logger.error(`Failed to build ${file}:`, error.message);
+			throw error;
+		}
+	}
+
+	// Copy styles
+	if (config.components.styles && config.components.styles.length > 0) {
+		const stylesDir = join(outputDir, 'styles');
+		if (!existsSync(stylesDir)) {
+			mkdirSync(stylesDir, { recursive: true });
+		}
+
+		for (const stylePath of config.components.styles) {
+			const absolutePath = join(process.cwd(), stylePath);
+			if (existsSync(absolutePath)) {
+				const styleContent = readFileSync(absolutePath, 'utf8');
+				const fileName = basename(stylePath);
+				const outputPath = join(stylesDir, fileName);
+				writeFileSync(outputPath, styleContent, 'utf8');
+
+				manifest.styles.push({
+					file: `styles/${fileName}`,
+					source: stylePath
+				});
+
+				logger.success(`Copied ${stylePath} → styles/${fileName}`);
+			} else {
+				logger.warn(`Style file not found: ${stylePath}`);
+			}
+		}
+	}
+
+	// Copy islands if configured
+	if (config.components.islands?.path) {
+		const islandsDir = config.components.islands.path;
+		if (existsSync(islandsDir)) {
+			const islandFiles = await glob('**/*.{js,ts,lit.js}', {
+				cwd: islandsDir,
+				absolute: false
+			});
+
+			if (islandFiles.length > 0) {
+				const outputIslandsDir = join(outputDir, 'islands');
+				if (!existsSync(outputIslandsDir)) {
+					mkdirSync(outputIslandsDir, { recursive: true });
+				}
+
+				for (const file of islandFiles) {
+					const sourcePath = join(islandsDir, file);
+					const content = readFileSync(sourcePath, 'utf8');
+					const outputPath = join(outputIslandsDir, file);
+
+					// Ensure subdirectories exist
+					const outputFileDir = dirname(outputPath);
+					if (!existsSync(outputFileDir)) {
+						mkdirSync(outputFileDir, { recursive: true });
+					}
+
+					writeFileSync(outputPath, content, 'utf8');
+					logger.success(`Copied island: ${file}`);
+				}
+
+				manifest.islands = {
+					framework: config.components.islands.framework || 'lit',
+					files: islandFiles
+				};
+			}
+		}
+	}
+
+	// Write manifest
+	const manifestPath = join(outputDir, 'manifest.json');
+	writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');
+
+	logger.success(`\nBuild complete! ${manifest.components.length} components built.`);
+	logger.info(`Output: ${outputDir}`);
+
+	return manifest;
+}

package/src/html-cleaner.js

@@ -0,0 +1,123 @@
+import { parseDocument } from 'htmlparser2';
+import { DomUtils } from 'htmlparser2';
+import render from 'dom-serializer';
+
+/**
+ * Clean component HTML by removing all wm: attributes
+ * Keeps the HTML structure intact, only removes markers
+ *
+ * @param {string} html - Original component HTML
+ * @returns {string} Cleaned HTML without wm: attributes
+ */
+export function cleanComponentHTML(html) {
+	const dom = parseDocument(html);
+
+	// Remove all wm: attributes from all elements
+	removeWmAttributes(dom);
+
+	// Remove <script wm:schema> tags
+	removeSchemaScripts(dom);
+
+	// Serialize back to HTML
+	return render(dom, {
+		encodeEntities: false,
+		selfClosingTags: true
+	});
+}
+
+/**
+ * Recursively remove metadata wm: attributes from DOM tree
+ * KEEPS runtime attributes like wm:if, wm:for, wm:prop:*
+ * @param {Object} node - DOM node
+ */
+function removeWmAttributes(node) {
+	if (node.type === 'tag' && node.attribs) {
+		// Only remove metadata attributes, keep runtime directives!
+		const metadataAttributes = ['wm:component', 'wm:description', 'wm:props', 'wm:schema'];
+
+		for (const attr in node.attribs) {
+			// Remove only metadata attributes, keep wm:if, wm:for, wm:prop:*, etc.
+			if (metadataAttributes.includes(attr)) {
+				delete node.attribs[attr];
+			}
+		}
+
+		// Also remove standalone 'wm' attribute
+		if ('wm' in node.attribs) {
+			delete node.attribs.wm;
+		}
+	}
+
+	// Process children
+	if (node.children) {
+		for (const child of node.children) {
+			removeWmAttributes(child);
+		}
+	}
+
+	// Process childNodes (alternative structure)
+	if (node.childNodes) {
+		for (const child of node.childNodes) {
+			removeWmAttributes(child);
+		}
+	}
+}
+
+/**
+ * Remove all metadata <script> tags with wm: attributes
+ * Removes: wm:schema, wm:description, wm:props, wm=""
+ * @param {Object} dom - DOM tree
+ */
+function removeSchemaScripts(dom) {
+	const schemaScripts = DomUtils.findAll(
+		(elem) =>
+			elem.type === 'script' &&
+			elem.attribs &&
+			(elem.attribs['wm:schema'] !== undefined ||
+			 elem.attribs['wm:description'] !== undefined ||
+			 elem.attribs['wm:props'] !== undefined ||
+			 elem.attribs.wm === ''),
+		dom.children || []
+	);
+
+	for (const script of schemaScripts) {
+		DomUtils.removeElement(script);
+	}
+}
+
+/**
+ * Extract inline styles from component HTML
+ * Returns both cleaned HTML and extracted CSS
+ *
+ * @param {string} html - Component HTML
+ * @returns {Object} { html: string, css: string }
+ */
+export function extractStyles(html) {
+	const dom = parseDocument(html);
+	let css = '';
+
+	// Find all <style> tags
+	const styleTags = DomUtils.findAll(
+		(elem) => elem.name === 'style',
+		dom.children
+	);
+
+	for (const styleTag of styleTags) {
+		const styleContent = DomUtils.textContent(styleTag);
+		css += styleContent + '\n';
+
+		// Remove style tag from DOM
+		DomUtils.removeElement(styleTag);
+	}
+
+	// Serialize remaining HTML
+	const cleanHtml = render(dom, {
+		encodeEntities: false,
+		selfClosingTags: true
+	});
+
+	return {
+		html: cleanHtml.trim(),
+		css: css.trim()
+	};
+}

package/src/index.js

@@ -0,0 +1,3 @@
+import { build } from './build.js';
+
+export { build };

package/src/manifest.js

@@ -0,0 +1,72 @@
+/**
+ * Generate component collection manifest
+ * The manifest contains all metadata needed by the CMS to:
+ * - Register components
+ * - Validate props
+ * - Render component forms
+ *
+ * @param {Array} components - Parsed components
+ * @param {Object} config - Build configuration
+ * @returns {Object} Manifest object
+ */
+export function generateManifest(components, config = {}) {
+	return {
+		version: '1.0.0',
+		name: config.name || 'Component Collection',
+		description: config.description || '',
+		author: config.author || '',
+		components: components.map((component) => ({
+			name: component.name,
+			type: component.type,
+			file: component.file,
+			category: component.category || 'general',
+			description: component.description || '',
+			template: component.template || null,
+			props: component.props,
+			slots: component.slots || {},
+			conditionals: component.conditionals,
+			loops: component.loops,
+			preview: component.preview || null,
+			tags: component.tags || []
+		})),
+		styles: config.styles || [],
+		fonts: config.fonts || [],
+		islands: config.islands || null,
+		metadata: {
+			buildTime: new Date().toISOString(),
+			minified: config.minified || false,
+			framework: config.framework || null
+		}
+	};
+}
+
+/**
+ * Validate manifest structure
+ * @param {Object} manifest - Manifest to validate
+ * @throws {Error} If manifest is invalid
+ */
+export function validateManifest(manifest) {
+	if (!manifest.version) {
+		throw new Error('Manifest missing version');
+	}
+
+	if (!Array.isArray(manifest.components)) {
+		throw new Error('Manifest components must be an array');
+	}
+
+	for (const component of manifest.components) {
+		if (!component.name) {
+			throw new Error(`Component missing name: ${JSON.stringify(component)}`);
+		}
+
+		if (!component.file) {
+			throw new Error(`Component ${component.name} missing file`);
+		}
+
+		if (!component.type) {
+			throw new Error(`Component ${component.name} missing type`);
+		}
+	}
+
+	return true;
+}

package/src/tailwind-generator-v4.js

@@ -0,0 +1,317 @@
+/**
+ * Tailwind CSS v4 Generator for Components
+ * Generates scoped Tailwind CSS using Tailwind v4's new CSS-based configuration
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { writeFileSync, unlinkSync, mkdtempSync } from 'fs';
+import { join, dirname } from 'path';
+import { tmpdir } from 'os';
+import { fileURLToPath } from 'url';
+
+const execAsync = promisify(exec);
+
+// Get the directory where this module is located
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Find tailwindcss binary in builder package's node_modules
+const tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+
+/**
+ * Extract Tailwind classes from HTML content
+ * @param {string} html - HTML content
+ * @returns {Set<string>} Set of unique Tailwind classes
+ */
+export function extractTailwindClasses(html) {
+	const classes = new Set();
+
+	// Match class="..." and class='...'
+	const classRegex = /class=["']([^"']+)["']/g;
+	let match;
+
+	while ((match = classRegex.exec(html)) !== null) {
+		const classString = match[1];
+		// Split by whitespace and add each class
+		classString.split(/\s+/).forEach(cls => {
+			if (cls.trim()) {
+				classes.add(cls.trim());
+			}
+		});
+	}
+
+	return classes;
+}
+
+/**
+ * Generate CSS with custom theme colors and design tokens for Tailwind v4
+ * @param {Object} colors - Color definitions
+ * @param {Object} designTokens - Complete design tokens (optional)
+ * @returns {string} CSS with @theme directive
+ */
+function generateThemeCSS(colors, designTokens = null) {
+	let themeCSS = `@theme {\n`;
+
+	// Helper to flatten nested colors
+	function flattenColors(obj, prefix = '') {
+		let css = '';
+		for (const [key, value] of Object.entries(obj)) {
+			const colorKey = prefix ? `${prefix}-${key}` : key;
+
+			if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+				// Nested color (e.g., primary.light)
+				if (value.DEFAULT) {
+					css += `  --color-${colorKey}: ${value.DEFAULT};\n`;
+				}
+				css += flattenColors(value, colorKey);
+			} else {
+				// Simple color value
+				css += `  --color-${colorKey}: ${value};\n`;
+			}
+		}
+		return css;
+	}
+
+	themeCSS += flattenColors(colors);
+
+	// Add spacing if provided in design tokens
+	if (designTokens?.spacing) {
+		if (typeof designTokens.spacing === 'string') {
+			themeCSS += `  --spacing: ${designTokens.spacing};\n`;
+		}
+	}
+
+	themeCSS += `}\n`;
+
+	return themeCSS;
+}
+
+/**
+ * Generate Tailwind CSS for specific classes (Tailwind v4)
+ * @param {Set<string>|Array<string>} classes - Tailwind classes to include
+ * @param {Object} options - Generation options
+ * @param {Object} options.designTokens - Custom design tokens (optional)
+ * @param {boolean} options.minify - Minify output CSS
+ * @returns {Promise<string>} Generated CSS
+ */
+export async function generateTailwindCSS(classes, options = {}) {
+	const {
+		designTokens = null,
+		minify = true
+	} = options;
+
+	const classArray = Array.isArray(classes) ? classes : Array.from(classes);
+
+	if (classArray.length === 0) {
+		return '/* No Tailwind classes found */';
+	}
+
+	// Create temporary directory
+	const tempDir = mkdtempSync(join(tmpdir(), 'tailwind-gen-'));
+	const inputPath = join(tempDir, 'input.css');
+	const htmlPath = join(tempDir, 'content.html');
+
+	try {
+		// Default theme colors (complete design tokens)
+		const defaultColors = {
+			// Brand colors with variants
+			primary: {
+				DEFAULT: '#cf0ce9',
+				light: '#fb923c',
+				dark: '#c2410c'
+			},
+			secondary: {
+				DEFAULT: '#6366f1',
+				light: '#818cf8',
+				dark: '#4f46e5'
+			},
+
+			// Feedback colors with variants
+			success: {
+				DEFAULT: '#10b981',
+				light: '#34d399',
+				dark: '#059669'
+			},
+			error: {
+				DEFAULT: '#ef4444',
+				light: '#f87171',
+				dark: '#dc2626'
+			},
+			warning: {
+				DEFAULT: '#f59e0b',
+				light: '#fbbf24',
+				dark: '#d97706'
+			},
+			info: {
+				DEFAULT: '#3b82f6',
+				light: '#60a5fa',
+				dark: '#2563eb'
+			},
+
+			// Grays
+			gray: {
+				50: '#f9fafb',
+				100: '#f3f4f6',
+				200: '#e5e7eb',
+				300: '#d1d5db',
+				400: '#9ca3af',
+				500: '#6b7280',
+				600: '#4b5563',
+				700: '#374151',
+				800: '#1f2937',
+				900: '#111827'
+			},
+
+			// Semantic text colors
+			'text-body': '#374151',
+			'text-heading': '#111827',
+			'text-muted': '#6b7280',
+			'text-inverse': '#ffffff',
+
+			// Semantic background colors
+			'bg-default': '#ffffff',
+			'bg-subtle': '#f9fafb',
+			'bg-elevated': '#ffffff',
+			'bg-inverse': '#111827',
+
+			// Basic colors
+			black: '#000000',
+			white: '#ffffff'
+		};
+
+		// Merge with provided design tokens
+		let themeColors = defaultColors;
+		if (designTokens?.colors) {
+			const tokens = designTokens.colors;
+			themeColors = {
+				...defaultColors,
+				primary: {
+					DEFAULT: tokens.primary || defaultColors.primary.DEFAULT,
+					light: tokens.primaryLight || defaultColors.primary.light,
+					dark: tokens.primaryDark || defaultColors.primary.dark
+				},
+				secondary: {
+					DEFAULT: tokens.secondary || defaultColors.secondary.DEFAULT,
+					light: tokens.secondaryLight || defaultColors.secondary.light,
+					dark: tokens.secondaryDark || defaultColors.secondary.dark
+				},
+				success: {
+					DEFAULT: tokens.success || defaultColors.success.DEFAULT,
+					light: tokens.successLight || defaultColors.success.light,
+					dark: tokens.successDark || defaultColors.success.dark
+				},
+				error: {
+					DEFAULT: tokens.error || defaultColors.error.DEFAULT,
+					light: tokens.errorLight || defaultColors.error.light,
+					dark: tokens.errorDark || defaultColors.error.dark
+				},
+				warning: {
+					DEFAULT: tokens.warning || defaultColors.warning.DEFAULT,
+					light: tokens.warningLight || defaultColors.warning.light,
+					dark: tokens.warningDark || defaultColors.warning.dark
+				},
+				info: {
+					DEFAULT: tokens.info || defaultColors.info.DEFAULT,
+					light: tokens.infoLight || defaultColors.info.light,
+					dark: tokens.infoDark || defaultColors.info.dark
+				},
+				// Semantic colors
+				'text-body': tokens.textBody || defaultColors['text-body'],
+				'text-heading': tokens.textHeading || defaultColors['text-heading'],
+				'text-muted': tokens.textMuted || defaultColors['text-muted'],
+				'text-inverse': tokens.textInverse || defaultColors['text-inverse'],
+				'bg-default': tokens.bgDefault || defaultColors['bg-default'],
+				'bg-subtle': tokens.bgSubtle || defaultColors['bg-subtle'],
+				'bg-elevated': tokens.bgElevated || defaultColors['bg-elevated'],
+				'bg-inverse': tokens.bgInverse || defaultColors['bg-inverse'],
+				// Grays
+				gray: {
+					50: tokens.gray50 || defaultColors.gray[50],
+					100: tokens.gray100 || defaultColors.gray[100],
+					200: tokens.gray200 || defaultColors.gray[200],
+					300: tokens.gray300 || defaultColors.gray[300],
+					400: tokens.gray400 || defaultColors.gray[400],
+					500: tokens.gray500 || defaultColors.gray[500],
+					600: tokens.gray600 || defaultColors.gray[600],
+					700: tokens.gray700 || defaultColors.gray[700],
+					800: tokens.gray800 || defaultColors.gray[800],
+					900: tokens.gray900 || defaultColors.gray[900]
+				},
+				black: tokens.black || defaultColors.black,
+				white: tokens.white || defaultColors.white
+			};
+		}
+
+		// Create input CSS with Tailwind v4 syntax
+		const themeCSS = generateThemeCSS(themeColors);
+		const inputCSS = `
+@import "tailwindcss";
+
+${themeCSS}
+		`.trim();
+
+		writeFileSync(inputPath, inputCSS);
+
+		// Create dummy HTML file with all classes (for content scanning)
+		const dummyHTML = `<div class="${classArray.join(' ')}"></div>`;
+		writeFileSync(htmlPath, dummyHTML);
+
+		// Run Tailwind v4 CLI
+		// Tailwind v4 auto-detects HTML files in the same directory
+		const command = `node "${tailwindBinary}" -i "${inputPath}" ${minify ? '--minify' : ''}`;
+
+
+		// Set NODE_PATH so tailwindcss module can be resolved
+		const builderNodeModules = join(__dirname, "..", "node_modules");
+
+		const { stdout } = await execAsync(command, {
+			cwd: tempDir,
+			maxBuffer: 10 * 1024 * 1024,
+			env: {
+				...process.env,
+				NODE_PATH: builderNodeModules
+			}
+		});
+
+		return stdout.trim();
+
+	} catch (error) {
+		console.error('[Tailwind Generator v4] Error:', error);
+		throw new Error(`Failed to generate Tailwind CSS: ${error.message}`);
+	} finally {
+		// Cleanup temp files
+		try {
+			unlinkSync(inputPath);
+			unlinkSync(htmlPath);
+		} catch (e) {
+			// Ignore cleanup errors
+		}
+	}
+}
+
+/**
+ * Generate Tailwind CSS for a component HTML file
+ * @param {string} html - Component HTML content
+ * @param {Object} options - Generation options
+ * @returns {Promise<{css: string, classes: string[]}>} Generated CSS and extracted classes
+ */
+export async function generateComponentCSS(html, options = {}) {
+	// Extract classes from HTML
+	const classes = extractTailwindClasses(html);
+
+	if (classes.size === 0) {
+		return {
+			css: '/* No Tailwind classes found in component */\n',
+			classes: []
+		};
+	}
+
+	// Generate CSS
+	const css = await generateTailwindCSS(classes, options);
+
+	return {
+		css,
+		classes: Array.from(classes)
+	};
+}

package/src/tailwind-generator.js

@@ -0,0 +1,288 @@
+/**
+ * Tailwind CSS Generator for Components
+ * Generates scoped Tailwind CSS for each component based on used classes
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { writeFileSync, readFileSync, unlinkSync, mkdtempSync } from 'fs';
+import { join, dirname } from 'path';
+import { tmpdir } from 'os';
+import { fileURLToPath } from 'url';
+
+const execAsync = promisify(exec);
+
+// Get the directory where this module is located
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Find tailwindcss binary in builder package's node_modules
+const tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+
+/**
+ * Extract Tailwind classes from HTML content
+ * @param {string} html - HTML content
+ * @returns {Set<string>} Set of unique Tailwind classes
+ */
+export function extractTailwindClasses(html) {
+	const classes = new Set();
+
+	// Match class="..." and class='...'
+	const classRegex = /class=["']([^"']+)["']/g;
+	let match;
+
+	while ((match = classRegex.exec(html)) !== null) {
+		const classString = match[1];
+		// Split by whitespace and add each class
+		classString.split(/\s+/).forEach(cls => {
+			if (cls.trim()) {
+				classes.add(cls.trim());
+			}
+		});
+	}
+
+	return classes;
+}
+
+/**
+ * Generate Tailwind CSS for specific classes
+ * @param {Set<string>|Array<string>} classes - Tailwind classes to include
+ * @param {Object} options - Generation options
+ * @param {Object} options.designTokens - Custom design tokens (optional)
+ * @param {boolean} options.minify - Minify output CSS
+ * @returns {Promise<string>} Generated CSS
+ */
+export async function generateTailwindCSS(classes, options = {}) {
+	const {
+		designTokens = null,
+		minify = true
+	} = options;
+
+	const classArray = Array.isArray(classes) ? classes : Array.from(classes);
+
+	if (classArray.length === 0) {
+		return '/* No Tailwind classes found */';
+	}
+
+	// Create temporary directory
+	const tempDir = mkdtempSync(join(tmpdir(), 'tailwind-gen-'));
+	const configPath = join(tempDir, 'tailwind.config.cjs');
+	const inputPath = join(tempDir, 'input.css');
+	const htmlPath = join(tempDir, 'content.html');
+
+	try {
+		// Tailwind v4 uses CSS-based configuration
+		// Instead of config file, we generate CSS with custom properties and @theme
+
+		// Default theme colors (complete design tokens)
+		const defaultColors = {
+			// Brand colors with variants
+			primary: {
+				DEFAULT: '#cf0ce9',
+				light: '#fb923c',
+				dark: '#c2410c'
+			},
+			secondary: {
+				DEFAULT: '#6366f1',
+				light: '#818cf8',
+				dark: '#4f46e5'
+			},
+
+			// Feedback colors with variants
+			success: {
+				DEFAULT: '#10b981',
+				light: '#34d399',
+				dark: '#059669'
+			},
+			error: {
+				DEFAULT: '#ef4444',
+				light: '#f87171',
+				dark: '#dc2626'
+			},
+			warning: {
+				DEFAULT: '#f59e0b',
+				light: '#fbbf24',
+				dark: '#d97706'
+			},
+			info: {
+				DEFAULT: '#3b82f6',
+				light: '#60a5fa',
+				dark: '#2563eb'
+			},
+
+			// Grays
+			gray: {
+				50: '#f9fafb',
+				100: '#f3f4f6',
+				200: '#e5e7eb',
+				300: '#d1d5db',
+				400: '#9ca3af',
+				500: '#6b7280',
+				600: '#4b5563',
+				700: '#374151',
+				800: '#1f2937',
+				900: '#111827'
+			},
+
+			// Semantic text colors (direct utilities)
+			'text-body': '#374151',
+			'text-heading': '#111827',
+			'text-muted': '#6b7280',
+			'text-inverse': '#ffffff',
+
+			// Semantic background colors (direct utilities)
+			'bg-default': '#ffffff',
+			'bg-subtle': '#f9fafb',
+			'bg-elevated': '#ffffff',
+			'bg-inverse': '#111827',
+
+			// Basic colors
+			black: '#000000',
+			white: '#ffffff'
+		};
+
+		// Merge with provided design tokens
+		let themeColors = defaultColors;
+		if (designTokens?.colors) {
+			// Convert flat design tokens to nested structure
+			const tokens = designTokens.colors;
+			themeColors = {
+				...defaultColors,
+				// Override with provided tokens
+				primary: {
+					DEFAULT: tokens.primary || defaultColors.primary.DEFAULT,
+					light: tokens.primaryLight || defaultColors.primary.light,
+					dark: tokens.primaryDark || defaultColors.primary.dark
+				},
+				secondary: {
+					DEFAULT: tokens.secondary || defaultColors.secondary.DEFAULT,
+					light: tokens.secondaryLight || defaultColors.secondary.light,
+					dark: tokens.secondaryDark || defaultColors.secondary.dark
+				},
+				success: {
+					DEFAULT: tokens.success || defaultColors.success.DEFAULT,
+					light: tokens.successLight || defaultColors.success.light,
+					dark: tokens.successDark || defaultColors.success.dark
+				},
+				error: {
+					DEFAULT: tokens.error || defaultColors.error.DEFAULT,
+					light: tokens.errorLight || defaultColors.error.light,
+					dark: tokens.errorDark || defaultColors.error.dark
+				},
+				warning: {
+					DEFAULT: tokens.warning || defaultColors.warning.DEFAULT,
+					light: tokens.warningLight || defaultColors.warning.light,
+					dark: tokens.warningDark || defaultColors.warning.dark
+				},
+				info: {
+					DEFAULT: tokens.info || defaultColors.info.DEFAULT,
+					light: tokens.infoLight || defaultColors.info.light,
+					dark: tokens.infoDark || defaultColors.info.dark
+				},
+				// Semantic colors
+				'text-body': tokens.textBody || defaultColors['text-body'],
+				'text-heading': tokens.textHeading || defaultColors['text-heading'],
+				'text-muted': tokens.textMuted || defaultColors['text-muted'],
+				'text-inverse': tokens.textInverse || defaultColors['text-inverse'],
+				'bg-default': tokens.bgDefault || defaultColors['bg-default'],
+				'bg-subtle': tokens.bgSubtle || defaultColors['bg-subtle'],
+				'bg-elevated': tokens.bgElevated || defaultColors['bg-elevated'],
+				'bg-inverse': tokens.bgInverse || defaultColors['bg-inverse'],
+				// Grays
+				gray: {
+					50: tokens.gray50 || defaultColors.gray[50],
+					100: tokens.gray100 || defaultColors.gray[100],
+					200: tokens.gray200 || defaultColors.gray[200],
+					300: tokens.gray300 || defaultColors.gray[300],
+					400: tokens.gray400 || defaultColors.gray[400],
+					500: tokens.gray500 || defaultColors.gray[500],
+					600: tokens.gray600 || defaultColors.gray[600],
+					700: tokens.gray700 || defaultColors.gray[700],
+					800: tokens.gray800 || defaultColors.gray[800],
+					900: tokens.gray900 || defaultColors.gray[900]
+				},
+				black: tokens.black || defaultColors.black,
+				white: tokens.white || defaultColors.white
+			};
+		}
+
+		// Create Tailwind config with safelist
+		const config = {
+			content: [htmlPath],
+			safelist: classArray,
+			theme: {
+				extend: {
+					colors: themeColors,
+					fontFamily: designTokens?.typography?.fontFamily || {},
+					fontSize: designTokens?.typography?.fontSize || {},
+					spacing: designTokens?.spacing || {},
+					borderRadius: designTokens?.borderRadius || {},
+					boxShadow: designTokens?.boxShadow || {}
+				}
+			},
+			plugins: []
+		};
+
+		writeFileSync(configPath, `module.exports = ${JSON.stringify(config, null, 2)};`);
+
+		// Create input CSS with Tailwind directives
+		const inputCSS = `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+		`.trim();
+		writeFileSync(inputPath, inputCSS);
+
+		// Create dummy HTML file with all classes (for content scanning)
+		const dummyHTML = `<div class="${classArray.join(' ')}"></div>`;
+		writeFileSync(htmlPath, dummyHTML);
+
+		// Run Tailwind CLI using node to execute the CLI script
+		const command = `node "${tailwindBinary}" -c "${configPath}" -i "${inputPath}" ${minify ? '--minify' : ''}`;
+
+		const { stdout } = await execAsync(command, {
+			maxBuffer: 10 * 1024 * 1024 // 10MB buffer
+		});
+
+		return stdout.trim();
+
+	} catch (error) {
+		console.error('[Tailwind Generator] Error:', error);
+		throw new Error(`Failed to generate Tailwind CSS: ${error.message}`);
+	} finally {
+		// Cleanup temp files
+		try {
+			unlinkSync(configPath);
+			unlinkSync(inputPath);
+			unlinkSync(htmlPath);
+		} catch (e) {
+			// Ignore cleanup errors
+		}
+	}
+}
+
+/**
+ * Generate Tailwind CSS for a component HTML file
+ * @param {string} html - Component HTML content
+ * @param {Object} options - Generation options
+ * @returns {Promise<{css: string, classes: string[]}>} Generated CSS and extracted classes
+ */
+export async function generateComponentCSS(html, options = {}) {
+	// Extract classes from HTML
+	const classes = extractTailwindClasses(html);
+
+	if (classes.size === 0) {
+		return {
+			css: '/* No Tailwind classes found in component */\n',
+			classes: []
+		};
+	}
+
+	// Generate CSS
+	const css = await generateTailwindCSS(classes, options);
+
+	return {
+		css,
+		classes: Array.from(classes)
+	};
+}