feat(pdf): roll out shared RTL layout to all templates

Introduce createRtlStyleHelpers and a single rtl flag on RenderProvider,
migrate every template page to mirrored layout styles, and rename
alignRight to alignEnd. Fix plain rich text rendering via PdfText
paragraph renderers and map legacy Times New Roman to Times-Roman.

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

packages/pdf/src/templates/gengar/GengarPage.tsx

@@ -13,6 +13,7 @@ import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
 import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
 
@@ -163,9 +164,10 @@ const getPrimaryTint = (primaryColor: string, opacity: number): string => {
 };
 
 const useGengarTemplate = (): GengarTemplate => {
-	const { picture, metadata } = useRender();
+	const { picture, metadata, rtl } = useRender();
 
 	return useMemo(() => {
+		const r = createRtlStyleHelpers(rtl);
 		const foreground = rgbaStringToHex(metadata.design.colors.text);
 		const background = rgbaStringToHex(metadata.design.colors.background);
 		const primary = rgbaStringToHex(metadata.design.colors.primary);
@@ -185,16 +187,18 @@ const useGengarTemplate = (): GengarTemplate => {
 			fontWeight: metadata.typography.body.fontWeights[0] ?? "400",
 			lineHeight: metadata.typography.body.lineHeight,
 			color: foreground,
+			...r.text,
 		} satisfies Style;
 
 		const baseStyles = StyleSheet.create({
 			page: {
-				flexDirection: "row",
+				flexDirection: r.row,
 				color: foreground,
 				backgroundColor: background,
 				fontFamily: metadata.typography.body.fontFamily,
 				fontSize: metadata.typography.body.fontSize,
 				lineHeight: metadata.typography.body.lineHeight,
+				direction: r.pageDirection,
 			},
 			text: bodyText,
 			heading: {
@@ -203,13 +207,14 @@ const useGengarTemplate = (): GengarTemplate => {
 				fontWeight: metadata.typography.heading.fontWeights.at(-1) ?? "600",
 				lineHeight: metadata.typography.heading.lineHeight,
 				color: foreground,
+				...r.text,
 			},
 			div: {
 				rowGap: metrics.gapY(0.125),
 				columnGap: metrics.gapX(1 / 3),
 			},
 			inline: {
-				flexDirection: "row",
+				flexDirection: r.row,
 				alignItems: "center",
 				columnGap: metrics.gapX(1 / 3),
 			},
@@ -233,26 +238,23 @@ const useGengarTemplate = (): GengarTemplate => {
 				alignItems: "flex-start",
 			},
 			richListItemMarker: {
-				width: metadata.typography.body.fontSize,
-				textAlign: "right",
 				...bodyText,
+				width: metadata.typography.body.fontSize,
+				textAlign: r.listMarkerTextAlign,
 			},
 			richListItemContent: {
 				flex: 1,
 				...bodyText,
 			},
 			splitRow: {
-				flexDirection: "row",
+				flexDirection: r.row,
 				flexWrap: "wrap",
 				alignItems: "flex-start",
 				justifyContent: "space-between",
 				columnGap: metrics.gapX(2 / 3),
 			},
-			alignRight: {
-				textAlign: "right",
-				minWidth: 0,
-				maxWidth: "100%",
-				flexShrink: 1,
+			alignEnd: {
+				...r.alignEnd,
 			},
 			section: {
 				flexDirection: "column",
@@ -321,8 +323,7 @@ const useGengarTemplate = (): GengarTemplate => {
 			},
 			headerTitle: {},
 			headerIdentity: {
-				textAlign: "left",
-				alignItems: "flex-start",
+				...r.headerIdentity,
 				rowGap: metrics.gapY(0.35),
 			},
 			headerName: {
@@ -337,7 +338,7 @@ const useGengarTemplate = (): GengarTemplate => {
 				rowGap: metrics.gapY(0.25),
 			},
 			contactItem: {
-				flexDirection: "row",
+				flexDirection: r.row,
 				alignItems: "center",
 				columnGap: metrics.gapX(1 / 6),
 			},
@@ -368,8 +369,8 @@ const useGengarTemplate = (): GengarTemplate => {
 						? { flexDirection: "column", alignItems: "flex-start", justifyContent: "flex-start" }
 						: {}),
 				}),
-				alignRight: (context) => ({
-					...baseStyles.alignRight,
+				alignEnd: (context) => ({
+					...baseStyles.alignEnd,
 					...(context.placement === "sidebar" ? { textAlign: "left" } : {}),
 				}),
 				sectionHeading: (context) => ({
@@ -386,5 +387,5 @@ const useGengarTemplate = (): GengarTemplate => {
 				}),
 			} satisfies GengarStyles,
 		};
-	}, [picture, metadata]);
+	}, [picture, metadata, rtl]);
 };