feat: add semantic CSS stylesheets (#3274)

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

packages/pdf/src/templates/pikachu/PikachuPage.tsx

@@ -3,8 +3,10 @@ import type { TemplatePageProps } from "../../document";
 import type { TemplateColorRoles, TemplateFeatures, TemplateStyleContext, TemplateStyleSlots } from "../shared/types";
 import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
-import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
+import { Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
+import { useRenderedSectionIds, useResolvedNode } from "../../semantic/context";
+import { semanticNodeKeys } from "../../semantic/node-keys";
 import { createBaseTemplateStyles } from "../shared/base-template-styles";
 import {
 	CustomFieldContactItem,
@@ -17,7 +19,15 @@ import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Text } from "../shared/primitives";
+import {
+	Heading,
+	SemanticContactListView,
+	SemanticHeaderPicture,
+	SemanticHeaderView,
+	SemanticRegionView,
+	SemanticTemplatePartView,
+	Text,
+} from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
@@ -53,19 +63,25 @@ const pikachuFeatures = {
 	stackSidebarItemHeader: true,
 } satisfies TemplateFeatures;
 
-export const PikachuPage = ({ page, pageSize, pageMinHeightStyle, showHeader }: TemplatePageProps) => {
+export const PikachuPage = ({ page, pageSize, pageMinHeightStyle, showHeader, pageNumber }: TemplatePageProps) => {
 	const data = useRender();
+	const pageNodeKey = semanticNodeKeys.page(pageNumber);
+	const { style: semanticPageStyle, size: semanticPageSize, ...semanticPageProps } = useResolvedNode(pageNodeKey);
 	const { metadata, picture } = data;
 	const { colors, styles } = usePikachuTemplate();
 	const metrics = getTemplateMetrics(metadata.page);
 	const showSidebar = !page.fullWidth;
 	const hasPicture = hasTemplatePicture(picture);
-	const mainSections = filterSections(page.main, data);
-	const sidebarSections = filterSections(page.sidebar, data);
+	const mainSections = useRenderedSectionIds(pageNodeKey, filterSections(page.main, data));
+	const sidebarSections = useRenderedSectionIds(pageNodeKey, filterSections(page.sidebar, data));
 
 	return (
-		<Page size={pageSize} style={composeStyles(styles.page, pageMinHeightStyle)}>
-			<TemplateProvider styles={styles} colors={colors} features={pikachuFeatures}>
+		<Page
+			{...semanticPageProps}
+			size={semanticPageSize ?? pageSize}
+			style={composeStyles(styles.page, pageMinHeightStyle, semanticPageStyle)}
+		>
+			<TemplateProvider pageNodeKey={pageNodeKey} styles={styles} colors={colors} features={pikachuFeatures}>
 				<View style={styles.layout}>
 					{showSidebar && (
 						<View
@@ -74,20 +90,27 @@ export const PikachuPage = ({ page, pageSize, pageMinHeightStyle, showHeader }:
 								rowGap: metrics.sectionGap,
 							})}
 						>
-							{showHeader && showSidebar && hasPicture && <Image src={picture.url} style={styles.picture} />}
+							{showHeader && showSidebar && hasPicture && (
+								<SemanticHeaderPicture src={picture.url} style={styles.picture} />
+							)}
 
-							<View style={composeStyles(styles.sidebarContent, { rowGap: metrics.sectionGap })}>
+							<SemanticRegionView
+								region="sidebar"
+								style={composeStyles(styles.sidebarContent, { rowGap: metrics.sectionGap })}
+							>
 								{sidebarSections.map((section) => (
 									<Section key={section} section={section} placement="sidebar" />
 								))}
-							</View>
+							</SemanticRegionView>
 						</View>
 					)}
 
-					<View style={composeStyles(styles.mainColumn, { rowGap: metrics.sectionGap })}>
+					<SemanticRegionView region="main" style={composeStyles(styles.mainColumn, { rowGap: metrics.sectionGap })}>
 						{showHeader && (
 							<View style={styles.headerRow}>
-								{showHeader && !showSidebar && hasPicture && <Image src={picture.url} style={styles.picture} />}
+								{showHeader && !showSidebar && hasPicture && (
+									<SemanticHeaderPicture src={picture.url} style={styles.picture} />
+								)}
 								<Header styles={styles} colors={colors} />
 							</View>
 						)}
@@ -97,7 +120,7 @@ export const PikachuPage = ({ page, pageSize, pageMinHeightStyle, showHeader }:
 								<Section key={section} section={section} placement="main" />
 							))}
 						</View>
-					</View>
+					</SemanticRegionView>
 				</View>
 			</TemplateProvider>
 		</Page>
@@ -108,15 +131,15 @@ const Header = ({ styles, colors }: PikachuHeaderProps) => {
 	const { basics } = useRender();
 
 	return (
-		<View style={styles.header}>
-			<View style={styles.headerDivider}>
+		<SemanticHeaderView style={styles.header}>
+			<SemanticTemplatePartView partKeys={["header-divider"]} style={styles.headerDivider}>
 				<View style={styles.headerIdentity}>
 					<Heading style={styles.headerName}>{basics.name}</Heading>
 					<Text style={styles.headerText}>{basics.headline}</Text>
 				</View>
-			</View>
+			</SemanticTemplatePartView>
 
-			<View style={styles.contactList}>
+			<SemanticContactListView style={styles.contactList}>
 				<EmailContactItem
 					email={basics.email}
 					style={styles.contactItem}
@@ -150,8 +173,8 @@ const Header = ({ styles, colors }: PikachuHeaderProps) => {
 						iconColor={colors.background}
 					/>
 				))}
-			</View>
-		</View>
+			</SemanticContactListView>
+		</SemanticHeaderView>
 	);
 };
 

packages/pdf/src/templates/pikachu/semantic.ts

@@ -0,0 +1,21 @@
+import type { TemplateSemanticManifest } from "../../semantic/template-manifest";
+
+export const pikachuSemanticManifest = {
+	template: "pikachu",
+	regions: [
+		{ name: "header", placement: "main", origins: [] },
+		{ name: "main", placement: "main", origins: ["main"] },
+		{ name: "sidebar", placement: "sidebar", origins: ["sidebar"] },
+	],
+	header: { region: "header", placement: "main" },
+	specialSummary: null,
+	parts: [
+		{
+			name: "header-divider",
+			key: "header-divider",
+			owner: { kind: "header", key: "header" },
+			binding: { type: "primitive", primitive: "View", source: "existing" },
+			route: { parent: "owner", at: "start", take: [{ kind: "name" }, { kind: "headline" }] },
+		},
+	],
+} as const satisfies TemplateSemanticManifest;