nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/styleEditors/{SpacingBox.js → SpacingField.js}

@@ -5,28 +5,19 @@ 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 { isCalcExpression } from "../../css/value-semantics/index.js";
+import { deriveActiveTokenName, isExpressionRow } from "./fieldValue.js";
 import { completeCssValue } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
 import { projectInspectorValues, projectInspectorValuesForSelection, } from "../spacing/projection.js";
-import { getStateStyleValue } from "../shell/stateValue.js";
 import { isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
 import { inlineBlockedBy } from "./inlineAuthored.js";
-export function SpacingBox(props) {
-    const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
-    const el = element.domElement;
-    const allEntries = entries ?? [];
-    const projection = selection
+/** Values for one selection, projected from its computed styles or the shared selection model. */
+export function projectSpacing(element, selection, tokenRows) {
+    return (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] })] }));
+        : projectInspectorValues(element, tokenRows)).spacing;
 }
 export function SpacingField({ property, projection: spacingProjection, domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, showLabel = true, showEmptyState = true, suggestions, }) {
     const pairDefinitions = [
@@ -40,12 +31,13 @@ export function SpacingField({ property, projection: spacingProjection, domEleme
         return {
             side,
             icon: null,
-            control: (_jsx(TokenField, { property: sideName, selection: selection, tokenRow: findTokenRow(tokenRows, sideName), domElement: el, editTarget: editTarget, entries: entries, suggestions: suggestions, displayValue: isCalcValue(field.authoredValue) && field.value ? field.value : undefined, editMetadata: metadataFor(findTokenRow(tokenRows, sideName)), onAfterEdit: onAfterEdit, chipVariant: "small", leading: icon })),
+            control: (_jsx(TokenField, { property: sideName, selection: selection, tokenRow: findTokenRow(tokenRows, sideName), domElement: el, editTarget: editTarget, entries: entries, suggestions: suggestions, initialValue: property === "inset" ? "auto" : undefined, displayValue: property === "inset" && !field.tokenName
+                    ? field.authoredValue
+                    : isCalcExpression(field.authoredValue) && field.value ? field.value : undefined, editMetadata: metadataFor(findTokenRow(tokenRows, sideName)), onAfterEdit: onAfterEdit, chipVariant: "small", leading: icon })),
         };
     });
     const hasSpacing = SIDE_NAMES.some((side) => {
-        // Zero spacing is visually empty regardless of whether it came from a
-        // reset, a component rule, or a token. Open editors stay open below.
+        // Zero spacing is visually empty whatever its source; open editors stay open below.
         const value = spacingProjection.fields[side].value.trim();
         return value !== "" && !isZeroCssValue(value) && (property !== "inset" || value !== "auto");
     });
@@ -88,14 +80,11 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
     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 expression = isExpressionRow(row);
     const calcAuthored = row?.authored ?? row?.declaredValue ?? "";
-    const isCalcAuthored = isCalcValue(calcAuthored);
-    const activeTokenName = !valuesMatch || expression || isCalcAuthored ? 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 isCalcAuthored = isCalcExpression(calcAuthored);
+    const activeTokenName = deriveActiveTokenName({ row, mixed: !valuesMatch, authored: calcAuthored });
+    // Some browsers report the used pixel size for horizontal auto margins; keep the authored keyword.
     const committedValue = groupMixed
         ? "Mixed"
         : valuesMatch
@@ -130,10 +119,7 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
         }, onUnlink: commitAxisValue, leading: leading, blockedBy: blockedBy }));
 }
 function fieldDisplayValue(field) {
-    return isCalcValue(field.authoredValue) ? field.value : field.authoredValue.trim() || field.value;
-}
-function isCalcValue(value) {
-    return /\bcalc\s*\(/i.test(value);
+    return isCalcExpression(field.authoredValue) ? field.value : field.authoredValue.trim() || field.value;
 }
 function splitAxisValue(value) {
     let depth = 0;

package/dist/inspector/styleEditors/Typography.js

@@ -2,6 +2,7 @@ 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 { isExpressionRow } from "./fieldValue.js";
 import { TokenField } from "../tokens/TokenField.js";
 import { Select } from "../ui/Select.js";
 import { SegmentedControl } from "../ui/SegmentedControl.js";
@@ -36,10 +37,7 @@ function TypographyTokenField(props) {
     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"));
+    const hasTokenChip = Boolean(tokenName && !isExpressionRow(tokenRow));
     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 = [

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

@@ -0,0 +1,36 @@
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { StyleDeclaration } from "../tokens/editActions.js";
+export declare const BORDER_STYLES: readonly ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
+export declare const BORDER_SIDES: readonly ["top", "right", "bottom", "left"];
+export type BorderSide = (typeof BORDER_SIDES)[number];
+export type BorderComponent = "width" | "style" | "color";
+/** Reads a property's computed value for the inspected style state. */
+export type ComputedStyleReader = (property: string, fallback: string) => string;
+export interface BorderSource {
+    readonly rows: readonly ResolvedProperty[];
+    readonly computed: ComputedStyleReader;
+}
+export interface BorderEditorState {
+    readonly sidesLinked: boolean;
+    /** Editable only through a raw field. */
+    readonly rawShorthandRow: ResolvedProperty | null;
+    readonly linkedStyleDraws: boolean;
+    readonly linkedRows: Readonly<Record<BorderComponent, ResolvedProperty | null>>;
+}
+export type BorderIntent = {
+    readonly kind: "add";
+} | {
+    readonly kind: "remove";
+} | {
+    readonly kind: "link-sides";
+} | {
+    readonly kind: "set-style";
+    readonly property: string;
+    readonly style: string;
+};
+export declare function borderProperty(component: BorderComponent, side?: BorderSide): string;
+export declare function readBorderEditor(source: BorderSource, { group }: {
+    readonly group: boolean;
+}): BorderEditorState;
+export declare function hasVisibleBorder(computed: ComputedStyleReader): boolean;
+export declare function borderDeclarations(source: BorderSource, intent: BorderIntent): StyleDeclaration[];

package/dist/inspector/styleEditors/borderModel.js

@@ -0,0 +1,105 @@
+import { findTokenRow } from "./rowLookup.js";
+import { isZeroCssValue } from "./stylePresence.js";
+export const BORDER_STYLES = ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
+export const BORDER_SIDES = ["top", "right", "bottom", "left"];
+const BORDER_STYLE_SET = new Set(BORDER_STYLES);
+const INVISIBLE_BORDER_STYLES = new Set(["none", "hidden"]);
+const COMPONENT_FALLBACK = {
+    width: "0px",
+    style: "none",
+    color: "currentcolor",
+};
+export function borderProperty(component, side) {
+    return side ? `border-${side}-${component}` : `border-${component}`;
+}
+function isBorderStyle(value) {
+    return BORDER_STYLE_SET.has(value);
+}
+function sideProperties(component) {
+    return BORDER_SIDES.map((side) => borderProperty(component, side));
+}
+/** Precedence: structured shorthand parts, then authored text, then computed style. */
+function borderComponentValue(source, component, property) {
+    const row = findTokenRow(source.rows, property);
+    const fallback = COMPONENT_FALLBACK[component];
+    const structured = row?.structure?.[component]?.trim();
+    if (component === "style") {
+        if (structured)
+            return structured.toLowerCase();
+        const authored = (row?.authored ?? row?.declaredValue ?? "").trim().toLowerCase();
+        if (isBorderStyle(authored))
+            return authored;
+        return (source.computed(property, fallback) || fallback).toLowerCase();
+    }
+    if (structured)
+        return structured;
+    return (row?.authored || row?.declaredValue || row?.resolvedValue || source.computed(property, fallback) || fallback).trim();
+}
+/** Width and color compare token bindings too, so a token on one side keeps sides apart. */
+function sideSignature(source, component, property) {
+    const value = borderComponentValue(source, component, property).toLowerCase();
+    if (component === "style")
+        return value;
+    return `${value}|${findTokenRow(source.rows, property)?.tokenName ?? ""}`;
+}
+/** A lone shorthand row is linked by construction; per-side rows compare by structured parts. */
+function componentLinked(source, component) {
+    const properties = sideProperties(component);
+    const hasShorthandRow = findTokenRow(source.rows, borderProperty(component)) !== null;
+    const hasSideRows = properties.some((property) => findTokenRow(source.rows, property) !== null);
+    if (hasShorthandRow && !hasSideRows)
+        return true;
+    return new Set(properties.map((property) => sideSignature(source, component, property))).size === 1;
+}
+function linkedRow(source, component) {
+    const shorthand = borderProperty(component);
+    const direct = findTokenRow(source.rows, shorthand);
+    if (direct)
+        return direct;
+    const top = findTokenRow(source.rows, borderProperty(component, "top"));
+    return top ? { ...top, property: shorthand } : null;
+}
+export function readBorderEditor(source, { group }) {
+    const borderRow = findTokenRow(source.rows, "border");
+    const hasStructuredRows = source.rows.some((row) => Boolean(row.structure));
+    return {
+        sidesLinked: !group
+            && componentLinked(source, "width")
+            && componentLinked(source, "style")
+            && componentLinked(source, "color"),
+        rawShorthandRow: !group && borderRow && !borderRow.structure && !hasStructuredRows ? borderRow : null,
+        linkedStyleDraws: !INVISIBLE_BORDER_STYLES.has(borderComponentValue(source, "style", "border-style")),
+        linkedRows: {
+            width: linkedRow(source, "width"),
+            style: linkedRow(source, "style"),
+            color: linkedRow(source, "color"),
+        },
+    };
+}
+export function hasVisibleBorder(computed) {
+    return BORDER_SIDES.some((side) => {
+        const style = computed(borderProperty("style", side), "none").toLowerCase();
+        if (INVISIBLE_BORDER_STYLES.has(style))
+            return false;
+        return !isZeroCssValue(computed(borderProperty("width", side), "0px"));
+    });
+}
+function linkSidesDeclarations(source) {
+    const components = ["style", "width", "color"];
+    return components.map((component) => ({
+        property: borderProperty(component),
+        value: borderComponentValue(source, component, borderProperty(component, "top")),
+    }));
+}
+export function borderDeclarations(source, intent) {
+    switch (intent.kind) {
+        case "add":
+            return [{ property: "border", value: "1px solid" }];
+        case "remove":
+            return [{ property: "border", value: "0 solid" }];
+        case "link-sides":
+            return linkSidesDeclarations(source);
+        case "set-style":
+            return isBorderStyle(intent.style) ? [{ property: intent.property, value: intent.style }] : [];
+    }
+}

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

@@ -1,8 +1,4 @@
 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.
- */
+/** Commit-time only; never validates or reinterprets arbitrary CSS input. */
 export declare function completeCssValue(rawValue: string, policy: ValuePolicy): string;

package/dist/inspector/styleEditors/completeCssValue.js

@@ -1,15 +1,7 @@
-// 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.
+// Exported as a source fragment for reuse in nudgeValue; matches only a complete CSS <number>.
 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.
- */
+/** Commit-time only; never validates or reinterprets arbitrary CSS input. */
 export function completeCssValue(rawValue, policy) {
     const value = rawValue.trim();
     if (!BARE_NUMBER.test(value) || Number(value) === 0) {
@@ -17,9 +9,7 @@ export function completeCssValue(rawValue, policy) {
     }
     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.
+        // Values up to 10 are multipliers (1.6); larger values are conventional percentages (120).
         if (multiplier > 0 && multiplier <= 10) {
             return `${formatPercentage(multiplier * 100)}%`;
         }

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

@@ -0,0 +1,20 @@
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { SelectionProperty } from "../inspection/selectionProperty.js";
+/**
+ * True when a row reports a value the inspector must treat as an expression,
+ * not as a token: raw CSS, a composite shorthand, an alpha modifier, or an
+ * authored color expression such as color-mix().
+ */
+export declare function isExpressionRow(row: ResolvedProperty | null): boolean;
+export interface ActiveTokenInput {
+    readonly row: ResolvedProperty | null;
+    readonly selectedProperty?: SelectionProperty | null;
+    /** A multi-element selection that disagrees on this property shows "Mixed" and no chip. */
+    readonly mixed: boolean;
+    /** The authored CSS value; a calc() expression suppresses the chip. */
+    readonly authored?: string;
+    /** A property-specific token name that outranks the row (opacity's token-backed value). */
+    readonly override?: string | null;
+}
+/** The token a field should show as active, or null when the value is not token-backed. */
+export declare function deriveActiveTokenName(input: ActiveTokenInput): string | null;

package/dist/inspector/styleEditors/fieldValue.js

@@ -0,0 +1,26 @@
+import { isCalcExpression } from "../../css/value-semantics/index.js";
+/**
+ * True when a row reports a value the inspector must treat as an expression,
+ * not as a token: raw CSS, a composite shorthand, an alpha modifier, or an
+ * authored color expression such as color-mix().
+ */
+export function isExpressionRow(row) {
+    return Boolean(row && (row.capability === "raw"
+        || row.capability === "composite"
+        || row.modifiers?.some((modifier) => modifier.kind === "alpha")
+        || row.color?.isExpression));
+}
+/** The token a field should show as active, or null when the value is not token-backed. */
+export function deriveActiveTokenName(input) {
+    const { row, selectedProperty, mixed, authored = "", override } = input;
+    if (mixed)
+        return null;
+    if (override)
+        return override;
+    if (isExpressionRow(row) || isCalcExpression(authored))
+        return null;
+    if (selectedProperty) {
+        return selectedProperty.token.kind === "common" ? selectedProperty.token.name : null;
+    }
+    return row?.tokenName ?? null;
+}

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

@@ -12,6 +12,6 @@ export interface GradientValue {
     stops: GradientStop[];
 }
 export declare function defaultGradient(): GradientValue;
-/** Parse editable computed gradients. Leave unsupported syntax in the CSS field. */
+/** Null for gradients the editor cannot represent; callers keep the raw CSS. */
 export declare function parseGradient(value: string): GradientValue | null;
 export declare function serializeGradient(gradient: GradientValue): string;

package/dist/inspector/styleEditors/gradientValue.js

@@ -16,7 +16,7 @@ function angleDegrees(value) {
         default: return number;
     }
 }
-/** Parse editable computed gradients. Leave unsupported syntax in the CSS field. */
+/** Null for gradients the editor cannot represent; callers keep the raw CSS. */
 export function parseGradient(value) {
     if (splitTopLevel(value, ",").length !== 1)
         return null;
@@ -35,7 +35,7 @@ export function parseGradient(value) {
             const direction = /^(to\s+(?:(?:left|right|top|bottom)(?:\s+|$)){1,2})/.exec(prelude)?.[0]?.trim();
             if (direction) {
                 const directions = { top: 0, "top right": 45, "right top": 45, right: 90, "bottom right": 135, "right bottom": 135, bottom: 180, "bottom left": 225, "left bottom": 225, left: 270, "top left": 315, "left top": 315 };
-                // Corner directions depend on the element's aspect ratio. Keep them as CSS.
+                // Corner directions depend on the element's aspect ratio; keep them as CSS.
                 if (direction.slice(3).includes(" "))
                     return null;
                 angle = directions[direction.slice(3)] ?? 180;
@@ -102,6 +102,7 @@ export function parseGradient(value) {
         }
         start = end;
     }
+    // SAFETY: interpolation above fills every null position, so each stop has a numeric position.
     return { type, repeating: Boolean(match[1]), angle, prelude, stops: stops };
 }
 export function serializeGradient(gradient) {

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

@@ -2,72 +2,32 @@ 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.
-     */
+    /** Expressible as start + span N; null when the end side is auto, negative, or underivable. */
     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.
- */
+/** Computed CSS 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.
- */
+/** `span: "keep"` re-commits the derived span 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`.
- */
+/** `normal` maps to `stretch`: that is its grid-item behavior, and re-committing `auto` would change layout. */
 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.
- */
+/** Accepts any self-alignment token, not just the picker's keywords. */
 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.
- */
+/** Null for auto-fill/auto-fit tracks, which CSS leaves indefinite. */
 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.
- */
+/** A grid with N tracks has N+1 start lines. */
 export declare function startLineOptions(trackCount: number | null): Array<{
     value: string;
     label: string;

package/dist/inspector/styleEditors/gridChildModel.js

@@ -12,16 +12,11 @@ function normalizeToken(value) {
 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.
- */
+/** Computed CSS 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`);
@@ -42,14 +37,7 @@ export function readGridAxisPlacement(el, axis) {
     }
     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.
- */
+/** `span: "keep"` re-commits the derived span so moving the start line keeps the item's size. */
 export function commitGridAxisPlacement(target, axis, commit) {
     const elements = targetElements(target);
     const declarations = [];
@@ -77,20 +65,13 @@ export function commitGridAxisPlacement(target, axis, commit) {
         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`.
- */
+/** `normal` maps to `stretch`: that is its grid-item behavior, and re-committing `auto` would change layout. */
 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" },
@@ -98,22 +79,13 @@ export const GRID_CHILD_ALIGNMENT_OPTIONS = [
     { 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.
- */
+/** Accepts any self-alignment token, not just the picker's keywords. */
 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.
- */
+/** Null for auto-fill/auto-fit tracks, which CSS leaves indefinite. */
 export function parentTrackCount(el, axis) {
     const parent = el.parentElement;
     if (!parent)
@@ -124,10 +96,7 @@ export function parentTrackCount(el, axis) {
         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.
- */
+/** A grid with N tracks has N+1 start lines. */
 export function startLineOptions(trackCount) {
     const lineCount = (trackCount ?? GRID_CHILD_MAX_TRACKS) + 1;
     const options = [{ value: "auto", label: "Auto" }];

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

@@ -0,0 +1,5 @@
+/** True when anything the size expander hides differs from its initial value, so the toggle can flag it. */
+export declare function hasHiddenSizeOverrides(el: HTMLElement, parent: {
+    flexChild: boolean;
+    gridChild: boolean;
+}): boolean;

package/dist/inspector/styleEditors/hiddenSizeOverrides.js

@@ -0,0 +1,42 @@
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { meaningfulLayoutValue } from "./layoutValue.js";
+/** Initial values of the properties tucked behind the size expander. */
+const SIZE_DEFAULTS = {
+    "min-width": "0",
+    "min-height": "0",
+    "max-width": "none",
+    "max-height": "none",
+    "aspect-ratio": "auto",
+};
+const FLEX_CHILD_DEFAULTS = {
+    "flex-grow": "0",
+    "flex-shrink": "1",
+    "flex-basis": "auto",
+    "align-self": "auto",
+    order: "0",
+};
+const GRID_CHILD_DEFAULTS = {
+    "grid-column-start": "auto",
+    "grid-column-end": "auto",
+    "grid-row-start": "auto",
+    "grid-row-end": "auto",
+    "justify-self": "auto",
+    "align-self": "auto",
+};
+function normalize(value) {
+    const trimmed = value.trim().toLowerCase();
+    // `normal` is how browsers report an unset self-alignment; it behaves like `auto`.
+    if (trimmed === "normal")
+        return "auto";
+    return /^0(px|%|em|rem)?$/.test(trimmed) ? "0" : trimmed;
+}
+/** True when anything the size expander hides differs from its initial value, so the toggle can flag it. */
+export function hasHiddenSizeOverrides(el, parent) {
+    const sizeChanged = Object.entries(SIZE_DEFAULTS)
+        .some(([property, initial]) => normalize(meaningfulLayoutValue(el, property)) !== initial);
+    if (sizeChanged)
+        return true;
+    const childDefaults = parent.flexChild ? FLEX_CHILD_DEFAULTS : parent.gridChild ? GRID_CHILD_DEFAULTS : null;
+    return childDefaults !== null && Object.entries(childDefaults)
+        .some(([property, initial]) => normalize(getStateStyleValue(el, property, initial)) !== initial);
+}

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

@@ -1,10 +1,3 @@
-/**
- * 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).
- */
+/** Non-null means the field must present as blocked: previews cannot beat inline styles in the cascade. */
 export declare function inlineAuthoredValue(el: HTMLElement, property: string): string | null;
-/** First inline-authored source that blocks any of `properties` on any of `elements`. */
 export declare function inlineBlockedBy(elements: readonly HTMLElement[], ...properties: readonly string[]): string | null;