@master/css-runtime 2.0.0-rc.73 → 2.0.0-rc.74

package/dist/index.js

@@ -0,0 +1,1211 @@
+import { AnimationRule, Layer, MasterCSS, ThemeLayer, VariableRule, compareRulePriority } from "@master/css-engine";
+import { MASTER_CSS_HYDRATION_MANIFEST_ATTR, MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID } from "@master/css-schema/hydration-manifest";
+import { MASTER_CSS_RUNTIME_STYLE_ID } from "@master/css-schema/runtime-style";
+//#region src/debuggers/log.ts
+const createLogger = (type) => {
+	return (message, ...args) => {
+		if (!type) return console.log(message, ...args);
+		if (console[type]) console[type](`%c[Master CSS]%c ${message}`, "color: gray;", "color: inherit;", ...args);
+	};
+};
+const loggers = {
+	info: createLogger("info"),
+	debug: createLogger("debug"),
+	warn: console.warn,
+	error: console.error,
+	trace: console.trace,
+	table: console.table,
+	group: console.group,
+	groupCollapsed: console.group,
+	groupEnd: console.groupEnd,
+	time: console.time,
+	timeEnd: console.timeEnd
+};
+const log = createLogger();
+Object.assign(log, loggers);
+//#endregion
+//#region src/debuggers/class-count.ts
+function debugRuntimeMutation(records, classCounts, cssRuntime) {
+	const actualClassCounts = {};
+	let errored = false;
+	const resolveClass = (className) => {
+		if (Object.prototype.hasOwnProperty.call(actualClassCounts, className)) actualClassCounts[className]++;
+		else actualClassCounts[className] = 1;
+	};
+	(cssRuntime.root.constructor.name === "HTMLDocument" ? cssRuntime.host : cssRuntime.container).querySelectorAll("[class]").forEach((element) => {
+		element.classList.forEach(resolveClass);
+	});
+	cssRuntime.host.classList.forEach(resolveClass);
+	for (const className in actualClassCounts) {
+		const eachCount = cssRuntime.classCounts.get(className);
+		const eachActualCount = actualClassCounts[className];
+		if (eachCount !== eachActualCount) {
+			log.error(`Class count mismatch for \`${className}\` (expected ${eachActualCount}) (received ${eachCount})`);
+			errored = true;
+		}
+	}
+	cssRuntime.classCounts.forEach((eachCount, className) => {
+		if (!Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
+			log.error(`Class count mismatch for \`${className}\` (expected 0) (received ${eachCount})`);
+			errored = true;
+		}
+	});
+	if (errored) {
+		log.debug("Records:", records);
+		log.debug("Serialized Records:", serializeMutations(records));
+		log.debug("Counts:", classCounts);
+	}
+}
+function serializeMutations(mutations) {
+	return mutations.map((m) => {
+		const target = m.target;
+		return {
+			type: m.type,
+			attributeName: m.attributeName,
+			oldValue: m.oldValue,
+			target: {
+				tagName: target.tagName,
+				id: target.id,
+				classList: Array.from(target.classList)
+			},
+			added: Array.from(m.addedNodes).filter((n) => n.nodeType === 1).map((el) => ({
+				tagName: el.tagName,
+				id: el.id,
+				classList: Array.from(el.classList)
+			})),
+			removed: Array.from(m.removedNodes).filter((n) => n.nodeType === 1).map((el) => ({
+				tagName: el.tagName,
+				id: el.id,
+				classList: Array.from(el.classList)
+			}))
+		};
+	});
+}
+//#endregion
+//#region src/debuggers/lifecycle.ts
+function debugRuntimeCreated(cssRuntime) {
+	log.debug("created", cssRuntime);
+}
+function debugRuntimeHydrated(cssRuntime, result) {
+	log.debug("hydrated", cssRuntime, result);
+}
+function debugRuntimeObserved(cssRuntime) {
+	log.debug("observed", cssRuntime);
+	if (cssRuntime.progressive) {
+		log.info("Progressive rendering is adopted.");
+		log.debug("pre-rendered CSS", cssRuntime.style);
+	} else log.info("Runtime rendering is adopted.");
+}
+function debugRuntimeRefreshed(cssRuntime, manifest) {
+	log.debug("refreshed", cssRuntime, manifest);
+}
+function debugRuntimeDisconnected(cssRuntime) {
+	log.debug("disconnected", cssRuntime);
+}
+function debugRuntimeDestroyed(cssRuntime) {
+	log.debug("destroyed", cssRuntime);
+}
+//#endregion
+//#region src/debuggers/index.ts
+function startDebuggers() {
+	log.info("Debug mode is enabled by default in development.");
+}
+//#endregion
+//#region src/register-global.ts
+function registerGlobal(CSSRuntime) {
+	if (!globalThis.MasterCSSRuntime) globalThis.MasterCSSRuntime = CSSRuntime;
+	startDebuggers();
+}
+//#endregion
+//#region src/utils/find-native-css-rule-index.ts
+function findNativeCSSRuleIndex(cssRules, nativeRule) {
+	for (let i = 0; i < cssRules.length; i++) if (cssRules[i] === nativeRule) return i;
+	return -1;
+}
+//#endregion
+//#region src/layer.ts
+function getRuleNodes(rule) {
+	const nodes = rule.nodes;
+	return Array.isArray(nodes) ? nodes : void 0;
+}
+var RuntimeLayer = class extends Layer {
+	name;
+	cssRuntime;
+	rules = [];
+	tokenCounts = /* @__PURE__ */ new Map();
+	native = null;
+	constructor(name, cssRuntime) {
+		super(name, cssRuntime);
+		this.name = name;
+		this.cssRuntime = cssRuntime;
+	}
+	attach() {
+		super.attach();
+		const nativeSheet = this.cssRuntime.style?.sheet;
+		if (nativeSheet && !this.native?.parentStyleSheet) {
+			const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
+			this.native = nativeSheet.cssRules.item(insertedIndex);
+		}
+	}
+	insert(rule, index = this.rules.length) {
+		const hadNative = !!this.native?.parentStyleSheet;
+		const wasEmpty = this.rules.length === 0;
+		const insertedIndex = super.insert(rule, index);
+		if (insertedIndex === void 0 || !this.native) return;
+		const nativeInsertIndex = this.getNativeInsertIndex(insertedIndex);
+		const wasAttachedWithRule = !hadNative && wasEmpty;
+		const insertRuleSafely = (text, position) => {
+			if (wasAttachedWithRule) return this.native.cssRules.item(position);
+			else try {
+				const insertedIndex = this.native.insertRule(text, position);
+				return this.native.cssRules.item(insertedIndex);
+			} catch (error) {
+				console.error(error, rule);
+				/**
+				* If the rule is invalid, remove it from the rules array.
+				* It's important to note that the rule may break the entire CSS runtime,
+				*/
+				this.rules.splice(insertedIndex, 1);
+				return;
+			}
+		};
+		const nodes = getRuleNodes(rule);
+		if (nodes) {
+			let currentIndex = nativeInsertIndex;
+			nodes.forEach((node) => {
+				node.native = insertRuleSafely(node.text, currentIndex);
+				if (node.native) currentIndex++;
+			});
+		} else rule.native = insertRuleSafely(rule.text, nativeInsertIndex);
+		return insertedIndex;
+	}
+	getNativeInsertIndex(index) {
+		let nativeIndex = 0;
+		for (let i = 0; i < index; i++) {
+			const rule = this.rules[i];
+			nativeIndex += getRuleNodes(rule)?.length ?? 1;
+		}
+		return nativeIndex;
+	}
+	detach() {
+		super.detach();
+		const nativeSheet = this.cssRuntime.style?.sheet;
+		if (nativeSheet && this.native?.parentStyleSheet) {
+			const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
+			if (foundIndex !== -1) nativeSheet.deleteRule(foundIndex);
+		}
+	}
+	delete(key) {
+		const deletedRule = super.delete(key);
+		if (!deletedRule || !this.native) return;
+		const deleteRuleSafely = (rule) => {
+			if (!rule) return;
+			const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, rule);
+			if (foundIndex !== -1) try {
+				this.native.deleteRule(foundIndex);
+			} catch (error) {
+				console.error(error, rule);
+			}
+		};
+		const nodes = getRuleNodes(deletedRule);
+		if (nodes) nodes.forEach((node) => deleteRuleSafely(node.native));
+		else deleteRuleSafely(deletedRule.native);
+		return deletedRule;
+	}
+	reset() {
+		super.reset();
+		const nativeSheet = this.cssRuntime.style?.sheet;
+		if (this.native && nativeSheet) {
+			const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
+			if (foundIndex !== -1) nativeSheet.deleteRule(foundIndex);
+			this.native = null;
+		}
+	}
+};
+//#endregion
+//#region src/utility-layer.ts
+function findUtilityInsertIndex(rules, utility) {
+	let low = 0;
+	let high = rules.length;
+	while (low < high) {
+		const mid = low + high >> 1;
+		const rule = rules[mid];
+		if (!("priority" in rule)) return findUtilityInsertIndexLinear(rules, utility);
+		if (compareRulePriority(utility, rule) < 0) high = mid;
+		else low = mid + 1;
+	}
+	return low;
+}
+function findUtilityInsertIndexLinear(rules, utility) {
+	for (let i = 0; i < rules.length; i++) {
+		const rule = rules[i];
+		if (!("priority" in rule)) continue;
+		if (compareRulePriority(utility, rule) < 0) return i;
+	}
+	return rules.length;
+}
+var RuntimeUtilityLayer = class extends RuntimeLayer {
+	rules = [];
+	insert(utility) {
+		if (this.get(utility.key)) return;
+		if ("valid" in utility && !utility.valid) return;
+		let index = this.rules.length;
+		if ("priority" in utility) index = findUtilityInsertIndex(this.rules, utility);
+		const insertedIndex = super.insert(utility, index);
+		if (insertedIndex === void 0) return;
+		this.insertVariables(utility);
+		this.insertAnimations(utility);
+		return insertedIndex;
+	}
+	delete(key) {
+		const utility = super.delete(key);
+		if (!utility) return;
+		const deleteLayerToken = (layerToken, layer, visited = /* @__PURE__ */ new Set()) => {
+			if (visited.has(layerToken)) return;
+			visited.add(layerToken);
+			const count = layer.tokenCounts.get(layerToken) ?? 0;
+			const variable = layer === this.css.themeLayer ? this.css.variables.get(layerToken) : void 0;
+			if (count <= 1) {
+				const deletedRule = layer.delete(layerToken);
+				layer.tokenCounts.delete(layerToken);
+				variable?.dependencies?.forEach((dependency) => deleteLayerToken(dependency, layer, visited));
+				return deletedRule;
+			} else {
+				layer.tokenCounts.set(layerToken, count - 1);
+				variable?.dependencies?.forEach((dependency) => deleteLayerToken(dependency, layer, visited));
+			}
+		};
+		if ("variableNames" in utility) utility.variableNames?.forEach((eachVariableName) => {
+			deleteLayerToken(eachVariableName, this.css.themeLayer);
+		});
+		if ("animationNames" in utility) utility.animationNames?.forEach((eachAnimationName) => {
+			const deletedAnimationRule = deleteLayerToken(eachAnimationName, this.css.animationsNonLayer);
+			const variableNames = deletedAnimationRule && "variableNames" in deletedAnimationRule ? deletedAnimationRule.variableNames : void 0;
+			if (variableNames) variableNames.forEach((eachVariableName) => {
+				deleteLayerToken(eachVariableName, this.css.themeLayer);
+			});
+		});
+		return utility;
+	}
+	insertVariables(utility) {
+		if (!("variableNames" in utility)) return;
+		const insertVariable = (eachVariableName, visited = /* @__PURE__ */ new Set()) => {
+			if (visited.has(eachVariableName)) return;
+			visited.add(eachVariableName);
+			const variable = this.css.variables.get(eachVariableName);
+			if (!variable || variable.inline) return;
+			if (this.css.themeLayer.rules.find(({ name }) => name === eachVariableName) || this.css.isEmittedGlobalsVariable(eachVariableName)) {
+				const count = this.css.themeLayer.tokenCounts.get(eachVariableName) || 0;
+				this.css.themeLayer.tokenCounts.set(eachVariableName, count + 1);
+			} else {
+				const newRule = new VariableRule(eachVariableName, variable, this.css);
+				this.css.themeLayer.insert(newRule);
+				this.css.themeLayer.tokenCounts.set(eachVariableName, 1);
+			}
+			variable.dependencies?.forEach((dependency) => insertVariable(dependency, visited));
+		};
+		utility.variableNames?.forEach((eachVariableName) => insertVariable(eachVariableName));
+	}
+	insertAnimations(utility) {
+		if (!("animationNames" in utility)) return;
+		utility.animationNames?.forEach((eachAnimationName) => {
+			const animationRule = this.css.animationsNonLayer.rules.find(({ name }) => name === eachAnimationName);
+			if (animationRule || this.css.isEmittedGlobalsAnimation(eachAnimationName)) {
+				const count = this.css.animationsNonLayer.tokenCounts.get(eachAnimationName) || 0;
+				this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, count + 1);
+				if (animationRule) this.insertVariables(animationRule);
+			} else {
+				const keyframes = this.css.animations.get(eachAnimationName);
+				if (!keyframes) return;
+				const newRule = new AnimationRule(eachAnimationName, keyframes, this.css);
+				this.css.animationsNonLayer.insert(newRule);
+				this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, 1);
+				this.insertVariables(newRule);
+			}
+		});
+	}
+};
+//#endregion
+//#region src/theme-layer.ts
+var RuntimeThemeLayer = class extends ThemeLayer {
+	name;
+	cssRuntime;
+	native = null;
+	nativeBuckets = /* @__PURE__ */ new Map();
+	constructor(name, cssRuntime) {
+		super(name, cssRuntime);
+		this.name = name;
+		this.cssRuntime = cssRuntime;
+	}
+	attach() {
+		super.attach();
+		const nativeSheet = this.cssRuntime.style?.sheet;
+		if (nativeSheet && !this.native?.parentStyleSheet) {
+			const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
+			this.native = nativeSheet.cssRules.item(insertedIndex);
+			this.syncNativeBuckets();
+		}
+	}
+	getBucketKey(mediaText, selectorText) {
+		const normalizedMediaText = mediaText.replace(/\s*:\s*/g, ":").replace(/\s+/g, " ").trim();
+		const normalizedSelectorText = selectorText.replace(/\s*,\s*/g, ",").replace(/\s+/g, " ").trim();
+		return normalizedMediaText + "\n" + normalizedSelectorText;
+	}
+	setBucketSyntheticDeclarations(bucket, mode) {
+		for (const { name, value } of this.getBucketSyntheticDeclarations({
+			mediaText: bucket.mediaText,
+			mode,
+			selectorText: bucket.selectorText
+		})) bucket.styleRule.style.setProperty(name, value);
+	}
+	hasVariableDeclarations(styleRule) {
+		for (let index = 0; index < styleRule.style.length; index++) if (styleRule.style.item(index).startsWith("--")) return true;
+		return false;
+	}
+	getStyleRule(nativeRule) {
+		if (nativeRule instanceof CSSStyleRule) return nativeRule;
+		if (nativeRule instanceof CSSGroupingRule) return nativeRule.cssRules.item(0);
+	}
+	syncNativeBuckets() {
+		this.nativeBuckets.clear();
+		if (!this.native) return;
+		for (const nativeRule of this.native.cssRules) {
+			const styleRule = this.getStyleRule(nativeRule);
+			if (!styleRule) continue;
+			const mediaText = nativeRule instanceof CSSMediaRule ? nativeRule.conditionText : "";
+			const normalizedMediaText = mediaText ? `@media ${mediaText}` : "";
+			const key = this.getBucketKey(normalizedMediaText, styleRule.selectorText);
+			this.nativeBuckets.set(key, {
+				key,
+				mediaText: normalizedMediaText,
+				selectorText: styleRule.selectorText,
+				nativeRule,
+				styleRule
+			});
+		}
+	}
+	ensureNativeBucket(mediaText, selectorText, mode) {
+		if (!this.native) return;
+		const key = this.getBucketKey(mediaText, selectorText);
+		let bucket = this.nativeBuckets.get(key);
+		if (bucket) {
+			this.setBucketSyntheticDeclarations(bucket, mode);
+			return bucket;
+		}
+		const declarationText = this.getBucketSyntheticDeclarations({
+			mediaText,
+			mode,
+			selectorText
+		}).map(({ name, value }) => `${name}:${value}`).join(";");
+		const text = mediaText ? `${mediaText}{${selectorText}{${declarationText}}}` : `${selectorText}{${declarationText}}`;
+		const insertedIndex = this.native.insertRule(text, this.getNativeBucketInsertIndex(mediaText, selectorText));
+		const nativeRule = this.native.cssRules.item(insertedIndex);
+		if (!nativeRule) return;
+		const styleRule = this.getStyleRule(nativeRule);
+		if (!styleRule) return;
+		const newBucket = {
+			key,
+			mediaText,
+			mode,
+			selectorText,
+			nativeRule,
+			styleRule
+		};
+		this.nativeBuckets.set(key, newBucket);
+		return newBucket;
+	}
+	getNativeBucketInsertIndex(mediaText, selectorText) {
+		if (!this.native) return 0;
+		const bucket = {
+			mediaText,
+			selectorText
+		};
+		for (let index = 0; index < this.native.cssRules.length; index++) {
+			const nativeRule = this.native.cssRules.item(index);
+			if (!nativeRule) continue;
+			const styleRule = this.getStyleRule(nativeRule);
+			if (!styleRule) continue;
+			const nativeMediaText = nativeRule instanceof CSSMediaRule ? `@media ${nativeRule.conditionText}` : "";
+			if (this.shouldInsertBucketBefore(bucket, {
+				mediaText: nativeMediaText,
+				selectorText: styleRule.selectorText
+			})) return index;
+		}
+		return this.native.cssRules.length;
+	}
+	insert(rule, index = this.rules.length) {
+		const wasEmpty = this.rules.length === 0;
+		const insertedIndex = super.insert(rule, index);
+		if (insertedIndex === void 0 || !this.native || wasEmpty) return insertedIndex;
+		for (const node of rule.nodes) {
+			const bucket = this.ensureNativeBucket(node.mediaText, node.selectorText, node.mode);
+			if (bucket) {
+				this.setBucketSyntheticDeclarations(bucket, node.mode);
+				bucket.styleRule.style.setProperty(node.declarationName, node.declarationValue);
+				node.native = bucket.styleRule;
+			}
+		}
+		return insertedIndex;
+	}
+	delete(key) {
+		const rule = this.rules.find((rule) => rule.key === key);
+		const deletedRule = super.delete(key);
+		if (!rule || !deletedRule || !this.native) return deletedRule;
+		for (const node of rule.nodes) {
+			const bucketKey = this.getBucketKey(node.mediaText, node.selectorText);
+			const bucket = this.nativeBuckets.get(bucketKey);
+			if (!bucket) continue;
+			bucket.styleRule.style.removeProperty(node.declarationName);
+			if (!this.hasVariableDeclarations(bucket.styleRule)) {
+				const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, bucket.nativeRule);
+				if (foundIndex !== -1) this.native.deleteRule(foundIndex);
+				this.nativeBuckets.delete(bucketKey);
+			}
+		}
+		return deletedRule;
+	}
+	detach() {
+		super.detach();
+		const nativeSheet = this.cssRuntime.style?.sheet;
+		if (nativeSheet && this.native?.parentStyleSheet) {
+			const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
+			if (foundIndex !== -1) nativeSheet.deleteRule(foundIndex);
+		}
+		this.native = null;
+		this.nativeBuckets.clear();
+	}
+	reset() {
+		super.reset();
+		const nativeSheet = this.cssRuntime.style?.sheet;
+		if (this.native && nativeSheet) {
+			const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
+			if (foundIndex !== -1) nativeSheet.deleteRule(foundIndex);
+		}
+		this.native = null;
+		this.nativeBuckets.clear();
+	}
+};
+//#endregion
+//#region src/class-tracker.ts
+function updateClassDelta(deltaCounts, className, delta) {
+	const nextDelta = (deltaCounts.get(className) || 0) + delta;
+	if (nextDelta) deltaCounts.set(className, nextDelta);
+	else deltaCounts.delete(className);
+}
+function traverseElementSubtree(root, visited, callback) {
+	const stack = [root];
+	while (stack.length) {
+		const el = stack.pop();
+		if (visited.has(el)) continue;
+		visited.add(el);
+		callback(el);
+		for (let child = el.lastElementChild; child; child = child.previousElementSibling) stack.push(child);
+	}
+}
+var RuntimeClassTracker = class {
+	snapshots = /* @__PURE__ */ new WeakMap();
+	reset() {
+		this.snapshots = /* @__PURE__ */ new WeakMap();
+	}
+	collectConnected(root, classCounts) {
+		this.reset();
+		const connectedNames = /* @__PURE__ */ new Set();
+		for (const el of root.querySelectorAll("[class]")) {
+			const classNames = this.snapshotElement(el);
+			if (!classNames) continue;
+			for (const className of classNames) {
+				const count = classCounts.get(className) || 0;
+				if (!count) connectedNames.add(className);
+				classCounts.set(className, count + 1);
+			}
+		}
+		return connectedNames;
+	}
+	collectMutations(records) {
+		const deltaCounts = /* @__PURE__ */ new Map();
+		const nodeCounts = /* @__PURE__ */ new Map();
+		const attrRecords = /* @__PURE__ */ new Set();
+		const visited = /* @__PURE__ */ new WeakSet();
+		const updateNodeCount = (el, delta) => {
+			const nextCount = (nodeCounts.get(el) || 0) + delta;
+			if (nextCount) nodeCounts.set(el, nextCount);
+			else nodeCounts.delete(el);
+		};
+		for (const record of records) if (record.type === "childList") {
+			for (const node of record.addedNodes) if (node instanceof Element && node.isConnected) updateNodeCount(node, 1);
+			for (const node of record.removedNodes) if (node instanceof Element && !node.isConnected) updateNodeCount(node, -1);
+		} else if (record.type === "attributes" && record.attributeName === "class") {
+			const target = record.target;
+			if (target instanceof Element) attrRecords.add(target);
+		}
+		for (const [node, count] of nodeCounts) if (count > 0) traverseElementSubtree(node, visited, (el) => this.diffElement(el, deltaCounts));
+		else if (count < 0 && !node.isConnected) traverseElementSubtree(node, visited, (el) => this.removeElement(el, deltaCounts));
+		for (const el of attrRecords) if (!visited.has(el)) this.diffElement(el, deltaCounts);
+		return deltaCounts;
+	}
+	snapshotElement(el) {
+		const classList = el.classList;
+		if (!classList.length) {
+			this.snapshots.delete(el);
+			return;
+		}
+		const classNames = /* @__PURE__ */ new Set();
+		for (let i = 0; i < classList.length; i++) classNames.add(classList.item(i));
+		this.snapshots.set(el, classNames);
+		return classNames;
+	}
+	diffElement(el, deltaCounts) {
+		const previousClassNames = this.snapshots.get(el);
+		const classList = el.classList;
+		let nextClassNames;
+		for (let i = 0; i < classList.length; i++) {
+			const className = classList.item(i);
+			if (!previousClassNames?.has(className)) updateClassDelta(deltaCounts, className, 1);
+			(nextClassNames ??= /* @__PURE__ */ new Set()).add(className);
+		}
+		if (previousClassNames) {
+			for (const className of previousClassNames) if (!nextClassNames?.has(className)) updateClassDelta(deltaCounts, className, -1);
+		}
+		if (nextClassNames) this.snapshots.set(el, nextClassNames);
+		else this.snapshots.delete(el);
+	}
+	removeElement(el, deltaCounts) {
+		const previousClassNames = this.snapshots.get(el);
+		if (!previousClassNames) return;
+		for (const className of previousClassNames) updateClassDelta(deltaCounts, className, -1);
+		this.snapshots.delete(el);
+	}
+};
+//#endregion
+//#region src/generated-rule.ts
+function collectVariableNames(text) {
+	const variableNames = /* @__PURE__ */ new Set();
+	for (const match of text.matchAll(/var\(\s*--([_a-zA-Z0-9-]+)/g)) variableNames.add(match[1]);
+	return variableNames;
+}
+var HydratedGeneratedRuleNode = class {
+	text;
+	native;
+	constructor(text) {
+		this.text = text;
+	}
+};
+var HydratedGeneratedRule = class {
+	ir;
+	layer;
+	native;
+	name;
+	key;
+	layerName;
+	type;
+	sortTier;
+	priority;
+	text;
+	valid = true;
+	fixedClass;
+	nodes;
+	variableNames;
+	animationNames;
+	selectorText;
+	constructor(ir, layer) {
+		this.ir = ir;
+		this.layer = layer;
+		this.name = ir.className;
+		this.key = ir.key;
+		this.layerName = ir.layer;
+		this.type = ir.type;
+		this.sortTier = ir.sortTier;
+		this.priority = ir.priority;
+		this.text = ir.text;
+		this.selectorText = ir.selectorText;
+		if (ir.nodes?.length) this.nodes = ir.nodes.map((node) => new HydratedGeneratedRuleNode(node.text));
+		const variableNames = collectVariableNames(ir.text);
+		ir.nodes?.forEach((node) => {
+			collectVariableNames(node.text).forEach((variableName) => variableNames.add(variableName));
+		});
+		ir.variableNames?.forEach((variableName) => variableNames.add(variableName));
+		if (variableNames.size) this.variableNames = variableNames;
+		if (ir.animationNames?.length) this.animationNames = new Set(ir.animationNames);
+	}
+};
+//#endregion
+//#region src/native-declaration.ts
+const supportsCache = /* @__PURE__ */ new Map();
+const browserNativeDeclarationMatcher = ({ property, value }) => {
+	if (property.startsWith("--")) return true;
+	const cacheKey = property + "\0" + value;
+	const cached = supportsCache.get(cacheKey);
+	if (cached !== void 0) return cached;
+	const supported = Boolean(globalThis.CSS?.supports(property, value));
+	supportsCache.set(cacheKey, supported);
+	return supported;
+};
+//#endregion
+//#region src/core.ts
+const MASTER_CSS_RUNTIME_STYLE_SELECTOR = `style#${MASTER_CSS_RUNTIME_STYLE_ID}`;
+function isDocumentRoot(root) {
+	const rootConstructorName = root?.constructor.name;
+	return rootConstructorName === "HTMLDocument" || rootConstructorName === "Document";
+}
+function findElementById(root, id) {
+	return isDocumentRoot(root) ? root.getElementById(id) : "querySelector" in root ? root.querySelector(`#${id}`) : void 0;
+}
+function parseHydrationManifest(source) {
+	try {
+		const hydrationManifest = JSON.parse(source);
+		return hydrationManifest?.version === 1 && Array.isArray(hydrationManifest.rules) ? hydrationManifest : void 0;
+	} catch (error) {
+		console.debug("Cannot parse Master CSS hydration manifest.", error);
+	}
+}
+function readInlineHydrationManifest(root) {
+	const source = findElementById(root, MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID)?.textContent?.trim();
+	if (!source) return;
+	return parseHydrationManifest(source);
+}
+function readExternalHydrationManifestSource(root) {
+	const styleElement = findElementById(root, MASTER_CSS_RUNTIME_STYLE_ID);
+	const HTMLStyleElementConstructor = globalThis.HTMLStyleElement;
+	return HTMLStyleElementConstructor && styleElement instanceof HTMLStyleElementConstructor ? styleElement.getAttribute(MASTER_CSS_HYDRATION_MANIFEST_ATTR) : void 0;
+}
+var CSSRuntime = class CSSRuntime extends MasterCSS {
+	root;
+	hydrationManifest;
+	static instances = /* @__PURE__ */ new WeakMap();
+	host;
+	container;
+	baseLayer = new RuntimeUtilityLayer("base", this);
+	themeLayer = new RuntimeThemeLayer("theme", this);
+	defaultsLayer = new RuntimeUtilityLayer("defaults", this);
+	componentsLayer = new RuntimeUtilityLayer("components", this);
+	utilitiesLayer = new RuntimeUtilityLayer("utilities", this);
+	classCounts = /* @__PURE__ */ new Map();
+	classTracker = new RuntimeClassTracker();
+	pendingRemovedClassNames = /* @__PURE__ */ new Set();
+	pendingRemovalFrame;
+	pendingRemovalFlushFrame;
+	hydrationFailureReason;
+	observer;
+	progressive = false;
+	observing = false;
+	static create(options) {
+		const { manifest, root = document, emittedGlobals, hydrationManifest } = options;
+		const resolvedHydrationManifest = hydrationManifest === void 0 ? readInlineHydrationManifest(root) : hydrationManifest;
+		const current = globalThis.MasterCSSRuntime.instances.get(root);
+		if (current) {
+			current.registerEmittedGlobals(emittedGlobals);
+			if (resolvedHydrationManifest !== void 0) current.setHydrationManifest(resolvedHydrationManifest);
+			return current;
+		}
+		return new CSSRuntime(root, manifest, emittedGlobals, resolvedHydrationManifest).register();
+	}
+	constructor(root = document, manifest, emittedGlobals, hydrationManifest) {
+		super(manifest, emittedGlobals, { nativeDeclarationMatcher: browserNativeDeclarationMatcher });
+		this.root = root;
+		this.hydrationManifest = hydrationManifest;
+		if (isDocumentRoot(root)) {
+			this.container = root.head;
+			this.host = root.documentElement;
+		} else {
+			this.container = this.root;
+			this.host = this.root.host;
+		}
+		this.applyEmittedGlobalsCounts({ variables: this.emittedGlobals.variables });
+	}
+	register() {
+		const registered = globalThis.MasterCSSRuntime.instances.get(this.root) === this;
+		globalThis.MasterCSSRuntime.instances.set(this.root, this);
+		if (isDocumentRoot(this.root)) this.root.defaultView.globalThis.masterCSSRuntime = this;
+		if (!registered && true) debugRuntimeCreated(this);
+		return this;
+	}
+	unregister() {
+		globalThis.MasterCSSRuntime.instances.delete(this.root);
+		if (isDocumentRoot(this.root) && this.root.defaultView.globalThis.masterCSSRuntime === this) this.root.defaultView.globalThis.masterCSSRuntime = void 0;
+		return this;
+	}
+	setHydrationManifest(hydrationManifest) {
+		this.hydrationManifest = hydrationManifest;
+		return this;
+	}
+	needsHydrationManifest() {
+		return this.hydrationManifest === void 0 && Boolean(readExternalHydrationManifestSource(this.root));
+	}
+	async loadHydrationManifest() {
+		const inlineHydrationManifest = readInlineHydrationManifest(this.root);
+		if (inlineHydrationManifest) {
+			this.setHydrationManifest(inlineHydrationManifest);
+			return this;
+		}
+		const source = readExternalHydrationManifestSource(this.root);
+		if (!source) return this;
+		try {
+			const response = await fetch(source, { credentials: "same-origin" });
+			if (!response.ok) return this;
+			this.setHydrationManifest(parseHydrationManifest(await response.text()));
+		} catch (error) {
+			console.debug("Cannot load Master CSS hydration manifest.", error);
+		}
+		return this;
+	}
+	createRuntimeStyle() {
+		const ownerDocument = "createElement" in this.root ? this.root : this.root.ownerDocument;
+		this.style = ownerDocument.createElement("style");
+		this.style.id = MASTER_CSS_RUNTIME_STYLE_ID;
+		this.style.setAttribute("blocking", "render");
+		this.container.append(this.style);
+	}
+	warnHydrationFallback(reason) {
+		console.warn(`Master CSS progressive hydration requires a matching hydration manifest. ${reason} Rebuilding ${MASTER_CSS_RUNTIME_STYLE_SELECTOR} with the runtime.`);
+	}
+	useRuntimeStyle(connectedNames, reason) {
+		if (reason) this.warnHydrationFallback(reason);
+		this.style?.remove();
+		this.style = null;
+		this.progressive = false;
+		this.createRuntimeStyle();
+		this.insertStaticResources();
+		connectedNames.forEach((cls) => this.add(cls));
+	}
+	detectRuntimeStyle() {
+		if (this.root.styleSheets) for (const sheet of this.root.styleSheets) {
+			const { ownerNode } = sheet;
+			if (ownerNode instanceof HTMLStyleElement && ownerNode.id === MASTER_CSS_RUNTIME_STYLE_ID) {
+				this.style = ownerNode;
+				this.progressive = true;
+				break;
+			}
+		}
+	}
+	collectConnectedClasses() {
+		return this.classTracker.collectConnected(this.root, this.classCounts);
+	}
+	hydrateRuntimeStyle(connectedNames) {
+		const hydrateResult = this.style?.sheet && this.hydrate(this.style.sheet.cssRules);
+		if (hydrateResult) {
+			const hydratedClassNames = new Set(hydrateResult.allUtilities.map(({ fixedClass, name }) => fixedClass || name));
+			for (const cls of connectedNames) if (!hydratedClassNames.has(cls)) {
+				this.add(cls);
+				console.debug(`Missing prerendered rule for class \`${cls}\``);
+			}
+		} else this.useRuntimeStyle(connectedNames, this.hydrationFailureReason || `Cannot read ${MASTER_CSS_RUNTIME_STYLE_SELECTOR} CSS rules.`);
+	}
+	renderRuntimeStyle(connectedNames) {
+		this.createRuntimeStyle();
+		this.insertStaticResources();
+		connectedNames.forEach((cls) => this.add(cls));
+	}
+	getAnimationFrameWindow() {
+		return (isDocumentRoot(this.root) ? this.root : this.root.ownerDocument)?.defaultView || globalThis;
+	}
+	cancelPendingRemovalFrames() {
+		const view = this.getAnimationFrameWindow();
+		if (this.pendingRemovalFrame !== void 0) {
+			view.cancelAnimationFrame(this.pendingRemovalFrame);
+			this.pendingRemovalFrame = void 0;
+		}
+		if (this.pendingRemovalFlushFrame !== void 0) {
+			view.cancelAnimationFrame(this.pendingRemovalFlushFrame);
+			this.pendingRemovalFlushFrame = void 0;
+		}
+	}
+	clearPendingRemovedClassNames() {
+		this.pendingRemovedClassNames.clear();
+		this.cancelPendingRemovalFrames();
+	}
+	cancelPendingRemovedClassNames(classNames) {
+		if (!this.pendingRemovedClassNames.size) return;
+		for (const className of classNames) this.pendingRemovedClassNames.delete(className);
+		if (!this.pendingRemovedClassNames.size) this.cancelPendingRemovalFrames();
+	}
+	schedulePendingRemovalFlush() {
+		if (!this.pendingRemovedClassNames.size) return;
+		if (this.pendingRemovalFrame !== void 0 || this.pendingRemovalFlushFrame !== void 0) return;
+		const view = this.getAnimationFrameWindow();
+		this.pendingRemovalFrame = view.requestAnimationFrame(() => {
+			this.pendingRemovalFrame = void 0;
+			this.pendingRemovalFlushFrame = view.requestAnimationFrame(() => {
+				this.pendingRemovalFlushFrame = void 0;
+				this.flushPendingRemovedClassNames();
+			});
+		});
+	}
+	queueRemovedClassNames(classNames) {
+		for (const className of classNames) if (!this.classCounts.has(className)) this.pendingRemovedClassNames.add(className);
+		this.schedulePendingRemovalFlush();
+	}
+	flushPendingRemovedClassNames() {
+		if (!this.pendingRemovedClassNames.size) return;
+		const classNames = [];
+		for (const className of this.pendingRemovedClassNames) if (!this.classCounts.has(className)) classNames.push(className);
+		this.pendingRemovedClassNames.clear();
+		if (classNames.length) super.remove(...classNames);
+	}
+	handleMutationRecords(records) {
+		const deltaCounts = this.classTracker.collectMutations(records);
+		const addedClassNames = [];
+		const removedClassNames = [];
+		for (const [cls, change] of deltaCounts) {
+			const current = this.classCounts.get(cls) || 0;
+			const next = current + change;
+			if (next > 0) {
+				this.classCounts.set(cls, next);
+				if (current === 0) addedClassNames.push(cls);
+			} else {
+				this.classCounts.delete(cls);
+				removedClassNames.push(cls);
+			}
+		}
+		if (addedClassNames.length) this.add(...addedClassNames);
+		if (removedClassNames.length) this.queueRemovedClassNames(removedClassNames);
+		debugRuntimeMutation(records, deltaCounts, this);
+	}
+	add(...classNames) {
+		this.cancelPendingRemovedClassNames(classNames);
+		return super.add(...classNames);
+	}
+	remove(...classNames) {
+		this.cancelPendingRemovedClassNames(classNames);
+		super.remove(...classNames);
+	}
+	startMutationObserver() {
+		this.observer = new MutationObserver((records) => this.handleMutationRecords(records));
+		this.observer.observe(this.root, {
+			childList: true,
+			attributes: true,
+			attributeFilter: ["class"],
+			subtree: true
+		});
+	}
+	revealHostIfNeeded() {
+		if (!this.progressive) this.host.removeAttribute("hidden");
+	}
+	/**
+	* Observe the DOM for changes and update the running stylesheet. (browser only)
+	* @param options mutation observer options
+	* @returns this
+	*/
+	observe() {
+		if (this.observing) return this;
+		this.detectRuntimeStyle();
+		const connectedNames = this.collectConnectedClasses();
+		if (this.progressive) this.hydrateRuntimeStyle(connectedNames);
+		else this.renderRuntimeStyle(connectedNames);
+		this.startMutationObserver();
+		this.revealHostIfNeeded();
+		this.observing = true;
+		debugRuntimeObserved(this);
+		return this;
+	}
+	failHydration(reason) {
+		this.hydrationFailureReason = reason;
+	}
+	getHydrationManifestLayerRules() {
+		const layers = /* @__PURE__ */ new Map();
+		if (!this.hydrationManifest?.rules?.length) return layers;
+		for (const rule of this.hydrationManifest.rules) {
+			const layerRules = layers.get(rule.layer);
+			if (layerRules) layerRules.push(rule);
+			else layers.set(rule.layer, [rule]);
+		}
+		return layers;
+	}
+	registerHydratedClassRule(className, rule) {
+		const classUtilities = this.classUtilities;
+		const rules = classUtilities.get(className);
+		if (rules) rules.push(rule);
+		else classUtilities.set(className, [rule]);
+	}
+	getUtilityLayerByName(name) {
+		switch (name) {
+			case "base": return this.baseLayer;
+			case "defaults": return this.defaultsLayer;
+			case "components": return this.componentsLayer;
+			case "utilities": return this.utilitiesLayer;
+		}
+	}
+	collectHydrationManifestVariableNames() {
+		const variableNames = /* @__PURE__ */ new Set();
+		const collectVariableReferences = (text) => {
+			for (const match of text.matchAll(/var\(\s*--([_a-zA-Z0-9-]+)/g)) collectVariable(match[1]);
+		};
+		const collectVariable = (variableName, visited = /* @__PURE__ */ new Set()) => {
+			if (visited.has(variableName)) return;
+			visited.add(variableName);
+			const variable = this.variables.get(variableName);
+			if (!variable) return;
+			variableNames.add(variableName);
+			variable.dependencies?.forEach((dependency) => collectVariable(dependency, visited));
+		};
+		for (const rule of this.hydrationManifest?.rules || []) {
+			rule.variableNames?.forEach((variableName) => collectVariable(variableName));
+			collectVariableReferences(rule.text);
+			rule.nodes?.forEach((node) => collectVariableReferences(node.text));
+			rule.animationNames?.forEach((animationName) => {
+				const keyframes = this.animations.get(animationName);
+				if (!keyframes) return;
+				new AnimationRule(animationName, keyframes, this).variableNames?.forEach((variableName) => collectVariable(variableName));
+			});
+		}
+		for (const [variableName, variable] of this.variables) if (variable.static) collectVariable(variableName);
+		return variableNames;
+	}
+	collectHydrationManifestAnimationNames() {
+		const animationNames = /* @__PURE__ */ new Set();
+		for (const rule of this.hydrationManifest?.rules || []) rule.animationNames?.forEach((animationName) => animationNames.add(animationName));
+		for (const animationName of this.animations.keys()) if (this.manifest.animationOptions?.[animationName]?.static) animationNames.add(animationName);
+		return animationNames;
+	}
+	nativeThemeLayerHasOnlyEmittedGlobalsVariables(nativeThemeLayer) {
+		if (!nativeThemeLayer) return false;
+		let found = false;
+		for (const nativeRule of nativeThemeLayer.cssRules) {
+			const styleRule = this.themeLayer.getStyleRule(nativeRule);
+			if (!styleRule) return false;
+			for (let index = 0; index < styleRule.style.length; index++) {
+				const propertyName = styleRule.style.item(index);
+				if (this.isSyntheticColorSchemeDeclaration(nativeRule, styleRule, propertyName)) continue;
+				if (!propertyName.startsWith("--")) return false;
+				found = true;
+				if (!this.isEmittedGlobalsVariable(propertyName.slice(2))) return false;
+			}
+		}
+		return found;
+	}
+	getVariableRuleBuckets(variableRules) {
+		const buckets = /* @__PURE__ */ new Map();
+		for (const rule of variableRules) for (const node of rule.nodes) {
+			const key = this.themeLayer.getBucketKey(node.mediaText, node.selectorText);
+			let bucket = buckets.get(key);
+			if (!bucket) {
+				bucket = {
+					mediaText: node.mediaText,
+					mode: node.mode,
+					selectorText: node.selectorText,
+					nodes: []
+				};
+				buckets.set(key, bucket);
+			}
+			bucket.nodes.push(node);
+		}
+		return Array.from(buckets.values());
+	}
+	isSyntheticColorSchemeDeclaration(nativeRule, styleRule, propertyName) {
+		if (propertyName !== "color-scheme") return false;
+		const colorScheme = styleRule.style.getPropertyValue(propertyName).trim();
+		return colorScheme === this.themeLayer.getBucketColorScheme({
+			mediaText: nativeRule instanceof CSSMediaRule ? `@media ${nativeRule.conditionText}` : "",
+			mode: colorScheme,
+			selectorText: styleRule.selectorText
+		});
+	}
+	getNativeThemeRuleBucketKey(nativeRule) {
+		const styleRule = this.themeLayer.getStyleRule(nativeRule);
+		if (!styleRule) return;
+		const mediaText = nativeRule instanceof CSSMediaRule ? `@media ${nativeRule.conditionText}` : "";
+		return {
+			key: this.themeLayer.getBucketKey(mediaText, styleRule.selectorText),
+			styleRule
+		};
+	}
+	hydrateHydrationManifestVariables(nativeThemeLayer) {
+		const variableRules = [...this.collectHydrationManifestVariableNames()].filter((variableName) => !this.isEmittedGlobalsVariable(variableName)).map((variableName) => {
+			const variable = this.variables.get(variableName);
+			return variable && !variable.inline ? new VariableRule(variableName, variable, this) : void 0;
+		}).filter((rule) => Boolean(rule));
+		const expectedBuckets = this.getVariableRuleBuckets(variableRules);
+		const nativeRuleCount = nativeThemeLayer?.cssRules.length || 0;
+		if (expectedBuckets.length !== nativeRuleCount) return !variableRules.length && this.nativeThemeLayerHasOnlyEmittedGlobalsVariables(nativeThemeLayer);
+		if (!variableRules.length) return true;
+		if (!nativeThemeLayer) return false;
+		this.themeLayer.native = nativeThemeLayer;
+		const nativeBuckets = /* @__PURE__ */ new Map();
+		for (const nativeRule of nativeThemeLayer.cssRules) {
+			const nativeBucket = this.getNativeThemeRuleBucketKey(nativeRule);
+			if (!nativeBucket || nativeBuckets.has(nativeBucket.key)) return false;
+			nativeBuckets.set(nativeBucket.key, nativeBucket.styleRule);
+		}
+		for (const bucket of expectedBuckets) {
+			const nativeStyleRule = nativeBuckets.get(this.themeLayer.getBucketKey(bucket.mediaText, bucket.selectorText));
+			if (!nativeStyleRule) return false;
+			for (const node of bucket.nodes) node.native = nativeStyleRule;
+		}
+		this.themeLayer.rules.push(...variableRules);
+		this.themeLayer.syncNativeBuckets();
+		if (this.themeLayer.rules.length && !this.rules.includes(this.themeLayer)) this.rules.push(this.themeLayer);
+		return true;
+	}
+	hydrateHydrationManifestAnimations(nativeKeyframesRules) {
+		const animationNames = this.collectHydrationManifestAnimationNames();
+		const hydratedAnimationNames = /* @__PURE__ */ new Set();
+		for (const animationName of animationNames) {
+			if (this.isEmittedGlobalsAnimation(animationName)) {
+				if (nativeKeyframesRules.has(animationName)) hydratedAnimationNames.add(animationName);
+				continue;
+			}
+			const keyframes = this.animations.get(animationName);
+			if (!keyframes) continue;
+			const nativeRule = nativeKeyframesRules.get(animationName);
+			if (!nativeRule) return false;
+			const animationRule = new AnimationRule(animationName, keyframes, this);
+			animationRule.native = nativeRule;
+			this.animationsNonLayer.rules.push(animationRule);
+			this.rules.push(animationRule);
+			hydratedAnimationNames.add(animationName);
+		}
+		for (const animationName of nativeKeyframesRules.keys()) if (!hydratedAnimationNames.has(animationName)) return false;
+		return true;
+	}
+	hydrateHydrationManifestLayer(layer, nativeLayerRule, manifestRules, result) {
+		if (manifestRules.reduce((count, rule) => count + (rule.nodes?.length || 1), 0) !== nativeLayerRule.cssRules.length) return false;
+		layer.native = nativeLayerRule;
+		let nativeIndex = 0;
+		for (const manifestRule of manifestRules) {
+			const hydratedRule = new HydratedGeneratedRule(manifestRule, layer);
+			const nodes = hydratedRule.nodes;
+			if (nodes?.length) for (const node of nodes) node.native = nativeLayerRule.cssRules.item(nativeIndex++) || void 0;
+			else hydratedRule.native = nativeLayerRule.cssRules.item(nativeIndex++) || void 0;
+			layer.rules.push(hydratedRule);
+			layer.insertVariables(hydratedRule);
+			layer.insertAnimations(hydratedRule);
+			this.registerHydratedClassRule(manifestRule.className, hydratedRule);
+			result.allUtilities.push(hydratedRule);
+		}
+		if (layer.rules.length && !this.rules.includes(layer)) this.rules.push(layer);
+		return true;
+	}
+	hydrate(nativeLayerRules) {
+		this.hydrationFailureReason = void 0;
+		if (this.hydrationManifest?.version !== 1 || !Array.isArray(this.hydrationManifest.rules)) return this.failHydration("Missing or invalid hydration manifest.");
+		if (!this.hydrationManifest.rules.length) return this.failHydration(`Hydration manifest has no generated rules for ${MASTER_CSS_RUNTIME_STYLE_SELECTOR}.`);
+		const result = { allUtilities: [] };
+		const manifestLayerRules = this.getHydrationManifestLayerRules();
+		const nativeUtilityLayerRules = /* @__PURE__ */ new Map();
+		const nativeKeyframesRules = /* @__PURE__ */ new Map();
+		let nativeThemeLayer;
+		for (let i = 0; i < nativeLayerRules.length; i++) {
+			const eachNativeCSSRule = nativeLayerRules[i];
+			if (eachNativeCSSRule.constructor.name === "CSSLayerBlockRule") {
+				const eachCSSLayerRule = eachNativeCSSRule;
+				if (eachCSSLayerRule.name === "theme") {
+					if (nativeThemeLayer) return this.failHydration(`Duplicate theme layer in ${MASTER_CSS_RUNTIME_STYLE_SELECTOR}.`);
+					nativeThemeLayer = eachCSSLayerRule;
+					continue;
+				}
+				const layer = this.getUtilityLayerByName(eachCSSLayerRule.name);
+				if (!layer) return this.failHydration(`Unknown layer \`${eachCSSLayerRule.name}\` in ${MASTER_CSS_RUNTIME_STYLE_SELECTOR}.`);
+				if (nativeUtilityLayerRules.has(layer.name)) return this.failHydration(`Duplicate layer \`${eachCSSLayerRule.name}\` in ${MASTER_CSS_RUNTIME_STYLE_SELECTOR}.`);
+				nativeUtilityLayerRules.set(layer.name, eachCSSLayerRule);
+			} else if (eachNativeCSSRule.constructor.name === "CSSKeyframesRule") {
+				const nativeKeyframesRule = eachNativeCSSRule;
+				nativeKeyframesRules.set(nativeKeyframesRule.name, nativeKeyframesRule);
+			} else return this.failHydration(`Unknown top-level rule \`${eachNativeCSSRule.cssText}\` in ${MASTER_CSS_RUNTIME_STYLE_SELECTOR}.`);
+		}
+		for (const [layerName, manifestRules] of manifestLayerRules) {
+			const nativeLayerRule = nativeUtilityLayerRules.get(layerName);
+			if (!nativeLayerRule) return this.failHydration(`Missing layer \`${layerName}\` in ${MASTER_CSS_RUNTIME_STYLE_SELECTOR}.`);
+			if (manifestRules.reduce((count, rule) => count + (rule.nodes?.length || 1), 0) !== nativeLayerRule.cssRules.length) return this.failHydration(`Layer \`${layerName}\` does not match the hydration manifest.`);
+		}
+		for (const [layerName, nativeLayerRule] of nativeUtilityLayerRules) if (!manifestLayerRules.has(layerName) && nativeLayerRule.cssRules.length) return this.failHydration(`Layer \`${layerName}\` has no hydration manifest rules.`);
+		if (!this.hydrateHydrationManifestVariables(nativeThemeLayer)) return this.failHydration("Theme layer does not match the hydration manifest.");
+		if (!this.hydrateHydrationManifestAnimations(nativeKeyframesRules)) return this.failHydration("Keyframes do not match the hydration manifest.");
+		for (const [layerName, nativeLayerRule] of nativeUtilityLayerRules) {
+			const manifestRules = manifestLayerRules.get(layerName);
+			if (!manifestRules?.length) continue;
+			const layer = this.getUtilityLayerByName(layerName);
+			this.hydrateHydrationManifestLayer(layer, nativeLayerRule, manifestRules, result);
+		}
+		debugRuntimeHydrated(this, result);
+		return result;
+	}
+	disconnect() {
+		this.clearPendingRemovedClassNames();
+		if (!this.observing) return;
+		if (this.observer) {
+			this.observer.disconnect();
+			this.observer = void 0;
+		}
+		this.observing = false;
+		this.reset();
+		this.loadManifest(this.manifest);
+		this.classCounts.clear();
+		this.classTracker.reset();
+		if (!this.progressive) {
+			this.style?.remove();
+			this.style = null;
+		}
+		debugRuntimeDisconnected(this);
+		return this;
+	}
+	refresh(manifest = this.manifest) {
+		this.clearPendingRemovedClassNames();
+		if (!this.observing || !this.style.sheet) return this;
+		const cssRules = this.style.sheet.cssRules;
+		for (let i = cssRules.length - 1; i >= 0; i--) this.style.sheet.deleteRule(i);
+		super.refresh(manifest);
+		/**
+		* Recreate rules from the current class names against the latest manifest.
+		* 所以 refresh 過後 rules 可能會變多也可能會變少
+		*/
+		this.classCounts.forEach((_, className) => {
+			this.add(className);
+		});
+		debugRuntimeRefreshed(this, manifest);
+		return this;
+	}
+	destroy() {
+		this.disconnect();
+		this.unregister();
+		debugRuntimeDestroyed(this);
+		return this;
+	}
+};
+(function(CSSRuntime) {
+	registerGlobal(CSSRuntime);
+})(CSSRuntime);
+//#endregion
+//#region src/css-runtime.ts
+function resolveManifest(host, manifest) {
+	return typeof manifest === "function" ? manifest(host) : manifest;
+}
+function resolveRoot(host, root) {
+	return typeof root === "function" ? root(host) : root || host.shadowRoot;
+}
+function resolveEmittedGlobals(host, emittedGlobals) {
+	return typeof emittedGlobals === "function" ? emittedGlobals(host) : emittedGlobals;
+}
+function resolveHydrationManifest(host, hydrationManifest) {
+	return typeof hydrationManifest === "function" ? hydrationManifest(host) : hydrationManifest;
+}
+function cssRuntime(options) {
+	return function(target) {
+		const connectedCallback = target.prototype.connectedCallback;
+		const disconnectedCallback = target.prototype.disconnectedCallback;
+		return class extends target {
+			cssRuntime;
+			connectedCallback() {
+				connectedCallback?.call(this);
+				const root = resolveRoot(this, options.root);
+				if (!root) throw new Error("`@cssRuntime()` requires a shadow root. Provide `options.root` or create a shadow root before `connectedCallback()` finishes.");
+				const cssRuntime = CSSRuntime.create({
+					manifest: resolveManifest(this, options.manifest),
+					root,
+					emittedGlobals: resolveEmittedGlobals(this, options.emittedGlobals),
+					hydrationManifest: resolveHydrationManifest(this, options.hydrationManifest)
+				});
+				this.cssRuntime = cssRuntime;
+				if (cssRuntime.needsHydrationManifest()) cssRuntime.loadHydrationManifest().then(() => {
+					if (this.cssRuntime === cssRuntime) cssRuntime.observe();
+				});
+				else cssRuntime.observe();
+			}
+			disconnectedCallback() {
+				disconnectedCallback?.call(this);
+				this.cssRuntime?.destroy();
+				this.cssRuntime = void 0;
+			}
+		};
+	};
+}
+//#endregion
+export { CSSRuntime, CSSRuntime as default, RuntimeUtilityLayer, cssRuntime };