gradiente 2.1.2 → 2.3.0

package/dist/index.js

@@ -1179,8 +1179,37 @@ var LinearGradient = class LinearGradient extends GradientBase {
 //#endregion
 //#region src/gradients/RadialGradient.ts
 var RadialGradient = class RadialGradient extends GradientBase {
+	static DEFAULT_CONFIG = {
+		isRepeating: false,
+		stops: [{
+			type: "color-stop",
+			value: "red",
+			position: 0
+		}, {
+			type: "color-stop",
+			value: "blue",
+			position: 1
+		}],
+		config: {
+			shape: "ellipse",
+			size: {
+				kind: "extent",
+				value: "farthest-corner"
+			},
+			position: {
+				kind: "keywords",
+				x: "center",
+				y: "center"
+			}
+		}
+	};
 	type = "radial-gradient";
-	constructor(config) {
+	constructor(input) {
+		const config = {
+			...RadialGradient.DEFAULT_CONFIG,
+			...input
+		};
+		if (config.config.interpolation) config.config.interpolation = RadialGradient._normalizeConfigInterpolation(config.config.interpolation);
 		super(config);
 	}
 	static fromString(input) {
@@ -1201,31 +1230,47 @@ var RadialGradient = class RadialGradient extends GradientBase {
 		return new RadialGradient(this.toJSON());
 	}
 	toString() {
-		return `${this.isRepeating ? `repeating-${this.type}` : this.type}(${[this._serializeRadialConfig(this.config), ...this._serializeStopsCompact()].filter(Boolean).join(", ")})`;
+		return `${this.isRepeating ? `repeating-${this.type}` : this.type}(${[this._parseConfigToString(this.config), ...this._serializeStopsCompact()].filter(Boolean).join(", ")})`;
 	}
 	_validateConfig(config) {
 		if (config.shape !== "circle" && config.shape !== "ellipse") throw new Error("Invalid shape");
 		if (!config.position) throw new Error("Position is required");
 		if (!config.size) throw new Error("Size is required");
 	}
-	_serializeRadialConfig(config) {
+	_parseConfigToString(config) {
+		const configParts = [];
+		const radialConfigString = this._parseRadialConfigToString(config);
+		if (radialConfigString.length > 0) configParts.push(radialConfigString);
+		if (config.interpolation !== void 0) configParts.push(this._parseInterpolationToString(config.interpolation));
+		return configParts.join(" ");
+	}
+	_parseRadialConfigToString(config) {
 		const parts = [];
-		parts.push(config.shape);
-		if (config.size.kind === "extent") parts.push(config.size.value);
-		else {
-			const x = this._formatLengthPercentage(config.size.x);
-			const y = config.size.y ? ` ${this._formatLengthPercentage(config.size.y)}` : "";
-			parts.push(`${x}${y}`);
-		}
-		parts.push(`at ${this._serializePosition(config.position)}`);
-		if (config.interpolation) if (config.interpolation.kind === "rectangular") parts.push(`in ${config.interpolation.space}`);
-		else {
-			let str = `in ${config.interpolation.space}`;
-			if (config.interpolation.hueMethod) str += ` ${config.interpolation.hueMethod} hue`;
-			parts.push(str);
-		}
+		if (!this._isDefaultRadialShape(config.shape)) parts.push(config.shape);
+		if (!this._isDefaultRadialSize(config.size)) parts.push(this._parseRadialSizeToString(config.size));
+		if (!this._isDefaultRadialPosition(config.position)) parts.push(`at ${this._serializePosition(config.position)}`);
 		return parts.join(" ");
 	}
+	_parseRadialSizeToString(size) {
+		if (size.kind === "extent") return size.value;
+		const x = this._formatLengthPercentage(size.x);
+		if (size.y === void 0) return x;
+		return `${x} ${this._formatLengthPercentage(size.y)}`;
+	}
+	_parseInterpolationToString(interpolation) {
+		const { colorSpace, hue } = interpolation;
+		if (hue === void 0) return `in ${colorSpace}`;
+		return `in ${colorSpace} ${hue} hue`;
+	}
+	_isDefaultRadialShape(shape) {
+		return shape === "ellipse";
+	}
+	_isDefaultRadialSize(size) {
+		return size.kind === "extent" && size.value === "farthest-corner";
+	}
+	_isDefaultRadialPosition(position) {
+		return position.kind === "keywords" && position.x === "center" && position.y === "center";
+	}
 	_serializePosition(position) {
 		if (position.kind === "keywords") return `${position.x} ${position.y}`;
 		const x = this._formatLengthPercentage(position.x);
@@ -1247,6 +1292,11 @@ var RadialGradient = class RadialGradient extends GradientBase {
 			x: "center",
 			y: "center"
 		};
+		let interpolation;
+		const isLengthPercentage = (value) => {
+			if (value === void 0) return false;
+			return value.endsWith("%") || /^-?\d*\.?\d+[a-zA-Z]+$/.test(value);
+		};
 		for (const input of inputs) {
 			if (input.type !== "config") continue;
 			const tokens = splitTopLevelByWhitespace(input.value);
@@ -1263,20 +1313,88 @@ var RadialGradient = class RadialGradient extends GradientBase {
 					};
 					continue;
 				}
+				if (isLengthPercentage(t)) {
+					const nextToken = tokens[i + 1];
+					if (shape === "ellipse" && isLengthPercentage(nextToken)) {
+						size = {
+							kind: "explicit",
+							x: this._parseLengthPercentage(t),
+							y: this._parseLengthPercentage(nextToken)
+						};
+						i += 1;
+						continue;
+					}
+					size = {
+						kind: "explicit",
+						x: this._parseLengthPercentage(t)
+					};
+					continue;
+				}
 				if (t === "at") {
 					const xToken = tokens[i + 1];
 					const yToken = tokens[i + 2];
-					if ((xToken === "left" || xToken === "center" || xToken === "right") && (yToken === "top" || yToken === "center" || yToken === "bottom")) position = {
-						kind: "keywords",
-						x: xToken,
-						y: yToken
-					};
-					else position = {
-						kind: "values",
-						x: this._parseLengthPercentage(xToken),
-						y: this._parseLengthPercentage(yToken)
-					};
-					i += 2;
+					if (xToken === "center" && (yToken === void 0 || yToken === "in")) {
+						position = {
+							kind: "keywords",
+							x: "center",
+							y: "center"
+						};
+						i += 1;
+						continue;
+					}
+					if ((xToken === "left" || xToken === "right") && (yToken === void 0 || yToken === "in")) {
+						position = {
+							kind: "keywords",
+							x: xToken,
+							y: "center"
+						};
+						i += 1;
+						continue;
+					}
+					if ((xToken === "top" || xToken === "bottom") && (yToken === void 0 || yToken === "in")) {
+						position = {
+							kind: "keywords",
+							x: "center",
+							y: xToken
+						};
+						i += 1;
+						continue;
+					}
+					if ((xToken === "left" || xToken === "center" || xToken === "right") && (yToken === "top" || yToken === "center" || yToken === "bottom")) {
+						position = {
+							kind: "keywords",
+							x: xToken,
+							y: yToken
+						};
+						i += 2;
+						continue;
+					}
+					if (isLengthPercentage(xToken) && isLengthPercentage(yToken)) {
+						position = {
+							kind: "values",
+							x: this._parseLengthPercentage(xToken),
+							y: this._parseLengthPercentage(yToken)
+						};
+						i += 2;
+						continue;
+					}
+					throw new Error(`Invalid radial-gradient position: ${xToken ?? ""} ${yToken ?? ""}`);
+				}
+				if (t === "in") {
+					const colorSpace = tokens[i + 1];
+					const maybeHue = tokens[i + 2];
+					const maybeHueKeyword = tokens[i + 3];
+					if (!colorSpace) throw new Error("Invalid radial-gradient interpolation: missing color space");
+					if (maybeHue !== void 0 && maybeHueKeyword === "hue") {
+						interpolation = this._normalizeConfigInterpolation({
+							colorSpace,
+							hue: maybeHue
+						});
+						i += 3;
+						continue;
+					}
+					interpolation = this._normalizeConfigInterpolation({ colorSpace });
+					i += 1;
 					continue;
 				}
 			}
@@ -1284,7 +1402,8 @@ var RadialGradient = class RadialGradient extends GradientBase {
 		return {
 			shape,
 			size,
-			position
+			position,
+			interpolation
 		};
 	}
 	static _parseLengthPercentage(input) {
@@ -1300,6 +1419,15 @@ var RadialGradient = class RadialGradient extends GradientBase {
 			unit: match[2]
 		};
 	}
+	static _normalizeConfigInterpolation(value) {
+		const { colorSpace, hue } = value;
+		if (hue === void 0) return { colorSpace };
+		if (!isGradientPolarColorSpace(colorSpace)) return { colorSpace };
+		return {
+			colorSpace,
+			hue
+		};
+	}
 };
 //#endregion
 //#region src/gradients/ConicGradient.ts
@@ -1332,18 +1460,12 @@ var ConicGradient = class ConicGradient extends GradientBase {
 	_validateConfig(config) {}
 	_serializeConfig() {
 		const parts = [];
-		const angle = this.config.from;
-		parts.push(`from ${angle.value}${angle.unit}`);
-		parts.push(`at ${this._serializePosition(this.config.position)}`);
-		if (this.config.interpolation) {
-			const i = this.config.interpolation;
-			if (i.kind === "rectangular") parts.push(`in ${i.space}`);
-			else {
-				let str = `in ${i.space}`;
-				if (i.hueMethod) str += ` ${i.hueMethod} hue`;
-				parts.push(str);
-			}
+		if (!this._isDefaultFrom(this.config.from)) {
+			const angle = this.config.from;
+			parts.push(`from ${angle.value}${angle.unit}`);
 		}
+		if (!this._isDefaultPosition(this.config.position)) parts.push(`at ${this._serializePosition(this.config.position)}`);
+		if (this.config.interpolation !== void 0) parts.push(this._serializeInterpolation(this.config.interpolation));
 		return parts.join(" ");
 	}
 	_serializePosition(position) {
@@ -1356,6 +1478,17 @@ var ConicGradient = class ConicGradient extends GradientBase {
 		if (value.kind === "percent") return `${value.value}%`;
 		return `${value.value}${value.unit}`;
 	}
+	_serializeInterpolation(interpolation) {
+		const { colorSpace, hue } = interpolation;
+		if (hue === void 0) return `in ${colorSpace}`;
+		return `in ${colorSpace} ${hue} hue`;
+	}
+	_isDefaultFrom(from) {
+		return from.value === 0 && from.unit === "deg";
+	}
+	_isDefaultPosition(position) {
+		return position.kind === "keywords" && position.x === "center" && position.y === "center";
+	}
 	static _parseConfig(input) {
 		const config = {
 			from: {
@@ -1371,46 +1504,86 @@ var ConicGradient = class ConicGradient extends GradientBase {
 		};
 		if (!input) return config;
 		const tokens = splitTopLevelByWhitespace(input);
+		const isLengthPercentage = (value) => {
+			if (value === void 0) return false;
+			return value.endsWith("%") || /^-?\d*\.?\d+[a-zA-Z]+$/.test(value);
+		};
 		for (let i = 0; i < tokens.length; i++) {
 			const token = tokens[i];
 			if (token === "from") {
-				config.from = this._parseAngle(tokens[i + 1]);
+				const angleToken = tokens[i + 1];
+				if (angleToken === void 0) throw new Error("Invalid conic-gradient config: missing angle after from");
+				config.from = this._parseAngle(angleToken);
 				i += 1;
 				continue;
 			}
 			if (token === "at") {
 				const xToken = tokens[i + 1];
 				const yToken = tokens[i + 2];
-				if ((xToken === "left" || xToken === "center" || xToken === "right") && (yToken === "top" || yToken === "center" || yToken === "bottom")) config.position = {
-					kind: "keywords",
-					x: xToken,
-					y: yToken
-				};
-				else config.position = {
-					kind: "values",
-					x: this._parseLengthPercentage(xToken),
-					y: this._parseLengthPercentage(yToken)
-				};
-				i += 2;
-				continue;
+				if (xToken === void 0) throw new Error("Invalid conic-gradient config: missing position after at");
+				if (xToken === "center" && (yToken === void 0 || yToken === "in")) {
+					config.position = {
+						kind: "keywords",
+						x: "center",
+						y: "center"
+					};
+					i += 1;
+					continue;
+				}
+				if ((xToken === "left" || xToken === "right") && (yToken === void 0 || yToken === "in")) {
+					config.position = {
+						kind: "keywords",
+						x: xToken,
+						y: "center"
+					};
+					i += 1;
+					continue;
+				}
+				if ((xToken === "top" || xToken === "bottom") && (yToken === void 0 || yToken === "in")) {
+					config.position = {
+						kind: "keywords",
+						x: "center",
+						y: xToken
+					};
+					i += 1;
+					continue;
+				}
+				if ((xToken === "left" || xToken === "center" || xToken === "right") && (yToken === "top" || yToken === "center" || yToken === "bottom")) {
+					config.position = {
+						kind: "keywords",
+						x: xToken,
+						y: yToken
+					};
+					i += 2;
+					continue;
+				}
+				if (isLengthPercentage(xToken) && isLengthPercentage(yToken)) {
+					config.position = {
+						kind: "values",
+						x: this._parseLengthPercentage(xToken),
+						y: this._parseLengthPercentage(yToken)
+					};
+					i += 2;
+					continue;
+				}
+				throw new Error(`Invalid conic-gradient position: ${xToken} ${yToken ?? ""}`);
 			}
 			if (token === "in") {
-				const space = tokens[i + 1];
-				const hueMethod = tokens[i + 2];
-				if (tokens[i + 3] === "hue" && (hueMethod === "shorter" || hueMethod === "longer" || hueMethod === "increasing" || hueMethod === "decreasing")) {
+				const colorSpace = tokens[i + 1];
+				const maybeHue = tokens[i + 2];
+				const maybeHueKeyword = tokens[i + 3];
+				if (colorSpace === void 0) throw new Error("Invalid conic-gradient interpolation: missing color space");
+				if (maybeHueKeyword === "hue" && (maybeHue === "shorter" || maybeHue === "longer" || maybeHue === "increasing" || maybeHue === "decreasing")) {
 					config.interpolation = {
-						kind: "polar",
-						space,
-						hueMethod
+						colorSpace,
+						hue: maybeHue
 					};
 					i += 3;
 					continue;
 				}
-				config.interpolation = {
-					kind: "rectangular",
-					space
-				};
+				config.interpolation = { colorSpace };
 				i += 1;
+				continue;
 			}
 		}
 		return config;
@@ -1493,7 +1666,7 @@ function sampleColorAtPosition(stops, position) {
 function sampleRepeatingColorAtPosition(stops, position, firstPosition, period) {
 	return sampleColorAtPosition(stops, firstPosition + positiveModulo(position - firstPosition, period));
 }
-function expandRepeatingStops(stops) {
+function expandRepeatingStopsTo(stops, from, to) {
 	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
 	if (colorStops.length < 2) return colorStops;
 	const firstPosition = colorStops[0].position;
@@ -1503,18 +1676,18 @@ function expandRepeatingStops(stops) {
 	let order = 0;
 	result.push({
 		type: "color-stop",
-		value: sampleRepeatingColorAtPosition(colorStops, 0, firstPosition, period),
-		position: 0,
+		value: sampleRepeatingColorAtPosition(colorStops, from, firstPosition, period),
+		position: from,
 		_order: order
 	});
 	order += 1;
-	const startRepeat = Math.floor((0 - firstPosition) / period) - 1;
-	const endRepeat = Math.ceil((1 - firstPosition) / period) + 1;
+	const startRepeat = Math.floor((from - firstPosition) / period) - 1;
+	const endRepeat = Math.ceil((to - firstPosition) / period) + 1;
 	for (let repeatIndex = startRepeat; repeatIndex <= endRepeat; repeatIndex += 1) {
 		const offset = repeatIndex * period;
 		for (const stop of colorStops) {
 			const position = stop.position + offset;
-			if (position <= 0 || position >= 1) continue;
+			if (position <= from || position >= to) continue;
 			result.push({
 				...stop,
 				position,
@@ -1525,8 +1698,8 @@ function expandRepeatingStops(stops) {
 	}
 	result.push({
 		type: "color-stop",
-		value: sampleRepeatingColorAtPosition(colorStops, 1, firstPosition, period),
-		position: 1,
+		value: sampleRepeatingColorAtPosition(colorStops, to, firstPosition, period),
+		position: to,
 		_order: order
 	});
 	return result.sort((a, b) => {
@@ -1534,6 +1707,33 @@ function expandRepeatingStops(stops) {
 		return a.position - b.position;
 	}).map(({ _order, ...stop }) => stop);
 }
+function expandRepeatingStops(stops) {
+	return expandRepeatingStopsTo(stops, 0, 1);
+}
+function getMaxVisibleRadialT(center, radii, width, height) {
+	return Math.max(...[
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: width,
+			y: 0
+		},
+		{
+			x: 0,
+			y: height
+		},
+		{
+			x: width,
+			y: height
+		}
+	].map((corner) => {
+		const dx = (corner.x - center.x) / Math.max(radii.x, 1e-4);
+		const dy = (corner.y - center.y) / Math.max(radii.y, 1e-4);
+		return Math.sqrt(dx * dx + dy * dy);
+	}));
+}
 //#endregion
 //#region src/gradient-transformer/modules/helpers/resolve-renderable-linear-gradient-stops.ts
 function getHueFixup(hue) {
@@ -1583,13 +1783,13 @@ function getColorStopsWithPositions(stops) {
 	});
 }
 function formatColorForCanvas(input) {
-	const color = toRgb$4(input);
+	const color = toRgb$6(input);
 	if (!color) throw new Error("Failed to convert interpolated color to rgb.");
 	return formatRgb(color);
 }
 const DEFAULT_SAMPLE_COUNT = 64;
-const toRgb$4 = converter("rgb");
-function resolveRenderableLinearGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_COUNT) {
+const toRgb$6 = converter("rgb");
+function resolveRenderableGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_COUNT) {
 	const colorStops = getColorStopsWithPositions(gradient.stops);
 	const interpolation = gradient.config.interpolation;
 	if (colorStops.length < 2) return colorStops;
@@ -1619,9 +1819,9 @@ function resolveRenderableLinearGradientStops(gradient, sampleCount = DEFAULT_SA
 }
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerLinearGradientToCanvas.ts
-const toRgb$3 = converter("rgb");
+const toRgb$5 = converter("rgb");
 function toCanvasColor$1(input) {
-	const color = toRgb$3(input);
+	const color = toRgb$5(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return formatRgb(color);
 }
@@ -1638,7 +1838,7 @@ function getStopRange$2(stops) {
 		stops: colorStops
 	};
 }
-function normalizeStops$2(stops, min, max) {
+function normalizeStops$3(stops, min, max) {
 	const range = max - min || 1;
 	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).map((stop) => ({
 		...stop,
@@ -1661,7 +1861,7 @@ var ModuleTransformerLinearGradientToCanvas = class {
 			let startY = centerY - dirY * lineLength / 2;
 			let endX = centerX + dirX * lineLength / 2;
 			let endY = centerY + dirY * lineLength / 2;
-			const { min, max, stops } = getStopRange$2(resolveRenderableLinearGradientStops(gradient));
+			const { min, max, stops } = getStopRange$2(resolveRenderableGradientStops(gradient));
 			let normalizedStops = stops;
 			if (min < 0 || max > 1) {
 				const vx = endX - startX;
@@ -1672,7 +1872,7 @@ var ModuleTransformerLinearGradientToCanvas = class {
 				startY = baseStartY + vy * min;
 				endX = baseStartX + vx * max;
 				endY = baseStartY + vy * max;
-				normalizedStops = normalizeStops$2(stops, min, max);
+				normalizedStops = normalizeStops$3(stops, min, max);
 			}
 			const canvasGradient = ctx.createLinearGradient(startX, startY, endX, endY);
 			for (const stop of normalizedStops) canvasGradient.addColorStop(stop.position, toCanvasColor$1(stop.value));
@@ -1684,9 +1884,10 @@ var ModuleTransformerLinearGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerRadialGradientToCanvas.ts
-const toRgb$2 = converter("rgb");
+const toRgb$4 = converter("rgb");
+const RADIAL_GRADIENT_SAMPLE_COUNT = 128;
 function toCanvasColor(input) {
-	const color = toRgb$2(input);
+	const color = toRgb$4(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return formatRgb(color);
 }
@@ -1703,47 +1904,200 @@ function getStopRange$1(stops) {
 		stops: colorStops
 	};
 }
-function normalizeStops$1(stops, min, max) {
+function normalizeStops$2(stops, min, max) {
 	const range = max - min || 1;
 	return stops.map((stop) => ({
 		...stop,
 		position: (stop.position - min) / range
 	}));
 }
+function getDistanceToSide$1(center, width, height, side) {
+	if (side === "left") return center.x;
+	if (side === "right") return width - center.x;
+	if (side === "top") return center.y;
+	return height - center.y;
+}
+function getDistanceToCorner$1(center, corner) {
+	const dx = corner.x - center.x;
+	const dy = corner.y - center.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function getCornerDeltas$1(center, width, height) {
+	return [
+		{
+			dx: -center.x,
+			dy: -center.y
+		},
+		{
+			dx: width - center.x,
+			dy: -center.y
+		},
+		{
+			dx: -center.x,
+			dy: height - center.y
+		},
+		{
+			dx: width - center.x,
+			dy: height - center.y
+		}
+	];
+}
+function scaleEllipseRadiiToCorner$1(radiusX, radiusY, dx, dy) {
+	const safeRadiusX = Math.max(radiusX, 1e-4);
+	const safeRadiusY = Math.max(radiusY, 1e-4);
+	const scale = Math.sqrt(dx * dx / (safeRadiusX * safeRadiusX) + dy * dy / (safeRadiusY * safeRadiusY));
+	return {
+		x: safeRadiusX * scale,
+		y: safeRadiusY * scale
+	};
+}
 var ModuleTransformerRadialGradientToCanvas = class {
 	target = "canvas-2d";
 	gradientType = "radial-gradient";
 	to(input) {
 		const gradient = input;
 		return { draw: (ctx, width, height) => {
-			const pos = gradient.config.position;
-			let x = width / 2;
-			let y = height / 2;
-			if (pos.kind === "values") {
-				x = this._resolve(pos.x, width);
-				y = this._resolve(pos.y, height);
-			}
-			const dx = Math.max(x, width - x);
-			const dy = Math.max(y, height - y);
-			const radius = Math.sqrt(dx * dx + dy * dy);
-			const { min, max, stops } = getStopRange$1(gradient.stops);
-			let innerRadius = 0;
-			let outerRadius = radius;
+			const center = this._resolveCenter(gradient.config.position, width, height);
+			const radii = this._resolveRadialRadii(gradient.config.size, gradient.config.shape, center, width, height);
+			const maxVisibleT = getMaxVisibleRadialT(center, radii, width, height);
+			const baseStops = resolveRenderableGradientStops(gradient, RADIAL_GRADIENT_SAMPLE_COUNT);
+			const { min, max, stops } = getStopRange$1(gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
 			let normalizedStops = stops;
-			if (min >= 0 && (min < 0 || max > 1)) {
-				innerRadius = radius * min;
-				outerRadius = radius * max;
-				normalizedStops = normalizeStops$1(stops, min, max);
-			} else if (max > 1) {
-				outerRadius = radius * max;
-				normalizedStops = normalizeStops$1(stops, min, max);
+			let innerFactor = 0;
+			let outerFactor = gradient.isRepeating ? maxVisibleT : 1;
+			if (gradient.isRepeating) normalizedStops = normalizeStops$2(stops, 0, maxVisibleT);
+			else if (min < 0 || max > 1) {
+				normalizedStops = normalizeStops$2(stops, min, max);
+				innerFactor = min;
+				outerFactor = max;
 			}
-			const g = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
+			if (gradient.config.shape === "circle") {
+				const baseRadius = radii.x;
+				const innerRadius = Math.max(0, baseRadius * innerFactor);
+				const outerRadius = Math.max(innerRadius + 1e-4, baseRadius * outerFactor);
+				const g = ctx.createRadialGradient(center.x, center.y, innerRadius, center.x, center.y, outerRadius);
+				for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor(stop.value));
+				ctx.fillStyle = g;
+				ctx.fillRect(0, 0, width, height);
+				return;
+			}
+			const outerRadius = Math.max(radii.x, radii.y);
+			const scaleX = radii.x / outerRadius;
+			const scaleY = radii.y / outerRadius;
+			const innerRadius = Math.max(0, outerRadius * innerFactor);
+			const scaledOuterRadius = Math.max(innerRadius + 1e-4, outerRadius * outerFactor);
+			ctx.save();
+			ctx.translate(center.x, center.y);
+			ctx.scale(scaleX, scaleY);
+			const g = ctx.createRadialGradient(0, 0, innerRadius, 0, 0, scaledOuterRadius);
 			for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor(stop.value));
 			ctx.fillStyle = g;
-			ctx.fillRect(0, 0, width, height);
+			const drawRadius = scaledOuterRadius + 2;
+			ctx.fillRect(-drawRadius / scaleX * 2, -drawRadius / scaleY * 2, drawRadius / scaleX * 4, drawRadius / scaleY * 4);
+			ctx.restore();
 		} };
 	}
+	_resolveCenter(position, width, height) {
+		if (position.kind === "keywords") return {
+			x: this._resolveKeywordX(position.x, width),
+			y: this._resolveKeywordY(position.y, height)
+		};
+		return {
+			x: this._resolve(position.x, width),
+			y: this._resolve(position.y, height)
+		};
+	}
+	_resolveKeywordX(value, width) {
+		if (value === "left") return 0;
+		if (value === "center") return width / 2;
+		return width;
+	}
+	_resolveKeywordY(value, height) {
+		if (value === "top") return 0;
+		if (value === "center") return height / 2;
+		return height;
+	}
+	_resolveRadialRadii(size, shape, center, width, height) {
+		if (size.kind === "explicit") {
+			const radiusX = this._resolve(size.x, width);
+			const radiusY = size.y ? this._resolve(size.y, height) : radiusX;
+			return {
+				x: Math.max(radiusX, 1e-4),
+				y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+			};
+		}
+		const left = getDistanceToSide$1(center, width, height, "left");
+		const right = getDistanceToSide$1(center, width, height, "right");
+		const top = getDistanceToSide$1(center, width, height, "top");
+		const bottom = getDistanceToSide$1(center, width, height, "bottom");
+		if (shape === "circle") {
+			const cornerDistances = [
+				{
+					x: 0,
+					y: 0
+				},
+				{
+					x: width,
+					y: 0
+				},
+				{
+					x: 0,
+					y: height
+				},
+				{
+					x: width,
+					y: height
+				}
+			].map((corner) => getDistanceToCorner$1(center, corner));
+			if (size.value === "closest-side") {
+				const radius = Math.min(left, right, top, bottom);
+				return {
+					x: radius,
+					y: radius
+				};
+			}
+			if (size.value === "farthest-side") {
+				const radius = Math.max(left, right, top, bottom);
+				return {
+					x: radius,
+					y: radius
+				};
+			}
+			if (size.value === "closest-corner") {
+				const radius = Math.min(...cornerDistances);
+				return {
+					x: radius,
+					y: radius
+				};
+			}
+			const radius = Math.max(...cornerDistances);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		const closestSideRadiusX = Math.min(left, right);
+		const closestSideRadiusY = Math.min(top, bottom);
+		const farthestSideRadiusX = Math.max(left, right);
+		const farthestSideRadiusY = Math.max(top, bottom);
+		if (size.value === "closest-side") return {
+			x: Math.max(closestSideRadiusX, 1e-4),
+			y: Math.max(closestSideRadiusY, 1e-4)
+		};
+		if (size.value === "farthest-side") return {
+			x: Math.max(farthestSideRadiusX, 1e-4),
+			y: Math.max(farthestSideRadiusY, 1e-4)
+		};
+		const corners = getCornerDeltas$1(center, width, height);
+		if (size.value === "closest-corner") return corners.map((corner) => scaleEllipseRadiiToCorner$1(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => {
+			const closestArea = closest.x * closest.y;
+			return current.x * current.y < closestArea ? current : closest;
+		});
+		return corners.map((corner) => scaleEllipseRadiiToCorner$1(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => {
+			const farthestArea = farthest.x * farthest.y;
+			return current.x * current.y > farthestArea ? current : farthest;
+		});
+	}
 	_resolve(value, size) {
 		if (value.kind === "percent") return value.value / 100 * size;
 		if (value.unit === "px") return value.value;
@@ -1752,7 +2106,8 @@ var ModuleTransformerRadialGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerConicGradientToCanvas.ts
-const toRgb$1 = converter("rgb");
+const CONIC_GRADIENT_SAMPLE_COUNT = 128;
+const toRgb$3 = converter("rgb");
 var ModuleTransformerConicGradientToCanvas = class {
 	target = "canvas-2d";
 	gradientType = "conic-gradient";
@@ -1763,7 +2118,8 @@ var ModuleTransformerConicGradientToCanvas = class {
 			const data = imageData.data;
 			const { x: cx, y: cy } = this._resolvePosition(gradient.config.position, width, height);
 			const from = this._toRad(gradient.config.from);
-			const stops = this._normalizeStops(gradient.stops);
+			const renderStops = resolveRenderableGradientStops(gradient, CONIC_GRADIENT_SAMPLE_COUNT);
+			const stops = this._normalizeStops(renderStops);
 			if (stops.length === 0) {
 				ctx.putImageData(imageData, 0, 0);
 				return;
@@ -1851,7 +2207,7 @@ var ModuleTransformerConicGradientToCanvas = class {
 		};
 	}
 	_parseColor(input) {
-		const color = toRgb$1(input);
+		const color = toRgb$3(input);
 		if (!color) throw new Error(`Failed to convert color: ${input}`);
 		return {
 			r: Math.round((color.r ?? 0) * 255),
@@ -1866,10 +2222,10 @@ var ModuleTransformerConicGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/webgl/ModuleTransformerLinearGradientToWebgl.ts
-const toRgb = converter("rgb");
-const MAX_STOPS = 128;
-function toWebGLColor(input) {
-	const color = toRgb(input);
+const toRgb$2 = converter("rgb");
+const MAX_STOPS$2 = 128;
+function toWebGLColor$2(input) {
+	const color = toRgb$2(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		color.r ?? 0,
@@ -1891,14 +2247,14 @@ function getStopRange(stops) {
 		stops: colorStops
 	};
 }
-function normalizeStops(stops, min, max) {
+function normalizeStops$1(stops, min, max) {
 	const range = max - min || 1;
 	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).map((stop) => ({
 		...stop,
 		position: (stop.position - min) / range
 	}));
 }
-function createShader(gl, type, source) {
+function createShader$2(gl, type, source) {
 	const shader = gl.createShader(type);
 	if (!shader) throw new Error("Failed to create WebGL shader.");
 	gl.shaderSource(shader, source);
@@ -1910,9 +2266,9 @@ function createShader(gl, type, source) {
 	}
 	return shader;
 }
-function createProgram(gl, vertexSource, fragmentSource) {
-	const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
-	const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+function createProgram$2(gl, vertexSource, fragmentSource) {
+	const vertexShader = createShader$2(gl, gl.VERTEX_SHADER, vertexSource);
+	const fragmentShader = createShader$2(gl, gl.FRAGMENT_SHADER, fragmentSource);
 	const program = gl.createProgram();
 	if (!program) throw new Error("Failed to create WebGL program.");
 	gl.attachShader(program, vertexShader);
@@ -1925,15 +2281,15 @@ function createProgram(gl, vertexSource, fragmentSource) {
 	}
 	return program;
 }
-function getColorStopCount(stops) {
+function getColorStopCount$2(stops) {
 	return stops.filter((stop) => stop.type === "color-stop").length;
 }
-function getWebGLSampleCount(gradient, maxStops) {
-	const colorStopCount = getColorStopCount(gradient.stops);
+function getWebGLSampleCount$2(gradient, maxStops) {
+	const colorStopCount = getColorStopCount$2(gradient.stops);
 	const segmentCount = Math.max(1, colorStopCount - 1);
 	return Math.max(2, Math.floor((maxStops - 1) / segmentCount));
 }
-function getColorAtPosition(stops, position) {
+function getColorAtPosition$2(stops, position) {
 	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
 	if (colorStops.length === 0) throw new Error("Cannot sample color from empty gradient stops.");
 	if (position <= colorStops[0].position) return colorStops[0].value;
@@ -1950,7 +2306,7 @@ function getColorAtPosition(stops, position) {
 	}
 	return lastStop.value;
 }
-function fitStopsToWebGLLimit(stops, maxStops) {
+function fitStopsToWebGLLimit$2(stops, maxStops) {
 	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
 	if (colorStops.length <= maxStops) return colorStops;
 	const sampledStops = [];
@@ -1958,7 +2314,7 @@ function fitStopsToWebGLLimit(stops, maxStops) {
 		const position = index / (maxStops - 1);
 		sampledStops.push({
 			type: "color-stop",
-			value: getColorAtPosition(colorStops, position),
+			value: getColorAtPosition$2(colorStops, position),
 			position
 		});
 	}
@@ -1975,7 +2331,7 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 			canvas.width = width;
 			canvas.height = height;
 			gl.viewport(0, 0, width, height);
-			const program = createProgram(gl, `
+			const program = createProgram$2(gl, `
                     attribute vec2 a_position;
                     varying vec2 v_uv;
 
@@ -1991,13 +2347,13 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
                     uniform vec2 u_start;
                     uniform vec2 u_end;
                     uniform int u_stopCount;
-                    uniform float u_positions[${MAX_STOPS}];
-                    uniform vec4 u_colors[${MAX_STOPS}];
+                    uniform float u_positions[${MAX_STOPS$2}];
+                    uniform vec4 u_colors[${MAX_STOPS$2}];
 
                     vec4 getGradientColor(float t) {
                         vec4 result = u_colors[0];
 
-                        for (int i = 0; i < ${MAX_STOPS - 1}; i++) {
+                        for (int i = 0; i < ${MAX_STOPS$2 - 1}; i++) {
                             if (i >= u_stopCount - 1) {
                                 break;
                             }
@@ -2062,7 +2418,7 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 			let startY = centerY - dirY * lineLength / 2;
 			let endX = centerX + dirX * lineLength / 2;
 			let endY = centerY + dirY * lineLength / 2;
-			const { min, max, stops } = getStopRange(resolveRenderableLinearGradientStops(gradient, getWebGLSampleCount(gradient, MAX_STOPS)));
+			const { min, max, stops } = getStopRange(resolveRenderableGradientStops(gradient, getWebGLSampleCount$2(gradient, MAX_STOPS$2)));
 			let normalizedStops = stops;
 			if (min < 0 || max > 1) {
 				const vx = endX - startX;
@@ -2073,17 +2429,17 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 				startY = baseStartY + vy * min;
 				endX = baseStartX + vx * max;
 				endY = baseStartY + vy * max;
-				normalizedStops = normalizeStops(stops, min, max);
+				normalizedStops = normalizeStops$1(stops, min, max);
 			}
 			const startU = startX / width;
 			const startV = 1 - startY / height;
 			const endU = endX / width;
 			const endV = 1 - endY / height;
-			const limitedStops = fitStopsToWebGLLimit(normalizedStops, MAX_STOPS);
-			const positions = new Float32Array(MAX_STOPS);
-			const colors = new Float32Array(MAX_STOPS * 4);
+			const limitedStops = fitStopsToWebGLLimit$2(normalizedStops, MAX_STOPS$2);
+			const positions = new Float32Array(MAX_STOPS$2);
+			const colors = new Float32Array(MAX_STOPS$2 * 4);
 			limitedStops.forEach((stop, index) => {
-				const color = toWebGLColor(stop.value);
+				const color = toWebGLColor$2(stop.value);
 				positions[index] = stop.position;
 				colors[index * 4 + 0] = color[0];
 				colors[index * 4 + 1] = color[1];
@@ -2102,6 +2458,602 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 	}
 };
 //#endregion
+//#region src/gradient-transformer/modules/webgl/ModuleTransformerConicGradientToWebgl.ts
+const toRgb$1 = converter("rgb");
+const MAX_STOPS$1 = 128;
+const TWO_PI = Math.PI * 2;
+function toWebGLColor$1(input) {
+	const color = toRgb$1(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return [
+		color.r ?? 0,
+		color.g ?? 0,
+		color.b ?? 0,
+		color.alpha ?? 1
+	];
+}
+function createShader$1(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (!shader) throw new Error("Failed to create WebGL shader.");
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		const error = gl.getShaderInfoLog(shader);
+		gl.deleteShader(shader);
+		throw new Error(`WebGL shader compile error: ${error}`);
+	}
+	return shader;
+}
+function createProgram$1(gl, vertexSource, fragmentSource) {
+	const vertexShader = createShader$1(gl, gl.VERTEX_SHADER, vertexSource);
+	const fragmentShader = createShader$1(gl, gl.FRAGMENT_SHADER, fragmentSource);
+	const program = gl.createProgram();
+	if (!program) throw new Error("Failed to create WebGL program.");
+	gl.attachShader(program, vertexShader);
+	gl.attachShader(program, fragmentShader);
+	gl.linkProgram(program);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		const error = gl.getProgramInfoLog(program);
+		gl.deleteProgram(program);
+		throw new Error(`WebGL program link error: ${error}`);
+	}
+	return program;
+}
+function getColorStopCount$1(stops) {
+	return stops.filter((stop) => stop.type === "color-stop").length;
+}
+function getWebGLSampleCount$1(gradient, maxStops) {
+	const colorStopCount = getColorStopCount$1(gradient.stops);
+	const segmentCount = Math.max(1, colorStopCount - 1);
+	return Math.max(2, Math.floor((maxStops - 1) / segmentCount));
+}
+function getColorAtPosition$1(stops, position) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+	if (colorStops.length === 0) throw new Error("Cannot sample color from empty gradient stops.");
+	if (position <= colorStops[0].position) return colorStops[0].value;
+	const lastStop = colorStops[colorStops.length - 1];
+	if (position >= lastStop.position) return lastStop.value;
+	for (let index = 0; index < colorStops.length - 1; index += 1) {
+		const current = colorStops[index];
+		const next = colorStops[index + 1];
+		if (position >= current.position && position <= next.position) {
+			const range = next.position - current.position || 1;
+			const localT = (position - current.position) / range;
+			return formatRgb(interpolate([current.value, next.value], "rgb")(localT));
+		}
+	}
+	return lastStop.value;
+}
+function fitStopsToWebGLLimit$1(stops, maxStops) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+	if (colorStops.length <= maxStops) return colorStops;
+	const sampledStops = [];
+	for (let index = 0; index < maxStops; index += 1) {
+		const position = index / (maxStops - 1);
+		sampledStops.push({
+			type: "color-stop",
+			value: getColorAtPosition$1(colorStops, position),
+			position
+		});
+	}
+	return sampledStops;
+}
+function resolveLengthPercentage(value, reference) {
+	if (value.kind === "percent") return value.value / 100 * reference;
+	if (value.kind === "length") {
+		if (value.unit === "px") return value.value;
+		throw new Error(`Unsupported gradient length unit for WebGL conic gradient: ${value.unit}`);
+	}
+	return value;
+}
+function resolveAngleToRadians(angle) {
+	if (angle.unit === "rad") return angle.value;
+	if (angle.unit === "deg") return angle.value / 360 * TWO_PI;
+	if (angle.unit === "turn") return angle.value * TWO_PI;
+	if (angle.unit === "grad") return angle.value / 400 * TWO_PI;
+	return angle.unit;
+}
+function resolveKeywordPositionX$1(x, width) {
+	if (x === "left") return 0;
+	if (x === "center") return width / 2;
+	if (x === "right") return width;
+	return width / 2;
+}
+function resolveKeywordPositionY$1(y, height) {
+	if (y === "top") return 0;
+	if (y === "center") return height / 2;
+	if (y === "bottom") return height;
+	return height / 2;
+}
+function resolveConicCenter(position, width, height) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordPositionX$1(position.x, width),
+		y: resolveKeywordPositionY$1(position.y, height)
+	};
+	if (position.kind === "values") return {
+		x: resolveLengthPercentage(position.x, width),
+		y: resolveLengthPercentage(position.y, height)
+	};
+	return {
+		x: width / 2,
+		y: height / 2
+	};
+}
+var ModuleTransformerConicGradientToCanvasWebGL = class {
+	target = "canvas-webgl";
+	gradientType = "conic-gradient";
+	to(input) {
+		const gradient = input;
+		return { draw: (canvas, width, height) => {
+			const gl = canvas.getContext("webgl");
+			if (!gl) throw new Error("WebGL is not supported.");
+			canvas.width = width;
+			canvas.height = height;
+			gl.viewport(0, 0, width, height);
+			const program = createProgram$1(gl, `
+                    attribute vec2 a_position;
+                    varying vec2 v_uv;
+
+                    void main() {
+                        v_uv = a_position * 0.5 + 0.5;
+                        gl_Position = vec4(a_position, 0.0, 1.0);
+                    }
+                `, `
+                    precision mediump float;
+
+                    const float PI = 3.141592653589793;
+                    const float TWO_PI = 6.283185307179586;
+
+                    varying vec2 v_uv;
+
+                    uniform vec2 u_center;
+                    uniform float u_startAngle;
+                    uniform int u_stopCount;
+                    uniform float u_positions[${MAX_STOPS$1}];
+                    uniform vec4 u_colors[${MAX_STOPS$1}];
+
+                    vec4 getGradientColor(float t) {
+                        vec4 result = u_colors[0];
+
+                        for (int i = 0; i < ${MAX_STOPS$1 - 1}; i++) {
+                            if (i >= u_stopCount - 1) {
+                                break;
+                            }
+
+                            float currentPosition = u_positions[i];
+                            float nextPosition = u_positions[i + 1];
+
+                            if (t <= currentPosition) {
+                                return u_colors[i];
+                            }
+
+                            if (t >= currentPosition && t <= nextPosition) {
+                                float localT = (t - currentPosition) / max(nextPosition - currentPosition, 0.00001);
+                                return mix(u_colors[i], u_colors[i + 1], localT);
+                            }
+
+                            result = u_colors[i + 1];
+                        }
+
+                        return result;
+                    }
+
+                    void main() {
+                        vec2 delta = v_uv - u_center;
+
+                        float angle = atan(delta.y, delta.x);
+                        float cssAngle = mod((PI * 0.5) - angle + TWO_PI, TWO_PI);
+
+                        float t = mod(cssAngle - u_startAngle + TWO_PI, TWO_PI) / TWO_PI;
+
+                        gl_FragColor = getGradientColor(t);
+                    }
+                `);
+			gl.useProgram(program);
+			const positionBuffer = gl.createBuffer();
+			gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+				-1,
+				-1,
+				1,
+				-1,
+				-1,
+				1,
+				-1,
+				1,
+				1,
+				-1,
+				1,
+				1
+			]), gl.STATIC_DRAW);
+			const positionLocation = gl.getAttribLocation(program, "a_position");
+			gl.enableVertexAttribArray(positionLocation);
+			gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+			const center = resolveConicCenter(gradient.config.position, width, height);
+			const limitedStops = fitStopsToWebGLLimit$1(resolveRenderableGradientStops(gradient, getWebGLSampleCount$1(gradient, MAX_STOPS$1)), MAX_STOPS$1);
+			const positions = new Float32Array(MAX_STOPS$1);
+			const colors = new Float32Array(MAX_STOPS$1 * 4);
+			limitedStops.forEach((stop, index) => {
+				const color = toWebGLColor$1(stop.value);
+				positions[index] = stop.position;
+				colors[index * 4 + 0] = color[0];
+				colors[index * 4 + 1] = color[1];
+				colors[index * 4 + 2] = color[2];
+				colors[index * 4 + 3] = color[3];
+			});
+			gl.uniform2f(gl.getUniformLocation(program, "u_center"), center.x / width, 1 - center.y / height);
+			gl.uniform1f(gl.getUniformLocation(program, "u_startAngle"), resolveAngleToRadians(gradient.config.from));
+			gl.uniform1i(gl.getUniformLocation(program, "u_stopCount"), limitedStops.length);
+			gl.uniform1fv(gl.getUniformLocation(program, "u_positions"), positions);
+			gl.uniform4fv(gl.getUniformLocation(program, "u_colors"), colors);
+			gl.clearColor(0, 0, 0, 0);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+			gl.drawArrays(gl.TRIANGLES, 0, 6);
+		} };
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/webgl/ModuleTransformerRadialGradientToWebgl.ts
+const toRgb = converter("rgb");
+const MAX_STOPS = 128;
+const MAX_REPEATING_RADIAL_T = 16;
+function toWebGLColor(input) {
+	const color = toRgb(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return [
+		color.r ?? 0,
+		color.g ?? 0,
+		color.b ?? 0,
+		color.alpha ?? 1
+	];
+}
+function createShader(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (!shader) throw new Error("Failed to create WebGL shader.");
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		const error = gl.getShaderInfoLog(shader);
+		gl.deleteShader(shader);
+		throw new Error(`WebGL shader compile error: ${error}`);
+	}
+	return shader;
+}
+function createProgram(gl, vertexSource, fragmentSource) {
+	const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+	const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+	const program = gl.createProgram();
+	if (!program) throw new Error("Failed to create WebGL program.");
+	gl.attachShader(program, vertexShader);
+	gl.attachShader(program, fragmentShader);
+	gl.linkProgram(program);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		const error = gl.getProgramInfoLog(program);
+		gl.deleteProgram(program);
+		throw new Error(`WebGL program link error: ${error}`);
+	}
+	return program;
+}
+function getColorStopCount(stops) {
+	return stops.filter((stop) => stop.type === "color-stop").length;
+}
+function getWebGLSampleCount(gradient, maxStops) {
+	const colorStopCount = getColorStopCount(gradient.stops);
+	const segmentCount = Math.max(1, colorStopCount - 1);
+	return Math.max(2, Math.floor((maxStops - 1) / segmentCount));
+}
+function getColorAtPosition(stops, position) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+	if (colorStops.length === 0) throw new Error("Cannot sample color from empty gradient stops.");
+	if (position <= colorStops[0].position) return colorStops[0].value;
+	const lastStop = colorStops[colorStops.length - 1];
+	if (position >= lastStop.position) return lastStop.value;
+	for (let index = 0; index < colorStops.length - 1; index += 1) {
+		const current = colorStops[index];
+		const next = colorStops[index + 1];
+		if (position >= current.position && position <= next.position) {
+			const range = next.position - current.position || 1;
+			const localT = (position - current.position) / range;
+			return formatRgb(interpolate([current.value, next.value], "rgb")(localT));
+		}
+	}
+	return lastStop.value;
+}
+function fitStopsToWebGLLimit(stops, maxStops) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+	if (colorStops.length <= maxStops) return colorStops;
+	const sampledStops = [];
+	for (let index = 0; index < maxStops; index += 1) {
+		const position = index / (maxStops - 1);
+		sampledStops.push({
+			type: "color-stop",
+			value: getColorAtPosition(colorStops, position),
+			position
+		});
+	}
+	return sampledStops;
+}
+function parseLengthPercentage(value, reference) {
+	if (value.kind === "percent") return value.value / 100 * reference;
+	if (value.kind === "length") {
+		if (value.unit === "px") return value.value;
+		throw new Error(`Unsupported gradient length unit for WebGL radial gradient: ${value.unit}`);
+	}
+	return value;
+}
+function resolveKeywordPositionX(x, width) {
+	if (x === "left") return 0;
+	if (x === "center") return width / 2;
+	if (x === "right") return width;
+	return width / 2;
+}
+function resolveKeywordPositionY(y, height) {
+	if (y === "top") return 0;
+	if (y === "center") return height / 2;
+	if (y === "bottom") return height;
+	return height / 2;
+}
+function resolveRadialCenter(position, width, height) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordPositionX(position.x, width),
+		y: resolveKeywordPositionY(position.y, height)
+	};
+	if (position.kind === "values") return {
+		x: parseLengthPercentage(position.x, width),
+		y: parseLengthPercentage(position.y, height)
+	};
+	return {
+		x: width / 2,
+		y: height / 2
+	};
+}
+function getDistanceToSide(center, width, height, side) {
+	if (side === "left") return center.x;
+	if (side === "right") return width - center.x;
+	if (side === "top") return center.y;
+	return height - center.y;
+}
+function getDistanceToCorner(center, corner) {
+	const dx = corner.x - center.x;
+	const dy = corner.y - center.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function normalizeStops(stops, min, max) {
+	const range = max - min || 1;
+	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).map((stop) => ({
+		...stop,
+		position: (stop.position - min) / range
+	}));
+}
+function getCornerDeltas(center, width, height) {
+	return [
+		{
+			dx: -center.x,
+			dy: -center.y
+		},
+		{
+			dx: width - center.x,
+			dy: -center.y
+		},
+		{
+			dx: -center.x,
+			dy: height - center.y
+		},
+		{
+			dx: width - center.x,
+			dy: height - center.y
+		}
+	];
+}
+function scaleEllipseRadiiToCorner(radiusX, radiusY, dx, dy) {
+	const safeRadiusX = Math.max(radiusX, 1e-4);
+	const safeRadiusY = Math.max(radiusY, 1e-4);
+	const scale = Math.sqrt(dx * dx / (safeRadiusX * safeRadiusX) + dy * dy / (safeRadiusY * safeRadiusY));
+	return {
+		x: safeRadiusX * scale,
+		y: safeRadiusY * scale
+	};
+}
+function resolveRadialRadii(size, shape, center, width, height) {
+	if (size.kind === "explicit") {
+		const radiusX = parseLengthPercentage(size.x, width);
+		const radiusY = size.y ? parseLengthPercentage(size.y, height) : radiusX;
+		return {
+			x: Math.max(radiusX, 1e-4),
+			y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+		};
+	}
+	const left = getDistanceToSide(center, width, height, "left");
+	const right = getDistanceToSide(center, width, height, "right");
+	const top = getDistanceToSide(center, width, height, "top");
+	const bottom = getDistanceToSide(center, width, height, "bottom");
+	if (shape === "circle") {
+		const cornerDistances = [
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: width,
+				y: 0
+			},
+			{
+				x: 0,
+				y: height
+			},
+			{
+				x: width,
+				y: height
+			}
+		].map((corner) => getDistanceToCorner(center, corner));
+		if (size.value === "closest-side") {
+			const radius = Math.max(Math.min(left, right, top, bottom), 1e-4);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "farthest-side") {
+			const radius = Math.max(Math.max(left, right, top, bottom), 1e-4);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "closest-corner") {
+			const radius = Math.max(Math.min(...cornerDistances), 1e-4);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		const radius = Math.max(Math.max(...cornerDistances), 1e-4);
+		return {
+			x: radius,
+			y: radius
+		};
+	}
+	const closestSideRadiusX = Math.min(left, right);
+	const closestSideRadiusY = Math.min(top, bottom);
+	const farthestSideRadiusX = Math.max(left, right);
+	const farthestSideRadiusY = Math.max(top, bottom);
+	if (size.value === "closest-side") return {
+		x: Math.max(closestSideRadiusX, 1e-4),
+		y: Math.max(closestSideRadiusY, 1e-4)
+	};
+	if (size.value === "farthest-side") return {
+		x: Math.max(farthestSideRadiusX, 1e-4),
+		y: Math.max(farthestSideRadiusY, 1e-4)
+	};
+	const corners = getCornerDeltas(center, width, height);
+	if (size.value === "closest-corner") return corners.map((corner) => scaleEllipseRadiiToCorner(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => {
+		const closestArea = closest.x * closest.y;
+		return current.x * current.y < closestArea ? current : closest;
+	});
+	return corners.map((corner) => scaleEllipseRadiiToCorner(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => {
+		const farthestArea = farthest.x * farthest.y;
+		return current.x * current.y > farthestArea ? current : farthest;
+	});
+}
+var ModuleTransformerRadialGradientToCanvasWebGL = class {
+	target = "canvas-webgl";
+	gradientType = "radial-gradient";
+	to(input) {
+		const gradient = input;
+		return { draw: (canvas, width, height) => {
+			const gl = canvas.getContext("webgl");
+			if (!gl) throw new Error("WebGL is not supported.");
+			canvas.width = width;
+			canvas.height = height;
+			gl.viewport(0, 0, width, height);
+			const program = createProgram(gl, `
+                    attribute vec2 a_position;
+                    varying vec2 v_uv;
+
+                    void main() {
+                        v_uv = a_position * 0.5 + 0.5;
+                        gl_Position = vec4(a_position, 0.0, 1.0);
+                    }
+                `, `
+                    precision mediump float;
+
+                    varying vec2 v_uv;
+
+                    uniform vec2 u_center;
+                    uniform vec2 u_radius;
+                    uniform int u_stopCount;
+                    uniform float u_positions[${MAX_STOPS}];
+                    uniform vec4 u_colors[${MAX_STOPS}];
+                    uniform float u_tMax;
+
+                    vec4 getGradientColor(float t) {
+                        vec4 result = u_colors[0];
+
+                        for (int i = 0; i < ${MAX_STOPS - 1}; i++) {
+                            if (i >= u_stopCount - 1) {
+                                break;
+                            }
+
+                            float currentPosition = u_positions[i];
+                            float nextPosition = u_positions[i + 1];
+
+                            if (t <= currentPosition) {
+                                return u_colors[i];
+                            }
+
+                            if (t >= currentPosition && t <= nextPosition) {
+                                float localT = (t - currentPosition) / max(nextPosition - currentPosition, 0.00001);
+                                return mix(u_colors[i], u_colors[i + 1], localT);
+                            }
+
+                            result = u_colors[i + 1];
+                        }
+
+                        return result;
+                    }
+
+                    void main() {
+                        vec2 delta = v_uv - u_center;
+                        vec2 normalized = delta / max(u_radius, vec2(0.00001));
+                        float t = length(normalized);
+
+                        t = clamp(t, 0.0, u_tMax);
+                        t = t / max(u_tMax, 0.00001);
+
+                        gl_FragColor = getGradientColor(t);
+                    }
+                `);
+			gl.useProgram(program);
+			const positionBuffer = gl.createBuffer();
+			gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+				-1,
+				-1,
+				1,
+				-1,
+				-1,
+				1,
+				-1,
+				1,
+				1,
+				-1,
+				1,
+				1
+			]), gl.STATIC_DRAW);
+			const positionLocation = gl.getAttribLocation(program, "a_position");
+			gl.enableVertexAttribArray(positionLocation);
+			gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+			const center = resolveRadialCenter(gradient.config.position, width, height);
+			const radius = resolveRadialRadii(gradient.config.size, gradient.config.shape, center, width, height);
+			const maxVisibleT = getMaxVisibleRadialT(center, radius, width, height);
+			const baseStops = resolveRenderableGradientStops(gradient, getWebGLSampleCount(gradient, MAX_STOPS));
+			const repeatMaxT = Math.min(maxVisibleT, MAX_REPEATING_RADIAL_T);
+			const maxT = gradient.isRepeating ? repeatMaxT : 1;
+			const renderStops = gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, repeatMaxT) : baseStops;
+			const limitedStops = fitStopsToWebGLLimit(gradient.isRepeating ? normalizeStops(renderStops, 0, repeatMaxT) : renderStops, MAX_STOPS);
+			const positions = new Float32Array(MAX_STOPS);
+			const colors = new Float32Array(MAX_STOPS * 4);
+			limitedStops.forEach((stop, index) => {
+				const color = toWebGLColor(stop.value);
+				positions[index] = stop.position;
+				colors[index * 4 + 0] = color[0];
+				colors[index * 4 + 1] = color[1];
+				colors[index * 4 + 2] = color[2];
+				colors[index * 4 + 3] = color[3];
+			});
+			gl.uniform2f(gl.getUniformLocation(program, "u_center"), center.x / width, 1 - center.y / height);
+			gl.uniform2f(gl.getUniformLocation(program, "u_radius"), radius.x / width, radius.y / height);
+			gl.uniform1f(gl.getUniformLocation(program, "u_tMax"), maxT);
+			gl.uniform1i(gl.getUniformLocation(program, "u_stopCount"), limitedStops.length);
+			gl.uniform1fv(gl.getUniformLocation(program, "u_positions"), positions);
+			gl.uniform4fv(gl.getUniformLocation(program, "u_colors"), colors);
+			gl.clearColor(0, 0, 0, 0);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+			gl.drawArrays(gl.TRIANGLES, 0, 6);
+		} };
+	}
+};
+//#endregion
 //#region src/gradient-transformer/GradientTransformer.ts
 var GradientTransformer = class {
 	static _modules = /* @__PURE__ */ new Map();
@@ -2139,6 +3091,8 @@ var GradientTransformer = class {
 		this.add(new ModuleTransformerRadialGradientToCanvas());
 		this.add(new ModuleTransformerConicGradientToCanvas());
 		this.add(new ModuleTransformerLinearGradientToCanvasWebGL());
+		this.add(new ModuleTransformerRadialGradientToCanvasWebGL());
+		this.add(new ModuleTransformerConicGradientToCanvasWebGL());
 	}
 	static _getKey(target, gradientType) {
 		return `${target}:${gradientType}`;
@@ -2200,4 +3154,4 @@ function transformFrom(target, gradientType, input) {
 	return GradientTransformer.from(target, gradientType, input);
 }
 //#endregion
-export { ConicGradient, GRADIENT_COLOR_SPACE, GRADIENT_HUE_INTERPOLATIONS, GRADIENT_POLAR_COLOR_SPACES, GradientBase, GradientFactory, GradientTransformer, LinearGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCss, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCanvasWebGL, ModuleTransformerLinearGradientToCss, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCss, PatternTokenKind, RadialGradient, angleValueFromString, ceilTo, clamp, degToRad, floorTo, format, fromPercent, gradToRad, isAngle, isAngleUnit, isColorHint, isColorStop, isConfig, isGradient, isGradientColorSpace, isGradientHueInterpolation, isGradientPolarColorSpace, isPatternSyntaxValid, isPatternValid, isValid, matchExpression, normalizeAngleDeg, normalizeAngleRad, parse, parseStringToAbi, radToDeg, roundTo, splitTopLevelByWhitespace, toPercent, tokenizePattern, transformFrom, transformTo, truncTo, turnToRad, validate, validatePattern, validatePatternSemantic, validatePatternStructure, validatePatternSyntax };
+export { ConicGradient, GRADIENT_COLOR_SPACE, GRADIENT_HUE_INTERPOLATIONS, GRADIENT_POLAR_COLOR_SPACES, GradientBase, GradientFactory, GradientTransformer, LinearGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCanvasWebGL, ModuleTransformerConicGradientToCss, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCanvasWebGL, ModuleTransformerLinearGradientToCss, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCanvasWebGL, ModuleTransformerRadialGradientToCss, PatternTokenKind, RadialGradient, angleValueFromString, ceilTo, clamp, degToRad, floorTo, format, fromPercent, gradToRad, isAngle, isAngleUnit, isColorHint, isColorStop, isConfig, isGradient, isGradientColorSpace, isGradientHueInterpolation, isGradientPolarColorSpace, isPatternSyntaxValid, isPatternValid, isValid, matchExpression, normalizeAngleDeg, normalizeAngleRad, parse, parseStringToAbi, radToDeg, roundTo, splitTopLevelByWhitespace, toPercent, tokenizePattern, transformFrom, transformTo, truncTo, turnToRad, validate, validatePattern, validatePatternSemantic, validatePatternStructure, validatePatternSyntax };