gradiente 1.0.2 → 2.0.0

package/dist/index.mjs

@@ -1,476 +1,4 @@
-//#region src/token.ts
-const TokenKind = {
-	PAREN_OPEN: "paren-open",
-	PAREN_CLOSE: "paren-close",
-	COMMA: "comma",
-	SLASH: "slash",
-	FUNCTION_LINEAR_GRADIENT: "function-linear-gradient",
-	FUNCTION_REPEATING_LINEAR_GRADIENT: "function-repeating-linear-gradient",
-	FUNCTION_RADIAL_GRADIENT: "function-radial-gradient",
-	FUNCTION_REPEATING_RADIAL_GRADIENT: "function-repeating-radial-gradient",
-	FUNCTION_CONIC_GRADIENT: "function-conic-gradient",
-	FUNCTION_REPEATING_CONIC_GRADIENT: "function-repeating-conic-gradient",
-	FUNCTION_DIAMOND_GRADIENT: "function-diamond-gradient",
-	FUNCTION_REPEATING_DIAMOND_GRADIENT: "function-repeating-diamond-gradient",
-	FUNCTION_MESH_GRADIENT: "function-mesh-gradient",
-	TO: "to",
-	TOP: "top",
-	BOTTOM: "bottom",
-	LEFT: "left",
-	RIGHT: "right",
-	AT: "at",
-	FROM: "from",
-	CENTER: "center",
-	CIRCLE: "circle",
-	ELLIPSE: "ellipse",
-	CLOSEST_SIDE: "closest-side",
-	CLOSEST_CORNER: "closest-corner",
-	FARTHEST_SIDE: "farthest-side",
-	FARTHEST_CORNER: "farthest-corner",
-	IN: "in",
-	SHORTER: "shorter",
-	LONGER: "longer",
-	INCREASING: "increasing",
-	DECREASING: "decreasing",
-	HUE: "hue",
-	IDENT: "ident",
-	NUMBER: "number",
-	PERCENTAGE: "percentage",
-	DIMENSION: "dimension",
-	FUNCTION: "function",
-	HASH: "hash",
-	STRING: "string",
-	WHITESPACE: "whitespace",
-	EOF: "eof",
-	UNKNOWN: "unknown"
-};
-const GradientFunctionNameToToken = {
-	"linear-gradient": TokenKind.FUNCTION_LINEAR_GRADIENT,
-	"repeating-linear-gradient": TokenKind.FUNCTION_REPEATING_LINEAR_GRADIENT,
-	"radial-gradient": TokenKind.FUNCTION_RADIAL_GRADIENT,
-	"repeating-radial-gradient": TokenKind.FUNCTION_REPEATING_RADIAL_GRADIENT,
-	"conic-gradient": TokenKind.FUNCTION_CONIC_GRADIENT,
-	"repeating-conic-gradient": TokenKind.FUNCTION_REPEATING_CONIC_GRADIENT,
-	"diamond-gradient": TokenKind.FUNCTION_DIAMOND_GRADIENT,
-	"repeating-diamond-gradient": TokenKind.FUNCTION_REPEATING_DIAMOND_GRADIENT,
-	"mesh-gradient": TokenKind.FUNCTION_MESH_GRADIENT
-};
-const KeywordNameToToken = {
-	to: TokenKind.TO,
-	top: TokenKind.TOP,
-	bottom: TokenKind.BOTTOM,
-	left: TokenKind.LEFT,
-	right: TokenKind.RIGHT,
-	at: TokenKind.AT,
-	from: TokenKind.FROM,
-	center: TokenKind.CENTER,
-	circle: TokenKind.CIRCLE,
-	ellipse: TokenKind.ELLIPSE,
-	"closest-side": TokenKind.CLOSEST_SIDE,
-	"closest-corner": TokenKind.CLOSEST_CORNER,
-	"farthest-side": TokenKind.FARTHEST_SIDE,
-	"farthest-corner": TokenKind.FARTHEST_CORNER,
-	in: TokenKind.IN,
-	shorter: TokenKind.SHORTER,
-	longer: TokenKind.LONGER,
-	increasing: TokenKind.INCREASING,
-	decreasing: TokenKind.DECREASING,
-	hue: TokenKind.HUE
-};
-//#endregion
-//#region src/lexer/base.ts
-function createLexerState(source) {
-	return {
-		source,
-		length: source.length,
-		position: 0
-	};
-}
-function isEnd(state) {
-	return state.position >= state.length;
-}
-function currentChar(state) {
-	if (isEnd(state)) return null;
-	return state.source[state.position] ?? null;
-}
-function peekChar(state, offset = 1) {
-	const index = state.position + offset;
-	if (index < 0 || index >= state.length) return null;
-	return state.source[index] ?? null;
-}
-function advance(state, step = 1) {
-	state.position = Math.max(0, Math.min(state.position + step, state.length));
-}
-function isWhitespaceChar(char) {
-	return char === " " || char === "\n" || char === "\r" || char === "	" || char === "\f";
-}
-function isDigitChar(char) {
-	return char !== null && char >= "0" && char <= "9";
-}
-function isSignChar(char) {
-	return char === "+" || char === "-";
-}
-function isIdentifierStartChar(char) {
-	if (char === null) return false;
-	return char >= "a" && char <= "z" || char >= "A" && char <= "Z" || char === "_" || char === "-";
-}
-function isIdentifierChar(char) {
-	if (char === null) return false;
-	return isIdentifierStartChar(char) || isDigitChar(char);
-}
-function isAlphaChar(char) {
-	if (char === null) return false;
-	return char >= "a" && char <= "z" || char >= "A" && char <= "Z";
-}
-function readWhile(state, predicate) {
-	const start = state.position;
-	while (!isEnd(state) && predicate(currentChar(state))) advance(state);
-	return state.source.slice(start, state.position);
-}
-function createSpan(source, start, end) {
-	return {
-		start,
-		end,
-		raw: source.slice(start, end)
-	};
-}
-//#endregion
-//#region src/lexer/lexer.ts
-function readWhitespaceToken(state) {
-	const start = state.position;
-	readWhile(state, isWhitespaceChar);
-	const span = createSpan(state.source, start, state.position);
-	return {
-		kind: TokenKind.WHITESPACE,
-		start: span.start,
-		end: span.end,
-		raw: span.raw
-	};
-}
-function readPunctuationToken(state) {
-	const start = state.position;
-	const char = currentChar(state);
-	if (char === null) return null;
-	let kind = null;
-	switch (char) {
-		case "(":
-			kind = TokenKind.PAREN_OPEN;
-			break;
-		case ")":
-			kind = TokenKind.PAREN_CLOSE;
-			break;
-		case ",":
-			kind = TokenKind.COMMA;
-			break;
-		case "/":
-			kind = TokenKind.SLASH;
-			break;
-		default:
-			kind = null;
-			break;
-	}
-	if (kind === null) return null;
-	advance(state);
-	const span = createSpan(state.source, start, state.position);
-	return {
-		kind,
-		start: span.start,
-		end: span.end,
-		raw: span.raw
-	};
-}
-function readHashToken(state) {
-	const start = state.position;
-	if (currentChar(state) !== "#") return null;
-	advance(state);
-	const value = readWhile(state, (nextChar) => {
-		if (nextChar === null) return false;
-		return isIdentifierChar(nextChar);
-	});
-	const span = createSpan(state.source, start, state.position);
-	return {
-		kind: TokenKind.HASH,
-		start: span.start,
-		end: span.end,
-		raw: span.raw,
-		value
-	};
-}
-function readIdentifierLikeToken(state) {
-	const start = state.position;
-	if (!isIdentifierStartChar(currentChar(state))) return null;
-	const value = readWhile(state, isIdentifierChar);
-	if (currentChar(state) === "(") {
-		const gradientKind = GradientFunctionNameToToken[value];
-		const span = createSpan(state.source, start, state.position);
-		if (gradientKind !== void 0) return {
-			kind: gradientKind,
-			start: span.start,
-			end: span.end,
-			raw: span.raw,
-			name: value
-		};
-		return {
-			kind: TokenKind.FUNCTION,
-			start: span.start,
-			end: span.end,
-			raw: span.raw,
-			name: value
-		};
-	}
-	const keywordKind = KeywordNameToToken[value];
-	const span = createSpan(state.source, start, state.position);
-	if (keywordKind !== void 0) return {
-		kind: keywordKind,
-		start: span.start,
-		end: span.end,
-		raw: span.raw
-	};
-	return {
-		kind: TokenKind.IDENT,
-		start: span.start,
-		end: span.end,
-		raw: span.raw,
-		value
-	};
-}
-function isNumberStart(state) {
-	const char = currentChar(state);
-	const next = peekChar(state);
-	if (isDigitChar(char)) return true;
-	if (char === "." && isDigitChar(next)) return true;
-	if (isSignChar(char)) {
-		if (isDigitChar(next)) return true;
-		if (next === "." && isDigitChar(peekChar(state, 2))) return true;
-	}
-	return false;
-}
-function readNumberRaw(state) {
-	let sign = 1;
-	if (currentChar(state) === "+") advance(state);
-	else if (currentChar(state) === "-") {
-		sign = -1;
-		advance(state);
-	}
-	const integerPart = readWhile(state, isDigitChar);
-	let fractionPart = "";
-	if (currentChar(state) === "." && isDigitChar(peekChar(state))) {
-		advance(state);
-		fractionPart = readWhile(state, isDigitChar);
-	}
-	const rawNumber = fractionPart.length > 0 ? `${integerPart}.${fractionPart}` : integerPart;
-	const numeric = Number(rawNumber);
-	const value = sign === -1 ? -numeric : numeric;
-	return {
-		rawNumber,
-		sign,
-		value
-	};
-}
-function readNumberLikeToken(state) {
-	if (!isNumberStart(state)) return null;
-	const start = state.position;
-	const { sign, value } = readNumberRaw(state);
-	if (currentChar(state) === "%") {
-		advance(state);
-		const span = createSpan(state.source, start, state.position);
-		return {
-			kind: TokenKind.PERCENTAGE,
-			start: span.start,
-			end: span.end,
-			raw: span.raw,
-			value,
-			sign
-		};
-	}
-	if (isIdentifierStartChar(currentChar(state))) {
-		const unit = readWhile(state, isIdentifierChar);
-		const span = createSpan(state.source, start, state.position);
-		return {
-			kind: TokenKind.DIMENSION,
-			start: span.start,
-			end: span.end,
-			raw: span.raw,
-			value,
-			sign,
-			unit
-		};
-	}
-	const span = createSpan(state.source, start, state.position);
-	return {
-		kind: TokenKind.NUMBER,
-		start: span.start,
-		end: span.end,
-		raw: span.raw,
-		value,
-		sign
-	};
-}
-function readUnknownToken(state) {
-	const start = state.position;
-	advance(state);
-	const span = createSpan(state.source, start, state.position);
-	return {
-		kind: TokenKind.UNKNOWN,
-		start: span.start,
-		end: span.end,
-		raw: span.raw
-	};
-}
-function readEofToken(state) {
-	return {
-		kind: TokenKind.EOF,
-		start: state.position,
-		end: state.position,
-		raw: ""
-	};
-}
-function nextToken(state) {
-	if (isEnd(state)) return readEofToken(state);
-	if (isWhitespaceChar(currentChar(state))) return readWhitespaceToken(state);
-	const punctuationToken = readPunctuationToken(state);
-	if (punctuationToken !== null) return punctuationToken;
-	const hashToken = readHashToken(state);
-	if (hashToken !== null) return hashToken;
-	const numberLikeToken = readNumberLikeToken(state);
-	if (numberLikeToken !== null) return numberLikeToken;
-	const identifierLikeToken = readIdentifierLikeToken(state);
-	if (identifierLikeToken !== null) return identifierLikeToken;
-	return readUnknownToken(state);
-}
-function tokenize(source) {
-	const state = createLexerState(source);
-	const tokens = [];
-	while (true) {
-		const token = nextToken(state);
-		tokens.push(token);
-		if (token.kind === TokenKind.EOF) break;
-	}
-	return tokens;
-}
-//#endregion
-//#region src/guard.ts
-function isGradientFunctionToken(token) {
-	return token.kind === TokenKind.FUNCTION_LINEAR_GRADIENT || token.kind === TokenKind.FUNCTION_REPEATING_LINEAR_GRADIENT || token.kind === TokenKind.FUNCTION_RADIAL_GRADIENT || token.kind === TokenKind.FUNCTION_REPEATING_RADIAL_GRADIENT || token.kind === TokenKind.FUNCTION_CONIC_GRADIENT || token.kind === TokenKind.FUNCTION_REPEATING_CONIC_GRADIENT || token.kind === TokenKind.FUNCTION_DIAMOND_GRADIENT || token.kind === TokenKind.FUNCTION_REPEATING_DIAMOND_GRADIENT || token.kind === TokenKind.FUNCTION_MESH_GRADIENT;
-}
-function isKeywordToken(token) {
-	switch (token.kind) {
-		case TokenKind.TO:
-		case TokenKind.TOP:
-		case TokenKind.BOTTOM:
-		case TokenKind.LEFT:
-		case TokenKind.RIGHT:
-		case TokenKind.AT:
-		case TokenKind.FROM:
-		case TokenKind.CENTER:
-		case TokenKind.CIRCLE:
-		case TokenKind.ELLIPSE:
-		case TokenKind.CLOSEST_SIDE:
-		case TokenKind.CLOSEST_CORNER:
-		case TokenKind.FARTHEST_SIDE:
-		case TokenKind.FARTHEST_CORNER:
-		case TokenKind.IN:
-		case TokenKind.SHORTER:
-		case TokenKind.LONGER:
-		case TokenKind.INCREASING:
-		case TokenKind.DECREASING:
-		case TokenKind.HUE: return true;
-		default: return false;
-	}
-}
-function isNumericToken(token) {
-	return token.kind === TokenKind.NUMBER || token.kind === TokenKind.PERCENTAGE || token.kind === TokenKind.DIMENSION;
-}
-//#endregion
-//#region src/source.ts
-function getSourceSlice(source, start, end) {
-	return source.slice(start, end);
-}
-function getTokenSourceSlice(source, startToken, endToken) {
-	return source.slice(startToken.start, endToken.end);
-}
-function getTokenRangeSourceSlice(source, tokens, startIndex, endIndex) {
-	const startToken = tokens[startIndex];
-	const endToken = tokens[endIndex];
-	if (startToken === void 0 || endToken === void 0) throw new Error(`Invalid token range: ${startIndex}..${endIndex}`);
-	return source.slice(startToken.start, endToken.end);
-}
-function findBalancedFunctionEndIndex(tokens, startIndex) {
-	const startToken = tokens[startIndex];
-	if (startToken === void 0 || !(startToken.kind === TokenKind.FUNCTION || startToken.kind === TokenKind.FUNCTION_LINEAR_GRADIENT || startToken.kind === TokenKind.FUNCTION_REPEATING_LINEAR_GRADIENT || startToken.kind === TokenKind.FUNCTION_RADIAL_GRADIENT || startToken.kind === TokenKind.FUNCTION_REPEATING_RADIAL_GRADIENT || startToken.kind === TokenKind.FUNCTION_CONIC_GRADIENT || startToken.kind === TokenKind.FUNCTION_REPEATING_CONIC_GRADIENT || startToken.kind === TokenKind.FUNCTION_DIAMOND_GRADIENT || startToken.kind === TokenKind.FUNCTION_REPEATING_DIAMOND_GRADIENT || startToken.kind === TokenKind.FUNCTION_MESH_GRADIENT)) throw new Error(`Token at index ${startIndex} is not a function token`);
-	if (tokens[startIndex + 1]?.kind !== TokenKind.PAREN_OPEN) throw new Error(`Expected "(" after function token at index ${startIndex}`);
-	let depth = 0;
-	for (let index = startIndex + 1; index < tokens.length; index++) {
-		const token = tokens[index];
-		if (token === void 0) break;
-		if (token.kind === TokenKind.PAREN_OPEN) {
-			depth += 1;
-			continue;
-		}
-		if (token.kind === TokenKind.PAREN_CLOSE) {
-			depth -= 1;
-			if (depth === 0) return index;
-			continue;
-		}
-	}
-	throw new Error(`Unclosed function starting at token index ${startIndex}`);
-}
-//#endregion
-//#region src/utils/parser-utils.ts
-function isTriviaToken(token) {
-	return token.kind === TokenKind.WHITESPACE;
-}
-function getTokenAt(tokens, index) {
-	return tokens[index] ?? null;
-}
-function findNextNonWhitespaceIndex(tokens, startIndex) {
-	let index = startIndex;
-	while (index < tokens.length) {
-		const token = tokens[index];
-		if (token === void 0) break;
-		if (!isTriviaToken(token)) return index;
-		index += 1;
-	}
-	return -1;
-}
-function getNonWhitespaceTokenAt(tokens, startIndex) {
-	const index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return null;
-	return tokens[index] ?? null;
-}
-function skipWhitespace(tokens, startIndex) {
-	return findNextNonWhitespaceIndex(tokens, startIndex);
-}
-function consumeIf(tokens, index, kind) {
-	const nextIndex = findNextNonWhitespaceIndex(tokens, index);
-	if (nextIndex === -1) return {
-		matched: false,
-		nextIndex: index,
-		token: null
-	};
-	const token = tokens[nextIndex] ?? null;
-	if (token === null || token.kind !== kind) return {
-		matched: false,
-		nextIndex: index,
-		token: null
-	};
-	return {
-		matched: true,
-		nextIndex: nextIndex + 1,
-		token
-	};
-}
-function expectToken(tokens, index, kind, message) {
-	const nextIndex = findNextNonWhitespaceIndex(tokens, index);
-	if (nextIndex === -1) throw new Error(message ?? `Expected token "${kind}", but reached end of token stream`);
-	const token = tokens[nextIndex];
-	if (token === void 0 || token.kind !== kind) throw new Error(message ?? `Expected token "${kind}", but received "${token?.kind ?? "undefined"}"`);
-	return {
-		token,
-		nextIndex: nextIndex + 1
-	};
-}
-//#endregion
+import { converter, formatRgb, parse as parse$1 } from "culori";
 //#region src/utils/math/base.ts
 function roundTo(value, digits) {
 	const factor = 10 ** digits;
@@ -533,898 +61,1620 @@ function toAngleRad(value, unit) {
 function normalizeAngle(value, unit, digits = 6) {
 	return roundTo(normalizeAngleRad(toAngleRad(value, unit)), digits);
 }
-function parseAngleFromToken(token) {
-	if (token.kind !== TokenKind.DIMENSION) return null;
-	if (!isAngleUnit(token.unit)) return null;
-	return normalizeAngle(token.value, token.unit);
-}
 //#endregion
-//#region src/parser/helpers/color-helpers.ts
-function parseColorStop(source, tokens, startIndex) {
-	const colorResult = parseColorSource(source, tokens, startIndex);
-	let index = colorResult.nextIndex;
-	const positions = [];
-	while (true) {
-		const nextIndex = findNextNonWhitespaceIndex(tokens, index);
-		if (nextIndex === -1) break;
-		const token = tokens[nextIndex];
-		if (token === void 0) break;
-		if (token.kind === TokenKind.PERCENTAGE || token.kind === TokenKind.DIMENSION) {
-			positions.push(toLengthPercentageNode(token));
-			index = nextIndex + 1;
-			if (positions.length === 2) break;
+//#region src/dsl/types.ts
+let PatternTokenKind = /* @__PURE__ */ function(PatternTokenKind) {
+	PatternTokenKind["START"] = "^";
+	PatternTokenKind["END"] = ".";
+	PatternTokenKind["GROUP_OPEN"] = "(";
+	PatternTokenKind["GROUP_CLOSE"] = ")";
+	PatternTokenKind["COMMA"] = ",";
+	PatternTokenKind["SEQUENCE_OPEN"] = "[";
+	PatternTokenKind["SEQUENCE_CLOSE"] = "]";
+	PatternTokenKind["OR"] = "|";
+	PatternTokenKind["AND"] = "&";
+	PatternTokenKind["NOT"] = "!";
+	PatternTokenKind["REPEAT"] = "~";
+	PatternTokenKind["CONFIG"] = "config";
+	PatternTokenKind["COLOR_STOP"] = "color-stop";
+	PatternTokenKind["COLOR_HINT"] = "color-hint";
+	return PatternTokenKind;
+}({});
+//#endregion
+//#region src/dsl/match.ts
+function matchExpression(classified, patternTokens, inputIndex, patternIndex) {
+	let currentInputIndex = inputIndex;
+	let currentPatternIndex = patternIndex;
+	while (currentPatternIndex < patternTokens.length) {
+		const token = patternTokens[currentPatternIndex];
+		if (token === "." || token === ")" || token === "]" || token === "|") break;
+		if (token === ",") {
+			currentPatternIndex += 1;
 			continue;
 		}
-		break;
+		const result = matchPrimary(classified, patternTokens, currentInputIndex, currentPatternIndex);
+		if (!result.matched) return {
+			matched: false,
+			nextInputIndex: inputIndex,
+			nextPatternIndex: patternIndex
+		};
+		currentInputIndex = result.nextInputIndex;
+		currentPatternIndex = result.nextPatternIndex;
 	}
 	return {
-		node: {
-			kind: "color-stop",
-			color: colorResult.node,
-			position: positions[0]
-		},
-		nextIndex: index
+		matched: true,
+		nextInputIndex: currentInputIndex,
+		nextPatternIndex: currentPatternIndex
 	};
 }
-function toLengthPercentageNode(token) {
-	if (token.kind === TokenKind.PERCENTAGE) return {
-		kind: "percentage",
-		value: roundTo(toPercent(token.value), 5)
+function matchEntity(classified, patternTokens, inputIndex, patternIndex) {
+	const expected = patternTokens[patternIndex];
+	const current = classified[inputIndex];
+	if (expected !== "config" && expected !== "color-stop" && expected !== "color-hint") throw new Error(`Expected entity token at pattern index ${patternIndex}`);
+	if (!current) return {
+		matched: false,
+		nextInputIndex: inputIndex,
+		nextPatternIndex: patternIndex
+	};
+	if (current.type !== expected) return {
+		matched: false,
+		nextInputIndex: inputIndex,
+		nextPatternIndex: patternIndex
 	};
 	return {
-		kind: "dimension",
-		value: token.value,
-		unit: token.unit
+		matched: true,
+		nextInputIndex: inputIndex + 1,
+		nextPatternIndex: patternIndex + 1
 	};
 }
-function parseColorSource(source, tokens, startIndex) {
-	const token = tokens[startIndex];
-	if (token === void 0) throw new Error("Expected color token");
-	if (token.kind === TokenKind.IDENT || token.kind === TokenKind.HASH) return {
-		node: token.raw,
-		nextIndex: startIndex + 1
-	};
-	if (token.kind === TokenKind.FUNCTION) {
-		const endIndex = findBalancedFunctionEndIndex$1(tokens, startIndex);
-		return {
-			node: getTokenRangeSourceSlice(source, tokens, startIndex, endIndex),
-			nextIndex: endIndex + 1
-		};
-	}
-	throw new Error(`Expected color source, received "${token.kind}"`);
+function matchPrimary(classified, patternTokens, inputIndex, patternIndex) {
+	const token = patternTokens[patternIndex];
+	if (token === "config" || token === "color-stop" || token === "color-hint") return matchEntity(classified, patternTokens, inputIndex, patternIndex);
+	if (token === "[") return matchSequence(classified, patternTokens, inputIndex, patternIndex);
+	if (token === "(") return matchGroup(classified, patternTokens, inputIndex, patternIndex);
+	if (token === "~") return matchRepeat(classified, patternTokens, inputIndex, patternIndex);
+	throw new Error(`Unsupported primary token "${token}" at pattern index ${patternIndex}`);
 }
-function findBalancedFunctionEndIndex$1(tokens, startIndex) {
-	const functionToken = tokens[startIndex];
-	const openParenToken = tokens[startIndex + 1];
-	if (functionToken?.kind !== TokenKind.FUNCTION) throw new Error("Expected generic function token");
-	if (openParenToken?.kind !== TokenKind.PAREN_OPEN) throw new Error("Expected \"(\" after function token");
+function findMatchingToken(tokens, startIndex, openToken, closeToken) {
+	if (tokens[startIndex] !== openToken) throw new Error(`Expected "${openToken}" at pattern index ${startIndex}, got "${tokens[startIndex]}"`);
 	let depth = 0;
-	for (let index = startIndex + 1; index < tokens.length; index += 1) {
-		const token = tokens[index];
-		if (token === void 0) break;
-		if (token.kind === TokenKind.PAREN_OPEN) {
+	for (let i = startIndex; i < tokens.length; i += 1) {
+		const token = tokens[i];
+		if (token === openToken) {
 			depth += 1;
 			continue;
 		}
-		if (token.kind === TokenKind.PAREN_CLOSE) {
+		if (token === closeToken) {
 			depth -= 1;
-			if (depth === 0) return index;
+			if (depth === 0) return i;
 		}
 	}
-	throw new Error("Unclosed function color source");
-}
-//#endregion
-//#region src/parser/helpers/stop-helpers.ts
-function parseGradientStopList(source, tokens, startIndex) {
-	const items = [];
-	let index = startIndex;
-	while (true) {
-		const itemResult = parseGradientStopItem(source, tokens, index);
-		items.push(itemResult.node);
-		index = itemResult.nextIndex;
-		const nextIndex = findNextNonWhitespaceIndex(tokens, index);
-		if (nextIndex === -1) break;
-		const token = tokens[nextIndex];
-		if (token === void 0) break;
-		if (token.kind === TokenKind.COMMA) {
-			index = nextIndex + 1;
+	throw new Error(`Unclosed token pair "${openToken}${closeToken}"`);
+}
+function matchSequence(classified, patternTokens, inputIndex, patternIndex) {
+	if (patternTokens[patternIndex] !== "[") throw new Error(`Expected "[" at pattern index ${patternIndex}`);
+	const closeIndex = findMatchingToken(patternTokens, patternIndex, "[", "]");
+	let currentInputIndex = inputIndex;
+	let currentPatternIndex = patternIndex + 1;
+	while (currentPatternIndex < closeIndex) {
+		if (patternTokens[currentPatternIndex] === ",") {
+			currentPatternIndex += 1;
 			continue;
 		}
-		if (token.kind === TokenKind.PAREN_CLOSE) break;
-		throw new Error(`Expected comma or ")" in stop list, received "${token.kind}"`);
+		const result = matchPrimary(classified, patternTokens, currentInputIndex, currentPatternIndex);
+		if (!result.matched) return {
+			matched: false,
+			nextInputIndex: inputIndex,
+			nextPatternIndex: patternIndex
+		};
+		currentInputIndex = result.nextInputIndex;
+		currentPatternIndex = result.nextPatternIndex;
 	}
-	if (items.length < 2) throw new Error("Linear gradient requires at least two stop items");
 	return {
-		node: normalizeGradientStopList(items),
-		nextIndex: index
-	};
-}
-function parseGradientStopItem(source, tokens, startIndex) {
-	const index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) throw new Error("Expected stop item, but reached end of token stream");
-	if (tokens[index] === void 0) throw new Error("Expected stop item, but token was undefined");
-	return parseColorStop(source, tokens, index);
-}
-function normalizeGradientStopList(items) {
-	const colorStopIndexes = items.flatMap((item, index) => item.kind === "color-stop" ? [index] : []);
-	if (colorStopIndexes.length < 2) return items;
-	const normalized = [...items];
-	const getColorStop = (itemIndex) => {
-		const item = normalized[itemIndex];
-		if (item.kind !== "color-stop") throw new Error("Expected color-stop");
-		return item;
-	};
-	const setColorStopPosition = (itemIndex, value) => {
-		normalized[itemIndex] = {
-			...getColorStop(itemIndex),
-			position: {
-				kind: "percentage",
-				value
-			}
-		};
-	};
-	const getColorStopPosition = (itemIndex) => {
-		const position = getColorStop(itemIndex).position;
-		if (!position) return null;
-		if (position.kind !== "percentage") return null;
-		return position.value;
-	};
-	const firstItemIndex = colorStopIndexes[0];
-	const lastItemIndex = colorStopIndexes[colorStopIndexes.length - 1];
-	if (firstItemIndex !== void 0 && getColorStopPosition(firstItemIndex) === null) setColorStopPosition(firstItemIndex, 0);
-	if (lastItemIndex !== void 0 && getColorStopPosition(lastItemIndex) === null) setColorStopPosition(lastItemIndex, 1);
-	let anchorStart = 0;
-	while (anchorStart < colorStopIndexes.length) {
-		const startItemIndex = colorStopIndexes[anchorStart];
-		if (startItemIndex === void 0) break;
-		const startValue = getColorStopPosition(startItemIndex);
-		if (startValue === null) {
-			anchorStart += 1;
+		matched: true,
+		nextInputIndex: currentInputIndex,
+		nextPatternIndex: closeIndex + 1
+	};
+}
+function splitTopLevelOr(tokens) {
+	const result = [];
+	let current = [];
+	let groupDepth = 0;
+	let sequenceDepth = 0;
+	for (let i = 0; i < tokens.length; i += 1) {
+		const token = tokens[i];
+		if (token === "(") {
+			groupDepth += 1;
+			current.push(token);
 			continue;
 		}
-		let anchorEnd = anchorStart + 1;
-		while (anchorEnd < colorStopIndexes.length) {
-			const endItemIndex = colorStopIndexes[anchorEnd];
-			if (endItemIndex === void 0) break;
-			const endValue = getColorStopPosition(endItemIndex);
-			if (endValue !== null) {
-				const gapCount = anchorEnd - anchorStart - 1;
-				if (gapCount > 0) {
-					const step = (endValue - startValue) / (gapCount + 1);
-					for (let i = 1; i <= gapCount; i += 1) {
-						const gapItemIndex = colorStopIndexes[anchorStart + i];
-						if (gapItemIndex === void 0) continue;
-						setColorStopPosition(gapItemIndex, startValue + step * i);
-					}
-				}
-				break;
-			}
-			anchorEnd += 1;
+		if (token === ")") {
+			groupDepth -= 1;
+			current.push(token);
+			continue;
+		}
+		if (token === "[") {
+			sequenceDepth += 1;
+			current.push(token);
+			continue;
 		}
-		anchorStart = anchorEnd;
+		if (token === "]") {
+			sequenceDepth -= 1;
+			current.push(token);
+			continue;
+		}
+		if (token === "|" && groupDepth === 0 && sequenceDepth === 0) {
+			result.push(current);
+			current = [];
+			continue;
+		}
+		current.push(token);
 	}
-	return normalized;
-}
-//#endregion
-//#region src/parser/linear-gradient/parse-linear-gradient.ts
-function parseLinearGradient(source, tokens, startIndex) {
-	const functionToken = getTokenAt(tokens, startIndex);
-	if (functionToken === null || functionToken.kind !== TokenKind.FUNCTION_LINEAR_GRADIENT && functionToken.kind !== TokenKind.FUNCTION_REPEATING_LINEAR_GRADIENT) throw new Error("Expected linear gradient function token");
-	const repeat = functionToken.kind === TokenKind.FUNCTION_REPEATING_LINEAR_GRADIENT ? "repeating" : "normal";
-	let index = startIndex + 1;
-	index = expectToken(tokens, index, TokenKind.PAREN_OPEN).nextIndex;
-	const directionResult = parseLinearDirection(tokens, index);
-	const direction = directionResult.node ?? createDefaultLinearDirection();
-	index = directionResult.nextIndex;
-	if (directionResult.node !== null) index = expectToken(tokens, index, TokenKind.COMMA).nextIndex;
-	const stopsResult = parseGradientStopList(source, tokens, index);
-	const stops = repeat === "repeating" ? expandColorStops$2(stopsResult.node) : stopsResult.node;
-	index = stopsResult.nextIndex;
-	index = expectToken(tokens, index, TokenKind.PAREN_CLOSE).nextIndex;
-	return {
-		node: {
-			kind: "linear",
-			repeat,
-			direction,
-			stops
-		},
-		nextIndex: index
-	};
-}
-function parseLinearDirection(tokens, startIndex) {
-	const index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const token = tokens[index];
-	if (token === void 0) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	if (token.kind === TokenKind.TO) return parseLinearDirectionFromKeywords(tokens, index);
-	const angle = parseAngleFromToken(token);
-	if (angle !== null) {
-		TokenKind.DIMENSION;
-		const dimensionToken = token;
-		return {
-			node: createLinearDirectionFromAngle(dimensionToken.value, dimensionToken.unit, angle),
-			nextIndex: index + 1
+	if (current.length > 0) result.push(current);
+	return result;
+}
+function matchGroup(classified, patternTokens, inputIndex, patternIndex) {
+	if (patternTokens[patternIndex] !== "(") throw new Error(`Expected "(" at pattern index ${patternIndex}`);
+	const closeIndex = findMatchingToken(patternTokens, patternIndex, "(", ")");
+	const branches = splitTopLevelOr(patternTokens.slice(patternIndex + 1, closeIndex));
+	for (const branch of branches) {
+		const result = matchExpression(classified, branch, inputIndex, 0);
+		if (result.matched) return {
+			matched: true,
+			nextInputIndex: result.nextInputIndex,
+			nextPatternIndex: closeIndex + 1
 		};
 	}
 	return {
-		node: null,
-		nextIndex: startIndex
+		matched: false,
+		nextInputIndex: inputIndex,
+		nextPatternIndex: patternIndex
 	};
 }
-function parseLinearDirectionFromKeywords(tokens, startIndex) {
-	let index = startIndex;
-	index = expectToken(tokens, index, TokenKind.TO).nextIndex;
-	const keywords = [];
+function matchRepeat(classified, patternTokens, inputIndex, patternIndex) {
+	if (patternTokens[patternIndex] !== "~") throw new Error(`Expected "~" at pattern index ${patternIndex}`);
+	let currentInputIndex = inputIndex;
+	let currentPatternIndex = patternIndex + 1;
 	while (true) {
-		const nextIndex = findNextNonWhitespaceIndex(tokens, index);
-		if (nextIndex === -1) break;
-		const token = tokens[nextIndex];
-		if (token === void 0) break;
-		if (token.kind === TokenKind.TOP || token.kind === TokenKind.BOTTOM || token.kind === TokenKind.LEFT || token.kind === TokenKind.RIGHT) {
-			keywords.push(token.kind);
-			index = nextIndex + 1;
-			continue;
-		}
-		break;
+		const result = matchPrimary(classified, patternTokens, currentInputIndex, currentPatternIndex);
+		if (!result.matched) break;
+		if (result.nextInputIndex === currentInputIndex) throw new Error("Repeat expression did not consume input");
+		currentInputIndex = result.nextInputIndex;
 	}
-	if (keywords.length === 0) throw new Error("Expected at least one direction keyword after \"to\"");
+	const nextPatternIndex = getPrimaryEndIndex(patternTokens, currentPatternIndex);
 	return {
-		node: createLinearDirectionFromKeywords(["to", ...keywords]),
-		nextIndex: index
-	};
-}
-function createLinearDirectionFromKeywords(keywords) {
-	const deg = parseKeywordsToDeg(keywords);
-	if (deg === null) throw new Error("Invalid direction keywords");
-	const rad = roundTo(degToRad(deg), 6);
-	return {
-		kind: "angle",
-		value: {
-			kind: "dimension",
-			value: deg,
-			unit: "deg"
-		},
-		valueRaw: {
-			kind: "dimension",
-			value: rad,
-			unit: "rad"
-		},
-		keywords: [...keywords]
-	};
-}
-function createLinearDirectionFromAngle(value, unit, normalizedRad) {
-	const fixedRad = roundTo(normalizedRad, 6);
-	return {
-		kind: "angle",
-		value: {
-			kind: "dimension",
-			value,
-			unit
-		},
-		valueRaw: {
-			kind: "dimension",
-			value: fixedRad,
-			unit: "rad"
-		},
-		keywords: parseRadToKeywords(fixedRad)
+		matched: true,
+		nextInputIndex: currentInputIndex,
+		nextPatternIndex
 	};
 }
-function createDefaultLinearDirection() {
-	return createLinearDirectionFromKeywords(["to", "top"]);
+function getPrimaryEndIndex(patternTokens, patternIndex) {
+	const token = patternTokens[patternIndex];
+	if (token === "config" || token === "color-stop" || token === "color-hint") return patternIndex + 1;
+	if (token === "[") return findMatchingToken(patternTokens, patternIndex, "[", "]") + 1;
+	if (token === "(") return findMatchingToken(patternTokens, patternIndex, "(", ")") + 1;
+	if (token === "~") return getPrimaryEndIndex(patternTokens, patternIndex + 1);
+	throw new Error(`Unsupported token "${token}" in getPrimaryEndIndex`);
 }
-function parseKeywordsToDeg(keywords) {
-	if (keywords.length === 0 || keywords[0] !== "to") return null;
-	switch ([...keywords.slice(1)].sort().join("-")) {
-		case "top": return 0;
-		case "right": return 90;
-		case "left": return 270;
-		case "bottom": return 180;
-		case "bottom-right":
-		case "right-bottom": return 135;
-		case "bottom-left":
-		case "left-bottom": return 225;
-		case "top-right":
-		case "right-top": return 45;
-		case "top-left":
-		case "left-top": return 315;
-		default: return null;
+//#endregion
+//#region src/dsl/pattern-validator.ts
+function validatePattern(input) {
+	validatePatternSyntax(input);
+	validatePatternSemantic(input);
+	validatePatternStructure(input);
+	return true;
+}
+function isPatternValid(input) {
+	try {
+		validatePattern(input);
+		return true;
+	} catch {
+		return false;
 	}
 }
-function parseDegToKeywords(angle) {
-	switch (normalizeAngleDeg(angle)) {
-		case 0: return ["to", "top"];
-		case 45: return [
-			"to",
-			"top",
-			"right"
-		];
-		case 90: return ["to", "right"];
-		case 135: return [
-			"to",
-			"bottom",
-			"right"
-		];
-		case 180: return ["to", "bottom"];
-		case 225: return [
-			"to",
-			"bottom",
-			"left"
-		];
-		case 270: return ["to", "left"];
-		case 315: return [
-			"to",
-			"top",
-			"left"
-		];
-		default: return [];
+function validatePatternSyntax(input) {
+	const tokens = tokenizePattern(input);
+	if (tokens.length === 0) throw new Error("Pattern cannot be empty");
+	if (tokens[0] !== "^") throw new Error("Pattern must start with ^");
+	if (tokens[tokens.length - 1] !== ".") throw new Error("Pattern must end with \".\"");
+	let groupDepth = 0;
+	let sequenceDepth = 0;
+	for (let i = 0; i < tokens.length; i += 1) {
+		const token = tokens[i];
+		if (token === "(") {
+			groupDepth += 1;
+			continue;
+		}
+		if (token === ")") {
+			groupDepth -= 1;
+			if (groupDepth < 0) throw new Error(`Unexpected ")" at token index ${i}`);
+			continue;
+		}
+		if (token === "[") {
+			sequenceDepth += 1;
+			continue;
+		}
+		if (token === "]") {
+			sequenceDepth -= 1;
+			if (sequenceDepth < 0) throw new Error(`Unexpected "]" at token index ${i}`);
+			continue;
+		}
+	}
+	if (groupDepth !== 0) throw new Error("Unclosed group \"()\" in pattern");
+	if (sequenceDepth !== 0) throw new Error("Unclosed sequence \"[]\" in pattern");
+	return true;
+}
+function isPatternSyntaxValid(input) {
+	try {
+		validatePatternSyntax(input);
+		return true;
+	} catch {
+		return false;
 	}
 }
-function parseRadToKeywords(angle) {
-	return parseDegToKeywords(radToDeg(angle));
-}
-function expandColorStops$2(stops) {
-	if (stops.length < 2) return stops;
-	const lastPosition = stops[stops.length - 1]?.position;
-	if (!lastPosition || lastPosition.kind !== "percentage") return stops;
-	if (lastPosition.value >= 1) return stops;
-	const percentageSum = roundTo(stops.reduce((sum, stop) => {
-		const position = stop.position;
-		if (!position || position.kind !== "percentage") return sum;
-		return sum + position.value;
-	}, 0), 3);
-	if (percentageSum <= 0) return stops;
-	const newStops = [...stops];
-	let offset = percentageSum;
-	while (true) {
-		let shouldContinue = false;
-		for (let i = 0; i < stops.length; i++) {
-			const stop = stops[i];
-			const position = stop.position;
-			if (!position || position.kind !== "percentage") continue;
-			const nextValue = roundTo(position.value + offset, 3);
-			newStops.push({
-				...stop,
-				position: {
-					kind: "percentage",
-					value: nextValue
-				}
-			});
-			if (nextValue <= 1) shouldContinue = true;
+const NEXT_TOKEN_MAP = {
+	"^": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	"(": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	"[": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	"|": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	"&": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	"!": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	"~": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	",": [
+		"(",
+		"[",
+		"!",
+		"~",
+		"config",
+		"color-stop",
+		"color-hint"
+	],
+	"config": [
+		",",
+		"|",
+		"&",
+		")",
+		"]",
+		"."
+	],
+	"color-stop": [
+		",",
+		"|",
+		"&",
+		")",
+		"]",
+		"."
+	],
+	"color-hint": [
+		",",
+		"|",
+		"&",
+		")",
+		"]",
+		"."
+	],
+	")": [
+		",",
+		"|",
+		"&",
+		")",
+		"]",
+		"."
+	],
+	"]": [
+		",",
+		"|",
+		"&",
+		")",
+		"]",
+		"."
+	],
+	".": []
+};
+function validatePatternSemantic(input) {
+	const tokens = tokenizePattern(input);
+	if (tokens.length === 0) throw new Error("Pattern cannot be empty");
+	for (let i = 0; i < tokens.length - 1; i += 1) {
+		const current = tokens[i];
+		const next = tokens[i + 1];
+		const allowedNext = NEXT_TOKEN_MAP[current];
+		if (!allowedNext) throw new Error(`No semantic transition rule defined for token "${current}"`);
+		if (!allowedNext.includes(next)) throw new Error(`Token "${next}" is not allowed after "${current}" at index ${i + 1}`);
+	}
+	return true;
+}
+function validatePatternStructure(input) {
+	const tokens = tokenizePattern(input);
+	for (let i = 0; i < tokens.length; i += 1) {
+		const current = tokens[i];
+		const next = tokens[i + 1];
+		const previous = tokens[i - 1];
+		if (current === "(" && next === ")") throw new Error(`Empty group "()" is not allowed at token index ${i}`);
+		if (current === "[" && next === "]") throw new Error(`Empty sequence "[]" is not allowed at token index ${i}`);
+		if (current === ",") {
+			if (previous === void 0) throw new Error(`Unexpected "," at token index ${i}`);
+			if (next === void 0) throw new Error(`Unexpected "," at token index ${i}`);
+			if (previous === "[") throw new Error(`Sequence cannot start with "," at token index ${i}`);
+			if (next === "]") throw new Error(`Sequence cannot end with "," at token index ${i}`);
+			if (previous === ",") throw new Error(`Unexpected consecutive "," at token index ${i}`);
+			if (next === ",") throw new Error(`Unexpected consecutive "," at token index ${i}`);
 		}
-		const lastGeneratedPosition = newStops[newStops.length - 1]?.position;
-		if (!lastGeneratedPosition || lastGeneratedPosition.kind !== "percentage" || lastGeneratedPosition.value > 1) break;
-		if (!shouldContinue) break;
-		offset = roundTo(offset + percentageSum, 3);
 	}
-	return newStops;
-}
-//#endregion
-//#region src/parser/radial-gradient/parse-radial-gradient.ts
-function parseRadialGradient(source, tokens, startIndex) {
-	const functionToken = getTokenAt(tokens, startIndex);
-	if (functionToken === null || functionToken.kind !== TokenKind.FUNCTION_RADIAL_GRADIENT && functionToken.kind !== TokenKind.FUNCTION_REPEATING_RADIAL_GRADIENT) throw new Error("Expected radial gradient function token");
-	const repeat = functionToken.kind === TokenKind.FUNCTION_REPEATING_RADIAL_GRADIENT ? "repeating" : "normal";
-	let index = startIndex + 1;
-	index = expectToken(tokens, index, TokenKind.PAREN_OPEN).nextIndex;
-	const configResult = parseRadialConfig(tokens, index);
-	const config = configResult.node ?? createDefaultRadialConfig();
-	index = configResult.nextIndex;
-	if (configResult.node !== null) index = expectToken(tokens, index, TokenKind.COMMA).nextIndex;
-	const stopsResult = parseGradientStopList(source, tokens, index);
-	const stops = repeat === "repeating" ? expandColorStops$1(stopsResult.node) : stopsResult.node;
-	index = stopsResult.nextIndex;
-	index = expectToken(tokens, index, TokenKind.PAREN_CLOSE).nextIndex;
-	return {
-		node: {
-			kind: "radial",
-			repeat,
-			shape: config.shape,
-			size: config.size,
-			position: config.position,
-			stops
-		},
-		nextIndex: index
-	};
-}
-function parseRadialConfig(tokens, startIndex) {
-	let index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const shapeResult = parseRadialShape(tokens, index);
-	const shape = shapeResult.node ?? "ellipse";
-	index = shapeResult.nextIndex;
-	const sizeResult = parseRadialSize(tokens, index, shape);
-	const size = sizeResult.node ?? createDefaultRadialSize(shape);
-	index = sizeResult.nextIndex;
-	const positionResult = parseRadialPosition(tokens, index);
-	const position = positionResult.node ?? createDefaultRadialPosition();
-	index = positionResult.nextIndex;
-	if (!(shapeResult.node !== null || sizeResult.node !== null || positionResult.node !== null)) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	return {
-		node: {
-			shape,
-			size,
-			position
-		},
-		nextIndex: index
-	};
-}
-function parseRadialShape(tokens, startIndex) {
-	const index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const token = tokens[index];
-	if (token === void 0) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	if (token.kind === TokenKind.CIRCLE) return {
-		node: "circle",
-		nextIndex: index + 1
-	};
-	if (token.kind === TokenKind.ELLIPSE) return {
-		node: "ellipse",
-		nextIndex: index + 1
-	};
-	return {
-		node: null,
-		nextIndex: startIndex
-	};
+	return true;
 }
-function parseRadialSize(tokens, startIndex, shape) {
-	const index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const token = tokens[index];
-	if (token === void 0) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const keyword = parseRadialSizeKeyword(token.kind);
-	if (keyword !== null) return {
-		node: createRadialSizeFromKeyword(shape, keyword),
-		nextIndex: index + 1
-	};
-	const firstSize = parseLengthPercentageToken$1(token);
-	if (firstSize === null) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	let nextIndex = findNextNonWhitespaceIndex(tokens, index + 1);
-	let secondSize = null;
-	if (nextIndex !== -1) {
-		const nextToken = tokens[nextIndex];
-		if (nextToken !== void 0) secondSize = parseLengthPercentageToken$1(nextToken);
-	}
-	if (shape === "circle") return {
-		node: createRadialSizeFromRadii(shape, firstSize, firstSize),
-		nextIndex: index + 1
-	};
-	if (secondSize !== null && nextIndex !== -1) return {
-		node: createRadialSizeFromRadii(shape, firstSize, secondSize),
-		nextIndex
-	};
-	return {
-		node: createRadialSizeFromRadii(shape, firstSize, firstSize),
-		nextIndex: index + 1
-	};
-}
-function parseRadialPosition(tokens, startIndex) {
-	let index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const atToken = tokens[index];
-	if (atToken === void 0 || atToken.kind !== TokenKind.AT) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	index += 1;
-	const keywords = [];
-	let x = null;
-	let y = null;
-	while (true) {
-		const nextIndex = findNextNonWhitespaceIndex(tokens, index);
-		if (nextIndex === -1) break;
-		const token = tokens[nextIndex];
-		if (token === void 0) break;
-		const lengthPercentage = parseLengthPercentageToken$1(token);
-		if (lengthPercentage !== null) {
-			if (x === null) x = lengthPercentage;
-			else if (y === null) y = lengthPercentage;
-			else break;
-			index = nextIndex + 1;
+function tokenizePattern(input) {
+	const source = input.trim();
+	const tokens = [];
+	let index = 0;
+	while (index < source.length) {
+		const rest = source.slice(index);
+		const char = source[index];
+		if (/\s/.test(char)) {
+			index += 1;
+			continue;
+		}
+		if (rest.startsWith("color-stop")) {
+			tokens.push("color-stop");
+			index += 10;
 			continue;
 		}
-		if (token.kind === TokenKind.LEFT || token.kind === TokenKind.RIGHT || token.kind === TokenKind.TOP || token.kind === TokenKind.BOTTOM || token.kind === TokenKind.CENTER) {
-			keywords.push(token.kind);
-			index = nextIndex + 1;
+		if (rest.startsWith("color-hint")) {
+			tokens.push("color-hint");
+			index += 10;
 			continue;
 		}
-		break;
+		if (rest.startsWith("config")) {
+			tokens.push("config");
+			index += 6;
+			continue;
+		}
+		if (char === "^" || char === "." || char === "(" || char === ")" || char === "[" || char === "]" || char === "," || char === "|" || char === "&" || char === "!" || char === "~") {
+			tokens.push(char);
+			index += 1;
+			continue;
+		}
+		throw new Error(`Unexpected token near "${rest}" at index ${index}`);
 	}
-	return {
-		node: createRadialPositionNode(x, y, keywords),
-		nextIndex: index
-	};
+	return tokens;
 }
-function createDefaultRadialConfig() {
-	return {
-		shape: "ellipse",
-		size: createDefaultRadialSize("ellipse"),
-		position: createDefaultRadialPosition()
-	};
+//#endregion
+//#region src/dsl/index.ts
+function isValid(input, pattern) {
+	try {
+		validate(input, pattern);
+		return true;
+	} catch {
+		return false;
+	}
 }
-function createDefaultRadialSize(shape) {
-	return createRadialSizeFromKeyword(shape, "farthest-corner");
+function validate(classified, pattern) {
+	validatePattern(pattern);
+	const bodyTokens = tokenizePattern(pattern).slice(1, -1);
+	const result = matchExpression(classified, bodyTokens, 0, 0);
+	if (!result.matched) throw new Error("Input does not match pattern");
+	if (result.nextInputIndex !== classified.length) throw new Error("Pattern did not consume all inputs");
+	if (result.nextPatternIndex !== bodyTokens.length) throw new Error("Input ended before pattern was fully matched");
+	return true;
 }
-function createDefaultRadialPosition() {
+//#endregion
+//#region src/abi.ts
+const REPEATING_PREFIX = "repeating-";
+const PARAMS_VALIDATION_PATTERN = "^[([config,color-stop,([color-hint,color-stop]|color-stop)]|color-stop),~([color-hint,color-stop]|color-stop)].";
+function parseStringToAbi(value, pattern = PARAMS_VALIDATION_PATTERN) {
+	const source = value.trim();
+	if (source.length === 0) throw new Error("Expected function call, received empty string");
+	const { functionName, isRepeating, inputs } = extractOuterFunctionCall(source);
+	const classified = classifyInputs(inputs);
+	validate(classified, pattern);
 	return {
-		kind: "position",
-		x: {
-			kind: "percentage",
-			value: .5
-		},
-		y: {
-			kind: "percentage",
-			value: .5
-		},
-		keywords: ["center"]
+		functionName,
+		isRepeating,
+		inputs: classified
 	};
 }
-function createRadialPositionNode(x, y, keywords) {
-	if (keywords.length > 0 && x === null && y === null) return {
-		kind: "position",
-		x: {
-			kind: "percentage",
-			value: .5
-		},
-		y: {
-			kind: "percentage",
-			value: .5
-		},
-		keywords
-	};
-	return {
-		kind: "position",
-		x: x ?? {
-			kind: "percentage",
-			value: .5
-		},
-		y: y ?? {
-			kind: "percentage",
-			value: .5
-		},
-		keywords
-	};
+function isColorHint(value) {
+	return /^-?\d*\.?\d+(%|deg|rad|turn|grad|px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|q)?$/i.test(value.trim());
 }
-function createRadialSizeFromKeyword(shape, keyword) {
-	return {
-		kind: "size",
-		shape,
-		keyword,
-		radiusX: {
-			kind: "percentage",
-			value: 1
-		},
-		radiusY: {
-			kind: "percentage",
-			value: shape === "circle" ? 1 : 1
-		}
-	};
+function isColorStop(value) {
+	try {
+		const chunk = splitTopLevelByWhitespace(value)[0];
+		return parse$1(chunk) !== void 0;
+	} catch {
+		return false;
+	}
+}
+function isConfig(value) {
+	return !isColorHint(value) && !isColorStop(value);
 }
-function createRadialSizeFromRadii(shape, radiusX, radiusY) {
+function classifyInputs(inputs) {
+	const normalizedTypes = inputs.map((value) => value.trim()).filter((value) => value.length > 0);
+	if (normalizedTypes.length === 0) return [];
+	return normalizedTypes.map((value, index) => {
+		if (index === 0 && !isColorStop(value)) return {
+			type: "config",
+			value
+		};
+		if (isColorStop(value)) return {
+			type: "color-stop",
+			value
+		};
+		if (isColorHint(value)) return {
+			type: "color-hint",
+			value
+		};
+		return {
+			type: "config",
+			value
+		};
+	});
+}
+function extractOuterFunctionCall(value) {
+	const openIndex = value.indexOf("(");
+	if (openIndex <= 0) throw new Error("Expected function opening parenthesis");
+	let functionName = value.slice(0, openIndex).trim();
+	if (functionName.length === 0) throw new Error("Expected function name before \"(\"");
+	const isRepeating = functionName.startsWith(REPEATING_PREFIX);
+	if (isRepeating) functionName = functionName.slice(10);
+	const closeIndex = findOuterClosingParenIndex(value, openIndex);
+	if (closeIndex === -1) throw new Error("Unclosed function parenthesis");
+	const inputs = splitTopLevelInputs(value.slice(openIndex + 1, closeIndex));
 	return {
-		kind: "size",
-		shape,
-		keyword: "farthest-corner",
-		radiusX,
-		radiusY
+		functionName,
+		isRepeating,
+		inputs
 	};
 }
-function parseRadialSizeKeyword(kind) {
-	switch (kind) {
-		case TokenKind.CLOSEST_SIDE: return "closest-side";
-		case TokenKind.CLOSEST_CORNER: return "closest-corner";
-		case TokenKind.FARTHEST_SIDE: return "farthest-side";
-		case TokenKind.FARTHEST_CORNER: return "farthest-corner";
-		default: return null;
+function findOuterClosingParenIndex(value, openIndex) {
+	let depth = 0;
+	for (let i = openIndex; i < value.length; i += 1) {
+		const char = value[i];
+		if (char === "(") {
+			depth += 1;
+			continue;
+		}
+		if (char === ")") {
+			depth -= 1;
+			if (depth === 0) return i;
+			if (depth < 0) return -1;
+		}
 	}
+	return -1;
 }
-function parseLengthPercentageToken$1(token) {
-	if (token.kind === TokenKind.PERCENTAGE) return {
-		kind: "percentage",
-		value: token.value
-	};
-	if (token.kind === TokenKind.DIMENSION) return {
-		kind: "dimension",
-		value: token.value,
-		unit: token.unit
-	};
-	return null;
+function splitTopLevelInputs(value) {
+	const result = [];
+	let current = "";
+	let parenDepth = 0;
+	let braceDepth = 0;
+	let bracketDepth = 0;
+	for (let i = 0; i < value.length; i += 1) {
+		const char = value[i];
+		if (char === "(") {
+			parenDepth += 1;
+			current += char;
+			continue;
+		}
+		if (char === ")") {
+			parenDepth -= 1;
+			current += char;
+			continue;
+		}
+		if (char === "{") {
+			braceDepth += 1;
+			current += char;
+			continue;
+		}
+		if (char === "}") {
+			braceDepth -= 1;
+			current += char;
+			continue;
+		}
+		if (char === "[") {
+			bracketDepth += 1;
+			current += char;
+			continue;
+		}
+		if (char === "]") {
+			bracketDepth -= 1;
+			current += char;
+			continue;
+		}
+		if (char === "," && parenDepth === 0 && braceDepth === 0 && bracketDepth === 0) {
+			pushTrimmed(result, current);
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	pushTrimmed(result, current);
+	return result;
+}
+function pushTrimmed(target, value) {
+	const trimmed = value.trim();
+	if (trimmed.length > 0) target.push(trimmed);
+}
+function splitTopLevelByWhitespace(value) {
+	const source = value.trim();
+	const result = [];
+	let current = "";
+	let parenDepth = 0;
+	let braceDepth = 0;
+	let bracketDepth = 0;
+	for (let i = 0; i < source.length; i += 1) {
+		const char = source[i];
+		if (char === "(") {
+			parenDepth += 1;
+			current += char;
+			continue;
+		}
+		if (char === ")") {
+			parenDepth -= 1;
+			current += char;
+			continue;
+		}
+		if (char === "{") {
+			braceDepth += 1;
+			current += char;
+			continue;
+		}
+		if (char === "}") {
+			braceDepth -= 1;
+			current += char;
+			continue;
+		}
+		if (char === "[") {
+			bracketDepth += 1;
+			current += char;
+			continue;
+		}
+		if (char === "]") {
+			bracketDepth -= 1;
+			current += char;
+			continue;
+		}
+		if (/\s/.test(char) && parenDepth === 0 && braceDepth === 0 && bracketDepth === 0) {
+			if (current.trim().length > 0) {
+				result.push(current.trim());
+				current = "";
+			}
+			continue;
+		}
+		current += char;
+	}
+	if (current.trim().length > 0) result.push(current.trim());
+	return result;
 }
-function expandColorStops$1(stops) {
-	if (stops.length < 2) return stops;
-	const lastPosition = stops[stops.length - 1]?.position;
-	if (!lastPosition || lastPosition.kind !== "percentage") return stops;
-	if (lastPosition.value >= 1) return stops;
-	const percentageSum = stops.reduce((sum, stop) => {
-		const position = stop.position;
-		if (!position || position.kind !== "percentage") return sum;
-		return sum + position.value;
-	}, 0);
-	if (percentageSum <= 0) return stops;
-	const newStops = [...stops];
-	let offset = percentageSum;
-	while ((newStops[newStops.length - 1]?.position.value ?? 0) <= 1) {
-		for (const stop of stops) {
-			const position = stop.position;
-			if (!position || position.kind !== "percentage") continue;
-			newStops.push({
-				...stop,
-				position: {
-					kind: "percentage",
-					value: position.value + offset
-				}
+//#endregion
+//#region src/gradients/GradientBase.ts
+var GradientBase = class {
+	_isRepeating;
+	_config;
+	_stops;
+	constructor(options) {
+		this._isRepeating = options.isRepeating;
+		this._config = this._cloneConfig(options.config);
+		this._stops = this._getSortedStops(this._cloneStops(options.stops));
+		this._validateConfig(this._config);
+		this._validateStops(this._stops);
+	}
+	get isRepeating() {
+		return this._isRepeating;
+	}
+	get config() {
+		return this._cloneConfig(this._config);
+	}
+	get stops() {
+		return this._cloneStops(this._stops);
+	}
+	toJSON() {
+		return {
+			type: this.type,
+			isRepeating: this.isRepeating,
+			config: this.config,
+			stops: this.stops
+		};
+	}
+	addStop(stop) {
+		const nextStops = [...this._cloneStops(this._stops), ...this._cloneStops([stop])];
+		const sortedStops = this._getSortedStops(nextStops);
+		this._validateStops(sortedStops);
+		this._stops = sortedStops;
+	}
+	static fromString(_) {
+		throw new Error("Not implimented");
+	}
+	static fromAbi(_) {
+		throw new Error("Not implimented");
+	}
+	removeStop(index) {
+		if (!Number.isInteger(index)) throw new TypeError("Gradient stop index must be an integer");
+		if (index < 0 || index >= this._stops.length) throw new RangeError("Gradient stop index is out of bounds");
+		if (this._stops.filter((stop) => stop.type === "color-stop").length <= this._minColorStopsCount()) throw new Error(`Color stop count should be greather than ${this._minColorStopsCount()}`);
+		const nextIndex = index + 1 > this._stops.length - 1 ? this._stops.length - 1 : index + 1;
+		const prevIndex = index - 1 >= 0 ? index - 1 : 0;
+		if (index !== nextIndex && this._stops[nextIndex].type === "color-hint") this._stops.splice(nextIndex, 1);
+		this._stops.splice(index, 1);
+		if (index !== prevIndex && this._stops[prevIndex].type === "color-hint") this._stops.splice(prevIndex, 1);
+	}
+	equals(other) {
+		if (this.type !== other.type) return false;
+		if (this.isRepeating !== other.isRepeating) return false;
+		if (JSON.stringify(this.config) !== JSON.stringify(other.config)) return false;
+		if (this.stops.length !== other.stops.length) return false;
+		for (let index = 0; index < this.stops.length; index++) {
+			const left = this.stops[index];
+			const right = other.stops[index];
+			if (left.type !== right.type || left.value !== right.value || left.position !== right.position) return false;
+		}
+		return true;
+	}
+	_minColorStopsCount() {
+		return 0;
+	}
+	_getSortedStops(stops) {
+		return stops.map((stop, index) => ({
+			stop,
+			index
+		})).sort((a, b) => {
+			if (a.stop.position !== b.stop.position) return a.stop.position - b.stop.position;
+			return a.index - b.index;
+		}).map((item) => item.stop);
+	}
+	_validateStops(value) {
+		this._validateStopsShape(value);
+		this._validateStopsSequence(value);
+	}
+	_validateStopsShape(value) {
+		if (!Array.isArray(value)) throw new TypeError("Gradient stops must be an array");
+		for (const stop of value) {
+			if (typeof stop !== "object" || stop === null) throw new TypeError("Gradient stop must be an object");
+			if (stop.type !== "color-stop" && stop.type !== "color-hint") throw new TypeError(`Invalid gradient stop type: ${String(stop.type)}`);
+			if (typeof stop.value !== "string") throw new TypeError("Gradient stop value must be a string");
+			if (typeof stop.position !== "number" || Number.isNaN(stop.position)) throw new TypeError("Gradient stop position must be a valid number");
+		}
+	}
+	_validateStopsSequence(value) {
+		if (value.length < this._minColorStopsCount()) throw new TypeError(`Gradient must contain at least ${this._minColorStopsCount()} stop`);
+		if (value[0].type !== "color-stop") throw new TypeError("Gradient stop sequence must start with a color-stop");
+		if (value[value.length - 1].type === "color-hint") throw new TypeError("Gradient stop sequence cannot end with a color-hint");
+		for (let index = 1; index < value.length; index++) {
+			const prev = value[index - 1];
+			const current = value[index];
+			if (prev.type === "color-hint" && current.type !== "color-stop") throw new TypeError("A color-hint must be followed by a color-stop");
+		}
+	}
+	_cloneStops(stops) {
+		return stops.map((stop) => ({ ...stop }));
+	}
+	_cloneConfig(value) {
+		if (typeof value !== "object" || value === null) return value;
+		if (Array.isArray(value)) return [...value];
+		return { ...value };
+	}
+	_buildSerializedStopTokens() {
+		const result = [];
+		for (let index = 0; index < this.stops.length; index++) {
+			const current = this.stops[index];
+			if (current.type === "color-hint") {
+				result.push({
+					type: "color-hint",
+					position: current.position
+				});
+				continue;
+			}
+			const next = this.stops[index + 1];
+			if (next && next.type === "color-stop" && next.value === current.value) {
+				result.push({
+					type: "color-stop",
+					value: current.value,
+					positions: [current.position, next.position]
+				});
+				index += 1;
+				continue;
+			}
+			result.push({
+				type: "color-stop",
+				value: current.value,
+				positions: [current.position]
 			});
 		}
-		offset += percentageSum;
+		return result;
 	}
-	return newStops;
-}
+	_canOmitAllStopPositions(tokens) {
+		const stopTokens = tokens.filter((token) => token.type === "color-stop");
+		if (tokens.some((token) => token.type === "color-hint")) return false;
+		if (stopTokens.some((token) => token.positions.length !== 1)) return false;
+		if (stopTokens.length <= 1) return false;
+		const epsilon = 1e-6;
+		for (let index = 0; index < stopTokens.length; index++) {
+			const expected = index / (stopTokens.length - 1);
+			const actual = stopTokens[index].positions[0];
+			if (Math.abs(actual - expected) > epsilon) return false;
+		}
+		return true;
+	}
+	_serializeStopsCompact() {
+		const tokens = this._buildSerializedStopTokens();
+		if (this._canOmitAllStopPositions(tokens)) return tokens.map((token) => {
+			if (token.type !== "color-stop") throw new Error("Unexpected color-hint token in compact stop serialization");
+			return token.value;
+		});
+		return tokens.map((token) => {
+			if (token.type === "color-hint") return `${this._formatPercent(token.position)}%`;
+			if (token.positions.length === 2) return `${token.value} ${this._formatPercent(token.positions[0])}% ${this._formatPercent(token.positions[1])}%`;
+			return `${token.value} ${this._formatPercent(token.positions[0])}%`;
+		});
+	}
+	_formatPercent(value) {
+		return roundTo(value * 100, 3);
+	}
+	static _normalizeAbiInputsToStops(inputs) {
+		const pending = [];
+		for (const input of inputs) {
+			if (input.type === "color-hint") {
+				pending.push({
+					type: "color-hint",
+					value: input.value,
+					position: this._parsePosition(input.value)
+				});
+				continue;
+			}
+			if (input.type === "color-stop") {
+				const parsed = this._parseColorStopInput(input.value);
+				pending.push(...parsed);
+				continue;
+			}
+			throw new SyntaxError(`Unsupported linear gradient ABI input type: "${input.type}"`);
+		}
+		return this._resolvePendingStops(pending);
+	}
+	static _parsePosition(input) {
+		const match = input.trim().toLowerCase().match(/^([+-]?(?:\d+\.?\d*|\.\d+))%$/);
+		if (match === null) throw new SyntaxError(`Invalid gradient stop position: "${input}"`);
+		const numeric = Number(match[1]);
+		if (!Number.isFinite(numeric)) throw new SyntaxError(`Invalid gradient stop position: "${input}"`);
+		return numeric / 100;
+	}
+	static _parseColorStopInput(input) {
+		const parts = splitTopLevelByWhitespace(input);
+		if (parts.length === 0) throw new SyntaxError("Color-stop input cannot be empty");
+		const positions = [];
+		while (parts.length > 0) {
+			const last = parts[parts.length - 1];
+			if (!/%$/.test(last)) break;
+			positions.unshift(this._parsePosition(last));
+			parts.pop();
+			if (positions.length === 2) break;
+		}
+		const color = parts.join(" ").trim();
+		if (color.length === 0) throw new SyntaxError(`Color-stop is missing color value: "${input}"`);
+		if (positions.length === 0) return [{
+			type: "color-stop",
+			value: color
+		}];
+		if (positions.length === 1) return [{
+			type: "color-stop",
+			value: color,
+			position: positions[0]
+		}];
+		return [{
+			type: "color-stop",
+			value: color,
+			position: positions[0]
+		}, {
+			type: "color-stop",
+			value: color,
+			position: positions[1]
+		}];
+	}
+	static _resolvePendingStops(input) {
+		if (input.length === 0) throw new SyntaxError("Linear gradient must contain at least one stop");
+		const stops = input.map((item) => ({ ...item }));
+		const firstColorStopIndex = stops.findIndex((item) => item.type === "color-stop");
+		const lastColorStopIndex = [...stops].reverse().findIndex((item) => item.type === "color-stop");
+		if (firstColorStopIndex === -1) throw new SyntaxError("Linear gradient must contain at least one color-stop");
+		const realLastColorStopIndex = stops.length - 1 - lastColorStopIndex;
+		if (stops[firstColorStopIndex].position === void 0) stops[firstColorStopIndex].position = 0;
+		if (stops[realLastColorStopIndex].position === void 0) stops[realLastColorStopIndex].position = 1;
+		let segmentStart = -1;
+		for (let index = 0; index < stops.length; index++) {
+			const current = stops[index];
+			if (current.position !== void 0) {
+				if (segmentStart !== -1) {
+					const start = stops[segmentStart];
+					const end = current;
+					const gap = index - segmentStart;
+					for (let inner = 1; inner < gap; inner++) {
+						const item = stops[segmentStart + inner];
+						if (item.position === void 0) item.position = start.position + (end.position - start.position) * inner / gap;
+					}
+				}
+				segmentStart = index;
+			}
+		}
+		return stops.map((item) => {
+			if (item.position === void 0) throw new SyntaxError("Failed to resolve gradient stop position");
+			return {
+				type: item.type,
+				value: item.value,
+				position: item.position
+			};
+		});
+	}
+};
 //#endregion
-//#region src/parser/conic-gradient/parse-conic-gradient.ts
-function parseConicGradient(source, tokens, startIndex) {
-	const functionToken = getTokenAt(tokens, startIndex);
-	if (functionToken === null || functionToken.kind !== TokenKind.FUNCTION_CONIC_GRADIENT && functionToken.kind !== TokenKind.FUNCTION_REPEATING_CONIC_GRADIENT) throw new Error("Expected conic gradient function token");
-	const repeat = functionToken.kind === TokenKind.FUNCTION_REPEATING_CONIC_GRADIENT ? "repeating" : "normal";
-	let index = startIndex + 1;
-	index = expectToken(tokens, index, TokenKind.PAREN_OPEN).nextIndex;
-	const preludeResult = parseConicPrelude(tokens, index);
-	const prelude = preludeResult.node ?? createDefaultConicPrelude();
-	index = preludeResult.nextIndex;
-	if (preludeResult.node !== null) index = expectToken(tokens, index, TokenKind.COMMA).nextIndex;
-	const stopsResult = parseGradientStopList(source, tokens, index);
-	const stops = repeat === "repeating" ? expandColorStops(stopsResult.node) : stopsResult.node;
-	index = stopsResult.nextIndex;
-	index = expectToken(tokens, index, TokenKind.PAREN_CLOSE).nextIndex;
-	return {
-		node: {
-			kind: "conic",
-			repeat,
-			from: prelude.from,
-			position: prelude.position,
+//#region src/gradients/LinearGradient.ts
+var LinearGradient = class LinearGradient extends GradientBase {
+	type = "linear-gradient";
+	constructor(config) {
+		super(config);
+	}
+	static normalizeConfig(value) {
+		if (typeof value === "string") {
+			const tokens = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+			if (tokens.length === 0) throw new SyntaxError("Linear gradient angle keyword cannot be empty");
+			if (tokens[0] !== "to") throw new SyntaxError("Linear gradient keyword direction must start with \"to\"");
+			const directions = tokens.slice(1);
+			if (directions.length === 0 || directions.length > 2) throw new SyntaxError("Linear gradient keyword direction must contain one or two direction tokens");
+			const allowed = new Set([
+				"top",
+				"right",
+				"bottom",
+				"left"
+			]);
+			for (const direction of directions) if (!allowed.has(direction)) throw new SyntaxError(`Invalid linear gradient direction token: "${direction}"`);
+			if (new Set(directions).size !== directions.length) throw new SyntaxError("Linear gradient keyword direction cannot contain duplicate tokens");
+			const hasTop = directions.includes("top");
+			const hasRight = directions.includes("right");
+			const hasBottom = directions.includes("bottom");
+			const hasLeft = directions.includes("left");
+			if (hasTop && hasBottom || hasLeft && hasRight) throw new SyntaxError("Linear gradient keyword direction contains conflicting tokens");
+			if (hasTop && hasLeft) return { angle: degToRad(315) };
+			else if (hasTop && hasRight) return { angle: degToRad(45) };
+			else if (hasBottom && hasLeft) return { angle: degToRad(225) };
+			else if (hasBottom && hasRight) return { angle: degToRad(135) };
+			else if (hasTop) return { angle: degToRad(0) };
+			else if (hasRight) return { angle: degToRad(90) };
+			else if (hasBottom) return { angle: degToRad(180) };
+			else if (hasLeft) return { angle: degToRad(270) };
+			throw new SyntaxError(`Unsupported linear gradient keyword direction: "${value}"`);
+		}
+		switch (value.unit) {
+			case "deg": return { angle: normalizeAngleRad(degToRad(value.value)) };
+			case "rad": return { angle: normalizeAngleRad(value.value) };
+			case "turn": return { angle: normalizeAngleRad(turnToRad(value.value)) };
+			case "grad": return { angle: normalizeAngleRad(gradToRad(value.value)) };
+			default: throw new SyntaxError(`Unsupported angle unit: "${value.unit}"`);
+		}
+	}
+	static fromString(input) {
+		return LinearGradient.fromAbi(parseStringToAbi(input));
+	}
+	static fromAbi(abi) {
+		let config = { angle: 0 };
+		if (abi.inputs[0].type === "config") {
+			const inputValue = abi.inputs[0].value.trim().toLowerCase();
+			if (inputValue.length === 0) throw new SyntaxError("Linear gradient config cannot be empty");
+			if (inputValue.startsWith("to ")) config = LinearGradient.normalizeConfig(inputValue);
+			else {
+				const match = inputValue.match(/^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/i);
+				if (match === null) throw new SyntaxError(`Invalid linear gradient angle: "${inputValue}"`);
+				const rawValue = Number(match[1]);
+				const unit = match[2].toLowerCase();
+				if (!Number.isFinite(rawValue)) throw new SyntaxError(`Invalid linear gradient angle value: "${inputValue}"`);
+				config = LinearGradient.normalizeConfig({
+					value: rawValue,
+					unit
+				});
+			}
+		}
+		const inputsWithoutConfig = abi.inputs[0]?.type === "config" ? abi.inputs.slice(1) : abi.inputs;
+		const stops = LinearGradient._normalizeAbiInputsToStops(inputsWithoutConfig);
+		return new LinearGradient({
+			isRepeating: abi.isRepeating,
+			config,
 			stops
-		},
-		nextIndex: index
-	};
-}
-function parseConicPrelude(tokens, startIndex) {
-	let index = startIndex;
-	const fromResult = parseConicFrom(tokens, index);
-	const from = fromResult.node ?? createDefaultConicFrom();
-	index = fromResult.nextIndex;
-	const positionResult = parseConicPosition(tokens, index);
-	const position = positionResult.node ?? createDefaultConicPosition();
-	index = positionResult.nextIndex;
-	if (!(fromResult.node !== null || positionResult.node !== null)) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	return {
-		node: {
-			from,
+		});
+	}
+	clone() {
+		return new LinearGradient(this.toJSON());
+	}
+	toString() {
+		return `${this.isRepeating ? `repeating-${this.type}` : this.type}(${[this.config.angle === 0 ? "" : `${roundTo(radToDeg(this.config.angle), 3)}deg`, ...this._serializeStopsCompact()].filter(Boolean).join(", ")})`;
+	}
+	_validateConfig(_) {}
+};
+//#endregion
+//#region src/gradients/RadialGradient.ts
+var RadialGradient = class RadialGradient extends GradientBase {
+	type = "radial-gradient";
+	constructor(config) {
+		super(config);
+	}
+	static fromString(input) {
+		return RadialGradient.fromAbi(parseStringToAbi(input));
+	}
+	static fromAbi(abi) {
+		if (abi.functionName !== "radial-gradient") throw new Error("Invalid function name for RadialGradient");
+		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 RadialGradient({
+			isRepeating: abi.isRepeating,
+			config,
+			stops
+		});
+	}
+	clone() {
+		return new RadialGradient(this.toJSON());
+	}
+	toString() {
+		return `${this.isRepeating ? `repeating-${this.type}` : this.type}(${[this._serializeRadialConfig(this.config), ...this._serializeStopsCompact()].filter(Boolean).join(", ")})`;
+	}
+	_validateConfig(config) {
+		if (config.shape !== "circle" && config.shape !== "ellipse") throw new Error("Invalid shape");
+		if (!config.position) throw new Error("Position is required");
+		if (!config.size) throw new Error("Size is required");
+	}
+	_serializeRadialConfig(config) {
+		const parts = [];
+		parts.push(config.shape);
+		if (config.size.kind === "extent") parts.push(config.size.value);
+		else {
+			const x = this._formatLengthPercentage(config.size.x);
+			const y = config.size.y ? ` ${this._formatLengthPercentage(config.size.y)}` : "";
+			parts.push(`${x}${y}`);
+		}
+		parts.push(`at ${this._serializePosition(config.position)}`);
+		if (config.interpolation) if (config.interpolation.kind === "rectangular") parts.push(`in ${config.interpolation.space}`);
+		else {
+			let str = `in ${config.interpolation.space}`;
+			if (config.interpolation.hueMethod) str += ` ${config.interpolation.hueMethod} hue`;
+			parts.push(str);
+		}
+		return parts.join(" ");
+	}
+	_serializePosition(position) {
+		if (position.kind === "keywords") return `${position.x} ${position.y}`;
+		const x = this._formatLengthPercentage(position.x);
+		const y = position.y ? this._formatLengthPercentage(position.y) : "";
+		return y === "" ? x : `${x} ${y}`;
+	}
+	_formatLengthPercentage(value) {
+		if (value.kind === "percent") return `${value.value}%`;
+		return `${value.value}${value.unit}`;
+	}
+	static _parseConfig(inputs) {
+		let shape = "ellipse";
+		let size = {
+			kind: "extent",
+			value: "farthest-corner"
+		};
+		let position = {
+			kind: "keywords",
+			x: "center",
+			y: "center"
+		};
+		for (const input of inputs) {
+			if (input.type !== "config") continue;
+			const tokens = splitTopLevelByWhitespace(input.value);
+			for (let i = 0; i < tokens.length; i++) {
+				const t = tokens[i];
+				if (t === "circle" || t === "ellipse") {
+					shape = t;
+					continue;
+				}
+				if (t === "closest-side" || t === "closest-corner" || t === "farthest-side" || t === "farthest-corner") {
+					size = {
+						kind: "extent",
+						value: t
+					};
+					continue;
+				}
+				if (t === "at") {
+					const xToken = tokens[i + 1];
+					const yToken = tokens[i + 2];
+					if ((xToken === "left" || xToken === "center" || xToken === "right") && (yToken === "top" || yToken === "center" || yToken === "bottom")) position = {
+						kind: "keywords",
+						x: xToken,
+						y: yToken
+					};
+					else position = {
+						kind: "values",
+						x: this._parseLengthPercentage(xToken),
+						y: this._parseLengthPercentage(yToken)
+					};
+					i += 2;
+					continue;
+				}
+			}
+		}
+		return {
+			shape,
+			size,
 			position
-		},
-		nextIndex: index
-	};
-}
-function parseConicFrom(tokens, startIndex) {
-	let index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const fromToken = tokens[index];
-	if (fromToken === void 0 || fromToken.kind !== TokenKind.FROM) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	index += 1;
-	const angleIndex = findNextNonWhitespaceIndex(tokens, index);
-	if (angleIndex === -1) throw new Error("Expected angle after \"from\"");
-	const angleToken = tokens[angleIndex];
-	if (angleToken === void 0) throw new Error("Expected angle token after \"from\"");
-	const angleRad = parseAngleFromToken(angleToken);
-	if (angleRad === null) throw new Error("Expected valid angle after \"from\"");
-	if (angleToken.kind !== TokenKind.DIMENSION) throw new Error("Expected dimension token for conic angle");
-	return {
-		node: createConicFromNode(angleToken.value, angleToken.unit, angleRad),
-		nextIndex: angleIndex + 1
-	};
-}
-function parseConicPosition(tokens, startIndex) {
-	let index = findNextNonWhitespaceIndex(tokens, startIndex);
-	if (index === -1) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	const atToken = tokens[index];
-	if (atToken === void 0 || atToken.kind !== TokenKind.AT) return {
-		node: null,
-		nextIndex: startIndex
-	};
-	index += 1;
-	let x = null;
-	let y = null;
-	const keywords = [];
-	while (true) {
-		const nextIndex = findNextNonWhitespaceIndex(tokens, index);
-		if (nextIndex === -1) break;
-		const token = tokens[nextIndex];
-		if (token === void 0) break;
-		const lengthPercentage = parseLengthPercentageToken(token);
-		if (lengthPercentage !== null) {
-			if (x === null) x = lengthPercentage;
-			else if (y === null) y = lengthPercentage;
-			else break;
-			index = nextIndex + 1;
-			continue;
+		};
+	}
+	static _parseLengthPercentage(input) {
+		if (input.endsWith("%")) return {
+			kind: "percent",
+			value: parseFloat(input)
+		};
+		const match = input.match(/^(-?\d*\.?\d+)([a-zA-Z]+)$/);
+		if (!match) throw new Error(`Invalid length-percentage: ${input}`);
+		return {
+			kind: "length",
+			value: parseFloat(match[1]),
+			unit: match[2]
+		};
+	}
+};
+//#endregion
+//#region src/gradients/ConicGradient.ts
+var ConicGradient = class ConicGradient extends GradientBase {
+	type = "conic-gradient";
+	constructor(config) {
+		super(config);
+	}
+	clone() {
+		return new ConicGradient(this.toJSON());
+	}
+	toString() {
+		return `${this.isRepeating ? `repeating-${this.type}` : this.type}(${[this._serializeConfig(), ...this._serializeStopsCompact()].filter(Boolean).join(", ")})`;
+	}
+	static fromString(input) {
+		return this.fromAbi(parseStringToAbi(input));
+	}
+	static fromAbi(abi) {
+		if (abi.functionName !== "conic-gradient") throw new Error("Invalid function name for ConicGradient");
+		const configInput = abi.inputs.find((input) => input.type === "config");
+		const inputsWithoutConfig = abi.inputs.filter((input) => input.type !== "config");
+		const config = this._parseConfig(configInput?.value);
+		const stops = this._normalizeAbiInputsToStops(inputsWithoutConfig);
+		return new ConicGradient({
+			isRepeating: abi.isRepeating,
+			config,
+			stops
+		});
+	}
+	_validateConfig(config) {}
+	_serializeConfig() {
+		const parts = [];
+		const angle = this.config.from;
+		parts.push(`from ${angle.value}${angle.unit}`);
+		parts.push(`at ${this._serializePosition(this.config.position)}`);
+		if (this.config.interpolation) {
+			const i = this.config.interpolation;
+			if (i.kind === "rectangular") parts.push(`in ${i.space}`);
+			else {
+				let str = `in ${i.space}`;
+				if (i.hueMethod) str += ` ${i.hueMethod} hue`;
+				parts.push(str);
+			}
 		}
-		if (token.kind === TokenKind.LEFT || token.kind === TokenKind.RIGHT || token.kind === TokenKind.TOP || token.kind === TokenKind.BOTTOM || token.kind === TokenKind.CENTER) {
-			keywords.push(token.kind);
-			index = nextIndex + 1;
-			continue;
+		return parts.join(" ");
+	}
+	_serializePosition(position) {
+		if (position.kind === "keywords") return `${position.x} ${position.y}`;
+		const x = this._formatLengthPercentage(position.x);
+		const y = position.y ? this._formatLengthPercentage(position.y) : "";
+		return y === "" ? x : `${x} ${y}`;
+	}
+	_formatLengthPercentage(value) {
+		if (value.kind === "percent") return `${value.value}%`;
+		return `${value.value}${value.unit}`;
+	}
+	static _parseConfig(input) {
+		const config = {
+			from: {
+				kind: "angle",
+				value: 0,
+				unit: "deg"
+			},
+			position: {
+				kind: "keywords",
+				x: "center",
+				y: "center"
+			}
+		};
+		if (!input) return config;
+		const tokens = splitTopLevelByWhitespace(input);
+		for (let i = 0; i < tokens.length; i++) {
+			const token = tokens[i];
+			if (token === "from") {
+				config.from = this._parseAngle(tokens[i + 1]);
+				i += 1;
+				continue;
+			}
+			if (token === "at") {
+				const xToken = tokens[i + 1];
+				const yToken = tokens[i + 2];
+				if ((xToken === "left" || xToken === "center" || xToken === "right") && (yToken === "top" || yToken === "center" || yToken === "bottom")) config.position = {
+					kind: "keywords",
+					x: xToken,
+					y: yToken
+				};
+				else config.position = {
+					kind: "values",
+					x: this._parseLengthPercentage(xToken),
+					y: this._parseLengthPercentage(yToken)
+				};
+				i += 2;
+				continue;
+			}
+			if (token === "in") {
+				const space = tokens[i + 1];
+				const hueMethod = tokens[i + 2];
+				if (tokens[i + 3] === "hue" && (hueMethod === "shorter" || hueMethod === "longer" || hueMethod === "increasing" || hueMethod === "decreasing")) {
+					config.interpolation = {
+						kind: "polar",
+						space,
+						hueMethod
+					};
+					i += 3;
+					continue;
+				}
+				config.interpolation = {
+					kind: "rectangular",
+					space
+				};
+				i += 1;
+			}
 		}
-		break;
+		return config;
 	}
-	return {
-		node: createConicPositionNode(x, y, keywords),
-		nextIndex: index
-	};
-}
-function createDefaultConicPrelude() {
-	return {
-		from: createDefaultConicFrom(),
-		position: createDefaultConicPosition()
+	static _parseLengthPercentage(input) {
+		if (input.endsWith("%")) return {
+			kind: "percent",
+			value: parseFloat(input)
+		};
+		const match = input.match(/^(-?\d*\.?\d+)([a-zA-Z]+)$/);
+		if (!match) throw new Error(`Invalid length-percentage: ${input}`);
+		return {
+			kind: "length",
+			value: parseFloat(match[1]),
+			unit: match[2]
+		};
+	}
+	static _parseAngle(input) {
+		const match = input.match(/^(-?\d*\.?\d+)(deg|rad|turn|grad)$/);
+		if (!match) throw new Error(`Invalid angle: ${input}`);
+		return {
+			kind: "angle",
+			value: Number(match[1]),
+			unit: match[2]
+		};
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/css/ModuleTransformerLinearGradientToCss.ts
+var ModuleTransformerLinearGradientToCss = class {
+	target = "css";
+	gradientType = "linear-gradient";
+	to(input) {
+		if (!(input instanceof LinearGradient)) throw new Error("Expected LinearGradient");
+		return input.toString();
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/css/ModuleTransformerRadialGradientToCss.ts
+var ModuleTransformerRadialGradientToCss = class {
+	target = "css";
+	gradientType = "radial-gradient";
+	to(input) {
+		if (!(input instanceof RadialGradient)) throw new Error("Expected RadialGradient");
+		return input.toString();
+	}
+};
+//#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/canvas/ModuleTransformerLinearGradientToCanvas.ts
+const toRgb$2 = converter("rgb");
+function toCanvasColor$1(input) {
+	const color = toRgb$2(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: []
 	};
-}
-function createDefaultConicFrom() {
-	return createConicFromNode(0, "deg", 0);
-}
-function createDefaultConicPosition() {
 	return {
-		kind: "position",
-		x: {
-			kind: "percentage",
-			value: .5
-		},
-		y: {
-			kind: "percentage",
-			value: .5
-		},
-		keywords: ["center"]
+		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
+	}));
+}
+var ModuleTransformerLinearGradientToCanvas = class {
+	target = "canvas";
+	gradientType = "linear-gradient";
+	to(input) {
+		const gradient = input;
+		return { draw: (ctx, width, height) => {
+			const angle = gradient.config.angle;
+			const cx = width / 2;
+			const cy = height / 2;
+			const half = Math.max(width, height) / 2;
+			const dx = Math.sin(angle) * half;
+			const dy = Math.cos(angle) * half;
+			const x0 = cx - dx;
+			const y0 = cy - dy;
+			const x1 = cx + dx;
+			const y1 = cy + dy;
+			const { min, max, stops } = getStopRange$1(gradient.stops);
+			let startX = x0;
+			let startY = y0;
+			let endX = x1;
+			let endY = y1;
+			let normalizedStops = stops;
+			if (min < 0 || max > 1) {
+				const vx = x1 - x0;
+				const vy = y1 - y0;
+				startX = x0 + vx * min;
+				startY = y0 + vy * min;
+				endX = x0 + vx * max;
+				endY = y0 + vy * max;
+				normalizedStops = normalizeStops$1(stops, min, max);
+			}
+			const canvasGradient = ctx.createLinearGradient(startX, startY, endX, endY);
+			for (const stop of normalizedStops) canvasGradient.addColorStop(stop.position, toCanvasColor$1(stop.value));
+			ctx.fillStyle = canvasGradient;
+			ctx.fillRect(0, 0, width, height);
+		} };
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/canvas/ModuleTransformerRadialGradientToCanvas.ts
+const toRgb$1 = converter("rgb");
+function toCanvasColor(input) {
+	const color = toRgb$1(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return formatRgb(color);
+}
+function getStopRange(stops) {
+	const colorStops = stops.filter((stop) => stop.type === "color-stop" && stop.position != null);
+	if (!colorStops.length) return {
+		min: 0,
+		max: 1,
+		stops: []
 	};
-}
-function createConicFromNode(value, unit, normalizedRad) {
 	return {
-		kind: "angle",
-		value: {
-			kind: "dimension",
-			value,
-			unit
-		},
-		valueRaw: {
-			kind: "dimension",
-			value: roundTo(normalizedRad, 6),
-			unit: "rad"
+		min: Math.min(...colorStops.map((stop) => stop.position)),
+		max: Math.max(...colorStops.map((stop) => stop.position)),
+		stops: colorStops
+	};
+}
+function normalizeStops(stops, min, max) {
+	const range = max - min || 1;
+	return stops.map((stop) => ({
+		...stop,
+		position: (stop.position - min) / range
+	}));
+}
+var ModuleTransformerRadialGradientToCanvas = class {
+	target = "canvas";
+	gradientType = "radial-gradient";
+	to(input) {
+		const gradient = input;
+		return { draw: (ctx, width, height) => {
+			const pos = gradient.config.position;
+			let x = width / 2;
+			let y = height / 2;
+			if (pos.kind === "values") {
+				x = this._resolve(pos.x, width);
+				y = this._resolve(pos.y, height);
+			}
+			const dx = Math.max(x, width - x);
+			const dy = Math.max(y, height - y);
+			const radius = Math.sqrt(dx * dx + dy * dy);
+			const { min, max, stops } = getStopRange(gradient.stops);
+			let innerRadius = 0;
+			let outerRadius = radius;
+			let normalizedStops = stops;
+			if (min >= 0 && (min < 0 || max > 1)) {
+				innerRadius = radius * min;
+				outerRadius = radius * max;
+				normalizedStops = normalizeStops(stops, min, max);
+			} else if (max > 1) {
+				outerRadius = radius * max;
+				normalizedStops = normalizeStops(stops, min, max);
+			}
+			const g = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
+			for (const stop of normalizedStops) g.addColorStop(stop.position, toCanvasColor(stop.value));
+			ctx.fillStyle = g;
+			ctx.fillRect(0, 0, width, height);
+		} };
+	}
+	_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/ModuleTransformerConicGradientToCanvas.ts
+const toRgb = converter("rgb");
+var ModuleTransformerConicGradientToCanvas = class {
+	target = "canvas";
+	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 stops = this._normalizeStops(gradient.stops);
+			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(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/GradientTransformer.ts
+var GradientTransformer = class {
+	static _modules = /* @__PURE__ */ new Map();
+	static _initialized = false;
+	static add(module) {
+		this._ensureInitialized();
+		this._modules.set(this._getKey(module.target, module.gradientType), module);
+	}
+	static get(target, gradientType) {
+		this._ensureInitialized();
+		return this._modules.get(this._getKey(target, gradientType)) ?? null;
+	}
+	static remove(target, gradientType) {
+		this._ensureInitialized();
+		return this._modules.delete(this._getKey(target, gradientType));
+	}
+	static to(target, input) {
+		const gradient = typeof input === "string" ? GradientFactory.create(input) : input;
+		const module = this.get(target, gradient.type);
+		if (!module) throw new Error(`No transformer registered for target "${target}" and gradient "${gradient.type}"`);
+		return module.to(gradient);
+	}
+	static from(target, gradientType, input) {
+		const module = this.get(target, gradientType);
+		if (!module || !module.from) throw new Error(`No reverse transformer registered for target "${target}" and gradient "${gradientType}"`);
+		return module.from(input);
+	}
+	static _ensureInitialized() {
+		if (this._initialized) return;
+		this._initialized = true;
+		this.add(new ModuleTransformerLinearGradientToCss());
+		this.add(new ModuleTransformerRadialGradientToCss());
+		this.add(new ModuleTransformerConicGradientToCss());
+		this.add(new ModuleTransformerLinearGradientToCanvas());
+		this.add(new ModuleTransformerRadialGradientToCanvas());
+		this.add(new ModuleTransformerConicGradientToCanvas());
+	}
+	static _getKey(target, gradientType) {
+		return `${target}:${gradientType}`;
+	}
+};
+//#endregion
+//#region src/gradients/GradientFactory.ts
+var GradientFactory = class {
+	static _registry = /* @__PURE__ */ new Map();
+	static _initialized = false;
+	static add(type, value) {
+		this._ensureInitialized();
+		this._registry.set(type, value);
+	}
+	static get(functionName) {
+		this._ensureInitialized();
+		return this._registry.get(functionName) ?? null;
+	}
+	static remove(functionName) {
+		return this._registry.delete(functionName);
+	}
+	static create(input) {
+		const abi = typeof input === "string" ? parseStringToAbi(input) : input;
+		const adapter = this.get(abi.functionName);
+		if (!adapter) throw new Error(`No gradient registered for: ${abi.functionName}`);
+		return adapter.fromAbi(abi);
+	}
+	static isValid(input) {
+		try {
+			this.create(input);
+			return true;
+		} catch {
+			return false;
+		}
+	}
+	static _ensureInitialized() {
+		if (this._initialized) return;
+		this._initialized = true;
+		this.add("linear-gradient", LinearGradient);
+		this.add("radial-gradient", RadialGradient);
+		this.add("conic-gradient", ConicGradient);
+	}
+};
+function parse(input) {
+	return GradientFactory.create(input);
 }
-function createConicPositionNode(x, y, keywords) {
-	if (keywords.length > 0 && x === null && y === null) return {
-		kind: "position",
-		x: {
-			kind: "percentage",
-			value: .5
-		},
-		y: {
-			kind: "percentage",
-			value: .5
-		},
-		keywords: [...keywords]
-	};
-	return {
-		kind: "position",
-		x: x ?? {
-			kind: "percentage",
-			value: .5
-		},
-		y: y ?? {
-			kind: "percentage",
-			value: .5
-		},
-		keywords: [...keywords]
-	};
+function isGradient(input) {
+	return GradientFactory.isValid(input);
 }
-function parseLengthPercentageToken(token) {
-	if (token.kind === TokenKind.PERCENTAGE) return {
-		kind: "percentage",
-		value: token.value
-	};
-	if (token.kind === TokenKind.DIMENSION) return {
-		kind: "dimension",
-		value: token.value,
-		unit: token.unit
-	};
-	return null;
+function format(input) {
+	if (typeof input === "string") return parse(input).toString();
+	return input.toString();
 }
-function expandColorStops(stops) {
-	if (stops.length < 2) return stops;
-	const lastPosition = stops[stops.length - 1]?.position;
-	if (!lastPosition || lastPosition.kind !== "percentage") return stops;
-	if (lastPosition.value >= 1) return stops;
-	const percentageSum = roundTo(stops.reduce((sum, stop) => {
-		const position = stop.position;
-		if (!position || position.kind !== "percentage") return sum;
-		return sum + position.value;
-	}, 0), 3);
-	if (percentageSum <= 0) return stops;
-	const newStops = [...stops];
-	let offset = percentageSum;
-	while (true) {
-		let shouldContinue = false;
-		for (const stop of stops) {
-			const position = stop.position;
-			if (!position || position.kind !== "percentage") continue;
-			const nextValue = roundTo(position.value + offset, 3);
-			newStops.push({
-				...stop,
-				position: {
-					kind: "percentage",
-					value: nextValue
-				}
-			});
-			if (nextValue <= 1) shouldContinue = true;
-		}
-		const lastGeneratedPosition = newStops[newStops.length - 1]?.position;
-		if (!lastGeneratedPosition || lastGeneratedPosition.kind !== "percentage" || lastGeneratedPosition.value > 1) break;
-		if (!shouldContinue) break;
-		offset = roundTo(offset + percentageSum, 3);
-	}
-	return newStops;
+function transformTo(target, input) {
+	const gradient = typeof input === "string" ? parse(input) : input;
+	return GradientTransformer.to(target, gradient);
 }
-//#endregion
-//#region src/parser/parse.ts
-function parse(value) {
-	const tokens = tokenize(value);
-	const firstToken = getTokenAt(tokens, 0);
-	if (firstToken === null) throw new Error("Empty input");
-	switch (firstToken.kind) {
-		case TokenKind.FUNCTION_LINEAR_GRADIENT:
-		case TokenKind.FUNCTION_REPEATING_LINEAR_GRADIENT: return parseLinearGradient(value, tokens, 0).node;
-		case TokenKind.FUNCTION_RADIAL_GRADIENT:
-		case TokenKind.FUNCTION_REPEATING_RADIAL_GRADIENT: return parseRadialGradient(value, tokens, 0).node;
-		case TokenKind.FUNCTION_CONIC_GRADIENT:
-		case TokenKind.FUNCTION_REPEATING_CONIC_GRADIENT: return parseConicGradient(value, tokens, 0).node;
-		default: throw new Error(`Unsupported gradient type: ${firstToken.kind}`);
-	}
+function transformFrom(target, gradientType, input) {
+	return GradientTransformer.from(target, gradientType, input);
 }
 //#endregion
-export { GradientFunctionNameToToken, KeywordNameToToken, TokenKind, advance, ceilTo, clamp, consumeIf, createLexerState, createSpan, currentChar, degToRad, expectToken, findBalancedFunctionEndIndex, findNextNonWhitespaceIndex, floorTo, fromPercent, getNonWhitespaceTokenAt, getSourceSlice, getTokenAt, getTokenRangeSourceSlice, getTokenSourceSlice, gradToRad, isAlphaChar, isAngleUnit, isDigitChar, isEnd, isGradientFunctionToken, isIdentifierChar, isIdentifierStartChar, isKeywordToken, isNumericToken, isSignChar, isTriviaToken, isWhitespaceChar, nextToken, normalizeAngle, normalizeAngleDeg, normalizeAngleRad, parse, parseAngleFromToken, parseColorStop, parseConicGradient, parseGradientStopItem, parseGradientStopList, parseLinearGradient, parseRadialGradient, peekChar, radToDeg, readWhile, roundTo, skipWhitespace, toAngleRad, toPercent, tokenize, truncTo, turnToRad };
+export { ConicGradient, GradientBase, GradientFactory, GradientTransformer, LinearGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCss, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCss, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCss, PatternTokenKind, RadialGradient, ceilTo, clamp, degToRad, floorTo, format, fromPercent, gradToRad, isAngleUnit, isColorHint, isColorStop, isConfig, isGradient, isPatternSyntaxValid, isPatternValid, isValid, matchExpression, normalizeAngle, normalizeAngleDeg, normalizeAngleRad, parse, parseStringToAbi, radToDeg, roundTo, splitTopLevelByWhitespace, toAngleRad, toPercent, tokenizePattern, transformFrom, transformTo, truncTo, turnToRad, validate, validatePattern, validatePatternSemantic, validatePatternStructure, validatePatternSyntax };