diff --git a/packages/cli/src/commands/snapshot-fonts.test.ts b/packages/cli/src/commands/snapshot-fonts.test.ts new file mode 100644 index 0000000000..cd50f8d411 --- /dev/null +++ b/packages/cli/src/commands/snapshot-fonts.test.ts @@ -0,0 +1,27 @@ +import { describe, expect, it, vi } from "vitest"; + +const mocks = vi.hoisted(() => ({ + bundleToSingleHtml: vi.fn(async () => "bundled"), + injectDeterministicFontFaces: vi.fn(async (html: string) => `${html}\n`), +})); + +vi.mock("@hyperframes/core/compiler", () => ({ + bundleToSingleHtml: mocks.bundleToSingleHtml, +})); +vi.mock("@hyperframes/producer", () => ({ + injectDeterministicFontFaces: mocks.injectDeterministicFontFaces, +})); + +import { prepareSnapshotHtml } from "./snapshot.js"; + +describe("prepareSnapshotHtml", () => { + it("injects the same deterministic font faces used by render", async () => { + const html = await prepareSnapshotHtml("/project"); + + expect(mocks.bundleToSingleHtml).toHaveBeenCalledWith("/project"); + expect(mocks.injectDeterministicFontFaces).toHaveBeenCalledWith( + "bundled", + ); + expect(html).toContain(""); + }); +}); diff --git a/packages/cli/src/commands/snapshot.ts b/packages/cli/src/commands/snapshot.ts index e1f34f9615..14164ebe6d 100644 --- a/packages/cli/src/commands/snapshot.ts +++ b/packages/cli/src/commands/snapshot.ts @@ -180,6 +180,15 @@ export function computeSnapshotTimes( * Render key frames from a composition as PNG screenshots. * The agent can Read these to verify its output visually. */ +export async function prepareSnapshotHtml(projectDir: string): Promise { + const [{ bundleToSingleHtml }, { injectDeterministicFontFaces }] = await Promise.all([ + import("@hyperframes/core/compiler"), + import("@hyperframes/producer"), + ]); + const bundledHtml = await bundleToSingleHtml(projectDir); + return injectDeterministicFontFaces(bundledHtml); +} + async function captureSnapshots( projectDir: string, opts: { @@ -193,11 +202,9 @@ async function captureSnapshots( zoomScale?: number; }, ): Promise { - const { bundleToSingleHtml } = await import("@hyperframes/core/compiler"); - const numFrames = opts.frames ?? 5; - const html = await bundleToSingleHtml(projectDir); + const html = await prepareSnapshotHtml(projectDir); const server = await serveStaticProjectHtml(projectDir, html); const savedPaths: string[] = []; diff --git a/packages/producer/src/index.ts b/packages/producer/src/index.ts index 34a4465565..48de65b608 100644 --- a/packages/producer/src/index.ts +++ b/packages/producer/src/index.ts @@ -35,6 +35,7 @@ export { localizeRemoteImageSources, localizeRemoteFontFaces, } from "./services/htmlCompiler.js"; +export { injectDeterministicFontFaces } from "./services/deterministicFonts.js"; // ── Frame capture (lower-level) ───────────────────────────────────────────── export {