nudge-ui 0.2.0 → 0.2.2

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

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type { TokenEntry } from "../../css/model/index.js";
 import type { ResolvedProperty } from "../../css/model/index.js";
 import type { EditTarget } from "../selection/editTarget.js";
@@ -11,7 +11,8 @@ export interface GapFieldProps {
     selection?: StyleSelection | null;
     entries: TokenEntry[];
     tokenRows: ResolvedProperty[];
+    leading?: ReactNode;
     onAfterEdit?: () => void;
 }
 /** Renders a gap value with a token chip or the legacy raw-value fallback. */
-export declare function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, }: GapFieldProps): ReactElement;
+export declare function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, onAfterEdit, }: GapFieldProps): ReactElement;

package/dist/inspector/styleEditors/GapField.js

@@ -5,8 +5,8 @@ import { inlineAuthoredValue, meaningfulLayoutValue } from "./layoutValue.js";
 import { LayoutBlockedIndicator } from "./LayoutBlockedIndicator.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, onAfterEdit, }) {
+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, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", disabled: blockedBy !== null, onAfterEdit: onAfterEdit }), blockedBy ? _jsx(LayoutBlockedIndicator, { blockedBy: blockedBy }) : null] }));
+    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] }));
 }

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: [_jsxs(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-row-gap", children: [_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-row-gap" }), _jsx(GapField, { property: "row-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit })] }), _jsxs(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-column-gap", children: [_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-column-gap" }), _jsx(GapField, { property: "column-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, 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", 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] }));
 }

package/dist/inspector/styleEditors/LayoutSection.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { IconAdjustmentsHorizontal, IconArrowsMaximize, IconArrowsMinimize, IconCheck, IconLetterH, IconLetterW, IconSettings, IconSpacingHorizontal, IconSpacingVertical, IconTextWrap } from "@tabler/icons-react";
 import { TokenField } from "../tokens/TokenField.js";
 import { LayoutDropdown } from "./LayoutDropdown.js";
@@ -20,6 +20,7 @@ import { getElementComputedStyle } from "../runtime/domRealm.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { ControlSurface } from "../ui/ControlSurface.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"];
 const POSITION_OPTIONS = ["static", "relative", "absolute", "fixed", "sticky"];
 const FLEX_DIRECTION_OPTIONS = ["row", "row-reverse", "column", "column-reverse"];
@@ -46,8 +47,10 @@ export function LayoutSection(props) {
     const [primaryIsGridChild, setPrimaryIsGridChild] = useState(false);
     const [primaryPosition, setPrimaryPosition] = useState(() => getStateStyleValue(el, "position", "static"));
     const [layoutRevision, setLayoutRevision] = useState(0);
-    const [flexDirection] = useComputedLayoutValue(el, "flex-direction", "row", layoutRevision);
-    const [flexWrap] = useComputedLayoutValue(el, "flex-wrap", "nowrap", layoutRevision);
+    const projectionAcknowledgementVersion = useSyncExternalStore(subscribeCanvasProjectionAcknowledgements, getCanvasProjectionAcknowledgementVersion, getCanvasProjectionAcknowledgementVersion);
+    const computedRevision = layoutRevision + projectionAcknowledgementVersion;
+    const [flexDirection] = useComputedLayoutValue(el, "flex-direction", "row", computedRevision);
+    const [flexWrap] = useComputedLayoutValue(el, "flex-wrap", "nowrap", computedRevision);
     const selectedDirection = selection?.getProperty("flex-direction")?.value;
     const selectedWrap = selection?.getProperty("flex-wrap")?.value;
     const mixedFlexDirection = selectedDirection?.kind === "mixed";
@@ -76,7 +79,7 @@ export function LayoutSection(props) {
         catch {
             // noop
         }
-    }, [el, layoutRevision]);
+    }, [el, computedRevision]);
     useEffect(() => {
         try {
             const parentEl = el.parentElement;
@@ -93,7 +96,7 @@ export function LayoutSection(props) {
             setPrimaryIsFlexChild(false);
             setPrimaryIsGridChild(false);
         }
-    }, [el, layoutRevision]);
+    }, [el, computedRevision]);
     const isFlexContainer = selection ? selection.supportsRole("flex-container") : primaryIsFlexContainer;
     const isFlexChild = selection ? selection.supportsRole("flex-child") : primaryIsFlexChild;
     const isGridContainer = selection ? selection.supportsRole("grid-container") : primaryIsGridContainer;
@@ -103,7 +106,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: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsxs("div", { className: "layout__tool-row", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, 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: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexWrapToggle, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, 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: layoutRevision, 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: layoutRevision, 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: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Shrink", property: "flex-shrink", presets: FLEX_SHRINK_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Basis", property: "flex-basis", presets: FLEX_BASIS_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit })] })] })) : null, isGridContainer || isGridChild ? (_jsx(GridSection, { domElement: el, showContainer: isGridContainer, showChild: isGridChild, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: layoutRevision, onAfterEdit: notifyAfterEdit })) : null, showPositionInsets ? (_jsx(PositionInsets, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: layoutRevision, 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: [_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] })] }));
 }
 function SizeSection({ domElement: el, editTarget, selection, entries, tokenRows, revision, onAfterEdit }) {
     const [expanded, setExpanded] = useState(false);
@@ -132,8 +135,8 @@ function FlexChildSettingsMenu({ domElement, editTarget, selection, revision = 0
     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 })] }) }));
 }
 function FlexGapField({ property, domElement, editTarget, selection, entries, tokenRows, onAfterEdit }) {
-    const field = (_jsx(GapField, { property: property, domElement: domElement, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }));
-    return (_jsxs(ControlSurface, { className: "layout__spacing-field", children: [property === "column-gap" ? (_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": `layout-spacing-icon-${property}` })) : (_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": `layout-spacing-icon-${property}` })), field] }));
+    const GapIcon = property === "column-gap" ? IconSpacingHorizontal : IconSpacingVertical;
+    return (_jsx(ControlSurface, { className: "layout__spacing-field", children: _jsx(GapField, { property: property, domElement: domElement, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(GapIcon, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": `layout-spacing-icon-${property}` })), onAfterEdit: onAfterEdit }) }));
 }
 function FlexDirectionControl({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     const [direction, setDirection] = useComputedLayoutValue(domElement, "flex-direction", "row", revision);

package/dist/inspector/styleEditors/SpacingBox.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { IconPlus } from "@tabler/icons-react";
 import { findTokenRow, metadataFor } from "./rowLookup.js";
 import { TokenField, TokenValueField } from "../tokens/TokenField.js";
@@ -10,6 +9,8 @@ import { completeCssValue } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
 import { projectInspectorValues, projectInspectorValuesForSelection, } from "../spacing/projection.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
+import { isZeroCssValue } from "./stylePresence.js";
+import { useFieldVisibility } from "./useFieldVisibility.js";
 export function SpacingBox(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
@@ -27,44 +28,37 @@ export function SpacingBox(props) {
     return (_jsxs("div", { className: "editor", "data-test": "spacing-box", children: [_jsx("div", { className: "editor__title", children: "Spacing" }), _jsxs("div", { className: "spacing", children: [_jsx(SpacingField, { property: "padding", projection: projection.spacing.padding, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }), _jsx(SpacingField, { property: "margin", projection: projection.spacing.margin, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }), showRelativeInset ? _jsx(SpacingField, { property: "inset", projection: projection.spacing.inset, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }) : null] })] }));
 }
 export function SpacingField({ property, projection: spacingProjection, domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, showLabel = true, showEmptyState = true, suggestions, }) {
-    const [fieldsAdded, setFieldsAdded] = useState(false);
     const pairDefinitions = [
         { axis: "horizontal", sideProperties: [sideProperty(property, "right"), sideProperty(property, "left")] },
         { axis: "vertical", sideProperties: [sideProperty(property, "top"), sideProperty(property, "bottom")] },
     ];
-    const sideSlots = SIDE_NAMES.map((side) => ({
-        side,
-        icon: property === "padding" ? _jsx(PaddingSideIndicator, { side: side }) : _jsx(MarginSideIndicator, { side: side }),
-        control: (_jsx(TokenField, { property: sideProperty(property, side), selection: selection, tokenRow: findTokenRow(tokenRows, sideProperty(property, side)), domElement: el, editTarget: editTarget, entries: entries, suggestions: suggestions, editMetadata: metadataFor(findTokenRow(tokenRows, sideProperty(property, side))), onAfterEdit: onAfterEdit, chipVariant: "small" })),
-    }));
-    const spacingIsEmpty = SIDE_NAMES.every((side) => property === "inset"
-        ? isEmptyInsetValue(spacingProjection.fields[side].value)
-        : isZeroSpacingValue(spacingProjection.fields[side].value));
-    useEffect(() => {
-        setFieldsAdded(false);
-    }, [el]);
-    useEffect(() => {
-        if (!spacingIsEmpty)
-            setFieldsAdded(false);
-    }, [spacingIsEmpty]);
+    const sideSlots = SIDE_NAMES.map((side) => {
+        const icon = property === "padding" ? _jsx(PaddingSideIndicator, { side: side }) : _jsx(MarginSideIndicator, { side: side });
+        const sideName = sideProperty(property, side);
+        const field = spacingProjection.fields[side];
+        return {
+            side,
+            icon: null,
+            control: (_jsx(TokenField, { property: sideName, selection: selection, tokenRow: findTokenRow(tokenRows, sideName), domElement: el, editTarget: editTarget, entries: entries, suggestions: suggestions, displayValue: isCalcValue(field.authoredValue) && field.value ? field.value : undefined, editMetadata: metadataFor(findTokenRow(tokenRows, sideName)), onAfterEdit: onAfterEdit, chipVariant: "small", leading: icon })),
+        };
+    });
+    const hasSpacing = SIDE_NAMES.some((side) => {
+        // Zero spacing is visually empty regardless of whether it came from a
+        // reset, a component rule, or a token. Open editors stay open below.
+        const value = spacingProjection.fields[side].value.trim();
+        return value !== "" && !isZeroCssValue(value) && (property !== "inset" || value !== "auto");
+    });
+    const visibility = useFieldVisibility(selection?.domElements ?? [el], property, hasSpacing);
     const pairSlots = pairDefinitions.map(({ axis, sideProperties }) => ({
         axis,
-        icon: _jsx(SpacingAxisIndicator, { property: property, axis: axis }),
-        control: (_jsx(PairedTokenField, { displayProperty: `${property}-${axis}`, sideProperties: sideProperties, domElement: el, editTarget: editTarget, axisProjection: spacingProjection.axes[axis], entries: entries, suggestions: suggestions, onAfterEdit: onAfterEdit, chipVariant: "small" })),
+        icon: null,
+        control: (_jsx(PairedTokenField, { displayProperty: `${property}-${axis}`, sideProperties: sideProperties, domElement: el, editTarget: editTarget, axisProjection: spacingProjection.axes[axis], entries: entries, suggestions: suggestions, onAfterEdit: onAfterEdit, chipVariant: "small", leading: _jsx(SpacingAxisIndicator, { property: property, axis: axis }) })),
     }));
-    return (_jsx(SideValuesField, { label: property, "data-test": property === "inset" ? "layout-inset" : `spacing-${property}`, "data-property": property, resetKey: el, pairedControls: pairSlots, showLabel: showLabel, empty: showEmptyState && spacingIsEmpty && !fieldsAdded, onAdd: () => setFieldsAdded(true), emptyAction: property === "inset" ? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-inset", label: "Add Inset Values", title: "Add Inset Values", onClick: () => setFieldsAdded(true), children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : undefined, sides: sideSlots }));
+    return (_jsx(SideValuesField, { label: property, "data-test": property === "inset" ? "layout-inset" : `spacing-${property}`, "data-property": property, resetKey: el, pairedControls: pairSlots, showLabel: showLabel, empty: showEmptyState && !visibility.visible, onAdd: visibility.show, emptyAction: property === "inset" ? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-inset", label: "Add Inset Values", title: "Add Inset Values", onClick: visibility.show, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : undefined, sides: sideSlots }));
 }
 function sideProperty(property, side) {
     return property === "inset" ? side : `${property}-${side}`;
 }
-function isZeroSpacingValue(value) {
-    const normalized = value.trim().toLowerCase();
-    return !normalized || /^-?0(?:\.0+)?(?:[a-z%]+)?$/.test(normalized);
-}
-function isEmptyInsetValue(value) {
-    const normalized = value.trim().toLowerCase();
-    return !normalized || normalized === "auto" || /^-?0(?:\.0+)?(?:[a-z%]+)?$/.test(normalized);
-}
 function PaddingSideIndicator({ side }) {
     if (side === "left") {
         return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "6.75", y1: "7", x2: "6.75", y2: "17", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
@@ -89,14 +83,15 @@ function SpacingAxisIndicator({ property, axis, }) {
     }
     return (_jsxs("svg", { className: "side-values__icon side-values__axis-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "19", y: "6", width: "12", height: "14", rx: "2", transform: "rotate(90 19 6)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "19", y1: "2", x2: "5", y2: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" }), _jsx("line", { x1: "19", y1: "22", x2: "5", y2: "22", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
 }
-function PairedTokenField({ displayProperty, sideProperties, domElement: el, editTarget, axisProjection, entries, suggestions, onAfterEdit, chipVariant, }) {
+function PairedTokenField({ displayProperty, sideProperties, domElement: el, editTarget, axisProjection, entries, suggestions, onAfterEdit, chipVariant, leading, }) {
     const row = pairTokenRow(displayProperty, axisProjection);
     const groupMixed = axisProjection.fields.some((field) => field.value === "Mixed");
     const valuesMatch = axisProjection.state === "shared" && !groupMixed;
     const expression = Boolean(row && (row.capability === "raw" || row.capability === "composite"
         || row.modifiers?.some((modifier) => modifier.kind === "alpha")));
     const calcAuthored = row?.authored ?? row?.declaredValue ?? "";
-    const activeTokenName = !valuesMatch || expression || /\bcalc\s*\(/i.test(calcAuthored) ? null : row.tokenName;
+    const isCalcAuthored = isCalcValue(calcAuthored);
+    const activeTokenName = !valuesMatch || expression || isCalcAuthored ? null : row.tokenName;
     // Some browsers expose the used pixel size for horizontal auto margins.
     // Keep the authored keyword visible because replacing it with that transient
     // size would misrepresent the declaration and change the edit semantics.
@@ -105,7 +100,7 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
         : valuesMatch
             ? calcAuthored.trim().toLowerCase() === "auto"
                 ? calcAuthored.trim()
-                : expression ? row.authored || row.declaredValue || row.resolvedValue : row.resolvedValue
+                : isCalcAuthored ? row.resolvedValue : expression ? row.authored || row.declaredValue || row.resolvedValue : row.resolvedValue
             : axisProjection.fields.map(fieldDisplayValue).join(", ");
     const resolvedValue = valuesMatch
         ? row.resolvedValue
@@ -130,10 +125,13 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
             })));
             if (records.some(Boolean))
                 onAfterEdit?.();
-        }, onUnlink: commitAxisValue }));
+        }, onUnlink: commitAxisValue, leading: leading }));
 }
 function fieldDisplayValue(field) {
-    return field.authoredValue.trim() || field.value;
+    return isCalcValue(field.authoredValue) ? field.value : field.authoredValue.trim() || field.value;
+}
+function isCalcValue(value) {
+    return /\bcalc\s*\(/i.test(value);
 }
 function splitAxisValue(value) {
     let depth = 0;

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

@@ -0,0 +1,5 @@
+/** Marks a temporary inline preview so layout fields do not treat it as authored CSS. */
+export declare function beginLayoutPreview(el: HTMLElement, property: string): void;
+/** Clears a temporary inline preview after the canvas drag is restored or committed. */
+export declare function endLayoutPreview(el: HTMLElement, property: string): void;
+export declare function isLayoutPreview(el: HTMLElement, property: string): boolean;

package/dist/inspector/styleEditors/layoutPreviewState.js

@@ -0,0 +1,19 @@
+const activePreviews = new WeakMap();
+/** Marks a temporary inline preview so layout fields do not treat it as authored CSS. */
+export function beginLayoutPreview(el, property) {
+    const properties = activePreviews.get(el) ?? new Set();
+    properties.add(property);
+    activePreviews.set(el, properties);
+}
+/** Clears a temporary inline preview after the canvas drag is restored or committed. */
+export function endLayoutPreview(el, property) {
+    const properties = activePreviews.get(el);
+    if (!properties)
+        return;
+    properties.delete(property);
+    if (properties.size === 0)
+        activePreviews.delete(el);
+}
+export function isLayoutPreview(el, property) {
+    return activePreviews.get(el)?.has(property) ?? false;
+}

package/dist/inspector/styleEditors/layoutValue.js

@@ -2,6 +2,7 @@ import { getActiveStyleState } from "../shell/styleState.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
 import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { isLayoutPreview } from "./layoutPreviewState.js";
 const DEFAULT_LAYOUT_VALUES = {
     width: "auto",
     height: "auto",
@@ -76,6 +77,8 @@ const INLINE_SHORTHAND_SOURCES = {
  * revert (see `verifyPreview`'s "inline-style" conflict).
  */
 export function inlineAuthoredValue(el, property) {
+    if (isLayoutPreview(el, property))
+        return null;
     const direct = el.style.getPropertyValue(property).trim();
     if (direct)
         return `${property}: ${direct}`;

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

@@ -4,5 +4,16 @@ export type NudgeDirection = -1 | 1;
  * standalone number that the inspector can safely edit.
  */
 export declare function nudgeCssValue(property: string, rawValue: string, direction: NudgeDirection, large?: boolean): string | null;
+/** Returns whether a style field exposes the horizontal drag nudge affordance. */
+export declare function supportsDragNudge(property: string): boolean;
+/**
+ * Applies one regular nudge per four horizontal pointer pixels and one large
+ * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * off-grid value, the first step snaps to the next large-step boundary in the
+ * drag direction.
+ */
+export declare function nudgeCssValueByDrag(property: string, rawValue: string, deltaX: number, large?: boolean, snapToLargeStep?: boolean): string | null;
+/** Returns whether a field has a numeric value that can respond to dragging. */
+export declare function canNudgeCssValueByDrag(property: string, rawValue: string): boolean;
 /** Returns a clamped opacity percentage nudged by 1%, or 10% with Shift. */
 export declare function nudgeOpacityValue(rawValue: string, direction: NudgeDirection, large?: boolean): string | null;

package/dist/inspector/styleEditors/nudgeValue.js

@@ -2,6 +2,9 @@ import { completeCssValue, CSS_NUMBER_SOURCE } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
 const CSS_NUMBER = new RegExp(`^(?:${CSS_NUMBER_SOURCE})$`, "i");
 const CSS_NUMERIC_LITERAL = new RegExp(`^(${CSS_NUMBER_SOURCE})(px|rem|em|%)?$`, "i");
+const DRAG_PIXELS_PER_STEP = 4;
+const LARGE_DRAG_PIXELS_PER_STEP = 2;
+const DRAG_NUDGE_PROPERTY = /^(?:(?:padding|margin)-(?:top|right|bottom|left|horizontal|vertical)|(?:top|right|bottom|left|inset|inset-(?:horizontal|vertical))|(?:row|column)-gap|border-radius|border-(?:top-left|top-right|bottom-right|bottom-left)-radius)$/;
 /**
  * Returns a nudged CSS numeric literal, or null when the value is not a
  * standalone number that the inspector can safely edit.
@@ -14,13 +17,46 @@ export function nudgeCssValue(property, rawValue, direction, large = false) {
     const step = nudgeStep(property, parsed.unit, large);
     if (step === null)
         return null;
-    let next = parsed.number + direction * step;
-    if (isFontWeight(property))
-        next = Math.min(1000, Math.max(1, next));
-    if (isLineHeight(property))
-        next = Math.max(0, next);
+    const next = clampNudgeNumber(property, parsed.number + direction * step);
     return `${formatNumber(next)}${parsed.unit}`;
 }
+/** Returns whether a style field exposes the horizontal drag nudge affordance. */
+export function supportsDragNudge(property) {
+    return DRAG_NUDGE_PROPERTY.test(property);
+}
+/**
+ * Applies one regular nudge per four horizontal pointer pixels and one large
+ * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * off-grid value, the first step snaps to the next large-step boundary in the
+ * drag direction.
+ */
+export function nudgeCssValueByDrag(property, rawValue, deltaX, large = false, snapToLargeStep = false) {
+    const steps = Math.trunc(Math.abs(deltaX) / (large ? LARGE_DRAG_PIXELS_PER_STEP : DRAG_PIXELS_PER_STEP));
+    if (steps === 0)
+        return null;
+    const direction = deltaX < 0 ? -1 : 1;
+    let next = rawValue;
+    let firstRegularStep = 0;
+    if (large && snapToLargeStep) {
+        const snapped = snapCssValueToLargeStep(property, next, direction);
+        if (snapped === null)
+            return null;
+        next = snapped;
+        firstRegularStep = 1;
+    }
+    for (let index = firstRegularStep; index < steps; index += 1) {
+        const nudged = nudgeDragStep(property, next, direction, large);
+        if (nudged === null)
+            return null;
+        next = nudged;
+    }
+    return next;
+}
+/** Returns whether a field has a numeric value that can respond to dragging. */
+export function canNudgeCssValueByDrag(property, rawValue) {
+    return nudgeCssValueByDrag(property, rawValue, DRAG_PIXELS_PER_STEP) !== null
+        || nudgeCssValueByDrag(property, rawValue, -DRAG_PIXELS_PER_STEP) !== null;
+}
 /** Returns a clamped opacity percentage nudged by 1%, or 10% with Shift. */
 export function nudgeOpacityValue(rawValue, direction, large = false) {
     const parsed = parseNumericLiteral(rawValue);
@@ -59,12 +95,64 @@ function nudgeStep(property, unit, large) {
         return large ? 1 : 0.125;
     return null;
 }
+function nudgeDragStep(property, rawValue, direction, large) {
+    if (!isAxisPairProperty(property))
+        return nudgeCssValue(property, rawValue, direction, large);
+    const parts = rawValue.split(",").map((part) => part.trim());
+    if (parts.length !== 2)
+        return nudgeCssValue(property, rawValue, direction, large);
+    const nudgedParts = parts.map((part) => nudgeCssValue(property, part, direction, large));
+    if (nudgedParts.some((part) => part === null))
+        return null;
+    return nudgedParts.join(", ");
+}
+function snapCssValueToLargeStep(property, rawValue, direction) {
+    if (!isAxisPairProperty(property))
+        return snapNumericValueToLargeStep(property, rawValue, direction);
+    const parts = rawValue.split(",").map((part) => part.trim());
+    if (parts.length !== 2)
+        return snapNumericValueToLargeStep(property, rawValue, direction);
+    const snappedParts = parts.map((part) => snapNumericValueToLargeStep(property, part, direction));
+    if (snappedParts.some((part) => part === null))
+        return null;
+    return snappedParts.join(", ");
+}
+function snapNumericValueToLargeStep(property, rawValue, direction) {
+    const normalised = normaliseForNudge(property, rawValue);
+    const parsed = parseNumericLiteral(normalised);
+    if (!parsed)
+        return null;
+    const step = nudgeStep(property, parsed.unit, true);
+    if (step === null)
+        return null;
+    let next = direction > 0
+        ? Math.ceil(parsed.number / step) * step
+        : Math.floor(parsed.number / step) * step;
+    if ((direction > 0 && next <= parsed.number) || (direction < 0 && next >= parsed.number)) {
+        next += direction * step;
+    }
+    next = clampNudgeNumber(property, next);
+    return `${formatNumber(next)}${parsed.unit}`;
+}
 function isLineHeight(property) {
     return property === "line-height" || property.includes("line-height");
 }
 function isFontWeight(property) {
     return property === "font-weight" || property.includes("font-weight");
 }
+function isNonNegativeDimension(property) {
+    return /^(?:padding|(?:row|column)-gap|border-(?:top-left|top-right|bottom-right|bottom-left)-radius|border-radius)/.test(property);
+}
+function isAxisPairProperty(property) {
+    return /^(?:padding|margin|inset)-(?:horizontal|vertical)$/.test(property);
+}
+function clampNudgeNumber(property, value) {
+    if (isFontWeight(property))
+        return Math.min(1000, Math.max(1, value));
+    if (isLineHeight(property) || isNonNegativeDimension(property))
+        return Math.max(0, value);
+    return value;
+}
 function formatNumber(value) {
     const rounded = Number(value.toFixed(12));
     return Object.is(rounded, -0) ? "0" : String(rounded);

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

@@ -0,0 +1,7 @@
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+/** Includes every selected element, even when their resolved zero values agree. */
+export declare function hasAuthoredProperty(selection: StyleSelection | null | undefined, property: string, row?: ResolvedProperty | null): boolean;
+export declare function isZeroCssValue(value: string): boolean;
+/** A direct declaration is meaningful even when its resolved value is empty. */
+export declare function hasAuthoredStyle(row: ResolvedProperty | null | undefined): boolean;

package/dist/inspector/styleEditors/stylePresence.js

@@ -0,0 +1,22 @@
+/** Includes every selected element, even when their resolved zero values agree. */
+export function hasAuthoredProperty(selection, property, row) {
+    return selection
+        ? selection.getProperty(property)?.rows.some(hasAuthoredStyle) ?? false
+        : hasAuthoredStyle(row);
+}
+export function isZeroCssValue(value) {
+    return /^[+-]?(?:0+(?:\.0*)?|\.0+)(?:[a-z%]+)?$/i.test(value.trim());
+}
+/** A direct declaration is meaningful even when its resolved value is empty. */
+export function hasAuthoredStyle(row) {
+    if (!row || row.evidence.inheritedFrom)
+        return false;
+    const value = (row.authored ?? row.declaredValue).trim();
+    if (!value)
+        return false;
+    // Keep tokens and expressions. Only neutral literals from blanket rules
+    // (such as Preflight's `* { padding: 0; border: 0 solid; }`) are baseline.
+    const blanketRule = row.evidence.selector?.split(",").every((selector) => /^(?:\*|\*?::?(?:before|after|backdrop))$/.test(selector.trim()));
+    const neutral = value.split(/\s+/).every((part) => isZeroCssValue(part) || ["none", "solid", "transparent", "currentcolor"].includes(part.toLowerCase()));
+    return !blanketRule || !neutral;
+}

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

@@ -0,0 +1,3 @@
+import type { ResolvedProperty } from "../../css/model/index.js";
+/** Text styling is useful for text runs and containers that author descendant typography. */
+export declare function isTextRelevant(element: HTMLElement, rows: readonly ResolvedProperty[]): boolean;

package/dist/inspector/styleEditors/textRelevance.js

@@ -0,0 +1,35 @@
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+import { hasAuthoredStyle } from "./stylePresence.js";
+const NON_TEXT_ELEMENTS = new Set(["VIDEO", "AUDIO", "IMG", "CANVAS", "IFRAME", "OBJECT", "EMBED", "SCRIPT", "STYLE"]);
+const TEXT_INPUT_TYPES = new Set(["text", "search", "email", "url", "tel", "password", "number", "submit", "reset", "button"]);
+const INLINE_TEXT_ELEMENTS = new Set(["SPAN", "A", "STRONG", "EM", "B", "I", "U", "S", "SMALL", "LABEL", "CODE", "SUP", "SUB"]);
+const TYPOGRAPHY_PROPERTIES = new Set([
+    "font", "font-family", "font-size", "font-style", "font-weight", "line-height",
+    "letter-spacing", "word-spacing", "text-align", "text-transform", "white-space",
+]);
+function hasTextContent(element, includeBlocks) {
+    if (NON_TEXT_ELEMENTS.has(element.tagName))
+        return false;
+    const style = getElementComputedStyle(element);
+    if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse")
+        return false;
+    if (element.tagName === "TEXTAREA" || element.tagName === "SELECT")
+        return true;
+    if (element.tagName === "INPUT")
+        return TEXT_INPUT_TYPES.has(element.getAttribute("type")?.toLowerCase() ?? "text");
+    return Array.from(element.childNodes).some((node) => {
+        if (node.nodeType === 3)
+            return Boolean(node.textContent?.trim());
+        if (node.nodeType !== 1)
+            return false;
+        // SAFETY: ELEMENT_NODE above establishes the child is an Element.
+        const child = node;
+        const inline = INLINE_TEXT_ELEMENTS.has(child.tagName) || getElementComputedStyle(child).display.startsWith("inline");
+        return (includeBlocks || inline) && hasTextContent(child, includeBlocks);
+    });
+}
+/** Text styling is useful for text runs and containers that author descendant typography. */
+export function isTextRelevant(element, rows) {
+    const authorsTypography = rows.some((row) => TYPOGRAPHY_PROPERTIES.has(row.property) && hasAuthoredStyle(row));
+    return hasTextContent(element, authorsTypography);
+}

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

@@ -0,0 +1,6 @@
+/** Keeps an opened field mounted when an edit reaches zero, none, or transparent. */
+export declare function useFieldVisibility(elements: readonly HTMLElement[], property: string, present: boolean): {
+    visible: boolean;
+    show(): void;
+    hide(): void;
+};

package/dist/inspector/styleEditors/useFieldVisibility.js

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { getActiveStyleState } from "../shell/styleState.js";
+/** Keeps an opened field mounted when an edit reaches zero, none, or transparent. */
+export function useFieldVisibility(elements, property, present) {
+    const styleState = getActiveStyleState();
+    const [previous, setPrevious] = useState({ elements, property, styleState, present, visible: present });
+    const selectionChanged = property !== previous.property
+        || styleState !== previous.styleState
+        || elements.length !== previous.elements.length
+        || elements.some((element, index) => element !== previous.elements[index]);
+    let current = previous;
+    if (selectionChanged || present !== previous.present) {
+        current = {
+            elements, property, styleState, present,
+            visible: selectionChanged ? present : previous.visible || present,
+        };
+        // Adjust before rendering children so a selection change cannot briefly
+        // mount the previous selection's controls or interrupt an active drag.
+        setPrevious(current);
+    }
+    return {
+        visible: current.visible,
+        show: () => setPrevious({ ...current, visible: true }),
+        hide: () => setPrevious({ ...current, visible: false }),
+    };
+}