nudge-ui 0.2.5 → 0.2.6

package/dist/inspector/sketch/videoFrames.js

@@ -35,7 +35,7 @@ function videoFrame(video) {
             }
         }
         catch {
-            // Cross-origin frames can taint a canvas. Keep the poster or empty frame.
+            // Cross-origin frames can taint a canvas; the poster or empty frame is kept.
         }
     }
     return image;
@@ -51,8 +51,7 @@ export function prepareSketchVideoFrames(targetDocument) {
         placeholder.hidden = true;
         placeholder.src = EMPTY_FRAME;
         placeholder.setAttribute(FRAME_ATTRIBUTE, id);
-        // The hidden sibling preserves capture order without detaching or seeking
-        // the application's video. Only its clone receives the video's styles.
+        // A hidden sibling placeholder preserves capture order without touching the live video.
         video.before(placeholder);
         placeholders.push(placeholder);
     }

package/dist/inspector/spacing/projection.d.ts

@@ -29,15 +29,7 @@ export interface InspectorSpacingProjection {
 export interface InspectorProjection {
     spacing: Record<ProjectionGroup, InspectorSpacingProjection>;
 }
-/**
- * Projects resolved physical side facts into the compact spacing UI shape.
- * Authored value, token identity, computed value, and source property all
- * participate in shared/mixed detection so visually equal values cannot
- * accidentally discard authored CSS intent. Source properties remain on each
- * field as provenance but do not by themselves force expansion.
- */
 export declare function projectInspectorValues(el: HTMLElement, rows: ResolvedProperty[]): InspectorProjection;
-/** Projects computed group values into the existing spacing editor model. */
 export declare function projectInspectorValuesForSelection(selection: StyleSelection): InspectorProjection;
 export declare function projectionSides(axis: ProjectionAxis): readonly [ProjectionSide, ProjectionSide];
 export {};

package/dist/inspector/spacing/projection.js

@@ -1,23 +1,22 @@
 import { getStateStyleValue } from "../shell/stateValue.js";
+import { readAuthoredStyleValue } from "../styleEditors/layoutValue.js";
 const SIDES = ["top", "right", "bottom", "left"];
 const AXIS_SIDES = {
-    // Preserve CSS physical-side order within each axis. This makes a mixed
-    // horizontal value read as right, left and a mixed vertical value as top,
-    // bottom when the compact editor renders both values.
+    // CSS physical-side order per axis, so a mixed pair reads right/left, top/bottom.
     horizontal: ["right", "left"],
     vertical: ["top", "bottom"],
 };
 function fieldProjection(el, rows, property) {
     const row = rows.find((candidate) => candidate.property === property) ?? null;
-    // The selected element is the rendering authority. Resolved rows can be
-    // one render behind while the debounced inspector refreshes, so use the
-    // live computed side value for grouping when available and retain the row
-    // for authored/token/source provenance.
+    // Resolved rows can be one render behind; the live value is the grouping authority, the row only supplies provenance.
     const liveValue = getStateStyleValue(el, property);
     const rowValue = row?.computed || row?.resolvedValue;
     const rowIsCurrent = !liveValue || !row || Boolean(row.sourceProperty) || !rowValue || rowValue === liveValue;
     const effectiveRow = rowIsCurrent ? row : null;
-    const value = liveValue || row?.resolvedValue || "";
+    const computedValue = liveValue || row?.resolvedValue || "";
+    if (isInsetSide(property))
+        return insetFieldProjection(el, property, effectiveRow, computedValue);
+    const value = computedValue;
     return {
         property,
         authoredValue: effectiveRow?.authored ?? effectiveRow?.declaredValue ?? value,
@@ -27,11 +26,23 @@ function fieldProjection(el, rows, property) {
         row: effectiveRow,
     };
 }
+function isInsetSide(property) {
+    return SIDES.includes(property);
+}
+/** Inset sides report the browser's used offset even when unauthored, so only authored values are shown. */
+function insetFieldProjection(el, property, row, computedValue) {
+    const authoredValue = (row?.authored ?? row?.declaredValue ?? readAuthoredStyleValue(el, property) ?? "").trim() || "auto";
+    return {
+        property,
+        authoredValue,
+        value: authoredValue === "auto" ? "auto" : computedValue || authoredValue,
+        tokenName: row?.tokenName ?? null,
+        sourceProperty: row?.sourceProperty,
+        row,
+    };
+}
 function fieldSignature(field) {
-    // Source property is provenance, not visible value identity. Two physical
-    // longhands with the same authored/token value may still use the compact
-    // axis control; the individual source properties remain attached to their
-    // fields for prompt generation and edit metadata.
+    // Source property is provenance, not value identity, so it stays out of the signature.
     return [field.authoredValue, field.tokenName ?? "", field.value].join("|");
 }
 function axisProjection(axis, fields) {
@@ -61,13 +72,6 @@ function spacingProjection(el, rows, property) {
         },
     };
 }
-/**
- * Projects resolved physical side facts into the compact spacing UI shape.
- * Authored value, token identity, computed value, and source property all
- * participate in shared/mixed detection so visually equal values cannot
- * accidentally discard authored CSS intent. Source properties remain on each
- * field as provenance but do not by themselves force expansion.
- */
 export function projectInspectorValues(el, rows) {
     return {
         spacing: {
@@ -82,6 +86,8 @@ function selectionField(selection, property) {
     const mixed = selectedProperty?.value.kind === "mixed";
     const value = selectedProperty?.value.kind === "common" ? selectedProperty.value.value : "";
     const row = selectedProperty?.primaryRow ?? null;
+    if (isInsetSide(property))
+        return selectionInsetField(selection, property, row, selectedProperty?.token.kind === "common" ? selectedProperty.token.name : null);
     return {
         property,
         authoredValue: mixed ? "Mixed" : value,
@@ -91,6 +97,19 @@ function selectionField(selection, property) {
         row,
     };
 }
+function selectionInsetField(selection, property, row, tokenName) {
+    const authored = selection.domElements.map((el) => readAuthoredStyleValue(el, property) ?? "auto");
+    const mixed = new Set(authored).size > 1;
+    const value = mixed ? "Mixed" : authored[0] ?? "auto";
+    return {
+        property,
+        authoredValue: value,
+        value,
+        tokenName: mixed || value === "auto" ? null : tokenName,
+        sourceProperty: row?.sourceProperty,
+        row,
+    };
+}
 function selectionAxis(axis, fields) {
     const sides = AXIS_SIDES[axis];
     const pair = [fields[sides[0]], fields[sides[1]]];
@@ -118,7 +137,6 @@ function selectionSpacing(selection, property) {
         },
     };
 }
-/** Projects computed group values into the existing spacing editor model. */
 export function projectInspectorValuesForSelection(selection) {
     if (selection.elements.length === 1) {
         return projectInspectorValues(selection.primary.domElement, [...selection.primaryRows]);

package/dist/inspector/styleEditors/BackgroundEditor.js

@@ -176,7 +176,7 @@ function BackgroundLayerEditor(props) {
                                 const match = /^([+-]?(?:\d*\.)?\d+)(?:deg)?$/.exec(raw.trim());
                                 if (match && Number.isFinite(Number(match[1])))
                                     commitGradient({ ...gradient, angle: Number(match[1]) });
-                            }) : null, _jsx(IconButton, { variant: "quiet", label: "Reverse gradient", disabled: blockedBy !== null, onClick: () => commitGradient({ ...gradient, stops: [...gradient.stops].reverse().map((stop) => ({ ...stop, position: 100 - stop.position })) }), children: _jsx(IconArrowsDiff, { "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Add gradient stop", disabled: blockedBy !== null, onClick: () => addStop(), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), gradient.stops.map((stop, index) => ({ stop, index })).sort((a, b) => a.stop.position - b.stop.position).map(({ stop, index }) => {
+                            }) : null, _jsx(IconButton, { variant: "secondary", label: "Reverse gradient", disabled: blockedBy !== null, onClick: () => commitGradient({ ...gradient, stops: [...gradient.stops].reverse().map((stop) => ({ ...stop, position: 100 - stop.position })) }), children: _jsx(IconArrowsDiff, { "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Add gradient stop", disabled: blockedBy !== null, onClick: () => addStop(), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), gradient.stops.map((stop, index) => ({ stop, index })).sort((a, b) => a.stop.position - b.stop.position).map(({ stop, index }) => {
                         const color = interpretTokenValue(stop.color, { table: tokenTable });
                         return _jsxs("div", { className: "background-editor__stop-row", role: "group", "aria-label": `Stop ${index + 1}`, children: [rawField(`Stop ${index + 1} position`, `${Number(stop.position.toFixed(3))}%`, (raw) => {
                                     const match = /^([+-]?(?:\d*\.)?\d+)%?$/.exec(raw.trim());

package/dist/inspector/styleEditors/BorderEditor.js

@@ -20,7 +20,6 @@ import { BORDER_SIDES, BORDER_STYLES, borderDeclarations, borderProperty, hasVis
 function stateStyleReader(el) {
     return (property, fallback) => getStateStyleValue(el, property, fallback);
 }
-/** Reports whether the intent produced any declarations to write. */
 function commitBorderIntent(target, source, intent, onAfterEdit) {
     const declarations = borderDeclarations(source, intent);
     if (declarations.length === 0)
@@ -29,11 +28,7 @@ function commitBorderIntent(target, source, intent, onAfterEdit) {
     onAfterEdit?.();
     return true;
 }
-/**
- * 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);

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;

package/dist/inspector/styleEditors/GridSection.js

@@ -1,14 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { IconSettings, IconSpacingHorizontal, IconSpacingVertical } from "@tabler/icons-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconSpacingHorizontal, IconSpacingVertical } from "@tabler/icons-react";
 import { GridPicker } from "./GridPicker.js";
 import { GapField } from "./GapField.js";
 import { LayoutDropdown } from "./LayoutDropdown.js";
 import { GridValueField } from "./GridValueField.js";
-import { GridChildSection } from "./GridChildSection.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
-import { IconButton } from "../ui/IconButton.js";
-import { InspectorPopover } from "../ui/InspectorPopover.js";
 const GRID_AUTO_FLOW_OPTIONS = ["row", "column", "row dense", "column dense"];
 const GRID_CONTENT_ALIGNMENT_OPTIONS = [
     "normal",
@@ -21,7 +17,24 @@ const GRID_CONTENT_ALIGNMENT_OPTIONS = [
     "space-evenly",
 ];
 const GRID_ITEM_ALIGNMENT_OPTIONS = ["normal", "stretch", "start", "end", "center", "self-start", "self-end"];
-export function GridSection({ domElement: el, editTarget, selection, entries, tokenRows, showContainer, showChild, revision = 0, onAfterEdit, }) {
-    const [advancedOpen, setAdvancedOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [showContainer ? _jsx("div", { className: "layout__group layout__grid", "data-test": "layout-grid-container", children: _jsxs("div", { className: "layout__grid-primary", children: [_jsxs("div", { className: "layout__grid-picker-column", children: [_jsxs("div", { className: "layout__grid-heading", children: [_jsx("div", { className: "editor__title", children: "Grid" }), _jsx(InspectorPopover, { "data-test": "layout-grid-settings", side: "bottom", align: "end", triggerTooltip: "Grid settings", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Grid settings", "data-active": advancedOpen, "data-test": "layout-grid-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), open: advancedOpen, onOpenChange: setAdvancedOpen, children: _jsxs("div", { className: "layout__grid-advanced", "data-test": "layout-grid-advanced", children: [_jsx("div", { className: "editor__title", children: "Advanced grid CSS" }), _jsxs("div", { className: "layout__grid-fields", children: [_jsx(GridValueField, { property: "grid-template-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-template-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "grid-auto-flow", options: GRID_AUTO_FLOW_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-alignment", "data-test": "layout-grid-alignment", children: [_jsx(LayoutDropdown, { property: "justify-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "justify-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit })] })] }) })] }), _jsx(GridPicker, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-gap", "data-test": "layout-grid-gap", children: [_jsx("div", { className: "layout__grid-heading", "data-test": "layout-grid-gap-heading", "aria-hidden": "true", children: _jsx("div", { className: "editor__title" }) }), _jsxs("div", { className: "layout__grid-gap-fields", children: [_jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-row-gap", children: _jsx(GapField, { property: "row-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-row-gap" })), onAfterEdit: onAfterEdit }) }), _jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-column-gap", children: _jsx(GapField, { property: "column-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-column-gap" })), onAfterEdit: onAfterEdit }) })] })] })] }) }) : null, showChild ? _jsx(GridChildSection, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit }) : null] }));
+const GRID_ALIGNMENT_FIELDS = [
+    { property: "justify-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS },
+    { property: "align-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS },
+    { property: "justify-items", options: GRID_ITEM_ALIGNMENT_OPTIONS },
+    { property: "align-items", options: GRID_ITEM_ALIGNMENT_OPTIONS },
+];
+const GRID_TRACK_PROPERTIES = ["grid-template-columns", "grid-template-rows"];
+const GRID_AUTO_TRACK_PROPERTIES = ["grid-auto-columns", "grid-auto-rows"];
+/** Track templates, flow and content alignment: the grid container settings the cell picker does not cover. */
+export function GridAdvancedFields({ domElement, editTarget, selection, revision = 0, onAfterEdit, }) {
+    const shared = { domElement, editTarget, selection, revision, onAfterEdit };
+    return (_jsxs("div", { className: "layout__grid-advanced", "data-test": "layout-grid-advanced", children: [_jsx("div", { className: "editor__title", children: "Advanced grid CSS" }), _jsxs("div", { className: "layout__grid-fields", children: [GRID_TRACK_PROPERTIES.map((property) => _jsx(GridValueField, { property: property, ...shared }, property)), _jsx(LayoutDropdown, { property: "grid-auto-flow", options: GRID_AUTO_FLOW_OPTIONS, ...shared }), GRID_AUTO_TRACK_PROPERTIES.map((property) => _jsx(GridValueField, { property: property, ...shared }, property))] }), _jsx("div", { className: "layout__grid-alignment", "data-test": "layout-grid-alignment", children: GRID_ALIGNMENT_FIELDS.map(({ property, options }) => (_jsx(LayoutDropdown, { property: property, options: [...options], stacked: true, ...shared }, property))) })] }));
+}
+/** The cell picker beside the row and column gap fields. */
+export function GridContainerControls({ domElement, editTarget, selection, entries, tokenRows, revision = 0, onAfterEdit, }) {
+    const gaps = [
+        { property: "row-gap", Icon: IconSpacingVertical },
+        { property: "column-gap", Icon: IconSpacingHorizontal },
+    ];
+    return (_jsxs("div", { className: "layout__grid-primary", "data-test": "layout-grid-container", children: [_jsx(GridPicker, { domElement: domElement, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit }), _jsx("div", { className: "layout__grid-gap-fields", "data-test": "layout-grid-gap", children: gaps.map(({ property, Icon }) => (_jsx(ControlSurface, { className: "layout__spacing-field", "data-test": `layout-grid-${property}`, children: _jsx(GapField, { property: property, domElement: domElement, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(Icon, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": `layout-spacing-icon-${property}` })), onAfterEdit: onAfterEdit }) }, property))) })] }));
 }

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

@@ -9,9 +9,5 @@ export interface GridValueFieldProps {
     revision?: number;
     onAfterEdit?: () => void;
 }
-/**
- * Raw CSS editor for Grid grammar. Track lists and line placement are not
- * safely decomposable into numeric controls, so the authored expression is
- * retained verbatim and committed as one managed longhand.
- */
+/** Grid track lists and line placement are not safely decomposable into numeric controls. */
 export declare function GridValueField({ property, domElement: el, editTarget, selection, revision, onAfterEdit, }: GridValueFieldProps): ReactElement;

package/dist/inspector/styleEditors/GridValueField.js

@@ -15,11 +15,7 @@ const DEFAULT_GRID_VALUES = {
     "grid-column": "auto",
     "grid-row": "auto",
 };
-/**
- * Raw CSS editor for Grid grammar. Track lists and line placement are not
- * safely decomposable into numeric controls, so the authored expression is
- * retained verbatim and committed as one managed longhand.
- */
+/** Grid track lists and line placement are not safely decomposable into numeric controls. */
 export function GridValueField({ property, domElement: el, editTarget, selection, revision = 0, onAfterEdit, }) {
     const atRules = useFieldAtRules(property);
     const mixed = selection?.getProperty(property)?.value.kind === "mixed";
@@ -30,9 +26,7 @@ export function GridValueField({ property, domElement: el, editTarget, selection
     };
     const [value, setValue] = useState(readValue);
     const [draft, setDraft] = useState(value);
-    // Commit reads the ref, not state: Escape reverts the draft and then blurs
-    // within the same event, before React re-renders, so a state-only read
-    // would commit the pre-escape draft.
+    // Commit reads the ref, not state: Escape reverts then blurs in one event, before React re-renders.
     const draftRef = useRef(value);
     useEffect(() => {
         const next = readValue();

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

@@ -13,6 +13,5 @@ interface ImageBackgroundEditorProps {
     onCss(value: string): boolean;
     onSizing(declarations: StyleDeclaration[]): boolean;
 }
-/** Preview uploaded images through the existing workspace style edits. */
 export declare function ImageBackgroundEditor({ element, elements, value, mixed, sizingValues, onUpload, onCss, onSizing }: ImageBackgroundEditorProps): ReactElement;
 export {};