nudge-ui 0.2.0

package/dist/inspector/styleEditors/BorderRadiusEditor.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconBorderCorners, IconRadiusBottomLeft, IconRadiusBottomRight, IconRadiusTopLeft, IconRadiusTopRight, } from "@tabler/icons-react";
+import { ToggleButton } from "../ui/ToggleButton.js";
+import { findTokenRow, metadataFor } from "./rowLookup.js";
+import { TokenField } from "../tokens/TokenField.js";
+import { setStyle } from "../tokens/editActions.js";
+import { SideControls, SIDE_NAMES } from "../ui/SideValuesField.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+import { completeCssValue } from "./completeCssValue.js";
+import { valuePolicyFor } from "./valuePolicy.js";
+const BORDER_RADIUS_CORNERS = [
+    "border-top-left-radius",
+    "border-top-right-radius",
+    "border-bottom-right-radius",
+    "border-bottom-left-radius",
+];
+const BORDER_RADIUS_ICONS = [
+    IconRadiusTopLeft,
+    IconRadiusTopRight,
+    IconRadiusBottomRight,
+    IconRadiusBottomLeft,
+];
+const BORDER_RADIUS_LABELS = ["Top Left", "Top Right", "Bottom Right", "Bottom Left"];
+function cornerAuthoredSignature(rows, corner) {
+    const row = findTokenRow(rows, corner);
+    return `${row?.authored ?? row?.declaredValue ?? ""}|${row?.tokenName ?? ""}`;
+}
+function cornersAreLinked(rows) {
+    const signatures = BORDER_RADIUS_CORNERS.map((corner) => cornerAuthoredSignature(rows, corner));
+    return new Set(signatures).size === 1;
+}
+function linkAllCorners(target, rows, selection, onAfterEdit) {
+    const firstRow = findTokenRow(rows, BORDER_RADIUS_CORNERS[0]);
+    const selectedValue = selection && selection.elements.length > 1
+        ? selection.getProperty(BORDER_RADIUS_CORNERS[0])?.value
+        : null;
+    const sharedValue = (selectedValue?.kind === "common" ? selectedValue.value : undefined)
+        ?? firstRow?.authored
+        ?? firstRow?.declaredValue
+        ?? "";
+    if (!sharedValue)
+        return;
+    setStyle(target, "border-radius", sharedValue);
+    onAfterEdit?.();
+}
+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 [userUnlinked, setUserUnlinked] = useState(false);
+    const [userLinked, setUserLinked] = useState(false);
+    useEffect(() => {
+        setUserUnlinked(false);
+        setUserLinked(false);
+    }, [el]);
+    useEffect(() => {
+        if (dataLinked)
+            setUserLinked(false);
+        else
+            setUserUnlinked(false);
+    }, [dataLinked]);
+    const isLinked = dataLinked ? !userUnlinked : userLinked;
+    function handleExpand() {
+        setUserUnlinked(true);
+        setUserLinked(false);
+    }
+    function handleCollapse() {
+        setUserLinked(true);
+        setUserUnlinked(false);
+        linkAllCorners(editTarget, tokenRows, selection, onAfterEdit);
+    }
+    const cornerSides = BORDER_RADIUS_CORNERS.map((corner, index) => ({
+        side: SIDE_NAMES[index],
+        sideLabel: BORDER_RADIUS_LABELS[index],
+        icon: (() => {
+            const Icon = BORDER_RADIUS_ICONS[index];
+            return _jsx(Icon, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" });
+        })(),
+        control: (_jsx(TokenField, { property: corner, selection: selection, tokenRow: findTokenRow(tokenRows, corner), domElement: el, editTarget: editTarget, entries: allEntries, editMetadata: metadataFor(findTokenRow(tokenRows, corner)), onAfterEdit: onAfterEdit, chipVariant: "small" })),
+    }));
+    const linkedTokenRow = () => {
+        const first = findTokenRow(tokenRows, BORDER_RADIUS_CORNERS[0]);
+        if (!first)
+            return null;
+        return { ...first, property: "border-radius" };
+    };
+    const borderRadiusRow = findTokenRow(tokenRows, "border-radius") ?? linkedTokenRow();
+    const mixed = !dataLinked;
+    const groupedControl = (_jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-radius", selection: selection, tokenRow: mixed ? null : borderRadiusRow, initialValue: mixed ? "Mix" : undefined, displayValue: mixed ? "Mix" : undefined, domElement: el, editTarget: editTarget, entries: allEntries, editMetadata: metadataFor(borderRadiusRow), mixed: mixed, formatRawValue: (value) => mixed && value.trim().toLowerCase() === "mix"
+                ? ""
+                : completeCssValue(value.trim(), valuePolicyFor("border-radius")), onAfterEdit: onAfterEdit, chipVariant: "small" }) }));
+    const toggleButton = (_jsx(ToggleButton, { className: embedded ? "border-radius-editor__toggle" : undefined, variant: "quiet", size: "default", "data-test": isLinked ? "border-radius-expand" : "border-radius-collapse", label: isLinked ? "Edit Individual Corners" : "Link All Corners", title: isLinked ? "Edit Individual Corners" : "Link All Corners", pressed: !isLinked, onPressedChange: (pressed) => {
+            if (pressed)
+                handleExpand();
+            else
+                handleCollapse();
+        }, children: _jsx(IconBorderCorners, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }));
+    const individuals = !isLinked ? (_jsx("div", { className: "border-radius-editor__individuals", children: _jsx(SideControls, { label: "Border Radius Corners", layout: "corners", sides: cornerSides }) })) : null;
+    if (embedded) {
+        return (_jsxs("div", { className: "border-radius-editor border-radius-editor--embedded", "data-test": "border-radius-editor", "data-expanded": !isLinked ? "true" : "false", children: [_jsxs("div", { className: "border-radius-editor__main", children: [_jsx("div", { className: "appearance__field-header", children: _jsx("div", { className: "appearance__field-label", children: "Corner Radius" }) }), groupedControl] }), toggleButton, individuals] }));
+    }
+    return (_jsxs("div", { className: "editor border-radius-editor", "data-test": "border-radius-editor", "data-expanded": !isLinked ? "true" : "false", children: [_jsxs("div", { className: "border-radius-editor__main", children: [_jsx("div", { className: "editor__title-row", children: _jsx("div", { className: "editor__title", children: "Border Radius" }) }), _jsxs("div", { className: "border-radius__grouped-row", children: [groupedControl, toggleButton] })] }), individuals] }));
+}

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

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

package/dist/inspector/styleEditors/BoxShadowEditor.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TokenField } from "../tokens/TokenField.js";
+import { FieldRow } from "../ui/FieldRow.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+export function BoxShadowEditor(props) {
+    const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
+    const el = element.domElement;
+    const editTarget = selection?.target ?? el;
+    const allEntries = entries ?? getNudgeUiTokenEntries();
+    const tokenRow = tokenRows.find((row) => row.property === "box-shadow") ?? null;
+    return (_jsxs("div", { className: "editor", "data-test": "box-shadow-editor", children: [_jsx("div", { className: "editor__title", children: "Box Shadow" }), _jsx("div", { className: "property", children: _jsx(FieldRow, { label: "Box Shadow", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "box-shadow", selection: selection, tokenRow: tokenRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }) })] }));
+}

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

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import type { TokenEntry } from "../../css/model/index.js";
+import type { SelectedElement } from "../selection/selectionStore.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface ColorPickerProps {
+    element: SelectedElement;
+    selection?: StyleSelection | null;
+    property?: string;
+    entries?: TokenEntry[];
+    tokenRow?: ResolvedProperty | null;
+    onAfterEdit?: () => void;
+}
+export declare function isEmptyColorValue(value: string): boolean;
+export declare function ColorPicker(props: ColorPickerProps): ReactElement;

package/dist/inspector/styleEditors/ColorPicker.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { IconMinus, IconPlus } from "@tabler/icons-react";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { TokenField } from "../tokens/TokenField.js";
+import { formatInspectorLabel } from "../ui/labels.js";
+import { IconButton } from "../ui/IconButton.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { setStyle } from "../tokens/editActions.js";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+function colorSectionTitle(property) {
+    if (property === "background-color")
+        return "Background Color";
+    if (property === "color")
+        return "Color";
+    return formatInspectorLabel(property);
+}
+function isZeroColorComponent(value) {
+    return /^0(?:\.0+)?%?$/.test(value.trim());
+}
+export function isEmptyColorValue(value) {
+    const normalized = value.trim().toLowerCase();
+    if (!normalized || normalized === "none" || normalized === "transparent")
+        return true;
+    if (/^#(?:0000|00000000)$/.test(normalized))
+        return true;
+    const match = normalized.match(/^rgba?\((.*)\)$/);
+    if (!match)
+        return false;
+    const components = match[1].split(/[\s,/]+/).filter(Boolean);
+    return components.length === 4
+        && components.slice(0, 3).every(isZeroColorComponent)
+        && isZeroColorComponent(components[3]);
+}
+export function ColorPicker(props) {
+    const { element, selection, property = "color", entries, tokenRow, onAfterEdit } = props;
+    const el = element.domElement;
+    const selectedElements = useMemo(() => selection?.elements ?? [element], [element, selection]);
+    const target = selection?.target ?? el;
+    const allEntries = entries ?? getNudgeUiTokenEntries();
+    const declaredValue = tokenRow?.declaredValue?.trim() ?? "";
+    const paintedValue = getStateStyleValue(el, property);
+    const resolvedValue = tokenRow?.resolvedValue ?? paintedValue;
+    // An explicit declaration remains meaningful even when it paints as empty
+    // for text color (for example `transparent` or `var(--missing, transparent)`).
+    // A transparent background, however, is the empty state represented by the
+    // remove action and should not remain visible as an authored value.
+    const emptyValues = selectedElements.map((selected) => getStateStyleValue(selected.domElement, property));
+    const isEmpty = selectedElements.length > 1
+        ? emptyValues.every((value) => isEmptyColorValue(value))
+        : property === "background-color"
+            ? isEmptyColorValue(declaredValue) || isEmptyColorValue(resolvedValue) || isEmptyColorValue(paintedValue)
+            : declaredValue.length === 0 && isEmptyColorValue(resolvedValue);
+    const [fieldAdded, setFieldAdded] = useState(false);
+    const [backgroundRemoved, setBackgroundRemoved] = useState(false);
+    useEffect(() => {
+        setFieldAdded(false);
+        setBackgroundRemoved(false);
+    }, [el, property, selectedElements]);
+    function handleAfterEdit() {
+        setFieldAdded(false);
+        setBackgroundRemoved(false);
+        onAfterEdit?.();
+    }
+    const showTokenField = (!isEmpty && !backgroundRemoved) || fieldAdded;
+    function handleRemoveColor() {
+        setStyle(target, property, "transparent");
+        setFieldAdded(false);
+        setBackgroundRemoved(property === "background-color");
+        onAfterEdit?.();
+    }
+    return (_jsxs("div", { className: `editor`, "data-test": "color-picker", "data-property": property, children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: colorSectionTitle(property) }), showTokenField ? (_jsx(IconButton, { variant: "quiet", label: `Remove ${colorSectionTitle(property)}`, "data-test": "remove-color", className: "color__remove", onClick: handleRemoveColor, children: _jsx(IconMinus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: `Add ${colorSectionTitle(property)}`, "data-test": "add-color", className: "color__add", onClick: () => setFieldAdded(true), children: _jsx(IconPlus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }))] }), showTokenField && (_jsx("div", { className: "color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: property, tokenRow: isEmpty ? null : tokenRow, selection: selection, initialValue: isEmpty ? "" : undefined, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: handleAfterEdit }) }) }))] }));
+}

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

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import type { TokenEntry } from "../../css/model/index.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export declare const GAP_PRESETS: string[];
+export interface GapFieldProps {
+    property: "row-gap" | "column-gap";
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    entries: TokenEntry[];
+    tokenRows: ResolvedProperty[];
+    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, onAfterEdit, }: GapFieldProps): ReactElement;

package/dist/inspector/styleEditors/GapField.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TokenField } from "../tokens/TokenField.js";
+import { formatInspectorLabel } from "../ui/labels.js";
+import { inlineAuthoredValue, meaningfulLayoutValue } from "./layoutValue.js";
+import { LayoutBlockedIndicator } from "./LayoutBlockedIndicator.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, onAfterEdit, }) {
+    const tokenRow = tokenRows.find((row) => row.property === property) ?? null;
+    const blockedBy = inlineAuthoredValue(el, property);
+    return (_jsxs("span", { className: `layout-combo${blockedBy ? " layout-combo--blocked" : ""}`, "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, inputDataTest: `layout-combo-input-${property}`, label: formatInspectorLabel(property), chipVariant: "small", disabled: blockedBy !== null, onAfterEdit: onAfterEdit }), blockedBy ? _jsx(LayoutBlockedIndicator, { blockedBy: blockedBy }) : null] }));
+}

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

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import type { EditTarget } from "../selection/editTarget.js";
+export interface GridChildSectionProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    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

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconAlignBoxCenterBottom, IconAlignBoxCenterMiddle, IconAlignBoxCenterStretch, IconAlignBoxCenterTop, IconAlignBoxLeftMiddle, IconAlignBoxRightMiddle, IconColumns2, IconLayoutRows, } from "@tabler/icons-react";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { FieldRow } from "../ui/FieldRow.js";
+import { SegmentedControl } from "../ui/SegmentedControl.js";
+import { TextInput } from "../ui/TextInput.js";
+import { commitGridAxisPlacement, commitGridChildAlignment, readGridAxisPlacement, readGridChildAlignment, } from "./gridChildModel.js";
+function readAxis(el, axis) {
+    return { placement: readGridAxisPlacement(el, axis) };
+}
+function AxisPlacementRow({ axis, label, state, onStart }) {
+    const [draft, setDraft] = useState(state.placement.start);
+    const draftRef = useRef(draft);
+    useEffect(() => {
+        draftRef.current = state.placement.start;
+        setDraft(state.placement.start);
+    }, [state.placement.start]);
+    function updateDraft(next) {
+        draftRef.current = next;
+        setDraft(next);
+    }
+    function commit() {
+        const next = draftRef.current.trim() || "auto";
+        updateDraft(next);
+        if (next !== state.placement.start)
+            onStart(next);
+    }
+    const AxisIcon = axis === "column" ? IconColumns2 : IconLayoutRows;
+    return (_jsx(FieldRow, { label: label, className: `field-row--stacked layout__grid-child-placement layout__grid-child-placement--${axis}`, "data-test": `layout-grid-child-${axis}`, children: _jsxs(ControlSurface, { children: [_jsx(AxisIcon, { className: "layout__grid-child-placement-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsx(TextInput, { appearance: "embedded", value: draft, "data-test": `layout-grid-child-${axis}-start`, "aria-label": label, onChange: (event) => updateDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
+                        if (event.key === "Escape") {
+                            event.preventDefault();
+                            updateDraft(state.placement.start);
+                            event.currentTarget.blur();
+                        }
+                        else if (event.key === "Enter") {
+                            event.preventDefault();
+                            event.currentTarget.blur();
+                        }
+                    } })] }) }));
+}
+function AlignmentControl({ axis, value, onChange }) {
+    const horizontal = axis === "h";
+    const options = horizontal
+        ? [
+            { value: "start", label: "Align left", icon: _jsx(IconAlignBoxLeftMiddle, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+            { value: "center", label: "Align center", icon: _jsx(IconAlignBoxCenterMiddle, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+            { value: "end", label: "Align right", icon: _jsx(IconAlignBoxRightMiddle, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+            { value: "stretch", label: "Stretch horizontally", icon: _jsx(IconAlignBoxCenterStretch, { className: "layout__grid-child-align-icon--horizontal", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+        ]
+        : [
+            { value: "start", label: "Align top", icon: _jsx(IconAlignBoxCenterTop, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+            { value: "center", label: "Align middle", icon: _jsx(IconAlignBoxCenterMiddle, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+            { value: "end", label: "Align bottom", icon: _jsx(IconAlignBoxCenterBottom, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+            { value: "stretch", label: "Stretch vertically", icon: _jsx(IconAlignBoxCenterStretch, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+        ];
+    return (_jsx(FieldRow, { label: horizontal ? "Horizontal alignment" : "Vertical alignment", hideLabel: true, className: `field-row--stacked layout__grid-child-alignment layout__grid-child-alignment--${axis}`, "data-test": `layout-grid-child-align-${axis}`, children: _jsx(SegmentedControl, { value: value === "auto" ? null : value, "aria-label": horizontal ? "Horizontal alignment" : "Vertical alignment", "data-test": `layout-grid-child-select-${horizontal ? "justify-self" : "align-self"}`, className: "layout__grid-child-alignment-control", options: options.map((option) => ({
+                ...option,
+                testId: `layout-grid-child-align-${axis}-${option.value}`,
+            })), onChange: onChange, allowDeselect: true, onDeselect: () => onChange("auto") }) }));
+}
+/**
+ * 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 [column, setColumn] = useState(() => readAxis(el, "column"));
+    const [row, setRow] = useState(() => readAxis(el, "row"));
+    const [alignH, setAlignH] = useState(() => readGridChildAlignment(el, "h"));
+    const [alignV, setAlignV] = useState(() => readGridChildAlignment(el, "v"));
+    useEffect(() => {
+        setColumn(readAxis(el, "column"));
+        setRow(readAxis(el, "row"));
+        setAlignH(readGridChildAlignment(el, "h"));
+        setAlignV(readGridChildAlignment(el, "v"));
+    }, [el, revision]);
+    function handleAfterEdit() {
+        onAfterEdit?.();
+    }
+    function handleStart(axis, start) {
+        if (commitGridAxisPlacement(target, axis, { start, span: "keep" }).length > 0)
+            handleAfterEdit();
+    }
+    function handleAlignment(axis, value) {
+        if (commitGridChildAlignment(target, axis, value).length > 0)
+            handleAfterEdit();
+    }
+    return (_jsxs("div", { className: "layout__group layout__grid-child", "data-test": "layout-grid-child", children: [_jsx("div", { className: "editor__title", children: "Grid Child" }), _jsxs("div", { className: "layout__grid-child-fields", "data-test": "layout-grid-child-fields", children: [_jsx(AxisPlacementRow, { axis: "column", label: "Column", state: column, onStart: (start) => handleStart("column", start) }), _jsx(AxisPlacementRow, { axis: "row", label: "Row", state: row, onStart: (start) => handleStart("row", start) }), _jsx(AlignmentControl, { axis: "v", value: alignV, onChange: (value) => handleAlignment("v", value) }), _jsx(AlignmentControl, { axis: "h", value: alignH, onChange: (value) => handleAlignment("h", value) })] })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { EditTarget } from "../selection/editTarget.js";
+export declare const GRID_PICKER_MAX_COLUMNS = 12;
+export declare const GRID_PICKER_MAX_ROWS = 8;
+export interface GridPickerProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+/** Returns a definite track count, or null when CSS itself determines it. */
+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

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { getLayoutValue } from "./layoutValue.js";
+import { setStyles } from "../tokens/editActions.js";
+export const GRID_PICKER_MAX_COLUMNS = 12;
+export const GRID_PICKER_MAX_ROWS = 8;
+function clampDimension(value, max) {
+    return Math.max(1, Math.min(max, Math.round(value)));
+}
+function splitTrackList(value) {
+    const parts = [];
+    let start = 0;
+    let depth = 0;
+    let quote = null;
+    let escaped = false;
+    for (let index = 0; index < value.length; index++) {
+        const char = value[index];
+        if (quote) {
+            if (escaped)
+                escaped = false;
+            else if (char === "\\")
+                escaped = true;
+            else if (char === quote)
+                quote = null;
+            continue;
+        }
+        if (char === "\"" || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === "(")
+            depth++;
+        else if (char === ")")
+            depth = Math.max(0, depth - 1);
+        else if (/\s/.test(char) && depth === 0) {
+            if (value.slice(start, index).trim())
+                parts.push(value.slice(start, index).trim());
+            while (/\s/.test(value[index + 1] ?? ""))
+                index++;
+            start = index + 1;
+        }
+    }
+    if (value.slice(start).trim())
+        parts.push(value.slice(start).trim());
+    return parts;
+}
+/** Returns a definite track count, or null when CSS itself determines it. */
+export function countGridTracks(value) {
+    const trimmed = value.trim();
+    if (!trimmed || /^(?:none|subgrid)$/i.test(trimmed))
+        return null;
+    let count = 0;
+    for (const token of splitTrackList(trimmed)) {
+        const repeat = /^repeat\(\s*(\d+)\s*,/i.exec(token);
+        if (repeat) {
+            count += Number(repeat[1]);
+            continue;
+        }
+        if (/^repeat\(/i.test(token))
+            return null;
+        if (/^\[.*\]$/s.test(token))
+            continue;
+        count++;
+    }
+    return count > 0 ? count : null;
+}
+function readDimensions(el) {
+    const columns = getLayoutValue(el, "grid-template-columns");
+    const rows = getLayoutValue(el, "grid-template-rows");
+    const authoredColumns = countGridTracks(columns.authored ?? "");
+    const authoredRows = countGridTracks(rows.authored ?? "");
+    const computedColumns = countGridTracks(columns.computed);
+    const computedRows = countGridTracks(rows.computed);
+    return {
+        columns: clampDimension(authoredColumns ?? computedColumns ?? 1, GRID_PICKER_MAX_COLUMNS),
+        rows: clampDimension(authoredRows ?? computedRows ?? 1, GRID_PICKER_MAX_ROWS),
+    };
+}
+function gridStyle(columns, rows) {
+    // SAFETY: CSSProperties allows custom properties through index signatures; the object only sets known custom properties.
+    return {
+        "--grid-picker-columns": columns,
+        "--grid-picker-rows": rows,
+    };
+}
+function cells(columns, rows) {
+    return Array.from({ length: columns * rows }, (_, index) => ({
+        column: (index % columns) + 1,
+        row: Math.floor(index / columns) + 1,
+    }));
+}
+export function GridPicker({ domElement: el, editTarget, revision = 0, onAfterEdit }) {
+    const [dimensions, setDimensions] = useState(() => readDimensions(el));
+    const [hovered, setHovered] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [popoverPosition, setPopoverPosition] = useState(null);
+    const pickerRef = useRef(null);
+    const triggerRef = useRef(null);
+    useEffect(() => {
+        setDimensions(readDimensions(el));
+        setHovered(null);
+    }, [el, revision]);
+    useEffect(() => {
+        if (!open)
+            return;
+        function closeOnOutsidePointer(event) {
+            const picker = pickerRef.current;
+            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.
+            if (event.composedPath().includes(picker))
+                return;
+            if (target instanceof Node && picker.contains(target))
+                return;
+            setOpen(false);
+            setHovered(null);
+        }
+        document.addEventListener("pointerdown", closeOnOutsidePointer);
+        return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
+    }, [open]);
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        function updatePopoverPosition() {
+            const trigger = triggerRef.current;
+            if (!trigger)
+                return;
+            const rect = trigger.getBoundingClientRect();
+            setPopoverPosition({
+                left: rect.left + (rect.width / 2),
+                top: rect.bottom + 6,
+            });
+        }
+        updatePopoverPosition();
+        window.addEventListener("resize", updatePopoverPosition);
+        window.addEventListener("scroll", updatePopoverPosition, true);
+        return () => {
+            window.removeEventListener("resize", updatePopoverPosition);
+            window.removeEventListener("scroll", updatePopoverPosition, true);
+        };
+    }, [open]);
+    function choose(columns, rows) {
+        const next = {
+            columns: clampDimension(columns, GRID_PICKER_MAX_COLUMNS),
+            rows: clampDimension(rows, GRID_PICKER_MAX_ROWS),
+        };
+        setDimensions(next);
+        setHovered(null);
+        setOpen(false);
+        if (setStyles(editTarget ?? el, [
+            { property: "grid-template-columns", value: `repeat(${next.columns}, minmax(0, 1fr))` },
+            { property: "grid-template-rows", value: `repeat(${next.rows}, minmax(0, 1fr))` },
+        ]).length > 0) {
+            onAfterEdit?.();
+        }
+    }
+    const previewCells = cells(dimensions.columns, dimensions.rows);
+    const pickerCells = cells(GRID_PICKER_MAX_COLUMNS, GRID_PICKER_MAX_ROWS);
+    const visible = hovered ?? dimensions;
+    return (_jsxs("div", { ref: pickerRef, className: "grid-picker", "data-test": "layout-grid-picker", onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                setOpen(false);
+                setHovered(null);
+            }
+        }, children: [_jsx("button", { type: "button", className: "grid-picker__trigger", "data-test": "layout-grid-picker-trigger", ref: triggerRef, "aria-label": `Grid ${dimensions.columns} by ${dimensions.rows}`, "aria-expanded": open, "aria-haspopup": "dialog", onClick: () => {
+                    setPopoverPosition(null);
+                    setOpen((current) => !current);
+                }, children: _jsxs("span", { className: "grid-picker__preview", style: gridStyle(dimensions.columns, dimensions.rows), "aria-hidden": "true", children: [previewCells.map(({ column, row }) => (_jsx("span", { className: "grid-picker__preview-cell" }, `${column}-${row}`))), _jsxs("span", { className: "grid-picker__preview-label", children: [dimensions.columns, " \u00D7 ", dimensions.rows] })] }) }), open ? (_jsxs("div", { className: "grid-picker__popover", "data-test": "layout-grid-picker-popover", role: "dialog", "aria-label": "Choose grid size", style: popoverPosition ? {
+                    left: popoverPosition.left,
+                    top: popoverPosition.top,
+                    visibility: "visible",
+                } : undefined, children: [_jsx("div", { className: "grid-picker__cell-grid", style: gridStyle(GRID_PICKER_MAX_COLUMNS, GRID_PICKER_MAX_ROWS), children: pickerCells.map(({ column, row }) => {
+                            const active = column <= visible.columns && row <= visible.rows;
+                            return (_jsx("button", { type: "button", className: `grid-picker__cell${active ? " grid-picker__cell--active" : ""}`, "data-test": `layout-grid-cell-${column}-${row}`, "aria-label": `${column} columns by ${row} rows`, onMouseEnter: () => setHovered({ columns: column, rows: row }), onFocus: () => setHovered({ columns: column, rows: row }), onClick: () => choose(column, row) }, `${column}-${row}`));
+                        }) }), _jsxs("div", { className: "grid-picker__popover-value", "aria-live": "polite", children: [visible.columns, " \u00D7 ", visible.rows] })] })) : null] }));
+}

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

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import type { TokenEntry } from "../../css/model/index.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface GridSectionProps {
+    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;

package/dist/inspector/styleEditors/GridSection.js

@@ -0,0 +1,27 @@
+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 { 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",
+    "start",
+    "end",
+    "center",
+    "stretch",
+    "space-between",
+    "space-around",
+    "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", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Grid settings", title: "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: "editor__title", children: "Gap" }), _jsxs("div", { className: "layout__grid-gap-fields", children: [_jsxs(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-row-gap", children: [_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-row-gap" }), _jsx(GapField, { property: "row-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit })] }), _jsxs(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-column-gap", children: [_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-column-gap" }), _jsx(GapField, { property: "column-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit })] })] })] })] }) }) : null, showChild ? _jsx(GridChildSection, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit }) : null] }));
+}

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

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface GridValueFieldProps {
+    property: string;
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    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.
+ */
+export declare function GridValueField({ property, domElement: el, editTarget, selection, revision, onAfterEdit, }: GridValueFieldProps): ReactElement;