@animus-ui/system 0.1.22 → 0.1.24

package/dist/{createClassResolver-DtHjTYa7.js → createClassResolver-DdrmIC5J.js}

@@ -1,8 +1,12 @@
-import { componentValues, decodedIdentifier, importantPriority, isUnitlessProperty, tokenize, variableReads } from "@animus-ui/properties";
+import { isUnitlessProperty } from "@animus-ui/properties";
 //#region src/runtime/is-dev.ts
 /**
 * The define token is tested as the initializer's own conditional, never from
-* inside the fallback: only there can a minifier drop the dev-gated code.
+* inside the fallback: only there can a minifier fold it. Dev-only work tests
+* the token in place as well, `typeof __ANIMUS_DEV__ === 'boolean' ?
+* __ANIMUS_DEV__ : IS_DEV`: esbuild inlines no module-level constant into a
+* chunk that starts with an import, so a gate on `IS_DEV` alone survives a
+* production bundle.
 */
 const IS_DEV = typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : (() => {
 	try {
@@ -13,6 +17,117 @@ const IS_DEV = typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : (() => {
 	}
 })();
 //#endregion
+//#region src/runtime/value-scan.ts
+const ESCAPE = String.raw`\\(?:[\da-fA-F]{1,6}(?:\r\n|[ \t\n\r\f])?|[^\n\r\f\da-fA-F])`;
+const NAME_CHAR = String.raw`(?:[\w\u0080-￿-]|${ESCAPE})`;
+/** One unit per match: a comment (1), whitespace (2), an opaque string or
+*  `<!--` (3), a name (4), a `!` (5), or any other character. In a string, a
+*  backslash escapes a CRLF as one newline. */
+const UNIT = new RegExp(String.raw`(\/\*[\s\S]*?(?:\*\/|$))|([ \t\n\r\f]+)|("(?:\\(?:\r\n|[\s\S])|[^"\\\n\r\f])*"?|'(?:\\(?:\r\n|[\s\S])|[^'\\\n\r\f])*'?|<!--)|((?:-?(?:[a-zA-Z_\u0080-￿]|${ESCAPE})|--)${NAME_CHAR}*)|(!)|[\s\S]`, "gy");
+/** An unquoted `url(` body, through its `)`. */
+const URL_BODY = /(?:\\[\s\S]|[^)\\])*\)?/y;
+const decode = (name) => name.replace(/\\([\da-fA-F]{1,6})(?:\r\n|[ \t\n\r\f])?|\\([\s\S])/g, (_, hex, char) => {
+	if (hex === void 0) return char ?? "";
+	const code = Number.parseInt(hex, 16);
+	return code > 0 && code <= 1114111 && (code < 55296 || code > 57343) ? String.fromCodePoint(code) : "�";
+});
+function units(css) {
+	const out = [];
+	UNIT.lastIndex = 0;
+	for (let match; (match = UNIT.exec(css)) !== null;) {
+		const start = match.index;
+		let end = UNIT.lastIndex;
+		if (match[1] !== void 0) continue;
+		if (match[2] !== void 0) out.push([
+			0,
+			start,
+			end
+		]);
+		else if (match[5] !== void 0) out.push([
+			1,
+			start,
+			end
+		]);
+		else if (match[4] !== void 0) {
+			const name = decode(match[4]);
+			const previous = out.at(-1);
+			if (!(previous !== void 0 && previous[0] === 3 && previous[2] === start && /[\d#@]/.test(css[start - 1])) && css[end] === "(") {
+				let body = end + 1;
+				while (/[ \t\n\r\f]/.test(css[body] ?? "")) body += 1;
+				if (name.toLowerCase() === "url" && css[body] !== "\"" && css[body] !== "'") {
+					URL_BODY.lastIndex = end + 1;
+					URL_BODY.exec(css);
+					end = UNIT.lastIndex = URL_BODY.lastIndex;
+					out.push([
+						3,
+						start,
+						end
+					]);
+				} else {
+					UNIT.lastIndex = end + 1;
+					out.push([
+						4,
+						start,
+						end + 1,
+						name
+					]);
+				}
+				continue;
+			}
+			out.push([
+				2,
+				start,
+				end,
+				name
+			]);
+		} else out.push([
+			3,
+			start,
+			end
+		]);
+	}
+	return out;
+}
+/** A value's trailing priority, as the tokenizer's `importantPriority` reads
+*  it: exactly one `!`; `value!` with nothing between is the shorthand, and
+*  `value !important`, the keyword in any case or escaped, the full form. */
+function trailingPriority(css) {
+	const trimmed = css.trimEnd();
+	const endsImportant = trimmed.length >= 9 && /^important$/i.test(trimmed.slice(-9));
+	if (!css.endsWith("!") && !endsImportant) return void 0;
+	const all = units(css);
+	const bangs = all.filter((unit) => unit[0] === 1);
+	if (bangs.length !== 1) return void 0;
+	const at = all.indexOf(bangs[0]);
+	if (at === all.length - 1) {
+		const previous = all[at - 1];
+		return previous !== void 0 && previous[0] !== 0 && previous[2] === bangs[0][1] ? {
+			spelling: "shorthand",
+			end: previous[2]
+		} : void 0;
+	}
+	const after = all.slice(at + 1).filter((unit) => unit[0] !== 0);
+	if (after.length !== 1 || after[0][0] !== 2 || !/^important$/i.test(after[0][3] ?? "")) return;
+	const value = all.slice(0, at).findLast((unit) => unit[0] !== 0);
+	return value && {
+		spelling: "important",
+		end: value[2]
+	};
+}
+/** Whether `css` reads `variable` through a `var()` at any depth, its
+*  fallbacks included: a `var` function, in any case or escaped, whose first
+*  argument is the variable's decoded name. */
+function readsVariable(css, variable) {
+	if (!css.includes("(")) return false;
+	const target = decode(variable);
+	const all = units(css);
+	return all.some((unit, index) => {
+		if (unit[0] !== 4 || unit[3]?.toLowerCase() !== "var") return false;
+		const first = all.slice(index + 1).find((next) => next[0] !== 0);
+		return first !== void 0 && first[0] === 2 && first[3] === target;
+	});
+}
+//#endregion
 //#region src/runtime/witness.ts
 const WITNESS_CAP = 5e3;
 function recordWitness(component, prop, value, outcome) {
@@ -117,15 +232,6 @@ function isAdmittedWithoutToken(value, dc) {
 	if (typeof value !== "string") return true;
 	return value === "0" || dc.keywords?.includes(value) === true || value.includes("{") || CONTAINER_UNIT.test(value) || dc.property !== void 0 && SIZE_PROPERTY.test(dc.property) && (SIZE_LENGTH.test(value) || value.startsWith("calc("));
 }
-/** A CSS-wide keyword is a cascade instruction, not a value: no transform
-*  sees it, and through an inline variable it would act on the variable. */
-const CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set([
-	"initial",
-	"inherit",
-	"unset",
-	"revert",
-	"revert-layer"
-]);
 function resolveEntry(value, dc) {
 	const key = String(value);
 	let scaleResolved = dc.scaleValues?.[key];
@@ -137,8 +243,7 @@ function resolveEntry(value, dc) {
 	if (scaleResolved == null && dc.strict && dc.scaleValues && !isAdmittedWithoutToken(value, dc)) return { entry: value };
 	const input = scaleResolved ?? value;
 	let transformed = input;
-	const keyword = scaleResolved == null && CSS_WIDE_KEYWORDS.has(value);
-	if (dc.transform && !keyword) {
+	if (dc.transform) {
 		try {
 			transformed = dc.transform(input);
 		} catch (cause) {
@@ -161,6 +266,29 @@ function warnDroppedValue(baseClassName, propName, serializedValue, customOwned)
 	}
 }
 /**
+* A runtime value that reaches a slot condition a production build removes:
+* the build's usage analysis saw no runtime value for the prop there, so the
+* value arrived in a way it does not follow, and in production it has
+* neither a class nor a slot. An entry a literal class serves, as
+* `applyDynamicProp` serves an `!important` literal, takes no slot.
+*/
+function warnPrunedSlot(baseClassName, propName, serializedValue, propValue, dc, propClasses, typed) {
+	if (!IS_DEV || !dc.productionConditions) return;
+	const production = dc.productionConditions;
+	const [responsive, entries] = responsiveEntries(propValue);
+	const servedByClass = (bp, value) => {
+		if (dc.kind === "declarations" || !responsive || typeof value !== "string") return false;
+		const priority = trailingPriority(value);
+		return !!priority && (priority.spelling === "important" || !isCustomOnly(slotProperties(dc))) && entryClass(propClasses, typed, bp, value) !== void 0;
+	};
+	const pruned = entries.filter(([bp, value]) => !production.includes(bp) && !servedByClass(bp, value)).map(([bp]) => bp);
+	if (pruned.length === 0) return;
+	const dedupeKey = `${baseClassName}|${propName}|pruned`;
+	if (warnedDrops.has(dedupeKey)) return;
+	warnedDrops.add(dedupeKey);
+	console.warn(`[animus:drop] ${baseClassName}: value ${serializedValue} on prop '${propName}' uses its runtime slot at ${pruned.join(", ")}, which a production build removes — in production it will not render there. The build found no runtime value for this prop, so this one arrives through code it does not follow, such as a library that clones the element.`);
+}
+/**
 * A value taken from a variant default emits `--{prop}-default`, not the
 * value, so the compose override rule misses and the parent's value wins.
 * An explicit `undefined` takes the default as an omitted prop does.
@@ -172,7 +300,7 @@ function applyVariantClasses(classes, baseClassName, props, config) {
 		if (value != null) {
 			const isDefault = props[prop] == null && vc.default != null;
 			classes.push(`${baseClassName}--${prop}-${isDefault ? "default" : value}`);
-			recordWitness(baseClassName, prop, value, "static");
+			if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) recordWitness(baseClassName, prop, value, "static");
 		}
 	}
 }
@@ -195,7 +323,7 @@ function applyStateClasses(classes, baseClassName, props, config, activeStates)
 	for (const state of config.states) if (props[state]) {
 		classes.push(`${baseClassName}--${state}`);
 		activeStates.push(state);
-		recordWitness(baseClassName, state, "true", "static");
+		if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) recordWitness(baseClassName, state, "true", "static");
 	}
 }
 const warnedInvalidResults = /* @__PURE__ */ new Set();
@@ -217,6 +345,23 @@ function warnIgnoredImportant(baseClassName, propName, value) {
 		console.warn(`[animus:important] ${baseClassName}: !important is ignored on the runtime-generated value ${JSON.stringify(value)} of prop '${propName}' — a runtime value reaches CSS through a variable, which cannot carry it; declare the value literally to keep !important`);
 	}
 }
+const warnedUnitless = /* @__PURE__ */ new Set();
+/**
+* A number reaching a slot that only custom properties read, with no
+* transform, stays unitless, as at build time; reported once per prop. Zero
+* is a length without a unit, and a scale key is not written as is.
+*/
+function warnUnitlessCustomProperty(baseClassName, propName, propValue, dc) {
+	if (!IS_DEV) return;
+	const properties = slotProperties(dc);
+	if (dc.transform || dc.transformId || dc.transformName || !isCustomOnly(properties)) return;
+	const number = responsiveEntries(propValue)[1].map(([, value]) => value).find((value) => typeof value === "number" && Number.isFinite(value) && value !== 0 && dc.scaleValues?.[String(value)] == null);
+	if (number === void 0) return;
+	const dedupeKey = `${baseClassName}|${propName}`;
+	if (warnedUnitless.has(dedupeKey)) return;
+	warnedUnitless.add(dedupeKey);
+	console.warn(`[animus:unit] ${baseClassName}: prop '${propName}' writes the number ${String(number)} to ${properties.join(", ")} without a unit — a custom property has no unit context, so the number stays unitless; give the value a unit, or bind a transform that adds one`);
+}
 const warnedThrows = /* @__PURE__ */ new Set();
 const warnedStrictMisses = /* @__PURE__ */ new Set();
 /** Keyed by value, like a throw: each rejected input is reported once. */
@@ -264,29 +409,17 @@ function warnTransformThrow(baseClassName, propName, transformName, serializedVa
 	}
 }
 /**
-* Whether `resolved` reads `currentVar` through a `var()` at any depth, its
-* fallbacks included: a function token whose decoded name is `var` in any
-* case, with the decoded variable name as its first argument. Comments,
-* quoted strings and `url()` read nothing. The extractor's static path skips
-* its `currentVar` write by the same predicate.
-*/
-function readsCurrentVar(resolved, currentVar) {
-	if (!resolved.includes("(")) return false;
-	const destination = decodedIdentifier(currentVar);
-	return variableReads(componentValues(tokenize(resolved))).some((read) => read.name === destination);
-}
-/**
 * A value that reads the prop's own `currentVar` takes the slot that leaves
-* it alone, since writing it would make the variable cyclic.
+* it alone, since writing it would make the variable cyclic. The extractor's
+* static path skips its `currentVar` write by the same predicate.
 */
 function slotClassFor(dc, resolved) {
-	return dc.currentVar !== void 0 && readsCurrentVar(resolved, dc.currentVar) ? `${dc.slotClass}--keep` : dc.slotClass;
+	return dc.currentVar !== void 0 && readsVariable(resolved, dc.currentVar) ? `${dc.slotClass}--keep` : dc.slotClass;
 }
 /**
 * Resolution is staged so a drop is atomic: one entry that misses a strict
 * scale, or one transform that throws or returns an invalid result, leaves
-* `classes` and `dynStyle` untouched. A responsive entry that is a CSS-wide
-* keyword takes the class extraction emits for it at that breakpoint.
+* `classes` and `dynStyle` untouched.
 *
 * A slot is a CSS variable, which cannot carry `!important`. A literal that
 * carries it, at a breakpoint, takes the class extraction emits for every
@@ -296,16 +429,15 @@ function slotClassFor(dc, resolved) {
 * priority, which `ignoredImportant` hears of. Where only custom properties
 * read the value, a trailing `!` is no priority, as at build time.
 */
-function applyDynamicProp(classes, dynStyle, propValue, dc, literalClass, ignoredImportant) {
+function applyDynamicProp(classes, dynStyle, propValue, dc, propClasses, typed, ignoredImportant) {
 	const staged = [];
 	const [responsive, entries] = responsiveEntries(propValue);
-	const lookup = (bp, value) => literalClass(bp === "_" ? value : { [bp]: value });
 	for (const [bp, authored] of entries) {
 		let value = authored;
 		let ignored;
-		const priority = typeof authored === "string" ? importantPriority(authored) : void 0;
+		const priority = typeof authored === "string" ? trailingPriority(authored) : void 0;
 		if (typeof authored === "string" && priority && (priority.spelling === "important" || !isCustomOnly(slotProperties(dc)))) {
-			const literal = responsive ? lookup(bp, authored) : void 0;
+			const literal = responsive ? entryClass(propClasses, typed, bp, authored) : void 0;
 			if (literal) {
 				staged.push([literal]);
 				continue;
@@ -313,11 +445,6 @@ function applyDynamicProp(classes, dynStyle, propValue, dc, literalClass, ignore
 			ignored = authored;
 			if (priority.spelling === "shorthand") value = `${authored.slice(0, priority.end)} !important`;
 		}
-		const keywordClass = responsive && CSS_WIDE_KEYWORDS.has(value) ? lookup(bp, value) : void 0;
-		if (keywordClass) {
-			staged.push([keywordClass]);
-			continue;
-		}
 		let resolved = resolveEntry(value, dc);
 		if (typeof resolved !== "string") return "entry" in resolved && responsive ? {
 			...resolved,
@@ -325,13 +452,8 @@ function applyDynamicProp(classes, dynStyle, propValue, dc, literalClass, ignore
 		} : resolved;
 		if (ignored !== void 0) {
 			ignoredImportant(ignored);
-			const end = importantPriority(resolved)?.end;
+			const end = trailingPriority(resolved)?.end;
 			resolved = end === void 0 ? resolved : resolved.slice(0, end);
-			const bareKeyword = CSS_WIDE_KEYWORDS.has(resolved) ? lookup(bp, resolved) : void 0;
-			if (bareKeyword) {
-				staged.push([bareKeyword]);
-				continue;
-			}
 		}
 		const slotClass = slotClassFor(dc, resolved);
 		staged.push(bp === "_" ? [
@@ -345,8 +467,16 @@ function applyDynamicProp(classes, dynStyle, propValue, dc, literalClass, ignore
 		]);
 	}
 	for (const [cls, varName, resolved] of staged) {
+		if (varName !== void 0 && resolved !== void 0) {
+			if (varName in dynStyle) {
+				const keep = `${dc.slotClass}--keep`;
+				const twin = cls.startsWith(keep) ? dc.slotClass + cls.slice(keep.length) : keep + cls.slice(dc.slotClass.length);
+				const at = classes.indexOf(cls);
+				classes.splice(at >= 0 ? at : classes.indexOf(twin), 1);
+			}
+			dynStyle[varName] = resolved;
+		}
 		classes.push(cls);
-		if (varName !== void 0 && resolved !== void 0) dynStyle[varName] = resolved;
 	}
 	return null;
 }
@@ -379,6 +509,29 @@ function applyDeclarationProp(classes, dynStyle, propValue, dc) {
 	return null;
 }
 /**
+* The static class of `value` written alone at breakpoint `bp` (`_` the
+* base), keyed as extraction keys it.
+*/
+function entryClass(propClasses, typed, bp, value) {
+	return propClasses?.[(typed ? typedValueKey : serializeValueKey)(bp === "_" ? value : { [bp]: value })];
+}
+/**
+* The static classes of a responsive value's entries, when every entry has
+* one: extraction gives a value proven to be one of a few at each
+* breakpoint a class per entry, and no slot.
+*/
+function entryClasses(propValue, propClasses, typed) {
+	const [responsive, entries] = responsiveEntries(propValue);
+	if (!responsive || entries.length === 0) return void 0;
+	const found = [];
+	for (const [bp, value] of entries) {
+		const cls = entryClass(propClasses, typed, bp, value);
+		if (!cls) return void 0;
+		found.push(cls);
+	}
+	return found;
+}
+/**
 * A responsive value without its nullish breakpoints, so it keys the same
 * static class as the value written without them; `undefined` when none
 * remain, as if the prop were omitted.
@@ -390,6 +543,20 @@ function withoutAbsentBreakpoints(value) {
 	const present = entries.filter(([, entry]) => entry != null);
 	return present.length > 0 ? Object.fromEntries(present) : void 0;
 }
+/**
+* The config with each admitted prop named once, at its first position. An
+* extracted config lists every admitted group's props, and groups can share
+* one, as flexbox and grid share `alignItems`.
+*/
+function withUniqueSystemPropNames(config) {
+	const names = config.systemPropNames;
+	if (!names) return config;
+	const unique = [...new Set(names)];
+	return unique.length === names.length ? config : {
+		...config,
+		systemPropNames: unique
+	};
+}
 function resolveClasses(baseClassName, props, config, systemPropMap, dynamicPropConfig) {
 	const classes = [baseClassName];
 	let dynStyle;
@@ -399,33 +566,42 @@ function resolveClasses(baseClassName, props, config, systemPropMap, dynamicProp
 	applyStateClasses(classes, baseClassName, props, config, activeStates);
 	const systemPropNames = config.systemPropNames || [];
 	if (systemPropNames.length > 0) {
-		const { customPropMap, customDynamicConfig } = config;
+		const { customPropMap, customDynamicConfig, supersededBy } = config;
 		for (const propName of systemPropNames) {
 			const propValue = withoutAbsentBreakpoints(props[propName]);
 			if (propValue == null) continue;
+			if (supersededBy?.[propName]?.some((later) => withoutAbsentBreakpoints(props[later]) != null)) continue;
 			const key = serializeValueKey(propValue);
 			const customOwned = customPropMap?.[propName] !== void 0 || customDynamicConfig?.[propName] !== void 0;
 			const [classMap, typedProps] = customOwned ? [customPropMap, config.typedCustomProps] : [systemPropMap, config.typedSystemProps];
 			const typed = typedProps?.includes(propName) === true;
-			const cls = classMap?.[propName]?.[typed ? typedValueKey(propValue) : key];
-			if (cls) {
-				classes.push(cls);
-				recordWitness(baseClassName, propName, key, "static");
+			const propClasses = classMap?.[propName];
+			const cls = propClasses?.[typed ? typedValueKey(propValue) : key];
+			const found = cls ? [cls] : propClasses && entryClasses(propValue, propClasses, typed);
+			if (found) {
+				classes.push(...found);
+				if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) recordWitness(baseClassName, propName, key, "static");
 			} else {
 				const dc = customOwned ? customDynamicConfig?.[propName] : dynamicPropConfig?.[propName];
 				if (dc) {
 					const staged = dynStyle ?? {};
-					const failure = dc.kind === "declarations" ? applyDeclarationProp(classes, staged, propValue, dc) : applyDynamicProp(classes, staged, propValue, dc, (value) => classMap?.[propName]?.[(typed ? typedValueKey : serializeValueKey)(value)], (value) => warnIgnoredImportant(baseClassName, propName, value));
+					const failure = dc.kind === "declarations" ? applyDeclarationProp(classes, staged, propValue, dc) : applyDynamicProp(classes, staged, propValue, dc, propClasses, typed, (value) => {
+						if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) warnIgnoredImportant(baseClassName, propName, value);
+					});
 					if (failure === null) {
 						dynStyle = staged;
-						recordWitness(baseClassName, propName, key, "dynamic");
-					} else {
+						if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) {
+							recordWitness(baseClassName, propName, key, "dynamic");
+							warnPrunedSlot(baseClassName, propName, key, propValue, dc, propClasses, typed);
+							if (dc.kind !== "declarations") warnUnitlessCustomProperty(baseClassName, propName, propValue, dc);
+						}
+					} else if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) {
 						if ("shape" in failure) warnInvalidTransformResult(baseClassName, propName, failure.shape);
 						else if ("entry" in failure) warnStrictScaleMiss(baseClassName, propName, key, failure);
 						else warnTransformThrow(baseClassName, propName, dc.transformName, key, failure.cause);
 						recordWitness(baseClassName, propName, key, "drop");
 					}
-				} else {
+				} else if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) {
 					warnDroppedValue(baseClassName, propName, key, customOwned);
 					recordWitness(baseClassName, propName, key, "drop");
 				}
@@ -439,19 +615,104 @@ function resolveClasses(baseClassName, props, config, systemPropMap, dynamicProp
 	};
 }
 //#endregion
+//#region src/runtime/uncompiled.ts
+/**
+* What rendering a component that Animus did not compile does: nothing, a
+* console warning once per component, or a thrown error on every render.
+* Without compilation its classes are empty and no CSS exists for it.
+* Production stays silent until the project owner chooses its level, and its
+* bundles carry no report: the calls in `createComponent` and
+* `createClassResolver` test the define token in place, which a minifier
+* removes. A production level changes this line and lifts those guards.
+*/
+const UNCOMPILED_RENDER = IS_DEV ? "warn" : "off";
+/**
+* The record a builder terminal attaches to the component it builds at
+* runtime. Only an uncompiled definition reaches a terminal: a compiled
+* one is replaced with the component's extracted classes. `undefined` when
+* uncompiled renders are not reported.
+*/
+function uncompiledDefinition(target) {
+	if (UNCOMPILED_RENDER === "off") return void 0;
+	return {
+		target,
+		origin: declaringModule((/* @__PURE__ */ new Error()).stack),
+		reported: false
+	};
+}
+/**
+* Reports a render of an uncompiled definition at the configured level.
+* Defining or importing one reports nothing; only a render does.
+*/
+function reportUncompiledRender(definition, displayName) {
+	if (!definition) return;
+	if (UNCOMPILED_RENDER === "error") throw new Error(uncompiledMessage(definition, displayName));
+	if (definition.reported) return;
+	definition.reported = true;
+	console.warn(uncompiledMessage(definition, displayName));
+}
+function uncompiledMessage({ target, origin }, displayName) {
+	const component = displayName ? `${displayName} (${target})` : target;
+	const pkg = origin && packageOf(origin);
+	const declared = origin ? ` declared in ${origin}` : "";
+	const subject = pkg ? `the package ${pkg}` : "its module";
+	return `[animus:uncompiled] ${component}${declared} rendered without Animus compiling it: its classes are empty and no CSS exists for it. Add the Animus plugin for this app's host (Vite, Next.js, Rollup) so it compiles ${subject}, or build ${subject} with the Animus CLI.`;
+}
+/**
+* The caller of the builder terminal: the frame after the terminal's own.
+* Engines differ in frame syntax, so only `file:line:column` is read.
+*/
+function declaringModule(stack) {
+	return (stack ?? "").split("\n").map((line) => /((?:[a-z][\w+.-]*:\/\/|\/)[^\s()]+:\d+:\d+)/i.exec(line)?.[1]).filter((frame) => frame !== void 0)[2];
+}
+/**
+* The installed package a path lies in, as `node_modules` names it, or as
+* Vite's dependency optimizer names the file it bundles the package into:
+* `@scope/name/sub` becomes `.vite/deps/@scope_name_sub.js`, a `.` becomes
+* `__`, and a shared chunk names no package.
+*/
+function packageOf(path) {
+	const installed = /\/node_modules\/((?:@[^/]+\/)?[^/.][^/]*)\//.exec(path);
+	if (installed) return installed[1];
+	const optimized = /\/node_modules\/\.vite\/deps(?:_[^/]*)?\/([^/?#:]+?)\.m?js\b/.exec(path)?.[1];
+	if (!optimized || optimized.startsWith("chunk-")) return void 0;
+	const flat = optimized.replace(/__/g, ".");
+	return /^(@[^_]+_)?[^_]+/.exec(flat)?.[0].replace("_", "/");
+}
+//#endregion
 //#region src/runtime/createClassResolver.ts
 function serializeDynamicStyle(style) {
 	return Object.entries(style).map(([property, value]) => `${property}: ${value}`).join("; ");
 }
-function createClassResolver(className, config, systemPropMap, dynamicPropConfig) {
+function createClassResolver(className, resolverConfig, systemPropMap, dynamicPropConfig) {
+	const config = withUniqueSystemPropNames(resolverConfig);
 	const resolveAttributes = (props) => {
+		if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) reportUncompiledRender(config.uncompiled, void 0);
 		const { classes, dynamicStyle } = resolveClasses(className, props || {}, config, systemPropMap, dynamicPropConfig);
 		const attributes = { class: classes.join(" ") };
 		if (dynamicStyle && Object.keys(dynamicStyle).length > 0) attributes.style = serializeDynamicStyle(dynamicStyle);
 		return attributes;
 	};
-	const resolver = (props) => resolveClasses(className, props || {}, config, systemPropMap, dynamicPropConfig).classes.join(" ");
-	return Object.assign(resolver, { attrs: resolveAttributes });
+	const resolveProps = (props) => {
+		if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) reportUncompiledRender(config.uncompiled, void 0);
+		const { classes, dynamicStyle } = resolveClasses(className, props || {}, config, systemPropMap, dynamicPropConfig);
+		if (props?.className) classes.push(props.className);
+		const attributes = { className: classes.join(" ") };
+		const style = props?.style ? {
+			...dynamicStyle,
+			...props.style
+		} : dynamicStyle;
+		if (style && Object.keys(style).length > 0) attributes.style = style;
+		return attributes;
+	};
+	const resolver = (props) => {
+		if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) reportUncompiledRender(config.uncompiled, void 0);
+		return resolveClasses(className, props || {}, config, systemPropMap, dynamicPropConfig).classes.join(" ");
+	};
+	return Object.assign(resolver, {
+		attrs: resolveAttributes,
+		props: resolveProps
+	});
 }
 //#endregion
-export { resolveClasses as n, createClassResolver as t };
+export { withUniqueSystemPropNames as a, resolveClasses as i, reportUncompiledRender as n, IS_DEV as o, uncompiledDefinition as r, createClassResolver as t };

package/dist/{createComposedFamily-BbA_d0QH.js → createComposedFamily-BFoaDqk7.js}

@@ -1,4 +1,4 @@
-import { n as resolveClasses } from "./createClassResolver-DtHjTYa7.js";
+import { a as withUniqueSystemPropNames, i as resolveClasses, n as reportUncompiledRender, o as IS_DEV } from "./createClassResolver-DdrmIC5J.js";
 import { t as assertRootSlot } from "./assert-root-slot-C3Lp9MNJ.js";
 import { Children, cloneElement, createElement, forwardRef } from "react";
 //#region src/runtime/index.ts
@@ -117,25 +117,42 @@ function renderSlot(children, props, ref, variables) {
 function renderAsChild(children, props, ref) {
 	return renderSlot(children, props, ref);
 }
+/** Animus's classes, then the caller's. */
+function joinClassNames(classes, className) {
+	return className ? `${classes} ${className}` : classes;
+}
 /**
 * A string terminal renders `as` in place of its tag. A component terminal
 * always renders its component, which receives `as` and `asChild` like any
 * other prop, so its own wiring runs whatever element it ends up rendering.
+*
+* A component target may take `className` and `style` as callbacks that it
+* calls with its own state, as Base UI's do. It gets a callback in their
+* place, which merges the caller's result as a plain value merges: Animus's
+* classes first, and Animus's dynamic style over the caller's style.
 */
 function renderElement(element, filterProps, props, ref, classes, dynamicStyle) {
-	const target = typeof element === "string" ? props.as || element : element;
+	const ownsElement = typeof element === "string";
+	const target = ownsElement ? props.as || element : element;
+	const { className, style } = props;
+	const ownClassName = classes.join(" ");
 	const domProps = {
 		ref,
-		className: classes.join(" ")
+		className: !ownsElement && typeof className === "function" ? (state) => joinClassNames(ownClassName, className(state)) : joinClassNames(ownClassName, className)
 	};
 	forwardProps(props, filterProps, domProps);
-	if (dynamicStyle) domProps.style = props.style ? {
-		...props.style,
+	if (dynamicStyle && !ownsElement && typeof style === "function") domProps.style = (state) => ({
+		...style(state),
+		...dynamicStyle
+	});
+	else if (dynamicStyle) domProps.style = style ? {
+		...style,
 		...dynamicStyle
 	} : dynamicStyle;
 	return createElement(target, domProps);
 }
-function createComponent(element, className, config, systemPropMap, dynamicPropConfig) {
+function createComponent(element, className, componentConfig, systemPropMap, dynamicPropConfig) {
+	const config = withUniqueSystemPropNames(componentConfig);
 	const variantProps = config.variants ? Object.keys(config.variants) : [];
 	const stateProps = config.states || [];
 	const systemPropNames = config.systemPropNames || [];
@@ -147,10 +164,10 @@ function createComponent(element, className, config, systemPropMap, dynamicPropC
 		...systemPropNames
 	]);
 	const Component = forwardRef((props, ref) => {
+		if (typeof __ANIMUS_DEV__ === "boolean" ? __ANIMUS_DEV__ : IS_DEV) reportUncompiledRender(config.uncompiled, Component.displayName || void 0);
 		const { classes, dynamicStyle } = resolveClasses(className, props, config, systemPropMap, dynamicPropConfig);
-		if (props.className) classes.push(props.className);
 		if (props.asChild && ownsPolymorphism) {
-			const slotProps = { className: classes.join(" ") };
+			const slotProps = { className: joinClassNames(classes.join(" "), props.className) };
 			forwardProps(props, filterProps, slotProps);
 			return renderSlot(props.children, slotProps, ref, dynamicStyle);
 		}

package/dist/{createComposedFamily-BkrvSsfl.d.ts → createComposedFamily-BJQ5Cn76.d.ts}

@@ -1,4 +1,4 @@
-import { a as DynamicPropConfig, i as ClassResolverConfig, o as SystemPropMap } from "./createClassResolver-Do1nmvkf.js";
+import { a as ClassResolverConfig, o as DynamicPropConfig, s as SystemPropMap } from "./createClassResolver-C-UOgE_d.js";
 import { ForwardRefExoticComponent, ReactElement, ReactNode, Ref, forwardRef } from "react";
 //#region src/runtime/index.d.ts
 interface ComponentConfig extends ClassResolverConfig {}
@@ -28,7 +28,7 @@ type AnimusComponent = ReturnType<typeof forwardRef> & {
  * leaves its children out without `asChild`, where React would throw.
  */
 declare function renderAsChild(children: ReactNode, props: object, ref?: Ref<any>): ReactElement;
-declare function createComponent(element: ElementType, className: string, config: ComponentConfig, systemPropMap?: SystemPropMap, dynamicPropConfig?: DynamicPropConfig): AnimusComponent;
+declare function createComponent(element: ElementType, className: string, componentConfig: ComponentConfig, systemPropMap?: SystemPropMap, dynamicPropConfig?: DynamicPropConfig): AnimusComponent;
 //#endregion
 //#region src/runtime/createComposedFamily.d.ts
 interface ComposedFamilyConfig {
@@ -37,4 +37,4 @@ interface ComposedFamilyConfig {
 declare function createComposedFamily(slots: Record<string, ForwardRefExoticComponent<any>>, config: ComposedFamilyConfig): Record<string, ForwardRefExoticComponent<any>>;
 //#endregion
 export { createComponent as n, renderAsChild as r, createComposedFamily as t };
-//# sourceMappingURL=createComposedFamily-BkrvSsfl.d.ts.map
+//# sourceMappingURL=createComposedFamily-BJQ5Cn76.d.ts.map

package/dist/createComposedFamily-BJQ5Cn76.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComposedFamily-BJQ5Cn76.d.ts","names":[],"sources":["../src/runtime/index.ts","../src/runtime/createComposedFamily.ts"],"mappings":";;;UAqBU,wBAAwB;KAE7B,uBAAuB,MAAM;KAE7B,YAAY,YAAY;KAExB,kBAAkB,kBAAkB;EACvC;EACA,iBAAiB,SAAS;EAC1B,kBAAkB,SAAS,eAAe;;;;;;;;;;;;;;;;;;;;iBAyJ5B,cACd,UAAU,WACV,eACA,MAAM,WACL;iBAkDa,gBACd,SAAS,aACT,mBACA,iBAAiB,iBACjB,gBAAgB,eAChB,oBAAoB,oBACnB;;;UCrOO;EACR;;iBAGc,qBACd,OAAO,eAAe,iCACtB,QAAQ,uBACP,eAAe"}

package/dist/groups/index.d.ts

@@ -1,4 +1,4 @@
-import { J as NamedTransform } from "../index-C1AAiaiJ.js";
+import { J as NamedTransform } from "../index-CQ7BFlKp.js";
 //#region src/groups/index.d.ts
 export declare const color: {
   readonly color: {