@webmate-studio/builder 0.2.122 → 0.2.125

package/package.json

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

package/src/bundler.js

@@ -25,7 +25,8 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 		sourcemap = true,
 		target = 'es2020',
 		format = 'esm',
-		componentDir = null  // NEW: Component directory for component-specific node_modules
+		componentDir = null,  // Component directory for component-specific node_modules
+		svelteCustomElement = true  // Set false for mount()-based islands (preview mode)
 	} = options;
 
 	try {
@@ -152,12 +153,12 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 						});
 					}
 				},
-				// Svelte support (Svelte 5 Web Components)
+				// Svelte support
 				esbuildSvelte({
 					compilerOptions: {
-						customElement: true, // Compile to Web Components
-						css: 'injected', // CSS always injected for custom elements
-						runes: true // Enable Svelte 5 runes ($props, $derived, $effect, etc.)
+						customElement: svelteCustomElement,
+						css: 'injected',
+						runes: true
 					}
 				})
 			],
@@ -191,7 +192,7 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 /**
  * Bundle all islands in a component directory
  */
-export async function bundleComponentIslands(componentDir, outputDir) {
+export async function bundleComponentIslands(componentDir, outputDir, options = {}) {
 	const islandsDir = path.join(componentDir, 'islands');
 
 	// Check if islands directory exists
@@ -230,8 +231,8 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 
 		console.log(pc.dim(`  Bundling ${islandFile}...`));
 
-		// Pass componentDir to bundler for component-specific node_modules resolution
-		const result = await bundleIsland(inputPath, outputPath, { componentDir });
+		// Pass componentDir and any extra options to bundler
+		const result = await bundleIsland(inputPath, outputPath, { componentDir, ...options });
 
 		if (result.success) {
 			const sizeKb = (result.size / 1024).toFixed(2);

package/src/design-tokens.js

@@ -811,12 +811,10 @@ export function generateTailwindV4Theme(tokens) {
 		lines.push(`  --radius: ${tokens.borderRadius};`);
 	}
 
-	// Container widths (specific breakpoints)
-	if (tokens.container) {
-		for (const [key, value] of Object.entries(tokens.container)) {
-			lines.push(`  --container-${key}: ${value};`);
-		}
-	}
+	// Container widths — NICHT als --container-* ausgeben!
+	// In Tailwind v4 steuern --container-* die max-w-* Klassen (z.B. --container-2xl = max-w-2xl).
+	// Die Werte hier sind Breakpoints (640px, 1536px), nicht max-width-Werte (42rem, 56rem).
+	// Breakpoints werden separat als --breakpoint-* ausgegeben.
 
 	// Breakpoints
 	if (tokens.breakpoints) {
@@ -1221,10 +1219,8 @@ export function generateCSSFromTokens(tokens) {
 		lines.push(`  --tracking-${key}: ${value};`);
 	}
 
-	// Container
-	for (const [key, value] of Object.entries(tokens.container || {})) {
-		lines.push(`  --container-${key}: ${value};`);
-	}
+	// Container — NICHT als --container-* ausgeben (kollidiert mit Tailwind v4 max-w-*)
+	// Breakpoints werden separat als --breakpoint-* ausgegeben.
 
 	// Border Width
 	if (typeof tokens.borderWidth === 'object' && tokens.borderWidth !== null) {