feat(studio): expand manual typography controls and theme recipes

packages/design-studio/test/manual.test.ts

@@ -4,7 +4,7 @@ import {
   validateDesignSystem,
   compileDesignSystem,
 } from "@wrnexus/design-system";
-import { manualDesign } from "../src/manual.ts";
+import { MANUAL_TYPOGRAPHY, MANUAL_FONTS, manualDesign } from "../src/manual.ts";
 import { StudioSession } from "../src/session.ts";
 import { checkDecisionLocks } from "../src/decisions.ts";
 
@@ -112,12 +112,19 @@ test("manual form saves one atomic revision and rejects locked changes without c
     editor.render();
     const input = win.document.querySelector('[data-manual-token="shape.control"]') as any;
     input.value = "12";
+    (win.document.querySelector('select[data-manual-token="type.heading"]') as any).value =
+      MANUAL_FONTS.georgia;
+    (win.document.querySelector('[data-manual-token="type.body-size"]') as any).value = "18";
+    (win.document.querySelector('[data-manual-token="type.body-leading"]') as any).value = "1.8";
     (win.document.querySelector('input[type=text][data-manual-color="primary"]') as any).value =
       "#6336AD";
     (win.document.querySelector("[data-manual-apply]") as any).click();
     await Bun.sleep(10);
     expect(session.valid.tokens["shape.control"]!.value).toBe("12px");
     expect(session.valid.modes!.light!["color.primary"]!.value).toBe("#6336AD");
+    expect(session.valid.tokens["type.heading"]!.value).toBe(MANUAL_FONTS.georgia);
+    expect(session.valid.tokens["type.body-size"]!.value).toBe("18px");
+    expect(session.valid.tokens["type.body-leading"]!.value).toBe("1.8");
     expect(session.history).toHaveLength(2);
     session.setLocks(["/tokens/shape.control"]);
     editor.render();
@@ -132,3 +139,37 @@ test("manual form saves one atomic revision and rejects locked changes without c
     await win.happyDOM.close();
   }
 });
+
+test("manual typography controls persist in exported recipes and reject invalid ranges", () => {
+  for (const original of Object.values(CORE_DESIGN_SYSTEMS)) {
+    let system = structuredClone(original);
+    for (const [name, setting] of Object.entries(MANUAL_TYPOGRAPHY))
+      system = manualDesign(system, {
+        kind: "token",
+        name,
+        value: String(setting.initial) + setting.unit,
+      });
+    system = manualDesign(system, {
+      kind: "token",
+      name: "type.code",
+      value: MANUAL_FONTS.consolas,
+    });
+    expect(validateDesignSystem(system)).toEqual([]);
+    const css = compileDesignSystem(system).css;
+    expect(css).toContain("font-size:16px");
+    expect(css).toContain("font-weight:700");
+    expect(css).toContain("line-height:1.5");
+    expect(JSON.parse(JSON.stringify(system)).tokens["type.code"].value).toBe(
+      MANUAL_FONTS.consolas,
+    );
+    expect(() =>
+      manualDesign(system, { kind: "token", name: "type.body-size", value: "200px" }),
+    ).toThrow();
+    expect(() =>
+      manualDesign(system, { kind: "token", name: "type.body-leading", value: "0" }),
+    ).toThrow();
+    expect(() =>
+      manualDesign(system, { kind: "token", name: "type.heading", value: "serif; color:red" }),
+    ).toThrow();
+  }
+});