@master/css-runtime 2.0.0-rc.7 → 2.0.0-rc.71

package/dist/index.development.mjs

@@ -0,0 +1,1316 @@
+import { Layer, AnimationRule, VariableRule, compareRulePriority, ThemeLayer, MasterCSS } 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';
+import { installHook } from '@master/css-devtools-hook';
+
+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);
+
+function registerClassCountDebugger() {
+    const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__;
+    hook.on('runtime:mutated', ({ 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)
+                }))
+        };
+    });
+}
+
+function registerLifecycleDebugger() {
+    const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__;
+    hook.on('runtime:created', ({ cssRuntime })=>{
+        log.debug('created', cssRuntime);
+    });
+    hook.on('runtime:hydrated', ({ cssRuntime })=>{
+        log.debug('hydrated', cssRuntime);
+    });
+    hook.on('runtime:observed', ({ 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.');
+        }
+    });
+    hook.on('runtime:refreshed', ({ cssRuntime, manifest })=>{
+        log.debug('refreshed', cssRuntime, manifest);
+    });
+    hook.on('runtime:disconnected', ({ cssRuntime })=>{
+        log.debug('disconnected', cssRuntime);
+    });
+    hook.on('runtime:destroyed', ({ cssRuntime })=>{
+        log.debug('destroyed', cssRuntime);
+    });
+}
+
+function startDebuggers() {
+    log.info('Debug mode is enabled by default in development.');
+    registerClassCountDebugger();
+    registerLifecycleDebugger();
+}
+
+function registerGlobal(CSSRuntime) {
+    if (!globalThis.MasterCSSRuntime) globalThis.MasterCSSRuntime = CSSRuntime;
+    installHook();
+    {
+        startDebuggers();
+    }
+}
+
+function findNativeCSSRuleIndex(cssRules, nativeRule) {
+    for(let i = 0; i < cssRules.length; i++){
+        if (cssRules[i] === nativeRule) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+function getRuleNodes(rule) {
+    const nodes = rule.nodes;
+    return Array.isArray(nodes) ? nodes : undefined;
+}
+class RuntimeLayer extends Layer {
+    name;
+    cssRuntime;
+    rules = [];
+    tokenCounts = 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 === undefined || !this.native) return;
+        const nativeInsertIndex = this.getNativeInsertIndex(insertedIndex);
+        const wasAttachedWithRule = !hadNative && wasEmpty;
+        const insertRuleSafely = (text, position)=>{
+            // Checks if the rule is inserted in a native CSS rule with this.attach()
+            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;
+        }
+    }
+}
+
+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;
+}
+class RuntimeUtilityLayer 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 === undefined) return;
+        this.insertVariables(utility);
+        this.insertAnimations(utility);
+        return insertedIndex;
+    }
+    delete(key) {
+        const utility = super.delete(key);
+        if (!utility) return;
+        const deleteLayerToken = (layerToken, layer, visited = 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) : undefined;
+            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 : undefined;
+            if (variableNames) {
+                variableNames.forEach((eachVariableName)=>{
+                    deleteLayerToken(eachVariableName, this.css.themeLayer);
+                });
+            }
+        });
+        return utility;
+    }
+    insertVariables(utility) {
+        if (!('variableNames' in utility)) return;
+        const insertVariable = (eachVariableName, visited = 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);
+            }
+        });
+    }
+}
+
+class RuntimeThemeLayer extends ThemeLayer {
+    name;
+    cssRuntime;
+    native = null;
+    nativeBuckets = 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;
+    }
+    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) {
+        if (!this.native) return;
+        const key = this.getBucketKey(mediaText, selectorText);
+        let bucket = this.nativeBuckets.get(key);
+        if (bucket) return bucket;
+        const text = mediaText ? `${mediaText}{${selectorText}{}}` : `${selectorText}{}`;
+        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,
+            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 === undefined || !this.native || wasEmpty) return insertedIndex;
+        for (const node of rule.nodes){
+            const bucket = this.ensureNativeBucket(node.mediaText, node.selectorText);
+            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 (bucket.styleRule.style.length === 0) {
+                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();
+    }
+}
+
+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);
+        }
+    }
+}
+class RuntimeClassTracker {
+    snapshots = new WeakMap();
+    reset() {
+        this.snapshots = new WeakMap();
+    }
+    collectConnected(root, classCounts) {
+        this.reset();
+        const connectedNames = 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 = new Map();
+        const nodeCounts = new Map();
+        const attrRecords = new Set();
+        const visited = 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 = 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 ??= 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);
+    }
+}
+
+function collectVariableNames(text) {
+    const variableNames = new Set();
+    for (const match of text.matchAll(/var\(\s*--([_a-zA-Z0-9-]+)/g)){
+        variableNames.add(match[1]);
+    }
+    return variableNames;
+}
+class HydratedGeneratedRuleNode {
+    text;
+    native;
+    constructor(text){
+        this.text = text;
+    }
+}
+class HydratedGeneratedRule {
+    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);
+        }
+    }
+}
+
+const supportsCache = new Map();
+const browserNativeDeclarationMatcher = ({ property, value })=>{
+    if (property.startsWith('--')) return true;
+    const cacheKey = property + '\0' + value;
+    const cached = supportsCache.get(cacheKey);
+    if (cached !== undefined) return cached;
+    const supported = Boolean(globalThis.CSS?.supports(property, value));
+    supportsCache.set(cacheKey, supported);
+    return supported;
+};
+
+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}`) : undefined;
+}
+function parseHydrationManifest(source) {
+    try {
+        const hydrationManifest = JSON.parse(source);
+        return hydrationManifest?.version === 1 && Array.isArray(hydrationManifest.rules) ? hydrationManifest : undefined;
+    } catch (error) {
+        {
+            console.debug('Cannot parse Master CSS hydration manifest.', error);
+        }
+    }
+}
+function readInlineHydrationManifest(root) {
+    const element = findElementById(root, MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID);
+    const source = element?.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) : undefined;
+}
+class CSSRuntime extends MasterCSS {
+    root;
+    hydrationManifest;
+    static instances = 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 = new Map();
+    classTracker = new RuntimeClassTracker();
+    hydrationFailureReason;
+    observer;
+    progressive = false;
+    observing = false;
+    static create(options) {
+        const { manifest, root = document, emittedGlobals, hydrationManifest } = options;
+        const resolvedHydrationManifest = hydrationManifest === undefined ? readInlineHydrationManifest(root) : hydrationManifest;
+        const current = globalThis.MasterCSSRuntime.instances.get(root);
+        if (current) {
+            current.registerEmittedGlobals(emittedGlobals);
+            if (resolvedHydrationManifest !== undefined) 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) {
+            __MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
+                cssRuntime: 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 = undefined;
+        }
+        return this;
+    }
+    setHydrationManifest(hydrationManifest) {
+        this.hydrationManifest = hydrationManifest;
+        return this;
+    }
+    needsHydrationManifest() {
+        return this.hydrationManifest === undefined && 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));
+    }
+    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.remove(...removedClassNames);
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:mutated', {
+            records,
+            classCounts: deltaCounts,
+            cssRuntime: this
+        });
+    }
+    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;
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:observed', {
+            cssRuntime: this
+        });
+        return this;
+    }
+    failHydration(reason) {
+        this.hydrationFailureReason = reason;
+        return undefined;
+    }
+    getHydrationManifestLayerRules() {
+        const layers = 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 = 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 = 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;
+                const animationRule = new AnimationRule(animationName, keyframes, this);
+                animationRule.variableNames?.forEach((variableName)=>collectVariable(variableName));
+            });
+        }
+        for (const [variableName, variable] of this.variables){
+            if (variable.static) collectVariable(variableName);
+        }
+        return variableNames;
+    }
+    collectHydrationManifestAnimationNames() {
+        const animationNames = 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 (!propertyName.startsWith('--')) return false;
+                found = true;
+                if (!this.isEmittedGlobalsVariable(propertyName.slice(2))) return false;
+            }
+        }
+        return found;
+    }
+    getVariableRuleBuckets(variableRules) {
+        const buckets = 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,
+                        selectorText: node.selectorText,
+                        nodes: []
+                    };
+                    buckets.set(key, bucket);
+                }
+                bucket.nodes.push(node);
+            }
+        }
+        return Array.from(buckets.values());
+    }
+    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) : undefined;
+        }).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 = 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 = 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) {
+        const expectedRuleCount = manifestRules.reduce((count, rule)=>count + (rule.nodes?.length || 1), 0);
+        if (expectedRuleCount !== 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++) || undefined;
+                }
+            } else {
+                hydratedRule.native = nativeLayerRule.cssRules.item(nativeIndex++) || undefined;
+            }
+            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 = undefined;
+        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 = new Map();
+        const nativeKeyframesRules = 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}.`);
+            const expectedRuleCount = manifestRules.reduce((count, rule)=>count + (rule.nodes?.length || 1), 0);
+            if (expectedRuleCount !== 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);
+        }
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:hydrated', {
+            cssRuntime: this,
+            result
+        });
+        return result;
+    }
+    disconnect() {
+        if (!this.observing) return;
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+        // @ts-ignore
+        this.observing = false;
+        this.reset();
+        this.loadManifest(this.manifest);
+        this.classCounts.clear();
+        this.classTracker.reset();
+        if (!this.progressive) {
+            this.style?.remove();
+            this.style = null;
+        }
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:disconnected', {
+            cssRuntime: this
+        });
+        return this;
+    }
+    refresh(manifest = this.manifest) {
+        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);
+        });
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:refreshed', {
+            cssRuntime: this,
+            manifest
+        });
+        return this;
+    }
+    destroy() {
+        this.disconnect();
+        this.unregister();
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:destroyed', {
+            cssRuntime: this
+        });
+        return this;
+    }
+}
+(function(CSSRuntime) {
+    registerGlobal(CSSRuntime);
+})(CSSRuntime);
+
+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()) {
+                    void cssRuntime.loadHydrationManifest().then(()=>{
+                        if (this.cssRuntime === cssRuntime) cssRuntime.observe();
+                    });
+                } else {
+                    cssRuntime.observe();
+                }
+            }
+            disconnectedCallback() {
+                disconnectedCallback?.call(this);
+                this.cssRuntime?.destroy();
+                this.cssRuntime = undefined;
+            }
+        };
+    };
+}
+
+export { CSSRuntime, RuntimeUtilityLayer, cssRuntime };