@tenphi/tasty 0.0.0-snapshot.b6cc3cd → 0.0.0-snapshot.b7bfdb1

package/dist/{config-BrDt11hO.js → config-DsqqkmUs.js}

@@ -52,16 +52,6 @@ const COLOR_FUNCS = new Set([
 ]);
 /** A value that is a single `name(args)` call: captures the name and the args. */
 const RE_FUNC_CALL = /^([a-z][a-z0-9-]*)\((.+)\)$/i;
-/**
-* The color function a value calls at its top level, lowercased — or `null` when
-* the value is not a single color function call.
-*/
-function colorFuncName(value) {
-	const match = value.match(RE_FUNC_CALL);
-	if (!match) return null;
-	const name = match[1].toLowerCase();
-	return COLOR_FUNCS.has(name) ? name : null;
-}
 const RE_UNIT_NUM = /^[+-]?(?:\d*\.\d+|\d+)([a-z][a-z0-9]*)$/;
 const RE_NUMBER = /^[+-]?(?:\d*\.\d+|\d+)$/;
 const RE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}(?:[0-9a-f]{2})?)$/;
@@ -197,9 +187,6 @@ const OKLab_to_linear_sRGB_coefficients = [
 	]]
 ];
 const dotXY = (a, b) => a[0] * b[0] + a[1] * b[1];
-function srgbToLinear(c) {
-	return c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
-}
 const INV_GAMMA = 1 / 2.4;
 function srgbLinearToGamma(val) {
 	const sign = val < 0 ? -1 : 1;
@@ -241,22 +228,6 @@ const oklabToLinearSrgb = (lab) => {
 		-.004196076138675526 * l - .703418617935936 * m + 1.7076146940746113 * s
 	];
 };
-const linearSrgbToOklab = (rgb) => {
-	const r = rgb[0];
-	const g = rgb[1];
-	const b = rgb[2];
-	const l = .4122214708 * r + .5363325363 * g + .0514459929 * b;
-	const m = .2119034982 * r + .6806995451 * g + .1073969566 * b;
-	const s = .0883024619 * r + .2817188376 * g + .6299787005 * b;
-	const l_ = Math.cbrt(l);
-	const m_ = Math.cbrt(m);
-	const s_ = Math.cbrt(s);
-	return [
-		.2104542553 * l_ + .793617785 * m_ - .0040720468 * s_,
-		1.9779984951 * l_ - 2.428592205 * m_ + .4505937099 * s_,
-		.0259040371 * l_ + .7827717662 * m_ - .808675766 * s_
-	];
-};
 const computeMaxSaturationOKLC = (a, b) => {
 	const okCoeff = OKLab_to_linear_sRGB_coefficients;
 	const lmsToRgb = LMS_to_linear_sRGB_M;
@@ -450,53 +421,6 @@ function hslToRgbValues(h, s, l) {
 	];
 }
 /**
-* RGB (0-255) to HSL.
-* @returns [h (0-360), s (0-1), l (0-1)]
-*/
-function rgbToHsl(r, g, b) {
-	r /= 255;
-	g /= 255;
-	b /= 255;
-	const max = Math.max(r, g, b);
-	const min = Math.min(r, g, b);
-	const l = (max + min) / 2;
-	if (max === min) return [
-		0,
-		0,
-		l
-	];
-	const d = max - min;
-	const s = l > .5 ? d / (2 - max - min) : d / (max + min);
-	let h;
-	if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-	else if (max === g) h = ((b - r) / d + 2) / 6;
-	else h = ((r - g) / d + 4) / 6;
-	return [
-		h * 360,
-		s,
-		l
-	];
-}
-/**
-* RGB (0-255) to OKLCH via sRGB -> linear sRGB -> OKLab -> OKLCH.
-* @returns [L, C, H] where H is in degrees (0-360)
-*/
-function rgbToOklch(r, g, b) {
-	const [L, a, bLab] = linearSrgbToOklab([
-		srgbToLinear(r / 255),
-		srgbToLinear(g / 255),
-		srgbToLinear(b / 255)
-	]);
-	const C = Math.sqrt(a * a + bLab * bLab);
-	let H = Math.atan2(bLab, a) * 180 / Math.PI;
-	if (H < 0) H += 360;
-	return [
-		L,
-		C,
-		H
-	];
-}
-/**
 * OKHSL to sRGB (0-1 range).
 * @param h - Hue in degrees (0-360)
 * @param s - Saturation (0-1)
@@ -700,80 +624,6 @@ function getNamedColorHex() {
 	]);
 	return _namedColorHex;
 }
-const hexCharToNum = (c) => {
-	if (c >= 48 && c <= 57) return c - 48;
-	if (c >= 65 && c <= 70) return c - 55;
-	if (c >= 97 && c <= 102) return c - 87;
-	return -1;
-};
-/**
-* Parse a hex color string to RGBA values (RGB 0-255, alpha 0-1).
-* Supports 3, 4, 6, and 8 character hex values (with or without `#`).
-* For 3/6-char hex (no alpha channel), alpha defaults to 1.
-*/
-function hexToRgbaValues(hex) {
-	let start = 0;
-	if (hex.charCodeAt(0) === 35) start = 1;
-	const len = hex.length - start;
-	if (len === 3) {
-		const r = hexCharToNum(hex.charCodeAt(start));
-		const g = hexCharToNum(hex.charCodeAt(start + 1));
-		const b = hexCharToNum(hex.charCodeAt(start + 2));
-		if (r < 0 || g < 0 || b < 0) return null;
-		return [
-			r * 17,
-			g * 17,
-			b * 17,
-			1
-		];
-	}
-	if (len === 4) {
-		const r = hexCharToNum(hex.charCodeAt(start));
-		const g = hexCharToNum(hex.charCodeAt(start + 1));
-		const b = hexCharToNum(hex.charCodeAt(start + 2));
-		const a = hexCharToNum(hex.charCodeAt(start + 3));
-		if (r < 0 || g < 0 || b < 0 || a < 0) return null;
-		return [
-			r * 17,
-			g * 17,
-			b * 17,
-			a * 17 / 255
-		];
-	}
-	if (len === 6) {
-		const r1 = hexCharToNum(hex.charCodeAt(start));
-		const r2 = hexCharToNum(hex.charCodeAt(start + 1));
-		const g1 = hexCharToNum(hex.charCodeAt(start + 2));
-		const g2 = hexCharToNum(hex.charCodeAt(start + 3));
-		const b1 = hexCharToNum(hex.charCodeAt(start + 4));
-		const b2 = hexCharToNum(hex.charCodeAt(start + 5));
-		if (r1 < 0 || r2 < 0 || g1 < 0 || g2 < 0 || b1 < 0 || b2 < 0) return null;
-		return [
-			r1 * 16 + r2,
-			g1 * 16 + g2,
-			b1 * 16 + b2,
-			1
-		];
-	}
-	if (len === 8) {
-		const r1 = hexCharToNum(hex.charCodeAt(start));
-		const r2 = hexCharToNum(hex.charCodeAt(start + 1));
-		const g1 = hexCharToNum(hex.charCodeAt(start + 2));
-		const g2 = hexCharToNum(hex.charCodeAt(start + 3));
-		const b1 = hexCharToNum(hex.charCodeAt(start + 4));
-		const b2 = hexCharToNum(hex.charCodeAt(start + 5));
-		const a1 = hexCharToNum(hex.charCodeAt(start + 6));
-		const a2 = hexCharToNum(hex.charCodeAt(start + 7));
-		if (r1 < 0 || r2 < 0 || g1 < 0 || g2 < 0 || b1 < 0 || b2 < 0 || a1 < 0 || a2 < 0) return null;
-		return [
-			r1 * 16 + r2,
-			g1 * 16 + g2,
-			b1 * 16 + b2,
-			(a1 * 16 + a2) / 255
-		];
-	}
-	return null;
-}
 /**
 * Convert hex color string to `rgb()` CSS string.
 * Supports 3, 4, 6, and 8 character hex values (with or without `#`).
@@ -877,415 +727,7 @@ function oklchStringToRgb(oklchStr) {
 	return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
 }
 //#endregion
-//#region src/parser/lru.ts
-var Lru = class {
-	limit;
-	map = /* @__PURE__ */ new Map();
-	head = null;
-	tail = null;
-	onEvict;
-	constructor(limit = 1e3, onEvict) {
-		this.limit = limit;
-		let normalized = Number.isFinite(this.limit) ? Math.floor(this.limit) : 1e3;
-		if (normalized <= 0) normalized = 1e3;
-		this.limit = normalized;
-		this.onEvict = onEvict;
-	}
-	setOnEvict(fn) {
-		this.onEvict = fn;
-	}
-	get(key) {
-		const node = this.map.get(key);
-		if (!node) return void 0;
-		this.touch(key, node);
-		return node.value;
-	}
-	set(key, value) {
-		let node = this.map.get(key);
-		if (node) {
-			node.value = value;
-			this.touch(key, node);
-			return;
-		}
-		node = {
-			prev: null,
-			next: this.head,
-			value
-		};
-		if (this.head) {
-			const headNode = this.map.get(this.head);
-			if (headNode) headNode.prev = key;
-		}
-		this.head = key;
-		if (!this.tail) this.tail = key;
-		this.map.set(key, node);
-		if (this.map.size > this.limit) this.evict();
-	}
-	delete(key) {
-		const node = this.map.get(key);
-		if (!node) return;
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = node.next;
-		}
-		if (node.next) {
-			const nextNode = this.map.get(node.next);
-			if (nextNode) nextNode.prev = node.prev;
-		}
-		if (this.head === key) this.head = node.next;
-		if (this.tail === key) this.tail = node.prev;
-		this.map.delete(key);
-	}
-	keys() {
-		return this.map.keys();
-	}
-	touch(key, node) {
-		if (this.head === key) return;
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = node.next;
-		}
-		if (node.next) {
-			const nextNode = this.map.get(node.next);
-			if (nextNode) nextNode.prev = node.prev;
-		}
-		if (this.tail === key) this.tail = node.prev;
-		node.prev = null;
-		node.next = this.head;
-		if (this.head) {
-			const headNode = this.map.get(this.head);
-			if (headNode) headNode.prev = key;
-		}
-		this.head = key;
-	}
-	evict() {
-		const old = this.tail;
-		if (!old) return;
-		const node = this.map.get(old);
-		if (!node) {
-			if (this.head === old) this.head = null;
-			this.tail = null;
-			return;
-		}
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = null;
-		}
-		this.tail = node.prev;
-		if (this.head === old) this.head = null;
-		this.map.delete(old);
-		if (this.onEvict) try {
-			this.onEvict(old, node.value);
-		} catch {}
-	}
-	clear() {
-		this.map.clear();
-		this.head = this.tail = null;
-	}
-};
-//#endregion
-//#region src/utils/function-color.ts
-const RE_FUNC_NAME = /^([a-z][a-z0-9-]*)\s*\(/i;
-const RE_COLOR_OUT = /^(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color)\(|^#|^var\(--/i;
-/**
-* Resolve a `name(...)` value produced by a registered custom parse function
-* into its concrete color output.
-*
-* A color function is just a `functions` entry whose output is an already
-* supported color (`rgb`, `hsl`, `#…`, `oklch`, …). This helper delegates the
-* value to the global parser (which already runs the registered parse function)
-* and returns the result only when it looks like a color. Returns `null` when
-* `str` is not a registered custom function or its output is not a color.
-*
-* This is the generic replacement for the previously hardcoded okhsl/okhst
-* conversion branches scattered across `strToRgb`, `resolveToRgbaValues`, and
-* the `#token.alpha` injection path.
-*/
-function resolveFunctionColor(str) {
-	const m = RE_FUNC_NAME.exec(str);
-	if (!m) return null;
-	const name = m[1].toLowerCase();
-	getGlobalParser();
-	if (!(name in getGlobalParseFunctions())) return null;
-	const out = getGlobalParser().process(str).output;
-	if (!out || !RE_COLOR_OUT.test(out)) return null;
-	return out;
-}
-//#endregion
 //#region src/utils/color-space.ts
-let currentColorSpace = "oklch";
-const colorSpaceCache = new Lru(500);
-const componentsCache = new Lru(500);
-function clearColorCaches() {
-	colorSpaceCache.clear();
-	componentsCache.clear();
-}
-function setColorSpace(space) {
-	currentColorSpace = space;
-	clearColorCaches();
-}
-function resetColorSpace() {
-	currentColorSpace = "oklch";
-	clearColorCaches();
-}
-function getColorSpaceSuffix() {
-	return currentColorSpace;
-}
-function formatNum(n, precision) {
-	return parseFloat(n.toFixed(precision)).toString();
-}
-function formatRgbComponent(n) {
-	return parseFloat(n.toFixed(1)).toString();
-}
-function formatAlpha(a) {
-	if (a === 0) return "0";
-	return parseFloat(a.toFixed(4)).toString();
-}
-function rgbValuesToColorString(r, g, b, space, alpha) {
-	const alphaSuffix = alpha != null && alpha < 1 ? ` / ${formatAlpha(alpha)}` : "";
-	switch (space) {
-		case "rgb": return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)}${alphaSuffix})`;
-		case "hsl": {
-			const [h, s, l] = rgbToHsl(r, g, b);
-			return `hsl(${formatNum(h, 2)} ${formatNum(s * 100, 2)}% ${formatNum(l * 100, 2)}%${alphaSuffix})`;
-		}
-		case "oklch": {
-			const [L, C, H] = rgbToOklch(r, g, b);
-			return `oklch(${formatNum(L, 5)} ${formatNum(C, 5)} ${formatNum(H, 2)}${alphaSuffix})`;
-		}
-	}
-}
-function rgbValuesToComponents(r, g, b, space) {
-	switch (space) {
-		case "rgb": return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;
-		case "hsl": {
-			const [h, s, l] = rgbToHsl(r, g, b);
-			return `${formatNum(h, 2)} ${formatNum(s * 100, 2)}% ${formatNum(l * 100, 2)}%`;
-		}
-		case "oklch": {
-			const [L, C, H] = rgbToOklch(r, g, b);
-			return `${formatNum(L, 5)} ${formatNum(C, 5)} ${formatNum(H, 2)}`;
-		}
-	}
-}
-const parseColorFuncArgs = (str, prefix) => {
-	const start = str.indexOf("(", prefix.length - 1);
-	const end = str.lastIndexOf(")");
-	if (start < 0 || end < 0) return null;
-	const inner = str.slice(start + 1, end).trim();
-	const slashIdx = inner.indexOf("/");
-	let colorPart;
-	let alpha = 1;
-	if (slashIdx >= 0) {
-		colorPart = inner.slice(0, slashIdx);
-		const alphaStr = inner.slice(slashIdx + 1).trim();
-		if (alphaStr) {
-			alpha = alphaStr.endsWith("%") ? parseFloat(alphaStr) / 100 : parseFloat(alphaStr);
-			if (Number.isNaN(alpha)) alpha = 1;
-		}
-	} else colorPart = inner;
-	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
-	if (parts.length < 3) return null;
-	if (parts.length >= 4 && slashIdx < 0) {
-		const legacyAlpha = parseFloat(parts[3]);
-		if (!Number.isNaN(legacyAlpha)) alpha = legacyAlpha;
-	}
-	return {
-		parts,
-		alpha
-	};
-};
-const parseHue = (hueStr) => {
-	let h = parseFloat(hueStr);
-	const lower = hueStr.toLowerCase();
-	if (lower.endsWith("turn")) h = parseFloat(lower) * 360;
-	else if (lower.endsWith("rad")) h = parseFloat(lower) * 180 / Math.PI;
-	return (h % 360 + 360) % 360;
-};
-const parsePercent = (val) => {
-	const num = parseFloat(val);
-	return val.includes("%") ? num / 100 : num;
-};
-const clamp01 = (n) => Math.max(0, Math.min(1, n));
-function resolveToRgbaValues(color) {
-	const trimmed = color.trim().toLowerCase();
-	if (trimmed.startsWith("rgb")) {
-		const parsed = parseColorFuncArgs(trimmed, "rgb");
-		if (!parsed || parsed.parts.length < 3) return null;
-		return [
-			parsed.parts[0].endsWith("%") ? parseFloat(parsed.parts[0]) / 100 * 255 : parseFloat(parsed.parts[0]),
-			parsed.parts[1].endsWith("%") ? parseFloat(parsed.parts[1]) / 100 * 255 : parseFloat(parsed.parts[1]),
-			parsed.parts[2].endsWith("%") ? parseFloat(parsed.parts[2]) / 100 * 255 : parseFloat(parsed.parts[2]),
-			parsed.alpha
-		];
-	}
-	if (trimmed.startsWith("#")) return hexToRgbaValues(trimmed);
-	if (trimmed.startsWith("hsl")) {
-		const parsed = parseColorFuncArgs(trimmed, "hsl");
-		if (!parsed) return null;
-		const [r, g, b] = hslToRgbValues(parseHue(parsed.parts[0]), clamp01(parsePercent(parsed.parts[1])), clamp01(parsePercent(parsed.parts[2])));
-		return [
-			r,
-			g,
-			b,
-			parsed.alpha
-		];
-	}
-	if (trimmed.startsWith("oklch(")) {
-		const parsed = parseColorFuncArgs(trimmed, "oklch");
-		if (!parsed) return null;
-		const [r, g, b] = oklchToRgbValues(clamp01(parsePercent(parsed.parts[0])), Math.max(0, parseFloat(parsed.parts[1])), parseHue(parsed.parts[2]));
-		return [
-			r,
-			g,
-			b,
-			parsed.alpha
-		];
-	}
-	const resolved = resolveFunctionColor(trimmed);
-	if (resolved && resolved !== trimmed) return resolveToRgbaValues(resolved);
-	const fallback = strToRgb(trimmed);
-	if (fallback) {
-		if (fallback !== trimmed) return resolveToRgbaValues(fallback);
-		const vals = getRgbValuesFromRgbaString(fallback);
-		if (vals.length >= 3) return [
-			vals[0],
-			vals[1],
-			vals[2],
-			1
-		];
-	}
-	return null;
-}
-const SPACE_FUNCS = {
-	rgb: ["rgb", "rgba"],
-	hsl: ["hsl", "hsla"],
-	oklch: ["oklch", "oklcha"]
-};
-const CANONICAL_FUNC = {
-	rgb: "rgb",
-	hsl: "hsl",
-	oklch: "oklch"
-};
-/**
-* Parse a native CSS color function ONLY when its name matches the configured
-* output space. Splits arguments at the top level, preserving every token
-* (numbers, percentages, `var()`, `calc()`, `min()`, …) verbatim — no numeric
-* parsing or normalization is performed.
-*
-* Returns null when the input is not a same-space function (caller falls back
-* to the sRGB round-trip for genuine cross-space conversion / hex / named colors).
-*/
-function parseSameSpaceFunc(color, space) {
-	const original = color.trim();
-	const lower = original.toLowerCase();
-	const funcs = SPACE_FUNCS[space];
-	let funcName = null;
-	for (const f of funcs) if (lower.startsWith(`${f}(`)) {
-		funcName = f;
-		break;
-	}
-	if (!funcName) return null;
-	const start = funcName.length;
-	const end = original.lastIndexOf(")");
-	if (end < start) return null;
-	const inner = original.slice(start + 1, end).trim();
-	if (!inner) return null;
-	const rawTokens = [];
-	let depth = 0;
-	let buf = "";
-	for (const c of inner) if (c === "(") {
-		depth++;
-		buf += c;
-	} else if (c === ")") {
-		depth--;
-		buf += c;
-	} else if (depth === 0 && (c === " " || c === "," || c === "	" || c === "\n")) {
-		if (buf) {
-			rawTokens.push(buf);
-			buf = "";
-		}
-	} else buf += c;
-	if (buf) rawTokens.push(buf);
-	let alpha = null;
-	const parts = [];
-	for (let i = 0; i < rawTokens.length; i++) {
-		const tok = rawTokens[i];
-		if (tok === "/") {
-			alpha = rawTokens[i + 1] ?? null;
-			break;
-		}
-		parts.push(tok);
-	}
-	if (alpha === null && parts.length === 4) {
-		alpha = parts[3];
-		parts.length = 3;
-	}
-	if (parts.length !== 3) return null;
-	if (parts.some((p) => !p)) return null;
-	return {
-		parts,
-		alpha
-	};
-}
-function buildSameSpaceString(parsed, space) {
-	const func = CANONICAL_FUNC[space];
-	const body = parsed.parts.join(" ");
-	return parsed.alpha != null ? `${func}(${body} / ${parsed.alpha})` : `${func}(${body})`;
-}
-/**
-* Build the decomposed component list for a same-space value.
-*
-* Dynamic tokens (`var()` / `calc()` / …) are preserved verbatim — they can't
-* be parsed and must survive into the CSS output. Purely static components are
-* normalized to the canonical numeric form for the space so the companion
-* `--*-color-{space}` variable stays a valid `<number>+` value (rgb/oklch) —
-* WITHOUT round-tripping through sRGB, which would clamp wide-gamut oklch.
-*
-* Non-native, parse-time-only functions (`okhsl()` / `okhst()`) are always
-* resolved to a static `rgb(...%)` upstream, so this is the path that turns
-* their percentage channels back into 0-255 numbers.
-*/
-function buildSameSpaceComponents(parsed, space) {
-	const parts = parsed.parts;
-	if (parts.some((p) => p.includes("("))) return parts.join(" ");
-	switch (space) {
-		case "rgb": return parts.map((p) => p.endsWith("%") ? formatRgbComponent(parseFloat(p) / 100 * 255) : p).join(" ");
-		case "hsl": return parts.join(" ");
-		case "oklch": {
-			const [l, c, h] = parts;
-			return [
-				l.endsWith("%") ? formatNum(parseFloat(l) / 100, 5) : l,
-				c,
-				h
-			].join(" ");
-		}
-	}
-}
-/**
-* Convert any supported color string to the configured color space CSS format.
-* Preserves alpha channel when present in the input.
-* Returns null if the input cannot be parsed.
-*/
-function strToColorSpace(color) {
-	if (!color) return void 0;
-	const cached = colorSpaceCache.get(color);
-	if (cached !== void 0) return cached;
-	const sameSpace = parseSameSpaceFunc(color, currentColorSpace);
-	if (sameSpace) {
-		const result = buildSameSpaceString(sameSpace, currentColorSpace);
-		colorSpaceCache.set(color, result);
-		return result;
-	}
-	const rgba = resolveToRgbaValues(color);
-	if (!rgba) {
-		colorSpaceCache.set(color, null);
-		return null;
-	}
-	const result = rgbValuesToColorString(rgba[0], rgba[1], rgba[2], currentColorSpace, rgba[3]);
-	colorSpaceCache.set(color, result);
-	return result;
-}
 /**
 * Set the alpha of a whole color, replacing any it already carries.
 *
@@ -1293,14 +735,13 @@ function strToColorSpace(color) {
 * emits. `oklch(from <color> l c h / <alpha>)` copies the channels over and
 * writes the alpha slot, which needs nothing from the color except that it *is*
 * a color: a `color-mix()`, a `light-dark()`, a `currentcolor`, a
-* `--name-color` written by hand-authored CSS with no companion variable — all
-* of them work, where writing into a channel slot directly requires components
-* the engine may have no way to compute.
+* `--name-color` written by hand-authored CSS that Tasty never defined — all of
+* them work, where writing into a channel slot directly would require channels
+* the engine has no way to compute.
 *
 * Alpha is *replaced*, not composed. A token holding `rgb(255 0 0 / .8)` faded
-* to `.5` is alpha `.5`, matching what the channel-components form did and what
-* a statically-known color still does. `color-mix()` against `transparent`
-* cannot do this — it would multiply the two to `.4`.
+* to `.5` is alpha `.5`. `color-mix()` against `transparent` cannot do this —
+* it would multiply the two to `.4`.
 *
 * The alpha slot takes a `<number>` or a `<percentage>`, so an opacity custom
 * property passes straight through in whichever form the author declared it.
@@ -1350,115 +791,6 @@ function parseAlphaOverride(value) {
 		alpha: match[2]
 	} : null;
 }
-/** Channel names of each color space, in `<func>()` argument order. */
-const COLOR_SPACE_CHANNELS = {
-	rgb: "r g b",
-	hsl: "h s l",
-	oklch: "l c h"
-};
-/**
-* Express a color as components of the configured color space *by reference*,
-* using CSS relative color syntax: `from <color> l c h`.
-*
-* Static colors are decomposed into numbers (see `getColorSpaceComponents`), but
-* a color the engine cannot evaluate at build time — a `color-mix()`, a
-* `light-dark()`, a `color()` in a space with no conversion, anything reached
-* through `var()` — has no numbers to decompose. Handing back the relative form
-* keeps the `--name-color-{space}` companion usable anyway: the browser resolves
-* the channels, so `oklch(var(--name-color-oklch) / .5)` still applies opacity to
-* whatever the color turns out to be.
-*/
-function toRelativeColorSpaceComponents(color) {
-	return `from ${color} ${COLOR_SPACE_CHANNELS[currentColorSpace]}`;
-}
-/**
-* Extract the decomposed components of a color in the configured color space.
-* Returns a space-separated string of components without the wrapping function.
-* Alpha is NOT included — components are used for alpha composition via `/ alpha`.
-*/
-function getColorSpaceComponents(color) {
-	const cached = componentsCache.get(color);
-	if (cached !== void 0) return cached;
-	const sameSpace = parseSameSpaceFunc(color, currentColorSpace);
-	if (sameSpace) {
-		const result = buildSameSpaceComponents(sameSpace, currentColorSpace);
-		componentsCache.set(color, result);
-		return result;
-	}
-	const rgba = resolveToRgbaValues(color);
-	if (!rgba) return color;
-	const result = rgbValuesToComponents(rgba[0], rgba[1], rgba[2], currentColorSpace);
-	componentsCache.set(color, result);
-	return result;
-}
-/**
-* Rewrite a color into the `--name-color-{space}` components that `#name.alpha`
-* composes opacity onto.
-*
-* A `var()` chain is rewritten reference by reference so the fallback order
-* survives; a color the engine can evaluate is decomposed into numbers; anything
-* left — a derived color function, a `color()` in a space with no conversion —
-* falls back to relative color syntax and lets the browser do it.
-*
-* Returns the input unchanged when there is nothing to rewrite, so callers can
-* tell whether the conversion found anything.
-*
-* Example: `var(--primary-color, var(--secondary-color))`
-*   → `var(--primary-color-oklch, var(--secondary-color-oklch))`
-*/
-function convertColorChainToComponentChain(colorValue) {
-	const suffix = getColorSpaceSuffix();
-	const faded = parseAlphaOverride(colorValue);
-	if (faded) return convertColorChainToComponentChain(faded.color);
-	const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
-	if (componentVarMatch) return componentVarMatch[1];
-	if (colorFuncName(colorValue)) {
-		const components = getColorSpaceComponents(colorValue);
-		return components !== colorValue ? components : toRelativeColorSpaceComponents(colorValue);
-	}
-	const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
-	if (!match) {
-		const components = getColorSpaceComponents(colorValue);
-		if (components !== colorValue) return components;
-		return colorValue;
-	}
-	const [, name, fallback] = match;
-	if (!fallback) return `var(--${name}-color-${suffix})`;
-	return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
-}
-/**
-* Convert a color initial value (from @property definitions) to components
-* in the configured color space.
-*/
-function colorInitialValueToComponents(initialValue) {
-	if (initialValue == null) return getDefaultComponents();
-	const val = String(initialValue).trim().toLowerCase();
-	if (val === "transparent" || val === "rgba(0,0,0,0)" || val === "") return getDefaultComponents();
-	if (val === "white") return rgbValuesToComponents(255, 255, 255, currentColorSpace);
-	if (val === "black") return rgbValuesToComponents(0, 0, 0, currentColorSpace);
-	const rgbMatch = val.match(/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
-	if (rgbMatch) return rgbValuesToComponents(parseInt(rgbMatch[1]), parseInt(rgbMatch[2]), parseInt(rgbMatch[3]), currentColorSpace);
-	return getDefaultComponents();
-}
-function getDefaultComponents() {
-	switch (currentColorSpace) {
-		case "rgb": return "0 0 0";
-		case "hsl": return "0 0% 0%";
-		case "oklch": return "0 0 0";
-	}
-}
-/**
-* Get the CSS @property syntax for the companion components variable.
-* RGB and OKLCH components are all plain numbers, so `<number>+` works.
-* HSL includes percentages (`h s% l%`), so `*` is the only safe choice.
-*/
-function getComponentPropertySyntax() {
-	switch (currentColorSpace) {
-		case "rgb":
-		case "oklch": return "<number>+";
-		default: return "*";
-	}
-}
 //#endregion
 //#region src/parser/types.ts
 const makeEmptyPart = () => ({
@@ -1878,6 +1210,96 @@ function classify(raw, opts, recurse) {
 	};
 }
 //#endregion
+//#region src/parser/lru.ts
+/**
+* Doubly-linked-list LRU.
+*
+* The list holds direct node references rather than keys, so rewiring on a
+* `get()` of a non-MRU entry is pure pointer work. Storing keys instead cost
+* three extra `Map.get()` lookups per read (prev, next and the current head),
+* which is measurable on these read-mostly caches: they are hit on every
+* render once the style pipeline is warm.
+*/
+var Lru = class {
+	limit;
+	map = /* @__PURE__ */ new Map();
+	head = null;
+	tail = null;
+	onEvict;
+	constructor(limit = 1e3, onEvict) {
+		this.limit = limit;
+		let normalized = Number.isFinite(this.limit) ? Math.floor(this.limit) : 1e3;
+		if (normalized <= 0) normalized = 1e3;
+		this.limit = normalized;
+		this.onEvict = onEvict;
+	}
+	setOnEvict(fn) {
+		this.onEvict = fn;
+	}
+	get(key) {
+		const node = this.map.get(key);
+		if (node === void 0) return void 0;
+		if (this.head !== node) this.moveToHead(node);
+		return node.value;
+	}
+	set(key, value) {
+		const existing = this.map.get(key);
+		if (existing !== void 0) {
+			existing.value = value;
+			if (this.head !== existing) this.moveToHead(existing);
+			return;
+		}
+		const node = {
+			key,
+			prev: null,
+			next: this.head,
+			value
+		};
+		if (this.head) this.head.prev = node;
+		this.head = node;
+		if (!this.tail) this.tail = node;
+		this.map.set(key, node);
+		if (this.map.size > this.limit) this.evict();
+	}
+	delete(key) {
+		const node = this.map.get(key);
+		if (node === void 0) return;
+		this.detach(node);
+		this.map.delete(key);
+	}
+	keys() {
+		return this.map.keys();
+	}
+	detach(node) {
+		if (node.prev) node.prev.next = node.next;
+		if (node.next) node.next.prev = node.prev;
+		if (this.head === node) this.head = node.next;
+		if (this.tail === node) this.tail = node.prev;
+		node.prev = null;
+		node.next = null;
+	}
+	moveToHead(node) {
+		this.detach(node);
+		node.next = this.head;
+		if (this.head) this.head.prev = node;
+		this.head = node;
+		if (!this.tail) this.tail = node;
+	}
+	evict() {
+		const node = this.tail;
+		if (!node) return;
+		this.detach(node);
+		this.map.delete(node.key);
+		if (this.onEvict) try {
+			this.onEvict(node.key, node.value);
+		} catch {}
+	}
+	clear() {
+		this.map.clear();
+		this.head = this.tail = null;
+	}
+};
+//#endregion
 //#region src/parser/tokenizer.ts
 const isWhitespace = (ch) => ch === " " || ch === "\n" || ch === "	" || ch === "\r" || ch === "\f";
 function scan(src, cb) {
@@ -2059,17 +1481,127 @@ var StyleParser = class {
 //#endregion
 //#region src/utils/is-dev-env.ts
 /**
-* Check if we're in a development environment at runtime
-* Uses bracket notation to avoid bundler compilation
-* Also checks for TASTY_DEBUG localStorage setting
+* Check if we're in a development environment at runtime
+* Uses bracket notation to avoid bundler compilation
+* Also checks for TASTY_DEBUG localStorage setting
+*/
+function isDevEnv() {
+	if (typeof window !== "undefined" && window.localStorage) try {
+		const forceTastyDebug = window.localStorage.getItem("TASTY_DEBUG");
+		if (forceTastyDebug !== null && forceTastyDebug.toLowerCase() === "true") return true;
+	} catch {}
+	if (typeof process === "undefined") return false;
+	return true;
+}
+//#endregion
+//#region src/styles/shared.ts
+/**
+* If the group contains exactly one value that is a CSS-wide keyword
+* and no colors, return the keyword. Otherwise null.
+*
+* Direction mods (top/right/bottom/left) may coexist with the keyword
+* for directional application like `padding="inherit top"`.
+*/
+function extractCSSWideKeyword(group) {
+	if (group.values.length !== 1 || group.colors.length > 0) return null;
+	return CSS_WIDE_KEYWORDS.has(group.values[0]) ? group.values[0] : null;
+}
+/** A resolved custom-property reference, i.e. `var(--name)` or `var(--name, …)`. */
+const RE_VAR_REFERENCE = /^var\(/;
+/**
+* Assign custom-property references to the style and color slots of a
+* `<line-width> <line-style> <line-color>` shorthand (`border`, `outline`).
+*
+* The parser cannot type a reference, so it buckets `$name` as a plain value and
+* the handler has to place it. A reference fills the first slot still free, in
+* shorthand order: the width takes `values[0]`, then the style, then the color.
+* The style would otherwise arrive as a keyword (`solid`, `dashed`, …) that a
+* reference has no way to match, and the color as `#name` — the `$name-color`
+* form the parser buckets as a color exists to reference a raw CSS custom
+* property, not as the way colors are written, so a reference should not reach
+* for the color slot until the style slot is taken.
+*
+* Lengths are left alone: a second length is not valid in these shorthands, and
+* promoting one would emit an invalid declaration instead of ignoring an extra
+* value. Callers supply their own slot defaults.
+*/
+function assignLineSlots(values, styleKeyword, colorToken) {
+	if (styleKeyword && colorToken) return {
+		style: styleKeyword,
+		color: colorToken
+	};
+	const spare = values.slice(1).filter((value) => RE_VAR_REFERENCE.test(value) && value !== colorToken);
+	return {
+		style: styleKeyword || spare.shift(),
+		color: colorToken || spare.shift()
+	};
+}
+/** Warning keys already emitted, so each distinct offending value warns once. */
+const emittedWarnings$2 = /* @__PURE__ */ new Set();
+/** A resolved custom-property reference anywhere in a token. */
+const RE_HAS_VAR_REFERENCE = /var\(/;
+/**
+* Reject a custom-property reference used where a *token name* is expected.
+*
+* `preset` and `transition` take the name of a design token (`t3`, `fill`) and
+* interpolate it into a CSS custom property — `var(--t3-font-size)`. A reference
+* substituted into that position builds `var(--var(--x)-font-size)`, which is not
+* a valid custom-property name, so the browser drops the declaration and the
+* style silently does nothing. The DSL has no way to indirect a token name
+* through a custom property: the name is needed at build time, and a reference
+* only resolves in the browser.
+*
+* Returns true (warning once per value in dev) so the caller can fall back
+* instead of emitting a declaration that cannot work.
+*/
+function isTokenNameReference(property, name) {
+	if (!RE_HAS_VAR_REFERENCE.test(name)) return false;
+	warnOnceDev(`token-name-reference:${property}:${name}`, `${property}="${name}": a custom property cannot name a token. The name is interpolated into a CSS custom property at build time, so a reference would build an unusable name. It is ignored.`);
+	return true;
+}
+/**
+* Emit a style-level warning at most once per `key`. No-op outside dev mode.
+*
+* Style handlers run once per state combination and their results are cached,
+* but the same value can arrive from many components, so dedupe is required.
+*
+* `isDevEnv()` is called lazily rather than captured at module load (the pattern
+* used in `config.ts` and `states/index.ts`) so that tests can enable it with
+* `vi.stubEnv('NODE_ENV', 'development')` — `isDevEnv()` returns `false` for
+* `NODE_ENV=test`, which is why every module-load-gated warning in this repo is
+* currently untestable. The key is registered *before* the dev check, so
+* production pays at most one `isDevEnv()` call per distinct offending value and
+* never touches the console.
+*/
+function warnOnceDev(key, message) {
+	if (emittedWarnings$2.has(key)) return;
+	emittedWarnings$2.add(key);
+	if (!isDevEnv()) return;
+	console.warn(`[Tasty] ${message}`);
+}
+/** Forget emitted style warnings. Called by `resetConfig()`; test isolation. */
+function resetStyleWarnings() {
+	emittedWarnings$2.clear();
+}
+/**
+* Report a comma group that names direction modifiers together with more values
+* than the group can use.
+*
+* The parser buckets values and modifiers into separate arrays per comma group,
+* so `padding: '2x 4x top right'`, `padding: '2x top 4x right'` and
+* `padding: 'top 2x right 4x'` all reach a handler identically — the pairing a
+* reader infers from source order does not survive parsing. Such a group
+* therefore carries a single value, applied to every direction it names.
+*
+* `maxValues` is 2 only for a span modifier (`inset: '2x 4x bottom dock'`),
+* where the second value insets the sides the dock spans.
+*
+* Callers must guard on the count themselves so the valid path costs one integer
+* comparison; everything expensive happens here, on the misuse path only.
 */
-function isDevEnv() {
-	if (typeof window !== "undefined" && window.localStorage) try {
-		const forceTastyDebug = window.localStorage.getItem("TASTY_DEBUG");
-		if (forceTastyDebug !== null && forceTastyDebug.toLowerCase() === "true") return true;
-	} catch {}
-	if (typeof process === "undefined") return false;
-	return true;
+function warnExtraGroupValues(property, input, maxValues) {
+	const message = maxValues === 2 ? `${property}="${input}": with a span modifier a group takes at most two values — one for the named edge and one for the spanned sides. The extra values are ignored.` : `${property}="${input}": a group that names directions takes a single value, applied to every direction it names. The extra values are ignored — use comma-separated groups instead, e.g. ${property}="2x top, 4x right".`;
+	warnOnceDev(`extra-values:${property}:${input}`, message);
 }
 //#endregion
 //#region src/plugins/color-func.ts
@@ -2089,7 +1621,9 @@ const parseAngle = (value) => {
 	}
 };
 /**
-* Parse a percentage value (e.g., "50%") to a 0-1 range.
+* Parse a percentage value (e.g., "50%") to a 0-1 range. A unitless number is
+* read as the factor it already looks like, so `okhsl(280 .8 .52)` and
+* `okhsl(280 80% 52%)` are the same color.
 */
 const parsePercentage = (value) => {
 	const match = value.match(/^([+-]?\d*\.?\d+)%?$/);
@@ -2128,6 +1662,8 @@ function createColorFunc(name, convert, label) {
 		const h = parseAngle(tokens[0]);
 		const c2 = parsePercentage(tokens[1]);
 		const c3 = parsePercentage(tokens[2]);
+		const misscaled = [tokens[1], tokens[2]].filter((raw, i) => !raw.includes("%") && (i === 0 ? c2 : c3) > 1);
+		if (misscaled.length) warnOnceDev(`${name}:percent-scale`, `${name}(): channels are factors (0-1) or percentages, so ${misscaled.map((v) => `"${v}"`).join(" and ")} ${misscaled.length > 1 ? "clamp" : "clamps"} to 1 — add the missing '%', or write the value as a 0-1 number.`);
 		const [r, g, b] = convert(h, clamp(c2, 0, 1), clamp(c3, 0, 1));
 		const format = (n) => {
 			const pct = n * 100;
@@ -2264,22 +1800,35 @@ function normalizeColorTokenValue(value) {
 	return value;
 }
 const COLOR_VAR_PATTERN = /^var\(--([a-z0-9-]+)-color[,)]/;
-const COLOR_VAR_COMPONENTS_PATTERN = /^(?:[a-z-]+\(\s*)?var\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)[,)]/;
 const RGB_ALPHA_PATTERN = /\/\s*([0-9.]+)\)/;
 const RE_HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;
 const RE_VAR_COLOR = /^var\(--[a-z0-9-]+-color/;
 function isSimpleColorFast(val) {
 	switch (val.charCodeAt(0)) {
 		case 35: return RE_HEX_COLOR.test(val);
-		case 114: return val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98;
-		case 104: return val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108;
-		case 108: return val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104;
-		case 111: return val.startsWith("oklch(");
-		case 118: return RE_VAR_COLOR.test(val);
-		case 99: return val === "currentColor" || val === "currentcolor";
-		case 116: return val === "transparent";
-		default: return getNamedColorHex().has(val.toLowerCase());
+		case 114:
+			if (val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98) return true;
+			break;
+		case 104:
+			if (val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108) return true;
+			break;
+		case 108:
+			if (val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104) return true;
+			break;
+		case 111:
+			if (val.startsWith("oklch(")) return true;
+			break;
+		case 118:
+			if (RE_VAR_COLOR.test(val)) return true;
+			break;
+		case 99:
+			if (val === "currentColor" || val === "currentcolor") return true;
+			break;
+		case 116:
+			if (val === "transparent") return true;
+			break;
 	}
+	return getNamedColorHex().has(val.toLowerCase());
 }
 let colorWarningCount = 0;
 const MAX_COLOR_WARNINGS = 10;
@@ -2456,8 +2005,7 @@ function parseColor(val, ignoreError = false) {
 	}
 	const faded = parseAlphaOverride(firstColor);
 	const baseColor = faded ? faded.color : firstColor;
-	let nameMatch = baseColor.match(COLOR_VAR_PATTERN);
-	if (!nameMatch) nameMatch = baseColor.match(COLOR_VAR_COMPONENTS_PATTERN);
+	const nameMatch = baseColor.match(COLOR_VAR_PATTERN);
 	let opacity;
 	if (faded) {
 		const { alpha } = faded;
@@ -3224,7 +2772,6 @@ function getEffectiveDefinition(token, userDefinition) {
 	if (!parsed.isValid) return {
 		cssName: "",
 		definition: userDefinition,
-		isColor: false,
 		isValid: false,
 		error: parsed.error
 	};
@@ -3235,13 +2782,11 @@ function getEffectiveDefinition(token, userDefinition) {
 			inherits: userDefinition.inherits,
 			initialValue: userDefinition.initialValue ?? "transparent"
 		},
-		isColor: true,
 		isValid: true
 	};
 	return {
 		cssName: parsed.cssName,
 		definition: userDefinition,
-		isColor: false,
 		isValid: true
 	};
 }
@@ -3643,10 +3188,6 @@ function resetStyleBatch() {
 */
 const CUSTOM_PROP_DECL = /^\s*(--[a-z0-9_-]+)\s*:\s*(.+?)\s*$/i;
 const SINGLE_VAR_REF = /^var\((--[a-z0-9_-]+)\)$/i;
-/** A `--name-color-{space}` companion holding a color's channel components. */
-const COLOR_COMPONENTS_DECL = /^\s*(--[a-z0-9_-]+-color-(?:rgb|hsl|oklch))\s*:\s*(.+?)\s*$/i;
-/** A component list the browser can type as `<number>+`. */
-const NUMERIC_COMPONENTS = /^[\d\s.+-]+$/;
 var PropertyTypeResolver = class {
 	/** propName → the prop it depends on */
 	pendingDeps = /* @__PURE__ */ new Map();
@@ -3659,15 +3200,6 @@ var PropertyTypeResolver = class {
 	scanDeclarations(declarations, isPropertyDefined, registerProperty) {
 		if (!declarations.includes("--")) return;
 		const parts = declarations.split(/;+/);
-		for (const part of parts) {
-			const match = COLOR_COMPONENTS_DECL.exec(part);
-			if (!match) continue;
-			const propName = match[1];
-			if (isPropertyDefined(propName)) continue;
-			if (NUMERIC_COMPONENTS.test(match[2])) continue;
-			if (isPropertyDefined(propName.slice(0, propName.lastIndexOf("-")))) continue;
-			registerProperty(propName, "*", getDefaultComponents());
-		}
 		for (const part of parts) {
 			if (!part.trim()) continue;
 			const match = CUSTOM_PROP_DECL.exec(part);
@@ -3747,116 +3279,6 @@ const BORDER_STYLES = [
 	"outset"
 ];
 //#endregion
-//#region src/styles/shared.ts
-/**
-* If the group contains exactly one value that is a CSS-wide keyword
-* and no colors, return the keyword. Otherwise null.
-*
-* Direction mods (top/right/bottom/left) may coexist with the keyword
-* for directional application like `padding="inherit top"`.
-*/
-function extractCSSWideKeyword(group) {
-	if (group.values.length !== 1 || group.colors.length > 0) return null;
-	return CSS_WIDE_KEYWORDS.has(group.values[0]) ? group.values[0] : null;
-}
-/** A resolved custom-property reference, i.e. `var(--name)` or `var(--name, …)`. */
-const RE_VAR_REFERENCE = /^var\(/;
-/**
-* Assign custom-property references to the style and color slots of a
-* `<line-width> <line-style> <line-color>` shorthand (`border`, `outline`).
-*
-* The parser cannot type a reference, so it buckets `$name` as a plain value and
-* the handler has to place it. A reference fills the first slot still free, in
-* shorthand order: the width takes `values[0]`, then the style, then the color.
-* The style would otherwise arrive as a keyword (`solid`, `dashed`, …) that a
-* reference has no way to match, and the color as `#name` — the `$name-color`
-* form the parser buckets as a color exists to reference a raw CSS custom
-* property, not as the way colors are written, so a reference should not reach
-* for the color slot until the style slot is taken.
-*
-* Lengths are left alone: a second length is not valid in these shorthands, and
-* promoting one would emit an invalid declaration instead of ignoring an extra
-* value. Callers supply their own slot defaults.
-*/
-function assignLineSlots(values, styleKeyword, colorToken) {
-	if (styleKeyword && colorToken) return {
-		style: styleKeyword,
-		color: colorToken
-	};
-	const spare = values.slice(1).filter((value) => RE_VAR_REFERENCE.test(value) && value !== colorToken);
-	return {
-		style: styleKeyword || spare.shift(),
-		color: colorToken || spare.shift()
-	};
-}
-/** Warning keys already emitted, so each distinct offending value warns once. */
-const emittedWarnings$2 = /* @__PURE__ */ new Set();
-/** A resolved custom-property reference anywhere in a token. */
-const RE_HAS_VAR_REFERENCE = /var\(/;
-/**
-* Reject a custom-property reference used where a *token name* is expected.
-*
-* `preset` and `transition` take the name of a design token (`t3`, `fill`) and
-* interpolate it into a CSS custom property — `var(--t3-font-size)`. A reference
-* substituted into that position builds `var(--var(--x)-font-size)`, which is not
-* a valid custom-property name, so the browser drops the declaration and the
-* style silently does nothing. The DSL has no way to indirect a token name
-* through a custom property: the name is needed at build time, and a reference
-* only resolves in the browser.
-*
-* Returns true (warning once per value in dev) so the caller can fall back
-* instead of emitting a declaration that cannot work.
-*/
-function isTokenNameReference(property, name) {
-	if (!RE_HAS_VAR_REFERENCE.test(name)) return false;
-	warnOnceDev(`token-name-reference:${property}:${name}`, `${property}="${name}": a custom property cannot name a token. The name is interpolated into a CSS custom property at build time, so a reference would build an unusable name. It is ignored.`);
-	return true;
-}
-/**
-* Emit a style-level warning at most once per `key`. No-op outside dev mode.
-*
-* Style handlers run once per state combination and their results are cached,
-* but the same value can arrive from many components, so dedupe is required.
-*
-* `isDevEnv()` is called lazily rather than captured at module load (the pattern
-* used in `config.ts` and `states/index.ts`) so that tests can enable it with
-* `vi.stubEnv('NODE_ENV', 'development')` — `isDevEnv()` returns `false` for
-* `NODE_ENV=test`, which is why every module-load-gated warning in this repo is
-* currently untestable. The key is registered *before* the dev check, so
-* production pays at most one `isDevEnv()` call per distinct offending value and
-* never touches the console.
-*/
-function warnOnceDev(key, message) {
-	if (emittedWarnings$2.has(key)) return;
-	emittedWarnings$2.add(key);
-	if (!isDevEnv()) return;
-	console.warn(`[Tasty] ${message}`);
-}
-/** Forget emitted style warnings. Called by `resetConfig()`; test isolation. */
-function resetStyleWarnings() {
-	emittedWarnings$2.clear();
-}
-/**
-* Report a comma group that names direction modifiers together with more values
-* than the group can use.
-*
-* The parser buckets values and modifiers into separate arrays per comma group,
-* so `padding: '2x 4x top right'`, `padding: '2x top 4x right'` and
-* `padding: 'top 2x right 4x'` all reach a handler identically — the pairing a
-* reader infers from source order does not survive parsing. Such a group
-* therefore carries a single value, applied to every direction it names.
-*
-* `maxValues` is 2 only for a span modifier (`inset: '2x 4x bottom dock'`),
-* where the second value insets the sides the dock spans.
-*
-* Callers must guard on the count themselves so the valid path costs one integer
-* comparison; everything expensive happens here, on the misuse path only.
-*/
-function warnExtraGroupValues(property, input, maxValues) {
-	const message = maxValues === 2 ? `${property}="${input}": with a span modifier a group takes at most two values — one for the named edge and one for the spanned sides. The extra values are ignored.` : `${property}="${input}": a group that names directions takes a single value, applied to every direction it names. The extra values are ignored — use comma-separated groups instead, e.g. ${property}="2x top, 4x right".`;
-	warnOnceDev(`extra-values:${property}:${input}`, message);
-}
-//#endregion
 //#region src/styles/border.ts
 /**
 * Process a single group and return border values for its directions.
@@ -3971,21 +3393,19 @@ function borderStyle({ border }) {
 borderStyle.__lookupStyles = ["border"];
 //#endregion
 //#region src/styles/color.ts
+/**
+* A color that already resolves against the color the element inherits, and so
+* must not be republished as `--current-color`: a descendant reading the
+* variable would resolve it a second time against its own color. Covers the
+* keyword and the variable alike — the latter would also be a self-reference.
+*/
+const RE_READS_CURRENT = /var\(--current-color[,)]|currentcolor/i;
 function colorStyle({ color }) {
 	if (!color) return null;
 	if (color === true) color = "currentColor";
 	color = parseColor(color, true).color || resolveCustomProperties(color);
-	const match = color.match(/var\(--(.+?)-color/);
-	let name = "";
-	if (match) name = match[1];
 	const styles = { color };
-	if (name && name !== "current") {
-		const suffix = getColorSpaceSuffix();
-		Object.assign(styles, {
-			"--current-color": color,
-			[`--current-color-${suffix}`]: convertColorChainToComponentChain(color)
-		});
-	}
+	if (!RE_READS_CURRENT.test(color)) styles["--current-color"] = color;
 	return styles;
 }
 colorStyle.__lookupStyles = ["color"];
@@ -4015,31 +3435,7 @@ function createStyle(styleName, cssStyle, converter) {
 			}
 			if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
 				styleValue = styleValue.trim();
-				const suffix = getColorSpaceSuffix();
-				const colorSpaceStr = strToColorSpace(styleValue);
-				const { color, name } = parseColor(styleValue);
-				if (name && colorSpaceStr) return {
-					[finalCssStyle]: `var(--${name}-color, ${colorSpaceStr})`,
-					[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix}, ${getColorSpaceComponents(colorSpaceStr)})`
-				};
-				else if (name) {
-					if (color) return {
-						[finalCssStyle]: color,
-						[`${finalCssStyle}-${suffix}`]: convertColorChainToComponentChain(color)
-					};
-					return {
-						[finalCssStyle]: `var(--${name}-color)`,
-						[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix})`
-					};
-				} else if (colorSpaceStr) return {
-					[finalCssStyle]: colorSpaceStr,
-					[`${finalCssStyle}-${suffix}`]: getColorSpaceComponents(colorSpaceStr)
-				};
-				if (color && colorFuncName(color)) return {
-					[finalCssStyle]: color,
-					[`${finalCssStyle}-${suffix}`]: convertColorChainToComponentChain(color)
-				};
-				return { [finalCssStyle]: color ?? "" };
+				return { [finalCssStyle]: parseColor(styleValue).color ?? "" };
 			}
 			const processed = parseStyle(styleValue);
 			return { [finalCssStyle]: processed.output };
@@ -5644,7 +5040,7 @@ var SheetManager = class {
 			} : void 0;
 			registry = {
 				sheets: [],
-				refCounts: /* @__PURE__ */ new Map(),
+				pinCounts: /* @__PURE__ */ new Map(),
 				rules: /* @__PURE__ */ new Map(),
 				cacheKeyToClassName: /* @__PURE__ */ new Map(),
 				ruleTextSet: /* @__PURE__ */ new Set(),
@@ -5658,10 +5054,9 @@ var SheetManager = class {
 				injectedFunctions: /* @__PURE__ */ new Map(),
 				globalRules: /* @__PURE__ */ new Map(),
 				propertyTypeResolver: new PropertyTypeResolver(),
-				usageMap: /* @__PURE__ */ new Map(),
+				unusedSince: /* @__PURE__ */ new Map(),
+				localKeyframes: /* @__PURE__ */ new Map(),
 				touchCount: 0,
-				touchTick: -1,
-				touchedTick: /* @__PURE__ */ new Set(),
 				serverClassSyncIndex: 0,
 				rscStylesScanned: false,
 				injectionMode: this.detectInjectionMode(root)
@@ -6043,25 +5438,26 @@ var SheetManager = class {
 		return registry.atPropertySupported;
 	}
 	/**
-	* Force cleanup of unused styles
-	*/
-	forceCleanup(registry) {
-		this.performBulkCleanup(registry);
-	}
-	/**
-	* Perform bulk cleanup of all unused styles (refCount = 0).
+	* Delete the given classes: their rules leave the sheets and every registry
+	* entry pointing at them is dropped.
+	*
+	* Deciding *what* is unused belongs to `StyleInjector.gc()`, which owns the
+	* DOM scan and the capacity policy. This only re-checks that each class is
+	* still safe to delete, and reports how many were.
+	*
+	* @returns Number of classes actually deleted.
 	*/
-	performBulkCleanup(registry) {
+	deleteClasses(registry, classNames) {
 		const cleanupStartTime = Date.now();
-		const unusedClassNames = Array.from(registry.refCounts.entries()).filter(([className, refCount]) => refCount === 0 && !registry.usageMap.has(className)).map(([className]) => className);
-		if (unusedClassNames.length === 0) return;
-		const selected = unusedClassNames.map((className) => {
+		const selected = Array.from(classNames).map((className) => {
 			const ruleInfo = registry.rules.get(className);
 			return ruleInfo ? {
 				className,
 				ruleInfo
 			} : null;
 		}).filter((entry) => entry != null);
+		if (selected.length === 0) return 0;
+		const deleted = /* @__PURE__ */ new Set();
 		let cleanedUpCount = 0;
 		let totalCssSize = 0;
 		let totalRulesDeleted = 0;
@@ -6082,7 +5478,7 @@ var SheetManager = class {
 		for (const [_sheetIndex, rulesInSheet] of rulesBySheet) {
 			rulesInSheet.sort((a, b) => b.ruleInfo.ruleIndex - a.ruleInfo.ruleIndex);
 			for (const { className, ruleInfo } of rulesInSheet) {
-				if ((registry.refCounts.get(className) || 0) > 0) continue;
+				if ((registry.pinCounts.get(className) ?? 0) > 0) continue;
 				if (registry.rules.get(className) !== ruleInfo) continue;
 				const sheetInfo = registry.sheets[ruleInfo.sheetIndex];
 				if (!sheetInfo || !sheetInfo.sheet && !sheetInfo.constructableSheet) continue;
@@ -6094,13 +5490,22 @@ var SheetManager = class {
 				if (startIdx < 0 || endIdx > maxRuleIndex || startIdx > endIdx) continue;
 				this.deleteRule(registry, ruleInfo);
 				registry.rules.delete(className);
-				registry.refCounts.delete(className);
-				const keysToDelete = [];
-				for (const [key, mappedClassName] of registry.cacheKeyToClassName.entries()) if (mappedClassName === className) keysToDelete.push(key);
-				for (const key of keysToDelete) registry.cacheKeyToClassName.delete(key);
+				registry.pinCounts.delete(className);
+				registry.unusedSince.delete(className);
+				for (const [key, entry] of registry.localKeyframes) {
+					if (!entry.owners.delete(className)) continue;
+					if (entry.owners.size === 0) {
+						entry.dispose();
+						registry.localKeyframes.delete(key);
+					}
+				}
+				deleted.add(className);
 				cleanedUpCount++;
 			}
 		}
+		if (deleted.size > 0) {
+			for (const [key, mappedClassName] of registry.cacheKeyToClassName) if (deleted.has(mappedClassName)) registry.cacheKeyToClassName.delete(key);
+		}
 		if (registry.metrics) {
 			registry.metrics.bulkCleanups++;
 			registry.metrics.stylesCleanedUp += cleanedUpCount;
@@ -6111,6 +5516,7 @@ var SheetManager = class {
 				rulesDeleted: totalRulesDeleted
 			});
 		}
+		return cleanedUpCount;
 	}
 	/**
 	* Get total number of rules across all sheets
@@ -6145,10 +5551,9 @@ var SheetManager = class {
 	*/
 	getMetrics(registry) {
 		if (!registry.metrics) return null;
-		const unusedRulesCount = Array.from(registry.refCounts.values()).filter((count) => count === 0).length;
 		return {
 			...registry.metrics,
-			unusedHits: unusedRulesCount
+			unusedHits: 0
 		};
 	}
 	/**
@@ -6572,6 +5977,13 @@ function formatCounterStyleRule(name, descriptors) {
 //#endregion
 //#region src/injector/injector.ts
 /**
+* How long a class is left alone after it was last known to be wanted.
+* Long enough that a render cannot plausibly still be waiting to commit one.
+*/
+const DEFAULT_GC_GRACE = 1e4;
+/** Dispose handle handed back for injections that took no pin. */
+const noop = () => {};
+/**
 * Placeholder `KeyframesInfo` for a cache entry reserved by a batched write and
 * not yet backed by a real rule. Only ever read through `entry.pending`, which
 * is checked before the info is used.
@@ -6628,13 +6040,14 @@ function registerHydratedClass(registry, className) {
 		ruleIndex: -2,
 		sheetIndex: -2
 	});
-	registry.refCounts.set(className, 0);
+	registry.pinCounts.set(className, 0);
 }
 var StyleInjector = class {
 	sheetManager;
 	config;
 	globalRuleCounter = 0;
-	pendingGCHandle = null;
+	/** Cancels the scheduled sweep, whichever timer scheduled it. */
+	cancelPendingGC = null;
 	namePrefix;
 	classRegex;
 	rscClassRegex;
@@ -6763,6 +6176,7 @@ var StyleInjector = class {
 	inject(rules, options) {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
+		const pin = options?.pin ?? true;
 		if (rules.length === 0) return {
 			className: "",
 			dispose: () => {}
@@ -6773,30 +6187,34 @@ var StyleInjector = class {
 			className = registry.cacheKeyToClassName.get(cacheKey);
 			const existingRuleInfo = registry.rules.get(className);
 			if (existingRuleInfo.ruleIndex === -3) {
-				registry.refCounts.set(className, (registry.refCounts.get(className) || 0) + 1);
+				registry.unusedSince.delete(className);
+				if (pin) registry.pinCounts.set(className, (registry.pinCounts.get(className) || 0) + 1);
 				if (registry.metrics) registry.metrics.hits++;
 				return {
 					className,
-					dispose: () => this.dispose(className, registry)
+					dispose: pin ? () => this.unpin(className, registry) : noop
 				};
 			}
 			if (!(existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1)) {
-				const currentRefCount = registry.refCounts.get(className) || 0;
-				registry.refCounts.set(className, currentRefCount + 1);
+				registry.unusedSince.delete(className);
+				if (pin) {
+					const pins = registry.pinCounts.get(className) || 0;
+					registry.pinCounts.set(className, pins + 1);
+				}
 				if (registry.metrics) registry.metrics.hits++;
 				return {
 					className,
-					dispose: () => this.dispose(className, registry)
+					dispose: pin ? () => this.unpin(className, registry) : noop
 				};
 			}
 		} else if (cacheKey) {
 			className = this.generateClassName(cacheKey);
 			if (this.tryHydratedHit(registry, cacheKey, className)) {
-				registry.refCounts.set(className, (registry.refCounts.get(className) || 0) + 1);
+				if (pin) registry.pinCounts.set(className, (registry.pinCounts.get(className) || 0) + 1);
 				if (registry.metrics) registry.metrics.hits++;
 				return {
 					className,
-					dispose: () => this.dispose(className, registry)
+					dispose: pin ? () => this.unpin(className, registry) : noop
 				};
 			}
 		} else {
@@ -6857,7 +6275,8 @@ var StyleInjector = class {
 				sheetIndex: -3
 			});
 			if (cacheKey) registry.cacheKeyToClassName.set(cacheKey, className);
-			registry.refCounts.set(className, 1);
+			if (pin) registry.pinCounts.set(className, 1);
+			registry.unusedSince.set(className, Date.now());
 			const queued = enqueueStyleWrite(() => {
 				if (applySheetWrite()) return;
 				registry.rules.set(className, {
@@ -6868,26 +6287,27 @@ var StyleInjector = class {
 			});
 			return {
 				className,
-				dispose: () => {
-					if (!queued.done && registry.refCounts.get(className) === 1 && registry.rules.get(className)?.ruleIndex === -3) {
+				dispose: pin ? () => {
+					if (!queued.done && registry.pinCounts.get(className) === 1 && registry.rules.get(className)?.ruleIndex === -3) {
 						queued.cancelled = true;
 						registry.rules.delete(className);
 						if (cacheKey) registry.cacheKeyToClassName.delete(cacheKey);
-						registry.refCounts.set(className, 0);
+						registry.pinCounts.set(className, 0);
 						return;
 					}
-					this.dispose(className, registry);
-				}
+					this.unpin(className, registry);
+				} : noop
 			};
 		}
 		if (!applySheetWrite()) return {
 			className,
 			dispose: () => {}
 		};
-		registry.refCounts.set(className, 1);
+		if (pin) registry.pinCounts.set(className, 1);
+		registry.unusedSince.set(className, Date.now());
 		return {
 			className,
-			dispose: () => this.dispose(className, registry)
+			dispose: pin ? () => this.unpin(className, registry) : noop
 		};
 	}
 	/**
@@ -6967,41 +6387,95 @@ var StyleInjector = class {
 		return this.sheetManager.getRawCSSText(root);
 	}
 	/**
-	* Increment refCount for an already-injected cacheKey and return a dispose.
-	* Used by useStyles on cache hits (hydration or runtime reuse) where
-	* the pipeline was skipped but refCount tracking is still needed.
-	* Returns null if the cacheKey is not found.
+	* Take a reference on local `@keyframes` and report what they ended up being
+	* called, without deciding yet which classes own them.
+	*
+	* Names have to be resolved before the rules that animate them are written:
+	* an injected name can differ from the authored one, and a rule written
+	* first cannot be rewritten afterwards — its cache key is already claimed,
+	* so the second write is a hit and the corrected declarations are dropped.
+	*
+	* One reference per distinct set of steps, shared by every class that ends up
+	* animating it, so a repeat render takes nothing further. Ownership is
+	* assigned by `ownKeyframes()` once the rules exist to be inspected.
+	*/
+	holdKeyframes(steps, options) {
+		const root = options?.root || document;
+		const registry = this.sheetManager.getRegistry(root);
+		const names = /* @__PURE__ */ new Map();
+		const keys = /* @__PURE__ */ new Map();
+		for (const [authored, definition] of Object.entries(steps)) {
+			const key = `${authored}\u0000${JSON.stringify(definition)}`;
+			let entry = registry.localKeyframes.get(key);
+			if (!entry) {
+				const injected = this.keyframes(definition, {
+					name: authored,
+					root
+				});
+				entry = {
+					name: injected.toString(),
+					dispose: injected.dispose,
+					owners: /* @__PURE__ */ new Set()
+				};
+				registry.localKeyframes.set(key, entry);
+			}
+			keys.set(authored, key);
+			names.set(authored, entry.name);
+		}
+		return {
+			names,
+			keys
+		};
+	}
+	/**
+	* Record that `className` animates these keyframes, so the reference is
+	* released when the last such class is collected.
+	*
+	* Only classes whose rules actually reference the animation should be here:
+	* a class that merely rendered alongside one would otherwise keep the
+	* keyframes alive for as long as it lives.
+	*/
+	ownKeyframes(key, className, options) {
+		this.sheetManager.getRegistry(options?.root || document).localKeyframes.get(key)?.owners.add(className);
+	}
+	/**
+	* Pin an already-injected cacheKey and return the handle that releases it.
+	* For callers that skipped the pipeline on a cache hit but still need the
+	* class held. Returns null if the cacheKey is not found.
 	*/
 	trackRef(cacheKey, options) {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		if (!registry.cacheKeyToClassName.has(cacheKey)) return null;
 		const className = registry.cacheKeyToClassName.get(cacheKey);
-		const currentRefCount = registry.refCounts.get(className) || 0;
-		registry.refCounts.set(className, currentRefCount + 1);
+		const pins = registry.pinCounts.get(className) || 0;
+		registry.pinCounts.set(className, pins + 1);
 		if (registry.metrics) registry.metrics.hits++;
 		return {
 			className,
-			dispose: () => this.dispose(className, registry)
+			dispose: () => this.unpin(className, registry)
 		};
 	}
 	/**
-	* Dispose of a className (decrements refCount only).
+	* Release one pin on a className. At zero pins the class is not deleted — it
+	* stays cached and collectible, and `gc()` decides when it actually goes.
 	*/
-	dispose(className, registry) {
-		const currentRefCount = registry.refCounts.get(className);
-		if (currentRefCount == null || currentRefCount <= 0) return;
-		const newRefCount = currentRefCount - 1;
-		registry.refCounts.set(className, newRefCount);
-		if (newRefCount === 0 && registry.metrics) registry.metrics.totalUnused++;
+	unpin(className, registry) {
+		const pins = registry.pinCounts.get(className);
+		if (pins == null || pins <= 0) return;
+		const remaining = pins - 1;
+		registry.pinCounts.set(className, remaining);
+		if (remaining === 0 && registry.metrics) registry.metrics.totalUnused++;
 	}
 	/**
-	* Force bulk cleanup of unused styles
+	* Remove every style that is neither in the DOM nor referenced by an
+	* outstanding `inject()` handle, ignoring the GC capacity threshold.
 	*/
 	cleanup(root) {
-		flushStyles();
-		const registry = this.sheetManager.getRegistry(root || document);
-		this.sheetManager.forceCleanup(registry);
+		this.gc({
+			root,
+			force: true
+		});
 	}
 	/**
 	* Get CSS text from all sheets (for SSR)
@@ -7044,7 +6518,9 @@ var StyleInjector = class {
 		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
-		return this.sheetManager.getMetrics(registry);
+		const metrics = this.sheetManager.getMetrics(registry);
+		if (metrics && typeof document !== "undefined") metrics.unusedHits = this.collectUnused(registry, root).length;
+		return metrics;
 	}
 	/**
 	* Reset cache performance metrics
@@ -7085,15 +6561,6 @@ var StyleInjector = class {
 		const cssName = effectiveResult.cssName;
 		const definition = effectiveResult.definition;
 		this.insertPropertyRule(registry, root, cssName, definition, name);
-		if (effectiveResult.isColor) {
-			const companionCssName = `${cssName}-${getColorSpaceSuffix()}`;
-			const companionDefinition = {
-				syntax: getComponentPropertySyntax(),
-				inherits: definition.inherits,
-				initialValue: colorInitialValueToComponents(definition.initialValue)
-			};
-			this.insertPropertyRule(registry, root, companionCssName, companionDefinition, `${name}:components`);
-		}
 	}
 	/**
 	* Build and insert a single `@property` rule into the given registry.
@@ -7325,108 +6792,132 @@ var StyleInjector = class {
 		}
 	}
 	/**
-	* Record a render-time usage hit for one or more classNames.
-	* Handles space-separated multi-chunk classNames.
-	* When the global touch counter reaches `touchInterval`, schedules a GC
-	* via `requestIdleCallback`.
-	* No-op on the server.
+	* Count a render, and schedule a collection pass every `touchInterval` of
+	* them. Nothing else: what a class is worth keeping is decided by the sweep's
+	* own DOM scan, so rendering does not track usage at all.
+	*
+	* @deprecated The class name is ignored — pass anything, or stop calling it.
+	* Collection no longer records per-class usage, and scheduling does not need
+	* to know which class was rendered. A class handed back by `inject()` is
+	* marked wanted there, which is what reuse actually goes through.
 	*/
-	touch(className, options) {
+	touch(_className, options) {
 		if (typeof document === "undefined") return;
 		if (!this.config.gc) return;
-		const root = options?.root || document;
-		const registry = this.sheetManager.getRegistry(root);
-		const now = Date.now();
-		if (registry.touchTick !== now) {
-			registry.touchTick = now;
-			registry.touchedTick.clear();
-		} else if (registry.touchedTick.has(className)) return;
-		registry.touchedTick.add(className);
-		const parts = className.indexOf(" ") === -1 ? [className] : className.split(" ");
-		for (const cls of parts) {
-			if (!this.classRegex.test(cls)) continue;
-			if (!registry.rules.has(cls)) continue;
-			const entry = registry.usageMap.get(cls);
-			if (entry) entry.lastTouchedAt = now;
-			else registry.usageMap.set(cls, { lastTouchedAt: now });
-			registry.touchCount++;
-		}
-		const touchInterval = this.config.gc.touchInterval ?? 1e3;
-		if (registry.touchCount >= touchInterval) {
+		const registry = this.sheetManager.getRegistry(options?.root || document);
+		if (++registry.touchCount >= (this.config.gc.touchInterval ?? 1e3)) {
 			registry.touchCount = 0;
 			this.scheduleGC();
 		}
 	}
 	/**
-	* Schedule a GC via `requestIdleCallback` (or synchronously as fallback).
-	* Runs GC on all active roots. Avoids double-scheduling via `pendingGCHandle`.
+	* Schedule a GC in idle time. Runs GC on all active roots, and avoids
+	* double-scheduling.
+	*
+	* Idle only. Without `requestIdleCallback` nothing is collected
+	* automatically: running the sweep inline here would put it inside the render
+	* that touched the class, and collection is never urgent enough for that.
 	*/
 	scheduleGC() {
-		if (this.pendingGCHandle != null) return;
+		if (this.cancelPendingGC) return;
 		const runGC = () => {
-			this.pendingGCHandle = null;
+			this.cancelPendingGC = null;
 			this.sheetManager.pruneDisconnectedRoots();
 			for (const root of this.sheetManager.getActiveRoots()) this.gc({ root });
 		};
-		if (typeof requestIdleCallback !== "undefined") this.pendingGCHandle = requestIdleCallback(() => runGC());
-		else runGC();
+		if (typeof requestIdleCallback !== "undefined") {
+			const handle = requestIdleCallback(() => runGC());
+			this.cancelPendingGC = () => cancelIdleCallback(handle);
+		}
+	}
+	/**
+	* The one definition of "unused": this injector owns the class's rules, no
+	* element in `root` carries it, and nobody pinned it.
+	*
+	* `gc()` evicts from this set, `getMetrics()` counts it, and `tastyDebug`
+	* reports it — all through here, so the three can never disagree about what
+	* "unused" means. Entries carry their last `touch()` so callers can drop the
+	* oldest first; a class that was never touched sorts as oldest.
+	*/
+	/**
+	* Everything the injector holds falls into one of five bands, and only the
+	* last of them is ever deleted:
+	*
+	* 1. rendered — some element carries the class right now
+	* 2. not ours — queued for a batched write, pre-allocated, or server-rendered
+	* 3. hot — nothing carries it, but that was noticed less than `grace` ago
+	* 4. cached — cold, but within `capacity` when ordered by when it went cold
+	* 5. the rest
+	*
+	* This returns bands 4 and 5 together, most recently cold first; `gc()` draws
+	* the capacity line through them. Band 3 is what makes collection safe
+	* without a commit signal: a render can resolve a class and commit it a
+	* little later, and during that gap nothing on the page carries it.
+	*/
+	collectUnused(registry, root) {
+		const now = Date.now();
+		const grace = this.config.gc?.grace ?? DEFAULT_GC_GRACE;
+		const liveClasses = /* @__PURE__ */ new Set();
+		for (const el of root.querySelectorAll("[class]")) for (const token of el.classList) if (this.classRegex.test(token)) liveClasses.add(token);
+		const unused = [];
+		for (const [className, ruleInfo] of registry.rules) {
+			if (ruleInfo.sheetIndex < 0) continue;
+			if (liveClasses.has(className)) {
+				registry.unusedSince.delete(className);
+				continue;
+			}
+			if ((registry.pinCounts.get(className) ?? 0) > 0) continue;
+			let since = registry.unusedSince.get(className);
+			if (since === void 0) {
+				since = now;
+				registry.unusedSince.set(className, now);
+			}
+			if (now - since < grace) continue;
+			unused.push(className);
+		}
+		unused.sort((a, b) => (registry.unusedSince.get(b) ?? 0) - (registry.unusedSince.get(a) ?? 0));
+		return unused;
+	}
+	/**
+	* Class names this injector holds CSS for that nothing renders and nobody
+	* pinned — exactly what `gc({ force: true })` would delete. Unordered.
+	*/
+	getUnusedClasses(options) {
+		flushStyles();
+		if (typeof document === "undefined") return [];
+		const root = options?.root || document;
+		const registry = this.sheetManager.getRegistry(root);
+		return this.collectUnused(registry, root);
 	}
 	/**
 	* Synchronous garbage collection.
 	*
-	* 1. Quick upper-bound check: skip if unused count can't exceed capacity.
-	* 2. Scans the DOM for live tasty classNames (safety guard).
-	* 3. With `force: true`: deletes all unused entries inline.
-	*    Without `force`: collects unused, sorts oldest-first, evicts over capacity.
+	* 1. Quick upper-bound check: skip if the registry is smaller than capacity.
+	* 2. Scans the DOM for live tasty classNames — the DOM, not a ref count, is
+	*    what says a class rendered by a component is still in use.
+	* 3. With `force: true`: deletes every unused class.
+	*    Without `force`: keeps the `capacity` most recently touched and deletes
+	*    the rest, oldest first.
 	*
 	* @returns Number of styles evicted.
 	*/
 	gc(options) {
 		flushStyles();
 		if (typeof document === "undefined") return 0;
-		if (this.pendingGCHandle != null) {
-			if (typeof cancelIdleCallback !== "undefined") cancelIdleCallback(this.pendingGCHandle);
-			this.pendingGCHandle = null;
-		}
+		this.cancelPendingGC?.();
+		this.cancelPendingGC = null;
 		const root = options?.root || document;
-		const force = options?.force ?? false;
+		const force = options?.force;
 		const registry = this.sheetManager.getRegistry(root);
 		const capacity = this.config.gc?.capacity ?? 1e3;
-		if (!force) {
-			let activeCount = 0;
-			for (const refCount of registry.refCounts.values()) if (refCount > 0) activeCount++;
-			if (registry.usageMap.size - activeCount <= capacity) return 0;
-		}
-		const liveClasses = /* @__PURE__ */ new Set();
-		for (const el of root.querySelectorAll("[class]")) for (const token of el.classList) if (this.classRegex.test(token)) liveClasses.add(token);
-		let swept = 0;
-		if (force) for (const [className] of registry.usageMap) {
-			if (liveClasses.has(className)) continue;
-			if ((registry.refCounts.get(className) ?? 0) > 0) continue;
-			registry.usageMap.delete(className);
-			swept++;
-		}
-		else {
-			const unused = [];
-			for (const [className, usage] of registry.usageMap) {
-				if (liveClasses.has(className)) continue;
-				if ((registry.refCounts.get(className) ?? 0) > 0) continue;
-				unused.push({
-					className,
-					lastTouchedAt: usage.lastTouchedAt
-				});
-			}
-			if (unused.length > capacity) {
-				unused.sort((a, b) => a.lastTouchedAt - b.lastTouchedAt);
-				const toEvict = unused.length - capacity;
-				for (let i = 0; i < toEvict; i++) {
-					registry.usageMap.delete(unused[i].className);
-					swept++;
-				}
-			}
-		}
-		if (swept > 0) this.sheetManager.forceCleanup(registry);
-		return swept;
+		if (!force && registry.rules.size <= capacity) return 0;
+		const unused = this.collectUnused(registry, root);
+		let doomed;
+		if (force) doomed = unused;
+		else if (unused.length > capacity) doomed = unused.slice(capacity);
+		else return 0;
+		if (doomed.length === 0) return 0;
+		return this.sheetManager.deleteClasses(registry, doomed);
 	}
 	/**
 	* Destroy all resources for a root
@@ -7435,9 +6926,9 @@ var StyleInjector = class {
 		flushStyles();
 		const targetRoot = root || document;
 		this.sheetManager.cleanup(targetRoot);
-		if (this.pendingGCHandle != null && !this.sheetManager.hasActiveRoots()) {
-			if (typeof cancelIdleCallback !== "undefined") cancelIdleCallback(this.pendingGCHandle);
-			this.pendingGCHandle = null;
+		if (this.cancelPendingGC && !this.sheetManager.hasActiveRoots()) {
+			this.cancelPendingGC();
+			this.cancelPendingGC = null;
 		}
 	}
 };
@@ -12208,7 +11699,7 @@ const DEFAULT_PROPERTIES = {
 	},
 	"#current": {
 		inherits: true,
-		initialValue: "transparent"
+		initialValue: "currentcolor"
 	},
 	"#white": {
 		inherits: true,
@@ -12758,10 +12249,7 @@ function configure(config = {}) {
 		const tokenKeys = new Set(Object.keys(mergedConfigTokens));
 		for (const key of Object.keys(mergedReplaceTokens)) if (tokenKeys.has(key)) warnOnce(`token-conflict-${key}`, `[Tasty] Token "${key}" is defined in both \`tokens\` and \`replaceTokens\`. \`replaceTokens\` performs parse-time substitution, so the \`tokens\` CSS custom property will be injected but never used by Tasty styles. Remove it from one of the two.`);
 	}
-	if (config.colorSpace) {
-		setColorSpace(config.colorSpace);
-		getGlobalParser().clearCache();
-	}
+	if (config.colorSpace) warnOnce("colorSpace-deprecated", "[Tasty] configure({ colorSpace }) no longer has any effect and will be removed in the next major. Colors are emitted as authored, and opacity is applied with relative color syntax, which reads a color's channels in the browser. To address channels yourself, write `oklch(from var(--name-color) l c h)` against the token.");
 	if (Object.keys(mergedStates).length > 0) setGlobalPredefinedStates(mergedStates);
 	const parser = getGlobalParser();
 	if (config.parserCacheSize !== void 0) parser.updateOptions({ cacheSize: config.parserCacheSize });
@@ -12873,7 +12361,6 @@ function resetConfig() {
 	resetStyleChunks();
 	resetPropHandlers();
 	resetBaseStyleProps();
-	resetColorSpace();
 	clearPipelineCache();
 	emittedWarnings.clear();
 	resetStyleWarnings();
@@ -12881,6 +12368,6 @@ function resetConfig() {
 	delete storage[GLOBAL_INJECTOR_KEY];
 }
 //#endregion
-export { SheetManager as $, colorInitialValueToComponents as $t, FLOW_STYLES as A, STYLE_TO_CHUNK as At, createStateParserContext as B, getGlobalParser as Bt, BASE_STYLES as C, APPEARANCE_CHUNK_STYLES as Ct, COLOR_STYLES as D, FONT_CHUNK_STYLES as Dt, BLOCK_STYLES as E, DISPLAY_CHUNK_STYLES as Et, hasPipelineCacheEntry as F, registerFunctionPolyfill as Ft, StyleInjector as G, stringifyStyles as Gt, extractPredefinedStateRefs as H, normalizeColorTokenValue as Ht, isSelector as I, registerLocalFunctionPolyfills as It, hasLocalCounterStyle as J, okhslFunction as Jt, extractLocalCounterStyle as K, okhstFunction as Kt, renderStyles as L, CUSTOM_UNITS as Lt, OUTER_STYLES as M, formatFunctionRule as Mt, POSITION_STYLES as N, hasLocalFunctions as Nt, CONTAINER_STYLES as O, LAYOUT_CHUNK_STYLES as Ot, TEXT_STYLES as P, parseFunctionName as Pt, hasLocalFontFace as Q, StyleParser as Qt, parseStateKey as R, DIRECTIONS as Rt, baseStylePropsRegistry as S, propHandlerRegistry as St, BLOCK_OUTER_STYLES as T, DIMENSION_CHUNK_STYLES as Tt, getGlobalPredefinedStates as U, parseColor as Ut, extractLocalPredefinedStates as V, getGlobalPredefinedTokens as Vt, setGlobalPredefinedStates as W, parseStyle as Wt, fontFaceContentHash as X, createColorFunc as Xt, extractLocalFontFace as Y, okhslPlugin as Yt, formatFontFaceRule as Z, isDevEnv as Zt, isFunctionsPolyfillEnabled as _, hashString as _t, getGlobalCounterStyles as a, resolveFunctionColor as an, closeBatchWindow as at, resetConfig as b, hasLocalProperties as bt, getGlobalInjector as c, getRgbValuesFromRgbaString as cn, openBatchWindow as ct, getGlobalStyles as d, strToRgb as dn, DEFAULT_ZERO_NAME_PREFIX as dt, convertColorChainToComponentChain as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, normalizeDslName as fn, makeClassName as ft, isConfigLocked as g, validateNamePrefix as gt, hasStylesGenerated as h, tastyClassRegex as ht, getGlobalConfigTokens as i, overrideColorAlpha as in, PropertyTypeResolver as it, INNER_STYLES as j, extractLocalFunctions as jt, DIMENSION_STYLES as k, POSITION_CHUNK_STYLES as kt, getGlobalKeyframes as l, hexToRgb as ln, resetStyleBatch as lt, hasGlobalRecipes as m, makeKeyframeName as mt, getConfig as n, getColorSpaceSuffix as nn, styleHandlers as nt, getGlobalFontFaces as o, Lru as on, flushStyles as ot, hasGlobalKeyframes as p, makeCounterStyleName as pt, formatCounterStyleRule as q, okhstPlugin as qt, getEffectiveProperties as r, getComponentPropertySyntax as rn, createStyle as rt, getGlobalFunctions as s, getNamedColorHex as sn, hasPendingStyleWrites as st, configure as t, getColorSpaceComponents as tn, defineHandler as tt, getGlobalRecipes as u, hslToRgbValues as un, DEFAULT_NAME_PREFIX as ut, isTestEnvironment as v, extractLocalProperties as vt, BLOCK_INNER_STYLES as w, CHUNK_NAMES as wt, generateTypographyTokens as x, parsePropertyToken as xt, markStylesGenerated as y, getEffectiveDefinition as yt, camelToKebab as z, filterMods as zt };
+export { SheetManager as $, StyleParser as $t, FLOW_STYLES as A, STYLE_TO_CHUNK as At, createStateParserContext as B, getGlobalParseFunctions as Bt, BASE_STYLES as C, APPEARANCE_CHUNK_STYLES as Ct, COLOR_STYLES as D, FONT_CHUNK_STYLES as Dt, BLOCK_STYLES as E, DISPLAY_CHUNK_STYLES as Et, hasPipelineCacheEntry as F, registerFunctionPolyfill as Ft, StyleInjector as G, parseStyle as Gt, extractPredefinedStateRefs as H, getGlobalPredefinedTokens as Ht, isSelector as I, registerLocalFunctionPolyfills as It, hasLocalCounterStyle as J, okhstPlugin as Jt, extractLocalCounterStyle as K, stringifyStyles as Kt, renderStyles as L, CUSTOM_UNITS as Lt, OUTER_STYLES as M, formatFunctionRule as Mt, POSITION_STYLES as N, hasLocalFunctions as Nt, CONTAINER_STYLES as O, LAYOUT_CHUNK_STYLES as Ot, TEXT_STYLES as P, parseFunctionName as Pt, hasLocalFontFace as Q, isDevEnv as Qt, parseStateKey as R, DIRECTIONS as Rt, baseStylePropsRegistry as S, propHandlerRegistry as St, BLOCK_OUTER_STYLES as T, DIMENSION_CHUNK_STYLES as Tt, getGlobalPredefinedStates as U, normalizeColorTokenValue as Ut, extractLocalPredefinedStates as V, getGlobalParser as Vt, setGlobalPredefinedStates as W, parseColor as Wt, fontFaceContentHash as X, okhslPlugin as Xt, extractLocalFontFace as Y, okhslFunction as Yt, formatFontFaceRule as Z, createColorFunc as Zt, isFunctionsPolyfillEnabled as _, hashString as _t, getGlobalCounterStyles as a, hslToRgbValues as an, closeBatchWindow as at, resetConfig as b, hasLocalProperties as bt, getGlobalInjector as c, openBatchWindow as ct, getGlobalStyles as d, DEFAULT_ZERO_NAME_PREFIX as dt, Lru as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, makeClassName as ft, isConfigLocked as g, validateNamePrefix as gt, hasStylesGenerated as h, tastyClassRegex as ht, getGlobalConfigTokens as i, hexToRgb as in, PropertyTypeResolver as it, INNER_STYLES as j, extractLocalFunctions as jt, DIMENSION_STYLES as k, POSITION_CHUNK_STYLES as kt, getGlobalKeyframes as l, resetStyleBatch as lt, hasGlobalRecipes as m, makeKeyframeName as mt, getConfig as n, getNamedColorHex as nn, styleHandlers as nt, getGlobalFontFaces as o, strToRgb as on, flushStyles as ot, hasGlobalKeyframes as p, makeCounterStyleName as pt, formatCounterStyleRule as q, okhstFunction as qt, getEffectiveProperties as r, getRgbValuesFromRgbaString as rn, createStyle as rt, getGlobalFunctions as s, normalizeDslName as sn, hasPendingStyleWrites as st, configure as t, overrideColorAlpha as tn, defineHandler as tt, getGlobalRecipes as u, DEFAULT_NAME_PREFIX as ut, isTestEnvironment as v, extractLocalProperties as vt, BLOCK_INNER_STYLES as w, CHUNK_NAMES as wt, generateTypographyTokens as x, parsePropertyToken as xt, markStylesGenerated as y, getEffectiveDefinition as yt, camelToKebab as z, filterMods as zt };
 
-//# sourceMappingURL=config-BrDt11hO.js.map
+//# sourceMappingURL=config-DsqqkmUs.js.map