nudge-ui 0.2.0

package/dist/inspector/tokens/TokenField.js

@@ -0,0 +1,485 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { IconLinkOff } from "@tabler/icons-react";
+import { applyValueEdit, normalizeOpacityPercent, selectTokens, } from "../../css/value-semantics/index.js";
+import { promoteToToken, swapToken } from "./editActions.js";
+import { setStyle } from "./editActions.js";
+import { completeCssValue } from "../styleEditors/completeCssValue.js";
+import { nudgeCssValue, nudgeOpacityValue } from "../styleEditors/nudgeValue.js";
+import { valuePolicyFor } from "../styleEditors/valuePolicy.js";
+import { IconButton } from "../ui/IconButton.js";
+import { PopoverListbox } from "../ui/PopoverListbox.js";
+import { ColorSwatch } from "../ui/ColorSwatch.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { AtRuleIndicator, useFieldAtRules } from "../ui/AtRuleContext.js";
+import { TokenChip } from "./TokenChip.js";
+import { isMultiTarget } from "../selection/editTarget.js";
+const NON_COLOR_FACTS = { hasEmbeddedAlpha: false, isExpression: false, opacityEditable: false };
+function colorFacts(value) {
+    return selectTokens({
+        entries: [{ name: "--nudge-ui-preview", value, source: "runtime" }],
+    }).candidates[0]?.color ?? NON_COLOR_FACTS;
+}
+function tokenGroup(entry) {
+    return selectTokens({ entries: [entry] }).candidates[0]?.group ?? "generic";
+}
+function computedRaw(el, property) {
+    const value = getStateStyleValue(el, property);
+    if (property !== "line-height")
+        return value;
+    return lineHeightPercentage(value, getStateStyleValue(el, "font-size")) ?? value;
+}
+function structuredBorderValue(property, row) {
+    const structure = row?.structure;
+    if (!structure)
+        return null;
+    if (property.endsWith("-width"))
+        return structure.width;
+    if (property.endsWith("-style"))
+        return structure.style;
+    if (property.endsWith("-color"))
+        return structure.color;
+    return null;
+}
+function lineHeightPercentage(lineHeight, fontSize) {
+    const lineHeightPx = parsePixels(lineHeight);
+    const fontSizePx = parsePixels(fontSize);
+    if (lineHeightPx === null || fontSizePx === null || fontSizePx === 0)
+        return null;
+    return `${formatNumber((lineHeightPx / fontSizePx) * 100)}%`;
+}
+function parsePixels(value) {
+    const match = /^([+-]?(?:(?:\d+\.?\d*)|(?:\.\d+)))px$/i.exec(value.trim());
+    if (!match)
+        return null;
+    const number = Number(match[1]);
+    return Number.isFinite(number) ? number : null;
+}
+function formatNumber(value) {
+    return String(Number(value.toFixed(12)));
+}
+function stripCssUnit(value) {
+    return value.replace(/^(-?\d+(?:\.\d+)?)(px|rem|em|vh|vw|vmin|vmax|%|ch|ex|cm|mm|in|pt|pc)$/i, "$1");
+}
+/** Returns the first family in a CSS family list without splitting var() fallbacks. */
+function primaryFontFamily(value) {
+    let depth = 0;
+    let quote = null;
+    for (let index = 0; index < value.length; index++) {
+        const char = value[index];
+        if (quote) {
+            if (char === "\\")
+                index++;
+            else if (char === quote)
+                quote = null;
+            continue;
+        }
+        if (char === "'" || char === '"') {
+            quote = char;
+            continue;
+        }
+        if (char === "(")
+            depth++;
+        else if (char === ")")
+            depth = Math.max(0, depth - 1);
+        else if (char === "," && depth === 0)
+            return value.slice(0, index).trim();
+    }
+    return value.trim();
+}
+function rgbToHex(value) {
+    const match = value.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\D+(\d+(?:\.\d+)?)\D+(\d+(?:\.\d+)?)/i);
+    if (!match)
+        return null;
+    return `#${[match[1], match[2], match[3]]
+        .map((part) => Math.max(0, Math.min(255, Math.round(Number(part)))).toString(16).padStart(2, "0"))
+        .join("")}`;
+}
+export function colorValueToHex(value) {
+    const trimmed = value.trim();
+    const hex = trimmed.match(/^#([\da-f]{4}|[\da-f]{8})$/i);
+    if (hex) {
+        const raw = hex[1];
+        const rgb = raw.length === 4 ? raw.slice(0, 3).split("").map((part) => part + part).join("") : raw.slice(0, 6);
+        return `#${rgb}`.toLowerCase();
+    }
+    if (/^#([\da-f]{3}|[\da-f]{6})$/i.test(trimmed)) {
+        const short = trimmed.match(/^#([\da-f])([\da-f])([\da-f])$/i);
+        if (short)
+            return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`.toLowerCase();
+        return trimmed.toLowerCase();
+    }
+    const directRgb = rgbToHex(trimmed);
+    if (directRgb)
+        return directRgb;
+    if (typeof document === "undefined")
+        return null;
+    const probe = document.createElement("span");
+    probe.setAttribute("data-nudge-ui", "value-probe");
+    probe.style.color = "";
+    probe.style.color = trimmed;
+    if (!probe.style.color)
+        return null;
+    document.body.appendChild(probe);
+    const resolved = getComputedStyle(probe).color;
+    probe.remove();
+    return rgbToHex(resolved);
+}
+function browserRecognizesColor(value) {
+    const trimmed = value.trim();
+    if (!trimmed || /var\(/i.test(trimmed) || typeof document === "undefined")
+        return false;
+    const probe = document.createElement("span");
+    probe.setAttribute("data-nudge-ui", "value-probe");
+    probe.style.color = "";
+    probe.style.color = trimmed;
+    return probe.style.color !== "";
+}
+function NativeColorSwatch({ value, onChange, disabled, }) {
+    const resolvedHex = colorValueToHex(value);
+    const hex = resolvedHex ?? "#000000";
+    const hasRenderableColor = resolvedHex !== null || browserRecognizesColor(value);
+    return (_jsxs("label", { className: "token-color-control", "data-resolved": hasRenderableColor ? "true" : "false", children: [_jsx(ColorSwatch, { color: resolvedHex ?? (value.trim() || "transparent"), "data-test": "token-color-swatch" }), _jsx("input", { className: "token-color-control__input", "data-test": "token-color-input", type: "color", value: hex, disabled: disabled, "aria-label": "Choose color", onChange: (event) => onChange(event.target.value) })] }));
+}
+export function TokenValueField(props) {
+    const { property, domElement, semanticSlot, committedValue, resolvedValue = committedValue, activeTokenName: controlledTokenName = null, entries, suggestions = [], inputDataTest = "raw-input", allowedTokenNames, isColor = false, disabled = false, mixed = false, formatRawValue = (value) => value.trim(), onCommitRaw, onSelectToken, onUnlink, attributionTokens = [], leading, trailing, className, label, opacity, color, onCommitOpacity, atRules, chipVariant = "default", } = props;
+    const inheritedAtRules = useFieldAtRules(property);
+    const fieldAtRules = atRules ?? inheritedAtRules;
+    const controlledToken = controlledTokenName ? entries.find((entry) => entry.name === controlledTokenName) : null;
+    const authoredColor = isColor
+        ? color ?? colorFacts(committedValue)
+        : NON_COLOR_FACTS;
+    const controlledTokenColor = isColor && controlledToken
+        ? colorFacts(controlledToken.value)
+        : null;
+    const controlledTokenHasEmbeddedAlpha = Boolean(isColor && controlledTokenName
+        && (controlledTokenColor?.hasEmbeddedAlpha || (!opacity && authoredColor.hasEmbeddedAlpha)));
+    const defaultOpacityValue = isColor && !controlledTokenHasEmbeddedAlpha ? "100%" : "";
+    const [rawValue, setRawValue] = useState(committedValue);
+    const [opacityValue, setOpacityValue] = useState(opacity?.value ?? defaultOpacityValue);
+    const [activeTokenName, setActiveTokenName] = useState(controlledTokenName);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isTokenPickerOpen, setTokenPickerOpen] = useState(false);
+    const inputRef = useRef(null);
+    const selectedFromPopover = useRef(false);
+    const cancelOnBlur = useRef(false);
+    const isNavigatingSuggestions = useRef(false);
+    useEffect(() => {
+        setRawValue(committedValue);
+        setActiveTokenName(controlledTokenName);
+        setOpacityValue(opacity?.value ?? defaultOpacityValue);
+    }, [committedValue, controlledTokenName, defaultOpacityValue, mixed, opacity?.value, property]);
+    const activeToken = activeTokenName
+        ? entries.find((entry) => entry.name === activeTokenName) ?? { name: activeTokenName, value: resolvedValue, source: "runtime" }
+        : null;
+    const activeTokenColor = isColor && activeToken
+        ? colorFacts(activeToken.value)
+        : null;
+    const activeTokenHasEmbeddedAlpha = Boolean(isColor && activeToken
+        && (activeTokenColor?.hasEmbeddedAlpha || (!opacity && activeTokenName === controlledTokenName && authoredColor.hasEmbeddedAlpha)));
+    const showOpacity = isColor && !activeTokenHasEmbeddedAlpha
+        && authoredColor.opacityEditable
+        && (Boolean(activeTokenName) || attributionTokens.length === 0 || Boolean(opacity));
+    // One classification pass per entries change. selectTokens costs up to
+    // three CSS.supports calls per token, so classifying per token per render
+    // (chip mode is unbounded; raw mode runs per keystroke) dominates this
+    // field's render cost. Map misses fall back to direct classification for
+    // synthetic entries that are not part of the catalog list.
+    const groupByTokenName = useMemo(() => {
+        const groups = new Map();
+        for (const entry of entries)
+            groups.set(entry.name, tokenGroup(entry));
+        return groups;
+    }, [entries]);
+    const relevantTokens = useMemo(() => {
+        const candidates = allowedTokenNames
+            ? entries.filter((entry) => allowedTokenNames.has(entry.name))
+            : selectTokens({
+                element: domElement,
+                property,
+                slot: semanticSlot,
+                entries,
+                currentToken: activeTokenName,
+            }).candidates.map(({ entry }) => entry);
+        return candidates.filter((entry) => entry.name !== property);
+    }, [activeTokenName, allowedTokenNames, domElement, entries, property, semanticSlot]);
+    const filteredTokens = useMemo(() => {
+        const target = rawValue.toLowerCase();
+        return relevantTokens.filter((entry) => !target
+            || entry.name.toLowerCase().includes(target)
+            || entry.value.toLowerCase().includes(target));
+    }, [rawValue, relevantTokens]);
+    const availableSuggestions = useMemo(() => {
+        return Array.from(new Set(suggestions));
+    }, [suggestions]);
+    function handleSuggestionSelect(value) {
+        const rawSuggestion = decodeRawSuggestion(value);
+        if (rawSuggestion !== null) {
+            selectedFromPopover.current = true;
+            cancelOnBlur.current = false;
+            const formatted = formatRawValue(rawSuggestion);
+            setActiveTokenName(null);
+            setRawValue(formatted);
+            onCommitRaw(formatted);
+            return;
+        }
+        const chosen = relevantTokens.find((entry) => entry.name === value);
+        if (chosen)
+            handleTokenSelect(chosen);
+    }
+    function commitRawValue(value = rawValue) {
+        if (mixed && value.trim().toLowerCase() === "mixed")
+            return;
+        const formatted = formatRawValue(value);
+        if (!formatted) {
+            setRawValue(committedValue);
+            return;
+        }
+        setRawValue(formatted);
+        setActiveTokenName(null);
+        onCommitRaw(formatted);
+    }
+    function handleDelink() {
+        // A token-backed alpha expression is represented by a chip, but unlinking
+        // it should preserve the complete authored color expression and its alpha.
+        const value = opacity ? committedValue : activeToken?.value || resolvedValue || committedValue;
+        setActiveTokenName(null);
+        setRawValue(value);
+        onUnlink(value);
+    }
+    function handleTokenSelect(chosen) {
+        selectedFromPopover.current = true;
+        cancelOnBlur.current = false;
+        if (onSelectToken(chosen) === false)
+            return;
+        setActiveTokenName(chosen.name);
+        setRawValue(chosen.value);
+    }
+    function handleRawBlur() {
+        if (selectedFromPopover.current) {
+            selectedFromPopover.current = false;
+            setIsFocused(false);
+            return;
+        }
+        if (!cancelOnBlur.current)
+            commitRawValue();
+        cancelOnBlur.current = false;
+        setIsFocused(false);
+    }
+    function handleRawKeyDown(event) {
+        const direction = arrowDirection(event.key);
+        if (direction && !event.altKey && !event.ctrlKey && !event.metaKey) {
+            const next = property === "opacity"
+                ? nudgeOpacityValue(rawValue, direction, event.shiftKey)
+                : nudgeCssValue(property, rawValue, direction, event.shiftKey);
+            if (next) {
+                event.preventDefault();
+                event.stopPropagation();
+                isNavigatingSuggestions.current = false;
+                setRawValue(next);
+                setActiveTokenName(null);
+                onCommitRaw(next);
+                return;
+            }
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            isNavigatingSuggestions.current = true;
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            setRawValue(committedValue);
+            cancelOnBlur.current = true;
+            setIsFocused(false);
+            inputRef.current?.blur();
+        }
+        else if (event.key === "Enter" && !isNavigatingSuggestions.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsFocused(false);
+            inputRef.current?.blur();
+        }
+    }
+    function commitOpacityValue(value = opacityValue) {
+        if (!showOpacity || !onCommitOpacity)
+            return;
+        const normalized = normalizeOpacityPercent(value);
+        if (normalized === null) {
+            setOpacityValue(opacity?.value ?? "100%");
+            return;
+        }
+        if (onCommitOpacity(normalized) === false) {
+            setOpacityValue(opacity?.value ?? defaultOpacityValue);
+            return;
+        }
+        setOpacityValue(normalized);
+    }
+    const opacityControl = showOpacity ? (_jsx("input", { className: "token-opacity-input", "data-test": "color-opacity-input", type: "text", inputMode: "decimal", value: opacityValue, disabled: disabled || !onCommitOpacity, "aria-label": `Opacity for ${property}`, onChange: (event) => setOpacityValue(event.target.value), onBlur: () => commitOpacityValue(), onKeyDown: (event) => {
+            const direction = arrowDirection(event.key);
+            if (direction && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                const next = nudgeOpacityValue(opacityValue, direction, event.shiftKey);
+                if (next) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setOpacityValue(next);
+                    commitOpacityValue(next);
+                    return;
+                }
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setOpacityValue(opacity?.value ?? "100%");
+                event.currentTarget.blur();
+            }
+            else if (event.key === "Enter") {
+                event.preventDefault();
+                event.currentTarget.blur();
+            }
+        } })) : null;
+    const colorPreview = activeToken ? resolvedValue || activeToken.value : resolvedValue || rawValue;
+    const colorControlEl = isColor ? (_jsx(NativeColorSwatch, { value: colorPreview, disabled: disabled, onChange: (value) => commitRawValue(value) })) : null;
+    const rawSuggestionItems = availableSuggestions.map(rawSuggestion);
+    if (activeToken) {
+        const chipValue = chipVariant === "small" ? stripCssUnit(activeToken.value) : activeToken.name;
+        const embedColorSwatch = isColor && chipVariant !== "small";
+        return (_jsxs("span", { className: `token-field${isColor ? " token-field--color" : ""}${embedColorSwatch ? " token-field--color-chip" : ""}${className ? ` ${className}` : ""}`, "data-test": "token-field", "data-property": property, "aria-label": label, title: label, children: [leading ? _jsx("span", { className: "token-field__leading", children: leading }) : null, 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: activeToken.name, 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: disabled, onSelect: (value) => {
+                                handleSuggestionSelect(value);
+                            } }), _jsx(TokenChip.Action, { children: _jsx(IconButton, { variant: "quiet", size: "compact", style: { borderRadius: "var(--radius-4)" }, label: "Replace with raw value", "data-test": "delink-btn", disabled: disabled, 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] }));
+    }
+    const showPopover = isFocused && (filteredTokens.length > 0 || availableSuggestions.length > 0);
+    return (_jsxs("span", { className: `token-field token-field--raw${isColor ? " token-field--color" : ""}${className ? ` ${className}` : ""}`, "data-test": "token-field", "data-property": property, "aria-label": label, title: label, children: [leading ? _jsx("span", { className: "token-field__leading", children: leading }) : null, colorControlEl, _jsx(PopoverListbox, { query: rawValue, value: null, open: showPopover, placeholder: property, inputRef: inputRef, inputAppearance: "embedded", inputDataTest: inputDataTest, inputOnFocus: () => {
+                    setIsFocused(true);
+                    if (mixed && rawValue.trim().toLowerCase() === "mixed")
+                        setRawValue("");
+                }, inputOnBlur: handleRawBlur, inputOnKeyDown: handleRawKeyDown, items: [
+                    ...availableSuggestions.map(rawSuggestion),
+                    ...filteredTokens.slice(0, 30).map((entry) => tokenSuggestion(entry, groupByTokenName)),
+                ], onQueryChange: (value) => {
+                    isNavigatingSuggestions.current = false;
+                    setRawValue(value);
+                }, onOpenChange: setIsFocused, disabled: disabled, onSelect: (value) => {
+                    handleSuggestionSelect(value);
+                } }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null] }));
+}
+function arrowDirection(key) {
+    if (key === "ArrowUp")
+        return 1;
+    if (key === "ArrowDown")
+        return -1;
+    return null;
+}
+export function TokenField(props) {
+    const { property, semanticSlot, tokenRow, selection, initialValue, displayValue, domElement: el, editTarget, entries, suggestions, inputDataTest, onAfterEdit, editMetadata, leading, trailing, className, label, chipVariant, formatRawValue: formatRawValueProp, disabled = false, mixed = false, attributionTokens, } = props;
+    const selectedProperty = selection && selection.elements.length > 1
+        ? selection.getProperty(property)
+        : null;
+    const selectionMixed = selectedProperty?.value.kind === "mixed";
+    const effectiveMixed = mixed || selectionMixed;
+    const selectionDisplayValue = selectedProperty?.value.kind === "common"
+        ? selectedProperty.value.value
+        : undefined;
+    const effectiveMetadata = editTarget && isMultiTarget(editTarget) ? undefined : editMetadata;
+    const tokenBackedOpacityName = tokenRow?.tokenName
+        && tokenRow.opacity
+        && tokenRow.opacity.tokenName !== tokenRow.tokenName
+        ? tokenRow.tokenName
+        : null;
+    const expression = Boolean(tokenRow && (tokenRow.capability === "raw" || tokenRow.capability === "composite"
+        || tokenRow.modifiers?.some((modifier) => modifier.kind === "alpha")
+        || tokenRow.color?.isExpression));
+    const authored = tokenRow?.authored ?? tokenRow?.declaredValue ?? "";
+    const isCalcAuthored = /\bcalc\s*\(/i.test(authored);
+    const selectedTokenName = selectedProperty?.token.kind === "common"
+        ? selectedProperty.token.name
+        : null;
+    const activeTokenName = effectiveMixed
+        ? null
+        : tokenBackedOpacityName
+            ?? (expression || isCalcAuthored
+                ? null
+                : selectedProperty ? selectedTokenName : tokenRow?.tokenName ?? null);
+    const fallbackValue = initialValue ?? structuredBorderValue(property, tokenRow) ?? computedRaw(el, property);
+    // When a calc() was simplified to a numeric value we suppress the token
+    // chip so the UI shows the resolved pixel value, not the internal
+    // multiplier token (e.g. --spacing).  The authored expression stays
+    // accessible via the row for diagnostics.
+    const authoredOrComputed = tokenBackedOpacityName
+        ? authored
+        : expression || (!activeTokenName && !isCalcAuthored)
+            ? structuredBorderValue(property, tokenRow) ?? tokenRow?.authored ?? tokenRow?.declaredValue ?? fallbackValue
+            : tokenRow?.resolvedValue ?? fallbackValue;
+    const committedValue = effectiveMixed
+        ? displayValue ?? "Mixed"
+        : displayValue ?? selectionDisplayValue ?? (property === "font-family" && !activeTokenName
+            ? primaryFontFamily(authoredOrComputed)
+            : authoredOrComputed);
+    const currentToken = activeTokenName
+        ? entries.find((entry) => entry.name === activeTokenName) ?? null
+        : null;
+    return (_jsx(TokenValueField, { property: property, domElement: el, semanticSlot: semanticSlot, committedValue: committedValue, resolvedValue: tokenRow?.propertyOpacity?.value ?? tokenRow?.resolvedValue ?? committedValue, activeTokenName: activeTokenName, attributionTokens: attributionTokens
+            ?? (selectedProperty?.token.kind === "mixed" ? ["Mixed tokens"] : undefined)
+            ?? (expression
+                ? tokenRow?.tokens?.filter((token) => token.name !== tokenRow.opacity?.tokenName).map((token) => token.name)
+                : undefined), opacity: tokenRow?.opacity, color: tokenRow?.color, entries: entries, suggestions: suggestions, inputDataTest: inputDataTest, disabled: disabled, mixed: effectiveMixed, isColor: selectTokens({ property, slot: semanticSlot, entries: [] }).preferredGroup === "color", formatRawValue: (value) => {
+            if (formatRawValueProp)
+                return formatRawValueProp(value);
+            return completeCssValue(value.trim(), valuePolicyFor(property));
+        }, onCommitRaw: (value) => {
+            if (setStyle(editTarget ?? el, property, value, effectiveMetadata))
+                onAfterEdit?.();
+        }, onCommitOpacity: (value) => {
+            const authored = tokenRow?.authored ?? tokenRow?.declaredValue ?? committedValue;
+            const result = applyValueEdit({ kind: "color-opacity", authored, opacity: value });
+            if (!result.ok || !setStyle(editTarget ?? el, property, result.value, effectiveMetadata))
+                return false;
+            onAfterEdit?.();
+            return true;
+        }, onSelectToken: (chosen) => {
+            const targetProperty = tokenRow?.property ?? property;
+            if (activeTokenName && tokenBackedOpacityName && currentToken) {
+                const result = applyValueEdit({
+                    kind: "color-token",
+                    authored,
+                    currentToken,
+                    nextToken: chosen,
+                });
+                if (!result.ok || !setStyle(editTarget ?? el, targetProperty, result.value, effectiveMetadata))
+                    return false;
+                onAfterEdit?.();
+                return true;
+            }
+            const change = activeTokenName
+                ? swapToken(editTarget ?? el, targetProperty, chosen, currentToken, effectiveMetadata)
+                : promoteToToken(editTarget ?? el, property, chosen, effectiveMetadata);
+            if (!change)
+                return false;
+            onAfterEdit?.();
+            return true;
+        }, onUnlink: (value) => {
+            setStyle(editTarget ?? el, property, value, effectiveMetadata);
+            onAfterEdit?.();
+        }, leading: leading, trailing: trailing, className: className, label: label, chipVariant: chipVariant }));
+}
+function tokenSuggestion(entry, groups) {
+    return {
+        value: entry.name,
+        label: entry.name,
+        "data-test": "suggestion-item",
+        leading: (groups.get(entry.name) ?? tokenGroup(entry)) === "color"
+            ? _jsx(ColorSwatch, { color: entry.value })
+            : undefined,
+        trailing: _jsx("span", { children: entry.value }),
+    };
+}
+const RAW_SUGGESTION_PREFIX = "\u0000raw:";
+function rawSuggestion(value) {
+    return {
+        value: `${RAW_SUGGESTION_PREFIX}${value}`,
+        label: value,
+        "data-test": "raw-suggestion-item",
+    };
+}
+function decodeRawSuggestion(value) {
+    return value.startsWith(RAW_SUGGESTION_PREFIX) ? value.slice(RAW_SUGGESTION_PREFIX.length) : null;
+}

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactElement } from "react";
+type TokenLabelElement = "code" | "span";
+export interface TokenLabelProps extends HTMLAttributes<HTMLElement> {
+    as?: TokenLabelElement;
+}
+export declare function TokenLabel({ as, className, children, title, ...props }: TokenLabelProps): ReactElement;
+export {};

package/dist/inspector/tokens/TokenLabel.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function textContent(children) {
+    if (children === null || children === undefined || typeof children === "boolean")
+        return "";
+    if (typeof children === "string" || typeof children === "number" || typeof children === "bigint") {
+        return String(children);
+    }
+    if (Array.isArray(children))
+        return children.map(textContent).join("");
+    return "";
+}
+export function TokenLabel({ as = "span", className, children, title, ...props }) {
+    const childText = textContent(children);
+    const labelProps = {
+        ...props,
+        className: `token-label${className ? ` ${className}` : ""}`,
+        title: title ?? childText,
+    };
+    const content = _jsx("span", { className: "token-label__content", children: children });
+    return as === "code"
+        ? _jsx("code", { ...labelProps, children: content })
+        : _jsx("span", { ...labelProps, children: content });
+}

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

@@ -0,0 +1,5 @@
+import type { ReactElement } from "react";
+import type { TokenCatalogRow } from "./catalog.js";
+export declare function TokensPanel({ rows }: {
+    rows: readonly TokenCatalogRow[];
+}): ReactElement;

package/dist/inspector/tokens/TokensPanel.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { isTokenChange, useChanges } from "../changes/changesLog.js";
+import { TextInput } from "../ui/TextInput.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { TokenValueField } from "./TokenField.js";
+import { TOKEN_GROUP_LABELS, TOKEN_GROUP_ORDER, aliasName, compatibleTokenNames, contextLabel, filterTokenRows, } from "./catalog.js";
+import { setGlobalTokenValue } from "./tokenEdits.js";
+import { TokenLabel } from "./TokenLabel.js";
+function rowChange(row, changes) {
+    return changes.find((change) => isTokenChange(change)
+        && change.tokenName === row.definition.cssName
+        && change.file === row.file
+        && change.line === row.line);
+}
+export function TokensPanel({ rows }) {
+    const [query, setQuery] = useState("");
+    const visibleRows = useMemo(() => filterTokenRows(rows, query), [query, rows]);
+    const entries = useMemo(() => rows.map((row) => ({
+        name: row.definition.cssName,
+        value: row.resolvedValue || row.authoredValue,
+        source: row.activeDeclaration?.source ?? row.definition.declarations[0]?.source ?? "",
+    })), [rows]);
+    return (_jsxs("section", { className: "tokens-panel", "data-test": "tokens-panel", children: [_jsx("div", { className: "tokens-panel__tools", children: _jsx(TextInput, { type: "search", value: query, placeholder: "Search tokens", "aria-label": "Search tokens", "data-test": "token-search", onChange: (event) => setQuery(event.target.value) }) }), TOKEN_GROUP_ORDER.map((group) => {
+                const groupedRows = visibleRows.filter((row) => row.group === group);
+                if (groupedRows.length === 0)
+                    return null;
+                return (_jsxs("section", { className: "token-group", "data-test": "token-group", "data-group": group, children: [_jsx("div", { className: "token-group__heading", children: TOKEN_GROUP_LABELS[group] }), groupedRows.map((row) => (_jsx(TokenCatalogItem, { row: row, rows: rows, entries: entries }, row.definition.cssName)))] }, group));
+            }), visibleRows.length === 0 ? (_jsx("div", { className: "tokens-panel__empty", "data-test": "tokens-empty", children: "No matching tokens" })) : null] }));
+}
+function TokenCatalogItem({ row, rows, entries, }) {
+    const changes = useChanges();
+    const activeChange = rowChange(row, changes);
+    const committedValue = activeChange?.rawValue ?? row.authoredValue;
+    const activeAlias = aliasName(committedValue);
+    const effectiveRows = rows.map((candidate) => ({
+        ...candidate,
+        authoredValue: rowChange(candidate, changes)?.rawValue ?? candidate.authoredValue,
+    }));
+    const effectiveRow = effectiveRows.find((candidate) => candidate.definition.cssName === row.definition.cssName
+        && candidate.file === row.file
+        && candidate.line === row.line) ?? row;
+    const allowed = compatibleTokenNames(effectiveRow, effectiveRows);
+    const variants = row.definition.declarations.filter((declaration) => declaration !== row.activeDeclaration);
+    const tokenName = row.definition.name || row.definition.cssName;
+    return (_jsxs("article", { className: "token-row", "data-test": "global-token-row", "data-token-name": row.definition.cssName, "data-active": row.activeDeclaration ? "true" : "false", children: [_jsxs("div", { className: "token-row__inline", children: [_jsx(TokenLabel, { as: "code", className: "token-row__name", title: tokenName, children: tokenName }), row.activeDeclaration ? (_jsx(ControlSurface, { children: _jsx(TokenValueField, { property: row.definition.cssName, committedValue: committedValue, resolvedValue: row.resolvedValue || committedValue, activeTokenName: activeAlias, entries: entries, allowedTokenNames: allowed, isColor: row.group === "color", onCommitRaw: (value) => setGlobalTokenValue(row, value), onSelectToken: (token) => { setGlobalTokenValue(row, `var(${token.name})`); }, onUnlink: (value) => setGlobalTokenValue(row, value) }) })) : (_jsx(TextInput, { disabled: true, value: "Inactive in current theme", "aria-label": `${row.definition.cssName} inactive` }))] }), variants.length > 0 ? (_jsxs("details", { className: "token-variants", "data-test": "token-variants", children: [_jsxs("summary", { children: ["Variants (", variants.length, ")"] }), _jsx("div", { className: "token-variants__list", children: variants.map((declaration) => (_jsxs("div", { className: "token-variant", children: [_jsx("span", { className: "token-variant__context", children: contextLabel(declaration.context) }), _jsx("code", { children: declaration.value }), _jsx("span", { children: declaration.source })] }, `${declaration.source}-${contextLabel(declaration.context)}`))) })] })) : null] }));
+}

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

@@ -0,0 +1,51 @@
+import type { TokenContext, TokenDeclaration, TokenDefinition } from "../../css/model/index.js";
+import type { StyleRuleContext } from "../changes/editModel.js";
+import type { TokenGroup } from "../../css/value-semantics/index.js";
+export type TokenCatalogGroup = TokenGroup;
+export { TOKEN_GROUP_LABELS, TOKEN_GROUP_ORDER } from "../../css/value-semantics/index.js";
+export interface TokenCatalogRow {
+    definition: TokenDefinition;
+    activeDeclaration: TokenDeclaration | null;
+    authoredValue: string;
+    resolvedValue: string;
+    selector: string;
+    styleContext: StyleRuleContext;
+    contextLabel: string;
+    file: string;
+    line: number;
+    group: TokenCatalogGroup;
+}
+export interface TokenRuntime {
+    root: HTMLElement;
+    mediaMatches(query: string): boolean;
+    supports(condition: string): boolean;
+    computedToken(name: string): string;
+    selectorMatches(selector: string): boolean;
+    scopeMatches(scope: string): boolean;
+    layerOrder(name: string): number | undefined;
+}
+export declare function isTokenContextActive(context: TokenContext, runtime: TokenRuntime): boolean;
+/**
+ * Strips host-declared structural scoping markers from a selector so
+ * human-facing labels present only author vocabulary (ADR-0011). The marker
+ * grammar — Astro's `[data-astro-cid-<hash>]` attribute selectors or
+ * `.astro-<hash>` classes, a future Vue/Svelte equivalent — is declared by
+ * the host Adapter through the runtime configuration; the raw selector is
+ * retained in `context.selector` so resolution keeps matching the rendered
+ * DOM. A `:where(...)` wrapper left empty by the removals disappears
+ * entirely.
+ */
+export declare function humanizeSelector(selector: string, scopingPattern: RegExp | null): string;
+export declare function contextLabel(context: TokenContext): string;
+export declare function sourceParts(source: string): {
+    file: string;
+    line: number;
+};
+export declare function styleContext(context: TokenContext): StyleRuleContext;
+export declare function selectorForContext(context: TokenContext): string;
+export declare function classifyCatalogToken(name: string, value?: string): TokenCatalogGroup;
+export declare function buildTokenCatalogRows(catalog: TokenDefinition[], root?: HTMLElement, suppliedRuntime?: TokenRuntime): TokenCatalogRow[];
+export declare function filterTokenRows(rows: readonly TokenCatalogRow[], query: string): TokenCatalogRow[];
+export declare function aliasName(value: string): string | null;
+export declare function createsAliasCycle(tokenName: string, candidateName: string, authoredValues: ReadonlyMap<string, string>): boolean;
+export declare function compatibleTokenNames(row: TokenCatalogRow, rows: readonly TokenCatalogRow[]): Set<string>;