nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/styleEditors/BackgroundEditor.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { IconArrowsDiff, IconDroplet, IconMinus, IconPlus } from "@tabler/icons-react";
+import { replaceColorPreservingOpacity, withColorOpacity } from "../../css/value-semantics/colorSemantics.js";
+import { interpretTokenValue } from "../../css/value-semantics/tokenInterpretation.js";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+import { colorValueToHex, TokenValueField } from "../tokens/TokenField.js";
+import { setStyles } from "../tokens/editActions.js";
+import { createChangeHistoryGroup, getActiveDraftChanges } from "../changes/draftChanges.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { IconButton } from "../ui/IconButton.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
+import { SegmentedControl } from "../ui/SegmentedControl.js";
+import { Select } from "../ui/Select.js";
+import { ImageBackgroundEditor } from "./ImageBackgroundEditor.js";
+import { backgroundDeclarations, backgroundMode, BACKGROUND_BLEND_MODES, newBackgroundLayer, readBackgroundLayers } from "./backgroundLayers.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { defaultGradient, parseGradient, serializeGradient } from "./gradientValue.js";
+const MODES = [{ value: "solid", label: "Solid" }, { value: "gradient", label: "Gradient" }, { value: "image", label: "Image" }];
+const TYPES = [{ value: "linear", label: "Linear" }, { value: "radial", label: "Radial" }, { value: "conic", label: "Conic" }];
+/** Background layers are displayed in CSS paint order, with the top layer first. */
+export function BackgroundEditor(props) {
+    const { element, selection, onAfterEdit } = props;
+    const el = element.domElement;
+    const elements = selection?.domElements ?? [el];
+    const source = readBackgroundLayers((property, fallback) => getStateStyleValue(el, property, fallback));
+    const base = source.at(-1);
+    const authoredColor = props.tokenRow?.property === "background-color" || props.tokenRow?.property === "background"
+        ? props.tokenRow.authored ?? props.tokenRow.declaredValue : undefined;
+    if (base?.baseColor && authoredColor) {
+        const table = Object.fromEntries((props.entries ?? getNudgeUiTokenEntries()).map((entry) => [entry.name, entry]));
+        const resolved = interpretTokenValue(authoredColor, { table }).resolvedValue;
+        if (colorValueToHex(resolved) && colorValueToHex(resolved) === colorValueToHex(base.value))
+            base.value = authoredColor;
+    }
+    const [draft, setDraft] = useState(null);
+    const activeDraft = draft?.element === el && draft.revision === getActiveDraftChanges().revision
+        && draft.elements.length === elements.length && draft.elements.every((element, index) => element === elements[index]) ? draft : null;
+    const layers = activeDraft?.layers ?? source;
+    const properties = ["background-color", "background-image", "background-blend-mode", "background-size", "background-repeat", "background-position"];
+    const mixed = !activeDraft && elements.some((element) => properties.some((property) => selection?.getProperty(property)?.value.kind === "mixed"
+        || getStateStyleValue(element, property) !== getStateStyleValue(el, property)));
+    const blockedBy = inlineBlockedBy(elements, ...properties);
+    function commit(next) {
+        const previous = backgroundDeclarations(layers);
+        const declarations = backgroundDeclarations(next).filter((declaration) => mixed || previous.find((current) => current.property === declaration.property)?.value !== declaration.value);
+        if (inlineBlockedBy(elements, ...declarations.map((declaration) => declaration.property)))
+            return false;
+        if (declarations.length && !setStyles(selection?.target ?? el, declarations).length)
+            return false;
+        setDraft({ element: el, elements: [...elements], revision: getActiveDraftChanges().revision, layers: next });
+        onAfterEdit?.();
+        return true;
+    }
+    return _jsxs("div", { className: "editor background-editor", "data-test": "background-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Background" }), _jsx(InlineStyleWarning, { blockedBy: blockedBy }), _jsx(IconButton, { variant: "quiet", label: "Add background layer", disabled: blockedBy !== null, onClick: () => commit([{ ...newBackgroundLayer(), baseColor: mixed || layers.length === 0 }, ...(mixed ? [] : layers)]), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), mixed ? _jsx("div", { className: "background-editor__hint", children: "Mixed backgrounds. Add a layer to replace them." }) : layers.map((layer, index) => _jsx("div", { className: "background-editor__layer", role: "group", "aria-label": `Background layer ${index + 1}`, children: _jsx(BackgroundLayerEditor, { ...props, layer: layer, baseColor: layer.baseColor && layer.mode === "solid", bottomLayer: index === layers.length - 1, onChange: (next) => commit(layers.map((current, i) => i === index ? next : current)), onRemove: () => commit(layers.filter((_, i) => i !== index)) }) }, index))] });
+}
+function previewColor(color) {
+    const result = color.tokenName && color.opacity ? withColorOpacity(color.resolvedValue, color.opacity.value) : null;
+    return result?.ok ? result.value : color.resolvedValue;
+}
+function BackgroundLayerEditor(props) {
+    const { element, selection, entries, layer, baseColor, bottomLayer, onChange, onRemove } = props;
+    const allEntries = entries ?? getNudgeUiTokenEntries();
+    const tokenTable = Object.fromEntries(allEntries.map((entry) => [entry.name, entry]));
+    const el = element.domElement;
+    const elements = selection?.domElements ?? [el];
+    const { value, mode } = layer;
+    const gradient = layer.gradient ?? parseGradient(value);
+    const blockedBy = inlineBlockedBy(elements, baseColor ? "background-color" : "background-image");
+    const dragCommit = useRef(null);
+    function commit(nextValue, nextMode = backgroundMode(nextValue), nextGradient, declarations = []) {
+        if (blockedBy)
+            return false;
+        const next = {
+            ...layer, value: nextValue, mode: nextMode, gradient: nextGradient,
+            baseColor: layer.baseColor || (nextMode === "solid" && mode !== "solid" && bottomLayer),
+        };
+        for (const declaration of declarations) {
+            if (declaration.property === "background-size")
+                next.size = declaration.value;
+            if (declaration.property === "background-repeat")
+                next.repeat = declaration.value;
+            if (declaration.property === "background-position")
+                next.position = declaration.value;
+        }
+        return onChange(next);
+    }
+    function commitGradient(next) { commit(serializeGradient(next), "gradient", next); }
+    function changeMode(next) {
+        if (next === mode)
+            return;
+        if (next === "solid")
+            commit("#ffffff", next);
+        else if (next === "gradient")
+            commitGradient(defaultGradient());
+        else
+            commit("none", next);
+    }
+    function updateStop(index, next) {
+        if (gradient)
+            commitGradient({ ...gradient, stops: gradient.stops.map((stop, i) => i === index ? { ...stop, ...next } : stop) });
+    }
+    function removeStop(index) {
+        if (!gradient || gradient.stops.length <= 2)
+            return;
+        commitGradient({ ...gradient, stops: gradient.stops.filter((_, i) => i !== index) });
+    }
+    function addStop(position = 50) {
+        if (!gradient)
+            return;
+        const color = gradient.stops[0].color;
+        commitGradient({ ...gradient, stops: [...gradient.stops, { color, position }] });
+    }
+    function commitColor(index, stop, color) {
+        const result = replaceColorPreservingOpacity(stop.color, color, { tokenTable });
+        if (result.ok)
+            updateStop(index, { color: result.value });
+    }
+    function percentAt(track, clientX) {
+        const rect = track.getBoundingClientRect();
+        return rect.width > 0 ? Math.round(Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100))) : 50;
+    }
+    function rawField(label, current, onCommit, mixedValue = false) {
+        return _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: "background-image", domElement: el, entries: [], committedValue: current, label: label, mixed: mixedValue, blockedBy: blockedBy, onCommitRaw: onCommit, onSelectToken: () => false, onUnlink: onCommit }) });
+    }
+    const toolbar = _jsxs("div", { className: "background-editor__type-row", children: [_jsx(SegmentedControl, { "aria-label": "Background type", value: mode, options: MODES, onChange: changeMode, disabled: blockedBy !== null }), !baseColor ? _jsx(Select, { iconOnly: true, "aria-label": "Background blending mode", title: `Blend mode: ${layer.blend}`, value: layer.blend, options: BACKGROUND_BLEND_MODES, popupPosition: { side: "top", align: "end" }, disabled: inlineBlockedBy(elements, "background-blend-mode") !== null, onValueChange: (blend) => onChange({ ...layer, blend }), children: _jsx(IconDroplet, { "aria-hidden": "true" }) }) : _jsx("span", { className: "background-editor__blend-space", "aria-hidden": "true" }), _jsx(IconButton, { variant: "quiet", label: "Remove background layer", disabled: blockedBy !== null, onClick: onRemove, children: _jsx(IconMinus, { "aria-hidden": "true" }) })] });
+    const color = interpretTokenValue(value, { table: tokenTable });
+    if (mode === "solid")
+        return _jsxs("div", { className: "background-editor__solid", "data-property": baseColor ? "background-color" : "background-image", children: [toolbar, _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: baseColor ? "background-color" : "background-image", semanticSlot: "color", domElement: el, isColor: true, entries: allEntries, committedValue: color.tokenName ? value : colorValueToHex(value) ?? value, activeTokenName: color.tokenName, resolvedValue: previewColor(color), opacity: color.opacity, label: "Background Color", blockedBy: blockedBy, onCommitRaw: (raw) => {
+                            const result = replaceColorPreservingOpacity(value, raw, { tokenTable });
+                            if (result.ok)
+                                commit(result.value, "solid");
+                        }, onSelectToken: (token) => {
+                            const result = replaceColorPreservingOpacity(value, `var(${token.name})`, { tokenTable });
+                            return result.ok && commit(result.value, "solid");
+                        }, onUnlink: (raw) => commit(raw, "solid"), onCommitOpacity: (opacity) => {
+                            const result = withColorOpacity(value, opacity);
+                            return result.ok && commit(result.value, "solid");
+                        } }) })] });
+    return _jsxs("div", { className: "background-editor__content", children: [toolbar, mode === "image" ? _jsx(ImageBackgroundEditor, { element: el, elements: elements, value: value, mixed: false, sizingValues: { size: layer.size, repeat: layer.repeat }, onCss: (raw) => commit(raw, "image"), onUpload: (image) => commit(image, "image", undefined, [
+                    { property: "background-size", value: "cover" },
+                    { property: "background-repeat", value: "no-repeat" },
+                    { property: "background-position", value: "center" },
+                ]), onSizing: (declarations) => commit(value, "image", undefined, declarations) }) : gradient && mode === "gradient" ? _jsxs("div", { className: "background-editor__gradient", children: [_jsx("div", { className: "background-editor__track", "data-test": "gradient-track", "aria-label": "Gradient stops", style: { backgroundImage: serializeGradient({ ...gradient, type: "linear", angle: 90, prelude: "", repeating: false,
+                                stops: gradient.stops.map((stop) => ({ ...stop, color: previewColor(interpretTokenValue(stop.color, { table: tokenTable })) })) }) }, onPointerDown: (event) => { if (event.target === event.currentTarget && event.button === 0)
+                            addStop(percentAt(event.currentTarget, event.clientX)); }, children: gradient.stops.map((stop, index) => _jsx("button", { type: "button", className: "background-editor__stop", "aria-label": `Gradient stop ${index + 1}`, disabled: blockedBy !== null, style: { left: `clamp(8px, ${stop.position}%, calc(100% - 8px))`, backgroundColor: previewColor(interpretTokenValue(stop.color, { table: tokenTable })) }, onPointerDown: (event) => {
+                                if (event.button !== 0)
+                                    return;
+                                event.stopPropagation();
+                                dragCommit.current = createChangeHistoryGroup();
+                                event.currentTarget.setPointerCapture(event.pointerId);
+                            }, onPointerMove: (event) => {
+                                if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                                    const position = percentAt(event.currentTarget.parentElement, event.clientX);
+                                    if (position !== stop.position)
+                                        dragCommit.current?.(() => updateStop(index, { position }));
+                                }
+                            }, onPointerUp: (event) => {
+                                dragCommit.current = null;
+                                if (event.currentTarget.hasPointerCapture(event.pointerId))
+                                    event.currentTarget.releasePointerCapture(event.pointerId);
+                            }, onPointerCancel: () => { dragCommit.current = null; }, onLostPointerCapture: () => { dragCommit.current = null; }, onDoubleClick: () => removeStop(index), onKeyDown: (event) => {
+                                if (event.key === "Delete" || event.key === "Backspace") {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    removeStop(index);
+                                }
+                                if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    updateStop(index, { position: Math.max(0, Math.min(100, stop.position + (event.key === "ArrowLeft" ? -1 : 1) * (event.shiftKey ? 10 : 1))) });
+                                }
+                            } }, index)) }), _jsxs("div", { className: "background-editor__toolbar", children: [_jsx(Select, { "aria-label": "Gradient type", value: gradient.type, options: TYPES, disabled: blockedBy !== null, onValueChange: (type) => commitGradient({ ...gradient, type: type, prelude: type === "radial" ? "circle at center" : "" }) }), gradient.type !== "radial" ? rawField("Gradient angle", `${gradient.angle}deg`, (raw) => {
+                                const match = /^([+-]?(?:\d*\.)?\d+)(?:deg)?$/.exec(raw.trim());
+                                if (match && Number.isFinite(Number(match[1])))
+                                    commitGradient({ ...gradient, angle: Number(match[1]) });
+                            }) : null, _jsx(IconButton, { variant: "quiet", label: "Reverse gradient", disabled: blockedBy !== null, onClick: () => commitGradient({ ...gradient, stops: [...gradient.stops].reverse().map((stop) => ({ ...stop, position: 100 - stop.position })) }), children: _jsx(IconArrowsDiff, { "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Add gradient stop", disabled: blockedBy !== null, onClick: () => addStop(), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), gradient.stops.map((stop, index) => ({ stop, index })).sort((a, b) => a.stop.position - b.stop.position).map(({ stop, index }) => {
+                        const color = interpretTokenValue(stop.color, { table: tokenTable });
+                        return _jsxs("div", { className: "background-editor__stop-row", role: "group", "aria-label": `Stop ${index + 1}`, children: [rawField(`Stop ${index + 1} position`, `${Number(stop.position.toFixed(3))}%`, (raw) => {
+                                    const match = /^([+-]?(?:\d*\.)?\d+)%?$/.exec(raw.trim());
+                                    if (match)
+                                        updateStop(index, { position: Math.max(0, Math.min(100, Number(match[1]))) });
+                                }), _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: "background-image", semanticSlot: "color", domElement: el, isColor: true, entries: allEntries, activeTokenName: color.tokenName, committedValue: color.tokenName ? stop.color : colorValueToHex(stop.color) ?? stop.color, resolvedValue: previewColor(color), label: `Stop ${index + 1} color`, blockedBy: blockedBy, opacity: color.opacity, onCommitRaw: (color) => commitColor(index, stop, color), onSelectToken: (token) => commitColor(index, stop, `var(${token.name})`), onUnlink: (color) => updateStop(index, { color: previewColor(interpretTokenValue(color, { table: tokenTable })) }), onCommitOpacity: (opacity) => {
+                                            const result = withColorOpacity(stop.color, opacity);
+                                            if (!result.ok)
+                                                return false;
+                                            updateStop(index, { color: result.value });
+                                        } }) }), _jsx(IconButton, { variant: "quiet", label: `Remove stop ${index + 1}`, disabled: blockedBy !== null || gradient.stops.length <= 2, onClick: () => removeStop(index), children: _jsx(IconMinus, { "aria-hidden": "true" }) })] }, index);
+                    })] }) : _jsxs("div", { className: "background-editor__raw", children: [mode === "gradient" ? _jsx("div", { className: "background-editor__hint", children: "Edit this background using CSS." }) : null, rawField("Background image CSS", value, (raw) => {
+                        if (typeof CSS !== "undefined" && !CSS.supports("background-image", raw))
+                            return;
+                        commit(raw, mode);
+                    }, false), mode === "gradient" ? _jsx(IconButton, { variant: "quiet", label: "Add linear gradient", disabled: blockedBy !== null, onClick: () => commitGradient(defaultGradient()), children: _jsx(IconPlus, { "aria-hidden": "true" }) }) : null] })] });
+}

package/dist/inspector/styleEditors/BorderEditor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { IconBorderBottom, IconBorderLeft, IconBorderRight, IconBorderSides, IconBorderStyle2, IconBorderTop, IconCheck, IconMinus, IconPlus, } from "@tabler/icons-react";
+import { IconBorderSides, IconBorderStyle2, IconCheck, IconMinus, IconPlus, } from "@tabler/icons-react";
 import { findTokenRow } from "./rowLookup.js";
 import { TokenField } from "../tokens/TokenField.js";
 import { setStyle, setStyles } from "../tokens/editActions.js";
@@ -13,8 +13,11 @@ import { getStateStyleValue } from "../shell/stateValue.js";
 import { PopoverListbox } from "../ui/PopoverListbox.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
-import { hasAuthoredProperty, hasAuthoredStyle, isZeroCssValue } from "./stylePresence.js";
+import { isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 const BORDER_STYLES = ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
 const INVISIBLE_BORDER_STYLES = new Set(["none", "hidden"]);
 const BORDER_SIDES = SIDE_NAMES.map((side) => `border-${side}`);
@@ -96,67 +99,15 @@ function valuesAreLinked(el, rows, shorthand, sideProperties) {
     const signatures = sideProperties.map((property) => sideComponentSignature(el, rows, property));
     return new Set(signatures).size === 1;
 }
-function isBorderFaceProperty(property) {
-    const p = property.toLowerCase();
-    return p === "border"
-        || p === "border-width"
-        || p === "border-style"
-        || p === "border-color"
-        || /^border-(top|right|bottom|left)(?:-(?:width|style|color))?$/.test(p);
-}
-function isZeroWidthValue(value) {
-    const trimmed = value.trim().toLowerCase();
-    if (isZeroCssValue(trimmed))
-        return true;
-    // Structured/preflight authored forms like `0 solid` / `0px solid currentcolor`.
-    const first = trimmed.split(/\s+/)[0] ?? "";
-    return isZeroCssValue(first);
-}
-/** True when a face paints: drawn style and non-zero width. */
-function sidePaints(el, rows, side) {
-    const style = borderStyleValue(el, rows, `border-${side}-style`);
-    if (INVISIBLE_BORDER_STYLES.has(style))
-        return false;
-    return !isZeroWidthValue(borderWidthValue(el, rows, `border-${side}-width`));
-}
-/**
- * Show border controls for intentional / painted borders only.
- *
- * Tailwind preflight authors `border: 0 solid` on `*`. That is cascade
- * evidence but not a visible border — hide controls and show + instead.
- *
- * Counts as presence:
- * - any painted face (drawn style + non-zero width)
- * - a direct width or disabling style, including zero
- */
-function hasBorderPresence(el, rows) {
-    if (SIDE_NAMES.some((side) => sidePaints(el, rows, side)))
-        return true;
-    for (const row of rows) {
-        if (!isBorderFaceProperty(row.property) && !row.structure)
-            continue;
-        if (!hasAuthoredStyle(row))
-            continue;
-        const property = row.property.toLowerCase();
-        const authored = (row.authored ?? row.declaredValue ?? "").trim().toLowerCase();
-        const structuredStyle = row.structure?.style?.trim().toLowerCase() ?? "";
-        const structuredWidth = row.structure?.width?.trim() ?? "";
-        if (INVISIBLE_BORDER_STYLES.has(structuredStyle) || INVISIBLE_BORDER_STYLES.has(authored)) {
-            return true;
-        }
-        if (structuredWidth)
-            return true;
-        if ((property === "border-width" || property.endsWith("-width")) && authored) {
-            return true;
-        }
-    }
-    // Computed non-zero width without cascade rows (inline / inaccessible sheets).
-    if (!isZeroWidthValue(borderWidthValue(el, rows, "border-width")))
-        return true;
-    if (SIDE_NAMES.some((side) => !isZeroWidthValue(borderWidthValue(el, rows, `border-${side}-width`)))) {
-        return true;
-    }
-    return false;
+/** Initial visibility follows the effective border, including stylesheet resets. */
+function hasBorderPresence(el) {
+    return SIDE_NAMES.some((side) => {
+        const style = getStateStyleValue(el, `border-${side}-style`, "none").toLowerCase();
+        if (INVISIBLE_BORDER_STYLES.has(style))
+            return false;
+        const width = getStateStyleValue(el, `border-${side}-width`, "0px");
+        return !isZeroCssValue(width);
+    });
 }
 /**
  * Linked presentation from cascade data + optional user toggle.
@@ -192,12 +143,14 @@ function useBorderLinkedState(dataLinked, resetKey) {
 export function BorderEditor(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
+    const selectedElements = selection?.domElements ?? [el];
     const editTarget = selection?.target ?? el;
     const isGroup = Boolean(selection && selection.elements.length > 1);
     const allEntries = entries ?? getNudgeUiTokenEntries();
     const borderWidthProperties = BORDER_SIDES.map((side) => `${side}-width`);
     const borderStyleProperties = BORDER_SIDES.map((side) => `${side}-style`);
     const borderColorProperties = BORDER_SIDES.map((side) => `${side}-color`);
+    const borderBlockedBy = inlineBlockedBy(selectedElements, "border", "border-width", "border-style", "border-color");
     const borderWidthDataLinked = valuesAreLinked(el, tokenRows, "border-width", borderWidthProperties);
     const borderStyleDataLinked = valuesAreLinked(el, tokenRows, "border-style", borderStyleProperties);
     const borderColorDataLinked = valuesAreLinked(el, tokenRows, "border-color", borderColorProperties);
@@ -208,18 +161,19 @@ export function BorderEditor(props) {
     const rawBorderFallback = !isGroup && Boolean(borderRow && !borderRow.structure && !hasStructuredBorderRows);
     const linkedBorderStyle = borderStyleValue(el, tokenRows, "border-style");
     const showWidthAndColor = !(borderLinked && INVISIBLE_BORDER_STYLES.has(linkedBorderStyle));
-    const hasBorder = isGroup
-        ? (selection?.domElements.some((candidate) => hasBorderPresence(candidate, [])) ?? false)
-            || borderWidthProperties.some((property) => hasAuthoredProperty(selection, property))
-        : hasBorderPresence(el, tokenRows);
-    const visibility = useFieldVisibility(selection?.domElements ?? [el], "border", hasBorder || rawBorderFallback);
+    const hasBorder = selectedElements.some(hasBorderPresence);
+    const visibility = useFieldVisibility(selectedElements, "border", hasBorder);
     const showBorderControls = visibility.visible;
     function handleAddBorder() {
+        if (borderBlockedBy)
+            return;
         setStyle(editTarget, "border", "1px solid");
         visibility.show();
         onAfterEdit?.();
     }
     function handleRemoveBorder() {
+        if (borderBlockedBy)
+            return;
         setStyle(editTarget, "border", "0 solid");
         visibility.hide();
         onAfterEdit?.();
@@ -228,6 +182,8 @@ export function BorderEditor(props) {
         setBorderLinked(false);
     }
     function handleCollapse() {
+        if (borderBlockedBy)
+            return;
         setBorderLinked(true);
         const declarations = [
             borderLinkDeclaration(el, tokenRows, "border-style", borderStyleProperties),
@@ -245,29 +201,42 @@ export function BorderEditor(props) {
         width: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderWidthProperties[index], selection: selection, tokenRow: findTokenRow(tokenRows, borderWidthProperties[index]), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) })),
         style: (_jsx(BorderStyleSettingsMenu, { property: borderStyleProperties[index], tokenRow: findTokenRow(tokenRows, borderStyleProperties[index]), domElement: el, editTarget: editTarget, selection: selection, dataTest: `border-style-${side}`, onAfterEdit: onAfterEdit })),
     }));
-    return (_jsxs("div", { className: `editor`, "data-test": "border-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Border" }), showBorderControls ? (_jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: rawBorderFallback ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: borderRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) })) : borderLinked ? (_jsxs("div", { className: "border__linked-row", children: [showWidthAndColor ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border__linked-control border__linked-control--color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-color", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-color", borderColorProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }), _jsx("div", { className: "border__linked-control border__linked-control--width", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-width", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-width", borderWidthProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: linkedTokenRow(tokenRows, "border-style", borderStyleProperties), domElement: el, editTarget: editTarget, selection: selection, onAfterEdit: onAfterEdit }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "Edit Individual Border Sides", title: "Edit Individual Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
+    return (_jsxs("div", { className: `editor`, "data-test": "border-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Border" }), showBorderControls ? (_jsx(Tooltip, { content: inlineStyleWarningContent(borderBlockedBy), children: _jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", disabled: borderBlockedBy !== null, onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", disabled: borderBlockedBy !== null, onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: rawBorderFallback ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: borderRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) })) : borderLinked ? (_jsxs("div", { className: "border__linked-row", children: [showWidthAndColor ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border__linked-control border__linked-control--color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-color", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-color", borderColorProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }), _jsx("div", { className: "border__linked-control border__linked-control--width", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-width", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-width", borderWidthProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: linkedTokenRow(tokenRows, "border-style", borderStyleProperties), domElement: el, editTarget: editTarget, selection: selection, onAfterEdit: onAfterEdit }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "Edit Individual Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
                                 if (pressed)
                                     handleExpand();
-                            }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })) : (_jsxs("div", { className: "border__expanded", children: [_jsxs("div", { className: "border__expanded-header", children: [_jsx("span", { className: "side-values__label", children: formatInspectorLabel("Individual Sides") }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-collapse", label: "Link All Border Sides", title: "Link All Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
+                            }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })) : (_jsxs("div", { className: "border__expanded", children: [_jsxs("div", { className: "border__expanded-header", children: [_jsx("span", { className: "side-values__label", children: formatInspectorLabel("Individual Sides") }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-collapse", label: "Link All Border Sides", pressed: !borderLinked, disabled: borderBlockedBy !== null, onPressedChange: (pressed) => {
                                         if (!pressed)
                                             handleCollapse();
                                     }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] }), showWidthAndColor ? (_jsx("div", { className: "border__side-rows", "data-test": "border-side-rows", children: sideRows.map(({ side, color, width, style }) => (_jsxs("div", { className: "border__side-row", "data-side": side, "aria-label": `Border ${formatInspectorLabel(side)}`, children: [_jsx(BorderSideIndicator, { side: side }), _jsx("div", { className: "border__side-control border__side-control--color", children: color }), _jsx("div", { className: "border__side-control border__side-control--width", children: width }), style] }, side))) })) : null] })) }))] }));
 }
-const BORDER_SIDE_ICONS = {
-    top: IconBorderTop,
-    right: IconBorderRight,
-    bottom: IconBorderBottom,
-    left: IconBorderLeft,
+const BORDER_SIDE_ICON_PATHS = {
+    left: {
+        outline: "M20 3H4v18h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z",
+        emphasis: { x1: "3.5", y1: "3.5", x2: "3.5", y2: "20.5" },
+    },
+    right: {
+        outline: "M4 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16V3H4Z",
+        emphasis: { x1: "20.5", y1: "3.5", x2: "20.5", y2: "20.5" },
+    },
+    top: {
+        outline: "M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4h18v16Z",
+        emphasis: { x1: "3.5", y1: "3.5", x2: "20.5", y2: "3.5" },
+    },
+    bottom: {
+        outline: "M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17H3V4Z",
+        emphasis: { x1: "3.5", y1: "20.5", x2: "20.5", y2: "20.5" },
+    },
 };
 function BorderSideIndicator({ side }) {
-    const Icon = BORDER_SIDE_ICONS[side];
-    return _jsx(Icon, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" });
+    const { outline, emphasis } = BORDER_SIDE_ICON_PATHS[side];
+    return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: outline, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "square", strokeOpacity: "0.2" }), _jsx("line", { ...emphasis, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
 }
 function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarget, selection, dataTest = "border-style-settings", onAfterEdit }) {
     const structured = tokenRow?.structure?.style?.trim().toLowerCase() ?? "";
     const selectedValue = selection?.getProperty(property)?.value;
     const mixed = selectedValue?.kind === "mixed";
     const commonValue = selectedValue?.kind === "common" ? selectedValue.value : "";
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     const initial = mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none";
     const [value, setValue] = useState(initial);
     const [open, setOpen] = useState(false);
@@ -275,6 +244,8 @@ function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarge
         setValue(mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none");
     }, [commonValue, el, mixed, property, structured]);
     function handleChange(next) {
+        if (blockedBy)
+            return;
         if (!BORDER_STYLES.includes(next))
             return;
         setValue(next);
@@ -282,7 +253,7 @@ function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarge
         setOpen(false);
         onAfterEdit?.();
     }
-    return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: `Border style: ${formatInspectorLabel(value)}`, "data-test": dataTest, "data-current-style": value, children: _jsx(IconBorderStyle2, { size: 16, "aria-hidden": "true" }) })), triggerDataTest: dataTest, triggerAriaLabel: "Border style settings", items: BORDER_STYLES.map((style) => ({
+    return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: `Border style: ${formatInspectorLabel(value)}`, "data-test": dataTest, "data-current-style": value, children: _jsx(IconBorderStyle2, { size: 16, "aria-hidden": "true" }) })), triggerDataTest: dataTest, triggerAriaLabel: "Border style settings", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: BORDER_STYLES.map((style) => ({
             value: style,
             label: formatInspectorLabel(style),
             leading: style === value ? _jsx(IconCheck, { size: 14, stroke: 2, "aria-hidden": "true" }) : undefined,

package/dist/inspector/styleEditors/BorderRadiusEditor.js

@@ -10,6 +10,7 @@ import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { completeCssValue } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 const BORDER_RADIUS_CORNERS = [
     "border-top-left-radius",
     "border-top-right-radius",
@@ -52,6 +53,7 @@ export function BorderRadiusEditor(props) {
     const isGroup = Boolean(selection && selection.elements.length > 1);
     const allEntries = entries ?? getNudgeUiTokenEntries();
     const dataLinked = !isGroup && cornersAreLinked(tokenRows);
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], "border-radius");
     const [userUnlinked, setUserUnlinked] = useState(false);
     const [userLinked, setUserLinked] = useState(false);
     useEffect(() => {
@@ -70,6 +72,8 @@ export function BorderRadiusEditor(props) {
         setUserLinked(false);
     }
     function handleCollapse() {
+        if (blockedBy)
+            return;
         setUserLinked(true);
         setUserUnlinked(false);
         linkAllCorners(editTarget, tokenRows, selection, onAfterEdit);
@@ -94,7 +98,8 @@ export function BorderRadiusEditor(props) {
     const groupedControl = (_jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-radius", selection: selection, tokenRow: mixed ? null : borderRadiusRow, initialValue: mixed ? "Mix" : undefined, displayValue: mixed ? "Mix" : undefined, domElement: el, editTarget: editTarget, entries: allEntries, editMetadata: metadataFor(borderRadiusRow), mixed: mixed, formatRawValue: (value) => mixed && value.trim().toLowerCase() === "mix"
                 ? ""
                 : completeCssValue(value.trim(), valuePolicyFor("border-radius")), onAfterEdit: onAfterEdit, chipVariant: "small", leading: _jsx(IconBorderCorners, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" }) }) }));
-    const toggleButton = (_jsx(ToggleButton, { className: embedded ? "border-radius-editor__toggle" : undefined, variant: "quiet", size: "default", "data-test": isLinked ? "border-radius-expand" : "border-radius-collapse", label: isLinked ? "Edit Individual Corners" : "Link All Corners", title: isLinked ? "Edit Individual Corners" : "Link All Corners", pressed: !isLinked, onPressedChange: (pressed) => {
+    const toggleBlocked = !isLinked && blockedBy !== null;
+    const toggleButton = (_jsx(ToggleButton, { className: embedded ? "border-radius-editor__toggle" : undefined, variant: "quiet", size: "default", "data-test": isLinked ? "border-radius-expand" : "border-radius-collapse", label: isLinked ? "Edit Individual Corners" : "Link All Corners", pressed: !isLinked, disabled: toggleBlocked, onPressedChange: (pressed) => {
             if (pressed)
                 handleExpand();
             else

package/dist/inspector/styleEditors/BoxShadowEditor.d.ts

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
+import type { TokenEntry, ResolvedProperty } from "../../css/model/index.js";
 import type { SelectedElement } from "../selection/selectionStore.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface BoxShadowEditorProps {