feat: release design system engine, studio and component contracts

packages/ui/test/design-system-catalog-fixture.ts

@@ -0,0 +1,26 @@
+import { readFileSync } from "node:fs";
+import { COMPONENT_CONTRACTS, type DesignSystem } from "../../design-system/src/index.ts";
+import { renderComponent } from "../../test/src/index.ts";
+import { resolveThemeConfig, renderThemeCss } from "../../styles/src/theme.ts";
+import { renderDocument } from "../../ssr/src/index.ts";
+import { uiCss } from "../src/registry.ts";
+
+// SSR baseline gallery. Provider regions and empty collection states intentionally keep their defaults.
+export async function catalogFixtureDocument(system: DesignSystem, mode: string, page: number) {
+  const entries = Object.entries(COMPONENT_CONTRACTS).slice(page * 16, (page + 1) * 16);
+  const cards = await Promise.all(
+    entries.map(async ([name, contract]) => {
+      const body = await renderComponent(readFileSync(contract.source, "utf8"), {});
+      return `<section class="sample" data-sample="${name}"><h2>${name}</h2>${body}</section>`;
+    }),
+  );
+  const theme = resolveThemeConfig({ designSystem: { system }, default: mode });
+  const query = `system=${system.id}&mode=${mode}`;
+  return renderDocument({
+    meta: { title: `${system.name} — Catalog ${page + 1}` },
+    htmlAttrs: ` data-theme="${mode}"`,
+    body: `<h1>Component catalog</h1><p>Default server-rendered states. Interactive core preview: <a href="/?${query}">open</a>.</p><nav>${Array.from({ length: 7 }, (_, i) => `<a href="/catalog?${query}&page=${i}">${i + 1}</a>`).join(" · ")}</nav><main>${cards.join("")}</main>`,
+    extraHead: `<style>${uiCss()}${renderThemeCss(theme)}*{box-sizing:border-box}body{margin:0;padding:24px;background:var(--wrn-color-bg);color:var(--wrn-color-text);font-family:var(--wrn-font-sans)}main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;margin-top:24px}.sample{min-width:0;overflow:auto;padding:16px;border:1px solid var(--wrn-color-border)}h2{font-size:16px}a{color:inherit}</style>`,
+    componentRecipeCss: theme.recipeCss,
+  });
+}