gradiente 2.2.0 → 2.4.0

package/dist/index.js

@@ -1430,6 +1430,31 @@ var RadialGradient = class RadialGradient extends GradientBase {
 	}
 };
 //#endregion
+//#region src/gradients/DiamondGradient.ts
+var DiamondGradient = class DiamondGradient extends RadialGradient {
+	type = "diamond-gradient";
+	constructor(input) {
+		super(input);
+	}
+	static fromString(input) {
+		return DiamondGradient.fromAbi(parseStringToAbi(input));
+	}
+	static fromAbi(abi) {
+		if (abi.functionName !== "diamond-gradient") throw new Error("Invalid function name for DiamondGradient");
+		const config = this._parseConfig(abi.inputs);
+		const inputsWithoutConfig = abi.inputs[0]?.type === "config" ? abi.inputs.slice(1) : abi.inputs;
+		const stops = this._normalizeAbiInputsToStops(inputsWithoutConfig);
+		return new DiamondGradient({
+			isRepeating: abi.isRepeating,
+			config,
+			stops
+		});
+	}
+	clone() {
+		return new DiamondGradient(this.toJSON());
+	}
+};
+//#endregion
 //#region src/gradients/ConicGradient.ts
 var ConicGradient = class ConicGradient extends GradientBase {
 	type = "conic-gradient";
@@ -1460,18 +1485,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) {
@@ -1484,6 +1503,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: {
@@ -1499,46 +1529,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;
@@ -1567,6 +1637,421 @@ var ConicGradient = class ConicGradient extends GradientBase {
 	}
 };
 //#endregion
+//#region src/gradients/MeshGradient.ts
+const MESH_ID_PATTERN = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+const MESH_LENGTH_UNITS = [
+	"px",
+	"em",
+	"rem",
+	"vw",
+	"vh",
+	"vmin",
+	"vmax",
+	"cm",
+	"mm",
+	"in",
+	"pt",
+	"pc"
+];
+var MeshGradient = class MeshGradient {
+	type = "mesh-gradient";
+	_config;
+	_vertices;
+	_patches;
+	constructor(input) {
+		const config = structuredClone(input.config);
+		if (config.interpolation) config.interpolation = MeshGradient._normalizeInterpolation(config.interpolation);
+		this._config = config;
+		this._vertices = structuredClone(input.vertices);
+		this._patches = structuredClone(input.patches);
+		this._validate();
+	}
+	get config() {
+		return structuredClone(this._config);
+	}
+	get vertices() {
+		return structuredClone(this._vertices);
+	}
+	get patches() {
+		return structuredClone(this._patches);
+	}
+	static fromString(input) {
+		const { functionName, isRepeating, inputs } = MeshGradient._parseFunction(input);
+		if (functionName !== "mesh-gradient") throw new Error("Invalid function name for MeshGradient");
+		if (isRepeating) throw new Error("MeshGradient does not support repeating gradients");
+		let config = null;
+		const vertices = [];
+		const patches = [];
+		const handles = [];
+		for (const rawInput of inputs) {
+			const tokens = splitTopLevelByWhitespace(rawInput);
+			const kind = tokens[0];
+			if (kind === "grid") {
+				if (config !== null) throw new Error("mesh-gradient can only contain one grid config");
+				config = this._parseConfig(tokens);
+				continue;
+			}
+			if (kind === "vertex") {
+				vertices.push(this._parseVertex(tokens));
+				continue;
+			}
+			if (kind === "patch") {
+				patches.push(this._parsePatch(tokens));
+				continue;
+			}
+			if (kind === "handle") {
+				handles.push(this._parseHandle(tokens));
+				continue;
+			}
+			throw new Error(`Unsupported mesh-gradient input: ${rawInput}`);
+		}
+		if (!config) throw new Error("mesh-gradient requires a grid config");
+		const patchesWithHandles = this._attachHandles(patches, handles);
+		return new MeshGradient({
+			config,
+			vertices,
+			patches: patchesWithHandles
+		});
+	}
+	static fromAbi(abi) {
+		if (abi.functionName !== "mesh-gradient") throw new Error("Invalid function name for MeshGradient");
+		if (abi.isRepeating) throw new Error("MeshGradient does not support repeating gradients");
+		return MeshGradient.fromString(`${abi.functionName}(${abi.inputs.map((input) => input.value).join(", ")})`);
+	}
+	clone() {
+		return new MeshGradient(this.toJSON());
+	}
+	toJSON() {
+		return {
+			type: this.type,
+			config: this.config,
+			vertices: this.vertices,
+			patches: this.patches
+		};
+	}
+	toString() {
+		const parts = [
+			this._serializeConfig(),
+			...this._vertices.map((vertex) => this._serializeVertex(vertex)),
+			...this._patches.map((patch) => this._serializePatch(patch)),
+			...this._patches.flatMap((patch) => this._serializeHandles(patch))
+		];
+		return `${this.type}(${parts.join(", ")})`;
+	}
+	getVertex(id) {
+		const vertex = this._vertices.find((item) => item.id === id);
+		return vertex ? structuredClone(vertex) : null;
+	}
+	_serializeConfig() {
+		const parts = [
+			"grid",
+			String(this._config.rows),
+			String(this._config.columns),
+			"method",
+			this._config.method
+		];
+		if (this._config.interpolation) {
+			parts.push("in", this._config.interpolation.colorSpace);
+			if (this._config.interpolation.hue) parts.push(this._config.interpolation.hue, "hue");
+		}
+		return parts.join(" ");
+	}
+	_serializeVertex(vertex) {
+		return [
+			"vertex",
+			vertex.id,
+			this._formatLengthPercentage(vertex.x),
+			this._formatLengthPercentage(vertex.y),
+			vertex.color
+		].join(" ");
+	}
+	_serializePatch(patch) {
+		return [
+			"patch",
+			patch.id,
+			patch.topLeft,
+			patch.topRight,
+			patch.bottomRight,
+			patch.bottomLeft
+		].join(" ");
+	}
+	_serializeHandles(patch) {
+		if (!patch.handles) return [];
+		const result = [];
+		for (const side of [
+			"top",
+			"right",
+			"bottom",
+			"left"
+		]) {
+			const handle = patch.handles[side];
+			if (!handle) continue;
+			result.push([
+				"handle",
+				patch.id,
+				side,
+				this._formatLengthPercentage(handle.from.x),
+				this._formatLengthPercentage(handle.from.y),
+				this._formatLengthPercentage(handle.to.x),
+				this._formatLengthPercentage(handle.to.y)
+			].join(" "));
+		}
+		return result;
+	}
+	_formatLengthPercentage(value) {
+		if (value.kind === "percent") return `${value.value}%`;
+		return `${value.value}${value.unit}`;
+	}
+	_validate() {
+		if (!Number.isInteger(this._config.rows) || this._config.rows < 2) throw new Error("Mesh gradient rows must be an integer >= 2");
+		if (!Number.isInteger(this._config.columns) || this._config.columns < 2) throw new Error("Mesh gradient columns must be an integer >= 2");
+		if (this._config.method !== "bilinear" && this._config.method !== "bicubic") throw new Error("Invalid mesh gradient interpolation method");
+		if (this._config.interpolation && !isGradientColorSpace(this._config.interpolation.colorSpace)) throw new Error(`Invalid mesh gradient color space: ${this._config.interpolation.colorSpace}`);
+		const expectedVertexCount = this._config.rows * this._config.columns;
+		const expectedPatchCount = (this._config.rows - 1) * (this._config.columns - 1);
+		if (this._vertices.length !== expectedVertexCount) throw new Error(`Mesh gradient expected ${expectedVertexCount} vertices for ${this._config.rows}x${this._config.columns} grid, received ${this._vertices.length}`);
+		if (this._patches.length !== expectedPatchCount) throw new Error(`Mesh gradient expected ${expectedPatchCount} patches for ${this._config.rows}x${this._config.columns} grid, received ${this._patches.length}`);
+		const vertexIds = /* @__PURE__ */ new Set();
+		for (const vertex of this._vertices) {
+			this._validateId(vertex.id, "vertex");
+			if (vertexIds.has(vertex.id)) throw new Error(`Duplicate mesh vertex id: ${vertex.id}`);
+			vertexIds.add(vertex.id);
+			this._validateLengthPercentage(vertex.x, `vertex ${vertex.id} x`);
+			this._validateLengthPercentage(vertex.y, `vertex ${vertex.id} y`);
+			if (!parse$1(vertex.color)) throw new Error(`Invalid mesh vertex color: ${vertex.color}`);
+		}
+		const patchIds = /* @__PURE__ */ new Set();
+		for (const patch of this._patches) {
+			this._validateId(patch.id, "patch");
+			if (patchIds.has(patch.id)) throw new Error(`Duplicate mesh patch id: ${patch.id}`);
+			patchIds.add(patch.id);
+			const ids = [
+				patch.topLeft,
+				patch.topRight,
+				patch.bottomRight,
+				patch.bottomLeft
+			];
+			if (new Set(ids).size !== 4) throw new Error(`Mesh patch must use 4 unique vertices: ${patch.id}`);
+			for (const id of ids) if (!vertexIds.has(id)) throw new Error(`Mesh patch references missing vertex: ${id}`);
+			if (patch.handles) this._validateHandles(patch);
+		}
+		if (this._patches.length === 0) throw new Error("Mesh gradient requires at least one patch");
+	}
+	_validateId(id, label) {
+		if (!MESH_ID_PATTERN.test(id)) throw new Error(`Invalid mesh ${label} id: ${id}`);
+	}
+	_validateHandles(patch) {
+		if (!patch.handles) return;
+		for (const side of [
+			"top",
+			"right",
+			"bottom",
+			"left"
+		]) {
+			const handle = patch.handles[side];
+			if (!handle) continue;
+			this._validateLengthPercentage(handle.from.x, `patch ${patch.id} ${side} handle from x`);
+			this._validateLengthPercentage(handle.from.y, `patch ${patch.id} ${side} handle from y`);
+			this._validateLengthPercentage(handle.to.x, `patch ${patch.id} ${side} handle to x`);
+			this._validateLengthPercentage(handle.to.y, `patch ${patch.id} ${side} handle to y`);
+		}
+	}
+	_validateLengthPercentage(value, label) {
+		if (value.kind === "percent") {
+			if (!Number.isFinite(value.value)) throw new Error(`Invalid mesh ${label}`);
+			return;
+		}
+		if (!Number.isFinite(value.value)) throw new Error(`Invalid mesh ${label}`);
+	}
+	static _parseConfig(tokens) {
+		if (tokens.length < 3) throw new Error("Invalid mesh grid config");
+		const rows = Number(tokens[1]);
+		const columns = Number(tokens[2]);
+		let method = "bilinear";
+		let interpolation;
+		for (let index = 3; index < tokens.length; index += 1) {
+			const token = tokens[index];
+			if (token === "method") {
+				const value = tokens[index + 1];
+				if (value !== "bilinear" && value !== "bicubic") throw new Error(`Invalid mesh gradient method: ${value}`);
+				method = value;
+				index += 1;
+				continue;
+			}
+			if (token === "in") {
+				const colorSpace = tokens[index + 1];
+				const maybeHue = tokens[index + 2];
+				const maybeHueKeyword = tokens[index + 3];
+				if (!isGradientColorSpace(colorSpace)) throw new Error(`Invalid mesh gradient color space: ${colorSpace}`);
+				if (maybeHue !== void 0 && maybeHueKeyword === "hue" && isGradientHueInterpolation(maybeHue)) {
+					interpolation = this._normalizeInterpolation({
+						colorSpace,
+						hue: maybeHue
+					});
+					index += 3;
+					continue;
+				}
+				interpolation = { colorSpace };
+				index += 1;
+				continue;
+			}
+			throw new Error(`Unsupported mesh grid config token: ${token}`);
+		}
+		return {
+			rows,
+			columns,
+			method,
+			interpolation
+		};
+	}
+	static _parseVertex(tokens) {
+		if (tokens.length < 5) throw new Error("Invalid mesh vertex input");
+		return {
+			id: tokens[1],
+			x: this._parseLengthPercentage(tokens[2]),
+			y: this._parseLengthPercentage(tokens[3]),
+			color: tokens.slice(4).join(" ")
+		};
+	}
+	static _parsePatch(tokens) {
+		if (tokens.length !== 6) throw new Error("Invalid mesh patch input");
+		return {
+			id: tokens[1],
+			topLeft: tokens[2],
+			topRight: tokens[3],
+			bottomRight: tokens[4],
+			bottomLeft: tokens[5]
+		};
+	}
+	static _parseHandle(tokens) {
+		if (tokens.length !== 7) throw new Error("Invalid mesh handle input");
+		const side = tokens[2];
+		if (side !== "top" && side !== "right" && side !== "bottom" && side !== "left") throw new Error(`Invalid mesh handle side: ${side}`);
+		return {
+			patchId: tokens[1],
+			side,
+			from: {
+				x: this._parseLengthPercentage(tokens[3]),
+				y: this._parseLengthPercentage(tokens[4])
+			},
+			to: {
+				x: this._parseLengthPercentage(tokens[5]),
+				y: this._parseLengthPercentage(tokens[6])
+			}
+		};
+	}
+	static _attachHandles(patches, handles) {
+		if (handles.length === 0) return patches;
+		const patchMap = new Map(patches.map((patch) => [patch.id, patch]));
+		const nextPatches = patches.map((patch) => structuredClone(patch));
+		const nextPatchMap = new Map(nextPatches.map((patch) => [patch.id, patch]));
+		for (const handle of handles) {
+			if (!patchMap.has(handle.patchId)) throw new Error(`Mesh handle references missing patch: ${handle.patchId}`);
+			const patch = nextPatchMap.get(handle.patchId);
+			patch.handles ??= {};
+			if (patch.handles[handle.side]) throw new Error(`Duplicate mesh handle for patch ${handle.patchId} side ${handle.side}`);
+			patch.handles[handle.side] = {
+				from: handle.from,
+				to: handle.to
+			};
+		}
+		return nextPatches;
+	}
+	static _parseLengthPercentage(input) {
+		if (input.endsWith("%")) {
+			const value = parseFloat(input);
+			if (!Number.isFinite(value)) throw new Error(`Invalid mesh length-percentage: ${input}`);
+			return {
+				kind: "percent",
+				value
+			};
+		}
+		const match = input.match(/^(-?\d*\.?\d+)([a-zA-Z]+)$/);
+		if (!match) throw new Error(`Invalid mesh length-percentage: ${input}`);
+		const unit = match[2];
+		if (!MESH_LENGTH_UNITS.includes(unit)) throw new Error(`Unsupported mesh length unit: ${match[2]}`);
+		return {
+			kind: "length",
+			value: parseFloat(match[1]),
+			unit
+		};
+	}
+	static _normalizeInterpolation(value) {
+		const { colorSpace, hue } = value;
+		if (hue === void 0 || !isGradientPolarColorSpace(colorSpace)) return { colorSpace };
+		return {
+			colorSpace,
+			hue
+		};
+	}
+	static _parseFunction(input) {
+		const source = input.trim();
+		const openIndex = source.indexOf("(");
+		if (openIndex <= 0) throw new Error("Expected mesh-gradient function call");
+		let functionName = source.slice(0, openIndex).trim();
+		const isRepeating = functionName.startsWith("repeating-");
+		if (isRepeating) functionName = functionName.slice(10);
+		const closeIndex = this._findOuterClosingParenIndex(source, openIndex);
+		if (closeIndex === -1) throw new Error("Unclosed mesh-gradient function parenthesis");
+		const trailing = source.slice(closeIndex + 1).trim();
+		if (trailing.length > 0 && !trailing.startsWith(`${functionName}(`) && !trailing.startsWith(`repeating-${functionName}(`)) throw new Error(`Unexpected mesh-gradient trailing input: ${trailing}`);
+		const body = source.slice(openIndex + 1, closeIndex);
+		return {
+			functionName,
+			isRepeating,
+			inputs: this._splitTopLevelInputs(body)
+		};
+	}
+	static _findOuterClosingParenIndex(value, openIndex) {
+		let depth = 0;
+		for (let index = openIndex; index < value.length; index += 1) {
+			const char = value[index];
+			if (char === "(") {
+				depth += 1;
+				continue;
+			}
+			if (char === ")") {
+				depth -= 1;
+				if (depth === 0) return index;
+				if (depth < 0) return -1;
+			}
+		}
+		return -1;
+	}
+	static _splitTopLevelInputs(value) {
+		const result = [];
+		let current = "";
+		let parenDepth = 0;
+		for (let index = 0; index < value.length; index += 1) {
+			const char = value[index];
+			if (char === "(") {
+				parenDepth += 1;
+				current += char;
+				continue;
+			}
+			if (char === ")") {
+				parenDepth -= 1;
+				if (parenDepth < 0) throw new Error("Unbalanced mesh-gradient input parentheses");
+				current += char;
+				continue;
+			}
+			if (char === "," && parenDepth === 0) {
+				this._pushTrimmed(result, current);
+				current = "";
+				continue;
+			}
+			current += char;
+		}
+		this._pushTrimmed(result, current);
+		if (parenDepth !== 0) throw new Error("Unbalanced mesh-gradient input parentheses");
+		return result;
+	}
+	static _pushTrimmed(target, value) {
+		const trimmed = value.trim();
+		if (trimmed.length > 0) target.push(trimmed);
+	}
+};
+//#endregion
 //#region src/gradient-transformer/modules/css/ModuleTransformerLinearGradientToCss.ts
 var ModuleTransformerLinearGradientToCss = class {
 	target = "css";
@@ -1587,21 +2072,11 @@ var ModuleTransformerRadialGradientToCss = class {
 	}
 };
 //#endregion
-//#region src/gradient-transformer/modules/css/ModuleTransformerConicGradientToCss.ts
-var ModuleTransformerConicGradientToCss = class {
-	target = "css";
-	gradientType = "conic-gradient";
-	to(input) {
-		if (!(input instanceof ConicGradient)) throw new Error("Expected ConicGradient");
-		return input.toString();
-	}
-};
-//#endregion
 //#region src/gradient-transformer/modules/helpers/expand-repeating-stops.ts
 function positiveModulo(value, modulo) {
 	return (value % modulo + modulo) % modulo;
 }
-function sampleColorAtPosition(stops, position) {
+function sampleColorAtPosition$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 stops.");
 	if (position <= colorStops[0].position) return colorStops[0].value;
@@ -1619,7 +2094,7 @@ function sampleColorAtPosition(stops, position) {
 	return lastStop.value;
 }
 function sampleRepeatingColorAtPosition(stops, position, firstPosition, period) {
-	return sampleColorAtPosition(stops, firstPosition + positiveModulo(position - firstPosition, period));
+	return sampleColorAtPosition$2(stops, firstPosition + positiveModulo(position - firstPosition, period));
 }
 function expandRepeatingStopsTo(stops, from, to) {
 	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
@@ -1738,12 +2213,12 @@ function getColorStopsWithPositions(stops) {
 	});
 }
 function formatColorForCanvas(input) {
-	const color = toRgb$5(input);
+	const color = toRgb$9(input);
 	if (!color) throw new Error("Failed to convert interpolated color to rgb.");
 	return formatRgb(color);
 }
 const DEFAULT_SAMPLE_COUNT = 64;
-const toRgb$5 = converter("rgb");
+const toRgb$9 = converter("rgb");
 function resolveRenderableGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_COUNT) {
 	const colorStops = getColorStopsWithPositions(gradient.stops);
 	const interpolation = gradient.config.interpolation;
@@ -1773,77 +2248,677 @@ function resolveRenderableGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_C
 	return gradient.isRepeating ? expandRepeatingStops(sampledStops) : sampledStops;
 }
 //#endregion
-//#region src/gradient-transformer/modules/canvas/ModuleTransformerLinearGradientToCanvas.ts
-const toRgb$4 = converter("rgb");
-function toCanvasColor$1(input) {
-	const color = toRgb$4(input);
+//#region src/gradient-transformer/modules/helpers/mesh-rendering.ts
+const toRgb$8 = converter("rgb");
+function toColor(input) {
+	const color = toRgb$8(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
-	return formatRgb(color);
+	return [
+		color.r ?? 0,
+		color.g ?? 0,
+		color.b ?? 0,
+		color.alpha ?? 1
+	];
 }
-function getStopRange$2(stops) {
-	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null);
-	if (!colorStops.length) return {
-		min: 0,
-		max: 1,
-		stops: []
-	};
+function resolveLengthPercentage$2(value, reference) {
+	if (value.kind === "percent") return value.value / 100 * reference;
+	if (value.unit === "px") return value.value;
+	throw new Error(`Unsupported mesh-gradient length unit: ${value.unit}`);
+}
+function resolveMeshVertex(vertex, width, height) {
 	return {
-		min: Math.min(...colorStops.map((stop) => stop.position)),
-		max: Math.max(...colorStops.map((stop) => stop.position)),
-		stops: colorStops
+		id: vertex.id,
+		x: resolveLengthPercentage$2(vertex.x, width),
+		y: resolveLengthPercentage$2(vertex.y, height),
+		color: toColor(vertex.color)
 	};
 }
-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,
-		position: (stop.position - min) / range
-	}));
+function buildMeshVertexMap(gradient, width, height) {
+	return new Map(gradient.vertices.map((vertex) => [vertex.id, resolveMeshVertex(vertex, width, height)]));
 }
-var ModuleTransformerLinearGradientToCanvas = class {
-	target = "canvas-2d";
-	gradientType = "linear-gradient";
-	to(input) {
-		const gradient = input;
-		return { draw: (ctx, width, height) => {
-			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$2(resolveRenderableGradientStops(gradient));
-			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$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));
-			ctx.clearRect(0, 0, width, height);
-			ctx.fillStyle = canvasGradient;
-			ctx.fillRect(0, 0, width, height);
-		} };
+function buildRegularMeshGrid(gradient, vertexMap) {
+	const idGrid = buildRegularMeshGridFromVertexIds(gradient, vertexMap);
+	if (idGrid) return idGrid;
+	const vertices = gradient.vertices.map((vertex) => {
+		const resolved = vertexMap.get(vertex.id);
+		if (!resolved) throw new Error(`Missing mesh vertex: ${vertex.id}`);
+		return resolved;
+	}).sort((a, b) => {
+		if (Math.abs(a.y - b.y) > 1e-4) return a.y - b.y;
+		return a.x - b.x;
+	});
+	const result = [];
+	for (let row = 0; row < gradient.config.rows; row += 1) {
+		const start = row * gradient.config.columns;
+		const end = start + gradient.config.columns;
+		result.push(vertices.slice(start, end));
 	}
-};
-//#endregion
-//#region src/gradient-transformer/modules/canvas/ModuleTransformerRadialGradientToCanvas.ts
-const toRgb$3 = converter("rgb");
-const RADIAL_GRADIENT_SAMPLE_COUNT = 128;
-function toCanvasColor(input) {
-	const color = toRgb$3(input);
-	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return result;
+}
+function buildRegularMeshGridFromVertexIds(gradient, vertexMap) {
+	const result = Array.from({ length: gradient.config.rows }, () => []);
+	for (const vertex of gradient.vertices) {
+		const match = vertex.id.match(/^v(\d+)(\d+)$/);
+		if (!match) return null;
+		const column = Number(match[1]);
+		const row = Number(match[2]);
+		if (!Number.isInteger(row) || !Number.isInteger(column) || row < 0 || column < 0 || row >= gradient.config.rows || column >= gradient.config.columns) return null;
+		const resolved = vertexMap.get(vertex.id);
+		if (!resolved) throw new Error(`Missing mesh vertex: ${vertex.id}`);
+		if (result[row][column]) return null;
+		result[row][column] = resolved;
+	}
+	if (result.some((row) => row.length !== gradient.config.columns || row.some((vertex) => vertex === void 0))) return null;
+	return result;
+}
+function findPatchCell(grid, patch) {
+	for (let row = 0; row < grid.length - 1; row += 1) for (let column = 0; column < grid[row].length - 1; column += 1) if (grid[row][column].id === patch.topLeft && grid[row][column + 1].id === patch.topRight && grid[row + 1][column + 1].id === patch.bottomRight && grid[row + 1][column].id === patch.bottomLeft) return {
+		row,
+		column
+	};
+	throw new Error(`Mesh patch does not match adjacent regular grid vertices: ${patch.id}`);
+}
+function clampIndex(index, length) {
+	return Math.min(length - 1, Math.max(0, index));
+}
+function catmullRom(p0, p1, p2, p3, t) {
+	const t2 = t * t;
+	const t3 = t2 * t;
+	return .5 * (2 * p1 + (-p0 + p2) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t2 + (-p0 + 3 * p1 - 3 * p2 + p3) * t3);
+}
+function clampColor(value) {
+	return Math.min(1, Math.max(0, value));
+}
+function mix(a, b, t) {
+	return a + (b - a) * t;
+}
+function mixColor(a, b, t) {
+	return [
+		mix(a[0], b[0], t),
+		mix(a[1], b[1], t),
+		mix(a[2], b[2], t),
+		mix(a[3], b[3], t)
+	];
+}
+function sampleBilinearColor(topLeft, topRight, bottomRight, bottomLeft, u, v) {
+	return mixColor(mixColor(topLeft.color, topRight.color, u), mixColor(bottomLeft.color, bottomRight.color, u), v);
+}
+function sampleBicubicColor(grid, row, column, u, v) {
+	const rows = grid.length;
+	const columns = grid[0]?.length ?? 0;
+	const color = [
+		0,
+		0,
+		0,
+		0
+	];
+	for (let channel = 0; channel < 4; channel += 1) {
+		const values = [];
+		for (let y = -1; y <= 2; y += 1) {
+			const sampleRow = grid[clampIndex(row + y, rows)];
+			const p0 = sampleRow[clampIndex(column - 1, columns)].color[channel];
+			const p1 = sampleRow[clampIndex(column, columns)].color[channel];
+			const p2 = sampleRow[clampIndex(column + 1, columns)].color[channel];
+			const p3 = sampleRow[clampIndex(column + 2, columns)].color[channel];
+			values.push(catmullRom(p0, p1, p2, p3, u));
+		}
+		color[channel] = clampColor(catmullRom(values[0], values[1], values[2], values[3], v));
+	}
+	return color;
+}
+function samplePosition(topLeft, topRight, bottomRight, bottomLeft, u, v) {
+	const topX = mix(topLeft.x, topRight.x, u);
+	const topY = mix(topLeft.y, topRight.y, u);
+	const bottomX = mix(bottomLeft.x, bottomRight.x, u);
+	const bottomY = mix(bottomLeft.y, bottomRight.y, u);
+	return {
+		x: mix(topX, bottomX, v),
+		y: mix(topY, bottomY, v)
+	};
+}
+function samplePatchColor(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u, v) {
+	if (gradient.config.method === "bicubic") return sampleBicubicColor(grid, row, column, u, v);
+	return sampleBilinearColor(topLeft, topRight, bottomRight, bottomLeft, u, v).map(clampColor);
+}
+function buildPatchTriangles(gradient, grid, patch, vertexMap, subdivisions) {
+	const topLeft = vertexMap.get(patch.topLeft);
+	const topRight = vertexMap.get(patch.topRight);
+	const bottomRight = vertexMap.get(patch.bottomRight);
+	const bottomLeft = vertexMap.get(patch.bottomLeft);
+	if (!topLeft || !topRight || !bottomRight || !bottomLeft) throw new Error(`Mesh patch references missing vertex: ${patch.id}`);
+	const cell = findPatchCell(grid, patch);
+	const samples = [];
+	for (let y = 0; y <= subdivisions; y += 1) {
+		const row = [];
+		const v = y / subdivisions;
+		for (let x = 0; x <= subdivisions; x += 1) {
+			const u = x / subdivisions;
+			const position = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u, v);
+			const color = samplePatchColor(gradient, grid, cell.row, cell.column, topLeft, topRight, bottomRight, bottomLeft, u, v);
+			row.push({
+				id: `${patch.id}:${x}:${y}`,
+				x: position.x,
+				y: position.y,
+				color
+			});
+		}
+		samples.push(row);
+	}
+	const triangles = [];
+	for (let y = 0; y < subdivisions; y += 1) for (let x = 0; x < subdivisions; x += 1) {
+		const topLeftSample = samples[y][x];
+		const topRightSample = samples[y][x + 1];
+		const bottomRightSample = samples[y + 1][x + 1];
+		const bottomLeftSample = samples[y + 1][x];
+		triangles.push([
+			topLeftSample,
+			topRightSample,
+			bottomRightSample
+		], [
+			topLeftSample,
+			bottomRightSample,
+			bottomLeftSample
+		]);
+	}
+	return triangles;
+}
+function samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u, v, x, y, id) {
+	return {
+		id,
+		x,
+		y,
+		color: samplePatchColor(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u, v)
+	};
+}
+function buildMeshEdgeSkirtTriangles(gradient, grid, width, height, subdivisions) {
+	const triangles = [];
+	const rows = grid.length;
+	const columns = grid[0]?.length ?? 0;
+	if (rows < 2 || columns < 2) return triangles;
+	for (let column = 0; column < columns - 1; column += 1) {
+		const topLeft = grid[0][column];
+		const topRight = grid[0][column + 1];
+		const bottomRight = grid[1][column + 1];
+		const bottomLeft = grid[1][column];
+		for (let index = 0; index < subdivisions; index += 1) {
+			const u0 = index / subdivisions;
+			const u1 = (index + 1) / subdivisions;
+			const top0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u0, 0);
+			const top1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u1, 0);
+			const bottom0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u0, 1);
+			const bottom1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u1, 1);
+			const v0 = Math.min(0, (0 - top0.y) / Math.max(bottom0.y - top0.y, 1e-4));
+			const v1 = Math.min(0, (0 - top1.y) / Math.max(bottom1.y - top1.y, 1e-4));
+			const boundary0 = samplePatchVertexAt(gradient, grid, 0, column, topLeft, topRight, bottomRight, bottomLeft, u0, 0, top0.x, top0.y, `top:${column}:${index}:b0`);
+			const boundary1 = samplePatchVertexAt(gradient, grid, 0, column, topLeft, topRight, bottomRight, bottomLeft, u1, 0, top1.x, top1.y, `top:${column}:${index}:b1`);
+			const projected0 = samplePatchVertexAt(gradient, grid, 0, column, topLeft, topRight, bottomRight, bottomLeft, u0, v0, top0.x, 0, `top:${column}:${index}:p0`);
+			const projected1 = samplePatchVertexAt(gradient, grid, 0, column, topLeft, topRight, bottomRight, bottomLeft, u1, v1, top1.x, 0, `top:${column}:${index}:p1`);
+			triangles.push([
+				projected0,
+				projected1,
+				boundary1
+			], [
+				projected0,
+				boundary1,
+				boundary0
+			]);
+		}
+	}
+	for (let column = 0; column < columns - 1; column += 1) {
+		const row = rows - 2;
+		const topLeft = grid[row][column];
+		const topRight = grid[row][column + 1];
+		const bottomRight = grid[row + 1][column + 1];
+		const bottomLeft = grid[row + 1][column];
+		for (let index = 0; index < subdivisions; index += 1) {
+			const u0 = index / subdivisions;
+			const u1 = (index + 1) / subdivisions;
+			const top0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u0, 0);
+			const top1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u1, 0);
+			const bottom0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u0, 1);
+			const bottom1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, u1, 1);
+			const v0 = Math.max(1, (height - top0.y) / Math.max(bottom0.y - top0.y, 1e-4));
+			const v1 = Math.max(1, (height - top1.y) / Math.max(bottom1.y - top1.y, 1e-4));
+			const boundary0 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u0, 1, bottom0.x, bottom0.y, `bottom:${column}:${index}:b0`);
+			const boundary1 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u1, 1, bottom1.x, bottom1.y, `bottom:${column}:${index}:b1`);
+			const projected0 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u0, v0, bottom0.x, height, `bottom:${column}:${index}:p0`);
+			const projected1 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u1, v1, bottom1.x, height, `bottom:${column}:${index}:p1`);
+			triangles.push([
+				boundary0,
+				boundary1,
+				projected1
+			], [
+				boundary0,
+				projected1,
+				projected0
+			]);
+		}
+	}
+	for (let row = 0; row < rows - 1; row += 1) {
+		const topLeft = grid[row][0];
+		const topRight = grid[row][1];
+		const bottomRight = grid[row + 1][1];
+		const bottomLeft = grid[row + 1][0];
+		for (let index = 0; index < subdivisions; index += 1) {
+			const v0 = index / subdivisions;
+			const v1 = (index + 1) / subdivisions;
+			const left0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 0, v0);
+			const left1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 0, v1);
+			const right0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 1, v0);
+			const right1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 1, v1);
+			const u0 = Math.min(0, (0 - left0.x) / Math.max(right0.x - left0.x, 1e-4));
+			const u1 = Math.min(0, (0 - left1.x) / Math.max(right1.x - left1.x, 1e-4));
+			const boundary0 = samplePatchVertexAt(gradient, grid, row, 0, topLeft, topRight, bottomRight, bottomLeft, 0, v0, left0.x, left0.y, `left:${row}:${index}:b0`);
+			const boundary1 = samplePatchVertexAt(gradient, grid, row, 0, topLeft, topRight, bottomRight, bottomLeft, 0, v1, left1.x, left1.y, `left:${row}:${index}:b1`);
+			const projected0 = samplePatchVertexAt(gradient, grid, row, 0, topLeft, topRight, bottomRight, bottomLeft, u0, v0, 0, left0.y, `left:${row}:${index}:p0`);
+			const projected1 = samplePatchVertexAt(gradient, grid, row, 0, topLeft, topRight, bottomRight, bottomLeft, u1, v1, 0, left1.y, `left:${row}:${index}:p1`);
+			triangles.push([
+				projected0,
+				boundary0,
+				boundary1
+			], [
+				projected0,
+				boundary1,
+				projected1
+			]);
+		}
+	}
+	for (let row = 0; row < rows - 1; row += 1) {
+		const column = columns - 2;
+		const topLeft = grid[row][column];
+		const topRight = grid[row][column + 1];
+		const bottomRight = grid[row + 1][column + 1];
+		const bottomLeft = grid[row + 1][column];
+		for (let index = 0; index < subdivisions; index += 1) {
+			const v0 = index / subdivisions;
+			const v1 = (index + 1) / subdivisions;
+			const left0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 0, v0);
+			const left1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 0, v1);
+			const right0 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 1, v0);
+			const right1 = samplePosition(topLeft, topRight, bottomRight, bottomLeft, 1, v1);
+			const u0 = Math.max(1, (width - left0.x) / Math.max(right0.x - left0.x, 1e-4));
+			const u1 = Math.max(1, (width - left1.x) / Math.max(right1.x - left1.x, 1e-4));
+			const boundary0 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, 1, v0, right0.x, right0.y, `right:${row}:${index}:b0`);
+			const boundary1 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, 1, v1, right1.x, right1.y, `right:${row}:${index}:b1`);
+			const projected0 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u0, v0, width, right0.y, `right:${row}:${index}:p0`);
+			const projected1 = samplePatchVertexAt(gradient, grid, row, column, topLeft, topRight, bottomRight, bottomLeft, u1, v1, width, right1.y, `right:${row}:${index}:p1`);
+			triangles.push([
+				boundary0,
+				projected0,
+				projected1
+			], [
+				boundary0,
+				projected1,
+				boundary1
+			]);
+		}
+	}
+	return triangles;
+}
+//#endregion
+//#region src/gradient-transformer/modules/css/ModuleTransformerDiamondGradientToCss.ts
+const DIAMOND_SAMPLE_COUNT = 96;
+function getColorStops$1(stops) {
+	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+}
+function sampleColorAtPosition$1(stops, position) {
+	if (stops.length === 0) throw new Error("Cannot sample color from empty diamond gradient stops.");
+	if (stops.length === 1 || position <= stops[0].position) return stops[0].value;
+	const lastStop = stops[stops.length - 1];
+	if (position >= lastStop.position) return lastStop.value;
+	for (let index = 0; index < stops.length - 1; index += 1) {
+		const current = stops[index];
+		const next = stops[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 resolvePosition(position) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordX(position.x),
+		y: resolveKeywordY(position.y)
+	};
+	return {
+		x: resolveLengthPercentage$1(position.x, 100),
+		y: resolveLengthPercentage$1(position.y, 100)
+	};
+}
+function resolveKeywordX(value) {
+	if (value === "left") return 0;
+	if (value === "right") return 100;
+	return 50;
+}
+function resolveKeywordY(value) {
+	if (value === "top") return 0;
+	if (value === "bottom") return 100;
+	return 50;
+}
+function resolveLengthPercentage$1(value, reference) {
+	if (value.kind === "percent") return value.value / 100 * reference;
+	if (value.unit === "px") return value.value;
+	throw new Error(`Unsupported diamond-gradient length unit for CSS transformer: ${value.unit}`);
+}
+function getDistanceToCorner$4(center, corner) {
+	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
+}
+function getCornerDeltas$4(center) {
+	return [
+		{
+			dx: -center.x,
+			dy: -center.y
+		},
+		{
+			dx: 100 - center.x,
+			dy: -center.y
+		},
+		{
+			dx: -center.x,
+			dy: 100 - center.y
+		},
+		{
+			dx: 100 - center.x,
+			dy: 100 - center.y
+		}
+	];
+}
+function scaleDiamondRadiiToCorner$2(radiusX, radiusY, dx, dy) {
+	const safeRadiusX = Math.max(radiusX, 1e-4);
+	const safeRadiusY = Math.max(radiusY, 1e-4);
+	const scale = Math.abs(dx) / safeRadiusX + Math.abs(dy) / safeRadiusY;
+	return {
+		x: safeRadiusX * scale,
+		y: safeRadiusY * scale
+	};
+}
+function getMaxVisibleDiamondT$2(center, radii) {
+	return Math.max(...[
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: 100,
+			y: 0
+		},
+		{
+			x: 0,
+			y: 100
+		},
+		{
+			x: 100,
+			y: 100
+		}
+	].map((corner) => Math.abs(corner.x - center.x) / Math.max(radii.x, 1e-4) + Math.abs(corner.y - center.y) / Math.max(radii.y, 1e-4)));
+}
+function resolveDiamondRadii$1(size, shape, center) {
+	if (size.kind === "explicit") {
+		const radiusX = resolveLengthPercentage$1(size.x, 100);
+		const radiusY = size.y ? resolveLengthPercentage$1(size.y, 100) : radiusX;
+		return {
+			x: Math.max(radiusX, 1e-4),
+			y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+		};
+	}
+	const left = center.x;
+	const right = 100 - center.x;
+	const top = center.y;
+	const bottom = 100 - center.y;
+	if (shape === "circle") {
+		const cornerDistances = [
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 0
+			},
+			{
+				x: 0,
+				y: 100
+			},
+			{
+				x: 100,
+				y: 100
+			}
+		].map((corner) => getDistanceToCorner$4(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$4(center);
+	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$2(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+	return corners.map((corner) => scaleDiamondRadiiToCorner$2(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
+}
+function formatPoint(value) {
+	return Number(value.toFixed(3)).toString();
+}
+function buildDiamondPolygon(center, radii, position) {
+	const x = radii.x * position;
+	const y = radii.y * position;
+	return [
+		`${formatPoint(center.x)} ${formatPoint(center.y - y)}`,
+		`${formatPoint(center.x + x)} ${formatPoint(center.y)}`,
+		`${formatPoint(center.x)} ${formatPoint(center.y + y)}`,
+		`${formatPoint(center.x - x)} ${formatPoint(center.y)}`
+	].join(" ");
+}
+function encodeSvgDataUrl$1(svg) {
+	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+var ModuleTransformerDiamondGradientToCss = class {
+	target = "css";
+	gradientType = "diamond-gradient";
+	to(input) {
+		if (!(input instanceof DiamondGradient)) throw new Error("Expected DiamondGradient");
+		const center = resolvePosition(input.config.position);
+		const radii = resolveDiamondRadii$1(input.config.size, input.config.shape, center);
+		const maxVisibleT = getMaxVisibleDiamondT$2(center, radii);
+		const maxT = input.isRepeating ? maxVisibleT : 1;
+		const baseStops = resolveRenderableGradientStops(input, DIAMOND_SAMPLE_COUNT);
+		const stops = getColorStops$1(input.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
+		const outerColor = sampleColorAtPosition$1(stops, maxT);
+		const polygons = [];
+		const sampleCount = Math.max(DIAMOND_SAMPLE_COUNT, Math.ceil(DIAMOND_SAMPLE_COUNT * maxT));
+		for (let index = sampleCount; index >= 0; index -= 1) {
+			const position = index / sampleCount * maxT;
+			const color = sampleColorAtPosition$1(stops, position);
+			const points = buildDiamondPolygon(center, radii, position);
+			polygons.push(`<polygon points="${points}" fill="${color}"/>`);
+		}
+		return encodeSvgDataUrl$1([
+			"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">",
+			`<rect width="100" height="100" fill="${outerColor}"/>`,
+			...polygons,
+			"</svg>"
+		].join(""));
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/css/ModuleTransformerConicGradientToCss.ts
+var ModuleTransformerConicGradientToCss = class {
+	target = "css";
+	gradientType = "conic-gradient";
+	to(input) {
+		if (!(input instanceof ConicGradient)) throw new Error("Expected ConicGradient");
+		return input.toString();
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/css/ModuleTransformerMeshGradientToCss.ts
+const CSS_SAMPLE_SIZE = 96;
+const BICUBIC_SUBDIVISIONS$2 = 24;
+function formatRgba(color) {
+	return `rgba(${color[0]},${color[1]},${color[2]},${Number(color[3].toFixed(3))})`;
+}
+function getBarycentric$1(x, y, a, b, c) {
+	const denominator = (b.y - c.y) * (a.x - c.x) + (c.x - b.x) * (a.y - c.y);
+	if (Math.abs(denominator) < 1e-6) return null;
+	const wA = ((b.y - c.y) * (x - c.x) + (c.x - b.x) * (y - c.y)) / denominator;
+	const wB = ((c.y - a.y) * (x - c.x) + (a.x - c.x) * (y - c.y)) / denominator;
+	const wC = 1 - wA - wB;
+	if (wA < -1e-4 || wB < -1e-4 || wC < -1e-4) return null;
+	return [
+		wA,
+		wB,
+		wC
+	];
+}
+function mixTriangleColor$1(weights, a, b, c) {
+	const [wA, wB, wC] = weights;
+	return [
+		Math.round((a.color[0] * wA + b.color[0] * wB + c.color[0] * wC) * 255),
+		Math.round((a.color[1] * wA + b.color[1] * wB + c.color[1] * wC) * 255),
+		Math.round((a.color[2] * wA + b.color[2] * wB + c.color[2] * wC) * 255),
+		a.color[3] * wA + b.color[3] * wB + c.color[3] * wC
+	];
+}
+function encodeSvgDataUrl(svg) {
+	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+var ModuleTransformerMeshGradientToCss = class {
+	target = "css";
+	gradientType = "mesh-gradient";
+	to(input) {
+		if (!(input instanceof MeshGradient)) throw new Error("Expected MeshGradient");
+		const vertexMap = buildMeshVertexMap(input, CSS_SAMPLE_SIZE, CSS_SAMPLE_SIZE);
+		const grid = buildRegularMeshGrid(input, vertexMap);
+		const subdivisions = input.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS$2 : 1;
+		const triangles = input.patches.flatMap((patch) => buildPatchTriangles(input, grid, patch, vertexMap, subdivisions));
+		const edgeTriangles = buildMeshEdgeSkirtTriangles(input, grid, CSS_SAMPLE_SIZE, CSS_SAMPLE_SIZE, subdivisions);
+		const renderTriangles = [...triangles, ...edgeTriangles];
+		const rects = [];
+		for (let y = 0; y < CSS_SAMPLE_SIZE; y += 1) for (let x = 0; x < CSS_SAMPLE_SIZE; x += 1) {
+			const sampleX = x + .5;
+			const sampleY = y + .5;
+			let color = null;
+			for (const [a, b, c] of renderTriangles) {
+				const weights = getBarycentric$1(sampleX, sampleY, a, b, c);
+				if (!weights) continue;
+				color = mixTriangleColor$1(weights, a, b, c);
+				break;
+			}
+			if (!color) continue;
+			rects.push(`<rect x="${x}" y="${y}" width="1" height="1" fill="${formatRgba(color)}"/>`);
+		}
+		return encodeSvgDataUrl([
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${CSS_SAMPLE_SIZE} ${CSS_SAMPLE_SIZE}" preserveAspectRatio="none" shape-rendering="crispEdges">`,
+			...rects,
+			"</svg>"
+		].join(""));
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/canvas/ModuleTransformerLinearGradientToCanvas.ts
+const toRgb$7 = converter("rgb");
+function toCanvasColor$2(input) {
+	const color = toRgb$7(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return formatRgb(color);
+}
+function getStopRange$2(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$4(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
+	}));
+}
+var ModuleTransformerLinearGradientToCanvas = class {
+	target = "canvas-2d";
+	gradientType = "linear-gradient";
+	to(input) {
+		const gradient = input;
+		return { draw: (ctx, width, height) => {
+			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$2(resolveRenderableGradientStops(gradient));
+			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$4(stops, min, max);
+			}
+			const canvasGradient = ctx.createLinearGradient(startX, startY, endX, endY);
+			for (const stop of normalizedStops) canvasGradient.addColorStop(stop.position, toCanvasColor$2(stop.value));
+			ctx.clearRect(0, 0, width, height);
+			ctx.fillStyle = canvasGradient;
+			ctx.fillRect(0, 0, width, height);
+		} };
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/canvas/ModuleTransformerRadialGradientToCanvas.ts
+const toRgb$6 = converter("rgb");
+const RADIAL_GRADIENT_SAMPLE_COUNT = 128;
+function toCanvasColor$1(input) {
+	const color = toRgb$6(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return formatRgb(color);
 }
 function getStopRange$1(stops) {
@@ -1859,7 +2934,7 @@ function getStopRange$1(stops) {
 		stops: colorStops
 	};
 }
-function normalizeStops$2(stops, min, max) {
+function normalizeStops$3(stops, min, max) {
 	const range = max - min || 1;
 	return stops.map((stop) => ({
 		...stop,
@@ -1872,12 +2947,12 @@ function getDistanceToSide$1(center, width, height, side) {
 	if (side === "top") return center.y;
 	return height - center.y;
 }
-function getDistanceToCorner$1(center, corner) {
+function getDistanceToCorner$3(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) {
+function getCornerDeltas$3(center, width, height) {
 	return [
 		{
 			dx: -center.x,
@@ -1920,9 +2995,9 @@ var ModuleTransformerRadialGradientToCanvas = class {
 			let normalizedStops = stops;
 			let innerFactor = 0;
 			let outerFactor = gradient.isRepeating ? maxVisibleT : 1;
-			if (gradient.isRepeating) normalizedStops = normalizeStops$2(stops, 0, maxVisibleT);
+			if (gradient.isRepeating) normalizedStops = normalizeStops$3(stops, 0, maxVisibleT);
 			else if (min < 0 || max > 1) {
-				normalizedStops = normalizeStops$2(stops, min, max);
+				normalizedStops = normalizeStops$3(stops, min, max);
 				innerFactor = min;
 				outerFactor = max;
 			}
@@ -1931,7 +3006,7 @@ var ModuleTransformerRadialGradientToCanvas = class {
 				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));
+				for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor$1(stop.value));
 				ctx.fillStyle = g;
 				ctx.fillRect(0, 0, width, height);
 				return;
@@ -1945,7 +3020,7 @@ var ModuleTransformerRadialGradientToCanvas = class {
 			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));
+			for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor$1(stop.value));
 			ctx.fillStyle = g;
 			const drawRadius = scaledOuterRadius + 2;
 			ctx.fillRect(-drawRadius / scaleX * 2, -drawRadius / scaleY * 2, drawRadius / scaleX * 4, drawRadius / scaleY * 4);
@@ -2003,7 +3078,7 @@ var ModuleTransformerRadialGradientToCanvas = class {
 					x: width,
 					y: height
 				}
-			].map((corner) => getDistanceToCorner$1(center, corner));
+			].map((corner) => getDistanceToCorner$3(center, corner));
 			if (size.value === "closest-side") {
 				const radius = Math.min(left, right, top, bottom);
 				return {
@@ -2043,7 +3118,7 @@ var ModuleTransformerRadialGradientToCanvas = class {
 			x: Math.max(farthestSideRadiusX, 1e-4),
 			y: Math.max(farthestSideRadiusY, 1e-4)
 		};
-		const corners = getCornerDeltas$1(center, width, height);
+		const corners = getCornerDeltas$3(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;
@@ -2060,8 +3135,241 @@ var ModuleTransformerRadialGradientToCanvas = class {
 	}
 };
 //#endregion
+//#region src/gradient-transformer/modules/canvas/ModuleTransformerDiamondGradientToCanvas.ts
+const toRgb$5 = converter("rgb");
+const DIAMOND_GRADIENT_SAMPLE_COUNT = 128;
+const DIAMOND_COLOR_LOOKUP_SIZE = 1024;
+function toCanvasColor(input) {
+	const color = toRgb$5(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return [
+		Math.round((color.r ?? 0) * 255),
+		Math.round((color.g ?? 0) * 255),
+		Math.round((color.b ?? 0) * 255),
+		Math.round((color.alpha ?? 1) * 255)
+	];
+}
+function getColorStops(stops) {
+	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+}
+function sampleColorAtPosition(stops, position) {
+	if (stops.length === 0) throw new Error("Cannot sample color from empty diamond gradient stops.");
+	if (stops.length === 1 || position <= stops[0].position) return toCanvasColor(stops[0].value);
+	const lastStop = stops[stops.length - 1];
+	if (position >= lastStop.position) return toCanvasColor(lastStop.value);
+	for (let index = 0; index < stops.length - 1; index += 1) {
+		const current = stops[index];
+		const next = stops[index + 1];
+		if (position >= current.position && position <= next.position) {
+			const range = next.position - current.position || 1;
+			const localT = (position - current.position) / range;
+			const currentColor = toCanvasColor(current.value);
+			const nextColor = toCanvasColor(next.value);
+			return [
+				Math.round(currentColor[0] + (nextColor[0] - currentColor[0]) * localT),
+				Math.round(currentColor[1] + (nextColor[1] - currentColor[1]) * localT),
+				Math.round(currentColor[2] + (nextColor[2] - currentColor[2]) * localT),
+				Math.round(currentColor[3] + (nextColor[3] - currentColor[3]) * localT)
+			];
+		}
+	}
+	return toCanvasColor(lastStop.value);
+}
+function buildColorLookup(stops, maxT) {
+	const lookup = new Uint8ClampedArray(DIAMOND_COLOR_LOOKUP_SIZE * 4);
+	for (let index = 0; index < DIAMOND_COLOR_LOOKUP_SIZE; index += 1) {
+		const color = sampleColorAtPosition(stops, index / (DIAMOND_COLOR_LOOKUP_SIZE - 1) * maxT);
+		const offset = index * 4;
+		lookup[offset] = color[0];
+		lookup[offset + 1] = color[1];
+		lookup[offset + 2] = color[2];
+		lookup[offset + 3] = color[3];
+	}
+	return lookup;
+}
+function getMaxVisibleDiamondT$1(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) => Math.abs(corner.x - center.x) / Math.max(radii.x, 1e-4) + Math.abs(corner.y - center.y) / Math.max(radii.y, 1e-4)));
+}
+function getDistanceToCorner$2(center, corner) {
+	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
+}
+function getCornerDeltas$2(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 scaleDiamondRadiiToCorner$1(radiusX, radiusY, dx, dy) {
+	const safeRadiusX = Math.max(radiusX, 1e-4);
+	const safeRadiusY = Math.max(radiusY, 1e-4);
+	const scale = Math.abs(dx) / safeRadiusX + Math.abs(dy) / safeRadiusY;
+	return {
+		x: safeRadiusX * scale,
+		y: safeRadiusY * scale
+	};
+}
+var ModuleTransformerDiamondGradientToCanvas = class {
+	target = "canvas-2d";
+	gradientType = "diamond-gradient";
+	to(input) {
+		if (!(input instanceof DiamondGradient)) throw new Error("Expected DiamondGradient");
+		const gradient = input;
+		return { draw: (ctx, width, height) => {
+			const center = this._resolveCenter(gradient.config.position, width, height);
+			const radii = this._resolveDiamondRadii(gradient.config.size, gradient.config.shape, center, width, height);
+			const maxVisibleT = getMaxVisibleDiamondT$1(center, radii, width, height);
+			const baseStops = resolveRenderableGradientStops(gradient, DIAMOND_GRADIENT_SAMPLE_COUNT);
+			const colorLookup = buildColorLookup(getColorStops(gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops), maxVisibleT);
+			const imageData = ctx.createImageData(width, height);
+			const data = imageData.data;
+			for (let y = 0; y < height; y += 1) for (let x = 0; x < width; x += 1) {
+				const t = Math.abs(x - center.x) / Math.max(radii.x, 1e-4) + Math.abs(y - center.y) / Math.max(radii.y, 1e-4);
+				const lookupOffset = Math.min(DIAMOND_COLOR_LOOKUP_SIZE - 1, Math.max(0, Math.round(t / Math.max(maxVisibleT, 1e-4) * (DIAMOND_COLOR_LOOKUP_SIZE - 1)))) * 4;
+				const offset = (y * width + x) * 4;
+				data[offset] = colorLookup[lookupOffset];
+				data[offset + 1] = colorLookup[lookupOffset + 1];
+				data[offset + 2] = colorLookup[lookupOffset + 2];
+				data[offset + 3] = colorLookup[lookupOffset + 3];
+			}
+			ctx.putImageData(imageData, 0, 0);
+		} };
+	}
+	_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;
+	}
+	_resolveDiamondRadii(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 = center.x;
+		const right = width - center.x;
+		const top = center.y;
+		const bottom = height - center.y;
+		if (shape === "circle") {
+			const cornerDistances = [
+				{
+					x: 0,
+					y: 0
+				},
+				{
+					x: width,
+					y: 0
+				},
+				{
+					x: 0,
+					y: height
+				},
+				{
+					x: width,
+					y: height
+				}
+			].map((corner) => getDistanceToCorner$2(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$2(center, width, height);
+		if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$1(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+		return corners.map((corner) => scaleDiamondRadiiToCorner$1(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
+	}
+	_resolve(value, size) {
+		if (value.kind === "percent") return value.value / 100 * size;
+		if (value.unit === "px") return value.value;
+		throw new Error(`Unsupported diamond-gradient length unit for Canvas transformer: ${value.unit}`);
+	}
+};
+//#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerConicGradientToCanvas.ts
-const toRgb$2 = converter("rgb");
+const CONIC_GRADIENT_SAMPLE_COUNT = 128;
+const toRgb$4 = converter("rgb");
 var ModuleTransformerConicGradientToCanvas = class {
 	target = "canvas-2d";
 	gradientType = "conic-gradient";
@@ -2072,7 +3380,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;
@@ -2160,7 +3469,7 @@ var ModuleTransformerConicGradientToCanvas = class {
 		};
 	}
 	_parseColor(input) {
-		const color = toRgb$2(input);
+		const color = toRgb$4(input);
 		if (!color) throw new Error(`Failed to convert color: ${input}`);
 		return {
 			r: Math.round((color.r ?? 0) * 255),
@@ -2174,11 +3483,74 @@ var ModuleTransformerConicGradientToCanvas = class {
 	}
 };
 //#endregion
+//#region src/gradient-transformer/modules/canvas/ModuleTransformerMeshGradientToCanvas.ts
+const BICUBIC_SUBDIVISIONS$1 = 24;
+function getBarycentric(x, y, a, b, c) {
+	const denominator = (b.y - c.y) * (a.x - c.x) + (c.x - b.x) * (a.y - c.y);
+	if (Math.abs(denominator) < 1e-6) return null;
+	const wA = ((b.y - c.y) * (x - c.x) + (c.x - b.x) * (y - c.y)) / denominator;
+	const wB = ((c.y - a.y) * (x - c.x) + (a.x - c.x) * (y - c.y)) / denominator;
+	const wC = 1 - wA - wB;
+	const epsilon = -1e-4;
+	if (wA < epsilon || wB < epsilon || wC < epsilon) return null;
+	return [
+		wA,
+		wB,
+		wC
+	];
+}
+function mixTriangleColor(weights, a, b, c) {
+	const [wA, wB, wC] = weights;
+	return [
+		Math.round((a.color[0] * wA + b.color[0] * wB + c.color[0] * wC) * 255),
+		Math.round((a.color[1] * wA + b.color[1] * wB + c.color[1] * wC) * 255),
+		Math.round((a.color[2] * wA + b.color[2] * wB + c.color[2] * wC) * 255),
+		Math.round((a.color[3] * wA + b.color[3] * wB + c.color[3] * wC) * 255)
+	];
+}
+function fillTriangle(data, width, height, a, b, c) {
+	const minX = Math.max(0, Math.floor(Math.min(a.x, b.x, c.x)));
+	const maxX = Math.min(width - 1, Math.ceil(Math.max(a.x, b.x, c.x)));
+	const minY = Math.max(0, Math.floor(Math.min(a.y, b.y, c.y)));
+	const maxY = Math.min(height - 1, Math.ceil(Math.max(a.y, b.y, c.y)));
+	for (let y = minY; y <= maxY; y += 1) for (let x = minX; x <= maxX; x += 1) {
+		const weights = getBarycentric(x + .5, y + .5, a, b, c);
+		if (!weights) continue;
+		const color = mixTriangleColor(weights, a, b, c);
+		const offset = (y * width + x) * 4;
+		data[offset] = color[0];
+		data[offset + 1] = color[1];
+		data[offset + 2] = color[2];
+		data[offset + 3] = color[3];
+	}
+}
+var ModuleTransformerMeshGradientToCanvas = class {
+	target = "canvas-2d";
+	gradientType = "mesh-gradient";
+	to(input) {
+		if (!(input instanceof MeshGradient)) throw new Error("Expected MeshGradient");
+		const gradient = input;
+		return { draw: (ctx, width, height) => {
+			const imageData = ctx.createImageData(width, height);
+			const vertexMap = buildMeshVertexMap(gradient, width, height);
+			const grid = buildRegularMeshGrid(gradient, vertexMap);
+			const subdivisions = gradient.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS$1 : 1;
+			const edgeTriangles = buildMeshEdgeSkirtTriangles(gradient, grid, width, height, subdivisions);
+			for (const patch of gradient.patches) {
+				const triangles = buildPatchTriangles(gradient, grid, patch, vertexMap, subdivisions);
+				for (const [a, b, c] of triangles) fillTriangle(imageData.data, width, height, a, b, c);
+			}
+			for (const [a, b, c] of edgeTriangles) fillTriangle(imageData.data, width, height, a, b, c);
+			ctx.putImageData(imageData, 0, 0);
+		} };
+	}
+};
+//#endregion
 //#region src/gradient-transformer/modules/webgl/ModuleTransformerLinearGradientToWebgl.ts
-const toRgb$1 = converter("rgb");
-const MAX_STOPS$1 = 128;
-function toWebGLColor$1(input) {
-	const color = toRgb$1(input);
+const toRgb$3 = converter("rgb");
+const MAX_STOPS$3 = 128;
+function toWebGLColor$3(input) {
+	const color = toRgb$3(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		color.r ?? 0,
@@ -2200,14 +3572,14 @@ function getStopRange(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,
 		position: (stop.position - min) / range
 	}));
 }
-function createShader$1(gl, type, source) {
+function createShader$4(gl, type, source) {
 	const shader = gl.createShader(type);
 	if (!shader) throw new Error("Failed to create WebGL shader.");
 	gl.shaderSource(shader, source);
@@ -2219,9 +3591,9 @@ function createShader$1(gl, type, source) {
 	}
 	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);
+function createProgram$4(gl, vertexSource, fragmentSource) {
+	const vertexShader = createShader$4(gl, gl.VERTEX_SHADER, vertexSource);
+	const fragmentShader = createShader$4(gl, gl.FRAGMENT_SHADER, fragmentSource);
 	const program = gl.createProgram();
 	if (!program) throw new Error("Failed to create WebGL program.");
 	gl.attachShader(program, vertexShader);
@@ -2234,15 +3606,15 @@ function createProgram$1(gl, vertexSource, fragmentSource) {
 	}
 	return program;
 }
-function getColorStopCount$1(stops) {
+function getColorStopCount$3(stops) {
 	return stops.filter((stop) => stop.type === "color-stop").length;
 }
-function getWebGLSampleCount$1(gradient, maxStops) {
-	const colorStopCount = getColorStopCount$1(gradient.stops);
+function getWebGLSampleCount$3(gradient, maxStops) {
+	const colorStopCount = getColorStopCount$3(gradient.stops);
 	const segmentCount = Math.max(1, colorStopCount - 1);
 	return Math.max(2, Math.floor((maxStops - 1) / segmentCount));
 }
-function getColorAtPosition$1(stops, position) {
+function getColorAtPosition$3(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;
@@ -2257,25 +3629,640 @@ function getColorAtPosition$1(stops, position) {
 			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;
+	return lastStop.value;
+}
+function fitStopsToWebGLLimit$3(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$3(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$4(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$3}];
+                    uniform vec4 u_colors[${MAX_STOPS$3}];
+
+                    vec4 getGradientColor(float t) {
+                        vec4 result = u_colors[0];
+
+                        for (int i = 0; i < ${MAX_STOPS$3 - 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(resolveRenderableGradientStops(gradient, getWebGLSampleCount$3(gradient, MAX_STOPS$3)));
+			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$2(stops, min, max);
+			}
+			const startU = startX / width;
+			const startV = 1 - startY / height;
+			const endU = endX / width;
+			const endV = 1 - endY / height;
+			const limitedStops = fitStopsToWebGLLimit$3(normalizedStops, MAX_STOPS$3);
+			const positions = new Float32Array(MAX_STOPS$3);
+			const colors = new Float32Array(MAX_STOPS$3 * 4);
+			limitedStops.forEach((stop, index) => {
+				const color = toWebGLColor$3(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/modules/webgl/ModuleTransformerConicGradientToWebgl.ts
+const toRgb$2 = converter("rgb");
+const MAX_STOPS$2 = 128;
+const TWO_PI = Math.PI * 2;
+function toWebGLColor$2(input) {
+	const color = toRgb$2(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$3(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$3(gl, vertexSource, fragmentSource) {
+	const vertexShader = createShader$3(gl, gl.VERTEX_SHADER, vertexSource);
+	const fragmentShader = createShader$3(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$2(stops) {
+	return stops.filter((stop) => stop.type === "color-stop").length;
+}
+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$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;
+	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$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 = [];
+	for (let index = 0; index < maxStops; index += 1) {
+		const position = index / (maxStops - 1);
+		sampledStops.push({
+			type: "color-stop",
+			value: getColorAtPosition$2(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$2(x, width) {
+	if (x === "left") return 0;
+	if (x === "center") return width / 2;
+	if (x === "right") return width;
+	return width / 2;
+}
+function resolveKeywordPositionY$2(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$2(position.x, width),
+		y: resolveKeywordPositionY$2(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$3(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$2}];
+                    uniform vec4 u_colors[${MAX_STOPS$2}];
+
+                    vec4 getGradientColor(float t) {
+                        vec4 result = u_colors[0];
+
+                        for (int i = 0; i < ${MAX_STOPS$2 - 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$2(resolveRenderableGradientStops(gradient, getWebGLSampleCount$2(gradient, MAX_STOPS$2)), 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$2(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$1 = converter("rgb");
+const MAX_STOPS$1 = 128;
+const MAX_REPEATING_RADIAL_T = 16;
+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$2(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$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);
+	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 parseLengthPercentage$1(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$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 resolveRadialCenter(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: parseLengthPercentage$1(position.x, width),
+		y: parseLengthPercentage$1(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$1(center, corner) {
+	const dx = corner.x - center.x;
+	const dy = corner.y - center.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+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 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(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$1(size.x, width);
+		const radiusY = size.y ? parseLengthPercentage$1(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$1(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$1(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 ModuleTransformerLinearGradientToCanvasWebGL = class {
+var ModuleTransformerRadialGradientToCanvasWebGL = class {
 	target = "canvas-webgl";
-	gradientType = "linear-gradient";
+	gradientType = "radial-gradient";
 	to(input) {
 		const gradient = input;
 		return { draw: (canvas, width, height) => {
@@ -2284,7 +4271,7 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 			canvas.width = width;
 			canvas.height = height;
 			gl.viewport(0, 0, width, height);
-			const program = createProgram$1(gl, `
+			const program = createProgram$2(gl, `
                     attribute vec2 a_position;
                     varying vec2 v_uv;
 
@@ -2297,11 +4284,12 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 
                     varying vec2 v_uv;
 
-                    uniform vec2 u_start;
-                    uniform vec2 u_end;
+                    uniform vec2 u_center;
+                    uniform vec2 u_radius;
                     uniform int u_stopCount;
                     uniform float u_positions[${MAX_STOPS$1}];
                     uniform vec4 u_colors[${MAX_STOPS$1}];
+                    uniform float u_tMax;
 
                     vec4 getGradientColor(float t) {
                         vec4 result = u_colors[0];
@@ -2330,13 +4318,12 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
                     }
 
                     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;
+                        vec2 delta = v_uv - u_center;
+                        vec2 normalized = delta / max(u_radius, vec2(0.00001));
+                        float t = length(normalized);
 
-                        t = clamp(t, 0.0, 1.0);
+                        t = clamp(t, 0.0, u_tMax);
+                        t = t / max(u_tMax, 0.00001);
 
                         gl_FragColor = getGradientColor(t);
                     }
@@ -2361,34 +4348,14 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 			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(resolveRenderableGradientStops(gradient, getWebGLSampleCount$1(gradient, MAX_STOPS$1)));
-			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$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$1(normalizedStops, MAX_STOPS$1);
+			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$1(gradient, MAX_STOPS$1));
+			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$1(gradient.isRepeating ? normalizeStops$1(renderStops, 0, repeatMaxT) : renderStops, MAX_STOPS$1);
 			const positions = new Float32Array(MAX_STOPS$1);
 			const colors = new Float32Array(MAX_STOPS$1 * 4);
 			limitedStops.forEach((stop, index) => {
@@ -2399,8 +4366,9 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 				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.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);
@@ -2411,10 +4379,10 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 	}
 };
 //#endregion
-//#region src/gradient-transformer/modules/webgl/ModuleTransformerRadialGradientToWebgl.ts
+//#region src/gradient-transformer/modules/webgl/ModuleTransformerDiamondGradientToWebgl.ts
 const toRgb = converter("rgb");
 const MAX_STOPS = 128;
-const MAX_REPEATING_RADIAL_T = 16;
+const MAX_REPEATING_DIAMOND_T = 16;
 function toWebGLColor(input) {
 	const color = toRgb(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
@@ -2425,7 +4393,7 @@ function toWebGLColor(input) {
 		color.alpha ?? 1
 	];
 }
-function createShader(gl, type, source) {
+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);
@@ -2437,9 +4405,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$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);
@@ -2462,7 +4430,7 @@ function getWebGLSampleCount(gradient, maxStops) {
 }
 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 (colorStops.length === 0) throw new Error("Cannot sample color from empty diamond gradient stops.");
 	if (position <= colorStops[0].position) return colorStops[0].value;
 	const lastStop = colorStops[colorStops.length - 1];
 	if (position >= lastStop.position) return lastStop.value;
@@ -2491,57 +4459,40 @@ function fitStopsToWebGLLimit(stops, maxStops) {
 	}
 	return sampledStops;
 }
+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 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;
+	if (value.unit === "px") return value.value;
+	throw new Error(`Unsupported diamond-gradient length unit for WebGL transformer: ${value.unit}`);
 }
 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) {
+function resolveDiamondCenter(position, width, height) {
 	if (position.kind === "keywords") return {
 		x: resolveKeywordPositionX(position.x, width),
 		y: resolveKeywordPositionY(position.y, height)
 	};
-	if (position.kind === "values") return {
+	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
-	}));
+	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
 }
 function getCornerDeltas(center, width, height) {
 	return [
@@ -2563,16 +4514,16 @@ function getCornerDeltas(center, width, height) {
 		}
 	];
 }
-function scaleEllipseRadiiToCorner(radiusX, radiusY, dx, dy) {
+function scaleDiamondRadiiToCorner(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));
+	const scale = Math.abs(dx) / safeRadiusX + Math.abs(dy) / safeRadiusY;
 	return {
 		x: safeRadiusX * scale,
 		y: safeRadiusY * scale
 	};
 }
-function resolveRadialRadii(size, shape, center, width, height) {
+function resolveDiamondRadii(size, shape, center, width, height) {
 	if (size.kind === "explicit") {
 		const radiusX = parseLengthPercentage(size.x, width);
 		const radiusY = size.y ? parseLengthPercentage(size.y, height) : radiusX;
@@ -2581,10 +4532,10 @@ function resolveRadialRadii(size, shape, center, width, height) {
 			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");
+	const left = center.x;
+	const right = width - center.x;
+	const top = center.y;
+	const bottom = height - center.y;
 	if (shape === "circle") {
 		const cornerDistances = [
 			{
@@ -2644,19 +4595,34 @@ function resolveRadialRadii(size, shape, center, width, height) {
 		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;
-	});
+	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+	return corners.map((corner) => scaleDiamondRadiiToCorner(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
 }
-var ModuleTransformerRadialGradientToCanvasWebGL = class {
+function getMaxVisibleDiamondT(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) => Math.abs(corner.x - center.x) / Math.max(radii.x, 1e-4) + Math.abs(corner.y - center.y) / Math.max(radii.y, 1e-4)));
+}
+var ModuleTransformerDiamondGradientToCanvasWebGL = class {
 	target = "canvas-webgl";
-	gradientType = "radial-gradient";
+	gradientType = "diamond-gradient";
 	to(input) {
+		if (!(input instanceof DiamondGradient)) throw new Error("Expected DiamondGradient");
 		const gradient = input;
 		return { draw: (canvas, width, height) => {
 			const gl = canvas.getContext("webgl");
@@ -2664,7 +4630,7 @@ var ModuleTransformerRadialGradientToCanvasWebGL = class {
 			canvas.width = width;
 			canvas.height = height;
 			gl.viewport(0, 0, width, height);
-			const program = createProgram(gl, `
+			const program = createProgram$1(gl, `
                     attribute vec2 a_position;
                     varying vec2 v_uv;
 
@@ -2712,8 +4678,8 @@ var ModuleTransformerRadialGradientToCanvasWebGL = class {
 
                     void main() {
                         vec2 delta = v_uv - u_center;
-                        vec2 normalized = delta / max(u_radius, vec2(0.00001));
-                        float t = length(normalized);
+                        vec2 normalized = abs(delta) / max(u_radius, vec2(0.00001));
+                        float t = normalized.x + normalized.y;
 
                         t = clamp(t, 0.0, u_tMax);
                         t = t / max(u_tMax, 0.00001);
@@ -2741,11 +4707,11 @@ var ModuleTransformerRadialGradientToCanvasWebGL = class {
 			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 center = resolveDiamondCenter(gradient.config.position, width, height);
+			const radius = resolveDiamondRadii(gradient.config.size, gradient.config.shape, center, width, height);
+			const maxVisibleT = getMaxVisibleDiamondT(center, radius, width, height);
 			const baseStops = resolveRenderableGradientStops(gradient, getWebGLSampleCount(gradient, MAX_STOPS));
-			const repeatMaxT = Math.min(maxVisibleT, MAX_REPEATING_RADIAL_T);
+			const repeatMaxT = Math.min(maxVisibleT, MAX_REPEATING_DIAMOND_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);
@@ -2772,6 +4738,107 @@ var ModuleTransformerRadialGradientToCanvasWebGL = class {
 	}
 };
 //#endregion
+//#region src/gradient-transformer/modules/webgl/ModuleTransformerMeshGradientToWebgl.ts
+const BICUBIC_SUBDIVISIONS = 24;
+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 toClipX(value, width) {
+	return value / width * 2 - 1;
+}
+function toClipY(value, height) {
+	return 1 - value / height * 2;
+}
+var ModuleTransformerMeshGradientToCanvasWebGL = class {
+	target = "canvas-webgl";
+	gradientType = "mesh-gradient";
+	to(input) {
+		if (!(input instanceof MeshGradient)) throw new Error("Expected MeshGradient");
+		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;
+                    attribute vec4 a_color;
+                    varying vec4 v_color;
+
+                    void main() {
+                        v_color = a_color;
+                        gl_Position = vec4(a_position, 0.0, 1.0);
+                    }
+                `, `
+                    precision mediump float;
+                    varying vec4 v_color;
+
+                    void main() {
+                        gl_FragColor = v_color;
+                    }
+                `);
+			const vertexMap = buildMeshVertexMap(gradient, width, height);
+			const grid = buildRegularMeshGrid(gradient, vertexMap);
+			const subdivisions = gradient.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS : 1;
+			const edgeTriangles = buildMeshEdgeSkirtTriangles(gradient, grid, width, height, subdivisions);
+			const positions = [];
+			const colors = [];
+			for (const patch of gradient.patches) {
+				const triangles = buildPatchTriangles(gradient, grid, patch, vertexMap, subdivisions);
+				for (const triangle of triangles) for (const vertex of triangle) {
+					positions.push(toClipX(vertex.x, width), toClipY(vertex.y, height));
+					colors.push(...vertex.color);
+				}
+			}
+			for (const triangle of edgeTriangles) for (const vertex of triangle) {
+				positions.push(toClipX(vertex.x, width), toClipY(vertex.y, height));
+				colors.push(...vertex.color);
+			}
+			const positionBuffer = gl.createBuffer();
+			const colorBuffer = gl.createBuffer();
+			gl.useProgram(program);
+			gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+			const positionLocation = gl.getAttribLocation(program, "a_position");
+			gl.enableVertexAttribArray(positionLocation);
+			gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+			gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+			const colorLocation = gl.getAttribLocation(program, "a_color");
+			gl.enableVertexAttribArray(colorLocation);
+			gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
+			gl.clearColor(0, 0, 0, 0);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+			gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2);
+		} };
+	}
+};
+//#endregion
 //#region src/gradient-transformer/GradientTransformer.ts
 var GradientTransformer = class {
 	static _modules = /* @__PURE__ */ new Map();
@@ -2804,12 +4871,19 @@ var GradientTransformer = class {
 		this._initialized = true;
 		this.add(new ModuleTransformerLinearGradientToCss());
 		this.add(new ModuleTransformerRadialGradientToCss());
+		this.add(new ModuleTransformerDiamondGradientToCss());
 		this.add(new ModuleTransformerConicGradientToCss());
+		this.add(new ModuleTransformerMeshGradientToCss());
 		this.add(new ModuleTransformerLinearGradientToCanvas());
 		this.add(new ModuleTransformerRadialGradientToCanvas());
+		this.add(new ModuleTransformerDiamondGradientToCanvas());
 		this.add(new ModuleTransformerConicGradientToCanvas());
+		this.add(new ModuleTransformerMeshGradientToCanvas());
 		this.add(new ModuleTransformerLinearGradientToCanvasWebGL());
 		this.add(new ModuleTransformerRadialGradientToCanvasWebGL());
+		this.add(new ModuleTransformerDiamondGradientToCanvasWebGL());
+		this.add(new ModuleTransformerConicGradientToCanvasWebGL());
+		this.add(new ModuleTransformerMeshGradientToCanvasWebGL());
 	}
 	static _getKey(target, gradientType) {
 		return `${target}:${gradientType}`;
@@ -2832,7 +4906,13 @@ var GradientFactory = class {
 		return this._registry.delete(functionName);
 	}
 	static create(input) {
-		const abi = typeof input === "string" ? parseStringToAbi(input) : input;
+		if (typeof input === "string") {
+			const functionName = this._getFunctionName(input);
+			const adapter = this.get(functionName);
+			if (!adapter) throw new Error(`No gradient registered for: ${functionName}`);
+			return adapter.fromString(input);
+		}
+		const abi = input;
 		const adapter = this.get(abi.functionName);
 		if (!adapter) throw new Error(`No gradient registered for: ${abi.functionName}`);
 		return adapter.fromAbi(abi);
@@ -2850,7 +4930,17 @@ var GradientFactory = class {
 		this._initialized = true;
 		this.add("linear-gradient", LinearGradient);
 		this.add("radial-gradient", RadialGradient);
+		this.add("diamond-gradient", DiamondGradient);
 		this.add("conic-gradient", ConicGradient);
+		this.add("mesh-gradient", MeshGradient);
+	}
+	static _getFunctionName(input) {
+		const source = input.trim();
+		const openIndex = source.indexOf("(");
+		if (openIndex <= 0) throw new Error("Expected function opening parenthesis");
+		let functionName = source.slice(0, openIndex).trim();
+		if (functionName.startsWith("repeating-")) functionName = functionName.slice(10);
+		return functionName;
 	}
 };
 function parse(input) {
@@ -2871,4 +4961,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, 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 };
+export { ConicGradient, DiamondGradient, GRADIENT_COLOR_SPACE, GRADIENT_HUE_INTERPOLATIONS, GRADIENT_POLAR_COLOR_SPACES, GradientBase, GradientFactory, GradientTransformer, LinearGradient, MeshGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCanvasWebGL, ModuleTransformerConicGradientToCss, ModuleTransformerDiamondGradientToCanvas, ModuleTransformerDiamondGradientToCanvasWebGL, ModuleTransformerDiamondGradientToCss, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCanvasWebGL, ModuleTransformerLinearGradientToCss, ModuleTransformerMeshGradientToCanvas, ModuleTransformerMeshGradientToCanvasWebGL, ModuleTransformerMeshGradientToCss, 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 };