nudge-ui 0.2.4 → 0.2.5

package/dist/inspector/styleEditors/borderModel.js

@@ -0,0 +1,114 @@
+import { findTokenRow } from "./rowLookup.js";
+import { isZeroCssValue } from "./stylePresence.js";
+export const BORDER_STYLES = ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
+export const BORDER_SIDES = ["top", "right", "bottom", "left"];
+const BORDER_STYLE_SET = new Set(BORDER_STYLES);
+const INVISIBLE_BORDER_STYLES = new Set(["none", "hidden"]);
+const COMPONENT_FALLBACK = {
+    width: "0px",
+    style: "none",
+    color: "currentcolor",
+};
+export function borderProperty(component, side) {
+    return side ? `border-${side}-${component}` : `border-${component}`;
+}
+function isBorderStyle(value) {
+    return BORDER_STYLE_SET.has(value);
+}
+function sideProperties(component) {
+    return BORDER_SIDES.map((side) => borderProperty(component, side));
+}
+/**
+ * Effective value of one border width, style, or color property. Structured
+ * shorthand parts win, then authored text, then the computed style.
+ */
+function borderComponentValue(source, component, property) {
+    const row = findTokenRow(source.rows, property);
+    const fallback = COMPONENT_FALLBACK[component];
+    const structured = row?.structure?.[component]?.trim();
+    if (component === "style") {
+        if (structured)
+            return structured.toLowerCase();
+        const authored = (row?.authored ?? row?.declaredValue ?? "").trim().toLowerCase();
+        if (isBorderStyle(authored))
+            return authored;
+        return (source.computed(property, fallback) || fallback).toLowerCase();
+    }
+    if (structured)
+        return structured;
+    return (row?.authored || row?.declaredValue || row?.resolvedValue || source.computed(property, fallback) || fallback).trim();
+}
+/** Width and color compare token bindings too, so a token on one side keeps sides apart. */
+function sideSignature(source, component, property) {
+    const value = borderComponentValue(source, component, property).toLowerCase();
+    if (component === "style")
+        return value;
+    return `${value}|${findTokenRow(source.rows, property)?.tokenName ?? ""}`;
+}
+/**
+ * A component is linked when every side shares its value. A lone shorthand row
+ * with no per-side rows is linked by construction; four different `border-*`
+ * shorthands compare by their structured parts, not their full text.
+ */
+function componentLinked(source, component) {
+    const properties = sideProperties(component);
+    const hasShorthandRow = findTokenRow(source.rows, borderProperty(component)) !== null;
+    const hasSideRows = properties.some((property) => findTokenRow(source.rows, property) !== null);
+    if (hasShorthandRow && !hasSideRows)
+        return true;
+    return new Set(properties.map((property) => sideSignature(source, component, property))).size === 1;
+}
+function linkedRow(source, component) {
+    const shorthand = borderProperty(component);
+    const direct = findTokenRow(source.rows, shorthand);
+    if (direct)
+        return direct;
+    const top = findTokenRow(source.rows, borderProperty(component, "top"));
+    return top ? { ...top, property: shorthand } : null;
+}
+export function readBorderEditor(source, { group }) {
+    const borderRow = findTokenRow(source.rows, "border");
+    const hasStructuredRows = source.rows.some((row) => Boolean(row.structure));
+    return {
+        sidesLinked: !group
+            && componentLinked(source, "width")
+            && componentLinked(source, "style")
+            && componentLinked(source, "color"),
+        rawShorthandRow: !group && borderRow && !borderRow.structure && !hasStructuredRows ? borderRow : null,
+        linkedStyleDraws: !INVISIBLE_BORDER_STYLES.has(borderComponentValue(source, "style", "border-style")),
+        linkedRows: {
+            width: linkedRow(source, "width"),
+            style: linkedRow(source, "style"),
+            color: linkedRow(source, "color"),
+        },
+    };
+}
+/** Whether any side draws a visible line, including after stylesheet resets. */
+export function hasVisibleBorder(computed) {
+    return BORDER_SIDES.some((side) => {
+        const style = computed(borderProperty("style", side), "none").toLowerCase();
+        if (INVISIBLE_BORDER_STYLES.has(style))
+            return false;
+        return !isZeroCssValue(computed(borderProperty("width", side), "0px"));
+    });
+}
+/** Linking sides writes each component shorthand from the top side's values. */
+function linkSidesDeclarations(source) {
+    const components = ["style", "width", "color"];
+    return components.map((component) => ({
+        property: borderProperty(component),
+        value: borderComponentValue(source, component, borderProperty(component, "top")),
+    }));
+}
+export function borderDeclarations(source, intent) {
+    switch (intent.kind) {
+        case "add":
+            return [{ property: "border", value: "1px solid" }];
+        case "remove":
+            return [{ property: "border", value: "0 solid" }];
+        case "link-sides":
+            return linkSidesDeclarations(source);
+        case "set-style":
+            return isBorderStyle(intent.style) ? [{ property: intent.property, value: intent.style }] : [];
+    }
+}

package/dist/inspector/styleEditors/layoutValue.js

@@ -1,7 +1,7 @@
 import { getActiveStyleState } from "../shell/styleState.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
-import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { readInspectionSnapshot } from "../inspection/inspectionSnapshot.js";
 const DEFAULT_LAYOUT_VALUES = {
     width: "auto",
     height: "auto",
@@ -33,8 +33,7 @@ export function meaningfulLayoutValue(el, property) {
 export function readAuthoredStyleValue(el, property) {
     try {
         const state = getActiveStyleState();
-        const row = getBrowserCssInspection(el.ownerDocument ?? document)
-            .inspect(el, { state }).properties
+        const row = readInspectionSnapshot(el, state)?.properties
             .find((candidate) => candidate.property === property);
         const authored = row?.authored ?? row?.declaredValue;
         if (authored?.trim())

package/dist/inspector/tokens/TokenField.js

@@ -16,10 +16,11 @@ import { Tooltip } from "../ui/Tooltip.js";
 import { cx } from "../ui/classNames.js";
 import { TokenChip } from "./TokenChip.js";
 import { startDragPointerLock } from "./dragPointerLock.js";
-import { createChangeHistoryGroup } from "../changes/draftChanges.js";
+import { createChangeHistoryGroup } from "../workspace/timeline.js";
 import { isMultiTarget } from "../selection/editTarget.js";
 import { inlineBlockedBy } from "../styleEditors/inlineAuthored.js";
 import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
+import { isMacPlatform } from "../shell/shortcuts.js";
 const NON_COLOR_FACTS = { hasEmbeddedAlpha: false, isExpression: false, opacityEditable: false };
 function colorFacts(value) {
     return selectTokens({
@@ -235,6 +236,10 @@ export function TokenValueField(props) {
         return Array.from(new Set(suggestions));
     }, [suggestions]);
     function handleSuggestionSelect(value) {
+        if (value === DETACH_VALUE) {
+            handleDelink();
+            return;
+        }
         const rawSuggestion = decodeRawSuggestion(value);
         if (rawSuggestion !== null) {
             selectedFromPopover.current = true;
@@ -467,9 +472,20 @@ export function TokenValueField(props) {
     if (activeToken) {
         const chipValue = chipVariant === "small" ? stripCssUnit(activeToken.value) : activeToken.name;
         const embedColorSwatch = isColor && chipVariant !== "small";
-        return (_jsxs("span", { className: cx("token-field", isColor && "token-field--color", embedColorSwatch && "token-field--color-chip", blockedBy !== null && "token-field--blocked", className), "data-test": "token-field", "data-property": property, "aria-disabled": fieldDisabled || undefined, "aria-label": label, children: [renderLeading(), embedColorSwatch ? null : colorControlEl, _jsxs(TokenChip, { size: chipVariant, "data-group": groupByTokenName.get(activeToken.name) ?? tokenGroup(activeToken), children: [_jsx(PopoverListbox, { query: "", value: activeToken.name, open: isTokenPickerOpen, trigger: (_jsxs(TokenChip.Picker, { children: [embedColorSwatch ? colorControlEl : null, _jsx(TokenChip.Label, { title: chipVariant === "small" ? activeToken.name : undefined, children: chipValue })] })), triggerClassName: "token-chip__trigger", triggerDataTest: "token-chip", triggerAriaLabel: `Change ${property} token`, searchable: true, searchPlaceholder: "Search tokens\u2026", searchAriaLabel: "Search tokens", items: [...rawSuggestionItems, ...relevantTokens.map((entry) => tokenSuggestion(entry, groupByTokenName))], onQueryChange: () => undefined, onOpenChange: setTokenPickerOpen, disabled: fieldDisabled, onSelect: (value) => {
+        return (_jsxs("span", { className: cx("token-field", isColor && "token-field--color", embedColorSwatch && "token-field--color-chip", blockedBy !== null && "token-field--blocked", className), "data-test": "token-field", "data-property": property, "aria-disabled": fieldDisabled || undefined, "aria-label": label, children: [renderLeading(), embedColorSwatch ? null : colorControlEl, _jsxs(TokenChip, { size: chipVariant, "data-group": groupByTokenName.get(activeToken.name) ?? tokenGroup(activeToken), children: [_jsx(PopoverListbox, { query: "", value: activeToken.name, open: isTokenPickerOpen, trigger: (_jsxs(TokenChip.Picker, { children: [embedColorSwatch ? colorControlEl : null, _jsx(TokenChip.Label, { title: chipVariant === "small" ? activeToken.name : undefined, children: chipValue })] })), triggerClassName: "token-chip__trigger", triggerDataTest: "token-chip", triggerAriaLabel: `Change ${property} token`, searchable: true, searchPlaceholder: "Search tokens\u2026", searchAriaLabel: "Search tokens", searchOnKeyDown: (event) => {
+                                if (fieldDisabled || !isDetachKey(event))
+                                    return;
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setTokenPickerOpen(false);
+                                handleDelink();
+                            }, items: [
+                                detachItem(),
+                                ...rawSuggestionItems,
+                                ...relevantTokens.map((entry) => tokenSuggestion(entry, groupByTokenName)),
+                            ], onQueryChange: () => undefined, onOpenChange: setTokenPickerOpen, disabled: fieldDisabled, onSelect: (value) => {
                                 handleSuggestionSelect(value);
-                            } }), _jsx(TokenChip.Action, { children: _jsx(Tooltip, { stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", style: { borderRadius: "var(--radius-4)" }, label: "Replace with raw value", "data-test": "delink-btn", disabled: fieldDisabled, onClick: handleDelink, children: _jsx(IconLinkOff, { size: chipVariant === "small" ? 12 : 14, stroke: 1.75, "aria-hidden": "true" }) }) }) })] }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null, _jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: inlineWarningDataTest, tooltipDataTest: inlineWarningTooltipDataTest })] }));
+                            } }), chipVariant === "small" ? null : (_jsx(TokenChip.Action, { children: _jsx(Tooltip, { stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", style: { borderRadius: "var(--radius-4)" }, label: "Detach token", "data-test": "delink-btn", disabled: fieldDisabled, onClick: handleDelink, children: _jsx(IconLinkOff, { size: 14, stroke: 1.75, "aria-hidden": "true" }) }) }) }))] }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null, _jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: inlineWarningDataTest, tooltipDataTest: inlineWarningTooltipDataTest })] }));
     }
     const showPopover = isFocused && (filteredTokens.length > 0 || availableSuggestions.length > 0);
     return (_jsxs("span", { className: cx("token-field", "token-field--raw", isColor && "token-field--color", blockedBy !== null && "token-field--blocked", className), "data-test": "token-field", "data-property": property, "aria-disabled": fieldDisabled || undefined, "aria-label": label, children: [renderLeading(), colorControlEl, _jsx(PopoverListbox, { query: rawValue, value: null, open: showPopover, placeholder: property, inputRef: inputRef, inputAppearance: "embedded", inputDataTest: inputDataTest, inputOnFocus: () => {
@@ -606,6 +622,21 @@ function tokenSuggestion(entry, groups) {
     };
 }
 const RAW_SUGGESTION_PREFIX = "\u0000raw:";
+const DETACH_VALUE = "\u0000detach";
+function detachItem() {
+    return {
+        value: DETACH_VALUE,
+        label: "Detach token",
+        "data-test": "detach-token-item",
+        leading: _jsx(IconLinkOff, { size: 14, stroke: 1.75, "aria-hidden": "true" }),
+        trailing: _jsx("kbd", { className: "token-shortcut", children: isMacPlatform() ? "⌫" : "Del" }),
+    };
+}
+function isDetachKey(event) {
+    return (event.key === "Backspace" || event.key === "Delete")
+        && event.currentTarget.value === ""
+        && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+}
 function rawSuggestion(value) {
     return {
         value: `${RAW_SUGGESTION_PREFIX}${value}`,

package/dist/inspector/tokens/TokensPanel.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { isTokenChange, useChanges } from "../changes/changesLog.js";
+import { isTokenChange } from "../changes/types.js";
+import { useChanges } from "../drafts/store.js";
 import { TextInput } from "../ui/TextInput.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { Disclosure } from "../ui/Disclosure.js";

package/dist/inspector/tokens/editActions.d.ts

@@ -1,8 +1,8 @@
 import type { TokenEntry } from "../../css/model/index.js";
-import type { ElementChangeRecord } from "../changes/changesLog.js";
+import type { ElementChangeRecord } from "../changes/types.js";
 import { type EditTarget } from "../selection/editTarget.js";
-export type { ChangeRecord } from "../changes/changesLog.js";
-export { getPendingRules, getChangesList as getChangeRecords, clearActiveDraft as resetPendingRules } from "../changes/changesLog.js";
+export type { ChangeRecord } from "../changes/types.js";
+export { getPendingRules, getChangesList as getChangeRecords, clearActiveDraft as resetPendingRules } from "../drafts/store.js";
 export interface StyleEditMetadata {
     sourceProperty?: string;
     sourceAuthoredValue?: string;

package/dist/inspector/tokens/editActions.js

@@ -1,9 +1,9 @@
 import { parseDataSrc } from "../selection/resolveSelection.js";
-import { appendChanges, } from "../changes/changesLog.js";
+import { appendChanges } from "../drafts/store.js";
 import { canPlanBatchEditScopes, planBatchEditScopes, selectorForElement, sourceSiteSelector } from "../selection/editScope.js";
 import { getActiveStyleState, selectorForInteractionState } from "../shell/styleState.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
-import { boundRuntimeEvidence, isRuntimeCreatedElement, isRuntimeGeneratedSource, normalizeRuntimeTag, normalizeRuntimeText, } from "../runtime/staticHtmlRuntimeIdentity.js";
+import { boundRuntimeEvidence, isRuntimeCreatedElement, isRuntimeGeneratedSource, normalizeRuntimeTag, normalizeRuntimeText, runtimeDomPath, } from "../runtime/staticHtmlRuntimeIdentity.js";
 import { targetElements } from "../selection/editTarget.js";
 import { changeKey } from "../changes/model.js";
 function boundedRenderedText(el) {
@@ -18,6 +18,8 @@ function sourceFields(el) {
         text: boundedRenderedText(el),
         props: boundRuntimeEvidence(el.getAttribute("data-cprops")),
         ariaLabel: boundRuntimeEvidence(el.getAttribute("aria-label")),
+        domPath: runtimeDomPath(el),
+        elementId: boundRuntimeEvidence(el.id || null),
     });
     if (isRuntimeCreatedElement(el) || isRuntimeGeneratedSource(src)) {
         return {
@@ -45,10 +47,14 @@ function sourceFields(el) {
         sourceEvidence: {
             tagName: normalizeRuntimeTag(el.tagName),
             props: boundRuntimeEvidence(el.getAttribute("data-cprops")),
+            text: boundedRenderedText(el),
+            ariaLabel: boundRuntimeEvidence(el.getAttribute("aria-label")),
+            domPath: runtimeDomPath(el),
+            elementId: boundRuntimeEvidence(el.id || null),
         },
     };
 }
-export { getPendingRules, getChangesList as getChangeRecords, clearActiveDraft as resetPendingRules } from "../changes/changesLog.js";
+export { getPendingRules, getChangesList as getChangeRecords, clearActiveDraft as resetPendingRules } from "../drafts/store.js";
 /** Returns whether a style write can address every element in the target safely. */
 export function canEditStyles(target) {
     return canPlanBatchEditScopes(targetElements(target));

package/dist/inspector/tokens/resolution/containerQueryEvaluator.d.ts

@@ -0,0 +1,15 @@
+export interface ContainerQueryPair {
+    element: HTMLElement;
+    /** Outer-to-inner conditions, including container names. */
+    conditions: readonly string[];
+}
+export interface ContainerQueryEvaluator {
+    prefetch(pairs: readonly ContainerQueryPair[]): void;
+    matches(element: HTMLElement, conditions: readonly string[]): boolean;
+}
+/**
+ * Evaluates container conditions in batches for one inspection refresh.
+ * Each pair gets its own property, so inherited probe values cannot answer
+ * another element's query. No stylesheet or marker survives a batch.
+ */
+export declare function createContainerQueryEvaluator(doc: Document): ContainerQueryEvaluator;

package/dist/inspector/tokens/resolution/containerQueryEvaluator.js

@@ -0,0 +1,86 @@
+import { countInspectionWork } from "../../inspection/performanceDiagnostics.js";
+import { adoptStylesheet, allowsStyleElements, releaseAdoptedStylesheet } from "../../runtime/ownedStylesheets.js";
+const PROBE_SHEET_KEY = "nudge-ui-container-probe";
+let nextProbeId = 0;
+/**
+ * Evaluates container conditions in batches for one inspection refresh.
+ * Each pair gets its own property, so inherited probe values cannot answer
+ * another element's query. No stylesheet or marker survives a batch.
+ */
+export function createContainerQueryEvaluator(doc) {
+    const results = new WeakMap();
+    const key = (conditions) => JSON.stringify(conditions);
+    function prefetch(pairs) {
+        const pending = [];
+        for (const pair of pairs) {
+            if (pair.element.ownerDocument !== doc)
+                throw new TypeError("Container query target belongs to another document.");
+            if (pair.conditions.length === 0)
+                continue;
+            let values = results.get(pair.element);
+            if (!values) {
+                values = new Map();
+                results.set(pair.element, values);
+            }
+            const conditionKey = key(pair.conditions);
+            if (values.has(conditionKey))
+                continue;
+            // Reserve the pair before collecting the rest of this batch.
+            values.set(conditionKey, false);
+            const id = ++nextProbeId;
+            pending.push({ ...pair, key: conditionKey, marker: `data-container-probe-${id}`, property: `--nudge-container-probe-${id}` });
+        }
+        if (!doc.head || pending.length === 0)
+            return;
+        const cssText = pending.map(({ conditions, marker, property }) => {
+            let rule = `[${marker}] { ${property}: 1 !important; }`;
+            for (let index = conditions.length - 1; index >= 0; index--) {
+                rule = `@container ${conditions[index]} { ${rule} }`;
+            }
+            return rule;
+        }).join("\n");
+        const sheet = allowsStyleElements(doc) ? doc.createElement("style") : null;
+        countInspectionWork(doc, "probePairs", pending.length);
+        countInspectionWork(doc, "probeBatches");
+        try {
+            for (const pair of pending)
+                pair.element.setAttribute(pair.marker, "");
+            if (sheet) {
+                sheet.setAttribute("data-nudge-ui", "container-probe");
+                sheet.textContent = cssText;
+                doc.head.append(sheet);
+            }
+            else {
+                adoptStylesheet(doc, PROBE_SHEET_KEY, cssText);
+            }
+            const styles = new Map();
+            for (const pair of pending) {
+                let style = styles.get(pair.element);
+                if (!style) {
+                    style = doc.defaultView?.getComputedStyle(pair.element);
+                    if (style)
+                        styles.set(pair.element, style);
+                }
+                results.get(pair.element).set(pair.key, style?.getPropertyValue(pair.property).trim() === "1");
+            }
+        }
+        finally {
+            if (sheet)
+                sheet.remove();
+            else
+                releaseAdoptedStylesheet(doc, PROBE_SHEET_KEY);
+            for (const pair of pending)
+                pair.element.removeAttribute(pair.marker);
+        }
+    }
+    return {
+        prefetch,
+        matches(element, conditions) {
+            countInspectionWork(doc, "containerChecks");
+            if (conditions.length === 0)
+                return true;
+            prefetch([{ element, conditions }]);
+            return results.get(element)?.get(key(conditions)) ?? false;
+        },
+    };
+}

package/dist/inspector/tokens/resolution/cssomCollector.js

@@ -1,4 +1,7 @@
 import { computeSpecificityCore } from "./selectorSemantics.js";
+import { resolveNestedSelector } from "./nestedSelectors.js";
+import { adoptedStylesheetKey, STATE_PREVIEW_SHEET_ID } from "../../runtime/ownedStylesheets.js";
+import { INTERACTION_CURSOR_PROPERTY } from "../../ui/customCursors.js";
 const revisionRecords = new WeakMap();
 const ruleSnapshots = new WeakMap();
 const documentResolutionSessions = new WeakMap();
@@ -139,6 +142,20 @@ function isManagedStylesheetNode(node) {
  * marker attribute set on registered elements. Managed stylesheet text is
  * intentionally observed because it is a real cascade input.
  */
+// The renderer rewrites these on hover and spacing drags; letting them bump
+// the element revision re-resolves the whole selected cascade per pointer move.
+const RENDERER_INLINE_CURSOR_PROPERTIES = ["cursor", INTERACTION_CURSOR_PROPERTY];
+function styleTextWithoutCursor(doc, text) {
+    const scratch = doc.createElement("div");
+    scratch.style.cssText = text ?? "";
+    for (const property of RENDERER_INLINE_CURSOR_PROPERTIES)
+        scratch.style.removeProperty(property);
+    return scratch.style.cssText;
+}
+function isCursorOnlyStyleChange(target, oldValue) {
+    const doc = target.ownerDocument;
+    return styleTextWithoutCursor(doc, oldValue) === styleTextWithoutCursor(doc, target.getAttribute("style"));
+}
 function isProbeMutation(record) {
     if (record.type === "attributes") {
         const target = record.target;
@@ -160,7 +177,8 @@ function isProbeMutation(record) {
         if (!registeredElements.has(target))
             return true;
         return name.startsWith("data-nudge-ui")
-            || CONTAINER_PROBE_MARKER.test(name);
+            || CONTAINER_PROBE_MARKER.test(name)
+            || (name === "style" && isCursorOnlyStyleChange(target, record.oldValue));
     }
     if (record.type === "characterData") {
         return isProbeNode(record.target) && !isManagedStylesheetNode(record.target.parentElement);
@@ -215,6 +233,7 @@ export function documentRevisions(doc) {
         session.observer = observer;
         observer.observe(root, {
             attributes: true,
+            attributeOldValue: true,
             childList: true,
             characterData: true,
             subtree: true,
@@ -378,13 +397,16 @@ function contextForRule(cssText, record) {
         return params ? { kind: "media", params } : null;
     }
     if (/^\s*@container\b/i.test(cssText)) {
-        // CSSContainerRule exposes `conditionText` and `containerName` in modern
-        // engines. Fall back to the serialised prelude so named, style, and newer
+        // CSSContainerRule's `conditionText` is the whole prelude, name included;
+        // only prepend `containerName` for engines whose `conditionText` omits it.
+        // Fall back to the serialised prelude so named, style, and newer
         // container queries remain presentable without hand-parsing their grammar.
         const containerName = record.containerName?.trim();
-        const fromInterfaces = [containerName && containerName !== "none" ? containerName : undefined, record.conditionText?.trim()]
-            .filter((part) => Boolean(part))
-            .join(" ");
+        const condition = record.conditionText?.trim() ?? "";
+        const hasName = Boolean(containerName) && containerName !== "none";
+        const conditionNamed = hasName && condition.startsWith(containerName)
+            && /^(?:$|[\s(])/.test(condition.slice(containerName.length));
+        const fromInterfaces = hasName && !conditionNamed ? `${containerName} ${condition}`.trim() : condition;
         const params = fromInterfaces || atRuleParams(cssText, "container");
         return params ? { kind: "container", params } : null;
     }
@@ -440,9 +462,12 @@ export function collectRules(doc) {
             }
             if (isStyleRuleInDocument(rule, doc)) {
                 try {
+                    const selectorText = inheritedSelector
+                        ? resolveNestedSelector(rule.selectorText, inheritedSelector)
+                        : rule.selectorText;
                     out.push({
-                        selectorText: rule.selectorText,
-                        specificity: computeSpecificityCore(rule.selectorText),
+                        selectorText,
+                        specificity: computeSpecificityCore(selectorText),
                         declarations: declarationsFromCssom(rule.style),
                         source,
                         sourceOrder: sourceOrder++,
@@ -453,7 +478,7 @@ export function collectRules(doc) {
                     });
                     const nested = rule.cssRules;
                     if (nested?.length)
-                        walkRules(nested, active, layer, atRules, rule.selectorText, source);
+                        walkRules(nested, active, layer, atRules, selectorText, source);
                 }
                 catch {
                     continue;
@@ -514,6 +539,8 @@ export function collectRules(doc) {
             // jsdom does not currently expose CSSStyleSheet.ownerNode; the document
             // stylesheet list and stylesheet element list retain the same order.
             const owner = sheet.ownerNode ?? stylesheetNodes[index] ?? null;
+            if (owner?.id === STATE_PREVIEW_SHEET_ID)
+                continue;
             const source = owner?.dataset?.viteDevId
                 ?? sheet.href
                 ?? (owner?.id ? `#${owner.id}` : `stylesheet:${index + 1}`);
@@ -523,6 +550,14 @@ export function collectRules(doc) {
             inaccessible = true;
         }
     }
+    // Adopted sheets cascade after document stylesheets. Under a strict
+    // style-src policy they also hold the inspector's own managed rules.
+    for (const [index, sheet] of Array.from(doc.adoptedStyleSheets ?? []).entries()) {
+        const key = adoptedStylesheetKey(doc, sheet);
+        if (key === STATE_PREVIEW_SHEET_ID)
+            continue;
+        walkRules(sheet.cssRules, true, undefined, [], undefined, key ? `#${key}` : `adopted:${index + 1}`);
+    }
     const snapshot = { revision, rules: out, layerOrder, inaccessible };
     ruleSnapshots.set(doc, snapshot);
     return snapshot;

package/dist/inspector/tokens/resolution/nestedSelectors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves a CSSOM nested selector against its already resolved parent.
+ * `:is()` preserves nesting's maximum parent-list specificity without
+ * expanding every combination of parent and child selectors.
+ */
+export declare function resolveNestedSelector(selector: string, parent: string): string;

package/dist/inspector/tokens/resolution/nestedSelectors.js

@@ -0,0 +1,67 @@
+/**
+ * Resolves a CSSOM nested selector against its already resolved parent.
+ * `:is()` preserves nesting's maximum parent-list specificity without
+ * expanding every combination of parent and child selectors.
+ */
+export function resolveNestedSelector(selector, parent) {
+    const subject = `:is(${parent})`;
+    const branches = [];
+    let branch = "";
+    let hasNesting = false;
+    let parentheses = 0;
+    let brackets = 0;
+    let quote = null;
+    const finishBranch = () => {
+        branches.push(hasNesting ? branch.trim() : `${subject} ${branch.trim()}`);
+        branch = "";
+        hasNesting = false;
+    };
+    for (let index = 0; index < selector.length; index++) {
+        const character = selector[index];
+        if (character === "\\") {
+            branch += character + (selector[++index] ?? "");
+            continue;
+        }
+        if (quote) {
+            branch += character;
+            if (character === quote)
+                quote = null;
+            continue;
+        }
+        if (character === '"' || character === "'") {
+            quote = character;
+        }
+        else if (character === "/" && selector[index + 1] === "*") {
+            const end = selector.indexOf("*/", index + 2);
+            if (end < 0)
+                return "";
+            branch += selector.slice(index, end + 2);
+            index = end + 1;
+            continue;
+        }
+        else if (character === "[") {
+            brackets++;
+        }
+        else if (character === "]") {
+            brackets--;
+        }
+        else if (brackets === 0) {
+            if (character === "(")
+                parentheses++;
+            else if (character === ")")
+                parentheses--;
+            else if (character === "&") {
+                branch += subject;
+                hasNesting = true;
+                continue;
+            }
+            else if (character === "," && parentheses === 0) {
+                finishBranch();
+                continue;
+            }
+        }
+        branch += character;
+    }
+    finishBranch();
+    return branches.join(", ");
+}

package/dist/inspector/tokens/resolution/ruleMatching.js

@@ -11,7 +11,25 @@ const TRANSIENT_PSEUDO_CLASSES = new Set([
     "target",
 ]);
 const INTERACTION_PSEUDO_CLASSES = new Set(INTERACTION_STATES);
+/**
+ * Applies a per-branch selector transform to a selector list, so one stateful
+ * branch such as `.b:active` cannot drop a plain sibling branch such as `.a`.
+ */
+function transformSelectorBranches(selector, transformBranch) {
+    if (!selector.includes(","))
+        return transformBranch(selector);
+    const kept = splitSelectorAtTopLevel(selector, ",")
+        .map((branch) => transformBranch(branch.trim()))
+        .filter((branch) => branch !== null && branch.length > 0);
+    return kept.length > 0 ? kept.join(", ") : null;
+}
 function selectorForState(selector, state) {
+    return transformSelectorBranches(selector, (branch) => branchForState(branch, state));
+}
+function stableSelector(selector) {
+    return transformSelectorBranches(selector, (branch) => hasSelectorPseudoClass(branch, TRANSIENT_PSEUDO_CLASSES) ? null : branch);
+}
+function branchForState(selector, state) {
     const pseudoClasses = selectorPseudoClasses(selector)
         .filter(({ name }) => INTERACTION_PSEUDO_CLASSES.has(name));
     const states = new Set(pseudoClasses.map(({ name }) => name));
@@ -50,9 +68,10 @@ function rulesForTransform(rules, transform) {
         transformed = rules.map((rule) => ({ rule, selectorText: rule.selectorText }));
     }
     else if (transform === "stable") {
-        transformed = rules
-            .filter((rule) => !hasSelectorPseudoClass(rule.selectorText, TRANSIENT_PSEUDO_CLASSES))
-            .map((rule) => ({ rule, selectorText: rule.selectorText }));
+        transformed = rules.flatMap((rule) => {
+            const selectorText = stableSelector(rule.selectorText);
+            return selectorText ? [{ rule, selectorText }] : [];
+        });
     }
     else {
         transformed = rules.flatMap((rule) => {
@@ -139,7 +158,7 @@ export function matchRuleForElement(el, entry) {
         rule: entry.rule,
         selectorText: entry.selectorText,
         branch,
-        specificity: specificityForBranch({ ...entry.rule, selectorText: entry.selectorText }, branch),
+        specificity: specificityForBranch(entry.rule, branch),
     };
 }
 /**

package/dist/inspector/tokens/resolution.d.ts

@@ -1,4 +1,5 @@
 import type { InteractionState } from "../shell/styleState.js";
+import { type ContainerQueryEvaluator } from "./resolution/containerQueryEvaluator.js";
 import type { MatchedRule, ResolvedProperty, TokenTable } from "../../css/model/index.js";
 export { getAvailableInteractionStates, resetSourceSiteMatchCache, sourceSiteMatchCacheSize } from "./resolution/ruleMatching.js";
 export { buildTokenTable, getTokenTable, getAvailableTokenEntriesForElement, getAvailableTokenCatalog } from "./tokenAvailability.js";
@@ -10,6 +11,8 @@ export { invalidateStyleResolutionCache } from "./resolution/cssomCollector.js";
  * subsequent resolution sweep's blocking time small.
  */
 export declare function prewarmCssomRuleSnapshot(doc: Document): void;
+/** Prepares both cascades together so a selection refresh inserts one probe sheet. */
+export declare function prefetchContainerQueries(elements: readonly HTMLElement[], state: InteractionState, evaluator: ContainerQueryEvaluator): void;
 /**
  * Package-private cascade fixture seam. This exercises selector, layer,
  * importance, and interaction-state coordination while still crossing the
@@ -17,17 +20,17 @@ export declare function prewarmCssomRuleSnapshot(doc: Document): void;
  * It is intentionally absent from the package exports.
  */
 export declare function resolveRuleFixture(el: HTMLElement, rules: MatchedRule[], tokenTable: TokenTable): ResolvedProperty[];
-export declare function getResolvedProperties(el: HTMLElement, tokenTable: TokenTable): ResolvedProperty[];
+export declare function getResolvedProperties(el: HTMLElement, tokenTable: TokenTable, evaluator?: ContainerQueryEvaluator): ResolvedProperty[];
 /**
  * Resolve the authored cascade for a chosen interaction state without relying
  * on the pointer's current location. This is intentionally attribution-first:
  * values with no authored declaration still fall back to the browser's live
  * computed value in the field layer.
  */
-export declare function getResolvedPropertiesForState(el: HTMLElement, tokenTable: TokenTable, state: InteractionState): ResolvedProperty[];
+export declare function getResolvedPropertiesForState(el: HTMLElement, tokenTable: TokenTable, state: InteractionState, evaluator?: ContainerQueryEvaluator): ResolvedProperty[];
 /**
  * Resolves the cascade with transient interaction selectors removed. Used when
  * an editor must stay linked to the stable token beneath a live :hover/:focus
  * paint. Memoized per (element, revisions, tokenTable).
  */
-export declare function getResolvedPropertiesStable(el: HTMLElement, tokenTable: TokenTable): ResolvedProperty[];
+export declare function getResolvedPropertiesStable(el: HTMLElement, tokenTable: TokenTable, evaluator?: ContainerQueryEvaluator): ResolvedProperty[];