@agent-native/core 0.80.8 → 0.80.10

package/corpus/templates/design/app/root.tsx

@@ -92,7 +92,7 @@ function DbSyncSetup() {
   const qc = useQueryClient();
   useDbSync({
     queryClient: qc,
-    queryKeys: ["designs", "design-systems", "design-files", "design-variants"],
+    queryKeys: ["designs", "design-systems", "design-files"],
     ignoreSource: getBrowserTabId(),
   });
   return null;

package/corpus/templates/design/changelog/2026-06-29-added-a-review-panel-in-the-design-editor-s-inspector-with-a.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Added a Review panel in the design editor's inspector with an on-demand accessibility audit and one-click inline fixes for contrast, tap-target, and focus issues

package/corpus/templates/design/changelog/2026-06-29-containers-no-longer-block-selecting-nested-elements-and-nor.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Containers no longer block selecting nested elements, and normal flow hides unavailable alignment and gap controls.

package/corpus/templates/design/changelog/2026-06-29-copying-and-pasting-layers-no-longer-shows-success-notificat.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Copying and pasting layers no longer shows success notifications.

package/corpus/templates/design/changelog/2026-06-29-design-agents-now-generate-and-refine-variants-from-stronger.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Design agents now generate and refine variants from stronger product-grounded design guidance.

package/corpus/templates/design/changelog/2026-06-29-design-inspector-controls-now-match-figmas-softer-dark-chrome.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Design inspector controls now match Figma's softer dark chrome more closely.

package/corpus/templates/design/changelog/2026-06-29-design-questions-now-appear-as-a-cleaner-canvas-intake-with-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Design questions now appear as a cleaner canvas intake with a chat waiting note.

package/corpus/templates/design/changelog/2026-06-29-design-variant-directions-now-appear-as-board-screens-with-chat-buttons.md

@@ -0,0 +1,5 @@
+---
+type: improved
+---
+
+Design variant directions now appear as regular overview-board screens with one-click chat buttons for choosing which screen to keep.

package/corpus/templates/design/changelog/2026-06-29-device-presets-in-all-screens-view-resize-the-selected-previ.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Device presets in all-screens view resize the selected preview width and height together.

package/corpus/templates/design/changelog/2026-06-29-element-selection-no-longer-snaps-back-to-the-previous-layer.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Element selection no longer snaps back to the previous layer after selecting or pressing Escape.

package/corpus/templates/design/changelog/2026-06-29-frame-resize-measurements-now-stay-beside-the-cursor-while-d.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Frame resize measurements now stay beside the cursor while dragging.

package/corpus/templates/design/changelog/2026-06-29-inspector-number-fields-have-cleaner-tooltips-and-draggable-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Inspector number fields have cleaner tooltips and draggable scrub handles.

package/corpus/templates/design/changelog/2026-06-29-layer-and-canvas-drags-keep-the-layer-list-stable-while-chan.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Layer and canvas drags keep the layer list stable while changes save.

package/corpus/templates/design/changelog/2026-06-29-layer-locking-layer-nesting-generated-question-intake-and-im.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Layer locking, layer nesting, generated-question intake, and image-fill visibility behave more reliably in the visual editor.

package/corpus/templates/design/changelog/2026-06-29-layer-moves-can-be-undone-and-redone-without-flashing-the-ca.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Layer moves can be undone and redone without flashing the canvas preview.

package/corpus/templates/design/changelog/2026-06-29-layer-names-in-the-sidebar-can-scroll-horizontally-instead-o.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Layer names in the sidebar can scroll horizontally instead of truncating at deep nesting.

package/corpus/templates/design/changelog/2026-06-29-layer-nesting-in-the-sidebar-now-uses-tighter-spacing-so-nam.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Layer nesting in the sidebar now uses tighter spacing so names stay readable.

package/corpus/templates/design/changelog/2026-06-29-layers-no-longer-repeat-document-wrapper-rows-when-a-screen-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Layers no longer repeat document wrapper rows when a screen contains malformed HTML.

package/corpus/templates/design/changelog/2026-06-29-overview-previews-now-keep-element-hover-and-selection-tied-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Overview previews now keep element hover and selection tied to the correct screen.

package/corpus/templates/design/changelog/2026-06-29-pressing-escape-now-cancels-a-stuck-screen-drag-in-the-overv.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Pressing Escape now cancels a stuck screen drag in the overview canvas.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-is-easier-to-find-and-named-screens-open-dir.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Screen overview is easier to find and named screens open directly in full-screen edit mode.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-only-highlights-screens-when-the-frame-or-ti.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Screen overview only highlights screens when the frame or title is directly hovered.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-previews-now-resize-to-match-the-selected-de.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Screen overview previews now resize to match the selected device.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-selection-now-uses-a-pointer-cursor-instead-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Design selection now uses a pointer cursor instead of the move cursor.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-selection-outlines-now-stay-locked-to-the-se.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Screen overview selection outlines now stay locked to screens while selecting or resizing.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-zoom-now-reports-real-screen-scale-separatel.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Screen overview zoom now reports real screen scale separately from focused-screen zoom.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-zooming-feels-smoother-and-selection-outline.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Screen overview zooming feels much faster and smoother, in-screen elements can be selected directly, and selection chrome stays crisp above overlapping layers.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-zooming-now-stays-on-the-overview-canvas-ins.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Screen overview zooming now stays on the overview canvas instead of opening a screen automatically.

package/corpus/templates/design/changelog/2026-06-29-screen-previews-use-a-single-blue-hover-border-in-all-screen.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Screen previews use a single blue hover border in all-screens view.

package/corpus/templates/design/changelog/2026-06-29-selected-containers-show-draggable-padding-and-gap-guides-on.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Selected containers show draggable padding and gap guides on hover.

package/corpus/templates/design/changelog/2026-06-29-selecting-a-nested-layer-from-all-screens-now-keeps-you-in-a.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Selecting a nested layer from All screens now keeps you in All screens view.

package/corpus/templates/design/changelog/2026-06-29-share-now-groups-link-sharing-exports-and-agent-handoff.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Share now groups link sharing, exports, and agent handoff in one tabbed menu.

package/corpus/templates/design/changelog/2026-06-29-the-design-editor-adds-a-studio-layer-with-tokens-respon.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+The Design editor gains a Studio layer — design tokens, multi-breakpoint responsive editing, code-backed components with Create component and Inspect code, accessibility and visual-diff review, and a Builder-powered real-app tier — with each capability gated to what the design's source can safely support.

package/corpus/templates/design/changelog/2026-06-29-the-design-editor-loading-skeleton-now-uses-a-softer-charcoa.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+The design editor loading skeleton now uses a softer charcoal canvas while designs load.

package/corpus/templates/design/changelog/2026-06-29-the-device-preview-menu-now-sits-next-to-the-preview-button-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+The device preview menu now sits beside collaborators in the inspector sidebar.

package/corpus/templates/design/changelog/2026-06-29-the-inspector-stays-read-only-while-an-empty-design-is-still.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+The inspector stays read-only while an empty design is still generating.

package/corpus/templates/design/changelog/2026-06-29-the-missing-design-view-now-matches-the-rest-of-the-editor-c.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+The missing-design view is cleaner and matches the rest of the editor chrome.

package/corpus/templates/design/changelog/2026-06-29-the-pen-tool-icon-and-tool-option-menus-better-match-the-edi.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+The Pen tool icon and tool option menus better match the editor chrome.

package/corpus/templates/design/changelog/2026-06-29-typography-controls-now-keep-the-font-name-visible-and-move-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Typography controls now keep the font name visible and move text box sizing into a details popover.

package/corpus/templates/design/changelog/2026-06-30-accessibility-findings-now-offer-a-one-click-fix.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Accessibility findings can now be fixed in one click for common inline issues like low contrast, small tap targets, and focus visibility.

package/corpus/templates/design/changelog/2026-06-30-component-instances-now-have-editable-props-in-the-inspe.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Selecting a component instance now shows editable props in the inspector — change variants, toggle booleans, and edit labels, and the component updates live.

package/corpus/templates/design/changelog/2026-06-30-inspect-code-now-shows-the-elements-opening-tag-at-a-gla.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Inspect code now shows the selected element’s opening tag (tag name and attributes) at a glance.

package/corpus/templates/design/changelog/2026-06-30-shader-fill-presets-can-now-be-applied-to-an-element.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Shader fill presets can now be applied to a selected element, not just previewed.

package/corpus/templates/design/changelog/2026-06-30-the-motion-timeline-can-now-add-a-track-to-any-element-a.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+The motion timeline can now add an animation track to any selected element and write it to CSS, with a live scrub preview.

package/corpus/templates/design/changelog/2026-06-30-visual-editor-selection-layer-paint-and-drawing-controls-are-more-reliable.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Visual editor selection, layer dragging, paint blend modes, and drawing controls are more reliable.

package/corpus/templates/design/e2e/README.md

@@ -33,12 +33,12 @@ action endpoints. Both `.auth/` files are gitignored.
 
 ## Why the editor needs special handling (the hard-won bits)
 
-The design renders inside a `sandbox="allow-scripts"` iframe with **no
-`allow-same-origin`**, and a pointer-capturing shield overlay sits on top. So:
+The design renders inside a sandboxed iframe, and a pointer-capturing shield
+overlay sits on top. So:
 
 | Symptom                                                                 | Wrong approach                         | Right approach                                                                                                                                                                                             |
 | ----------------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Can't read iframe DOM                                                   | `iframe.contentDocument` → `null`      | `page.frameLocator('iframe').locator(...)` — CDP targets the frame directly                                                                                                                                |
+| Reaching into iframe DOM                                                | parent-document locators               | `page.frameLocator('iframe').locator(...)` — Playwright targets the frame directly and stays stable across sandbox/overlay changes                                                                         |
 | Clicks "intercepted by `<div data-agent-native-edit-overlay="shield">`" | normal click (actionability fails)     | `.click({ force: true })` — the shield is _meant_ to get the event and drive selection                                                                                                                     |
 | Asserting an edit happened                                              | reading iframe state                   | listen for the bridge's parent `postMessage`s: `element-select`, `element-hover`, `visual-style-change`, `visual-structure-change` (see `installBridge`/`waitForBridge`)                                   |
 | `page.screenshot()` hangs forever                                       | `page.screenshot()`                    | `cdpScreenshot()` — CDP `Page.captureScreenshot`, no stability wait (the page never idles; the agent-chat panel polls)                                                                                     |

package/corpus/templates/design/e2e/global-setup.ts

@@ -34,7 +34,7 @@ export const FIXTURE_HTML = `<!doctype html>
   </head>
   <body style="margin:0;font-family:system-ui,sans-serif;background:#0f1115;color:#f4f4f5">
     <main style="max-width:720px;margin:0 auto;padding:48px 32px;display:flex;flex-direction:column;gap:24px">
-      <h1 style="font-size:40px;font-weight:800;margin:0">E2E Hero Heading</h1>
+      <h1 style="font-size:40px;font-weight:800;margin:0;color:#f4f4f5">E2E Hero Heading</h1>
       <p style="font-size:18px;line-height:1.6;margin:0;color:#a1a1aa">First fixture paragraph for selection tests.</p>
       <p style="font-size:18px;line-height:1.6;margin:0;color:#a1a1aa">Second fixture paragraph for selection tests.</p>
       <div style="display:flex;flex-direction:row;gap:16px">
@@ -89,23 +89,18 @@ export default async function globalSetup(config: FullConfig) {
   const page = await context.newPage();
 
   try {
-    await page.goto(`${baseURL}/`, { waitUntil: "domcontentloaded" });
+    await page.goto(`${baseURL}/_agent-native/sign-in`, {
+      waitUntil: "domcontentloaded",
+    });
 
     const isSignIn = async () => /sign in/i.test(await page.title());
 
     if (await isSignIn()) {
       // Try to create the account; if it already exists, fall back to sign in.
-      await page.getByRole("textbox", { name: "Email" }).fill(E2E_EMAIL);
-      await page
-        .getByRole("textbox", { name: "Password", exact: true })
-        .fill(E2E_PASSWORD);
-      const confirm = page.getByRole("textbox", { name: "Confirm password" });
-      if (await confirm.count()) await confirm.fill(E2E_PASSWORD);
-      await page
-        .locator("#signup-form")
-        .getByRole("button", { name: "Create account" })
-        .click()
-        .catch(() => {});
+      await page.locator("#s-email").fill(E2E_EMAIL);
+      await page.locator("#s-pass").fill(E2E_PASSWORD);
+      await page.locator("#s-pass2").fill(E2E_PASSWORD);
+      await page.locator("#signup-form button[type='submit']").click();
       await page.waitForTimeout(2500);
 
       if (await isSignIn()) {
@@ -115,15 +110,9 @@ export default async function globalSetup(config: FullConfig) {
           .first()
           .click()
           .catch(() => {});
-        await page.getByRole("textbox", { name: "Email" }).fill(E2E_EMAIL);
-        await page
-          .getByRole("textbox", { name: "Password", exact: true })
-          .fill(E2E_PASSWORD);
-        await page
-          .getByRole("button", { name: /sign in/i })
-          .last()
-          .click()
-          .catch(() => {});
+        await page.locator("#l-email").fill(E2E_EMAIL);
+        await page.locator("#l-pass").fill(E2E_PASSWORD);
+        await page.locator("#login-form button[type='submit']").click();
         await page.waitForTimeout(2500);
       }
     }

package/corpus/templates/design/e2e/helpers.ts

@@ -25,8 +25,10 @@ export async function readSeedDesignId(): Promise<string> {
   return designId;
 }
 
+const DESIGN_PREVIEW_IFRAME_SELECTOR = "iframe[data-design-preview-iframe]";
+
 export function designFrame(page: Page): FrameLocator {
-  return page.frameLocator("iframe");
+  return page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).first().contentFrame();
 }
 
 /** Open the editor for a design and wait for the toolbar + iframe to be ready. */
@@ -35,7 +37,16 @@ export async function gotoEditor(page: Page, designId: string): Promise<void> {
   await expect(
     page.getByRole("button", { name: "Move", exact: true }),
   ).toBeVisible({ timeout: 30_000 });
-  await expect(page.locator("iframe").first()).toBeVisible();
+  await waitForDesignBridgeReady(page);
+}
+
+async function waitForDesignBridgeReady(page: Page): Promise<void> {
+  await expect(
+    page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).first(),
+  ).toBeVisible();
+  await expect(
+    designFrame(page).locator('[data-agent-native-edit-overlay="shield"]'),
+  ).toBeVisible({ timeout: 10_000 });
   // Wait for the iframe bridge to stamp at least one selectable node.
   await expect
     .poll(
@@ -48,14 +59,47 @@ export async function gotoEditor(page: Page, designId: string): Promise<void> {
     .toBeGreaterThan(0);
 }
 
+export async function enterDirectMode(page: Page): Promise<void> {
+  const fullView = page.getByRole("button", { name: "Full view", exact: true });
+  const fullViewVisible = await fullView
+    .first()
+    .waitFor({ state: "visible", timeout: 5_000 })
+    .then(() => true)
+    .catch(() => false);
+  if (fullViewVisible) {
+    await fullView.first().click();
+    await expect(fullView).toHaveCount(0);
+  }
+  await expect
+    .poll(
+      async () =>
+        (
+          await page
+            .locator(DESIGN_PREVIEW_IFRAME_SELECTOR)
+            .first()
+            .boundingBox()
+        )?.width ?? 0,
+      { timeout: 10_000 },
+    )
+    .toBeGreaterThan(600);
+  await waitForDesignBridgeReady(page);
+}
+
 /** Start capturing bridge postMessages on the parent window. */
 export async function installBridge(page: Page): Promise<void> {
   await page.evaluate(() => {
-    (window as any).__bridge = [];
+    const win = window as any;
+    if (!Array.isArray(win.__bridge)) win.__bridge = [];
+    if (win.__bridgeInstalled) return;
+    win.__bridgeInstalled = true;
     window.addEventListener("message", (e: MessageEvent) => {
       const t = (e.data as any)?.type;
-      if (typeof t === "string" && /^(element-|visual-)/.test(t)) {
-        (window as any).__bridge.push(e.data);
+      if (
+        typeof t === "string" &&
+        (/^(element-|visual-)/.test(t) || t === "text-content-change")
+      ) {
+        if (!Array.isArray(win.__bridge)) win.__bridge = [];
+        win.__bridge.push(e.data);
       }
     });
   });
@@ -73,7 +117,9 @@ export async function waitForBridge(
 ): Promise<any> {
   const handle = await page.waitForFunction(
     (t) =>
-      ((window as any).__bridge ?? []).find((m: any) => m.type === t) ?? null,
+      [...((window as any).__bridge ?? [])]
+        .reverse()
+        .find((m: any) => m.type === t) ?? null,
     type,
     { timeout },
   );
@@ -86,14 +132,85 @@ export async function waitForBridge(
  * shield overlay (which is what actually drives selection).
  */
 export async function selectByText(page: Page, text: string): Promise<any> {
+  await enterDirectMode(page);
   await installBridge(page);
   await page.evaluate(() => ((window as any).__bridge = []));
+  const target = designFrame(page).getByText(text, { exact: false }).first();
+  await target.waitFor({ state: "visible", timeout: 8_000 });
+  const box = await target.boundingBox();
+  if (!box) throw new Error(`no bounding box for "${text}"`);
+  await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+  let sel: any;
+  try {
+    sel = await waitForBridge(page, "element-select", 2_000);
+  } catch {
+    await page.evaluate(() => ((window as any).__bridge = []));
+    await dispatchShieldClickByText(page, text);
+    sel = await waitForBridge(page, "element-select");
+  }
+  const payload = sel?.payload ?? sel;
+  expect(String(payload?.textContent ?? "")).toContain(text);
+  return payload;
+}
+
+async function dispatchShieldClickByText(
+  page: Page,
+  text: string,
+): Promise<void> {
   await designFrame(page)
-    .getByText(text, { exact: false })
-    .first()
-    .click({ force: true, timeout: 8_000 });
-  const sel = await waitForBridge(page, "element-select");
-  return sel?.payload ?? sel;
+    .locator("body")
+    .evaluate((_, targetText) => {
+      const normalizeText = (element: HTMLElement) =>
+        (element.textContent ?? "").replace(/\s+/g, " ").trim();
+      const isVisible = (element: HTMLElement) => {
+        const rect = element.getBoundingClientRect();
+        const styles = window.getComputedStyle(element);
+        return (
+          rect.width > 0 &&
+          rect.height > 0 &&
+          styles.display !== "none" &&
+          styles.visibility !== "hidden"
+        );
+      };
+      const shield = document.querySelector<HTMLElement>(
+        '[data-agent-native-edit-overlay="shield"]',
+      );
+      const leafCandidates = Array.from(
+        document.querySelectorAll<HTMLElement>(
+          "h1, h2, h3, h4, h5, h6, p, button, a, label, span, input, textarea",
+        ),
+      ).filter(isVisible);
+      const nodeCandidates = Array.from(
+        document.querySelectorAll<HTMLElement>("[data-agent-native-node-id]"),
+      ).filter(isVisible);
+      const target =
+        nodeCandidates.find(
+          (element) => normalizeText(element) === targetText,
+        ) ??
+        leafCandidates.find(
+          (element) => normalizeText(element) === targetText,
+        ) ??
+        nodeCandidates.find((element) =>
+          normalizeText(element).includes(targetText),
+        ) ??
+        leafCandidates.find((element) =>
+          normalizeText(element).includes(targetText),
+        );
+      if (!shield || !target) {
+        throw new Error(`unable to dispatch selection for "${targetText}"`);
+      }
+      const rect = target.getBoundingClientRect();
+      shield.dispatchEvent(
+        new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: rect.left + rect.width / 2,
+          clientY: rect.top + rect.height / 2,
+          detail: 1,
+        }),
+      );
+    }, text);
 }
 
 /** Number of inputs in the right-hand inspector (proxy for "inspector populated"). */