nudge-ui 0.2.1 → 0.2.3

package/dist/inspector/iterations/capture.js

@@ -0,0 +1,173 @@
+import { HTML_ARTIFACT_REVISION_ATTRIBUTE } from "../../transport/artifacts.js";
+/** Captures the visible DOM of a same-origin frame as a script-free HTML iteration. */
+export async function captureHtmlIteration(frame) {
+    const source = frame.contentDocument;
+    const view = frame.contentWindow;
+    if (!source || !view?.document.documentElement)
+        throw new Error("The frame is not ready to capture.");
+    await source.fonts?.ready;
+    await Promise.all([...source.images].map((image) => image.decode?.().catch(() => undefined)));
+    const original = source.documentElement;
+    const copy = original.cloneNode(true);
+    copy.removeAttribute(HTML_ARTIFACT_REVISION_ATTRIBUTE);
+    const sourceElements = [original, ...original.querySelectorAll("*")];
+    const copiedElements = [copy, ...copy.querySelectorAll("*")];
+    const assets = new Map();
+    for (let index = 0; index < sourceElements.length; index += 1) {
+        const sourceElement = sourceElements[index];
+        const copied = copiedElements[index];
+        if (sourceElement.nodeType !== 1 || copied.nodeType !== 1)
+            continue;
+        // Renderer IDs belong to the source iframe's node registry. The iteration's
+        // fresh registry can reuse those values for different nodes.
+        copied.removeAttribute("data-renderer-id");
+        // Preserve authored inline values (percentages, variables, and calc), rather
+        // than replacing them with computed dimensions at the capture viewport.
+        const inline = copied.getAttribute("style");
+        if (inline)
+            copied.setAttribute("style", await resolveCssUrls(inline, source.baseURI, assets));
+        if (sourceElement.tagName === "INPUT" && copied.tagName === "INPUT") {
+            const input = sourceElement;
+            copied.setAttribute("value", input.value);
+            if (input.checked)
+                copied.setAttribute("checked", "");
+            else
+                copied.removeAttribute("checked");
+        }
+        if (sourceElement.tagName === "TEXTAREA" && copied.tagName === "TEXTAREA")
+            copied.textContent = sourceElement.value;
+        if (sourceElement.tagName === "CANVAS" && copied.tagName === "CANVAS") {
+            try {
+                const image = source.createElement("img");
+                image.src = sourceElement.toDataURL();
+                for (const attribute of [...copied.attributes])
+                    image.setAttribute(attribute.name, attribute.value);
+                copied.replaceWith(image);
+            }
+            catch { /* Tainted canvases remain empty. */ }
+        }
+    }
+    const base = source.createElement("base");
+    base.href = source.querySelector("base")?.href ?? source.location.href;
+    copy.querySelectorAll("base").forEach((element) => element.remove());
+    (copy.querySelector("head") ?? copy).prepend(base);
+    copy.querySelectorAll('script, iframe, object, embed, meta[http-equiv="refresh"], meta[http-equiv="Content-Security-Policy"], link[rel=modulepreload], link[rel=preload]').forEach((element) => element.remove());
+    copy.querySelectorAll("[data-nudge-ui-mount], #nudge-ui-root").forEach((element) => element.remove());
+    copy.querySelectorAll("a, form").forEach((element) => {
+        element.removeAttribute("href");
+        element.removeAttribute("action");
+    });
+    copy.querySelectorAll("*").forEach((element) => {
+        for (const attribute of [...element.attributes]) {
+            if (/^on/i.test(attribute.name))
+                element.removeAttribute(attribute.name);
+        }
+    });
+    for (const image of copy.querySelectorAll("img")) {
+        const url = image.getAttribute("src");
+        if (url)
+            image.src = await inlineAsset(url, base.href, assets);
+    }
+    await captureStylesheets(source, copy, sourceElements, copiedElements, assets);
+    return `<!doctype html>\n${copy.outerHTML}`;
+}
+/** Copies live CSSOM rules in place so stylesheet order and media stay intact. */
+async function captureStylesheets(document, copy, sourceElements, copiedElements, assets) {
+    for (const sheet of [...document.styleSheets]) {
+        const owner = sheet.ownerNode;
+        // Some DOM implementations do not expose ownerNode.
+        const sourceNode = owner ?? sourceElements.find((element) => "sheet" in element && element.sheet === sheet);
+        const index = sourceNode ? sourceElements.indexOf(sourceNode) : -1;
+        const copiedNode = index >= 0 ? copiedElements[index] : undefined;
+        if (!copiedNode?.parentNode)
+            continue;
+        if (sheet.disabled) {
+            copiedNode.remove();
+            continue;
+        }
+        let css;
+        try {
+            css = [...sheet.cssRules].map((rule) => rule.cssText).join("\n");
+        }
+        catch {
+            if (!sheet.href)
+                continue;
+            try {
+                const response = await fetch(sheet.href);
+                if (!response.ok)
+                    continue;
+                css = await response.text();
+            }
+            catch {
+                // Keep the stylesheet link when CORS prevents embedding it. Its URL
+                // still resolves against the original base and retains responsiveness.
+                continue;
+            }
+        }
+        const style = document.createElement("style");
+        for (const attribute of [...copiedNode.attributes]) {
+            if (!["href", "rel", "integrity", "crossorigin"].includes(attribute.name)) {
+                style.setAttribute(attribute.name, attribute.value);
+            }
+        }
+        style.textContent = await resolveCssUrls(css, sheet.href ?? document.baseURI, assets);
+        // Captured edits become the iteration's base. The renderer must create its own
+        // managed stylesheet for new edits instead of clearing these captured rules.
+        if (style.id === "nudge-ui-styles") {
+            style.removeAttribute("id");
+            style.removeAttribute("data-nudge-ui");
+            style.setAttribute("data-nudge-capture-overrides", "");
+        }
+        copiedNode.replaceWith(style);
+    }
+    for (const sheet of document.adoptedStyleSheets ?? []) {
+        if (sheet.disabled)
+            continue;
+        const style = document.createElement("style");
+        style.textContent = await resolveCssUrls([...sheet.cssRules].map((rule) => rule.cssText).join("\n"), document.baseURI, assets);
+        (copy.querySelector("head") ?? copy).append(style);
+    }
+}
+async function resolveCssUrls(css, base, assets) {
+    const matches = [...css.matchAll(/url\(\s*(["']?)([^)"']+)\1\s*\)/g)];
+    const values = await Promise.all(matches.map((match) => inlineAsset(match[2], base, assets)));
+    let index = 0;
+    return css.replace(/url\(\s*(["']?)([^)"']+)\1\s*\)/g, () => `url("${values[index++]}")`);
+}
+async function inlineAsset(path, base, assets) {
+    if (path.trim().startsWith("#"))
+        return path;
+    let url;
+    try {
+        url = new URL(path, base).href;
+    }
+    catch {
+        return path;
+    }
+    if (!/^https?:/.test(url))
+        return url;
+    const existing = assets.get(url);
+    if (existing)
+        return existing;
+    const value = (async () => {
+        try {
+            const response = await fetch(url);
+            if (!response.ok || Number(response.headers.get("content-length")) > 4_000_000)
+                return url;
+            const blob = await response.blob();
+            if (blob.size > 4_000_000)
+                return url;
+            const bytes = new Uint8Array(await blob.arrayBuffer());
+            let binary = "";
+            for (let offset = 0; offset < bytes.length; offset += 8192) {
+                binary += String.fromCharCode(...bytes.subarray(offset, offset + 8192));
+            }
+            return `data:${blob.type || "application/octet-stream"};base64,${btoa(binary)}`;
+        }
+        catch {
+            return url;
+        }
+    })();
+    assets.set(url, value);
+    return value;
+}

package/dist/inspector/iterations/client.d.ts

@@ -0,0 +1,7 @@
+import { type HtmlArtifactRevision } from "../../transport/artifacts.js";
+export declare function artifactDocumentUrl(id: string): string;
+export declare function readHtmlArtifactRevision(id: string): Promise<HtmlArtifactRevision>;
+/** Checks the editing base before saving and promoting a captured document. */
+export declare function commitHtmlArtifact(id: string, expected: HtmlArtifactRevision, html?: string): Promise<HtmlArtifactRevision>;
+export declare function createHtmlArtifact(frame: HTMLIFrameElement, sourceUrl: string, title: string, capturedHtml?: string): Promise<string>;
+export declare function removeHtmlArtifact(id: string): Promise<void>;

package/dist/inspector/iterations/client.js

@@ -0,0 +1,52 @@
+import { isHtmlArtifactRevision, HTML_ITERATION_CONFLICT } from "../../transport/artifacts.js";
+import { NUDGE_UI_ARTIFACTS_PATH } from "../../transport/routes.js";
+import { captureHtmlIteration } from "./capture.js";
+export function artifactDocumentUrl(id) {
+    return `${NUDGE_UI_ARTIFACTS_PATH}/${id}/preview`;
+}
+export async function readHtmlArtifactRevision(id) {
+    const response = await fetch(`${NUDGE_UI_ARTIFACTS_PATH}/${id}/revision`, { cache: "no-store", signal: AbortSignal.timeout(10000) });
+    if (!response.ok)
+        throw new Error("The HTML iteration could not be refreshed.");
+    const revision = await response.json();
+    if (!isHtmlArtifactRevision(revision))
+        throw new Error("The HTML iteration returned an invalid revision.");
+    return revision;
+}
+/** Checks the editing base before saving and promoting a captured document. */
+export async function commitHtmlArtifact(id, expected, html) {
+    const response = await fetch(`${NUDGE_UI_ARTIFACTS_PATH}/${id}/commit`, {
+        method: "POST",
+        signal: AbortSignal.timeout(10000),
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ expected, ...(html === undefined ? {} : { html }) }),
+    });
+    if (response.status === 409)
+        throw new Error(HTML_ITERATION_CONFLICT);
+    if (!response.ok)
+        throw new Error((await response.text()) || "The HTML iteration could not be saved.");
+    const revision = await response.json();
+    if (!isHtmlArtifactRevision(revision))
+        throw new Error("The HTML iteration returned an invalid revision.");
+    return revision;
+}
+export async function createHtmlArtifact(frame, sourceUrl, title, capturedHtml) {
+    const id = crypto.randomUUID();
+    const html = capturedHtml ?? await captureHtmlIteration(frame);
+    const response = await fetch(NUDGE_UI_ARTIFACTS_PATH, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+            id, html, sourceUrl, title,
+            viewport: { width: frame.clientWidth, height: frame.clientHeight },
+        }),
+    });
+    if (!response.ok)
+        throw new Error((await response.text()) || "The HTML iteration could not be saved.");
+    return id;
+}
+export async function removeHtmlArtifact(id) {
+    const response = await fetch(`${NUDGE_UI_ARTIFACTS_PATH}/${id}`, { method: "DELETE", keepalive: true });
+    if (!response.ok)
+        throw new Error((await response.text()) || "The HTML iteration could not be removed.");
+}

package/dist/inspector/iterations/coordinator.d.ts

@@ -0,0 +1,15 @@
+import type { HtmlArtifactRevision } from "../../transport/artifacts.js";
+import { type DraftContents } from "../changes/draftChanges.js";
+/** Owned transport; tests use a working in-memory artifact store. */
+export interface HtmlIterationStorage {
+    readRevision(id: string): Promise<HtmlArtifactRevision>;
+    commit(id: string, expected: HtmlArtifactRevision, html?: string): Promise<HtmlArtifactRevision>;
+}
+/** Owns save ordering, draft settlement, and external document promotion. */
+export declare function createHtmlIterationCoordinator(storage: HtmlIterationStorage): {
+    prepare(cardId: string, artifactId: string, baseRevision: string, capture: () => Promise<string>): Promise<DraftContents>;
+    refresh(cardId: string, artifactId: string, baseRevision: string, available: () => boolean): Promise<boolean>;
+};
+/** Materializes pending intent before the agent can start editing document.html. */
+export declare function prepareHtmlIterationHandoff(cardId: string, artifactId: string, frame: HTMLIFrameElement): Promise<DraftContents>;
+export declare function refreshHtmlIteration(cardId: string, artifactId: string, frame: HTMLIFrameElement): Promise<boolean>;

package/dist/inspector/iterations/coordinator.js

@@ -0,0 +1,130 @@
+import { HTML_ARTIFACT_REVISION_ATTRIBUTE } from "../../transport/artifacts.js";
+import { getDraftForCard, getDraftContentsForCard, clearSavedIterationDraft } from "../drafts/store.js";
+import { lockDraft } from "../changes/draftChanges.js";
+import { canWriteWorkspace } from "../canvas/workspaceLease.js";
+import { projectDraftToDocument, isCanvasProjectionRevisionCurrent, projectToAllReadyCards } from "../canvas/projection.js";
+import { isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
+import { captureHtmlIteration } from "./capture.js";
+import { artifactDocumentUrl, commitHtmlArtifact, readHtmlArtifactRevision } from "./client.js";
+/** Owns save ordering, draft settlement, and external document promotion. */
+export function createHtmlIterationCoordinator(storage) {
+    const operations = new Map();
+    async function serialize(id, operation) {
+        const previous = operations.get(id) ?? Promise.resolve();
+        const pending = previous.catch(() => undefined).then(operation);
+        operations.set(id, pending);
+        try {
+            return await pending;
+        }
+        finally {
+            if (operations.get(id) === pending)
+                operations.delete(id);
+        }
+    }
+    return {
+        prepare(cardId, artifactId, baseRevision, capture) {
+            return serialize(artifactId, async () => {
+                if (!canWriteWorkspace())
+                    throw new Error("This workspace is open in another tab.");
+                const draft = getDraftForCard(cardId);
+                const workspace = getDraftContentsForCard(cardId);
+                if (!draft || draft.target.kind !== "html" || draft.target.artifactId !== artifactId || !workspace)
+                    throw new Error("The iteration draft is no longer available.");
+                const html = await capture();
+                const current = getDraftForCard(cardId);
+                if (current?.id !== draft.id || current.revision !== draft.revision) {
+                    throw new Error("The iteration changed while saving. Your edits are still pending. Try again.");
+                }
+                const release = lockDraft(draft.id);
+                try {
+                    if (!canWriteWorkspace())
+                        throw new Error("This workspace is open in another tab.");
+                    await storage.commit(artifactId, { document: baseRevision, preview: baseRevision }, html);
+                    if (!canWriteWorkspace())
+                        throw new Error("The iteration was saved. Reopen the active workspace to continue.");
+                }
+                finally {
+                    release();
+                }
+                // No await between releasing the lock and settling this exact revision.
+                if (!clearSavedIterationDraft(cardId, draft.revision)) {
+                    throw new Error("The iteration was saved, but its newer edits remain pending.");
+                }
+                return workspace;
+            });
+        },
+        refresh(cardId, artifactId, baseRevision, available) {
+            return serialize(artifactId, async () => {
+                const clean = () => {
+                    const workspace = getDraftContentsForCard(cardId);
+                    return canWriteWorkspace() && available() && workspace !== null
+                        && workspace.changes.length === 0 && workspace.structuralChanges.length === 0;
+                };
+                if (!clean())
+                    return false;
+                const revision = await storage.readRevision(artifactId);
+                if (!clean())
+                    return false;
+                // A previous promotion may have completed while an inline edit deferred reload.
+                if (revision.document === revision.preview)
+                    return revision.preview !== baseRevision;
+                const draft = getDraftForCard(cardId);
+                if (!draft)
+                    return false;
+                const release = lockDraft(draft.id);
+                try {
+                    await storage.commit(artifactId, revision);
+                }
+                finally {
+                    release();
+                }
+                return clean();
+            });
+        },
+    };
+}
+const coordinator = createHtmlIterationCoordinator({ readRevision: readHtmlArtifactRevision, commit: commitHtmlArtifact });
+function loadedRevision(frame) {
+    const revision = frame.contentDocument?.documentElement.getAttribute(HTML_ARTIFACT_REVISION_ATTRIBUTE);
+    if (!revision || !/^[a-f0-9]{64}$/.test(revision))
+        throw new Error("The HTML iteration is still loading. Try again when the frame is ready.");
+    return revision;
+}
+/** Materializes pending intent before the agent can start editing document.html. */
+export async function prepareHtmlIterationHandoff(cardId, artifactId, frame) {
+    if (isInlineTextEditingActive())
+        throw new Error("Finish editing the text before saving this iteration.");
+    const contents = getDraftContentsForCard(cardId);
+    if (!contents)
+        throw new Error("The iteration draft is no longer available.");
+    if (contents.changes.length + contents.structuralChanges.length === 0)
+        return contents;
+    const document = frame.contentDocument;
+    const baseRevision = loadedRevision(frame);
+    try {
+        const workspace = await coordinator.prepare(cardId, artifactId, baseRevision, async () => {
+            if (!document || isInlineTextEditingActive())
+                throw new Error("Finish editing the text before saving this iteration.");
+            const workspace = getDraftContentsForCard(cardId);
+            if (!workspace)
+                throw new Error("The iteration draft is no longer available.");
+            const revision = await projectDraftToDocument(document, workspace);
+            if (revision === null)
+                throw new Error("The iteration preview is still updating. Try again.");
+            const html = await captureHtmlIteration(frame);
+            if (frame.contentDocument !== document || !isCanvasProjectionRevisionCurrent(document, revision)) {
+                throw new Error("The iteration changed while saving. Your edits are still pending. Try again.");
+            }
+            return html;
+        });
+        frame.src = `${artifactDocumentUrl(artifactId)}?revision=${Date.now()}`;
+        return workspace;
+    }
+    finally {
+        projectToAllReadyCards();
+    }
+}
+export async function refreshHtmlIteration(cardId, artifactId, frame) {
+    const document = frame.contentDocument;
+    return coordinator.refresh(cardId, artifactId, loadedRevision(frame), () => frame.contentDocument === document && !isInlineTextEditingActive());
+}

package/dist/inspector/iterations/prompt.d.ts

@@ -0,0 +1,3 @@
+/** Defines the edit destination for every HTML-iteration handoff, including fallback copies. */
+export declare function htmlIterationPrompt(id: string, changes: string, noInspectorChanges: boolean, hasSketches: boolean, customInstructions?: string): string;
+export declare function htmlIterationImplementationPrompt(id: string, label: string, page: string, changes: string): string;

package/dist/inspector/iterations/prompt.js

@@ -0,0 +1,26 @@
+/** Defines the edit destination for every HTML-iteration handoff, including fallback copies. */
+export function htmlIterationPrompt(id, changes, noInspectorChanges, hasSketches, customInstructions = "") {
+    const directory = `.nudge/artifacts/${id}`;
+    return [
+        "# Edit this HTML iteration",
+        "",
+        `Edit only \`${directory}/document.html\`. This is the standalone HTML and CSS shown in the selected Nudge iteration frame.`,
+        "Preserve its responsive CSS and existing design edits. Keep application source files unchanged. Any original source locations below identify captured elements; they are not files to edit.",
+        `Keep \`${directory}/baseline.html\`, \`${directory}/preview.html\`, and metadata unchanged. Nudge will reload the iteration from your updated document.`,
+        ...(hasSketches ? ["Implement the attached sketch notes in this iteration's HTML and CSS. Match numbered notes to their marks in the image."] : []),
+        "",
+        ...(noInspectorChanges ? ["Use the current iteration as the editing base. Existing visual edits are already saved in its markup and styles.", ...(customInstructions.trim() ? ["", "## Custom instructions", "", customInstructions.trim()] : [])] : [changes]),
+    ].join("\n");
+}
+export function htmlIterationImplementationPrompt(id, label, page, changes) {
+    const directory = `.nudge/artifacts/${id}`;
+    return [
+        `# Implement ${label} in the live app`,
+        "",
+        `Page: ${page}`,
+        `Use \`${directory}/document.html\` as the design reference, including all saved visual edits.`,
+        "Update application source for this page to match it. Reuse existing components and styles, and preserve app behavior and data.",
+        "Keep iteration files unchanged; captured source locations below are hints for finding app code.",
+        ...(changes.trim() ? ["", changes] : []),
+    ].join("\n");
+}

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,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconMenu2 } from "@tabler/icons-react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { setSelectedElement } from "../selection/selectionStore.js";
+import { computeNavigationNodes } from "../selection/hierarchy.js";
+import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
+import { portalContainer } from "../ui/portalContainer.js";
+import { cx } from "../ui/classNames.js";
+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("")
+        : "";
+    return `${node.localName}${id}${className}`;
+}
+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 parents = nodes.filter((node) => node.direction === "up");
+    const children = nodes.filter((node) => node.direction === "down");
+    const [expanded, setExpanded] = useState(false);
+    const [hovered, setHovered] = useState(null);
+    if (nodes.length === 0)
+        return null;
+    const preview = hovered ? project(hovered) : null;
+    const setOpen = (next) => {
+        setExpanded(next);
+        if (!next)
+            setHovered(null);
+    };
+    const renderItem = (node, depth) => {
+        const current = node === null;
+        const element = current ? selected.domElement : node.element;
+        return (_jsx("button", { type: "button", className: cx("dom-navigator__item", current && "dom-navigator__item--selected"), "data-test": "dom-navigator-item", "data-current": current ? "true" : undefined, "data-direction": node?.direction, "data-depth": depth, "data-cid": element.getAttribute("data-cid") ?? undefined, style: { paddingLeft: `calc(var(--space-8) + ${depth * 16}px)` }, role: "menuitem", "aria-current": current ? "true" : undefined, onMouseEnter: () => setHovered(current ? null : element), onClick: () => {
+                if (!current)
+                    selectNode(element);
+                setOpen(false);
+            }, children: _jsx("span", { children: nodeDescription(element) }) }, current ? "current" : `${node.direction}-${node.depth}-${element.getAttribute("data-cid") ?? element.localName}`));
+    };
+    return (_jsxs(_Fragment, { children: [preview ? _jsx("div", { className: "dom-navigator-preview", "data-test": "dom-navigator-preview", style: preview, "aria-hidden": "true" }) : null, _jsx("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 - 28) }, children: _jsxs(BasePopover.Root, { open: expanded, onOpenChange: setOpen, children: [_jsx(BasePopover.Trigger, { render: _jsx("button", { type: "button", className: "dom-navigator__trigger", "data-test": "dom-navigator-trigger", "aria-label": "Open DOM navigator", "aria-haspopup": "menu", "aria-expanded": expanded, onMouseEnter: () => setHovered(null) }), children: _jsx(IconMenu2, { size: 14, "aria-hidden": "true" }) }), _jsx("span", { className: "dom-navigator__label", children: nodeDescription(selected.domElement) }), _jsx(BasePopover.Portal, { container: portalContainer(), children: _jsx(BasePopover.Positioner, { className: "dom-navigator__positioner", side: "top", align: "start", sideOffset: 4, children: _jsxs(BasePopover.Popup, { className: "dom-navigator__menu", role: "menu", "aria-label": "DOM navigator", onMouseLeave: () => setHovered(null), children: [parents.slice().reverse().map((node) => renderItem(node, parents.length - node.depth)), renderItem(null, parents.length), children.map((node) => renderItem(node, parents.length + node.depth))] }) }) })] }) })] }));
+}

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;