fix: fix gradient background export rendering

src/lib/exporter/frameRenderer.ts

@@ -38,6 +38,12 @@ import {
 	type StyledRenderRect,
 } from "@/lib/compositeLayout";
 import { renderAnnotations } from "./annotationRenderer";
+import {
+	getLinearGradientPoints,
+	getRadialGradientShape,
+	parseCssGradient,
+	resolveLinearGradientAngle,
+} from "./gradientParser";
 
 interface FrameRenderConfig {
 	width: number;
@@ -163,7 +169,9 @@ export class FrameRenderer {
 		this.compositeCanvas = document.createElement("canvas");
 		this.compositeCanvas.width = this.config.width;
 		this.compositeCanvas.height = this.config.height;
-		this.compositeCtx = this.compositeCanvas.getContext("2d", { willReadFrequently: false });
+		this.compositeCtx = this.compositeCanvas.getContext("2d", {
+			willReadFrequently: false,
+		});
 
 		if (!this.compositeCtx) {
 			throw new Error("Failed to get 2D context for composite canvas");
@@ -174,7 +182,9 @@ export class FrameRenderer {
 			this.shadowCanvas = document.createElement("canvas");
 			this.shadowCanvas.width = this.config.width;
 			this.shadowCanvas.height = this.config.height;
-			this.shadowCtx = this.shadowCanvas.getContext("2d", { willReadFrequently: false });
+			this.shadowCtx = this.shadowCanvas.getContext("2d", {
+				willReadFrequently: false,
+			});
 
 			if (!this.shadowCtx) {
 				throw new Error("Failed to get 2D context for shadow canvas");
@@ -255,40 +265,39 @@ export class FrameRenderer {
 				wallpaper.startsWith("linear-gradient") ||
 				wallpaper.startsWith("radial-gradient")
 			) {
-				const gradientMatch = wallpaper.match(/(linear|radial)-gradient\((.+)\)/);
-				if (gradientMatch) {
-					const [, type, params] = gradientMatch;
-					const parts = params.split(",").map((s) => s.trim());
-
-					let gradient: CanvasGradient;
-
-					if (type === "linear") {
-						gradient = bgCtx.createLinearGradient(0, 0, 0, this.config.height);
-						parts.forEach((part, index) => {
-							if (part.startsWith("to ") || part.includes("deg")) return;
-
-							const colorMatch = part.match(/^(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|[a-z]+)/);
-							if (colorMatch) {
-								const color = colorMatch[1];
-								const position = index / (parts.length - 1);
-								gradient.addColorStop(position, color);
-							}
-						});
-					} else {
-						const cx = this.config.width / 2;
-						const cy = this.config.height / 2;
-						const radius = Math.max(this.config.width, this.config.height) / 2;
-						gradient = bgCtx.createRadialGradient(cx, cy, 0, cx, cy, radius);
-
-						parts.forEach((part, index) => {
-							const colorMatch = part.match(/^(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|[a-z]+)/);
-							if (colorMatch) {
-								const color = colorMatch[1];
-								const position = index / (parts.length - 1);
-								gradient.addColorStop(position, color);
-							}
-						});
-					}
+				const parsedGradient = parseCssGradient(wallpaper);
+				if (parsedGradient) {
+					const gradient =
+						parsedGradient.type === "linear"
+							? (() => {
+									const points = getLinearGradientPoints(
+										resolveLinearGradientAngle(parsedGradient.descriptor),
+										this.config.width,
+										this.config.height,
+									);
+
+									return bgCtx.createLinearGradient(points.x0, points.y0, points.x1, points.y1);
+								})()
+							: (() => {
+									const shape = getRadialGradientShape(
+										parsedGradient.descriptor,
+										this.config.width,
+										this.config.height,
+									);
+
+									return bgCtx.createRadialGradient(
+										shape.cx,
+										shape.cy,
+										0,
+										shape.cx,
+										shape.cy,
+										shape.radius,
+									);
+								})();
+
+					parsedGradient.stops.forEach((stop) => {
+						gradient.addColorStop(stop.offset, stop.color);
+					});
 
 					bgCtx.fillStyle = gradient;
 					bgCtx.fillRect(0, 0, this.config.width, this.config.height);
@@ -690,7 +699,11 @@ export class FrameRenderer {
 		}
 		this.backgroundSprite = null;
 		if (this.app) {
-			this.app.destroy(true, { children: true, texture: true, textureSource: true });
+			this.app.destroy(true, {
+				children: true,
+				texture: true,
+				textureSource: true,
+			});
 			this.app = null;
 		}
 		this.cameraContainer = null;

src/lib/exporter/gradientParser.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import {
+	getLinearGradientPoints,
+	getRadialGradientShape,
+	parseCssGradient,
+	resolveLinearGradientAngle,
+} from "./gradientParser";
+
+describe("parseCssGradient", () => {
+	it("parses rgba-based gradient presets without splitting inside color functions", () => {
+		const parsed = parseCssGradient(
+			"linear-gradient( 111.6deg,  rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
+		);
+
+		expect(parsed?.type).toBe("linear");
+		expect(parsed?.descriptor).toBe("111.6deg");
+		expect(parsed?.stops).toHaveLength(4);
+		expect(parsed?.stops.map((stop) => stop.color)).toEqual([
+			"rgba(114,167,232,1)",
+			"rgba(253,129,82,1)",
+			"rgba(253,129,82,1)",
+			"rgba(249,202,86,1)",
+		]);
+		expect(parsed?.stops[0]?.offset).toBeCloseTo(0.094);
+		expect(parsed?.stops[1]?.offset).toBeCloseTo(0.439);
+		expect(parsed?.stops[2]?.offset).toBeCloseTo(0.548);
+		expect(parsed?.stops[3]?.offset).toBeCloseTo(0.863);
+	});
+
+	it("fills missing stop positions for simple hex gradients", () => {
+		const parsed = parseCssGradient("linear-gradient(135deg, #FBC8B4, #2447B1)");
+
+		expect(parsed?.stops).toEqual([
+			{ color: "#FBC8B4", offset: 0 },
+			{ color: "#2447B1", offset: 1 },
+		]);
+	});
+});
+
+describe("gradient geometry", () => {
+	it("maps linear directions to canvas endpoints", () => {
+		const angle = resolveLinearGradientAngle("to right");
+		const points = getLinearGradientPoints(angle, 1920, 1080);
+
+		expect(points.x0).toBeCloseTo(0);
+		expect(points.y0).toBeCloseTo(540);
+		expect(points.x1).toBeCloseTo(1920);
+		expect(points.y1).toBeCloseTo(540);
+	});
+
+	it("uses radial positions from the descriptor", () => {
+		const shape = getRadialGradientShape("circle farthest-corner at 10% 20%", 1000, 500);
+
+		expect(shape.cx).toBe(100);
+		expect(shape.cy).toBe(100);
+		expect(shape.radius).toBeCloseTo(Math.hypot(900, 400));
+	});
+});