nudge-ui 0.2.1 → 0.2.3

package/dist/inspector/sketch/interaction.js

@@ -1,3 +1,4 @@
+import { getActiveDraftChanges } from "../changes/draftChanges.js";
 import { useSyncExternalStore } from "react";
 import { captureViewport, } from "./capture.js";
 const EMPTY_SNAPSHOT = {
@@ -6,6 +7,7 @@ const EMPTY_SNAPSHOT = {
     editingId: null,
     error: null,
     initialTool: "pen",
+    draftId: null,
 };
 let snapshot = EMPTY_SNAPSHOT;
 let captureController = null;
@@ -41,21 +43,22 @@ export function useSketchInteractionActive() {
 export function beginSketchCapture(initialTool = "pen") {
     captureController?.abort();
     captureController = null;
-    publish({ captureState: "sketching", captured: null, editingId: null, error: null, initialTool });
+    publish({ captureState: "sketching", captured: null, editingId: null, error: null, initialTool, draftId: getActiveDraftChanges().draftId });
 }
 export function completeSketchCapture(hostElement) {
     captureController?.abort();
     const controller = new AbortController();
     captureController = controller;
     const initialTool = snapshot.initialTool;
-    publish({ captureState: "capturing", captured: null, editingId: null, error: null, initialTool });
+    const draftId = snapshot.draftId;
+    publish({ captureState: "capturing", captured: null, editingId: null, error: null, initialTool, draftId });
     const options = { hostElement, signal: controller.signal };
     return captureViewport(options)
         .then((captured) => {
         if (captureController !== controller)
             return captured;
         captureController = null;
-        publish({ captureState: "ready", captured, editingId: null, error: null, initialTool });
+        publish({ captureState: "ready", captured, editingId: null, error: null, initialTool, draftId });
         return captured;
     })
         .catch((error) => {
@@ -72,6 +75,7 @@ export function completeSketchCapture(hostElement) {
             editingId: null,
             error: error instanceof Error ? error.message : "The viewport could not be captured.",
             initialTool,
+            draftId,
         });
         throw error;
     });
@@ -84,7 +88,7 @@ export function cancelSketchInteraction() {
 export function openSketchEditor(sketchId) {
     captureController?.abort();
     captureController = null;
-    publish({ captureState: "idle", captured: null, editingId: sketchId, error: null, initialTool: "pen" });
+    publish({ captureState: "idle", captured: null, editingId: sketchId, error: null, initialTool: "pen", draftId: null });
 }
 export function closeSketchEditor() {
     if (snapshot.captureState !== "ready" && snapshot.editingId === null)

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

@@ -63,6 +63,11 @@ export interface SketchDocument {
     readonly strokes: readonly SketchStroke[];
     /** Optional for compatibility with sketches saved before annotations existed. */
     readonly annotations?: readonly SketchAnnotation[];
+    /**
+     * Size of `annotatedImage`, which can be taller than the capture when a
+     * notes panel is appended. `capture.imageWidth`/`imageHeight` size the
+     * original screenshot and the stroke coordinate space.
+     */
     readonly imageWidth: number;
     readonly imageHeight: number;
     readonly originalByteSize: number;

package/dist/inspector/sketch/model.js

@@ -176,8 +176,12 @@ export function isSketchDocument(value) {
                 && document.annotations.length <= SKETCH_LIMITS.annotations
                 && document.annotations.every(isSketchAnnotation)
                 && new Set(document.annotations.map((annotation) => annotation.number)).size === document.annotations.length))
-        && document.imageWidth === document.capture.imageWidth
-        && document.imageHeight === document.capture.imageHeight
+        && Number.isSafeInteger(document.imageWidth)
+        && document.imageWidth > 0
+        && document.imageWidth <= SKETCH_LIMITS.imageEdge
+        && Number.isSafeInteger(document.imageHeight)
+        && document.imageHeight > 0
+        && document.imageHeight <= SKETCH_LIMITS.imageEdge
         && Number.isSafeInteger(document.originalByteSize)
         && document.originalByteSize > 0
         && document.originalByteSize <= SKETCH_LIMITS.imageBytes

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

@@ -10,8 +10,7 @@ export declare function drawSketchStroke(ctx: CanvasRenderingContext2D, stroke:
 export declare function drawSketchStrokes(ctx: CanvasRenderingContext2D, strokes: readonly SketchStroke[], scaleX?: number, scaleY?: number): void;
 export declare function drawSketchAnnotation(ctx: CanvasRenderingContext2D, annotation: Pick<SketchAnnotation, "number" | "point">, scaleX?: number, scaleY?: number): void;
 export declare function drawSketchAnnotations(ctx: CanvasRenderingContext2D, annotations: readonly SketchAnnotation[], scaleX?: number, scaleY?: number): void;
-/** Renders the immutable screenshot and committed strokes into one PNG. */
-export declare function renderAnnotatedPng(originalImage: Blob, imageWidth: number, imageHeight: number, strokes: readonly SketchStroke[], annotations?: readonly SketchAnnotation[]): Promise<{
+export declare function renderAnnotatedPng(originalImage: Blob, imageWidth: number, imageHeight: number, strokes: readonly SketchStroke[], annotations?: readonly SketchAnnotation[], description?: string): Promise<{
     readonly blob: Blob;
     readonly width: number;
     readonly height: number;

package/dist/inspector/sketch/raster.js

@@ -1,6 +1,11 @@
 import { SKETCH_ANNOTATION_RADIUS, SKETCH_LIMITS, 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_LINE_HEIGHT = 32;
+const SKETCH_NOTE_FONT = "24px system-ui, sans-serif";
+const SKETCH_NOTE_TITLE_FONT = "600 24px system-ui, sans-serif";
 export function readPngDimensions(bytes) {
     if (bytes.length < 24)
         return null;
@@ -137,8 +142,59 @@ function canvasPng(canvas) {
         }, "image/png");
     });
 }
-/** Renders the immutable screenshot and committed strokes into one PNG. */
-export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = []) {
+function wrapText(ctx, text, maxWidth) {
+    const lines = [];
+    let line = "";
+    for (const word of text.split(/\s+/).filter(Boolean)) {
+        const next = line ? `${line} ${word}` : word;
+        if (line && ctx.measureText(next).width > maxWidth) {
+            lines.push(line);
+            line = word;
+        }
+        else {
+            line = next;
+        }
+    }
+    if (line)
+        lines.push(line);
+    return lines;
+}
+/** Wraps the description and numbered annotation notes to the panel width. */
+function wrapSketchNotes(ctx, width, description, annotations) {
+    const notes = [
+        description.trim(),
+        ...annotations.map((annotation) => {
+            const text = annotation.description.trim();
+            return text ? `${annotation.number}. ${text}` : "";
+        }),
+    ].filter(Boolean);
+    ctx.font = SKETCH_NOTE_FONT;
+    const textWidth = Math.max(1, width - SKETCH_NOTE_PADDING * 2);
+    return notes.flatMap((note) => wrapText(ctx, note, textWidth));
+}
+function sketchNotePanelHeight(lineCount) {
+    if (lineCount === 0)
+        return 0;
+    return SKETCH_NOTE_PADDING * 2 + SKETCH_NOTE_TITLE_HEIGHT + lineCount * SKETCH_NOTE_LINE_HEIGHT;
+}
+function drawSketchNotes(ctx, width, top, lines) {
+    ctx.save();
+    ctx.fillStyle = SKETCH_STROKE_COLOR;
+    ctx.fillRect(0, top, width, sketchNotePanelHeight(lines.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);
+    ctx.font = SKETCH_NOTE_FONT;
+    let y = top + SKETCH_NOTE_PADDING + SKETCH_NOTE_TITLE_HEIGHT;
+    for (const line of lines) {
+        ctx.fillText(line, SKETCH_NOTE_PADDING, y);
+        y += SKETCH_NOTE_LINE_HEIGHT;
+    }
+    ctx.restore();
+}
+export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = [], description = "") {
     await validatePngBlob(originalImage, { width: imageWidth, height: imageHeight });
     if (typeof document === "undefined")
         throw new Error("Sketch rendering requires a browser document.");
@@ -146,18 +202,26 @@ export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight,
     try {
         const canvas = document.createElement("canvas");
         canvas.width = imageWidth;
-        canvas.height = imageHeight;
         const context = canvas.getContext("2d");
         if (!context)
             throw new Error("The browser could not create a sketch canvas.");
+        const noteLines = wrapSketchNotes(context, imageWidth, description, annotations);
+        const outputHeight = imageHeight + sketchNotePanelHeight(noteLines.length);
+        if (outputHeight > SKETCH_LIMITS.imageEdge) {
+            throw new Error("Sketch notes are too long to fit below the captured image.");
+        }
+        // Resizing clears the canvas and resets context state; the context stays valid.
+        canvas.height = outputHeight;
         context.drawImage(image.source, 0, 0, imageWidth, imageHeight);
         drawSketchStrokes(context, strokes);
         drawSketchAnnotations(context, annotations);
+        if (noteLines.length > 0)
+            drawSketchNotes(context, imageWidth, imageHeight, 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.");
         }
-        return { blob: result, width: imageWidth, height: imageHeight };
+        return { blob: result, width: imageWidth, height: outputHeight };
     }
     finally {
         image.close();

package/dist/inspector/sketch/store.js

@@ -291,34 +291,54 @@ export function markSketchesHandingOff(entries, batchRevision, localBatchId, age
     }));
 }
 export function settleSketchDispatch(batchRevision, state, agentRequestId, localBatchId) {
-    if (batchRevision === undefined)
-        return Promise.resolve(false);
-    const changes = snapshot.handoffs
-        .filter((handoff) => handoff.batchRevision === batchRevision
-        && (localBatchId === undefined || handoff.localBatchId === localBatchId)
-        && (handoff.state === "dispatching" || handoff.state === "handing-off"));
-    if (changes.length === 0)
+    const projectId = activeProjectId;
+    const expectedGeneration = generation;
+    const hydration = initialization;
+    if (batchRevision === undefined || !projectId)
         return Promise.resolve(false);
-    return updateHandoffs(changes, (handoff) => {
-        if (state === "working") {
-            return updateHandoff(handoff, {
-                state: "handing-off",
-                transport: "direct",
-                ...(agentRequestId ? { agentRequestId } : {}),
-            });
-        }
+    return enqueue(async () => {
+        if (hydration)
+            await hydration;
+        assertWritable(projectId, expectedGeneration);
+        // Resolve the current revisions inside the write queue so a pending save
+        // or requeue cannot be removed by an older completion event.
+        const changes = snapshot.items.flatMap(({ document, handoff }) => {
+            if (!handoff || handoff.sketchRevision !== document.revision
+                || handoff.transport !== "direct" || handoff.batchRevision !== batchRevision)
+                return [];
+            // The client batch ID stays stable when the server assigns a request ID.
+            const matchesRequest = localBatchId !== undefined
+                ? handoff.localBatchId === localBatchId
+                : agentRequestId === undefined || handoff.agentRequestId === agentRequestId;
+            if (!matchesRequest)
+                return [];
+            return handoff.state === "dispatching" || handoff.state === "handing-off" || handoff.state === "unknown"
+                || (state === "completed" && handoff.state === "needs-review") ? [handoff] : [];
+        });
+        if (changes.length === 0)
+            return false;
         if (state === "completed") {
-            return updateHandoff(handoff, {
-                state: "needs-review",
-                transport: "direct",
-                ...(agentRequestId ? { agentRequestId } : {}),
-            });
+            for (const handoff of changes) {
+                await deleteSketchPersistence(projectId, handoff.sketchId);
+                assertWritable(projectId, expectedGeneration);
+                publish(projectId, snapshot.documents.filter((document) => document.id !== handoff.sketchId), snapshot.handoffs.filter((candidate) => candidate.sketchId !== handoff.sketchId), null);
+            }
+            return true;
         }
-        return updateHandoff(handoff, {
+        const nextHandoffs = changes.map((handoff) => updateHandoff(handoff, state === "working" ? {
+            state: "handing-off",
+            transport: "direct",
+            ...(agentRequestId ? { agentRequestId } : {}),
+        } : {
             state: "pending",
             transport: "direct",
             clearDelivery: true,
-        });
+        }));
+        await writeSketchHandoffs(projectId, nextHandoffs);
+        assertWritable(projectId, expectedGeneration);
+        const changedIds = new Set(nextHandoffs.map((handoff) => handoff.id));
+        publish(projectId, snapshot.documents, [...snapshot.handoffs.filter((handoff) => !changedIds.has(handoff.id)), ...nextHandoffs], null);
+        return true;
     });
 }
 export function markSketchesHandedOff(entries, localBatchId) {
@@ -386,9 +406,14 @@ function updateHandoffs(handoffs, update) {
     const expectedGeneration = generation;
     if (!projectId)
         return Promise.resolve(false);
-    const nextHandoffs = handoffs.map(update);
     return enqueue(async () => {
         assertWritable(projectId, expectedGeneration);
+        // Completion may delete a sketch before its dispatch response is handled.
+        const nextHandoffs = handoffs
+            .filter((handoff) => currentDocument(handoff.sketchId)?.revision === handoff.sketchRevision)
+            .map(update);
+        if (nextHandoffs.length === 0)
+            return false;
         await writeSketchHandoffs(projectId, nextHandoffs);
         assertWritable(projectId, expectedGeneration);
         const changedIds = new Set(nextHandoffs.map((handoff) => handoff.id));

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

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+import type { ColorPickerProps } from "./ColorPicker.js";
+/** Background layers are displayed in CSS paint order, with the top layer first. */
+export declare function BackgroundEditor(props: ColorPickerProps): ReactElement;

package/dist/inspector/styleEditors/BackgroundEditor.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { IconArrowsDiff, IconDroplet, IconMinus, IconPlus } from "@tabler/icons-react";
+import { replaceColorPreservingOpacity, withColorOpacity } from "../../css/value-semantics/colorSemantics.js";
+import { interpretTokenValue } from "../../css/value-semantics/tokenInterpretation.js";
+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 { getStateStyleValue } from "../shell/stateValue.js";
+import { ControlSurface } from "../ui/ControlSurface.js";
+import { IconButton } from "../ui/IconButton.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
+import { SegmentedControl } from "../ui/SegmentedControl.js";
+import { Select } from "../ui/Select.js";
+import { ImageBackgroundEditor } from "./ImageBackgroundEditor.js";
+import { backgroundDeclarations, backgroundMode, BACKGROUND_BLEND_MODES, newBackgroundLayer, readBackgroundLayers } from "./backgroundLayers.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { defaultGradient, parseGradient, serializeGradient } from "./gradientValue.js";
+const MODES = [{ value: "solid", label: "Solid" }, { value: "gradient", label: "Gradient" }, { value: "image", label: "Image" }];
+const TYPES = [{ value: "linear", label: "Linear" }, { value: "radial", label: "Radial" }, { value: "conic", label: "Conic" }];
+/** Background layers are displayed in CSS paint order, with the top layer first. */
+export function BackgroundEditor(props) {
+    const { element, selection, onAfterEdit } = props;
+    const el = element.domElement;
+    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"
+        ? props.tokenRow.authored ?? props.tokenRow.declaredValue : undefined;
+    if (base?.baseColor && authoredColor) {
+        const table = Object.fromEntries((props.entries ?? getNudgeUiTokenEntries()).map((entry) => [entry.name, entry]));
+        const resolved = interpretTokenValue(authoredColor, { table }).resolvedValue;
+        if (colorValueToHex(resolved) && colorValueToHex(resolved) === colorValueToHex(base.value))
+            base.value = authoredColor;
+    }
+    const [draft, setDraft] = useState(null);
+    const activeDraft = draft?.element === el && draft.revision === getActiveDraftChanges().revision
+        && draft.elements.length === elements.length && draft.elements.every((element, index) => element === elements[index]) ? draft : null;
+    const layers = activeDraft?.layers ?? source;
+    const properties = ["background-color", "background-image", "background-blend-mode", "background-size", "background-repeat", "background-position"];
+    const mixed = !activeDraft && elements.some((element) => properties.some((property) => selection?.getProperty(property)?.value.kind === "mixed"
+        || getStateStyleValue(element, property) !== getStateStyleValue(el, property)));
+    const blockedBy = inlineBlockedBy(elements, ...properties);
+    function commit(next) {
+        const previous = backgroundDeclarations(layers);
+        const declarations = backgroundDeclarations(next).filter((declaration) => mixed || previous.find((current) => current.property === declaration.property)?.value !== declaration.value);
+        if (inlineBlockedBy(elements, ...declarations.map((declaration) => declaration.property)))
+            return false;
+        if (declarations.length && !setStyles(selection?.target ?? el, declarations).length)
+            return false;
+        setDraft({ element: el, elements: [...elements], revision: getActiveDraftChanges().revision, layers: next });
+        onAfterEdit?.();
+        return true;
+    }
+    return _jsxs("div", { className: "editor background-editor", "data-test": "background-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Background" }), _jsx(InlineStyleWarning, { blockedBy: blockedBy }), _jsx(IconButton, { variant: "quiet", label: "Add background layer", disabled: blockedBy !== null, onClick: () => commit([{ ...newBackgroundLayer(), baseColor: mixed || layers.length === 0 }, ...(mixed ? [] : layers)]), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), mixed ? _jsx("div", { className: "background-editor__hint", children: "Mixed backgrounds. Add a layer to replace them." }) : layers.map((layer, index) => _jsx("div", { className: "background-editor__layer", role: "group", "aria-label": `Background layer ${index + 1}`, children: _jsx(BackgroundLayerEditor, { ...props, layer: layer, baseColor: layer.baseColor && layer.mode === "solid", bottomLayer: index === layers.length - 1, onChange: (next) => commit(layers.map((current, i) => i === index ? next : current)), onRemove: () => commit(layers.filter((_, i) => i !== index)) }) }, index))] });
+}
+function previewColor(color) {
+    const result = color.tokenName && color.opacity ? withColorOpacity(color.resolvedValue, color.opacity.value) : null;
+    return result?.ok ? result.value : color.resolvedValue;
+}
+function BackgroundLayerEditor(props) {
+    const { element, selection, entries, layer, baseColor, bottomLayer, onChange, onRemove } = props;
+    const allEntries = entries ?? getNudgeUiTokenEntries();
+    const tokenTable = Object.fromEntries(allEntries.map((entry) => [entry.name, entry]));
+    const el = element.domElement;
+    const elements = selection?.domElements ?? [el];
+    const { value, mode } = layer;
+    const gradient = layer.gradient ?? parseGradient(value);
+    const blockedBy = inlineBlockedBy(elements, baseColor ? "background-color" : "background-image");
+    const dragCommit = useRef(null);
+    function commit(nextValue, nextMode = backgroundMode(nextValue), nextGradient, declarations = []) {
+        if (blockedBy)
+            return false;
+        const next = {
+            ...layer, value: nextValue, mode: nextMode, gradient: nextGradient,
+            baseColor: layer.baseColor || (nextMode === "solid" && mode !== "solid" && bottomLayer),
+        };
+        for (const declaration of declarations) {
+            if (declaration.property === "background-size")
+                next.size = declaration.value;
+            if (declaration.property === "background-repeat")
+                next.repeat = declaration.value;
+            if (declaration.property === "background-position")
+                next.position = declaration.value;
+        }
+        return onChange(next);
+    }
+    function commitGradient(next) { commit(serializeGradient(next), "gradient", next); }
+    function changeMode(next) {
+        if (next === mode)
+            return;
+        if (next === "solid")
+            commit("#ffffff", next);
+        else if (next === "gradient")
+            commitGradient(defaultGradient());
+        else
+            commit("none", next);
+    }
+    function updateStop(index, next) {
+        if (gradient)
+            commitGradient({ ...gradient, stops: gradient.stops.map((stop, i) => i === index ? { ...stop, ...next } : stop) });
+    }
+    function removeStop(index) {
+        if (!gradient || gradient.stops.length <= 2)
+            return;
+        commitGradient({ ...gradient, stops: gradient.stops.filter((_, i) => i !== index) });
+    }
+    function addStop(position = 50) {
+        if (!gradient)
+            return;
+        const color = gradient.stops[0].color;
+        commitGradient({ ...gradient, stops: [...gradient.stops, { color, position }] });
+    }
+    function commitColor(index, stop, color) {
+        const result = replaceColorPreservingOpacity(stop.color, color, { tokenTable });
+        if (result.ok)
+            updateStop(index, { color: result.value });
+    }
+    function percentAt(track, clientX) {
+        const rect = track.getBoundingClientRect();
+        return rect.width > 0 ? Math.round(Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100))) : 50;
+    }
+    function rawField(label, current, onCommit, mixedValue = false) {
+        return _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: "background-image", domElement: el, entries: [], committedValue: current, label: label, mixed: mixedValue, blockedBy: blockedBy, onCommitRaw: onCommit, onSelectToken: () => false, onUnlink: onCommit }) });
+    }
+    const toolbar = _jsxs("div", { className: "background-editor__type-row", children: [_jsx(SegmentedControl, { "aria-label": "Background type", value: mode, options: MODES, onChange: changeMode, disabled: blockedBy !== null }), !baseColor ? _jsx(Select, { iconOnly: true, "aria-label": "Background blending mode", title: `Blend mode: ${layer.blend}`, value: layer.blend, options: BACKGROUND_BLEND_MODES, popupPosition: { side: "top", align: "end" }, disabled: inlineBlockedBy(elements, "background-blend-mode") !== null, onValueChange: (blend) => onChange({ ...layer, blend }), children: _jsx(IconDroplet, { "aria-hidden": "true" }) }) : _jsx("span", { className: "background-editor__blend-space", "aria-hidden": "true" }), _jsx(IconButton, { variant: "quiet", label: "Remove background layer", disabled: blockedBy !== null, onClick: onRemove, children: _jsx(IconMinus, { "aria-hidden": "true" }) })] });
+    const color = interpretTokenValue(value, { table: tokenTable });
+    if (mode === "solid")
+        return _jsxs("div", { className: "background-editor__solid", "data-property": baseColor ? "background-color" : "background-image", children: [toolbar, _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: baseColor ? "background-color" : "background-image", semanticSlot: "color", domElement: el, isColor: true, entries: allEntries, committedValue: color.tokenName ? value : colorValueToHex(value) ?? value, activeTokenName: color.tokenName, resolvedValue: previewColor(color), opacity: color.opacity, label: "Background Color", blockedBy: blockedBy, onCommitRaw: (raw) => {
+                            const result = replaceColorPreservingOpacity(value, raw, { tokenTable });
+                            if (result.ok)
+                                commit(result.value, "solid");
+                        }, onSelectToken: (token) => {
+                            const result = replaceColorPreservingOpacity(value, `var(${token.name})`, { tokenTable });
+                            return result.ok && commit(result.value, "solid");
+                        }, onUnlink: (raw) => commit(raw, "solid"), onCommitOpacity: (opacity) => {
+                            const result = withColorOpacity(value, opacity);
+                            return result.ok && commit(result.value, "solid");
+                        } }) })] });
+    return _jsxs("div", { className: "background-editor__content", children: [toolbar, mode === "image" ? _jsx(ImageBackgroundEditor, { element: el, elements: elements, value: value, mixed: false, sizingValues: { size: layer.size, repeat: layer.repeat }, onCss: (raw) => commit(raw, "image"), onUpload: (image) => commit(image, "image", undefined, [
+                    { property: "background-size", value: "cover" },
+                    { property: "background-repeat", value: "no-repeat" },
+                    { property: "background-position", value: "center" },
+                ]), onSizing: (declarations) => commit(value, "image", undefined, declarations) }) : gradient && mode === "gradient" ? _jsxs("div", { className: "background-editor__gradient", children: [_jsx("div", { className: "background-editor__track", "data-test": "gradient-track", "aria-label": "Gradient stops", style: { backgroundImage: serializeGradient({ ...gradient, type: "linear", angle: 90, prelude: "", repeating: false,
+                                stops: gradient.stops.map((stop) => ({ ...stop, color: previewColor(interpretTokenValue(stop.color, { table: tokenTable })) })) }) }, onPointerDown: (event) => { if (event.target === event.currentTarget && event.button === 0)
+                            addStop(percentAt(event.currentTarget, event.clientX)); }, children: gradient.stops.map((stop, index) => _jsx("button", { type: "button", className: "background-editor__stop", "aria-label": `Gradient stop ${index + 1}`, disabled: blockedBy !== null, style: { left: `clamp(8px, ${stop.position}%, calc(100% - 8px))`, backgroundColor: previewColor(interpretTokenValue(stop.color, { table: tokenTable })) }, onPointerDown: (event) => {
+                                if (event.button !== 0)
+                                    return;
+                                event.stopPropagation();
+                                dragCommit.current = createChangeHistoryGroup();
+                                event.currentTarget.setPointerCapture(event.pointerId);
+                            }, onPointerMove: (event) => {
+                                if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                                    const position = percentAt(event.currentTarget.parentElement, event.clientX);
+                                    if (position !== stop.position)
+                                        dragCommit.current?.(() => updateStop(index, { position }));
+                                }
+                            }, onPointerUp: (event) => {
+                                dragCommit.current = null;
+                                if (event.currentTarget.hasPointerCapture(event.pointerId))
+                                    event.currentTarget.releasePointerCapture(event.pointerId);
+                            }, onPointerCancel: () => { dragCommit.current = null; }, onLostPointerCapture: () => { dragCommit.current = null; }, onDoubleClick: () => removeStop(index), onKeyDown: (event) => {
+                                if (event.key === "Delete" || event.key === "Backspace") {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    removeStop(index);
+                                }
+                                if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    updateStop(index, { position: Math.max(0, Math.min(100, stop.position + (event.key === "ArrowLeft" ? -1 : 1) * (event.shiftKey ? 10 : 1))) });
+                                }
+                            } }, index)) }), _jsxs("div", { className: "background-editor__toolbar", children: [_jsx(Select, { "aria-label": "Gradient type", value: gradient.type, options: TYPES, disabled: blockedBy !== null, onValueChange: (type) => commitGradient({ ...gradient, type: type, prelude: type === "radial" ? "circle at center" : "" }) }), gradient.type !== "radial" ? rawField("Gradient angle", `${gradient.angle}deg`, (raw) => {
+                                const match = /^([+-]?(?:\d*\.)?\d+)(?:deg)?$/.exec(raw.trim());
+                                if (match && Number.isFinite(Number(match[1])))
+                                    commitGradient({ ...gradient, angle: Number(match[1]) });
+                            }) : null, _jsx(IconButton, { variant: "quiet", label: "Reverse gradient", disabled: blockedBy !== null, onClick: () => commitGradient({ ...gradient, stops: [...gradient.stops].reverse().map((stop) => ({ ...stop, position: 100 - stop.position })) }), children: _jsx(IconArrowsDiff, { "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Add gradient stop", disabled: blockedBy !== null, onClick: () => addStop(), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), gradient.stops.map((stop, index) => ({ stop, index })).sort((a, b) => a.stop.position - b.stop.position).map(({ stop, index }) => {
+                        const color = interpretTokenValue(stop.color, { table: tokenTable });
+                        return _jsxs("div", { className: "background-editor__stop-row", role: "group", "aria-label": `Stop ${index + 1}`, children: [rawField(`Stop ${index + 1} position`, `${Number(stop.position.toFixed(3))}%`, (raw) => {
+                                    const match = /^([+-]?(?:\d*\.)?\d+)%?$/.exec(raw.trim());
+                                    if (match)
+                                        updateStop(index, { position: Math.max(0, Math.min(100, Number(match[1]))) });
+                                }), _jsx(ControlSurface, { children: _jsx(TokenValueField, { property: "background-image", semanticSlot: "color", domElement: el, isColor: true, entries: allEntries, activeTokenName: color.tokenName, committedValue: color.tokenName ? stop.color : colorValueToHex(stop.color) ?? stop.color, resolvedValue: previewColor(color), label: `Stop ${index + 1} color`, blockedBy: blockedBy, opacity: color.opacity, onCommitRaw: (color) => commitColor(index, stop, color), onSelectToken: (token) => commitColor(index, stop, `var(${token.name})`), onUnlink: (color) => updateStop(index, { color: previewColor(interpretTokenValue(color, { table: tokenTable })) }), onCommitOpacity: (opacity) => {
+                                            const result = withColorOpacity(stop.color, opacity);
+                                            if (!result.ok)
+                                                return false;
+                                            updateStop(index, { color: result.value });
+                                        } }) }), _jsx(IconButton, { variant: "quiet", label: `Remove stop ${index + 1}`, disabled: blockedBy !== null || gradient.stops.length <= 2, onClick: () => removeStop(index), children: _jsx(IconMinus, { "aria-hidden": "true" }) })] }, index);
+                    })] }) : _jsxs("div", { className: "background-editor__raw", children: [mode === "gradient" ? _jsx("div", { className: "background-editor__hint", children: "Edit this background using CSS." }) : null, rawField("Background image CSS", value, (raw) => {
+                        if (typeof CSS !== "undefined" && !CSS.supports("background-image", raw))
+                            return;
+                        commit(raw, mode);
+                    }, false), mode === "gradient" ? _jsx(IconButton, { variant: "quiet", label: "Add linear gradient", disabled: blockedBy !== null, onClick: () => commitGradient(defaultGradient()), children: _jsx(IconPlus, { "aria-hidden": "true" }) }) : null] })] });
+}