nudge-ui 0.2.0

package/dist/inspector/shell/stateValue.js

@@ -0,0 +1,34 @@
+import { getActiveStyleState } from "./styleState.js";
+import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+/** Read an inspector value from the selected authored state, falling back to
+ * the browser only when CSSOM has no declaration to attribute. */
+export function getStateStyleValue(el, property, fallback = "") {
+    try {
+        const state = getActiveStyleState();
+        // Keep the browser's exact computed value for ordinary Base inspection.
+        // Authored resolution is needed when the live element is transiently
+        // interacted with, or when the user explicitly selected another state.
+        const hasLiveInteraction = [":hover", ":active", ":focus", ":focus-visible"].some((selector) => {
+            try {
+                return el.matches(selector);
+            }
+            catch {
+                return false;
+            }
+        });
+        if (state === "base" && !hasLiveInteraction) {
+            return getElementComputedStyle(el).getPropertyValue(property).trim() || fallback;
+        }
+        const rows = getBrowserCssInspection(el.ownerDocument ?? document)
+            .inspect(el, { state }).properties;
+        const row = rows.find((candidate) => candidate.property === property)
+            ?? (property === "background-color" ? rows.find((candidate) => candidate.property === "background") : undefined);
+        if (row?.resolvedValue)
+            return row.resolvedValue;
+        return getElementComputedStyle(el).getPropertyValue(property).trim() || fallback;
+    }
+    catch {
+        return fallback;
+    }
+}

package/dist/inspector/shell/styleState.d.ts

@@ -0,0 +1,7 @@
+export declare const INTERACTION_STATES: readonly ["hover", "active", "focus", "focus-visible", "disabled"];
+export type InteractionState = "base" | (typeof INTERACTION_STATES)[number];
+/** The selected authored interaction state. Kept outside React so edit actions
+ * and history have the same context as the panel that initiated an edit. */
+export declare function getActiveStyleState(): InteractionState;
+export declare function setActiveStyleState(state: InteractionState): void;
+export declare function selectorForInteractionState(selector: string, state: InteractionState): string;

package/dist/inspector/shell/styleState.js

@@ -0,0 +1,13 @@
+export const INTERACTION_STATES = ["hover", "active", "focus", "focus-visible", "disabled"];
+let activeState = "base";
+/** The selected authored interaction state. Kept outside React so edit actions
+ * and history have the same context as the panel that initiated an edit. */
+export function getActiveStyleState() {
+    return activeState;
+}
+export function setActiveStyleState(state) {
+    activeState = state;
+}
+export function selectorForInteractionState(selector, state) {
+    return state === "base" ? selector : `${selector}:${state}`;
+}

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

@@ -0,0 +1,43 @@
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+declare const SIDES: readonly ["top", "right", "bottom", "left"];
+/** Derived from SIDES so the union and the iteration set cannot drift apart. */
+export type ProjectionSide = (typeof SIDES)[number];
+export type ProjectionGroup = "padding" | "margin" | "inset";
+export type ProjectionAxis = "horizontal" | "vertical";
+export type ProjectionState = "shared" | "mixed";
+export interface InspectorFieldProjection {
+    property: string;
+    authoredValue: string;
+    value: string;
+    tokenName: string | null;
+    sourceProperty?: string;
+    row: ResolvedProperty | null;
+}
+export interface InspectorAxisProjection {
+    axis: ProjectionAxis;
+    sides: readonly [ProjectionSide, ProjectionSide];
+    state: ProjectionState;
+    fields: readonly [InspectorFieldProjection, InspectorFieldProjection];
+}
+export interface InspectorSpacingProjection {
+    property: ProjectionGroup;
+    linked: boolean;
+    fields: Record<ProjectionSide, InspectorFieldProjection>;
+    axes: Record<ProjectionAxis, InspectorAxisProjection>;
+}
+export interface InspectorProjection {
+    spacing: Record<ProjectionGroup, InspectorSpacingProjection>;
+}
+/**
+ * Projects resolved physical side facts into the compact spacing UI shape.
+ * Authored value, token identity, computed value, and source property all
+ * participate in shared/mixed detection so visually equal values cannot
+ * accidentally discard authored CSS intent. Source properties remain on each
+ * field as provenance but do not by themselves force expansion.
+ */
+export declare function projectInspectorValues(el: HTMLElement, rows: ResolvedProperty[]): InspectorProjection;
+/** Projects computed group values into the existing spacing editor model. */
+export declare function projectInspectorValuesForSelection(selection: StyleSelection): InspectorProjection;
+export declare function projectionSides(axis: ProjectionAxis): readonly [ProjectionSide, ProjectionSide];
+export {};

package/dist/inspector/spacing/projection.js

@@ -0,0 +1,136 @@
+import { getStateStyleValue } from "../shell/stateValue.js";
+const SIDES = ["top", "right", "bottom", "left"];
+const AXIS_SIDES = {
+    // Preserve CSS physical-side order within each axis. This makes a mixed
+    // horizontal value read as right, left and a mixed vertical value as top,
+    // bottom when the compact editor renders both values.
+    horizontal: ["right", "left"],
+    vertical: ["top", "bottom"],
+};
+function fieldProjection(el, rows, property) {
+    const row = rows.find((candidate) => candidate.property === property) ?? null;
+    // The selected element is the rendering authority. Resolved rows can be
+    // one render behind while the debounced inspector refreshes, so use the
+    // live computed side value for grouping when available and retain the row
+    // for authored/token/source provenance.
+    const liveValue = getStateStyleValue(el, property);
+    const rowValue = row?.computed || row?.resolvedValue;
+    const rowIsCurrent = !liveValue || !row || Boolean(row.sourceProperty) || !rowValue || rowValue === liveValue;
+    const effectiveRow = rowIsCurrent ? row : null;
+    const value = liveValue || row?.resolvedValue || "";
+    return {
+        property,
+        authoredValue: effectiveRow?.authored ?? effectiveRow?.declaredValue ?? value,
+        value,
+        tokenName: effectiveRow?.tokenName ?? null,
+        sourceProperty: effectiveRow?.sourceProperty,
+        row: effectiveRow,
+    };
+}
+function fieldSignature(field) {
+    // Source property is provenance, not visible value identity. Two physical
+    // longhands with the same authored/token value may still use the compact
+    // axis control; the individual source properties remain attached to their
+    // fields for prompt generation and edit metadata.
+    return [field.authoredValue, field.tokenName ?? "", field.value].join("|");
+}
+function axisProjection(axis, fields) {
+    const sides = AXIS_SIDES[axis];
+    const pair = [fields[sides[0]], fields[sides[1]]];
+    return {
+        axis,
+        sides,
+        state: fieldSignature(pair[0]) === fieldSignature(pair[1]) ? "shared" : "mixed",
+        fields: pair,
+    };
+}
+function spacingProjection(el, rows, property) {
+    // SAFETY: SIDES contains exactly the ProjectionSide keys, so the resulting record is complete.
+    const fields = Object.fromEntries(SIDES.map((side) => {
+        const field = fieldProjection(el, rows, property === "inset" ? side : `${property}-${side}`);
+        return [side, field];
+    }));
+    const signatures = SIDES.map((side) => fieldSignature(fields[side]));
+    return {
+        property,
+        linked: new Set(signatures).size === 1,
+        fields,
+        axes: {
+            horizontal: axisProjection("horizontal", fields),
+            vertical: axisProjection("vertical", fields),
+        },
+    };
+}
+/**
+ * Projects resolved physical side facts into the compact spacing UI shape.
+ * Authored value, token identity, computed value, and source property all
+ * participate in shared/mixed detection so visually equal values cannot
+ * accidentally discard authored CSS intent. Source properties remain on each
+ * field as provenance but do not by themselves force expansion.
+ */
+export function projectInspectorValues(el, rows) {
+    return {
+        spacing: {
+            padding: spacingProjection(el, rows, "padding"),
+            margin: spacingProjection(el, rows, "margin"),
+            inset: spacingProjection(el, rows, "inset"),
+        },
+    };
+}
+function selectionField(selection, property) {
+    const selectedProperty = selection.getProperty(property);
+    const mixed = selectedProperty?.value.kind === "mixed";
+    const value = selectedProperty?.value.kind === "common" ? selectedProperty.value.value : "";
+    const row = selectedProperty?.primaryRow ?? null;
+    return {
+        property,
+        authoredValue: mixed ? "Mixed" : value,
+        value: mixed ? "Mixed" : value,
+        tokenName: selectedProperty?.token.kind === "common" ? selectedProperty.token.name : null,
+        sourceProperty: row?.sourceProperty,
+        row,
+    };
+}
+function selectionAxis(axis, fields) {
+    const sides = AXIS_SIDES[axis];
+    const pair = [fields[sides[0]], fields[sides[1]]];
+    return {
+        axis,
+        sides,
+        state: pair[0].value === pair[1].value ? "shared" : "mixed",
+        fields: pair,
+    };
+}
+function selectionSpacing(selection, property) {
+    // SAFETY: SIDES supplies exactly the ProjectionSide keys, so fromEntries yields that exact record shape.
+    const fields = Object.fromEntries(SIDES.map((side) => {
+        const field = selectionField(selection, property === "inset" ? side : `${property}-${side}`);
+        return [side, field];
+    }));
+    const signatures = SIDES.map((side) => fieldSignature(fields[side]));
+    return {
+        property,
+        linked: new Set(signatures).size === 1,
+        fields,
+        axes: {
+            horizontal: selectionAxis("horizontal", fields),
+            vertical: selectionAxis("vertical", fields),
+        },
+    };
+}
+/** Projects computed group values into the existing spacing editor model. */
+export function projectInspectorValuesForSelection(selection) {
+    if (selection.elements.length === 1) {
+        return projectInspectorValues(selection.primary.domElement, [...selection.primaryRows]);
+    }
+    return {
+        spacing: {
+            padding: selectionSpacing(selection, "padding"),
+            margin: selectionSpacing(selection, "margin"),
+            inset: selectionSpacing(selection, "inset"),
+        },
+    };
+}
+export function projectionSides(axis) {
+    return AXIS_SIDES[axis];
+}

package/dist/inspector/styleEditors/AppearanceSection.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 AppearanceSectionProps {
+    element: SelectedElement;
+    selection?: StyleSelection | null;
+    entries?: TokenEntry[];
+    tokenRows?: ResolvedProperty[];
+    onAfterEdit?: () => void;
+}
+export declare function AppearanceSection(props: AppearanceSectionProps): ReactElement;

package/dist/inspector/styleEditors/AppearanceSection.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BorderRadiusEditor } from "./BorderRadiusEditor.js";
+import { OpacityEditor } from "./OpacityEditor.js";
+export function AppearanceSection(props) {
+    return (_jsxs("section", { className: "editor appearance", "data-test": "appearance-section", children: [_jsx("div", { className: "editor__title", children: "Appearance" }), _jsxs("div", { className: "appearance__fields", children: [_jsx(OpacityEditor, { ...props }), _jsx(BorderRadiusEditor, { ...props, embedded: true })] })] }));
+}

package/dist/inspector/styleEditors/AspectRatioField.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 ASPECT_RATIO_PRESETS: string[];
+export interface AspectRatioFieldProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    entries?: TokenEntry[];
+    tokenRow?: ResolvedProperty | null;
+    revision?: number;
+    onAfterEdit?: () => void;
+    className?: string;
+}
+export declare function AspectRatioField({ domElement: el, editTarget, selection, entries, tokenRow, onAfterEdit, className, }: AspectRatioFieldProps): ReactElement;

package/dist/inspector/styleEditors/AspectRatioField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldRow } from "../ui/FieldRow.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { TokenField } from "../tokens/TokenField.js";
+import { meaningfulLayoutValue } from "./layoutValue.js";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+export const ASPECT_RATIO_PRESETS = ["auto", "1 / 1", "4 / 3", "3 / 2", "16 / 9", "21 / 9"];
+export function AspectRatioField({ domElement: el, editTarget, selection, entries = getNudgeUiTokenEntries(), tokenRow, onAfterEdit, className, }) {
+    return (_jsx(FieldRow, { label: "aspect-ratio", "data-test": "layout-size-aspect-ratio", className: className, children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "aspect-ratio", selection: selection, tokenRow: tokenRow, initialValue: meaningfulLayoutValue(el, "aspect-ratio"), domElement: el, editTarget: editTarget, entries: entries, suggestions: ASPECT_RATIO_PRESETS, inputDataTest: "layout-aspect-ratio-input", onAfterEdit: onAfterEdit }) }) }));
+}

package/dist/inspector/styleEditors/BorderEditor.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 BorderEditorProps {
+    element: SelectedElement;
+    selection?: StyleSelection | null;
+    entries?: TokenEntry[];
+    tokenRows?: ResolvedProperty[];
+    onAfterEdit?: () => void;
+}
+export declare function BorderEditor(props: BorderEditorProps): ReactElement;

package/dist/inspector/styleEditors/BorderEditor.js

@@ -0,0 +1,295 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconBorderBottom, IconBorderLeft, IconBorderRight, IconBorderSides, IconBorderStyle2, IconBorderTop, IconCheck, IconMinus, IconPlus, } from "@tabler/icons-react";
+import { findTokenRow } from "./rowLookup.js";
+import { TokenField } from "../tokens/TokenField.js";
+import { setStyle, setStyles } from "../tokens/editActions.js";
+import { FieldRow } from "../ui/FieldRow.js";
+import { SIDE_NAMES } from "../ui/SideValuesField.js";
+import { IconButton } from "../ui/IconButton.js";
+import { ToggleButton } from "../ui/ToggleButton.js";
+import { formatInspectorLabel } from "../ui/labels.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { PopoverListbox } from "../ui/PopoverListbox.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+const BORDER_STYLES = ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
+const INVISIBLE_BORDER_STYLES = new Set(["none", "hidden"]);
+const ZERO_WIDTH = /^(?:0|0px|0rem|0em|0%)$/i;
+const BORDER_SIDES = SIDE_NAMES.map((side) => `border-${side}`);
+function borderStyleValue(el, rows, property) {
+    const row = findTokenRow(rows, property);
+    const structured = row?.structure?.style?.trim();
+    if (structured)
+        return structured.toLowerCase();
+    const authored = (row?.authored ?? row?.declaredValue ?? "").trim().toLowerCase();
+    if (authored && BORDER_STYLES.includes(authored))
+        return authored;
+    return (getStateStyleValue(el, property, "none") || "none").toLowerCase();
+}
+function borderWidthValue(el, rows, property) {
+    const row = findTokenRow(rows, property);
+    if (row?.structure?.width)
+        return row.structure.width.trim();
+    return (row?.authored
+        || row?.declaredValue
+        || row?.resolvedValue
+        || getStateStyleValue(el, property, "0px")
+        || "0px").trim();
+}
+function borderColorValue(el, rows, property) {
+    const row = findTokenRow(rows, property);
+    if (row?.structure?.color)
+        return row.structure.color.trim();
+    return (row?.authored
+        || row?.declaredValue
+        || row?.resolvedValue
+        || getStateStyleValue(el, property, "currentcolor")
+        || "currentcolor").trim();
+}
+/** Effective per-side value used to decide linked vs individual UI. */
+function sideComponentSignature(el, rows, property) {
+    const row = findTokenRow(rows, property);
+    if (property.endsWith("-width")) {
+        return `w:${borderWidthValue(el, rows, property).toLowerCase()}|t:${row?.tokenName ?? ""}`;
+    }
+    if (property.endsWith("-style")) {
+        return `s:${borderStyleValue(el, rows, property)}`;
+    }
+    if (property.endsWith("-color")) {
+        return `c:${borderColorValue(el, rows, property).toLowerCase()}|t:${row?.tokenName ?? ""}`;
+    }
+    return `${row?.authored ?? ""}|${row?.resolvedValue ?? getStateStyleValue(el, property)}`;
+}
+function sideValueForLink(el, rows, property, fallback = "") {
+    if (property.endsWith("-width"))
+        return borderWidthValue(el, rows, property) || fallback;
+    if (property.endsWith("-style"))
+        return borderStyleValue(el, rows, property) || fallback;
+    if (property.endsWith("-color"))
+        return borderColorValue(el, rows, property) || fallback;
+    return fallback;
+}
+function borderLinkDeclaration(el, rows, shorthand, sideProperties) {
+    const sharedValue = sideValueForLink(el, rows, sideProperties[0], shorthand === "border-style" ? "solid" : "");
+    return sharedValue ? { property: shorthand, value: sharedValue } : null;
+}
+function linkedTokenRow(rows, shorthand, sideProperties) {
+    const direct = findTokenRow(rows, shorthand);
+    if (direct)
+        return direct;
+    const first = findTokenRow(rows, sideProperties[0]);
+    return first ? { ...first, property: shorthand } : null;
+}
+/**
+ * Sides are linked when every face shares the same effective component value.
+ * Uses structured width/style/color parts (not the full authored shorthand string)
+ * so four different `border-*` shorthands correctly expand the UI.
+ */
+function valuesAreLinked(el, rows, shorthand, sideProperties) {
+    const hasDirectRow = Boolean(findTokenRow(rows, shorthand));
+    const hasSideRows = sideProperties.some((property) => Boolean(findTokenRow(rows, property)));
+    // A lone shorthand with no per-side overrides is inherently linked.
+    if (hasDirectRow && !hasSideRows)
+        return true;
+    const signatures = sideProperties.map((property) => sideComponentSignature(el, rows, property));
+    return new Set(signatures).size === 1;
+}
+function isBorderFaceProperty(property) {
+    const p = property.toLowerCase();
+    return p === "border"
+        || p === "border-width"
+        || p === "border-style"
+        || p === "border-color"
+        || /^border-(top|right|bottom|left)(?:-(?:width|style|color))?$/.test(p);
+}
+function isZeroWidthValue(value) {
+    const trimmed = value.trim().toLowerCase();
+    if (ZERO_WIDTH.test(trimmed))
+        return true;
+    // Structured/preflight authored forms like `0 solid` / `0px solid currentcolor`.
+    const first = trimmed.split(/\s+/)[0] ?? "";
+    return ZERO_WIDTH.test(first);
+}
+/** True when a face paints: drawn style and non-zero width. */
+function sidePaints(el, rows, side) {
+    const style = borderStyleValue(el, rows, `border-${side}-style`);
+    if (INVISIBLE_BORDER_STYLES.has(style))
+        return false;
+    return !isZeroWidthValue(borderWidthValue(el, rows, `border-${side}-width`));
+}
+/**
+ * Show border controls for intentional / painted borders only.
+ *
+ * Tailwind preflight authors `border: 0 solid` on `*`. That is cascade
+ * evidence but not a visible border — hide controls and show + instead.
+ *
+ * Counts as presence:
+ * - any painted face (drawn style + non-zero width)
+ * - explicit `none` / `hidden`
+ * - authored non-zero width
+ */
+function hasBorderPresence(el, rows) {
+    if (SIDE_NAMES.some((side) => sidePaints(el, rows, side)))
+        return true;
+    for (const row of rows) {
+        if (!isBorderFaceProperty(row.property) && !row.structure)
+            continue;
+        const property = row.property.toLowerCase();
+        const authored = (row.authored ?? row.declaredValue ?? "").trim().toLowerCase();
+        const structuredStyle = row.structure?.style?.trim().toLowerCase() ?? "";
+        const structuredWidth = row.structure?.width?.trim() ?? "";
+        if (INVISIBLE_BORDER_STYLES.has(structuredStyle) || INVISIBLE_BORDER_STYLES.has(authored)) {
+            return true;
+        }
+        if (structuredWidth && !isZeroWidthValue(structuredWidth))
+            return true;
+        if ((property === "border-width" || property.endsWith("-width")) && authored && !isZeroWidthValue(authored)) {
+            return true;
+        }
+    }
+    // Computed non-zero width without cascade rows (inline / inaccessible sheets).
+    if (!isZeroWidthValue(borderWidthValue(el, rows, "border-width")))
+        return true;
+    if (SIDE_NAMES.some((side) => !isZeroWidthValue(borderWidthValue(el, rows, `border-${side}-width`)))) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Linked presentation from cascade data + optional user toggle.
+ * Divergent faces always open; equal faces start linked but can expand.
+ * Linking divergent faces is optimistic until cascade rows catch up.
+ */
+function useBorderLinkedState(dataLinked, resetKey) {
+    const [userUnlinked, setUserUnlinked] = useState(false);
+    const [userLinked, setUserLinked] = useState(false);
+    useEffect(() => {
+        setUserUnlinked(false);
+        setUserLinked(false);
+    }, [resetKey]);
+    useEffect(() => {
+        if (dataLinked)
+            setUserLinked(false);
+        else
+            setUserUnlinked(false);
+    }, [dataLinked]);
+    const isLinked = dataLinked ? !userUnlinked : userLinked;
+    function setLinked(next) {
+        if (next) {
+            setUserUnlinked(false);
+            setUserLinked(true);
+        }
+        else {
+            setUserLinked(false);
+            setUserUnlinked(true);
+        }
+    }
+    return [isLinked, setLinked];
+}
+export function BorderEditor(props) {
+    const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
+    const el = element.domElement;
+    const editTarget = selection?.target ?? el;
+    const isGroup = Boolean(selection && selection.elements.length > 1);
+    const allEntries = entries ?? getNudgeUiTokenEntries();
+    const borderWidthProperties = BORDER_SIDES.map((side) => `${side}-width`);
+    const borderStyleProperties = BORDER_SIDES.map((side) => `${side}-style`);
+    const borderColorProperties = BORDER_SIDES.map((side) => `${side}-color`);
+    const borderWidthDataLinked = valuesAreLinked(el, tokenRows, "border-width", borderWidthProperties);
+    const borderStyleDataLinked = valuesAreLinked(el, tokenRows, "border-style", borderStyleProperties);
+    const borderColorDataLinked = valuesAreLinked(el, tokenRows, "border-color", borderColorProperties);
+    const allDataLinked = !isGroup && borderWidthDataLinked && borderStyleDataLinked && borderColorDataLinked;
+    const [borderLinked, setBorderLinked] = useBorderLinkedState(allDataLinked, el);
+    const borderRow = findTokenRow(tokenRows, "border");
+    const hasStructuredBorderRows = tokenRows.some((row) => Boolean(row.structure));
+    const rawBorderFallback = !isGroup && Boolean(borderRow && !borderRow.structure && !hasStructuredBorderRows);
+    const linkedBorderStyle = borderStyleValue(el, tokenRows, "border-style");
+    const showWidthAndColor = !(borderLinked && INVISIBLE_BORDER_STYLES.has(linkedBorderStyle));
+    const hasBorder = isGroup
+        ? selection?.domElements.some((candidate) => hasBorderPresence(candidate, [])) ?? false
+        : hasBorderPresence(el, tokenRows);
+    const [borderSessionOpen, setBorderSessionOpen] = useState(false);
+    useEffect(() => {
+        setBorderSessionOpen(false);
+    }, [el]);
+    useEffect(() => {
+        if (hasBorder || rawBorderFallback)
+            setBorderSessionOpen(true);
+    }, [hasBorder, rawBorderFallback]);
+    const showBorderControls = hasBorder || borderSessionOpen || rawBorderFallback;
+    function handleAddBorder() {
+        setStyle(editTarget, "border", "1px solid");
+        setBorderSessionOpen(true);
+        onAfterEdit?.();
+    }
+    function handleRemoveBorder() {
+        setStyle(editTarget, "border", "0 solid");
+        setBorderSessionOpen(false);
+        onAfterEdit?.();
+    }
+    function handleExpand() {
+        setBorderLinked(false);
+    }
+    function handleCollapse() {
+        setBorderLinked(true);
+        const declarations = [
+            borderLinkDeclaration(el, tokenRows, "border-style", borderStyleProperties),
+            borderLinkDeclaration(el, tokenRows, "border-width", borderWidthProperties),
+            borderLinkDeclaration(el, tokenRows, "border-color", borderColorProperties),
+        ].filter((declaration) => declaration !== null);
+        if (declarations.length > 0) {
+            setStyles(editTarget, declarations);
+            onAfterEdit?.();
+        }
+    }
+    const sideRows = SIDE_NAMES.map((side, index) => ({
+        side,
+        color: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderColorProperties[index], selection: selection, tokenRow: findTokenRow(tokenRows, borderColorProperties[index]), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) })),
+        width: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderWidthProperties[index], selection: selection, tokenRow: findTokenRow(tokenRows, borderWidthProperties[index]), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) })),
+        style: (_jsx(BorderStyleSettingsMenu, { property: borderStyleProperties[index], tokenRow: findTokenRow(tokenRows, borderStyleProperties[index]), domElement: el, editTarget: editTarget, selection: selection, dataTest: `border-style-${side}`, onAfterEdit: onAfterEdit })),
+    }));
+    return (_jsxs("div", { className: `editor`, "data-test": "border-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Border" }), showBorderControls ? (_jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: rawBorderFallback ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: borderRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) })) : borderLinked ? (_jsxs("div", { className: "border__linked-row", children: [showWidthAndColor ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border__linked-control border__linked-control--color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-color", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-color", borderColorProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }), _jsx("div", { className: "border__linked-control border__linked-control--width", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-width", selection: selection, tokenRow: linkedTokenRow(tokenRows, "border-width", borderWidthProperties), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: linkedTokenRow(tokenRows, "border-style", borderStyleProperties), domElement: el, editTarget: editTarget, selection: selection, onAfterEdit: onAfterEdit }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "Edit Individual Border Sides", title: "Edit Individual Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
+                                if (pressed)
+                                    handleExpand();
+                            }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })) : (_jsxs("div", { className: "border__expanded", children: [_jsxs("div", { className: "border__expanded-header", children: [_jsx("span", { className: "side-values__label", children: formatInspectorLabel("Individual Sides") }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-collapse", label: "Link All Border Sides", title: "Link All Border Sides", pressed: !borderLinked, onPressedChange: (pressed) => {
+                                        if (!pressed)
+                                            handleCollapse();
+                                    }, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] }), showWidthAndColor ? (_jsx("div", { className: "border__side-rows", "data-test": "border-side-rows", children: sideRows.map(({ side, color, width, style }) => (_jsxs("div", { className: "border__side-row", "data-side": side, "aria-label": `Border ${formatInspectorLabel(side)}`, children: [_jsx(BorderSideIndicator, { side: side }), _jsx("div", { className: "border__side-control border__side-control--color", children: color }), _jsx("div", { className: "border__side-control border__side-control--width", children: width }), style] }, side))) })) : null] })) }))] }));
+}
+const BORDER_SIDE_ICONS = {
+    top: IconBorderTop,
+    right: IconBorderRight,
+    bottom: IconBorderBottom,
+    left: IconBorderLeft,
+};
+function BorderSideIndicator({ side }) {
+    const Icon = BORDER_SIDE_ICONS[side];
+    return _jsx(Icon, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" });
+}
+function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarget, selection, dataTest = "border-style-settings", onAfterEdit }) {
+    const structured = tokenRow?.structure?.style?.trim().toLowerCase() ?? "";
+    const selectedValue = selection?.getProperty(property)?.value;
+    const mixed = selectedValue?.kind === "mixed";
+    const commonValue = selectedValue?.kind === "common" ? selectedValue.value : "";
+    const initial = mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none";
+    const [value, setValue] = useState(initial);
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        setValue(mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none");
+    }, [commonValue, el, mixed, property, structured]);
+    function handleChange(next) {
+        if (!BORDER_STYLES.includes(next))
+            return;
+        setValue(next);
+        setStyle(editTarget ?? el, property, next);
+        setOpen(false);
+        onAfterEdit?.();
+    }
+    return (_jsx(PopoverListbox, { query: "", value: null, open: open, triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: `Border style: ${formatInspectorLabel(value)}`, "data-test": dataTest, "data-current-style": value, children: _jsx(IconBorderStyle2, { size: 16, "aria-hidden": "true" }) })), triggerDataTest: dataTest, triggerAriaLabel: "Border style settings", items: BORDER_STYLES.map((style) => ({
+            value: style,
+            label: formatInspectorLabel(style),
+            leading: style === value ? _jsx(IconCheck, { size: 14, stroke: 2, "aria-hidden": "true" }) : undefined,
+            "data-test": `border-style-setting-${style}`,
+        })), onQueryChange: () => undefined, onOpenChange: setOpen, onSelect: handleChange }));
+}

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

@@ -0,0 +1,14 @@
+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 BorderRadiusEditorProps {
+    element: SelectedElement;
+    selection?: StyleSelection | null;
+    entries?: TokenEntry[];
+    tokenRows?: ResolvedProperty[];
+    onAfterEdit?: () => void;
+    embedded?: boolean;
+}
+export declare function BorderRadiusEditor(props: BorderRadiusEditorProps): ReactElement;