nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/styleEditors/BorderEditor.js

@@ -3,9 +3,8 @@ import { useEffect, useState } from "react";
 import { IconBorderSides, IconBorderStyle2, IconCheck, IconMinus, IconPlus, } from "@tabler/icons-react";
 import { findTokenRow } from "./rowLookup.js";
 import { TokenField } from "../tokens/TokenField.js";
-import { setStyle, setStyles } from "../tokens/editActions.js";
+import { setStyles } from "../tokens/editActions.js";
 import { FieldRow } from "../ui/FieldRow.js";
-import { SIDE_NAMES } from "../ui/SideValuesField.js";
 import { IconButton } from "../ui/IconButton.js";
 import { ToggleButton } from "../ui/ToggleButton.js";
 import { formatInspectorLabel } from "../ui/labels.js";
@@ -13,107 +12,23 @@ import { getStateStyleValue } from "../shell/stateValue.js";
 import { PopoverListbox } from "../ui/PopoverListbox.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
-import { isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
 import { Tooltip } from "../ui/Tooltip.js";
 import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
 import { inlineBlockedBy } from "./inlineAuthored.js";
-const BORDER_STYLES = ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
-const INVISIBLE_BORDER_STYLES = new Set(["none", "hidden"]);
-const BORDER_SIDES = SIDE_NAMES.map((side) => `border-${side}`);
-function borderStyleValue(el, rows, property) {
-    const row = findTokenRow(rows, property);
-    const structured = row?.structure?.style?.trim();
-    if (structured)
-        return structured.toLowerCase();
-    const authored = (row?.authored ?? row?.declaredValue ?? "").trim().toLowerCase();
-    if (authored && BORDER_STYLES.includes(authored))
-        return authored;
-    return (getStateStyleValue(el, property, "none") || "none").toLowerCase();
+import { BORDER_SIDES, BORDER_STYLES, borderDeclarations, borderProperty, hasVisibleBorder, readBorderEditor, } from "./borderModel.js";
+function stateStyleReader(el) {
+    return (property, fallback) => getStateStyleValue(el, property, fallback);
 }
-function borderWidthValue(el, rows, property) {
-    const row = findTokenRow(rows, property);
-    if (row?.structure?.width)
-        return row.structure.width.trim();
-    return (row?.authored
-        || row?.declaredValue
-        || row?.resolvedValue
-        || getStateStyleValue(el, property, "0px")
-        || "0px").trim();
+function commitBorderIntent(target, source, intent, onAfterEdit) {
+    const declarations = borderDeclarations(source, intent);
+    if (declarations.length === 0)
+        return false;
+    setStyles(target, declarations);
+    onAfterEdit?.();
+    return true;
 }
-function borderColorValue(el, rows, property) {
-    const row = findTokenRow(rows, property);
-    if (row?.structure?.color)
-        return row.structure.color.trim();
-    return (row?.authored
-        || row?.declaredValue
-        || row?.resolvedValue
-        || getStateStyleValue(el, property, "currentcolor")
-        || "currentcolor").trim();
-}
-/** Effective per-side value used to decide linked vs individual UI. */
-function sideComponentSignature(el, rows, property) {
-    const row = findTokenRow(rows, property);
-    if (property.endsWith("-width")) {
-        return `w:${borderWidthValue(el, rows, property).toLowerCase()}|t:${row?.tokenName ?? ""}`;
-    }
-    if (property.endsWith("-style")) {
-        return `s:${borderStyleValue(el, rows, property)}`;
-    }
-    if (property.endsWith("-color")) {
-        return `c:${borderColorValue(el, rows, property).toLowerCase()}|t:${row?.tokenName ?? ""}`;
-    }
-    return `${row?.authored ?? ""}|${row?.resolvedValue ?? getStateStyleValue(el, property)}`;
-}
-function sideValueForLink(el, rows, property, fallback = "") {
-    if (property.endsWith("-width"))
-        return borderWidthValue(el, rows, property) || fallback;
-    if (property.endsWith("-style"))
-        return borderStyleValue(el, rows, property) || fallback;
-    if (property.endsWith("-color"))
-        return borderColorValue(el, rows, property) || fallback;
-    return fallback;
-}
-function borderLinkDeclaration(el, rows, shorthand, sideProperties) {
-    const sharedValue = sideValueForLink(el, rows, sideProperties[0], shorthand === "border-style" ? "solid" : "");
-    return sharedValue ? { property: shorthand, value: sharedValue } : null;
-}
-function linkedTokenRow(rows, shorthand, sideProperties) {
-    const direct = findTokenRow(rows, shorthand);
-    if (direct)
-        return direct;
-    const first = findTokenRow(rows, sideProperties[0]);
-    return first ? { ...first, property: shorthand } : null;
-}
-/**
- * Sides are linked when every face shares the same effective component value.
- * Uses structured width/style/color parts (not the full authored shorthand string)
- * so four different `border-*` shorthands correctly expand the UI.
- */
-function valuesAreLinked(el, rows, shorthand, sideProperties) {
-    const hasDirectRow = Boolean(findTokenRow(rows, shorthand));
-    const hasSideRows = sideProperties.some((property) => Boolean(findTokenRow(rows, property)));
-    // A lone shorthand with no per-side overrides is inherently linked.
-    if (hasDirectRow && !hasSideRows)
-        return true;
-    const signatures = sideProperties.map((property) => sideComponentSignature(el, rows, property));
-    return new Set(signatures).size === 1;
-}
-/** Initial visibility follows the effective border, including stylesheet resets. */
-function hasBorderPresence(el) {
-    return SIDE_NAMES.some((side) => {
-        const style = getStateStyleValue(el, `border-${side}-style`, "none").toLowerCase();
-        if (INVISIBLE_BORDER_STYLES.has(style))
-            return false;
-        const width = getStateStyleValue(el, `border-${side}-width`, "0px");
-        return !isZeroCssValue(width);
-    });
-}
-/**
- * Linked presentation from cascade data + optional user toggle.
- * Divergent faces always open; equal faces start linked but can expand.
- * Linking divergent faces is optimistic until cascade rows catch up.
- */
+/** User toggle is optimistic: it holds until the cascade-derived state catches up. */
 function useBorderLinkedState(dataLinked, resetKey) {
     const [userUnlinked, setUserUnlinked] = useState(false);
     const [userLinked, setUserLinked] = useState(false);
@@ -147,36 +62,25 @@ export function BorderEditor(props) {
     const editTarget = selection?.target ?? el;
     const isGroup = Boolean(selection && selection.elements.length > 1);
     const allEntries = entries ?? getNudgeUiTokenEntries();
-    const borderWidthProperties = BORDER_SIDES.map((side) => `${side}-width`);
-    const borderStyleProperties = BORDER_SIDES.map((side) => `${side}-style`);
-    const borderColorProperties = BORDER_SIDES.map((side) => `${side}-color`);
     const borderBlockedBy = inlineBlockedBy(selectedElements, "border", "border-width", "border-style", "border-color");
-    const borderWidthDataLinked = valuesAreLinked(el, tokenRows, "border-width", borderWidthProperties);
-    const borderStyleDataLinked = valuesAreLinked(el, tokenRows, "border-style", borderStyleProperties);
-    const borderColorDataLinked = valuesAreLinked(el, tokenRows, "border-color", borderColorProperties);
-    const allDataLinked = !isGroup && borderWidthDataLinked && borderStyleDataLinked && borderColorDataLinked;
-    const [borderLinked, setBorderLinked] = useBorderLinkedState(allDataLinked, el);
-    const borderRow = findTokenRow(tokenRows, "border");
-    const hasStructuredBorderRows = tokenRows.some((row) => Boolean(row.structure));
-    const rawBorderFallback = !isGroup && Boolean(borderRow && !borderRow.structure && !hasStructuredBorderRows);
-    const linkedBorderStyle = borderStyleValue(el, tokenRows, "border-style");
-    const showWidthAndColor = !(borderLinked && INVISIBLE_BORDER_STYLES.has(linkedBorderStyle));
-    const hasBorder = selectedElements.some(hasBorderPresence);
+    const source = { rows: tokenRows, computed: stateStyleReader(el) };
+    const border = readBorderEditor(source, { group: isGroup });
+    const [borderLinked, setBorderLinked] = useBorderLinkedState(border.sidesLinked, el);
+    const showWidthAndColor = !borderLinked || border.linkedStyleDraws;
+    const hasBorder = selectedElements.some((element) => hasVisibleBorder(stateStyleReader(element)));
     const visibility = useFieldVisibility(selectedElements, "border", hasBorder);
     const showBorderControls = visibility.visible;
     function handleAddBorder() {
         if (borderBlockedBy)
             return;
-        setStyle(editTarget, "border", "1px solid");
+        commitBorderIntent(editTarget, source, { kind: "add" }, onAfterEdit);
         visibility.show();
-        onAfterEdit?.();
     }
     function handleRemoveBorder() {
         if (borderBlockedBy)
             return;
-        setStyle(editTarget, "border", "0 solid");
+        commitBorderIntent(editTarget, source, { kind: "remove" }, onAfterEdit);
         visibility.hide();
-        onAfterEdit?.();
     }
     function handleExpand() {
         setBorderLinked(false);
@@ -185,23 +89,18 @@ export function BorderEditor(props) {
         if (borderBlockedBy)
             return;
         setBorderLinked(true);
-        const declarations = [
-            borderLinkDeclaration(el, tokenRows, "border-style", borderStyleProperties),
-            borderLinkDeclaration(el, tokenRows, "border-width", borderWidthProperties),
-            borderLinkDeclaration(el, tokenRows, "border-color", borderColorProperties),
-        ].filter((declaration) => declaration !== null);
-        if (declarations.length > 0) {
-            setStyles(editTarget, declarations);
-            onAfterEdit?.();
-        }
+        commitBorderIntent(editTarget, source, { kind: "link-sides" }, onAfterEdit);
+    }
+    function handleSelectStyle(property, style) {
+        return commitBorderIntent(editTarget, source, { kind: "set-style", property, style }, onAfterEdit);
     }
-    const sideRows = SIDE_NAMES.map((side, index) => ({
+    const sideRows = BORDER_SIDES.map((side) => ({
         side,
-        color: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderColorProperties[index], selection: selection, tokenRow: findTokenRow(tokenRows, borderColorProperties[index]), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) })),
-        width: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderWidthProperties[index], selection: selection, tokenRow: findTokenRow(tokenRows, borderWidthProperties[index]), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) })),
-        style: (_jsx(BorderStyleSettingsMenu, { property: borderStyleProperties[index], tokenRow: findTokenRow(tokenRows, borderStyleProperties[index]), domElement: el, editTarget: editTarget, selection: selection, dataTest: `border-style-${side}`, onAfterEdit: onAfterEdit })),
+        color: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderProperty("color", side), selection: selection, tokenRow: findTokenRow(tokenRows, borderProperty("color", side)), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) })),
+        width: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderProperty("width", side), selection: selection, tokenRow: findTokenRow(tokenRows, borderProperty("width", side)), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) })),
+        style: (_jsx(BorderStyleSettingsMenu, { property: borderProperty("style", side), tokenRow: findTokenRow(tokenRows, borderProperty("style", side)), domElement: el, selection: selection, dataTest: `border-style-${side}`, onSelectStyle: handleSelectStyle })),
     }));
-    return (_jsxs("div", { className: `editor`, "data-test": "border-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Border" }), showBorderControls ? (_jsx(Tooltip, { content: inlineStyleWarningContent(borderBlockedBy), children: _jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", disabled: borderBlockedBy !== null, onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", disabled: borderBlockedBy !== null, onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: rawBorderFallback ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: borderRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) })) : borderLinked ? (_jsxs("div", { className: "border__linked-row", children: [showWidthAndColor ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border__linked-control border__linked-control--color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-color", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-color", borderColorProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }), _jsx("div", { className: "border__linked-control border__linked-control--width", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-width", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-width", borderWidthProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: linkedTokenRow(tokenRows, "border-style", borderStyleProperties), domElement: el, editTarget: editTarget, selection: selection, onAfterEdit: onAfterEdit }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "Edit Individual Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
+    return (_jsxs("div", { className: `editor`, "data-test": "border-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Border" }), showBorderControls ? (_jsx(Tooltip, { content: inlineStyleWarningContent(borderBlockedBy), children: _jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", disabled: borderBlockedBy !== null, onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", disabled: borderBlockedBy !== null, onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: border.rawShorthandRow ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: border.rawShorthandRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) })) : borderLinked ? (_jsxs("div", { className: "border__linked-row", children: [showWidthAndColor ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border__linked-control border__linked-control--color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-color", selection: selection, tokenRow: border.linkedRows.color, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }), _jsx("div", { className: "border__linked-control border__linked-control--width", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-width", selection: selection, tokenRow: border.linkedRows.width, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: border.linkedRows.style, domElement: el, selection: selection, onSelectStyle: handleSelectStyle }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "Edit Individual Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
                                 if (pressed)
                                     handleExpand();
                             }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })) : (_jsxs("div", { className: "border__expanded", children: [_jsxs("div", { className: "border__expanded-header", children: [_jsx("span", { className: "side-values__label", children: formatInspectorLabel("Individual Sides") }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-collapse", label: "Link All Border Sides", pressed: !borderLinked, disabled: borderBlockedBy !== null, onPressedChange: (pressed) => {
@@ -231,7 +130,7 @@ function BorderSideIndicator({ side }) {
     const { outline, emphasis } = BORDER_SIDE_ICON_PATHS[side];
     return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: outline, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "square", strokeOpacity: "0.2" }), _jsx("line", { ...emphasis, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
 }
-function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarget, selection, dataTest = "border-style-settings", onAfterEdit }) {
+function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, selection, dataTest = "border-style-settings", onSelectStyle }) {
     const structured = tokenRow?.structure?.style?.trim().toLowerCase() ?? "";
     const selectedValue = selection?.getProperty(property)?.value;
     const mixed = selectedValue?.kind === "mixed";
@@ -244,14 +143,10 @@ function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarge
         setValue(mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none");
     }, [commonValue, el, mixed, property, structured]);
     function handleChange(next) {
-        if (blockedBy)
-            return;
-        if (!BORDER_STYLES.includes(next))
+        if (blockedBy || !onSelectStyle(property, next))
             return;
         setValue(next);
-        setStyle(editTarget ?? el, property, next);
         setOpen(false);
-        onAfterEdit?.();
     }
     return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: `Border style: ${formatInspectorLabel(value)}`, "data-test": dataTest, "data-current-style": value, children: _jsx(IconBorderStyle2, { size: 16, "aria-hidden": "true" }) })), triggerDataTest: dataTest, triggerAriaLabel: "Border style settings", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: BORDER_STYLES.map((style) => ({
             value: style,

package/dist/inspector/styleEditors/BorderRadiusEditor.js

@@ -28,7 +28,13 @@ function cornerAuthoredSignature(rows, corner) {
     const row = findTokenRow(rows, corner);
     return `${row?.authored ?? row?.declaredValue ?? ""}|${row?.tokenName ?? ""}`;
 }
-function cornersAreLinked(rows) {
+function cornersAreLinked(rows, selection) {
+    if (selection && selection.elements.length > 1) {
+        const values = BORDER_RADIUS_CORNERS.map((corner) => selection.getProperty(corner)?.value);
+        const first = values[0];
+        return first?.kind === "common"
+            && values.every((value) => value?.kind === "common" && value.value === first.value);
+    }
     const signatures = BORDER_RADIUS_CORNERS.map((corner) => cornerAuthoredSignature(rows, corner));
     return new Set(signatures).size === 1;
 }
@@ -50,9 +56,8 @@ export function BorderRadiusEditor(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit, embedded = false } = props;
     const el = element.domElement;
     const editTarget = selection?.target ?? el;
-    const isGroup = Boolean(selection && selection.elements.length > 1);
     const allEntries = entries ?? getNudgeUiTokenEntries();
-    const dataLinked = !isGroup && cornersAreLinked(tokenRows);
+    const dataLinked = cornersAreLinked(tokenRows, selection);
     const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], "border-radius");
     const [userUnlinked, setUserUnlinked] = useState(false);
     const [userLinked, setUserLinked] = useState(false);

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

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface FlexChildControlsProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+/** How a flex item shares its parent's space; shown behind the size expander. */
+export declare function FlexChildControls(props: FlexChildControlsProps): ReactElement;

package/dist/inspector/styleEditors/ChildPlacement.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FlexChildSettingsMenu, LayoutValueField } from "./FlexControls.js";
+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"];
+/** How a flex item shares its parent's space; shown behind the size expander. */
+export function FlexChildControls(props) {
+    return (_jsxs("div", { className: "layout__group layout__group--bottom-rule", "data-test": "layout-flex-child", children: [_jsxs("div", { className: "layout__flex-heading", children: [_jsx("div", { className: "editor__title", children: "Flex Child" }), _jsx(FlexChildSettingsMenu, { ...props })] }), _jsxs("div", { className: "layout__flex-child-fields", children: [_jsx(LayoutValueField, { label: "Grow", property: "flex-grow", presets: FLEX_GROW_PRESETS, inputOnly: true, ...props }), _jsx(LayoutValueField, { label: "Shrink", property: "flex-shrink", presets: FLEX_SHRINK_PRESETS, inputOnly: true, ...props }), _jsx(LayoutValueField, { label: "Basis", property: "flex-basis", presets: FLEX_BASIS_PRESETS, inputOnly: true, ...props })] })] }));
+}

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

@@ -0,0 +1,35 @@
+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 interface FlexControlProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+export interface LayoutValueFieldProps extends FlexControlProps {
+    label: string;
+    property: string;
+    presets: string[];
+    inputOnly?: boolean;
+}
+export declare function LayoutValueField({ label, property, presets, inputOnly, domElement, editTarget, selection, revision, onAfterEdit }: LayoutValueFieldProps): ReactElement;
+export declare function FlexChildSettingsMenu({ domElement, editTarget, selection, revision, onAfterEdit }: FlexControlProps): ReactElement;
+export interface FlexGapFieldProps extends FlexControlProps {
+    property: "row-gap" | "column-gap";
+    entries: TokenEntry[];
+    tokenRows: ResolvedProperty[];
+}
+export declare function FlexGapField({ property, domElement, editTarget, selection, entries, tokenRows, onAfterEdit }: FlexGapFieldProps): ReactElement;
+export declare function FlexWrapToggle({ domElement, editTarget, selection, revision, onAfterEdit }: FlexControlProps): ReactElement;
+/**
+ * The main-axis gap. Spreading the items (`justify-content: space-*`) replaces the fixed gap, so
+ * the field reads Auto, keeps the gap as a faint value, and typing `auto` spreads between.
+ */
+export declare function FlexMainGapField({ property, domElement, editTarget, selection, entries, tokenRows, revision, onAfterEdit }: FlexGapFieldProps & {
+    revision?: number;
+}): ReactElement;
+export declare function FlexAlignmentGrid({ domElement, editTarget, selection, revision, onAfterEdit }: FlexControlProps): ReactElement;
+export declare function useComputedLayoutValue(domElement: HTMLElement, property: string, fallback: string, revision: number): [string, (value: string) => void];

package/dist/inspector/styleEditors/FlexControls.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconCheck, IconChevronDown, IconSettings, IconSpacingHorizontal, IconSpacingVertical, IconTextWrap } from "@tabler/icons-react";
+import { LayoutDropdown } from "./LayoutDropdown.js";
+import { LayoutComboField } from "./LayoutComboField.js";
+import { GapField } from "./GapField.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 { getStateStyleValue } from "../shell/stateValue.js";
+import { formatInspectorLabel } from "../ui/labels.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";
+const ALIGN_SELF_OPTIONS = ["auto", "stretch", "flex-start", "flex-end", "center", "baseline"];
+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"];
+export function LayoutValueField({ 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 }) }));
+}
+export 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(LayoutValueField, { label: "Order", property: "order", presets: ORDER_PRESETS, domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }) }));
+}
+export 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 }) }));
+}
+export 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" }) }) }));
+}
+const 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" },
+];
+/**
+ * The main-axis gap. Spreading the items (`justify-content: space-*`) replaces the fixed gap, so
+ * the field reads Auto, keeps the gap as a faint value, and typing `auto` spreads between.
+ */
+export function FlexMainGapField({ property, domElement, editTarget, selection, entries, tokenRows, revision = 0, onAfterEdit }) {
+    const GapIcon = property === "column-gap" ? IconSpacingHorizontal : IconSpacingVertical;
+    const [computedJustify] = useComputedLayoutValue(domElement, "justify-content", "flex-start", revision);
+    const justify = normalizeFlexJustify(computedJustify);
+    const distributed = FLEX_DISTRIBUTION_OPTIONS.includes(justify);
+    const lastPlacement = useRef("flex-start");
+    const [open, setOpen] = useState(false);
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "justify-content");
+    const target = editTarget ?? domElement;
+    const gapPixels = Number.parseFloat(getStateStyleValue(domElement, property));
+    useEffect(() => {
+        if (FLEX_ALIGNMENT_OPTIONS.includes(justify))
+            lastPlacement.current = justify;
+    }, [justify]);
+    function setJustifyContent(value) {
+        if (blockedBy)
+            return;
+        setStyle(target, "justify-content", value);
+        onAfterEdit?.();
+    }
+    function interceptRaw(value) {
+        if (value.trim().toLowerCase() === "auto") {
+            if (!distributed)
+                setJustifyContent("space-between");
+            return true;
+        }
+        // A typed gap takes the items back out of a spread; the gap value itself is written by the field,
+        // which still saves it when justify-content is authored inline and cannot be changed here.
+        if (distributed)
+            setJustifyContent(lastPlacement.current);
+        return false;
+    }
+    const chevron = (_jsx(PopoverListbox, { query: "", value: distributed ? justify : "packed", open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "compact", label: "Item distribution", "data-test": "layout-flex-distribution", children: _jsx(IconChevronDown, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), triggerDataTest: "layout-flex-distribution", triggerAriaLabel: "Item distribution", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: DISTRIBUTION_ITEMS.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) => {
+            setJustifyContent(next === "packed" ? lastPlacement.current : next);
+            setOpen(false);
+        } }));
+    return (_jsx(ControlSurface, { className: "layout__spacing-field", children: _jsx(GapField, { property: property, domElement: domElement, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, ...(distributed ? { displayOverride: "Auto" } : {}), interceptRaw: interceptRaw, trailing: (_jsxs(_Fragment, { children: [distributed && Number.isFinite(gapPixels) ? (_jsx("span", { className: "layout__resolved", "data-test": "layout-gap-value", children: Math.round(gapPixels) })) : null, chevron] })), 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 }) }));
+}
+export 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 shows physical positions: justify-content runs along the main axis, so column containers transpose the axes.
+    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;
+        // A grid click changing cross-axis alignment must not replace an explicit distribution choice.
+        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) {
+    // Computed `normal` behaves as `flex-start` for flex containers, so show the physical placement.
+    return value === "normal" ? "flex-start" : value;
+}
+function normalizeFlexAlign(value) {
+    // `normal` resolves to stretch for flex items.
+    return value === "normal" ? "stretch" : value;
+}
+export 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/GapField.d.ts

@@ -12,7 +12,10 @@ export interface GapFieldProps {
     entries: TokenEntry[];
     tokenRows: ResolvedProperty[];
     leading?: ReactNode;
+    trailing?: ReactNode;
+    /** Replaces the shown value (and ignores the token) while another property overrides the gap, such as `Auto`. */
+    displayOverride?: string;
+    interceptRaw?: (value: string) => boolean;
     onAfterEdit?: () => void;
 }
-/** Renders a gap value with a token chip or the legacy raw-value fallback. */
-export declare function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, onAfterEdit, }: GapFieldProps): ReactElement;
+export declare function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, trailing, displayOverride, interceptRaw, onAfterEdit, }: GapFieldProps): ReactElement;

package/dist/inspector/styleEditors/GapField.js

@@ -3,8 +3,7 @@ import { TokenField } from "../tokens/TokenField.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { meaningfulLayoutValue } from "./layoutValue.js";
 export const GAP_PRESETS = ["0", "0.25rem", "0.5rem", "0.75rem", "1rem", "1.5rem", "2rem", "3rem"];
-/** Renders a gap value with a token chip or the legacy raw-value fallback. */
-export function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, onAfterEdit, }) {
-    const tokenRow = tokenRows.find((row) => row.property === property) ?? null;
-    return (_jsx("span", { className: "layout-combo", "data-test": "layout-combo", "data-property": property, children: _jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRow, initialValue: meaningfulLayoutValue(el, property), domElement: el, editTarget: editTarget, entries: entries, suggestions: GAP_PRESETS, leading: leading, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", inlineWarningDataTest: "layout-combo-blocked", inlineWarningTooltipDataTest: "layout-combo-blocked-tooltip", onAfterEdit: onAfterEdit }) }));
+export function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, trailing, displayOverride, interceptRaw, onAfterEdit, }) {
+    const tokenRow = displayOverride !== undefined ? null : tokenRows.find((row) => row.property === property) ?? null;
+    return (_jsx("span", { className: "layout-combo", "data-test": "layout-combo", "data-property": property, children: _jsx(TokenField, { property: property, selection: selection, tokenRow: tokenRow, initialValue: meaningfulLayoutValue(el, property), displayValue: displayOverride, domElement: el, editTarget: editTarget, entries: entries, suggestions: GAP_PRESETS, leading: leading, trailing: trailing, interceptRaw: interceptRaw, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", inlineWarningDataTest: "layout-combo-blocked", inlineWarningTooltipDataTest: "layout-combo-blocked-tooltip", onAfterEdit: onAfterEdit }) }));
 }

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

@@ -6,9 +6,4 @@ export interface GridChildSectionProps {
     revision?: number;
     onAfterEdit?: () => void;
 }
-/**
- * Grid child controls expose only placement starts and per-axis alignment.
- * All edits commit as managed CSS declarations. Moving a start line preserves
- * an existing span where CSS makes that span unambiguous.
- */
 export declare function GridChildSection({ domElement: el, editTarget, revision, onAfterEdit, }: GridChildSectionProps): ReactElement;

package/dist/inspector/styleEditors/GridChildSection.js

@@ -67,11 +67,6 @@ function AlignmentControl({ axis, value, elements, onChange }) {
                     testId: `layout-grid-child-align-${axis}-${option.value}`,
                 })), onChange: onChange, allowDeselect: true, onDeselect: () => onChange("auto") }), _jsx(InlineStyleWarning, { blockedBy: blockedBy })] }));
 }
-/**
- * Grid child controls expose only placement starts and per-axis alignment.
- * All edits commit as managed CSS declarations. Moving a start line preserves
- * an existing span where CSS makes that span unambiguous.
- */
 export function GridChildSection({ domElement: el, editTarget, revision = 0, onAfterEdit, }) {
     const target = editTarget ?? el;
     const elements = targetElements(target);

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

@@ -8,6 +8,6 @@ export interface GridPickerProps {
     revision?: number;
     onAfterEdit?: () => void;
 }
-/** Returns a definite track count, or null when CSS itself determines it. */
+/** Null when the browser determines the track count (auto-fill/auto-fit, none, subgrid). */
 export declare function countGridTracks(value: string): number | null;
 export declare function GridPicker({ domElement: el, editTarget, revision, onAfterEdit }: GridPickerProps): ReactElement;

package/dist/inspector/styleEditors/GridPicker.js

@@ -47,7 +47,7 @@ function splitTrackList(value) {
         parts.push(value.slice(start).trim());
     return parts;
 }
-/** Returns a definite track count, or null when CSS itself determines it. */
+/** Null when the browser determines the track count (auto-fill/auto-fit, none, subgrid). */
 export function countGridTracks(value) {
     const trimmed = value.trim();
     if (!trimmed || /^(?:none|subgrid)$/i.test(trimmed))
@@ -112,9 +112,7 @@ export function GridPicker({ domElement: el, editTarget, revision = 0, onAfterEd
             if (!picker)
                 return;
             const target = event.target;
-            // Document listeners see a shadow-root event through its host as the
-            // retargeted `event.target`. Use the composed path so pointer-downs on
-            // the grid cells are not mistaken for outside clicks.
+            // Shadow-root events are retargeted to the host for document listeners, so use the composed path.
             if (event.composedPath().includes(picker))
                 return;
             if (target instanceof Node && picker.contains(target))

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

@@ -1,17 +1,19 @@
 import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
+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 GridSectionProps {
+export interface GridControlProps {
     domElement: HTMLElement;
     editTarget?: EditTarget;
     selection?: StyleSelection | null;
-    entries: TokenEntry[];
-    tokenRows: ResolvedProperty[];
-    showContainer: boolean;
-    showChild: boolean;
     revision?: number;
     onAfterEdit?: () => void;
 }
-export declare function GridSection({ domElement: el, editTarget, selection, entries, tokenRows, showContainer, showChild, revision, onAfterEdit, }: GridSectionProps): ReactElement;
+export interface GridContainerControlsProps extends GridControlProps {
+    entries: TokenEntry[];
+    tokenRows: ResolvedProperty[];
+}
+/** Track templates, flow and content alignment: the grid container settings the cell picker does not cover. */
+export declare function GridAdvancedFields({ domElement, editTarget, selection, revision, onAfterEdit, }: GridControlProps): ReactElement;
+/** The cell picker beside the row and column gap fields. */
+export declare function GridContainerControls({ domElement, editTarget, selection, entries, tokenRows, revision, onAfterEdit, }: GridContainerControlsProps): ReactElement;