nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/tokens/resolution.js

@@ -1,13 +1,13 @@
 import { readTailwindV4AlphaUtility, tailwindV4AlphaExpression } from "../../css/dialects/index.js";
-import { INTERACTION_STATES } from "../shell/styleState.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
-import { collectRules as collectCssomRules, documentRevisions as getDocumentRevisions, registerResolutionElement, } from "./resolution/cssomCollector.js";
-import { computeSpecificity } from "./resolution/selectorSemantics.js";
+import { collectRules as collectCssomRules, documentRevisions as getDocumentRevisions, registerResolutionLineage, } from "./resolution/cssomCollector.js";
+import { createRuleMatcher, matchRuleForElement } from "./resolution/ruleMatching.js";
 import { compareAuthorCascade } from "./resolution/cascade.js";
-export { invalidateStyleResolutionCache } from "./resolution/cssomCollector.js";
 import { interpretValue, normalizeOpacityPercent, } from "../../css/value-semantics/index.js";
 import { createInspectorValueContext, inspectorTokenOrigin } from "./valueSemanticsAdapter.js";
-import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+export { getAvailableInteractionStates, resetSourceSiteMatchCache, sourceSiteMatchCacheSize } from "./resolution/ruleMatching.js";
+export { buildTokenTable, getTokenTable, getAvailableTokenEntriesForElement, getAvailableTokenCatalog } from "./tokenAvailability.js";
+export { invalidateStyleResolutionCache } from "./resolution/cssomCollector.js";
 /**
  * Builds (or reuses) the document's CSSOM rule snapshot ahead of a resolution
  * sweep. Idempotent: the walk runs once per stylesheet revision and is a cache
@@ -19,20 +19,6 @@ export function prewarmCssomRuleSnapshot(doc) {
 }
 const MAX_PROPERTIES = 100;
 const EMPTY_LOCAL_ALIASES = new Map();
-const tokenTableMemo = new WeakMap();
-export function buildTokenTable(entries) {
-    const cached = tokenTableMemo.get(entries);
-    if (cached)
-        return cached;
-    const table = {};
-    for (const entry of entries) {
-        table[entry.name] = entry;
-        if (entry.cssName)
-            table[entry.cssName] = entry;
-    }
-    tokenTableMemo.set(entries, table);
-    return table;
-}
 /**
  * Returns true when a `calc()` expression is safe to treat as a simple
  * numeric value. We exclude percentages, viewport units, and font-relative
@@ -50,200 +36,6 @@ function canBecomeNumeric(value) {
     const withoutVars = inner.replace(/var\([^)]+\)/g, "");
     return !/\b\d+(?:\.\d+)?(?:%|vw|vh|vmin|vmax|dvw|dvh|sv[lw]h|lv[lw]h|[ce]m|ex|ch)\b/i.test(withoutVars);
 }
-let tableCache = null;
-let tableSource = null;
-export function getTokenTable() {
-    const { tokens } = getNudgeUiRuntimeConfig();
-    if (tableCache !== null && tableSource === tokens)
-        return tableCache;
-    tableCache = buildTokenTable(tokens);
-    tableSource = tokens;
-    return tableCache;
-}
-function isCustomPropertyToken(definition) {
-    return definition.cssName.startsWith("--");
-}
-function entryFromDefinition(definition, value) {
-    return {
-        name: definition.name,
-        cssName: definition.cssName,
-        value,
-        source: definition.declarations[0]?.source ?? "",
-        cssValue: definition.cssValue,
-        adapter: definition.adapter,
-        origin: definition.origin,
-        editable: definition.editable,
-    };
-}
-const tokenEntriesCache = new WeakMap();
-function registerWithAncestors(el) {
-    let current = el;
-    while (current) {
-        registerResolutionElement(current);
-        current = current.parentElement;
-    }
-}
-/**
- * The build-time catalog is intentionally an inventory of every project token.
- * Element edits must instead use only custom properties resolved in that
- * element's cascade; a token defined by a lazy stylesheet is not usable until
- * that stylesheet is attached to the document. Entries are cached per element
- * until the element or stylesheet revision changes; the derived table reuses
- * `buildTokenTable`'s input-identity memo.
- */
-export function getAvailableTokenEntriesForElement(el, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
-    const revisions = getDocumentRevisions(el.ownerDocument ?? document);
-    const cached = tokenEntriesCache.get(el);
-    if (cached && cached.elementRevision === revisions.element
-        && cached.stylesheetRevision === revisions.stylesheet
-        && cached.definitions === definitions) {
-        return cached.entries;
-    }
-    registerWithAncestors(el);
-    const computed = getElementComputedStyle(el);
-    const available = definitions.flatMap((definition) => {
-        if (!isCustomPropertyToken(definition)) {
-            // Literal adapters (for example Tailwind v3) do not have a browser
-            // custom property to probe. Their adapter owns their availability.
-            return [entryFromDefinition(definition, definition.declarations[0]?.value ?? "")];
-        }
-        const value = computed.getPropertyValue(definition.cssName).trim();
-        return value ? [entryFromDefinition(definition, value)] : [];
-    });
-    const intermediateTable = buildTokenTable(available);
-    const entries = available.map((entry) => ({
-        ...entry,
-        value: resolveTokenValue(entry.value, intermediateTable).resolvedValue,
-    }));
-    tokenEntriesCache.set(el, {
-        elementRevision: revisions.element,
-        stylesheetRevision: revisions.stylesheet,
-        definitions,
-        entries,
-    });
-    return entries;
-}
-/**
- * Replaces build-time token declaration hints with declarations serialized by
- * the browser from the stylesheets currently attached to this document.
- */
-function hydrateTokenCatalogFromCssom(definitions, doc = document) {
-    const needsHydration = (definition) => definition.declarations.length === 0
-        || (definition.adapter === "vanilla-extract" && definition.declarations.every((declaration) => declaration.value.trim() === `var(${definition.cssName})`
-            && !declaration.context.selector
-            && !declaration.context.wrappers?.length));
-    const known = new Set(definitions.filter(needsHydration).map((definition) => definition.cssName));
-    const declarations = new Map();
-    for (const rule of collectCssomRules(doc).rules) {
-        if (rule.source === "#nudge-ui-styles")
-            continue;
-        for (const declaration of rule.declarations) {
-            if (!known.has(declaration.property))
-                continue;
-            const wrappers = [
-                ...(rule.layer ? [{ kind: "layer", params: rule.layer }] : []),
-                ...(rule.atRules ?? []).flatMap((atRule) => atRule.kind === "media" || atRule.kind === "supports"
-                    ? [{ kind: atRule.kind, params: atRule.params }]
-                    : []),
-            ];
-            const list = declarations.get(declaration.property) ?? [];
-            list.push({
-                id: `${declaration.property}\u0000${rule.source ?? "cssom"}\u0000${rule.sourceOrder ?? list.length}`,
-                order: rule.sourceOrder,
-                value: declaration.value,
-                source: rule.source ?? "cssom",
-                important: Boolean(declaration.important),
-                context: {
-                    selector: rule.selectorText,
-                    ...(wrappers.length > 0 ? { wrappers } : {}),
-                },
-            });
-            declarations.set(declaration.property, list);
-        }
-    }
-    return definitions.map((definition) => {
-        if (!needsHydration(definition))
-            return definition;
-        const accepted = declarations.get(definition.cssName);
-        return accepted?.length ? { ...definition, declarations: accepted } : definition;
-    });
-}
-function sourceFile(source) {
-    return source.replace(/:\d+$/, "").split(/[?#]/, 1)[0] ?? source;
-}
-function normalizedPath(value) {
-    return decodeURIComponent(value).replace(/\\/g, "/").replace(/^file:\/\//, "").replace(/\/+$/, "");
-}
-function loadedStylesheetSources(doc) {
-    const sourceIdentityByPath = new Map();
-    for (const node of doc.querySelectorAll('style[data-vite-dev-id], link[rel~="stylesheet"][href]')) {
-        const providesAuthoredIdentity = node.tagName === "STYLE";
-        const source = providesAuthoredIdentity
-            ? node.dataset.viteDevId
-            : node.getAttribute("href");
-        if (!source)
-            continue;
-        const path = normalizedPath(source.split(/[?#]/, 1)[0] ?? source);
-        sourceIdentityByPath.set(path, providesAuthoredIdentity || sourceIdentityByPath.get(path) === true);
-    }
-    return Array.from(sourceIdentityByPath, ([path, providesAuthoredIdentity]) => ({
-        path,
-        providesAuthoredIdentity,
-    }));
-}
-function isLoadedCssSource(source, loadedSources) {
-    const file = sourceFile(source);
-    if (!/\.css$/i.test(file) || loadedSources.length === 0)
-        return true;
-    const normalizedFile = normalizedPath(file);
-    return loadedSources.some((loaded) => loaded === normalizedFile
-        || loaded.endsWith(`/${normalizedFile}`)
-        || normalizedFile.endsWith(`/${loaded}`));
-}
-/**
- * Returns stylesheet identities only when the browser gave us a complete,
- * authored-source mapping. A compiled host can expose a mixture of source-like
- * and opaque CSS URLs; treating the mapped subset as complete would make
- * declarations behind the opaque URLs look lazy even while their variables are
- * live in the document.
- */
-function confidentlyLoadedStylesheetSources(definitions, loadedSources) {
-    const cssSources = definitions.flatMap((definition) => definition.declarations
-        .map((declaration) => declaration.source)
-        .filter((source) => /\.css$/i.test(sourceFile(source))));
-    const known = new Set();
-    for (const loaded of loadedSources) {
-        if (loaded.providesAuthoredIdentity
-            || cssSources.some((source) => isLoadedCssSource(source, [loaded.path]))) {
-            known.add(loaded.path);
-            continue;
-        }
-        // One opaque compiled URL can contain any authored declaration, so the
-        // document does not provide enough evidence to remove unloaded sources.
-        return [];
-    }
-    return [...known];
-}
-/**
- * Produces the page catalog used by the global Tokens settings section. It retains the
- * build-time inventory separately, while removing declarations from CSS files
- * that have not loaded when the document exposes mappable source identities
- * (such as Vite's lazy route stylesheets). Opaque compiled URLs do not narrow
- * the adapter-supplied catalog.
- */
-export function getAvailableTokenCatalog(root = document.documentElement, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
-    const computed = getElementComputedStyle(root);
-    const hydrated = hydrateTokenCatalogFromCssom(definitions, root.ownerDocument ?? document);
-    const loadedSources = confidentlyLoadedStylesheetSources(hydrated, loadedStylesheetSources(root.ownerDocument ?? document));
-    return hydrated.flatMap((definition) => {
-        if (!isCustomPropertyToken(definition))
-            return [definition];
-        if (!computed.getPropertyValue(definition.cssName).trim())
-            return [];
-        const declarations = definition.declarations.filter((declaration) => isLoadedCssSource(declaration.source, loadedSources));
-        return declarations.length > 0 ? [{ ...definition, declarations }] : [];
-    });
-}
 function normalizeInElementContext(el, property, value) {
     const doc = el.ownerDocument;
     const probe = doc.createElement(el.tagName.toLowerCase());
@@ -265,8 +57,8 @@ function candidateMatchesPainted(el, row, painted) {
 }
 /**
  * Resolves one authored value through the value-semantics Module using the
- * inspector's integration context. Used by the token-availability path; the
- * value Module is the sole interpretation authority.
+ * inspector's integration context. Value semantics remains the sole
+ * interpretation authority.
  */
 function resolveTokenValue(value, tokenTable, localAliases = EMPTY_LOCAL_ALIASES) {
     return interpretValue("--nudge-ui-token", value, createInspectorValueContext(tokenTable, localAliases))[0];
@@ -373,12 +165,6 @@ function atRulesApplyToElement(el, atRules) {
         return true;
     });
 }
-function specificityForBranch(rule, branch) {
-    // Single-branch selectors reuse the specificity collected from CSSOM; the
-    // matched branch is the whole selector. Multi-branch selectors need the
-    // matched branch's own weight, so recompute per branch.
-    return rule.selectorText.includes(",") ? computeSpecificity(branch) : rule.specificity;
-}
 function collectLocalAliases(el, rules, ruleApplies) {
     // Custom properties inherit independently of the property being resolved.
     // Resolve the winning declaration separately for each element in the
@@ -399,11 +185,11 @@ function collectLocalAliases(el, rules, ruleApplies) {
                 return;
             if (!ruleApplies(rule))
                 return;
-            const branch = matchingSelectorBranch(element, rule.selectorText);
-            if (!branch)
+            const match = matchRuleForElement(element, { rule, selectorText: rule.selectorText });
+            if (!match)
                 return;
             const sourceOrder = rule.sourceOrder ?? index;
-            const specificity = specificityForBranch(rule, branch);
+            const { specificity } = match;
             for (const declaration of rule.declarations) {
                 if (!declaration.property.startsWith("--"))
                     continue;
@@ -459,324 +245,13 @@ function makeRuleApplies(el) {
         return result;
     };
 }
-const TRANSIENT_SELECTOR = /:(?:hover|active|focus|focus-visible|focus-within|visited|target)(?:\b|\()/;
-const transformedRulesMemo = new WeakMap();
-function rulesForTransform(rules, transform) {
-    let byTransform = transformedRulesMemo.get(rules);
-    if (!byTransform) {
-        byTransform = new Map();
-        transformedRulesMemo.set(rules, byTransform);
-    }
-    const cached = byTransform.get(transform);
-    if (cached)
-        return cached;
-    let transformed;
-    if (transform === "live") {
-        transformed = rules.map((rule) => ({ rule, selectorText: rule.selectorText }));
-    }
-    else if (transform === "stable") {
-        transformed = rules
-            .filter((rule) => !TRANSIENT_SELECTOR.test(rule.selectorText))
-            .map((rule) => ({ rule, selectorText: rule.selectorText }));
-    }
-    else {
-        transformed = rules.flatMap((rule) => {
-            const selectorText = selectorForState(rule.selectorText, transform);
-            return selectorText ? [{ rule, selectorText }] : [];
-        });
-    }
-    byTransform.set(transform, transformed);
-    return transformed;
-}
-function isElementSensitiveSelector(selector) {
-    let attributeDepth = 0;
-    let quote = null;
-    let escaped = false;
-    for (let index = 0; index < selector.length; index++) {
-        const character = selector[index];
-        if (quote) {
-            if (escaped)
-                escaped = false;
-            else if (character === "\\")
-                escaped = true;
-            else if (character === quote)
-                quote = null;
-            continue;
-        }
-        if (attributeDepth > 0) {
-            if (character === '"' || character === "'")
-                quote = character;
-            else if (character === "[")
-                attributeDepth++;
-            else if (character === "]")
-                attributeDepth--;
-            continue;
-        }
-        if (character === "[") {
-            attributeDepth = 1;
-            continue;
-        }
-        if (character === "+" || character === "~")
-            return true;
-        if (character !== ":")
-            continue;
-        if (selector[index + 1] === ":")
-            return true;
-        const pseudo = /^[A-Za-z-]+/.exec(selector.slice(index + 1))?.[0];
-        // :root is represented by the complete ancestor lineage. Other
-        // pseudo-classes can vary per concrete element without an attribute or
-        // sibling mutation (for example :checked, :visited, and :target).
-        if (pseudo && pseudo.toLowerCase() !== "root")
-            return true;
-    }
-    return false;
-}
-const sourceSiteMatchBucketsMemo = new WeakMap();
-function sourceSiteMatchBuckets(rules, transform) {
-    let byTransform = sourceSiteMatchBucketsMemo.get(rules);
-    if (!byTransform) {
-        byTransform = new Map();
-        sourceSiteMatchBucketsMemo.set(rules, byTransform);
-    }
-    const cached = byTransform.get(transform);
-    if (cached)
-        return cached;
-    const cacheable = [];
-    const elementSensitive = [];
-    for (const entry of rulesForTransform(rules, transform)) {
-        (isElementSensitiveSelector(entry.selectorText) ? elementSensitive : cacheable).push(entry);
-    }
-    const buckets = { cacheable, elementSensitive };
-    byTransform.set(transform, buckets);
-    return buckets;
-}
-const SOURCE_SITE_CACHE_MAX = 4096;
-let sourceSiteMatchCaches = new WeakMap();
-let sourceSiteMatchCacheEntries = 0;
-const concreteElementMatchCaches = new WeakMap();
-// The "all matched" set (inactive rules included) is matched fresh against
-// every lineage element on every resolution otherwise, duplicating the
-// cached sweep's cost. State-independent selectors use the same revision-keyed
-// memo shape as the active sweep. Element-sensitive selectors stay fresh: a
-// checked state, sibling relationship, or similar browser state can change
-// without a DOM mutation that this registry observes.
-const allMatchesMemo = new WeakMap();
-/** Test hook: clears the per-source-site matched-rule cache. */
-export function resetSourceSiteMatchCache() {
-    sourceSiteMatchCaches = new WeakMap();
-    sourceSiteMatchCacheEntries = 0;
-}
-/** Test hook: number of distinct cached source-site match sets. */
-export function sourceSiteMatchCacheSize() {
-    return sourceSiteMatchCacheEntries;
-}
-/**
- * Captures selector-relevant state without serializing the whole document.
- * Element and ancestor attributes cover the common source-site selectors while
- * child/sibling-sensitive selectors are handled conservatively below.
- */
-function sourceSiteContextKey(el) {
-    const lineage = [];
-    let current = el;
-    while (current) {
-        const attributes = Array.from(current.attributes)
-            .filter((attribute) => attribute.name !== "data-renderer-id")
-            .sort((a, b) => a.name.localeCompare(b.name))
-            .map((attribute) => `${attribute.name}=${attribute.value}`)
-            .join("\u0002");
-        lineage.push(`${current.tagName}\u0003${attributes}`);
-        current = current.parentElement;
-    }
-    return lineage.join("\u0001");
-}
-/**
- * Source-site identity key for the matched-rule cache. The element's class is
- * part of the key because sibling instances of a source site can carry
- * different classes (for example rows in a large list), which changes which
- * rules match even though their `data-cid`/`data-src` are identical.
- */
-function sourceSiteKey(el, transform) {
-    const cid = el.getAttribute("data-cid") ?? "";
-    const src = el.getAttribute("data-src") ?? "";
-    const instance = el.getAttribute("data-projection-instance") ?? "";
-    const className = typeof el.className === "string" ? el.className : "";
-    return `${cid}\u0000${src}\u0000${instance}\u0000${className}\u0000${transform}`;
-}
-function matchRuleForElement(el, entry) {
-    const branch = matchingSelectorBranch(el, entry.selectorText);
-    if (!branch)
-        return null;
-    return {
-        rule: entry.rule,
-        selectorText: entry.selectorText,
-        branch,
-        specificity: specificityForBranch({ ...entry.rule, selectorText: entry.selectorText }, branch),
-    };
-}
-/**
- * Captures the current match outcome for selectors whose truth can change
- * without a document revision. This keeps the expensive resolved-row cache
- * usable while invalidating it when states such as `checked` actually change.
- */
-function elementSensitiveMatchKey(el, rules, transform) {
-    const entries = sourceSiteMatchBuckets(rules, transform).elementSensitive;
-    if (entries.length === 0)
-        return "";
-    const matches = [];
-    let current = el;
-    let depth = 0;
-    while (current) {
-        for (const entry of entries) {
-            const branch = matchingSelectorBranch(current, entry.selectorText);
-            if (branch)
-                matches.push(`${depth}:${entry.rule.sourceOrder ?? 0}:${branch}`);
-        }
-        current = current.parentElement;
-        depth++;
-    }
-    return matches.join("\u0001");
-}
-/**
- * Matches every transformed rule against one element. For elements carrying a
- * source-site identity (`data-cid`) the selector-match result is cached per
- * `(document, data-cid, data-src, data-projection-instance, transform, element and
- * stylesheet revision, context)` so repeated selections and equivalent sibling instances of the
- * same source site reuse the matched rule set. Elements without a stable
- * identity, or selectors that depend on unsupported relationships, are matched
- * fresh on every call.
- */
-function getCachedElementMatches(el, rules, transform) {
-    const { cacheable, elementSensitive } = sourceSiteMatchBuckets(rules, transform);
-    const collect = (entries) => {
-        const matched = [];
-        for (const entry of entries) {
-            if (entry.rule.active === false)
-                continue;
-            const match = matchRuleForElement(el, entry);
-            if (match)
-                matched.push(match);
-        }
-        return matched;
-    };
-    const cid = el.getAttribute("data-cid");
-    const doc = el.ownerDocument ?? document;
-    const revisions = getDocumentRevisions(doc);
-    if (!cid || cacheable.length === 0) {
-        let cachedMatches = [];
-        if (cacheable.length > 0) {
-            let cache = concreteElementMatchCaches.get(el);
-            if (!cache) {
-                cache = new Map();
-                concreteElementMatchCaches.set(el, cache);
-            }
-            const cached = cache.get(transform);
-            if (cached
-                && cached.elementRevision === revisions.element
-                && cached.stylesheetRevision === revisions.stylesheet) {
-                cachedMatches = cached.matched;
-            }
-            else {
-                cachedMatches = collect(cacheable);
-                cache.set(transform, {
-                    elementRevision: revisions.element,
-                    stylesheetRevision: revisions.stylesheet,
-                    matched: cachedMatches,
-                });
-            }
-        }
-        const sensitiveMatches = elementSensitive.length > 0 ? collect(elementSensitive) : [];
-        return sensitiveMatches.length === 0 ? cachedMatches : [...cachedMatches, ...sensitiveMatches];
-    }
-    const key = `${sourceSiteKey(el, transform)}\u0000${sourceSiteContextKey(el)}`;
-    let cache = sourceSiteMatchCaches.get(doc);
-    if (!cache) {
-        cache = new Map();
-        sourceSiteMatchCaches.set(doc, cache);
-    }
-    const cached = cache.get(key);
-    let cachedMatches;
-    if (cached
-        && cached.elementRevision === revisions.element
-        && cached.stylesheetRevision === revisions.stylesheet) {
-        cachedMatches = cached.matched;
-    }
-    else {
-        cachedMatches = collect(cacheable);
-        if (sourceSiteMatchCacheEntries >= SOURCE_SITE_CACHE_MAX) {
-            sourceSiteMatchCaches = new WeakMap();
-            sourceSiteMatchCacheEntries = 0;
-            cache = new Map();
-            sourceSiteMatchCaches.set(doc, cache);
-        }
-        if (!cache.has(key))
-            sourceSiteMatchCacheEntries++;
-        cache.set(key, {
-            elementRevision: revisions.element,
-            stylesheetRevision: revisions.stylesheet,
-            matched: cachedMatches,
-        });
-    }
-    // Match element-sensitive selectors on every resolution. Browser state such
-    // as `checked`, `target`, or a sibling relationship can change without a DOM
-    // or stylesheet revision, so a revision-keyed entry can return stale rows.
-    const elementMatches = elementSensitive.length > 0 ? collect(elementSensitive) : [];
-    return elementMatches.length === 0 ? cachedMatches : [...cachedMatches, ...elementMatches];
-}
-/**
- * Matches selectors without applying conditional wrappers. Resolution still
- * uses the active-only set for cascade decisions; this set preserves inactive
- * media-query alternatives for property attribution in the inspector.
- * Memoized per (element, transform, revisions) like the cached sweep for
- * state-independent selectors. Element-sensitive selectors stay fresh because
- * their state can change without a revision bump (for example, `:checked`),
- * and the "live" transform always keeps its raw selector set fresh.
- */
-function getAllElementMatches(el, rules, transform) {
-    if (transform === "live") {
-        return rulesForTransform(rules, transform).flatMap((entry) => {
-            const match = matchRuleForElement(el, entry);
-            return match ? [match] : [];
-        });
-    }
-    const { cacheable, elementSensitive } = sourceSiteMatchBuckets(rules, transform);
-    const collect = (entries) => entries.flatMap((entry) => {
-        const match = matchRuleForElement(el, entry);
-        return match ? [match] : [];
-    });
-    const doc = el.ownerDocument ?? document;
-    const revisions = getDocumentRevisions(doc);
-    let cachedMatches = [];
-    if (cacheable.length > 0) {
-        let byTransform = allMatchesMemo.get(el);
-        if (!byTransform) {
-            byTransform = new Map();
-            allMatchesMemo.set(el, byTransform);
-        }
-        const cached = byTransform.get(transform);
-        if (cached
-            && cached.elementRevision === revisions.element
-            && cached.stylesheetRevision === revisions.stylesheet) {
-            cachedMatches = cached.matched;
-        }
-        else {
-            cachedMatches = collect(cacheable);
-            byTransform.set(transform, {
-                elementRevision: revisions.element,
-                stylesheetRevision: revisions.stylesheet,
-                matched: cachedMatches,
-            });
-        }
-    }
-    const sensitiveMatches = elementSensitive.length > 0 ? collect(elementSensitive) : [];
-    return sensitiveMatches.length === 0 ? cachedMatches : [...cachedMatches, ...sensitiveMatches];
-}
 /**
  * One matching pass over the rules for the element and its ancestors, with the
  * selector-match results shared between the element's own resolution and the
  * inherited phase. Local aliases are collected per element so no ancestor
  * re-walks the lineage × rules.
  */
-function resolveLineage(el, rules, transform) {
+function resolveLineage(el, matcher) {
     const lineage = [];
     let current = el;
     while (current) {
@@ -787,8 +262,9 @@ function resolveLineage(el, rules, transform) {
     const selectorMatches = new Map();
     const allSelectorMatches = new Map();
     for (const element of lineage) {
-        selectorMatches.set(element, getCachedElementMatches(element, rules, transform));
-        allSelectorMatches.set(element, getAllElementMatches(element, rules, transform));
+        const { matched, allMatched } = matcher.matchesForElement(element);
+        selectorMatches.set(element, matched);
+        allSelectorMatches.set(element, allMatched);
     }
     const byElement = new Map();
     for (let index = 0; index < lineage.length; index++) {
@@ -980,72 +456,6 @@ export function resolveRuleFixture(el, rules, tokenTable) {
     const localAliases = collectLocalAliases(el, rules, ruleApplies);
     return rowsFromMatches(el, matched, localAliases, tokenTable, allMatched);
 }
-// Selector branch splits are pure functions of the selector text and repeat
-// for every element and resolution sweep. Memoize them so repeated matching
-// passes skip re-scanning the same selector strings. Bounded like the other
-// match caches; the snapshot's selector set is finite per stylesheet revision.
-const SELECTOR_SPLIT_CACHE_MAX = 8192;
-const selectorSplitMemo = new Map();
-// The matched branch for one (element, selector) pair is a pure function of
-// the element's selector-relevant state and the CSSOM snapshot — except for
-// selectors whose match depends on transient state the revisions cannot see
-// (`:hover`, `:checked`, sibling combinators, …). Those keep the freshness
-// contract of the element-sensitive bucket and are matched uncached.
-// Resolution sweeps re-match the same state-independent selector strings
-// against the same lineage elements across cascades (authored base, stable,
-// interaction states) and across the active/all rule sets, so memoizing the
-// branch turns repeat sweeps into cache hits. Invalidation follows the
-// document revisions, the same strategy as the per-element match caches.
-const ELEMENT_BRANCH_CACHE_MAX = 16384;
-const elementBranchMemo = new WeakMap();
-function isBranchMemoizable(selectorText) {
-    return !TRANSIENT_SELECTOR.test(selectorText) && !isElementSensitiveSelector(selectorText);
-}
-function matchingSelectorBranch(el, selectorText) {
-    const doc = el.ownerDocument ?? document;
-    const revisions = getDocumentRevisions(doc);
-    let bySelector = elementBranchMemo.get(el);
-    const memoizable = isBranchMemoizable(selectorText);
-    if (memoizable) {
-        if (!bySelector) {
-            bySelector = new Map();
-            elementBranchMemo.set(el, bySelector);
-        }
-        const cached = bySelector.get(selectorText);
-        if (cached
-            && cached.elementRevision === revisions.element
-            && cached.stylesheetRevision === revisions.stylesheet) {
-            return cached.branch;
-        }
-    }
-    let branches = selectorSplitMemo.get(selectorText);
-    if (!branches) {
-        branches = splitTopLevel(selectorText, ",");
-        if (selectorSplitMemo.size >= SELECTOR_SPLIT_CACHE_MAX)
-            selectorSplitMemo.clear();
-        selectorSplitMemo.set(selectorText, branches);
-    }
-    let branch = null;
-    for (const candidate of branches) {
-        try {
-            if (el.matches(candidate.trim())) {
-                branch = candidate.trim();
-                break;
-            }
-        }
-        catch { /* invalid/unsupported selector */ }
-    }
-    if (memoizable) {
-        if (bySelector.size >= ELEMENT_BRANCH_CACHE_MAX)
-            bySelector.clear();
-        bySelector.set(selectorText, {
-            elementRevision: revisions.element,
-            stylesheetRevision: revisions.stylesheet,
-            branch,
-        });
-    }
-    return branch;
-}
 function compareCandidate(a, b) {
     return compareAuthorCascade({
         important: a.evidence.important,
@@ -1091,34 +501,6 @@ function inferTailwindV4ColorOpacity(el, tokenTable, rows) {
         return;
     }
 }
-// Splits CSS values at top-level combinators or an optional delimiter.
-function splitTopLevel(s, sep) {
-    const parts = [];
-    let depth = 0;
-    let start = 0;
-    for (let i = 0; i < s.length; i++) {
-        if (s[i] === "(")
-            depth++;
-        else if (s[i] === ")")
-            depth--;
-        else if (depth === 0 && sep && s[i] === sep) {
-            parts.push(s.slice(start, i));
-            start = i + 1;
-        }
-        else if (depth === 0 && !sep && (s[i] === " " || s[i] === ">" || s[i] === "+" || s[i] === "~")) {
-            // Only split on combinators that have non-space around them
-            // If previous char was also a combinator, skip
-            if (i > start) {
-                parts.push(s.slice(start, i).trim());
-            }
-            start = i + 1;
-        }
-    }
-    const last = s.slice(start).trim();
-    if (last)
-        parts.push(last);
-    return parts;
-}
 const stateResolutionSnapshots = new WeakMap();
 const INHERITED_PROPERTIES = new Set([
     "color", "font", "font-family", "font-size", "font-style", "font-variant", "font-weight",
@@ -1156,19 +538,28 @@ function resolveInheritedProperties(el, tokenTable, lineage, result, inaccessibl
     }
     return result;
 }
-export function getResolvedProperties(el, tokenTable) {
-    const doc = el.ownerDocument ?? document;
-    const { rules, inaccessible } = collectCssomRules(doc);
-    const lineage = resolveLineage(el, rules, "live");
+function resolveMatchedProperties(el, tokenTable, lineage, inaccessible, mode) {
     const entry = lineage.byElement.get(el);
     const result = rowsFromMatches(el, entry.matched, entry.aliases, tokenTable, entry.allMatched);
     const computed = getElementComputedStyle(el);
+    if (mode !== "stable")
+        annotatePaintedValues(el, result, computed, inaccessible, mode);
+    applyInlineDeclarations(el, result, tokenTable, computed, inaccessible);
+    hydratePropertyOpacityRows(result, computed);
+    promoteNumericCalcRows(result, tokenTable);
+    return resolveInheritedProperties(el, tokenTable, lineage, result, inaccessible);
+}
+function annotatePaintedValues(el, result, computed, inaccessible, mode) {
     for (const prop of result) {
         const cv = computed.getPropertyValue(prop.property);
         if (cv && !/\b(?:var|calc)\s*\(/.test(cv)) {
-            prop.resolvedValue = cv;
+            // A hypothetical state retains its authored value while `computed`
+            // records what the browser is painting. Live and base use painted values.
+            if (mode === "live" || mode === "base" || !prop.resolvedValue)
+                prop.resolvedValue = cv;
             prop.computed = cv;
-            hydratePropertyOpacity(prop, cv);
+            if (mode === "live")
+                hydratePropertyOpacity(prop, cv);
             const validated = candidateMatchesPainted(el, prop, cv);
             prop.confidence = validated && !inaccessible && !prop.evidence.layer ? "exact" : prop.tokenName ? "probable" : "unknown";
             prop.evidence.inaccessibleStylesheet = inaccessible || undefined;
@@ -1177,10 +568,12 @@ export function getResolvedProperties(el, tokenTable) {
                 : "painted value has no attributable catalog token";
         }
     }
-    applyInlineDeclarations(el, result, tokenTable, computed, inaccessible);
-    hydratePropertyOpacityRows(result, computed);
-    promoteNumericCalcRows(result, tokenTable);
-    return resolveInheritedProperties(el, tokenTable, lineage, result, inaccessible);
+}
+export function getResolvedProperties(el, tokenTable) {
+    const doc = el.ownerDocument ?? document;
+    const { rules, inaccessible } = collectCssomRules(doc);
+    const lineage = resolveLineage(el, createRuleMatcher(rules, "live"));
+    return resolveMatchedProperties(el, tokenTable, lineage, inaccessible, "live");
 }
 function applyInlineDeclarations(el, result, tokenTable, computed, inaccessible) {
     // Inline declarations participate in the cascade and are explicit evidence,
@@ -1247,22 +640,6 @@ function promoteNumericCalcRows(result, tokenTable) {
         prop.capability = capabilityFor(prop.property, numeric, tokenTable);
     }
 }
-const INTERACTION_SELECTOR = /:(hover|active|focus-visible|focus|disabled)(?:\b|\()/g;
-function selectorForState(selector, state) {
-    const states = new Set();
-    INTERACTION_SELECTOR.lastIndex = 0;
-    let match;
-    while ((match = INTERACTION_SELECTOR.exec(selector)) !== null)
-        states.add(match[1]);
-    if (state === "base")
-        return states.size === 0 ? selector : null;
-    if (!states.has(state))
-        return states.size === 0 ? selector : null;
-    // CSSOM cannot ask the browser whether a hypothetical pseudo-class matches.
-    // Removing interaction pseudo-classes gives the authored rule a stable
-    // element match for inspection. The real rule remains untouched.
-    return selector.replace(INTERACTION_SELECTOR, "");
-}
 /**
  * Resolve the authored cascade for a chosen interaction state without relying
  * on the pointer's current location. This is intentionally attribution-first:
@@ -1273,7 +650,8 @@ export function getResolvedPropertiesForState(el, tokenTable, state) {
     const doc = el.ownerDocument ?? document;
     const revisions = getDocumentRevisions(doc);
     const { rules, inaccessible } = collectCssomRules(doc);
-    const dynamicMatchKey = elementSensitiveMatchKey(el, rules, state);
+    const matcher = createRuleMatcher(rules, state);
+    const dynamicMatchKey = matcher.dynamicMatchKey(el);
     let snapshots = stateResolutionSnapshots.get(el);
     if (!snapshots) {
         snapshots = new Map();
@@ -1287,33 +665,9 @@ export function getResolvedPropertiesForState(el, tokenTable, state) {
         && cached.dynamicMatchKey === dynamicMatchKey) {
         return cached.rows;
     }
-    const lineage = resolveLineage(el, rules, state);
-    const entry = lineage.byElement.get(el);
-    const result = rowsFromMatches(el, entry.matched, entry.aliases, tokenTable, entry.allMatched);
-    const computed = getElementComputedStyle(el);
-    for (const prop of result) {
-        const cv = computed.getPropertyValue(prop.property);
-        if (cv && !/\b(?:var|calc)\s*\(/.test(cv)) {
-            // A selected interaction state is hypothetical: the element may still
-            // be painting its Base styles. `rowsFromMatches` has already resolved
-            // the authored declaration for the requested state, so preserve that
-            // value for editor controls and keep the live CSSOM value in `computed`.
-            if (state === "base" || !prop.resolvedValue)
-                prop.resolvedValue = cv;
-            prop.computed = cv;
-            const validated = candidateMatchesPainted(el, prop, cv);
-            prop.confidence = validated && !inaccessible && !prop.evidence.layer ? "exact" : prop.tokenName ? "probable" : "unknown";
-            prop.evidence.inaccessibleStylesheet = inaccessible || undefined;
-            prop.evidence.reason = prop.tokenName
-                ? (validated ? "authored token declaration validated against computed style" : "authored token candidate could not be proven uniquely")
-                : "painted value has no attributable catalog token";
-        }
-    }
-    applyInlineDeclarations(el, result, tokenTable, computed, inaccessible);
-    hydratePropertyOpacityRows(result, computed);
-    promoteNumericCalcRows(result, tokenTable);
-    const rows = resolveInheritedProperties(el, tokenTable, lineage, result, inaccessible);
-    registerWithAncestors(el);
+    const lineage = resolveLineage(el, matcher);
+    const rows = resolveMatchedProperties(el, tokenTable, lineage, inaccessible, state);
+    registerResolutionLineage(el);
     snapshots.set(state, {
         elementRevision: revisions.element,
         stylesheetRevision: revisions.stylesheet,
@@ -1323,46 +677,6 @@ export function getResolvedPropertiesForState(el, tokenTable, state) {
     });
     return rows;
 }
-/**
- * Interaction states whose pseudo-class substring appears in at least one
- * snapshot selector, memoized per CSSOM snapshot. The availability check for a
- * state is `matched.some((m) => m.rule.selectorText.includes(":state"))`, so a
- * state whose substring appears nowhere can never become available for any
- * element; skipping its per-state match sweep is exactly equivalent and
- * removes the dominant cost of re-scanning interaction states after every
- * stylesheet revision.
- */
-const statesWithPseudoInSnapshot = new WeakMap();
-function statesWithPseudoInSelectors(rules) {
-    let present = statesWithPseudoInSnapshot.get(rules);
-    if (!present) {
-        present = new Set();
-        for (const rule of rules) {
-            for (const state of INTERACTION_STATES) {
-                if (!present.has(state) && rule.selectorText.includes(`:${state}`)) {
-                    present.add(state);
-                }
-            }
-        }
-        statesWithPseudoInSnapshot.set(rules, present);
-    }
-    return present;
-}
-export function getAvailableInteractionStates(el) {
-    const doc = el.ownerDocument ?? document;
-    const { rules } = collectCssomRules(doc);
-    const present = statesWithPseudoInSelectors(rules);
-    const available = ["base"];
-    for (const state of INTERACTION_STATES) {
-        if (!present.has(state))
-            continue;
-        const matched = getCachedElementMatches(el, rules, state);
-        const relevant = matched.some((m) => m.rule.selectorText.includes(`:${state}`));
-        if (relevant)
-            available.push(state);
-    }
-    return available;
-}
 const stableTokenCache = new WeakMap();
 /**
  * Resolves the cascade with transient interaction selectors removed. Used when
@@ -1373,7 +687,8 @@ export function getResolvedPropertiesStable(el, tokenTable) {
     const doc = el.ownerDocument ?? document;
     const revisions = getDocumentRevisions(doc);
     const { rules, inaccessible } = collectCssomRules(doc);
-    const dynamicMatchKey = elementSensitiveMatchKey(el, rules, "stable");
+    const matcher = createRuleMatcher(rules, "stable");
+    const dynamicMatchKey = matcher.dynamicMatchKey(el);
     const cached = stableTokenCache.get(el);
     if (cached
         && cached.elementRevision === revisions.element
@@ -1382,14 +697,8 @@ export function getResolvedPropertiesStable(el, tokenTable) {
         && cached.dynamicMatchKey === dynamicMatchKey) {
         return cached.rows;
     }
-    const lineage = resolveLineage(el, rules, "stable");
-    const entry = lineage.byElement.get(el);
-    const result = rowsFromMatches(el, entry.matched, entry.aliases, tokenTable, entry.allMatched);
-    const computed = getElementComputedStyle(el);
-    applyInlineDeclarations(el, result, tokenTable, computed, inaccessible);
-    hydratePropertyOpacityRows(result, computed);
-    promoteNumericCalcRows(result, tokenTable);
-    const rows = resolveInheritedProperties(el, tokenTable, lineage, result, inaccessible);
+    const lineage = resolveLineage(el, matcher);
+    const rows = resolveMatchedProperties(el, tokenTable, lineage, inaccessible, "stable");
     stableTokenCache.set(el, {
         elementRevision: revisions.element,
         stylesheetRevision: revisions.stylesheet,