nudge-ui 0.2.0

package/dist/inspector/styleEditors/SpacingBox.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import { findTokenRow, metadataFor } from "./rowLookup.js";
+import { TokenField, TokenValueField } from "../tokens/TokenField.js";
+import { IconButton } from "../ui/IconButton.js";
+import { SideValuesField, SIDE_NAMES, MarginSideIndicator, } from "../ui/SideValuesField.js";
+import { setStyles, swapTokens } from "../tokens/editActions.js";
+import { completeCssValue } from "./completeCssValue.js";
+import { valuePolicyFor } from "./valuePolicy.js";
+import { projectInspectorValues, projectInspectorValuesForSelection, } from "../spacing/projection.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+export function SpacingBox(props) {
+    const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
+    const el = element.domElement;
+    const allEntries = entries ?? [];
+    const projection = selection
+        ? projectInspectorValuesForSelection(selection)
+        : projectInspectorValues(el, tokenRows);
+    const showRelativeInset = selection
+        ? selection.supportsRole("relative-position")
+        : (() => {
+            const value = getStateStyleValue(el, "position", "static").trim().toLowerCase();
+            return value === "relative" || value === "sticky";
+        })();
+    const editTarget = selection?.target ?? el;
+    return (_jsxs("div", { className: "editor", "data-test": "spacing-box", children: [_jsx("div", { className: "editor__title", children: "Spacing" }), _jsxs("div", { className: "spacing", children: [_jsx(SpacingField, { property: "padding", projection: projection.spacing.padding, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }), _jsx(SpacingField, { property: "margin", projection: projection.spacing.margin, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }), showRelativeInset ? _jsx(SpacingField, { property: "inset", projection: projection.spacing.inset, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }) : null] })] }));
+}
+export function SpacingField({ property, projection: spacingProjection, domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, showLabel = true, showEmptyState = true, suggestions, }) {
+    const [fieldsAdded, setFieldsAdded] = useState(false);
+    const pairDefinitions = [
+        { axis: "horizontal", sideProperties: [sideProperty(property, "right"), sideProperty(property, "left")] },
+        { axis: "vertical", sideProperties: [sideProperty(property, "top"), sideProperty(property, "bottom")] },
+    ];
+    const sideSlots = SIDE_NAMES.map((side) => ({
+        side,
+        icon: property === "padding" ? _jsx(PaddingSideIndicator, { side: side }) : _jsx(MarginSideIndicator, { side: side }),
+        control: (_jsx(TokenField, { property: sideProperty(property, side), selection: selection, tokenRow: findTokenRow(tokenRows, sideProperty(property, side)), domElement: el, editTarget: editTarget, entries: entries, suggestions: suggestions, editMetadata: metadataFor(findTokenRow(tokenRows, sideProperty(property, side))), onAfterEdit: onAfterEdit, chipVariant: "small" })),
+    }));
+    const spacingIsEmpty = SIDE_NAMES.every((side) => property === "inset"
+        ? isEmptyInsetValue(spacingProjection.fields[side].value)
+        : isZeroSpacingValue(spacingProjection.fields[side].value));
+    useEffect(() => {
+        setFieldsAdded(false);
+    }, [el]);
+    useEffect(() => {
+        if (!spacingIsEmpty)
+            setFieldsAdded(false);
+    }, [spacingIsEmpty]);
+    const pairSlots = pairDefinitions.map(({ axis, sideProperties }) => ({
+        axis,
+        icon: _jsx(SpacingAxisIndicator, { property: property, axis: axis }),
+        control: (_jsx(PairedTokenField, { displayProperty: `${property}-${axis}`, sideProperties: sideProperties, domElement: el, editTarget: editTarget, axisProjection: spacingProjection.axes[axis], entries: entries, suggestions: suggestions, onAfterEdit: onAfterEdit, chipVariant: "small" })),
+    }));
+    return (_jsx(SideValuesField, { label: property, "data-test": property === "inset" ? "layout-inset" : `spacing-${property}`, "data-property": property, resetKey: el, pairedControls: pairSlots, showLabel: showLabel, empty: showEmptyState && spacingIsEmpty && !fieldsAdded, onAdd: () => setFieldsAdded(true), emptyAction: property === "inset" ? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-inset", label: "Add Inset Values", title: "Add Inset Values", onClick: () => setFieldsAdded(true), children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : undefined, sides: sideSlots }));
+}
+function sideProperty(property, side) {
+    return property === "inset" ? side : `${property}-${side}`;
+}
+function isZeroSpacingValue(value) {
+    const normalized = value.trim().toLowerCase();
+    return !normalized || /^-?0(?:\.0+)?(?:[a-z%]+)?$/.test(normalized);
+}
+function isEmptyInsetValue(value) {
+    const normalized = value.trim().toLowerCase();
+    return !normalized || normalized === "auto" || /^-?0(?:\.0+)?(?:[a-z%]+)?$/.test(normalized);
+}
+function PaddingSideIndicator({ side }) {
+    if (side === "left") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "6.75", y1: "7", x2: "6.75", y2: "17", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    if (side === "right") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "17", y1: "7", x2: "17", y2: "17", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    if (side === "bottom") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "21", y: "3", width: "18", height: "18", rx: "2", transform: "rotate(90 21 3)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "17", y1: "17", x2: "7", y2: "17", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "21", width: "18", height: "18", rx: "2", transform: "rotate(-90 3 21)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "7", y1: "7", x2: "17", y2: "7", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+}
+function SpacingAxisIndicator({ property, axis, }) {
+    if (property === "padding" && axis === "horizontal") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__axis-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "6.75", y1: "7", x2: "6.75", y2: "17", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" }), _jsx("line", { x1: "17", y1: "7", x2: "17", y2: "17", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    if (property === "padding" && axis === "vertical") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__axis-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "21", y: "3", width: "18", height: "18", rx: "2", transform: "rotate(90 21 3)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "17", y1: "6.75", x2: "7", y2: "6.75", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" }), _jsx("line", { x1: "17", y1: "17", x2: "7", y2: "17", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    if (property !== "padding" && axis === "horizontal") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__axis-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "6", y: "5", width: "12", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "2", y1: "5", x2: "2", y2: "19", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" }), _jsx("line", { x1: "22", y1: "5", x2: "22", y2: "19", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    return (_jsxs("svg", { className: "side-values__icon side-values__axis-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "19", y: "6", width: "12", height: "14", rx: "2", transform: "rotate(90 19 6)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "19", y1: "2", x2: "5", y2: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" }), _jsx("line", { x1: "19", y1: "22", x2: "5", y2: "22", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+}
+function PairedTokenField({ displayProperty, sideProperties, domElement: el, editTarget, axisProjection, entries, suggestions, onAfterEdit, chipVariant, }) {
+    const row = pairTokenRow(displayProperty, axisProjection);
+    const groupMixed = axisProjection.fields.some((field) => field.value === "Mixed");
+    const valuesMatch = axisProjection.state === "shared" && !groupMixed;
+    const expression = Boolean(row && (row.capability === "raw" || row.capability === "composite"
+        || row.modifiers?.some((modifier) => modifier.kind === "alpha")));
+    const calcAuthored = row?.authored ?? row?.declaredValue ?? "";
+    const activeTokenName = !valuesMatch || expression || /\bcalc\s*\(/i.test(calcAuthored) ? null : row.tokenName;
+    // Some browsers expose the used pixel size for horizontal auto margins.
+    // Keep the authored keyword visible because replacing it with that transient
+    // size would misrepresent the declaration and change the edit semantics.
+    const committedValue = groupMixed
+        ? "Mixed"
+        : valuesMatch
+            ? calcAuthored.trim().toLowerCase() === "auto"
+                ? calcAuthored.trim()
+                : expression ? row.authored || row.declaredValue || row.resolvedValue : row.resolvedValue
+            : axisProjection.fields.map(fieldDisplayValue).join(", ");
+    const resolvedValue = valuesMatch
+        ? row.resolvedValue
+        : axisProjection.fields.map((field) => field.value).join(", ");
+    const currentToken = activeTokenName
+        ? entries.find((entry) => entry.name === activeTokenName) ?? null
+        : null;
+    function commitAxisValue(value) {
+        const pair = splitAxisValue(value);
+        const records = setStyles(editTarget ?? el, sideProperties.map((property, index) => ({
+            property,
+            value: pair?.[index] ?? value,
+        })));
+        if (records.some(Boolean))
+            onAfterEdit?.();
+    }
+    return (_jsx(TokenValueField, { property: displayProperty, committedValue: committedValue, resolvedValue: resolvedValue, activeTokenName: activeTokenName, mixed: groupMixed, atRules: row.atRuleCandidates ?? row.atRules, entries: entries, suggestions: suggestions, chipVariant: chipVariant, formatRawValue: (value) => formatAxisValue(value, displayProperty), onCommitRaw: commitAxisValue, onSelectToken: (chosen) => {
+            const records = swapTokens(editTarget ?? el, sideProperties.map((property) => ({
+                property,
+                newToken: chosen,
+                oldToken: activeTokenName ? currentToken : null,
+            })));
+            if (records.some(Boolean))
+                onAfterEdit?.();
+        }, onUnlink: commitAxisValue }));
+}
+function fieldDisplayValue(field) {
+    return field.authoredValue.trim() || field.value;
+}
+function splitAxisValue(value) {
+    let depth = 0;
+    let quote = null;
+    let separator = -1;
+    for (let index = 0; index < value.length; index++) {
+        const character = value[index];
+        if (quote) {
+            if (character === quote && value[index - 1] !== "\\")
+                quote = null;
+            continue;
+        }
+        if (character === "\"" || character === "'")
+            quote = character;
+        else if (character === "(" || character === "[")
+            depth++;
+        else if (character === ")" || character === "]")
+            depth = Math.max(0, depth - 1);
+        else if (character === "," && depth === 0) {
+            if (separator >= 0)
+                return null;
+            separator = index;
+        }
+    }
+    if (separator < 0)
+        return null;
+    const first = value.slice(0, separator).trim();
+    const second = value.slice(separator + 1).trim();
+    return first && second ? [first, second] : null;
+}
+function formatAxisValue(value, property) {
+    const pair = splitAxisValue(value);
+    const policy = valuePolicyFor(property);
+    return pair
+        ? pair.map((part) => completeCssValue(part, policy)).join(", ")
+        : completeCssValue(value.trim(), policy);
+}
+function pairTokenRow(displayProperty, axisProjection) {
+    const firstField = axisProjection.fields[0];
+    const first = firstField.row;
+    const valuesMatch = axisProjection.state === "shared";
+    return {
+        ...(first ?? {}),
+        property: displayProperty,
+        tokenName: valuesMatch ? firstField.tokenName : null,
+        declaredValue: firstField.authoredValue,
+        authored: firstField.authoredValue,
+        resolvedValue: firstField.value,
+        capability: first?.capability ?? "box-sides",
+        confidence: valuesMatch ? first?.confidence ?? "unknown" : "unknown",
+        evidence: first?.evidence ?? { reason: "paired physical side values" },
+    };
+}

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

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

package/dist/inspector/styleEditors/Typography.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconTextSize, IconAlignCenter, IconAlignLeft, IconAlignRight, IconLayoutAlignMiddle, IconLayoutAlignBottom, IconLayoutAlignTop, IconBaseline, IconChevronDown, IconItalic, IconLetterSpacing, IconTypography, } from "@tabler/icons-react";
+import { findTokenRow, metadataFor } from "./rowLookup.js";
+import { TokenField } from "../tokens/TokenField.js";
+import { Select } from "../ui/Select.js";
+import { SegmentedControl } from "../ui/SegmentedControl.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { setStyle, setStyles } from "../tokens/editActions.js";
+import { AtRuleIndicator, useFieldAtRules } from "../ui/AtRuleContext.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+export function Typography(props) {
+    const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
+    const el = element.domElement;
+    const target = selection?.target ?? el;
+    const targetElements = selection?.domElements ?? [el];
+    const allEntries = entries ?? [];
+    return (_jsxs("div", { className: "editor editor--typography", "data-test": "typography", children: [_jsx("div", { className: "editor__title-row", children: _jsx("div", { className: "editor__title", children: "Text" }) }), _jsxs("div", { className: "typography", children: [_jsx(TypographyTokenField, { property: "font-family", label: "Font family", icon: _jsx(IconItalic, { size: "var(--icon-size-small)", stroke: 1.35, "aria-hidden": "true" }), tokenRow: findTokenRow(tokenRows, "font-family"), selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit }), _jsx(FontStyleField, { element: el, elements: targetElements, editTarget: target, fontStyleRow: findTokenRow(tokenRows, "font-style"), fontWeightRow: findTokenRow(tokenRows, "font-weight"), onAfterEdit: onAfterEdit }), _jsxs("div", { className: "typography__metrics", "data-test": "typography-metrics", children: [_jsx(TypographyTokenField, { property: "font-size", label: "Font size", icon: _jsx(IconTextSize, { size: "var(--icon-size-small)", stroke: 1.55, "aria-hidden": "true" }), tokenRow: findTokenRow(tokenRows, "font-size"), selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }), _jsx(TypographyTokenField, { property: "line-height", label: "Line height", icon: _jsx(IconBaseline, { size: "var(--icon-size-small)", stroke: 1.5, "aria-hidden": "true" }), tokenRow: findTokenRow(tokenRows, "line-height"), selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }), _jsx(TypographyTokenField, { property: "letter-spacing", label: "Letter spacing", icon: _jsx(IconLetterSpacing, { size: "var(--icon-size-small)", stroke: 1.5, "aria-hidden": "true" }), tokenRow: findTokenRow(tokenRows, "letter-spacing"), selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" })] }), _jsxs("div", { className: "typography__alignment", "data-test": "typography-alignment", children: [_jsx(AlignmentField, { property: "text-align", label: "Horizontal alignment", element: el, elements: targetElements, editTarget: target, defaultValue: "left", options: [
+                                    { value: "left", label: "Align left", icon: _jsx(IconAlignLeft, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+                                    { value: "center", label: "Align center", icon: _jsx(IconAlignCenter, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+                                    { value: "right", label: "Align right", icon: _jsx(IconAlignRight, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+                                ], onAfterEdit: onAfterEdit }), _jsx(AlignmentField, { property: "vertical-align", label: "Vertical alignment", element: el, elements: targetElements, editTarget: target, defaultValue: "baseline", options: [
+                                    { value: "top", label: "Align top", icon: _jsx(IconLayoutAlignTop, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+                                    { value: "middle", label: "Align middle", icon: _jsx(IconLayoutAlignMiddle, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+                                    { value: "bottom", label: "Align bottom", icon: _jsx(IconLayoutAlignBottom, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) },
+                                ], onAfterEdit: onAfterEdit })] })] })] }));
+}
+function TypographyTokenField(props) {
+    const { property, label, icon, tokenRow, selection, domElement, editTarget, entries, onAfterEdit, chipVariant } = props;
+    const metric = property === "font-size" || property === "line-height" || property === "letter-spacing";
+    const selectedProperty = selection && selection.elements.length > 1
+        ? selection.getProperty(property)
+        : null;
+    const tokenName = selectedProperty
+        ? selectedProperty.token.kind === "common" ? selectedProperty.token.name : null
+        : tokenRow?.tokenName;
+    const hasTokenChip = Boolean(tokenName
+        && tokenRow?.capability !== "raw"
+        && tokenRow?.capability !== "composite"
+        && !tokenRow?.modifiers?.some((modifier) => modifier.kind === "alpha"));
+    return (_jsx(ControlSurface, { className: `typography__field typography__field--${property}`, children: _jsx(TokenField, { property: property, tokenRow: tokenRow, selection: selection, domElement: domElement, editTarget: editTarget, entries: entries, editMetadata: metadataFor(tokenRow), leading: icon, trailing: metric || hasTokenChip ? undefined : _jsx(IconChevronDown, { size: 17, stroke: 1.8, "aria-hidden": "true" }), label: label, chipVariant: chipVariant, onAfterEdit: onAfterEdit }) }));
+}
+const FONT_STYLE_OPTIONS = [
+    { value: "300-normal", label: "Light", weight: "300", style: "normal" },
+    { value: "400-normal", label: "Regular", weight: "400", style: "normal" },
+    { value: "500-normal", label: "Medium", weight: "500", style: "normal" },
+    { value: "600-normal", label: "Semibold", weight: "600", style: "normal" },
+    { value: "700-normal", label: "Bold", weight: "700", style: "normal" },
+    { value: "400-italic", label: "Italic", weight: "400", style: "italic" },
+    { value: "700-italic", label: "Bold Italic", weight: "700", style: "italic" },
+    { value: "400-oblique", label: "Oblique", weight: "400", style: "oblique" },
+];
+function FontStyleField({ element, elements, editTarget, fontStyleRow, fontWeightRow, onAfterEdit }) {
+    const fontStyleAtRules = useFieldAtRules("font-style");
+    const fontWeightAtRules = useFieldAtRules("font-weight");
+    const atRules = fontStyleRow?.atRuleCandidates ?? fontStyleRow?.atRules
+        ?? fontWeightRow?.atRuleCandidates ?? fontWeightRow?.atRules
+        ?? (fontStyleAtRules.length > 0 ? fontStyleAtRules : fontWeightAtRules);
+    const readValue = () => readFontStyle(element);
+    const values = elements.map(readFontStyle);
+    const isMixed = values.some((value) => value.weight !== values[0]?.weight || value.style !== values[0]?.style);
+    const [current, setCurrent] = useState(readValue);
+    useEffect(() => {
+        setCurrent(readValue());
+    }, [element, elements]);
+    const currentOption = FONT_STYLE_OPTIONS.find((option) => option.value === `${current.weight}-${current.style}`);
+    const currentKey = currentOption?.value ?? `${current.weight}-${current.style}`;
+    const currentLabel = isMixed ? "Mixed" : currentOption?.label ?? formatCustomFontStyle(current.weight, current.style);
+    const options = isMixed
+        ? [{ value: "mixed", label: "Mixed", disabled: true }, ...FONT_STYLE_OPTIONS]
+        : currentOption
+            ? FONT_STYLE_OPTIONS
+            : [...FONT_STYLE_OPTIONS, { value: currentKey, label: currentLabel, ...current }];
+    function handleChange(value) {
+        const option = options.find((candidate) => candidate.value === value);
+        if (!option || option.value === "mixed" || !("weight" in option) || !("style" in option))
+            return;
+        setCurrent({ weight: option.weight, style: option.style });
+        setStyles(editTarget, [
+            { property: "font-style", value: option.style, metadata: metadataFor(fontStyleRow ?? fontWeightRow) },
+            { property: "font-weight", value: option.weight, metadata: metadataFor(fontWeightRow ?? fontStyleRow) },
+        ]);
+        onAfterEdit?.();
+    }
+    return (_jsxs(ControlSurface, { className: "typography__field typography__field--font-style", "data-test": "typography-field", "data-property": "font-style", "aria-label": "Font style", title: "Font style", children: [_jsx("span", { className: "typography__field-icon", "aria-hidden": "true", children: _jsx(IconTypography, { size: "var(--icon-size-small)", stroke: 1.45 }) }), _jsx(Select, { appearance: "embedded", value: isMixed ? "mixed" : currentKey, options: options.map(({ value, label }) => ({ value, label })), onValueChange: handleChange, "data-test": "font-style-field" }), _jsx(AtRuleIndicator, { atRules: atRules })] }));
+}
+function readFontStyle(element) {
+    return {
+        weight: normalizeFontWeight(getStateStyleValue(element, "font-weight", "400") || "400"),
+        style: getStateStyleValue(element, "font-style", "normal") || "normal",
+    };
+}
+function normalizeFontWeight(value) {
+    if (value === "normal")
+        return "400";
+    if (value === "bold")
+        return "700";
+    return value;
+}
+function formatCustomFontStyle(weight, style) {
+    const italic = style === "italic" || style.startsWith("oblique");
+    const weightLabel = weight === "400" ? "Regular" : weight;
+    return italic ? `${weightLabel} ${style}` : weightLabel;
+}
+function AlignmentField({ property, label, element, elements, editTarget, defaultValue, options, onAfterEdit }) {
+    const atRules = useFieldAtRules(property);
+    const readValues = () => elements.map((target) => getStateStyleValue(target, property, defaultValue));
+    const initialValues = readValues();
+    const isMixed = initialValues.some((value) => value !== initialValues[0]);
+    const [initialValue] = useState(() => getStateStyleValue(element, property, defaultValue));
+    const [current, setCurrent] = useState(() => isMixed ? null : normalizeAlignment(property, initialValue));
+    useEffect(() => {
+        const next = getStateStyleValue(element, property, defaultValue);
+        const values = readValues();
+        setCurrent(values.some((value) => value !== values[0]) ? null : normalizeAlignment(property, next));
+    }, [defaultValue, element, elements, property]);
+    function handleChange(value) {
+        setCurrent(value);
+        setStyle(editTarget, property, value);
+        onAfterEdit?.();
+    }
+    return (_jsxs("div", { className: "typography__alignment-field", children: [isMixed || current === null && elements.length > 1 ? (_jsx("span", { className: "typography__mixed", "data-test": `typography-mixed-${property}`, children: "Mixed" })) : null, _jsx(SegmentedControl, { value: current, "aria-label": label, "data-property": property, options: options.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                    icon: option.icon,
+                    testId: `typography-align-${property}-${option.value}`,
+                })), onChange: handleChange }), _jsx(AtRuleIndicator, { atRules: atRules })] }));
+}
+function normalizeAlignment(property, value) {
+    if (property !== "text-align")
+        return value;
+    if (value === "start")
+        return "left";
+    if (value === "end")
+        return "right";
+    return value;
+}

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

@@ -0,0 +1,8 @@
+import type { ValuePolicy } from "./valuePolicy.js";
+export declare const CSS_NUMBER_SOURCE = "[+-]?(?:(?:\\d+\\.?\\d*)|(?:\\.\\d+))(?:e[+-]?\\d+)?";
+/**
+ * Completes a bare numeric entry with its property's default unit. This is a
+ * commit-time formatter; it deliberately does not validate or reinterpret
+ * arbitrary CSS supplied by the user.
+ */
+export declare function completeCssValue(rawValue: string, policy: ValuePolicy): string;

package/dist/inspector/styleEditors/completeCssValue.js

@@ -0,0 +1,34 @@
+// CSS <number>, including values such as .5 and 1e3. This intentionally only
+// matches the entire value: units, functions, keywords, and compound values
+// are all valid raw CSS and must be passed through unchanged.
+// Exported as a source fragment so other editors (e.g. nudgeValue) build
+// their number-aware patterns from the same single grammar definition.
+export const CSS_NUMBER_SOURCE = "[+-]?(?:(?:\\d+\\.?\\d*)|(?:\\.\\d+))(?:e[+-]?\\d+)?";
+const BARE_NUMBER = new RegExp(`^(?:${CSS_NUMBER_SOURCE})$`, "i");
+/**
+ * Completes a bare numeric entry with its property's default unit. This is a
+ * commit-time formatter; it deliberately does not validate or reinterpret
+ * arbitrary CSS supplied by the user.
+ */
+export function completeCssValue(rawValue, policy) {
+    const value = rawValue.trim();
+    if (!BARE_NUMBER.test(value) || Number(value) === 0) {
+        return value;
+    }
+    if (policy.kind === "line-height") {
+        const multiplier = Number(value);
+        // People commonly enter line-height as its CSS multiplier (1.6), while
+        // larger whole values conventionally represent a percentage (120). Keep
+        // both convenient forms while committing a single percentage value.
+        if (multiplier > 0 && multiplier <= 10) {
+            return `${formatPercentage(multiplier * 100)}%`;
+        }
+        return `${value}%`;
+    }
+    if (policy.kind !== "unit")
+        return value;
+    return `${value}${policy.defaultUnit}`;
+}
+function formatPercentage(value) {
+    return Number(value.toPrecision(15)).toString();
+}

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

@@ -0,0 +1,74 @@
+import type { ChangeRecord } from "../tokens/editActions.js";
+import { type EditTarget } from "../selection/editTarget.js";
+/** One grid axis of a grid item: `column` maps to grid-column-*, `row` to grid-row-*. */
+export type GridAxis = "column" | "row";
+/**
+ * Alignment vocabulary for grid children. `default` defers to the container's
+ * `justify-items` / `align-items` (authored as `auto`); `fill` is `stretch`.
+ */
+export type GridChildAlignment = "auto" | "stretch" | "start" | "center" | "end";
+export interface GridAxisPlacement {
+    /** Authored or computed start line token: "auto", a line number, or a named line. */
+    start: string;
+    /**
+     * Span when the placement is expressible as start + span N: the end side is
+     * `span N`, or both sides are definite positive line numbers. Null when the
+     * end side is auto, a negative line, or not derivable.
+     */
+    span: number | null;
+}
+export declare const GRID_CHILD_MAX_TRACKS = 12;
+/** Parses a `span N` end-side token into N. */
+export declare function parseSpanToken(value: string): number | null;
+/**
+ * Reads one placement axis from authored CSS (preferred) falling back to
+ * computed CSS, which stays correct even when the authored rule uses the
+ * `grid-column` / `grid-row` shorthand.
+ */
+export declare function readGridAxisPlacement(el: HTMLElement, axis: GridAxis): GridAxisPlacement;
+/**
+ * Commits one placement axis as managed longhands. The UI model is
+ * "start line + span", so editing either side recomposes both:
+ * a simple span is rewritten as `span N` (or `auto` for 1), while a negative
+ * end line ("to the last line") and plain auto ends are preserved untouched.
+ * `span: "keep"` re-commits the currently derived span, if any, so moving the
+ * start line keeps the item's size.
+ */
+export declare function commitGridAxisPlacement(target: EditTarget, axis: GridAxis, commit: {
+    start?: string;
+    span?: number | "keep";
+}): ChangeRecord[];
+/**
+ * Reads one self-alignment axis as a raw CSS token with `normal` mapped to
+ * `stretch`: on grid items `normal` has stretch behavior (except replaced
+ * elements), so labeling it "Parent default" would misdescribe the rendering
+ * and re-committing `auto` for it could change the layout. `auto` alone means
+ * the item defers to the container's `justify-items` / `align-items`.
+ */
+export declare function readGridChildAlignment(el: HTMLElement, axis: "h" | "v"): string;
+/** Friendly alignment labels; `auto` resolves to the container's items alignment. */
+export declare const GRID_CHILD_ALIGNMENT_OPTIONS: Array<{
+    value: GridChildAlignment;
+    label: string;
+}>;
+/**
+ * Commits one self-alignment axis. The alignment vocabulary is an open CSS
+ * set — the friendly pickers cover the common keywords while authored values
+ * such as `self-start` or `normal` round-trip verbatim — so this accepts any
+ * self-alignment token the UI puts in its options.
+ */
+export declare function commitGridChildAlignment(target: EditTarget, axis: "h" | "v", alignment: string): ChangeRecord[];
+/**
+ * Resolved track count of the parent grid on one axis, when CSS makes it
+ * definite (auto-fill/auto-fit tracks cannot be counted). Caps at
+ * GRID_CHILD_MAX_TRACKS to bound generated line options.
+ */
+export declare function parentTrackCount(el: HTMLElement, axis: GridAxis): number | null;
+/**
+ * Start-line options for one axis: Auto plus explicit line numbers. A grid
+ * with N tracks has N+1 lines, so the final start line is count + 1.
+ */
+export declare function startLineOptions(trackCount: number | null): Array<{
+    value: string;
+    label: string;
+}>;

package/dist/inspector/styleEditors/gridChildModel.js

@@ -0,0 +1,138 @@
+import { getLayoutValue } from "./layoutValue.js";
+import { setElementStyles, setStyle, setStyles } from "../tokens/editActions.js";
+import { countGridTracks } from "./GridPicker.js";
+import { targetElements } from "../selection/editTarget.js";
+const LINE_NUMBER = /^-?\d+$/;
+const SPAN_TOKEN = /^span\s+(\d+)$/i;
+export const GRID_CHILD_MAX_TRACKS = 12;
+function normalizeToken(value) {
+    const trimmed = value?.trim();
+    return trimmed ? trimmed : "auto";
+}
+function isLineNumber(value) {
+    return LINE_NUMBER.test(value);
+}
+/** Parses a `span N` end-side token into N. */
+export function parseSpanToken(value) {
+    const match = SPAN_TOKEN.exec(value.trim());
+    return match ? Number(match[1]) : null;
+}
+/**
+ * Reads one placement axis from authored CSS (preferred) falling back to
+ * computed CSS, which stays correct even when the authored rule uses the
+ * `grid-column` / `grid-row` shorthand.
+ */
+export function readGridAxisPlacement(el, axis) {
+    const start = getLayoutValue(el, `grid-${axis}-start`);
+    const end = getLayoutValue(el, `grid-${axis}-end`);
+    const startToken = normalizeToken(start.authored ?? start.computed);
+    const endToken = normalizeToken(end.authored ?? end.computed);
+    let span = null;
+    const spanToken = parseSpanToken(endToken);
+    if (spanToken !== null) {
+        span = spanToken;
+    }
+    else if (isLineNumber(endToken)) {
+        const endLine = Number(endToken);
+        if (endLine >= 1 && isLineNumber(startToken)) {
+            const derived = endLine - Number(startToken);
+            if (derived >= 1)
+                span = derived;
+        }
+    }
+    return { start: startToken, span };
+}
+/**
+ * Commits one placement axis as managed longhands. The UI model is
+ * "start line + span", so editing either side recomposes both:
+ * a simple span is rewritten as `span N` (or `auto` for 1), while a negative
+ * end line ("to the last line") and plain auto ends are preserved untouched.
+ * `span: "keep"` re-commits the currently derived span, if any, so moving the
+ * start line keeps the item's size.
+ */
+export function commitGridAxisPlacement(target, axis, commit) {
+    const elements = targetElements(target);
+    const declarations = [];
+    if (commit.start !== undefined) {
+        declarations.push({ property: `grid-${axis}-start`, value: commit.start });
+    }
+    let endValue = null;
+    if (commit.span === "keep") {
+        return setElementStyles(elements.map((element) => {
+            const elementDeclarations = [...declarations];
+            const current = readGridAxisPlacement(element, axis);
+            if (current.span !== null) {
+                elementDeclarations.push({
+                    property: `grid-${axis}-end`,
+                    value: current.span >= 2 ? `span ${current.span}` : "auto",
+                });
+            }
+            return { element, declarations: elementDeclarations };
+        }));
+    }
+    else if (typeof commit.span === "number") {
+        endValue = commit.span >= 2 ? `span ${commit.span}` : "auto";
+    }
+    if (endValue !== null)
+        declarations.push({ property: `grid-${axis}-end`, value: endValue });
+    return declarations.length > 0 ? setStyles(target, declarations) : [];
+}
+/**
+ * Reads one self-alignment axis as a raw CSS token with `normal` mapped to
+ * `stretch`: on grid items `normal` has stretch behavior (except replaced
+ * elements), so labeling it "Parent default" would misdescribe the rendering
+ * and re-committing `auto` for it could change the layout. `auto` alone means
+ * the item defers to the container's `justify-items` / `align-items`.
+ */
+export function readGridChildAlignment(el, axis) {
+    const property = axis === "h" ? "justify-self" : "align-self";
+    const value = getLayoutValue(el, property);
+    const token = normalizeToken(value.authored ?? value.computed);
+    return token === "normal" ? "stretch" : token;
+}
+/** Friendly alignment labels; `auto` resolves to the container's items alignment. */
+export const GRID_CHILD_ALIGNMENT_OPTIONS = [
+    { value: "auto", label: "Parent default" },
+    { value: "stretch", label: "Fill" },
+    { value: "start", label: "Start" },
+    { value: "center", label: "Center" },
+    { value: "end", label: "End" },
+];
+/**
+ * Commits one self-alignment axis. The alignment vocabulary is an open CSS
+ * set — the friendly pickers cover the common keywords while authored values
+ * such as `self-start` or `normal` round-trip verbatim — so this accepts any
+ * self-alignment token the UI puts in its options.
+ */
+export function commitGridChildAlignment(target, axis, alignment) {
+    const property = axis === "h" ? "justify-self" : "align-self";
+    const record = setStyle(target, property, alignment);
+    return record ? [record] : [];
+}
+/**
+ * Resolved track count of the parent grid on one axis, when CSS makes it
+ * definite (auto-fill/auto-fit tracks cannot be counted). Caps at
+ * GRID_CHILD_MAX_TRACKS to bound generated line options.
+ */
+export function parentTrackCount(el, axis) {
+    const parent = el.parentElement;
+    if (!parent)
+        return null;
+    const template = getLayoutValue(parent, `grid-template-${axis}s`);
+    const count = countGridTracks(template.authored ?? template.computed ?? "");
+    if (count === null)
+        return null;
+    return Math.min(count, GRID_CHILD_MAX_TRACKS);
+}
+/**
+ * Start-line options for one axis: Auto plus explicit line numbers. A grid
+ * with N tracks has N+1 lines, so the final start line is count + 1.
+ */
+export function startLineOptions(trackCount) {
+    const lineCount = (trackCount ?? GRID_CHILD_MAX_TRACKS) + 1;
+    const options = [{ value: "auto", label: "Auto" }];
+    for (let line = 1; line <= Math.max(2, lineCount); line++) {
+        options.push({ value: String(line), label: String(line) });
+    }
+    return options;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Returns the authored CSS value when one is available, without replacing
+ * keywords such as `auto` with the browser's used pixel value.
+ */
+export declare function meaningfulLayoutValue(el: HTMLElement, property: string): string;
+export declare function readAuthoredStyleValue(el: HTMLElement, property: string): string | null;
+/**
+ * Returns the inline-authored source when `el` carries the property — or a
+ * shorthand that sets it — in its `style` attribute. Managed previews can
+ * never beat inline styles in the cascade, so a non-null result means the
+ * field must present as blocked instead of accepting edits that silently
+ * revert (see `verifyPreview`'s "inline-style" conflict).
+ */
+export declare function inlineAuthoredValue(el: HTMLElement, property: string): string | null;
+export interface LayoutValue {
+    property: string;
+    authored: string | null;
+    computed: string;
+}
+/**
+ * Reads both representations needed by a layout editor. Authored CSS is the
+ * editable source of truth; computed CSS is only the browser preview/fallback.
+ */
+export declare function getLayoutValue(el: HTMLElement, property: string): LayoutValue;