@sudajs/cli 0.19.0 → 0.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudajs/cli",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "type": "module",
   "bin": {
     "suda": "./bin/suda.js"
@@ -33,7 +33,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "zod": "^3.24.1",
-    "@sudajs/theme-engine": "6.6.0"
+    "@sudajs/theme-engine": "6.8.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.0",

package/templates/theme/AGENTS.md

@@ -173,6 +173,54 @@ it must not substitute placeholder copy, labels, links, icons, or menu items.
   }
   ```
 
+- Configure the three font slots in every preset's `tokens`. Use font IDs, not
+  display names:
+
+  ```ts
+  typography: {
+    heading: "inter",
+    body: "noto-sans-sc",
+    mono: "jetbrains-mono",
+  },
+  ```
+
+  Read available IDs from `SUDA_THEME_FONT_FAMILIES`. System fonts such as
+  `system-sans`, `microsoft-yahei`, and `songti-sc` do not make network requests.
+
+- Connect the design system field in the layout root's `fields` and
+  `defaultProps`:
+
+  ```tsx
+  fields: {
+    designSystem: designSystemField(t("layout.root.fields.designSystem"), sourceManifest.designSystem),
+  },
+  defaultProps: {
+    designSystem: createThemeDesignDefault(sourceManifest.designSystem),
+  },
+  ```
+
+- Use the resolved CSS variables for theme typography:
+
+  ```css
+  .my-theme-root {
+    font-family: var(--font-sans);
+  }
+
+  .my-theme-root h1,
+  .my-theme-root h2,
+  .my-theme-root h3,
+  .my-theme-root h4,
+  .my-theme-root h5,
+  .my-theme-root h6 {
+    font-family: var(--font-heading);
+  }
+
+  .my-theme-root code,
+  .my-theme-root pre {
+    font-family: var(--font-mono);
+  }
+  ```
+
 - In the layout root, resolve the selected preset and apply its CSS variables
   to the element that wraps `children`. Use this exact pattern:
 

package/templates/theme/docs/agent-guides/design-and-runtime.md

@@ -54,6 +54,10 @@ scales, radii, shadows, or spacing.
   consumes (`background`, `foreground`, `primary`, `primaryForeground`,
   `secondary`, `secondaryForeground`, `accent`, `accentForeground`, `muted`,
   `mutedForeground`) and consumed radius tokens (`card`, `button`, `input`).
+- Define `typography.heading`, `typography.body`, and `typography.mono` with
+  font ids exported by `@sudajs/theme-engine`. Use
+  `SUDA_THEME_FONT_FAMILIES` when presenting or validating available choices;
+  never persist raw family names, CSS, or custom font URLs.
 - Do not invent platform-facing token names without checking generated types.
 - Expose `designSystemField(...)` only at the layout root and initialize it with
   `createThemeDesignDefault(sourceManifest.designSystem)`.
@@ -79,6 +83,15 @@ palette. Foreground tokens always pair with the surface token actually used.
 | `--muted` / `--muted-foreground`                       | Low-emphasis surface and secondary text/icons.                                                                                     |
 | `--radius`                                             | Generic radius fallback.                                                                                                           |
 | `--radius-card` / `--radius-button` / `--radius-input` | Radius for cards, command buttons, and form controls.                                                                              |
+| `--font-heading`                                       | Selected heading font family stack.                                                                                                |
+| `--font-sans`                                          | Selected body font family stack.                                                                                                   |
+| `--font-mono`                                          | Selected monospace font family stack.                                                                                              |
+
+Apply `--font-sans` to the theme root and body copy, `--font-heading` to
+headings, and `--font-mono` to code-like content. The host loads one deduplicated
+Google Fonts stylesheet for the selected web fonts with `display=swap`.
+System-font choices do not make a network request, and every variable includes
+a readable cross-platform fallback stack.
 
 Hand-written CSS consumes these unprefixed variables directly. Do not use
 Tailwind aliases such as `var(--color-primary)` or `var(--color-background)`

package/templates/theme/src/manifest.ts

@@ -38,6 +38,11 @@ export const sourceManifest: ThemeSourceManifest = {
           layout: {
             contentWidth: "1280px",
           },
+          typography: {
+            heading: "inter",
+            body: "inter",
+            mono: "jetbrains-mono",
+          },
         },
       },
       {
@@ -64,6 +69,11 @@ export const sourceManifest: ThemeSourceManifest = {
           layout: {
             contentWidth: "1280px",
           },
+          typography: {
+            heading: "space-grotesk",
+            body: "inter",
+            mono: "geist-mono",
+          },
         },
       },
     ],

package/templates/theme/src/styles.css

@@ -22,10 +22,24 @@
 }
 
 .__SUDA_THEME_KEY__-root {
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
   color: var(--foreground, #111827);
   background: var(--background, #ffffff);
 }
+.__SUDA_THEME_KEY__-root h1,
+.__SUDA_THEME_KEY__-root h2,
+.__SUDA_THEME_KEY__-root h3,
+.__SUDA_THEME_KEY__-root h4,
+.__SUDA_THEME_KEY__-root h5,
+.__SUDA_THEME_KEY__-root h6 {
+  font-family: var(--font-heading, ui-serif, Georgia, serif);
+}
+.__SUDA_THEME_KEY__-root code,
+.__SUDA_THEME_KEY__-root pre,
+.__SUDA_THEME_KEY__-root kbd,
+.__SUDA_THEME_KEY__-root samp {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
 .__SUDA_THEME_KEY__-header,
 .__SUDA_THEME_KEY__-footer {
   padding: 20px clamp(20px, 5vw, 64px);