@agent-native/core 0.124.2 → 0.124.3

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

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

@@ -82,6 +82,10 @@ import {
   DEFAULT_LINE_STROKE,
   DEFAULT_LINE_STROKE_WIDTH_PX,
 } from "./canvas-primitive-style";
+import {
+  CONTENT_SIZE_REPORT_MESSAGE_TYPE,
+  appendContentSizeReporter,
+} from "./design-canvas/content-size-report";
 import { appendHitTestResponder } from "./design-canvas/hit-test";
 import { DesignCanvas } from "./DesignCanvas";
 import { dndHostLog } from "./dnd-debug";
@@ -297,6 +301,7 @@ import {
 import {
   angleBetween,
   cloneFrameGeometryById,
+  deviceViewportFloorForWidth,
   findTopFrameEntryAtPoint,
   frameGeometryWithOverrides,
   frameStyleLeftTop,
@@ -314,6 +319,7 @@ import {
   resolveFrameGeometrySync,
   rotatePointAroundCenter,
   sameFrameGeometry,
+  visibleBreakpointWidths,
 } from "./multi-screen/frame-geometry";
 import {
   angleFromDraggedEndpoint,
@@ -489,6 +495,11 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   const [surfaceSize, setSurfaceSize] = useState({ width: 0, height: 0 });
   const [frameGeometry, setFrameGeometry] = useState<FrameGeometryById>({});
   const frameGeometryRef = useRef(frameGeometry);
+  // Measured content height per [data-screen-iframe-id] (primary = screen id,
+  // breakpoint = getBreakpointIframeId); drives content-fit auto-height.
+  const [measuredIframeHeights, setMeasuredIframeHeights] = useState<
+    Record<string, number>
+  >({});
   const liveFrameDragPositionsRef = useRef(
     new Map<string, { left: number; top: number }>(),
   );
@@ -7237,15 +7248,86 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   // entry object when a screen's own screen/metadata/geometry are unchanged
   // by value, so mapping over canvasFrames for the N-1 screens NOT being
   // dragged doesn't allocate anything new for them on this same tick.
+  // Opaque-origin sandboxed iframes can't be read via contentDocument, so map a
+  // content-size report to its frame by matching event.source to contentWindow.
+  useEffect(() => {
+    const handleContentSize = (event: MessageEvent) => {
+      const data = event.data;
+      if (
+        !data ||
+        typeof data !== "object" ||
+        data.type !== CONTENT_SIZE_REPORT_MESSAGE_TYPE ||
+        typeof data.height !== "number" ||
+        !Number.isFinite(data.height) ||
+        data.height <= 0 ||
+        // Ignore an implausible height (matches the persist sanity ceiling) so a
+        // bogus postMessage can't blow a frame up to an unusable size.
+        data.height > 100_000
+      ) {
+        return;
+      }
+      const surface = surfaceRef.current;
+      if (!surface || !event.source) return;
+      const iframes = surface.querySelectorAll<HTMLIFrameElement>(
+        "iframe[data-screen-iframe-id]",
+      );
+      let iframeId: string | null = null;
+      for (const iframe of iframes) {
+        if (iframe.contentWindow === event.source) {
+          iframeId = iframe.getAttribute("data-screen-iframe-id");
+          break;
+        }
+      }
+      if (!iframeId) return;
+      const key = iframeId;
+      const height = Math.round(data.height);
+      setMeasuredIframeHeights((prev) => {
+        const current = prev[key];
+        // Ignore sub-pixel churn so a report can't trigger a re-render that
+        // triggers another report.
+        if (current !== undefined && Math.abs(current - height) <= 1) {
+          return prev;
+        }
+        return { ...prev, [key]: height };
+      });
+    };
+    window.addEventListener("message", handleContentSize);
+    return () => window.removeEventListener("message", handleContentSize);
+  }, []);
+
   const canvasFrames = useMemo(() => {
     const cache = canvasFrameEntryCacheRef.current;
     const nextIds = new Set<string>();
     const next = renderedScreens.map((screen) => {
       nextIds.add(screen.id);
       const metadata = getResolvedMetadata(screen);
-      const geometry =
+      const rawGeometry =
         frameGeometry[screen.id] ??
         getInitialFrameGeometry(screenIndexById.get(screen.id) ?? 0, metadata);
+      // Content-fit height, applied ONLY once the frame's own content has been
+      // measured, and only for inline (srcdoc) screens — URL-backed
+      // localhost/fusion screens render src= and never report. Until a
+      // measurement arrives the persisted geometry is kept untouched, so the
+      // canvas scale and resize gestures are unaffected. Floors by the natural
+      // metadata width (not the resizable box width, which would flip the
+      // responsive scale on resize) and only grows; never shrinks a larger
+      // user-set height.
+      const measuredPrimaryHeight = measuredIframeHeights[screen.id];
+      const isInlineScreen = !(
+        metadata.previewUrl ?? getPreviewUrl(screen.content)
+      );
+      const autoHeight =
+        isInlineScreen && measuredPrimaryHeight
+          ? Math.max(
+              deviceViewportFloorForWidth(metadata.width),
+              rawGeometry.height ?? 0,
+              measuredPrimaryHeight,
+            )
+          : (rawGeometry.height ?? 0);
+      const geometry =
+        !autoHeight || autoHeight === rawGeometry.height
+          ? rawGeometry
+          : { ...rawGeometry, height: autoHeight };
       const prior = cache.get(screen.id);
       if (
         prior &&
@@ -7269,7 +7351,13 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     }
     pruneResolvedMetadataCache(resolvedMetadataCacheRef.current, nextIds);
     return next;
-  }, [frameGeometry, getResolvedMetadata, renderedScreens, screenIndexById]);
+  }, [
+    frameGeometry,
+    getResolvedMetadata,
+    measuredIframeHeights,
+    renderedScreens,
+    screenIndexById,
+  ]);
   // Interaction-protected screens are never eligible for LRU eviction. Active
   // screen/frame selection are the primary signals; layer selection, native
   // file-drop targeting, gradient editing, and in-flight frame transforms are
@@ -7321,10 +7409,21 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       canvasZoom,
     );
     const next = computeBoundedScreenCullState({
-      candidates: canvasFrames.map(({ screen, geometry }) => ({
+      candidates: canvasFrames.map(({ screen, metadata, geometry }) => ({
         id: screen.id,
-        geometry: getResponsiveScreenCullGeometry(screen, geometry),
-        iframeCount: 1 + (screen.breakpointWidths?.length ?? 0),
+        geometry: getResponsiveScreenCullGeometry(
+          screen,
+          geometry,
+          (widthPx) =>
+            measuredIframeHeights[getBreakpointIframeId(screen.id, widthPx)],
+        ),
+        // Count only the breakpoint frames actually mounted (the row filters
+        // duplicates of the device width) so the iframe budget isn't
+        // over-consumed, prematurely evicting visible frames.
+        iframeCount:
+          1 +
+          visibleBreakpointWidths(screen.breakpointWidths, metadata.width)
+            .length,
       })),
       viewport,
       protectedScreenIds: protectedLiveScreenIds,
@@ -7337,7 +7436,14 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     hasBeenVisibleScreenIdsRef.current = next.everVisibleScreenIds;
     lastVisibleEpochByScreenIdRef.current = next.lastVisibleEpochByScreenId;
     return next.tierByScreenId;
-  }, [canvasFrames, canvasZoom, pan, protectedLiveScreenIds, surfaceSize]);
+  }, [
+    canvasFrames,
+    canvasZoom,
+    measuredIframeHeights,
+    pan,
+    protectedLiveScreenIds,
+    surfaceSize,
+  ]);
   const topScreenId = useMemo(
     () =>
       selectedIds.find((id) =>
@@ -7692,6 +7798,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
               screen={screen}
               metadata={metadata}
               geometry={geometry}
+              measuredIframeHeights={measuredIframeHeights}
               locked={lockedScreenIdSet.has(screen.id)}
               screenContent={screenContentById.get(screen.id)}
               renderBreakpointContent={renderBreakpointContent}
@@ -9008,6 +9115,9 @@ interface ScreenProps {
   screen: ScreenFile;
   metadata: ResolvedScreenMetadata;
   geometry: FrameGeometry;
+  /** Measured content heights by [data-screen-iframe-id]; drives breakpoint
+   * frame auto-height. */
+  measuredIframeHeights: Record<string, number>;
   locked: boolean;
   isActive: boolean;
   isSelected: boolean;
@@ -9079,6 +9189,7 @@ const Screen = memo(function Screen({
   screen,
   metadata,
   geometry,
+  measuredIframeHeights,
   locked,
   isActive,
   isSelected,
@@ -9173,8 +9284,12 @@ const Screen = memo(function Screen({
   // rebuild the string every render (that would reload the iframe).
   // Keyed only on screen.content; the hit-test script itself is constant.
   const srcdocWithHitTest = useMemo(() => {
+    // Also carries the content-size reporter so breakpoint/primary frames
+    // rendered via this fallback iframe (read-only/thumbnail overview, when no
+    // editable DesignCanvas is supplied) still report their own height and
+    // content-fit. The editable DesignCanvas path injects its own reporter.
     return injectSessionReplayIframeBootstrap(
-      appendHitTestResponder(screen.content),
+      appendContentSizeReporter(appendHitTestResponder(screen.content)),
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screen.content]);
@@ -9584,6 +9699,7 @@ const Screen = memo(function Screen({
         <BreakpointPreviewRow
           screen={screen}
           primaryGeometry={geometry}
+          measuredIframeHeights={measuredIframeHeights}
           // See getBreakpointFrameGeometry's doc comment: reusing the
           // primary frame's OWN previewViewport.scale (how far the user has
           // resized this screen's box away from its natural/metadata width)
@@ -9641,9 +9757,29 @@ const Screen = memo(function Screen({
   );
 }, areScreenPropsEqual);
 
+/** Compares only this screen's breakpoint heights so one frame's report
+ * re-renders only its owning screen (the primary rides on `geometry`). */
+function sameBreakpointMeasuredHeights(
+  screen: ScreenFile,
+  a: Record<string, number>,
+  b: Record<string, number>,
+): boolean {
+  if (a === b) return true;
+  for (const width of screen.breakpointWidths ?? []) {
+    const key = getBreakpointIframeId(screen.id, width);
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+
 function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
   return (
     prev.screen === next.screen &&
+    sameBreakpointMeasuredHeights(
+      prev.screen,
+      prev.measuredIframeHeights,
+      next.measuredIframeHeights,
+    ) &&
     prev.screenContent === next.screenContent &&
     prev.renderBreakpointContent === next.renderBreakpointContent &&
     prev.cullTier === next.cullTier &&
@@ -9717,6 +9853,7 @@ const BREAKPOINT_LABEL_WITH_WIDTH_MIN_FRAME_WIDTH = 128;
 function BreakpointPreviewRow({
   screen,
   primaryGeometry,
+  measuredIframeHeights,
   primaryScale,
   naturalAspect,
   previewUrl,
@@ -9742,6 +9879,8 @@ function BreakpointPreviewRow({
 }: {
   screen: ScreenFile;
   primaryGeometry: FrameGeometry;
+  /** Measured content heights by [data-screen-iframe-id]. */
+  measuredIframeHeights: Record<string, number>;
   /** The primary frame's own resize scale (`getScreenPreviewViewport(...).
    *  scale`) — see getBreakpointFrameGeometry's doc comment for why this,
    *  not primaryGeometry alone, drives each breakpoint frame's on-canvas
@@ -9807,7 +9946,11 @@ function BreakpointPreviewRow({
   const frameActionLabel = interactMode
     ? t("multiScreenCanvas.fullView")
     : t("designEditor.modes.interact");
-  const breakpointWidths = screen.breakpointWidths ?? [];
+  const breakpointWidths = visibleBreakpointWidths(
+    screen.breakpointWidths,
+    // Immutable device width, not the resizable box width (see frame-geometry).
+    metadata.width ?? primaryGeometry.width,
+  );
   // Place additional frames to the right of the primary, starting after the gap
   let offsetX = primaryGeometry.width + BREAKPOINT_FRAME_GAP;
 
@@ -9826,7 +9969,13 @@ function BreakpointPreviewRow({
     <>
       {breakpointWidths.map((widthPx) => {
         const { frameWidth, frameHeight, naturalHeight, scale } =
-          getBreakpointFrameGeometry({ widthPx, naturalAspect, primaryScale });
+          getBreakpointFrameGeometry({
+            widthPx,
+            naturalAspect,
+            primaryScale,
+            contentHeightPx:
+              measuredIframeHeights[getBreakpointIframeId(screen.id, widthPx)],
+          });
         const isActive = activeBreakpointWidth === widthPx;
         const editableContent = renderBreakpointContent?.(screen, metadata, {
           widthPx,

package/corpus/templates/design/app/components/design/design-canvas/content-size-report.ts

@@ -0,0 +1,124 @@
+/**
+ * Content-size reporter injected into every canvas iframe (primary + each
+ * breakpoint) so a frame can grow to fit its own content instead of inheriting
+ * the primary frame's aspect ratio. The iframes are sandbox="allow-scripts"
+ * (opaque origin), so the parent can't read contentDocument — this measures
+ * scrollHeight inside the frame and posts { type, width, height } out, keyed by
+ * event.source. It first pins full-height utilities to a fixed per-frame
+ * --agent-native-device-vh so a min-h-screen hero can't chase the growing frame
+ * (runaway); raw inline 100vh is not remapped.
+ */
+
+const CONTENT_SIZE_REPORT_BRIDGE = `
+<style data-agent-native-content-size-guard>
+  .min-h-screen { min-height: var(--agent-native-device-vh, 100vh) !important; }
+  .h-screen { height: var(--agent-native-device-vh, 100vh) !important; }
+  .min-h-dvh { min-height: var(--agent-native-device-vh, 100dvh) !important; }
+  .h-dvh { height: var(--agent-native-device-vh, 100dvh) !important; }
+  .min-h-svh { min-height: var(--agent-native-device-vh, 100svh) !important; }
+  .h-svh { height: var(--agent-native-device-vh, 100svh) !important; }
+</style>
+<script data-agent-native-content-size-bridge>
+(function () {
+  if (window.__agentNativeContentSizeReport) return;
+  window.__agentNativeContentSizeReport = true;
+
+  // Must match deviceViewportFloorForWidth in frame-geometry.ts.
+  function deviceViewportHeight(widthPx) {
+    if (widthPx <= 640) return 844; // phone
+    if (widthPx <= 1024) return 1024; // tablet
+    return 900; // desktop
+  }
+
+  // Idempotent: only writes when the value changes. The MutationObserver below
+  // watches documentElement attributes, so an unconditional re-write here would
+  // observe its own style change and loop forever (~60fps) on static content.
+  var lastVh = "";
+  function applyDeviceVh() {
+    var vh = deviceViewportHeight(window.innerWidth || 0) + "px";
+    if (vh === lastVh) return;
+    lastVh = vh;
+    document.documentElement.style.setProperty("--agent-native-device-vh", vh);
+  }
+
+  function measure() {
+    var doc = document.documentElement;
+    var body = document.body;
+    return Math.max(
+      doc ? doc.scrollHeight : 0,
+      body ? body.scrollHeight : 0,
+      body ? body.offsetHeight : 0,
+    );
+  }
+
+  var lastHeight = -1;
+  var lastWidth = -1;
+  var frame = 0;
+  function report() {
+    frame = 0;
+    applyDeviceVh();
+    var height = measure();
+    var width = window.innerWidth || 0;
+    if (height === lastHeight && width === lastWidth) return;
+    lastHeight = height;
+    lastWidth = width;
+    try {
+      window.parent.postMessage(
+        { type: "agent-native:content-size", width: width, height: height },
+        "*",
+      );
+    } catch (err) {
+      /* cross-origin parent — ignore */
+    }
+  }
+  function scheduleReport() {
+    if (frame) return;
+    frame = window.requestAnimationFrame(report);
+  }
+
+  applyDeviceVh();
+
+  if (typeof ResizeObserver === "function") {
+    var ro = new ResizeObserver(scheduleReport);
+    if (document.documentElement) ro.observe(document.documentElement);
+  }
+  if (typeof MutationObserver === "function") {
+    var mo = new MutationObserver(scheduleReport);
+    mo.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true,
+    });
+  }
+  window.addEventListener("resize", scheduleReport);
+  window.addEventListener("load", scheduleReport);
+  // Late webfont / Tailwind-JIT reflows: a few settle passes catch height
+  // changes that land after the initial paint without a permanent timer.
+  [0, 120, 400, 1000].forEach(function (delay) {
+    window.setTimeout(scheduleReport, delay);
+  });
+  scheduleReport();
+})();
+</script>
+`;
+
+export const CONTENT_SIZE_REPORT_MESSAGE_TYPE = "agent-native:content-size";
+
+/** Appends the reporter + full-height guard, mirroring appendHitTestResponder's
+ * marker handling so it runs regardless of document structure. */
+export function appendContentSizeReporter(html: string): string {
+  if (html.includes("</body>")) {
+    return html.replace(
+      "</body>", // i18n-ignore generated iframe HTML marker
+      CONTENT_SIZE_REPORT_BRIDGE + "</body>", // i18n-ignore generated iframe HTML injection
+    );
+  }
+  if (html.includes("</html>")) {
+    return html.replace(
+      "</html>", // i18n-ignore generated iframe HTML marker
+      CONTENT_SIZE_REPORT_BRIDGE + "</html>", // i18n-ignore generated iframe HTML injection
+    );
+  }
+  return html + CONTENT_SIZE_REPORT_BRIDGE;
+}

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

@@ -26,9 +26,39 @@ type ResponsiveLayoutScreen = {
   layoutGroupId?: string;
 };
 
+/** Drops any breakpoint whose width equals the primary frame's own width — a
+ * redundant duplicate of the base — also cleaning up designs authored before
+ * the default set excluded the primary width. */
+export function visibleBreakpointWidths(
+  breakpointWidths: readonly number[] | undefined,
+  primaryWidthPx: number | undefined,
+): number[] {
+  const deduped = Array.from(
+    new Set(
+      (breakpointWidths ?? []).filter(
+        (width) => Number.isFinite(width) && width > 0,
+      ),
+    ),
+  );
+  if (primaryWidthPx === undefined || !Number.isFinite(primaryWidthPx)) {
+    return deduped;
+  }
+  return deduped.filter((width) => Math.abs(width - primaryWidthPx) > 1);
+}
+
+/** Minimum height for a frame of the given width — one device viewport tall
+ * before it grows to content. Keep in sync with deviceViewportHeight in
+ * content-size-report.ts. */
+export function deviceViewportFloorForWidth(widthPx: number): number {
+  if (!Number.isFinite(widthPx) || widthPx <= 640) return 844;
+  if (widthPx <= 1024) return 1024;
+  return 900;
+}
+
 export function getResponsiveScreenGroupSize(
   screen: ResponsiveLayoutScreen,
   primaryGeometry?: Partial<FrameGeometry>,
+  resolveBreakpointHeightPx?: (widthPx: number) => number | undefined,
 ): {
   width: number;
   height: number;
@@ -42,9 +72,18 @@ export function getResponsiveScreenGroupSize(
   const sourceWidth = Math.max(1, screen.metadata?.width ?? 1280);
   const sourceHeight = Math.max(1, screen.metadata?.height ?? 2560);
   const scale = baseWidth / sourceWidth;
-  const breakpoints = (screen.breakpointWidths ?? []).filter(
-    (width) => Number.isFinite(width) && width > 0,
+  const breakpoints = visibleBreakpointWidths(
+    screen.breakpointWidths,
+    // The immutable device width, not the resizable on-canvas box width — a
+    // primary resized to a breakpoint width must not hide that breakpoint.
+    screen.metadata?.width ?? primaryGeometry?.width,
   );
+  const breakpointNaturalHeight = (width: number) => {
+    const measured = resolveBreakpointHeightPx?.(width);
+    return measured && measured > 0
+      ? Math.max(deviceViewportFloorForWidth(width), measured)
+      : (width * sourceHeight) / sourceWidth;
+  };
   return {
     width:
       baseWidth +
@@ -54,9 +93,7 @@ export function getResponsiveScreenGroupSize(
       ),
     height: Math.max(
       baseHeight,
-      ...breakpoints.map(
-        (width) => width * (sourceHeight / sourceWidth) * scale,
-      ),
+      ...breakpoints.map((width) => breakpointNaturalHeight(width) * scale),
     ),
   };
 }
@@ -73,8 +110,13 @@ export function getResponsiveScreenGroupSize(
 export function getResponsiveScreenCullGeometry(
   screen: ResponsiveLayoutScreen,
   primaryGeometry: FrameGeometry,
+  resolveBreakpointHeightPx?: (widthPx: number) => number | undefined,
 ): FrameGeometry {
-  const size = getResponsiveScreenGroupSize(screen, primaryGeometry);
+  const size = getResponsiveScreenGroupSize(
+    screen,
+    primaryGeometry,
+    resolveBreakpointHeightPx,
+  );
   const rotation = primaryGeometry.rotation ?? 0;
   if (!rotation) {
     return {
@@ -306,6 +348,9 @@ export function getBreakpointFrameGeometry(args: {
   widthPx: number;
   naturalAspect: number;
   primaryScale: number;
+  /** Measured content height at this width; wins over the primary-aspect
+   * projection, which clipped narrower frames (they reflow taller). */
+  contentHeightPx?: number;
 }): {
   frameWidth: number;
   frameHeight: number;
@@ -316,9 +361,16 @@ export function getBreakpointFrameGeometry(args: {
     Number.isFinite(args.primaryScale) && args.primaryScale > 0
       ? args.primaryScale
       : 1;
-  const naturalHeight = Math.round(
-    args.widthPx * Math.max(0.01, args.naturalAspect),
-  );
+  const measured =
+    args.contentHeightPx && args.contentHeightPx > 0
+      ? Math.round(args.contentHeightPx)
+      : 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 naturalHeight =
+    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 };