@agent-native/core 0.80.10 → 0.81.0

package/corpus/templates/design/app/pages/Index.tsx

@@ -249,6 +249,7 @@ export default function Index() {
       prompt: string,
       files: UploadedFile[],
       options: PromptComposerSubmitOptions,
+      pendingOptions?: { skipQuestions?: boolean },
     ) => {
       // Derive a short title from the prompt — first line, ~40 chars max,
       // word-boundary truncated. The full prompt still drives generation;
@@ -266,6 +267,7 @@ export default function Index() {
         files,
         title,
         designSystemId,
+        skipQuestions: pendingOptions?.skipQuestions,
         ...options,
       });
 
@@ -425,7 +427,9 @@ export default function Index() {
         ) : designs.length === 0 ? (
           <EmptyState
             onCreateDesign={openNewDesign}
-            onStarterPrompt={(prompt) => handleSubmitPrompt(prompt, [], {})}
+            onStarterPrompt={(prompt) =>
+              handleSubmitPrompt(prompt, [], {}, { skipQuestions: true })
+            }
           />
         ) : (
           <>

package/corpus/templates/design/changelog/2026-06-30-applying-the-one-click-fix-for-a-small-tap-target-accessibil.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Applying the one-click fix for a small tap-target accessibility finding now clears it on re-audit instead of having it reappear

package/corpus/templates/design/changelog/2026-06-30-canvas-creation-screen-dragging-undo-redo-and-image-fill-edi.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Canvas creation, screen dragging, undo/redo, and image fill edits are more reliable in the visual editor.

package/corpus/templates/design/changelog/2026-06-30-component-prop-edits-and-shader-fills-now-preserve-rapid-sam.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Component prop edits and shader fills now preserve rapid same-tab Design Studio changes.

package/corpus/templates/design/changelog/2026-06-30-design-can-browse-figma-library-components-and-insert-them-i.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Design can browse Figma library components and insert them into the active screen with source provenance.

package/corpus/templates/design/changelog/2026-06-30-design-now-has-a-figma-style-left-rail-for-file-agent-assets.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design now has a Figma-style left rail for File, Agent, Assets, Tools, and Tokens.

package/corpus/templates/design/changelog/2026-06-30-design-now-has-native-components-embedded-media-and-figma-im.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Design now has native components, embedded media, and Figma imports as separate asset tabs.

package/corpus/templates/design/changelog/2026-06-30-design-preview-now-includes-a-publish-app-waitlist-option-fr.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design preview now includes a publish app waitlist option from the play menu.

package/corpus/templates/design/changelog/2026-06-30-design-s-left-rail-now-matches-the-sidebar-chrome-and-uses-t.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design's left rail now matches the sidebar chrome and uses tighter labels.

package/corpus/templates/design/changelog/2026-06-30-design-s-tools-create-menu-now-stays-compact-instead-of-rend.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Design's Tools create menu now stays compact instead of rendering the full chat setup flow.

package/corpus/templates/design/changelog/2026-06-30-design-starter-prompts-now-begin-generating-immediately-and-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Design starter prompts now begin generating immediately and avoid stalled native tool calls.

package/corpus/templates/design/changelog/2026-06-30-design-token-edits-now-stay-visible-in-previews-and-token-li.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Design token edits now stay visible in previews and token lists after saving new CSS variables.

package/corpus/templates/design/changelog/2026-06-30-design-tools-now-use-a-quieter-figma-style-list-layout.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design tools now use a quieter Figma-style list layout.

package/corpus/templates/design/changelog/2026-06-30-drawing-rectangles-on-the-all-screens-canvas-no-longer-flash.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Drawing rectangles on the all screens canvas no longer flashes a default-size preview and selects the new rectangle.

package/corpus/templates/design/changelog/2026-06-30-fixed-code-native-design-studio-edits-so-component-props-mot.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Fixed Code-Native Design Studio edits so component props, motion CSS, shader fills, audits, and exports persist cleanly.

package/corpus/templates/design/changelog/2026-06-30-fixed-visual-editing-hover-overlays-and-spacing-handles-so-s.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Fixed visual editing hover overlays and spacing handles so selection stays steady.

package/corpus/templates/design/changelog/2026-06-30-motion-edits-now-save-automatically-without-a-separate-css-a.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Motion edits now save automatically without a separate CSS apply button.

package/corpus/templates/design/changelog/2026-06-30-motion-timelines-now-reopen-as-editable-tracks-after-writing.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Motion timelines now reopen as editable tracks after writing keyframes to CSS.

package/corpus/templates/design/changelog/2026-06-30-new-design-prompts-with-uploaded-screenshots-work-reliably-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+New design prompts with uploaded screenshots work reliably on hosted deployments.

package/corpus/templates/design/changelog/2026-06-30-screen-previews-in-all-screens-view-now-keep-rounded-outline.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Screen previews in all-screens view now keep rounded outlines visible at the corners.

package/corpus/templates/design/changelog/2026-06-30-selection-outlines-now-sit-flush-on-rectangles-drawn-directl.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Selection outlines now sit flush on rectangles drawn directly on the all screens canvas.

package/corpus/templates/design/changelog/2026-06-30-share-options-use-a-tighter-design-editor-popover-with-compa.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Share options use a tighter Design editor popover with compact tabs and controls.

package/corpus/templates/design/changelog/2026-06-30-the-collapsed-motion-panel-now-stays-tucked-under-the-left-s.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+The Motion timeline now opens from a quiet footer row in the Layers panel.

package/corpus/templates/design/changelog/2026-06-30-the-design-inspector-now-shows-states-and-review-in-a-tighte.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+The Design inspector now shows States and Review in a tighter, less noisy sidebar layout.

package/corpus/templates/design/changelog/2026-06-30-the-sidebar-keeps-the-organization-picker-space-stable-while.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+The sidebar keeps the organization picker space stable while account details load.

package/corpus/templates/design/changelog/2026-06-30-tokens-can-now-be-imported-from-pasted-notes-code-files-fold.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Tokens can now be imported from pasted notes, code files, folders, or the current design instead of entering each one by hand.

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

@@ -1,6 +1,7 @@
 import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 
+import { createClient } from "@libsql/client";
 import { chromium, type FullConfig } from "@playwright/test";
 
 /**
@@ -19,6 +20,12 @@ const AUTH_DIR = path.join(import.meta.dirname, ".auth");
 const STATE_PATH = path.join(AUTH_DIR, "state.json");
 const SEED_PATH = path.join(AUTH_DIR, "seed.json");
 const BROWSER_CHANNEL = process.env.E2E_BROWSER_CHANNEL;
+const E2E_DATABASE_URL = `file:${path.join(
+  import.meta.dirname,
+  "..",
+  "data",
+  "e2e.db",
+)}`;
 
 /**
  * Fixture HTML with distinct, text-identifiable elements. Plain inline styles
@@ -31,6 +38,12 @@ export const FIXTURE_HTML = `<!doctype html>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>E2E Fixture</title>
+    <style>
+      :root {
+        --e2e-accent-color: #6366f1;
+        --e2e-radius: 14px;
+      }
+    </style>
   </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">
@@ -38,8 +51,26 @@ export const FIXTURE_HTML = `<!doctype html>
       <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">
-        <button style="padding:14px 28px;border-radius:10px;border:0;background:#6366f1;color:#fff;font-size:16px">Alpha Button</button>
-        <button style="padding:14px 28px;border-radius:10px;border:0;background:#22c55e;color:#06240f;font-size:16px">Beta Button</button>
+        <button data-agent-native-node-id="e2e-alpha-button" data-agent-native-layer-name="Alpha Button" style="padding:14px 28px;border-radius:10px;border:0;background:#6366f1;color:#fff;font-size:16px">Alpha Button</button>
+        <button data-agent-native-node-id="e2e-beta-button" data-agent-native-layer-name="Beta Button" style="padding:14px 28px;border-radius:10px;border:0;background:#22c55e;color:#06240f;font-size:16px">Beta Button</button>
+      </div>
+      <button
+        data-agent-native-node-id="e2e-component-button"
+        data-agent-native-layer-name="E2E Component Button"
+        data-agent-native-component="E2EButton"
+        data-agent-native-prop-variant="primary"
+        data-agent-native-prop-size="md"
+        style="align-self:flex-start;padding:14px 28px;border-radius:var(--e2e-radius);border:0;background:var(--e2e-accent-color);color:#fff;font-size:16px"
+      >Variant CTA</button>
+      <div
+        data-agent-native-node-id="e2e-token-sample"
+        data-agent-native-layer-name="E2E Token Sample"
+        style="padding:18px 20px;border-radius:var(--e2e-radius);background:var(--e2e-accent-color);color:#fff;font-weight:700"
+      >Token swatch sample</div>
+      <div style="display:flex;align-items:center;gap:12px">
+        <img data-agent-native-node-id="e2e-audit-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" style="width:32px;height:32px;border-radius:8px;background:#27272a" />
+        <input data-agent-native-node-id="e2e-audit-input" placeholder="Email" style="height:32px;border-radius:8px;border:1px solid #3f3f46;background:#18181b;color:#fff;padding:0 10px" />
+        <button data-agent-native-node-id="e2e-audit-focus-button" class="outline-none" style="height:32px;border-radius:8px;border:1px solid #3f3f46;background:#27272a;color:#fff;padding:0 10px">Focus me</button>
       </div>
       <div style="padding:8px;border:1px solid #27272a;border-radius:12px">
         <div style="padding:8px;border:1px solid #3f3f46;border-radius:10px">
@@ -76,6 +107,63 @@ async function postAction(
   return res.json();
 }
 
+function componentIndexId(designId: string, name: string): string {
+  return `ci_${designId}_${name.toLowerCase().replace(/[^a-z0-9]/g, "_")}`;
+}
+
+export async function seedComponentVariantMetadata(
+  designId: string,
+): Promise<void> {
+  const client = createClient({ url: E2E_DATABASE_URL });
+  const name = "E2EButton";
+  const now = new Date().toISOString();
+  const variants = JSON.stringify({
+    variant: ["primary", "secondary", "ghost"],
+    size: ["sm", "md", "lg"],
+  });
+  const props = JSON.stringify([
+    { name: "variant", type: "primary | secondary | ghost" },
+    { name: "size", type: "sm | md | lg" },
+  ]);
+
+  try {
+    const result = await client.execute({
+      sql: `
+        UPDATE component_index
+        SET variants = ?, props = ?, file_path = ?, export_name = ?, updated_at = ?
+        WHERE design_id = ? AND name = ?
+      `,
+      args: [variants, props, "index.html", name, now, designId, name],
+    });
+
+    if (result.rowsAffected > 0) return;
+
+    await client.execute({
+      sql: `
+        INSERT INTO component_index (
+          id, design_id, name, file_path, export_name, props, variants,
+          runtime_selectors, owner_email, created_at, updated_at
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+      `,
+      args: [
+        componentIndexId(designId, name),
+        designId,
+        name,
+        "index.html",
+        name,
+        props,
+        variants,
+        JSON.stringify(['[data-agent-native-node-id="e2e-component-button"]']),
+        E2E_EMAIL,
+        now,
+        now,
+      ],
+    });
+  } finally {
+    client.close();
+  }
+}
+
 export default async function globalSetup(config: FullConfig) {
   const baseURL =
     (config.projects[0]?.use?.baseURL as string | undefined) ??
@@ -148,6 +236,10 @@ export default async function globalSetup(config: FullConfig) {
       content: FIXTURE_HTML,
       fileType: "html",
     });
+    await postAction(context.request, baseURL, "index-components", {
+      designId,
+    });
+    await seedComponentVariantMetadata(designId);
 
     await writeFile(SEED_PATH, JSON.stringify({ designId }, null, 2));
     // eslint-disable-next-line no-console

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

@@ -1,7 +1,14 @@
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 
-import { expect, type Page, type FrameLocator } from "@playwright/test";
+import {
+  expect,
+  type Page,
+  type FrameLocator,
+  type Locator,
+} from "@playwright/test";
+
+import { FIXTURE_HTML, SEED_TITLE } from "./global-setup";
 
 /**
  * Helpers for driving the Design visual editor in real Chrome.
@@ -25,15 +32,122 @@ export async function readSeedDesignId(): Promise<string> {
   return designId;
 }
 
+function e2eBaseUrl(page: Page): string {
+  const currentUrl = page.url();
+  if (currentUrl && currentUrl !== "about:blank") {
+    return new URL(currentUrl).origin;
+  }
+  return (
+    process.env.E2E_BASE_URL ??
+    `http://127.0.0.1:${process.env.E2E_PORT ?? "9333"}`
+  );
+}
+
+async function postAction(
+  page: Page,
+  name: string,
+  input: Record<string, unknown>,
+): Promise<any> {
+  const res = await page.request.post(
+    `${e2eBaseUrl(page)}/_agent-native/actions/${name}`,
+    {
+      data: input,
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+  if (!res.ok()) {
+    throw new Error(
+      `action ${name} failed: ${res.status()} ${await res.text()}`,
+    );
+  }
+  return res.json();
+}
+
+export async function createFixtureDesign(
+  page: Page,
+  title = SEED_TITLE,
+): Promise<string> {
+  const created = await postAction(page, "create-design", {
+    title,
+    projectType: "prototype",
+  });
+  const designId: string | undefined =
+    created?.id ?? created?.data?.id ?? created?.design?.id;
+  if (!designId) {
+    throw new Error(
+      `create-design did not return an id: ${JSON.stringify(created)}`,
+    );
+  }
+  await postAction(page, "create-file", {
+    designId,
+    filename: "index.html",
+    content: FIXTURE_HTML,
+    fileType: "html",
+  });
+  return designId;
+}
+
 const DESIGN_PREVIEW_IFRAME_SELECTOR = "iframe[data-design-preview-iframe]";
+const E2E_BASE_URL = process.env.E2E_BASE_URL;
+const E2E_BASE_PATH = (() => {
+  if (!E2E_BASE_URL) return "";
+  try {
+    return new URL(E2E_BASE_URL).pathname.replace(/\/$/, "");
+  } catch {
+    return "";
+  }
+})();
+
+export function appPath(path: string): string {
+  const route = new URL(path, "http://agent-native.local");
+  if (E2E_BASE_URL && E2E_BASE_PATH) {
+    const url = new URL(E2E_BASE_URL);
+    // dev-lazy strips the app mount (/design) before handing the request to the
+    // app, so the editor's own /design/:id route intentionally becomes
+    // /design/design/:id when E2E_BASE_URL points at the gateway mount.
+    url.pathname = `${E2E_BASE_PATH}${route.pathname}`;
+    url.search = route.search;
+    url.hash = route.hash;
+    return url.toString();
+  }
+  return `${route.pathname}${route.search}${route.hash}`;
+}
 
 export function designFrame(page: Page): FrameLocator {
-  return page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).first().contentFrame();
+  return page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).last().contentFrame();
+}
+
+async function selectableNodeByText(
+  page: Page,
+  text: string,
+): Promise<Locator> {
+  const candidates = designFrame(page).locator("[data-agent-native-node-id]", {
+    hasText: text,
+  });
+  const fallback = designFrame(page).getByText(text, { exact: false }).first();
+  const count = await candidates.count();
+  if (count === 0) return fallback;
+
+  let bestIndex = 0;
+  let bestArea = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < count; index += 1) {
+    const candidate = candidates.nth(index);
+    const box = await candidate.boundingBox().catch(() => null);
+    if (!box || box.width <= 0 || box.height <= 0) continue;
+    const area = box.width * box.height;
+    if (area < bestArea) {
+      bestIndex = index;
+      bestArea = area;
+    }
+  }
+  return candidates.nth(bestIndex);
 }
 
 /** Open the editor for a design and wait for the toolbar + iframe to be ready. */
 export async function gotoEditor(page: Page, designId: string): Promise<void> {
-  await page.goto(`/design/${designId}`, { waitUntil: "domcontentloaded" });
+  await page.goto(appPath(`/design/${designId}`), {
+    waitUntil: "domcontentloaded",
+  });
   await expect(
     page.getByRole("button", { name: "Move", exact: true }),
   ).toBeVisible({ timeout: 30_000 });
@@ -44,9 +158,16 @@ 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 });
+  const overviewChromeVisible = await page
+    .getByRole("button", { name: "Full view", exact: true })
+    .first()
+    .isVisible()
+    .catch(() => false);
+  if (!overviewChromeVisible) {
+    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(
@@ -57,6 +178,25 @@ async function waitForDesignBridgeReady(page: Page): Promise<void> {
       { timeout: 20_000 },
     )
     .toBeGreaterThan(0);
+  if (overviewChromeVisible) {
+    await expect(page.locator("[data-screen-shell]").first()).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect
+      .poll(
+        async () => {
+          const box = await page
+            .locator("[data-screen-shell]")
+            .first()
+            .locator("[data-screen-card]")
+            .boundingBox();
+          return box && box.width > 0 && box.height > 0;
+        },
+        { timeout: 10_000 },
+      )
+      .toBeTruthy();
+    await page.waitForTimeout(750);
+  }
 }
 
 export async function enterDirectMode(page: Page): Promise<void> {
@@ -76,7 +216,7 @@ export async function enterDirectMode(page: Page): Promise<void> {
         (
           await page
             .locator(DESIGN_PREVIEW_IFRAME_SELECTOR)
-            .first()
+            .last()
             .boundingBox()
         )?.width ?? 0,
       { timeout: 10_000 },
@@ -135,7 +275,7 @@ 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();
+  const target = await selectableNodeByText(page, text);
   await target.waitFor({ state: "visible", timeout: 8_000 });
   const box = await target.boundingBox();
   if (!box) throw new Error(`no bounding box for "${text}"`);
@@ -157,60 +297,25 @@ async function dispatchShieldClickByText(
   page: Page,
   text: string,
 ): Promise<void> {
+  const target = await selectableNodeByText(page, text);
+  await target.waitFor({ state: "visible", timeout: 8_000 });
+  const rect = await target.boundingBox();
+  if (!rect) throw new Error(`unable to dispatch selection for "${text}"`);
+  const frameRect = await page
+    .locator(DESIGN_PREVIEW_IFRAME_SELECTOR)
+    .last()
+    .boundingBox();
+  if (!frameRect) throw new Error("unable to locate design iframe");
   await designFrame(page)
-    .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);
+    .locator('[data-agent-native-edit-overlay="shield"]')
+    .first()
+    .dispatchEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      clientX: rect.x - frameRect.x + rect.width / 2,
+      clientY: rect.y - frameRect.y + rect.height / 2,
+      detail: 1,
+    });
 }
 
 /** Number of inputs in the right-hand inspector (proxy for "inspector populated"). */
@@ -231,10 +336,8 @@ export async function dragCanvasByText(
 ): Promise<string[]> {
   await selectByText(page, text);
   await page.evaluate(() => ((window as any).__bridge = []));
-  const box = await designFrame(page)
-    .getByText(text, { exact: false })
-    .first()
-    .boundingBox();
+  const target = await selectableNodeByText(page, text);
+  const box = await target.boundingBox();
   if (!box) throw new Error(`no bounding box for "${text}"`);
   const cx = box.x + box.width / 2;
   const cy = box.y + box.height / 2;