clava 0.4.1 → 0.5.0

package/dist/index.js

@@ -1,4 +1,92 @@
 import clsx from "clsx";
+//#region src/refine-warning.ts
+function captureCreationFrame(skipFn) {
+	if (process.env.NODE_ENV === "production") return void 0;
+	if (typeof Error.captureStackTrace === "function") {
+		const holder = {};
+		Error.captureStackTrace(holder, skipFn);
+		return holder;
+	}
+	return /* @__PURE__ */ new Error();
+}
+function formatCreationStack(frame) {
+	let stack = frame.stack;
+	if (!stack) return void 0;
+	const newlineIdx = stack.indexOf("\n");
+	if (newlineIdx > 0) {
+		const firstLine = stack.slice(0, newlineIdx);
+		if (firstLine === "Error" || firstLine.startsWith("Error:")) stack = stack.slice(newlineIdx + 1);
+	}
+	const frames = stack.split("\n");
+	for (let i = 0; i < frames.length; i++) {
+		const line = frames[i]?.trim();
+		if (!line) continue;
+		if (isInternalCreationFrame(line)) continue;
+		if (line.includes("/node_modules/")) continue;
+		if (line.includes("\\node_modules\\")) continue;
+		if (line.includes("node:internal")) continue;
+		return `    ${line}`;
+	}
+}
+function isInternalCreationFrame(line) {
+	if (line.includes("captureCreationFrame")) return true;
+	if (line.startsWith("at cv ")) return true;
+	if (line.startsWith("at cv(")) return true;
+	if (line.startsWith("cv@")) return true;
+	return false;
+}
+function formatVariantValue(value) {
+	if (typeof value === "string") return JSON.stringify(value);
+	if (typeof value === "number") {
+		if (Number.isNaN(value)) return "NaN";
+		return String(value);
+	}
+	if (typeof value === "bigint") return `${value}n`;
+	if (value === void 0) return "undefined";
+	if (value === null) return "null";
+	if (typeof value === "boolean") return String(value);
+	if (typeof value === "symbol") return String(value);
+	if (typeof value === "function") return "[function]";
+	return "[object]";
+}
+function setVariantChange(into, key, from, to) {
+	into.set(key, {
+		from,
+		to
+	});
+}
+function accumulateUnstableVariantChanges(into, prev, next) {
+	for (const key in next) {
+		if (!Object.hasOwn(next, key)) continue;
+		if (!Object.is(prev[key], next[key])) setVariantChange(into, key, prev[key], next[key]);
+	}
+	for (const key in prev) {
+		if (!Object.hasOwn(prev, key)) continue;
+		if (Object.hasOwn(next, key)) continue;
+		setVariantChange(into, key, prev[key], void 0);
+	}
+}
+function formatVariantChanges(changes) {
+	return Array.from(changes).map(([key, { from, to }]) => {
+		return `${key}: ${formatVariantValue(from)} -> ${formatVariantValue(to)}`;
+	}).join(", ");
+}
+function warnRefineLimit({ runState, creationFrame, unstableChanges }) {
+	if (process.env.NODE_ENV === "production") return;
+	if (runState.warned) return;
+	runState.warned = true;
+	let message = "Clava: Maximum refine iterations exceeded. This can happen when a computed default variant or refine callback changes one of the variants on every run.";
+	if (unstableChanges && unstableChanges.size > 0) {
+		message += `\nVariant(s) that did not stabilize: ${Array.from(unstableChanges.keys()).join(", ")}.`;
+		message += `\nLatest variant changes before warning: ${formatVariantChanges(unstableChanges)}.`;
+	}
+	if (creationFrame) {
+		const creationStack = formatCreationStack(creationFrame);
+		if (creationStack) message += `\nComponent created at:\n${creationStack}`;
+	}
+	console.warn(message);
+}
+//#endregion
 //#region src/utils.ts
 const hasOwn = Object.prototype.hasOwnProperty;
 function isAsciiLetter(code) {
@@ -224,7 +312,6 @@ function isHTMLObjStyle(style) {
 const META_KEY = "__meta";
 const EMPTY_DEFAULTS = Object.freeze({});
 const MAX_REFINE_RUNS = 50;
-const REFINE_UNSTABLE_TRACKING_WINDOW = 10;
 function areVariantsEqual(a, b) {
 	for (const key in a) {
 		if (!Object.hasOwn(a, key)) continue;
@@ -236,48 +323,6 @@ function areVariantsEqual(a, b) {
 	}
 	return true;
 }
-function captureCreationFrame(skipFn) {
-	if (process.env.NODE_ENV === "production") return void 0;
-	if (typeof Error.captureStackTrace === "function") {
-		const holder = {};
-		Error.captureStackTrace(holder, skipFn);
-		return holder;
-	}
-	return /* @__PURE__ */ new Error();
-}
-function formatCreationStack(frame) {
-	let stack = frame.stack;
-	if (!stack) return void 0;
-	const newlineIdx = stack.indexOf("\n");
-	if (newlineIdx > 0) {
-		const firstLine = stack.slice(0, newlineIdx);
-		if (firstLine === "Error" || firstLine.startsWith("Error:")) stack = stack.slice(newlineIdx + 1);
-	}
-	return stack;
-}
-function accumulateUnstableVariantKeys(into, prev, next) {
-	for (const key in next) {
-		if (!Object.hasOwn(next, key)) continue;
-		if (!Object.is(prev[key], next[key])) into.add(key);
-	}
-	for (const key in prev) {
-		if (!Object.hasOwn(prev, key)) continue;
-		if (Object.hasOwn(next, key)) continue;
-		into.add(key);
-	}
-}
-function warnRefineLimit(runState, creationFrame, unstableKeys) {
-	if (process.env.NODE_ENV === "production") return;
-	if (runState.warned) return;
-	runState.warned = true;
-	let message = "Clava: Maximum refine iterations exceeded. This can happen when a refine callback calls setVariants or setDefaultVariants, but one of the variants changes on every run.";
-	if (unstableKeys && unstableKeys.size > 0) message += `\nVariant(s) that did not stabilize: ${Array.from(unstableKeys).join(", ")}.`;
-	if (creationFrame) {
-		const creationStack = formatCreationStack(creationFrame);
-		if (creationStack) message += `\nComponent created at:\n${creationStack}`;
-	}
-	console.warn(message);
-}
 function getExtUserVariantProps(userVariantProps, protectedVariants, changedVariants) {
 	const extUserVariantProps = {};
 	Object.assign(extUserVariantProps, userVariantProps);
@@ -305,6 +350,23 @@ function mergeVariants(target, source, skipKeys) {
 	}
 	return changed;
 }
+function mergeProtectedIntoBase(baseResolved, protectedVariants) {
+	if (!protectedVariants) return baseResolved;
+	let hasProtected = false;
+	for (const key in protectedVariants) {
+		if (!Object.hasOwn(protectedVariants, key)) continue;
+		hasProtected = true;
+		break;
+	}
+	if (!hasProtected) return baseResolved;
+	const resolved = {};
+	Object.assign(resolved, baseResolved);
+	for (const key in protectedVariants) {
+		if (!Object.hasOwn(protectedVariants, key)) continue;
+		resolved[key] = protectedVariants[key];
+	}
+	return resolved;
+}
 function getComponentMeta(component) {
 	return component[META_KEY];
 }
@@ -374,21 +436,11 @@ function collectVariantKeys(config) {
 	}
 	return Array.from(keys);
 }
-function isVariantDisabled(config, key) {
-	return config.variants?.[key] === null;
-}
 function getVariantValueKey(value) {
 	if (typeof value === "string") return value;
 	if (typeof value === "number") return String(value);
 	if (typeof value === "boolean") return String(value);
 }
-function isVariantValueDisabled(config, key, value) {
-	const valueKey = getVariantValueKey(value);
-	if (valueKey == null) return false;
-	const variant = config.variants?.[key];
-	if (!isRecordObject(variant)) return false;
-	return variant[valueKey] === null;
-}
 function collectDisabledVariantKeys(config) {
 	const keys = /* @__PURE__ */ new Set();
 	if (!config.variants) return keys;
@@ -569,6 +621,9 @@ function create({ transformClass = (className) => className } = {}) {
 		}
 		const variantEntryCount = variantEntryNames.length;
 		const functionVariantCount = functionVariantNames.length;
+		const computedDefaultNames = [];
+		const computedDefaultFns = [];
+		const defaultVariants = config.defaultVariants;
 		const staticDefaults = {};
 		if (extend) for (const ext of extend) {
 			const meta = getComponentMeta(ext);
@@ -580,7 +635,21 @@ function create({ transformClass = (className) => className } = {}) {
 			if (!isRecordObject(variantDef)) continue;
 			if (Object.hasOwn(variantDef, "false") && staticDefaults[name] === void 0) staticDefaults[name] = false;
 		}
-		if (config.defaultVariants) Object.assign(staticDefaults, config.defaultVariants);
+		if (defaultVariants) for (const name in defaultVariants) {
+			if (!Object.hasOwn(defaultVariants, name)) continue;
+			const value = defaultVariants[name];
+			if (typeof value === "function") {
+				computedDefaultNames.push(name);
+				computedDefaultFns.push(value);
+				continue;
+			}
+			if (value === void 0) {
+				Reflect.deleteProperty(staticDefaults, name);
+				continue;
+			}
+			staticDefaults[name] = value;
+		}
+		const computedDefaultCount = computedDefaultNames.length;
 		if (hasAnyDisabled) for (const key in staticDefaults) {
 			if (!Object.hasOwn(staticDefaults, key)) continue;
 			if (disabledVariantKeys.has(key)) {
@@ -609,14 +678,19 @@ function create({ transformClass = (className) => className } = {}) {
 			} else extBaseClassesArr.push(meta.baseClass);
 		}
 		const extCount = extMetas.length;
+		const inheritedComputedDefaultKeys = /* @__PURE__ */ new Set();
+		for (let i = 0; i < extCount; i++) {
+			const keys = extMetas[i].computedDefaultKeys;
+			for (const key of keys) inheritedComputedDefaultKeys.add(key);
+		}
 		const extMetasWithRefine = [];
 		for (let i = 0; i < extCount; i++) {
 			const meta = extMetas[i];
-			if (meta.resolveDefaults) extMetasWithRefine.push(meta);
+			if (meta.resolveRefine) extMetasWithRefine.push(meta);
 		}
 		const extMetasWithRefineCount = extMetasWithRefine.length;
 		const shouldCollectChangedVariants = extMetasWithRefineCount > 0;
-		const creationFrame = !!refine || extMetasWithRefineCount > 0 ? captureCreationFrame(cv) : void 0;
+		const creationFrame = !!refine || computedDefaultCount > 0 || extMetasWithRefineCount > 0 ? captureCreationFrame(cv) : void 0;
 		const functionVariantKeys = /* @__PURE__ */ new Set();
 		for (let i = 0; i < extCount; i++) {
 			const fnKeys = extMetas[i].functionVariantKeys;
@@ -627,6 +701,8 @@ function create({ transformClass = (className) => className } = {}) {
 		}
 		for (let i = 0; i < functionVariantCount; i++) functionVariantKeys.add(functionVariantNames[i]);
 		for (let i = 0; i < variantEntryCount; i++) functionVariantKeys.delete(variantEntryNames[i]);
+		const computedDefaultKeys = new Set(inheritedComputedDefaultKeys);
+		for (let i = 0; i < computedDefaultCount; i++) computedDefaultKeys.add(computedDefaultNames[i]);
 		let staticVariantsOverridingExtFn = null;
 		if (variantEntryCount > 0 && extCount > 0) for (let i = 0; i < variantEntryCount; i++) {
 			const name = variantEntryNames[i];
@@ -660,64 +736,42 @@ function create({ transformClass = (className) => className } = {}) {
 				out[key] = value;
 			}
 		}
-		const resolveDefaultsFn = refine || extMetasWithRefineCount > 0 ? (childDefaults, userProps = EMPTY_DEFAULTS) => {
-			const resolvedVariants = {};
-			Object.assign(resolvedVariants, staticDefaults);
-			for (const key in childDefaults) {
-				if (!Object.hasOwn(childDefaults, key)) continue;
-				const v = childDefaults[key];
-				if (v === void 0) continue;
-				resolvedVariants[key] = v;
-			}
-			for (const key in userProps) {
-				if (!Object.hasOwn(userProps, key)) continue;
-				const v = userProps[key];
-				if (v === void 0) continue;
-				resolvedVariants[key] = v;
+		const isOwnDisabledValue = (key, value) => {
+			if (disabledVariantKeys.has(key)) return true;
+			if (hasDisabledVariantValues) {
+				const valueKey = getVariantValueKey(value);
+				if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) return true;
 			}
-			const refineDefaults = {};
-			for (let i = 0; i < extMetasWithRefineCount; i++) {
-				const extDefaults = extMetasWithRefine[i].resolveDefaults(childDefaults, userProps);
-				for (const k in extDefaults) {
-					if (!Object.hasOwn(extDefaults, k)) continue;
-					refineDefaults[k] = extDefaults[k];
+			return false;
+		};
+		const filterOwnDisabledVariants = (input, fallback) => {
+			if (!hasAnyDisabled) return input;
+			let hasOwnDisabledValue = false;
+			for (const key in input) {
+				if (!Object.hasOwn(input, key)) continue;
+				const value = input[key];
+				if (isOwnDisabledValue(key, value)) {
+					hasOwnDisabledValue = true;
+					break;
 				}
 			}
-			if (refine) {
-				const ownVariants = {};
-				for (let i = 0; i < variantKeysLength; i++) {
-					const k = variantKeys[i];
-					if (Object.hasOwn(resolvedVariants, k)) ownVariants[k] = resolvedVariants[k];
+			if (!hasOwnDisabledValue) return input;
+			const filtered = {};
+			for (const key in input) {
+				if (!Object.hasOwn(input, key)) continue;
+				const value = input[key];
+				if (!isOwnDisabledValue(key, value)) {
+					filtered[key] = value;
+					continue;
 				}
-				refine({
-					variants: ownVariants,
-					setVariants: noop,
-					setDefaultVariants: (newDefaults) => {
-						for (const key in newDefaults) {
-							if (!Object.hasOwn(newDefaults, key)) continue;
-							const value = newDefaults[key];
-							if (userProps[key] !== void 0) continue;
-							if (isVariantDisabled(config, key)) continue;
-							if (isVariantValueDisabled(config, key, value)) continue;
-							refineDefaults[key] = value;
-						}
-					},
-					addClass: noop,
-					addStyle: noop
-				});
+				const fallbackValue = fallback[key];
+				if (fallbackValue !== void 0 && !isOwnDisabledValue(key, fallbackValue)) filtered[key] = fallbackValue;
 			}
-			return refineDefaults;
-		} : null;
+			return filtered;
+		};
 		function resolveVariantsHot(propsVariants) {
 			const defaults = {};
 			Object.assign(defaults, staticDefaults);
-			for (let i = 0; i < extMetasWithRefineCount; i++) {
-				const extDefaults = extMetasWithRefine[i].resolveDefaults(defaults, propsVariants);
-				for (const k in extDefaults) {
-					if (!Object.hasOwn(extDefaults, k)) continue;
-					defaults[k] = extDefaults[k];
-				}
-			}
 			for (const k in propsVariants) {
 				if (!Object.hasOwn(propsVariants, k)) continue;
 				const v = propsVariants[k];
@@ -729,7 +783,70 @@ function create({ transformClass = (className) => className } = {}) {
 			filterDisabledInto(defaults, result);
 			return result;
 		}
-		const runRefineContext = (resolved, userVariantProps, filterOwnVariants, collectOutput, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const runComputedDefaults = (resolved, defaultResolved, userVariantProps, filterOwnVariants, protectedVariantKeys) => {
+			if (computedDefaultCount === 0) return {
+				workingResolved: resolved,
+				changedVariants: null
+			};
+			let ownVariants = filterOwnVariants ? null : resolved;
+			const getOwnVariants = () => {
+				if (ownVariants) return ownVariants;
+				const filteredVariants = {};
+				for (let i = 0; i < variantKeysLength; i++) {
+					const key = variantKeys[i];
+					if (Object.hasOwn(resolved, key)) filteredVariants[key] = resolved[key];
+				}
+				ownVariants = filteredVariants;
+				return filteredVariants;
+			};
+			let updatedVariants = null;
+			let changedVariants = null;
+			const ensureUpdated = () => {
+				if (updatedVariants) return updatedVariants;
+				const updated = {};
+				Object.assign(updated, resolved);
+				updatedVariants = updated;
+				return updated;
+			};
+			for (let i = 0; i < computedDefaultCount; i++) {
+				const key = computedDefaultNames[i];
+				if (Object.hasOwn(userVariantProps, key)) {
+					if (userVariantProps[key] !== void 0) continue;
+				}
+				if (protectedVariantKeys?.has(key)) continue;
+				const variantSnapshot = getOwnVariants();
+				const defaultValue = inheritedComputedDefaultKeys.has(key) ? variantSnapshot[key] : defaultResolved[key];
+				const value = computedDefaultFns[i]({
+					defaultValue,
+					variants: variantSnapshot
+				});
+				if (hasAnyDisabled) {
+					if (disabledVariantKeys.has(key)) continue;
+					const valueKey = getVariantValueKey(value);
+					if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
+				}
+				if (value === void 0) {
+					if (!Object.hasOwn(variantSnapshot, key)) continue;
+					if (shouldCollectChangedVariants) {
+						changedVariants ??= {};
+						changedVariants[key] = value;
+					}
+					Reflect.deleteProperty(ensureUpdated(), key);
+					continue;
+				}
+				if (Object.is(variantSnapshot[key], value)) continue;
+				if (shouldCollectChangedVariants) {
+					changedVariants ??= {};
+					changedVariants[key] = value;
+				}
+				ensureUpdated()[key] = value;
+			}
+			return {
+				workingResolved: updatedVariants ?? resolved,
+				changedVariants
+			};
+		};
+		const runRefineContext = (resolved, userVariantProps, filterOwnVariants, collectOutput, applyVariantUpdates, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
 			let workingResolved = resolved;
 			let cClasses = null;
 			let cStyle = null;
@@ -770,12 +887,13 @@ function create({ transformClass = (className) => className } = {}) {
 				const result = refine({
 					variants: ownVariants,
 					setVariants: (newVariants) => {
+						if (!applyVariantUpdates) return;
 						if (!hasAnyDisabled) {
 							for (const key in newVariants) {
 								if (!Object.hasOwn(newVariants, key)) continue;
 								const value = newVariants[key];
 								setChangedVariant(key, value, true);
-								if (getCurrentVariantValue(key) === value) continue;
+								if (Object.is(getCurrentVariantValue(key), value)) continue;
 								ensureUpdated()[key] = value;
 							}
 							return;
@@ -789,24 +907,7 @@ function create({ transformClass = (className) => className } = {}) {
 								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
 							}
 							setChangedVariant(key, value, true);
-							if (getCurrentVariantValue(key) === value) continue;
-							ensureUpdated()[key] = value;
-						}
-					},
-					setDefaultVariants: (newDefaults) => {
-						for (const key in newDefaults) {
-							if (!Object.hasOwn(newDefaults, key)) continue;
-							if (userVariantProps[key] !== void 0) continue;
-							if (protectedVariantKeys?.has(key)) continue;
-							const value = newDefaults[key];
-							if (hasAnyDisabled) {
-								if (disabledVariantKeys.has(key)) continue;
-								const valueKey = getVariantValueKey(value);
-								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
-							}
-							setChangedVariant(key, value);
-							if (pendingProtectedVariants) pendingProtectedVariants[key] = value;
-							if (getCurrentVariantValue(key) === value) continue;
+							if (Object.is(getCurrentVariantValue(key), value)) continue;
 							ensureUpdated()[key] = value;
 						}
 					},
@@ -847,18 +948,11 @@ function create({ transformClass = (className) => className } = {}) {
 				style: cStyle
 			};
 		};
-		const computeOnce = (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const computeOnce = (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved = resolved, renderOnly = false) => {
 			let workingResolved = resolved;
 			let cClasses = null;
 			let cStyle = null;
 			let changedVariants = null;
-			if (refine) {
-				const refineResult = runRefineContext(resolved, userVariantProps, true, true, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
-				workingResolved = refineResult.workingResolved;
-				cClasses = refineResult.classes;
-				cStyle = refineResult.style;
-				changedVariants = refineResult.changedVariants;
-			}
 			if (hasExtend) {
 				let extSkipKeys;
 				if (skipKeys === null) extSkipKeys = staticExtSkipKeys;
@@ -886,15 +980,31 @@ function create({ transformClass = (className) => className } = {}) {
 				for (let i = 0; i < extCount; i++) {
 					if (hasIsolatedExt && extIsolated[i]) {
 						const extClasses = [];
-						workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, extClasses, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+						workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, extClasses, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved, renderOnly);
 						if (extClasses.length > 0) {
 							const joined = clsx(extClasses);
 							if (joined.length > 0) classesOut.push(extMetas[i].transformClass(joined));
 						}
-					} else workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+					} else workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved, renderOnly);
+					workingResolved = filterOwnDisabledVariants(workingResolved, defaultResolved);
 					if (protectedVariants && extMetasWithRefineCount > 0) Object.assign(extUserVariantProps, protectedVariants);
 				}
 			}
+			if (!renderOnly && computedDefaultCount > 0) {
+				const computedResult = runComputedDefaults(workingResolved, defaultResolved, userVariantProps, true, protectedVariantKeys);
+				workingResolved = computedResult.workingResolved;
+				changedVariants = computedResult.changedVariants;
+			}
+			if (refine) {
+				const refineResult = runRefineContext(workingResolved, userVariantProps, true, true, !renderOnly, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+				workingResolved = refineResult.workingResolved;
+				cClasses = refineResult.classes;
+				cStyle = refineResult.style;
+				if (refineResult.changedVariants) {
+					changedVariants ??= {};
+					Object.assign(changedVariants, refineResult.changedVariants);
+				}
+			}
 			if (hasBaseStyle) Object.assign(styleOut, baseStyle);
 			const ownSkipKeys = skipKeys;
 			const ownSkipValues = skipValues;
@@ -937,12 +1047,13 @@ function create({ transformClass = (className) => className } = {}) {
 			if (cStyle) Object.assign(styleOut, cStyle);
 			return workingResolved;
 		};
-		const compute = !refine && extMetasWithRefineCount === 0 ? computeOnce : (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const compute = !refine && computedDefaultCount === 0 && extMetasWithRefineCount === 0 ? computeOnce : (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, incomingDefaultResolved = resolved, renderOnly = false) => {
+			if (renderOnly) return computeOnce(resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, incomingDefaultResolved, true);
 			runState ??= { remaining: MAX_REFINE_RUNS };
 			protectedVariants ??= {};
 			protectedVariantKeys ??= /* @__PURE__ */ new Set();
 			let workingResolved = resolved;
-			let unstableKeys = null;
+			let unstableChanges = null;
 			let lastClasses = [];
 			let lastStyle = {};
 			let isFirstRun = true;
@@ -959,23 +1070,34 @@ function create({ transformClass = (className) => className } = {}) {
 				const nextPendingProtectedVariants = {};
 				const nextClasses = useDirectOutput ? classesOut : [];
 				const nextStyle = useDirectOutput ? styleOut : {};
-				const nextResolved = computeOnce(workingResolved, userVariantProps, skipKeys, skipValues, nextClasses, nextStyle, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				const defaultResolved = mergeProtectedIntoBase(incomingDefaultResolved, protectedVariants);
+				const nextResolved = computeOnce(workingResolved, userVariantProps, skipKeys, skipValues, nextClasses, nextStyle, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys, defaultResolved);
 				let protectedChanged;
 				if (pendingProtectedVariants) protectedChanged = mergeVariants(pendingProtectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
 				else protectedChanged = mergeVariants(protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
 				if (!protectedChanged && (nextResolved === workingResolved || areVariantsEqual(workingResolved, nextResolved))) {
-					if (!useDirectOutput) {
+					if (nextResolved !== workingResolved) {
+						if (useDirectOutput) {
+							classesOut.length = classCount;
+							for (const key in styleOut) if (Object.hasOwn(styleOut, key)) Reflect.deleteProperty(styleOut, key);
+						}
+						computeOnce(nextResolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, null, protectedVariantKeys, defaultResolved, true);
+					} else if (!useDirectOutput) {
 						for (let i = 0; i < nextClasses.length; i++) classesOut.push(nextClasses[i]);
 						Object.assign(styleOut, nextStyle);
 					}
 					return nextResolved;
 				}
-				if (process.env.NODE_ENV !== "production" && runState.remaining < REFINE_UNSTABLE_TRACKING_WINDOW) {
-					if (!unstableKeys) unstableKeys = /* @__PURE__ */ new Set();
-					accumulateUnstableVariantKeys(unstableKeys, workingResolved, nextResolved);
+				if (process.env.NODE_ENV !== "production" && runState.remaining < 10) {
+					if (!unstableChanges) unstableChanges = /* @__PURE__ */ new Map();
+					accumulateUnstableVariantChanges(unstableChanges, workingResolved, nextResolved);
 				}
 				if (useDirectOutput && runState.remaining === 0) {
-					warnRefineLimit(runState, creationFrame, unstableKeys);
+					warnRefineLimit({
+						runState,
+						creationFrame,
+						unstableChanges
+					});
 					return nextResolved;
 				}
 				if (useDirectOutput) {
@@ -988,41 +1110,55 @@ function create({ transformClass = (className) => className } = {}) {
 				workingResolved = nextResolved;
 				isFirstRun = false;
 			}
-			warnRefineLimit(runState, creationFrame, unstableKeys);
+			warnRefineLimit({
+				runState,
+				creationFrame,
+				unstableChanges
+			});
 			for (let i = 0; i < lastClasses.length; i++) classesOut.push(lastClasses[i]);
 			Object.assign(styleOut, lastStyle);
 			return workingResolved;
 		};
-		const resolveRefineOnce = (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const resolveRefineOnce = (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved = resolved) => {
 			let workingResolved = resolved;
 			let changedVariants = null;
-			if (refine) {
-				const refineResult = runRefineContext(resolved, userVariantProps, filterOwnVariants, false, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
-				workingResolved = refineResult.workingResolved;
-				changedVariants = refineResult.changedVariants;
-			}
 			if (extMetasWithRefineCount > 0) {
 				const extUserVariantProps = getExtUserVariantProps(userVariantProps, protectedVariants ?? null, changedVariants);
 				for (let i = 0; i < extMetasWithRefineCount; i++) {
 					const resolveRefine = extMetasWithRefine[i].resolveRefine;
 					if (!resolveRefine) continue;
-					workingResolved = resolveRefine(workingResolved, extUserVariantProps, true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+					workingResolved = resolveRefine(workingResolved, extUserVariantProps, true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, defaultResolved);
+					workingResolved = filterOwnDisabledVariants(workingResolved, defaultResolved);
 					if (protectedVariants) Object.assign(extUserVariantProps, protectedVariants);
 				}
 			}
+			if (computedDefaultCount > 0) {
+				const computedResult = runComputedDefaults(workingResolved, defaultResolved, userVariantProps, filterOwnVariants, protectedVariantKeys);
+				workingResolved = computedResult.workingResolved;
+				changedVariants = computedResult.changedVariants;
+			}
+			if (refine) {
+				const refineResult = runRefineContext(workingResolved, userVariantProps, filterOwnVariants, false, true, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+				workingResolved = refineResult.workingResolved;
+				if (refineResult.changedVariants) {
+					changedVariants ??= {};
+					Object.assign(changedVariants, refineResult.changedVariants);
+				}
+			}
 			return workingResolved;
 		};
-		const resolveRefine = refine || extMetasWithRefineCount > 0 ? (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+		const resolveRefine = refine || computedDefaultCount > 0 || extMetasWithRefineCount > 0 ? (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys, incomingDefaultResolved = resolved) => {
 			runState ??= { remaining: MAX_REFINE_RUNS };
 			protectedVariants ??= {};
 			protectedVariantKeys ??= /* @__PURE__ */ new Set();
 			let workingResolved = resolved;
-			let unstableKeys = null;
+			let unstableChanges = null;
 			let reachedLimit = true;
 			while (runState.remaining > 0) {
 				runState.remaining -= 1;
 				const nextPendingProtectedVariants = {};
-				const nextResolved = resolveRefineOnce(workingResolved, userVariantProps, filterOwnVariants, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				const defaultResolved = mergeProtectedIntoBase(incomingDefaultResolved, protectedVariants);
+				const nextResolved = resolveRefineOnce(workingResolved, userVariantProps, filterOwnVariants, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys, defaultResolved);
 				let protectedChanged;
 				if (pendingProtectedVariants) protectedChanged = mergeVariants(pendingProtectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
 				else protectedChanged = mergeVariants(protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
@@ -1031,13 +1167,17 @@ function create({ transformClass = (className) => className } = {}) {
 					reachedLimit = false;
 					break;
 				}
-				if (process.env.NODE_ENV !== "production" && runState.remaining < REFINE_UNSTABLE_TRACKING_WINDOW) {
-					if (!unstableKeys) unstableKeys = /* @__PURE__ */ new Set();
-					accumulateUnstableVariantKeys(unstableKeys, workingResolved, nextResolved);
+				if (process.env.NODE_ENV !== "production" && runState.remaining < 10) {
+					if (!unstableChanges) unstableChanges = /* @__PURE__ */ new Map();
+					accumulateUnstableVariantChanges(unstableChanges, workingResolved, nextResolved);
 				}
 				workingResolved = nextResolved;
 			}
-			if (reachedLimit) warnRefineLimit(runState, creationFrame, unstableKeys);
+			if (reachedLimit) warnRefineLimit({
+				runState,
+				creationFrame,
+				unstableChanges
+			});
 			return workingResolved;
 		} : null;
 		const computeResult = (props = EMPTY_DEFAULTS) => {
@@ -1045,19 +1185,12 @@ function create({ transformClass = (className) => className } = {}) {
 			let resolved = {};
 			Object.assign(resolved, staticDefaults);
 			let userVariantProps;
-			if (extMetasWithRefineCount > 0) {
+			if (refine || computedDefaultCount > 0 || extMetasWithRefineCount > 0) {
 				const variantProps = {};
 				for (let i = 0; i < variantKeysLength; i++) {
 					const key = variantKeys[i];
 					if (Object.hasOwn(propsRecord, key)) variantProps[key] = propsRecord[key];
 				}
-				for (let i = 0; i < extMetasWithRefineCount; i++) {
-					const extDefaults = extMetasWithRefine[i].resolveDefaults(resolved, variantProps);
-					for (const k in extDefaults) {
-						if (!Object.hasOwn(extDefaults, k)) continue;
-						resolved[k] = extDefaults[k];
-					}
-				}
 				for (const k in variantProps) {
 					if (!Object.hasOwn(variantProps, k)) continue;
 					const v = variantProps[k];
@@ -1116,11 +1249,11 @@ function create({ transformClass = (className) => className } = {}) {
 		const meta = {
 			baseClass: computedBaseClass,
 			staticDefaults,
-			resolveDefaults: resolveDefaultsFn,
 			compute,
 			resolveRefine,
 			transformClass,
-			functionVariantKeys
+			functionVariantKeys,
+			computedDefaultKeys
 		};
 		const initComponent = (c, propKeys, style) => {
 			c.class = classFn;
@@ -1187,7 +1320,6 @@ function create({ transformClass = (className) => className } = {}) {
 		cx
 	};
 }
-function noop() {}
 const { cv, cx } = create();
 //#endregion
 export { create, cv, cx, splitProps };