nudge-ui 0.2.1 → 0.2.3

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 {};

package/dist/inspector/styleEditors/ImageBackgroundEditor.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconPhoto, IconUpload } from "@tabler/icons-react";
+import { TokenValueField } from "../tokens/TokenField.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { getActiveDraftChanges } from "../changes/draftChanges.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { Button } from "../ui/Button.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
+import { Select } from "../ui/Select.js";
+import { StatusCallout } from "../ui/StatusCallout.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+const SIZING = [
+    { value: "cover", label: "Cover" },
+    { value: "contain", label: "Fit" },
+    { value: "100% 100%", label: "Stretch" },
+    { value: "auto", label: "Original size" },
+    { value: "tile", label: "Tile" },
+];
+function imageUrl(value) {
+    const match = /^url\(\s*(?:"((?:\\.|[^"\\])*)"|'((?:\\.|[^'\\])*)'|([^\s"']+))\s*\)$/s.exec(value);
+    const url = match?.[1] ?? match?.[2] ?? match?.[3];
+    return url?.replace(/\\(["'\\])/g, "$1") ?? null;
+}
+function imageName(src, base) {
+    if (src.startsWith("data:"))
+        return "Uploaded image";
+    try {
+        return decodeURIComponent(new URL(src, base).pathname.split("/").pop() || "Background image");
+    }
+    catch {
+        return "Background image";
+    }
+}
+/** Preview uploaded images through the existing workspace style edits. */
+export function ImageBackgroundEditor({ element, elements, value, mixed, sizingValues, onUpload, onCss, onSizing }) {
+    const input = useRef(null);
+    const reader = useRef(null);
+    const request = useRef(0);
+    const currentElements = useRef(elements);
+    currentElements.current = elements;
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const [image, setImage] = useState(null);
+    const [sizingDraft, setSizingDraft] = useState(null);
+    const src = mixed ? null : imageUrl(value);
+    const title = src ? image?.src === src ? image.name : imageName(src, element.ownerDocument.baseURI) : null;
+    const computedSize = sizingValues?.size ?? getStateStyleValue(element, "background-size", "auto");
+    const computedRepeat = sizingValues?.repeat ?? getStateStyleValue(element, "background-repeat", "repeat");
+    const computedSizing = computedRepeat === "repeat" && /^(?:auto|auto auto)$/.test(computedSize) ? "tile"
+        : computedSize === "auto auto" ? "auto" : computedSize;
+    const sizing = sizingDraft?.element === element && sizingDraft.revision === getActiveDraftChanges().revision ? sizingDraft.value : computedSizing;
+    const uploadBlocked = inlineBlockedBy(elements, "background-image", "background-size", "background-repeat", "background-position");
+    const sizingBlocked = inlineBlockedBy(elements, "background-size", "background-repeat", "background-position");
+    useEffect(() => {
+        setPending(false);
+        setError(null);
+        return () => { request.current++; reader.current?.abort(); };
+    }, [element, value]);
+    async function upload(file) {
+        const id = ++request.current;
+        const targets = [...elements];
+        const isCurrent = () => request.current === id && currentElements.current.length === targets.length
+            && currentElements.current.every((element, index) => element === targets[index]);
+        if (!file.type.startsWith("image/")) {
+            setError("Choose an image file.");
+            return;
+        }
+        if (uploadBlocked)
+            return;
+        setPending(true);
+        setError(null);
+        try {
+            const data = await new Promise((resolve, reject) => {
+                const fileReader = new FileReader();
+                reader.current = fileReader;
+                fileReader.onload = () => typeof fileReader.result === "string" ? resolve(fileReader.result) : reject(new Error("No image data"));
+                fileReader.onerror = fileReader.onabort = () => reject(new Error("Cannot read image"));
+                fileReader.readAsDataURL(file);
+            });
+            const probe = new Image();
+            probe.src = data;
+            await probe.decode();
+            if (!isCurrent())
+                return;
+            if (!onUpload(`url("${data}")`))
+                return;
+            setImage({ src: data, name: file.name });
+            setSizingDraft({ element, revision: getActiveDraftChanges().revision, value: "cover" });
+        }
+        catch {
+            if (isCurrent())
+                setError("This image could not be loaded. Choose another file.");
+        }
+        finally {
+            if (isCurrent())
+                setPending(false);
+        }
+    }
+    function changeSizing(next) {
+        if (sizingBlocked)
+            return;
+        if (!onSizing([
+            { property: "background-size", value: next === "tile" ? "auto" : next },
+            { property: "background-repeat", value: next === "tile" ? "repeat" : "no-repeat" },
+            { property: "background-position", value: "center" },
+        ]))
+            return;
+        setSizingDraft({ element, revision: getActiveDraftChanges().revision, value: next });
+    }
+    return _jsxs("div", { className: "image-background", "data-test": "image-background-editor", children: [_jsx("input", { ref: input, type: "file", accept: "image/*", hidden: true, "data-test": "background-image-upload", "aria-label": "Upload background image", disabled: uploadBlocked !== null || pending, onChange: (event) => {
+                    const file = event.currentTarget.files?.[0];
+                    event.currentTarget.value = "";
+                    if (file)
+                        void upload(file);
+                } }), src ? _jsxs("div", { className: "image-background__grid", children: [_jsxs(Button, { variant: "quiet", className: "image-background__tile", "aria-label": "Replace background image", disabled: uploadBlocked !== null || pending, onClick: () => input.current?.click(), children: [_jsx("img", { className: "image-background__thumb", src: src, alt: "Background image thumbnail", onLoad: () => setImage((previous) => previous?.src === src ? previous : { src, name: imageName(src, element.ownerDocument.baseURI) }), onError: () => setError("The background image could not be loaded.") }), _jsx("span", { className: "image-background__title", title: title ?? undefined, children: title })] }), _jsx(Select, { "aria-label": "Background image sizing", value: sizing, options: SIZING.some((option) => option.value === sizing) ? SIZING : [...SIZING, { value: sizing, label: `Custom (${sizing})` }], disabled: sizingBlocked !== null, onValueChange: changeSizing })] }) : _jsxs(Button, { variant: "secondary", disabled: uploadBlocked !== null || pending, onClick: () => input.current?.click(), children: [pending ? _jsx(IconPhoto, { size: 16, "aria-hidden": "true" }) : _jsx(IconUpload, { size: 16, "aria-hidden": "true" }), pending ? "Loading image…" : mixed ? "Upload image to replace backgrounds" : "Upload image"] }), !src && !mixed && value !== "none" ? _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: "background-image", domElement: element, entries: [], committedValue: value, label: "Background image CSS", blockedBy: inlineBlockedBy(elements, "background-image"), onCommitRaw: (raw) => { if (typeof CSS === "undefined" || CSS.supports("background-image", raw))
+                        onCss(raw); }, onSelectToken: () => false, onUnlink: onCss }) }) : null, _jsx(InlineStyleWarning, { blockedBy: uploadBlocked ?? sizingBlocked }), error ? _jsx(StatusCallout, { tone: "warning", role: "alert", children: error }) : null] });
+}

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

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 export interface LayoutBlockedIndicatorProps {
-    blockedBy: string;
+    blockedBy: string | null;
 }
 /** Explains why a layout preview cannot override an inline-authored value. */
-export declare function LayoutBlockedIndicator({ blockedBy }: LayoutBlockedIndicatorProps): ReactElement;
+export declare function LayoutBlockedIndicator({ blockedBy }: LayoutBlockedIndicatorProps): ReactElement | null;

package/dist/inspector/styleEditors/LayoutBlockedIndicator.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip } from "@base-ui/react/tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
 /** Explains why a layout preview cannot override an inline-authored value. */
 export function LayoutBlockedIndicator({ blockedBy }) {
-    return (_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { disableHoverablePopup: true, children: [_jsx(Tooltip.Trigger, { type: "button", delay: 0, className: "layout-combo-blocked", "data-test": "layout-combo-blocked", "aria-label": `Blocked by inline style: ${blockedBy}`, children: _jsx("span", { className: "layout-combo-blocked__symbol", "aria-hidden": "true", children: "!" }) }), _jsx(Tooltip.Portal, { container: document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body, children: _jsx(Tooltip.Positioner, { className: "at-rule-tooltip-positioner", side: "top", align: "end", sideOffset: 7, children: _jsx(Tooltip.Popup, { className: "at-rule-tooltip", "data-test": "layout-combo-blocked-tooltip", children: _jsx("div", { className: "at-rule-tooltip__rules", children: _jsxs("div", { className: "at-rule-tooltip__rule at-rule-tooltip__rule--active", children: ["Set inline (", _jsx("code", { children: blockedBy }), "). Previews can't beat inline styles \u2014 move it to a stylesheet to edit it here."] }) }) }) }) })] }) }));
+    return (_jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: "layout-combo-blocked", tooltipDataTest: "layout-combo-blocked-tooltip", className: "layout-combo-blocked", symbolClassName: "layout-combo-blocked__symbol" }));
 }

package/dist/inspector/styleEditors/LayoutComboField.js

@@ -4,10 +4,12 @@ import { setStyle } from "../tokens/editActions.js";
 import { completeCssValue } from "./completeCssValue.js";
 import { nudgeCssValue } from "./nudgeValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
-import { inlineAuthoredValue, meaningfulLayoutValue } from "./layoutValue.js";
+import { meaningfulLayoutValue } from "./layoutValue.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 import { LayoutBlockedIndicator } from "./LayoutBlockedIndicator.js";
 import { Select } from "../ui/Select.js";
 import { TextInput } from "../ui/TextInput.js";
+import { cx } from "../ui/classNames.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { AtRuleIndicator, useFieldAtRules } from "../ui/AtRuleContext.js";
 import { getCanvasProjectionAcknowledgementVersion, getCanvasProjectionStatus, subscribeCanvasProjectionAcknowledgements, } from "../canvas/projection.js";
@@ -58,7 +60,7 @@ export function LayoutComboField(props) {
     // blocked (with the reason) instead of accepting edits that silently snap
     // back to the computed value on the next revision. Recomputed every render
     // so external style-attribute edits update the field without a remount.
-    const blockedBy = inlineAuthoredValue(el, property);
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     function commit(value) {
         if (blockedBy)
             return;
@@ -124,10 +126,10 @@ export function LayoutComboField(props) {
             draftDirtyRef.current = true;
             setCustomValue(e.target.value);
         }, onBlur: handleCustomApply, onKeyDown: handleCustomKeyDown }));
-    return (_jsxs("span", { className: `layout-combo${compact ? " layout-combo--compact" : ""}${blockedBy ? " layout-combo--blocked" : ""}`, "data-test": "layout-combo", "data-property": property, children: [inputOnly ? customInput : (_jsxs(_Fragment, { children: [_jsx(Select, { compact: compact, appearance: appearance, "data-test": `layout-combo-select-${property}`, value: selectValue, options: [
+    return (_jsxs("span", { className: cx("layout-combo", compact && "layout-combo--compact", blockedBy && "layout-combo--blocked"), "data-test": "layout-combo", "data-property": property, children: [inputOnly ? customInput : (_jsxs(_Fragment, { children: [_jsx(Select, { compact: compact, appearance: appearance, "data-test": `layout-combo-select-${property}`, value: selectValue, options: [
                             ...presets.map((p) => ({ value: p, label: formatInspectorLabel(p) })),
                             { value: CUSTOM_KEY, label: "Custom…" },
-                        ], onValueChange: handleSelectChange, disabled: blockedBy !== null }), showCustom || alwaysShowInput ? (_jsx("span", { className: "layout-combo__custom", children: customInput })) : null] })), _jsx(AtRuleIndicator, { atRules: atRules }), blockedBy ? _jsx(LayoutBlockedIndicator, { blockedBy: blockedBy }) : null] }));
+                        ], onValueChange: handleSelectChange, disabled: blockedBy !== null }), showCustom || alwaysShowInput ? (_jsx("span", { className: "layout-combo__custom", children: customInput })) : null] })), _jsx(AtRuleIndicator, { atRules: atRules }), _jsx(LayoutBlockedIndicator, { blockedBy: blockedBy })] }));
 }
 function arrowDirection(key) {
     if (key === "ArrowUp" || key === "ArrowRight")

package/dist/inspector/styleEditors/LayoutDropdown.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { setStyle } from "../tokens/editActions.js";
 import { FieldRow } from "../ui/FieldRow.js";
@@ -6,11 +6,14 @@ import { Select } from "../ui/Select.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { useFieldAtRules } from "../ui/AtRuleContext.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 export function LayoutDropdown(props) {
     const { property, options, domElement: el, editTarget, selection, stacked, revision = 0, onAfterEdit } = props;
     const atRules = useFieldAtRules(property);
     const selectedProperty = selection?.getProperty(property);
     const mixed = selectedProperty?.value.kind === "mixed";
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     const [value, setValue] = useState(() => getStateStyleValue(el, property, options[0]));
     useEffect(() => {
         try {
@@ -21,7 +24,7 @@ export function LayoutDropdown(props) {
         }
     }, [el, property, options, revision]);
     function handleChange(next) {
-        if (next === "mixed")
+        if (next === "mixed" || blockedBy)
             return;
         setValue(next);
         setStyle(editTarget ?? el, property, next);
@@ -30,5 +33,5 @@ export function LayoutDropdown(props) {
     const allOptions = mixed
         ? ["mixed", ...options]
         : value && !options.includes(value) ? [...options, value] : options;
-    return (_jsx(FieldRow, { label: property, property: property, atRules: atRules, className: stacked ? "field-row--stacked" : undefined, "data-test": "layout-dropdown", children: _jsx(Select, { "data-test": `layout-select-${property}`, value: mixed ? "mixed" : value, options: allOptions.map((opt) => ({ value: opt, label: formatInspectorLabel(opt) })), onValueChange: handleChange }) }));
+    return (_jsxs(FieldRow, { label: property, property: property, atRules: atRules, className: stacked ? "field-row--stacked" : undefined, "data-test": "layout-dropdown", children: [_jsx(Select, { "data-test": `layout-select-${property}`, value: mixed ? "mixed" : value, options: allOptions.map((opt) => ({ value: opt, label: formatInspectorLabel(opt) })), onValueChange: handleChange, disabled: blockedBy !== null }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }));
 }

package/dist/inspector/styleEditors/LayoutSection.js

@@ -9,6 +9,7 @@ import { AspectRatioField } from "./AspectRatioField.js";
 import { PositionInsets } from "./PositionInsets.js";
 import { GridSection } from "./GridSection.js";
 import { meaningfulLayoutValue } from "./layoutValue.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
 import { setStyle, setStyles } from "../tokens/editActions.js";
 import { IconButton } from "../ui/IconButton.js";
 import { InspectorPopover } from "../ui/InspectorPopover.js";
@@ -19,6 +20,8 @@ import { formatInspectorLabel } from "../ui/labels.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { getCanvasProjectionAcknowledgementVersion, subscribeCanvasProjectionAcknowledgements, } from "../canvas/projection.js";
 const DISPLAY_OPTIONS = ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "none", "contents"];
@@ -106,7 +109,7 @@ export function LayoutSection(props) {
     const showPositionInsets = selection
         ? selection.supportsRole("inset-position")
         : position === "absolute" || position === "fixed";
-    return (_jsxs("div", { className: "editor", "data-test": "layout-section", children: [_jsx("div", { className: "editor__title", children: "Layout" }), _jsxs("div", { className: "layout", children: [_jsxs("div", { className: "layout__basic", children: [_jsx(SizeSection, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsxs("div", { className: "layout__tool-row", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] }), isFlexContainer ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-container", children: [_jsx("div", { className: "editor__title", children: "Flex" }), _jsx("div", { className: "layout__flex-toolbar", children: _jsxs("div", { className: "layout__direction-tools", children: [_jsx(FlexDirectionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexWrapToggle, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }) }), _jsxs("div", { className: "layout__flex-lower", children: [mixedFlexDirection ? (_jsx("div", { className: "layout__alignment-grid", "data-test": "layout-flex-axis-mixed", children: "Choose a shared flex direction to edit physical alignment." })) : (_jsx(FlexAlignmentGrid, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })), _jsx("div", { className: "layout__gap-column", "data-test": "layout-gap", children: _jsxs("div", { className: "layout__gap-fields", children: [_jsxs("div", { className: "layout__spacing-primary", children: [_jsx(FlexGapField, { property: relevantGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit }), _jsx(FlexDistributionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), isFlexWrapped ? (_jsx(FlexGapField, { property: lineGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit })) : null] }) })] })] })) : null, isFlexChild ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-child", children: [_jsx("div", { className: "editor__title", children: "Flex Child" }), _jsxs("div", { className: "layout__flex-child-fields", children: [_jsx(FlexChildValueField, { label: "Grow", property: "flex-grow", presets: FLEX_GROW_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Shrink", property: "flex-shrink", presets: FLEX_SHRINK_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Basis", property: "flex-basis", presets: FLEX_BASIS_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] })) : null, isGridContainer || isGridChild ? (_jsx(GridSection, { domElement: el, showContainer: isGridContainer, showChild: isGridChild, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null, showPositionInsets ? (_jsx(PositionInsets, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null] })] }));
+    return (_jsxs("div", { className: "editor", "data-test": "layout-section", children: [_jsx("div", { className: "editor__title", children: "Layout" }), _jsxs("div", { className: "layout", children: [_jsxs("div", { className: "layout__basic", children: [_jsx(SizeSection, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsxs("div", { className: "layout__tool-row", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] }), isFlexContainer ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-container", children: [_jsxs("div", { className: "layout__flex-heading", children: [_jsx("div", { className: "editor__title", children: "Flex" }), _jsx(FlexSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), _jsxs("div", { className: "layout__flex-lower", children: [mixedFlexDirection ? (_jsx("div", { className: "layout__alignment-grid", "data-test": "layout-flex-axis-mixed", children: "Choose a shared flex direction to edit physical alignment." })) : (_jsx(FlexAlignmentGrid, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })), _jsxs("div", { className: "layout__gap-column", "data-test": "layout-gap", children: [_jsxs("div", { className: "layout__direction-tools", children: [_jsx(FlexDirectionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexWrapToggle, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), _jsxs("div", { className: "layout__gap-fields", children: [_jsxs("div", { className: "layout__spacing-primary", children: [_jsx(FlexGapField, { property: relevantGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit }), _jsx(FlexDistributionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), isFlexWrapped ? (_jsx(FlexGapField, { property: lineGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit })) : null] })] })] })] })) : null, isFlexChild ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-child", children: [_jsx("div", { className: "editor__title", children: "Flex Child" }), _jsxs("div", { className: "layout__flex-child-fields", children: [_jsx(FlexChildValueField, { label: "Grow", property: "flex-grow", presets: FLEX_GROW_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Shrink", property: "flex-shrink", presets: FLEX_SHRINK_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Basis", property: "flex-basis", presets: FLEX_BASIS_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] })) : null, isGridContainer || isGridChild ? (_jsx(GridSection, { domElement: el, showContainer: isGridContainer, showChild: isGridChild, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null, showPositionInsets ? (_jsx(PositionInsets, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null] })] }));
 }
 function SizeSection({ domElement: el, editTarget, selection, entries, tokenRows, revision, onAfterEdit }) {
     const [expanded, setExpanded] = useState(false);
@@ -125,14 +128,14 @@ function SizeSection({ domElement: el, editTarget, selection, entries, tokenRows
                         ? _jsx(IconLetterH, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
                         : undefined, onAfterEdit: onAfterEdit }) }));
     }
-    return (_jsx("div", { className: "layout__size", "data-test": "layout-size", "data-expanded": expanded ? "true" : "false", children: _jsxs("div", { className: "layout__size-grid", children: [_jsx(FieldRow, { label: "Width", hideLabel: true, "data-test": "layout-size-width", className: "layout__size-cell layout__size-cell--width", children: renderTokenField("width", SIZE_PRESETS) }), _jsx(FieldRow, { label: "Height", hideLabel: true, "data-test": "layout-size-height", className: "layout__size-cell layout__size-cell--height", children: renderTokenField("height", SIZE_PRESETS) }), _jsx(IconButton, { className: "layout__size-cell layout__size-cell--toggle", variant: "quiet", size: "default", "data-test": expanded ? "layout-size-collapse" : "layout-size-expand", "aria-label": expanded ? "Collapse Size Fields" : "Expand Size Fields", label: expanded ? "Collapse Size Fields" : "Expand Size Fields", title: expanded ? "Collapse Size Fields" : "Expand Size Fields", onClick: () => setExpanded(!expanded), children: expanded ? (_jsx(IconArrowsMinimize, { size: 16, stroke: 1.8, "aria-hidden": "true" })) : (_jsx(IconArrowsMaximize, { size: 16, stroke: 1.8, "aria-hidden": "true" })) }), expanded && fields.slice(2).map(({ property, presets }) => (_jsx(FieldRow, { label: property, "data-test": `layout-size-${property}`, className: `layout__size-cell layout__size-cell--${property}`, children: renderTokenField(property, presets) }, property))), expanded && (_jsx(AspectRatioField, { className: "layout__size-cell layout__size-cell--aspect-ratio", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRow: tokenRows.find((row) => row.property === "aspect-ratio") ?? null, revision: revision, onAfterEdit: onAfterEdit }))] }) }));
+    return (_jsx("div", { className: "layout__size", "data-test": "layout-size", "data-expanded": expanded ? "true" : "false", children: _jsxs("div", { className: "layout__size-grid", children: [_jsx(FieldRow, { label: "Width", hideLabel: true, "data-test": "layout-size-width", className: "layout__size-cell layout__size-cell--width", children: renderTokenField("width", SIZE_PRESETS) }), _jsx(FieldRow, { label: "Height", hideLabel: true, "data-test": "layout-size-height", className: "layout__size-cell layout__size-cell--height", children: renderTokenField("height", SIZE_PRESETS) }), _jsx(Tooltip, { children: _jsx(IconButton, { className: "layout__size-cell layout__size-cell--toggle", variant: "quiet", size: "default", "data-test": expanded ? "layout-size-collapse" : "layout-size-expand", "aria-label": expanded ? "Collapse Size Fields" : "Expand Size Fields", label: expanded ? "Collapse Size Fields" : "Expand Size Fields", onClick: () => setExpanded(!expanded), children: expanded ? (_jsx(IconArrowsMinimize, { size: 16, stroke: 1.8, "aria-hidden": "true" })) : (_jsx(IconArrowsMaximize, { size: 16, stroke: 1.8, "aria-hidden": "true" })) }) }), expanded && fields.slice(2).map(({ property, presets }) => (_jsx(FieldRow, { label: property, "data-test": `layout-size-${property}`, className: `layout__size-cell layout__size-cell--${property}`, children: renderTokenField(property, presets) }, property))), expanded && (_jsx(AspectRatioField, { className: "layout__size-cell layout__size-cell--aspect-ratio", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRow: tokenRows.find((row) => row.property === "aspect-ratio") ?? null, revision: revision, onAfterEdit: onAfterEdit }))] }) }));
 }
 function FlexChildValueField({ label, property, presets, inputOnly = false, domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     return (_jsx(FieldRow, { label: label, className: "layout__flex-child-field", children: _jsx(LayoutComboField, { property: property, presets: presets, domElement: domElement, editTarget: editTarget, selection: selection, inputOnly: inputOnly, revision: revision, onAfterEdit: onAfterEdit }) }));
 }
 function FlexChildSettingsMenu({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     const [open, setOpen] = useState(false);
-    return (_jsx(InspectorPopover, { "data-test": "layout-flex-child-settings", side: "left", align: "start", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Flex child settings", title: "Flex child settings", "data-test": "layout-flex-child-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), open: open, onOpenChange: setOpen, children: _jsxs("div", { className: "layout__flex-child-settings", "data-test": "layout-flex-child-settings-content", children: [_jsx("div", { className: "layout__flex-child-settings-title", children: "Flex Child Settings" }), _jsx(LayoutDropdown, { property: "align-self", options: ALIGN_SELF_OPTIONS, domElement: domElement, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(FlexChildValueField, { label: "Order", property: "order", presets: ORDER_PRESETS, domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }) }));
+    return (_jsx(InspectorPopover, { "data-test": "layout-flex-child-settings", side: "left", align: "start", triggerTooltip: "Flex child settings", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Flex child settings", "data-test": "layout-flex-child-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), open: open, onOpenChange: setOpen, children: _jsxs("div", { className: "layout__flex-child-settings", "data-test": "layout-flex-child-settings-content", children: [_jsx("div", { className: "layout__flex-child-settings-title", children: "Flex Child Settings" }), _jsx(LayoutDropdown, { property: "align-self", options: ALIGN_SELF_OPTIONS, domElement: domElement, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(FlexChildValueField, { label: "Order", property: "order", presets: ORDER_PRESETS, domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }) }));
 }
 function FlexGapField({ property, domElement, editTarget, selection, entries, tokenRows, onAfterEdit }) {
     const GapIcon = property === "column-gap" ? IconSpacingHorizontal : IconSpacingVertical;
@@ -145,14 +148,17 @@ function FlexDirectionControl({ domElement, editTarget, selection, revision = 0,
     const sharedDirection = selectedDirection?.kind === "common" ? selectedDirection.value : direction;
     const orientation = sharedDirection.startsWith("column") ? "column" : "row";
     const reverse = sharedDirection.endsWith("-reverse");
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "flex-direction");
     function selectDirection(next) {
+        if (blockedBy)
+            return;
         if (!FLEX_DIRECTION_OPTIONS.includes(next))
             return;
         setDirection(next);
         setStyle(editTarget ?? domElement, "flex-direction", next);
         onAfterEdit?.();
     }
-    return (_jsx(SegmentedControl, { value: mixed ? null : orientation, "aria-label": "Flex direction", options: [
+    const control = (_jsx(SegmentedControl, { value: mixed ? null : orientation, "aria-label": "Flex direction", disabled: blockedBy !== null, options: [
             {
                 value: "row",
                 label: "Set Flex Direction To Row",
@@ -166,6 +172,7 @@ function FlexDirectionControl({ domElement, editTarget, selection, revision = 0,
                 icon: (_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: _jsx("path", { d: "M8 2v11M4 9l4 4 4-4", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "var(--icon-stroke-width)" }) })),
             },
         ], onChange: (next) => selectDirection(`${next}${!mixed && reverse ? "-reverse" : ""}`) }));
+    return _jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), disabled: blockedBy === null, children: control });
 }
 function FlexWrapToggle({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     const [wrap] = useComputedLayoutValue(domElement, "flex-wrap", "nowrap", revision);
@@ -173,11 +180,14 @@ function FlexWrapToggle({ domElement, editTarget, selection, revision = 0, onAft
     const mixed = selectedWrap?.kind === "mixed";
     const sharedWrap = selectedWrap?.kind === "common" ? selectedWrap.value : wrap;
     const isWrapped = !mixed && sharedWrap !== "nowrap";
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "flex-wrap");
     function toggleWrap() {
+        if (blockedBy)
+            return;
         setStyle(editTarget ?? domElement, "flex-wrap", isWrapped ? "nowrap" : "wrap");
         onAfterEdit?.();
     }
-    return (_jsx(IconButton, { variant: "secondary", size: "default", "data-active": isWrapped, "data-test": "layout-flex-wrap-toggle", label: mixed ? "Set Flex Wrap" : isWrapped ? "Disable Flex Wrap" : "Enable Flex Wrap", "aria-pressed": mixed ? "mixed" : isWrapped, onClick: toggleWrap, children: _jsx(IconTextWrap, { size: 16, stroke: 1.8, "aria-hidden": "true" }) }));
+    return (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), children: _jsx(IconButton, { variant: "secondary", size: "default", "data-active": isWrapped, "data-test": "layout-flex-wrap-toggle", label: mixed ? "Set Flex Wrap" : isWrapped ? "Disable Flex Wrap" : "Enable Flex Wrap", "aria-pressed": mixed ? "mixed" : isWrapped, disabled: blockedBy !== null, onClick: toggleWrap, children: _jsx(IconTextWrap, { size: 16, stroke: 1.8, "aria-hidden": "true" }) }) }));
 }
 function FlexSettingsMenu({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     const [direction] = useComputedLayoutValue(domElement, "flex-direction", "row", revision);
@@ -199,6 +209,7 @@ function FlexSettingsMenu({ domElement, editTarget, selection, revision = 0, onA
     const reverseDirection = sharedDirection.endsWith("-reverse")
         ? orientation
         : `${orientation}-reverse`;
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "flex-direction", "flex-wrap", "align-content", "align-items");
     const items = [
         ...(mixedDirection ? [] : [{
                 value: `flex-direction:${reverseDirection}`,
@@ -237,6 +248,8 @@ function FlexSettingsMenu({ domElement, editTarget, selection, revision = 0, onA
         },
     ];
     function selectSetting(setting) {
+        if (blockedBy)
+            return;
         const separator = setting.indexOf(":");
         if (separator < 0)
             return;
@@ -246,7 +259,7 @@ function FlexSettingsMenu({ domElement, editTarget, selection, revision = 0, onA
         setOpen(false);
         onAfterEdit?.();
     }
-    return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Flex settings", "data-test": "layout-flex-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), triggerDataTest: "layout-flex-settings", triggerAriaLabel: "Flex settings", items: items.map((item) => ({
+    return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Flex settings", "data-test": "layout-flex-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), triggerDataTest: "layout-flex-settings", triggerAriaLabel: "Flex settings", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: items.map((item) => ({
             value: item.value,
             label: item.label,
             trailing: item.trailing,
@@ -254,22 +267,25 @@ function FlexSettingsMenu({ domElement, editTarget, selection, revision = 0, onA
             "data-test": item["data-test"],
         })), onQueryChange: () => undefined, onOpenChange: setOpen, onSelect: selectSetting }));
 }
-function FlexDistributionControl({ domElement, editTarget, revision = 0, onAfterEdit }) {
+function FlexDistributionControl({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     const [computedJustify] = useComputedLayoutValue(domElement, "justify-content", "flex-start", revision);
     const justify = normalizeFlexJustify(computedJustify);
     const lastPlacement = useRef("flex-start");
     const distributed = FLEX_DISTRIBUTION_OPTIONS.includes(justify);
     const [open, setOpen] = useState(false);
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "justify-content");
     useEffect(() => {
         if (FLEX_ALIGNMENT_OPTIONS.includes(justify))
             lastPlacement.current = justify;
     }, [justify]);
     function selectDistribution(next) {
+        if (blockedBy)
+            return;
         const value = next === "packed" ? lastPlacement.current : next;
         setStyle(editTarget ?? domElement, "justify-content", value);
         onAfterEdit?.();
     }
-    return (_jsx(PopoverListbox, { className: "layout__distribution-control", query: "", value: distributed ? justify : "packed", open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Item distribution", title: "Item distribution", "data-active": distributed, "data-test": "layout-flex-distribution", children: _jsx(IconAdjustmentsHorizontal, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), triggerDataTest: "layout-flex-distribution", triggerAriaLabel: "Item distribution", items: [
+    return (_jsx(PopoverListbox, { className: "layout__distribution-control", query: "", value: distributed ? justify : "packed", open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Item distribution", "data-active": distributed, "data-test": "layout-flex-distribution", children: _jsx(IconAdjustmentsHorizontal, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), triggerDataTest: "layout-flex-distribution", triggerAriaLabel: "Item distribution", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: [
             { value: "packed", label: "Keep grouped" },
             { value: "space-between", label: "Spread between" },
             { value: "space-around", label: "Spread around" },
@@ -285,7 +301,7 @@ function FlexDistributionControl({ domElement, editTarget, revision = 0, onAfter
             setOpen(false);
         } }));
 }
-function FlexAlignmentGrid({ domElement, editTarget, revision = 0, onAfterEdit }) {
+function FlexAlignmentGrid({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     const [direction] = useComputedLayoutValue(domElement, "flex-direction", "row", revision);
     const [computedJustify, setJustify] = useComputedLayoutValue(domElement, "justify-content", "flex-start", revision);
     const [computedAlign, setAlign] = useComputedLayoutValue(domElement, "align-items", "stretch", revision);
@@ -294,6 +310,7 @@ function FlexAlignmentGrid({ domElement, editTarget, revision = 0, onAfterEdit }
     const isColumn = direction.startsWith("column");
     const isReverse = direction.endsWith("-reverse");
     const distributed = FLEX_DISTRIBUTION_OPTIONS.includes(justify);
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "justify-content", "align-items");
     // The grid represents physical positions in the parent. For row flex
     // containers, justify-content runs horizontally; for column flex
     // containers, it runs vertically, so the two grid axes need to transpose.
@@ -304,6 +321,8 @@ function FlexAlignmentGrid({ domElement, editTarget, revision = 0, onAfterEdit }
         ? [...FLEX_ALIGNMENT_OPTIONS].reverse()
         : FLEX_ALIGNMENT_OPTIONS;
     function selectAlignment(nextJustify, nextAlign) {
+        if (blockedBy)
+            return;
         // Keep an explicit distribution choice when the grid is used to change
         // the cross-axis alignment. The distribution control owns values such as
         // `space-between`; a grid click should not silently replace them with the
@@ -317,12 +336,14 @@ function FlexAlignmentGrid({ domElement, editTarget, revision = 0, onAfterEdit }
         ]);
         onAfterEdit?.();
     }
-    return (_jsxs("div", { className: "layout__alignment-grid", role: "group", "aria-label": "Place flex items", "data-direction": isColumn ? "column" : "row", "data-justify": justify, "data-align": align, "data-distributed": distributed, children: [distributed ? (_jsxs("span", { className: "layout__distribution-preview", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })) : null, rowValues.flatMap((rowValue) => columnValues.map((columnValue) => {
+    const grid = (_jsxs("div", { className: "layout__alignment-grid", role: "group", "aria-label": "Place flex items", "data-direction": isColumn ? "column" : "row", "data-justify": justify, "data-align": align, "data-distributed": distributed, children: [distributed ? (_jsxs("span", { className: "layout__distribution-preview", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })) : null, rowValues.flatMap((rowValue) => columnValues.map((columnValue) => {
                 const justifyValue = isColumn ? rowValue : columnValue;
                 const alignValue = isColumn ? columnValue : rowValue;
                 const active = justify === justifyValue && align === alignValue;
-                return (_jsx(IconButton, { size: "default", variant: "quiet", className: "layout__alignment-button", "data-active": active, "data-test": `layout-align-${alignValue}-${justifyValue}`, label: formatInspectorLabel(`Align ${alignValue.replace("flex-", "")} And Distribute ${justifyValue.replace("flex-", "")}`), "aria-pressed": active, onClick: () => selectAlignment(justifyValue, alignValue), children: _jsx("span", {}) }, `${alignValue}-${justifyValue}`));
+                const label = formatInspectorLabel(`Align ${alignValue.replace("flex-", "")} And Distribute ${justifyValue.replace("flex-", "")}`);
+                return (_jsx(Tooltip, { children: _jsx(IconButton, { size: "default", variant: "quiet", className: "layout__alignment-button", "data-active": active, "data-test": `layout-align-${alignValue}-${justifyValue}`, label: label, "aria-pressed": active, disabled: blockedBy !== null, onClick: () => selectAlignment(justifyValue, alignValue), children: _jsx("span", {}) }) }, `${alignValue}-${justifyValue}`));
             }))] }));
+    return _jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), disabled: blockedBy === null, children: grid });
 }
 function normalizeFlexJustify(value) {
     // `normal` is the computed initial value, but behaves as `flex-start` for