nudge-ui 0.2.5 → 0.2.6

package/dist/inspector/tokens/resolution.js

@@ -2,30 +2,20 @@ import { readTailwindV4AlphaUtility, tailwindV4AlphaExpression } from "../../css
 import { getElementComputedStyle } from "../runtime/domRealm.js";
 import { createContainerQueryEvaluator } from "./resolution/containerQueryEvaluator.js";
 import { collectRules as collectCssomRules, documentRevisions as getDocumentRevisions, registerResolutionLineage, } from "./resolution/cssomCollector.js";
-import { createRuleMatcher, matchRuleForElement } from "./resolution/ruleMatching.js";
+import { createRuleMatcher, matchRuleForElement, prewarmRuleMatching } from "./resolution/ruleMatching.js";
 import { compareAuthorCascade } from "./resolution/cascade.js";
 import { interpretValue, normalizeOpacityPercent, } from "../../css/value-semantics/index.js";
 import { createInspectorValueContext, inspectorTokenOrigin } from "./valueSemanticsAdapter.js";
 export { getAvailableInteractionStates, resetSourceSiteMatchCache, sourceSiteMatchCacheSize } from "./resolution/ruleMatching.js";
-export { buildTokenTable, getTokenTable, getAvailableTokenEntriesForElement, getAvailableTokenCatalog } from "./tokenAvailability.js";
+export { buildTokenTable, 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
- * hit afterwards, so a scheduler can warm it in its own frame to keep the
- * subsequent resolution sweep's blocking time small.
- */
+/** Idempotent per stylesheet revision; warms the snapshot ahead of a sweep so its blocking time stays small. */
 export function prewarmCssomRuleSnapshot(doc) {
-    collectCssomRules(doc);
+    prewarmRuleMatching(collectCssomRules(doc).rules);
 }
 const MAX_PROPERTIES = 100;
 const EMPTY_LOCAL_ALIASES = new Map();
-/**
- * Returns true when a `calc()` expression is safe to treat as a simple
- * numeric value. We exclude percentages, viewport units, and font-relative
- * units because those depend on context the browser cannot freeze into a
- * single pixel value safely.
- */
+/** Excludes context-dependent units (%, vw, em, ...) that cannot be frozen into one safe pixel value. */
 function canBecomeNumeric(value) {
     const v = value.trim();
     if (/\b(?:min|max|clamp|env|anchor-size)\s*\(/i.test(v))
@@ -56,11 +46,6 @@ function candidateMatchesPainted(el, row, painted) {
         return false;
     return normalizeInElementContext(el, row.property, row.declaredValue) === painted.trim();
 }
-/**
- * Resolves one authored value through the value-semantics Module using the
- * 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];
 }
@@ -76,13 +61,7 @@ function elementDirectionality(el) {
 function isLogicalBoxProperty(property) {
     return /^(?:margin|padding|inset)-(?:inline|block)(?:-(?:start|end))?$/i.test(property);
 }
-/**
- * Coordinates cascade facts with the value-semantics Module. All property-family
- * decomposition (logical sides, border, font, radius corners, physical spacing)
- * lives in `interpretValue`; this function only supplies the token
- * context and directionality facts, then projects the Module's fields onto the
- * `ResolvedDeclaration` shape.
- */
+/** Decomposition lives in `interpretValue`; this supplies the token context and projects its fields. */
 function resolveDeclaration(declaration, tokenTable, localAliases = EMPTY_LOCAL_ALIASES, directionality) {
     const fields = interpretValue(declaration.property, declaration.value, createInspectorValueContext(tokenTable, localAliases, directionality));
     return fields.map((field) => ({
@@ -135,11 +114,7 @@ function atRulesApplyToElement(el, atRules, evaluator) {
     return conditions.length === 0 || evaluator.matches(el, conditions);
 }
 function collectLocalAliases(el, rules) {
-    // Custom properties inherit independently of the property being resolved.
-    // Resolve the winning declaration separately for each element in the
-    // ancestor chain, then let the nearest declaration override inherited ones.
-    // This covers local aliases such as --color-error and inherited page tokens
-    // such as --color-ink without widening the build-time global catalog.
+    // Custom properties inherit independently, so each ancestor resolves its own winner and the nearest declaration wins.
     const lineage = [];
     let current = el;
     while (current) {
@@ -179,9 +154,7 @@ function collectLocalAliases(el, rules) {
                 }
             }
         });
-        // Inline custom properties are also inherited by descendants. They are
-        // explicit cascade winners for their element, so include them at inline
-        // specificity without changing the managed-style rule contract.
+        // Inline custom properties are inherited too; at inline specificity they are explicit cascade winners.
         for (const property of Array.from(element.style)) {
             if (!property.startsWith("--"))
                 continue;
@@ -217,12 +190,6 @@ function makeRuleApplies(el, evaluator = createContainerQueryEvaluator(el.ownerD
         return result;
     };
 }
-/**
- * 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 relevantAncestorRule(rule) {
     return rule.declarations.some(({ property }) => property.startsWith("--") || INHERITED_PROPERTIES.has(property));
 }
@@ -271,8 +238,7 @@ function resolveLineage(el, matcher, evaluator) {
         const matched = selectorMatches.filter(({ rule }) => (element === el || relevantAncestorRule(rule)) && rule.declarations.length > 0 && ruleApplies(rule));
         const candidates = new Map();
         for (const match of matched) {
-            // Conditions have already been evaluated against the declaration's own
-            // element. Descendants inherit its resulting alias, not its condition.
+            // Conditions are evaluated against the declaration's own element; descendants inherit the alias, not the condition.
             for (const declaration of match.rule.declarations) {
                 if (!declaration.property.startsWith("--"))
                     continue;
@@ -307,9 +273,7 @@ function resolveLineage(el, matcher, evaluator) {
 function rowsFromMatches(el, matched, aliases, tokenTable, allMatched = matched) {
     const map = new Map();
     const mediaCandidatesByProperty = new Map();
-    // Sort by source order ascending so rules are processed lowest-first.
-    // Map.set() naturally overwrites: higher specificity rules processed later win,
-    // and equal-specificity rules get "last in stylesheet order wins" (stable sort).
+    // Ascending source order with Map.set overwrite gives later-wins for equal specificity; relies on a stable sort.
     const sorted = [...matched].sort((a, b) => (a.rule.sourceOrder ?? 0) - (b.rule.sourceOrder ?? 0));
     const needsDirectionality = sorted.some(({ rule }) => rule.declarations.some(({ property }) => isLogicalBoxProperty(property)));
     const directionality = needsDirectionality ? elementDirectionality(el) : undefined;
@@ -409,12 +373,7 @@ function rowsFromMatches(el, matched, aliases, tokenTable, allMatched = matched)
     }
     return rows;
 }
-/**
- * Package-private cascade fixture seam. This exercises selector, layer,
- * importance, and interaction-state coordination while still crossing the
- * public value-semantics Interface through `resolveDeclaration`.
- * It is intentionally absent from the package exports.
- */
+/** Test-only cascade fixture seam, intentionally absent from the package exports. */
 export function resolveRuleFixture(el, rules, tokenTable) {
     const ruleApplies = makeRuleApplies(el);
     const matched = [];
@@ -530,8 +489,7 @@ 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)) {
-            // A hypothetical state retains its authored value while `computed`
-            // records what the browser is painting. Live and base use painted values.
+            // Hypothetical states keep the authored value; live/base take the painted value.
             if (mode === "live" || mode === "base" || !prop.resolvedValue)
                 prop.resolvedValue = cv;
             prop.computed = cv;
@@ -553,8 +511,7 @@ export function getResolvedProperties(el, tokenTable, evaluator = createContaine
     return resolveMatchedProperties(el, tokenTable, lineage, inaccessible, "live");
 }
 function applyInlineDeclarations(el, result, tokenTable, computed, inaccessible) {
-    // Inline declarations participate in the cascade and are explicit evidence,
-    // but token attribution is only exact when the authored inline value uses a known token.
+    // Inline declarations are explicit evidence, but attribution is exact only for a known token.
     const inlineProperties = Array.from(el.style);
     const directionality = inlineProperties.some(isLogicalBoxProperty)
         ? directionalityFromComputed(el, computed)
@@ -601,10 +558,7 @@ function applyInlineDeclarations(el, result, tokenTable, computed, inaccessible)
     }
 }
 function promoteNumericCalcRows(result, tokenTable) {
-    // When a calc() expression only references static tokens the browser has
-    // already resolved it to a pixel value.  Reclassify the row so the UI
-    // shows the pixel value instead of the raw calc() string and allows
-    // numeric editing (nudge / token swap).
+    // A static-token calc() is already resolved to a pixel value; reclassify so the UI allows numeric editing.
     for (const prop of result) {
         if (prop.capability !== "raw" || prop.diagnostic)
             continue;
@@ -617,12 +571,7 @@ function promoteNumericCalcRows(result, tokenTable) {
         prop.capability = capabilityFor(prop.property, numeric, tokenTable);
     }
 }
-/**
- * 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.
- */
+/** Authored cascade for a chosen interaction state, independent of the pointer's live paint. */
 export function getResolvedPropertiesForState(el, tokenTable, state, evaluator = createContainerQueryEvaluator(el.ownerDocument)) {
     const doc = el.ownerDocument ?? document;
     const revisions = getDocumentRevisions(doc);
@@ -656,11 +605,7 @@ export function getResolvedPropertiesForState(el, tokenTable, state, evaluator =
     return rows;
 }
 const stableTokenCache = new WeakMap();
-/**
- * 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).
- */
+/** Cascade with transient interaction selectors removed, so an editor stays linked to the token beneath a live :hover/:focus paint. */
 export function getResolvedPropertiesStable(el, tokenTable, evaluator = createContainerQueryEvaluator(el.ownerDocument)) {
     const doc = el.ownerDocument ?? document;
     const revisions = getDocumentRevisions(doc);

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

@@ -1,18 +1,6 @@
 import type { TokenDefinition, TokenEntry, TokenTable } from "../../css/model/index.js";
 export declare function buildTokenTable(entries: readonly TokenEntry[]): TokenTable;
-export declare function getTokenTable(): TokenTable;
-/**
- * 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.
- */
+/** Element edits may use only custom properties resolved in this element's cascade; cached until the element or stylesheet revision changes. */
 export declare function getAvailableTokenEntriesForElement(el: HTMLElement, definitions?: readonly TokenDefinition[]): TokenEntry[];
-/**
- * Produces the page catalog used by the global Tokens settings section. When
- * the document exposes mappable source identities, declarations from unloaded
- * CSS files are removed. Opaque compiled URLs leave the adapter catalog intact.
- */
+/** Page catalog for the global Tokens section; declarations from unloaded CSS files are dropped when source identities are mappable. */
 export declare function getAvailableTokenCatalog(root?: HTMLElement, definitions?: readonly TokenDefinition[]): TokenDefinition[];

package/dist/inspector/tokens/tokenAvailability.js

@@ -17,16 +17,6 @@ export function buildTokenTable(entries) {
     tokenTableMemo.set(entries, table);
     return table;
 }
-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("--");
 }
@@ -43,14 +33,7 @@ function entryFromDefinition(definition, value) {
     };
 }
 const tokenEntriesCache = new WeakMap();
-/**
- * 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.
- */
+/** Element edits may use only custom properties resolved in this element's cascade; cached until the element or stylesheet revision changes. */
 export function getAvailableTokenEntriesForElement(el, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
     const revisions = getDocumentRevisions(el.ownerDocument ?? document);
     const cached = tokenEntriesCache.get(el);
@@ -63,8 +46,7 @@ export function getAvailableTokenEntriesForElement(el, definitions = getNudgeUiR
     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.
+            // Literal adapters (e.g. Tailwind v3) have no custom property to probe; the adapter owns their availability.
             return [entryFromDefinition(definition, definition.declarations[0]?.value ?? "")];
         }
         const value = computed.getPropertyValue(definition.cssName).trim();
@@ -83,10 +65,7 @@ export function getAvailableTokenEntriesForElement(el, definitions = getNudgeUiR
     });
     return entries;
 }
-/**
- * Replaces build-time token declaration hints with declarations serialized by
- * the browser from the stylesheets currently attached to this document.
- */
+/** Replaces build-time declaration hints with declarations serialized from the attached stylesheets. */
 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})`
@@ -160,13 +139,7 @@ function isLoadedCssSource(source, loadedSources) {
         || 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.
- */
+/** Identities only for a complete authored-source mapping; a mapped subset cannot stand in for opaque compiled URLs. */
 function confidentlyLoadedStylesheetSources(definitions, loadedSources) {
     const cssSources = definitions.flatMap((definition) => definition.declarations
         .map((declaration) => declaration.source)
@@ -178,17 +151,12 @@ function confidentlyLoadedStylesheetSources(definitions, loadedSources) {
             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.
+        // One opaque compiled URL can contain any authored declaration, so unloaded sources cannot be ruled out.
         return [];
     }
     return [...known];
 }
-/**
- * Produces the page catalog used by the global Tokens settings section. When
- * the document exposes mappable source identities, declarations from unloaded
- * CSS files are removed. Opaque compiled URLs leave the adapter catalog intact.
- */
+/** Page catalog for the global Tokens section; declarations from unloaded CSS files are dropped when source identities are mappable. */
 export function getAvailableTokenCatalog(root = document.documentElement, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
     const computed = getElementComputedStyle(root);
     const hydrated = hydrateTokenCatalogFromCssom(definitions, root.ownerDocument ?? document);

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

@@ -2,5 +2,4 @@ import type { TokenEntry } from "../../css/model/index.js";
 import type { TokenOrigin, TokenTable } from "../../css/model/index.js";
 import type { Directionality, ValueSemanticsContext } from "../../css/value-semantics/index.js";
 export declare function inspectorTokenOrigin(entry: TokenEntry | undefined): TokenOrigin;
-/** Inspector Adapter for framework-specific token attribution facts. */
 export declare function createInspectorValueContext(tokenTable: TokenTable, localAliases?: ReadonlyMap<string, string>, directionality?: Directionality): ValueSemanticsContext;

package/dist/inspector/tokens/valueSemanticsAdapter.js

@@ -21,11 +21,28 @@ function colorTuple(value) {
     const rgb = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/.exec(trimmed);
     return rgb ? [rgb[1], rgb[2], rgb[3]].map((part) => String(Math.round(Number(part)))).join(",") : null;
 }
+const frameworkColorIndexes = new WeakMap();
+/** First Tailwind v3 token per color tuple. */
+function frameworkColorIndex(tokenTable) {
+    let index = frameworkColorIndexes.get(tokenTable);
+    if (index)
+        return index;
+    index = new Map();
+    for (const entry of Object.values(tokenTable)) {
+        if (entry.adapter !== "tailwind-v3")
+            continue;
+        const tuple = colorTuple(entry.value);
+        if (tuple && !index.has(tuple))
+            index.set(tuple, entry);
+    }
+    frameworkColorIndexes.set(tokenTable, index);
+    return index;
+}
 function directFrameworkColor(value, tokenTable) {
     const tuple = colorTuple(value);
     if (!tuple)
         return undefined;
-    return Object.values(tokenTable).find((entry) => entry.adapter === "tailwind-v3" && colorTuple(entry.value) === tuple);
+    return frameworkColorIndex(tokenTable).get(tuple);
 }
 function twLocalAliasPolicy(ref, inner) {
     if (!ref.startsWith("--tw-")) {
@@ -53,7 +70,6 @@ function twLocalAliasPolicy(ref, inner) {
             cycle: inner.cycle,
         };
 }
-/** Inspector Adapter for framework-specific token attribution facts. */
 export function createInspectorValueContext(tokenTable, localAliases = EMPTY_LOCAL_ALIASES, directionality) {
     return {
         tokenContext: {

package/dist/inspector/ui/AtRuleContext.d.ts

@@ -4,15 +4,15 @@ export interface AtRuleContextProviderProps {
     rows: readonly ResolvedProperty[];
     children?: ReactNode;
 }
-/**
- * Makes the active conditional source context available to fields that only
- * receive a property name (not their resolved property row) as props.
- */
+/** Fields that only receive a property name read their conditional context here. */
 export declare function AtRuleContextProvider({ rows, children }: AtRuleContextProviderProps): ReactElement;
 export declare function useFieldAtRules(property: string): readonly AtRuleCandidate[];
 export interface AtRuleIndicatorProps {
     atRules?: readonly (AtRuleContext | AtRuleCandidate)[];
     className?: string;
 }
-/** Compact, field-level attribution for the conditional rule that currently wins. */
+/**
+ * A ruler along the field's left edge: one segment per conditional rule plus the base, with the
+ * declaration currently winning the cascade highlighted. Hovering it lists the rules.
+ */
 export declare function AtRuleIndicator({ atRules, className }: AtRuleIndicatorProps): ReactElement | null;

package/dist/inspector/ui/AtRuleContext.js

@@ -2,12 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 import { Tooltip } from "./Tooltip.js";
 import { cx } from "./classNames.js";
+import { atRuleSegments } from "./atRuleSegments.js";
 const EMPTY_AT_RULES = [];
 const FieldAtRuleContext = createContext(new Map());
-/**
- * Makes the active conditional source context available to fields that only
- * receive a property name (not their resolved property row) as props.
- */
+/** Fields that only receive a property name read their conditional context here. */
 export function AtRuleContextProvider({ rows, children }) {
     const atRulesByProperty = useMemo(() => {
         const next = new Map();
@@ -41,12 +39,16 @@ function countLabel(label, count) {
     const noun = label.toLowerCase().replace(/query$/, count === 1 ? "query" : "queries");
     return `${count} ${noun}`;
 }
-/** Compact, field-level attribution for the conditional rule that currently wins. */
+/**
+ * A ruler along the field's left edge: one segment per conditional rule plus the base, with the
+ * declaration currently winning the cascade highlighted. Hovering it lists the rules.
+ */
 export function AtRuleIndicator({ atRules = EMPTY_AT_RULES, className }) {
     if (atRules.length === 0)
         return null;
     const label = labelFor(atRules);
     const activeCount = atRules.filter((atRule) => !("active" in atRule) || atRule.active).length;
     const count = countLabel(label, atRules.length);
-    return (_jsx(Tooltip, { content: (_jsx("div", { className: "at-rule-tooltip__rules", children: atRules.map((atRule, index) => (_jsx("div", { className: cx("at-rule-tooltip__rule", (!("active" in atRule) || atRule.active) && "at-rule-tooltip__rule--active"), "data-active": !("active" in atRule) || atRule.active ? "true" : "false", children: _jsx("code", { children: atRule.params }) }, `${atRule.kind}-${atRule.params}-${index}`))) })), delay: 0, positionerClassName: "at-rule-tooltip-positioner", popupClassName: "at-rule-tooltip", "data-test": "at-rule-tooltip", children: _jsx("button", { type: "button", className: cx("at-rule-indicator", className), "data-test": "at-rule-indicator", "aria-label": activeCount > 0 ? `Active ${count}` : count, children: _jsx("span", { className: "at-rule-indicator__symbol", "aria-hidden": "true", children: atRules.length }) }) }));
+    const segments = atRuleSegments(atRules);
+    return (_jsx(Tooltip, { content: (_jsx("div", { className: "at-rule-tooltip__rules", children: segments.map((segment) => segment.kind === "base" ? (_jsx("div", { className: cx("at-rule-tooltip__default", segment.active && "at-rule-tooltip__rule--active"), "data-active": segment.active ? "true" : "false", children: "Default" }, segment.key)) : (_jsx("div", { className: cx("at-rule-tooltip__rule", segment.active && "at-rule-tooltip__rule--active"), "data-active": segment.active ? "true" : "false", children: _jsx("code", { children: segment.params }) }, segment.key))) })), delay: 0, positionerClassName: "at-rule-tooltip-positioner", popupClassName: "at-rule-tooltip", "data-test": "at-rule-tooltip", children: _jsx("button", { type: "button", className: cx("at-rule-indicator", className), "data-test": "at-rule-indicator", "aria-label": activeCount > 0 ? `Active ${count}` : count, children: _jsx("span", { className: "at-rule-indicator__track", "aria-hidden": "true", children: segments.map((segment) => (_jsx("span", { className: "at-rule-indicator__segment", "data-active": segment.active ? "true" : "false" }, segment.key))) }) }) }));
 }

package/dist/inspector/ui/ControlSurface.d.ts

@@ -1,8 +1,4 @@
 import type { HTMLAttributes, ReactNode } from "react";
-/**
- * Visual boundary for an inspector control. It owns the shared control chrome
- * while the child owns its particular input or selection behaviour.
- */
 export type ControlAppearance = "default" | "embedded";
 export type ControlDensity = "default" | "compact";
 export interface ControlSurfaceProps extends HTMLAttributes<HTMLSpanElement> {

package/dist/inspector/ui/Disclosure.d.ts

@@ -1,7 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
 export interface DisclosureProps {
     readonly title: ReactNode;
-    /** Optional accessory rendered between the label and the chevron (e.g. a count badge). */
     readonly badge?: ReactNode;
     readonly children: ReactNode;
     readonly className?: string;
@@ -15,8 +14,4 @@ export interface DisclosureProps {
     readonly "data-test"?: string;
     readonly triggerDataTest?: string;
 }
-/**
- * A single collapsible disclosure built on Base UI Collapsible.
- * Replaces native details/summary for consistent 12px label styling and chevron.
- */
 export declare function Disclosure({ title, badge, children, className, triggerClassName, panelClassName, defaultOpen, open, onOpenChange, keepMounted, "data-test": dataTest, triggerDataTest, }: DisclosureProps): ReactElement;

package/dist/inspector/ui/Disclosure.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { IconChevronDown } from "@tabler/icons-react";
-/**
- * A single collapsible disclosure built on Base UI Collapsible.
- * Replaces native details/summary for consistent 12px label styling and chevron.
- */
 export function Disclosure({ title, badge, children, className, triggerClassName, panelClassName, defaultOpen, open, onOpenChange, keepMounted = true, "data-test": dataTest, triggerDataTest, }) {
     function handleOpenChange(next) {
         onOpenChange?.(next);

package/dist/inspector/ui/InlineStyleWarning.d.ts

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
 export interface InlineStyleWarningProps {
-    /** Inline declaration blocking the field; renders nothing when null. */
     blockedBy: string | null;
     dataTest?: string;
     tooltipDataTest?: string;

package/dist/inspector/ui/InspectorPopover.d.ts

@@ -10,9 +10,5 @@ export interface InspectorPopoverProps {
     triggerTooltip?: ReactNode;
     "data-test"?: string;
 }
-/**
- * Base UI popover anchored inside the inspector shadow root. Unlike the
- * listbox popover, this leaves the popup content to the caller for compound
- * settings panels and field controls.
- */
+/** Leaves the popup content to the caller, unlike PopoverListbox. */
 export declare function InspectorPopover({ triggerElement, children, open, onOpenChange, side, align, sideOffset, triggerTooltip, "data-test": dataTest, }: InspectorPopoverProps): ReactElement;

package/dist/inspector/ui/InspectorPopover.js

@@ -2,11 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { Tooltip } from "./Tooltip.js";
 import { portalContainer } from "./portalContainer.js";
-/**
- * Base UI popover anchored inside the inspector shadow root. Unlike the
- * listbox popover, this leaves the popup content to the caller for compound
- * settings panels and field controls.
- */
+/** Leaves the popup content to the caller, unlike PopoverListbox. */
 export function InspectorPopover({ triggerElement, children, open, onOpenChange, side = "bottom", align = "center", sideOffset = 6, triggerTooltip, "data-test": dataTest, }) {
     return (_jsxs(BasePopover.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(Tooltip, { content: triggerTooltip, disabled: triggerTooltip === undefined, children: _jsx(BasePopover.Trigger, { render: triggerElement, "data-test": dataTest }) }), _jsx(BasePopover.Portal, { container: portalContainer(), children: _jsx(BasePopover.Positioner, { className: "inspector-popover__positioner", side: side, align: align, sideOffset: sideOffset, children: _jsx(BasePopover.Popup, { className: "inspector-popover__popup", "data-test": dataTest ? `${dataTest}-popover` : undefined, children: children }) }) })] }));
 }

package/dist/inspector/ui/SegmentedControl.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 export interface SegmentedControlOption<T extends string> {
     value: T;
     /** Accessible name; also the visible label when `icon` is omitted. */
@@ -15,11 +15,11 @@ interface SegmentedControlProps<T extends string> {
     "data-property"?: string;
     className?: string;
     disabled?: boolean;
-    /** Allows the active option to be cleared by clicking it again. */
+    /** Shows each option's label in a tooltip; for icon-only segments. */
+    tooltips?: boolean;
     allowDeselect?: boolean;
     /** Restores the value represented by an unselected control. */
     onDeselect?: () => void;
 }
-/** A compact single-choice control for adjacent, peer actions. */
-export declare function SegmentedControl<T extends string>({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled, allowDeselect, onDeselect, }: SegmentedControlProps<T>): ReactElement;
+export declare function SegmentedControl<T extends string>({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled, tooltips, allowDeselect, onDeselect, }: SegmentedControlProps<T>): ReactElement;
 export {};

package/dist/inspector/ui/SegmentedControl.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
 import { Toggle } from "@base-ui/react/toggle";
-/** A compact single-choice control for adjacent, peer actions. */
-export function SegmentedControl({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled = false, allowDeselect = false, onDeselect, }) {
+import { Tooltip } from "./Tooltip.js";
+export function SegmentedControl({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled = false, tooltips = false, allowDeselect = false, onDeselect, }) {
     return (_jsx("div", { className: `segmented-control${className ? ` ${className}` : ""}`, role: "group", "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, children: options.map((option) => {
             const selected = option.value === value;
-            return (_jsx(Toggle, { type: "button", className: `button segmented-control__button${selected ? " segmented-control__button--selected" : ""}`, pressed: selected, disabled: disabled, "aria-label": option.label, "data-test": option.testId, "data-active": selected ? "true" : "false", onPressedChange: (pressed) => {
+            const toggle = (_jsx(Toggle, { type: "button", className: `button segmented-control__button${selected ? " segmented-control__button--selected" : ""}`, pressed: selected, disabled: disabled, "aria-label": option.label, "data-test": option.testId, "data-active": selected ? "true" : "false", onPressedChange: (pressed) => {
                     if (pressed) {
                         onChange(option.value);
                     }
                     else if (allowDeselect) {
                         onDeselect?.();
                     }
-                }, children: option.icon ?? _jsx("span", { className: "segmented-control__label", children: option.label }) }, option.value));
+                }, children: option.icon ?? _jsx("span", { className: "segmented-control__label", children: option.label }) }));
+            return _jsx(Fragment, { children: tooltips ? _jsx(Tooltip, { children: toggle }) : toggle }, option.value);
         }) }));
 }

package/dist/inspector/ui/SideValuesField.d.ts

@@ -27,12 +27,7 @@ export interface SideValuesFieldProps {
     "data-test"?: string;
     "data-property"?: string;
 }
-/**
- * A compact side editor. Callers provide grouped horizontal/vertical controls
- * that expand into the four physical sides (or omit `pairedControls` to show
- * the four sides directly). The field owns presentation and expand state
- * while callers own the actual CSS/token controls rendered in each slot.
- */
+/** Owns presentation and expand state; callers own the controls rendered in each slot. */
 export declare function SideValuesField({ label, sides, pairedControls, defaultExpanded, showLabel, empty, onAdd, emptyAction, resetKey, "data-test": dataTest, "data-property": dataProperty, }: SideValuesFieldProps): ReactElement;
 export declare function SideControls({ label, sides, layout, }: {
     label: ReactNode;

package/dist/inspector/ui/SideValuesField.js

@@ -8,12 +8,7 @@ import { ControlSurface } from "./ControlSurface.js";
 export const SIDE_NAMES = ["top", "right", "bottom", "left"];
 const SIDE_DISPLAY_ORDER = ["left", "top", "right", "bottom"];
 const SIDE_AXIS_DISPLAY_ORDER = ["horizontal", "vertical"];
-/**
- * A compact side editor. Callers provide grouped horizontal/vertical controls
- * that expand into the four physical sides (or omit `pairedControls` to show
- * the four sides directly). The field owns presentation and expand state
- * while callers own the actual CSS/token controls rendered in each slot.
- */
+/** Owns presentation and expand state; callers own the controls rendered in each slot. */
 export function SideValuesField({ label, sides, pairedControls, defaultExpanded = false, showLabel = true, empty = false, onAdd, emptyAction, resetKey, "data-test": dataTest, "data-property": dataProperty, }) {
     const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
     const previousResetKey = useRef(resetKey);
@@ -26,8 +21,7 @@ export function SideValuesField({ label, sides, pairedControls, defaultExpanded
     const labelText = typeof label === "string" ? formatInspectorLabel(label) : String(label);
     const displayLabel = showLabel ? (typeof label === "string" ? labelText : label) : null;
     useEffect(() => {
-        // `defaultExpanded` describes the newly selected element, not the current
-        // edit; reseed when the selection (resetKey) changes.
+        // defaultExpanded describes the newly selected element, so reseed when resetKey changes.
         setUncontrolledExpanded(defaultExpanded);
         previousResetKey.current = resetKey;
     }, [resetKey]);

package/dist/inspector/ui/Toast.d.ts

@@ -7,8 +7,4 @@ export interface ShowToastOptions {
     readonly timeout?: number;
 }
 export declare function showToast({ title, description, tone, timeout }: ShowToastOptions): string;
-/**
- * Renders inspector toasts inside the inspector's shadow root, centered above
- * the canvas toolbar in the space the inspector panel leaves free.
- */
 export declare function ToastRegion(): ReactElement;

package/dist/inspector/ui/Toast.js

@@ -20,10 +20,6 @@ function ToastList() {
                     ? _jsx(IconAlertTriangleFilled, { className: "toast__icon", size: "var(--icon-size-small)", "aria-hidden": "true" })
                     : _jsx(IconCircleCheckFilled, { className: "toast__icon", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs(BaseToast.Content, { className: "toast__content", children: [_jsx(BaseToast.Title, { className: "toast__title" }), toast.description ? _jsx(BaseToast.Description, { className: "toast__description" }) : null] })] }, toast.id))) }));
 }
-/**
- * Renders inspector toasts inside the inspector's shadow root, centered above
- * the canvas toolbar in the space the inspector panel leaves free.
- */
 export function ToastRegion() {
     const inspectorOpen = useInspectorOpen();
     return (_jsx(BaseToast.Provider, { toastManager: toastManager, limit: 3, children: _jsx(BaseToast.Portal, { container: portalContainer(), children: _jsx(BaseToast.Viewport, { className: "toast__viewport", "data-inspector-open": inspectorOpen ? "true" : "false", "data-test": "toast-viewport", children: _jsx(ToastList, {}) }) }) }));

package/dist/inspector/ui/atRuleSegments.d.ts

@@ -0,0 +1,13 @@
+import type { AtRuleCandidate, AtRuleContext, AtRuleKind } from "../../css/model/index.js";
+export interface AtRuleSegment {
+    key: string;
+    /** The unconditional declaration is the base segment; every conditional rule adds one more. */
+    kind: AtRuleKind | "base";
+    params: string | null;
+    active: boolean;
+}
+/**
+ * Segments ordered like a ruler from the largest viewport down. A base declaration sits at the
+ * large end when the conditions are max-width (desktop first) and at the small end for min-width.
+ */
+export declare function atRuleSegments(atRules: readonly (AtRuleContext | AtRuleCandidate)[]): AtRuleSegment[];