nudge-ui 0.2.1 → 0.2.3

package/dist/inspector/styleEditors/nudgeValue.js

@@ -2,12 +2,16 @@ import { completeCssValue, CSS_NUMBER_SOURCE } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
 const CSS_NUMBER = new RegExp(`^(?:${CSS_NUMBER_SOURCE})$`, "i");
 const CSS_NUMERIC_LITERAL = new RegExp(`^(${CSS_NUMBER_SOURCE})(px|rem|em|%)?$`, "i");
-const DRAG_NUDGE_PROPERTY = /^(?:(?:padding|margin)-(?:top|right|bottom|left|horizontal|vertical)|(?:top|right|bottom|left|inset|inset-(?:horizontal|vertical))|(?:row|column)-gap|border-radius|border-(?:top-left|top-right|bottom-right|bottom-left)-radius)$/;
+const DRAG_PIXELS_PER_STEP = 16;
+const LARGE_DRAG_PIXELS_PER_STEP = 8;
+const DRAG_NUDGE_PROPERTY = /^(?:(?:padding|margin)-(?:top|right|bottom|left|horizontal|vertical)|(?:top|right|bottom|left|inset|inset-(?:horizontal|vertical))|(?:row|column)-gap|(?:font-size|letter-spacing|line-height|opacity)|border-radius|border-(?:top-left|top-right|bottom-right|bottom-left)-radius)$/;
 /**
  * Returns a nudged CSS numeric literal, or null when the value is not a
  * standalone number that the inspector can safely edit.
  */
 export function nudgeCssValue(property, rawValue, direction, large = false) {
+    if (property === "opacity")
+        return nudgeOpacityValue(rawValue, direction, large);
     const normalised = normaliseForNudge(property, rawValue);
     const parsed = parseNumericLiteral(normalised);
     if (!parsed)
@@ -23,13 +27,13 @@ export function supportsDragNudge(property) {
     return DRAG_NUDGE_PROPERTY.test(property);
 }
 /**
- * Applies one nudge per two horizontal pointer pixels. Large nudges still use
- * one 8px step per pointer pixel. When a large drag starts from an off-grid
- * value, the first step snaps to the next large-step boundary in the drag
- * direction.
+ * Applies one regular nudge per sixteen horizontal pointer pixels and one large
+ * nudge per eight horizontal pointer pixels. When a large drag starts from an
+ * off-grid value, the first step snaps to the next large-step boundary in the
+ * drag direction.
  */
 export function nudgeCssValueByDrag(property, rawValue, deltaX, large = false, snapToLargeStep = false) {
-    const steps = Math.trunc(Math.abs(deltaX) / (large ? 1 : 2));
+    const steps = Math.trunc(Math.abs(deltaX) / (large ? LARGE_DRAG_PIXELS_PER_STEP : DRAG_PIXELS_PER_STEP));
     if (steps === 0)
         return null;
     const direction = deltaX < 0 ? -1 : 1;
@@ -52,16 +56,16 @@ export function nudgeCssValueByDrag(property, rawValue, deltaX, large = false, s
 }
 /** Returns whether a field has a numeric value that can respond to dragging. */
 export function canNudgeCssValueByDrag(property, rawValue) {
-    return nudgeCssValueByDrag(property, rawValue, 2) !== null
-        || nudgeCssValueByDrag(property, rawValue, -2) !== null;
+    return nudgeCssValueByDrag(property, rawValue, DRAG_PIXELS_PER_STEP) !== null
+        || nudgeCssValueByDrag(property, rawValue, -DRAG_PIXELS_PER_STEP) !== null;
 }
 /** Returns a clamped opacity percentage nudged by 1%, or 10% with Shift. */
 export function nudgeOpacityValue(rawValue, direction, large = false) {
-    const parsed = parseNumericLiteral(rawValue);
-    if (!parsed || parsed.unit !== "%")
+    const percent = parseOpacityPercent(rawValue);
+    if (percent === null)
         return null;
     const step = large ? 10 : 1;
-    const next = Math.min(100, Math.max(0, parsed.number + direction * step));
+    const next = Math.min(100, Math.max(0, percent + direction * step));
     return `${formatNumber(next)}%`;
 }
 function normaliseForNudge(property, rawValue) {
@@ -116,6 +120,8 @@ function snapCssValueToLargeStep(property, rawValue, direction) {
     return snappedParts.join(", ");
 }
 function snapNumericValueToLargeStep(property, rawValue, direction) {
+    if (property === "opacity")
+        return snapOpacityValueToLargeStep(rawValue, direction);
     const normalised = normaliseForNudge(property, rawValue);
     const parsed = parseNumericLiteral(normalised);
     if (!parsed)
@@ -132,6 +138,30 @@ function snapNumericValueToLargeStep(property, rawValue, direction) {
     next = clampNudgeNumber(property, next);
     return `${formatNumber(next)}${parsed.unit}`;
 }
+function snapOpacityValueToLargeStep(rawValue, direction) {
+    const percent = parseOpacityPercent(rawValue);
+    if (percent === null)
+        return null;
+    const step = 10;
+    let next = direction > 0
+        ? Math.ceil(percent / step) * step
+        : Math.floor(percent / step) * step;
+    if ((direction > 0 && next <= percent) || (direction < 0 && next >= percent)) {
+        next += direction * step;
+    }
+    next = Math.min(100, Math.max(0, next));
+    return `${formatNumber(next)}%`;
+}
+function parseOpacityPercent(rawValue) {
+    const parsed = parseNumericLiteral(rawValue);
+    if (!parsed)
+        return null;
+    if (parsed.unit === "%")
+        return parsed.number;
+    if (parsed.unit === "" && parsed.number >= 0 && parsed.number <= 1)
+        return parsed.number * 100;
+    return null;
+}
 function isLineHeight(property) {
     return property === "line-height" || property.includes("line-height");
 }

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

@@ -7,6 +7,8 @@ import { type EditTarget } from "../selection/editTarget.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface TokenValueFieldProps {
     property: string;
+    /** Numeric editing policy for a scalar slot inside a composite property. */
+    nudgeProperty?: string;
     domElement?: HTMLElement;
     semanticSlot?: TokenSemanticSlot;
     committedValue: string;
@@ -34,6 +36,9 @@ export interface TokenValueFieldProps {
     onCommitOpacity?(value: string): boolean | void;
     atRules?: readonly AtRuleContext[];
     chipVariant?: "default" | "small";
+    blockedBy?: string | null;
+    inlineWarningDataTest?: string;
+    inlineWarningTooltipDataTest?: string;
 }
 export interface TokenFieldProps {
     property: string;
@@ -62,6 +67,8 @@ export interface TokenFieldProps {
     mixed?: boolean;
     /** Referenced tokens used for raw color-field behavior; not rendered inline. */
     attributionTokens?: string[];
+    inlineWarningDataTest?: string;
+    inlineWarningTooltipDataTest?: string;
 }
 export declare function colorValueToHex(value: string): string | null;
 export declare function TokenValueField(props: TokenValueFieldProps): ReactElement;

package/dist/inspector/tokens/TokenField.js

@@ -12,8 +12,14 @@ 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 { 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 { isMultiTarget } from "../selection/editTarget.js";
+import { inlineBlockedBy } from "../styleEditors/inlineAuthored.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
 const NON_COLOR_FACTS = { hasEmbeddedAlpha: false, isExpression: false, opacityEditable: false };
 function colorFacts(value) {
     return selectTokens({
@@ -153,7 +159,8 @@ function NativeColorSwatch({ value, onChange, disabled, }) {
     return (_jsxs("label", { className: "token-color-control", "data-resolved": hasRenderableColor ? "true" : "false", children: [_jsx(ColorSwatch, { color: cssColor ?? "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 { property, nudgeProperty = 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", blockedBy = null, inlineWarningDataTest, inlineWarningTooltipDataTest, } = props;
+    const fieldDisabled = disabled || blockedBy !== null;
     const inheritedAtRules = useFieldAtRules(property);
     const fieldAtRules = atRules ?? inheritedAtRules;
     const controlledToken = controlledTokenName ? entries.find((entry) => entry.name === controlledTokenName) : null;
@@ -241,6 +248,8 @@ export function TokenValueField(props) {
             handleTokenSelect(chosen);
     }
     function commitRawValue(value = rawValue) {
+        if (fieldDisabled)
+            return;
         if (mixed && value.trim().toLowerCase() === "mixed")
             return;
         const formatted = formatRawValue(value);
@@ -284,7 +293,7 @@ export function TokenValueField(props) {
         if (direction && !event.altKey && !event.ctrlKey && !event.metaKey) {
             const next = property === "opacity"
                 ? nudgeOpacityValue(rawValue, direction, event.shiftKey)
-                : nudgeCssValue(property, rawValue, direction, event.shiftKey);
+                : nudgeCssValue(nudgeProperty, rawValue, direction, event.shiftKey);
             if (next) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -318,8 +327,9 @@ export function TokenValueField(props) {
         const drag = dragNudgeRef.current;
         if (!drag)
             return;
-        releasePointerCapture(drag);
         dragNudgeRef.current = null;
+        drag.pointerLock?.stop();
+        releasePointerCapture(drag);
         setIsDraggingNudge(false);
     }, []);
     useEffect(() => {
@@ -331,13 +341,16 @@ export function TokenValueField(props) {
         };
     }, [stopDragNudge]);
     function handleDragNudgePointerDown(event) {
-        if (disabled || !supportsDragNudge(property))
+        if (event.button !== 0)
             return;
-        if (!canNudgeCssValueByDrag(property, rawValue))
+        if (fieldDisabled || !supportsDragNudge(nudgeProperty))
+            return;
+        if (!canNudgeCssValueByDrag(nudgeProperty, rawValue))
             return;
         stopDragNudge();
         const handle = event.currentTarget;
         const drag = {
+            commit: createChangeHistoryGroup(),
             handle,
             pointerId: event.pointerId,
             lastClientX: event.clientX,
@@ -350,6 +363,11 @@ export function TokenValueField(props) {
         dragNudgeRef.current = drag;
         if (typeof handle.setPointerCapture === "function")
             handle.setPointerCapture(event.pointerId);
+        if (event.pointerType === "mouse") {
+            drag.pointerLock = startDragPointerLock(handle, { x: event.clientX, y: event.clientY }, (mouseEvent) => {
+                updateDragNudge(mouseEvent, mouseEvent.movementX);
+            }, stopDragNudge);
+        }
         setIsDraggingNudge(true);
         event.preventDefault();
         event.stopPropagation();
@@ -358,8 +376,16 @@ export function TokenValueField(props) {
         const drag = dragNudgeRef.current;
         if (!drag || drag.pointerId !== event.pointerId)
             return;
+        if (drag.pointerLock?.isLocked())
+            return;
         const movementX = event.clientX - drag.lastClientX;
         drag.lastClientX = event.clientX;
+        updateDragNudge(event, movementX);
+    }
+    function updateDragNudge(event, movementX) {
+        const drag = dragNudgeRef.current;
+        if (!drag)
+            return;
         if (event.shiftKey !== drag.shiftActive) {
             drag.shiftActive = event.shiftKey;
             drag.startValue = drag.lastValue;
@@ -367,7 +393,7 @@ export function TokenValueField(props) {
             drag.shiftSnapPending = event.shiftKey;
         }
         drag.deltaX += movementX;
-        const next = nudgeCssValueByDrag(property, drag.startValue, drag.deltaX, drag.shiftActive, drag.shiftActive && drag.shiftSnapPending);
+        const next = nudgeCssValueByDrag(nudgeProperty, drag.startValue, drag.deltaX, drag.shiftActive, drag.shiftActive && drag.shiftSnapPending);
         if (next === null || next === drag.lastValue)
             return;
         drag.lastValue = next;
@@ -380,7 +406,7 @@ export function TokenValueField(props) {
         event.stopPropagation();
         setRawValue(next);
         setActiveTokenName(null);
-        onCommitRaw(next);
+        drag.commit(() => onCommitRaw(next));
     }
     function handleDragNudgePointerEnd(event) {
         if (dragNudgeRef.current?.pointerId !== event.pointerId)
@@ -390,15 +416,15 @@ export function TokenValueField(props) {
     function renderLeading() {
         if (!leading)
             return null;
-        const canDrag = !disabled
-            && supportsDragNudge(property)
-            && canNudgeCssValueByDrag(property, rawValue);
+        const canDrag = !fieldDisabled
+            && supportsDragNudge(nudgeProperty)
+            && canNudgeCssValueByDrag(nudgeProperty, rawValue);
         if (!canDrag)
             return _jsx("span", { className: "token-field__leading", children: leading });
-        return (_jsx("span", { className: "token-field__leading token-field__leading--nudge", "data-test": "nudge-handle", "data-dragging": isDraggingNudge ? "true" : undefined, title: `Drag to adjust ${label ?? property}`, onPointerDown: handleDragNudgePointerDown, onPointerMove: handleDragNudgePointerMove, onPointerUp: handleDragNudgePointerEnd, onPointerCancel: handleDragNudgePointerEnd, onBlur: stopDragNudge, children: leading }));
+        return (_jsx("span", { className: "token-field__leading token-field__leading--nudge", "data-test": "nudge-handle", "data-dragging": isDraggingNudge ? "true" : undefined, onPointerDown: handleDragNudgePointerDown, onPointerMove: handleDragNudgePointerMove, onPointerUp: handleDragNudgePointerEnd, onPointerCancel: handleDragNudgePointerEnd, onBlur: stopDragNudge, children: leading }));
     }
     function commitOpacityValue(value = opacityValue) {
-        if (!showOpacity || !onCommitOpacity)
+        if (fieldDisabled || !showOpacity || !onCommitOpacity)
             return;
         const normalized = normalizeOpacityPercent(value);
         if (normalized === null) {
@@ -411,7 +437,7 @@ export function TokenValueField(props) {
         }
         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 opacityControl = showOpacity ? (_jsx("input", { className: "token-opacity-input", "data-test": "color-opacity-input", type: "text", inputMode: "decimal", value: opacityValue, disabled: fieldDisabled || !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);
@@ -434,17 +460,17 @@ export function TokenValueField(props) {
             }
         } })) : null;
     const colorPreview = activeToken ? resolvedValue || activeToken.value : resolvedValue || rawValue;
-    const colorControlEl = isColor ? (_jsx(NativeColorSwatch, { value: colorPreview, disabled: disabled, onChange: (value) => commitRawValue(value) })) : null;
+    const colorControlEl = isColor ? (_jsx(NativeColorSwatch, { value: colorPreview, disabled: fieldDisabled, 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: [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: 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) => {
+        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) => {
                                 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] }));
+                            } }), _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 })] }));
     }
     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: [renderLeading(), colorControlEl, _jsx(PopoverListbox, { query: rawValue, value: null, open: showPopover, placeholder: property, inputRef: inputRef, inputAppearance: "embedded", inputDataTest: inputDataTest, inputOnFocus: () => {
+    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: () => {
                     setIsFocused(true);
                     if (mixed && rawValue.trim().toLowerCase() === "mixed")
                         setRawValue("");
@@ -454,9 +480,9 @@ export function TokenValueField(props) {
                 ], onQueryChange: (value) => {
                     isNavigatingSuggestions.current = false;
                     setRawValue(value);
-                }, onOpenChange: setIsFocused, disabled: disabled, onSelect: (value) => {
+                }, onOpenChange: setIsFocused, disabled: fieldDisabled, onSelect: (value) => {
                     handleSuggestionSelect(value);
-                } }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null] }));
+                } }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null, _jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: inlineWarningDataTest, tooltipDataTest: inlineWarningTooltipDataTest })] }));
 }
 function arrowDirection(key) {
     if (key === "ArrowUp")
@@ -466,7 +492,7 @@ function arrowDirection(key) {
     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 { 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, inlineWarningDataTest, inlineWarningTooltipDataTest, } = props;
     const selectedProperty = selection && selection.elements.length > 1
         ? selection.getProperty(property)
         : null;
@@ -476,6 +502,7 @@ export function TokenField(props) {
         ? selectedProperty.value.value
         : undefined;
     const effectiveMetadata = editTarget && isMultiTarget(editTarget) ? undefined : editMetadata;
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     const tokenBackedOpacityName = tokenRow?.tokenName
         && tokenRow.opacity
         && tokenRow.opacity.tokenName !== tokenRow.tokenName
@@ -525,7 +552,7 @@ export function TokenField(props) {
             ?? (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) => {
+                : undefined), opacity: tokenRow?.opacity, color: tokenRow?.color, entries: entries, suggestions: suggestions, inputDataTest: inputDataTest, disabled: disabled, blockedBy: blockedBy, mixed: effectiveMixed, isColor: selectTokens({ property, slot: semanticSlot, entries: [] }).preferredGroup === "color", formatRawValue: (value) => {
             if (formatRawValueProp)
                 return formatRawValueProp(value);
             return completeCssValue(value.trim(), valuePolicyFor(property));
@@ -563,7 +590,7 @@ export function TokenField(props) {
         }, onUnlink: (value) => {
             setStyle(editTarget ?? el, property, value, effectiveMetadata);
             onAfterEdit?.();
-        }, leading: leading, trailing: trailing, className: className, label: label, chipVariant: chipVariant }));
+        }, leading: leading, trailing: trailing, className: className, label: label, chipVariant: chipVariant, inlineWarningDataTest: inlineWarningDataTest, inlineWarningTooltipDataTest: inlineWarningTooltipDataTest }));
 }
 function tokenSuggestion(entry, groups) {
     return {

package/dist/inspector/tokens/TokenLabel.js

@@ -1,23 +1,14 @@
 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 "";
-}
+import { cx } from "../ui/classNames.js";
+import { Tooltip } from "../ui/Tooltip.js";
 export function TokenLabel({ as = "span", className, children, title, ...props }) {
-    const childText = textContent(children);
     const labelProps = {
         ...props,
-        className: `token-label${className ? ` ${className}` : ""}`,
-        title: title ?? childText,
+        className: cx("token-label", className),
     };
     const content = _jsx("span", { className: "token-label__content", children: children });
-    return as === "code"
+    const label = as === "code"
         ? _jsx("code", { ...labelProps, children: content })
         : _jsx("span", { ...labelProps, children: content });
+    return title === undefined ? label : _jsx(Tooltip, { content: title, children: label });
 }

package/dist/inspector/tokens/TokensPanel.js

@@ -3,6 +3,7 @@ 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 { Disclosure } from "../ui/Disclosure.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";
@@ -43,5 +44,5 @@ function TokenCatalogItem({ row, rows, entries, }) {
     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] }));
+    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 ? (_jsx(Disclosure, { className: "token-variants", "data-test": "token-variants", title: `Variants (${variants.length})`, panelClassName: "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/dragPointerLock.d.ts

@@ -0,0 +1,8 @@
+/** Keeps mouse drags relative, including when the handle is inside a shadow root. */
+export declare function startDragPointerLock(handle: HTMLElement, point: {
+    x: number;
+    y: number;
+}, onMove: (event: MouseEvent) => void, onEnd: () => void): {
+    isLocked: () => boolean;
+    stop: () => void;
+};

package/dist/inspector/tokens/dragPointerLock.js

@@ -0,0 +1,70 @@
+import { showLockedDragCursor } from "../ui/dragCursor.js";
+/** Keeps mouse drags relative, including when the handle is inside a shadow root. */
+export function startDragPointerLock(handle, point, onMove, onEnd) {
+    const doc = handle.ownerDocument;
+    const root = handle.getRootNode();
+    const isLocked = () => root.pointerLockElement === handle;
+    let stopped = false;
+    let pending = true;
+    let acquired = false;
+    let removeCursor;
+    function removeLockListeners() {
+        doc.removeEventListener("pointerlockchange", onLockChange);
+        doc.removeEventListener("pointerlockerror", onLockError);
+    }
+    function onLockChange() {
+        if (isLocked()) {
+            pending = false;
+            acquired = true;
+            if (stopped) {
+                doc.exitPointerLock();
+                removeLockListeners();
+            }
+            else if (!removeCursor) {
+                removeCursor = showLockedDragCursor(doc, point);
+            }
+        }
+        else if (acquired) {
+            onEnd();
+        }
+    }
+    function onLockError() {
+        pending = false;
+        removeLockListeners();
+    }
+    function onMouseMove(event) {
+        if (!stopped && isLocked())
+            onMove(event);
+    }
+    function onMouseUp(event) {
+        if (event.button === 0)
+            onEnd();
+    }
+    doc.addEventListener("mousemove", onMouseMove);
+    doc.addEventListener("mouseup", onMouseUp);
+    doc.addEventListener("pointerlockchange", onLockChange);
+    doc.addEventListener("pointerlockerror", onLockError);
+    try {
+        // Older implementations return void. Rejections retain pointer-capture dragging.
+        const request = handle.requestPointerLock();
+        if (request)
+            void request.catch(onLockError);
+    }
+    catch {
+        onLockError();
+    }
+    return {
+        isLocked,
+        stop() {
+            stopped = true;
+            removeCursor?.();
+            doc.removeEventListener("mousemove", onMouseMove);
+            doc.removeEventListener("mouseup", onMouseUp);
+            if (isLocked())
+                doc.exitPointerLock();
+            // A request can finish after mouse-up or unmount. Release that late lock too.
+            if (!pending)
+                removeLockListeners();
+        },
+    };
+}

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

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

package/dist/inspector/tokens/editActions.js

@@ -44,7 +44,7 @@ function sourceFields(el) {
         column: parsed.column,
     };
 }
-export { getPendingRules, getChangesList as getChangeRecords, clearWorkspace as resetPendingRules } from "../changes/changesLog.js";
+export { getPendingRules, getChangesList as getChangeRecords, clearActiveDraft as resetPendingRules } from "../changes/changesLog.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/ui/AtRuleContext.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
-import { Tooltip } from "@base-ui/react/tooltip";
+import { Tooltip } from "./Tooltip.js";
+import { cx } from "./classNames.js";
 const EMPTY_AT_RULES = [];
 const FieldAtRuleContext = createContext(new Map());
 /**
@@ -40,9 +41,6 @@ function countLabel(label, count) {
     const noun = label.toLowerCase().replace(/query$/, count === 1 ? "query" : "queries");
     return `${count} ${noun}`;
 }
-function portalContainer() {
-    return document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body;
-}
 /** Compact, field-level attribution for the conditional rule that currently wins. */
 export function AtRuleIndicator({ atRules = EMPTY_AT_RULES, className }) {
     if (atRules.length === 0)
@@ -50,5 +48,5 @@ export function AtRuleIndicator({ atRules = EMPTY_AT_RULES, className }) {
     const label = labelFor(atRules);
     const activeCount = atRules.filter((atRule) => !("active" in atRule) || atRule.active).length;
     const count = countLabel(label, atRules.length);
-    return (_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { disableHoverablePopup: true, children: [_jsx(Tooltip.Trigger, { type: "button", delay: 0, className: `at-rule-indicator${className ? ` ${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 }) }), _jsx(Tooltip.Portal, { container: portalContainer(), children: _jsx(Tooltip.Positioner, { className: "at-rule-tooltip-positioner", side: "top", align: "end", sideOffset: 7, children: _jsx(Tooltip.Popup, { className: "at-rule-tooltip", "data-test": "at-rule-tooltip", children: _jsx("div", { className: "at-rule-tooltip__rules", children: atRules.map((atRule, index) => (_jsx("div", { className: `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}`))) }) }) }) })] }) }));
+    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 }) }) }));
 }

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

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactElement } from "react";
+import type { ButtonHTMLAttributes } from "react";
 export type ButtonVariant = "primary" | "secondary" | "quiet" | "danger" | "disabled";
 export type ButtonSize = "default" | "compact" | "large";
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -6,4 +6,8 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSize;
     "data-test"?: string;
 };
-export declare function Button({ variant, size, className, ...props }: ButtonProps): ReactElement;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    "data-test"?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/inspector/ui/Button.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function Button({ variant = "secondary", size = "default", className, ...props }) {
-    return (_jsx("button", { ...props, className: `button button--${variant} button--${size}${className ? ` ${className}` : ""}` }));
-}
+import { forwardRef } from "react";
+export const Button = forwardRef(function Button({ variant = "secondary", size = "default", className, ...props }, ref) {
+    return (_jsx("button", { ref: ref, ...props, className: `button button--${variant} button--${size}${className ? ` ${className}` : ""}` }));
+});

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

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+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.
@@ -11,4 +11,4 @@ export interface ControlSurfaceProps extends HTMLAttributes<HTMLSpanElement> {
     "data-test"?: string;
     children?: ReactNode;
 }
-export declare function ControlSurface({ appearance, density, className, children, ...props }: ControlSurfaceProps): ReactElement;
+export declare const ControlSurface: import("react").ForwardRefExoticComponent<ControlSurfaceProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/inspector/ui/ControlSurface.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ControlSurface({ appearance = "default", density = "default", className, children, ...props }) {
+import { forwardRef } from "react";
+export const ControlSurface = forwardRef(function ControlSurface({ appearance = "default", density = "default", className, children, ...props }, ref) {
     const classes = [
         "control-surface",
         appearance === "embedded" ? "control-surface--embedded" : "",
         density === "compact" ? "control-surface--compact" : "",
         className ?? "",
     ].filter(Boolean).join(" ");
-    return _jsx("span", { ...props, className: classes, children: children });
-}
+    return _jsx("span", { ref: ref, ...props, className: classes, children: children });
+});

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

@@ -0,0 +1,22 @@
+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;
+    readonly triggerClassName?: string;
+    readonly panelClassName?: string;
+    readonly defaultOpen?: boolean;
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Keeps panel content in the DOM while collapsed, matching native details behavior. */
+    readonly keepMounted?: boolean;
+    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;