nudge-ui 0.2.1 → 0.2.2

package/dist/inspector/overlay/spacingGestures.js

@@ -1,6 +1,7 @@
 import { getElementComputedStyle } from "../runtime/domRealm.js";
-const SPACING_DRAG_TARGET_SIZE = 24;
+const SPACING_DRAG_TARGET_SIZE = 16;
 export const SPACING_GUIDE_HANDLE_LENGTH = 40;
+const SPACING_SHIFT_STEP = 8;
 const EPSILON = 0.01;
 function rightOf(rect) {
     return Number.isFinite(rect.right) ? rect.right : rect.left + rect.width;
@@ -87,10 +88,10 @@ const PADDING_CONFIG = {
     bottom: { axis: "horizontal", dragAxis: "y", direction: 1 },
     left: { axis: "vertical", dragAxis: "x", direction: 1 },
 };
-function paddingAffordanceForSide(element, side, allowZero, model = boxModel(element)) {
+function paddingAffordanceForSide(element, side, model = boxModel(element)) {
     const { inner, content, padding } = model;
     const value = padding[side];
-    if (!allowZero && value <= EPSILON)
+    if (value <= EPSILON)
         return null;
     const config = PADDING_CONFIG[side];
     const width = Math.max(0, inner.right - inner.left);
@@ -138,13 +139,13 @@ function paddingAffordanceForSide(element, side, allowZero, model = boxModel(ele
         element,
     };
 }
-function paddingAffordanceAtPoint(element, x, y, allowZero) {
+function paddingAffordanceAtPoint(element, x, y) {
     const model = boxModel(element);
     if (!containsPoint(model.outer, x, y))
         return null;
     const sides = ["top", "right", "bottom", "left"];
     for (const side of sides) {
-        const affordance = paddingAffordanceForSide(element, side, allowZero, model);
+        const affordance = paddingAffordanceForSide(element, side, model);
         if (affordance && containsRectPoint(affordance.hit, x, y))
             return affordance;
     }
@@ -301,7 +302,7 @@ function trackedElementsAtPoint(doc, x, y) {
 export function getSpacingAffordanceAtPoint(doc, x, y) {
     const candidates = trackedElementsAtPoint(doc, x, y);
     for (const element of candidates) {
-        const padding = paddingAffordanceAtPoint(element, x, y, false);
+        const padding = paddingAffordanceAtPoint(element, x, y);
         if (padding)
             return padding;
     }
@@ -310,13 +311,6 @@ export function getSpacingAffordanceAtPoint(doc, x, y) {
         if (gap)
             return gap;
     }
-    // A zero-sized padding region still needs a small draggable edge so users
-    // can establish padding without first typing a value in the inspector.
-    for (const element of candidates) {
-        const padding = paddingAffordanceAtPoint(element, x, y, true);
-        if (padding)
-            return padding;
-    }
     return null;
 }
 /** Re-resolves a renderer-reported spacing descriptor in its owner document. */
@@ -325,7 +319,7 @@ export function getSpacingAffordanceForDescriptor(element, descriptor) {
         const side = descriptor.side;
         if (!side || descriptor.property !== `padding-${side}`)
             return null;
-        return paddingAffordanceForSide(element, side, true);
+        return paddingAffordanceForSide(element, side);
     }
     if (descriptor.property !== "row-gap" && descriptor.property !== "column-gap")
         return null;
@@ -335,10 +329,14 @@ export function getSpacingAffordanceForDescriptor(element, descriptor) {
     const guide = gapGuide(segment);
     return gapAffordanceAtPoint(element, guide.left + guide.width / 2, guide.top + guide.height / 2, descriptor.property);
 }
-/** Calculates the pixel value represented by a direct-manipulation drag. */
-export function spacingValueForDrag(affordance, start, point) {
+/** Calculates a direct-manipulation value, optionally stepping changes by 8px. */
+export function spacingValueForDrag(affordance, start, point, shiftKey = false) {
     const delta = affordance.dragAxis === "x" ? point.x - start.x : point.y - start.y;
-    return Math.max(0, Math.round(affordance.value + delta * affordance.direction));
+    const signedDelta = delta * affordance.direction;
+    const adjustedDelta = shiftKey
+        ? Math.trunc(signedDelta / SPACING_SHIFT_STEP) * SPACING_SHIFT_STEP
+        : signedDelta;
+    return Math.max(0, Math.round(affordance.value + adjustedDelta));
 }
 export function spacingValueCss(value) {
     return `${Math.max(0, Math.round(value))}px`;

package/dist/inspector/runtime/runtimeConfig.d.ts

@@ -24,7 +24,7 @@ export interface NudgeUiRuntimeCapabilities {
     readonly canvas: boolean;
     /** Whether framework component inspection and prop overrides are available. */
     readonly componentSemantics: boolean;
-    /** Whether the experimental DOM navigation section is available. */
+    /** Whether the DOM navigator overlay is available. */
     readonly domNavigation?: boolean;
     /**
      * Source-coordinate precision policy for prompts; every source site is

package/dist/inspector/selection/hierarchy.d.ts

@@ -3,5 +3,11 @@ export interface DescendantNode {
     element: HTMLElement;
     depth: number;
 }
+export interface NavigationNode {
+    element: HTMLElement;
+    direction: "up" | "down";
+    depth: number;
+}
 /** Returns the nearest tracked descendants, breadth-first and document-ordered. */
 export declare function computeDescendants(el: HTMLElement, maxDepth?: number, maxNodes?: number): DescendantNode[];
+export declare function computeNavigationNodes(el: HTMLElement, hierarchy?: HTMLElement[]): NavigationNode[];

package/dist/inspector/selection/hierarchy.js

@@ -40,3 +40,11 @@ export function computeDescendants(el, maxDepth = 2, maxNodes = 2) {
         .sort((left, right) => left.depth - right.depth || left.order - right.order);
     return descendants.slice(0, maxNodes).map(({ element, depth }) => ({ element, depth }));
 }
+export function computeNavigationNodes(el, hierarchy = computeHierarchy(el)) {
+    const children = computeDescendants(el, 2, 2);
+    const parents = hierarchy.slice(1, (children.length > 0 ? 2 : 4) + 1);
+    return [
+        ...parents.map((element, index) => ({ element, direction: "up", depth: index + 1 })),
+        ...children.map(({ element, depth }) => ({ element, direction: "down", depth })),
+    ];
+}

package/dist/inspector/settings/SettingsDialog.d.ts

@@ -9,4 +9,4 @@ export interface SettingsDialogProps extends McpConnectionContentProps {
     readonly onOpenChange: (open: boolean) => void;
 }
 /** Provides one settings surface for prompt, MCP, and token configuration. */
-export declare function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onDisconnect, onCheckAgain, }: SettingsDialogProps): ReactElement;
+export declare function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onTakeOver, onDisconnect, onCheckAgain, }: SettingsDialogProps): ReactElement;

package/dist/inspector/settings/SettingsDialog.js

@@ -33,7 +33,7 @@ function portalContainer() {
         : null;
 }
 /** Provides one settings surface for prompt, MCP, and token configuration. */
-export function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onDisconnect, onCheckAgain, }) {
+export function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onTakeOver, onDisconnect, onCheckAgain, }) {
     const [activeSection, setActiveSection] = useState(initialSection);
     const closeRef = useRef(null);
     const instructionsRef = useRef(null);
@@ -52,5 +52,5 @@ export function SettingsDialog({ open, initialSection, value, onValueChange, onO
         if (open)
             setActiveSection(initialSection);
     }, [initialSection, open]);
-    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "settings__backdrop", "data-test": "settings-backdrop" }), _jsxs(Dialog.Popup, { className: "settings__popup", "data-test": "settings-dialog", initialFocus: closeRef, children: [_jsx(Dialog.Title, { className: "settings__visually-hidden", children: "Settings" }), _jsx(Dialog.Description, { className: "settings__visually-hidden", children: "Configure how Nudge connects to your coding agent and uses your design system." }), _jsx(Dialog.Close, { ref: closeRef, className: "icon-button icon-button--quiet settings__close", "aria-label": "Close settings", "data-test": "settings-close", type: "button", children: _jsx(IconX, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "settings__body", children: [_jsxs("nav", { className: "settings__nav", "aria-label": "Settings sections", children: [_jsx("span", { className: "settings__nav-label", children: "Settings" }), _jsx("div", { className: "settings__nav-items", children: SETTINGS_SECTIONS.map((section) => (_jsxs("button", { className: `settings__nav-item${activeSection === section.id ? " settings__nav-item--active" : ""}`, "data-test": `settings-nav-${section.id}`, type: "button", "aria-current": activeSection === section.id ? "page" : undefined, onClick: () => setActiveSection(section.id), children: [section.icon, _jsx("span", { className: "settings__nav-item-label", children: section.label })] }, section.id))) })] }), _jsxs("main", { className: "settings__content", "data-test": "settings-content", children: [activeSection === "instructions" ? (_jsxs("section", { className: "settings__section", "data-test": "prompt-settings-dialog", "data-settings-section": "instructions", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "These instructions are added to the end of every copied prompt." }), _jsx(PromptSettingsFields, { value: value, onChange: onValueChange, instructionsRef: instructionsRef })] })) : null, activeSection === "mcp" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-mcp", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("div", { "data-test": "mcp-connection-dialog", children: _jsx(McpConnectionContent, { projectId: projectId, origin: origin, snapshot: snapshot, onConnect: onConnect, onDisconnect: onDisconnect, onCheckAgain: onCheckAgain }) })] })) : null, activeSection === "tokens" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-tokens", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "Inspect and edit the design tokens available in this page." }), _jsx(TokensPanel, { rows: tokenRows })] })) : null] })] })] })] }) }));
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "settings__backdrop", "data-test": "settings-backdrop" }), _jsxs(Dialog.Popup, { className: "settings__popup", "data-test": "settings-dialog", initialFocus: closeRef, children: [_jsx(Dialog.Title, { className: "settings__visually-hidden", children: "Settings" }), _jsx(Dialog.Description, { className: "settings__visually-hidden", children: "Configure how Nudge connects to your coding agent and uses your design system." }), _jsx(Dialog.Close, { ref: closeRef, className: "icon-button icon-button--quiet settings__close", "aria-label": "Close settings", "data-test": "settings-close", type: "button", children: _jsx(IconX, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "settings__body", children: [_jsxs("nav", { className: "settings__nav", "aria-label": "Settings sections", children: [_jsx("span", { className: "settings__nav-label", children: "Settings" }), _jsx("div", { className: "settings__nav-items", children: SETTINGS_SECTIONS.map((section) => (_jsxs("button", { className: `settings__nav-item${activeSection === section.id ? " settings__nav-item--active" : ""}`, "data-test": `settings-nav-${section.id}`, type: "button", "aria-current": activeSection === section.id ? "page" : undefined, onClick: () => setActiveSection(section.id), children: [section.icon, _jsx("span", { className: "settings__nav-item-label", children: section.label })] }, section.id))) })] }), _jsxs("main", { className: "settings__content", "data-test": "settings-content", children: [activeSection === "instructions" ? (_jsxs("section", { className: "settings__section", "data-test": "prompt-settings-dialog", "data-settings-section": "instructions", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "These instructions are added to the end of every copied prompt." }), _jsx(PromptSettingsFields, { value: value, onChange: onValueChange, instructionsRef: instructionsRef })] })) : null, activeSection === "mcp" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-mcp", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("div", { "data-test": "mcp-connection-dialog", children: _jsx(McpConnectionContent, { projectId: projectId, origin: origin, snapshot: snapshot, onConnect: onConnect, onTakeOver: onTakeOver, onDisconnect: onDisconnect, onCheckAgain: onCheckAgain }) })] })) : null, activeSection === "tokens" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-tokens", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "Inspect and edit the design tokens available in this page." }), _jsx(TokensPanel, { rows: tokenRows })] })) : null] })] })] })] }) }));
 }

package/dist/inspector/shell/ChangesLog.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useSyncExternalStore } from "react";
-import { IconChevronDown } from "@tabler/icons-react";
 import { isElementChange, useChanges, revertChange } from "../changes/changesLog.js";
 import { StaleChangeIndicator } from "../canvas/StaleChangeIndicator.js";
 import { Button } from "../ui/Button.js";
+import { Disclosure } from "../ui/Disclosure.js";
 import { presentChange } from "../changes/presentation.js";
 import { getStructuralChanges, getStructuralChangeDiagnostics, getStructuralDiagnosticRevision, revertStructuralChange, subscribeStructuralChanges, subscribeStructuralDiagnostics, } from "../projection/structuralProjection.js";
 import { getRenderedInstanceChangeDiagnostics, getRenderedInstanceDiagnosticRevision, subscribeRenderedInstanceDiagnostics, } from "../projection/renderedInstance.js";
@@ -74,23 +74,23 @@ export function ChangesLog({ onClearSession }) {
     const total = changes.length + structuralChanges.length + sketches.length;
     if (total === 0 && sketchStore.error === null)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsxs("details", { className: "changes", "data-test": "changes-log", children: [_jsxs("summary", { className: "changes__title", "data-test": "changes-toggle", children: [_jsx("span", { className: "changes__title-label", children: "Changes" }), total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, _jsx(IconChevronDown, { className: "changes__toggle-icon", size: 15, stroke: 2, "aria-hidden": "true" })] }), _jsx("div", { className: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 && sketches.length === 0 && sketchStore.error === null ? (_jsx("div", { className: "changes__empty", "data-test": "changes-empty", children: "No changes yet" })) : (_jsxs(_Fragment, { children: [groups.map((group) => (_jsxs("div", { className: "changes__group", "data-test": "changes-group", "data-cid": group.label, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: group.label }), _jsx("span", { className: "changes__group-file", children: group.file })] }), group.changes.map((change, i) => {
-                                            const presentation = presentChange(change);
-                                            const instanceDiagnostics = isElementChange(change) && change.scope === "rendered-instance"
-                                                && change.instanceOverride
-                                                ? getRenderedInstanceChangeDiagnostics(change.instanceOverride.id)
-                                                : [];
-                                            const textDiagnostics = change.kind === "text-content"
-                                                ? getTextContentChangeDiagnostics(change.id)
-                                                : [];
-                                            return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "change-revert", "data-property": presentation.property, onClick: () => revertChange(change), children: "Revert" })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
-                                        })] }, group.key))), structuralChanges.map((change) => (_jsxs("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__group-file", children: sourceFile(change) })] }), _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
-                                                                ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
-                                                                    ? `${change.presentation.sourceParentTag} position ${change.presentation.fromIndex + 1}`
-                                                                    : `${structuralParentLabel(change, "source")} position ${change.presentation.fromIndex + 1}`
-                                                                : "Visible" }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: change.kind === "move"
-                                                                ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
-                                                                    ? `${change.presentation.destinationParentTag} position ${change.presentation.toIndex + 1}`
-                                                                    : `${structuralParentLabel(change, "destination")} position ${change.presentation.toIndex + 1}`
-                                                                : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "dom-change-revert", onClick: () => revertStructuralChange(change.id), children: "Revert" })] })] }, change.id))), _jsx(SketchChanges, {})] })) })] }), onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Disclosure, { className: "changes", "data-test": "changes-log", triggerDataTest: "changes-toggle", title: "Changes", badge: total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, panelClassName: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 && sketches.length === 0 && sketchStore.error === null ? (_jsx("div", { className: "changes__empty", "data-test": "changes-empty", children: "No changes yet" })) : (_jsxs(_Fragment, { children: [groups.map((group) => (_jsxs("div", { className: "changes__group", "data-test": "changes-group", "data-cid": group.label, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: group.label }), _jsx("span", { className: "changes__group-file", children: group.file })] }), group.changes.map((change, i) => {
+                                    const presentation = presentChange(change);
+                                    const instanceDiagnostics = isElementChange(change) && change.scope === "rendered-instance"
+                                        && change.instanceOverride
+                                        ? getRenderedInstanceChangeDiagnostics(change.instanceOverride.id)
+                                        : [];
+                                    const textDiagnostics = change.kind === "text-content"
+                                        ? getTextContentChangeDiagnostics(change.id)
+                                        : [];
+                                    return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "change-revert", "data-property": presentation.property, onClick: () => revertChange(change), children: "Revert" })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
+                                })] }, group.key))), structuralChanges.map((change) => (_jsxs("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__group-file", children: sourceFile(change) })] }), _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
+                                                        ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
+                                                            ? `${change.presentation.sourceParentTag} position ${change.presentation.fromIndex + 1}`
+                                                            : `${structuralParentLabel(change, "source")} position ${change.presentation.fromIndex + 1}`
+                                                        : "Visible" }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: change.kind === "move"
+                                                        ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
+                                                            ? `${change.presentation.destinationParentTag} position ${change.presentation.toIndex + 1}`
+                                                            : `${structuralParentLabel(change, "destination")} position ${change.presentation.toIndex + 1}`
+                                                        : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "dom-change-revert", onClick: () => revertStructuralChange(change.id), children: "Revert" })] })] }, change.id))), _jsx(SketchChanges, {})] })) }), onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
 }

package/dist/inspector/shell/CopyPromptButton.js

@@ -224,12 +224,19 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
     function openMcpConnection() {
         openSettings("mcp");
     }
-    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "data-agent-listening": agentStatus.kind === "listening" ? "true" : undefined, "aria-busy": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, agentStatus.kind === "listening" ? (_jsx("span", { className: "copy-prompt__agent-listening", "data-test": "agent-listening-indicator", role: "status", "aria-label": "Agent listening" })) : null] }), _jsx(SketchLayersPanel, {}), statusAction ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), _jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: openMcpConnection, children: statusAction.label })] }) })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "clipboard-reconciled-hint", role: "status", children: [reconciledCount, " Implemented changes"] })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
+    async function handleAgentStatusAction() {
+        if (statusAction?.kind === "takeover") {
+            await agentClient.takeOver();
+            return;
+        }
+        openMcpConnection();
+    }
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "data-agent-listening": agentStatus.kind === "listening" ? "true" : undefined, "aria-busy": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, agentStatus.kind === "listening" ? (_jsx("span", { className: "copy-prompt__agent-listening", "data-test": "agent-listening-indicator", role: "status", "aria-label": "Agent listening" })) : null] }), _jsx(SketchLayersPanel, {}), statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "clipboard-reconciled-hint", role: "status", children: [reconciledCount, " Implemented changes"] })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
                             void copyToClipboard(sketchFallback.prompt).then(() => {
                                 if (changes.length > 0 || structuralChanges.length > 0) {
                                     recordClipboardHandoff(changes, structuralChanges);
                                 }
                                 setSketchFallback(null);
                             }).catch(() => undefined);
-                        }, children: "Copy prompt" })] })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
+                        }, children: "Copy prompt" })] })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onTakeOver: () => agentClient.takeOver(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
 }

package/dist/inspector/shell/InspectorShell.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useState } from "react";
 import { IconLayoutSidebarRight, IconSettings } from "@tabler/icons-react";
 import { useInspectorOpen, toggleInspector, setInspectorOpen } from "./openStore.js";
-import { useSelectedElement, useSelectedElements, useHierarchy, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
+import { useSelectedElement, useSelectedElements, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
 import { findTokenRow } from "../styleEditors/rowLookup.js";
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
@@ -40,7 +40,6 @@ import { ComponentPropsSection } from "../componentSemantics/ComponentPropsSecti
 import { cancelInlineTextEdit, isInlineTextEditingActive, useInlineTextDiagnostic, } from "../inline-text/inlineTextEditor.js";
 import { getInlineTextFeedback } from "../inline-text/inlineTextFeedback.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
-import { DomNavigation } from "./DomNavigation.js";
 import { EmptyState } from "./EmptyState.js";
 import { createStyleSelection } from "../selection/styleSelection.js";
 import { intersectTokenEntries } from "../inspection/selectionProperty.js";
@@ -90,7 +89,6 @@ function scopeMutationAffectsSelection(records, selected) {
 export function InspectorShell() {
     const isOpen = useInspectorOpen();
     const runtimeConfig = useNudgeUiRuntimeConfig();
-    const domNavigationEnabled = runtimeConfig.capabilities.domNavigation === true;
     const sketchEnabled = isNudgeUiDev() && !isDemoRuntime();
     const sketchActive = useSketchInteractionActive();
     const selectedCardId = useSelectedCardId();
@@ -98,7 +96,6 @@ export function InspectorShell() {
     const sketchHost = selectedCardId || focusedCardId ? getActiveCanvasFrame() : null;
     const selected = useSelectedElement();
     const selectedElements = useSelectedElements();
-    const hierarchy = useHierarchy();
     const inlineTextFeedback = getInlineTextFeedback(useInlineTextDiagnostic());
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [settingsSection, setSettingsSection] = useState("instructions");
@@ -246,7 +243,7 @@ export function InspectorShell() {
     return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "-8px" }, onClick: () => {
                                             cancelInlineTextEdit();
                                             setInspectorOpen(false);
-                                        }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(PeekOriginalButton, {}), _jsx(IconButton, { variant: "quiet", label: "Settings", title: "Settings", "data-test": "settings-button", onClick: () => openSettings("instructions"), children: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, selected ? (_jsxs(_Fragment, { children: [domNavigationEnabled && !isMultiSelection ? _jsx(DomNavigation, { selected: selected, hierarchy: hierarchy }) : null, isMultiSelection || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [isMultiSelection ? (_jsx("div", { className: "selection__summary", "data-test": "multi-selection-summary", children: _jsxs("span", { className: "selection__count", children: [selectedElements.length, " elements selected"] }) })) : null, hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
+                                        }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(PeekOriginalButton, {}), _jsx(IconButton, { variant: "quiet", label: "Settings", title: "Settings", "data-test": "settings-button", onClick: () => openSettings("instructions"), children: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, selected ? (_jsxs(_Fragment, { children: [isMultiSelection || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [isMultiSelection ? (_jsx("div", { className: "selection__summary", "data-test": "multi-selection-summary", children: _jsxs("span", { className: "selection__count", children: [selectedElements.length, " elements selected"] }) })) : null, hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
                                                                 const overrideId = relinkElement(selected.domElement);
                                                                 if (overrideId)
                                                                     discardChangesForInstanceOverride(overrideId);

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/SpacingBox.js

@@ -35,10 +35,11 @@ export function SpacingField({ property, projection: spacingProjection, domEleme
     const sideSlots = SIDE_NAMES.map((side) => {
         const icon = property === "padding" ? _jsx(PaddingSideIndicator, { side: side }) : _jsx(MarginSideIndicator, { side: side });
         const sideName = sideProperty(property, side);
+        const field = spacingProjection.fields[side];
         return {
             side,
             icon: null,
-            control: (_jsx(TokenField, { property: sideName, selection: selection, tokenRow: findTokenRow(tokenRows, sideName), domElement: el, editTarget: editTarget, entries: entries, suggestions: suggestions, editMetadata: metadataFor(findTokenRow(tokenRows, sideName)), onAfterEdit: onAfterEdit, chipVariant: "small", leading: icon })),
+            control: (_jsx(TokenField, { property: sideName, selection: selection, tokenRow: findTokenRow(tokenRows, sideName), domElement: el, editTarget: editTarget, entries: entries, suggestions: suggestions, displayValue: isCalcValue(field.authoredValue) && field.value ? field.value : undefined, editMetadata: metadataFor(findTokenRow(tokenRows, sideName)), onAfterEdit: onAfterEdit, chipVariant: "small", leading: icon })),
         };
     });
     const hasSpacing = SIDE_NAMES.some((side) => {
@@ -89,7 +90,8 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
     const expression = Boolean(row && (row.capability === "raw" || row.capability === "composite"
         || row.modifiers?.some((modifier) => modifier.kind === "alpha")));
     const calcAuthored = row?.authored ?? row?.declaredValue ?? "";
-    const activeTokenName = !valuesMatch || expression || /\bcalc\s*\(/i.test(calcAuthored) ? null : row.tokenName;
+    const isCalcAuthored = isCalcValue(calcAuthored);
+    const activeTokenName = !valuesMatch || expression || isCalcAuthored ? null : row.tokenName;
     // Some browsers expose the used pixel size for horizontal auto margins.
     // Keep the authored keyword visible because replacing it with that transient
     // size would misrepresent the declaration and change the edit semantics.
@@ -98,7 +100,7 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
         : valuesMatch
             ? calcAuthored.trim().toLowerCase() === "auto"
                 ? calcAuthored.trim()
-                : expression ? row.authored || row.declaredValue || row.resolvedValue : row.resolvedValue
+                : isCalcAuthored ? row.resolvedValue : expression ? row.authored || row.declaredValue || row.resolvedValue : row.resolvedValue
             : axisProjection.fields.map(fieldDisplayValue).join(", ");
     const resolvedValue = valuesMatch
         ? row.resolvedValue
@@ -126,7 +128,10 @@ function PairedTokenField({ displayProperty, sideProperties, domElement: el, edi
         }, onUnlink: commitAxisValue, leading: leading }));
 }
 function fieldDisplayValue(field) {
-    return field.authoredValue.trim() || field.value;
+    return isCalcValue(field.authoredValue) ? field.value : field.authoredValue.trim() || field.value;
+}
+function isCalcValue(value) {
+    return /\bcalc\s*\(/i.test(value);
 }
 function splitAxisValue(value) {
     let depth = 0;

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

@@ -7,10 +7,10 @@ export declare function nudgeCssValue(property: string, rawValue: string, direct
 /** Returns whether a style field exposes the horizontal drag nudge affordance. */
 export declare function supportsDragNudge(property: string): boolean;
 /**
- * Applies one nudge per two horizontal pointer pixels. Large nudges still use
- * one 8px step per pointer pixel. When a large drag starts from an off-grid
- * value, the first step snaps to the next large-step boundary in the drag
- * direction.
+ * Applies one regular nudge per four horizontal pointer pixels and one large
+ * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * off-grid value, the first step snaps to the next large-step boundary in the
+ * drag direction.
  */
 export declare function nudgeCssValueByDrag(property: string, rawValue: string, deltaX: number, large?: boolean, snapToLargeStep?: boolean): string | null;
 /** Returns whether a field has a numeric value that can respond to dragging. */

package/dist/inspector/styleEditors/nudgeValue.js

@@ -2,6 +2,8 @@ import { completeCssValue, CSS_NUMBER_SOURCE } from "./completeCssValue.js";
 import { valuePolicyFor } from "./valuePolicy.js";
 const CSS_NUMBER = new RegExp(`^(?:${CSS_NUMBER_SOURCE})$`, "i");
 const CSS_NUMERIC_LITERAL = new RegExp(`^(${CSS_NUMBER_SOURCE})(px|rem|em|%)?$`, "i");
+const DRAG_PIXELS_PER_STEP = 4;
+const LARGE_DRAG_PIXELS_PER_STEP = 2;
 const DRAG_NUDGE_PROPERTY = /^(?:(?:padding|margin)-(?:top|right|bottom|left|horizontal|vertical)|(?:top|right|bottom|left|inset|inset-(?:horizontal|vertical))|(?:row|column)-gap|border-radius|border-(?:top-left|top-right|bottom-right|bottom-left)-radius)$/;
 /**
  * Returns a nudged CSS numeric literal, or null when the value is not a
@@ -23,13 +25,13 @@ export function supportsDragNudge(property) {
     return DRAG_NUDGE_PROPERTY.test(property);
 }
 /**
- * Applies one nudge per two horizontal pointer pixels. Large nudges still use
- * one 8px step per pointer pixel. When a large drag starts from an off-grid
- * value, the first step snaps to the next large-step boundary in the drag
- * direction.
+ * Applies one regular nudge per four horizontal pointer pixels and one large
+ * nudge per two horizontal pointer pixels. When a large drag starts from an
+ * off-grid value, the first step snaps to the next large-step boundary in the
+ * drag direction.
  */
 export function nudgeCssValueByDrag(property, rawValue, deltaX, large = false, snapToLargeStep = false) {
-    const steps = Math.trunc(Math.abs(deltaX) / (large ? 1 : 2));
+    const steps = Math.trunc(Math.abs(deltaX) / (large ? LARGE_DRAG_PIXELS_PER_STEP : DRAG_PIXELS_PER_STEP));
     if (steps === 0)
         return null;
     const direction = deltaX < 0 ? -1 : 1;
@@ -52,8 +54,8 @@ export function nudgeCssValueByDrag(property, rawValue, deltaX, large = false, s
 }
 /** Returns whether a field has a numeric value that can respond to dragging. */
 export function canNudgeCssValueByDrag(property, rawValue) {
-    return nudgeCssValueByDrag(property, rawValue, 2) !== null
-        || nudgeCssValueByDrag(property, rawValue, -2) !== null;
+    return nudgeCssValueByDrag(property, rawValue, DRAG_PIXELS_PER_STEP) !== null
+        || nudgeCssValueByDrag(property, rawValue, -DRAG_PIXELS_PER_STEP) !== null;
 }
 /** Returns a clamped opacity percentage nudged by 1%, or 10% with Shift. */
 export function nudgeOpacityValue(rawValue, direction, large = false) {

package/dist/inspector/tokens/TokenField.js

@@ -13,6 +13,8 @@ import { ColorSwatch } from "../ui/ColorSwatch.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { AtRuleIndicator, useFieldAtRules } from "../ui/AtRuleContext.js";
 import { TokenChip } from "./TokenChip.js";
+import { startDragPointerLock } from "./dragPointerLock.js";
+import { createChangeHistoryGroup } from "../changes/workspaceChanges.js";
 import { isMultiTarget } from "../selection/editTarget.js";
 const NON_COLOR_FACTS = { hasEmbeddedAlpha: false, isExpression: false, opacityEditable: false };
 function colorFacts(value) {
@@ -318,8 +320,9 @@ export function TokenValueField(props) {
         const drag = dragNudgeRef.current;
         if (!drag)
             return;
-        releasePointerCapture(drag);
         dragNudgeRef.current = null;
+        drag.pointerLock?.stop();
+        releasePointerCapture(drag);
         setIsDraggingNudge(false);
     }, []);
     useEffect(() => {
@@ -331,6 +334,8 @@ export function TokenValueField(props) {
         };
     }, [stopDragNudge]);
     function handleDragNudgePointerDown(event) {
+        if (event.button !== 0)
+            return;
         if (disabled || !supportsDragNudge(property))
             return;
         if (!canNudgeCssValueByDrag(property, rawValue))
@@ -338,6 +343,7 @@ export function TokenValueField(props) {
         stopDragNudge();
         const handle = event.currentTarget;
         const drag = {
+            commit: createChangeHistoryGroup(),
             handle,
             pointerId: event.pointerId,
             lastClientX: event.clientX,
@@ -350,6 +356,11 @@ export function TokenValueField(props) {
         dragNudgeRef.current = drag;
         if (typeof handle.setPointerCapture === "function")
             handle.setPointerCapture(event.pointerId);
+        if (event.pointerType === "mouse") {
+            drag.pointerLock = startDragPointerLock(handle, { x: event.clientX, y: event.clientY }, (mouseEvent) => {
+                updateDragNudge(mouseEvent, mouseEvent.movementX);
+            }, stopDragNudge);
+        }
         setIsDraggingNudge(true);
         event.preventDefault();
         event.stopPropagation();
@@ -358,8 +369,16 @@ export function TokenValueField(props) {
         const drag = dragNudgeRef.current;
         if (!drag || drag.pointerId !== event.pointerId)
             return;
+        if (drag.pointerLock?.isLocked())
+            return;
         const movementX = event.clientX - drag.lastClientX;
         drag.lastClientX = event.clientX;
+        updateDragNudge(event, movementX);
+    }
+    function updateDragNudge(event, movementX) {
+        const drag = dragNudgeRef.current;
+        if (!drag)
+            return;
         if (event.shiftKey !== drag.shiftActive) {
             drag.shiftActive = event.shiftKey;
             drag.startValue = drag.lastValue;
@@ -380,7 +399,7 @@ export function TokenValueField(props) {
         event.stopPropagation();
         setRawValue(next);
         setActiveTokenName(null);
-        onCommitRaw(next);
+        drag.commit(() => onCommitRaw(next));
     }
     function handleDragNudgePointerEnd(event) {
         if (dragNudgeRef.current?.pointerId !== event.pointerId)