nudge-ui 0.2.3 → 0.2.5

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

@@ -0,0 +1,20 @@
+type StyleRoot = Document | ShadowRoot;
+/** Transient visual state projection, excluded from authored CSS inspection. */
+export declare const STATE_PREVIEW_SHEET_ID = "nudge-ui-state-preview";
+/**
+ * Uses constructable stylesheets everywhere without probing the page policy.
+ * A blocked probe logs a violation and can send one to the site's CSP report endpoint.
+ */
+export declare function preferAdoptedStylesheets(): void;
+/**
+ * A strict `style-src` policy blocks `<style>` elements, leaving them without
+ * a sheet, but not constructable stylesheets. Checked once per document.
+ */
+export declare function allowsStyleElements(doc: Document): boolean;
+/** Creates or replaces the adopted sheet stored under `key`, after the root's own stylesheets. */
+export declare function adoptStylesheet(root: StyleRoot, key: string, cssText: string): CSSStyleSheet | null;
+/** The key a sheet was adopted under, or null for sheets the page adopted itself. */
+export declare function adoptedStylesheetKey(root: StyleRoot, sheet: CSSStyleSheet): string | null;
+export declare function getAdoptedStylesheet(root: StyleRoot, key: string): CSSStyleSheet | null;
+export declare function releaseAdoptedStylesheet(root: StyleRoot, key: string): void;
+export {};

package/dist/inspector/runtime/ownedStylesheets.js

@@ -0,0 +1,72 @@
+/** Transient visual state projection, excluded from authored CSS inspection. */
+export const STATE_PREVIEW_SHEET_ID = "nudge-ui-state-preview";
+const styleElementSupport = new WeakMap();
+const adoptedSheets = new WeakMap();
+let adoptedOnly = false;
+/**
+ * Uses constructable stylesheets everywhere without probing the page policy.
+ * A blocked probe logs a violation and can send one to the site's CSP report endpoint.
+ */
+export function preferAdoptedStylesheets() {
+    adoptedOnly = true;
+}
+/**
+ * A strict `style-src` policy blocks `<style>` elements, leaving them without
+ * a sheet, but not constructable stylesheets. Checked once per document.
+ */
+export function allowsStyleElements(doc) {
+    if (adoptedOnly)
+        return false;
+    const known = styleElementSupport.get(doc);
+    if (known !== undefined)
+        return known;
+    const probe = doc.createElement("style");
+    probe.setAttribute("data-nudge-ui", "style-policy-probe");
+    probe.textContent = ":root {}";
+    (doc.head ?? doc.documentElement).appendChild(probe);
+    const allowed = probe.sheet !== null;
+    probe.remove();
+    styleElementSupport.set(doc, allowed);
+    return allowed;
+}
+function ownerDocumentOf(root) {
+    return root.nodeType === Node.DOCUMENT_NODE ? root : root.ownerDocument;
+}
+/** Creates or replaces the adopted sheet stored under `key`, after the root's own stylesheets. */
+export function adoptStylesheet(root, key, cssText) {
+    const view = ownerDocumentOf(root).defaultView;
+    if (!view)
+        return null;
+    let sheets = adoptedSheets.get(root);
+    if (!sheets) {
+        sheets = new Map();
+        adoptedSheets.set(root, sheets);
+    }
+    let sheet = sheets.get(key);
+    if (!sheet) {
+        sheet = new view.CSSStyleSheet();
+        sheets.set(key, sheet);
+    }
+    sheet.replaceSync(cssText);
+    if (!root.adoptedStyleSheets.includes(sheet))
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    return sheet;
+}
+/** The key a sheet was adopted under, or null for sheets the page adopted itself. */
+export function adoptedStylesheetKey(root, sheet) {
+    for (const [key, candidate] of adoptedSheets.get(root) ?? []) {
+        if (candidate === sheet)
+            return key;
+    }
+    return null;
+}
+export function getAdoptedStylesheet(root, key) {
+    return adoptedSheets.get(root)?.get(key) ?? null;
+}
+export function releaseAdoptedStylesheet(root, key) {
+    const sheet = adoptedSheets.get(root)?.get(key);
+    if (!sheet)
+        return;
+    adoptedSheets.get(root)?.delete(key);
+    root.adoptedStyleSheets = root.adoptedStyleSheets.filter((candidate) => candidate !== sheet);
+}

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

@@ -41,6 +41,8 @@ export interface NudgeUiRuntimeCapabilities {
 }
 /** Product features that a host can selectively expose in its inspector UI. */
 export interface NudgeUiRuntimeFeatures {
+    /** Whether the annotation sketch tool is available in the Canvas UI. */
+    readonly sketch?: boolean;
     /** Whether Canvas can create filesystem-backed HTML iterations. */
     readonly canvasIterations?: boolean;
 }
@@ -65,6 +67,8 @@ export interface NudgeUiRuntimeConfig {
     readonly tokenDiagnostics: readonly TokenCatalogDiagnostic[];
     readonly tokenGeneration: string;
     readonly componentContracts: readonly ComponentContract[];
+    /** Why this page cannot be inspected; replaces the selection empty state. */
+    readonly inspectionUnavailableReason?: string;
     /** Whether this runtime is the explicit public landing-page demo. */
     readonly demo?: boolean;
     /** Additional same-origin pages seeded into the public demo canvas. */

package/dist/inspector/runtime/runtimeConfig.js

@@ -157,8 +157,14 @@ function normalizeFeatures(input) {
     if (!isPlainRecord(input)) {
         throw new TypeError('Nudge UI runtime configuration field "features" must be an object.');
     }
+    const sketch = optionalFeatureBoolean(input, "sketch");
     const canvasIterations = optionalFeatureBoolean(input, "canvasIterations");
-    return canvasIterations === undefined ? {} : { canvasIterations };
+    if (sketch === undefined && canvasIterations === undefined)
+        return {};
+    return {
+        ...(sketch === undefined ? {} : { sketch }),
+        ...(canvasIterations === undefined ? {} : { canvasIterations }),
+    };
 }
 function optionalDemoFlag(input) {
     const value = input.demo;
@@ -203,6 +209,9 @@ export function normalizeNudgeUiRuntimeConfig(input) {
         tokenDiagnostics: optionalArray(input, "tokenDiagnostics"),
         tokenGeneration: optionalString(input, "tokenGeneration"),
         componentContracts: optionalArray(input, "componentContracts"),
+        ...(input.inspectionUnavailableReason === undefined ? {} : {
+            inspectionUnavailableReason: optionalNonEmptyString(input, "inspectionUnavailableReason"),
+        }),
         ...(demo === true ? { demo: true } : {}),
         ...(demoPages === undefined ? {} : { demoPages }),
         ...(demoCardLabels === undefined ? {} : { demoCardLabels }),

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

@@ -0,0 +1,29 @@
+import type { DraftContents } from "../drafts/model.js";
+/**
+ * A generated identity that a saved edit refers to, plus the rendered facts
+ * captured with it. Generated identities are document-local: after a reload
+ * no element carries them until the claim is re-attached to the one element
+ * whose rendered facts still match.
+ */
+export interface RuntimeIdentityClaim {
+    readonly cid: string;
+    readonly src: string | null;
+    readonly tagName: string;
+    readonly text: string | null;
+    readonly props: string | null;
+    readonly ariaLabel: string | null;
+    readonly domPath: string | null;
+    readonly elementId: string | null;
+}
+/** Collects one claim per generated identity referenced by saved edits. */
+export declare function collectRuntimeIdentityClaims({ changes, structuralChanges }: DraftContents): RuntimeIdentityClaim[];
+/**
+ * Replaces the generated identities saved edits refer to in one document and
+ * attaches each to its element, now and whenever the document's elements are
+ * replaced. Unmatched claims stay pending; their edits simply do not apply.
+ */
+export declare function applyRuntimeIdentityClaims(doc: Document, claims: readonly RuntimeIdentityClaim[]): void;
+/** Stops reattachment for a disposed document session, including queued work. */
+export declare function disposeRuntimeIdentityClaims(doc: Document): void;
+/** Runtime validation for claims received from another window. */
+export declare function isRuntimeIdentityClaim(value: unknown): value is RuntimeIdentityClaim;

package/dist/inspector/runtime/runtimeIdentityClaims.js

@@ -0,0 +1,188 @@
+import { boundRuntimeEvidence, isRuntimeGeneratedSource, normalizeRuntimeTag, normalizeRuntimeText, RUNTIME_ELEMENT_CID_PREFIX, runtimeDomPath, } from "./staticHtmlRuntimeIdentity.js";
+const states = new WeakMap();
+function isGeneratedCid(cid) {
+    return typeof cid === "string" && cid.startsWith(RUNTIME_ELEMENT_CID_PREFIX);
+}
+/** Generated values contain no characters that selector escaping rewrites. */
+function generatedSourceFromSelector(selector) {
+    const match = /\[data-src="([^"\\]*)"\]/.exec(selector);
+    return match && isRuntimeGeneratedSource(match[1]) ? match[1] : null;
+}
+function claimFromEvidence(cid, src, evidence) {
+    return {
+        cid,
+        src,
+        tagName: evidence.tagName,
+        text: evidence.text,
+        props: evidence.props,
+        ariaLabel: evidence.ariaLabel,
+        domPath: evidence.domPath ?? null,
+        elementId: evidence.elementId ?? null,
+    };
+}
+/** Collects one claim per generated identity referenced by saved edits. */
+export function collectRuntimeIdentityClaims({ changes, structuralChanges }) {
+    const claims = new Map();
+    // The page still renders the text from before an inline text edit, so a
+    // text edit's original text wins over evidence captured after the preview.
+    const originalText = new Map();
+    for (const change of changes) {
+        if (change.kind === "text-content") {
+            const { sourceSite, beforeText } = change.target;
+            if (isGeneratedCid(sourceSite.cid))
+                originalText.set(sourceSite.cid, normalizeRuntimeText(beforeText));
+            if (!isGeneratedCid(sourceSite.cid) || claims.has(sourceSite.cid))
+                continue;
+            claims.set(sourceSite.cid, {
+                cid: sourceSite.cid,
+                src: sourceSite.src || null,
+                tagName: change.target.tagName ?? "",
+                text: null,
+                props: change.target.props,
+                ariaLabel: change.target.ariaLabel,
+                domPath: change.target.domPath ?? null,
+                elementId: change.target.elementId ?? null,
+            });
+            continue;
+        }
+        if (change.kind !== undefined && change.kind !== "element")
+            continue;
+        if (!isGeneratedCid(change.cid) || !change.runtimeEvidence || claims.has(change.cid))
+            continue;
+        claims.set(change.cid, claimFromEvidence(change.cid, generatedSourceFromSelector(change.selector), change.runtimeEvidence));
+    }
+    for (const change of structuralChanges) {
+        const targets = change.kind === "move"
+            ? [change.target, change.source.parent, change.destination.parent, ...(change.destination.before ? [change.destination.before] : [])]
+            : [change.target];
+        for (const { sourceSite, locator } of targets) {
+            if (!isGeneratedCid(sourceSite.cid) || claims.has(sourceSite.cid))
+                continue;
+            claims.set(sourceSite.cid, {
+                cid: sourceSite.cid,
+                src: isRuntimeGeneratedSource(sourceSite.src) ? sourceSite.src : null,
+                tagName: locator.tagName ?? "",
+                text: locator.text,
+                props: boundRuntimeEvidence(locator.props),
+                ariaLabel: boundRuntimeEvidence(locator.ariaLabel ?? null),
+                domPath: locator.domPath ?? null,
+                elementId: locator.elementId ?? null,
+            });
+        }
+    }
+    return [...claims.values()].map((claim) => (originalText.has(claim.cid) ? { ...claim, text: originalText.get(claim.cid) } : claim));
+}
+function hasStructuralMatch(element, claim) {
+    return normalizeRuntimeTag(element.tagName) === claim.tagName
+        && boundRuntimeEvidence(element.id || null) === claim.elementId
+        && boundRuntimeEvidence(element.getAttribute("aria-label")) === claim.ariaLabel
+        && boundRuntimeEvidence(element.getAttribute("data-cprops")) === claim.props
+        && (claim.domPath === null || runtimeDomPath(element) === claim.domPath);
+}
+/**
+ * Finds the single element a claim describes, or null when none or several
+ * match. Elements holding authored identity, or another claim's identity,
+ * are never taken. Conflicting text evidence leaves the claim unattached.
+ */
+function findClaimedElement(doc, claim, claimed) {
+    if (!claim.tagName)
+        return null;
+    let elements;
+    try {
+        elements = Array.from(doc.getElementsByTagName(claim.tagName));
+    }
+    catch {
+        return null;
+    }
+    const candidates = elements.filter((element) => {
+        const cid = element.getAttribute("data-cid");
+        if (cid !== null && (!isGeneratedCid(cid) || claimed.has(cid)))
+            return false;
+        return hasStructuralMatch(element, claim);
+    });
+    const byText = candidates.filter((element) => normalizeRuntimeText(element.textContent) === claim.text);
+    if (byText.length === 1)
+        return byText[0];
+    return null;
+}
+function hasIdentity(doc, cid) {
+    for (const element of Array.from(doc.querySelectorAll("[data-cid]"))) {
+        if (element.getAttribute("data-cid") === cid)
+            return true;
+    }
+    return false;
+}
+function attachClaims(doc, state) {
+    const claimed = new Set(state.claims.keys());
+    for (const claim of state.claims.values()) {
+        if (hasIdentity(doc, claim.cid))
+            continue;
+        const element = findClaimedElement(doc, claim, claimed);
+        if (!element)
+            continue;
+        element.setAttribute("data-cid", claim.cid);
+        if (claim.src !== null)
+            element.setAttribute("data-src", claim.src);
+    }
+}
+function observe(doc, state) {
+    if (state.observer || state.claims.size === 0)
+        return;
+    const Observer = doc.defaultView?.MutationObserver;
+    if (!Observer || !doc.documentElement)
+        return;
+    // Frameworks replace server-rendered elements during hydration and route
+    // changes. Re-attach once per mutation batch; attaching only writes to an
+    // element that lacks the identity, so it cannot feed itself.
+    state.observer = new Observer(() => {
+        if (state.queued)
+            return;
+        state.queued = true;
+        queueMicrotask(() => {
+            if (states.get(doc) !== state)
+                return;
+            state.queued = false;
+            attachClaims(doc, state);
+        });
+    });
+    state.observer.observe(doc.documentElement, { childList: true, subtree: true });
+}
+/**
+ * Replaces the generated identities saved edits refer to in one document and
+ * attaches each to its element, now and whenever the document's elements are
+ * replaced. Unmatched claims stay pending; their edits simply do not apply.
+ */
+export function applyRuntimeIdentityClaims(doc, claims) {
+    if (claims.length === 0) {
+        disposeRuntimeIdentityClaims(doc);
+        return;
+    }
+    let state = states.get(doc);
+    if (!state) {
+        state = { claims: new Map(), observer: null, queued: false };
+        states.set(doc, state);
+    }
+    state.claims = new Map(claims.map((claim) => [claim.cid, claim]));
+    attachClaims(doc, state);
+    observe(doc, state);
+}
+/** Stops reattachment for a disposed document session, including queued work. */
+export function disposeRuntimeIdentityClaims(doc) {
+    states.get(doc)?.observer?.disconnect();
+    states.delete(doc);
+}
+/** Runtime validation for claims received from another window. */
+export function isRuntimeIdentityClaim(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const claim = value;
+    const nullableString = (field) => field === null || typeof field === "string";
+    return isGeneratedCid(claim.cid)
+        && (claim.src === null || isRuntimeGeneratedSource(claim.src))
+        && typeof claim.tagName === "string"
+        && nullableString(claim.text)
+        && nullableString(claim.props)
+        && nullableString(claim.ariaLabel)
+        && nullableString(claim.domPath)
+        && nullableString(claim.elementId);
+}

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

@@ -11,6 +11,11 @@ export declare const RUNTIME_ELEMENT_CID_PREFIX = "nudge-ui-runtime-";
 export declare const RUNTIME_EVIDENCE_MAX_LENGTH = 120;
 /** Bounds an untrusted runtime evidence string without changing its content. */
 export declare function boundRuntimeEvidence(value: string | null): string | null;
+/**
+ * Describes an element by its nearest ancestors so a prompt without source
+ * locations still carries searchable class names, ids, and test ids.
+ */
+export declare function runtimeDomPath(element: Element): string | null;
 /** Normalizes rendered text before it becomes durable runtime evidence. */
 export declare function normalizeRuntimeText(value: string | null): string | null;
 /** Keeps a runtime tag suitable for the prompt's inline element notation. */
@@ -30,3 +35,13 @@ export declare function isRuntimeCreatedElement(element: Element | null | undefi
  * page is replaced.
  */
 export declare function installStaticHtmlRuntimeIdentity(doc?: Document): () => void;
+/**
+ * Assigns runtime identity only to elements the pointer reaches: the target,
+ * its ancestors, two levels of descendants for the DOM navigator, and its
+ * siblings, which structural moves capture as anchors.
+ *
+ * Unlike `installStaticHtmlRuntimeIdentity`, nothing observes DOM mutations,
+ * so a busy application pays no cost for subtrees nobody inspects. Install it
+ * before the inspector so its capture listeners run first.
+ */
+export declare function installLazyRuntimeIdentity(doc?: Document): () => void;

package/dist/inspector/runtime/staticHtmlRuntimeIdentity.js

@@ -13,6 +13,40 @@ export const RUNTIME_EVIDENCE_MAX_LENGTH = 120;
 export function boundRuntimeEvidence(value) {
     return value === null ? null : value.slice(0, RUNTIME_EVIDENCE_MAX_LENGTH);
 }
+const DOM_PATH_MAX_LENGTH = 240;
+const DOM_PATH_MAX_DEPTH = 4;
+const DOM_PATH_MAX_CLASSES = 3;
+const TEST_ID_ATTRIBUTES = ["data-testid", "data-test", "data-qa"];
+function domPathSegment(element) {
+    let segment = element.localName;
+    if (element.id)
+        segment += `#${element.id}`;
+    const testAttribute = TEST_ID_ATTRIBUTES.find((name) => element.hasAttribute(name));
+    if (testAttribute)
+        segment += `[${testAttribute}="${element.getAttribute(testAttribute)}"]`;
+    const classes = Array.from(element.classList).slice(0, DOM_PATH_MAX_CLASSES);
+    if (classes.length > 0)
+        segment += `.${classes.join(".")}`;
+    return segment;
+}
+/**
+ * Describes an element by its nearest ancestors so a prompt without source
+ * locations still carries searchable class names, ids, and test ids.
+ */
+export function runtimeDomPath(element) {
+    const segments = [];
+    let current = element;
+    while (current && segments.length < DOM_PATH_MAX_DEPTH && !DOCUMENT_STRUCTURE_TAGS.has(current.tagName)) {
+        segments.unshift(domPathSegment(current));
+        if (current.id)
+            break;
+        current = current.parentElement;
+    }
+    if (segments.length === 0)
+        return null;
+    const path = segments.join(" > ");
+    return path.length > DOM_PATH_MAX_LENGTH ? `…${path.slice(-DOM_PATH_MAX_LENGTH)}` : path;
+}
 /** Normalizes rendered text before it becomes durable runtime evidence. */
 export function normalizeRuntimeText(value) {
     if (value === null)
@@ -77,36 +111,8 @@ function existingAttributeValues(doc, name) {
  * page is replaced.
  */
 export function installStaticHtmlRuntimeIdentity(doc = document) {
-    const usedCids = existingAttributeValues(doc, "data-cid");
-    const usedSources = existingAttributeValues(doc, "data-src");
-    let nextId = 1;
+    const ensureIdentity = createIdentityAllocator(doc);
     let disposed = false;
-    function nextIdentity() {
-        while (true) {
-            const id = nextId++;
-            const cid = `${RUNTIME_ELEMENT_CID_PREFIX}${id}`;
-            const src = `${RUNTIME_UNKNOWN_SOURCE_PREFIX}${id}`;
-            if (usedCids.has(cid) || usedSources.has(src))
-                continue;
-            usedCids.add(cid);
-            usedSources.add(src);
-            return { cid, src };
-        }
-    }
-    function ensureIdentity(element) {
-        if (!isEligibleElement(element))
-            return;
-        const needsCid = element.getAttribute("data-cid") === null;
-        const needsSource = element.getAttribute("data-src") === null;
-        if (!needsCid && !needsSource)
-            return;
-        const identity = nextIdentity();
-        if (needsCid)
-            element.setAttribute("data-cid", identity.cid);
-        if (needsSource)
-            element.setAttribute("data-src", identity.src);
-        runtimeCreatedElements.add(element);
-    }
     function scanSubtree(node) {
         if (disposed)
             return;
@@ -147,3 +153,81 @@ export function installStaticHtmlRuntimeIdentity(doc = document) {
         observer.disconnect();
     };
 }
+const LAZY_IDENTITY_EVENTS = ["pointerover", "pointerdown", "mousedown", "click", "dblclick"];
+const LAZY_DESCENDANT_DEPTH = 2;
+/**
+ * Assigns runtime identity only to elements the pointer reaches: the target,
+ * its ancestors, two levels of descendants for the DOM navigator, and its
+ * siblings, which structural moves capture as anchors.
+ *
+ * Unlike `installStaticHtmlRuntimeIdentity`, nothing observes DOM mutations,
+ * so a busy application pays no cost for subtrees nobody inspects. Install it
+ * before the inspector so its capture listeners run first.
+ */
+export function installLazyRuntimeIdentity(doc = document) {
+    // Pointer order differs between page loads, so sequential numbers would
+    // hand a saved edit's identity to whichever element is hovered first after
+    // a reload. A per-install scope keeps fresh identities distinct from saved
+    // ones; `runtimeIdentityClaims` re-attaches the saved ones by evidence.
+    const ensureIdentity = createIdentityAllocator(doc, `${Math.random().toString(36).slice(2, 8)}-`);
+    function tagDescendants(element, depth) {
+        if (depth === 0)
+            return;
+        for (const child of Array.from(element.children)) {
+            ensureIdentity(child);
+            tagDescendants(child, depth - 1);
+        }
+    }
+    function onPointer(event) {
+        const target = event.target;
+        if (!(target instanceof Element) || !isEligibleElement(target))
+            return;
+        for (let current = target; current; current = current.parentElement) {
+            // Ancestors of a tagged element were tagged with it.
+            if (current.hasAttribute("data-cid") && current !== target)
+                break;
+            ensureIdentity(current);
+        }
+        tagDescendants(target, LAZY_DESCENDANT_DEPTH);
+        if (target.parentElement)
+            tagDescendants(target.parentElement, 1);
+    }
+    for (const type of LAZY_IDENTITY_EVENTS)
+        doc.addEventListener(type, onPointer, true);
+    return () => {
+        for (const type of LAZY_IDENTITY_EVENTS)
+            doc.removeEventListener(type, onPointer, true);
+    };
+}
+function createIdentityAllocator(doc, scope = "") {
+    const usedCids = existingAttributeValues(doc, "data-cid");
+    const usedSources = existingAttributeValues(doc, "data-src");
+    let nextId = 1;
+    function nextIdentity() {
+        while (true) {
+            const id = nextId++;
+            const cid = `${RUNTIME_ELEMENT_CID_PREFIX}${scope}${id}`;
+            const src = `${RUNTIME_UNKNOWN_SOURCE_PREFIX}${scope}${id}`;
+            if (usedCids.has(cid) || usedSources.has(src))
+                continue;
+            usedCids.add(cid);
+            usedSources.add(src);
+            return { cid, src };
+        }
+    }
+    function ensureIdentity(element) {
+        if (!isEligibleElement(element))
+            return;
+        const needsCid = element.getAttribute("data-cid") === null;
+        const needsSource = element.getAttribute("data-src") === null;
+        if (!needsCid && !needsSource)
+            return;
+        const identity = nextIdentity();
+        if (needsCid)
+            element.setAttribute("data-cid", identity.cid);
+        if (needsSource)
+            element.setAttribute("data-src", identity.src);
+        runtimeCreatedElements.add(element);
+    }
+    return ensureIdentity;
+}

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

@@ -22,6 +22,7 @@ export declare function relinkElement(el: HTMLElement): string | null;
 export declare function getEditScope(el: HTMLElement): EditScope;
 export interface BatchScopeFields {
     scope: EditScope;
+    sourceInstanceCount?: number;
     instanceOverride?: RenderedInstanceOverride;
 }
 /** Returns whether every element can be addressed safely by one batch edit. */

package/dist/inspector/selection/editScope.js

@@ -118,13 +118,24 @@ export function planBatchEditScopes(selectedElements) {
     if (!decisions)
         return null;
     const plan = new Map();
+    const sourceCounts = new WeakMap();
     for (const [element, decision] of decisions) {
-        plan.set(element, decision.scope === "new-rendered-instance"
+        const selector = selectorForElement(element);
+        let counts = sourceCounts.get(element.ownerDocument);
+        if (!counts) {
+            counts = new Map();
+            sourceCounts.set(element.ownerDocument, counts);
+        }
+        const count = selector ? counts.get(selector) ?? querySourceSiteMatches(element) : 0;
+        if (selector)
+            counts.set(selector, count);
+        const fields = decision.scope === "new-rendered-instance"
             ? {
                 scope: "rendered-instance",
                 instanceOverride: buildRenderedInstanceOverrideForTarget(decision.target),
             }
-            : decision);
+            : decision;
+        plan.set(element, count > 0 ? { ...fields, sourceInstanceCount: count } : fields);
     }
     return plan;
 }

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

@@ -1,2 +1,14 @@
 /** Stable JSX instrumentation selector, shared by source and instance edits. */
 export declare function sourceSiteSelector(cid: string, src: string): string | null;
+/**
+ * Finds a source site whose position moved because its file gained or lost
+ * lines. It returns a site only when the original renders nothing and exactly
+ * one other position in the same file and component renders matching elements.
+ */
+export declare function relocateSourceSite(doc: Document, site: {
+    readonly cid: string;
+    readonly src: string;
+}, matches: (element: HTMLElement) => boolean): {
+    cid: string;
+    src: string;
+} | null;

package/dist/inspector/selection/sourceSite.js

@@ -1,4 +1,5 @@
 import { escapeAttrValue } from "../projection/cssEscapes.js";
+const SOURCE_POSITION = /^(.+):\d+:\d+$/;
 /** Stable JSX instrumentation selector, shared by source and instance edits. */
 export function sourceSiteSelector(cid, src) {
     if (!cid)
@@ -10,3 +11,30 @@ export function sourceSiteSelector(cid, src) {
     // single formatted line share a managed rule.
     return `[data-cid="${escapeAttrValue(cid)}"][data-src="${escapeAttrValue(src)}"]`;
 }
+/**
+ * Finds a source site whose position moved because its file gained or lost
+ * lines. It returns a site only when the original renders nothing and exactly
+ * one other position in the same file and component renders matching elements.
+ */
+export function relocateSourceSite(doc, site, matches) {
+    const file = SOURCE_POSITION.exec(site.src)?.[1];
+    const exact = sourceSiteSelector(site.cid, site.src);
+    if (!file || !exact)
+        return null;
+    try {
+        if (doc.querySelector(exact))
+            return null;
+        const sites = new Set();
+        const sameFile = `[data-cid="${escapeAttrValue(site.cid)}"][data-src^="${escapeAttrValue(`${file}:`)}"]`;
+        for (const element of doc.querySelectorAll(sameFile)) {
+            const src = element.getAttribute("data-src") ?? "";
+            if (SOURCE_POSITION.exec(src)?.[1] === file && matches(element))
+                sites.add(src);
+        }
+        const [src] = sites;
+        return sites.size === 1 && src ? { cid: site.cid, src } : null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/inspector/shell/AgentStatusButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconRobot } from "@tabler/icons-react";
 import { useAgentClient } from "../agent/client.js";
-import { getAgentConnectionStatus } from "../agent/connectionStatus.js";
+import { useAgentConnectionStatus } from "../agent/connectionStatus.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { Button } from "../ui/Button.js";
 import { Tooltip } from "../ui/Tooltip.js";
@@ -29,7 +29,7 @@ export function AgentStatusButton({ onOpenSettings }) {
 }
 /** Renders the connection snapshot provided by the project client. */
 export function AgentStatusButtonView({ agent, onOpenSettings }) {
-    const status = getAgentConnectionStatus(agent);
+    const status = useAgentConnectionStatus(agent);
     const connected = agent.paired || agent.pairedElsewhere;
     const listening = connected && agent.listenerActive;
     return (_jsx(Tooltip, { content: connected ? status.label : "Agent & MCP settings", stableTrigger: true, children: _jsxs(Button, { variant: "quiet", className: "agent-status-button", "aria-label": connected ? `MCP · ${status.label}` : "Settings", "data-test": "settings-button", "data-mcp-connected": connected ? "true" : "false", "data-mcp-listening": listening ? "true" : "false", onClick: () => onOpenSettings("mcp"), children: [connected ? _jsx(ConnectedAgentAvatar, { name: agent.agentClientName }) : _jsxs("span", { className: "agent-status-button__avatars", children: [_jsx(CodexAvatar, {}), _jsx(ClaudeAvatar, {}), _jsx(CursorAvatar, {})] }), _jsx("span", { className: "agent-status-button__label", children: connected ? "MCP" : "Settings" }), connected ? (_jsx("span", { className: "agent-status-button__dot", "data-test": "agent-status-dot", "aria-hidden": "true" })) : null] }) }));