nudge-ui 0.2.1 → 0.2.2

package/dist/inspector/canvas/rendererElementSelector.js

@@ -1,5 +1,4 @@
 import { PROTOCOL_VERSION, getRendererIdentity, sendToParent, isKeyboardShortcutCode, } from "./frameProtocol.js";
-import { findClosestAnchor, isEligibleNavigation, hasDifferentRoute, shouldPreserveNativeLinkActivation, } from "./linkEligibility.js";
 import { readBorderWidths, readMargins } from "../overlay/overlayGeometry.js";
 import { installInteractionStyles } from "../overlay/interactionStyles.js";
 import { createFrameThrottle } from "../overlay/frameThrottle.js";
@@ -8,7 +7,7 @@ import { isNudgeUiDev } from "../runtime/devFlag.js";
 import { isEditableEvent, isInspectorToggleShortcut, isSendPromptShortcut } from "../shell/shortcuts.js";
 import { resolveSelectionTarget, selectionTargetMode } from "../selection/selectionTarget.js";
 import { escapeCssString } from "../projection/cssEscapes.js";
-import { blockApplicationClick, isApplicationActivationClick } from "../overlay/clickPolicy.js";
+import { APPLICATION_GESTURE_EVENTS, blockApplicationClick, blockApplicationGesture, isInlineEditorTarget, isUserClick, } from "../overlay/clickPolicy.js";
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
 import { getSpacingAffordanceAtPoint, toSpacingDescriptor, } from "../overlay/spacingGestures.js";
 const REACT_FIBER_KEY = /^__reactFiber\$/;
@@ -78,19 +77,20 @@ export function buildSelector(el) {
 }
 let installed = false;
 const noopDisposal = () => undefined;
-export function installRendererElementSelector() {
+export function installRendererElementSelector(acceptsClick = isUserClick) {
     if (!isNudgeUiDev())
         return noopDisposal;
     if (installed)
         return noopDisposal;
     installed = true;
-    const removeInteractionStyles = installInteractionStyles();
+    let removeInteractionStyles = installInteractionStyles();
     const listenerCleanup = [];
     let disposed = false;
     let interactionsSuspended = false;
     let scrolling = false;
     let scrollSettleTimer = null;
     let activeHoverElement = null;
+    let suppressHoverDuringSpacingDrag = false;
     let lastHoverPoint = null;
     function trackListener(target, type, listener, options) {
         const eventListener = (event) => listener(event);
@@ -187,7 +187,7 @@ export function installRendererElementSelector() {
         sendToParent(msg);
     }
     const hoverUpdate = createFrameThrottle((pending) => {
-        if (disposed || scrolling)
+        if (disposed || scrolling || suppressHoverDuringSpacingDrag)
             return;
         reportHover(pending);
     });
@@ -202,7 +202,7 @@ export function installRendererElementSelector() {
     function resumeHoverAfterScroll() {
         scrollSettleTimer = null;
         scrolling = false;
-        if (disposed || interactionsSuspended || !lastHoverPoint)
+        if (disposed || interactionsSuspended || suppressHoverDuringSpacingDrag || !lastHoverPoint)
             return;
         const target = document.elementFromPoint?.(lastHoverPoint.x, lastHoverPoint.y);
         const element = resolveSelectionTarget(target, lastHoverPoint.mode);
@@ -248,6 +248,8 @@ export function installRendererElementSelector() {
         if (interactionsSuspended)
             return;
         updateMeasureState(event.altKey, true);
+        if (suppressHoverDuringSpacingDrag)
+            return;
         const target = event.target;
         if (!(target instanceof Element))
             return;
@@ -304,26 +306,35 @@ export function installRendererElementSelector() {
         }
         if (interactionsSuspended) {
             cancelActiveDrag();
-            hoverUpdate.cancel();
-            clearSpacingCursor();
+            clearActiveHover();
             if (scrollSettleTimer !== null)
                 window.clearTimeout(scrollSettleTimer);
             scrollSettleTimer = null;
             scrolling = false;
-            activeHoverElement = null;
             updateMeasureState(false, false);
+            removeInteractionStyles?.();
+            removeInteractionStyles = null;
+        }
+        else {
+            removeInteractionStyles ??= installInteractionStyles();
         }
     });
-    const dragMoveUpdate = createFrameThrottle((point) => {
+    const dragMoveUpdate = createFrameThrottle((drag) => {
         if (disposed)
             return;
         const identity = getRendererIdentity();
-        if (!point || !identity)
+        if (!drag || !identity)
             return;
-        const msg = { type: "element-drag-move", protocolVersion: PROTOCOL_VERSION, point, ...identity };
+        const msg = {
+            type: "element-drag-move",
+            protocolVersion: PROTOCOL_VERSION,
+            point: drag.point,
+            shiftKey: drag.shiftKey,
+            ...identity,
+        };
         sendToParent(msg);
     });
-    function sendDragEnd(point, cancelled) {
+    function sendDragEnd(point, cancelled, shiftKey = false) {
         if (!dragging || !point)
             return;
         const identity = getRendererIdentity();
@@ -333,6 +344,7 @@ export function installRendererElementSelector() {
             type: "element-drag-end",
             protocolVersion: PROTOCOL_VERSION,
             point,
+            shiftKey,
             ...(cancelled ? { cancelled: true } : {}),
             ...identity,
         };
@@ -343,6 +355,7 @@ export function installRendererElementSelector() {
         sendDragEnd(lastDragPoint, true);
         pendingDrag = null;
         dragging = false;
+        suppressHoverDuringSpacingDrag = false;
     }
     trackListener(document, "mousedown", (event) => {
         if (interactionsSuspended)
@@ -356,6 +369,11 @@ export function installRendererElementSelector() {
         const spacing = spacingAffordance?.element === element
             ? toSpacingDescriptor(spacingAffordance)
             : null;
+        if (spacing) {
+            suppressHoverDuringSpacingDrag = true;
+            hoverUpdate.cancel();
+            lastHoverPoint = null;
+        }
         const identity = getRendererIdentity();
         // A spacing drag owns the pointer gesture. Do not start an inline-text
         // attempt for the same down event; padding and gaps are intentionally not
@@ -386,6 +404,13 @@ export function installRendererElementSelector() {
         };
         lastDragPoint = { x: event.clientX, y: event.clientY };
     }, true);
+    for (const type of APPLICATION_GESTURE_EVENTS) {
+        trackListener(document, type, (event) => {
+            if (interactionsSuspended || !acceptsClick(event) || isInlineEditorTarget(event.target))
+                return;
+            blockApplicationGesture(event);
+        }, true);
+    }
     trackListener(document, "mousemove", (event) => {
         if (!pendingDrag) {
             if (interactionsSuspended)
@@ -419,12 +444,13 @@ export function installRendererElementSelector() {
                 elementId: cidIndex.elementId(pendingDrag.element), point,
                 startPoint: pendingDrag.point,
                 spacing: pendingDrag.spacing,
+                shiftKey: event.shiftKey,
                 ...identity,
             };
             sendToParent(msg);
         }
         else {
-            dragMoveUpdate.schedule(point);
+            dragMoveUpdate.schedule({ point, shiftKey: event.shiftKey });
         }
     }, true);
     function finishDrag(event) {
@@ -433,10 +459,11 @@ export function installRendererElementSelector() {
             event.preventDefault();
             const point = { x: event.clientX, y: event.clientY };
             lastDragPoint = point;
-            sendDragEnd(point, false);
+            sendDragEnd(point, false, event.shiftKey);
         }
         pendingDrag = null;
         dragging = false;
+        suppressHoverDuringSpacingDrag = false;
     }
     trackListener(document, "mouseup", finishDrag, true);
     function forwardKeyboardShortcut(event, phase) {
@@ -470,7 +497,10 @@ export function installRendererElementSelector() {
         sendToParent(message);
         return phase === "keydown";
     }
-    trackListener(document, "keydown", (event) => {
+    // Global tool shortcuts need to run before application capture handlers on
+    // the iframe document. A page-level window handler can otherwise stop the
+    // event before it reaches the document listener.
+    trackListener(window, "keydown", (event) => {
         if (isEditableEvent(event))
             return;
         if (forwardKeyboardShortcut(event, "keydown"))
@@ -554,7 +584,7 @@ export function installRendererElementSelector() {
         };
         sendToParent(msg);
     }, true);
-    trackListener(document, "keyup", (event) => {
+    trackListener(window, "keyup", (event) => {
         forwardKeyboardShortcut(event, "keyup");
         if (event.key === "Alt")
             updateMeasureState(false, measurePointerOverPage);
@@ -612,36 +642,20 @@ export function installRendererElementSelector() {
         sendToParent(message);
     }, true);
     trackListener(document, "click", (event) => {
-        if (interactionsSuspended)
+        if (interactionsSuspended || !acceptsClick(event))
             return;
         const target = event.target;
         if (!(target instanceof Element))
             return;
-        // Defer to navigation-intent when the user clicked a navigable same-origin
-        // anchor that points to a different route. The later listener reports the
-        // intent to the controller while leaving native or framework navigation in
-        // charge of the live application document.
-        const anchor = findClosestAnchor(target);
-        if (anchor && isEligibleNavigation(anchor, event) && hasDifferentRoute(anchor)) {
-            return;
-        }
-        // Command/Ctrl+Shift-click is the deliberate escape hatch for running
-        // the application action. All other selected canvas clicks are editing
-        // gestures and must not reach the rendered application.
-        if (isApplicationActivationClick(event))
-            return;
-        const preserveNativeLink = anchor
-            ? shouldPreserveNativeLinkActivation(anchor, event)
-            : false;
+        // Design-tool clicks are editing gestures and must not reach the
+        // rendered application; the Select tool is how the app receives them.
         const el = resolveSelectionTarget(target, selectionTargetMode(event));
         if (!el) {
-            if (!preserveNativeLink)
-                blockApplicationClick(event);
+            blockApplicationClick(event);
             return;
         }
         lastSelected = el;
-        if (!preserveNativeLink)
-            blockApplicationClick(event);
+        blockApplicationClick(event);
         const cid = el.getAttribute("data-cid");
         const selector = buildSelector(el);
         const { file, line, component, src } = getFiberInfo(el);
@@ -676,11 +690,13 @@ export function installRendererElementSelector() {
         for (const cleanup of listenerCleanup)
             cleanup();
         listenerCleanup.length = 0;
-        removeInteractionStyles();
+        removeInteractionStyles?.();
+        removeInteractionStyles = null;
         lastSelected = null;
         activeHoverElement = null;
         lastHoverPoint = null;
         scrolling = false;
+        suppressHoverDuringSpacingDrag = false;
         measurePointerOverPage = false;
         measureAltKey = false;
         document.documentElement.removeAttribute("data-nudge-ui-panel");

package/dist/inspector/changes/workspaceChanges.d.ts

@@ -31,6 +31,10 @@ export interface WorkspaceChangeStore {
     restoreWorkspaceChanges(next: WorkspaceContents): void;
     clearWorkspaceChanges(): void;
 }
+/** Groups consecutive synchronous updates from one gesture into one undo step.
+ * Updates outside the callback keep their own history entries.
+ */
+export declare function createChangeHistoryGroup(): (update: () => void) => void;
 export declare const workspaceChangeStore: WorkspaceChangeStore;
 /** Compatibility accessors retained for callers that have not adopted the store seam. */
 export declare function getWorkspaceChanges(): WorkspaceChangesSnapshot;

package/dist/inspector/changes/workspaceChanges.js

@@ -5,6 +5,7 @@ let contents = { changes: [], structuralChanges: [] };
 let revision = 0;
 let undoStack = [];
 let redoStack = [];
+let activeHistoryGroup;
 let snapshot = createSnapshot();
 const listeners = new Set();
 function cloneContents(value) {
@@ -60,11 +61,36 @@ function commit(next) {
         return false;
     const before = cloneContents(contents);
     contents = cloneContents(next);
-    undoStack.push({ before, after: cloneContents(contents) });
+    const previous = undoStack.at(-1);
+    const entry = {
+        before: activeHistoryGroup && previous?.group === activeHistoryGroup ? previous.before : before,
+        after: cloneContents(contents),
+        group: activeHistoryGroup,
+    };
+    if (activeHistoryGroup && previous?.group === activeHistoryGroup)
+        undoStack.pop();
+    if (!sameWorkspaceContents(entry.before, entry.after))
+        undoStack.push(entry);
     redoStack = [];
     publish();
     return true;
 }
+/** Groups consecutive synchronous updates from one gesture into one undo step.
+ * Updates outside the callback keep their own history entries.
+ */
+export function createChangeHistoryGroup() {
+    const group = Symbol("change-history-group");
+    return (update) => {
+        const previous = activeHistoryGroup;
+        activeHistoryGroup = group;
+        try {
+            update();
+        }
+        finally {
+            activeHistoryGroup = previous;
+        }
+    };
+}
 function getSnapshot() {
     return snapshot;
 }
@@ -123,7 +149,7 @@ function reconcileWorkspaceChangesImpl(verifiedKeys, verifiedStructuralIds) {
         return 0;
     contents = next;
     const prune = (entries) => entries
-        .map((entry) => ({ before: retain(entry.before), after: retain(entry.after) }))
+        .map((entry) => ({ group: entry.group, before: retain(entry.before), after: retain(entry.after) }))
         .filter((entry) => !sameWorkspaceContents(entry.before, entry.after));
     undoStack = prune(undoStack);
     redoStack = prune(redoStack);
@@ -159,7 +185,7 @@ function redoWorkspaceChangeImpl() {
         return false;
     redoStack.pop();
     contents = cloneContents(entry.after);
-    undoStack.push(entry);
+    undoStack.push({ before: entry.before, after: entry.after });
     publish();
     return true;
 }

package/dist/inspector/clientManifest.d.ts

@@ -24,6 +24,8 @@ export interface NudgeUiClientManifest {
         readonly strategy: "refresh-manifest" | "reload-document";
         readonly events?: readonly string[];
     };
+    /** Set by `NUDGE_UI=1`: automated browsers open the editor instead of the plain app. */
+    readonly inspectAutomatedBrowsers?: true;
 }
 /** Parses and normalizes an external manifest before it replaces inspector state. */
 export declare function parseNudgeUiClientManifest(value: unknown): NudgeUiClientManifest | null;

package/dist/inspector/clientManifest.js

@@ -23,6 +23,7 @@ value) {
             ...(isAgentBridge(value.agentBridge) ? { agentBridge: value.agentBridge } : {}),
             ...(value.document === undefined ? {} : { document: value.document }),
             ...(value.reload === undefined ? {} : { reload: value.reload }),
+            ...(value.inspectAutomatedBrowsers === true ? { inspectAutomatedBrowsers: true } : {}),
         };
     }
     catch {

package/dist/inspector/index.js

@@ -208,14 +208,12 @@ export function mountInspector(host) {
     const demo = isDemoRuntime();
     if (!demo && !hasWriteLease())
         return;
-    if (host.dataset.nudgeUiDebug === "true") {
-        const runtimeConfig = getNudgeUiRuntimeConfig();
-        if (runtimeConfig.capabilities.domNavigation !== true) {
-            configureNudgeUiRuntime({
-                ...runtimeConfig,
-                capabilities: { ...runtimeConfig.capabilities, domNavigation: true },
-            });
-        }
+    const runtimeConfig = getNudgeUiRuntimeConfig();
+    if (runtimeConfig.capabilities.domNavigation !== true) {
+        configureNudgeUiRuntime({
+            ...runtimeConfig,
+            capabilities: { ...runtimeConfig.capabilities, domNavigation: true },
+        });
     }
     if (lockedRoot) {
         lockedRoot.unmount();

package/dist/inspector/overlay/DomNavigator.d.ts

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+import type { SelectedElement } from "../selection/selectionStore.js";
+import type { Rect } from "./overlayGeometry.js";
+export interface DomNavigatorProps {
+    selected: SelectedElement;
+    hierarchy: HTMLElement[];
+    anchor: Rect;
+    project: (element: HTMLElement) => Rect | null;
+}
+export declare function DomNavigator({ selected, hierarchy, anchor, project }: DomNavigatorProps): ReactElement | null;

package/dist/inspector/overlay/DomNavigator.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { setSelectedElement } from "../selection/selectionStore.js";
+import { computeNavigationNodes } from "../selection/hierarchy.js";
+import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
+function nodeLabel(node) {
+    return node.getAttribute("data-cid") ?? node.localName;
+}
+function nodeDescription(node) {
+    const id = node.id ? `#${node.id}` : "";
+    const className = typeof node.className === "string"
+        ? node.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((name) => `.${name}`).join("")
+        : "";
+    const source = node.getAttribute("data-src");
+    return `${node.localName}${id}${className}${source ? ` — ${source}` : ""}`;
+}
+function selectNode(node) {
+    const resolved = resolveSelectionFromElement(node);
+    if (resolved)
+        setSelectedElement(resolved);
+}
+export function DomNavigator({ selected, hierarchy, anchor, project }) {
+    const nodes = computeNavigationNodes(selected.domElement, hierarchy);
+    const [expanded, setExpanded] = useState(false);
+    const [hovered, setHovered] = useState(null);
+    if (nodes.length === 0)
+        return null;
+    const preview = hovered ? project(hovered) : null;
+    const close = () => {
+        setExpanded(false);
+        setHovered(null);
+    };
+    return (_jsxs(_Fragment, { children: [preview ? _jsx("div", { className: "dom-navigator-preview", "data-test": "dom-navigator-preview", style: preview, "aria-hidden": "true" }) : null, _jsxs("div", { className: "dom-navigator", "data-test": "dom-navigator", "aria-label": "DOM navigator", style: { left: Math.max(4, anchor.left), top: Math.max(4, anchor.top) }, onMouseEnter: () => setExpanded(true), onMouseLeave: close, onFocus: () => setExpanded(true), onBlur: (event) => {
+                    if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget))
+                        close();
+                }, children: [_jsxs("button", { type: "button", className: "dom-navigator__trigger", "data-test": "dom-navigator-trigger", "aria-expanded": expanded, "aria-haspopup": "menu", title: nodeDescription(selected.domElement), onMouseEnter: () => setHovered(null), children: [_jsx("span", { children: nodeLabel(selected.domElement) }), _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }), expanded ? (_jsx("div", { className: "dom-navigator__menu", role: "menu", children: nodes.map((node) => (_jsxs("button", { type: "button", className: "dom-navigator__item", "data-test": "dom-navigator-item", "data-direction": node.direction, "data-depth": node.depth, "data-cid": node.element.getAttribute("data-cid") ?? undefined, title: nodeDescription(node.element), role: "menuitem", onMouseEnter: () => setHovered(node.element), onClick: () => {
+                                selectNode(node.element);
+                                close();
+                            }, children: [_jsx("span", { "aria-hidden": "true", children: node.direction === "up" ? "↑" : "↓" }), _jsx("span", { children: nodeLabel(node.element) })] }, `${node.direction}-${node.depth}-${node.element.getAttribute("data-cid") ?? node.element.localName}`))) })) : null] })] }));
+}

package/dist/inspector/overlay/InspectorOverlay.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useInspectorOpen } from "../shell/openStore.js";
-import { getSelectedElements, useSelectedElement, useSelectedElements } from "../selection/selectionStore.js";
+import { getSelectedElements, useHierarchy, useSelectedElement, useSelectedElements } from "../selection/selectionStore.js";
 import { installElementSelector } from "./elementSelector.js";
 import { getMarginFills, getMarginGuides, readBorderWidths, readMargins, toRect, } from "./overlayGeometry.js";
 import { observeSelectedGeometry } from "./selectedGeometry.js";
@@ -17,6 +17,8 @@ import { MeasurementGuideOverlay } from "./MeasurementGuideOverlay.js";
 import { resolveSelectionTarget, selectionTargetMode } from "../selection/selectionTarget.js";
 import { isInlineTextEditingActive, useInlineTextSession } from "../inline-text/inlineTextEditor.js";
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
+import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
+import { DomNavigator } from "./DomNavigator.js";
 export { getMarginFills, getMarginGuides, } from "./overlayGeometry.js";
 function overlayStyle(rect) {
     return {
@@ -32,6 +34,8 @@ export function InspectorOverlay({ host }) {
     const open = useInspectorOpen();
     const selected = useSelectedElement();
     const selectedElements = useSelectedElements();
+    const hierarchy = useHierarchy();
+    const domNavigationEnabled = useNudgeUiRuntimeConfig().capabilities.domNavigation === true;
     const inlineTextSession = useInlineTextSession();
     const [hoverRect, setHoverRect] = useState(null);
     const [hoverMargins, setHoverMargins] = useState(null);
@@ -322,7 +326,7 @@ export function InspectorOverlay({ host }) {
                             width: guide.width,
                             height: guide.height,
                             pointerEvents: "none",
-                        }, "aria-hidden": "true" }, guide.side)))] })) : null, open && !inlineTextSession ? selectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "selected-outline", "data-test": "selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.domElement.getAttribute("data-cid") ?? "element"}-${index}`))) : null, open && selectedElements.length === 1 ? _jsx(DropGuideOverlay, { guide: dropGuide?.document === document
+                        }, "aria-hidden": "true" }, guide.side)))] })) : null, open && !inlineTextSession ? selectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "selected-outline", "data-test": "selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.domElement.getAttribute("data-cid") ?? "element"}-${index}`))) : null, open && domNavigationEnabled && !inlineTextSession && selectedElements.length === 1 && selected && selectedRect ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, project: (element) => toRect(element.getBoundingClientRect()) })) : null, open && selectedElements.length === 1 ? _jsx(DropGuideOverlay, { guide: dropGuide?.document === document
                     ? { orientation: dropGuide.orientation, line: dropGuide.line, target: dropGuide.target }
                     : null, lineClassName: "dom-drop-line", lineTestId: "dom-drop-line", targetClassName: "dom-drop-target", targetTestId: "dom-drop-target" }) : null] }));
 }

package/dist/inspector/overlay/clickPolicy.d.ts

@@ -1,7 +1,23 @@
 export type ClickModifiers = Pick<MouseEvent, "ctrlKey" | "metaKey" | "shiftKey">;
+/**
+ * Press and release gestures that application widgets use to open menus,
+ * dialogs, and popovers before any `click` fires. The Design tool keeps them
+ * from reaching the application.
+ */
+export declare const APPLICATION_GESTURE_EVENTS: readonly ["pointerdown", "pointerup", "mousedown", "mouseup", "touchstart", "touchend", "auxclick", "contextmenu"];
 /** Command/Ctrl-click selects the deepest tracked element unless Shift is held. */
 export declare function isDeepSelectionClick(event: ClickModifiers): boolean;
-/** Command/Ctrl+Shift-click intentionally lets the application receive its click. */
-export declare function isApplicationActivationClick(event: ClickModifiers): boolean;
+/**
+ * Only input from a person becomes inspector selection. Script events such
+ * as `element.click()` keep reaching the application.
+ */
+export declare function isUserClick(event: Pick<Event, "isTrusted">): boolean;
+/** The active inline text editor needs native press events for caret placement. */
+export declare function isInlineEditorTarget(target: EventTarget | null): boolean;
+/**
+ * Keeps an application press gesture from reaching application listeners.
+ * Listeners on the document itself, including the inspector's own, still run.
+ */
+export declare function blockApplicationGesture(event: Event): void;
 /** Prevent an inspected application click from reaching the host application. */
 export declare function blockApplicationClick(event: MouseEvent): void;

package/dist/inspector/overlay/clickPolicy.js

@@ -1,10 +1,41 @@
+/**
+ * Press and release gestures that application widgets use to open menus,
+ * dialogs, and popovers before any `click` fires. The Design tool keeps them
+ * from reaching the application.
+ */
+export const APPLICATION_GESTURE_EVENTS = [
+    "pointerdown",
+    "pointerup",
+    "mousedown",
+    "mouseup",
+    "touchstart",
+    "touchend",
+    "auxclick",
+    "contextmenu",
+];
 /** Command/Ctrl-click selects the deepest tracked element unless Shift is held. */
 export function isDeepSelectionClick(event) {
     return (event.ctrlKey || event.metaKey) && !event.shiftKey;
 }
-/** Command/Ctrl+Shift-click intentionally lets the application receive its click. */
-export function isApplicationActivationClick(event) {
-    return (event.ctrlKey || event.metaKey) && event.shiftKey;
+/**
+ * Only input from a person becomes inspector selection. Script events such
+ * as `element.click()` keep reaching the application.
+ */
+export function isUserClick(event) {
+    return event.isTrusted;
+}
+/** The active inline text editor needs native press events for caret placement. */
+export function isInlineEditorTarget(target) {
+    return typeof Element !== "undefined"
+        && target instanceof Element
+        && target.closest('[data-inline-editor="true"]') !== null;
+}
+/**
+ * Keeps an application press gesture from reaching application listeners.
+ * Listeners on the document itself, including the inspector's own, still run.
+ */
+export function blockApplicationGesture(event) {
+    event.stopPropagation();
 }
 /** Prevent an inspected application click from reaching the host application. */
 export function blockApplicationClick(event) {

package/dist/inspector/overlay/elementSelector.d.ts

@@ -1 +1 @@
-export declare function installElementSelector(inspectorHost: HTMLElement): () => void;
+export declare function installElementSelector(inspectorHost: HTMLElement, acceptsClick?: (event: Event) => boolean): () => void;

package/dist/inspector/overlay/elementSelector.js

@@ -3,8 +3,8 @@ import { getOpen } from "../shell/openStore.js";
 import { resolveSelectionFromEvent } from "../selection/resolveSelection.js";
 import { handleInlineTextEditIntent, isInlineTextEditingActive, } from "../inline-text/inlineTextEditor.js";
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
-import { blockApplicationClick, isApplicationActivationClick } from "./clickPolicy.js";
-export function installElementSelector(inspectorHost) {
+import { APPLICATION_GESTURE_EVENTS, blockApplicationClick, blockApplicationGesture, isInlineEditorTarget, isUserClick, } from "./clickPolicy.js";
+export function installElementSelector(inspectorHost, acceptsClick = isUserClick) {
     function applyInlineTextDisposition(event, disposition) {
         if (disposition === "pass-through")
             return;
@@ -43,7 +43,7 @@ export function installElementSelector(inspectorHost) {
         return root instanceof ShadowRoot && root.host === inspectorHost;
     }
     function onClick(e) {
-        if (!getOpen())
+        if (!getOpen() || !acceptsClick(e))
             return;
         if (isInsideInspectorUi(e)) {
             // The selector guards the inspected application only. Clicks on the
@@ -61,13 +61,10 @@ export function installElementSelector(inspectorHost) {
             blockApplicationClick(e);
             return;
         }
-        if (isApplicationActivationClick(e))
-            return;
         // The inspector is an editing surface while open. Capture every ordinary
         // application click so buttons, links, and untracked controls cannot run
         // alongside selection. Shift-click toggles the primary target in the
-        // ordered group; Command/Ctrl-click still selects the deepest tracked
-        // element, and Command/Ctrl+Shift-click remains the activation escape hatch.
+        // ordered group; Command/Ctrl-click selects the deepest tracked element.
         const sel = resolveSelectionFromEvent(e, inspectorHost);
         blockApplicationClick(e);
         if (sel) {
@@ -89,12 +86,26 @@ export function installElementSelector(inspectorHost) {
             clickCount: e.detail,
         }));
     }
+    function onApplicationGesture(e) {
+        if (!getOpen() || !acceptsClick(e) || isInlineEditorTarget(e.target))
+            return;
+        if (e.target instanceof Element
+            && (e.target === inspectorHost || inspectorHost.contains(e.target)))
+            return;
+        blockApplicationGesture(e);
+    }
     document.addEventListener("mousedown", onMouseDown, true);
     document.addEventListener("dblclick", onDoubleClick, true);
     document.addEventListener("click", onClick, true);
+    for (const type of APPLICATION_GESTURE_EVENTS) {
+        document.addEventListener(type, onApplicationGesture, true);
+    }
     return () => {
         document.removeEventListener("mousedown", onMouseDown, true);
         document.removeEventListener("dblclick", onDoubleClick, true);
         document.removeEventListener("click", onClick, true);
+        for (const type of APPLICATION_GESTURE_EVENTS) {
+            document.removeEventListener(type, onApplicationGesture, true);
+        }
     };
 }

package/dist/inspector/overlay/spacingGestures.d.ts

@@ -16,7 +16,7 @@ export interface SpacingGuideData {
     guide: Rect;
     affectedGuides: Rect[];
     affectedAreas: Rect[];
-    /** A 24px-thick pointer target centred on the visible, up-to-40px guide handle. */
+    /** A 16px-thick pointer target centred on the visible, up-to-40px guide handle. */
     hit: Rect;
 }
 export interface SpacingAffordance extends SpacingGuideData {
@@ -32,14 +32,14 @@ export declare const SPACING_GUIDE_HANDLE_LENGTH = 40;
 export declare function getSpacingAffordanceAtPoint(doc: Document, x: number, y: number): SpacingAffordance | null;
 /** Re-resolves a renderer-reported spacing descriptor in its owner document. */
 export declare function getSpacingAffordanceForDescriptor(element: HTMLElement, descriptor: SpacingDescriptor): SpacingAffordance | null;
-/** Calculates the pixel value represented by a direct-manipulation drag. */
+/** Calculates a direct-manipulation value, optionally stepping changes by 8px. */
 export declare function spacingValueForDrag(affordance: Pick<SpacingAffordance, "dragAxis" | "direction" | "value">, start: {
     x: number;
     y: number;
 }, point: {
     x: number;
     y: number;
-}): number;
+}, shiftKey?: boolean): number;
 export declare function spacingValueCss(value: number): string;
 /** Serializes the stable part of an affordance for renderer-to-controller messages. */
 export declare function toSpacingDescriptor(affordance: SpacingAffordance): SpacingDescriptor;