@agent-native/core 0.80.7 → 0.80.8

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

@@ -804,6 +804,20 @@ function uniqueLayerId(prefix: string): string {
     : `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
 
+/**
+ * Re-stamp every `data-agent-native-node-id` in duplicated screen content with a
+ * fresh unique id. Without this, a duplicated screen carries the SAME node ids as
+ * its source, which collapses the cross-file layer-owner map (selecting a layer
+ * in one screen resolves to the other) and can produce a malformed aggregate
+ * projection.
+ */
+function reassignDuplicatedNodeIds(content: string): string {
+  return content.replace(
+    /data-agent-native-node-id="[^"]*"/g,
+    () => `data-agent-native-node-id="${uniqueLayerId("copy")}"`,
+  );
+}
+
 function primitiveLayerName(primitive: CanvasPrimitiveInsert): string {
   switch (primitive.kind) {
     case "frame":
@@ -1353,12 +1367,29 @@ function codeLayerTreeToPanelNodes(
   hiddenIds: Set<string>,
   inheritedLocked = false,
   inheritedHidden = false,
+  // Ancestor-path ids guarding against a cyclic projection (e.g. duplicate or
+  // empty node ids like "an-" that make a node its own descendant) recursing
+  // forever and crashing the whole editor with a stack overflow.
+  ancestors: Set<string> = new Set(),
 ): LayersPanelNode[] {
   return nodes.map((node) => {
     const selfLocked = lockedIds.has(node.id);
     const selfHidden = hiddenIds.has(node.id);
     const locked = inheritedLocked || selfLocked;
     const hidden = inheritedHidden || selfHidden;
+    let children: LayersPanelNode[] = [];
+    if (!ancestors.has(node.id)) {
+      ancestors.add(node.id);
+      children = codeLayerTreeToPanelNodes(
+        node.children,
+        lockedIds,
+        hiddenIds,
+        locked,
+        hidden,
+        ancestors,
+      );
+      ancestors.delete(node.id);
+    }
     return {
       id: node.id,
       name: node.name,
@@ -1372,13 +1403,7 @@ function codeLayerTreeToPanelNodes(
       hideable: true,
       locked,
       hidden,
-      children: codeLayerTreeToPanelNodes(
-        node.children,
-        lockedIds,
-        hiddenIds,
-        locked,
-        hidden,
-      ),
+      children,
     };
   });
 }
@@ -1395,12 +1420,20 @@ function collectEffectiveCodeLayerState(
   inheritedLocked: boolean,
   inheritedHidden: boolean,
   state: EffectiveCodeLayerState,
+  // Ids on the current ancestor path — guards against a malformed/cyclic
+  // projection (e.g. a node that appears as its own descendant from duplicate
+  // node ids) recursing forever and crashing the whole editor with a stack
+  // overflow. A true cycle is skipped; duplicate ids in disjoint subtrees are
+  // still visited.
+  ancestors: Set<string> = new Set(),
 ): EffectiveCodeLayerState {
   nodes.forEach((node) => {
+    if (ancestors.has(node.id)) return;
     const locked = inheritedLocked || lockedIds.has(node.id);
     const hidden = inheritedHidden || hiddenIds.has(node.id);
     if (locked) state.lockedIds.add(node.id);
     if (hidden) state.hiddenIds.add(node.id);
+    ancestors.add(node.id);
     collectEffectiveCodeLayerState(
       node.children,
       lockedIds,
@@ -1408,7 +1441,9 @@ function collectEffectiveCodeLayerState(
       locked,
       hidden,
       state,
+      ancestors,
     );
+    ancestors.delete(node.id);
   });
   return state;
 }
@@ -2282,9 +2317,15 @@ export default function DesignEditor() {
   const [overviewSelectAllRequest, setOverviewSelectAllRequest] = useState(0);
   const [overviewClearSelectionRequest, setOverviewClearSelectionRequest] =
     useState(0);
+  const [overviewSelectedScreenIds, setOverviewSelectedScreenIds] = useState<
+    string[]
+  >([]);
   const [hasCanvasClipboard, setHasCanvasClipboard] = useState(false);
   const [hasPropsClipboard, setHasPropsClipboard] = useState(false);
   const copiedLayerHtmlRef = useRef<string | null>(null);
+  // Cascade offset for repeated keyboard pastes so successive clones don't stack
+  // pixel-perfectly on top of each other. Reset on each fresh copy/cut.
+  const pasteCascadeRef = useRef(0);
   const copiedStylePropsRef = useRef<Record<string, string> | null>(null);
   const spaceHandPreviousToolRef = useRef<DesignTool | null>(null);
   const hasSelectedElement = Boolean(selectedElement);
@@ -3360,7 +3401,12 @@ export default function DesignEditor() {
                 ? command.screen
                 : null;
       const targetFile = findDesignFileByScreenTarget(files, target);
-      if (target && !targetFile && files.length === 0) return false;
+      // A navigate command can name a screen the agent just created that the
+      // get-design query hasn't refetched yet. Treat any unresolved named target
+      // as not-yet-applied (return false) so the app-state key is preserved and
+      // re-applied on the next tick once the file loads — not just when there are
+      // zero files. Otherwise the navigate is silently consumed and dropped.
+      if (target && !targetFile) return false;
 
       const inspectorTab =
         command.inspectorTab === "design" ||
@@ -3475,7 +3521,7 @@ export default function DesignEditor() {
         {
           designId: id,
           filename,
-          content: source.content,
+          content: reassignDuplicatedNodeIds(source.content),
           fileType: normalizedDesignFileType(source.fileType),
         } as any,
         {
@@ -4155,7 +4201,6 @@ export default function DesignEditor() {
       setCollabContent(nextContent);
       lastLocalContentRef.current = nextContent;
       if (id) {
-        const optimisticUpdatedAt = new Date().toISOString();
         queryClient.setQueryData(
           ["action", "get-design", { id }],
           (old: any) => {
@@ -4166,11 +4211,12 @@ export default function DesignEditor() {
               ...old,
               files: old.files.map((file: DesignFile) =>
                 file.id === activeFile.id
-                  ? {
-                      ...file,
-                      content: nextContent,
-                      updatedAt: optimisticUpdatedAt,
-                    }
+                  ? // Update content optimistically but keep the file's prior
+                    // (server-clock) updatedAt. Seeding the reconcile watermark
+                    // from a client-clock timestamp can, under clock skew, make a
+                    // later server-authored agent edit look "older" and get
+                    // dropped by the watermark gate (agent edit silently lost).
+                    { ...file, content: nextContent }
                   : file,
               ),
             };
@@ -4433,7 +4479,7 @@ export default function DesignEditor() {
       files: UploadedFile[],
       options: PromptComposerSubmitOptions,
     ) => {
-      if (!design) return;
+      if (!design || generating || pendingGenerationActive) return;
       const trimmed = prompt.trim();
       if (!trimmed) return;
       const fileContext = formatUploadedFileContext(files);
@@ -4499,7 +4545,13 @@ export default function DesignEditor() {
         fileType: file.fileType,
       })),
       selectedScreenIds:
-        viewMode === "overview" && activeFile?.id ? [activeFile.id] : [],
+        viewMode === "overview"
+          ? overviewSelectedScreenIds.length
+            ? overviewSelectedScreenIds
+            : activeFile?.id
+              ? [activeFile.id]
+              : []
+          : [],
       selectedElement,
       hoveredElement,
       mode,
@@ -4553,6 +4605,7 @@ export default function DesignEditor() {
     mode,
     activeTool,
     activeInspectorTab,
+    overviewSelectedScreenIds,
     viewMode,
     zoom,
   ]);
@@ -4610,7 +4663,13 @@ export default function DesignEditor() {
         fileType: file.fileType,
       })),
       selectedScreenIds:
-        viewMode === "overview" && activeFile?.id ? [activeFile.id] : [],
+        viewMode === "overview"
+          ? overviewSelectedScreenIds.length
+            ? overviewSelectedScreenIds
+            : activeFile?.id
+              ? [activeFile.id]
+              : []
+          : [],
       selectedElement,
       mode,
       activeTool,
@@ -4625,6 +4684,7 @@ export default function DesignEditor() {
       files,
       id,
       mode,
+      overviewSelectedScreenIds,
       selectedElement,
       tweakSelections,
       viewMode,
@@ -4699,6 +4759,16 @@ export default function DesignEditor() {
         ([, value]) => value !== undefined,
       );
       if (entries.length === 0) return;
+      // Base every patch off the freshest known content, not the closed-over
+      // render value. Handlers that fire several onStyleChange calls in one
+      // synchronous user action (e.g. fixed-size text → width+height+whiteSpace,
+      // constraints center → both axes, linked padding → 4 sides) would
+      // otherwise each read the same pre-render `activeContent` and clobber one
+      // another, so only the last property survived in the saved HTML. Since we
+      // advance lastLocalContentRef.current to resolvedNextContent below, the
+      // next synchronous call reads the previous call's result and the patches
+      // compose. Falls back to activeContent when the ref is unset (file switch).
+      const baseContent = lastLocalContentRef.current ?? activeContent;
       const [firstProperty, firstValue] = entries[0];
       const capability =
         selectedElement?.editCapabilities?.find((item) =>
@@ -4725,7 +4795,7 @@ export default function DesignEditor() {
             : entries
                 .map(([property, value]) => `${property}: ${value}`)
                 .join("; "),
-        previousContent: activeContent,
+        previousContent: baseContent,
         capability: capability?.kind ?? "deterministic-style-edit",
         confidence: capability?.confidence ?? 0.92,
         status: "runtime",
@@ -4738,10 +4808,10 @@ export default function DesignEditor() {
         });
       }
 
-      const nextContent = applyInlineStylesToHtml(activeContent, selector, {
+      const nextContent = applyInlineStylesToHtml(baseContent, selector, {
         ...Object.fromEntries(entries),
       });
-      const projection = buildCodeLayerProjection(activeContent);
+      const projection = buildCodeLayerProjection(baseContent);
       const targetNode = resolveCodeLayerNodeFromBridge(
         projection,
         selector,
@@ -4769,7 +4839,7 @@ export default function DesignEditor() {
           }
           return { content: patch.content, failed: null };
         },
-        { content: activeContent, failed: null },
+        { content: baseContent, failed: null },
       );
       const resolvedNextContent = stylePatch.failed
         ? nextContent
@@ -5140,6 +5210,7 @@ export default function DesignEditor() {
     const html = getElementOuterHtml(activeContent, selectedElement.selector);
     if (!html) return;
     copiedLayerHtmlRef.current = html;
+    pasteCascadeRef.current = 0;
     setHasCanvasClipboard(true);
     try {
       await navigator.clipboard.writeText(html);
@@ -5152,32 +5223,67 @@ export default function DesignEditor() {
   const handlePasteSelection = useCallback(
     (position?: { x: number; y: number }) => {
       if (!activeFile || !copiedLayerHtmlRef.current) return;
+      // Explicit positions (e.g. "Paste here" at the cursor) are honored as-is.
+      // Keyboard pastes cascade by 16px each so repeats don't stack exactly.
+      const targetPosition =
+        position ??
+        (() => {
+          const offset = pasteCascadeRef.current * 16;
+          return { x: 120 + offset, y: 120 + offset };
+        })();
       const nextContent = cloneHtmlLayerAtPosition(
         activeContent,
         copiedLayerHtmlRef.current,
-        position ?? { x: 120, y: 120 },
+        targetPosition,
       );
       if (!nextContent) return;
+      if (!position) pasteCascadeRef.current += 1;
       applyLocalContentUpdate(nextContent);
       toast.success(t("designEditor.toasts.pasted"));
     },
     [activeContent, activeFile, applyLocalContentUpdate, t],
   );
 
+  const handlePasteOverSelection = useCallback(() => {
+    if (!activeFile || !copiedLayerHtmlRef.current) return;
+    if (selectedElement?.boundingRect) {
+      const { x, y } = selectedElement.boundingRect;
+      const nextContent = cloneHtmlLayerAtPosition(
+        activeContent,
+        copiedLayerHtmlRef.current,
+        { x, y },
+      );
+      if (!nextContent) return;
+      applyLocalContentUpdate(nextContent);
+      toast.success(t("designEditor.toasts.pasted"));
+    } else {
+      handlePasteSelection();
+    }
+  }, [
+    activeContent,
+    activeFile,
+    applyLocalContentUpdate,
+    handlePasteSelection,
+    selectedElement,
+    t,
+  ]);
+
   const handleDuplicateSelection = useCallback(() => {
     if (selectedElement?.selector) {
       const html = getElementOuterHtml(activeContent, selectedElement.selector);
-      if (html) {
-        const rect = selectedElement.boundingRect;
-        const nextContent = cloneHtmlLayerAtPosition(activeContent, html, {
-          x: rect.x + 16,
-          y: rect.y + 16,
-        });
-        if (nextContent) {
-          applyLocalContentUpdate(nextContent);
-          return;
-        }
+      const rect = selectedElement.boundingRect;
+      const nextContent = html
+        ? cloneHtmlLayerAtPosition(activeContent, html, {
+            x: rect.x + 16,
+            y: rect.y + 16,
+          })
+        : null;
+      if (nextContent) {
+        applyLocalContentUpdate(nextContent);
+      } else {
+        toast.error(t("designEditor.toasts.duplicateElementFailed"));
       }
+      return;
     }
     if (activeFile) handleDuplicateScreen(activeFile.id);
   }, [
@@ -5189,6 +5295,41 @@ export default function DesignEditor() {
   ]);
 
   const handleDeleteSelection = useCallback(() => {
+    // Multi-select delete: when several DOM/code layers are selected in the
+    // panel, remove all of them — not just the single focused element. Compose
+    // the removals against the running content (re-projecting each pass) so
+    // nested selections resolve correctly and earlier removals aren't clobbered.
+    const candidateIds = selectedLayerIdsState.filter(
+      (layerId) =>
+        layerId &&
+        !layerId.startsWith("__") &&
+        !files.some((file) => file.id === layerId),
+    );
+    if (candidateIds.length > 1) {
+      let content = activeContent;
+      const removedSelectors: string[] = [];
+      for (const layerId of candidateIds) {
+        const projection = buildCodeLayerProjection(content);
+        const node =
+          projection.nodes.find((candidate) => candidate.id === layerId) ??
+          resolveCodeLayerNodeFromBridge(projection, layerId, layerId);
+        if (!node) continue;
+        const next = removeCodeLayerNodeFromHtml(content, node);
+        if (!next) continue;
+        const selector = preferredCodeLayerSelector(node);
+        if (selector) removedSelectors.push(selector);
+        content = next;
+      }
+      if (content !== activeContent) {
+        removedSelectors.forEach((selector) => deleteRuntimeElement(selector));
+        applyLocalContentUpdate(content, { refreshPreview: false });
+        setSelectedElement(null);
+        setSelectedLayerIdsState([]);
+        return;
+      }
+      // Nothing resolved (stale ids) — fall through to the single path.
+    }
+
     if (!selectedElement?.selector) return;
     const projection = buildCodeLayerProjection(activeContent);
     const targetNode = resolveCodeLayerNodeFromBridge(
@@ -5210,9 +5351,20 @@ export default function DesignEditor() {
     activeContent,
     applyLocalContentUpdate,
     deleteRuntimeElement,
+    files,
     selectedElement,
+    selectedLayerIdsState,
   ]);
 
+  const handleCutSelection = useCallback(async () => {
+    if (!selectedElement?.selector) return;
+    // Copy first (populates the internal clipboard ref even if the async
+    // navigator.clipboard write is blocked — handleCopySelection swallows that
+    // error) then remove the element so a subsequent paste can re-insert it.
+    await handleCopySelection();
+    handleDeleteSelection();
+  }, [handleCopySelection, handleDeleteSelection, selectedElement]);
+
   const handleDeleteOverviewSelection = useCallback(
     (selectedIds: string[]) => {
       if (!selectedIds.length || files.length <= 1) return false;
@@ -5752,8 +5904,9 @@ export default function DesignEditor() {
     onCommentTool: handlePinToolToggle,
     onScaleTool: handleScaleTool,
     onCopy: handleCopySelection,
+    onCut: handleCutSelection,
     onPaste: () => handlePasteSelection(),
-    onPasteOver: () => handlePasteSelection(),
+    onPasteOver: handlePasteOverSelection,
     onCopyProps: handleCopyProps,
     onPasteProps: handlePasteProps,
     onCopyAsCode: handleCopySelection,
@@ -6853,6 +7006,27 @@ ${serializedHtml}
 
   const getContextCanvasPoint = useCallback(
     ({ clientX, clientY }: { clientX: number; clientY: number }) => {
+      // In single-screen mode the iframe is inside a scale(zoom/100) wrapper
+      // that also centers the content. Using the iframe's own
+      // getBoundingClientRect() already incorporates centering/pan because the
+      // rect is measured in screen space after the CSS transform. Dividing by
+      // the zoom factor converts from post-scale screen-pixels back to the
+      // document coordinate space written into left/top by cloneHtmlLayerAtPosition.
+      if (viewMode === "single") {
+        const iframe = canvasContainerRef.current?.querySelector<HTMLElement>(
+          "[data-design-preview-iframe]",
+        );
+        if (iframe) {
+          const iframeRect = iframe.getBoundingClientRect();
+          const factor = zoom / 100;
+          return {
+            x: Math.max(0, (clientX - iframeRect.left) / factor),
+            y: Math.max(0, (clientY - iframeRect.top) / factor),
+          };
+        }
+      }
+      // Overview mode: fall back to container-relative coords (overview uses its
+      // own coordinate mapping for paste; this value is a best-effort fallback).
       const rect = canvasContainerRef.current?.getBoundingClientRect();
       if (!rect) return { x: 120, y: 120 };
       return {
@@ -6860,7 +7034,7 @@ ${serializedHtml}
         y: Math.max(0, clientY - rect.top),
       };
     },
-    [],
+    [zoom, viewMode],
   );
 
   const zoomLabel = `${Math.round(zoom)}%`;
@@ -7785,8 +7959,10 @@ ${serializedHtml}
             canPasteHere={hasCanvasClipboard && Boolean(activeFile)}
             canSelectAll={files.length > 0}
             canZoomToFit={Boolean(activeFile)}
-            canZoomToSelection={Boolean(activeFile)}
-            canCopy={Boolean(activeFile)}
+            canZoomToSelection={
+              Boolean(selectedElement) || viewMode === "overview"
+            }
+            canCopy={Boolean(selectedElement?.selector)}
             canPaste={hasCanvasClipboard && Boolean(activeFile)}
             canPasteOver={hasCanvasClipboard && Boolean(activeFile)}
             canDuplicate={Boolean(activeFile)}
@@ -7799,7 +7975,7 @@ ${serializedHtml}
             canToggleHidden={Boolean(activeLayerId)}
             canCopyProps={Boolean(selectedElement)}
             canPasteProps={hasPropsClipboard && Boolean(selectedElement)}
-            canCopyAsCode={Boolean(activeFile)}
+            canCopyAsCode={Boolean(selectedElement?.selector)}
             hiddenActions={["group", "ungroup", "rename"]}
             getCanvasPoint={getContextCanvasPoint}
             onPasteHere={(details) =>
@@ -7816,10 +7992,12 @@ ${serializedHtml}
               setActiveTool("move");
               setZoom(100);
             }}
-            onZoomToSelection={() => setZoom(150)}
+            onZoomToSelection={() => {
+              if (selectedElement || viewMode === "overview") setZoom(150);
+            }}
             onCopy={handleCopySelection}
             onPaste={() => handlePasteSelection()}
-            onPasteOver={() => handlePasteSelection()}
+            onPasteOver={handlePasteOverSelection}
             onDuplicate={handleDuplicateSelection}
             onDelete={handleDeleteSelection}
             onBringForward={() => changeSelectedZIndex("forward")}
@@ -7864,6 +8042,7 @@ ${serializedHtml}
                     onCreatePrimitive={handleCreatePrimitive}
                     onCreateScreenFrame={handleCreateScreenFrame}
                     onDeleteSelection={handleDeleteOverviewSelection}
+                    onSelectionChange={setOverviewSelectedScreenIds}
                     onPick={(id) => {
                       setSelectedElement(null);
                       setSelectedLayerIdsState([id]);
@@ -8186,6 +8365,7 @@ ${serializedHtml}
         title={t("designEditor.tweaksPromptTitle")}
         placeholder={t("designEditor.tweaksPlaceholder")}
         onSubmit={handleTweakPromptSubmit}
+        loading={generating || pendingGenerationActive}
         anchorRef={tweakPromptAnchorRef}
       />
     </div>

package/corpus/templates/design/changelog/2026-06-29-agent-edits-to-a-design-are-no-longer-occasionally-dropped-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Agent edits to a design are no longer occasionally dropped or corrupted when local and agent changes overlap.

package/corpus/templates/design/changelog/2026-06-29-box-shadow-and-gradient-colors-keep-named-css-colors-like-re.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Box-shadow and gradient colors keep named CSS colors (like red or navy) when edited, instead of resetting to black; the eyedropper now updates the selected gradient stop instead of replacing the whole gradient.

package/corpus/templates/design/changelog/2026-06-29-cut-cmd-ctrl-x-now-removes-the-selected-element-to-the-clipb.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Cut (Cmd/Ctrl+X) now removes the selected element to the clipboard; pasting repeatedly cascades the copies instead of stacking them exactly on top.

package/corpus/templates/design/changelog/2026-06-29-deleting-with-multiple-layers-selected-in-the-layers-panel-n.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Deleting with multiple layers selected in the Layers panel now removes all of them, not just the focused one.

package/corpus/templates/design/changelog/2026-06-29-duplicating-a-screen-now-gives-the-copy-its-own-layer-ids-so.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Duplicating a screen now gives the copy its own layer ids, so selecting a layer in one screen no longer affects the other.

package/corpus/templates/design/changelog/2026-06-29-hiding-and-re-showing-a-gradient-fill-now-preserves-each-sto.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Hiding and re-showing a gradient fill now preserves each stop's opacity instead of flattening them.

package/corpus/templates/design/changelog/2026-06-29-picking-a-design-direction-now-submits-to-the-agent-right-aw.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Picking a design direction now submits to the agent right away and reliably saves, instead of leaving the message sitting unsent in the chat box or firing twice on a double-click.

package/corpus/templates/design/changelog/2026-06-29-style-changes-that-set-several-properties-at-once-fixed-size.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Style changes that set several properties at once (fixed-size text, constraints, padding, flip, stroke position) now all save reliably instead of dropping all but the last property.

package/corpus/templates/design/changelog/2026-06-29-the-editor-no-longer-crashes-when-a-screen-ends-up-with-dupl.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+The editor no longer crashes when a screen ends up with duplicate or malformed layer ids (e.g. from a bad agent edit); the layer tree is now resilient to it.

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

@@ -10,6 +10,7 @@ resizing, moving/reparenting, the layers panel, and the iframe bridge.
 pnpm e2e          # headless
 pnpm e2e:headed   # watch it drive a real browser
 pnpm e2e:ui       # Playwright UI mode
+E2E_BROWSER_CHANNEL=chrome pnpm e2e  # run the suite in installed Google Chrome
 ```
 
 - `playwright.config.ts` starts its own dev server on **:9333** backed by a

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

@@ -18,6 +18,7 @@ export const SEED_TITLE = "E2E Seed Design";
 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;
 
 /**
  * Fixture HTML with distinct, text-identifiable elements. Plain inline styles
@@ -40,6 +41,15 @@ export const FIXTURE_HTML = `<!doctype html>
         <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>
       </div>
+      <div style="padding:8px;border:1px solid #27272a;border-radius:12px">
+        <div style="padding:8px;border:1px solid #3f3f46;border-radius:10px">
+          <div style="padding:8px;border:1px solid #52525b;border-radius:8px">
+            <div style="padding:8px;border:1px solid #71717a;border-radius:6px">
+              <button style="padding:10px 18px;border-radius:8px;border:0;background:#f59e0b;color:#111827;font-size:14px">Deep Layer Button</button>
+            </div>
+          </div>
+        </div>
+      </div>
       <section style="margin-top:16px;padding:24px;border-radius:14px;background:#1a1d24">
         <h2 style="font-size:24px;margin:0 0 8px">Fixture Card Title</h2>
         <p style="margin:0;color:#a1a1aa">Card body text inside a nested container.</p>
@@ -72,7 +82,9 @@ export default async function globalSetup(config: FullConfig) {
     "http://127.0.0.1:9333";
   await mkdir(AUTH_DIR, { recursive: true });
 
-  const browser = await chromium.launch();
+  const browser = await chromium.launch(
+    BROWSER_CHANNEL ? { channel: BROWSER_CHANNEL } : {},
+  );
   const context = await browser.newContext();
   const page = await context.newPage();
 

package/corpus/templates/design/playwright.config.ts

@@ -15,6 +15,7 @@ import { defineConfig, devices } from "@playwright/test";
  */
 const PORT = Number(process.env.E2E_PORT ?? 9333);
 const BASE_URL = process.env.E2E_BASE_URL ?? `http://127.0.0.1:${PORT}`;
+const BROWSER_CHANNEL = process.env.E2E_BROWSER_CHANNEL;
 
 export default defineConfig({
   testDir: "./e2e",
@@ -33,7 +34,15 @@ export default defineConfig({
     actionTimeout: 15_000,
     navigationTimeout: 30_000,
   },
-  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  projects: [
+    {
+      name: BROWSER_CHANNEL ? `chromium-${BROWSER_CHANNEL}` : "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        ...(BROWSER_CHANNEL ? { channel: BROWSER_CHANNEL } : {}),
+      },
+    },
+  ],
   webServer: process.env.E2E_BASE_URL
     ? undefined
     : {