nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/styleEditors/LayoutSection.js

@@ -1,366 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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";
-import { LayoutComboField } from "./LayoutComboField.js";
-import { GapField } from "./GapField.js";
-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";
-import { PopoverListbox } from "../ui/PopoverListbox.js";
-import { SegmentedControl } from "../ui/SegmentedControl.js";
-import { getStateStyleValue } from "../shell/stateValue.js";
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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"];
-const ALIGN_CONTENT_OPTIONS = ["normal", "stretch", "flex-start", "flex-end", "center", "space-between", "space-around"];
-const ALIGN_SELF_OPTIONS = ["auto", "stretch", "flex-start", "flex-end", "center", "baseline"];
-const FLEX_GROW_PRESETS = ["0", "1", "2", "3"];
-const FLEX_SHRINK_PRESETS = ["0", "1"];
-const FLEX_BASIS_PRESETS = ["auto", "0", "0%", "100%", "50%", "fit-content"];
-const ORDER_PRESETS = ["-1", "0", "1", "2", "3"];
-const FLEX_ALIGNMENT_OPTIONS = ["flex-start", "center", "flex-end"];
-const FLEX_DISTRIBUTION_OPTIONS = ["space-between", "space-around", "space-evenly"];
-const SIZE_PRESETS = ["auto", "0", "100%", "fit-content"];
-const MIN_SIZE_PRESETS = ["0", "min-content", "fit-content"];
-const MAX_WIDTH_PRESETS = ["none", "100%", "100vw", "fit-content"];
-const MAX_HEIGHT_PRESETS = ["none", "100%", "100vh", "fit-content"];
+import { SizeSection } from "./SizeSection.js";
+import { LayoutModeRow } from "./LayoutModeRow.js";
+import { GridContainerControls } from "./GridSection.js";
+import { GridChildSection } from "./GridChildSection.js";
+import { FlexChildControls } from "./ChildPlacement.js";
+import { PositionControls } from "./PositionControls.js";
+import { hasHiddenSizeOverrides } from "./hiddenSizeOverrides.js";
+import { SpacingField, projectSpacing } from "./SpacingField.js";
+import { FlexAlignmentGrid, FlexGapField, FlexMainGapField, FlexWrapToggle, useComputedLayoutValue, } from "./FlexControls.js";
+import { useLayoutContext } from "./useLayoutContext.js";
+/** The element's box: sizing, how it lays out and pads its children, its margin, and its position when not static. */
 export function LayoutSection(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
     const editTarget = selection?.target ?? el;
     const allEntries = entries ?? getNudgeUiTokenEntries();
-    const [primaryIsFlexContainer, setPrimaryIsFlexContainer] = useState(false);
-    const [primaryIsFlexChild, setPrimaryIsFlexChild] = useState(false);
-    const [primaryIsGridContainer, setPrimaryIsGridContainer] = useState(false);
-    const [primaryIsGridChild, setPrimaryIsGridChild] = useState(false);
-    const [primaryPosition, setPrimaryPosition] = useState(() => getStateStyleValue(el, "position", "static"));
-    const [layoutRevision, setLayoutRevision] = useState(0);
-    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";
-    const mixedFlexWrap = selectedWrap?.kind === "mixed";
-    const sharedFlexDirection = selectedDirection?.kind === "common"
-        ? selectedDirection.value
-        : flexDirection;
-    const sharedFlexWrap = selectedWrap?.kind === "common"
-        ? selectedWrap.value
-        : flexWrap;
-    const isFlexWrapped = mixedFlexDirection || mixedFlexWrap || sharedFlexWrap !== "nowrap";
-    const relevantGap = !mixedFlexDirection && sharedFlexDirection.startsWith("column") ? "row-gap" : "column-gap";
-    const lineGap = relevantGap === "row-gap" ? "column-gap" : "row-gap";
-    function notifyAfterEdit() {
-        setLayoutRevision((revision) => revision + 1);
-        onAfterEdit?.();
-    }
-    useEffect(() => {
-        try {
-            const cs = getElementComputedStyle(el);
-            const display = cs.display;
-            setPrimaryIsFlexContainer(display === "flex" || display === "inline-flex");
-            setPrimaryIsGridContainer(display === "grid" || display === "inline-grid");
-            setPrimaryPosition(cs.position);
-        }
-        catch {
-            // noop
-        }
-    }, [el, computedRevision]);
-    useEffect(() => {
-        try {
-            const parentEl = el.parentElement;
-            if (!parentEl) {
-                setPrimaryIsFlexChild(false);
-                setPrimaryIsGridChild(false);
-                return;
-            }
-            const pDisplay = getElementComputedStyle(parentEl).display;
-            setPrimaryIsFlexChild(pDisplay === "flex" || pDisplay === "inline-flex");
-            setPrimaryIsGridChild(pDisplay === "grid" || pDisplay === "inline-grid");
-        }
-        catch {
-            setPrimaryIsFlexChild(false);
-            setPrimaryIsGridChild(false);
-        }
-    }, [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;
-    const isGridChild = selection ? selection.supportsRole("grid-child") : primaryIsGridChild;
-    const selectedPosition = selection?.getProperty("position")?.value;
-    const position = selectedPosition?.kind === "common" ? selectedPosition.value : primaryPosition;
-    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: [_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);
-    const fields = [
-        { property: "width", presets: SIZE_PRESETS },
-        { property: "height", presets: SIZE_PRESETS },
-        { property: "min-width", presets: MIN_SIZE_PRESETS },
-        { property: "min-height", presets: MIN_SIZE_PRESETS },
-        { property: "max-width", presets: MAX_WIDTH_PRESETS },
-        { property: "max-height", presets: MAX_HEIGHT_PRESETS },
-    ];
-    function renderTokenField(property, presets) {
-        return (_jsx(ControlSurface, { className: property === "width" || property === "height" ? "layout__size-field--icon" : undefined, children: _jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRows.find((row) => row.property === property) ?? null, initialValue: meaningfulLayoutValue(el, property), domElement: el, editTarget: editTarget, entries: entries, suggestions: presets, leading: property === "width"
-                    ? _jsx(IconLetterW, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-                    : property === "height"
-                        ? _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(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", 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;
-    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);
-    const selectedDirection = selection?.getProperty("flex-direction")?.value;
-    const mixed = selectedDirection?.kind === "mixed";
-    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?.();
-    }
-    const control = (_jsx(SegmentedControl, { value: mixed ? null : orientation, "aria-label": "Flex direction", disabled: blockedBy !== null, options: [
-            {
-                value: "row",
-                label: "Set Flex Direction To Row",
-                testId: "layout-direction-row",
-                icon: (_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: _jsx("path", { d: "M2 8h11M9 4l4 4-4 4", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "var(--icon-stroke-width)" }) })),
-            },
-            {
-                value: "column",
-                label: "Set Flex Direction To Column",
-                testId: "layout-direction-column",
-                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);
-    const selectedWrap = selection?.getProperty("flex-wrap")?.value;
-    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(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);
-    const [wrap] = useComputedLayoutValue(domElement, "flex-wrap", "nowrap", revision);
-    const [alignContent] = useComputedLayoutValue(domElement, "align-content", "normal", revision);
-    const [alignItems] = useComputedLayoutValue(domElement, "align-items", "stretch", revision);
-    const [open, setOpen] = useState(false);
+    const { revision, notifyAfterEdit, isFlexContainer, isGridContainer, isFlexChild, isGridChild, position } = useLayoutContext(el, selection, onAfterEdit);
+    const common = { domElement: el, editTarget, selection, revision, onAfterEdit: notifyAfterEdit };
+    const spacing = projectSpacing(el, selection, tokenRows);
+    const spacingProps = { domElement: el, editTarget, selection, entries: allEntries, tokenRows, onAfterEdit: notifyAfterEdit };
+    const childPlacement = isFlexChild || isGridChild ? (_jsxs(_Fragment, { children: [isFlexChild ? _jsx(FlexChildControls, { ...common }) : null, isGridChild ? _jsx(GridChildSection, { ...common }) : null] })) : null;
+    return (_jsxs("div", { className: "editor", "data-test": "layout-section", children: [_jsx("div", { className: "editor__title", children: "Layout" }), _jsxs("div", { className: "layout", children: [_jsx(SizeSection, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: revision, onAfterEdit: notifyAfterEdit, extras: childPlacement, modified: hasHiddenSizeOverrides(el, { flexChild: isFlexChild, gridChild: isGridChild }) }), _jsx(LayoutModeRow, { ...common, isFlexContainer: isFlexContainer, isGridContainer: isGridContainer }), isFlexContainer ? _jsx(FlexContainerControls, { ...common, entries: allEntries, tokenRows: tokenRows }) : null, isGridContainer ? _jsx(GridContainerControls, { ...common, entries: allEntries, tokenRows: tokenRows }) : null, _jsx(SpacingField, { property: "padding", showLabel: false, showEmptyState: false, projection: spacing.padding, ...spacingProps }), _jsx(SpacingField, { property: "margin", projection: spacing.margin, ...spacingProps }), position !== "static" ? _jsx(PositionControls, { ...spacingProps, position: position, revision: revision }) : null] })] }));
+}
+/** Placement grid, gaps, wrap and distribution; direction lives in the layout mode row. */
+function FlexContainerControls({ entries, tokenRows, ...common }) {
+    const { domElement, selection, revision } = common;
+    const [flexDirection] = useComputedLayoutValue(domElement, "flex-direction", "row", revision);
+    const [flexWrap] = useComputedLayoutValue(domElement, "flex-wrap", "nowrap", revision);
     const selectedDirection = selection?.getProperty("flex-direction")?.value;
     const selectedWrap = selection?.getProperty("flex-wrap")?.value;
     const mixedDirection = selectedDirection?.kind === "mixed";
-    const mixedWrap = selectedWrap?.kind === "mixed";
-    const sharedDirection = selectedDirection?.kind === "common"
-        ? selectedDirection.value
-        : direction;
-    const sharedWrap = selectedWrap?.kind === "common" ? selectedWrap.value : wrap;
-    const orientation = sharedDirection.startsWith("column") ? "column" : "row";
-    const crossAxis = mixedDirection ? "cross axis" : orientation === "column" ? "width" : "height";
-    const isStretching = normalizeFlexAlign(alignItems) === "stretch";
-    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}`,
-                label: formatInspectorLabel(reverseDirection),
-                trailing: "Flex Direction",
-                current: sharedDirection === reverseDirection,
-                "data-test": "layout-flex-setting-direction-reverse",
-            }]),
-        ...(mixedWrap ? [] : [{
-                value: "flex-wrap:wrap-reverse",
-                label: formatInspectorLabel("wrap-reverse"),
-                trailing: "Flex Wrap",
-                current: sharedWrap === "wrap-reverse",
-                "data-test": "layout-flex-setting-wrap-reverse",
-            }]),
-        ...ALIGN_CONTENT_OPTIONS.map((value) => ({
-            value: `align-content:${value}`,
-            label: formatInspectorLabel(value),
-            trailing: "Align Content",
-            current: alignContent === value,
-            "data-test": `layout-flex-setting-align-content-${value}`,
-        })),
-        {
-            value: "align-items:baseline",
-            label: "Text baseline",
-            trailing: "Cross-axis fit",
-            current: alignItems === "baseline",
-            "data-test": "layout-flex-setting-align-items-baseline",
-        },
-        {
-            value: "align-items:stretch",
-            label: `Children fill ${crossAxis}`,
-            trailing: "Cross-axis fit",
-            current: isStretching,
-            "data-test": "layout-flex-setting-align-items-stretch",
-        },
-    ];
-    function selectSetting(setting) {
-        if (blockedBy)
-            return;
-        const separator = setting.indexOf(":");
-        if (separator < 0)
-            return;
-        const property = setting.slice(0, separator);
-        const value = setting.slice(separator + 1);
-        setStyle(editTarget ?? domElement, property, value);
-        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", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: items.map((item) => ({
-            value: item.value,
-            label: item.label,
-            trailing: item.trailing,
-            leading: item.current ? _jsx(IconCheck, { size: 14, stroke: 2, "aria-hidden": "true" }) : undefined,
-            "data-test": item["data-test"],
-        })), onQueryChange: () => undefined, onOpenChange: setOpen, onSelect: selectSetting }));
-}
-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", "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" },
-            { value: "space-evenly", label: "Spread evenly" },
-        ].map((item) => ({
-            ...item,
-            leading: (distributed ? justify : "packed") === item.value
-                ? _jsx(IconCheck, { size: 14, stroke: 2, "aria-hidden": "true" })
-                : undefined,
-            "data-test": `layout-flex-distribution-${item.value}`,
-        })), onQueryChange: () => undefined, onOpenChange: setOpen, onSelect: (next) => {
-            selectDistribution(next);
-            setOpen(false);
-        } }));
-}
-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);
-    const justify = normalizeFlexJustify(computedJustify);
-    const align = normalizeFlexAlign(computedAlign);
-    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.
-    const rowValues = isColumn
-        ? isReverse ? [...FLEX_ALIGNMENT_OPTIONS].reverse() : FLEX_ALIGNMENT_OPTIONS
-        : FLEX_ALIGNMENT_OPTIONS;
-    const columnValues = !isColumn && isReverse
-        ? [...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
-        // packed default.
-        const resolvedJustify = distributed ? justify : nextJustify;
-        setJustify(resolvedJustify);
-        setAlign(nextAlign);
-        setStyles(editTarget ?? domElement, [
-            { property: "justify-content", value: resolvedJustify },
-            { property: "align-items", value: nextAlign },
-        ]);
-        onAfterEdit?.();
-    }
-    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;
-                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
-    // flex containers. Show the physical placement the user will actually see.
-    return value === "normal" ? "flex-start" : value;
-}
-function normalizeFlexAlign(value) {
-    // The initial `normal` value resolves to stretch for flex items.
-    return value === "normal" ? "stretch" : value;
-}
-function useComputedLayoutValue(domElement, property, fallback, revision) {
-    const [value, setValue] = useState(() => readLayoutValue(domElement, property, fallback));
-    useEffect(() => {
-        setValue(readLayoutValue(domElement, property, fallback));
-    }, [domElement, property, fallback, revision]);
-    return [value, setValue];
-}
-function readLayoutValue(domElement, property, fallback) {
-    return getStateStyleValue(domElement, property, fallback);
+    const sharedDirection = selectedDirection?.kind === "common" ? selectedDirection.value : flexDirection;
+    const sharedWrap = selectedWrap?.kind === "common" ? selectedWrap.value : flexWrap;
+    const isWrapped = mixedDirection || selectedWrap?.kind === "mixed" || sharedWrap !== "nowrap";
+    const mainGap = !mixedDirection && sharedDirection.startsWith("column") ? "row-gap" : "column-gap";
+    const lineGap = mainGap === "row-gap" ? "column-gap" : "row-gap";
+    return (_jsxs("div", { className: "layout__flex", "data-test": "layout-flex-container", children: [mixedDirection ? (_jsx("div", { className: "layout__alignment-grid", "data-test": "layout-flex-axis-mixed", children: "Choose a shared flex direction to edit physical alignment." })) : (_jsx(FlexAlignmentGrid, { ...common })), _jsxs("div", { className: "layout__flex-gaps", "data-test": "layout-gap", children: [_jsx(FlexMainGapField, { property: mainGap, entries: entries, tokenRows: tokenRows, ...common }), isWrapped ? _jsx(FlexGapField, { property: lineGap, entries: entries, tokenRows: tokenRows, ...common }) : null] }), _jsx("div", { className: "layout__flex-toggles", children: _jsx(FlexWrapToggle, { ...common }) })] }));
 }

package/dist/inspector/styleEditors/OpacityEditor.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconBackground } from "@tabler/icons-react";
 import { normalizeOpacityPercent } from "../../css/value-semantics/index.js";
 import { metadataFor } from "./rowLookup.js";
+import { deriveActiveTokenName } from "./fieldValue.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { TokenField } from "../tokens/TokenField.js";
@@ -25,10 +26,11 @@ export function OpacityEditor({ element, selection, entries, tokenRows = [], onA
         ? "Mixed"
         : selectedProperty?.value.kind === "common" ? selectedProperty.value.value : effectiveOpacity(el, row);
     const editable = row?.propertyOpacity?.editable ?? true;
-    const activeToken = mixed
-        ? null
-        : selectedProperty
-            ? selectedProperty.token.kind === "common" ? selectedProperty.token.name : null
-            : row?.propertyOpacity?.tokenName ?? row?.tokenName;
+    const activeToken = deriveActiveTokenName({
+        row,
+        selectedProperty,
+        mixed,
+        override: selectedProperty ? null : row?.propertyOpacity?.tokenName ?? null,
+    });
     return (_jsxs("div", { className: "appearance__field opacity-editor", "data-test": "opacity-editor", children: [_jsx("div", { className: "appearance__field-label", children: "Opacity" }), _jsx(ControlSurface, { "data-test": "opacity-control", children: _jsx(TokenField, { property: "opacity", semanticSlot: "opacity", tokenRow: row, selection: selection, initialValue: value, displayValue: value, domElement: el, editTarget: editTarget, entries: allEntries, inputDataTest: "opacity-input", editMetadata: metadataFor(row), disabled: !editable, mixed: mixed, formatRawValue: (raw) => normalizeOpacityPercent(raw) ?? "", leading: _jsx(IconBackground, { size: 16, stroke: 1.8, "aria-hidden": "true" }), trailing: activeToken ? _jsx("span", { className: "opacity-editor__effective", "data-test": "opacity-effective", children: value }) : undefined, label: "Opacity", onAfterEdit: onAfterEdit, chipVariant: "small" }) })] }));
 }

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

@@ -0,0 +1,18 @@
+import type { ReactElement } from "react";
+import type { ResolvedProperty, TokenEntry } from "../../css/model/index.js";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export declare const POSITION_OPTIONS: string[];
+export declare const Z_INDEX_PRESETS: string[];
+export interface PositionControlsProps {
+    domElement: HTMLElement;
+    editTarget: EditTarget;
+    selection?: StyleSelection | null;
+    entries: TokenEntry[];
+    tokenRows: ResolvedProperty[];
+    position: string;
+    revision: number;
+    onAfterEdit: () => void;
+}
+/** Position, z-index and insets for an element that is not static; static elements set these from the options menu. */
+export declare function PositionControls({ domElement, editTarget, selection, entries, tokenRows, position, revision, onAfterEdit }: PositionControlsProps): ReactElement;

package/dist/inspector/styleEditors/PositionControls.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LayoutDropdown } from "./LayoutDropdown.js";
+import { LayoutValueField } from "./FlexControls.js";
+import { SpacingField, projectSpacing } from "./SpacingField.js";
+export const POSITION_OPTIONS = ["static", "relative", "absolute", "fixed", "sticky"];
+export const Z_INDEX_PRESETS = ["auto", "0", "1", "10", "100"];
+const OFFSET_PRESETS = ["auto", "0", "50%", "100%"];
+/** Position, z-index and insets for an element that is not static; static elements set these from the options menu. */
+export function PositionControls({ domElement, editTarget, selection, entries, tokenRows, position, revision, onAfterEdit }) {
+    const common = { domElement, editTarget, selection, revision, onAfterEdit };
+    const spacing = projectSpacing(domElement, selection, tokenRows);
+    const spacingProps = { domElement, editTarget, selection, entries, tokenRows, onAfterEdit };
+    const showAnchoredInsets = selection ? selection.supportsRole("inset-position") : position === "absolute" || position === "fixed";
+    const showOffsetInsets = selection ? selection.supportsRole("relative-position") : position === "relative" || position === "sticky";
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "layout__tool-row", "data-test": "layout-position", children: [_jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, ...common }), _jsx(LayoutValueField, { label: "Z-index", property: "z-index", presets: Z_INDEX_PRESETS, inputOnly: true, ...common })] }), showAnchoredInsets ? (_jsx(SpacingField, { property: "inset", projection: spacing.inset, showLabel: false, showEmptyState: false, suggestions: OFFSET_PRESETS, ...spacingProps })) : null, showOffsetInsets ? _jsx(SpacingField, { property: "inset", projection: spacing.inset, ...spacingProps }) : null] }));
+}

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

@@ -0,0 +1,18 @@
+import type { ReactElement, ReactNode } from "react";
+import type { ResolvedProperty, TokenEntry } from "../../css/model/index.js";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface SizeSectionProps {
+    /** Rows shown under the min and max fields while expanded, such as flex or grid child controls. */
+    extras?: ReactNode;
+    /** Something behind the expander differs from its initial value. */
+    modified?: boolean;
+    domElement: HTMLElement;
+    editTarget: EditTarget;
+    selection?: StyleSelection | null;
+    entries: TokenEntry[];
+    tokenRows: ResolvedProperty[];
+    revision: number;
+    onAfterEdit?: () => void;
+}
+export declare function SizeSection({ domElement: el, editTarget, selection, entries, tokenRows, revision, onAfterEdit, extras, modified }: SizeSectionProps): ReactElement;

package/dist/inspector/styleEditors/SizeSection.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconChevronDown, IconChevronUp, IconLetterH, IconLetterW } from "@tabler/icons-react";
+import { TokenField } from "../tokens/TokenField.js";
+import { AspectRatioField } from "./AspectRatioField.js";
+import { meaningfulLayoutValue } from "./layoutValue.js";
+import { IconButton } from "../ui/IconButton.js";
+import { FieldRow } from "../ui/FieldRow.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { getElementComputedStyle, getElementWindow } from "../runtime/domRealm.js";
+const PLAIN_PIXEL_VALUE = /^-?\d*\.?\d+px$/;
+/** The used pixel size of a dimension, kept current as the element resizes. */
+function useResolvedDimension(el, property, revision) {
+    const [resolved, setResolved] = useState(() => readResolvedDimension(el, property));
+    useEffect(() => {
+        const update = () => setResolved(readResolvedDimension(el, property));
+        update();
+        // SAFETY: the element's window is a same-realm Window, and the runtime realm exposes the observer constructors as project-wide globals.
+        const { ResizeObserver: ResizeObserverCtor } = getElementWindow(el);
+        if (!ResizeObserverCtor)
+            return;
+        const observer = new ResizeObserverCtor(update);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [el, property, revision]);
+    return resolved;
+}
+function readResolvedDimension(el, property) {
+    try {
+        const pixels = Number.parseFloat(getElementComputedStyle(el)[property]);
+        return Number.isFinite(pixels) ? pixels : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** Shows the used size beside an authored keyword or expression, so `auto` still tells you how big the element is. */
+function ResolvedDimension({ el, property, revision }) {
+    const resolved = useResolvedDimension(el, property, revision);
+    const authored = meaningfulLayoutValue(el, property).trim();
+    if (resolved === null || PLAIN_PIXEL_VALUE.test(authored))
+        return null;
+    // Whole pixels keep the label short enough to sit beside the authored value; the title keeps the exact figure.
+    return _jsx("span", { className: "layout__resolved", "data-test": `layout-resolved-${property}`, title: `${Math.round(resolved * 100) / 100}px`, children: Math.round(resolved) });
+}
+const SIZE_PRESETS = ["auto", "0", "100%", "fit-content"];
+const MIN_SIZE_PRESETS = ["0", "min-content", "fit-content"];
+const MAX_WIDTH_PRESETS = ["none", "100%", "100vw", "fit-content"];
+const MAX_HEIGHT_PRESETS = ["none", "100%", "100vh", "fit-content"];
+export function SizeSection({ domElement: el, editTarget, selection, entries, tokenRows, revision, onAfterEdit, extras, modified = false }) {
+    const [expanded, setExpanded] = useState(false);
+    const fields = [
+        { property: "width", presets: SIZE_PRESETS },
+        { property: "height", presets: SIZE_PRESETS },
+        { property: "min-width", presets: MIN_SIZE_PRESETS },
+        { property: "min-height", presets: MIN_SIZE_PRESETS },
+        { property: "max-width", presets: MAX_WIDTH_PRESETS },
+        { property: "max-height", presets: MAX_HEIGHT_PRESETS },
+    ];
+    const multipleSelected = (selection?.domElements.length ?? 1) > 1;
+    function renderTokenField(property, presets) {
+        const dimension = property === "width" || property === "height" ? property : null;
+        return (_jsx(ControlSurface, { className: property === "width" || property === "height" ? "layout__size-field--icon" : undefined, children: _jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRows.find((row) => row.property === property) ?? null, initialValue: meaningfulLayoutValue(el, property), domElement: el, editTarget: editTarget, entries: entries, suggestions: presets, leading: property === "width"
+                    ? _jsx(IconLetterW, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
+                    : property === "height"
+                        ? _jsx(IconLetterH, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
+                        : undefined, trailing: dimension && !multipleSelected ? _jsx(ResolvedDimension, { el: el, property: dimension, revision: revision }) : undefined, onAfterEdit: onAfterEdit }) }));
+    }
+    return (_jsxs("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-modified": modified ? "true" : undefined, "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(IconChevronUp, { size: 16, stroke: 1.8, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { 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 }))] }), expanded ? extras : null] }));
+}

package/dist/inspector/styleEditors/{SpacingBox.d.ts → SpacingField.d.ts}

@@ -1,18 +1,11 @@
 import type { ReactElement } from "react";
 import type { ResolvedProperty } from "../../css/model/index.js";
 import type { TokenEntry } from "../../css/model/index.js";
-import type { SelectedElement } from "../selection/selectionStore.js";
-import { type InspectorSpacingProjection } from "../spacing/projection.js";
+import { projectInspectorValues, type InspectorSpacingProjection } from "../spacing/projection.js";
 import type { EditTarget } from "../selection/editTarget.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
-export interface SpacingBoxProps {
-    element: SelectedElement;
-    selection?: StyleSelection | null;
-    entries?: TokenEntry[];
-    tokenRows?: ResolvedProperty[];
-    onAfterEdit?: () => void;
-}
-export declare function SpacingBox(props: SpacingBoxProps): ReactElement;
+/** Values for one selection, projected from its computed styles or the shared selection model. */
+export declare function projectSpacing(element: HTMLElement, selection: StyleSelection | null | undefined, tokenRows: ResolvedProperty[]): ReturnType<typeof projectInspectorValues>["spacing"];
 export interface SpacingFieldProps {
     property: "padding" | "margin" | "inset";
     projection: InspectorSpacingProjection;