fix(producer): embed font data at build time instead of runtime require.resolve

The CLI bundle uses tsup to inline @hyperframes/producer, but the
deterministicFonts module used require.resolve('@fontsource/*/package.json')
at runtime to find woff2 files on disk. When installed via npx, these
@fontsource packages don't exist, causing "Cannot find module" errors.

Replace runtime filesystem lookups with a build-time generator that reads
all @fontsource woff2 files and produces a TypeScript module with base64
data URIs. The generator runs before both producer and CLI builds, making
the bundle fully self-contained with zero @fontsource runtime dependencies.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.gitignore

@@ -42,6 +42,9 @@ npm-debug.log*
 tmp/
 .tmp/
 
+# Generated files
+packages/producer/src/services/fontData.generated.ts
+
 # Test artifacts
 my-video/
 packages/studio/data/

packages/cli/package.json

@@ -11,7 +11,8 @@
   "type": "module",
   "scripts": {
     "dev": "tsx src/cli.ts",
-    "build": "bun run build:studio && tsup && bun run build:runtime && bun run build:copy",
+    "build": "bun run build:fonts && bun run build:studio && tsup && bun run build:runtime && bun run build:copy",
+    "build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
     "build:studio": "cd ../studio && bun run build",
     "build:runtime": "tsx scripts/build-runtime.ts",
     "build:copy": "mkdir -p dist/studio dist/docs dist/templates && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli dist/templates/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",

packages/producer/package.json

@@ -22,7 +22,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "bun run --cwd ../.. build:hyperframes-runtime:modular && node build.mjs",
+    "build": "bun run build:fonts && bun run --cwd ../.. build:hyperframes-runtime:modular && node build.mjs",
+    "build:fonts": "tsx scripts/generate-font-data.ts",
     "typecheck": "tsc --noEmit",
     "parity:check": "tsx src/parity-harness.ts",
     "parity:fixtures": "tsx src/parity-fixtures.ts",

packages/producer/scripts/generate-font-data.ts

@@ -0,0 +1,141 @@
+/**
+ * Generate embedded font data for deterministic font injection.
+ *
+ * Reads woff2 files from @fontsource/* packages at build time and produces
+ * a TypeScript module with base64 data URIs. This eliminates the runtime
+ * dependency on @fontsource packages, making the CLI self-contained when
+ * bundled via tsup.
+ *
+ * Usage: tsx scripts/generate-font-data.ts
+ */
+
+import { readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+type FontFaceSpec = { weight: string; style?: "normal" | "italic" };
+type CanonicalFontSpec = { packageName: string; faces: FontFaceSpec[] };
+
+// Mirror of CANONICAL_FONTS from deterministicFonts.ts — single source of truth
+const CANONICAL_FONTS: Record<string, CanonicalFontSpec> = {
+  inter: {
+    packageName: "@fontsource/inter",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  montserrat: {
+    packageName: "@fontsource/montserrat",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  outfit: {
+    packageName: "@fontsource/outfit",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  nunito: {
+    packageName: "@fontsource/nunito",
+    faces: [{ weight: "400" }, { weight: "700" }, { weight: "900" }],
+  },
+  oswald: {
+    packageName: "@fontsource/oswald",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "league-gothic": {
+    packageName: "@fontsource/league-gothic",
+    faces: [{ weight: "400" }],
+  },
+  "archivo-black": {
+    packageName: "@fontsource/archivo-black",
+    faces: [{ weight: "400" }],
+  },
+  "space-mono": {
+    packageName: "@fontsource/space-mono",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "ibm-plex-mono": {
+    packageName: "@fontsource/ibm-plex-mono",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "jetbrains-mono": {
+    packageName: "@fontsource/jetbrains-mono",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+  "eb-garamond": {
+    packageName: "@fontsource/eb-garamond",
+    faces: [{ weight: "400" }, { weight: "700" }],
+  },
+};
+
+function packageRoot(packageName: string): string {
+  const packageJsonPath = require.resolve(`${packageName}/package.json`);
+  return dirname(packageJsonPath);
+}
+
+function resolveFontFile(
+  packageName: string,
+  weight: string,
+  style: "normal" | "italic" = "normal",
+): string {
+  const root = packageRoot(packageName);
+  const filesDir = join(root, "files");
+  const slug = packageName.replace("@fontsource/", "");
+  const files = readdirSync(filesDir);
+
+  const exact = `${slug}-latin-${weight}-${style}.woff2`;
+  if (files.includes(exact)) {
+    return join(filesDir, exact);
+  }
+
+  const relaxed = files.find((file) => {
+    return file.endsWith(`-${weight}-${style}.woff2`) && file.includes("-latin-");
+  });
+  if (relaxed) {
+    return join(filesDir, relaxed);
+  }
+
+  throw new Error(`No font asset found for ${packageName} weight=${weight} style=${style}`);
+}
+
+function main() {
+  const entries: Array<{ key: string; dataUri: string }> = [];
+  let totalBytes = 0;
+
+  for (const [, spec] of Object.entries(CANONICAL_FONTS)) {
+    for (const face of spec.faces) {
+      const style = face.style || "normal";
+      const key = `${spec.packageName}:${face.weight}:${style}`;
+      const fontPath = resolveFontFile(spec.packageName, face.weight, style);
+      const content = readFileSync(fontPath);
+      totalBytes += content.length;
+      const dataUri = `data:font/woff2;base64,${content.toString("base64")}`;
+      entries.push({ key, dataUri });
+    }
+  }
+
+  const lines = [
+    "/**",
+    " * AUTO-GENERATED — do not edit manually.",
+    ` * Generated by: scripts/generate-font-data.ts`,
+    ` * ${entries.length} font faces, ${Math.round(totalBytes / 1024)}KB raw woff2`,
+    " */",
+    "",
+    "export const EMBEDDED_FONT_DATA: ReadonlyMap<string, string> = new Map([",
+  ];
+
+  for (const entry of entries) {
+    lines.push(`  ["${entry.key}", "${entry.dataUri}"],`);
+  }
+
+  lines.push("]);");
+  lines.push("");
+
+  const outputPath = resolve(__dirname, "../src/services/fontData.generated.ts");
+  writeFileSync(outputPath, lines.join("\n"), "utf8");
+  console.log(
+    `[generate-font-data] Wrote ${entries.length} font faces (${Math.round(totalBytes / 1024)}KB) → ${outputPath}`,
+  );
+}
+
+main();

packages/producer/src/services/deterministicFonts.ts

@@ -1,9 +1,5 @@
-import { readdirSync, readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { createRequire } from "node:module";
 import { parseHTML } from "linkedom";
-
-const require = createRequire(import.meta.url);
+import { EMBEDDED_FONT_DATA } from "./fontData.generated.js";
 
 type FontFaceSpec = {
   weight: string;
@@ -104,9 +100,6 @@ const FONT_ALIASES: Record<string, keyof typeof CANONICAL_FONTS> = {
   garamond: "eb-garamond",
 };
 
-const PACKAGE_ROOT_CACHE = new Map<string, string>();
-const FONT_DATA_URI_CACHE = new Map<string, string>();
-
 function normalizeFamilyName(family: string): string {
   return family
     .trim()
@@ -115,60 +108,18 @@ function normalizeFamilyName(family: string): string {
     .toLowerCase();
 }
 
-function packageRoot(packageName: string): string {
-  const cached = PACKAGE_ROOT_CACHE.get(packageName);
-  if (cached) {
-    return cached;
-  }
-
-  const packageJsonPath = require.resolve(`${packageName}/package.json`);
-  const root = dirname(packageJsonPath);
-  PACKAGE_ROOT_CACHE.set(packageName, root);
-  return root;
-}
-
-function resolveFontFile(
-  packageName: string,
-  weight: string,
-  style: "normal" | "italic" = "normal",
-): string {
-  const root = packageRoot(packageName);
-  const filesDir = join(root, "files");
-  const slug = packageName.replace("@fontsource/", "");
-  const files = readdirSync(filesDir);
-
-  const exact = `${slug}-latin-${weight}-${style}.woff2`;
-  if (files.includes(exact)) {
-    return join(filesDir, exact);
-  }
-
-  const relaxed = files.find((file) => {
-    return file.endsWith(`-${weight}-${style}.woff2`) && file.includes("-latin-");
-  });
-  if (relaxed) {
-    return join(filesDir, relaxed);
-  }
-
-  throw new Error(
-    `No deterministic font asset found for ${packageName} weight=${weight} style=${style}`,
-  );
-}
-
 function fontDataUri(
   packageName: string,
   weight: string,
   style: "normal" | "italic" = "normal",
 ): string {
   const key = `${packageName}:${weight}:${style}`;
-  const cached = FONT_DATA_URI_CACHE.get(key);
-  if (cached) {
-    return cached;
+  const uri = EMBEDDED_FONT_DATA.get(key);
+  if (!uri) {
+    throw new Error(
+      `No embedded font data for ${key}. Regenerate with: tsx scripts/generate-font-data.ts`,
+    );
   }
-
-  const fontPath = resolveFontFile(packageName, weight, style);
-  const content = readFileSync(fontPath);
-  const uri = `data:font/woff2;base64,${content.toString("base64")}`;
-  FONT_DATA_URI_CACHE.set(key, uri);
   return uri;
 }