gradiente 2.3.0 → 2.5.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";
@@ -1612,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";
@@ -1632,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;
@@ -1664,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);
@@ -1783,12 +2213,12 @@ function getColorStopsWithPositions(stops) {
 	});
 }
 function formatColorForCanvas(input) {
-	const color = toRgb$6(input);
+	const color = toRgb$10(input);
 	if (!color) throw new Error("Failed to convert interpolated color to rgb.");
 	return formatRgb(color);
 }
 const DEFAULT_SAMPLE_COUNT = 64;
-const toRgb$6 = converter("rgb");
+const toRgb$10 = converter("rgb");
 function resolveRenderableGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_COUNT) {
 	const colorStops = getColorStopsWithPositions(gradient.stops);
 	const interpolation = gradient.config.interpolation;
@@ -1818,413 +2248,1781 @@ function resolveRenderableGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_C
 	return gradient.isRepeating ? expandRepeatingStops(sampledStops) : sampledStops;
 }
 //#endregion
-//#region src/gradient-transformer/modules/canvas/ModuleTransformerLinearGradientToCanvas.ts
-const toRgb$5 = converter("rgb");
-function toCanvasColor$1(input) {
-	const color = toRgb$5(input);
+//#region src/gradient-transformer/modules/helpers/mesh-rendering.ts
+const toRgb$9 = converter("rgb");
+function toColor(input) {
+	const color = toRgb$9(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$5(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$5(vertex.x, width),
+		y: resolveLengthPercentage$5(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$4 = converter("rgb");
-const RADIAL_GRADIENT_SAMPLE_COUNT = 128;
-function toCanvasColor(input) {
-	const color = toRgb$4(input);
-	if (!color) throw new Error(`Failed to convert color: ${input}`);
-	return formatRgb(color);
+	return result;
 }
-function getStopRange$1(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 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 normalizeStops$2(stops, min, max) {
-	const range = max - min || 1;
-	return stops.map((stop) => ({
-		...stop,
-		position: (stop.position - min) / range
-	}));
+function clampIndex(index, length) {
+	return Math.min(length - 1, Math.max(0, index));
 }
-function getDistanceToSide$1(center, width, height, side) {
-	if (side === "left") return center.x;
-	if (side === "right") return width - center.x;
-	if (side === "top") return center.y;
-	return height - center.y;
+function 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 getDistanceToCorner$1(center, corner) {
-	const dx = corner.x - center.x;
-	const dy = corner.y - center.y;
-	return Math.sqrt(dx * dx + dy * dy);
+function clampColor(value) {
+	return Math.min(1, Math.max(0, value));
 }
-function getCornerDeltas$1(center, width, height) {
+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$2(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$3(position.x),
+		y: resolveKeywordY$3(position.y)
+	};
+	return {
+		x: resolveLengthPercentage$4(position.x, 100),
+		y: resolveLengthPercentage$4(position.y, 100)
+	};
+}
+function resolveKeywordX$3(value) {
+	if (value === "left") return 0;
+	if (value === "right") return 100;
+	return 50;
+}
+function resolveKeywordY$3(value) {
+	if (value === "top") return 0;
+	if (value === "bottom") return 100;
+	return 50;
+}
+function resolveLengthPercentage$4(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$6(center, corner) {
+	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
+}
+function getCornerDeltas$5(center) {
+	return [
+		{
 			dx: -center.x,
 			dy: -center.y
 		},
 		{
-			dx: width - center.x,
+			dx: 100 - center.x,
 			dy: -center.y
 		},
 		{
 			dx: -center.x,
-			dy: height - center.y
+			dy: 100 - center.y
 		},
 		{
-			dx: width - center.x,
-			dy: height - center.y
+			dx: 100 - center.x,
+			dy: 100 - center.y
 		}
 	];
 }
-function scaleEllipseRadiiToCorner$1(radiusX, radiusY, dx, dy) {
+function scaleDiamondRadiiToCorner$3(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
 	};
 }
-var ModuleTransformerRadialGradientToCanvas = class {
-	target = "canvas-2d";
-	gradientType = "radial-gradient";
-	to(input) {
-		const gradient = input;
-		return { draw: (ctx, width, height) => {
-			const center = this._resolveCenter(gradient.config.position, width, height);
-			const radii = this._resolveRadialRadii(gradient.config.size, gradient.config.shape, center, width, height);
-			const maxVisibleT = getMaxVisibleRadialT(center, radii, width, height);
-			const baseStops = resolveRenderableGradientStops(gradient, RADIAL_GRADIENT_SAMPLE_COUNT);
-			const { min, max, stops } = getStopRange$1(gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
-			let normalizedStops = stops;
-			let innerFactor = 0;
-			let outerFactor = gradient.isRepeating ? maxVisibleT : 1;
-			if (gradient.isRepeating) normalizedStops = normalizeStops$2(stops, 0, maxVisibleT);
-			else if (min < 0 || max > 1) {
-				normalizedStops = normalizeStops$2(stops, min, max);
-				innerFactor = min;
-				outerFactor = max;
-			}
-			if (gradient.config.shape === "circle") {
-				const baseRadius = radii.x;
-				const innerRadius = Math.max(0, baseRadius * innerFactor);
-				const outerRadius = Math.max(innerRadius + 1e-4, baseRadius * outerFactor);
-				const g = ctx.createRadialGradient(center.x, center.y, innerRadius, center.x, center.y, outerRadius);
-				for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor(stop.value));
-				ctx.fillStyle = g;
-				ctx.fillRect(0, 0, width, height);
-				return;
-			}
-			const outerRadius = Math.max(radii.x, radii.y);
-			const scaleX = radii.x / outerRadius;
-			const scaleY = radii.y / outerRadius;
-			const innerRadius = Math.max(0, outerRadius * innerFactor);
-			const scaledOuterRadius = Math.max(innerRadius + 1e-4, outerRadius * outerFactor);
-			ctx.save();
-			ctx.translate(center.x, center.y);
-			ctx.scale(scaleX, scaleY);
-			const g = ctx.createRadialGradient(0, 0, innerRadius, 0, 0, scaledOuterRadius);
-			for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor(stop.value));
-			ctx.fillStyle = g;
-			const drawRadius = scaledOuterRadius + 2;
-			ctx.fillRect(-drawRadius / scaleX * 2, -drawRadius / scaleY * 2, drawRadius / scaleX * 4, drawRadius / scaleY * 4);
-			ctx.restore();
-		} };
-	}
-	_resolveCenter(position, width, height) {
-		if (position.kind === "keywords") return {
-			x: this._resolveKeywordX(position.x, width),
-			y: this._resolveKeywordY(position.y, height)
-		};
+function getMaxVisibleDiamondT$3(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$2(size, shape, center) {
+	if (size.kind === "explicit") {
+		const radiusX = resolveLengthPercentage$4(size.x, 100);
+		const radiusY = size.y ? resolveLengthPercentage$4(size.y, 100) : radiusX;
 		return {
-			x: this._resolve(position.x, width),
-			y: this._resolve(position.y, height)
+			x: Math.max(radiusX, 1e-4),
+			y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
 		};
 	}
-	_resolveKeywordX(value, width) {
-		if (value === "left") return 0;
-		if (value === "center") return width / 2;
-		return width;
-	}
-	_resolveKeywordY(value, height) {
-		if (value === "top") return 0;
-		if (value === "center") return height / 2;
-		return height;
-	}
-	_resolveRadialRadii(size, shape, center, width, height) {
-		if (size.kind === "explicit") {
-			const radiusX = this._resolve(size.x, width);
-			const radiusY = size.y ? this._resolve(size.y, height) : radiusX;
+	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$6(center, corner));
+		if (size.value === "closest-side") {
+			const radius = Math.max(Math.min(left, right, top, bottom), 1e-4);
 			return {
-				x: Math.max(radiusX, 1e-4),
-				y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+				x: radius,
+				y: radius
 			};
 		}
-		const left = getDistanceToSide$1(center, width, height, "left");
-		const right = getDistanceToSide$1(center, width, height, "right");
-		const top = getDistanceToSide$1(center, width, height, "top");
-		const bottom = getDistanceToSide$1(center, width, height, "bottom");
-		if (shape === "circle") {
-			const cornerDistances = [
-				{
-					x: 0,
-					y: 0
-				},
-				{
-					x: width,
-					y: 0
-				},
-				{
-					x: 0,
-					y: height
-				},
-				{
-					x: width,
-					y: height
-				}
-			].map((corner) => getDistanceToCorner$1(center, corner));
-			if (size.value === "closest-side") {
-				const radius = Math.min(left, right, top, bottom);
-				return {
-					x: radius,
-					y: radius
-				};
-			}
-			if (size.value === "farthest-side") {
-				const radius = Math.max(left, right, top, bottom);
-				return {
-					x: radius,
-					y: radius
-				};
-			}
-			if (size.value === "closest-corner") {
-				const radius = Math.min(...cornerDistances);
-				return {
-					x: radius,
-					y: radius
-				};
-			}
-			const radius = Math.max(...cornerDistances);
+		if (size.value === "farthest-side") {
+			const radius = Math.max(Math.max(left, right, top, bottom), 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)
+		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 corners = getCornerDeltas$1(center, width, height);
-		if (size.value === "closest-corner") return corners.map((corner) => scaleEllipseRadiiToCorner$1(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => {
-			const closestArea = closest.x * closest.y;
-			return current.x * current.y < closestArea ? current : closest;
-		});
-		return corners.map((corner) => scaleEllipseRadiiToCorner$1(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => {
-			const farthestArea = farthest.x * farthest.y;
-			return current.x * current.y > farthestArea ? current : farthest;
-		});
 	}
-	_resolve(value, size) {
-		if (value.kind === "percent") return value.value / 100 * size;
-		if (value.unit === "px") return value.value;
-		return value.value;
+	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$5(center);
+	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$3(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+	return corners.map((corner) => scaleDiamondRadiiToCorner$3(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
+}
+function formatPoint$1(value) {
+	return Number(value.toFixed(3)).toString();
+}
+function buildDiamondPolygon$1(center, radii, position) {
+	const x = radii.x * position;
+	const y = radii.y * position;
+	return [
+		`${formatPoint$1(center.x)} ${formatPoint$1(center.y - y)}`,
+		`${formatPoint$1(center.x + x)} ${formatPoint$1(center.y)}`,
+		`${formatPoint$1(center.x)} ${formatPoint$1(center.y + y)}`,
+		`${formatPoint$1(center.x - x)} ${formatPoint$1(center.y)}`
+	].join(" ");
+}
+function encodeSvgDataUrl$2(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$2(input.config.size, input.config.shape, center);
+		const maxVisibleT = getMaxVisibleDiamondT$3(center, radii);
+		const maxT = input.isRepeating ? maxVisibleT : 1;
+		const baseStops = resolveRenderableGradientStops(input, DIAMOND_SAMPLE_COUNT);
+		const stops = getColorStops$2(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$1(center, radii, position);
+			polygons.push(`<polygon points="${points}" fill="${color}"/>`);
+		}
+		return encodeSvgDataUrl$2([
+			"<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/canvas/ModuleTransformerConicGradientToCanvas.ts
-const CONIC_GRADIENT_SAMPLE_COUNT = 128;
-const toRgb$3 = converter("rgb");
-var ModuleTransformerConicGradientToCanvas = class {
-	target = "canvas-2d";
+//#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$3 = 24;
+function formatRgba$1(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$1(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$3 : 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$1(color)}"/>`);
+		}
+		return encodeSvgDataUrl$1([
+			`<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$8 = converter("rgb");
+function toCanvasColor$2(input) {
+	const color = toRgb$8(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 imageData = ctx.createImageData(width, height);
-			const data = imageData.data;
-			const { x: cx, y: cy } = this._resolvePosition(gradient.config.position, width, height);
-			const from = this._toRad(gradient.config.from);
-			const renderStops = resolveRenderableGradientStops(gradient, CONIC_GRADIENT_SAMPLE_COUNT);
-			const stops = this._normalizeStops(renderStops);
-			if (stops.length === 0) {
-				ctx.putImageData(imageData, 0, 0);
-				return;
+			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);
 			}
-			for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
-				const dx = x - cx;
-				const dy = y - cy;
-				let angle = Math.atan2(dy, dx) + Math.PI / 2 - from;
-				while (angle < 0) angle += Math.PI * 2;
-				while (angle >= Math.PI * 2) angle -= Math.PI * 2;
-				const t = angle / (Math.PI * 2);
-				const color = this._sampleColor(stops, t);
-				const index = (y * width + x) * 4;
-				data[index] = color.r;
-				data[index + 1] = color.g;
-				data[index + 2] = color.b;
-				data[index + 3] = color.a;
+			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$7 = converter("rgb");
+const RADIAL_GRADIENT_SAMPLE_COUNT = 128;
+function toCanvasColor$1(input) {
+	const color = toRgb$7(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return formatRgb(color);
+}
+function getStopRange$1(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$3(stops, min, max) {
+	const range = max - min || 1;
+	return stops.map((stop) => ({
+		...stop,
+		position: (stop.position - min) / range
+	}));
+}
+function getDistanceToSide$1(center, width, height, side) {
+	if (side === "left") return center.x;
+	if (side === "right") return width - center.x;
+	if (side === "top") return center.y;
+	return height - center.y;
+}
+function getDistanceToCorner$5(center, corner) {
+	const dx = corner.x - center.x;
+	const dy = corner.y - center.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function getCornerDeltas$4(center, width, height) {
+	return [
+		{
+			dx: -center.x,
+			dy: -center.y
+		},
+		{
+			dx: width - center.x,
+			dy: -center.y
+		},
+		{
+			dx: -center.x,
+			dy: height - center.y
+		},
+		{
+			dx: width - center.x,
+			dy: height - center.y
+		}
+	];
+}
+function scaleEllipseRadiiToCorner$1(radiusX, radiusY, dx, dy) {
+	const safeRadiusX = Math.max(radiusX, 1e-4);
+	const safeRadiusY = Math.max(radiusY, 1e-4);
+	const scale = Math.sqrt(dx * dx / (safeRadiusX * safeRadiusX) + dy * dy / (safeRadiusY * safeRadiusY));
+	return {
+		x: safeRadiusX * scale,
+		y: safeRadiusY * scale
+	};
+}
+var ModuleTransformerRadialGradientToCanvas = class {
+	target = "canvas-2d";
+	gradientType = "radial-gradient";
+	to(input) {
+		const gradient = input;
+		return { draw: (ctx, width, height) => {
+			const center = this._resolveCenter(gradient.config.position, width, height);
+			const radii = this._resolveRadialRadii(gradient.config.size, gradient.config.shape, center, width, height);
+			const maxVisibleT = getMaxVisibleRadialT(center, radii, width, height);
+			const baseStops = resolveRenderableGradientStops(gradient, RADIAL_GRADIENT_SAMPLE_COUNT);
+			const { min, max, stops } = getStopRange$1(gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
+			let normalizedStops = stops;
+			let innerFactor = 0;
+			let outerFactor = gradient.isRepeating ? maxVisibleT : 1;
+			if (gradient.isRepeating) normalizedStops = normalizeStops$3(stops, 0, maxVisibleT);
+			else if (min < 0 || max > 1) {
+				normalizedStops = normalizeStops$3(stops, min, max);
+				innerFactor = min;
+				outerFactor = max;
 			}
-			ctx.putImageData(imageData, 0, 0);
+			if (gradient.config.shape === "circle") {
+				const baseRadius = radii.x;
+				const innerRadius = Math.max(0, baseRadius * innerFactor);
+				const outerRadius = Math.max(innerRadius + 1e-4, baseRadius * outerFactor);
+				const g = ctx.createRadialGradient(center.x, center.y, innerRadius, center.x, center.y, outerRadius);
+				for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor$1(stop.value));
+				ctx.fillStyle = g;
+				ctx.fillRect(0, 0, width, height);
+				return;
+			}
+			const outerRadius = Math.max(radii.x, radii.y);
+			const scaleX = radii.x / outerRadius;
+			const scaleY = radii.y / outerRadius;
+			const innerRadius = Math.max(0, outerRadius * innerFactor);
+			const scaledOuterRadius = Math.max(innerRadius + 1e-4, outerRadius * outerFactor);
+			ctx.save();
+			ctx.translate(center.x, center.y);
+			ctx.scale(scaleX, scaleY);
+			const g = ctx.createRadialGradient(0, 0, innerRadius, 0, 0, scaledOuterRadius);
+			for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor$1(stop.value));
+			ctx.fillStyle = g;
+			const drawRadius = scaledOuterRadius + 2;
+			ctx.fillRect(-drawRadius / scaleX * 2, -drawRadius / scaleY * 2, drawRadius / scaleX * 4, drawRadius / scaleY * 4);
+			ctx.restore();
+		} };
+	}
+	_resolveCenter(position, width, height) {
+		if (position.kind === "keywords") return {
+			x: this._resolveKeywordX(position.x, width),
+			y: this._resolveKeywordY(position.y, height)
+		};
+		return {
+			x: this._resolve(position.x, width),
+			y: this._resolve(position.y, height)
+		};
+	}
+	_resolveKeywordX(value, width) {
+		if (value === "left") return 0;
+		if (value === "center") return width / 2;
+		return width;
+	}
+	_resolveKeywordY(value, height) {
+		if (value === "top") return 0;
+		if (value === "center") return height / 2;
+		return height;
+	}
+	_resolveRadialRadii(size, shape, center, width, height) {
+		if (size.kind === "explicit") {
+			const radiusX = this._resolve(size.x, width);
+			const radiusY = size.y ? this._resolve(size.y, height) : radiusX;
+			return {
+				x: Math.max(radiusX, 1e-4),
+				y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+			};
+		}
+		const left = getDistanceToSide$1(center, width, height, "left");
+		const right = getDistanceToSide$1(center, width, height, "right");
+		const top = getDistanceToSide$1(center, width, height, "top");
+		const bottom = getDistanceToSide$1(center, width, height, "bottom");
+		if (shape === "circle") {
+			const cornerDistances = [
+				{
+					x: 0,
+					y: 0
+				},
+				{
+					x: width,
+					y: 0
+				},
+				{
+					x: 0,
+					y: height
+				},
+				{
+					x: width,
+					y: height
+				}
+			].map((corner) => getDistanceToCorner$5(center, corner));
+			if (size.value === "closest-side") {
+				const radius = Math.min(left, right, top, bottom);
+				return {
+					x: radius,
+					y: radius
+				};
+			}
+			if (size.value === "farthest-side") {
+				const radius = Math.max(left, right, top, bottom);
+				return {
+					x: radius,
+					y: radius
+				};
+			}
+			if (size.value === "closest-corner") {
+				const radius = Math.min(...cornerDistances);
+				return {
+					x: radius,
+					y: radius
+				};
+			}
+			const radius = Math.max(...cornerDistances);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		const closestSideRadiusX = Math.min(left, right);
+		const closestSideRadiusY = Math.min(top, bottom);
+		const farthestSideRadiusX = Math.max(left, right);
+		const farthestSideRadiusY = Math.max(top, bottom);
+		if (size.value === "closest-side") return {
+			x: Math.max(closestSideRadiusX, 1e-4),
+			y: Math.max(closestSideRadiusY, 1e-4)
+		};
+		if (size.value === "farthest-side") return {
+			x: Math.max(farthestSideRadiusX, 1e-4),
+			y: Math.max(farthestSideRadiusY, 1e-4)
+		};
+		const corners = getCornerDeltas$4(center, width, height);
+		if (size.value === "closest-corner") return corners.map((corner) => scaleEllipseRadiiToCorner$1(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => {
+			const closestArea = closest.x * closest.y;
+			return current.x * current.y < closestArea ? current : closest;
+		});
+		return corners.map((corner) => scaleEllipseRadiiToCorner$1(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => {
+			const farthestArea = farthest.x * farthest.y;
+			return current.x * current.y > farthestArea ? current : farthest;
+		});
+	}
+	_resolve(value, size) {
+		if (value.kind === "percent") return value.value / 100 * size;
+		if (value.unit === "px") return value.value;
+		return value.value;
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/canvas/ModuleTransformerDiamondGradientToCanvas.ts
+const toRgb$6 = converter("rgb");
+const DIAMOND_GRADIENT_SAMPLE_COUNT = 128;
+const DIAMOND_COLOR_LOOKUP_SIZE = 1024;
+function toCanvasColor(input) {
+	const color = toRgb$6(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$1(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$2(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$4(center, corner) {
+	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
+}
+function getCornerDeltas$3(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$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
+	};
+}
+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$2(center, radii, width, height);
+			const baseStops = resolveRenderableGradientStops(gradient, DIAMOND_GRADIENT_SAMPLE_COUNT);
+			const colorLookup = buildColorLookup(getColorStops$1(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$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$3(center, width, height);
+		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);
+	}
+	_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 CONIC_GRADIENT_SAMPLE_COUNT = 128;
+const toRgb$5 = converter("rgb");
+var ModuleTransformerConicGradientToCanvas = class {
+	target = "canvas-2d";
+	gradientType = "conic-gradient";
+	to(input) {
+		const gradient = input;
+		return { draw: (ctx, width, height) => {
+			const imageData = ctx.createImageData(width, height);
+			const data = imageData.data;
+			const { x: cx, y: cy } = this._resolvePosition(gradient.config.position, width, height);
+			const from = this._toRad(gradient.config.from);
+			const renderStops = resolveRenderableGradientStops(gradient, CONIC_GRADIENT_SAMPLE_COUNT);
+			const stops = this._normalizeStops(renderStops);
+			if (stops.length === 0) {
+				ctx.putImageData(imageData, 0, 0);
+				return;
+			}
+			for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+				const dx = x - cx;
+				const dy = y - cy;
+				let angle = Math.atan2(dy, dx) + Math.PI / 2 - from;
+				while (angle < 0) angle += Math.PI * 2;
+				while (angle >= Math.PI * 2) angle -= Math.PI * 2;
+				const t = angle / (Math.PI * 2);
+				const color = this._sampleColor(stops, t);
+				const index = (y * width + x) * 4;
+				data[index] = color.r;
+				data[index + 1] = color.g;
+				data[index + 2] = color.b;
+				data[index + 3] = color.a;
+			}
+			ctx.putImageData(imageData, 0, 0);
+		} };
+	}
+	_resolvePosition(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)
+		};
+	}
+	_resolve(value, size) {
+		if (value.kind === "percent") return value.value / 100 * size;
+		if (value.unit === "px") return value.value;
+		return value.value;
+	}
+	_resolveKeywordX(value, width) {
+		if (value === "left") return 0;
+		if (value === "right") return width;
+		return width / 2;
+	}
+	_resolveKeywordY(value, height) {
+		if (value === "top") return 0;
+		if (value === "bottom") return height;
+		return height / 2;
+	}
+	_toRad(angle) {
+		if (angle.unit === "deg") return degToRad(angle.value);
+		if (angle.unit === "turn") return turnToRad(angle.value);
+		if (angle.unit === "grad") return gradToRad(angle.value);
+		return angle.value;
+	}
+	_normalizeStops(stops) {
+		return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).map((stop) => ({
+			position: this._clamp01(stop.position),
+			color: this._parseColor(stop.value)
+		})).sort((a, b) => a.position - b.position);
+	}
+	_sampleColor(stops, t) {
+		if (stops.length === 1) return stops[0].color;
+		const first = stops[0];
+		const extended = [...stops, {
+			...first,
+			position: first.position + 1
+		}];
+		let sampleT = t;
+		if (sampleT < first.position) sampleT += 1;
+		for (let i = 0; i < extended.length - 1; i++) {
+			const left = extended[i];
+			const right = extended[i + 1];
+			if (sampleT >= left.position && sampleT <= right.position) {
+				const span = right.position - left.position || 1;
+				const localT = (sampleT - left.position) / span;
+				return this._mixColor(left.color, right.color, localT);
+			}
+		}
+		return stops[stops.length - 1].color;
+	}
+	_mixColor(from, to, t) {
+		return {
+			r: Math.round(from.r + (to.r - from.r) * t),
+			g: Math.round(from.g + (to.g - from.g) * t),
+			b: Math.round(from.b + (to.b - from.b) * t),
+			a: Math.round(from.a + (to.a - from.a) * t)
+		};
+	}
+	_parseColor(input) {
+		const color = toRgb$5(input);
+		if (!color) throw new Error(`Failed to convert color: ${input}`);
+		return {
+			r: Math.round((color.r ?? 0) * 255),
+			g: Math.round((color.g ?? 0) * 255),
+			b: Math.round((color.b ?? 0) * 255),
+			a: Math.round((color.alpha ?? 1) * 255)
+		};
+	}
+	_clamp01(value) {
+		return Math.max(0, Math.min(1, value));
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/canvas/ModuleTransformerMeshGradientToCanvas.ts
+const BICUBIC_SUBDIVISIONS$2 = 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$2 : 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$4 = converter("rgb");
+const MAX_STOPS$3 = 128;
+function toWebGLColor$3(input) {
+	const color = toRgb$4(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return [
+		color.r ?? 0,
+		color.g ?? 0,
+		color.b ?? 0,
+		color.alpha ?? 1
+	];
+}
+function getStopRange(stops) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null);
+	if (!colorStops.length) return {
+		min: 0,
+		max: 1,
+		stops: []
+	};
+	return {
+		min: Math.min(...colorStops.map((stop) => stop.position)),
+		max: Math.max(...colorStops.map((stop) => stop.position)),
+		stops: colorStops
+	};
+}
+function normalizeStops$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$4(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$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);
+	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$3(stops) {
+	return stops.filter((stop) => stop.type === "color-stop").length;
+}
+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$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;
+	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$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$3 = converter("rgb");
+const MAX_STOPS$2 = 128;
+const TWO_PI$1 = Math.PI * 2;
+function toWebGLColor$2(input) {
+	const color = toRgb$3(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$3(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$1(angle) {
+	if (angle.unit === "rad") return angle.value;
+	if (angle.unit === "deg") return angle.value / 360 * TWO_PI$1;
+	if (angle.unit === "turn") return angle.value * TWO_PI$1;
+	if (angle.unit === "grad") return angle.value / 400 * TWO_PI$1;
+	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$3(position.x, width),
+		y: resolveLengthPercentage$3(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$1(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);
 		} };
 	}
-	_resolvePosition(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)
-		};
-	}
-	_resolve(value, size) {
-		if (value.kind === "percent") return value.value / 100 * size;
-		if (value.unit === "px") return value.value;
-		return value.value;
-	}
-	_resolveKeywordX(value, width) {
-		if (value === "left") return 0;
-		if (value === "right") return width;
-		return width / 2;
-	}
-	_resolveKeywordY(value, height) {
-		if (value === "top") return 0;
-		if (value === "bottom") return height;
-		return height / 2;
-	}
-	_toRad(angle) {
-		if (angle.unit === "deg") return degToRad(angle.value);
-		if (angle.unit === "turn") return turnToRad(angle.value);
-		if (angle.unit === "grad") return gradToRad(angle.value);
-		return angle.value;
-	}
-	_normalizeStops(stops) {
-		return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).map((stop) => ({
-			position: this._clamp01(stop.position),
-			color: this._parseColor(stop.value)
-		})).sort((a, b) => a.position - b.position);
-	}
-	_sampleColor(stops, t) {
-		if (stops.length === 1) return stops[0].color;
-		const first = stops[0];
-		const extended = [...stops, {
-			...first,
-			position: first.position + 1
-		}];
-		let sampleT = t;
-		if (sampleT < first.position) sampleT += 1;
-		for (let i = 0; i < extended.length - 1; i++) {
-			const left = extended[i];
-			const right = extended[i + 1];
-			if (sampleT >= left.position && sampleT <= right.position) {
-				const span = right.position - left.position || 1;
-				const localT = (sampleT - left.position) / span;
-				return this._mixColor(left.color, right.color, localT);
-			}
-		}
-		return stops[stops.length - 1].color;
-	}
-	_mixColor(from, to, t) {
-		return {
-			r: Math.round(from.r + (to.r - from.r) * t),
-			g: Math.round(from.g + (to.g - from.g) * t),
-			b: Math.round(from.b + (to.b - from.b) * t),
-			a: Math.round(from.a + (to.a - from.a) * t)
-		};
-	}
-	_parseColor(input) {
-		const color = toRgb$3(input);
-		if (!color) throw new Error(`Failed to convert color: ${input}`);
-		return {
-			r: Math.round((color.r ?? 0) * 255),
-			g: Math.round((color.g ?? 0) * 255),
-			b: Math.round((color.b ?? 0) * 255),
-			a: Math.round((color.alpha ?? 1) * 255)
-		};
-	}
-	_clamp01(value) {
-		return Math.max(0, Math.min(1, value));
-	}
 };
 //#endregion
-//#region src/gradient-transformer/modules/webgl/ModuleTransformerLinearGradientToWebgl.ts
+//#region src/gradient-transformer/modules/webgl/ModuleTransformerRadialGradientToWebgl.ts
 const toRgb$2 = converter("rgb");
-const MAX_STOPS$2 = 128;
-function toWebGLColor$2(input) {
+const MAX_STOPS$1 = 128;
+const MAX_REPEATING_RADIAL_T = 16;
+function toWebGLColor$1(input) {
 	const color = toRgb$2(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
@@ -2234,26 +4032,6 @@ function toWebGLColor$2(input) {
 		color.alpha ?? 1
 	];
 }
-function getStopRange(stops) {
-	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null);
-	if (!colorStops.length) return {
-		min: 0,
-		max: 1,
-		stops: []
-	};
-	return {
-		min: Math.min(...colorStops.map((stop) => stop.position)),
-		max: Math.max(...colorStops.map((stop) => stop.position)),
-		stops: colorStops
-	};
-}
-function normalizeStops$1(stops, min, max) {
-	const range = max - min || 1;
-	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).map((stop) => ({
-		...stop,
-		position: (stop.position - min) / range
-	}));
-}
 function createShader$2(gl, type, source) {
 	const shader = gl.createShader(type);
 	if (!shader) throw new Error("Failed to create WebGL shader.");
@@ -2281,15 +4059,15 @@ function createProgram$2(gl, vertexSource, fragmentSource) {
 	}
 	return program;
 }
-function getColorStopCount$2(stops) {
+function getColorStopCount$1(stops) {
 	return stops.filter((stop) => stop.type === "color-stop").length;
 }
-function getWebGLSampleCount$2(gradient, maxStops) {
-	const colorStopCount = getColorStopCount$2(gradient.stops);
+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$2(stops, position) {
+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;
@@ -2304,25 +4082,187 @@ function getColorAtPosition$2(stops, position) {
 			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;
+	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$3(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$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 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$3(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) => 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) => {
@@ -2344,16 +4284,17 @@ 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$2}];
-                    uniform vec4 u_colors[${MAX_STOPS$2}];
+                    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];
 
-                        for (int i = 0; i < ${MAX_STOPS$2 - 1}; i++) {
+                        for (int i = 0; i < ${MAX_STOPS$1 - 1}; i++) {
                             if (i >= u_stopCount - 1) {
                                 break;
                             }
@@ -2377,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);
                     }
@@ -2408,46 +4348,27 @@ 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$2(gradient, MAX_STOPS$2)));
-			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$2(normalizedStops, MAX_STOPS$2);
-			const positions = new Float32Array(MAX_STOPS$2);
-			const colors = new Float32Array(MAX_STOPS$2 * 4);
+			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) => {
-				const color = toWebGLColor$2(stop.value);
+				const color = toWebGLColor$1(stop.value);
 				positions[index] = stop.position;
 				colors[index * 4 + 0] = color[0];
 				colors[index * 4 + 1] = color[1];
 				colors[index * 4 + 2] = color[2];
 				colors[index * 4 + 3] = color[3];
 			});
-			gl.uniform2f(gl.getUniformLocation(program, "u_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);
@@ -2458,11 +4379,11 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 	}
 };
 //#endregion
-//#region src/gradient-transformer/modules/webgl/ModuleTransformerConicGradientToWebgl.ts
+//#region src/gradient-transformer/modules/webgl/ModuleTransformerDiamondGradientToWebgl.ts
 const toRgb$1 = converter("rgb");
-const MAX_STOPS$1 = 128;
-const TWO_PI = Math.PI * 2;
-function toWebGLColor$1(input) {
+const MAX_STOPS = 128;
+const MAX_REPEATING_DIAMOND_T = 16;
+function toWebGLColor(input) {
 	const color = toRgb$1(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
@@ -2499,17 +4420,17 @@ function createProgram$1(gl, vertexSource, fragmentSource) {
 	}
 	return program;
 }
-function getColorStopCount$1(stops) {
+function getColorStopCount(stops) {
 	return stops.filter((stop) => stop.type === "color-stop").length;
 }
-function getWebGLSampleCount$1(gradient, maxStops) {
-	const colorStopCount = getColorStopCount$1(gradient.stops);
+function getWebGLSampleCount(gradient, maxStops) {
+	const colorStopCount = getColorStopCount(gradient.stops);
 	const segmentCount = Math.max(1, colorStopCount - 1);
 	return Math.max(2, Math.floor((maxStops - 1) / segmentCount));
 }
-function getColorAtPosition$1(stops, position) {
+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;
@@ -2524,7 +4445,7 @@ function getColorAtPosition$1(stops, position) {
 	}
 	return lastStop.value;
 }
-function fitStopsToWebGLLimit$1(stops, maxStops) {
+function fitStopsToWebGLLimit(stops, maxStops) {
 	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
 	if (colorStops.length <= maxStops) return colorStops;
 	const sampledStops = [];
@@ -2532,57 +4453,176 @@ function fitStopsToWebGLLimit$1(stops, maxStops) {
 		const position = index / (maxStops - 1);
 		sampledStops.push({
 			type: "color-stop",
-			value: getColorAtPosition$1(colorStops, position),
+			value: getColorAtPosition(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 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 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 parseLengthPercentage(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 WebGL transformer: ${value.unit}`);
 }
-function resolveKeywordPositionX$1(x, width) {
+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$1(y, height) {
+function resolveKeywordPositionY(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) {
+function resolveDiamondCenter(position, width, height) {
 	if (position.kind === "keywords") return {
-		x: resolveKeywordPositionX$1(position.x, width),
-		y: resolveKeywordPositionY$1(position.y, height)
+		x: resolveKeywordPositionX(position.x, width),
+		y: resolveKeywordPositionY(position.y, height)
 	};
-	if (position.kind === "values") return {
-		x: resolveLengthPercentage(position.x, width),
-		y: resolveLengthPercentage(position.y, height)
+	return {
+		x: parseLengthPercentage(position.x, width),
+		y: parseLengthPercentage(position.y, height)
+	};
+}
+function getDistanceToCorner$2(center, corner) {
+	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
+}
+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 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
+	};
+}
+function resolveDiamondRadii$1(size, shape, center, width, height) {
+	if (size.kind === "explicit") {
+		const radiusX = parseLengthPercentage(size.x, width);
+		const radiusY = size.y ? parseLengthPercentage(size.y, height) : radiusX;
+		return {
+			x: Math.max(radiusX, 1e-4),
+			y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+		};
+	}
+	const left = 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)
 	};
-	return {
-		x: width / 2,
-		y: height / 2
+	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) => 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);
 }
-var ModuleTransformerConicGradientToCanvasWebGL = class {
+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)));
+}
+var ModuleTransformerDiamondGradientToCanvasWebGL = class {
 	target = "canvas-webgl";
-	gradientType = "conic-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");
@@ -2601,21 +4641,19 @@ var ModuleTransformerConicGradientToCanvasWebGL = class {
                 `, `
                     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 vec2 u_radius;
                     uniform int u_stopCount;
-                    uniform float u_positions[${MAX_STOPS$1}];
-                    uniform vec4 u_colors[${MAX_STOPS$1}];
+                    uniform float u_positions[${MAX_STOPS}];
+                    uniform vec4 u_colors[${MAX_STOPS}];
+                    uniform float u_tMax;
 
                     vec4 getGradientColor(float t) {
                         vec4 result = u_colors[0];
 
-                        for (int i = 0; i < ${MAX_STOPS$1 - 1}; i++) {
+                        for (int i = 0; i < ${MAX_STOPS - 1}; i++) {
                             if (i >= u_stopCount - 1) {
                                 break;
                             }
@@ -2640,11 +4678,11 @@ var ModuleTransformerConicGradientToCanvasWebGL = class {
 
                     void main() {
                         vec2 delta = v_uv - u_center;
+                        vec2 normalized = abs(delta) / max(u_radius, vec2(0.00001));
+                        float t = normalized.x + normalized.y;
 
-                        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;
+                        t = clamp(t, 0.0, u_tMax);
+                        t = t / max(u_tMax, 0.00001);
 
                         gl_FragColor = getGradientColor(t);
                     }
@@ -2669,12 +4707,18 @@ var ModuleTransformerConicGradientToCanvasWebGL = class {
 			const positionLocation = gl.getAttribLocation(program, "a_position");
 			gl.enableVertexAttribArray(positionLocation);
 			gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
-			const center = resolveConicCenter(gradient.config.position, width, height);
-			const limitedStops = fitStopsToWebGLLimit$1(resolveRenderableGradientStops(gradient, getWebGLSampleCount$1(gradient, MAX_STOPS$1)), MAX_STOPS$1);
-			const positions = new Float32Array(MAX_STOPS$1);
-			const colors = new Float32Array(MAX_STOPS$1 * 4);
+			const center = resolveDiamondCenter(gradient.config.position, width, height);
+			const radius = resolveDiamondRadii$1(gradient.config.size, gradient.config.shape, center, width, height);
+			const maxVisibleT = getMaxVisibleDiamondT$1(center, radius, width, height);
+			const baseStops = resolveRenderableGradientStops(gradient, getWebGLSampleCount(gradient, MAX_STOPS));
+			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);
+			const positions = new Float32Array(MAX_STOPS);
+			const colors = new Float32Array(MAX_STOPS * 4);
 			limitedStops.forEach((stop, index) => {
-				const color = toWebGLColor$1(stop.value);
+				const color = toWebGLColor(stop.value);
 				positions[index] = stop.position;
 				colors[index * 4 + 0] = color[0];
 				colors[index * 4 + 1] = color[1];
@@ -2682,7 +4726,8 @@ var ModuleTransformerConicGradientToCanvasWebGL = class {
 				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.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);
@@ -2693,20 +4738,8 @@ var ModuleTransformerConicGradientToCanvasWebGL = class {
 	}
 };
 //#endregion
-//#region src/gradient-transformer/modules/webgl/ModuleTransformerRadialGradientToWebgl.ts
-const toRgb = converter("rgb");
-const MAX_STOPS = 128;
-const MAX_REPEATING_RADIAL_T = 16;
-function toWebGLColor(input) {
-	const color = toRgb(input);
-	if (!color) throw new Error(`Failed to convert color: ${input}`);
-	return [
-		color.r ?? 0,
-		color.g ?? 0,
-		color.b ?? 0,
-		color.alpha ?? 1
-	];
-}
+//#region src/gradient-transformer/modules/webgl/ModuleTransformerMeshGradientToWebgl.ts
+const BICUBIC_SUBDIVISIONS$1 = 24;
 function createShader(gl, type, source) {
 	const shader = gl.createShader(type);
 	if (!shader) throw new Error("Failed to create WebGL shader.");
@@ -2734,139 +4767,503 @@ function createProgram(gl, vertexSource, fragmentSource) {
 	}
 	return program;
 }
-function getColorStopCount(stops) {
-	return stops.filter((stop) => stop.type === "color-stop").length;
+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 : 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);
+		} };
+	}
+};
+const toRgb = converter("rgb");
+function escapeXml(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+}
+function clamp01(value) {
+	return Math.min(1, Math.max(0, value));
+}
+function toPercent$1(value) {
+	return `${Number((value * 100).toFixed(3))}%`;
+}
+function formatPoint(value) {
+	return `${Number(value.toFixed(3))}%`;
+}
+function normalizeSvgStops(stops) {
+	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+}
+function parseSvgColor(input) {
+	const color = toRgb(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return {
+		r: Math.round((color.r ?? 0) * 255),
+		g: Math.round((color.g ?? 0) * 255),
+		b: Math.round((color.b ?? 0) * 255),
+		a: Math.round((color.alpha ?? 1) * 255)
+	};
+}
+function formatSvgColor(color) {
+	if (color.a >= 255) return `rgb(${color.r} ${color.g} ${color.b})`;
+	return `rgba(${color.r}, ${color.g}, ${color.b}, ${Number((color.a / 255).toFixed(4))})`;
+}
+function mixSvgColor(from, to, t) {
+	return {
+		r: Math.round(from.r + (to.r - from.r) * t),
+		g: Math.round(from.g + (to.g - from.g) * t),
+		b: Math.round(from.b + (to.b - from.b) * t),
+		a: Math.round(from.a + (to.a - from.a) * t)
+	};
+}
+function sampleSvgStops(stops, position) {
+	const colorStops = normalizeSvgStops(stops);
+	if (colorStops.length === 0) throw new Error("Cannot sample color from empty gradient stops.");
+	if (colorStops.length === 1) return parseSvgColor(colorStops[0].value);
+	const first = colorStops[0];
+	const extendedStops = [...colorStops, {
+		...first,
+		position: first.position + 1
+	}];
+	let samplePosition = position;
+	if (samplePosition < first.position) samplePosition += 1;
+	for (let index = 0; index < extendedStops.length - 1; index += 1) {
+		const current = extendedStops[index];
+		const next = extendedStops[index + 1];
+		if (samplePosition >= current.position && samplePosition <= next.position) {
+			const span = next.position - current.position || 1;
+			const localT = (samplePosition - current.position) / span;
+			return mixSvgColor(parseSvgColor(current.value), parseSvgColor(next.value), localT);
+		}
+	}
+	return parseSvgColor(colorStops[colorStops.length - 1].value);
+}
+function encodeSvgDataUrl(svg) {
+	return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function buildSvgStops(gradient) {
+	return normalizeSvgStops(resolveRenderableGradientStops(gradient, 128)).map((stop) => `<stop offset="${toPercent$1(clamp01(stop.position))}" stop-color="${escapeXml(stop.value)}"/>`).join("");
+}
+function buildSvgGradientResult(input) {
+	const defs = `<defs>${input.gradient}</defs>`;
+	return {
+		id: input.id,
+		href: `#${input.id}`,
+		url: `url(#${input.id})`,
+		type: input.type,
+		gradient: input.gradient,
+		defs,
+		svg: `<svg xmlns="http://www.w3.org/2000/svg">${defs}</svg>`
+	};
+}
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerLinearGradientToSvg.ts
+const DEFAULT_ID$4 = "gradiente-linear-gradient";
+function getLinearVector(angle) {
+	const dx = Math.sin(angle);
+	const dy = -Math.cos(angle);
+	const scale = Math.max(Math.abs(dx), Math.abs(dy), 1e-4);
+	const unitX = dx / scale;
+	const unitY = dy / scale;
+	return {
+		x1: 50 - unitX * 50,
+		y1: 50 - unitY * 50,
+		x2: 50 + unitX * 50,
+		y2: 50 + unitY * 50
+	};
+}
+var ModuleTransformerLinearGradientToSvg = class {
+	target = "svg";
+	gradientType = "linear-gradient";
+	to(input) {
+		if (!(input instanceof LinearGradient)) throw new Error("Expected LinearGradient");
+		const id = DEFAULT_ID$4;
+		const vector = getLinearVector(input.config.angle);
+		const stopsSvg = buildSvgStops(input);
+		return buildSvgGradientResult({
+			id,
+			type: "linearGradient",
+			gradient: [
+				`<linearGradient id="${id}" gradientUnits="objectBoundingBox" x1="${formatPoint(vector.x1)}" y1="${formatPoint(vector.y1)}" x2="${formatPoint(vector.x2)}" y2="${formatPoint(vector.y2)}">`,
+				stopsSvg,
+				"</linearGradient>"
+			].join("")
+		});
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerRadialGradientToSvg.ts
+const DEFAULT_ID$3 = "gradiente-radial-gradient";
+function resolveKeywordX$2(value) {
+	if (value === "left") return 0;
+	if (value === "right") return 100;
+	return 50;
+}
+function resolveKeywordY$2(value) {
+	if (value === "top") return 0;
+	if (value === "bottom") return 100;
+	return 50;
+}
+function resolveLengthPercentage$2(value) {
+	if (value.kind === "percent") return value.value;
+	if (value.unit === "px") return value.value;
+	return value.value;
+}
+function resolveCenter$2(position) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordX$2(position.x),
+		y: resolveKeywordY$2(position.y)
+	};
+	return {
+		x: resolveLengthPercentage$2(position.x),
+		y: resolveLengthPercentage$2(position.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 resolveRadii(size, shape, center) {
+	if (size.kind === "explicit") {
+		const radiusX = resolveLengthPercentage$2(size.x);
+		const radiusY = size.y ? resolveLengthPercentage$2(size.y) : 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$1(center, corner));
+		if (size.value === "closest-side") {
+			const radius = Math.min(left, right, top, bottom);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "farthest-side") {
+			const radius = Math.max(left, right, top, bottom);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "closest-corner") {
+			const radius = Math.min(...cornerDistances);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		const radius = Math.max(...cornerDistances);
+		return {
+			x: radius,
+			y: radius
+		};
+	}
+	if (size.value === "closest-side") return {
+		x: Math.min(left, right),
+		y: Math.min(top, bottom)
+	};
+	if (size.value === "farthest-side") return {
+		x: Math.max(left, right),
+		y: Math.max(top, bottom)
+	};
+	return {
+		x: Math.max(left, right),
+		y: Math.max(top, bottom)
+	};
+}
+var ModuleTransformerRadialGradientToSvg = class {
+	target = "svg";
+	gradientType = "radial-gradient";
+	to(input) {
+		if (!(input instanceof RadialGradient)) throw new Error("Expected RadialGradient");
+		const id = DEFAULT_ID$3;
+		const center = resolveCenter$2(input.config.position);
+		const radii = resolveRadii(input.config.size, input.config.shape, center);
+		const radius = Math.max(radii.x, radii.y);
+		const scaleX = radii.x / radius;
+		const scaleY = radii.y / radius;
+		const transform = input.config.shape === "ellipse" ? ` gradientTransform="translate(${center.x} ${center.y}) scale(${scaleX} ${scaleY}) translate(${-center.x} ${-center.y})"` : "";
+		return buildSvgGradientResult({
+			id,
+			type: "radialGradient",
+			gradient: [
+				`<radialGradient id="${id}" gradientUnits="objectBoundingBox" cx="${formatPoint(center.x)}" cy="${formatPoint(center.y)}" r="${formatPoint(radius)}"${transform}>`,
+				buildSvgStops(input),
+				"</radialGradient>"
+			].join("")
+		});
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerConicGradientToSvg.ts
+const DEFAULT_ID$2 = "gradiente-conic-gradient";
+const TWO_PI = Math.PI * 2;
+const VIEW_BOX_SIZE$1 = 100;
+const CONIC_SEGMENT_COUNT = 720;
+function resolveKeywordX$1(value, size) {
+	if (value === "left") return 0;
+	if (value === "right") return size;
+	return size / 2;
+}
+function resolveKeywordY$1(value, size) {
+	if (value === "top") return 0;
+	if (value === "bottom") return size;
+	return size / 2;
+}
+function resolveLengthPercentage$1(value, size) {
+	if (value.kind === "percent") return value.value / 100 * size;
+	if (value.unit === "px") return value.value;
+	return value.value;
+}
+function resolveCenter$1(position, size) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordX$1(position.x, size),
+		y: resolveKeywordY$1(position.y, size)
+	};
+	return {
+		x: resolveLengthPercentage$1(position.x, size),
+		y: resolveLengthPercentage$1(position.y, size)
+	};
+}
+function resolveAngleToRadians(angle) {
+	if (angle.unit === "deg") return degToRad(angle.value);
+	if (angle.unit === "turn") return turnToRad(angle.value);
+	if (angle.unit === "grad") return gradToRad(angle.value);
+	return angle.value;
+}
+function getDistance(from, to) {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function getCoverRadius(center) {
+	return Math.max(...[
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: VIEW_BOX_SIZE$1,
+			y: 0
+		},
+		{
+			x: 0,
+			y: VIEW_BOX_SIZE$1
+		},
+		{
+			x: VIEW_BOX_SIZE$1,
+			y: VIEW_BOX_SIZE$1
+		}
+	].map((corner) => getDistance(center, corner))) * 1.02;
+}
+function pointOnConicRay(center, radius, angle) {
+	return {
+		x: center.x + Math.sin(angle) * radius,
+		y: center.y - Math.cos(angle) * radius
+	};
 }
-function getWebGLSampleCount(gradient, maxStops) {
-	const colorStopCount = getColorStopCount(gradient.stops);
-	const segmentCount = Math.max(1, colorStopCount - 1);
-	return Math.max(2, Math.floor((maxStops - 1) / segmentCount));
+function formatNumber$2(value) {
+	return `${Number(value.toFixed(3))}`;
 }
-function getColorAtPosition(stops, position) {
-	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
-	if (colorStops.length === 0) throw new Error("Cannot sample color from empty gradient stops.");
-	if (position <= colorStops[0].position) return colorStops[0].value;
-	const lastStop = colorStops[colorStops.length - 1];
-	if (position >= lastStop.position) return lastStop.value;
-	for (let index = 0; index < colorStops.length - 1; index += 1) {
-		const current = colorStops[index];
-		const next = colorStops[index + 1];
-		if (position >= current.position && position <= next.position) {
-			const range = next.position - current.position || 1;
-			const localT = (position - current.position) / range;
-			return formatRgb(interpolate([current.value, next.value], "rgb")(localT));
+var ModuleTransformerConicGradientToSvg = class {
+	target = "svg";
+	gradientType = "conic-gradient";
+	to(input) {
+		if (!(input instanceof ConicGradient)) throw new Error("Expected ConicGradient");
+		const id = DEFAULT_ID$2;
+		const center = resolveCenter$1(input.config.position, VIEW_BOX_SIZE$1);
+		const from = resolveAngleToRadians(input.config.from);
+		const stops = resolveRenderableGradientStops(input, 128);
+		const radius = getCoverRadius(center);
+		const paths = [];
+		for (let index = 0; index < CONIC_SEGMENT_COUNT; index += 1) {
+			const startT = index / CONIC_SEGMENT_COUNT;
+			const endT = (index + 1) / CONIC_SEGMENT_COUNT;
+			const color = formatSvgColor(sampleSvgStops(stops, startT + (endT - startT) / 2));
+			const start = pointOnConicRay(center, radius, startT * TWO_PI + from);
+			const end = pointOnConicRay(center, radius, endT * TWO_PI + from);
+			paths.push([
+				`<path d="M ${formatNumber$2(center.x)} ${formatNumber$2(center.y)}`,
+				`L ${formatNumber$2(start.x)} ${formatNumber$2(start.y)}`,
+				`A ${formatNumber$2(radius)} ${formatNumber$2(radius)} 0 0 1 ${formatNumber$2(end.x)} ${formatNumber$2(end.y)}`,
+				`Z" fill="${color}" stroke="${color}" stroke-width="0.25"/>`
+			].join(" "));
 		}
-	}
-	return lastStop.value;
-}
-function fitStopsToWebGLLimit(stops, maxStops) {
-	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
-	if (colorStops.length <= maxStops) return colorStops;
-	const sampledStops = [];
-	for (let index = 0; index < maxStops; index += 1) {
-		const position = index / (maxStops - 1);
-		sampledStops.push({
-			type: "color-stop",
-			value: getColorAtPosition(colorStops, position),
-			position
+		const vectorSvg = [
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW_BOX_SIZE$1} ${VIEW_BOX_SIZE$1}" width="${VIEW_BOX_SIZE$1}" height="${VIEW_BOX_SIZE$1}">`,
+			...paths,
+			"</svg>"
+		].join("");
+		return buildSvgGradientResult({
+			id,
+			type: "pattern",
+			gradient: [
+				`<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 ${VIEW_BOX_SIZE$1} ${VIEW_BOX_SIZE$1}" preserveAspectRatio="none">`,
+				`<image width="${VIEW_BOX_SIZE$1}" height="${VIEW_BOX_SIZE$1}" href="${escapeXml(encodeSvgDataUrl(vectorSvg))}"/>`,
+				"</pattern>"
+			].join("")
 		});
 	}
-	return sampledStops;
-}
-function parseLengthPercentage(value, reference) {
-	if (value.kind === "percent") return value.value / 100 * reference;
-	if (value.kind === "length") {
-		if (value.unit === "px") return value.value;
-		throw new Error(`Unsupported gradient length unit for WebGL radial gradient: ${value.unit}`);
-	}
-	return value;
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerDiamondGradientToSvg.ts
+const DEFAULT_ID$1 = "gradiente-diamond-gradient";
+const VIEW_BOX_SIZE = 100;
+function resolveKeywordX(value) {
+	if (value === "left") return 0;
+	if (value === "right") return VIEW_BOX_SIZE;
+	return VIEW_BOX_SIZE / 2;
 }
-function resolveKeywordPositionX(x, width) {
-	if (x === "left") return 0;
-	if (x === "center") return width / 2;
-	if (x === "right") return width;
-	return width / 2;
+function resolveKeywordY(value) {
+	if (value === "top") return 0;
+	if (value === "bottom") return VIEW_BOX_SIZE;
+	return VIEW_BOX_SIZE / 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 resolveLengthPercentage(value) {
+	if (value.kind === "percent") return value.value / 100 * VIEW_BOX_SIZE;
+	if (value.unit === "px") return value.value;
+	throw new Error(`Unsupported diamond-gradient length unit for SVG transformer: ${value.unit}`);
 }
-function resolveRadialCenter(position, width, height) {
+function resolveCenter(position) {
 	if (position.kind === "keywords") return {
-		x: resolveKeywordPositionX(position.x, width),
-		y: resolveKeywordPositionY(position.y, height)
-	};
-	if (position.kind === "values") return {
-		x: parseLengthPercentage(position.x, width),
-		y: parseLengthPercentage(position.y, height)
+		x: resolveKeywordX(position.x),
+		y: resolveKeywordY(position.y)
 	};
 	return {
-		x: width / 2,
-		y: height / 2
+		x: resolveLengthPercentage(position.x),
+		y: resolveLengthPercentage(position.y)
 	};
 }
-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) {
+function getCornerDeltas(center) {
 	return [
 		{
 			dx: -center.x,
 			dy: -center.y
 		},
 		{
-			dx: width - center.x,
+			dx: VIEW_BOX_SIZE - center.x,
 			dy: -center.y
 		},
 		{
 			dx: -center.x,
-			dy: height - center.y
+			dy: VIEW_BOX_SIZE - center.y
 		},
 		{
-			dx: width - center.x,
-			dy: height - center.y
+			dx: VIEW_BOX_SIZE - center.x,
+			dy: VIEW_BOX_SIZE - center.y
 		}
 	];
 }
-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) {
 	if (size.kind === "explicit") {
-		const radiusX = parseLengthPercentage(size.x, width);
-		const radiusY = size.y ? parseLengthPercentage(size.y, height) : radiusX;
+		const radiusX = resolveLengthPercentage(size.x);
+		const radiusY = size.y ? resolveLengthPercentage(size.y) : 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");
+	const left = center.x;
+	const right = VIEW_BOX_SIZE - center.x;
+	const top = center.y;
+	const bottom = VIEW_BOX_SIZE - center.y;
 	if (shape === "circle") {
 		const cornerDistances = [
 			{
@@ -2874,16 +5271,16 @@ function resolveRadialRadii(size, shape, center, width, height) {
 				y: 0
 			},
 			{
-				x: width,
+				x: VIEW_BOX_SIZE,
 				y: 0
 			},
 			{
 				x: 0,
-				y: height
+				y: VIEW_BOX_SIZE
 			},
 			{
-				x: width,
-				y: height
+				x: VIEW_BOX_SIZE,
+				y: VIEW_BOX_SIZE
 			}
 		].map((corner) => getDistanceToCorner(center, corner));
 		if (size.value === "closest-side") {
@@ -2925,132 +5322,139 @@ function resolveRadialRadii(size, shape, center, width, height) {
 		x: Math.max(farthestSideRadiusX, 1e-4),
 		y: Math.max(farthestSideRadiusY, 1e-4)
 	};
-	const corners = getCornerDeltas(center, width, height);
-	if (size.value === "closest-corner") return corners.map((corner) => scaleEllipseRadiiToCorner(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => {
-		const closestArea = closest.x * closest.y;
-		return current.x * current.y < closestArea ? current : closest;
-	});
-	return corners.map((corner) => scaleEllipseRadiiToCorner(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => {
-		const farthestArea = farthest.x * farthest.y;
-		return current.x * current.y > farthestArea ? current : farthest;
-	});
+	const corners = getCornerDeltas(center);
+	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 {
-	target = "canvas-webgl";
-	gradientType = "radial-gradient";
+function getMaxVisibleDiamondT(center, radii) {
+	return Math.max(...[
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: VIEW_BOX_SIZE,
+			y: 0
+		},
+		{
+			x: 0,
+			y: VIEW_BOX_SIZE
+		},
+		{
+			x: VIEW_BOX_SIZE,
+			y: VIEW_BOX_SIZE
+		}
+	].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 getColorStops(stops) {
+	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+}
+function formatNumber$1(value) {
+	return `${Number(value.toFixed(3))}`;
+}
+function buildDiamondPolygon(center, radii, position) {
+	const x = radii.x * position;
+	const y = radii.y * position;
+	return [
+		`${formatNumber$1(center.x)} ${formatNumber$1(center.y - y)}`,
+		`${formatNumber$1(center.x + x)} ${formatNumber$1(center.y)}`,
+		`${formatNumber$1(center.x)} ${formatNumber$1(center.y + y)}`,
+		`${formatNumber$1(center.x - x)} ${formatNumber$1(center.y)}`
+	].join(" ");
+}
+var ModuleTransformerDiamondGradientToSvg = class {
+	target = "svg";
+	gradientType = "diamond-gradient";
 	to(input) {
-		const gradient = input;
-		return { draw: (canvas, width, height) => {
-			const gl = canvas.getContext("webgl");
-			if (!gl) throw new Error("WebGL is not supported.");
-			canvas.width = width;
-			canvas.height = height;
-			gl.viewport(0, 0, width, height);
-			const program = createProgram(gl, `
-                    attribute vec2 a_position;
-                    varying vec2 v_uv;
-
-                    void main() {
-                        v_uv = a_position * 0.5 + 0.5;
-                        gl_Position = vec4(a_position, 0.0, 1.0);
-                    }
-                `, `
-                    precision mediump float;
-
-                    varying vec2 v_uv;
-
-                    uniform vec2 u_center;
-                    uniform vec2 u_radius;
-                    uniform int u_stopCount;
-                    uniform float u_positions[${MAX_STOPS}];
-                    uniform vec4 u_colors[${MAX_STOPS}];
-                    uniform float u_tMax;
-
-                    vec4 getGradientColor(float t) {
-                        vec4 result = u_colors[0];
-
-                        for (int i = 0; i < ${MAX_STOPS - 1}; i++) {
-                            if (i >= u_stopCount - 1) {
-                                break;
-                            }
-
-                            float currentPosition = u_positions[i];
-                            float nextPosition = u_positions[i + 1];
-
-                            if (t <= currentPosition) {
-                                return u_colors[i];
-                            }
-
-                            if (t >= currentPosition && t <= nextPosition) {
-                                float localT = (t - currentPosition) / max(nextPosition - currentPosition, 0.00001);
-                                return mix(u_colors[i], u_colors[i + 1], localT);
-                            }
-
-                            result = u_colors[i + 1];
-                        }
-
-                        return result;
-                    }
-
-                    void main() {
-                        vec2 delta = v_uv - u_center;
-                        vec2 normalized = delta / max(u_radius, vec2(0.00001));
-                        float t = length(normalized);
-
-                        t = clamp(t, 0.0, u_tMax);
-                        t = t / max(u_tMax, 0.00001);
-
-                        gl_FragColor = getGradientColor(t);
-                    }
-                `);
-			gl.useProgram(program);
-			const positionBuffer = gl.createBuffer();
-			gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-				-1,
-				-1,
-				1,
-				-1,
-				-1,
-				1,
-				-1,
-				1,
-				1,
-				-1,
-				1,
-				1
-			]), gl.STATIC_DRAW);
-			const positionLocation = gl.getAttribLocation(program, "a_position");
-			gl.enableVertexAttribArray(positionLocation);
-			gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
-			const center = resolveRadialCenter(gradient.config.position, width, height);
-			const radius = resolveRadialRadii(gradient.config.size, gradient.config.shape, center, width, height);
-			const maxVisibleT = getMaxVisibleRadialT(center, radius, width, height);
-			const baseStops = resolveRenderableGradientStops(gradient, getWebGLSampleCount(gradient, MAX_STOPS));
-			const repeatMaxT = Math.min(maxVisibleT, MAX_REPEATING_RADIAL_T);
-			const maxT = gradient.isRepeating ? repeatMaxT : 1;
-			const renderStops = gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, repeatMaxT) : baseStops;
-			const limitedStops = fitStopsToWebGLLimit(gradient.isRepeating ? normalizeStops(renderStops, 0, repeatMaxT) : renderStops, MAX_STOPS);
-			const positions = new Float32Array(MAX_STOPS);
-			const colors = new Float32Array(MAX_STOPS * 4);
-			limitedStops.forEach((stop, index) => {
-				const color = toWebGLColor(stop.value);
-				positions[index] = stop.position;
-				colors[index * 4 + 0] = color[0];
-				colors[index * 4 + 1] = color[1];
-				colors[index * 4 + 2] = color[2];
-				colors[index * 4 + 3] = color[3];
-			});
-			gl.uniform2f(gl.getUniformLocation(program, "u_center"), center.x / width, 1 - center.y / height);
-			gl.uniform2f(gl.getUniformLocation(program, "u_radius"), radius.x / width, radius.y / height);
-			gl.uniform1f(gl.getUniformLocation(program, "u_tMax"), maxT);
-			gl.uniform1i(gl.getUniformLocation(program, "u_stopCount"), limitedStops.length);
-			gl.uniform1fv(gl.getUniformLocation(program, "u_positions"), positions);
-			gl.uniform4fv(gl.getUniformLocation(program, "u_colors"), colors);
-			gl.clearColor(0, 0, 0, 0);
-			gl.clear(gl.COLOR_BUFFER_BIT);
-			gl.drawArrays(gl.TRIANGLES, 0, 6);
-		} };
+		if (!(input instanceof DiamondGradient)) throw new Error("Expected DiamondGradient");
+		const id = DEFAULT_ID$1;
+		const center = resolveCenter(input.config.position);
+		const radii = resolveDiamondRadii(input.config.size, input.config.shape, center);
+		const maxVisibleT = getMaxVisibleDiamondT(center, radii);
+		const maxT = input.isRepeating ? maxVisibleT : 1;
+		const baseStops = resolveRenderableGradientStops(input, 128);
+		const stops = getColorStops(input.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
+		const outerColor = formatSvgColor(sampleSvgStops(stops, maxT));
+		const sampleCount = Math.max(128, Math.ceil(128 * maxT));
+		const polygons = [];
+		for (let index = sampleCount; index >= 0; index -= 1) {
+			const position = index / sampleCount * maxT;
+			const color = formatSvgColor(sampleSvgStops(stops, position));
+			const points = buildDiamondPolygon(center, radii, position);
+			polygons.push(`<polygon points="${points}" fill="${color}"/>`);
+		}
+		const vectorSvg = [
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}" width="${VIEW_BOX_SIZE}" height="${VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+			`<rect width="${VIEW_BOX_SIZE}" height="${VIEW_BOX_SIZE}" fill="${outerColor}"/>`,
+			...polygons,
+			"</svg>"
+		].join("");
+		return buildSvgGradientResult({
+			id,
+			type: "pattern",
+			gradient: [
+				`<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+				`<image width="${VIEW_BOX_SIZE}" height="${VIEW_BOX_SIZE}" href="${escapeXml(encodeSvgDataUrl(vectorSvg))}"/>`,
+				"</pattern>"
+			].join("")
+		});
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerMeshGradientToSvg.ts
+const DEFAULT_ID = "gradiente-mesh-gradient";
+const MESH_VIEW_BOX_SIZE = 100;
+const BILINEAR_SUBDIVISIONS = 32;
+const BICUBIC_SUBDIVISIONS = 40;
+function formatRgba(color) {
+	return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${Number(color[3].toFixed(4))})`;
+}
+function getTriangleColor(a, b, c) {
+	return [
+		Math.round((a.color[0] + b.color[0] + c.color[0]) / 3 * 255),
+		Math.round((a.color[1] + b.color[1] + c.color[1]) / 3 * 255),
+		Math.round((a.color[2] + b.color[2] + c.color[2]) / 3 * 255),
+		(a.color[3] + b.color[3] + c.color[3]) / 3
+	];
+}
+function formatNumber(value) {
+	return `${Number(value.toFixed(3))}`;
+}
+function triangleToPolygon(triangle) {
+	const [a, b, c] = triangle;
+	const color = formatRgba(getTriangleColor(a, b, c));
+	return `<polygon points="${[
+		`${formatNumber(a.x)} ${formatNumber(a.y)}`,
+		`${formatNumber(b.x)} ${formatNumber(b.y)}`,
+		`${formatNumber(c.x)} ${formatNumber(c.y)}`
+	].join(" ")}" fill="${color}" stroke="${color}" stroke-width="0.08"/>`;
+}
+var ModuleTransformerMeshGradientToSvg = class {
+	target = "svg";
+	gradientType = "mesh-gradient";
+	to(input) {
+		if (!(input instanceof MeshGradient)) throw new Error("Expected MeshGradient");
+		const id = DEFAULT_ID;
+		const vertexMap = buildMeshVertexMap(input, MESH_VIEW_BOX_SIZE, MESH_VIEW_BOX_SIZE);
+		const grid = buildRegularMeshGrid(input, vertexMap);
+		const subdivisions = input.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS : BILINEAR_SUBDIVISIONS;
+		const patchTriangles = input.patches.flatMap((patch) => buildPatchTriangles(input, grid, patch, vertexMap, subdivisions));
+		const edgeTriangles = buildMeshEdgeSkirtTriangles(input, grid, MESH_VIEW_BOX_SIZE, MESH_VIEW_BOX_SIZE, subdivisions);
+		const polygons = [...patchTriangles, ...edgeTriangles].map(triangleToPolygon);
+		const imageSvg = [
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${MESH_VIEW_BOX_SIZE} ${MESH_VIEW_BOX_SIZE}" width="${MESH_VIEW_BOX_SIZE}" height="${MESH_VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+			...polygons,
+			"</svg>"
+		].join("");
+		return buildSvgGradientResult({
+			id,
+			type: "pattern",
+			gradient: [
+				`<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 ${MESH_VIEW_BOX_SIZE} ${MESH_VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+				`<image width="${MESH_VIEW_BOX_SIZE}" height="${MESH_VIEW_BOX_SIZE}" href="${escapeXml(encodeSvgDataUrl(imageSvg))}"/>`,
+				"</pattern>"
+			].join("")
+		});
 	}
 };
 //#endregion
@@ -3086,13 +5490,24 @@ 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());
+		this.add(new ModuleTransformerLinearGradientToSvg());
+		this.add(new ModuleTransformerRadialGradientToSvg());
+		this.add(new ModuleTransformerConicGradientToSvg());
+		this.add(new ModuleTransformerDiamondGradientToSvg());
+		this.add(new ModuleTransformerMeshGradientToSvg());
 	}
 	static _getKey(target, gradientType) {
 		return `${target}:${gradientType}`;
@@ -3115,7 +5530,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);
@@ -3133,7 +5554,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) {
@@ -3154,4 +5585,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, ModuleTransformerConicGradientToCanvasWebGL, ModuleTransformerConicGradientToCss, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCanvasWebGL, ModuleTransformerLinearGradientToCss, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCanvasWebGL, ModuleTransformerRadialGradientToCss, PatternTokenKind, RadialGradient, angleValueFromString, ceilTo, clamp, degToRad, floorTo, format, fromPercent, gradToRad, isAngle, isAngleUnit, isColorHint, isColorStop, isConfig, isGradient, isGradientColorSpace, isGradientHueInterpolation, isGradientPolarColorSpace, isPatternSyntaxValid, isPatternValid, isValid, matchExpression, normalizeAngleDeg, normalizeAngleRad, parse, parseStringToAbi, radToDeg, roundTo, splitTopLevelByWhitespace, toPercent, tokenizePattern, transformFrom, transformTo, truncTo, turnToRad, validate, validatePattern, validatePatternSemantic, validatePatternStructure, validatePatternSyntax };
+export { ConicGradient, DiamondGradient, GRADIENT_COLOR_SPACE, GRADIENT_HUE_INTERPOLATIONS, GRADIENT_POLAR_COLOR_SPACES, GradientBase, GradientFactory, GradientTransformer, LinearGradient, MeshGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCanvasWebGL, ModuleTransformerConicGradientToCss, ModuleTransformerConicGradientToSvg, ModuleTransformerDiamondGradientToCanvas, ModuleTransformerDiamondGradientToCanvasWebGL, ModuleTransformerDiamondGradientToCss, ModuleTransformerDiamondGradientToSvg, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCanvasWebGL, ModuleTransformerLinearGradientToCss, ModuleTransformerLinearGradientToSvg, ModuleTransformerMeshGradientToCanvas, ModuleTransformerMeshGradientToCanvasWebGL, ModuleTransformerMeshGradientToCss, ModuleTransformerMeshGradientToSvg, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCanvasWebGL, ModuleTransformerRadialGradientToCss, ModuleTransformerRadialGradientToSvg, 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 };