@webmate-studio/builder 0.2.116 → 0.2.117

package/package.json

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

package/src/design-tokens.js

@@ -1160,6 +1160,37 @@ export function generateTailwindConfig(tokens) {
 	};
 }
 
+/**
+ * Generate @import rules for Fontsource/Bunny Fonts used in the design tokens.
+ * Works in both browser (preview) and build contexts.
+ * Returns a CSS string with @import statements (or empty string if no web fonts).
+ */
+export function generateFontImports(tokens) {
+	const imports = [];
+	const processedFonts = new Set();
+
+	function processFontId(fontId) {
+		if (!fontId || processedFonts.has(fontId)) return;
+		processedFonts.add(fontId);
+
+		if (fontId.startsWith('fontsource:')) {
+			const fontsourceName = fontId.replace('fontsource:', '');
+			const fontFamily = fontsourceName
+				.split('-')
+				.map(word => word.charAt(0).toUpperCase() + word.slice(1))
+				.join(' ');
+			imports.push(`@import url('https://fonts.bunny.net/css?family=${fontFamily.replace(/\s+/g, '+')}:100,200,300,400,500,600,700,800,900&display=swap');`);
+		}
+	}
+
+	if (tokens?.typography?.fontHeadingId) processFontId(tokens.typography.fontHeadingId);
+	if (tokens?.typography?.fontBodyId) processFontId(tokens.typography.fontBodyId);
+	if (tokens?.typography?.fontMonoId) processFontId(tokens.typography.fontMonoId);
+	if (tokens?.typography?.fontAccentId) processFontId(tokens.typography.fontAccentId);
+
+	return imports.length > 0 ? imports.join('\n') + '\n\n' : '';
+}
+
 /**
  * Generate CSS Variables from Design Tokens
  */

package/src/index.js

@@ -6,7 +6,7 @@ import { deduplicateCSS } from './css-deduplicator.js';
 import { markdownToHtml, processMarkdownProps } from './markdown.js';
 import TemplateProcessor, { templateProcessor } from './template-processor.js';
 import { SafeHtml } from './safe-html.js';
-import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens } from './design-tokens.js';
+import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports } from './design-tokens.js';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
@@ -19,4 +19,4 @@ function getMotionRuntime() {
 	return readFileSync(join(__dirname, '../dist/motion-runtime.min.js'), 'utf-8');
 }
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };