@tin.so/core 0.3.0 → 0.5.0

package/dist/{src-Bn8Hly8W.mjs → src-B_SjzWhY.mjs}

@@ -817,1606 +817,1647 @@ function blend(top, bottom) {
 	const mix = (a, b) => Math.round(a * alpha + b * (1 - alpha));
 	return `rgb(${mix(r1, r2)}, ${mix(g1, g2)}, ${mix(b1, b2)})`;
 }
-// src/themes/index.ts
-const THEMES = [
-	{
-		"id": "ayu",
-		"name": "Ayu",
-		"background": {
-			"from": "#ff8f40",
-			"to": "#ffb454"
-		},
-		"textmate": {
-			"dark": "ayu-dark",
-			"light": "ayu-light"
-		},
-		"window": {
-			"dark": {
-				"background": "#10141c",
-				"title": "#5a6378",
-				"lineNumber": "#5a6378a6",
-				"divider": "#1b1f29"
-			},
-			"light": {
-				"background": "#fcfcfc",
-				"title": "#828e9f",
-				"lineNumber": "#828e9f66",
-				"divider": "#6b7d8f1f"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#bfbdb6",
-				"keyword": "#ff8f40",
-				"string": "#aad94c",
-				"function": "#ffb454",
-				"comment": "#5a6673",
-				"highlight": "#161a24"
-			},
-			"light": {
-				"foreground": "#5c6166",
-				"keyword": "#fa8532",
-				"string": "#86b300",
-				"function": "#eba400",
-				"comment": "#adaeb1",
-				"highlight": "#828e9f1a"
-			}
-		}
-	},
-	{
-		"id": "catppuccin",
-		"name": "Catppuccin",
-		"background": {
-			"from": "#cba6f7",
-			"to": "#f5c2e7"
-		},
-		"textmate": {
-			"dark": "catppuccin-mocha",
-			"light": "catppuccin-latte"
-		},
-		"window": {
-			"dark": {
-				"background": "#1e1e2e",
-				"title": "#cdd6f4",
-				"lineNumber": "#7f849c",
-				"divider": "#181825"
-			},
-			"light": {
-				"background": "#eff1f5",
-				"title": "#4c4f69",
-				"lineNumber": "#8c8fa1",
-				"divider": "#e6e9ef"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#cdd6f4",
-				"keyword": "#cba6f7",
-				"string": "#a6e3a1",
-				"function": "#89b4fa",
-				"comment": "#9399b2",
-				"highlight": "#cdd6f412"
-			},
-			"light": {
-				"foreground": "#4c4f69",
-				"keyword": "#8839ef",
-				"string": "#40a02b",
-				"function": "#1e66f5",
-				"comment": "#7c7f93",
-				"highlight": "#4c4f6912"
-			}
-		}
+// src/gradient.ts
+const HEX = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const NUMBER = String.raw`[+-]?(?:\d+\.?\d*|\.\d+)`;
+const LENGTH = new RegExp(`^(${NUMBER})(%|px)?$`, "i");
+const ANGLE = new RegExp(`^(${NUMBER})(deg|turn|rad|grad)$`, "i");
+const SIDES = {
+	left: { x: -1 },
+	right: { x: 1 },
+	top: { y: -1 },
+	bottom: { y: 1 }
+};
+const EXTENTS = /* @__PURE__ */ new Set([
+	"closest-side",
+	"closest-corner",
+	"farthest-side",
+	"farthest-corner"
+]);
+const POSITION_KEYWORDS = {
+	left: {
+		axis: "x",
+		value: 0
 	},
-	{
-		"id": "vscode",
-		"name": "VS Code",
-		"background": {
-			"from": "#c586c0",
-			"to": "#dcdcaa"
-		},
-		"textmate": {
-			"dark": "dark-plus",
-			"light": "light-plus"
-		},
-		"window": {
-			"dark": { "background": "#1e1e1e" },
-			"light": { "background": "#ffffff" }
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#d4d4d4",
-				"keyword": "#c586c0",
-				"string": "#ce9178",
-				"function": "#dcdcaa",
-				"comment": "#6a9955"
-			},
-			"light": {
-				"foreground": "#000000",
-				"keyword": "#af00db",
-				"string": "#a31515",
-				"function": "#795e26",
-				"comment": "#008000"
-			}
-		}
+	right: {
+		axis: "x",
+		value: 100
 	},
-	{
-		"id": "dracula",
-		"name": "Dracula",
-		"background": {
-			"from": "#bd93f9",
-			"to": "#ff79c6"
-		},
-		"textmate": {
-			"dark": "dracula",
-			"light": "dracula-alucard"
-		},
-		"window": {
-			"dark": {
-				"background": "#282a36",
-				"title": "#f8f8f2",
-				"lineNumber": "#6272a4",
-				"divider": "#191a21"
-			},
-			"light": {
-				"background": "#fffbeb",
-				"title": "#1f1f1f",
-				"lineNumber": "#6c664b",
-				"divider": "#ceccc0"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#f8f8f2",
-				"keyword": "#ff79c6",
-				"string": "#f1fa8c",
-				"function": "#50fa7b",
-				"comment": "#6272a4",
-				"highlight": "#44475a"
-			},
-			"light": {
-				"foreground": "#1f1f1f",
-				"keyword": "#a3144d",
-				"string": "#846e15",
-				"function": "#14710a",
-				"comment": "#6c664b",
-				"highlight": "#e2deca95"
-			}
-		}
+	top: {
+		axis: "y",
+		value: 0
 	},
-	{
-		"id": "github",
-		"name": "GitHub",
-		"background": {
-			"from": "#ff7b72",
-			"to": "#d2a8ff"
-		},
-		"textmate": {
-			"dark": "github-dark-default",
-			"light": "github-light-default"
-		},
-		"window": {
-			"dark": {
-				"background": "#0d1117",
-				"title": "#7d8590",
-				"lineNumber": "#6e7681",
-				"divider": "#30363d"
-			},
-			"light": {
-				"background": "#ffffff",
-				"title": "#656d76",
-				"lineNumber": "#8c959f",
-				"divider": "#d0d7de"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#e6edf3",
-				"keyword": "#ff7b72",
-				"string": "#a5d6ff",
-				"function": "#d2a8ff",
-				"comment": "#8b949e",
-				"highlight": "#6e76811a"
-			},
-			"light": {
-				"foreground": "#1f2328",
-				"keyword": "#cf222e",
-				"string": "#0a3069",
-				"function": "#8250df",
-				"comment": "#6e7781",
-				"highlight": "#eaeef280"
-			}
-		}
+	bottom: {
+		axis: "y",
+		value: 100
 	},
-	{
-		"id": "material",
-		"name": "Material",
-		"background": {
-			"from": "#89ddff",
-			"to": "#82aaff"
-		},
-		"textmate": {
-			"dark": "material-theme",
-			"light": "material-theme-lighter"
-		},
-		"window": {
-			"dark": {
-				"background": "#263238",
-				"title": "#eeffff",
-				"lineNumber": "#465a64",
-				"divider": "#263238"
-			},
-			"light": {
-				"background": "#fafafa",
-				"title": "#90a4ae",
-				"lineNumber": "#cfd8dc",
-				"divider": "#fafafa"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#eeffff",
-				"keyword": "#89ddff",
-				"string": "#c3e88d",
-				"function": "#82aaff",
-				"comment": "#546e7a",
-				"highlight": "#00000050"
-			},
-			"light": {
-				"foreground": "#90a4ae",
-				"keyword": "#39adb5",
-				"string": "#91b859",
-				"function": "#6182b8",
-				"comment": "#90a4ae",
-				"highlight": "#ccd7da50"
-			}
+	center: { value: 50 }
+};
+/** Splits at the separator outside of parentheses */
+function split(text, separator) {
+	const parts = [];
+	let depth = 0;
+	let current = "";
+	for (const char of text) {
+		if (char === "(") depth++;
+		if (char === ")") depth--;
+		if (depth < 0) throw new Error("unbalanced parentheses");
+		if ((separator === " " ? /\s/.test(char) : char === separator) && depth === 0) {
+			parts.push(current.trim());
+			current = "";
+		} else current += char;
+	}
+	if (depth !== 0) throw new Error("unbalanced parentheses");
+	parts.push(current.trim());
+	return separator === " " ? parts.filter(Boolean) : parts;
+}
+function parseHex(hex) {
+	const digits = hex.slice(1);
+	const full = digits.length <= 4 ? digits.replace(/./g, "$&$&") : digits;
+	const channel = (index) => parseInt(full.slice(index * 2, index * 2 + 2), 16);
+	return {
+		r: channel(0),
+		g: channel(1),
+		b: channel(2),
+		a: full.length === 8 ? channel(3) / 255 : 1
+	};
+}
+function parseChannel(text, max) {
+	const match = LENGTH.exec(text);
+	if (!match || match[2]?.toLowerCase() === "px") throw new Error(`invalid color channel ${text}`);
+	const value = Number(match[1]);
+	const scaled = match[2] === "%" ? value / 100 * max : value;
+	return Math.min(max, Math.max(0, scaled));
+}
+function parseColor(text) {
+	const color = text.trim().toLowerCase();
+	if (color === "transparent") return {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	};
+	if (HEX.test(color)) return parseHex(color);
+	const fn = /^rgba?\((.*)\)$/.exec(color);
+	if (!fn) return void 0;
+	const [channels, alpha] = fn[1].includes("/") ? fn[1].split("/") : [fn[1], void 0];
+	const parts = channels.includes(",") ? channels.split(",").map((part) => part.trim()) : split(channels, " ");
+	if (alpha !== void 0 && parts.length !== 3) return void 0;
+	if (parts.length !== 3 && parts.length !== 4) return void 0;
+	const [r, g, b] = parts.slice(0, 3).map((part) => parseChannel(part, 255));
+	const a = alpha ?? parts[3];
+	return {
+		r,
+		g,
+		b,
+		a: a === void 0 ? 1 : parseChannel(a.trim(), 1)
+	};
+}
+function parseLength(text) {
+	const match = LENGTH.exec(text);
+	if (!match) throw new Error(`invalid length ${text}`);
+	const value = Number(match[1]);
+	if (!match[2] && value !== 0) throw new Error(`a length needs % or px: ${text}`);
+	return {
+		value,
+		unit: match[2]?.toLowerCase() ?? "px"
+	};
+}
+function parseStops(args) {
+	const stops = args.flatMap((arg) => {
+		const [colorText, ...positions] = split(arg, " ");
+		const color = parseColor(colorText ?? "");
+		if (!color || positions.length > 2) throw new Error(`invalid color stop ${arg}`);
+		if (positions.length === 0) return [{ color }];
+		return positions.map((position) => ({
+			color,
+			position: parseLength(position)
+		}));
+	});
+	if (stops.length < 2) throw new Error("a gradient needs two colors");
+	return stops;
+}
+function parseAngle(text) {
+	const match = ANGLE.exec(text);
+	if (!match) return void 0;
+	const value = Number(match[1]);
+	const unit = match[2].toLowerCase();
+	if (unit === "turn") return value * 360;
+	if (unit === "rad") return value * 180 / Math.PI;
+	if (unit === "grad") return value * .9;
+	return value;
+}
+function parseLinear(args) {
+	const first = args[0];
+	const angle = parseAngle(first);
+	if (angle !== void 0) return {
+		type: "linear",
+		direction: { angle },
+		stops: parseStops(args.slice(1))
+	};
+	const words = split(first, " ");
+	if (words[0] === "to") {
+		const to = {
+			x: 0,
+			y: 0
+		};
+		for (const word of words.slice(1)) {
+			const side = SIDES[word];
+			if (!side || words.length > 3) throw new Error(`invalid direction ${first}`);
+			Object.assign(to, side);
 		}
-	},
-	{
-		"id": "night-owl",
-		"name": "Night Owl",
-		"background": {
-			"from": "#c792ea",
-			"to": "#82aaff"
-		},
-		"textmate": {
-			"dark": "night-owl",
-			"light": "night-owl-light"
-		},
-		"window": {
-			"dark": {
-				"background": "#011627",
-				"title": "#eeefff",
-				"lineNumber": "#4b6479",
-				"divider": "#262a39"
-			},
-			"light": {
-				"background": "#fbfbfb",
-				"title": "#403f53",
-				"lineNumber": "#90a7b2",
-				"divider": "#f0f0f0"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#d6deeb",
-				"keyword": "#c792ea",
-				"string": "#ecc48d",
-				"function": "#82aaff",
-				"comment": "#637777",
-				"highlight": "#28707d29"
+		if (words.length < 2) throw new Error(`invalid direction ${first}`);
+		return {
+			type: "linear",
+			direction: { to },
+			stops: parseStops(args.slice(1))
+		};
+	}
+	return {
+		type: "linear",
+		direction: { angle: 180 },
+		stops: parseStops(args)
+	};
+}
+function parsePosition(words) {
+	if (words.length < 1 || words.length > 2) throw new Error("invalid position");
+	const at = {};
+	const loose = [];
+	for (const word of words) {
+		const keyword = POSITION_KEYWORDS[word];
+		if (keyword?.axis) at[keyword.axis] = {
+			value: keyword.value,
+			unit: "%"
+		};
+		else loose.push(keyword ? {
+			value: keyword.value,
+			unit: "%"
+		} : parseLength(word));
+	}
+	for (const length of loose) if (!at.x) at.x = length;
+	else if (!at.y) at.y = length;
+	else throw new Error("invalid position");
+	const center = {
+		value: 50,
+		unit: "%"
+	};
+	return {
+		x: at.x ?? center,
+		y: at.y ?? center
+	};
+}
+function parseRadial(args) {
+	const first = split(args[0], " ");
+	const isPrelude = first.some((word) => word === "at" || word === "circle" || word === "ellipse" || EXTENTS.has(word)) || parseColor(first[0] ?? "") === void 0 && LENGTH.test(first[0] ?? "");
+	const layer = {
+		type: "radial",
+		shape: "ellipse",
+		size: "farthest-corner",
+		at: {
+			x: {
+				value: 50,
+				unit: "%"
 			},
-			"light": {
-				"foreground": "#403f53",
-				"keyword": "#994cc3",
-				"string": "#c96765",
-				"function": "#4876d6",
-				"comment": "#989fb1",
-				"highlight": "#f0f0f0"
+			y: {
+				value: 50,
+				unit: "%"
 			}
-		}
-	},
-	{
-		"id": "nord",
-		"name": "Nord",
-		"background": {
-			"from": "#5e81ac",
-			"to": "#8fbcbb"
 		},
-		"textmate": { "dark": "nord" },
-		"window": { "dark": {
-			"background": "#2e3440",
-			"title": "#d8dee9",
-			"lineNumber": "#4c566a",
-			"divider": "#3b425200"
-		} },
-		"syntax": { "dark": {
-			"foreground": "#d8dee9",
-			"keyword": "#81a1c1",
-			"string": "#a3be8c",
-			"function": "#88c0d0",
-			"comment": "#616e88",
-			"highlight": "#3b4252"
-		} }
-	},
-	{
-		"id": "one-dark",
-		"name": "One Dark",
-		"background": {
-			"from": "#61afef",
-			"to": "#c678dd"
-		},
-		"textmate": {
-			"dark": "one-dark-pro",
-			"light": "one-light"
-		},
-		"window": {
-			"dark": {
-				"background": "#282c34",
-				"title": "#9da5b4",
-				"lineNumber": "#495162",
-				"divider": "#181a1f"
-			},
-			"light": {
-				"background": "#fafafa",
-				"title": "#424243",
-				"lineNumber": "#9d9d9f",
-				"divider": "#dbdbdc"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#abb2bf",
-				"keyword": "#c678dd",
-				"string": "#98c379",
-				"function": "#61afef",
-				"comment": "#7f848e",
-				"highlight": "#2c313c"
-			},
-			"light": {
-				"foreground": "#383a42",
-				"keyword": "#a626a4",
-				"string": "#50a14f",
-				"function": "#4078f2",
-				"comment": "#a0a1a7",
-				"highlight": "#383a420c"
+		stops: parseStops(isPrelude ? args.slice(1) : args)
+	};
+	if (!isPrelude) return layer;
+	const atIndex = first.indexOf("at");
+	const shapeWords = atIndex === -1 ? first : first.slice(0, atIndex);
+	if (atIndex !== -1) layer.at = parsePosition(first.slice(atIndex + 1));
+	const sizes = [];
+	let shape;
+	for (const word of shapeWords) if (word === "circle" || word === "ellipse") shape = word;
+	else if (EXTENTS.has(word)) layer.size = word;
+	else sizes.push(parseLength(word));
+	if (sizes.length === 1) {
+		if (shape === "ellipse" || sizes[0].unit === "%") throw new Error("a circle needs one px size");
+		layer.size = {
+			x: sizes[0],
+			y: sizes[0]
+		};
+		shape = "circle";
+	} else if (sizes.length === 2) {
+		if (shape === "circle") throw new Error("an ellipse needs two sizes");
+		layer.size = {
+			x: sizes[0],
+			y: sizes[1]
+		};
+	} else if (sizes.length > 2) throw new Error("invalid size");
+	layer.shape = shape ?? "ellipse";
+	return layer;
+}
+function parseLayer(text, last) {
+	const fn = /^([a-z-]+)\((.*)\)$/is.exec(text);
+	const name = fn?.[1]?.toLowerCase();
+	if (name === "linear-gradient") return parseLinear(split(fn[2], ","));
+	if (name === "radial-gradient") return parseRadial(split(fn[2], ","));
+	const color = parseColor(text);
+	if (!color) throw new Error(`invalid layer ${text}`);
+	if (!last) throw new Error("only the last layer can be a color");
+	return {
+		type: "color",
+		color
+	};
+}
+/** Parses a CSS background, or gives undefined when the spec cannot use it */
+function parseBackground(css) {
+	try {
+		const parts = split(css.trim().replace(/\s+/g, " "), ",");
+		if (parts.length > 16 || parts.some((part) => part === "")) return void 0;
+		return parts.map((part, index) => parseLayer(part, index === parts.length - 1));
+	} catch {
+		return;
+	}
+}
+function isCssBackground(css) {
+	return parseBackground(css) !== void 0;
+}
+function hex$2({ r, g, b }) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+/**
+* A color for the places that need one color of the background, such as the color below a
+* translucent window: the color layer, or else the first visible color of the bottom layer.
+*/
+function backgroundBaseColor(background) {
+	const bottom = background.at(-1);
+	if (bottom.type === "color") return hex$2(bottom.color);
+	return hex$2((bottom.stops.find((stop) => stop.color.a > 0) ?? bottom.stops[0]).color);
+}
+/**
+* The offsets of the stops from 0 to 1 along a gradient ray of a length in px, with the rules of
+* CSS: the first stop is at 0, the last at 1, a stop is never before the one ahead of it, and
+* stops without a position share the space between their neighbors.
+*/
+function stopOffsets(stops, length) {
+	const offsets = stops.map(({ position }) => position === void 0 ? void 0 : position.unit === "%" ? position.value / 100 : position.value / Math.max(length, .01));
+	offsets[0] ??= 0;
+	offsets[offsets.length - 1] ??= 1;
+	let max = offsets[0];
+	for (let i = 0; i < offsets.length; i++) if (offsets[i] !== void 0) {
+		max = Math.max(max, offsets[i]);
+		offsets[i] = max;
+	}
+	for (let i = 1; i < offsets.length; i++) {
+		if (offsets[i] !== void 0) continue;
+		let end = i;
+		while (offsets[end] === void 0) end++;
+		const start = offsets[i - 1];
+		const step = (offsets[end] - start) / (end - i + 1);
+		for (let k = i; k < end; k++) offsets[k] = start + step * (k - i + 1);
+	}
+	return offsets;
+}
+/**
+* A browser mixes the colors of a gradient with their alpha (premultiplied), SVG does not. A stop
+* with no alpha takes the color of its neighbors, so that the gradient fades without gray.
+*/
+function premultiplyStops(stops) {
+	const visible = (from, step) => {
+		for (let i = from; i >= 0 && i < stops.length; i += step) if (stops[i].color.a > 0) return stops[i].color;
+	};
+	return stops.flatMap((stop, index) => {
+		if (stop.color.a > 0) return [stop];
+		const before = visible(index - 1, -1);
+		const after = visible(index + 1, 1);
+		return [before, after].filter((color, i, all) => color && (i === 0 || color !== all[0])).map((color) => ({
+			offset: stop.offset,
+			color: {
+				...color,
+				a: 0
 			}
+		})).concat(before || after ? [] : [stop]);
+	});
+}
+function svgStops(stops) {
+	return premultiplyStops(stops).map(({ offset, color }) => `<stop ${attrs({
+		offset: Math.min(1, Math.max(0, offset)),
+		"stop-color": hex$2(color),
+		"stop-opacity": color.a === 1 ? void 0 : round(color.a)
+	})}/>`).join("");
+}
+function resolveLength(length, size) {
+	return length.unit === "%" ? length.value / 100 * size : length.value;
+}
+/**
+* Stretches the stops to the range from 0 to 1. Gives the start and the end of the range on the
+* old scale, so that the caller can move the end points of the gradient.
+*/
+function normalize(offsets, allowNegative) {
+	const start = allowNegative ? Math.min(0, offsets[0]) : 0;
+	const end = Math.max(1, offsets.at(-1));
+	return {
+		start,
+		end,
+		offsets: offsets.map((offset) => (Math.max(offset, start) - start) / (end - start))
+	};
+}
+function linearSvg(id, layer, box) {
+	const line = cssGradientLine("angle" in layer.direction ? layer.direction.angle : Math.atan2(layer.direction.to.x * box.height, -layer.direction.to.y * box.width) * 180 / Math.PI, box);
+	const length = Math.hypot(line.x2 - line.x1, line.y2 - line.y1);
+	const { start, end, offsets } = normalize(stopOffsets(layer.stops, length), true);
+	const dx = line.x2 - line.x1;
+	const dy = line.y2 - line.y1;
+	const points = {
+		x1: line.x1 + dx * start,
+		y1: line.y1 + dy * start,
+		x2: line.x1 + dx * end,
+		y2: line.y1 + dy * end
+	};
+	const stops = layer.stops.map((stop, index) => ({
+		offset: offsets[index],
+		color: stop.color
+	}));
+	return `<linearGradient ${attrs({
+		id,
+		gradientUnits: "userSpaceOnUse",
+		...points
+	})}>${svgStops(stops)}</linearGradient>`;
+}
+function radialRadii(layer, box, center) {
+	if (typeof layer.size === "object") return {
+		x: resolveLength(layer.size.x, box.width),
+		y: resolveLength(layer.size.y, box.height)
+	};
+	const sides = {
+		x: [center.x - box.x, box.x + box.width - center.x].map(Math.abs),
+		y: [center.y - box.y, box.y + box.height - center.y].map(Math.abs)
+	};
+	const closest = layer.size.startsWith("closest");
+	const pick = (values) => closest ? Math.min(...values) : Math.max(...values);
+	const side = {
+		x: pick(sides.x),
+		y: pick(sides.y)
+	};
+	if (layer.shape === "circle") {
+		if (layer.size.endsWith("side")) {
+			const radius = pick([...sides.x, ...sides.y]);
+			return {
+				x: radius,
+				y: radius
+			};
 		}
-	},
-	{
-		"id": "rose-pine",
-		"name": "Rosé Pine",
-		"background": {
-			"from": "#31748f",
-			"to": "#ebbcba"
-		},
-		"textmate": {
-			"dark": "rose-pine",
-			"light": "rose-pine-dawn"
-		},
-		"window": {
-			"dark": {
-				"background": "#191724",
-				"title": "#908caa",
-				"lineNumber": "#908caa",
-				"divider": "#00000000"
-			},
-			"light": {
-				"background": "#faf4ed",
-				"title": "#797593",
-				"lineNumber": "#797593",
-				"divider": "#00000000"
-			}
-		},
-		"syntax": {
-			"dark": {
-				"foreground": "#e0def4",
-				"keyword": "#31748f",
-				"string": "#f6c177",
-				"function": "#ebbcba",
-				"comment": "#6e6a86",
-				"highlight": "#6e6a861a"
-			},
-			"light": {
-				"foreground": "#575279",
-				"keyword": "#286983",
-				"string": "#ea9d34",
-				"function": "#d7827e",
-				"comment": "#9893a5",
-				"highlight": "#6e6a860d"
-			}
-		}
-	},
+		const radius = Math.hypot(side.x, side.y);
+		return {
+			x: radius,
+			y: radius
+		};
+	}
+	if (layer.size.endsWith("side")) return side;
+	return {
+		x: side.x * Math.SQRT2,
+		y: side.y * Math.SQRT2
+	};
+}
+function radialSvg(id, layer, box) {
+	const center = {
+		x: box.x + resolveLength(layer.at.x, box.width),
+		y: box.y + resolveLength(layer.at.y, box.height)
+	};
+	const radii = radialRadii(layer, box, center);
+	const rx = Math.max(radii.x, .01);
+	const ry = Math.max(radii.y, .01);
+	const { end, offsets } = normalize(stopOffsets(layer.stops, rx), false);
+	const stops = layer.stops.map((stop, index) => ({
+		offset: offsets[index],
+		color: stop.color
+	}));
+	const transform = `translate(${round(center.x)} ${round(center.y)}) scale(1 ${round(ry / rx)})`;
+	return `<radialGradient ${attrs({
+		id,
+		gradientUnits: "userSpaceOnUse",
+		cx: 0,
+		cy: 0,
+		r: rx * end,
+		gradientTransform: transform
+	})}>${svgStops(stops)}</radialGradient>`;
+}
+/** The background as SVG on a box: the bottom layer first, as SVG paints in order */
+function backgroundSvg(background, box, newId) {
+	const rect = (fill, opacity) => `<rect ${attrs({
+		x: box.x,
+		y: box.y,
+		width: box.width,
+		height: box.height,
+		fill,
+		"fill-opacity": opacity
+	})}/>`;
+	return background.toReversed().map((layer) => {
+		if (layer.type === "color") return rect(hex$2(layer.color), layer.color.a === 1 ? void 0 : round(layer.color.a));
+		const id = newId(`background-${layer.type}`);
+		return `<defs>${layer.type === "linear" ? linearSvg(id, layer, box) : radialSvg(id, layer, box)}</defs>${rect(`url(#${id})`)}`;
+	}).join("");
+}
+// src/color.ts
+function rgba(color) {
+	const parsed = parseColor(color);
+	if (!parsed) throw new Error(`Unknown color "${color}"`);
+	return parsed;
+}
+const toHex = (channel) => Math.round(Math.min(255, Math.max(0, channel))).toString(16).padStart(2, "0");
+function hex$1({ r, g, b }) {
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+const toLinear = (channel) => {
+	const value = channel / 255;
+	return value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4;
+};
+const fromLinear = (value) => 255 * (value <= .0031308 ? value * 12.92 : 1.055 * value ** (1 / 2.4) - .055);
+function toOklab({ r, g, b }) {
+	const [lr, lg, lb] = [
+		toLinear(r),
+		toLinear(g),
+		toLinear(b)
+	];
+	const l = Math.cbrt(.4122214708 * lr + .5363325363 * lg + .0514459929 * lb);
+	const m = Math.cbrt(.2119034982 * lr + .6806995451 * lg + .1073969566 * lb);
+	const s = Math.cbrt(.0883024619 * lr + .2817188376 * lg + .6299787005 * lb);
+	return {
+		l: .2104542553 * l + .793617785 * m - .0040720468 * s,
+		a: 1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+		b: .0259040371 * l + .7827717662 * m - .808675766 * s
+	};
+}
+function fromOklab({ l, a, b }) {
+	const l3 = (l + .3963377774 * a + .2158037573 * b) ** 3;
+	const m3 = (l - .1055613458 * a - .0638541728 * b) ** 3;
+	const s3 = (l - .0894841775 * a - 1.291485548 * b) ** 3;
+	return {
+		r: fromLinear(4.0767416621 * l3 - 3.3077115913 * m3 + .2309699292 * s3),
+		g: fromLinear(-1.2684380046 * l3 + 2.6097574011 * m3 - .3413193965 * s3),
+		b: fromLinear(-.0041960863 * l3 - .7034186147 * m3 + 1.707614701 * s3),
+		a: 1
+	};
+}
+/** The opaque color of a translucent color over an opaque one, as hex */
+function composite(color, below) {
+	const top = rgba(color);
+	const base = rgba(below);
+	const mix = (front, back) => front * top.a + back * (1 - top.a);
+	return hex$1({
+		r: mix(top.r, base.r),
+		g: mix(top.g, base.g),
+		b: mix(top.b, base.b),
+		a: 1
+	});
+}
+/**
+* A color with at least the given lightness difference to an opaque background, as an opaque hex
+* color. The color keeps its hue and goes further in its own direction: lighter when it is lighter
+* than the background, darker when it is darker. A color with no difference goes lighter on a dark
+* background and darker on a light one.
+*/
+function withContrast(color, background, minimum) {
+	const opaque = composite(color, background);
+	const front = toOklab(rgba(opaque));
+	const back = toOklab(rgba(background));
+	const difference = front.l - back.l;
+	if (Math.abs(difference) >= minimum) return opaque;
+	const step = (difference === 0 ? back.l < .5 : difference > 0) ? 1 : -1;
+	for (let extra = 0; extra < .02; extra += .001) {
+		const result = hex$1(fromOklab({
+			...front,
+			l: back.l + step * (minimum + extra)
+		}));
+		if (Math.abs(toOklab(rgba(result)).l - back.l) >= minimum) return result;
+	}
+	return hex$1(fromOklab({
+		...front,
+		l: back.l + step * (minimum + .02)
+	}));
+}
+// src/themes/index.ts
+const THEMES = [
 	{
-		"id": "solarized",
-		"name": "Solarized",
+		"id": "ayu",
+		"name": "Ayu",
 		"background": {
-			"from": "#b58900",
-			"to": "#cb4b16"
+			"from": "#ff8f40",
+			"to": "#ffb454"
 		},
 		"textmate": {
-			"dark": "solarized-dark",
-			"light": "solarized-light"
+			"dark": "ayu-dark",
+			"light": "ayu-light"
 		},
 		"window": {
 			"dark": {
-				"background": "#002b36",
-				"title": "#d6dbdb",
-				"divider": "#003847"
+				"background": "#10141c",
+				"title": "#5a6378",
+				"lineNumber": "#5a6378a6",
+				"divider": "#1b1f29"
 			},
 			"light": {
-				"background": "#fdf6e3",
-				"divider": "#ddd6c1"
+				"background": "#fcfcfc",
+				"title": "#828e9f",
+				"lineNumber": "#828e9f66",
+				"divider": "#6b7d8f1f"
 			}
 		},
 		"syntax": {
 			"dark": {
-				"foreground": "#839496",
-				"keyword": "#859900",
-				"string": "#2aa198",
-				"function": "#268bd2",
-				"comment": "#586e75",
-				"highlight": "#073642"
+				"foreground": "#bfbdb6",
+				"keyword": "#ff8f40",
+				"string": "#aad94c",
+				"function": "#ffb454",
+				"comment": "#5a6673",
+				"highlight": "#161a24"
 			},
 			"light": {
-				"foreground": "#657b83",
-				"keyword": "#859900",
-				"string": "#2aa198",
-				"function": "#268bd2",
-				"comment": "#93a1a1",
-				"highlight": "#eee8d5"
+				"foreground": "#5c6166",
+				"keyword": "#fa8532",
+				"string": "#86b300",
+				"function": "#eba400",
+				"comment": "#adaeb1",
+				"highlight": "#828e9f1a"
 			}
 		}
 	},
 	{
-		"id": "synthwave-84",
-		"name": "SynthWave '84",
-		"background": {
-			"from": "#fede5d",
-			"to": "#36f9f6"
-		},
-		"textmate": { "dark": "synthwave-84" },
-		"window": { "dark": {
-			"background": "#262335",
-			"lineNumber": "#ffffff73",
-			"divider": "#241b2f00"
-		} },
-		"syntax": { "dark": {
-			"foreground": "#ffffff",
-			"keyword": "#fede5d",
-			"string": "#ff8b39",
-			"function": "#36f9f6",
-			"comment": "#848bbd",
-			"highlight": "#ffffff20"
-		} }
-	},
-	{
-		"id": "tokyo-night",
-		"name": "Tokyo Night",
+		"id": "catppuccin",
+		"name": "Catppuccin",
 		"background": {
-			"from": "#7aa2f7",
-			"to": "#bb9af7"
+			"from": "#cba6f7",
+			"to": "#f5c2e7"
 		},
 		"textmate": {
-			"dark": "tokyo-night",
-			"light": "tokyo-night-light"
+			"dark": "catppuccin-mocha",
+			"light": "catppuccin-latte"
 		},
 		"window": {
 			"dark": {
-				"background": "#1a1b26",
-				"title": "#787c99",
-				"lineNumber": "#363b54",
-				"divider": "#101014"
+				"background": "#1e1e2e",
+				"title": "#cdd6f4",
+				"lineNumber": "#7f849c",
+				"divider": "#181825"
 			},
 			"light": {
-				"background": "#e6e7ed",
-				"title": "#363c4d",
-				"lineNumber": "#9da0ab",
-				"divider": "#c1c2c7"
+				"background": "#eff1f5",
+				"title": "#4c4f69",
+				"lineNumber": "#8c8fa1",
+				"divider": "#e6e9ef"
 			}
 		},
 		"syntax": {
 			"dark": {
-				"foreground": "#a9b1d6",
-				"keyword": "#bb9af7",
-				"string": "#9ece6a",
-				"function": "#7aa2f7",
-				"comment": "#51597d",
-				"highlight": "#1e202e"
+				"foreground": "#cdd6f4",
+				"keyword": "#cba6f7",
+				"string": "#a6e3a1",
+				"function": "#89b4fa",
+				"comment": "#9399b2",
+				"highlight": "#cdd6f412"
 			},
 			"light": {
-				"foreground": "#343b59",
-				"keyword": "#65359d",
-				"string": "#385f0d",
-				"function": "#2959aa",
-				"comment": "#888b94",
-				"highlight": "#dcdee3"
+				"foreground": "#4c4f69",
+				"keyword": "#8839ef",
+				"string": "#40a02b",
+				"function": "#1e66f5",
+				"comment": "#7c7f93",
+				"highlight": "#4c4f6912"
 			}
 		}
 	},
 	{
-		"id": "vitesse",
-		"name": "Vitesse",
+		"id": "vscode",
+		"name": "VS Code",
 		"background": {
-			"from": "#4d9375",
-			"to": "#80a665"
+			"from": "#c586c0",
+			"to": "#dcdcaa"
 		},
 		"textmate": {
-			"dark": "vitesse-dark",
-			"light": "vitesse-light"
+			"dark": "dark-plus",
+			"light": "light-plus"
 		},
 		"window": {
-			"dark": {
-				"background": "#121212",
-				"title": "#bfbaaa",
-				"lineNumber": "#dedcd550",
-				"divider": "#191919"
-			},
-			"light": {
-				"background": "#ffffff",
-				"title": "#4e4f47",
-				"lineNumber": "#393a3450",
-				"divider": "#f0f0f0"
-			}
+			"dark": { "background": "#1e1e1e" },
+			"light": { "background": "#ffffff" }
 		},
 		"syntax": {
 			"dark": {
-				"foreground": "#dbd7caee",
-				"keyword": "#4d9375",
-				"string": "#c98a7d",
-				"function": "#80a665",
-				"comment": "#758575dd",
-				"highlight": "#181818"
+				"foreground": "#d4d4d4",
+				"keyword": "#c586c0",
+				"string": "#ce9178",
+				"function": "#dcdcaa",
+				"comment": "#6a9955"
 			},
 			"light": {
-				"foreground": "#393a34",
-				"keyword": "#1e754f",
-				"string": "#b56959",
-				"function": "#59873a",
-				"comment": "#a0ada0",
-				"highlight": "#f7f7f7"
+				"foreground": "#000000",
+				"keyword": "#af00db",
+				"string": "#a31515",
+				"function": "#795e26",
+				"comment": "#008000"
 			}
 		}
-	}
-];
-const THEME_IDS = THEMES.map((theme) => theme.id);
-const DEFAULT_THEME = "github";
-const EDITOR_FRAME = {
-	light: {
-		highlightBorder: "rgba(0, 0, 0, 0.08)",
-		shadowBorder: "rgba(0, 0, 0, 0.1)"
-	},
-	dark: { highlightBorder: "rgba(255, 255, 255, 0.1)" }
-};
-const FRAME_COLORS = {
-	light: {
-		background: "rgba(255, 255, 255, 0.75)",
-		control: "rgba(0, 0, 0, 0.2)",
-		title: "rgba(0, 0, 0, 0.6)",
-		shadowBorder: "rgba(0, 0, 0, 0.1)",
-		highlightBorder: "rgba(255, 255, 255, 0.75)",
-		divider: "rgba(0, 0, 0, 0.08)",
-		highlight: "rgba(0, 0, 0, 0.1)",
-		highlightBorderLine: "transparent",
-		lineNumber: "rgba(0, 0, 0, 0.2)"
-	},
-	dark: {
-		background: "rgba(0, 0, 0, 0.75)",
-		control: "rgba(255, 255, 255, 0.2)",
-		title: "rgba(255, 255, 255, 0.6)",
-		shadowBorder: "rgba(0, 0, 0, 0.8)",
-		highlightBorder: "rgba(255, 255, 255, 0.3)",
-		divider: "rgba(255, 255, 255, 0.1)",
-		highlight: "rgba(255, 255, 255, 0.1)",
-		highlightBorderLine: "transparent",
-		lineNumber: "rgba(255, 255, 255, 0.2)"
-	}
-};
-function getTheme(id) {
-	const theme = THEMES.find((theme) => theme.id === id);
-	if (!theme) throw new Error(`Unknown theme "${id}". Available themes: ${THEME_IDS.join(", ")}`);
-	return theme;
-}
-/** A theme with only one mode always uses that mode */
-function resolveMode(theme, mode) {
-	if (!theme.syntax.light) return "dark";
-	if (!theme.syntax.dark) return "light";
-	return mode;
-}
-function getSyntax(theme, mode) {
-	return theme.syntax[resolveMode(theme, mode)] ?? theme.syntax.light ?? theme.syntax.dark;
-}
-function getFrameColors(theme, mode) {
-	const resolved = resolveMode(theme, mode);
-	const syntax = getSyntax(theme, resolved);
-	const frame = {
-		backdrop: theme.background,
-		...FRAME_COLORS[resolved],
-		...theme.window?.[resolved] && {
-			...EDITOR_FRAME[resolved],
-			...theme.window[resolved]
-		}
-	};
-	return {
-		...frame,
-		highlight: syntax.highlight ?? frame.highlight,
-		highlightBorderLine: syntax.highlightBorder ?? frame.highlightBorderLine
-	};
-}
-// src/ambient.ts
-/**
-* Backgrounds that the renderer makes from the colors of the image:
-* - ambient-blur: a blurred and larger copy of the code behind the window
-* - ambient-code: a mesh of the colors that the code uses most
-* - ambient-theme: a mesh of the keyword, string, function and constant colors of the theme
-*/
-const AMBIENT_BACKGROUNDS = [
-	"ambient-blur",
-	"ambient-code",
-	"ambient-theme"
-];
-const AMBIENT_ENABLED = false;
-function isAmbientBackground(css) {
-	return AMBIENT_BACKGROUNDS.includes(css);
-}
-const rgb = (color) => {
-	const [r, g, b] = parseColor$1(color);
-	return [
-		r,
-		g,
-		b
-	];
-};
-const hex$1 = (color) => `#${color.map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
-const mix = (a, b, amount) => a.map((channel, index) => channel + (b[index] - channel) * amount);
-function saturation([r, g, b]) {
-	const max = Math.max(r, g, b) / 255;
-	const min = Math.min(r, g, b) / 255;
-	if (max === min) return 0;
-	const lightness = (max + min) / 2;
-	return (max - min) / (1 - Math.abs(2 * lightness - 1));
-}
-const BLACK = [
-	0,
-	0,
-	0
-];
-const WHITE = [
-	255,
-	255,
-	255
-];
-const MIN_SATURATION = .3;
-const POSITIONS = [
-	"0% 0%",
-	"100% 100%",
-	"100% 0%",
-	"0% 100%"
-];
-/** The color below the glows: the window color, darker in dark mode and a little darker in light mode */
-function ambientBase(windowColor, mode) {
-	return hex$1(mix(rgb(windowColor), BLACK, mode === "dark" ? .35 : .04));
-}
-function glow(color, mode) {
-	return hex$1(mode === "dark" ? mix(rgb(color), BLACK, .15) : mix(rgb(color), WHITE, .45));
-}
-function mesh(colors, windowColor, mode) {
-	return [...colors.slice(0, POSITIONS.length).map((color, index) => `radial-gradient(at ${POSITIONS[index]}, ${glow(color, mode)} 0px, transparent ${55 - index * 5}%)`), ambientBase(windowColor, mode)].join(", ");
-}
-function vivid(colors) {
-	const seen = /* @__PURE__ */ new Set();
-	return colors.filter((color) => {
-		if (!color || !color.startsWith("#")) return false;
-		const key = color.slice(0, 7).toLowerCase();
-		if (seen.has(key) || saturation(rgb(color)) < MIN_SATURATION) return false;
-		seen.add(key);
-		return true;
-	});
-}
-function themeColors(syntax) {
-	return vivid([
-		syntax.keyword,
-		syntax.string,
-		syntax.function,
-		syntax.constant ?? syntax.number,
-		syntax.property,
-		syntax.parameter
-	]);
-}
-/** A mesh of the main syntax colors of the theme */
-function themeAmbientCss(syntax, windowColor, mode) {
-	return mesh(themeColors(syntax), windowColor, mode);
-}
-/**
-* A mesh of the colors that cover the most characters of the code. Code with fewer than two
-* vivid colors takes the rest from the theme.
-*/
-function codeAmbientCss(lines, syntax, windowColor, mode) {
-	const weights = /* @__PURE__ */ new Map();
-	for (const line of lines) for (const token of line) {
-		const characters = token.content.replace(/\s/g, "").length;
-		if (characters === 0) continue;
-		const key = token.color.slice(0, 7).toLowerCase();
-		weights.set(key, (weights.get(key) ?? 0) + characters);
-	}
-	const ranked = vivid([...weights].sort((a, b) => b[1] - a[1]).map(([color]) => color));
-	return mesh((ranked.length >= 2 ? ranked : vivid([...ranked, ...themeColors(syntax)])).slice(0, 3), windowColor, mode);
-}
-/** The theme mesh of a theme in a mode, as a preview of the ambient backgrounds before the code is known */
-function ambientPreviewCss(theme, mode) {
-	const resolved = resolveMode(theme, mode);
-	return themeAmbientCss(getSyntax(theme, resolved), getFrameColors(theme, resolved).background, resolved);
-}
-// src/backgrounds.ts
-const BACKGROUNDS = [
-	{
-		id: "black",
-		name: "Black",
-		kind: "color",
-		css: "#000000"
 	},
 	{
-		id: "obsidian",
-		name: "Obsidian",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #0a0a0a 0%, #262626 55%, #404040 100%)"
+		"id": "dracula",
+		"name": "Dracula",
+		"background": {
+			"from": "#bd93f9",
+			"to": "#ff79c6"
+		},
+		"textmate": {
+			"dark": "dracula",
+			"light": "dracula-alucard"
+		},
+		"window": {
+			"dark": {
+				"background": "#282a36",
+				"title": "#f8f8f2",
+				"lineNumber": "#6272a4",
+				"divider": "#191a21"
+			},
+			"light": {
+				"background": "#fffbeb",
+				"title": "#1f1f1f",
+				"lineNumber": "#6c664b",
+				"divider": "#ceccc0"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#f8f8f2",
+				"keyword": "#ff79c6",
+				"string": "#f1fa8c",
+				"function": "#50fa7b",
+				"comment": "#6272a4",
+				"highlight": "#44475a"
+			},
+			"light": {
+				"foreground": "#1f1f1f",
+				"keyword": "#a3144d",
+				"string": "#846e15",
+				"function": "#14710a",
+				"comment": "#6c664b",
+				"highlight": "#e2deca95"
+			}
+		}
 	},
 	{
-		id: "mist",
-		name: "Mist",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 50%, #ffffff 100%)"
+		"id": "github",
+		"name": "GitHub",
+		"background": {
+			"from": "#ff7b72",
+			"to": "#d2a8ff"
+		},
+		"textmate": {
+			"dark": "github-dark-default",
+			"light": "github-light-default"
+		},
+		"window": {
+			"dark": {
+				"background": "#0d1117",
+				"title": "#7d8590",
+				"lineNumber": "#6e7681",
+				"divider": "#30363d"
+			},
+			"light": {
+				"background": "#ffffff",
+				"title": "#656d76",
+				"lineNumber": "#8c959f",
+				"divider": "#d0d7de"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#e6edf3",
+				"keyword": "#ff7b72",
+				"string": "#a5d6ff",
+				"function": "#d2a8ff",
+				"comment": "#8b949e",
+				"highlight": "#6e76811a"
+			},
+			"light": {
+				"foreground": "#1f2328",
+				"keyword": "#cf222e",
+				"string": "#0a3069",
+				"function": "#8250df",
+				"comment": "#6e7781",
+				"highlight": "#eaeef280"
+			}
+		}
 	},
 	{
-		id: "white",
-		name: "White",
-		kind: "color",
-		css: "#ffffff"
-	},
-	{
-		id: "dusk",
-		name: "Dusk",
-		kind: "gradient",
-		css: "linear-gradient(to right top, #0d1117, #6e40c9, #f78166)"
+		"id": "material",
+		"name": "Material",
+		"background": {
+			"from": "#89ddff",
+			"to": "#82aaff"
+		},
+		"textmate": {
+			"dark": "material-theme",
+			"light": "material-theme-lighter"
+		},
+		"window": {
+			"dark": {
+				"background": "#263238",
+				"title": "#eeffff",
+				"lineNumber": "#465a64",
+				"divider": "#263238"
+			},
+			"light": {
+				"background": "#fafafa",
+				"title": "#90a4ae",
+				"lineNumber": "#cfd8dc",
+				"divider": "#fafafa"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#eeffff",
+				"keyword": "#89ddff",
+				"string": "#c3e88d",
+				"function": "#82aaff",
+				"comment": "#546e7a",
+				"highlight": "#00000050"
+			},
+			"light": {
+				"foreground": "#90a4ae",
+				"keyword": "#39adb5",
+				"string": "#91b859",
+				"function": "#6182b8",
+				"comment": "#90a4ae",
+				"highlight": "#ccd7da50"
+			}
+		}
 	},
 	{
-		id: "garnet",
-		name: "Garnet",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #450a0a 0%, #b91c1c 55%, #f87171 100%)"
+		"id": "night-owl",
+		"name": "Night Owl",
+		"background": {
+			"from": "#c792ea",
+			"to": "#82aaff"
+		},
+		"textmate": {
+			"dark": "night-owl",
+			"light": "night-owl-light"
+		},
+		"window": {
+			"dark": {
+				"background": "#011627",
+				"title": "#eeefff",
+				"lineNumber": "#4b6479",
+				"divider": "#262a39"
+			},
+			"light": {
+				"background": "#fbfbfb",
+				"title": "#403f53",
+				"lineNumber": "#90a7b2",
+				"divider": "#f0f0f0"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#d6deeb",
+				"keyword": "#c792ea",
+				"string": "#ecc48d",
+				"function": "#82aaff",
+				"comment": "#637777",
+				"highlight": "#28707d29"
+			},
+			"light": {
+				"foreground": "#403f53",
+				"keyword": "#994cc3",
+				"string": "#c96765",
+				"function": "#4876d6",
+				"comment": "#989fb1",
+				"highlight": "#f0f0f0"
+			}
+		}
 	},
 	{
-		id: "mesh-dawn",
-		name: "Dawn",
-		kind: "mesh",
-		css: "radial-gradient(at 0% 0%, #fda4af 0px, transparent 50%), radial-gradient(at 100% 0%, #fde68a 0px, transparent 50%), radial-gradient(at 100% 100%, #c4b5fd 0px, transparent 55%), radial-gradient(at 0% 100%, #a5f3fc 0px, transparent 55%), #fff7ed"
+		"id": "nord",
+		"name": "Nord",
+		"background": {
+			"from": "#5e81ac",
+			"to": "#8fbcbb"
+		},
+		"textmate": { "dark": "nord" },
+		"window": { "dark": {
+			"background": "#2e3440",
+			"title": "#d8dee9",
+			"lineNumber": "#4c566a",
+			"divider": "#3b425200"
+		} },
+		"syntax": { "dark": {
+			"foreground": "#d8dee9",
+			"keyword": "#81a1c1",
+			"string": "#a3be8c",
+			"function": "#88c0d0",
+			"comment": "#616e88",
+			"highlight": "#3b4252"
+		} }
 	},
 	{
-		id: "blush",
-		name: "Blush",
-		kind: "color",
-		css: "#fecdd3"
+		"id": "one-dark",
+		"name": "One Dark",
+		"background": {
+			"from": "#61afef",
+			"to": "#c678dd"
+		},
+		"textmate": {
+			"dark": "one-dark-pro",
+			"light": "one-light"
+		},
+		"window": {
+			"dark": {
+				"background": "#282c34",
+				"title": "#9da5b4",
+				"lineNumber": "#495162",
+				"divider": "#181a1f"
+			},
+			"light": {
+				"background": "#fafafa",
+				"title": "#424243",
+				"lineNumber": "#9d9d9f",
+				"divider": "#dbdbdc"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#abb2bf",
+				"keyword": "#c678dd",
+				"string": "#98c379",
+				"function": "#61afef",
+				"comment": "#7f848e",
+				"highlight": "#2c313c"
+			},
+			"light": {
+				"foreground": "#383a42",
+				"keyword": "#a626a4",
+				"string": "#50a14f",
+				"function": "#4078f2",
+				"comment": "#a0a1a7",
+				"highlight": "#383a420c"
+			}
+		}
 	},
 	{
-		id: "ember",
-		name: "Ember",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #1c1917 0%, #9a3412 55%, #f97316 100%)"
+		"id": "rose-pine",
+		"name": "Rosé Pine",
+		"background": {
+			"from": "#31748f",
+			"to": "#ebbcba"
+		},
+		"textmate": {
+			"dark": "rose-pine",
+			"light": "rose-pine-dawn"
+		},
+		"window": {
+			"dark": {
+				"background": "#191724",
+				"title": "#908caa",
+				"lineNumber": "#908caa",
+				"divider": "#00000000"
+			},
+			"light": {
+				"background": "#faf4ed",
+				"title": "#797593",
+				"lineNumber": "#797593",
+				"divider": "#00000000"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#e0def4",
+				"keyword": "#31748f",
+				"string": "#f6c177",
+				"function": "#ebbcba",
+				"comment": "#6e6a86",
+				"highlight": "#6e6a861a"
+			},
+			"light": {
+				"foreground": "#575279",
+				"keyword": "#286983",
+				"string": "#ea9d34",
+				"function": "#d7827e",
+				"comment": "#9893a5",
+				"highlight": "#6e6a860d"
+			}
+		}
 	},
 	{
-		id: "orange",
-		name: "Orange",
-		kind: "color",
-		css: "#ea580c"
+		"id": "solarized",
+		"name": "Solarized",
+		"background": {
+			"from": "#b58900",
+			"to": "#cb4b16"
+		},
+		"textmate": {
+			"dark": "solarized-dark",
+			"light": "solarized-light"
+		},
+		"window": {
+			"dark": {
+				"background": "#002b36",
+				"title": "#d6dbdb",
+				"divider": "#003847"
+			},
+			"light": {
+				"background": "#fdf6e3",
+				"divider": "#ddd6c1"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#839496",
+				"keyword": "#859900",
+				"string": "#2aa198",
+				"function": "#268bd2",
+				"comment": "#586e75",
+				"highlight": "#073642"
+			},
+			"light": {
+				"foreground": "#657b83",
+				"keyword": "#859900",
+				"string": "#2aa198",
+				"function": "#268bd2",
+				"comment": "#93a1a1",
+				"highlight": "#eee8d5"
+			}
+		}
 	},
 	{
-		id: "synthwave",
-		name: "Synthwave",
-		kind: "gradient",
-		css: "linear-gradient(180deg, #2a0845 0%, #6441a5 45%, #ff6ec7 80%, #ffd36e 100%)"
-	},
-	{
-		id: "coral",
-		name: "Coral",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #f43f5e 0%, #fb7185 50%, #fdba74 100%)"
-	},
-	{
-		id: "mesh-dune",
-		name: "Dune",
-		kind: "mesh",
-		css: "radial-gradient(at 20% 80%, #d6a46b 0px, transparent 55%), radial-gradient(at 80% 20%, #f2d4b0 0px, transparent 50%), #f7ede0"
-	},
-	{
-		id: "linen",
-		name: "Linen",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #d6c7a8 0%, #e7dcc6 50%, #f5f0e6 100%)"
-	},
-	{
-		id: "daybreak",
-		name: "Daybreak",
-		kind: "mesh",
-		css: "radial-gradient(at 0% 0%, #ffd6a5 0px, transparent 55%), radial-gradient(at 100% 100%, #a5d8ff 0px, transparent 55%), #fdfcfb"
-	},
-	{
-		id: "wildfire",
-		name: "Wildfire",
-		kind: "gradient",
-		css: "linear-gradient(to right top, #7c2d12, #ea580c, #fb923c, #fde68a)"
-	},
-	{
-		id: "honey",
-		name: "Honey",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fef3c7 100%)"
-	},
-	{
-		id: "sage",
-		name: "Sage",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #84a98c 0%, #b7c9a8 50%, #e9edc9 100%)"
-	},
-	{
-		id: "mesh-moss",
-		name: "Moss",
-		kind: "mesh",
-		css: "radial-gradient(at 30% 20%, #4d7c0f 0px, transparent 55%), radial-gradient(at 80% 80%, #0f766e 0px, transparent 55%), #0c1a0e"
-	},
-	{
-		id: "evergreen",
-		name: "Evergreen",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #0d1117 0%, #033a16 55%, #2ea043 100%)"
-	},
-	{
-		id: "octo",
-		name: "Octo",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #0d1117 0%, #0d419d 55%, #2ea043 100%)"
-	},
-	{
-		id: "jade",
-		name: "Jade",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #0b1410 0%, #1f4d3a 55%, #4d9375 100%)"
-	},
-	{
-		id: "fresh",
-		name: "Fresh",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #ffffff 0%, #dafbe1 55%, #6fdd8b 100%)"
-	},
-	{
-		id: "pine",
-		name: "Pine",
-		kind: "color",
-		css: "#052e2b"
-	},
-	{
-		id: "deep-sea",
-		name: "Deep Sea",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #020617 0%, #0c4a6e 55%, #0891b2 100%)"
-	},
-	{
-		id: "teal",
-		name: "Teal",
-		kind: "color",
-		css: "#0d9488"
-	},
-	{
-		id: "mesh-lagoon",
-		name: "Lagoon Mesh",
-		kind: "mesh",
-		css: "radial-gradient(at 10% 90%, #14b8a6 0px, transparent 55%), radial-gradient(at 90% 20%, #6366f1 0px, transparent 50%), radial-gradient(at 50% 50%, #0e7490 0px, transparent 60%), #042f2e"
-	},
-	{
-		id: "lagoon",
-		name: "Lagoon",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #134e4a 0%, #0d9488 55%, #5eead4 100%)"
-	},
-	{
-		id: "nordic",
-		name: "Nordic",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #2e3440 0%, #4c566a 45%, #88c0d0 100%)"
-	},
-	{
-		id: "lime-soda",
-		name: "Lime Soda",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #a3e635 0%, #4ade80 50%, #2dd4bf 100%)"
-	},
-	{
-		id: "seafoam",
-		name: "Seafoam",
-		kind: "color",
-		css: "#ccfbf1"
-	},
-	{
-		id: "night",
-		name: "Night",
-		kind: "color",
-		css: "#0f172a"
-	},
-	{
-		id: "night-sky",
-		name: "Night Sky",
-		kind: "gradient",
-		css: "linear-gradient(180deg, #010409 0%, #0d1117 50%, #1f6feb 100%)"
-	},
-	{
-		id: "primer",
-		name: "Primer",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #0d1117 0%, #0c2d6b 55%, #1f6feb 100%)"
+		"id": "synthwave-84",
+		"name": "SynthWave '84",
+		"background": {
+			"from": "#fede5d",
+			"to": "#36f9f6"
+		},
+		"textmate": { "dark": "synthwave-84" },
+		"window": { "dark": {
+			"background": "#262335",
+			"lineNumber": "#ffffff73",
+			"divider": "#241b2f00"
+		} },
+		"syntax": { "dark": {
+			"foreground": "#ffffff",
+			"keyword": "#fede5d",
+			"string": "#ff8b39",
+			"function": "#36f9f6",
+			"comment": "#848bbd",
+			"highlight": "#ffffff20"
+		} }
 	},
 	{
-		id: "slate",
-		name: "Slate",
-		kind: "gradient",
-		css: "linear-gradient(160deg, #0f172a 0%, #334155 60%, #64748b 100%)"
+		"id": "tokyo-night",
+		"name": "Tokyo Night",
+		"background": {
+			"from": "#7aa2f7",
+			"to": "#bb9af7"
+		},
+		"textmate": {
+			"dark": "tokyo-night",
+			"light": "tokyo-night-light"
+		},
+		"window": {
+			"dark": {
+				"background": "#1a1b26",
+				"title": "#787c99",
+				"lineNumber": "#363b54",
+				"divider": "#101014"
+			},
+			"light": {
+				"background": "#e6e7ed",
+				"title": "#363c4d",
+				"lineNumber": "#9da0ab",
+				"divider": "#c1c2c7"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#a9b1d6",
+				"keyword": "#bb9af7",
+				"string": "#9ece6a",
+				"function": "#7aa2f7",
+				"comment": "#51597d",
+				"highlight": "#1e202e"
+			},
+			"light": {
+				"foreground": "#343b59",
+				"keyword": "#65359d",
+				"string": "#385f0d",
+				"function": "#2959aa",
+				"comment": "#888b94",
+				"highlight": "#dcdee3"
+			}
+		}
 	},
 	{
-		id: "mesh-glacier",
-		name: "Glacier",
-		kind: "mesh",
-		css: "radial-gradient(at 0% 0%, #1d4ed8 0px, transparent 50%), radial-gradient(at 100% 100%, #22d3ee 0px, transparent 50%), #0b1a3a"
+		"id": "vitesse",
+		"name": "Vitesse",
+		"background": {
+			"from": "#4d9375",
+			"to": "#80a665"
+		},
+		"textmate": {
+			"dark": "vitesse-dark",
+			"light": "vitesse-light"
+		},
+		"window": {
+			"dark": {
+				"background": "#121212",
+				"title": "#bfbaaa",
+				"lineNumber": "#dedcd550",
+				"divider": "#191919"
+			},
+			"light": {
+				"background": "#ffffff",
+				"title": "#4e4f47",
+				"lineNumber": "#393a3450",
+				"divider": "#f0f0f0"
+			}
+		},
+		"syntax": {
+			"dark": {
+				"foreground": "#dbd7caee",
+				"keyword": "#4d9375",
+				"string": "#c98a7d",
+				"function": "#80a665",
+				"comment": "#758575dd",
+				"highlight": "#181818"
+			},
+			"light": {
+				"foreground": "#393a34",
+				"keyword": "#1e754f",
+				"string": "#b56959",
+				"function": "#59873a",
+				"comment": "#a0ada0",
+				"highlight": "#f7f7f7"
+			}
+		}
+	}
+];
+const THEME_IDS = THEMES.map((theme) => theme.id);
+const DEFAULT_THEME = "github";
+const EDITOR_FRAME = {
+	light: {
+		highlightBorder: "rgba(0, 0, 0, 0.08)",
+		shadowBorder: "rgba(0, 0, 0, 0.1)"
 	},
-	{
-		id: "azure",
-		name: "Azure",
-		kind: "gradient",
-		css: "linear-gradient(to right top, #0369a1, #0ea5e9, #7dd3fc)"
+	dark: { highlightBorder: "rgba(255, 255, 255, 0.1)" }
+};
+const FRAME_COLORS = {
+	light: {
+		background: "rgba(255, 255, 255, 0.75)",
+		control: "rgba(0, 0, 0, 0.2)",
+		title: "rgba(0, 0, 0, 0.6)",
+		shadowBorder: "rgba(0, 0, 0, 0.1)",
+		highlightBorder: "rgba(255, 255, 255, 0.75)",
+		divider: "rgba(0, 0, 0, 0.08)",
+		highlight: "rgba(0, 0, 0, 0.1)",
+		highlightBorderLine: "transparent",
+		lineNumber: "rgba(0, 0, 0, 0.2)"
 	},
-	{
-		id: "blue",
-		name: "Blue",
+	dark: {
+		background: "rgba(0, 0, 0, 0.75)",
+		control: "rgba(255, 255, 255, 0.2)",
+		title: "rgba(255, 255, 255, 0.6)",
+		shadowBorder: "rgba(0, 0, 0, 0.8)",
+		highlightBorder: "rgba(255, 255, 255, 0.3)",
+		divider: "rgba(255, 255, 255, 0.1)",
+		highlight: "rgba(255, 255, 255, 0.1)",
+		highlightBorderLine: "transparent",
+		lineNumber: "rgba(255, 255, 255, 0.2)"
+	}
+};
+function getTheme(id) {
+	const theme = THEMES.find((theme) => theme.id === id);
+	if (!theme) throw new Error(`Unknown theme "${id}". Available themes: ${THEME_IDS.join(", ")}`);
+	return theme;
+}
+/** A theme with only one mode always uses that mode */
+function resolveMode(theme, mode) {
+	if (!theme.syntax.light) return "dark";
+	if (!theme.syntax.dark) return "light";
+	return mode;
+}
+function getSyntax(theme, mode) {
+	return theme.syntax[resolveMode(theme, mode)] ?? theme.syntax.light ?? theme.syntax.dark;
+}
+/**
+* The least OKLab lightness difference between a highlighted line and the window. The themes made
+* their line highlight for the cursor line of an editor, so many are too faint for a code image.
+*/
+const HIGHLIGHT_CONTRAST = .06;
+function getFrameColors(theme, mode) {
+	const resolved = resolveMode(theme, mode);
+	const syntax = getSyntax(theme, resolved);
+	const frame = {
+		backdrop: theme.background,
+		...FRAME_COLORS[resolved],
+		...theme.window?.[resolved] && {
+			...EDITOR_FRAME[resolved],
+			...theme.window[resolved]
+		}
+	};
+	return {
+		...frame,
+		highlight: withContrast(syntax.highlight ?? frame.highlight, frame.background, HIGHLIGHT_CONTRAST),
+		highlightBorderLine: syntax.highlightBorder ?? frame.highlightBorderLine
+	};
+}
+// src/ambient.ts
+/**
+* Backgrounds that the renderer makes from the colors of the image:
+* - ambient-blur: a blurred and larger copy of the code behind the window
+* - ambient-code: a mesh of the colors that the code uses most
+* - ambient-theme: a mesh of the keyword, string, function and constant colors of the theme
+*/
+const AMBIENT_BACKGROUNDS = [
+	"ambient-blur",
+	"ambient-code",
+	"ambient-theme"
+];
+const AMBIENT_ENABLED = false;
+function isAmbientBackground(css) {
+	return AMBIENT_BACKGROUNDS.includes(css);
+}
+const rgb = (color) => {
+	const [r, g, b] = parseColor$1(color);
+	return [
+		r,
+		g,
+		b
+	];
+};
+const hex = (color) => `#${color.map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+const mix = (a, b, amount) => a.map((channel, index) => channel + (b[index] - channel) * amount);
+function saturation([r, g, b]) {
+	const max = Math.max(r, g, b) / 255;
+	const min = Math.min(r, g, b) / 255;
+	if (max === min) return 0;
+	const lightness = (max + min) / 2;
+	return (max - min) / (1 - Math.abs(2 * lightness - 1));
+}
+const BLACK = [
+	0,
+	0,
+	0
+];
+const WHITE = [
+	255,
+	255,
+	255
+];
+const MIN_SATURATION = .3;
+const POSITIONS = [
+	"0% 0%",
+	"100% 100%",
+	"100% 0%",
+	"0% 100%"
+];
+/** The color below the glows: the window color, darker in dark mode and a little darker in light mode */
+function ambientBase(windowColor, mode) {
+	return hex(mix(rgb(windowColor), BLACK, mode === "dark" ? .35 : .04));
+}
+function glow(color, mode) {
+	return hex(mode === "dark" ? mix(rgb(color), BLACK, .15) : mix(rgb(color), WHITE, .45));
+}
+function mesh(colors, windowColor, mode) {
+	return [...colors.slice(0, POSITIONS.length).map((color, index) => `radial-gradient(at ${POSITIONS[index]}, ${glow(color, mode)} 0px, transparent ${55 - index * 5}%)`), ambientBase(windowColor, mode)].join(", ");
+}
+function vivid(colors) {
+	const seen = /* @__PURE__ */ new Set();
+	return colors.filter((color) => {
+		if (!color || !color.startsWith("#")) return false;
+		const key = color.slice(0, 7).toLowerCase();
+		if (seen.has(key) || saturation(rgb(color)) < MIN_SATURATION) return false;
+		seen.add(key);
+		return true;
+	});
+}
+function themeColors(syntax) {
+	return vivid([
+		syntax.keyword,
+		syntax.string,
+		syntax.function,
+		syntax.constant ?? syntax.number,
+		syntax.property,
+		syntax.parameter
+	]);
+}
+/** A mesh of the main syntax colors of the theme */
+function themeAmbientCss(syntax, windowColor, mode) {
+	return mesh(themeColors(syntax), windowColor, mode);
+}
+/**
+* A mesh of the colors that cover the most characters of the code. Code with fewer than two
+* vivid colors takes the rest from the theme.
+*/
+function codeAmbientCss(lines, syntax, windowColor, mode) {
+	const weights = /* @__PURE__ */ new Map();
+	for (const line of lines) for (const token of line) {
+		const characters = token.content.replace(/\s/g, "").length;
+		if (characters === 0) continue;
+		const key = token.color.slice(0, 7).toLowerCase();
+		weights.set(key, (weights.get(key) ?? 0) + characters);
+	}
+	const ranked = vivid([...weights].sort((a, b) => b[1] - a[1]).map(([color]) => color));
+	return mesh((ranked.length >= 2 ? ranked : vivid([...ranked, ...themeColors(syntax)])).slice(0, 3), windowColor, mode);
+}
+/** The theme mesh of a theme in a mode, as a preview of the ambient backgrounds before the code is known */
+function ambientPreviewCss(theme, mode) {
+	const resolved = resolveMode(theme, mode);
+	return themeAmbientCss(getSyntax(theme, resolved), getFrameColors(theme, resolved).background, resolved);
+}
+// src/backgrounds.ts
+const BACKGROUNDS = [
+	{
+		id: "black",
+		name: "Black",
 		kind: "color",
-		css: "#2563eb"
+		css: "#000000"
 	},
 	{
-		id: "primer-light",
-		name: "Primer Light",
+		id: "obsidian",
+		name: "Obsidian",
 		kind: "gradient",
-		css: "linear-gradient(160deg, #ffffff 0%, #ddf4ff 55%, #54aeff 100%)"
+		css: "linear-gradient(160deg, #0a0a0a 0%, #262626 55%, #404040 100%)"
 	},
 	{
-		id: "ice",
-		name: "Ice",
+		id: "mist",
+		name: "Mist",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #bae6fd 0%, #e0f2fe 55%, #f8fafc 100%)"
+		css: "linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 50%, #ffffff 100%)"
 	},
 	{
-		id: "sky",
-		name: "Sky",
-		kind: "mesh",
-		css: "radial-gradient(at 0% 0%, #ddf4ff 0px, transparent 55%), radial-gradient(at 100% 100%, #dafbe1 0px, transparent 55%), #ffffff"
+		id: "white",
+		name: "White",
+		kind: "color",
+		css: "#ffffff"
 	},
 	{
-		id: "navy",
-		name: "Navy",
-		kind: "color",
-		css: "#172554"
+		id: "dusk",
+		name: "Dusk",
+		kind: "gradient",
+		css: "linear-gradient(to right top, #0d1117, #6e40c9, #f78166)"
 	},
 	{
-		id: "periwinkle",
-		name: "Periwinkle",
+		id: "merlot",
+		name: "Merlot",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #818cf8 0%, #a5b4fc 50%, #c7d2fe 100%)"
+		css: "linear-gradient(160deg, #1c0a12 0%, #4c0519 55%, #be123c 100%)"
 	},
 	{
-		id: "lilac",
-		name: "Lilac",
+		id: "blush",
+		name: "Blush",
 		kind: "color",
-		css: "#ddd6fe"
+		css: "#fecdd3"
 	},
 	{
-		id: "aubergine",
-		name: "Aubergine",
+		id: "red",
+		name: "Red",
 		kind: "color",
-		css: "#2e1065"
+		css: "#dc2626"
 	},
 	{
-		id: "copilot",
-		name: "Copilot",
+		id: "ember",
+		name: "Ember",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #0d1117 0%, #3c1e70 50%, #8957e5 100%)"
+		css: "linear-gradient(160deg, #1c1917 0%, #9a3412 55%, #f97316 100%)"
 	},
 	{
-		id: "mesh-nebula",
-		name: "Nebula",
-		kind: "mesh",
-		css: "radial-gradient(at 20% 20%, #7c3aed 0px, transparent 50%), radial-gradient(at 80% 10%, #db2777 0px, transparent 50%), radial-gradient(at 70% 90%, #2563eb 0px, transparent 55%), #0b0820"
+		id: "orange",
+		name: "Orange",
+		kind: "color",
+		css: "#ea580c"
 	},
 	{
-		id: "aurora",
-		name: "Aurora",
-		kind: "gradient",
-		css: "linear-gradient(to right top, #064e3b, #059669, #22d3ee, #a78bfa)"
+		id: "amber",
+		name: "Amber",
+		kind: "color",
+		css: "#f59e0b"
 	},
 	{
-		id: "violet",
-		name: "Violet",
+		id: "forest",
+		name: "Forest",
 		kind: "color",
-		css: "#7c3aed"
+		css: "#14532d"
 	},
 	{
-		id: "ocean",
-		name: "Ocean",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #54aeff 0%, #8250df 100%)"
+		id: "green",
+		name: "Green",
+		kind: "color",
+		css: "#16a34a"
 	},
 	{
-		id: "violet-wash",
-		name: "Violet Wash",
+		id: "synthwave",
+		name: "Synthwave",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #8250df 0%, #a371f7 50%, #e9d8fd 100%)"
+		css: "linear-gradient(180deg, #2a0845 0%, #6441a5 45%, #ff6ec7 80%, #ffd36e 100%)"
 	},
 	{
-		id: "sunrise",
-		name: "Sunrise",
+		id: "coral",
+		name: "Coral",
 		kind: "gradient",
-		css: "linear-gradient(to right top, #ffd8b5, #ffd8eb, #e9d8fd)"
+		css: "linear-gradient(135deg, #f43f5e 0%, #fb7185 50%, #fdba74 100%)"
 	},
 	{
-		id: "plum",
-		name: "Plum",
-		kind: "gradient",
-		css: "linear-gradient(135deg, #3b2a4a 0%, #6b3f7a 50%, #c678dd 100%)"
+		id: "mesh-dune",
+		name: "Dune",
+		kind: "mesh",
+		css: "radial-gradient(at 20% 80%, #d6a46b 0px, transparent 55%), radial-gradient(at 80% 20%, #f2d4b0 0px, transparent 50%), #f7ede0"
 	},
 	{
-		id: "mesh-orchid",
-		name: "Orchid",
+		id: "daybreak",
+		name: "Daybreak",
 		kind: "mesh",
-		css: "radial-gradient(at 15% 85%, #c026d3 0px, transparent 50%), radial-gradient(at 85% 15%, #f0abfc 0px, transparent 45%), radial-gradient(at 60% 60%, #6d28d9 0px, transparent 55%), #1a0526"
+		css: "radial-gradient(at 0% 0%, #ffd6a5 0px, transparent 55%), radial-gradient(at 100% 100%, #a5d8ff 0px, transparent 55%), #fdfcfb"
 	},
 	{
-		id: "lavender",
-		name: "Lavender",
+		id: "wildfire",
+		name: "Wildfire",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #a78bfa 0%, #c4b5fd 50%, #f5d0fe 100%)"
+		css: "linear-gradient(to right top, #7c2d12, #ea580c, #fb923c, #fde68a)"
 	},
 	{
-		id: "magenta",
-		name: "Magenta",
+		id: "honey",
+		name: "Honey",
 		kind: "gradient",
-		css: "linear-gradient(to right top, #701a75, #c026d3, #f472b6)"
+		css: "linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fef3c7 100%)"
 	},
 	{
-		id: "pink",
-		name: "Pink",
-		kind: "color",
-		css: "#db2777"
+		id: "lemon",
+		name: "Lemon",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #facc15 0%, #fde68a 50%, #fefce8 100%)"
 	},
 	{
-		id: "violet-pop",
-		name: "Violet Pop",
+		id: "sage",
+		name: "Sage",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #8250df 0%, #bf3989 100%)"
+		css: "linear-gradient(135deg, #84a98c 0%, #b7c9a8 50%, #e9edc9 100%)"
 	},
 	{
-		id: "twilight",
-		name: "Twilight",
+		id: "evergreen",
+		name: "Evergreen",
 		kind: "gradient",
-		css: "linear-gradient(to right top, #1e1b4b, #4338ca, #c084fc, #f9a8d4)"
+		css: "linear-gradient(160deg, #0d1117 0%, #033a16 55%, #2ea043 100%)"
 	},
 	{
-		id: "mesh-sorbet",
-		name: "Sorbet Mesh",
+		id: "emerald",
+		name: "Emerald",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #047857 0%, #10b981 50%, #6ee7b7 100%)"
+	},
+	{
+		id: "jade",
+		name: "Jade",
+		kind: "gradient",
+		css: "linear-gradient(160deg, #0b1410 0%, #1f4d3a 55%, #4d9375 100%)"
+	},
+	{
+		id: "pine",
+		name: "Pine",
+		kind: "color",
+		css: "#052e2b"
+	},
+	{
+		id: "deep-sea",
+		name: "Deep Sea",
+		kind: "gradient",
+		css: "linear-gradient(160deg, #020617 0%, #0c4a6e 55%, #0891b2 100%)"
+	},
+	{
+		id: "teal",
+		name: "Teal",
+		kind: "color",
+		css: "#0d9488"
+	},
+	{
+		id: "mesh-lagoon",
+		name: "Lagoon Mesh",
 		kind: "mesh",
-		css: "radial-gradient(at 0% 50%, #f472b6 0px, transparent 55%), radial-gradient(at 100% 30%, #a78bfa 0px, transparent 50%), radial-gradient(at 60% 100%, #fbbf24 0px, transparent 50%), #fdf2f8"
+		css: "radial-gradient(at 10% 90%, #14b8a6 0px, transparent 55%), radial-gradient(at 90% 20%, #6366f1 0px, transparent 50%), radial-gradient(at 50% 50%, #0e7490 0px, transparent 60%), #042f2e"
 	},
 	{
-		id: "peach",
-		name: "Peach",
+		id: "lagoon",
+		name: "Lagoon",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #fdba74 0%, #fecaca 55%, #fce7f3 100%)"
+		css: "linear-gradient(135deg, #134e4a 0%, #0d9488 55%, #5eead4 100%)"
 	},
 	{
-		id: "rose",
-		name: "Rose",
+		id: "nordic",
+		name: "Nordic",
 		kind: "gradient",
-		css: "linear-gradient(135deg, #fda4af 0%, #fbcfe8 50%, #fdf2f8 100%)"
-	}
-];
-const THEME_BACKGROUNDS = {
-	ayu: {
-		dark: "ember",
-		light: "honey"
+		css: "linear-gradient(135deg, #2e3440 0%, #4c566a 45%, #88c0d0 100%)"
 	},
-	catppuccin: {
-		dark: "twilight",
-		light: "lavender"
+	{
+		id: "lime-soda",
+		name: "Lime Soda",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #a3e635 0%, #4ade80 50%, #2dd4bf 100%)"
 	},
-	dracula: {
-		dark: "mesh-orchid",
-		light: "rose"
+	{
+		id: "aqua",
+		name: "Aqua",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #22d3ee 0%, #a5f3fc 55%, #ecfeff 100%)"
 	},
-	github: {
-		dark: "dusk",
-		light: "sunrise"
+	{
+		id: "primer",
+		name: "Primer",
+		kind: "gradient",
+		css: "linear-gradient(160deg, #0d1117 0%, #0c2d6b 55%, #1f6feb 100%)"
 	},
-	material: {
-		dark: "slate",
-		light: "ice"
+	{
+		id: "slate",
+		name: "Slate",
+		kind: "gradient",
+		css: "linear-gradient(160deg, #0f172a 0%, #334155 60%, #64748b 100%)"
 	},
-	"night-owl": {
-		dark: "deep-sea",
-		light: "ice"
+	{
+		id: "mesh-glacier",
+		name: "Glacier",
+		kind: "mesh",
+		css: "radial-gradient(at 0% 0%, #1d4ed8 0px, transparent 50%), radial-gradient(at 100% 100%, #22d3ee 0px, transparent 50%), #0b1a3a"
 	},
-	nord: { dark: "nordic" },
-	"one-dark": {
-		dark: "plum",
-		light: "mist"
+	{
+		id: "azure",
+		name: "Azure",
+		kind: "gradient",
+		css: "linear-gradient(to right top, #0369a1, #0ea5e9, #7dd3fc)"
 	},
-	"rose-pine": {
-		dark: "mesh-orchid",
-		light: "peach"
+	{
+		id: "blue",
+		name: "Blue",
+		kind: "color",
+		css: "#2563eb"
 	},
-	solarized: {
-		dark: "deep-sea",
-		light: "mesh-dune"
+	{
+		id: "ice",
+		name: "Ice",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #bae6fd 0%, #e0f2fe 55%, #f8fafc 100%)"
 	},
-	"synthwave-84": { dark: "synthwave" },
-	"tokyo-night": {
-		dark: "twilight",
-		light: "periwinkle"
+	{
+		id: "navy",
+		name: "Navy",
+		kind: "color",
+		css: "#172554"
 	},
-	vitesse: {
-		dark: "jade",
-		light: "sage"
+	{
+		id: "periwinkle",
+		name: "Periwinkle",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #818cf8 0%, #a5b4fc 50%, #c7d2fe 100%)"
 	},
-	vscode: {
-		dark: "primer",
-		light: "daybreak"
-	}
-};
-/** The background preset of a theme in a mode, or undefined when the theme has none */
-function themeBackground(theme, mode) {
-	const id = THEME_BACKGROUNDS[theme.id]?.[mode];
-	return BACKGROUNDS.find((preset) => preset.id === id);
-}
-// src/gradient.ts
-const HEX = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
-const NUMBER = String.raw`[+-]?(?:\d+\.?\d*|\.\d+)`;
-const LENGTH = new RegExp(`^(${NUMBER})(%|px)?$`, "i");
-const ANGLE = new RegExp(`^(${NUMBER})(deg|turn|rad|grad)$`, "i");
-const SIDES = {
-	left: { x: -1 },
-	right: { x: 1 },
-	top: { y: -1 },
-	bottom: { y: 1 }
-};
-const EXTENTS = /* @__PURE__ */ new Set([
-	"closest-side",
-	"closest-corner",
-	"farthest-side",
-	"farthest-corner"
-]);
-const POSITION_KEYWORDS = {
-	left: {
-		axis: "x",
-		value: 0
+	{
+		id: "mesh-nebula",
+		name: "Nebula",
+		kind: "mesh",
+		css: "radial-gradient(at 20% 20%, #7c3aed 0px, transparent 50%), radial-gradient(at 80% 10%, #db2777 0px, transparent 50%), radial-gradient(at 70% 90%, #2563eb 0px, transparent 55%), #0b0820"
 	},
-	right: {
-		axis: "x",
-		value: 100
+	{
+		id: "aurora",
+		name: "Aurora",
+		kind: "gradient",
+		css: "linear-gradient(to right top, #064e3b, #059669, #22d3ee, #a78bfa)"
 	},
-	top: {
-		axis: "y",
-		value: 0
+	{
+		id: "violet",
+		name: "Violet",
+		kind: "color",
+		css: "#7c3aed"
 	},
-	bottom: {
-		axis: "y",
-		value: 100
+	{
+		id: "fuchsia",
+		name: "Fuchsia",
+		kind: "color",
+		css: "#c026d3"
 	},
-	center: { value: 50 }
-};
-/** Splits at the separator outside of parentheses */
-function split(text, separator) {
-	const parts = [];
-	let depth = 0;
-	let current = "";
-	for (const char of text) {
-		if (char === "(") depth++;
-		if (char === ")") depth--;
-		if (depth < 0) throw new Error("unbalanced parentheses");
-		if ((separator === " " ? /\s/.test(char) : char === separator) && depth === 0) {
-			parts.push(current.trim());
-			current = "";
-		} else current += char;
-	}
-	if (depth !== 0) throw new Error("unbalanced parentheses");
-	parts.push(current.trim());
-	return separator === " " ? parts.filter(Boolean) : parts;
-}
-function parseHex(hex) {
-	const digits = hex.slice(1);
-	const full = digits.length <= 4 ? digits.replace(/./g, "$&$&") : digits;
-	const channel = (index) => parseInt(full.slice(index * 2, index * 2 + 2), 16);
-	return {
-		r: channel(0),
-		g: channel(1),
-		b: channel(2),
-		a: full.length === 8 ? channel(3) / 255 : 1
-	};
-}
-function parseChannel(text, max) {
-	const match = LENGTH.exec(text);
-	if (!match || match[2]?.toLowerCase() === "px") throw new Error(`invalid color channel ${text}`);
-	const value = Number(match[1]);
-	const scaled = match[2] === "%" ? value / 100 * max : value;
-	return Math.min(max, Math.max(0, scaled));
-}
-function parseColor(text) {
-	const color = text.trim().toLowerCase();
-	if (color === "transparent") return {
-		r: 0,
-		g: 0,
-		b: 0,
-		a: 0
-	};
-	if (HEX.test(color)) return parseHex(color);
-	const fn = /^rgba?\((.*)\)$/.exec(color);
-	if (!fn) return void 0;
-	const [channels, alpha] = fn[1].includes("/") ? fn[1].split("/") : [fn[1], void 0];
-	const parts = channels.includes(",") ? channels.split(",").map((part) => part.trim()) : split(channels, " ");
-	if (alpha !== void 0 && parts.length !== 3) return void 0;
-	if (parts.length !== 3 && parts.length !== 4) return void 0;
-	const [r, g, b] = parts.slice(0, 3).map((part) => parseChannel(part, 255));
-	const a = alpha ?? parts[3];
-	return {
-		r,
-		g,
-		b,
-		a: a === void 0 ? 1 : parseChannel(a.trim(), 1)
-	};
-}
-function parseLength(text) {
-	const match = LENGTH.exec(text);
-	if (!match) throw new Error(`invalid length ${text}`);
-	const value = Number(match[1]);
-	if (!match[2] && value !== 0) throw new Error(`a length needs % or px: ${text}`);
-	return {
-		value,
-		unit: match[2]?.toLowerCase() ?? "px"
-	};
-}
-function parseStops(args) {
-	const stops = args.flatMap((arg) => {
-		const [colorText, ...positions] = split(arg, " ");
-		const color = parseColor(colorText ?? "");
-		if (!color || positions.length > 2) throw new Error(`invalid color stop ${arg}`);
-		if (positions.length === 0) return [{ color }];
-		return positions.map((position) => ({
-			color,
-			position: parseLength(position)
-		}));
-	});
-	if (stops.length < 2) throw new Error("a gradient needs two colors");
-	return stops;
-}
-function parseAngle(text) {
-	const match = ANGLE.exec(text);
-	if (!match) return void 0;
-	const value = Number(match[1]);
-	const unit = match[2].toLowerCase();
-	if (unit === "turn") return value * 360;
-	if (unit === "rad") return value * 180 / Math.PI;
-	if (unit === "grad") return value * .9;
-	return value;
-}
-function parseLinear(args) {
-	const first = args[0];
-	const angle = parseAngle(first);
-	if (angle !== void 0) return {
-		type: "linear",
-		direction: { angle },
-		stops: parseStops(args.slice(1))
-	};
-	const words = split(first, " ");
-	if (words[0] === "to") {
-		const to = {
-			x: 0,
-			y: 0
-		};
-		for (const word of words.slice(1)) {
-			const side = SIDES[word];
-			if (!side || words.length > 3) throw new Error(`invalid direction ${first}`);
-			Object.assign(to, side);
-		}
-		if (words.length < 2) throw new Error(`invalid direction ${first}`);
-		return {
-			type: "linear",
-			direction: { to },
-			stops: parseStops(args.slice(1))
-		};
-	}
-	return {
-		type: "linear",
-		direction: { angle: 180 },
-		stops: parseStops(args)
-	};
-}
-function parsePosition(words) {
-	if (words.length < 1 || words.length > 2) throw new Error("invalid position");
-	const at = {};
-	const loose = [];
-	for (const word of words) {
-		const keyword = POSITION_KEYWORDS[word];
-		if (keyword?.axis) at[keyword.axis] = {
-			value: keyword.value,
-			unit: "%"
-		};
-		else loose.push(keyword ? {
-			value: keyword.value,
-			unit: "%"
-		} : parseLength(word));
-	}
-	for (const length of loose) if (!at.x) at.x = length;
-	else if (!at.y) at.y = length;
-	else throw new Error("invalid position");
-	const center = {
-		value: 50,
-		unit: "%"
-	};
-	return {
-		x: at.x ?? center,
-		y: at.y ?? center
-	};
-}
-function parseRadial(args) {
-	const first = split(args[0], " ");
-	const isPrelude = first.some((word) => word === "at" || word === "circle" || word === "ellipse" || EXTENTS.has(word)) || parseColor(first[0] ?? "") === void 0 && LENGTH.test(first[0] ?? "");
-	const layer = {
-		type: "radial",
-		shape: "ellipse",
-		size: "farthest-corner",
-		at: {
-			x: {
-				value: 50,
-				unit: "%"
-			},
-			y: {
-				value: 50,
-				unit: "%"
-			}
-		},
-		stops: parseStops(isPrelude ? args.slice(1) : args)
-	};
-	if (!isPrelude) return layer;
-	const atIndex = first.indexOf("at");
-	const shapeWords = atIndex === -1 ? first : first.slice(0, atIndex);
-	if (atIndex !== -1) layer.at = parsePosition(first.slice(atIndex + 1));
-	const sizes = [];
-	let shape;
-	for (const word of shapeWords) if (word === "circle" || word === "ellipse") shape = word;
-	else if (EXTENTS.has(word)) layer.size = word;
-	else sizes.push(parseLength(word));
-	if (sizes.length === 1) {
-		if (shape === "ellipse" || sizes[0].unit === "%") throw new Error("a circle needs one px size");
-		layer.size = {
-			x: sizes[0],
-			y: sizes[0]
-		};
-		shape = "circle";
-	} else if (sizes.length === 2) {
-		if (shape === "circle") throw new Error("an ellipse needs two sizes");
-		layer.size = {
-			x: sizes[0],
-			y: sizes[1]
-		};
-	} else if (sizes.length > 2) throw new Error("invalid size");
-	layer.shape = shape ?? "ellipse";
-	return layer;
-}
-function parseLayer(text, last) {
-	const fn = /^([a-z-]+)\((.*)\)$/is.exec(text);
-	const name = fn?.[1]?.toLowerCase();
-	if (name === "linear-gradient") return parseLinear(split(fn[2], ","));
-	if (name === "radial-gradient") return parseRadial(split(fn[2], ","));
-	const color = parseColor(text);
-	if (!color) throw new Error(`invalid layer ${text}`);
-	if (!last) throw new Error("only the last layer can be a color");
-	return {
-		type: "color",
-		color
-	};
-}
-/** Parses a CSS background, or gives undefined when the spec cannot use it */
-function parseBackground(css) {
-	try {
-		const parts = split(css.trim().replace(/\s+/g, " "), ",");
-		if (parts.length > 16 || parts.some((part) => part === "")) return void 0;
-		return parts.map((part, index) => parseLayer(part, index === parts.length - 1));
-	} catch {
-		return;
-	}
-}
-function isCssBackground(css) {
-	return parseBackground(css) !== void 0;
-}
-function hex({ r, g, b }) {
-	return `#${[
-		r,
-		g,
-		b
-	].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
-}
-/**
-* A color for the places that need one color of the background, such as the color below a
-* translucent window: the color layer, or else the first visible color of the bottom layer.
-*/
-function backgroundBaseColor(background) {
-	const bottom = background.at(-1);
-	if (bottom.type === "color") return hex(bottom.color);
-	return hex((bottom.stops.find((stop) => stop.color.a > 0) ?? bottom.stops[0]).color);
-}
-/**
-* The offsets of the stops from 0 to 1 along a gradient ray of a length in px, with the rules of
-* CSS: the first stop is at 0, the last at 1, a stop is never before the one ahead of it, and
-* stops without a position share the space between their neighbors.
-*/
-function stopOffsets(stops, length) {
-	const offsets = stops.map(({ position }) => position === void 0 ? void 0 : position.unit === "%" ? position.value / 100 : position.value / Math.max(length, .01));
-	offsets[0] ??= 0;
-	offsets[offsets.length - 1] ??= 1;
-	let max = offsets[0];
-	for (let i = 0; i < offsets.length; i++) if (offsets[i] !== void 0) {
-		max = Math.max(max, offsets[i]);
-		offsets[i] = max;
-	}
-	for (let i = 1; i < offsets.length; i++) {
-		if (offsets[i] !== void 0) continue;
-		let end = i;
-		while (offsets[end] === void 0) end++;
-		const start = offsets[i - 1];
-		const step = (offsets[end] - start) / (end - i + 1);
-		for (let k = i; k < end; k++) offsets[k] = start + step * (k - i + 1);
+	{
+		id: "ocean",
+		name: "Ocean",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #54aeff 0%, #8250df 100%)"
+	},
+	{
+		id: "sunrise",
+		name: "Sunrise",
+		kind: "gradient",
+		css: "linear-gradient(to right top, #ffd8b5, #ffd8eb, #e9d8fd)"
+	},
+	{
+		id: "plum",
+		name: "Plum",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #3b2a4a 0%, #6b3f7a 50%, #c678dd 100%)"
+	},
+	{
+		id: "mesh-orchid",
+		name: "Orchid",
+		kind: "mesh",
+		css: "radial-gradient(at 15% 85%, #c026d3 0px, transparent 50%), radial-gradient(at 85% 15%, #f0abfc 0px, transparent 45%), radial-gradient(at 60% 60%, #6d28d9 0px, transparent 55%), #1a0526"
+	},
+	{
+		id: "lavender",
+		name: "Lavender",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #a78bfa 0%, #c4b5fd 50%, #f5d0fe 100%)"
+	},
+	{
+		id: "pink",
+		name: "Pink",
+		kind: "color",
+		css: "#db2777"
+	},
+	{
+		id: "violet-pop",
+		name: "Violet Pop",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #8250df 0%, #bf3989 100%)"
+	},
+	{
+		id: "twilight",
+		name: "Twilight",
+		kind: "gradient",
+		css: "linear-gradient(to right top, #1e1b4b, #4338ca, #c084fc, #f9a8d4)"
+	},
+	{
+		id: "mesh-sorbet",
+		name: "Sorbet Mesh",
+		kind: "mesh",
+		css: "radial-gradient(at 0% 50%, #f472b6 0px, transparent 55%), radial-gradient(at 100% 30%, #a78bfa 0px, transparent 50%), radial-gradient(at 60% 100%, #fbbf24 0px, transparent 50%), #fdf2f8"
+	},
+	{
+		id: "peach",
+		name: "Peach",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #fdba74 0%, #fecaca 55%, #fce7f3 100%)"
+	},
+	{
+		id: "rose",
+		name: "Rose",
+		kind: "gradient",
+		css: "linear-gradient(135deg, #fda4af 0%, #fbcfe8 50%, #fdf2f8 100%)"
 	}
-	return offsets;
-}
-/**
-* A browser mixes the colors of a gradient with their alpha (premultiplied), SVG does not. A stop
-* with no alpha takes the color of its neighbors, so that the gradient fades without gray.
-*/
-function premultiplyStops(stops) {
-	const visible = (from, step) => {
-		for (let i = from; i >= 0 && i < stops.length; i += step) if (stops[i].color.a > 0) return stops[i].color;
-	};
-	return stops.flatMap((stop, index) => {
-		if (stop.color.a > 0) return [stop];
-		const before = visible(index - 1, -1);
-		const after = visible(index + 1, 1);
-		return [before, after].filter((color, i, all) => color && (i === 0 || color !== all[0])).map((color) => ({
-			offset: stop.offset,
-			color: {
-				...color,
-				a: 0
-			}
-		})).concat(before || after ? [] : [stop]);
-	});
-}
-function svgStops(stops) {
-	return premultiplyStops(stops).map(({ offset, color }) => `<stop ${attrs({
-		offset: Math.min(1, Math.max(0, offset)),
-		"stop-color": hex(color),
-		"stop-opacity": color.a === 1 ? void 0 : round(color.a)
-	})}/>`).join("");
-}
-function resolveLength(length, size) {
-	return length.unit === "%" ? length.value / 100 * size : length.value;
-}
-/**
-* Stretches the stops to the range from 0 to 1. Gives the start and the end of the range on the
-* old scale, so that the caller can move the end points of the gradient.
-*/
-function normalize(offsets, allowNegative) {
-	const start = allowNegative ? Math.min(0, offsets[0]) : 0;
-	const end = Math.max(1, offsets.at(-1));
-	return {
-		start,
-		end,
-		offsets: offsets.map((offset) => (Math.max(offset, start) - start) / (end - start))
-	};
-}
-function linearSvg(id, layer, box) {
-	const line = cssGradientLine("angle" in layer.direction ? layer.direction.angle : Math.atan2(layer.direction.to.x * box.height, -layer.direction.to.y * box.width) * 180 / Math.PI, box);
-	const length = Math.hypot(line.x2 - line.x1, line.y2 - line.y1);
-	const { start, end, offsets } = normalize(stopOffsets(layer.stops, length), true);
-	const dx = line.x2 - line.x1;
-	const dy = line.y2 - line.y1;
-	const points = {
-		x1: line.x1 + dx * start,
-		y1: line.y1 + dy * start,
-		x2: line.x1 + dx * end,
-		y2: line.y1 + dy * end
-	};
-	const stops = layer.stops.map((stop, index) => ({
-		offset: offsets[index],
-		color: stop.color
-	}));
-	return `<linearGradient ${attrs({
-		id,
-		gradientUnits: "userSpaceOnUse",
-		...points
-	})}>${svgStops(stops)}</linearGradient>`;
-}
-function radialRadii(layer, box, center) {
-	if (typeof layer.size === "object") return {
-		x: resolveLength(layer.size.x, box.width),
-		y: resolveLength(layer.size.y, box.height)
-	};
-	const sides = {
-		x: [center.x - box.x, box.x + box.width - center.x].map(Math.abs),
-		y: [center.y - box.y, box.y + box.height - center.y].map(Math.abs)
-	};
-	const closest = layer.size.startsWith("closest");
-	const pick = (values) => closest ? Math.min(...values) : Math.max(...values);
-	const side = {
-		x: pick(sides.x),
-		y: pick(sides.y)
-	};
-	if (layer.shape === "circle") {
-		if (layer.size.endsWith("side")) {
-			const radius = pick([...sides.x, ...sides.y]);
-			return {
-				x: radius,
-				y: radius
-			};
-		}
-		const radius = Math.hypot(side.x, side.y);
-		return {
-			x: radius,
-			y: radius
-		};
+];
+const THEME_BACKGROUNDS = {
+	ayu: {
+		dark: "ember",
+		light: "honey"
+	},
+	catppuccin: {
+		dark: "twilight",
+		light: "lavender"
+	},
+	dracula: {
+		dark: "mesh-orchid",
+		light: "rose"
+	},
+	github: {
+		dark: "dusk",
+		light: "sunrise"
+	},
+	material: {
+		dark: "slate",
+		light: "ice"
+	},
+	"night-owl": {
+		dark: "deep-sea",
+		light: "ice"
+	},
+	nord: { dark: "nordic" },
+	"one-dark": {
+		dark: "plum",
+		light: "mist"
+	},
+	"rose-pine": {
+		dark: "mesh-orchid",
+		light: "peach"
+	},
+	solarized: {
+		dark: "deep-sea",
+		light: "mesh-dune"
+	},
+	"synthwave-84": { dark: "synthwave" },
+	"tokyo-night": {
+		dark: "twilight",
+		light: "periwinkle"
+	},
+	vitesse: {
+		dark: "jade",
+		light: "sage"
+	},
+	vscode: {
+		dark: "primer",
+		light: "daybreak"
 	}
-	if (layer.size.endsWith("side")) return side;
-	return {
-		x: side.x * Math.SQRT2,
-		y: side.y * Math.SQRT2
-	};
-}
-function radialSvg(id, layer, box) {
-	const center = {
-		x: box.x + resolveLength(layer.at.x, box.width),
-		y: box.y + resolveLength(layer.at.y, box.height)
-	};
-	const radii = radialRadii(layer, box, center);
-	const rx = Math.max(radii.x, .01);
-	const ry = Math.max(radii.y, .01);
-	const { end, offsets } = normalize(stopOffsets(layer.stops, rx), false);
-	const stops = layer.stops.map((stop, index) => ({
-		offset: offsets[index],
-		color: stop.color
-	}));
-	const transform = `translate(${round(center.x)} ${round(center.y)}) scale(1 ${round(ry / rx)})`;
-	return `<radialGradient ${attrs({
-		id,
-		gradientUnits: "userSpaceOnUse",
-		cx: 0,
-		cy: 0,
-		r: rx * end,
-		gradientTransform: transform
-	})}>${svgStops(stops)}</radialGradient>`;
-}
-/** The background as SVG on a box: the bottom layer first, as SVG paints in order */
-function backgroundSvg(background, box, newId) {
-	const rect = (fill, opacity) => `<rect ${attrs({
-		x: box.x,
-		y: box.y,
-		width: box.width,
-		height: box.height,
-		fill,
-		"fill-opacity": opacity
-	})}/>`;
-	return background.toReversed().map((layer) => {
-		if (layer.type === "color") return rect(hex(layer.color), layer.color.a === 1 ? void 0 : round(layer.color.a));
-		const id = newId(`background-${layer.type}`);
-		return `<defs>${layer.type === "linear" ? linearSvg(id, layer, box) : radialSvg(id, layer, box)}</defs>${rect(`url(#${id})`)}`;
-	}).join("");
+};
+/** The background preset of a theme in a mode, or undefined when the theme has none */
+function themeBackground(theme, mode) {
+	const id = THEME_BACKGROUNDS[theme.id]?.[mode];
+	return BACKGROUNDS.find((preset) => preset.id === id);
 }
 // src/icons/icons.generated.json
 var icons_generated_default = {
@@ -2900,6 +2941,15 @@ const EDITOR_TEXTMATE_THEMES = {
 // src/highlight/index.ts
 const PLAIN_TEXT = "text";
 const LANGUAGE_IDS = [PLAIN_TEXT, ...bundledLanguagesInfo.map((language) => language.id)];
+const LANGUAGES = [{
+	id: PLAIN_TEXT,
+	name: "Plain Text",
+	aliases: []
+}, ...bundledLanguagesInfo.map(({ id, name, aliases }) => ({
+	id,
+	name,
+	aliases: aliases ?? []
+}))];
 /** The display name of a language, such as "TypeScript" for "typescript" */
 function languageName(language) {
 	if (language === "text") return "Plain Text";
@@ -4654,4 +4704,4 @@ function toSvg(scene, options = {}) {
 		"</svg>"
 	].join("\n");
 }
-export { resolveIcon as $, SpecSchema as A, createLink as B, isSpecSchemaUrl as C, MARK_STYLES as D, LATEST_SPEC_VERSION as E, highlight as F, IMPLICIT_SPEC_VERSION as G, encodeSpec as H, inferLanguage as I, AUTO_ICON as J, schemaVersion as K, isKnownLanguage as L, parseSpec as M, LANGUAGE_IDS as N, SPEC_LIMITS as O, PLAIN_TEXT as P, getIcon as Q, resolveLanguage as R, SPEC_SCHEMA_URL as S, measureUiText as St, ANNOTATION_TYPES as T, readLink as U, decodeSpec as V, EXTENSION_PREFIX as W, ICON_IDS as X, FILE_ICON as Y, NO_ICON as Z, WINDOW_RADIUS as _, UI_FONT as _t, svgToPng as a, ambientPreviewCss as at, normalizeCode as b, getFace as bt, SOFTWARE as c, THEMES as ct, createImageMetadata as d, getSyntax as dt, isCssBackground as et, readImageSpec as f, getTheme as ft, TAB_HEADER as g, DEFAULT_CODE_FONT as gt, POPOVER as h, CODE_FONT_IDS as ht, sceneFontFiles as i, AMBIENT_ENABLED as it, expandLineRanges as j, SpecError as k, SVG_NAMESPACE as l, THEME_IDS as lt, LINE_HEIGHT as m, CODE_FONTS as mt, initPng as n, themeBackground as nt, METADATA_BY_DEFAULT as o, isAmbientBackground as ot, FONT_SIZE as p, resolveMode as pt, stampSpecVersion as q, loadSceneFonts as r, AMBIENT_BACKGROUNDS as rt, PNG_KEYWORDS as s, DEFAULT_THEME as st, toSvg as t, BACKGROUNDS as tt, addPngMetadata as u, getFrameColors as ut, cellCount as v, cssFontFamily as vt, specJsonSchema as w, MAC_HEADER as x, measureCodeText as xt, layout as y, getCodeFont as yt, DEFAULT_APP_URL as z };
+export { NO_ICON as $, SpecSchema as A, resolveLanguage as B, isSpecSchemaUrl as C, measureCodeText as Ct, MARK_STYLES as D, LATEST_SPEC_VERSION as E, PLAIN_TEXT as F, readLink as G, createLink as H, highlight as I, schemaVersion as J, EXTENSION_PREFIX as K, inferLanguage as L, parseSpec as M, LANGUAGES as N, SPEC_LIMITS as O, LANGUAGE_IDS as P, ICON_IDS as Q, isKnownLanguage as R, SPEC_SCHEMA_URL as S, getFace as St, ANNOTATION_TYPES as T, decodeSpec as U, DEFAULT_APP_URL as V, encodeSpec as W, AUTO_ICON as X, stampSpecVersion as Y, FILE_ICON as Z, WINDOW_RADIUS as _, CODE_FONT_IDS as _t, svgToPng as a, AMBIENT_ENABLED as at, normalizeCode as b, cssFontFamily as bt, SOFTWARE as c, DEFAULT_THEME as ct, createImageMetadata as d, getFrameColors as dt, getIcon as et, readImageSpec as f, getSyntax as ft, TAB_HEADER as g, CODE_FONTS as gt, POPOVER as h, isCssBackground as ht, sceneFontFiles as i, AMBIENT_BACKGROUNDS as it, expandLineRanges as j, SpecError as k, SVG_NAMESPACE as l, THEMES as lt, LINE_HEIGHT as m, resolveMode as mt, initPng as n, BACKGROUNDS as nt, METADATA_BY_DEFAULT as o, ambientPreviewCss as ot, FONT_SIZE as p, getTheme as pt, IMPLICIT_SPEC_VERSION as q, loadSceneFonts as r, themeBackground as rt, PNG_KEYWORDS as s, isAmbientBackground as st, toSvg as t, resolveIcon as tt, addPngMetadata as u, THEME_IDS as ut, cellCount as v, DEFAULT_CODE_FONT as vt, specJsonSchema as w, measureUiText as wt, MAC_HEADER as x, getCodeFont as xt, layout as y, UI_FONT as yt, languageName as z };