nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/sketch/raster.js

@@ -1,11 +1,12 @@
-import { SKETCH_ANNOTATION_RADIUS, SKETCH_LIMITS, SKETCH_STROKE_COLOR, } from "./model.js";
+import { SKETCH_ANNOTATION_RADIUS, SKETCH_LIMITS, SKETCH_ACCENT_COLOR, SKETCH_RECTANGLE_FILL_OPACITY, SKETCH_STROKE_COLOR, } from "./model.js";
 import { sketchStrokeOutline } from "./freehand.js";
 const PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
 const SKETCH_NOTE_PADDING = 24;
-const SKETCH_NOTE_TITLE_HEIGHT = 34;
+const SKETCH_NOTE_TITLE_LINE_HEIGHT = 34;
 const SKETCH_NOTE_LINE_HEIGHT = 32;
 const SKETCH_NOTE_FONT = "24px system-ui, sans-serif";
 const SKETCH_NOTE_TITLE_FONT = "600 24px system-ui, sans-serif";
+const SKETCH_NOTE_FALLBACK_HEADING = "Sketch notes";
 export function readPngDimensions(bytes) {
     if (bytes.length < 24)
         return null;
@@ -63,9 +64,15 @@ export function drawSketchStroke(ctx, stroke, scaleX = 1, scaleY = scaleX) {
     if (stroke.kind === "rectangle") {
         ctx.lineCap = "round";
         ctx.lineJoin = "round";
-        ctx.strokeStyle = stroke.color || SKETCH_STROKE_COLOR;
+        const color = stroke.color || SKETCH_STROKE_COLOR;
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
         ctx.lineWidth = stroke.width * Math.max(scaleX, scaleY);
         drawPointPath(ctx, stroke.points, scaleX, scaleY);
+        ctx.save();
+        ctx.globalAlpha = SKETCH_RECTANGLE_FILL_OPACITY;
+        ctx.fill();
+        ctx.restore();
         ctx.stroke();
     }
     else {
@@ -93,7 +100,7 @@ export function drawSketchAnnotation(ctx, annotation, scaleX = 1, scaleY = scale
     const y = annotation.point.y * scaleY;
     const radius = SKETCH_ANNOTATION_RADIUS * scale;
     ctx.save();
-    ctx.fillStyle = SKETCH_STROKE_COLOR;
+    ctx.fillStyle = SKETCH_ACCENT_COLOR;
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, Math.PI * 2);
     ctx.fill();
@@ -159,6 +166,14 @@ function wrapText(ctx, text, maxWidth) {
         lines.push(line);
     return lines;
 }
+/** Wraps the frame heading that names the sketch target to the panel width. */
+function wrapSketchHeading(ctx, width, heading) {
+    const text = heading.trim();
+    if (!text)
+        return [];
+    ctx.font = SKETCH_NOTE_TITLE_FONT;
+    return wrapText(ctx, text, Math.max(1, width - SKETCH_NOTE_PADDING * 2));
+}
 /** Wraps the description and numbered annotation notes to the panel width. */
 function wrapSketchNotes(ctx, width, description, annotations) {
     const notes = [
@@ -172,29 +187,34 @@ function wrapSketchNotes(ctx, width, description, annotations) {
     const textWidth = Math.max(1, width - SKETCH_NOTE_PADDING * 2);
     return notes.flatMap((note) => wrapText(ctx, note, textWidth));
 }
-function sketchNotePanelHeight(lineCount) {
-    if (lineCount === 0)
+function sketchNotePanelHeight(headingLineCount, noteLineCount) {
+    if (headingLineCount + noteLineCount === 0)
         return 0;
-    return SKETCH_NOTE_PADDING * 2 + SKETCH_NOTE_TITLE_HEIGHT + lineCount * SKETCH_NOTE_LINE_HEIGHT;
+    return SKETCH_NOTE_PADDING * 2
+        + headingLineCount * SKETCH_NOTE_TITLE_LINE_HEIGHT
+        + noteLineCount * SKETCH_NOTE_LINE_HEIGHT;
 }
-function drawSketchNotes(ctx, width, top, lines) {
+function drawSketchNotes(ctx, width, top, headingLines, noteLines) {
     ctx.save();
-    ctx.fillStyle = SKETCH_STROKE_COLOR;
-    ctx.fillRect(0, top, width, sketchNotePanelHeight(lines.length));
+    ctx.fillStyle = SKETCH_ACCENT_COLOR;
+    ctx.fillRect(0, top, width, sketchNotePanelHeight(headingLines.length, noteLines.length));
     ctx.fillStyle = "#ffffff";
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
     ctx.font = SKETCH_NOTE_TITLE_FONT;
-    ctx.fillText("Sketch notes", SKETCH_NOTE_PADDING, top + SKETCH_NOTE_PADDING);
+    let y = top + SKETCH_NOTE_PADDING;
+    for (const line of headingLines) {
+        ctx.fillText(line, SKETCH_NOTE_PADDING, y);
+        y += SKETCH_NOTE_TITLE_LINE_HEIGHT;
+    }
     ctx.font = SKETCH_NOTE_FONT;
-    let y = top + SKETCH_NOTE_PADDING + SKETCH_NOTE_TITLE_HEIGHT;
-    for (const line of lines) {
+    for (const line of noteLines) {
         ctx.fillText(line, SKETCH_NOTE_PADDING, y);
         y += SKETCH_NOTE_LINE_HEIGHT;
     }
     ctx.restore();
 }
-export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = [], description = "") {
+export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = [], description = "", heading = SKETCH_NOTE_FALLBACK_HEADING) {
     await validatePngBlob(originalImage, { width: imageWidth, height: imageHeight });
     if (typeof document === "undefined")
         throw new Error("Sketch rendering requires a browser document.");
@@ -205,8 +225,9 @@ export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight,
         const context = canvas.getContext("2d");
         if (!context)
             throw new Error("The browser could not create a sketch canvas.");
+        const headingLines = wrapSketchHeading(context, imageWidth, heading);
         const noteLines = wrapSketchNotes(context, imageWidth, description, annotations);
-        const outputHeight = imageHeight + sketchNotePanelHeight(noteLines.length);
+        const outputHeight = imageHeight + sketchNotePanelHeight(headingLines.length, noteLines.length);
         if (outputHeight > SKETCH_LIMITS.imageEdge) {
             throw new Error("Sketch notes are too long to fit below the captured image.");
         }
@@ -215,8 +236,9 @@ export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight,
         context.drawImage(image.source, 0, 0, imageWidth, imageHeight);
         drawSketchStrokes(context, strokes);
         drawSketchAnnotations(context, annotations);
-        if (noteLines.length > 0)
-            drawSketchNotes(context, imageWidth, imageHeight, noteLines);
+        if (headingLines.length > 0 || noteLines.length > 0) {
+            drawSketchNotes(context, imageWidth, imageHeight, headingLines, noteLines);
+        }
         const result = await canvasPng(canvas);
         if (result.size > SKETCH_LIMITS.imageBytes) {
             throw new Error("This sketch is too detailed to save within the 2 MiB image limit.");
@@ -238,6 +260,10 @@ export async function blobToBase64(blob) {
         throw new Error("This browser cannot prepare sketch attachments.");
     return btoa(binary);
 }
+/**
+ * Accepts a pending blob so callers can start the write inside the user gesture
+ * (required by Safari) and resolve the image once rendering finishes.
+ */
 export async function copyImageToClipboard(blob) {
     if (typeof navigator === "undefined" || !navigator.clipboard?.write || typeof ClipboardItem === "undefined") {
         throw new Error("Image clipboard access is unavailable. Use Download image instead.");

package/dist/inspector/sketch/store.d.ts

@@ -35,7 +35,7 @@ export declare function markSketchesHandingOff(entries: readonly {
     readonly id: string;
     readonly revision: number;
 }[], batchRevision: number, localBatchId: string, agentRequestId?: string): Promise<boolean>;
-export declare function settleSketchDispatch(batchRevision: number | undefined, state: "working" | "completed" | "failed" | "interrupted", agentRequestId?: string, localBatchId?: string): Promise<boolean>;
+export declare function settleSketchDispatch(batchRevision: number | undefined, state: "delivered" | "working" | "completed" | "failed" | "interrupted", agentRequestId?: string, localBatchId?: string): Promise<boolean>;
 export declare function markSketchesHandedOff(entries: readonly {
     readonly id: string;
     readonly revision: number;

package/dist/inspector/sketch/store.js

@@ -325,7 +325,7 @@ export function settleSketchDispatch(batchRevision, state, agentRequestId, local
             }
             return true;
         }
-        const nextHandoffs = changes.map((handoff) => updateHandoff(handoff, state === "working" ? {
+        const nextHandoffs = changes.map((handoff) => updateHandoff(handoff, (state === "delivered" || state === "working") ? {
             state: "handing-off",
             transport: "direct",
             ...(agentRequestId ? { agentRequestId } : {}),

package/dist/inspector/sketch/videoFrames.d.ts

@@ -0,0 +1,6 @@
+/** Supplies still images to the DOM renderer while live videos stay mounted. */
+export declare function prepareSketchVideoFrames(targetDocument: Document): {
+    readonly filter: (node: Node) => boolean;
+    readonly prepareClone: (node: Node) => void;
+    readonly restore: () => void;
+};

package/dist/inspector/sketch/videoFrames.js

@@ -0,0 +1,81 @@
+import { SKETCH_LIMITS } from "./model.js";
+const FRAME_ATTRIBUTE = "data-nudge-ui-video-frame";
+const EMPTY_FRAME = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+function* videoElements(root) {
+    yield* root.querySelectorAll("video");
+    for (const element of root.querySelectorAll("*")) {
+        if (element.shadowRoot)
+            yield* videoElements(element.shadowRoot);
+    }
+}
+function videoFrame(video) {
+    const image = video.ownerDocument.createElement("img");
+    image.src = video.poster || EMPTY_FRAME;
+    image.width = video.videoWidth || video.clientWidth || 300;
+    image.height = video.videoHeight || video.clientHeight || 150;
+    const style = video.ownerDocument.defaultView?.getComputedStyle(video);
+    if (style) {
+        for (const property of style) {
+            image.style.setProperty(property, style.getPropertyValue(property), style.getPropertyPriority(property));
+        }
+    }
+    // Preserve the replaced element's layout even when its CSS size is auto.
+    image.style.width = style?.width && style.width !== "auto" ? style.width : `${video.clientWidth}px`;
+    image.style.height = style?.height && style.height !== "auto" ? style.height : `${video.clientHeight}px`;
+    if (video.readyState >= 2 && video.videoWidth > 0 && video.videoHeight > 0) {
+        const canvas = video.ownerDocument.createElement("canvas");
+        const scale = Math.min(1, SKETCH_LIMITS.imageEdge / Math.max(video.videoWidth, video.videoHeight));
+        canvas.width = Math.max(1, Math.round(video.videoWidth * scale));
+        canvas.height = Math.max(1, Math.round(video.videoHeight * scale));
+        try {
+            const context = canvas.getContext("2d");
+            if (context) {
+                context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                image.src = canvas.toDataURL("image/png");
+            }
+        }
+        catch {
+            // Cross-origin frames can taint a canvas. Keep the poster or empty frame.
+        }
+    }
+    return image;
+}
+/** Supplies still images to the DOM renderer while live videos stay mounted. */
+export function prepareSketchVideoFrames(targetDocument) {
+    const frames = new Map();
+    const placeholders = [];
+    for (const video of videoElements(targetDocument)) {
+        const id = String(frames.size);
+        frames.set(id, videoFrame(video));
+        const placeholder = targetDocument.createElement("img");
+        placeholder.hidden = true;
+        placeholder.src = EMPTY_FRAME;
+        placeholder.setAttribute(FRAME_ATTRIBUTE, id);
+        // The hidden sibling preserves capture order without detaching or seeking
+        // the application's video. Only its clone receives the video's styles.
+        video.before(placeholder);
+        placeholders.push(placeholder);
+    }
+    return {
+        filter: (node) => node.nodeType !== 1 || node.localName !== "video",
+        prepareClone: (node) => {
+            if (node.nodeType !== 1)
+                return;
+            const element = node;
+            const id = element.getAttribute(FRAME_ATTRIBUTE);
+            const frame = id === null ? undefined : frames.get(id);
+            if (!frame)
+                return;
+            element.removeAttribute(FRAME_ATTRIBUTE);
+            element.removeAttribute("hidden");
+            element.style.cssText = frame.style.cssText;
+            element.setAttribute("src", frame.src);
+            element.setAttribute("width", String(frame.width));
+            element.setAttribute("height", String(frame.height));
+        },
+        restore: () => {
+            for (const placeholder of placeholders)
+                placeholder.remove();
+        },
+    };
+}

package/dist/inspector/styleEditors/BackgroundEditor.js

@@ -6,7 +6,8 @@ import { interpretTokenValue } from "../../css/value-semantics/tokenInterpretati
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { colorValueToHex, TokenValueField } from "../tokens/TokenField.js";
 import { setStyles } from "../tokens/editActions.js";
-import { createChangeHistoryGroup, getActiveDraftChanges } from "../changes/draftChanges.js";
+import { getActiveDraftChanges } from "../drafts/store.js";
+import { createChangeHistoryGroup } from "../workspace/timeline.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { IconButton } from "../ui/IconButton.js";
@@ -26,7 +27,7 @@ export function BackgroundEditor(props) {
     const elements = selection?.domElements ?? [el];
     const source = readBackgroundLayers((property, fallback) => getStateStyleValue(el, property, fallback));
     const base = source.at(-1);
-    const authoredColor = props.tokenRow?.property === "background-color"
+    const authoredColor = props.tokenRow?.property === "background-color" || props.tokenRow?.property === "background"
         ? props.tokenRow.authored ?? props.tokenRow.declaredValue : undefined;
     if (base?.baseColor && authoredColor) {
         const table = Object.fromEntries((props.entries ?? getNudgeUiTokenEntries()).map((entry) => [entry.name, entry]));

package/dist/inspector/styleEditors/BorderEditor.js

@@ -3,9 +3,8 @@ import { useEffect, useState } from "react";
 import { IconBorderSides, IconBorderStyle2, 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 { 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";
@@ -13,101 +12,22 @@ import { getStateStyleValue } from "../shell/stateValue.js";
 import { PopoverListbox } from "../ui/PopoverListbox.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
-import { isZeroCssValue } from "./stylePresence.js";
 import { useFieldVisibility } from "./useFieldVisibility.js";
 import { Tooltip } from "../ui/Tooltip.js";
 import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
 import { inlineBlockedBy } from "./inlineAuthored.js";
-const BORDER_STYLES = ["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
-const INVISIBLE_BORDER_STYLES = new Set(["none", "hidden"]);
-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();
+import { BORDER_SIDES, BORDER_STYLES, borderDeclarations, borderProperty, hasVisibleBorder, readBorderEditor, } from "./borderModel.js";
+function stateStyleReader(el) {
+    return (property, fallback) => getStateStyleValue(el, property, fallback);
 }
-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;
-}
-/** Initial visibility follows the effective border, including stylesheet resets. */
-function hasBorderPresence(el) {
-    return SIDE_NAMES.some((side) => {
-        const style = getStateStyleValue(el, `border-${side}-style`, "none").toLowerCase();
-        if (INVISIBLE_BORDER_STYLES.has(style))
-            return false;
-        const width = getStateStyleValue(el, `border-${side}-width`, "0px");
-        return !isZeroCssValue(width);
-    });
+/** Reports whether the intent produced any declarations to write. */
+function commitBorderIntent(target, source, intent, onAfterEdit) {
+    const declarations = borderDeclarations(source, intent);
+    if (declarations.length === 0)
+        return false;
+    setStyles(target, declarations);
+    onAfterEdit?.();
+    return true;
 }
 /**
  * Linked presentation from cascade data + optional user toggle.
@@ -147,36 +67,25 @@ export function BorderEditor(props) {
     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 borderBlockedBy = inlineBlockedBy(selectedElements, "border", "border-width", "border-style", "border-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 = selectedElements.some(hasBorderPresence);
+    const source = { rows: tokenRows, computed: stateStyleReader(el) };
+    const border = readBorderEditor(source, { group: isGroup });
+    const [borderLinked, setBorderLinked] = useBorderLinkedState(border.sidesLinked, el);
+    const showWidthAndColor = !borderLinked || border.linkedStyleDraws;
+    const hasBorder = selectedElements.some((element) => hasVisibleBorder(stateStyleReader(element)));
     const visibility = useFieldVisibility(selectedElements, "border", hasBorder);
     const showBorderControls = visibility.visible;
     function handleAddBorder() {
         if (borderBlockedBy)
             return;
-        setStyle(editTarget, "border", "1px solid");
+        commitBorderIntent(editTarget, source, { kind: "add" }, onAfterEdit);
         visibility.show();
-        onAfterEdit?.();
     }
     function handleRemoveBorder() {
         if (borderBlockedBy)
             return;
-        setStyle(editTarget, "border", "0 solid");
+        commitBorderIntent(editTarget, source, { kind: "remove" }, onAfterEdit);
         visibility.hide();
-        onAfterEdit?.();
     }
     function handleExpand() {
         setBorderLinked(false);
@@ -185,23 +94,18 @@ export function BorderEditor(props) {
         if (borderBlockedBy)
             return;
         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?.();
-        }
+        commitBorderIntent(editTarget, source, { kind: "link-sides" }, onAfterEdit);
+    }
+    function handleSelectStyle(property, style) {
+        return commitBorderIntent(editTarget, source, { kind: "set-style", property, style }, onAfterEdit);
     }
-    const sideRows = SIDE_NAMES.map((side, index) => ({
+    const sideRows = BORDER_SIDES.map((side) => ({
         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 })),
+        color: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderProperty("color", side), selection: selection, tokenRow: findTokenRow(tokenRows, borderProperty("color", side)), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) })),
+        width: (_jsx(ControlSurface, { children: _jsx(TokenField, { property: borderProperty("width", side), selection: selection, tokenRow: findTokenRow(tokenRows, borderProperty("width", side)), domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) })),
+        style: (_jsx(BorderStyleSettingsMenu, { property: borderProperty("style", side), tokenRow: findTokenRow(tokenRows, borderProperty("style", side)), domElement: el, selection: selection, dataTest: `border-style-${side}`, onSelectStyle: handleSelectStyle })),
     }));
-    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(Tooltip, { content: inlineStyleWarningContent(borderBlockedBy), children: _jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", disabled: borderBlockedBy !== null, onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", disabled: borderBlockedBy !== null, 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", pressed: !borderLinked, onPressedChange: (pressed) => {
+    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(Tooltip, { content: inlineStyleWarningContent(borderBlockedBy), children: _jsx(IconButton, { variant: "quiet", label: "Remove Border", "data-test": "remove-border", className: "border__remove", disabled: borderBlockedBy !== null, onClick: handleRemoveBorder, children: _jsx(IconMinus, { size: 16, "aria-hidden": "true" }) }) })) : (_jsx(IconButton, { variant: "quiet", label: "Add Border", "data-test": "add-border", className: "border__add", disabled: borderBlockedBy !== null, onClick: handleAddBorder, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] }), showBorderControls && (_jsx("div", { className: "border", "data-expanded": borderLinked ? "false" : "true", children: border.rawShorthandRow ? (_jsx(FieldRow, { label: "Border", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "border", selection: selection, tokenRow: border.rawShorthandRow, 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: border.linkedRows.color, 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: border.linkedRows.width, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit, chipVariant: "small" }) }) })] })) : null, _jsx(BorderStyleSettingsMenu, { property: "border-style", tokenRow: border.linkedRows.style, domElement: el, selection: selection, onSelectStyle: handleSelectStyle }), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "border-expand", label: "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", pressed: !borderLinked, disabled: borderBlockedBy !== null, onPressedChange: (pressed) => {
@@ -231,7 +135,7 @@ function BorderSideIndicator({ side }) {
     const { outline, emphasis } = BORDER_SIDE_ICON_PATHS[side];
     return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: outline, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "square", strokeOpacity: "0.2" }), _jsx("line", { ...emphasis, stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
 }
-function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarget, selection, dataTest = "border-style-settings", onAfterEdit }) {
+function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, selection, dataTest = "border-style-settings", onSelectStyle }) {
     const structured = tokenRow?.structure?.style?.trim().toLowerCase() ?? "";
     const selectedValue = selection?.getProperty(property)?.value;
     const mixed = selectedValue?.kind === "mixed";
@@ -244,14 +148,10 @@ function BorderStyleSettingsMenu({ property, tokenRow, domElement: el, editTarge
         setValue(mixed ? "Mixed" : commonValue || structured || getStateStyleValue(el, property, "none") || "none");
     }, [commonValue, el, mixed, property, structured]);
     function handleChange(next) {
-        if (blockedBy)
-            return;
-        if (!BORDER_STYLES.includes(next))
+        if (blockedBy || !onSelectStyle(property, 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", triggerTooltip: inlineStyleWarningContent(blockedBy), disabled: blockedBy !== null, items: BORDER_STYLES.map((style) => ({
             value: style,

package/dist/inspector/styleEditors/BorderRadiusEditor.js

@@ -28,7 +28,13 @@ function cornerAuthoredSignature(rows, corner) {
     const row = findTokenRow(rows, corner);
     return `${row?.authored ?? row?.declaredValue ?? ""}|${row?.tokenName ?? ""}`;
 }
-function cornersAreLinked(rows) {
+function cornersAreLinked(rows, selection) {
+    if (selection && selection.elements.length > 1) {
+        const values = BORDER_RADIUS_CORNERS.map((corner) => selection.getProperty(corner)?.value);
+        const first = values[0];
+        return first?.kind === "common"
+            && values.every((value) => value?.kind === "common" && value.value === first.value);
+    }
     const signatures = BORDER_RADIUS_CORNERS.map((corner) => cornerAuthoredSignature(rows, corner));
     return new Set(signatures).size === 1;
 }
@@ -50,9 +56,8 @@ export function BorderRadiusEditor(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit, embedded = false } = props;
     const el = element.domElement;
     const editTarget = selection?.target ?? el;
-    const isGroup = Boolean(selection && selection.elements.length > 1);
     const allEntries = entries ?? getNudgeUiTokenEntries();
-    const dataLinked = !isGroup && cornersAreLinked(tokenRows);
+    const dataLinked = cornersAreLinked(tokenRows, selection);
     const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], "border-radius");
     const [userUnlinked, setUserUnlinked] = useState(false);
     const [userLinked, setUserLinked] = useState(false);

package/dist/inspector/styleEditors/ImageBackgroundEditor.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { IconPhoto, IconUpload } from "@tabler/icons-react";
 import { TokenValueField } from "../tokens/TokenField.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
-import { getActiveDraftChanges } from "../changes/draftChanges.js";
+import { getActiveDraftChanges } from "../drafts/store.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { Button } from "../ui/Button.js";
 import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";

package/dist/inspector/styleEditors/LayoutSection.js

@@ -109,7 +109,7 @@ export function LayoutSection(props) {
     const showPositionInsets = selection
         ? selection.supportsRole("inset-position")
         : position === "absolute" || position === "fixed";
-    return (_jsxs("div", { className: "editor", "data-test": "layout-section", children: [_jsx("div", { className: "editor__title", children: "Layout" }), _jsxs("div", { className: "layout", children: [_jsxs("div", { className: "layout__basic", children: [_jsx(SizeSection, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsxs("div", { className: "layout__tool-row", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] }), isFlexContainer ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-container", children: [_jsxs("div", { className: "layout__flex-heading", children: [_jsx("div", { className: "editor__title", children: "Flex" }), _jsx(FlexSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), _jsxs("div", { className: "layout__flex-lower", children: [mixedFlexDirection ? (_jsx("div", { className: "layout__alignment-grid", "data-test": "layout-flex-axis-mixed", children: "Choose a shared flex direction to edit physical alignment." })) : (_jsx(FlexAlignmentGrid, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })), _jsxs("div", { className: "layout__gap-column", "data-test": "layout-gap", children: [_jsxs("div", { className: "layout__direction-tools", children: [_jsx(FlexDirectionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexWrapToggle, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), _jsxs("div", { className: "layout__gap-fields", children: [_jsxs("div", { className: "layout__spacing-primary", children: [_jsx(FlexGapField, { property: relevantGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit }), _jsx(FlexDistributionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), isFlexWrapped ? (_jsx(FlexGapField, { property: lineGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit })) : null] })] })] })] })) : null, isFlexChild ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-child", children: [_jsx("div", { className: "editor__title", children: "Flex Child" }), _jsxs("div", { className: "layout__flex-child-fields", children: [_jsx(FlexChildValueField, { label: "Grow", property: "flex-grow", presets: FLEX_GROW_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Shrink", property: "flex-shrink", presets: FLEX_SHRINK_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Basis", property: "flex-basis", presets: FLEX_BASIS_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] })) : null, isGridContainer || isGridChild ? (_jsx(GridSection, { domElement: el, showContainer: isGridContainer, showChild: isGridChild, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null, showPositionInsets ? (_jsx(PositionInsets, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null] })] }));
+    return (_jsxs("div", { className: "editor", "data-test": "layout-section", children: [_jsx("div", { className: "editor__title", children: "Layout" }), _jsxs("div", { className: "layout", children: [_jsxs("div", { className: "layout__basic", children: [_jsx(SizeSection, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsxs("div", { className: "layout__tool-row", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] }), isFlexContainer ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-container", children: [_jsxs("div", { className: "layout__flex-heading", children: [_jsx("div", { className: "editor__title", children: "Flex" }), _jsx(FlexSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), _jsxs("div", { className: "layout__flex-lower", children: [mixedFlexDirection ? (_jsx("div", { className: "layout__alignment-grid", "data-test": "layout-flex-axis-mixed", children: "Choose a shared flex direction to edit physical alignment." })) : (_jsx(FlexAlignmentGrid, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })), _jsxs("div", { className: "layout__gap-column", "data-test": "layout-gap", children: [_jsxs("div", { className: "layout__direction-tools", children: [_jsx(FlexDirectionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexWrapToggle, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), _jsxs("div", { className: "layout__gap-fields", children: [_jsxs("div", { className: "layout__spacing-primary", children: [_jsx(FlexGapField, { property: relevantGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit }), _jsx(FlexDistributionControl, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] }), isFlexWrapped ? (_jsx("div", { className: "layout__spacing-primary", children: _jsx(FlexGapField, { property: lineGap, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: notifyAfterEdit }) })) : null] })] })] })] })) : null, isFlexChild ? (_jsxs("div", { className: "layout__group", "data-test": "layout-flex-child", children: [_jsx("div", { className: "editor__title", children: "Flex Child" }), _jsxs("div", { className: "layout__flex-child-fields", children: [_jsx(FlexChildValueField, { label: "Grow", property: "flex-grow", presets: FLEX_GROW_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Shrink", property: "flex-shrink", presets: FLEX_SHRINK_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildValueField, { label: "Basis", property: "flex-basis", presets: FLEX_BASIS_PRESETS, domElement: el, editTarget: editTarget, selection: selection, inputOnly: true, revision: computedRevision, onAfterEdit: notifyAfterEdit }), _jsx(FlexChildSettingsMenu, { domElement: el, editTarget: editTarget, selection: selection, revision: computedRevision, onAfterEdit: notifyAfterEdit })] })] })) : null, isGridContainer || isGridChild ? (_jsx(GridSection, { domElement: el, showContainer: isGridContainer, showChild: isGridChild, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null, showPositionInsets ? (_jsx(PositionInsets, { domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, revision: computedRevision, onAfterEdit: notifyAfterEdit })) : null] })] }));
 }
 function SizeSection({ domElement: el, editTarget, selection, entries, tokenRows, revision, onAfterEdit }) {
     const [expanded, setExpanded] = useState(false);
@@ -187,7 +187,7 @@ function FlexWrapToggle({ domElement, editTarget, selection, revision = 0, onAft
         setStyle(editTarget ?? domElement, "flex-wrap", isWrapped ? "nowrap" : "wrap");
         onAfterEdit?.();
     }
-    return (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), children: _jsx(IconButton, { variant: "secondary", size: "default", "data-active": isWrapped, "data-test": "layout-flex-wrap-toggle", label: mixed ? "Set Flex Wrap" : isWrapped ? "Disable Flex Wrap" : "Enable Flex Wrap", "aria-pressed": mixed ? "mixed" : isWrapped, disabled: blockedBy !== null, onClick: toggleWrap, children: _jsx(IconTextWrap, { size: 16, stroke: 1.8, "aria-hidden": "true" }) }) }));
+    return (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), children: _jsx(IconButton, { variant: "quiet", size: "default", "data-active": isWrapped, "data-test": "layout-flex-wrap-toggle", label: mixed ? "Set Flex Wrap" : isWrapped ? "Disable Flex Wrap" : "Enable Flex Wrap", "aria-pressed": mixed ? "mixed" : isWrapped, disabled: blockedBy !== null, onClick: toggleWrap, children: _jsx(IconTextWrap, { size: 16, stroke: 1.8, "aria-hidden": "true" }) }) }));
 }
 function FlexSettingsMenu({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
     const [direction] = useComputedLayoutValue(domElement, "flex-direction", "row", revision);

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

@@ -0,0 +1,42 @@
+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;
+/** What the border editor knows about one element: its cascade rows and computed style. */
+export interface BorderSource {
+    readonly rows: readonly ResolvedProperty[];
+    readonly computed: ComputedStyleReader;
+}
+export interface BorderEditorState {
+    /** Every side shares its width, style, and color. Never true for a group selection. */
+    readonly sidesLinked: boolean;
+    /** An unstructured `border` shorthand row that only a raw field can edit. */
+    readonly rawShorthandRow: ResolvedProperty | null;
+    /** The linked style draws a line, so linked width and color are meaningful. */
+    readonly linkedStyleDraws: boolean;
+    /** Rows backing the linked `border-width`, `border-style`, and `border-color` fields. */
+    readonly linkedRows: Readonly<Record<BorderComponent, ResolvedProperty | null>>;
+}
+/** User choices the border editor turns into declarations. */
+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;
+/** Whether any side draws a visible line, including after stylesheet resets. */
+export declare function hasVisibleBorder(computed: ComputedStyleReader): boolean;
+export declare function borderDeclarations(source: BorderSource, intent: BorderIntent): StyleDeclaration[];