feat(studio): choose and load Google Fonts in manual design

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/design-system",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Typed, deterministic design tokens and legacy WrNexus theme integration.",
   "type": "module",
   "main": "src/index.ts",

packages/design-system/src/compile.ts

@@ -58,9 +58,20 @@ export function compileDesignSystem(
         compileComponentRecipes(modeResolved, `${selector}[data-theme="${mode}"]`, options.scope),
       );
   }
-  const recipeCss = recipeBlocks.filter(Boolean).join("\n");
+  const fontImports = (resolved.googleFonts ?? [])
+    .map(
+      (family) =>
+        `@import url("https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@400;700&display=swap");`,
+    )
+    .join("\n");
+  const bodyRecipes = recipeBlocks.filter(Boolean).join("\n");
+  const recipeCss = [fontImports, bodyRecipes].filter(Boolean).join("\n");
   return {
-    css: blocks.join("\n") + "\n" + (recipeCss ? recipeCss + "\n" : ""),
+    css:
+      (fontImports ? fontImports + "\n" : "") +
+      blocks.join("\n") +
+      "\n" +
+      (bodyRecipes ? bodyRecipes + "\n" : ""),
     recipeCss,
     resolved,
   };

packages/design-system/src/resolve.ts

@@ -110,6 +110,9 @@ export function resolveDesignSystem(
     version: system.version,
     ...(mode ? { mode } : {}),
     ...(options.density ? { density: options.density } : {}),
+    ...(layers.some((layer) => layer.googleFonts)
+      ? { googleFonts: [...new Set(layers.flatMap((layer) => layer.googleFonts ?? []))] }
+      : {}),
     modes,
     tokens,
     recipes,

packages/design-system/src/types.ts

@@ -47,6 +47,8 @@ export interface DesignSystem {
   densities?: Record<string, TokenMap>;
   defaultMode?: string;
   recipes?: Record<string, ComponentRecipe>;
+  /** Google Fonts families loaded with regular and bold weights and display=swap. */
+  googleFonts?: string[];
 }
 export interface DesignDiagnostic {
   code: string;
@@ -77,6 +79,7 @@ export interface ResolvedDesignSystem {
   modes: string[];
   tokens: Record<string, ResolvedToken>;
   recipes: Record<string, ComponentRecipe>;
+  googleFonts?: string[];
 }
 export interface LegacyTheme {
   default?: string;

packages/design-system/src/validation.ts

@@ -127,6 +127,7 @@ export function validateDesignSystem(input: unknown): DesignDiagnostic[] {
     "name",
     "version",
     "description",
+    "googleFonts",
     "extends",
     "tokens",
     "modes",
@@ -156,6 +157,22 @@ export function validateDesignSystem(input: unknown): DesignDiagnostic[] {
     (typeof input.defaultMode !== "string" || !validName(input.defaultMode))
   )
     error("WRN-DS-NAME", "defaultMode", "Invalid mode name.");
+  if (
+    input.googleFonts !== undefined &&
+    (!Array.isArray(input.googleFonts) ||
+      input.googleFonts.length > 10 ||
+      input.googleFonts.some(
+        (name: unknown) =>
+          typeof name !== "string" ||
+          !/^[A-Za-z][A-Za-z0-9 ]{0,79}$/.test(name) ||
+          name.trim() !== name,
+      ))
+  )
+    error(
+      "WRN-DS-SCHEMA",
+      "googleFonts",
+      "Choose up to ten Google Font family names using letters, numbers and spaces.",
+    );
   const map = (value: unknown, path: string) => {
     if (!isRecord(value)) {
       error("WRN-DS-SCHEMA", path, "Expected a token map.");