nudge-ui 0.2.2 → 0.2.3

package/dist/inspector/styleEditors/SpacingBox.js

@@ -11,6 +11,7 @@ import { projectInspectorValues, projectInspectorValuesForSelection, } from "../
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 export function SpacingBox(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
@@ -52,9 +53,9 @@ export function SpacingField({ property, projection: spacingProjection, domEleme
     const pairSlots = pairDefinitions.map(({ axis, sideProperties }) => ({
         axis,
         icon: null,
-        control: (_jsx(PairedTokenField, { displayProperty: `${property}-${axis}`, sideProperties: sideProperties, domElement: el, editTarget: editTarget, axisProjection: spacingProjection.axes[axis], entries: entries, suggestions: suggestions, onAfterEdit: onAfterEdit, chipVariant: "small", leading: _jsx(SpacingAxisIndicator, { property: property, axis: axis }) })),
+        control: (_jsx(PairedTokenField, { displayProperty: `${property}-${axis}`, sideProperties: sideProperties, domElement: el, editTarget: editTarget, selection: selection, axisProjection: spacingProjection.axes[axis], entries: entries, suggestions: suggestions, onAfterEdit: onAfterEdit, chipVariant: "small", leading: _jsx(SpacingAxisIndicator, { property: property, axis: axis }) })),
     }));
-    return (_jsx(SideValuesField, { label: property, "data-test": property === "inset" ? "layout-inset" : `spacing-${property}`, "data-property": property, resetKey: el, pairedControls: pairSlots, showLabel: showLabel, empty: showEmptyState && !visibility.visible, onAdd: visibility.show, emptyAction: property === "inset" ? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-inset", label: "Add Inset Values", title: "Add Inset Values", onClick: visibility.show, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : undefined, sides: sideSlots }));
+    return (_jsx(SideValuesField, { label: property, "data-test": property === "inset" ? "layout-inset" : `spacing-${property}`, "data-property": property, resetKey: el, pairedControls: pairSlots, showLabel: showLabel, empty: showEmptyState && !visibility.visible, onAdd: visibility.show, emptyAction: property === "inset" ? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-inset", label: "Add Inset Values", onClick: visibility.show, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : undefined, sides: sideSlots }));
 }
 function sideProperty(property, side) {
     return property === "inset" ? side : `${property}-${side}`;
@@ -83,7 +84,7 @@ function SpacingAxisIndicator({ property, axis, }) {
     }
     return (_jsxs("svg", { className: "side-values__icon side-values__axis-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "19", y: "6", width: "12", height: "14", rx: "2", transform: "rotate(90 19 6)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "19", y1: "2", x2: "5", y2: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" }), _jsx("line", { x1: "19", y1: "22", x2: "5", y2: "22", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
 }
-function PairedTokenField({ displayProperty, sideProperties, domElement: el, editTarget, axisProjection, entries, suggestions, onAfterEdit, chipVariant, leading, }) {
+function PairedTokenField({ displayProperty, sideProperties, domElement: el, editTarget, selection, axisProjection, entries, suggestions, onAfterEdit, chipVariant, leading, }) {
     const row = pairTokenRow(displayProperty, axisProjection);
     const groupMixed = axisProjection.fields.some((field) => field.value === "Mixed");
     const valuesMatch = axisProjection.state === "shared" && !groupMixed;
@@ -108,6 +109,7 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
     const currentToken = activeTokenName
         ? entries.find((entry) => entry.name === activeTokenName) ?? null
         : null;
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], ...sideProperties);
     function commitAxisValue(value) {
         const pair = splitAxisValue(value);
         const records = setStyles(editTarget ?? el, sideProperties.map((property, index) => ({
@@ -117,7 +119,7 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
         if (records.some(Boolean))
             onAfterEdit?.();
     }
-    return (_jsx(TokenValueField, { property: displayProperty, committedValue: committedValue, resolvedValue: resolvedValue, activeTokenName: activeTokenName, mixed: groupMixed, atRules: row.atRuleCandidates ?? row.atRules, entries: entries, suggestions: suggestions, chipVariant: chipVariant, formatRawValue: (value) => formatAxisValue(value, displayProperty), onCommitRaw: commitAxisValue, onSelectToken: (chosen) => {
+    return (_jsx(TokenValueField, { property: displayProperty, domElement: el, committedValue: committedValue, resolvedValue: resolvedValue, activeTokenName: activeTokenName, mixed: groupMixed, atRules: row.atRuleCandidates ?? row.atRules, entries: entries, suggestions: suggestions, chipVariant: chipVariant, formatRawValue: (value) => formatAxisValue(value, displayProperty), onCommitRaw: commitAxisValue, onSelectToken: (chosen) => {
             const records = swapTokens(editTarget ?? el, sideProperties.map((property) => ({
                 property,
                 newToken: chosen,
@@ -125,7 +127,7 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
             })));
             if (records.some(Boolean))
                 onAfterEdit?.();
-        }, onUnlink: commitAxisValue, leading: leading }));
+        }, onUnlink: commitAxisValue, leading: leading, blockedBy: blockedBy }));
 }
 function fieldDisplayValue(field) {
     return isCalcValue(field.authoredValue) ? field.value : field.authoredValue.trim() || field.value;

package/dist/inspector/styleEditors/Typography.js

@@ -9,6 +9,8 @@ import { getStateStyleValue } from "../shell/stateValue.js";
 import { setStyle, setStyles } from "../tokens/editActions.js";
 import { AtRuleIndicator, useFieldAtRules } from "../ui/AtRuleContext.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 export function Typography(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
@@ -56,6 +58,7 @@ function FontStyleField({ element, elements, editTarget, fontStyleRow, fontWeigh
     const atRules = fontStyleRow?.atRuleCandidates ?? fontStyleRow?.atRules
         ?? fontWeightRow?.atRuleCandidates ?? fontWeightRow?.atRules
         ?? (fontStyleAtRules.length > 0 ? fontStyleAtRules : fontWeightAtRules);
+    const blockedBy = inlineBlockedBy(elements, "font-style", "font-weight");
     const readValue = () => readFontStyle(element);
     const values = elements.map(readFontStyle);
     const isMixed = values.some((value) => value.weight !== values[0]?.weight || value.style !== values[0]?.style);
@@ -72,6 +75,8 @@ function FontStyleField({ element, elements, editTarget, fontStyleRow, fontWeigh
             ? FONT_STYLE_OPTIONS
             : [...FONT_STYLE_OPTIONS, { value: currentKey, label: currentLabel, ...current }];
     function handleChange(value) {
+        if (blockedBy)
+            return;
         const option = options.find((candidate) => candidate.value === value);
         if (!option || option.value === "mixed" || !("weight" in option) || !("style" in option))
             return;
@@ -82,7 +87,7 @@ function FontStyleField({ element, elements, editTarget, fontStyleRow, fontWeigh
         ]);
         onAfterEdit?.();
     }
-    return (_jsxs(ControlSurface, { className: "typography__field typography__field--font-style", "data-test": "typography-field", "data-property": "font-style", "aria-label": "Font style", title: "Font style", children: [_jsx("span", { className: "typography__field-icon", "aria-hidden": "true", children: _jsx(IconTypography, { size: "var(--icon-size-small)", stroke: 1.45 }) }), _jsx(Select, { appearance: "embedded", value: isMixed ? "mixed" : currentKey, options: options.map(({ value, label }) => ({ value, label })), onValueChange: handleChange, "data-test": "font-style-field" }), _jsx(AtRuleIndicator, { atRules: atRules })] }));
+    return (_jsxs(ControlSurface, { className: "typography__field typography__field--font-style", "data-test": "typography-field", "data-property": "font-style", "aria-label": "Font style", children: [_jsx("span", { className: "typography__field-icon", "aria-hidden": "true", children: _jsx(IconTypography, { size: "var(--icon-size-small)", stroke: 1.45 }) }), _jsx(Select, { appearance: "embedded", value: isMixed ? "mixed" : currentKey, options: options.map(({ value, label }) => ({ value, label })), onValueChange: handleChange, disabled: blockedBy !== null, "data-test": "font-style-field" }), _jsx(AtRuleIndicator, { atRules: atRules }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }));
 }
 function readFontStyle(element) {
     return {
@@ -104,6 +109,7 @@ function formatCustomFontStyle(weight, style) {
 }
 function AlignmentField({ property, label, element, elements, editTarget, defaultValue, options, onAfterEdit }) {
     const atRules = useFieldAtRules(property);
+    const blockedBy = inlineBlockedBy(elements, property);
     const readValues = () => elements.map((target) => getStateStyleValue(target, property, defaultValue));
     const initialValues = readValues();
     const isMixed = initialValues.some((value) => value !== initialValues[0]);
@@ -115,16 +121,18 @@ function AlignmentField({ property, label, element, elements, editTarget, defaul
         setCurrent(values.some((value) => value !== values[0]) ? null : normalizeAlignment(property, next));
     }, [defaultValue, element, elements, property]);
     function handleChange(value) {
+        if (blockedBy)
+            return;
         setCurrent(value);
         setStyle(editTarget, property, value);
         onAfterEdit?.();
     }
-    return (_jsxs("div", { className: "typography__alignment-field", children: [isMixed || current === null && elements.length > 1 ? (_jsx("span", { className: "typography__mixed", "data-test": `typography-mixed-${property}`, children: "Mixed" })) : null, _jsx(SegmentedControl, { value: current, "aria-label": label, "data-property": property, options: options.map((option) => ({
+    return (_jsxs("div", { className: "typography__alignment-field", children: [isMixed || current === null && elements.length > 1 ? (_jsx("span", { className: "typography__mixed", "data-test": `typography-mixed-${property}`, children: "Mixed" })) : null, _jsx(SegmentedControl, { value: current, "aria-label": label, "data-property": property, disabled: blockedBy !== null, options: options.map((option) => ({
                     value: option.value,
                     label: option.label,
                     icon: option.icon,
                     testId: `typography-align-${property}-${option.value}`,
-                })), onChange: handleChange }), _jsx(AtRuleIndicator, { atRules: atRules })] }));
+                })), onChange: handleChange }), _jsx(AtRuleIndicator, { atRules: atRules }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }));
 }
 function normalizeAlignment(property, value) {
     if (property !== "text-align")

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

@@ -0,0 +1,24 @@
+import type { GradientValue } from "./gradientValue.js";
+export type BackgroundMode = "solid" | "gradient" | "image";
+export interface BackgroundLayer {
+    mode: BackgroundMode;
+    baseColor: boolean;
+    gradient?: GradientValue;
+    value: string;
+    blend: string;
+    size: string;
+    repeat: string;
+    position: string;
+}
+export declare const BACKGROUND_BLEND_MODES: {
+    value: string;
+    label: string;
+}[];
+export declare function backgroundMode(value: string): BackgroundMode;
+export declare function newBackgroundLayer(): BackgroundLayer;
+/** CSS repeats shorter background property lists to match the image count. */
+export declare function readBackgroundLayers(read: (property: string, fallback: string) => string): BackgroundLayer[];
+export declare function backgroundDeclarations(layers: BackgroundLayer[]): {
+    property: string;
+    value: string;
+}[];

package/dist/inspector/styleEditors/backgroundLayers.js

@@ -0,0 +1,51 @@
+import { splitTopLevel } from "../../css/value-semantics/cssSyntax.js";
+import { isEmptyColorValue } from "./ColorPicker.js";
+export const BACKGROUND_BLEND_MODES = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
+    .map((value) => ({ value, label: value.replace(/-/g, " ").replace(/^./, (letter) => letter.toUpperCase()) }));
+export function backgroundMode(value) {
+    if (!value || value === "none")
+        return "solid";
+    return /(?:repeating-)?(?:linear|radial|conic)-gradient\(/.test(value) ? "gradient" : "image";
+}
+export function newBackgroundLayer() {
+    return { mode: "solid", baseColor: true, value: "#ffffff", blend: "normal", size: "auto", repeat: "repeat", position: "0% 0%" };
+}
+/** CSS repeats shorter background property lists to match the image count. */
+export function readBackgroundLayers(read) {
+    const image = read("background-image", "none");
+    const images = image === "none" ? [] : splitTopLevel(image, ",").map((value) => value.trim());
+    const listValue = (property, fallback, index) => {
+        const values = splitTopLevel(read(property, fallback), ",");
+        return values[index % values.length]?.trim() || fallback;
+    };
+    const layers = images.map((value, index) => {
+        const flat = /^linear-gradient\((.*)\)$/s.exec(value);
+        const colors = flat ? splitTopLevel(flat[1], ",").map((color) => color.trim()) : [];
+        const solid = colors.length === 2 && colors[0] === colors[1];
+        return {
+            mode: solid ? "solid" : backgroundMode(value),
+            baseColor: false,
+            value: solid ? colors[0] : value,
+            blend: listValue("background-blend-mode", "normal", index),
+            size: listValue("background-size", "auto", index),
+            repeat: listValue("background-repeat", "repeat", index),
+            position: listValue("background-position", "0% 0%", index),
+        };
+    });
+    const color = read("background-color", "transparent");
+    if (!isEmptyColorValue(color))
+        layers.push({ ...newBackgroundLayer(), value: color });
+    return layers;
+}
+export function backgroundDeclarations(layers) {
+    const base = layers.at(-1)?.mode === "solid" && layers.at(-1)?.baseColor ? layers.at(-1) : undefined;
+    const images = base ? layers.slice(0, -1) : layers;
+    return [
+        { property: "background-color", value: base?.value ?? "transparent" },
+        { property: "background-image", value: images.map((layer) => layer.mode === "solid" ? `linear-gradient(${layer.value}, ${layer.value})` : layer.value).join(", ") || "none" },
+        ...["blend", "size", "repeat", "position"].map((field) => ({
+            property: field === "blend" ? "background-blend-mode" : `background-${field}`,
+            value: images.map((layer) => layer[field]).join(", ") || newBackgroundLayer()[field],
+        })),
+    ];
+}

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

@@ -0,0 +1,17 @@
+export type GradientType = "linear" | "radial" | "conic";
+export interface GradientStop {
+    color: string;
+    position: number;
+}
+export interface GradientValue {
+    type: GradientType;
+    repeating: boolean;
+    angle: number;
+    /** Preserve the computed shape, origin, and interpolation method. */
+    prelude: string;
+    stops: GradientStop[];
+}
+export declare function defaultGradient(): GradientValue;
+/** Parse editable computed gradients. Leave unsupported syntax in the CSS field. */
+export declare function parseGradient(value: string): GradientValue | null;
+export declare function serializeGradient(gradient: GradientValue): string;

package/dist/inspector/styleEditors/gradientValue.js

@@ -0,0 +1,114 @@
+import { splitTopLevel, splitTopLevelWhitespace } from "../../css/value-semantics/cssSyntax.js";
+export function defaultGradient() {
+    return { type: "linear", repeating: false, angle: 90, prelude: "", stops: [
+            { color: "#dddddd", position: 0 }, { color: "#a4a4a4", position: 100 },
+        ] };
+}
+function angleDegrees(value) {
+    const match = /^([+-]?(?:\d*\.)?\d+)(deg|grad|rad|turn)$/.exec(value);
+    if (!match)
+        return null;
+    const number = Number(match[1]);
+    switch (match[2]) {
+        case "grad": return number * 0.9;
+        case "rad": return number * 180 / Math.PI;
+        case "turn": return number * 360;
+        default: return number;
+    }
+}
+/** Parse editable computed gradients. Leave unsupported syntax in the CSS field. */
+export function parseGradient(value) {
+    if (splitTopLevel(value, ",").length !== 1)
+        return null;
+    const match = /^(repeating-)?(linear|radial|conic)-gradient\((.*)\)$/s.exec(value.trim());
+    if (!match)
+        return null;
+    const type = match[2];
+    const parts = splitTopLevel(match[3], ",").map((part) => part.trim());
+    let prelude = "";
+    let angle = type === "linear" ? 180 : 0;
+    const first = parts[0] ?? "";
+    if (/^(?:to\s|[+-]?(?:\d*\.)?\d+(?:deg|grad|rad|turn)\b|circle\b|ellipse\b|closest-|farthest-|at\s|from\s|in\s)/.test(first)
+        || (type === "radial" && /\b(?:px|%)\b/.test(first))) {
+        prelude = parts.shift();
+        if (type === "linear") {
+            const direction = /^(to\s+(?:(?:left|right|top|bottom)(?:\s+|$)){1,2})/.exec(prelude)?.[0]?.trim();
+            if (direction) {
+                const directions = { top: 0, "top right": 45, "right top": 45, right: 90, "bottom right": 135, "right bottom": 135, bottom: 180, "bottom left": 225, "left bottom": 225, left: 270, "top left": 315, "left top": 315 };
+                // Corner directions depend on the element's aspect ratio. Keep them as CSS.
+                if (direction.slice(3).includes(" "))
+                    return null;
+                angle = directions[direction.slice(3)] ?? 180;
+                prelude = prelude.slice(direction.length).trim();
+            }
+            else if (!prelude.startsWith("in ")) {
+                const rawAngle = splitTopLevelWhitespace(prelude)[0];
+                const parsed = angleDegrees(rawAngle);
+                if (parsed === null)
+                    return null;
+                angle = parsed;
+                prelude = prelude.slice(rawAngle.length).trim();
+            }
+        }
+        else if (type === "conic" && prelude.startsWith("from ")) {
+            const rawAngle = splitTopLevelWhitespace(prelude)[1];
+            const parsed = angleDegrees(rawAngle);
+            if (parsed === null)
+                return null;
+            angle = parsed;
+            prelude = prelude.slice(5 + rawAngle.length).trim();
+        }
+    }
+    const stops = [];
+    for (const part of parts) {
+        const words = splitTopLevelWhitespace(part);
+        const positions = [];
+        while (words.length > 1) {
+            const last = words[words.length - 1];
+            const percent = /^([+-]?(?:\d*\.)?\d+)%$/.exec(last);
+            const degrees = type === "conic" ? angleDegrees(last) : null;
+            if (!percent && degrees === null && last !== "0")
+                break;
+            positions.unshift(percent ? Number(percent[1]) : degrees !== null ? degrees / 3.6 : 0);
+            words.pop();
+        }
+        const color = words.join(" ");
+        // Length stops and color hints cannot be represented by a percentage slider.
+        if (!color || words.length !== 1 || /^([+-]?\d|calc\(|var\()/i.test(color) || positions.length > 2)
+            return null;
+        if (positions.length)
+            positions.forEach((position) => stops.push({ color, position }));
+        else
+            stops.push({ color, position: null });
+    }
+    if (stops.length < 2)
+        return null;
+    stops[0].position ??= 0;
+    stops[stops.length - 1].position ??= 100;
+    let previous = stops[0].position;
+    for (const stop of stops) {
+        if (stop.position !== null) {
+            stop.position = Math.max(previous, stop.position);
+            previous = stop.position;
+        }
+    }
+    let start = 0;
+    while (start < stops.length - 1) {
+        let end = start + 1;
+        while (stops[end].position === null)
+            end++;
+        for (let index = start + 1; index < end; index++) {
+            stops[index].position = stops[start].position + (stops[end].position - stops[start].position) * (index - start) / (end - start);
+        }
+        start = end;
+    }
+    return { type, repeating: Boolean(match[1]), angle, prelude, stops: stops };
+}
+export function serializeGradient(gradient) {
+    const prefix = gradient.type === "linear" ? `${gradient.angle}deg`
+        : gradient.type === "conic" ? `from ${gradient.angle}deg` : "";
+    const prelude = [prefix, gradient.prelude].filter(Boolean).join(" ");
+    const stops = [...gradient.stops].sort((a, b) => a.position - b.position)
+        .map((stop) => `${stop.color} ${Number(stop.position.toFixed(3))}%`).join(", ");
+    return `${gradient.repeating ? "repeating-" : ""}${gradient.type}-gradient(${prelude ? `${prelude}, ` : ""}${stops})`;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Returns the inline-authored source when `el` carries the property — or a
+ * shorthand that sets it — in its `style` attribute. Managed previews can
+ * never beat inline styles in the cascade, so a non-null result means the
+ * field must present as blocked instead of accepting edits that silently
+ * revert (see `verifyPreview`'s "inline-style" conflict).
+ */
+export declare function inlineAuthoredValue(el: HTMLElement, property: string): string | null;
+/** First inline-authored source that blocks any of `properties` on any of `elements`. */
+export declare function inlineBlockedBy(elements: readonly HTMLElement[], ...properties: readonly string[]): string | null;

package/dist/inspector/styleEditors/inlineAuthored.js

@@ -0,0 +1,114 @@
+import { isLayoutPreview } from "./layoutPreviewState.js";
+/**
+ * Shorthands that also author the keyed longhand when present in a `style`
+ * attribute. Managed-stylesheet previews lose the cascade to any of these,
+ * so fields must treat the longhand as inline-blocked either way.
+ */
+const SHORTHAND_SOURCES = {
+    "font-family": ["font"],
+    "font-style": ["font"],
+    "font-weight": ["font"],
+    "font-size": ["font"],
+    "line-height": ["font"],
+    "background-color": ["background"],
+    "background-image": ["background"],
+    "row-gap": ["gap"],
+    "column-gap": ["gap"],
+    "flex-grow": ["flex"],
+    "flex-shrink": ["flex"],
+    "flex-basis": ["flex"],
+    "flex-direction": ["flex-flow"],
+    "flex-wrap": ["flex-flow"],
+    "align-content": ["place-content"],
+    "justify-content": ["place-content"],
+    "align-items": ["place-items"],
+    "justify-items": ["place-items"],
+    "align-self": ["place-self"],
+    "justify-self": ["place-self"],
+    "border-width": ["border"],
+    "border-style": ["border"],
+    "border-color": ["border"],
+    "border-top-left-radius": ["border-radius"],
+    "border-top-right-radius": ["border-radius"],
+    "border-bottom-right-radius": ["border-radius"],
+    "border-bottom-left-radius": ["border-radius"],
+    "border-top-width": ["border-top", "border-width", "border"],
+    "border-right-width": ["border-right", "border-width", "border"],
+    "border-bottom-width": ["border-bottom", "border-width", "border"],
+    "border-left-width": ["border-left", "border-width", "border"],
+    "border-top-style": ["border-top", "border-style", "border"],
+    "border-right-style": ["border-right", "border-style", "border"],
+    "border-bottom-style": ["border-bottom", "border-style", "border"],
+    "border-left-style": ["border-left", "border-style", "border"],
+    "border-top-color": ["border-top", "border-color", "border"],
+    "border-right-color": ["border-right", "border-color", "border"],
+    "border-bottom-color": ["border-bottom", "border-color", "border"],
+    "border-left-color": ["border-left", "border-color", "border"],
+    "margin-top": ["margin", "margin-block", "margin-block-start", "margin-block-end"],
+    "margin-right": ["margin", "margin-inline", "margin-inline-start", "margin-inline-end"],
+    "margin-bottom": ["margin", "margin-block", "margin-block-start", "margin-block-end"],
+    "margin-left": ["margin", "margin-inline", "margin-inline-start", "margin-inline-end"],
+    "padding-top": ["padding", "padding-block", "padding-block-start", "padding-block-end"],
+    "padding-right": ["padding", "padding-inline", "padding-inline-start", "padding-inline-end"],
+    "padding-bottom": ["padding", "padding-block", "padding-block-start", "padding-block-end"],
+    "padding-left": ["padding", "padding-inline", "padding-inline-start", "padding-inline-end"],
+    top: ["inset", "inset-block", "inset-block-start", "inset-block-end"],
+    right: ["inset", "inset-inline", "inset-inline-start", "inset-inline-end"],
+    bottom: ["inset", "inset-block", "inset-block-start", "inset-block-end"],
+    left: ["inset", "inset-inline", "inset-inline-start", "inset-inline-end"],
+    "grid-template-columns": ["grid-template", "grid"],
+    "grid-template-rows": ["grid-template", "grid"],
+    "grid-template-areas": ["grid-template", "grid"],
+    "grid-auto-columns": ["grid-auto", "grid"],
+    "grid-auto-rows": ["grid-auto", "grid"],
+    "grid-auto-flow": ["grid-auto", "grid"],
+    "grid-row": ["grid-area", "grid"],
+    "grid-column": ["grid-area", "grid"],
+    "grid-row-start": ["grid-row", "grid-area", "grid"],
+    "grid-row-end": ["grid-row", "grid-area", "grid"],
+    "grid-column-start": ["grid-column", "grid-area", "grid"],
+    "grid-column-end": ["grid-column", "grid-area", "grid"],
+};
+/**
+ * Longhands edited together by one linked field. The field is blocked when
+ * any of them is inline-authored, even if the shorthand itself is not.
+ */
+const LINKED_LONGHANDS = {
+    "border-width": ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"],
+    "border-style": ["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"],
+    "border-color": ["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"],
+    "border-radius": ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"],
+};
+/**
+ * Returns the inline-authored source when `el` carries the property — or a
+ * shorthand that sets it — in its `style` attribute. Managed previews can
+ * never beat inline styles in the cascade, so a non-null result means the
+ * field must present as blocked instead of accepting edits that silently
+ * revert (see `verifyPreview`'s "inline-style" conflict).
+ */
+export function inlineAuthoredValue(el, property) {
+    if (isLayoutPreview(el, property))
+        return null;
+    for (const source of [property, ...(SHORTHAND_SOURCES[property] ?? [])]) {
+        const value = el.style.getPropertyValue(source).trim();
+        if (value)
+            return `${source}: ${value}`;
+    }
+    for (const longhand of LINKED_LONGHANDS[property] ?? []) {
+        const value = inlineAuthoredValue(el, longhand);
+        if (value)
+            return value;
+    }
+    return null;
+}
+/** First inline-authored source that blocks any of `properties` on any of `elements`. */
+export function inlineBlockedBy(elements, ...properties) {
+    for (const property of properties) {
+        for (const el of elements) {
+            const value = inlineAuthoredValue(el, property);
+            if (value)
+                return value;
+        }
+    }
+    return null;
+}

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

@@ -4,14 +4,6 @@
  */
 export declare function meaningfulLayoutValue(el: HTMLElement, property: string): string;
 export declare function readAuthoredStyleValue(el: HTMLElement, property: string): string | null;
-/**
- * Returns the inline-authored source when `el` carries the property — or a
- * shorthand that sets it — in its `style` attribute. Managed previews can
- * never beat inline styles in the cascade, so a non-null result means the
- * field must present as blocked instead of accepting edits that silently
- * revert (see `verifyPreview`'s "inline-style" conflict).
- */
-export declare function inlineAuthoredValue(el: HTMLElement, property: string): string | null;
 export interface LayoutValue {
     property: string;
     authored: string | null;

package/dist/inspector/styleEditors/layoutValue.js

@@ -2,7 +2,6 @@ import { getActiveStyleState } from "../shell/styleState.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
 import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
-import { isLayoutPreview } from "./layoutPreviewState.js";
 const DEFAULT_LAYOUT_VALUES = {
     width: "auto",
     height: "auto",
@@ -48,47 +47,6 @@ export function readAuthoredStyleValue(el, property) {
     const inline = el.style.getPropertyValue(property).trim();
     return inline || null;
 }
-/**
- * Shorthands that also author the keyed longhand when present in a `style`
- * attribute. Managed-stylesheet previews lose the cascade to any of these,
- * so fields must treat the longhand as inline-blocked either way.
- */
-const INLINE_SHORTHAND_SOURCES = {
-    "row-gap": ["gap"],
-    "column-gap": ["gap"],
-    "margin-top": ["margin"],
-    "margin-right": ["margin"],
-    "margin-bottom": ["margin"],
-    "margin-left": ["margin"],
-    "padding-top": ["padding"],
-    "padding-right": ["padding"],
-    "padding-bottom": ["padding"],
-    "padding-left": ["padding"],
-    top: ["inset"],
-    right: ["inset"],
-    bottom: ["inset"],
-    left: ["inset"],
-};
-/**
- * Returns the inline-authored source when `el` carries the property — or a
- * shorthand that sets it — in its `style` attribute. Managed previews can
- * never beat inline styles in the cascade, so a non-null result means the
- * field must present as blocked instead of accepting edits that silently
- * revert (see `verifyPreview`'s "inline-style" conflict).
- */
-export function inlineAuthoredValue(el, property) {
-    if (isLayoutPreview(el, property))
-        return null;
-    const direct = el.style.getPropertyValue(property).trim();
-    if (direct)
-        return `${property}: ${direct}`;
-    for (const shorthand of INLINE_SHORTHAND_SOURCES[property] ?? []) {
-        const value = el.style.getPropertyValue(shorthand).trim();
-        if (value)
-            return `${shorthand}: ${value}`;
-    }
-    return null;
-}
 /**
  * Reads both representations needed by a layout editor. Authored CSS is the
  * editable source of truth; computed CSS is only the browser preview/fallback.

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

@@ -7,8 +7,8 @@ export declare function nudgeCssValue(property: string, rawValue: string, direct
 /** Returns whether a style field exposes the horizontal drag nudge affordance. */
 export declare function supportsDragNudge(property: string): boolean;
 /**
- * Applies one regular nudge per four horizontal pointer pixels and one large
- * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * 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.
  */

package/dist/inspector/styleEditors/nudgeValue.js

@@ -2,14 +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_PIXELS_PER_STEP = 4;
-const LARGE_DRAG_PIXELS_PER_STEP = 2;
-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)
@@ -25,8 +27,8 @@ export function supportsDragNudge(property) {
     return DRAG_NUDGE_PROPERTY.test(property);
 }
 /**
- * Applies one regular nudge per four horizontal pointer pixels and one large
- * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * 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.
  */
@@ -59,11 +61,11 @@ export function canNudgeCssValueByDrag(property, rawValue) {
 }
 /** 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) {
@@ -118,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)
@@ -134,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");
 }