fix(studio): resolve exact component filenames for Linux previews

packages/design-studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/design-studio",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/design-studio/src/preview.ts

@@ -1,14 +1,14 @@
 import { validateAgentPage } from "./agent-pages.ts";
 import { readFileSync, mkdirSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
-import { join, resolve } from "node:path";
+import { join } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { createHash } from "node:crypto";
 import { compileWrnFile } from "@wrnexus/compiler";
 import { runWithRequestContext } from "@wrnexus/core";
 import { REACTIVE_RUNTIME } from "@wrnexus/csr";
 import { renderDocument } from "@wrnexus/ssr";
-import { uiCss, uiComponentsDir } from "@wrnexus/ui/registry";
+import { uiCss, uiComponentPath } from "@wrnexus/ui/registry";
 import { resolveThemeConfig, renderThemeCss } from "@wrnexus/styles/theme";
 import {
   COMPONENT_CONTRACTS,
@@ -25,10 +25,7 @@ const escape = (text: string) =>
 async function component(name: string, props: Record<string, unknown> = {}) {
   if (!Object.hasOwn(COMPONENT_CONTRACTS, name)) throw Error("Unknown component.");
   if (!modules.has(name)) {
-    const sourcePath = resolve(
-      uiComponentsDir(),
-      name === "ComboBox" ? "Combobox.wrn" : `${name}.wrn`,
-    );
+    const sourcePath = uiComponentPath(name);
     const source = readFileSync(sourcePath, "utf8");
     const directory = join(tmpdir(), "wrnexus-design-studio");
     mkdirSync(directory, { recursive: true });

packages/design-studio/test/preview-case.test.ts

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test";
+import { pathToFileURL } from "node:url";
+import { resolve } from "node:path";
+
+test("composed and catalog previews use exact shipped filename casing on every platform", () => {
+  const preview = pathToFileURL(resolve(import.meta.dir, "../src/preview.ts")).href;
+  const probe = `
+    import { mock } from "bun:test";
+    import { readFileSync, readdirSync } from "node:fs";
+    import { dirname, basename } from "node:path";
+    import { uiComponentsDir } from "@wrnexus/ui/registry";
+    import { CORE_DESIGN_SYSTEMS } from "@wrnexus/design-system";
+    const directory = uiComponentsDir();
+    const names = new Set(readdirSync(directory));
+    const originalRead = readFileSync;
+    let checked = 0;
+    mock.module("node:fs", () => ({ readFileSync(path, ...options) {
+      if (typeof path === "string" && dirname(path) === directory && path.endsWith(".wrn")) {
+        if (!names.has(basename(path))) throw Error("Case-sensitive component lookup failed: " + basename(path));
+        checked++;
+      }
+      return originalRead(path, ...options);
+    }}));
+    const { previewDocument } = await import(${JSON.stringify(preview)});
+    await previewDocument(CORE_DESIGN_SYSTEMS.square);
+    for (let page = 0; page < 7; page++) await previewDocument(CORE_DESIGN_SYSTEMS.soft, { content: "catalog", page });
+    if (checked < 104) throw Error("Incomplete component coverage: " + checked);
+    console.log("Exact filename casing verified for all 104 preview components.");
+  `;
+  const result = Bun.spawnSync([process.execPath, "--eval", probe], {
+    cwd: resolve(import.meta.dir, "../../.."),
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+  expect(new TextDecoder().decode(result.stderr)).not.toContain(
+    "Case-sensitive component lookup failed",
+  );
+  expect(result.exitCode).toBe(0);
+  expect(new TextDecoder().decode(result.stdout)).toContain("all 104 preview components");
+});