@tenphi/tasty 3.1.0 → 3.3.0

package/dist/{config-CwQ-fAsp.js → config-zkrtb424.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 = () => ({
@@ -1644,7 +976,7 @@ function classify(raw, opts, recurse) {
 	}
 	if (token === "#current") return {
 		bucket: 0,
-		processed: "currentcolor"
+		processed: "var(--current-color)"
 	};
 	const currentAlphaMatch = token.match(/^#current\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
 	if (currentAlphaMatch) return {
@@ -1878,6 +1210,113 @@ function classify(raw, opts, recurse) {
 	};
 }
 //#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/parser/tokenizer.ts
 const isWhitespace = (ch) => ch === " " || ch === "\n" || ch === "	" || ch === "\r" || ch === "\f";
 function scan(src, cb) {
@@ -2072,6 +1511,116 @@ function isDevEnv() {
 	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 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
 const clamp = (value, min, max) => Math.max(Math.min(value, max), min);
 /**
@@ -2089,7 +1638,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 +1679,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 +1817,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 +2022,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 +2789,6 @@ function getEffectiveDefinition(token, userDefinition) {
 	if (!parsed.isValid) return {
 		cssName: "",
 		definition: userDefinition,
-		isColor: false,
 		isValid: false,
 		error: parsed.error
 	};
@@ -3235,13 +2799,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
 	};
 }
@@ -3396,31 +2958,242 @@ function makeKeyframeName(prefix, suffix) {
 	return `${prefix}k${suffix}`;
 }
 /**
-* Build a counter-style name: `${prefix}c${suffix}`.
-* The `c` discriminator keeps counter-style names visually distinct
-* from class names sharing the same prefix.
+* Build a counter-style name: `${prefix}c${suffix}`.
+* The `c` discriminator keeps counter-style names visually distinct
+* from class names sharing the same prefix.
+*/
+function makeCounterStyleName(prefix, suffix) {
+	return `${prefix}c${suffix}`;
+}
+/** Escape a string for safe inclusion in a regex literal. */
+function escapeRegex(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/**
+* Regex matching any tasty class for the given prefix.
+* Used by the runtime GC's DOM scan and class-allocation bookkeeping.
+*/
+function tastyClassRegex(prefix) {
+	return new RegExp(`^${escapeRegex(prefix)}[a-z0-9]+$`);
+}
+/**
+* Global regex extracting tasty class names from RSC-inlined CSS.
+* Looks for the doubled-specificity pattern `.cls.cls` that
+* `formatRules()` always emits, which makes extraction reliable.
+*/
+function rscClassRegexGlobal(prefix) {
+	return new RegExp(`\\.(${escapeRegex(prefix)}[a-z0-9]+)\\.\\1`, "g");
+}
+//#endregion
+//#region src/utils/warnings.ts
+const PREFIX = "[Tasty]";
+function warn(...args) {
+	console.warn(PREFIX, ...args);
+}
+//#endregion
+//#region src/injector/batch.ts
+/**
+* Deferred CSSOM writes ("batched injection").
+*
+* Every `insertRule()` on a live stylesheet invalidates style for the sheet's
+* scope, so Blink recalculates style the next time anything reads layout or
+* computed style. When components inject during React's render phase and other
+* components read layout in the same pass, the two interleave:
+*
+*   inject -> read (forced recalc) -> inject -> read (forced recalc) -> ...
+*
+* Batching moves every sheet write out from between those reads. Writes are
+* queued in FIFO order and drained in one go, so the tree is invalidated once
+* per flush instead of once per component.
+*
+* ## Ordering
+*
+* A single queue holds *all* writes — component rules, global rules, keyframes,
+* `@property`, `@font-face`, `@counter-style`, `@function` and raw CSS. Draining
+* it in insertion order keeps the sheet byte-identical to unbatched output,
+* which matters because equal-specificity rules resolve by document order.
+*
+* ## Batch windows — why queuing is safe
+*
+* Deferring a write past React's layout phase would let a `useLayoutEffect`
+* measure an element whose rules are not in the sheet yet, reading the unstyled
+* box. `<TastyBatchProvider>` closes that hole by opening a *window* during its
+* render and closing it — flushing — in its `useInsertionEffect`, which React
+* runs in the mutation phase, before any layout effect:
+*
+*   provider renders          -> window OPEN
+*     children render         -> injections queued
+*   provider insertionEffect  -> FLUSH, window CLOSED
+*   layout effects run        -> rules are in the sheet
+*
+* So in the default (`batchInjection: true`) mode a write is only ever queued
+* inside a commit whose flush is already guaranteed by that same commit. Every
+* injection outside a window — a deep update the provider did not re-render
+* for, a `useLayoutEffect` that injects, an event handler, an async callback —
+* is written straight through, exactly as with batching off.
+*
+* `batchInjection: 'always'` opts out of the gate and queues unconditionally.
+* That wins on more commits, at the cost of the measurement hazard above.
+*
+* ## Flush points (earliest wins)
+*
+* 1. `<TastyBatchProvider>`'s `useInsertionEffect` — closes the window.
+* 2. A microtask — a backstop for a render that was aborted or suspended and
+*    therefore never reached its insertion effect. An aborted render mounts
+*    nothing, so nothing can measure what it queued. Microtasks also always
+*    drain before paint, so styles are never visually missing.
+* 3. `flushStyles()` — explicit, and called internally by every injector read
+*    API (`getCSSText`, `cleanup`, `gc`, `destroy`, ...).
+*/
+/**
+* FIFO of pending writes. Drained with a moving `head` index rather than
+* `shift()` so a large batch stays O(n) instead of O(n²).
+*/
+let queue = [];
+let head = 0;
+let microtaskScheduled = false;
+let flushing = false;
+/**
+* Whether a `<TastyBatchProvider>` has rendered in the current commit and will
+* therefore flush in its insertion effect, making it safe to queue a write.
+*
+* A flag rather than a depth count, because renders and insertion effects do
+* not pair up one-to-one. StrictMode double-invokes render but runs the
+* insertion effect once, so a counter ends the commit stuck above zero — and a
+* window that stays open past its commit turns the next provider-less commit
+* into `'always'` mode behind the user's back, which is exactly the measurement
+* hazard `true` exists to avoid.
+*
+* Clearing on the first close is safe with nested or sibling providers: React
+* finishes every render in a commit before running any insertion effect, so once
+* one closes, no further render-phase injection can arrive in that commit.
+*/
+let windowOpen = false;
+/** Whether any window has ever been opened, i.e. a provider is in the tree. */
+let everOpened = false;
+/** Dev-only: warn at most once that batching is on with no provider mounted. */
+let warnedNoProvider = false;
+/**
+* Queue a sheet write.
+*
+* Returns a handle whose `cancel()` drops the write if the caller disposes
+* before the flush. The handle is intentionally tiny — one is allocated per
+* injected class, on the cache-miss path only.
+*/
+function enqueueStyleWrite(run) {
+	if (flushing) {
+		run();
+		return {
+			run,
+			cancelled: false,
+			done: true
+		};
+	}
+	const entry = {
+		run,
+		cancelled: false,
+		done: false
+	};
+	queue.push(entry);
+	scheduleMicrotaskFlush();
+	return entry;
+}
+/** Whether any write is still waiting to hit a stylesheet. */
+function hasPendingStyleWrites() {
+	return head < queue.length;
+}
+/**
+* Open a batch window. Called from `<TastyBatchProvider>`'s render, so every
+* descendant injection in this commit is covered by the provider's insertion
+* effect.
+*
+* Called during render on purpose: the window must be open before children
+* render. It is idempotent — so StrictMode's double render costs nothing — and
+* carries no other side effect. A render that is thrown away is recovered by the
+* microtask backstop.
+*
+* A no-op without a `document`. On the server there is no sheet to batch
+* against, and `useInsertionEffect` never runs, so nothing would ever close a
+* window this opened. Skipping it keeps the provider inert during SSR and RSC
+* instead of merely harmless.
+*/
+function openBatchWindow() {
+	if (typeof document === "undefined") return;
+	windowOpen = true;
+	everOpened = true;
+}
+/**
+* Close a batch window and flush. Called from the provider's
+* `useInsertionEffect`, i.e. after every render in the commit and before any
+* layout effect.
+*/
+function closeBatchWindow() {
+	windowOpen = false;
+	flushStyles();
+}
+/** Whether a batch window is currently open. */
+function isBatchWindowOpen() {
+	return windowOpen;
+}
+function scheduleMicrotaskFlush() {
+	if (microtaskScheduled || flushing) return;
+	microtaskScheduled = true;
+	queueMicrotask(() => {
+		microtaskScheduled = false;
+		windowOpen = false;
+		flushStyles();
+	});
+}
+/**
+* Drain every pending sheet write, in insertion order.
+*
+* Safe to call when the queue is empty (the common case, so the guard comes
+* first) and safe to call re-entrantly: a nested `flushStyles()` is a no-op,
+* and work a draining write triggers is written in place by
+* `enqueueStyleWrite` rather than queued behind the rest of the batch.
 */
-function makeCounterStyleName(prefix, suffix) {
-	return `${prefix}c${suffix}`;
-}
-/** Escape a string for safe inclusion in a regex literal. */
-function escapeRegex(str) {
-	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function flushStyles() {
+	if (head >= queue.length) return;
+	if (flushing) return;
+	flushing = true;
+	try {
+		while (head < queue.length) {
+			const entry = queue[head++];
+			if (entry.cancelled) {
+				entry.done = true;
+				continue;
+			}
+			entry.run();
+			entry.done = true;
+		}
+	} finally {
+		queue = [];
+		head = 0;
+		flushing = false;
+	}
 }
 /**
-* Regex matching any tasty class for the given prefix.
-* Used by the runtime GC's DOM scan and class-allocation bookkeeping.
+* Dev-only: `batchInjection: true` batches nothing unless a window opens, and no
+* window has ever opened, so no provider is in the tree. Called by the injector
+* the first time it declines to batch.
 */
-function tastyClassRegex(prefix) {
-	return new RegExp(`^${escapeRegex(prefix)}[a-z0-9]+$`);
+function warnBatchProviderMissing() {
+	if (everOpened || warnedNoProvider || !isDevEnv()) return;
+	warnedNoProvider = true;
+	warn("[Tasty] batchInjection needs <TastyBatchProvider> mounted to batch.");
 }
 /**
-* Global regex extracting tasty class names from RSC-inlined CSS.
-* Looks for the doubled-specificity pattern `.cls.cls` that
-* `formatRules()` always emits, which makes extraction reliable.
+* Drop every pending write without applying it. Test helper — production code
+* should call `flushStyles()` instead.
 */
-function rscClassRegexGlobal(prefix) {
-	return new RegExp(`\\.(${escapeRegex(prefix)}[a-z0-9]+)\\.\\1`, "g");
+function resetStyleBatch() {
+	queue = [];
+	head = 0;
+	microtaskScheduled = false;
+	flushing = false;
+	windowOpen = false;
+	everOpened = false;
+	warnedNoProvider = false;
 }
 //#endregion
 //#region src/properties/property-type-resolver.ts
@@ -3432,10 +3205,6 @@ function rscClassRegexGlobal(prefix) {
 */
 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();
@@ -3448,15 +3217,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);
@@ -3536,116 +3296,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.
@@ -3760,21 +3410,18 @@ 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`. Covers both spellings: the
+* variable (a self-reference) and the keyword (a second resolution).
+*/
+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"];
@@ -3804,31 +3451,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 };
@@ -4777,12 +4400,6 @@ scrollMarginStyle.__lookupStyles = [
 	"scrollMarginInline"
 ];
 //#endregion
-//#region src/utils/warnings.ts
-const PREFIX = "[Tasty]";
-function warn(...args) {
-	console.warn(PREFIX, ...args);
-}
-//#endregion
 //#region src/styles/scrollbar.ts
 /**
 * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,
@@ -5455,6 +5072,8 @@ var SheetManager = class {
 				propertyTypeResolver: new PropertyTypeResolver(),
 				usageMap: /* @__PURE__ */ new Map(),
 				touchCount: 0,
+				touchTick: -1,
+				touchedTick: /* @__PURE__ */ new Set(),
 				serverClassSyncIndex: 0,
 				rscStylesScanned: false,
 				injectionMode: this.detectInjectionMode(root)
@@ -6365,6 +5984,16 @@ function formatCounterStyleRule(name, descriptors) {
 //#endregion
 //#region src/injector/injector.ts
 /**
+* 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.
+*/
+const EMPTY_KEYFRAMES_INFO = {
+	name: "",
+	ruleIndex: -3,
+	sheetIndex: -3
+};
+/**
 * Extract class names from `<style data-tasty-rsc>` tags.
 * The doubled-specificity pattern `.tXXX.tXXX` makes extraction reliable.
 */
@@ -6425,6 +6054,56 @@ var StyleInjector = class {
 	get _sheetManager() {
 		return this.sheetManager;
 	}
+	/**
+	* Whether sheet writes should be queued instead of applied immediately.
+	*
+	* Only ever true on the client: SSR collects CSS as text and the RSC path
+	* returns it as strings, so neither has a live sheet to batch writes against.
+	*
+	* In the default `true` mode a write is only queued inside an open batch
+	* window — a commit in which `<TastyBatchProvider>` rendered and will
+	* therefore flush in its insertion effect, before any layout effect can
+	* measure. Everything else falls through to a synchronous write, so enabling
+	* the flag cannot make a `useLayoutEffect` read an unstyled element.
+	* `'always'` drops the gate and accepts that trade for wider coverage.
+	*/
+	get batching() {
+		const mode = this.config.batchInjection;
+		if (!mode || typeof document === "undefined") return false;
+		if (mode === "always") return true;
+		if (isBatchWindowOpen()) return true;
+		warnBatchProviderMissing();
+		return false;
+	}
+	/**
+	* Apply a sheet write now, or queue it when batching is on.
+	* Returns the queue handle when deferred, so the caller can cancel it if it
+	* disposes before the flush.
+	*/
+	writeSheet(task) {
+		if (this.batching) return enqueueStyleWrite(task);
+		task();
+		return null;
+	}
+	/**
+	* Insert a global (non-class) rule, honouring batching.
+	*
+	* `onApplied` records the caller's dedupe bookkeeping. When the write is
+	* queued it runs eagerly, so a repeat call before the flush bails out instead
+	* of queueing the same rule twice — the same reasoning as
+	* `insertPropertyRule`'s eager marking. When written synchronously it runs
+	* only on success, preserving the existing retry-on-failure behaviour.
+	*/
+	writeGlobalRule(registry, rules, key, root, onApplied) {
+		if (this.batching) {
+			onApplied?.();
+			enqueueStyleWrite(() => {
+				this.sheetManager.insertGlobalRule(registry, rules, key, root);
+			});
+			return;
+		}
+		if (this.sheetManager.insertGlobalRule(registry, rules, key, root)) onApplied?.();
+	}
 	constructor(config = {}) {
 		if (config.namePrefix !== void 0) validateNamePrefix(config.namePrefix);
 		this.config = config;
@@ -6502,12 +6181,18 @@ var StyleInjector = class {
 		};
 		const cacheKey = options?.cacheKey;
 		let className;
-		let isPreAllocated = false;
 		if (cacheKey && registry.cacheKeyToClassName.has(cacheKey)) {
 			className = registry.cacheKeyToClassName.get(cacheKey);
 			const existingRuleInfo = registry.rules.get(className);
-			isPreAllocated = existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1;
-			if (!isPreAllocated) {
+			if (existingRuleInfo.ruleIndex === -3) {
+				registry.refCounts.set(className, (registry.refCounts.get(className) || 0) + 1);
+				if (registry.metrics) registry.metrics.hits++;
+				return {
+					className,
+					dispose: () => this.dispose(className, registry)
+				};
+			}
+			if (!(existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1)) {
 				const currentRefCount = registry.refCounts.get(className) || 0;
 				registry.refCounts.set(className, currentRefCount + 1);
 				if (registry.metrics) registry.metrics.hits++;
@@ -6548,39 +6233,70 @@ var StyleInjector = class {
 				rootPrefix: void 0
 			};
 		});
-		if (this.config.autoPropertyTypes !== false) {
-			const resolver = registry.propertyTypeResolver;
-			const defined = registry.injectedProperties;
-			for (const rule of rulesToInsert) {
-				if (!rule.declarations) continue;
-				resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
-					this.property(name, {
-						syntax,
-						inherits: true,
-						initialValue,
-						root
+		const applySheetWrite = () => {
+			if (this.config.autoPropertyTypes !== false) {
+				const resolver = registry.propertyTypeResolver;
+				const defined = registry.injectedProperties;
+				for (const rule of rulesToInsert) {
+					if (!rule.declarations) continue;
+					resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
+						this.property(name, {
+							syntax,
+							inherits: true,
+							initialValue,
+							root
+						});
 					});
-				});
+				}
 			}
-		}
-		const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
-		if (!ruleInfo) {
-			if (registry.metrics) registry.metrics.misses++;
+			const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
+			if (!ruleInfo) {
+				if (registry.metrics) registry.metrics.misses++;
+				return null;
+			}
+			registry.rules.set(className, ruleInfo);
+			if (cacheKey) registry.cacheKeyToClassName.set(cacheKey, className);
+			if (registry.metrics) {
+				registry.metrics.totalInsertions++;
+				registry.metrics.misses++;
+			}
+			return ruleInfo;
+		};
+		if (this.batching) {
+			registry.rules.set(className, {
+				className,
+				ruleIndex: -3,
+				sheetIndex: -3
+			});
+			if (cacheKey) registry.cacheKeyToClassName.set(cacheKey, className);
+			registry.refCounts.set(className, 1);
+			const queued = enqueueStyleWrite(() => {
+				if (applySheetWrite()) return;
+				registry.rules.set(className, {
+					className,
+					ruleIndex: -1,
+					sheetIndex: -1
+				});
+			});
 			return {
 				className,
-				dispose: () => {}
+				dispose: () => {
+					if (!queued.done && registry.refCounts.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);
+						return;
+					}
+					this.dispose(className, registry);
+				}
 			};
 		}
+		if (!applySheetWrite()) return {
+			className,
+			dispose: () => {}
+		};
 		registry.refCounts.set(className, 1);
-		if (isPreAllocated) registry.rules.set(className, ruleInfo);
-		else {
-			registry.rules.set(className, ruleInfo);
-			if (cacheKey) registry.cacheKeyToClassName.set(cacheKey, className);
-		}
-		if (registry.metrics) {
-			registry.metrics.totalInsertions++;
-			registry.metrics.misses++;
-		}
 		return {
 			className,
 			dispose: () => this.dispose(className, registry)
@@ -6595,24 +6311,41 @@ var StyleInjector = class {
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		if (!rules || rules.length === 0) return { dispose: () => {} };
-		if (this.config.autoPropertyTypes !== false) {
-			const resolver = registry.propertyTypeResolver;
-			const defined = registry.injectedProperties;
-			for (const rule of rules) {
-				if (!rule.declarations) continue;
-				resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
-					this.property(name, {
-						syntax,
-						inherits: true,
-						initialValue,
-						root
+		const key = `global:${this.globalRuleCounter++}`;
+		const applyWrite = () => {
+			if (this.config.autoPropertyTypes !== false) {
+				const resolver = registry.propertyTypeResolver;
+				const defined = registry.injectedProperties;
+				for (const rule of rules) {
+					if (!rule.declarations) continue;
+					resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
+						this.property(name, {
+							syntax,
+							inherits: true,
+							initialValue,
+							root
+						});
 					});
-				});
+				}
 			}
+			const inserted = this.sheetManager.insertGlobalRule(registry, rules, key, root);
+			if (registry.metrics) registry.metrics.totalInsertions++;
+			return inserted;
+		};
+		if (this.batching) {
+			let info = null;
+			const queued = enqueueStyleWrite(() => {
+				info = applyWrite();
+			});
+			return { dispose: () => {
+				if (!queued.done) {
+					queued.cancelled = true;
+					return;
+				}
+				if (info) this.sheetManager.deleteGlobalRule(registry, key);
+			} };
 		}
-		const key = `global:${this.globalRuleCounter++}`;
-		const info = this.sheetManager.insertGlobalRule(registry, rules, key, root);
-		if (registry.metrics) registry.metrics.totalInsertions++;
+		const info = applyWrite();
 		return { dispose: () => {
 			if (info) this.sheetManager.deleteGlobalRule(registry, key);
 		} };
@@ -6624,12 +6357,24 @@ var StyleInjector = class {
 	*/
 	injectRawCSS(css, options) {
 		const root = options?.root || document;
-		return this.sheetManager.injectRawCSS(css, root);
+		if (!this.batching) return this.sheetManager.injectRawCSS(css, root);
+		let result = null;
+		const queued = enqueueStyleWrite(() => {
+			result = this.sheetManager.injectRawCSS(css, root);
+		});
+		return { dispose: () => {
+			if (!queued.done) {
+				queued.cancelled = true;
+				return;
+			}
+			result?.dispose();
+		} };
 	}
 	/**
 	* Get raw CSS text for SSR
 	*/
 	getRawCSSText(options) {
+		flushStyles();
 		const root = options?.root || document;
 		return this.sheetManager.getRawCSSText(root);
 	}
@@ -6666,6 +6411,7 @@ var StyleInjector = class {
 	* Force bulk cleanup of unused styles
 	*/
 	cleanup(root) {
+		flushStyles();
 		const registry = this.sheetManager.getRegistry(root || document);
 		this.sheetManager.forceCleanup(registry);
 	}
@@ -6673,6 +6419,7 @@ var StyleInjector = class {
 	* Get CSS text from all sheets (for SSR)
 	*/
 	getCSSText(options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		return this.sheetManager.getCSSText(registry);
@@ -6681,6 +6428,7 @@ var StyleInjector = class {
 	* Get CSS only for the provided tasty classNames (e.g., ["t0","t3"])
 	*/
 	getCSSTextForClasses(classNames, options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		const cssChunks = [];
@@ -6705,6 +6453,7 @@ var StyleInjector = class {
 	* Get cache performance metrics
 	*/
 	getMetrics(options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		return this.sheetManager.getMetrics(registry);
@@ -6748,15 +6497,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.
@@ -6784,7 +6524,7 @@ var StyleInjector = class {
 			declarations
 		};
 		registry.injectedProperties.set(cssName, normalizePropertyDefinition(definition));
-		this.sheetManager.insertGlobalRule(registry, [rule], `property:${cacheKey}`, root);
+		this.writeGlobalRule(registry, [rule], `property:${cacheKey}`, root);
 	}
 	/**
 	* Check whether a given @property name was already injected by this injector.
@@ -6795,6 +6535,7 @@ var StyleInjector = class {
 	* - `--name` → checks `--name` (legacy format)
 	*/
 	isPropertyDefined(name, options) {
+		flushStyles();
 		const root = options?.root || document;
 		const registry = this.sheetManager.getRegistry(root);
 		const effectiveResult = getEffectiveDefinition(name, {});
@@ -6816,7 +6557,9 @@ var StyleInjector = class {
 			selector: "@font-face",
 			declarations: formatFontFaceDeclarations(family, descriptors)
 		};
-		if (this.sheetManager.insertGlobalRule(registry, [rule], `fontface:${hash}`, root)) registry.injectedFontFaces.add(hash);
+		this.writeGlobalRule(registry, [rule], `fontface:${hash}`, root, () => {
+			registry.injectedFontFaces.add(hash);
+		});
 	}
 	/**
 	* Inject a CSS @counter-style rule.
@@ -6834,13 +6577,17 @@ var StyleInjector = class {
 		const existingIsStrong = registry.injectedCounterStyles.get(name);
 		if (existingIsStrong !== void 0) {
 			if (isWeak || existingIsStrong === true) return;
-			this.sheetManager.deleteGlobalRule(registry, `counterstyle:${name}`);
+			this.writeSheet(() => {
+				this.sheetManager.deleteGlobalRule(registry, `counterstyle:${name}`);
+			});
 		}
 		const rule = {
 			selector: `@counter-style ${name}`,
 			declarations: formatCounterStyleDeclarations(descriptors)
 		};
-		if (this.sheetManager.insertGlobalRule(registry, [rule], `counterstyle:${name}`, root)) registry.injectedCounterStyles.set(name, !isWeak);
+		this.writeGlobalRule(registry, [rule], `counterstyle:${name}`, root, () => {
+			registry.injectedCounterStyles.set(name, !isWeak);
+		});
 	}
 	/**
 	* Inject a CSS @function rule (custom function).
@@ -6859,13 +6606,17 @@ var StyleInjector = class {
 		const existingIsStrong = registry.injectedFunctions.get(cssName);
 		if (existingIsStrong !== void 0) {
 			if (isWeak || existingIsStrong === true) return;
-			this.sheetManager.deleteGlobalRule(registry, `function:${cssName}`);
+			this.writeSheet(() => {
+				this.sheetManager.deleteGlobalRule(registry, `function:${cssName}`);
+			});
 		}
 		const rule = {
 			selector: formatFunctionPrelude(name, definition.args, definition.returns),
 			declarations: formatFunctionDeclarations(definition)
 		};
-		if (this.sheetManager.insertGlobalRule(registry, [rule], `function:${cssName}`, root)) registry.injectedFunctions.set(cssName, !isWeak);
+		this.writeGlobalRule(registry, [rule], `function:${cssName}`, root, () => {
+			registry.injectedFunctions.set(cssName, !isWeak);
+		});
 	}
 	/**
 	* Inject keyframes and return object with toString() and dispose()
@@ -6903,29 +6654,53 @@ var StyleInjector = class {
 				registry.keyframesNameToContent.set(providedName, contentHash);
 			}
 		} else actualName = makeKeyframeName(this.namePrefix, String(registry.keyframesCounter++));
-		const result = this.sheetManager.insertKeyframes(registry, steps, actualName, root);
-		if (!result) return {
-			toString: () => "",
-			dispose: () => {}
+		const applyWrite = () => {
+			const result = this.sheetManager.insertKeyframes(registry, steps, actualName, root);
+			if (!result) return false;
+			const { info, declarations } = result;
+			if (this.config.autoPropertyTypes !== false && declarations) registry.propertyTypeResolver.scanDeclarations(declarations, (name) => registry.injectedProperties.has(name), (name, syntax, initialValue) => {
+				this.property(name, {
+					syntax,
+					inherits: true,
+					initialValue,
+					root
+				});
+			});
+			const entry = registry.keyframesCache.get(contentHash);
+			if (entry) {
+				entry.info = info;
+				entry.pending = void 0;
+			} else registry.keyframesCache.set(contentHash, {
+				name: actualName,
+				refCount: 1,
+				info
+			});
+			if (registry.metrics) {
+				registry.metrics.totalInsertions++;
+				registry.metrics.misses++;
+			}
+			return true;
 		};
-		const { info, declarations } = result;
-		if (this.config.autoPropertyTypes !== false && declarations) registry.propertyTypeResolver.scanDeclarations(declarations, (name) => registry.injectedProperties.has(name), (name, syntax, initialValue) => {
-			this.property(name, {
-				syntax,
-				inherits: true,
-				initialValue,
-				root
+		if (this.batching) {
+			const entry = {
+				name: actualName,
+				refCount: 1,
+				info: EMPTY_KEYFRAMES_INFO
+			};
+			registry.keyframesCache.set(contentHash, entry);
+			entry.pending = enqueueStyleWrite(() => {
+				if (applyWrite()) return;
+				if (registry.keyframesCache.get(contentHash) === entry) registry.keyframesCache.delete(contentHash);
 			});
-		});
-		registry.keyframesCache.set(contentHash, {
-			name: actualName,
-			refCount: 1,
-			info
-		});
-		if (registry.metrics) {
-			registry.metrics.totalInsertions++;
-			registry.metrics.misses++;
+			return {
+				toString: () => actualName,
+				dispose: () => this.disposeKeyframes(contentHash, registry)
+			};
 		}
+		if (!applyWrite()) return {
+			toString: () => "",
+			dispose: () => {}
+		};
 		return {
 			toString: () => actualName,
 			dispose: () => this.disposeKeyframes(contentHash, registry)
@@ -6939,7 +6714,8 @@ var StyleInjector = class {
 		if (!entry) return;
 		entry.refCount--;
 		if (entry.refCount <= 0) {
-			this.sheetManager.deleteKeyframes(registry, entry.info);
+			if (entry.pending && !entry.pending.done) entry.pending.cancelled = true;
+			else this.sheetManager.deleteKeyframes(registry, entry.info);
 			registry.keyframesCache.delete(contentHash);
 			for (const [name, hash] of registry.keyframesNameToContent.entries()) if (hash === contentHash) {
 				registry.keyframesNameToContent.delete(name);
@@ -6964,6 +6740,11 @@ var StyleInjector = class {
 		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;
@@ -7004,6 +6785,7 @@ var StyleInjector = class {
 	* @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);
@@ -7053,6 +6835,7 @@ var StyleInjector = class {
 	* Destroy all resources for a root
 	*/
 	destroy(root) {
+		flushStyles();
 		const targetRoot = root || document;
 		this.sheetManager.cleanup(targetRoot);
 		if (this.pendingGCHandle != null && !this.sheetManager.hasActiveRoots()) {
@@ -11828,7 +11611,7 @@ const DEFAULT_PROPERTIES = {
 	},
 	"#current": {
 		inherits: true,
-		initialValue: "transparent"
+		initialValue: "currentcolor"
 	},
 	"#white": {
 		inherits: true,
@@ -12378,10 +12161,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 });
@@ -12493,7 +12273,6 @@ function resetConfig() {
 	resetStyleChunks();
 	resetPropHandlers();
 	resetBaseStyleProps();
-	resetColorSpace();
 	clearPipelineCache();
 	emittedWarnings.clear();
 	resetStyleWarnings();
@@ -12501,6 +12280,6 @@ function resetConfig() {
 	delete storage[GLOBAL_INJECTOR_KEY];
 }
 //#endregion
-export { SheetManager as $, overrideColorAlpha as $t, FLOW_STYLES as A, registerFunctionPolyfill as At, createStateParserContext as B, stringifyStyles as Bt, BASE_STYLES as C, LAYOUT_CHUNK_STYLES as Ct, COLOR_STYLES as D, formatFunctionRule as Dt, BLOCK_STYLES as E, extractLocalFunctions as Et, hasPipelineCacheEntry as F, getGlobalParser as Ft, StyleInjector as G, createColorFunc as Gt, extractPredefinedStateRefs as H, okhstPlugin as Ht, isSelector as I, getGlobalPredefinedTokens as It, hasLocalCounterStyle as J, colorInitialValueToComponents as Jt, extractLocalCounterStyle as K, isDevEnv as Kt, renderStyles as L, normalizeColorTokenValue as Lt, OUTER_STYLES as M, CUSTOM_UNITS as Mt, POSITION_STYLES as N, DIRECTIONS as Nt, CONTAINER_STYLES as O, hasLocalFunctions as Ot, TEXT_STYLES as P, filterMods as Pt, hasLocalFontFace as Q, getComponentPropertySyntax as Qt, parseStateKey as R, parseColor as Rt, baseStylePropsRegistry as S, FONT_CHUNK_STYLES as St, BLOCK_OUTER_STYLES as T, STYLE_TO_CHUNK as Tt, getGlobalPredefinedStates as U, okhslFunction as Ut, extractLocalPredefinedStates as V, okhstFunction as Vt, setGlobalPredefinedStates as W, okhslPlugin as Wt, fontFaceContentHash as X, getColorSpaceComponents as Xt, extractLocalFontFace as Y, convertColorChainToComponentChain as Yt, formatFontFaceRule as Z, getColorSpaceSuffix as Zt, isFunctionsPolyfillEnabled as _, propHandlerRegistry as _t, getGlobalCounterStyles as a, hslToRgbValues as an, DEFAULT_NAME_PREFIX as at, resetConfig as b, DIMENSION_CHUNK_STYLES as bt, getGlobalInjector as c, makeCounterStyleName as ct, getGlobalStyles as d, validateNamePrefix as dt, resolveFunctionColor as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, hashString as ft, isConfigLocked as g, parsePropertyToken as gt, hasStylesGenerated as h, hasLocalProperties as ht, getGlobalConfigTokens as i, hexToRgb as in, PropertyTypeResolver as it, INNER_STYLES as j, registerLocalFunctionPolyfills as jt, DIMENSION_STYLES as k, parseFunctionName as kt, getGlobalKeyframes as l, makeKeyframeName as lt, hasGlobalRecipes as m, getEffectiveDefinition as mt, getConfig as n, getNamedColorHex as nn, styleHandlers as nt, getGlobalFontFaces as o, strToRgb as on, DEFAULT_ZERO_NAME_PREFIX as ot, hasGlobalKeyframes as p, extractLocalProperties as pt, formatCounterStyleRule as q, StyleParser as qt, getEffectiveProperties as r, getRgbValuesFromRgbaString as rn, createStyle as rt, getGlobalFunctions as s, normalizeDslName as sn, makeClassName as st, configure as t, Lru as tn, defineHandler as tt, getGlobalRecipes as u, tastyClassRegex as ut, isTestEnvironment as v, APPEARANCE_CHUNK_STYLES as vt, BLOCK_INNER_STYLES as w, POSITION_CHUNK_STYLES as wt, generateTypographyTokens as x, DISPLAY_CHUNK_STYLES as xt, markStylesGenerated as y, CHUNK_NAMES as yt, camelToKebab as z, parseStyle 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-CwQ-fAsp.js.map
+//# sourceMappingURL=config-zkrtb424.js.map