nudge-ui 0.2.5 → 0.2.6

package/dist/inspector/styleEditors/ImageBackgroundEditor.js

@@ -32,7 +32,6 @@ function imageName(src, base) {
         return "Background image";
     }
 }
-/** Preview uploaded images through the existing workspace style edits. */
 export function ImageBackgroundEditor({ element, elements, value, mixed, sizingValues, onUpload, onCss, onSizing }) {
     const input = useRef(null);
     const reader = useRef(null);

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

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

package/dist/inspector/styleEditors/LayoutBlockedIndicator.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
-/** Explains why a layout preview cannot override an inline-authored value. */
 export function LayoutBlockedIndicator({ blockedBy }) {
     return (_jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: "layout-combo-blocked", tooltipDataTest: "layout-combo-blocked-tooltip", className: "layout-combo-blocked", symbolClassName: "layout-combo-blocked__symbol" }));
 }

package/dist/inspector/styleEditors/LayoutComboField.js

@@ -55,11 +55,6 @@ export function LayoutComboField(props) {
         }
     }, [el, mixed, property, revision, projectionAcknowledgementVersion]);
     const inPresets = presets.includes(currentValue);
-    // Inline styles always beat managed-stylesheet previews in the cascade, so
-    // an inline-authored property can never preview. Present the field as
-    // blocked (with the reason) instead of accepting edits that silently snap
-    // back to the computed value on the next revision. Recomputed every render
-    // so external style-attribute edits update the field without a remount.
     const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     function commit(value) {
         if (blockedBy)

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

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface LayoutModeRowProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    isFlexContainer: boolean;
+    isGridContainer: boolean;
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+/** One row picks how the element lays out its children; the rest of the display options sit behind the menu. */
+export declare function LayoutModeRow(props: LayoutModeRowProps): ReactElement;

package/dist/inspector/styleEditors/LayoutModeRow.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconDots, IconLayoutColumns, IconLayoutGrid, IconLayoutRows, IconSquare } from "@tabler/icons-react";
+import { GridAdvancedFields } from "./GridSection.js";
+import { LayoutDropdown } from "./LayoutDropdown.js";
+import { POSITION_OPTIONS, Z_INDEX_PRESETS } from "./PositionControls.js";
+import { layoutModeEdits, layoutModeOf } from "./layoutMode.js";
+import { LayoutValueField, useComputedLayoutValue } from "./FlexControls.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { setStyles } from "../tokens/editActions.js";
+import { IconButton } from "../ui/IconButton.js";
+import { InspectorPopover } from "../ui/InspectorPopover.js";
+import { SegmentedControl } from "../ui/SegmentedControl.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
+const DISPLAY_OPTIONS = ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "none", "contents"];
+const OVERFLOW_OPTIONS = ["visible", "hidden", "clip", "scroll", "auto"];
+const FLEX_DIRECTION_OPTIONS = ["row", "row-reverse", "column", "column-reverse"];
+const FLEX_WRAP_OPTIONS = ["nowrap", "wrap", "wrap-reverse"];
+const ALIGN_ITEMS_OPTIONS = ["stretch", "flex-start", "center", "flex-end", "baseline"];
+const ALIGN_CONTENT_OPTIONS = ["normal", "stretch", "flex-start", "flex-end", "center", "space-between", "space-around"];
+const ICON_PROPS = { size: 16, stroke: 1.8, "aria-hidden": true };
+const MODE_OPTIONS = [
+    { value: "block", label: "Block", icon: _jsx(IconSquare, { ...ICON_PROPS }), testId: "layout-mode-block" },
+    { value: "row", label: "Flex row", icon: _jsx(IconLayoutColumns, { ...ICON_PROPS }), testId: "layout-mode-row" },
+    { value: "column", label: "Flex column", icon: _jsx(IconLayoutRows, { ...ICON_PROPS }), testId: "layout-mode-column" },
+    { value: "grid", label: "Grid", icon: _jsx(IconLayoutGrid, { ...ICON_PROPS }), testId: "layout-mode-grid" },
+];
+/** One row picks how the element lays out its children; the rest of the display options sit behind the menu. */
+export function LayoutModeRow(props) {
+    return (_jsxs("div", { className: "layout__mode-row", "data-test": "layout-mode", children: [_jsx(LayoutModeControl, { ...props }), _jsx(LayoutOptionsMenu, { ...props })] }));
+}
+function LayoutModeControl({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
+    const [display] = useComputedLayoutValue(domElement, "display", "block", revision);
+    const [direction] = useComputedLayoutValue(domElement, "flex-direction", "row", revision);
+    const selectedDisplay = selection?.getProperty("display")?.value;
+    const selectedDirection = selection?.getProperty("flex-direction")?.value;
+    const sharedDisplay = selectedDisplay?.kind === "common" ? selectedDisplay.value : display;
+    const sharedDirection = selectedDirection?.kind === "common" ? selectedDirection.value : direction;
+    const mixedDisplay = selectedDisplay?.kind === "mixed";
+    const mixedDirection = selectedDirection?.kind === "mixed" && sharedDisplay.endsWith("flex");
+    const known = !mixedDisplay && !mixedDirection;
+    const mode = known ? layoutModeOf(sharedDisplay, sharedDirection) : null;
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "display", "flex-direction");
+    function selectMode(next) {
+        if (blockedBy)
+            return;
+        const edits = layoutModeEdits(known ? { display: sharedDisplay, flexDirection: sharedDirection } : null, next);
+        if (edits.length === 0)
+            return;
+        setStyles(editTarget ?? domElement, [...edits]);
+        onAfterEdit?.();
+    }
+    return (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), disabled: blockedBy === null, children: _jsx(SegmentedControl, { value: mode, "aria-label": "Layout mode", "data-test": "layout-mode-control", className: "layout__mode-control", disabled: blockedBy !== null, tooltips: true, options: MODE_OPTIONS, onChange: selectMode }) }));
+}
+function LayoutOptionsMenu({ domElement, editTarget, selection, isFlexContainer, isGridContainer, revision = 0, onAfterEdit, }) {
+    const [open, setOpen] = useState(false);
+    const shared = { domElement, editTarget, selection, revision, onAfterEdit, stacked: true };
+    return (_jsx(InspectorPopover, { "data-test": "layout-options", side: "left", align: "start", triggerTooltip: "Layout options", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Layout options", "data-active": open, "data-test": "layout-options", children: _jsx(IconDots, { size: 16, stroke: 2, "aria-hidden": "true" }) })), open: open, onOpenChange: setOpen, children: _jsxs("div", { className: "layout__options", "data-test": "layout-options-content", children: [_jsx("div", { className: "editor__title", children: "Layout options" }), _jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, ...shared }), _jsx(LayoutDropdown, { property: "overflow", options: OVERFLOW_OPTIONS, ...shared })] }), _jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, ...shared }), _jsx(LayoutValueField, { label: "Z-index", property: "z-index", presets: Z_INDEX_PRESETS, inputOnly: true, domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }), isFlexContainer ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "flex-direction", options: FLEX_DIRECTION_OPTIONS, ...shared }), _jsx(LayoutDropdown, { property: "flex-wrap", options: FLEX_WRAP_OPTIONS, ...shared })] }), _jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "align-items", options: ALIGN_ITEMS_OPTIONS, ...shared }), _jsx(LayoutDropdown, { property: "align-content", options: ALIGN_CONTENT_OPTIONS, ...shared })] })] })) : null, isGridContainer ? _jsx(GridAdvancedFields, { domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }) : null] }) }));
+}

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

@@ -1,7 +1,6 @@
 import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
+import type { ResolvedProperty, TokenEntry } from "../../css/model/index.js";
 import type { SelectedElement } from "../selection/selectionStore.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface LayoutSectionProps {
     element: SelectedElement;
@@ -10,4 +9,5 @@ export interface LayoutSectionProps {
     tokenRows?: ResolvedProperty[];
     onAfterEdit?: () => void;
 }
+/** The element's box: sizing, how it lays out and pads its children, its margin, and its position when not static. */
 export declare function LayoutSection(props: LayoutSectionProps): ReactElement;

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("div", { className: "layout__spacing-primary", children: _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: "quiet", 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;