@agent-native/core 0.149.1 → 0.149.3

package/corpus/templates/design/app/components/design/edit-panel/position-layout-properties.tsx

@@ -367,6 +367,13 @@ export function PositionLayoutProperties({
   const authoredTransform = authoredStyleValue(element, "transform");
   const constraintsValue = deriveConstraintsValue(element);
   const [constraintsExpanded, setConstraintsExpanded] = useState(false);
+  // position:absolute/fixed takes a child out of the parent's flex flow, so it
+  // still anchors and keeps constraints.
+  const constraintsSuppressed =
+    element.isFlexChild &&
+    !["absolute", "fixed"].includes(
+      (element.computedStyles?.position ?? "").toLowerCase(),
+    );
   // 3D rotation/perspective progressive-disclosure expander — mirrors
   // CornerRadiusControl's showIndependentCorners pattern. Default-expanded
   // when the authored transform already has non-zero X/Y rotation or
@@ -544,33 +551,40 @@ export function PositionLayoutProperties({
               hoverRevealClassName="opacity-0 group-hover/field:opacity-100"
             />
           </div>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                aria-label={
-                  "Constraints" /* i18n-ignore design inspector action */
-                }
-                aria-pressed={constraintsExpanded}
-                onClick={() => setConstraintsExpanded((expanded) => !expanded)}
-                className={cn(
-                  "flex size-7 items-center justify-center rounded-md transition-colors",
-                  "hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
-                  "focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
-                  constraintsExpanded
-                    ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]"
-                    : "text-muted-foreground",
-                )}
-              >
-                <ConstraintsPreview value={constraintsValue} />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {"Constraints" /* i18n-ignore design inspector tooltip */}
-            </TooltipContent>
-          </Tooltip>
+          {/* Figma: constraints cannot apply to a child of an auto layout
+              frame — the parent's layout owns the position. An absolutely
+              positioned descendant is out of that flow and still anchors. */}
+          {constraintsSuppressed ? null : (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={
+                    "Constraints" /* i18n-ignore design inspector action */
+                  }
+                  aria-pressed={constraintsExpanded}
+                  onClick={() =>
+                    setConstraintsExpanded((expanded) => !expanded)
+                  }
+                  className={cn(
+                    "flex size-7 items-center justify-center rounded-md transition-colors",
+                    "hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
+                    "focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                    constraintsExpanded
+                      ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  <ConstraintsPreview value={constraintsValue} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {"Constraints" /* i18n-ignore design inspector tooltip */}
+              </TooltipContent>
+            </Tooltip>
+          )}
         </div>
-        {constraintsExpanded ? (
+        {constraintsExpanded && !constraintsSuppressed ? (
           <ConstraintsWidget
             value={constraintsValue}
             onChange={handleConstraintsChange}

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -310,6 +310,8 @@ function stripExecutableStaticPreviewContent(html: string) {
  * logical board paintable without allocating or scrolling a 131k iframe.
  */
 export function getBoardSurfaceStaticPreviewContent(args: {
+  /** Themed canvas colour; falls back to the dark default when unresolved. */
+  background?: string;
   html: string;
   logicalGeometry: FrameGeometry;
   viewport: { width: number; height: number };
@@ -321,10 +323,11 @@ export function getBoardSurfaceStaticPreviewContent(args: {
   const height = Math.max(1, args.logicalGeometry.height);
   const viewportWidth = Math.max(1, args.viewport.width);
   const viewportHeight = Math.max(1, args.viewport.height);
+  const background = args.background?.trim() || BOARD_SURFACE_BACKGROUND;
   const scale = Math.min(viewportWidth / width, viewportHeight / height);
   const offsetX = -args.logicalGeometry.x;
   const offsetY = -args.logicalGeometry.y;
-  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}html,body{background:${BOARD_SURFACE_BACKGROUND}!important;background-color:${BOARD_SURFACE_BACKGROUND}!important;background-image:none!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
+  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}html,body{background:${background}!important;background-color:${background}!important;background-image:none!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
   if (/<\/head\s*>/i.test(renderHtml)) {
     return injectDocumentMarkup(renderHtml, style, { target: "head" });
   }

package/corpus/templates/design/app/components/design/multi-screen/frame-geometry.ts

@@ -337,6 +337,9 @@ export function getBreakpointFrameGeometry(args: {
   /** Measured content height at this width; wins over the primary-aspect
    * projection, which clipped narrower frames (they reflow taller). */
   contentHeightPx?: number;
+  /** A height the user set. Content measurement must never overwrite it, or
+   * the frame grows out from under them and 100vh content chases itself. */
+  pinnedHeightPx?: number;
 }): {
   frameWidth: number;
   frameHeight: number;
@@ -353,10 +356,16 @@ export function getBreakpointFrameGeometry(args: {
       : undefined;
   // Until the frame's own content is measured, use the pure aspect projection;
   // the device-viewport floor only applies once a real height is known.
+  const pinned =
+    args.pinnedHeightPx && args.pinnedHeightPx > 0
+      ? Math.round(args.pinnedHeightPx)
+      : undefined;
   const naturalHeight =
-    measured !== undefined
-      ? Math.max(deviceViewportFloorForWidth(args.widthPx), measured)
-      : Math.round(args.widthPx * Math.max(0.01, args.naturalAspect));
+    pinned !== undefined
+      ? pinned
+      : measured !== undefined
+        ? Math.max(deviceViewportFloorForWidth(args.widthPx), measured)
+        : Math.round(args.widthPx * Math.max(0.01, args.naturalAspect));
   const frameWidth = Math.round(args.widthPx * scale);
   const frameHeight = Math.round(naturalHeight * scale);
   return { frameWidth, frameHeight, naturalHeight, scale };

package/corpus/templates/design/app/components/design/multi-screen/screen-content-cache.ts

@@ -30,6 +30,7 @@ export function sameResolvedMetadata(
     a.title === b.title &&
     a.width === b.width &&
     a.height === b.height &&
+    a.heightPinned === b.heightPinned &&
     a.previewUrl === b.previewUrl
   );
 }
@@ -49,6 +50,7 @@ function sameScreenMetadataInput(
     a.title === b.title &&
     a.width === b.width &&
     a.height === b.height &&
+    a.heightPinned === b.heightPinned &&
     a.url === b.url &&
     a.previewUrl === b.previewUrl &&
     a.bridgeUrl === b.bridgeUrl &&
@@ -187,6 +189,8 @@ export function resolveScreenMetadata(
     title: metadata.title,
     width,
     height,
+    // A height the user dragged. Auto-fit must not grow past it.
+    heightPinned: metadata.heightPinned === true,
     previewUrl,
   };
 }

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -32,6 +32,8 @@ export interface ScreenFile {
   updatedAt?: string;
   width?: number;
   height?: number;
+  /** A height the user dragged; auto-fit must not grow past it. */
+  heightPinned?: boolean;
   url?: string;
   previewUrl?: string;
   bridgeUrl?: string;
@@ -105,6 +107,7 @@ export interface ScreenMetadata {
   title?: string;
   width?: number;
   height?: number;
+  heightPinned?: boolean;
   url?: string;
   previewUrl?: string;
   bridgeUrl?: string;
@@ -195,6 +198,8 @@ export interface MultiScreenCanvasProps {
     placement: "before" | "after" | "inside";
   }) => void;
   onCreateScreenFrame?: (geometry: FrameGeometry) => void;
+  /** Whether the frame tool commits a top-level screen or a plain frame. */
+  frameToolDraws?: "screen" | "frame";
   onDeleteSelection?: (ids: string[]) => boolean | void;
   /** Return false to keep the arrow key: the host's real selection is an
    * element inside a screen, and this canvas still lists that screen in
@@ -971,6 +976,8 @@ export interface ResolvedScreenMetadata {
   title?: string;
   width: number;
   height: number;
+  /** A height the user dragged; auto-fit must not grow past it. */
+  heightPinned?: boolean;
   previewUrl?: string;
 }
 

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -11,6 +11,7 @@ import {
 import {
   IconApps,
   IconCheck,
+  IconComponents,
   IconChevronDown,
   IconPalette,
   IconPhoto,
@@ -822,7 +823,7 @@ export default function PromptPopover({
                     }}
                   >
                     <SelectTrigger className="h-9 min-w-0 justify-start gap-2 px-2.5 text-xs [&>svg:last-child]:ms-auto">
-                      <IconPalette className="size-4 shrink-0 text-muted-foreground" />
+                      <IconComponents className="size-4 shrink-0 text-muted-foreground" />
                       <span
                         className="min-w-0 flex-1 truncate text-start"
                         title={
@@ -851,7 +852,7 @@ export default function PromptPopover({
                   </Select>
                 ) : (
                   <div className="flex h-9 min-w-0 items-center gap-2 rounded-md border border-input px-2.5 text-xs text-muted-foreground">
-                    <IconPalette className="size-4 shrink-0" />
+                    <IconComponents className="size-4 shrink-0" />
                     <span className="truncate">
                       {t("promptDialog.noDesignSystem")}
                     </span>

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -8,7 +8,7 @@ import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   IconPencil,
   IconTemplate,
-  IconPalette,
+  IconComponents,
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
@@ -28,7 +28,7 @@ const navItems = [
   { icon: IconPencil, labelKey: "navigation.designs", href: "/" },
   { icon: IconTemplate, labelKey: "navigation.templates", href: "/templates" },
   {
-    icon: IconPalette,
+    icon: IconComponents,
     labelKey: "navigation.designSystems",
     href: "/design-systems",
   },

package/corpus/templates/design/app/hooks/useDesignHotkeys.ts

@@ -308,6 +308,9 @@ function isFocusableChromeTarget(target: EventTarget | null) {
   if (target === document.body || target === document.documentElement) {
     return false;
   }
+  // A layer row is a selection surface, not focus chrome — clicking one leaves
+  // focus on its button, and Figma traverses siblings from there.
+  if (target.closest("[data-layer-row-button]")) return false;
   return Boolean(
     target.closest(
       [

package/corpus/templates/design/app/i18n-data.ts

@@ -730,6 +730,7 @@ const enUS = {
     tools: {
       move: "Move",
       frame: "Frame",
+      screen: "Screen",
       rect: "Rectangle",
       line: "Line",
       arrow: "Arrow",

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

@@ -19,7 +19,7 @@ import {
   IconWorld,
   IconFileDescription,
   IconPhoto,
-  IconPalette,
+  IconComponents,
   IconCheck,
   IconExternalLink,
   IconChevronDown,
@@ -714,7 +714,7 @@ export default function DesignSystemSetup() {
             </Section>
 
             <SourceAccordionRow
-              icon={IconPalette}
+              icon={IconComponents}
               title={t("designSystemSetup.otherSources")}
               description={t("designSystemSetup.otherSourcesDescription")}
               expanded={sourcePanel === "other"}
@@ -734,7 +734,7 @@ export default function DesignSystemSetup() {
                 <div className="divide-y divide-border">
                   <SourceAccordionRow
                     className="rounded-none border-0"
-                    icon={IconPalette}
+                    icon={IconComponents}
                     title={t("designSystemSetup.sections.company.title")}
                     description={t(
                       "designSystemSetup.sections.company.description",
@@ -769,7 +769,7 @@ export default function DesignSystemSetup() {
                     existingSystems.length > 0) && (
                     <SourceAccordionRow
                       className="rounded-none border-0"
-                      icon={IconPalette}
+                      icon={IconComponents}
                       title={t(
                         "designSystemSetup.sections.importExisting.title",
                       )}
@@ -1134,7 +1134,7 @@ export default function DesignSystemSetup() {
                       }`}
                     >
                       <div className="flex items-center gap-2">
-                        <IconPalette className="w-3.5 h-3.5 text-muted-foreground" />
+                        <IconComponents className="w-3.5 h-3.5 text-muted-foreground" />
                         <span className="text-sm text-foreground/70 truncate">
                           {ds.title}
                         </span>

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

@@ -12,6 +12,7 @@ import { VisibilityBadge } from "@agent-native/toolkit/sharing";
 import {
   IconCheckbox,
   IconChecks,
+  IconComponents,
   IconDots,
   IconPlus,
   IconPalette,
@@ -587,7 +588,7 @@ export default function DesignSystems() {
                             {!primaryColor &&
                               !secondaryColor &&
                               !accentColor && (
-                                <IconPalette className="w-8 h-8 text-muted-foreground/40" />
+                                <IconComponents className="w-8 h-8 text-muted-foreground/40" />
                               )}
                           </div>
                           <div className="p-4 pb-3">
@@ -1229,7 +1230,7 @@ function EmptyState() {
   return (
     <div className="flex flex-col items-center justify-center py-10 sm:py-14 text-center">
       <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#609FF8]/20 to-[#4080E0]/20 border border-[#609FF8]/20 flex items-center justify-center mb-6">
-        <IconPalette className="w-7 h-7 text-[#609FF8]" />
+        <IconComponents className="w-7 h-7 text-primary" />
       </div>
       <h2 className="text-xl font-semibold text-foreground mb-2">
         {t("designSystems.empty.title")}

package/corpus/templates/design/app/pages/design-editor/canvas-primitive-insert.ts

@@ -11,7 +11,10 @@ import {
   CANVAS_TEXT_DEFAULT_FONT_FAMILY,
   defaultCanvasTextColor,
 } from "./canvas-primitives";
-import { BOARD_TEXT_AUTO_COLOR_MARKER } from "./cross-screen-text-color";
+import {
+  BOARD_TEXT_AUTO_COLOR_MARKER,
+  destinationBackgroundIsLightForNode,
+} from "./cross-screen-text-color";
 import { escapeHtmlAttributeValue, escapeHtmlText } from "./dom-utils";
 import { isStandaloneHttpUrl } from "./editor-state";
 import type { DesignFile } from "./types";
@@ -183,6 +186,81 @@ export function polygonPointsForHtmlShape(
  * adaptAutoTextColorForCrossScreenNode. Any explicit user color edit must
  * remove this attribute so the text is never "helpfully" overridden again.
  */
+
+/** Inline absolute rect, or null when the element is not absolutely placed. */
+function absoluteRect(
+  element: Element,
+): { x: number; y: number; w: number; h: number } | null {
+  const style = (element as HTMLElement).style;
+  if (style.position !== "absolute") return null;
+  const read = (value: string) => {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  };
+  const x = read(style.left);
+  const y = read(style.top);
+  const w = read(style.width);
+  const h = read(style.height);
+  if (x === null || y === null || w === null || h === null) return null;
+  // Inline left/top are relative to the nearest positioned ancestor, so a
+  // nested frame must add its own offsets or it matches the wrong origin.
+  let originX = 0;
+  let originY = 0;
+  for (
+    let ancestor = element.parentElement;
+    ancestor && ancestor.tagName.toLowerCase() !== "body";
+    ancestor = ancestor.parentElement
+  ) {
+    const position = ancestor.style.position;
+    if (
+      position !== "absolute" &&
+      position !== "relative" &&
+      position !== "fixed"
+    ) {
+      continue;
+    }
+    originX += read(ancestor.style.left) ?? 0;
+    originY += read(ancestor.style.top) ?? 0;
+  }
+  return { x: originX + x, y: originY + y, w, h };
+}
+
+/**
+ * Figma's frame is the container primitive and a rectangle is not, so only
+ * `data-an-primitive="frame"` adopts. Bounds come from inline geometry
+ * because this document is parsed, never laid out.
+ */
+function deepestFrameContaining(
+  root: Element,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+): { element: Element; x: number; y: number } | null {
+  const contained = Array.from(
+    root.querySelectorAll('[data-an-primitive="frame"]'),
+  )
+    .map((element) => ({ element, rect: absoluteRect(element) }))
+    .filter(
+      (
+        candidate,
+      ): candidate is {
+        element: Element;
+        rect: { x: number; y: number; w: number; h: number };
+      } =>
+        candidate.rect !== null &&
+        x >= candidate.rect.x &&
+        y >= candidate.rect.y &&
+        x + w <= candidate.rect.x + candidate.rect.w &&
+        y + h <= candidate.rect.y + candidate.rect.h,
+    )
+    .sort((a, b) => a.rect.w * a.rect.h - b.rect.w * b.rect.h);
+  const best = contained[0];
+  return best
+    ? { element: best.element, x: best.rect.x, y: best.rect.y }
+    : null;
+}
+
 export function appendCanvasPrimitiveToHtml(
   content: string,
   primitive: CanvasPrimitiveInsert,
@@ -208,6 +286,10 @@ export function appendCanvasPrimitiveToHtml(
     const height = Math.max(1, Math.round(geometry.height));
     const nodeId = primitive.nodeId ?? uniqueLayerId(primitive.kind);
     const layerName = primitiveLayerName(primitive);
+    // Resolved once so every primitive kind nests identically, and so text can
+    // pick a fill that is legible against its actual container.
+    const host = deepestFrameContaining(doc.body, left, top, width, height);
+    const hostOrBody: Element = host?.element ?? doc.body;
 
     if (
       primitive.kind === "path" ||
@@ -327,7 +409,7 @@ export function appendCanvasPrimitiveToHtml(
           .join(";"),
       );
       svg.appendChild(path);
-      doc.body.appendChild(svg);
+      hostOrBody.appendChild(svg);
       return `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
     }
 
@@ -370,7 +452,7 @@ export function appendCanvasPrimitiveToHtml(
           .join(";"),
       );
       svg.appendChild(polygon);
-      doc.body.appendChild(svg);
+      hostOrBody.appendChild(svg);
       return `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
     }
 
@@ -428,16 +510,17 @@ export function appendCanvasPrimitiveToHtml(
         // not centered — match that instead of centering the text block.
         element.style.alignItems = "flex-start";
       }
-      // Board (dark infinite-canvas) text needs an explicit default fill —
-      // "currentColor" inherits the unstyled document's black body text,
-      // invisible on the dark canvas background. The board surface is
-      // always dark regardless of the editor chrome theme, so this keys off
-      // the target surface only (see defaultCanvasTextColor). Screens keep
-      // "currentColor" so text dropped into an existing (often light)
-      // screen still inherits its surrounding styles/theme as before.
+      // "currentColor" inherits the unstyled document's black body text, so
+      // it is invisible on any dark surface — the always-dark board, and
+      // equally a screen whose own background is dark. Light screens keep
+      // "currentColor" so text still inherits their theme.
+      // Measure the frame the text actually lands in: a dark frame on a light
+      // page would otherwise keep currentColor and render invisible.
+      const autoTextNeedsLightFill =
+        options?.isBoardTarget === true ||
+        !destinationBackgroundIsLightForNode(hostOrBody);
       const resolvedTextColor =
-        primitive.fill ??
-        defaultCanvasTextColor(options?.isBoardTarget === true);
+        primitive.fill ?? defaultCanvasTextColor(autoTextNeedsLightFill);
       element.style.color = resolvedTextColor;
       // Stamp the auto-color marker whenever the color came from the
       // default (no explicit primitive.fill) rather than a user-chosen
@@ -477,7 +560,11 @@ export function appendCanvasPrimitiveToHtml(
       element.style.borderRadius = canonical.borderRadius;
     }
 
-    doc.body.appendChild(element);
+    if (host) {
+      element.style.left = `${left - host.x}px`;
+      element.style.top = `${top - host.y}px`;
+    }
+    hostOrBody.appendChild(element);
     return `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
   } catch {
     return null;

package/corpus/templates/design/app/pages/design-editor/cross-screen-text-color.ts

@@ -209,7 +209,7 @@ function collectDestinationBackgroundSignals(
  * dark-class-hint chain when no live document is available (e.g. the
  * destination screen isn't currently mounted).
  */
-function destinationBackgroundIsLightForNode(
+export function destinationBackgroundIsLightForNode(
   element: Element,
   liveDoc?: Document | null,
 ): boolean {

package/corpus/templates/design/app/pages/design-editor/data-operations.ts

@@ -114,6 +114,8 @@ export function buildFrameGeometryDataOperations(args: {
   nextGeometry: CanvasFrameGeometryById;
   designData: Record<string, unknown>;
   syncViewportFrameIds?: readonly string[];
+  /** Frames whose height the user just dragged. */
+  pinHeightFrameIds?: readonly string[];
 }): DesignDataOperation[] {
   const operations: DesignDataOperation[] = [];
   const frameIds = new Set([
@@ -156,6 +158,18 @@ export function buildFrameGeometryDataOperations(args: {
         value: viewport.height,
       });
     }
+    // A resize is a deliberate height. Without this the content-fit pass in
+    // MultiScreenCanvas grows the frame straight back past the drag.
+    if (
+      args.pinHeightFrameIds?.includes(frameId) &&
+      !metadataEntry.heightPinned
+    ) {
+      operations.push({
+        op: "set",
+        path: ["screenMetadata", frameId, "heightPinned"],
+        value: true,
+      });
+    }
 
     const localhostEntry = recordValue(localhostScreens, frameId);
     if (Object.keys(localhostEntry).length === 0) continue;

package/corpus/templates/design/changelog/2026-08-10-marquee-selecting-layers-far-down-a-tall-screen-now-selects-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-10
+---
+
+Marquee-selecting layers far down a tall screen now selects the layers you dragged over

package/corpus/templates/design/changelog/2026-08-10-the-frame-tool-draws-a-plain-frame-by-default-with-screen-av.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-10
+---
+
+The frame tool draws a plain frame by default, with Screen available in its dropdown

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

@@ -173,42 +173,37 @@ export default async function globalSetup(config: FullConfig) {
     BROWSER_CHANNEL ? { channel: BROWSER_CHANNEL } : {},
   );
   const context = await browser.newContext();
-  const page = await context.newPage();
 
   try {
-    await page.goto(`${baseURL}/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.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()) {
-        // Account exists; switch to the Sign in tab and log in.
-        await page
-          .getByRole("button", { name: "Sign in", exact: true })
-          .first()
-          .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);
-      }
+    const registration = await context.request.post(
+      `${baseURL}/_agent-native/auth/register`,
+      {
+        data: {
+          email: E2E_EMAIL,
+          password: E2E_PASSWORD,
+        },
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+    if (!registration.ok() && registration.status() !== 409) {
+      throw new Error(
+        `registration failed: ${registration.status()} ${await registration.text()}`,
+      );
     }
 
-    await page
-      .waitForFunction(() => !/sign in/i.test(document.title), null, {
-        timeout: 20_000,
-      })
-      .catch(() => {});
+    const login = await context.request.post(
+      `${baseURL}/_agent-native/auth/login`,
+      {
+        data: {
+          email: E2E_EMAIL,
+          password: E2E_PASSWORD,
+        },
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+    if (!login.ok()) {
+      throw new Error(`login failed: ${login.status()} ${await login.text()}`);
+    }
 
     await context.storageState({ path: STATE_PATH });
 

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

@@ -18,11 +18,9 @@ const BASE_URL = process.env.E2E_BASE_URL ?? `http://127.0.0.1:${PORT}`;
 const AUTH_DIR = process.env.E2E_AUTH_DIR
   ? path.resolve(process.env.E2E_AUTH_DIR)
   : path.join(import.meta.dirname, "e2e", ".auth");
-const E2E_DATABASE_URL = `file:${path.join(
-  import.meta.dirname,
-  "data",
-  "e2e.db",
-)}`;
+const E2E_DATABASE_URL =
+  process.env.E2E_DATABASE_URL ??
+  `file:${path.join(import.meta.dirname, "data", "e2e.db")}`;
 const BROWSER_CHANNEL = process.env.E2E_BROWSER_CHANNEL;
 
 export default defineConfig({