@webmate-studio/builder 0.2.120 → 0.2.122

package/package.json

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

package/src/design-tokens.js

@@ -94,6 +94,12 @@ function generateSemanticColorUtilities(tokens) {
 			addUtility(className, 'color', colorVar);
 		} else if (className.startsWith('border-')) {
 			addUtility(className, 'border-color', colorVar);
+			// Also generate divide-* variant (border color on children via divide-y/divide-x)
+			const divideCls = className.replace('border-', 'divide-');
+			if (!processedClasses.has(divideCls)) {
+				processedClasses.add(divideCls);
+				utilities += `\n.${divideCls} > :not(:first-child) {\n  border-color: var(${colorVar});\n}`;
+			}
 		} else {
 			addUtility(`text-${className}`, 'color', colorVar);
 			addUtility(`bg-${className}`, 'background-color', colorVar);
@@ -134,6 +140,19 @@ function generateSemanticColorUtilities(tokens) {
 				utilities += `\n}`;
 			}
 		}
+
+		// Generate divide-* opacity variants for border-* classes
+		if (className.startsWith('border-')) {
+			const divideCls = className.replace('border-', 'divide-');
+			for (const step of opacitySteps) {
+				const opacityCls = `${divideCls}\\/${step}`;
+				if (processedClasses.has(opacityCls)) continue;
+				processedClasses.add(opacityCls);
+				utilities += `\n.${opacityCls} > :not(:first-child) {`;
+				utilities += `\n  border-color: color-mix(in srgb, var(${colorVar}) ${step}%, transparent);`;
+				utilities += `\n}`;
+			}
+		}
 	}
 
 	utilities += '\n}'; // Close @layer utilities

package/src/tailwind-generator.js

@@ -147,6 +147,32 @@ export function extractTailwindClasses(html) {
 		}
 	}
 
+	// Match .className = '...' and .className = "..." (vanilla JS DOM manipulation in Islands)
+	// Also matches .className = `...` template literals
+	const classNameAssignRegex = /\.className\s*=\s*['"]([^'"]+)['"]/g;
+	while ((match = classNameAssignRegex.exec(html)) !== null) {
+		match[1].split(/\s+/).forEach(cls => {
+			if (cls.trim()) classes.add(cls.trim());
+		});
+	}
+	// Template literal version: .className = `...`
+	const classNameTemplateRegex = /\.className\s*=\s*`([^`]*)`/g;
+	while ((match = classNameTemplateRegex.exec(html)) !== null) {
+		// Extract static parts (before/between/after ${...})
+		const content = match[1].replace(/\$\{[^}]*\}/g, ' ');
+		content.split(/\s+/).forEach(cls => {
+			if (cls.trim()) classes.add(cls.trim());
+		});
+	}
+
+	// Match classList.add('...') patterns
+	const classListAddRegex = /classList\.add\(\s*['"]([^'"]+)['"]/g;
+	while ((match = classListAddRegex.exec(html)) !== null) {
+		match[1].split(/\s+/).forEach(cls => {
+			if (cls.trim()) classes.add(cls.trim());
+		});
+	}
+
 	return classes;
 }