feat: release design system engine, studio and component contracts

packages/cli/test/client-dependency-cache.test.ts

@@ -1,24 +1,33 @@
-import {afterAll,expect,test} from "bun:test";
-import {mkdirSync,mkdtempSync,readFileSync,readdirSync,rmSync,writeFileSync} from "node:fs";
-import {join} from "node:path";
-import {runBuild} from "../src/build.ts";
-const scratch=join(import.meta.dir,".tmp-client-dependency");
-mkdirSync(scratch,{recursive:true});
-afterAll(()=>rmSync(scratch,{recursive:true,force:true}));
-test("changing a bundled dependency changes the immutable client URL",async()=>{
-  const root=mkdtempSync(join(scratch,"app-"));
-  mkdirSync(join(root,"app/pages"),{recursive:true});
-  writeFileSync(join(root,"package.json"),JSON.stringify({name:"client-cache-fixture"}));
-  writeFileSync(join(root,"wrnexus.config.ts"),"export default {};\n");
-  writeFileSync(join(root,"app/pages/index.wrn"),'import {message} from "../message.ts"\npage Home { functions { client function show(){alert(message)} } view { <button type="button" on:click={show()}>Show message</button> } }');
-  const files:string[]=[];
-  for(const message of ["first dependency","updated dependency"]){
-    writeFileSync(join(root,"app/message.ts"),`export const message=${JSON.stringify(message)};`);
+import { afterAll, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { runBuild } from "../src/build.ts";
+const scratch = join(import.meta.dir, ".tmp-client-dependency");
+mkdirSync(scratch, { recursive: true });
+afterAll(() => rmSync(scratch, { recursive: true, force: true }));
+test("changing a bundled dependency changes the immutable client URL", async () => {
+  const root = mkdtempSync(join(scratch, "app-"));
+  mkdirSync(join(root, "app/pages"), { recursive: true });
+  writeFileSync(join(root, "package.json"), JSON.stringify({ name: "client-cache-fixture" }));
+  writeFileSync(join(root, "wrnexus.config.ts"), "export default {};\n");
+  writeFileSync(
+    join(root, "app/pages/index.wrn"),
+    'import {message} from "../message.ts"\npage Home { functions { client function show(){alert(message)} } view { <button type="button" on:click={show()}>Show message</button> } }',
+  );
+  const files: string[] = [];
+  for (const message of ["first dependency", "updated dependency"]) {
+    writeFileSync(join(root, "app/message.ts"), `export const message=${JSON.stringify(message)};`);
     await runBuild(root);
-    const file=readdirSync(join(root,"dist/client")).find(name=>name.startsWith("index-")&&readFileSync(join(root,"dist/client",name),"utf8").includes(message));
+    const file = readdirSync(join(root, "dist/client")).find(
+      (name) =>
+        name.startsWith("index-") &&
+        readFileSync(join(root, "dist/client", name), "utf8").includes(message),
+    );
     expect(file).toBeDefined();
     files.push(file!);
-    expect(readFileSync(join(root,"dist/server.js"),"utf8")).toContain(`/__wrnexus/client/${file}`);
+    expect(readFileSync(join(root, "dist/server.js"), "utf8")).toContain(
+      `/__wrnexus/client/${file}`,
+    );
   }
   expect(files[0]).not.toBe(files[1]);
-},120000);
+}, 120000);

packages/cli/test/design.test.ts

@@ -0,0 +1,33 @@
+import { test, expect } from "bun:test";
+import { mkdtempSync, writeFileSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { runDesignCommand } from "../src/design.ts";
+
+test("design CLI validates data, inspects provenance and compiles without modifying input", async () => {
+  const directory = mkdtempSync(join(tmpdir(), "wrn-design-cli-"));
+  try {
+    const file = join(directory, "system.json");
+    const source = JSON.stringify({
+      schemaVersion: 1,
+      id: "square",
+      name: "Square",
+      version: "1",
+      tokens: { radius: { type: "dimension", value: "0", legacy: "radius-sm" } },
+    });
+    writeFileSync(file, source);
+    expect(JSON.parse(await runDesignCommand(["validate", file])).valid).toBe(true);
+    expect(JSON.parse(await runDesignCommand(["inspect", file])).tokens.radius.source).toBe(
+      "square.tokens.radius",
+    );
+    expect(await runDesignCommand(["compile", file])).toContain("--wrn-radius-sm:0;");
+    expect(await Bun.file(file).text()).toBe(source);
+    await expect(runDesignCommand(["compile", file, "--unknown=x"])).rejects.toThrow(
+      "WRN-DS-OPTION",
+    );
+    writeFileSync(file, source.replace('"0"', '"url(bad)"'));
+    await expect(runDesignCommand(["validate", file])).rejects.toThrow("WRN-DS-VALUE");
+  } finally {
+    rmSync(directory, { recursive: true, force: true });
+  }
+});

packages/cli/test/inline-css.test.ts

@@ -11,10 +11,14 @@ test("production CSS inlining uses a configurable UTF-8 byte budget", () => {
 });
 
 test("relative asset URLs stay external so their base does not change", () => {
-  for (const url of ['./font.woff2', '../font.woff2', 'font.woff2', '#mask']) {
+  for (const url of ["./font.woff2", "../font.woff2", "font.woff2", "#mask"]) {
     expect(shouldInlineCss(`a{background:url("${url}")}`, undefined)).toBe(false);
   }
-  for (const url of ['/font.woff2', 'https://cdn.example/font.woff2', 'data:image/svg+xml;base64,AAAA']) {
+  for (const url of [
+    "/font.woff2",
+    "https://cdn.example/font.woff2",
+    "data:image/svg+xml;base64,AAAA",
+  ]) {
     expect(shouldInlineCss(`a{background:url('${url}')}`, undefined)).toBe(true);
   }
 });

packages/cli/test/plugin-runtime-production.test.ts

@@ -38,8 +38,10 @@ export default {
     join(root, "app", "pages", "index.wrn"),
     `import RuntimeProbe from "../components/RuntimeProbe.wrn"\npage Home { view { <RuntimeProbe /> } }\n`,
   );
-  writeFileSync(join(root, "app", "pages", "[id].wrn"),
-    `page Dynamic { functions { client function selectPanel() { console.log('panel-ready') } } view { <button @click="selectPanel()">Panel</button> } }`);
+  writeFileSync(
+    join(root, "app", "pages", "[id].wrn"),
+    `page Dynamic { functions { client function selectPanel() { console.log('panel-ready') } } view { <button @click="selectPanel()">Panel</button> } }`,
+  );
 
   await runBuild(root);
 

packages/cli/test/runtime-connections.test.ts

@@ -3,7 +3,10 @@ import { productionConnections } from "../src/runtime-connections.ts";
 
 test("deployment connections override build placeholders without accepting server settings", () => {
   const db = { driver: "postgres", url: "postgres://runtime:secret@db/app" };
-  expect(productionConnections(JSON.stringify({ db, realtime: { scale: true } }))).toEqual({ db, realtime: { scale: true } });
+  expect(productionConnections(JSON.stringify({ db, realtime: { scale: true } }))).toEqual({
+    db,
+    realtime: { scale: true },
+  });
   expect(productionConnections("")).toEqual({});
   for (const value of ["null", "[]", "invalid", '{"port":80}', '{"db":null}', '{"db":[]}'])
     expect(() => productionConnections(value)).toThrow();