nudge-ui 0.2.0 → 0.2.1

package/dist/inspector/sketch/store.js

@@ -0,0 +1,409 @@
+import { useSyncExternalStore } from "react";
+import { canWriteWorkspace } from "../canvas/workspaceLease.js";
+import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { clearSketchPersistence, deleteSketchPersistence, readSketchPersistence, SketchStorageError, writeSketchHandoffs, writeSketchPersistence, } from "./persistence.js";
+import { SKETCH_LIMITS, SKETCH_SCHEMA_VERSION, createSketchFilename, isSketchDocument, isSketchHandoffRecord, sameSketchContent, toAgentSketchMetadata, } from "./model.js";
+const EMPTY_SNAPSHOT = {
+    projectId: null,
+    ready: false,
+    documents: [],
+    handoffs: [],
+    items: [],
+    error: null,
+};
+let snapshot = EMPTY_SNAPSHOT;
+let initialization = null;
+let activeProjectId = null;
+let generation = 0;
+let writeQueue = Promise.resolve();
+const listeners = new Set();
+function notify() {
+    for (const listener of listeners) {
+        try {
+            listener();
+        }
+        catch {
+            // A subscriber must not prevent the store from notifying the others.
+        }
+    }
+}
+function setSnapshot(next) {
+    snapshot = next;
+    notify();
+}
+function sortDocuments(documents) {
+    return [...documents].sort((left, right) => right.updatedAt - left.updatedAt || left.id.localeCompare(right.id));
+}
+function sortHandoffs(handoffs) {
+    return [...handoffs].sort((left, right) => right.timestamp - left.timestamp || left.id.localeCompare(right.id));
+}
+function currentHandoff(document, handoffs) {
+    return handoffs
+        .filter((handoff) => handoff.sketchId === document.id && handoff.sketchRevision === document.revision)
+        .sort((left, right) => right.timestamp - left.timestamp || right.id.localeCompare(left.id))[0] ?? null;
+}
+function deriveItems(documents, handoffs) {
+    return sortDocuments(documents).map((document) => {
+        const handoff = currentHandoff(document, handoffs);
+        return {
+            document,
+            handoff,
+            status: handoff?.state ?? "pending",
+        };
+    });
+}
+function publish(projectId, documents, handoffs, error = snapshot.error) {
+    setSnapshot({
+        projectId,
+        ready: true,
+        documents: sortDocuments(documents),
+        handoffs: sortHandoffs(handoffs),
+        items: deriveItems(documents, handoffs),
+        error,
+    });
+}
+function messageForError(error) {
+    if (error instanceof Error && error.message)
+        return error.message;
+    return "Sketch storage is unavailable. Your current sketch remains open; try again.";
+}
+function randomId(prefix) {
+    try {
+        if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+            return `${prefix}-${crypto.randomUUID()}`;
+        }
+    }
+    catch {
+        // Fall through to the deterministic-enough browser fallback.
+    }
+    return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function enqueue(operation) {
+    const next = writeQueue.then(operation, operation);
+    writeQueue = next.then(() => undefined, () => undefined);
+    return next;
+}
+function assertWritable(projectId, expectedGeneration) {
+    if (!canWriteWorkspace()) {
+        throw new SketchStorageError("This inspector tab no longer owns the sketch workspace.");
+    }
+    if (activeProjectId !== projectId || generation !== expectedGeneration) {
+        throw new SketchStorageError("This sketch workspace has changed; reload the inspector and try again.");
+    }
+}
+function validateSaveInput(input) {
+    if (input.id !== undefined && (input.id.length === 0 || input.id.length > 256)) {
+        throw new SketchStorageError("The sketch identifier is invalid.");
+    }
+    if (!isSketchDocument({
+        schemaVersion: SKETCH_SCHEMA_VERSION,
+        projectId: "placeholder",
+        id: input.id ?? "placeholder",
+        revision: 1,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        capture: input.capture,
+        description: input.description,
+        strokes: input.strokes,
+        annotations: input.annotations ?? [],
+        imageWidth: input.imageWidth,
+        imageHeight: input.imageHeight,
+        originalByteSize: input.originalImage.size,
+        annotatedByteSize: input.annotatedImage.size,
+        filename: "sketch.png",
+        originalImage: input.originalImage,
+        annotatedImage: input.annotatedImage,
+    })) {
+        throw new SketchStorageError("The sketch exceeds one of the supported size or format limits.");
+    }
+    if (input.originalImage.type !== "image/png" || input.annotatedImage.type !== "image/png") {
+        throw new SketchStorageError("Sketch images must be PNG files.");
+    }
+}
+function projectBytes(documents) {
+    return documents.reduce((total, document) => total + document.originalByteSize + document.annotatedByteSize, 0);
+}
+function currentDocument(sketchId) {
+    return snapshot.documents.find((document) => document.id === sketchId) ?? null;
+}
+function updateHandoff(handoff, patch) {
+    const next = {
+        ...handoff,
+        state: patch.state,
+        timestamp: Date.now(),
+        ...(patch.transport === undefined ? {} : { transport: patch.transport }),
+        ...(patch.localBatchId === undefined ? {} : { localBatchId: patch.localBatchId }),
+    };
+    if (patch.clearDelivery) {
+        delete next.batchRevision;
+        delete next.agentRequestId;
+    }
+    if (patch.batchRevision !== undefined)
+        next.batchRevision = patch.batchRevision;
+    if (patch.agentRequestId !== undefined)
+        next.agentRequestId = patch.agentRequestId;
+    return next;
+}
+function matchingCurrentHandoffs(entries) {
+    const expected = new Map(entries.map((entry) => [entry.id, entry.revision]));
+    return snapshot.handoffs.filter((handoff) => expected.get(handoff.sketchId) === handoff.sketchRevision
+        && currentDocument(handoff.sketchId)?.revision === handoff.sketchRevision);
+}
+export function getSketchStoreSnapshot() {
+    return snapshot;
+}
+export function subscribeSketchStore(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+export function useSketchStore() {
+    return useSyncExternalStore(subscribeSketchStore, getSketchStoreSnapshot, getSketchStoreSnapshot);
+}
+export function useSketches() {
+    return useSketchStore().items;
+}
+export function getSketches() {
+    return snapshot.items;
+}
+export function getPendingSketches() {
+    return snapshot.items.filter((item) => item.status === "pending");
+}
+export function getSketch(sketchId) {
+    return snapshot.items.find((item) => item.document.id === sketchId) ?? null;
+}
+export function initializeSketchStore(projectId = getNudgeUiRuntimeConfig().projectId) {
+    if (activeProjectId === projectId && initialization)
+        return initialization;
+    generation += 1;
+    activeProjectId = projectId;
+    setSnapshot({ ...EMPTY_SNAPSHOT, projectId });
+    const expectedGeneration = generation;
+    initialization = readSketchPersistence(projectId)
+        .then((stored) => {
+        if (activeProjectId !== projectId || generation !== expectedGeneration)
+            return;
+        const validDocuments = stored.documents.filter((document) => isSketchDocument(document) && document.projectId === projectId);
+        const validDocumentIds = new Set(validDocuments.map((document) => document.id));
+        const validHandoffs = stored.handoffs
+            .filter((handoff) => isSketchHandoffRecord(handoff)
+            && handoff.projectId === projectId && validDocumentIds.has(handoff.sketchId))
+            .map((handoff) => handoff.state === "dispatching" || handoff.state === "handing-off"
+            ? { ...handoff, state: "unknown", timestamp: Date.now() }
+            : handoff);
+        const invalidStoredData = validDocuments.length !== stored.documents.length
+            || validHandoffs.length !== stored.handoffs.length;
+        publish(projectId, validDocuments, validHandoffs, invalidStoredData ? "Some saved sketches could not be restored." : null);
+    })
+        .catch((error) => {
+        if (activeProjectId !== projectId || generation !== expectedGeneration)
+            return;
+        publish(projectId, [], [], messageForError(error));
+        initialization = null;
+        throw error;
+    });
+    return initialization;
+}
+export function saveSketch(input) {
+    validateSaveInput(input);
+    const projectId = activeProjectId ?? getNudgeUiRuntimeConfig().projectId;
+    const expectedGeneration = generation;
+    const existing = input.id ? currentDocument(input.id) : null;
+    if (existing && sameSketchContent(existing, input.description, input.strokes, input.annotations ?? [])) {
+        return Promise.resolve(existing);
+    }
+    const hydration = initialization;
+    return enqueue(async () => {
+        if (hydration)
+            await hydration;
+        assertWritable(projectId, expectedGeneration);
+        const documents = [...snapshot.documents];
+        const current = input.id ? documents.find((document) => document.id === input.id) : undefined;
+        const now = Date.now();
+        const id = current?.id ?? input.id ?? randomId("sketch");
+        const revision = (current?.revision ?? 0) + 1;
+        const document = {
+            schemaVersion: SKETCH_SCHEMA_VERSION,
+            projectId,
+            id,
+            revision,
+            createdAt: current?.createdAt ?? now,
+            updatedAt: now,
+            capture: { ...input.capture },
+            description: input.description,
+            strokes: input.strokes.map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) })),
+            annotations: (input.annotations ?? []).map((annotation) => ({
+                ...annotation,
+                point: { ...annotation.point },
+            })),
+            imageWidth: input.imageWidth,
+            imageHeight: input.imageHeight,
+            originalByteSize: input.originalImage.size,
+            annotatedByteSize: input.annotatedImage.size,
+            filename: createSketchFilename(id, revision),
+            originalImage: input.originalImage,
+            annotatedImage: input.annotatedImage,
+        };
+        const nextDocuments = documents.filter((candidate) => candidate.id !== document.id);
+        nextDocuments.push(document);
+        if (nextDocuments.length > SKETCH_LIMITS.completedSketches) {
+            throw new SketchStorageError(`You can keep up to ${SKETCH_LIMITS.completedSketches} sketches at a time.`);
+        }
+        if (projectBytes(nextDocuments) > SKETCH_LIMITS.projectBytes) {
+            throw new SketchStorageError("The saved sketches use more than the project storage limit.");
+        }
+        const handoff = {
+            id: randomId("handoff"),
+            projectId,
+            sketchId: document.id,
+            sketchRevision: document.revision,
+            localBatchId: randomId("batch"),
+            transport: "local",
+            timestamp: now,
+            state: "pending",
+        };
+        await writeSketchPersistence(projectId, document, handoff);
+        assertWritable(projectId, expectedGeneration);
+        const nextHandoffs = snapshot.handoffs.filter((candidate) => candidate.sketchId !== document.id
+            || candidate.sketchRevision !== document.revision);
+        nextHandoffs.push(handoff);
+        publish(projectId, nextDocuments, nextHandoffs, null);
+        return document;
+    });
+}
+export function markSketchesDispatching(entries, batchRevision, localBatchId) {
+    return updateMatchingHandoffs(entries, (handoff) => updateHandoff(handoff, {
+        state: "dispatching",
+        transport: "direct",
+        batchRevision,
+        localBatchId,
+        clearDelivery: true,
+    }));
+}
+export function markSketchesHandingOff(entries, batchRevision, localBatchId, agentRequestId) {
+    const matching = matchingCurrentHandoffs(entries)
+        .filter((handoff) => handoff.state === "dispatching" || handoff.state === "handing-off");
+    return updateHandoffs(matching, (handoff) => updateHandoff(handoff, {
+        state: "handing-off",
+        transport: "direct",
+        batchRevision,
+        localBatchId,
+        ...(agentRequestId ? { agentRequestId } : {}),
+    }));
+}
+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)
+        return Promise.resolve(false);
+    return updateHandoffs(changes, (handoff) => {
+        if (state === "working") {
+            return updateHandoff(handoff, {
+                state: "handing-off",
+                transport: "direct",
+                ...(agentRequestId ? { agentRequestId } : {}),
+            });
+        }
+        if (state === "completed") {
+            return updateHandoff(handoff, {
+                state: "needs-review",
+                transport: "direct",
+                ...(agentRequestId ? { agentRequestId } : {}),
+            });
+        }
+        return updateHandoff(handoff, {
+            state: "pending",
+            transport: "direct",
+            clearDelivery: true,
+        });
+    });
+}
+export function markSketchesHandedOff(entries, localBatchId) {
+    return updateMatchingHandoffs(entries, (handoff) => updateHandoff(handoff, {
+        state: "needs-review",
+        transport: "clipboard",
+        ...(localBatchId ? { localBatchId } : {}),
+    }));
+}
+export function requeueSketch(sketchId) {
+    const item = getSketch(sketchId);
+    if (!item)
+        return Promise.resolve(false);
+    return updateMatchingHandoffs([{ id: sketchId, revision: item.document.revision }], (handoff) => updateHandoff(handoff, {
+        state: "pending",
+        transport: "local",
+        clearDelivery: true,
+        localBatchId: randomId("batch"),
+    }));
+}
+export function removeSketch(sketchId) {
+    const item = getSketch(sketchId);
+    if (!item || item.status === "dispatching" || item.status === "handing-off")
+        return Promise.resolve(false);
+    const projectId = activeProjectId;
+    const expectedGeneration = generation;
+    if (!projectId)
+        return Promise.resolve(false);
+    return enqueue(async () => {
+        assertWritable(projectId, expectedGeneration);
+        await deleteSketchPersistence(projectId, sketchId);
+        assertWritable(projectId, expectedGeneration);
+        publish(projectId, snapshot.documents.filter((document) => document.id !== sketchId), snapshot.handoffs.filter((handoff) => handoff.sketchId !== sketchId), null);
+        return true;
+    });
+}
+export function clearSketchesForProject(projectId = activeProjectId ?? getNudgeUiRuntimeConfig().projectId) {
+    if (activeProjectId === projectId) {
+        generation += 1;
+        const expectedGeneration = generation;
+        publish(projectId, [], [], null);
+        return enqueue(async () => {
+            if (!canWriteWorkspace())
+                throw new SketchStorageError("This inspector tab no longer owns the sketch workspace.");
+            await clearSketchPersistence(projectId);
+            if (activeProjectId !== projectId || generation !== expectedGeneration)
+                return;
+        }).catch((error) => {
+            if (activeProjectId === projectId && generation === expectedGeneration) {
+                setSnapshot({ ...snapshot, error: messageForError(error) });
+            }
+            throw error;
+        });
+    }
+    return enqueue(() => clearSketchPersistence(projectId));
+}
+function updateMatchingHandoffs(entries, update) {
+    const matching = matchingCurrentHandoffs(entries);
+    if (matching.length === 0)
+        return Promise.resolve(false);
+    return updateHandoffs(matching, update);
+}
+function updateHandoffs(handoffs, update) {
+    const projectId = activeProjectId;
+    const expectedGeneration = generation;
+    if (!projectId)
+        return Promise.resolve(false);
+    const nextHandoffs = handoffs.map(update);
+    return enqueue(async () => {
+        assertWritable(projectId, expectedGeneration);
+        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 sketchMetadataFor(items) {
+    return items.map((item) => toAgentSketchMetadata(item.document));
+}
+export function resetSketchStore() {
+    generation += 1;
+    activeProjectId = null;
+    initialization = null;
+    snapshot = EMPTY_SNAPSHOT;
+    writeQueue = Promise.resolve();
+    notify();
+}

package/dist/inspector/styleEditors/BorderEditor.js

@@ -13,9 +13,10 @@ 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 { hasAuthoredProperty, hasAuthoredStyle, isZeroCssValue } from "./stylePresence.js";
+import { useFieldVisibility } from "./useFieldVisibility.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);
@@ -105,11 +106,11 @@ function isBorderFaceProperty(property) {
 }
 function isZeroWidthValue(value) {
     const trimmed = value.trim().toLowerCase();
-    if (ZERO_WIDTH.test(trimmed))
+    if (isZeroCssValue(trimmed))
         return true;
     // Structured/preflight authored forms like `0 solid` / `0px solid currentcolor`.
     const first = trimmed.split(/\s+/)[0] ?? "";
-    return ZERO_WIDTH.test(first);
+    return isZeroCssValue(first);
 }
 /** True when a face paints: drawn style and non-zero width. */
 function sidePaints(el, rows, side) {
@@ -126,8 +127,7 @@ function sidePaints(el, rows, side) {
  *
  * Counts as presence:
  * - any painted face (drawn style + non-zero width)
- * - explicit `none` / `hidden`
- * - authored non-zero width
+ * - a direct width or disabling style, including zero
  */
 function hasBorderPresence(el, rows) {
     if (SIDE_NAMES.some((side) => sidePaints(el, rows, side)))
@@ -135,6 +135,8 @@ function hasBorderPresence(el, rows) {
     for (const row of rows) {
         if (!isBorderFaceProperty(row.property) && !row.structure)
             continue;
+        if (!hasAuthoredStyle(row))
+            continue;
         const property = row.property.toLowerCase();
         const authored = (row.authored ?? row.declaredValue ?? "").trim().toLowerCase();
         const structuredStyle = row.structure?.style?.trim().toLowerCase() ?? "";
@@ -142,9 +144,9 @@ function hasBorderPresence(el, rows) {
         if (INVISIBLE_BORDER_STYLES.has(structuredStyle) || INVISIBLE_BORDER_STYLES.has(authored)) {
             return true;
         }
-        if (structuredWidth && !isZeroWidthValue(structuredWidth))
+        if (structuredWidth)
             return true;
-        if ((property === "border-width" || property.endsWith("-width")) && authored && !isZeroWidthValue(authored)) {
+        if ((property === "border-width" || property.endsWith("-width")) && authored) {
             return true;
         }
     }
@@ -207,25 +209,19 @@ export function BorderEditor(props) {
     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
+        ? (selection?.domElements.some((candidate) => hasBorderPresence(candidate, [])) ?? false)
+            || borderWidthProperties.some((property) => hasAuthoredProperty(selection, property))
         : 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;
+    const visibility = useFieldVisibility(selection?.domElements ?? [el], "border", hasBorder || rawBorderFallback);
+    const showBorderControls = visibility.visible;
     function handleAddBorder() {
         setStyle(editTarget, "border", "1px solid");
-        setBorderSessionOpen(true);
+        visibility.show();
         onAfterEdit?.();
     }
     function handleRemoveBorder() {
         setStyle(editTarget, "border", "0 solid");
-        setBorderSessionOpen(false);
+        visibility.hide();
         onAfterEdit?.();
     }
     function handleExpand() {

package/dist/inspector/styleEditors/BorderRadiusEditor.js

@@ -77,11 +77,11 @@ export function BorderRadiusEditor(props) {
     const cornerSides = BORDER_RADIUS_CORNERS.map((corner, index) => ({
         side: SIDE_NAMES[index],
         sideLabel: BORDER_RADIUS_LABELS[index],
-        icon: (() => {
-            const Icon = BORDER_RADIUS_ICONS[index];
-            return _jsx(Icon, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" });
-        })(),
-        control: (_jsx(TokenField, { property: corner, selection: selection, tokenRow: findTokenRow(tokenRows, corner), domElement: el, editTarget: editTarget, entries: allEntries, editMetadata: metadataFor(findTokenRow(tokenRows, corner)), onAfterEdit: onAfterEdit, chipVariant: "small" })),
+        icon: null,
+        control: (_jsx(TokenField, { property: corner, selection: selection, tokenRow: findTokenRow(tokenRows, corner), domElement: el, editTarget: editTarget, entries: allEntries, editMetadata: metadataFor(findTokenRow(tokenRows, corner)), onAfterEdit: onAfterEdit, chipVariant: "small", leading: (() => {
+                const Icon = BORDER_RADIUS_ICONS[index];
+                return _jsx(Icon, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" });
+            })() })),
     }));
     const linkedTokenRow = () => {
         const first = findTokenRow(tokenRows, BORDER_RADIUS_CORNERS[0]);
@@ -93,7 +93,7 @@ export function BorderRadiusEditor(props) {
     const mixed = !dataLinked;
     const groupedControl = (_jsx(ControlSurface, { children: _jsx(TokenField, { property: "border-radius", selection: selection, tokenRow: mixed ? null : borderRadiusRow, initialValue: mixed ? "Mix" : undefined, displayValue: mixed ? "Mix" : undefined, domElement: el, editTarget: editTarget, entries: allEntries, editMetadata: metadataFor(borderRadiusRow), mixed: mixed, formatRawValue: (value) => mixed && value.trim().toLowerCase() === "mix"
                 ? ""
-                : completeCssValue(value.trim(), valuePolicyFor("border-radius")), onAfterEdit: onAfterEdit, chipVariant: "small" }) }));
+                : completeCssValue(value.trim(), valuePolicyFor("border-radius")), onAfterEdit: onAfterEdit, chipVariant: "small", leading: _jsx(IconBorderCorners, { className: "side-values__icon side-values__side-icon", size: 16, "aria-hidden": "true" }) }) }));
     const toggleButton = (_jsx(ToggleButton, { className: embedded ? "border-radius-editor__toggle" : undefined, variant: "quiet", size: "default", "data-test": isLinked ? "border-radius-expand" : "border-radius-collapse", label: isLinked ? "Edit Individual Corners" : "Link All Corners", title: isLinked ? "Edit Individual Corners" : "Link All Corners", pressed: !isLinked, onPressedChange: (pressed) => {
             if (pressed)
                 handleExpand();

package/dist/inspector/styleEditors/BoxShadowEditor.js

@@ -1,13 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPlus } from "@tabler/icons-react";
 import { TokenField } from "../tokens/TokenField.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+import { IconButton } from "../ui/IconButton.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { hasAuthoredProperty } from "./stylePresence.js";
+import { useFieldVisibility } from "./useFieldVisibility.js";
 export function BoxShadowEditor(props) {
     const { element, selection, entries, tokenRows = [], onAfterEdit } = props;
     const el = element.domElement;
     const editTarget = selection?.target ?? el;
     const allEntries = entries ?? getNudgeUiTokenEntries();
     const tokenRow = tokenRows.find((row) => row.property === "box-shadow") ?? null;
-    return (_jsxs("div", { className: "editor", "data-test": "box-shadow-editor", children: [_jsx("div", { className: "editor__title", children: "Box Shadow" }), _jsx("div", { className: "property", children: _jsx(FieldRow, { label: "Box Shadow", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "box-shadow", selection: selection, tokenRow: tokenRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }) })] }));
+    const elements = selection?.domElements ?? [el];
+    const hasShadow = hasAuthoredProperty(selection, "box-shadow", tokenRow) || elements.some((element) => {
+        const value = getStateStyleValue(element, "box-shadow");
+        return value !== "" && value !== "none";
+    });
+    const visibility = useFieldVisibility(elements, "box-shadow", hasShadow);
+    return (_jsxs("div", { className: "editor", "data-test": "box-shadow-editor", children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: "Box Shadow" }), !visibility.visible ? (_jsx(IconButton, { variant: "quiet", label: "Add Box Shadow", "data-test": "add-shadow", onClick: visibility.show, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) })) : null] }), visibility.visible ? _jsx("div", { className: "property", children: _jsx(FieldRow, { label: "Box Shadow", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: "box-shadow", selection: selection, tokenRow: tokenRow, domElement: el, editTarget: editTarget, entries: allEntries, onAfterEdit: onAfterEdit }) }) }) }) : null] }));
 }

package/dist/inspector/styleEditors/ColorPicker.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
 import { IconMinus, IconPlus } from "@tabler/icons-react";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { TokenField } from "../tokens/TokenField.js";
@@ -8,6 +7,8 @@ import { IconButton } from "../ui/IconButton.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { setStyle } from "../tokens/editActions.js";
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
+import { hasAuthoredProperty, isZeroCssValue } from "./stylePresence.js";
+import { useFieldVisibility } from "./useFieldVisibility.js";
 function colorSectionTitle(property) {
     if (property === "background-color")
         return "Background Color";
@@ -15,59 +16,33 @@ function colorSectionTitle(property) {
         return "Color";
     return formatInspectorLabel(property);
 }
-function isZeroColorComponent(value) {
-    return /^0(?:\.0+)?%?$/.test(value.trim());
-}
 export function isEmptyColorValue(value) {
     const normalized = value.trim().toLowerCase();
     if (!normalized || normalized === "none" || normalized === "transparent")
         return true;
-    if (/^#(?:0000|00000000)$/.test(normalized))
+    if (/^#(?:[0-9a-f]{3}0|[0-9a-f]{6}00)$/.test(normalized))
         return true;
     const match = normalized.match(/^rgba?\((.*)\)$/);
     if (!match)
         return false;
     const components = match[1].split(/[\s,/]+/).filter(Boolean);
     return components.length === 4
-        && components.slice(0, 3).every(isZeroColorComponent)
-        && isZeroColorComponent(components[3]);
+        && isZeroCssValue(components[3]);
 }
 export function ColorPicker(props) {
     const { element, selection, property = "color", entries, tokenRow, onAfterEdit } = props;
     const el = element.domElement;
-    const selectedElements = useMemo(() => selection?.elements ?? [element], [element, selection]);
+    const selectedElements = selection?.domElements ?? [el];
     const target = selection?.target ?? el;
     const allEntries = entries ?? getNudgeUiTokenEntries();
-    const declaredValue = tokenRow?.declaredValue?.trim() ?? "";
-    const paintedValue = getStateStyleValue(el, property);
-    const resolvedValue = tokenRow?.resolvedValue ?? paintedValue;
-    // An explicit declaration remains meaningful even when it paints as empty
-    // for text color (for example `transparent` or `var(--missing, transparent)`).
-    // A transparent background, however, is the empty state represented by the
-    // remove action and should not remain visible as an authored value.
-    const emptyValues = selectedElements.map((selected) => getStateStyleValue(selected.domElement, property));
-    const isEmpty = selectedElements.length > 1
-        ? emptyValues.every((value) => isEmptyColorValue(value))
-        : property === "background-color"
-            ? isEmptyColorValue(declaredValue) || isEmptyColorValue(resolvedValue) || isEmptyColorValue(paintedValue)
-            : declaredValue.length === 0 && isEmptyColorValue(resolvedValue);
-    const [fieldAdded, setFieldAdded] = useState(false);
-    const [backgroundRemoved, setBackgroundRemoved] = useState(false);
-    useEffect(() => {
-        setFieldAdded(false);
-        setBackgroundRemoved(false);
-    }, [el, property, selectedElements]);
-    function handleAfterEdit() {
-        setFieldAdded(false);
-        setBackgroundRemoved(false);
-        onAfterEdit?.();
-    }
-    const showTokenField = (!isEmpty && !backgroundRemoved) || fieldAdded;
+    const hasColor = hasAuthoredProperty(selection, property, tokenRow)
+        || selectedElements.some((selected) => !isEmptyColorValue(getStateStyleValue(selected, property)));
+    const visibility = useFieldVisibility(selectedElements, property, hasColor);
+    const showTokenField = visibility.visible;
     function handleRemoveColor() {
         setStyle(target, property, "transparent");
-        setFieldAdded(false);
-        setBackgroundRemoved(property === "background-color");
+        visibility.hide();
         onAfterEdit?.();
     }
-    return (_jsxs("div", { className: `editor`, "data-test": "color-picker", "data-property": property, children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: colorSectionTitle(property) }), showTokenField ? (_jsx(IconButton, { variant: "quiet", label: `Remove ${colorSectionTitle(property)}`, "data-test": "remove-color", className: "color__remove", onClick: handleRemoveColor, children: _jsx(IconMinus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: `Add ${colorSectionTitle(property)}`, "data-test": "add-color", className: "color__add", onClick: () => setFieldAdded(true), children: _jsx(IconPlus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }))] }), showTokenField && (_jsx("div", { className: "color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: property, tokenRow: isEmpty ? null : tokenRow, selection: selection, initialValue: isEmpty ? "" : undefined, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: handleAfterEdit }) }) }))] }));
+    return (_jsxs("div", { className: `editor`, "data-test": "color-picker", "data-property": property, children: [_jsxs("div", { className: "editor__title-row", children: [_jsx("div", { className: "editor__title", children: colorSectionTitle(property) }), showTokenField ? (_jsx(IconButton, { variant: "quiet", label: `Remove ${colorSectionTitle(property)}`, "data-test": "remove-color", className: "color__remove", onClick: handleRemoveColor, children: _jsx(IconMinus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })) : (_jsx(IconButton, { variant: "quiet", label: `Add ${colorSectionTitle(property)}`, "data-test": "add-color", className: "color__add", onClick: visibility.show, children: _jsx(IconPlus, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }))] }), showTokenField && (_jsx("div", { className: "color", children: _jsx(ControlSurface, { children: _jsx(TokenField, { property: property, tokenRow: tokenRow, selection: selection, domElement: el, editTarget: target, entries: allEntries, onAfterEdit: onAfterEdit }) }) }))] }));
 }

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

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } 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";
@@ -11,7 +11,8 @@ export interface GapFieldProps {
     selection?: StyleSelection | null;
     entries: TokenEntry[];
     tokenRows: ResolvedProperty[];
+    leading?: ReactNode;
     onAfterEdit?: () => void;
 }
 /** Renders a gap value with a token chip or the legacy raw-value fallback. */
-export declare function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, }: GapFieldProps): ReactElement;
+export declare function GapField({ property, domElement: el, editTarget, selection, entries, tokenRows, leading, onAfterEdit, }: GapFieldProps): ReactElement;