feat: add semantic CSS stylesheets (#3274)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

apps/web/src/features/resume/public/pdf-viewer.test.tsx

@@ -2,6 +2,7 @@
 
 import { render, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPublicStyleProjection } from "@reactive-resume/pdf/public-projection";
 import { sampleResumeData } from "@reactive-resume/schema/resume/sample";
 
 const pdfViewerMock = vi.hoisted(() => {
@@ -18,6 +19,9 @@ const pdfViewerMock = vi.hoisted(() => {
 		constructorOptions: [] as Array<{ abortSignal?: AbortSignal; container: HTMLDivElement }>,
 		createResumePdfBlob: vi.fn(async () => new Blob(["%PDF"], { type: "application/pdf" })),
 		getDocument: vi.fn(() => loadingTask),
+		fetch: vi.fn(
+			async (_input: string | URL) => new Response(new Blob(["%PDF-fallback"], { type: "application/pdf" })),
+		),
 		instances: [] as Array<{
 			abortSignal?: AbortSignal;
 			setDocument: ReturnType<typeof vi.fn>;
@@ -92,6 +96,8 @@ beforeEach(() => {
 	pdfViewerMock.createResumePdfBlob.mockClear();
 	pdfViewerMock.getDocument.mockClear();
 	pdfViewerMock.loadingTask.destroy.mockClear();
+	pdfViewerMock.fetch.mockClear();
+	vi.stubGlobal("fetch", pdfViewerMock.fetch);
 });
 
 describe("PdfViewer", () => {
@@ -113,4 +119,68 @@ describe("PdfViewer", () => {
 		expect(viewer.setDocument).toHaveBeenCalledWith(null);
 		expect(pdfViewerMock.loadingTask.destroy).toHaveBeenCalledTimes(1);
 	});
+
+	it("renders a valid public projection through the shared PDF entrypoint", async () => {
+		const semanticData = structuredClone(sampleResumeData);
+		const applied = { languageVersion: 1, text: "@version 1;\nname { color: #123456; }\n" };
+		semanticData.metadata.stylesheet = { mode: "semantic", source: applied, applied };
+		const projection = await createPublicStyleProjection({ data: semanticData });
+		const refetchStyleProjection = vi.fn();
+
+		render(
+			<PdfViewer
+				data={sampleResumeData}
+				stylesheetMode="semantic"
+				styleProjection={projection}
+				refetchStyleProjection={refetchStyleProjection}
+				publicResume={{ username: "amruth", slug: "sample" }}
+			/>,
+		);
+
+		await waitFor(() =>
+			expect(pdfViewerMock.createResumePdfBlob).toHaveBeenCalledWith(sampleResumeData, undefined, undefined, {
+				publicStyleProjection: projection,
+			}),
+		);
+		expect(refetchStyleProjection).not.toHaveBeenCalled();
+		expect(pdfViewerMock.fetch).not.toHaveBeenCalled();
+	});
+
+	it("refetches a mismatched projection once before using the authorized PDF fallback", async () => {
+		const semanticData = structuredClone(sampleResumeData);
+		const applied = { languageVersion: 1, text: "@version 1;\nname { color: #123456; }\n" };
+		semanticData.metadata.stylesheet = { mode: "semantic", source: applied, applied };
+		const projection = await createPublicStyleProjection({ data: semanticData });
+		const mismatchedProjection = { ...projection, renderDataHash: "0".repeat(64) };
+		const refetchStyleProjection = vi.fn(async () => mismatchedProjection);
+
+		const view = render(
+			<PdfViewer
+				data={sampleResumeData}
+				stylesheetMode="semantic"
+				styleProjection={mismatchedProjection}
+				refetchStyleProjection={refetchStyleProjection}
+				publicResume={{ username: "amruth", slug: "sample" }}
+			/>,
+		);
+
+		await waitFor(() => expect(refetchStyleProjection).toHaveBeenCalledTimes(1));
+		await waitFor(() => expect(pdfViewerMock.fetch).toHaveBeenCalledTimes(1));
+		expect(String(pdfViewerMock.fetch.mock.calls[0]?.[0])).toContain("/api/resumes/amruth/sample/pdf");
+		expect(String(pdfViewerMock.fetch.mock.calls[0]?.[0])).toContain("reason=render-data-hash");
+		expect(pdfViewerMock.createResumePdfBlob).not.toHaveBeenCalled();
+
+		view.rerender(
+			<PdfViewer
+				data={sampleResumeData}
+				stylesheetMode="semantic"
+				styleProjection={{ ...mismatchedProjection, renderDataHash: "1".repeat(64) }}
+				refetchStyleProjection={refetchStyleProjection}
+				publicResume={{ username: "amruth", slug: "sample" }}
+			/>,
+		);
+
+		await waitFor(() => expect(pdfViewerMock.fetch).toHaveBeenCalledTimes(2));
+		expect(refetchStyleProjection).toHaveBeenCalledTimes(1);
+	});
 });

apps/web/src/features/resume/public/pdf-viewer.tsx

@@ -1,4 +1,6 @@
+import type { PublicStyleProjection } from "@reactive-resume/pdf/public-projection";
 import type { ResumeData } from "@reactive-resume/schema/resume/data";
+import type { SemanticStylesheet } from "@reactive-resume/schema/resume/stylesheet";
 import type { PDFDocumentLoadingTask, PDFDocumentProxy } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { AnnotationMode, GlobalWorkerOptions, getDocument } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { EventBus, LinkTarget, PDFLinkService, PDFViewer } from "pdfjs-dist/legacy/web/pdf_viewer.mjs";
@@ -6,6 +8,7 @@ import { useEffect, useReducer, useRef } from "react";
 import { Spinner } from "@reactive-resume/ui/components/spinner";
 import { cn } from "@reactive-resume/utils/style";
 import { createResumePdfBlob } from "@/features/resume/export/pdf-document";
+import { resolvePublicResumePdfBlob } from "./public-pdf";
 import "pdfjs-dist/legacy/web/pdf_viewer.css";
 import "./pdf-viewer.css";
 
@@ -14,6 +17,13 @@ GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/legacy/build/pdf.worker.min.
 type PdfViewerProps = {
 	className?: string;
 	data: ResumeData;
+	stylesheetMode?: SemanticStylesheet["mode"];
+	styleProjection?: PublicStyleProjection;
+	refetchStyleProjection?: () => Promise<PublicStyleProjection | undefined>;
+	publicResume?: {
+		username: string;
+		slug: string;
+	};
 };
 
 type PdfViewerOptions = ConstructorParameters<typeof PDFViewer>[0] & {
@@ -67,11 +77,21 @@ function pdfViewerReducer(state: PdfViewerState, action: PdfViewerAction): PdfVi
 	}
 }
 
-export function PdfViewer({ className, data }: PdfViewerProps) {
+export function PdfViewer({
+	className,
+	data,
+	stylesheetMode,
+	styleProjection,
+	refetchStyleProjection,
+	publicResume,
+}: PdfViewerProps) {
 	const rootRef = useRef<HTMLDivElement>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
 	const viewerRef = useRef<HTMLDivElement>(null);
 	const fileRef = useRef<Blob | null>(null);
+	const projectionRetryRef = useRef<{ data?: ResumeData; publicKey?: string; retried: boolean }>({
+		retried: false,
+	});
 	const [{ error, fileVersion, isReady, viewerHeight }, dispatch] = useReducer(
 		pdfViewerReducer,
 		INITIAL_PDF_VIEWER_STATE,
@@ -83,7 +103,29 @@ export function PdfViewer({ className, data }: PdfViewerProps) {
 		fileRef.current = null;
 		dispatch({ type: "resetForData" });
 
-		void createResumePdfBlob(data)
+		const createPdf = () => {
+			if (!stylesheetMode || !publicResume) return createResumePdfBlob(data);
+			const publicKey = `${publicResume.username}/${publicResume.slug}`;
+			if (projectionRetryRef.current.data !== data || projectionRetryRef.current.publicKey !== publicKey) {
+				projectionRetryRef.current = { data, publicKey, retried: false };
+			}
+			const retryProjection =
+				refetchStyleProjection && !projectionRetryRef.current.retried
+					? () => {
+							projectionRetryRef.current.retried = true;
+							return refetchStyleProjection();
+						}
+					: undefined;
+			return resolvePublicResumePdfBlob({
+				data,
+				stylesheetMode,
+				publicResume,
+				...(styleProjection ? { styleProjection } : {}),
+				...(retryProjection ? { refetchStyleProjection: retryProjection } : {}),
+			});
+		};
+
+		void createPdf()
 			.then((blob) => {
 				if (isCancelled) return;
 
@@ -100,7 +142,7 @@ export function PdfViewer({ className, data }: PdfViewerProps) {
 		return () => {
 			isCancelled = true;
 		};
-	}, [data]);
+	}, [data, publicResume, refetchStyleProjection, styleProjection, stylesheetMode]);
 
 	useEffect(() => {
 		void fileVersion;

apps/web/src/features/resume/public/public-pdf.test.ts

@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPublicStyleProjection } from "@reactive-resume/pdf/public-projection";
+import { sampleResumeData } from "@reactive-resume/schema/resume/sample";
+import { resolvePublicResumePdfBlob } from "./public-pdf";
+
+const mocks = vi.hoisted(() => ({
+	createResumePdfBlob: vi.fn(async () => new Blob(["local"], { type: "application/pdf" })),
+	fetch: vi.fn(async (_input: string | URL) => new Response(new Blob(["server"], { type: "application/pdf" }))),
+}));
+
+vi.mock("@/features/resume/export/pdf-document", () => ({
+	createResumePdfBlob: mocks.createResumePdfBlob,
+}));
+
+const publicResume = { username: "amruth", slug: "sample" };
+
+beforeEach(() => {
+	mocks.createResumePdfBlob.mockClear();
+	mocks.fetch.mockClear();
+	vi.stubGlobal("fetch", mocks.fetch);
+});
+
+describe("resolvePublicResumePdfBlob", () => {
+	it("keeps legitimate legacy resumes on the local PDF path", async () => {
+		await resolvePublicResumePdfBlob({
+			data: sampleResumeData,
+			stylesheetMode: "legacy",
+			publicResume,
+		});
+
+		expect(mocks.createResumePdfBlob).toHaveBeenCalledWith(sampleResumeData);
+		expect(mocks.fetch).not.toHaveBeenCalled();
+	});
+
+	it("uses the authorized server fallback when a semantic projection is unavailable", async () => {
+		const refetchStyleProjection = vi.fn().mockRejectedValue(new Error("projection unavailable"));
+
+		await resolvePublicResumePdfBlob({
+			data: sampleResumeData,
+			stylesheetMode: "semantic",
+			publicResume,
+			refetchStyleProjection,
+		});
+
+		expect(refetchStyleProjection).toHaveBeenCalledTimes(1);
+		expect(String(mocks.fetch.mock.calls[0]?.[0])).toContain("/api/resumes/amruth/sample/pdf");
+		expect(String(mocks.fetch.mock.calls[0]?.[0])).toContain("reason=missing-projection");
+		expect(mocks.createResumePdfBlob).not.toHaveBeenCalled();
+	});
+
+	it("refetches a mismatched projection once before returning the authorized server blob", async () => {
+		const semanticData = structuredClone(sampleResumeData);
+		const source = { languageVersion: 1, text: "@version 1;\nname { color: #123456; }\n" };
+		semanticData.metadata.stylesheet = { mode: "semantic", source, applied: source };
+		const projection = await createPublicStyleProjection({ data: semanticData });
+		const mismatchedProjection = { ...projection, renderDataHash: "0".repeat(64) };
+		const refetchStyleProjection = vi.fn(async () => mismatchedProjection);
+
+		const blob = await resolvePublicResumePdfBlob({
+			data: sampleResumeData,
+			stylesheetMode: "semantic",
+			styleProjection: mismatchedProjection,
+			publicResume,
+			refetchStyleProjection,
+		});
+
+		expect(refetchStyleProjection).toHaveBeenCalledTimes(1);
+		expect(mocks.fetch).toHaveBeenCalledTimes(1);
+		expect(await blob.text()).toBe("server");
+		expect(mocks.createResumePdfBlob).not.toHaveBeenCalled();
+	});
+});

apps/web/src/features/resume/public/public-pdf.ts

@@ -0,0 +1,97 @@
+import type { PublicStyleProjection } from "@reactive-resume/pdf/public-projection";
+import type { ResumeData } from "@reactive-resume/schema/resume/data";
+import type { SemanticStylesheet } from "@reactive-resume/schema/resume/stylesheet";
+import {
+	getPublicStyleProjectionFingerprints,
+	PUBLIC_STYLE_PROJECTION_FORMAT_VERSION,
+	SEMANTIC_TREE_VERSION,
+	validatePublicStyleProjection,
+} from "@reactive-resume/pdf/public-projection";
+import { createResumePdfBlob } from "@/features/resume/export/pdf-document";
+
+export type PublicResumePdfOptions = {
+	stylesheetMode: SemanticStylesheet["mode"];
+	styleProjection?: PublicStyleProjection;
+	refetchStyleProjection?: () => Promise<PublicStyleProjection | undefined>;
+	publicResume: {
+		username: string;
+		slug: string;
+	};
+};
+
+type ProjectionMismatchReason =
+	| "format-version"
+	| "language-version"
+	| "semantic-tree-version"
+	| "registry-fingerprint"
+	| "adapter-fingerprint"
+	| "render-data-hash"
+	| "invalid-projection";
+
+const projectionMismatchReason = async (
+	data: ResumeData,
+	projection: PublicStyleProjection,
+): Promise<ProjectionMismatchReason | null> => {
+	if (projection.formatVersion !== PUBLIC_STYLE_PROJECTION_FORMAT_VERSION) return "format-version";
+	if (projection.languageVersion !== 1) return "language-version";
+	if (projection.semanticTreeVersion !== SEMANTIC_TREE_VERSION) return "semantic-tree-version";
+	const fingerprints = await getPublicStyleProjectionFingerprints();
+	if (projection.registryFingerprint !== fingerprints.registryFingerprint) return "registry-fingerprint";
+	if (projection.adapterFingerprint !== fingerprints.adapterFingerprint) return "adapter-fingerprint";
+	return (await validatePublicStyleProjection(data, projection)) ? null : "render-data-hash";
+};
+
+const fetchPublicResumePdf = async (
+	publicResume: PublicResumePdfOptions["publicResume"],
+	reason: ProjectionMismatchReason | "missing-projection",
+	projection?: PublicStyleProjection,
+) => {
+	const search = new URLSearchParams({
+		reason,
+		...(projection
+			? {
+					registryFingerprint: projection.registryFingerprint,
+					adapterFingerprint: projection.adapterFingerprint,
+				}
+			: {}),
+	});
+	const response = await fetch(
+		`/api/resumes/${encodeURIComponent(publicResume.username)}/${encodeURIComponent(publicResume.slug)}/pdf?${search}`,
+		{ credentials: "include" },
+	);
+	if (!response.ok) throw new Error(`Public PDF fallback failed with ${response.status}`);
+	return response.blob();
+};
+
+export async function resolvePublicResumePdfBlob({
+	data,
+	...options
+}: PublicResumePdfOptions & { data: ResumeData }): Promise<Blob> {
+	if (options.stylesheetMode === "legacy") return createResumePdfBlob(data);
+
+	let projection = options.styleProjection;
+	let refetched = false;
+	const refetch = async () => {
+		if (!options.refetchStyleProjection || refetched) return;
+		refetched = true;
+		try {
+			projection = await options.refetchStyleProjection();
+		} catch {
+			projection = undefined;
+		}
+	};
+
+	if (!projection) await refetch();
+	if (!projection) return fetchPublicResumePdf(options.publicResume, "missing-projection");
+
+	let reason = await projectionMismatchReason(data, projection).catch(() => "invalid-projection" as const);
+	if (reason) {
+		await refetch();
+		if (!projection) return fetchPublicResumePdf(options.publicResume, "missing-projection");
+		reason = await projectionMismatchReason(data, projection).catch(() => "invalid-projection" as const);
+	}
+
+	return reason
+		? fetchPublicResumePdf(options.publicResume, reason, projection)
+		: createResumePdfBlob(data, undefined, undefined, { publicStyleProjection: projection });
+}

apps/web/src/features/resume/public/public-resume.test.tsx

@@ -1,5 +1,6 @@
 // @vitest-environment happy-dom
 
+import type { PublicStyleProjection } from "@reactive-resume/pdf/public-projection";
 import type { ResumeData } from "@reactive-resume/schema/resume/data";
 import type { ReactNode } from "react";
 import { render, screen } from "@testing-library/react";
@@ -11,24 +12,46 @@ import { sampleResumeData } from "@reactive-resume/schema/resume/sample";
 type PdfViewerProps = {
 	className?: string;
 	data: ResumeData;
+	stylesheetMode?: "legacy" | "semantic";
+	styleProjection?: PublicStyleProjection;
+	refetchStyleProjection?: () => Promise<PublicStyleProjection | undefined>;
+	publicResume?: { username: string; slug: string };
 };
 
 const publicResumeMock = vi.hoisted(() => ({
-	createResumePdfBlob: vi.fn(async () => new Blob(["%PDF"], { type: "application/pdf" })),
-	downloadWithAnchor: vi.fn(),
-	generateFilename: vi.fn((name: string, extension: string) => `${name}.${extension}`),
+	onDownloadPDF: vi.fn(),
 	PdfViewer: vi.fn<(_props: PdfViewerProps) => ReactNode>(() => null),
+	projection: {
+		formatVersion: 1,
+		languageVersion: 1,
+		semanticTreeVersion: 1,
+		registryFingerprint: "1".repeat(64),
+		adapterFingerprint: "2".repeat(64),
+		renderDataHash: "3".repeat(64),
+		nodes: { resume: {} },
+	} as PublicStyleProjection,
+	refetchProjection: vi.fn(),
+	projectionResult: {
+		data: undefined as PublicStyleProjection | undefined,
+		isError: false,
+		isPending: false,
+	},
+	useResumeExport: vi.fn(),
 	resume: undefined as
 		| undefined
 		| {
 				data: ResumeData;
 				name: string;
 				slug: string;
+				stylesheetMode: "legacy" | "semantic";
 		  },
 }));
 
 vi.mock("@tanstack/react-query", () => ({
-	useQuery: () => ({ data: publicResumeMock.resume }),
+	useQuery: (options: { query: "resume" | "projection" }) =>
+		options.query === "resume"
+			? { data: publicResumeMock.resume }
+			: { ...publicResumeMock.projectionResult, refetch: publicResumeMock.refetchProjection },
 }));
 
 vi.mock("@tanstack/react-router", () => ({
@@ -37,21 +60,21 @@ vi.mock("@tanstack/react-router", () => ({
 	}),
 }));
 
-vi.mock("@reactive-resume/utils/file", () => ({
-	downloadWithAnchor: publicResumeMock.downloadWithAnchor,
-	generateFilename: publicResumeMock.generateFilename,
-}));
-
 vi.mock("./pdf-viewer", () => ({
 	PdfViewer: publicResumeMock.PdfViewer,
 }));
 
 vi.mock("@/libs/orpc/client", () => ({
-	orpc: { resume: { getBySlug: { queryOptions: () => ({}) } } },
+	orpc: {
+		resume: {
+			getBySlug: { queryOptions: () => ({ query: "resume" }) },
+			getStyleProjection: { queryOptions: () => ({ query: "projection" }) },
+		},
+	},
 }));
 
-vi.mock("@/features/resume/export/pdf-document", () => ({
-	createResumePdfBlob: publicResumeMock.createResumePdfBlob,
+vi.mock("@/features/resume/export/use-resume-export", () => ({
+	useResumeExport: publicResumeMock.useResumeExport,
 }));
 
 const { PublicResumeRoute } = await import("./public-resume");
@@ -65,8 +88,21 @@ beforeEach(() => {
 		data: sampleResumeData,
 		name: "Sample Resume",
 		slug: "sample",
+		stylesheetMode: "semantic",
+	};
+	publicResumeMock.projectionResult = {
+		data: publicResumeMock.projection,
+		isError: false,
+		isPending: false,
 	};
 	publicResumeMock.PdfViewer.mockClear();
+	publicResumeMock.refetchProjection.mockReset();
+	publicResumeMock.refetchProjection.mockResolvedValue({ data: publicResumeMock.projection });
+	publicResumeMock.useResumeExport.mockReset();
+	publicResumeMock.useResumeExport.mockReturnValue({
+		onDownloadPDF: publicResumeMock.onDownloadPDF,
+		isExporting: false,
+	});
 	publicResumeMock.PdfViewer.mockImplementation(({ className }) => (
 		<div className={className} data-testid="pdf-viewer" />
 	));
@@ -88,6 +124,62 @@ describe("PublicResumeRoute", () => {
 			expect.objectContaining({ data: sampleResumeData }),
 			undefined,
 		);
+		expect(publicResumeMock.useResumeExport).toHaveBeenCalledWith(publicResumeMock.resume, {
+			publicResumePdf: expect.objectContaining({
+				stylesheetMode: "semantic",
+				styleProjection: publicResumeMock.projection,
+				publicResume: { username: "amruth", slug: "sample" },
+			}),
+		});
+	});
+
+	it("routes a missing semantic projection to the shared fallback seam", () => {
+		publicResumeMock.projectionResult = { data: undefined, isError: true, isPending: false };
+
+		renderPublicResumeRoute();
+
+		expect(publicResumeMock.PdfViewer).toHaveBeenCalledWith(
+			expect.objectContaining({
+				stylesheetMode: "semantic",
+				styleProjection: undefined,
+				refetchStyleProjection: expect.any(Function),
+				publicResume: { username: "amruth", slug: "sample" },
+			}),
+			undefined,
+		);
+		expect(publicResumeMock.useResumeExport).toHaveBeenCalledWith(
+			publicResumeMock.resume,
+			expect.objectContaining({
+				publicResumePdf: expect.objectContaining({
+					stylesheetMode: "semantic",
+				}),
+			}),
+		);
+	});
+
+	it("keeps missing legacy projections on the local rendering path", () => {
+		if (publicResumeMock.resume) publicResumeMock.resume.stylesheetMode = "legacy";
+		publicResumeMock.projectionResult = { data: undefined, isError: false, isPending: false };
+
+		renderPublicResumeRoute();
+
+		expect(publicResumeMock.PdfViewer).toHaveBeenCalledWith(
+			expect.objectContaining({ stylesheetMode: "legacy", styleProjection: undefined }),
+			undefined,
+		);
+	});
+
+	it("loads the public projection and passes it to the shared viewer", () => {
+		renderPublicResumeRoute();
+
+		expect(publicResumeMock.PdfViewer).toHaveBeenCalledWith(
+			expect.objectContaining({
+				styleProjection: publicResumeMock.projection,
+				refetchStyleProjection: expect.any(Function),
+				publicResume: { username: "amruth", slug: "sample" },
+			}),
+			undefined,
+		);
 	});
 
 	it("lets the public resume page grow to the full PDF length", () => {

apps/web/src/features/resume/public/public-resume.tsx

@@ -3,6 +3,7 @@ import { Trans } from "@lingui/react/macro";
 import { CircleNotchIcon, DownloadSimpleIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
+import { useCallback, useMemo } from "react";
 import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
 import { Button } from "@reactive-resume/ui/components/button";
 import { LoadingScreen } from "@/components/layout/loading-screen";
@@ -16,9 +17,30 @@ export function PublicResumeRoute() {
 	const { username, slug } = publicResumeRoute.useParams();
 
 	const { data: resume } = useQuery(orpc.resume.getBySlug.queryOptions({ input: { username, slug } }));
-	const { onDownloadPDF, isExporting } = useResumeExport(resume);
+	const projectionQuery = useQuery(
+		orpc.resume.getStyleProjection.queryOptions({ input: { username, slug }, enabled: resume !== undefined }),
+	);
+	const styleProjection =
+		projectionQuery.data && Object.keys(projectionQuery.data.nodes).length > 0 ? projectionQuery.data : undefined;
+	const publicResume = useMemo(() => ({ username, slug }), [slug, username]);
+	const refetchStyleProjection = useCallback(async () => {
+		const result = await projectionQuery.refetch();
+		return result.data;
+	}, [projectionQuery.refetch]);
+	const { onDownloadPDF, isExporting } = useResumeExport(resume, {
+		...(resume
+			? {
+					publicResumePdf: {
+						stylesheetMode: resume.stylesheetMode,
+						publicResume,
+						refetchStyleProjection,
+						...(styleProjection ? { styleProjection } : {}),
+					},
+				}
+			: {}),
+	});
 
-	if (!resume) return <LoadingScreen />;
+	if (!resume || projectionQuery.isPending) return <LoadingScreen />;
 
 	const { basics, picture } = resume.data;
 
@@ -44,7 +66,14 @@ export function PublicResumeRoute() {
 				</header>
 
 				<main className="w-full max-w-5xl bg-white print:max-w-full">
-					<PdfViewer data={resume.data} className="block w-full" />
+					<PdfViewer
+						data={resume.data}
+						className="block w-full"
+						stylesheetMode={resume.stylesheetMode}
+						styleProjection={styleProjection}
+						publicResume={publicResume}
+						refetchStyleProjection={refetchStyleProjection}
+					/>
 				</main>
 
 				<footer className="flex justify-center print:hidden">