fix(pdf): apply custom style fontSize to icons and level indicators (#3120) and

* fix(pdf): apply custom style fontSize to icon and level indicator sizes Map fontSize from Icon and Level Indicator custom style slots to Phosphor icon size and level indicator dimensions, since react-pdf icons ignore fontSize in favor of the size prop. * fix: separate global icon and scoped level indicator font sizes Icon slot fontSize now drives all resume icons plus level display decorations. Level indicator fontSize overrides only within level display. Shared sizing logic lives in schema; design sidebar preview uses global rules. --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>
2026-08-25 15:52:21 +10:00 · 2026-05-29 00:41:21 +02:00
parent c1d11236ae
commit 1414fecade
12 changed files with 350 additions and 72 deletions
@@ -0,0 +1,74 @@
+import type { CustomSectionType, ResumeData, SectionType, StyleIntent, StyleSlot } from "./data";
+
+export type SectionStyleRuleContext = {
+	sectionId: string;
+	sectionType?: CustomSectionType | undefined;
+};
+
+export type ResolveStyleRuleSlotOptions = {
+	slot: StyleSlot;
+	sectionId?: string | undefined;
+	sectionType?: CustomSectionType | undefined;
+};
+
+const builtInSectionTypes = new Set<SectionType>([
+	"profiles",
+	"experience",
+	"education",
+	"projects",
+	"skills",
+	"languages",
+	"interests",
+	"awards",
+	"certifications",
+	"publications",
+	"volunteer",
+	"references",
+]);
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+export const getSectionStyleRuleContext = (data: ResumeData, sectionId: string): SectionStyleRuleContext => {
+	if (sectionId === "summary") return { sectionId, sectionType: "summary" };
+	if (builtInSectionTypes.has(sectionId as SectionType)) {
+		return { sectionId, sectionType: sectionId as SectionType };
+	}
+
+	const customSection = data.customSections.find((section) => section.id === sectionId);
+
+	return { sectionId, sectionType: customSection?.type };
+};
+
+export const resolveStyleIntentForSlot = (data: ResumeData, options: ResolveStyleRuleSlotOptions): StyleIntent => {
+	const matchingRules = (data.metadata.styleRules ?? []).filter((rule) => {
+		if (!rule.enabled) return false;
+		if (!rule.slots[options.slot]) return false;
+
+		if (rule.target.scope === "global") return true;
+		if (rule.target.scope === "sectionType") return rule.target.sectionType === options.sectionType;
+		if (rule.target.scope === "sectionId") return rule.target.sectionId === options.sectionId;
+
+		return false;
+	});
+
+	const specificity = { global: 0, sectionType: 1, sectionId: 2 } satisfies Record<
+		"global" | "sectionType" | "sectionId",
+		number
+	>;
+
+	const bySpecificity = [...matchingRules].sort((a, b) => {
+		return specificity[a.target.scope] - specificity[b.target.scope];
+	});
+
+	return Object.assign({}, ...bySpecificity.map((rule) => rule.slots[options.slot]));
+};
+
+export const resolveStyleRuleFontSize = (
+	data: ResumeData,
+	options: ResolveStyleRuleSlotOptions,
+): number | undefined => {
+	const fontSize = resolveStyleIntentForSlot(data, options).fontSize;
+	if (fontSize === undefined) return undefined;
+
+	return clamp(fontSize, 6, 48);
+};