nudge-ui 0.2.0

package/dist/inspector/styleEditors/LayoutSection.js

@@ -0,0 +1,342 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } 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 { 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 { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.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"];
+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 [flexDirection] = useComputedLayoutValue(el, "flex-direction", "row", layoutRevision);
+    const [flexWrap] = useComputedLayoutValue(el, "flex-wrap", "nowrap", layoutRevision);
+    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, layoutRevision]);
+    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, layoutRevision]);
+    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: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsxs("div", { className: "layout__tool-row", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit })] })] }), isFlexContainer ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-container", children: [_jsx("div", { className: "editor__title", children: "Flex" }), _jsx("div", { className: "layout__flex-toolbar", children: _jsxs("div", { className: "layout__direction-tools", children: [_jsx(FlexDirectionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexWrapToggle, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit })] }) }), _jsxs("div", { className: "layout__flex-lower", children: [mixedFlexDirection ? (_jsx("div", { className: "layout__alignment-grid", "data-test": "layout-flex-axis-mixed", children: "Choose a shared flex direction to edit physical alignment." })) : (_jsx(FlexAlignmentGrid, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit })), _jsx("div", { className: "layout__gap-column", "data-test": "layout-gap", children: _jsxs("div", { className: "layout__gap-fields", children: [_jsxs("div", { className: "layout__spacing-primary", children: [_jsx(FlexGapField, { property: relevantGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit }), _jsx(FlexDistributionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit })] }), isFlexWrapped ? (_jsx(FlexGapField, { property: lineGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit })) : null] }) })] })] })) : null, isFlexChild ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-child", children: [_jsx("div", { className: "editor__title", children: "Flex Child" }), _jsxs("div", { className: "layout__flex-child-fields", children: [_jsx(FlexChildValueField, { label: "Grow", property: "flex-grow", presets: FLEX_GROW_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Shrink", property: "flex-shrink", presets: FLEX_SHRINK_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Basis", property: "flex-basis", presets: FLEX_BASIS_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: layoutRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: layoutRevision, onAfterEdit: notifyAfterEdit })] })] })) : null, isGridContainer || isGridChild ? (_jsx(GridSection, { domElement: el, showContainer: isGridContainer, showChild: isGridChild, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: layoutRevision, onAfterEdit: notifyAfterEdit })) : null, showPositionInsets ? (_jsx(PositionInsets, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: layoutRevision, onAfterEdit: notifyAfterEdit })) : null] })] }));
+}
+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(IconButton, { className: "layout__size-cell layout__size-cell--toggle", variant: "quiet", size: "default", "data-test": expanded ? "layout-size-collapse" : "layout-size-expand", "aria-label": expanded ? "Collapse Size Fields" : "Expand Size Fields", label: expanded ? "Collapse Size Fields" : "Expand Size Fields", title: expanded ? "Collapse Size Fields" : "Expand Size Fields", onClick: () => setExpanded(!expanded), children: expanded ? (_jsx(IconArrowsMinimize, { size: 16, stroke: 1.8, "aria-hidden": "true" })) : (_jsx(IconArrowsMaximize, { size: 16, stroke: 1.8, "aria-hidden": "true" })) }), expanded && fields.slice(2).map(({ property, presets }) => (_jsx(FieldRow, { label: property, "data-test": `layout-size-${property}`, className: `layout__size-cell layout__size-cell--${property}`, children: renderTokenField(property, presets) }, property))), expanded && (_jsx(AspectRatioField, { className: "layout__size-cell layout__size-cell--aspect-ratio", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRow: tokenRows.find((row) => row.property === "aspect-ratio") ?? null, revision: revision, onAfterEdit: onAfterEdit }))] }) }));
+}
+function FlexChildValueField({ label, property, presets, inputOnly = false, domElement, editTarget, selection, revision = 0, onAfterEdit }) {
+    return (_jsx(FieldRow, { label: label, className: "layout__flex-child-field", children: _jsx(LayoutComboField, { property: property, presets: presets, domElement: domElement, editTarget: editTarget, selection: selection, inputOnly: inputOnly, revision: revision, onAfterEdit: onAfterEdit }) }));
+}
+function FlexChildSettingsMenu({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
+    const [open, setOpen] = useState(false);
+    return (_jsx(InspectorPopover, { "data-test": "layout-flex-child-settings", side: "left", align: "start", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Flex child settings", title: "Flex child settings", "data-test": "layout-flex-child-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), open: open, onOpenChange: setOpen, children: _jsxs("div", { className: "layout__flex-child-settings", "data-test": "layout-flex-child-settings-content", children: [_jsx("div", { className: "layout__flex-child-settings-title", children: "Flex Child Settings" }), _jsx(LayoutDropdown, { property: "align-self", options: ALIGN_SELF_OPTIONS, domElement: domElement, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(FlexChildValueField, { label: "Order", property: "order", presets: ORDER_PRESETS, domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }) }));
+}
+function FlexGapField({ property, domElement, editTarget, selection, entries, tokenRows, onAfterEdit }) {
+    const field = (_jsx(GapField, { property: property, domElement: domElement, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }));
+    return (_jsxs(ControlSurface, { className: "layout__spacing-field", children: [property === "column-gap" ? (_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": `layout-spacing-icon-${property}` })) : (_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": `layout-spacing-icon-${property}` })), field] }));
+}
+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");
+    function selectDirection(next) {
+        if (!FLEX_DIRECTION_OPTIONS.includes(next))
+            return;
+        setDirection(next);
+        setStyle(editTarget ?? domElement, "flex-direction", next);
+        onAfterEdit?.();
+    }
+    return (_jsx(SegmentedControl, { value: mixed ? null : orientation, "aria-label": "Flex direction", options: [
+            {
+                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" : ""}`) }));
+}
+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";
+    function toggleWrap() {
+        setStyle(editTarget ?? domElement, "flex-wrap", isWrapped ? "nowrap" : "wrap");
+        onAfterEdit?.();
+    }
+    return (_jsx(IconButton, { variant: "secondary", size: "default", "data-active": isWrapped, "data-test": "layout-flex-wrap-toggle", label: mixed ? "Set Flex Wrap" : isWrapped ? "Disable Flex Wrap" : "Enable Flex Wrap", "aria-pressed": mixed ? "mixed" : isWrapped, onClick: toggleWrap, children: _jsx(IconTextWrap, { size: 16, stroke: 1.8, "aria-hidden": "true" }) }));
+}
+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 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 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) {
+        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", 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, 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);
+    useEffect(() => {
+        if (FLEX_ALIGNMENT_OPTIONS.includes(justify))
+            lastPlacement.current = justify;
+    }, [justify]);
+    function selectDistribution(next) {
+        const value = next === "packed" ? lastPlacement.current : next;
+        setStyle(editTarget ?? domElement, "justify-content", value);
+        onAfterEdit?.();
+    }
+    return (_jsx(PopoverListbox, { className: "layout__distribution-control", query: "", value: distributed ? justify : "packed", open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Item distribution", title: "Item distribution", "data-active": distributed, "data-test": "layout-flex-distribution", children: _jsx(IconAdjustmentsHorizontal, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), triggerDataTest: "layout-flex-distribution", triggerAriaLabel: "Item distribution", items: [
+            { 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, 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);
+    // 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) {
+        // 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?.();
+    }
+    return (_jsxs("div", { className: "layout__alignment-grid", role: "group", "aria-label": "Place flex items", "data-direction": isColumn ? "column" : "row", "data-justify": justify, "data-align": align, "data-distributed": distributed, children: [distributed ? (_jsxs("span", { className: "layout__distribution-preview", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })) : null, rowValues.flatMap((rowValue) => columnValues.map((columnValue) => {
+                const justifyValue = isColumn ? rowValue : columnValue;
+                const alignValue = isColumn ? columnValue : rowValue;
+                const active = justify === justifyValue && align === alignValue;
+                return (_jsx(IconButton, { size: "default", variant: "quiet", className: "layout__alignment-button", "data-active": active, "data-test": `layout-align-${alignValue}-${justifyValue}`, label: formatInspectorLabel(`Align ${alignValue.replace("flex-", "")} And Distribute ${justifyValue.replace("flex-", "")}`), "aria-pressed": active, onClick: () => selectAlignment(justifyValue, alignValue), children: _jsx("span", {}) }, `${alignValue}-${justifyValue}`));
+            }))] }));
+}
+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);
+}

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

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { TokenEntry } from "../../css/model/index.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { SelectedElement } from "../selection/selectionStore.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface OpacityEditorProps {
+    element: SelectedElement;
+    selection?: StyleSelection | null;
+    entries?: TokenEntry[];
+    tokenRows?: ResolvedProperty[];
+    onAfterEdit?: () => void;
+}
+export declare function OpacityEditor({ element, selection, entries, tokenRows, onAfterEdit }: OpacityEditorProps): ReactElement;

package/dist/inspector/styleEditors/OpacityEditor.js

@@ -0,0 +1,34 @@
+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 { getStateStyleValue } from "../shell/stateValue.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { TokenField } from "../tokens/TokenField.js";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+function effectiveOpacity(element, row) {
+    return row?.propertyOpacity?.value
+        ?? normalizeOpacityPercent(row?.resolvedValue ?? "")
+        ?? normalizeOpacityPercent(getStateStyleValue(element, "opacity", "1"))
+        ?? "100%";
+}
+export function OpacityEditor({ element, selection, entries, tokenRows = [], onAfterEdit }) {
+    const el = element.domElement;
+    const editTarget = selection?.target ?? el;
+    const allEntries = entries ?? getNudgeUiTokenEntries();
+    const row = tokenRows.find((candidate) => candidate.property === "opacity") ?? null;
+    const selectedProperty = selection && selection.elements.length > 1
+        ? selection.getProperty("opacity")
+        : null;
+    const mixed = selectedProperty?.value.kind === "mixed";
+    const value = mixed
+        ? "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;
+    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/PositionInsets.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import type { TokenEntry } from "../../css/model/index.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface PositionInsetsProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    entries?: TokenEntry[];
+    tokenRows?: ResolvedProperty[];
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+export declare function PositionInsets({ domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, }: PositionInsetsProps): ReactElement;

package/dist/inspector/styleEditors/PositionInsets.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+import { projectInspectorValues, projectInspectorValuesForSelection } from "../spacing/projection.js";
+import { SpacingField } from "./SpacingBox.js";
+const OFFSET_PRESETS = ["auto", "0", "50%", "100%"];
+export function PositionInsets({ domElement: el, editTarget, selection, entries, tokenRows = [], onAfterEdit, }) {
+    const allEntries = entries ?? getNudgeUiTokenEntries();
+    const projection = selection
+        ? projectInspectorValuesForSelection(selection)
+        : projectInspectorValues(el, tokenRows);
+    return (_jsxs("div", { className: "layout__group", "data-test": "layout-position", children: [_jsx("div", { className: "editor__title", children: "Position" }), _jsx(SpacingField, { property: "inset", projection: projection.spacing.inset, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit, showLabel: false, showEmptyState: false, suggestions: OFFSET_PRESETS })] }));
+}

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

@@ -0,0 +1,29 @@
+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 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;
+export interface SpacingFieldProps {
+    property: "padding" | "margin" | "inset";
+    projection: InspectorSpacingProjection;
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    entries: TokenEntry[];
+    tokenRows: ResolvedProperty[];
+    onAfterEdit?: () => void;
+    showLabel?: boolean;
+    showEmptyState?: boolean;
+    suggestions?: ReadonlyArray<string>;
+}
+export declare function SpacingField({ property, projection: spacingProjection, domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, showLabel, showEmptyState, suggestions, }: SpacingFieldProps): ReactElement;