gradiente 2.0.1 → 2.1.1

package/dist/{index.mjs → index.js}

@@ -1,4 +1,4 @@
-import { converter, formatRgb, parse as parse$1 } from "culori";
+import { converter, fixupHueDecreasing, fixupHueIncreasing, fixupHueLonger, fixupHueShorter, formatRgb, interpolate, parse as parse$1 } from "culori";
 //#region src/utils/math/base.ts
 function roundTo(value, digits) {
 	const factor = 10 ** digits;
@@ -30,6 +30,26 @@ function fromPercent(value) {
 function isAngleUnit(unit) {
 	return unit === "deg" || unit === "rad" || unit === "turn" || unit === "grad";
 }
+function isAngle(value) {
+	try {
+		return typeof angleValueFromString(value) === "number";
+	} catch (e) {
+		return false;
+	}
+}
+function angleValueFromString(value) {
+	const match = value.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/);
+	if (match === null) throw new Error(`Invalid angle value: "${value}"`);
+	if (!isAngleUnit(match[2])) throw new Error(`Unsupported angle unit: "${match[2]}"`);
+	if (!Number.isFinite(+match[1])) throw new SyntaxError(`Invalid angle value: "${match[1]}"`);
+	const angleValue = Number(match[1]);
+	switch (match[2]) {
+		case "deg": return degToRad(angleValue);
+		case "rad": return angleValue;
+		case "turn": return turnToRad(angleValue);
+		case "grad": return gradToRad(angleValue);
+	}
+}
 function degToRad(value) {
 	return value * Math.PI / 180;
 }
@@ -45,21 +65,9 @@ function gradToRad(value) {
 function normalizeAngleDeg(value, digits = 3) {
 	return roundTo((value % 360 + 360) % 360, digits);
 }
-function normalizeAngleRad(value) {
+function normalizeAngleRad(value, digits = 6) {
 	const tau = Math.PI * 2;
-	return (value % tau + tau) % tau;
-}
-function toAngleRad(value, unit) {
-	switch (unit) {
-		case "deg": return degToRad(value);
-		case "rad": return value;
-		case "turn": return turnToRad(value);
-		case "grad": return gradToRad(value);
-		default: throw new Error(`Unsupported angle unit: ${String(unit)}`);
-	}
-}
-function normalizeAngle(value, unit, digits = 6) {
-	return roundTo(normalizeAngleRad(toAngleRad(value, unit)), digits);
+	return roundTo((value % tau + tau) % tau, digits);
 }
 //#endregion
 //#region src/dsl/types.ts
@@ -700,6 +708,44 @@ function splitTopLevelByWhitespace(value) {
 	return result;
 }
 //#endregion
+//#region src/gradients/helpers.ts
+const GRADIENT_COLOR_SPACE = [
+	"oklab",
+	"lch",
+	"oklch",
+	"hsl",
+	"hwb",
+	"lab",
+	"srgb",
+	"srgb-linear",
+	"xyz",
+	"display-p3",
+	"a98-rgb",
+	"prophoto-rgb",
+	"rec2020"
+];
+const GRADIENT_HUE_INTERPOLATIONS = [
+	"shorter",
+	"longer",
+	"increasing",
+	"decreasing"
+];
+const GRADIENT_POLAR_COLOR_SPACES = [
+	"hsl",
+	"hwb",
+	"lch",
+	"oklch"
+];
+function isGradientHueInterpolation(value) {
+	return GRADIENT_HUE_INTERPOLATIONS.includes(value);
+}
+function isGradientColorSpace(value) {
+	return GRADIENT_COLOR_SPACE.includes(value);
+}
+function isGradientPolarColorSpace(value) {
+	return GRADIENT_POLAR_COLOR_SPACES.includes(value);
+}
+//#endregion
 //#region src/gradients/GradientBase.ts
 var GradientBase = class {
 	_isRepeating;
@@ -725,8 +771,8 @@ var GradientBase = class {
 		return {
 			type: this.type,
 			isRepeating: this.isRepeating,
-			config: this.config,
-			stops: this.stops
+			config: this._cloneConfig(this.config),
+			stops: this._cloneStops(this.stops)
 		};
 	}
 	addStop(stop) {
@@ -799,12 +845,10 @@ var GradientBase = class {
 		}
 	}
 	_cloneStops(stops) {
-		return stops.map((stop) => ({ ...stop }));
+		return structuredClone(stops);
 	}
 	_cloneConfig(value) {
-		if (typeof value !== "object" || value === null) return value;
-		if (Array.isArray(value)) return [...value];
-		return { ...value };
+		return structuredClone(value);
 	}
 	_buildSerializedStopTokens() {
 		const result = [];
@@ -962,66 +1006,72 @@ var GradientBase = class {
 var LinearGradient = class LinearGradient extends GradientBase {
 	type = "linear-gradient";
 	constructor(config) {
+		config.config.angle = normalizeAngleRad(config.config.angle);
+		if (config.config.interpolation) config.config.interpolation = LinearGradient._normalizeConfigInterpolation(config.config.interpolation);
 		super(config);
 	}
 	static normalizeConfig(value) {
-		if (typeof value === "string") {
-			const tokens = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
-			if (tokens.length === 0) throw new SyntaxError("Linear gradient angle keyword cannot be empty");
-			if (tokens[0] !== "to") throw new SyntaxError("Linear gradient keyword direction must start with \"to\"");
-			const directions = tokens.slice(1);
-			if (directions.length === 0 || directions.length > 2) throw new SyntaxError("Linear gradient keyword direction must contain one or two direction tokens");
-			const allowed = new Set([
-				"top",
-				"right",
-				"bottom",
-				"left"
-			]);
-			for (const direction of directions) if (!allowed.has(direction)) throw new SyntaxError(`Invalid linear gradient direction token: "${direction}"`);
-			if (new Set(directions).size !== directions.length) throw new SyntaxError("Linear gradient keyword direction cannot contain duplicate tokens");
-			const hasTop = directions.includes("top");
-			const hasRight = directions.includes("right");
-			const hasBottom = directions.includes("bottom");
-			const hasLeft = directions.includes("left");
-			if (hasTop && hasBottom || hasLeft && hasRight) throw new SyntaxError("Linear gradient keyword direction contains conflicting tokens");
-			if (hasTop && hasLeft) return { angle: degToRad(315) };
-			else if (hasTop && hasRight) return { angle: degToRad(45) };
-			else if (hasBottom && hasLeft) return { angle: degToRad(225) };
-			else if (hasBottom && hasRight) return { angle: degToRad(135) };
-			else if (hasTop) return { angle: degToRad(0) };
-			else if (hasRight) return { angle: degToRad(90) };
-			else if (hasBottom) return { angle: degToRad(180) };
-			else if (hasLeft) return { angle: degToRad(270) };
-			throw new SyntaxError(`Unsupported linear gradient keyword direction: "${value}"`);
+		const tokenizedValue = LinearGradient._tokenizeConfigInput(value);
+		const seen = /* @__PURE__ */ new Set();
+		for (const token of tokenizedValue) {
+			if (seen.has(token.type)) throw new SyntaxError(`Duplicate linear gradient config token: "${token.type}"`);
+			seen.add(token.type);
 		}
-		switch (value.unit) {
-			case "deg": return { angle: normalizeAngleRad(degToRad(value.value)) };
-			case "rad": return { angle: normalizeAngleRad(value.value) };
-			case "turn": return { angle: normalizeAngleRad(turnToRad(value.value)) };
-			case "grad": return { angle: normalizeAngleRad(gradToRad(value.value)) };
-			default: throw new SyntaxError(`Unsupported angle unit: "${value.unit}"`);
+		const angleToken = tokenizedValue.find((token) => token.type === "angle");
+		const colorSpaceToken = tokenizedValue.find((token) => token.type === "colorSpace");
+		const hueToken = tokenizedValue.find((token) => token.type === "hue");
+		const assembledConfig = {
+			angle: 3.141593,
+			interpolation: {
+				hue: "shorter",
+				colorSpace: "oklab"
+			}
+		};
+		if (angleToken) {
+			const value = angleToken.value;
+			if (value.startsWith("to ")) {
+				const tokens = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+				if (tokens.length === 0) throw new SyntaxError("Linear gradient angle keyword cannot be empty");
+				if (tokens[0] !== "to") throw new SyntaxError("Linear gradient keyword direction must start with \"to\"");
+				const directions = tokens.slice(1);
+				if (directions.length === 0 || directions.length > 2) throw new SyntaxError("Linear gradient keyword direction must contain one or two direction tokens");
+				const allowed = new Set([
+					"top",
+					"right",
+					"bottom",
+					"left"
+				]);
+				for (const direction of directions) if (!allowed.has(direction)) throw new SyntaxError(`Invalid linear gradient direction token: "${direction}"`);
+				if (new Set(directions).size !== directions.length) throw new SyntaxError("Linear gradient keyword direction cannot contain duplicate tokens");
+				const hasTop = directions.includes("top");
+				const hasRight = directions.includes("right");
+				const hasBottom = directions.includes("bottom");
+				const hasLeft = directions.includes("left");
+				if (hasTop && hasBottom || hasLeft && hasRight) throw new SyntaxError("Linear gradient keyword direction contains conflicting tokens");
+				if (hasTop && hasLeft) assembledConfig.angle = degToRad(315);
+				else if (hasTop && hasRight) assembledConfig.angle = degToRad(45);
+				else if (hasBottom && hasLeft) assembledConfig.angle = degToRad(225);
+				else if (hasBottom && hasRight) assembledConfig.angle = degToRad(135);
+				else if (hasTop) assembledConfig.angle = degToRad(0);
+				else if (hasRight) assembledConfig.angle = degToRad(90);
+				else if (hasBottom) assembledConfig.angle = degToRad(180);
+				else if (hasLeft) assembledConfig.angle = degToRad(270);
+				else throw new SyntaxError(`Unsupported linear gradient keyword direction: "${value}"`);
+			} else assembledConfig.angle = normalizeAngleRad(angleValueFromString(value));
 		}
+		if (colorSpaceToken) assembledConfig.interpolation.colorSpace = colorSpaceToken.value;
+		if (hueToken) assembledConfig.interpolation.hue = hueToken.value;
+		return assembledConfig;
 	}
 	static fromString(input) {
 		return LinearGradient.fromAbi(parseStringToAbi(input));
 	}
 	static fromAbi(abi) {
-		let config = { angle: 0 };
+		let config = { angle: 3.141592 };
 		if (abi.inputs[0].type === "config") {
 			const inputValue = abi.inputs[0].value.trim().toLowerCase();
 			if (inputValue.length === 0) throw new SyntaxError("Linear gradient config cannot be empty");
-			if (inputValue.startsWith("to ")) config = LinearGradient.normalizeConfig(inputValue);
-			else {
-				const match = inputValue.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/i);
-				if (match === null) throw new SyntaxError(`Invalid linear gradient angle: "${inputValue}"`);
-				const rawValue = Number(match[1]);
-				const unit = match[2].toLowerCase();
-				if (!Number.isFinite(rawValue)) throw new SyntaxError(`Invalid linear gradient angle value: "${inputValue}"`);
-				config = LinearGradient.normalizeConfig({
-					value: rawValue,
-					unit
-				});
-			}
+			config = LinearGradient.normalizeConfig(inputValue);
 		}
 		const inputsWithoutConfig = abi.inputs[0]?.type === "config" ? abi.inputs.slice(1) : abi.inputs;
 		const stops = LinearGradient._normalizeAbiInputsToStops(inputsWithoutConfig);
@@ -1035,9 +1085,96 @@ var LinearGradient = class LinearGradient extends GradientBase {
 		return new LinearGradient(this.toJSON());
 	}
 	toString() {
-		return `${this.isRepeating ? `repeating-${this.type}` : this.type}(${[this.config.angle === 0 ? "" : `${roundTo(radToDeg(this.config.angle), 3)}deg`, ...this._serializeStopsCompact()].filter(Boolean).join(", ")})`;
+		return `${this.isRepeating ? `repeating-${this.type}` : this.type}(${[this._parseConfigToString(this.config), ...this._serializeStopsCompact()].filter(Boolean).join(", ")})`;
 	}
 	_validateConfig(_) {}
+	static _normalizeConfigInterpolation(value) {
+		const { colorSpace, hue } = value;
+		if (hue === void 0) return { colorSpace };
+		if (!isGradientPolarColorSpace(colorSpace)) return { colorSpace };
+		return {
+			colorSpace,
+			hue
+		};
+	}
+	_parseConfigToString(config) {
+		const { angle, interpolation } = config;
+		const configParts = [];
+		const angleString = this._parseAngleToString(angle);
+		if (angleString.length > 0) configParts.push(angleString);
+		if (interpolation !== void 0) configParts.push(this._parseInterpolationToString(interpolation));
+		return configParts.join(" ");
+	}
+	_parseAngleToString(angle) {
+		const angleDeg = normalizeAngleDeg(radToDeg(angle), 3);
+		switch (angleDeg) {
+			case 0: return "to top";
+			case 45: return "to top right";
+			case 90: return "to right";
+			case 135: return "to bottom right";
+			case 180: return "";
+			case 225: return "to bottom left";
+			case 270: return "to left";
+			case 315: return "to top left";
+			default: return `${angleDeg}deg`;
+		}
+	}
+	_parseInterpolationToString(interpolation) {
+		const { colorSpace, hue } = interpolation;
+		if (hue === void 0) return `in ${colorSpace}`;
+		return `in ${colorSpace} ${hue} hue`;
+	}
+	static _tokenizeConfigInput(value) {
+		const inputValue = value.trim().toLowerCase();
+		if (inputValue.length === 0) throw new SyntaxError("Linear gradient config cannot be empty");
+		const parts = inputValue.split(/\s+/);
+		const tokens = [];
+		for (let index = 0; index < parts.length; index += 1) {
+			const part = parts[index];
+			if (part === "in") {
+				const colorSpace = parts[index + 1];
+				if (colorSpace === void 0 || !isGradientColorSpace(colorSpace)) throw new SyntaxError(`Expected color space after "in"`);
+				tokens.push({
+					type: "colorSpace",
+					value: colorSpace
+				});
+				index += 1;
+				continue;
+			}
+			if (isAngle(part)) {
+				tokens.push({
+					type: "angle",
+					value: part
+				});
+				continue;
+			}
+			if (part === "to") {
+				const directionParts = [];
+				const firstDirection = parts[index + 1];
+				const secondDirection = parts[index + 2];
+				if (firstDirection !== void 0) directionParts.push(firstDirection);
+				if (secondDirection === "left" || secondDirection === "right") directionParts.push(secondDirection);
+				const direction = `to ${directionParts.join(" ")}`;
+				tokens.push({
+					type: "angle",
+					value: direction
+				});
+				index += directionParts.length;
+				continue;
+			}
+			if (isGradientHueInterpolation(part)) {
+				if (parts[index + 1] !== "hue") throw new SyntaxError(`Expected "hue" after "${part}"`);
+				tokens.push({
+					type: "hue",
+					value: part
+				});
+				index += 1;
+				continue;
+			}
+			throw new SyntaxError(`Unknown linear gradient config token: "${part}"`);
+		}
+		return tokens;
+	}
 };
 //#endregion
 //#region src/gradients/RadialGradient.ts
@@ -1332,14 +1469,163 @@ var ModuleTransformerConicGradientToCss = class {
 	}
 };
 //#endregion
+//#region src/gradient-transformer/modules/helpers/expand-repeating-stops.ts
+function positiveModulo(value, modulo) {
+	return (value % modulo + modulo) % modulo;
+}
+function sampleColorAtPosition(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 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 sampleRepeatingColorAtPosition(stops, position, firstPosition, period) {
+	return sampleColorAtPosition(stops, firstPosition + positiveModulo(position - firstPosition, period));
+}
+function expandRepeatingStops(stops) {
+	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;
+	const period = colorStops[colorStops.length - 1].position - firstPosition;
+	if (period <= 0) return colorStops;
+	const result = [];
+	let order = 0;
+	result.push({
+		type: "color-stop",
+		value: sampleRepeatingColorAtPosition(colorStops, 0, firstPosition, period),
+		position: 0,
+		_order: order
+	});
+	order += 1;
+	const startRepeat = Math.floor((0 - firstPosition) / period) - 1;
+	const endRepeat = Math.ceil((1 - 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;
+			result.push({
+				...stop,
+				position,
+				_order: order
+			});
+			order += 1;
+		}
+	}
+	result.push({
+		type: "color-stop",
+		value: sampleRepeatingColorAtPosition(colorStops, 1, firstPosition, period),
+		position: 1,
+		_order: order
+	});
+	return result.sort((a, b) => {
+		if (a.position === b.position) return a._order - b._order;
+		return a.position - b.position;
+	}).map(({ _order, ...stop }) => stop);
+}
+//#endregion
+//#region src/gradient-transformer/modules/helpers/resolve-renderable-linear-gradient-stops.ts
+function getHueFixup(hue) {
+	switch (hue) {
+		case "longer": return fixupHueLonger;
+		case "increasing": return fixupHueIncreasing;
+		case "decreasing": return fixupHueDecreasing;
+		default: return fixupHueShorter;
+	}
+}
+function colorSpaceToCuloriMode(colorSpace) {
+	switch (colorSpace) {
+		case "a98-rgb": return "a98";
+		case "display-p3": return "p3";
+		case "prophoto-rgb": return "prophoto";
+		case "xyz": return "xyz65";
+		case "srgb":
+		case "srgb-linear": return "rgb";
+		default: return colorSpace;
+	}
+}
+function createCuloriInterpolationOverrides(interpolation) {
+	if (interpolation.hue === void 0) return;
+	return { h: { fixup: getHueFixup(interpolation.hue) } };
+}
+function getColorStopsWithPositions(stops) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop");
+	if (colorStops.length === 0) return [];
+	if (colorStops.length === 1) return [{
+		...colorStops[0],
+		position: colorStops[0].position ?? 0
+	}];
+	return colorStops.map((stop, index) => {
+		if (stop.position != null) return stop;
+		if (index === 0) return {
+			...stop,
+			position: 0
+		};
+		if (index === colorStops.length - 1) return {
+			...stop,
+			position: 1
+		};
+		return {
+			...stop,
+			position: index / (colorStops.length - 1)
+		};
+	});
+}
+function formatColorForCanvas(input) {
+	const color = toRgb$4(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 colorStops = getColorStopsWithPositions(gradient.stops);
+	const interpolation = gradient.config.interpolation;
+	if (colorStops.length < 2) return colorStops;
+	if (interpolation === void 0) return gradient.isRepeating ? expandRepeatingStops(colorStops) : colorStops;
+	const sampledStops = [];
+	const mode = colorSpaceToCuloriMode(interpolation.colorSpace);
+	const overrides = createCuloriInterpolationOverrides(interpolation);
+	for (let index = 0; index < colorStops.length - 1; index += 1) {
+		const current = colorStops[index];
+		const next = colorStops[index + 1];
+		const startPosition = current.position;
+		const endPosition = next.position;
+		const colorInterpolator = interpolate([current.value, next.value], mode, overrides);
+		for (let sampleIndex = 0; sampleIndex <= sampleCount; sampleIndex += 1) {
+			if (index > 0 && sampleIndex === 0) continue;
+			const localT = sampleIndex / sampleCount;
+			const position = startPosition + (endPosition - startPosition) * localT;
+			const color = colorInterpolator(localT);
+			sampledStops.push({
+				type: "color-stop",
+				value: formatColorForCanvas(color),
+				position
+			});
+		}
+	}
+	return gradient.isRepeating ? expandRepeatingStops(sampledStops) : sampledStops;
+}
+//#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerLinearGradientToCanvas.ts
-const toRgb$2 = converter("rgb");
+const toRgb$3 = converter("rgb");
 function toCanvasColor$1(input) {
-	const color = toRgb$2(input);
+	const color = toRgb$3(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return formatRgb(color);
 }
-function getStopRange$1(stops) {
+function getStopRange$2(stops) {
 	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null);
 	if (!colorStops.length) return {
 		min: 0,
@@ -1352,7 +1638,7 @@ 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.filter((stop) => stop.type === "color-stop" && stop.position != null).map((stop) => ({
 		...stop,
@@ -1360,38 +1646,37 @@ function normalizeStops$1(stops, min, max) {
 	}));
 }
 var ModuleTransformerLinearGradientToCanvas = class {
-	target = "canvas";
+	target = "canvas-2d";
 	gradientType = "linear-gradient";
 	to(input) {
 		const gradient = input;
 		return { draw: (ctx, width, height) => {
 			const angle = gradient.config.angle;
-			const cx = width / 2;
-			const cy = height / 2;
-			const half = Math.max(width, height) / 2;
-			const dx = Math.sin(angle) * half;
-			const dy = Math.cos(angle) * half;
-			const x0 = cx - dx;
-			const y0 = cy - dy;
-			const x1 = cx + dx;
-			const y1 = cy + dy;
-			const { min, max, stops } = getStopRange$1(gradient.stops);
-			let startX = x0;
-			let startY = y0;
-			let endX = x1;
-			let endY = y1;
+			const dirX = Math.sin(angle);
+			const dirY = -Math.cos(angle);
+			const centerX = width / 2;
+			const centerY = height / 2;
+			const lineLength = Math.abs(width * dirX) + Math.abs(height * dirY);
+			let startX = centerX - dirX * lineLength / 2;
+			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));
 			let normalizedStops = stops;
 			if (min < 0 || max > 1) {
-				const vx = x1 - x0;
-				const vy = y1 - y0;
-				startX = x0 + vx * min;
-				startY = y0 + vy * min;
-				endX = x0 + vx * max;
-				endY = y0 + vy * max;
-				normalizedStops = normalizeStops$1(stops, min, max);
+				const vx = endX - startX;
+				const vy = endY - startY;
+				const baseStartX = startX;
+				const baseStartY = startY;
+				startX = baseStartX + vx * min;
+				startY = baseStartY + vy * min;
+				endX = baseStartX + vx * max;
+				endY = baseStartY + vy * max;
+				normalizedStops = normalizeStops$2(stops, min, max);
 			}
 			const canvasGradient = ctx.createLinearGradient(startX, startY, endX, endY);
 			for (const stop of normalizedStops) canvasGradient.addColorStop(stop.position, toCanvasColor$1(stop.value));
+			ctx.clearRect(0, 0, width, height);
 			ctx.fillStyle = canvasGradient;
 			ctx.fillRect(0, 0, width, height);
 		} };
@@ -1399,13 +1684,13 @@ var ModuleTransformerLinearGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerRadialGradientToCanvas.ts
-const toRgb$1 = converter("rgb");
+const toRgb$2 = converter("rgb");
 function toCanvasColor(input) {
-	const color = toRgb$1(input);
+	const color = toRgb$2(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return formatRgb(color);
 }
-function getStopRange(stops) {
+function getStopRange$1(stops) {
 	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null);
 	if (!colorStops.length) return {
 		min: 0,
@@ -1418,7 +1703,7 @@ function getStopRange(stops) {
 		stops: colorStops
 	};
 }
-function normalizeStops(stops, min, max) {
+function normalizeStops$1(stops, min, max) {
 	const range = max - min || 1;
 	return stops.map((stop) => ({
 		...stop,
@@ -1426,7 +1711,7 @@ function normalizeStops(stops, min, max) {
 	}));
 }
 var ModuleTransformerRadialGradientToCanvas = class {
-	target = "canvas";
+	target = "canvas-2d";
 	gradientType = "radial-gradient";
 	to(input) {
 		const gradient = input;
@@ -1441,17 +1726,17 @@ var ModuleTransformerRadialGradientToCanvas = class {
 			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(gradient.stops);
+			const { min, max, stops } = getStopRange$1(gradient.stops);
 			let innerRadius = 0;
 			let outerRadius = radius;
 			let normalizedStops = stops;
 			if (min >= 0 && (min < 0 || max > 1)) {
 				innerRadius = radius * min;
 				outerRadius = radius * max;
-				normalizedStops = normalizeStops(stops, min, max);
+				normalizedStops = normalizeStops$1(stops, min, max);
 			} else if (max > 1) {
 				outerRadius = radius * max;
-				normalizedStops = normalizeStops(stops, min, max);
+				normalizedStops = normalizeStops$1(stops, min, max);
 			}
 			const g = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
 			for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor(stop.value));
@@ -1467,9 +1752,9 @@ var ModuleTransformerRadialGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerConicGradientToCanvas.ts
-const toRgb = converter("rgb");
+const toRgb$1 = converter("rgb");
 var ModuleTransformerConicGradientToCanvas = class {
-	target = "canvas";
+	target = "canvas-2d";
 	gradientType = "conic-gradient";
 	to(input) {
 		const gradient = input;
@@ -1566,7 +1851,7 @@ var ModuleTransformerConicGradientToCanvas = class {
 		};
 	}
 	_parseColor(input) {
-		const color = toRgb(input);
+		const color = toRgb$1(input);
 		if (!color) throw new Error(`Failed to convert color: ${input}`);
 		return {
 			r: Math.round((color.r ?? 0) * 255),
@@ -1580,6 +1865,243 @@ 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);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return [
+		color.r ?? 0,
+		color.g ?? 0,
+		color.b ?? 0,
+		color.alpha ?? 1
+	];
+}
+function getStopRange(stops) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null);
+	if (!colorStops.length) return {
+		min: 0,
+		max: 1,
+		stops: []
+	};
+	return {
+		min: Math.min(...colorStops.map((stop) => stop.position)),
+		max: Math.max(...colorStops.map((stop) => stop.position)),
+		stops: colorStops
+	};
+}
+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 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;
+}
+var ModuleTransformerLinearGradientToCanvasWebGL = class {
+	target = "canvas-webgl";
+	gradientType = "linear-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_start;
+                    uniform vec2 u_end;
+                    uniform int u_stopCount;
+                    uniform float u_positions[${MAX_STOPS}];
+                    uniform vec4 u_colors[${MAX_STOPS}];
+
+                    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 axis = u_end - u_start;
+                        vec2 point = v_uv;
+
+                        float axisLengthSquared = dot(axis, axis);
+                        float t = dot(point - u_start, axis) / axisLengthSquared;
+
+                        t = clamp(t, 0.0, 1.0);
+
+                        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 angle = gradient.config.angle;
+			const dirX = Math.sin(angle);
+			const dirY = -Math.cos(angle);
+			const centerX = width / 2;
+			const centerY = height / 2;
+			const lineLength = Math.abs(width * dirX) + Math.abs(height * dirY);
+			let startX = centerX - dirX * lineLength / 2;
+			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)));
+			let normalizedStops = stops;
+			if (min < 0 || max > 1) {
+				const vx = endX - startX;
+				const vy = endY - startY;
+				const baseStartX = startX;
+				const baseStartY = startY;
+				startX = baseStartX + vx * min;
+				startY = baseStartY + vy * min;
+				endX = baseStartX + vx * max;
+				endY = baseStartY + vy * max;
+				normalizedStops = normalizeStops(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);
+			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_start"), startU, startV);
+			gl.uniform2f(gl.getUniformLocation(program, "u_end"), endU, endV);
+			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();
@@ -1616,6 +2138,7 @@ var GradientTransformer = class {
 		this.add(new ModuleTransformerLinearGradientToCanvas());
 		this.add(new ModuleTransformerRadialGradientToCanvas());
 		this.add(new ModuleTransformerConicGradientToCanvas());
+		this.add(new ModuleTransformerLinearGradientToCanvasWebGL());
 	}
 	static _getKey(target, gradientType) {
 		return `${target}:${gradientType}`;
@@ -1677,4 +2200,4 @@ function transformFrom(target, gradientType, input) {
 	return GradientTransformer.from(target, gradientType, input);
 }
 //#endregion
-export { ConicGradient, GradientBase, GradientFactory, GradientTransformer, LinearGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCss, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCss, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCss, PatternTokenKind, RadialGradient, ceilTo, clamp, degToRad, floorTo, format, fromPercent, gradToRad, isAngleUnit, isColorHint, isColorStop, isConfig, isGradient, isPatternSyntaxValid, isPatternValid, isValid, matchExpression, normalizeAngle, normalizeAngleDeg, normalizeAngleRad, parse, parseStringToAbi, radToDeg, roundTo, splitTopLevelByWhitespace, toAngleRad, 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, 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 };