refactor: restructure files to their domains, new preview overlay system, and dep graph

1 files changed, 0 insertions, 923 deletions

diff --git a/apps/web/src/lib/gradients/canvas.ts b/apps/web/src/lib/gradients/canvas.ts
deleted file mode 100644
index e2287333..00000000
--- a/apps/web/src/lib/gradients/canvas.ts
+++ /dev/null
@@ -1,923 +0,0 @@
-import type {
-	GradientAst,
-	Color,
-	ColorStop,
-	GradientOrientation,
-} from "./parser";
-import { parseGradient } from "./parser";
-
-type BackgroundLayer =
-	| { type: "color"; value: string }
-	| { type: "gradient"; value: GradientAst };
-
-type LinearPoints = {
-	x0: number;
-	y0: number;
-	x1: number;
-	y1: number;
-	length: number;
-};
-
-type RadialDimensions = {
-	cx: number;
-	cy: number;
-	rx: number;
-	ry: number;
-};
-
-type PositionKeyword = "left" | "center" | "right" | "top" | "bottom";
-
-type Distance =
-	| { type: "%"; value: string }
-	| { type: "position-keyword"; value: string }
-	| { type: "calc"; value: string }
-	| { type: "px"; value: string }
-	| { type: "em"; value: string };
-
-type Position = { type: "position"; value: { x?: Distance; y?: Distance } };
-
-type Shape = {
-	type: "shape";
-	value: "circle" | "ellipse";
-	style?: Distance | { type: "extent-keyword"; value: string } | Position;
-	at?: Position;
-};
-
-type DefaultRadial = { type: "default-radial"; at: Position };
-
-type ExtentKeyword = { type: "extent-keyword"; value: string; at?: Position };
-
-type RadialOrientation = Shape | ExtentKeyword | DefaultRadial;
-
-const gradientLayerPattern =
-	/^(?:-(webkit|o|ms|moz)-)?(linear-gradient|repeating-linear-gradient|radial-gradient|repeating-radial-gradient)/i;
-
-export function drawCssBackground({
-	ctx,
-	width,
-	height,
-	css,
-}: {
-	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-	width: number;
-	height: number;
-	css: string;
-}): void {
-	const layers = parseBackgroundLayers({ css });
-	const layersInPaintOrder = layers.slice().reverse();
-
-	for (const layer of layersInPaintOrder) {
-		if (layer.type === "color") {
-			ctx.fillStyle = layer.value;
-			ctx.fillRect(0, 0, width, height);
-			continue;
-		}
-
-		drawGradientLayer({ ctx, width, height, gradient: layer.value });
-	}
-}
-
-const parseBackgroundLayers = ({
-	css,
-}: {
-	css: string;
-}): Array<BackgroundLayer> => {
-	const segments = splitCssLayers({ css });
-	const layers: Array<BackgroundLayer> = [];
-
-	for (const segment of segments) {
-		if (!segment) {
-			continue;
-		}
-
-		if (gradientLayerPattern.test(segment)) {
-			try {
-				const parsed = parseGradient({ code: segment.trim() });
-				for (const gradient of parsed) {
-					layers.push({ type: "gradient", value: gradient });
-				}
-				continue;
-			} catch {
-				layers.push({ type: "color", value: segment });
-				continue;
-			}
-		}
-
-		layers.push({ type: "color", value: segment });
-	}
-
-	return layers;
-};
-
-const splitCssLayers = ({ css }: { css: string }): Array<string> => {
-	const layers: Array<string> = [];
-	let current = "";
-	let depth = 0;
-
-	for (const char of css) {
-		if (char === "(") {
-			depth += 1;
-		}
-		if (char === ")") {
-			depth = Math.max(0, depth - 1);
-		}
-
-		if (char === "," && depth === 0) {
-			layers.push(current.trim());
-			current = "";
-			continue;
-		}
-
-		current += char;
-	}
-
-	if (current.trim()) {
-		layers.push(current.trim());
-	}
-
-	return layers;
-};
-
-const drawGradientLayer = ({
-	ctx,
-	width,
-	height,
-	gradient,
-}: {
-	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-	width: number;
-	height: number;
-	gradient: GradientAst;
-}): void => {
-	if (gradient.type.includes("linear")) {
-		drawLinearGradient({ ctx, width, height, gradient });
-		return;
-	}
-
-	drawRadialGradient({ ctx, width, height, gradient });
-};
-
-const drawLinearGradient = ({
-	ctx,
-	width,
-	height,
-	gradient,
-}: {
-	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-	width: number;
-	height: number;
-	gradient: GradientAst;
-}): void => {
-	const { x0, y0, x1, y1, length } = resolveLinearPoints({
-		width,
-		height,
-		orientation: gradient.orientation,
-	});
-	const canvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);
-	const colorStops = normalizeColorStops({
-		colorStops: gradient.colorStops,
-		gradientLength: length,
-	});
-
-	for (const stop of colorStops) {
-		canvasGradient.addColorStop(stop.offset, stop.color);
-	}
-
-	ctx.fillStyle = canvasGradient;
-	ctx.fillRect(0, 0, width, height);
-};
-
-const drawRadialGradient = ({
-	ctx,
-	width,
-	height,
-	gradient,
-}: {
-	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-	width: number;
-	height: number;
-	gradient: GradientAst;
-}): void => {
-	const { cx, cy, rx, ry } = resolveRadialDimensions({
-		width,
-		height,
-		orientation: gradient.orientation,
-	});
-	const gradientLength = Math.max(rx, ry);
-	const colorStops = normalizeColorStops({
-		colorStops: gradient.colorStops,
-		gradientLength,
-	});
-
-	if (rx === ry || ry === 0) {
-		const canvasGradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, rx);
-		for (const stop of colorStops) {
-			canvasGradient.addColorStop(stop.offset, stop.color);
-		}
-		ctx.fillStyle = canvasGradient;
-		ctx.fillRect(0, 0, width, height);
-		return;
-	}
-
-	const scaleY = ry / rx;
-	ctx.save();
-	ctx.translate(cx, cy);
-	ctx.scale(1, scaleY);
-	const canvasGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, rx);
-	for (const stop of colorStops) {
-		canvasGradient.addColorStop(stop.offset, stop.color);
-	}
-	ctx.fillStyle = canvasGradient;
-	ctx.fillRect(-cx, -cy / scaleY, width, height / scaleY);
-	ctx.restore();
-};
-
-const resolveLinearPoints = ({
-	width,
-	height,
-	orientation,
-}: {
-	width: number;
-	height: number;
-	orientation: GradientOrientation | undefined;
-}): LinearPoints => {
-	const angle = resolveLinearAngle({ orientation });
-	const radians = (angle * Math.PI) / 180;
-	const dx = Math.sin(radians);
-	const dy = -Math.cos(radians);
-	const centerX = width / 2;
-	const centerY = height / 2;
-	const halfLength = (Math.abs(width * dx) + Math.abs(height * dy)) / 2;
-	const x0 = centerX - dx * halfLength;
-	const y0 = centerY - dy * halfLength;
-	const x1 = centerX + dx * halfLength;
-	const y1 = centerY + dy * halfLength;
-	const length = Math.hypot(x1 - x0, y1 - y0);
-
-	return { x0, y0, x1, y1, length };
-};
-
-const resolveLinearAngle = ({
-	orientation,
-}: {
-	orientation: GradientOrientation | undefined;
-}): number => {
-	if (!orientation) {
-		return 180;
-	}
-
-	if (!Array.isArray(orientation)) {
-		if (orientation.type === "angular") {
-			return Number.parseFloat(orientation.value);
-		}
-
-		if (orientation.type === "directional") {
-			return angleFromDirectional({ value: orientation.value });
-		}
-	}
-
-	return 180;
-};
-
-const angleFromDirectional = ({ value }: { value: string }): number => {
-	const normalized = value.toLowerCase().replace("to", "").trim();
-	const parts = normalized.split(/\s+/).filter(Boolean);
-	let dx = 0;
-	let dy = 0;
-
-	for (const part of parts) {
-		if (part === "left") {
-			dx = -1;
-		}
-		if (part === "right") {
-			dx = 1;
-		}
-		if (part === "top") {
-			dy = -1;
-		}
-		if (part === "bottom") {
-			dy = 1;
-		}
-	}
-
-	if (dx === 0 && dy === 0) {
-		return 180;
-	}
-
-	const angle = (Math.atan2(dx, -dy) * 180) / Math.PI;
-	return (angle + 360) % 360;
-};
-
-const resolveRadialDimensions = ({
-	width,
-	height,
-	orientation,
-}: {
-	width: number;
-	height: number;
-	orientation: GradientOrientation | undefined;
-}): RadialDimensions => {
-	const centerFallback = { cx: width / 2, cy: height / 2 };
-	const radial = Array.isArray(orientation)
-		? (orientation[0] as RadialOrientation | undefined)
-		: undefined;
-
-	if (!radial) {
-		const { rx, ry } = resolveRadialExtents({
-			width,
-			height,
-			cx: centerFallback.cx,
-			cy: centerFallback.cy,
-			shape: "ellipse",
-			extent: "farthest-corner",
-		});
-		return { ...centerFallback, rx, ry };
-	}
-
-	if (radial.type === "shape") {
-		const { cx, cy } = resolveRadialCenter({
-			width,
-			height,
-			position: radial.at,
-		});
-		const shape = radial.value;
-
-		if (radial.style && radial.style.type === "position") {
-			const xDist = radial.style.value.x;
-			const yDist = radial.style.value.y;
-			const rx = xDist
-				? resolveEllipseDimension({ distance: xDist, axisSize: width })
-				: width / 2;
-			const ry = yDist
-				? resolveEllipseDimension({ distance: yDist, axisSize: height })
-				: height / 2;
-			return { cx, cy, rx, ry };
-		}
-
-		if (radial.style && radial.style.type !== "extent-keyword") {
-			const resolvedRadius = resolveDistanceInPixels({
-				distance: radial.style,
-				axisSize: Math.max(width, height),
-			});
-			if (shape === "circle") {
-				return {
-					cx,
-					cy,
-					rx: resolvedRadius ?? 0,
-					ry: resolvedRadius ?? 0,
-				};
-			}
-
-			const radius = resolvedRadius ?? 0;
-			return { cx, cy, rx: radius, ry: radius };
-		}
-
-		const extent =
-			radial.style && radial.style.type === "extent-keyword"
-				? radial.style.value
-				: "farthest-corner";
-		const { rx, ry } = resolveRadialExtents({
-			width,
-			height,
-			cx,
-			cy,
-			shape,
-			extent,
-		});
-		return { cx, cy, rx, ry };
-	}
-
-	if (radial.type === "extent-keyword") {
-		const { cx, cy } = resolveRadialCenter({
-			width,
-			height,
-			position: radial.at,
-		});
-		const { rx, ry } = resolveRadialExtents({
-			width,
-			height,
-			cx,
-			cy,
-			shape: "ellipse",
-			extent: radial.value,
-		});
-		return { cx, cy, rx, ry };
-	}
-
-	const { cx, cy } = resolveRadialCenter({
-		width,
-		height,
-		position: radial.at,
-	});
-	const { rx, ry } = resolveRadialExtents({
-		width,
-		height,
-		cx,
-		cy,
-		shape: "ellipse",
-		extent: "farthest-corner",
-	});
-	return { cx, cy, rx, ry };
-};
-
-const resolveRadialCenter = ({
-	width,
-	height,
-	position,
-}: {
-	width: number;
-	height: number;
-	position?: Position;
-}): { cx: number; cy: number } => {
-	if (!position) {
-		return { cx: width / 2, cy: height / 2 };
-	}
-
-	const normalized = normalizePositionKeywords({ position });
-	const cx = resolvePositionValue({
-		distance: normalized.value.x,
-		axisSize: width,
-		axis: "x",
-	});
-	const cy = resolvePositionValue({
-		distance: normalized.value.y,
-		axisSize: height,
-		axis: "y",
-	});
-
-	return { cx, cy };
-};
-
-const normalizePositionKeywords = ({
-	position,
-}: {
-	position: Position;
-}): Position => {
-	const xValue = position.value.x;
-	const yValue = position.value.y;
-
-	if (
-		xValue?.type === "position-keyword" &&
-		yValue?.type === "position-keyword"
-	) {
-		const xKeyword = xValue.value.toLowerCase() as PositionKeyword;
-		const yKeyword = yValue.value.toLowerCase() as PositionKeyword;
-		const xIsVertical = xKeyword === "top" || xKeyword === "bottom";
-		const yIsHorizontal = yKeyword === "left" || yKeyword === "right";
-
-		if (xIsVertical && yIsHorizontal) {
-			return {
-				type: "position",
-				value: {
-					x: { type: "position-keyword", value: yKeyword },
-					y: { type: "position-keyword", value: xKeyword },
-				},
-			};
-		}
-	}
-
-	return position;
-};
-
-const resolveRadialExtents = ({
-	width,
-	height,
-	cx,
-	cy,
-	shape,
-	extent,
-}: {
-	width: number;
-	height: number;
-	cx: number;
-	cy: number;
-	shape: "circle" | "ellipse";
-	extent: string;
-}): { rx: number; ry: number } => {
-	const left = cx;
-	const right = width - cx;
-	const top = cy;
-	const bottom = height - cy;
-
-	if (shape === "circle") {
-		const distances = [
-			Math.hypot(left, top),
-			Math.hypot(right, top),
-			Math.hypot(left, bottom),
-			Math.hypot(right, bottom),
-		];
-		if (extent === "closest-side") {
-			return { rx: Math.min(left, right, top, bottom), ry: 0 };
-		}
-		if (extent === "farthest-side") {
-			return { rx: Math.max(left, right, top, bottom), ry: 0 };
-		}
-		if (extent === "closest-corner") {
-			return { rx: Math.min(...distances), ry: 0 };
-		}
-		return { rx: Math.max(...distances), ry: 0 };
-	}
-
-	if (extent === "closest-side") {
-		return { rx: Math.min(left, right), ry: Math.min(top, bottom) };
-	}
-	if (extent === "farthest-side") {
-		return { rx: Math.max(left, right), ry: Math.max(top, bottom) };
-	}
-
-	const corners = [
-		{ dx: left, dy: top },
-		{ dx: right, dy: top },
-		{ dx: left, dy: bottom },
-		{ dx: right, dy: bottom },
-	];
-	const sorted = corners
-		.slice()
-		.sort((a, b) => Math.hypot(a.dx, a.dy) - Math.hypot(b.dx, b.dy));
-	const chosen =
-		extent === "closest-corner" ? sorted[0] : sorted[sorted.length - 1];
-	return { rx: Math.abs(chosen.dx), ry: Math.abs(chosen.dy) };
-};
-
-const resolvePositionValue = ({
-	distance,
-	axisSize,
-	axis,
-}: {
-	distance?: Distance;
-	axisSize: number;
-	axis: "x" | "y";
-}): number => {
-	if (!distance) {
-		return axisSize / 2;
-	}
-
-	if (distance.type === "%") {
-		return (Number.parseFloat(distance.value) / 100) * axisSize;
-	}
-
-	if (distance.type === "position-keyword") {
-		return keywordToPosition({
-			value: distance.value,
-			axisSize,
-			axis,
-		});
-	}
-
-	if (distance.type === "px") {
-		return Number.parseFloat(distance.value);
-	}
-
-	if (distance.type === "em") {
-		return Number.parseFloat(distance.value) * 16;
-	}
-
-	return axisSize / 2;
-};
-
-const resolveDistanceInPixels = ({
-	distance,
-	axisSize,
-}: {
-	distance: Distance;
-	axisSize: number;
-}): number | null => {
-	if (distance.type === "%") {
-		return (Number.parseFloat(distance.value) / 100) * axisSize;
-	}
-
-	if (distance.type === "px") {
-		return Number.parseFloat(distance.value);
-	}
-
-	if (distance.type === "em") {
-		return Number.parseFloat(distance.value) * 16;
-	}
-
-	return null;
-};
-
-const resolveEllipseDimension = ({
-	distance,
-	axisSize,
-}: {
-	distance: Distance;
-	axisSize: number;
-}): number => {
-	if (distance.type === "%") {
-		return (Number.parseFloat(distance.value) / 100) * axisSize;
-	}
-
-	if (distance.type === "px") {
-		return Number.parseFloat(distance.value);
-	}
-
-	if (distance.type === "em") {
-		return Number.parseFloat(distance.value) * 16;
-	}
-
-	return axisSize / 2;
-};
-
-const keywordToPosition = ({
-	value,
-	axisSize,
-	axis,
-}: {
-	value: string;
-	axisSize: number;
-	axis: "x" | "y";
-}): number => {
-	const keyword = value.toLowerCase() as PositionKeyword;
-
-	if (keyword === "center") {
-		return axisSize / 2;
-	}
-
-	if (axis === "x") {
-		if (keyword === "left") {
-			return 0;
-		}
-		if (keyword === "right") {
-			return axisSize;
-		}
-	}
-
-	if (axis === "y") {
-		if (keyword === "top") {
-			return 0;
-		}
-		if (keyword === "bottom") {
-			return axisSize;
-		}
-	}
-
-	return axisSize / 2;
-};
-
-const isTransparent = ({ color }: { color: string }): boolean => {
-	const lower = color.toLowerCase().trim();
-	if (lower === "transparent") {
-		return true;
-	}
-	const rgbaMatch = lower.match(
-		/^rgba\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*([\d.]+)\s*\)$/,
-	);
-	if (rgbaMatch && Number.parseFloat(rgbaMatch[1]) === 0) {
-		return true;
-	}
-	return false;
-};
-
-const parseColorToRgb = ({
-	color,
-}: {
-	color: string;
-}): { r: number; g: number; b: number; a: number } | null => {
-	const lower = color.toLowerCase().trim();
-
-	const hexMatch = lower.match(/^#([0-9a-f]{3,8})$/);
-	if (hexMatch) {
-		const hex = hexMatch[1];
-		if (hex.length === 3) {
-			return {
-				r: Number.parseInt(hex[0] + hex[0], 16),
-				g: Number.parseInt(hex[1] + hex[1], 16),
-				b: Number.parseInt(hex[2] + hex[2], 16),
-				a: 1,
-			};
-		}
-		if (hex.length === 6) {
-			return {
-				r: Number.parseInt(hex.slice(0, 2), 16),
-				g: Number.parseInt(hex.slice(2, 4), 16),
-				b: Number.parseInt(hex.slice(4, 6), 16),
-				a: 1,
-			};
-		}
-		if (hex.length === 8) {
-			return {
-				r: Number.parseInt(hex.slice(0, 2), 16),
-				g: Number.parseInt(hex.slice(2, 4), 16),
-				b: Number.parseInt(hex.slice(4, 6), 16),
-				a: Number.parseInt(hex.slice(6, 8), 16) / 255,
-			};
-		}
-	}
-
-	const rgbMatch = lower.match(
-		/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
-	);
-	if (rgbMatch) {
-		return {
-			r: Number.parseFloat(rgbMatch[1]),
-			g: Number.parseFloat(rgbMatch[2]),
-			b: Number.parseFloat(rgbMatch[3]),
-			a: 1,
-		};
-	}
-
-	const rgbaMatch = lower.match(
-		/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
-	);
-	if (rgbaMatch) {
-		return {
-			r: Number.parseFloat(rgbaMatch[1]),
-			g: Number.parseFloat(rgbaMatch[2]),
-			b: Number.parseFloat(rgbaMatch[3]),
-			a: Number.parseFloat(rgbaMatch[4]),
-		};
-	}
-
-	return null;
-};
-
-const fixTransparentStops = ({
-	stops,
-}: {
-	stops: Array<{ color: string; offset: number | null }>;
-}): Array<{ color: string; offset: number | null }> => {
-	if (stops.length === 0) {
-		return stops;
-	}
-
-	const result = stops.map((stop) => ({ ...stop }));
-
-	for (let i = 0; i < result.length; i++) {
-		if (!isTransparent({ color: result[i].color })) {
-			continue;
-		}
-
-		let donorColor: { r: number; g: number; b: number } | null = null;
-
-		for (let j = i - 1; j >= 0; j--) {
-			if (!isTransparent({ color: result[j].color })) {
-				const parsed = parseColorToRgb({ color: result[j].color });
-				if (parsed) {
-					donorColor = parsed;
-					break;
-				}
-			}
-		}
-
-		if (!donorColor) {
-			for (let j = i + 1; j < result.length; j++) {
-				if (!isTransparent({ color: result[j].color })) {
-					const parsed = parseColorToRgb({ color: result[j].color });
-					if (parsed) {
-						donorColor = parsed;
-						break;
-					}
-				}
-			}
-		}
-
-		if (donorColor) {
-			result[i].color =
-				`rgba(${donorColor.r},${donorColor.g},${donorColor.b},0)`;
-		}
-	}
-
-	return result;
-};
-
-const normalizeColorStops = ({
-	colorStops,
-	gradientLength,
-}: {
-	colorStops: Array<ColorStop>;
-	gradientLength: number;
-}): Array<{ color: string; offset: number }> => {
-	const mappedStops = colorStops.map((stop) => ({
-		color: colorToString({ color: stop }),
-		offset: resolveStopOffset({ stop, gradientLength }),
-	}));
-
-	const fixedStops = fixTransparentStops({ stops: mappedStops });
-	const resolvedStops = fixedStops.map((stop) => ({ ...stop }));
-	const knownIndices = resolvedStops
-		.map((stop, index) => (stop.offset === null ? null : index))
-		.filter((index): index is number => index !== null);
-
-	if (knownIndices.length === 0) {
-		const step = resolvedStops.length > 1 ? 1 / (resolvedStops.length - 1) : 1;
-		for (let index = 0; index < resolvedStops.length; index += 1) {
-			resolvedStops[index].offset = step * index;
-		}
-		return clampStops({ stops: resolvedStops });
-	}
-
-	const firstKnown = knownIndices[0];
-	if (resolvedStops[firstKnown].offset === null) {
-		resolvedStops[firstKnown].offset = 0;
-	}
-
-	for (let index = 0; index < firstKnown; index += 1) {
-		const nextOffset = resolvedStops[firstKnown].offset ?? 0;
-		resolvedStops[index].offset = (nextOffset * index) / firstKnown;
-	}
-
-	for (let i = 0; i < knownIndices.length - 1; i += 1) {
-		const startIndex = knownIndices[i];
-		const endIndex = knownIndices[i + 1];
-		const startOffset = resolvedStops[startIndex].offset ?? 0;
-		const endOffset = resolvedStops[endIndex].offset ?? startOffset;
-		const gap = endIndex - startIndex;
-
-		if (gap <= 1) {
-			continue;
-		}
-
-		const step = (endOffset - startOffset) / gap;
-		for (let index = 1; index < gap; index += 1) {
-			resolvedStops[startIndex + index].offset = startOffset + step * index;
-		}
-	}
-
-	const lastKnown = knownIndices[knownIndices.length - 1];
-	const lastOffset = resolvedStops[lastKnown].offset ?? 1;
-	if (lastKnown < resolvedStops.length - 1) {
-		const gap = resolvedStops.length - 1 - lastKnown;
-		const step = (1 - lastOffset) / gap;
-		for (let index = 1; index <= gap; index += 1) {
-			resolvedStops[lastKnown + index].offset = lastOffset + step * index;
-		}
-	}
-
-	return clampStops({ stops: resolvedStops });
-};
-
-const clampStops = ({
-	stops,
-}: {
-	stops: Array<{ color: string; offset: number | null }>;
-}): Array<{ color: string; offset: number }> => {
-	return stops.map((stop) => ({
-		color: stop.color,
-		offset: clamp01({ value: stop.offset ?? 0 }),
-	}));
-};
-
-const resolveStopOffset = ({
-	stop,
-	gradientLength,
-}: {
-	stop: ColorStop;
-	gradientLength: number;
-}): number | null => {
-	if (!stop.length) {
-		return null;
-	}
-
-	if (stop.length.type === "%") {
-		return Number.parseFloat(stop.length.value) / 100;
-	}
-
-	if (stop.length.type === "px") {
-		return Number.parseFloat(stop.length.value) / gradientLength;
-	}
-
-	if (stop.length.type === "em") {
-		return (Number.parseFloat(stop.length.value) * 16) / gradientLength;
-	}
-
-	return null;
-};
-
-const clamp01 = ({ value }: { value: number }): number => {
-	if (value < 0) {
-		return 0;
-	}
-	if (value > 1) {
-		return 1;
-	}
-	return value;
-};
-
-const colorToString = ({ color }: { color: Color }): string => {
-	if (color.type === "hex") {
-		return `#${color.value}`;
-	}
-
-	if (color.type === "literal") {
-		return color.value;
-	}
-
-	if (color.type === "rgb") {
-		return `rgb(${color.value.join(",")})`;
-	}
-
-	if (color.type === "rgba") {
-		return `rgba(${color.value.join(",")})`;
-	}
-
-	if (color.type === "hsl") {
-		return `hsl(${color.value.join(",")})`;
-	}
-
-	if (color.type === "hsla") {
-		return `hsla(${color.value.join(",")})`;
-	}
-
-	return `var(${color.value})`;
-};