nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/styleEditors/BoxShadowEditor.js

@@ -1,13 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus } from "@tabler/icons-react";
-import { TokenField } from "../tokens/TokenField.js";
-import { FieldRow } from "../ui/FieldRow.js";
+import { useEffect, useState } from "react";
+import { IconBoxMargin, IconLetterX, IconLetterY, IconMinus, IconPlus } from "@tabler/icons-react";
+import { splitTopLevel, splitTopLevelWhitespace } from "../../css/value-semantics/cssSyntax.js";
+import { interpretTokenValue } from "../../css/value-semantics/tokenInterpretation.js";
+import { applyColorOpacity, replaceColorPreservingOpacity, withColorOpacity } from "../../css/value-semantics/colorSemantics.js";
+import { colorValueToHex, TokenField, TokenValueField } from "../tokens/TokenField.js";
+import { setStyle } from "../tokens/editActions.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { hasAuthoredProperty } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { metadataFor } from "./rowLookup.js";
+import { completeCssValue } from "./completeCssValue.js";
+import { valuePolicyFor } from "./valuePolicy.js";
+const LENGTH = /^(?:[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+)?|(?:calc|min|max|clamp)\(.+\))$/i;
+const DIMENSIONS = [
+    { label: "X Offset", description: "X offset", Icon: IconLetterX },
+    { label: "Y Offset", description: "Y offset", Icon: IconLetterY },
+    { label: "Blur", description: "Blur", Icon: ShadowBlurIcon },
+    { label: "Spread", description: "Spread", Icon: IconBoxMargin },
+];
+function ShadowBlurIcon({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", "aria-hidden": "true", children: [_jsx("circle", { opacity: "0.5", cx: "7.55555", cy: "3.11111", r: "1.11111" }), _jsx("circle", { cx: "7.55555", cy: "7.55555", r: "1.11111" }), _jsx("circle", { cx: "7.55555", cy: "12", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "7.55555", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "7.55555", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "12", cy: "3.11111", r: "1.11111" }), _jsx("circle", { cx: "12", cy: "7.55555", r: "1.11111" }), _jsx("circle", { cx: "12", cy: "12", r: "1.11111" }), _jsx("circle", { cx: "12", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "12", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "16.4444", cy: "3.11111", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "16.4444", cy: "7.55555", r: "1.11111" }), _jsx("circle", { cx: "16.4444", cy: "12", r: "1.11111" }), _jsx("circle", { cx: "16.4444", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "16.4444", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "20.8889", cy: "3.11111", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "20.8889", cy: "7.55555", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "20.8889", cy: "12", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "20.8889", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "20.8889", cy: "20.8889", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "3.11111", cy: "3.11111", r: "1.11111" }), _jsx("circle", { opacity: "0.5", cx: "3.11111", cy: "7.55555", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "3.11111", cy: "12", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "3.11111", cy: "16.4444", r: "1.11111" }), _jsx("circle", { opacity: "0.3", cx: "3.11111", cy: "20.8889", r: "1.11111" })] }));
+}
+function defaultShadow() {
+    return { lengths: ["0", "2px", "3px", "0"], color: "rgb(0 0 0 / 20%)", inset: false };
+}
+function parseShadows(value, entries) {
+    if (!value || value === "none")
+        return [];
+    const result = [];
+    for (const layer of splitTopLevel(value, ",")) {
+        const parts = splitTopLevelWhitespace(layer.trim());
+        const isLength = (part) => LENGTH.test(resolveToken(part, entries));
+        const lengths = parts.filter(isLength);
+        const colors = parts.filter((part) => part !== "inset" && !isLength(part));
+        if (lengths.length < 2 || lengths.length > 4 || colors.length > 1)
+            return null;
+        result.push({
+            lengths: [lengths[0], lengths[1], lengths[2] ?? "0", lengths[3] ?? "0"],
+            color: colors[0] ?? "currentColor",
+            inset: parts.includes("inset"),
+        });
+    }
+    return result.length ? result : null;
+}
+function tokenName(value) {
+    return /^var\((--[\w-]+)\)$/.exec(value)?.[1] ?? null;
+}
+function resolveToken(value, entries) {
+    const name = tokenName(value);
+    return entries.find((entry) => entry.name === name)?.value ?? value;
+}
+function serializeShadows(layers) {
+    if (layers.length === 0)
+        return "none";
+    return layers.map((layer) => `${layer.inset ? "inset " : ""}${layer.lengths.join(" ")} ${layer.color}`).join(", ");
+}
 export function BoxShadowEditor(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
@@ -15,10 +68,85 @@ export function BoxShadowEditor(props) {
     const allEntries = entries ?? getNudgeUiTokenEntries();
     const tokenRow = tokenRows.find((row) => row.property === "box-shadow") ?? null;
     const elements = selection?.domElements ?? [el];
+    const colorContext = { tokenTable: Object.fromEntries(allEntries.map((entry) => [entry.name, entry])) };
+    const computed = getStateStyleValue(el, "box-shadow");
+    const source = tokenRow?.authored ?? tokenRow?.declaredValue ?? computed;
+    const [draft, setDraft] = useState(null);
+    useEffect(() => setDraft(null), [el, source]);
+    const activeDraft = draft?.element === el && draft.source === source ? draft : null;
+    const value = activeDraft?.value ?? source;
+    // A row can reference a color or length token without the entire shadow being token-backed.
+    const wholeShadowToken = tokenRow?.tokenName
+        && value.trim().startsWith("var(")
+        && splitTopLevelWhitespace(value.trim()).length === 1;
+    const selectedProperty = selection && selection.elements.length > 1 ? selection.getProperty("box-shadow") : null;
+    const mixed = selectedProperty?.value.kind === "mixed";
+    const layers = mixed ? null : parseShadows(value, allEntries)
+        ?? parseShadows(tokenRow?.resolvedValue ?? computed, allEntries);
+    const blockedBy = inlineBlockedBy(elements, "box-shadow");
     const hasShadow = hasAuthoredProperty(selection, "box-shadow", tokenRow) || elements.some((element) => {
         const value = getStateStyleValue(element, "box-shadow");
         return value !== "" && value !== "none";
     });
     const visibility = useFieldVisibility(elements, "box-shadow", hasShadow);
-    return (_jsxs("div", { className: "editor", "data-test": "box-shadow-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Box Shadow" }), !visibility.visible ? (_jsx(IconButton, { variant: "quiet", label: "Add Box Shadow", "data-test": "add-shadow", onClick: visibility.show, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : null] }), visibility.visible ? _jsx("div", { className: "property", children: _jsx(FieldRow, { label: "Box Shadow", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "box-shadow", selection: selection, tokenRow: tokenRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }) }) : null] }));
+    function commitLayers(nextLayers) {
+        if (blockedBy)
+            return false;
+        const nextValue = serializeShadows(nextLayers);
+        if (!setStyle(editTarget, "box-shadow", nextValue, selection && selection.elements.length > 1 ? undefined : metadataFor(tokenRow)))
+            return false;
+        setDraft({ element: el, source, value: nextValue });
+        onAfterEdit?.();
+        return true;
+    }
+    function commitLayer(index, next) {
+        if (!layers)
+            return;
+        commitLayers(layers.map((layer, layerIndex) => layerIndex === index ? next : layer));
+    }
+    function addShadow() {
+        if (!layers)
+            return;
+        if (commitLayers([...layers, defaultShadow()]))
+            visibility.show();
+    }
+    function removeShadow(index) {
+        if (!layers)
+            return;
+        const remaining = layers.filter((_, layerIndex) => layerIndex !== index);
+        if (commitLayers(remaining) && remaining.length === 0)
+            visibility.hide();
+    }
+    function commitColor(index, layer, color) {
+        const result = replaceColorPreservingOpacity(layer.color, color, colorContext);
+        if (result.ok)
+            commitLayer(index, { ...layer, color: result.value });
+    }
+    return (_jsxs("div", { className: "editor box-shadow-editor", "data-test": "box-shadow-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Box Shadow" }), _jsx(IconButton, { variant: "quiet", label: "Add Box Shadow", "data-test": "add-shadow", disabled: blockedBy !== null || layers === null, onClick: addShadow, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })] }), visibility.visible ? _jsxs("div", { className: "box-shadow-editor__layers", children: [!layers || (wholeShadowToken && !activeDraft) ? _jsx(ControlSurface, { children: _jsx(TokenField, { property: "box-shadow", selection: selection, tokenRow: tokenRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, editMetadata: metadataFor(tokenRow) }) }) : null, layers?.map((layer, index) => {
+                        const color = interpretTokenValue(layer.color, { table: colorContext.tokenTable });
+                        const hex = color.tokenName && color.opacity ? colorValueToHex(color.resolvedValue) : null;
+                        const previewResult = hex && color.opacity ? withColorOpacity(hex, color.opacity.value) : null;
+                        const preview = previewResult?.ok ? previewResult.value : color.resolvedValue;
+                        return (_jsxs("div", { className: "box-shadow-editor__layer", role: "group", "aria-label": `Shadow ${index + 1}`, children: [_jsx("div", { className: "box-shadow-editor__dimensions", children: DIMENSIONS.map(({ label, description, Icon }, dimension) => (_jsx(Tooltip, { content: description, disableFocus: true, children: _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: "box-shadow", semanticSlot: "length", nudgeProperty: dimension === 2 ? "padding-top" : "margin-left", domElement: el, committedValue: layer.lengths[dimension].replace(/px$/i, ""), activeTokenName: tokenName(layer.lengths[dimension]), resolvedValue: resolveToken(layer.lengths[dimension], allEntries), entries: allEntries, blockedBy: blockedBy, label: label, inputDataTest: `shadow-${index}-${dimension}`, chipVariant: "small", leading: _jsx(Icon, { size: 16, stroke: 1.8, "aria-hidden": "true" }), formatRawValue: (raw) => completeCssValue(raw, valuePolicyFor("border-width")), onCommitRaw: (input) => {
+                                                    const raw = completeCssValue(input, valuePolicyFor("border-width"));
+                                                    if (!LENGTH.test(raw) || (dimension === 2 && /^-/.test(raw)))
+                                                        return;
+                                                    const lengths = [...layer.lengths];
+                                                    lengths[dimension] = raw;
+                                                    commitLayer(index, { ...layer, lengths });
+                                                }, onSelectToken: (token) => {
+                                                    const lengths = [...layer.lengths];
+                                                    lengths[dimension] = `var(${token.name})`;
+                                                    commitLayer(index, { ...layer, lengths });
+                                                }, onUnlink: (raw) => {
+                                                    const lengths = [...layer.lengths];
+                                                    lengths[dimension] = raw;
+                                                    commitLayer(index, { ...layer, lengths });
+                                                } }) }) }, label))) }), _jsx(IconButton, { variant: "quiet", className: "box-shadow-editor__remove", label: `Remove Shadow ${index + 1}`, "data-test": `remove-shadow-${index}`, disabled: blockedBy !== null, onClick: () => removeShadow(index), children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }), _jsx(Tooltip, { content: "Color and opacity", disableFocus: true, children: _jsx(ControlSurface, { className: "box-shadow-editor__color", children: _jsx(TokenValueField, { property: "box-shadow", semanticSlot: "color", domElement: el, isColor: true, committedValue: tokenName(layer.color) || layer.color === "currentColor" ? layer.color : colorValueToHex(layer.color) ?? layer.color, activeTokenName: color.tokenName, resolvedValue: preview, entries: allEntries, blockedBy: blockedBy, label: "Shadow Color", inputDataTest: `shadow-${index}-color`, opacity: color.opacity, onCommitRaw: (color) => commitColor(index, layer, color), onSelectToken: (token) => commitColor(index, layer, `var(${token.name})`), onUnlink: (color) => commitLayer(index, { ...layer, color }), onCommitOpacity: (opacity) => {
+                                                const result = applyColorOpacity(layer.color, opacity);
+                                                if (!result.ok)
+                                                    return false;
+                                                commitLayer(index, { ...layer, color: result.value });
+                                            } }) }) })] }, index));
+                    })] }) : null] }));
 }

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

@@ -1,10 +1,14 @@
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type { TokenEntry } from "../../css/model/index.js";
 import type { SelectedElement } from "../selection/selectionStore.js";
 import type { ResolvedProperty } from "../../css/model/index.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface ColorPickerProps {
     element: SelectedElement;
+    title?: string;
+    toolbar?: ReactNode;
+    /** Overrides initial presence for sections that use computed paint. */
+    present?: boolean;
     selection?: StyleSelection | null;
     property?: string;
     entries?: TokenEntry[];

package/dist/inspector/styleEditors/ColorPicker.js

@@ -5,10 +5,13 @@ import { TokenField } from "../tokens/TokenField.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { IconButton } from "../ui/IconButton.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { setStyle } from "../tokens/editActions.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { hasAuthoredProperty, isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
 function colorSectionTitle(property) {
     if (property === "background-color")
         return "Background Color";
@@ -30,19 +33,22 @@ export function isEmptyColorValue(value) {
         && isZeroCssValue(components[3]);
 }
 export function ColorPicker(props) {
-    const { element, selection, property = "color", entries, tokenRow, onAfterEdit } = props;
+    const { element, selection, property = "color", entries, tokenRow, onAfterEdit, title, toolbar, present } = props;
     const el = element.domElement;
     const selectedElements = selection?.domElements ?? [el];
     const target = selection?.target ?? el;
+    const blockedBy = inlineBlockedBy(selectedElements, property);
     const allEntries = entries ?? getNudgeUiTokenEntries();
-    const hasColor = hasAuthoredProperty(selection, property, tokenRow)
-        || selectedElements.some((selected) => !isEmptyColorValue(getStateStyleValue(selected, property)));
+    const hasColor = present ?? (hasAuthoredProperty(selection, property, tokenRow)
+        || selectedElements.some((selected) => !isEmptyColorValue(getStateStyleValue(selected, property))));
     const visibility = useFieldVisibility(selectedElements, property, hasColor);
     const showTokenField = visibility.visible;
     function handleRemoveColor() {
+        if (blockedBy)
+            return;
         setStyle(target, property, "transparent");
         visibility.hide();
         onAfterEdit?.();
     }
-    return (_jsxs("div", { className: `editor`, "data-test": "color-picker", "data-property": property, children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: colorSectionTitle(property) }), showTokenField ? (_jsx(IconButton, { variant: "quiet", label: `Remove ${colorSectionTitle(property)}`, "data-test": "remove-color", className: "color__remove", onClick: handleRemoveColor, children: _jsx(IconMinus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: `Add ${colorSectionTitle(property)}`, "data-test": "add-color", className: "color__add", onClick: visibility.show, children: _jsx(IconPlus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }))] }), showTokenField && (_jsx("div", { className: "color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: property, tokenRow: tokenRow, selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit }) }) }))] }));
+    return (_jsxs("div", { className: `editor`, "data-test": "color-picker", "data-property": property, children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: title ?? colorSectionTitle(property) }), showTokenField ? (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), children: _jsx(IconButton, { variant: "quiet", label: `Remove ${colorSectionTitle(property)}`, "data-test": "remove-color", className: "color__remove", disabled: blockedBy !== null, onClick: handleRemoveColor, children: _jsx(IconMinus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: `Add ${colorSectionTitle(property)}`, "data-test": "add-color", className: "color__add", onClick: visibility.show, children: _jsx(IconPlus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }))] }), showTokenField && toolbar, showTokenField && (_jsx("div", { className: "color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: property, tokenRow: tokenRow, selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit }) }) }))] }));
 }

package/dist/inspector/styleEditors/GapField.js

@@ -1,12 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TokenField } from "../tokens/TokenField.js";
 import { formatInspectorLabel } from "../ui/labels.js";
-import { inlineAuthoredValue, meaningfulLayoutValue } from "./layoutValue.js";
-import { LayoutBlockedIndicator } from "./LayoutBlockedIndicator.js";
+import { meaningfulLayoutValue } from "./layoutValue.js";
 export const GAP_PRESETS = ["0", "0.25rem", "0.5rem", "0.75rem", "1rem", "1.5rem", "2rem", "3rem"];
 /** Renders a gap value with a token chip or the legacy raw-value fallback. */
 export function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, onAfterEdit, }) {
     const tokenRow = tokenRows.find((row) => row.property === property) ?? null;
-    const blockedBy = inlineAuthoredValue(el, property);
-    return (_jsxs("span", { className: `layout-combo${blockedBy ? " layout-combo--blocked" : ""}`, "data-test": "layout-combo", "data-property": property, children: [_jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRow, initialValue: meaningfulLayoutValue(el, property), domElement: el, editTarget: editTarget, entries: entries, suggestions: GAP_PRESETS, leading: leading, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", disabled: blockedBy !== null, onAfterEdit: onAfterEdit }), blockedBy ? _jsx(LayoutBlockedIndicator, { blockedBy: blockedBy }) : null] }));
+    return (_jsx("span", { className: "layout-combo", "data-test": "layout-combo", "data-property": property, children: _jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRow, initialValue: meaningfulLayoutValue(el, property), domElement: el, editTarget: editTarget, entries: entries, suggestions: GAP_PRESETS, leading: leading, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", inlineWarningDataTest: "layout-combo-blocked", inlineWarningTooltipDataTest: "layout-combo-blocked-tooltip", onAfterEdit: onAfterEdit }) }));
 }

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

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { EditTarget } from "../selection/editTarget.js";
+import { type EditTarget } from "../selection/editTarget.js";
 export interface GridChildSectionProps {
     domElement: HTMLElement;
     editTarget?: EditTarget;

package/dist/inspector/styleEditors/GridChildSection.js

@@ -5,11 +5,15 @@ import { ControlSurface } from "../ui/ControlSurface.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { SegmentedControl } from "../ui/SegmentedControl.js";
 import { TextInput } from "../ui/TextInput.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
 import { commitGridAxisPlacement, commitGridChildAlignment, readGridAxisPlacement, readGridChildAlignment, } from "./gridChildModel.js";
+import { targetElements } from "../selection/editTarget.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 function readAxis(el, axis) {
     return { placement: readGridAxisPlacement(el, axis) };
 }
-function AxisPlacementRow({ axis, label, state, onStart }) {
+function AxisPlacementRow({ axis, label, state, elements, onStart }) {
+    const blockedBy = inlineBlockedBy(elements, `grid-${axis}-start`, `grid-${axis}-end`);
     const [draft, setDraft] = useState(state.placement.start);
     const draftRef = useRef(draft);
     useEffect(() => {
@@ -21,13 +25,15 @@ function AxisPlacementRow({ axis, label, state, onStart }) {
         setDraft(next);
     }
     function commit() {
+        if (blockedBy)
+            return;
         const next = draftRef.current.trim() || "auto";
         updateDraft(next);
         if (next !== state.placement.start)
             onStart(next);
     }
     const AxisIcon = axis === "column" ? IconColumns2 : IconLayoutRows;
-    return (_jsx(FieldRow, { label: label, className: `field-row--stacked layout__grid-child-placement layout__grid-child-placement--${axis}`, "data-test": `layout-grid-child-${axis}`, children: _jsxs(ControlSurface, { children: [_jsx(AxisIcon, { className: "layout__grid-child-placement-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsx(TextInput, { appearance: "embedded", value: draft, "data-test": `layout-grid-child-${axis}-start`, "aria-label": label, onChange: (event) => updateDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
+    return (_jsx(FieldRow, { label: label, className: `field-row--stacked layout__grid-child-placement layout__grid-child-placement--${axis}`, "data-test": `layout-grid-child-${axis}`, children: _jsxs(ControlSurface, { children: [_jsx(AxisIcon, { className: "layout__grid-child-placement-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsx(TextInput, { appearance: "embedded", value: draft, "data-test": `layout-grid-child-${axis}-start`, "aria-label": label, disabled: blockedBy !== null, onChange: (event) => updateDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
                         if (event.key === "Escape") {
                             event.preventDefault();
                             updateDraft(state.placement.start);
@@ -37,10 +43,12 @@ function AxisPlacementRow({ axis, label, state, onStart }) {
                             event.preventDefault();
                             event.currentTarget.blur();
                         }
-                    } })] }) }));
+                    } }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }) }));
 }
-function AlignmentControl({ axis, value, onChange }) {
+function AlignmentControl({ axis, value, elements, onChange }) {
     const horizontal = axis === "h";
+    const property = horizontal ? "justify-self" : "align-self";
+    const blockedBy = inlineBlockedBy(elements, property);
     const options = horizontal
         ? [
             { value: "start", label: "Align left", icon: _jsx(IconAlignBoxLeftMiddle, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
@@ -54,10 +62,10 @@ function AlignmentControl({ axis, value, onChange }) {
             { value: "end", label: "Align bottom", icon: _jsx(IconAlignBoxCenterBottom, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
             { value: "stretch", label: "Stretch vertically", icon: _jsx(IconAlignBoxCenterStretch, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
         ];
-    return (_jsx(FieldRow, { label: horizontal ? "Horizontal alignment" : "Vertical alignment", hideLabel: true, className: `field-row--stacked layout__grid-child-alignment layout__grid-child-alignment--${axis}`, "data-test": `layout-grid-child-align-${axis}`, children: _jsx(SegmentedControl, { value: value === "auto" ? null : value, "aria-label": horizontal ? "Horizontal alignment" : "Vertical alignment", "data-test": `layout-grid-child-select-${horizontal ? "justify-self" : "align-self"}`, className: "layout__grid-child-alignment-control", options: options.map((option) => ({
-                ...option,
-                testId: `layout-grid-child-align-${axis}-${option.value}`,
-            })), onChange: onChange, allowDeselect: true, onDeselect: () => onChange("auto") }) }));
+    return (_jsxs(FieldRow, { label: horizontal ? "Horizontal alignment" : "Vertical alignment", hideLabel: true, className: `field-row--stacked layout__grid-child-alignment layout__grid-child-alignment--${axis}`, "data-test": `layout-grid-child-align-${axis}`, children: [_jsx(SegmentedControl, { value: value === "auto" ? null : value, "aria-label": horizontal ? "Horizontal alignment" : "Vertical alignment", "data-test": `layout-grid-child-select-${property}`, className: "layout__grid-child-alignment-control", disabled: blockedBy !== null, options: options.map((option) => ({
+                    ...option,
+                    testId: `layout-grid-child-align-${axis}-${option.value}`,
+                })), onChange: onChange, allowDeselect: true, onDeselect: () => onChange("auto") }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }));
 }
 /**
  * Grid child controls expose only placement starts and per-axis alignment.
@@ -66,6 +74,7 @@ function AlignmentControl({ axis, value, onChange }) {
  */
 export function GridChildSection({ domElement: el, editTarget, revision = 0, onAfterEdit, }) {
     const target = editTarget ?? el;
+    const elements = targetElements(target);
     const [column, setColumn] = useState(() => readAxis(el, "column"));
     const [row, setRow] = useState(() => readAxis(el, "row"));
     const [alignH, setAlignH] = useState(() => readGridChildAlignment(el, "h"));
@@ -87,5 +96,5 @@ export function GridChildSection({ domElement: el, editTarget, revision = 0, onA
         if (commitGridChildAlignment(target, axis, value).length > 0)
             handleAfterEdit();
     }
-    return (_jsxs("div", { className: "layout__group layout__grid-child", "data-test": "layout-grid-child", children: [_jsx("div", { className: "editor__title", children: "Grid Child" }), _jsxs("div", { className: "layout__grid-child-fields", "data-test": "layout-grid-child-fields", children: [_jsx(AxisPlacementRow, { axis: "column", label: "Column", state: column, onStart: (start) => handleStart("column", start) }), _jsx(AxisPlacementRow, { axis: "row", label: "Row", state: row, onStart: (start) => handleStart("row", start) }), _jsx(AlignmentControl, { axis: "v", value: alignV, onChange: (value) => handleAlignment("v", value) }), _jsx(AlignmentControl, { axis: "h", value: alignH, onChange: (value) => handleAlignment("h", value) })] })] }));
+    return (_jsxs("div", { className: "layout__group layout__grid-child", "data-test": "layout-grid-child", children: [_jsx("div", { className: "editor__title", children: "Grid Child" }), _jsxs("div", { className: "layout__grid-child-fields", "data-test": "layout-grid-child-fields", children: [_jsx(AxisPlacementRow, { axis: "column", label: "Column", state: column, elements: elements, onStart: (start) => handleStart("column", start) }), _jsx(AxisPlacementRow, { axis: "row", label: "Row", state: row, elements: elements, onStart: (start) => handleStart("row", start) }), _jsx(AlignmentControl, { axis: "v", value: alignV, elements: elements, onChange: (value) => handleAlignment("v", value) }), _jsx(AlignmentControl, { axis: "h", value: alignH, elements: elements, onChange: (value) => handleAlignment("h", value) })] })] }));
 }

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

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { EditTarget } from "../selection/editTarget.js";
+import { type EditTarget } from "../selection/editTarget.js";
 export declare const GRID_PICKER_MAX_COLUMNS = 12;
 export declare const GRID_PICKER_MAX_ROWS = 8;
 export interface GridPickerProps {

package/dist/inspector/styleEditors/GridPicker.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { getLayoutValue } from "./layoutValue.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 import { setStyles } from "../tokens/editActions.js";
+import { targetElements } from "../selection/editTarget.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
 export const GRID_PICKER_MAX_COLUMNS = 12;
 export const GRID_PICKER_MAX_ROWS = 8;
 function clampDimension(value, max) {
@@ -96,6 +99,7 @@ export function GridPicker({ domElement: el, editTarget, revision = 0, onAfterEd
     const [popoverPosition, setPopoverPosition] = useState(null);
     const pickerRef = useRef(null);
     const triggerRef = useRef(null);
+    const blockedBy = inlineBlockedBy(targetElements(editTarget ?? el), "grid-template-columns", "grid-template-rows");
     useEffect(() => {
         setDimensions(readDimensions(el));
         setHovered(null);
@@ -143,6 +147,8 @@ export function GridPicker({ domElement: el, editTarget, revision = 0, onAfterEd
         };
     }, [open]);
     function choose(columns, rows) {
+        if (blockedBy)
+            return;
         const next = {
             columns: clampDimension(columns, GRID_PICKER_MAX_COLUMNS),
             rows: clampDimension(rows, GRID_PICKER_MAX_ROWS),
@@ -165,10 +171,10 @@ export function GridPicker({ domElement: el, editTarget, revision = 0, onAfterEd
                 setOpen(false);
                 setHovered(null);
             }
-        }, children: [_jsx("button", { type: "button", className: "grid-picker__trigger", "data-test": "layout-grid-picker-trigger", ref: triggerRef, "aria-label": `Grid ${dimensions.columns} by ${dimensions.rows}`, "aria-expanded": open, "aria-haspopup": "dialog", onClick: () => {
+        }, children: [_jsx("button", { type: "button", className: "grid-picker__trigger", "data-test": "layout-grid-picker-trigger", ref: triggerRef, "aria-label": `Grid ${dimensions.columns} by ${dimensions.rows}`, "aria-expanded": open, "aria-haspopup": "dialog", disabled: blockedBy !== null, onClick: () => {
                     setPopoverPosition(null);
                     setOpen((current) => !current);
-                }, children: _jsxs("span", { className: "grid-picker__preview", style: gridStyle(dimensions.columns, dimensions.rows), "aria-hidden": "true", children: [previewCells.map(({ column, row }) => (_jsx("span", { className: "grid-picker__preview-cell" }, `${column}-${row}`))), _jsxs("span", { className: "grid-picker__preview-label", children: [dimensions.columns, " \u00D7 ", dimensions.rows] })] }) }), open ? (_jsxs("div", { className: "grid-picker__popover", "data-test": "layout-grid-picker-popover", role: "dialog", "aria-label": "Choose grid size", style: popoverPosition ? {
+                }, children: _jsxs("span", { className: "grid-picker__preview", style: gridStyle(dimensions.columns, dimensions.rows), "aria-hidden": "true", children: [previewCells.map(({ column, row }) => (_jsx("span", { className: "grid-picker__preview-cell" }, `${column}-${row}`))), _jsxs("span", { className: "grid-picker__preview-label", children: [dimensions.columns, " \u00D7 ", dimensions.rows] })] }) }), _jsx(InlineStyleWarning, { blockedBy: blockedBy }), open ? (_jsxs("div", { className: "grid-picker__popover", "data-test": "layout-grid-picker-popover", role: "dialog", "aria-label": "Choose grid size", style: popoverPosition ? {
                     left: popoverPosition.left,
                     top: popoverPosition.top,
                     visibility: "visible",

package/dist/inspector/styleEditors/GridSection.js

@@ -23,5 +23,5 @@ const GRID_CONTENT_ALIGNMENT_OPTIONS = [
 const GRID_ITEM_ALIGNMENT_OPTIONS = ["normal", "stretch", "start", "end", "center", "self-start", "self-end"];
 export function GridSection({ domElement: el, editTarget, selection, entries, tokenRows, showContainer, showChild, revision = 0, onAfterEdit, }) {
     const [advancedOpen, setAdvancedOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [showContainer ? _jsx("div", { className: "layout__group layout__grid", "data-test": "layout-grid-container", children: _jsxs("div", { className: "layout__grid-primary", children: [_jsxs("div", { className: "layout__grid-picker-column", children: [_jsxs("div", { className: "layout__grid-heading", children: [_jsx("div", { className: "editor__title", children: "Grid" }), _jsx(InspectorPopover, { "data-test": "layout-grid-settings", side: "bottom", align: "end", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Grid settings", title: "Grid settings", "data-active": advancedOpen, "data-test": "layout-grid-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), open: advancedOpen, onOpenChange: setAdvancedOpen, children: _jsxs("div", { className: "layout__grid-advanced", "data-test": "layout-grid-advanced", children: [_jsx("div", { className: "editor__title", children: "Advanced grid CSS" }), _jsxs("div", { className: "layout__grid-fields", children: [_jsx(GridValueField, { property: "grid-template-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-template-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "grid-auto-flow", options: GRID_AUTO_FLOW_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-alignment", "data-test": "layout-grid-alignment", children: [_jsx(LayoutDropdown, { property: "justify-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "justify-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit })] })] }) })] }), _jsx(GridPicker, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-gap", "data-test": "layout-grid-gap", children: [_jsx("div", { className: "editor__title", children: "Gap" }), _jsxs("div", { className: "layout__grid-gap-fields", children: [_jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-row-gap", children: _jsx(GapField, { property: "row-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-row-gap" })), onAfterEdit: onAfterEdit }) }), _jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-column-gap", children: _jsx(GapField, { property: "column-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-column-gap" })), onAfterEdit: onAfterEdit }) })] })] })] }) }) : null, showChild ? _jsx(GridChildSection, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit }) : null] }));
+    return (_jsxs(_Fragment, { children: [showContainer ? _jsx("div", { className: "layout__group layout__grid", "data-test": "layout-grid-container", children: _jsxs("div", { className: "layout__grid-primary", children: [_jsxs("div", { className: "layout__grid-picker-column", children: [_jsxs("div", { className: "layout__grid-heading", children: [_jsx("div", { className: "editor__title", children: "Grid" }), _jsx(InspectorPopover, { "data-test": "layout-grid-settings", side: "bottom", align: "end", triggerTooltip: "Grid settings", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Grid settings", "data-active": advancedOpen, "data-test": "layout-grid-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), open: advancedOpen, onOpenChange: setAdvancedOpen, children: _jsxs("div", { className: "layout__grid-advanced", "data-test": "layout-grid-advanced", children: [_jsx("div", { className: "editor__title", children: "Advanced grid CSS" }), _jsxs("div", { className: "layout__grid-fields", children: [_jsx(GridValueField, { property: "grid-template-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-template-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "grid-auto-flow", options: GRID_AUTO_FLOW_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-alignment", "data-test": "layout-grid-alignment", children: [_jsx(LayoutDropdown, { property: "justify-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "justify-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit })] })] }) })] }), _jsx(GridPicker, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-gap", "data-test": "layout-grid-gap", children: [_jsx("div", { className: "layout__grid-heading", "data-test": "layout-grid-gap-heading", "aria-hidden": "true", children: _jsx("div", { className: "editor__title" }) }), _jsxs("div", { className: "layout__grid-gap-fields", children: [_jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-row-gap", children: _jsx(GapField, { property: "row-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-row-gap" })), onAfterEdit: onAfterEdit }) }), _jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-column-gap", children: _jsx(GapField, { property: "column-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-column-gap" })), onAfterEdit: onAfterEdit }) })] })] })] }) }) : null, showChild ? _jsx(GridChildSection, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit }) : null] }));
 }

package/dist/inspector/styleEditors/GridValueField.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { FieldRow } from "../ui/FieldRow.js";
 import { TextInput } from "../ui/TextInput.js";
 import { getLayoutValue } from "./layoutValue.js";
 import { setStyle } from "../tokens/editActions.js";
 import { useFieldAtRules } from "../ui/AtRuleContext.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 const DEFAULT_GRID_VALUES = {
     "grid-template-columns": "none",
     "grid-template-rows": "none",
@@ -21,6 +23,7 @@ const DEFAULT_GRID_VALUES = {
 export function GridValueField({ property, domElement: el, editTarget, selection, revision = 0, onAfterEdit, }) {
     const atRules = useFieldAtRules(property);
     const mixed = selection?.getProperty(property)?.value.kind === "mixed";
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     const readValue = () => {
         const value = getLayoutValue(el, property);
         return value.authored || value.computed || DEFAULT_GRID_VALUES[property] || "";
@@ -41,6 +44,8 @@ export function GridValueField({ property, domElement: el, editTarget, selection
         setDraft(next);
     }
     function commit() {
+        if (blockedBy)
+            return;
         const next = draftRef.current.trim();
         if (!next) {
             updateDraft(mixed ? "" : value);
@@ -54,17 +59,17 @@ export function GridValueField({ property, domElement: el, editTarget, selection
     function cancel() {
         updateDraft(mixed ? "" : value);
     }
-    return (_jsx(FieldRow, { label: property, property: property, atRules: atRules, "data-test": `layout-grid-${property}`, children: _jsx(TextInput, { value: draft, placeholder: mixed ? "Mixed" : undefined, "data-test": `layout-grid-input-${property}`, "aria-label": property, onChange: (event) => updateDraft(event.target.value), onBlur: () => {
-                commit();
-            }, onKeyDown: (event) => {
-                if (event.key === "Escape") {
-                    event.preventDefault();
-                    cancel();
-                    event.currentTarget.blur();
-                }
-                else if (event.key === "Enter") {
-                    event.preventDefault();
-                    event.currentTarget.blur();
-                }
-            } }) }));
+    return (_jsxs(FieldRow, { label: property, property: property, atRules: atRules, "data-test": `layout-grid-${property}`, children: [_jsx(TextInput, { value: draft, placeholder: mixed ? "Mixed" : undefined, "data-test": `layout-grid-input-${property}`, "aria-label": property, disabled: blockedBy !== null, onChange: (event) => updateDraft(event.target.value), onBlur: () => {
+                    commit();
+                }, onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        cancel();
+                        event.currentTarget.blur();
+                    }
+                    else if (event.key === "Enter") {
+                        event.preventDefault();
+                        event.currentTarget.blur();
+                    }
+                } }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }));
 }

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

@@ -0,0 +1,18 @@
+import type { ReactElement } from "react";
+import type { StyleDeclaration } from "../tokens/editActions.js";
+interface ImageBackgroundEditorProps {
+    element: HTMLElement;
+    elements: readonly HTMLElement[];
+    value: string;
+    mixed: boolean;
+    sizingValues?: {
+        size: string;
+        repeat: string;
+    };
+    onUpload(value: string): boolean;
+    onCss(value: string): boolean;
+    onSizing(declarations: StyleDeclaration[]): boolean;
+}
+/** Preview uploaded images through the existing workspace style edits. */
+export declare function ImageBackgroundEditor({ element, elements, value, mixed, sizingValues, onUpload, onCss, onSizing }: ImageBackgroundEditorProps): ReactElement;
+export {};