@menapo/vicss 0.0.0-stage → 1.1.0

package/dist/theme-zBcr5DHi.js

@@ -0,0 +1,2460 @@
+import { $ as isPaletteAtom, A as PROPERTIES, B as isCompound, E as compareChains, Et as mergeClassNames, Ft as hash, It as stableStringify, Lt as classes, M as longhandsOf, Mt as styleLiteral, Nt as toRecord, Ot as parseClassName, Rt as merge, V as isRootScope, _t as VicssError, a as modeFlag, bt as compareStrings, dt as isPlainObject, ft as isScaleName, gt as suggestTokens, i as exclusive, it as SCALES, kt as propertyKey, l as printAtoms, m as switchingTokens, mt as resolveReferences, o as modeVar, p as scopedModes, pt as lookupToken, r as classicValue, st as closestNames, ut as didYouMean, vt as malformed, w as canonicalChain, wt as makeClassName, xt as escapeClassName } from "./print-B_mn7wBu.js";
+//#region src/core/location.ts
+/**
+* Offsets to line and column, for diagnostics and source maps. Lines end at
+* `\n` only, as in Vite's code frames and in source-map consumers, so a CRLF
+* file keeps its `\r` as the last column of each line.
+*/
+/** Returns a lookup from a UTF-16 offset to a 1-based line and a 0-based column. */
+function createLocator(code) {
+	const starts = [0];
+	for (let i = code.indexOf("\n"); i !== -1; i = code.indexOf("\n", i + 1)) starts.push(i + 1);
+	return (offset) => {
+		const at = Math.max(0, Math.min(offset, code.length));
+		let lo = 0;
+		let hi = starts.length - 1;
+		while (lo < hi) {
+			const mid = lo + hi + 1 >> 1;
+			if (starts[mid] <= at) lo = mid;
+			else hi = mid - 1;
+		}
+		return {
+			line: lo + 1,
+			column: at - starts[lo]
+		};
+	};
+}
+//#endregion
+//#region src/core/evaluate.ts
+function isOpaque(value) {
+	return isDynamic(value) && value.opaque === true;
+}
+/** An opaque value for `node`: what the lint rules give an import. */
+function opaqueAt(node) {
+	return {
+		__vxSpecial: "dynamic",
+		node,
+		opaque: true
+	};
+}
+/** Objects and arrays an opaque spread or key left without some of their entries. */
+const incomplete = /* @__PURE__ */ new WeakSet();
+/**
+* Whether an opaque spread or computed key left `value`, or any object or
+* array inside it, incomplete. Values the call handler made (a compiled
+* recipe, a marker) are not data: their insides are never searched.
+*/
+function isIncomplete(value, seen = /* @__PURE__ */ new Set()) {
+	if (typeof value !== "object" || value === null || seen.has(value)) return false;
+	if (incomplete.has(value) || isOpaque(value)) return true;
+	const proto = Object.getPrototypeOf(value);
+	if (!Array.isArray(value) && proto !== Object.prototype && proto !== null) return false;
+	seen.add(value);
+	if (isDynamic(value)) {
+		const { choice } = value;
+		return choice !== void 0 && [choice.consequent, choice.alternate].some((v) => isIncomplete(v, seen));
+	}
+	return Object.values(value).some((v) => isIncomplete(v, seen));
+}
+const NOT_HANDLED = Symbol("vicss.notHandled");
+const STATIC_HINT = "Styles must be static. For a value known only at runtime, use a function style: css((color) => ({ color }))";
+function isDynamic(value) {
+	return typeof value === "object" && value !== null && value.__vxSpecial === "dynamic";
+}
+/** Evaluates an expression. Throws VicssError `NOT_STATIC` naming the source that is not static. */
+function evaluate(node, ctx) {
+	switch (node.type) {
+		case "Literal":
+			if ("regex" in node || "bigint" in node) throw notStatic(node, ctx);
+			return node.value;
+		case "TemplateLiteral": {
+			let out = cooked(node.quasis[0]);
+			const dynamic = [];
+			node.expressions.forEach((expression, i) => {
+				const value = evaluate(expression, ctx);
+				if (isDynamic(value)) {
+					dynamic.push(value);
+					return;
+				}
+				if (!isPrimitive(value)) throw notStatic(expression, ctx, "an object inside a string");
+				out += String(value) + cooked(node.quasis[i + 1]);
+			});
+			return dynamic.length > 0 ? dynamicAt(node, ...dynamic) : out;
+		}
+		case "Identifier": return identifier(node, ctx);
+		case "ObjectExpression": {
+			const out = {};
+			for (const property of node.properties) {
+				if (property.type === "SpreadElement") {
+					const value = evaluate(property.argument, ctx);
+					if (isOpaque(value)) {
+						for (const key of Object.keys(out)) out[key] = opaqueAt(property.argument);
+						incomplete.add(out);
+						continue;
+					}
+					if (isDynamic(value)) throw notStatic(property.argument, ctx, "spreads a runtime value");
+					if (value === null || value === void 0) continue;
+					for (const [key, item] of Object.entries(value)) setKey(out, key, item, property, ctx);
+					continue;
+				}
+				if (property.method || property.kind !== "init") throw notStatic(property, ctx, "methods and accessors are not static values");
+				let key;
+				if (property.computed) {
+					const value = evaluate(property.key, ctx);
+					if (isOpaque(value)) {
+						evaluate(property.value, ctx);
+						incomplete.add(out);
+						continue;
+					}
+					key = keyFrom(value, property.key, ctx);
+				} else key = property.key.type === "Identifier" ? property.key.name : String(property.key.value);
+				setKey(out, key, evaluate(property.value, ctx), property, ctx);
+			}
+			return out;
+		}
+		case "ArrayExpression": {
+			const out = [];
+			for (const element of node.elements) if (element === null) out.push(void 0);
+			else if (element.type === "SpreadElement") {
+				const value = evaluate(element.argument, ctx);
+				if (isOpaque(value)) {
+					incomplete.add(out);
+					continue;
+				}
+				if (!Array.isArray(value)) throw notStatic(element.argument, ctx, "spreads a value that is not an array");
+				out.push(...value);
+			} else out.push(evaluate(element, ctx));
+			return out;
+		}
+		case "UnaryExpression": {
+			const { operator } = node;
+			if (operator === "delete" || operator === "~") throw notStatic(node, ctx, `\`${operator}\` is not evaluated`);
+			const value = evaluate(node.argument, ctx);
+			if (isDynamic(value)) return dynamicAt(node, value);
+			if (operator === "!") return !value;
+			if (operator === "typeof") return typeof value;
+			if (operator === "void") return void 0;
+			if (!isPrimitive(value)) throw notStatic(node, ctx, "arithmetic on an object");
+			return operator === "-" ? -Number(value) : Number(value);
+		}
+		case "BinaryExpression": {
+			const { operator } = node;
+			if (!BINARY.has(operator)) throw notStatic(node, ctx, `\`${operator}\` is not evaluated`);
+			const left = evaluate(node.left, ctx);
+			const right = evaluate(node.right, ctx);
+			if (isDynamic(left) || isDynamic(right)) return dynamicAt(node, left, right);
+			const result = binary(operator, left, right);
+			if (result === void 0) throw notStatic(node, ctx, "an operand is an object");
+			return result;
+		}
+		case "LogicalExpression": {
+			const left = evaluate(node.left, ctx);
+			if (isDynamic(left)) {
+				const right = evaluate(node.right, ctx);
+				return choiceAt(node, left, node.operator === "&&" ? {
+					test: node.left,
+					consequent: right,
+					alternate: void 0
+				} : {
+					test: node.left,
+					nullish: node.operator === "??",
+					consequent: left,
+					alternate: right
+				});
+			}
+			switch (node.operator) {
+				case "&&": return left ? evaluate(node.right, ctx) : left;
+				case "||": return left ? left : evaluate(node.right, ctx);
+				default: return left ?? evaluate(node.right, ctx);
+			}
+		}
+		case "ConditionalExpression": {
+			const test = evaluate(node.test, ctx);
+			if (isDynamic(test)) return choiceAt(node, test, {
+				test: node.test,
+				consequent: evaluate(node.consequent, ctx),
+				alternate: evaluate(node.alternate, ctx)
+			});
+			return evaluate(test ? node.consequent : node.alternate, ctx);
+		}
+		case "MemberExpression":
+		case "ChainExpression":
+		case "CallExpression": {
+			const value = chain(node, ctx);
+			return value === SHORT_CIRCUIT ? void 0 : value;
+		}
+		case "ParenthesizedExpression":
+		case "TSAsExpression":
+		case "TSSatisfiesExpression":
+		case "TSNonNullExpression":
+		case "TSTypeAssertion":
+		case "TSInstantiationExpression": return within(node, node.expression, ctx, evaluate);
+		default: throw notStatic(node, ctx);
+	}
+}
+/**
+* Value of a binding, as a reference to it would evaluate: what the plugin's
+* `resolveImport` uses to read another module's export. `at` locates errors.
+*/
+function evaluateBinding(binding, ctx, at) {
+	if (ctx.params?.has(binding)) return ctx.params.get(binding);
+	const node = at ?? binding.id ?? binding.node;
+	const name = `\`${binding.name}\``;
+	const unchanged = (value) => {
+		if (isPrimitive(value) || isCompiled(value)) return value;
+		const write = writeTo(binding, ctx);
+		if (write) {
+			const state = stateOf(ctx);
+			state.locate ??= createLocator(ctx.code);
+			const { line, column } = state.locate(write.node.start);
+			throw notStatic(node, ctx, `${name} is modified at ${line}:${column + 1}: \`${excerpt(ctx.code, write.node)}\``);
+		}
+		return value;
+	};
+	switch (binding.kind) {
+		case "import": return unchanged(memo(binding.node, node, binding, ctx, () => {
+			try {
+				return ctx.resolveImport(binding);
+			} catch (error) {
+				if (error instanceof VicssError) throw error;
+				const detail = error instanceof Error && error.message ? `: ${error.message}` : "";
+				throw notStatic(node, ctx, `${name} is imported from "${binding.source}"${detail}`);
+			}
+		}));
+		case "const": {
+			const { init, node: declarator } = binding;
+			if (!init) throw notStatic(node, ctx, declarator.type === "TSEnumDeclaration" ? `${name} is an enum; use an \`as const\` object` : `${name} has no static initializer`);
+			const value = memo(init, node, binding, ctx, () => evaluate(init, ctx));
+			if (declarator.type !== "VariableDeclarator" || declarator.id.type === "Identifier") return unchanged(value);
+			const found = destructure(declarator.id, unchanged(value), binding.name, ctx);
+			return found === NOT_FOUND ? void 0 : found;
+		}
+		case "let":
+		case "var": throw notStatic(node, ctx, `${name} is declared with ${binding.kind}; only const is evaluated`);
+		case "param": throw notStatic(node, ctx, `${name} is a function parameter`);
+		case "function": throw notStatic(node, ctx, `${name} is a function`);
+		case "class": throw notStatic(node, ctx, `${name} is a class`);
+		case "catch": throw notStatic(node, ctx, `${name} is a caught exception`);
+	}
+}
+/** Globals that read their arguments and never change them. */
+const PURE_GLOBALS = /* @__PURE__ */ new Set([
+	"Object.freeze",
+	"Object.isFrozen",
+	"Object.keys",
+	"Object.values",
+	"Object.entries",
+	"Object.getOwnPropertyNames",
+	"JSON.stringify",
+	"Array.isArray",
+	"String",
+	"Number",
+	"Boolean",
+	"structuredClone"
+]);
+/**
+* A write to `binding`'s object: through the binding itself, or through a
+* const that may hold the same object. Within one module only: another
+* module can still change an exported object, which no compiler can see.
+*/
+function writeTo(binding, ctx, seen = /* @__PURE__ */ new Set()) {
+	if (seen.has(binding)) return void 0;
+	seen.add(binding);
+	for (const write of ctx.scopes.writesOf(binding)) if (!write.call || !harmless(write.call, ctx)) return write;
+	for (const holder of ctx.scopes.holdersOf(binding)) {
+		const write = writeTo(holder, ctx, seen);
+		if (write) return write;
+	}
+}
+/** What a compiler call evaluates to, which no write to an object holding it can change. */
+function isCompiled(value) {
+	const kind = value?.__vxSpecial;
+	return kind === "style" || kind === "marker" || kind === "recipe";
+}
+function harmless(call, ctx) {
+	if (ctx.isHarmlessCall?.(call)) return true;
+	const callee = call.callee;
+	let name;
+	if (callee.type === "Identifier") {
+		if (!ctx.scopes.bindingOf(callee)) name = callee.name;
+	} else if (callee.type === "MemberExpression" && !callee.computed && callee.object.type === "Identifier" && !ctx.scopes.bindingOf(callee.object)) name = `${callee.object.name}.${callee.property.name}`;
+	return name !== void 0 && (PURE_GLOBALS.has(name) || name.startsWith("console."));
+}
+const BINARY = /* @__PURE__ */ new Set([
+	"+",
+	"-",
+	"*",
+	"/",
+	"%",
+	"**",
+	"==",
+	"===",
+	"!=",
+	"!==",
+	"<",
+	"<=",
+	">",
+	">="
+]);
+const SHORT_CIRCUIT = Symbol("vicss.shortCircuit");
+const NOT_FOUND = Symbol("vicss.notFound");
+const states = /* @__PURE__ */ new WeakMap();
+/** The node each NOT_STATIC error blames, so an enclosing member chain can take the blame instead. */
+const blamed = /* @__PURE__ */ new WeakMap();
+function stateOf(ctx) {
+	let state = states.get(ctx);
+	if (!state) states.set(ctx, state = {
+		values: /* @__PURE__ */ new Map(),
+		active: /* @__PURE__ */ new Set()
+	});
+	return state;
+}
+function memo(key, at, binding, ctx, compute) {
+	const { values, active } = stateOf(ctx);
+	if (values.has(key)) return values.get(key);
+	if (active.has(key)) throw notStatic(at, ctx, `\`${binding.name}\` refers to itself`);
+	active.add(key);
+	try {
+		const value = compute();
+		values.set(key, value);
+		return value;
+	} finally {
+		active.delete(key);
+	}
+}
+function identifier(id, ctx) {
+	const binding = ctx.scopes.bindingOf(id);
+	if (binding) return evaluateBinding(binding, ctx, id);
+	if (id.name === "undefined") return void 0;
+	throw notStatic(id, ctx, `\`${id.name}\` is not declared in this module`);
+}
+/** Members, calls and optional chains; `SHORT_CIRCUIT` ends a chain at a nullish `?.`. */
+function chain(node, ctx) {
+	switch (node.type) {
+		case "ChainExpression": return chain(node.expression, ctx);
+		case "TSNonNullExpression": return within(node, node.expression, ctx, chain);
+		case "CallExpression": return call(node, ctx);
+		case "MemberExpression": {
+			const target = within(node, node.object, ctx, chain);
+			if (target === SHORT_CIRCUIT) return SHORT_CIRCUIT;
+			if (isDynamic(target)) return dynamicAt(node, target);
+			if (node.optional && (target === null || target === void 0)) return SHORT_CIRCUIT;
+			if (node.property.type === "PrivateIdentifier") throw notStatic(node, ctx);
+			let key;
+			if (node.computed) {
+				const value = evaluate(node.property, ctx);
+				if (isDynamic(value)) return dynamicAt(node, value);
+				key = keyFrom(value, node.property, ctx);
+			} else key = node.property.name;
+			return property(target, key, node, node.object, ctx);
+		}
+		default: return evaluate(node, ctx);
+	}
+}
+function call(node, ctx) {
+	if (ctx.callHandler) {
+		const root = rootIdentifier(node.callee);
+		const binding = root ? ctx.scopes.bindingOf(root) : void 0;
+		const value = ctx.callHandler(node.callee, binding, node.arguments, (n) => evaluate(n, ctx));
+		if (value !== NOT_HANDLED) return value;
+	}
+	throw notStatic(node, ctx);
+}
+function rootIdentifier(node) {
+	switch (node.type) {
+		case "Identifier": return node;
+		case "MemberExpression": return rootIdentifier(node.object);
+		case "ChainExpression":
+		case "ParenthesizedExpression":
+		case "TSAsExpression":
+		case "TSSatisfiesExpression":
+		case "TSNonNullExpression":
+		case "TSTypeAssertion":
+		case "TSInstantiationExpression": return rootIdentifier(node.expression);
+		default: return;
+	}
+}
+/** Own properties only: inherited ones are built-ins (`toUpperCase`, `map`) that the evaluator never runs. */
+function property(target, key, node, object, ctx) {
+	if (target === null || target === void 0) throw notStatic(node, ctx, `\`${excerpt(ctx.code, object)}\` is ${String(target)}`);
+	const member = typeof target === "object" ? target.member : void 0;
+	if (typeof member === "function" && Object.hasOwn(target, "__vxSpecial")) try {
+		return member.call(target, key);
+	} catch (error) {
+		if (!(error instanceof VicssError) || error.loc) throw error;
+		const state = stateOf(ctx);
+		state.locate ??= createLocator(ctx.code);
+		throw new VicssError(error.code, `\`${excerpt(ctx.code, node)}\`: ${error.message}`, {
+			loc: {
+				file: ctx.file,
+				...state.locate(node.start)
+			},
+			hint: error.hint
+		});
+	}
+	const box = Object(target);
+	if (Object.hasOwn(box, key)) return box[key];
+	if (key in box) throw notStatic(node, ctx, `\`${key}\` is a built-in property`);
+}
+function keyOf(node, ctx) {
+	return keyFrom(evaluate(node, ctx), node, ctx);
+}
+function keyFrom(value, node, ctx) {
+	if (typeof value === "string") return value;
+	if (typeof value === "number") return String(value);
+	throw notStatic(node, ctx, "a property key must be a string or a number");
+}
+function setKey(out, key, value, node, ctx) {
+	if (key === "__proto__") throw notStatic(node, ctx, "`__proto__` keys are not supported");
+	out[key] = value;
+}
+/** The value `name` receives from destructuring `value` with `pattern`. */
+function destructure(pattern, value, name, ctx) {
+	if (isOpaque(value)) return binds(pattern, name) ? value : NOT_FOUND;
+	switch (pattern.type) {
+		case "Identifier": return pattern.name === name ? value : NOT_FOUND;
+		case "AssignmentPattern":
+			if (!binds(pattern.left, name)) return NOT_FOUND;
+			return destructure(pattern.left, value === void 0 ? evaluate(pattern.right, ctx) : value, name, ctx);
+		case "ObjectPattern": {
+			if (value === null || value === void 0) throw notStatic(pattern, ctx, `destructures ${String(value)}`);
+			const taken = /* @__PURE__ */ new Set();
+			for (const prop of pattern.properties) {
+				if (prop.type === "RestElement") {
+					if (!binds(prop.argument, name)) continue;
+					const rest = {};
+					for (const [key, item] of Object.entries(value)) if (!taken.has(key)) rest[key] = item;
+					return destructure(prop.argument, rest, name, ctx);
+				}
+				const key = prop.computed ? keyOf(prop.key, ctx) : prop.key.type === "Identifier" ? prop.key.name : String(prop.key.value);
+				taken.add(key);
+				if (binds(prop.value, name)) return destructure(prop.value, property(value, key, prop, pattern, ctx), name, ctx);
+			}
+			return NOT_FOUND;
+		}
+		case "ArrayPattern":
+			if (!Array.isArray(value)) throw notStatic(pattern, ctx, "destructures a value that is not an array");
+			for (const [index, element] of pattern.elements.entries()) {
+				if (!element) continue;
+				if (element.type === "RestElement") {
+					if (binds(element.argument, name)) return destructure(element.argument, value.slice(index), name, ctx);
+				} else if (binds(element, name)) return destructure(element, value[index], name, ctx);
+			}
+			return NOT_FOUND;
+		default: return NOT_FOUND;
+	}
+}
+function binds(pattern, name) {
+	switch (pattern.type) {
+		case "Identifier": return pattern.name === name;
+		case "AssignmentPattern": return binds(pattern.left, name);
+		case "RestElement": return binds(pattern.argument, name);
+		case "ObjectPattern": return pattern.properties.some((p) => binds(p.type === "RestElement" ? p : p.value, name));
+		case "ArrayPattern": return pattern.elements.some((e) => e !== null && binds(e, name));
+		default: return false;
+	}
+}
+/**
+* JS semantics on primitives. Objects take part only in strict equality and
+* in loose equality with null; otherwise the result is `undefined`, which no
+* operator produces, so the caller refuses.
+*/
+function binary(operator, left, right) {
+	if (operator === "===") return left === right;
+	if (operator === "!==") return left !== right;
+	if (!isPrimitive(left) || !isPrimitive(right)) {
+		const nullish = left === null || left === void 0 || right === null || right === void 0;
+		if (nullish && operator === "==") return left == right;
+		if (nullish && operator === "!=") return left != right;
+		return;
+	}
+	const strings = typeof left === "string" && typeof right === "string";
+	switch (operator) {
+		case "+": return typeof left === "string" || typeof right === "string" ? String(left) + String(right) : Number(left) + Number(right);
+		case "-": return Number(left) - Number(right);
+		case "*": return Number(left) * Number(right);
+		case "/": return Number(left) / Number(right);
+		case "%": return Number(left) % Number(right);
+		case "**": return Number(left) ** Number(right);
+		case "==": return left == right;
+		case "!=": return left != right;
+		case "<": return strings ? left < right : Number(left) < Number(right);
+		case "<=": return strings ? left <= right : Number(left) <= Number(right);
+		case ">": return strings ? left > right : Number(left) > Number(right);
+		default: return strings ? left >= right : Number(left) >= Number(right);
+	}
+}
+function isPrimitive(value) {
+	return value === null || typeof value !== "object";
+}
+function cooked(element) {
+	return element ? element.value.cooked ?? element.value.raw : "";
+}
+/** A runtime value for `node`, opaque when every runtime value it derives from is. */
+function dynamicAt(node, ...from) {
+	const dynamic = from.filter(isDynamic);
+	return dynamic.length > 0 && dynamic.every(isOpaque) ? opaqueAt(node) : {
+		__vxSpecial: "dynamic",
+		node
+	};
+}
+/** A runtime test between known values; opaque when the test is. */
+function choiceAt(node, test, choice) {
+	return isOpaque(test) ? {
+		__vxSpecial: "dynamic",
+		node,
+		choice,
+		opaque: true
+	} : {
+		__vxSpecial: "dynamic",
+		node,
+		choice
+	};
+}
+/**
+* Evaluates `inner` for `outer` (a wrapper or a member access). When `inner`
+* itself is what is not static, `outer` takes the blame, so the message names
+* `props.color` rather than `props`.
+*/
+function within(outer, inner, ctx, run) {
+	try {
+		return run(inner, ctx);
+	} catch (error) {
+		const blame = error instanceof VicssError ? blamed.get(error) : void 0;
+		if (blame?.node === inner) throw notStatic(outer, ctx, blame.reason);
+		throw error;
+	}
+}
+/** The node a NOT_STATIC error names, for tools that report a range rather than a point. */
+function blamedNode(error) {
+	return blamed.get(error)?.node;
+}
+function notStatic(node, ctx, reason) {
+	const state = stateOf(ctx);
+	state.locate ??= createLocator(ctx.code);
+	const error = new VicssError("NOT_STATIC", `\`${excerpt(ctx.code, node)}\` is not a static value${reason ? ` (${reason})` : ""}`, {
+		loc: {
+			file: ctx.file,
+			...state.locate(node.start)
+		},
+		hint: STATIC_HINT
+	});
+	blamed.set(error, {
+		node,
+		reason
+	});
+	return error;
+}
+const EXCERPT_LENGTH = 60;
+function excerpt(code, node) {
+	const text = code.slice(node.start, node.end).replace(/\s+/g, " ");
+	return text.length > EXCERPT_LENGTH ? `${text.slice(0, 59)}…` : text;
+}
+//#endregion
+//#region src/core/flatten.ts
+/**
+* Flattened recipe bases (PLAN D22, report 06 §9.2 #16): `recipe({ base,
+* flatten: true })` compiles its base to one class, `vx-base_<hash>`, whose
+* rule holds every declaration of the base, so an element repeated
+* thousands of times (a table cell, a list row) carries one class for its
+* base instead of one per declaration (Griffel's `makeResetStyles`).
+*
+* The rule prints one block per condition chain of the base, each in the
+* chain's flattened sub-layer `vicss.a.<chain>.f`, declared right before the
+* chain's atoms (order.ts). So, on one element:
+*
+* - an atom of the same chain beats the flattened declaration, whatever its
+*   tier, as the atom that clears it would in the atomic merge (`padding`
+*   after a base `paddingTop`), and as a longer key would by tier;
+* - an atom of a higher chain beats it, and one of a lower chain loses to
+*   it, as between atoms: a caller's `background` leaves the base's `_hover`
+*   background in place (D4).
+*
+* That computes what the atomic base computes, under one condition: the
+* base comes first among the element's styles, as a recipe's base does in
+* its own result and as `sx(recipe(), …)` applies it. A flattened base
+* clears nothing: what an earlier `sx()` argument sets stays above it,
+* where the atomic base would have replaced it (the compiler warns for a
+* folded call, the dev runtime for a runtime one).
+*
+* One exception keeps a declaration an atom: a property that wins over
+* another of an unrelated key by tier alone (`paddingLeft` over
+* `paddingInlineStart`, `borderTopLeftRadius` over
+* `borderStartStartRadius`). The atomic cascade puts it a tier above its
+* flow-relative twin; in the chain's flattened sub-layer it would sit below
+* the twin and lose, and no other place both loses to the twin's own
+* shorthand (`paddingInline`, which clears it) and beats the twin. A
+* `colorPalette` stays an atom too: the sheet resets the other palettes'
+* flags and recomputes the palette keys on its class (palettes.ts), which
+* the flattened class would not carry.
+*
+* A flattened base's merge key is `vx-base`, shared by every flattened
+* base: one per element, the last one, like themes (PLAN §4.8). Two bases'
+* rules both set what their recipes set, in one sub-layer, and the sheet's
+* order would pick between them rather than the call's.
+*/
+/** The merge key of every flattened base: one per element. */
+const BASE_KEY = "vx-base";
+function isBaseClass(cls) {
+	return cls.startsWith(`${BASE_KEY}_`);
+}
+let byKey;
+/** `ltr|padding-left` → the properties that set it. */
+let setters;
+const twinCache = /* @__PURE__ */ new Map();
+const related = (a, b) => a === b || a.startsWith(`${b}-`) || b.startsWith(`${a}-`);
+/**
+* Whether the property keyed `key` beats a property of an unrelated key
+* that sets one of its longhands by tier alone (in either direction), or
+* sits below one that does: in a flattened sub-layer it would lose to it.
+*/
+function winsByTier(key) {
+	let out = twinCache.get(key);
+	if (out !== void 0) return out;
+	if (!byKey || !setters) {
+		byKey = /* @__PURE__ */ new Map();
+		setters = /* @__PURE__ */ new Map();
+		for (const info of PROPERTIES.values()) {
+			if (info.expand || info.rejected) continue;
+			byKey.set(info.key, info);
+			for (const direction of ["ltr", "rtl"]) for (const longhand of longhandsOf(info.css, direction)) {
+				const id = `${direction}|${longhand}`;
+				setters.set(id, [...setters.get(id) ?? [], info]);
+			}
+		}
+	}
+	const parent = key.lastIndexOf("-");
+	out = parent > 0 && winsByTier(key.slice(0, parent));
+	const info = byKey.get(key);
+	if (info && !out) {
+		for (const direction of ["ltr", "rtl"]) for (const longhand of longhandsOf(info.css, direction)) if ((setters.get(`${direction}|${longhand}`) ?? []).some((other) => other.tier < info.tier && !related(other.key, key))) out = true;
+	}
+	twinCache.set(key, out);
+	return out;
+}
+/**
+* Whether a base atom stays an atom when its base is flattened: a physical
+* side or corner, which wins over its flow-relative twin by tier; a
+* runtime value, which a recipe never holds; and a `colorPalette`, whose
+* flag the sheet resets and recomputes the palette keys beside, on
+* selectors of the palette atom's own class (palettes.ts).
+*/
+function staysAtomic(atom) {
+	return typeof atom.variable === "string" || isPaletteAtom(atom) || winsByTier(atom.key);
+}
+/**
+* A base (one canonical class string's atoms) as one class and the atoms
+* that stay; undefined when every declaration stays an atom. The class
+* hashes the class names it stands for, which no config decides, so a
+* library and the app that installs it name it alike (PLAN §5.13), and
+* two recipes with the same base share it.
+*/
+function flattenBase(atoms, system) {
+	const flat = atoms.filter((atom) => !staysAtomic(atom));
+	if (flat.length === 0) return void 0;
+	const names = flat.map((atom) => atom.className).sort(compareStrings);
+	const className = `${BASE_KEY}_${hash(`base:${names.join(" ")}`)}`;
+	return {
+		className,
+		rule: baseRule(className, flat, system),
+		kept: atoms.filter(staysAtomic).map((atom) => atom.className)
+	};
+}
+/** The rule of the flattened base `id` over `atoms`, printed for `system`. */
+function baseRule(id, atoms, system) {
+	const sorted = [...atoms].sort((a, b) => compareStrings(a.className, b.className));
+	const tokens = /* @__PURE__ */ new Map();
+	for (const atom of sorted) for (const ref of atom.tokens) tokens.set(`${ref.scale}:${ref.path}`, ref);
+	const rule = {
+		id,
+		kind: "base",
+		css: "",
+		tokens: [...tokens.values()],
+		atoms: sorted
+	};
+	return {
+		...rule,
+		css: printAtoms([], system, [rule])
+	};
+}
+/** The atoms the flattened bases among `rules` stand for, one per class name. */
+function baseAtoms(rules) {
+	const out = /* @__PURE__ */ new Map();
+	for (const rule of rules) {
+		if (rule.kind !== "base") continue;
+		for (const atom of rule.atoms ?? []) if (!out.has(atom.className)) out.set(atom.className, atom);
+	}
+	return [...out.values()];
+}
+/**
+* One class, one base: two flattened bases whose atoms hash to one name
+* (across files, or between an app and its libraries). Their atoms are
+* checked with every other atom by `checkAtoms`.
+*/
+function checkBases(rules) {
+	const seen = /* @__PURE__ */ new Map();
+	const errors = [];
+	for (const rule of rules) {
+		if (rule.kind !== "base") continue;
+		const names = (rule.atoms ?? []).map((atom) => atom.className).join(" ");
+		const first = seen.get(rule.id);
+		if (first === void 0) seen.set(rule.id, names);
+		else if (first !== names) errors.push(new VicssError("CLASS_COLLISION", `the flattened base \`${rule.id}\` stands for both \`${first}\` and \`${names}\``, { hint: "Two bases hash to the same name: write one of them slightly differently." }));
+	}
+	return errors;
+}
+/**
+* Where a merge of `args` (class strings, in order) computes otherwise with
+* the flattened base the element keeps than with its atoms: the classes of
+* earlier arguments that the base's atoms would clear, or beat by tier (a
+* base `paddingTop` after an earlier `padding`), and its rule, applied
+* under them, cannot. `atomsOf` names a base's atoms by class. Undefined
+* when the two merges keep the same classes, and so compute alike.
+*/
+function shadowedByEarlier(args, atomsOf) {
+	const lists = args.map((arg) => arg.split(" ").filter(Boolean));
+	let at = -1;
+	let base;
+	for (const [i, list] of lists.entries()) for (const cls of list) if (isBaseClass(cls)) {
+		at = i;
+		base = cls;
+	}
+	const atoms = base === void 0 ? void 0 : atomsOf(base);
+	if (base === void 0 || atoms === void 0 || at === 0) return void 0;
+	const without = lists.map((list) => list.filter((cls) => !isBaseClass(cls)).join(" "));
+	const own = mergeClassNames([atoms.join(" "), without[at]]).join(" ");
+	const atomic = new Set(mergeClassNames([
+		...without.slice(0, at),
+		own,
+		...without.slice(at + 1)
+	]));
+	const flattened = new Set(mergeClassNames([atoms.join(" "), ...without]));
+	const lost = atoms.filter((cls) => atomic.has(cls) && !flattened.has(cls)).map(parseClassName);
+	const classes = /* @__PURE__ */ new Set();
+	for (const cls of without.slice(0, at).flatMap((arg) => arg.split(" ").filter(Boolean))) {
+		const { chain, key } = parseClassName(cls);
+		if (lost.some((atom) => atom.chain === chain && (atom.key === key || atom.key.startsWith(`${key}-`))) || flattened.has(cls) && !atomic.has(cls)) classes.add(cls);
+	}
+	return classes.size > 0 ? {
+		base,
+		classes: [...classes].sort(compareStrings)
+	} : void 0;
+}
+//#endregion
+//#region src/runtime/style.ts
+/**
+* One compiled style as a class (PLAN §5.6, §5.16): `class={card}`,
+* `className={card}` and `${card}` read it as its class attribute. A
+* compiled style keeps its shape, merge id → class, so `sx()` still merges
+* it; the string comes from the prototype every compiled style shares. A
+* class method is not enumerable, so the merge's `for…in`, `Object.keys`
+* and a spread never see it, and a constant carries no function of its own.
+*/
+var Styled = class {
+	/**
+	* The class attribute `sx(style)` sets, by `sx()`'s own merge and cache:
+	* the same string by construction, a cache hit after the first render,
+	* and 31 B less than a merge of its own beside `sx()`, which nearly every
+	* app ships (PLAN §6).
+	*/
+	toString() {
+		return classes([this], {});
+	}
+};
+/** What the compiler wraps a compiled style literal in (`__vxStyled({…})`). */
+const styled = (record) => Object.setPrototypeOf(record, Styled.prototype);
+//#endregion
+//#region src/runtime/recipe.ts
+/**
+* The recipe resolver (PLAN §4.4, §5.7): what a compiled `recipe()` becomes,
+* `__vxRecipe(table)`, or `__vxRecipe(table, __vxResponsive)` for a recipe
+* with responsive variants. The compiler did the styling: every cell of the
+* table is a compiled style (merge id → class), so a call chooses cells and
+* merges them with `sx`'s rule, in the order a style object would be assigned: base,
+* each variant in declaration order, then the compounds that hold. Literal
+* calls fold at build time through `resolveRecipe` in src/core/recipe.ts,
+* which must agree with this file class for class. Bytes matter more than
+* elegance: tests/runtime/size.test.ts holds both functions to a budget, and
+* an app without responsive recipes never bundles `__vxResponsive`.
+*
+* The table (`RecipeTable` below; src/core/recipe.ts writes it):
+*
+* - `k`: variant names in declaration order; `s`: slot names, in slot recipes.
+* - `b`, `v[variant][value]`: base and variant styles. A cell is a style,
+*   or a style per slot in a slot recipe.
+* - `c`: compounds in order, `[when, classes, ranges?, cut?]`; `when` lists
+*   the values each named variant must have, as strings (`"true"`).
+* - `d`: defaults as strings, `"false"` for a boolean variant without one.
+* - `q`: `[conditions, breakpoints]`, the conditions a responsive prop may
+*   set (`md`, `containerMd`) in ascending rank, of which the first
+*   `breakpoints` are breakpoints and the rest container sizes.
+* - `r[variant][value][condition]`: a responsive variant's value under each
+*   of those conditions. Every responsive variant has an entry, in
+*   declaration order.
+* - `ranges[piece]`: a compound under the range condition of each piece of
+*   the width axis, keyed by its bounds (`",md"` below md, `"md,lg"`, `"lg,"`
+*   from lg, `"containerMd,"`); `cut` lists the responsive variants whose
+*   conditions cut the axis into the pieces it is evaluated on.
+* - `f`, in dev only: each flattened base's atoms, as a style, by its class
+*   (the cell's `$b`, src/core/flatten.ts), for `flatBases`.
+*/
+const warn = (message) => console.warn("vicss: " + message);
+/**
+* Dev only: the atoms of every flattened base a resolver was made with, by
+* class, which `sx()`'s dev variant reads (runtime/dev.ts). Production
+* builds drop it with the branch that fills it.
+*/
+const flatBases = {};
+const __vxRecipe = (t, x) => {
+	const { k: keys, d: defaults, v: variants } = t;
+	const memo = /* @__PURE__ */ new Map();
+	if (process.env.NODE_ENV != "production") Object.assign(flatBases, t.f);
+	return Object.assign((props = {}) => {
+		const id = JSON.stringify(keys.map((key) => props[key] ?? defaults[key]));
+		let result = memo.get(id);
+		if (!result) {
+			const values = {};
+			const cells = [t.b];
+			for (const key of keys) {
+				let value = props[key] ?? defaults[key];
+				if (typeof value == "object") {
+					if (process.env.NODE_ENV != "production" && !t.r?.[key]) warn(`\`${key}\` is not a responsive variant; its base value applies.`);
+					value = value.base ?? defaults[key];
+				}
+				cells.push(variants[key][values[key] = "" + value]);
+			}
+			const add = x?.(t, props, values, cells);
+			for (const compound of t.c) if (add) add(compound);
+			else if (Object.keys(compound[0]).every((key) => compound[0][key].includes(values[key]))) cells.push(compound[1]);
+			const slot = (name) => styled(Object.fromEntries(merge(cells.map((cell) => typeof cell == "object" && (name ? cell[name] : cell)))[1]));
+			result = t.s ? Object.fromEntries(t.s.map((name) => [name, slot(name)])) : slot();
+			if (process.env.NODE_ENV != "production") Object.freeze(result);
+			if (memo.size >> 10) memo.clear();
+			memo.set(id, result);
+		}
+		return result;
+	}, {
+		variantKeys: keys,
+		splitProps: (props) => {
+			const split = [{}, {}];
+			for (const key in props) split[keys.includes(key) ? 0 : 1][key] = props[key];
+			return split;
+		},
+		schema: {
+			variants: Object.fromEntries(keys.map((key) => [key, Object.keys(variants[key])])),
+			defaults
+		}
+	});
+};
+/**
+* Responsive props (PLAN §4.4): each condition a prop sets adds its value's
+* `r` cell, in rank order, so values stack mobile-first. A compound that has
+* ranges is evaluated on each piece of the width axis, cut at the conditions
+* its `cut` variants' props set, with the values in effect there, and adds
+* its classes under the range condition of each piece where it holds: that
+* range outranks every condition that holds anywhere in the piece. `ranges`
+* keys a piece by its bounds: `",md"` below md, `"md,lg"`, `"lg,"` from lg.
+*/
+const __vxResponsive = (t, props, values, cells) => {
+	const [all, breakpoints] = t.q;
+	const r = t.r;
+	/** The value `key`'s prop sets under condition `name`; `key` is a responsive variant. */
+	const at = (key, name) => props[key]?.["_" + name];
+	for (const key in r) {
+		if (process.env.NODE_ENV != "production" && typeof props[key] == "object") {
+			for (const name in props[key]) if (name != "base" && !(name[0] == "_" && all.includes(name.slice(1)))) warn(`\`${name}\` is not a breakpoint or container condition of \`${key}\`; it is ignored. A recipe takes those of the design system it was compiled with: a library's, its own.`);
+		}
+		for (const name of all) if (at(key, name) != null) cells.push(r[key][at(key, name)]?.[name]);
+	}
+	return ([when, classes, ranges, cut = []]) => {
+		const current = { ...values };
+		const points = all.filter((name) => cut.some((key) => at(key, name) != null));
+		const n = points.length;
+		const held = ["", ...points].map((point) => (cut.map((key) => current[key] = "" + (at(key, point) ?? current[key])), Object.keys(when).every((key) => when[key].includes(current[key]))));
+		if (!n) return held[0] && cells.push(classes);
+		if (all.indexOf(points[n - 1]) < breakpoints) return held.map((holds, i) => holds && cells.push(ranges[[points[i - 1], points[i]] + ""]));
+		let i = n;
+		if (all.indexOf(points[0]) >= breakpoints) for (; i >= 0 && held[i]; i--) cells.push(i ? ranges[points[i - 1] + ","] : classes);
+		if (process.env.NODE_ENV != "production" && held.slice(0, i + 1).includes(true)) warn(`a compound variant on ${Object.keys(when).join(", ")} holds where no breakpoint or container condition expresses; it is left out there.`);
+	};
+};
+//#endregion
+//#region src/core/recipe.ts
+/**
+* Recipes (PLAN §4.4, §5.7): a `recipe()` definition compiled to the table of
+* compiled styles that the runtime resolver (`src/runtime/recipe.ts`) reads,
+* and calls with literal props resolved at build time.
+*
+* The compiler works on class lists (core/atoms.ts); every cell of a table
+* is one canonical class list as a compiled style (merge id → class), so the
+* resolver only merges styles. Every variant value and every
+* compound is compiled, used or not: nothing is tracked by tag or prop name,
+* so renaming a component or a prop never loses CSS (PLAN §5.7).
+*/
+/** What a `recipe()` call is inside another static expression (an import, `extends`). */
+var RecipeValue = class {
+	__vxSpecial = "recipe";
+	recipe;
+	constructor(recipe) {
+		this.recipe = recipe;
+	}
+};
+/** Each compiled recipe's key: what `recipeKey` writes for a parent in `extends`. */
+const recipeKeys = /* @__PURE__ */ new WeakMap();
+/**
+* What a recipe compiles from, as a string: two evaluated definitions with
+* one key compile alike in one system, whichever module or compile they
+* come from (`ModuleCache.recipes`). Undefined when the definition holds a
+* value the key cannot tell apart (a compiled style, a marker, a runtime
+* value), which then compiles, or fails, every time.
+*/
+function recipeKey(definition) {
+	let ok = true;
+	const text = JSON.stringify(definition, (_, value) => {
+		if (value instanceof RecipeValue) {
+			const key = recipeKeys.get(value.recipe);
+			if (key === void 0) ok = false;
+			return { "\0recipe": key };
+		}
+		if (value !== null && typeof value === "object" && "__vxSpecial" in value) ok = false;
+		return value;
+	});
+	return ok ? text : void 0;
+}
+const KEYS = [
+	"base",
+	"slots",
+	"variants",
+	"compoundVariants",
+	"compoundSlots",
+	"defaultVariants",
+	"responsive",
+	"flatten",
+	"extends"
+];
+const HINT = "Write recipe({ base: { … }, variants: { size: { sm: { … }, md: { … } } } }).";
+/** No-slot parts live under this key. */
+const ROOT = "";
+/** Compiles an evaluated definition. `extends` holds the parents' RecipeValues. */
+function buildRecipe(definition, ctx) {
+	const fail = (path, message, hint) => ctx.error(path, "BAD_RECIPE", path ? `${path}: ${message}` : message, hint);
+	if (!isPlainObject(definition)) throw fail("", "recipe() takes one definition object", HINT);
+	for (const key of Object.keys(definition)) {
+		if (KEYS.includes(key)) continue;
+		const hint = key === "class" || key === "className" ? "Recipes take style objects: write base, or style in a compound." : key === "extend" ? "Write `extends`." : didYouMean(closestNames(key, KEYS));
+		throw fail(key, `\`${key}\` is not a recipe key`, hint);
+	}
+	const parents = parentsOf(definition.extends, fail);
+	const atoms = /* @__PURE__ */ new Map();
+	for (const parent of parents) for (const [cls, atom] of parent.atoms) atoms.set(cls, atom);
+	const style = (value, path) => {
+		if (value?.__vxSpecial === "style") throw ctx.error(path, "BAD_STYLE", `${path}: a compiled style is used inside a recipe; recipes take style objects`, "Write the style object itself.");
+		if (!isPlainObject(value)) throw fail(path, "expected a style object");
+		const out = ctx.normalize(value, path);
+		for (const atom of out) atoms.set(atom.className, atom);
+		return out.map((atom) => atom.className).join(" ");
+	};
+	const slotted = parents.filter((parent) => parent.slots !== void 0);
+	if (slotted.length > 0 && slotted.length < parents.length) throw fail("extends", "a recipe cannot extend recipes with slots and recipes without");
+	if (definition.slots !== void 0 && parents.length > 0 && slotted.length === 0) throw fail("slots", "a recipe with slots cannot extend recipes without slots");
+	const ownSlots = /* @__PURE__ */ new Map();
+	if (definition.slots !== void 0) {
+		if (!isPlainObject(definition.slots)) throw fail("slots", "expected an object of slot styles");
+		for (const [name, value] of Object.entries(definition.slots)) {
+			if (value === void 0) continue;
+			if (name === "") throw fail("slots", "a slot needs a name");
+			ownSlots.set(name, style(value, `slots.${name}`));
+		}
+		if (ownSlots.size === 0 && slotted.length === 0) throw fail("slots", "a recipe with slots names at least one");
+	}
+	const slots = definition.slots !== void 0 || slotted.length > 0 ? [.../* @__PURE__ */ new Set([...slotted.flatMap((parent) => parent.slots), ...ownSlots.keys()])] : void 0;
+	const keys = slots ?? [ROOT];
+	if (slots && definition.base !== void 0) throw fail("base", "a recipe with slots has no `base`", "Base styles live in the slots: slots: { root: { … }, label: { … } }.");
+	const base = slots ? Object.fromEntries(slots.map((slot) => [slot, ownSlots.get(slot) ?? ""])) : { [ROOT]: definition.base === void 0 ? "" : style(definition.base, "base") };
+	/** A value's or compound's style: a style, or a style per slot. */
+	const parts = (value, path) => {
+		if (!slots) return { [ROOT]: style(value, path) };
+		if (!isPlainObject(value)) throw fail(path, "expected an object of styles per slot");
+		const out = {};
+		for (const [slot, item] of Object.entries(value)) {
+			if (item === void 0) continue;
+			if (!slots.includes(slot)) throw fail(`${path}.${slot}`, `\`${slot}\` is not a slot of this recipe`, didYouMean(closestNames(slot, slots)) ?? `In a recipe with slots, styles are given per slot (${slots.join(", ")}).`);
+			out[slot] = style(item, `${path}.${slot}`);
+		}
+		return out;
+	};
+	const own = /* @__PURE__ */ new Map();
+	if (definition.variants !== void 0) {
+		if (!isPlainObject(definition.variants)) throw fail("variants", "expected an object of variants", HINT);
+		for (const [name, values] of Object.entries(definition.variants)) {
+			if (values === void 0) continue;
+			const path = `variants.${name}`;
+			if (!isPlainObject(values)) throw fail(path, "expected an object of values", HINT);
+			const table = /* @__PURE__ */ new Map();
+			for (const [value, item] of Object.entries(values)) if (item !== void 0) table.set(value, parts(item, `${path}.${value}`));
+			if (table.size === 0) throw fail(path, "a variant needs at least one value");
+			own.set(name, table);
+		}
+	}
+	const merge = (list) => {
+		const out = {};
+		for (const slot of keys) {
+			const merged = mergeClassNames(list.map((p) => p?.[slot] ?? "")).join(" ");
+			if (merged || list.every((p) => p === void 0 || slot in p)) out[slot] = merged;
+		}
+		return out;
+	};
+	const variants = /* @__PURE__ */ new Map();
+	for (const layer of [...parents.map((parent) => parent.variants), own]) for (const [name, values] of layer) {
+		const into = variants.get(name) ?? /* @__PURE__ */ new Map();
+		variants.set(name, into);
+		for (const [value, item] of values) into.set(value, merge([into.get(value), item]));
+	}
+	for (const values of variants.values()) if (values.has("true") && !values.has("false")) values.set("false", {});
+	else if (values.has("false") && !values.has("true")) values.set("true", {});
+	const compoundVariants = parents.flatMap((parent) => parent.compoundVariants);
+	if (definition.compoundVariants !== void 0) for (const [i, entry] of list(definition.compoundVariants, "compoundVariants", fail)) {
+		const path = `compoundVariants.${i}`;
+		const when = conditionsOf(entry, ["style"], variants, path, fail);
+		compoundVariants.push({
+			when,
+			parts: parts(styleOf(entry, path, fail), `${path}.style`)
+		});
+	}
+	const compoundSlots = parents.flatMap((parent) => parent.compoundSlots);
+	if (definition.compoundSlots !== void 0) {
+		if (!slots) throw fail("compoundSlots", "only a recipe with slots has compound slots", "Use compoundVariants.");
+		for (const [i, entry] of list(definition.compoundSlots, "compoundSlots", fail)) {
+			const path = `compoundSlots.${i}`;
+			const names = entry.slots;
+			if (!Array.isArray(names) || names.length === 0) throw fail(`${path}.slots`, "expected an array of slot names", "Write slots: [\"a\", \"b\"].");
+			for (const name of names) if (typeof name !== "string" || !slots.includes(name)) throw fail(`${path}.slots`, `\`${String(name)}\` is not a slot of this recipe`, didYouMean(closestNames(String(name), slots)));
+			const when = conditionsOf(entry, ["slots", "style"], variants, path, fail);
+			const classes = style(styleOf(entry, path, fail), `${path}.style`);
+			const out = {};
+			for (const name of names) out[name] = classes;
+			compoundSlots.push({
+				when,
+				parts: out
+			});
+		}
+	}
+	const defaults = Object.assign({}, ...parents.map((parent) => parent.defaults));
+	if (definition.defaultVariants !== void 0) {
+		if (!isPlainObject(definition.defaultVariants)) throw fail("defaultVariants", "expected an object of variant values");
+		for (const [name, value] of Object.entries(definition.defaultVariants)) {
+			if (value === void 0) continue;
+			defaults[name] = valueIn(variants, name, value, `defaultVariants.${name}`, fail, "default");
+		}
+	}
+	const responsive = new Set(parents.flatMap((parent) => [...parent.responsive]));
+	const flag = definition.responsive;
+	if (flag === true) for (const name of variants.keys()) responsive.add(name);
+	else if (Array.isArray(flag)) for (const name of flag) {
+		if (typeof name !== "string" || !variants.has(name)) throw fail("responsive", `\`${String(name)}\` is not a variant of this recipe`, didYouMean(closestNames(String(name), variants.keys())));
+		responsive.add(name);
+	}
+	else if (flag !== void 0 && flag !== false) throw fail("responsive", "expected an array of variant names, or true for all of them");
+	const axes = responsiveConditions(ctx.system).byName;
+	for (const name of responsive) for (const [value, item] of variants.get(name)) for (const cls of Object.values(item).flatMap((classes) => classes.split(" "))) {
+		const condition = atoms.get(cls)?.chain.find((c) => axes.has(c));
+		if (condition === void 0) continue;
+		const declared = own.get(name)?.has(value);
+		throw fail(declared ? `variants.${name}.${value}` : "responsive", `\`${name}\` is responsive, so its \`${value}\` value cannot hold \`_${condition}\` styles of its own`, `Its values hold under the breakpoints a call gives them: write \`${name}: { base: …, _${condition}: … }\` in the call, or move the \`_${condition}\` styles to a variant that is not responsive.`);
+	}
+	const compiled = compile({
+		slots,
+		base: parents.length > 0 ? merge([...parents.map((parent) => parent.base), base]) : base,
+		variants,
+		compoundVariants,
+		compoundSlots,
+		defaults,
+		responsive,
+		flatten: flattened(definition.flatten, parents, slots, fail),
+		atoms
+	}, ctx.system);
+	const key = recipeKey(definition);
+	if (key !== void 0) recipeKeys.set(compiled, key);
+	return compiled;
+}
+/**
+* What `flatten` says, or the parents' choice when it says nothing: `true`
+* flattens the base (every slot of a recipe with slots), a list of slot
+* names those slots' bases, `false` none.
+*/
+function flattened(value, parents, slots, fail) {
+	if (value === void 0) return new Set(parents.flatMap((parent) => [...parent.flatten]));
+	if (value === true) return new Set(slots ?? [ROOT]);
+	if (value === false) return /* @__PURE__ */ new Set();
+	if (!slots || !Array.isArray(value)) throw fail("flatten", slots ? "expected true, false or an array of slot names" : "expected true or false: a recipe without slots flattens its base or not", slots ? "Write flatten: true, or flatten: [\"root\", \"cell\"]." : "Write flatten: true.");
+	const out = /* @__PURE__ */ new Set();
+	for (const name of value) {
+		if (typeof name !== "string" || !slots.includes(name)) throw fail("flatten", `\`${String(name)}\` is not a slot of this recipe`, didYouMean(closestNames(String(name), slots)) ?? `Its slots: ${slots.join(", ")}.`);
+		out.add(name);
+	}
+	return out;
+}
+function parentsOf(value, fail) {
+	if (value === void 0) return [];
+	return (Array.isArray(value) ? value : [value]).map((item) => {
+		if (item instanceof RecipeValue) return item.recipe.data;
+		throw fail("extends", "`extends` takes recipes", "Write extends: button, or extends: [button, focusRing], with recipes made by recipe().");
+	});
+}
+function list(value, path, fail) {
+	if (!Array.isArray(value)) throw fail(path, "expected an array");
+	return value.map((entry, i) => {
+		if (!isPlainObject(entry)) throw fail(`${path}.${i}`, "expected an object");
+		return [i, entry];
+	});
+}
+function styleOf(entry, path, fail) {
+	if (entry.style !== void 0) return entry.style;
+	throw fail(path, "a compound needs a `style`", "class" in entry || "className" in entry ? "Recipes take style objects: write style: { … }." : "Write { size: \"sm\", style: { … } }.");
+}
+/** A compound's variant conditions: variant → the values it holds for. */
+function conditionsOf(entry, reserved, variants, path, fail) {
+	const when = {};
+	for (const [name, value] of Object.entries(entry)) {
+		if (reserved.includes(name) || value === void 0) continue;
+		if (name === "class" || name === "className") throw fail(`${path}.${name}`, `\`${name}\` is not a variant`, "Write style: { … }.");
+		const items = Array.isArray(value) ? value : [value];
+		if (items.length === 0) throw fail(`${path}.${name}`, "lists no value, so it never holds");
+		when[name] = [...new Set(items.map((item) => valueIn(variants, name, item, `${path}.${name}`, fail, "compound")))];
+	}
+	return when;
+}
+/** A variant value as the table keys it, checked against the variant's values. */
+function valueIn(variants, name, value, path, fail, kind) {
+	const values = variants.get(name);
+	if (!values) throw fail(path, `\`${name}\` is not a variant of this recipe`, didYouMean(closestNames(name, variants.keys())));
+	if (isPlainObject(value)) throw kind === "default" ? fail(path, "a default is one value, not a value per condition", `Give the value per condition in the call: recipe({ ${name}: { base: …, _md: … } }).`) : fail(path, "a compound names values, not a value per condition", `List the values it holds for (${name}: ["…", "…"]); with responsive props it is evaluated per breakpoint.`);
+	const key = valueKey(value);
+	if (key === void 0 || !values.has(key)) throw fail(path, `${describeValue(value)} is not a value of \`${name}\``, didYouMean(closestNames(String(key), values.keys())) ?? `Its values: ${[...values.keys()].join(", ")}.`);
+	return key;
+}
+/** Booleans and numbers name values by their string: `true` is the `"true"` value. */
+function valueKey(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "boolean" || typeof value === "number" && Number.isFinite(value)) return String(value);
+}
+function describeValue(value) {
+	return typeof value === "string" ? `\`"${value}"\`` : `\`${String(value)}\``;
+}
+const responsiveCache = /* @__PURE__ */ new WeakMap();
+/** The breakpoint and container conditions of a system, with where each holds. */
+function responsiveConditions(system) {
+	const cached = responsiveCache.get(system);
+	if (cached) return cached;
+	const cap = (name) => name.charAt(0).toUpperCase() + name.slice(1);
+	const rank = (name) => system.conditions.get(name)?.rank;
+	const ordered = (names) => [...names].filter((n) => rank(n) !== void 0).sort((a, b) => rank(a) - rank(b));
+	const bps = ordered(system.tokens.get("breakpoints")?.keys() ?? []);
+	const containers = ordered([...system.tokens.get("containers")?.keys() ?? []].map((n) => `container${cap(n)}`));
+	const list = [];
+	const add = (name, axis, lo, hi, key) => {
+		const r = rank(name);
+		if (r !== void 0) list.push({
+			name,
+			axis,
+			lo,
+			hi,
+			rank: r,
+			key
+		});
+	};
+	const end = bps.length + 1;
+	bps.forEach((bp, i) => {
+		add(`max${cap(bp)}`, "breakpoints", 0, i + 1, `,${bp}`);
+		add(bp, "breakpoints", i + 1, end, `${bp},`);
+		for (const [j, hi] of bps.slice(i + 1).entries()) add(`${bp}To${cap(hi)}`, "breakpoints", i + 1, i + j + 2, `${bp},${hi}`);
+	});
+	containers.forEach((name, i) => add(name, "containers", i + 1, containers.length + 1, `${name},`));
+	list.sort((a, b) => a.rank - b.rank);
+	const props = list.filter((c) => c.axis === "containers" || c.hi === end);
+	const out = {
+		list,
+		byName: new Map(list.map((c) => [c.name, c])),
+		props,
+		breakpoints: props.filter((c) => c.axis === "breakpoints").length
+	};
+	responsiveCache.set(system, out);
+	return out;
+}
+/** Whether some width satisfies every breakpoint condition of `chain` (containers always can). */
+function satisfiable(chain, responsive) {
+	let lo = 0;
+	let hi = Infinity;
+	for (const name of chain) {
+		const interval = responsive.byName.get(name);
+		if (interval?.axis !== "breakpoints") continue;
+		lo = Math.max(lo, interval.lo);
+		hi = Math.min(hi, interval.hi);
+	}
+	return lo < hi;
+}
+/**
+* Whether `chain` holds only where `condition` does: it has the condition,
+* or a breakpoint or container condition inside it (`md` inside `sm`).
+*/
+function implies(chain, condition, responsive) {
+	if (chain.includes(condition)) return true;
+	const outer = responsive.byName.get(condition);
+	return outer !== void 0 && chain.some((name) => {
+		const inner = responsive.byName.get(name);
+		return inner?.axis === outer.axis && inner.lo >= outer.lo && inner.hi <= outer.hi;
+	});
+}
+function compile(data, system) {
+	const { slots } = data;
+	const responsive = responsiveConditions(system);
+	const atoms = new Map(data.atoms);
+	const rank = (name) => system.conditions.get(name).rank;
+	const words = (classes) => classes ? classes.split(" ") : [];
+	const longhandCache = /* @__PURE__ */ new Map();
+	const longhands = (cls) => {
+		let out = longhandCache.get(cls);
+		if (!out) {
+			const { property } = atoms.get(cls);
+			out = [.../* @__PURE__ */ new Set([...longhandsOf(property, "ltr"), ...longhandsOf(property, "rtl")])];
+			longhandCache.set(cls, out);
+		}
+		return out;
+	};
+	const longhandsOfParts = (parts) => new Map(Object.entries(parts).map(([slot, cls]) => [slot, new Set(words(cls).flatMap(longhands))]));
+	const overlap = (a, b) => [...a].some(([slot, set]) => [...set].some((longhand) => b.get(slot)?.has(longhand)));
+	const rechained = /* @__PURE__ */ new Map();
+	/** `classes` under every one of `conditions`, without the classes that can never hold. */
+	const under = (classes, conditions) => {
+		const id = `${conditions.join(" ")}|${classes}`;
+		let out = rechained.get(id);
+		if (out === void 0) {
+			out = rechain(classes, conditions, atoms, system, responsive, longhands);
+			rechained.set(id, out);
+		}
+		return out;
+	};
+	/**
+	* `parts` under `condition` (then `extra`), with the classes of `before`
+	* (the base, and the variant values a compound requires) on the same
+	* longhands whose chains rank below the conditions or end at one: in the
+	* cascade those win over the parts' base-chain classes (a base `_hover`
+	* colour over a value's colour, a base `_md` padding over a value's
+	* padding at md), and rechained alongside them they still do. `before`
+	* merges first, in order, as the resolver merges it.
+	*/
+	const cover = (parts, condition, extra = [], before = [data.base]) => {
+		const below = Math.max(...[condition, ...extra].map(rank));
+		const out = {};
+		for (const [slot, classes] of Object.entries(parts)) {
+			if (!classes) continue;
+			const set = new Set(words(classes).flatMap(longhands));
+			const low = before.map((other) => words(other[slot]).filter((cls) => {
+				const { chain } = atoms.get(cls);
+				return chain.length > 0 && chain.every((name) => rank(name) <= below) && longhands(cls).some((longhand) => set.has(longhand));
+			}).join(" "));
+			const merged = low.some(Boolean) ? mergeClassNames([...low, classes]).join(" ") : classes;
+			const result = under(merged, [condition, ...extra]);
+			if (result) out[slot] = result;
+		}
+		return out;
+	};
+	const v = {};
+	for (const [name, values] of data.variants) v[name] = Object.fromEntries([...values].map(([value, parts]) => [value, classesOf(parts, slots, false)]));
+	const d = {};
+	for (const name of data.variants.keys()) {
+		const value = data.defaults[name];
+		if (value !== void 0) d[name] = value;
+		else if (data.variants.get(name).has("false")) d[name] = "false";
+	}
+	const responsiveVariants = [...data.variants.keys()].filter((name) => data.responsive.has(name));
+	const conditional = responsiveVariants.length > 0 && responsive.props.length > 0;
+	let r;
+	if (responsiveVariants.length > 0) {
+		r = {};
+		for (const name of responsiveVariants) {
+			const values = data.variants.get(name);
+			const out = {};
+			r[name] = out;
+			if (!conditional) continue;
+			const chains = /* @__PURE__ */ new Map();
+			for (const parts of values.values()) for (const cls of Object.values(parts).flatMap(words)) {
+				const { chain } = atoms.get(cls);
+				chains.set(chain.join(" "), chain);
+			}
+			for (const { name: condition } of responsive.props) {
+				const above = /* @__PURE__ */ new Map();
+				for (const chain of chains.values()) {
+					const high = chain.filter((c) => rank(c) > rank(condition));
+					if (high.length > 0) above.set(high.join(" "), high);
+				}
+				for (const [value, parts] of values) {
+					const cells = [cover(parts, condition), ...[...above.values()].map((high) => cover(parts, condition, high))];
+					const merged = {};
+					for (const slot of slots ?? [ROOT]) {
+						const classes = cells.length === 1 ? cells[0][slot] ?? "" : mergeClassNames(cells.map((cell) => cell[slot] ?? "")).join(" ");
+						if (classes) merged[slot] = classes;
+					}
+					if (isEmpty(merged)) continue;
+					(out[value] ??= {})[condition] = classesOf(merged, slots, false);
+				}
+			}
+		}
+	}
+	const compounds = [...data.compoundVariants, ...data.compoundSlots];
+	const cuts = conditional ? compoundCuts() : compounds.map(() => []);
+	const c = compounds.map((compound, i) => {
+		const classes = classesOf(compound.parts, slots, false);
+		const cut = cuts[i];
+		if (cut.length === 0) return [compound.when, classes];
+		const required = [...data.variants].filter(([name]) => compound.when[name]?.length === 1).map(([name, values]) => values.get(compound.when[name][0]));
+		const ranges = {};
+		for (const interval of responsive.list) {
+			const parts = cover(compound.parts, interval.name, [], [data.base, ...required]);
+			if (!isEmpty(parts)) ranges[interval.key] = classesOf(parts, slots, false);
+		}
+		return isEmpty(ranges) ? [compound.when, classes] : [
+			compound.when,
+			classes,
+			ranges,
+			cut
+		];
+	});
+	/**
+	* The responsive variants whose conditions cut each compound's axis: those
+	* it names, those whose values style its longhands (their cells would
+	* outrank it otherwise), and those of every compound it shares longhands
+	* with, so compounds that compete are cut alike and their order decides.
+	*/
+	function compoundCuts() {
+		const variantLonghands = /* @__PURE__ */ new Map();
+		for (const name of responsiveVariants) {
+			const into = /* @__PURE__ */ new Map();
+			for (const parts of data.variants.get(name).values()) for (const [slot, set] of longhandsOfParts(parts)) {
+				const all = into.get(slot) ?? /* @__PURE__ */ new Set();
+				for (const longhand of set) all.add(longhand);
+				into.set(slot, all);
+			}
+			variantLonghands.set(name, into);
+		}
+		const own = compounds.map((compound) => longhandsOfParts(compound.parts));
+		const cut = compounds.map((compound, i) => new Set(responsiveVariants.filter((name) => name in compound.when || overlap(own[i], variantLonghands.get(name)))));
+		const group = compounds.map((_, i) => i);
+		const find = (i) => group[i] === i ? i : group[i] = find(group[i]);
+		for (let i = 0; i < compounds.length; i++) for (let j = i + 1; j < compounds.length; j++) if (overlap(own[i], own[j])) group[find(j)] = find(i);
+		const merged = /* @__PURE__ */ new Map();
+		for (const [i, set] of cut.entries()) {
+			const into = merged.get(find(i)) ?? /* @__PURE__ */ new Set();
+			for (const name of set) into.add(name);
+			merged.set(find(i), into);
+		}
+		return compounds.map((_, i) => responsiveVariants.filter((name) => merged.get(find(i)).has(name)));
+	}
+	const rules = /* @__PURE__ */ new Map();
+	const base = { ...data.base };
+	for (const slot of data.flatten) {
+		const flat = flattenBase(words(data.base[slot]).map((cls) => atoms.get(cls)), system);
+		if (!flat) continue;
+		rules.set(flat.className, flat.rule);
+		base[slot] = mergeClassNames([[flat.className, ...flat.kept].join(" ")]).join(" ");
+	}
+	const table = {
+		k: [...data.variants.keys()],
+		...slots ? { s: slots } : {},
+		b: classesOf(base, slots, true),
+		v,
+		c,
+		d,
+		...conditional ? { q: [responsive.props.map((c) => c.name), responsive.breakpoints] } : {},
+		...r ? { r } : {}
+	};
+	const used = /* @__PURE__ */ new Set();
+	for (const cls of tableClasses(table)) if (!rules.has(cls)) used.add(cls);
+	return {
+		data,
+		table,
+		atoms: [...used].sort().map((cls) => atoms.get(cls)),
+		rules: [...rules.values()].sort((a, b) => compareStrings(a.id, b.id)),
+		system
+	};
+}
+/**
+* `classes` (one canonical class string) under every one of `conditions`,
+* in the order the cascade gave them. Adding the same conditions to every
+* chain keeps their order, except where a chain already held, or implied,
+* one of them (`md` under `sm`): it keeps its chain, and the condition that
+* made it win over another class may now be in both. Where that turns a
+* winner into a loser, a loser the winner now holds wherever it does is
+* left out; otherwise the winner is also written under the loser's chain,
+* so wherever both hold it still wins. Classes whose chain no width
+* satisfies (`max-md:lg:`) are left out.
+*/
+function rechain(classes, conditions, atoms, system, responsive, longhands) {
+	if (classes === "") return "";
+	const ranked = (a, b, chain) => compareChains(chain(a), chain(b), system) || a.atom.tier - b.atom.tier;
+	const entries = [];
+	const seen = /* @__PURE__ */ new Set();
+	const add = (cls, atom, chain) => {
+		const id = `${cls}|${chain.join(" ")}`;
+		if (seen.has(id) || !satisfiable(chain, responsive)) return false;
+		seen.add(id);
+		entries.push({
+			cls,
+			atom,
+			chain
+		});
+		return true;
+	};
+	let kept = false;
+	for (const cls of classes.split(" ")) {
+		const atom = atoms.get(cls);
+		if (!atom) throw new Error(`vicss: the recipe class ${cls} has no atom`);
+		const added = conditions.filter((condition) => !implies(atom.chain, condition, responsive));
+		kept ||= added.length < conditions.length;
+		add(cls, atom, added.length > 0 ? canonicalChain([...atom.chain, ...added], system) : atom.chain);
+	}
+	const dead = /* @__PURE__ */ new Set();
+	for (let round = 0, changed = kept; changed && round < 8; round++) {
+		changed = false;
+		for (const winner of entries) for (const loser of entries) {
+			if (dead.has(winner) || dead.has(loser) || winner.atom === loser.atom) continue;
+			if (ranked(winner, loser, (e) => e.atom.chain) <= 0) continue;
+			if (ranked(winner, loser, (e) => e.chain) > 0) continue;
+			const theirs = longhands(loser.cls);
+			const mine = longhands(winner.cls);
+			if (!mine.some((longhand) => theirs.includes(longhand))) continue;
+			if (winner.chain.every((name) => loser.chain.includes(name)) && theirs.every((longhand) => mine.includes(longhand))) {
+				dead.add(loser);
+				changed = true;
+				continue;
+			}
+			const both = [.../* @__PURE__ */ new Set([...winner.chain, ...loser.chain])];
+			const chain = canonicalChain(both.filter((name) => !both.some((other) => other !== name && implies([other], name, responsive))), system);
+			if (chain.join(" ") !== winner.chain.join(" ") && add(winner.cls, winner.atom, chain)) changed = true;
+		}
+	}
+	const groups = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		if (dead.has(entry)) continue;
+		const { cls, atom, chain } = entry;
+		const labels = chain.map((name) => system.conditions.get(name).label);
+		const className = makeClassName(labels, atom.key, parseClassName(cls).value);
+		if (!atoms.has(className)) atoms.set(className, {
+			...atom,
+			className,
+			chain
+		});
+		const id = atom.chain.join(" ");
+		const group = groups.get(id) ?? {
+			chain: atom.chain,
+			names: []
+		};
+		group.names.push(className);
+		groups.set(id, group);
+	}
+	const ordered = [...groups.values()].sort((a, b) => compareChains(a.chain, b.chain, system));
+	if (ordered.length === 1) return ordered[0].names.sort().join(" ");
+	return mergeClassNames(ordered.map((group) => group.names.join(" "))).join(" ");
+}
+/** Parts as the table writes them: a style, or one per slot (empty ones only when `full`). */
+function classesOf(parts, slots, full) {
+	if (!slots) return toRecord(parts[ROOT] ?? "");
+	const out = {};
+	for (const slot of slots) {
+		const classes = parts[slot] ?? "";
+		if (full || classes !== "") out[slot] = toRecord(classes);
+	}
+	return out;
+}
+function isEmpty(record) {
+	for (const _ in record) return false;
+	return true;
+}
+/** Every class in a table. */
+function* tableClasses(table) {
+	const slotted = table.s !== void 0;
+	const of = function* (classes) {
+		const styles = slotted ? Object.values(classes) : [classes];
+		for (const style of styles) yield* Object.values(style);
+	};
+	yield* of(table.b);
+	for (const values of Object.values(table.v)) for (const c of Object.values(values)) yield* of(c);
+	for (const [, classes, ranges] of table.c) {
+		yield* of(classes);
+		for (const c of Object.values(ranges ?? {})) yield* of(c);
+	}
+	for (const values of Object.values(table.r ?? {})) for (const byCondition of Object.values(values)) for (const c of Object.values(byCondition)) yield* of(c);
+}
+/**
+* The table as a compact JS literal: identifier keys unquoted, no spaces,
+* each cell's classes as `emit` writes them.
+*/
+function printTable(table, emit) {
+	const slotted = table.s !== void 0;
+	const print = (value) => {
+		if (typeof value === "string" || typeof value === "number") return JSON.stringify(value);
+		if (Array.isArray(value)) return `[${value.map(print).join(",")}]`;
+		return `{${Object.entries(value).map(([key, item]) => `${propertyKey(key)}:${print(item)}`).join(",")}}`;
+	};
+	const cell = (classes) => slotted ? `{${Object.entries(classes).map(([slot, style]) => `${propertyKey(slot)}:${styleLiteral(style, emit)}`).join(",")}}` : styleLiteral(classes, emit);
+	const cells = (record, each) => `{${Object.entries(record).map(([key, item]) => `${propertyKey(key)}:${each(item)}`).join(",")}}`;
+	const parts = [`k:${print(table.k)}`];
+	if (table.s) parts.push(`s:${print(table.s)}`);
+	parts.push(`b:${cell(table.b)}`);
+	parts.push(`v:${cells(table.v, (values) => cells(values, cell))}`);
+	parts.push(`c:[${table.c.map(([when, classes, ranges, cut]) => `[${[
+		print(when),
+		cell(classes),
+		...ranges ? [cells(ranges, cell), print(cut ?? [])] : []
+	].join(",")}]`).join(",")}]`);
+	parts.push(`d:${print(table.d)}`);
+	if (table.q) parts.push(`q:${print(table.q)}`);
+	if (table.r) parts.push(`r:${cells(table.r, (values) => cells(values, (byCondition) => cells(byCondition, cell)))}`);
+	if (table.f) parts.push(`f:${cells(table.f, (style) => styleLiteral(style, emit))}`);
+	return `{${parts.join(",")}}`;
+}
+const resolvers = /* @__PURE__ */ new WeakMap();
+/**
+* The classes a call with these props resolves to. The runtime resolver
+* computes them, so a folded call and a runtime one agree class for class;
+* this checks the props first, since the call is literal: what the runtime
+* would ignore, warn about or resolve wrongly is a build error, with `fail`
+* given the path inside the props.
+*/
+function resolveRecipe(recipe, props, fail) {
+	checkProps(recipe, props, fail);
+	let resolve = resolvers.get(recipe);
+	if (!resolve) {
+		const { table } = recipe;
+		resolve = __vxRecipe(table, table.q ? __vxResponsive : void 0);
+		resolvers.set(recipe, resolve);
+	}
+	return resolve(props ?? {});
+}
+function checkProps(recipe, props, fail) {
+	const { table, data, system } = recipe;
+	const responsive = responsiveConditions(system);
+	if (props !== void 0 && props !== null && !isPlainObject(props)) throw fail("", "a recipe takes an object of variant props");
+	const given = props ?? {};
+	for (const key of Object.keys(given)) if (!Object.hasOwn(table.v, key)) throw fail(key, `\`${key}\` is not a variant of this recipe`, didYouMean(closestNames(key, table.k)) ?? (table.k.length > 0 ? `Its variants: ${table.k.join(", ")}.` : "It has no variants."));
+	const check = (name, raw, path) => {
+		if (raw === void 0 || raw === null) return table.d[name];
+		const key = valueKey(raw);
+		const values = table.v[name];
+		if (key === void 0 || !Object.hasOwn(values, key)) throw fail(path, `${describeValue(raw)} is not a value of \`${name}\``, didYouMean(closestNames(String(key), Object.keys(values))) ?? `Its values: ${Object.keys(values).join(", ")}.`);
+		return key;
+	};
+	const [order, breakpoints] = table.q ?? [[], 0];
+	/** Value without conditions per variant, and each responsive prop's values per condition. */
+	const values = /* @__PURE__ */ new Map();
+	const conditional = /* @__PURE__ */ new Map();
+	for (const name of table.k) {
+		const raw = given[name];
+		if (!isPlainObject(raw)) {
+			values.set(name, check(name, raw, name));
+			continue;
+		}
+		if (!data.responsive.has(name)) throw fail(name, `\`${name}\` is not a responsive variant`, "List it in the recipe's `responsive` to give it a value per breakpoint.");
+		values.set(name, check(name, raw.base, `${name}.base`));
+		const set = /* @__PURE__ */ new Map();
+		for (const [key, item] of Object.entries(raw)) {
+			if (key === "base" || item === void 0 || item === null) continue;
+			const condition = key.startsWith("_") ? key.slice(1) : void 0;
+			if (condition === void 0 || !order.includes(condition)) {
+				const range = condition === void 0 ? void 0 : responsive.byName.get(condition);
+				throw fail(`${name}.${key}`, `\`${key}\` is not a breakpoint or container condition`, range ? "Responsive values are mobile-first: give the value from each breakpoint on (`{ base: …, _md: … }`), which covers below and between breakpoints too." : didYouMean(closestNames(key.replace(/^_/, ""), order).map((n) => `_${n}`)) ?? (order.length > 0 ? "A responsive value takes `base` and breakpoint or container conditions." : "The design system has no breakpoints or containers to give values under."));
+			}
+			set.set(condition, check(name, item, `${name}.${key}`));
+		}
+		if (set.size > 0) conditional.set(name, set);
+	}
+	for (const [i, [when, , , cut]] of table.c.entries()) {
+		if (!cut) continue;
+		const points = order.filter((c) => cut.some((name) => conditional.get(name)?.has(c)));
+		if (points.length === 0) continue;
+		const current = new Map(values);
+		const held = ["", ...points].map((point) => {
+			for (const name of cut) {
+				const value = conditional.get(name)?.get(point);
+				if (value !== void 0) current.set(name, value);
+			}
+			return Object.keys(when).every((name) => when[name].includes(current.get(name) ?? ""));
+		});
+		const breakpoint = (c) => order.indexOf(c) < breakpoints;
+		if (breakpoint(points.at(-1))) continue;
+		const nv = data.compoundVariants.length;
+		const at = i < nv ? `compoundVariants.${i}` : `compoundSlots.${i - nv}`;
+		if (breakpoint(points[0])) {
+			if (!held.includes(true)) continue;
+			throw fail("", `the compound at ${at} depends on variants set under both breakpoint and container conditions, which no condition combines`, "Give the variants it depends on conditions of one kind.");
+		}
+		let j = points.length;
+		while (j >= 0 && held[j]) j--;
+		if (held.slice(0, j + 1).includes(true)) throw fail("", `the compound at ${at} holds below a container size or between two, which no container condition expresses`, "Container conditions are lower bounds: a compound can follow them from a size on.");
+	}
+}
+//#endregion
+//#region src/core/scope.ts
+/**
+* Local name of an anonymous or expression default export, Rollup's
+* convention. It cannot clash with an identifier.
+*/
+const DEFAULT_LOCAL = "*default*";
+/** Array methods that change the array; any other built-in leaves its object alone. */
+const MUTATING_METHODS = /* @__PURE__ */ new Set([
+	"push",
+	"pop",
+	"shift",
+	"unshift",
+	"splice",
+	"sort",
+	"reverse",
+	"fill",
+	"copyWithin",
+	"__defineGetter__",
+	"__defineSetter__"
+]);
+/** Keys that hold types or metadata, never values. */
+const SKIPPED_KEYS = /* @__PURE__ */ new Set([
+	"parent",
+	"range",
+	"loc",
+	"tokens",
+	"comments",
+	"typeAnnotation",
+	"typeArguments",
+	"typeParameters",
+	"returnType",
+	"superTypeArguments",
+	"implements"
+]);
+function analyzeScopes(program) {
+	const resolved = /* @__PURE__ */ new Map();
+	const references = [];
+	const exports = /* @__PURE__ */ new Map();
+	const starExports = [];
+	const moduleScope = {
+		parent: void 0,
+		bindings: /* @__PURE__ */ new Map(),
+		hoists: true
+	};
+	const writes = [];
+	const holders = /* @__PURE__ */ new Map();
+	/** The `const` bindings whose initializer is being visited, innermost last. */
+	const initializing = [];
+	/** `o`, `o.a.b`, `o[0]`, `(o as T).a`: the identifier at the root of a member chain. */
+	const rootOf = (node) => {
+		switch (node.type) {
+			case "Identifier": return node;
+			case "MemberExpression": return rootOf(node.object);
+			case "ChainExpression":
+			case "ParenthesizedExpression":
+			case "TSAsExpression":
+			case "TSSatisfiesExpression":
+			case "TSNonNullExpression":
+			case "TSTypeAssertion":
+			case "TSInstantiationExpression": return rootOf(node.expression);
+			default: return;
+		}
+	};
+	/** Records a write to the object at the root of `target`, when `target` reaches into one. */
+	const write = (target, node, call) => {
+		const root = rootOf(target);
+		if (root) writes.push([root, call ? {
+			node,
+			call
+		} : { node }]);
+	};
+	const isMember = (node) => {
+		const root = rootOf(node);
+		return root !== void 0 && root !== node;
+	};
+	const child = (parent, hoists = false) => ({
+		parent,
+		bindings: /* @__PURE__ */ new Map(),
+		hoists
+	});
+	const declare = (scope, binding) => {
+		scope.bindings.set(binding.name, binding);
+		if (binding.id) resolved.set(binding.id, binding);
+	};
+	const reference = (id, scope) => {
+		references.push([id, scope]);
+		if (initializing.length > 0) holders.set(id, [...initializing]);
+	};
+	/**
+	* Walks a binding or assignment pattern: default values and computed keys
+	* are expressions in `scope`, every identifier goes to `onId`.
+	*/
+	const walkPattern = (pattern, scope, onId, path) => {
+		switch (pattern.type) {
+			case "Identifier":
+				onId(pattern, path);
+				return;
+			case "AssignmentPattern":
+				visit(pattern.right, scope);
+				walkPattern(pattern.left, scope, onId, path);
+				return;
+			case "RestElement":
+				walkPattern(pattern.argument, scope, onId, void 0);
+				return;
+			case "ObjectPattern":
+				for (const property of pattern.properties) {
+					if (property.type === "RestElement") {
+						walkPattern(property, scope, onId, void 0);
+						continue;
+					}
+					if (property.computed) visit(property.key, scope);
+					const key = literalKey(property.key, property.computed);
+					walkPattern(property.value, scope, onId, path && key !== void 0 ? [...path, key] : void 0);
+				}
+				return;
+			case "ArrayPattern":
+				pattern.elements.forEach((element, index) => {
+					if (element) walkPattern(element, scope, onId, path && [...path, index]);
+				});
+				return;
+			case "TSParameterProperty":
+				walkPattern(pattern.parameter, scope, onId, path);
+				return;
+			default: visit(pattern, scope);
+		}
+	};
+	const assignTarget = (target, scope, node) => {
+		const members = [];
+		const collect = (pattern) => {
+			switch (pattern.type) {
+				case "AssignmentPattern":
+					collect(pattern.left);
+					return;
+				case "RestElement":
+					collect(pattern.argument);
+					return;
+				case "ObjectPattern":
+					for (const p of pattern.properties) collect(p.type === "RestElement" ? p : p.value);
+					return;
+				case "ArrayPattern":
+					for (const element of pattern.elements) if (element) collect(element);
+					return;
+				default: if (isMember(pattern)) members.push(pattern);
+			}
+		};
+		collect(target);
+		for (const member of members) write(member, node);
+		walkPattern(target, scope, (id) => reference(id, scope), void 0);
+	};
+	const declareVariables = (declaration, scope) => {
+		const kind = declaration.kind === "var" || declaration.kind === "let" ? declaration.kind : "const";
+		const disposable = declaration.kind === "using" || declaration.kind === "await using";
+		const target = kind === "var" ? hoistScope(scope) : scope;
+		for (const declarator of declaration.declarations) {
+			const init = disposable ? void 0 : declarator.init ?? void 0;
+			const declared = [];
+			walkPattern(declarator.id, scope, (id, path) => {
+				const binding = {
+					kind,
+					name: id.name,
+					node: declarator,
+					id,
+					init,
+					path: nonEmpty(path)
+				};
+				declare(target, binding);
+				declared.push(binding);
+			}, []);
+			if (!declarator.init) continue;
+			if (kind === "const") initializing.push(...declared);
+			visit(declarator.init, scope);
+			if (kind === "const") initializing.length -= declared.length;
+		}
+	};
+	const visitFunction = (fn, scope) => {
+		let outer = scope;
+		if (fn.type === "FunctionExpression" && fn.id) {
+			outer = child(scope);
+			declare(outer, {
+				kind: "function",
+				name: fn.id.name,
+				node: fn,
+				id: fn.id
+			});
+		}
+		const params = child(outer);
+		fn.params.forEach((param, index) => {
+			if ("decorators" in param && param.decorators) visitAll(param.decorators, params);
+			if (param.type === "Identifier" && param.name === "this") return;
+			walkPattern(param, params, (id, path) => declare(params, {
+				kind: "param",
+				name: id.name,
+				node: fn,
+				id,
+				path
+			}), [index]);
+		});
+		if (!fn.body) return;
+		if (fn.body.type === "BlockStatement") visitAll(fn.body.body, child(params, true));
+		else visit(fn.body, params);
+	};
+	const visitClass = (cls, scope) => {
+		if (cls.type === "ClassDeclaration" && cls.id) declare(scope, {
+			kind: "class",
+			name: cls.id.name,
+			node: cls,
+			id: cls.id
+		});
+		visitAll(cls.decorators, scope);
+		if (cls.superClass) visit(cls.superClass, scope);
+		const inner = child(scope);
+		if (cls.type === "ClassExpression" && cls.id) declare(inner, {
+			kind: "class",
+			name: cls.id.name,
+			node: cls,
+			id: cls.id
+		});
+		visitAll(cls.body.body, inner);
+	};
+	const exportDeclaration = (node, scope) => {
+		if (node.exportKind === "type") return;
+		const declaration = node.declaration;
+		if (declaration) {
+			visit(declaration, scope);
+			if ("declare" in declaration && declaration.declare) return;
+			for (const name of declaredNames(declaration)) exports.set(name, { local: name });
+			return;
+		}
+		const source = node.source?.value;
+		for (const specifier of node.specifiers) {
+			if (specifier.exportKind === "type") continue;
+			const local = exportName(specifier.local);
+			const exported = exportName(specifier.exported);
+			if (source !== void 0) exports.set(exported, {
+				source,
+				imported: local
+			});
+			else {
+				exports.set(exported, { local });
+				if (specifier.local.type === "Identifier") reference(specifier.local, scope);
+			}
+		}
+	};
+	const exportDefault = (node, scope) => {
+		const declaration = node.declaration;
+		switch (declaration.type) {
+			case "TSInterfaceDeclaration": return;
+			case "Identifier":
+				reference(declaration, scope);
+				exports.set("default", { local: declaration.name });
+				return;
+			case "FunctionDeclaration":
+			case "ClassDeclaration":
+				if (!declaration.id) {
+					const kind = declaration.type === "ClassDeclaration" ? "class" : "function";
+					declare(scope, {
+						kind,
+						name: DEFAULT_LOCAL,
+						node: declaration
+					});
+				}
+				visit(declaration, scope);
+				exports.set("default", { local: declaration.id?.name ?? "*default*" });
+				return;
+			default:
+				declare(scope, {
+					kind: "const",
+					name: DEFAULT_LOCAL,
+					node,
+					init: declaration
+				});
+				visit(declaration, scope);
+				exports.set("default", { local: DEFAULT_LOCAL });
+		}
+	};
+	const visitAll = (nodes, scope) => {
+		if (nodes) {
+			for (const node of nodes) if (node) visit(node, scope);
+		}
+	};
+	const visit = (node, scope) => {
+		switch (node.type) {
+			case "Identifier":
+				reference(node, scope);
+				return;
+			case "VariableDeclaration":
+				declareVariables(node, scope);
+				return;
+			case "FunctionDeclaration":
+			case "TSDeclareFunction":
+				if (node.id) declare(scope, {
+					kind: "function",
+					name: node.id.name,
+					node,
+					id: node.id
+				});
+				visitFunction(node, scope);
+				return;
+			case "FunctionExpression":
+			case "ArrowFunctionExpression":
+				visitFunction(node, scope);
+				return;
+			case "ClassDeclaration":
+			case "ClassExpression":
+				visitClass(node, scope);
+				return;
+			case "BlockStatement":
+				visitAll(node.body, child(scope));
+				return;
+			case "StaticBlock":
+				visitAll(node.body, child(scope, true));
+				return;
+			case "ForStatement": {
+				const loop = child(scope);
+				if (node.init) visit(node.init, loop);
+				if (node.test) visit(node.test, loop);
+				if (node.update) visit(node.update, loop);
+				visit(node.body, loop);
+				return;
+			}
+			case "ForInStatement":
+			case "ForOfStatement": {
+				const loop = child(scope);
+				if (node.left.type === "VariableDeclaration") visit(node.left, loop);
+				else assignTarget(node.left, loop, node);
+				visit(node.right, loop);
+				visit(node.body, loop);
+				return;
+			}
+			case "SwitchStatement": {
+				visit(node.discriminant, scope);
+				const cases = child(scope);
+				for (const switchCase of node.cases) {
+					if (switchCase.test) visit(switchCase.test, cases);
+					visitAll(switchCase.consequent, cases);
+				}
+				return;
+			}
+			case "CatchClause": {
+				const clause = child(scope);
+				if (node.param) walkPattern(node.param, clause, (id, path) => declare(clause, {
+					kind: "catch",
+					name: id.name,
+					node,
+					id,
+					path: nonEmpty(path)
+				}), []);
+				visit(node.body, clause);
+				return;
+			}
+			case "LabeledStatement":
+				visit(node.body, scope);
+				return;
+			case "BreakStatement":
+			case "ContinueStatement":
+			case "MetaProperty": return;
+			case "AssignmentExpression":
+				assignTarget(node.left, scope, node);
+				visit(node.right, scope);
+				return;
+			case "UpdateExpression":
+				if (isMember(node.argument)) write(node.argument, node);
+				visit(node.argument, scope);
+				return;
+			case "UnaryExpression":
+				if (node.operator === "delete" && isMember(node.argument)) write(node.argument, node);
+				visit(node.argument, scope);
+				return;
+			case "CallExpression":
+			case "NewExpression": {
+				const callee = unwrapExpression(node.callee);
+				if (node.type === "CallExpression" && callee.type === "MemberExpression" && (callee.computed || MUTATING_METHODS.has(callee.property.name))) write(callee.object, node);
+				for (const argument of node.arguments) {
+					const value = argument.type === "SpreadElement" ? argument.argument : argument;
+					if (node.type === "CallExpression") write(value, argument, node);
+					else write(value, argument);
+				}
+				visit(node.callee, scope);
+				visitAll(node.arguments, scope);
+				return;
+			}
+			case "MemberExpression":
+				visit(node.object, scope);
+				if (node.computed) visit(node.property, scope);
+				return;
+			case "Property":
+				if (node.computed) visit(node.key, scope);
+				visit(node.value, scope);
+				return;
+			case "MethodDefinition":
+			case "PropertyDefinition":
+			case "AccessorProperty":
+				visitAll(node.decorators, scope);
+				if (node.computed) visit(node.key, scope);
+				if (node.value) visit(node.value, scope);
+				return;
+			case "V8IntrinsicExpression":
+				visitAll(node.arguments, scope);
+				return;
+			case "ImportDeclaration":
+				if (node.importKind === "type") return;
+				for (const specifier of node.specifiers) {
+					if (specifier.type === "ImportSpecifier" && specifier.importKind === "type") continue;
+					declare(moduleScope, {
+						kind: "import",
+						name: specifier.local.name,
+						node: specifier,
+						id: specifier.local,
+						source: node.source.value,
+						imported: specifier.type === "ImportDefaultSpecifier" ? "default" : specifier.type === "ImportNamespaceSpecifier" ? "*" : exportName(specifier.imported)
+					});
+				}
+				return;
+			case "ExportNamedDeclaration":
+				exportDeclaration(node, scope);
+				return;
+			case "ExportDefaultDeclaration":
+				exportDefault(node, scope);
+				return;
+			case "ExportAllDeclaration":
+				if (node.exportKind === "type") return;
+				if (node.exported) exports.set(exportName(node.exported), {
+					source: node.source.value,
+					imported: "*"
+				});
+				else starExports.push(node.source.value);
+				return;
+			case "TSEnumDeclaration":
+				declare(scope, {
+					kind: "const",
+					name: node.id.name,
+					node,
+					id: node.id
+				});
+				return;
+			case "TSModuleDeclaration": {
+				if (node.declare || node.kind === "global" || node.id.type === "Literal") return;
+				let id = node.id;
+				while (id.type === "TSQualifiedName") id = id.left;
+				if (id.type === "Identifier") declare(scope, {
+					kind: "const",
+					name: id.name,
+					node,
+					id
+				});
+				if (node.body) visit(node.body, child(scope, true));
+				return;
+			}
+			case "TSModuleBlock":
+				visitAll(node.body, scope);
+				return;
+			case "TSImportEqualsDeclaration":
+				if (node.importKind !== "type") declare(scope, {
+					kind: "const",
+					name: node.id.name,
+					node,
+					id: node.id
+				});
+				return;
+			case "TSAsExpression":
+			case "TSSatisfiesExpression":
+			case "TSTypeAssertion":
+			case "TSNonNullExpression":
+			case "TSInstantiationExpression":
+			case "TSExportAssignment":
+				visit(node.expression, scope);
+				return;
+			default:
+				if (node.type.startsWith("TS")) return;
+				visitChildren(node, scope);
+		}
+	};
+	const visitChildren = (node, scope) => {
+		const record = node;
+		for (const key in record) {
+			if (SKIPPED_KEYS.has(key)) continue;
+			const value = record[key];
+			if (Array.isArray(value)) {
+				for (const item of value) if (isNode(item)) visit(item, scope);
+			} else if (isNode(value)) visit(value, scope);
+		}
+	};
+	visitAll(program.body, moduleScope);
+	for (const [id, scope] of references) for (let s = scope; s; s = s.parent) {
+		const binding = s.bindings.get(id.name);
+		if (binding) {
+			resolved.set(id, binding);
+			break;
+		}
+	}
+	const writesByBinding = /* @__PURE__ */ new Map();
+	for (const [id, entry] of writes) {
+		const binding = resolved.get(id);
+		if (binding) writesByBinding.set(binding, [...writesByBinding.get(binding) ?? [], entry]);
+	}
+	const holdersByBinding = /* @__PURE__ */ new Map();
+	for (const [id, within] of holders) {
+		const binding = resolved.get(id);
+		if (!binding) continue;
+		const list = holdersByBinding.get(binding) ?? [];
+		for (const holder of within) if (holder !== binding && !list.includes(holder)) list.push(holder);
+		holdersByBinding.set(binding, list);
+	}
+	return {
+		bindingOf: (id) => resolved.get(id),
+		moduleBindings: moduleScope.bindings,
+		exports,
+		starExports,
+		writesOf: (binding) => writesByBinding.get(binding) ?? [],
+		holdersOf: (binding) => holdersByBinding.get(binding) ?? []
+	};
+}
+function unwrapExpression(node) {
+	let inner = node;
+	while (inner.type === "ParenthesizedExpression" || inner.type === "TSAsExpression" || inner.type === "TSSatisfiesExpression" || inner.type === "TSNonNullExpression" || inner.type === "TSTypeAssertion" || inner.type === "TSInstantiationExpression" || inner.type === "ChainExpression") inner = inner.expression;
+	return inner;
+}
+function hoistScope(scope) {
+	let s = scope;
+	while (!s.hoists && s.parent) s = s.parent;
+	return s;
+}
+function nonEmpty(path) {
+	return path && path.length > 0 ? path : void 0;
+}
+function isNode(value) {
+	return typeof value === "object" && value !== null && typeof value.type === "string";
+}
+function exportName(name) {
+	return name.type === "Literal" ? name.value : name.name;
+}
+/** Key of a pattern property when it is known without evaluation. */
+function literalKey(key, computed) {
+	if (key.type === "Identifier" && !computed) return key.name;
+	if (key.type === "Literal" && (typeof key.value === "string" || typeof key.value === "number")) return String(key.value);
+}
+/** Names a declaration binds, for `export <declaration>`. */
+function declaredNames(declaration) {
+	switch (declaration.type) {
+		case "VariableDeclaration": return declaration.declarations.flatMap((d) => patternNames(d.id));
+		case "FunctionDeclaration":
+		case "ClassDeclaration":
+		case "TSEnumDeclaration": return declaration.id ? [declaration.id.name] : [];
+		case "TSModuleDeclaration": return declaration.id.type === "Identifier" ? [declaration.id.name] : [];
+		default: return [];
+	}
+}
+function patternNames(pattern) {
+	switch (pattern.type) {
+		case "Identifier": return [pattern.name];
+		case "AssignmentPattern": return patternNames(pattern.left);
+		case "RestElement": return patternNames(pattern.argument);
+		case "ObjectPattern": return pattern.properties.flatMap((p) => patternNames(p.type === "RestElement" ? p : p.value));
+		case "ArrayPattern": return pattern.elements.flatMap((e) => e ? patternNames(e) : []);
+		default: return [];
+	}
+}
+//#endregion
+//#region src/core/theme.ts
+/**
+* Scoped themes (PLAN §4.8, §5.9): `theme({ colors: { accent: "{colors.red.600}" } })`
+* compiles to a class that overrides tokens for a subtree, in `@layer
+* vicss.tokens` after the root rules.
+*
+* Custom properties resolve `var()` where they are declared, and descendants
+* inherit the result. So every element where a token's inputs change must
+* declare the token again: the root and each mode scope do for switching
+* tokens (`printTokens`), and a theme does on its own element, for the tokens
+* it overrides and every token that depends on them. Three sets of variables
+* make this compose with modes and with other themes:
+*
+* - `--x_T` and `--x_T-<mode>`: the theme's values for token `x`, set only on
+*   the theme's element (`initial` for a mode it gives no value), so they
+*   inherit to the subtree and a nested theme replaces them;
+* - `--x_S-<mode>`: `var(--mode_<mode>) var(--x_T-<mode>)`, the theme's value
+*   where the mode holds and invalid elsewhere, read from the mode's flag
+*   (`modeFlag`) since the token's own mode values are what the theme replaces;
+* - `--x`: the selection `var(--x_S-<highest>, …, var(--x_T, <the token's own
+*   value>))`, highest-ranked mode first like the root rules.
+*
+* A mode scope inside the theme recomputes `--x` from its own mode values, so
+* the theme also sets `--x_S-*` and `--x` on the scopes inside its element.
+* Those declarations depend only on the token, never on the theme, so when
+* nested themes' rules match one scope, whichever wins sets the same thing;
+* the nearest theme's `--x_T*` decide the value.
+*
+* A reference in a theme value is read once, where the theme applies:
+* `theme({ colors: { button: "{colors.brand}" } })` gives `button` the brand
+* of the theme's element. A nested theme that overrides `brand` changes
+* every config alias of `brand` below it (they are declared again on its
+* element), but not the outer theme's `button`: CSS keeps no unresolved
+* `var()` to inherit, and one theme cannot know what another references.
+*/
+/**
+* The merge key of theme classes: `sx(a, b)` keeps the last theme, like any
+* property. Two themes on one element would both set the custom properties
+* where their tokens meet (one token, or an alias each declares again), and
+* the sheet's order would pick the winner rather than the call's; nested
+* elements, or one theme with both overrides, compose instead. A folded
+* call that drops a theme warns (compile.ts), and so does a runtime call in
+* dev (runtime/dev.ts).
+*/
+const THEME_KEY = "vx-theme";
+const VAR = /var\((--[A-Za-z0-9_-]+)\)/g;
+/** The theme's value for `token`, its value per mode, and where the selection lands. */
+const themeVar = (token) => `${token.cssVar}_T`;
+const themeModeVar = (token, mode) => `${token.cssVar}_T-${mode}`;
+const selectedVar = (token, mode) => `${token.cssVar}_S-${mode}`;
+const graphs = /* @__PURE__ */ new WeakMap();
+function graphOf(system) {
+	let graph = graphs.get(system);
+	if (graph) return graph;
+	const tokens = [...system.tokens.values()].flatMap((table) => [...table.values()].filter((t) => !t.palette));
+	const byVar = new Map(tokens.map((t) => [t.cssVar, t]));
+	const refs = /* @__PURE__ */ new Map();
+	const dependents = new Map(tokens.map((t) => [t, /* @__PURE__ */ new Set()]));
+	for (const token of tokens) {
+		const own = /* @__PURE__ */ new Set();
+		for (const value of [token.value, ...Object.values(token.modes ?? {})]) for (const target of referencedTokens(value, byVar)) own.add(target);
+		refs.set(token, own);
+		for (const target of own) dependents.get(target).add(token);
+	}
+	const modes = scopedModes(system);
+	const valued = modes.filter((mode) => tokens.some((t) => t.modes?.[mode.name] !== void 0));
+	const scopes = /* @__PURE__ */ new Set();
+	for (const mode of modes) {
+		if (!valued.some((other) => other === mode || exclusive(mode, other))) continue;
+		for (const scope of mode.scope ?? []) if (scope.selector !== void 0 && !isRootScope(scope.selector)) scopes.add(scope.selector);
+	}
+	graph = {
+		tokens,
+		order: new Map(tokens.map((t, i) => [t, i])),
+		byVar,
+		refs,
+		dependents,
+		switching: switchingTokens(tokens),
+		modes,
+		scopes: [...scopes],
+		themeModes: /* @__PURE__ */ new Map()
+	};
+	graphs.set(system, graph);
+	return graph;
+}
+function referencedTokens(value, byVar) {
+	return [...value.matchAll(VAR)].flatMap(([, name]) => {
+		const token = byVar.get(name);
+		return token ? [token] : [];
+	});
+}
+function themeModes(graph, token) {
+	let modes = graph.themeModes.get(token);
+	if (modes) return modes;
+	const seen = /* @__PURE__ */ new Set();
+	const names = /* @__PURE__ */ new Set();
+	const visit = (t) => {
+		if (seen.has(t)) return;
+		seen.add(t);
+		for (const name of Object.keys(t.modes ?? {})) names.add(name);
+		for (const next of graph.refs.get(t) ?? []) visit(next);
+	};
+	visit(token);
+	modes = graph.modes.filter((mode) => names.has(mode.name));
+	graph.themeModes.set(token, modes);
+	return modes;
+}
+/**
+* `theme(overrides)`: the class `vx-theme_<hash>` and its rule. `overrides`
+* is `{ scale: { path: value | { base, _mode } } }`, by nested groups or
+* dotted paths; values are CSS values and may reference tokens, which take
+* their value on the theme's element (a nested theme that overrides the
+* referenced token leaves this override as it was; see the file comment).
+*/
+function compileTheme(overrides, system, options = {}) {
+	const graph = graphOf(system);
+	const error = (code, at, message, hint) => new VicssError(code, at ? `${at}: ${message}` : message, {
+		loc: options.locate?.(at),
+		hint
+	});
+	if (!isPlainObject(overrides)) throw error("BAD_CALL", "", "theme() takes token overrides by scale", "Write theme({ colors: { accent: \"{colors.red.600}\" } }).");
+	const found = /* @__PURE__ */ new Map();
+	const value = (raw, at) => {
+		let css;
+		let refs = [];
+		if (typeof raw === "number") {
+			if (!Number.isFinite(raw)) throw error("BAD_VALUE", at, `${raw} is not a CSS value`);
+			css = String(raw);
+		} else if (typeof raw === "string") {
+			if (raw.trim() === "") throw error("BAD_VALUE", at, "an empty string is not a CSS value");
+			try {
+				({value: css, tokens: refs} = resolveReferences(system, raw.trim()));
+			} catch (e) {
+				if (e instanceof VicssError) throw error(e.code, at, e.message, e.hint);
+				throw e;
+			}
+		} else throw error("BAD_VALUE", at, "expected a CSS value: a string or a number");
+		const bad = malformed(css);
+		if (bad) throw error("BAD_VALUE", at, `\`${css}\` is not a CSS value: ${bad}`);
+		const tokens = refs.map((ref) => lookupToken(system, ref.scale, ref.path));
+		const palette = tokens.find((token) => token.palette);
+		if (palette) throw error("BAD_VALUE", at, `\`{colors.${palette.path}}\` follows colorPalette, and a theme value takes the value it has where the theme applies`, "Name the palette's own token ({colors.blue.600}), or set colorPalette where the colour should follow it.");
+		const switching = tokens.find((token) => graph.switching.has(token));
+		if (switching) throw error("BAD_VALUE", at, `\`{${switching.scale}.${switching.path}}\` switches with modes, and a theme value takes the value it has where the theme applies`, "Give the override a value per mode instead: { base: …, _dark: … }.");
+		return {
+			css,
+			refs: tokens
+		};
+	};
+	const override = (scale, path, node, at) => {
+		const token = lookupToken(system, scale, path);
+		if (!token) throw error("UNKNOWN_TOKEN", at, `\`${scale}.${path}\` names no token`, didYouMean(suggestTokens(system, scale, path).map((p) => `${scale}.${p}`)));
+		if (token.palette) throw error("BAD_VALUE", at, `\`colors.${token.path}\` is a palette key, which colorPalette points at a palette's token`, "Override the palette's own tokens (colors.blue.600), or set colorPalette on the element.");
+		const first = found.get(token);
+		if (first) throw error("BAD_VALUE", at, `overrides \`${scale}.${token.path}\` again (${first.at})`);
+		const switchesWith = themeModes(graph, token);
+		const modes = /* @__PURE__ */ new Map();
+		const refs = [];
+		let base;
+		if (isPlainObject(node)) {
+			for (const [key, inner] of Object.entries(node)) {
+				if (inner === void 0) continue;
+				const here = `${at}.${key}`;
+				if (key === "base") {
+					const v = value(inner, here);
+					base = v.css;
+					refs.push(...v.refs);
+					continue;
+				}
+				const mode = key.slice(1);
+				if (!key.startsWith("_") || !system.modes.has(mode)) {
+					const known = [...system.modes].map((m) => `_${m}`);
+					throw error(key.startsWith("_") ? "UNKNOWN_CONDITION" : "BAD_VALUE", here, `\`${key}\` is not a mode`, didYouMean(closestNames(key, ["base", ...known])) ?? `A value per mode looks like { base: …, ${known[0] ?? "_dark"}: … }.`);
+				}
+				if (!switchesWith.some((def) => def.name === mode)) throw error("BAD_VALUE", here, `\`${scale}.${token.path}\` does not switch with \`${key}\`, so a theme cannot give it a value there`, `Give the token a \`${key}\` value in semanticTokens first; a theme overrides the modes a token has.`);
+				const v = value(inner, here);
+				modes.set(mode, v.css);
+				refs.push(...v.refs);
+			}
+			if (base === void 0) throw error("BAD_VALUE", at, "a value per mode needs a `base` value");
+		} else {
+			const v = value(node, at);
+			base = v.css;
+			refs.push(...v.refs);
+		}
+		found.set(token, {
+			token,
+			at,
+			base,
+			modes,
+			refs
+		});
+	};
+	const walk = (scale, tree, segments) => {
+		for (const [key, node] of Object.entries(tree)) {
+			if (node === void 0) continue;
+			const names = key === "DEFAULT" ? segments : [...segments, key];
+			const at = [
+				scale,
+				...segments,
+				key
+			].join(".");
+			if (isPlainObject(node) && !Object.keys(node).some((k) => k.startsWith("_")) && !(Object.keys(node).length === 1 && Object.hasOwn(node, "base")) && key !== "DEFAULT") walk(scale, node, names);
+			else override(scale, names.join("."), node, at);
+		}
+	};
+	for (const [scale, tree] of Object.entries(overrides)) {
+		if (tree === void 0) continue;
+		if (!isScaleName(scale)) throw error("UNKNOWN_TOKEN", scale, "is not a token scale", didYouMean(closestNames(scale, SCALES)) ?? `Scales: ${SCALES.join(", ")}.`);
+		if (scale === "breakpoints" || scale === "containers") throw error("BAD_VALUE", scale, "cannot be themed: media and container queries cannot read custom properties");
+		if (!isPlainObject(tree)) throw error("BAD_VALUE", scale, "expected tokens by name");
+		walk(scale, tree, []);
+	}
+	if (found.size === 0) throw error("BAD_CALL", "", "theme() needs at least one token to override");
+	const overridden = [...found.values()].sort((a, b) => graph.order.get(a.token) - graph.order.get(b.token));
+	const affected = dependentsOf(graph, overridden.map((o) => o.token));
+	checkCycles(graph, found, affected, error);
+	const normalized = overridden.map((o) => [
+		`${o.token.scale}.${o.token.path}`,
+		o.base,
+		Object.fromEntries(themeModes(graph, o.token).flatMap((m) => {
+			const v = o.modes.get(m.name);
+			return v === void 0 ? [] : [[m.name, v]];
+		}))
+	]);
+	const className = `${THEME_KEY}_${hash(stableStringify(normalized))}`;
+	const self = `.${escapeClassName(className)}`;
+	const selection = (token, fallback) => themeModes(graph, token).reduce((inner, mode) => `var(${selectedVar(token, mode.name)},${inner})`, fallback);
+	const selected = (token) => themeModes(graph, token).map((mode) => `${selectedVar(token, mode.name)}:var(${modeFlag(system, mode.name)}) var(${themeModeVar(token, mode.name)})`);
+	const own = [];
+	for (const token of graph.tokens) {
+		if (!affected.has(token)) continue;
+		const o = found.get(token);
+		if (o) {
+			own.push(`${themeVar(token)}:${o.base}`);
+			for (const mode of themeModes(graph, token)) own.push(`${themeModeVar(token, mode.name)}:${o.modes.get(mode.name) ?? "initial"}`);
+			own.push(...selected(token), `${token.cssVar}:${selection(token, `var(${themeVar(token)})`)}`);
+			continue;
+		}
+		for (const mode of graph.modes) {
+			const v = token.modes?.[mode.name];
+			if (v === void 0 || !referencedTokens(v, graph.byVar).some((r) => affected.has(r))) continue;
+			own.push(`${modeVar(token.cssVar, mode.name)}:var(${modeFlag(system, mode.name)}) ${v}`);
+		}
+		own.push(`${token.cssVar}:${selection(token, `var(${themeVar(token)},${classicValue(token, graph.modes)})`)}`);
+	}
+	const switched = overridden.filter((o) => themeModes(graph, o.token).length > 0);
+	const scopes = switched.length > 0 ? graph.scopes.map((scope) => isCompound(scope) ? `${self} ${scope}` : `${self} :is(${scope})`) : [];
+	let css = `:where(${self}){${own.join(";")}}`;
+	if (scopes.length > 0) {
+		const inner = switched.flatMap((o) => [...selected(o.token), `${o.token.cssVar}:${selection(o.token, `var(${themeVar(o.token)})`)}`]);
+		css += `:where(${scopes.join(",")}){${inner.join(";")}}`;
+	}
+	const tokens = /* @__PURE__ */ new Map();
+	for (const o of overridden) for (const t of [o.token, ...o.refs]) tokens.set(`${t.scale}:${t.path}`, {
+		scale: t.scale,
+		path: t.path
+	});
+	return {
+		id: className,
+		kind: "theme",
+		css: `@layer vicss.tokens{${css}}`,
+		tokens: [...tokens.values()],
+		overrides
+	};
+}
+/** `roots` and every token that depends on one, transitively. */
+function dependentsOf(graph, roots) {
+	const out = /* @__PURE__ */ new Set();
+	const visit = (token) => {
+		if (out.has(token)) return;
+		out.add(token);
+		for (const next of graph.dependents.get(token) ?? []) visit(next);
+	};
+	for (const root of roots) visit(root);
+	return out;
+}
+/**
+* The theme's element declares an overridden token from its theme value and
+* every dependent from its own value: an override that references a
+* dependent of itself makes a cycle, and the browser would drop every
+* property on it.
+*/
+function checkCycles(graph, found, affected, error) {
+	const next = (token) => {
+		return (found.get(token)?.refs ?? [...graph.refs.get(token) ?? []]).filter((r) => affected.has(r));
+	};
+	const done = /* @__PURE__ */ new Set();
+	const stack = [];
+	const visit = (token) => {
+		if (done.has(token)) return;
+		const index = stack.indexOf(token);
+		if (index !== -1) {
+			const cycle = [...stack.slice(index), token];
+			const start = cycle.find((t) => found.has(t));
+			throw error("BAD_VALUE", found.get(start).at, `the theme value refers back to itself: ${cycle.map((t) => `${t.scale}.${t.path}`).join(" → ")}`);
+		}
+		stack.push(token);
+		for (const target of next(token)) visit(target);
+		stack.pop();
+		done.add(token);
+	};
+	for (const token of found.keys()) visit(token);
+}
+//#endregion
+export { createLocator as C, opaqueAt as S, evaluate as _, buildRecipe as a, isIncomplete as b, resolveRecipe as c, baseRule as d, checkBases as f, blamedNode as g, NOT_HANDLED as h, RecipeValue as i, responsiveConditions as l, shadowedByEarlier as m, compileTheme as n, printTable as o, isBaseClass as p, analyzeScopes as r, recipeKey as s, THEME_KEY as t, baseAtoms as u, evaluateBinding as v, isOpaque as x, isDynamic as y };