@agent-native/core 0.124.1 → 0.124.3

package/corpus/templates/design/actions/generate-design.ts

@@ -77,15 +77,66 @@ const GENERATION_VIEWPORT_SIZES: Record<
 > = {
   mobile: { width: 390, height: 844 },
   tablet: { width: 768, height: 1024 },
-  desktop: { width: 1440, height: 1024 },
+  desktop: { width: 1440, height: 900 },
 };
+const GENERATION_VIEWPORT_LABELS: Record<GenerationViewport, string> = {
+  mobile: "Mobile",
+  tablet: "Tablet",
+  desktop: "Desktop",
+};
+// Widest → narrowest. The widest requested device seeds the primary/base
+// frame; only the narrower devices become breakpoint frames.
+const DEVICE_WIDTH_ORDER: readonly GenerationViewport[] = [
+  "desktop",
+  "tablet",
+  "mobile",
+];
 const GENERATED_FRAME_GAP = 96;
-const DEFAULT_RESPONSIVE_BREAKPOINTS = [390, 768, 1440].map((widthPx) => ({
-  id: `generated-${widthPx}`,
-  label: widthPx === 390 ? "Mobile" : widthPx === 768 ? "Tablet" : "Desktop",
-  widthPx,
-  prefix: widthToPrefix(widthPx),
-}));
+
+function widestGenerationDevice(
+  devices: readonly GenerationViewport[],
+): GenerationViewport {
+  return (
+    DEVICE_WIDTH_ORDER.find((device) => devices.includes(device)) ??
+    DEFAULT_GENERATION_VIEWPORT
+  );
+}
+
+// Devices used when the caller omits `devices`: the requested primary form
+// factor as the base plus Mobile, unless the primary already is Mobile. The
+// default (desktop primary) therefore yields a Desktop base + Mobile
+// breakpoint, matching the two-screen default.
+function devicesForPrimaryViewport(
+  primaryViewport: GenerationViewport,
+): GenerationViewport[] {
+  return primaryViewport === "mobile"
+    ? ["mobile"]
+    : [primaryViewport, "mobile"];
+}
+
+// Breakpoint frames = every requested device NARROWER than the primary
+// (widest) one, ascending by width. The primary/widest width is never emitted,
+// so a single-device request produces an empty set (one frame, no sub-frames)
+// and no redundant frame ever lands at the base canvas width.
+function breakpointSetForDevices(devices: readonly GenerationViewport[]) {
+  const primaryWidth =
+    GENERATION_VIEWPORT_SIZES[widestGenerationDevice(devices)].width;
+  return Array.from(new Set(devices))
+    .filter((device) => GENERATION_VIEWPORT_SIZES[device].width < primaryWidth)
+    .sort(
+      (a, b) =>
+        GENERATION_VIEWPORT_SIZES[a].width - GENERATION_VIEWPORT_SIZES[b].width,
+    )
+    .map((device) => {
+      const widthPx = GENERATION_VIEWPORT_SIZES[device].width;
+      return {
+        id: `generated-${widthPx}`,
+        label: GENERATION_VIEWPORT_LABELS[device],
+        widthPx,
+        prefix: widthToPrefix(widthPx),
+      };
+    });
+}
 
 const reuseLabelSchema = z
   .object({
@@ -123,16 +174,6 @@ function hasBreakpointSet(value: unknown): boolean {
   return Array.isArray(breakpoints) && breakpoints.length > 0;
 }
 
-function nextGeneratedFrameX(
-  frames: ReturnType<typeof parseCanvasFrameGeometryById>,
-): number {
-  return Object.values(frames).reduce((furthestRight, frame) => {
-    const x = frame.x ?? 0;
-    const width = frame.width ?? 0;
-    return Math.max(furthestRight, x + width + GENERATED_FRAME_GAP);
-  }, 0);
-}
-
 function jsonValuesEqual(left: unknown, right: unknown): boolean {
   return JSON.stringify(left) === JSON.stringify(right);
 }
@@ -393,7 +434,7 @@ const generateDesignAgentParameters = {
       type: "string",
       description:
         "Optional JSON array of overview-canvas placements keyed by filename or fileId. " +
-        "Pass explicit x/y/width/height for every generated screen; desktop is 1440x1024.",
+        "Pass explicit x/y/width/height for every generated screen; desktop is 1440x900.",
     },
     contextPackId: {
       type: "string",
@@ -415,8 +456,20 @@ const generateDesignAgentParameters = {
       type: "string",
       enum: ["mobile", "tablet", "desktop"],
       description:
-        "The requested primary form factor. Defaults to desktop (1440x1024). " +
-        "Set this from the intake answer when no explicit canvasFrames placement is supplied.",
+        "The requested primary form factor. Defaults to desktop (1440x900). " +
+        "Set this from the intake answer when no explicit canvasFrames placement is supplied. " +
+        "Ignored when `devices` is provided (the widest device becomes primary).",
+    },
+    devices: {
+      type: "array",
+      items: { type: "string", enum: ["mobile", "tablet", "desktop"] },
+      description:
+        "Device set for responsive frames. Honor the devices the prompt " +
+        'explicitly names; omit to default to ["desktop","mobile"]. The widest ' +
+        "device becomes the primary/base frame and the narrower devices become " +
+        "breakpoint frames — never a duplicate of the base width and never an " +
+        "auto-added tablet. A single device yields one frame with no breakpoints. " +
+        "When provided, this overrides primaryViewport.",
     },
   },
   required: ["designId", "prompt", "files"],
@@ -438,9 +491,12 @@ const generateDesignAction = defineAction({
     "When `designSystemId` is provided, first use `get-design-system` and apply " +
     "its `agentContext` tokens/docs before writing the file content; do not " +
     "treat the id alone as enough design-system context. " +
-    "Every web design must be responsive. Use a desktop 1440x1024 primary " +
-    "canvas by default, or set `primaryViewport` for an explicitly mobile- or " +
-    "tablet-primary design; this action adds responsive editor breakpoints. " +
+    "Every web design must be responsive. This action adds responsive editor " +
+    "breakpoints: by default a Desktop 1440x900 base frame plus a Mobile " +
+    "breakpoint (no auto tablet, no duplicate desktop). Pass `devices` to honor " +
+    "the form factors the prompt explicitly names — the widest becomes the base " +
+    "frame and the narrower ones become breakpoint frames. Set `primaryViewport` " +
+    "for a mobile- or tablet-primary design when not passing `devices`. " +
     "Do not report a design as ready until this action succeeds. " +
     "When adding multiple screens or states, pass canvasFrames with filenames " +
     "and x/y/width/height so the new screens appear placed on the overview canvas.",
@@ -599,8 +655,20 @@ const generateDesignAction = defineAction({
       .optional()
       .default(DEFAULT_GENERATION_VIEWPORT)
       .describe(
-        "Primary generated viewport. Defaults to desktop (1440x1024); set " +
-          "mobile or tablet only when that is the requested form factor.",
+        "Primary generated viewport. Defaults to desktop (1440x900); set " +
+          "mobile or tablet only when that is the requested form factor. " +
+          "Ignored when `devices` is provided (the widest device wins).",
+      ),
+    devices: z
+      .array(z.enum(["mobile", "tablet", "desktop"]))
+      .optional()
+      .describe(
+        "Explicit device set for responsive frames. Honor the devices the " +
+          'prompt names; omit to default to ["desktop","mobile"]. Widest ' +
+          "device = primary/base frame; narrower devices = breakpoint frames " +
+          "(never the base width, never an auto tablet). One device = a single " +
+          "frame with no breakpoints. When provided, this overrides " +
+          "primaryViewport.",
       ),
   }),
   mcpApp: {
@@ -622,6 +690,7 @@ const generateDesignAction = defineAction({
     tweaks,
     canvasFrames,
     primaryViewport,
+    devices,
     contextPackId,
     contextModeOverride,
     reuseLabels,
@@ -827,6 +896,15 @@ const generateDesignAction = defineAction({
       ...tweak,
       type: tweak.type === "color-swatches" ? "color-swatch" : tweak.type,
     }));
+    // An explicit `devices` list wins over primaryViewport; otherwise derive
+    // the device set from primaryViewport so the default stays Desktop base +
+    // Mobile breakpoint. The widest resolved device seeds the primary frame.
+    const resolvedDevices =
+      devices && devices.length > 0
+        ? devices
+        : devicesForPrimaryViewport(primaryViewport);
+    const resolvedPrimaryViewport = widestGenerationDevice(resolvedDevices);
+    const generatedBreakpointSet = breakpointSetForDevices(resolvedDevices);
     await mutateDesignData({
       designId,
       mutate: (prevData, { updatedAt }) => {
@@ -865,9 +943,77 @@ const generateDesignAction = defineAction({
               : undefined;
           },
         });
-        const viewport = GENERATION_VIEWPORT_SIZES[primaryViewport];
-        let nextX = nextGeneratedFrameX(merged.canvasFrames);
-        const generationFrames = [...merged.placedFrames];
+        const viewport = GENERATION_VIEWPORT_SIZES[resolvedPrimaryViewport];
+        // Frames placed by an earlier call: never moved, and counted as
+        // occupied so a new screen is never dropped on top of one.
+        const preExistingFrameIds = new Set(
+          prevData.canvasFrames && typeof prevData.canvasFrames === "object"
+            ? Object.keys(prevData.canvasFrames as Record<string, unknown>)
+            : [],
+        );
+        const rectOf = (frame: {
+          x?: number;
+          y?: number;
+          width?: number;
+          height?: number;
+          rotation?: number;
+        }) => {
+          const x = frame.x ?? 0;
+          const y = frame.y ?? 0;
+          const width = frame.width ?? 0;
+          const height = frame.height ?? 0;
+          const rotation = frame.rotation ?? 0;
+          if (!rotation || width <= 0 || height <= 0) {
+            return { x, y, width, height };
+          }
+          // Existing frames render rotated about their center; use the rotated
+          // rect's axis-aligned bounding box so a new screen isn't dropped over
+          // a rotated frame's real footprint.
+          const radians = (rotation * Math.PI) / 180;
+          const cos = Math.abs(Math.cos(radians));
+          const sin = Math.abs(Math.sin(radians));
+          const aabbWidth = width * cos + height * sin;
+          const aabbHeight = width * sin + height * cos;
+          return {
+            x: x + width / 2 - aabbWidth / 2,
+            y: y + height / 2 - aabbHeight / 2,
+            width: aabbWidth,
+            height: aabbHeight,
+          };
+        };
+        const framesOverlap = (
+          a: ReturnType<typeof rectOf>,
+          b: ReturnType<typeof rectOf>,
+        ) =>
+          a.width > 0 &&
+          a.height > 0 &&
+          b.width > 0 &&
+          b.height > 0 &&
+          a.x < b.x + b.width &&
+          a.x + a.width > b.x &&
+          a.y < b.y + b.height &&
+          a.y + a.height > b.y;
+        const occupiedRects: Array<ReturnType<typeof rectOf>> = [];
+        for (const id of preExistingFrameIds) {
+          const frame = merged.canvasFrames[id];
+          if (frame) occupiedRects.push(rectOf(frame));
+        }
+        // Keep arg placements for files we're not regenerating; the regenerated
+        // ones are (re)placed below, so rebuild their entries here rather than
+        // carry a pre-relocation position that would fail the isApplied check.
+        const regeneratedFileIds = new Set(savedFiles.map((file) => file.id));
+        const generationFrames = merged.placedFrames.filter(
+          (placed) => !regeneratedFileIds.has(placed.fileId),
+        );
+        for (const placed of generationFrames) {
+          occupiedRects.push(rectOf(placed.frame));
+        }
+        // Relocate target: right of every occupied (rotation-aware) rect.
+        let nextX = occupiedRects.reduce(
+          (right, rect) =>
+            Math.max(right, rect.x + rect.width + GENERATED_FRAME_GAP),
+          0,
+        );
         for (const file of savedFiles) {
           const source = files.find(
             (candidate) => candidate.filename === file.filename,
@@ -875,18 +1021,50 @@ const generateDesignAction = defineAction({
           if (!source || !isRenderableDesignFile(source)) continue;
           const current = merged.canvasFrames[file.id] ?? {};
           if (
+            preExistingFrameIds.has(file.id) &&
             current.x !== undefined &&
             current.y !== undefined &&
             current.width !== undefined &&
             current.height !== undefined
           ) {
+            // An explicit device request resizes the primary frame to the
+            // requested viewport (preserving position/rotation); otherwise a
+            // regenerated screen keeps its exact stored geometry.
+            if (devices && devices.length > 0) {
+              merged.canvasFrames[file.id] = {
+                ...current,
+                width: viewport.width,
+                height: viewport.height,
+              };
+            }
             continue;
           }
+          const width = current.width ?? viewport.width;
+          const height = current.height ?? viewport.height;
+          let x = current.x ?? nextX;
+          let y = current.y ?? 0;
+          // Bump a new screen clear of everything if its requested/default spot
+          // overlaps (e.g. a second screen defaulting to the same origin). The
+          // candidate carries its own rotation so a rotated placement is tested
+          // by its real footprint, not its unrotated rectangle.
+          const candidateRect = rectOf({
+            x,
+            y,
+            width,
+            height,
+            rotation: current.rotation,
+          });
+          if (
+            occupiedRects.some((rect) => framesOverlap(candidateRect, rect))
+          ) {
+            x = nextX;
+            y = 0;
+          }
           const frame = {
-            x: current.x ?? nextX,
-            y: current.y ?? 0,
-            width: current.width ?? viewport.width,
-            height: current.height ?? viewport.height,
+            x,
+            y,
+            width,
+            height,
             z: current.z ?? generationFrames.length,
             ...(current.rotation === undefined
               ? {}
@@ -898,14 +1076,34 @@ const generateDesignAction = defineAction({
             filename: file.filename,
             frame,
           });
-          nextX = frame.x + frame.width + GENERATED_FRAME_GAP;
+          occupiedRects.push(rectOf(frame));
+          nextX = Math.max(nextX, frame.x + frame.width + GENERATED_FRAME_GAP);
         }
         mergedData.canvasFrames = merged.canvasFrames;
         placedFrames = generationFrames;
-        if (!hasBreakpointSet(mergedData.breakpointSet)) {
+        // An explicit `devices` request is authoritative: replace the design's
+        // breakpoint set with the derived one (or drop it for a single device),
+        // so regenerating e.g. as [mobile,tablet,desktop] can't silently retain
+        // a stale narrower set. Without explicit devices, only seed a default
+        // set when none exists — a plain content regen never clobbers the
+        // user's own breakpoints.
+        if (devices && devices.length > 0) {
+          if (generatedBreakpointSet.length > 0) {
+            mergedData.breakpointSet = {
+              id: "generated-responsive",
+              breakpoints: generatedBreakpointSet,
+            };
+          } else {
+            delete mergedData.breakpointSet;
+          }
+          mergedData.breakpointSetUpdatedAt = updatedAt;
+        } else if (
+          generatedBreakpointSet.length > 0 &&
+          !hasBreakpointSet(mergedData.breakpointSet)
+        ) {
           mergedData.breakpointSet = {
             id: "generated-responsive",
-            breakpoints: DEFAULT_RESPONSIVE_BREAKPOINTS,
+            breakpoints: generatedBreakpointSet,
           };
           mergedData.breakpointSetUpdatedAt = updatedAt;
         }
@@ -940,7 +1138,32 @@ const generateDesignAction = defineAction({
             );
           }),
         );
-        return framesApplied && hasBreakpointSet(current.breakpointSet);
+        // For an explicit `devices` request, verify the persisted breakpoint
+        // widths actually match the requested set (not merely that some set
+        // exists), so a partial/stale write is retried rather than accepted.
+        const currentBreakpointWidths = (
+          Array.isArray(
+            (current.breakpointSet as { breakpoints?: unknown })?.breakpoints,
+          )
+            ? (
+                current.breakpointSet as {
+                  breakpoints: Array<{ widthPx?: number }>;
+                }
+              ).breakpoints
+            : []
+        )
+          .map((bp) => bp.widthPx)
+          .filter((w): w is number => typeof w === "number")
+          .sort((a, b) => a - b);
+        const expectedBreakpointWidths = generatedBreakpointSet
+          .map((bp) => bp.widthPx)
+          .sort((a, b) => a - b);
+        const breakpointSetApplied =
+          devices && devices.length > 0
+            ? jsonValuesEqual(currentBreakpointWidths, expectedBreakpointWidths)
+            : generatedBreakpointSet.length === 0 ||
+              hasBreakpointSet(current.breakpointSet);
+        return framesApplied && breakpointSetApplied;
       },
     });
 

package/corpus/templates/design/actions/generate-screens.ts

@@ -34,7 +34,7 @@ const DEVICE_REGION_SIZE: Record<
 > = {
   mobile: { width: 390, height: 844 },
   tablet: { width: 768, height: 1024 },
-  desktop: { width: 1440, height: 1024 },
+  desktop: { width: 1440, height: 900 },
 };
 
 function regionSizeForScreen(screen: {
@@ -135,10 +135,11 @@ const requestedScreenSchema = z
       .enum(["mobile", "tablet", "desktop"])
       .optional()
       .describe(
-        "Intended viewport for this screen. Defaults to desktop-sized when " +
-          "omitted — pass 'mobile' for phone screens and 'tablet' for iPad-" +
-          "width screens so the canvas region matches the content instead of " +
-          "always sizing every screen as desktop.",
+        "Intended viewport for this DISTINCT screen. Defaults to desktop-sized " +
+          "when omitted. Use 'mobile' or 'tablet' only for a genuinely " +
+          "device-specific screen (e.g. a mobile-only page), NOT to create " +
+          "per-device copies of the same page — those are breakpoint frames of " +
+          "one document, chosen with generate-design's `devices` param.",
       ),
     width: z
       .number()
@@ -168,15 +169,20 @@ const requestedScreenSchema = z
 
 export default defineAction({
   description:
-    "Start a multi-screen generation session on the Design canvas. " +
-    "Use this before generating multiple screens or variations in parallel: it " +
-    "assigns non-overlapping canvas regions and returns per-frame generation " +
-    "instructions including canvasFrame placements. The session state is " +
-    "agent-facing planning state consumed by generate-design and view-screen. " +
-    "Pass each screen's deviceType ('mobile', 'tablet', or 'desktop') so its " +
-    "canvas region matches the content — a desktop dashboard should not be " +
-    "boxed into a 390px mobile-width frame. Defaults to desktop when omitted; " +
-    "pass explicit width/height instead for a non-standard viewport. " +
+    "Start a multi-screen generation session on the Design canvas for " +
+    "genuinely DISTINCT screens — different pages or states such as Home, " +
+    "Dashboard, and Checkout — each saved as its own screen file. " +
+    "Do NOT use this to model device responsiveness: mobile/tablet/desktop " +
+    "variants of the SAME page are breakpoint frames of one document, not " +
+    "separate screen files. Choose those device frames with generate-design's " +
+    "`devices` param instead of adding one screen per device here. " +
+    "It assigns non-overlapping canvas regions and returns per-frame " +
+    "generation instructions including canvasFrame placements. The session " +
+    "state is agent-facing planning state consumed by generate-design and " +
+    "view-screen. Set a screen's deviceType ('mobile', 'tablet', or 'desktop') " +
+    "only for a genuinely device-specific distinct screen (e.g. a mobile-only " +
+    "page) so its canvas region matches the content; it defaults to desktop, " +
+    "or pass explicit width/height for a non-standard viewport. " +
     "After this action, fan out calls to generate-design for each returned " +
     "frame, passing the returned canvasFrame values to generate-design so " +
     "screens appear in the infinite overview canvas.",
@@ -326,6 +332,37 @@ export default defineAction({
         .map((file) => file.filename)
         .filter((filename): filename is string => Boolean(filename)),
     );
+
+    // Region packing starts at x:0, so offset the whole batch past screens
+    // already on the board — otherwise a follow-up session stacks its screens
+    // on top of existing ones (generate-design's per-frame collision check is
+    // only a fallback; offsetting here keeps the batch's own layout intact).
+    const existingDesignRows = await db
+      .select({ data: schema.designs.data })
+      .from(schema.designs)
+      .where(eq(schema.designs.id, designId));
+    let boardRightEdge = 0;
+    try {
+      const raw = existingDesignRows[0]?.data;
+      const parsed = raw ? (JSON.parse(raw) as Record<string, unknown>) : {};
+      const frames = (parsed.canvasFrames ?? {}) as Record<
+        string,
+        { x?: number; width?: number }
+      >;
+      for (const frame of Object.values(frames)) {
+        const x = typeof frame?.x === "number" ? frame.x : 0;
+        const width = typeof frame?.width === "number" ? frame.width : 0;
+        boardRightEdge = Math.max(
+          boardRightEdge,
+          x + width + DEFAULT_ASSIGNED_REGION_GAP,
+        );
+      }
+    } catch {
+      // Malformed data — fall back to the origin.
+    }
+    if (boardRightEdge > 0) {
+      for (const region of regions) region.x += boardRightEdge;
+    }
     // Dedupe any filename (explicit or auto-generated) so two screens can
     // never resolve to the same target file, and so no target collides with
     // an existing screen — otherwise generate-design silently overwrites the

package/corpus/templates/design/actions/present-design-variants.ts

@@ -29,10 +29,13 @@ const MOBILE_HEIGHT = 844;
 const TABLET_WIDTH = 768;
 const TABLET_HEIGHT = 1024;
 const DESKTOP_WIDTH = 1440;
-const DESKTOP_HEIGHT = 1024;
-const DEFAULT_RESPONSIVE_BREAKPOINTS = [390, 768, 1440].map((widthPx) => ({
+const DESKTOP_HEIGHT = 900;
+// Desktop-base default: the primary/base frame is Desktop (1440), so the
+// breakpoint set is Mobile only. The primary width is never included and no
+// tablet is auto-added, matching generate-design's device derivation.
+const DEFAULT_RESPONSIVE_BREAKPOINTS = [MOBILE_WIDTH].map((widthPx) => ({
   id: `generated-${widthPx}`,
-  label: widthPx === 390 ? "Mobile" : widthPx === 768 ? "Tablet" : "Desktop",
+  label: "Mobile",
   widthPx,
   prefix: widthToPrefix(widthPx),
 }));

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -66,6 +66,7 @@ import { zoomBridgeScript } from "../../../.generated/bridge/zoom.generated";
 import { isTrustedCanvasBridgeMessage } from "./bridge-security";
 import { captureAnnotatedScreenshot } from "./design-canvas/annotation-snapshot";
 import { submitDesignAnnotations } from "./design-canvas/annotation-submit";
+import { appendContentSizeReporter } from "./design-canvas/content-size-report";
 import {
   getScreenContentPointFromClient,
   getZoomToCursorScrollDelta,
@@ -2181,6 +2182,13 @@ export function DesignCanvas({
       ].join("");
       frameDocument = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${iframeRenderContent}${bridgeToInject}</body></html>`;
     }
+    // Overview frames report their own content height so the canvas can
+    // content-fit them (Framer-style). Embedded (overview) frames only — a
+    // focused single-screen view fills the viewport and must keep native
+    // 100vh/min-h-screen, which the reporter's guard would otherwise pin.
+    if (isEmbeddedFrame) {
+      frameDocument = appendContentSizeReporter(frameDocument);
+    }
     return injectSessionReplayIframeBootstrap(frameDocument);
     // editorChromeScaleX/Y are intentionally NOT deps: they only seed the initial
     // baked chrome scale. Live zoom updates flow through the set-editor-chrome-scale